lucent-ui 0.34.0 → 0.36.0

package/dist/{LucentProvider-BoiXYqA4.js → LucentProvider-F0EN_7TD.js}

@@ -1,7 +1,7 @@
-import { jsxs as I, jsx as p, Fragment as _e } from "react/jsx-runtime";
-import { forwardRef as xe, useState as C, useRef as U, useEffect as ne, useLayoutEffect as me, useId as Ve, useCallback as ue, useContext as vt, createContext as yt } from "react";
-import { createPortal as wt } from "react-dom";
-const kt = {
+import { jsxs as I, jsx as p, Fragment as Ve } from "react/jsx-runtime";
+import { forwardRef as xe, useState as C, useRef as U, useEffect as ne, useLayoutEffect as me, useId as Ke, useCallback as ue, useContext as yt, createContext as wt } from "react";
+import { createPortal as kt } from "react-dom";
+const Dt = {
   primary: {
     background: "var(--lucent-accent-default)",
     color: "var(--lucent-accent-fg)",
@@ -37,13 +37,13 @@ const kt = {
     color: "var(--lucent-danger-text)",
     border: "1px solid transparent"
   }
-}, Dt = {
+}, St = {
   "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)" }
-}, Ke = xe(
+}, 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, children: d, disabled: g, style: h, ...f }, w) => {
     const S = g ?? s, k = !d && !s && (!!r || !!o);
     return /* @__PURE__ */ I(
@@ -69,9 +69,9 @@ const kt = {
           boxSizing: "border-box",
           outline: "none",
           margin: 0,
-          ...Dt[t],
+          ...St[t],
           ...k && { padding: 0, aspectRatio: "1" },
-          ...kt[e],
+          ...Dt[e],
           ...h,
           ...S && {
             background: "color-mix(in srgb, var(--lucent-text-primary) 6%, transparent)",
@@ -83,11 +83,11 @@ const kt = {
         },
         onMouseEnter: (v) => {
           var b;
-          !S && !u && Mt(v.currentTarget, e, i), (b = f.onMouseEnter) == null || b.call(f, v);
+          !S && !u && zt(v.currentTarget, e, i), (b = f.onMouseEnter) == null || b.call(f, v);
         },
         onMouseLeave: (v) => {
           var b;
-          !S && !u && zt(v.currentTarget, e, i), (b = f.onMouseLeave) == null || b.call(f, v);
+          !S && !u && Tt(v.currentTarget, e, i), (b = f.onMouseLeave) == null || b.call(f, v);
         },
         onMouseDown: (v) => {
           var b;
@@ -112,16 +112,16 @@ const kt = {
         ...f,
         children: [
           r,
-          s ? /* @__PURE__ */ p(Bt, {}) : d,
+          s ? /* @__PURE__ */ p($t, {}) : d,
           !s && o,
-          !s && c && /* @__PURE__ */ p(It, { size: t })
+          !s && c && /* @__PURE__ */ p(Bt, { size: t })
         ]
       }
     );
   }
 );
-Ke.displayName = "Button";
-const St = {
+Ye.displayName = "Button";
+const Mt = {
   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)",
@@ -130,24 +130,24 @@ const St = {
   "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 Mt(e, t, s) {
-  e.style.transform = "translateY(-1px)", e.style.boxShadow = St[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 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 Tt(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 Tt = { "2xs": 8, xs: 10, sm: 12, md: 14, lg: 16 };
-function It({ size: e }) {
-  const t = Tt[e];
+const It = { "2xs": 8, xs: 10, sm: 12, md: 14, lg: 16 };
+function Bt({ size: e }) {
+  const t = It[e];
   return /* @__PURE__ */ p("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__ */ p("polyline", { points: "6 9 12 15 18 9" }) });
 }
-function Bt() {
+function $t() {
   return /* @__PURE__ */ I("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__ */ p("style", { children: "@keyframes lucent-spin { to { transform: rotate(360deg); } }" }),
     /* @__PURE__ */ p("path", { d: "M12 2a10 10 0 0 1 10 10" })
   ] });
 }
-const $t = {
+const Rt = {
   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)"
@@ -211,7 +211,7 @@ const $t = {
           style: {
             display: "flex",
             alignItems: "stretch",
-            height: $t[e],
+            height: Rt[e],
             border: `1px solid ${m}`,
             borderRadius: "var(--lucent-radius-lg)",
             boxShadow: D,
@@ -311,19 +311,19 @@ const $t = {
   }
 );
 te.displayName = "Input";
-const Rt = {
+const Lt = {
   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)" }
-}, Lt = {
+}, Ct = {
   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 = Lt[t];
+  const r = Lt[e], o = Ct[t];
   return /* @__PURE__ */ I("span", { style: {
     display: "inline-flex",
     alignItems: "center",
@@ -352,11 +352,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)" }, Ft = {
+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)" }, Pt = {
   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)", Pt = `
+}, He = "cubic-bezier(0.34, 1.56, 0.64, 1)", Wt = `
 @keyframes lucent-toggle-pop {
   0%   { transform: scale(1); }
   35%  { transform: scale(0.94); }
@@ -386,7 +386,7 @@ function ln({
       return () => clearTimeout(E);
     }
   }, [k, c]);
-  const { track: [X, O], thumb: A } = Ft[t], N = k ? X - A - 2 : 2, Z = (E) => {
+  const { track: [X, O], thumb: A } = Pt[t], N = k ? X - A - 2 : 2, Z = (E) => {
     f || S(E.target.checked), i == null || i(E);
   }, K = /* @__PURE__ */ I(
     "span",
@@ -478,15 +478,15 @@ function ln({
       ]
     }
   );
-  return /* @__PURE__ */ I(_e, { children: [
-    /* @__PURE__ */ p("style", { children: Pt }),
+  return /* @__PURE__ */ I(Ve, { children: [
+    /* @__PURE__ */ p("style", { children: Wt }),
     n ? /* @__PURE__ */ p(
       "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" },
+          ...r ? { padding: "var(--lucent-space-3)" } : { minHeight: Ft[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",
           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",
@@ -503,11 +503,11 @@ function ln({
     ) : $
   ] });
 }
-const Wt = {
+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)"
-}, Ht = {
+}, Nt = {
   sm: "var(--lucent-font-size-sm)",
   md: "var(--lucent-font-size-md)",
   lg: "var(--lucent-font-size-md)"
@@ -519,7 +519,7 @@ const Wt = {
   sm: "var(--lucent-space-2)",
   md: "var(--lucent-space-3)",
   lg: "var(--lucent-space-3)"
-}, Ye = xe(
+}, 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, f = !!o, [w, S] = C(!1), [k, v] = C(!1), b = f ? "transparent" : h ? "var(--lucent-danger-default)" : w ? "var(--lucent-accent-border)" : k ? "var(--lucent-border-strong)" : "var(--lucent-border-default)", m = w ? `0 0 0 3px ${h ? "var(--lucent-danger-subtle)" : "var(--lucent-accent-subtle)"}` : "none";
     return /* @__PURE__ */ I("div", { style: { display: "flex", flexDirection: "column", gap: "var(--lucent-space-1)", width: "100%", ...u }, children: [
@@ -543,7 +543,7 @@ const Wt = {
             position: "relative",
             display: "flex",
             alignItems: "center",
-            height: Wt[t],
+            height: Ht[t],
             border: `1px solid ${b}`,
             borderRadius: "var(--lucent-radius-lg)",
             boxShadow: m,
@@ -571,7 +571,7 @@ const Wt = {
                   width: "100%",
                   height: "100%",
                   padding: `0 var(--lucent-space-8) 0 ${Ne[t]}`,
-                  fontSize: Ht[t],
+                  fontSize: Nt[t],
                   fontFamily: "var(--lucent-font-family-base)",
                   color: f ? "var(--lucent-text-disabled)" : "var(--lucent-text-primary)",
                   background: "transparent",
@@ -646,8 +646,8 @@ const Wt = {
     ] });
   }
 );
-Ye.displayName = "Select";
-const Nt = {
+Ze.displayName = "Select";
+const Et = {
   primary: "var(--lucent-text-primary)",
   secondary: "var(--lucent-text-secondary)",
   disabled: "var(--lucent-text-disabled)",
@@ -657,7 +657,7 @@ const Nt = {
   warning: "var(--lucent-warning-text)",
   danger: "var(--lucent-danger-text)",
   info: "var(--lucent-info-text)"
-}, Et = {
+}, At = {
   xs: "var(--lucent-font-size-xs)",
   sm: "var(--lucent-font-size-sm)",
   md: "var(--lucent-font-size-md)",
@@ -665,16 +665,16 @@ const Nt = {
   xl: "var(--lucent-font-size-xl)",
   "2xl": "var(--lucent-font-size-2xl)",
   "3xl": "var(--lucent-font-size-3xl)"
-}, At = {
+}, Ot = {
   regular: "var(--lucent-font-weight-regular)",
   medium: "var(--lucent-font-weight-medium)",
   semibold: "var(--lucent-font-weight-semibold)",
   bold: "var(--lucent-font-weight-bold)"
-}, Ot = {
+}, Xt = {
   tight: "var(--lucent-line-height-tight)",
   base: "var(--lucent-line-height-base)",
   relaxed: "var(--lucent-line-height-relaxed)"
-}, Xt = {
+}, jt = {
   base: "var(--lucent-font-family-base)",
   mono: "var(--lucent-font-family-mono)",
   display: "var(--lucent-font-family-display)"
@@ -693,12 +693,12 @@ function cn({
   ...d
 }) {
   const g = {
-    fontSize: Et[t],
-    fontWeight: At[s],
-    color: Nt[a],
+    fontSize: At[t],
+    fontWeight: Ot[s],
+    color: Et[a],
     ...n !== void 0 && { textAlign: n },
-    lineHeight: Ot[r],
-    fontFamily: Xt[o],
+    lineHeight: Xt[r],
+    fontFamily: jt[o],
     margin: 0,
     ...c && {
       overflow: "hidden",
@@ -709,7 +709,7 @@ function cn({
   };
   return /* @__PURE__ */ p(e, { style: g, ...d, children: u });
 }
-const jt = { sm: "3px", md: "4px", lg: "5px" }, Ut = { sm: "14px", md: "18px", lg: "22px" }, qt = `
+const Ut = { sm: "3px", md: "4px", lg: "5px" }, qt = { sm: "14px", md: "18px", lg: "22px" }, Gt = `
 .lucent-slider {
   -webkit-appearance: none;
   appearance: none;
@@ -823,8 +823,8 @@ function un({
   ), v = w ? o : S, b = `${(v - a) / (n - a) * 100}%`, m = (D) => {
     w || k(Number(D.target.value)), d == null || d(D);
   };
-  return /* @__PURE__ */ I(_e, { children: [
-    /* @__PURE__ */ p("style", { children: qt }),
+  return /* @__PURE__ */ I(Ve, { children: [
+    /* @__PURE__ */ p("style", { children: Gt }),
     /* @__PURE__ */ I(
       "div",
       {
@@ -886,8 +886,8 @@ function un({
               value: w ? o : S,
               onChange: m,
               style: {
-                "--ls-track-h": jt[s],
-                "--ls-thumb": Ut[s],
+                "--ls-track-h": Ut[s],
+                "--ls-thumb": qt[s],
                 "--ls-fill": b
               },
               ...h
@@ -902,16 +902,16 @@ const Ee = {
   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)"
-}, Gt = {
+}, _t = {
   sm: "var(--lucent-font-size-sm)",
   md: "var(--lucent-font-size-md)",
   lg: "var(--lucent-font-size-lg)"
-}, _t = {
+}, Vt = {
   sm: "var(--lucent-space-3)",
   md: "var(--lucent-space-4)",
   lg: "var(--lucent-space-5)"
 };
-function Ze({
+function Je({
   options: e,
   value: t,
   defaultValue: s,
@@ -1005,8 +1005,8 @@ function Ze({
                 gap: "var(--lucent-space-1)",
                 flex: 1,
                 height: Ee[n],
-                padding: `0 ${_t[n]}`,
-                fontSize: Gt[n],
+                padding: `0 ${Vt[n]}`,
+                fontSize: _t[n],
                 fontFamily: "var(--lucent-font-family-base)",
                 fontWeight: m ? "var(--lucent-font-weight-medium)" : "var(--lucent-font-weight-regular)",
                 color: D ? "var(--lucent-text-disabled)" : m ? "var(--lucent-text-primary)" : "var(--lucent-text-secondary)",
@@ -1036,23 +1036,23 @@ function Ze({
     }
   );
 }
-Ze.displayName = "SegmentedControl";
-const Vt = {
+Je.displayName = "SegmentedControl";
+const Kt = {
   xs: 12,
   sm: 16,
   md: 22,
   lg: 28,
   xl: 36,
   "2xl": 48
-}, Kt = {
+}, Yt = {
   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)", Yt = "inset 0 0 0 1px rgba(0,0,0,0.2), 0 0 0 3px var(--lucent-accent-subtle)";
-function Zt(e) {
+}, 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) {
   return {
     backgroundImage: [
       `linear-gradient(${e}, ${e})`,
@@ -1079,7 +1079,7 @@ const de = xe(({
   onClick: i,
   ...d
 }, g) => {
-  const h = Vt[t], f = s === "circle" ? "50%" : Kt[t];
+  const h = Kt[t], f = s === "circle" ? "50%" : Yt[t];
   return /* @__PURE__ */ p(
     "button",
     {
@@ -1091,7 +1091,7 @@ const de = xe(({
         width: h,
         height: h,
         flexShrink: 0,
-        ...a ? Zt(e) : { background: e },
+        ...a ? Jt(e) : { background: e },
         border: "none",
         borderRadius: f,
         cursor: r ? "not-allowed" : i ? "pointer" : "default",
@@ -1103,7 +1103,7 @@ const de = xe(({
         ...o
       },
       onFocus: (w) => {
-        r || (w.currentTarget.style.boxShadow = Yt), c == null || c(w);
+        r || (w.currentTarget.style.boxShadow = Zt), c == null || c(w);
       },
       onBlur: (w) => {
         w.currentTarget.style.boxShadow = n ? Oe : Ae, u == null || u(w);
@@ -1116,17 +1116,17 @@ de.displayName = "ColorSwatch";
 function pe(e, t, s) {
   return Math.max(t, Math.min(s, e));
 }
-function Jt(e, t, s) {
+function Qt(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 Qt(e, t, s) {
+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 ea(e, t, s) {
+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);
@@ -1142,7 +1142,7 @@ function Le(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 Je(e) {
+function Qe(e) {
   const t = Le(e);
   return {
     r: parseInt(t.slice(1, 3), 16),
@@ -1155,20 +1155,20 @@ 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)}`;
   return a < 1 ? `${r}${n(Math.round(a * 255))}` : r;
 }
-function Qe({ h: e, s: t, v: s, a }) {
-  return { ...Jt(e, t, s), a };
+function et({ h: e, s: t, v: s, a }) {
+  return { ...Qt(e, t, s), a };
 }
 function q({ r: e, g: t, b: s, a }) {
-  return { ...Qt(e, t, s), a };
+  return { ...ea(e, t, s), a };
 }
 function oe(e) {
-  return $e(Qe(e));
+  return $e(et(e));
 }
 function le(e) {
   const t = e.trim();
   if (t.startsWith("#")) {
     const n = Le(t);
-    return /^#[0-9a-f]{6}([0-9a-f]{2})?$/i.test(n) ? Je(n) : null;
+    return /^#[0-9a-f]{6}([0-9a-f]{2})?$/i.test(n) ? Qe(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) {
@@ -1182,7 +1182,7 @@ function le(e) {
   }
   return null;
 }
-const ta = [
+const aa = [
   {
     label: "Presets",
     colors: [
@@ -1197,7 +1197,7 @@ const ta = [
       "#e11d48"
     ]
   }
-], aa = [
+], na = [
   "linear-gradient(45deg, #c0c0c0 25%, transparent 25%)",
   "linear-gradient(-45deg, #c0c0c0 25%, transparent 25%)",
   "linear-gradient(45deg, transparent 75%, #c0c0c0 75%)",
@@ -1259,27 +1259,27 @@ function Xe({ value: e, min: t, max: s, onChange: a, trackStyle: n, formatToolti
     }
   );
 }
-function na() {
+function ra() {
   return /* @__PURE__ */ I("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__ */ p("path", { d: "M2 22l1-1h3l9-9" }),
     /* @__PURE__ */ p("path", { d: "M3 21v-3l9-9" }),
     /* @__PURE__ */ p("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 ra({
+function sa({
   value: e,
   onChange: t,
   label: s,
   size: a = "md",
   inline: n = !1,
   disabled: r = !1,
-  presetGroups: o = ta,
+  presetGroups: o = aa,
   portalContainer: c,
   id: u,
   style: i
 }) {
   var M, F;
-  const d = a === "sm" ? 24 : 40, g = Ve(), h = u ?? g, [f, w] = C(!1), [S, k] = C("hex"), [v, b] = C(0), [m, D] = C(() => {
+  const d = a === "sm" ? 24 : 40, g = Ke(), h = u ?? g, [f, w] = C(!1), [S, k] = C("hex"), [v, b] = C(0), [m, D] = C(() => {
     const l = e ? le(e) ?? { r: 0, g: 0, b: 0, a: 1 } : { r: 0, g: 0, b: 0, a: 1 };
     return q(l);
   }), [L, X] = C(() => oe(m).slice(1).toUpperCase()), O = U(null), A = U(null), N = U(null), [Z, K] = C({ top: 0, left: 0 });
@@ -1320,7 +1320,7 @@ function ra({
         x && $(q(x));
       } catch {
       }
-  }, [$]), W = Qe(m), j = ea(W.r, W.g, W.b), ae = oe(m), Se = oe({ ...m, a: 1 }), Y = Math.round(m.a * 100), y = [
+  }, [$]), W = et(m), j = ta(W.r, W.g, W.b), ae = oe(m), Se = oe({ ...m, a: 1 }), Y = Math.round(m.a * 100), y = [
     { id: "hex", label: "Hex" },
     { id: "rgb", label: "RGB" },
     { id: "hsl", label: "HSL" },
@@ -1383,7 +1383,7 @@ function ra({
             children: s
           }
         ),
-        f && wt(
+        f && kt(
           /* @__PURE__ */ I(
             "div",
             {
@@ -1470,7 +1470,7 @@ function ra({
                         /* @__PURE__ */ p("div", { style: {
                           position: "absolute",
                           inset: 0,
-                          backgroundImage: aa,
+                          backgroundImage: na,
                           backgroundSize: "8px 8px",
                           backgroundPosition: "0 0, 0 4px, 4px -4px, -4px 0",
                           backgroundColor: "#fff"
@@ -1491,7 +1491,7 @@ function ra({
                     ] })
                   ] }),
                   /* @__PURE__ */ p(
-                    Ze,
+                    Je,
                     {
                       size: "sm",
                       value: S,
@@ -1501,14 +1501,14 @@ function ra({
                   ),
                   S === "hex" && /* @__PURE__ */ I("div", { style: { display: "flex", gap: 6, alignItems: "center" }, children: [
                     /* @__PURE__ */ p(
-                      Ke,
+                      Ye,
                       {
                         variant: "secondary",
                         size: "sm",
                         onClick: G,
                         disabled: !R,
                         title: R ? "Pick color from screen" : "Not supported in this browser",
-                        leftIcon: /* @__PURE__ */ p(na, {}),
+                        leftIcon: /* @__PURE__ */ p(ra, {}),
                         style: { flexShrink: 0, paddingLeft: 8, paddingRight: 8 }
                       }
                     ),
@@ -1519,12 +1519,13 @@ function ra({
                         prefix: "#",
                         value: L,
                         onChange: (l) => {
-                          const x = l.target.value.replace("#", "");
-                          X(x.toUpperCase());
-                          const T = le(`#${x}`);
-                          if (T) {
-                            const B = q(T);
-                            D(B), t == null || t($e(T));
+                          const x = l.target.value.replace(/[^0-9a-fA-F]/g, "");
+                          if (X(x.toUpperCase()), /^[0-9a-f]{6}$/i.test(x) || /^[0-9a-f]{8}$/i.test(x)) {
+                            const T = le(`#${x}`);
+                            if (T) {
+                              const B = q(T);
+                              D(B), t == null || t($e(T));
+                            }
                           }
                         },
                         spellCheck: !1,
@@ -1589,7 +1590,7 @@ function ra({
                   }, className: "lucent-cp-field", style: { flex: 1 } }, l)) }),
                   o.length > 0 && /* @__PURE__ */ I("div", { style: { display: "flex", flexDirection: "column", gap: 8 }, children: [
                     o.length > 1 && /* @__PURE__ */ p(
-                      Ye,
+                      Ze,
                       {
                         size: "sm",
                         value: String(v),
@@ -1610,7 +1611,7 @@ function ra({
                         {
                           color: l,
                           selected: x,
-                          onClick: () => $(q(Je(l)))
+                          onClick: () => $(q(Qe(l)))
                         },
                         l
                       );
@@ -1626,7 +1627,7 @@ function ra({
     }
   );
 }
-ra.displayName = "ColorPicker";
+sa.displayName = "ColorPicker";
 function dn({ tabs: e, defaultValue: t, value: s, onChange: a, variant: n = "underline", style: r }) {
   var Y;
   const o = s !== void 0, [c, u] = C(t ?? ((Y = e[0]) == null ? void 0 : Y.value) ?? ""), i = o ? s : c, [d, g] = C(null), h = U([]), [f, w] = C(null), S = U(!1), k = n === "pills", v = U(null), b = U(null), m = U(null), [D, L] = C(e.length), [X, O] = C(!1), [A, N] = C(!1), [Z, K] = C(null), $ = e.slice(0, D), E = e.slice(D), G = E.length > 0, W = E.some((y) => y.value === i), j = () => {
@@ -1911,17 +1912,17 @@ function dn({ tabs: e, defaultValue: t, value: s, onChange: a, variant: n = "und
     ))
   ] });
 }
-const sa = {
+const oa = {
   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',
-  fontSizeXs: "0.75rem",
-  fontSizeSm: "0.875rem",
+  fontSizeXs: "0.79rem",
+  fontSizeSm: "0.889rem",
   fontSizeMd: "1rem",
   fontSizeLg: "1.125rem",
-  fontSizeXl: "1.25rem",
-  fontSize2xl: "1.5rem",
-  fontSize3xl: "1.875rem",
+  fontSizeXl: "1.266rem",
+  fontSize2xl: "1.424rem",
+  fontSize3xl: "1.602rem",
   fontWeightRegular: "400",
   fontWeightMedium: "500",
   fontWeightSemibold: "600",
@@ -1932,7 +1933,7 @@ const sa = {
   letterSpacingTight: "-0.02em",
   letterSpacingBase: "0em",
   letterSpacingWide: "0.04em"
-}, oa = {
+}, la = {
   space0: "0px",
   space1: "0.25rem",
   space2: "0.5rem",
@@ -1946,53 +1947,54 @@ const sa = {
   space16: "4rem",
   space20: "5rem",
   space24: "6rem"
-}, la = {
+}, ca = {
   radiusNone: "0px",
   radiusSm: "0.25rem",
   radiusMd: "0.375rem",
   radiusLg: "0.5rem",
   radiusXl: "0.75rem",
   radiusFull: "9999px"
-}, ca = {
+}, ia = {
   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)"
-}, ia = {
-  shadowNone: "none",
-  shadowSm: "0 1px 2px 0 rgb(0 0 0 / 0.05)",
-  shadowMd: "0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1)",
-  shadowLg: "0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1)",
-  shadowXl: "0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1)"
 }, ua = {
   shadowNone: "none",
-  shadowSm: "inset 0 1px 0 0 rgba(255, 255, 255, 0.04), 0 1px 2px 0 rgba(0, 0, 0, 0.2)",
-  shadowMd: "inset 0 1px 0 0 rgba(255, 255, 255, 0.06), 0 2px 4px -1px rgba(0, 0, 0, 0.25)",
-  shadowLg: "inset 0 1px 0 0 rgba(255, 255, 255, 0.08), 0 4px 8px -2px rgba(0, 0, 0, 0.3)",
-  shadowXl: "inset 0 1px 0 0 rgba(255, 255, 255, 0.1), 0 8px 16px -4px rgba(0, 0, 0, 0.35)"
+  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 = {
+  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 = {
-  ...sa,
   ...oa,
   ...la,
   ...ca,
   ...ia,
-  // Backgrounds — page/layout layer only
+  ...ua,
+  // Navigation — chrome/shell (sidebar, header, footer)
+  navigation: "#f4f6f8",
+  // Backgrounds — main content area
   bgBase: "#ffffff",
-  bgSubtle: "#f9fafb",
+  bgSubtle: "#fafafa",
   bgOverlay: "rgb(0 0 0 / 0.4)",
   // Surfaces — component elevation layer
   surface: "#ffffff",
-  surfaceSecondary: "#f3f4f6",
+  surfaceSecondary: "#f5f5f5",
   surfaceRaised: "#ffffff",
   surfaceOverlay: "#ffffff",
-  surfaceTint: "#f2f2f2",
-  // adjustLightness(bgBase, -0.05) — derived when bgBase is customized
+  surfaceTint: "#f5f5f5",
   // Borders
   borderDefault: "#e5e7eb",
   borderSubtle: "#f3f4f6",
-  borderStrong: "#9ca3af",
+  borderStrong: "#979faf",
   controlTrack: "#d1d5db",
   // Text
   textPrimary: "#111827",
@@ -2000,14 +2002,11 @@ const sa = {
   textDisabled: "#d1d5db",
   textInverse: "#ffffff",
   // Accent (monochrome default — near-black for universal, high-contrast out of the box)
-  // Use `brandTokens` to opt in to the gold palette.
   accentDefault: "#111827",
-  accentHover: "#1f2937",
-  accentSubtle: "#f3f4f6",
-  // placeholder — actual value is recomputed in LucentProvider
-  accentBorder: "#111827",
-  accentFg: "#ffffff",
-  // auto-recomputed by LucentProvider via getContrastText
+  accentHover: "#192339",
+  accentSubtle: "#f1f3f9",
+  accentBorder: "#000000",
+  accentFg: "#f0f1f5",
   // Status
   successDefault: "#16a34a",
   successSubtle: "#f0fdf4",
@@ -2023,16 +2022,16 @@ const sa = {
   infoSubtle: "#eff6ff",
   infoText: "#1d4ed8"
 };
-function da(e) {
+function fa(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 fa({ r: e, g: t, b: s }) {
+function pa({ r: e, g: t, b: s }) {
   const a = (n) => n.toString(16).padStart(2, "0");
   return `#${a(e)}${a(t)}${a(s)}`;
 }
 function V(e) {
-  const { r: t, g: s, b: a } = da(e), n = t / 255, r = s / 255, o = a / 255, c = Math.max(n, r, o), u = Math.min(n, r, o);
+  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) {
@@ -2056,22 +2055,22 @@ function _(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), fa({ r: Math.round((o + r) * 255), g: Math.round((c + r) * 255), b: Math.round((u + r) * 255) });
+  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) });
 }
 function z(e, t) {
   const [s, a, n] = V(e);
   return _(s, a, Math.min(1, Math.max(0, n + t)));
 }
-const pa = 222, ga = 0.12;
-function et(e, t) {
-  return t < 0.04 ? [pa, ga] : [e, t];
+const ga = 222, ba = 0.12;
+function tt(e, t) {
+  return t < 0.04 ? [ga, ba] : [e, t];
 }
-function ba(e) {
-  const [t, s, a] = V(e), [n, r] = et(t, s);
+function je(e) {
+  const [t, s, a] = V(e), [n, r] = tt(t, s);
   return _(n, r, Math.max(0.04, Math.min(0.2, 0.07 + (1 - a))));
 }
 function Te(e) {
-  const [t, s, a] = V(e), [n, r] = et(t, s);
+  const [t, s, a] = V(e), [n, r] = tt(t, s);
   return _(n, r, Math.max(0.06, Math.min(0.5, (1 - a) * 0.6 + 0.06)));
 }
 function Ie(e) {
@@ -2083,33 +2082,35 @@ function Be(e) {
   return _(t, s, Math.max(0.02, Math.min(0.98, 1 - a)));
 }
 function xa(e) {
-  const t = ba(e.bgBase), [s, a, n] = V(t), r = (o) => _(s, a, Math.min(0.25, n + o));
+  const t = je(e.navigation), s = je(e.bgBase), [a, n, r] = V(s), o = (c) => _(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 ───────────
-    ...ua,
+    ...da,
+    // ── Navigation ──────────────────────────────────────────────────────────
+    navigation: t,
     // ── Backgrounds ─────────────────────────────────────────────────────────
-    bgBase: t,
-    bgSubtle: r(0.02),
+    bgBase: s,
+    bgSubtle: o(0.02),
     bgOverlay: "rgb(0 0 0 / 0.6)",
     // ── Surfaces: slight elevation steps above bgBase ────────────────────────
-    surface: r(0.02),
-    surfaceSecondary: r(0.05),
-    surfaceRaised: r(0.08),
-    surfaceOverlay: r(0.08),
-    surfaceTint: r(0.03),
+    surface: o(0.02),
+    surfaceSecondary: o(0.05),
+    surfaceRaised: o(0.08),
+    surfaceOverlay: o(0.08),
+    surfaceTint: o(0.03),
     // ── Borders ──────────────────────────────────────────────────────────────
     borderDefault: Te(e.borderDefault),
     borderSubtle: Te(e.borderSubtle),
     borderStrong: Te(e.borderStrong),
-    controlTrack: r(0.1),
+    controlTrack: o(0.1),
     // ── Text ─────────────────────────────────────────────────────────────────
     textPrimary: Ie(e.textPrimary),
     textSecondary: Ie(e.textSecondary),
     textDisabled: Ie(e.textDisabled),
     // textInverse flips to dark bg so it reads on light accent surfaces
-    textInverse: t,
+    textInverse: s,
     // ── Accent ───────────────────────────────────────────────────────────────
     accentDefault: Be(e.accentDefault),
     accentHover: Be(e.accentHover),
@@ -2134,7 +2135,7 @@ function xa(e) {
     infoText: z(e.infoText, 0.15)
   };
 }
-const tt = xa(he);
+const at = xa(he);
 function ma(e) {
   return "--lucent-" + e.replace(/([A-Z])/g, (t) => `-${t.toLowerCase()}`).replace(/([a-z])(\d)/g, (t, s, a) => `${s}-${a}`);
 }
@@ -2149,21 +2150,21 @@ function va(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, ka = 0.072175, Da = 0.56, Sa = 0.57, Ma = 0.65, za = 0.62, je = 0.022, Ta = 1.414, Ia = 1.14, Ba = 1.14, Ue = 0.027, qe = 0.027;
-function Ge(e) {
+const ya = 0.2126729, wa = 0.7151522, ka = 0.072175, Da = 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 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 + ka * o;
-  return c < 0 && (c = 0), c < je ? c + Math.pow(je - c, Ta) : c;
+  return c < 0 && (c = 0), c < Ue ? c + Math.pow(Ue - c, Ta) : c;
 }
 function ge(e, t) {
-  const s = Ge(e), a = Ge(t);
+  const s = _e(e), a = _e(t);
   let n;
   if (s > a) {
     const r = (Math.pow(s, Da) - Math.pow(a, Sa)) * Ia;
-    n = r < Ue ? 0 : r - Ue;
+    n = r < qe ? 0 : r - qe;
   } else {
     const r = (Math.pow(s, Ma) - Math.pow(a, za)) * Ba;
-    n = r > -qe ? 0 : r + qe;
+    n = r > -Ge ? 0 : r + Ge;
   }
   return n * 100;
 }
@@ -2171,7 +2172,7 @@ function $a(e) {
   const t = Math.abs(ge(e, "#ffffff")), s = Math.abs(ge(e, "#000000"));
   return t >= s ? "#ffffff" : "#000000";
 }
-function at(e) {
+function nt(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) {
@@ -2224,7 +2225,7 @@ function ie(e, t) {
   const [s, a] = V(e);
   return _(s, a, t ? be.text.light : be.text.dark);
 }
-function nt(e, t, s) {
+function rt(e, t, s) {
   const a = {}, n = s === "light";
   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 = La(t.bgBase, n);
@@ -2232,18 +2233,19 @@ function nt(e, t, s) {
   }
   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 = 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 = z(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;
 }
-function rt(e, t = "light") {
-  const a = { ...t === "dark" ? tt : he, ...e }, n = nt(e, a, t), r = t === "light" ? z(a.accentDefault, -0.15) : z(a.accentDefault, 0.15);
+function st(e, t = "light") {
+  const a = { ...t === "dark" ? at : he, ...e }, n = rt(e, a, t), r = t === "light" ? z(a.accentDefault, -0.15) : z(a.accentDefault, 0.15);
   return {
     ...a,
     ...n,
-    accentFg: at(a.accentDefault),
+    accentFg: nt(a.accentDefault),
     accentBorder: r
   };
 }
-const st = {
+const ot = {
   name: "default",
   light: {
+    navigation: "#f4f6f8",
     bgBase: "#ffffff",
     surface: "#ffffff",
     borderDefault: "#e5e7eb",
@@ -2254,7 +2256,8 @@ const st = {
     infoDefault: "#2563eb"
   },
   dark: {
-    bgBase: "#111318",
+    navigation: "#0b0c12",
+    bgBase: "#12131a",
     surface: "#181a20",
     borderDefault: "#2e3039",
     accentDefault: "#f9fafb",
@@ -2266,7 +2269,8 @@ const st = {
 }, Ca = {
   name: "brand",
   light: {
-    bgBase: "#fffefb",
+    navigation: "#fffefb",
+    bgBase: "#f2f0e8",
     surface: "#fffdf7",
     borderDefault: "#e8e3d6",
     accentDefault: "#e9c96b",
@@ -2276,6 +2280,7 @@ const st = {
     infoDefault: "#2563eb"
   },
   dark: {
+    navigation: "#0c0b08",
     bgBase: "#151310",
     surface: "#1c1a15",
     borderDefault: "#33302a",
@@ -2288,7 +2293,8 @@ const st = {
 }, ve = {
   name: "indigo",
   light: {
-    bgBase: "#fdfcff",
+    navigation: "#ffffff",
+    bgBase: "#faf9fb",
     surface: "#faf9fe",
     borderDefault: "#e0dde9",
     accentDefault: "#6366f1",
@@ -2298,7 +2304,8 @@ const st = {
     infoDefault: "#2563eb"
   },
   dark: {
-    bgBase: "#12111a",
+    navigation: "#09081a",
+    bgBase: "#100e24",
     surface: "#191820",
     borderDefault: "#2e2d3a",
     accentDefault: "#818cf8",
@@ -2307,10 +2314,11 @@ const st = {
     dangerDefault: "#ef4444",
     infoDefault: "#3b82f6"
   }
-}, ot = {
+}, lt = {
   name: "violet",
   light: {
-    bgBase: "#fdfcfe",
+    navigation: "#f8f4ff",
+    bgBase: "#eee8fa",
     surface: "#faf8fd",
     borderDefault: "#e2dce9",
     accentDefault: "#8b5cf6",
@@ -2320,7 +2328,8 @@ const st = {
     infoDefault: "#2563eb"
   },
   dark: {
-    bgBase: "#13111a",
+    navigation: "#0a0818",
+    bgBase: "#120e22",
     surface: "#1a1822",
     borderDefault: "#302d3b",
     accentDefault: "#a78bfa",
@@ -2329,10 +2338,11 @@ const st = {
     dangerDefault: "#ef4444",
     infoDefault: "#3b82f6"
   }
-}, lt = {
+}, ct = {
   name: "emerald",
   light: {
-    bgBase: "#fbfefc",
+    navigation: "#f4fcf9",
+    bgBase: "#e9f6f1",
     surface: "#f7fcf9",
     borderDefault: "#dbe8df",
     accentDefault: "#10b981",
@@ -2342,7 +2352,8 @@ const st = {
     infoDefault: "#2563eb"
   },
   dark: {
-    bgBase: "#0f1512",
+    navigation: "#061008",
+    bgBase: "#0c1a16",
     surface: "#151c18",
     borderDefault: "#263330",
     accentDefault: "#34d399",
@@ -2354,7 +2365,8 @@ const st = {
 }, Fa = {
   name: "teal",
   light: {
-    bgBase: "#fbfefd",
+    navigation: "#f9fbfc",
+    bgBase: "#eef2f5",
     surface: "#f6fcfa",
     borderDefault: "#d4e5e0",
     accentDefault: "#0d9488",
@@ -2364,7 +2376,8 @@ const st = {
     infoDefault: "#2563eb"
   },
   dark: {
-    bgBase: "#0f1514",
+    navigation: "#060e0c",
+    bgBase: "#0c1816",
     surface: "#161d1c",
     borderDefault: "#283836",
     accentDefault: "#2dd4bf",
@@ -2373,10 +2386,11 @@ const st = {
     dangerDefault: "#ef4444",
     infoDefault: "#3b82f6"
   }
-}, ct = {
+}, it = {
   name: "rose",
   light: {
-    bgBase: "#fffcfd",
+    navigation: "#fff4f6",
+    bgBase: "#f5e8ec",
     surface: "#fef9fa",
     borderDefault: "#ecdde1",
     accentDefault: "#f43f5e",
@@ -2386,7 +2400,8 @@ const st = {
     infoDefault: "#2563eb"
   },
   dark: {
-    bgBase: "#161012",
+    navigation: "#10060a",
+    bgBase: "#1a1016",
     surface: "#1d1518",
     borderDefault: "#3a282e",
     accentDefault: "#fb7185",
@@ -2395,10 +2410,11 @@ const st = {
     dangerDefault: "#ef4444",
     infoDefault: "#3b82f6"
   }
-}, it = {
+}, ut = {
   name: "coral",
   light: {
-    bgBase: "#fffcfb",
+    navigation: "#fff9f7",
+    bgBase: "#f2ece8",
     surface: "#fef9f7",
     borderDefault: "#e9ddd8",
     accentDefault: "#e8624a",
@@ -2408,7 +2424,8 @@ const st = {
     infoDefault: "#2563eb"
   },
   dark: {
-    bgBase: "#171210",
+    navigation: "#0e0806",
+    bgBase: "#1a1210",
     surface: "#1e1816",
     borderDefault: "#3b312c",
     accentDefault: "#f38b76",
@@ -2420,7 +2437,8 @@ const st = {
 }, Pa = {
   name: "amber",
   light: {
-    bgBase: "#fffefb",
+    navigation: "#fffdf6",
+    bgBase: "#f2f0e6",
     surface: "#fefcf6",
     borderDefault: "#e8e1d0",
     accentDefault: "#d97706",
@@ -2430,7 +2448,8 @@ const st = {
     infoDefault: "#2563eb"
   },
   dark: {
-    bgBase: "#171310",
+    navigation: "#0c0a06",
+    bgBase: "#151310",
     surface: "#1e1a15",
     borderDefault: "#3a3329",
     accentDefault: "#f59e0b",
@@ -2439,10 +2458,11 @@ const st = {
     dangerDefault: "#ef4444",
     infoDefault: "#3b82f6"
   }
-}, ut = {
+}, dt = {
   name: "ocean",
   light: {
-    bgBase: "#fbfdff",
+    navigation: "#ebf1ff",
+    bgBase: "#f1f4ff",
     surface: "#f6fafd",
     borderDefault: "#d9e4ec",
     accentDefault: "#0ea5e9",
@@ -2452,7 +2472,8 @@ const st = {
     infoDefault: "#2563eb"
   },
   dark: {
-    bgBase: "#0e1318",
+    navigation: "#060b14",
+    bgBase: "#0e1522",
     surface: "#141a20",
     borderDefault: "#243038",
     accentDefault: "#38bdf8",
@@ -2461,10 +2482,11 @@ const st = {
     dangerDefault: "#ef4444",
     infoDefault: "#3b82f6"
   }
-}, dt = {
+}, ft = {
   name: "slate",
   light: {
-    bgBase: "#fafbfc",
+    navigation: "#f7f8fa",
+    bgBase: "#eceef2",
     surface: "#f7f8fa",
     borderDefault: "#dde1e6",
     accentDefault: "#475569",
@@ -2474,7 +2496,8 @@ const st = {
     infoDefault: "#2563eb"
   },
   dark: {
-    bgBase: "#0f1116",
+    navigation: "#080a10",
+    bgBase: "#0e1118",
     surface: "#161920",
     borderDefault: "#2b3040",
     accentDefault: "#94a3b8",
@@ -2486,7 +2509,8 @@ const st = {
 }, Wa = {
   name: "sage",
   light: {
-    bgBase: "#fbfcfb",
+    navigation: "#f4f8f4",
+    bgBase: "#e8efe8",
     surface: "#f5f7f5",
     borderDefault: "#d8ddd6",
     accentDefault: "#5f8c6e",
@@ -2496,7 +2520,8 @@ const st = {
     infoDefault: "#2563eb"
   },
   dark: {
-    bgBase: "#101410",
+    navigation: "#060a06",
+    bgBase: "#0e140e",
     surface: "#171c17",
     borderDefault: "#2c372c",
     accentDefault: "#86b394",
@@ -2602,7 +2627,7 @@ const st = {
     shadowLg: "none",
     shadowXl: "none"
   }
-}, ft = {
+}, pt = {
   name: "subtle",
   light: {
     shadowNone: "none",
@@ -2618,14 +2643,14 @@ const st = {
     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)"
   }
-}, pt = {
+}, gt = {
   name: "elevated",
   light: {
     shadowNone: "none",
-    shadowSm: "rgba(17, 17, 26, 0.05) 0px 2px 8px, rgba(17, 17, 26, 0.03) 0px 4px 16px",
-    shadowMd: "rgba(17, 17, 26, 0.1) 0px 4px 16px, rgba(17, 17, 26, 0.05) 0px 8px 32px",
-    shadowLg: "rgba(17, 17, 26, 0.1) 0px 8px 24px, rgba(17, 17, 26, 0.08) 0px 16px 48px",
-    shadowXl: "rgba(17, 17, 26, 0.12) 0px 12px 32px, rgba(17, 17, 26, 0.1) 0px 24px 64px"
+    shadowSm: "0 2px 4px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.08)",
+    shadowMd: "0 4px 12px rgba(0, 0, 0, 0.15), 0 2px 4px rgba(0, 0, 0, 0.08)",
+    shadowLg: "0 8px 24px rgba(0, 0, 0, 0.15), 0 4px 8px rgba(0, 0, 0, 0.08)",
+    shadowXl: "0 16px 40px rgba(0, 0, 0, 0.18), 0 6px 12px rgba(0, 0, 0, 0.1)"
   },
   dark: {
     shadowNone: "none",
@@ -2634,7 +2659,7 @@ const st = {
     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)"
   }
-}, gt = {
+}, bt = {
   name: "liquidGlass",
   light: {
     shadowNone: "none",
@@ -2650,7 +2675,7 @@ const st = {
     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)"
   }
-}, bt = {
+}, xt = {
   name: "brutalist",
   light: {
     shadowNone: "none",
@@ -2666,30 +2691,30 @@ const st = {
     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)"
   }
-}, xt = {
+}, mt = {
   name: "neumorphic",
   light: {
     shadowNone: "none",
-    shadowSm: "3px 3px 8px #d1d5db, -3px -3px 8px #ffffff",
-    shadowMd: "5px 5px 14px #d1d5db, -5px -5px 14px #ffffff",
-    shadowLg: "8px 8px 20px #d1d5db, -8px -8px 20px #ffffff",
-    shadowXl: "12px 12px 28px #d1d5db, -12px -12px 28px #ffffff"
+    shadowSm: "0 8px 16px rgba(0, 0, 0, 0.12)",
+    shadowMd: "0 12px 24px rgba(0, 0, 0, 0.16)",
+    shadowLg: "0 20px 30px rgba(0, 0, 0, 0.2)",
+    shadowXl: "0 28px 40px rgba(0, 0, 0, 0.24)"
   },
   dark: {
     shadowNone: "none",
-    shadowSm: "3px 3px 10px color-mix(in srgb, var(--lucent-accent-default) 12%, transparent), -3px -3px 10px rgba(255, 255, 255, 0.03)",
-    shadowMd: "5px 5px 16px color-mix(in srgb, var(--lucent-accent-default) 15%, transparent), -5px -5px 16px rgba(255, 255, 255, 0.04)",
-    shadowLg: "8px 8px 24px color-mix(in srgb, var(--lucent-accent-default) 18%, transparent), -8px -8px 24px rgba(255, 255, 255, 0.05)",
-    shadowXl: "12px 12px 32px color-mix(in srgb, var(--lucent-accent-default) 22%, transparent), -12px -12px 32px rgba(255, 255, 255, 0.06)"
+    shadowSm: "0 8px 16px rgba(0, 0, 0, 0.4)",
+    shadowMd: "0 12px 24px rgba(0, 0, 0, 0.45)",
+    shadowLg: "0 20px 30px rgba(0, 0, 0, 0.5)",
+    shadowXl: "0 28px 40px rgba(0, 0, 0, 0.55)"
   }
-}, mt = {
+}, ht = {
   name: "natural",
   light: {
     shadowNone: "none",
-    shadowSm: "0 1px 1px rgba(0, 0, 0, 0.06), 0 2px 4px rgba(0, 0, 0, 0.06)",
-    shadowMd: "0 1px 2px rgba(0, 0, 0, 0.06), 0 2px 4px rgba(0, 0, 0, 0.06), 0 4px 8px rgba(0, 0, 0, 0.06)",
-    shadowLg: "0 1px 2px rgba(0, 0, 0, 0.05), 0 2px 4px rgba(0, 0, 0, 0.05), 0 4px 8px rgba(0, 0, 0, 0.05), 0 8px 16px rgba(0, 0, 0, 0.05)",
-    shadowXl: "0 1px 2px rgba(0, 0, 0, 0.04), 0 2px 4px rgba(0, 0, 0, 0.04), 0 4px 8px rgba(0, 0, 0, 0.04), 0 8px 16px rgba(0, 0, 0, 0.04), 0 16px 32px rgba(0, 0, 0, 0.04)"
+    shadowSm: "rgba(17, 17, 26, 0.05) 0px 2px 8px, rgba(17, 17, 26, 0.03) 0px 4px 16px",
+    shadowMd: "rgba(17, 17, 26, 0.1) 0px 4px 16px, rgba(17, 17, 26, 0.05) 0px 8px 32px",
+    shadowLg: "rgba(17, 17, 26, 0.1) 0px 8px 24px, rgba(17, 17, 26, 0.08) 0px 16px 48px",
+    shadowXl: "rgba(17, 17, 26, 0.12) 0px 12px 32px, rgba(17, 17, 26, 0.1) 0px 24px 64px"
   },
   dark: {
     shadowNone: "none",
@@ -2719,49 +2744,49 @@ const st = {
   palette: ve,
   shape: re,
   density: se,
-  shadow: ft
+  shadow: pt
 }, Na = {
   name: "enterprise",
-  palette: st,
+  palette: ot,
   shape: ye,
   density: ke,
   shadow: Ce
 }, Ea = {
   name: "playful",
-  palette: ct,
+  palette: it,
   shape: we,
   density: De,
-  shadow: pt
+  shadow: gt
 }, Aa = {
   name: "liquidGlass",
-  palette: ut,
+  palette: dt,
   shape: we,
   density: De,
-  shadow: gt
+  shadow: bt
 }, Oa = {
   name: "bento",
   palette: ve,
   shape: re,
   density: se,
-  shadow: mt
+  shadow: ht
 }, Xa = {
   name: "brutalist",
-  palette: it,
+  palette: ut,
   shape: ye,
   density: ke,
-  shadow: bt
+  shadow: xt
 }, ja = {
   name: "terminal",
-  palette: lt,
+  palette: ct,
   shape: ye,
   density: ke,
   shadow: Fe
 }, Ua = {
   name: "softUI",
-  palette: ot,
+  palette: lt,
   shape: we,
   density: se,
-  shadow: xt
+  shadow: mt
 }, qa = {
   name: "bloom",
   palette: ve,
@@ -2770,22 +2795,22 @@ const st = {
   shadow: Fe
 }, Ga = {
   name: "minimal",
-  palette: dt,
+  palette: ft,
   shape: re,
   density: se,
   shadow: Ce
 }, _a = {
-  default: st,
+  default: ot,
   brand: Ca,
   indigo: ve,
-  violet: ot,
-  emerald: lt,
+  violet: lt,
+  emerald: ct,
   teal: Fa,
-  rose: ct,
-  coral: it,
+  rose: it,
+  coral: ut,
   amber: Pa,
-  ocean: ut,
-  slate: dt,
+  ocean: dt,
+  slate: ft,
   sage: Wa
 }, Va = {
   sharp: ye,
@@ -2797,12 +2822,12 @@ const st = {
   spacious: De
 }, Ya = {
   flat: Ce,
-  subtle: ft,
-  elevated: pt,
-  liquidGlass: gt,
-  brutalist: bt,
-  neumorphic: xt,
-  natural: mt,
+  subtle: pt,
+  elevated: gt,
+  liquidGlass: bt,
+  brutalist: xt,
+  neumorphic: mt,
+  natural: ht,
   glow: Fe
 }, Za = {
   modern: Ha,
@@ -2838,12 +2863,12 @@ function an(e, t) {
     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));
   const o = {};
   if (s) {
-    const c = rt(s[t], t);
+    const c = st(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 ht = yt({
+const vt = wt({
   theme: "light",
   tokens: he
 });
@@ -2854,9 +2879,9 @@ function fn({
   anchors: a,
   children: n
 }) {
-  const r = Ve().replace(/:/g, ""), o = t ? an(t, e) : void 0, c = (() => {
+  const r = Ke().replace(/:/g, ""), o = t ? an(t, e) : void 0, c = (() => {
     if (a) {
-      const k = rt(a, e);
+      const k = st(a, e);
       if (o) {
         const v = {};
         for (const [b, m] of Object.entries(o))
@@ -2865,7 +2890,7 @@ function fn({
       }
       return k;
     }
-    const i = e === "dark" ? tt : he, d = o ? { ...o, ...s } : s, g = d ? { ...i, ...d } : i, h = d ? nt(d, g, e) : {}, f = (d == null ? void 0 : d.accentBorder) ?? (e === "light" ? z(g.accentDefault, -0.15) : z(g.accentDefault, 0.15)), w = (d == null ? void 0 : d.accentFg) ?? at(g.accentDefault), S = Ra(g.accentDefault, w);
+    const i = e === "dark" ? at : he, d = o ? { ...o, ...s } : s, g = d ? { ...i, ...d } : i, h = d ? rt(d, g, e) : {}, f = (d == null ? void 0 : d.accentBorder) ?? (e === "light" ? z(g.accentDefault, -0.15) : z(g.accentDefault, 0.15)), w = (d == null ? void 0 : d.accentFg) ?? nt(g.accentDefault), S = Ra(g.accentDefault, w);
     return {
       ...g,
       ...h,
@@ -2881,67 +2906,65 @@ function fn({
       var d;
       (d = document.getElementById(`lucent-tokens-${r}`)) == null || d.remove();
     };
-  }, [r, u]), /* @__PURE__ */ p(ht.Provider, { value: { theme: e, tokens: c }, children: n });
+  }, [r, u]), /* @__PURE__ */ p(vt.Provider, { value: { theme: e, tokens: c }, children: n });
 }
 function pn() {
-  return vt(ht);
+  return yt(vt);
 }
 export {
   ma as $,
   ve as A,
-  Ke as B,
-  ra as C,
+  Ye as B,
+  sa as C,
   he as D,
   Aa as E,
-  gt as F,
+  bt as F,
   ha as G,
   Ga as H,
   te as I,
   Ha as J,
-  mt as K,
+  ht as K,
   fn as L,
-  xt as M,
-  ut as N,
+  mt as M,
+  dt as N,
   we as O,
   Ea as P,
   an as Q,
-  ct as R,
-  Ze as S,
+  it as R,
+  Je as S,
   cn as T,
   re as U,
   ye as V,
   Ua as W,
   De as X,
-  ft as Y,
+  pt as Y,
   ja as Z,
   pn as _,
   z as a,
-  ua as a0,
-  ia as a1,
-  V as a2,
-  _ as a3,
-  Ra as a4,
+  da as a0,
+  ua as a1,
+  Ra as a2,
   on as b,
   de as c,
-  Ye as d,
+  Ze as d,
   un as e,
   dn as f,
-  at as g,
+  nt as g,
   ln as h,
   Oa as i,
   qa as j,
   Ca as k,
   Xa as l,
-  bt as m,
+  xt as m,
   ke as n,
-  rt as o,
-  tt as p,
+  st as o,
+  at as p,
   se as q,
-  st as r,
+  ot as r,
   xa as s,
-  nt as t,
-  pt as u,
-  lt as v,
+  rt as t,
+  gt as u,
+  ct as v,
   Na as w,
   Ce as x,
   $a as y,