planning

node_modules/react-color/LICENSE

@@ -0,0 +1,21 @@
+The MIT License (MIT)
+
+Copyright (c) 2015 Case Sandberg
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

node_modules/react-color/README.md

@@ -0,0 +1,48 @@
+# [React Color](http://casesandberg.github.io/react-color/)
+
+[![Npm Version][npm-version-image]][npm-version-url]
+[![Build Status][travis-svg]][travis-url]
+[![License][license-image]][license-url]
+[![Downloads][downloads-image]][downloads-url]
+
+* **13 Different Pickers** - Sketch, Photoshop, Chrome and many more
+
+* **Make Your Own** - Use the building block components to make your own
+
+## Demo
+
+![Demo](https://media.giphy.com/media/26FfggT53qE304CwE/giphy.gif)
+
+[**Live Demo**](http://casesandberg.github.io/react-color/)
+
+## Installation & Usage
+
+```sh
+npm install react-color --save
+```
+
+### Include the Component
+
+```js
+import React from 'react'
+import { SketchPicker } from 'react-color'
+
+class Component extends React.Component {
+
+  render() {
+    return <SketchPicker />
+  }
+}
+```
+You can import `AlphaPicker` `BlockPicker` `ChromePicker` `CirclePicker` `CompactPicker` `GithubPicker` `HuePicker` `MaterialPicker` `PhotoshopPicker` `SketchPicker` `SliderPicker` `SwatchesPicker` `TwitterPicker` respectively.
+
+> 100% inline styles via [ReactCSS](http://reactcss.com/)
+
+[travis-svg]: https://travis-ci.org/casesandberg/react-color.svg
+[travis-url]: https://travis-ci.org/casesandberg/react-color
+[license-image]: http://img.shields.io/npm/l/react-color.svg
+[license-url]: LICENSE
+[downloads-image]: http://img.shields.io/npm/dm/react-color.svg
+[downloads-url]: http://npm-stat.com/charts.html?package=react-color
+[npm-version-image]: https://img.shields.io/npm/v/react-color.svg
+[npm-version-url]: https://www.npmjs.com/package/react-color

node_modules/react-color/es/Alpha.js

@@ -0,0 +1,2 @@
+import _default from './components/alpha/Alpha';
+export { _default as default };

node_modules/react-color/es/Block.js

@@ -0,0 +1,2 @@
+import _default from './components/block/Block';
+export { _default as default };

node_modules/react-color/es/Chrome.js

@@ -0,0 +1,2 @@
+import _default from './components/chrome/Chrome';
+export { _default as default };

node_modules/react-color/es/Circle.js

@@ -0,0 +1,2 @@
+import _default from './components/circle/Circle';
+export { _default as default };

node_modules/react-color/es/Compact.js

@@ -0,0 +1,2 @@
+import _default from './components/compact/Compact';
+export { _default as default };

node_modules/react-color/es/Custom.js

@@ -0,0 +1,2 @@
+import _default from './components/common/ColorWrap';
+export { _default as default };

node_modules/react-color/es/Github.js

@@ -0,0 +1,2 @@
+import _default from './components/github/Github';
+export { _default as default };

node_modules/react-color/es/Google.js

@@ -0,0 +1,2 @@
+import _default from './components/google/Google';
+export { _default as default };

node_modules/react-color/es/Hue.js

@@ -0,0 +1,2 @@
+import _default from './components/hue/Hue';
+export { _default as default };

node_modules/react-color/es/Material.js

@@ -0,0 +1,2 @@
+import _default from './components/material/Material';
+export { _default as default };

node_modules/react-color/es/Photoshop.js

@@ -0,0 +1,2 @@
+import _default from './components/photoshop/Photoshop';
+export { _default as default };

node_modules/react-color/es/Sketch.js

@@ -0,0 +1,2 @@
+import _default from './components/sketch/Sketch';
+export { _default as default };

node_modules/react-color/es/Slider.js

@@ -0,0 +1,2 @@
+import _default from './components/slider/Slider';
+export { _default as default };

node_modules/react-color/es/Swatches.js

@@ -0,0 +1,2 @@
+import _default from './components/swatches/Swatches';
+export { _default as default };

node_modules/react-color/es/Twitter.js

@@ -0,0 +1,2 @@
+import _default from './components/twitter/Twitter';
+export { _default as default };

node_modules/react-color/es/components/alpha/Alpha.js

@@ -0,0 +1,57 @@
+var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
+
+import React from 'react';
+import reactCSS from 'reactcss';
+
+import { ColorWrap, Alpha } from '../common';
+import AlphaPointer from './AlphaPointer';
+
+export var AlphaPicker = function AlphaPicker(_ref) {
+  var rgb = _ref.rgb,
+      hsl = _ref.hsl,
+      width = _ref.width,
+      height = _ref.height,
+      onChange = _ref.onChange,
+      direction = _ref.direction,
+      style = _ref.style,
+      renderers = _ref.renderers,
+      pointer = _ref.pointer,
+      _ref$className = _ref.className,
+      className = _ref$className === undefined ? '' : _ref$className;
+
+  var styles = reactCSS({
+    'default': {
+      picker: {
+        position: 'relative',
+        width: width,
+        height: height
+      },
+      alpha: {
+        radius: '2px',
+        style: style
+      }
+    }
+  });
+
+  return React.createElement(
+    'div',
+    { style: styles.picker, className: 'alpha-picker ' + className },
+    React.createElement(Alpha, _extends({}, styles.alpha, {
+      rgb: rgb,
+      hsl: hsl,
+      pointer: pointer,
+      renderers: renderers,
+      onChange: onChange,
+      direction: direction
+    }))
+  );
+};
+
+AlphaPicker.defaultProps = {
+  width: '316px',
+  height: '16px',
+  direction: 'horizontal',
+  pointer: AlphaPointer
+};
+
+export default ColorWrap(AlphaPicker);

node_modules/react-color/es/components/alpha/AlphaPointer.js

@@ -0,0 +1,28 @@
+import React from 'react';
+import reactCSS from 'reactcss';
+
+export var AlphaPointer = function AlphaPointer(_ref) {
+  var direction = _ref.direction;
+
+  var styles = reactCSS({
+    'default': {
+      picker: {
+        width: '18px',
+        height: '18px',
+        borderRadius: '50%',
+        transform: 'translate(-9px, -1px)',
+        backgroundColor: 'rgb(248, 248, 248)',
+        boxShadow: '0 1px 4px 0 rgba(0, 0, 0, 0.37)'
+      }
+    },
+    'vertical': {
+      picker: {
+        transform: 'translate(-3px, -9px)'
+      }
+    }
+  }, { vertical: direction === 'vertical' });
+
+  return React.createElement('div', { style: styles.picker });
+};
+
+export default AlphaPointer;

node_modules/react-color/es/components/alpha/spec.js

@@ -0,0 +1,49 @@
+var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
+
+/* global test, expect, jest */
+
+import React from 'react';
+import renderer from 'react-test-renderer';
+import { mount } from 'enzyme';
+import * as color from '../../helpers/color';
+// import canvas from 'canvas'
+
+import Alpha from './Alpha';
+import { Alpha as CommonAlpha } from '../common';
+import AlphaPointer from './AlphaPointer';
+
+test('Alpha renders correctly', function () {
+  var tree = renderer.create(React.createElement(Alpha, color.red)).toJSON();
+  expect(tree).toMatchSnapshot();
+});
+
+// test('Alpha renders on server correctly', () => {
+//   const tree = renderer.create(
+//     <Alpha renderers={{ canvas }} { ...color.red } />
+//   ).toJSON()
+//   expect(tree).toMatchSnapshot()
+// })
+
+test('Alpha onChange events correctly', function () {
+  var changeSpy = jest.fn(function (data) {
+    expect(color.simpleCheckForValidColor(data)).toBeTruthy();
+  });
+  var tree = mount(React.createElement(Alpha, _extends({}, color.red, { width: 20, height: 200, onChange: changeSpy })));
+  expect(changeSpy).toHaveBeenCalledTimes(0);
+  var alphaCommon = tree.find(CommonAlpha);
+  alphaCommon.at(0).childAt(2).simulate('mouseDown', {
+    pageX: 100,
+    pageY: 10
+  });
+  expect(changeSpy).toHaveBeenCalled();
+});
+
+test('Alpha renders vertically', function () {
+  var tree = renderer.create(React.createElement(Alpha, _extends({}, color.red, { width: 20, height: 200, direction: 'vertical' }))).toJSON();
+  expect(tree).toMatchSnapshot();
+});
+
+test('AlphaPointer renders correctly', function () {
+  var tree = renderer.create(React.createElement(AlphaPointer, null)).toJSON();
+  expect(tree).toMatchSnapshot();
+});

node_modules/react-color/es/components/block/Block.js

@@ -0,0 +1,128 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import reactCSS from 'reactcss';
+import merge from 'lodash-es/merge';
+import * as color from '../../helpers/color';
+
+import { ColorWrap, EditableInput, Checkboard } from '../common';
+import BlockSwatches from './BlockSwatches';
+
+export var Block = function Block(_ref) {
+  var onChange = _ref.onChange,
+      onSwatchHover = _ref.onSwatchHover,
+      hex = _ref.hex,
+      colors = _ref.colors,
+      width = _ref.width,
+      triangle = _ref.triangle,
+      _ref$styles = _ref.styles,
+      passedStyles = _ref$styles === undefined ? {} : _ref$styles,
+      _ref$className = _ref.className,
+      className = _ref$className === undefined ? '' : _ref$className;
+
+  var transparent = hex === 'transparent';
+  var handleChange = function handleChange(hexCode, e) {
+    color.isValidHex(hexCode) && onChange({
+      hex: hexCode,
+      source: 'hex'
+    }, e);
+  };
+
+  var styles = reactCSS(merge({
+    'default': {
+      card: {
+        width: width,
+        background: '#fff',
+        boxShadow: '0 1px rgba(0,0,0,.1)',
+        borderRadius: '6px',
+        position: 'relative'
+      },
+      head: {
+        height: '110px',
+        background: hex,
+        borderRadius: '6px 6px 0 0',
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        position: 'relative'
+      },
+      body: {
+        padding: '10px'
+      },
+      label: {
+        fontSize: '18px',
+        color: color.getContrastingColor(hex),
+        position: 'relative'
+      },
+      triangle: {
+        width: '0px',
+        height: '0px',
+        borderStyle: 'solid',
+        borderWidth: '0 10px 10px 10px',
+        borderColor: 'transparent transparent ' + hex + ' transparent',
+        position: 'absolute',
+        top: '-10px',
+        left: '50%',
+        marginLeft: '-10px'
+      },
+      input: {
+        width: '100%',
+        fontSize: '12px',
+        color: '#666',
+        border: '0px',
+        outline: 'none',
+        height: '22px',
+        boxShadow: 'inset 0 0 0 1px #ddd',
+        borderRadius: '4px',
+        padding: '0 7px',
+        boxSizing: 'border-box'
+      }
+    },
+    'hide-triangle': {
+      triangle: {
+        display: 'none'
+      }
+    }
+  }, passedStyles), { 'hide-triangle': triangle === 'hide' });
+
+  return React.createElement(
+    'div',
+    { style: styles.card, className: 'block-picker ' + className },
+    React.createElement('div', { style: styles.triangle }),
+    React.createElement(
+      'div',
+      { style: styles.head },
+      transparent && React.createElement(Checkboard, { borderRadius: '6px 6px 0 0' }),
+      React.createElement(
+        'div',
+        { style: styles.label },
+        hex
+      )
+    ),
+    React.createElement(
+      'div',
+      { style: styles.body },
+      React.createElement(BlockSwatches, { colors: colors, onClick: handleChange, onSwatchHover: onSwatchHover }),
+      React.createElement(EditableInput, {
+        style: { input: styles.input },
+        value: hex,
+        onChange: handleChange
+      })
+    )
+  );
+};
+
+Block.propTypes = {
+  width: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+  colors: PropTypes.arrayOf(PropTypes.string),
+  triangle: PropTypes.oneOf(['top', 'hide']),
+  styles: PropTypes.object
+};
+
+Block.defaultProps = {
+  width: 170,
+  colors: ['#D9E3F0', '#F47373', '#697689', '#37D67A', '#2CCCE4', '#555555', '#dce775', '#ff8a65', '#ba68c8'],
+  triangle: 'top',
+  styles: {}
+};
+
+export default ColorWrap(Block);

node_modules/react-color/es/components/block/BlockSwatches.js

@@ -0,0 +1,50 @@
+import React from 'react';
+import reactCSS from 'reactcss';
+import map from 'lodash-es/map';
+
+import { Swatch } from '../common';
+
+export var BlockSwatches = function BlockSwatches(_ref) {
+  var colors = _ref.colors,
+      onClick = _ref.onClick,
+      onSwatchHover = _ref.onSwatchHover;
+
+  var styles = reactCSS({
+    'default': {
+      swatches: {
+        marginRight: '-10px'
+      },
+      swatch: {
+        width: '22px',
+        height: '22px',
+        float: 'left',
+        marginRight: '10px',
+        marginBottom: '10px',
+        borderRadius: '4px'
+      },
+      clear: {
+        clear: 'both'
+      }
+    }
+  });
+
+  return React.createElement(
+    'div',
+    { style: styles.swatches },
+    map(colors, function (c) {
+      return React.createElement(Swatch, {
+        key: c,
+        color: c,
+        style: styles.swatch,
+        onClick: onClick,
+        onHover: onSwatchHover,
+        focusStyle: {
+          boxShadow: '0 0 4px ' + c
+        }
+      });
+    }),
+    React.createElement('div', { style: styles.clear })
+  );
+};
+
+export default BlockSwatches;

node_modules/react-color/es/components/block/spec.js

@@ -0,0 +1,53 @@
+/* global test, jest, expect */
+
+import React from 'react';
+import renderer from 'react-test-renderer';
+import { mount } from 'enzyme';
+
+import Block from './Block';
+import BlockSwatches from './BlockSwatches';
+import { Swatch } from '../common';
+import * as color from '../../helpers/color';
+
+test('Block renders correctly', function () {
+  var tree = renderer.create(React.createElement(Block, null)).toJSON();
+  expect(tree).toMatchSnapshot();
+});
+
+test('Block onChange events correctly', function () {
+  var changeSpy = jest.fn(function (data) {
+    expect(color.simpleCheckForValidColor(data)).toBeTruthy();
+  });
+  var tree = mount(React.createElement(Block, { onChange: changeSpy }));
+  expect(changeSpy).toHaveBeenCalledTimes(0);
+  var swatches = tree.find(Swatch);
+  swatches.at(0).childAt(0).simulate('click');
+
+  expect(changeSpy).toHaveBeenCalled();
+});
+
+test('Block with onSwatchHover events correctly', function () {
+  var hoverSpy = jest.fn(function (data) {
+    expect(color.simpleCheckForValidColor(data)).toBeTruthy();
+  });
+  var tree = mount(React.createElement(Block, { onSwatchHover: hoverSpy }));
+  expect(hoverSpy).toHaveBeenCalledTimes(0);
+  var swatches = tree.find(Swatch);
+  swatches.at(0).childAt(0).simulate('mouseOver');
+
+  expect(hoverSpy).toHaveBeenCalled();
+});
+
+test('Block `triangle="hide"`', function () {
+  var tree = renderer.create(React.createElement(Block, { triangle: 'hide' })).toJSON();
+  expect(tree).toMatchSnapshot();
+});
+
+test('BlockSwatches renders correctly', function () {
+  var tree = renderer.create(React.createElement(BlockSwatches, { colors: ['#fff', '#999', '#000'] })).toJSON();
+  expect(tree).toMatchSnapshot();
+});
+test('Block renders custom styles correctly', function () {
+  var tree = renderer.create(React.createElement(Block, { styles: { default: { card: { boxShadow: 'none' } } } })).toJSON();
+  expect(tree.props.style.boxShadow).toBe('none');
+});

node_modules/react-color/es/components/block/story.js

@@ -0,0 +1,16 @@
+import React from 'react';
+import { storiesOf } from '@storybook/react';
+import { renderWithKnobs } from '../../../.storybook/report';
+import SyncColorField from '../../../.storybook/SyncColorField';
+
+import Block from './Block';
+
+storiesOf('Pickers', module).add('BlockPicker', function () {
+  return React.createElement(
+    SyncColorField,
+    { component: Block },
+    renderWithKnobs(Block, {}, null, {
+      width: { range: true, min: 140, max: 500, step: 1 }
+    })
+  );
+});

node_modules/react-color/es/components/chrome/Chrome.js

@@ -0,0 +1,189 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import reactCSS from 'reactcss';
+import merge from 'lodash-es/merge';
+
+import { ColorWrap, Saturation, Hue, Alpha, Checkboard } from '../common';
+import ChromeFields from './ChromeFields';
+import ChromePointer from './ChromePointer';
+import ChromePointerCircle from './ChromePointerCircle';
+
+export var Chrome = function Chrome(_ref) {
+  var width = _ref.width,
+      onChange = _ref.onChange,
+      disableAlpha = _ref.disableAlpha,
+      rgb = _ref.rgb,
+      hsl = _ref.hsl,
+      hsv = _ref.hsv,
+      hex = _ref.hex,
+      renderers = _ref.renderers,
+      _ref$styles = _ref.styles,
+      passedStyles = _ref$styles === undefined ? {} : _ref$styles,
+      _ref$className = _ref.className,
+      className = _ref$className === undefined ? '' : _ref$className,
+      defaultView = _ref.defaultView;
+
+  var styles = reactCSS(merge({
+    'default': {
+      picker: {
+        width: width,
+        background: '#fff',
+        borderRadius: '2px',
+        boxShadow: '0 0 2px rgba(0,0,0,.3), 0 4px 8px rgba(0,0,0,.3)',
+        boxSizing: 'initial',
+        fontFamily: 'Menlo'
+      },
+      saturation: {
+        width: '100%',
+        paddingBottom: '55%',
+        position: 'relative',
+        borderRadius: '2px 2px 0 0',
+        overflow: 'hidden'
+      },
+      Saturation: {
+        radius: '2px 2px 0 0'
+      },
+      body: {
+        padding: '16px 16px 12px'
+      },
+      controls: {
+        display: 'flex'
+      },
+      color: {
+        width: '32px'
+      },
+      swatch: {
+        marginTop: '6px',
+        width: '16px',
+        height: '16px',
+        borderRadius: '8px',
+        position: 'relative',
+        overflow: 'hidden'
+      },
+      active: {
+        absolute: '0px 0px 0px 0px',
+        borderRadius: '8px',
+        boxShadow: 'inset 0 0 0 1px rgba(0,0,0,.1)',
+        background: 'rgba(' + rgb.r + ', ' + rgb.g + ', ' + rgb.b + ', ' + rgb.a + ')',
+        zIndex: '2'
+      },
+      toggles: {
+        flex: '1'
+      },
+      hue: {
+        height: '10px',
+        position: 'relative',
+        marginBottom: '8px'
+      },
+      Hue: {
+        radius: '2px'
+      },
+      alpha: {
+        height: '10px',
+        position: 'relative'
+      },
+      Alpha: {
+        radius: '2px'
+      }
+    },
+    'disableAlpha': {
+      color: {
+        width: '22px'
+      },
+      alpha: {
+        display: 'none'
+      },
+      hue: {
+        marginBottom: '0px'
+      },
+      swatch: {
+        width: '10px',
+        height: '10px',
+        marginTop: '0px'
+      }
+    }
+  }, passedStyles), { disableAlpha: disableAlpha });
+
+  return React.createElement(
+    'div',
+    { style: styles.picker, className: 'chrome-picker ' + className },
+    React.createElement(
+      'div',
+      { style: styles.saturation },
+      React.createElement(Saturation, {
+        style: styles.Saturation,
+        hsl: hsl,
+        hsv: hsv,
+        pointer: ChromePointerCircle,
+        onChange: onChange
+      })
+    ),
+    React.createElement(
+      'div',
+      { style: styles.body },
+      React.createElement(
+        'div',
+        { style: styles.controls, className: 'flexbox-fix' },
+        React.createElement(
+          'div',
+          { style: styles.color },
+          React.createElement(
+            'div',
+            { style: styles.swatch },
+            React.createElement('div', { style: styles.active }),
+            React.createElement(Checkboard, { renderers: renderers })
+          )
+        ),
+        React.createElement(
+          'div',
+          { style: styles.toggles },
+          React.createElement(
+            'div',
+            { style: styles.hue },
+            React.createElement(Hue, {
+              style: styles.Hue,
+              hsl: hsl,
+              pointer: ChromePointer,
+              onChange: onChange
+            })
+          ),
+          React.createElement(
+            'div',
+            { style: styles.alpha },
+            React.createElement(Alpha, {
+              style: styles.Alpha,
+              rgb: rgb,
+              hsl: hsl,
+              pointer: ChromePointer,
+              renderers: renderers,
+              onChange: onChange
+            })
+          )
+        )
+      ),
+      React.createElement(ChromeFields, {
+        rgb: rgb,
+        hsl: hsl,
+        hex: hex,
+        view: defaultView,
+        onChange: onChange,
+        disableAlpha: disableAlpha
+      })
+    )
+  );
+};
+
+Chrome.propTypes = {
+  width: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+  disableAlpha: PropTypes.bool,
+  styles: PropTypes.object,
+  defaultView: PropTypes.oneOf(["hex", "rgb", "hsl"])
+};
+
+Chrome.defaultProps = {
+  width: 225,
+  disableAlpha: false,
+  styles: {}
+};
+
+export default ColorWrap(Chrome);

node_modules/react-color/es/components/chrome/ChromeFields.js

@@ -0,0 +1,340 @@
+var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
+
+function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+
+function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
+
+function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
+
+/* eslint-disable react/no-did-mount-set-state, no-param-reassign */
+
+import React from 'react';
+import reactCSS from 'reactcss';
+import * as color from '../../helpers/color';
+import isUndefined from 'lodash-es/isUndefined';
+
+import { EditableInput } from '../common';
+import UnfoldMoreHorizontalIcon from '@icons/material/UnfoldMoreHorizontalIcon';
+
+export var ChromeFields = function (_React$Component) {
+  _inherits(ChromeFields, _React$Component);
+
+  function ChromeFields(props) {
+    _classCallCheck(this, ChromeFields);
+
+    var _this = _possibleConstructorReturn(this, (ChromeFields.__proto__ || Object.getPrototypeOf(ChromeFields)).call(this));
+
+    _this.toggleViews = function () {
+      if (_this.state.view === 'hex') {
+        _this.setState({ view: 'rgb' });
+      } else if (_this.state.view === 'rgb') {
+        _this.setState({ view: 'hsl' });
+      } else if (_this.state.view === 'hsl') {
+        if (_this.props.hsl.a === 1) {
+          _this.setState({ view: 'hex' });
+        } else {
+          _this.setState({ view: 'rgb' });
+        }
+      }
+    };
+
+    _this.handleChange = function (data, e) {
+      if (data.hex) {
+        color.isValidHex(data.hex) && _this.props.onChange({
+          hex: data.hex,
+          source: 'hex'
+        }, e);
+      } else if (data.r || data.g || data.b) {
+        _this.props.onChange({
+          r: data.r || _this.props.rgb.r,
+          g: data.g || _this.props.rgb.g,
+          b: data.b || _this.props.rgb.b,
+          source: 'rgb'
+        }, e);
+      } else if (data.a) {
+        if (data.a < 0) {
+          data.a = 0;
+        } else if (data.a > 1) {
+          data.a = 1;
+        }
+
+        _this.props.onChange({
+          h: _this.props.hsl.h,
+          s: _this.props.hsl.s,
+          l: _this.props.hsl.l,
+          a: Math.round(data.a * 100) / 100,
+          source: 'rgb'
+        }, e);
+      } else if (data.h || data.s || data.l) {
+        // Remove any occurances of '%'.
+        if (typeof data.s === 'string' && data.s.includes('%')) {
+          data.s = data.s.replace('%', '');
+        }
+        if (typeof data.l === 'string' && data.l.includes('%')) {
+          data.l = data.l.replace('%', '');
+        }
+
+        // We store HSL as a unit interval so we need to override the 1 input to 0.01
+        if (data.s == 1) {
+          data.s = 0.01;
+        } else if (data.l == 1) {
+          data.l = 0.01;
+        }
+
+        _this.props.onChange({
+          h: data.h || _this.props.hsl.h,
+          s: Number(!isUndefined(data.s) ? data.s : _this.props.hsl.s),
+          l: Number(!isUndefined(data.l) ? data.l : _this.props.hsl.l),
+          source: 'hsl'
+        }, e);
+      }
+    };
+
+    _this.showHighlight = function (e) {
+      e.currentTarget.style.background = '#eee';
+    };
+
+    _this.hideHighlight = function (e) {
+      e.currentTarget.style.background = 'transparent';
+    };
+
+    if (props.hsl.a !== 1 && props.view === "hex") {
+      _this.state = {
+        view: "rgb"
+      };
+    } else {
+      _this.state = {
+        view: props.view
+      };
+    }
+    return _this;
+  }
+
+  _createClass(ChromeFields, [{
+    key: 'render',
+    value: function render() {
+      var _this2 = this;
+
+      var styles = reactCSS({
+        'default': {
+          wrap: {
+            paddingTop: '16px',
+            display: 'flex'
+          },
+          fields: {
+            flex: '1',
+            display: 'flex',
+            marginLeft: '-6px'
+          },
+          field: {
+            paddingLeft: '6px',
+            width: '100%'
+          },
+          alpha: {
+            paddingLeft: '6px',
+            width: '100%'
+          },
+          toggle: {
+            width: '32px',
+            textAlign: 'right',
+            position: 'relative'
+          },
+          icon: {
+            marginRight: '-4px',
+            marginTop: '12px',
+            cursor: 'pointer',
+            position: 'relative'
+          },
+          iconHighlight: {
+            position: 'absolute',
+            width: '24px',
+            height: '28px',
+            background: '#eee',
+            borderRadius: '4px',
+            top: '10px',
+            left: '12px',
+            display: 'none'
+          },
+          input: {
+            fontSize: '11px',
+            color: '#333',
+            width: '100%',
+            borderRadius: '2px',
+            border: 'none',
+            boxShadow: 'inset 0 0 0 1px #dadada',
+            height: '21px',
+            textAlign: 'center'
+          },
+          label: {
+            textTransform: 'uppercase',
+            fontSize: '11px',
+            lineHeight: '11px',
+            color: '#969696',
+            textAlign: 'center',
+            display: 'block',
+            marginTop: '12px'
+          },
+          svg: {
+            fill: '#333',
+            width: '24px',
+            height: '24px',
+            border: '1px transparent solid',
+            borderRadius: '5px'
+          }
+        },
+        'disableAlpha': {
+          alpha: {
+            display: 'none'
+          }
+        }
+      }, this.props, this.state);
+
+      var fields = void 0;
+      if (this.state.view === 'hex') {
+        fields = React.createElement(
+          'div',
+          { style: styles.fields, className: 'flexbox-fix' },
+          React.createElement(
+            'div',
+            { style: styles.field },
+            React.createElement(EditableInput, {
+              style: { input: styles.input, label: styles.label },
+              label: 'hex', value: this.props.hex,
+              onChange: this.handleChange
+            })
+          )
+        );
+      } else if (this.state.view === 'rgb') {
+        fields = React.createElement(
+          'div',
+          { style: styles.fields, className: 'flexbox-fix' },
+          React.createElement(
+            'div',
+            { style: styles.field },
+            React.createElement(EditableInput, {
+              style: { input: styles.input, label: styles.label },
+              label: 'r',
+              value: this.props.rgb.r,
+              onChange: this.handleChange
+            })
+          ),
+          React.createElement(
+            'div',
+            { style: styles.field },
+            React.createElement(EditableInput, {
+              style: { input: styles.input, label: styles.label },
+              label: 'g',
+              value: this.props.rgb.g,
+              onChange: this.handleChange
+            })
+          ),
+          React.createElement(
+            'div',
+            { style: styles.field },
+            React.createElement(EditableInput, {
+              style: { input: styles.input, label: styles.label },
+              label: 'b',
+              value: this.props.rgb.b,
+              onChange: this.handleChange
+            })
+          ),
+          React.createElement(
+            'div',
+            { style: styles.alpha },
+            React.createElement(EditableInput, {
+              style: { input: styles.input, label: styles.label },
+              label: 'a',
+              value: this.props.rgb.a,
+              arrowOffset: 0.01,
+              onChange: this.handleChange
+            })
+          )
+        );
+      } else if (this.state.view === 'hsl') {
+        fields = React.createElement(
+          'div',
+          { style: styles.fields, className: 'flexbox-fix' },
+          React.createElement(
+            'div',
+            { style: styles.field },
+            React.createElement(EditableInput, {
+              style: { input: styles.input, label: styles.label },
+              label: 'h',
+              value: Math.round(this.props.hsl.h),
+              onChange: this.handleChange
+            })
+          ),
+          React.createElement(
+            'div',
+            { style: styles.field },
+            React.createElement(EditableInput, {
+              style: { input: styles.input, label: styles.label },
+              label: 's',
+              value: Math.round(this.props.hsl.s * 100) + '%',
+              onChange: this.handleChange
+            })
+          ),
+          React.createElement(
+            'div',
+            { style: styles.field },
+            React.createElement(EditableInput, {
+              style: { input: styles.input, label: styles.label },
+              label: 'l',
+              value: Math.round(this.props.hsl.l * 100) + '%',
+              onChange: this.handleChange
+            })
+          ),
+          React.createElement(
+            'div',
+            { style: styles.alpha },
+            React.createElement(EditableInput, {
+              style: { input: styles.input, label: styles.label },
+              label: 'a',
+              value: this.props.hsl.a,
+              arrowOffset: 0.01,
+              onChange: this.handleChange
+            })
+          )
+        );
+      }
+
+      return React.createElement(
+        'div',
+        { style: styles.wrap, className: 'flexbox-fix' },
+        fields,
+        React.createElement(
+          'div',
+          { style: styles.toggle },
+          React.createElement(
+            'div',
+            { style: styles.icon, onClick: this.toggleViews, ref: function ref(icon) {
+                return _this2.icon = icon;
+              } },
+            React.createElement(UnfoldMoreHorizontalIcon, {
+              style: styles.svg,
+              onMouseOver: this.showHighlight,
+              onMouseEnter: this.showHighlight,
+              onMouseOut: this.hideHighlight
+            })
+          )
+        )
+      );
+    }
+  }], [{
+    key: 'getDerivedStateFromProps',
+    value: function getDerivedStateFromProps(nextProps, state) {
+      if (nextProps.hsl.a !== 1 && state.view === 'hex') {
+        return { view: 'rgb' };
+      }
+      return null;
+    }
+  }]);
+
+  return ChromeFields;
+}(React.Component);
+
+ChromeFields.defaultProps = {
+  view: "hex"
+};
+
+export default ChromeFields;

node_modules/react-color/es/components/chrome/ChromePointer.js

@@ -0,0 +1,21 @@
+import React from 'react';
+import reactCSS from 'reactcss';
+
+export var ChromePointer = function ChromePointer() {
+  var styles = reactCSS({
+    'default': {
+      picker: {
+        width: '12px',
+        height: '12px',
+        borderRadius: '6px',
+        transform: 'translate(-6px, -1px)',
+        backgroundColor: 'rgb(248, 248, 248)',
+        boxShadow: '0 1px 4px 0 rgba(0, 0, 0, 0.37)'
+      }
+    }
+  });
+
+  return React.createElement('div', { style: styles.picker });
+};
+
+export default ChromePointer;

node_modules/react-color/es/components/chrome/ChromePointerCircle.js

@@ -0,0 +1,20 @@
+import React from 'react';
+import reactCSS from 'reactcss';
+
+export var ChromePointerCircle = function ChromePointerCircle() {
+  var styles = reactCSS({
+    'default': {
+      picker: {
+        width: '12px',
+        height: '12px',
+        borderRadius: '6px',
+        boxShadow: 'inset 0 0 0 1px #fff',
+        transform: 'translate(-6px, -6px)'
+      }
+    }
+  });
+
+  return React.createElement('div', { style: styles.picker });
+};
+
+export default ChromePointerCircle;

node_modules/react-color/es/components/chrome/spec.js

@@ -0,0 +1,71 @@
+var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
+
+/* global test, jest, expect */
+
+import React from 'react';
+import renderer from 'react-test-renderer';
+import * as color from '../../helpers/color';
+import { mount } from 'enzyme';
+
+import Chrome from './Chrome';
+import ChromeFields from './ChromeFields';
+import ChromePointer from './ChromePointer';
+import ChromePointerCircle from './ChromePointerCircle';
+import { Alpha } from '../common';
+
+test('Chrome renders correctly', function () {
+  var tree = renderer.create(React.createElement(Chrome, color.red)).toJSON();
+  expect(tree).toMatchSnapshot();
+});
+
+test('Chrome onChange events correctly', function () {
+  var changeSpy = jest.fn(function (data) {
+    expect(color.simpleCheckForValidColor(data)).toBeTruthy();
+  });
+  var tree = mount(React.createElement(Chrome, _extends({}, color.red, { onChange: changeSpy })));
+  expect(changeSpy).toHaveBeenCalledTimes(0);
+
+  // check the Alpha component
+  var alphaCommon = tree.find(Alpha);
+  alphaCommon.at(0).childAt(2).simulate('mouseDown', {
+    pageX: 100,
+    pageY: 10
+  });
+  expect(changeSpy).toHaveBeenCalledTimes(1);
+
+  // TODO: check the Hue component
+  // TODO: check the ChromeFields
+  // TODO: check Saturation
+});
+
+// test('Chrome renders on server correctly', () => {
+//   const tree = renderer.create(
+//     <Chrome renderers={{ canvas }} { ...color.red } />
+//   ).toJSON()
+//   expect(tree).toMatchSnapshot()
+// })
+
+test('ChromeFields renders correctly', function () {
+  var tree = renderer.create(React.createElement(ChromeFields, color.red)).toJSON();
+  expect(tree).toMatchSnapshot();
+});
+
+test('ChromePointer renders correctly', function () {
+  var tree = renderer.create(React.createElement(ChromePointer, null)).toJSON();
+  expect(tree).toMatchSnapshot();
+});
+
+test('ChromePointerCircle renders correctly', function () {
+  var tree = renderer.create(React.createElement(ChromePointerCircle, null)).toJSON();
+  expect(tree).toMatchSnapshot();
+});
+
+test('Chrome renders custom styles correctly', function () {
+  var tree = renderer.create(React.createElement(Chrome, { styles: { default: { picker: { boxShadow: 'none' } } } })).toJSON();
+  expect(tree.props.style.boxShadow).toBe('none');
+});
+
+test('Chrome renders correctly with width', function () {
+  var tree = renderer.create(React.createElement(Chrome, { width: 300 })).toJSON();
+  expect(tree.props.style.width).toBe(300);
+});

node_modules/react-color/es/components/chrome/story.js

@@ -0,0 +1,14 @@
+import React from 'react';
+import { storiesOf } from '@storybook/react';
+import { renderWithKnobs } from '../../../.storybook/report';
+import SyncColorField from '../../../.storybook/SyncColorField';
+
+import Chrome from './Chrome';
+
+storiesOf('Pickers', module).add('ChromePicker', function () {
+  return React.createElement(
+    SyncColorField,
+    { component: Chrome },
+    renderWithKnobs(Chrome, {}, null)
+  );
+});

node_modules/react-color/es/components/circle/Circle.js

@@ -0,0 +1,72 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import reactCSS from 'reactcss';
+import map from 'lodash-es/map';
+import merge from 'lodash-es/merge';
+import * as material from 'material-colors';
+
+import { ColorWrap } from '../common';
+import CircleSwatch from './CircleSwatch';
+
+export var Circle = function Circle(_ref) {
+  var width = _ref.width,
+      onChange = _ref.onChange,
+      onSwatchHover = _ref.onSwatchHover,
+      colors = _ref.colors,
+      hex = _ref.hex,
+      circleSize = _ref.circleSize,
+      _ref$styles = _ref.styles,
+      passedStyles = _ref$styles === undefined ? {} : _ref$styles,
+      circleSpacing = _ref.circleSpacing,
+      _ref$className = _ref.className,
+      className = _ref$className === undefined ? '' : _ref$className;
+
+  var styles = reactCSS(merge({
+    'default': {
+      card: {
+        width: width,
+        display: 'flex',
+        flexWrap: 'wrap',
+        marginRight: -circleSpacing,
+        marginBottom: -circleSpacing
+      }
+    }
+  }, passedStyles));
+
+  var handleChange = function handleChange(hexCode, e) {
+    return onChange({ hex: hexCode, source: 'hex' }, e);
+  };
+
+  return React.createElement(
+    'div',
+    { style: styles.card, className: 'circle-picker ' + className },
+    map(colors, function (c) {
+      return React.createElement(CircleSwatch, {
+        key: c,
+        color: c,
+        onClick: handleChange,
+        onSwatchHover: onSwatchHover,
+        active: hex === c.toLowerCase(),
+        circleSize: circleSize,
+        circleSpacing: circleSpacing
+      });
+    })
+  );
+};
+
+Circle.propTypes = {
+  width: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+  circleSize: PropTypes.number,
+  circleSpacing: PropTypes.number,
+  styles: PropTypes.object
+};
+
+Circle.defaultProps = {
+  width: 252,
+  circleSize: 28,
+  circleSpacing: 14,
+  colors: [material.red['500'], material.pink['500'], material.purple['500'], material.deepPurple['500'], material.indigo['500'], material.blue['500'], material.lightBlue['500'], material.cyan['500'], material.teal['500'], material.green['500'], material.lightGreen['500'], material.lime['500'], material.yellow['500'], material.amber['500'], material.orange['500'], material.deepOrange['500'], material.brown['500'], material.blueGrey['500']],
+  styles: {}
+};
+
+export default ColorWrap(Circle);

node_modules/react-color/es/components/circle/CircleSwatch.js

@@ -0,0 +1,62 @@
+import React from 'react';
+import reactCSS, { handleHover } from 'reactcss';
+
+import { Swatch } from '../common';
+
+export var CircleSwatch = function CircleSwatch(_ref) {
+  var color = _ref.color,
+      onClick = _ref.onClick,
+      onSwatchHover = _ref.onSwatchHover,
+      hover = _ref.hover,
+      active = _ref.active,
+      circleSize = _ref.circleSize,
+      circleSpacing = _ref.circleSpacing;
+
+  var styles = reactCSS({
+    'default': {
+      swatch: {
+        width: circleSize,
+        height: circleSize,
+        marginRight: circleSpacing,
+        marginBottom: circleSpacing,
+        transform: 'scale(1)',
+        transition: '100ms transform ease'
+      },
+      Swatch: {
+        borderRadius: '50%',
+        background: 'transparent',
+        boxShadow: 'inset 0 0 0 ' + (circleSize / 2 + 1) + 'px ' + color,
+        transition: '100ms box-shadow ease'
+      }
+    },
+    'hover': {
+      swatch: {
+        transform: 'scale(1.2)'
+      }
+    },
+    'active': {
+      Swatch: {
+        boxShadow: 'inset 0 0 0 3px ' + color
+      }
+    }
+  }, { hover: hover, active: active });
+
+  return React.createElement(
+    'div',
+    { style: styles.swatch },
+    React.createElement(Swatch, {
+      style: styles.Swatch,
+      color: color,
+      onClick: onClick,
+      onHover: onSwatchHover,
+      focusStyle: { boxShadow: styles.Swatch.boxShadow + ', 0 0 5px ' + color }
+    })
+  );
+};
+
+CircleSwatch.defaultProps = {
+  circleSize: 28,
+  circleSpacing: 14
+};
+
+export default handleHover(CircleSwatch);

node_modules/react-color/es/components/circle/spec.js

@@ -0,0 +1,54 @@
+/* global test, jest, expect */
+
+import React from 'react';
+import renderer from 'react-test-renderer';
+import { mount } from 'enzyme';
+
+import Circle from './Circle';
+import CircleSwatch from './CircleSwatch';
+import { Swatch } from '../common';
+import * as color from '../../helpers/color';
+
+test('Circle renders correctly', function () {
+  var tree = renderer.create(React.createElement(Circle, null)).toJSON();
+  expect(tree).toMatchSnapshot();
+});
+
+test('Circle onChange events correctly', function () {
+  var changeSpy = jest.fn(function (data) {
+    expect(color.simpleCheckForValidColor(data)).toBeTruthy();
+  });
+  var tree = mount(React.createElement(Circle, { onChange: changeSpy }));
+  expect(changeSpy).toHaveBeenCalledTimes(0);
+  var swatches = tree.find(Swatch);
+  swatches.at(0).childAt(0).simulate('click');
+
+  expect(changeSpy).toHaveBeenCalled();
+});
+
+test('Circle with onSwatchHover events correctly', function () {
+  var hoverSpy = jest.fn(function (data) {
+    expect(color.simpleCheckForValidColor(data)).toBeTruthy();
+  });
+  var tree = mount(React.createElement(Circle, { onSwatchHover: hoverSpy }));
+  expect(hoverSpy).toHaveBeenCalledTimes(0);
+  var swatches = tree.find(Swatch);
+  swatches.at(0).childAt(0).simulate('mouseOver');
+
+  expect(hoverSpy).toHaveBeenCalled();
+});
+
+test('Circle renders custom styles correctly', function () {
+  var tree = renderer.create(React.createElement(Circle, { styles: { default: { card: { boxShadow: 'none' } } } })).toJSON();
+  expect(tree.props.style.boxShadow).toBe('none');
+});
+
+test('CircleSwatch renders correctly', function () {
+  var tree = renderer.create(React.createElement(CircleSwatch, null)).toJSON();
+  expect(tree).toMatchSnapshot();
+});
+
+test('CircleSwatch renders with sizing and spacing', function () {
+  var tree = renderer.create(React.createElement(CircleSwatch, { circleSize: 40, circleSpacing: 40 })).toJSON();
+  expect(tree).toMatchSnapshot();
+});

node_modules/react-color/es/components/circle/story.js

@@ -0,0 +1,18 @@
+import React from 'react';
+import { storiesOf } from '@storybook/react';
+import { renderWithKnobs } from '../../../.storybook/report';
+import SyncColorField from '../../../.storybook/SyncColorField';
+
+import Circle from './Circle';
+
+storiesOf('Pickers', module).add('CirclePicker', function () {
+  return React.createElement(
+    SyncColorField,
+    { component: Circle },
+    renderWithKnobs(Circle, {}, null, {
+      width: { range: true, min: 140, max: 500, step: 1 },
+      circleSize: { range: true, min: 8, max: 72, step: 4 },
+      circleSpacing: { range: true, min: 7, max: 42, step: 7 }
+    })
+  );
+});

node_modules/react-color/es/components/common/Alpha.js

@@ -0,0 +1,141 @@
+var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
+
+var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
+
+function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+
+function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
+
+function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
+
+import React, { Component, PureComponent } from 'react';
+import reactCSS from 'reactcss';
+import * as alpha from '../../helpers/alpha';
+
+import Checkboard from './Checkboard';
+
+export var Alpha = function (_ref) {
+  _inherits(Alpha, _ref);
+
+  function Alpha() {
+    var _ref2;
+
+    var _temp, _this, _ret;
+
+    _classCallCheck(this, Alpha);
+
+    for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+
+    return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref2 = Alpha.__proto__ || Object.getPrototypeOf(Alpha)).call.apply(_ref2, [this].concat(args))), _this), _this.handleChange = function (e) {
+      var change = alpha.calculateChange(e, _this.props.hsl, _this.props.direction, _this.props.a, _this.container);
+      change && typeof _this.props.onChange === 'function' && _this.props.onChange(change, e);
+    }, _this.handleMouseDown = function (e) {
+      _this.handleChange(e);
+      window.addEventListener('mousemove', _this.handleChange);
+      window.addEventListener('mouseup', _this.handleMouseUp);
+    }, _this.handleMouseUp = function () {
+      _this.unbindEventListeners();
+    }, _this.unbindEventListeners = function () {
+      window.removeEventListener('mousemove', _this.handleChange);
+      window.removeEventListener('mouseup', _this.handleMouseUp);
+    }, _temp), _possibleConstructorReturn(_this, _ret);
+  }
+
+  _createClass(Alpha, [{
+    key: 'componentWillUnmount',
+    value: function componentWillUnmount() {
+      this.unbindEventListeners();
+    }
+  }, {
+    key: 'render',
+    value: function render() {
+      var _this2 = this;
+
+      var rgb = this.props.rgb;
+      var styles = reactCSS({
+        'default': {
+          alpha: {
+            absolute: '0px 0px 0px 0px',
+            borderRadius: this.props.radius
+          },
+          checkboard: {
+            absolute: '0px 0px 0px 0px',
+            overflow: 'hidden',
+            borderRadius: this.props.radius
+          },
+          gradient: {
+            absolute: '0px 0px 0px 0px',
+            background: 'linear-gradient(to right, rgba(' + rgb.r + ',' + rgb.g + ',' + rgb.b + ', 0) 0%,\n           rgba(' + rgb.r + ',' + rgb.g + ',' + rgb.b + ', 1) 100%)',
+            boxShadow: this.props.shadow,
+            borderRadius: this.props.radius
+          },
+          container: {
+            position: 'relative',
+            height: '100%',
+            margin: '0 3px'
+          },
+          pointer: {
+            position: 'absolute',
+            left: rgb.a * 100 + '%'
+          },
+          slider: {
+            width: '4px',
+            borderRadius: '1px',
+            height: '8px',
+            boxShadow: '0 0 2px rgba(0, 0, 0, .6)',
+            background: '#fff',
+            marginTop: '1px',
+            transform: 'translateX(-2px)'
+          }
+        },
+        'vertical': {
+          gradient: {
+            background: 'linear-gradient(to bottom, rgba(' + rgb.r + ',' + rgb.g + ',' + rgb.b + ', 0) 0%,\n           rgba(' + rgb.r + ',' + rgb.g + ',' + rgb.b + ', 1) 100%)'
+          },
+          pointer: {
+            left: 0,
+            top: rgb.a * 100 + '%'
+          }
+        },
+        'overwrite': _extends({}, this.props.style)
+      }, {
+        vertical: this.props.direction === 'vertical',
+        overwrite: true
+      });
+
+      return React.createElement(
+        'div',
+        { style: styles.alpha },
+        React.createElement(
+          'div',
+          { style: styles.checkboard },
+          React.createElement(Checkboard, { renderers: this.props.renderers })
+        ),
+        React.createElement('div', { style: styles.gradient }),
+        React.createElement(
+          'div',
+          {
+            style: styles.container,
+            ref: function ref(container) {
+              return _this2.container = container;
+            },
+            onMouseDown: this.handleMouseDown,
+            onTouchMove: this.handleChange,
+            onTouchStart: this.handleChange
+          },
+          React.createElement(
+            'div',
+            { style: styles.pointer },
+            this.props.pointer ? React.createElement(this.props.pointer, this.props) : React.createElement('div', { style: styles.slider })
+          )
+        )
+      );
+    }
+  }]);
+
+  return Alpha;
+}(PureComponent || Component);
+
+export default Alpha;

