@storybook/components 6.5.0-alpha.9 → 6.5.0-beta.2

package/dist/esm/Color-2180f69c.js

@@ -0,0 +1,2575 @@
+var _ColorPicker, _fallbackColor;
+
+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 _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
+
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
+
+function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"]; if (_i == null) return; var _arr = []; var _n = true; var _d = false; var _s, _e; try { for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
+
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+
+import "core-js/modules/es.object.assign.js";
+import "core-js/modules/es.object.keys.js";
+import "core-js/modules/es.array.join.js";
+import "core-js/modules/es.array.filter.js";
+import "core-js/modules/es.object.to-string.js";
+import "core-js/modules/es.number.constructor.js";
+import "core-js/modules/es.regexp.exec.js";
+import "core-js/modules/es.regexp.to-string.js";
+import "core-js/modules/es.string.replace.js";
+import "core-js/modules/es.array.iterator.js";
+import "core-js/modules/es.map.js";
+import "core-js/modules/es.string.iterator.js";
+import "core-js/modules/web.dom-collections.iterator.js";
+import "core-js/modules/es.string.match.js";
+import "core-js/modules/es.array.map.js";
+import "core-js/modules/es.string.split.js";
+import "core-js/modules/web.dom-collections.for-each.js";
+import "core-js/modules/es.array.slice.js";
+import "core-js/modules/es.array.concat.js";
+import "core-js/modules/es.object.values.js";
+import "core-js/modules/es.string.starts-with.js";
+import "core-js/modules/es.function.name.js";
+import "core-js/modules/es.symbol.js";
+import "core-js/modules/es.symbol.description.js";
+import "core-js/modules/es.symbol.iterator.js";
+import "core-js/modules/es.array.from.js";
+import { x as _root, y as isObject_1, z as isSymbol_1, W as WithTooltip, T as TooltipNote, F as Form, I as Icons, B as getControlId, d as __rest } from './index-1adc6033.js';
+import React__default, { useRef, useMemo, useEffect, useState, useCallback, useLayoutEffect } from 'react';
+import { styled } from '@storybook/theming';
+import '@storybook/csf';
+import 'util';
+import '@storybook/client-logger';
+
+function u() {
+  return (u = Object.assign || function (e) {
+    for (var r = 1; r < arguments.length; r++) {
+      var t = arguments[r];
+
+      for (var n in t) {
+        Object.prototype.hasOwnProperty.call(t, n) && (e[n] = t[n]);
+      }
+    }
+
+    return e;
+  }).apply(this, arguments);
+}
+
+function c(e, r) {
+  if (null == e) return {};
+  var t,
+      n,
+      o = {},
+      a = Object.keys(e);
+
+  for (n = 0; n < a.length; n++) {
+    r.indexOf(t = a[n]) >= 0 || (o[t] = e[t]);
+  }
+
+  return o;
+}
+
+function i(e) {
+  var t = useRef(e),
+      n = useRef(function (e) {
+    t.current && t.current(e);
+  });
+  return t.current = e, n.current;
+}
+
+var s = function s(e, r, t) {
+  return void 0 === r && (r = 0), void 0 === t && (t = 1), e > t ? t : e < r ? r : e;
+},
+    f = function f(e) {
+  return "touches" in e;
+},
+    v = function v(e) {
+  return e && e.ownerDocument.defaultView || self;
+},
+    d = function d(e, r, t) {
+  var n = e.getBoundingClientRect(),
+      o = f(r) ? function (e, r) {
+    for (var t = 0; t < e.length; t++) {
+      if (e[t].identifier === r) return e[t];
+    }
+
+    return e[0];
+  }(r.touches, t) : r;
+  return {
+    left: s((o.pageX - (n.left + v(e).pageXOffset)) / n.width),
+    top: s((o.pageY - (n.top + v(e).pageYOffset)) / n.height)
+  };
+},
+    h = function h(e) {
+  !f(e) && e.preventDefault();
+},
+    m = React__default.memo(function (o) {
+  var a = o.onMove,
+      l = o.onKey,
+      s = c(o, ["onMove", "onKey"]),
+      m = useRef(null),
+      g = i(a),
+      p = i(l),
+      b = useRef(null),
+      _ = useRef(!1),
+      x = useMemo(function () {
+    var e = function e(_e) {
+      h(_e), (f(_e) ? _e.touches.length > 0 : _e.buttons > 0) && m.current ? g(d(m.current, _e, b.current)) : t(!1);
+    },
+        r = function r() {
+      return t(!1);
+    };
+
+    function t(t) {
+      var n = _.current,
+          o = v(m.current),
+          a = t ? o.addEventListener : o.removeEventListener;
+      a(n ? "touchmove" : "mousemove", e), a(n ? "touchend" : "mouseup", r);
+    }
+
+    return [function (e) {
+      var r = e.nativeEvent,
+          n = m.current;
+
+      if (n && (h(r), !function (e, r) {
+        return r && !f(e);
+      }(r, _.current) && n)) {
+        if (f(r)) {
+          _.current = !0;
+          var o = r.changedTouches || [];
+          o.length && (b.current = o[0].identifier);
+        }
+
+        n.focus(), g(d(n, r, b.current)), t(!0);
+      }
+    }, function (e) {
+      var r = e.which || e.keyCode;
+      r < 37 || r > 40 || (e.preventDefault(), p({
+        left: 39 === r ? .05 : 37 === r ? -.05 : 0,
+        top: 40 === r ? .05 : 38 === r ? -.05 : 0
+      }));
+    }, t];
+  }, [p, g]),
+      C = x[0],
+      E = x[1],
+      H = x[2];
+
+  return useEffect(function () {
+    return H;
+  }, [H]), React__default.createElement("div", u({}, s, {
+    onTouchStart: C,
+    onMouseDown: C,
+    className: "react-colorful__interactive",
+    ref: m,
+    onKeyDown: E,
+    tabIndex: 0,
+    role: "slider"
+  }));
+}),
+    g = function g(e) {
+  return e.filter(Boolean).join(" ");
+},
+    p = function p(r) {
+  var t = r.color,
+      n = r.left,
+      o = r.top,
+      a = void 0 === o ? .5 : o,
+      l = g(["react-colorful__pointer", r.className]);
+  return React__default.createElement("div", {
+    className: l,
+    style: {
+      top: 100 * a + "%",
+      left: 100 * n + "%"
+    }
+  }, React__default.createElement("div", {
+    className: "react-colorful__pointer-fill",
+    style: {
+      backgroundColor: t
+    }
+  }));
+},
+    b = function b(e, r, t) {
+  return void 0 === r && (r = 0), void 0 === t && (t = Math.pow(10, r)), Math.round(t * e) / t;
+},
+    _ = {
+  grad: .9,
+  turn: 360,
+  rad: 360 / (2 * Math.PI)
+},
+    x = function x(e) {
+  return "#" === e[0] && (e = e.substr(1)), e.length < 6 ? {
+    r: parseInt(e[0] + e[0], 16),
+    g: parseInt(e[1] + e[1], 16),
+    b: parseInt(e[2] + e[2], 16),
+    a: 1
+  } : {
+    r: parseInt(e.substr(0, 2), 16),
+    g: parseInt(e.substr(2, 2), 16),
+    b: parseInt(e.substr(4, 2), 16),
+    a: 1
+  };
+},
+    C = function C(e, r) {
+  return void 0 === r && (r = "deg"), Number(e) * (_[r] || 1);
+},
+    E = function E(e) {
+  var r = /hsla?\(?\s*(-?\d*\.?\d+)(deg|rad|grad|turn)?[,\s]+(-?\d*\.?\d+)%?[,\s]+(-?\d*\.?\d+)%?,?\s*[/\s]*(-?\d*\.?\d+)?(%)?\s*\)?/i.exec(e);
+  return r ? M({
+    h: C(r[1], r[2]),
+    s: Number(r[3]),
+    l: Number(r[4]),
+    a: void 0 === r[5] ? 1 : Number(r[5]) / (r[6] ? 100 : 1)
+  }) : {
+    h: 0,
+    s: 0,
+    v: 0,
+    a: 1
+  };
+},
+    M = function M(e) {
+  var r = e.s,
+      t = e.l;
+  return {
+    h: e.h,
+    s: (r *= (t < 50 ? t : 100 - t) / 100) > 0 ? 2 * r / (t + r) * 100 : 0,
+    v: t + r,
+    a: e.a
+  };
+},
+    N = function N(e) {
+  var r = e.s,
+      t = e.v,
+      n = e.a,
+      o = (200 - r) * t / 100;
+  return {
+    h: b(e.h),
+    s: b(o > 0 && o < 200 ? r * t / 100 / (o <= 100 ? o : 200 - o) * 100 : 0),
+    l: b(o / 2),
+    a: b(n, 2)
+  };
+},
+    w = function w(e) {
+  var r = N(e);
+  return "hsl(" + r.h + ", " + r.s + "%, " + r.l + "%)";
+},
+    y = function y(e) {
+  var r = N(e);
+  return "hsla(" + r.h + ", " + r.s + "%, " + r.l + "%, " + r.a + ")";
+},
+    q = function q(e) {
+  var r = e.h,
+      t = e.s,
+      n = e.v,
+      o = e.a;
+  r = r / 360 * 6, t /= 100, n /= 100;
+  var a = Math.floor(r),
+      l = n * (1 - t),
+      u = n * (1 - (r - a) * t),
+      c = n * (1 - (1 - r + a) * t),
+      i = a % 6;
+  return {
+    r: b(255 * [n, u, l, l, c, n][i]),
+    g: b(255 * [c, n, n, u, l, l][i]),
+    b: b(255 * [l, l, c, n, n, u][i]),
+    a: b(o, 2)
+  };
+},
+    I = function I(e) {
+  var r = /rgba?\(?\s*(-?\d*\.?\d+)(%)?[,\s]+(-?\d*\.?\d+)(%)?[,\s]+(-?\d*\.?\d+)(%)?,?\s*[/\s]*(-?\d*\.?\d+)?(%)?\s*\)?/i.exec(e);
+  return r ? B({
+    r: Number(r[1]) / (r[2] ? 100 / 255 : 1),
+    g: Number(r[3]) / (r[4] ? 100 / 255 : 1),
+    b: Number(r[5]) / (r[6] ? 100 / 255 : 1),
+    a: void 0 === r[7] ? 1 : Number(r[7]) / (r[8] ? 100 : 1)
+  }) : {
+    h: 0,
+    s: 0,
+    v: 0,
+    a: 1
+  };
+},
+    z = function z(e) {
+  var r = e.toString(16);
+  return r.length < 2 ? "0" + r : r;
+},
+    B = function B(e) {
+  var r = e.r,
+      t = e.g,
+      n = e.b,
+      o = e.a,
+      a = Math.max(r, t, n),
+      l = a - Math.min(r, t, n),
+      u = l ? a === r ? (t - n) / l : a === t ? 2 + (n - r) / l : 4 + (r - t) / l : 0;
+  return {
+    h: b(60 * (u < 0 ? u + 6 : u)),
+    s: b(a ? l / a * 100 : 0),
+    v: b(a / 255 * 100),
+    a: o
+  };
+},
+    K = React__default.memo(function (r) {
+  var t = r.hue,
+      n = r.onChange,
+      o = g(["react-colorful__hue", r.className]);
+  return React__default.createElement("div", {
+    className: o
+  }, React__default.createElement(m, {
+    onMove: function onMove(e) {
+      n({
+        h: 360 * e.left
+      });
+    },
+    onKey: function onKey(e) {
+      n({
+        h: s(t + 360 * e.left, 0, 360)
+      });
+    },
+    "aria-label": "Hue",
+    "aria-valuetext": b(t)
+  }, React__default.createElement(p, {
+    className: "react-colorful__hue-pointer",
+    left: t / 360,
+    color: w({
+      h: t,
+      s: 100,
+      v: 100,
+      a: 1
+    })
+  })));
+}),
+    L = React__default.memo(function (r) {
+  var t = r.hsva,
+      n = r.onChange,
+      o = {
+    backgroundColor: w({
+      h: t.h,
+      s: 100,
+      v: 100,
+      a: 1
+    })
+  };
+  return React__default.createElement("div", {
+    className: "react-colorful__saturation",
+    style: o
+  }, React__default.createElement(m, {
+    onMove: function onMove(e) {
+      n({
+        s: 100 * e.left,
+        v: 100 - 100 * e.top
+      });
+    },
+    onKey: function onKey(e) {
+      n({
+        s: s(t.s + 100 * e.left, 0, 100),
+        v: s(t.v - 100 * e.top, 0, 100)
+      });
+    },
+    "aria-label": "Color",
+    "aria-valuetext": "Saturation " + b(t.s) + "%, Brightness " + b(t.v) + "%"
+  }, React__default.createElement(p, {
+    className: "react-colorful__saturation-pointer",
+    top: 1 - t.v / 100,
+    left: t.s / 100,
+    color: w(t)
+  })));
+}),
+    A = function A(e, r) {
+  if (e === r) return !0;
+
+  for (var t in e) {
+    if (e[t] !== r[t]) return !1;
+  }
+
+  return !0;
+},
+    S = function S(e, r) {
+  return e.replace(/\s/g, "") === r.replace(/\s/g, "");
+};
+
+function T(e, t, l) {
+  var u = i(l),
+      c = useState(function () {
+    return e.toHsva(t);
+  }),
+      s = c[0],
+      f = c[1],
+      v = useRef({
+    color: t,
+    hsva: s
+  });
+  useEffect(function () {
+    if (!e.equal(t, v.current.color)) {
+      var r = e.toHsva(t);
+      v.current = {
+        hsva: r,
+        color: t
+      }, f(r);
+    }
+  }, [t, e]), useEffect(function () {
+    var r;
+    A(s, v.current.hsva) || e.equal(r = e.fromHsva(s), v.current.color) || (v.current = {
+      hsva: s,
+      color: r
+    }, u(r));
+  }, [s, e, u]);
+  var d = useCallback(function (e) {
+    f(function (r) {
+      return Object.assign({}, r, e);
+    });
+  }, []);
+  return [s, d];
+}
+
+var P = "undefined" != typeof window ? useLayoutEffect : useEffect,
+    X = function X() {
+  return "undefined" != typeof __webpack_nonce__ ? __webpack_nonce__ : void 0;
+},
+    R = new Map(),
+    V = function V(e) {
+  P(function () {
+    var r = e.current ? e.current.ownerDocument : document;
+
+    if (void 0 !== r && !R.has(r)) {
+      var t = r.createElement("style");
+      t.innerHTML = '.react-colorful{position:relative;display:flex;flex-direction:column;width:200px;height:200px;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;cursor:default}.react-colorful__saturation{position:relative;flex-grow:1;border-color:transparent;border-bottom:12px solid #000;border-radius:8px 8px 0 0;background-image:linear-gradient(0deg,#000,transparent),linear-gradient(90deg,#fff,hsla(0,0%,100%,0))}.react-colorful__alpha-gradient,.react-colorful__pointer-fill{content:"";position:absolute;left:0;top:0;right:0;bottom:0;pointer-events:none;border-radius:inherit}.react-colorful__alpha-gradient,.react-colorful__saturation{box-shadow:inset 0 0 0 1px rgba(0,0,0,.05)}.react-colorful__alpha,.react-colorful__hue{position:relative;height:24px}.react-colorful__hue{background:linear-gradient(90deg,red 0,#ff0 17%,#0f0 33%,#0ff 50%,#00f 67%,#f0f 83%,red)}.react-colorful__last-control{border-radius:0 0 8px 8px}.react-colorful__interactive{position:absolute;left:0;top:0;right:0;bottom:0;border-radius:inherit;outline:none;touch-action:none}.react-colorful__pointer{position:absolute;z-index:1;box-sizing:border-box;width:28px;height:28px;transform:translate(-50%,-50%);background-color:#fff;border:2px solid #fff;border-radius:50%;box-shadow:0 2px 4px rgba(0,0,0,.2)}.react-colorful__interactive:focus .react-colorful__pointer{transform:translate(-50%,-50%) scale(1.1)}.react-colorful__alpha,.react-colorful__alpha-pointer{background-color:#fff;background-image:url(\'data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill-opacity=".05"><path d="M8 0h8v8H8zM0 8h8v8H0z"/></svg>\')}.react-colorful__saturation-pointer{z-index:3}.react-colorful__hue-pointer{z-index:2}', R.set(r, t);
+      var n = X();
+      n && t.setAttribute("nonce", n), r.head.appendChild(t);
+    }
+  }, []);
+},
+    $ = function $(t) {
+  var n = t.className,
+      o = t.colorModel,
+      a = t.color,
+      l = void 0 === a ? o.defaultColor : a,
+      i = t.onChange,
+      s = c(t, ["className", "colorModel", "color", "onChange"]),
+      f = useRef(null);
+  V(f);
+  var v = T(o, l, i),
+      d = v[0],
+      h = v[1],
+      m = g(["react-colorful", n]);
+  return React__default.createElement("div", u({}, s, {
+    ref: f,
+    className: m
+  }), React__default.createElement(L, {
+    hsva: d,
+    onChange: h
+  }), React__default.createElement(K, {
+    hue: d.h,
+    onChange: h,
+    className: "react-colorful__last-control"
+  }));
+},
+    G = {
+  defaultColor: "000",
+  toHsva: function toHsva(e) {
+    return B(x(e));
+  },
+  fromHsva: function fromHsva(e) {
+    return t = (r = q(e)).g, n = r.b, "#" + z(r.r) + z(t) + z(n);
+    var r, t, n;
+  },
+  equal: function equal(e, r) {
+    return e.toLowerCase() === r.toLowerCase() || A(x(e), x(r));
+  }
+},
+    J = function J(r) {
+  return React__default.createElement($, u({}, r, {
+    colorModel: G
+  }));
+},
+    Q = function Q(r) {
+  var t = r.className,
+      n = r.hsva,
+      o = r.onChange,
+      a = {
+    backgroundImage: "linear-gradient(90deg, " + y(Object.assign({}, n, {
+      a: 0
+    })) + ", " + y(Object.assign({}, n, {
+      a: 1
+    })) + ")"
+  },
+      l = g(["react-colorful__alpha", t]);
+  return React__default.createElement("div", {
+    className: l
+  }, React__default.createElement("div", {
+    className: "react-colorful__alpha-gradient",
+    style: a
+  }), React__default.createElement(m, {
+    onMove: function onMove(e) {
+      o({
+        a: e.left
+      });
+    },
+    onKey: function onKey(e) {
+      o({
+        a: s(n.a + e.left)
+      });
+    },
+    "aria-label": "Alpha",
+    "aria-valuetext": b(100 * n.a) + "%"
+  }, React__default.createElement(p, {
+    className: "react-colorful__alpha-pointer",
+    left: n.a,
+    color: y(n)
+  })));
+},
+    U = function U(t) {
+  var n = t.className,
+      o = t.colorModel,
+      a = t.color,
+      l = void 0 === a ? o.defaultColor : a,
+      i = t.onChange,
+      s = c(t, ["className", "colorModel", "color", "onChange"]),
+      f = useRef(null);
+  V(f);
+  var v = T(o, l, i),
+      d = v[0],
+      h = v[1],
+      m = g(["react-colorful", n]);
+  return React__default.createElement("div", u({}, s, {
+    ref: f,
+    className: m
+  }), React__default.createElement(L, {
+    hsva: d,
+    onChange: h
+  }), React__default.createElement(K, {
+    hue: d.h,
+    onChange: h
+  }), React__default.createElement(Q, {
+    hsva: d,
+    onChange: h,
+    className: "react-colorful__last-control"
+  }));
+},
+    ee = {
+  defaultColor: "hsla(0, 0%, 0%, 1)",
+  toHsva: E,
+  fromHsva: y,
+  equal: S
+},
+    re = function re(r) {
+  return React__default.createElement(U, u({}, r, {
+    colorModel: ee
+  }));
+},
+    ge = {
+  defaultColor: "rgba(0, 0, 0, 1)",
+  toHsva: I,
+  fromHsva: function fromHsva(e) {
+    var r = q(e);
+    return "rgba(" + r.r + ", " + r.g + ", " + r.b + ", " + r.a + ")";
+  },
+  equal: S
+},
+    pe = function pe(r) {
+  return React__default.createElement(U, u({}, r, {
+    colorModel: ge
+  }));
+};
+
+var colorName = {
+  "aliceblue": [240, 248, 255],
+  "antiquewhite": [250, 235, 215],
+  "aqua": [0, 255, 255],
+  "aquamarine": [127, 255, 212],
+  "azure": [240, 255, 255],
+  "beige": [245, 245, 220],
+  "bisque": [255, 228, 196],
+  "black": [0, 0, 0],
+  "blanchedalmond": [255, 235, 205],
+  "blue": [0, 0, 255],
+  "blueviolet": [138, 43, 226],
+  "brown": [165, 42, 42],
+  "burlywood": [222, 184, 135],
+  "cadetblue": [95, 158, 160],
+  "chartreuse": [127, 255, 0],
+  "chocolate": [210, 105, 30],
+  "coral": [255, 127, 80],
+  "cornflowerblue": [100, 149, 237],
+  "cornsilk": [255, 248, 220],
+  "crimson": [220, 20, 60],
+  "cyan": [0, 255, 255],
+  "darkblue": [0, 0, 139],
+  "darkcyan": [0, 139, 139],
+  "darkgoldenrod": [184, 134, 11],
+  "darkgray": [169, 169, 169],
+  "darkgreen": [0, 100, 0],
+  "darkgrey": [169, 169, 169],
+  "darkkhaki": [189, 183, 107],
+  "darkmagenta": [139, 0, 139],
+  "darkolivegreen": [85, 107, 47],
+  "darkorange": [255, 140, 0],
+  "darkorchid": [153, 50, 204],
+  "darkred": [139, 0, 0],
+  "darksalmon": [233, 150, 122],
+  "darkseagreen": [143, 188, 143],
+  "darkslateblue": [72, 61, 139],
+  "darkslategray": [47, 79, 79],
+  "darkslategrey": [47, 79, 79],
+  "darkturquoise": [0, 206, 209],
+  "darkviolet": [148, 0, 211],
+  "deeppink": [255, 20, 147],
+  "deepskyblue": [0, 191, 255],
+  "dimgray": [105, 105, 105],
+  "dimgrey": [105, 105, 105],
+  "dodgerblue": [30, 144, 255],
+  "firebrick": [178, 34, 34],
+  "floralwhite": [255, 250, 240],
+  "forestgreen": [34, 139, 34],
+  "fuchsia": [255, 0, 255],
+  "gainsboro": [220, 220, 220],
+  "ghostwhite": [248, 248, 255],
+  "gold": [255, 215, 0],
+  "goldenrod": [218, 165, 32],
+  "gray": [128, 128, 128],
+  "green": [0, 128, 0],
+  "greenyellow": [173, 255, 47],
+  "grey": [128, 128, 128],
+  "honeydew": [240, 255, 240],
+  "hotpink": [255, 105, 180],
+  "indianred": [205, 92, 92],
+  "indigo": [75, 0, 130],
+  "ivory": [255, 255, 240],
+  "khaki": [240, 230, 140],
+  "lavender": [230, 230, 250],
+  "lavenderblush": [255, 240, 245],
+  "lawngreen": [124, 252, 0],
+  "lemonchiffon": [255, 250, 205],
+  "lightblue": [173, 216, 230],
+  "lightcoral": [240, 128, 128],
+  "lightcyan": [224, 255, 255],
+  "lightgoldenrodyellow": [250, 250, 210],
+  "lightgray": [211, 211, 211],
+  "lightgreen": [144, 238, 144],
+  "lightgrey": [211, 211, 211],
+  "lightpink": [255, 182, 193],
+  "lightsalmon": [255, 160, 122],
+  "lightseagreen": [32, 178, 170],
+  "lightskyblue": [135, 206, 250],
+  "lightslategray": [119, 136, 153],
+  "lightslategrey": [119, 136, 153],
+  "lightsteelblue": [176, 196, 222],
+  "lightyellow": [255, 255, 224],
+  "lime": [0, 255, 0],
+  "limegreen": [50, 205, 50],
+  "linen": [250, 240, 230],
+  "magenta": [255, 0, 255],
+  "maroon": [128, 0, 0],
+  "mediumaquamarine": [102, 205, 170],
+  "mediumblue": [0, 0, 205],
+  "mediumorchid": [186, 85, 211],
+  "mediumpurple": [147, 112, 219],
+  "mediumseagreen": [60, 179, 113],
+  "mediumslateblue": [123, 104, 238],
+  "mediumspringgreen": [0, 250, 154],
+  "mediumturquoise": [72, 209, 204],
+  "mediumvioletred": [199, 21, 133],
+  "midnightblue": [25, 25, 112],
+  "mintcream": [245, 255, 250],
+  "mistyrose": [255, 228, 225],
+  "moccasin": [255, 228, 181],
+  "navajowhite": [255, 222, 173],
+  "navy": [0, 0, 128],
+  "oldlace": [253, 245, 230],
+  "olive": [128, 128, 0],
+  "olivedrab": [107, 142, 35],
+  "orange": [255, 165, 0],
+  "orangered": [255, 69, 0],
+  "orchid": [218, 112, 214],
+  "palegoldenrod": [238, 232, 170],
+  "palegreen": [152, 251, 152],
+  "paleturquoise": [175, 238, 238],
+  "palevioletred": [219, 112, 147],
+  "papayawhip": [255, 239, 213],
+  "peachpuff": [255, 218, 185],
+  "peru": [205, 133, 63],
+  "pink": [255, 192, 203],
+  "plum": [221, 160, 221],
+  "powderblue": [176, 224, 230],
+  "purple": [128, 0, 128],
+  "rebeccapurple": [102, 51, 153],
+  "red": [255, 0, 0],
+  "rosybrown": [188, 143, 143],
+  "royalblue": [65, 105, 225],
+  "saddlebrown": [139, 69, 19],
+  "salmon": [250, 128, 114],
+  "sandybrown": [244, 164, 96],
+  "seagreen": [46, 139, 87],
+  "seashell": [255, 245, 238],
+  "sienna": [160, 82, 45],
+  "silver": [192, 192, 192],
+  "skyblue": [135, 206, 235],
+  "slateblue": [106, 90, 205],
+  "slategray": [112, 128, 144],
+  "slategrey": [112, 128, 144],
+  "snow": [255, 250, 250],
+  "springgreen": [0, 255, 127],
+  "steelblue": [70, 130, 180],
+  "tan": [210, 180, 140],
+  "teal": [0, 128, 128],
+  "thistle": [216, 191, 216],
+  "tomato": [255, 99, 71],
+  "turquoise": [64, 224, 208],
+  "violet": [238, 130, 238],
+  "wheat": [245, 222, 179],
+  "white": [255, 255, 255],
+  "whitesmoke": [245, 245, 245],
+  "yellow": [255, 255, 0],
+  "yellowgreen": [154, 205, 50]
+};
+/* MIT license */
+
+/* eslint-disable no-mixed-operators */
+
+var cssKeywords = colorName; // NOTE: conversions should only return primitive values (i.e. arrays, or
+//       values that give correct `typeof` results).
+//       do not use box values types (i.e. Number(), String(), etc.)
+
+var reverseKeywords = {};
+
+for (var _i = 0, _Object$keys = Object.keys(cssKeywords); _i < _Object$keys.length; _i++) {
+  var key = _Object$keys[_i];
+  reverseKeywords[cssKeywords[key]] = key;
+}
+
+var convert$1 = {
+  rgb: {
+    channels: 3,
+    labels: 'rgb'
+  },
+  hsl: {
+    channels: 3,
+    labels: 'hsl'
+  },
+  hsv: {
+    channels: 3,
+    labels: 'hsv'
+  },
+  hwb: {
+    channels: 3,
+    labels: 'hwb'
+  },
+  cmyk: {
+    channels: 4,
+    labels: 'cmyk'
+  },
+  xyz: {
+    channels: 3,
+    labels: 'xyz'
+  },
+  lab: {
+    channels: 3,
+    labels: 'lab'
+  },
+  lch: {
+    channels: 3,
+    labels: 'lch'
+  },
+  hex: {
+    channels: 1,
+    labels: ['hex']
+  },
+  keyword: {
+    channels: 1,
+    labels: ['keyword']
+  },
+  ansi16: {
+    channels: 1,
+    labels: ['ansi16']
+  },
+  ansi256: {
+    channels: 1,
+    labels: ['ansi256']
+  },
+  hcg: {
+    channels: 3,
+    labels: ['h', 'c', 'g']
+  },
+  apple: {
+    channels: 3,
+    labels: ['r16', 'g16', 'b16']
+  },
+  gray: {
+    channels: 1,
+    labels: ['gray']
+  }
+};
+var conversions$2 = convert$1; // Hide .channels and .labels properties
+
+for (var _i2 = 0, _Object$keys2 = Object.keys(convert$1); _i2 < _Object$keys2.length; _i2++) {
+  var model = _Object$keys2[_i2];
+
+  if (!('channels' in convert$1[model])) {
+    throw new Error('missing channels property: ' + model);
+  }
+
+  if (!('labels' in convert$1[model])) {
+    throw new Error('missing channel labels property: ' + model);
+  }
+
+  if (convert$1[model].labels.length !== convert$1[model].channels) {
+    throw new Error('channel and label counts mismatch: ' + model);
+  }
+
+  var _convert$1$model = convert$1[model],
+      channels = _convert$1$model.channels,
+      labels = _convert$1$model.labels;
+  delete convert$1[model].channels;
+  delete convert$1[model].labels;
+  Object.defineProperty(convert$1[model], 'channels', {
+    value: channels
+  });
+  Object.defineProperty(convert$1[model], 'labels', {
+    value: labels
+  });
+}
+
+convert$1.rgb.hsl = function (rgb) {
+  var r = rgb[0] / 255;
+  var g = rgb[1] / 255;
+  var b = rgb[2] / 255;
+  var min = Math.min(r, g, b);
+  var max = Math.max(r, g, b);
+  var delta = max - min;
+  var h;
+  var s;
+
+  if (max === min) {
+    h = 0;
+  } else if (r === max) {
+    h = (g - b) / delta;
+  } else if (g === max) {
+    h = 2 + (b - r) / delta;
+  } else if (b === max) {
+    h = 4 + (r - g) / delta;
+  }
+
+  h = Math.min(h * 60, 360);
+
+  if (h < 0) {
+    h += 360;
+  }
+
+  var l = (min + max) / 2;
+
+  if (max === min) {
+    s = 0;
+  } else if (l <= 0.5) {
+    s = delta / (max + min);
+  } else {
+    s = delta / (2 - max - min);
+  }
+
+  return [h, s * 100, l * 100];
+};
+
+convert$1.rgb.hsv = function (rgb) {
+  var rdif;
+  var gdif;
+  var bdif;
+  var h;
+  var s;
+  var r = rgb[0] / 255;
+  var g = rgb[1] / 255;
+  var b = rgb[2] / 255;
+  var v = Math.max(r, g, b);
+  var diff = v - Math.min(r, g, b);
+
+  var diffc = function diffc(c) {
+    return (v - c) / 6 / diff + 1 / 2;
+  };
+
+  if (diff === 0) {
+    h = 0;
+    s = 0;
+  } else {
+    s = diff / v;
+    rdif = diffc(r);
+    gdif = diffc(g);
+    bdif = diffc(b);
+
+    if (r === v) {
+      h = bdif - gdif;
+    } else if (g === v) {
+      h = 1 / 3 + rdif - bdif;
+    } else if (b === v) {
+      h = 2 / 3 + gdif - rdif;
+    }
+
+    if (h < 0) {
+      h += 1;
+    } else if (h > 1) {
+      h -= 1;
+    }
+  }
+
+  return [h * 360, s * 100, v * 100];
+};
+
+convert$1.rgb.hwb = function (rgb) {
+  var r = rgb[0];
+  var g = rgb[1];
+  var b = rgb[2];
+  var h = convert$1.rgb.hsl(rgb)[0];
+  var w = 1 / 255 * Math.min(r, Math.min(g, b));
+  b = 1 - 1 / 255 * Math.max(r, Math.max(g, b));
+  return [h, w * 100, b * 100];
+};
+
+convert$1.rgb.cmyk = function (rgb) {
+  var r = rgb[0] / 255;
+  var g = rgb[1] / 255;
+  var b = rgb[2] / 255;
+  var k = Math.min(1 - r, 1 - g, 1 - b);
+  var c = (1 - r - k) / (1 - k) || 0;
+  var m = (1 - g - k) / (1 - k) || 0;
+  var y = (1 - b - k) / (1 - k) || 0;
+  return [c * 100, m * 100, y * 100, k * 100];
+};
+
+function comparativeDistance(x, y) {
+  /*
+  	See https://en.m.wikipedia.org/wiki/Euclidean_distance#Squared_Euclidean_distance
+  */
+  return Math.pow(x[0] - y[0], 2) + Math.pow(x[1] - y[1], 2) + Math.pow(x[2] - y[2], 2);
+}
+
+convert$1.rgb.keyword = function (rgb) {
+  var reversed = reverseKeywords[rgb];
+
+  if (reversed) {
+    return reversed;
+  }
+
+  var currentClosestDistance = Infinity;
+  var currentClosestKeyword;
+
+  for (var _i3 = 0, _Object$keys3 = Object.keys(cssKeywords); _i3 < _Object$keys3.length; _i3++) {
+    var keyword = _Object$keys3[_i3];
+    var value = cssKeywords[keyword]; // Compute comparative distance
+
+    var distance = comparativeDistance(rgb, value); // Check if its less, if so set as closest
+
+    if (distance < currentClosestDistance) {
+      currentClosestDistance = distance;
+      currentClosestKeyword = keyword;
+    }
+  }
+
+  return currentClosestKeyword;
+};
+
+convert$1.keyword.rgb = function (keyword) {
+  return cssKeywords[keyword];
+};
+
+convert$1.rgb.xyz = function (rgb) {
+  var r = rgb[0] / 255;
+  var g = rgb[1] / 255;
+  var b = rgb[2] / 255; // Assume sRGB
+
+  r = r > 0.04045 ? Math.pow((r + 0.055) / 1.055, 2.4) : r / 12.92;
+  g = g > 0.04045 ? Math.pow((g + 0.055) / 1.055, 2.4) : g / 12.92;
+  b = b > 0.04045 ? Math.pow((b + 0.055) / 1.055, 2.4) : b / 12.92;
+  var x = r * 0.4124 + g * 0.3576 + b * 0.1805;
+  var y = r * 0.2126 + g * 0.7152 + b * 0.0722;
+  var z = r * 0.0193 + g * 0.1192 + b * 0.9505;
+  return [x * 100, y * 100, z * 100];
+};
+
+convert$1.rgb.lab = function (rgb) {
+  var xyz = convert$1.rgb.xyz(rgb);
+  var x = xyz[0];
+  var y = xyz[1];
+  var z = xyz[2];
+  x /= 95.047;
+  y /= 100;
+  z /= 108.883;
+  x = x > 0.008856 ? Math.pow(x, 1 / 3) : 7.787 * x + 16 / 116;
+  y = y > 0.008856 ? Math.pow(y, 1 / 3) : 7.787 * y + 16 / 116;
+  z = z > 0.008856 ? Math.pow(z, 1 / 3) : 7.787 * z + 16 / 116;
+  var l = 116 * y - 16;
+  var a = 500 * (x - y);
+  var b = 200 * (y - z);
+  return [l, a, b];
+};
+
+convert$1.hsl.rgb = function (hsl) {
+  var h = hsl[0] / 360;
+  var s = hsl[1] / 100;
+  var l = hsl[2] / 100;
+  var t2;
+  var t3;
+  var val;
+
+  if (s === 0) {
+    val = l * 255;
+    return [val, val, val];
+  }
+
+  if (l < 0.5) {
+    t2 = l * (1 + s);
+  } else {
+    t2 = l + s - l * s;
+  }
+
+  var t1 = 2 * l - t2;
+  var rgb = [0, 0, 0];
+
+  for (var _i4 = 0; _i4 < 3; _i4++) {
+    t3 = h + 1 / 3 * -(_i4 - 1);
+
+    if (t3 < 0) {
+      t3++;
+    }
+
+    if (t3 > 1) {
+      t3--;
+    }
+
+    if (6 * t3 < 1) {
+      val = t1 + (t2 - t1) * 6 * t3;
+    } else if (2 * t3 < 1) {
+      val = t2;
+    } else if (3 * t3 < 2) {
+      val = t1 + (t2 - t1) * (2 / 3 - t3) * 6;
+    } else {
+      val = t1;
+    }
+
+    rgb[_i4] = val * 255;
+  }
+
+  return rgb;
+};
+
+convert$1.hsl.hsv = function (hsl) {
+  var h = hsl[0];
+  var s = hsl[1] / 100;
+  var l = hsl[2] / 100;
+  var smin = s;
+  var lmin = Math.max(l, 0.01);
+  l *= 2;
+  s *= l <= 1 ? l : 2 - l;
+  smin *= lmin <= 1 ? lmin : 2 - lmin;
+  var v = (l + s) / 2;
+  var sv = l === 0 ? 2 * smin / (lmin + smin) : 2 * s / (l + s);
+  return [h, sv * 100, v * 100];
+};
+
+convert$1.hsv.rgb = function (hsv) {
+  var h = hsv[0] / 60;
+  var s = hsv[1] / 100;
+  var v = hsv[2] / 100;
+  var hi = Math.floor(h) % 6;
+  var f = h - Math.floor(h);
+  var p = 255 * v * (1 - s);
+  var q = 255 * v * (1 - s * f);
+  var t = 255 * v * (1 - s * (1 - f));
+  v *= 255;
+
+  switch (hi) {
+    case 0:
+      return [v, t, p];
+
+    case 1:
+      return [q, v, p];
+
+    case 2:
+      return [p, v, t];
+
+    case 3:
+      return [p, q, v];
+
+    case 4:
+      return [t, p, v];
+
+    case 5:
+      return [v, p, q];
+  }
+};
+
+convert$1.hsv.hsl = function (hsv) {
+  var h = hsv[0];
+  var s = hsv[1] / 100;
+  var v = hsv[2] / 100;
+  var vmin = Math.max(v, 0.01);
+  var sl;
+  var l;
+  l = (2 - s) * v;
+  var lmin = (2 - s) * vmin;
+  sl = s * vmin;
+  sl /= lmin <= 1 ? lmin : 2 - lmin;
+  sl = sl || 0;
+  l /= 2;
+  return [h, sl * 100, l * 100];
+}; // http://dev.w3.org/csswg/css-color/#hwb-to-rgb
+
+
+convert$1.hwb.rgb = function (hwb) {
+  var h = hwb[0] / 360;
+  var wh = hwb[1] / 100;
+  var bl = hwb[2] / 100;
+  var ratio = wh + bl;
+  var f; // Wh + bl cant be > 1
+
+  if (ratio > 1) {
+    wh /= ratio;
+    bl /= ratio;
+  }
+
+  var i = Math.floor(6 * h);
+  var v = 1 - bl;
+  f = 6 * h - i;
+
+  if ((i & 0x01) !== 0) {
+    f = 1 - f;
+  }
+
+  var n = wh + f * (v - wh); // Linear interpolation
+
+  var r;
+  var g;
+  var b;
+  /* eslint-disable max-statements-per-line,no-multi-spaces */
+
+  switch (i) {
+    default:
+    case 6:
+    case 0:
+      r = v;
+      g = n;
+      b = wh;
+      break;
+
+    case 1:
+      r = n;
+      g = v;
+      b = wh;
+      break;
+
+    case 2:
+      r = wh;
+      g = v;
+      b = n;
+      break;
+
+    case 3:
+      r = wh;
+      g = n;
+      b = v;
+      break;
+
+    case 4:
+      r = n;
+      g = wh;
+      b = v;
+      break;
+
+    case 5:
+      r = v;
+      g = wh;
+      b = n;
+      break;
+  }
+  /* eslint-enable max-statements-per-line,no-multi-spaces */
+
+
+  return [r * 255, g * 255, b * 255];
+};
+
+convert$1.cmyk.rgb = function (cmyk) {
+  var c = cmyk[0] / 100;
+  var m = cmyk[1] / 100;
+  var y = cmyk[2] / 100;
+  var k = cmyk[3] / 100;
+  var r = 1 - Math.min(1, c * (1 - k) + k);
+  var g = 1 - Math.min(1, m * (1 - k) + k);
+  var b = 1 - Math.min(1, y * (1 - k) + k);
+  return [r * 255, g * 255, b * 255];
+};
+
+convert$1.xyz.rgb = function (xyz) {
+  var x = xyz[0] / 100;
+  var y = xyz[1] / 100;
+  var z = xyz[2] / 100;
+  var r;
+  var g;
+  var b;
+  r = x * 3.2406 + y * -1.5372 + z * -0.4986;
+  g = x * -0.9689 + y * 1.8758 + z * 0.0415;
+  b = x * 0.0557 + y * -0.2040 + z * 1.0570; // Assume sRGB
+
+  r = r > 0.0031308 ? 1.055 * Math.pow(r, 1.0 / 2.4) - 0.055 : r * 12.92;
+  g = g > 0.0031308 ? 1.055 * Math.pow(g, 1.0 / 2.4) - 0.055 : g * 12.92;
+  b = b > 0.0031308 ? 1.055 * Math.pow(b, 1.0 / 2.4) - 0.055 : b * 12.92;
+  r = Math.min(Math.max(0, r), 1);
+  g = Math.min(Math.max(0, g), 1);
+  b = Math.min(Math.max(0, b), 1);
+  return [r * 255, g * 255, b * 255];
+};
+
+convert$1.xyz.lab = function (xyz) {
+  var x = xyz[0];
+  var y = xyz[1];
+  var z = xyz[2];
+  x /= 95.047;
+  y /= 100;
+  z /= 108.883;
+  x = x > 0.008856 ? Math.pow(x, 1 / 3) : 7.787 * x + 16 / 116;
+  y = y > 0.008856 ? Math.pow(y, 1 / 3) : 7.787 * y + 16 / 116;
+  z = z > 0.008856 ? Math.pow(z, 1 / 3) : 7.787 * z + 16 / 116;
+  var l = 116 * y - 16;
+  var a = 500 * (x - y);
+  var b = 200 * (y - z);
+  return [l, a, b];
+};
+
+convert$1.lab.xyz = function (lab) {
+  var l = lab[0];
+  var a = lab[1];
+  var b = lab[2];
+  var x;
+  var y;
+  var z;
+  y = (l + 16) / 116;
+  x = a / 500 + y;
+  z = y - b / 200;
+  var y2 = Math.pow(y, 3);
+  var x2 = Math.pow(x, 3);
+  var z2 = Math.pow(z, 3);
+  y = y2 > 0.008856 ? y2 : (y - 16 / 116) / 7.787;
+  x = x2 > 0.008856 ? x2 : (x - 16 / 116) / 7.787;
+  z = z2 > 0.008856 ? z2 : (z - 16 / 116) / 7.787;
+  x *= 95.047;
+  y *= 100;
+  z *= 108.883;
+  return [x, y, z];
+};
+
+convert$1.lab.lch = function (lab) {
+  var l = lab[0];
+  var a = lab[1];
+  var b = lab[2];
+  var h;
+  var hr = Math.atan2(b, a);
+  h = hr * 360 / 2 / Math.PI;
+
+  if (h < 0) {
+    h += 360;
+  }
+
+  var c = Math.sqrt(a * a + b * b);
+  return [l, c, h];
+};
+
+convert$1.lch.lab = function (lch) {
+  var l = lch[0];
+  var c = lch[1];
+  var h = lch[2];
+  var hr = h / 360 * 2 * Math.PI;
+  var a = c * Math.cos(hr);
+  var b = c * Math.sin(hr);
+  return [l, a, b];
+};
+
+convert$1.rgb.ansi16 = function (args) {
+  var saturation = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : null;
+
+  var _args = _slicedToArray(args, 3),
+      r = _args[0],
+      g = _args[1],
+      b = _args[2];
+
+  var value = saturation === null ? convert$1.rgb.hsv(args)[2] : saturation; // Hsv -> ansi16 optimization
+
+  value = Math.round(value / 50);
+
+  if (value === 0) {
+    return 30;
+  }
+
+  var ansi = 30 + (Math.round(b / 255) << 2 | Math.round(g / 255) << 1 | Math.round(r / 255));
+
+  if (value === 2) {
+    ansi += 60;
+  }
+
+  return ansi;
+};
+
+convert$1.hsv.ansi16 = function (args) {
+  // Optimization here; we already know the value and don't need to get
+  // it converted for us.
+  return convert$1.rgb.ansi16(convert$1.hsv.rgb(args), args[2]);
+};
+
+convert$1.rgb.ansi256 = function (args) {
+  var r = args[0];
+  var g = args[1];
+  var b = args[2]; // We use the extended greyscale palette here, with the exception of
+  // black and white. normal palette only has 4 greyscale shades.
+
+  if (r === g && g === b) {
+    if (r < 8) {
+      return 16;
+    }
+
+    if (r > 248) {
+      return 231;
+    }
+
+    return Math.round((r - 8) / 247 * 24) + 232;
+  }
+
+  var ansi = 16 + 36 * Math.round(r / 255 * 5) + 6 * Math.round(g / 255 * 5) + Math.round(b / 255 * 5);
+  return ansi;
+};
+
+convert$1.ansi16.rgb = function (args) {
+  var color = args % 10; // Handle greyscale
+
+  if (color === 0 || color === 7) {
+    if (args > 50) {
+      color += 3.5;
+    }
+
+    color = color / 10.5 * 255;
+    return [color, color, color];
+  }
+
+  var mult = (~~(args > 50) + 1) * 0.5;
+  var r = (color & 1) * mult * 255;
+  var g = (color >> 1 & 1) * mult * 255;
+  var b = (color >> 2 & 1) * mult * 255;
+  return [r, g, b];
+};
+
+convert$1.ansi256.rgb = function (args) {
+  // Handle greyscale
+  if (args >= 232) {
+    var _c = (args - 232) * 10 + 8;
+
+    return [_c, _c, _c];
+  }
+
+  args -= 16;
+  var rem;
+  var r = Math.floor(args / 36) / 5 * 255;
+  var g = Math.floor((rem = args % 36) / 6) / 5 * 255;
+  var b = rem % 6 / 5 * 255;
+  return [r, g, b];
+};
+
+convert$1.rgb.hex = function (args) {
+  var integer = ((Math.round(args[0]) & 0xFF) << 16) + ((Math.round(args[1]) & 0xFF) << 8) + (Math.round(args[2]) & 0xFF);
+  var string = integer.toString(16).toUpperCase();
+  return '000000'.substring(string.length) + string;
+};
+
+convert$1.hex.rgb = function (args) {
+  var match = args.toString(16).match(/[a-f0-9]{6}|[a-f0-9]{3}/i);
+
+  if (!match) {
+    return [0, 0, 0];
+  }
+
+  var colorString = match[0];
+
+  if (match[0].length === 3) {
+    colorString = colorString.split('').map(function (char) {
+      return char + char;
+    }).join('');
+  }
+
+  var integer = parseInt(colorString, 16);
+  var r = integer >> 16 & 0xFF;
+  var g = integer >> 8 & 0xFF;
+  var b = integer & 0xFF;
+  return [r, g, b];
+};
+
+convert$1.rgb.hcg = function (rgb) {
+  var r = rgb[0] / 255;
+  var g = rgb[1] / 255;
+  var b = rgb[2] / 255;
+  var max = Math.max(Math.max(r, g), b);
+  var min = Math.min(Math.min(r, g), b);
+  var chroma = max - min;
+  var grayscale;
+  var hue;
+
+  if (chroma < 1) {
+    grayscale = min / (1 - chroma);
+  } else {
+    grayscale = 0;
+  }
+
+  if (chroma <= 0) {
+    hue = 0;
+  } else if (max === r) {
+    hue = (g - b) / chroma % 6;
+  } else if (max === g) {
+    hue = 2 + (b - r) / chroma;
+  } else {
+    hue = 4 + (r - g) / chroma;
+  }
+
+  hue /= 6;
+  hue %= 1;
+  return [hue * 360, chroma * 100, grayscale * 100];
+};
+
+convert$1.hsl.hcg = function (hsl) {
+  var s = hsl[1] / 100;
+  var l = hsl[2] / 100;
+  var c = l < 0.5 ? 2.0 * s * l : 2.0 * s * (1.0 - l);
+  var f = 0;
+
+  if (c < 1.0) {
+    f = (l - 0.5 * c) / (1.0 - c);
+  }
+
+  return [hsl[0], c * 100, f * 100];
+};
+
+convert$1.hsv.hcg = function (hsv) {
+  var s = hsv[1] / 100;
+  var v = hsv[2] / 100;
+  var c = s * v;
+  var f = 0;
+
+  if (c < 1.0) {
+    f = (v - c) / (1 - c);
+  }
+
+  return [hsv[0], c * 100, f * 100];
+};
+
+convert$1.hcg.rgb = function (hcg) {
+  var h = hcg[0] / 360;
+  var c = hcg[1] / 100;
+  var g = hcg[2] / 100;
+
+  if (c === 0.0) {
+    return [g * 255, g * 255, g * 255];
+  }
+
+  var pure = [0, 0, 0];
+  var hi = h % 1 * 6;
+  var v = hi % 1;
+  var w = 1 - v;
+  var mg = 0;
+  /* eslint-disable max-statements-per-line */
+
+  switch (Math.floor(hi)) {
+    case 0:
+      pure[0] = 1;
+      pure[1] = v;
+      pure[2] = 0;
+      break;
+
+    case 1:
+      pure[0] = w;
+      pure[1] = 1;
+      pure[2] = 0;
+      break;
+
+    case 2:
+      pure[0] = 0;
+      pure[1] = 1;
+      pure[2] = v;
+      break;
+
+    case 3:
+      pure[0] = 0;
+      pure[1] = w;
+      pure[2] = 1;
+      break;
+
+    case 4:
+      pure[0] = v;
+      pure[1] = 0;
+      pure[2] = 1;
+      break;
+
+    default:
+      pure[0] = 1;
+      pure[1] = 0;
+      pure[2] = w;
+  }
+  /* eslint-enable max-statements-per-line */
+
+
+  mg = (1.0 - c) * g;
+  return [(c * pure[0] + mg) * 255, (c * pure[1] + mg) * 255, (c * pure[2] + mg) * 255];
+};
+
+convert$1.hcg.hsv = function (hcg) {
+  var c = hcg[1] / 100;
+  var g = hcg[2] / 100;
+  var v = c + g * (1.0 - c);
+  var f = 0;
+
+  if (v > 0.0) {
+    f = c / v;
+  }
+
+  return [hcg[0], f * 100, v * 100];
+};
+
+convert$1.hcg.hsl = function (hcg) {
+  var c = hcg[1] / 100;
+  var g = hcg[2] / 100;
+  var l = g * (1.0 - c) + 0.5 * c;
+  var s = 0;
+
+  if (l > 0.0 && l < 0.5) {
+    s = c / (2 * l);
+  } else if (l >= 0.5 && l < 1.0) {
+    s = c / (2 * (1 - l));
+  }
+
+  return [hcg[0], s * 100, l * 100];
+};
+
+convert$1.hcg.hwb = function (hcg) {
+  var c = hcg[1] / 100;
+  var g = hcg[2] / 100;
+  var v = c + g * (1.0 - c);
+  return [hcg[0], (v - c) * 100, (1 - v) * 100];
+};
+
+convert$1.hwb.hcg = function (hwb) {
+  var w = hwb[1] / 100;
+  var b = hwb[2] / 100;
+  var v = 1 - b;
+  var c = v - w;
+  var g = 0;
+
+  if (c < 1) {
+    g = (v - c) / (1 - c);
+  }
+
+  return [hwb[0], c * 100, g * 100];
+};
+
+convert$1.apple.rgb = function (apple) {
+  return [apple[0] / 65535 * 255, apple[1] / 65535 * 255, apple[2] / 65535 * 255];
+};
+
+convert$1.rgb.apple = function (rgb) {
+  return [rgb[0] / 255 * 65535, rgb[1] / 255 * 65535, rgb[2] / 255 * 65535];
+};
+
+convert$1.gray.rgb = function (args) {
+  return [args[0] / 100 * 255, args[0] / 100 * 255, args[0] / 100 * 255];
+};
+
+convert$1.gray.hsl = function (args) {
+  return [0, 0, args[0]];
+};
+
+convert$1.gray.hsv = convert$1.gray.hsl;
+
+convert$1.gray.hwb = function (gray) {
+  return [0, 100, gray[0]];
+};
+
+convert$1.gray.cmyk = function (gray) {
+  return [0, 0, 0, gray[0]];
+};
+
+convert$1.gray.lab = function (gray) {
+  return [gray[0], 0, 0];
+};
+
+convert$1.gray.hex = function (gray) {
+  var val = Math.round(gray[0] / 100 * 255) & 0xFF;
+  var integer = (val << 16) + (val << 8) + val;
+  var string = integer.toString(16).toUpperCase();
+  return '000000'.substring(string.length) + string;
+};
+
+convert$1.rgb.gray = function (rgb) {
+  var val = (rgb[0] + rgb[1] + rgb[2]) / 3;
+  return [val / 255 * 100];
+};
+
+var conversions$1 = conversions$2;
+/*
+	This function routes a model to all other models.
+
+	all functions that are routed have a property `.conversion` attached
+	to the returned synthetic function. This property is an array
+	of strings, each with the steps in between the 'from' and 'to'
+	color models (inclusive).
+
+	conversions that are not possible simply are not included.
+*/
+
+function buildGraph() {
+  var graph = {}; // https://jsperf.com/object-keys-vs-for-in-with-closure/3
+
+  var models = Object.keys(conversions$1);
+
+  for (var len = models.length, _i5 = 0; _i5 < len; _i5++) {
+    graph[models[_i5]] = {
+      // http://jsperf.com/1-vs-infinity
+      // micro-opt, but this is simple.
+      distance: -1,
+      parent: null
+    };
+  }
+
+  return graph;
+} // https://en.wikipedia.org/wiki/Breadth-first_search
+
+
+function deriveBFS(fromModel) {
+  var graph = buildGraph();
+  var queue = [fromModel]; // Unshift -> queue -> pop
+
+  graph[fromModel].distance = 0;
+
+  while (queue.length) {
+    var current = queue.pop();
+    var adjacents = Object.keys(conversions$1[current]);
+
+    for (var len = adjacents.length, _i6 = 0; _i6 < len; _i6++) {
+      var adjacent = adjacents[_i6];
+      var node = graph[adjacent];
+
+      if (node.distance === -1) {
+        node.distance = graph[current].distance + 1;
+        node.parent = current;
+        queue.unshift(adjacent);
+      }
+    }
+  }
+
+  return graph;
+}
+
+function link(from, to) {
+  return function (args) {
+    return to(from(args));
+  };
+}
+
+function wrapConversion(toModel, graph) {
+  var path = [graph[toModel].parent, toModel];
+  var fn = conversions$1[graph[toModel].parent][toModel];
+  var cur = graph[toModel].parent;
+
+  while (graph[cur].parent) {
+    path.unshift(graph[cur].parent);
+    fn = link(conversions$1[graph[cur].parent][cur], fn);
+    cur = graph[cur].parent;
+  }
+
+  fn.conversion = path;
+  return fn;
+}
+
+var route$1 = function route$1(fromModel) {
+  var graph = deriveBFS(fromModel);
+  var conversion = {};
+  var models = Object.keys(graph);
+
+  for (var len = models.length, _i7 = 0; _i7 < len; _i7++) {
+    var toModel = models[_i7];
+    var node = graph[toModel];
+
+    if (node.parent === null) {
+      // No possible conversion, or this node is the source model.
+      continue;
+    }
+
+    conversion[toModel] = wrapConversion(toModel, graph);
+  }
+
+  return conversion;
+};
+
+var conversions = conversions$2;
+var route = route$1;
+var convert = {};
+var models = Object.keys(conversions);
+
+function wrapRaw(fn) {
+  var wrappedFn = function wrappedFn() {
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+
+    var arg0 = args[0];
+
+    if (arg0 === undefined || arg0 === null) {
+      return arg0;
+    }
+
+    if (arg0.length > 1) {
+      args = arg0;
+    }
+
+    return fn(args);
+  }; // Preserve .conversion property if there is one
+
+
+  if ('conversion' in fn) {
+    wrappedFn.conversion = fn.conversion;
+  }
+
+  return wrappedFn;
+}
+
+function wrapRounded(fn) {
+  var wrappedFn = function wrappedFn() {
+    for (var _len2 = arguments.length, args = new Array(_len2), _key2 = 0; _key2 < _len2; _key2++) {
+      args[_key2] = arguments[_key2];
+    }
+
+    var arg0 = args[0];
+
+    if (arg0 === undefined || arg0 === null) {
+      return arg0;
+    }
+
+    if (arg0.length > 1) {
+      args = arg0;
+    }
+
+    var result = fn(args); // We're assuming the result is an array here.
+    // see notice in conversions.js; don't use box types
+    // in conversion functions.
+
+    if (_typeof(result) === 'object') {
+      for (var len = result.length, _i8 = 0; _i8 < len; _i8++) {
+        result[_i8] = Math.round(result[_i8]);
+      }
+    }
+
+    return result;
+  }; // Preserve .conversion property if there is one
+
+
+  if ('conversion' in fn) {
+    wrappedFn.conversion = fn.conversion;
+  }
+
+  return wrappedFn;
+}
+
+models.forEach(function (fromModel) {
+  convert[fromModel] = {};
+  Object.defineProperty(convert[fromModel], 'channels', {
+    value: conversions[fromModel].channels
+  });
+  Object.defineProperty(convert[fromModel], 'labels', {
+    value: conversions[fromModel].labels
+  });
+  var routes = route(fromModel);
+  var routeModels = Object.keys(routes);
+  routeModels.forEach(function (toModel) {
+    var fn = routes[toModel];
+    convert[fromModel][toModel] = wrapRounded(fn);
+    convert[fromModel][toModel].raw = wrapRaw(fn);
+  });
+});
+var colorConvert = convert;
+var root = _root;
+/**
+ * Gets the timestamp of the number of milliseconds that have elapsed since
+ * the Unix epoch (1 January 1970 00:00:00 UTC).
+ *
+ * @static
+ * @memberOf _
+ * @since 2.4.0
+ * @category Date
+ * @returns {number} Returns the timestamp.
+ * @example
+ *
+ * _.defer(function(stamp) {
+ *   console.log(_.now() - stamp);
+ * }, _.now());
+ * // => Logs the number of milliseconds it took for the deferred invocation.
+ */
+
+var now$1 = function now$1() {
+  return root.Date.now();
+};
+
+var now_1 = now$1;
+/** Used to match a single whitespace character. */
+
+var reWhitespace = /\s/;
+/**
+ * Used by `_.trim` and `_.trimEnd` to get the index of the last non-whitespace
+ * character of `string`.
+ *
+ * @private
+ * @param {string} string The string to inspect.
+ * @returns {number} Returns the index of the last non-whitespace character.
+ */
+
+function trimmedEndIndex$1(string) {
+  var index = string.length;
+
+  while (index-- && reWhitespace.test(string.charAt(index))) {}
+
+  return index;
+}
+
+var _trimmedEndIndex = trimmedEndIndex$1;
+var trimmedEndIndex = _trimmedEndIndex;
+/** Used to match leading whitespace. */
+
+var reTrimStart = /^\s+/;
+/**
+ * The base implementation of `_.trim`.
+ *
+ * @private
+ * @param {string} string The string to trim.
+ * @returns {string} Returns the trimmed string.
+ */
+
+function baseTrim$1(string) {
+  return string ? string.slice(0, trimmedEndIndex(string) + 1).replace(reTrimStart, '') : string;
+}
+
+var _baseTrim = baseTrim$1;
+var baseTrim = _baseTrim,
+    isObject$2 = isObject_1,
+    isSymbol = isSymbol_1;
+/** Used as references for various `Number` constants. */
+
+var NAN = 0 / 0;
+/** Used to detect bad signed hexadecimal string values. */
+
+var reIsBadHex = /^[-+]0x[0-9a-f]+$/i;
+/** Used to detect binary string values. */
+
+var reIsBinary = /^0b[01]+$/i;
+/** Used to detect octal string values. */
+
+var reIsOctal = /^0o[0-7]+$/i;
+/** Built-in method references without a dependency on `root`. */
+
+var freeParseInt = parseInt;
+/**
+ * Converts `value` to a number.
+ *
+ * @static
+ * @memberOf _
+ * @since 4.0.0
+ * @category Lang
+ * @param {*} value The value to process.
+ * @returns {number} Returns the number.
+ * @example
+ *
+ * _.toNumber(3.2);
+ * // => 3.2
+ *
+ * _.toNumber(Number.MIN_VALUE);
+ * // => 5e-324
+ *
+ * _.toNumber(Infinity);
+ * // => Infinity
+ *
+ * _.toNumber('3.2');
+ * // => 3.2
+ */
+
+function toNumber$1(value) {
+  if (typeof value == 'number') {
+    return value;
+  }
+
+  if (isSymbol(value)) {
+    return NAN;
+  }
+
+  if (isObject$2(value)) {
+    var other = typeof value.valueOf == 'function' ? value.valueOf() : value;
+    value = isObject$2(other) ? other + '' : other;
+  }
+
+  if (typeof value != 'string') {
+    return value === 0 ? value : +value;
+  }
+
+  value = baseTrim(value);
+  var isBinary = reIsBinary.test(value);
+  return isBinary || reIsOctal.test(value) ? freeParseInt(value.slice(2), isBinary ? 2 : 8) : reIsBadHex.test(value) ? NAN : +value;
+}
+
+var toNumber_1 = toNumber$1;
+var isObject$1 = isObject_1,
+    now = now_1,
+    toNumber = toNumber_1;
+/** Error message constants. */
+
+var FUNC_ERROR_TEXT$1 = 'Expected a function';
+/* Built-in method references for those with the same name as other `lodash` methods. */
+
+var nativeMax = Math.max,
+    nativeMin = Math.min;
+/**
+ * Creates a debounced function that delays invoking `func` until after `wait`
+ * milliseconds have elapsed since the last time the debounced function was
+ * invoked. The debounced function comes with a `cancel` method to cancel
+ * delayed `func` invocations and a `flush` method to immediately invoke them.
+ * Provide `options` to indicate whether `func` should be invoked on the
+ * leading and/or trailing edge of the `wait` timeout. The `func` is invoked
+ * with the last arguments provided to the debounced function. Subsequent
+ * calls to the debounced function return the result of the last `func`
+ * invocation.
+ *
+ * **Note:** If `leading` and `trailing` options are `true`, `func` is
+ * invoked on the trailing edge of the timeout only if the debounced function
+ * is invoked more than once during the `wait` timeout.
+ *
+ * If `wait` is `0` and `leading` is `false`, `func` invocation is deferred
+ * until to the next tick, similar to `setTimeout` with a timeout of `0`.
+ *
+ * See [David Corbacho's article](https://css-tricks.com/debouncing-throttling-explained-examples/)
+ * for details over the differences between `_.debounce` and `_.throttle`.
+ *
+ * @static
+ * @memberOf _
+ * @since 0.1.0
+ * @category Function
+ * @param {Function} func The function to debounce.
+ * @param {number} [wait=0] The number of milliseconds to delay.
+ * @param {Object} [options={}] The options object.
+ * @param {boolean} [options.leading=false]
+ *  Specify invoking on the leading edge of the timeout.
+ * @param {number} [options.maxWait]
+ *  The maximum time `func` is allowed to be delayed before it's invoked.
+ * @param {boolean} [options.trailing=true]
+ *  Specify invoking on the trailing edge of the timeout.
+ * @returns {Function} Returns the new debounced function.
+ * @example
+ *
+ * // Avoid costly calculations while the window size is in flux.
+ * jQuery(window).on('resize', _.debounce(calculateLayout, 150));
+ *
+ * // Invoke `sendMail` when clicked, debouncing subsequent calls.
+ * jQuery(element).on('click', _.debounce(sendMail, 300, {
+ *   'leading': true,
+ *   'trailing': false
+ * }));
+ *
+ * // Ensure `batchLog` is invoked once after 1 second of debounced calls.
+ * var debounced = _.debounce(batchLog, 250, { 'maxWait': 1000 });
+ * var source = new EventSource('/stream');
+ * jQuery(source).on('message', debounced);
+ *
+ * // Cancel the trailing debounced invocation.
+ * jQuery(window).on('popstate', debounced.cancel);
+ */
+
+function debounce$1(func, wait, options) {
+  var lastArgs,
+      lastThis,
+      maxWait,
+      result,
+      timerId,
+      lastCallTime,
+      lastInvokeTime = 0,
+      leading = false,
+      maxing = false,
+      trailing = true;
+
+  if (typeof func != 'function') {
+    throw new TypeError(FUNC_ERROR_TEXT$1);
+  }
+
+  wait = toNumber(wait) || 0;
+
+  if (isObject$1(options)) {
+    leading = !!options.leading;
+    maxing = 'maxWait' in options;
+    maxWait = maxing ? nativeMax(toNumber(options.maxWait) || 0, wait) : maxWait;
+    trailing = 'trailing' in options ? !!options.trailing : trailing;
+  }
+
+  function invokeFunc(time) {
+    var args = lastArgs,
+        thisArg = lastThis;
+    lastArgs = lastThis = undefined;
+    lastInvokeTime = time;
+    result = func.apply(thisArg, args);
+    return result;
+  }
+
+  function leadingEdge(time) {
+    // Reset any `maxWait` timer.
+    lastInvokeTime = time; // Start the timer for the trailing edge.
+
+    timerId = setTimeout(timerExpired, wait); // Invoke the leading edge.
+
+    return leading ? invokeFunc(time) : result;
+  }
+
+  function remainingWait(time) {
+    var timeSinceLastCall = time - lastCallTime,
+        timeSinceLastInvoke = time - lastInvokeTime,
+        timeWaiting = wait - timeSinceLastCall;
+    return maxing ? nativeMin(timeWaiting, maxWait - timeSinceLastInvoke) : timeWaiting;
+  }
+
+  function shouldInvoke(time) {
+    var timeSinceLastCall = time - lastCallTime,
+        timeSinceLastInvoke = time - lastInvokeTime; // Either this is the first call, activity has stopped and we're at the
+    // trailing edge, the system time has gone backwards and we're treating
+    // it as the trailing edge, or we've hit the `maxWait` limit.
+
+    return lastCallTime === undefined || timeSinceLastCall >= wait || timeSinceLastCall < 0 || maxing && timeSinceLastInvoke >= maxWait;
+  }
+
+  function timerExpired() {
+    var time = now();
+
+    if (shouldInvoke(time)) {
+      return trailingEdge(time);
+    } // Restart the timer.
+
+
+    timerId = setTimeout(timerExpired, remainingWait(time));
+  }
+
+  function trailingEdge(time) {
+    timerId = undefined; // Only invoke if we have `lastArgs` which means `func` has been
+    // debounced at least once.
+
+    if (trailing && lastArgs) {
+      return invokeFunc(time);
+    }
+
+    lastArgs = lastThis = undefined;
+    return result;
+  }
+
+  function cancel() {
+    if (timerId !== undefined) {
+      clearTimeout(timerId);
+    }
+
+    lastInvokeTime = 0;
+    lastArgs = lastCallTime = lastThis = timerId = undefined;
+  }
+
+  function flush() {
+    return timerId === undefined ? result : trailingEdge(now());
+  }
+
+  function debounced() {
+    var time = now(),
+        isInvoking = shouldInvoke(time);
+    lastArgs = arguments;
+    lastThis = this;
+    lastCallTime = time;
+
+    if (isInvoking) {
+      if (timerId === undefined) {
+        return leadingEdge(lastCallTime);
+      }
+
+      if (maxing) {
+        // Handle invocations in a tight loop.
+        clearTimeout(timerId);
+        timerId = setTimeout(timerExpired, wait);
+        return invokeFunc(lastCallTime);
+      }
+    }
+
+    if (timerId === undefined) {
+      timerId = setTimeout(timerExpired, wait);
+    }
+
+    return result;
+  }
+
+  debounced.cancel = cancel;
+  debounced.flush = flush;
+  return debounced;
+}
+
+var debounce_1 = debounce$1;
+var debounce = debounce_1,
+    isObject = isObject_1;
+/** Error message constants. */
+
+var FUNC_ERROR_TEXT = 'Expected a function';
+/**
+ * Creates a throttled function that only invokes `func` at most once per
+ * every `wait` milliseconds. The throttled function comes with a `cancel`
+ * method to cancel delayed `func` invocations and a `flush` method to
+ * immediately invoke them. Provide `options` to indicate whether `func`
+ * should be invoked on the leading and/or trailing edge of the `wait`
+ * timeout. The `func` is invoked with the last arguments provided to the
+ * throttled function. Subsequent calls to the throttled function return the
+ * result of the last `func` invocation.
+ *
+ * **Note:** If `leading` and `trailing` options are `true`, `func` is
+ * invoked on the trailing edge of the timeout only if the throttled function
+ * is invoked more than once during the `wait` timeout.
+ *
+ * If `wait` is `0` and `leading` is `false`, `func` invocation is deferred
+ * until to the next tick, similar to `setTimeout` with a timeout of `0`.
+ *
+ * See [David Corbacho's article](https://css-tricks.com/debouncing-throttling-explained-examples/)
+ * for details over the differences between `_.throttle` and `_.debounce`.
+ *
+ * @static
+ * @memberOf _
+ * @since 0.1.0
+ * @category Function
+ * @param {Function} func The function to throttle.
+ * @param {number} [wait=0] The number of milliseconds to throttle invocations to.
+ * @param {Object} [options={}] The options object.
+ * @param {boolean} [options.leading=true]
+ *  Specify invoking on the leading edge of the timeout.
+ * @param {boolean} [options.trailing=true]
+ *  Specify invoking on the trailing edge of the timeout.
+ * @returns {Function} Returns the new throttled function.
+ * @example
+ *
+ * // Avoid excessively updating the position while scrolling.
+ * jQuery(window).on('scroll', _.throttle(updatePosition, 100));
+ *
+ * // Invoke `renewToken` when the click event is fired, but not more than once every 5 minutes.
+ * var throttled = _.throttle(renewToken, 300000, { 'trailing': false });
+ * jQuery(element).on('click', throttled);
+ *
+ * // Cancel the trailing throttled invocation.
+ * jQuery(window).on('popstate', throttled.cancel);
+ */
+
+function throttle(func, wait, options) {
+  var leading = true,
+      trailing = true;
+
+  if (typeof func != 'function') {
+    throw new TypeError(FUNC_ERROR_TEXT);
+  }
+
+  if (isObject(options)) {
+    leading = 'leading' in options ? !!options.leading : leading;
+    trailing = 'trailing' in options ? !!options.trailing : trailing;
+  }
+
+  return debounce(func, wait, {
+    'leading': leading,
+    'maxWait': wait,
+    'trailing': trailing
+  });
+}
+
+var throttle_1 = throttle;
+var Wrapper = styled.div({
+  position: 'relative',
+  maxWidth: 250
+});
+var PickerTooltip = styled(WithTooltip)({
+  position: 'absolute',
+  zIndex: 1,
+  top: 4,
+  left: 4
+});
+var TooltipContent = styled.div({
+  width: 200,
+  margin: 5,
+  '.react-colorful__saturation': {
+    borderRadius: '4px 4px 0 0'
+  },
+  '.react-colorful__hue': {
+    boxShadow: 'inset 0 0 0 1px rgb(0 0 0 / 5%)'
+  },
+  '.react-colorful__last-control': {
+    borderRadius: '0 0 4px 4px'
+  }
+});
+var Note = styled(TooltipNote)(function (_ref) {
+  var theme = _ref.theme;
+  return {
+    fontFamily: theme.typography.fonts.base
+  };
+});
+var Swatches = styled.div({
+  display: 'grid',
+  gridTemplateColumns: 'repeat(9, 16px)',
+  gap: 6,
+  padding: 3,
+  marginTop: 5,
+  width: 200
+});
+var SwatchColor = styled.div(function (_ref2) {
+  var theme = _ref2.theme,
+      active = _ref2.active;
+  return {
+    width: 16,
+    height: 16,
+    boxShadow: active ? "".concat(theme.appBorderColor, " 0 0 0 1px inset, ").concat(theme.color.mediumdark, "50 0 0 0 4px") : "".concat(theme.appBorderColor, " 0 0 0 1px inset"),
+    borderRadius: theme.appBorderRadius
+  };
+});
+var swatchBackground = "url('data:image/svg+xml;charset=utf-8,<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" fill-opacity=\".05\"><path d=\"M8 0h8v8H8zM0 8h8v8H0z\"/></svg>')";
+
+var Swatch = function Swatch(_a) {
+  var value = _a.value,
+      active = _a.active,
+      onClick = _a.onClick,
+      style = _a.style,
+      props = __rest(_a, ["value", "active", "onClick", "style"]);
+
+  var backgroundImage = "linear-gradient(".concat(value, ", ").concat(value, "), ").concat(swatchBackground, ", linear-gradient(#fff, #fff)");
+  return React__default.createElement(SwatchColor, Object.assign({}, props, {
+    active: active,
+    onClick: onClick
+  }, {
+    style: Object.assign(Object.assign({}, style), {
+      backgroundImage: backgroundImage
+    })
+  }));
+};
+
+var Input = styled(Form.Input)(function (_ref3) {
+  var theme = _ref3.theme;
+  return {
+    width: '100%',
+    paddingLeft: 30,
+    paddingRight: 30,
+    boxSizing: 'border-box',
+    fontFamily: theme.typography.fonts.base
+  };
+});
+var ToggleIcon = styled(Icons)(function (_ref4) {
+  var theme = _ref4.theme;
+  return {
+    position: 'absolute',
+    zIndex: 1,
+    top: 6,
+    right: 7,
+    width: 20,
+    height: 20,
+    padding: 4,
+    boxSizing: 'border-box',
+    cursor: 'pointer',
+    color: theme.input.color
+  };
+});
+var ColorSpace;
+
+(function (ColorSpace) {
+  ColorSpace["RGB"] = "rgb";
+  ColorSpace["HSL"] = "hsl";
+  ColorSpace["HEX"] = "hex";
+})(ColorSpace || (ColorSpace = {}));
+
+var COLOR_SPACES = Object.values(ColorSpace);
+var COLOR_REGEXP = /\(([0-9]+),\s*([0-9]+)%?,\s*([0-9]+)%?,?\s*([0-9.]+)?\)/;
+var RGB_REGEXP = /^\s*rgba?\(([0-9]+),\s*([0-9]+),\s*([0-9]+),?\s*([0-9.]+)?\)\s*$/i;
+var HSL_REGEXP = /^\s*hsla?\(([0-9]+),\s*([0-9]+)%,\s*([0-9]+)%,?\s*([0-9.]+)?\)\s*$/i;
+var HEX_REGEXP = /^\s*#?([0-9a-f]{3}|[0-9a-f]{6})\s*$/i;
+var SHORTHEX_REGEXP = /^\s*#?([0-9a-f]{3})\s*$/i;
+var ColorPicker = (_ColorPicker = {}, _defineProperty(_ColorPicker, ColorSpace.HEX, J), _defineProperty(_ColorPicker, ColorSpace.RGB, pe), _defineProperty(_ColorPicker, ColorSpace.HSL, re), _ColorPicker);
+var fallbackColor = (_fallbackColor = {}, _defineProperty(_fallbackColor, ColorSpace.HEX, 'transparent'), _defineProperty(_fallbackColor, ColorSpace.RGB, 'rgba(0, 0, 0, 0)'), _defineProperty(_fallbackColor, ColorSpace.HSL, 'hsla(0, 0%, 0%, 0)'), _fallbackColor);
+
+var stringToArgs = function stringToArgs(value) {
+  var match = value === null || value === void 0 ? void 0 : value.match(COLOR_REGEXP);
+  if (!match) return [0, 0, 0, 1];
+
+  var _match = _slicedToArray(match, 5),
+      x = _match[1],
+      y = _match[2],
+      z = _match[3],
+      _match$ = _match[4],
+      a = _match$ === void 0 ? 1 : _match$;
+
+  return [x, y, z, a].map(Number);
+};
+
+var parseValue = function parseValue(value) {
+  var _ref11;
+
+  if (!value) return undefined;
+  var valid = true;
+
+  if (RGB_REGEXP.test(value)) {
+    var _ref7;
+
+    var _stringToArgs = stringToArgs(value),
+        _stringToArgs2 = _slicedToArray(_stringToArgs, 4),
+        r = _stringToArgs2[0],
+        _g = _stringToArgs2[1],
+        _b = _stringToArgs2[2],
+        a = _stringToArgs2[3];
+
+    var _ref5 = colorConvert.rgb.hsl([r, _g, _b]) || [0, 0, 0],
+        _ref6 = _slicedToArray(_ref5, 3),
+        _h = _ref6[0],
+        _s2 = _ref6[1],
+        l = _ref6[2];
+
+    return _ref7 = {
+      valid: valid,
+      value: value,
+      keyword: colorConvert.rgb.keyword([r, _g, _b]),
+      colorSpace: ColorSpace.RGB
+    }, _defineProperty(_ref7, ColorSpace.RGB, value), _defineProperty(_ref7, ColorSpace.HSL, "hsla(".concat(_h, ", ").concat(_s2, "%, ").concat(l, "%, ").concat(a, ")")), _defineProperty(_ref7, ColorSpace.HEX, "#".concat(colorConvert.rgb.hex([r, _g, _b]).toLowerCase())), _ref7;
+  }
+
+  if (HSL_REGEXP.test(value)) {
+    var _ref10;
+
+    var _stringToArgs3 = stringToArgs(value),
+        _stringToArgs4 = _slicedToArray(_stringToArgs3, 4),
+        _h2 = _stringToArgs4[0],
+        _s3 = _stringToArgs4[1],
+        _l = _stringToArgs4[2],
+        _a2 = _stringToArgs4[3];
+
+    var _ref8 = colorConvert.hsl.rgb([_h2, _s3, _l]) || [0, 0, 0],
+        _ref9 = _slicedToArray(_ref8, 3),
+        _r = _ref9[0],
+        _g2 = _ref9[1],
+        _b2 = _ref9[2];
+
+    return _ref10 = {
+      valid: valid,
+      value: value,
+      keyword: colorConvert.hsl.keyword([_h2, _s3, _l]),
+      colorSpace: ColorSpace.HSL
+    }, _defineProperty(_ref10, ColorSpace.RGB, "rgba(".concat(_r, ", ").concat(_g2, ", ").concat(_b2, ", ").concat(_a2, ")")), _defineProperty(_ref10, ColorSpace.HSL, value), _defineProperty(_ref10, ColorSpace.HEX, "#".concat(colorConvert.hsl.hex([_h2, _s3, _l]).toLowerCase())), _ref10;
+  }
+
+  var plain = value.replace('#', '');
+  var rgb = colorConvert.keyword.rgb(plain) || colorConvert.hex.rgb(plain);
+  var hsl = colorConvert.rgb.hsl(rgb);
+  var mapped = value;
+  if (/[^#a-f0-9]/i.test(value)) mapped = plain;else if (HEX_REGEXP.test(value)) mapped = "#".concat(plain);
+
+  if (mapped.startsWith('#')) {
+    valid = HEX_REGEXP.test(mapped);
+  } else {
+    try {
+      colorConvert.keyword.hex(mapped);
+    } catch (e) {
+      valid = false;
+    }
+  }
+
+  return _ref11 = {
+    valid: valid,
+    value: mapped,
+    keyword: colorConvert.rgb.keyword(rgb),
+    colorSpace: ColorSpace.HEX
+  }, _defineProperty(_ref11, ColorSpace.RGB, "rgba(".concat(rgb[0], ", ").concat(rgb[1], ", ").concat(rgb[2], ", 1)")), _defineProperty(_ref11, ColorSpace.HSL, "hsla(".concat(hsl[0], ", ").concat(hsl[1], "%, ").concat(hsl[2], "%, 1)")), _defineProperty(_ref11, ColorSpace.HEX, mapped), _ref11;
+};
+
+var getRealValue = function getRealValue(value, color, colorSpace) {
+  if (!value || !(color === null || color === void 0 ? void 0 : color.valid)) return fallbackColor[colorSpace];
+  if (colorSpace !== ColorSpace.HEX) return (color === null || color === void 0 ? void 0 : color[colorSpace]) || fallbackColor[colorSpace];
+
+  if (!color.hex.startsWith('#')) {
+    try {
+      return "#".concat(colorConvert.keyword.hex(color.hex));
+    } catch (e) {
+      return fallbackColor.hex;
+    }
+  }
+
+  var short = color.hex.match(SHORTHEX_REGEXP);
+  if (!short) return HEX_REGEXP.test(color.hex) ? color.hex : fallbackColor.hex;
+
+  var _short$1$split = short[1].split(''),
+      _short$1$split2 = _slicedToArray(_short$1$split, 3),
+      r = _short$1$split2[0],
+      g = _short$1$split2[1],
+      b = _short$1$split2[2];
+
+  return "#".concat(r).concat(r).concat(g).concat(g).concat(b).concat(b);
+};
+
+var useColorInput = function useColorInput(initialValue, onChange) {
+  var _useState = useState(initialValue || ''),
+      _useState2 = _slicedToArray(_useState, 2),
+      value = _useState2[0],
+      setValue = _useState2[1];
+
+  var _useState3 = useState(function () {
+    return parseValue(value);
+  }),
+      _useState4 = _slicedToArray(_useState3, 2),
+      color = _useState4[0],
+      setColor = _useState4[1];
+
+  var _useState5 = useState((color === null || color === void 0 ? void 0 : color.colorSpace) || ColorSpace.HEX),
+      _useState6 = _slicedToArray(_useState5, 2),
+      colorSpace = _useState6[0],
+      setColorSpace = _useState6[1]; // Reset state when initialValue becomes undefined (when resetting controls)
+
+
+  useEffect(function () {
+    if (initialValue !== undefined) return;
+    setValue('');
+    setColor(undefined);
+    setColorSpace(ColorSpace.HEX);
+  }, [initialValue]);
+  var realValue = useMemo(function () {
+    return getRealValue(value, color, colorSpace).toLowerCase();
+  }, [value, color, colorSpace]);
+  var updateValue = useCallback(function (update) {
+    var parsed = parseValue(update);
+    setValue((parsed === null || parsed === void 0 ? void 0 : parsed.value) || update || '');
+    if (!parsed) return;
+    setColor(parsed);
+    setColorSpace(parsed.colorSpace);
+    onChange(parsed.value);
+  }, [onChange]);
+  var cycleColorSpace = useCallback(function () {
+    var next = COLOR_SPACES.indexOf(colorSpace) + 1;
+    if (next >= COLOR_SPACES.length) next = 0;
+    setColorSpace(COLOR_SPACES[next]);
+    var update = (color === null || color === void 0 ? void 0 : color[COLOR_SPACES[next]]) || '';
+    setValue(update);
+    onChange(update);
+  }, [color, colorSpace, onChange]);
+  return {
+    value: value,
+    realValue: realValue,
+    updateValue: updateValue,
+    color: color,
+    colorSpace: colorSpace,
+    cycleColorSpace: cycleColorSpace
+  };
+};
+
+var id = function id(value) {
+  return value.replace(/\s*/, '').toLowerCase();
+};
+
+var usePresets = function usePresets(presetColors, currentColor, colorSpace) {
+  var _useState7 = useState((currentColor === null || currentColor === void 0 ? void 0 : currentColor.valid) ? [currentColor] : []),
+      _useState8 = _slicedToArray(_useState7, 2),
+      selectedColors = _useState8[0],
+      setSelectedColors = _useState8[1]; // Reset state when currentColor becomes undefined (when resetting controls)
+
+
+  useEffect(function () {
+    if (currentColor !== undefined) return;
+    setSelectedColors([]);
+  }, [currentColor]);
+  var presets = useMemo(function () {
+    var initialPresets = (presetColors || []).map(function (preset) {
+      if (typeof preset === 'string') return parseValue(preset);
+      if (preset.title) return Object.assign(Object.assign({}, parseValue(preset.color)), {
+        keyword: preset.title
+      });
+      return parseValue(preset.color);
+    });
+    return initialPresets.concat(selectedColors).filter(Boolean).slice(-27);
+  }, [presetColors, selectedColors]);
+  var addPreset = useCallback(function (color) {
+    if (!(color === null || color === void 0 ? void 0 : color.valid)) return;
+    if (presets.some(function (preset) {
+      return id(preset[colorSpace]) === id(color[colorSpace]);
+    })) return;
+    setSelectedColors(function (arr) {
+      return arr.concat(color);
+    });
+  }, [colorSpace, presets]);
+  return {
+    presets: presets,
+    addPreset: addPreset
+  };
+};
+
+var ColorControl = function ColorControl(_ref12) {
+  var name = _ref12.name,
+      initialValue = _ref12.value,
+      onChange = _ref12.onChange,
+      onFocus = _ref12.onFocus,
+      onBlur = _ref12.onBlur,
+      presetColors = _ref12.presetColors,
+      startOpen = _ref12.startOpen;
+
+  var _useColorInput = useColorInput(initialValue, throttle_1(onChange, 200)),
+      value = _useColorInput.value,
+      realValue = _useColorInput.realValue,
+      updateValue = _useColorInput.updateValue,
+      color = _useColorInput.color,
+      colorSpace = _useColorInput.colorSpace,
+      cycleColorSpace = _useColorInput.cycleColorSpace;
+
+  var _usePresets = usePresets(presetColors, color, colorSpace),
+      presets = _usePresets.presets,
+      addPreset = _usePresets.addPreset;
+
+  var Picker = ColorPicker[colorSpace];
+  return React__default.createElement(Wrapper, null, React__default.createElement(PickerTooltip, {
+    trigger: "click",
+    startOpen: startOpen,
+    closeOnClick: true,
+    onVisibilityChange: function onVisibilityChange() {
+      return addPreset(color);
+    },
+    tooltip: React__default.createElement(TooltipContent, null, React__default.createElement(Picker, Object.assign({
+      color: realValue === 'transparent' ? '#000000' : realValue
+    }, {
+      onChange: updateValue,
+      onFocus: onFocus,
+      onBlur: onBlur
+    })), presets.length > 0 && React__default.createElement(Swatches, null, presets.map(function (preset, index) {
+      return React__default.createElement(WithTooltip // eslint-disable-next-line react/no-array-index-key
+      , {
+        // eslint-disable-next-line react/no-array-index-key
+        key: "".concat(preset.value, "-").concat(index),
+        hasChrome: false,
+        tooltip: React__default.createElement(Note, {
+          note: preset.keyword || preset.value
+        })
+      }, React__default.createElement(Swatch, {
+        value: preset[colorSpace],
+        active: color && id(preset[colorSpace]) === id(color[colorSpace]),
+        onClick: function onClick() {
+          return updateValue(preset.value);
+        }
+      }));
+    })))
+  }, React__default.createElement(Swatch, {
+    value: realValue,
+    style: {
+      margin: 4
+    }
+  })), React__default.createElement(Input, {
+    id: getControlId(name),
+    value: value,
+    onChange: function onChange(e) {
+      return updateValue(e.target.value);
+    },
+    onFocus: function onFocus(e) {
+      return e.target.select();
+    },
+    placeholder: "Choose color..."
+  }), value ? React__default.createElement(ToggleIcon, {
+    icon: "markup",
+    onClick: cycleColorSpace
+  }) : null);
+};
+
+export { ColorControl, ColorControl as default };