

## Button
### Styling overrides
The styling of a button can be overridden using four keys, their uses should be self-explanatory:
- `components.button`
- `components.button.primary`: `text-white`
- `components.button.secondary`
- `components.button.tertiary`: `text-gray-700 bg-white border`

## ButtonGroup
### Styling overrides
- `components.buttongroup`
- `components.buttongroup.outer.left`
- `components.buttongroup.outer.right`
- `components.buttongroup.inner.left`: `rounded-l-none`
- `components.buttongroup.inner.right`: `rounded-r-none border-r`

## Overlay
### Styling overrides
- `components.overlay.color`: `rgba(0, 0, 0, 0.7)`
- `components.overlay.classes`

## Form
### Styling overrides
- `components.form.disabled`: `bg-gray-100 cursor-not-allowed`

## Label
### Styling overrides
A label has a few default classes which can be overridden using the `components.label.classes` key.

## Input
### Styling overrides
- `components.input.disabled` => `components.form.disabled`
- `components.input`: `shadow-sm block w-full sm:text-sm rounded-md border-0`
- `components.input.container`: `rounded-md border border-gray-200 focus-within:border-indigo-500 ring-0 focus-within:ring-1 ring-indigo-500`
- `components.input.with-inset`: `rounded-r-none focus:ring-transparent`
- `components.input.inset`: `flex-grow-0 flex items-center pl-2 pr-3 shadow-sm rounded-r-md border-l pointer-events-none`

## Select
### Styling overrides
- `components.select.icons.open`
- `components.select.icons.close` => `components.select.icons.close`
- `components.select.icons.check`
- `components.select.enabled`
- `components.select.disabled` => `components.form.disabled`
- `components.select.highlight`

## Toggle
### Styling overrides
- `components.toggle.disabled.color-bg`: `bg-gray-200`
- `components.toggle.disabled.color-text`: `text-gray-400`
- `components.toggle.active.color-bg`: `bg-green-300`
- `components.toggle.active.color-text`: `text-green-500`
- `components.toggle.active.icon`: `M3.707 5.293a1 1 0 00-1.414 1.414l1.414-1.414zM5 8l-.707.707a1 1 0 001.414 0L5 8zm4.707-3.293a1 1 0 00-1.414-1.414l1.414 1.414zm-7.414 2l2 2 1.414-1.414-2-2-1.414 1.414zm3.414 2l4-4-1.414-1.414-4 4 1.414 1.414z`
- `components.toggle.active.translate`: `translate-x-5`
- `components.toggle.inactive.color-bg`: `bg-red-200`
- `components.toggle.inactive.color-text`: `text-red-400`
- `components.toggle.inactive.icon`: `M4 8l2-2m0 0l2-2M6 6L4 4m2 2l2 2`
- `components.toggle.inactive.translate`: `translate-x-0`
- `components.toggle.classes`: `relative inline-flex flex-shrink-0 h-6 w-11 border-2 border-transparent rounded-full  transition-colors ease-in-out duration-200 focus:outline-none`
- `components.toggle.classes.disabled`: `cursor-not-allowed`
- `components.toggle.classes.enabled`: `cursor-pointer`
- `components.toggle.classes.focus`: `focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500`
- `components.toggle.container.icon-inner`: `h-3 w-3 bg-white`
- `components.toggle.container.icon-outer`: `ease-in-out duration-200 absolute inset-0 h-full w-full flex items-center justify-center transition-opacity`
- `components.toggle.container.point`: `pointer-events-none relative inline-block h-5 w-5 rounded-full bg-white shadow transform ring-0 transition ease-in-out duration-200`