node_modules/react-color/es/components/common/Checkboard.js

@@ -0,0 +1,36 @@
+var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
+
+import React, { isValidElement } from 'react';
+import reactCSS from 'reactcss';
+import * as checkboard from '../../helpers/checkboard';
+
+export var Checkboard = function Checkboard(_ref) {
+  var white = _ref.white,
+      grey = _ref.grey,
+      size = _ref.size,
+      renderers = _ref.renderers,
+      borderRadius = _ref.borderRadius,
+      boxShadow = _ref.boxShadow,
+      children = _ref.children;
+
+  var styles = reactCSS({
+    'default': {
+      grid: {
+        borderRadius: borderRadius,
+        boxShadow: boxShadow,
+        absolute: '0px 0px 0px 0px',
+        background: 'url(' + checkboard.get(white, grey, size, renderers.canvas) + ') center left'
+      }
+    }
+  });
+  return isValidElement(children) ? React.cloneElement(children, _extends({}, children.props, { style: _extends({}, children.props.style, styles.grid) })) : React.createElement('div', { style: styles.grid });
+};
+
+Checkboard.defaultProps = {
+  size: 8,
+  white: 'transparent',
+  grey: 'rgba(0,0,0,.08)',
+  renderers: {}
+};
+
+export default Checkboard;

node_modules/react-color/es/components/common/ColorWrap.js

