customizable-gradient-picker 1.1.0

package/dist/index.js

@@ -0,0 +1,2886 @@
+(function(){"use strict";try{if(typeof document<"u"){var e=document.createElement("style");e.appendChild(document.createTextNode(".gp-color-square-wrapper{position:relative;overflow:hidden;border-radius:12px;aspect-ratio:1 / 1;height:auto;width:100%}.gp-color-square-thumb{position:absolute;transform:translate(-50%,-50%);pointer-events:none;touch-action:none;min-height:14px;min-width:14px;border-radius:9999px;border:2px solid white;cursor:pointer;box-shadow:0 0 2px #0009}.gp-hue-slider-wrapper{position:relative;height:20px;width:100%;border-radius:9999px;display:flex;justify-content:center;align-items:center}.gp-hue-slider-thumb{position:absolute;top:50%;transform:translate(-50%,-50%);box-sizing:border-box;width:24px;height:24px;border-radius:9999px;border:4px solid white;shadow:0 0 2px rgba(0,0,0,.6);cursor:ew-resize}.gp-hue-slider-canvas{border-radius:inherit}.gp-delete-stop-button{background-color:transparent;border:none;cursor:pointer;padding-inline:0px;padding-block:0px;line-height:0}.gp-delete-stop-button:disabled{cursor:not-allowed}.gp-delete-stop-button:disabled .gp-delete-stop-icon{color:gray}.gp-delete-stop-icon{width:16px;height:16px;color:#fff}.gp-eye-dropper-button{background-color:transparent;border:none;border-radius:4px;cursor:pointer;box-sizing:border-box;padding-block:0px;padding-inline:0px;padding:4px;margin:0;line-height:0;display:flex;justify-content:center;align-items:center;transition:background-color .2s ease-in-out}.gp-eye-dropper-button.gp-eye-dropper-active{background-color:#007acc}.gp-eye-dropper-icon{width:16px;height:16px;color:#fff}.gp-stop-position-wrapper{display:flex;align-items:center;justify-content:center;gap:8px;box-sizing:border-box;padding:8px;border-radius:8px;background-color:#ffffff4d}.gp-stop-position-label{color:#fff;font-size:12px}.gp-stop-position-input-wrapper{display:flex;align-items:center;justify-content:center;gap:0px;box-sizing:border-box;cursor:text;font-size:12px}.gp-stop-position-input{field-sizing:content;background-color:transparent;border:none;padding:0;line-height:0;color:#fff;font-size:inherit;outline:none}.gp-stop-position-input:is(:focus,:focus-visible){outline:none}.gp-stop-position-suffix{line-height:0;color:#fff;font-size:inherit}.gp-stop-position-icon{width:14px;color:#fff}.gp-stop-position-steppers{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;margin-left:4px}.gp-stop-position-stepper-button{background-color:transparent;border:none;padding-inline:0;padding-block:0;line-height:0;cursor:pointer}.gp-stop-position-stepper-decrement{transform:rotate(180deg)}.gp-stop-position-stepper-button svg{width:8px;color:#fff}.gp-alpha-slider-wrapper{position:relative;height:20px;width:100%;border-radius:9999px;display:flex;justify-content:center;align-items:center}.gp-alpha-slider-thumb{position:absolute;top:50%;transform:translate(-50%,-50%);box-sizing:border-box;box-shadow:0 0 2px #0009;background-color:#fff;height:24px;width:24px;border-radius:9999px;border:4px solid white;cursor:pointer}.gp-alpha-slider-thumb-inner{width:100%;height:100%;cursor:pointer;border-radius:9999px}.gp-alpha-slider-canvas{border-radius:inherit}.gp-alpha-input-wrapper{display:flex;justify-content:center;align-items:center;gap:8px;box-sizing:border-box;padding:8px;border-radius:8px;cursor:text;background-color:#ffffff4d}.gp-alpha-input-field{background-color:transparent;color:#fff;font-size:12px;field-sizing:content;border:none;padding-inline:0;padding-block:0;line-height:0;outline:none}.gp-alpha-input-suffix{color:#fff;font-size:12px;line-height:0}.gp-alpha-input-steppers{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px}.gp-alpha-input-stepper-button{background-color:transparent;border:none;padding-inline:0;padding-block:0;line-height:0;cursor:pointer}.gp-alpha-input-stepper-decrement{transform:rotate(180deg)}.gp-alpha-input-stepper-button svg{width:8px;color:#fff}.gp-angle-input-wrapper{display:flex;align-items:center;justify-content:center;gap:8px;box-sizing:border-box;padding:8px;border-radius:8px;background-color:#ffffff4d}.gp-angle-input-icon{width:14px;color:#fff}.gp-angle-input-input-wrapper{display:flex;gap:1px;width:54px;box-sizing:border-box;cursor:text}.gp-angle-input-field{font-size:12px;font-family:Sora,sans-serif;font-weight:400;color:#fff;field-sizing:content;border:none;background-color:transparent;padding-inline:0;padding-block:0;line-height:0;outline:none}.gp-angle-input-field:is(:focus,:focus-visible){outline:none}.gp-angle-input-degree{line-height:.75;color:#fff}.gp-angle-input-steppers{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px}.gp-angle-input-stepper-button{background-color:transparent;border:none;padding-inline:0;padding-block:0;line-height:0;cursor:pointer}.gp-angle-input-stepper-decrement{transform:rotate(180deg)}.gp-angle-input-stepper-button svg{width:8px;color:#fff}.gp-gradient-slider-wrapper{position:relative;height:20px;width:100%;border-radius:9999px;border:1px solid white}.gp-gradient-slider-gradient{position:absolute;inset:0;border-radius:9999px}.gp-gradient-slider-stop{transition:border-width .2s ease-in-out;aspect-ratio:1 / 1;height:24px;cursor:pointer;box-sizing:border-box;border-radius:9999px;border:4px solid white;position:absolute;top:50%;transform:translate(-50%,-50%)}.gp-gradient-slider-stop-inner{width:100%;height:100%;border-radius:9999px}.gp-gradient-slider-stop.gp-gradient-slider-stop-active{border:8px solid white}.gp-gradient-slider-canvas{position:absolute;inset:0;pointer-events:none;border-radius:inherit}.gp-gradient-formats-wrapper{display:flex;justify-content:center;align-items:center;gap:8px}.gp-gradient-formats-button{background-color:transparent;border:none;border-radius:4px;line-height:0;cursor:pointer;box-sizing:border-box;padding-block:0px;padding-inline:0px;padding:4px;margin:0;display:flex;justify-content:center;align-items:center;transition:background-color .2s ease-in-out}.gp-gradient-formats-button.gp-gradient-formats-button-active{background-color:#007acc}.gp-gradient-formats-icon{width:16px;height:16px;color:#fff;transition:color .2s ease-in-out}.gp-gradient-preview-wrapper{width:100%;height:40px;border-radius:12px;border:1px solid var(--light-grey)}.gp-gradient-string-wrapper{width:100%;box-sizing:border-box;padding:8px;border:1px solid var(--light-grey);border-radius:12px;background-color:#fff;display:flex;align-items:center;justify-content:center;gap:8px}.gp-gradient-string-text{font-size:12px;font-family:Sora,sans-serif;font-weight:400;color:#000;-webkit-user-select:all;user-select:all}.gp-gradient-string-copy-button{background-color:transparent;border:none;padding-inline:0;padding-block:0;cursor:pointer}.gp-gradient-string-copy-icon{width:14px;color:var(--light-grey)}.gp-hex-input-wrapper{display:flex;justify-content:center;align-items:center;box-sizing:border-box;padding:8px;border-radius:8px;cursor:text;background-color:#ffffff4d}.gp-hex-input-prefix{color:#fff;font-size:12px}.gp-hex-input-field{background-color:transparent;color:#fff;font-size:12px;field-sizing:content;border:none;padding-inline:0;padding-block:0;line-height:0;outline:none}.gp-hex-input-field:is(:focus,:focus-visible){outline:none}.gp-hex-input-copy-button{background-color:transparent;border:none;line-height:0;padding-inline:0;padding-block:0;margin-left:16px;cursor:pointer}.gp-hex-input-copy-icon{width:12px;color:#fff}.gp-hex-preview{width:32px;height:32px;border-radius:8px;flex-shrink:0}.gp-rgba-input-wrapper{display:flex;justify-content:center;align-items:center;gap:12px;box-sizing:border-box;padding:8px;border-radius:8px;cursor:text;background-color:#ffffff4d}.gp-rgba-input-field-wrapper{display:flex;align-items:center;gap:4px;cursor:text}.gp-rgba-input-field{background-color:transparent;color:#fff;font-size:12px;field-sizing:content;border:none;padding-inline:0;padding-block:0;line-height:0;outline:none}.gp-rgba-input-steppers{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px}.gp-rgba-input-stepper-button{background-color:transparent;border:none;padding-inline:0;padding-block:0;line-height:0;cursor:pointer}.gp-rgba-input-stepper-decrement{transform:rotate(180deg)}.gp-rgba-input-stepper-button svg{width:8px;color:#fff}.gp-rgba-preview{width:32px;height:32px;border-radius:8px;flex-shrink:0}:root{--grey: #a7b1c8;--light-grey: #d2d2e0}._wrapper_dqprj_11{width:240px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px}._map-item_dqprj_31{width:100%}")),document.head.appendChild(e)}}catch(i){console.error("vite-plugin-css-injected-by-js",i)}})();
+import ue, { useRef as F, useState as st, useEffect as W, useMemo as nt, useCallback as et, useSyncExternalStore as te, useContext as pe, createContext as de, memo as ee, Fragment as ge } from "react";
+var Tt = { exports: {} }, Pt = {};
+var Xt;
+function fe() {
+  if (Xt) return Pt;
+  Xt = 1;
+  var t = /* @__PURE__ */ Symbol.for("react.transitional.element"), e = /* @__PURE__ */ Symbol.for("react.fragment");
+  function r(n, o, s) {
+    var a = null;
+    if (s !== void 0 && (a = "" + s), o.key !== void 0 && (a = "" + o.key), "key" in o) {
+      s = {};
+      for (var h in o)
+        h !== "key" && (s[h] = o[h]);
+    } else s = o;
+    return o = s.ref, {
+      $$typeof: t,
+      type: n,
+      key: a,
+      ref: o !== void 0 ? o : null,
+      props: s
+    };
+  }
+  return Pt.Fragment = e, Pt.jsx = r, Pt.jsxs = r, Pt;
+}
+var At = {};
+var Yt;
+function he() {
+  return Yt || (Yt = 1, process.env.NODE_ENV !== "production" && (function() {
+    function t(l) {
+      if (l == null) return null;
+      if (typeof l == "function")
+        return l.$$typeof === I ? null : l.displayName || l.name || null;
+      if (typeof l == "string") return l;
+      switch (l) {
+        case O:
+          return "Fragment";
+        case k:
+          return "Profiler";
+        case D:
+          return "StrictMode";
+        case R:
+          return "Suspense";
+        case H:
+          return "SuspenseList";
+        case M:
+          return "Activity";
+      }
+      if (typeof l == "object")
+        switch (typeof l.tag == "number" && console.error(
+          "Received an unexpected object in getComponentNameFromType(). This is likely a bug in React. Please file an issue."
+        ), l.$$typeof) {
+          case d:
+            return "Portal";
+          case A:
+            return l.displayName || "Context";
+          case E:
+            return (l._context.displayName || "Context") + ".Consumer";
+          case f:
+            var V = l.render;
+            return l = l.displayName, l || (l = V.displayName || V.name || "", l = l !== "" ? "ForwardRef(" + l + ")" : "ForwardRef"), l;
+          case m:
+            return V = l.displayName || null, V !== null ? V : t(l.type) || "Memo";
+          case b:
+            V = l._payload, l = l._init;
+            try {
+              return t(l(V));
+            } catch {
+            }
+        }
+      return null;
+    }
+    function e(l) {
+      return "" + l;
+    }
+    function r(l) {
+      try {
+        e(l);
+        var V = !1;
+      } catch {
+        V = !0;
+      }
+      if (V) {
+        V = console;
+        var K = V.error, tt = typeof Symbol == "function" && Symbol.toStringTag && l[Symbol.toStringTag] || l.constructor.name || "Object";
+        return K.call(
+          V,
+          "The provided key is an unsupported type %s. This value must be coerced to a string before using it here.",
+          tt
+        ), e(l);
+      }
+    }
+    function n(l) {
+      if (l === O) return "<>";
+      if (typeof l == "object" && l !== null && l.$$typeof === b)
+        return "<...>";
+      try {
+        var V = t(l);
+        return V ? "<" + V + ">" : "<...>";
+      } catch {
+        return "<...>";
+      }
+    }
+    function o() {
+      var l = Z.A;
+      return l === null ? null : l.getOwner();
+    }
+    function s() {
+      return Error("react-stack-top-frame");
+    }
+    function a(l) {
+      if (P.call(l, "key")) {
+        var V = Object.getOwnPropertyDescriptor(l, "key").get;
+        if (V && V.isReactWarning) return !1;
+      }
+      return l.key !== void 0;
+    }
+    function h(l, V) {
+      function K() {
+        B || (B = !0, console.error(
+          "%s: `key` is not a prop. Trying to access it will result in `undefined` being returned. If you need to access the same value within the child component, you should pass it as a different prop. (https://react.dev/link/special-props)",
+          V
+        ));
+      }
+      K.isReactWarning = !0, Object.defineProperty(l, "key", {
+        get: K,
+        configurable: !0
+      });
+    }
+    function p() {
+      var l = t(this.type);
+      return q[l] || (q[l] = !0, console.error(
+        "Accessing element.ref was removed in React 19. ref is now a regular prop. It will be removed from the JSX Element type in a future release."
+      )), l = this.props.ref, l !== void 0 ? l : null;
+    }
+    function i(l, V, K, tt, ht, g) {
+      var S = K.ref;
+      return l = {
+        $$typeof: j,
+        type: l,
+        key: V,
+        props: K,
+        _owner: tt
+      }, (S !== void 0 ? S : null) !== null ? Object.defineProperty(l, "ref", {
+        enumerable: !1,
+        get: p
+      }) : Object.defineProperty(l, "ref", { enumerable: !1, value: null }), l._store = {}, Object.defineProperty(l._store, "validated", {
+        configurable: !1,
+        enumerable: !1,
+        writable: !0,
+        value: 0
+      }), Object.defineProperty(l, "_debugInfo", {
+        configurable: !1,
+        enumerable: !1,
+        writable: !0,
+        value: null
+      }), Object.defineProperty(l, "_debugStack", {
+        configurable: !1,
+        enumerable: !1,
+        writable: !0,
+        value: ht
+      }), Object.defineProperty(l, "_debugTask", {
+        configurable: !1,
+        enumerable: !1,
+        writable: !0,
+        value: g
+      }), Object.freeze && (Object.freeze(l.props), Object.freeze(l)), l;
+    }
+    function v(l, V, K, tt, ht, g) {
+      var S = V.children;
+      if (S !== void 0)
+        if (tt)
+          if (L(S)) {
+            for (tt = 0; tt < S.length; tt++)
+              $(S[tt]);
+            Object.freeze && Object.freeze(S);
+          } else
+            console.error(
+              "React.jsx: Static children should always be an array. You are likely explicitly calling React.jsxs or React.jsxDEV. Use the Babel transform instead."
+            );
+        else $(S);
+      if (P.call(V, "key")) {
+        S = t(l);
+        var N = Object.keys(V).filter(function(c) {
+          return c !== "key";
+        });
+        tt = 0 < N.length ? "{key: someKey, " + N.join(": ..., ") + ": ...}" : "{key: someKey}", ot[S + tt] || (N = 0 < N.length ? "{" + N.join(": ..., ") + ": ...}" : "{}", console.error(
+          `A props object containing a "key" prop is being spread into JSX:
+  let props = %s;
+  <%s {...props} />
+React keys must be passed directly to JSX without using spread:
+  let props = %s;
+  <%s key={someKey} {...props} />`,
+          tt,
+          S,
+          N,
+          S
+        ), ot[S + tt] = !0);
+      }
+      if (S = null, K !== void 0 && (r(K), S = "" + K), a(V) && (r(V.key), S = "" + V.key), "key" in V) {
+        K = {};
+        for (var U in V)
+          U !== "key" && (K[U] = V[U]);
+      } else K = V;
+      return S && h(
+        K,
+        typeof l == "function" ? l.displayName || l.name || "Unknown" : l
+      ), i(
+        l,
+        S,
+        K,
+        o(),
+        ht,
+        g
+      );
+    }
+    function $(l) {
+      y(l) ? l._store && (l._store.validated = 1) : typeof l == "object" && l !== null && l.$$typeof === b && (l._payload.status === "fulfilled" ? y(l._payload.value) && l._payload.value._store && (l._payload.value._store.validated = 1) : l._store && (l._store.validated = 1));
+    }
+    function y(l) {
+      return typeof l == "object" && l !== null && l.$$typeof === j;
+    }
+    var w = ue, j = /* @__PURE__ */ Symbol.for("react.transitional.element"), d = /* @__PURE__ */ Symbol.for("react.portal"), O = /* @__PURE__ */ Symbol.for("react.fragment"), D = /* @__PURE__ */ Symbol.for("react.strict_mode"), k = /* @__PURE__ */ Symbol.for("react.profiler"), E = /* @__PURE__ */ Symbol.for("react.consumer"), A = /* @__PURE__ */ Symbol.for("react.context"), f = /* @__PURE__ */ Symbol.for("react.forward_ref"), R = /* @__PURE__ */ Symbol.for("react.suspense"), H = /* @__PURE__ */ Symbol.for("react.suspense_list"), m = /* @__PURE__ */ Symbol.for("react.memo"), b = /* @__PURE__ */ Symbol.for("react.lazy"), M = /* @__PURE__ */ Symbol.for("react.activity"), I = /* @__PURE__ */ Symbol.for("react.client.reference"), Z = w.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE, P = Object.prototype.hasOwnProperty, L = Array.isArray, G = console.createTask ? console.createTask : function() {
+      return null;
+    };
+    w = {
+      react_stack_bottom_frame: function(l) {
+        return l();
+      }
+    };
+    var B, q = {}, Y = w.react_stack_bottom_frame.bind(
+      w,
+      s
+    )(), Q = G(n(s)), ot = {};
+    At.Fragment = O, At.jsx = function(l, V, K) {
+      var tt = 1e4 > Z.recentlyCreatedOwnerStacks++;
+      return v(
+        l,
+        V,
+        K,
+        !1,
+        tt ? Error("react-stack-top-frame") : Y,
+        tt ? G(n(l)) : Q
+      );
+    }, At.jsxs = function(l, V, K) {
+      var tt = 1e4 > Z.recentlyCreatedOwnerStacks++;
+      return v(
+        l,
+        V,
+        K,
+        !0,
+        tt ? Error("react-stack-top-frame") : Y,
+        tt ? G(n(l)) : Q
+      );
+    };
+  })()), At;
+}
+var Zt;
+function me() {
+  return Zt || (Zt = 1, process.env.NODE_ENV === "production" ? Tt.exports = fe() : Tt.exports = he()), Tt.exports;
+}
+var u = me();
+const yt = (t) => Math.max(0, Math.min(1, t)), vt = (t, e, r) => {
+  const n = (t % 360 + 360) % 360, o = r * e, s = o * (1 - Math.abs(n / 60 % 2 - 1)), a = r - o;
+  let h = 0, p = 0, i = 0;
+  n < 60 ? [h, p, i] = [o, s, 0] : n < 120 ? [h, p, i] = [s, o, 0] : n < 180 ? [h, p, i] = [0, o, s] : n < 240 ? [h, p, i] = [0, s, o] : n < 300 ? [h, p, i] = [s, 0, o] : [h, p, i] = [o, 0, s];
+  const v = Math.round((h + a) * 255), $ = Math.round((p + a) * 255), y = Math.round((i + a) * 255);
+  return { r: v, g: $, b: y };
+}, wt = (t, e, r) => {
+  const n = t / 255, o = e / 255, s = r / 255, a = Math.max(n, o, s), h = Math.min(n, o, s), p = a - h;
+  let i = 0;
+  const v = a, $ = a === 0 ? 0 : p / a;
+  return p !== 0 && (a === n ? i = (o - s) / p + (o < s ? 6 : 0) : a === o ? i = (s - n) / p + 2 : i = (n - o) / p + 4, i *= 60), { h: i, s: $, v };
+}, ne = (t) => {
+  const e = t.trim().replace(/^#/, "");
+  return e.length === 3 ? `#${e[0]}${e[0]}${e[1]}${e[1]}${e[2]}${e[2]}`.toLowerCase() : e.length === 6 ? `#${e}`.toLowerCase() : "#000000";
+}, be = (t, e, r) => {
+  const n = (o) => o.toString(16).padStart(2, "0");
+  return `#${n(t)}${n(e)}${n(r)}`.toLowerCase();
+}, dt = (t) => {
+  const e = typeof t == "number" ? t : Number(t);
+  return ((Number.isFinite(e) ? e : 0) % 360 + 360) % 360;
+}, Rt = (t) => Math.max(0, Math.min(255, Math.round(t))), it = (t, e, r, n) => {
+  const o = yt(n);
+  return `rgba(${Rt(t)}, ${Rt(e)}, ${Rt(r)}, ${o})`;
+}, J = (t) => {
+  const e = t.trim().match(/^rgba\(\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)\s*,\s*([0-9]*\.?[0-9]+)\s*\)$/i);
+  return e ? {
+    r: Rt(Number(e[1])),
+    g: Rt(Number(e[2])),
+    b: Rt(Number(e[3])),
+    a: yt(Number(e[4]))
+  } : null;
+}, Ft = (t) => {
+  const e = J(t);
+  return e ? wt(e.r, e.g, e.b).h : 0;
+}, xe = (t, e) => {
+  const n = J(t) ?? { r: 0, g: 0, b: 0, a: 1 }, o = wt(n.r, n.g, n.b), s = vt(e, o.s, o.v);
+  return it(s.r, s.g, s.b, n.a);
+}, Ce = (t, e, r) => {
+  const n = t / 255, o = e / 255, s = r / 255, a = Math.max(n, o, s), h = Math.min(n, o, s), p = a - h;
+  if (p === 0) return 0;
+  let i;
+  return a === n ? i = (o - s) / p + (o < s ? 6 : 0) : a === o ? i = (s - n) / p + 2 : i = (n - o) / p + 4, i * 60 % 360;
+}, Se = (t) => {
+  const e = J(t);
+  return e ? yt(e.a) : 1;
+}, ve = 24, St = ve / 2, qt = (t, e, r) => Math.max(e, Math.min(r, t)), we = (t, e) => {
+  const n = (qt(t - e.left, St, e.width - St) - St) / Math.max(1, e.width - 2 * St);
+  return qt(n, 0, 1);
+}, Re = (t, e) => St + qt(t, 0, 1) * Math.max(1, e - 2 * St), Ie = (t) => {
+  if (!t) return null;
+  let e = t.trim();
+  if (e.startsWith("#") && (e = e.slice(1)), e.length === 8 && (e = e.slice(0, 6)), e.length !== 6 || !/^[0-9a-fA-F]{6}$/.test(e)) return null;
+  const r = parseInt(e.slice(0, 2), 16), n = parseInt(e.slice(2, 4), 16), o = parseInt(e.slice(4, 6), 16);
+  return { r, g: n, b: o };
+}, It = (t) => {
+  const e = J(t);
+  return e ? be(e.r, e.g, e.b) : null;
+}, ye = (t) => {
+  if (!t) return null;
+  let e = t.trim();
+  if (e.startsWith("#") && (e = e.slice(1)), !(e.length === 6 || e.length === 8) || !/^[0-9a-fA-F]+$/.test(e)) return null;
+  const r = parseInt(e.slice(0, 2), 16), n = parseInt(e.slice(2, 4), 16), o = parseInt(e.slice(4, 6), 16), s = e.length === 8 ? Math.round(parseInt(e.slice(6, 8), 16) / 255 * 1e3) / 1e3 : 1;
+  return { r, g: n, b: o, a: s };
+}, je = (t, e, r) => t === e && e === r, Et = (t) => {
+  const e = ye(t);
+  return e ? it(e.r, e.g, e.b, e.a) : null;
+}, Pe = (t) => {
+  const e = J(t);
+  if (!e) return null;
+  const r = (o) => o.toString(16).padStart(2, "0"), n = Math.round(yt(e.a) * 255);
+  return `#${r(e.r)}${r(e.g)}${r(e.b)}${r(n)}`.toLowerCase();
+}, $t = (t, e) => {
+  if (!t || !e) return !1;
+  if (t === e) return !0;
+  const r = J(t), n = J(e);
+  return !r || !n ? !1 : r.r === n.r && r.g === n.g && r.b === n.b && Math.abs(r.a - n.a) < 1e-4;
+}, ct = (t, e, r) => Math.max(e, Math.min(r, t));
+function C(...t) {
+  return t.flat().filter(Boolean).join(" ");
+}
+const zt = 359.999, re = {
+  stop1: {
+    position: 15,
+    color: "rgba(255, 126, 95, 1)",
+    id: "stop1"
+  },
+  stop2: {
+    position: 85,
+    color: "rgba(254, 180, 123, 1)",
+    id: "stop2"
+  }
+}, Nt = /* @__PURE__ */ new Map(), oe = (t, e = 500, r = "default") => {
+  const n = Nt.get(r);
+  if (n && (clearTimeout(n), Nt.delete(r)), e <= 0) {
+    t();
+    return;
+  }
+  const o = setTimeout(() => {
+    t(), Nt.delete(r);
+  }, e);
+  Nt.set(r, o);
+}, Ae = (t) => {
+  const e = t ? Wt(t) : null, r = e?.stops ?? re, n = se({
+    gradient: t ?? "",
+    onGradientChange: () => {
+    },
+    updateDelay: 0,
+    initialStops: r
+  });
+  if (e) {
+    const o = Object.keys(e.stops)[0] ?? null;
+    n.setState((s) => {
+      const h = (o ? e.stops[o] : null)?.color ?? "rgba(0, 0, 0, 1)", p = Gt(h, Ft(h)), i = p === 0 && Ft(h) > 300 ? zt : p;
+      let v = s.angle;
+      if (e.format === "linear-gradient" && e.prefix) {
+        const $ = e.prefix.match(/^(\d+(?:\.\d+)?)deg$/i);
+        $ && (v = parseFloat($[1]));
+      }
+      return {
+        ...s,
+        format: e.format,
+        angle: v,
+        prefixes: {
+          ...s.prefixes,
+          [e.format]: e.prefix || s.prefixes[e.format]
+        },
+        stops: e.stops,
+        stopsOrder: Object.keys(e.stops),
+        activeStopId: o,
+        rgba: h,
+        hue: i
+      };
+    });
+  }
+  return n;
+}, lt = (t, e, r) => Math.max(e, Math.min(r, t)), Me = (t) => {
+  const e = [];
+  let r = "", n = 0;
+  for (let o = 0; o < t.length; o++) {
+    const s = t[o];
+    s === "(" && n++, s === ")" && (n = Math.max(0, n - 1)), s === "," && n === 0 ? (e.push(r.trim()), r = "") : r += s;
+  }
+  return r.trim() && e.push(r.trim()), e;
+}, ke = (t) => {
+  const e = t.trim().match(/^(#[0-9a-fA-F]{3,8})\s*(?:([0-9]*\.?[0-9]+)%\s*)?$/);
+  if (!e) return null;
+  const r = ne(e[1]), n = parseInt(r.slice(1, 3), 16), o = parseInt(r.slice(3, 5), 16), s = parseInt(r.slice(5, 7), 16), a = r.length === 9 ? lt(parseInt(r.slice(7, 9), 16) / 255, 0, 1) : 1, h = it(n, o, s, a), p = e[2] != null ? lt(Number(e[2]), 0, 100) : void 0;
+  return { color: h, position: p };
+}, $e = (t) => {
+  const e = t.trim().match(
+    /^rgb\(\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)\s*\)\s*(?:([0-9]*\.?[0-9]+)%\s*)?$/i
+  );
+  if (!e) return null;
+  const r = lt(Number(e[1]), 0, 255), n = lt(Number(e[2]), 0, 255), o = lt(Number(e[3]), 0, 255), s = e[4] != null ? lt(Number(e[4]), 0, 100) : void 0;
+  return { color: it(r, n, o, 1), position: s };
+}, Oe = (t) => {
+  const e = t.trim().match(
+    /^rgba\(\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)\s*,\s*([0-9]*\.?[0-9]+)\s*\)\s*(?:([0-9]*\.?[0-9]+)%\s*)?$/i
+  );
+  if (!e) return null;
+  const r = lt(Number(e[1]), 0, 255), n = lt(Number(e[2]), 0, 255), o = lt(Number(e[3]), 0, 255), s = lt(Number(e[4]), 0, 1), a = e[5] != null ? lt(Number(e[5]), 0, 100) : void 0;
+  return { color: it(r, n, o, s), position: a };
+}, Ee = (t) => {
+  const e = {};
+  return t.forEach((r, n) => {
+    const o = `stop${n + 1}`;
+    e[o] = { id: o, position: r.position, color: r.color };
+  }), e;
+}, Te = (t) => /^\s*linear-gradient\(/i.test(t) ? "linear-gradient" : /^\s*radial-gradient\(/i.test(t) ? "radial-gradient" : /^\s*conic-gradient\(/i.test(t) ? "conic-gradient" : null, Wt = (t) => {
+  if (!t) return null;
+  const e = Te(t);
+  if (!e) return null;
+  const r = t.match(/^[a-z-]+-gradient\((.*)\)\s*$/i);
+  if (!r) return null;
+  const n = r[1].trim(), o = Me(n), s = (y) => /#|rgba?\(/i.test(y), a = o.findIndex(s);
+  if (a === -1) return null;
+  const h = o.slice(0, a).join(", ").trim(), p = o.slice(a), i = [];
+  for (const y of p) {
+    const w = Oe(y);
+    if (w) {
+      i.push({ color: w.color, position: w.position ?? NaN });
+      continue;
+    }
+    const j = $e(y);
+    if (j) {
+      i.push({ color: j.color, position: j.position ?? NaN });
+      continue;
+    }
+    const d = ke(y);
+    d && i.push({ color: d.color, position: d.position ?? NaN });
+  }
+  if (i.length === 0) return null;
+  const v = i.some((y) => Number.isFinite(y.position)), $ = i.length;
+  return v ? i.forEach((y, w) => {
+    Number.isFinite(y.position) || (w === 0 ? y.position = 0 : w === $ - 1 ? y.position = 100 : y.position = w / ($ - 1) * 100);
+  }) : i.forEach((y, w) => y.position = $ === 1 ? 50 : w / ($ - 1) * 100), i.forEach((y) => y.position = lt(y.position, 0, 100)), i.sort((y, w) => y.position - w.position), { format: e, prefix: h, stops: Ee(i) };
+}, Ne = (t, e) => {
+  const r = t.slice().sort((o, s) => o.position - s.position).map((o) => `${o.color} ${lt(o.position, 0, 100)}%`).join(", ");
+  if (e.format === "linear-gradient")
+    return `linear-gradient(${Number.isFinite(e.angle) ? e.angle : 90}deg, ${r})`;
+  if (e.format === "radial-gradient") {
+    const o = (e.prefix ?? "").trim();
+    return o ? `radial-gradient(${o}, ${r})` : `radial-gradient(${r})`;
+  }
+  const n = (e.prefix ?? "").trim();
+  return n ? `conic-gradient(${n}, ${r})` : `conic-gradient(${r})`;
+}, Gt = (t, e) => {
+  const r = J(t);
+  return !r || r.r === r.g && r.g === r.b ? e : wt(r.r, r.g, r.b).h;
+}, pt = (t, e, r) => Math.max(e, Math.min(r, t)), Ot = (t) => Object.values(t ?? {}).slice().sort((r, n) => r.position - n.position).map((r) => r.id), De = (t) => /^#([0-9a-f]{3}|[0-9a-f]{6}|[0-9a-f]{8})$/i.test(t.trim()), _e = (t) => /^rgba\(/i.test(t.trim()), bt = (t) => {
+  const e = (t ?? "").trim();
+  return _e(e) ? e : De(e) ? Et(e) ?? "rgba(0, 0, 0, 1)" : "rgba(0, 0, 0, 1)";
+}, Le = (t) => {
+  let e = 0;
+  for (const r of t) {
+    const n = r.match(/^stop(\d+)$/i);
+    n && (e = Math.max(e, Number(n[1])));
+  }
+  return `stop${e + 1}`;
+}, Vt = (t) => Object.values(t).slice().sort((e, r) => e.position - r.position).map((e) => e.id), Mn = (t) => {
+  const e = t.match(/linear-gradient\(\s*(-?\d+(?:\.\d+)?)deg\s*,/i);
+  if (!e) return null;
+  const r = Number(e[1]);
+  return Number.isFinite(r) ? r : null;
+}, He = (t) => {
+  const e = (t.stopsOrder.length ? t.stopsOrder : Object.keys(t.stops)).map((r) => t.stops[r]).filter(Boolean).sort((r, n) => r.position - n.position).map((r) => `${r.color} ${r.position}%`).join(", ");
+  if (!e) return "";
+  switch (t.format) {
+    case "linear-gradient":
+      return `linear-gradient(${t.angle}deg, ${e})`;
+    case "radial-gradient":
+      return `radial-gradient(${e})`;
+    case "conic-gradient":
+      return `conic-gradient(from ${t.angle}deg, ${e})`;
+    default:
+      return "";
+  }
+}, xt = (t, e, r) => {
+  const n = F(null), o = F(!1), s = () => {
+    const a = e(t.getState());
+    if (!o.current)
+      return o.current = !0, n.current = a, a;
+    const h = n.current;
+    return Object.is(h, a) ? h : (n.current = a, a);
+  };
+  return te(t.subscribe, s, s);
+}, kn = (t, e) => {
+  const n = F(Ae(t)).current, [o, s] = st(t ?? ""), a = xt(n, (c) => c.rgba), h = xt(n, (c) => c.angle), p = xt(n, (c) => c.format), i = xt(n, (c) => c.stops), v = xt(n, (c) => c.stopsOrder), $ = xt(n, (c) => c.activeStopId), w = !!xt(n, (c) => c.draggingStopId), [j, d] = st([]), [O, D] = st([]);
+  W(() => {
+    n.setOnGradientChange && n.setOnGradientChange((c) => {
+      s(c), e?.(c);
+    });
+  }, [n, e]);
+  const k = F(!1);
+  W(() => {
+    k.current || t && (k.current = !0, s(t), n.setGradient?.(t));
+  }, [t, n]);
+  const E = nt(() => $ ? i?.[$]?.position ?? 0 : 0, [$, i]), f = nt(() => J(a), [a])?.a ?? 1, R = nt(() => {
+    const c = J(a);
+    return c ? ((c.a < 1 ? Pe(a) : It(a)) ?? "#000000").replace("#", "").toUpperCase() : "000000";
+  }, [a]), [H, m] = st(R), b = F(R);
+  W(() => {
+    R !== b.current && (m(R), b.current = R);
+  }, [R]);
+  const M = a, I = nt(() => (v?.length ? v : Object.keys(i ?? {})).map((x) => i?.[x]).filter(Boolean).map((x) => {
+    const T = bt(String(x.color ?? "rgba(0, 0, 0, 1)")), _ = J(T) ?? { r: 0, g: 0, b: 0, a: 1 }, z = (It(T) ?? "#000000").replace("#", "").toUpperCase();
+    return {
+      id: x.id,
+      position: Number(x.position ?? 0),
+      rgbaString: T,
+      rgba: { r: _.r, g: _.g, b: _.b, a: _.a },
+      hex: z,
+      opacity: _.a
+    };
+  }), [i, v]), Z = et(
+    (c) => {
+      const x = n.getState().stops[c];
+      x && (n.setActiveStopId(c), n.setActiveStopColor(x.color ?? "rgba(0, 0, 0, 1)"));
+    },
+    [n]
+  ), P = et(
+    (c, x) => {
+      const T = bt(x);
+      if (n.getState().activeStopId === c) {
+        n.setActiveStopColor(T);
+        return;
+      }
+      n.setStops((z) => {
+        const rt = z[c];
+        return rt ? { ...z, [c]: { ...rt, color: T } } : z;
+      });
+    },
+    [n]
+  ), L = et(
+    (c, x) => {
+      const T = Math.max(0, Math.min(100, x));
+      n.setStops((_) => {
+        const z = _[c];
+        return z ? { ..._, [c]: { ...z, position: T } } : _;
+      }), n.setStopsOrder(Vt(n.getState().stops));
+    },
+    [n]
+  ), G = et(
+    (c, x) => {
+      const T = Math.max(0, Math.min(100, c)), _ = bt(x), z = Le(Object.keys(n.getState().stops ?? {}));
+      n.setStops((rt) => ({
+        ...rt,
+        [z]: { id: z, position: T, color: _ }
+      })), n.setStopsOrder(Vt(n.getState().stops)), n.setActiveStopId(z), n.setActiveStopColor(_);
+    },
+    [n]
+  ), B = et(
+    (c) => {
+      const x = n.getState();
+      if (Object.keys(x.stops ?? {}).length <= 2 || !x.stops[c]) return;
+      n.setStops((rt) => {
+        const jt = { ...rt };
+        return delete jt[c], jt;
+      });
+      const _ = n.getState().stops, z = Vt(_);
+      if (n.setStopsOrder(z), n.getState().activeStopId === c) {
+        const rt = z[0] ?? null;
+        if (n.setActiveStopId(rt), rt) {
+          const jt = _[rt];
+          jt && n.setActiveStopColor(jt.color ?? "rgba(0, 0, 0, 1)");
+        }
+      }
+    },
+    [n]
+  ), q = et(
+    (c) => {
+      const x = c.replace(/\s+/g, "").replace(/^#/, "").slice(0, 8);
+      if (m(x), !/^[0-9a-fA-F]*$/.test(x) || !(x.length === 3 || x.length === 4 || x.length === 6 || x.length === 8)) return;
+      const _ = x.length === 3 || x.length === 4 ? `#${x.split("").map((rt) => rt + rt).join("")}`.toLowerCase() : `#${x}`.toLowerCase(), z = Et(_);
+      z && n.setActiveStopColor(z);
+    },
+    [n]
+  ), Y = et(
+    (c) => {
+      const x = Math.max(0, Math.min(1, c)), T = J(n.getState().rgba);
+      T && n.setActiveStopColor(it(T.r, T.g, T.b, x));
+    },
+    [n]
+  ), Q = et(
+    (c) => {
+      const x = J(n.getState().rgba);
+      x && n.setActiveStopColor(it(c, x.g, x.b, x.a));
+    },
+    [n]
+  ), ot = et(
+    (c) => {
+      const x = J(n.getState().rgba);
+      x && n.setActiveStopColor(it(x.r, c, x.b, x.a));
+    },
+    [n]
+  ), l = et(
+    (c) => {
+      const x = J(n.getState().rgba);
+      x && n.setActiveStopColor(it(x.r, x.g, c, x.a));
+    },
+    [n]
+  ), V = et((c) => Y(c), [Y]), K = et((c) => n.setAngle(c), [n]), tt = et((c) => n.setFormat(c), [n]), ht = et((c) => {
+    const x = bt(c);
+    d((T) => T.includes(x) ? T : [x, ...T]);
+  }, []), g = et((c) => {
+    const x = bt(c);
+    d((T) => T.filter((_) => _ !== x));
+  }, []), S = et((c) => {
+    const x = bt(c);
+    D((T) => [x, ...T.filter((z) => z !== x)].slice(0, 24));
+  }, []), N = et((c) => {
+    const x = bt(c);
+    D((T) => T.filter((_) => _ !== x));
+  }, []), U = et(
+    (c, x, T) => {
+      const _ = (T ?? "").trim();
+      if (c === x) return _;
+      if (c === "hex" && x === "rgba") {
+        const z = _.startsWith("#") ? _ : `#${_}`, rt = ne(z);
+        return Et(rt) ?? "rgba(0, 0, 0, 1)";
+      }
+      return c === "rgba" && x === "hex" ? (It(_) ?? "#000000").replace("#", "").toUpperCase() : _;
+    },
+    []
+  );
+  return {
+    store: n,
+    stops: I,
+    activeStopId: $,
+    activeStopPosition: E,
+    angle: h,
+    format: p,
+    isDragging: w,
+    recentlyUsedColors: O,
+    libraryColors: j,
+    hex: H,
+    rgba: M,
+    rgbaString: a,
+    gradientString: o,
+    opacity: f,
+    setR: Q,
+    setG: ot,
+    setB: l,
+    setA: V,
+    setHex: q,
+    setAngle: K,
+    setFormat: tt,
+    setOpacity: Y,
+    setStopColor: P,
+    setActiveStop: Z,
+    setStopPosition: L,
+    setLibraryColors: d,
+    setRecentlyUsedColors: D,
+    addStop: G,
+    addColorToLibrary: ht,
+    addColorToRecentlyUsed: S,
+    removeStop: B,
+    removeColorFromLibrary: g,
+    removeColorFromRecentlyUsed: N,
+    convertColor: U
+  };
+}, Fe = {
+  "linear-gradient": "",
+  "radial-gradient": "circle at center",
+  "conic-gradient": "from 90deg at 50% 50%"
+}, Ge = (t) => Math.max(0, Math.min(1, t)), Ct = (t) => {
+  const e = J(t);
+  if (!e) return t.trim();
+  const r = Math.round(Ge(e.a) * 1e3) / 1e3;
+  return it(e.r, e.g, e.b, r);
+}, Ve = (t) => ({
+  rgba: "rgba(0, 0, 0, 1)",
+  hue: 0,
+  format: "linear-gradient",
+  prefixes: Fe,
+  angle: 90,
+  gradient: t.gradient,
+  updateDelay: t.updateDelay,
+  onGradientChange: t.onGradientChange,
+  activeStopId: Object.keys(t.initialStops)[0] ?? null,
+  stops: t.initialStops,
+  stopsOrder: Object.keys(t.initialStops),
+  draggingStopId: null,
+  draftPosition: null
+}), se = (t) => {
+  let e = Ve(t);
+  const r = /* @__PURE__ */ new Set(), n = () => {
+    for (const m of r) m();
+  }, o = (m) => {
+    const b = m(e);
+    b !== e && (e = b, n());
+  }, s = () => e, a = (m) => (r.add(m), () => {
+    r.delete(m);
+  }), h = (m) => {
+    const b = Ct(m);
+    o((M) => M.rgba === b ? M : { ...M, rgba: b });
+  }, p = (m) => {
+    const b = dt(m);
+    o((M) => M.hue === b ? M : { ...M, hue: b });
+  }, i = (m) => {
+    let b = !1;
+    o((M) => M.format === m ? M : (b = !0, { ...M, format: m })), b && D();
+  }, v = (m) => {
+    o((b) => b.prefixes === m ? b : { ...b, prefixes: m });
+  }, $ = (m) => {
+    let b = !1;
+    o((M) => M.angle === m ? M : (b = !0, { ...M, angle: m })), b && D();
+  }, y = (m) => {
+    o((b) => b.gradient === m ? b : { ...b, gradient: m });
+  }, w = (m) => {
+    o(
+      (b) => b.updateDelay === m ? b : { ...b, updateDelay: m }
+    );
+  }, j = (m) => {
+    o(
+      (b) => b.onGradientChange === m ? b : { ...b, onGradientChange: m }
+    );
+  }, d = (m) => {
+    o((b) => b.activeStopId === m ? b : { ...b, activeStopId: m });
+  }, O = (m) => {
+    let b = !1;
+    o((M) => {
+      const I = m(M.stops);
+      return I === M.stops ? M : (b = !0, { ...M, stops: I });
+    }), b && D();
+  }, D = () => {
+    const m = He(e);
+    e.gradient !== m && (e = { ...e, gradient: m }, n(), e.onGradientChange(m));
+  };
+  return {
+    getState: s,
+    setState: o,
+    subscribe: a,
+    setRgba: h,
+    setHue: p,
+    setFormat: i,
+    setPrefixes: v,
+    setAngle: $,
+    setGradient: y,
+    setUpdateDelay: w,
+    setOnGradientChange: j,
+    setActiveStopId: d,
+    setStops: O,
+    setStopsOrder: (m) => {
+      let b = !1;
+      o((M) => M.stopsOrder === m ? M : (b = !0, { ...M, stopsOrder: m })), b && D();
+    },
+    setDraggingStopId: (m) => {
+      o(
+        (b) => b.draggingStopId === m ? b : { ...b, draggingStopId: m }
+      );
+    },
+    setDraftPosition: (m) => {
+      o(
+        (b) => b.draftPosition === m ? b : { ...b, draftPosition: m }
+      );
+    },
+    recomputeGradient: D,
+    setActiveStopColor: (m) => {
+      let b = !1;
+      const M = Ct(m);
+      o((I) => {
+        const Z = Gt(M, I.hue), P = I.activeStopId;
+        if (!P || !I.stops[P])
+          return I.rgba === M && I.hue === Z ? I : (b = !0, { ...I, rgba: M, hue: Z });
+        const L = I.stops[P], B = Ct(L.color) === M, q = I.rgba === M, Y = I.hue === Z;
+        return B && q && Y ? I : (b = !0, {
+          ...I,
+          rgba: q ? I.rgba : M,
+          hue: Y ? I.hue : Z,
+          stops: B ? I.stops : { ...I.stops, [P]: { ...L, color: M } }
+        });
+      }), b && D();
+    },
+    setHueForActiveStop: (m) => {
+      const b = dt(m);
+      let M = !1;
+      o((I) => {
+        const Z = Ct(xe(I.rgba, b)), P = I.activeStopId;
+        if (!P || !I.stops[P])
+          return I.hue === b && I.rgba === Z ? I : (M = !0, { ...I, hue: b, rgba: Z });
+        const L = I.stops[P], B = Ct(L.color) === Z, q = I.rgba === Z, Y = I.hue === b;
+        if (B && q && Y) return I;
+        M = !0;
+        const Q = B ? I.stops : { ...I.stops, [P]: { ...L, color: Z } };
+        return {
+          ...I,
+          hue: Y ? I.hue : b,
+          rgba: q ? I.rgba : Z,
+          stops: Q
+        };
+      }), M && D();
+    },
+    setSvForActiveStop: (m, b) => {
+      let M = !1;
+      o((I) => {
+        const Z = J(I.rgba) ?? { a: 1 }, P = vt(I.hue, m, b), L = Ct(it(P.r, P.g, P.b, Z.a)), G = I.activeStopId;
+        if (!G || !I.stops[G])
+          return I.rgba === L ? I : (M = !0, { ...I, rgba: L });
+        const B = I.stops[G], Y = Ct(B.color) === L, Q = I.rgba === L;
+        return Y && Q ? I : (M = !0, {
+          ...I,
+          rgba: Q ? I.rgba : L,
+          stops: Y ? I.stops : { ...I.stops, [G]: { ...B, color: L } }
+        });
+      }), M && D();
+    }
+  };
+}, ie = de(null), Ue = (t) => /* @__PURE__ */ u.jsx(ie.Provider, { value: t.store, children: t.children }), ut = () => {
+  const t = pe(ie);
+  if (!t)
+    throw new Error("[GradientPicker] Missing GradientPickerStoreProvider");
+  return t;
+}, X = (t, e) => {
+  const r = ut(), n = F(null), o = F(!1), s = () => {
+    const a = t(r.getState());
+    if (!o.current)
+      return o.current = !0, n.current = a, a;
+    const h = n.current;
+    return (e ? e(h, a) : Object.is(h, a)) ? h : (n.current = a, a);
+  };
+  return te(r.subscribe, s, s);
+}, Be = ({ classNames: t }) => {
+  const e = ut(), r = X((P) => P.rgba), n = X((P) => P.hue), o = F(null), s = F(null), a = F(null), h = F(r), p = F(n), i = F(null), v = F(null), $ = X((P) => P.activeStopId);
+  h.current = r, p.current = n;
+  const [y, w] = st({ w: 0, h: 0 }), [j, d] = st(null), [O, D] = st(() => {
+    const P = J(r) ?? { r: 0, g: 0, b: 0 }, L = wt(P.r, P.g, P.b);
+    return {
+      s: ct(L.s, 0, 1),
+      v: ct(L.v, 0, 1)
+    };
+  });
+  W(() => {
+    v.current !== $ && (v.current = $, i.current = null);
+  }, [$]), W(() => {
+    if (j) return;
+    const P = J(r) == null ? r.trim() : it(
+      (J(r) ?? { r: 0 }).r,
+      (J(r) ?? { g: 0 }).g,
+      (J(r) ?? { b: 0 }).b,
+      Math.round(
+        ((J(r) ?? { a: 1 }).a ?? 1) * 1e3
+      ) / 1e3
+    );
+    if (i.current === P)
+      return;
+    const L = J(r) ?? { r: 0, g: 0, b: 0 }, G = wt(L.r, L.g, L.b);
+    D((B) => {
+      if (je(L.r, L.g, L.b)) {
+        const Y = { s: B.s, v: ct(G.v, 0, 1) };
+        return B.s === Y.s && B.v === Y.v ? B : Y;
+      }
+      const q = {
+        s: ct(G.s, 0, 1),
+        v: ct(G.v, 0, 1)
+      };
+      return B.s === q.s && B.v === q.v ? B : q;
+    });
+  }, [r, j]), W(() => {
+    const P = o.current;
+    if (!P) return;
+    const L = new ResizeObserver((G) => {
+      const B = G[0]?.contentRect;
+      if (!B) return;
+      const q = Math.floor(B.width), Y = Math.floor(B.height);
+      q <= 0 || Y <= 0 || w((Q) => Q.w === q && Q.h === Y ? Q : { w: q, h: Y });
+    });
+    return L.observe(P), () => L.disconnect();
+  }, []), W(() => {
+    const { w: P, h: L } = y;
+    if (!P || !L) return;
+    const G = s.current;
+    if (!G) return;
+    const B = window.devicePixelRatio || 1;
+    G.width = Math.round(P * B), G.height = Math.round(L * B), G.style.width = `${P}px`, G.style.height = `${L}px`;
+    const q = G.getContext("2d");
+    if (!q) return;
+    q.setTransform(B, 0, 0, B, 0, 0), q.clearRect(0, 0, P, L);
+    const Y = dt(n), Q = vt(Y, 1, 1);
+    q.fillStyle = `rgb(${Q.r}, ${Q.g}, ${Q.b})`, q.fillRect(0, 0, P, L);
+    const ot = q.createLinearGradient(0, 0, P, 0);
+    ot.addColorStop(0, "rgba(255,255,255,1)"), ot.addColorStop(1, "rgba(255,255,255,0)"), q.fillStyle = ot, q.fillRect(0, 0, P, L);
+    const l = q.createLinearGradient(0, 0, 0, L);
+    l.addColorStop(0, "rgba(0,0,0,0)"), l.addColorStop(1, "rgba(0,0,0,1)"), q.fillStyle = l, q.fillRect(0, 0, P, L);
+  }, [y.w, y.h, n]);
+  const { thumbLeft: k, thumbTop: E, thumbColor: A } = nt(() => {
+    const P = J(r) ?? { r: 0, g: 0, b: 0, a: 1 }, L = wt(P.r, P.g, P.b), G = L.s === 0 ? dt(n) : dt(L.h), B = ct(j ? j.s : O.s, 0, 1), q = ct(j ? j.v : O.v, 0, 1), Y = y.w || 1, Q = y.h || 1, ot = B * Y, l = (1 - q) * Q, V = vt(G, B, q), K = it(V.r, V.g, V.b, P.a);
+    return { thumbLeft: ot, thumbTop: l, thumbColor: K };
+  }, [r, n, y.w, y.h, j, O]), f = F(null), R = F(null);
+  W(() => () => {
+    f.current != null && cancelAnimationFrame(f.current);
+  }, []);
+  const H = et(
+    (P, L) => {
+      const G = J(h.current) ?? { a: 1 }, B = vt(dt(p.current), P, L), q = it(B.r, B.g, B.b, G.a);
+      i.current = q, e.setSvForActiveStop(P, L);
+    },
+    [e]
+  ), m = et(
+    (P, L) => {
+      R.current = { s: P, v: L }, f.current == null && (f.current = requestAnimationFrame(() => {
+        f.current = null;
+        const G = R.current;
+        R.current = null, G && H(G.s, G.v);
+      }));
+    },
+    [H]
+  ), b = (P, L) => {
+    const G = o.current?.getBoundingClientRect();
+    if (!G) return;
+    const B = ct(P - G.left, 0, G.width), q = ct(L - G.top, 0, G.height), Y = ct(B / Math.max(1, G.width), 0, 1), Q = ct(1 - q / Math.max(1, G.height), 0, 1), ot = { s: Y, v: Q };
+    d(ot), D(ot), m(Y, Q);
+  }, M = (P) => {
+    P.currentTarget.setPointerCapture(P.pointerId), b(P.clientX, P.clientY);
+  }, I = (P) => {
+    (P.buttons & 1) === 1 && b(P.clientX, P.clientY);
+  }, Z = () => {
+    d(null);
+  };
+  return /* @__PURE__ */ u.jsxs(
+    "section",
+    {
+      id: "color-square-wrapper",
+      ref: (P) => {
+        o.current = P;
+      },
+      className: C(t?.wrapper, "gp-color-square-wrapper"),
+      onPointerDown: M,
+      onPointerMove: I,
+      onPointerUp: Z,
+      onPointerCancel: Z,
+      onLostPointerCapture: Z,
+      role: "application",
+      tabIndex: 0,
+      "aria-label": "Color picker",
+      "aria-disabled": !$,
+      "data-scope": "gradient-picker",
+      "data-slot": "root",
+      "data-dragging": j ? "true" : void 0,
+      "data-active": $ ? "true" : void 0,
+      "data-hue": dt(n),
+      "data-sat": O.s,
+      "data-val": O.v,
+      children: [
+        /* @__PURE__ */ u.jsx(
+          "canvas",
+          {
+            id: "color-square-canvas",
+            ref: (P) => {
+              s.current = P;
+            },
+            className: C(t?.canvas, "gp-color-square-canvas"),
+            "aria-hidden": "true",
+            "data-slot": "canvas"
+          }
+        ),
+        /* @__PURE__ */ u.jsx(
+          "div",
+          {
+            id: "color-square-thumb",
+            ref: (P) => {
+              a.current = P;
+            },
+            className: C(t?.thumb, "gp-color-square-thumb"),
+            style: {
+              left: `${k}px`,
+              top: `${E}px`,
+              backgroundColor: A
+            },
+            "aria-hidden": "true",
+            "data-slot": "thumb",
+            "data-dragging": j ? "true" : void 0
+          }
+        )
+      ]
+    }
+  );
+}, qe = ({ classNames: t }) => {
+  const e = ut(), r = X((f) => f.rgba), n = X((f) => f.hue), o = F(null), s = F(null), a = F(null), [h, p] = st({ w: 0, h: 0 }), [i, v] = st(12);
+  W(() => {
+    const f = s.current;
+    if (!f) return;
+    const R = new ResizeObserver((H) => {
+      const m = H[0]?.contentRect;
+      if (!m) return;
+      const b = Math.floor(m.width), M = Math.floor(m.height);
+      if (b <= 0 || M <= 0) return;
+      p(
+        (Z) => Z.w === b && Z.h === M ? Z : { w: b, h: M }
+      );
+      const I = a.current?.getBoundingClientRect();
+      I?.width && v(Math.max(0, I.width / 2));
+    });
+    return R.observe(f), () => R.disconnect();
+  }, []), W(() => {
+    const { w: f, h: R } = h;
+    if (!f || !R) return;
+    const H = o.current;
+    if (!H) return;
+    const m = window.devicePixelRatio || 1;
+    H.width = Math.round(f * m), H.height = Math.round(R * m), H.style.width = `${f}px`, H.style.height = `${R}px`;
+    const b = H.getContext("2d");
+    if (!b) return;
+    b.setTransform(m, 0, 0, m, 0, 0), b.clearRect(0, 0, f, R);
+    const M = b.createLinearGradient(0, 0, f, 0);
+    M.addColorStop(0, "rgb(255, 0, 0)"), M.addColorStop(1 / 6, "rgb(255, 255, 0)"), M.addColorStop(2 / 6, "rgb(0, 255, 0)"), M.addColorStop(3 / 6, "rgb(0, 255, 255)"), M.addColorStop(4 / 6, "rgb(0, 0, 255)"), M.addColorStop(5 / 6, "rgb(255, 0, 255)"), M.addColorStop(1, "rgb(255, 0, 0)"), b.fillStyle = M, b.fillRect(0, 0, f, R);
+  }, [h.w, h.h]);
+  const $ = nt(() => {
+    const f = dt(n) / 360, R = h.w || 1;
+    return i + ct(f, 0, 1) * Math.max(1, R - 2 * i);
+  }, [n, h.w, i]), y = nt(() => {
+    const f = J(r)?.a ?? 1, R = vt(n, 1, 1);
+    return it(R.r, R.g, R.b, f);
+  }, [n, r]), w = nt(
+    () => ({ left: $, backgroundColor: y }),
+    [$, y]
+  ), j = F(null), d = F(null), O = (f) => {
+    const R = dt(f);
+    e.setHueForActiveStop(R);
+  }, D = (f) => {
+    d.current = f, j.current == null && (j.current = requestAnimationFrame(() => {
+      j.current = null;
+      const R = d.current;
+      d.current = null, R != null && O(R);
+    }));
+  };
+  W(() => () => {
+    j.current != null && cancelAnimationFrame(j.current);
+  }, []);
+  const k = (f) => {
+    const R = s.current?.getBoundingClientRect();
+    if (!R) return;
+    const m = (ct(
+      f - R.left,
+      i,
+      R.width - i
+    ) - i) / Math.max(1, R.width - 2 * i), b = Math.min(m * 360, zt);
+    D(b);
+  }, E = (f) => {
+    f.currentTarget.setPointerCapture(f.pointerId), k(f.clientX);
+  }, A = (f) => {
+    (f.buttons & 1) === 1 && k(f.clientX);
+  };
+  return /* @__PURE__ */ u.jsxs(
+    "section",
+    {
+      className: C(t?.wrapper, "gp-hue-slider-wrapper"),
+      ref: s,
+      onPointerDown: E,
+      onPointerMove: A,
+      role: "slider",
+      tabIndex: 0,
+      "aria-label": "Hue",
+      "aria-valuemin": 0,
+      "aria-valuemax": 360,
+      "aria-valuenow": dt(n),
+      "data-scope": "gradient-picker",
+      "data-slot": "hue-slider",
+      "data-value": dt(n),
+      children: [
+        /* @__PURE__ */ u.jsx(
+          "canvas",
+          {
+            ref: o,
+            className: C(t?.canvas, "gp-hue-slider-canvas"),
+            "aria-hidden": "true",
+            "data-slot": "canvas"
+          }
+        ),
+        /* @__PURE__ */ u.jsx(
+          "div",
+          {
+            ref: a,
+            className: C(t?.thumb, "gp-hue-slider-thumb"),
+            style: w,
+            "aria-hidden": "true",
+            "data-slot": "thumb",
+            "data-value": dt(n)
+          }
+        )
+      ]
+    }
+  );
+}, ze = (t) => /* @__PURE__ */ u.jsx(
+  "svg",
+  {
+    viewBox: "0 0 16 16",
+    fill: "currentColor",
+    xmlns: "http://www.w3.org/2000/svg",
+    ...t,
+    children: /* @__PURE__ */ u.jsx(
+      "path",
+      {
+        fillRule: "evenodd",
+        clipRule: "evenodd",
+        d: "M7 0C6.81434 9.91486e-05 6.63237 0.0518831 6.47447 0.149552C6.31658 0.247222 6.18899 0.386919 6.106 0.553L5.382 2H2C1.73478 2 1.48043 2.10536 1.29289 2.29289C1.10536 2.48043 1 2.73478 1 3C1 3.26522 1.10536 3.51957 1.29289 3.70711C1.48043 3.89464 1.73478 4 2 4V14C2 14.5304 2.21071 15.0391 2.58579 15.4142C2.96086 15.7893 3.46957 16 4 16H12C12.5304 16 13.0391 15.7893 13.4142 15.4142C13.7893 15.0391 14 14.5304 14 14V4C14.2652 4 14.5196 3.89464 14.7071 3.70711C14.8946 3.51957 15 3.26522 15 3C15 2.73478 14.8946 2.48043 14.7071 2.29289C14.5196 2.10536 14.2652 2 14 2H10.618L9.894 0.553C9.81101 0.386919 9.68342 0.247222 9.52553 0.149552C9.36763 0.0518831 9.18566 9.91486e-05 9 0H7ZM5 6C5 5.73478 5.10536 5.48043 5.29289 5.29289C5.48043 5.10536 5.73478 5 6 5C6.26522 5 6.51957 5.10536 6.70711 5.29289C6.89464 5.48043 7 5.73478 7 6V12C7 12.2652 6.89464 12.5196 6.70711 12.7071C6.51957 12.8946 6.26522 13 6 13C5.73478 13 5.48043 12.8946 5.29289 12.7071C5.10536 12.5196 5 12.2652 5 12V6ZM10 5C9.73478 5 9.48043 5.10536 9.29289 5.29289C9.10536 5.48043 9 5.73478 9 6V12C9 12.2652 9.10536 12.5196 9.29289 12.7071C9.48043 12.8946 9.73478 13 10 13C10.2652 13 10.5196 12.8946 10.7071 12.7071C10.8946 12.5196 11 12.2652 11 12V6C11 5.73478 10.8946 5.48043 10.7071 5.29289C10.5196 5.10536 10.2652 5 10 5Z",
+        fill: "currentColor"
+      }
+    )
+  }
+), We = (t) => /* @__PURE__ */ u.jsx("svg", { viewBox: "0 0 16 17", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...t, children: /* @__PURE__ */ u.jsx(
+  "path",
+  {
+    d: "M0.999999 13.6299L0.999999 13.2351L7.32333 1.40025C7.39117 1.27874 7.48954 1.17768 7.60842 1.10736C7.72729 1.03705 7.86242 1 8 1C8.13758 1 8.27271 1.03705 8.39158 1.10736C8.51046 1.17768 8.60883 1.27874 8.67667 1.40025L15 13.2343L15 13.6291C15 14.9389 11.8656 16 8 16C4.13444 16 0.999999 14.9389 0.999999 13.6299Z",
+    stroke: "currentColor",
+    strokeWidth: "2",
+    strokeLinecap: "round",
+    strokeLinejoin: "round"
+  }
+) }), Xe = (t) => /* @__PURE__ */ u.jsx(
+  "svg",
+  {
+    viewBox: "0 0 14 4",
+    fill: "currentColor",
+    xmlns: "http://www.w3.org/2000/svg",
+    ...t,
+    children: /* @__PURE__ */ u.jsx(
+      "path",
+      {
+        d: "M12.25 0C11.529 0 10.92 0.434 10.647 1.05H8.603C8.33 0.434 7.721 0 7 0C6.279 0 5.67 0.434 5.397 1.05H3.353C3.08 0.434 2.471 0 1.75 0C1.28587 0 0.840752 0.184374 0.512563 0.512563C0.184374 0.840752 0 1.28587 0 1.75C0 2.21413 0.184374 2.65925 0.512563 2.98744C0.840752 3.31563 1.28587 3.5 1.75 3.5C2.471 3.5 3.08 3.066 3.353 2.45H5.397C5.67 3.066 6.279 3.5 7 3.5C7.721 3.5 8.33 3.066 8.603 2.45H10.647C10.92 3.066 11.529 3.5 12.25 3.5C12.7141 3.5 13.1592 3.31563 13.4874 2.98744C13.8156 2.65925 14 2.21413 14 1.75C14 1.28587 13.8156 0.840752 13.4874 0.512563C13.1592 0.184374 12.7141 0 12.25 0Z",
+        fill: "currentColor"
+      }
+    )
+  }
+), Ye = (t) => /* @__PURE__ */ u.jsx(
+  "svg",
+  {
+    viewBox: "0 0 14 14",
+    fill: "currentColor",
+    xmlns: "http://www.w3.org/2000/svg",
+    ...t,
+    children: /* @__PURE__ */ u.jsx(
+      "path",
+      {
+        fillRule: "evenodd",
+        clipRule: "evenodd",
+        d: "M1.50244 7C1.50209 6.04541 1.75028 5.10718 2.2226 4.27763C2.69491 3.44808 3.37507 2.75579 4.19615 2.26889C5.01723 1.782 5.95093 1.51727 6.90538 1.50075C7.85982 1.48424 8.80212 1.71651 9.63955 2.17471C9.7261 2.22582 9.82203 2.25901 9.92165 2.2723C10.0213 2.28558 10.1226 2.27871 10.2195 2.25207C10.3164 2.22544 10.407 2.17959 10.4858 2.11725C10.5646 2.05492 10.6301 1.97736 10.6784 1.88921C10.7267 1.80105 10.7567 1.70409 10.7668 1.60408C10.7768 1.50408 10.7667 1.40308 10.7369 1.30708C10.7071 1.21108 10.6583 1.12205 10.5935 1.04528C10.5286 0.968506 10.449 0.905559 10.3593 0.86018C9.03193 0.133212 7.50466 -0.143828 6.00652 0.070608C4.50839 0.285044 3.12016 0.979398 2.05002 2.04953C0.979886 3.11967 0.285532 4.5079 0.0710963 6.00604C-0.14334 7.50417 0.1337 9.03144 0.860668 10.3588C0.959634 10.5264 1.11989 10.6489 1.30755 10.7005C1.49522 10.7521 1.69559 10.7287 1.8663 10.6352C2.03701 10.5417 2.16468 10.3855 2.22233 10.1996C2.27997 10.0137 2.26307 9.81272 2.1752 9.63906C1.73317 8.82972 1.50182 7.92219 1.50244 7ZM13.1403 3.64119C13.0949 3.55151 13.032 3.47187 12.9552 3.40701C12.8784 3.34214 12.7894 3.29338 12.6934 3.26361C12.5974 3.23384 12.4964 3.22367 12.3964 3.23372C12.2964 3.24377 12.1994 3.27382 12.1113 3.32209C12.0231 3.37035 11.9456 3.43586 11.8832 3.5147C11.8209 3.59354 11.7751 3.6841 11.7484 3.78102C11.7218 3.87793 11.7149 3.97921 11.7282 4.07883C11.7415 4.17846 11.7747 4.27439 11.8258 4.36094C12.3971 5.40388 12.6148 6.60394 12.4464 7.78111C12.2779 8.95828 11.7323 10.0491 10.8915 10.89C10.0506 11.7308 8.95977 12.2764 7.7826 12.4449C6.60543 12.6133 5.40537 12.3956 4.36242 11.8243C4.18797 11.7286 3.98265 11.7061 3.79162 11.7618C3.60059 11.8174 3.4395 11.9467 3.34379 12.1212C3.24808 12.2956 3.22559 12.501 3.28127 12.692C3.33695 12.883 3.46623 13.0441 3.64068 13.1398C4.96805 13.8668 6.49532 14.1438 7.99345 13.9294C9.49159 13.715 10.8798 13.0206 11.95 11.9505C13.0201 10.8803 13.7144 9.4921 13.9289 7.99397C14.1433 6.49583 13.8663 4.96856 13.1393 3.64119M8.49996 7C8.49996 7.39768 8.34198 7.77908 8.06077 8.06028C7.77957 8.34149 7.39817 8.49947 7.00049 8.49947C6.6028 8.49947 6.22141 8.34149 5.9402 8.06028C5.659 7.77908 5.50102 7.39768 5.50102 7C5.50102 6.60232 5.659 6.22092 5.9402 5.93972C6.22141 5.65851 6.6028 5.50053 7.00049 5.50053C7.39817 5.50053 7.77957 5.65851 8.06077 5.93972C8.34198 6.22092 8.49996 6.60232 8.49996 7ZM9.99942 7C9.99942 7.79537 9.68347 8.55816 9.12106 9.12057C8.55865 9.68298 7.79586 9.99894 7.00049 9.99894C6.20512 9.99894 5.44233 9.68298 4.87992 9.12057C4.31751 8.55816 4.00155 7.79537 4.00155 7C4.00155 6.20463 4.31751 5.44184 4.87992 4.87943C5.44233 4.31702 6.20512 4.00106 7.00049 4.00106C7.79586 4.00106 8.55865 4.31702 9.12106 4.87943C9.68347 5.44184 9.99942 6.20463 9.99942 7Z",
+        fill: "currentColor"
+      }
+    )
+  }
+), Ze = (t) => /* @__PURE__ */ u.jsx(
+  "svg",
+  {
+    viewBox: "0 0 16 16",
+    fill: "currentColor",
+    xmlns: "http://www.w3.org/2000/svg",
+    ...t,
+    children: /* @__PURE__ */ u.jsx(
+      "path",
+      {
+        d: "M10.6751 0.912497L7.50321 4.0875L7.20946 3.79375C6.81883 3.40312 6.18446 3.40312 5.79383 3.79375C5.40321 4.18437 5.40321 4.81875 5.79383 5.20937L10.7938 10.2094C11.1845 10.6 11.8188 10.6 12.2095 10.2094C12.6001 9.81875 12.6001 9.18437 12.2095 8.79375L11.9157 8.5L15.0876 5.325C16.3063 4.10625 16.3063 2.13125 15.0876 0.915622C13.8688 -0.300003 11.8938 -0.303128 10.6782 0.915622L10.6751 0.912497ZM1.73133 10.1031C1.26258 10.5719 1.00008 11.2094 1.00008 11.8719V13.1969L0.168834 14.4437C-0.0967908 14.8406 -0.0436659 15.3687 0.293834 15.7062C0.631334 16.0437 1.15946 16.0969 1.55633 15.8312L2.80321 15H4.12821C4.79071 15 5.42821 14.7375 5.89696 14.2687L9.66883 10.4969L8.25321 9.08125L4.48133 12.8531C4.38758 12.9469 4.25946 13 4.12821 13H3.00008V11.8719C3.00008 11.7406 3.05321 11.6125 3.14696 11.5187L6.91883 7.74687L5.50321 6.33125L1.73133 10.1031Z",
+        fill: "currentColor"
+      }
+    )
+  }
+), Je = (t) => /* @__PURE__ */ u.jsx(
+  "svg",
+  {
+    viewBox: "0 0 14 14",
+    fill: "currentColor",
+    xmlns: "http://www.w3.org/2000/svg",
+    ...t,
+    children: /* @__PURE__ */ u.jsx(
+      "path",
+      {
+        fillRule: "evenodd",
+        clipRule: "evenodd",
+        d: "M10.7801 2.44148C10.9126 2.27899 10.9847 2.06408 10.9813 1.84202C10.9778 1.61996 10.8991 1.40809 10.7617 1.25105C10.6243 1.09401 10.4389 1.00405 10.2446 1.00013C10.0503 0.996216 9.86225 1.07864 9.72007 1.23005L5.18007 6.41633L5.15707 6.44262L0.220073 12.0872C0.115317 12.2071 0.0439922 12.3597 0.0151078 12.5259C-0.0137766 12.6921 0.00107474 12.8643 0.0577861 13.0208C0.114497 13.1773 0.210525 13.3112 0.333741 13.4054C0.456956 13.4995 0.601833 13.5499 0.750073 13.55H13.2501C13.449 13.55 13.6398 13.4597 13.7804 13.299C13.9211 13.1383 14.0001 12.9202 14.0001 12.6929C14.0001 12.4656 13.9211 12.2476 13.7804 12.0868C13.6398 11.9261 13.449 11.8358 13.2501 11.8358H8.46407C8.31508 10.0847 7.71316 8.42403 6.73507 7.06548L10.7801 2.44148ZM5.66807 8.2849L2.56107 11.8358H6.95507C6.818 10.54 6.37289 9.31191 5.66807 8.2849Z",
+        fill: "currentColor",
+        strokeWidth: 0.25,
+        stroke: "currentColor"
+      }
+    )
+  }
+), mt = (t) => /* @__PURE__ */ u.jsx("svg", { viewBox: "0 0 22 20", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...t, children: /* @__PURE__ */ u.jsx(
+  "path",
+  {
+    d: "M11 0.5C11.4157 0.500587 11.8245 0.608121 12.1865 0.8125C12.5032 0.991321 12.7752 1.23882 12.9824 1.53613L13.0664 1.66699L21.1816 15.2109C21.3902 15.575 21.5002 15.9876 21.501 16.4072C21.5016 16.8293 21.3914 17.244 21.1816 17.6104C20.9718 17.9768 20.6693 18.282 20.3047 18.4951C19.9403 18.708 19.5265 18.8222 19.1045 18.8252H2.8877C2.46522 18.8206 2.0514 18.7049 1.6875 18.4902C1.32346 18.2754 1.02182 17.9684 0.813477 17.6006C0.605278 17.2329 0.497088 16.8171 0.5 16.3945C0.50292 15.9719 0.616688 15.5572 0.830078 15.1924L0.829102 15.1914L8.93652 1.66211C9.1514 1.30717 9.45388 1.01313 9.81543 0.80957C10.1317 0.631497 10.4838 0.527885 10.8447 0.504883L11 0.5Z",
+    fill: "currentColor",
+    stroke: "currentColor"
+  }
+) }), ae = (t) => /* @__PURE__ */ u.jsx("svg", { viewBox: "0 0 12 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...t, children: /* @__PURE__ */ u.jsx(
+  "path",
+  {
+    d: "M8.75 2H10C11.1031 2 12 2.89687 12 4V14C12 15.1031 11.1031 16 10 16H2C0.896875 16 0 15.1031 0 14V4C0 2.89687 0.896875 2 2 2H3.25H3.55C3.78125 0.859375 4.79063 0 6 0C7.20937 0 8.21875 0.859375 8.45 2H8.75ZM2 3.5C1.725 3.5 1.5 3.725 1.5 4V14C1.5 14.275 1.725 14.5 2 14.5H10C10.275 14.5 10.5 14.275 10.5 14V4C10.5 3.725 10.275 3.5 10 3.5H9.5V4.25C9.5 4.66563 9.16562 5 8.75 5H6H3.25C2.83437 5 2.5 4.66563 2.5 4.25V3.5H2ZM6 3.25C6.19891 3.25 6.38968 3.17098 6.53033 3.03033C6.67098 2.88968 6.75 2.69891 6.75 2.5C6.75 2.30109 6.67098 2.11032 6.53033 1.96967C6.38968 1.82902 6.19891 1.75 6 1.75C5.80109 1.75 5.61032 1.82902 5.46967 1.96967C5.32902 2.11032 5.25 2.30109 5.25 2.5C5.25 2.69891 5.32902 2.88968 5.46967 3.03033C5.61032 3.17098 5.80109 3.25 6 3.25Z",
+    fill: "currentColor"
+  }
+) }), Ke = ({ icon: t, classNames: e }) => {
+  const r = ut(), n = X((i) => i.activeStopId), o = X((i) => i.stops), s = X((i) => i.stopsOrder), a = Object.keys(o ?? {}).length > 2, h = typeof t == "function" ? (() => {
+    const i = t;
+    return /* @__PURE__ */ u.jsx(i, { className: C(e?.icon, "gs-delete-stop-icon") });
+  })() : t ?? null, p = () => {
+    const i = n;
+    if (!i) return;
+    const v = o ?? {}, $ = Object.keys(v);
+    if ($.length <= 2) return;
+    const y = (s?.length ? s : $).filter(
+      (k) => !!v[k]
+    ), w = y.indexOf(i);
+    if (w === -1) return;
+    const j = y[w + 1] ?? y[w - 1] ?? null;
+    if (!j) return;
+    const d = { ...v };
+    delete d[i];
+    const O = y.filter((k) => k !== i);
+    r.setStops(() => d), r.setStopsOrder(O), r.setActiveStopId(j);
+    const D = d[j]?.color;
+    D && r.setActiveStopColor(D);
+  };
+  return /* @__PURE__ */ u.jsx(
+    "button",
+    {
+      type: "button",
+      disabled: !a,
+      className: C("gp-delete-stop-button", e?.button),
+      onClick: p,
+      "aria-label": "Delete color stop",
+      "data-scope": "gradient-picker",
+      "data-slot": "delete-stop-button",
+      "data-active": n ? "true" : void 0,
+      "data-disabled": a ? void 0 : "true",
+      children: h ?? /* @__PURE__ */ u.jsx(ze, { className: C("gp-delete-stop-icon", e?.icon) })
+    }
+  );
+}, Qe = ({ classNames: t, icon: e }) => {
+  const r = ut(), n = X((p) => p.activeStopId), [o, s] = st(!1), a = async () => {
+    if (s(!0), "EyeDropper" in window)
+      try {
+        const p = new window.EyeDropper(), { sRGBHex: i } = await p.open(), v = Ie(i);
+        if (v && n) {
+          const $ = Ce(v.r, v.g, v.b), y = `rgba(${v.r}, ${v.g}, ${v.b}, 1)`;
+          r.setState((w) => {
+            const j = w.activeStopId;
+            return !j || !w.stops[j] ? { ...w, rgba: y, hue: $ } : {
+              ...w,
+              rgba: y,
+              hue: $,
+              stops: { ...w.stops, [j]: { ...w.stops[j], color: y } }
+            };
+          });
+        }
+        s(!1);
+      } catch (p) {
+        console.warn("EyeDropper canceled or failed", p), s(!1);
+      }
+    else
+      console.warn("EyeDropper API is not supported in this browser."), s(!1);
+  }, h = typeof e == "function" ? (() => {
+    const p = e;
+    return /* @__PURE__ */ u.jsx(p, { className: C(t?.icon, "gp-eye-dropper-icon") });
+  })() : e ?? null;
+  return /* @__PURE__ */ u.jsx(
+    "button",
+    {
+      type: "button",
+      className: C(
+        o && t?.active,
+        o && "gp-eye-dropper-active",
+        "gp-eye-dropper-button"
+      ),
+      onClick: a,
+      disabled: !n,
+      "aria-label": "Pick color from screen",
+      "aria-pressed": o,
+      "data-scope": "gradient-picker",
+      "data-slot": "eye-dropper-button",
+      "data-active": o ? "true" : void 0,
+      "data-disabled": n ? void 0 : "true",
+      children: h ?? /* @__PURE__ */ u.jsx(Ze, { className: C(t?.icon, "gp-eye-dropper-icon") })
+    }
+  );
+}, at = 4, tn = 24, ft = tn / 2, en = () => `stop_${Math.random().toString(36).slice(2, 9)}_${Date.now().toString(36)}`, ce = (t, e, r = 4) => {
+  const n = e.slice().sort((s, a) => s.position - a.position);
+  let o = t;
+  for (let s = 0; s < n.length; s++)
+    Math.abs(n[s].position - o) < r && (o = pt(n[s].position + r, 0, 100));
+  return o;
+}, nn = (t, e) => {
+  const r = pt(t, 0, 100) / 100;
+  return ft + r * Math.max(1, e - 2 * ft);
+}, Mt = (t, e, r) => {
+  const n = Object.values(r).filter((a) => a.id !== e).slice().sort((a, h) => a.position - h.position);
+  let o = null, s = null;
+  for (let a = 0; a < n.length; a++)
+    if (n[a].position < t && (o = n[a]), n[a].position > t) {
+      s = n[a];
+      break;
+    }
+  return { left: o, right: s };
+}, kt = (t, e, r) => {
+  let n = t;
+  return e && (n = Math.max(n, e.position + at)), r && (n = Math.min(n, r.position - at)), Math.max(0, Math.min(100, n));
+}, Ut = (t, e, r, n, o) => {
+  let s = Math.max(0, Math.min(100, t));
+  const a = n == null ? 0 : t - n, { left: h, right: p } = Mt(s, e, r);
+  if (o) {
+    const i = r[o.neighborId] ?? null;
+    if (!i)
+      o = null;
+    else if (o.dir === 1)
+      if (t <= i.position - at)
+        o = null;
+      else if (t < i.position + at) {
+        s = i.position - at;
+        const v = Mt(s, e, r);
+        return s = kt(s, v.left, v.right), { pos: s, block: o };
+      } else
+        o = null;
+    else if (t >= i.position + at)
+      o = null;
+    else if (t > i.position - at) {
+      s = i.position + at;
+      const v = Mt(s, e, r);
+      return s = kt(s, v.left, v.right), { pos: s, block: o };
+    } else
+      o = null;
+  }
+  if (a > 0 && p && t >= p.position - at && t < p.position + at) {
+    o = { neighborId: p.id, dir: 1 }, s = p.position - at;
+    const i = Mt(s, e, r);
+    return s = kt(s, i.left, i.right), { pos: s, block: o };
+  }
+  if (a < 0 && h && t <= h.position + at && t > h.position - at) {
+    o = { neighborId: h.id, dir: -1 }, s = h.position + at;
+    const i = Mt(s, e, r);
+    return s = kt(s, i.left, i.right), { pos: s, block: o };
+  }
+  return s = kt(s, h, p), { pos: s, block: o };
+}, rn = (t) => ({
+  backgroundColor: t.color
+}), on = (t = [], e = []) => {
+  if (t === e) return !0;
+  if (t.length !== e.length) return !1;
+  for (let r = 0; r < t.length; r++) if (t[r] !== e[r]) return !1;
+  return !0;
+}, Dt = (t) => t.trim().replace(/\s+/g, " ").replace(/\s*,\s*/g, ", "), sn = (t, e) => {
+  const r = Object.values(t ?? {}).map((o) => ({ position: Number(o.position), color: String(o.color ?? "") })).sort((o, s) => o.position - s.position), n = Object.values(e ?? {}).map((o) => ({ position: Number(o.position), color: String(o.color ?? "") })).sort((o, s) => o.position - s.position);
+  if (r.length !== n.length) return !1;
+  for (let o = 0; o < r.length; o++) {
+    const s = r[o].position, a = n[o].position;
+    if (!Number.isFinite(s) || !Number.isFinite(a) || Math.abs(s - a) > 1e-6 || r[o].color !== n[o].color) return !1;
+  }
+  return !0;
+}, an = (t, e, r) => {
+  const n = pt(t, 0, 100);
+  return e.some((a) => Math.abs((a.position ?? 0) - 100) < 1e-4) ? Math.min(n, 100 - r) : e.some((a) => Math.abs((a.position ?? 0) - 0) < 1e-4) ? Math.max(n, r) : ce(n, e, r);
+}, cn = (t) => {
+  const e = Object.entries(t).map(([r, n]) => [r, n.position]);
+  return e.sort((r, n) => r[0] < n[0] ? -1 : r[0] > n[0] ? 1 : 0), e.map((r) => `${r[0]}:${Math.round(r[1] * 1e3)}`).join("|");
+}, gt = (t, e, r) => {
+  if (t === null) return null;
+  if (!t) return e;
+  if (typeof t == "function") {
+    const n = t;
+    return /* @__PURE__ */ u.jsx(n, { className: r });
+  }
+  return t;
+}, ln = ({
+  classNames: t,
+  label: e,
+  suffix: r = "%",
+  icons: n,
+  hideLabel: o,
+  hideSuffix: s,
+  hideSteppers: a
+}) => {
+  const h = ut(), p = F(null), i = X(
+    (E) => {
+      const A = E.activeStopId, f = A && E.stops[A] ? E.stops[A].position : null, R = cn(E.stops);
+      return {
+        activeStopId: A,
+        activePosition: f,
+        draggingStopId: E.draggingStopId,
+        draftPosition: E.draftPosition,
+        positionsSignature: R
+      };
+    },
+    (E, A) => E.activeStopId === A.activeStopId && E.activePosition === A.activePosition && E.draggingStopId === A.draggingStopId && E.draftPosition === A.draftPosition && E.positionsSignature === A.positionsSignature
+  ), v = nt(() => i.activeStopId ? i.draggingStopId === i.activeStopId && i.draftPosition != null ? i.draftPosition : i.activePosition ?? 0 : 0, [i.activeStopId, i.draggingStopId, i.draftPosition, i.activePosition]), $ = gt(n?.base, null, C(t?.baseIcon)), y = gt(
+    n?.increment,
+    /* @__PURE__ */ u.jsx(
+      mt,
+      {
+        className: C(t?.steppers?.increment?.icon, "gp-stop-position-icon"),
+        "aria-hidden": "true",
+        focusable: "false"
+      }
+    ),
+    C(t?.steppers?.increment?.icon, "gp-stop-position-icon")
+  ), w = gt(
+    n?.decrement,
+    /* @__PURE__ */ u.jsx(
+      mt,
+      {
+        className: C(t?.steppers?.decrement?.icon, "gp-stop-position-icon"),
+        "aria-hidden": "true",
+        focusable: "false"
+      }
+    ),
+    C(t?.steppers?.decrement?.icon, "gp-stop-position-icon")
+  ), j = et(
+    (E) => {
+      const A = i.activeStopId;
+      if (!A) return;
+      const f = h.getState().stops;
+      if (!f[A]) return;
+      const H = Object.values(f).filter((I) => I.id !== A), m = an(E, H, 4);
+      h.setStops((I) => I[A] ? { ...I, [A]: { ...I[A], position: m } } : I);
+      const b = h.getState().stops, M = Ot(b);
+      M.length && h.setStopsOrder(M), h.setDraftPosition(null);
+    },
+    [i.activeStopId, h]
+  ), d = (E) => {
+    const A = Number(E.target.value);
+    Number.isNaN(A) || j(pt(A, 0, 100));
+  }, O = (E) => (A) => {
+    A.preventDefault(), j(pt(v + E, 0, 100));
+  }, D = (E) => {
+    if (E.key !== "ArrowUp" && E.key !== "ArrowDown") return;
+    E.preventDefault();
+    const A = E.shiftKey ? 10 : 1, f = E.key === "ArrowUp" ? 1 : -1;
+    j(pt(v + f * A, 0, 100));
+  }, k = () => {
+    p.current && p.current.focus();
+  };
+  return i.activeStopId ? /* @__PURE__ */ u.jsxs(
+    "section",
+    {
+      className: C(t?.wrapper, "gp-stop-position-wrapper"),
+      onClick: k,
+      "data-scope": "gradient-picker",
+      "data-part": "stop-position",
+      "data-value": v,
+      children: [
+        !o && /* @__PURE__ */ u.jsx(
+          "p",
+          {
+            className: C(t?.label, "gp-stop-position-label"),
+            "data-part": "label",
+            children: e ?? "Position"
+          }
+        ),
+        /* @__PURE__ */ u.jsxs(
+          "div",
+          {
+            className: C(t?.inputWrapper, "gp-stop-position-input-wrapper"),
+            "data-part": "input-wrapper",
+            children: [
+              $,
+              /* @__PURE__ */ u.jsx(
+                "input",
+                {
+                  type: "text",
+                  inputMode: "decimal",
+                  ref: p,
+                  value: Math.round(v * 1e3) / 1e3,
+                  className: C(t?.input, "gp-stop-position-input"),
+                  onChange: d,
+                  onKeyDown: D,
+                  role: "spinbutton",
+                  "aria-label": e ?? "Position",
+                  "aria-valuemin": 0,
+                  "aria-valuemax": 100,
+                  "aria-valuenow": v,
+                  "data-part": "input",
+                  "data-value": v
+                }
+              ),
+              !s && /* @__PURE__ */ u.jsx(
+                "span",
+                {
+                  className: C(t?.suffix, "gp-stop-position-suffix"),
+                  "aria-hidden": "true",
+                  "data-part": "suffix",
+                  children: r
+                }
+              ),
+              !a && /* @__PURE__ */ u.jsxs(
+                "div",
+                {
+                  className: C(
+                    t?.steppers?.wrapper,
+                    "gp-stop-position-steppers"
+                  ),
+                  "aria-hidden": "true",
+                  "data-part": "steppers",
+                  children: [
+                    /* @__PURE__ */ u.jsx(
+                      "button",
+                      {
+                        type: "button",
+                        className: C(
+                          t?.steppers?.increment?.button,
+                          "gp-stop-position-stepper-button"
+                        ),
+                        onClick: O(1),
+                        "aria-label": "Increase position",
+                        "data-part": "increment-button",
+                        children: y
+                      }
+                    ),
+                    /* @__PURE__ */ u.jsx(
+                      "button",
+                      {
+                        type: "button",
+                        className: C(
+                          t?.steppers?.decrement?.button,
+                          "gp-stop-position-stepper-button",
+                          "gp-stop-position-stepper-decrement"
+                        ),
+                        onClick: O(-1),
+                        "aria-label": "Decrease position",
+                        "data-part": "decrement-button",
+                        children: w
+                      }
+                    )
+                  ]
+                }
+              )
+            ]
+          }
+        )
+      ]
+    }
+  ) : null;
+}, un = ({ classNames: t }) => {
+  const e = ut(), r = X((k) => k.rgba), n = F(null), o = F(null), [s, a] = st({ w: 0, h: 0 });
+  W(() => {
+    const k = o.current;
+    if (!k) return;
+    const E = new ResizeObserver((A) => {
+      const f = A[0]?.contentRect;
+      if (!f) return;
+      const R = Math.floor(f.width), H = Math.floor(f.height);
+      R <= 0 || H <= 0 || a((m) => m.w === R && m.h === H ? m : { w: R, h: H });
+    });
+    return E.observe(k), () => E.disconnect();
+  }, []), W(() => {
+    const { w: k, h: E } = s;
+    if (!k || !E) return;
+    const A = n.current;
+    if (!A) return;
+    const f = window.devicePixelRatio || 1;
+    A.width = Math.round(k * f), A.height = Math.round(E * f), A.style.width = `${k}px`, A.style.height = `${E}px`;
+    const R = A.getContext("2d");
+    if (!R) return;
+    R.setTransform(f, 0, 0, f, 0, 0), R.clearRect(0, 0, k, E);
+    const H = 6;
+    for (let M = 0; M < E; M += H)
+      for (let I = 0; I < k; I += H) {
+        const Z = (Math.floor(I / H) + Math.floor(M / H) & 1) === 1;
+        R.fillStyle = Z ? "#bdbdbd" : "#ffffff", R.fillRect(I, M, H, H);
+      }
+    const m = J(r) ?? { r: 0, g: 0, b: 0 }, b = R.createLinearGradient(0, 0, k, 0);
+    b.addColorStop(0, `rgba(${m.r}, ${m.g}, ${m.b}, 0)`), b.addColorStop(1, `rgba(${m.r}, ${m.g}, ${m.b}, 1)`), R.fillStyle = b, R.fillRect(0, 0, k, E);
+  }, [s.w, s.h, r]);
+  const h = yt(Se(r)), p = nt(
+    () => Re(h, s.w),
+    [h, s.w]
+  ), i = nt(() => ({ left: p }), [p]), v = nt(() => ({ backgroundColor: r }), [r]), $ = F(null), y = F(null), w = (k) => {
+    const E = yt(k), A = J(r) ?? { r: 0, g: 0, b: 0 }, f = it(A.r, A.g, A.b, E);
+    e.setActiveStopColor(f);
+  }, j = (k) => {
+    y.current = k, $.current == null && ($.current = requestAnimationFrame(() => {
+      $.current = null;
+      const E = y.current;
+      y.current = null, E != null && w(E);
+    }));
+  };
+  W(() => () => {
+    $.current != null && cancelAnimationFrame($.current);
+  }, []);
+  const d = (k) => {
+    const E = o.current?.getBoundingClientRect();
+    E && j(we(k, E));
+  }, O = (k) => {
+    k.currentTarget.setPointerCapture(k.pointerId), d(k.clientX);
+  }, D = (k) => {
+    (k.buttons & 1) === 1 && d(k.clientX);
+  };
+  return /* @__PURE__ */ u.jsxs(
+    "section",
+    {
+      ref: o,
+      className: C("gp-alpha-slider-wrapper", t?.wrapper),
+      onPointerDown: O,
+      onPointerMove: D,
+      role: "slider",
+      tabIndex: 0,
+      "aria-label": "Opacity",
+      "aria-orientation": "horizontal",
+      "aria-valuemin": 0,
+      "aria-valuemax": 1,
+      "aria-valuenow": h,
+      "data-scope": "gradient-picker",
+      "data-slot": "root",
+      "data-value": h,
+      children: [
+        /* @__PURE__ */ u.jsx(
+          "canvas",
+          {
+            ref: n,
+            className: C("gp-alpha-slider-canvas", t?.canvas),
+            "aria-hidden": "true",
+            "data-slot": "canvas"
+          }
+        ),
+        /* @__PURE__ */ u.jsx(
+          "div",
+          {
+            className: C("gp-alpha-slider-track", t?.track),
+            "aria-hidden": "true",
+            "data-slot": "track"
+          }
+        ),
+        /* @__PURE__ */ u.jsx(
+          "div",
+          {
+            className: C("gp-alpha-slider-thumb", t?.thumb),
+            style: i,
+            "aria-hidden": "true",
+            "data-slot": "thumb",
+            "data-value": h,
+            children: /* @__PURE__ */ u.jsx(
+              "div",
+              {
+                className: C("gp-alpha-slider-thumb-inner", t?.thumbInner),
+                style: v,
+                "aria-hidden": "true",
+                "data-slot": "thumb-inner"
+              }
+            )
+          }
+        )
+      ]
+    }
+  );
+}, _t = (t) => Math.max(0, Math.min(100, Math.round(t))), pn = (t) => {
+  const r = t.match(
+    /^rgba?\(\s*\d+\s*,\s*\d+\s*,\s*\d+\s*(?:,\s*([01]?\.?\d+))?\s*\)$/i
+  )?.[1], n = r == null || r === "" ? 1 : Number(r);
+  return Number.isNaN(n) ? 1 : Math.max(0, Math.min(1, n));
+}, dn = (t, e) => {
+  const r = t.match(
+    /^rgba?\(\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)\s*(?:,\s*([01]?\.?\d+))?\s*\)$/i
+  );
+  if (!r) return t;
+  const n = r[1], o = r[2], s = r[3], a = Math.max(0, Math.min(1, e));
+  return `rgba(${n}, ${o}, ${s}, ${a})`;
+}, gn = ({
+  classNames: t,
+  updateDelay: e = 0,
+  suffix: r = "%",
+  icons: n
+}) => {
+  const o = ut(), s = X((f) => f.rgba), a = "alpha-input", h = "alpha-input-suffix", p = F("gradient-picker:alphaInput"), [i, v] = st(100), $ = F(null), y = F(s);
+  W(() => {
+    y.current = s;
+    const f = pn(s), R = _t(f * 100);
+    v((H) => H === R ? H : R);
+  }, [s]);
+  const w = i >= 100, j = i <= 0, d = nt(
+    () => ({
+      increment: gt(
+        n?.increment,
+        /* @__PURE__ */ u.jsx(
+          mt,
+          {
+            className: C(
+              t?.input?.steppers?.increment?.icon,
+              "alpha-input-icon",
+              "alpha-increment-icon"
+            ),
+            "aria-hidden": "true",
+            focusable: "false"
+          }
+        ),
+        C(
+          t?.input?.steppers?.increment?.icon,
+          "alpha-input-icon",
+          "alpha-increment-icon"
+        )
+      ),
+      decrement: gt(
+        n?.decrement,
+        /* @__PURE__ */ u.jsx(
+          mt,
+          {
+            className: C(
+              t?.input?.steppers?.decrement?.icon,
+              "alpha-input-icon",
+              "alpha-decrement-icon"
+            ),
+            "aria-hidden": "true",
+            focusable: "false"
+          }
+        ),
+        C(
+          t?.input?.steppers?.decrement?.icon,
+          "alpha-input-icon",
+          "alpha-decrement-icon"
+        )
+      )
+    }),
+    [
+      n?.increment,
+      n?.decrement,
+      t?.input?.steppers?.increment?.icon,
+      t?.input?.steppers?.decrement?.icon
+    ]
+  ), O = (f) => {
+    const R = _t(f);
+    v(R);
+    const H = dn(y.current, R / 100);
+    oe(
+      () => {
+        o.setActiveStopColor(H);
+      },
+      e,
+      p.current
+    );
+  }, D = (f) => {
+    const R = Number(f.target.value);
+    Number.isNaN(R) || R < 0 || R > 100 || O(R);
+  }, k = (f) => (R) => {
+    R.preventDefault(), R.stopPropagation();
+    const H = i;
+    if (f === "increment" && H >= 100 || f === "decrement" && H <= 0) return;
+    const m = _t(H + (f === "increment" ? 1 : -1));
+    m !== H && (O(m), $.current?.select());
+  }, E = (f) => {
+    if (f.key !== "ArrowUp" && f.key !== "ArrowDown") return;
+    f.preventDefault(), f.stopPropagation();
+    const R = f.shiftKey ? 10 : 1, H = f.key === "ArrowUp" ? 1 : -1, m = _t(i + H * R);
+    m !== i && (O(m), $.current?.select());
+  }, A = () => {
+    $.current?.select();
+  };
+  return /* @__PURE__ */ u.jsxs(
+    "div",
+    {
+      className: C(t?.wrapper, "gp-alpha-input-wrapper"),
+      onClick: A,
+      "data-slot": "alpha-input",
+      children: [
+        /* @__PURE__ */ u.jsx(
+          "input",
+          {
+            id: a,
+            ref: $,
+            type: "text",
+            inputMode: "numeric",
+            value: i,
+            className: C(t?.input?.field, "gp-alpha-input-field"),
+            onChange: D,
+            onKeyDown: E,
+            role: "spinbutton",
+            "aria-label": "Alpha",
+            "aria-describedby": h,
+            "aria-valuemin": 0,
+            "aria-valuemax": 100,
+            "aria-valuenow": i,
+            "data-slot": "alpha-input-field"
+          }
+        ),
+        /* @__PURE__ */ u.jsx(
+          "span",
+          {
+            id: h,
+            className: C(t?.suffix, "gp-alpha-input-suffix"),
+            "aria-hidden": "true",
+            "data-slot": "alpha-input-suffix",
+            children: r
+          }
+        ),
+        /* @__PURE__ */ u.jsxs(
+          "div",
+          {
+            className: C(
+              t?.input?.steppers?.wrapper,
+              "gp-alpha-input-steppers"
+            ),
+            "data-slot": "alpha-input-steppers",
+            children: [
+              /* @__PURE__ */ u.jsx(
+                "button",
+                {
+                  type: "button",
+                  className: C(
+                    t?.input?.steppers?.increment?.button,
+                    "gp-alpha-input-stepper-button",
+                    "gp-alpha-input-stepper-increment"
+                  ),
+                  onClick: k("increment"),
+                  disabled: w,
+                  "aria-label": "Increase alpha",
+                  "aria-controls": a,
+                  "data-slot": "alpha-input-stepper-increment",
+                  "data-action": "increment",
+                  children: d.increment
+                }
+              ),
+              /* @__PURE__ */ u.jsx(
+                "button",
+                {
+                  type: "button",
+                  className: C(
+                    t?.input?.steppers?.decrement?.button,
+                    "gp-alpha-input-stepper-button",
+                    "gp-alpha-input-stepper-decrement"
+                  ),
+                  onClick: k("decrement"),
+                  disabled: j,
+                  "aria-label": "Decrease alpha",
+                  "aria-controls": a,
+                  "data-slot": "alpha-input-stepper-decrement",
+                  "data-action": "decrement",
+                  children: d.decrement
+                }
+              )
+            ]
+          }
+        )
+      ]
+    }
+  );
+}, fn = ({ classNames: t, icons: e }) => {
+  const r = ut(), n = X((A) => A.angle), o = X((A) => A.format), s = F(null), a = "gp-angle-input-field", h = "gp-angle-input-degree", p = "gp-angle-input-steppers", i = n ?? 90, v = !1, $ = !1, y = gt(
+    e?.angle,
+    /* @__PURE__ */ u.jsx(
+      Je,
+      {
+        className: C(t?.icon, "gp-angle-input-icon"),
+        "aria-hidden": "true",
+        focusable: "false"
+      }
+    ),
+    C(t?.icon, "gp-angle-input-icon")
+  ), w = gt(
+    e?.increment,
+    /* @__PURE__ */ u.jsx(
+      mt,
+      {
+        className: C(
+          t?.incrementIcon,
+          "gp-angle-input-icon",
+          "gp-angle-increment-icon"
+        ),
+        "aria-hidden": "true",
+        focusable: "false"
+      }
+    ),
+    C(t?.incrementIcon, "gp-angle-input-icon", "gp-angle-increment-icon")
+  ), j = gt(
+    e?.decrement,
+    /* @__PURE__ */ u.jsx(
+      mt,
+      {
+        className: C(
+          t?.decrementIcon,
+          "gp-angle-input-icon",
+          "gp-angle-decrement-icon"
+        ),
+        "aria-hidden": "true",
+        focusable: "false"
+      }
+    ),
+    C(t?.decrementIcon, "gp-angle-input-icon", "gp-angle-decrement-icon")
+  ), d = et(() => {
+    r.setAngle(((n ?? 0) + 1) % 360);
+  }, [n, r]), O = et(() => {
+    r.setAngle(((n ?? 0) - 1 + 360) % 360);
+  }, [n, r]), D = (A) => {
+    A.key === "ArrowUp" ? (A.preventDefault(), d()) : A.key === "ArrowDown" && (A.preventDefault(), O());
+  }, k = (A) => {
+    const f = Number(A.target.value);
+    if (!Number.isNaN(f)) {
+      if (f > 360) {
+        r.setAngle(360);
+        return;
+      }
+      if (f < 0) {
+        r.setAngle(0);
+        return;
+      }
+      r.setAngle(f);
+    }
+  }, E = () => {
+    s.current?.focus();
+  };
+  return o !== "linear-gradient" ? null : /* @__PURE__ */ u.jsxs(
+    "section",
+    {
+      id: "gp-angle-input-wrapper",
+      className: C(t?.wrapper, "gp-angle-input-wrapper"),
+      "data-scope": "gradient-picker",
+      "data-slot": "root",
+      "data-format": o,
+      "data-value": i,
+      children: [
+        y,
+        /* @__PURE__ */ u.jsxs(
+          "div",
+          {
+            id: "gp-angle-input-input-wrapper",
+            className: C(t?.inputWrapper, "gp-angle-input-input-wrapper"),
+            onClick: E,
+            "data-slot": "input-wrapper",
+            children: [
+              /* @__PURE__ */ u.jsx(
+                "input",
+                {
+                  id: a,
+                  value: i,
+                  ref: s,
+                  className: C(t?.input, "gp-angle-input-field"),
+                  onChange: k,
+                  onKeyDown: D,
+                  inputMode: "numeric",
+                  role: "spinbutton",
+                  "aria-label": "Angle",
+                  "aria-valuemin": 0,
+                  "aria-valuemax": 360,
+                  "aria-valuenow": i,
+                  "data-slot": "input",
+                  "data-value": i
+                }
+              ),
+              /* @__PURE__ */ u.jsx(
+                "span",
+                {
+                  id: h,
+                  className: C(t?.degree, "gp-angle-input-degree"),
+                  "aria-hidden": "true",
+                  "data-slot": "degree",
+                  children: "°"
+                }
+              )
+            ]
+          }
+        ),
+        (e?.decrement !== null || e?.increment !== null) && /* @__PURE__ */ u.jsxs(
+          "div",
+          {
+            id: p,
+            className: C(t?.steppers, "gp-angle-input-steppers"),
+            "aria-hidden": "true",
+            "data-slot": "steppers",
+            children: [
+              e?.increment !== null && /* @__PURE__ */ u.jsx(
+                "button",
+                {
+                  id: "gp-angle-input-stepper-increment",
+                  type: "button",
+                  className: C(
+                    t?.incrementButton,
+                    "gp-angle-input-stepper-button",
+                    "gp-angle-input-stepper-increment"
+                  ),
+                  onClick: d,
+                  disabled: v,
+                  "aria-label": "Increase angle",
+                  "data-slot": "increment-button",
+                  "data-disabled": void 0,
+                  children: w
+                }
+              ),
+              e?.decrement !== null && /* @__PURE__ */ u.jsx(
+                "button",
+                {
+                  id: "gp-angle-input-stepper-decrement",
+                  type: "button",
+                  className: C(
+                    t?.decrementButton,
+                    "gp-angle-input-stepper-button",
+                    "gp-angle-input-stepper-decrement"
+                  ),
+                  onClick: O,
+                  disabled: $,
+                  "aria-label": "Decrease angle",
+                  "data-slot": "decrement-button",
+                  "data-disabled": void 0,
+                  children: j
+                }
+              )
+            ]
+          }
+        )
+      ]
+    }
+  );
+}, hn = ee(({ classNames: t }) => {
+  const e = ut(), r = X((g) => g.gradient), n = X((g) => g.activeStopId), o = X((g) => g.angle), s = X((g) => g.stops), a = X((g) => g.stopsOrder), h = X((g) => g.format), p = X((g) => g.prefixes), i = X((g) => g.draftPosition), v = X((g) => g.draggingStopId), $ = X((g) => g.rgba), y = X((g) => g.updateDelay), w = r, j = nt(() => Dt(w ?? ""), [w]), [d, O] = st({ w: 0, h: 0 }), D = F(null), k = F(null), E = F(!0), A = F(null), f = F(null), R = F(0), H = F(null), m = F(null), b = F(null), M = F({}), I = F(null);
+  W(() => {
+    M.current = s ?? {};
+  }, [s]), W(() => {
+    I.current = n ?? null;
+  }, [n]);
+  const Z = F(
+    `gradient-picker:onChange:${Math.random().toString(36).slice(2)}`
+  ), P = F(e.getState().onGradientChange);
+  W(() => (P.current = e.getState().onGradientChange, e.subscribe(() => {
+    P.current = e.getState().onGradientChange;
+  })), [e]);
+  const L = nt(() => Object.values(s ?? {}).slice().sort((g, S) => g.position - S.position), [s]), G = nt(() => {
+    const g = v, S = i;
+    return !g || S == null ? L : L.map((N) => N.id === g ? { ...N, position: S } : N).slice().sort((N, U) => (N.position ?? 0) - (U.position ?? 0));
+  }, [L, v, i]);
+  W(() => {
+    H.current = i ?? null;
+  }, [i]), W(() => {
+    if (!a) return;
+    const g = Ot(s);
+    on(a ?? [], g) || e.setStopsOrder(g);
+  }, [s, a]), W(() => {
+    if (!j || e.getState().draggingStopId) return;
+    if (b.current && Dt(b.current) === j) {
+      m.current = j;
+      return;
+    }
+    if (m.current === j) return;
+    const g = Wt(j);
+    if (!g) {
+      m.current = j;
+      return;
+    }
+    const S = M.current ?? {}, N = g.stops ?? {};
+    if (sn(S, N)) {
+      m.current = j, h && h !== g.format && e.setFormat(g.format);
+      const T = p?.[g.format] ?? "", _ = g.prefix ?? T;
+      _ !== T && e.setPrefixes({ ...p, [g.format]: _ });
+      return;
+    }
+    m.current = j;
+    const U = Ot(N), c = I.current, x = (c && N[c] ? c : Object.keys(N)[0]) ?? null;
+    e.setState((T) => {
+      const _ = x ? N[x]?.color ?? "rgba(0, 0, 0, 1)" : T.rgba, z = x ? Gt(_, T.hue) : T.hue;
+      return {
+        ...T,
+        stops: N,
+        stopsOrder: U,
+        activeStopId: x,
+        rgba: _,
+        hue: z,
+        format: g.format,
+        prefixes: {
+          ...T.prefixes,
+          [g.format]: g.prefix ?? T.prefixes[g.format]
+        }
+      };
+    });
+  }, [j, v, e]), W(() => {
+    if (E.current) {
+      E.current = !1;
+      return;
+    }
+    const g = h ?? "linear-gradient", S = p?.[g] ?? "", N = Ne(
+      G.map((x) => ({ position: x.position ?? 0, color: x.color })),
+      { format: g, angle: o ?? 90, prefix: S }
+    ), U = Dt(N);
+    (b.current ? Dt(b.current) : null) !== U && (b.current = N, oe(
+      () => P.current(N),
+      y ?? 0,
+      Z.current
+    ), e.setGradient(N));
+  }, [G, y, h, p, o]), W(() => {
+    const g = D.current;
+    if (!g) return;
+    const S = new ResizeObserver((N) => {
+      const U = N[0]?.contentRect;
+      if (!U) return;
+      const c = Math.floor(U.width), x = Math.floor(U.height);
+      c <= 0 || x <= 0 || O((T) => T.w === c && T.h === x ? T : { w: c, h: x });
+    });
+    return S.observe(g), () => S.disconnect();
+  }, []), W(() => {
+    const { w: g, h: S } = d;
+    if (!g || !S) return;
+    const N = k.current;
+    if (!N) return;
+    const U = window.devicePixelRatio || 1;
+    N.width = Math.round(g * U), N.height = Math.round(S * U), N.style.width = `${g}px`, N.style.height = `${S}px`;
+    const c = N.getContext("2d");
+    if (!c) return;
+    c.setTransform(U, 0, 0, U, 0, 0), c.clearRect(0, 0, g, S);
+    const x = 8;
+    for (let _ = 0; _ < S; _ += x)
+      for (let z = 0; z < g; z += x) {
+        const rt = (Math.floor(z / x) + Math.floor(_ / x) & 1) === 1;
+        c.fillStyle = rt ? "rgba(0,0,0,0.12)" : "rgba(255,255,255,0.12)", c.fillRect(z, _, x, x);
+      }
+    const T = c.createLinearGradient(0, 0, g, 0);
+    if (G.length === 0)
+      T.addColorStop(0, "rgba(0,0,0,0)"), T.addColorStop(1, "rgba(0,0,0,0)");
+    else if (G.length === 1) {
+      const _ = G[0];
+      T.addColorStop(0, _.color), T.addColorStop(1, _.color);
+    } else
+      for (const _ of G) {
+        const z = pt(_.position ?? 0, 0, 100) / 100;
+        T.addColorStop(z, _.color);
+      }
+    c.fillStyle = T, c.fillRect(0, 0, g, S);
+  }, [d.w, d.h, G]);
+  const B = (g) => {
+    const S = D.current?.getBoundingClientRect();
+    if (!S) return 0;
+    const N = g - R.current, c = (pt(N - S.left, ft, S.width - ft) - ft) / Math.max(1, S.width - 2 * ft);
+    return pt(c * 100, 0, 100);
+  }, q = (g) => (S) => {
+    const N = s[g];
+    if (!N) return;
+    e.setActiveStopId(N.id), e.setActiveStopColor(N.color ?? "rgba(0, 0, 0, 1)"), e.setDraggingStopId(g);
+    const U = S.currentTarget.getBoundingClientRect(), c = U.left + U.width / 2;
+    R.current = S.clientX - c;
+    const x = B(S.clientX), T = Ut(x, g, s, A.current, f.current);
+    A.current = x, f.current = T.block, H.current = T.pos, e.setDraftPosition(T.pos), S.currentTarget.setPointerCapture(S.pointerId);
+  }, Y = (g) => {
+    const S = e.getState().draggingStopId;
+    if (!S) return;
+    const N = B(g.clientX), U = Ut(N, S, s, A.current, f.current);
+    A.current = N, f.current = U.block;
+    const c = Math.round(U.pos * 1e3) / 1e3;
+    H.current !== c && (H.current = c, e.setDraftPosition(c));
+  }, Q = () => {
+    H.current = null, A.current = null, f.current = null, R.current = 0;
+  }, ot = () => {
+    const g = e.getState(), S = g.draggingStopId, N = H.current ?? g.draftPosition;
+    if (Q(), !S || N == null) {
+      e.setState(
+        (c) => c.draggingStopId === null && c.draftPosition === null ? c : { ...c, draggingStopId: null, draftPosition: null }
+      );
+      return;
+    }
+    const U = Math.round(pt(N, 0, 100) * 1e3) / 1e3;
+    e.setState((c) => {
+      const x = c.stops[S];
+      if (!x) return { ...c, draggingStopId: null, draftPosition: null };
+      const T = {
+        ...c.stops,
+        [S]: { ...x, position: U }
+      }, _ = Ot(T);
+      return {
+        ...c,
+        stops: T,
+        stopsOrder: _,
+        draggingStopId: null,
+        draftPosition: null
+      };
+    }), e.recomputeGradient();
+  }, l = () => {
+    ot();
+  }, V = (g) => {
+    const S = D.current?.getBoundingClientRect();
+    if (!S) return 0;
+    const U = (pt(g - S.left, ft, S.width - ft) - ft) / Math.max(1, S.width - 2 * ft);
+    return pt(U * 100, 0, 100);
+  }, K = (g) => {
+    if (g.target.closest(".gp-gradient-slider-stop") || (g.buttons & 1) !== 1) return;
+    const N = V(g.clientX), U = en(), c = ce(N, Object.values(s), 4), x = { id: U, position: c, color: $ };
+    e.setState((T) => {
+      const _ = { ...T.stops, [U]: x }, z = Ot(_);
+      return { ...T, stops: _, stopsOrder: z, activeStopId: U };
+    }), e.setActiveStopColor($), e.recomputeGradient(), e.setDraggingStopId(U), R.current = 0, A.current = c, f.current = null, H.current = c, e.setDraftPosition(c), g.currentTarget.setPointerCapture(g.pointerId);
+  }, tt = (g) => () => {
+    if (n === g) return;
+    const S = s[g];
+    S && (e.setActiveStopId(S.id), e.setActiveStopColor(S.color ?? "rgba(0, 0, 0, 1)"));
+  }, ht = nt(() => {
+    const g = s ?? {}, S = a ?? [], N = S.map((c) => g[c]).filter(Boolean), U = Object.values(g).filter((c) => !S.includes(c.id));
+    return [...N, ...U];
+  }, [s, a, L]);
+  return W(() => {
+    if (!v) return;
+    const g = (N) => {
+      const U = e.getState().draggingStopId;
+      if (!U) return;
+      const c = B(N.clientX), x = e.getState().stops, T = Ut(
+        c,
+        U,
+        x,
+        A.current,
+        f.current
+      );
+      A.current = c, f.current = T.block;
+      const _ = Math.round(T.pos * 1e3) / 1e3;
+      H.current !== _ && (H.current = _, e.setDraftPosition(_));
+    }, S = () => {
+      ot();
+    };
+    return window.addEventListener("pointermove", g), window.addEventListener("pointerup", S), window.addEventListener("pointercancel", S), () => {
+      window.removeEventListener("pointermove", g), window.removeEventListener("pointerup", S), window.removeEventListener("pointercancel", S);
+    };
+  }, [v, e]), /* @__PURE__ */ u.jsxs(
+    "section",
+    {
+      className: C(t?.wrapper, "gp-gradient-slider-wrapper"),
+      ref: D,
+      onPointerDown: K,
+      onPointerMove: Y,
+      onPointerUp: l,
+      onPointerCancel: l,
+      role: "group",
+      "aria-label": "Gradient stops",
+      "data-scope": "gradient-picker",
+      "data-slot": "gradient-slider",
+      "data-format": h,
+      "data-angle": o,
+      "data-value": j,
+      children: [
+        /* @__PURE__ */ u.jsx(
+          "canvas",
+          {
+            ref: k,
+            className: C("gp-gradient-slider-canvas"),
+            "aria-hidden": "true",
+            "data-slot": "canvas"
+          }
+        ),
+        ht.map((g, S) => {
+          const N = n === g.id, U = v === g.id, c = U && i != null ? i : g.position, x = nn(c ?? 0, d.w);
+          return /* @__PURE__ */ u.jsx(
+            "div",
+            {
+              className: C(
+                "gp-gradient-slider-stop",
+                t?.stops?.[S] ?? t?.stop,
+                N && "gp-gradient-slider-stop-active",
+                `gp-gradient-slider-stop-${S + 1}`
+              ),
+              style: { left: `${x}px` },
+              onPointerDown: q(g.id),
+              onClick: tt(g.id),
+              role: "button",
+              tabIndex: 0,
+              "aria-label": `Stop at ${Math.round((c ?? 0) * 10) / 10}%`,
+              "aria-pressed": N,
+              "data-slot": "stop",
+              "data-stop-id": g.id,
+              "data-selected": N ? "true" : void 0,
+              "data-dragging": U ? "true" : void 0,
+              "data-position": c ?? 0,
+              children: /* @__PURE__ */ u.jsx(
+                "div",
+                {
+                  className: C(
+                    "gp-gradient-slider-stop-inner",
+                    `gp-gradient-slider-stop-inner-${S}`
+                  ),
+                  style: rn({
+                    ...g,
+                    position: c ?? g.position
+                  }),
+                  "aria-hidden": "true",
+                  "data-slot": "stop-inner",
+                  "data-color": g.color,
+                  "data-position": c ?? 0
+                }
+              )
+            },
+            g.id
+          );
+        })
+      ]
+    }
+  );
+}), Jt = {
+  "conic-gradient": We,
+  "linear-gradient": Xe,
+  "radial-gradient": Ye
+}, mn = ({
+  allowedFormats: t,
+  icons: e,
+  classNames: r
+}) => {
+  const n = ut(), o = X((p) => p.format), s = X((p) => p.prefixes), a = nt(() => !t || t.length === 0 ? Jt : Object.fromEntries(
+    Object.entries(Jt).filter(
+      ([p]) => t.includes(p)
+    )
+  ), [t]), h = (p) => () => {
+    if (n.setFormat(p), p === "linear-gradient") {
+      n.setPrefixes({ ...s, "linear-gradient": "" });
+      return;
+    }
+    if (p === "radial-gradient") {
+      s?.["radial-gradient"] || n.setPrefixes({ ...s, "radial-gradient": "circle at center" });
+      return;
+    }
+    p === "conic-gradient" && (s?.["conic-gradient"] || n.setPrefixes({ ...s, "conic-gradient": "from 90deg at 50% 50%" }));
+  };
+  return /* @__PURE__ */ u.jsx(
+    "div",
+    {
+      className: C(r?.wrapper, "gp-gradient-formats-wrapper"),
+      role: "tablist",
+      "aria-label": "Gradient formats",
+      "data-scope": "gradient-picker",
+      "data-slot": "gradient-formats",
+      children: Object.entries(a).map(([p, i]) => {
+        const v = p, $ = e?.[v];
+        let y;
+        if ($ == null)
+          y = typeof i == "function" ? /* @__PURE__ */ u.jsx(
+            i,
+            {
+              className: C(
+                r?.button?.icon,
+                r?.buttons?.[v]?.icon,
+                "gp-gradient-formats-icon"
+              ),
+              "aria-hidden": "true"
+            }
+          ) : null;
+        else if (typeof $ == "function") {
+          const j = $;
+          y = /* @__PURE__ */ u.jsx(
+            j,
+            {
+              className: C(
+                r?.button?.icon,
+                r?.buttons?.[v]?.icon,
+                "gp-gradient-formats-icon"
+              ),
+              "aria-hidden": "true"
+            }
+          );
+        } else
+          y = $;
+        const w = o === p;
+        return /* @__PURE__ */ u.jsx(
+          "button",
+          {
+            type: "button",
+            onClick: h(v),
+            className: C(
+              r?.button?.base,
+              w && r?.button?.activeBase,
+              r?.buttons?.[v]?.base,
+              w && r?.buttons?.[v]?.activeBase,
+              "gp-gradient-formats-button",
+              `gp-gradient-formats-button-${p}`,
+              w && "gp-gradient-formats-button-active"
+            ),
+            role: "tab",
+            "aria-selected": w,
+            "aria-label": `${p.replace("-", " ")} format`,
+            tabIndex: w ? 0 : -1,
+            "data-slot": "button",
+            "data-format": p,
+            "data-active": w ? "true" : void 0,
+            "data-value": p,
+            "data-prefix": s?.[v] ?? "",
+            children: y
+          },
+          p
+        );
+      })
+    }
+  );
+}, bn = ({ className: t }) => {
+  const e = X((r) => r.gradient);
+  return /* @__PURE__ */ u.jsx(
+    "section",
+    {
+      className: C(t, "gp-gradient-preview-wrapper"),
+      style: { background: e },
+      role: "img",
+      "aria-label": "Gradient preview",
+      "data-scope": "gradient-picker",
+      "data-slot": "gradient-preview",
+      "data-value": e
+    }
+  );
+}, xn = ee(
+  ({ classNames: t, icon: e, onCopyClick: r }) => {
+    const n = X((a) => a.gradient), o = gt(
+      e,
+      /* @__PURE__ */ u.jsx(ae, { className: C(t?.copyIcon, "gp-gradient-string-copy-icon") }),
+      C(t?.copyIcon, "gp-gradient-string-copy-icon")
+    ), s = () => {
+      navigator.clipboard.writeText(n), r?.();
+    };
+    return /* @__PURE__ */ u.jsxs(
+      "div",
+      {
+        className: C(t?.wrapper, "gp-gradient-string-wrapper"),
+        "data-scope": "gradient-picker",
+        "data-slot": "gradient-string",
+        "data-value": n,
+        children: [
+          /* @__PURE__ */ u.jsx(
+            "p",
+            {
+              className: C(t?.text, "gp-gradient-string-text"),
+              "data-slot": "text",
+              children: n
+            }
+          ),
+          /* @__PURE__ */ u.jsx(
+            "button",
+            {
+              className: C(t?.copyButton, "gp-gradient-string-copy-button"),
+              onClick: s,
+              type: "button",
+              "aria-label": "Copy gradient string",
+              "data-slot": "copy-button",
+              children: o
+            }
+          )
+        ]
+      }
+    );
+  }
+), Lt = /^(?:[0-9a-fA-F]{3}|[0-9a-fA-F]{6})$/, Cn = ({ classNames: t, copyIcon: e, onCopyClick: r }) => {
+  const n = ut(), o = X((d) => d.rgba), s = gt(
+    e,
+    /* @__PURE__ */ u.jsx(ae, { className: C(t?.copy?.icon, "gp-hex-input-copy-icon") }),
+    C(t?.copy?.icon, "gp-hex-input-copy-icon")
+  ), [a, h] = st(
+    It(o)?.replace("#", "") || ""
+  ), [p, i] = st(
+    () => Lt.test(a)
+  ), v = F(null), $ = F(a);
+  W(() => {
+    $.current = a;
+  }, [a]), W(() => {
+    const d = $.current;
+    if (Lt.test(d)) {
+      const D = Et(d);
+      if (D && $t(D, o)) return;
+    }
+    const O = It(o)?.replace("#", "") || "";
+    h(O), i(Lt.test(O));
+  }, [o]);
+  const y = (d) => {
+    const O = d.target.value.replace(/[^0-9a-fA-F]/g, "").slice(0, 6);
+    h(O);
+    const D = Lt.test(O);
+    if (i(D), !D) return;
+    const k = Et(O);
+    k && n.setActiveStopColor(k);
+  }, w = () => {
+    navigator.clipboard.writeText(a), r?.();
+  }, j = () => {
+    v.current?.select();
+  };
+  return /* @__PURE__ */ u.jsxs(
+    "div",
+    {
+      className: C(t?.wrapper, "gp-hex-input-wrapper"),
+      onClick: j,
+      "data-scope": "gradient-picker",
+      "data-slot": "hex-input",
+      "data-invalid": p ? void 0 : "true",
+      "data-value": a,
+      children: [
+        /* @__PURE__ */ u.jsx(
+          "p",
+          {
+            className: C(t?.prefix, "gp-hex-input-prefix"),
+            "aria-hidden": "true",
+            "data-slot": "prefix",
+            children: "#"
+          }
+        ),
+        /* @__PURE__ */ u.jsx(
+          "input",
+          {
+            className: C(
+              t?.input,
+              "gp-hex-input-field",
+              !p && a.length > 0 && "gp-hex-input-field--invalid"
+            ),
+            ref: v,
+            "aria-label": "Hex color",
+            "aria-invalid": !p,
+            type: "text",
+            placeholder: "000000",
+            value: a,
+            onChange: y,
+            "data-slot": "input"
+          }
+        ),
+        /* @__PURE__ */ u.jsx(
+          "button",
+          {
+            onClick: w,
+            className: C(t?.copy?.button, "gp-hex-input-copy-button"),
+            type: "button",
+            "aria-label": "Copy hex color",
+            "data-slot": "copy-button",
+            children: s
+          }
+        )
+      ]
+    }
+  );
+}, Sn = ({ className: t }) => {
+  const e = X((n) => n.rgba), r = It(e) || "";
+  return /* @__PURE__ */ u.jsx(
+    "div",
+    {
+      className: C(t, "gp-hex-preview"),
+      style: { backgroundColor: r },
+      role: "img",
+      "aria-label": "Hex color preview",
+      "data-scope": "gradient-picker",
+      "data-slot": "hex-preview",
+      "data-value": r
+    }
+  );
+}, Kt = ["r", "g", "b", "a"], Ht = (t, e) => {
+  const r = t.match(
+    /rgba?\(\s*(\d{1,3})\s*,\s*(\d{1,3})\s*,\s*(\d{1,3})(?:\s*,\s*(\d*\.?\d+))?\s*\)/
+  );
+  if (!r) return 0;
+  const n = parseInt(r[1], 10), o = parseInt(r[2], 10), s = parseInt(r[3], 10), a = r[4] !== void 0 ? Math.round(parseFloat(r[4]) * 255) : 255;
+  switch (e) {
+    case "r":
+      return n;
+    case "g":
+      return o;
+    case "b":
+      return s;
+    case "a":
+      return a;
+    default:
+      return 0;
+  }
+}, le = (t) => ({
+  r: Ht(t, "r"),
+  g: Ht(t, "g"),
+  b: Ht(t, "b"),
+  a: Ht(t, "a")
+}), Bt = (t, e) => {
+  const r = le(t);
+  return (n) => {
+    const o = { ...r, [e]: n }, s = e === "a" ? n / 255 : o.a / 255;
+    return `rgba(${o.r}, ${o.g}, ${o.b}, ${s})`;
+  };
+}, vn = (t, e) => t.r === e.r && t.g === e.g && t.b === e.b && t.a === e.a, wn = ({ classNames: t, icons: e }) => {
+  const r = ut(), n = X((d) => d.rgba), [o, s] = st({
+    r: 0,
+    g: 0,
+    b: 0,
+    a: 255
+  }), a = F({
+    r: null,
+    g: null,
+    b: null,
+    a: null
+  }), h = F(n), p = F(""), i = nt(() => Kt.reduce(
+    (d, O) => {
+      const D = C(
+        t?.inputs?.[O]?.steppers?.increment?.icon,
+        "gp-rgba-increment-icon",
+        `gp-rgba-${O}-increment-icon`
+      ), k = C(
+        t?.inputs?.[O]?.steppers?.decrement?.icon,
+        "gp-rgba-decrement-icon",
+        `gp-rgba-${O}-decrement-icon`
+      );
+      return {
+        ...d,
+        [O]: {
+          increment: gt(
+            e?.increment,
+            /* @__PURE__ */ u.jsx(
+              mt,
+              {
+                id: `rgba-input-${O}-increment-icon`,
+                className: D
+              }
+            ),
+            D
+          ),
+          decrement: gt(
+            e?.decrement,
+            /* @__PURE__ */ u.jsx(
+              mt,
+              {
+                id: `rgba-input-${O}-decrement-icon`,
+                className: k
+              }
+            ),
+            k
+          )
+        }
+      };
+    },
+    {}
+  ), [e?.increment, e?.decrement, t?.inputs]);
+  W(() => {
+    h.current = n;
+  }, [n]), W(() => {
+    if (p.current && $t(p.current, n))
+      return;
+    p.current = n;
+    const d = le(n);
+    s((O) => vn(O, d) ? O : d);
+  }, [n]);
+  const v = (d) => Math.max(0, Math.min(255, Math.round(d))), $ = (d) => (O) => {
+    const D = Number(O.target.value);
+    if (Number.isNaN(D)) return;
+    const k = Bt(n, d)(v(D));
+    $t(k, n) || r.setActiveStopColor(k);
+  }, y = (d, O) => (D) => {
+    D.preventDefault(), D.stopPropagation();
+    const k = o[d];
+    if (O === "increment" && k >= 255 || O === "decrement" && k <= 0) return;
+    const A = v(k + (O === "increment" ? 1 : -1)), f = Bt(n, d)(A);
+    h.current = f, !$t(f, n) && r.setActiveStopColor(f);
+  }, w = (d) => (O) => {
+    if (O.key !== "ArrowUp" && O.key !== "ArrowDown") return;
+    O.preventDefault(), O.stopPropagation();
+    const D = O.shiftKey ? 10 : 1, k = O.key === "ArrowUp" ? 1 : -1, E = o[d], A = v(E + k * D);
+    if (A === E) return;
+    const f = Bt(n, d)(A);
+    $t(f, n) || (r.setActiveStopColor(f), a.current[d]?.select());
+  }, j = (d) => () => {
+    a.current[d]?.select();
+  };
+  return /* @__PURE__ */ u.jsx(
+    "section",
+    {
+      className: C(t?.wrapper, "gp-rgba-input-wrapper"),
+      "data-scope": "gradient-picker",
+      "data-slot": "rgba-input",
+      children: Kt.map((d) => /* @__PURE__ */ u.jsxs(
+        "div",
+        {
+          className: C(
+            t?.input?.wrapper,
+            "gp-rgba-input-field-wrapper",
+            `gp-rgba-input-field-${d}-wrapper`
+          ),
+          onClick: j(d),
+          "data-slot": "field-wrapper",
+          "data-channel": d,
+          children: [
+            /* @__PURE__ */ u.jsx(
+              "input",
+              {
+                ref: (O) => {
+                  a.current[d] = O;
+                },
+                className: C(
+                  t?.input?.field,
+                  t?.inputs?.[d]?.field,
+                  "gp-rgba-input-field",
+                  `gp-rgba-input-${d}-field`
+                ),
+                value: o[d],
+                inputMode: "numeric",
+                onChange: $(d),
+                onKeyDown: w(d),
+                role: "spinbutton",
+                "aria-label": `${d.toUpperCase()} channel`,
+                "aria-valuemin": 0,
+                "aria-valuemax": 255,
+                "aria-valuenow": o[d],
+                "data-slot": "input",
+                "data-channel": d,
+                "data-value": o[d]
+              }
+            ),
+            /* @__PURE__ */ u.jsxs(
+              "div",
+              {
+                className: C(
+                  t?.inputs?.[d]?.steppers?.wrapper,
+                  "gp-rgba-input-steppers"
+                ),
+                "aria-hidden": "true",
+                "data-slot": "steppers",
+                "data-channel": d,
+                children: [
+                  /* @__PURE__ */ u.jsx(
+                    "button",
+                    {
+                      type: "button",
+                      className: C(
+                        t?.inputs?.[d]?.steppers?.increment?.button,
+                        "gp-rgba-input-stepper-button",
+                        "gp-rgba-input-stepper-increment",
+                        `gp-rgba-input-stepper-increment-${d}`
+                      ),
+                      onClick: y(d, "increment"),
+                      "aria-label": `Increase ${d.toUpperCase()}`,
+                      "data-slot": "increment-button",
+                      "data-channel": d,
+                      children: i[d].increment
+                    }
+                  ),
+                  /* @__PURE__ */ u.jsx(
+                    "button",
+                    {
+                      type: "button",
+                      className: C(
+                        t?.inputs?.[d]?.steppers?.decrement?.button,
+                        "gp-rgba-input-stepper-button",
+                        "gp-rgba-input-stepper-decrement",
+                        `gp-rgba-input-stepper-decrement-${d}`
+                      ),
+                      onClick: y(d, "decrement"),
+                      "aria-label": `Decrease ${d.toUpperCase()}`,
+                      "data-slot": "decrement-button",
+                      "data-channel": d,
+                      children: i[d].decrement
+                    }
+                  )
+                ]
+              }
+            )
+          ]
+        },
+        d
+      ))
+    }
+  );
+}, Rn = ({ className: t }) => {
+  const e = X((r) => r.rgba);
+  return /* @__PURE__ */ u.jsx(
+    "div",
+    {
+      className: C("gp-rgba-preview", t),
+      style: { backgroundColor: e },
+      role: "img",
+      "aria-label": "RGBA color preview",
+      "data-scope": "gradient-picker",
+      "data-slot": "rgba-preview",
+      "data-value": e
+    }
+  );
+}, In = "_wrapper_dqprj_11", Qt = {
+  wrapper: In,
+  "map-item": "_map-item_dqprj_31"
+}, yn = {
+  "linear-gradient": "",
+  "radial-gradient": "circle at center",
+  "conic-gradient": "from 90deg at 50% 50%"
+}, jn = process.env.NODE_ENV !== "production", Pn = (t, e) => {
+  if (jn && t && e)
+    throw new Error("[GradientPicker] Use either `grid` or `children`, not both.");
+}, $n = (t) => {
+  const {
+    gradient: e,
+    onChange: r,
+    updateDelay: n = 0,
+    childrenProps: o,
+    wrapperClassName: s,
+    store: a
+  } = t;
+  Pn("grid" in t, "children" in t);
+  const h = F(null);
+  !a && !h.current && (h.current = se({
+    gradient: e,
+    onGradientChange: r,
+    updateDelay: n,
+    initialStops: re
+  }));
+  const p = a ?? h.current;
+  W(() => p.setGradient(e), [e, p]), W(() => p.setOnGradientChange(r), [r, p]), W(() => p.setUpdateDelay(n), [n, p]);
+  const i = F(!1);
+  W(() => {
+    i.current = !1;
+  }, [p]), W(() => {
+    if (i.current) return;
+    i.current = !0;
+    const w = Wt(e);
+    if (!w) return;
+    const j = Object.keys(w.stops)[0] ?? null;
+    p.setState((d) => {
+      const D = (j ? w.stops[j] : null)?.color ?? "rgba(0, 0, 0, 1)", k = Gt(D, Ft(D)), E = k === 0 && Ft(D) > 300 ? zt : k;
+      return {
+        ...d,
+        format: w.format,
+        prefixes: {
+          ...d.prefixes,
+          [w.format]: w.prefix || d.prefixes[w.format] || yn[w.format]
+        },
+        stops: w.stops,
+        stopsOrder: Object.keys(w.stops),
+        activeStopId: j,
+        rgba: D,
+        hue: E
+      };
+    });
+  }, [e, p]);
+  const v = nt(
+    () => ({
+      "alpha-slider": /* @__PURE__ */ u.jsx(un, { ...o?.alphaSlider }),
+      "alpha-input": /* @__PURE__ */ u.jsx(gn, { ...o?.alphaInput }),
+      "color-square": /* @__PURE__ */ u.jsx(Be, { ...o?.colorSquare }),
+      "gradient-slider": /* @__PURE__ */ u.jsx(hn, { classNames: o?.gradientSlider?.classNames }),
+      "hue-slider": /* @__PURE__ */ u.jsx(qe, { ...o?.hueSlider }),
+      "stop-delete": /* @__PURE__ */ u.jsx(Ke, { ...o?.deleteStop }),
+      "gradient-formats": /* @__PURE__ */ u.jsx(mn, { ...o?.gradientFormats }),
+      "eye-dropper": /* @__PURE__ */ u.jsx(Qe, { ...o?.eyeDropper }),
+      "angle-input": /* @__PURE__ */ u.jsx(fn, { ...o?.angleInput }),
+      "gradient-preview": /* @__PURE__ */ u.jsx(bn, { ...o?.gradientPreview }),
+      "stop-position": /* @__PURE__ */ u.jsx(ln, { ...o?.stopPosition }),
+      "gradient-string": /* @__PURE__ */ u.jsx(xn, { ...o?.gradientString }),
+      "hex-input": /* @__PURE__ */ u.jsx(Cn, { ...o?.hexInput }),
+      "hex-preview": /* @__PURE__ */ u.jsx(Sn, { ...o?.hexPreview }),
+      "rgba-input": /* @__PURE__ */ u.jsx(wn, { ...o?.rgbaInput }),
+      "rgba-preview": /* @__PURE__ */ u.jsx(Rn, { ...o?.rgbaPreview })
+    }),
+    [o]
+  ), $ = (w, j) => typeof w == "string" ? /* @__PURE__ */ u.jsx(ge, { children: v[w] }, j) : /* @__PURE__ */ u.jsx("div", { className: C(w.className, Qt["map-item"]), children: w.children.map((d, O) => $(d, `${j.toString()}-${O}`)) }, j), y = nt(() => "grid" in t ? t.grid?.map((w, j) => $(w, j)) : t.children, [t.grid, t.children, v]);
+  return /* @__PURE__ */ u.jsx(Ue, { store: p, children: /* @__PURE__ */ u.jsx("section", { className: C(Qt.wrapper, s), children: y }) });
+};
+export {
+  gn as AlphaInput,
+  un as AlphaSlider,
+  fn as AngleInput,
+  Kt as CHANNELS,
+  Be as ColorSquare,
+  Ke as DeleteStop,
+  Qe as EyeDropper,
+  Jt as GRADIENT_FORMATS,
+  $n as GradientPicker,
+  bn as GradientPreview,
+  hn as GradientSlider,
+  xn as GradientString,
+  Lt as HEX_VALID_RE,
+  zt as HUE_MAX,
+  Cn as HexInput,
+  Sn as HexPreview,
+  qe as HueSlider,
+  at as MIN_GAP,
+  mn as PickGradientFormats,
+  ft as R,
+  wn as RgbaInput,
+  Rn as RgbaPreview,
+  tn as STOP_SIZE,
+  ln as StopPosition,
+  Ut as applyJump,
+  He as buildGradientString,
+  vn as channelsEqual,
+  _t as clampPercent,
+  bt as coerceToRgba,
+  an as enforceGapWithEdge,
+  Vt as ensureOrder,
+  Ht as getChannelFromRgba,
+  le as getChannelsFromRgba,
+  rn as getStopInnerStyle,
+  De as isHex,
+  _e as isRgba,
+  nn as leftPxFromPercent,
+  en as makeId,
+  cn as makePositionsSignature,
+  Le as nextStopId,
+  Dt as normalizeGradientString,
+  pn as parseAlphaFromRgba,
+  Mn as parseLinearAngle,
+  on as sameIds,
+  dn as setAlphaInRgba,
+  ce as stopGap,
+  sn as stopsEquivalentIgnoringIds,
+  Bt as updateRgbaChannel,
+  kn as useGradient
+};