### `<ColorPicker/>` component
#### Our standard color picker.

```jsx
import IconButton from '../button/icon-button';
const [active, setActive] = React.useState(false);
const [color, setColor] = React.useState("#d9d9d9");
const toggle = () => setActive(currentState => !currentState);

<div>
  <IconButton icon="drop" label="Color picker" ckIcon={true} onClick={toggle}/>

  {active && (
    <ColorPicker
      color={color}
      active={active}
      onChange={color => setColor(color.hex)}
      onClose={toggle}
      position="relative"
    />
  )}
</div>
```

#### Our standard color picker, without hex

```jsx
import IconButton from '../button/icon-button';
const [active, setActive] = React.useState(false);
const [color, setColor] = React.useState("#d9d9d9");
const toggle = () => setActive(currentState => !currentState);

<div>
  <IconButton icon="drop" label="Color picker" ckIcon={true} onClick={toggle}/>

  {active && (
    <ColorPicker
      color={color}
      active={active}
      onChange={color => setColor(color.hex)}
      hexInput={false}
      onClose={toggle}
      position="relative"
    />
  )}
</div>
```

#### Our standard color picker, with transparent option

```jsx
import IconButton from '../button/icon-button';
const [active, setActive] = React.useState(false);
const [color, setColor] = React.useState("#d9d9d9");
const toggle = () => setActive(currentState => !currentState);

<div>
  <IconButton icon="drop" label="Color picker" ckIcon={true} onClick={toggle}/>

  {active && (
    <ColorPicker
      color={color}
      active={active}
      onChange={color => setColor(color.hex)}
      hexInput={false}
      onClose={toggle}
      position="relative"
      transparency={true}
    />
  )}
</div>
```

#### Saved colors toolbar
When provided, the `savedColors` prop on the `ColorPicker` element should be shaped as the following

| Key               | Type     | Required | Purpose                                                                                                              |
| ----------------- | -------- | -------- | -------------------------------------------------------------------------------------------------------------------- |
| colors            | array    | no       | colors that should be saved                                                                                          |
| handleColorSelect | function | no       | additional callback for color tile click, calls `onChange` behavior of `ColorPicker` component when implemented here |
| handleColorsEdit  | function | yes      | callback for settings button click                                                                                   |

##### with colors saved to account settings
```jsx
import IconButton from '../button/icon-button';
const [active, setActive] = React.useState(false);
const [color, setColor] = React.useState("#d9d9d9");
const toggle = () => setActive(currentState => !currentState);
const handleColorsEdit = () => {
  // in context, the first iteration of this will open 
  // "/account_settings/general" in a new tab.
  // eventually, it should open a modal with the ability to save colors

  window.open("/", "_blank")
};

const savedColors = {
  colors: ["#FB6068", "#B36588", "#91A1C4", "#328266", "#ECB871"],
  handleColorsEdit: handleColorsEdit
};

<div>
  <IconButton icon="drop" label="Color picker" ckIcon={true} onClick={toggle}/>

  {active && (
    <ColorPicker
      color={color}
      active={active}
      onChange={color => setColor(color.hex)}
      onClose={toggle}
      position="relative"
      savedColors={savedColors}
    />
  )}
</div>
```

##### without colors saved to account settings (empty state)

```jsx
import IconButton from '../button/icon-button';
import ColorsUpdaterToolbar from './saved-colors-addon';
const [active, setActive] = React.useState(false);
const [color, setColor] = React.useState("#d9d9d9");
const toggle = () => setActive(currentState => !currentState);

const handleColorsEdit = () => {
  // in context, the first iteration of this will open 
  // "/account_settings/general" in a new tab.
  // eventually, it should open a modal with the ability to save colors

  window.open("/", "_blank")
};

const savedColors = {
  colors: [],
  handleColorsEdit: handleColorsEdit
};


<div>
  <IconButton icon="drop" label="Color picker" ckIcon={true} onClick={toggle}/>

  {active && (
    <ColorPicker
      color={color}
      active={active}
      onChange={color => setColor(color.hex)}
      onClose={toggle}
      position="relative"
      savedColors={savedColors}
    />
  )}
</div>
```

### `<ColorInput />` Component
#### Our standard Color Input.
```jsx
import ColorInput from './color-input';
const [active, setActive] = React.useState(false);
const [colorInput, setColorInput] = React.useState("#ff0000");
const toggle = () => setActive(currentState => !currentState);

<div>
  <ColorInput value={colorInput} onChange={color => setColorInput(color.hex)} onClose={toggle} placement="bottom"/>
</div>
```