@@ -0,0 +1,86 @@
+var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
+
+var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
+
+function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+
+function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
+
+function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
+
+import React, { Component, PureComponent } from 'react';
+import debounce from 'lodash-es/debounce';
+import * as color from '../../helpers/color';
+
+export var ColorWrap = function ColorWrap(Picker) {
+  var ColorPicker = function (_ref) {
+    _inherits(ColorPicker, _ref);
+
+    function ColorPicker(props) {
+      _classCallCheck(this, ColorPicker);
+
+      var _this = _possibleConstructorReturn(this, (ColorPicker.__proto__ || Object.getPrototypeOf(ColorPicker)).call(this));
+
+      _this.handleChange = function (data, event) {
+        var isValidColor = color.simpleCheckForValidColor(data);
+        if (isValidColor) {
+          var colors = color.toState(data, data.h || _this.state.oldHue);
+          _this.setState(colors);
+          _this.props.onChangeComplete && _this.debounce(_this.props.onChangeComplete, colors, event);
+          _this.props.onChange && _this.props.onChange(colors, event);
+        }
+      };
+
+      _this.handleSwatchHover = function (data, event) {
+        var isValidColor = color.simpleCheckForValidColor(data);
+        if (isValidColor) {
+          var colors = color.toState(data, data.h || _this.state.oldHue);
+          _this.props.onSwatchHover && _this.props.onSwatchHover(colors, event);
+        }
+      };
+
+      _this.state = _extends({}, color.toState(props.color, 0));
+
+      _this.debounce = debounce(function (fn, data, event) {
+        fn(data, event);
+      }, 100);
+      return _this;
+    }
+
+    _createClass(ColorPicker, [{
+      key: 'render',
+      value: function render() {
+        var optionalEvents = {};
+        if (this.props.onSwatchHover) {
+          optionalEvents.onSwatchHover = this.handleSwatchHover;
+        }
+
+        return React.createElement(Picker, _extends({}, this.props, this.state, {
+          onChange: this.handleChange
+        }, optionalEvents));
+      }
+    }], [{
+      key: 'getDerivedStateFromProps',
+      value: function getDerivedStateFromProps(nextProps, state) {
+        return _extends({}, color.toState(nextProps.color, state.oldHue));
+      }
+    }]);
+
+    return ColorPicker;
+  }(PureComponent || Component);
+
+  ColorPicker.propTypes = _extends({}, Picker.propTypes);
+
+  ColorPicker.defaultProps = _extends({}, Picker.defaultProps, {
+    color: {
+      h: 250,
+      s: 0.50,
+      l: 0.20,
+      a: 1
+    }
+  });
+
+  return ColorPicker;
+};
+
+export default ColorWrap;

node_modules/react-color/es/components/common/EditableInput.js

@@ -0,0 +1,186 @@
+var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
+
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
+function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+
+function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
+
+function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
+
+import React, { Component, PureComponent } from 'react';
+import reactCSS from 'reactcss';
+
+var DEFAULT_ARROW_OFFSET = 1;
+
+var UP_KEY_CODE = 38;
+var DOWN_KEY_CODE = 40;
+var VALID_KEY_CODES = [UP_KEY_CODE, DOWN_KEY_CODE];
+var isValidKeyCode = function isValidKeyCode(keyCode) {
+  return VALID_KEY_CODES.indexOf(keyCode) > -1;
+};
+var getNumberValue = function getNumberValue(value) {
+  return Number(String(value).replace(/%/g, ''));
+};
+
+var idCounter = 1;
+
+export var EditableInput = function (_ref) {
+  _inherits(EditableInput, _ref);
+
+  function EditableInput(props) {
+    _classCallCheck(this, EditableInput);
+
+    var _this = _possibleConstructorReturn(this, (EditableInput.__proto__ || Object.getPrototypeOf(EditableInput)).call(this));
+
+    _this.handleBlur = function () {
+      if (_this.state.blurValue) {
+        _this.setState({ value: _this.state.blurValue, blurValue: null });
+      }
+    };
+
+    _this.handleChange = function (e) {
+      _this.setUpdatedValue(e.target.value, e);
+    };
+
+    _this.handleKeyDown = function (e) {
+      // In case `e.target.value` is a percentage remove the `%` character
+      // and update accordingly with a percentage
+      // https://github.com/casesandberg/react-color/issues/383
+      var value = getNumberValue(e.target.value);
+      if (!isNaN(value) && isValidKeyCode(e.keyCode)) {
+        var offset = _this.getArrowOffset();
+        var updatedValue = e.keyCode === UP_KEY_CODE ? value + offset : value - offset;
+
+        _this.setUpdatedValue(updatedValue, e);
+      }
+    };
+
+    _this.handleDrag = function (e) {
+      if (_this.props.dragLabel) {
+        var newValue = Math.round(_this.props.value + e.movementX);
+        if (newValue >= 0 && newValue <= _this.props.dragMax) {
+          _this.props.onChange && _this.props.onChange(_this.getValueObjectWithLabel(newValue), e);
+        }
+      }
+    };
+
+    _this.handleMouseDown = function (e) {
+      if (_this.props.dragLabel) {
+        e.preventDefault();
+        _this.handleDrag(e);
+        window.addEventListener('mousemove', _this.handleDrag);
+        window.addEventListener('mouseup', _this.handleMouseUp);
+      }
+    };
+
+    _this.handleMouseUp = function () {
+      _this.unbindEventListeners();
+    };
+
+    _this.unbindEventListeners = function () {
+      window.removeEventListener('mousemove', _this.handleDrag);
+      window.removeEventListener('mouseup', _this.handleMouseUp);
+    };
+
+    _this.state = {
+      value: String(props.value).toUpperCase(),
+      blurValue: String(props.value).toUpperCase()
+    };
+
+    _this.inputId = 'rc-editable-input-' + idCounter++;
+    return _this;
+  }
+
+  _createClass(EditableInput, [{
+    key: 'componentDidUpdate',
+    value: function componentDidUpdate(prevProps, prevState) {
+      if (this.props.value !== this.state.value && (prevProps.value !== this.props.value || prevState.value !== this.state.value)) {
+        if (this.input === document.activeElement) {
+          this.setState({ blurValue: String(this.props.value).toUpperCase() });
+        } else {
+          this.setState({ value: String(this.props.value).toUpperCase(), blurValue: !this.state.blurValue && String(this.props.value).toUpperCase() });
+        }
+      }
+    }
+  }, {
+    key: 'componentWillUnmount',
+    value: function componentWillUnmount() {
+      this.unbindEventListeners();
+    }
+  }, {
+    key: 'getValueObjectWithLabel',
+    value: function getValueObjectWithLabel(value) {
+      return _defineProperty({}, this.props.label, value);
+    }
+  }, {
+    key: 'getArrowOffset',
+    value: function getArrowOffset() {
+      return this.props.arrowOffset || DEFAULT_ARROW_OFFSET;
+    }
+  }, {
+    key: 'setUpdatedValue',
+    value: function setUpdatedValue(value, e) {
+      var onChangeValue = this.props.label ? this.getValueObjectWithLabel(value) : value;
+      this.props.onChange && this.props.onChange(onChangeValue, e);
+
+      this.setState({ value: value });
+    }
+  }, {
+    key: 'render',
+    value: function render() {
+      var _this2 = this;
+
+      var styles = reactCSS({
+        'default': {
+          wrap: {
+            position: 'relative'
+          }
+        },
+        'user-override': {
+          wrap: this.props.style && this.props.style.wrap ? this.props.style.wrap : {},
+          input: this.props.style && this.props.style.input ? this.props.style.input : {},
+          label: this.props.style && this.props.style.label ? this.props.style.label : {}
+        },
+        'dragLabel-true': {
+          label: {
+            cursor: 'ew-resize'
+          }
+        }
+      }, {
+        'user-override': true
+      }, this.props);
+
+      return React.createElement(
+        'div',
+        { style: styles.wrap },
+        React.createElement('input', {
+          id: this.inputId,
+          style: styles.input,
+          ref: function ref(input) {
+            return _this2.input = input;
+          },
+          value: this.state.value,
+          onKeyDown: this.handleKeyDown,
+          onChange: this.handleChange,
+          onBlur: this.handleBlur,
+          placeholder: this.props.placeholder,
+          spellCheck: 'false'
+        }),
+        this.props.label && !this.props.hideLabel ? React.createElement(
+          'label',
+          {
+            htmlFor: this.inputId,
+            style: styles.label,
+            onMouseDown: this.handleMouseDown
+          },
+          this.props.label
+        ) : null
+      );
+    }
+  }]);
+
+  return EditableInput;
+}(PureComponent || Component);
+
+export default EditableInput;

node_modules/react-color/es/components/common/Hue.js

@@ -0,0 +1,127 @@
+var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
+
+function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+
+function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
+
+function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
+
+import React, { Component, PureComponent } from 'react';
+import reactCSS from 'reactcss';
+import * as hue from '../../helpers/hue';
+
+export var Hue = function (_ref) {
+  _inherits(Hue, _ref);
+
+  function Hue() {
+    var _ref2;
+
+    var _temp, _this, _ret;
+
+    _classCallCheck(this, Hue);
+
+    for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+
+    return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref2 = Hue.__proto__ || Object.getPrototypeOf(Hue)).call.apply(_ref2, [this].concat(args))), _this), _this.handleChange = function (e) {
+      var change = hue.calculateChange(e, _this.props.direction, _this.props.hsl, _this.container);
+      change && typeof _this.props.onChange === 'function' && _this.props.onChange(change, e);
+    }, _this.handleMouseDown = function (e) {
+      _this.handleChange(e);
+      window.addEventListener('mousemove', _this.handleChange);
+      window.addEventListener('mouseup', _this.handleMouseUp);
+    }, _this.handleMouseUp = function () {
+      _this.unbindEventListeners();
+    }, _temp), _possibleConstructorReturn(_this, _ret);
+  }
+
+  _createClass(Hue, [{
+    key: 'componentWillUnmount',
+    value: function componentWillUnmount() {
+      this.unbindEventListeners();
+    }
+  }, {
+    key: 'unbindEventListeners',
+    value: function unbindEventListeners() {
+      window.removeEventListener('mousemove', this.handleChange);
+      window.removeEventListener('mouseup', this.handleMouseUp);
+    }
+  }, {
+    key: 'render',
+    value: function render() {
+      var _this2 = this;
+
+      var _props$direction = this.props.direction,
+          direction = _props$direction === undefined ? 'horizontal' : _props$direction;
+
+
+      var styles = reactCSS({
+        'default': {
+          hue: {
+            absolute: '0px 0px 0px 0px',
+            borderRadius: this.props.radius,
+            boxShadow: this.props.shadow
+          },
+          container: {
+            padding: '0 2px',
+            position: 'relative',
+            height: '100%',
+            borderRadius: this.props.radius
+          },
+          pointer: {
+            position: 'absolute',
+            left: this.props.hsl.h * 100 / 360 + '%'
+          },
+          slider: {
+            marginTop: '1px',
+            width: '4px',
+            borderRadius: '1px',
+            height: '8px',
+            boxShadow: '0 0 2px rgba(0, 0, 0, .6)',
+            background: '#fff',
+            transform: 'translateX(-2px)'
+          }
+        },
+        'vertical': {
+          pointer: {
+            left: '0px',
+            top: -(this.props.hsl.h * 100 / 360) + 100 + '%'
+          }
+        }
+      }, { vertical: direction === 'vertical' });
+
+      return React.createElement(
+        'div',
+        { style: styles.hue },
+        React.createElement(
+          'div',
+          {
+            className: 'hue-' + direction,
+            style: styles.container,
+            ref: function ref(container) {
+              return _this2.container = container;
+            },
+            onMouseDown: this.handleMouseDown,
+            onTouchMove: this.handleChange,
+            onTouchStart: this.handleChange
+          },
+          React.createElement(
+            'style',
+            null,
+            '\n            .hue-horizontal {\n              background: linear-gradient(to right, #f00 0%, #ff0 17%, #0f0\n                33%, #0ff 50%, #00f 67%, #f0f 83%, #f00 100%);\n              background: -webkit-linear-gradient(to right, #f00 0%, #ff0\n                17%, #0f0 33%, #0ff 50%, #00f 67%, #f0f 83%, #f00 100%);\n            }\n\n            .hue-vertical {\n              background: linear-gradient(to top, #f00 0%, #ff0 17%, #0f0 33%,\n                #0ff 50%, #00f 67%, #f0f 83%, #f00 100%);\n              background: -webkit-linear-gradient(to top, #f00 0%, #ff0 17%,\n                #0f0 33%, #0ff 50%, #00f 67%, #f0f 83%, #f00 100%);\n            }\n          '
+          ),
+          React.createElement(
+            'div',
+            { style: styles.pointer },
+            this.props.pointer ? React.createElement(this.props.pointer, this.props) : React.createElement('div', { style: styles.slider })
+          )
+        )
+      );
+    }
+  }]);
+
+  return Hue;
+}(PureComponent || Component);
+
+export default Hue;

node_modules/react-color/es/components/common/Raised.js

@@ -0,0 +1,99 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import reactCSS from 'reactcss';
+import merge from 'lodash-es/merge';
+
+export var Raised = function Raised(_ref) {
+  var zDepth = _ref.zDepth,
+      radius = _ref.radius,
+      background = _ref.background,
+      children = _ref.children,
+      _ref$styles = _ref.styles,
+      passedStyles = _ref$styles === undefined ? {} : _ref$styles;
+
+  var styles = reactCSS(merge({
+    'default': {
+      wrap: {
+        position: 'relative',
+        display: 'inline-block'
+      },
+      content: {
+        position: 'relative'
+      },
+      bg: {
+        absolute: '0px 0px 0px 0px',
+        boxShadow: '0 ' + zDepth + 'px ' + zDepth * 4 + 'px rgba(0,0,0,.24)',
+        borderRadius: radius,
+        background: background
+      }
+    },
+    'zDepth-0': {
+      bg: {
+        boxShadow: 'none'
+      }
+    },
+
+    'zDepth-1': {
+      bg: {
+        boxShadow: '0 2px 10px rgba(0,0,0,.12), 0 2px 5px rgba(0,0,0,.16)'
+      }
+    },
+    'zDepth-2': {
+      bg: {
+        boxShadow: '0 6px 20px rgba(0,0,0,.19), 0 8px 17px rgba(0,0,0,.2)'
+      }
+    },
+    'zDepth-3': {
+      bg: {
+        boxShadow: '0 17px 50px rgba(0,0,0,.19), 0 12px 15px rgba(0,0,0,.24)'
+      }
+    },
+    'zDepth-4': {
+      bg: {
+        boxShadow: '0 25px 55px rgba(0,0,0,.21), 0 16px 28px rgba(0,0,0,.22)'
+      }
+    },
+    'zDepth-5': {
+      bg: {
+        boxShadow: '0 40px 77px rgba(0,0,0,.22), 0 27px 24px rgba(0,0,0,.2)'
+      }
+    },
+    'square': {
+      bg: {
+        borderRadius: '0'
+      }
+    },
+    'circle': {
+      bg: {
+        borderRadius: '50%'
+      }
+    }
+  }, passedStyles), { 'zDepth-1': zDepth === 1 });
+
+  return React.createElement(
+    'div',
+    { style: styles.wrap },
+    React.createElement('div', { style: styles.bg }),
+    React.createElement(
+      'div',
+      { style: styles.content },
+      children
+    )
+  );
+};
+
+Raised.propTypes = {
+  background: PropTypes.string,
+  zDepth: PropTypes.oneOf([0, 1, 2, 3, 4, 5]),
+  radius: PropTypes.number,
+  styles: PropTypes.object
+};
+
+Raised.defaultProps = {
+  background: '#fff',
+  zDepth: 1,
+  radius: 2,
+  styles: {}
+};
+
+export default Raised;

node_modules/react-color/es/components/common/Saturation.js

@@ -0,0 +1,152 @@
+var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
+
+function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+
+function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
+
+function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
+
+import React, { Component, PureComponent } from 'react';
+import reactCSS from 'reactcss';
+import throttle from 'lodash-es/throttle';
+import * as saturation from '../../helpers/saturation';
+
+export var Saturation = function (_ref) {
+  _inherits(Saturation, _ref);
+
+  function Saturation(props) {
+    _classCallCheck(this, Saturation);
+
+    var _this = _possibleConstructorReturn(this, (Saturation.__proto__ || Object.getPrototypeOf(Saturation)).call(this, props));
+
+    _this.handleChange = function (e) {
+      typeof _this.props.onChange === 'function' && _this.throttle(_this.props.onChange, saturation.calculateChange(e, _this.props.hsl, _this.container), e);
+    };
+
+    _this.handleMouseDown = function (e) {
+      _this.handleChange(e);
+      var renderWindow = _this.getContainerRenderWindow();
+      renderWindow.addEventListener('mousemove', _this.handleChange);
+      renderWindow.addEventListener('mouseup', _this.handleMouseUp);
+    };
+
+    _this.handleMouseUp = function () {
+      _this.unbindEventListeners();
+    };
+
+    _this.throttle = throttle(function (fn, data, e) {
+      fn(data, e);
+    }, 50);
+    return _this;
+  }
+
+  _createClass(Saturation, [{
+    key: 'componentWillUnmount',
+    value: function componentWillUnmount() {
+      this.throttle.cancel();
+      this.unbindEventListeners();
+    }
+  }, {
+    key: 'getContainerRenderWindow',
+    value: function getContainerRenderWindow() {
+      var container = this.container;
+
+      var renderWindow = window;
+      while (!renderWindow.document.contains(container) && renderWindow.parent !== renderWindow) {
+        renderWindow = renderWindow.parent;
+      }
+      return renderWindow;
+    }
+  }, {
+    key: 'unbindEventListeners',
+    value: function unbindEventListeners() {
+      var renderWindow = this.getContainerRenderWindow();
+      renderWindow.removeEventListener('mousemove', this.handleChange);
+      renderWindow.removeEventListener('mouseup', this.handleMouseUp);
+    }
+  }, {
+    key: 'render',
+    value: function render() {
+      var _this2 = this;
+
+      var _ref2 = this.props.style || {},
+          color = _ref2.color,
+          white = _ref2.white,
+          black = _ref2.black,
+          pointer = _ref2.pointer,
+          circle = _ref2.circle;
+
+      var styles = reactCSS({
+        'default': {
+          color: {
+            absolute: '0px 0px 0px 0px',
+            background: 'hsl(' + this.props.hsl.h + ',100%, 50%)',
+            borderRadius: this.props.radius
+          },
+          white: {
+            absolute: '0px 0px 0px 0px',
+            borderRadius: this.props.radius
+          },
+          black: {
+            absolute: '0px 0px 0px 0px',
+            boxShadow: this.props.shadow,
+            borderRadius: this.props.radius
+          },
+          pointer: {
+            position: 'absolute',
+            top: -(this.props.hsv.v * 100) + 100 + '%',
+            left: this.props.hsv.s * 100 + '%',
+            cursor: 'default'
+          },
+          circle: {
+            width: '4px',
+            height: '4px',
+            boxShadow: '0 0 0 1.5px #fff, inset 0 0 1px 1px rgba(0,0,0,.3),\n            0 0 1px 2px rgba(0,0,0,.4)',
+            borderRadius: '50%',
+            cursor: 'hand',
+            transform: 'translate(-2px, -2px)'
+          }
+        },
+        'custom': {
+          color: color,
+          white: white,
+          black: black,
+          pointer: pointer,
+          circle: circle
+        }
+      }, { 'custom': !!this.props.style });
+
+      return React.createElement(
+        'div',
+        {
+          style: styles.color,
+          ref: function ref(container) {
+            return _this2.container = container;
+          },
+          onMouseDown: this.handleMouseDown,
+          onTouchMove: this.handleChange,
+          onTouchStart: this.handleChange
+        },
+        React.createElement(
+          'style',
+          null,
+          '\n          .saturation-white {\n            background: -webkit-linear-gradient(to right, #fff, rgba(255,255,255,0));\n            background: linear-gradient(to right, #fff, rgba(255,255,255,0));\n          }\n          .saturation-black {\n            background: -webkit-linear-gradient(to top, #000, rgba(0,0,0,0));\n            background: linear-gradient(to top, #000, rgba(0,0,0,0));\n          }\n        '
+        ),
+        React.createElement(
+          'div',
+          { style: styles.white, className: 'saturation-white' },
+          React.createElement('div', { style: styles.black, className: 'saturation-black' }),
+          React.createElement(
+            'div',
+            { style: styles.pointer },
+            this.props.pointer ? React.createElement(this.props.pointer, this.props) : React.createElement('div', { style: styles.circle })
+          )
+        )
+      );
+    }
+  }]);
+
+  return Saturation;
+}(PureComponent || Component);
+
+export default Saturation;

node_modules/react-color/es/components/common/Swatch.js

@@ -0,0 +1,70 @@
+var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
+
+import React from 'react';
+import reactCSS from 'reactcss';
+import { handleFocus } from '../../helpers/interaction';
+
+import Checkboard from './Checkboard';
+
+var ENTER = 13;
+
+export var Swatch = function Swatch(_ref) {
+  var color = _ref.color,
+      style = _ref.style,
+      _ref$onClick = _ref.onClick,
+      onClick = _ref$onClick === undefined ? function () {} : _ref$onClick,
+      onHover = _ref.onHover,
+      _ref$title = _ref.title,
+      title = _ref$title === undefined ? color : _ref$title,
+      children = _ref.children,
+      focus = _ref.focus,
+      _ref$focusStyle = _ref.focusStyle,
+      focusStyle = _ref$focusStyle === undefined ? {} : _ref$focusStyle;
+
+  var transparent = color === 'transparent';
+  var styles = reactCSS({
+    default: {
+      swatch: _extends({
+        background: color,
+        height: '100%',
+        width: '100%',
+        cursor: 'pointer',
+        position: 'relative',
+        outline: 'none'
+      }, style, focus ? focusStyle : {})
+    }
+  });
+
+  var handleClick = function handleClick(e) {
+    return onClick(color, e);
+  };
+  var handleKeyDown = function handleKeyDown(e) {
+    return e.keyCode === ENTER && onClick(color, e);
+  };
+  var handleHover = function handleHover(e) {
+    return onHover(color, e);
+  };
+
+  var optionalEvents = {};
+  if (onHover) {
+    optionalEvents.onMouseOver = handleHover;
+  }
+
+  return React.createElement(
+    'div',
+    _extends({
+      style: styles.swatch,
+      onClick: handleClick,
+      title: title,
+      tabIndex: 0,
+      onKeyDown: handleKeyDown
+    }, optionalEvents),
+    children,
+    transparent && React.createElement(Checkboard, {
+      borderRadius: styles.swatch.borderRadius,
+      boxShadow: 'inset 0 0 0 1px rgba(0,0,0,0.1)'
+    })
+  );
+};
+
+export default handleFocus(Swatch);

node_modules/react-color/es/components/common/index.js

@@ -0,0 +1,8 @@
+export { default as Alpha } from './Alpha';
+export { default as Checkboard } from './Checkboard';
+export { default as EditableInput } from './EditableInput';
+export { default as Hue } from './Hue';
+export { default as Raised } from './Raised';
+export { default as Saturation } from './Saturation';
+export { default as ColorWrap } from './ColorWrap';
+export { default as Swatch } from './Swatch';

node_modules/react-color/es/components/common/spec.js

@@ -0,0 +1,80 @@
+/* global test, jest, expect */
+
+import React from 'react';
+import renderer from 'react-test-renderer';
+import { red } from '../../helpers/color';
+// import canvas from 'canvas'
+
+import Alpha from './Alpha';
+import Checkboard from './Checkboard';
+import EditableInput from './EditableInput';
+import Hue from './Hue';
+import Saturation from './Saturation';
+import Swatch from './Swatch';
+
+test('Alpha renders correctly', function () {
+  var tree = renderer.create(React.createElement(Alpha, red)).toJSON();
+  expect(tree).toMatchSnapshot();
+});
+
+// test('Alpha renders on server correctly', () => {
+//   const tree = renderer.create(
+//     <Alpha renderers={{ canvas }} { ...red } />
+//   ).toJSON()
+//   expect(tree).toMatchSnapshot()
+// })
+
+test('Checkboard renders correctly', function () {
+  var tree = renderer.create(React.createElement(Checkboard, null)).toJSON();
+  expect(tree).toMatchSnapshot();
+});
+
+test('Checkboard renders children correctly', function () {
+  var tree = renderer.create(React.createElement(
+    Checkboard,
+    null,
+    React.createElement(
+      'button',
+      null,
+      'Click'
+    )
+  )).toJSON();
+  expect(tree).toMatchSnapshot();
+});
+
+// test('Checkboard renders on server correctly', () => {
+//   const tree = renderer.create(
+//     <Checkboard renderers={{ canvas }} />
+//   ).toJSON()
+//   expect(tree).toMatchSnapshot()
+// })
+
+test('EditableInput renders correctly', function () {
+  var tree = renderer.create(React.createElement(EditableInput, { label: 'Hex', placeholder: '#fff' })).toJSON();
+  expect(tree).toMatchSnapshot();
+});
+
+test('Hue renders correctly', function () {
+  var tree = renderer.create(React.createElement(Hue, red)).toJSON();
+  expect(tree).toMatchSnapshot();
+});
+
+test('Saturation renders correctly', function () {
+  var tree = renderer.create(React.createElement(Saturation, red)).toJSON();
+  expect(tree).toMatchSnapshot();
+});
+
+test('Swatch renders correctly', function () {
+  var tree = renderer.create(React.createElement(Swatch, { color: '#333', style: { opacity: '0.4' } })).toJSON();
+  expect(tree).toMatchSnapshot();
+});
+
+test('Swatch renders custom title correctly', function () {
+  var tree = renderer.create(React.createElement(Swatch, { color: '#fff', title: 'white' })).toJSON();
+  expect(tree).toMatchSnapshot();
+});
+
+test('Swatch renders with an onMouseOver handler correctly', function () {
+  var tree = renderer.create(React.createElement(Swatch, { color: '#fff', title: 'white', onHover: function onHover() {} })).toJSON();
+  expect(tree).toMatchSnapshot();
+});

