function SizeExample() {
    const { isOpen, onOpen, onClose } = useDisclosure();
    const [size, setSize] = React.useState("md");
    const [scrollBehavior, setScrollBehavior] = React.useState("inside");
  
    const handleSizeClick = (newSize) => {
      setSize(newSize);
      onOpen();
    };
  
    const sizes = ['xs', 'sm', 'md', 'lg', 'xl', '2xl', '3xl', '4xl', '5xl', '6xl', 'max', 'full']
  
    return (
      <Stack spacing="10">
        <FormControl>
          <FormLabel>scrollBehavior</FormLabel>
          <RadioGroup value={scrollBehavior} onChange={setScrollBehavior}>
            <Stack align="start">
              <Radio value="inside">
                inside <Badge colorScheme="success">Preferred</Badge>
              </Radio>
              <Radio value="outside">outside</Radio>
            </Stack>
          </RadioGroup>
          <FormHelperText>
          <Link href="https://v2.chakra-ui.com/docs/components/modal#modal-overflow-behavior" isExternal>More info on the scrollBehavior prop</Link>
          </FormHelperText>
        </FormControl>
        <Wrap>
          {sizes.map((size) => (
            <Button onClick={() => handleSizeClick(size)} key={size}>
              Modal {size}
            </Button>
          ))}
  
          <Modal
            size={size}
            onClose={onClose}
            isOpen={isOpen}
            scrollBehavior={scrollBehavior}
          >
            <ModalOverlay />
            <ModalContent>
              <ModalHeader>Modal title</ModalHeader>
              <ModalCloseButton />
              <ModalBody>
                <Text mb="4">
                  This is a very long text to demonstrate the difference in
                  scrollBehavior. You may need to adjust your browser window size
                  to see the effect.
                </Text>
                <Text mb="4">
                  Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
                  Phasellus hendrerit. Pellentesque aliquet nibh nec urna. In nisi
                  neque, aliquet vel, dapibus id, mattis vel, nisi. Sed pretium,
                  ligula sollicitudin laoreet viverra, tortor libero sodales leo,
                  eget blandit nunc tortor eu nibh. Nullam mollis. Ut justo.
                  Suspendisse potenti.
                </Text>
                <Text mb="4">
                  Sed egestas, ante et vulputate volutpat, eros pede semper est,
                  vitae luctus metus libero eu augue. Morbi purus libero, faucibus
                  adipiscing, commodo quis, gravida id, est. Sed lectus. Praesent
                  elementum hendrerit tortor. Sed semper lorem at felis.
                  Vestibulum volutpat, lacus a ultrices sagittis, mi neque euismod
                  dui, eu pulvinar nunc sapien ornare nisl. Phasellus pede arcu,
                  dapibus eu, fermentum et, dapibus sed, urna.
                </Text>
                <Text mb="4">
                  Morbi interdum mollis sapien. Sed ac risus. Phasellus lacinia,
                  magna a ullamcorper laoreet, lectus arcu pulvinar risus, vitae
                  facilisis libero dolor a purus. Sed vel lacus. Mauris nibh
                  felis, adipiscing varius, adipiscing in, lacinia vel, tellus.
                  Suspendisse ac urna. Etiam pellentesque mauris ut lectus. Nunc
                  tellus ante, mattis eget, gravida vitae, ultricies ac, leo.
                  Integer leo pede, ornare a, lacinia eu, vulputate vel, nisl.
                </Text>
              </ModalBody>
              <ModalFooter>
                <Button onClick={onClose}>Close</Button>
              </ModalFooter>
            </ModalContent>
          </Modal>
        </Wrap>
      </Stack>
    );
  }