() => {
  const [open, setOpen] = useState(true);
  const [openPopover, setOpenPopover] = useState(false);
  const menuTargetref = useRef(null);
  return <>
      <Button onClick={() => setOpen(true)}>Launch modal</Button>
      <Modal open={open} onRequestClose={() => setOpen(false)} modalHeading="Add a custom domain" modalLabel="Account resources" primaryButtonText="Add" secondaryButtonText="Cancel">
        <p style={{
        marginBottom: '1rem'
      }}>
          Custom domains direct requests for your apps in this Cloud Foundry
          organization to a URL that you own. A custom domain can be a shared
          domain, a shared subdomain, or a shared domain and host.
        </p>
        <Popover open={openPopover} autoAlign>
          <div className="playground-trigger">
            <CheckboxIcon onClick={() => {
            setOpenPopover(!openPopover);
          }} />
          </div>
          <PopoverContent className="p-3">
            <div>
              <p className="popover-title">This popover uses autoAlign</p>
              <p className="popover-details">
                Scroll the container up, down, left or right to observe how the
                popover will automatically change its position in attempt to
                stay within the viewport. This works on initial render in
                addition to on scroll.
              </p>
            </div>
          </PopoverContent>
        </Popover>
        <TextInput data-modal-primary-focus id="text-input-1" labelText="Domain name" placeholder="e.g. github.com" style={{
        marginBottom: '1rem'
      }} />
        <Select id="select-1" defaultValue="us-south" labelText="Region">
          <SelectItem value="us-south" text="US South" />
          <SelectItem value="us-east" text="US East" />
        </Select>
        <Dropdown id="drop" label="Dropdown" titleText="Dropdown" items={[{
        id: 'one',
        label: 'one',
        name: 'one'
      }, {
        id: 'two',
        label: 'two',
        name: 'two'
      }]} />
        <br />
        <div ref={menuTargetref}>
          <MenuButton label="Actions" menuTarget={menuTargetref.current}>
            <MenuItem label="First action" />
            <MenuItem label="Second action" />
            <MenuItem label="Third action" />
            <MenuItem label="Danger action" kind="danger" />
          </MenuButton>
        </div>
        <br />
        <MultiSelect id="test" label="Multiselect" titleText="Multiselect" items={[{
        id: 'downshift-1-item-0',
        text: 'Option 1'
      }, {
        id: 'downshift-1-item-1',
        text: 'Option 2'
      }]} itemToString={item => item ? item.text : ''} />
      </Modal>
    </>;
}