import { an as m, Y as k, ao as $, e as E, ab as w, b as q, ap as W, j as x, B as G, aq as J, ar as Q, as as V, x as z } from "./index-c65ca4a4.mjs";
import { C as Z } from "./ColorIndicator-6c9a0d02.mjs";
import { ReactComponent as ee } from "./eyedropper-3f5af505.mjs";
function C() {
  return (C = Object.assign || function(e) {
    for (var r = 1; r < arguments.length; r++) {
      var t = arguments[r];
      for (var n in t)
        Object.prototype.hasOwnProperty.call(t, n) && (e[n] = t[n]);
    }
    return e;
  }).apply(this, arguments);
}
function I(e, r) {
  if (e == null)
    return {};
  var t, n, o = {}, a = Object.keys(e);
  for (n = 0; n < a.length; n++)
    r.indexOf(t = a[n]) >= 0 || (o[t] = e[t]);
  return o;
}
function M(e) {
  var r = k(e), t = k(function(n) {
    r.current && r.current(n);
  });
  return r.current = e, t.current;
}
var P = function(e, r, t) {
  return r === void 0 && (r = 0), t === void 0 && (t = 1), e > t ? t : e < r ? r : e;
}, j = function(e) {
  return "touches" in e;
}, S = function(e) {
  return e && e.ownerDocument.defaultView || self;
}, B = function(e, r, t) {
  var n = e.getBoundingClientRect(), o = j(r) ? function(a, c) {
    for (var l = 0; l < a.length; l++)
      if (a[l].identifier === c)
        return a[l];
    return a[0];
  }(r.touches, t) : r;
  return { left: P((o.pageX - (n.left + S(e).pageXOffset)) / n.width), top: P((o.pageY - (n.top + S(e).pageYOffset)) / n.height) };
}, R = function(e) {
  !j(e) && e.preventDefault();
}, K = m.memo(function(e) {
  var r = e.onMove, t = e.onKey, n = I(e, ["onMove", "onKey"]), o = k(null), a = M(r), c = M(t), l = k(null), i = k(!1), u = $(function() {
    var g = function(s) {
      R(s), (j(s) ? s.touches.length > 0 : s.buttons > 0) && o.current ? a(B(o.current, s, l.current)) : _(!1);
    }, b = function() {
      return _(!1);
    };
    function _(s) {
      var v = i.current, y = S(o.current), N = s ? y.addEventListener : y.removeEventListener;
      N(v ? "touchmove" : "mousemove", g), N(v ? "touchend" : "mouseup", b);
    }
    return [function(s) {
      var v = s.nativeEvent, y = o.current;
      if (y && (R(v), !function(A, X) {
        return X && !j(A);
      }(v, i.current) && y)) {
        if (j(v)) {
          i.current = !0;
          var N = v.changedTouches || [];
          N.length && (l.current = N[0].identifier);
        }
        y.focus(), a(B(y, v, l.current)), _(!0);
      }
    }, function(s) {
      var v = s.which || s.keyCode;
      v < 37 || v > 40 || (s.preventDefault(), c({ left: v === 39 ? 0.05 : v === 37 ? -0.05 : 0, top: v === 40 ? 0.05 : v === 38 ? -0.05 : 0 }));
    }, _];
  }, [c, a]), p = u[0], f = u[1], d = u[2];
  return E(function() {
    return d;
  }, [d]), m.createElement("div", C({}, n, { onTouchStart: p, onMouseDown: p, className: "react-colorful__interactive", ref: o, onKeyDown: f, tabIndex: 0, role: "slider" }));
}), O = function(e) {
  return e.filter(Boolean).join(" ");
}, U = function(e) {
  var r = e.color, t = e.left, n = e.top, o = n === void 0 ? 0.5 : n, a = O(["react-colorful__pointer", e.className]);
  return m.createElement("div", { className: a, style: { top: 100 * o + "%", left: 100 * t + "%" } }, m.createElement("div", { className: "react-colorful__pointer-fill", style: { backgroundColor: r } }));
}, h = function(e, r, t) {
  return r === void 0 && (r = 0), t === void 0 && (t = Math.pow(10, r)), Math.round(t * e) / t;
}, re = function(e) {
  return ce(H(e));
}, H = function(e) {
  return e[0] === "#" && (e = e.substring(1)), e.length < 6 ? { r: parseInt(e[0] + e[0], 16), g: parseInt(e[1] + e[1], 16), b: parseInt(e[2] + e[2], 16), a: e.length === 4 ? h(parseInt(e[3] + e[3], 16) / 255, 2) : 1 } : { r: parseInt(e.substring(0, 2), 16), g: parseInt(e.substring(2, 4), 16), b: parseInt(e.substring(4, 6), 16), a: e.length === 8 ? h(parseInt(e.substring(6, 8), 16) / 255, 2) : 1 };
}, te = function(e) {
  return ae(oe(e));
}, ne = function(e) {
  var r = e.s, t = e.v, n = e.a, o = (200 - r) * t / 100;
  return { h: h(e.h), s: h(o > 0 && o < 200 ? r * t / 100 / (o <= 100 ? o : 200 - o) * 100 : 0), l: h(o / 2), a: h(n, 2) };
}, L = function(e) {
  var r = ne(e);
  return "hsl(" + r.h + ", " + r.s + "%, " + r.l + "%)";
}, oe = function(e) {
  var r = e.h, t = e.s, n = e.v, o = e.a;
  r = r / 360 * 6, t /= 100, n /= 100;
  var a = Math.floor(r), c = n * (1 - t), l = n * (1 - (r - a) * t), i = n * (1 - (1 - r + a) * t), u = a % 6;
  return { r: h(255 * [n, l, c, c, i, n][u]), g: h(255 * [i, n, n, l, c, c][u]), b: h(255 * [c, c, i, n, n, l][u]), a: h(o, 2) };
}, D = function(e) {
  var r = e.toString(16);
  return r.length < 2 ? "0" + r : r;
}, ae = function(e) {
  var r = e.r, t = e.g, n = e.b, o = e.a, a = o < 1 ? D(h(255 * o)) : "";
  return "#" + D(r) + D(t) + D(n) + a;
}, ce = function(e) {
  var r = e.r, t = e.g, n = e.b, o = e.a, a = Math.max(r, t, n), c = a - Math.min(r, t, n), l = c ? a === r ? (t - n) / c : a === t ? 2 + (n - r) / c : 4 + (r - t) / c : 0;
  return { h: h(60 * (l < 0 ? l + 6 : l)), s: h(a ? c / a * 100 : 0), v: h(a / 255 * 100), a: o };
}, le = m.memo(function(e) {
  var r = e.hue, t = e.onChange, n = O(["react-colorful__hue", e.className]);
  return m.createElement("div", { className: n }, m.createElement(K, { onMove: function(o) {
    t({ h: 360 * o.left });
  }, onKey: function(o) {
    t({ h: P(r + 360 * o.left, 0, 360) });
  }, "aria-label": "Hue", "aria-valuenow": h(r), "aria-valuemax": "360", "aria-valuemin": "0" }, m.createElement(U, { className: "react-colorful__hue-pointer", left: r / 360, color: L({ h: r, s: 100, v: 100, a: 1 }) })));
}), ue = m.memo(function(e) {
  var r = e.hsva, t = e.onChange, n = { backgroundColor: L({ h: r.h, s: 100, v: 100, a: 1 }) };
  return m.createElement("div", { className: "react-colorful__saturation", style: n }, m.createElement(K, { onMove: function(o) {
    t({ s: 100 * o.left, v: 100 - 100 * o.top });
  }, onKey: function(o) {
    t({ s: P(r.s + 100 * o.left, 0, 100), v: P(r.v - 100 * o.top, 0, 100) });
  }, "aria-label": "Color", "aria-valuetext": "Saturation " + h(r.s) + "%, Brightness " + h(r.v) + "%" }, m.createElement(U, { className: "react-colorful__saturation-pointer", top: 1 - r.v / 100, left: r.s / 100, color: L(r) })));
}), Y = function(e, r) {
  if (e === r)
    return !0;
  for (var t in e)
    if (e[t] !== r[t])
      return !1;
  return !0;
}, se = function(e, r) {
  return e.toLowerCase() === r.toLowerCase() || Y(H(e), H(r));
};
function ie(e, r, t) {
  var n = M(t), o = q(function() {
    return e.toHsva(r);
  }), a = o[0], c = o[1], l = k({ color: r, hsva: a });
  E(function() {
    if (!e.equal(r, l.current.color)) {
      var u = e.toHsva(r);
      l.current = { hsva: u, color: r }, c(u);
    }
  }, [r, e]), E(function() {
    var u;
    Y(a, l.current.hsva) || e.equal(u = e.fromHsva(a), l.current.color) || (l.current = { hsva: a, color: u }, n(u));
  }, [a, e, n]);
  var i = w(function(u) {
    c(function(p) {
      return Object.assign({}, p, u);
    });
  }, []);
  return [a, i];
}
var fe = typeof window < "u" ? W : E, de = function() {
  return typeof __webpack_nonce__ < "u" ? __webpack_nonce__ : void 0;
}, T = /* @__PURE__ */ new Map(), pe = function(e) {
  fe(function() {
    var r = e.current ? e.current.ownerDocument : document;
    if (r !== void 0 && !T.has(r)) {
      var t = r.createElement("style");
      t.innerHTML = `.react-colorful{position:relative;display:flex;flex-direction:column;width:200px;height:200px;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;cursor:default}.react-colorful__saturation{position:relative;flex-grow:1;border-color:transparent;border-bottom:12px solid #000;border-radius:8px 8px 0 0;background-image:linear-gradient(0deg,#000,transparent),linear-gradient(90deg,#fff,hsla(0,0%,100%,0))}.react-colorful__alpha-gradient,.react-colorful__pointer-fill{content:"";position:absolute;left:0;top:0;right:0;bottom:0;pointer-events:none;border-radius:inherit}.react-colorful__alpha-gradient,.react-colorful__saturation{box-shadow:inset 0 0 0 1px rgba(0,0,0,.05)}.react-colorful__alpha,.react-colorful__hue{position:relative;height:24px}.react-colorful__hue{background:linear-gradient(90deg,red 0,#ff0 17%,#0f0 33%,#0ff 50%,#00f 67%,#f0f 83%,red)}.react-colorful__last-control{border-radius:0 0 8px 8px}.react-colorful__interactive{position:absolute;left:0;top:0;right:0;bottom:0;border-radius:inherit;outline:none;touch-action:none}.react-colorful__pointer{position:absolute;z-index:1;box-sizing:border-box;width:28px;height:28px;transform:translate(-50%,-50%);background-color:#fff;border:2px solid #fff;border-radius:50%;box-shadow:0 2px 4px rgba(0,0,0,.2)}.react-colorful__interactive:focus .react-colorful__pointer{transform:translate(-50%,-50%) scale(1.1)}.react-colorful__alpha,.react-colorful__alpha-pointer{background-color:#fff;background-image:url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill-opacity=".05"><path d="M8 0h8v8H8zM0 8h8v8H0z"/></svg>')}.react-colorful__saturation-pointer{z-index:3}.react-colorful__hue-pointer{z-index:2}`, T.set(r, t);
      var n = de();
      n && t.setAttribute("nonce", n), r.head.appendChild(t);
    }
  }, []);
}, ve = function(e) {
  var r = e.className, t = e.colorModel, n = e.color, o = n === void 0 ? t.defaultColor : n, a = e.onChange, c = I(e, ["className", "colorModel", "color", "onChange"]), l = k(null);
  pe(l);
  var i = ie(t, o, a), u = i[0], p = i[1], f = O(["react-colorful", r]);
  return m.createElement("div", C({}, c, { ref: l, className: f }), m.createElement(ue, { hsva: u, onChange: p }), m.createElement(le, { hue: u.h, onChange: p, className: "react-colorful__last-control" }));
}, me = { defaultColor: "000", toHsva: re, fromHsva: function(e) {
  return te({ h: e.h, s: e.s, v: e.v, a: 1 });
}, equal: se }, he = function(e) {
  return m.createElement(ve, C({}, e, { colorModel: me }));
}, ge = /^#?([0-9A-F]{3,8})$/i, xe = function(e) {
  var r = e.color, t = r === void 0 ? "" : r, n = e.onChange, o = e.onBlur, a = e.escape, c = e.validate, l = e.format, i = e.process, u = I(e, ["color", "onChange", "onBlur", "escape", "validate", "format", "process"]), p = q(function() {
    return a(t);
  }), f = p[0], d = p[1], g = M(n), b = M(o), _ = w(function(v) {
    var y = a(v.target.value);
    d(y), c(y) && g(i ? i(y) : y);
  }, [a, i, c, g]), s = w(function(v) {
    c(v.target.value) || d(a(t)), b(v);
  }, [t, a, c, b]);
  return E(function() {
    d(a(t));
  }, [t, a]), m.createElement("input", C({}, u, { value: l ? l(f) : f, spellCheck: "false", onChange: _, onBlur: s }));
}, F = function(e) {
  return "#" + e;
}, be = function(e) {
  var r = e.prefixed, t = e.alpha, n = I(e, ["prefixed", "alpha"]), o = w(function(c) {
    return c.replace(/([^0-9A-F]+)/gi, "").substring(0, t ? 8 : 6);
  }, [t]), a = w(function(c) {
    return function(l, i) {
      var u = ge.exec(l), p = u ? u[1].length : 0;
      return p === 3 || p === 6 || !!i && p === 4 || !!i && p === 8;
    }(c, t);
  }, [t]);
  return m.createElement(xe, C({}, n, { escape: o, format: r ? F : void 0, process: F, validate: a }));
};
const _e = ({ hexValue: e, eyedropper: r, clearButtonValue: t, onChange: n }) => {
  const o = k(null), a = w((f) => {
    var b, _, s;
    f.stopPropagation();
    const d = (b = o.current) == null ? void 0 : b.querySelector("input");
    f.target !== d && ((s = (_ = o.current) == null ? void 0 : _.querySelector("input")) == null || s.focus(), f.preventDefault());
  }, []), c = k(!1), l = w(() => {
    var f, d;
    c.current = !1, (d = (f = o.current) == null ? void 0 : f.querySelector("input")) == null || d.focus(), document.removeEventListener("mouseup", l), document.removeEventListener("touchend", l);
  }, []), i = w(() => {
    c.current = !0, document.addEventListener("mouseup", l), document.addEventListener("touchend", l);
  }, [l]), u = w((f) => {
    if (f.preventDefault(), !window.EyeDropper)
      return;
    c.current = !0, document.body.style.setProperty("pointer-events", "none"), new window.EyeDropper().open().then((g) => n == null ? void 0 : n(g.sRGBHex)).finally(() => {
      var g, b;
      c.current = !1, document.body.style.removeProperty("pointer-events"), (b = (g = o.current) == null ? void 0 : g.querySelector("input")) == null || b.focus();
    });
  }, [n]);
  E(() => {
    var f, d;
    (d = (f = o.current) == null ? void 0 : f.querySelector("input")) == null || d.focus();
  }, []);
  const p = w(() => {
    var f, d;
    (d = (f = o.current) == null ? void 0 : f.querySelector("input")) == null || d.focus();
  }, []);
  return /* @__PURE__ */ x.jsxs("div", { className: "mt-2", onMouseDown: a, onTouchStart: a, children: [
    /* @__PURE__ */ x.jsx(he, { className: "w-full", color: e || "#ffffff", onChange: n, onMouseDown: i, onTouchStart: i }),
    /* @__PURE__ */ x.jsxs("div", { className: "mt-3 flex gap-2", children: [
      /* @__PURE__ */ x.jsxs("div", { ref: o, className: "peer relative order-2 flex h-10 w-full items-center border-b border-grey-500 py-2 hover:border-grey-700 focus:border-black", onClick: p, children: [
        /* @__PURE__ */ x.jsx("span", { className: "ml-1 mr-2 text-grey-700", children: "#" }),
        /* @__PURE__ */ x.jsx(be, { "aria-label": "Color value", className: "z-50 w-full bg-transparent", color: e, onChange: n }),
        r && !!window.EyeDropper && /* @__PURE__ */ x.jsx(
          "button",
          {
            className: "absolute inset-y-0 right-3 z-50 my-auto h-4 w-4 p-[1px]",
            type: "button",
            onClick: u,
            children: /* @__PURE__ */ x.jsx(ee, { className: "h-full w-full" })
          }
        )
      ] }),
      t !== void 0 && /* @__PURE__ */ x.jsx(G, { color: "grey", value: "Clear", onClick: () => n == null ? void 0 : n(t) })
    ] })
  ] });
}, ye = J({
  colorPickers: []
}), Ce = ({ testId: e, title: r, direction: t, value: n, hint: o, error: a, eyedropper: c, clearButtonValue: l, onChange: i, swatches: u = [] }) => {
  const [p, f] = q(!1), d = Q(ye), g = V();
  E(() => (d.colorPickers.push({ id: g, setExpanded: f }), () => {
    d.colorPickers = d.colorPickers.filter((s) => s.id !== g);
  }), [d, g]), E(() => {
    if (p) {
      d.colorPickers.filter((v) => v.id !== g).forEach((v) => v.setExpanded(!1));
      const s = () => {
        f(!1);
      };
      return document.addEventListener("click", s), () => {
        document.removeEventListener("click", s);
      };
    }
  }, [d, g, p]);
  let b = /* @__PURE__ */ x.jsx(
    Z,
    {
      isExpanded: p,
      swatches: u,
      value: n,
      onSwatchChange: (s) => {
        i == null || i(s), f(!1);
      },
      onTogglePicker: () => f(!p)
    }
  );
  r && (b = /* @__PURE__ */ x.jsxs("div", { className: z("flex w-full cursor-pointer items-start first:mt-0", t === "rtl" && "flex-row-reverse"), children: [
    /* @__PURE__ */ x.jsx("div", { className: "shrink-0", children: b }),
    /* @__PURE__ */ x.jsxs("div", { className: z("flex-1", t === "rtl" ? "pr-2" : "pl-2", o ? "mt-[-2px]" : "mt-[1px]"), onClick: () => f(!p), children: [
      r,
      o && /* @__PURE__ */ x.jsx("div", { className: `text-xs ${a ? "text-red" : "text-grey-700"}`, children: o })
    ] })
  ] }));
  let _ = u.find((s) => s.value === n);
  return /* @__PURE__ */ x.jsxs("div", { className: "mt-2 flex-col", "data-testid": e, onClick: (s) => s.stopPropagation(), children: [
    b,
    p && /* @__PURE__ */ x.jsx(_e, { clearButtonValue: l, eyedropper: c, hexValue: (_ == null ? void 0 : _.hex) || n || void 0, onChange: i })
  ] });
};
export {
  Ce as C
};
//# sourceMappingURL=ColorPickerField-d6436bfd.mjs.map
