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)}
    >
      <Text>Some label</Text>
      <Spacer bottom={0.5} />
      <Layout gap="small">
        <Layout.Section>
          <TextInput placeholder="Type something" />
        </Layout.Section>
        <Layout.Section width="auto">
          <Button variant="primary">Add</Button>
        </Layout.Section>
      </Layout>
    </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>
  </>
)}