Modal

() => {
  const [isOpen, setIsOpen] = useState(false)

  const openModal = () => {
    setIsOpen(true)
  }

  const closeModal = () => {
    setIsOpen(false)
  }

  return (
    <>
      <Button onClick={openModal}>Abrir Modal</Button>
      <Modal isOpen={isOpen} onRequestClose={closeModal} width={600} label="Testando modal">
        <Box
          paddingType="square"
          paddingSize="sm"
          border="xs"
          borderColor="neutral100"
          style={{ borderBottom: 'none' }}
        >
          <Title size="body01" weight="bold" color="neutral800">
            Testando modal
          </Title>
        </Box>
        <Box paddingType="square" paddingSize="sm" border="xs" borderColor="neutral100">
          <Text>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse mollis condimentum ex ac pellentesque. Aenean a vestibulum velit.
          </Text>
        </Box>
        <Box
          paddingType="squish"
          paddingSize="sm"
          border="xs"
          borderColor="neutral100"
          style={{ display: 'flex', borderTop: 'none' }}
        >
          <Button className="ml-auto" onClick={closeModal}>
            Fechar
          </Button>
        </Box>
      </Modal>
    </>
  )
}