Modal

() => {
const [isOpen, setIsOpen] = React.useState(false)
return (
  <>
    <Button onClick={() => setIsOpen(!isOpen)} variant="primary">
      Open Modal
    </Button>
    <Modal
      mainButton={<Button variant="primary">Confirm</Button>}
      secondaryButton={<Button>Cancel</Button>}
      alternativeButton={<TextButton icon={<SvgAdd />}>Add</TextButton>}
      title={demoText.short}
      isOpen={isOpen}
      onCloseClick={() => setIsOpen(!isOpen)}
      onBackgroundClick={() => setIsOpen(!isOpen)}
    >
      {demoText.medium}
    </Modal>
  </>
)}

() => {
const [isOpen, setIsOpen] = React.useState(false)
return (
  <>
    <Button onClick={() => setIsOpen(!isOpen)} variant="primary">
      Open Modal
    </Button>
    <Modal
      hasDividers
      mainButton={<Button variant="primary">Confirm</Button>}
      secondaryButton={<Button>Cancel</Button>}
      alternativeButton={<TextButton icon={<SvgAdd />}>Add</TextButton>}
      title={demoText.short}
      isOpen={isOpen}
      onCloseClick={() => setIsOpen(!isOpen)}
      onBackgroundClick={() => setIsOpen(!isOpen)}
    >
      {demoText.alphabet.map((letter, index) => (
        <Container
          paddingTop="small"
          paddingBottom="small"
          borderSide="bottom"
          key={index}
        >{letter}</Container>
      ))}
    </Modal>
  </>
)}

() => {
const [isOpen, setIsOpen] = React.useState()
return (
  <>
    <Button onClick={() => setIsOpen(!isOpen)} variant="primary">
      Open Modal
    </Button>
    <Backdrop
      isOpen={isOpen}
      onClick={() => setIsOpen(!isOpen)}
    >
      <ModalCard onCloseClick={() => setIsOpen(!isOpen)}>
        <Container
          padding="xlarge"
        >
          {demoText.veryLong}
        </Container>
      </ModalCard>
    </Backdrop>
  </>
)}

() => {
const [isOpen, setIsOpen] = React.useState()
return (
  <>
    <Button onClick={() => setIsOpen(!isOpen)} variant="primary">
      Open Modal
    </Button>
    <Backdrop
      isOpen={isOpen}
      onClick={() => setIsOpen(!isOpen)}
    >
      <ModalCard
        onCloseClick={() => setIsOpen(!isOpen)}
        maxWidth={72}
      >
        <Arrange rows={['1fr', 'auto']}>
          <Container
            overflow="auto"
            maxHeight="100%"
            padding="xlarge"
          >
            <Text size="large">
              {demoText.veryLong}
            </Text>
          </Container>
          <Container backgroundColor="highlight" padding="xlarge">
            {demoText.medium}
          </Container>
        </Arrange>
      </ModalCard>
    </Backdrop>
  </>
)}