Modal

    () => {
      const [isOpen, setIsOpen] = useState(false);
      return (
        <>
          <Button onClick={() => setIsOpen(true)}>Open Modal</Button>
          <Modal
            isOpen={isOpen}
            onClose={() => setIsOpen(false)}
            cardMaxWidth="narrow"
          >
            Content
          </Modal>
        </>
      )
    }
  

    () => {
      const [isOpen, setIsOpen] = useState(false);
      return (
        <>
          <Button onClick={() => setIsOpen(true)}>Open Modal</Button>
          <Modal
            isOpen={isOpen}
            onClose={() => setIsOpen(false)}
            title={demoText.s}
            description={demoText.m}
            cardMaxWidth="narrow"
          >
            <Arrange gap="s" justifyContent="end" marginTop="l">
              <Button onClick={() => setIsOpen(false)} hasFullWidth>Cancel</Button>
              <Button onClick={() => setIsOpen(false)} hasFullWidth variant="accent">Save</Button>
            </Arrange>
          </Modal>
        </>
      )
    }
  

    () => {
      const [isOpen, setIsOpen] = useState(false);
      return (
        <>
          <Button onClick={() => setIsOpen(true)}>Open Modal</Button>
          <Modal
            isOpen={isOpen}
            onClose={() => setIsOpen(false)}
            cardPadding="var(--grn-card-padding)"
            cardRadius="var(--grn-card-radius)"
            cardMaxWidth="wide"
            title="Resize the window and check the padding and radius"
            description={demoText.xl}
          />
        </>
      )
    }
  

    () => {
      const [isOpen, setIsOpen] = useState(false);
      const [activeWidth, setActiveWidth] = useState('narrow');
      return (
        <>
          <Arrange gap="s">
            {['narrow', 'medium', 'wide'].map((width) => (
              <Button
                key={width}
                onClick={() => {
                  setActiveWidth(width)
                  setIsOpen(true)
                }}
              >
                {width}
              </Button>
            ))}
          </Arrange>
          <Modal
            isOpen={isOpen}
            onClose={() => setIsOpen(false)}
            cardPadding="var(--grn-card-padding)"
            cardRadius="var(--grn-card-radius)"
            cardMaxWidth={activeWidth}
            title={activeWidth}
            description={demoText.xl}
          />
        </>
      )
    }

    () => {
      const [isOpen, setIsOpen] = useState(false);
      return (
        <>
          <Button onClick={() => setIsOpen(true)}>Open Modal</Button>
          <Modal
            isOpen={isOpen}
            onClose={() => setIsOpen(false)}
            cardMaxWidth="narrow"
          >
            {[...demoFilms, ...demoFilms].map((film, index) => (
              <Text size="l" key={index}>{film}</Text>
            ))}
          </Modal>
        </>
      )
    }
  

    () => {
      const [isOpen, setIsOpen] = useState(false);
      return (
        <>
          <Button onClick={() => setIsOpen(true)}>Open Modal</Button>
          <Modal
            isOpen={isOpen}
            onClose={() => setIsOpen(false)}
            cardMaxWidth="narrow"
            cardPadding="0"
          >
            <Arrange autoFlow="row" rows="auto auto" justifyContent="stretch" height="80vh">
              <Box padding="xl" overflow="auto" maxHeight="100%">
                {[...demoFilms, ...demoFilms].map((film, index) => (
                  <Text size="l" key={index}>{film}</Text>
                ))}
              </Box>
              <Arrange justifyContent="space-between" padding="xl" borderSide="top">
                <Button>Action</Button>
                <Button variant="accent">Action</Button>
              </Arrange>
            </Arrange>
          </Modal>
        </>
      )
    }
  

    () => {
      const [isOpen, setIsOpen] = useState(false);
      return (
        <>
          <Button onClick={() => setIsOpen(true)}>Open Modal</Button>
          <Modal
            isOpen={isOpen}
            onClose={() => setIsOpen(false)}
            cardPadding="0" 
            cardMaxWidth="narrow"
          >
            <Box
              position="sticky"
              top="0"
              backgroundColor="floatingBackground"
              paddingX="xl"
              paddingTop="xl"
              paddingBottom="m"
            >
              <Modal.Title>
                Sticky title
              </Modal.Title>
            </Box>
            <Box paddingX="xl" paddingBottom="xl">
              {[...demoFilms, ...demoFilms].map((film, index) => (
                <Text size="l" key={index}>{film}</Text>
              ))}
            </Box>
          </Modal>
        </>
      )
    }
  

    () => {
      const [isOpen, setIsOpen] = useState(false);
      return (
        <>
          <Button onClick={() => setIsOpen(true)}>Open Modal</Button>
          <Modal
            isOpen={isOpen}
            onClose={() => setIsOpen(false)}
            paddingX="0"
            cardPadding="xl"
            cardRadius="0"
            cardMaxWidth="100%"
            cardHeight="100vh"
            cardMaxHeight="unset"
          >
            <Stack gap="m">
              <Text>
                {demoText.xl}
              </Text>
              <Button
                onClick={() => setIsOpen(false)}
                variant="accent"
              >
                Close
              </Button>
            </Stack>
          </Modal>
        </>
      )
    }