node_modules/react-color/es/components/compact/Compact.js

@@ -0,0 +1,87 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import reactCSS from 'reactcss';
+import map from 'lodash-es/map';
+import merge from 'lodash-es/merge';
+import * as color from '../../helpers/color';
+
+import { ColorWrap, Raised } from '../common';
+import CompactColor from './CompactColor';
+import CompactFields from './CompactFields';
+
+export var Compact = function Compact(_ref) {
+  var onChange = _ref.onChange,
+      onSwatchHover = _ref.onSwatchHover,
+      colors = _ref.colors,
+      hex = _ref.hex,
+      rgb = _ref.rgb,
+      _ref$styles = _ref.styles,
+      passedStyles = _ref$styles === undefined ? {} : _ref$styles,
+      _ref$className = _ref.className,
+      className = _ref$className === undefined ? '' : _ref$className;
+
+  var styles = reactCSS(merge({
+    'default': {
+      Compact: {
+        background: '#f6f6f6',
+        radius: '4px'
+      },
+      compact: {
+        paddingTop: '5px',
+        paddingLeft: '5px',
+        boxSizing: 'initial',
+        width: '240px'
+      },
+      clear: {
+        clear: 'both'
+      }
+    }
+  }, passedStyles));
+
+  var handleChange = function handleChange(data, e) {
+    if (data.hex) {
+      color.isValidHex(data.hex) && onChange({
+        hex: data.hex,
+        source: 'hex'
+      }, e);
+    } else {
+      onChange(data, e);
+    }
+  };
+
+  return React.createElement(
+    Raised,
+    { style: styles.Compact, styles: passedStyles },
+    React.createElement(
+      'div',
+      { style: styles.compact, className: 'compact-picker ' + className },
+      React.createElement(
+        'div',
+        null,
+        map(colors, function (c) {
+          return React.createElement(CompactColor, {
+            key: c,
+            color: c,
+            active: c.toLowerCase() === hex,
+            onClick: handleChange,
+            onSwatchHover: onSwatchHover
+          });
+        }),
+        React.createElement('div', { style: styles.clear })
+      ),
+      React.createElement(CompactFields, { hex: hex, rgb: rgb, onChange: handleChange })
+    )
+  );
+};
+
+Compact.propTypes = {
+  colors: PropTypes.arrayOf(PropTypes.string),
+  styles: PropTypes.object
+};
+
+Compact.defaultProps = {
+  colors: ['#4D4D4D', '#999999', '#FFFFFF', '#F44E3B', '#FE9200', '#FCDC00', '#DBDF00', '#A4DD00', '#68CCCA', '#73D8FF', '#AEA1FF', '#FDA1FF', '#333333', '#808080', '#cccccc', '#D33115', '#E27300', '#FCC400', '#B0BC00', '#68BC00', '#16A5A5', '#009CE0', '#7B64FF', '#FA28FF', '#000000', '#666666', '#B3B3B3', '#9F0500', '#C45100', '#FB9E00', '#808900', '#194D33', '#0C797D', '#0062B1', '#653294', '#AB149E'],
+  styles: {}
+};
+
+export default ColorWrap(Compact);

node_modules/react-color/es/components/compact/CompactColor.js

@@ -0,0 +1,66 @@
+import React from 'react';
+import reactCSS from 'reactcss';
+import * as colorUtils from '../../helpers/color';
+
+import { Swatch } from '../common';
+
+export var CompactColor = function CompactColor(_ref) {
+  var color = _ref.color,
+      _ref$onClick = _ref.onClick,
+      onClick = _ref$onClick === undefined ? function () {} : _ref$onClick,
+      onSwatchHover = _ref.onSwatchHover,
+      active = _ref.active;
+
+  var styles = reactCSS({
+    'default': {
+      color: {
+        background: color,
+        width: '15px',
+        height: '15px',
+        float: 'left',
+        marginRight: '5px',
+        marginBottom: '5px',
+        position: 'relative',
+        cursor: 'pointer'
+      },
+      dot: {
+        absolute: '5px 5px 5px 5px',
+        background: colorUtils.getContrastingColor(color),
+        borderRadius: '50%',
+        opacity: '0'
+      }
+    },
+    'active': {
+      dot: {
+        opacity: '1'
+      }
+    },
+    'color-#FFFFFF': {
+      color: {
+        boxShadow: 'inset 0 0 0 1px #ddd'
+      },
+      dot: {
+        background: '#000'
+      }
+    },
+    'transparent': {
+      dot: {
+        background: '#000'
+      }
+    }
+  }, { active: active, 'color-#FFFFFF': color === '#FFFFFF', 'transparent': color === 'transparent' });
+
+  return React.createElement(
+    Swatch,
+    {
+      style: styles.color,
+      color: color,
+      onClick: onClick,
+      onHover: onSwatchHover,
+      focusStyle: { boxShadow: '0 0 4px ' + color }
+    },
+    React.createElement('div', { style: styles.dot })
+  );
+};
+
+export default CompactColor;

node_modules/react-color/es/components/compact/CompactFields.js

@@ -0,0 +1,119 @@
+import React from 'react';
+import reactCSS from 'reactcss';
+
+import { EditableInput } from '../common';
+
+export var CompactFields = function CompactFields(_ref) {
+  var hex = _ref.hex,
+      rgb = _ref.rgb,
+      onChange = _ref.onChange;
+
+  var styles = reactCSS({
+    'default': {
+      fields: {
+        display: 'flex',
+        paddingBottom: '6px',
+        paddingRight: '5px',
+        position: 'relative'
+      },
+      active: {
+        position: 'absolute',
+        top: '6px',
+        left: '5px',
+        height: '9px',
+        width: '9px',
+        background: hex
+      },
+      HEXwrap: {
+        flex: '6',
+        position: 'relative'
+      },
+      HEXinput: {
+        width: '80%',
+        padding: '0px',
+        paddingLeft: '20%',
+        border: 'none',
+        outline: 'none',
+        background: 'none',
+        fontSize: '12px',
+        color: '#333',
+        height: '16px'
+      },
+      HEXlabel: {
+        display: 'none'
+      },
+      RGBwrap: {
+        flex: '3',
+        position: 'relative'
+      },
+      RGBinput: {
+        width: '70%',
+        padding: '0px',
+        paddingLeft: '30%',
+        border: 'none',
+        outline: 'none',
+        background: 'none',
+        fontSize: '12px',
+        color: '#333',
+        height: '16px'
+      },
+      RGBlabel: {
+        position: 'absolute',
+        top: '3px',
+        left: '0px',
+        lineHeight: '16px',
+        textTransform: 'uppercase',
+        fontSize: '12px',
+        color: '#999'
+      }
+    }
+  });
+
+  var handleChange = function handleChange(data, e) {
+    if (data.r || data.g || data.b) {
+      onChange({
+        r: data.r || rgb.r,
+        g: data.g || rgb.g,
+        b: data.b || rgb.b,
+        source: 'rgb'
+      }, e);
+    } else {
+      onChange({
+        hex: data.hex,
+        source: 'hex'
+      }, e);
+    }
+  };
+
+  return React.createElement(
+    'div',
+    { style: styles.fields, className: 'flexbox-fix' },
+    React.createElement('div', { style: styles.active }),
+    React.createElement(EditableInput, {
+      style: { wrap: styles.HEXwrap, input: styles.HEXinput, label: styles.HEXlabel },
+      label: 'hex',
+      value: hex,
+      onChange: handleChange
+    }),
+    React.createElement(EditableInput, {
+      style: { wrap: styles.RGBwrap, input: styles.RGBinput, label: styles.RGBlabel },
+      label: 'r',
+      value: rgb.r,
+      onChange: handleChange
+    }),
+    React.createElement(EditableInput, {
+      style: { wrap: styles.RGBwrap, input: styles.RGBinput, label: styles.RGBlabel },
+      label: 'g',
+      value: rgb.g,
+      onChange: handleChange
+    }),
+    React.createElement(EditableInput, {
+      style: { wrap: styles.RGBwrap, input: styles.RGBinput, label: styles.RGBlabel },
+      label: 'b',
+      value: rgb.b,
+      onChange: handleChange
+    })
+  );
+};
+
+export default CompactFields;

node_modules/react-color/es/components/compact/spec.js

@@ -0,0 +1,62 @@
+var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
+
+/* global test, jest, expect */
+
+import React from 'react';
+import renderer from 'react-test-renderer';
+import { mount } from 'enzyme';
+import * as color from '../../helpers/color';
+
+import Compact from './Compact';
+import CompactColor from './CompactColor';
+import CompactFields from './CompactFields';
+import { Swatch } from '../common';
+
+test('Compact renders correctly', function () {
+  var tree = renderer.create(React.createElement(Compact, color.red)).toJSON();
+  expect(tree).toMatchSnapshot();
+});
+
+test('Compact with onSwatchHover renders correctly', function () {
+  var tree = renderer.create(React.createElement(Compact, _extends({}, color.red, { onSwatchHover: function onSwatchHover() {} }))).toJSON();
+  expect(tree).toMatchSnapshot();
+});
+
+test('Compact onChange events correctly', function () {
+  var changeSpy = jest.fn(function (data) {
+    expect(color.simpleCheckForValidColor(data)).toBeTruthy();
+  });
+  var tree = mount(React.createElement(Compact, _extends({}, color.red, { onChange: changeSpy })));
+  expect(changeSpy).toHaveBeenCalledTimes(0);
+  var swatches = tree.find(Swatch);
+  swatches.at(0).childAt(0).simulate('click');
+
+  expect(changeSpy).toHaveBeenCalled();
+});
+
+test('Compact with onSwatchHover events correctly', function () {
+  var hoverSpy = jest.fn(function (data) {
+    expect(color.simpleCheckForValidColor(data)).toBeTruthy();
+  });
+  var tree = mount(React.createElement(Compact, _extends({}, color.red, { onSwatchHover: hoverSpy })));
+  expect(hoverSpy).toHaveBeenCalledTimes(0);
+  var swatches = tree.find(Swatch);
+  swatches.at(0).childAt(0).simulate('mouseOver');
+
+  expect(hoverSpy).toHaveBeenCalled();
+});
+
+test('CompactColor renders correctly', function () {
+  var tree = renderer.create(React.createElement(CompactColor, null)).toJSON();
+  expect(tree).toMatchSnapshot();
+});
+
+test('CompactFields renders correctly', function () {
+  var tree = renderer.create(React.createElement(CompactFields, color.red)).toJSON();
+  expect(tree).toMatchSnapshot();
+});
+
+test('Compact renders custom styles correctly', function () {
+  var tree = renderer.create(React.createElement(Compact, _extends({}, color.red, { styles: { default: { wrap: { boxShadow: '0 0 10px red' } } } }))).toJSON();
+  expect(tree.props.style.boxShadow).toBe('0 0 10px red');
+});

node_modules/react-color/es/components/compact/story.js

@@ -0,0 +1,18 @@
+import React from 'react';
+import { storiesOf } from '@storybook/react';
+import { renderWithKnobs } from '../../../.storybook/report';
+import SyncColorField from '../../../.storybook/SyncColorField';
+
+import Compact from './Compact';
+
+storiesOf('Pickers', module).add('CompactPicker', function () {
+  return React.createElement(
+    SyncColorField,
+    { component: Compact },
+    renderWithKnobs(Compact, {}, null, {
+      width: { range: true, min: 140, max: 500, step: 1 },
+      circleSize: { range: true, min: 8, max: 72, step: 4 },
+      circleSpacing: { range: true, min: 7, max: 42, step: 7 }
+    })
+  );
+});

node_modules/react-color/es/components/github/Github.js

@@ -0,0 +1,139 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import reactCSS from 'reactcss';
+import map from 'lodash-es/map';
+import merge from 'lodash-es/merge';
+
+import { ColorWrap } from '../common';
+import GithubSwatch from './GithubSwatch';
+
+export var Github = function Github(_ref) {
+  var width = _ref.width,
+      colors = _ref.colors,
+      onChange = _ref.onChange,
+      onSwatchHover = _ref.onSwatchHover,
+      triangle = _ref.triangle,
+      _ref$styles = _ref.styles,
+      passedStyles = _ref$styles === undefined ? {} : _ref$styles,
+      _ref$className = _ref.className,
+      className = _ref$className === undefined ? '' : _ref$className;
+
+  var styles = reactCSS(merge({
+    'default': {
+      card: {
+        width: width,
+        background: '#fff',
+        border: '1px solid rgba(0,0,0,0.2)',
+        boxShadow: '0 3px 12px rgba(0,0,0,0.15)',
+        borderRadius: '4px',
+        position: 'relative',
+        padding: '5px',
+        display: 'flex',
+        flexWrap: 'wrap'
+      },
+      triangle: {
+        position: 'absolute',
+        border: '7px solid transparent',
+        borderBottomColor: '#fff'
+      },
+      triangleShadow: {
+        position: 'absolute',
+        border: '8px solid transparent',
+        borderBottomColor: 'rgba(0,0,0,0.15)'
+      }
+    },
+    'hide-triangle': {
+      triangle: {
+        display: 'none'
+      },
+      triangleShadow: {
+        display: 'none'
+      }
+    },
+    'top-left-triangle': {
+      triangle: {
+        top: '-14px',
+        left: '10px'
+      },
+      triangleShadow: {
+        top: '-16px',
+        left: '9px'
+      }
+    },
+    'top-right-triangle': {
+      triangle: {
+        top: '-14px',
+        right: '10px'
+      },
+      triangleShadow: {
+        top: '-16px',
+        right: '9px'
+      }
+    },
+    'bottom-left-triangle': {
+      triangle: {
+        top: '35px',
+        left: '10px',
+        transform: 'rotate(180deg)'
+      },
+      triangleShadow: {
+        top: '37px',
+        left: '9px',
+        transform: 'rotate(180deg)'
+      }
+    },
+    'bottom-right-triangle': {
+      triangle: {
+        top: '35px',
+        right: '10px',
+        transform: 'rotate(180deg)'
+      },
+      triangleShadow: {
+        top: '37px',
+        right: '9px',
+        transform: 'rotate(180deg)'
+      }
+    }
+  }, passedStyles), {
+    'hide-triangle': triangle === 'hide',
+    'top-left-triangle': triangle === 'top-left',
+    'top-right-triangle': triangle === 'top-right',
+    'bottom-left-triangle': triangle === 'bottom-left',
+    'bottom-right-triangle': triangle === 'bottom-right'
+  });
+
+  var handleChange = function handleChange(hex, e) {
+    return onChange({ hex: hex, source: 'hex' }, e);
+  };
+
+  return React.createElement(
+    'div',
+    { style: styles.card, className: 'github-picker ' + className },
+    React.createElement('div', { style: styles.triangleShadow }),
+    React.createElement('div', { style: styles.triangle }),
+    map(colors, function (c) {
+      return React.createElement(GithubSwatch, {
+        color: c,
+        key: c,
+        onClick: handleChange,
+        onSwatchHover: onSwatchHover
+      });
+    })
+  );
+};
+
+Github.propTypes = {
+  width: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+  colors: PropTypes.arrayOf(PropTypes.string),
+  triangle: PropTypes.oneOf(['hide', 'top-left', 'top-right', 'bottom-left', 'bottom-right']),
+  styles: PropTypes.object
+};
+
+Github.defaultProps = {
+  width: 200,
+  colors: ['#B80000', '#DB3E00', '#FCCB00', '#008B02', '#006B76', '#1273DE', '#004DCF', '#5300EB', '#EB9694', '#FAD0C3', '#FEF3BD', '#C1E1C5', '#BEDADC', '#C4DEF6', '#BED3F3', '#D4C4FB'],
+  triangle: 'top-left',
+  styles: {}
+};
+
+export default ColorWrap(Github);

node_modules/react-color/es/components/github/GithubSwatch.js

@@ -0,0 +1,44 @@
+import React from 'react';
+import reactCSS, { handleHover } from 'reactcss';
+
+import { Swatch } from '../common';
+
+export var GithubSwatch = function GithubSwatch(_ref) {
+  var hover = _ref.hover,
+      color = _ref.color,
+      onClick = _ref.onClick,
+      onSwatchHover = _ref.onSwatchHover;
+
+  var hoverSwatch = {
+    position: 'relative',
+    zIndex: '2',
+    outline: '2px solid #fff',
+    boxShadow: '0 0 5px 2px rgba(0,0,0,0.25)'
+  };
+
+  var styles = reactCSS({
+    'default': {
+      swatch: {
+        width: '25px',
+        height: '25px',
+        fontSize: '0'
+      }
+    },
+    'hover': {
+      swatch: hoverSwatch
+    }
+  }, { hover: hover });
+
+  return React.createElement(
+    'div',
+    { style: styles.swatch },
+    React.createElement(Swatch, {
+      color: color,
+      onClick: onClick,
+      onHover: onSwatchHover,
+      focusStyle: hoverSwatch
+    })
+  );
+};
+
+export default handleHover(GithubSwatch);

node_modules/react-color/es/components/github/spec.js

@@ -0,0 +1,61 @@
+var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
+
+/* global test, jest, expect */
+
+import React from 'react';
+import renderer from 'react-test-renderer';
+import { mount } from 'enzyme';
+import * as color from '../../helpers/color';
+
+import Github from './Github';
+import GithubSwatch from './GithubSwatch';
+import { Swatch } from '../common';
+
+test('Github renders correctly', function () {
+  var tree = renderer.create(React.createElement(Github, color.red)).toJSON();
+  expect(tree).toMatchSnapshot();
+});
+
+test('Github onChange events correctly', function () {
+  var changeSpy = jest.fn(function (data) {
+    expect(color.simpleCheckForValidColor(data)).toBeTruthy();
+  });
+  var tree = mount(React.createElement(Github, { onChange: changeSpy }));
+  expect(changeSpy).toHaveBeenCalledTimes(0);
+  var swatches = tree.find(Swatch);
+  swatches.at(0).childAt(0).simulate('click');
+
+  expect(changeSpy).toHaveBeenCalled();
+});
+
+test('Github with onSwatchHover events correctly', function () {
+  var hoverSpy = jest.fn(function (data) {
+    expect(color.simpleCheckForValidColor(data)).toBeTruthy();
+  });
+  var tree = mount(React.createElement(Github, { onSwatchHover: hoverSpy }));
+  expect(hoverSpy).toHaveBeenCalledTimes(0);
+  var swatches = tree.find(Swatch);
+  swatches.at(0).childAt(0).simulate('mouseOver');
+
+  expect(hoverSpy).toHaveBeenCalled();
+});
+
+test('Github `triangle="hide"`', function () {
+  var tree = renderer.create(React.createElement(Github, _extends({}, color.red, { triangle: 'hide' }))).toJSON();
+  expect(tree).toMatchSnapshot();
+});
+
+test('Github `triangle="top-right"`', function () {
+  var tree = renderer.create(React.createElement(Github, _extends({}, color.red, { triangle: 'top-right' }))).toJSON();
+  expect(tree).toMatchSnapshot();
+});
+
+test('Github renders custom styles correctly', function () {
+  var tree = renderer.create(React.createElement(Github, _extends({}, color.red, { styles: { default: { card: { boxShadow: '0 0 10px red' } } } }))).toJSON();
+  expect(tree.props.style.boxShadow).toBe('0 0 10px red');
+});
+
+test('GithubSwatch renders correctly', function () {
+  var tree = renderer.create(React.createElement(GithubSwatch, { color: '#333' })).toJSON();
+  expect(tree).toMatchSnapshot();
+});

node_modules/react-color/es/components/github/story.js

@@ -0,0 +1,16 @@
+import React from 'react';
+import { storiesOf } from '@storybook/react';
+import { renderWithKnobs } from '../../../.storybook/report';
+import SyncColorField from '../../../.storybook/SyncColorField';
+
+import Github from './Github';
+
+storiesOf('Pickers', module).add('GithubPicker', function () {
+  return React.createElement(
+    SyncColorField,
+    { component: Github },
+    renderWithKnobs(Github, {}, null, {
+      width: { range: true, min: 140, max: 500, step: 1 }
+    })
+  );
+});

node_modules/react-color/es/components/google/Google.js

@@ -0,0 +1,144 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import reactCSS from 'reactcss';
+import merge from 'lodash-es/merge';
+
+import { ColorWrap, Saturation, Hue } from '../common';
+import GooglePointerCircle from './GooglePointerCircle';
+import GooglePointer from './GooglePointer';
+import GoogleFields from './GoogleFields';
+
+export var Google = function Google(_ref) {
+  var width = _ref.width,
+      onChange = _ref.onChange,
+      rgb = _ref.rgb,
+      hsl = _ref.hsl,
+      hsv = _ref.hsv,
+      hex = _ref.hex,
+      header = _ref.header,
+      _ref$styles = _ref.styles,
+      passedStyles = _ref$styles === undefined ? {} : _ref$styles,
+      _ref$className = _ref.className,
+      className = _ref$className === undefined ? '' : _ref$className;
+
+  var styles = reactCSS(merge({
+    'default': {
+      picker: {
+        width: width,
+        background: '#fff',
+        border: '1px solid #dfe1e5',
+        boxSizing: 'initial',
+        display: 'flex',
+        flexWrap: 'wrap',
+        borderRadius: '8px 8px 0px 0px'
+      },
+      head: {
+        height: '57px',
+        width: '100%',
+        paddingTop: '16px',
+        paddingBottom: '16px',
+        paddingLeft: '16px',
+        fontSize: '20px',
+        boxSizing: 'border-box',
+        fontFamily: 'Roboto-Regular,HelveticaNeue,Arial,sans-serif'
+      },
+      saturation: {
+        width: '70%',
+        padding: '0px',
+        position: 'relative',
+        overflow: 'hidden'
+      },
+      swatch: {
+        width: '30%',
+        height: '228px',
+        padding: '0px',
+        background: 'rgba(' + rgb.r + ', ' + rgb.g + ', ' + rgb.b + ', 1)',
+        position: 'relative',
+        overflow: 'hidden'
+      },
+      body: {
+        margin: 'auto',
+        width: '95%'
+      },
+      controls: {
+        display: 'flex',
+        boxSizing: 'border-box',
+        height: '52px',
+        paddingTop: '22px'
+      },
+      color: {
+        width: '32px'
+      },
+      hue: {
+        height: '8px',
+        position: 'relative',
+        margin: '0px 16px 0px 16px',
+        width: '100%'
+      },
+      Hue: {
+        radius: '2px'
+      }
+    }
+  }, passedStyles));
+  return React.createElement(
+    'div',
+    { style: styles.picker, className: 'google-picker ' + className },
+    React.createElement(
+      'div',
+      { style: styles.head },
+      header
+    ),
+    React.createElement('div', { style: styles.swatch }),
+    React.createElement(
+      'div',
+      { style: styles.saturation },
+      React.createElement(Saturation, {
+        hsl: hsl,
+        hsv: hsv,
+        pointer: GooglePointerCircle,
+        onChange: onChange
+      })
+    ),
+    React.createElement(
+      'div',
+      { style: styles.body },
+      React.createElement(
+        'div',
+        { style: styles.controls, className: 'flexbox-fix' },
+        React.createElement(
+          'div',
+          { style: styles.hue },
+          React.createElement(Hue, {
+            style: styles.Hue,
+            hsl: hsl,
+            radius: '4px',
+            pointer: GooglePointer,
+            onChange: onChange
+          })
+        )
+      ),
+      React.createElement(GoogleFields, {
+        rgb: rgb,
+        hsl: hsl,
+        hex: hex,
+        hsv: hsv,
+        onChange: onChange
+      })
+    )
+  );
+};
+
+Google.propTypes = {
+  width: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+  styles: PropTypes.object,
+  header: PropTypes.string
+
+};
+
+Google.defaultProps = {
+  width: 652,
+  styles: {},
+  header: 'Color picker'
+};
+
+export default ColorWrap(Google);

node_modules/react-color/es/components/google/GoogleFields.js

