import {
  a as J
} from "./chunk-A4JINXGV.js";
import {
  a as _r
} from "./chunk-GE5IPLQ4.js";
import {
  i as Y
} from "./chunk-IU22WWJQ.js";
import {
  a as l,
  e as xr
} from "./chunk-IO47FP3U.js";

// ../addons/docs/src/blocks/controls/Color.tsx
var x = xr(_r(), 1);
import _, { useCallback as q, useEffect as pr, useMemo as hr, useState as X } from "react";
import { Form as Fr, TooltipNote as jr, WithTooltip as gr } from "storybook/internal/components";
import { MarkupIcon as Ar } from "@storybook/icons";

// ../node_modules/react-colorful/dist/index.mjs
import f, { useRef as E, useMemo as Hr, useEffect as R, useState as Er, useCallback as yr, useLayoutEffect as wr } from "react";
function S() {
  return (S = Object.assign || function(r) {
    for (var e = 1; e < arguments.length; e++) {
      var o = arguments[e];
      for (var t in o) Object.prototype.hasOwnProperty.call(o, t) && (r[t] = o[t]);
    }
    return r;
  }).apply(this, arguments);
}
l(S, "u");
function j(r, e) {
  if (r == null) return {};
  var o, t, n = {}, a = Object.keys(r);
  for (t = 0; t < a.length; t++) e.indexOf(o = a[t]) >= 0 || (n[o] = r[o]);
  return n;
}
l(j, "c");
function z(r) {
  var e = E(r), o = E(function(t) {
    e.current && e.current(t);
  });
  return e.current = r, o.current;
}
l(z, "i");
var P = /* @__PURE__ */ l(function(r, e, o) {
  return e === void 0 && (e = 0), o === void 0 && (o = 1), r > o ? o : r < e ? e : r;
}, "s"), N = /* @__PURE__ */ l(function(r) {
  return "touches" in r;
}, "f"), G = /* @__PURE__ */ l(function(r) {
  return r && r.ownerDocument.defaultView || self;
}, "v"), Q = /* @__PURE__ */ l(function(r, e, o) {
  var t = r.getBoundingClientRect(), n = N(e) ? function(a, c) {
    for (var s = 0; s < a.length; s++) if (a[s].identifier === c) return a[s];
    return a[0];
  }(e.touches, o) : e;
  return { left: P((n.pageX - (t.left + G(r).pageXOffset)) / t.width), top: P((n.pageY - (t.top + G(r).pageYOffset)) / t.height) };
}, "d"), U = /* @__PURE__ */ l(function(r) {
  !N(r) && r.preventDefault();
}, "h"), A = f.memo(function(r) {
  var e = r.onMove, o = r.onKey, t = j(r, ["onMove", "onKey"]), n = E(null), a = z(e), c = z(o), s = E(null), u = E(!1), i = Hr(function() {
    var b = /* @__PURE__ */ l(function(C) {
      U(C), (N(C) ? C.touches.length > 0 : C.buttons > 0) && n.current ? a(Q(n.current, C, s.current)) : w(!1);
    }, "e"), k = /* @__PURE__ */ l(function() {
      return w(!1);
    }, "r");
    function w(C) {
      var g = u.current, H = G(n.current), v = C ? H.addEventListener : H.removeEventListener;
      v(g ? "touchmove" : "mousemove", b), v(g ? "touchend" : "mouseup", k);
    }
    return l(w, "t"), [function(C) {
      var g = C.nativeEvent, H = n.current;
      if (H && (U(g), !function(I, br) {
        return br && !N(I);
      }(g, u.current) && H)) {
        if (N(g)) {
          u.current = !0;
          var v = g.changedTouches || [];
          v.length && (s.current = v[0].identifier);
        }
        H.focus(), a(Q(H, g, s.current)), w(!0);
      }
    }, function(C) {
      var g = C.which || C.keyCode;
      g < 37 || g > 40 || (C.preventDefault(), c({ left: g === 39 ? 0.05 : g === 37 ? -0.05 : 0, top: g === 40 ? 0.05 : g === 38 ? -0.05 : 0 }));
    }, w];
  }, [c, a]), h = i[0], m = i[1], d = i[2];
  return R(function() {
    return d;
  }, [d]), f.createElement("div", S({}, t, { onTouchStart: h, onMouseDown: h, className: "react-colorful__interactive", ref: n, onKeyDown: m, tabIndex: 0, role: "slider" }));
}), $ = /* @__PURE__ */ l(function(r) {
  return r.filter(Boolean).join(" ");
}, "g"), K = /* @__PURE__ */ l(function(r) {
  var e = r.color, o = r.left, t = r.top, n = t === void 0 ? 0.5 : t, a = $(["react-colorful__pointer", r.className]);
  return f.createElement("div", { className: a, style: { top: 100 * n + "%", left: 100 * o + "%" } }, f.createElement("div", { className: "react-colorful__pointer-fill", style: { backgroundColor: e } }));
}, "p"), p = /* @__PURE__ */ l(function(r, e, o) {
  return e === void 0 && (e = 0), o === void 0 && (o = Math.pow(10, e)), Math.round(o * r) / o;
}, "b"), Sr = { grad: 0.9, turn: 360, rad: 360 / (2 * Math.PI) }, kr = /* @__PURE__ */ l(function(r) {
  return or(V(r));
}, "x"), V = /* @__PURE__ */ l(function(r) {
  return r[0] === "#" && (r = r.substring(1)), r.length < 6 ? { r: parseInt(r[0] + r[0], 16), g: parseInt(r[1] + r[1], 16), b: parseInt(r[2] + r[2], 16), a: r.length === 4 ? p(parseInt(r[3] + r[3], 16) / 255, 2) : 1 } : { r: parseInt(r.substring(0, 2), 16), g: parseInt(r.substring(2, 4), 16), b: parseInt(r.substring(4, 6), 16), a: r.length === 8 ? p(parseInt(r.substring(6, 8), 16) / 255, 2) : 1 };
}, "C"), Pr = /* @__PURE__ */ l(function(r, e) {
  return e === void 0 && (e = "deg"), Number(r) * (Sr[e] || 1);
}, "E"), Mr = /* @__PURE__ */ l(function(r) {
  var e = /hsla?\(?\s*(-?\d*\.?\d+)(deg|rad|grad|turn)?[,\s]+(-?\d*\.?\d+)%?[,\s]+(-?\d*\.?\d+)%?,?\s*[/\s]*(-?\d*\.?\d+)?(%)?\s*\)?/i.exec(r);
  return e ? Nr({ h: Pr(e[1], e[2]), s: Number(e[3]), l: Number(e[4]), a: e[5] === void 0 ? 1 : Number(e[5]) / (e[6] ? 100 : 1) }) : { h: 0, s: 0, v: 0, a: 1 };
}, "H");
var Nr = /* @__PURE__ */ l(function(r) {
  var e = r.s, o = r.l;
  return { h: r.h, s: (e *= (o < 50 ? o : 100 - o) / 100) > 0 ? 2 * e / (o + e) * 100 : 0, v: o + e, a: r.a };
}, "N"), $r = /* @__PURE__ */ l(function(r) {
  return Or(er(r));
}, "w"), rr = /* @__PURE__ */ l(function(r) {
  var e = r.s, o = r.v, t = r.a, n = (200 - e) * o / 100;
  return { h: p(r.h), s: p(n > 0 && n < 200 ? e * o / 100 / (n <= 100 ? n : 200 - n) * 100 : 0), l: p(n / 2), a: p(t, 2) };
}, "y"), F = /* @__PURE__ */ l(function(r) {
  var e = rr(r);
  return "hsl(" + e.h + ", " + e.s + "%, " + e.l + "%)";
}, "q"), L = /* @__PURE__ */ l(function(r) {
  var e = rr(r);
  return "hsla(" + e.h + ", " + e.s + "%, " + e.l + "%, " + e.a + ")";
}, "k"), er = /* @__PURE__ */ l(function(r) {
  var e = r.h, o = r.s, t = r.v, n = r.a;
  e = e / 360 * 6, o /= 100, t /= 100;
  var a = Math.floor(e), c = t * (1 - o), s = t * (1 - (e - a) * o), u = t * (1 - (1 - e + a) * o), i = a % 6;
  return { r: p(255 * [t, s, c, c, u, t][i]), g: p(255 * [u, t, t, s, c, c][i]), b: p(255 * [c, c, u, t, t, s][i]), a: p(n, 2) };
}, "I");
var Ir = /* @__PURE__ */ l(function(r) {
  var e = /rgba?\(?\s*(-?\d*\.?\d+)(%)?[,\s]+(-?\d*\.?\d+)(%)?[,\s]+(-?\d*\.?\d+)(%)?,?\s*[/\s]*(-?\d*\.?\d+)?(%)?\s*\)?/i.exec(r);
  return e ? or({ r: Number(e[1]) / (e[2] ? 100 / 255 : 1), g: Number(e[3]) / (e[4] ? 100 / 255 : 1), b: Number(e[5]) / (e[6] ? 100 / 255 : 1), a: e[7] === void 0 ? 1 : Number(e[7]) / (e[8] ? 100 : 1) }) : { h: 0, s: 0, v: 0, a: 1 };
}, "z");
var O = /* @__PURE__ */ l(function(r) {
  var e = r.toString(16);
  return e.length < 2 ? "0" + e : e;
}, "D"), Or = /* @__PURE__ */ l(function(r) {
  var e = r.r, o = r.g, t = r.b, n = r.a, a = n < 1 ? O(p(255 * n)) : "";
  return "#" + O(e) + O(o) + O(t) + a;
}, "K"), or = /* @__PURE__ */ l(function(r) {
  var e = r.r, o = r.g, t = r.b, n = r.a, a = Math.max(e, o, t), c = a - Math.min(e, o, t), s = c ? a === e ? (o - t) / c : a === o ? 2 + (t - e) / c : 4 + (e - o) / c : 0;
  return { h: p(60 * (s < 0 ? s + 6 : s)), s: p(a ? c / a * 100 : 0), v: p(a / 255 * 100), a: n };
}, "L");
var tr = f.memo(function(r) {
  var e = r.hue, o = r.onChange, t = $(["react-colorful__hue", r.className]);
  return f.createElement("div", { className: t }, f.createElement(A, { onMove: /* @__PURE__ */ l(function(n) {
    o({ h: 360 * n.left });
  }, "onMove"), onKey: /* @__PURE__ */ l(function(n) {
    o({ h: P(e + 360 * n.left, 0, 360) });
  }, "onKey"), "aria-label": "Hue", "aria-valuenow": p(e), "aria-valuemax": "360", "aria-valuemin": "0" }, f.createElement(K, { className: "react-colorful__hue-pointer", left: e / 360, color: F({ h: e, s: 100, v: 100, a: 1 }) })));
}), nr = f.memo(function(r) {
  var e = r.hsva, o = r.onChange, t = { backgroundColor: F({ h: e.h, s: 100, v: 100, a: 1 }) };
  return f.createElement("div", { className: "react-colorful__saturation", style: t }, f.createElement(A, { onMove: /* @__PURE__ */ l(function(n) {
    o({ s: 100 * n.left, v: 100 - 100 * n.top });
  }, "onMove"), onKey: /* @__PURE__ */ l(function(n) {
    o({ s: P(e.s + 100 * n.left, 0, 100), v: P(e.v - 100 * n.top, 0, 100) });
  }, "onKey"), "aria-label": "Color", "aria-valuetext": "Saturation " + p(e.s) + "%, Brightness " + p(e.v) + "%" }, f.createElement(K, { className: "react-colorful__saturation-pointer", top: 1 - e.v / 100, left: e.s / 100, color: F(e) })));
}), ar = /* @__PURE__ */ l(function(r, e) {
  if (r === e) return !0;
  for (var o in r) if (r[o] !== e[o]) return !1;
  return !0;
}, "F"), lr = /* @__PURE__ */ l(function(r, e) {
  return r.replace(/\s/g, "") === e.replace(/\s/g, "");
}, "P"), Lr = /* @__PURE__ */ l(function(r, e) {
  return r.toLowerCase() === e.toLowerCase() || ar(V(r), V(e));
}, "X");
function sr(r, e, o) {
  var t = z(o), n = Er(function() {
    return r.toHsva(e);
  }), a = n[0], c = n[1], s = E({ color: e, hsva: a });
  R(function() {
    if (!r.equal(e, s.current.color)) {
      var i = r.toHsva(e);
      s.current = { hsva: i, color: e }, c(i);
    }
  }, [e, r]), R(function() {
    var i;
    ar(a, s.current.hsva) || r.equal(i = r.fromHsva(a), s.current.color) || (s.current = { hsva: a, color: i }, t(i));
  }, [a, r, t]);
  var u = yr(function(i) {
    c(function(h) {
      return Object.assign({}, h, i);
    });
  }, []);
  return [a, u];
}
l(sr, "Y");
var Rr, Br = typeof window < "u" ? wr : R, Xr = /* @__PURE__ */ l(function() {
  return Rr || (typeof __webpack_nonce__ < "u" ? __webpack_nonce__ : void 0);
}, "$");
var Z = /* @__PURE__ */ new Map(), cr = /* @__PURE__ */ l(function(r) {
  Br(function() {
    var e = r.current ? r.current.ownerDocument : document;
    if (e !== void 0 && !Z.has(e)) {
      var o = e.createElement("style");
      o.innerHTML = `.react-colorful{position:relative;display:flex;flex-direction:column;width:200px;height:200px;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;cursor:default}.react-colorful__saturation{position:relative;flex-grow:1;border-color:transparent;border-bottom:12px solid #000;border-radius:8px 8px 0 0;background-image:linear-gradient(0deg,#000,transparent),linear-gradient(90deg,#fff,hsla(0,0%,100%,0))}.react-colorful__alpha-gradient,.react-colorful__pointer-fill{content:"";position:absolute;left:0;top:0;right:0;bottom:0;pointer-events:none;border-radius:inherit}.react-colorful__alpha-gradient,.react-colorful__saturation{box-shadow:inset 0 0 0 1px rgba(0,0,0,.05)}.react-colorful__alpha,.react-colorful__hue{position:relative;height:24px}.react-colorful__hue{background:linear-gradient(90deg,red 0,#ff0 17%,#0f0 33%,#0ff 50%,#00f 67%,#f0f 83%,red)}.react-colorful__last-control{border-radius:0 0 8px 8px}.react-colorful__interactive{position:absolute;left:0;top:0;right:0;bottom:0;border-radius:inherit;outline:none;touch-action:none}.react-colorful__pointer{position:absolute;z-index:1;box-sizing:border-box;width:28px;height:28px;transform:translate(-50%,-50%);background-color:#fff;border:2px solid #fff;border-radius:50%;box-shadow:0 2px 4px rgba(0,0,0,.2)}.react-colorful__interactive:focus .react-colorful__pointer{transform:translate(-50%,-50%) scale(1.1)}.react-colorful__alpha,.react-colorful__alpha-pointer{background-color:#fff;background-image:url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill-opacity=".05"><path d="M8 0h8v8H8zM0 8h8v8H0z"/></svg>')}.react-colorful__saturation-pointer{z-index:3}.react-colorful__hue-pointer{z-index:2}`, Z.set(e, o);
      var t = Xr();
      t && o.setAttribute("nonce", t), e.head.appendChild(o);
    }
  }, []);
}, "Q"), qr = /* @__PURE__ */ l(function(r) {
  var e = r.className, o = r.colorModel, t = r.color, n = t === void 0 ? o.defaultColor : t, a = r.onChange, c = j(r, ["className", "colorModel", "color", "onChange"]), s = E(null);
  cr(s);
  var u = sr(o, n, a), i = u[0], h = u[1], m = $(["react-colorful", e]);
  return f.createElement("div", S({}, c, { ref: s, className: m }), f.createElement(nr, { hsva: i, onChange: h }), f.createElement(tr, { hue: i.h, onChange: h, className: "react-colorful__last-control" }));
}, "U"), Tr = { defaultColor: "000", toHsva: kr, fromHsva: /* @__PURE__ */ l(function(r) {
  return $r({ h: r.h, s: r.s, v: r.v, a: 1 });
}, "fromHsva"), equal: Lr }, ur = /* @__PURE__ */ l(function(r) {
  return f.createElement(qr, S({}, r, { colorModel: Tr }));
}, "Z"), zr = /* @__PURE__ */ l(function(r) {
  var e = r.className, o = r.hsva, t = r.onChange, n = { backgroundImage: "linear-gradient(90deg, " + L(Object.assign({}, o, { a: 0 })) + ", " + L(Object.assign({}, o, { a: 1 })) + ")" }, a = $(["react-colorful__alpha", e]), c = p(100 * o.a);
  return f.createElement("div", { className: a }, f.createElement("div", { className: "react-colorful__alpha-gradient", style: n }), f.createElement(A, { onMove: /* @__PURE__ */ l(function(s) {
    t({ a: s.left });
  }, "onMove"), onKey: /* @__PURE__ */ l(function(s) {
    t({ a: P(o.a + s.left) });
  }, "onKey"), "aria-label": "Alpha", "aria-valuetext": c + "%", "aria-valuenow": c, "aria-valuemin": "0", "aria-valuemax": "100" }, f.createElement(K, { className: "react-colorful__alpha-pointer", left: o.a, color: L(o) })));
}, "ee"), ir = /* @__PURE__ */ l(function(r) {
  var e = r.className, o = r.colorModel, t = r.color, n = t === void 0 ? o.defaultColor : t, a = r.onChange, c = j(r, ["className", "colorModel", "color", "onChange"]), s = E(null);
  cr(s);
  var u = sr(o, n, a), i = u[0], h = u[1], m = $(["react-colorful", e]);
  return f.createElement("div", S({}, c, { ref: s, className: m }), f.createElement(nr, { hsva: i, onChange: h }), f.createElement(tr, { hue: i.h, onChange: h }), f.createElement(zr, { hsva: i, onChange: h, className: "react-colorful__last-control" }));
}, "re");
var Gr = { defaultColor: "hsla(0, 0%, 0%, 1)", toHsva: Mr, fromHsva: L, equal: lr }, fr = /* @__PURE__ */ l(function(r) {
  return f.createElement(ir, S({}, r, { colorModel: Gr }));
}, "ue");
var Vr = { defaultColor: "rgba(0, 0, 0, 1)", toHsva: Ir, fromHsva: /* @__PURE__ */ l(function(r) {
  var e = er(r);
  return "rgba(" + e.r + ", " + e.g + ", " + e.b + ", " + e.a + ")";
}, "fromHsva"), equal: lr }, dr = /* @__PURE__ */ l(function(r) {
  return f.createElement(ir, S({}, r, { colorModel: Vr }));
}, "He");

