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
      isOpen={isOpen}
      onCloseClick={() => setIsOpen(!isOpen)}
      onBackgroundClick={() => setIsOpen(!isOpen)}
    >
      <Spacer bottom="xsmall">
        <Text>Some label</Text>
      </Spacer>
      <Arrange gap="small" columns={['1fr', 'auto']}>
        <TextInput placeholder="Type something" />
        <Button variant="primary">Add</Button>
      </Arrange>
    </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>
  </>
)}