Dropdown

    const options = [
      { content: 'Share' },
      { content: 'Move' },
      { content: 'Delete' },
    ];
    render (
      <Arrange gap="m">
        <Dropdown
          options={options}
          trigger={<Button>Open</Button>}
        />
        <Dropdown
          options={options}
          trigger={<TextButton>Open</TextButton>}
        />
        <Dropdown
          options={options}
          trigger={<IconButton icon={<IconEllipsis />}/>}
        />
      </Arrange>
    )

    const options = [
      { content: 'Share', icon: <IconShare /> },
      { content: 'Move', icon: <IconFolder /> },
      { content: 'Delete', icon: <IconTrash /> },
    ];
    render (
      <Dropdown
        options={options}
        trigger={<Button>Open</Button>}
      />
    )

    const options = [
      { content: 'Share', icon: <IconShare />, },
      { content: 'Move', icon: <IconFolder /> },
      { content: 'Delete', icon: <IconTrash />, variant: 'danger' },
    ];
    render (
      <Dropdown
        options={options}
        trigger={<Button>Open</Button>}
      />
    )

    const action = requestClose => {
      console.log('Action');
      requestClose();
    }
    const options = [
      { content: 'Share', icon: <IconShare />, },
      { content: 'Move', icon: <IconFolder /> },
      { content: 'Delete', icon: <IconTrash />, variant: 'danger' },
      { type: 'divider' },
      { type: 'node', 
        node: ({ requestClose }) => (
          <Box padding="s">
            <Button hasFullWidth onClick={() => action(requestClose)}>
              Action
            </Button>
          </Box>
        ) 
      },
    ];
    render (
      <Dropdown
        options={options}
        trigger={<Button>Open</Button>}
      />
    )

    const options = [
      { content: 'Share this file with your team and get feedback on the latest version' },
      { content: 'Move' },
      { content: 'Delete' },
    ];
    render (
      <Arrange gap="s">
        <Dropdown
          options={options}
          menuPlacement="bottomStart"
          trigger={<Button>Open bottomStart</Button>}
          menuWidth="240px"
        />
        <Dropdown
          options={options}
          menuPlacement="bottomEnd"
          trigger={<Button>Open bottomEnd</Button>}
          menuWidth="fit-content"
        />
        <Dropdown
          options={options}
          menuPlacement="topStart"
          trigger={<Button>Open topStart</Button>}
        />
        <Dropdown
          options={options}
          menuPlacement="topEnd"
          trigger={<Button>Open topEnd</Button>}
        />
      </Arrange>
    )

    const options = [
      { content: 'Share', onClick: () => console.log('Share') },
      { content: 'Move', onClick: () => console.log('Move') },
      { content: 'Delete', onClick: () => console.log('Delete') },
    ];
    render (
      <Dropdown options={options} trigger={<Button>Open</Button>}/>
    )

    () => {
      const [isOpen, setIsOpen] = useState(false);
      const options = [
        { content: 'Share', onClick: () => setIsOpen(true) },
        { content: 'Move', onClick: () => setIsOpen(true) },
        { content: 'Delete', onClick: () => setIsOpen(true) },
      ];
      return (
        <>
          <Dropdown options={options} trigger={<Button>Open</Button>}/>
           <Modal
            isOpen={isOpen}
            onClose={() => setIsOpen(false)}
          >
            Content
          </Modal>
        </>
      )
    }