// ../addons/docs/src/blocks/controls/Color.tsx
import { styled as y } from "storybook/theming";
var Kr = y.div({
  position: "relative",
  maxWidth: 250,
  '&[aria-readonly="true"]': {
    opacity: 0.5
  }
}), Wr = y(gr)({
  position: "absolute",
  zIndex: 1,
  top: 4,
  left: 4,
  "[aria-readonly=true] &": {
    cursor: "not-allowed"
  }
}), Dr = y.div({
  width: 200,
  margin: 5,
  ".react-colorful__saturation": {
    borderRadius: "4px 4px 0 0"
  },
  ".react-colorful__hue": {
    boxShadow: "inset 0 0 0 1px rgb(0 0 0 / 5%)"
  },
  ".react-colorful__last-control": {
    borderRadius: "0 0 4px 4px"
  }
}), Yr = y(jr)(({ theme: r }) => ({
  fontFamily: r.typography.fonts.base
})), Jr = y.div({
  display: "grid",
  gridTemplateColumns: "repeat(9, 16px)",
  gap: 6,
  padding: 3,
  marginTop: 5,
  width: 200
}), Qr = y.div(({ theme: r, active: e }) => ({
  width: 16,
  height: 16,
  boxShadow: e ? `${r.appBorderColor} 0 0 0 1px inset, ${r.textMutedColor}50 0 0 0 4px` : `${r.appBorderColor} 0 0 0 1px inset`,
  borderRadius: r.appBorderRadius
})), Ur = `url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill-opacity=".05"><path d="M8 0h8v8H8zM0 8h8v8H0z"/></svg>')`, vr = /* @__PURE__ */ l(({ value: r, style: e, ...o }) => {
  let t = `linear-gradient(${r}, ${r}), ${Ur}, linear-gradient(#fff, #fff)`;
  return _.createElement(Qr, { ...o, style: { ...e, backgroundImage: t } });
}, "Swatch"), Zr = y(Fr.Input)(({ theme: r, readOnly: e }) => ({
  width: "100%",
  paddingLeft: 30,
  paddingRight: 30,
  boxSizing: "border-box",
  fontFamily: r.typography.fonts.base
})), re = y(Ar)(({ theme: r }) => ({
  position: "absolute",
  zIndex: 1,
  top: 6,
  right: 7,
  width: 20,
  height: 20,
  padding: 4,
  boxSizing: "border-box",
  cursor: "pointer",
  color: r.input.color
})), mr = /* @__PURE__ */ ((t) => (t.RGB = "rgb", t.HSL = "hsl", t.HEX = "hex", t))(mr || {}), W = Object.values(mr), ee = /\(([0-9]+),\s*([0-9]+)%?,\s*([0-9]+)%?,?\s*([0-9.]+)?\)/, oe = /^\s*rgba?\(([0-9]+),\s*([0-9]+),\s*([0-9]+),?\s*([0-9.]+)?\)\s*$/i, te = /^\s*hsla?\(([0-9]+),\s*([0-9]+)%,\s*([0-9]+)%,?\s*([0-9.]+)?\)\s*$/i, D = /^\s*#?([0-9a-f]{3}|[0-9a-f]{6})\s*$/i, ne = /^\s*#?([0-9a-f]{3})\s*$/i, ae = {
  hex: ur,
  rgb: dr,
  hsl: fr
}, B = {
  hex: "transparent",
  rgb: "rgba(0, 0, 0, 0)",
  hsl: "hsla(0, 0%, 0%, 0)"
}, Cr = /* @__PURE__ */ l((r) => {
  let e = r?.match(ee);
  if (!e)
    return [0, 0, 0, 1];
  let [, o, t, n, a = 1] = e;
  return [o, t, n, a].map(Number);
}, "stringToArgs"), le = /* @__PURE__ */ l((r) => {
  let [e, o, t, n] = Cr(r), [a, c, s] = x.default.rgb.hsl([e, o, t]) || [0, 0, 0];
  return {
    valid: !0,
    value: r,
    keyword: x.default.rgb.keyword([e, o, t]),
    colorSpace: "rgb",
    rgb: r,
    hsl: `hsla(${a}, ${c}%, ${s}%, ${n})`,
    hex: `#${x.default.rgb.hex([e, o, t]).toLowerCase()}`
  };
}, "parseRgb"), se = /* @__PURE__ */ l((r) => {
  let [e, o, t, n] = Cr(r), [a, c, s] = x.default.hsl.rgb([e, o, t]) || [0, 0, 0];
  return {
    valid: !0,
    value: r,
    keyword: x.default.hsl.keyword([e, o, t]),
    colorSpace: "hsl",
    rgb: `rgba(${a}, ${c}, ${s}, ${n})`,
    hsl: r,
    hex: `#${x.default.hsl.hex([e, o, t]).toLowerCase()}`
  };
}, "parseHsl"), ce = /* @__PURE__ */ l((r) => {
  let e = r.replace("#", ""), o = x.default.keyword.rgb(e) || x.default.hex.rgb(e), t = x.default.rgb.hsl(o), n = r;
  /[^#a-f0-9]/i.test(r) ? n = e : D.test(r) && (n = `#${e}`);
  let a = !0;
  if (n.startsWith("#"))
    a = D.test(n);
  else
    try {
      x.default.keyword.hex(n);
    } catch {
      a = !1;
    }
  return {
    valid: a,
    value: n,
    keyword: x.default.rgb.keyword(o),
    colorSpace: "hex",
    rgb: `rgba(${o[0]}, ${o[1]}, ${o[2]}, 1)`,
    hsl: `hsla(${t[0]}, ${t[1]}%, ${t[2]}%, 1)`,
    hex: n
  };
}, "parseHexOrKeyword"), M = /* @__PURE__ */ l((r) => {
  if (r)
    return oe.test(r) ? le(r) : te.test(r) ? se(r) : ce(r);
}, "parseValue"), ue = /* @__PURE__ */ l((r, e, o) => {
  if (!r || !e?.valid)
    return B[o];
  if (o !== "hex")
    return e?.[o] || B[o];
  if (!e.hex.startsWith("#"))
    try {
      return `#${x.default.keyword.hex(e.hex)}`;
    } catch {
      return B.hex;
    }
  let t = e.hex.match(ne);
  if (!t)
    return D.test(e.hex) ? e.hex : B.hex;
  let [n, a, c] = t[1].split("");
  return `#${n}${n}${a}${a}${c}${c}`;
}, "getRealValue"), ie = /* @__PURE__ */ l((r, e) => {
  let [o, t] = X(r || ""), [n, a] = X(() => M(o)), [c, s] = X(n?.colorSpace || "hex");
  pr(() => {
    let m = r || "", d = M(m);
    t(m), a(d), s(d?.colorSpace || "hex");
  }, [r]);
  let u = hr(
    () => ue(o, n, c).toLowerCase(),
    [o, n, c]
  ), i = q(
    (m) => {
      let d = M(m), b = d?.value || m || "";
      t(b), b === "" && (a(void 0), e(void 0)), d && (a(d), s(d.colorSpace), e(d.value));
    },
    [e]
  ), h = q(() => {
    let d = (W.indexOf(c) + 1) % W.length, b = W[d];
    s(b);
    let k = n?.[b] || "";
    t(k), e(k);
  }, [n, c, e]);
  return { value: o, realValue: u, updateValue: i, color: n, colorSpace: c, cycleColorSpace: h };
}, "useColorInput"), T = /* @__PURE__ */ l((r) => r.replace(/\s*/, "").toLowerCase(), "id"), fe = /* @__PURE__ */ l((r, e, o) => {
  let [t, n] = X(e?.valid ? [e] : []);
  pr(() => {
    e === void 0 && n([]);
  }, [e]);
  let a = hr(() => (r || []).map((u) => typeof u == "string" ? M(u) : u.title ? { ...M(u.color), keyword: u.title } : M(u.color)).concat(t).filter(Boolean).slice(-27), [r, t]), c = q(
    (s) => {
      s?.valid && (a.some(
        (u) => u && u[o] && T(u[o] || "") === T(s[o] || "")
      ) || n((u) => u.concat(s)));
    },
    [o, a]
  );
  return { presets: a, addPreset: c };
}, "usePresets"), de = /* @__PURE__ */ l(({
  name: r,
  value: e,
  onChange: o,
  onFocus: t,
  onBlur: n,
  presetColors: a,
  startOpen: c = !1,
  argType: s
}) => {
  let u = q(Y(o, 200), [o]), { value: i, realValue: h, updateValue: m, color: d, colorSpace: b, cycleColorSpace: k } = ie(
    e,
    u
  ), { presets: w, addPreset: C } = fe(a ?? [], d, b), g = ae[b], H = !!s?.table?.readonly;
  return _.createElement(Kr, { "aria-readonly": H }, _.createElement(
    Wr,
    {
      startOpen: c,
      trigger: H ? null : void 0,
      closeOnOutsideClick: !0,
      onVisibleChange: () => d && C(d),
      tooltip: _.createElement(Dr, null, _.createElement(
        g,
        {
          color: h === "transparent" ? "#000000" : h,
          onChange: m,
          onFocus: t,
          onBlur: n
        }
      ), w.length > 0 && _.createElement(Jr, null, w.map((v, I) => _.createElement(
        gr,
        {
          key: `${v?.value || I}-${I}`,
          hasChrome: !1,
          tooltip: _.createElement(Yr, { note: v?.keyword || v?.value || "" })
        },
        _.createElement(
          vr,
          {
            value: v?.[b] || "",
            active: !!(d && v && v[b] && T(v[b] || "") === T(d[b])),
            onClick: () => v && m(v.value || "")
          }
        )
      ))))
    },
    _.createElement(vr, { value: h, style: { margin: 4 } })
  ), _.createElement(
    Zr,
    {
      id: J(r),
      value: i,
      onChange: (v) => m(v.target.value),
      onFocus: (v) => v.target.select(),
      readOnly: H,
      placeholder: "Choose color..."
    }
  ), i ? _.createElement(re, { onClick: k }) : null);
}, "ColorControl"), Ee = de;
export {
  de as ColorControl,
  Ee as default
};