@@ -0,0 +1,204 @@
+import React from 'react';
+import reactCSS from 'reactcss';
+import * as color from '../../helpers/color';
+import { EditableInput } from '../common';
+
+export var GoogleFields = function GoogleFields(_ref) {
+  var onChange = _ref.onChange,
+      rgb = _ref.rgb,
+      hsl = _ref.hsl,
+      hex = _ref.hex,
+      hsv = _ref.hsv;
+
+
+  var handleChange = function handleChange(data, e) {
+    if (data.hex) {
+      color.isValidHex(data.hex) && onChange({
+        hex: data.hex,
+        source: 'hex'
+      }, e);
+    } else if (data.rgb) {
+      var values = data.rgb.split(',');
+      color.isvalidColorString(data.rgb, 'rgb') && onChange({
+        r: values[0],
+        g: values[1],
+        b: values[2],
+        a: 1,
+        source: 'rgb'
+      }, e);
+    } else if (data.hsv) {
+      var _values = data.hsv.split(',');
+      if (color.isvalidColorString(data.hsv, 'hsv')) {
+        _values[2] = _values[2].replace('%', '');
+        _values[1] = _values[1].replace('%', '');
+        _values[0] = _values[0].replace('°', '');
+        if (_values[1] == 1) {
+          _values[1] = 0.01;
+        } else if (_values[2] == 1) {
+          _values[2] = 0.01;
+        }
+        onChange({
+          h: Number(_values[0]),
+          s: Number(_values[1]),
+          v: Number(_values[2]),
+          source: 'hsv'
+        }, e);
+      }
+    } else if (data.hsl) {
+      var _values2 = data.hsl.split(',');
+      if (color.isvalidColorString(data.hsl, 'hsl')) {
+        _values2[2] = _values2[2].replace('%', '');
+        _values2[1] = _values2[1].replace('%', '');
+        _values2[0] = _values2[0].replace('°', '');
+        if (hsvValue[1] == 1) {
+          hsvValue[1] = 0.01;
+        } else if (hsvValue[2] == 1) {
+          hsvValue[2] = 0.01;
+        }
+        onChange({
+          h: Number(_values2[0]),
+          s: Number(_values2[1]),
+          v: Number(_values2[2]),
+          source: 'hsl'
+        }, e);
+      }
+    }
+  };
+
+  var styles = reactCSS({
+    'default': {
+      wrap: {
+        display: 'flex',
+        height: '100px',
+        marginTop: '4px'
+      },
+      fields: {
+        width: '100%'
+      },
+      column: {
+        paddingTop: '10px',
+        display: 'flex',
+        justifyContent: 'space-between'
+      },
+      double: {
+        padding: '0px 4.4px',
+        boxSizing: 'border-box'
+      },
+      input: {
+        width: '100%',
+        height: '38px',
+        boxSizing: 'border-box',
+        padding: '4px 10% 3px',
+        textAlign: 'center',
+        border: '1px solid #dadce0',
+        fontSize: '11px',
+        textTransform: 'lowercase',
+        borderRadius: '5px',
+        outline: 'none',
+        fontFamily: 'Roboto,Arial,sans-serif'
+      },
+      input2: {
+        height: '38px',
+        width: '100%',
+        border: '1px solid #dadce0',
+        boxSizing: 'border-box',
+        fontSize: '11px',
+        textTransform: 'lowercase',
+        borderRadius: '5px',
+        outline: 'none',
+        paddingLeft: '10px',
+        fontFamily: 'Roboto,Arial,sans-serif'
+      },
+      label: {
+        textAlign: 'center',
+        fontSize: '12px',
+        background: '#fff',
+        position: 'absolute',
+        textTransform: 'uppercase',
+        color: '#3c4043',
+        width: '35px',
+        top: '-6px',
+        left: '0',
+        right: '0',
+        marginLeft: 'auto',
+        marginRight: 'auto',
+        fontFamily: 'Roboto,Arial,sans-serif'
+      },
+      label2: {
+        left: '10px',
+        textAlign: 'center',
+        fontSize: '12px',
+        background: '#fff',
+        position: 'absolute',
+        textTransform: 'uppercase',
+        color: '#3c4043',
+        width: '32px',
+        top: '-6px',
+        fontFamily: 'Roboto,Arial,sans-serif'
+      },
+      single: {
+        flexGrow: '1',
+        margin: '0px 4.4px'
+      }
+    }
+  });
+
+  var rgbValue = rgb.r + ', ' + rgb.g + ', ' + rgb.b;
+  var hslValue = Math.round(hsl.h) + '\xB0, ' + Math.round(hsl.s * 100) + '%, ' + Math.round(hsl.l * 100) + '%';
+  var hsvValue = Math.round(hsv.h) + '\xB0, ' + Math.round(hsv.s * 100) + '%, ' + Math.round(hsv.v * 100) + '%';
+
+  return React.createElement(
+    'div',
+    { style: styles.wrap, className: 'flexbox-fix' },
+    React.createElement(
+      'div',
+      { style: styles.fields },
+      React.createElement(
+        'div',
+        { style: styles.double },
+        React.createElement(EditableInput, {
+          style: { input: styles.input, label: styles.label },
+          label: 'hex',
+          value: hex,
+          onChange: handleChange
+        })
+      ),
+      React.createElement(
+        'div',
+        { style: styles.column },
+        React.createElement(
+          'div',
+          { style: styles.single },
+          React.createElement(EditableInput, {
+            style: { input: styles.input2, label: styles.label2 },
+            label: 'rgb',
+            value: rgbValue,
+            onChange: handleChange
+          })
+        ),
+        React.createElement(
+          'div',
+          { style: styles.single },
+          React.createElement(EditableInput, {
+            style: { input: styles.input2, label: styles.label2 },
+            label: 'hsv',
+            value: hsvValue,
+            onChange: handleChange
+          })
+        ),
+        React.createElement(
+          'div',
+          { style: styles.single },
+          React.createElement(EditableInput, {
+            style: { input: styles.input2, label: styles.label2 },
+            label: 'hsl',
+            value: hslValue,
+            onChange: handleChange
+          })
+        )
+      )
+    )
+  );
+};
+
+export default GoogleFields;

node_modules/react-color/es/components/google/GooglePointer.js

@@ -0,0 +1,35 @@
+import React from 'react';
+import reactCSS from 'reactcss';
+import PropTypes from 'prop-types';
+
+export var GooglePointer = function GooglePointer(props) {
+  var styles = reactCSS({
+    'default': {
+      picker: {
+        width: '20px',
+        height: '20px',
+        borderRadius: '22px',
+        transform: 'translate(-10px, -7px)',
+        background: 'hsl(' + Math.round(props.hsl.h) + ', 100%, 50%)',
+        border: '2px white solid'
+      }
+    }
+  });
+
+  return React.createElement('div', { style: styles.picker });
+};
+
+GooglePointer.propTypes = {
+  hsl: PropTypes.shape({
+    h: PropTypes.number,
+    s: PropTypes.number,
+    l: PropTypes.number,
+    a: PropTypes.number
+  })
+};
+
+GooglePointer.defaultProps = {
+  hsl: { a: 1, h: 249.94, l: 0.2, s: 0.50 }
+};
+
+export default GooglePointer;

node_modules/react-color/es/components/google/GooglePointerCircle.js

@@ -0,0 +1,35 @@
+import React from 'react';
+import reactCSS from 'reactcss';
+import PropTypes from 'prop-types';
+
+export var GooglePointerCircle = function GooglePointerCircle(props) {
+  var styles = reactCSS({
+    'default': {
+      picker: {
+        width: '20px',
+        height: '20px',
+        borderRadius: '22px',
+        border: '2px #fff solid',
+        transform: 'translate(-12px, -13px)',
+        background: 'hsl(' + Math.round(props.hsl.h) + ', ' + Math.round(props.hsl.s * 100) + '%, ' + Math.round(props.hsl.l * 100) + '%)'
+      }
+    }
+  });
+
+  return React.createElement('div', { style: styles.picker });
+};
+
+GooglePointerCircle.propTypes = {
+  hsl: PropTypes.shape({
+    h: PropTypes.number,
+    s: PropTypes.number,
+    l: PropTypes.number,
+    a: PropTypes.number
+  })
+};
+
+GooglePointerCircle.defaultProps = {
+  hsl: { a: 1, h: 249.94, l: 0.2, s: 0.50 }
+};
+
+export default GooglePointerCircle;

node_modules/react-color/es/components/google/spec.js

@@ -0,0 +1,53 @@
+var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
+
+import React from 'react';
+import renderer from 'react-test-renderer';
+import * as color from '../../helpers/color';
+import { mount } from 'enzyme';
+
+import Google from './Google';
+import GoogleFields from './GoogleFields';
+import GooglePointer from './GooglePointer';
+import GooglePointerCircle from './GooglePointerCircle';
+
+test('Google renders correctly', function () {
+  var tree = renderer.create(React.createElement(Google, color.red)).toJSON();
+  expect(tree).toMatchSnapshot();
+});
+test('Google onChange events correctly', function () {
+  var changeSpy = jest.fn(function (data) {
+    expect(color.simpleCheckForValidColor(data)).toBeTruthy();
+  });
+  var tree = mount(React.createElement(Google, _extends({}, color.red, { onChange: changeSpy })));
+  expect(changeSpy).toHaveBeenCalledTimes(0);
+});
+
+test('GoogleFields renders correctly', function () {
+  var tree = renderer.create(React.createElement(GoogleFields, color.red)).toJSON();
+  expect(tree).toMatchSnapshot();
+});
+
+test('GooglePointer renders correctly', function () {
+  var tree = renderer.create(React.createElement(GooglePointer, null)).toJSON();
+  expect(tree).toMatchSnapshot();
+});
+
+test('GooglePointerCircle renders correctly', function () {
+  var tree = renderer.create(React.createElement(GooglePointerCircle, null)).toJSON();
+  expect(tree).toMatchSnapshot();
+});
+
+test('Google renders custom styles correctly', function () {
+  var tree = renderer.create(React.createElement(Google, { styles: { default: { picker: { width: '200px' } } } })).toJSON();
+  expect(tree.props.style.width).toBe('200px');
+});
+
+test('Google renders correctly with width', function () {
+  var tree = renderer.create(React.createElement(Google, { width: 200 })).toJSON();
+  expect(tree.props.style.width).toBe(200);
+});
+
+test('Google custom header correctly', function () {
+  var tree = mount(React.createElement(Google, { header: 'Change the color!!!' }));
+  expect(tree.instance().props.header).toBe('Change the color!!!');
+});

node_modules/react-color/es/components/google/story.js

@@ -0,0 +1,14 @@
+import React from 'react';
+import { storiesOf } from '@storybook/react';
+import { renderWithKnobs } from '../../../.storybook/report';
+import SyncColorField from '../../../.storybook/SyncColorField';
+
+import Google from './Google';
+
+storiesOf('Pickers', module).add('GooglePicker', function () {
+  return React.createElement(
+    SyncColorField,
+    { component: Google },
+    renderWithKnobs(Google, {}, null)
+  );
+});

node_modules/react-color/es/components/hue/Hue.js

@@ -0,0 +1,64 @@
+var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
+
+import React from 'react';
+import PropTypes from 'prop-types';
+import reactCSS from 'reactcss';
+import merge from 'lodash-es/merge';
+
+import { ColorWrap, Hue } from '../common';
+import HuePointer from './HuePointer';
+
+export var HuePicker = function HuePicker(_ref) {
+  var width = _ref.width,
+      height = _ref.height,
+      onChange = _ref.onChange,
+      hsl = _ref.hsl,
+      direction = _ref.direction,
+      pointer = _ref.pointer,
+      _ref$styles = _ref.styles,
+      passedStyles = _ref$styles === undefined ? {} : _ref$styles,
+      _ref$className = _ref.className,
+      className = _ref$className === undefined ? '' : _ref$className;
+
+  var styles = reactCSS(merge({
+    'default': {
+      picker: {
+        position: 'relative',
+        width: width,
+        height: height
+      },
+      hue: {
+        radius: '2px'
+      }
+    }
+  }, passedStyles));
+
+  // Overwrite to provide pure hue color
+  var handleChange = function handleChange(data) {
+    return onChange({ a: 1, h: data.h, l: 0.5, s: 1 });
+  };
+
+  return React.createElement(
+    'div',
+    { style: styles.picker, className: 'hue-picker ' + className },
+    React.createElement(Hue, _extends({}, styles.hue, {
+      hsl: hsl,
+      pointer: pointer,
+      onChange: handleChange,
+      direction: direction
+    }))
+  );
+};
+
+HuePicker.propTypes = {
+  styles: PropTypes.object
+};
+HuePicker.defaultProps = {
+  width: '316px',
+  height: '16px',
+  direction: 'horizontal',
+  pointer: HuePointer,
+  styles: {}
+};
+
+export default ColorWrap(HuePicker);

node_modules/react-color/es/components/hue/HuePointer.js

@@ -0,0 +1,28 @@
+import React from 'react';
+import reactCSS from 'reactcss';
+
+export var SliderPointer = function SliderPointer(_ref) {
+  var direction = _ref.direction;
+
+  var styles = reactCSS({
+    'default': {
+      picker: {
+        width: '18px',
+        height: '18px',
+        borderRadius: '50%',
+        transform: 'translate(-9px, -1px)',
+        backgroundColor: 'rgb(248, 248, 248)',
+        boxShadow: '0 1px 4px 0 rgba(0, 0, 0, 0.37)'
+      }
+    },
+    'vertical': {
+      picker: {
+        transform: 'translate(-3px, -9px)'
+      }
+    }
+  }, { vertical: direction === 'vertical' });
+
+  return React.createElement('div', { style: styles.picker });
+};
+
+export default SliderPointer;

node_modules/react-color/es/components/hue/spec.js

@@ -0,0 +1,30 @@
+var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
+
+/* global test, expect */
+
+import React from 'react';
+import renderer from 'react-test-renderer';
+import { red } from '../../helpers/color';
+
+import Hue from './Hue';
+import HuePointer from './HuePointer';
+
+test('Hue renders correctly', function () {
+  var tree = renderer.create(React.createElement(Hue, red)).toJSON();
+  expect(tree).toMatchSnapshot();
+});
+
+test('Hue renders vertically', function () {
+  var tree = renderer.create(React.createElement(Hue, _extends({}, red, { width: 20, height: 200, direction: 'vertical' }))).toJSON();
+  expect(tree).toMatchSnapshot();
+});
+
+test('Hue renders custom styles correctly', function () {
+  var tree = renderer.create(React.createElement(Hue, _extends({}, red, { styles: { default: { picker: { boxShadow: '0 0 10px red' } } } }))).toJSON();
+  expect(tree.props.style.boxShadow).toBe('0 0 10px red');
+});
+
+test('HuePointer renders correctly', function () {
+  var tree = renderer.create(React.createElement(HuePointer, null)).toJSON();
+  expect(tree).toMatchSnapshot();
+});

node_modules/react-color/es/components/material/Material.js

@@ -0,0 +1,149 @@
+import React from 'react';
+import reactCSS from 'reactcss';
+import merge from 'lodash-es/merge';
+import * as color from '../../helpers/color';
+
+import { ColorWrap, EditableInput, Raised } from '../common';
+
+export var Material = function Material(_ref) {
+  var onChange = _ref.onChange,
+      hex = _ref.hex,
+      rgb = _ref.rgb,
+      _ref$styles = _ref.styles,
+      passedStyles = _ref$styles === undefined ? {} : _ref$styles,
+      _ref$className = _ref.className,
+      className = _ref$className === undefined ? '' : _ref$className;
+
+  var styles = reactCSS(merge({
+    'default': {
+      material: {
+        width: '98px',
+        height: '98px',
+        padding: '16px',
+        fontFamily: 'Roboto'
+      },
+      HEXwrap: {
+        position: 'relative'
+      },
+      HEXinput: {
+        width: '100%',
+        marginTop: '12px',
+        fontSize: '15px',
+        color: '#333',
+        padding: '0px',
+        border: '0px',
+        borderBottom: '2px solid ' + hex,
+        outline: 'none',
+        height: '30px'
+      },
+      HEXlabel: {
+        position: 'absolute',
+        top: '0px',
+        left: '0px',
+        fontSize: '11px',
+        color: '#999999',
+        textTransform: 'capitalize'
+      },
+      Hex: {
+        style: {}
+      },
+      RGBwrap: {
+        position: 'relative'
+      },
+      RGBinput: {
+        width: '100%',
+        marginTop: '12px',
+        fontSize: '15px',
+        color: '#333',
+        padding: '0px',
+        border: '0px',
+        borderBottom: '1px solid #eee',
+        outline: 'none',
+        height: '30px'
+      },
+      RGBlabel: {
+        position: 'absolute',
+        top: '0px',
+        left: '0px',
+        fontSize: '11px',
+        color: '#999999',
+        textTransform: 'capitalize'
+      },
+      split: {
+        display: 'flex',
+        marginRight: '-10px',
+        paddingTop: '11px'
+      },
+      third: {
+        flex: '1',
+        paddingRight: '10px'
+      }
+    }
+  }, passedStyles));
+
+  var handleChange = function handleChange(data, e) {
+    if (data.hex) {
+      color.isValidHex(data.hex) && onChange({
+        hex: data.hex,
+        source: 'hex'
+      }, e);
+    } else if (data.r || data.g || data.b) {
+      onChange({
+        r: data.r || rgb.r,
+        g: data.g || rgb.g,
+        b: data.b || rgb.b,
+        source: 'rgb'
+      }, e);
+    }
+  };
+
+  return React.createElement(
+    Raised,
+    { styles: passedStyles },
+    React.createElement(
+      'div',
+      { style: styles.material, className: 'material-picker ' + className },
+      React.createElement(EditableInput, {
+        style: { wrap: styles.HEXwrap, input: styles.HEXinput, label: styles.HEXlabel },
+        label: 'hex',
+        value: hex,
+        onChange: handleChange
+      }),
+      React.createElement(
+        'div',
+        { style: styles.split, className: 'flexbox-fix' },
+        React.createElement(
+          'div',
+          { style: styles.third },
+          React.createElement(EditableInput, {
+            style: { wrap: styles.RGBwrap, input: styles.RGBinput, label: styles.RGBlabel },
+            label: 'r', value: rgb.r,
+            onChange: handleChange
+          })
+        ),
+        React.createElement(
+          'div',
+          { style: styles.third },
+          React.createElement(EditableInput, {
+            style: { wrap: styles.RGBwrap, input: styles.RGBinput, label: styles.RGBlabel },
+            label: 'g',
+            value: rgb.g,
+            onChange: handleChange
+          })
+        ),
+        React.createElement(
+          'div',
+          { style: styles.third },
+          React.createElement(EditableInput, {
+            style: { wrap: styles.RGBwrap, input: styles.RGBinput, label: styles.RGBlabel },
+            label: 'b',
+            value: rgb.b,
+            onChange: handleChange
+          })
+        )
+      )
+    )
+  );
+};
+
+export default ColorWrap(Material);

node_modules/react-color/es/components/material/spec.js

@@ -0,0 +1,19 @@
+var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
+
+/* global test, test, expect */
+
+import React from 'react';
+import renderer from 'react-test-renderer';
+import { red } from '../../helpers/color';
+
+import Material from './Material';
+
+test('Material renders correctly', function () {
+  var tree = renderer.create(React.createElement(Material, red)).toJSON();
+  expect(tree).toMatchSnapshot();
+});
+
+test('Material renders custom styles correctly', function () {
+  var tree = renderer.create(React.createElement(Material, _extends({}, red, { styles: { default: { wrap: { boxShadow: '0 0 10px red' } } } }))).toJSON();
+  expect(tree.props.style.boxShadow).toBe('0 0 10px red');
+});

node_modules/react-color/es/components/material/story.js

@@ -0,0 +1,14 @@
+import React from 'react';
+import { storiesOf } from '@storybook/react';
+import { renderWithKnobs } from '../../../.storybook/report';
+import SyncColorField from '../../../.storybook/SyncColorField';
+
+import Material from './Material';
+
+storiesOf('Pickers', module).add('MaterialPicker', function () {
+  return React.createElement(
+    SyncColorField,
+    { component: Material },
+    renderWithKnobs(Material)
+  );
+});

node_modules/react-color/es/components/photoshop/Photoshop.js

@@ -0,0 +1,178 @@
+var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
+
+function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+
+function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
+
+function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
+
+import React from 'react';
+import PropTypes from 'prop-types';
+import reactCSS from 'reactcss';
+import merge from 'lodash-es/merge';
+
+import { ColorWrap, Saturation, Hue } from '../common';
+import PhotoshopFields from './PhotoshopFields';
+import PhotoshopPointerCircle from './PhotoshopPointerCircle';
+import PhotoshopPointer from './PhotoshopPointer';
+import PhotoshopButton from './PhotoshopButton';
+import PhotoshopPreviews from './PhotoshopPreviews';
+
+export var Photoshop = function (_React$Component) {
+  _inherits(Photoshop, _React$Component);
+
+  function Photoshop(props) {
+    _classCallCheck(this, Photoshop);
+
+    var _this = _possibleConstructorReturn(this, (Photoshop.__proto__ || Object.getPrototypeOf(Photoshop)).call(this));
+
+    _this.state = {
+      currentColor: props.hex
+    };
+    return _this;
+  }
+
+  _createClass(Photoshop, [{
+    key: 'render',
+    value: function render() {
+      var _props = this.props,
+          _props$styles = _props.styles,
+          passedStyles = _props$styles === undefined ? {} : _props$styles,
+          _props$className = _props.className,
+          className = _props$className === undefined ? '' : _props$className;
+
+      var styles = reactCSS(merge({
+        'default': {
+          picker: {
+            background: '#DCDCDC',
+            borderRadius: '4px',
+            boxShadow: '0 0 0 1px rgba(0,0,0,.25), 0 8px 16px rgba(0,0,0,.15)',
+            boxSizing: 'initial',
+            width: '513px'
+          },
+          head: {
+            backgroundImage: 'linear-gradient(-180deg, #F0F0F0 0%, #D4D4D4 100%)',
+            borderBottom: '1px solid #B1B1B1',
+            boxShadow: 'inset 0 1px 0 0 rgba(255,255,255,.2), inset 0 -1px 0 0 rgba(0,0,0,.02)',
+            height: '23px',
+            lineHeight: '24px',
+            borderRadius: '4px 4px 0 0',
+            fontSize: '13px',
+            color: '#4D4D4D',
+            textAlign: 'center'
+          },
+          body: {
+            padding: '15px 15px 0',
+            display: 'flex'
+          },
+          saturation: {
+            width: '256px',
+            height: '256px',
+            position: 'relative',
+            border: '2px solid #B3B3B3',
+            borderBottom: '2px solid #F0F0F0',
+            overflow: 'hidden'
+          },
+          hue: {
+            position: 'relative',
+            height: '256px',
+            width: '19px',
+            marginLeft: '10px',
+            border: '2px solid #B3B3B3',
+            borderBottom: '2px solid #F0F0F0'
+          },
+          controls: {
+            width: '180px',
+            marginLeft: '10px'
+          },
+          top: {
+            display: 'flex'
+          },
+          previews: {
+            width: '60px'
+          },
+          actions: {
+            flex: '1',
+            marginLeft: '20px'
+          }
+        }
+      }, passedStyles));
+
+      return React.createElement(
+        'div',
+        { style: styles.picker, className: 'photoshop-picker ' + className },
+        React.createElement(
+          'div',
+          { style: styles.head },
+          this.props.header
+        ),
+        React.createElement(
+          'div',
+          { style: styles.body, className: 'flexbox-fix' },
+          React.createElement(
+            'div',
+            { style: styles.saturation },
+            React.createElement(Saturation, {
+              hsl: this.props.hsl,
+              hsv: this.props.hsv,
+              pointer: PhotoshopPointerCircle,
+              onChange: this.props.onChange
+            })
+          ),
+          React.createElement(
+            'div',
+            { style: styles.hue },
+            React.createElement(Hue, {
+              direction: 'vertical',
+              hsl: this.props.hsl,
+              pointer: PhotoshopPointer,
+              onChange: this.props.onChange
+            })
+          ),
+          React.createElement(
+            'div',
+            { style: styles.controls },
+            React.createElement(
+              'div',
+              { style: styles.top, className: 'flexbox-fix' },
+              React.createElement(
+                'div',
+                { style: styles.previews },
+                React.createElement(PhotoshopPreviews, {
+                  rgb: this.props.rgb,
+                  currentColor: this.state.currentColor
+                })
+              ),
+              React.createElement(
+                'div',
+                { style: styles.actions },
+                React.createElement(PhotoshopButton, { label: 'OK', onClick: this.props.onAccept, active: true }),
+                React.createElement(PhotoshopButton, { label: 'Cancel', onClick: this.props.onCancel }),
+                React.createElement(PhotoshopFields, {
+                  onChange: this.props.onChange,
+                  rgb: this.props.rgb,
+                  hsv: this.props.hsv,
+                  hex: this.props.hex
+                })
+              )
+            )
+          )
+        )
+      );
+    }
+  }]);
+
+  return Photoshop;
+}(React.Component);
+
+Photoshop.propTypes = {
+  header: PropTypes.string,
+  styles: PropTypes.object
+};
+
+Photoshop.defaultProps = {
+  header: 'Color Picker',
+  styles: {}
+};
+
+export default ColorWrap(Photoshop);

node_modules/react-color/es/components/photoshop/PhotoshopButton.js

