@sanity/color-input 4.0.1-canary.0 → 4.0.2

package/lib/_chunks-cjs/ColorInput.js

@@ -1,6 +1,978 @@
 "use strict";
-var jsxRuntime = require("react/jsx-runtime"), icons = require("@sanity/icons"), ui = require("@sanity/ui"), react = require("react"), sanity = require("sanity"), useEffectEvent = require("use-effect-event"), index = require("./index.js");
-const DEFAULT_COLOR = {
+var jsxRuntime = require("react/jsx-runtime"), icons = require("@sanity/icons"), ui = require("@sanity/ui"), react = require("react"), sanity = require("sanity"), useEffectEvent = require("use-effect-event"), reactColor = require("react-color"), common = require("react-color/lib/components/common"), styledComponents = require("styled-components"), color = require("react-color/lib/helpers/color");
+function _typeof(obj) {
+  "@babel/helpers - typeof";
+  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);
+}
+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() {
+    return this.getBrightness() < 128;
+  },
+  isLight: function() {
+    return !this.isDark();
+  },
+  isValid: function() {
+    return this._ok;
+  },
+  getOriginalInput: function() {
+    return this._originalInput;
+  },
+  getFormat: function() {
+    return this._format;
+  },
+  getAlpha: function() {
+    return this._a;
+  },
+  getBrightness: function() {
+    var rgb = this.toRgb();
+    return (rgb.r * 299 + rgb.g * 587 + rgb.b * 114) / 1e3;
+  },
+  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(value) {
+    return this._a = boundAlpha(value), this._roundA = Math.round(100 * this._a) / 100, this;
+  },
+  toHsv: function() {
+    var hsv = rgbToHsv(this._r, this._g, this._b);
+    return {
+      h: hsv.h * 360,
+      s: hsv.s,
+      v: hsv.v,
+      a: this._a
+    };
+  },
+  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() {
+    var hsl = rgbToHsl(this._r, this._g, this._b);
+    return {
+      h: hsl.h * 360,
+      s: hsl.s,
+      l: hsl.l,
+      a: this._a
+    };
+  },
+  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(allow3Char) {
+    return rgbToHex(this._r, this._g, this._b, allow3Char);
+  },
+  toHexString: function(allow3Char) {
+    return "#" + this.toHex(allow3Char);
+  },
+  toHex8: function(allow4Char) {
+    return rgbaToHex(this._r, this._g, this._b, this._a, allow4Char);
+  },
+  toHex8String: function(allow4Char) {
+    return "#" + this.toHex8(allow4Char);
+  },
+  toRgb: function() {
+    return {
+      r: Math.round(this._r),
+      g: Math.round(this._g),
+      b: Math.round(this._b),
+      a: this._a
+    };
+  },
+  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() {
+    return {
+      r: Math.round(bound01(this._r, 255) * 100) + "%",
+      g: Math.round(bound01(this._g, 255) * 100) + "%",
+      b: Math.round(bound01(this._b, 255) * 100) + "%",
+      a: this._a
+    };
+  },
+  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() {
+    return this._a === 0 ? "transparent" : this._a < 1 ? !1 : hexNames[rgbToHex(this._r, this._g, this._b, !0)] || !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(format) {
+    var formatSet = !!format;
+    format = format || this._format;
+    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() {
+    return tinycolor(this.toString());
+  },
+  _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() {
+    return this._applyModification(_lighten, arguments);
+  },
+  brighten: function() {
+    return this._applyModification(_brighten, arguments);
+  },
+  darken: function() {
+    return this._applyModification(_darken, arguments);
+  },
+  desaturate: function() {
+    return this._applyModification(_desaturate, arguments);
+  },
+  saturate: function() {
+    return this._applyModification(_saturate, arguments);
+  },
+  greyscale: function() {
+    return this._applyModification(_greyscale, arguments);
+  },
+  spin: function() {
+    return this._applyModification(_spin, arguments);
+  },
+  _applyCombination: function(fn, args) {
+    return fn.apply(null, [this].concat([].slice.call(args)));
+  },
+  analogous: function() {
+    return this._applyCombination(_analogous, arguments);
+  },
+  complement: function() {
+    return this._applyCombination(_complement, arguments);
+  },
+  monochromatic: function() {
+    return this._applyCombination(_monochromatic, arguments);
+  },
+  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() {
+    return this._applyCombination(polyad, [3]);
+  },
+  tetrad: function() {
+    return this._applyCombination(polyad, [4]);
+  }
+};
+tinycolor.fromRatio = function(color2, opts) {
+  if (_typeof(color2) == "object") {
+    var newColor = {};
+    for (var i in color2)
+      color2.hasOwnProperty(i) && (i === "a" ? newColor[i] = color2[i] : newColor[i] = convertToPercentage(color2[i]));
+    color2 = newColor;
+  }
+  return tinycolor(color2, opts);
+};
+function inputToRGB(color2) {
+  var rgb = {
+    r: 0,
+    g: 0,
+    b: 0
+  }, 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
+  };
+}
+function rgbToRgb(r, g, b) {
+  return {
+    r: bound01(r, 255) * 255,
+    g: bound01(g, 255) * 255,
+    b: bound01(b, 255) * 255
+  };
+}
+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), h, s, l = (max + min) / 2;
+  if (max == min)
+    h = s = 0;
+  else {
+    var d = max - min;
+    switch (s = l > 0.5 ? d / (2 - max - min) : d / (max + min), max) {
+      case r:
+        h = (g - b) / d + (g < b ? 6 : 0);
+        break;
+      case g:
+        h = (b - r) / d + 2;
+        break;
+      case b:
+        h = (r - g) / d + 4;
+        break;
+    }
+    h /= 6;
+  }
+  return {
+    h,
+    s,
+    l
+  };
+}
+function hslToRgb(h, s, l) {
+  var r, g, b;
+  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;
+  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,
+    g: g * 255,
+    b: b * 255
+  };
+}
+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), 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);
+        break;
+      case g:
+        h = (b - r) / d + 2;
+        break;
+      case b:
+        h = (r - g) / d + 4;
+        break;
+    }
+    h /= 6;
+  }
+  return {
+    h,
+    s,
+    v
+  };
+}
+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];
+  return {
+    r: r * 255,
+    g: g * 255,
+    b: b * 255
+  };
+}
+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 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("");
+}
+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 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("");
+}
+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("");
+}
+tinycolor.equals = function(color1, color2) {
+  return !color1 || !color2 ? !1 : tinycolor(color1).toRgbString() == tinycolor(color2).toRgbString();
+};
+tinycolor.random = function() {
+  return tinycolor.fromRatio({
+    r: Math.random(),
+    g: Math.random(),
+    b: Math.random()
+  });
+};
+function _desaturate(color2, amount) {
+  amount = amount === 0 ? 0 : amount || 10;
+  var hsl = tinycolor(color2).toHsl();
+  return hsl.s -= amount / 100, hsl.s = clamp01(hsl.s), tinycolor(hsl);
+}
+function _saturate(color2, amount) {
+  amount = amount === 0 ? 0 : amount || 10;
+  var hsl = tinycolor(color2).toHsl();
+  return hsl.s += amount / 100, hsl.s = clamp01(hsl.s), tinycolor(hsl);
+}
+function _greyscale(color2) {
+  return tinycolor(color2).desaturate(100);
+}
+function _lighten(color2, amount) {
+  amount = amount === 0 ? 0 : amount || 10;
+  var hsl = tinycolor(color2).toHsl();
+  return hsl.l += amount / 100, hsl.l = clamp01(hsl.l), tinycolor(hsl);
+}
+function _brighten(color2, amount) {
+  amount = amount === 0 ? 0 : amount || 10;
+  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(color2, amount) {
+  amount = amount === 0 ? 0 : amount || 10;
+  var hsl = tinycolor(color2).toHsl();
+  return hsl.l -= amount / 100, hsl.l = clamp01(hsl.l), 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);
+}
+function _complement(color2) {
+  var hsl = tinycolor(color2).toHsl();
+  return hsl.h = (hsl.h + 180) % 360, tinycolor(hsl);
+}
+function polyad(color2, number) {
+  if (isNaN(number) || number <= 0)
+    throw new Error("Argument to polyad must be a positive number");
+  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(color2) {
+  var hsl = tinycolor(color2).toHsl(), h = hsl.h;
+  return [tinycolor(color2), tinycolor({
+    h: (h + 72) % 360,
+    s: hsl.s,
+    l: hsl.l
+  }), tinycolor({
+    h: (h + 216) % 360,
+    s: hsl.s,
+    l: hsl.l
+  })];
+}
+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(color2, results) {
+  results = results || 6;
+  for (var hsv = tinycolor(color2).toHsv(), h = hsv.h, s = hsv.s, v = hsv.v, ret = [], modification = 1 / results; results--; )
+    ret.push(tinycolor({
+      h,
+      s,
+      v
+    })), v = (v + modification) % 1;
+  return ret;
+}
+tinycolor.mix = function(color1, color2, amount) {
+  amount = amount === 0 ? 0 : amount || 50;
+  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,
+    a: (rgb2.a - rgb1.a) * p + rgb1.a
+  };
+  return tinycolor(rgba);
+};
+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);
+};
+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;
+      break;
+    case "AAlarge":
+      out = readability >= 3;
+      break;
+    case "AAAsmall":
+      out = readability >= 7;
+      break;
+  }
+  return out;
+};
+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));
+};
+var names = tinycolor.names = {
+  aliceblue: "f0f8ff",
+  antiquewhite: "faebd7",
+  aqua: "0ff",
+  aquamarine: "7fffd4",
+  azure: "f0ffff",
+  beige: "f5f5dc",
+  bisque: "ffe4c4",
+  black: "000",
+  blanchedalmond: "ffebcd",
+  blue: "00f",
+  blueviolet: "8a2be2",
+  brown: "a52a2a",
+  burlywood: "deb887",
+  burntsienna: "ea7e5d",
+  cadetblue: "5f9ea0",
+  chartreuse: "7fff00",
+  chocolate: "d2691e",
+  coral: "ff7f50",
+  cornflowerblue: "6495ed",
+  cornsilk: "fff8dc",
+  crimson: "dc143c",
+  cyan: "0ff",
+  darkblue: "00008b",
+  darkcyan: "008b8b",
+  darkgoldenrod: "b8860b",
+  darkgray: "a9a9a9",
+  darkgreen: "006400",
+  darkgrey: "a9a9a9",
+  darkkhaki: "bdb76b",
+  darkmagenta: "8b008b",
+  darkolivegreen: "556b2f",
+  darkorange: "ff8c00",
+  darkorchid: "9932cc",
+  darkred: "8b0000",
+  darksalmon: "e9967a",
+  darkseagreen: "8fbc8f",
+  darkslateblue: "483d8b",
+  darkslategray: "2f4f4f",
+  darkslategrey: "2f4f4f",
+  darkturquoise: "00ced1",
+  darkviolet: "9400d3",
+  deeppink: "ff1493",
+  deepskyblue: "00bfff",
+  dimgray: "696969",
+  dimgrey: "696969",
+  dodgerblue: "1e90ff",
+  firebrick: "b22222",
+  floralwhite: "fffaf0",
+  forestgreen: "228b22",
+  fuchsia: "f0f",
+  gainsboro: "dcdcdc",
+  ghostwhite: "f8f8ff",
+  gold: "ffd700",
+  goldenrod: "daa520",
+  gray: "808080",
+  green: "008000",
+  greenyellow: "adff2f",
+  grey: "808080",
+  honeydew: "f0fff0",
+  hotpink: "ff69b4",
+  indianred: "cd5c5c",
+  indigo: "4b0082",
+  ivory: "fffff0",
+  khaki: "f0e68c",
+  lavender: "e6e6fa",
+  lavenderblush: "fff0f5",
+  lawngreen: "7cfc00",
+  lemonchiffon: "fffacd",
+  lightblue: "add8e6",
+  lightcoral: "f08080",
+  lightcyan: "e0ffff",
+  lightgoldenrodyellow: "fafad2",
+  lightgray: "d3d3d3",
+  lightgreen: "90ee90",
+  lightgrey: "d3d3d3",
+  lightpink: "ffb6c1",
+  lightsalmon: "ffa07a",
+  lightseagreen: "20b2aa",
+  lightskyblue: "87cefa",
+  lightslategray: "789",
+  lightslategrey: "789",
+  lightsteelblue: "b0c4de",
+  lightyellow: "ffffe0",
+  lime: "0f0",
+  limegreen: "32cd32",
+  linen: "faf0e6",
+  magenta: "f0f",
+  maroon: "800000",
+  mediumaquamarine: "66cdaa",
+  mediumblue: "0000cd",
+  mediumorchid: "ba55d3",
+  mediumpurple: "9370db",
+  mediumseagreen: "3cb371",
+  mediumslateblue: "7b68ee",
+  mediumspringgreen: "00fa9a",
+  mediumturquoise: "48d1cc",
+  mediumvioletred: "c71585",
+  midnightblue: "191970",
+  mintcream: "f5fffa",
+  mistyrose: "ffe4e1",
+  moccasin: "ffe4b5",
+  navajowhite: "ffdead",
+  navy: "000080",
+  oldlace: "fdf5e6",
+  olive: "808000",
+  olivedrab: "6b8e23",
+  orange: "ffa500",
+  orangered: "ff4500",
+  orchid: "da70d6",
+  palegoldenrod: "eee8aa",
+  palegreen: "98fb98",
+  paleturquoise: "afeeee",
+  palevioletred: "db7093",
+  papayawhip: "ffefd5",
+  peachpuff: "ffdab9",
+  peru: "cd853f",
+  pink: "ffc0cb",
+  plum: "dda0dd",
+  powderblue: "b0e0e6",
+  purple: "800080",
+  rebeccapurple: "663399",
+  red: "f00",
+  rosybrown: "bc8f8f",
+  royalblue: "4169e1",
+  saddlebrown: "8b4513",
+  salmon: "fa8072",
+  sandybrown: "f4a460",
+  seagreen: "2e8b57",
+  seashell: "fff5ee",
+  sienna: "a0522d",
+  silver: "c0c0c0",
+  skyblue: "87ceeb",
+  slateblue: "6a5acd",
+  slategray: "708090",
+  slategrey: "708090",
+  snow: "fffafa",
+  springgreen: "00ff7f",
+  steelblue: "4682b4",
+  tan: "d2b48c",
+  teal: "008080",
+  thistle: "d8bfd8",
+  tomato: "ff6347",
+  turquoise: "40e0d0",
+  violet: "ee82ee",
+  wheat: "f5deb3",
+  white: "fff",
+  whitesmoke: "f5f5f5",
+  yellow: "ff0",
+  yellowgreen: "9acd32"
+}, hexNames = tinycolor.hexNames = flip(names);
+function flip(o) {
+  var flipped = {};
+  for (var i in o)
+    o.hasOwnProperty(i) && (flipped[o[i]] = i);
+  return flipped;
+}
+function boundAlpha(a) {
+  return a = parseFloat(a), (isNaN(a) || a < 0 || a > 1) && (a = 1), a;
+}
+function bound01(n, max) {
+  isOnePointZero(n) && (n = "100%");
+  var processPercent = isPercentage(n);
+  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);
+}
+function clamp01(val) {
+  return Math.min(1, Math.max(0, val));
+}
+function parseIntFromHex(val) {
+  return parseInt(val, 16);
+}
+function isOnePointZero(n) {
+  return typeof n == "string" && n.indexOf(".") != -1 && parseFloat(n) === 1;
+}
+function isPercentage(n) {
+  return typeof n == "string" && n.indexOf("%") != -1;
+}
+function pad2(c) {
+  return c.length == 1 ? "0" + c : "" + c;
+}
+function convertToPercentage(n) {
+  return n <= 1 && (n = n * 100 + "%"), n;
+}
+function convertDecimalToHex(d) {
+  return Math.round(parseFloat(d) * 255).toString(16);
+}
+function convertHexToDecimal(h) {
+  return parseIntFromHex(h) / 255;
+}
+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),
+    rgba: new RegExp("rgba" + PERMISSIVE_MATCH4),
+    hsl: new RegExp("hsl" + PERMISSIVE_MATCH3),
+    hsla: new RegExp("hsla" + PERMISSIVE_MATCH4),
+    hsv: new RegExp("hsv" + PERMISSIVE_MATCH3),
+    hsva: new RegExp("hsva" + PERMISSIVE_MATCH4),
+    hex3: /^#?([0-9a-fA-F]{1})([0-9a-fA-F]{1})([0-9a-fA-F]{1})$/,
+    hex6: /^#?([0-9a-fA-F]{2})([0-9a-fA-F]{2})([0-9a-fA-F]{2})$/,
+    hex4: /^#?([0-9a-fA-F]{1})([0-9a-fA-F]{1})([0-9a-fA-F]{1})([0-9a-fA-F]{1})$/,
+    hex8: /^#?([0-9a-fA-F]{2})([0-9a-fA-F]{2})([0-9a-fA-F]{2})([0-9a-fA-F]{2})$/
+  };
+}();
+function isValidCSSUnit(color2) {
+  return !!matchers.CSS_UNIT.exec(color2);
+}
+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,
+      b: 0,
+      a: 0,
+      format: "name"
+    };
+  var match;
+  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) {
+  var level, size;
+  return parms = parms || {
+    level: "AA",
+    size: "small"
+  }, level = (parms.level || "AA").toUpperCase(), size = (parms.size || "small").toLowerCase(), level !== "AA" && level !== "AAA" && (level = "AA"), size !== "small" && size !== "large" && (size = "small"), {
+    level,
+    size
+  };
+}
+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
+}) => {
+  var _a;
+  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.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 == 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: !0,
+        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: !0,
+        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: !0,
+        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: !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) => {
+  var _a, _b, _c;
+  const {
+    width,
+    color: { rgb, hex, hsv, hsl },
+    onChange,
+    onUnset,
+    disableAlpha,
+    colorList,
+    readOnly
+  } = props;
+  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 == null ? void 0 : rgb.r},${rgb == null ? void 0 : rgb.g},${rgb == null ? void 0 : rgb.b},${rgb == null ? void 0 : 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((_a = hsl == null ? void 0 : hsl.h) != null ? _a : 0),
+                      " ",
+                      Math.round(((_b = hsl == null ? void 0 : hsl.s) != null ? _b : 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 })
+  ] }) }) });
+}, 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 },
@@ -8,9 +980,11 @@ const DEFAULT_COLOR = {
   source: "hex"
 };
 function ColorInput(props) {
-  const { onChange, readOnly } = props, value = props.value, type = props.schemaType, focusRef = react.useRef(null), [color, setColor] = react.useState(value);
+  var _a, _b;
+  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 [emitColor, setEmitColor] = react.useState(void 0), debouncedColor = react.useDeferredValue(emitColor), handleChange = useEffectEvent.useEffectEvent((nextColor) => {
+    var _a2;
     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(
@@ -21,7 +995,7 @@ function ColorInput(props) {
     onChange([
       sanity.setIfMissing({ _type: type.name }),
       sanity.set(type.name, ["_type"]),
-      sanity.set(nextColor.rgb?.a, ["alpha"]),
+      sanity.set((_a2 = nextColor.rgb) == null ? void 0 : _a2.a, ["alpha"]),
       ...fieldPatches
     ]);
   });
@@ -38,13 +1012,13 @@ function ColorInput(props) {
     setColor(void 0), onChange(sanity.unset());
   }, [onChange]);
   return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: value && value.hex ? /* @__PURE__ */ jsxRuntime.jsx(
-    index.ColorPicker,
+    ColorPicker,
     {
-      color,
+      color: color2,
       onChange: handleColorChange,
       readOnly: readOnly || typeof type.readOnly == "boolean" && type.readOnly,
-      disableAlpha: !!type.options?.disableAlpha,
-      colorList: type.options?.colorList,
+      disableAlpha: !!((_a = type.options) != null && _a.disableAlpha),
+      colorList: (_b = type.options) == null ? void 0 : _b.colorList,
       onUnset: handleUnset
     }
   ) : /* @__PURE__ */ jsxRuntime.jsx(