The Modal molecule creates a dialog box that is displayed on top of the current page

```react
state: { isOpen: false }
---
const close = () => setState({isOpen: false });
const Button = ButtonGroup.Button;

const Heading = Modal.Heading;
const Section = Modal.Section;

<div>
  <Button onClick={() => setState({ isOpen: true })}>
    Open Modal
  </Button>
  <Modal close={close} isOpen={state.isOpen}>
    <Heading>
      Modal
    </Heading>

    <Section>
    <ButtonGroup justifyContent="flex-end">
      <Button onClick={close}>
        Close Modal
      </Button>
    </ButtonGroup>
    </Section>
    <Section>
    <ButtonGroup justifyContent="flex-end">
      <Button onClick={close}>
        Close Modal
      </Button>
    </ButtonGroup>
    </Section>
    <Section>
    <ButtonGroup justifyContent="flex-end">
      <Button onClick={close}>
        Close Modal
      </Button>
    </ButtonGroup>
    </Section>
    <Section>
    <ButtonGroup justifyContent="flex-end">
      <Button onClick={close}>
        Close Modal
      </Button>
    </ButtonGroup>
    </Section>
    <Section>
    <ButtonGroup justifyContent="flex-end">
      <Button onClick={close}>
        Close Modal
      </Button>
    </ButtonGroup>
    </Section>
    <Section>
    <ButtonGroup justifyContent="flex-end">
      <Button onClick={close}>
        Close Modal
      </Button>
    </ButtonGroup>
    </Section>
    <Section>
    <ButtonGroup justifyContent="flex-end">
      <Button onClick={close}>
        Close Modal
      </Button>
    </ButtonGroup>
    </Section>
    <Section>
    <ButtonGroup justifyContent="flex-end">
      <Button onClick={close}>
        Close Modal
      </Button>
    </ButtonGroup>
    </Section>
    <Section>
    <ButtonGroup justifyContent="flex-end">
      <Button onClick={close}>
        Close Modal
      </Button>
    </ButtonGroup>
    </Section>
    <Section>
    <ButtonGroup justifyContent="flex-end">
      <Button onClick={close}>
        Close Modal
      </Button>
    </ButtonGroup>
    </Section>
    <Section>
    <ButtonGroup justifyContent="flex-end">
      <Button onClick={close}>
        Close Modal
      </Button>
    </ButtonGroup>
    </Section>
    <Section>
    <ButtonGroup justifyContent="flex-end">
      <Button onClick={close}>
        Close Modal
      </Button>
    </ButtonGroup>
    </Section>
    <Section>
    <ButtonGroup justifyContent="flex-end">
      <Button onClick={close}>
        Close Modal
      </Button>
    </ButtonGroup>
    </Section>
    <Section>
    <ButtonGroup justifyContent="flex-end">
      <Button onClick={close}>
        Close Modal
      </Button>
    </ButtonGroup>
    </Section>
    <Section>
    <ButtonGroup justifyContent="flex-end">
      <Button onClick={close}>
        Close Modal
      </Button>
    </ButtonGroup>
    </Section>
    <Section>
    <ButtonGroup justifyContent="flex-end">
      <Button onClick={close}>
        Close Modal
      </Button>
    </ButtonGroup>
    </Section>
    <Section>
    <ButtonGroup justifyContent="flex-end">
      <Button onClick={close}>
        Close Modal
      </Button>
    </ButtonGroup>
    </Section>
    <Section>
    <ButtonGroup justifyContent="flex-end">
      <Button onClick={close}>
        Close Modal
      </Button>
    </ButtonGroup>
    </Section>
    <Section>
    <ButtonGroup justifyContent="flex-end">
      <Button onClick={close}>
        Close Modal
      </Button>
    </ButtonGroup>
    </Section>
    <Section>
    <ButtonGroup justifyContent="flex-end">
      <Button onClick={close}>
        Close Modal
      </Button>
    </ButtonGroup>
    </Section>
    <Section>
    <ButtonGroup justifyContent="flex-end">
      <Button onClick={close}>
        Close Modal
      </Button>
    </ButtonGroup>
    </Section>
    <Section>
    <ButtonGroup justifyContent="flex-end">
      <Button onClick={close}>
        Close Modal
      </Button>
    </ButtonGroup>
    </Section>
    <Section>
    <ButtonGroup justifyContent="flex-end">
      <Button onClick={close}>
        Close Modal
      </Button>
    </ButtonGroup>
    </Section>
    <Section>
    <ButtonGroup justifyContent="flex-end">
      <Button onClick={close}>
        Close Modal
      </Button>
    </ButtonGroup>
    </Section>
    <Section>
    <ButtonGroup justifyContent="flex-end">
      <Button onClick={close}>
        Close Modal
      </Button>
    </ButtonGroup>
    </Section>
    <Section>
    <ButtonGroup justifyContent="flex-end">
      <Button onClick={close}>
        Close Modal
      </Button>
    </ButtonGroup>
    </Section>
    <Section>
    <ButtonGroup justifyContent="flex-end">
      <Button onClick={close}>
        Close Modal
      </Button>
    </ButtonGroup>
    </Section>
    <Section>
    <ButtonGroup justifyContent="flex-end">
      <Button onClick={close}>
        Close Modal
      </Button>
    </ButtonGroup>
    </Section>
    <Section>
    <ButtonGroup justifyContent="flex-end">
      <Button onClick={close}>
        Close Modal
      </Button>
    </ButtonGroup>
    </Section>
    <Section>
    <ButtonGroup justifyContent="flex-end">
      <Button onClick={close}>
        Close Modal
      </Button>
    </ButtonGroup>
    </Section>
    <Section>
    <ButtonGroup justifyContent="flex-end">
      <Button onClick={close}>
        Close Modal
      </Button>
    </ButtonGroup>
    </Section>
    <Section>
    <ButtonGroup justifyContent="flex-end">
      <Button onClick={close}>
        Close Modal
      </Button>
    </ButtonGroup>
    </Section>
    <Section>
    <ButtonGroup justifyContent="flex-end">
      <Button onClick={close}>
        Close Modal
      </Button>
    </ButtonGroup>
    </Section>
    <Section>
    <ButtonGroup justifyContent="flex-end">
      <Button onClick={close}>
        Close Modal
      </Button>
    </ButtonGroup>
    </Section>
    <Section>
    <ButtonGroup justifyContent="flex-end">
      <Button onClick={close}>
        Close Modal
      </Button>
    </ButtonGroup>
    </Section>
    <Section>
    <ButtonGroup justifyContent="flex-end">
      <Button onClick={close}>
        Close Modal
      </Button>
    </ButtonGroup>
    </Section>
  </Modal>
</div>;
```
