@alfadocs/ui-kit 0.0.19 → 0.1.0

package/dist/_chunks/{color-picker-CiotzQJF.js → color-picker-OKKF3Dww.js}

@@ -1,53 +1,53 @@
-import { jsx as l, jsxs as h, Fragment as we } from "react/jsx-runtime";
+import { jsx as d, jsxs as h, Fragment as we } from "react/jsx-runtime";
 import { forwardRef as $e, useId as Ne, useState as P, useMemo as F, useCallback as ke, useRef as H, useEffect as ee } from "react";
 import * as I from "@radix-ui/react-popover";
 import { c as re } from "./index-D2ZczOXr.js";
 import { useTranslation as ye } from "react-i18next";
 import { u as Pe } from "./form-field-context-94LwgYTQ.js";
-import { S as ne } from "./slider-B3DBwmcm.js";
-import { C as oe } from "./check-DPdL_Sm7.js";
+import { S as se } from "./slider-n8JWpJvT.js";
+import { C as ne } from "./check-DPdL_Sm7.js";
 import { X as Ae } from "./x-CCcI3eJp.js";
 function V(e) {
   let a = e.startsWith("#") ? e.slice(1) : e;
-  (a.length === 3 || a.length === 4) && (a = a.split("").map((d) => d + d).join(""));
-  const n = parseInt(a.slice(0, 2), 16) / 255, r = parseInt(a.slice(2, 4), 16) / 255, o = parseInt(a.slice(4, 6), 16) / 255, i = a.length === 8 ? parseInt(a.slice(6, 8), 16) / 255 : 1;
-  return se(n, r, o, i);
+  (a.length === 3 || a.length === 4) && (a = a.split("").map((c) => c + c).join(""));
+  const s = parseInt(a.slice(0, 2), 16) / 255, r = parseInt(a.slice(2, 4), 16) / 255, n = parseInt(a.slice(4, 6), 16) / 255, i = a.length === 8 ? parseInt(a.slice(6, 8), 16) / 255 : 1;
+  return oe(s, r, n, i);
 }
