render(
  <Group>
    <Button
      icon={{ name: 'general.envelope' }}
      tooltip={{ title: 'Email' }}
      variant="outline"
    />
    <Button
      icon={{ name: 'general.printer' }}
      tooltip={{ title: 'Print' }}
      variant="outline"
    />
    <Button
      icon={{ name: 'general.thickToBottomArrow' }}
      tooltip={{ title: 'Download' }}
      variant="outline"
    />
  </Group>
)

render(
  <Group axis="vertical" maxWidth={60} fontSize={4} elevation={1}>
    <Card axis="horizontal" distribution="space-between" padding={2}>
      <Text>General Permissions</Text>
      <Text>Administrator</Text>
    </Card>
    <Card
      axis="horizontal"
      alignment="center"
      padding={2}
      color="grey-8"
      subdued
    >
      <Icon
        name="general.outlinedInfoCircle"
        size="sm"
        color="grey-6"
        marginRight={2}
      />
      <Text>
        David is an <Link to="#">Organization Administrator</Link> with full
        Administrator permission everywhere.
      </Text>
    </Card>
    <Card axis="horizontal" distribution="space-between" padding={2}>
      <Text>File Access:</Text>
      <Text>Plan, Song, and Media</Text>
    </Card>
  </Group>
)

render(
  <ThemeProvider theme={{ group: { radius: 16 } }}>
    <Group size="md">
      <Button title="Email" variant="outline" />
      <Button
        icon={{ name: 'general.printer', color: 'foregroundSecondary' }}
        tooltip={{ title: 'Print' }}
      />
    </Group>
  </ThemeProvider>
)

render(
  <Group radius={0} size="lg">
    <Input placeholder="Search things..." />
    <Button icon={{ name: 'general.search' }} tooltip={{ title: 'Search' }} />
  </Group>
)