@@ -0,0 +1,40 @@
+import React from 'react';
+import reactCSS from 'reactcss';
+
+export var PhotoshopButton = function PhotoshopButton(_ref) {
+  var onClick = _ref.onClick,
+      label = _ref.label,
+      children = _ref.children,
+      active = _ref.active;
+
+  var styles = reactCSS({
+    'default': {
+      button: {
+        backgroundImage: 'linear-gradient(-180deg, #FFFFFF 0%, #E6E6E6 100%)',
+        border: '1px solid #878787',
+        borderRadius: '2px',
+        height: '20px',
+        boxShadow: '0 1px 0 0 #EAEAEA',
+        fontSize: '14px',
+        color: '#000',
+        lineHeight: '20px',
+        textAlign: 'center',
+        marginBottom: '10px',
+        cursor: 'pointer'
+      }
+    },
+    'active': {
+      button: {
+        boxShadow: '0 0 0 1px #878787'
+      }
+    }
+  }, { active: active });
+
+  return React.createElement(
+    'div',
+    { style: styles.button, onClick: onClick },
+    label || children
+  );
+};
+
+export default PhotoshopButton;

node_modules/react-color/es/components/photoshop/PhotoshopFields.js

@@ -0,0 +1,177 @@
+import React from 'react';
+import reactCSS from 'reactcss';
+import * as color from '../../helpers/color';
+
+import { EditableInput } from '../common';
+
+export var PhotoshopPicker = function PhotoshopPicker(_ref) {
+  var onChange = _ref.onChange,
+      rgb = _ref.rgb,
+      hsv = _ref.hsv,
+      hex = _ref.hex;
+
+  var styles = reactCSS({
+    'default': {
+      fields: {
+        paddingTop: '5px',
+        paddingBottom: '9px',
+        width: '80px',
+        position: 'relative'
+      },
+      divider: {
+        height: '5px'
+      },
+      RGBwrap: {
+        position: 'relative'
+      },
+      RGBinput: {
+        marginLeft: '40%',
+        width: '40%',
+        height: '18px',
+        border: '1px solid #888888',
+        boxShadow: 'inset 0 1px 1px rgba(0,0,0,.1), 0 1px 0 0 #ECECEC',
+        marginBottom: '5px',
+        fontSize: '13px',
+        paddingLeft: '3px',
+        marginRight: '10px'
+      },
+      RGBlabel: {
+        left: '0px',
+        top: '0px',
+        width: '34px',
+        textTransform: 'uppercase',
+        fontSize: '13px',
+        height: '18px',
+        lineHeight: '22px',
+        position: 'absolute'
+      },
+      HEXwrap: {
+        position: 'relative'
+      },
+      HEXinput: {
+        marginLeft: '20%',
+        width: '80%',
+        height: '18px',
+        border: '1px solid #888888',
+        boxShadow: 'inset 0 1px 1px rgba(0,0,0,.1), 0 1px 0 0 #ECECEC',
+        marginBottom: '6px',
+        fontSize: '13px',
+        paddingLeft: '3px'
+      },
+      HEXlabel: {
+        position: 'absolute',
+        top: '0px',
+        left: '0px',
+        width: '14px',
+        textTransform: 'uppercase',
+        fontSize: '13px',
+        height: '18px',
+        lineHeight: '22px'
+      },
+      fieldSymbols: {
+        position: 'absolute',
+        top: '5px',
+        right: '-7px',
+        fontSize: '13px'
+      },
+      symbol: {
+        height: '20px',
+        lineHeight: '22px',
+        paddingBottom: '7px'
+      }
+    }
+  });
+
+  var handleChange = function handleChange(data, e) {
+    if (data['#']) {
+      color.isValidHex(data['#']) && onChange({
+        hex: data['#'],
+        source: 'hex'
+      }, e);
+    } else if (data.r || data.g || data.b) {
+      onChange({
+        r: data.r || rgb.r,
+        g: data.g || rgb.g,
+        b: data.b || rgb.b,
+        source: 'rgb'
+      }, e);
+    } else if (data.h || data.s || data.v) {
+      onChange({
+        h: data.h || hsv.h,
+        s: data.s || hsv.s,
+        v: data.v || hsv.v,
+        source: 'hsv'
+      }, e);
+    }
+  };
+
+  return React.createElement(
+    'div',
+    { style: styles.fields },
+    React.createElement(EditableInput, {
+      style: { wrap: styles.RGBwrap, input: styles.RGBinput, label: styles.RGBlabel },
+      label: 'h',
+      value: Math.round(hsv.h),
+      onChange: handleChange
+    }),
+    React.createElement(EditableInput, {
+      style: { wrap: styles.RGBwrap, input: styles.RGBinput, label: styles.RGBlabel },
+      label: 's',
+      value: Math.round(hsv.s * 100),
+      onChange: handleChange
+    }),
+    React.createElement(EditableInput, {
+      style: { wrap: styles.RGBwrap, input: styles.RGBinput, label: styles.RGBlabel },
+      label: 'v',
+      value: Math.round(hsv.v * 100),
+      onChange: handleChange
+    }),
+    React.createElement('div', { style: styles.divider }),
+    React.createElement(EditableInput, {
+      style: { wrap: styles.RGBwrap, input: styles.RGBinput, label: styles.RGBlabel },
+      label: 'r',
+      value: rgb.r,
+      onChange: handleChange
+    }),
+    React.createElement(EditableInput, {
+      style: { wrap: styles.RGBwrap, input: styles.RGBinput, label: styles.RGBlabel },
+      label: 'g',
+      value: rgb.g,
+      onChange: handleChange
+    }),
+    React.createElement(EditableInput, {
+      style: { wrap: styles.RGBwrap, input: styles.RGBinput, label: styles.RGBlabel },
+      label: 'b',
+      value: rgb.b,
+      onChange: handleChange
+    }),
+    React.createElement('div', { style: styles.divider }),
+    React.createElement(EditableInput, {
+      style: { wrap: styles.HEXwrap, input: styles.HEXinput, label: styles.HEXlabel },
+      label: '#',
+      value: hex.replace('#', ''),
+      onChange: handleChange
+    }),
+    React.createElement(
+      'div',
+      { style: styles.fieldSymbols },
+      React.createElement(
+        'div',
+        { style: styles.symbol },
+        '\xB0'
+      ),
+      React.createElement(
+        'div',
+        { style: styles.symbol },
+        '%'
+      ),
+      React.createElement(
+        'div',
+        { style: styles.symbol },
+        '%'
+      )
+    )
+  );
+};
+
+export default PhotoshopPicker;

node_modules/react-color/es/components/photoshop/PhotoshopPointer.js

@@ -0,0 +1,61 @@
+import React from 'react';
+import reactCSS from 'reactcss';
+
+export var PhotoshopPointerCircle = function PhotoshopPointerCircle() {
+  var styles = reactCSS({
+    'default': {
+      triangle: {
+        width: 0,
+        height: 0,
+        borderStyle: 'solid',
+        borderWidth: '4px 0 4px 6px',
+        borderColor: 'transparent transparent transparent #fff',
+        position: 'absolute',
+        top: '1px',
+        left: '1px'
+      },
+      triangleBorder: {
+        width: 0,
+        height: 0,
+        borderStyle: 'solid',
+        borderWidth: '5px 0 5px 8px',
+        borderColor: 'transparent transparent transparent #555'
+      },
+
+      left: {
+        Extend: 'triangleBorder',
+        transform: 'translate(-13px, -4px)'
+      },
+      leftInside: {
+        Extend: 'triangle',
+        transform: 'translate(-8px, -5px)'
+      },
+
+      right: {
+        Extend: 'triangleBorder',
+        transform: 'translate(20px, -14px) rotate(180deg)'
+      },
+      rightInside: {
+        Extend: 'triangle',
+        transform: 'translate(-8px, -5px)'
+      }
+    }
+  });
+
+  return React.createElement(
+    'div',
+    { style: styles.pointer },
+    React.createElement(
+      'div',
+      { style: styles.left },
+      React.createElement('div', { style: styles.leftInside })
+    ),
+    React.createElement(
+      'div',
+      { style: styles.right },
+      React.createElement('div', { style: styles.rightInside })
+    )
+  );
+};
+
+export default PhotoshopPointerCircle;

node_modules/react-color/es/components/photoshop/PhotoshopPointerCircle.js

@@ -0,0 +1,27 @@
+import React from 'react';
+import reactCSS from 'reactcss';
+
+export var PhotoshopPointerCircle = function PhotoshopPointerCircle(_ref) {
+  var hsl = _ref.hsl;
+
+  var styles = reactCSS({
+    'default': {
+      picker: {
+        width: '12px',
+        height: '12px',
+        borderRadius: '6px',
+        boxShadow: 'inset 0 0 0 1px #fff',
+        transform: 'translate(-6px, -6px)'
+      }
+    },
+    'black-outline': {
+      picker: {
+        boxShadow: 'inset 0 0 0 1px #000'
+      }
+    }
+  }, { 'black-outline': hsl.l > 0.5 });
+
+  return React.createElement('div', { style: styles.picker });
+};
+
+export default PhotoshopPointerCircle;

node_modules/react-color/es/components/photoshop/PhotoshopPreviews.js

@@ -0,0 +1,56 @@
+import React from 'react';
+import reactCSS from 'reactcss';
+
+export var PhotoshopPreviews = function PhotoshopPreviews(_ref) {
+  var rgb = _ref.rgb,
+      currentColor = _ref.currentColor;
+
+  var styles = reactCSS({
+    'default': {
+      swatches: {
+        border: '1px solid #B3B3B3',
+        borderBottom: '1px solid #F0F0F0',
+        marginBottom: '2px',
+        marginTop: '1px'
+      },
+      new: {
+        height: '34px',
+        background: 'rgb(' + rgb.r + ',' + rgb.g + ', ' + rgb.b + ')',
+        boxShadow: 'inset 1px 0 0 #000, inset -1px 0 0 #000, inset 0 1px 0 #000'
+      },
+      current: {
+        height: '34px',
+        background: currentColor,
+        boxShadow: 'inset 1px 0 0 #000, inset -1px 0 0 #000, inset 0 -1px 0 #000'
+      },
+      label: {
+        fontSize: '14px',
+        color: '#000',
+        textAlign: 'center'
+      }
+    }
+  });
+
+  return React.createElement(
+    'div',
+    null,
+    React.createElement(
+      'div',
+      { style: styles.label },
+      'new'
+    ),
+    React.createElement(
+      'div',
+      { style: styles.swatches },
+      React.createElement('div', { style: styles.new }),
+      React.createElement('div', { style: styles.current })
+    ),
+    React.createElement(
+      'div',
+      { style: styles.label },
+      'current'
+    )
+  );
+};
+
+export default PhotoshopPreviews;

node_modules/react-color/es/components/photoshop/spec.js

@@ -0,0 +1,49 @@
+var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
+
+/* global test, jest, expect */
+
+import React from 'react';
+import renderer from 'react-test-renderer';
+import { red } from '../../helpers/color';
+
+import Photoshop from './Photoshop';
+import PhotoshopButton from './PhotoshopButton';
+import PhotoshopFields from './PhotoshopFields';
+import PhotoshopPointer from './PhotoshopPointer';
+import PhotoshopPointerCircle from './PhotoshopPointerCircle';
+import PhotoshopPreviews from './PhotoshopPreviews';
+
+test('Photoshop renders correctly', function () {
+  var tree = renderer.create(React.createElement(Photoshop, _extends({}, red, { onAccept: function onAccept() {}, onCancel: function onCancel() {} }))).toJSON();
+  expect(tree).toMatchSnapshot();
+});
+
+test('Photoshop renders custom styles correctly', function () {
+  var tree = renderer.create(React.createElement(Photoshop, _extends({}, red, { styles: { default: { picker: { boxShadow: '0 0 10px red' } } } }))).toJSON();
+  expect(tree.props.style.boxShadow).toBe('0 0 10px red');
+});
+
+test('PhotoshopButton renders correctly', function () {
+  var tree = renderer.create(React.createElement(PhotoshopButton, { label: 'accept', onClick: function onClick() {} })).toJSON();
+  expect(tree).toMatchSnapshot();
+});
+
+test('PhotoshopFields renders correctly', function () {
+  var tree = renderer.create(React.createElement(PhotoshopFields, red)).toJSON();
+  expect(tree).toMatchSnapshot();
+});
+
+test('PhotoshopPointer renders correctly', function () {
+  var tree = renderer.create(React.createElement(PhotoshopPointer, null)).toJSON();
+  expect(tree).toMatchSnapshot();
+});
+
+test('PhotoshopPointerCircle renders correctly', function () {
+  var tree = renderer.create(React.createElement(PhotoshopPointerCircle, red)).toJSON();
+  expect(tree).toMatchSnapshot();
+});
+
+test('PhotoshopPreviews renders correctly', function () {
+  var tree = renderer.create(React.createElement(PhotoshopPreviews, _extends({}, red, { currencColor: '#aeee00' }))).toJSON();
+  expect(tree).toMatchSnapshot();
+});

node_modules/react-color/es/components/photoshop/story.js

@@ -0,0 +1,14 @@
+import React from 'react';
+import { storiesOf } from '@storybook/react';
+import { renderWithKnobs } from '../../../.storybook/report';
+import SyncColorField from '../../../.storybook/SyncColorField';
+
+import Photoshop from './Photoshop';
+
+storiesOf('Pickers', module).add('PhotoshopPicker', function () {
+  return React.createElement(
+    SyncColorField,
+    { component: Photoshop },
+    renderWithKnobs(Photoshop)
+  );
+});

node_modules/react-color/es/components/sketch/Sketch.js

@@ -0,0 +1,178 @@
+var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
+
+import React from 'react';
+import PropTypes from 'prop-types';
+import reactCSS from 'reactcss';
+import merge from 'lodash-es/merge';
+
+import { ColorWrap, Saturation, Hue, Alpha, Checkboard } from '../common';
+import SketchFields from './SketchFields';
+import SketchPresetColors from './SketchPresetColors';
+
+export var Sketch = function Sketch(_ref) {
+  var width = _ref.width,
+      rgb = _ref.rgb,
+      hex = _ref.hex,
+      hsv = _ref.hsv,
+      hsl = _ref.hsl,
+      onChange = _ref.onChange,
+      onSwatchHover = _ref.onSwatchHover,
+      disableAlpha = _ref.disableAlpha,
+      presetColors = _ref.presetColors,
+      renderers = _ref.renderers,
+      _ref$styles = _ref.styles,
+      passedStyles = _ref$styles === undefined ? {} : _ref$styles,
+      _ref$className = _ref.className,
+      className = _ref$className === undefined ? '' : _ref$className;
+
+  var styles = reactCSS(merge({
+    'default': _extends({
+      picker: {
+        width: width,
+        padding: '10px 10px 0',
+        boxSizing: 'initial',
+        background: '#fff',
+        borderRadius: '4px',
+        boxShadow: '0 0 0 1px rgba(0,0,0,.15), 0 8px 16px rgba(0,0,0,.15)'
+      },
+      saturation: {
+        width: '100%',
+        paddingBottom: '75%',
+        position: 'relative',
+        overflow: 'hidden'
+      },
+      Saturation: {
+        radius: '3px',
+        shadow: 'inset 0 0 0 1px rgba(0,0,0,.15), inset 0 0 4px rgba(0,0,0,.25)'
+      },
+      controls: {
+        display: 'flex'
+      },
+      sliders: {
+        padding: '4px 0',
+        flex: '1'
+      },
+      color: {
+        width: '24px',
+        height: '24px',
+        position: 'relative',
+        marginTop: '4px',
+        marginLeft: '4px',
+        borderRadius: '3px'
+      },
+      activeColor: {
+        absolute: '0px 0px 0px 0px',
+        borderRadius: '2px',
+        background: 'rgba(' + rgb.r + ',' + rgb.g + ',' + rgb.b + ',' + rgb.a + ')',
+        boxShadow: 'inset 0 0 0 1px rgba(0,0,0,.15), inset 0 0 4px rgba(0,0,0,.25)'
+      },
+      hue: {
+        position: 'relative',
+        height: '10px',
+        overflow: 'hidden'
+      },
+      Hue: {
+        radius: '2px',
+        shadow: 'inset 0 0 0 1px rgba(0,0,0,.15), inset 0 0 4px rgba(0,0,0,.25)'
+      },
+
+      alpha: {
+        position: 'relative',
+        height: '10px',
+        marginTop: '4px',
+        overflow: 'hidden'
+      },
+      Alpha: {
+        radius: '2px',
+        shadow: 'inset 0 0 0 1px rgba(0,0,0,.15), inset 0 0 4px rgba(0,0,0,.25)'
+      }
+    }, passedStyles),
+    'disableAlpha': {
+      color: {
+        height: '10px'
+      },
+      hue: {
+        height: '10px'
+      },
+      alpha: {
+        display: 'none'
+      }
+    }
+  }, passedStyles), { disableAlpha: disableAlpha });
+
+  return React.createElement(
+    'div',
+    { style: styles.picker, className: 'sketch-picker ' + className },
+    React.createElement(
+      'div',
+      { style: styles.saturation },
+      React.createElement(Saturation, {
+        style: styles.Saturation,
+        hsl: hsl,
+        hsv: hsv,
+        onChange: onChange
+      })
+    ),
+    React.createElement(
+      'div',
+      { style: styles.controls, className: 'flexbox-fix' },
+      React.createElement(
+        'div',
+        { style: styles.sliders },
+        React.createElement(
+          'div',
+          { style: styles.hue },
+          React.createElement(Hue, {
+            style: styles.Hue,
+            hsl: hsl,
+            onChange: onChange
+          })
+        ),
+        React.createElement(
+          'div',
+          { style: styles.alpha },
+          React.createElement(Alpha, {
+            style: styles.Alpha,
+            rgb: rgb,
+            hsl: hsl,
+            renderers: renderers,
+            onChange: onChange
+          })
+        )
+      ),
+      React.createElement(
+        'div',
+        { style: styles.color },
+        React.createElement(Checkboard, null),
+        React.createElement('div', { style: styles.activeColor })
+      )
+    ),
+    React.createElement(SketchFields, {
+      rgb: rgb,
+      hsl: hsl,
+      hex: hex,
+      onChange: onChange,
+      disableAlpha: disableAlpha
+    }),
+    React.createElement(SketchPresetColors, {
+      colors: presetColors,
+      onClick: onChange,
+      onSwatchHover: onSwatchHover
+    })
+  );
+};
+
+Sketch.propTypes = {
+  disableAlpha: PropTypes.bool,
+  width: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+  styles: PropTypes.object
+};
+
+Sketch.defaultProps = {
+  disableAlpha: false,
+  width: 200,
+  styles: {},
+  presetColors: ['#D0021B', '#F5A623', '#F8E71C', '#8B572A', '#7ED321', '#417505', '#BD10E0', '#9013FE', '#4A90E2', '#50E3C2', '#B8E986', '#000000', '#4A4A4A', '#9B9B9B', '#FFFFFF']
+};
+
+export default ColorWrap(Sketch);

node_modules/react-color/es/components/sketch/SketchFields.js

@@ -0,0 +1,153 @@
+/* eslint-disable no-param-reassign */
+
+import React from 'react';
+import reactCSS from 'reactcss';
+import * as color from '../../helpers/color';
+
+import { EditableInput } from '../common';
+
+export var SketchFields = function SketchFields(_ref) {
+  var onChange = _ref.onChange,
+      rgb = _ref.rgb,
+      hsl = _ref.hsl,
+      hex = _ref.hex,
+      disableAlpha = _ref.disableAlpha;
+
+  var styles = reactCSS({
+    'default': {
+      fields: {
+        display: 'flex',
+        paddingTop: '4px'
+      },
+      single: {
+        flex: '1',
+        paddingLeft: '6px'
+      },
+      alpha: {
+        flex: '1',
+        paddingLeft: '6px'
+      },
+      double: {
+        flex: '2'
+      },
+      input: {
+        width: '80%',
+        padding: '4px 10% 3px',
+        border: 'none',
+        boxShadow: 'inset 0 0 0 1px #ccc',
+        fontSize: '11px'
+      },
+      label: {
+        display: 'block',
+        textAlign: 'center',
+        fontSize: '11px',
+        color: '#222',
+        paddingTop: '3px',
+        paddingBottom: '4px',
+        textTransform: 'capitalize'
+      }
+    },
+    'disableAlpha': {
+      alpha: {
+        display: 'none'
+      }
+    }
+  }, { disableAlpha: disableAlpha });
+
+  var handleChange = function handleChange(data, e) {
+    if (data.hex) {
+      color.isValidHex(data.hex) && onChange({
+        hex: data.hex,
+        source: 'hex'
+      }, e);
+    } else if (data.r || data.g || data.b) {
+      onChange({
+        r: data.r || rgb.r,
+        g: data.g || rgb.g,
+        b: data.b || rgb.b,
+        a: rgb.a,
+        source: 'rgb'
+      }, e);
+    } else if (data.a) {
+      if (data.a < 0) {
+        data.a = 0;
+      } else if (data.a > 100) {
+        data.a = 100;
+      }
+
+      data.a /= 100;
+      onChange({
+        h: hsl.h,
+        s: hsl.s,
+        l: hsl.l,
+        a: data.a,
+        source: 'rgb'
+      }, e);
+    }
+  };
+
+  return React.createElement(
+    'div',
+    { style: styles.fields, className: 'flexbox-fix' },
+    React.createElement(
+      'div',
+      { style: styles.double },
+      React.createElement(EditableInput, {
+        style: { input: styles.input, label: styles.label },
+        label: 'hex',
+        value: hex.replace('#', ''),
+        onChange: handleChange
+      })
+    ),
+    React.createElement(
+      'div',
+      { style: styles.single },
+      React.createElement(EditableInput, {
+        style: { input: styles.input, label: styles.label },
+        label: 'r',
+        value: rgb.r,
+        onChange: handleChange,
+        dragLabel: 'true',
+        dragMax: '255'
+      })
+    ),
+    React.createElement(
+      'div',
+      { style: styles.single },
+      React.createElement(EditableInput, {
+        style: { input: styles.input, label: styles.label },
+        label: 'g',
+        value: rgb.g,
+        onChange: handleChange,
+        dragLabel: 'true',
+        dragMax: '255'
+      })
+    ),
+    React.createElement(
+      'div',
+      { style: styles.single },
+      React.createElement(EditableInput, {
+        style: { input: styles.input, label: styles.label },
+        label: 'b',
+        value: rgb.b,
+        onChange: handleChange,
+        dragLabel: 'true',
+        dragMax: '255'
+      })
+    ),
+    React.createElement(
+      'div',
+      { style: styles.alpha },
+      React.createElement(EditableInput, {
+        style: { input: styles.input, label: styles.label },
+        label: 'a',
+        value: Math.round(rgb.a * 100),
+        onChange: handleChange,
+        dragLabel: 'true',
+        dragMax: '100'
+      })
+    )
+  );
+};
+
+export default SketchFields;

node_modules/react-color/es/components/sketch/SketchPresetColors.js

@@ -0,0 +1,80 @@
+var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
+
+import React from 'react';
+import PropTypes from 'prop-types';
+import reactCSS from 'reactcss';
+
+import { Swatch } from '../common';
+
+export var SketchPresetColors = function SketchPresetColors(_ref) {
+  var colors = _ref.colors,
+      _ref$onClick = _ref.onClick,
+      onClick = _ref$onClick === undefined ? function () {} : _ref$onClick,
+      onSwatchHover = _ref.onSwatchHover;
+
+  var styles = reactCSS({
+    'default': {
+      colors: {
+        margin: '0 -10px',
+        padding: '10px 0 0 10px',
+        borderTop: '1px solid #eee',
+        display: 'flex',
+        flexWrap: 'wrap',
+        position: 'relative'
+      },
+      swatchWrap: {
+        width: '16px',
+        height: '16px',
+        margin: '0 10px 10px 0'
+      },
+      swatch: {
+        borderRadius: '3px',
+        boxShadow: 'inset 0 0 0 1px rgba(0,0,0,.15)'
+      }
+    },
+    'no-presets': {
+      colors: {
+        display: 'none'
+      }
+    }
+  }, {
+    'no-presets': !colors || !colors.length
+  });
+
+  var handleClick = function handleClick(hex, e) {
+    onClick({
+      hex: hex,
+      source: 'hex'
+    }, e);
+  };
+
+  return React.createElement(
+    'div',
+    { style: styles.colors, className: 'flexbox-fix' },
+    colors.map(function (colorObjOrString) {
+      var c = typeof colorObjOrString === 'string' ? { color: colorObjOrString } : colorObjOrString;
+      var key = '' + c.color + (c.title || '');
+      return React.createElement(
+        'div',
+        { key: key, style: styles.swatchWrap },
+        React.createElement(Swatch, _extends({}, c, {
+          style: styles.swatch,
+          onClick: handleClick,
+          onHover: onSwatchHover,
+          focusStyle: {
+            boxShadow: 'inset 0 0 0 1px rgba(0,0,0,.15), 0 0 4px ' + c.color
+          }
+        }))
+      );
+    })
+  );
+};
+
+SketchPresetColors.propTypes = {
+  colors: PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.string, PropTypes.shape({
+    color: PropTypes.string,
+    title: PropTypes.string
+  })])).isRequired
+};
+
+export default SketchPresetColors;

