@sanity/color-input 3.1.2 → 4.0.0-canary.1

package/lib/index.js

@@ -1,272 +1,54 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', {
-  value: true
-});
-var sanity = require('sanity');
-var jsxRuntime = require('react/jsx-runtime');
-var react = require('react');
-var lodash = require('lodash');
-var ui = require('@sanity/ui');
-var icons = require('@sanity/icons');
-var common = require('react-color/lib/components/common');
-var reactColor = require('react-color');
-var styled = require('styled-components');
-var color$1 = require('react-color/lib/helpers/color');
-function _interopDefaultCompat(e) {
-  return e && typeof e === 'object' && 'default' in e ? e : {
-    default: e
-  };
-}
-var styled__default = /*#__PURE__*/_interopDefaultCompat(styled);
-const hslaColor = sanity.defineType({
-  title: "Hue Saturation Lightness",
-  name: "hslaColor",
-  type: "object",
-  fields: [{
-    name: "h",
-    type: "number",
-    title: "Hue"
-  }, {
-    name: "s",
-    type: "number",
-    title: "Saturation"
-  }, {
-    name: "l",
-    type: "number",
-    title: "Lightness"
-  }, {
-    name: "a",
-    type: "number",
-    title: "Alpha"
-  }]
-});
-const rgbaColor = sanity.defineType({
-  title: "Red Green Blue (rgb)",
-  name: "rgbaColor",
-  type: "object",
-  fields: [{
-    name: "r",
-    type: "number",
-    title: "Red"
-  }, {
-    name: "g",
-    type: "number",
-    title: "Green"
-  }, {
-    name: "b",
-    type: "number",
-    title: "Blue"
-  }, {
-    name: "a",
-    type: "number",
-    title: "Alpha"
-  }]
-});
-const ColorPickerFields = _ref => {
-  let {
-    onChange,
-    rgb,
-    hsl,
-    hex,
-    disableAlpha
-  } = _ref;
-  var _a;
-  const {
-    sanity
-  } = ui.useTheme();
-  const inputStyles = react.useMemo(() => ({
-    input: {
-      width: "80%",
-      padding: "4px 10% 3px",
-      border: "none",
-      boxShadow: "inset 0 0 0 1px ".concat(sanity.color.input.default.enabled.border),
-      color: sanity.color.input.default.enabled.fg,
-      backgroundColor: sanity.color.input.default.enabled.bg,
-      fontSize: sanity.fonts.text.sizes[0].fontSize,
-      textAlign: "center"
-    },
-    label: {
-      display: "block",
-      textAlign: "center",
-      fontSize: sanity.fonts.label.sizes[0].fontSize,
-      color: sanity.color.base.fg,
-      paddingTop: "3px",
-      paddingBottom: "4px",
-      textTransform: "capitalize"
-    }
-  }), [sanity]);
-  const handleChange = react.useCallback(data => {
-    if ("hex" in data && data.hex && color$1.isValidHex(data.hex)) {
-      onChange({
-        hex: data.hex,
-        source: "hex"
-      });
-    } else if (rgb && ("r" in data && data.r || "g" in data && data.g || "b" in data && data.b)) {
-      onChange({
-        r: Number(data.r) || rgb.r,
-        g: Number(data.g) || rgb.g,
-        b: Number(data.b) || rgb.b,
-        a: rgb.a,
-        source: "rgb"
-      });
-    } else if (hsl && "a" in data && data.a) {
-      let alpha = Number(data.a);
-      if (alpha < 0) {
-        alpha = 0;
-      } else if (alpha > 100) {
-        alpha = 100;
-      }
-      alpha /= 100;
-      onChange({
-        h: hsl.h,
-        s: hsl.s,
-        l: hsl.l,
-        a: alpha,
-        source: "hsl"
-      });
-    }
-  }, [onChange, hsl, rgb]);
-  return /* @__PURE__ */jsxRuntime.jsxs(ui.Flex, {
-    children: [/* @__PURE__ */jsxRuntime.jsx(ui.Box, {
-      flex: 2,
-      marginRight: 1,
-      children: /* @__PURE__ */jsxRuntime.jsx(common.EditableInput, {
-        style: inputStyles,
-        label: "hex",
-        value: hex == null ? void 0 : hex.replace("#", ""),
-        onChange: handleChange
-      })
-    }), /* @__PURE__ */jsxRuntime.jsx(ui.Box, {
-      flex: 1,
-      marginRight: 1,
-      children: /* @__PURE__ */jsxRuntime.jsx(common.EditableInput, {
-        style: inputStyles,
-        label: "r",
-        value: rgb == null ? void 0 : rgb.r,
-        onChange: handleChange,
-        dragLabel: true,
-        dragMax: 255
-      })
-    }), /* @__PURE__ */jsxRuntime.jsx(ui.Box, {
-      flex: 1,
-      marginRight: 1,
-      children: /* @__PURE__ */jsxRuntime.jsx(common.EditableInput, {
-        style: inputStyles,
-        label: "g",
-        value: rgb == null ? void 0 : rgb.g,
-        onChange: handleChange,
-        dragLabel: true,
-        dragMax: 255
-      })
-    }), /* @__PURE__ */jsxRuntime.jsx(ui.Box, {
-      flex: 1,
-      marginRight: 1,
-      children: /* @__PURE__ */jsxRuntime.jsx(common.EditableInput, {
-        style: inputStyles,
-        label: "b",
-        value: rgb == null ? void 0 : rgb.b,
-        onChange: handleChange,
-        dragLabel: true,
-        dragMax: 255
-      })
-    }), !disableAlpha && /* @__PURE__ */jsxRuntime.jsx(ui.Box, {
-      flex: 1,
-      children: /* @__PURE__ */jsxRuntime.jsx(common.EditableInput, {
-        style: inputStyles,
-        label: "a",
-        value: Math.round(((_a = rgb == null ? void 0 : rgb.a) != null ? _a : 1) * 100),
-        onChange: handleChange,
-        dragLabel: true,
-        dragMax: 100
-      })
-    })]
-  });
-};
-
-// This file is autogenerated. It's used to publish ESM to npm.
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: !0 });
+var sanity = require("sanity"), jsxRuntime = require("react/jsx-runtime"), icons = require("@sanity/icons"), ui = require("@sanity/ui"), react = require("react"), useEffectEvent = require("use-effect-event"), reactColor = require("react-color"), common = require("react-color/lib/components/common"), styledComponents = require("styled-components"), color$1 = require("react-color/lib/helpers/color");
 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;
+  return _typeof = typeof Symbol == "function" && typeof Symbol.iterator == "symbol" ? function(obj2) {
+    return typeof obj2;
+  } : function(obj2) {
+    return obj2 && typeof Symbol == "function" && obj2.constructor === Symbol && obj2 !== Symbol.prototype ? "symbol" : typeof obj2;
   }, _typeof(obj);
 }
