lucent-ui 0.40.0 → 0.42.0

package/dist/{LucentProvider-Bm39MMvv.js → LucentProvider-tSCR4lQw.js}

@@ -1,7 +1,15 @@
-import { jsxs as T, jsx as f, Fragment as Ve } from "react/jsx-runtime";
-import { forwardRef as xe, useState as P, useRef as q, useEffect as ne, useLayoutEffect as me, useId as Ke, useCallback as ue, useContext as yt, createContext as wt } from "react";
-import { createPortal as Dt } from "react-dom";
-const kt = {
+import { jsxs as T, jsx as f, Fragment as Ye } from "react/jsx-runtime";
+import { forwardRef as he, useState as F, useRef as U, useEffect as re, useLayoutEffect as ve, useId as Ze, useCallback as fe, useContext as Dt, createContext as St } from "react";
+import { createPortal as kt } from "react-dom";
+function Mt(e) {
+  if (e === void 0) return;
+  const t = e.replace(/[\s\u0000-\u001F]+/g, "").toLowerCase();
+  if (t.startsWith("http://") || t.startsWith("https://") || t.startsWith("mailto:") || t.startsWith("tel:") || t.startsWith("#") || t.startsWith("/") || t.startsWith("?") || t.startsWith("."))
+    return e;
+  if (!/^[a-z][a-z0-9+.-]*:/i.test(t))
+    return e;
+}
+const zt = {
   primary: {
     background: "var(--lucent-accent-default)",
     color: "var(--lucent-accent-fg)",
@@ -37,15 +45,15 @@ const kt = {
     color: "var(--lucent-danger-text)",
     border: "1px solid transparent"
   }
-}, St = {
+}, Tt = {
   "2xs": { height: "22px", padding: "0 var(--lucent-space-2)", fontSize: "var(--lucent-font-size-xs)", borderRadius: "var(--lucent-radius-md)" },
   xs: { height: "26px", padding: "0 var(--lucent-space-3)", fontSize: "var(--lucent-font-size-xs)" },
   sm: { height: "calc(var(--lucent-space-8) * 0.5 + 18px)", padding: "0 var(--lucent-space-4)", fontSize: "var(--lucent-font-size-sm)" },
   md: { height: "calc(var(--lucent-space-10) * 0.5 + 22px)", padding: "0 var(--lucent-space-5)", fontSize: "var(--lucent-font-size-md)" },
   lg: { height: "calc(var(--lucent-space-12) * 0.5 + 26px)", padding: "0 var(--lucent-space-6)", fontSize: "var(--lucent-font-size-lg)" }
-}, Ye = xe(
-  ({ variant: e = "primary", size: t = "md", loading: s = !1, fullWidth: a = !1, spread: n = !1, leftIcon: r, rightIcon: o, chevron: c = !1, disableHoverStyles: u = !1, bordered: i = !0, href: d, target: g, rel: h, children: p, disabled: y, style: I, type: k, onClick: L, ...b }, m) => {
-    const w = y ?? s, R = !p && !s && (!!r || !!o), E = d !== void 0, X = E ? "a" : "button", A = {
+}, Je = he(
+  ({ variant: e = "primary", size: t = "md", loading: s = !1, fullWidth: a = !1, spread: n = !1, leftIcon: r, rightIcon: o, chevron: c = !1, disableHoverStyles: i = !1, bordered: d = !0, href: u, target: m, rel: h, children: b, disabled: v, style: B, type: I, onClick: S, ...p }, x) => {
+    const D = v ?? s, $ = !b && !s && (!!r || !!o), E = Mt(u), A = E !== void 0, H = A ? "a" : "button", N = {
       display: "inline-flex",
       alignItems: "center",
       justifyContent: n ? "space-between" : "center",
@@ -55,91 +63,91 @@ const kt = {
       lineHeight: 1,
       letterSpacing: "0.01em",
       borderRadius: "var(--lucent-radius-lg)",
-      cursor: w ? "not-allowed" : "pointer",
+      cursor: D ? "not-allowed" : "pointer",
       width: a ? "100%" : void 0,
       transition: "background var(--lucent-duration-fast) var(--lucent-easing-default), border-color var(--lucent-duration-fast) var(--lucent-easing-default), box-shadow var(--lucent-duration-fast) var(--lucent-easing-default), transform 80ms var(--lucent-easing-default)",
       whiteSpace: "nowrap",
       boxSizing: "border-box",
       outline: "none",
       margin: 0,
-      ...St[t],
-      ...R && { padding: 0, aspectRatio: "1" },
-      ...kt[e],
+      ...Tt[t],
+      ...$ && { padding: 0, aspectRatio: "1" },
+      ...zt[e],
       // Anchor reset — browsers underline <a> by default
-      ...E && { textDecoration: "none" },
-      ...I,
-      ...w && {
+      ...A && { textDecoration: "none" },
+      ...B,
+      ...D && {
         background: "color-mix(in srgb, var(--lucent-text-primary) 6%, transparent)",
         color: "var(--lucent-text-disabled)",
         borderColor: "transparent",
-        ...E && { pointerEvents: "none" }
+        ...A && { pointerEvents: "none" }
       },
       // hide border entirely when bordered prop is false
-      ...i === !1 && { border: "none" }
+      ...d === !1 && { border: "none" }
     };
     return /* @__PURE__ */ T(
-      X,
+      H,
       {
-        ref: m,
+        ref: x,
         "aria-busy": s,
-        style: A,
-        ...E ? {
+        style: N,
+        ...A ? {
           role: "link",
-          ...w ? { "aria-disabled": !0, tabIndex: -1 } : { href: d },
-          ...g !== void 0 && { target: g },
+          ...D ? { "aria-disabled": !0, tabIndex: -1 } : { href: E },
+          ...m !== void 0 && { target: m },
           ...h !== void 0 && { rel: h }
         } : {
-          disabled: w,
-          ...k !== void 0 && { type: k }
+          disabled: D,
+          ...I !== void 0 && { type: I }
         },
-        onMouseEnter: (D) => {
-          var C;
-          !w && !u && zt(D.currentTarget, e, i), (C = b.onMouseEnter) == null || C.call(b, D);
+        onMouseEnter: (k) => {
+          var R;
+          !D && !i && Bt(k.currentTarget, e, d), (R = p.onMouseEnter) == null || R.call(p, k);
         },
-        onMouseLeave: (D) => {
-          var C;
-          !w && !u && Tt(D.currentTarget, e, i), (C = b.onMouseLeave) == null || C.call(b, D);
+        onMouseLeave: (k) => {
+          var R;
+          !D && !i && $t(k.currentTarget, e, d), (R = p.onMouseLeave) == null || R.call(p, k);
         },
-        onMouseDown: (D) => {
-          var C;
-          if (!w) {
-            const B = e === "danger" || e === "danger-outline" || e === "danger-ghost" ? "color-mix(in srgb, var(--lucent-danger-default) 40%, transparent)" : "color-mix(in srgb, var(--lucent-accent-default) 40%, transparent)";
-            D.currentTarget.style.transform = "translateY(1px)", D.currentTarget.style.boxShadow = `0 0 0 4px ${B}`, D.currentTarget.dataset.pressed = "1";
+        onMouseDown: (k) => {
+          var R;
+          if (!D) {
+            const O = e === "danger" || e === "danger-outline" || e === "danger-ghost" ? "color-mix(in srgb, var(--lucent-danger-default) 40%, transparent)" : "color-mix(in srgb, var(--lucent-accent-default) 40%, transparent)";
+            k.currentTarget.style.transform = "translateY(1px)", k.currentTarget.style.boxShadow = `0 0 0 4px ${O}`, k.currentTarget.dataset.pressed = "1";
           }
-          (C = b.onMouseDown) == null || C.call(b, D);
+          (R = p.onMouseDown) == null || R.call(p, k);
         },
-        onMouseUp: (D) => {
-          var C;
-          D.currentTarget.style.transform = "", D.currentTarget.style.boxShadow = "", delete D.currentTarget.dataset.pressed, (C = b.onMouseUp) == null || C.call(b, D);
+        onMouseUp: (k) => {
+          var R;
+          k.currentTarget.style.transform = "", k.currentTarget.style.boxShadow = "", delete k.currentTarget.dataset.pressed, (R = p.onMouseUp) == null || R.call(p, k);
         },
-        onFocus: (D) => {
-          var C;
-          D.currentTarget.dataset.pressed || (D.currentTarget.style.boxShadow = "0 0 0 3px var(--lucent-accent-subtle)"), (C = b.onFocus) == null || C.call(b, D);
+        onFocus: (k) => {
+          var R;
+          k.currentTarget.dataset.pressed || (k.currentTarget.style.boxShadow = "0 0 0 3px var(--lucent-accent-subtle)"), (R = p.onFocus) == null || R.call(p, k);
         },
-        onBlur: (D) => {
-          var C;
-          D.currentTarget.style.boxShadow = "", (C = b.onBlur) == null || C.call(b, D);
+        onBlur: (k) => {
+          var R;
+          k.currentTarget.style.boxShadow = "", (R = p.onBlur) == null || R.call(p, k);
         },
-        onClick: (D) => {
-          if (E && w) {
-            D.preventDefault();
+        onClick: (k) => {
+          if (A && D) {
+            k.preventDefault();
             return;
           }
-          L == null || L(D);
+          S == null || S(k);
         },
-        ...b,
+        ...p,
         children: [
           r,
-          s ? /* @__PURE__ */ f($t, {}) : p,
+          s ? /* @__PURE__ */ f(Rt, {}) : b,
           !s && o,
-          !s && c && /* @__PURE__ */ f(Bt, { size: t })
+          !s && c && /* @__PURE__ */ f(Lt, { size: t })
         ]
       }
     );
   }
 );
-Ye.displayName = "Button";
-const Mt = {
+Je.displayName = "Button";
+const It = {
   primary: "0 4px 14px -2px color-mix(in srgb, var(--lucent-accent-default) 25%, transparent)",
   secondary: "0 4px 14px -2px color-mix(in srgb, var(--lucent-accent-default) 20%, transparent)",
   outline: "0 4px 14px -2px color-mix(in srgb, var(--lucent-accent-default) 20%, transparent)",
@@ -148,32 +156,32 @@ const Mt = {
   "danger-outline": "0 4px 14px -2px color-mix(in srgb, var(--lucent-danger-default) 20%, transparent)",
   "danger-ghost": "0 4px 14px -2px color-mix(in srgb, var(--lucent-danger-default) 15%, transparent)"
 };
-function zt(e, t, s) {
-  e.style.transform = "translateY(-1px)", e.style.boxShadow = Mt[t], t === "primary" ? e.style.background = "var(--lucent-accent-hover)" : t === "secondary" ? e.style.background = "color-mix(in srgb, var(--lucent-accent-default) 22%, transparent)" : t === "outline" ? e.style.background = "color-mix(in srgb, var(--lucent-accent-default) 10%, transparent)" : t === "ghost" ? e.style.background = "color-mix(in srgb, var(--lucent-accent-default) 8%, transparent)" : t === "danger" ? (e.style.background = "var(--lucent-danger-hover)", s !== !1 && (e.style.borderColor = "var(--lucent-danger-hover)")) : t === "danger-outline" ? (e.style.background = "color-mix(in srgb, var(--lucent-danger-default) 10%, var(--lucent-surface))", s !== !1 && (e.style.borderColor = "var(--lucent-danger-hover)")) : t === "danger-ghost" && (e.style.background = "color-mix(in srgb, var(--lucent-danger-default) 8%, var(--lucent-surface))");
+function Bt(e, t, s) {
+  e.style.transform = "translateY(-1px)", e.style.boxShadow = It[t], t === "primary" ? e.style.background = "var(--lucent-accent-hover)" : t === "secondary" ? e.style.background = "color-mix(in srgb, var(--lucent-accent-default) 22%, transparent)" : t === "outline" ? e.style.background = "color-mix(in srgb, var(--lucent-accent-default) 10%, transparent)" : t === "ghost" ? e.style.background = "color-mix(in srgb, var(--lucent-accent-default) 8%, transparent)" : t === "danger" ? (e.style.background = "var(--lucent-danger-hover)", s !== !1 && (e.style.borderColor = "var(--lucent-danger-hover)")) : t === "danger-outline" ? (e.style.background = "color-mix(in srgb, var(--lucent-danger-default) 10%, var(--lucent-surface))", s !== !1 && (e.style.borderColor = "var(--lucent-danger-hover)")) : t === "danger-ghost" && (e.style.background = "color-mix(in srgb, var(--lucent-danger-default) 8%, var(--lucent-surface))");
 }
-function Tt(e, t, s) {
+function $t(e, t, s) {
   e.style.transform = "", e.style.boxShadow = "", t === "primary" ? e.style.background = "var(--lucent-accent-default)" : t === "secondary" ? e.style.background = "color-mix(in srgb, var(--lucent-accent-default) 16%, transparent)" : t === "outline" || t === "ghost" ? e.style.background = "transparent" : t === "danger" ? (e.style.background = "var(--lucent-danger-default)", s !== !1 && (e.style.borderColor = "var(--lucent-danger-default)")) : t === "danger-outline" ? (e.style.background = "transparent", s !== !1 && (e.style.borderColor = "var(--lucent-danger-default)")) : t === "danger-ghost" && (e.style.background = "transparent");
 }
-const It = { "2xs": 8, xs: 10, sm: 12, md: 14, lg: 16 };
-function Bt({ size: e }) {
-  const t = It[e];
+const Pt = { "2xs": 8, xs: 10, sm: 12, md: 14, lg: 16 };
+function Lt({ size: e }) {
+  const t = Pt[e];
   return /* @__PURE__ */ f("svg", { width: t, height: t, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 2.5, strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": !0, style: { flexShrink: 0, marginLeft: -2 }, children: /* @__PURE__ */ f("polyline", { points: "6 9 12 15 18 9" }) });
 }
-function $t() {
+function Rt() {
   return /* @__PURE__ */ T("svg", { width: 14, height: 14, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 2.5, strokeLinecap: "round", "aria-hidden": !0, style: { animation: "lucent-spin 0.7s linear infinite", flexShrink: 0 }, children: [
     /* @__PURE__ */ f("style", { children: "@keyframes lucent-spin { to { transform: rotate(360deg); } }" }),
     /* @__PURE__ */ f("path", { d: "M12 2a10 10 0 0 1 10 10" })
   ] });
 }
-const Lt = {
+const Ft = {
   sm: "calc(var(--lucent-space-8) * 0.5 + 16px)",
   md: "calc(var(--lucent-space-10) * 0.5 + 20px)",
   lg: "calc(var(--lucent-space-12) * 0.5 + 24px)"
-}, Pe = {
+}, He = {
   sm: "var(--lucent-font-size-sm)",
   md: "var(--lucent-font-size-md)",
   lg: "var(--lucent-font-size-md)"
-}, Me = {
+}, Te = {
   sm: "var(--lucent-font-size-sm)",
   md: "var(--lucent-font-size-sm)",
   lg: "var(--lucent-font-size-md)"
@@ -181,11 +189,11 @@ const Lt = {
   sm: "var(--lucent-space-3)",
   md: "var(--lucent-space-4)",
   lg: "var(--lucent-space-4)"
-}, We = {
+}, Ne = {
   sm: "calc(var(--lucent-space-3) + 14px + var(--lucent-space-2))",
   md: "calc(var(--lucent-space-4) + 18px + var(--lucent-space-2))",
   lg: "calc(var(--lucent-space-4) + 20px + var(--lucent-space-3))"
-}, te = xe(
+}, te = he(
   ({
     size: e = "md",
     label: t,
@@ -195,29 +203,29 @@ const Lt = {
     rightElement: r,
     prefix: o,
     suffix: c,
-    id: u,
-    style: i,
-    ...d
-  }, g) => {
-    const h = u ?? `lucent-input-${Math.random().toString(36).slice(2, 7)}`, p = !!a, y = !!d.disabled, [I, k] = P(!1), [L, b] = P(!1), m = y ? "transparent" : p ? "var(--lucent-danger-default)" : I ? "var(--lucent-accent-border)" : L ? "var(--lucent-border-strong)" : "var(--lucent-border-default)", w = I ? `0 0 0 3px ${p ? "var(--lucent-danger-subtle)" : "var(--lucent-accent-subtle)"}` : "none", R = {
+    id: i,
+    style: d,
+    ...u
+  }, m) => {
+    const h = i ?? `lucent-input-${Math.random().toString(36).slice(2, 7)}`, b = !!a, v = !!u.disabled, [B, I] = F(!1), [S, p] = F(!1), x = v ? "transparent" : b ? "var(--lucent-danger-default)" : B ? "var(--lucent-accent-border)" : S ? "var(--lucent-border-strong)" : "var(--lucent-border-default)", D = B ? `0 0 0 3px ${b ? "var(--lucent-danger-subtle)" : "var(--lucent-accent-subtle)"}` : "none", $ = {
       display: "flex",
       alignItems: "center",
-      color: y ? "var(--lucent-text-disabled)" : "var(--lucent-text-secondary)",
-      fontSize: Pe[e],
+      color: v ? "var(--lucent-text-disabled)" : "var(--lucent-text-secondary)",
+      fontSize: He[e],
       fontFamily: "var(--lucent-font-family-base)",
       whiteSpace: "nowrap",
       userSelect: "none",
       flexShrink: 0
-    }, E = { ...R, paddingLeft: ee[e], paddingRight: "2px" }, X = { ...R, paddingLeft: "2px", paddingRight: ee[e] };
-    return /* @__PURE__ */ T("div", { style: { display: "flex", flexDirection: "column", gap: "var(--lucent-space-1)", width: "100%", ...i }, children: [
+    }, E = { ...$, paddingLeft: ee[e], paddingRight: "2px" }, A = { ...$, paddingLeft: "2px", paddingRight: ee[e] };
+    return /* @__PURE__ */ T("div", { style: { display: "flex", flexDirection: "column", gap: "var(--lucent-space-1)", width: "100%", ...d }, children: [
       t && /* @__PURE__ */ f(
         "label",
         {
           htmlFor: h,
           style: {
-            fontSize: Me[e],
+            fontSize: Te[e],
             fontWeight: "var(--lucent-font-weight-medium)",
-            color: y ? "var(--lucent-text-disabled)" : "var(--lucent-text-primary)",
+            color: v ? "var(--lucent-text-disabled)" : "var(--lucent-text-primary)",
             fontFamily: "var(--lucent-font-family-base)"
           },
           children: t
@@ -229,29 +237,29 @@ const Lt = {
           style: {
             display: "flex",
             alignItems: "stretch",
-            height: Lt[e],
-            border: `1px solid ${m}`,
+            height: Ft[e],
+            border: `1px solid ${x}`,
             borderRadius: "var(--lucent-radius-lg)",
-            boxShadow: w,
-            background: y ? "color-mix(in srgb, var(--lucent-text-primary) 6%, transparent)" : "var(--lucent-surface)",
+            boxShadow: D,
+            background: v ? "color-mix(in srgb, var(--lucent-text-primary) 6%, transparent)" : "var(--lucent-surface)",
             overflow: "hidden",
-            cursor: y ? "not-allowed" : void 0,
+            cursor: v ? "not-allowed" : void 0,
             transition: [
               "border-color var(--lucent-duration-fast) var(--lucent-easing-default)",
               "box-shadow var(--lucent-duration-fast) var(--lucent-easing-default)"
             ].join(", ")
           },
           onMouseEnter: () => {
-            y || b(!0);
+            v || p(!0);
           },
-          onMouseLeave: () => b(!1),
+          onMouseLeave: () => p(!1),
           children: [
             o && /* @__PURE__ */ f("span", { style: E, children: o }),
             /* @__PURE__ */ T("div", { style: { position: "relative", flex: 1, display: "flex", alignItems: "center", minWidth: 0 }, children: [
               n && /* @__PURE__ */ f("span", { style: {
                 position: "absolute",
                 left: ee[e],
-                color: y ? "var(--lucent-text-disabled)" : "var(--lucent-text-secondary)",
+                color: v ? "var(--lucent-text-disabled)" : "var(--lucent-text-secondary)",
                 display: "flex",
                 alignItems: "center",
                 pointerEvents: "none"
@@ -259,66 +267,66 @@ const Lt = {
               /* @__PURE__ */ f(
                 "input",
                 {
-                  ref: g,
+                  ref: m,
                   id: h,
-                  "aria-invalid": p,
-                  "aria-describedby": p ? `${h}-error` : s ? `${h}-helper` : void 0,
+                  "aria-invalid": b,
+                  "aria-describedby": b ? `${h}-error` : s ? `${h}-helper` : void 0,
                   style: {
                     width: "100%",
                     height: "100%",
-                    paddingLeft: n ? We[e] : ee[e],
-                    paddingRight: r ? We[e] : ee[e],
-                    fontSize: Pe[e],
+                    paddingLeft: n ? Ne[e] : ee[e],
+                    paddingRight: r ? Ne[e] : ee[e],
+                    fontSize: He[e],
                     fontFamily: "var(--lucent-font-family-base)",
-                    color: y ? "var(--lucent-text-disabled)" : "var(--lucent-text-primary)",
+                    color: v ? "var(--lucent-text-disabled)" : "var(--lucent-text-primary)",
                     background: "transparent",
                     border: "none",
                     outline: "none",
-                    cursor: y ? "not-allowed" : void 0,
+                    cursor: v ? "not-allowed" : void 0,
                     boxSizing: "border-box"
                   },
-                  ...d,
-                  onFocus: (A) => {
-                    var D;
-                    k(!0), (D = d.onFocus) == null || D.call(d, A);
+                  ...u,
+                  onFocus: (H) => {
+                    var N;
+                    I(!0), (N = u.onFocus) == null || N.call(u, H);
                   },
-                  onBlur: (A) => {
-                    var D;
-                    k(!1), (D = d.onBlur) == null || D.call(d, A);
+                  onBlur: (H) => {
+                    var N;
+                    I(!1), (N = u.onBlur) == null || N.call(u, H);
                   }
                 }
               ),
               r && /* @__PURE__ */ f("span", { style: {
                 position: "absolute",
                 right: ee[e],
-                color: y ? "var(--lucent-text-disabled)" : "var(--lucent-text-secondary)",
+                color: v ? "var(--lucent-text-disabled)" : "var(--lucent-text-secondary)",
                 display: "flex",
                 alignItems: "center"
               }, children: r })
             ] }),
-            c && /* @__PURE__ */ f("span", { style: X, children: c })
+            c && /* @__PURE__ */ f("span", { style: A, children: c })
           ]
         }
       ),
-      p && /* @__PURE__ */ f(
+      b && /* @__PURE__ */ f(
         "span",
         {
           id: `${h}-error`,
           role: "alert",
           style: {
-            fontSize: Me[e],
+            fontSize: Te[e],
             color: "var(--lucent-danger-text)",
             fontFamily: "var(--lucent-font-family-base)"
           },
           children: a
         }
       ),
-      !p && s && /* @__PURE__ */ f(
+      !b && s && /* @__PURE__ */ f(
         "span",
         {
           id: `${h}-helper`,
           style: {
-            fontSize: Me[e],
+            fontSize: Te[e],
             color: "var(--lucent-text-secondary)",
             fontFamily: "var(--lucent-font-family-base)"
           },
@@ -329,19 +337,19 @@ const Lt = {
   }
 );
 te.displayName = "Input";
-const Rt = {
+const Ct = {
   neutral: { bg: "var(--lucent-surface-secondary)", color: "var(--lucent-text-secondary)", border: "var(--lucent-border-default)" },
   accent: { bg: "var(--lucent-accent-default)", color: "var(--lucent-accent-fg)", border: "var(--lucent-accent-default)" },
   success: { bg: "var(--lucent-success-subtle)", color: "var(--lucent-success-text)", border: "var(--lucent-success-subtle)" },
   warning: { bg: "var(--lucent-warning-subtle)", color: "var(--lucent-warning-text)", border: "var(--lucent-warning-subtle)" },
   danger: { bg: "var(--lucent-danger-subtle)", color: "var(--lucent-danger-text)", border: "var(--lucent-danger-subtle)" },
   info: { bg: "var(--lucent-info-subtle)", color: "var(--lucent-info-text)", border: "var(--lucent-info-subtle)" }
-}, Ft = {
+}, Wt = {
   sm: { fontSize: "var(--lucent-font-size-xs)", padding: "0 var(--lucent-space-2)", height: "18px" },
   md: { fontSize: "var(--lucent-font-size-sm)", padding: "0 var(--lucent-space-2)", height: "22px" }
 };
-function on({ variant: e = "neutral", size: t = "md", dot: s = !1, children: a, style: n }) {
-  const r = Rt[e], o = Ft[t];
+function fn({ variant: e = "neutral", size: t = "md", dot: s = !1, children: a, style: n }) {
+  const r = Ct[e], o = Wt[t];
   return /* @__PURE__ */ T("span", { style: {
     display: "inline-flex",
     alignItems: "center",
@@ -370,11 +378,11 @@ function on({ variant: e = "neutral", size: t = "md", dot: s = !1, children: a,
     a
   ] });
 }
-const Ct = { sm: "calc(var(--lucent-space-8) * 0.5 + 16px)", md: "calc(var(--lucent-space-10) * 0.5 + 20px)", lg: "calc(var(--lucent-space-12) * 0.5 + 24px)" }, Pt = {
+const Ht = { sm: "calc(var(--lucent-space-8) * 0.5 + 16px)", md: "calc(var(--lucent-space-10) * 0.5 + 20px)", lg: "calc(var(--lucent-space-12) * 0.5 + 24px)" }, Nt = {
   sm: { track: [28, 16], thumb: 12 },
   md: { track: [36, 20], thumb: 16 },
   lg: { track: [44, 24], thumb: 20 }
-}, He = "cubic-bezier(0.34, 1.56, 0.64, 1)", Wt = `
+}, Ee = "cubic-bezier(0.34, 1.56, 0.64, 1)", Et = `
 @keyframes lucent-toggle-pop {
   0%   { transform: scale(1); }
   35%  { transform: scale(0.94); }
@@ -382,7 +390,7 @@ const Ct = { sm: "calc(var(--lucent-space-8) * 0.5 + 16px)", md: "calc(var(--luc
   100% { transform: scale(1); }
 }
 `;
-function ln({
+function pn({
   label: e,
   size: t = "md",
   checked: s,
@@ -391,30 +399,30 @@ function ln({
   helperText: r,
   align: o = "left",
   disabled: c,
-  id: u,
-  onChange: i,
-  style: d,
-  ...g
+  id: i,
+  onChange: d,
+  style: u,
+  ...m
 }) {
-  const h = u ?? `lucent-toggle-${Math.random().toString(36).slice(2, 7)}`, p = s !== void 0, [y, I] = P(a ?? !1), k = p ? !!s : y, L = q(k), [b, m] = P(0), [w, R] = P(!1);
-  ne(() => {
-    if (!c && L.current !== k) {
-      L.current = k, m((_) => _ + 1), R(!0);
-      const j = setTimeout(() => R(!1), 150);
-      return () => clearTimeout(j);
+  const h = i ?? `lucent-toggle-${Math.random().toString(36).slice(2, 7)}`, b = s !== void 0, [v, B] = F(a ?? !1), I = b ? !!s : v, S = U(I), [p, x] = F(0), [D, $] = F(!1);
+  re(() => {
+    if (!c && S.current !== I) {
+      S.current = I, x((G) => G + 1), $(!0);
+      const O = setTimeout(() => $(!1), 150);
+      return () => clearTimeout(O);
     }
-  }, [k, c]);
-  const { track: [E, X], thumb: A } = Pt[t], D = k ? E - A - 2 : 2, C = (j) => {
-    p || I(j.target.checked), i == null || i(j);
-  }, K = /* @__PURE__ */ T(
+  }, [I, c]);
+  const { track: [E, A], thumb: H } = Nt[t], N = I ? E - H - 2 : 2, k = (O) => {
+    b || B(O.target.checked), d == null || d(O);
+  }, R = /* @__PURE__ */ T(
     "span",
     {
       "aria-hidden": !0,
       style: {
         position: "relative",
         width: E,
-        height: X,
-        borderRadius: X / 2,
+        height: A,
+        borderRadius: A / 2,
         flexShrink: 0
       },
       children: [
@@ -425,12 +433,12 @@ function ln({
               position: "absolute",
               inset: 0,
               borderRadius: "inherit",
-              background: c ? "var(--lucent-surface-secondary)" : k ? "var(--lucent-accent-default)" : "color-mix(in srgb, var(--lucent-text-primary) 12%, transparent)",
+              background: c ? "var(--lucent-surface-secondary)" : I ? "var(--lucent-accent-default)" : "color-mix(in srgb, var(--lucent-text-primary) 12%, transparent)",
               transition: "background var(--lucent-duration-fast) var(--lucent-easing-default)",
-              animation: b > 0 ? `lucent-toggle-pop 240ms ${He} forwards` : void 0
+              animation: p > 0 ? `lucent-toggle-pop 240ms ${Ee} forwards` : void 0
             }
           },
-          b
+          p
         ),
         /* @__PURE__ */ f(
           "span",
@@ -438,19 +446,19 @@ function ln({
             style: {
               position: "absolute",
               top: 2,
-              left: D,
-              width: w ? A * 1.3 : A,
-              height: A,
-              borderRadius: A,
+              left: N,
+              width: D ? H * 1.3 : H,
+              height: H,
+              borderRadius: H,
               background: "#ffffff",
               boxShadow: "0 1px 3px rgb(0 0 0 / 0.2)",
-              transition: `left 260ms ${He}, width 200ms cubic-bezier(0.22, 1, 0.36, 1)`
+              transition: `left 260ms ${Ee}, width 200ms cubic-bezier(0.22, 1, 0.36, 1)`
             }
           }
         )
       ]
     }
-  ), B = /* @__PURE__ */ T(
+  ), P = /* @__PURE__ */ T(
     "label",
     {
       style: {
@@ -463,7 +471,7 @@ function ln({
         fontSize: t === "sm" ? "var(--lucent-font-size-sm)" : "var(--lucent-font-size-md)",
         color: c ? "var(--lucent-text-disabled)" : "var(--lucent-text-primary)",
         userSelect: "none",
-        ...n ? {} : d
+        ...n ? {} : u
       },
       children: [
         /* @__PURE__ */ f(
@@ -472,15 +480,15 @@ function ln({
             type: "checkbox",
             role: "switch",
             id: h,
-            checked: p ? s : y,
+            checked: b ? s : v,
             disabled: c,
-            onChange: C,
-            "aria-checked": k,
+            onChange: k,
+            "aria-checked": I,
             style: { position: "absolute", opacity: 0, width: 0, height: 0, margin: 0, pointerEvents: "none" },
-            ...g
+            ...m
           }
         ),
-        o === "left" && K,
+        o === "left" && R,
         e || r ? /* @__PURE__ */ T("span", { style: { display: "flex", flexDirection: "column", flex: o === "right" ? 1 : void 0 }, children: [
           e && /* @__PURE__ */ f("span", { style: {
             fontWeight: r ? "var(--lucent-font-weight-medium)" : "var(--lucent-font-weight-regular)",
@@ -492,63 +500,63 @@ function ln({
             marginTop: "2px"
           }, children: r })
         ] }) : null,
-        o === "right" && K
+        o === "right" && R
       ]
     }
   );
-  return /* @__PURE__ */ T(Ve, { children: [
-    /* @__PURE__ */ f("style", { children: Wt }),
+  return /* @__PURE__ */ T(Ye, { children: [
+    /* @__PURE__ */ f("style", { children: Et }),
     n ? /* @__PURE__ */ f(
       "div",
       {
         style: {
           border: "1px solid var(--lucent-border-strong)",
           borderRadius: "var(--lucent-radius-lg)",
-          ...r ? { padding: "var(--lucent-space-3)" } : { minHeight: Ct[t], padding: "0 var(--lucent-space-3)", display: "flex", alignItems: "center" },
-          background: k && !c ? "color-mix(in srgb, var(--lucent-text-primary) 6%, transparent)" : "transparent",
+          ...r ? { padding: "var(--lucent-space-3)" } : { minHeight: Ht[t], padding: "0 var(--lucent-space-3)", display: "flex", alignItems: "center" },
+          background: I && !c ? "color-mix(in srgb, var(--lucent-text-primary) 6%, transparent)" : "transparent",
           transition: "border-color var(--lucent-duration-fast) var(--lucent-easing-default), background var(--lucent-duration-fast) var(--lucent-easing-default)",
           cursor: c ? "not-allowed" : "pointer",
-          ...d
+          ...u
         },
-        onClick: (j) => {
-          if (!c && j.target === j.currentTarget) {
-            const _ = j.currentTarget.querySelector("input");
-            _ == null || _.click();
+        onClick: (O) => {
+          if (!c && O.target === O.currentTarget) {
+            const G = O.currentTarget.querySelector("input");
+            G == null || G.click();
           }
         },
-        children: B
+        children: P
       }
-    ) : B
+    ) : P
   ] });
 }
-const Ht = {
+const At = {
   sm: "calc(var(--lucent-space-8) * 0.5 + 16px)",
   md: "calc(var(--lucent-space-10) * 0.5 + 20px)",
   lg: "calc(var(--lucent-space-12) * 0.5 + 24px)"
-}, Nt = {
+}, Ot = {
   sm: "var(--lucent-font-size-sm)",
   md: "var(--lucent-font-size-md)",
   lg: "var(--lucent-font-size-md)"
-}, ze = {
+}, Ie = {
   sm: "var(--lucent-font-size-sm)",
   md: "var(--lucent-font-size-sm)",
   lg: "var(--lucent-font-size-md)"
-}, Ne = {
+}, Ae = {
   sm: "var(--lucent-space-2)",
   md: "var(--lucent-space-3)",
   lg: "var(--lucent-space-3)"
-}, Ze = xe(
-  ({ options: e, size: t = "md", label: s, helperText: a, errorText: n, placeholder: r, disabled: o, id: c, style: u, ...i }, d) => {
-    const g = c ?? `lucent-select-${Math.random().toString(36).slice(2, 7)}`, h = !!n, p = !!o, [y, I] = P(!1), [k, L] = P(!1), b = p ? "transparent" : h ? "var(--lucent-danger-default)" : y ? "var(--lucent-accent-border)" : k ? "var(--lucent-border-strong)" : "var(--lucent-border-default)", m = y ? `0 0 0 3px ${h ? "var(--lucent-danger-subtle)" : "var(--lucent-accent-subtle)"}` : "none";
-    return /* @__PURE__ */ T("div", { style: { display: "flex", flexDirection: "column", gap: "var(--lucent-space-1)", width: "100%", ...u }, children: [
+}, Qe = he(
+  ({ options: e, size: t = "md", label: s, helperText: a, errorText: n, placeholder: r, disabled: o, id: c, style: i, ...d }, u) => {
+    const m = c ?? `lucent-select-${Math.random().toString(36).slice(2, 7)}`, h = !!n, b = !!o, [v, B] = F(!1), [I, S] = F(!1), p = b ? "transparent" : h ? "var(--lucent-danger-default)" : v ? "var(--lucent-accent-border)" : I ? "var(--lucent-border-strong)" : "var(--lucent-border-default)", x = v ? `0 0 0 3px ${h ? "var(--lucent-danger-subtle)" : "var(--lucent-accent-subtle)"}` : "none";
+    return /* @__PURE__ */ T("div", { style: { display: "flex", flexDirection: "column", gap: "var(--lucent-space-1)", width: "100%", ...i }, children: [
       s && /* @__PURE__ */ f(
         "label",
         {
-          htmlFor: g,
+          htmlFor: m,
           style: {
-            fontSize: ze[t],
+            fontSize: Ie[t],
             fontWeight: "var(--lucent-font-weight-medium)",
-            color: p ? "var(--lucent-text-disabled)" : "var(--lucent-text-primary)",
+            color: b ? "var(--lucent-text-disabled)" : "var(--lucent-text-primary)",
             fontFamily: "var(--lucent-font-family-base)"
           },
           children: s
@@ -561,60 +569,60 @@ const Ht = {
             position: "relative",
             display: "flex",
             alignItems: "center",
-            height: Ht[t],
-            border: `1px solid ${b}`,
+            height: At[t],
+            border: `1px solid ${p}`,
             borderRadius: "var(--lucent-radius-lg)",
-            boxShadow: m,
-            background: p ? "color-mix(in srgb, var(--lucent-text-primary) 6%, transparent)" : "var(--lucent-surface)",
-            cursor: p ? "not-allowed" : "pointer",
+            boxShadow: x,
+            background: b ? "color-mix(in srgb, var(--lucent-text-primary) 6%, transparent)" : "var(--lucent-surface)",
+            cursor: b ? "not-allowed" : "pointer",
             transition: [
               "border-color var(--lucent-duration-fast) var(--lucent-easing-default)",
               "box-shadow var(--lucent-duration-fast) var(--lucent-easing-default)"
             ].join(", ")
           },
           onMouseEnter: () => {
-            p || L(!0);
+            b || S(!0);
           },
-          onMouseLeave: () => L(!1),
+          onMouseLeave: () => S(!1),
           children: [
             /* @__PURE__ */ T(
               "select",
               {
-                ref: d,
-                id: g,
+                ref: u,
+                id: m,
                 disabled: o,
                 "aria-invalid": h,
-                "aria-describedby": h ? `${g}-error` : a ? `${g}-helper` : void 0,
+                "aria-describedby": h ? `${m}-error` : a ? `${m}-helper` : void 0,
                 style: {
                   width: "100%",
                   height: "100%",
-                  padding: `0 var(--lucent-space-8) 0 ${Ne[t]}`,
-                  fontSize: Nt[t],
+                  padding: `0 var(--lucent-space-8) 0 ${Ae[t]}`,
+                  fontSize: Ot[t],
                   fontFamily: "var(--lucent-font-family-base)",
-                  color: p ? "var(--lucent-text-disabled)" : "var(--lucent-text-primary)",
+                  color: b ? "var(--lucent-text-disabled)" : "var(--lucent-text-primary)",
                   background: "transparent",
                   border: "none",
                   borderRadius: "var(--lucent-radius-lg)",
                   outline: "none",
                   appearance: "none",
-                  cursor: p ? "not-allowed" : "pointer",
+                  cursor: b ? "not-allowed" : "pointer",
                   boxSizing: "border-box"
                 },
-                onFocus: (w) => {
-                  var R;
-                  p || I(!0), (R = i.onFocus) == null || R.call(i, w);
+                onFocus: (D) => {
+                  var $;
+                  b || B(!0), ($ = d.onFocus) == null || $.call(d, D);
                 },
-                onBlur: (w) => {
-                  var R;
-                  I(!1), (R = i.onBlur) == null || R.call(i, w);
+                onBlur: (D) => {
+                  var $;
+                  B(!1), ($ = d.onBlur) == null || $.call(d, D);
                 },
                 onMouseDown: () => {
-                  p || I(!0);
+                  b || B(!0);
                 },
-                ...i,
+                ...d,
                 children: [
                   r && /* @__PURE__ */ f("option", { value: "", disabled: !0, children: r }),
-                  e.map((w) => /* @__PURE__ */ f("option", { value: w.value, disabled: w.disabled, children: w.label }, w.value))
+                  e.map((D) => /* @__PURE__ */ f("option", { value: D.value, disabled: D.disabled, children: D.label }, D.value))
                 ]
               }
             ),
@@ -624,9 +632,9 @@ const Ht = {
                 "aria-hidden": !0,
                 style: {
                   position: "absolute",
-                  right: Ne[t],
+                  right: Ae[t],
                   pointerEvents: "none",
-                  color: p ? "var(--lucent-text-disabled)" : "var(--lucent-text-secondary)",
+                  color: b ? "var(--lucent-text-disabled)" : "var(--lucent-text-secondary)",
                   display: "flex",
                   alignItems: "center"
                 },
@@ -639,10 +647,10 @@ const Ht = {
       h && /* @__PURE__ */ f(
         "span",
         {
-          id: `${g}-error`,
+          id: `${m}-error`,
           role: "alert",
           style: {
-            fontSize: ze[t],
+            fontSize: Ie[t],
             color: "var(--lucent-danger-text)",
             fontFamily: "var(--lucent-font-family-base)"
           },
@@ -652,9 +660,9 @@ const Ht = {
       !h && a && /* @__PURE__ */ f(
         "span",
         {
-          id: `${g}-helper`,
+          id: `${m}-helper`,
           style: {
-            fontSize: ze[t],
+            fontSize: Ie[t],
             color: "var(--lucent-text-secondary)",
             fontFamily: "var(--lucent-font-family-base)"
           },
@@ -664,8 +672,8 @@ const Ht = {
     ] });
   }
 );
-Ze.displayName = "Select";
-const Et = {
+Qe.displayName = "Select";
+const Xt = {
   primary: "var(--lucent-text-primary)",
   secondary: "var(--lucent-text-secondary)",
   disabled: "var(--lucent-text-disabled)",
@@ -675,7 +683,7 @@ const Et = {
   warning: "var(--lucent-warning-text)",
   danger: "var(--lucent-danger-text)",
   info: "var(--lucent-info-text)"
-}, At = {
+}, jt = {
   xs: "var(--lucent-font-size-xs)",
   sm: "var(--lucent-font-size-sm)",
   md: "var(--lucent-font-size-md)",
@@ -683,21 +691,21 @@ const Et = {
   xl: "var(--lucent-font-size-xl)",
   "2xl": "var(--lucent-font-size-2xl)",
   "3xl": "var(--lucent-font-size-3xl)"
-}, Ot = {
+}, Ut = {
   regular: "var(--lucent-font-weight-regular)",
   medium: "var(--lucent-font-weight-medium)",
   semibold: "var(--lucent-font-weight-semibold)",
   bold: "var(--lucent-font-weight-bold)"
-}, Xt = {
+}, qt = {
   tight: "var(--lucent-line-height-tight)",
   base: "var(--lucent-line-height-base)",
   relaxed: "var(--lucent-line-height-relaxed)"
-}, jt = {
+}, Gt = {
   base: "var(--lucent-font-family-base)",
   mono: "var(--lucent-font-family-mono)",
   display: "var(--lucent-font-family-display)"
 };
-function cn({
+function gn({
   as: e = "p",
   size: t = "md",
   weight: s = "regular",
@@ -706,28 +714,28 @@ function cn({
   lineHeight: r = "base",
   family: o = "base",
   truncate: c = !1,
-  children: u,
-  style: i,
-  ...d
+  children: i,
+  style: d,
+  ...u
 }) {
-  const g = {
-    fontSize: At[t],
-    fontWeight: Ot[s],
-    color: Et[a],
+  const m = {
+    fontSize: jt[t],
+    fontWeight: Ut[s],
+    color: Xt[a],
     ...n !== void 0 && { textAlign: n },
-    lineHeight: Xt[r],
-    fontFamily: jt[o],
+    lineHeight: qt[r],
+    fontFamily: Gt[o],
     margin: 0,
     ...c && {
       overflow: "hidden",
       textOverflow: "ellipsis",
       whiteSpace: "nowrap"
     },
-    ...i
+    ...d
   };
-  return /* @__PURE__ */ f(e, { style: g, ...d, children: u });
+  return /* @__PURE__ */ f(e, { style: m, ...u, children: i });
 }
-const Ut = { sm: "3px", md: "4px", lg: "5px" }, qt = { sm: "14px", md: "18px", lg: "22px" }, Gt = `
+const Vt = { sm: "3px", md: "4px", lg: "5px" }, _t = { sm: "14px", md: "18px", lg: "22px" }, Kt = `
 .lucent-slider {
   -webkit-appearance: none;
   appearance: none;
@@ -821,7 +829,7 @@ const Ut = { sm: "3px", md: "4px", lg: "5px" }, qt = { sm: "14px", md: "18px", l
   cursor: not-allowed;
 }
 `;
-function un({
+function bn({
   label: e,
   showValue: t = !1,
   size: s = "md",
@@ -830,19 +838,19 @@ function un({
   step: r = 1,
   value: o,
   defaultValue: c,
-  disabled: u,
-  id: i,
-  onChange: d,
-  style: g,
+  disabled: i,
+  id: d,
+  onChange: u,
+  style: m,
   ...h
 }) {
-  const p = i ?? `lucent-slider-${Math.random().toString(36).slice(2, 7)}`, y = o !== void 0, [I, k] = P(
+  const b = d ?? `lucent-slider-${Math.random().toString(36).slice(2, 7)}`, v = o !== void 0, [B, I] = F(
     c ?? Math.round((a + n) / 2)
-  ), L = y ? o : I, b = `${(L - a) / (n - a) * 100}%`, m = (w) => {
-    y || k(Number(w.target.value)), d == null || d(w);
+  ), S = v ? o : B, p = `${(S - a) / (n - a) * 100}%`, x = (D) => {
+    v || I(Number(D.target.value)), u == null || u(D);
   };
-  return /* @__PURE__ */ T(Ve, { children: [
-    /* @__PURE__ */ f("style", { children: Gt }),
+  return /* @__PURE__ */ T(Ye, { children: [
+    /* @__PURE__ */ f("style", { children: Kt }),
     /* @__PURE__ */ T(
       "div",
       {
@@ -852,7 +860,7 @@ function un({
           gap: "var(--lucent-space-1)",
           width: "100%",
           fontFamily: "var(--lucent-font-family-base)",
-          ...g
+          ...m
         },
         children: [
           (e || t) && /* @__PURE__ */ T(
@@ -867,12 +875,12 @@ function un({
                 e && /* @__PURE__ */ f(
                   "label",
                   {
-                    htmlFor: p,
+                    htmlFor: b,
                     style: {
                       fontSize: "var(--lucent-font-size-sm)",
                       fontWeight: "var(--lucent-font-weight-medium)",
-                      color: u ? "var(--lucent-text-disabled)" : "var(--lucent-text-primary)",
-                      cursor: u ? "not-allowed" : "default"
+                      color: i ? "var(--lucent-text-disabled)" : "var(--lucent-text-primary)",
+                      cursor: i ? "not-allowed" : "default"
                     },
                     children: e
                   }
@@ -882,10 +890,10 @@ function un({
                   {
                     style: {
                       fontSize: "var(--lucent-font-size-sm)",
-                      color: u ? "var(--lucent-text-disabled)" : "var(--lucent-text-secondary)",
+                      color: i ? "var(--lucent-text-disabled)" : "var(--lucent-text-secondary)",
                       fontVariantNumeric: "tabular-nums"
                     },
-                    children: L
+                    children: S
                   }
                 )
               ]
@@ -895,18 +903,18 @@ function un({
             "input",
             {
               type: "range",
-              id: p,
+              id: b,
               className: "lucent-slider",
               min: a,
               max: n,
               step: r,
-              disabled: u,
-              value: y ? o : I,
-              onChange: m,
+              disabled: i,
+              value: v ? o : B,
+              onChange: x,
               style: {
-                "--ls-track-h": Ut[s],
-                "--ls-thumb": qt[s],
-                "--ls-fill": b
+                "--ls-track-h": Vt[s],
+                "--ls-thumb": _t[s],
+                "--ls-fill": p
               },
               ...h
             }
@@ -916,20 +924,20 @@ function un({
     )
   ] });
 }
-const Ee = {
+const Oe = {
   sm: "calc(var(--lucent-space-8) * 0.5 + 18px)",
   md: "calc(var(--lucent-space-10) * 0.5 + 22px)",
   lg: "calc(var(--lucent-space-12) * 0.5 + 26px)"
-}, _t = {
+}, Yt = {
   sm: "var(--lucent-font-size-sm)",
   md: "var(--lucent-font-size-md)",
   lg: "var(--lucent-font-size-lg)"
-}, Vt = {
+}, Zt = {
   sm: "var(--lucent-space-3)",
   md: "var(--lucent-space-4)",
   lg: "var(--lucent-space-5)"
 };
-function Je({
+function et({
   options: e,
   value: t,
   defaultValue: s,
@@ -938,29 +946,29 @@ function Je({
   disabled: r = !1,
   fullWidth: o = !0,
   id: c,
-  style: u
+  style: i
 }) {
-  var L;
-  const [i, d] = P(
-    s ?? ((L = e[0]) == null ? void 0 : L.value) ?? ""
-  ), g = t !== void 0 ? t : i, h = q(null), [p, y] = P(null), I = q(!1);
-  me(() => {
-    const b = h.current;
-    if (!b) return;
-    const m = () => {
-      const R = b.querySelector(`[data-sc-value="${g}"]`);
-      R && (y({
-        left: R.offsetLeft,
-        width: R.offsetWidth,
-        animate: I.current
-      }), I.current = !0);
+  var S;
+  const [d, u] = F(
+    s ?? ((S = e[0]) == null ? void 0 : S.value) ?? ""
+  ), m = t !== void 0 ? t : d, h = U(null), [b, v] = F(null), B = U(!1);
+  ve(() => {
+    const p = h.current;
+    if (!p) return;
+    const x = () => {
+      const $ = p.querySelector(`[data-sc-value="${m}"]`);
+      $ && (v({
+        left: $.offsetLeft,
+        width: $.offsetWidth,
+        animate: B.current
+      }), B.current = !0);
     };
-    m();
-    const w = new ResizeObserver(m);
-    return w.observe(b), () => w.disconnect();
-  }, [g, e]);
-  const k = (b) => {
-    r || b.disabled || (t === void 0 && d(b.value), a == null || a(b.value));
+    x();
+    const D = new ResizeObserver(x);
+    return D.observe(p), () => D.disconnect();
+  }, [m, e]);
+  const I = (p) => {
+    r || p.disabled || (t === void 0 && u(p.value), a == null || a(p.value));
   };
   return /* @__PURE__ */ T(
     "div",
@@ -973,7 +981,7 @@ function Je({
         display: "flex",
         alignItems: "center",
         width: o ? "100%" : "fit-content",
-        height: Ee[n],
+        height: Oe[n],
         // color-mix with transparent produces a relative tint that adapts to any
         // parent background (white, tinted chrome, dark mode). Baseline 2023.
         background: "color-mix(in srgb, var(--lucent-text-primary) 6%, transparent)",
@@ -981,39 +989,39 @@ function Je({
         padding: 0,
         gap: 0,
         opacity: r ? 0.5 : 1,
-        ...u
+        ...i
       },
       children: [
-        p && /* @__PURE__ */ f(
+        b && /* @__PURE__ */ f(
           "span",
           {
             "aria-hidden": !0,
             style: {
               position: "absolute",
               top: 3,
-              left: p.left + 3,
-              width: p.width - 6,
+              left: b.left + 3,
+              width: b.width - 6,
               height: "calc(100% - 6px)",
               background: "var(--lucent-surface)",
               borderRadius: "var(--lucent-radius-lg)",
               boxShadow: "var(--lucent-shadow-sm)",
-              transition: p.animate ? "left var(--lucent-duration-base) cubic-bezier(0.34, 1.56, 0.64, 1), width var(--lucent-duration-base) cubic-bezier(0.22, 1, 0.36, 1)" : "none",
+              transition: b.animate ? "left var(--lucent-duration-base) cubic-bezier(0.34, 1.56, 0.64, 1), width var(--lucent-duration-base) cubic-bezier(0.22, 1, 0.36, 1)" : "none",
               zIndex: 0,
               pointerEvents: "none"
             }
           }
         ),
-        e.map((b) => {
-          const m = b.value === g, w = r || !!b.disabled;
+        e.map((p) => {
+          const x = p.value === m, D = r || !!p.disabled;
           return /* @__PURE__ */ f(
             "button",
             {
-              "data-sc-value": b.value,
+              "data-sc-value": p.value,
               type: "button",
               role: "radio",
-              "aria-checked": m,
-              disabled: w,
-              onClick: () => k(b),
+              "aria-checked": x,
+              disabled: D,
+              onClick: () => I(p),
               style: {
                 position: "relative",
                 zIndex: 1,
@@ -1022,16 +1030,16 @@ function Je({
                 justifyContent: "center",
                 gap: "var(--lucent-space-1)",
                 flex: 1,
-                height: Ee[n],
-                padding: `0 ${Vt[n]}`,
-                fontSize: _t[n],
+                height: Oe[n],
+                padding: `0 ${Zt[n]}`,
+                fontSize: Yt[n],
                 fontFamily: "var(--lucent-font-family-base)",
-                fontWeight: m ? "var(--lucent-font-weight-medium)" : "var(--lucent-font-weight-regular)",
-                color: w ? "var(--lucent-text-disabled)" : m ? "var(--lucent-text-primary)" : "var(--lucent-text-secondary)",
+                fontWeight: x ? "var(--lucent-font-weight-medium)" : "var(--lucent-font-weight-regular)",
+                color: D ? "var(--lucent-text-disabled)" : x ? "var(--lucent-text-primary)" : "var(--lucent-text-secondary)",
                 background: "transparent",
                 border: "none",
                 borderRadius: "var(--lucent-radius-lg)",
-                cursor: w ? "not-allowed" : "pointer",
+                cursor: D ? "not-allowed" : "pointer",
                 outline: "none",
                 whiteSpace: "nowrap",
                 transition: [
@@ -1039,38 +1047,38 @@ function Je({
                   "font-weight var(--lucent-duration-fast) var(--lucent-easing-default)"
                 ].join(", ")
               },
-              onFocus: (R) => {
-                R.currentTarget.matches(":focus-visible") && (R.currentTarget.style.boxShadow = "0 0 0 2px var(--lucent-accent-subtle)");
+              onFocus: ($) => {
+                $.currentTarget.matches(":focus-visible") && ($.currentTarget.style.boxShadow = "0 0 0 2px var(--lucent-accent-subtle)");
               },
-              onBlur: (R) => {
-                R.currentTarget.style.boxShadow = "";
+              onBlur: ($) => {
+                $.currentTarget.style.boxShadow = "";
               },
-              children: b.label
+              children: p.label
             },
-            b.value
+            p.value
           );
         })
       ]
     }
   );
 }
-Je.displayName = "SegmentedControl";
-const Kt = {
+et.displayName = "SegmentedControl";
+const Jt = {
   xs: 12,
   sm: 16,
   md: 22,
   lg: 28,
   xl: 36,
   "2xl": 48
-}, Yt = {
+}, Qt = {
   xs: "var(--lucent-radius-sm)",
   sm: "var(--lucent-radius-sm)",
   md: "var(--lucent-radius-md)",
   lg: "var(--lucent-radius-md)",
   xl: "var(--lucent-radius-lg)",
   "2xl": "var(--lucent-radius-lg)"
-}, Ae = "inset 0 0 0 1px rgba(0,0,0,0.2)", Oe = "inset 0 0 0 2px rgba(0,0,0,0.5)", Zt = "inset 0 0 0 1px rgba(0,0,0,0.2), 0 0 0 3px var(--lucent-accent-subtle)";
-function Jt(e) {
+}, Xe = "inset 0 0 0 1px rgba(0,0,0,0.2)", je = "inset 0 0 0 2px rgba(0,0,0,0.5)", ea = "inset 0 0 0 1px rgba(0,0,0,0.2), 0 0 0 3px var(--lucent-accent-subtle)";
+function ta(e) {
   return {
     backgroundImage: [
       `linear-gradient(${e}, ${e})`,
@@ -1084,7 +1092,7 @@ function Jt(e) {
     backgroundColor: "#fff"
   };
 }
-const de = xe(({
+const pe = he(({
   color: e,
   size: t = "md",
   shape: s = "circle",
@@ -1093,75 +1101,75 @@ const de = xe(({
   disabled: r = !1,
   style: o,
   onFocus: c,
-  onBlur: u,
-  onClick: i,
-  ...d
-}, g) => {
-  const h = Kt[t], p = s === "circle" ? "50%" : Yt[t];
+  onBlur: i,
+  onClick: d,
+  ...u
+}, m) => {
+  const h = Jt[t], b = s === "circle" ? "50%" : Qt[t];
   return /* @__PURE__ */ f(
     "button",
     {
-      ref: g,
+      ref: m,
       type: "button",
       disabled: r,
-      onClick: i,
+      onClick: d,
       style: {
         width: h,
         height: h,
         flexShrink: 0,
-        ...a ? Jt(e) : { background: e },
+        ...a ? ta(e) : { background: e },
         border: "none",
-        borderRadius: p,
-        cursor: r ? "not-allowed" : i ? "pointer" : "default",
+        borderRadius: b,
+        cursor: r ? "not-allowed" : d ? "pointer" : "default",
         padding: 0,
         outline: "none",
         opacity: r ? 0.4 : 1,
-        boxShadow: n ? Oe : Ae,
+        boxShadow: n ? je : Xe,
         transition: "box-shadow var(--lucent-duration-fast) var(--lucent-easing-default)",
         ...o
       },
-      onFocus: (y) => {
-        r || (y.currentTarget.style.boxShadow = Zt), c == null || c(y);
+      onFocus: (v) => {
+        r || (v.currentTarget.style.boxShadow = ea), c == null || c(v);
       },
-      onBlur: (y) => {
-        y.currentTarget.style.boxShadow = n ? Oe : Ae, u == null || u(y);
+      onBlur: (v) => {
+        v.currentTarget.style.boxShadow = n ? je : Xe, i == null || i(v);
       },
-      ...d
+      ...u
     }
   );
 });
-de.displayName = "ColorSwatch";
-function pe(e, t, s) {
+pe.displayName = "ColorSwatch";
+function be(e, t, s) {
   return Math.max(t, Math.min(s, e));
 }
-function Qt(e, t, s) {
+function aa(e, t, s) {
   const a = t / 100, n = s / 100, r = n * a, o = r * (1 - Math.abs(e / 60 % 2 - 1)), c = n - r;
-  let u = 0, i = 0, d = 0;
-  return e < 60 ? (u = r, i = o) : e < 120 ? (u = o, i = r) : e < 180 ? (i = r, d = o) : e < 240 ? (i = o, d = r) : e < 300 ? (u = o, d = r) : (u = r, d = o), { r: Math.round((u + c) * 255), g: Math.round((i + c) * 255), b: Math.round((d + c) * 255) };
-}
-function ea(e, t, s) {
-  const a = e / 255, n = t / 255, r = s / 255, o = Math.max(a, n, r), c = Math.min(a, n, r), u = o - c, i = o, d = o === 0 ? 0 : u / o;
-  let g = 0;
-  return u !== 0 && (o === a ? g = ((n - r) / u + (n < r ? 6 : 0)) / 6 : o === n ? g = ((r - a) / u + 2) / 6 : g = ((a - n) / u + 4) / 6), { h: Math.round(g * 360), s: Math.round(d * 100), v: Math.round(i * 100) };
-}
-function ta(e, t, s) {
-  const a = e / 255, n = t / 255, r = s / 255, o = Math.max(a, n, r), c = Math.min(a, n, r), u = (o + c) / 2;
-  if (o === c) return { h: 0, s: 0, l: Math.round(u * 100) };
-  const i = o - c, d = u > 0.5 ? i / (2 - o - c) : i / (o + c);
-  let g = 0;
-  return o === a ? g = ((n - r) / i + (n < r ? 6 : 0)) / 6 : o === n ? g = ((r - a) / i + 2) / 6 : g = ((a - n) / i + 4) / 6, { h: Math.round(g * 360), s: Math.round(d * 100), l: Math.round(u * 100) };
-}
-function fe(e, t, s) {
+  let i = 0, d = 0, u = 0;
+  return e < 60 ? (i = r, d = o) : e < 120 ? (i = o, d = r) : e < 180 ? (d = r, u = o) : e < 240 ? (d = o, u = r) : e < 300 ? (i = o, u = r) : (i = r, u = o), { r: Math.round((i + c) * 255), g: Math.round((d + c) * 255), b: Math.round((u + c) * 255) };
+}
+function na(e, t, s) {
+  const a = e / 255, n = t / 255, r = s / 255, o = Math.max(a, n, r), c = Math.min(a, n, r), i = o - c, d = o, u = o === 0 ? 0 : i / o;
+  let m = 0;
+  return i !== 0 && (o === a ? m = ((n - r) / i + (n < r ? 6 : 0)) / 6 : o === n ? m = ((r - a) / i + 2) / 6 : m = ((a - n) / i + 4) / 6), { h: Math.round(m * 360), s: Math.round(u * 100), v: Math.round(d * 100) };
+}
+function ra(e, t, s) {
+  const a = e / 255, n = t / 255, r = s / 255, o = Math.max(a, n, r), c = Math.min(a, n, r), i = (o + c) / 2;
+  if (o === c) return { h: 0, s: 0, l: Math.round(i * 100) };
+  const d = o - c, u = i > 0.5 ? d / (2 - o - c) : d / (o + c);
+  let m = 0;
+  return o === a ? m = ((n - r) / d + (n < r ? 6 : 0)) / 6 : o === n ? m = ((r - a) / d + 2) / 6 : m = ((a - n) / d + 4) / 6, { h: Math.round(m * 360), s: Math.round(u * 100), l: Math.round(i * 100) };
+}
+function ge(e, t, s) {
   const a = t / 100, n = s / 100, r = (1 - Math.abs(2 * n - 1)) * a, o = r * (1 - Math.abs(e / 60 % 2 - 1)), c = n - r / 2;
-  let u = 0, i = 0, d = 0;
-  return e < 60 ? (u = r, i = o) : e < 120 ? (u = o, i = r) : e < 180 ? (i = r, d = o) : e < 240 ? (i = o, d = r) : e < 300 ? (u = o, d = r) : (u = r, d = o), { r: Math.round((u + c) * 255), g: Math.round((i + c) * 255), b: Math.round((d + c) * 255) };
+  let i = 0, d = 0, u = 0;
+  return e < 60 ? (i = r, d = o) : e < 120 ? (i = o, d = r) : e < 180 ? (d = r, u = o) : e < 240 ? (d = o, u = r) : e < 300 ? (i = o, u = r) : (i = r, u = o), { r: Math.round((i + c) * 255), g: Math.round((d + c) * 255), b: Math.round((u + c) * 255) };
 }
-function Re(e) {
+function Fe(e) {
   const t = e.replace("#", "");
   return t.length === 3 ? `#${t[0]}${t[0]}${t[1]}${t[1]}${t[2]}${t[2]}` : t.length === 6 || t.length === 8 ? `#${t}` : "#000000";
 }
-function Qe(e) {
-  const t = Re(e);
+function tt(e) {
+  const t = Fe(e);
   return {
     r: parseInt(t.slice(1, 3), 16),
     g: parseInt(t.slice(3, 5), 16),
@@ -1169,38 +1177,38 @@ function Qe(e) {
     a: t.length === 9 ? +(parseInt(t.slice(7, 9), 16) / 255).toFixed(2) : 1
   };
 }
-function $e({ r: e, g: t, b: s, a }) {
-  const n = (o) => pe(Math.round(o), 0, 255).toString(16).padStart(2, "0"), r = `#${n(e)}${n(t)}${n(s)}`;
+function Le({ r: e, g: t, b: s, a }) {
+  const n = (o) => be(Math.round(o), 0, 255).toString(16).padStart(2, "0"), r = `#${n(e)}${n(t)}${n(s)}`;
   return a < 1 ? `${r}${n(Math.round(a * 255))}` : r;
 }
-function et({ h: e, s: t, v: s, a }) {
-  return { ...Qt(e, t, s), a };
+function at({ h: e, s: t, v: s, a }) {
+  return { ...aa(e, t, s), a };
 }
-function G({ r: e, g: t, b: s, a }) {
-  return { ...ea(e, t, s), a };
+function q({ r: e, g: t, b: s, a }) {
+  return { ...na(e, t, s), a };
 }
-function oe(e) {
-  return $e(et(e));
+function ce(e) {
+  return Le(at(e));
 }
-function le(e) {
+function ie(e) {
   const t = e.trim();
   if (t.startsWith("#")) {
-    const n = Re(t);
-    return /^#[0-9a-f]{6}([0-9a-f]{2})?$/i.test(n) ? Qe(n) : null;
+    const n = Fe(t);
+    return /^#[0-9a-f]{6}([0-9a-f]{2})?$/i.test(n) ? tt(n) : null;
   }
   const s = t.match(/^rgba?\(\s*(\d{1,3})\s*,\s*(\d{1,3})\s*,\s*(\d{1,3})(?:\s*,\s*([\d.]+))?\s*\)$/);
   if (s) {
     const n = +(s[1] ?? "0"), r = +(s[2] ?? "0"), o = +(s[3] ?? "0"), c = s[4] !== void 0 ? +s[4] : 1;
-    return [n, r, o].every((u) => u <= 255) && c >= 0 && c <= 1 ? { r: n, g: r, b: o, a: c } : null;
+    return [n, r, o].every((i) => i <= 255) && c >= 0 && c <= 1 ? { r: n, g: r, b: o, a: c } : null;
   }
   const a = t.match(/^hsl\(\s*(\d{1,3})\s*,\s*(\d{1,3})%?\s*,\s*(\d{1,3})%?\s*\)$/);
   if (a) {
     const n = +(a[1] ?? "0"), r = +(a[2] ?? "0"), o = +(a[3] ?? "0");
-    return n <= 360 && r <= 100 && o <= 100 ? { ...fe(n, r, o), a: 1 } : null;
+    return n <= 360 && r <= 100 && o <= 100 ? { ...ge(n, r, o), a: 1 } : null;
   }
   return null;
 }
-const aa = [
+const sa = [
   {
     label: "Presets",
     colors: [
@@ -1215,36 +1223,36 @@ const aa = [
       "#e11d48"
     ]
   }
-], na = [
+], oa = [
   "linear-gradient(45deg, #c0c0c0 25%, transparent 25%)",
   "linear-gradient(-45deg, #c0c0c0 25%, transparent 25%)",
   "linear-gradient(45deg, transparent 75%, #c0c0c0 75%)",
   "linear-gradient(-45deg, transparent 75%, #c0c0c0 75%)"
 ].join(", ");
-function Xe({ value: e, min: t, max: s, onChange: a, trackStyle: n, formatTooltip: r }) {
-  const o = q(null), [c, u] = P(!1), i = ue((g) => {
-    const h = o.current.getBoundingClientRect(), p = pe((g.clientX - h.left) / h.width, 0, 1);
-    a(t + p * (s - t));
-  }, [t, s, a]), d = (e - t) / (s - t) * 100;
+function Ue({ value: e, min: t, max: s, onChange: a, trackStyle: n, formatTooltip: r }) {
+  const o = U(null), [c, i] = F(!1), d = fe((m) => {
+    const h = o.current.getBoundingClientRect(), b = be((m.clientX - h.left) / h.width, 0, 1);
+    a(t + b * (s - t));
+  }, [t, s, a]), u = (e - t) / (s - t) * 100;
   return /* @__PURE__ */ f(
     "div",
     {
       ref: o,
       style: { position: "relative", height: 12, borderRadius: 6, cursor: "crosshair", userSelect: "none", ...n },
-      onPointerDown: (g) => {
-        g.currentTarget.setPointerCapture(g.pointerId), u(!0), i(g);
+      onPointerDown: (m) => {
+        m.currentTarget.setPointerCapture(m.pointerId), i(!0), d(m);
       },
-      onPointerMove: (g) => {
-        g.buttons > 0 && i(g);
+      onPointerMove: (m) => {
+        m.buttons > 0 && d(m);
       },
-      onPointerUp: () => u(!1),
-      onPointerCancel: () => u(!1),
+      onPointerUp: () => i(!1),
+      onPointerCancel: () => i(!1),
       children: /* @__PURE__ */ f(
         "div",
         {
           style: {
             position: "absolute",
-            left: `${d}%`,
+            left: `${u}%`,
             top: "50%",
             transform: "translate(-50%, -50%)",
             width: 14,
@@ -1277,78 +1285,78 @@ function Xe({ value: e, min: t, max: s, onChange: a, trackStyle: n, formatToolti
     }
   );
 }
-function ra() {
+function la() {
   return /* @__PURE__ */ T("svg", { width: 14, height: 14, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 2, strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": !0, children: [
     /* @__PURE__ */ f("path", { d: "M2 22l1-1h3l9-9" }),
     /* @__PURE__ */ f("path", { d: "M3 21v-3l9-9" }),
     /* @__PURE__ */ f("path", { d: "M15 6l3.4-3.4a2.1 2.1 0 1 1 3 3L18 9l.4.4a2.1 2.1 0 1 1-3 3l-3.8-3.8a2.1 2.1 0 1 1 3-3l.4.4Z" })
   ] });
 }
-function sa({
+function ca({
   value: e,
   onChange: t,
   label: s,
   size: a = "md",
   inline: n = !1,
   disabled: r = !1,
-  presetGroups: o = aa,
+  presetGroups: o = sa,
   portalContainer: c,
-  id: u,
-  style: i
+  id: i,
+  style: d
 }) {
-  var S, W;
-  const d = a === "sm" ? 24 : 40, g = Ke(), h = u ?? g, [p, y] = P(!1), [I, k] = P("hex"), [L, b] = P(0), [m, w] = P(() => {
-    const l = e ? le(e) ?? { r: 0, g: 0, b: 0, a: 1 } : { r: 0, g: 0, b: 0, a: 1 };
-    return G(l);
-  }), [R, E] = P(() => oe(m).slice(1).toUpperCase()), X = q(null), A = q(null), D = q(null), [C, K] = P({ top: 0, left: 0 });
-  me(() => {
-    if (!p || !X.current) return;
-    const l = X.current.getBoundingClientRect();
-    let x = l.left;
-    const z = l.bottom + 8;
-    if (D.current) {
-      const $ = D.current.offsetWidth;
-      x + $ > window.innerWidth && (x = l.right - $);
+  var w, L;
+  const u = a === "sm" ? 24 : 40, m = Ze(), h = i ?? m, [b, v] = F(!1), [B, I] = F("hex"), [S, p] = F(0), [x, D] = F(() => {
+    const l = e ? ie(e) ?? { r: 0, g: 0, b: 0, a: 1 } : { r: 0, g: 0, b: 0, a: 1 };
+    return q(l);
+  }), [$, E] = F(() => ce(x).slice(1).toUpperCase()), A = U(null), H = U(null), N = U(null), [k, R] = F({ top: 0, left: 0 });
+  ve(() => {
+    if (!b || !A.current) return;
+    const l = A.current.getBoundingClientRect();
+    let g = l.left;
+    const y = l.bottom + 8;
+    if (N.current) {
+      const M = N.current.offsetWidth;
+      g + M > window.innerWidth && (g = l.right - M);
     }
-    K({ top: z, left: x });
-  }, [p]), ne(() => {
+    R({ top: y, left: g });
+  }, [b]), re(() => {
     if (!e) return;
-    const l = le(e);
-    l && (w(G(l)), E($e(l).slice(1).toUpperCase()));
-  }, [e]), ne(() => {
-    if (!p) return;
-    const l = (x) => {
-      var $, O;
-      const z = x.target;
-      ($ = X.current) != null && $.contains(z) || (O = D.current) != null && O.contains(z) || y(!1);
+    const l = ie(e);
+    l && (D(q(l)), E(Le(l).slice(1).toUpperCase()));
+  }, [e]), re(() => {
+    if (!b) return;
+    const l = (g) => {
+      var M, X;
+      const y = g.target;
+      (M = A.current) != null && M.contains(y) || (X = N.current) != null && X.contains(y) || v(!1);
     };
     return document.addEventListener("mousedown", l), () => document.removeEventListener("mousedown", l);
-  }, [p]);
-  const B = ue((l) => {
-    w(l);
-    const x = oe(l);
-    E(x.slice(1).toUpperCase()), t == null || t(x);
-  }, [t]), j = ue((l) => {
-    const x = A.current.getBoundingClientRect(), z = Math.round(pe((l.clientX - x.left) / x.width, 0, 1) * 100), $ = Math.round((1 - pe((l.clientY - x.top) / x.height, 0, 1)) * 100);
-    B({ ...m, s: z, v: $ });
-  }, [m, B]), _ = ue(async () => {
+  }, [b]);
+  const P = fe((l) => {
+    D(l);
+    const g = ce(l);
+    E(g.slice(1).toUpperCase()), t == null || t(g);
+  }, [t]), O = fe((l) => {
+    const g = H.current.getBoundingClientRect(), y = Math.round(be((l.clientX - g.left) / g.width, 0, 1) * 100), M = Math.round((1 - be((l.clientY - g.top) / g.height, 0, 1)) * 100);
+    P({ ...x, s: y, v: M });
+  }, [x, P]), G = fe(async () => {
     if ("EyeDropper" in window)
       try {
-        const l = await new window.EyeDropper().open(), x = le(l.sRGBHex);
-        x && B(G(x));
+        const l = await new window.EyeDropper().open(), g = ie(l.sRGBHex);
+        g && P(q(g));
       } catch {
       }
-  }, [B]), N = et(m), U = ta(N.r, N.g, N.b), ae = oe(m), Se = oe({ ...m, a: 1 }), Z = Math.round(m.a * 100), v = [
+  }, [P]), W = at(x), j = ra(W.r, W.g, W.b), ae = ce(x), le = ce({ ...x, a: 1 }), K = Math.round(x.a * 100), ze = [
     { id: "hex", label: "Hex" },
     { id: "rgb", label: "RGB" },
     { id: "hsl", label: "HSL" },
     { id: "hsb", label: "HSB" }
-  ], F = typeof window < "u" && "EyeDropper" in window;
+  ], ne = typeof window < "u" && "EyeDropper" in window;
   return /* @__PURE__ */ T(
     "div",
     {
-      ref: X,
-      style: { display: "inline-flex", flexDirection: n ? "row" : "column", alignItems: n ? "center" : void 0, gap: "var(--lucent-space-1)", position: "relative", ...i },
+      ref: A,
+      style: { display: "inline-flex", flexDirection: n ? "row" : "column", alignItems: n ? "center" : void 0, gap: "var(--lucent-space-1)", position: "relative", ...d },
       children: [
         /* @__PURE__ */ f("style", { children: `
         .lucent-cp-field::-webkit-outer-spin-button,
@@ -1369,21 +1377,21 @@ function sa({
           }
         ),
         /* @__PURE__ */ f(
-          de,
+          pe,
           {
             id: `${h}-swatch`,
-            color: `rgba(${N.r},${N.g},${N.b},${m.a})`,
+            color: `rgba(${W.r},${W.g},${W.b},${x.a})`,
             shape: "square",
             showCheckerboard: !0,
             disabled: r,
-            onClick: () => y((l) => !l),
-            "aria-expanded": p,
+            onClick: () => v((l) => !l),
+            "aria-expanded": b,
             "aria-haspopup": "dialog",
             style: {
-              width: d,
-              height: d,
+              width: u,
+              height: u,
               borderRadius: a === "sm" ? "var(--lucent-radius-md)" : "var(--lucent-radius-lg)",
-              boxShadow: p ? "inset 0 0 0 2px var(--lucent-accent-border), 0 0 0 3px var(--lucent-accent-subtle)" : "inset 0 0 0 1px rgba(0,0,0,0.2)"
+              boxShadow: b ? "inset 0 0 0 2px var(--lucent-accent-border), 0 0 0 3px var(--lucent-accent-subtle)" : "inset 0 0 0 1px rgba(0,0,0,0.2)"
             }
           }
         ),
@@ -1401,17 +1409,17 @@ function sa({
             children: s
           }
         ),
-        p && Dt(
+        b && kt(
           /* @__PURE__ */ T(
             "div",
             {
-              ref: D,
+              ref: N,
               role: "dialog",
               "aria-label": "Color picker",
               style: {
                 position: "fixed",
-                top: C.top,
-                left: C.left,
+                top: k.top,
+                left: k.left,
                 zIndex: 999999,
                 background: "color-mix(in srgb, var(--lucent-surface-overlay) 85%, transparent)",
                 backdropFilter: "blur(6px)",
@@ -1428,28 +1436,28 @@ function sa({
                 /* @__PURE__ */ T(
                   "div",
                   {
-                    ref: A,
+                    ref: H,
                     style: {
                       position: "relative",
                       height: 160,
-                      background: `hsl(${m.h}, 100%, 50%)`,
+                      background: `hsl(${x.h}, 100%, 50%)`,
                       cursor: "crosshair",
                       userSelect: "none",
                       flexShrink: 0
                     },
                     onPointerDown: (l) => {
-                      l.currentTarget.setPointerCapture(l.pointerId), j(l);
+                      l.currentTarget.setPointerCapture(l.pointerId), O(l);
                     },
                     onPointerMove: (l) => {
-                      l.buttons > 0 && j(l);
+                      l.buttons > 0 && O(l);
                     },
                     children: [
                       /* @__PURE__ */ f("div", { style: { position: "absolute", inset: 0, background: "linear-gradient(to right, #fff, transparent)" } }),
                       /* @__PURE__ */ f("div", { style: { position: "absolute", inset: 0, background: "linear-gradient(to bottom, transparent, #000)" } }),
                       /* @__PURE__ */ f("div", { style: {
                         position: "absolute",
-                        left: `${m.s}%`,
-                        top: `${100 - m.v}%`,
+                        left: `${x.s}%`,
+                        top: `${100 - x.v}%`,
                         transform: "translate(-50%, -50%)",
                         width: 14,
                         height: 14,
@@ -1464,9 +1472,9 @@ function sa({
                 /* @__PURE__ */ T("div", { style: { padding: 12, display: "flex", flexDirection: "column", gap: 10 }, children: [
                   /* @__PURE__ */ T("div", { style: { display: "flex", gap: 10, alignItems: "center" }, children: [
                     /* @__PURE__ */ f(
-                      de,
+                      pe,
                       {
-                        color: `rgba(${N.r},${N.g},${N.b},${m.a})`,
+                        color: `rgba(${W.r},${W.g},${W.b},${x.a})`,
                         shape: "square",
                         showCheckerboard: !0,
                         style: { width: 44, height: 44, borderRadius: 8 }
@@ -1474,12 +1482,12 @@ function sa({
                     ),
                     /* @__PURE__ */ T("div", { style: { flex: 1, display: "flex", flexDirection: "column", gap: 8 }, children: [
                       /* @__PURE__ */ f(
-                        Xe,
+                        Ue,
                         {
-                          value: m.h,
+                          value: x.h,
                           min: 0,
                           max: 360,
-                          onChange: (l) => B({ ...m, h: Math.round(l) }),
+                          onChange: (l) => P({ ...x, h: Math.round(l) }),
                           trackStyle: { background: "linear-gradient(to right, #f00 0%, #ff0 17%, #0f0 33%, #0ff 50%, #00f 67%, #f0f 83%, #f00 100%)" },
                           formatTooltip: (l) => `${Math.round(l)}°`
                         }
@@ -1488,19 +1496,19 @@ function sa({
                         /* @__PURE__ */ f("div", { style: {
                           position: "absolute",
                           inset: 0,
-                          backgroundImage: na,
+                          backgroundImage: oa,
                           backgroundSize: "8px 8px",
                           backgroundPosition: "0 0, 0 4px, 4px -4px, -4px 0",
                           backgroundColor: "#fff"
                         } }),
-                        /* @__PURE__ */ f("div", { style: { position: "absolute", inset: 0, background: `linear-gradient(to right, transparent, ${Se})` } }),
+                        /* @__PURE__ */ f("div", { style: { position: "absolute", inset: 0, background: `linear-gradient(to right, transparent, ${le})` } }),
                         /* @__PURE__ */ f(
-                          Xe,
+                          Ue,
                           {
-                            value: m.a,
+                            value: x.a,
                             min: 0,
                             max: 1,
-                            onChange: (l) => B({ ...m, a: Math.round(l * 100) / 100 }),
+                            onChange: (l) => P({ ...x, a: Math.round(l * 100) / 100 }),
                             trackStyle: { background: "transparent", position: "relative", zIndex: 1 },
                             formatTooltip: (l) => `${Math.round(l * 100)}%`
                           }
@@ -1509,24 +1517,24 @@ function sa({
                     ] })
                   ] }),
                   /* @__PURE__ */ f(
-                    Je,
+                    et,
                     {
                       size: "sm",
-                      value: I,
-                      onChange: (l) => k(l),
-                      options: v.map(({ id: l, label: x }) => ({ value: l, label: x }))
+                      value: B,
+                      onChange: (l) => I(l),
+                      options: ze.map(({ id: l, label: g }) => ({ value: l, label: g }))
                     }
                   ),
-                  I === "hex" && /* @__PURE__ */ T("div", { style: { display: "flex", gap: 6, alignItems: "center" }, children: [
+                  B === "hex" && /* @__PURE__ */ T("div", { style: { display: "flex", gap: 6, alignItems: "center" }, children: [
                     /* @__PURE__ */ f(
-                      Ye,
+                      Je,
                       {
                         variant: "secondary",
                         size: "sm",
-                        onClick: _,
-                        disabled: !F,
-                        title: F ? "Pick color from screen" : "Not supported in this browser",
-                        leftIcon: /* @__PURE__ */ f(ra, {}),
+                        onClick: G,
+                        disabled: !ne,
+                        title: ne ? "Pick color from screen" : "Not supported in this browser",
+                        leftIcon: /* @__PURE__ */ f(la, {}),
                         style: { flexShrink: 0, paddingLeft: 8, paddingRight: 8 }
                       }
                     ),
@@ -1535,14 +1543,14 @@ function sa({
                       {
                         size: "sm",
                         prefix: "#",
-                        value: R,
+                        value: $,
                         onChange: (l) => {
-                          const x = l.target.value.replace(/[^0-9a-fA-F]/g, "");
-                          if (E(x.toUpperCase()), /^[0-9a-f]{6}$/i.test(x) || /^[0-9a-f]{8}$/i.test(x)) {
-                            const z = le(`#${x}`);
-                            if (z) {
-                              const $ = G(z);
-                              w($), t == null || t($e(z));
+                          const g = l.target.value.replace(/[^0-9a-fA-F]/g, "");
+                          if (E(g.toUpperCase()), /^[0-9a-f]{6}$/i.test(g) || /^[0-9a-f]{8}$/i.test(g)) {
+                            const y = ie(`#${g}`);
+                            if (y) {
+                              const M = q(y);
+                              D(M), t == null || t(Le(y));
                             }
                           }
                         },
@@ -1558,62 +1566,62 @@ function sa({
                         size: "sm",
                         type: "number",
                         suffix: "%",
-                        value: Z,
+                        value: K,
                         min: 0,
                         max: 100,
                         onChange: (l) => {
-                          const x = +l.target.value;
-                          !isNaN(x) && x >= 0 && x <= 100 && B({ ...m, a: x / 100 });
+                          const g = +l.target.value;
+                          !isNaN(g) && g >= 0 && g <= 100 && P({ ...x, a: g / 100 });
                         },
                         className: "lucent-cp-field",
                         style: { width: 68, flexShrink: 0 }
                       }
                     )
                   ] }),
-                  I === "rgb" && /* @__PURE__ */ f("div", { style: { display: "flex", gap: 6 }, children: [
-                    { label: "R", val: N.r, max: 255, fn: (l) => B(G({ ...N, r: l })) },
-                    { label: "G", val: N.g, max: 255, fn: (l) => B(G({ ...N, g: l })) },
-                    { label: "B", val: N.b, max: 255, fn: (l) => B(G({ ...N, b: l })) },
-                    { label: "A", val: Z, max: 100, fn: (l) => B({ ...m, a: l / 100 }) }
-                  ].map(({ label: l, val: x, max: z, fn: $ }) => /* @__PURE__ */ f(te, { size: "sm", type: "number", prefix: l, value: x, min: 0, max: z, onChange: (O) => {
-                    const H = +O.target.value;
-                    !isNaN(H) && H >= 0 && H <= z && $(H);
+                  B === "rgb" && /* @__PURE__ */ f("div", { style: { display: "flex", gap: 6 }, children: [
+                    { label: "R", val: W.r, max: 255, fn: (l) => P(q({ ...W, r: l })) },
+                    { label: "G", val: W.g, max: 255, fn: (l) => P(q({ ...W, g: l })) },
+                    { label: "B", val: W.b, max: 255, fn: (l) => P(q({ ...W, b: l })) },
+                    { label: "A", val: K, max: 100, fn: (l) => P({ ...x, a: l / 100 }) }
+                  ].map(({ label: l, val: g, max: y, fn: M }) => /* @__PURE__ */ f(te, { size: "sm", type: "number", prefix: l, value: g, min: 0, max: y, onChange: (X) => {
+                    const C = +X.target.value;
+                    !isNaN(C) && C >= 0 && C <= y && M(C);
                   }, className: "lucent-cp-field", style: { flex: 1 } }, l)) }),
-                  I === "hsl" && /* @__PURE__ */ f("div", { style: { display: "flex", gap: 6 }, children: [
-                    { label: "H", val: U.h, max: 360, fn: (l) => {
-                      const { r: x, g: z, b: $ } = fe(l, U.s, U.l);
-                      B(G({ r: x, g: z, b: $, a: m.a }));
+                  B === "hsl" && /* @__PURE__ */ f("div", { style: { display: "flex", gap: 6 }, children: [
+                    { label: "H", val: j.h, max: 360, fn: (l) => {
+                      const { r: g, g: y, b: M } = ge(l, j.s, j.l);
+                      P(q({ r: g, g: y, b: M, a: x.a }));
                     } },
-                    { label: "S", val: U.s, max: 100, fn: (l) => {
-                      const { r: x, g: z, b: $ } = fe(U.h, l, U.l);
-                      B(G({ r: x, g: z, b: $, a: m.a }));
+                    { label: "S", val: j.s, max: 100, fn: (l) => {
+                      const { r: g, g: y, b: M } = ge(j.h, l, j.l);
+                      P(q({ r: g, g: y, b: M, a: x.a }));
                     } },
-                    { label: "L", val: U.l, max: 100, fn: (l) => {
-                      const { r: x, g: z, b: $ } = fe(U.h, U.s, l);
-                      B(G({ r: x, g: z, b: $, a: m.a }));
+                    { label: "L", val: j.l, max: 100, fn: (l) => {
+                      const { r: g, g: y, b: M } = ge(j.h, j.s, l);
+                      P(q({ r: g, g: y, b: M, a: x.a }));
                     } },
-                    { label: "A", val: Z, max: 100, fn: (l) => B({ ...m, a: l / 100 }) }
-                  ].map(({ label: l, val: x, max: z, fn: $ }) => /* @__PURE__ */ f(te, { size: "sm", type: "number", prefix: l, value: x, min: 0, max: z, onChange: (O) => {
-                    const H = +O.target.value;
-                    !isNaN(H) && H >= 0 && H <= z && $(H);
+                    { label: "A", val: K, max: 100, fn: (l) => P({ ...x, a: l / 100 }) }
+                  ].map(({ label: l, val: g, max: y, fn: M }) => /* @__PURE__ */ f(te, { size: "sm", type: "number", prefix: l, value: g, min: 0, max: y, onChange: (X) => {
+                    const C = +X.target.value;
+                    !isNaN(C) && C >= 0 && C <= y && M(C);
                   }, className: "lucent-cp-field", style: { flex: 1 } }, l)) }),
-                  I === "hsb" && /* @__PURE__ */ f("div", { style: { display: "flex", gap: 6 }, children: [
-                    { label: "H", val: m.h, max: 360, fn: (l) => B({ ...m, h: l }) },
-                    { label: "S", val: m.s, max: 100, fn: (l) => B({ ...m, s: l }) },
-                    { label: "B", val: m.v, max: 100, fn: (l) => B({ ...m, v: l }) },
-                    { label: "A", val: Z, max: 100, fn: (l) => B({ ...m, a: l / 100 }) }
-                  ].map(({ label: l, val: x, max: z, fn: $ }) => /* @__PURE__ */ f(te, { size: "sm", type: "number", prefix: l, value: x, min: 0, max: z, onChange: (O) => {
-                    const H = +O.target.value;
-                    !isNaN(H) && H >= 0 && H <= z && $(H);
+                  B === "hsb" && /* @__PURE__ */ f("div", { style: { display: "flex", gap: 6 }, children: [
+                    { label: "H", val: x.h, max: 360, fn: (l) => P({ ...x, h: l }) },
+                    { label: "S", val: x.s, max: 100, fn: (l) => P({ ...x, s: l }) },
+                    { label: "B", val: x.v, max: 100, fn: (l) => P({ ...x, v: l }) },
+                    { label: "A", val: K, max: 100, fn: (l) => P({ ...x, a: l / 100 }) }
+                  ].map(({ label: l, val: g, max: y, fn: M }) => /* @__PURE__ */ f(te, { size: "sm", type: "number", prefix: l, value: g, min: 0, max: y, onChange: (X) => {
+                    const C = +X.target.value;
+                    !isNaN(C) && C >= 0 && C <= y && M(C);
                   }, className: "lucent-cp-field", style: { flex: 1 } }, l)) }),
                   o.length > 0 && /* @__PURE__ */ T("div", { style: { display: "flex", flexDirection: "column", gap: 8 }, children: [
                     o.length > 1 && /* @__PURE__ */ f(
-                      Ze,
+                      Qe,
                       {
                         size: "sm",
-                        value: String(L),
-                        onChange: (l) => b(Number(l.target.value)),
-                        options: o.map((l, x) => ({ value: String(x), label: l.label }))
+                        value: String(S),
+                        onChange: (l) => p(Number(l.target.value)),
+                        options: o.map((l, g) => ({ value: String(g), label: l.label }))
                       }
                     ),
                     o.length === 1 && /* @__PURE__ */ f("span", { style: {
@@ -1621,15 +1629,15 @@ function sa({
                       fontWeight: "var(--lucent-font-weight-medium)",
                       color: "var(--lucent-text-secondary)",
                       fontFamily: "var(--lucent-font-family-base)"
-                    }, children: (S = o[0]) == null ? void 0 : S.label }),
-                    /* @__PURE__ */ f("div", { style: { display: "flex", gap: 6, flexWrap: "wrap" }, children: (((W = o[L]) == null ? void 0 : W.colors) ?? []).map((l) => {
-                      const x = Re(l).toLowerCase() === ae.slice(0, 7).toLowerCase();
+                    }, children: (w = o[0]) == null ? void 0 : w.label }),
+                    /* @__PURE__ */ f("div", { style: { display: "flex", gap: 6, flexWrap: "wrap" }, children: (((L = o[S]) == null ? void 0 : L.colors) ?? []).map((l) => {
+                      const g = Fe(l).toLowerCase() === ae.slice(0, 7).toLowerCase();
                       return /* @__PURE__ */ f(
-                        de,
+                        pe,
                         {
                           color: l,
-                          selected: x,
-                          onClick: () => B(G(Qe(l)))
+                          selected: g,
+                          onClick: () => P(q(tt(l)))
                         },
                         l
                       );
@@ -1645,145 +1653,163 @@ function sa({
     }
   );
 }
-sa.displayName = "ColorPicker";
-function dn({ tabs: e, defaultValue: t, value: s, onChange: a, variant: n = "underline", style: r }) {
-  var Z;
-  const o = s !== void 0, [c, u] = P(t ?? ((Z = e[0]) == null ? void 0 : Z.value) ?? ""), i = o ? s : c, [d, g] = P(null), h = q([]), [p, y] = P(null), I = q(!1), k = n === "pills", L = q(null), b = q(null), m = q(null), [w, R] = P(e.length), [E, X] = P(!1), [A, D] = P(!1), [C, K] = P(null), B = e.slice(0, w), j = e.slice(w), _ = j.length > 0, N = j.some((v) => v.value === i), U = () => {
-    if (N) {
-      y(null);
+ca.displayName = "ColorPicker";
+const ia = {
+  sm: {
+    fontSize: "var(--lucent-font-size-sm)",
+    buttonPadding: "var(--lucent-space-1) var(--lucent-space-1)",
+    buttonPaddingUnderline: "0 var(--lucent-space-1) var(--lucent-space-2)",
+    innerPadding: "var(--lucent-space-1) var(--lucent-space-2)",
+    panelPadding: "var(--lucent-space-3) 0",
+    dropdownPadding: "var(--lucent-space-1) var(--lucent-space-3)"
+  },
+  md: {
+    fontSize: "var(--lucent-font-size-md)",
+    buttonPadding: "var(--lucent-space-1) var(--lucent-space-2)",
+    buttonPaddingUnderline: "var(--lucent-space-1) var(--lucent-space-2) var(--lucent-space-3)",
+    innerPadding: "var(--lucent-space-1) var(--lucent-space-3)",
+    panelPadding: "var(--lucent-space-4) 0",
+    dropdownPadding: "var(--lucent-space-2) var(--lucent-space-4)"
+  }
+};
+function mn({ tabs: e, defaultValue: t, value: s, onChange: a, variant: n = "underline", size: r = "md", style: o }) {
+  var ne;
+  const c = s !== void 0, [i, d] = F(t ?? ((ne = e[0]) == null ? void 0 : ne.value) ?? ""), u = c ? s : i, [m, h] = F(null), b = U([]), [v, B] = F(null), I = U(!1), S = n === "pills", p = ia[r], x = U(null), D = U(null), $ = U(null), [E, A] = F(e.length), [H, N] = F(!1), [k, R] = F(!1), [P, O] = F(null), G = e.slice(0, E), W = e.slice(E), j = W.length > 0, ae = W.some((w) => w.value === u), le = () => {
+    if (ae) {
+      B(null);
       return;
     }
-    const v = e.findIndex((S, W) => W < w && S.value === i), F = h.current[v];
-    if (F) {
-      if (k) {
-        const S = F.querySelector("span");
-        if (!S) return;
-        y({ left: S.offsetLeft + F.offsetLeft, width: S.offsetWidth, animate: I.current });
+    const w = e.findIndex((l, g) => g < E && l.value === u), L = b.current[w];
+    if (L) {
+      if (S) {
+        const l = L.querySelector("span");
+        if (!l) return;
+        B({ left: l.offsetLeft + L.offsetLeft, width: l.offsetWidth, animate: I.current });
       } else
-        y({ left: F.offsetLeft, width: F.offsetWidth, animate: I.current });
+        B({ left: L.offsetLeft, width: L.offsetWidth, animate: I.current });
       I.current = !0;
     }
   };
-  me(() => {
-    U(), document.fonts.ready.then(U);
-  }, [i, w, k]), ne(() => {
-    const v = L.current;
-    if (!v) return;
-    const F = () => {
-      const x = v.clientWidth, z = 70;
-      let $ = 0, O = 0;
-      for (let H = 0; H < e.length; H++) {
-        const J = h.current[H];
+  ve(() => {
+    le(), document.fonts.ready.then(le);
+  }, [u, E, S]), re(() => {
+    const w = x.current;
+    if (!w) return;
+    const L = () => {
+      const M = w.clientWidth, X = 70;
+      let C = 0, Y = 0;
+      for (let Z = 0; Z < e.length; Z++) {
+        const J = b.current[Z];
         if (!J) {
-          O++;
+          Y++;
           continue;
         }
         const Q = J.offsetWidth;
-        if (H < e.length - 1) {
-          if ($ + Q + z > x) break;
-        } else if ($ + Q > x) break;
-        $ += Q, O++;
+        if (Z < e.length - 1) {
+          if (C + Q + X > M) break;
+        } else if (C + Q > M) break;
+        C += Q, Y++;
       }
-      if (O >= e.length - 1 && O < e.length) {
-        let H = 0;
+      if (Y >= e.length - 1 && Y < e.length) {
+        let Z = 0;
         for (let J = 0; J < e.length; J++) {
-          const Q = h.current[J];
-          Q && (H += Q.offsetWidth);
+          const Q = b.current[J];
+          Q && (Z += Q.offsetWidth);
         }
-        H <= x && (O = e.length);
+        Z <= M && (Y = e.length);
       }
-      R(O < 1 ? 1 : O);
+      A(Y < 1 ? 1 : Y);
     };
-    let S;
+    let l;
     (() => {
-      S = requestAnimationFrame(() => {
-        S = requestAnimationFrame(F);
+      l = requestAnimationFrame(() => {
+        l = requestAnimationFrame(L);
       });
     })();
-    const l = new ResizeObserver(F);
-    return l.observe(v), () => {
-      l.disconnect(), cancelAnimationFrame(S);
+    const y = new ResizeObserver(L);
+    return y.observe(w), () => {
+      y.disconnect(), cancelAnimationFrame(l);
     };
-  }, [e]), ne(() => {
-    if (!E) return;
-    const v = (F) => {
-      m.current && !m.current.contains(F.target) && b.current && !b.current.contains(F.target) && (X(!1), K(null));
+  }, [e]), re(() => {
+    if (!H) return;
+    const w = (L) => {
+      $.current && !$.current.contains(L.target) && D.current && !D.current.contains(L.target) && (N(!1), O(null));
     };
-    return document.addEventListener("mousedown", v), () => document.removeEventListener("mousedown", v);
-  }, [E]);
-  const ae = (v) => {
-    o || u(v), a == null || a(v);
-  }, Se = (v, F) => {
-    var x;
-    const S = B.map((z, $) => z.disabled ? -1 : $).filter((z) => z !== -1), W = S.indexOf(F);
-    let l = -1;
-    v.key === "ArrowRight" && (l = S[(W + 1) % S.length] ?? -1), v.key === "ArrowLeft" && (l = S[(W - 1 + S.length) % S.length] ?? -1), v.key === "Home" && (l = S[0] ?? -1), v.key === "End" && (l = S[S.length - 1] ?? -1), l !== -1 && (v.preventDefault(), (x = h.current[l]) == null || x.focus(), ae(B[l].value));
+    return document.addEventListener("mousedown", w), () => document.removeEventListener("mousedown", w);
+  }, [H]);
+  const K = (w) => {
+    c || d(w), a == null || a(w);
+  }, ze = (w, L) => {
+    var M;
+    const l = G.map((X, C) => X.disabled ? -1 : C).filter((X) => X !== -1), g = l.indexOf(L);
+    let y = -1;
+    w.key === "ArrowRight" && (y = l[(g + 1) % l.length] ?? -1), w.key === "ArrowLeft" && (y = l[(g - 1 + l.length) % l.length] ?? -1), w.key === "Home" && (y = l[0] ?? -1), w.key === "End" && (y = l[l.length - 1] ?? -1), y !== -1 && (w.preventDefault(), (M = b.current[y]) == null || M.focus(), K(G[y].value));
   };
-  return /* @__PURE__ */ T("div", { style: { display: "flex", flexDirection: "column", position: "relative", ...r }, children: [
+  return /* @__PURE__ */ T("div", { style: { display: "flex", flexDirection: "column", position: "relative", ...o }, children: [
     /* @__PURE__ */ T(
       "div",
       {
-        ref: L,
+        ref: x,
         role: "tablist",
         style: {
           position: "relative",
           display: "flex",
           overflow: "hidden",
-          ...k ? {
+          ...S ? {
             padding: "var(--lucent-space-1)"
           } : {
             borderBottom: "1px solid var(--lucent-border-default)"
           }
         },
         children: [
-          e.map((v, F) => {
-            const S = F < w, W = v.value === i, l = v.disabled ?? !1;
+          e.map((w, L) => {
+            const l = L < E, g = w.value === u, y = w.disabled ?? !1;
             return /* @__PURE__ */ T(
               "button",
               {
-                ref: (x) => {
-                  h.current[F] = x;
+                ref: (M) => {
+                  b.current[L] = M;
                 },
                 role: "tab",
-                "aria-selected": W,
-                "aria-controls": `lucent-tabpanel-${v.value}`,
-                id: `lucent-tab-${v.value}`,
-                disabled: l,
-                tabIndex: W && S ? 0 : -1,
+                "aria-selected": g,
+                "aria-controls": `lucent-tabpanel-${w.value}`,
+                id: `lucent-tab-${w.value}`,
+                disabled: y,
+                tabIndex: g && l ? 0 : -1,
                 onClick: () => {
-                  l || ae(v.value);
+                  y || K(w.value);
                 },
-                onKeyDown: (x) => Se(x, F),
+                onKeyDown: (M) => ze(M, L),
                 onMouseEnter: () => {
-                  !l && S && g(F);
+                  !y && l && h(L);
                 },
-                onMouseLeave: () => g(null),
+                onMouseLeave: () => h(null),
                 style: {
-                  padding: k ? "var(--lucent-space-1) var(--lucent-space-2)" : "var(--lucent-space-1) var(--lucent-space-2) var(--lucent-space-3)",
+                  padding: S ? p.buttonPadding : p.buttonPaddingUnderline,
                   background: "none",
                   border: "none",
-                  cursor: l ? "not-allowed" : "pointer",
+                  cursor: y ? "not-allowed" : "pointer",
                   fontFamily: "var(--lucent-font-family-base)",
-                  fontSize: "var(--lucent-font-size-md)",
-                  fontWeight: W ? "var(--lucent-font-weight-medium)" : "var(--lucent-font-weight-regular)",
-                  color: l ? "var(--lucent-text-disabled)" : k && W ? "var(--lucent-accent-fg)" : W ? "var(--lucent-text-primary)" : "var(--lucent-text-secondary)",
+                  fontSize: p.fontSize,
+                  fontWeight: g ? "var(--lucent-font-weight-medium)" : "var(--lucent-font-weight-regular)",
+                  color: y ? "var(--lucent-text-disabled)" : S && g ? "var(--lucent-accent-fg)" : g ? "var(--lucent-text-primary)" : "var(--lucent-text-secondary)",
                   transition: "color var(--lucent-duration-fast) var(--lucent-easing-default)",
                   whiteSpace: "nowrap",
                   outline: "none",
-                  position: S ? "relative" : "absolute",
-                  zIndex: W ? 1 : 0,
+                  position: l ? "relative" : "absolute",
+                  zIndex: g ? 1 : 0,
                   // Hidden overflow tabs are positioned off-screen for measurement
-                  ...S ? {} : { visibility: "hidden", pointerEvents: "none", left: -9999 }
+                  ...l ? {} : { visibility: "hidden", pointerEvents: "none", left: -9999 }
                 },
                 children: [
                   /* @__PURE__ */ f("span", { style: {
                     display: "block",
-                    padding: "var(--lucent-space-1) var(--lucent-space-3)",
+                    padding: p.innerPadding,
                     borderRadius: "var(--lucent-radius-md)",
-                    background: !k && d === F && !W && !l ? "var(--lucent-surface-secondary)" : "transparent",
+                    background: !S && m === L && !g && !y ? "var(--lucent-surface-secondary)" : "transparent",
                     transition: "background var(--lucent-duration-fast) var(--lucent-easing-default)"
-                  }, children: v.label }),
-                  k && d === F && !W && !l && S && /* @__PURE__ */ f(
+                  }, children: w.label }),
+                  S && m === L && !g && !y && l && /* @__PURE__ */ f(
                     "span",
                     {
                       "aria-hidden": !0,
@@ -1802,25 +1828,25 @@ function dn({ tabs: e, defaultValue: t, value: s, onChange: a, variant: n = "und
                   )
                 ]
               },
-              v.value
+              w.value
             );
           }),
-          _ && /* @__PURE__ */ f(
+          j && /* @__PURE__ */ f(
             "button",
             {
-              ref: b,
-              onClick: () => X((v) => !v),
-              onMouseEnter: () => D(!0),
-              onMouseLeave: () => D(!1),
+              ref: D,
+              onClick: () => N((w) => !w),
+              onMouseEnter: () => R(!0),
+              onMouseLeave: () => R(!1),
               style: {
-                padding: k ? "var(--lucent-space-1) var(--lucent-space-2)" : "var(--lucent-space-1) var(--lucent-space-2) var(--lucent-space-3)",
+                padding: S ? p.buttonPadding : p.buttonPaddingUnderline,
                 background: "none",
                 border: "none",
                 cursor: "pointer",
                 fontFamily: "var(--lucent-font-family-base)",
-                fontSize: "var(--lucent-font-size-md)",
-                fontWeight: N ? "var(--lucent-font-weight-medium)" : "var(--lucent-font-weight-regular)",
-                color: N ? "var(--lucent-text-primary)" : "var(--lucent-text-secondary)",
+                fontSize: p.fontSize,
+                fontWeight: ae ? "var(--lucent-font-weight-medium)" : "var(--lucent-font-weight-regular)",
+                color: ae ? "var(--lucent-text-primary)" : "var(--lucent-text-secondary)",
                 whiteSpace: "nowrap",
                 outline: "none",
                 position: "relative",
@@ -1828,45 +1854,45 @@ function dn({ tabs: e, defaultValue: t, value: s, onChange: a, variant: n = "und
               },
               children: /* @__PURE__ */ f("span", { style: {
                 display: "block",
-                padding: "var(--lucent-space-1) var(--lucent-space-3)",
+                padding: p.innerPadding,
                 borderRadius: "var(--lucent-radius-md)",
-                background: A ? "var(--lucent-surface-secondary)" : "transparent",
+                background: k ? "var(--lucent-surface-secondary)" : "transparent",
                 transition: "background var(--lucent-duration-fast) var(--lucent-easing-default)"
               }, children: "More…" })
             }
           ),
-          p != null && /* @__PURE__ */ f(
+          v != null && /* @__PURE__ */ f(
             "span",
             {
               "aria-hidden": !0,
-              style: k ? {
+              style: S ? {
                 position: "absolute",
                 top: "var(--lucent-space-1)",
                 bottom: "var(--lucent-space-1)",
-                left: p.left,
-                width: p.width,
+                left: v.left,
+                width: v.width,
                 background: "var(--lucent-accent-default)",
                 borderRadius: "var(--lucent-radius-md)",
-                transition: p.animate ? "left 220ms var(--lucent-easing-default), width 220ms var(--lucent-easing-default)" : "none"
+                transition: v.animate ? "left 220ms var(--lucent-easing-default), width 220ms var(--lucent-easing-default)" : "none"
               } : {
                 position: "absolute",
                 bottom: 0,
-                left: p.left,
-                width: p.width,
+                left: v.left,
+                width: v.width,
                 height: 2,
                 background: "var(--lucent-accent-default)",
                 borderRadius: "var(--lucent-radius-sm)",
-                transition: p.animate ? "left 220ms var(--lucent-easing-default), width 220ms var(--lucent-easing-default)" : "none"
+                transition: v.animate ? "left 220ms var(--lucent-easing-default), width 220ms var(--lucent-easing-default)" : "none"
               }
             }
           )
         ]
       }
     ),
-    _ && E && /* @__PURE__ */ f(
+    j && H && /* @__PURE__ */ f(
       "div",
       {
-        ref: m,
+        ref: $,
         style: {
           position: "absolute",
           top: "100%",
@@ -1880,57 +1906,57 @@ function dn({ tabs: e, defaultValue: t, value: s, onChange: a, variant: n = "und
           padding: "var(--lucent-space-1) 0",
           minWidth: 140
         },
-        children: j.map((v, F) => {
-          const S = v.value === i, W = v.disabled ?? !1, l = C === F;
+        children: W.map((w, L) => {
+          const l = w.value === u, g = w.disabled ?? !1, y = P === L;
           return /* @__PURE__ */ f(
             "button",
             {
-              disabled: W,
+              disabled: g,
               onClick: () => {
-                W || (ae(v.value), X(!1));
+                g || (K(w.value), N(!1));
               },
               onMouseEnter: () => {
-                W || K(F);
+                g || O(L);
               },
-              onMouseLeave: () => K(null),
+              onMouseLeave: () => O(null),
               style: {
                 display: "block",
                 width: "100%",
-                padding: "var(--lucent-space-2) var(--lucent-space-4)",
-                background: S || l ? "var(--lucent-surface-secondary)" : "none",
+                padding: p.dropdownPadding,
+                background: l || y ? "var(--lucent-surface-secondary)" : "none",
                 border: "none",
-                cursor: W ? "not-allowed" : "pointer",
+                cursor: g ? "not-allowed" : "pointer",
                 fontFamily: "var(--lucent-font-family-base)",
-                fontSize: "var(--lucent-font-size-md)",
-                fontWeight: S ? "var(--lucent-font-weight-medium)" : "var(--lucent-font-weight-regular)",
-                color: W ? "var(--lucent-text-disabled)" : S || l ? "var(--lucent-text-primary)" : "var(--lucent-text-secondary)",
+                fontSize: p.fontSize,
+                fontWeight: l ? "var(--lucent-font-weight-medium)" : "var(--lucent-font-weight-regular)",
+                color: g ? "var(--lucent-text-disabled)" : l || y ? "var(--lucent-text-primary)" : "var(--lucent-text-secondary)",
                 textAlign: "left",
                 outline: "none",
                 transition: "background var(--lucent-duration-fast) var(--lucent-easing-default), color var(--lucent-duration-fast) var(--lucent-easing-default)"
               },
-              children: v.label
+              children: w.label
             },
-            v.value
+            w.value
           );
         })
       }
     ),
-    e.some((v) => v.content != null) && e.map((v) => /* @__PURE__ */ f(
+    e.some((w) => w.content != null) && e.map((w) => /* @__PURE__ */ f(
       "div",
       {
         role: "tabpanel",
-        id: `lucent-tabpanel-${v.value}`,
-        "aria-labelledby": `lucent-tab-${v.value}`,
-        hidden: v.value !== i,
-        style: { padding: "var(--lucent-space-4) 0", outline: "none" },
+        id: `lucent-tabpanel-${w.value}`,
+        "aria-labelledby": `lucent-tab-${w.value}`,
+        hidden: w.value !== u,
+        style: { padding: p.panelPadding, outline: "none" },
         tabIndex: 0,
-        children: v.content
+        children: w.content
       },
-      v.value
+      w.value
     ))
   ] });
 }
-const oa = {
+const ua = {
   fontFamilyBase: '"DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif',
   fontFamilyMono: '"DM Mono", "Fira Code", "Cascadia Code", monospace',
   fontFamilyDisplay: '"Georama", "DM Sans", sans-serif',
@@ -1951,7 +1977,7 @@ const oa = {
   letterSpacingTight: "-0.02em",
   letterSpacingBase: "0em",
   letterSpacingWide: "0.04em"
-}, la = {
+}, da = {
   space0: "0px",
   space1: "0.25rem",
   space2: "0.5rem",
@@ -1965,38 +1991,38 @@ const oa = {
   space16: "4rem",
   space20: "5rem",
   space24: "6rem"
-}, ca = {
+}, fa = {
   radiusNone: "0px",
   radiusSm: "0.25rem",
   radiusMd: "0.375rem",
   radiusLg: "0.5rem",
   radiusXl: "0.75rem",
   radiusFull: "9999px"
-}, ia = {
+}, pa = {
   durationFast: "100ms",
   durationBase: "200ms",
   durationSlow: "350ms",
   easingDefault: "cubic-bezier(0.4, 0, 0.2, 1)",
   easingEmphasized: "cubic-bezier(0.2, 0, 0, 1)",
   easingDecelerate: "cubic-bezier(0, 0, 0.2, 1)"
-}, ua = {
+}, ga = {
   shadowNone: "none",
   shadowSm: "0 1px 2px rgb(0 0 0 / 0.12)",
   shadowMd: "0 2px 4px rgb(0 0 0 / 0.18)",
   shadowLg: "0 3px 8px rgb(0 0 0 / 0.18)",
   shadowXl: "0 5px 14px rgb(0 0 0 / 0.2)"
-}, da = {
+}, ba = {
   shadowNone: "none",
   shadowSm: "inset 0 1px 0 0 rgba(255, 255, 255, 0.04), 0 1px 2px rgba(0, 0, 0, 0.4)",
   shadowMd: "inset 0 1px 0 0 rgba(255, 255, 255, 0.06), 0 1px 4px rgba(0, 0, 0, 0.45)",
   shadowLg: "inset 0 1px 0 0 rgba(255, 255, 255, 0.08), 0 2px 8px rgba(0, 0, 0, 0.45)",
   shadowXl: "inset 0 1px 0 0 rgba(255, 255, 255, 0.1), 0 4px 14px rgba(0, 0, 0, 0.5)"
-}, he = {
-  ...oa,
-  ...la,
-  ...ca,
-  ...ia,
+}, ye = {
   ...ua,
+  ...da,
+  ...fa,
+  ...pa,
+  ...ga,
   // Navigation — chrome/shell (sidebar, header, footer)
   navigation: "#f4f6f8",
   // Backgrounds — main content area
@@ -2040,72 +2066,72 @@ const oa = {
   infoSubtle: "#eff6ff",
   infoText: "#1d4ed8"
 };
-function fa(e) {
+function ma(e) {
   const t = parseInt(e.slice(1, 3), 16), s = parseInt(e.slice(3, 5), 16), a = parseInt(e.slice(5, 7), 16);
   return { r: t, g: s, b: a };
 }
-function pa({ r: e, g: t, b: s }) {
+function xa({ r: e, g: t, b: s }) {
   const a = (n) => n.toString(16).padStart(2, "0");
   return `#${a(e)}${a(t)}${a(s)}`;
 }
-function Y(e) {
-  const { r: t, g: s, b: a } = fa(e), n = t / 255, r = s / 255, o = a / 255, c = Math.max(n, r, o), u = Math.min(n, r, o);
-  let i = 0, d = 0;
-  const g = (c + u) / 2;
-  if (c !== u) {
-    const h = c - u;
-    switch (d = g > 0.5 ? h / (2 - c - u) : h / (c + u), c) {
+function _(e) {
+  const { r: t, g: s, b: a } = ma(e), n = t / 255, r = s / 255, o = a / 255, c = Math.max(n, r, o), i = Math.min(n, r, o);
+  let d = 0, u = 0;
+  const m = (c + i) / 2;
+  if (c !== i) {
+    const h = c - i;
+    switch (u = m > 0.5 ? h / (2 - c - i) : h / (c + i), c) {
       case n:
-        i = (r - o) / h + (r < o ? 6 : 0);
+        d = (r - o) / h + (r < o ? 6 : 0);
         break;
       case r:
-        i = (o - n) / h + 2;
+        d = (o - n) / h + 2;
         break;
       case o:
-        i = (n - r) / h + 4;
+        d = (n - r) / h + 4;
         break;
     }
-    i /= 6;
+    d /= 6;
   }
-  return [i * 360, d, g];
+  return [d * 360, u, m];
 }
 function V(e, t, s) {
   e = (e % 360 + 360) % 360, t = Math.min(1, Math.max(0, t)), s = Math.min(1, Math.max(0, s));
   const a = (1 - Math.abs(2 * s - 1)) * t, n = a * (1 - Math.abs(e / 60 % 2 - 1)), r = s - a / 2;
-  let o = 0, c = 0, u = 0;
-  return e < 60 ? (o = a, c = n) : e < 120 ? (o = n, c = a) : e < 180 ? (c = a, u = n) : e < 240 ? (c = n, u = a) : e < 300 ? (o = n, u = a) : (o = a, u = n), pa({ r: Math.round((o + r) * 255), g: Math.round((c + r) * 255), b: Math.round((u + r) * 255) });
+  let o = 0, c = 0, i = 0;
+  return e < 60 ? (o = a, c = n) : e < 120 ? (o = n, c = a) : e < 180 ? (c = a, i = n) : e < 240 ? (c = n, i = a) : e < 300 ? (o = n, i = a) : (o = a, i = n), xa({ r: Math.round((o + r) * 255), g: Math.round((c + r) * 255), b: Math.round((i + r) * 255) });
 }
-function M(e, t) {
-  const [s, a, n] = Y(e);
+function z(e, t) {
+  const [s, a, n] = _(e);
   return V(s, a, Math.min(1, Math.max(0, n + t)));
 }
-const ga = 222, ba = 0.12;
-function tt(e, t) {
-  return t < 0.04 ? [ga, ba] : [e, t];
+const ha = 222, va = 0.12;
+function nt(e, t) {
+  return t < 0.04 ? [ha, va] : [e, t];
 }
-function je(e) {
-  const [t, s, a] = Y(e), [n, r] = tt(t, s);
+function qe(e) {
+  const [t, s, a] = _(e), [n, r] = nt(t, s);
   return V(n, r, Math.max(0.04, Math.min(0.2, 0.07 + (1 - a))));
 }
-function Te(e) {
-  const [t, s, a] = Y(e), [n, r] = tt(t, s);
+function Be(e) {
+  const [t, s, a] = _(e), [n, r] = nt(t, s);
   return V(n, r, Math.max(0.06, Math.min(0.5, (1 - a) * 0.6 + 0.06)));
 }
-function Ie(e) {
-  const [t, s, a] = Y(e);
+function $e(e) {
+  const [t, s, a] = _(e);
   return V(t, s, Math.max(0.04, Math.min(0.97, 1 - a + 0.04)));
 }
-function Be(e) {
-  const [t, s, a] = Y(e);
+function Pe(e) {
+  const [t, s, a] = _(e);
   return V(t, s, Math.max(0.02, Math.min(0.98, 1 - a)));
 }
-function xa(e) {
-  const t = je(e.navigation), s = je(e.bgBase), [a, n, r] = Y(s), o = (c) => V(a, n, Math.min(0.25, r + c));
+function ya(e) {
+  const t = qe(e.navigation), s = qe(e.bgBase), [a, n, r] = _(s), o = (c) => V(a, n, Math.min(0.25, r + c));
   return {
     // ── Non-color tokens: carry over from light unchanged ──────────────────
     ...e,
     // ── Shadows: dark variants have higher opacity for visibility ───────────
-    ...da,
+    ...ba,
     // ── Navigation ──────────────────────────────────────────────────────────
     navigation: t,
     // ── Backgrounds ─────────────────────────────────────────────────────────
@@ -2119,148 +2145,151 @@ function xa(e) {
     surfaceOverlay: o(0.08),
     surfaceTint: o(0.03),
     // ── Borders ──────────────────────────────────────────────────────────────
-    borderDefault: Te(e.borderDefault),
-    borderSubtle: Te(e.borderSubtle),
-    borderStrong: Te(e.borderStrong),
+    borderDefault: Be(e.borderDefault),
+    borderSubtle: Be(e.borderSubtle),
+    borderStrong: Be(e.borderStrong),
     controlTrack: o(0.1),
     // ── Text ─────────────────────────────────────────────────────────────────
-    textPrimary: Ie(e.textPrimary),
-    textSecondary: Ie(e.textSecondary),
-    textDisabled: Ie(e.textDisabled),
+    textPrimary: $e(e.textPrimary),
+    textSecondary: $e(e.textSecondary),
+    textDisabled: $e(e.textDisabled),
     // textInverse flips to dark bg so it reads on light accent surfaces
     textInverse: s,
     // ── Accent ───────────────────────────────────────────────────────────────
-    accentDefault: Be(e.accentDefault),
-    accentHover: Be(e.accentHover),
-    accentSubtle: Be(e.accentSubtle),
+    accentDefault: Pe(e.accentDefault),
+    accentHover: Pe(e.accentHover),
+    accentSubtle: Pe(e.accentSubtle),
     accentBorder: e.accentBorder,
     // auto-recomputed by LucentProvider
     accentFg: e.accentFg,
     // auto-recomputed by LucentProvider
     // ── Status: lighten defaults for visibility; darken for subtle bg ─────────
-    successDefault: M(e.successDefault, 0.1),
-    successSubtle: M(e.successDefault, -0.25),
-    successText: M(e.successText, 0.15),
-    warningDefault: M(e.warningDefault, 0.1),
-    warningSubtle: M(e.warningDefault, -0.25),
-    warningText: M(e.warningText, 0.15),
-    dangerDefault: M(e.dangerDefault, 0.1),
-    dangerHover: M(e.dangerHover, 0.1),
-    dangerSubtle: M(e.dangerDefault, -0.25),
-    dangerText: M(e.dangerText, 0.15),
-    infoDefault: M(e.infoDefault, 0.1),
-    infoSubtle: M(e.infoDefault, -0.25),
-    infoText: M(e.infoText, 0.15)
+    successDefault: z(e.successDefault, 0.1),
+    successSubtle: z(e.successDefault, -0.25),
+    successText: z(e.successText, 0.15),
+    warningDefault: z(e.warningDefault, 0.1),
+    warningSubtle: z(e.warningDefault, -0.25),
+    warningText: z(e.warningText, 0.15),
+    dangerDefault: z(e.dangerDefault, 0.1),
+    dangerHover: z(e.dangerHover, 0.1),
+    dangerSubtle: z(e.dangerDefault, -0.25),
+    dangerText: z(e.dangerText, 0.15),
+    infoDefault: z(e.infoDefault, 0.1),
+    infoSubtle: z(e.infoDefault, -0.25),
+    infoText: z(e.infoText, 0.15)
   };
 }
-const at = xa(he);
-function ma(e) {
+const rt = ya(ye);
+function wa(e) {
   return "--lucent-" + e.replace(/([A-Z])/g, (t) => `-${t.toLowerCase()}`).replace(/([a-z])(\d)/g, (t, s, a) => `${s}-${a}`);
 }
-function ha(e, t = ":root") {
-  const s = Object.entries(e).map(([a, n]) => `  ${ma(a)}: ${n};`).join(`
+function Da(e) {
+  return e.replace(/[{}<>;@\\]/g, "");
+}
+function Sa(e, t = ":root") {
+  const s = Object.entries(e).map(([a, n]) => `  ${wa(a)}: ${Da(n)};`).join(`
 `);
   return `${t} {
 ${s}
 }`;
 }
-function va(e) {
+function ka(e) {
   const t = parseInt(e.slice(1, 3), 16) / 255, s = parseInt(e.slice(3, 5), 16) / 255, a = parseInt(e.slice(5, 7), 16) / 255, n = (r) => r <= 0.03928 ? r / 12.92 : Math.pow((r + 0.055) / 1.055, 2.4);
   return 0.2126 * n(t) + 0.7152 * n(s) + 0.0722 * n(a);
 }
-const ya = 0.2126729, wa = 0.7151522, Da = 0.072175, ka = 0.56, Sa = 0.57, Ma = 0.65, za = 0.62, Ue = 0.022, Ta = 1.414, Ia = 1.14, Ba = 1.14, qe = 0.027, Ge = 0.027;
-function _e(e) {
+const Ma = 0.2126729, za = 0.7151522, Ta = 0.072175, Ia = 0.56, Ba = 0.57, $a = 0.65, Pa = 0.62, Ge = 0.022, La = 1.414, Ra = 1.14, Fa = 1.14, Ve = 0.027, _e = 0.027;
+function Ke(e) {
   const t = parseInt(e.slice(1, 3), 16) / 255, s = parseInt(e.slice(3, 5), 16) / 255, a = parseInt(e.slice(5, 7), 16) / 255, n = Math.pow(t, 2.4), r = Math.pow(s, 2.4), o = Math.pow(a, 2.4);
-  let c = ya * n + wa * r + Da * o;
-  return c < 0 && (c = 0), c < Ue ? c + Math.pow(Ue - c, Ta) : c;
+  let c = Ma * n + za * r + Ta * o;
+  return c < 0 && (c = 0), c < Ge ? c + Math.pow(Ge - c, La) : c;
 }
-function ge(e, t) {
-  const s = _e(e), a = _e(t);
+function me(e, t) {
+  const s = Ke(e), a = Ke(t);
   let n;
   if (s > a) {
-    const r = (Math.pow(s, ka) - Math.pow(a, Sa)) * Ia;
-    n = r < qe ? 0 : r - qe;
+    const r = (Math.pow(s, Ia) - Math.pow(a, Ba)) * Ra;
+    n = r < Ve ? 0 : r - Ve;
   } else {
-    const r = (Math.pow(s, Ma) - Math.pow(a, za)) * Ba;
-    n = r > -Ge ? 0 : r + Ge;
+    const r = (Math.pow(s, $a) - Math.pow(a, Pa)) * Fa;
+    n = r > -_e ? 0 : r + _e;
   }
   return n * 100;
 }
-function $a(e) {
-  const t = Math.abs(ge(e, "#ffffff")), s = Math.abs(ge(e, "#000000"));
+function Ca(e) {
+  const t = Math.abs(me(e, "#ffffff")), s = Math.abs(me(e, "#000000"));
   return t >= s ? "#ffffff" : "#000000";
 }
-function nt(e) {
+function st(e) {
   const t = parseInt(e.slice(1, 3), 16) / 255, s = parseInt(e.slice(3, 5), 16) / 255, a = parseInt(e.slice(5, 7), 16) / 255, n = Math.max(t, s, a), r = Math.min(t, s, a);
   let o = 0, c = 0;
   if (n !== r) {
-    const i = n - r;
-    c = (n + r) / 2 > 0.5 ? i / (2 - n - r) : i / (n + r), n === t ? o = ((s - a) / i + (s < a ? 6 : 0)) / 6 : n === s ? o = ((a - t) / i + 2) / 6 : o = ((t - s) / i + 4) / 6;
+    const d = n - r;
+    c = (n + r) / 2 > 0.5 ? d / (2 - n - r) : d / (n + r), n === t ? o = ((s - a) / d + (s < a ? 6 : 0)) / 6 : n === s ? o = ((a - t) / d + 2) / 6 : o = ((t - s) / d + 4) / 6;
   }
-  return $a(e) === "#000000" ? Le(o, Math.min(c, 0.6), 0.12) : Le(o, Math.min(c, 0.2), 0.95);
+  return Ca(e) === "#000000" ? Re(o, Math.min(c, 0.6), 0.12) : Re(o, Math.min(c, 0.2), 0.95);
 }
-function La(e, t, s = 60) {
-  if (Math.abs(ge(e, t)) >= s) return e;
+function Wa(e, t, s = 60) {
+  if (Math.abs(me(e, t)) >= s) return e;
   const a = parseInt(e.slice(1, 3), 16) / 255, n = parseInt(e.slice(3, 5), 16) / 255, r = parseInt(e.slice(5, 7), 16) / 255, o = Math.max(a, n, r), c = Math.min(a, n, r);
-  let u = 0, i = 0, d = (o + c) / 2;
+  let i = 0, d = 0, u = (o + c) / 2;
   if (o !== c) {
-    const p = o - c;
-    i = d > 0.5 ? p / (2 - o - c) : p / (o + c), o === a ? u = ((n - r) / p + (n < r ? 6 : 0)) / 6 : o === n ? u = ((r - a) / p + 2) / 6 : u = ((a - n) / p + 4) / 6;
+    const b = o - c;
+    d = u > 0.5 ? b / (2 - o - c) : b / (o + c), o === a ? i = ((n - r) / b + (n < r ? 6 : 0)) / 6 : o === n ? i = ((r - a) / b + 2) / 6 : i = ((a - n) / b + 4) / 6;
   }
-  const h = va(t) > 0.5 ? -5e-3 : 5e-3;
-  for (let p = 0; p < 100; p++) {
-    d = Math.min(1, Math.max(0, d + h));
-    const y = Le(u, i, d);
-    if (Math.abs(ge(y, t)) >= s) return y;
+  const h = ka(t) > 0.5 ? -5e-3 : 5e-3;
+  for (let b = 0; b < 100; b++) {
+    u = Math.min(1, Math.max(0, u + h));
+    const v = Re(i, d, u);
+    if (Math.abs(me(v, t)) >= s) return v;
   }
   return e;
 }
-function Le(e, t, s) {
-  const a = (u, i, d) => (d < 0 && (d += 1), d > 1 && (d -= 1), d < 0.16666666666666666 ? u + (i - u) * 6 * d : d < 0.5 ? i : d < 0.6666666666666666 ? u + (i - u) * (0.6666666666666666 - d) * 6 : u);
+function Re(e, t, s) {
+  const a = (i, d, u) => (u < 0 && (u += 1), u > 1 && (u -= 1), u < 0.16666666666666666 ? i + (d - i) * 6 * u : u < 0.5 ? d : u < 0.6666666666666666 ? i + (d - i) * (0.6666666666666666 - u) * 6 : i);
   let n, r, o;
   if (t === 0)
     n = r = o = s;
   else {
-    const u = s < 0.5 ? s * (1 + t) : s + t - s * t, i = 2 * s - u;
-    n = a(i, u, e + 1 / 3), r = a(i, u, e), o = a(i, u, e - 1 / 3);
+    const i = s < 0.5 ? s * (1 + t) : s + t - s * t, d = 2 * s - i;
+    n = a(d, i, e + 1 / 3), r = a(d, i, e), o = a(d, i, e - 1 / 3);
   }
-  const c = (u) => Math.round(u * 255).toString(16).padStart(2, "0");
+  const c = (i) => Math.round(i * 255).toString(16).padStart(2, "0");
   return `#${c(n)}${c(r)}${c(o)}`;
 }
-function Ra(e, t) {
-  const [s, a, n] = Y(e);
+function Ha(e, t) {
+  const [s, a, n] = _(e);
   return t ? V(s, a * 0.3, Math.min(1, n + (1 - n) * 0.85)) : V(s, a, Math.min(0.25, n + 0.04));
 }
-const be = {
+const xe = {
   subtle: { light: 0.95, dark: 0.12 },
   text: { light: 0.28, dark: 0.78 }
 };
-function ce(e, t) {
-  const [s, a] = Y(e);
-  return V(s, a * 0.5, t ? be.subtle.light : be.subtle.dark);
+function ue(e, t) {
+  const [s, a] = _(e);
+  return V(s, a * 0.5, t ? xe.subtle.light : xe.subtle.dark);
 }
-function ie(e, t) {
-  const [s, a] = Y(e);
-  return V(s, a, t ? be.text.light : be.text.dark);
+function de(e, t) {
+  const [s, a] = _(e);
+  return V(s, a, t ? xe.text.light : xe.text.dark);
 }
-function rt(e, t, s) {
+function ot(e, t, s) {
   const a = {}, n = s === "light";
-  if ("borderDefault" in e && ("borderSubtle" in e || (a.borderSubtle = M(t.borderDefault, n ? 0.05 : -0.02)), "borderStrong" in e || (a.borderStrong = M(t.borderDefault, n ? -0.27 : 0.19))), "bgBase" in e && ("bgSubtle" in e || (a.bgSubtle = M(t.bgBase, n ? -0.02 : 0.02)), "surfaceTint" in e || (a.surfaceTint = M(t.bgBase, n ? -0.04 : 0.03)), !("surface" in e))) {
-    const r = Ra(t.bgBase, n);
-    a.surface = r, "surfaceSecondary" in e || (a.surfaceSecondary = M(r, n ? -0.04 : 0.03)), "surfaceRaised" in e || (a.surfaceRaised = M(r, n ? 0 : 0.06)), "surfaceOverlay" in e || (a.surfaceOverlay = M(r, n ? 0 : 0.06));
+  if ("borderDefault" in e && ("borderSubtle" in e || (a.borderSubtle = z(t.borderDefault, n ? 0.05 : -0.02)), "borderStrong" in e || (a.borderStrong = z(t.borderDefault, n ? -0.27 : 0.19))), "bgBase" in e && ("bgSubtle" in e || (a.bgSubtle = z(t.bgBase, n ? -0.02 : 0.02)), "surfaceTint" in e || (a.surfaceTint = z(t.bgBase, n ? -0.04 : 0.03)), !("surface" in e))) {
+    const r = Ha(t.bgBase, n);
+    a.surface = r, "surfaceSecondary" in e || (a.surfaceSecondary = z(r, n ? -0.04 : 0.03)), "surfaceRaised" in e || (a.surfaceRaised = z(r, n ? 0 : 0.06)), "surfaceOverlay" in e || (a.surfaceOverlay = z(r, n ? 0 : 0.06));
   }
-  return "surface" in e && ("surfaceSecondary" in e || (a.surfaceSecondary = M(t.surface, n ? -0.04 : 0.03)), "surfaceRaised" in e || (a.surfaceRaised = M(t.surface, n ? 0 : 0.06)), "surfaceOverlay" in e || (a.surfaceOverlay = M(t.surface, n ? 0 : 0.06))), "textPrimary" in e && ("textSecondary" in e || (a.textSecondary = M(t.textPrimary, n ? 0.2 : -0.15)), "textDisabled" in e || (a.textDisabled = M(t.textPrimary, n ? 0.58 : -0.62))), "accentDefault" in e && ("accentHover" in e || (a.accentHover = M(t.accentDefault, n ? 0.05 : -0.07)), "accentSubtle" in e || (a.accentSubtle = M(t.accentDefault, n ? 0.85 : -0.6))), "successDefault" in e && ("successSubtle" in e || (a.successSubtle = ce(t.successDefault, n)), "successText" in e || (a.successText = ie(t.successDefault, n))), "warningDefault" in e && ("warningSubtle" in e || (a.warningSubtle = ce(t.warningDefault, n)), "warningText" in e || (a.warningText = ie(t.warningDefault, n))), "dangerDefault" in e && ("dangerHover" in e || (a.dangerHover = M(t.dangerDefault, n ? 0.05 : -0.07)), "dangerSubtle" in e || (a.dangerSubtle = ce(t.dangerDefault, n)), "dangerText" in e || (a.dangerText = ie(t.dangerDefault, n))), "infoDefault" in e && ("infoSubtle" in e || (a.infoSubtle = ce(t.infoDefault, n)), "infoText" in e || (a.infoText = ie(t.infoDefault, n))), a;
+  return "surface" in e && ("surfaceSecondary" in e || (a.surfaceSecondary = z(t.surface, n ? -0.04 : 0.03)), "surfaceRaised" in e || (a.surfaceRaised = z(t.surface, n ? 0 : 0.06)), "surfaceOverlay" in e || (a.surfaceOverlay = z(t.surface, n ? 0 : 0.06))), "textPrimary" in e && ("textSecondary" in e || (a.textSecondary = z(t.textPrimary, n ? 0.2 : -0.15)), "textDisabled" in e || (a.textDisabled = z(t.textPrimary, n ? 0.58 : -0.62))), "accentDefault" in e && ("accentHover" in e || (a.accentHover = z(t.accentDefault, n ? 0.05 : -0.07)), "accentSubtle" in e || (a.accentSubtle = z(t.accentDefault, n ? 0.85 : -0.6))), "successDefault" in e && ("successSubtle" in e || (a.successSubtle = ue(t.successDefault, n)), "successText" in e || (a.successText = de(t.successDefault, n))), "warningDefault" in e && ("warningSubtle" in e || (a.warningSubtle = ue(t.warningDefault, n)), "warningText" in e || (a.warningText = de(t.warningDefault, n))), "dangerDefault" in e && ("dangerHover" in e || (a.dangerHover = z(t.dangerDefault, n ? 0.05 : -0.07)), "dangerSubtle" in e || (a.dangerSubtle = ue(t.dangerDefault, n)), "dangerText" in e || (a.dangerText = de(t.dangerDefault, n))), "infoDefault" in e && ("infoSubtle" in e || (a.infoSubtle = ue(t.infoDefault, n)), "infoText" in e || (a.infoText = de(t.infoDefault, n))), a;
 }
-function st(e, t = "light") {
-  const a = { ...t === "dark" ? at : he, ...e }, n = rt(e, a, t), r = t === "light" ? M(a.accentDefault, -0.15) : M(a.accentDefault, 0.15);
+function lt(e, t = "light") {
+  const a = { ...t === "dark" ? rt : ye, ...e }, n = ot(e, a, t), r = t === "light" ? z(a.accentDefault, -0.15) : z(a.accentDefault, 0.15);
   return {
     ...a,
     ...n,
-    accentFg: nt(a.accentDefault),
+    accentFg: st(a.accentDefault),
     accentBorder: r
   };
 }
-const ot = {
+const ct = {
   name: "default",
   light: {
     navigation: "#f4f6f8",
@@ -2284,7 +2313,7 @@ const ot = {
     dangerDefault: "#ef4444",
     infoDefault: "#3b82f6"
   }
-}, Fa = {
+}, Na = {
   name: "brand",
   light: {
     navigation: "#fffefb",
@@ -2308,7 +2337,7 @@ const ot = {
     dangerDefault: "#ef4444",
     infoDefault: "#3b82f6"
   }
-}, ve = {
+}, we = {
   name: "indigo",
   light: {
     navigation: "#ffffff",
@@ -2332,7 +2361,7 @@ const ot = {
     dangerDefault: "#ef4444",
     infoDefault: "#3b82f6"
   }
-}, lt = {
+}, it = {
   name: "violet",
   light: {
     navigation: "#f8f4ff",
@@ -2356,7 +2385,7 @@ const ot = {
     dangerDefault: "#ef4444",
     infoDefault: "#3b82f6"
   }
-}, ct = {
+}, ut = {
   name: "emerald",
   light: {
     navigation: "#f4fcf9",
@@ -2380,7 +2409,7 @@ const ot = {
     dangerDefault: "#ef4444",
     infoDefault: "#3b82f6"
   }
-}, Ca = {
+}, Ea = {
   name: "teal",
   light: {
     navigation: "#f9fbfc",
@@ -2404,7 +2433,7 @@ const ot = {
     dangerDefault: "#ef4444",
     infoDefault: "#3b82f6"
   }
-}, it = {
+}, dt = {
   name: "rose",
   light: {
     navigation: "#fff4f6",
@@ -2428,7 +2457,7 @@ const ot = {
     dangerDefault: "#ef4444",
     infoDefault: "#3b82f6"
   }
-}, ut = {
+}, ft = {
   name: "coral",
   light: {
     navigation: "#fff9f7",
@@ -2452,7 +2481,7 @@ const ot = {
     dangerDefault: "#ef4444",
     infoDefault: "#3b82f6"
   }
-}, Pa = {
+}, Aa = {
   name: "amber",
   light: {
     navigation: "#fffdf6",
@@ -2476,7 +2505,7 @@ const ot = {
     dangerDefault: "#ef4444",
     infoDefault: "#3b82f6"
   }
-}, dt = {
+}, pt = {
   name: "ocean",
   light: {
     navigation: "#ebf1ff",
@@ -2500,7 +2529,7 @@ const ot = {
     dangerDefault: "#ef4444",
     infoDefault: "#3b82f6"
   }
-}, ft = {
+}, gt = {
   name: "slate",
   light: {
     navigation: "#f7f8fa",
@@ -2524,7 +2553,7 @@ const ot = {
     dangerDefault: "#ef4444",
     infoDefault: "#3b82f6"
   }
-}, Wa = {
+}, Oa = {
   name: "sage",
   light: {
     navigation: "#f4f8f4",
@@ -2548,7 +2577,7 @@ const ot = {
     dangerDefault: "#ef4444",
     infoDefault: "#3b82f6"
   }
-}, ye = {
+}, De = {
   name: "sharp",
   tokens: {
     radiusNone: "0px",
@@ -2558,7 +2587,7 @@ const ot = {
     radiusXl: "0.375rem",
     radiusFull: "9999px"
   }
-}, re = {
+}, se = {
   name: "rounded",
   tokens: {
     radiusNone: "0px",
@@ -2568,7 +2597,7 @@ const ot = {
     radiusXl: "0.75rem",
     radiusFull: "9999px"
   }
-}, we = {
+}, Se = {
   name: "pill",
   tokens: {
     radiusNone: "0px",
@@ -2578,7 +2607,7 @@ const ot = {
     radiusXl: "1.5rem",
     radiusFull: "9999px"
   }
-}, De = {
+}, ke = {
   name: "compact",
   tokens: {
     space0: "0px",
@@ -2595,7 +2624,7 @@ const ot = {
     space20: "4rem",
     space24: "4.8rem"
   }
-}, se = {
+}, oe = {
   name: "default",
   tokens: {
     space0: "0px",
@@ -2612,7 +2641,7 @@ const ot = {
     space20: "5rem",
     space24: "6rem"
   }
-}, ke = {
+}, Me = {
   name: "spacious",
   tokens: {
     space0: "0px",
@@ -2629,7 +2658,7 @@ const ot = {
     space20: "6.25rem",
     space24: "7.5rem"
   }
-}, Fe = {
+}, Ce = {
   name: "flat",
   light: {
     shadowNone: "none",
@@ -2645,7 +2674,7 @@ const ot = {
     shadowLg: "none",
     shadowXl: "none"
   }
-}, pt = {
+}, bt = {
   name: "subtle",
   light: {
     shadowNone: "none",
@@ -2661,7 +2690,7 @@ const ot = {
     shadowLg: "0 0 40px color-mix(in srgb, var(--lucent-accent-default) 9%, transparent), inset 0 1px 0 0 rgba(255, 255, 255, 0.05)",
     shadowXl: "0 0 56px color-mix(in srgb, var(--lucent-accent-default) 12%, transparent), inset 0 1px 0 0 rgba(255, 255, 255, 0.06)"
   }
-}, gt = {
+}, mt = {
   name: "elevated",
   light: {
     shadowNone: "none",
@@ -2677,7 +2706,7 @@ const ot = {
     shadowLg: "inset 0 1px 0 0 rgba(255, 255, 255, 0.1), inset 0 0 28px rgba(255, 255, 255, 0.04), 0 0 1px rgba(255, 255, 255, 0.08)",
     shadowXl: "inset 0 1px 0 0 rgba(255, 255, 255, 0.12), inset 0 0 36px rgba(255, 255, 255, 0.05), 0 0 1px rgba(255, 255, 255, 0.1)"
   }
-}, bt = {
+}, xt = {
   name: "liquidGlass",
   light: {
     shadowNone: "none",
@@ -2693,7 +2722,7 @@ const ot = {
     shadowLg: "inset 0 1px 0 0 rgba(255, 255, 255, 0.1), inset 0 0 30px rgba(255, 255, 255, 0.03), 0 0 50px rgba(255, 255, 255, 0.04)",
     shadowXl: "inset 0 1px 0 0 rgba(255, 255, 255, 0.12), inset 0 0 40px rgba(255, 255, 255, 0.04), 0 0 70px rgba(255, 255, 255, 0.05)"
   }
-}, xt = {
+}, ht = {
   name: "brutalist",
   light: {
     shadowNone: "none",
@@ -2709,7 +2738,7 @@ const ot = {
     shadowLg: "0 0 0 3px color-mix(in srgb, var(--lucent-accent-default) 70%, transparent), 6px 6px 0 0 color-mix(in srgb, var(--lucent-accent-default) 40%, transparent)",
     shadowXl: "0 0 0 3px color-mix(in srgb, var(--lucent-accent-default) 75%, transparent), 8px 8px 0 0 color-mix(in srgb, var(--lucent-accent-default) 45%, transparent)"
   }
-}, mt = {
+}, vt = {
   name: "neumorphic",
   light: {
     shadowNone: "none",
@@ -2725,7 +2754,7 @@ const ot = {
     shadowLg: "0 20px 30px rgba(0, 0, 0, 0.5)",
     shadowXl: "0 28px 40px rgba(0, 0, 0, 0.55)"
   }
-}, ht = {
+}, yt = {
   name: "natural",
   light: {
     shadowNone: "none",
@@ -2741,7 +2770,7 @@ const ot = {
     shadowLg: "inset 0 1px 0 0 rgba(255, 255, 255, 0.09), inset 0 0 0 1px rgba(255, 255, 255, 0.05), inset 0 0 16px rgba(255, 255, 255, 0.02), 0 2px 6px rgba(0, 0, 0, 0.15)",
     shadowXl: "inset 0 1px 0 0 rgba(255, 255, 255, 0.12), inset 0 0 0 1px rgba(255, 255, 255, 0.06), inset 0 0 24px rgba(255, 255, 255, 0.03), 0 4px 10px rgba(0, 0, 0, 0.15)"
   }
-}, Ce = {
+}, We = {
   name: "glow",
   light: {
     shadowNone: "none",
@@ -2757,234 +2786,235 @@ const ot = {
     shadowLg: "0 0 36px color-mix(in srgb, var(--lucent-accent-default) 35%, transparent)",
     shadowXl: "0 0 50px color-mix(in srgb, var(--lucent-accent-default) 40%, transparent)"
   }
-}, Ha = {
+}, Xa = {
   name: "modern",
-  palette: ve,
-  shape: re,
-  density: se,
-  shadow: pt
-}, Na = {
-  name: "enterprise",
-  palette: ot,
-  shape: ye,
-  density: De,
-  shadow: Fe
-}, Ea = {
-  name: "playful",
-  palette: it,
-  shape: we,
-  density: ke,
-  shadow: gt
-}, Aa = {
-  name: "liquidGlass",
-  palette: dt,
-  shape: we,
-  density: ke,
+  palette: we,
+  shape: se,
+  density: oe,
   shadow: bt
-}, Oa = {
-  name: "bento",
-  palette: ve,
-  shape: re,
-  density: se,
-  shadow: ht
-}, Xa = {
-  name: "brutalist",
-  palette: ut,
-  shape: ye,
-  density: De,
-  shadow: xt
 }, ja = {
-  name: "terminal",
+  name: "enterprise",
   palette: ct,
-  shape: ye,
-  density: De,
+  shape: De,
+  density: ke,
   shadow: Ce
 }, Ua = {
-  name: "softUI",
-  palette: lt,
-  shape: we,
-  density: se,
+  name: "playful",
+  palette: dt,
+  shape: Se,
+  density: Me,
   shadow: mt
 }, qa = {
-  name: "bloom",
-  palette: ve,
-  shape: re,
-  density: ke,
-  shadow: Ce
+  name: "liquidGlass",
+  palette: pt,
+  shape: Se,
+  density: Me,
+  shadow: xt
 }, Ga = {
-  name: "minimal",
+  name: "bento",
+  palette: we,
+  shape: se,
+  density: oe,
+  shadow: yt
+}, Va = {
+  name: "brutalist",
   palette: ft,
-  shape: re,
-  density: se,
-  shadow: Fe
+  shape: De,
+  density: ke,
+  shadow: ht
 }, _a = {
-  default: ot,
-  brand: Fa,
-  indigo: ve,
-  violet: lt,
-  emerald: ct,
-  teal: Ca,
-  rose: it,
-  coral: ut,
-  amber: Pa,
-  ocean: dt,
-  slate: ft,
-  sage: Wa
-}, Va = {
-  sharp: ye,
-  rounded: re,
-  pill: we
+  name: "terminal",
+  palette: ut,
+  shape: De,
+  density: ke,
+  shadow: We
 }, Ka = {
-  compact: De,
-  default: se,
-  spacious: ke
+  name: "softUI",
+  palette: it,
+  shape: Se,
+  density: oe,
+  shadow: vt
 }, Ya = {
-  flat: Fe,
-  subtle: pt,
-  elevated: gt,
-  liquidGlass: bt,
-  brutalist: xt,
-  neumorphic: mt,
-  natural: ht,
-  glow: Ce
+  name: "bloom",
+  palette: we,
+  shape: se,
+  density: Me,
+  shadow: We
 }, Za = {
-  modern: Ha,
-  enterprise: Na,
-  playful: Ea,
-  liquidGlass: Aa,
-  bento: Oa,
-  brutalist: Xa,
-  terminal: ja,
-  softUI: Ua,
-  bloom: qa,
-  minimal: Ga
+  name: "minimal",
+  palette: gt,
+  shape: se,
+  density: oe,
+  shadow: Ce
+}, Ja = {
+  default: ct,
+  brand: Na,
+  indigo: we,
+  violet: it,
+  emerald: ut,
+  teal: Ea,
+  rose: dt,
+  coral: ft,
+  amber: Aa,
+  ocean: pt,
+  slate: gt,
+  sage: Oa
+}, Qa = {
+  sharp: De,
+  rounded: se,
+  pill: Se
+}, en = {
+  compact: ke,
+  default: oe,
+  spacious: Me
+}, tn = {
+  flat: Ce,
+  subtle: bt,
+  elevated: mt,
+  liquidGlass: xt,
+  brutalist: ht,
+  neumorphic: vt,
+  natural: yt,
+  glow: We
+}, an = {
+  modern: Xa,
+  enterprise: ja,
+  playful: Ua,
+  liquidGlass: qa,
+  bento: Ga,
+  brutalist: Va,
+  terminal: _a,
+  softUI: Ka,
+  bloom: Ya,
+  minimal: Za
 };
-function Ja(e) {
-  return typeof e == "string" ? _a[e] : e;
+function nn(e) {
+  return typeof e == "string" ? Ja[e] : e;
 }
-function Qa(e) {
-  return typeof e == "string" ? Va[e] : e;
+function rn(e) {
+  return typeof e == "string" ? Qa[e] : e;
 }
-function en(e) {
-  return typeof e == "string" ? Ka[e] : e;
+function sn(e) {
+  return typeof e == "string" ? en[e] : e;
 }
-function tn(e) {
-  return typeof e == "string" ? Ya[e] : e;
+function on(e) {
+  return typeof e == "string" ? tn[e] : e;
 }
-function an(e, t) {
+function ln(e, t) {
   let s, a, n, r;
   if (typeof e == "string") {
-    const c = Za[e];
+    const c = an[e];
     if (!c) return {};
     s = c.palette, a = c.shape, n = c.density, r = c.shadow;
   } else
-    e.palette !== void 0 && (s = Ja(e.palette)), e.shape !== void 0 && (a = Qa(e.shape)), e.density !== void 0 && (n = en(e.density)), e.shadow !== void 0 && (r = tn(e.shadow));
+    e.palette !== void 0 && (s = nn(e.palette)), e.shape !== void 0 && (a = rn(e.shape)), e.density !== void 0 && (n = sn(e.density)), e.shadow !== void 0 && (r = on(e.shadow));
   const o = {};
   if (s) {
-    const c = st(s[t], t);
+    const c = lt(s[t], t);
     Object.assign(o, c);
   }
   return a && Object.assign(o, a.tokens), n && Object.assign(o, n.tokens), r && Object.assign(o, r[t]), o;
 }
-const vt = wt({
+const wt = St({
   theme: "light",
-  tokens: he
+  tokens: ye
 });
-function fn({
+function xn({
   theme: e = "light",
   preset: t,
   tokens: s,
   anchors: a,
   children: n
 }) {
-  const r = Ke().replace(/:/g, ""), o = t ? an(t, e) : void 0, c = (() => {
+  const r = Ze().replace(/:/g, ""), o = t ? ln(t, e) : void 0, c = (() => {
     if (a) {
-      const k = st(a, e);
+      const I = lt(a, e);
       if (o) {
-        const L = {};
-        for (const [b, m] of Object.entries(o))
-          (b.startsWith("space") || b.startsWith("radius") || b.startsWith("shadow") || b.startsWith("duration") || b.startsWith("easing")) && (L[b] = m);
-        return { ...k, ...L };
+        const S = {};
+        for (const [p, x] of Object.entries(o))
+          (p.startsWith("space") || p.startsWith("radius") || p.startsWith("shadow") || p.startsWith("duration") || p.startsWith("easing")) && (S[p] = x);
+        return { ...I, ...S };
       }
-      return k;
+      return I;
     }
-    const i = e === "dark" ? at : he, d = o ? { ...o, ...s } : s, g = d ? { ...i, ...d } : i, h = d ? rt(d, g, e) : {}, p = (d == null ? void 0 : d.accentBorder) ?? (e === "light" ? M(g.accentDefault, -0.15) : M(g.accentDefault, 0.15)), y = (d == null ? void 0 : d.accentFg) ?? nt(g.accentDefault), I = La(g.accentDefault, y);
+    const d = e === "dark" ? rt : ye, u = o ? { ...o, ...s } : s, m = u ? { ...d, ...u } : d, h = u ? ot(u, m, e) : {}, b = (u == null ? void 0 : u.accentBorder) ?? (e === "light" ? z(m.accentDefault, -0.15) : z(m.accentDefault, 0.15)), v = (u == null ? void 0 : u.accentFg) ?? st(m.accentDefault), B = Wa(m.accentDefault, v);
     return {
-      ...g,
+      ...m,
       ...h,
-      accentDefault: I,
-      accentFg: y,
-      accentBorder: p
+      accentDefault: B,
+      accentFg: v,
+      accentBorder: b
     };
-  })(), u = `html { font-size: 14px; }
-` + ha(c, ":root");
-  return me(() => {
-    let i = document.getElementById(`lucent-tokens-${r}`);
-    return i || (i = document.createElement("style"), i.id = `lucent-tokens-${r}`, document.head.appendChild(i)), i.textContent = u, () => {
-      var d;
-      (d = document.getElementById(`lucent-tokens-${r}`)) == null || d.remove();
+  })(), i = `html { font-size: 14px; }
+` + Sa(c, ":root");
+  return ve(() => {
+    let d = document.getElementById(`lucent-tokens-${r}`);
+    return d || (d = document.createElement("style"), d.id = `lucent-tokens-${r}`, document.head.appendChild(d)), d.textContent = i, () => {
+      var u;
+      (u = document.getElementById(`lucent-tokens-${r}`)) == null || u.remove();
     };
-  }, [r, u]), /* @__PURE__ */ f(vt.Provider, { value: { theme: e, tokens: c }, children: n });
+  }, [r, i]), /* @__PURE__ */ f(wt.Provider, { value: { theme: e, tokens: c }, children: n });
 }
-function pn() {
-  return yt(vt);
+function hn() {
+  return Dt(wt);
 }
 export {
-  ma as $,
-  ve as A,
-  Ye as B,
-  sa as C,
-  he as D,
-  Aa as E,
-  bt as F,
-  ha as G,
-  Ga as H,
+  hn as $,
+  We as A,
+  Je as B,
+  ca as C,
+  we as D,
+  ye as E,
+  qa as F,
+  xt as G,
+  Sa as H,
   te as I,
-  Ha as J,
-  ht as K,
-  fn as L,
-  mt as M,
-  dt as N,
-  we as O,
-  Ea as P,
-  an as Q,
-  it as R,
-  Je as S,
-  cn as T,
-  re as U,
-  ye as V,
-  Ua as W,
-  ke as X,
-  pt as Y,
-  ja as Z,
-  pn as _,
-  M as a,
-  da as a0,
-  ua as a1,
-  La as a2,
-  on as b,
-  de as c,
-  Ze as d,
-  un as e,
-  dn as f,
-  nt as g,
-  ln as h,
-  Oa as i,
-  qa as j,
-  Fa as k,
-  Xa as l,
-  xt as m,
-  De as n,
-  st as o,
-  at as p,
-  se as q,
-  ot as r,
-  xa as s,
-  rt as t,
-  gt as u,
-  ct as v,
-  Na as w,
-  Fe as x,
-  $a as y,
-  Ce as z
+  Za as J,
+  Xa as K,
+  xn as L,
+  yt as M,
+  vt as N,
+  pt as O,
+  Se as P,
+  Ua as Q,
+  ln as R,
+  et as S,
+  gn as T,
+  dt as U,
+  se as V,
+  De as W,
+  Ka as X,
+  Me as Y,
+  bt as Z,
+  _a as _,
+  z as a,
+  wa as a0,
+  ba as a1,
+  ga as a2,
+  Wa as a3,
+  fn as b,
+  pe as c,
+  Qe as d,
+  bn as e,
+  mn as f,
+  st as g,
+  pn as h,
+  Ga as i,
+  Ya as j,
+  Na as k,
+  Va as l,
+  ht as m,
+  ke as n,
+  lt as o,
+  rt as p,
+  oe as q,
+  ct as r,
+  Mt as s,
+  ya as t,
+  ot as u,
+  mt as v,
+  ut as w,
+  ja as x,
+  Ce as y,
+  Ca as z
 };