@storybook/components 6.2.0-rc.6 → 6.2.0

package/dist/cjs/controls/Color.js

@@ -1,8 +1,8 @@
 "use strict";
 
-require("core-js/modules/es.array.concat.js");
+function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
 
-require("core-js/modules/es.array.every.js");
+require("core-js/modules/es.array.concat.js");
 
 require("core-js/modules/es.array.filter.js");
 
@@ -12,10 +12,14 @@ require("core-js/modules/es.array.map.js");
 
 require("core-js/modules/es.array.slice.js");
 
-require("core-js/modules/es.function.name.js");
+require("core-js/modules/es.array.some.js");
 
 require("core-js/modules/es.number.constructor.js");
 
+require("core-js/modules/es.object.assign.js");
+
+require("core-js/modules/es.object.keys.js");
+
 require("core-js/modules/es.object.values.js");
 
 require("core-js/modules/es.regexp.exec.js");
@@ -24,6 +28,8 @@ require("core-js/modules/es.string.match.js");
 
 require("core-js/modules/es.string.replace.js");
 
+require("core-js/modules/es.string.split.js");
+
 require("core-js/modules/es.string.starts-with.js");
 
 Object.defineProperty(exports, "__esModule", {
@@ -49,39 +55,137 @@ var _form = require("../form");
 
 var _icon = require("../icon/icon");
 
+var _ColorPicker, _fallbackColor;
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function _getRequireWildcardCache() { return cache; }; return cache; }
 
 function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
+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) { if (typeof Symbol === "undefined" || !(Symbol.iterator in Object(arr))) return; var _arr = []; var _n = true; var _d = false; var _e = undefined; try { for (var _i = arr[Symbol.iterator](), _s; !(_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; }
+
+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 _extends() { _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; }; return _extends.apply(this, arguments); }
 
 function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
 
 function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
 
-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"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
+var Wrapper = _theming.styled.div({
+  position: 'relative',
+  maxWidth: 250
+});
 
-function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+var PickerTooltip = (0, _theming.styled)(_lazyWithTooltip.WithTooltip)({
+  position: 'absolute',
+  zIndex: 1,
+  top: 4,
+  left: 4
+});
 
-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."); }
+var TooltipContent = _theming.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'
+  }
+});
 
-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); }
+var Note = (0, _theming.styled)(_TooltipNote.TooltipNote)(function (_ref) {
+  var theme = _ref.theme;
+  return {
+    fontFamily: theme.typography.fonts.base
+  };
+});
 
-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; }
+var Swatches = _theming.styled.div({
+  display: 'grid',
+  gridTemplateColumns: 'repeat(9, 16px)',
+  gap: 6,
+  padding: 3,
+  marginTop: 5,
+  width: 200
+});
 
-function _iterableToArrayLimit(arr, i) { if (typeof Symbol === "undefined" || !(Symbol.iterator in Object(arr))) return; var _arr = []; var _n = true; var _d = false; var _e = undefined; try { for (var _i = arr[Symbol.iterator](), _s; !(_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; }
+var SwatchColor = _theming.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
+  };
+});
 
-function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+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(_ref3) {
+  var value = _ref3.value,
+      active = _ref3.active,
+      onClick = _ref3.onClick,
+      style = _ref3.style,
+      props = _objectWithoutProperties(_ref3, ["value", "active", "onClick", "style"]);
+
+  var backgroundImage = "linear-gradient(".concat(value, ", ").concat(value, "), ").concat(swatchBackground, ", linear-gradient(#fff, #fff)");
+  return /*#__PURE__*/_react.default.createElement(SwatchColor, _extends({}, props, {
+    active: active,
+    onClick: onClick,
+    style: Object.assign({}, style, {
+      backgroundImage: backgroundImage
+    })
+  }));
+};
 