node_modules/react-color/es/components/sketch/spec.js

@@ -0,0 +1,77 @@
+/* global test, jest, expect */
+
+import React from 'react';
+import renderer from 'react-test-renderer';
+import { mount } from 'enzyme';
+import * as color from '../../helpers/color';
+// import canvas from 'canvas'
+
+import Sketch from './Sketch';
+import SketchFields from './SketchFields';
+import SketchPresetColors from './SketchPresetColors';
+import { Swatch } from '../common';
+
+test('Sketch renders correctly', function () {
+  var tree = renderer.create(React.createElement(Sketch, color.red)).toJSON();
+  expect(tree).toMatchSnapshot();
+});
+
+// test('Sketch renders on server correctly', () => {
+//   const tree = renderer.create(
+//     <Sketch renderers={{ canvas }} { ...color.red } />
+//   ).toJSON()
+//   expect(tree).toMatchSnapshot()
+// })
+
+test('Sketch onChange events correctly', function () {
+  var changeSpy = jest.fn(function (data) {
+    expect(color.simpleCheckForValidColor(data)).toBeTruthy();
+  });
+  var tree = mount(React.createElement(Sketch, { onChange: changeSpy }));
+  expect(changeSpy).toHaveBeenCalledTimes(0);
+  var swatches = tree.find(Swatch);
+  swatches.at(0).childAt(0).simulate('click');
+
+  expect(changeSpy).toHaveBeenCalled();
+});
+
+test('Sketch with onSwatchHover events correctly', function () {
+  var hoverSpy = jest.fn(function (data) {
+    expect(color.simpleCheckForValidColor(data)).toBeTruthy();
+  });
+  var tree = mount(React.createElement(Sketch, { onSwatchHover: hoverSpy }));
+  expect(hoverSpy).toHaveBeenCalledTimes(0);
+  var swatches = tree.find(Swatch);
+  swatches.at(0).childAt(0).simulate('mouseOver');
+
+  expect(hoverSpy).toHaveBeenCalled();
+});
+
+test('Sketch renders custom styles correctly', function () {
+  var tree = renderer.create(React.createElement(Sketch, { styles: { default: { picker: { boxShadow: 'none' } } } })).toJSON();
+  expect(tree.props.style.boxShadow).toBe('none');
+});
+
+test('SketchFields renders correctly', function () {
+  var tree = renderer.create(React.createElement(SketchFields, color.red)).toJSON();
+  expect(tree).toMatchSnapshot();
+});
+
+test('SketchPresetColors renders correctly', function () {
+  var tree = renderer.create(React.createElement(SketchPresetColors, { colors: ['#fff', '#999', '#000'] })).toJSON();
+  expect(tree).toMatchSnapshot();
+});
+
+test('SketchPresetColors with custom titles renders correctly', function () {
+  var colors = [{
+    color: '#fff',
+    title: 'white'
+  }, {
+    color: '#999',
+    title: 'gray'
+  }, {
+    color: '#000'
+  }, '#f00'];
+  var tree = renderer.create(React.createElement(SketchPresetColors, { colors: colors })).toJSON();
+  expect(tree).toMatchSnapshot();
+});

node_modules/react-color/es/components/sketch/story.js

@@ -0,0 +1,32 @@
+import React from 'react';
+import { storiesOf } from '@storybook/react';
+import { renderWithKnobs } from '../../../.storybook/report';
+import SyncColorField from '../../../.storybook/SyncColorField';
+
+import Sketch from './Sketch';
+
+storiesOf('Pickers', module).add('SketchPicker', function () {
+  return React.createElement(
+    SyncColorField,
+    { component: Sketch },
+    renderWithKnobs(Sketch, {}, null, {
+      width: { range: true, min: 140, max: 500, step: 1 }
+    })
+  );
+}).add('SketchPicker Custom Styles', function () {
+  return React.createElement(
+    SyncColorField,
+    { component: Sketch },
+    renderWithKnobs(Sketch, {
+      styles: {
+        default: {
+          picker: {
+            boxShadow: 'none'
+          }
+        }
+      }
+    }, null, {
+      width: { range: true, min: 140, max: 500, step: 1 }
+    })
+  );
+});

node_modules/react-color/es/components/slider/Slider.js

@@ -0,0 +1,60 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import reactCSS from 'reactcss';
+import merge from 'lodash-es/merge';
+
+import { ColorWrap, Hue } from '../common';
+import SliderSwatches from './SliderSwatches';
+import SliderPointer from './SliderPointer';
+
+export var Slider = function Slider(_ref) {
+  var hsl = _ref.hsl,
+      onChange = _ref.onChange,
+      pointer = _ref.pointer,
+      _ref$styles = _ref.styles,
+      passedStyles = _ref$styles === undefined ? {} : _ref$styles,
+      _ref$className = _ref.className,
+      className = _ref$className === undefined ? '' : _ref$className;
+
+  var styles = reactCSS(merge({
+    'default': {
+      hue: {
+        height: '12px',
+        position: 'relative'
+      },
+      Hue: {
+        radius: '2px'
+      }
+    }
+  }, passedStyles));
+
+  return React.createElement(
+    'div',
+    { style: styles.wrap || {}, className: 'slider-picker ' + className },
+    React.createElement(
+      'div',
+      { style: styles.hue },
+      React.createElement(Hue, {
+        style: styles.Hue,
+        hsl: hsl,
+        pointer: pointer,
+        onChange: onChange
+      })
+    ),
+    React.createElement(
+      'div',
+      { style: styles.swatches },
+      React.createElement(SliderSwatches, { hsl: hsl, onClick: onChange })
+    )
+  );
+};
+
+Slider.propTypes = {
+  styles: PropTypes.object
+};
+Slider.defaultProps = {
+  pointer: SliderPointer,
+  styles: {}
+};
+
+export default ColorWrap(Slider);

node_modules/react-color/es/components/slider/SliderPointer.js

@@ -0,0 +1,21 @@
+import React from 'react';
+import reactCSS from 'reactcss';
+
+export var SliderPointer = function SliderPointer() {
+  var styles = reactCSS({
+    'default': {
+      picker: {
+        width: '14px',
+        height: '14px',
+        borderRadius: '6px',
+        transform: 'translate(-7px, -1px)',
+        backgroundColor: 'rgb(248, 248, 248)',
+        boxShadow: '0 1px 4px 0 rgba(0, 0, 0, 0.37)'
+      }
+    }
+  });
+
+  return React.createElement('div', { style: styles.picker });
+};
+
+export default SliderPointer;

node_modules/react-color/es/components/slider/SliderSwatch.js

@@ -0,0 +1,51 @@
+import React from 'react';
+import reactCSS from 'reactcss';
+
+export var SliderSwatch = function SliderSwatch(_ref) {
+  var hsl = _ref.hsl,
+      offset = _ref.offset,
+      _ref$onClick = _ref.onClick,
+      onClick = _ref$onClick === undefined ? function () {} : _ref$onClick,
+      active = _ref.active,
+      first = _ref.first,
+      last = _ref.last;
+
+  var styles = reactCSS({
+    'default': {
+      swatch: {
+        height: '12px',
+        background: 'hsl(' + hsl.h + ', 50%, ' + offset * 100 + '%)',
+        cursor: 'pointer'
+      }
+    },
+    'first': {
+      swatch: {
+        borderRadius: '2px 0 0 2px'
+      }
+    },
+    'last': {
+      swatch: {
+        borderRadius: '0 2px 2px 0'
+      }
+    },
+    'active': {
+      swatch: {
+        transform: 'scaleY(1.8)',
+        borderRadius: '3.6px/2px'
+      }
+    }
+  }, { active: active, first: first, last: last });
+
+  var handleClick = function handleClick(e) {
+    return onClick({
+      h: hsl.h,
+      s: 0.5,
+      l: offset,
+      source: 'hsl'
+    }, e);
+  };
+
+  return React.createElement('div', { style: styles.swatch, onClick: handleClick });
+};
+
+export default SliderSwatch;

node_modules/react-color/es/components/slider/SliderSwatches.js

@@ -0,0 +1,89 @@
+import React from 'react';
+import reactCSS from 'reactcss';
+
+import SliderSwatch from './SliderSwatch';
+
+export var SliderSwatches = function SliderSwatches(_ref) {
+  var onClick = _ref.onClick,
+      hsl = _ref.hsl;
+
+  var styles = reactCSS({
+    'default': {
+      swatches: {
+        marginTop: '20px'
+      },
+      swatch: {
+        boxSizing: 'border-box',
+        width: '20%',
+        paddingRight: '1px',
+        float: 'left'
+      },
+      clear: {
+        clear: 'both'
+      }
+    }
+  });
+
+  // Acceptible difference in floating point equality
+  var epsilon = 0.1;
+
+  return React.createElement(
+    'div',
+    { style: styles.swatches },
+    React.createElement(
+      'div',
+      { style: styles.swatch },
+      React.createElement(SliderSwatch, {
+        hsl: hsl,
+        offset: '.80',
+        active: Math.abs(hsl.l - 0.80) < epsilon && Math.abs(hsl.s - 0.50) < epsilon,
+        onClick: onClick,
+        first: true
+      })
+    ),
+    React.createElement(
+      'div',
+      { style: styles.swatch },
+      React.createElement(SliderSwatch, {
+        hsl: hsl,
+        offset: '.65',
+        active: Math.abs(hsl.l - 0.65) < epsilon && Math.abs(hsl.s - 0.50) < epsilon,
+        onClick: onClick
+      })
+    ),
+    React.createElement(
+      'div',
+      { style: styles.swatch },
+      React.createElement(SliderSwatch, {
+        hsl: hsl,
+        offset: '.50',
+        active: Math.abs(hsl.l - 0.50) < epsilon && Math.abs(hsl.s - 0.50) < epsilon,
+        onClick: onClick
+      })
+    ),
+    React.createElement(
+      'div',
+      { style: styles.swatch },
+      React.createElement(SliderSwatch, {
+        hsl: hsl,
+        offset: '.35',
+        active: Math.abs(hsl.l - 0.35) < epsilon && Math.abs(hsl.s - 0.50) < epsilon,
+        onClick: onClick
+      })
+    ),
+    React.createElement(
+      'div',
+      { style: styles.swatch },
+      React.createElement(SliderSwatch, {
+        hsl: hsl,
+        offset: '.20',
+        active: Math.abs(hsl.l - 0.20) < epsilon && Math.abs(hsl.s - 0.50) < epsilon,
+        onClick: onClick,
+        last: true
+      })
+    ),
+    React.createElement('div', { style: styles.clear })
+  );
+};
+
+export default SliderSwatches;

node_modules/react-color/es/components/slider/spec.js

@@ -0,0 +1,35 @@
+/* global test, expect */
+
+import React from 'react';
+import renderer from 'react-test-renderer';
+import { red } from '../../helpers/color';
+
+import Slider from './Slider';
+import SliderPointer from './SliderPointer';
+import SliderSwatch from './SliderSwatch';
+import SliderSwatches from './SliderSwatches';
+
+test('Slider renders correctly', function () {
+  var tree = renderer.create(React.createElement(Slider, red)).toJSON();
+  expect(tree).toMatchSnapshot();
+});
+
+test('Slider renders custom styles correctly', function () {
+  var tree = renderer.create(React.createElement(Slider, { styles: { default: { wrap: { boxShadow: 'none' } } } })).toJSON();
+  expect(tree.props.style.boxShadow).toBe('none');
+});
+
+test('SliderPointer renders correctly', function () {
+  var tree = renderer.create(React.createElement(SliderPointer, null)).toJSON();
+  expect(tree).toMatchSnapshot();
+});
+
+test('SliderSwatch renders correctly', function () {
+  var tree = renderer.create(React.createElement(SliderSwatch, red)).toJSON();
+  expect(tree).toMatchSnapshot();
+});
+
+test('SliderSwatches renders correctly', function () {
+  var tree = renderer.create(React.createElement(SliderSwatches, red)).toJSON();
+  expect(tree).toMatchSnapshot();
+});

node_modules/react-color/es/components/swatches/Swatches.js

@@ -0,0 +1,88 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import reactCSS from 'reactcss';
+import map from 'lodash-es/map';
+import merge from 'lodash-es/merge';
+import * as material from 'material-colors';
+
+import { ColorWrap, Raised } from '../common';
+import SwatchesGroup from './SwatchesGroup';
+
+export var Swatches = function Swatches(_ref) {
+  var width = _ref.width,
+      height = _ref.height,
+      onChange = _ref.onChange,
+      onSwatchHover = _ref.onSwatchHover,
+      colors = _ref.colors,
+      hex = _ref.hex,
+      _ref$styles = _ref.styles,
+      passedStyles = _ref$styles === undefined ? {} : _ref$styles,
+      _ref$className = _ref.className,
+      className = _ref$className === undefined ? '' : _ref$className;
+
+  var styles = reactCSS(merge({
+    'default': {
+      picker: {
+        width: width,
+        height: height
+      },
+      overflow: {
+        height: height,
+        overflowY: 'scroll'
+      },
+      body: {
+        padding: '16px 0 6px 16px'
+      },
+      clear: {
+        clear: 'both'
+      }
+    }
+  }, passedStyles));
+
+  var handleChange = function handleChange(data, e) {
+    return onChange({ hex: data, source: 'hex' }, e);
+  };
+
+  return React.createElement(
+    'div',
+    { style: styles.picker, className: 'swatches-picker ' + className },
+    React.createElement(
+      Raised,
+      null,
+      React.createElement(
+        'div',
+        { style: styles.overflow },
+        React.createElement(
+          'div',
+          { style: styles.body },
+          map(colors, function (group) {
+            return React.createElement(SwatchesGroup, {
+              key: group.toString(),
+              group: group,
+              active: hex,
+              onClick: handleChange,
+              onSwatchHover: onSwatchHover
+            });
+          }),
+          React.createElement('div', { style: styles.clear })
+        )
+      )
+    )
+  );
+};
+
+Swatches.propTypes = {
+  width: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+  height: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+  colors: PropTypes.arrayOf(PropTypes.arrayOf(PropTypes.string)),
+  styles: PropTypes.object
+
+  /* eslint-disable max-len */
+};Swatches.defaultProps = {
+  width: 320,
+  height: 240,
+  colors: [[material.red['900'], material.red['700'], material.red['500'], material.red['300'], material.red['100']], [material.pink['900'], material.pink['700'], material.pink['500'], material.pink['300'], material.pink['100']], [material.purple['900'], material.purple['700'], material.purple['500'], material.purple['300'], material.purple['100']], [material.deepPurple['900'], material.deepPurple['700'], material.deepPurple['500'], material.deepPurple['300'], material.deepPurple['100']], [material.indigo['900'], material.indigo['700'], material.indigo['500'], material.indigo['300'], material.indigo['100']], [material.blue['900'], material.blue['700'], material.blue['500'], material.blue['300'], material.blue['100']], [material.lightBlue['900'], material.lightBlue['700'], material.lightBlue['500'], material.lightBlue['300'], material.lightBlue['100']], [material.cyan['900'], material.cyan['700'], material.cyan['500'], material.cyan['300'], material.cyan['100']], [material.teal['900'], material.teal['700'], material.teal['500'], material.teal['300'], material.teal['100']], ['#194D33', material.green['700'], material.green['500'], material.green['300'], material.green['100']], [material.lightGreen['900'], material.lightGreen['700'], material.lightGreen['500'], material.lightGreen['300'], material.lightGreen['100']], [material.lime['900'], material.lime['700'], material.lime['500'], material.lime['300'], material.lime['100']], [material.yellow['900'], material.yellow['700'], material.yellow['500'], material.yellow['300'], material.yellow['100']], [material.amber['900'], material.amber['700'], material.amber['500'], material.amber['300'], material.amber['100']], [material.orange['900'], material.orange['700'], material.orange['500'], material.orange['300'], material.orange['100']], [material.deepOrange['900'], material.deepOrange['700'], material.deepOrange['500'], material.deepOrange['300'], material.deepOrange['100']], [material.brown['900'], material.brown['700'], material.brown['500'], material.brown['300'], material.brown['100']], [material.blueGrey['900'], material.blueGrey['700'], material.blueGrey['500'], material.blueGrey['300'], material.blueGrey['100']], ['#000000', '#525252', '#969696', '#D9D9D9', '#FFFFFF']],
+  styles: {}
+};
+
+export default ColorWrap(Swatches);

node_modules/react-color/es/components/swatches/SwatchesColor.js

@@ -0,0 +1,87 @@
+import React from 'react';
+import reactCSS from 'reactcss';
+import * as colorUtils from '../../helpers/color';
+
+import { Swatch } from '../common';
+import CheckIcon from '@icons/material/CheckIcon';
+
+export var SwatchesColor = function SwatchesColor(_ref) {
+  var color = _ref.color,
+      _ref$onClick = _ref.onClick,
+      onClick = _ref$onClick === undefined ? function () {} : _ref$onClick,
+      onSwatchHover = _ref.onSwatchHover,
+      first = _ref.first,
+      last = _ref.last,
+      active = _ref.active;
+
+  var styles = reactCSS({
+    'default': {
+      color: {
+        width: '40px',
+        height: '24px',
+        cursor: 'pointer',
+        background: color,
+        marginBottom: '1px'
+      },
+      check: {
+        color: colorUtils.getContrastingColor(color),
+        marginLeft: '8px',
+        display: 'none'
+      }
+    },
+    'first': {
+      color: {
+        overflow: 'hidden',
+        borderRadius: '2px 2px 0 0'
+      }
+    },
+    'last': {
+      color: {
+        overflow: 'hidden',
+        borderRadius: '0 0 2px 2px'
+      }
+    },
+    'active': {
+      check: {
+        display: 'block'
+      }
+    },
+    'color-#FFFFFF': {
+      color: {
+        boxShadow: 'inset 0 0 0 1px #ddd'
+      },
+      check: {
+        color: '#333'
+      }
+    },
+    'transparent': {
+      check: {
+        color: '#333'
+      }
+    }
+  }, {
+    first: first,
+    last: last,
+    active: active,
+    'color-#FFFFFF': color === '#FFFFFF',
+    'transparent': color === 'transparent'
+  });
+
+  return React.createElement(
+    Swatch,
+    {
+      color: color,
+      style: styles.color,
+      onClick: onClick,
+      onHover: onSwatchHover,
+      focusStyle: { boxShadow: '0 0 4px ' + color }
+    },
+    React.createElement(
+      'div',
+      { style: styles.check },
+      React.createElement(CheckIcon, null)
+    )
+  );
+};
+
+export default SwatchesColor;

node_modules/react-color/es/components/swatches/SwatchesGroup.js

@@ -0,0 +1,41 @@
+import React from 'react';
+import reactCSS from 'reactcss';
+import map from 'lodash-es/map';
+
+import SwatchesColor from './SwatchesColor';
+
+export var SwatchesGroup = function SwatchesGroup(_ref) {
+  var onClick = _ref.onClick,
+      onSwatchHover = _ref.onSwatchHover,
+      group = _ref.group,
+      active = _ref.active;
+
+  var styles = reactCSS({
+    'default': {
+      group: {
+        paddingBottom: '10px',
+        width: '40px',
+        float: 'left',
+        marginRight: '10px'
+      }
+    }
+  });
+
+  return React.createElement(
+    'div',
+    { style: styles.group },
+    map(group, function (color, i) {
+      return React.createElement(SwatchesColor, {
+        key: color,
+        color: color,
+        active: color.toLowerCase() === active,
+        first: i === 0,
+        last: i === group.length - 1,
+        onClick: onClick,
+        onSwatchHover: onSwatchHover
+      });
+    })
+  );
+};
+
+export default SwatchesGroup;

node_modules/react-color/es/components/swatches/spec.js

@@ -0,0 +1,60 @@
+/* global test, jest, expect */
+
+import React from 'react';
+import renderer from 'react-test-renderer';
+import { mount } from 'enzyme';
+import * as color from '../../helpers/color';
+
+import Swatches from './Swatches';
+import SwatchesColor from './SwatchesColor';
+import SwatchesGroup from './SwatchesGroup';
+import { Swatch } from '../common';
+
+test('Swatches renders correctly', function () {
+  var tree = renderer.create(React.createElement(Swatches, { hex: color.red.hex, colors: [['#fff'], ['#333']] })).toJSON();
+  expect(tree).toMatchSnapshot();
+});
+
+test('Swatches renders custom styles correctly', function () {
+  var tree = renderer.create(React.createElement(Swatches, { hex: color.red.hex, colors: [['#fff'], ['#333']], styles: { default: { picker: { boxShadow: '0 0 10px red' } } } })).toJSON();
+  expect(tree.props.style.boxShadow).toBe('0 0 10px red');
+});
+
+test('Swatches onChange events correctly', function () {
+  var changeSpy = jest.fn(function (data) {
+    expect(color.simpleCheckForValidColor(data)).toBeTruthy();
+  });
+  var tree = mount(React.createElement(Swatches, { onChange: changeSpy }));
+  expect(changeSpy).toHaveBeenCalledTimes(0);
+  var swatches = tree.find(Swatch);
+  swatches.at(0).childAt(0).simulate('click');
+
+  expect(changeSpy).toHaveBeenCalled();
+});
+
+test('Swatches with onSwatchHover events correctly', function () {
+  var hoverSpy = jest.fn(function (data) {
+    expect(color.simpleCheckForValidColor(data)).toBeTruthy();
+  });
+  var tree = mount(React.createElement(Swatches, { onSwatchHover: hoverSpy }));
+  expect(hoverSpy).toHaveBeenCalledTimes(0);
+  var swatches = tree.find(Swatch);
+  swatches.at(0).childAt(0).simulate('mouseOver');
+
+  expect(hoverSpy).toHaveBeenCalled();
+});
+
+test('SwatchesColor renders correctly', function () {
+  var tree = renderer.create(React.createElement(SwatchesColor, null)).toJSON();
+  expect(tree).toMatchSnapshot();
+});
+
+test('SwatchesColor renders with props', function () {
+  var tree = renderer.create(React.createElement(SwatchesColor, { active: true, first: true, last: true })).toJSON();
+  expect(tree).toMatchSnapshot();
+});
+
+test('SwatchesGroup renders correctly', function () {
+  var tree = renderer.create(React.createElement(SwatchesGroup, { active: color.red.hex, group: ['#fff'] })).toJSON();
+  expect(tree).toMatchSnapshot();
+});

node_modules/react-color/es/components/swatches/story.js

@@ -0,0 +1,17 @@
+import React from 'react';
+import { storiesOf } from '@storybook/react';
+import { renderWithKnobs } from '../../../.storybook/report';
+import SyncColorField from '../../../.storybook/SyncColorField';
+
+import Swatches from './Swatches';
+
+storiesOf('Pickers', module).add('SwatchesPicker', function () {
+  return React.createElement(
+    SyncColorField,
+    { component: Swatches },
+    renderWithKnobs(Swatches, {}, null, {
+      width: { range: true, min: 140, max: 500, step: 1 },
+      height: { range: true, min: 140, max: 500, step: 1 }
+    })
+  );
+});

node_modules/react-color/es/components/twitter/Twitter.js

