Fontselect is a select menu that shows previews of each font. It uses the fonts
defined in _font-options.js_ as defaults. You can pass in a custom `options`
prop to override these defaults.

### Default selection
```jsx
const [value, setValue] = React.useState();
const handleChange = event => setValue(event.target.value);

<FontSelect
  aria-label="Demo label"
  onChange={handleChange}
  className="bg-transparent border border-current"
  value={value}
/>
```

### With custom font selection
```jsx
import FontPreview from "./font-preview";

const options = [
  {
    value: "Rochester, cursive",
    label: "Rochester",
    component: <FontPreview font="Rochester" />
  }
];

const [value, setValue] = React.useState();
const handleChange = event => setValue(event.target.value);

<FontSelect
  aria-label="Demo label"
  options={options}
  onChange={handleChange}
  className="bg-transparent border border-current"
  value={value}
/>
```

### Using FontPreview with custom label when rendering font component
```jsx
import FontPreview from "./font-preview";

const options = [
  {
    value: "system-ui",
    label: "System Font",
    component: <FontPreview label="System Font" font="system-ui" />
  },
  {
    value: "monospace",
    label: "Monospace (Disguised as something cool)",
    component: <FontPreview label="1337 H4x0r font" font="monospace" />
  }
];

const [value, setValue] = React.useState();
const handleChange = event => setValue(event.target.value);

<FontSelect
  aria-label="Demo label"
  options={options}
  onChange={handleChange}
  className="bg-transparent border border-current"
  value={value}
/>
```