+Swatch.displayName = "Swatch";
+var Input = (0, _theming.styled)(_form.Form.Input)(function (_ref4) {
+  var theme = _ref4.theme;
+  return {
+    width: '100%',
+    paddingLeft: 30,
+    paddingRight: 30,
+    boxSizing: 'border-box',
+    fontFamily: theme.typography.fonts.base
+  };
+});
+var ToggleIcon = (0, _theming.styled)(_icon.Icons)(function (_ref5) {
+  var theme = _ref5.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["RGBA"] = "rgb";
-  ColorSpace["HSLA"] = "hsl";
+  ColorSpace["RGB"] = "rgb";
+  ColorSpace["HSL"] = "hsl";
   ColorSpace["HEX"] = "hex";
 })(ColorSpace || (ColorSpace = {}));
 
@@ -89,8 +193,10 @@ 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]{1,2})([0-9a-f]{1,2})([0-9a-f]{1,2})\s*$/i;
-var SHORTHEX_REGEXP = /^\s*#([0-9a-f])([0-9a-f])([0-9a-f])\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, _reactColorful.HexColorPicker), _defineProperty(_ColorPicker, ColorSpace.RGB, _reactColorful.RgbaStringColorPicker), _defineProperty(_ColorPicker, ColorSpace.HSL, _reactColorful.HslaStringColorPicker), _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);
@@ -106,273 +212,250 @@ var stringToArgs = function stringToArgs(value) {
   return [x, y, z, a].map(Number);
 };
 
