@urcolor/vue 0.0.1

package/dist/index.js

@@ -0,0 +1,2852 @@
+import { getCurrentScope as Tn, onScopeDispose as zn, watch as ae, computed as h, toValue as gt, shallowRef as je, getCurrentInstance as An, onMounted as Te, ref as q, provide as Vn, inject as En, defineComponent as B, h as zt, watchEffect as Nn, markRaw as Dn, openBlock as D, createBlock as P, unref as s, mergeProps as yt, withCtx as N, renderSlot as O, toRefs as xt, createVNode as Ge, createCommentVNode as jt, normalizeStyle as Ue, onUnmounted as Mt, onBeforeUnmount as Gt, createElementVNode as Ut, toRef as At, nextTick as Pn, withModifiers as xe, withKeys as Pe } from "vue";
+import { createContext as ze, Slot as Vt, Primitive as W, useDirection as Wt, useForwardExpose as H, VisuallyHidden as Zt, SliderRoot as Xn, SliderTrack as In, SliderRange as Bn, SliderThumb as Yn, RovingFocusGroup as Fn, RovingFocusItem as On } from "reka-ui";
+import { Color as Q } from "internationalized-color";
+import { colorSpaces as Hn, getChannelConfig as pe, culoriToDisplay as Be, displayToCulori as Ye, sampleBilinearGrid as Ln, drawGradient as Kn, sampleChannelGrid as qn, interpolateStops as jn, drawLinearGradient as Et } from "@urcolor/core";
+function Gn(t, e) {
+  return Tn() ? (zn(t, e), !0) : !1;
+}
+const Un = typeof window < "u" && typeof document < "u";
+typeof WorkerGlobalScope < "u" && globalThis instanceof WorkerGlobalScope;
+const Wn = Un ? window : void 0;
+function Fe(t) {
+  var e;
+  const n = gt(t);
+  return (e = n?.$el) !== null && e !== void 0 ? e : n;
+}
+// @__NO_SIDE_EFFECTS__
+function Jt() {
+  const t = je(!1), e = An();
+  return e && Te(() => {
+    t.value = !0;
+  }, e), t;
+}
+// @__NO_SIDE_EFFECTS__
+function Zn(t) {
+  const e = /* @__PURE__ */ Jt();
+  return h(() => (e.value, !!t()));
+}
+function Qt(t, e, n = {}) {
+  const { window: a = Wn, ...o } = n;
+  let l;
+  const r = /* @__PURE__ */ Zn(() => a && "ResizeObserver" in a), i = () => {
+    l && (l.disconnect(), l = void 0);
+  }, u = ae(h(() => {
+    const f = gt(t);
+    return Array.isArray(f) ? f.map((d) => Fe(d)) : [Fe(f)];
+  }), (f) => {
+    if (i(), r.value && a) {
+      l = new ResizeObserver(e);
+      for (const d of f) d && l.observe(d, o);
+    }
+  }, {
+    immediate: !0,
+    flush: "post"
+  }), p = () => {
+    i(), u();
+  };
+  return Gn(p), {
+    isSupported: r,
+    stop: p
+  };
+}
+const [en, Jn] = ze("ColorAreaThumb");
+function Re(t, e = Number.NEGATIVE_INFINITY, n = Number.POSITIVE_INFINITY) {
+  return Math.min(n, Math.max(e, t));
+}
+function Qn(t) {
+  return (String(t).split(".")[1] || "").length;
+}
+function ea(t, e) {
+  const n = 10 ** e;
+  return Math.round(t * n) / n;
+}
+function pt(t, e, n, a) {
+  const o = Qn(a), l = ea(Math.round((t - e) / a) * a + e, o);
+  return Re(l, e, n);
+}
+function ht(t, e) {
+  return (n) => {
+    if (t[0] === t[1] || e[0] === e[1])
+      return e[0];
+    const a = (e[1] - e[0]) / (t[1] - t[0]);
+    return e[0] + a * (n - t[0]);
+  };
+}
+function Oe(t, e, n) {
+  const l = 100 / (n - e) * (t - e);
+  return Re(l, 0, 100);
+}
+function ta(t, e) {
+  return e > 2 ? `Value ${t + 1} of ${e}` : e === 2 ? ["Minimum", "Maximum"][t] : void 0;
+}
+function Nt(t, e, n) {
+  const a = t / 2, l = ht([0, 50], [0, a]);
+  return (a - l(e) * n) * n;
+}
+function na(t) {
+  return t.slice(0, -1).map((e, n) => t[n + 1] - e);
+}
+function aa(t, e) {
+  if (e > 0) {
+    const n = na(t);
+    return Math.min(...n) >= e;
+  }
+  return !0;
+}
+function oa(t, e, n, a, o, l) {
+  if (t.length === 0)
+    return -1;
+  if (t.length === 1)
+    return 0;
+  const r = a - n || 1, i = l - o || 1, u = t.map((f) => {
+    const d = (f[0] - e[0]) / r, g = (f[1] - e[1]) / i;
+    return Math.sqrt(d * d + g * g);
+  }), p = Math.min(...u);
+  return u.indexOf(p);
+}
+const la = ["PageUp", "PageDown"], tn = ["ArrowUp", "ArrowDown", "ArrowLeft", "ArrowRight"];
+function nn(t) {
+  return h(() => gt(t) ? !!Fe(t)?.closest("form") : !0);
+}
+function ra(t) {
+  const e = q(), n = h(() => e.value?.width ?? 0), a = h(() => e.value?.height ?? 0);
+  return Te(() => {
+    const o = Fe(t);
+    o ? (e.value = { width: o.offsetWidth, height: o.offsetHeight }, new ResizeObserver((r) => {
+      if (!Array.isArray(r) || !r.length)
+        return;
+      const i = r[0];
+      let u, p;
+      if ("borderBoxSize" in i) {
+        const f = i.borderBoxSize, d = Array.isArray(f) ? f[0] : f;
+        u = d.inlineSize, p = d.blockSize;
+      } else
+        u = o.offsetWidth, p = o.offsetHeight;
+      e.value = { width: u, height: p };
+    }).observe(o, { box: "border-box" })) : e.value = void 0;
+  }), { width: n, height: a };
+}
+const Dt = "data-reka-collection-item";
+function an(t = {}) {
+  const { key: e = "", isProvider: n = !1 } = t, a = `${e}CollectionProvider`;
+  let o;
+  if (n) {
+    const f = q(/* @__PURE__ */ new Map());
+    o = { collectionRef: q(), itemMap: f }, Vn(a, o);
+  } else
+    o = En(a);
+  const l = (f = !1) => {
+    const d = o.collectionRef.value;
+    if (!d)
+      return [];
+    const g = Array.from(d.querySelectorAll(`[${Dt}]`)), $ = Array.from(o.itemMap.value.values()).sort(
+      (w, Y) => g.indexOf(w.ref) - g.indexOf(Y.ref)
+    );
+    return f ? $ : $.filter((w) => w.ref.dataset.disabled !== "");
+  }, r = B({
+    name: "CollectionSlot",
+    inheritAttrs: !1,
+    setup(f, { slots: d, attrs: g }) {
+      const { primitiveElement: S, currentElement: $ } = Pt();
+      return ae($, () => {
+        o.collectionRef.value = $.value;
+      }), () => zt(Vt, { ref: S, ...g }, d);
+    }
+  }), i = B({
+    name: "CollectionItem",
+    inheritAttrs: !1,
+    props: {
+      value: {
+        type: [String, Number, Boolean, Object, Array, Function],
+        default: void 0,
+        validator: () => !0
+      }
+    },
+    setup(f, { slots: d, attrs: g }) {
+      const { primitiveElement: S, currentElement: $ } = Pt();
+      return Nn((w) => {
+        if ($.value) {
+          const Y = Dn($.value);
+          o.itemMap.value.set(Y, { ref: $.value, value: f.value }), w(() => o.itemMap.value.delete(Y));
+        }
+      }), () => zt(Vt, { ...g, [Dt]: "", ref: S }, d);
+    }
+  }), u = h(() => Array.from(o.itemMap.value.values())), p = h(() => o.itemMap.value.size);
+  return { getItems: l, reactiveItems: u, itemMapSize: p, CollectionSlot: r, CollectionItem: i };
+}
+function Pt() {
+  const t = q();
+  return { primitiveElement: (n) => {
+    if (n) {
+      const a = n instanceof Element ? n : n?.$el;
+      a instanceof Element && (t.value = a);
+    }
+  }, currentElement: t };
+}
+const ia = /* @__PURE__ */ B({
+  __name: "ColorAreaImpl",
+  props: {
+    as: { default: "span" },
+    asChild: { type: Boolean }
+  },
+  emits: ["slideStart", "slideMove", "slideEnd", "homeKeyDown", "endKeyDown", "pageUpKeyDown", "pageDownKeyDown", "stepKeyDown"],
+  setup(t, { emit: e }) {
+    const n = t, a = e, o = me();
+    return (l, r) => (D(), P(s(W), yt({ "data-slider-area-impl": "" }, n, {
+      onKeydown: r[0] || (r[0] = (i) => {
+        i.key === "Home" ? (a("homeKeyDown", i), i.preventDefault()) : i.key === "End" ? (a("endKeyDown", i), i.preventDefault()) : i.key === "PageUp" ? (a("pageUpKeyDown", i), i.preventDefault()) : i.key === "PageDown" ? (a("pageDownKeyDown", i), i.preventDefault()) : s(la).concat(s(tn)).includes(i.key) && (a("stepKeyDown", i), i.preventDefault());
+      }),
+      onPointerdown: r[1] || (r[1] = (i) => {
+        const u = i.target;
+        u.setPointerCapture(i.pointerId), i.preventDefault(), s(o).thumbXElements.value.includes(u) || s(o).thumbYElements.value.includes(u) ? u.focus() : a("slideStart", i);
+      }),
+      onPointermove: r[2] || (r[2] = (i) => {
+        i.target.hasPointerCapture(i.pointerId) && a("slideMove", i);
+      }),
+      onPointerup: r[3] || (r[3] = (i) => {
+        const u = i.target;
+        u.hasPointerCapture(i.pointerId) && (u.releasePointerCapture(i.pointerId), a("slideEnd", i));
+      })
+    }), {
+      default: N(() => [
+        O(l.$slots, "default")
+      ]),
+      _: 3
+    }, 16));
+  }
+}), on = (t, e) => {
+  if (typeof t == "number") {
+    if (e === 3)
+      return {
+        mode: "rgb",
+        r: (t >> 8 & 15 | t >> 4 & 240) / 255,
+        g: (t >> 4 & 15 | t & 240) / 255,
+        b: (t & 15 | t << 4 & 240) / 255
+      };
+    if (e === 4)
+      return {
+        mode: "rgb",
+        r: (t >> 12 & 15 | t >> 8 & 240) / 255,
+        g: (t >> 8 & 15 | t >> 4 & 240) / 255,
+        b: (t >> 4 & 15 | t & 240) / 255,
+        alpha: (t & 15 | t << 4 & 240) / 255
+      };
+    if (e === 6)
+      return {
+        mode: "rgb",
+        r: (t >> 16 & 255) / 255,
+        g: (t >> 8 & 255) / 255,
+        b: (t & 255) / 255
+      };
+    if (e === 8)
+      return {
+        mode: "rgb",
+        r: (t >> 24 & 255) / 255,
+        g: (t >> 16 & 255) / 255,
+        b: (t >> 8 & 255) / 255,
+        alpha: (t & 255) / 255
+      };
+  }
+}, ua = {
+  aliceblue: 15792383,
+  antiquewhite: 16444375,
+  aqua: 65535,
+  aquamarine: 8388564,
+  azure: 15794175,
+  beige: 16119260,
+  bisque: 16770244,
+  black: 0,
+  blanchedalmond: 16772045,
+  blue: 255,
+  blueviolet: 9055202,
+  brown: 10824234,
+  burlywood: 14596231,
+  cadetblue: 6266528,
+  chartreuse: 8388352,
+  chocolate: 13789470,
+  coral: 16744272,
+  cornflowerblue: 6591981,
+  cornsilk: 16775388,
+  crimson: 14423100,
+  cyan: 65535,
+  darkblue: 139,
+  darkcyan: 35723,
+  darkgoldenrod: 12092939,
+  darkgray: 11119017,
+  darkgreen: 25600,
+  darkgrey: 11119017,
+  darkkhaki: 12433259,
+  darkmagenta: 9109643,
+  darkolivegreen: 5597999,
+  darkorange: 16747520,
+  darkorchid: 10040012,
+  darkred: 9109504,
+  darksalmon: 15308410,
+  darkseagreen: 9419919,
+  darkslateblue: 4734347,
+  darkslategray: 3100495,
+  darkslategrey: 3100495,
+  darkturquoise: 52945,
+  darkviolet: 9699539,
+  deeppink: 16716947,
+  deepskyblue: 49151,
+  dimgray: 6908265,
+  dimgrey: 6908265,
+  dodgerblue: 2003199,
+  firebrick: 11674146,
+  floralwhite: 16775920,
+  forestgreen: 2263842,
+  fuchsia: 16711935,
+  gainsboro: 14474460,
+  ghostwhite: 16316671,
+  gold: 16766720,
+  goldenrod: 14329120,
+  gray: 8421504,
+  green: 32768,
+  greenyellow: 11403055,
+  grey: 8421504,
+  honeydew: 15794160,
+  hotpink: 16738740,
+  indianred: 13458524,
+  indigo: 4915330,
+  ivory: 16777200,
+  khaki: 15787660,
+  lavender: 15132410,
+  lavenderblush: 16773365,
+  lawngreen: 8190976,
+  lemonchiffon: 16775885,
+  lightblue: 11393254,
+  lightcoral: 15761536,
+  lightcyan: 14745599,
+  lightgoldenrodyellow: 16448210,
+  lightgray: 13882323,
+  lightgreen: 9498256,
+  lightgrey: 13882323,
+  lightpink: 16758465,
+  lightsalmon: 16752762,
+  lightseagreen: 2142890,
+  lightskyblue: 8900346,
+  lightslategray: 7833753,
+  lightslategrey: 7833753,
+  lightsteelblue: 11584734,
+  lightyellow: 16777184,
+  lime: 65280,
+  limegreen: 3329330,
+  linen: 16445670,
+  magenta: 16711935,
+  maroon: 8388608,
+  mediumaquamarine: 6737322,
+  mediumblue: 205,
+  mediumorchid: 12211667,
+  mediumpurple: 9662683,
+  mediumseagreen: 3978097,
+  mediumslateblue: 8087790,
+  mediumspringgreen: 64154,
+  mediumturquoise: 4772300,
+  mediumvioletred: 13047173,
+  midnightblue: 1644912,
+  mintcream: 16121850,
+  mistyrose: 16770273,
+  moccasin: 16770229,
+  navajowhite: 16768685,
+  navy: 128,
+  oldlace: 16643558,
+  olive: 8421376,
+  olivedrab: 7048739,
+  orange: 16753920,
+  orangered: 16729344,
+  orchid: 14315734,
+  palegoldenrod: 15657130,
+  palegreen: 10025880,
+  paleturquoise: 11529966,
+  palevioletred: 14381203,
+  papayawhip: 16773077,
+  peachpuff: 16767673,
+  peru: 13468991,
+  pink: 16761035,
+  plum: 14524637,
+  powderblue: 11591910,
+  purple: 8388736,
+  // Added in CSS Colors Level 4:
+  // https://drafts.csswg.org/css-color/#changes-from-3
+  rebeccapurple: 6697881,
+  red: 16711680,
+  rosybrown: 12357519,
+  royalblue: 4286945,
+  saddlebrown: 9127187,
+  salmon: 16416882,
+  sandybrown: 16032864,
+  seagreen: 3050327,
+  seashell: 16774638,
+  sienna: 10506797,
+  silver: 12632256,
+  skyblue: 8900331,
+  slateblue: 6970061,
+  slategray: 7372944,
+  slategrey: 7372944,
+  snow: 16775930,
+  springgreen: 65407,
+  steelblue: 4620980,
+  tan: 13808780,
+  teal: 32896,
+  thistle: 14204888,
+  tomato: 16737095,
+  turquoise: 4251856,
+  violet: 15631086,
+  wheat: 16113331,
+  white: 16777215,
+  whitesmoke: 16119285,
+  yellow: 16776960,
+  yellowgreen: 10145074
+}, sa = (t) => on(ua[t.toLowerCase()], 6), da = /^#?([0-9a-f]{8}|[0-9a-f]{6}|[0-9a-f]{4}|[0-9a-f]{3})$/i, fa = (t) => {
+  let e;
+  return (e = t.match(da)) ? on(parseInt(e[1], 16), e[1].length) : void 0;
+}, he = "([+-]?\\d*\\.?\\d+(?:[eE][+-]?\\d+)?)", _e = `${he}%`, Ct = `(?:${he}%|${he})`, ca = `(?:${he}(deg|grad|rad|turn)|${he})`, Ce = "\\s*,\\s*", pa = new RegExp(
+  `^rgba?\\(\\s*${he}${Ce}${he}${Ce}${he}\\s*(?:,\\s*${Ct}\\s*)?\\)$`
+), ha = new RegExp(
+  `^rgba?\\(\\s*${_e}${Ce}${_e}${Ce}${_e}\\s*(?:,\\s*${Ct}\\s*)?\\)$`
+), va = (t) => {
+  let e = { mode: "rgb" }, n;
+  if (n = t.match(pa))
+    n[1] !== void 0 && (e.r = n[1] / 255), n[2] !== void 0 && (e.g = n[2] / 255), n[3] !== void 0 && (e.b = n[3] / 255);
+  else if (n = t.match(ha))
+    n[1] !== void 0 && (e.r = n[1] / 100), n[2] !== void 0 && (e.g = n[2] / 100), n[3] !== void 0 && (e.b = n[3] / 100);
+  else
+    return;
+  return n[4] !== void 0 ? e.alpha = Math.max(0, Math.min(1, n[4] / 100)) : n[5] !== void 0 && (e.alpha = Math.max(0, Math.min(1, +n[5]))), e;
+}, ma = (t, e) => t === void 0 ? void 0 : typeof t != "object" ? _a(t) : t.mode !== void 0 ? t : e ? { ...t, mode: e } : void 0, ba = (t = "rgb") => (e) => (e = ma(e, t)) !== void 0 ? (
+  // if the color's mode corresponds to our target mode
+  e.mode === t ? (
+    // then just return the color
+    e
+  ) : (
+    // otherwise check to see if we have a dedicated
+    // converter for the target mode
+    le[e.mode][t] ? (
+      // and return its result...
+      le[e.mode][t](e)
+    ) : (
+      // ...otherwise pass through RGB as an intermediary step.
+      // if the target mode is RGB...
+      t === "rgb" ? (
+        // just return the RGB
+        le[e.mode].rgb(e)
+      ) : (
+        // otherwise convert color.mode -> RGB -> target_mode
+        le.rgb[t](le[e.mode].rgb(e))
+      )
+    )
+  )
+) : void 0, le = {}, ln = {}, He = [], rn = {}, ga = (t) => t, ya = (t) => (le[t.mode] = {
+  ...le[t.mode],
+  ...t.toMode
+}, Object.keys(t.fromMode || {}).forEach((e) => {
+  le[e] || (le[e] = {}), le[e][t.mode] = t.fromMode[e];
+}), t.ranges || (t.ranges = {}), t.difference || (t.difference = {}), t.channels.forEach((e) => {
+  if (t.ranges[e] === void 0 && (t.ranges[e] = [0, 1]), !t.interpolate[e])
+    throw new Error(`Missing interpolator for: ${e}`);
+  typeof t.interpolate[e] == "function" && (t.interpolate[e] = {
+    use: t.interpolate[e]
+  }), t.interpolate[e].fixup || (t.interpolate[e].fixup = ga);
+}), ln[t.mode] = t, (t.parse || []).forEach((e) => {
+  Ma(e, t.mode);
+}), ba(t.mode)), xa = (t) => ln[t], Ma = (t, e) => {
+  if (typeof t == "string") {
+    if (!e)
+      throw new Error("'mode' required when 'parser' is a string");
+    rn[t] = e;
+  } else typeof t == "function" && He.indexOf(t) < 0 && He.push(t);
+}, vt = /[^\x00-\x7F]|[a-zA-Z_]/, Ca = /[^\x00-\x7F]|[-\w]/, c = {
+  Function: "function",
+  Ident: "ident",
+  Number: "number",
+  Percentage: "percentage",
+  ParenClose: ")",
+  None: "none",
+  Hue: "hue",
+  Alpha: "alpha"
+};
+let y = 0;
+function Xe(t) {
+  let e = t[y], n = t[y + 1];
+  return e === "-" || e === "+" ? /\d/.test(n) || n === "." && /\d/.test(t[y + 2]) : e === "." ? /\d/.test(n) : /\d/.test(e);
+}
+function mt(t) {
+  if (y >= t.length)
+    return !1;
+  let e = t[y];
+  if (vt.test(e))
+    return !0;
+  if (e === "-") {
+    if (t.length - y < 2)
+      return !1;
+    let n = t[y + 1];
+    return !!(n === "-" || vt.test(n));
+  }
+  return !1;
+}
+const wa = {
+  deg: 1,
+  rad: 180 / Math.PI,
+  grad: 9 / 10,
+  turn: 360
+};
+function ke(t) {
+  let e = "";
+  if ((t[y] === "-" || t[y] === "+") && (e += t[y++]), e += Ie(t), t[y] === "." && /\d/.test(t[y + 1]) && (e += t[y++] + Ie(t)), (t[y] === "e" || t[y] === "E") && ((t[y + 1] === "-" || t[y + 1] === "+") && /\d/.test(t[y + 2]) ? e += t[y++] + t[y++] + Ie(t) : /\d/.test(t[y + 1]) && (e += t[y++] + Ie(t))), mt(t)) {
+    let n = Le(t);
+    return n === "deg" || n === "rad" || n === "turn" || n === "grad" ? { type: c.Hue, value: e * wa[n] } : void 0;
+  }
+  return t[y] === "%" ? (y++, { type: c.Percentage, value: +e }) : { type: c.Number, value: +e };
+}
+function Ie(t) {
+  let e = "";
+  for (; /\d/.test(t[y]); )
+    e += t[y++];
+  return e;
+}
+function Le(t) {
+  let e = "";
+  for (; y < t.length && Ca.test(t[y]); )
+    e += t[y++];
+  return e;
+}
+function $a(t) {
+  let e = Le(t);
+  return t[y] === "(" ? (y++, { type: c.Function, value: e }) : e === "none" ? { type: c.None, value: void 0 } : { type: c.Ident, value: e };
+}
+function Sa(t = "") {
+  let e = t.trim(), n = [], a;
+  for (y = 0; y < e.length; ) {
+    if (a = e[y++], a === `
+` || a === "	" || a === " ") {
+      for (; y < e.length && (e[y] === `
+` || e[y] === "	" || e[y] === " "); )
+        y++;
+      continue;
+    }
+    if (a === ",")
+      return;
+    if (a === ")") {
+      n.push({ type: c.ParenClose });
+      continue;
+    }
+    if (a === "+") {
+      if (y--, Xe(e)) {
+        n.push(ke(e));
+        continue;
+      }
+      return;
+    }
+    if (a === "-") {
+      if (y--, Xe(e)) {
+        n.push(ke(e));
+        continue;
+      }
+      if (mt(e)) {
+        n.push({ type: c.Ident, value: Le(e) });
+        continue;
+      }
+      return;
+    }
+    if (a === ".") {
+      if (y--, Xe(e)) {
+        n.push(ke(e));
+        continue;
+      }
+      return;
+    }
+    if (a === "/") {
+      for (; y < e.length && (e[y] === `
+` || e[y] === "	" || e[y] === " "); )
+        y++;
+      let o;
+      if (Xe(e) && (o = ke(e), o.type !== c.Hue)) {
+        n.push({ type: c.Alpha, value: o });
+        continue;
+      }
+      if (mt(e) && Le(e) === "none") {
+        n.push({
+          type: c.Alpha,
+          value: { type: c.None, value: void 0 }
+        });
+        continue;
+      }
+      return;
+    }
+    if (/\d/.test(a)) {
+      y--, n.push(ke(e));
+      continue;
+    }
+    if (vt.test(a)) {
+      y--, n.push($a(e));
+      continue;
+    }
+    return;
+  }
+  return n;
+}
+function ka(t) {
+  t._i = 0;
+  let e = t[t._i++];
+  if (!e || e.type !== c.Function || e.value !== "color" || (e = t[t._i++], e.type !== c.Ident))
+    return;
+  const n = rn[e.value];
+  if (!n)
+    return;
+  const a = { mode: n }, o = un(t, !1);
+  if (!o)
+    return;
+  const l = xa(n).channels;
+  for (let r = 0, i, u; r < l.length; r++)
+    i = o[r], u = l[r], i.type !== c.None && (a[u] = i.type === c.Number ? i.value : i.value / 100, u === "alpha" && (a[u] = Math.max(0, Math.min(1, a[u]))));
+  return a;
+}
+function un(t, e) {
+  const n = [];
+  let a;
+  for (; t._i < t.length; ) {
+    if (a = t[t._i++], a.type === c.None || a.type === c.Number || a.type === c.Alpha || a.type === c.Percentage || e && a.type === c.Hue) {
+      n.push(a);
+      continue;
+    }
+    if (a.type === c.ParenClose) {
+      if (t._i < t.length)
+        return;
+      continue;
+    }
+    return;
+  }
+  if (!(n.length < 3 || n.length > 4)) {
+    if (n.length === 4) {
+      if (n[3].type !== c.Alpha)
+        return;
+      n[3] = n[3].value;
+    }
+    return n.length === 3 && n.push({ type: c.None, value: void 0 }), n.every((o) => o.type !== c.Alpha) ? n : void 0;
+  }
+}
+function Ra(t, e) {
+  t._i = 0;
+  let n = t[t._i++];
+  if (!n || n.type !== c.Function)
+    return;
+  let a = un(t, e);
+  if (a)
+    return a.unshift(n.value), a;
+}
+const _a = (t) => {
+  if (typeof t != "string")
+    return;
+  const e = Sa(t), n = e ? Ra(e, !0) : void 0;
+  let a, o = 0, l = He.length;
+  for (; o < l; )
+    if ((a = He[o++](t, n)) !== void 0)
+      return a;
+  return e ? ka(e) : void 0;
+};
+function Ta(t, e) {
+  if (!e || e[0] !== "rgb" && e[0] !== "rgba")
+    return;
+  const n = { mode: "rgb" }, [, a, o, l, r] = e;
+  if (!(a.type === c.Hue || o.type === c.Hue || l.type === c.Hue))
+    return a.type !== c.None && (n.r = a.type === c.Number ? a.value / 255 : a.value / 100), o.type !== c.None && (n.g = o.type === c.Number ? o.value / 255 : o.value / 100), l.type !== c.None && (n.b = l.type === c.Number ? l.value / 255 : l.value / 100), r.type !== c.None && (n.alpha = Math.min(
+      1,
+      Math.max(
+        0,
+        r.type === c.Number ? r.value : r.value / 100
+      )
+    )), n;
+}
+const za = (t) => t === "transparent" ? { mode: "rgb", r: 0, g: 0, b: 0, alpha: 0 } : void 0, Aa = (t, e, n) => t + n * (e - t), Va = (t) => {
+  let e = [];
+  for (let n = 0; n < t.length - 1; n++) {
+    let a = t[n], o = t[n + 1];
+    a === void 0 && o === void 0 ? e.push(void 0) : a !== void 0 && o !== void 0 ? e.push([a, o]) : e.push(a !== void 0 ? [a, a] : [o, o]);
+  }
+  return e;
+}, Ea = (t) => (e) => {
+  let n = Va(e);
+  return (a) => {
+    let o = a * n.length, l = a >= 1 ? n.length - 1 : Math.max(Math.floor(o), 0), r = n[l];
+    return r === void 0 ? void 0 : t(r[0], r[1], o - l);
+  };
+}, _ = Ea(Aa), ve = (t) => {
+  let e = !1, n = t.map((a) => a !== void 0 ? (e = !0, a) : 1);
+  return e ? n : t;
+}, we = {
+  mode: "rgb",
+  channels: ["r", "g", "b", "alpha"],
+  parse: [
+    Ta,
+    fa,
+    va,
+    sa,
+    za,
+    "srgb"
+  ],
+  serialize: "srgb",
+  interpolate: {
+    r: _,
+    g: _,
+    b: _,
+    alpha: { use: _, fixup: ve }
+  },
+  gamut: !0,
+  white: { r: 1, g: 1, b: 1 },
+  black: { r: 0, g: 0, b: 0 }
+}, at = (t = 0) => Math.pow(Math.abs(t), 563 / 256) * Math.sign(t), Xt = (t) => {
+  let e = at(t.r), n = at(t.g), a = at(t.b), o = {
+    mode: "xyz65",
+    x: 0.5766690429101305 * e + 0.1855582379065463 * n + 0.1882286462349947 * a,
+    y: 0.297344975250536 * e + 0.6273635662554661 * n + 0.0752914584939979 * a,
+    z: 0.0270313613864123 * e + 0.0706888525358272 * n + 0.9913375368376386 * a
+  };
+  return t.alpha !== void 0 && (o.alpha = t.alpha), o;
+}, ot = (t) => Math.pow(Math.abs(t), 256 / 563) * Math.sign(t), It = ({ x: t, y: e, z: n, alpha: a }) => {
+  t === void 0 && (t = 0), e === void 0 && (e = 0), n === void 0 && (n = 0);
+  let o = {
+    mode: "a98",
+    r: ot(
+      t * 2.0415879038107465 - e * 0.5650069742788597 - 0.3447313507783297 * n
+    ),
+    g: ot(
+      t * -0.9692436362808798 + e * 1.8759675015077206 + 0.0415550574071756 * n
+    ),
+    b: ot(
+      t * 0.0134442806320312 - e * 0.1183623922310184 + 1.0151749943912058 * n
+    )
+  };
+  return a !== void 0 && (o.alpha = a), o;
+}, lt = (t = 0) => {
+  const e = Math.abs(t);
+  return e <= 0.04045 ? t / 12.92 : (Math.sign(t) || 1) * Math.pow((e + 0.055) / 1.055, 2.4);
+}, Ae = ({ r: t, g: e, b: n, alpha: a }) => {
+  let o = {
+    mode: "lrgb",
+    r: lt(t),
+    g: lt(e),
+    b: lt(n)
+  };
+  return a !== void 0 && (o.alpha = a), o;
+}, We = (t) => {
+  let { r: e, g: n, b: a, alpha: o } = Ae(t), l = {
+    mode: "xyz65",
+    x: 0.4123907992659593 * e + 0.357584339383878 * n + 0.1804807884018343 * a,
+    y: 0.2126390058715102 * e + 0.715168678767756 * n + 0.0721923153607337 * a,
+    z: 0.0193308187155918 * e + 0.119194779794626 * n + 0.9505321522496607 * a
+  };
+  return o !== void 0 && (l.alpha = o), l;
+}, rt = (t = 0) => {
+  const e = Math.abs(t);
+  return e > 31308e-7 ? (Math.sign(t) || 1) * (1.055 * Math.pow(e, 1 / 2.4) - 0.055) : t * 12.92;
+}, Ve = ({ r: t, g: e, b: n, alpha: a }, o = "rgb") => {
+  let l = {
+    mode: o,
+    r: rt(t),
+    g: rt(e),
+    b: rt(n)
+  };
+  return a !== void 0 && (l.alpha = a), l;
+}, Ze = ({ x: t, y: e, z: n, alpha: a }) => {
+  t === void 0 && (t = 0), e === void 0 && (e = 0), n === void 0 && (n = 0);
+  let o = Ve({
+    r: t * 3.2409699419045226 - e * 1.537383177570094 - 0.4986107602930034 * n,
+    g: t * -0.9692436362808796 + e * 1.8759675015077204 + 0.0415550574071756 * n,
+    b: t * 0.0556300796969936 - e * 0.2039769588889765 + 1.0569715142428784 * n
+  });
+  return a !== void 0 && (o.alpha = a), o;
+}, Na = {
+  ...we,
+  mode: "a98",
+  parse: ["a98-rgb"],
+  serialize: "a98-rgb",
+  fromMode: {
+    rgb: (t) => It(We(t)),
+    xyz65: It
+  },
+  toMode: {
+    rgb: (t) => Ze(Xt(t)),
+    xyz65: Xt
+  }
+}, oe = (t) => (t = t % 360) < 0 ? t + 360 : t, Da = (t, e) => t.map((n, a, o) => {
+  if (n === void 0)
+    return n;
+  let l = oe(n);
+  return a === 0 || t[a - 1] === void 0 ? l : e(l - oe(o[a - 1]));
+}).reduce((n, a) => !n.length || a === void 0 || n[n.length - 1] === void 0 ? (n.push(a), n) : (n.push(a + n[n.length - 1]), n), []), Je = (t) => Da(t, (e) => Math.abs(e) <= 180 ? e : e - 360 * Math.sign(e)), sn = (t, e) => {
+  if (t.h === void 0 || e.h === void 0 || !t.s || !e.s)
+    return 0;
+  let n = oe(t.h), a = oe(e.h), o = Math.sin((a - n + 360) / 2 * Math.PI / 180);
+  return 2 * Math.sqrt(t.s * e.s) * o;
+}, Pa = (t, e) => {
+  if (t.h === void 0 || e.h === void 0)
+    return 0;
+  let n = oe(t.h), a = oe(e.h);
+  return Math.abs(a - n) > 180 ? n - (a - 360 * Math.sign(a - n)) : a - n;
+}, Xa = (t, e) => {
+  if (t.h === void 0 || e.h === void 0 || !t.c || !e.c)
+    return 0;
+  let n = oe(t.h), a = oe(e.h), o = Math.sin((a - n + 360) / 2 * Math.PI / 180);
+  return 2 * Math.sqrt(t.c * e.c) * o;
+}, Qe = (t) => {
+  let e = t.reduce(
+    (a, o) => {
+      if (o !== void 0) {
+        let l = o * Math.PI / 180;
+        a.sin += Math.sin(l), a.cos += Math.cos(l);
+      }
+      return a;
+    },
+    { sin: 0, cos: 0 }
+  ), n = Math.atan2(e.sin, e.cos) * 180 / Math.PI;
+  return n < 0 ? 360 + n : n;
+}, Ke = ({ l: t, a: e, b: n, alpha: a }, o = "lch") => {
+  e === void 0 && (e = 0), n === void 0 && (n = 0);
+  let l = Math.sqrt(e * e + n * n), r = { mode: o, l: t, c: l };
+  return l && (r.h = oe(Math.atan2(n, e) * 180 / Math.PI)), a !== void 0 && (r.alpha = a), r;
+}, qe = ({ l: t, c: e, h: n, alpha: a }, o = "lab") => {
+  n === void 0 && (n = 0);
+  let l = {
+    mode: o,
+    l: t,
+    a: e ? e * Math.cos(n / 180 * Math.PI) : 0,
+    b: e ? e * Math.sin(n / 180 * Math.PI) : 0
+  };
+  return a !== void 0 && (l.alpha = a), l;
+}, Me = {
+  X: 0.3457 / 0.3585,
+  Y: 1,
+  Z: (1 - 0.3457 - 0.3585) / 0.3585
+};
+function Ia({ h: t, s: e, l: n, alpha: a }) {
+  t = oe(t !== void 0 ? t : 0), e === void 0 && (e = 0), n === void 0 && (n = 0);
+  let o = n + e * (n < 0.5 ? n : 1 - n), l = o - (o - n) * 2 * Math.abs(t / 60 % 2 - 1), r;
+  switch (Math.floor(t / 60)) {
+    case 0:
+      r = { r: o, g: l, b: 2 * n - o };
+      break;
+    case 1:
+      r = { r: l, g: o, b: 2 * n - o };
+      break;
+    case 2:
+      r = { r: 2 * n - o, g: o, b: l };
+      break;
+    case 3:
+      r = { r: 2 * n - o, g: l, b: o };
+      break;
+    case 4:
+      r = { r: l, g: 2 * n - o, b: o };
+      break;
+    case 5:
+      r = { r: o, g: 2 * n - o, b: l };
+      break;
+    default:
+      r = { r: 2 * n - o, g: 2 * n - o, b: 2 * n - o };
+  }
+  return r.mode = "rgb", a !== void 0 && (r.alpha = a), r;
+}
+function Ba({ r: t, g: e, b: n, alpha: a }) {
+  t === void 0 && (t = 0), e === void 0 && (e = 0), n === void 0 && (n = 0);
+  let o = Math.max(t, e, n), l = Math.min(t, e, n), r = {
+    mode: "hsl",
+    s: o === l ? 0 : (o - l) / (1 - Math.abs(o + l - 1)),
+    l: 0.5 * (o + l)
+  };
+  return o - l !== 0 && (r.h = (o === t ? (e - n) / (o - l) + (e < n) * 6 : o === e ? (n - t) / (o - l) + 2 : (t - e) / (o - l) + 4) * 60), a !== void 0 && (r.alpha = a), r;
+}
+const Ya = (t, e) => {
+  switch (e) {
+    case "deg":
+      return +t;
+    case "rad":
+      return t / Math.PI * 180;
+    case "grad":
+      return t / 10 * 9;
+    case "turn":
+      return t * 360;
+  }
+}, Fa = new RegExp(
+  `^hsla?\\(\\s*${ca}${Ce}${_e}${Ce}${_e}\\s*(?:,\\s*${Ct}\\s*)?\\)$`
+), Oa = (t) => {
+  let e = t.match(Fa);
+  if (!e) return;
+  let n = { mode: "hsl" };
+  return e[3] !== void 0 ? n.h = +e[3] : e[1] !== void 0 && e[2] !== void 0 && (n.h = Ya(e[1], e[2])), e[4] !== void 0 && (n.s = Math.min(Math.max(0, e[4] / 100), 1)), e[5] !== void 0 && (n.l = Math.min(Math.max(0, e[5] / 100), 1)), e[6] !== void 0 ? n.alpha = Math.max(0, Math.min(1, e[6] / 100)) : e[7] !== void 0 && (n.alpha = Math.max(0, Math.min(1, +e[7]))), n;
+};
+function Ha(t, e) {
+  if (!e || e[0] !== "hsl" && e[0] !== "hsla")
+    return;
+  const n = { mode: "hsl" }, [, a, o, l, r] = e;
+  if (a.type !== c.None) {
+    if (a.type === c.Percentage)
+      return;
+    n.h = a.value;
+  }
+  if (o.type !== c.None) {
+    if (o.type === c.Hue)
+      return;
+    n.s = o.value / 100;
+  }
+  if (l.type !== c.None) {
+    if (l.type === c.Hue)
+      return;
+    n.l = l.value / 100;
+  }
+  return r.type !== c.None && (n.alpha = Math.min(
+    1,
+    Math.max(
+      0,
+      r.type === c.Number ? r.value : r.value / 100
+    )
+  )), n;
+}
+const La = {
+  mode: "hsl",
+  toMode: {
+    rgb: Ia
+  },
+  fromMode: {
+    rgb: Ba
+  },
+  channels: ["h", "s", "l", "alpha"],
+  ranges: {
+    h: [0, 360]
+  },
+  gamut: "rgb",
+  parse: [Ha, Oa],
+  serialize: (t) => `hsl(${t.h !== void 0 ? t.h : "none"} ${t.s !== void 0 ? t.s * 100 + "%" : "none"} ${t.l !== void 0 ? t.l * 100 + "%" : "none"}${t.alpha < 1 ? ` / ${t.alpha}` : ""})`,
+  interpolate: {
+    h: { use: _, fixup: Je },
+    s: _,
+    l: _,
+    alpha: { use: _, fixup: ve }
+  },
+  difference: {
+    h: sn
+  },
+  average: {
+    h: Qe
+  }
+};
+function dn({ h: t, s: e, v: n, alpha: a }) {
+  t = oe(t !== void 0 ? t : 0), e === void 0 && (e = 0), n === void 0 && (n = 0);
+  let o = Math.abs(t / 60 % 2 - 1), l;
+  switch (Math.floor(t / 60)) {
+    case 0:
+      l = { r: n, g: n * (1 - e * o), b: n * (1 - e) };
+      break;
+    case 1:
+      l = { r: n * (1 - e * o), g: n, b: n * (1 - e) };
+      break;
+    case 2:
+      l = { r: n * (1 - e), g: n, b: n * (1 - e * o) };
+      break;
+    case 3:
+      l = { r: n * (1 - e), g: n * (1 - e * o), b: n };
+      break;
+    case 4:
+      l = { r: n * (1 - e * o), g: n * (1 - e), b: n };
+      break;
+    case 5:
+      l = { r: n, g: n * (1 - e), b: n * (1 - e * o) };
+      break;
+    default:
+      l = { r: n * (1 - e), g: n * (1 - e), b: n * (1 - e) };
+  }
+  return l.mode = "rgb", a !== void 0 && (l.alpha = a), l;
+}
+function fn({ r: t, g: e, b: n, alpha: a }) {
+  t === void 0 && (t = 0), e === void 0 && (e = 0), n === void 0 && (n = 0);
+  let o = Math.max(t, e, n), l = Math.min(t, e, n), r = {
+    mode: "hsv",
+    s: o === 0 ? 0 : 1 - l / o,
+    v: o
+  };
+  return o - l !== 0 && (r.h = (o === t ? (e - n) / (o - l) + (e < n) * 6 : o === e ? (n - t) / (o - l) + 2 : (t - e) / (o - l) + 4) * 60), a !== void 0 && (r.alpha = a), r;
+}
+const Ka = {
+  mode: "hsv",
+  toMode: {
+    rgb: dn
+  },
+  parse: ["--hsv"],
+  serialize: "--hsv",
+  fromMode: {
+    rgb: fn
+  },
+  channels: ["h", "s", "v", "alpha"],
+  ranges: {
+    h: [0, 360]
+  },
+  gamut: "rgb",
+  interpolate: {
+    h: { use: _, fixup: Je },
+    s: _,
+    v: _,
+    alpha: { use: _, fixup: ve }
+  },
+  difference: {
+    h: sn
+  },
+  average: {
+    h: Qe
+  }
+};
+function qa({ h: t, w: e, b: n, alpha: a }) {
+  if (e === void 0 && (e = 0), n === void 0 && (n = 0), e + n > 1) {
+    let o = e + n;
+    e /= o, n /= o;
+  }
+  return dn({
+    h: t,
+    s: n === 1 ? 1 : 1 - e / (1 - n),
+    v: 1 - n,
+    alpha: a
+  });
+}
+function ja(t) {
+  let e = fn(t);
+  if (e === void 0) return;
+  let n = e.s !== void 0 ? e.s : 0, a = e.v !== void 0 ? e.v : 0, o = {
+    mode: "hwb",
+    w: (1 - n) * a,
+    b: 1 - a
+  };
+  return e.h !== void 0 && (o.h = e.h), e.alpha !== void 0 && (o.alpha = e.alpha), o;
+}
+function Ga(t, e) {
+  if (!e || e[0] !== "hwb")
+    return;
+  const n = { mode: "hwb" }, [, a, o, l, r] = e;
+  if (a.type !== c.None) {
+    if (a.type === c.Percentage)
+      return;
+    n.h = a.value;
+  }
+  if (o.type !== c.None) {
+    if (o.type === c.Hue)
+      return;
+    n.w = o.value / 100;
+  }
+  if (l.type !== c.None) {
+    if (l.type === c.Hue)
+      return;
+    n.b = l.value / 100;
+  }
+  return r.type !== c.None && (n.alpha = Math.min(
+    1,
+    Math.max(
+      0,
+      r.type === c.Number ? r.value : r.value / 100
+    )
+  )), n;
+}
+const Ua = {
+  mode: "hwb",
+  toMode: {
+    rgb: qa
+  },
+  fromMode: {
+    rgb: ja
+  },
+  channels: ["h", "w", "b", "alpha"],
+  ranges: {
+    h: [0, 360]
+  },
+  gamut: "rgb",
+  parse: [Ga],
+  serialize: (t) => `hwb(${t.h !== void 0 ? t.h : "none"} ${t.w !== void 0 ? t.w * 100 + "%" : "none"} ${t.b !== void 0 ? t.b * 100 + "%" : "none"}${t.alpha < 1 ? ` / ${t.alpha}` : ""})`,
+  interpolate: {
+    h: { use: _, fixup: Je },
+    w: _,
+    b: _,
+    alpha: { use: _, fixup: ve }
+  },
+  difference: {
+    h: Pa
+  },
+  average: {
+    h: Qe
+  }
+}, cn = Math.pow(29, 3) / Math.pow(3, 3), pn = Math.pow(6, 3) / Math.pow(29, 3);
+let it = (t) => Math.pow(t, 3) > pn ? Math.pow(t, 3) : (116 * t - 16) / cn;
+const wt = ({ l: t, a: e, b: n, alpha: a }) => {
+  t === void 0 && (t = 0), e === void 0 && (e = 0), n === void 0 && (n = 0);
+  let o = (t + 16) / 116, l = e / 500 + o, r = o - n / 200, i = {
+    mode: "xyz50",
+    x: it(l) * Me.X,
+    y: it(o) * Me.Y,
+    z: it(r) * Me.Z
+  };
+  return a !== void 0 && (i.alpha = a), i;
+}, $t = ({ x: t, y: e, z: n, alpha: a }) => {
+  t === void 0 && (t = 0), e === void 0 && (e = 0), n === void 0 && (n = 0);
+  let o = Ve({
+    r: t * 3.1341359569958707 - e * 1.6173863321612538 - 0.4906619460083532 * n,
+    g: t * -0.978795502912089 + e * 1.916254567259524 + 0.03344273116131949 * n,
+    b: t * 0.07195537988411677 - e * 0.2289768264158322 + 1.405386058324125 * n
+  });
+  return a !== void 0 && (o.alpha = a), o;
+}, hn = (t) => $t(wt(t)), St = (t) => {
+  let { r: e, g: n, b: a, alpha: o } = Ae(t), l = {
+    mode: "xyz50",
+    x: 0.436065742824811 * e + 0.3851514688337912 * n + 0.14307845442264197 * a,
+    y: 0.22249319175623702 * e + 0.7168870538238823 * n + 0.06061979053616537 * a,
+    z: 0.013923904500943465 * e + 0.09708128566574634 * n + 0.7140993584005155 * a
+  };
+  return o !== void 0 && (l.alpha = o), l;
+}, ut = (t) => t > pn ? Math.cbrt(t) : (cn * t + 16) / 116, kt = ({ x: t, y: e, z: n, alpha: a }) => {
+  t === void 0 && (t = 0), e === void 0 && (e = 0), n === void 0 && (n = 0);
+  let o = ut(t / Me.X), l = ut(e / Me.Y), r = ut(n / Me.Z), i = {
+    mode: "lab",
+    l: 116 * l - 16,
+    a: 500 * (o - l),
+    b: 200 * (l - r)
+  };
+  return a !== void 0 && (i.alpha = a), i;
+}, vn = (t) => {
+  let e = kt(St(t));
+  return t.r === t.b && t.b === t.g && (e.a = e.b = 0), e;
+};
+function Wa(t, e) {
+  if (!e || e[0] !== "lab")
+    return;
+  const n = { mode: "lab" }, [, a, o, l, r] = e;
+  if (!(a.type === c.Hue || o.type === c.Hue || l.type === c.Hue))
+    return a.type !== c.None && (n.l = Math.min(Math.max(0, a.value), 100)), o.type !== c.None && (n.a = o.type === c.Number ? o.value : o.value * 125 / 100), l.type !== c.None && (n.b = l.type === c.Number ? l.value : l.value * 125 / 100), r.type !== c.None && (n.alpha = Math.min(
+      1,
+      Math.max(
+        0,
+        r.type === c.Number ? r.value : r.value / 100
+      )
+    )), n;
+}
+const mn = {
+  mode: "lab",
+  toMode: {
+    xyz50: wt,
+    rgb: hn
+  },
+  fromMode: {
+    xyz50: kt,
+    rgb: vn
+  },
+  channels: ["l", "a", "b", "alpha"],
+  ranges: {
+    l: [0, 100],
+    a: [-125, 125],
+    b: [-125, 125]
+  },
+  parse: [Wa],
+  serialize: (t) => `lab(${t.l !== void 0 ? t.l : "none"} ${t.a !== void 0 ? t.a : "none"} ${t.b !== void 0 ? t.b : "none"}${t.alpha < 1 ? ` / ${t.alpha}` : ""})`,
+  interpolate: {
+    l: _,
+    a: _,
+    b: _,
+    alpha: { use: _, fixup: ve }
+  }
+};
+function Za(t, e) {
+  if (!e || e[0] !== "lch")
+    return;
+  const n = { mode: "lch" }, [, a, o, l, r] = e;
+  if (a.type !== c.None) {
+    if (a.type === c.Hue)
+      return;
+    n.l = Math.min(Math.max(0, a.value), 100);
+  }
+  if (o.type !== c.None && (n.c = Math.max(
+    0,
+    o.type === c.Number ? o.value : o.value * 150 / 100
+  )), l.type !== c.None) {
+    if (l.type === c.Percentage)
+      return;
+    n.h = l.value;
+  }
+  return r.type !== c.None && (n.alpha = Math.min(
+    1,
+    Math.max(
+      0,
+      r.type === c.Number ? r.value : r.value / 100
+    )
+  )), n;
+}
+const bn = {
+  mode: "lch",
+  toMode: {
+    lab: qe,
+    rgb: (t) => hn(qe(t))
+  },
+  fromMode: {
+    rgb: (t) => Ke(vn(t)),
+    lab: Ke
+  },
+  channels: ["l", "c", "h", "alpha"],
+  ranges: {
+    l: [0, 100],
+    c: [0, 150],
+    h: [0, 360]
+  },
+  parse: [Za],
+  serialize: (t) => `lch(${t.l !== void 0 ? t.l : "none"} ${t.c !== void 0 ? t.c : "none"} ${t.h !== void 0 ? t.h : "none"}${t.alpha < 1 ? ` / ${t.alpha}` : ""})`,
+  interpolate: {
+    h: { use: _, fixup: Je },
+    c: _,
+    l: _,
+    alpha: { use: _, fixup: ve }
+  },
+  difference: {
+    h: Xa
+  },
+  average: {
+    h: Qe
+  }
+}, Ja = {
+  ...we,
+  mode: "lrgb",
+  toMode: {
+    rgb: Ve
+  },
+  fromMode: {
+    rgb: Ae
+  },
+  parse: ["srgb-linear"],
+  serialize: "srgb-linear"
+}, gn = ({ r: t, g: e, b: n, alpha: a }) => {
+  t === void 0 && (t = 0), e === void 0 && (e = 0), n === void 0 && (n = 0);
+  let o = Math.cbrt(
+    0.412221469470763 * t + 0.5363325372617348 * e + 0.0514459932675022 * n
+  ), l = Math.cbrt(
+    0.2119034958178252 * t + 0.6806995506452344 * e + 0.1073969535369406 * n
+  ), r = Math.cbrt(
+    0.0883024591900564 * t + 0.2817188391361215 * e + 0.6299787016738222 * n
+  ), i = {
+    mode: "oklab",
+    l: 0.210454268309314 * o + 0.7936177747023054 * l - 0.0040720430116193 * r,
+    a: 1.9779985324311684 * o - 2.42859224204858 * l + 0.450593709617411 * r,
+    b: 0.0259040424655478 * o + 0.7827717124575296 * l - 0.8086757549230774 * r
+  };
+  return a !== void 0 && (i.alpha = a), i;
+}, yn = (t) => {
+  let e = gn(Ae(t));
+  return t.r === t.b && t.b === t.g && (e.a = e.b = 0), e;
+}, xn = ({ l: t, a: e, b: n, alpha: a }) => {
+  t === void 0 && (t = 0), e === void 0 && (e = 0), n === void 0 && (n = 0);
+  let o = Math.pow(t + 0.3963377773761749 * e + 0.2158037573099136 * n, 3), l = Math.pow(t - 0.1055613458156586 * e - 0.0638541728258133 * n, 3), r = Math.pow(t - 0.0894841775298119 * e - 1.2914855480194092 * n, 3), i = {
+    mode: "lrgb",
+    r: 4.076741636075957 * o - 3.3077115392580616 * l + 0.2309699031821044 * r,
+    g: -1.2684379732850317 * o + 2.6097573492876887 * l - 0.3413193760026573 * r,
+    b: -0.0041960761386756 * o - 0.7034186179359362 * l + 1.7076146940746117 * r
+  };
+  return a !== void 0 && (i.alpha = a), i;
+}, Mn = (t) => Ve(xn(t));
+function Qa(t, e) {
+  if (!e || e[0] !== "oklab")
+    return;
+  const n = { mode: "oklab" }, [, a, o, l, r] = e;
+  if (!(a.type === c.Hue || o.type === c.Hue || l.type === c.Hue))
+    return a.type !== c.None && (n.l = Math.min(
+      Math.max(0, a.type === c.Number ? a.value : a.value / 100),
+      1
+    )), o.type !== c.None && (n.a = o.type === c.Number ? o.value : o.value * 0.4 / 100), l.type !== c.None && (n.b = l.type === c.Number ? l.value : l.value * 0.4 / 100), r.type !== c.None && (n.alpha = Math.min(
+      1,
+      Math.max(
+        0,
+        r.type === c.Number ? r.value : r.value / 100
+      )
+    )), n;
+}
+const eo = {
+  ...mn,
+  mode: "oklab",
+  toMode: {
+    lrgb: xn,
+    rgb: Mn
+  },
+  fromMode: {
+    lrgb: gn,
+    rgb: yn
+  },
+  ranges: {
+    l: [0, 1],
+    a: [-0.4, 0.4],
+    b: [-0.4, 0.4]
+  },
+  parse: [Qa],
+  serialize: (t) => `oklab(${t.l !== void 0 ? t.l : "none"} ${t.a !== void 0 ? t.a : "none"} ${t.b !== void 0 ? t.b : "none"}${t.alpha < 1 ? ` / ${t.alpha}` : ""})`
+};
+function to(t, e) {
+  if (!e || e[0] !== "oklch")
+    return;
+  const n = { mode: "oklch" }, [, a, o, l, r] = e;
+  if (a.type !== c.None) {
+    if (a.type === c.Hue)
+      return;
+    n.l = Math.min(
+      Math.max(0, a.type === c.Number ? a.value : a.value / 100),
+      1
+    );
+  }
+  if (o.type !== c.None && (n.c = Math.max(
+    0,
+    o.type === c.Number ? o.value : o.value * 0.4 / 100
+  )), l.type !== c.None) {
+    if (l.type === c.Percentage)
+      return;
+    n.h = l.value;
+  }
+  return r.type !== c.None && (n.alpha = Math.min(
+    1,
+    Math.max(
+      0,
+      r.type === c.Number ? r.value : r.value / 100
+    )
+  )), n;
+}
+const no = {
+  ...bn,
+  mode: "oklch",
+  toMode: {
+    oklab: (t) => qe(t, "oklab"),
+    rgb: (t) => Mn(qe(t, "oklab"))
+  },
+  fromMode: {
+    rgb: (t) => Ke(yn(t), "oklch"),
+    oklab: (t) => Ke(t, "oklch")
+  },
+  parse: [to],
+  serialize: (t) => `oklch(${t.l !== void 0 ? t.l : "none"} ${t.c !== void 0 ? t.c : "none"} ${t.h !== void 0 ? t.h : "none"}${t.alpha < 1 ? ` / ${t.alpha}` : ""})`,
+  ranges: {
+    l: [0, 1],
+    c: [0, 0.4],
+    h: [0, 360]
+  }
+}, Bt = (t) => {
+  let { r: e, g: n, b: a, alpha: o } = Ae(t), l = {
+    mode: "xyz65",
+    x: 0.486570948648216 * e + 0.265667693169093 * n + 0.1982172852343625 * a,
+    y: 0.2289745640697487 * e + 0.6917385218365062 * n + 0.079286914093745 * a,
+    z: 0 * e + 0.0451133818589026 * n + 1.043944368900976 * a
+  };
+  return o !== void 0 && (l.alpha = o), l;
+}, Yt = ({ x: t, y: e, z: n, alpha: a }) => {
+  t === void 0 && (t = 0), e === void 0 && (e = 0), n === void 0 && (n = 0);
+  let o = Ve(
+    {
+      r: t * 2.4934969119414263 - e * 0.9313836179191242 - 0.402710784450717 * n,
+      g: t * -0.8294889695615749 + e * 1.7626640603183465 + 0.0236246858419436 * n,
+      b: t * 0.0358458302437845 - e * 0.0761723892680418 + 0.9568845240076871 * n
+    },
+    "p3"
+  );
+  return a !== void 0 && (o.alpha = a), o;
+}, ao = {
+  ...we,
+  mode: "p3",
+  parse: ["display-p3"],
+  serialize: "display-p3",
+  fromMode: {
+    rgb: (t) => Yt(We(t)),
+    xyz65: Yt
+  },
+  toMode: {
+    rgb: (t) => Ze(Bt(t)),
+    xyz65: Bt
+  }
+}, st = (t) => {
+  let e = Math.abs(t);
+  return e >= 1 / 512 ? Math.sign(t) * Math.pow(e, 1 / 1.8) : 16 * t;
+}, Ft = ({ x: t, y: e, z: n, alpha: a }) => {
+  t === void 0 && (t = 0), e === void 0 && (e = 0), n === void 0 && (n = 0);
+  let o = {
+    mode: "prophoto",
+    r: st(
+      t * 1.3457868816471585 - e * 0.2555720873797946 - 0.0511018649755453 * n
+    ),
+    g: st(
+      t * -0.5446307051249019 + e * 1.5082477428451466 + 0.0205274474364214 * n
+    ),
+    b: st(t * 0 + e * 0 + 1.2119675456389452 * n)
+  };
+  return a !== void 0 && (o.alpha = a), o;
+}, dt = (t = 0) => {
+  let e = Math.abs(t);
+  return e >= 16 / 512 ? Math.sign(t) * Math.pow(e, 1.8) : t / 16;
+}, Ot = (t) => {
+  let e = dt(t.r), n = dt(t.g), a = dt(t.b), o = {
+    mode: "xyz50",
+    x: 0.7977666449006423 * e + 0.1351812974005331 * n + 0.0313477341283922 * a,
+    y: 0.2880748288194013 * e + 0.7118352342418731 * n + 899369387256e-16 * a,
+    z: 0 * e + 0 * n + 0.8251046025104602 * a
+  };
+  return t.alpha !== void 0 && (o.alpha = t.alpha), o;
+}, oo = {
+  ...we,
+  mode: "prophoto",
+  parse: ["prophoto-rgb"],
+  serialize: "prophoto-rgb",
+  fromMode: {
+    xyz50: Ft,
+    rgb: (t) => Ft(St(t))
+  },
+  toMode: {
+    xyz50: Ot,
+    rgb: (t) => $t(Ot(t))
+  }
+}, Ht = 1.09929682680944, lo = 0.018053968510807, ft = (t) => {
+  const e = Math.abs(t);
+  return e > lo ? (Math.sign(t) || 1) * (Ht * Math.pow(e, 0.45) - (Ht - 1)) : 4.5 * t;
+}, Lt = ({ x: t, y: e, z: n, alpha: a }) => {
+  t === void 0 && (t = 0), e === void 0 && (e = 0), n === void 0 && (n = 0);
+  let o = {
+    mode: "rec2020",
+    r: ft(
+      t * 1.7166511879712683 - e * 0.3556707837763925 - 0.2533662813736599 * n
+    ),
+    g: ft(
+      t * -0.6666843518324893 + e * 1.6164812366349395 + 0.0157685458139111 * n
+    ),
+    b: ft(
+      t * 0.0176398574453108 - e * 0.0427706132578085 + 0.9421031212354739 * n
+    )
+  };
+  return a !== void 0 && (o.alpha = a), o;
+}, Kt = 1.09929682680944, ro = 0.018053968510807, ct = (t = 0) => {
+  let e = Math.abs(t);
+  return e < ro * 4.5 ? t / 4.5 : (Math.sign(t) || 1) * Math.pow((e + Kt - 1) / Kt, 1 / 0.45);
+}, qt = (t) => {
+  let e = ct(t.r), n = ct(t.g), a = ct(t.b), o = {
+    mode: "xyz65",
+    x: 0.6369580483012911 * e + 0.1446169035862083 * n + 0.1688809751641721 * a,
+    y: 0.262700212011267 * e + 0.6779980715188708 * n + 0.059301716469862 * a,
+    z: 0 * e + 0.0280726930490874 * n + 1.0609850577107909 * a
+  };
+  return t.alpha !== void 0 && (o.alpha = t.alpha), o;
+}, io = {
+  ...we,
+  mode: "rec2020",
+  fromMode: {
+    xyz65: Lt,
+    rgb: (t) => Lt(We(t))
+  },
+  toMode: {
+    xyz65: qt,
+    rgb: (t) => Ze(qt(t))
+  },
+  parse: ["rec2020"],
+  serialize: "rec2020"
+}, uo = {
+  mode: "xyz50",
+  parse: ["xyz-d50"],
+  serialize: "xyz-d50",
+  toMode: {
+    rgb: $t,
+    lab: kt
+  },
+  fromMode: {
+    rgb: St,
+    lab: wt
+  },
+  channels: ["x", "y", "z", "alpha"],
+  ranges: {
+    x: [0, 0.964],
+    y: [0, 0.999],
+    z: [0, 0.825]
+  },
+  interpolate: {
+    x: _,
+    y: _,
+    z: _,
+    alpha: { use: _, fixup: ve }
+  }
+}, so = (t) => {
+  let { x: e, y: n, z: a, alpha: o } = t;
+  e === void 0 && (e = 0), n === void 0 && (n = 0), a === void 0 && (a = 0);
+  let l = {
+    mode: "xyz50",
+    x: 1.0479298208405488 * e + 0.0229467933410191 * n - 0.0501922295431356 * a,
+    y: 0.0296278156881593 * e + 0.990434484573249 * n - 0.0170738250293851 * a,
+    z: -0.0092430581525912 * e + 0.0150551448965779 * n + 0.7518742899580008 * a
+  };
+  return o !== void 0 && (l.alpha = o), l;
+}, fo = (t) => {
+  let { x: e, y: n, z: a, alpha: o } = t;
+  e === void 0 && (e = 0), n === void 0 && (n = 0), a === void 0 && (a = 0);
+  let l = {
+    mode: "xyz65",
+    x: 0.9554734527042182 * e - 0.0230985368742614 * n + 0.0632593086610217 * a,
+    y: -0.0283697069632081 * e + 1.0099954580058226 * n + 0.021041398966943 * a,
+    z: 0.0123140016883199 * e - 0.0205076964334779 * n + 1.3303659366080753 * a
+  };
+  return o !== void 0 && (l.alpha = o), l;
+}, co = {
+  mode: "xyz65",
+  toMode: {
+    rgb: Ze,
+    xyz50: so
+  },
+  fromMode: {
+    rgb: We,
+    xyz50: fo
+  },
+  ranges: {
+    x: [0, 0.95],
+    y: [0, 1],
+    z: [0, 1.088]
+  },
+  channels: ["x", "y", "z", "alpha"],
+  parse: ["xyz", "xyz-d65"],
+  serialize: "xyz-d65",
+  interpolate: {
+    x: _,
+    y: _,
+    z: _,
+    alpha: { use: _, fixup: ve }
+  }
+}, po = [
+  we,
+  Ka,
+  La,
+  Ua,
+  mn,
+  bn,
+  eo,
+  no,
+  ao,
+  Na,
+  oo,
+  io,
+  uo,
+  co,
+  Ja
+];
+for (const t of po)
+  ya(t);
+const [me, ho] = ze("ColorAreaRoot"), $o = /* @__PURE__ */ B({
+  inheritAttrs: !1,
+  __name: "ColorAreaRoot",
+  props: {
+    as: { default: "span" },
+    asChild: { type: Boolean },
+    name: {},
+    required: { type: Boolean },
+    modelValue: {},
+    defaultValue: { default: "hsl(0, 100%, 50%)" },
+    disabled: { type: Boolean, default: !1 },
+    dir: {},
+    invertedX: { type: Boolean, default: !1 },
+    invertedY: { type: Boolean, default: !1 },
+    colorSpace: { default: "hsl" },
+    channelX: {},
+    channelY: {},
+    minXStepsBetweenThumbs: { default: 0 },
+    minYStepsBetweenThumbs: { default: 0 },
+    thumbAlignment: { default: "overflow" }
+  },
+  emits: ["update:modelValue", "valueCommit"],
+  setup(t, { emit: e }) {
+    const n = t, a = e, { disabled: o, thumbAlignment: l, dir: r } = xt(n), i = Wt(r), { forwardRef: u, currentElement: p } = H(), f = nn(p), { CollectionSlot: d } = an({ isProvider: !0 }), g = {
+      key: "alpha",
+      label: "Alpha",
+      min: 0,
+      max: 100,
+      step: 1,
+      format: "percentage",
+      culoriMin: 0,
+      culoriMax: 1
+    }, S = h(() => Hn[n.colorSpace]), $ = h(() => n.channelX ?? S.value?.channels[0]?.key ?? "h"), w = h(() => n.channelY ?? S.value?.channels[1]?.key ?? "s"), Y = h(() => $.value === "alpha"), I = h(() => w.value === "alpha"), k = h(() => Y.value ? g : pe(n.colorSpace, $.value)), A = h(() => I.value ? g : pe(n.colorSpace, w.value)), M = h(() => k.value?.min ?? 0), F = h(() => k.value?.max ?? 100), T = h(() => A.value?.min ?? 0), z = h(() => A.value?.max ?? 100), J = h(() => k.value?.step ?? 1), G = h(() => A.value?.step ?? 1);
+    function X(b) {
+      if (b)
+        return b instanceof Q ? b : Q.parse(b) ?? void 0;
+    }
+    const R = je(X(n.modelValue ?? n.defaultValue));
+    ae(() => n.modelValue, (b) => {
+      const m = X(b);
+      m && (R.value = m);
+    });
+    function K(b) {
+      if (!b || !k.value || !A.value) return [[M.value, T.value]];
+      const m = b.to(n.colorSpace);
+      if (!m) return [[M.value, T.value]];
+      const C = Y.value ? b.alpha ?? 1 : m.get($.value, 0), E = I.value ? b.alpha ?? 1 : m.get(w.value, 0);
+      return [[Be(k.value, C), Be(A.value, E)]];
+    }
+    const L = q(K(R.value));
+    ae([R, $, w], ([b]) => {
+      const m = K(b), C = L.value[0];
+      C && Math.abs((C[0] ?? 0) - (m[0]?.[0] ?? 0)) < 1e-3 && Math.abs((C[1] ?? 0) - (m[0]?.[1] ?? 0)) < 1e-3 || (L.value = m);
+    });
+    function ue(b) {
+      if (!b[0] || !R.value || !k.value || !A.value) return;
+      const m = Ye(k.value, b[0][0] ?? 0), C = Ye(A.value, b[0][1] ?? 0), E = {};
+      Y.value || (E[$.value] = m), I.value || (E[w.value] = C);
+      let j = R.value.set({ mode: n.colorSpace, ...E });
+      return Y.value && (j = j.set({ alpha: m })), I.value && (j = j.set({ alpha: C })), j;
+    }
+    const U = h(() => Array.isArray(L.value) ? [...L.value] : []), Z = q(0), re = q(U.value), se = q(), ee = q(), v = h(() => i.value !== "rtl" && !n.invertedX || i.value !== "ltr" && n.invertedX), x = h(() => !n.invertedY);
+    function V() {
+      const b = tt.value[Z.value], m = nt.value[Z.value];
+      return (b || m)?.parentElement;
+    }
+    function ne(b, m) {
+      const C = se.value || p.value.getBoundingClientRect();
+      se.value = C;
+      const E = V(), j = l.value === "contain" && E ? E.clientWidth : 0, te = l.value === "contain" && E ? E.clientHeight : 0;
+      if (!ee.value && !m && l.value === "contain" && E) {
+        const Tt = E.getBoundingClientRect();
+        ee.value = {
+          x: b.clientX - Tt.left,
+          y: b.clientY - Tt.top
+        };
+      }
+      const fe = [0, C.width - j], ie = v.value ? [M.value, F.value] : [F.value, M.value], $e = ht(fe, ie), Se = [0, C.height - te], ce = x.value ? [T.value, z.value] : [z.value, T.value], kn = ht(Se, ce), Rn = m ? b.clientX - C.left - j / 2 : b.clientX - C.left - (ee.value?.x ?? 0), _n = m ? b.clientY - C.top - te / 2 : b.clientY - C.top - (ee.value?.y ?? 0);
+      return [$e(Rn), kn(_n)];
+    }
+    const de = q();
+    function et(b) {
+      const m = ne(b, !0), C = oa(U.value, m, M.value, F.value, T.value, z.value);
+      C !== -1 && (de.value = { x: b.clientX, y: b.clientY }, ye.value = "x", Ne(m, C));
+    }
+    function Ee(b) {
+      const m = ne(b);
+      if (de.value) {
+        const C = Math.abs(b.clientX - de.value.x), E = Math.abs(b.clientY - de.value.y);
+        ye.value = C >= E ? "x" : "y";
+      }
+      de.value = { x: b.clientX, y: b.clientY }, Ne(m, Z.value);
+    }
+    function be() {
+      se.value = void 0, ee.value = void 0, de.value = void 0;
+      const b = re.value[Z.value], m = U.value[Z.value];
+      (b?.[0] !== m?.[0] || b?.[1] !== m?.[1]) && R.value && a("valueCommit", R.value);
+    }
+    const ge = h(() => n.minXStepsBetweenThumbs), wn = h(() => n.minYStepsBetweenThumbs);
+    function _t(b, m, C, E) {
+      if (E <= 0)
+        return b;
+      const j = U.value.map((te, fe) => fe === C ? b : te[m] ?? 0);
+      return aa([...j].sort((te, fe) => te - fe), E) ? b : U.value[C]?.[m] ?? b;
+    }
+    function Ne(b, m, { commit: C } = { commit: !1 }) {
+      const E = pt(b[0] ?? 0, M.value, F.value, J.value), j = pt(b[1] ?? 0, T.value, z.value, G.value), te = _t(E, 0, m, ge.value * J.value), fe = _t(j, 1, m, wn.value * G.value), ie = [...U.value];
+      if (ie[m] = [te, fe], Z.value = m, JSON.stringify(ie) !== JSON.stringify(L.value)) {
+        (ye.value === "x" ? tt.value : nt.value)[Z.value]?.focus(), L.value = ie;
+        const ce = ue(ie);
+        ce && (R.value = ce, a("update:modelValue", ce), C && a("valueCommit", ce));
+      }
+    }
+    const $n = {
+      ArrowRight: { axis: "x", sign: 1 },
+      ArrowLeft: { axis: "x", sign: -1 },
+      ArrowDown: { axis: "y", sign: 1 },
+      ArrowUp: { axis: "y", sign: -1 }
+    };
+    function Sn(b) {
+      const m = $n[b.key];
+      if (!m)
+        return;
+      const C = Z.value, E = U.value[C];
+      if (!E)
+        return;
+      const j = b.shiftKey && tn.includes(b.key) ? 10 : 1;
+      ye.value = m.axis;
+      const te = m.axis === "x" ? v.value ? 1 : -1 : x.value ? 1 : -1, ie = (m.axis === "x" ? J.value : G.value) * j * m.sign * te, $e = E[0] ?? 0, Se = E[1] ?? 0, ce = m.axis === "x" ? [$e + ie, Se] : [$e, Se + ie];
+      Ne(ce, C, { commit: !0 });
+    }
+    function De(b, m) {
+      ye.value = b;
+      const C = Z.value, E = U.value[C];
+      if (!E)
+        return;
+      let j = m;
+      b === "x" && !v.value ? j = m === M.value ? F.value : M.value : b === "y" && !x.value && (j = m === T.value ? z.value : T.value);
+      const te = b === "x" ? [j, E[1] ?? 0] : [E[0] ?? 0, j];
+      Ne(te, C, { commit: !0 });
+    }
+    const tt = q([]), nt = q([]), ye = q("x");
+    return ho({
+      modelValue: L,
+      currentModelValue: U,
+      valueIndexToChangeRef: Z,
+      thumbXElements: tt,
+      thumbYElements: nt,
+      activeDirection: ye,
+      minX: M,
+      maxX: F,
+      minY: T,
+      maxY: z,
+      disabled: o,
+      isSlidingFromLeft: v,
+      isSlidingFromTop: x,
+      thumbAlignment: l,
+      colorSpace: h(() => n.colorSpace),
+      xChannelKey: $,
+      yChannelKey: w,
+      colorRef: R,
+      dir: i
+    }), (b, m) => (D(), P(s(d), null, {
+      default: N(() => [
+        Ge(ia, yt(b.$attrs, {
+          ref: s(u),
+          "as-child": b.asChild,
+          as: b.as,
+          dir: s(i),
+          "aria-disabled": s(o),
+          "data-disabled": s(o) ? "" : void 0,
+          style: {
+            "--reka-slider-area-thumb-transform": `translate(${!v.value && s(l) === "overflow" ? "50%" : "-50%"}, ${!x.value && s(l) === "overflow" ? "50%" : "-50%"})`
+          },
+          onPointerdown: m[0] || (m[0] = () => {
+            s(o) || (re.value = U.value);
+          }),
+          onSlideStart: m[1] || (m[1] = (C) => !s(o) && et(C)),
+          onSlideMove: m[2] || (m[2] = (C) => !s(o) && Ee(C)),
+          onSlideEnd: m[3] || (m[3] = (C) => !s(o) && be()),
+          onHomeKeyDown: m[4] || (m[4] = (C) => !s(o) && De("x", M.value)),
+          onEndKeyDown: m[5] || (m[5] = (C) => !s(o) && De("x", F.value)),
+          onPageUpKeyDown: m[6] || (m[6] = (C) => !s(o) && De("y", T.value)),
+          onPageDownKeyDown: m[7] || (m[7] = (C) => !s(o) && De("y", z.value)),
+          onStepKeyDown: m[8] || (m[8] = (C) => {
+            s(o) || Sn(C);
+          })
+        }), {
+          default: N(() => [
+            O(b.$slots, "default", { modelValue: R.value }),
+            s(f) && b.name ? (D(), P(s(Zt), {
+              key: 0,
+              as: "input",
+              type: "hidden",
+              value: R.value?.toString() ?? "",
+              name: b.name,
+              required: b.required,
+              disabled: s(o)
+            }, null, 8, ["value", "name", "required", "disabled"])) : jt("", !0)
+          ]),
+          _: 3
+        }, 16, ["as-child", "as", "dir", "aria-disabled", "data-disabled", "style"])
+      ]),
+      _: 3
+    }));
+  }
+}), So = /* @__PURE__ */ B({
+  __name: "ColorAreaRegion",
+  setup(t) {
+    const e = me();
+    H();
+    const n = h(() => e.currentModelValue.value.map(
+      (p) => Oe(p[0] ?? 0, e.minX.value ?? 0, e.maxX.value ?? 100)
+    )), a = h(() => e.currentModelValue.value.map(
+      (p) => Oe(p[1] ?? 0, e.minY.value ?? 0, e.maxY.value ?? 100)
+    )), o = h(() => {
+      const p = n.value, f = a.value;
+      return p.length === 0 ? { startX: 0, startY: 0, endX: 0, endY: 0 } : p.length === 1 ? { startX: 0, startY: 0, endX: p[0], endY: f[0] } : {
+        startX: Math.min(...p),
+        startY: Math.min(...f),
+        endX: Math.max(...p),
+        endY: Math.max(...f)
+      };
+    }), l = h(() => e.isSlidingFromLeft.value ? "left" : "right"), r = h(() => e.isSlidingFromLeft.value ? "right" : "left"), i = h(() => e.isSlidingFromTop.value ? "top" : "bottom"), u = h(() => e.isSlidingFromTop.value ? "bottom" : "top");
+    return (p, f) => (D(), P(s(W), {
+      "data-disabled": s(e).disabled.value ? "" : void 0,
+      "as-child": p.asChild,
+      as: p.as,
+      style: Ue({
+        position: "absolute",
+        [l.value]: `${o.value.startX}%`,
+        [r.value]: `${100 - (o.value.endX ?? 0)}%`,
+        [i.value]: `${o.value.startY}%`,
+        [u.value]: `${100 - (o.value.endY ?? 0)}%`
+      })
+    }, {
+      default: N(() => [
+        O(p.$slots, "default")
+      ]),
+      _: 3
+    }, 8, ["data-disabled", "as-child", "as", "style"]));
+  }
+}), ko = /* @__PURE__ */ B({
+  inheritAttrs: !1,
+  __name: "ColorAreaThumb",
+  props: {
+    as: { default: "span" },
+    asChild: { type: Boolean }
+  },
+  setup(t) {
+    const e = me(), { forwardRef: n, currentElement: a } = H(), { CollectionItem: o, getItems: l } = an(), r = h(() => a.value ? l(!0).findIndex((w) => w.ref === a.value) : -1), i = h(() => e.modelValue?.value?.[r.value]), u = h(() => i.value === void 0 ? 0 : Oe(i.value[0] ?? 0, e.minX.value ?? 0, e.maxX.value ?? 100)), p = h(() => i.value === void 0 ? 0 : Oe(i.value[1] ?? 0, e.minY.value ?? 0, e.maxY.value ?? 100)), f = h(() => ta(r.value, e.modelValue?.value?.length ?? 0)), d = ra(a), g = h(() => e.thumbAlignment.value === "overflow" || !d.width.value ? 0 : Nt(d.width.value, u.value, e.isSlidingFromLeft.value ? 1 : -1)), S = h(() => e.thumbAlignment.value === "overflow" || !d.height.value ? 0 : Nt(d.height.value, p.value, e.isSlidingFromTop.value ? 1 : -1)), $ = /* @__PURE__ */ Jt();
+    return Jn({
+      index: r
+    }), (w, Y) => (D(), P(s(o), null, {
+      default: N(() => [
+        Ge(s(W), yt(w.$attrs, {
+          ref: s(n),
+          "aria-label": w.$attrs["aria-label"] || f.value,
+          "data-disabled": s(e).disabled.value ? "" : void 0,
+          "aria-roledescription": "2D slider",
+          "as-child": w.asChild,
+          as: w.as,
+          style: {
+            transform: "var(--reka-slider-area-thumb-transform)",
+            position: "absolute",
+            [s(e).isSlidingFromLeft.value ? "left" : "right"]: `calc(${u.value}% + ${g.value}px)`,
+            [s(e).isSlidingFromTop.value ? "top" : "bottom"]: `calc(${p.value}% + ${S.value}px)`,
+            display: !s($) && i.value === void 0 ? "none" : void 0
+          }
+        }), {
+          default: N(() => [
+            O(w.$slots, "default")
+          ]),
+          _: 3
+        }, 16, ["aria-label", "data-disabled", "as-child", "as", "style"])
+      ]),
+      _: 3
+    }));
+  }
+}), Ro = /* @__PURE__ */ B({
+  __name: "ColorAreaThumbX",
+  props: {
+    as: { default: "span" },
+    asChild: { type: Boolean }
+  },
+  setup(t) {
+    const e = me(), n = en(), { forwardRef: a, currentElement: o } = H(), l = h(() => e.modelValue?.value?.[n.index.value]);
+    return Te(() => {
+      o.value && e.thumbXElements.value.push(o.value);
+    }), Mt(() => {
+      const r = e.thumbXElements.value.findIndex((i) => i === o.value);
+      r >= 0 && e.thumbXElements.value.splice(r, 1);
+    }), (r, i) => (D(), P(s(W), {
+      ref: s(a),
+      role: "slider",
+      tabindex: s(e).disabled.value ? void 0 : s(e).activeDirection.value === "x" ? 0 : -1,
+      "data-disabled": s(e).disabled.value ? "" : void 0,
+      "aria-orientation": "horizontal",
+      "aria-valuenow": l.value ? l.value[0] : void 0,
+      "aria-valuemin": s(e).minX.value,
+      "aria-valuemax": s(e).maxX.value,
+      "as-child": r.asChild,
+      as: r.as,
+      style: {
+        position: "absolute",
+        display: "block",
+        width: "100%",
+        height: "100%"
+      },
+      onFocus: i[0] || (i[0] = () => {
+        s(e).valueIndexToChangeRef.value = s(n).index.value, s(e).activeDirection.value = "x";
+      })
+    }, {
+      default: N(() => [
+        O(r.$slots, "default")
+      ]),
+      _: 3
+    }, 8, ["tabindex", "data-disabled", "aria-valuenow", "aria-valuemin", "aria-valuemax", "as-child", "as"]));
+  }
+}), _o = /* @__PURE__ */ B({
+  __name: "ColorAreaThumbY",
+  props: {
+    as: { default: "span" },
+    asChild: { type: Boolean }
+  },
+  setup(t) {
+    const e = me(), n = en(), { forwardRef: a, currentElement: o } = H(), l = h(() => e.modelValue?.value?.[n.index.value]);
+    return Te(() => {
+      o.value && e.thumbYElements.value.push(o.value);
+    }), Mt(() => {
+      const r = e.thumbYElements.value.findIndex((i) => i === o.value);
+      r >= 0 && e.thumbYElements.value.splice(r, 1);
+    }), (r, i) => (D(), P(s(W), {
+      ref: s(a),
+      role: "slider",
+      tabindex: s(e).disabled.value ? void 0 : s(e).activeDirection.value === "y" ? 0 : -1,
+      "data-disabled": s(e).disabled.value ? "" : void 0,
+      "aria-orientation": "vertical",
+      "aria-valuenow": l.value ? l.value[1] : void 0,
+      "aria-valuemin": s(e).minY.value,
+      "aria-valuemax": s(e).maxY.value,
+      "as-child": r.asChild,
+      as: r.as,
+      style: {
+        position: "absolute",
+        display: "block",
+        width: "100%",
+        height: "100%"
+      },
+      onFocus: i[0] || (i[0] = () => {
+        s(e).valueIndexToChangeRef.value = s(n).index.value, s(e).activeDirection.value = "y";
+      })
+    }, {
+      default: N(() => [
+        O(r.$slots, "default")
+      ]),
+      _: 3
+    }, 8, ["tabindex", "data-disabled", "aria-valuenow", "aria-valuemin", "aria-valuemax", "as-child", "as"]));
+  }
+}), To = /* @__PURE__ */ B({
+  __name: "ColorAreaTrack",
+  props: {
+    as: { default: "span" },
+    asChild: { type: Boolean }
+  },
+  setup(t) {
+    const e = me();
+    return H(), (n, a) => (D(), P(s(W), {
+      "as-child": n.asChild,
+      as: n.as,
+      "data-disabled": s(e).disabled.value ? "" : void 0
+    }, {
+      default: N(() => [
+        O(n.$slots, "default")
+      ]),
+      _: 3
+    }, 8, ["as-child", "as", "data-disabled"]));
+  }
+}), zo = /* @__PURE__ */ B({
+  __name: "ColorAreaGradient",
+  props: {
+    as: { default: "span" },
+    asChild: { type: Boolean },
+    topLeft: {},
+    topRight: {},
+    bottomLeft: {},
+    bottomRight: {},
+    interpolationSpace: {},
+    channelOverrides: { type: [Object, Boolean], default: () => ({ alpha: 1 }) }
+  },
+  setup(t) {
+    const e = t, n = me();
+    H();
+    const a = q(null), o = h(() => n.xChannelKey.value === "alpha"), l = h(() => n.yChannelKey.value === "alpha"), r = h(() => o.value || l.value), i = h(() => {
+      if (r.value) return 1;
+      const d = e.channelOverrides;
+      return d === !1 || typeof d == "object" && d.alpha === void 0 ? n.colorRef.value?.alpha ?? 1 : 1;
+    });
+    function u(d, g, S, $) {
+      const w = d.getContext("2d");
+      if (!w) return;
+      const Y = typeof devicePixelRatio < "u" ? devicePixelRatio : 1, I = Math.round(d.clientWidth * Y), k = Math.round(d.clientHeight * Y);
+      (d.width !== I || d.height !== k) && (d.width = I, d.height = k);
+      const A = new Uint8ClampedArray(g.buffer), M = new ImageData(A, S, $), F = new OffscreenCanvas(S, $), T = F.getContext("2d");
+      T && (T.putImageData(M, 0, 0), w.clearRect(0, 0, I, k), w.imageSmoothingEnabled = !0, w.imageSmoothingQuality = "high", w.drawImage(F, 0, 0, I, k));
+    }
+    function p(d, g) {
+      const S = e.channelOverrides;
+      if (!S) return d;
+      const $ = {};
+      let w = d;
+      for (const [Y, I] of Object.entries(S))
+        Y === "alpha" ? w = w.set({ alpha: I }) : $[Y] = I;
+      return Object.keys($).length > 0 && (w = w.set({ mode: g, ...$ })), w;
+    }
+    function f() {
+      const d = a.value;
+      if (!d) return;
+      const g = n.isSlidingFromLeft.value, S = n.isSlidingFromTop.value, $ = n.colorSpace.value, w = n.xChannelKey.value, Y = n.yChannelKey.value, I = n.colorRef.value;
+      if (e.topLeft || e.topRight || e.bottomLeft || e.bottomRight) {
+        const k = Q.parse(e.topLeft ?? "black"), A = Q.parse(e.topRight ?? "black"), M = Q.parse(e.bottomLeft ?? "black"), F = Q.parse(e.bottomRight ?? "black");
+        if (!k || !A || !M || !F) return;
+        const [T, z, J, G] = (() => {
+          let [X, R, K, L] = [k, A, M, F];
+          return g || ([X, R, K, L] = [R, X, L, K]), S || ([X, R, K, L] = [K, L, X, R]), [X, R, K, L];
+        })();
+        if (e.interpolationSpace) {
+          const K = Ln(T, z, J, G, 64, 64, e.interpolationSpace, r.value);
+          u(d, K, 64, 64);
+        } else
+          Kn(d, T, z, J, G, r.value);
+        return;
+      }
+      if (I && $) {
+        const k = p(I, $), A = o.value ? null : w, M = l.value ? null : Y;
+        if (!(A ?? M)) return;
+        if (A && M) {
+          const T = pe($, A), z = pe($, M);
+          if (!T || !z) return;
+          const J = T.culoriMin ?? T.min, G = T.culoriMax ?? T.max, X = z.culoriMin ?? z.min, R = z.culoriMax ?? z.max, K = 64, L = 64, ue = qn(
+            k,
+            $,
+            A,
+            M,
+            g ? J : G,
+            g ? G : J,
+            S ? X : R,
+            S ? R : X,
+            K,
+            L,
+            r.value
+          );
+          u(d, ue, K, L);
+        } else {
+          const T = A ?? M, z = pe($, T);
+          if (!z) return;
+          const J = z.culoriMin ?? z.min, G = z.culoriMax ?? z.max, X = !!A, R = 64, K = 64, L = X ? g : S, ue = X ? S : g, U = L ? J : G, Z = L ? G : J, re = ue ? 0 : 1, se = ue ? 1 : 0, ee = new Uint8ClampedArray(R * K * 4);
+          for (let v = 0; v < K; v++) {
+            const x = v / (K - 1);
+            for (let V = 0; V < R; V++) {
+              const ne = V / (R - 1), de = X ? U + ne * (Z - U) : U + x * (Z - U), et = X ? re + x * (se - re) : re + ne * (se - re), Ee = k.set({
+                mode: $,
+                [T]: de
+              });
+              if (!Ee) continue;
+              const be = Ee.to("rgb");
+              if (!be) continue;
+              const ge = (v * R + V) * 4;
+              ee[ge] = Math.round(Math.max(0, Math.min(1, be.get("r", 0))) * 255), ee[ge + 1] = Math.round(Math.max(0, Math.min(1, be.get("g", 0))) * 255), ee[ge + 2] = Math.round(Math.max(0, Math.min(1, be.get("b", 0))) * 255), ee[ge + 3] = Math.round(Math.max(0, Math.min(1, et)) * 255);
+            }
+          }
+          u(d, ee, R, K);
+        }
+      }
+    }
+    return Qt(a, () => {
+      f();
+    }), ae(
+      () => [
+        e.topLeft,
+        e.topRight,
+        e.bottomLeft,
+        e.bottomRight,
+        e.interpolationSpace,
+        e.channelOverrides,
+        n.colorSpace.value,
+        n.xChannelKey.value,
+        n.yChannelKey.value,
+        n.colorRef.value,
+        n.isSlidingFromLeft.value,
+        n.isSlidingFromTop.value
+      ],
+      () => f(),
+      { flush: "post" }
+    ), Gt(() => {
+      const d = a.value;
+      if (d) {
+        const g = d.getContext("webgl");
+        g && g.getExtension("WEBGL_lose_context")?.loseContext();
+      }
+    }), (d, g) => (D(), P(s(W), {
+      "as-child": d.asChild,
+      as: d.as,
+      "data-disabled": s(n).disabled.value ? "" : void 0
+    }, {
+      default: N(() => [
+        Ut("canvas", {
+          ref_key: "canvasRef",
+          ref: a,
+          style: Ue({ position: "absolute", inset: "0", width: "100%", height: "100%", pointerEvents: "none", opacity: i.value })
+        }, null, 4),
+        O(d.$slots, "default")
+      ]),
+      _: 3
+    }, 8, ["as-child", "as", "data-disabled"]));
+  }
+}), Ao = /* @__PURE__ */ B({
+  __name: "ColorAreaCheckerboard",
+  props: {
+    as: { default: "div" },
+    asChild: { type: Boolean }
+  },
+  setup(t) {
+    return H(), (e, n) => (D(), P(s(W), {
+      "as-child": e.asChild,
+      as: e.as,
+      style: { position: "absolute", inset: "0", pointerEvents: "none", background: "repeating-conic-gradient(rgb(230, 230, 230) 0% 25%, white 0% 50%) 0% 50% / 16px 16px" }
+    }, null, 8, ["as-child", "as"]));
+  }
+}), [vo, mo] = ze("ColorSliderRoot"), Vo = /* @__PURE__ */ B({
+  __name: "ColorSliderRoot",
+  props: {
+    modelValue: {},
+    colorSpace: { default: "hsl" },
+    channel: { default: "h" },
+    disabled: { type: Boolean, default: !1 },
+    dir: {},
+    inverted: { type: Boolean },
+    orientation: {}
+  },
+  emits: ["update:modelValue", "valueCommit"],
+  setup(t, { emit: e }) {
+    const n = t, a = e;
+    H();
+    function o(d) {
+      if (d)
+        return d instanceof Q ? d : Q.parse(d) ?? void 0;
+    }
+    const l = je(o(n.modelValue));
+    ae(() => n.modelValue, (d) => {
+      const g = o(d);
+      g && (l.value = g);
+    });
+    const r = h(() => n.channel === "alpha"), i = { key: "alpha", label: "Alpha", min: 0, max: 100, step: 1, format: "percentage", culoriMin: 0, culoriMax: 1 }, u = h(() => r.value ? i : pe(n.colorSpace, n.channel)), p = h({
+      get() {
+        if (!l.value || !u.value) return [u.value?.min ?? 0];
+        if (r.value)
+          return [Math.round((l.value.alpha ?? 1) * 100)];
+        const d = l.value.to(n.colorSpace);
+        if (!d) return [u.value.min];
+        const g = d.get(n.channel, 0);
+        return [Be(u.value, g)];
+      },
+      set(d) {
+        if (!l.value || !u.value || d[0] === void 0) return;
+        let g;
+        if (r.value)
+          g = l.value.set({ alpha: d[0] / 100 });
+        else {
+          const S = Ye(u.value, d[0]);
+          g = l.value.set({
+            mode: n.colorSpace,
+            [n.channel]: S
+          });
+        }
+        g && (l.value = g, a("update:modelValue", g));
+      }
+    });
+    function f() {
+      l.value && a("valueCommit", l.value);
+    }
+    return mo({ colorRef: l, channel: At(n, "channel"), colorSpace: At(n, "colorSpace") }), (d, g) => (D(), P(s(Xn), {
+      modelValue: p.value,
+      "onUpdate:modelValue": g[0] || (g[0] = (S) => p.value = S),
+      min: u.value?.min ?? 0,
+      max: u.value?.max ?? 100,
+      step: u.value?.step ?? 1,
+      disabled: d.disabled,
+      dir: d.dir,
+      inverted: d.inverted,
+      orientation: d.orientation,
+      onValueCommit: f
+    }, {
+      default: N(() => [
+        O(d.$slots, "default")
+      ]),
+      _: 3
+    }, 8, ["modelValue", "min", "max", "step", "disabled", "dir", "inverted", "orientation"]));
+  }
+}), Eo = /* @__PURE__ */ B({
+  __name: "ColorSliderTrack",
+  setup(t) {
+    return H(), (e, n) => (D(), P(s(In), null, {
+      default: N(() => [
+        O(e.$slots, "default")
+      ]),
+      _: 3
+    }));
+  }
+}), No = /* @__PURE__ */ B({
+  __name: "ColorSliderRange",
+  setup(t) {
+    return H(), (e, n) => (D(), P(s(Bn), null, {
+      default: N(() => [
+        O(e.$slots, "default")
+      ]),
+      _: 3
+    }));
+  }
+}), Do = /* @__PURE__ */ B({
+  __name: "ColorSliderThumb",
+  setup(t) {
+    return H(), (e, n) => (D(), P(s(Yn), null, {
+      default: N(() => [
+        O(e.$slots, "default")
+      ]),
+      _: 3
+    }));
+  }
+}), Po = /* @__PURE__ */ B({
+  __name: "ColorSliderGradient",
+  props: {
+    as: { default: "span" },
+    asChild: { type: Boolean },
+    colors: {},
+    vertical: { type: Boolean, default: !1 },
+    interpolationSpace: {},
+    channelOverrides: { type: [Object, Boolean], default: () => ({ alpha: 1 }) }
+  },
+  setup(t) {
+    const e = t;
+    H();
+    const n = vo(), a = h(() => n.channel.value === "alpha"), o = h(() => {
+      const u = e.channelOverrides;
+      return a.value ? 1 : u === !1 || !u.alpha ? n.colorRef.value?.alpha ?? 1 : 1;
+    }), l = h(() => {
+      if (e.colors) return null;
+      const u = n.colorRef.value, p = n.channel.value, f = n.colorSpace.value;
+      if (!u) return null;
+      const d = e.channelOverrides;
+      if (a.value) {
+        let k = u;
+        if (d && typeof d == "object") {
+          const F = {};
+          for (const [T, z] of Object.entries(d))
+            T !== "alpha" && (F[T] = z);
+          Object.keys(F).length > 0 && (k = u.set({ mode: f, ...F }));
+        }
+        const A = k.set({ alpha: 0 }), M = k.set({ alpha: 1 });
+        return [A, M];
+      }
+      const g = pe(f, p);
+      if (!g) return null;
+      const S = 12, $ = [], w = g.culoriMin ?? g.min, Y = g.culoriMax ?? g.max;
+      let I = u;
+      if (d && typeof d == "object") {
+        const k = {};
+        for (const [A, M] of Object.entries(d))
+          A !== "alpha" && (k[A] = M);
+        Object.keys(k).length > 0 && (I = u.set({ mode: f, ...k })), d.alpha !== void 0 && (I = I.set({ alpha: d.alpha }));
+      }
+      for (let k = 0; k < S; k++) {
+        const A = k / (S - 1), M = w + A * (Y - w), F = I.set({ mode: f, [p]: M });
+        F && $.push(F);
+      }
+      return $;
+    }), r = q(null);
+    function i() {
+      const u = r.value;
+      if (!u) return;
+      let p;
+      if (e.colors) {
+        const f = e.colors.map((d) => Q.parse(d));
+        if (f.some((d) => !d) || f.length < 2) return;
+        p = f;
+      } else if (l.value) {
+        if (p = l.value, p.length < 2) return;
+      } else
+        return;
+      if (e.interpolationSpace) {
+        const f = jn(p, 32, e.interpolationSpace);
+        Et(u, f, e.vertical, a.value);
+      } else
+        Et(u, p, e.vertical, a.value);
+    }
+    return Qt(r, () => {
+      i();
+    }), ae(
+      () => [e.colors, e.vertical, e.interpolationSpace, e.channelOverrides, l.value],
+      () => i(),
+      { flush: "post", deep: !0 }
+    ), Gt(() => {
+      const u = r.value;
+      if (u) {
+        const p = u.getContext("webgl");
+        p && p.getExtension("WEBGL_lose_context")?.loseContext();
+      }
+    }), (u, p) => (D(), P(s(W), {
+      "as-child": u.asChild,
+      as: u.as
+    }, {
+      default: N(() => [
+        Ut("canvas", {
+          ref_key: "canvasRef",
+          ref: r,
+          style: Ue({ position: "absolute", inset: "0", width: "100%", height: "100%", pointerEvents: "none", opacity: o.value })
+        }, null, 4),
+        O(u.$slots, "default")
+      ]),
+      _: 3
+    }, 8, ["as-child", "as"]));
+  }
+}), Xo = /* @__PURE__ */ B({
+  __name: "ColorSliderCheckerboard",
+  props: {
+    as: { default: "div" },
+    asChild: { type: Boolean }
+  },
+  setup(t) {
+    return H(), (e, n) => (D(), P(s(W), {
+      "as-child": e.asChild,
+      as: e.as,
+      style: { position: "absolute", inset: "0", pointerEvents: "none", background: "repeating-conic-gradient(rgb(230, 230, 230) 0% 25%, white 0% 50%) 0% 50% / 16px 16px" }
+    }, null, 8, ["as-child", "as"]));
+  }
+}), [Rt, bo] = ze("ColorFieldRoot"), Io = /* @__PURE__ */ B({
+  __name: "ColorFieldRoot",
+  props: {
+    as: { default: "div" },
+    asChild: { type: Boolean },
+    modelValue: {},
+    colorSpace: { default: "hsl" },
+    channel: { default: "h" },
+    format: {},
+    min: {},
+    max: {},
+    step: {},
+    disabled: { type: Boolean, default: !1 },
+    readOnly: { type: Boolean, default: !1 },
+    name: {},
+    required: { type: Boolean, default: !1 }
+  },
+  emits: ["update:modelValue", "valueCommit"],
+  setup(t, { emit: e }) {
+    const n = t, a = e, { disabled: o, readOnly: l } = xt(n), { forwardRef: r, currentElement: i } = H(), u = nn(i);
+    function p(v) {
+      if (v)
+        return v instanceof Q ? v : Q.parse(v) ?? void 0;
+    }
+    const f = je(p(n.modelValue));
+    ae(() => n.modelValue, (v) => {
+      const x = p(v);
+      x && (f.value = x);
+    });
+    const d = h(() => n.channel === "alpha"), g = { key: "alpha", label: "Alpha", min: 0, max: 100, step: 1, format: "percentage", culoriMin: 0, culoriMax: 1 }, S = h(() => d.value ? g : pe(n.colorSpace, n.channel)), $ = h(() => n.min ?? S.value?.min ?? 0), w = h(() => n.max ?? S.value?.max ?? (k.value ? 16777215 : 100)), Y = h(() => n.step ?? S.value?.step ?? 1), I = h(() => n.format ?? S.value?.format ?? "number"), k = h(() => I.value === "hex");
+    function A() {
+      if (!f.value) return;
+      if (k.value) {
+        const V = f.value.toHex()?.replace(/^#/, "");
+        return V ? Number.parseInt(V.slice(0, 6), 16) : void 0;
+      }
+      if (!S.value) return;
+      if (d.value)
+        return Math.round((f.value.alpha ?? 1) * 100);
+      const v = f.value.to(n.colorSpace);
+      if (!v) return;
+      const x = v.get(n.channel, 0);
+      return Be(S.value, x);
+    }
+    const M = q(A());
+    ae(f, () => {
+      const v = A();
+      v !== void 0 && Math.abs((v ?? 0) - (M.value ?? 0)) > 1e-3 && (M.value = v);
+    });
+    function F(v) {
+      if (!f.value) return;
+      if (k.value) {
+        const V = `#${Math.round(Re(v, 0, 16777215)).toString(16).padStart(6, "0")}`;
+        return Q.parse(V) ?? void 0;
+      }
+      if (!S.value) return;
+      if (d.value)
+        return f.value.set({ alpha: v / 100 });
+      const x = Ye(S.value, v);
+      return f.value.set({
+        mode: n.colorSpace,
+        [n.channel]: x
+      });
+    }
+    const T = q();
+    function z(v) {
+      if (v === void 0) return "";
+      switch (I.value) {
+        case "degree":
+          return `${v}°`;
+        case "percentage":
+          return `${v}%`;
+        case "hex":
+          return `#${Math.round(v).toString(16).padStart(6, "0")}`;
+        default:
+          return String(v);
+      }
+    }
+    function J(v) {
+      const x = v.trim();
+      if (x !== "")
+        switch (I.value) {
+          case "degree":
+            return Number.parseFloat(x.replace(/[°]$|deg$/i, ""));
+          case "percentage":
+            return Number.parseFloat(x.replace(/%$/, ""));
+          case "hex": {
+            const V = x.replace(/^#/, "");
+            return /^[0-9a-f]*$/i.test(V) ? Number.parseInt(V, 16) : void 0;
+          }
+          default:
+            return Number.parseFloat(x);
+        }
+    }
+    function G(v) {
+      let x = Re(v, $.value, w.value);
+      return x = pt(x, $.value, w.value, Y.value), x;
+    }
+    const X = q(z(M.value));
+    ae(M, (v) => {
+      X.value = z(v);
+    });
+    function R(v) {
+      const x = F(v);
+      return x && (f.value = x, a("update:modelValue", x)), x;
+    }
+    function K(v) {
+      if (v === void 0 || Number.isNaN(v)) {
+        M.value = void 0, X.value = "";
+        return;
+      }
+      const x = k.value ? Re(Math.round(v), $.value, w.value) : G(v);
+      M.value = x, X.value = z(x);
+      const V = R(x);
+      V && a("valueCommit", V);
+    }
+    function L(v) {
+      X.value = v;
+      const x = J(v);
+      x !== void 0 && !Number.isNaN(x) && (M.value = x, R(x));
+    }
+    function ue(v = 1) {
+      if (n.disabled || n.readOnly) return;
+      const x = M.value ?? 0, V = G(x + Y.value * v);
+      M.value = V, X.value = z(V);
+      const ne = R(V);
+      ne && a("valueCommit", ne);
+    }
+    function U(v = 1) {
+      if (n.disabled || n.readOnly) return;
+      const x = M.value ?? 0, V = G(x - Y.value * v);
+      M.value = V, X.value = z(V);
+      const ne = R(V);
+      ne && a("valueCommit", ne);
+    }
+    function Z(v) {
+      if (n.disabled || n.readOnly) return;
+      const x = v === "min" ? $.value : w.value;
+      M.value = x, X.value = z(x);
+      const V = R(x);
+      V && a("valueCommit", V);
+    }
+    const re = h(() => M.value === void 0 ? !1 : G(M.value) <= $.value), se = h(() => M.value === void 0 ? !1 : G(M.value) >= w.value);
+    function ee(v) {
+      T.value = v;
+    }
+    return bo({
+      modelValue: M,
+      displayValue: X,
+      disabled: o,
+      readOnly: l,
+      isDecreaseDisabled: re,
+      isIncreaseDisabled: se,
+      handleIncrease: ue,
+      handleDecrease: U,
+      handleMinMaxValue: Z,
+      commitValue: K,
+      onInputChange: L,
+      inputEl: T,
+      onInputElement: ee,
+      format: I
+    }), (v, x) => (D(), P(s(W), {
+      ref: s(r),
+      as: v.as,
+      "as-child": v.asChild,
+      dir: void 0,
+      "data-disabled": s(o) ? "" : void 0,
+      "data-readonly": s(l) ? "" : void 0
+    }, {
+      default: N(() => [
+        O(v.$slots, "default"),
+        s(u) && v.name ? (D(), P(s(Zt), {
+          key: 0,
+          as: "input",
+          type: "hidden",
+          value: M.value !== void 0 ? M.value : "",
+          name: v.name,
+          required: v.required,
+          disabled: s(o)
+        }, null, 8, ["value", "name", "required", "disabled"])) : jt("", !0)
+      ]),
+      _: 3
+    }, 8, ["as", "as-child", "data-disabled", "data-readonly"]));
+  }
+}), Bo = /* @__PURE__ */ B({
+  __name: "ColorFieldInput",
+  props: {
+    as: { default: "input" },
+    asChild: { type: Boolean }
+  },
+  setup(t) {
+    const e = Rt(), { forwardRef: n, currentElement: a } = H();
+    Te(() => {
+      a.value && e.onInputElement(a.value);
+    });
+    function o(u) {
+      const p = u.target;
+      e.onInputChange(p.value);
+    }
+    function l(u) {
+      const p = u.target;
+      Pn(() => p.select()).catch(() => {
+      });
+    }
+    function r() {
+      e.displayValue.value, e.commitValue(
+        e.modelValue.value !== void 0 ? e.modelValue.value : void 0
+      );
+    }
+    function i(u) {
+      if (!(e.disabled.value || e.readOnly.value)) {
+        if (u.key === "Enter") {
+          e.commitValue(e.modelValue.value);
+          return;
+        }
+        switch (u.key) {
+          case "ArrowUp":
+            u.preventDefault(), e.handleIncrease();
+            break;
+          case "ArrowDown":
+            u.preventDefault(), e.handleDecrease();
+            break;
+          case "PageUp":
+            u.preventDefault(), e.handleIncrease(10);
+            break;
+          case "PageDown":
+            u.preventDefault(), e.handleDecrease(10);
+            break;
+          case "Home":
+            u.preventDefault(), e.handleMinMaxValue("min");
+            break;
+          case "End":
+            u.preventDefault(), e.handleMinMaxValue("max");
+            break;
+        }
+      }
+    }
+    return (u, p) => (D(), P(s(W), {
+      ref: s(n),
+      as: u.as,
+      "as-child": u.asChild,
+      type: "text",
+      role: "spinbutton",
+      "aria-valuenow": s(e).modelValue.value,
+      "aria-valuemin": void 0,
+      "aria-valuemax": void 0,
+      value: s(e).displayValue.value,
+      disabled: s(e).disabled.value || void 0,
+      readonly: s(e).readOnly.value || void 0,
+      "data-disabled": s(e).disabled.value ? "" : void 0,
+      "data-readonly": s(e).readOnly.value ? "" : void 0,
+      autocomplete: "off",
+      autocorrect: "off",
+      spellcheck: "false",
+      inputmode: "text",
+      onInput: o,
+      onFocus: l,
+      onBlur: r,
+      onKeydown: i
+    }, {
+      default: N(() => [
+        O(u.$slots, "default")
+      ]),
+      _: 3
+    }, 8, ["as", "as-child", "aria-valuenow", "value", "disabled", "readonly", "data-disabled", "data-readonly"]));
+  }
+});
+function Cn(t) {
+  const { disabled: e, onTrigger: n } = t, a = q(!1);
+  let o;
+  function l() {
+    o !== void 0 && (clearTimeout(o), o = void 0);
+  }
+  function r(u) {
+    l(), !e.value && (n(), o = setTimeout(() => r(60), u));
+  }
+  function i(u) {
+    if (u.button !== 0 || a.value || e.value) return;
+    u.preventDefault(), a.value = !0, r(400);
+    const p = () => {
+      a.value = !1, l(), window.removeEventListener("pointerup", p), window.removeEventListener("pointercancel", p);
+    };
+    window.addEventListener("pointerup", p), window.addEventListener("pointercancel", p);
+  }
+  return Mt(l), { isPressed: a, onPointerDown: i };
+}
+const Yo = /* @__PURE__ */ B({
+  __name: "ColorFieldIncrement",
+  props: {
+    as: { default: "button" },
+    asChild: { type: Boolean },
+    disabled: { type: Boolean, default: !1 }
+  },
+  setup(t) {
+    const e = t, n = Rt();
+    H();
+    const a = h(
+      () => n.disabled.value || n.readOnly.value || e.disabled || n.isIncreaseDisabled.value
+    ), { isPressed: o, onPointerDown: l } = Cn({
+      disabled: a,
+      onTrigger: () => n.handleIncrease()
+    });
+    return (r, i) => (D(), P(s(W), {
+      as: r.as,
+      "as-child": r.asChild,
+      tabindex: "-1",
+      "aria-label": "Increase",
+      disabled: a.value || void 0,
+      "data-pressed": s(o) ? "" : void 0,
+      "data-disabled": a.value ? "" : void 0,
+      onPointerdown: s(l),
+      onContextmenu: i[0] || (i[0] = xe(() => {
+      }, ["prevent"]))
+    }, {
+      default: N(() => [
+        O(r.$slots, "default")
+      ]),
+      _: 3
+    }, 8, ["as", "as-child", "disabled", "data-pressed", "data-disabled", "onPointerdown"]));
+  }
+}), Fo = /* @__PURE__ */ B({
+  __name: "ColorFieldDecrement",
+  props: {
+    as: { default: "button" },
+    asChild: { type: Boolean },
+    disabled: { type: Boolean, default: !1 }
+  },
+  setup(t) {
+    const e = t, n = Rt();
+    H();
+    const a = h(
+      () => n.disabled.value || n.readOnly.value || e.disabled || n.isDecreaseDisabled.value
+    ), { isPressed: o, onPointerDown: l } = Cn({
+      disabled: a,
+      onTrigger: () => n.handleDecrease()
+    });
+    return (r, i) => (D(), P(s(W), {
+      as: r.as,
+      "as-child": r.asChild,
+      tabindex: "-1",
+      "aria-label": "Decrease",
+      disabled: a.value || void 0,
+      "data-pressed": s(o) ? "" : void 0,
+      "data-disabled": a.value ? "" : void 0,
+      onPointerdown: s(l),
+      onContextmenu: i[0] || (i[0] = xe(() => {
+      }, ["prevent"]))
+    }, {
+      default: N(() => [
+        O(r.$slots, "default")
+      ]),
+      _: 3
+    }, 8, ["as", "as-child", "disabled", "data-pressed", "data-disabled", "onPointerdown"]));
+  }
+}), bt = /* @__PURE__ */ B({
+  __name: "ColorSwatchRoot",
+  props: {
+    as: { default: "div" },
+    asChild: { type: Boolean },
+    modelValue: {},
+    checkerSize: { default: 16 },
+    alpha: { type: Boolean }
+  },
+  setup(t) {
+    const e = t, { forwardRef: n } = H();
+    function a(p) {
+      if (p)
+        return p instanceof Q ? p : Q.parse(p) ?? void 0;
+    }
+    const o = h(() => a(e.modelValue)), l = h(() => {
+      if (!o.value) return "transparent";
+      const p = o.value.set({ alpha: 1 });
+      if (!p) return "transparent";
+      const f = p.to("rgb");
+      return f ? f.toString("css") : "transparent";
+    }), r = h(() => o.value ? o.value.alpha ?? 1 : 1), i = h(() => {
+      if (!o.value) return "transparent";
+      if (!e.alpha) return l.value;
+      const p = o.value.to("rgb");
+      return p ? p.toString("css") : "transparent";
+    }), u = h(() => {
+      const p = e.checkerSize, f = `repeating-conic-gradient(rgb(230, 230, 230) 0%, rgb(230, 230, 230) 25%, white 0%, white 50%) 0% 50% / ${p}px ${p}px`;
+      return {
+        "--swatch-color-opaque": l.value,
+        "--swatch-alpha": r.value,
+        "--swatch-checkerboard": f,
+        "--swatch-color": i.value,
+        background: `linear-gradient(${i.value}, ${i.value}), ${f}`
+      };
+    });
+    return (p, f) => (D(), P(s(W), {
+      ref: s(n),
+      as: p.as,
+      "as-child": p.asChild,
+      role: "img",
+      style: Ue(u.value)
+    }, {
+      default: N(() => [
+        O(p.$slots, "default")
+      ]),
+      _: 3
+    }, 8, ["as", "as-child", "style"]));
+  }
+}), Oo = /* @__PURE__ */ B({
+  __name: "ColorFieldSwatch",
+  setup(t) {
+    return H(), (e, n) => (D(), P(bt, {
+      as: e.as,
+      "as-child": e.asChild,
+      "model-value": e.modelValue,
+      "checker-size": e.checkerSize,
+      alpha: e.alpha
+    }, {
+      default: N(() => [
+        O(e.$slots, "default")
+      ]),
+      _: 3
+    }, 8, ["as", "as-child", "model-value", "checker-size", "alpha"]));
+  }
+}), [go, yo] = ze("ColorSwatchGroupRoot"), Ho = /* @__PURE__ */ B({
+  __name: "ColorSwatchGroupRoot",
+  props: {
+    as: { default: "div" },
+    asChild: { type: Boolean },
+    type: { default: "single" },
+    modelValue: {},
+    defaultValue: { default: () => [] },
+    disabled: { type: Boolean, default: !1 },
+    orientation: { default: "horizontal" },
+    loop: { type: Boolean, default: !0 },
+    rovingFocus: { type: Boolean, default: !0 },
+    dir: {}
+  },
+  emits: ["update:modelValue"],
+  setup(t, { emit: e }) {
+    const n = t, a = e, { disabled: o, dir: l } = xt(n), r = Wt(l), { forwardRef: i } = H(), u = q(n.modelValue ?? n.defaultValue);
+    ae(
+      () => n.modelValue,
+      (f) => {
+        f !== void 0 && (u.value = f);
+      }
+    );
+    function p(f) {
+      let d;
+      n.type === "single" ? d = u.value.includes(f) ? [] : [f] : d = u.value.includes(f) ? u.value.filter((g) => g !== f) : [...u.value, f], u.value = d, a("update:modelValue", d);
+    }
+    return yo({
+      modelValue: u,
+      type: h(() => n.type),
+      disabled: o,
+      rovingFocus: h(() => n.rovingFocus),
+      changeModelValue: p
+    }), (f, d) => f.rovingFocus ? (D(), P(s(Fn), {
+      key: 0,
+      "as-child": "",
+      orientation: f.orientation,
+      dir: s(r),
+      loop: f.loop
+    }, {
+      default: N(() => [
+        Ge(s(W), {
+          ref: s(i),
+          as: f.as,
+          "as-child": f.asChild,
+          role: "group",
+          dir: s(r),
+          "data-orientation": f.orientation
+        }, {
+          default: N(() => [
+            O(f.$slots, "default")
+          ]),
+          _: 3
+        }, 8, ["as", "as-child", "dir", "data-orientation"])
+      ]),
+      _: 3
+    }, 8, ["orientation", "dir", "loop"])) : (D(), P(s(W), {
+      key: 1,
+      ref: s(i),
+      as: f.as,
+      "as-child": f.asChild,
+      role: "group",
+      dir: s(r),
+      "data-orientation": f.orientation
+    }, {
+      default: N(() => [
+        O(f.$slots, "default")
+      ]),
+      _: 3
+    }, 8, ["as", "as-child", "dir", "data-orientation"]));
+  }
+}), Lo = /* @__PURE__ */ B({
+  __name: "ColorSwatchGroupItem",
+  props: {
+    as: { default: "button" },
+    asChild: { type: Boolean },
+    value: {},
+    disabled: { type: Boolean, default: !1 },
+    checkerSize: {},
+    alpha: { type: Boolean }
+  },
+  setup(t) {
+    const e = t, { forwardRef: n } = H(), a = go(), o = h(() => e.disabled || a.disabled.value), l = h(() => a.modelValue.value.includes(e.value)), r = h(() => l.value ? "on" : "off"), i = h(() => a.type.value === "single" ? "radio" : "checkbox"), u = h(() => l.value);
+    function p() {
+      o.value || a.changeModelValue(e.value);
+    }
+    return (f, d) => s(a).rovingFocus.value ? (D(), P(s(On), {
+      key: 0,
+      "as-child": "",
+      focusable: !o.value
+    }, {
+      default: N(() => [
+        Ge(bt, {
+          ref: s(n),
+          as: f.as,
+          "as-child": f.asChild,
+          "model-value": f.value,
+          "checker-size": f.checkerSize,
+          alpha: f.alpha,
+          role: i.value,
+          "aria-checked": u.value,
+          "aria-pressed": l.value,
+          "aria-disabled": o.value || void 0,
+          "data-state": r.value,
+          "data-disabled": o.value ? "" : void 0,
+          tabindex: o.value ? -1 : void 0,
+          onClick: p,
+          onKeydown: [
+            Pe(xe(p, ["prevent"]), ["enter"]),
+            Pe(xe(p, ["prevent"]), ["space"])
+          ]
+        }, {
+          default: N(() => [
+            O(f.$slots, "default")
+          ]),
+          _: 3
+        }, 8, ["as", "as-child", "model-value", "checker-size", "alpha", "role", "aria-checked", "aria-pressed", "aria-disabled", "data-state", "data-disabled", "tabindex", "onKeydown"])
+      ]),
+      _: 3
+    }, 8, ["focusable"])) : (D(), P(bt, {
+      key: 1,
+      ref: s(n),
+      as: f.as,
+      "as-child": f.asChild,
+      "model-value": f.value,
+      "checker-size": f.checkerSize,
+      alpha: f.alpha,
+      role: i.value,
+      "aria-checked": u.value,
+      "aria-pressed": l.value,
+      "aria-disabled": o.value || void 0,
+      "data-state": r.value,
+      "data-disabled": o.value ? "" : void 0,
+      onClick: p,
+      onKeydown: [
+        Pe(xe(p, ["prevent"]), ["enter"]),
+        Pe(xe(p, ["prevent"]), ["space"])
+      ]
+    }, {
+      default: N(() => [
+        O(f.$slots, "default")
+      ]),
+      _: 3
+    }, 8, ["as", "as-child", "model-value", "checker-size", "alpha", "role", "aria-checked", "aria-pressed", "aria-disabled", "data-state", "data-disabled", "onKeydown"]));
+  }
+});
+export {
+  Ao as ColorAreaCheckerboard,
+  zo as ColorAreaGradient,
+  So as ColorAreaRegion,
+  $o as ColorAreaRoot,
+  ko as ColorAreaThumb,
+  Ro as ColorAreaThumbX,
+  _o as ColorAreaThumbY,
+  To as ColorAreaTrack,
+  Fo as ColorFieldDecrement,
+  Yo as ColorFieldIncrement,
+  Bo as ColorFieldInput,
+  Io as ColorFieldRoot,
+  Oo as ColorFieldSwatch,
+  Xo as ColorSliderCheckerboard,
+  Po as ColorSliderGradient,
+  No as ColorSliderRange,
+  Vo as ColorSliderRoot,
+  Do as ColorSliderThumb,
+  Eo as ColorSliderTrack,
+  Lo as ColorSwatchGroupItem,
+  Ho as ColorSwatchGroupRoot,
+  bt as ColorSwatchRoot,
+  me as injectColorAreaRootContext,
+  vo as injectColorSliderRootContext,
+  go as injectColorSwatchGroupContext
+};