Dropdown
===

The `<Dropdown/>`'s first child component is used as the toggle element; all remaining children are wrapped in a `<Box/>` and used as the dropdown's content.

```jsx
import {Button, Flex, Box, Title, Table, Metric} from '@ui/components';

const data = [
  ['Asia Blue', 'Hayes', 31],
  ['Alex', 'Okebe', 29],
  ['KT', 'Klein', 28],
  ['Rafe', 'Goldberg', 29],
  ['Ziva', 'Mann', 34],
];

const paragraph = <p style={{marginTop: 0, marginBottom: 0}}>Quaerat laboriosam, at quos harum quia tempore error tenetur dolor. Amet et deserunt cum? Saepe pariatur fugiat sed quasi. Minus veniam, quasi est repellat molestias nostrum. Architecto error voluptatibus, reprehenderit libero officiis. Illum facere obcaecati rem iure vero fugit temporibus. Sit amet consectetur elit!</p>;

<Flex justify="around" align="center">

  <Dropdown trigger="hover">
    <Button bem={{blue_ghost: true}}>
      <span>Hover</span>
      <i className="fa fa-chevron-down"/>
    </Button>
    <Box bem={[['pop']]}>{paragraph}</Box>
  </Dropdown>

  <Dropdown align="end" justify="end" sticky>
    <Button>Click</Button>
    <Box bem={[['pop']]}>
      <Title level={4} text="Dropdown Inner Contents" />
      <hr style={{marginTop: 0}}/>
      <Flex align="start">
        <Table body={data} style={{flex: '1 0 38%', margin: 0}}/>
        {paragraph}
      </Flex>
    </Box>
  </Dropdown>
</Flex>
```