-var expandShorthand = function expandShorthand(value) {
-  if (!value) return '#000000';
-
-  if (!value.startsWith('#')) {
-    try {
-      return "#".concat(_colorConvert.default.keyword.hex(value));
-    } catch (e) {
-      return value;
-    }
-  }
+var parseValue = function parseValue(value) {
+  var _ref12;
 
-  if (value.length > 4) return value;
-  var match = value.match(SHORTHEX_REGEXP);
-  if (!match) return value;
+  if (!value) return undefined;
+  var valid = true;
 
-  var _match2 = _slicedToArray(match, 4),
-      r = _match2[1],
-      g = _match2[2],
-      b = _match2[3];
+  if (RGB_REGEXP.test(value)) {
+    var _ref8;
 
-  return "#".concat(r).concat(r).concat(g).concat(g).concat(b).concat(b);
-};
-
-var parseValue = function parseValue(input) {
-  var _ref8;
-
-  var _ref = _typeof(input) === 'object' ? input : {
-    color: input,
-    title: undefined
-  },
-      color = _ref.color,
-      title = _ref.title;
-
-  if (!color) return undefined;
-
-  if (RGB_REGEXP.test(color)) {
-    var _ref4;
-
-    var _stringToArgs = stringToArgs(color),
+    var _stringToArgs = stringToArgs(value),
         _stringToArgs2 = _slicedToArray(_stringToArgs, 4),
         r = _stringToArgs2[0],
         g = _stringToArgs2[1],
         b = _stringToArgs2[2],
         a = _stringToArgs2[3];
 
-    var _ref2 = _colorConvert.default.rgb.hsl([r, g, b]) || [0, 0, 0],
-        _ref3 = _slicedToArray(_ref2, 3),
-        h = _ref3[0],
-        s = _ref3[1],
-        l = _ref3[2];
-
-    return _ref4 = {
-      value: color,
-      title: title || _colorConvert.default.rgb.keyword([r, g, b]) || color,
-      colorSpace: ColorSpace.RGBA
-    }, _defineProperty(_ref4, ColorSpace.RGBA, color), _defineProperty(_ref4, ColorSpace.HSLA, "hsla(".concat(h, ", ").concat(s, "%, ").concat(l, "%, ").concat(a, ")")), _defineProperty(_ref4, ColorSpace.HEX, "#".concat(_colorConvert.default.rgb.hex([r, g, b]))), _ref4;
+    var _ref6 = _colorConvert.default.rgb.hsl([r, g, b]) || [0, 0, 0],
+        _ref7 = _slicedToArray(_ref6, 3),
+        h = _ref7[0],
+        s = _ref7[1],
+        l = _ref7[2];
+
+    return _ref8 = {
+      valid: valid,
+      value: value,
+      keyword: _colorConvert.default.rgb.keyword([r, g, b]),
+      colorSpace: ColorSpace.RGB
+    }, _defineProperty(_ref8, ColorSpace.RGB, value), _defineProperty(_ref8, ColorSpace.HSL, "hsla(".concat(h, ", ").concat(s, "%, ").concat(l, "%, ").concat(a, ")")), _defineProperty(_ref8, ColorSpace.HEX, "#".concat(_colorConvert.default.rgb.hex([r, g, b]).toLowerCase())), _ref8;
   }
 
-  if (HSL_REGEXP.test(color)) {
-    var _ref7;
+  if (HSL_REGEXP.test(value)) {
+    var _ref11;
 
-    var _stringToArgs3 = stringToArgs(color),
+    var _stringToArgs3 = stringToArgs(value),
         _stringToArgs4 = _slicedToArray(_stringToArgs3, 4),
         _h = _stringToArgs4[0],
         _s2 = _stringToArgs4[1],
         _l = _stringToArgs4[2],
         _a = _stringToArgs4[3];
 
-    var _ref5 = _colorConvert.default.hsl.rgb([_h, _s2, _l]) || [0, 0, 0],
-        _ref6 = _slicedToArray(_ref5, 3),
-        _r = _ref6[0],
-        _g = _ref6[1],
-        _b = _ref6[2];
-
-    return _ref7 = {
-      value: color,
-      title: title || _colorConvert.default.rgb.keyword([_r, _g, _b]) || color,
-      colorSpace: ColorSpace.HSLA
-    }, _defineProperty(_ref7, ColorSpace.RGBA, "rgba(".concat(_r, ", ").concat(_g, ", ").concat(_b, ", ").concat(_a, ")")), _defineProperty(_ref7, ColorSpace.HSLA, color), _defineProperty(_ref7, ColorSpace.HEX, "#".concat(_colorConvert.default.hsl.hex([_h, _s2, _l]))), _ref7;
+    var _ref9 = _colorConvert.default.hsl.rgb([_h, _s2, _l]) || [0, 0, 0],
+        _ref10 = _slicedToArray(_ref9, 3),
+        _r = _ref10[0],
+        _g = _ref10[1],
+        _b = _ref10[2];
+
+    return _ref11 = {
+      valid: valid,
+      value: value,
+      keyword: _colorConvert.default.hsl.keyword([_h, _s2, _l]),
+      colorSpace: ColorSpace.HSL
+    }, _defineProperty(_ref11, ColorSpace.RGB, "rgba(".concat(_r, ", ").concat(_g, ", ").concat(_b, ", ").concat(_a, ")")), _defineProperty(_ref11, ColorSpace.HSL, value), _defineProperty(_ref11, ColorSpace.HEX, "#".concat(_colorConvert.default.hsl.hex([_h, _s2, _l]).toLowerCase())), _ref11;
   }
 
-  var convertTo = HEX_REGEXP.test(color) ? _colorConvert.default.hex : _colorConvert.default.keyword;
-  var rgb = convertTo.rgb(color.replace('#', ''));
+  var plain = value.replace('#', '');
+
+  var rgb = _colorConvert.default.keyword.rgb(plain) || _colorConvert.default.hex.rgb(plain);
+
+  var hsl = _colorConvert.default.rgb.hsl(rgb);
 
-  var hsl = rgb && _colorConvert.default.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.default.keyword.hex(mapped);
+    } catch (e) {
+      valid = false;
+    }
+  }
 
-  return _ref8 = {
-    value: color,
-    title: title || _colorConvert.default.rgb.keyword(rgb) || color,
+  return _ref12 = {
+    valid: valid,
+    value: mapped,
+    keyword: _colorConvert.default.rgb.keyword(rgb),
     colorSpace: ColorSpace.HEX
-  }, _defineProperty(_ref8, ColorSpace.RGBA, rgb && "rgba(".concat(rgb[0], ", ").concat(rgb[1], ", ").concat(rgb[2], ", 1)")), _defineProperty(_ref8, ColorSpace.HSLA, hsl && "hsla(".concat(hsl[0], ", ").concat(hsl[1], "%, ").concat(hsl[2], "%, 1)")), _defineProperty(_ref8, ColorSpace.HEX, color), _ref8;
+  }, _defineProperty(_ref12, ColorSpace.RGB, "rgba(".concat(rgb[0], ", ").concat(rgb[1], ", ").concat(rgb[2], ", 1)")), _defineProperty(_ref12, ColorSpace.HSL, "hsla(".concat(hsl[0], ", ").concat(hsl[1], "%, ").concat(hsl[2], "%, 1)")), _defineProperty(_ref12, ColorSpace.HEX, mapped), _ref12;
 };
 
-var Wrapper = _theming.styled.div({
-  position: 'relative',
-  maxWidth: 250
-});
+var getRealValue = function getRealValue(value, color, colorSpace) {
+  if (!value || !(color !== null && color !== void 0 && color.valid)) return fallbackColor[colorSpace];
+  if (colorSpace !== ColorSpace.HEX) return (color === null || color === void 0 ? void 0 : color[colorSpace]) || fallbackColor[colorSpace];
 
-var PickerTooltip = (0, _theming.styled)(_lazyWithTooltip.WithTooltip)({
-  position: 'absolute',
-  zIndex: 1,
-  top: 4,
-  left: 4
-});
-
-var TooltipContent = _theming.styled.div({
-  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'
+  if (!color.hex.startsWith('#')) {
+    try {
+      return "#".concat(_colorConvert.default.keyword.hex(color.hex));
+    } catch (e) {
+      return fallbackColor.hex;
+    }
   }
-});
 
-var Swatches = _theming.styled.div({
-  display: 'grid',
-  gridTemplateColumns: 'repeat(9, 15px)',
-  gap: 7,
-  padding: 3,
-  marginTop: 5,
-  width: 200
-});
+  var short = color.hex.match(SHORTHEX_REGEXP);
+  if (!short) return HEX_REGEXP.test(color.hex) ? color.hex : fallbackColor.hex;
 
-var Swatch = _theming.styled.div(function (_ref9) {
-  var theme = _ref9.theme,
-      active = _ref9.active,
-      round = _ref9.round;
-  return {
-    width: round ? 16 : 15,
-    height: round ? 16 : 15,
-    margin: round ? 4 : 0,
-    boxShadow: active ? "".concat(theme.appBorderColor, " 0 0 0 1px inset, ").concat(theme.color.mediumdark, "55 0 0 0 4px") : "".concat(theme.appBorderColor, " 0 0 0 1px inset"),
-    borderRadius: round ? 16 : theme.appBorderRadius,
-    cursor: 'pointer'
-  };
-});
+  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];
 
-var Input = (0, _theming.styled)(_form.Form.Input)({
-  width: '100%',
-  paddingLeft: 30,
-  paddingRight: 30
-});
-var ToggleIcon = (0, _theming.styled)(_icon.Icons)(function (_ref10) {
-  var theme = _ref10.theme;
-  return {
-    position: 'absolute',
-    zIndex: 1,
-    top: 6,
-    right: 7,
-    width: 20,
-    height: 20,
-    padding: 4,
-    cursor: 'pointer',
-    color: theme.input.color
-  };
-});
+  return "#".concat(r).concat(r).concat(g).concat(g).concat(b).concat(b);
+};
 
