@alfadocs/ui-kit 0.66.0 → 0.67.1

package/dist/_chunks/{color-picker-9tL7pz5y.js → color-picker-FXpItIaF.js}

@@ -1,14 +1,14 @@
-import { jsx as l, jsxs as h, Fragment as we } from "react/jsx-runtime";
-import { forwardRef as $e, useId as Ne, useState as T, useMemo as I, useCallback as ye, useRef as O, useEffect as Z } from "react";
-import * as L from "@radix-ui/react-popover";
+import { jsx as l, jsxs as h, Fragment as ke } from "react/jsx-runtime";
+import { forwardRef as $e, useId as ye, useState as z, useMemo as T, useCallback as Ne, useRef as G, useEffect as Z } from "react";
+import * as H from "@radix-ui/react-popover";
 import { c as te } from "./index-D2ZczOXr.js";
 import { useTranslation as Pe } from "react-i18next";
 import { u as Ae } from "./form-field-context-B3APVHKx.js";
 import { S as ae } from "./slider-BHWzXdjt.js";
-import { u as Me } from "./registry-nPAVE19X.js";
+import { u as Se } from "./registry-nPAVE19X.js";
 import { C as re } from "./check-DPdL_Sm7.js";
-import { X as Se } from "./x-CCcI3eJp.js";
-const Te = {
+import { X as Me } from "./x-CCcI3eJp.js";
+const ze = {
   id: "color-picker",
   capabilities: ["pick"],
   state: {
@@ -43,65 +43,65 @@ const Te = {
     }
   }
 };
-function Ie(e) {
+function Te(e) {
   let t = e.startsWith("#") ? e.slice(1) : e;
   (t.length === 3 || t.length === 4) && (t = t.split("").map((c) => c + c).join(""));
-  const r = parseInt(t.slice(0, 2), 16) / 255, a = parseInt(t.slice(2, 4), 16) / 255, n = parseInt(t.slice(4, 6), 16) / 255, i = t.length === 8 ? parseInt(t.slice(6, 8), 16) / 255 : 1;
-  return ne(r, a, n, i);
+  const r = parseInt(t.slice(0, 2), 16) / 255, a = parseInt(t.slice(2, 4), 16) / 255, n = parseInt(t.slice(4, 6), 16) / 255, d = t.length === 8 ? parseInt(t.slice(6, 8), 16) / 255 : 1;
+  return ne(r, a, n, d);
 }
 function ne(e, t, r, a) {
-  const n = Math.max(e, t, r), i = Math.min(e, t, r), c = (n + i) / 2;
-  let m = 0, C = 0;
-  if (n !== i) {
-    const w = n - i;
-    C = c > 0.5 ? w / (2 - n - i) : w / (n + i), n === e ? m = ((t - r) / w + (t < r ? 6 : 0)) / 6 : n === t ? m = ((r - e) / w + 2) / 6 : m = ((e - t) / w + 4) / 6;
+  const n = Math.max(e, t, r), d = Math.min(e, t, r), c = (n + d) / 2;
+  let m = 0, w = 0;
+  if (n !== d) {
+    const x = n - d;
+    w = c > 0.5 ? x / (2 - n - d) : x / (n + d), n === e ? m = ((t - r) / x + (t < r ? 6 : 0)) / 6 : n === t ? m = ((r - e) / x + 2) / 6 : m = ((e - t) / x + 4) / 6;
   }
   return {
     h: Math.round(m * 360),
-    s: Math.round(C * 100),
+    s: Math.round(w * 100),
     l: Math.round(c * 100),
     a: Math.round(a * 100) / 100
   };
 }
-function b(e) {
-  const { r: t, g: r, b: a } = K(e), n = (c) => Math.round(c * 255).toString(16).padStart(2, "0"), i = `#${n(t)}${n(r)}${n(a)}`;
-  return e.a < 1 ? `${i}${n(e.a)}` : i;
+function C(e) {
+  const { r: t, g: r, b: a } = W(e), n = (c) => Math.round(c * 255).toString(16).padStart(2, "0"), d = `#${n(t)}${n(r)}${n(a)}`;
+  return e.a < 1 ? `${d}${n(e.a)}` : d;
 }
-function ze(e) {
-  const { r: t, g: r, b: a } = K(e), n = Math.round(t * 255), i = Math.round(r * 255), c = Math.round(a * 255);
-  return e.a < 1 ? `rgba(${n}, ${i}, ${c}, ${e.a})` : `rgba(${n}, ${i}, ${c}, 1)`;
+function Ee(e) {
+  const { r: t, g: r, b: a } = W(e), n = Math.round(t * 255), d = Math.round(r * 255), c = Math.round(a * 255);
+  return e.a < 1 ? `rgba(${n}, ${d}, ${c}, ${e.a})` : `rgba(${n}, ${d}, ${c}, 1)`;
 }
-function K(e) {
+function W(e) {
   const t = e.h / 360, r = e.s / 100, a = e.l / 100;
   if (r === 0)
     return { r: a, g: a, b: a };
-  const n = a < 0.5 ? a * (1 + r) : a + r - a * r, i = 2 * a - n;
+  const n = a < 0.5 ? a * (1 + r) : a + r - a * r, d = 2 * a - n;
   return {
-    r: G(i, n, t + 1 / 3),
-    g: G(i, n, t),
-    b: G(i, n, t - 1 / 3)
+    r: j(d, n, t + 1 / 3),
+    g: j(d, n, t),
+    b: j(d, n, t - 1 / 3)
   };
 }
-function G(e, t, r) {
+function j(e, t, r) {
   let a = r;
   return a < 0 && (a += 1), a > 1 && (a -= 1), a < 1 / 6 ? e + (t - e) * 6 * a : a < 1 / 2 ? t : a < 2 / 3 ? e + (t - e) * (2 / 3 - a) * 6 : e;
 }
 function D(e, t) {
   switch (t) {
     case "hex":
-      return b(e);
+      return C(e);
     case "hsl":
       return e.a < 1 ? `hsla(${e.h}, ${e.s}%, ${e.l}%, ${e.a})` : `hsl(${e.h}, ${e.s}%, ${e.l}%)`;
     case "rgba":
-      return ze(e);
+      return Ee(e);
   }
 }
-function k(e) {
+function $(e) {
   const t = e.trim();
   if (!t) return null;
   if (t.startsWith("#")) {
     const n = t.slice(1);
-    return !/^[0-9a-fA-F]{3,8}$/.test(n) || ![3, 4, 6, 8].includes(n.length) ? null : Ie(t);
+    return !/^[0-9a-fA-F]{3,8}$/.test(n) || ![3, 4, 6, 8].includes(n.length) ? null : Te(t);
   }
   const r = t.match(
     /^hsla?\(\s*([\d.]+)\s*[,/]\s*([\d.]+)%?\s*[,/]\s*([\d.]+)%?\s*(?:[,/]\s*([\d.]+))?\s*\)$/
@@ -117,26 +117,26 @@ function k(e) {
     /^rgba?\(\s*([\d.]+)\s*[,/]\s*([\d.]+)\s*[,/]\s*([\d.]+)\s*(?:[,/]\s*([\d.]+))?\s*\)$/
   );
   if (a) {
-    const n = parseFloat(a[1]) / 255, i = parseFloat(a[2]) / 255, c = parseFloat(a[3]) / 255, m = a[4] !== void 0 ? parseFloat(a[4]) : 1;
-    return ne(n, i, c, m);
+    const n = parseFloat(a[1]) / 255, d = parseFloat(a[2]) / 255, c = parseFloat(a[3]) / 255, m = a[4] !== void 0 ? parseFloat(a[4]) : 1;
+    return ne(n, d, c, m);
   }
   return null;
 }
 function ee(e) {
-  const { r: t, g: r, b: a } = K(e), n = (i) => i <= 0.03928 ? i / 12.92 : Math.pow((i + 0.055) / 1.055, 2.4);
+  const { r: t, g: r, b: a } = W(e), n = (d) => d <= 0.03928 ? d / 12.92 : Math.pow((d + 0.055) / 1.055, 2.4);
   return 0.2126 * n(t) + 0.7152 * n(r) + 0.0722 * n(a);
 }
-function Ee(e, t) {
-  const r = ee(e), a = ee(t), n = Math.max(r, a), i = Math.min(r, a);
-  return Math.round((n + 0.05) / (i + 0.05) * 100) / 100;
+function Ie(e, t) {
+  const r = ee(e), a = ee(t), n = Math.max(r, a), d = Math.min(r, a);
+  return Math.round((n + 0.05) / (d + 0.05) * 100) / 100;
 }
-function He(e) {
+function Le(e) {
   return e >= 4.5;
 }
-function Le(e) {
+function Re(e) {
   return e >= 7;
 }
-const Re = [
+const He = [
   { name: "Pink 500", hex: "#e91e63", textColor: "#ffffff" },
   { name: "Black", hex: "#000000", textColor: "#ffffff" },
   { name: "Blue 500", hex: "#2196f3", textColor: "#ffffff" },
@@ -167,7 +167,7 @@ const Re = [
   { name: "Orange 900", hex: "#e65100", textColor: "#000000" },
   { name: "White", hex: "#ffffff", textColor: "#000000" },
   { name: "Yellow 500", hex: "#ffeb3b", textColor: "#000000" }
-], ss = [
+], ts = [
   { name: "Blue 300", hex: "#70738c" },
   { name: "Blue 500", hex: "#292e53" },
   { name: "Blue 700", hex: "#1d213b" },
@@ -205,10 +205,9 @@ const Re = [
     },
     defaultVariants: { size: "md" }
   }
-), Ve = te(
+), _e = te(
   [
     "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)]",
@@ -223,21 +222,38 @@ const Re = [
       selected: {
         true: "ds:border-[var(--primary)] ds:shadow-[var(--shadow-md)]",
         false: "ds:border-transparent"
+      },
+      // Swatch footprint. md/lg honour --min-target-size (44/48px) for touch.
+      // sm is a denser 28px swatch for toolbar/inline use — comfortably above
+      // the WCAG 2.5.8 (AA) 24px minimum, with the grid gap providing spacing.
+      // sm intentionally does NOT take the accessible-theme --min-target-size
+      // bump (48px) — a dense colour grid is opt-in and the full roving-tabindex
+      // keyboard path is the mitigation for the sub-AAA pointer target.
+      size: {
+        // sm = 28px: clears WCAG 2.5.8 (AA, 24px) but intentionally opts out of
+        // the accessible-theme 48px min-target bump — a conscious, signed-off
+        // trade-off (dense opt-in grid; keyboard roving-tabindex is the mitigation).
+        sm: "ds:min-w-7 ds:min-h-7",
+        md: "ds:min-w-[var(--min-target-size)] ds:min-h-[var(--min-target-size)]",
+        lg: "ds:min-w-[var(--min-target-size)] ds:min-h-[var(--min-target-size)]"
       }
     },
-    defaultVariants: { selected: !1 }
+    defaultVariants: { selected: !1, size: "md" }
   }
-), _e = [
+), Ve = [
   "ds:flex ds:flex-col ds:gap-[var(--spacing-md)]",
   "ds:rounded-[var(--radius-md)] ds:bg-[var(--background)] ds:text-[var(--foreground)]",
   "ds:p-[var(--spacing-md)]"
-].join(" "), Be = [
+].join(" "), Oe = [
   "ds:bg-[image:repeating-conic-gradient(var(--color-grey-700)_0%_25%,transparent_0%_50%)]",
   "ds:bg-[size:8px_8px]"
-].join(" "), Oe = [
+].join(" "), Be = [
   "ds:rounded-[var(--radius-md)] ds:bg-[var(--background)] ds:text-[var(--foreground)]",
   "ds:p-[var(--spacing-sm)]"
 ].join(" "), Ge = [
+  "ds:rounded-[var(--radius-md)] ds:bg-[var(--background)] ds:text-[var(--foreground)]",
+  "ds:p-[var(--spacing-xs)]"
+].join(" "), je = [
   "ds:z-[var(--z-popover)] ds:rounded-[var(--radius-md)]",
   "ds:border ds:border-[color:var(--border)] ds:bg-[var(--background)] ds:shadow-[var(--shadow-lg)]",
   "ds:w-72",
@@ -247,85 +263,86 @@ const Re = [
   "ds:data-[side=left]:slide-in-from-right-2 ds:data-[side=right]:slide-in-from-left-2"
 ].join(" "), De = [
   "ds:w-full ds:rounded-[var(--radius-sm)] ds:border ds:bg-[var(--background)] ds:text-[var(--foreground)]",
-  "ds:ps-[var(--spacing-sm)] ds:pe-[var(--spacing-sm)] ds:py-[var(--spacing-xs)] ds:text-[var(--font-size-sm)]",
+  "ds:ps-[var(--spacing-sm)] ds:pe-[var(--spacing-sm)] ds:py-[var(--spacing-xs)] ds:text-[length:var(--font-size-sm)]",
   "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",
   "ds:transition-colors ds:duration-[var(--animation-duration)] ds:motion-reduce:transition-none"
-].join(" "), oe = "ds:[&>span:first-child]:bg-transparent ds:[&>span:first-child>span]:bg-transparent", je = $e(
+].join(" "), oe = "ds:[&>span:first-child]:bg-transparent ds:[&>span:first-child>span]:bg-transparent", Ke = $e(
   (e, t) => {
     const {
       value: r,
       defaultValue: a,
       onChange: n,
-      format: i = "hex",
+      format: d = "hex",
       allowOpacity: c = !1,
       palette: m,
-      against: C,
-      size: w = "md",
+      against: w,
+      size: x = "md",
       disabled: ie = !1,
       variant: de = "inline",
-      compact: A = !0,
-      className: W
-    } = e, { t: g } = Pe(), y = Ae(), le = Ne(), $ = y.id || le, x = y.disabled || ie, z = r !== void 0, [U, ce] = T(() => {
+      compact: M = !0,
+      className: U
+    } = e, { t: g } = Pe(), P = Ae(), le = ye(), y = P.id || le, v = P.disabled || ie, E = r !== void 0, [X, ce] = z(() => {
       const s = r ?? a;
       if (s) {
-        const d = k(s);
-        if (d) return d;
+        const i = $(s);
+        if (i) return i;
       }
       return { h: 0, s: 100, l: 50, a: 1 };
-    }), o = I(() => {
-      if (z && r) {
-        const s = k(r);
+    }), o = T(() => {
+      if (E && r) {
+        const s = $(r);
         if (s) return s;
       }
-      return U;
-    }, [z, r, U]), v = ye(
+      return X;
+    }, [E, r, X]), b = Ne(
       (s) => {
-        const d = c ? s : { ...s, a: 1 };
-        z || ce(d), n == null || n(D(d, i));
+        const i = c ? s : { ...s, a: 1 };
+        E || ce(i), n == null || n(D(i, d));
       },
-      [c, i, z, n]
-    ), [X, R] = T(() => b(o)), [fe, E] = T(!1), N = O(void 0), F = O(o);
-    F.current = o, Z(() => {
-      R(b(o)), E(!1), N.current !== void 0 && (clearTimeout(N.current), N.current = void 0);
+      [c, d, E, n]
+    ), [Y, F] = z(() => C(o)), [fe, I] = z(!1), N = G(void 0), _ = G(o);
+    _.current = o, Z(() => {
+      F(C(o)), I(!1), N.current !== void 0 && (clearTimeout(N.current), N.current = void 0);
     }, [o]), Z(() => () => {
       N.current !== void 0 && clearTimeout(N.current);
     }, []);
     const ue = () => {
-      const s = k(X);
-      s ? (E(!1), v(s)) : (E(!0), N.current = setTimeout(() => {
-        N.current = void 0, E(!1), R(b(F.current));
+      const s = $(Y);
+      s ? (I(!1), b(s)) : (I(!0), N.current = setTimeout(() => {
+        N.current = void 0, I(!1), F(C(_.current));
       }, 800));
-    }, P = I(() => m ? m.map(
+    }, A = T(() => m ? m.map(
       (s) => typeof s == "string" ? { name: s.toUpperCase(), hex: s } : s
-    ) : Re, [m]), he = b(o), V = I(
-      () => P.map((s) => {
-        const d = k(s.hex);
-        return d ? b(d).toLowerCase() : null;
+    ) : He, [m]), he = C(o), V = T(
+      () => A.map((s) => {
+        const i = $(s.hex);
+        return i ? C(i).toLowerCase() : null;
       }),
-      [P]
+      [A]
     ).findIndex(
       (s) => s !== null && s === he.toLowerCase()
-    ), Y = O(null), [p, q] = T(
+    ), L = G(null), [p, q] = z(
       V >= 0 ? V : 0
     ), me = (s) => {
       var f;
-      const d = (f = Y.current) == null ? void 0 : f.querySelectorAll('[role="gridcell"]');
-      d != null && d[s] && (d[s].focus(), q(s));
+      const i = (f = L.current) == null ? void 0 : f.querySelectorAll('[role="gridcell"]');
+      i != null && i[s] && (i[s].focus(), q(s));
     }, ge = (s) => {
-      if (x) return;
-      const d = P.length;
+      if (v) return;
+      const i = A.length;
       let f = p;
+      const k = (typeof window < "u" && L.current ? window.getComputedStyle(L.current).direction === "rtl" : !1) ? -1 : 1;
       switch (s.key) {
         case "ArrowRight":
-          f = (p + 1) % d;
+          f = (p + k + i) % i;
           break;
         case "ArrowLeft":
-          f = (p - 1 + d) % d;
+          f = (p - k + i) % i;
           break;
         case "ArrowDown":
-          f = Math.min(p + u, d - 1);
+          f = Math.min(p + u, i - 1);
           break;
         case "ArrowUp":
           f = Math.max(p - u, 0);
@@ -336,59 +353,59 @@ const Re = [
         case "End":
           f = Math.min(
             Math.floor(p / u) * u + u - 1,
-            d - 1
+            i - 1
           );
           break;
         case "PageUp":
           f = p % u;
           break;
         case "PageDown": {
-          const M = Math.floor((d - 1) / u) * u;
-          f = Math.min(M + p % u, d - 1);
+          const S = Math.floor((i - 1) / u) * u;
+          f = Math.min(S + p % u, i - 1);
           break;
         }
         case "Enter":
         case " ": {
           s.preventDefault();
-          const M = k(P[p].hex);
-          M && v(M);
+          const S = $(A[p].hex);
+          S && b(S);
           return;
         }
         default:
           return;
       }
       s.preventDefault(), me(f);
-    }, [pe, xe] = T(!1), ve = I(
+    }, [pe, xe] = z(!1), ve = T(
       () => ({
-        getValue: () => b(F.current),
+        getValue: () => C(_.current),
         setValue: (s) => {
-          const d = k(s);
-          d && v(d);
+          const i = $(s);
+          i && b(i);
         }
       }),
-      [v]
+      [b]
     );
-    Me(Te, ve, $);
-    const H = I(() => {
-      if (!C) return null;
-      const s = k(C);
+    Se(ze, ve, y);
+    const R = T(() => {
+      if (!w) return null;
+      const s = $(w);
       if (!s) return null;
-      const d = Ee(o, s);
-      return { ratio: d, aa: He(d), aaa: Le(d) };
-    }, [C, o]), be = (
+      const i = Ie(o, s);
+      return { ratio: i, aa: Le(i), aaa: Re(i) };
+    }, [w, o]), be = (
       // eslint-disable-next-line jsx-a11y/interactive-supports-focus -- inner gridcells are individually focusable via roving tabindex
       /* @__PURE__ */ l(
         "div",
         {
-          ref: Y,
+          ref: L,
           role: "grid",
-          "aria-label": g("inputs.colorPicker.paletteLabel", "Colour swatches"),
+          "aria-label": g("inputs.colorPicker.paletteLabel", "Colour palette"),
           onKeyDown: ge,
           className: "ds:grid ds:grid-cols-6 ds:gap-[var(--spacing-xs)]",
-          children: P.map((s, d) => {
-            const f = Math.floor(d / u) * u;
-            return d === f ? /* @__PURE__ */ l("div", { role: "row", className: "ds:contents", children: P.slice(f, f + u).map((S, ke) => {
-              const _ = f + ke, B = _ === V;
+          children: A.map((s, i) => {
+            const f = Math.floor(i / u) * u;
+            return i === f ? /* @__PURE__ */ l("div", { role: "row", className: "ds:contents", children: A.slice(f, f + u).map((k, S) => {
+              const O = f + S, B = O === V;
               return (
                 // eslint-disable-next-line jsx-a11y/click-events-have-key-events -- parent grid handles keyboard navigation via onKeyDown
                 /* @__PURE__ */ l(
@@ -397,17 +414,17 @@ const Re = [
                     role: "gridcell",
                     "aria-selected": B,
                     "aria-label": g("inputs.colorPicker.swatchLabel", {
-                      name: S.name,
-                      hex: S.hex
+                      name: k.name,
+                      hex: k.hex
                     }),
-                    tabIndex: _ === p ? 0 : -1,
+                    tabIndex: O === p ? 0 : -1,
                     onClick: () => {
-                      if (x) return;
-                      const Q = k(S.hex);
-                      Q && v(Q), q(_);
+                      if (v) return;
+                      const Q = $(k.hex);
+                      Q && b(Q), q(O);
                     },
-                    className: Ve({ selected: B }),
-                    style: { "--swatch-bg": S.hex },
+                    className: _e({ selected: B, size: x }),
+                    style: { "--swatch-bg": k.hex },
                     children: B ? /* @__PURE__ */ l(
                       re,
                       {
@@ -416,19 +433,19 @@ const Re = [
                       }
                     ) : null
                   },
-                  S.hex
+                  k.hex
                 )
               );
-            }) }, d) : null;
+            }) }, i) : null;
           })
         }
       )
-    ), Ce = A ? null : /* @__PURE__ */ h(we, { children: [
+    ), Ce = M ? null : /* @__PURE__ */ h(ke, { children: [
       /* @__PURE__ */ h("div", { className: "ds:flex ds:flex-col ds:gap-[var(--spacing-xs)]", children: [
         /* @__PURE__ */ l(
           "label",
           {
-            htmlFor: `${$}-hex`,
+            htmlFor: `${y}-hex`,
             className: "ds:text-[length:var(--font-size-xs)] ds:text-[var(--muted-foreground)]",
             children: g("inputs.colorPicker.hex", "Hex")
           }
@@ -436,11 +453,11 @@ const Re = [
         /* @__PURE__ */ l("bdi", { dir: "ltr", children: /* @__PURE__ */ l(
           "input",
           {
-            id: `${$}-hex`,
+            id: `${y}-hex`,
             type: "text",
-            value: X,
-            disabled: x,
-            onChange: (s) => R(s.target.value),
+            value: Y,
+            disabled: v,
+            onChange: (s) => F(s.target.value),
             onBlur: ue,
             className: `${De} ${fe ? "ds:border-[var(--destructive)]" : "ds:border-[color:var(--border)]"}`
           }
@@ -448,42 +465,42 @@ const Re = [
       ] }),
       /* @__PURE__ */ h("div", { className: "ds:flex ds:flex-col ds:gap-[var(--spacing-sm)]", children: [
         /* @__PURE__ */ l(
-          j,
+          K,
           {
             label: g("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: o.h,
-            onChange: (s) => v({ ...o, h: s }),
+            onChange: (s) => b({ ...o, h: s }),
             formatValue: (s) => `H ${s}°`,
-            disabled: x
+            disabled: v
           }
         ),
         /* @__PURE__ */ l(
-          j,
+          K,
           {
             label: g("inputs.colorPicker.saturation", "Saturation"),
             gradient: `linear-gradient(to right, hsl(${o.h},0%,${o.l}%), hsl(${o.h},100%,${o.l}%))`,
             min: 0,
             max: 100,
             value: o.s,
-            onChange: (s) => v({ ...o, s }),
+            onChange: (s) => b({ ...o, s }),
             formatValue: (s) => `S ${s}%`,
-            disabled: x
+            disabled: v
           }
         ),
         /* @__PURE__ */ l(
-          j,
+          K,
           {
             label: g("inputs.colorPicker.lightness", "Lightness"),
             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: o.l,
-            onChange: (s) => v({ ...o, l: s }),
+            onChange: (s) => b({ ...o, l: s }),
             formatValue: (s) => `L ${s}%`,
-            disabled: x
+            disabled: v
           }
         ),
         c ? /* @__PURE__ */ h("div", { className: "ds:flex ds:flex-col ds:gap-[var(--spacing-xs)]", children: [
@@ -492,7 +509,7 @@ const Re = [
             /* @__PURE__ */ l(
               "div",
               {
-                className: `ds:absolute ds:inset-0 ds:rounded-[var(--radius-full)] ds:pointer-events-none ${Be}`,
+                className: `ds:absolute ds:inset-0 ds:rounded-[var(--radius-full)] ds:pointer-events-none ${Oe}`,
                 "aria-hidden": "true"
               }
             ),
@@ -513,17 +530,17 @@ const Re = [
                 max: 100,
                 step: 1,
                 value: [Math.round(o.a * 100)],
-                onValueChange: ([s]) => v({ ...o, a: s / 100 }),
+                onValueChange: ([s]) => b({ ...o, a: s / 100 }),
                 "aria-label": g("inputs.colorPicker.opacity", "Opacity"),
                 formatValue: (s) => `${s}%`,
-                disabled: x,
+                disabled: v,
                 className: oe
               }
             )
           ] })
         ] }) : null
       ] }),
-      H ? /* @__PURE__ */ h(
+      R ? /* @__PURE__ */ h(
         "div",
         {
           className: "ds:flex ds:items-center ds:gap-[var(--spacing-sm)] ds:text-[length:var(--font-size-sm)]",
@@ -531,10 +548,10 @@ const Re = [
           "aria-live": "polite",
           children: [
             /* @__PURE__ */ l("span", { className: "ds:tabular-nums", children: g("inputs.colorPicker.contrastRatio", {
-              ratio: H.ratio.toFixed(1)
+              ratio: R.ratio.toFixed(1)
             }) }),
-            /* @__PURE__ */ l(se, { level: "AA", passes: H.aa, t: g }),
-            /* @__PURE__ */ l(se, { level: "AAA", passes: H.aaa, t: g })
+            /* @__PURE__ */ l(se, { level: "AA", passes: R.aa, t: g }),
+            /* @__PURE__ */ l(se, { level: "AAA", passes: R.aaa, t: g })
           ]
         }
       ) : null,
@@ -543,70 +560,76 @@ const Re = [
           "div",
           {
             className: "ds:size-8 ds:rounded-[var(--radius-sm)] ds:border ds:border-[color:var(--border)] ds:bg-[var(--swatch-bg)]",
-            style: { "--swatch-bg": b(o) },
+            style: { "--swatch-bg": C(o) },
             "aria-hidden": "true"
           }
         ),
-        /* @__PURE__ */ l("span", { className: "ds:text-[length:var(--font-size-sm)] ds:text-[var(--muted-foreground)] ds:tabular-nums", children: D(o, i) })
+        /* @__PURE__ */ l("span", { className: "ds:text-[length:var(--font-size-sm)] ds:text-[var(--muted-foreground)] ds:tabular-nums", children: D(o, d) })
       ] })
-    ] }), J = /* @__PURE__ */ h("div", { className: A ? Oe : _e, children: [
-      be,
-      Ce
-    ] });
+    ] }), J = /* @__PURE__ */ h(
+      "div",
+      {
+        className: M ? x === "sm" ? Ge : Be : Ve,
+        children: [
+          be,
+          Ce
+        ]
+      }
+    );
     return de === "inline" ? /* @__PURE__ */ l(
       "div",
       {
         ref: t,
-        id: $,
-        className: W,
-        "aria-describedby": y.describedBy || void 0,
-        "aria-invalid": y.invalid || void 0,
-        "aria-disabled": x || void 0,
+        id: y,
+        className: U,
+        "aria-describedby": P.describedBy || void 0,
+        "aria-invalid": P.invalid || void 0,
+        "aria-disabled": v || void 0,
         "data-component": "color-picker",
-        "data-component-id": $,
+        "data-component-id": y,
         "data-testid": "color-picker",
         children: J
       }
-    ) : /* @__PURE__ */ h(L.Root, { open: pe, onOpenChange: xe, children: [
-      /* @__PURE__ */ l(L.Trigger, { asChild: !0, disabled: x, children: /* @__PURE__ */ h(
+    ) : /* @__PURE__ */ h(H.Root, { open: pe, onOpenChange: xe, children: [
+      /* @__PURE__ */ l(H.Trigger, { asChild: !0, disabled: v, children: /* @__PURE__ */ h(
         "button",
         {
           ref: t,
           type: "button",
-          id: $,
-          "aria-describedby": y.describedBy || void 0,
-          "aria-invalid": y.invalid || void 0,
-          "aria-label": A ? g("inputs.colorPicker.triggerLabel", "Choose a colour") : void 0,
-          className: Fe({ size: w, className: W }),
+          id: y,
+          "aria-describedby": P.describedBy || void 0,
+          "aria-invalid": P.invalid || void 0,
+          "aria-label": M ? g("inputs.colorPicker.triggerLabel", "Choose colour") : void 0,
+          className: Fe({ size: x, className: U }),
           "data-component": "color-picker",
-          "data-component-id": $,
+          "data-component-id": y,
           "data-testid": "color-picker-trigger",
           children: [
             /* @__PURE__ */ l(
               "span",
               {
-                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 ? "" : " ds: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)]${M ? "" : " ds:me-[var(--spacing-sm)]"}`,
                 "aria-hidden": "true",
-                style: { "--swatch-bg": b(o) }
+                style: { "--swatch-bg": C(o) }
               }
             ),
-            A ? null : /* @__PURE__ */ l("span", { className: "ds:text-start ds:truncate ds:tabular-nums", children: D(o, i) })
+            M ? null : /* @__PURE__ */ l("span", { className: "ds:text-start ds:truncate ds:tabular-nums", children: D(o, d) })
           ]
         }
       ) }),
-      /* @__PURE__ */ l(L.Portal, { children: /* @__PURE__ */ l(
-        L.Content,
+      /* @__PURE__ */ l(H.Portal, { children: /* @__PURE__ */ l(
+        H.Content,
         {
           sideOffset: 4,
           align: "start",
-          className: Ge,
+          className: je,
           children: J
         }
       ) })
     ] });
   }
 );
-je.displayName = "ColorPicker";
+Ke.displayName = "ColorPicker";
 function se({
   level: e,
   passes: t,
@@ -628,7 +651,7 @@ function se({
         className: "ds:size-4 ds:text-[var(--success)]"
       }
     ) : /* @__PURE__ */ l(
-      Se,
+      Me,
       {
         "aria-hidden": "true",
         className: "ds:size-4 ds:text-[var(--destructive)]"
@@ -637,13 +660,13 @@ function se({
     /* @__PURE__ */ l("span", { className: "ds:sr-only", children: t ? r("inputs.colorPicker.contrastPass", "Pass") : r("inputs.colorPicker.contrastFail", "Fail") })
   ] });
 }
-function j({
+function K({
   label: e,
   gradient: t,
   min: r,
   max: a,
   value: n,
-  onChange: i,
+  onChange: d,
   formatValue: c,
   disabled: m
 }) {
@@ -665,7 +688,7 @@ function j({
           max: a,
           step: 1,
           value: [n],
-          onValueChange: ([C]) => i(C),
+          onValueChange: ([w]) => d(w),
           "aria-label": e,
           formatValue: c,
           disabled: m,
@@ -676,8 +699,8 @@ function j({
   ] });
 }
 export {
-  Re as A,
-  ss as B,
-  je as C
+  He as A,
+  ts as B,
+  Ke as C
 };
-//# sourceMappingURL=color-picker-9tL7pz5y.js.map
+//# sourceMappingURL=color-picker-FXpItIaF.js.map