-function se(e, a, n, r) {
-  const o = Math.max(e, a, n), i = Math.min(e, a, n), d = (o + i) / 2;
+function oe(e, a, s, r) {
+  const n = Math.max(e, a, s), i = Math.min(e, a, s), c = (n + i) / 2;
   let m = 0, b = 0;
-  if (o !== i) {
-    const p = o - i;
-    b = d > 0.5 ? p / (2 - o - i) : p / (o + i), o === e ? m = ((a - n) / p + (a < n ? 6 : 0)) / 6 : o === a ? m = ((n - e) / p + 2) / 6 : m = ((e - a) / p + 4) / 6;
+  if (n !== i) {
+    const p = n - i;
+    b = c > 0.5 ? p / (2 - n - i) : p / (n + i), n === e ? m = ((a - s) / p + (a < s ? 6 : 0)) / 6 : n === a ? m = ((s - e) / p + 2) / 6 : m = ((e - a) / p + 4) / 6;
   }
   return {
     h: Math.round(m * 360),
     s: Math.round(b * 100),
-    l: Math.round(d * 100),
+    l: Math.round(c * 100),
     a: Math.round(r * 100) / 100
   };
 }
 function $(e) {
-  const { r: a, g: n, b: r } = G(e), o = (d) => Math.round(d * 255).toString(16).padStart(2, "0"), i = `#${o(a)}${o(n)}${o(r)}`;
-  return e.a < 1 ? `${i}${o(e.a)}` : i;
+  const { r: a, g: s, b: r } = G(e), n = (c) => Math.round(c * 255).toString(16).padStart(2, "0"), i = `#${n(a)}${n(s)}${n(r)}`;
+  return e.a < 1 ? `${i}${n(e.a)}` : i;
 }
 function Me(e) {
-  const { r: a, g: n, b: r } = G(e), o = Math.round(a * 255), i = Math.round(n * 255), d = Math.round(r * 255);
-  return e.a < 1 ? `rgba(${o}, ${i}, ${d}, ${e.a})` : `rgba(${o}, ${i}, ${d}, 1)`;
+  const { r: a, g: s, b: r } = G(e), n = Math.round(a * 255), i = Math.round(s * 255), c = Math.round(r * 255);
+  return e.a < 1 ? `rgba(${n}, ${i}, ${c}, ${e.a})` : `rgba(${n}, ${i}, ${c}, 1)`;
 }
 function G(e) {
-  const a = e.h / 360, n = e.s / 100, r = e.l / 100;
-  if (n === 0)
+  const a = e.h / 360, s = e.s / 100, r = e.l / 100;
+  if (s === 0)
     return { r, g: r, b: r };
-  const o = r < 0.5 ? r * (1 + n) : r + n - r * n, i = 2 * r - o;
+  const n = r < 0.5 ? r * (1 + s) : r + s - r * s, i = 2 * r - n;
   return {
-    r: _(i, o, a + 1 / 3),
-    g: _(i, o, a),
-    b: _(i, o, a - 1 / 3)
+    r: _(i, n, a + 1 / 3),
+    g: _(i, n, a),
+    b: _(i, n, a - 1 / 3)
   };
 }
-function _(e, a, n) {
-  let r = n;
+function _(e, a, s) {
+  let r = s;
   return r < 0 && (r += 1), r > 1 && (r -= 1), r < 1 / 6 ? e + (a - e) * 6 * r : r < 1 / 2 ? a : r < 2 / 3 ? e + (a - e) * (2 / 3 - r) * 6 : e;
 }
 function B(e, a) {
@@ -64,35 +64,35 @@ function L(e) {
   const a = e.trim();
   if (!a) return null;
   if (a.startsWith("#")) {
-    const o = a.slice(1);
-    return !/^[0-9a-fA-F]{3,8}$/.test(o) || ![3, 4, 6, 8].includes(o.length) ? null : V(a);
+    const n = a.slice(1);
+    return !/^[0-9a-fA-F]{3,8}$/.test(n) || ![3, 4, 6, 8].includes(n.length) ? null : V(a);
   }
-  const n = a.match(
+  const s = a.match(
     /^hsla?\(\s*([\d.]+)\s*[,/]\s*([\d.]+)%?\s*[,/]\s*([\d.]+)%?\s*(?:[,/]\s*([\d.]+))?\s*\)$/
   );
-  if (n)
+  if (s)
     return {
-      h: Math.round(parseFloat(n[1])) % 360,
-      s: Math.round(parseFloat(n[2])),
-      l: Math.round(parseFloat(n[3])),
-      a: n[4] !== void 0 ? parseFloat(n[4]) : 1
+      h: Math.round(parseFloat(s[1])) % 360,
+      s: Math.round(parseFloat(s[2])),
+      l: Math.round(parseFloat(s[3])),
+      a: s[4] !== void 0 ? parseFloat(s[4]) : 1
     };
   const r = a.match(
     /^rgba?\(\s*([\d.]+)\s*[,/]\s*([\d.]+)\s*[,/]\s*([\d.]+)\s*(?:[,/]\s*([\d.]+))?\s*\)$/
   );
   if (r) {
-    const o = parseFloat(r[1]) / 255, i = parseFloat(r[2]) / 255, d = parseFloat(r[3]) / 255, m = r[4] !== void 0 ? parseFloat(r[4]) : 1;
-    return se(o, i, d, m);
+    const n = parseFloat(r[1]) / 255, i = parseFloat(r[2]) / 255, c = parseFloat(r[3]) / 255, m = r[4] !== void 0 ? parseFloat(r[4]) : 1;
+    return oe(n, i, c, m);
   }
   return null;
 }
 function ae(e) {
-  const { r: a, g: n, b: r } = G(e), o = (i) => i <= 0.03928 ? i / 12.92 : Math.pow((i + 0.055) / 1.055, 2.4);
-  return 0.2126 * o(a) + 0.7152 * o(n) + 0.0722 * o(r);
+  const { r: a, g: s, b: r } = G(e), n = (i) => i <= 0.03928 ? i / 12.92 : Math.pow((i + 0.055) / 1.055, 2.4);
+  return 0.2126 * n(a) + 0.7152 * n(s) + 0.0722 * n(r);
 }
 function Se(e, a) {
-  const n = ae(e), r = ae(a), o = Math.max(n, r), i = Math.min(n, r);
-  return Math.round((o + 0.05) / (i + 0.05) * 100) / 100;
+  const s = ae(e), r = ae(a), n = Math.max(s, r), i = Math.min(s, r);
+  return Math.round((n + 0.05) / (i + 0.05) * 100) / 100;
 }
 function Te(e) {
   return e >= 4.5;
@@ -152,41 +152,41 @@ const Ie = [
   { name: "Grey 700", hex: "#afaba8" }
 ], u = 6, Le = re(
   [
-    "inline-flex items-center w-full",
-    "rounded-[var(--radius-sm)] border border-[color:var(--border)] bg-[var(--background)] text-[var(--foreground)]",
-    "transition-colors duration-[var(--animation-duration)] motion-reduce:transition-none",
-    "focus-visible:outline-[length:var(--focus-ring-width)] focus-visible:outline-solid",
-    "focus-visible:outline-[color:var(--ring)] focus-visible:outline-offset-[length:var(--focus-ring-offset)]",
-    "disabled:cursor-not-allowed disabled:opacity-50"
+    "ds:inline-flex ds:items-center ds:w-full",
+    "ds:rounded-[var(--radius-sm)] ds:border ds:border-[color:var(--border)] ds:bg-[var(--background)] ds:text-[var(--foreground)]",
+    "ds:transition-colors ds:duration-[var(--animation-duration)] ds:motion-reduce:transition-none",
+    "ds:focus-visible:outline-[length:var(--focus-ring-width)] ds:focus-visible:outline-solid",
+    "ds:focus-visible:outline-[color:var(--ring)] ds:focus-visible:outline-offset-[length:var(--focus-ring-offset)]",
+    "ds:disabled:cursor-not-allowed ds:disabled:opacity-50"
   ].join(" "),
   {
     variants: {
       size: {
-        sm: "h-8 text-[var(--font-size-sm)] ps-3 pe-3",
-        md: "h-[var(--min-target-size)] text-[var(--font-size-base)] ps-3 pe-3",
-        lg: "h-12 text-[var(--font-size-lg)] ps-4 pe-4"
+        sm: "ds:h-8 ds:text-[var(--font-size-sm)] ds:ps-3 ds:pe-3",
+        md: "ds:h-[var(--min-target-size)] ds:text-[var(--font-size-base)] ds:ps-3 ds:pe-3",
+        lg: "ds:h-12 ds:text-[var(--font-size-lg)] ds:ps-4 ds:pe-4"
       }
     },
     defaultVariants: { size: "md" }
   }
 ), Ee = re(
   [
-    "relative rounded-[var(--radius-sm)] border-2 cursor-pointer",
-    "min-w-[var(--min-target-size)] min-h-[var(--min-target-size)]",
-    "transition-[transform,box-shadow] duration-[var(--animation-duration)] motion-reduce:transition-none",
-    "focus-visible:outline-[length:var(--focus-ring-width)] focus-visible:outline-solid",
-    "focus-visible:outline-[color:var(--ring)] focus-visible:outline-offset-[length:var(--focus-ring-offset)]",
-    "hover:scale-110",
+    "ds:relative ds:rounded-[var(--radius-sm)] ds:border-2 ds:cursor-pointer",
+    "ds:min-w-[var(--min-target-size)] ds:min-h-[var(--min-target-size)]",
+    "ds:transition-[transform,box-shadow] ds:duration-[var(--animation-duration)] ds:motion-reduce:transition-none",
+    "ds:focus-visible:outline-[length:var(--focus-ring-width)] ds:focus-visible:outline-solid",
+    "ds:focus-visible:outline-[color:var(--ring)] ds:focus-visible:outline-offset-[length:var(--focus-ring-offset)]",
+    "ds:hover:scale-110",
     // The swatch background is the user-picked colour — set as a CSS custom
     // property via inline `style` per 23-constraints §Runtime-computed
     // dimensions (CSS custom property setter; the bg rule lives on the class).
-    "bg-[var(--swatch-bg)]"
+    "ds:bg-[var(--swatch-bg)]"
   ].join(" "),
   {
     variants: {
       selected: {
-        true: "border-[var(--primary)] shadow-[var(--shadow-md)]",
-        false: "border-transparent"
+        true: "ds:border-[var(--primary)] ds:shadow-[var(--shadow-md)]",
+        false: "ds:border-transparent"
       }
     },
     defaultVariants: { selected: !1 }
@@ -219,41 +219,41 @@ const Ie = [
 ].join(" "), ie = "[&>span:first-child]:bg-transparent [&>span:first-child>span]:bg-transparent", Oe = $e(
   (e, a) => {
     const {
-      value: n,
+      value: s,
       defaultValue: r,
-      onChange: o,
+      onChange: n,
       format: i = "hex",
-      allowOpacity: d = !1,
+      allowOpacity: c = !1,
       palette: m,
       against: b,
       size: p = "md",
-      disabled: le = !1,
-      variant: ce = "inline",
+      disabled: de = !1,
+      variant: le = "inline",
       compact: A = !0,
       className: D
-    } = e, { t: x } = ye(), N = Pe(), de = Ne(), M = N.id || de, v = N.disabled || le, S = n !== void 0, [j, fe] = P(() => {
-      const t = n ?? r;
+    } = e, { t: x } = ye(), N = Pe(), ce = Ne(), M = N.id || ce, v = N.disabled || de, S = s !== void 0, [j, fe] = P(() => {
+      const t = s ?? r;
       if (t) {
-        const c = L(t);
-        if (c) return c;
+        const l = L(t);
+        if (l) return l;
       }
       return { h: 0, s: 100, l: 50, a: 1 };
-    }), s = F(() => {
-      if (S && n) {
-        const t = L(n);
+    }), o = F(() => {
+      if (S && s) {
+        const t = L(s);
         if (t) return t;
       }
       return j;
-    }, [S, n, j]), C = ke(
+    }, [S, s, j]), C = ke(
       (t) => {
-        const c = d ? t : { ...t, a: 1 };
-        S || fe(c), o == null || o(B(c, i));
+        const l = c ? t : { ...t, a: 1 };
+        S || fe(l), n == null || n(B(l, i));
       },
-      [d, i, S, o]
-    ), [W, E] = P(() => $(s)), [ue, T] = P(!1), w = H(void 0), U = H(s);
-    U.current = s, ee(() => {
-      E($(s)), T(!1), w.current !== void 0 && (clearTimeout(w.current), w.current = void 0);
-    }, [s]), ee(() => () => {
+      [c, i, S, n]
+    ), [W, E] = P(() => $(o)), [ue, T] = P(!1), w = H(void 0), U = H(o);
+    U.current = o, ee(() => {
+      E($(o)), T(!1), w.current !== void 0 && (clearTimeout(w.current), w.current = void 0);
+    }, [o]), ee(() => () => {
       w.current !== void 0 && clearTimeout(w.current);
     }, []);
     const he = () => {
@@ -263,27 +263,27 @@ const Ie = [
       }, 800));
     }, y = F(() => m ? m.map(
       (t) => typeof t == "string" ? { name: t.toUpperCase(), hex: t } : t
-    ) : Ie, [m]), K = $(s), X = y.findIndex(
+    ) : Ie, [m]), K = $(o), X = y.findIndex(
       (t) => t.hex.toLowerCase() === K.toLowerCase()
     ), Y = H(null), [g, q] = P(
       X >= 0 ? X : 0
     ), me = (t) => {
       var f;
-      const c = (f = Y.current) == null ? void 0 : f.querySelectorAll('[role="gridcell"]');
-      c != null && c[t] && (c[t].focus(), q(t));
+      const l = (f = Y.current) == null ? void 0 : f.querySelectorAll('[role="gridcell"]');
+      l != null && l[t] && (l[t].focus(), q(t));
     }, xe = (t) => {
       if (v) return;
-      const c = y.length;
+      const l = y.length;
       let f = g;
       switch (t.key) {
         case "ArrowRight":
-          f = (g + 1) % c;
+          f = (g + 1) % l;
           break;
         case "ArrowLeft":
-          f = (g - 1 + c) % c;
+          f = (g - 1 + l) % l;
           break;
         case "ArrowDown":
-          f = Math.min(g + u, c - 1);
+          f = Math.min(g + u, l - 1);
           break;
         case "ArrowUp":
           f = Math.max(g - u, 0);
@@ -292,14 +292,14 @@ const Ie = [
           f = Math.floor(g / u) * u;
           break;
         case "End":
-          f = Math.min(Math.floor(g / u) * u + u - 1, c - 1);
+          f = Math.min(Math.floor(g / u) * u + u - 1, l - 1);
           break;
         case "PageUp":
           f = g % u;
           break;
         case "PageDown": {
-          const Q = Math.floor((c - 1) / u) * u;
-          f = Math.min(Q + g % u, c - 1);
+          const Q = Math.floor((l - 1) / u) * u;
+          f = Math.min(Q + g % u, l - 1);
           break;
         }
         case "Enter":
@@ -314,21 +314,21 @@ const Ie = [
       if (!b) return null;
       const t = L(b);
       if (!t) return null;
-      const c = Se(s, t);
-      return { ratio: c, aa: Te(c), aaa: ze(c) };
-    }, [b, s]), be = /* @__PURE__ */ l(
+      const l = Se(o, t);
+      return { ratio: l, aa: Te(l), aaa: ze(l) };
+    }, [b, o]), be = /* @__PURE__ */ d(
       "div",
       {
         ref: Y,
         role: "grid",
         "aria-label": x("ui.inputs.colorPicker.paletteLabel", "Colour swatches"),
         onKeyDown: xe,
-        className: "grid grid-cols-6 gap-[var(--spacing-xs)]",
-        children: y.map((t, c) => {
-          const f = Math.floor(c / u) * u;
-          return c === f ? /* @__PURE__ */ l("div", { role: "row", className: "contents", children: y.slice(f, f + u).map((k, Ce) => {
+        className: "ds:grid ds:grid-cols-6 ds:gap-[var(--spacing-xs)]",
+        children: y.map((t, l) => {
+          const f = Math.floor(l / u) * u;
+          return l === f ? /* @__PURE__ */ d("div", { role: "row", className: "ds:contents", children: y.slice(f, f + u).map((k, Ce) => {
             const Z = f + Ce, R = k.hex.toLowerCase() === K.toLowerCase();
-            return /* @__PURE__ */ l(
+            return /* @__PURE__ */ d(
               "div",
               {
                 role: "gridcell",
@@ -340,17 +340,17 @@ const Ie = [
                 },
                 className: Ee({ selected: R }),
                 style: { "--swatch-bg": k.hex },
-                children: R ? /* @__PURE__ */ l(oe, { "aria-hidden": "true", className: "absolute inset-0 m-auto size-4 text-[var(--background)] mix-blend-difference" }) : null
+                children: R ? /* @__PURE__ */ d(ne, { "aria-hidden": "true", className: "ds:absolute ds:inset-0 ds:m-auto ds:size-4 ds:text-[var(--background)] ds:mix-blend-difference" }) : null
               },
               k.hex
             );
-          }) }, c) : null;
+          }) }, l) : null;
         })
       }
     ), pe = A ? null : /* @__PURE__ */ h(we, { children: [
-      /* @__PURE__ */ h("div", { className: "flex flex-col gap-[var(--spacing-xs)]", children: [
-        /* @__PURE__ */ l("label", { htmlFor: `${M}-hex`, className: "text-[var(--font-size-xs)] text-[var(--muted-foreground)]", children: x("ui.inputs.colorPicker.hex", "Hex") }),
-        /* @__PURE__ */ l("bdi", { dir: "ltr", children: /* @__PURE__ */ l(
+      /* @__PURE__ */ h("div", { className: "ds:flex ds:flex-col ds:gap-[var(--spacing-xs)]", children: [
+        /* @__PURE__ */ d("label", { htmlFor: `${M}-hex`, className: "ds:text-[var(--font-size-xs)] ds:text-[var(--muted-foreground)]", children: x("ui.inputs.colorPicker.hex", "Hex") }),
+        /* @__PURE__ */ d("bdi", { dir: "ltr", children: /* @__PURE__ */ d(
           "input",
           {
             id: `${M}-hex`,
@@ -363,74 +363,74 @@ const Ie = [
           }
         ) })
       ] }),
-      /* @__PURE__ */ h("div", { className: "flex flex-col gap-[var(--spacing-sm)]", children: [
-        /* @__PURE__ */ l(
+      /* @__PURE__ */ h("div", { className: "ds:flex ds:flex-col ds:gap-[var(--spacing-sm)]", children: [
+        /* @__PURE__ */ d(
           O,
           {
             label: x("ui.inputs.colorPicker.hue", "Hue"),
             gradient: "linear-gradient(to right, hsl(0,100%,50%), hsl(60,100%,50%), hsl(120,100%,50%), hsl(180,100%,50%), hsl(240,100%,50%), hsl(300,100%,50%), hsl(360,100%,50%))",
             min: 0,
             max: 360,
-            value: s.h,
-            onChange: (t) => C({ ...s, h: t }),
+            value: o.h,
+            onChange: (t) => C({ ...o, h: t }),
             formatValue: (t) => `H ${t}°`,
             disabled: v
           }
         ),
-        /* @__PURE__ */ l(
+        /* @__PURE__ */ d(
           O,
           {
             label: x("ui.inputs.colorPicker.saturation", "Saturation"),
-            gradient: `linear-gradient(to right, hsl(${s.h},0%,${s.l}%), hsl(${s.h},100%,${s.l}%))`,
+            gradient: `linear-gradient(to right, hsl(${o.h},0%,${o.l}%), hsl(${o.h},100%,${o.l}%))`,
             min: 0,
             max: 100,
-            value: s.s,
-            onChange: (t) => C({ ...s, s: t }),
+            value: o.s,
+            onChange: (t) => C({ ...o, s: t }),
             formatValue: (t) => `S ${t}%`,
             disabled: v
           }
         ),
-        /* @__PURE__ */ l(
+        /* @__PURE__ */ d(
           O,
           {
             label: x("ui.inputs.colorPicker.lightness", "Lightness"),
-            gradient: `linear-gradient(to right, hsl(${s.h},${s.s}%,0%), hsl(${s.h},${s.s}%,50%), hsl(${s.h},${s.s}%,100%))`,
+            gradient: `linear-gradient(to right, hsl(${o.h},${o.s}%,0%), hsl(${o.h},${o.s}%,50%), hsl(${o.h},${o.s}%,100%))`,
             min: 0,
             max: 100,
-            value: s.l,
-            onChange: (t) => C({ ...s, l: t }),
+            value: o.l,
+            onChange: (t) => C({ ...o, l: t }),
             formatValue: (t) => `L ${t}%`,
             disabled: v
           }
         ),
-        d ? /* @__PURE__ */ h("div", { className: "flex flex-col gap-[var(--spacing-xs)]", children: [
-          /* @__PURE__ */ l("label", { className: "text-[var(--font-size-xs)] text-[var(--muted-foreground)]", children: x("ui.inputs.colorPicker.opacity", "Opacity") }),
-          /* @__PURE__ */ h("div", { className: "relative", children: [
-            /* @__PURE__ */ l(
+        c ? /* @__PURE__ */ h("div", { className: "ds:flex ds:flex-col ds:gap-[var(--spacing-xs)]", children: [
+          /* @__PURE__ */ d("label", { className: "ds:text-[var(--font-size-xs)] ds:text-[var(--muted-foreground)]", children: x("ui.inputs.colorPicker.opacity", "Opacity") }),
+          /* @__PURE__ */ h("div", { className: "ds:relative", children: [
+            /* @__PURE__ */ d(
               "div",
               {
-                className: `absolute inset-0 rounded-[var(--radius-full)] pointer-events-none ${Fe}`,
+                className: `ds:absolute ds:inset-0 ds:rounded-[var(--radius-full)] ds:pointer-events-none ${Fe}`,
                 "aria-hidden": "true"
               }
             ),
-            /* @__PURE__ */ l(
+            /* @__PURE__ */ d(
               "div",
               {
-                className: "absolute inset-0 rounded-[var(--radius-full)] pointer-events-none bg-[image:var(--opacity-gradient)]",
+                className: "ds:absolute ds:inset-0 ds:rounded-[var(--radius-full)] ds:pointer-events-none ds:bg-[image:var(--opacity-gradient)]",
                 style: {
-                  "--opacity-gradient": `linear-gradient(to right, hsla(${s.h},${s.s}%,${s.l}%,0), hsl(${s.h},${s.s}%,${s.l}%))`
+                  "--opacity-gradient": `linear-gradient(to right, hsla(${o.h},${o.s}%,${o.l}%,0), hsl(${o.h},${o.s}%,${o.l}%))`
                 },
                 "aria-hidden": "true"
               }
             ),
-            /* @__PURE__ */ l(
-              ne,
+            /* @__PURE__ */ d(
+              se,
               {
                 min: 0,
                 max: 100,
                 step: 1,
-                value: [Math.round(s.a * 100)],
-                onValueChange: ([t]) => C({ ...s, a: t / 100 }),
+                value: [Math.round(o.a * 100)],
+                onValueChange: ([t]) => C({ ...o, a: t / 100 }),
                 "aria-label": x("ui.inputs.colorPicker.opacity", "Opacity"),
                 formatValue: (t) => `${t}%`,
                 disabled: v,
@@ -440,27 +440,27 @@ const Ie = [
           ] })
         ] }) : null
       ] }),
-      z ? /* @__PURE__ */ h("div", { className: "flex items-center gap-[var(--spacing-sm)] text-[var(--font-size-sm)]", role: "status", "aria-live": "polite", children: [
-        /* @__PURE__ */ l("span", { className: "tabular-nums", children: x("ui.inputs.colorPicker.contrastRatio", { ratio: z.ratio.toFixed(1) }) }),
-        /* @__PURE__ */ l(te, { level: "AA", passes: z.aa, t: x }),
-        /* @__PURE__ */ l(te, { level: "AAA", passes: z.aaa, t: x })
+      z ? /* @__PURE__ */ h("div", { className: "ds:flex ds:items-center ds:gap-[var(--spacing-sm)] ds:text-[var(--font-size-sm)]", role: "status", "aria-live": "polite", children: [
+        /* @__PURE__ */ d("span", { className: "ds:tabular-nums", children: x("ui.inputs.colorPicker.contrastRatio", { ratio: z.ratio.toFixed(1) }) }),
+        /* @__PURE__ */ d(te, { level: "AA", passes: z.aa, t: x }),
+        /* @__PURE__ */ d(te, { level: "AAA", passes: z.aaa, t: x })
       ] }) : null,
-      /* @__PURE__ */ h("div", { className: "flex items-center gap-[var(--spacing-sm)]", children: [
-        /* @__PURE__ */ l(
+      /* @__PURE__ */ h("div", { className: "ds:flex ds:items-center ds:gap-[var(--spacing-sm)]", children: [
+        /* @__PURE__ */ d(
           "div",
           {
-            className: "size-8 rounded-[var(--radius-sm)] border border-[color:var(--border)] bg-[var(--swatch-bg)]",
-            style: { "--swatch-bg": $(s) },
+            className: "ds:size-8 ds:rounded-[var(--radius-sm)] ds:border ds:border-[color:var(--border)] ds:bg-[var(--swatch-bg)]",
+            style: { "--swatch-bg": $(o) },
             "aria-hidden": "true"
           }
         ),
-        /* @__PURE__ */ l("span", { className: "text-[var(--font-size-sm)] text-[var(--muted-foreground)] tabular-nums", children: B(s, i) })
+        /* @__PURE__ */ d("span", { className: "ds:text-[var(--font-size-sm)] ds:text-[var(--muted-foreground)] ds:tabular-nums", children: B(o, i) })
       ] })
     ] }), J = /* @__PURE__ */ h("div", { className: A ? He : Re, children: [
       be,
       pe
     ] });
-    return ce === "inline" ? /* @__PURE__ */ l(
+    return le === "inline" ? /* @__PURE__ */ d(
       "div",
       {
         ref: a,
@@ -473,7 +473,7 @@ const Ie = [
         children: J
       }
     ) : /* @__PURE__ */ h(I.Root, { open: ge, onOpenChange: ve, children: [
-      /* @__PURE__ */ l(I.Trigger, { asChild: !0, disabled: v, children: /* @__PURE__ */ h(
+      /* @__PURE__ */ d(I.Trigger, { asChild: !0, disabled: v, children: /* @__PURE__ */ h(
         "button",
         {
           ref: a,
@@ -484,61 +484,61 @@ const Ie = [
           className: Le({ size: p, className: D }),
           "data-testid": "color-picker-trigger",
           children: [
-            /* @__PURE__ */ l(
+            /* @__PURE__ */ d(
               "span",
               {
-                className: `inline-block size-5 rounded-[var(--radius-sm)] border border-[color:var(--border)] shrink-0 bg-[var(--swatch-bg)]${A ? "" : " me-[var(--spacing-sm)]"}`,
+                className: `ds:inline-block ds:size-5 ds:rounded-[var(--radius-sm)] ds:border ds:border-[color:var(--border)] ds:shrink-0 ds:bg-[var(--swatch-bg)]${A ? "" : " me-[var(--spacing-sm)]"}`,
                 "aria-hidden": "true",
-                style: { "--swatch-bg": $(s) }
+                style: { "--swatch-bg": $(o) }
               }
             ),
-            A ? null : /* @__PURE__ */ l("span", { className: "text-start truncate tabular-nums", children: B(s, i) })
+            A ? null : /* @__PURE__ */ d("span", { className: "ds:text-start ds:truncate ds:tabular-nums", children: B(o, i) })
           ]
         }
       ) }),
-      /* @__PURE__ */ l(I.Portal, { children: /* @__PURE__ */ l(I.Content, { sideOffset: 4, align: "start", className: _e, children: J }) })
+      /* @__PURE__ */ d(I.Portal, { children: /* @__PURE__ */ d(I.Content, { sideOffset: 4, align: "start", className: _e, children: J }) })
     ] });
   }
 );
 Oe.displayName = "ColorPicker";
-function te({ level: e, passes: a, t: n }) {
-  return /* @__PURE__ */ h("span", { className: "inline-flex items-center gap-[var(--spacing-xs)]", children: [
-    /* @__PURE__ */ l("abbr", { title: `Web Content Accessibility Guidelines Level ${e}`, className: "no-underline font-medium", children: e }),
-    a ? /* @__PURE__ */ l(oe, { "aria-hidden": "true", className: "size-4 text-[var(--success)]" }) : /* @__PURE__ */ l(Ae, { "aria-hidden": "true", className: "size-4 text-[var(--destructive)]" }),
-    /* @__PURE__ */ l("span", { className: "sr-only", children: a ? n("ui.inputs.colorPicker.contrastPass", "Pass") : n("ui.inputs.colorPicker.contrastFail", "Fail") })
+function te({ level: e, passes: a, t: s }) {
+  return /* @__PURE__ */ h("span", { className: "ds:inline-flex ds:items-center ds:gap-[var(--spacing-xs)]", children: [
+    /* @__PURE__ */ d("abbr", { title: `Web Content Accessibility Guidelines Level ${e}`, className: "ds:no-underline ds:font-medium", children: e }),
+    a ? /* @__PURE__ */ d(ne, { "aria-hidden": "true", className: "ds:size-4 ds:text-[var(--success)]" }) : /* @__PURE__ */ d(Ae, { "aria-hidden": "true", className: "ds:size-4 ds:text-[var(--destructive)]" }),
+    /* @__PURE__ */ d("span", { className: "ds:sr-only", children: a ? s("ui.inputs.colorPicker.contrastPass", "Pass") : s("ui.inputs.colorPicker.contrastFail", "Fail") })
   ] });
 }
 function O({
   label: e,
   gradient: a,
-  min: n,
+  min: s,
   max: r,
-  value: o,
+  value: n,
   onChange: i,
-  formatValue: d,
+  formatValue: c,
   disabled: m
 }) {
-  return /* @__PURE__ */ h("div", { className: "flex flex-col gap-[var(--spacing-xs)]", children: [
-    /* @__PURE__ */ l("label", { className: "text-[var(--font-size-xs)] text-[var(--muted-foreground)]", children: e }),
-    /* @__PURE__ */ h("div", { className: "relative", children: [
-      /* @__PURE__ */ l(
+  return /* @__PURE__ */ h("div", { className: "ds:flex ds:flex-col ds:gap-[var(--spacing-xs)]", children: [
+    /* @__PURE__ */ d("label", { className: "ds:text-[var(--font-size-xs)] ds:text-[var(--muted-foreground)]", children: e }),
+    /* @__PURE__ */ h("div", { className: "ds:relative", children: [
+      /* @__PURE__ */ d(
         "div",
         {
-          className: "absolute inset-0 rounded-[var(--radius-full)] pointer-events-none bg-[image:var(--slider-gradient)]",
+          className: "ds:absolute ds:inset-0 ds:rounded-[var(--radius-full)] ds:pointer-events-none ds:bg-[image:var(--slider-gradient)]",
           style: { "--slider-gradient": a },
           "aria-hidden": "true"
         }
       ),
-      /* @__PURE__ */ l(
-        ne,
+      /* @__PURE__ */ d(
+        se,
         {
-          min: n,
+          min: s,
           max: r,
           step: 1,
-          value: [o],
+          value: [n],
           onValueChange: ([b]) => i(b),
           "aria-label": e,
-          formatValue: d,
+          formatValue: c,
           disabled: m,
           className: ie
         }
@@ -551,4 +551,4 @@ export {
   Ye as B,
   Oe as C
 };
-//# sourceMappingURL=color-picker-CiotzQJF.js.map
+//# sourceMappingURL=color-picker-OKKF3Dww.js.map