-
-// https://github.com/bgrins/TinyColor
-// Brian Grinstead, MIT License
-
-var trimLeft = /^\s+/;
-var trimRight = /\s+$/;
-function tinycolor(color, opts) {
-  color = color ? color : "";
-  opts = opts || {};
-
-  // If input is already a tinycolor, return itself
-  if (color instanceof tinycolor) {
-    return color;
-  }
-  // If we are called as a function, call using new instead
-  if (!(this instanceof tinycolor)) {
-    return new tinycolor(color, opts);
-  }
-  var rgb = inputToRGB(color);
-  this._originalInput = color, this._r = rgb.r, this._g = rgb.g, this._b = rgb.b, this._a = rgb.a, this._roundA = Math.round(100 * this._a) / 100, this._format = opts.format || rgb.format;
-  this._gradientType = opts.gradientType;
-
-  // Don't let the range of [0,255] come back in [0,1].
-  // Potentially lose a little bit of precision here, but will fix issues where
-  // .5 gets interpreted as half of the total, instead of half of 1
-  // If it was supposed to be 128, this was already taken care of by `inputToRgb`
-  if (this._r < 1) this._r = Math.round(this._r);
-  if (this._g < 1) this._g = Math.round(this._g);
-  if (this._b < 1) this._b = Math.round(this._b);
-  this._ok = rgb.ok;
+var trimLeft = /^\s+/, trimRight = /\s+$/;
+function tinycolor(color2, opts) {
+  if (color2 = color2 || "", opts = opts || {}, color2 instanceof tinycolor)
+    return color2;
+  if (!(this instanceof tinycolor))
+    return new tinycolor(color2, opts);
+  var rgb = inputToRGB(color2);
+  this._originalInput = color2, this._r = rgb.r, this._g = rgb.g, this._b = rgb.b, this._a = rgb.a, this._roundA = Math.round(100 * this._a) / 100, this._format = opts.format || rgb.format, this._gradientType = opts.gradientType, this._r < 1 && (this._r = Math.round(this._r)), this._g < 1 && (this._g = Math.round(this._g)), this._b < 1 && (this._b = Math.round(this._b)), this._ok = rgb.ok;
 }
 tinycolor.prototype = {
-  isDark: function isDark() {
+  isDark: function() {
     return this.getBrightness() < 128;
   },
-  isLight: function isLight() {
+  isLight: function() {
     return !this.isDark();
   },
-  isValid: function isValid() {
+  isValid: function() {
     return this._ok;
   },
-  getOriginalInput: function getOriginalInput() {
+  getOriginalInput: function() {
     return this._originalInput;
   },
-  getFormat: function getFormat() {
+  getFormat: function() {
     return this._format;
   },
-  getAlpha: function getAlpha() {
+  getAlpha: function() {
     return this._a;
   },
-  getBrightness: function getBrightness() {
-    //http://www.w3.org/TR/AERT#color-contrast
+  getBrightness: function() {
     var rgb = this.toRgb();
-    return (rgb.r * 299 + rgb.g * 587 + rgb.b * 114) / 1000;
+    return (rgb.r * 299 + rgb.g * 587 + rgb.b * 114) / 1e3;
   },
-  getLuminance: function getLuminance() {
-    //http://www.w3.org/TR/2008/REC-WCAG20-20081211/#relativeluminancedef
-    var rgb = this.toRgb();
-    var RsRGB, GsRGB, BsRGB, R, G, B;
-    RsRGB = rgb.r / 255;
-    GsRGB = rgb.g / 255;
-    BsRGB = rgb.b / 255;
-    if (RsRGB <= 0.03928) R = RsRGB / 12.92;else R = Math.pow((RsRGB + 0.055) / 1.055, 2.4);
-    if (GsRGB <= 0.03928) G = GsRGB / 12.92;else G = Math.pow((GsRGB + 0.055) / 1.055, 2.4);
-    if (BsRGB <= 0.03928) B = BsRGB / 12.92;else B = Math.pow((BsRGB + 0.055) / 1.055, 2.4);
-    return 0.2126 * R + 0.7152 * G + 0.0722 * B;
+  getLuminance: function() {
+    var rgb = this.toRgb(), RsRGB, GsRGB, BsRGB, R, G, B;
+    return RsRGB = rgb.r / 255, GsRGB = rgb.g / 255, BsRGB = rgb.b / 255, RsRGB <= 0.03928 ? R = RsRGB / 12.92 : R = Math.pow((RsRGB + 0.055) / 1.055, 2.4), GsRGB <= 0.03928 ? G = GsRGB / 12.92 : G = Math.pow((GsRGB + 0.055) / 1.055, 2.4), BsRGB <= 0.03928 ? B = BsRGB / 12.92 : B = Math.pow((BsRGB + 0.055) / 1.055, 2.4), 0.2126 * R + 0.7152 * G + 0.0722 * B;
   },
-  setAlpha: function setAlpha(value) {
-    this._a = boundAlpha(value);
-    this._roundA = Math.round(100 * this._a) / 100;
-    return this;
+  setAlpha: function(value) {
+    return this._a = boundAlpha(value), this._roundA = Math.round(100 * this._a) / 100, this;
   },
-  toHsv: function toHsv() {
+  toHsv: function() {
     var hsv = rgbToHsv(this._r, this._g, this._b);
     return {
       h: hsv.h * 360,
@@ -275,14 +57,11 @@ tinycolor.prototype = {
       a: this._a
     };
   },
-  toHsvString: function toHsvString() {
-    var hsv = rgbToHsv(this._r, this._g, this._b);
-    var h = Math.round(hsv.h * 360),
-      s = Math.round(hsv.s * 100),
-      v = Math.round(hsv.v * 100);
+  toHsvString: function() {
+    var hsv = rgbToHsv(this._r, this._g, this._b), h = Math.round(hsv.h * 360), s = Math.round(hsv.s * 100), v = Math.round(hsv.v * 100);
     return this._a == 1 ? "hsv(" + h + ", " + s + "%, " + v + "%)" : "hsva(" + h + ", " + s + "%, " + v + "%, " + this._roundA + ")";
   },
-  toHsl: function toHsl() {
+  toHsl: function() {
     var hsl = rgbToHsl(this._r, this._g, this._b);
     return {
       h: hsl.h * 360,
@@ -291,26 +70,23 @@ tinycolor.prototype = {
       a: this._a
     };
   },
-  toHslString: function toHslString() {
-    var hsl = rgbToHsl(this._r, this._g, this._b);
-    var h = Math.round(hsl.h * 360),
-      s = Math.round(hsl.s * 100),
-      l = Math.round(hsl.l * 100);
+  toHslString: function() {
+    var hsl = rgbToHsl(this._r, this._g, this._b), h = Math.round(hsl.h * 360), s = Math.round(hsl.s * 100), l = Math.round(hsl.l * 100);
     return this._a == 1 ? "hsl(" + h + ", " + s + "%, " + l + "%)" : "hsla(" + h + ", " + s + "%, " + l + "%, " + this._roundA + ")";
   },
-  toHex: function toHex(allow3Char) {
+  toHex: function(allow3Char) {
     return rgbToHex(this._r, this._g, this._b, allow3Char);
   },
-  toHexString: function toHexString(allow3Char) {
+  toHexString: function(allow3Char) {
     return "#" + this.toHex(allow3Char);
   },
-  toHex8: function toHex8(allow4Char) {
+  toHex8: function(allow4Char) {
     return rgbaToHex(this._r, this._g, this._b, this._a, allow4Char);
   },
-  toHex8String: function toHex8String(allow4Char) {
+  toHex8String: function(allow4Char) {
     return "#" + this.toHex8(allow4Char);
   },
-  toRgb: function toRgb() {
+  toRgb: function() {
     return {
       r: Math.round(this._r),
       g: Math.round(this._g),
@@ -318,10 +94,10 @@ tinycolor.prototype = {
       a: this._a
     };
   },
-  toRgbString: function toRgbString() {
+  toRgbString: function() {
     return this._a == 1 ? "rgb(" + Math.round(this._r) + ", " + Math.round(this._g) + ", " + Math.round(this._b) + ")" : "rgba(" + Math.round(this._r) + ", " + Math.round(this._g) + ", " + Math.round(this._b) + ", " + this._roundA + ")";
   },
-  toPercentageRgb: function toPercentageRgb() {
+  toPercentageRgb: function() {
     return {
       r: Math.round(bound01(this._r, 255) * 100) + "%",
       g: Math.round(bound01(this._g, 255) * 100) + "%",
@@ -329,223 +105,104 @@ tinycolor.prototype = {
       a: this._a
     };
   },
-  toPercentageRgbString: function toPercentageRgbString() {
+  toPercentageRgbString: function() {
     return this._a == 1 ? "rgb(" + Math.round(bound01(this._r, 255) * 100) + "%, " + Math.round(bound01(this._g, 255) * 100) + "%, " + Math.round(bound01(this._b, 255) * 100) + "%)" : "rgba(" + Math.round(bound01(this._r, 255) * 100) + "%, " + Math.round(bound01(this._g, 255) * 100) + "%, " + Math.round(bound01(this._b, 255) * 100) + "%, " + this._roundA + ")";
   },
-  toName: function toName() {
-    if (this._a === 0) {
-      return "transparent";
-    }
-    if (this._a < 1) {
-      return false;
-    }
-    return hexNames[rgbToHex(this._r, this._g, this._b, true)] || false;
+  toName: function() {
+    return this._a === 0 ? "transparent" : this._a < 1 ? !1 : hexNames[rgbToHex(this._r, this._g, this._b, !0)] || !1;
   },
-  toFilter: function toFilter(secondColor) {
-    var hex8String = "#" + rgbaToArgbHex(this._r, this._g, this._b, this._a);
-    var secondHex8String = hex8String;
-    var gradientType = this._gradientType ? "GradientType = 1, " : "";
+  toFilter: function(secondColor) {
+    var hex8String = "#" + rgbaToArgbHex(this._r, this._g, this._b, this._a), secondHex8String = hex8String, gradientType = this._gradientType ? "GradientType = 1, " : "";
     if (secondColor) {
       var s = tinycolor(secondColor);
       secondHex8String = "#" + rgbaToArgbHex(s._r, s._g, s._b, s._a);
     }
     return "progid:DXImageTransform.Microsoft.gradient(" + gradientType + "startColorstr=" + hex8String + ",endColorstr=" + secondHex8String + ")";
   },
-  toString: function toString(format) {
+  toString: function(format) {
     var formatSet = !!format;
     format = format || this._format;
-    var formattedString = false;
-    var hasAlpha = this._a < 1 && this._a >= 0;
-    var needsAlphaFormat = !formatSet && hasAlpha && (format === "hex" || format === "hex6" || format === "hex3" || format === "hex4" || format === "hex8" || format === "name");
-    if (needsAlphaFormat) {
-      // Special case for "transparent", all other non-alpha formats
-      // will return rgba when there is transparency.
-      if (format === "name" && this._a === 0) {
-        return this.toName();
-      }
-      return this.toRgbString();
-    }
-    if (format === "rgb") {
-      formattedString = this.toRgbString();
-    }
-    if (format === "prgb") {
-      formattedString = this.toPercentageRgbString();
-    }
-    if (format === "hex" || format === "hex6") {
-      formattedString = this.toHexString();
-    }
-    if (format === "hex3") {
-      formattedString = this.toHexString(true);
-    }
-    if (format === "hex4") {
-      formattedString = this.toHex8String(true);
-    }
-    if (format === "hex8") {
-      formattedString = this.toHex8String();
-    }
-    if (format === "name") {
-      formattedString = this.toName();
-    }
-    if (format === "hsl") {
-      formattedString = this.toHslString();
-    }
-    if (format === "hsv") {
-      formattedString = this.toHsvString();
-    }
-    return formattedString || this.toHexString();
+    var formattedString = !1, hasAlpha = this._a < 1 && this._a >= 0, needsAlphaFormat = !formatSet && hasAlpha && (format === "hex" || format === "hex6" || format === "hex3" || format === "hex4" || format === "hex8" || format === "name");
+    return needsAlphaFormat ? format === "name" && this._a === 0 ? this.toName() : this.toRgbString() : (format === "rgb" && (formattedString = this.toRgbString()), format === "prgb" && (formattedString = this.toPercentageRgbString()), (format === "hex" || format === "hex6") && (formattedString = this.toHexString()), format === "hex3" && (formattedString = this.toHexString(!0)), format === "hex4" && (formattedString = this.toHex8String(!0)), format === "hex8" && (formattedString = this.toHex8String()), format === "name" && (formattedString = this.toName()), format === "hsl" && (formattedString = this.toHslString()), format === "hsv" && (formattedString = this.toHsvString()), formattedString || this.toHexString());
   },
-  clone: function clone() {
+  clone: function() {
     return tinycolor(this.toString());
   },
-  _applyModification: function _applyModification(fn, args) {
-    var color = fn.apply(null, [this].concat([].slice.call(args)));
-    this._r = color._r;
-    this._g = color._g;
-    this._b = color._b;
-    this.setAlpha(color._a);
-    return this;
+  _applyModification: function(fn, args) {
+    var color2 = fn.apply(null, [this].concat([].slice.call(args)));
+    return this._r = color2._r, this._g = color2._g, this._b = color2._b, this.setAlpha(color2._a), this;
   },
-  lighten: function lighten() {
+  lighten: function() {
     return this._applyModification(_lighten, arguments);
   },
-  brighten: function brighten() {
+  brighten: function() {
     return this._applyModification(_brighten, arguments);
   },
-  darken: function darken() {
+  darken: function() {
     return this._applyModification(_darken, arguments);
   },
-  desaturate: function desaturate() {
+  desaturate: function() {
     return this._applyModification(_desaturate, arguments);
   },
-  saturate: function saturate() {
+  saturate: function() {
     return this._applyModification(_saturate, arguments);
   },
-  greyscale: function greyscale() {
+  greyscale: function() {
     return this._applyModification(_greyscale, arguments);
   },
-  spin: function spin() {
+  spin: function() {
     return this._applyModification(_spin, arguments);
   },
-  _applyCombination: function _applyCombination(fn, args) {
+  _applyCombination: function(fn, args) {
     return fn.apply(null, [this].concat([].slice.call(args)));
   },
-  analogous: function analogous() {
+  analogous: function() {
     return this._applyCombination(_analogous, arguments);
   },
-  complement: function complement() {
+  complement: function() {
     return this._applyCombination(_complement, arguments);
   },
-  monochromatic: function monochromatic() {
+  monochromatic: function() {
     return this._applyCombination(_monochromatic, arguments);
   },
-  splitcomplement: function splitcomplement() {
+  splitcomplement: function() {
     return this._applyCombination(_splitcomplement, arguments);
   },
   // Disabled until https://github.com/bgrins/TinyColor/issues/254
   // polyad: function (number) {
   //   return this._applyCombination(polyad, [number]);
   // },
-  triad: function triad() {
+  triad: function() {
     return this._applyCombination(polyad, [3]);
   },
-  tetrad: function tetrad() {
+  tetrad: function() {
     return this._applyCombination(polyad, [4]);
   }
 };
-
-// If input is an object, force 1 into "1.0" to handle ratios properly
-// String input requires "1.0" as input, so 1 will be treated as 1
-tinycolor.fromRatio = function (color, opts) {
-  if (_typeof(color) == "object") {
+tinycolor.fromRatio = function(color2, opts) {
+  if (_typeof(color2) == "object") {
     var newColor = {};
-    for (var i in color) {
-      if (color.hasOwnProperty(i)) {
-        if (i === "a") {
-          newColor[i] = color[i];
-        } else {
-          newColor[i] = convertToPercentage(color[i]);
-        }
-      }
-    }
-    color = newColor;
+    for (var i in color2)
+      color2.hasOwnProperty(i) && (i === "a" ? newColor[i] = color2[i] : newColor[i] = convertToPercentage(color2[i]));
+    color2 = newColor;
   }
-  return tinycolor(color, opts);
+  return tinycolor(color2, opts);
 };
-
-// Given a string or object, convert that input to RGB
-// Possible string inputs:
-//
-//     "red"
-//     "#f00" or "f00"
-//     "#ff0000" or "ff0000"
-//     "#ff000000" or "ff000000"
-//     "rgb 255 0 0" or "rgb (255, 0, 0)"
-//     "rgb 1.0 0 0" or "rgb (1, 0, 0)"
-//     "rgba (255, 0, 0, 1)" or "rgba 255, 0, 0, 1"
-//     "rgba (1.0, 0, 0, 1)" or "rgba 1.0, 0, 0, 1"
-//     "hsl(0, 100%, 50%)" or "hsl 0 100% 50%"
-//     "hsla(0, 100%, 50%, 1)" or "hsla 0 100% 50%, 1"
-//     "hsv(0, 100%, 100%)" or "hsv 0 100% 100%"
-//
-function inputToRGB(color) {
+function inputToRGB(color2) {
   var rgb = {
     r: 0,
     g: 0,
     b: 0
-  };
-  var a = 1;
-  var s = null;
-  var v = null;
-  var l = null;
-  var ok = false;
-  var format = false;
-  if (typeof color == "string") {
-    color = stringInputToObject(color);
-  }
-  if (_typeof(color) == "object") {
-    if (isValidCSSUnit(color.r) && isValidCSSUnit(color.g) && isValidCSSUnit(color.b)) {
-      rgb = rgbToRgb(color.r, color.g, color.b);
-      ok = true;
-      format = String(color.r).substr(-1) === "%" ? "prgb" : "rgb";
-    } else if (isValidCSSUnit(color.h) && isValidCSSUnit(color.s) && isValidCSSUnit(color.v)) {
-      s = convertToPercentage(color.s);
-      v = convertToPercentage(color.v);
-      rgb = hsvToRgb(color.h, s, v);
-      ok = true;
-      format = "hsv";
-    } else if (isValidCSSUnit(color.h) && isValidCSSUnit(color.s) && isValidCSSUnit(color.l)) {
-      s = convertToPercentage(color.s);
-      l = convertToPercentage(color.l);
-      rgb = hslToRgb(color.h, s, l);
-      ok = true;
-      format = "hsl";
-    }
-    if (color.hasOwnProperty("a")) {
-      a = color.a;
-    }
-  }
-  a = boundAlpha(a);
-  return {
-    ok: ok,
-    format: color.format || format,
+  }, a = 1, s = null, v = null, l = null, ok = !1, format = !1;
+  return typeof color2 == "string" && (color2 = stringInputToObject(color2)), _typeof(color2) == "object" && (isValidCSSUnit(color2.r) && isValidCSSUnit(color2.g) && isValidCSSUnit(color2.b) ? (rgb = rgbToRgb(color2.r, color2.g, color2.b), ok = !0, format = String(color2.r).substr(-1) === "%" ? "prgb" : "rgb") : isValidCSSUnit(color2.h) && isValidCSSUnit(color2.s) && isValidCSSUnit(color2.v) ? (s = convertToPercentage(color2.s), v = convertToPercentage(color2.v), rgb = hsvToRgb(color2.h, s, v), ok = !0, format = "hsv") : isValidCSSUnit(color2.h) && isValidCSSUnit(color2.s) && isValidCSSUnit(color2.l) && (s = convertToPercentage(color2.s), l = convertToPercentage(color2.l), rgb = hslToRgb(color2.h, s, l), ok = !0, format = "hsl"), color2.hasOwnProperty("a") && (a = color2.a)), a = boundAlpha(a), {
+    ok,
+    format: color2.format || format,
     r: Math.min(255, Math.max(rgb.r, 0)),
     g: Math.min(255, Math.max(rgb.g, 0)),
     b: Math.min(255, Math.max(rgb.b, 0)),
-    a: a
+    a
   };
 }
-
-// Conversion Functions
-// --------------------
-
-// `rgbToHsl`, `rgbToHsv`, `hslToRgb`, `hsvToRgb` modified from:
-// <http://mjijackson.com/2008/02/rgb-to-hsl-and-rgb-to-hsv-color-model-conversion-algorithms-in-javascript>
-
-// `rgbToRgb`
-// Handle bounds / percentage checking to conform to CSS color spec
-// <http://www.w3.org/TR/css3-color/>
-// *Assumes:* r, g, b in [0, 255] or [0, 1]
-// *Returns:* { r, g, b } in [0, 255]
 function rgbToRgb(r, g, b) {
   return {
     r: bound01(r, 255) * 255,
@@ -553,26 +210,14 @@ function rgbToRgb(r, g, b) {
     b: bound01(b, 255) * 255
   };
 }
-
-// `rgbToHsl`
-// Converts an RGB color value to HSL.
-// *Assumes:* r, g, and b are contained in [0, 255] or [0, 1]
-// *Returns:* { h, s, l } in [0,1]
 function rgbToHsl(r, g, b) {
-  r = bound01(r, 255);
-  g = bound01(g, 255);
-  b = bound01(b, 255);
-  var max = Math.max(r, g, b),
-    min = Math.min(r, g, b);
-  var h,
-    s,
-    l = (max + min) / 2;
-  if (max == min) {
-    h = s = 0; // achromatic
-  } else {
+  r = bound01(r, 255), g = bound01(g, 255), b = bound01(b, 255);
+  var max = Math.max(r, g, b), min = Math.min(r, g, b), h, s, l = (max + min) / 2;
+  if (max == min)
+    h = s = 0;
+  else {
     var d = max - min;
-    s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
-    switch (max) {
+    switch (s = l > 0.5 ? d / (2 - max - min) : d / (max + min), max) {
       case r:
         h = (g - b) / d + (g < b ? 6 : 0);
         break;
@@ -586,37 +231,22 @@ function rgbToHsl(r, g, b) {
     h /= 6;
   }
   return {
-    h: h,
-    s: s,
-    l: l
+    h,
+    s,
+    l
   };
 }
-
-// `hslToRgb`
-// Converts an HSL color value to RGB.
-// *Assumes:* h is contained in [0, 1] or [0, 360] and s and l are contained [0, 1] or [0, 100]
-// *Returns:* { r, g, b } in the set [0, 255]
 function hslToRgb(h, s, l) {
   var r, g, b;
-  h = bound01(h, 360);
-  s = bound01(s, 100);
-  l = bound01(l, 100);
-  function hue2rgb(p, q, t) {
-    if (t < 0) t += 1;
-    if (t > 1) t -= 1;
-    if (t < 1 / 6) return p + (q - p) * 6 * t;
-    if (t < 1 / 2) return q;
-    if (t < 2 / 3) return p + (q - p) * (2 / 3 - t) * 6;
-    return p;
+  h = bound01(h, 360), s = bound01(s, 100), l = bound01(l, 100);
+  function hue2rgb(p2, q2, t) {
+    return t < 0 && (t += 1), t > 1 && (t -= 1), t < 1 / 6 ? p2 + (q2 - p2) * 6 * t : t < 1 / 2 ? q2 : t < 2 / 3 ? p2 + (q2 - p2) * (2 / 3 - t) * 6 : p2;
   }
-  if (s === 0) {
-    r = g = b = l; // achromatic
-  } else {
-    var q = l < 0.5 ? l * (1 + s) : l + s - l * s;
-    var p = 2 * l - q;
-    r = hue2rgb(p, q, h + 1 / 3);
-    g = hue2rgb(p, q, h);
-    b = hue2rgb(p, q, h - 1 / 3);
+  if (s === 0)
+    r = g = b = l;
+  else {
+    var q = l < 0.5 ? l * (1 + s) : l + s - l * s, p = 2 * l - q;
+    r = hue2rgb(p, q, h + 1 / 3), g = hue2rgb(p, q, h), b = hue2rgb(p, q, h - 1 / 3);
   }
   return {
     r: r * 255,
@@ -624,25 +254,12 @@ function hslToRgb(h, s, l) {
     b: b * 255
   };
 }
-
-// `rgbToHsv`
-// Converts an RGB color value to HSV
-// *Assumes:* r, g, and b are contained in the set [0, 255] or [0, 1]
-// *Returns:* { h, s, v } in [0,1]
 function rgbToHsv(r, g, b) {
-  r = bound01(r, 255);
-  g = bound01(g, 255);
-  b = bound01(b, 255);
-  var max = Math.max(r, g, b),
-    min = Math.min(r, g, b);
-  var h,
-    s,
-    v = max;
-  var d = max - min;
-  s = max === 0 ? 0 : d / max;
-  if (max == min) {
-    h = 0; // achromatic
-  } else {
+  r = bound01(r, 255), g = bound01(g, 255), b = bound01(b, 255);
+  var max = Math.max(r, g, b), min = Math.min(r, g, b), h, s, v = max, d = max - min;
+  if (s = max === 0 ? 0 : d / max, max == min)
+    h = 0;
+  else {
     switch (max) {
       case r:
         h = (g - b) / d + (g < b ? 6 : 0);
@@ -657,170 +274,92 @@ function rgbToHsv(r, g, b) {
     h /= 6;
   }
   return {
-    h: h,
-    s: s,
-    v: v
+    h,
+    s,
+    v
   };
 }
-
-// `hsvToRgb`
-// Converts an HSV color value to RGB.
-// *Assumes:* h is contained in [0, 1] or [0, 360] and s and v are contained in [0, 1] or [0, 100]
-// *Returns:* { r, g, b } in the set [0, 255]
 function hsvToRgb(h, s, v) {
-  h = bound01(h, 360) * 6;
-  s = bound01(s, 100);
-  v = bound01(v, 100);
-  var i = Math.floor(h),
-    f = h - i,
-    p = v * (1 - s),
-    q = v * (1 - f * s),
-    t = v * (1 - (1 - f) * s),
-    mod = i % 6,
-    r = [v, q, p, p, t, v][mod],
-    g = [t, v, v, q, p, p][mod],
-    b = [p, p, t, v, v, q][mod];
+  h = bound01(h, 360) * 6, s = bound01(s, 100), v = bound01(v, 100);
+  var i = Math.floor(h), f = h - i, p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s), mod = i % 6, r = [v, q, p, p, t, v][mod], g = [t, v, v, q, p, p][mod], b = [p, p, t, v, v, q][mod];
   return {
     r: r * 255,
     g: g * 255,
     b: b * 255
   };
 }
-
-// `rgbToHex`
-// Converts an RGB color to hex
-// Assumes r, g, and b are contained in the set [0, 255]
-// Returns a 3 or 6 character hex
 function rgbToHex(r, g, b, allow3Char) {
   var hex = [pad2(Math.round(r).toString(16)), pad2(Math.round(g).toString(16)), pad2(Math.round(b).toString(16))];
-
-  // Return a 3 character hex if possible
-  if (allow3Char && hex[0].charAt(0) == hex[0].charAt(1) && hex[1].charAt(0) == hex[1].charAt(1) && hex[2].charAt(0) == hex[2].charAt(1)) {
-    return hex[0].charAt(0) + hex[1].charAt(0) + hex[2].charAt(0);
-  }
-  return hex.join("");
+  return allow3Char && hex[0].charAt(0) == hex[0].charAt(1) && hex[1].charAt(0) == hex[1].charAt(1) && hex[2].charAt(0) == hex[2].charAt(1) ? hex[0].charAt(0) + hex[1].charAt(0) + hex[2].charAt(0) : hex.join("");
 }
-
-// `rgbaToHex`
-// Converts an RGBA color plus alpha transparency to hex
-// Assumes r, g, b are contained in the set [0, 255] and
-// a in [0, 1]. Returns a 4 or 8 character rgba hex
 function rgbaToHex(r, g, b, a, allow4Char) {
   var hex = [pad2(Math.round(r).toString(16)), pad2(Math.round(g).toString(16)), pad2(Math.round(b).toString(16)), pad2(convertDecimalToHex(a))];
-
-  // Return a 4 character hex if possible
-  if (allow4Char && hex[0].charAt(0) == hex[0].charAt(1) && hex[1].charAt(0) == hex[1].charAt(1) && hex[2].charAt(0) == hex[2].charAt(1) && hex[3].charAt(0) == hex[3].charAt(1)) {
-    return hex[0].charAt(0) + hex[1].charAt(0) + hex[2].charAt(0) + hex[3].charAt(0);
-  }
-  return hex.join("");
+  return allow4Char && hex[0].charAt(0) == hex[0].charAt(1) && hex[1].charAt(0) == hex[1].charAt(1) && hex[2].charAt(0) == hex[2].charAt(1) && hex[3].charAt(0) == hex[3].charAt(1) ? hex[0].charAt(0) + hex[1].charAt(0) + hex[2].charAt(0) + hex[3].charAt(0) : hex.join("");
 }
-
-// `rgbaToArgbHex`
-// Converts an RGBA color to an ARGB Hex8 string
-// Rarely used, but required for "toFilter()"
 function rgbaToArgbHex(r, g, b, a) {
   var hex = [pad2(convertDecimalToHex(a)), pad2(Math.round(r).toString(16)), pad2(Math.round(g).toString(16)), pad2(Math.round(b).toString(16))];
   return hex.join("");
 }
-
-// `equals`
-// Can be called with any tinycolor input
-tinycolor.equals = function (color1, color2) {
-  if (!color1 || !color2) return false;
-  return tinycolor(color1).toRgbString() == tinycolor(color2).toRgbString();
+tinycolor.equals = function(color1, color2) {
+  return !color1 || !color2 ? !1 : tinycolor(color1).toRgbString() == tinycolor(color2).toRgbString();
 };
-tinycolor.random = function () {
+tinycolor.random = function() {
   return tinycolor.fromRatio({
     r: Math.random(),
     g: Math.random(),
     b: Math.random()
   });
 };
-
-// Modification Functions
-// ----------------------
-// Thanks to less.js for some of the basics here
-// <https://github.com/cloudhead/less.js/blob/master/lib/less/functions.js>
-
-function _desaturate(color, amount) {
+function _desaturate(color2, amount) {
   amount = amount === 0 ? 0 : amount || 10;
-  var hsl = tinycolor(color).toHsl();
-  hsl.s -= amount / 100;
-  hsl.s = clamp01(hsl.s);
-  return tinycolor(hsl);
+  var hsl = tinycolor(color2).toHsl();
+  return hsl.s -= amount / 100, hsl.s = clamp01(hsl.s), tinycolor(hsl);
 }
-function _saturate(color, amount) {
+function _saturate(color2, amount) {
   amount = amount === 0 ? 0 : amount || 10;
-  var hsl = tinycolor(color).toHsl();
-  hsl.s += amount / 100;
-  hsl.s = clamp01(hsl.s);
-  return tinycolor(hsl);
+  var hsl = tinycolor(color2).toHsl();
+  return hsl.s += amount / 100, hsl.s = clamp01(hsl.s), tinycolor(hsl);
 }
-function _greyscale(color) {
-  return tinycolor(color).desaturate(100);
+function _greyscale(color2) {
+  return tinycolor(color2).desaturate(100);
 }
-function _lighten(color, amount) {
+function _lighten(color2, amount) {
   amount = amount === 0 ? 0 : amount || 10;
-  var hsl = tinycolor(color).toHsl();
-  hsl.l += amount / 100;
-  hsl.l = clamp01(hsl.l);
-  return tinycolor(hsl);
+  var hsl = tinycolor(color2).toHsl();
+  return hsl.l += amount / 100, hsl.l = clamp01(hsl.l), tinycolor(hsl);
 }
-function _brighten(color, amount) {
+function _brighten(color2, amount) {
   amount = amount === 0 ? 0 : amount || 10;
-  var rgb = tinycolor(color).toRgb();
-  rgb.r = Math.max(0, Math.min(255, rgb.r - Math.round(255 * -(amount / 100))));
-  rgb.g = Math.max(0, Math.min(255, rgb.g - Math.round(255 * -(amount / 100))));
-  rgb.b = Math.max(0, Math.min(255, rgb.b - Math.round(255 * -(amount / 100))));
-  return tinycolor(rgb);
+  var rgb = tinycolor(color2).toRgb();
+  return rgb.r = Math.max(0, Math.min(255, rgb.r - Math.round(255 * -(amount / 100)))), rgb.g = Math.max(0, Math.min(255, rgb.g - Math.round(255 * -(amount / 100)))), rgb.b = Math.max(0, Math.min(255, rgb.b - Math.round(255 * -(amount / 100)))), tinycolor(rgb);
 }
-function _darken(color, amount) {
+function _darken(color2, amount) {
   amount = amount === 0 ? 0 : amount || 10;
-  var hsl = tinycolor(color).toHsl();
-  hsl.l -= amount / 100;
-  hsl.l = clamp01(hsl.l);
-  return tinycolor(hsl);
+  var hsl = tinycolor(color2).toHsl();
+  return hsl.l -= amount / 100, hsl.l = clamp01(hsl.l), tinycolor(hsl);
 }
-
-// Spin takes a positive or negative amount within [-360, 360] indicating the change of hue.
-// Values outside of this range will be wrapped into this range.
-function _spin(color, amount) {
-  var hsl = tinycolor(color).toHsl();
-  var hue = (hsl.h + amount) % 360;
-  hsl.h = hue < 0 ? 360 + hue : hue;
-  return tinycolor(hsl);
+function _spin(color2, amount) {
+  var hsl = tinycolor(color2).toHsl(), hue = (hsl.h + amount) % 360;
+  return hsl.h = hue < 0 ? 360 + hue : hue, tinycolor(hsl);
 }
-
-// Combination Functions
-// ---------------------
-// Thanks to jQuery xColor for some of the ideas behind these
-// <https://github.com/infusion/jQuery-xcolor/blob/master/jquery.xcolor.js>
-
-function _complement(color) {
-  var hsl = tinycolor(color).toHsl();
-  hsl.h = (hsl.h + 180) % 360;
-  return tinycolor(hsl);
+function _complement(color2) {
+  var hsl = tinycolor(color2).toHsl();
+  return hsl.h = (hsl.h + 180) % 360, tinycolor(hsl);
 }
-function polyad(color, number) {
-  if (isNaN(number) || number <= 0) {
+function polyad(color2, number) {
+  if (isNaN(number) || number <= 0)
     throw new Error("Argument to polyad must be a positive number");
-  }
-  var hsl = tinycolor(color).toHsl();
-  var result = [tinycolor(color)];
-  var step = 360 / number;
-  for (var i = 1; i < number; i++) {
+  for (var hsl = tinycolor(color2).toHsl(), result = [tinycolor(color2)], step = 360 / number, i = 1; i < number; i++)
     result.push(tinycolor({
       h: (hsl.h + i * step) % 360,
       s: hsl.s,
       l: hsl.l
     }));
-  }
   return result;
 }
-function _splitcomplement(color) {
-  var hsl = tinycolor(color).toHsl();
-  var h = hsl.h;
-  return [tinycolor(color), tinycolor({
+function _splitcomplement(color2) {
+  var hsl = tinycolor(color2).toHsl(), h = hsl.h;
+  return [tinycolor(color2), tinycolor({
     h: (h + 72) % 360,
     s: hsl.s,
     l: hsl.l
@@ -830,46 +369,26 @@ function _splitcomplement(color) {
     l: hsl.l
   })];
 }
-function _analogous(color, results, slices) {
-  results = results || 6;
-  slices = slices || 30;
-  var hsl = tinycolor(color).toHsl();
-  var part = 360 / slices;
-  var ret = [tinycolor(color)];
-  for (hsl.h = (hsl.h - (part * results >> 1) + 720) % 360; --results;) {
-    hsl.h = (hsl.h + part) % 360;
-    ret.push(tinycolor(hsl));
-  }
+function _analogous(color2, results, slices) {
+  results = results || 6, slices = slices || 30;
+  var hsl = tinycolor(color2).toHsl(), part = 360 / slices, ret = [tinycolor(color2)];
+  for (hsl.h = (hsl.h - (part * results >> 1) + 720) % 360; --results; )
+    hsl.h = (hsl.h + part) % 360, ret.push(tinycolor(hsl));
   return ret;
 }
-function _monochromatic(color, results) {
+function _monochromatic(color2, results) {
   results = results || 6;
-  var hsv = tinycolor(color).toHsv();
-  var h = hsv.h,
-    s = hsv.s,
-    v = hsv.v;
-  var ret = [];
-  var modification = 1 / results;
-  while (results--) {
+  for (var hsv = tinycolor(color2).toHsv(), h = hsv.h, s = hsv.s, v = hsv.v, ret = [], modification = 1 / results; results--; )
     ret.push(tinycolor({
-      h: h,
-      s: s,
-      v: v
-    }));
-    v = (v + modification) % 1;
-  }
+      h,
+      s,
+      v
+    })), v = (v + modification) % 1;
   return ret;
 }
-
-// Utility Functions
-// ---------------------
-
-tinycolor.mix = function (color1, color2, amount) {
+tinycolor.mix = function(color1, color2, amount) {
   amount = amount === 0 ? 0 : amount || 50;
-  var rgb1 = tinycolor(color1).toRgb();
-  var rgb2 = tinycolor(color2).toRgb();
-  var p = amount / 100;
-  var rgba = {
+  var rgb1 = tinycolor(color1).toRgb(), rgb2 = tinycolor(color2).toRgb(), p = amount / 100, rgba = {
     r: (rgb2.r - rgb1.r) * p + rgb1.r,
     g: (rgb2.g - rgb1.g) * p + rgb1.g,
     b: (rgb2.b - rgb1.b) * p + rgb1.b,
@@ -877,35 +396,13 @@ tinycolor.mix = function (color1, color2, amount) {
   };
   return tinycolor(rgba);
 };
-
-// Readability Functions
-// ---------------------
-// <http://www.w3.org/TR/2008/REC-WCAG20-20081211/#contrast-ratiodef (WCAG Version 2)
-
-// `contrast`
-// Analyze the 2 colors and returns the color contrast defined by (WCAG Version 2)
-tinycolor.readability = function (color1, color2) {
-  var c1 = tinycolor(color1);
-  var c2 = tinycolor(color2);
+tinycolor.readability = function(color1, color2) {
+  var c1 = tinycolor(color1), c2 = tinycolor(color2);
   return (Math.max(c1.getLuminance(), c2.getLuminance()) + 0.05) / (Math.min(c1.getLuminance(), c2.getLuminance()) + 0.05);
 };
-
-// `isReadable`
-// Ensure that foreground and background color combinations meet WCAG2 guidelines.
-// The third argument is an optional Object.
-//      the 'level' property states 'AA' or 'AAA' - if missing or invalid, it defaults to 'AA';
-//      the 'size' property states 'large' or 'small' - if missing or invalid, it defaults to 'small'.
-// If the entire object is absent, isReadable defaults to {level:"AA",size:"small"}.
-
-// *Example*
-//    tinycolor.isReadable("#000", "#111") => false
-//    tinycolor.isReadable("#000", "#111",{level:"AA",size:"large"}) => false
-tinycolor.isReadable = function (color1, color2, wcag2) {
-  var readability = tinycolor.readability(color1, color2);
-  var wcag2Parms, out;
-  out = false;
-  wcag2Parms = validateWCAG2Parms(wcag2);
-  switch (wcag2Parms.level + wcag2Parms.size) {
+tinycolor.isReadable = function(color1, color2, wcag2) {
+  var readability = tinycolor.readability(color1, color2), wcag2Parms, out;
+  switch (out = !1, wcag2Parms = validateWCAG2Parms(wcag2), wcag2Parms.level + wcag2Parms.size) {
     case "AAsmall":
     case "AAAlarge":
       out = readability >= 4.5;
@@ -919,46 +416,16 @@ tinycolor.isReadable = function (color1, color2, wcag2) {
   }
   return out;
 };
-
-// `mostReadable`
-// Given a base color and a list of possible foreground or background
-// colors for that base, returns the most readable color.
-// Optionally returns Black or White if the most readable color is unreadable.
-// *Example*
-//    tinycolor.mostReadable(tinycolor.mostReadable("#123", ["#124", "#125"],{includeFallbackColors:false}).toHexString(); // "#112255"
-//    tinycolor.mostReadable(tinycolor.mostReadable("#123", ["#124", "#125"],{includeFallbackColors:true}).toHexString();  // "#ffffff"
-//    tinycolor.mostReadable("#a8015a", ["#faf3f3"],{includeFallbackColors:true,level:"AAA",size:"large"}).toHexString(); // "#faf3f3"
-//    tinycolor.mostReadable("#a8015a", ["#faf3f3"],{includeFallbackColors:true,level:"AAA",size:"small"}).toHexString(); // "#ffffff"
-tinycolor.mostReadable = function (baseColor, colorList, args) {
-  var bestColor = null;
-  var bestScore = 0;
-  var readability;
-  var includeFallbackColors, level, size;
-  args = args || {};
-  includeFallbackColors = args.includeFallbackColors;
-  level = args.level;
-  size = args.size;
-  for (var i = 0; i < colorList.length; i++) {
-    readability = tinycolor.readability(baseColor, colorList[i]);
-    if (readability > bestScore) {
-      bestScore = readability;
-      bestColor = tinycolor(colorList[i]);
-    }
-  }
-  if (tinycolor.isReadable(baseColor, bestColor, {
-    level: level,
-    size: size
-  }) || !includeFallbackColors) {
-    return bestColor;
-  } else {
-    args.includeFallbackColors = false;
-    return tinycolor.mostReadable(baseColor, ["#fff", "#000"], args);
-  }
+tinycolor.mostReadable = function(baseColor, colorList, args) {
+  var bestColor = null, bestScore = 0, readability, includeFallbackColors, level, size;
+  args = args || {}, includeFallbackColors = args.includeFallbackColors, level = args.level, size = args.size;
+  for (var i = 0; i < colorList.length; i++)
+    readability = tinycolor.readability(baseColor, colorList[i]), readability > bestScore && (bestScore = readability, bestColor = tinycolor(colorList[i]));
+  return tinycolor.isReadable(baseColor, bestColor, {
+    level,
+    size
+  }) || !includeFallbackColors ? bestColor : (args.includeFallbackColors = !1, tinycolor.mostReadable(baseColor, ["#fff", "#000"], args));
 };
-
-// Big List of Colors
-// ------------------
-// <https://www.w3.org/TR/css-color-4/#named-colors>
 var names = tinycolor.names = {
   aliceblue: "f0f8ff",
   antiquewhite: "faebd7",
@@ -1109,111 +576,47 @@ var names = tinycolor.names = {
   whitesmoke: "f5f5f5",
   yellow: "ff0",
   yellowgreen: "9acd32"
-};
-
-// Make it easy to access colors via `hexNames[hex]`
-var hexNames = tinycolor.hexNames = flip(names);
-
-// Utilities
-// ---------
-
-// `{ 'name1': 'val1' }` becomes `{ 'val1': 'name1' }`
+}, hexNames = tinycolor.hexNames = flip(names);
 function flip(o) {
   var flipped = {};
-  for (var i in o) {
-    if (o.hasOwnProperty(i)) {
-      flipped[o[i]] = i;
-    }
-  }
+  for (var i in o)
+    o.hasOwnProperty(i) && (flipped[o[i]] = i);
   return flipped;
 }
-
-// Return a valid alpha value [0,1] with all invalid values being set to 1
 function boundAlpha(a) {
-  a = parseFloat(a);
-  if (isNaN(a) || a < 0 || a > 1) {
-    a = 1;
-  }
-  return a;
+  return a = parseFloat(a), (isNaN(a) || a < 0 || a > 1) && (a = 1), a;
 }
-
-// Take input from [0, n] and return it as [0, 1]
 function bound01(n, max) {
-  if (isOnePointZero(n)) n = "100%";
+  isOnePointZero(n) && (n = "100%");
   var processPercent = isPercentage(n);
-  n = Math.min(max, Math.max(0, parseFloat(n)));
-
-  // Automatically convert percentage into number
-  if (processPercent) {
-    n = parseInt(n * max, 10) / 100;
-  }
-
-  // Handle floating point rounding errors
-  if (Math.abs(n - max) < 0.000001) {
-    return 1;
-  }
-
-  // Convert into [0, 1] range if it isn't already
-  return n % max / parseFloat(max);
+  return n = Math.min(max, Math.max(0, parseFloat(n))), processPercent && (n = parseInt(n * max, 10) / 100), Math.abs(n - max) < 1e-6 ? 1 : n % max / parseFloat(max);
 }
-
-// Force a number between 0 and 1
 function clamp01(val) {
   return Math.min(1, Math.max(0, val));
 }
-
-// Parse a base-16 hex value into a base-10 integer
 function parseIntFromHex(val) {
   return parseInt(val, 16);
 }
-
-// Need to handle 1.0 as 100%, since once it is a number, there is no difference between it and 1
-// <http://stackoverflow.com/questions/7422072/javascript-how-to-detect-number-as-a-decimal-including-1-0>
 function isOnePointZero(n) {
   return typeof n == "string" && n.indexOf(".") != -1 && parseFloat(n) === 1;
 }
-
-// Check to see if string passed in is a percentage
 function isPercentage(n) {
-  return typeof n === "string" && n.indexOf("%") != -1;
+  return typeof n == "string" && n.indexOf("%") != -1;
 }
-
-// Force a hex value to have 2 characters
 function pad2(c) {
   return c.length == 1 ? "0" + c : "" + c;
 }
-
-// Replace a decimal with it's percentage value
 function convertToPercentage(n) {
-  if (n <= 1) {
-    n = n * 100 + "%";
-  }
-  return n;
+  return n <= 1 && (n = n * 100 + "%"), n;
 }
-
-// Converts a decimal to a hex value
 function convertDecimalToHex(d) {
   return Math.round(parseFloat(d) * 255).toString(16);
 }
-// Converts a hex value to a decimal
 function convertHexToDecimal(h) {
   return parseIntFromHex(h) / 255;
 }
-var matchers = function () {
-  // <http://www.w3.org/TR/css3-values/#integers>
-  var CSS_INTEGER = "[-\\+]?\\d+%?";
-
-  // <http://www.w3.org/TR/css3-values/#number-value>
-  var CSS_NUMBER = "[-\\+]?\\d*\\.\\d+%?";
-
-  // Allow positive/negative integer/number.  Don't capture the either/or, just the entire outcome.
-  var CSS_UNIT = "(?:" + CSS_NUMBER + ")|(?:" + CSS_INTEGER + ")";
-
-  // Actual matching.
-  // Parentheses and commas are optional, but not required.
-  // Whitespace can take the place of commas or opening paren
-  var PERMISSIVE_MATCH3 = "[\\s|\\(]+(" + CSS_UNIT + ")[,|\\s]+(" + CSS_UNIT + ")[,|\\s]+(" + CSS_UNIT + ")\\s*\\)?";
-  var PERMISSIVE_MATCH4 = "[\\s|\\(]+(" + CSS_UNIT + ")[,|\\s]+(" + CSS_UNIT + ")[,|\\s]+(" + CSS_UNIT + ")[,|\\s]+(" + CSS_UNIT + ")\\s*\\)?";
+var matchers = function() {
+  var CSS_INTEGER = "[-\\+]?\\d+%?", CSS_NUMBER = "[-\\+]?\\d*\\.\\d+%?", CSS_UNIT = "(?:" + CSS_NUMBER + ")|(?:" + CSS_INTEGER + ")", PERMISSIVE_MATCH3 = "[\\s|\\(]+(" + CSS_UNIT + ")[,|\\s]+(" + CSS_UNIT + ")[,|\\s]+(" + CSS_UNIT + ")\\s*\\)?", PERMISSIVE_MATCH4 = "[\\s|\\(]+(" + CSS_UNIT + ")[,|\\s]+(" + CSS_UNIT + ")[,|\\s]+(" + CSS_UNIT + ")[,|\\s]+(" + CSS_UNIT + ")\\s*\\)?";
   return {
     CSS_UNIT: new RegExp(CSS_UNIT),
     rgb: new RegExp("rgb" + PERMISSIVE_MATCH3),
@@ -1228,24 +631,15 @@ var matchers = function () {
     hex8: /^#?([0-9a-fA-F]{2})([0-9a-fA-F]{2})([0-9a-fA-F]{2})([0-9a-fA-F]{2})$/
   };
 }();
-
-// `isValidCSSUnit`
-// Take in a single string / number and check to see if it looks like a CSS unit
-// (see `matchers` above for definition).
-function isValidCSSUnit(color) {
-  return !!matchers.CSS_UNIT.exec(color);
+function isValidCSSUnit(color2) {
+  return !!matchers.CSS_UNIT.exec(color2);
 }
-
-// `stringInputToObject`
-// Permissive string parsing.  Take in a number of formats, and output an object
-// based on detected format.  Returns `{ r, g, b }` or `{ h, s, l }` or `{ h, s, v}`
-function stringInputToObject(color) {
-  color = color.replace(trimLeft, "").replace(trimRight, "").toLowerCase();
-  var named = false;
-  if (names[color]) {
-    color = names[color];
-    named = true;
-  } else if (color == "transparent") {
+function stringInputToObject(color2) {
+  color2 = color2.replace(trimLeft, "").replace(trimRight, "").toLowerCase();
+  var named = !1;
+  if (names[color2])
+    color2 = names[color2], named = !0;
+  else if (color2 == "transparent")
     return {
       r: 0,
       g: 0,
@@ -1253,421 +647,419 @@ function stringInputToObject(color) {
       a: 0,
       format: "name"
     };
-  }
-
-  // Try to match string input using regular expressions.
-  // Keep most of the number bounding out of this function - don't worry about [0,1] or [0,100] or [0,360]
-  // Just return an object and let the conversion functions handle that.
-  // This way the result will be the same whether the tinycolor is initialized with string or object.
   var match;
-  if (match = matchers.rgb.exec(color)) {
-    return {
-      r: match[1],
-      g: match[2],
-      b: match[3]
-    };
-  }
-  if (match = matchers.rgba.exec(color)) {
-    return {
-      r: match[1],
-      g: match[2],
-      b: match[3],
-      a: match[4]
-    };
-  }
-  if (match = matchers.hsl.exec(color)) {
-    return {
-      h: match[1],
-      s: match[2],
-      l: match[3]
-    };
-  }
-  if (match = matchers.hsla.exec(color)) {
-    return {
-      h: match[1],
-      s: match[2],
-      l: match[3],
-      a: match[4]
-    };
-  }
-  if (match = matchers.hsv.exec(color)) {
-    return {
-      h: match[1],
-      s: match[2],
-      v: match[3]
-    };
-  }
-  if (match = matchers.hsva.exec(color)) {
-    return {
-      h: match[1],
-      s: match[2],
-      v: match[3],
-      a: match[4]
-    };
-  }
-  if (match = matchers.hex8.exec(color)) {
-    return {
-      r: parseIntFromHex(match[1]),
-      g: parseIntFromHex(match[2]),
-      b: parseIntFromHex(match[3]),
-      a: convertHexToDecimal(match[4]),
-      format: named ? "name" : "hex8"
-    };
-  }
-  if (match = matchers.hex6.exec(color)) {
-    return {
-      r: parseIntFromHex(match[1]),
-      g: parseIntFromHex(match[2]),
-      b: parseIntFromHex(match[3]),
-      format: named ? "name" : "hex"
-    };
-  }
-  if (match = matchers.hex4.exec(color)) {
-    return {
-      r: parseIntFromHex(match[1] + "" + match[1]),
-      g: parseIntFromHex(match[2] + "" + match[2]),
-      b: parseIntFromHex(match[3] + "" + match[3]),
-      a: convertHexToDecimal(match[4] + "" + match[4]),
-      format: named ? "name" : "hex8"
-    };
-  }
-  if (match = matchers.hex3.exec(color)) {
-    return {
-      r: parseIntFromHex(match[1] + "" + match[1]),
-      g: parseIntFromHex(match[2] + "" + match[2]),
-      b: parseIntFromHex(match[3] + "" + match[3]),
-      format: named ? "name" : "hex"
-    };
-  }
-  return false;
+  return (match = matchers.rgb.exec(color2)) ? {
+    r: match[1],
+    g: match[2],
+    b: match[3]
+  } : (match = matchers.rgba.exec(color2)) ? {
+    r: match[1],
+    g: match[2],
+    b: match[3],
+    a: match[4]
+  } : (match = matchers.hsl.exec(color2)) ? {
+    h: match[1],
+    s: match[2],
+    l: match[3]
+  } : (match = matchers.hsla.exec(color2)) ? {
+    h: match[1],
+    s: match[2],
+    l: match[3],
+    a: match[4]
+  } : (match = matchers.hsv.exec(color2)) ? {
+    h: match[1],
+    s: match[2],
+    v: match[3]
+  } : (match = matchers.hsva.exec(color2)) ? {
+    h: match[1],
+    s: match[2],
+    v: match[3],
+    a: match[4]
+  } : (match = matchers.hex8.exec(color2)) ? {
+    r: parseIntFromHex(match[1]),
+    g: parseIntFromHex(match[2]),
+    b: parseIntFromHex(match[3]),
+    a: convertHexToDecimal(match[4]),
+    format: named ? "name" : "hex8"
+  } : (match = matchers.hex6.exec(color2)) ? {
+    r: parseIntFromHex(match[1]),
+    g: parseIntFromHex(match[2]),
+    b: parseIntFromHex(match[3]),
+    format: named ? "name" : "hex"
+  } : (match = matchers.hex4.exec(color2)) ? {
+    r: parseIntFromHex(match[1] + "" + match[1]),
+    g: parseIntFromHex(match[2] + "" + match[2]),
+    b: parseIntFromHex(match[3] + "" + match[3]),
+    a: convertHexToDecimal(match[4] + "" + match[4]),
+    format: named ? "name" : "hex8"
+  } : (match = matchers.hex3.exec(color2)) ? {
+    r: parseIntFromHex(match[1] + "" + match[1]),
+    g: parseIntFromHex(match[2] + "" + match[2]),
+    b: parseIntFromHex(match[3] + "" + match[3]),
+    format: named ? "name" : "hex"
+  } : !1;
 }
 function validateWCAG2Parms(parms) {
-  // return valid WCAG2 parms for isReadable.
-  // If input parms are invalid, return {"level":"AA", "size":"small"}
   var level, size;
-  parms = parms || {
+  return parms = parms || {
     level: "AA",
     size: "small"
-  };
-  level = (parms.level || "AA").toUpperCase();
-  size = (parms.size || "small").toLowerCase();
-  if (level !== "AA" && level !== "AAA") {
-    level = "AA";
-  }
-  if (size !== "small" && size !== "large") {
-    size = "small";
-  }
-  return {
-    level: level,
-    size: size
+  }, level = (parms.level || "AA").toUpperCase(), size = (parms.size || "small").toLowerCase(), level !== "AA" && level !== "AAA" && (level = "AA"), size !== "small" && size !== "large" && (size = "small"), {
+    level,
+    size
   };
 }
-var __freeze$1 = Object.freeze;
-var __defProp$1 = Object.defineProperty;
-var __template$1 = (cooked, raw) => __freeze$1(__defProp$1(cooked, "raw", {
-  value: __freeze$1(raw || cooked.slice())
-}));
-var _a$1, _b$1, _c;
-const ColorListWrap = styled__default.default(ui.Flex)(_a$1 || (_a$1 = __template$1(["\n  gap: 0.25em;\n"])));
-const ColorBoxContainer = styled__default.default.div(_b$1 || (_b$1 = __template$1(["\n  width: 2.1em;\n  height: 2.1em;\n  cursor: pointer;\n  position: relative;\n  overflow: hidden;\n  border-radius: 3px;\n  background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAAXNSR0IArs4c6QAAADFJREFUOE9jZGBgEGHAD97gk2YcNYBhmIQBgWSAP52AwoAQwJvQRg1gACckQoC2gQgAIF8IscwEtKYAAAAASUVORK5CYII=') left center #fff;\n"])));
-const ColorBox$1 = styled__default.default.div(_c || (_c = __template$1(["\n  border-radius: inherit;\n  box-shadow: inset 0 0 0 1px var(--card-shadow-outline-color);\n  content: '';\n  position: absolute;\n  inset: 0;\n  z-index: 1;\n"])));
-const validateColors = colors => colors.reduce((cls, c) => {
-  const color = c.hex ? tinycolor(c.hex) : tinycolor(c);
-  if (color.isValid()) {
-    cls.push({
-      color: c,
-      backgroundColor: color.toRgbString()
-    });
-  }
-  return cls;
-}, []);
-const ColorList = _ref2 => {
-  let {
-    colors,
-    onChange
-  } = _ref2;
-  if (!colors) return null;
-  return /* @__PURE__ */jsxRuntime.jsx(ColorListWrap, {
-    wrap: "wrap",
-    children: validateColors(colors).map((_ref3, idx) => {
-      let {
-        color,
-        backgroundColor
-      } = _ref3;
-      return /* @__PURE__ */jsxRuntime.jsx(ColorBoxContainer, {
-        onClick: () => {
-          onChange(color);
-        },
-        children: /* @__PURE__ */jsxRuntime.jsx(ColorBox$1, {
-          style: {
-            background: backgroundColor
-          }
-        })
-      }, "".concat(backgroundColor, "-").concat(idx));
-    })
-  });
-};
-var __freeze = Object.freeze;
-var __defProp = Object.defineProperty;
-var __template = (cooked, raw) => __freeze(__defProp(cooked, "raw", {
-  value: __freeze(raw || cooked.slice())
-}));
-var _a, _b;
-const ColorBox = styled__default.default(ui.Box)(_a || (_a = __template(["\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n"])));
-const ReadOnlyContainer = styled__default.default(ui.Flex)(_b || (_b = __template(["\n  margin-top: 6rem;\n  background-color: var(--card-bg-color);\n  position: relative;\n  width: 100%;\n"])));
-const ColorPickerInner = props => {
-  var _a2, _b2, _c;
+const ColorListWrap = styledComponents.styled(ui.Flex)`
+  gap: 0.25em;
+`, ColorBoxContainer = styledComponents.styled.div`
+  width: 2.1em;
+  height: 2.1em;
+  cursor: pointer;
+  position: relative;
+  overflow: hidden;
+  border-radius: 3px;
+  background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAAXNSR0IArs4c6QAAADFJREFUOE9jZGBgEGHAD97gk2YcNYBhmIQBgWSAP52AwoAQwJvQRg1gACckQoC2gQgAIF8IscwEtKYAAAAASUVORK5CYII=')
+    left center #fff;
+`, ColorBox$1 = styledComponents.styled.div`
+  border-radius: inherit;
+  box-shadow: inset 0 0 0 1px var(--card-shadow-outline-color);
+  content: '';
+  position: absolute;
+  inset: 0;
+  z-index: 1;
+`, validateColors = (colors) => colors.reduce((cls, c) => {
+  const color2 = c.hex ? tinycolor(c.hex) : tinycolor(c);
+  return color2.isValid() && cls.push({
+    color: c,
+    backgroundColor: color2.toRgbString()
+  }), cls;
+}, []), ColorList = react.memo(function({ colors, onChange }) {
+  return colors ? /* @__PURE__ */ jsxRuntime.jsx(ColorListWrap, { wrap: "wrap", children: validateColors(colors).map(({ color: color2, backgroundColor }, idx) => /* @__PURE__ */ jsxRuntime.jsx(
+    ColorBoxContainer,
+    {
+      onClick: () => {
+        onChange(color2);
+      },
+      children: /* @__PURE__ */ jsxRuntime.jsx(ColorBox$1, { style: { background: backgroundColor } })
+    },
+    `${backgroundColor}-${idx}`
+  )) }) : null;
+}), ColorPickerFields = ({
+  onChange,
+  rgb,
+  hsl,
+  hex,
+  disableAlpha
+}) => {
+  const { sanity: sanity2 } = ui.useTheme(), inputStyles = react.useMemo(
+    () => ({
+      input: {
+        width: "80%",
+        padding: "4px 10% 3px",
+        border: "none",
+        boxShadow: `inset 0 0 0 1px ${sanity2.color.input.default.enabled.border}`,
+        color: sanity2.color.input.default.enabled.fg,
+        backgroundColor: sanity2.color.input.default.enabled.bg,
+        fontSize: sanity2.fonts.text.sizes[0].fontSize,
+        textAlign: "center"
+      },
+      label: {
+        display: "block",
+        textAlign: "center",
+        fontSize: sanity2.fonts.label.sizes[0].fontSize,
+        color: sanity2.color.base.fg,
+        paddingTop: "3px",
+        paddingBottom: "4px",
+        textTransform: "capitalize"
+      }
+    }),
+    [sanity2]
+  ), handleChange = react.useCallback(
+    (data) => {
+      if ("hex" in data && data.hex && color$1.isValidHex(data.hex))
+        onChange({
+          hex: data.hex,
+          source: "hex"
+        });
+      else if (rgb && ("r" in data && data.r || "g" in data && data.g || "b" in data && data.b))
+        onChange({
+          r: Number(data.r) || rgb.r,
+          g: Number(data.g) || rgb.g,
+          b: Number(data.b) || rgb.b,
+          a: rgb.a,
+          source: "rgb"
+        });
+      else if (hsl && "a" in data && data.a) {
+        let alpha = Number(data.a);
+        alpha < 0 ? alpha = 0 : alpha > 100 && (alpha = 100), alpha /= 100, onChange({
+          h: hsl.h,
+          s: hsl.s,
+          l: hsl.l,
+          a: alpha,
+          source: "hsl"
+        });
+      }
+    },
+    [onChange, hsl, rgb]
+  );
+  return /* @__PURE__ */ jsxRuntime.jsxs(ui.Flex, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(ui.Box, { flex: 2, marginRight: 1, children: /* @__PURE__ */ jsxRuntime.jsx(
+      common.EditableInput,
+      {
+        style: inputStyles,
+        label: "hex",
+        value: hex?.replace("#", ""),
+        onChange: handleChange
+      }
+    ) }),
+    /* @__PURE__ */ jsxRuntime.jsx(ui.Box, { flex: 1, marginRight: 1, children: /* @__PURE__ */ jsxRuntime.jsx(
+      common.EditableInput,
+      {
+        style: inputStyles,
+        label: "r",
+        value: rgb?.r,
+        onChange: handleChange,
+        dragLabel: !0,
+        dragMax: 255
+      }
+    ) }),
+    /* @__PURE__ */ jsxRuntime.jsx(ui.Box, { flex: 1, marginRight: 1, children: /* @__PURE__ */ jsxRuntime.jsx(
+      common.EditableInput,
+      {
+        style: inputStyles,
+        label: "g",
+        value: rgb?.g,
+        onChange: handleChange,
+        dragLabel: !0,
+        dragMax: 255
+      }
+    ) }),
+    /* @__PURE__ */ jsxRuntime.jsx(ui.Box, { flex: 1, marginRight: 1, children: /* @__PURE__ */ jsxRuntime.jsx(
+      common.EditableInput,
+      {
+        style: inputStyles,
+        label: "b",
+        value: rgb?.b,
+        onChange: handleChange,
+        dragLabel: !0,
+        dragMax: 255
+      }
+    ) }),
+    !disableAlpha && /* @__PURE__ */ jsxRuntime.jsx(ui.Box, { flex: 1, children: /* @__PURE__ */ jsxRuntime.jsx(
+      common.EditableInput,
+      {
+        style: inputStyles,
+        label: "a",
+        value: Math.round((rgb?.a ?? 1) * 100),
+        onChange: handleChange,
+        dragLabel: !0,
+        dragMax: 100
+      }
+    ) })
+  ] });
+}, ColorBox = styledComponents.styled(ui.Box)`
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+`, ReadOnlyContainer = styledComponents.styled(ui.Flex)`
+  margin-top: 6rem;
+  background-color: var(--card-bg-color);
+  position: relative;
+  width: 100%;
+`, ColorPickerInner = (props) => {
   const {
     width,
-    color: {
-      rgb,
-      hex,
-      hsv,
-      hsl
-    },
+    color: { rgb, hex, hsv, hsl },
     onChange,
     onUnset,
     disableAlpha,
     colorList,
     readOnly
   } = props;
-  if (!hsl || !hsv) {
-    return null;
-  }
-  return /* @__PURE__ */jsxRuntime.jsx("div", {
-    style: {
-      width
-    },
-    children: /* @__PURE__ */jsxRuntime.jsx(ui.Card, {
-      padding: 1,
-      border: true,
-      radius: 1,
-      children: /* @__PURE__ */jsxRuntime.jsxs(ui.Stack, {
-        space: 2,
-        children: [!readOnly && /* @__PURE__ */jsxRuntime.jsxs(jsxRuntime.Fragment, {
-          children: [/* @__PURE__ */jsxRuntime.jsx(ui.Card, {
-            overflow: "hidden",
-            style: {
-              position: "relative",
-              height: "5em"
-            },
-            children: /* @__PURE__ */jsxRuntime.jsx(common.Saturation, {
-              onChange,
-              hsl,
-              hsv
-            })
-          }), /* @__PURE__ */jsxRuntime.jsx(ui.Card, {
-            shadow: 1,
-            radius: 3,
-            overflow: "hidden",
-            style: {
-              position: "relative",
-              height: "10px"
-            },
-            children: /* @__PURE__ */jsxRuntime.jsx(common.Hue, {
-              hsl,
-              onChange: !readOnly && onChange
-            })
-          }), !disableAlpha && /* @__PURE__ */jsxRuntime.jsx(ui.Card, {
-            shadow: 1,
-            radius: 3,
-            overflow: "hidden",
-            style: {
-              position: "relative",
-              height: "10px",
-              background: "#fff"
-            },
-            children: /* @__PURE__ */jsxRuntime.jsx(common.Alpha, {
-              rgb,
-              hsl,
-              onChange
-            })
-          })]
-        }), /* @__PURE__ */jsxRuntime.jsxs(ui.Flex, {
-          children: [/* @__PURE__ */jsxRuntime.jsxs(ui.Card, {
-            flex: 1,
-            radius: 2,
-            overflow: "hidden",
-            style: {
-              position: "relative",
-              minWidth: "4em",
-              background: "#fff"
-            },
-            children: [/* @__PURE__ */jsxRuntime.jsx(common.Checkboard, {}), /* @__PURE__ */jsxRuntime.jsx(ColorBox, {
-              style: {
-                backgroundColor: "rgba(".concat(rgb == null ? void 0 : rgb.r, ",").concat(rgb == null ? void 0 : rgb.g, ",").concat(rgb == null ? void 0 : rgb.b, ",").concat(rgb == null ? void 0 : rgb.a, ")")
+  return !hsl || !hsv ? null : /* @__PURE__ */ jsxRuntime.jsx("div", { style: { width }, children: /* @__PURE__ */ jsxRuntime.jsx(ui.Card, { padding: 1, border: !0, radius: 1, children: /* @__PURE__ */ jsxRuntime.jsxs(ui.Stack, { space: 2, children: [
+    !readOnly && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+      /* @__PURE__ */ jsxRuntime.jsx(ui.Card, { overflow: "hidden", style: { position: "relative", height: "5em" }, children: /* @__PURE__ */ jsxRuntime.jsx(common.Saturation, { onChange, hsl, hsv }) }),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        ui.Card,
+        {
+          shadow: 1,
+          radius: 3,
+          overflow: "hidden",
+          style: { position: "relative", height: "10px" },
+          children: /* @__PURE__ */ jsxRuntime.jsx(common.Hue, { hsl, onChange: !readOnly && onChange })
+        }
+      ),
+      !disableAlpha && /* @__PURE__ */ jsxRuntime.jsx(
+        ui.Card,
+        {
+          shadow: 1,
+          radius: 3,
+          overflow: "hidden",
+          style: { position: "relative", height: "10px", background: "#fff" },
+          children: /* @__PURE__ */ jsxRuntime.jsx(common.Alpha, { rgb, hsl, onChange })
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsxs(ui.Flex, { children: [
+      /* @__PURE__ */ jsxRuntime.jsxs(
+        ui.Card,
+        {
+          flex: 1,
+          radius: 2,
+          overflow: "hidden",
+          style: { position: "relative", minWidth: "4em", background: "#fff" },
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsx(common.Checkboard, {}),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              ColorBox,
+              {
+                style: {
+                  backgroundColor: `rgba(${rgb?.r},${rgb?.g},${rgb?.b},${rgb?.a})`
+                }
               }
-            }), readOnly && /* @__PURE__ */jsxRuntime.jsx(ReadOnlyContainer, {
-              padding: 2,
-              paddingBottom: 1,
-              sizing: "border",
-              justify: "space-between",
-              children: /* @__PURE__ */jsxRuntime.jsxs(ui.Stack, {
-                space: 3,
-                marginTop: 1,
-                children: [/* @__PURE__ */jsxRuntime.jsx(ui.Text, {
-                  size: 3,
-                  weight: "bold",
-                  children: hex
-                }), /* @__PURE__ */jsxRuntime.jsxs(ui.Inline, {
-                  space: 3,
-                  children: [/* @__PURE__ */jsxRuntime.jsxs(ui.Text, {
-                    size: 1,
-                    children: [/* @__PURE__ */jsxRuntime.jsx("strong", {
-                      children: "RGB: "
-                    }), rgb == null ? void 0 : rgb.r, " ", rgb == null ? void 0 : rgb.g, " ", rgb == null ? void 0 : rgb.b]
-                  }), /* @__PURE__ */jsxRuntime.jsxs(ui.Text, {
-                    size: 1,
-                    children: [/* @__PURE__ */jsxRuntime.jsx("strong", {
-                      children: "HSL: "
-                    }), " ", Math.round((_a2 = hsl == null ? void 0 : hsl.h) != null ? _a2 : 0), " ", Math.round(((_b2 = hsl == null ? void 0 : hsl.s) != null ? _b2 : 0) * 100), "% ", Math.round(((_c = hsl == null ? void 0 : hsl.l) != null ? _c : 0) * 100), "%"]
-                  })]
-                })]
-              })
-            })]
-          }), !readOnly && /* @__PURE__ */jsxRuntime.jsxs(ui.Flex, {
-            align: "flex-start",
-            marginLeft: 2,
-            children: [/* @__PURE__ */jsxRuntime.jsx(ui.Box, {
-              style: {
-                width: 200
-              },
-              children: /* @__PURE__ */jsxRuntime.jsx(ColorPickerFields, {
-                rgb,
-                hsl,
-                hex,
-                onChange,
-                disableAlpha
-              })
-            }), /* @__PURE__ */jsxRuntime.jsx(ui.Box, {
-              marginLeft: 2,
-              children: /* @__PURE__ */jsxRuntime.jsx(ui.Button, {
-                onClick: onUnset,
-                title: "Delete color",
-                icon: icons.TrashIcon,
-                tone: "critical"
-              })
-            })]
-          })]
-        }), colorList && /* @__PURE__ */jsxRuntime.jsx(ColorList, {
-          colors: colorList,
-          onChange
-        })]
-      })
-    })
-  });
-};
-const ColorPicker = reactColor.CustomPicker(ColorPickerInner);
-const DEFAULT_COLOR = {
+            ),
+            readOnly && /* @__PURE__ */ jsxRuntime.jsx(
+              ReadOnlyContainer,
+              {
+                padding: 2,
+                paddingBottom: 1,
+                sizing: "border",
+                justify: "space-between",
+                children: /* @__PURE__ */ jsxRuntime.jsxs(ui.Stack, { space: 3, marginTop: 1, children: [
+                  /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { size: 3, weight: "bold", children: hex }),
+                  /* @__PURE__ */ jsxRuntime.jsxs(ui.Inline, { space: 3, children: [
+                    /* @__PURE__ */ jsxRuntime.jsxs(ui.Text, { size: 1, children: [
+                      /* @__PURE__ */ jsxRuntime.jsx("strong", { children: "RGB: " }),
+                      rgb?.r,
+                      " ",
+                      rgb?.g,
+                      " ",
+                      rgb?.b
+                    ] }),
+                    /* @__PURE__ */ jsxRuntime.jsxs(ui.Text, { size: 1, children: [
+                      /* @__PURE__ */ jsxRuntime.jsx("strong", { children: "HSL: " }),
+                      " ",
+                      Math.round(hsl?.h ?? 0),
+                      " ",
+                      Math.round((hsl?.s ?? 0) * 100),
+                      "% ",
+                      Math.round((hsl?.l ?? 0) * 100),
+                      "%"
+                    ] })
+                  ] })
+                ] })
+              }
+            )
+          ]
+        }
+      ),
+      !readOnly && /* @__PURE__ */ jsxRuntime.jsxs(ui.Flex, { align: "flex-start", marginLeft: 2, children: [
+        /* @__PURE__ */ jsxRuntime.jsx(ui.Box, { style: { width: 200 }, children: /* @__PURE__ */ jsxRuntime.jsx(
+          ColorPickerFields,
+          {
+            rgb,
+            hsl,
+            hex,
+            onChange,
+            disableAlpha
+          }
+        ) }),
+        /* @__PURE__ */ jsxRuntime.jsx(ui.Box, { marginLeft: 2, children: /* @__PURE__ */ jsxRuntime.jsx(ui.Button, { onClick: onUnset, title: "Delete color", icon: icons.TrashIcon, tone: "critical" }) })
+      ] })
+    ] }),
+    colorList && /* @__PURE__ */ jsxRuntime.jsx(ColorList, { colors: colorList, onChange })
+  ] }) }) });
+}, ColorPicker = reactColor.CustomPicker(ColorPickerInner), DEFAULT_COLOR = {
   hex: "#24a3e3",
-  hsl: {
-    h: 200,
-    s: 0.7732,
-    l: 0.5156,
-    a: 1
-  },
-  hsv: {
-    h: 200,
-    s: 0.8414,
-    v: 0.8901,
-    a: 1
-  },
-  rgb: {
-    r: 46,
-    g: 163,
-    b: 227,
-    a: 1
-  },
+  hsl: { h: 200, s: 0.7732, l: 0.5156, a: 1 },
+  hsv: { h: 200, s: 0.8414, v: 0.8901, a: 1 },
+  rgb: { r: 46, g: 163, b: 227, a: 1 },
   source: "hex"
 };
 function ColorInput(props) {
-  var _a, _b;
-  const {
-    onChange,
-    readOnly
-  } = props;
-  const value = props.value;
-  const type = props.schemaType;
-  const focusRef = react.useRef(null);
-  const [color, setColor] = react.useState(value);
-  react.useEffect(() => setColor(value), [value]);
-  const emitSetColor = react.useCallback(nextColor => {
-    var _a2;
-    const fieldPatches = type.fields.filter(field => field.name in nextColor).map(field => {
-      const nextFieldValue = nextColor[field.name];
-      const isObject = field.type.jsonType === "object";
-      return sanity.set(isObject ? Object.assign({
-        _type: field.type.name
-      }, nextFieldValue) : nextFieldValue, [field.name]);
+  const { onChange, readOnly } = props, value = props.value, type = props.schemaType, focusRef = react.useRef(null), [color2, setColor] = react.useState(value);
+  react.useEffect(() => react.startTransition(() => setColor(value)), [value]);
+  const debouncedColor = react.useDeferredValue(color2), handleChange = useEffectEvent.useEffectEvent((nextColor) => {
+    const fieldPatches = type.fields.filter((field) => field.name in nextColor).map((field) => {
+      const nextFieldValue = nextColor[field.name], isObject = field.type.jsonType === "object";
+      return sanity.set(
+        isObject ? Object.assign({ _type: field.type.name }, nextFieldValue) : nextFieldValue,
+        [field.name]
+      );
     });
-    onChange([sanity.setIfMissing({
-      _type: type.name
-    }), sanity.set(type.name, ["_type"]), sanity.set((_a2 = nextColor.rgb) == null ? void 0 : _a2.a, ["alpha"]), ...fieldPatches]);
-  }, [onChange, type]);
-  const debouncedColorChange = react.useMemo(() => lodash.debounce(emitSetColor, 100), [emitSetColor]);
-  const handleColorChange = react.useCallback(nextColor => {
-    setColor(nextColor);
-    debouncedColorChange(nextColor);
-  }, [debouncedColorChange, setColor]);
+    onChange([
+      sanity.setIfMissing({ _type: type.name }),
+      sanity.set(type.name, ["_type"]),
+      sanity.set(nextColor.rgb?.a, ["alpha"]),
+      ...fieldPatches
+    ]);
+  });
+  react.useEffect(() => {
+    if (!debouncedColor) return;
+    const raf = requestAnimationFrame(() => handleChange(debouncedColor));
+    return () => cancelAnimationFrame(raf);
+  }, [debouncedColor, handleChange]);
   const handleCreateColor = react.useCallback(() => {
     setColor(DEFAULT_COLOR);
-    emitSetColor(DEFAULT_COLOR);
-  }, [emitSetColor]);
-  const handleUnset = react.useCallback(() => {
-    setColor(void 0);
-    onChange(sanity.unset());
+  }, []), handleUnset = react.useCallback(() => {
+    setColor(void 0), onChange(sanity.unset());
   }, [onChange]);
-  return /* @__PURE__ */jsxRuntime.jsx(jsxRuntime.Fragment, {
-    children: value && value.hex ? /* @__PURE__ */jsxRuntime.jsx(ColorPicker, {
-      color,
-      onChange: handleColorChange,
-      readOnly: readOnly || typeof type.readOnly === "boolean" && type.readOnly,
-      disableAlpha: !!((_a = type.options) == null ? void 0 : _a.disableAlpha),
-      colorList: (_b = type.options) == null ? void 0 : _b.colorList,
+  return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: value && value.hex ? /* @__PURE__ */ jsxRuntime.jsx(
+    ColorPicker,
+    {
+      color: color2,
+      onChange: setColor,
+      readOnly: readOnly || typeof type.readOnly == "boolean" && type.readOnly,
+      disableAlpha: !!type.options?.disableAlpha,
+      colorList: type.options?.colorList,
       onUnset: handleUnset
-    }) : /* @__PURE__ */jsxRuntime.jsx(ui.Button, {
+    }
+  ) : /* @__PURE__ */ jsxRuntime.jsx(
+    ui.Button,
+    {
       icon: icons.AddIcon,
       mode: "ghost",
       text: "Create color",
       ref: focusRef,
-      disabled: Boolean(readOnly),
+      disabled: !!readOnly,
       onClick: handleCreateColor
-    })
-  });
+    }
+  ) });
 }
-const round = function () {
-  let val = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 1;
-  return Math.round(val * 100);
-};
-const colorTypeName = "color";
-const color = sanity.defineType({
+const round = (val = 1) => Math.round(val * 100), colorTypeName = "color", color = sanity.defineType({
   name: colorTypeName,
   type: "object",
   title: "Color",
-  components: {
-    input: ColorInput
-  },
-  fields: [{
-    title: "Hex",
-    name: "hex",
-    type: "string"
-  }, {
-    title: "Alpha",
-    name: "alpha",
-    type: "number"
-  }, {
-    title: "Hue Saturation Lightness",
-    name: "hsl",
-    type: "hslaColor"
-  }, {
-    title: "Hue Saturation Value",
-    name: "hsv",
-    type: "hsvaColor"
-  }, {
-    title: "Red Green Blue (rgb)",
-    name: "rgb",
-    type: "rgbaColor"
-  }],
+  components: { input: ColorInput },
+  fields: [
+    {
+      title: "Hex",
+      name: "hex",
+      type: "string"
+    },
+    {
+      title: "Alpha",
+      name: "alpha",
+      type: "number"
+    },
+    {
+      title: "Hue Saturation Lightness",
+      name: "hsl",
+      type: "hslaColor"
+    },
+    {
+      title: "Hue Saturation Value",
+      name: "hsv",
+      type: "hsvaColor"
+    },
+    {
+      title: "Red Green Blue (rgb)",
+      name: "rgb",
+      type: "rgbaColor"
+    }
+  ],
   preview: {
     select: {
       title: "hex",
@@ -1675,58 +1067,64 @@ const color = sanity.defineType({
       hex: "hex",
       hsl: "hsl"
     },
-    prepare(_ref4) {
-      let {
-        title,
-        hex,
-        hsl,
-        alpha
-      } = _ref4;
+    prepare({
+      title,
+      hex,
+      hsl,
+      alpha
+    }) {
       let subtitle = hex || "No color set";
-      if (hsl) {
-        subtitle = "H:".concat(round(hsl.h), " S:").concat(round(hsl.s), " L:").concat(round(hsl.l), " A:").concat(round(alpha));
-      }
-      return {
+      return hsl && (subtitle = `H:${round(hsl.h)} S:${round(hsl.s)} L:${round(hsl.l)} A:${round(alpha)}`), {
         title,
         subtitle,
-        media: () => /* @__PURE__ */jsxRuntime.jsx("div", {
-          style: {
-            backgroundColor: hex != null ? hex : "#000",
-            opacity: alpha != null ? alpha : 1,
-            position: "absolute",
-            height: "100%",
-            width: "100%",
-            top: "0",
-            left: "0"
+        media: () => /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            style: {
+              backgroundColor: hex ?? "#000",
+              opacity: alpha ?? 1,
+              position: "absolute",
+              height: "100%",
+              width: "100%",
+              top: "0",
+              left: "0"
+            }
           }
-        })
+        )
       };
     }
   }
-});
-const hsvaColor = sanity.defineType({
+}), hslaColor = sanity.defineType({
+  title: "Hue Saturation Lightness",
+  name: "hslaColor",
+  type: "object",
+  fields: [
+    { name: "h", type: "number", title: "Hue" },
+    { name: "s", type: "number", title: "Saturation" },
+    { name: "l", type: "number", title: "Lightness" },
+    { name: "a", type: "number", title: "Alpha" }
+  ]
+}), hsvaColor = sanity.defineType({
   title: "Hue Saturation Value",
   name: "hsvaColor",
   type: "object",
-  fields: [{
-    name: "h",
-    type: "number",
-    title: "Hue"
-  }, {
-    name: "s",
-    type: "number",
-    title: "Saturation"
-  }, {
-    name: "v",
-    type: "number",
-    title: "Value"
-  }, {
-    name: "a",
-    type: "number",
-    title: "Alpha"
-  }]
-});
-const colorInput = sanity.definePlugin({
+  fields: [
+    { name: "h", type: "number", title: "Hue" },
+    { name: "s", type: "number", title: "Saturation" },
+    { name: "v", type: "number", title: "Value" },
+    { name: "a", type: "number", title: "Alpha" }
+  ]
+}), rgbaColor = sanity.defineType({
+  title: "Red Green Blue (rgb)",
+  name: "rgbaColor",
+  type: "object",
+  fields: [
+    { name: "r", type: "number", title: "Red" },
+    { name: "g", type: "number", title: "Green" },
+    { name: "b", type: "number", title: "Blue" },
+    { name: "a", type: "number", title: "Alpha" }
+  ]
+}), colorInput = sanity.definePlugin({
   name: "@sanity/color-input",
   schema: {
     types: [hslaColor, hsvaColor, rgbaColor, color]