-var SmartPicker = /*#__PURE__*/_react.default.memo(function (_ref11) {
-  var value = _ref11.value,
-      colorSpace = _ref11.colorSpace,
-      props = _objectWithoutProperties(_ref11, ["value", "colorSpace"]);
-
-  switch (colorSpace) {
-    case ColorSpace.RGBA:
-      return /*#__PURE__*/_react.default.createElement(_reactColorful.RgbaStringColorPicker, _extends({
-        color: value
-      }, props));
-
-    case ColorSpace.HSLA:
-      return /*#__PURE__*/_react.default.createElement(_reactColorful.HslaStringColorPicker, _extends({
-        color: value
-      }, props));
-
-    default:
-      return /*#__PURE__*/_react.default.createElement(_reactColorful.HexColorPicker, _extends({
-        color: expandShorthand(value)
-      }, props));
-  }
-});
+var useColorInput = function useColorInput(initialValue, onChange) {
+  var _useState = (0, _react.useState)(initialValue || ''),
+      _useState2 = _slicedToArray(_useState, 2),
+      value = _useState2[0],
+      setValue = _useState2[1];
 
-var ColorControl = function ColorControl(_ref12) {
-  var name = _ref12.name,
-      value = _ref12.value,
-      _onChange = _ref12.onChange,
-      onFocus = _ref12.onFocus,
-      onBlur = _ref12.onBlur,
-      presetColors = _ref12.presetColors,
-      startOpen = _ref12.startOpen;
-  var color = (0, _react.useMemo)(function () {
+  var _useState3 = (0, _react.useState)(function () {
     return parseValue(value);
-  }, [value]);
-  var update = (0, _react.useMemo)(function () {
-    return (0, _throttle.default)(_onChange, 200);
+  }),
+      _useState4 = _slicedToArray(_useState3, 2),
+      color = _useState4[0],
+      setColor = _useState4[1];
+
+  var _useState5 = (0, _react.useState)((color === null || color === void 0 ? void 0 : color.colorSpace) || ColorSpace.HEX),
+      _useState6 = _slicedToArray(_useState5, 2),
+      colorSpace = _useState6[0],
+      setColorSpace = _useState6[1];
+
+  var realValue = (0, _react.useMemo)(function () {
+    return getRealValue(value, color, colorSpace).toLowerCase();
+  }, [value, color, colorSpace]);
+  var updateValue = (0, _react.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);
   }, []);
-
-  var _useState = (0, _react.useState)((color === null || color === void 0 ? void 0 : color.colorSpace) || ColorSpace.HEX),
-      _useState2 = _slicedToArray(_useState, 2),
-      colorSpace = _useState2[0],
-      setColorSpace = _useState2[1];
-
-  var currentValue = (color === null || color === void 0 ? void 0 : color[colorSpace]) || '';
-  (0, _react.useEffect)(function () {
-    if (color) setColorSpace(color.colorSpace);
-  }, [color === null || color === void 0 ? void 0 : color.colorSpace]);
   var cycleColorSpace = (0, _react.useCallback)(function () {
     var next = COLOR_SPACES.indexOf(colorSpace) + 1;
     if (next >= COLOR_SPACES.length) next = 0;
     setColorSpace(COLOR_SPACES[next]);
-  }, [colorSpace]);
+    var update = (color === null || color === void 0 ? void 0 : color[COLOR_SPACES[next]]) || '';
+    setValue(update);
+    onChange(update);
+  }, [color, colorSpace]);
+  return {
+    value: value,
+    realValue: realValue,
+    updateValue: updateValue,
+    color: color,
+    colorSpace: colorSpace,
+    cycleColorSpace: cycleColorSpace
+  };
+};
 