@@ -0,0 +1,182 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import reactCSS from 'reactcss';
+import map from 'lodash-es/map';
+import merge from 'lodash-es/merge';
+import * as color from '../../helpers/color';
+
+import { ColorWrap, EditableInput, Swatch } from '../common';
+
+export var Twitter = function Twitter(_ref) {
+  var onChange = _ref.onChange,
+      onSwatchHover = _ref.onSwatchHover,
+      hex = _ref.hex,
+      colors = _ref.colors,
+      width = _ref.width,
+      triangle = _ref.triangle,
+      _ref$styles = _ref.styles,
+      passedStyles = _ref$styles === undefined ? {} : _ref$styles,
+      _ref$className = _ref.className,
+      className = _ref$className === undefined ? '' : _ref$className;
+
+  var styles = reactCSS(merge({
+    'default': {
+      card: {
+        width: width,
+        background: '#fff',
+        border: '0 solid rgba(0,0,0,0.25)',
+        boxShadow: '0 1px 4px rgba(0,0,0,0.25)',
+        borderRadius: '4px',
+        position: 'relative'
+      },
+      body: {
+        padding: '15px 9px 9px 15px'
+      },
+      label: {
+        fontSize: '18px',
+        color: '#fff'
+      },
+      triangle: {
+        width: '0px',
+        height: '0px',
+        borderStyle: 'solid',
+        borderWidth: '0 9px 10px 9px',
+        borderColor: 'transparent transparent #fff transparent',
+        position: 'absolute'
+      },
+      triangleShadow: {
+        width: '0px',
+        height: '0px',
+        borderStyle: 'solid',
+        borderWidth: '0 9px 10px 9px',
+        borderColor: 'transparent transparent rgba(0,0,0,.1) transparent',
+        position: 'absolute'
+      },
+      hash: {
+        background: '#F0F0F0',
+        height: '30px',
+        width: '30px',
+        borderRadius: '4px 0 0 4px',
+        float: 'left',
+        color: '#98A1A4',
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center'
+      },
+      input: {
+        width: '100px',
+        fontSize: '14px',
+        color: '#666',
+        border: '0px',
+        outline: 'none',
+        height: '28px',
+        boxShadow: 'inset 0 0 0 1px #F0F0F0',
+        boxSizing: 'content-box',
+        borderRadius: '0 4px 4px 0',
+        float: 'left',
+        paddingLeft: '8px'
+      },
+      swatch: {
+        width: '30px',
+        height: '30px',
+        float: 'left',
+        borderRadius: '4px',
+        margin: '0 6px 6px 0'
+      },
+      clear: {
+        clear: 'both'
+      }
+    },
+    'hide-triangle': {
+      triangle: {
+        display: 'none'
+      },
+      triangleShadow: {
+        display: 'none'
+      }
+    },
+    'top-left-triangle': {
+      triangle: {
+        top: '-10px',
+        left: '12px'
+      },
+      triangleShadow: {
+        top: '-11px',
+        left: '12px'
+      }
+    },
+    'top-right-triangle': {
+      triangle: {
+        top: '-10px',
+        right: '12px'
+      },
+      triangleShadow: {
+        top: '-11px',
+        right: '12px'
+      }
+    }
+  }, passedStyles), {
+    'hide-triangle': triangle === 'hide',
+    'top-left-triangle': triangle === 'top-left',
+    'top-right-triangle': triangle === 'top-right'
+  });
+
+  var handleChange = function handleChange(hexcode, e) {
+    color.isValidHex(hexcode) && onChange({
+      hex: hexcode,
+      source: 'hex'
+    }, e);
+  };
+
+  return React.createElement(
+    'div',
+    { style: styles.card, className: 'twitter-picker ' + className },
+    React.createElement('div', { style: styles.triangleShadow }),
+    React.createElement('div', { style: styles.triangle }),
+    React.createElement(
+      'div',
+      { style: styles.body },
+      map(colors, function (c, i) {
+        return React.createElement(Swatch, {
+          key: i,
+          color: c,
+          hex: c,
+          style: styles.swatch,
+          onClick: handleChange,
+          onHover: onSwatchHover,
+          focusStyle: {
+            boxShadow: '0 0 4px ' + c
+          }
+        });
+      }),
+      React.createElement(
+        'div',
+        { style: styles.hash },
+        '#'
+      ),
+      React.createElement(EditableInput, {
+        label: null,
+        style: { input: styles.input },
+        value: hex.replace('#', ''),
+        onChange: handleChange
+      }),
+      React.createElement('div', { style: styles.clear })
+    )
+  );
+};
+
+Twitter.propTypes = {
+  width: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+  triangle: PropTypes.oneOf(['hide', 'top-left', 'top-right']),
+  colors: PropTypes.arrayOf(PropTypes.string),
+  styles: PropTypes.object
+};
+
+Twitter.defaultProps = {
+  width: 276,
+  colors: ['#FF6900', '#FCB900', '#7BDCB5', '#00D084', '#8ED1FC', '#0693E3', '#ABB8C3', '#EB144C', '#F78DA7', '#9900EF'],
+  triangle: 'top-left',
+  styles: {}
+};
+
+export default ColorWrap(Twitter);

node_modules/react-color/es/components/twitter/spec.js

@@ -0,0 +1,55 @@
+var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
+
+/* global test, jest, expect */
+
+import React from 'react';
+import renderer from 'react-test-renderer';
+import { mount } from 'enzyme';
+import * as color from '../../helpers/color';
+
+import Twitter from './Twitter';
+import { Swatch } from '../common';
+
+test('Twitter renders correctly', function () {
+  var tree = renderer.create(React.createElement(Twitter, color.red)).toJSON();
+  expect(tree).toMatchSnapshot();
+});
+
+test('Material renders custom styles correctly', function () {
+  var tree = renderer.create(React.createElement(Twitter, _extends({}, color.red, { styles: { default: { card: { boxShadow: '0 0 10px red' } } } }))).toJSON();
+  expect(tree.props.style.boxShadow).toBe('0 0 10px red');
+});
+
+test('Twitter `triangle="hide"`', function () {
+  var tree = renderer.create(React.createElement(Twitter, _extends({}, color.red, { triangle: 'hide' }))).toJSON();
+  expect(tree).toMatchSnapshot();
+});
+
+test('Twitter `triangle="top-right"`', function () {
+  var tree = renderer.create(React.createElement(Twitter, _extends({}, color.red, { triangle: 'top-right' }))).toJSON();
+  expect(tree).toMatchSnapshot();
+});
+
+test('Twitter onChange events correctly', function () {
+  var changeSpy = jest.fn(function (data) {
+    expect(color.simpleCheckForValidColor(data)).toBeTruthy();
+  });
+  var tree = mount(React.createElement(Twitter, _extends({}, color.red, { onChange: changeSpy })));
+  expect(changeSpy).toHaveBeenCalledTimes(0);
+  var swatches = tree.find(Swatch);
+  swatches.at(0).childAt(0).simulate('click');
+
+  expect(changeSpy).toHaveBeenCalled();
+});
+
+test('Twitter with onSwatchHover events correctly', function () {
+  var hoverSpy = jest.fn(function (data) {
+    expect(color.simpleCheckForValidColor(data)).toBeTruthy();
+  });
+  var tree = mount(React.createElement(Twitter, _extends({}, color.red, { onSwatchHover: hoverSpy })));
+  expect(hoverSpy).toHaveBeenCalledTimes(0);
+  var swatches = tree.find(Swatch);
+  swatches.at(0).childAt(0).simulate('mouseOver');
+
+  expect(hoverSpy).toHaveBeenCalled();
+});

node_modules/react-color/es/components/twitter/story.js

@@ -0,0 +1,16 @@
+import React from 'react';
+import { storiesOf } from '@storybook/react';
+import { renderWithKnobs } from '../../../.storybook/report';
+import SyncColorField from '../../../.storybook/SyncColorField';
+
+import Twitter from './Twitter';
+
+storiesOf('Pickers', module).add('TwitterPicker', function () {
+  return React.createElement(
+    SyncColorField,
+    { component: Twitter },
+    renderWithKnobs(Twitter, {}, null, {
+      width: { range: true, min: 140, max: 500, step: 1 }
+    })
+  );
+});

node_modules/react-color/es/helpers/alpha.js

@@ -0,0 +1,49 @@
+export var calculateChange = function calculateChange(e, hsl, direction, initialA, container) {
+  var containerWidth = container.clientWidth;
+  var containerHeight = container.clientHeight;
+  var x = typeof e.pageX === 'number' ? e.pageX : e.touches[0].pageX;
+  var y = typeof e.pageY === 'number' ? e.pageY : e.touches[0].pageY;
+  var left = x - (container.getBoundingClientRect().left + window.pageXOffset);
+  var top = y - (container.getBoundingClientRect().top + window.pageYOffset);
+
+  if (direction === 'vertical') {
+    var a = void 0;
+    if (top < 0) {
+      a = 0;
+    } else if (top > containerHeight) {
+      a = 1;
+    } else {
+      a = Math.round(top * 100 / containerHeight) / 100;
+    }
+
+    if (hsl.a !== a) {
+      return {
+        h: hsl.h,
+        s: hsl.s,
+        l: hsl.l,
+        a: a,
+        source: 'rgb'
+      };
+    }
+  } else {
+    var _a = void 0;
+    if (left < 0) {
+      _a = 0;
+    } else if (left > containerWidth) {
+      _a = 1;
+    } else {
+      _a = Math.round(left * 100 / containerWidth) / 100;
+    }
+
+    if (initialA !== _a) {
+      return {
+        h: hsl.h,
+        s: hsl.s,
+        l: hsl.l,
+        a: _a,
+        source: 'rgb'
+      };
+    }
+  }
+  return null;
+};

node_modules/react-color/es/helpers/checkboard.js

@@ -0,0 +1,33 @@
+var checkboardCache = {};
+
+export var render = function render(c1, c2, size, serverCanvas) {
+  if (typeof document === 'undefined' && !serverCanvas) {
+    return null;
+  }
+  var canvas = serverCanvas ? new serverCanvas() : document.createElement('canvas');
+  canvas.width = size * 2;
+  canvas.height = size * 2;
+  var ctx = canvas.getContext('2d');
+  if (!ctx) {
+    return null;
+  } // If no context can be found, return early.
+  ctx.fillStyle = c1;
+  ctx.fillRect(0, 0, canvas.width, canvas.height);
+  ctx.fillStyle = c2;
+  ctx.fillRect(0, 0, size, size);
+  ctx.translate(size, size);
+  ctx.fillRect(0, 0, size, size);
+  return canvas.toDataURL();
+};
+
+export var get = function get(c1, c2, size, serverCanvas) {
+  var key = c1 + '-' + c2 + '-' + size + (serverCanvas ? '-server' : '');
+
+  if (checkboardCache[key]) {
+    return checkboardCache[key];
+  }
+
+  var checkboard = render(c1, c2, size, serverCanvas);
+  checkboardCache[key] = checkboard;
+  return checkboard;
+};

node_modules/react-color/es/helpers/color.js

@@ -0,0 +1,78 @@
+import each from 'lodash-es/each';
+import tinycolor from 'tinycolor2';
+
+export var simpleCheckForValidColor = function simpleCheckForValidColor(data) {
+  var keysToCheck = ['r', 'g', 'b', 'a', 'h', 's', 'l', 'v'];
+  var checked = 0;
+  var passed = 0;
+  each(keysToCheck, function (letter) {
+    if (data[letter]) {
+      checked += 1;
+      if (!isNaN(data[letter])) {
+        passed += 1;
+      }
+      if (letter === 's' || letter === 'l') {
+        var percentPatt = /^\d+%$/;
+        if (percentPatt.test(data[letter])) {
+          passed += 1;
+        }
+      }
+    }
+  });
+  return checked === passed ? data : false;
+};
+
+export var toState = function toState(data, oldHue) {
+  var color = data.hex ? tinycolor(data.hex) : tinycolor(data);
+  var hsl = color.toHsl();
+  var hsv = color.toHsv();
+  var rgb = color.toRgb();
+  var hex = color.toHex();
+  if (hsl.s === 0) {
+    hsl.h = oldHue || 0;
+    hsv.h = oldHue || 0;
+  }
+  var transparent = hex === '000000' && rgb.a === 0;
+
+  return {
+    hsl: hsl,
+    hex: transparent ? 'transparent' : '#' + hex,
+    rgb: rgb,
+    hsv: hsv,
+    oldHue: data.h || oldHue || hsl.h,
+    source: data.source
+  };
+};
+
+export var isValidHex = function isValidHex(hex) {
+  if (hex === 'transparent') {
+    return true;
+  }
+  // disable hex4 and hex8
+  var lh = String(hex).charAt(0) === '#' ? 1 : 0;
+  return hex.length !== 4 + lh && hex.length < 7 + lh && tinycolor(hex).isValid();
+};
+
+export var getContrastingColor = function getContrastingColor(data) {
+  if (!data) {
+    return '#fff';
+  }
+  var col = toState(data);
+  if (col.hex === 'transparent') {
+    return 'rgba(0,0,0,0.4)';
+  }
+  var yiq = (col.rgb.r * 299 + col.rgb.g * 587 + col.rgb.b * 114) / 1000;
+  return yiq >= 128 ? '#000' : '#fff';
+};
+
+export var red = {
+  hsl: { a: 1, h: 0, l: 0.5, s: 1 },
+  hex: '#ff0000',
+  rgb: { r: 255, g: 0, b: 0, a: 1 },
+  hsv: { h: 0, s: 1, v: 1, a: 1 }
+};
+
+export var isvalidColorString = function isvalidColorString(string, type) {
+  var stringWithoutDegree = string.replace('°', '');
+  return tinycolor(type + ' (' + stringWithoutDegree + ')')._ok;
+};

node_modules/react-color/es/helpers/hue.js

@@ -0,0 +1,51 @@
+export var calculateChange = function calculateChange(e, direction, hsl, container) {
+  var containerWidth = container.clientWidth;
+  var containerHeight = container.clientHeight;
+  var x = typeof e.pageX === 'number' ? e.pageX : e.touches[0].pageX;
+  var y = typeof e.pageY === 'number' ? e.pageY : e.touches[0].pageY;
+  var left = x - (container.getBoundingClientRect().left + window.pageXOffset);
+  var top = y - (container.getBoundingClientRect().top + window.pageYOffset);
+
+  if (direction === 'vertical') {
+    var h = void 0;
+    if (top < 0) {
+      h = 359;
+    } else if (top > containerHeight) {
+      h = 0;
+    } else {
+      var percent = -(top * 100 / containerHeight) + 100;
+      h = 360 * percent / 100;
+    }
+
+    if (hsl.h !== h) {
+      return {
+        h: h,
+        s: hsl.s,
+        l: hsl.l,
+        a: hsl.a,
+        source: 'hsl'
+      };
+    }
+  } else {
+    var _h = void 0;
+    if (left < 0) {
+      _h = 0;
+    } else if (left > containerWidth) {
+      _h = 359;
+    } else {
+      var _percent = left * 100 / containerWidth;
+      _h = 360 * _percent / 100;
+    }
+
+    if (hsl.h !== _h) {
+      return {
+        h: _h,
+        s: hsl.s,
+        l: hsl.l,
+        a: hsl.a,
+        source: 'hsl'
+      };
+    }
+  }
+  return null;
+};

node_modules/react-color/es/helpers/index.js

@@ -0,0 +1,2 @@
+export * from './checkboard';
+export * from './color';

node_modules/react-color/es/helpers/interaction.js

@@ -0,0 +1,50 @@
+var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
+
+var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
+
+function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+
+function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
+
+function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
+
+/* eslint-disable no-invalid-this */
+import React from 'react';
+
+export var handleFocus = function handleFocus(Component) {
+  var Span = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'span';
+  return function (_React$Component) {
+    _inherits(Focus, _React$Component);
+
+    function Focus() {
+      var _ref;
+
+      var _temp, _this, _ret;
+
+      _classCallCheck(this, Focus);
+
+      for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
+        args[_key] = arguments[_key];
+      }
+
+      return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = Focus.__proto__ || Object.getPrototypeOf(Focus)).call.apply(_ref, [this].concat(args))), _this), _this.state = { focus: false }, _this.handleFocus = function () {
+        return _this.setState({ focus: true });
+      }, _this.handleBlur = function () {
+        return _this.setState({ focus: false });
+      }, _temp), _possibleConstructorReturn(_this, _ret);
+    }
+
+    _createClass(Focus, [{
+      key: 'render',
+      value: function render() {
+        return React.createElement(
+          Span,
+          { onFocus: this.handleFocus, onBlur: this.handleBlur },
+          React.createElement(Component, _extends({}, this.props, this.state))
+        );
+      }
+    }]);
+
+    return Focus;
+  }(React.Component);
+};

node_modules/react-color/es/helpers/saturation.js

@@ -0,0 +1,33 @@
+export var calculateChange = function calculateChange(e, hsl, container) {
+  var _container$getBoundin = container.getBoundingClientRect(),
+      containerWidth = _container$getBoundin.width,
+      containerHeight = _container$getBoundin.height;
+
+  var x = typeof e.pageX === 'number' ? e.pageX : e.touches[0].pageX;
+  var y = typeof e.pageY === 'number' ? e.pageY : e.touches[0].pageY;
+  var left = x - (container.getBoundingClientRect().left + window.pageXOffset);
+  var top = y - (container.getBoundingClientRect().top + window.pageYOffset);
+
+  if (left < 0) {
+    left = 0;
+  } else if (left > containerWidth) {
+    left = containerWidth;
+  }
+
+  if (top < 0) {
+    top = 0;
+  } else if (top > containerHeight) {
+    top = containerHeight;
+  }
+
+  var saturation = left / containerWidth;
+  var bright = 1 - top / containerHeight;
+
+  return {
+    h: hsl.h,
+    s: saturation,
+    v: bright,
+    a: hsl.a,
+    source: 'hsv'
+  };
+};

node_modules/react-color/es/helpers/spec.js

@@ -0,0 +1,193 @@
+/* global test, expect, describe */
+
+import * as color from './color';
+
+describe('helpers/color', function () {
+  describe('simpleCheckForValidColor', function () {
+    test('throws on null', function () {
+      var data = null;
+      expect(function () {
+        return color.simpleCheckForValidColor(data);
+      }).toThrowError(TypeError);
+    });
+
+    test('throws on undefined', function () {
+      var data = undefined;
+      expect(function () {
+        return color.simpleCheckForValidColor(data);
+      }).toThrowError(TypeError);
+    });
+
+    test('no-op on number', function () {
+      var data = 255;
+      expect(color.simpleCheckForValidColor(data)).toEqual(data);
+    });
+
+    test('no-op on NaN', function () {
+      var data = NaN;
+      expect(isNaN(color.simpleCheckForValidColor(data))).toBeTruthy();
+    });
+
+    test('no-op on string', function () {
+      var data = 'ffffff';
+      expect(color.simpleCheckForValidColor(data)).toEqual(data);
+    });
+
+    test('no-op on array', function () {
+      var data = [];
+      expect(color.simpleCheckForValidColor(data)).toEqual(data);
+    });
+
+    test('no-op on rgb objects with numeric keys', function () {
+      var data = { r: 0, g: 0, b: 0 };
+      expect(color.simpleCheckForValidColor(data)).toEqual(data);
+    });
+
+    test('no-op on an object with an r g b a h s v key mapped to a NaN value', function () {
+      var data = { r: NaN };
+      expect(color.simpleCheckForValidColor(data)).toEqual(data);
+    });
+
+    test('no-op on hsl "s" percentage', function () {
+      var data = { s: '15%' };
+      expect(color.simpleCheckForValidColor(data)).toEqual(data);
+    });
+
+    test('no-op on hsl "l" percentage', function () {
+      var data = { l: '100%' };
+      expect(color.simpleCheckForValidColor(data)).toEqual(data);
+    });
+
+    test('should return false for invalid percentage', function () {
+      var data = { l: '100%2' };
+      expect(color.simpleCheckForValidColor(data)).toBe(false);
+    });
+  });
+
+  describe('toState', function () {
+    test('returns an object giving a color in all formats', function () {
+      expect(color.toState('red')).toEqual({
+        hsl: { a: 1, h: 0, l: 0.5, s: 1 },
+        hex: '#ff0000',
+        rgb: { r: 255, g: 0, b: 0, a: 1 },
+        hsv: { h: 0, s: 1, v: 1, a: 1 },
+        oldHue: 0,
+        source: undefined
+      });
+    });
+
+    test('gives hex color with leading hash', function () {
+      expect(color.toState('blue').hex).toEqual('#0000ff');
+    });
+
+    test('doesn\'t mutate hsl color object', function () {
+      var originalData = { h: 0, s: 0, l: 0, a: 1 };
+      var data = Object.assign({}, originalData);
+      color.toState(data);
+      expect(data).toEqual(originalData);
+    });
+
+    test('doesn\'t mutate hsv color object', function () {
+      var originalData = { h: 0, s: 0, v: 0, a: 1 };
+      var data = Object.assign({}, originalData);
+      color.toState(data);
+      expect(data).toEqual(originalData);
+    });
+  });
+
+  describe('isValidHex', function () {
+    test('allows strings of length 3 or 6', function () {
+      expect(color.isValidHex('f')).toBeFalsy();
+      expect(color.isValidHex('ff')).toBeFalsy();
+      expect(color.isValidHex('fff')).toBeTruthy();
+      expect(color.isValidHex('ffff')).toBeFalsy();
+      expect(color.isValidHex('fffff')).toBeFalsy();
+      expect(color.isValidHex('ffffff')).toBeTruthy();
+      expect(color.isValidHex('fffffff')).toBeFalsy();
+      expect(color.isValidHex('ffffffff')).toBeFalsy();
+      expect(color.isValidHex('fffffffff')).toBeFalsy();
+      expect(color.isValidHex('ffffffffff')).toBeFalsy();
+      expect(color.isValidHex('fffffffffff')).toBeFalsy();
+      expect(color.isValidHex('ffffffffffff')).toBeFalsy();
+    });
+
+    test('allows strings without leading hash', function () {
+      // Check a sample of possible colors - doing all takes too long.
+      for (var i = 0; i <= 0xffffff; i += 0x010101) {
+        var hex = ('000000' + i.toString(16)).slice(-6);
+        expect(color.isValidHex(hex)).toBeTruthy();
+      }
+    });
+
+    test('allows strings with leading hash', function () {
+      // Check a sample of possible colors - doing all takes too long.
+      for (var i = 0; i <= 0xffffff; i += 0x010101) {
+        var hex = ('000000' + i.toString(16)).slice(-6);
+        expect(color.isValidHex('#' + hex)).toBeTruthy();
+      }
+    });
+
+    test('is case-insensitive', function () {
+      expect(color.isValidHex('ffffff')).toBeTruthy();
+      expect(color.isValidHex('FfFffF')).toBeTruthy();
+      expect(color.isValidHex('FFFFFF')).toBeTruthy();
+    });
+
+    test('allow transparent color', function () {
+      expect(color.isValidHex('transparent')).toBeTruthy();
+    });
+
+    test('does not allow non-hex characters', function () {
+      expect(color.isValidHex('gggggg')).toBeFalsy();
+    });
+
+    test('does not allow numbers', function () {
+      expect(color.isValidHex(0xffffff)).toBeFalsy();
+    });
+  });
+
+  describe('getContrastingColor', function () {
+    test('returns a light color for a giving dark color', function () {
+      expect(color.getContrastingColor('red')).toEqual('#fff');
+    });
+
+    test('returns a dark color for a giving light color', function () {
+      expect(color.getContrastingColor('white')).toEqual('#000');
+    });
+
+    test('returns a predefined color for Transparent', function () {
+      expect(color.getContrastingColor('transparent')).toEqual('rgba(0,0,0,0.4)');
+    });
+
+    test('returns a light color as default for undefined', function () {
+      expect(color.getContrastingColor(undefined)).toEqual('#fff');
+    });
+  });
+});
+
+describe('validColorString', function () {
+  test('checks for valid RGB string', function () {
+    expect(color.isvalidColorString('23, 32, 3', 'rgb')).toBeTruthy();
+    expect(color.isvalidColorString('290, 302, 3', 'rgb')).toBeTruthy();
+    expect(color.isvalidColorString('23', 'rgb')).toBeFalsy();
+    expect(color.isvalidColorString('230, 32', 'rgb')).toBeFalsy();
+  });
+
+  test('checks for valid HSL string', function () {
+    expect(color.isvalidColorString('200, 12, 93', 'hsl')).toBeTruthy();
+    expect(color.isvalidColorString('200, 12%, 93%', 'hsl')).toBeTruthy();
+    expect(color.isvalidColorString('200, 120, 93%', 'hsl')).toBeTruthy();
+    expect(color.isvalidColorString('335°, 64%, 99%', 'hsl')).toBeTruthy();
+    expect(color.isvalidColorString('100', 'hsl')).toBeFalsy();
+    expect(color.isvalidColorString('20, 32', 'hsl')).toBeFalsy();
+  });
+
+  test('checks for valid HSV string', function () {
+    expect(color.isvalidColorString('200, 12, 93', 'hsv')).toBeTruthy();
+    expect(color.isvalidColorString('200, 120, 93%', 'hsv')).toBeTruthy();
+    expect(color.isvalidColorString('200°, 6%, 100%', 'hsv')).toBeTruthy();
+    expect(color.isvalidColorString('1', 'hsv')).toBeFalsy();
+    expect(color.isvalidColorString('20, 32', 'hsv')).toBeFalsy();
+    expect(color.isvalidColorString('200°, ee3, 100%', 'hsv')).toBeFalsy();
+  });
+});

node_modules/react-color/es/index.js

@@ -0,0 +1,18 @@
+export { default as AlphaPicker } from './components/alpha/Alpha';
+export { default as BlockPicker } from './components/block/Block';
+export { default as CirclePicker } from './components/circle/Circle';
+import _default from './components/chrome/Chrome';
+export { _default as default };
+export { default as ChromePicker } from './components/chrome/Chrome';
+export { default as CompactPicker } from './components/compact/Compact';
+export { default as GithubPicker } from './components/github/Github';
+export { default as HuePicker } from './components/hue/Hue';
+export { default as MaterialPicker } from './components/material/Material';
+export { default as PhotoshopPicker } from './components/photoshop/Photoshop';
+export { default as SketchPicker } from './components/sketch/Sketch';
+export { default as SliderPicker } from './components/slider/Slider';
+export { default as SwatchesPicker } from './components/swatches/Swatches';
+export { default as TwitterPicker } from './components/twitter/Twitter';
+export { default as GooglePicker } from './components/google/Google';
+
+export { default as CustomPicker } from './components/common/ColorWrap';