#### Our standard Color Input with a label

```jsx
import ColorInput from './color-input';
const [active, setActive] = React.useState(false);
const [colorInput, setColorInput] = React.useState("#C0FFEE");
const toggle = () => setActive(currentState => !currentState);

<ColorInput
  label="Favorite color"
  value={colorInput}
  onChange={color => setColorInput(color.hex)}
  onClose={toggle}
  placement="bottom"
/>
```

#### Our standard Color Input with transparency.
```jsx
import ColorInput from './color-input';
const [active, setActive] = React.useState(false);
const [colorInput, setColorInput] = React.useState("#ff0000");
const toggle = () => setActive(currentState => !currentState);

<div>
  <ColorInput id="neato" value={colorInput} onChange={color => setColorInput(color.hex)} onClose={toggle} placement="bottom" transparency={true} />
</div>
```

#### Using translucent colors.
Note that the color picker does not let you pick colors with alpha channel. You may create a button to handle
it but here is how the color picker renders such values when seen. This includes `transparent`, `hsla` and `rgba` values.
```jsx
import ColorInput from './color-input';
const [colorInput, setColorInput] = React.useState("rgba(255, 0, 0, 0.5)");

<div>
  <ColorInput value={colorInput} onChange={color => setColorInput(color.hex)} placement="bottom"/>
</div>
```
#### Color Input with children
The color input renders children in the space below the color picker.  The implementation of this option was necessitated by the work for Saved colors, however, its usage could be expanded.   

```jsx
import ColorInput from './color-input';
import Button from '../button';
const [colorInput, setColorInput] = React.useState("#ff0000");


<div>
  <ColorInput value={colorInput} onChange={color => setColorInput(color.hex)} placement="bottom" >
   <div className="mt-4 flex justify-end">
      <Button is="secondary" size="sm" className="mr-2">
        Cancel
      </Button>
      <Button
        is="primary"
        __type="context-submit"
        size="sm"
      >
        Save
      </Button>
    </div>
  </ColorInput>
</div>
```
#### Color Input with saved colors
This color input includes the `ColorsUpdaterToolbar` component, introduced for the Saved Colors feature. 

```jsx
import ColorInput from './color-input';
import Button from '../button';
const [colorInput, setColorInput] = React.useState("#ff0000");
const [colorData, setColorData] = React.useState(null);

const handleColorsEdit = () => {
  // in context, the first iteration of this will open 
  // "/account_settings/general" in a new tab.
  // eventually, it should open a modal with the ability to save colors

  window.open("/", "_blank")
};

const savedColors = {
  colors: ["#FB6068", "#B36588", "#91A1C4", "#328266", "#ECB871"],
  handleColorsEdit: handleColorsEdit
};

<div>
  <ColorInput
    value={colorInput}
    onChange={color => setColorInput(color.hex)}
    placement="bottom"
    savedColors={savedColors} />
</div>
```

This color input includes the `ColorsUpdaterToolbar` component and other children.

```jsx
import ColorInput from './color-input';
import Button from '../button';
import ColorsUpdaterToolbar from './saved-colors-addon';
const [colorInput, setColorInput] = React.useState("#ff0000");
const [colorData, setColorData] = React.useState(null);

const handleColorsEdit = () => {
  // in context, the first iteration of this will open 
  // "/account_settings/general" in a new tab.
  // eventually, it should open a modal with the ability to save colors

  window.open("/", "_blank")
};

const savedColors = {
  colors: ["#FB6068", "#B36588", "#91A1C4", "#328266", "#ECB871"],
  handleColorsEdit: handleColorsEdit
};

<div>
  <ColorInput
    value={colorInput}
    onChange={color => setColorInput(color.hex)}
    placement="bottom" >
      <div className="grid">
        <div className="mt-4 flex justify-end">
          <Button is="secondary" size="sm" className="mr-2">
            Cancel
          </Button>
          <Button
            is="primary"
            __type="context-submit"
            size="sm"
          >
            Save
          </Button>
        </div>
        <ColorsUpdaterToolbar 
          colors={savedColors.colors}
          handleColorsEdit={savedColors.handleColorsEdit}
          className={"mx-1 my-8 bg-yellow-200"} />
        <p>wow cool</p>
      </div>
    </ColorInput>
</div>
````