-  var _useState3 = (0, _react.useState)(function () {
-    return (presetColors || []).map(parseValue).concat(color).filter(Boolean).slice(0, 27);
-  }),
-      _useState4 = _slicedToArray(_useState3, 2),
-      presets = _useState4[0],
-      setPresets = _useState4[1];
-
-  var addPreset = (0, _react.useCallback)(function (preset) {
-    setPresets(function (arr) {
-      return preset !== null && preset !== void 0 && preset.rgb && arr.every(function (item) {
-        return item.rgb !== preset.rgb;
-      }) ? arr.concat(preset).slice(-27) : arr;
+var id = function id(value) {
+  return value.replace(/\s*/, '').toLowerCase();
+};
+
+var usePresets = function usePresets(presetColors, currentColor, colorSpace) {
+  var _useState7 = (0, _react.useState)(currentColor !== null && currentColor !== void 0 && currentColor.valid ? [currentColor] : []),
+      _useState8 = _slicedToArray(_useState7, 2),
+      selectedColors = _useState8[0],
+      setSelectedColors = _useState8[1];
+
+  var presets = (0, _react.useMemo)(function () {
+    var initialPresets = (presetColors || []).map(function (preset) {
+      if (typeof preset === 'string') return parseValue(preset);
+      if (preset.title) return Object.assign({}, parseValue(preset.color), {
+        keyword: preset.title
+      });
+      return parseValue(preset.color);
     });
-  }, []);
+    return initialPresets.concat(selectedColors).filter(Boolean).slice(-27);
+  }, [presetColors, selectedColors]);
+  var addPreset = (0, _react.useCallback)(function (color) {
+    if (!(color !== null && color !== 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(_ref13) {
+  var initialValue = _ref13.value,
+      onChange = _ref13.onChange,
+      onFocus = _ref13.onFocus,
+      onBlur = _ref13.onBlur,
+      presetColors = _ref13.presetColors,
+      startOpen = _ref13.startOpen;
+
+  var _useColorInput = useColorInput(initialValue, (0, _throttle.default)(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 /*#__PURE__*/_react.default.createElement(Wrapper, null, /*#__PURE__*/_react.default.createElement(PickerTooltip, {
     trigger: "click",
     startOpen: startOpen,
     closeOnClick: true,
     onVisibilityChange: function onVisibilityChange() {
-      return color && addPreset(color);
+      return addPreset(color);
     },
-    tooltip: /*#__PURE__*/_react.default.createElement(TooltipContent, null, /*#__PURE__*/_react.default.createElement(SmartPicker, {
-      value: currentValue,
-      colorSpace: colorSpace,
-      onChange: update,
+    tooltip: /*#__PURE__*/_react.default.createElement(TooltipContent, null, /*#__PURE__*/_react.default.createElement(Picker, {
+      color: realValue === 'transparent' ? '#000000' : realValue,
+      onChange: updateValue,
       onFocus: onFocus,
       onBlur: onBlur
     }), presets.length > 0 && /*#__PURE__*/_react.default.createElement(Swatches, null, presets.map(function (preset) {
       return /*#__PURE__*/_react.default.createElement(_lazyWithTooltip.WithTooltip, {
         key: preset.value,
         hasChrome: false,
-        tooltip: /*#__PURE__*/_react.default.createElement(_TooltipNote.TooltipNote, {
-          note: preset.title
+        tooltip: /*#__PURE__*/_react.default.createElement(Note, {
+          note: preset.keyword || preset.value
         })
       }, /*#__PURE__*/_react.default.createElement(Swatch, {
-        style: {
-          background: preset[colorSpace]
-        },
-        active: (color === null || color === void 0 ? void 0 : color.rgb) === preset.rgb,
+        value: preset[colorSpace],
+        active: color && id(preset[colorSpace]) === id(color[colorSpace]),
         onClick: function onClick() {
-          return _onChange(preset[colorSpace]);
+          return updateValue(preset.value);
         }
       }));
     })))
   }, /*#__PURE__*/_react.default.createElement(Swatch, {
-    round: true,
+    value: realValue,
     style: {
-      background: currentValue || '#000000'
+      margin: 4
     }
   })), /*#__PURE__*/_react.default.createElement(Input, {
-    value: currentValue,
+    value: value,
     onChange: function onChange(e) {
-      return _onChange(e.target.value);
+      return updateValue(e.target.value);
     },
     onFocus: function onFocus(e) {
       return e.target.select();