npm - lucent-ui - Versions diffs - 0.16.0 → 0.17.0 - Mend

lucent-ui 0.16.0 → 0.17.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (9) hide show

package/dist/index.cjs +23 -23
package/dist/index.d.ts +2 -2
package/dist/index.js +433 -388
package/dist-cli/cli/entry.js +0 -0
package/dist-cli/cli/index.js +0 -0
package/dist-server/server/index.js +0 -0
package/dist-server/src/manifest/examples/button.manifest.js +32 -6
package/package.json +14 -16
package/dist-server/src/manifest/validate.test.js +0 -28

package/dist/index.js CHANGED Viewed

@@ -26,8 +26,19 @@ const Ft = {
     background: "var(--lucent-danger-default)",
     color: "#ffffff",
     border: "1px solid var(--lucent-danger-default)"
+  },
+  "danger-outline": {
+    background: "var(--lucent-surface)",
+    color: "var(--lucent-danger-text)",
+    border: "1px solid var(--lucent-danger-default)"
+  },
+  "danger-ghost": {
+    background: "transparent",
+    color: "var(--lucent-danger-text)",
+    border: "1px solid transparent"
   }
 }, Pt = {
+  "2xs": { height: "22px", padding: "0 var(--lucent-space-1)", fontSize: "var(--lucent-font-size-xs)", borderRadius: "var(--lucent-radius-md)" },
   xs: { height: "26px", padding: "0 var(--lucent-space-2)", fontSize: "var(--lucent-font-size-xs)" },
   sm: { height: "calc(var(--lucent-space-8) * 0.5 + 18px)", padding: "0 var(--lucent-space-3)", fontSize: "var(--lucent-font-size-sm)" },
   md: { height: "calc(var(--lucent-space-10) * 0.5 + 22px)", padding: "0 var(--lucent-space-4)", fontSize: "var(--lucent-font-size-md)" },
@@ -80,8 +91,8 @@ const Ft = {
         onMouseDown: (u) => {
           var m;
           if (!y) {
-            const f = e === "danger" ? "var(--lucent-danger-default)" : "var(--lucent-accent-default)";
-            u.currentTarget.style.transform = "translateY(1px)", u.currentTarget.style.boxShadow = `0 0 0 2px var(--lucent-surface), 0 0 0 4px ${f}`, u.currentTarget.dataset.pressed = "1";
+            const C = e === "danger" || e === "danger-outline" || e === "danger-ghost" ? "var(--lucent-danger-default)" : "var(--lucent-accent-default)";
+            u.currentTarget.style.transform = "translateY(1px)", u.currentTarget.style.boxShadow = `0 0 0 2px var(--lucent-surface), 0 0 0 4px ${C}`, u.currentTarget.dataset.pressed = "1";
           }
           (m = g.onMouseDown) == null || m.call(g, u);
         },
@@ -114,15 +125,17 @@ const Nt = {
   secondary: "0 4px 14px -2px var(--lucent-accent-subtle)",
   outline: "0 4px 14px -2px var(--lucent-accent-subtle)",
   ghost: "0 4px 14px -2px var(--lucent-accent-subtle)",
-  danger: "0 4px 14px -2px var(--lucent-danger-subtle)"
+  danger: "0 4px 14px -2px var(--lucent-danger-subtle)",
+  "danger-outline": "0 4px 14px -2px var(--lucent-danger-subtle)",
+  "danger-ghost": "0 4px 14px -2px var(--lucent-danger-subtle)"
 };
 function $t(e, t, a) {
-  e.style.transform = "translateY(-1px)", e.style.boxShadow = Nt[t], t === "primary" ? e.style.background = "var(--lucent-accent-hover)" : t === "secondary" ? e.style.background = "color-mix(in srgb, var(--lucent-accent-default) 10%, var(--lucent-surface-secondary))" : t === "outline" ? e.style.background = "color-mix(in srgb, var(--lucent-accent-default) 10%, var(--lucent-surface))" : t === "ghost" ? e.style.background = "color-mix(in srgb, var(--lucent-accent-default) 8%, var(--lucent-surface))" : t === "danger" && (e.style.background = "var(--lucent-danger-hover)", a !== !1 && (e.style.borderColor = "var(--lucent-danger-hover)"));
+  e.style.transform = "translateY(-1px)", e.style.boxShadow = Nt[t], t === "primary" ? e.style.background = "var(--lucent-accent-hover)" : t === "secondary" ? e.style.background = "color-mix(in srgb, var(--lucent-accent-default) 10%, var(--lucent-surface-secondary))" : t === "outline" ? e.style.background = "color-mix(in srgb, var(--lucent-accent-default) 10%, var(--lucent-surface))" : t === "ghost" ? e.style.background = "color-mix(in srgb, var(--lucent-accent-default) 8%, var(--lucent-surface))" : t === "danger" ? (e.style.background = "var(--lucent-danger-hover)", a !== !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))", a !== !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 Wt(e, t, a) {
-  e.style.transform = "", e.style.boxShadow = "", t === "primary" ? e.style.background = "var(--lucent-accent-default)" : t === "secondary" ? e.style.background = "var(--lucent-surface-secondary)" : t === "outline" ? e.style.background = "var(--lucent-surface)" : t === "ghost" ? e.style.background = "transparent" : t === "danger" && (e.style.background = "var(--lucent-danger-default)", a !== !1 && (e.style.borderColor = "var(--lucent-danger-default)"));
+  e.style.transform = "", e.style.boxShadow = "", t === "primary" ? e.style.background = "var(--lucent-accent-default)" : t === "secondary" ? e.style.background = "var(--lucent-surface-secondary)" : t === "outline" ? e.style.background = "var(--lucent-surface)" : t === "ghost" ? e.style.background = "transparent" : t === "danger" ? (e.style.background = "var(--lucent-danger-default)", a !== !1 && (e.style.borderColor = "var(--lucent-danger-default)")) : t === "danger-outline" ? (e.style.background = "var(--lucent-surface)", a !== !1 && (e.style.borderColor = "var(--lucent-danger-default)")) : t === "danger-ghost" && (e.style.background = "transparent");
 }
-const Ot = { xs: 10, sm: 12, md: 14, lg: 16 };
+const Ot = { "2xs": 8, xs: 10, sm: 12, md: 14, lg: 16 };
 function Ht({ size: e }) {
   const t = Ot[e];
   return /* @__PURE__ */ n("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__ */ n("polyline", { points: "6 9 12 15 18 9" }) });
@@ -140,23 +153,23 @@ const eo = {
   domain: "neutral",
   specVersion: "1.0",
   description: "A clickable control that triggers an action. The primary interactive primitive in Lucent UI.",
-  designIntent: 'Buttons communicate available actions. Variant conveys hierarchy: use "primary" for the single most important action in a view, "secondary" for supporting actions, "ghost" for low-emphasis actions in dense UIs, "outline" for bordered buttons with no fill, and "danger" exclusively for destructive or irreversible operations. Size should match surrounding content density — prefer "md" as the default, "sm" for toolbars or tables, and "xs" for compact UIs like customizer panels.',
+  designIntent: 'Buttons communicate available actions. Variant conveys hierarchy: use "primary" for the single most important action in a view, "secondary" for supporting actions, "ghost" for low-emphasis actions in dense UIs, "outline" for bordered buttons with no fill, and "danger" exclusively for destructive or irreversible operations. Use "danger-ghost" for low-emphasis destructive actions (red text, no fill) and "danger-outline" for bordered destructive buttons. Size should match surrounding content density — prefer "md" as the default, "sm" for toolbars or tables, "xs" for compact UIs like customizer panels, and "2xs" for ultra-dense inline controls (~22px height) such as table-inline actions or toolbar icon triggers.',
   props: [
     {
       name: "variant",
       type: "enum",
       required: !1,
       default: "primary",
-      description: "Visual style conveying action hierarchy.",
-      enumValues: ["primary", "secondary", "outline", "ghost", "danger"]
+      description: 'Visual style conveying action hierarchy. "primary" — filled accent for the single most important action. "secondary" — subtle accent-tinted fill for supporting actions. "outline" — bordered with no fill, for neutral secondary actions. "ghost" — transparent with no border, for low-emphasis or inline actions. "danger" — filled red for irreversible destructive actions (e.g. "Delete account"). "danger-outline" — red border + red text for destructive actions that need visual weight without a filled background. "danger-ghost" — red text only, for low-emphasis destructive actions (e.g. "Remove" in a list row).',
+      enumValues: ["primary", "secondary", "outline", "ghost", "danger", "danger-outline", "danger-ghost"]
     },
     {
       name: "size",
       type: "enum",
       required: !1,
       default: "md",
-      description: "Controls height and padding.",
-      enumValues: ["xs", "sm", "md", "lg"]
+      description: 'Controls height and padding. "lg" (48px) — hero sections, onboarding flows. "md" (42px) — default for most forms and dialogs. "sm" (34px) — toolbars, table headers, card actions. "xs" (26px) — compact UIs like customizer panels, inline controls. "2xs" (22px) — ultra-dense inline icon triggers, table-row actions, dashboard toolbar buttons.',
+      enumValues: ["2xs", "xs", "sm", "md", "lg"]
     },
     {
       name: "children",
@@ -265,6 +278,18 @@ const eo = {
     {
       title: "Dropdown trigger",
       code: '<Button variant="outline" chevron>Options</Button>'
+    },
+    {
+      title: "Bordered destructive action",
+      code: '<Button variant="danger-outline" onClick={handleRevoke}>Revoke access</Button>'
+    },
+    {
+      title: "Low-emphasis destructive action",
+      code: '<Button variant="danger-ghost" onClick={handleRemove}>Remove</Button>'
+    },
+    {
+      title: "Dense inline action",
+      code: '<Button variant="ghost" size="2xs" leftIcon={<RefreshIcon />}>Retry</Button>'
     }
   ],
   compositionGraph: [],
@@ -316,7 +341,7 @@ const eo = {
       whiteSpace: "nowrap",
       userSelect: "none",
       flexShrink: 0
-    }, M = { ...x, paddingLeft: ce[e], paddingRight: "2px" }, N = { ...x, paddingLeft: "2px", paddingRight: ce[e] };
+    }, z = { ...x, paddingLeft: ce[e], paddingRight: "2px" }, P = { ...x, paddingLeft: "2px", paddingRight: ce[e] };
     return /* @__PURE__ */ v("div", { style: { display: "flex", flexDirection: "column", gap: "var(--lucent-space-1)", width: "100%", ...d }, children: [
       t && /* @__PURE__ */ n(
         "label",
@@ -354,7 +379,7 @@ const eo = {
           },
           onMouseLeave: () => f(!1),
           children: [
-            l && /* @__PURE__ */ n("span", { style: M, children: l }),
+            l && /* @__PURE__ */ n("span", { style: z, children: l }),
             /* @__PURE__ */ v("div", { style: { position: "relative", flex: 1, display: "flex", alignItems: "center", minWidth: 0 }, children: [
               r && /* @__PURE__ */ n("span", { style: {
                 position: "absolute",
@@ -387,12 +412,12 @@ const eo = {
                   },
                   ...p,
                   onFocus: (k) => {
-                    var z;
-                    u(!0), (z = p.onFocus) == null || z.call(p, k);
+                    var M;
+                    u(!0), (M = p.onFocus) == null || M.call(p, k);
                   },
                   onBlur: (k) => {
-                    var z;
-                    u(!1), (z = p.onBlur) == null || z.call(p, k);
+                    var M;
+                    u(!1), (M = p.onBlur) == null || M.call(p, k);
                   }
                 }
               ),
@@ -404,7 +429,7 @@ const eo = {
                 alignItems: "center"
               }, children: i })
             ] }),
-            s && /* @__PURE__ */ n("span", { style: N, children: s })
+            s && /* @__PURE__ */ n("span", { style: P, children: s })
           ]
         }
       ),
@@ -533,20 +558,20 @@ const to = {
             ...b
           },
           onMouseEnter: (x) => {
-            var M;
-            !f && x.currentTarget !== document.activeElement && (x.currentTarget.style.borderColor = m ? "var(--lucent-danger-default)" : "var(--lucent-border-strong)"), (M = h.onMouseEnter) == null || M.call(h, x);
+            var z;
+            !f && x.currentTarget !== document.activeElement && (x.currentTarget.style.borderColor = m ? "var(--lucent-danger-default)" : "var(--lucent-border-strong)"), (z = h.onMouseEnter) == null || z.call(h, x);
           },
           onMouseLeave: (x) => {
-            var M;
-            !f && x.currentTarget !== document.activeElement && (x.currentTarget.style.borderColor = m ? "var(--lucent-danger-default)" : "var(--lucent-border-default)"), (M = h.onMouseLeave) == null || M.call(h, x);
+            var z;
+            !f && x.currentTarget !== document.activeElement && (x.currentTarget.style.borderColor = m ? "var(--lucent-danger-default)" : "var(--lucent-border-default)"), (z = h.onMouseLeave) == null || z.call(h, x);
           },
           onFocus: (x) => {
-            var M;
-            f || (x.currentTarget.style.borderColor = m ? "var(--lucent-danger-default)" : "var(--lucent-focus-ring)", x.currentTarget.style.boxShadow = `0 0 0 3px ${m ? "var(--lucent-danger-subtle)" : "var(--lucent-accent-subtle)"}`, (M = h.onFocus) == null || M.call(h, x));
+            var z;
+            f || (x.currentTarget.style.borderColor = m ? "var(--lucent-danger-default)" : "var(--lucent-focus-ring)", x.currentTarget.style.boxShadow = `0 0 0 3px ${m ? "var(--lucent-danger-subtle)" : "var(--lucent-accent-subtle)"}`, (z = h.onFocus) == null || z.call(h, x));
           },
           onBlur: (x) => {
-            var M;
-            f || (x.currentTarget.style.borderColor = m ? "var(--lucent-danger-default)" : "var(--lucent-border-default)", x.currentTarget.style.boxShadow = "none", (M = h.onBlur) == null || M.call(h, x));
+            var z;
+            f || (x.currentTarget.style.borderColor = m ? "var(--lucent-danger-default)" : "var(--lucent-border-default)", x.currentTarget.style.boxShadow = "none", (z = h.onBlur) == null || z.call(h, x));
           },
           ...h
         }
@@ -1147,11 +1172,11 @@ const uo = {
     style: p,
     ...b
   }, h) => {
-    const g = j(null), T = c ?? `lucent-checkbox-${Math.random().toString(36).slice(2, 7)}`, y = ln[t], u = i !== void 0, [m, f] = D(l ?? !1), [C, I] = D(!1), x = u ? !!i : m, M = j(x), [N, k] = D(0);
+    const g = j(null), T = c ?? `lucent-checkbox-${Math.random().toString(36).slice(2, 7)}`, y = ln[t], u = i !== void 0, [m, f] = D(l ?? !1), [C, I] = D(!1), x = u ? !!i : m, z = j(x), [P, k] = D(0);
     J(() => {
-      !s && M.current !== x && (M.current = x, k((q) => q + 1));
+      !s && z.current !== x && (z.current = x, k((q) => q + 1));
     }, [x, s]);
-    const z = ie(
+    const M = ie(
       (q) => {
         g.current = q, typeof h == "function" ? h(q) : h && (h.current = q);
       },
@@ -1160,7 +1185,7 @@ const uo = {
     J(() => {
       g.current && (g.current.indeterminate = a);
     }, [a]);
-    const V = (q) => {
+    const W = (q) => {
       u || f(q.target.checked), d == null || d(q);
     }, L = s ? "var(--lucent-text-disabled)" : "var(--lucent-text-on-accent)", A = {
       width: y,
@@ -1178,8 +1203,8 @@ const uo = {
       flexShrink: 0,
       transition: "background var(--lucent-duration-fast) var(--lucent-easing-default), border-color var(--lucent-duration-fast) var(--lucent-easing-default)",
       // Re-key forces the animation to restart on every toggle.
-      animation: N > 0 ? "lucent-cb-pop 220ms cubic-bezier(0.34, 1.56, 0.64, 1) forwards" : void 0
-    }, R = /* @__PURE__ */ v(
+      animation: P > 0 ? "lucent-cb-pop 220ms cubic-bezier(0.34, 1.56, 0.64, 1) forwards" : void 0
+    }, N = /* @__PURE__ */ v(
       "label",
       {
         style: {
@@ -1197,12 +1222,12 @@ const uo = {
           /* @__PURE__ */ n(
             "input",
             {
-              ref: z,
+              ref: M,
               type: "checkbox",
               id: T,
               checked: u ? i : m,
               disabled: s,
-              onChange: V,
+              onChange: W,
               style: { position: "absolute", opacity: 0, width: 0, height: 0, margin: 0, pointerEvents: "none" },
               ...b
             }
@@ -1230,7 +1255,7 @@ const uo = {
                 children: /* @__PURE__ */ n("path", { d: "M2 5H8", stroke: L, strokeWidth: 1.5, strokeLinecap: "round" })
               }
             )
-          ] }, N),
+          ] }, P),
           (e || r) && /* @__PURE__ */ v("span", { style: { display: "flex", flexDirection: "column" }, children: [
             e && /* @__PURE__ */ n("span", { style: {
               fontWeight: r ? "var(--lucent-font-weight-medium)" : "var(--lucent-font-weight-regular)",
@@ -1267,12 +1292,12 @@ const uo = {
             ...p
           },
           onClick: (q) => {
-            var W;
-            s || q.target === q.currentTarget && ((W = g.current) == null || W.click());
+            var $;
+            s || q.target === q.currentTarget && (($ = g.current) == null || $.click());
           },
-          children: R
+          children: N
         }
-      ) : R
+      ) : N
     ] });
   }
 );
@@ -1406,18 +1431,18 @@ const pn = { sm: 14, md: 16, lg: 20 }, fn = { sm: "calc(var(--lucent-space-8) *
 function fo({ value: e, label: t, size: a = "md", contained: o = !1, helperText: r, disabled: i, id: l, onChange: s, checked: c, style: d, ...p }) {
   const b = je(ut), h = l ?? `lucent-radio-${Math.random().toString(36).slice(2, 7)}`, g = pn[a], [T, y] = D(!1), u = i ?? (b == null ? void 0 : b.disabled) ?? !1, m = b ? b.value === e : !!c, f = j(m), [C, I] = D(0);
   J(() => {
-    !u && f.current !== m && (f.current = m, I((z) => z + 1));
+    !u && f.current !== m && (f.current = m, I((M) => M + 1));
   }, [m, u]);
-  const x = (z) => {
-    b == null || b.onChange(e), s == null || s(z);
-  }, M = {
+  const x = (M) => {
+    b == null || b.onChange(e), s == null || s(M);
+  }, z = {
     width: g / 2,
     height: g / 2,
     borderRadius: "50%",
     background: u ? "var(--lucent-text-disabled)" : "var(--lucent-text-on-accent)",
     animation: m ? "lucent-radio-dot 200ms cubic-bezier(0.34, 1.56, 0.64, 1) forwards" : void 0,
     opacity: m ? 1 : 0
-  }, N = {
+  }, P = {
     width: g,
     height: g,
     borderRadius: "50%",
@@ -1458,7 +1483,7 @@ function fo({ value: e, label: t, size: a = "md", contained: o = !1, helperText:
             ...p
           }
         ),
-        /* @__PURE__ */ n("span", { "aria-hidden": !0, style: N, children: /* @__PURE__ */ n("span", { style: M }) }, C),
+        /* @__PURE__ */ n("span", { "aria-hidden": !0, style: P, children: /* @__PURE__ */ n("span", { style: z }) }, C),
         t || r ? /* @__PURE__ */ v("span", { style: { display: "flex", flexDirection: "column" }, children: [
           t && /* @__PURE__ */ n("span", { style: {
             fontWeight: r ? "var(--lucent-font-weight-medium)" : "var(--lucent-font-weight-regular)",
@@ -1491,10 +1516,10 @@ function fo({ value: e, label: t, size: a = "md", contained: o = !1, helperText:
           cursor: u ? "not-allowed" : "pointer",
           ...d
         },
-        onClick: (z) => {
-          if (!u && z.target === z.currentTarget) {
-            const V = z.currentTarget.querySelector("input");
-            V == null || V.click();
+        onClick: (M) => {
+          if (!u && M.target === M.currentTarget) {
+            const W = M.currentTarget.querySelector("input");
+            W == null || W.click();
           }
         },
         children: k
@@ -1643,45 +1668,61 @@ function go({
   style: p,
   ...b
 }) {
-  const h = c ?? `lucent-toggle-${Math.random().toString(36).slice(2, 7)}`, g = a !== void 0, [T, y] = D(o ?? !1), u = g ? !!a : T, [m, f] = D(!1), C = j(u), [I, x] = D(0);
+  const h = c ?? `lucent-toggle-${Math.random().toString(36).slice(2, 7)}`, g = a !== void 0, [T, y] = D(o ?? !1), u = g ? !!a : T, [m, f] = D(!1), C = j(u), [I, x] = D(0), [z, P] = D(!1);
   J(() => {
-    !s && C.current !== u && (C.current = u, x((R) => R + 1));
+    if (!s && C.current !== u) {
+      C.current = u, x((G) => G + 1), P(!0);
+      const $ = setTimeout(() => P(!1), 150);
+      return () => clearTimeout($);
+    }
   }, [u, s]);
-  const { track: [M, N], thumb: k } = gn[t], z = u ? M - k - 2 : 2, V = (R) => {
-    g || y(R.target.checked), d == null || d(R);
-  }, L = /* @__PURE__ */ n(
+  const { track: [k, M], thumb: W } = gn[t], L = u ? k - W - 2 : 2, A = ($) => {
+    g || y($.target.checked), d == null || d($);
+  }, N = /* @__PURE__ */ v(
     "span",
     {
       "aria-hidden": !0,
       style: {
         position: "relative",
-        width: M,
-        height: N,
-        borderRadius: N / 2,
-        background: s ? "var(--lucent-surface-secondary)" : u ? "var(--lucent-accent-default)" : "var(--lucent-control-track)",
-        flexShrink: 0,
-        transition: "background var(--lucent-duration-fast) var(--lucent-easing-default)",
-        animation: I > 0 ? `lucent-toggle-pop 240ms ${Ke} forwards` : void 0
+        width: k,
+        height: M,
+        borderRadius: M / 2,
+        flexShrink: 0
       },
-      children: /* @__PURE__ */ n(
-        "span",
-        {
-          style: {
-            position: "absolute",
-            top: 2,
-            left: z,
-            width: k,
-            height: k,
-            borderRadius: "50%",
-            background: "#ffffff",
-            boxShadow: "0 1px 3px rgb(0 0 0 / 0.2)",
-            transition: `left 260ms ${Ke}`
+      children: [
+        /* @__PURE__ */ n(
+          "span",
+          {
+            style: {
+              position: "absolute",
+              inset: 0,
+              borderRadius: "inherit",
+              background: s ? "var(--lucent-surface-secondary)" : u ? "var(--lucent-accent-default)" : "var(--lucent-control-track)",
+              transition: "background var(--lucent-duration-fast) var(--lucent-easing-default)",
+              animation: I > 0 ? `lucent-toggle-pop 240ms ${Ke} forwards` : void 0
+            }
+          },
+          I
+        ),
+        /* @__PURE__ */ n(
+          "span",
+          {
+            style: {
+              position: "absolute",
+              top: 2,
+              left: L,
+              width: z ? W * 1.3 : W,
+              height: W,
+              borderRadius: W,
+              background: "#ffffff",
+              boxShadow: "0 1px 3px rgb(0 0 0 / 0.2)",
+              transition: `left 260ms ${Ke}, width 200ms cubic-bezier(0.22, 1, 0.36, 1)`
+            }
           }
-        }
-      )
-    },
-    I
-  ), A = /* @__PURE__ */ v(
+        )
+      ]
+    }
+  ), q = /* @__PURE__ */ v(
     "label",
     {
       style: {
@@ -1705,13 +1746,13 @@ function go({
             id: h,
             checked: g ? a : T,
             disabled: s,
-            onChange: V,
+            onChange: A,
             "aria-checked": u,
             style: { position: "absolute", opacity: 0, width: 0, height: 0, margin: 0, pointerEvents: "none" },
             ...b
           }
         ),
-        l === "left" && L,
+        l === "left" && N,
         e || i ? /* @__PURE__ */ v("span", { style: { display: "flex", flexDirection: "column", flex: l === "right" ? 1 : void 0 }, children: [
           e && /* @__PURE__ */ n("span", { style: {
             fontWeight: i ? "var(--lucent-font-weight-medium)" : "var(--lucent-font-weight-regular)",
@@ -1723,7 +1764,7 @@ function go({
             marginTop: "2px"
           }, children: i })
         ] }) : null,
-        l === "right" && L
+        l === "right" && N
       ]
     }
   );
@@ -1745,15 +1786,15 @@ function go({
           cursor: s ? "not-allowed" : "pointer",
           ...p
         },
-        onClick: (R) => {
-          if (!s && R.target === R.currentTarget) {
-            const q = R.currentTarget.querySelector("input");
-            q == null || q.click();
+        onClick: ($) => {
+          if (!s && $.target === $.currentTarget) {
+            const G = $.currentTarget.querySelector("input");
+            G == null || G.click();
           }
         },
-        children: A
+        children: q
       }
-    ) : A
+    ) : q
   ] });
 }
 const bo = {
@@ -3042,11 +3083,11 @@ function zo({
                     transition: "color var(--lucent-duration-fast) var(--lucent-easing-default)",
                     whiteSpace: "nowrap"
                   },
-                  onMouseEnter: (M) => {
-                    x || (M.currentTarget.style.color = "var(--lucent-text-primary)");
+                  onMouseEnter: (z) => {
+                    x || (z.currentTarget.style.color = "var(--lucent-text-primary)");
                   },
-                  onMouseLeave: (M) => {
-                    x || (M.currentTarget.style.color = "var(--lucent-text-secondary)");
+                  onMouseLeave: (z) => {
+                    x || (z.currentTarget.style.color = "var(--lucent-text-secondary)");
                   },
                   children: [
                     C.icon !== void 0 && /* @__PURE__ */ n("span", { style: { display: "inline-flex", alignItems: "center" }, children: C.icon }),
@@ -3431,14 +3472,18 @@ const Eo = {
     ariaAttributes: ['scope="col" on th cells'],
     keyboardInteractions: ["Standard browser table navigation"]
   }
-}, Je = { sm: "30px", md: "36px", lg: "42px" }, Hn = {
+}, Je = {
+  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)"
+}, Hn = {
   sm: "var(--lucent-font-size-sm)",
-  md: "var(--lucent-font-size-sm)",
-  lg: "var(--lucent-font-size-md)"
+  md: "var(--lucent-font-size-md)",
+  lg: "var(--lucent-font-size-lg)"
 }, Vn = {
-  sm: "var(--lucent-space-2)",
-  md: "var(--lucent-space-3)",
-  lg: "var(--lucent-space-4)"
+  sm: "var(--lucent-space-3)",
+  md: "var(--lucent-space-4)",
+  lg: "var(--lucent-space-5)"
 };
 function ft({
   options: e,
@@ -3506,7 +3551,7 @@ function ft({
               background: "var(--lucent-surface)",
               borderRadius: "var(--lucent-radius-lg)",
               boxShadow: "var(--lucent-shadow-sm)",
-              transition: g.animate ? "left var(--lucent-duration-base) var(--lucent-easing-default), width var(--lucent-duration-base) var(--lucent-easing-default)" : "none",
+              transition: g.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"
             }
@@ -3804,21 +3849,21 @@ function ea({
   id: s,
   style: c
 }) {
-  var P, F;
+  var F, R;
   const d = o === "sm" ? 24 : 40, p = Ce(), b = s ?? p, [h, g] = D(!1), [T, y] = D("hex"), [u, m] = D(0), [f, C] = D(() => {
     const w = e ? be(e) ?? { r: 0, g: 0, b: 0, a: 1 } : { r: 0, g: 0, b: 0, a: 1 };
     return ee(w);
-  }), [I, x] = D(() => ge(f).slice(1).toUpperCase()), M = j(null), N = j(null), k = j(null), [z, V] = D({ top: 0, left: 0 });
+  }), [I, x] = D(() => ge(f).slice(1).toUpperCase()), z = j(null), P = j(null), k = j(null), [M, W] = D({ top: 0, left: 0 });
   Ee(() => {
-    if (!h || !M.current) return;
-    const w = M.current.getBoundingClientRect();
+    if (!h || !z.current) return;
+    const w = z.current.getBoundingClientRect();
     let E = w.left;
     const B = w.bottom + 8;
     if (k.current) {
-      const O = k.current.offsetWidth;
-      E + O > window.innerWidth && (E = w.right - O);
+      const H = k.current.offsetWidth;
+      E + H > window.innerWidth && (E = w.right - H);
     }
-    V({ top: B, left: E });
+    W({ top: B, left: E });
   }, [h]), J(() => {
     if (!e) return;
     const w = be(e);
@@ -3826,9 +3871,9 @@ function ea({
   }, [e]), J(() => {
     if (!h) return;
     const w = (E) => {
-      var O, X;
+      var H, X;
       const B = E.target;
-      (O = M.current) != null && O.contains(B) || (X = k.current) != null && X.contains(B) || g(!1);
+      (H = z.current) != null && H.contains(B) || (X = k.current) != null && X.contains(B) || g(!1);
     };
     return document.addEventListener("mousedown", w), () => document.removeEventListener("mousedown", w);
   }, [h]);
@@ -3837,16 +3882,16 @@ function ea({
     const E = ge(w);
     x(E.slice(1).toUpperCase()), t == null || t(E);
   }, [t]), A = ie((w) => {
-    const E = N.current.getBoundingClientRect(), B = Math.round(De((w.clientX - E.left) / E.width, 0, 1) * 100), O = Math.round((1 - De((w.clientY - E.top) / E.height, 0, 1)) * 100);
-    L({ ...f, s: B, v: O });
-  }, [f, L]), R = ie(async () => {
+    const E = P.current.getBoundingClientRect(), B = Math.round(De((w.clientX - E.left) / E.width, 0, 1) * 100), H = Math.round((1 - De((w.clientY - E.top) / E.height, 0, 1)) * 100);
+    L({ ...f, s: B, v: H });
+  }, [f, L]), N = ie(async () => {
     if ("EyeDropper" in window)
       try {
         const w = await new window.EyeDropper().open(), E = be(w.sRGBHex);
         E && L(ee(E));
       } catch {
       }
-  }, [L]), q = mt(f), W = Xn(q.r, q.g, q.b), _ = ge(f), Q = ge({ ...f, a: 1 }), $ = Math.round(f.a * 100), K = [
+  }, [L]), q = mt(f), $ = Xn(q.r, q.g, q.b), G = ge(f), Q = ge({ ...f, a: 1 }), O = Math.round(f.a * 100), K = [
     { id: "hex", label: "Hex" },
     { id: "rgb", label: "RGB" },
     { id: "hsl", label: "HSL" },
@@ -3855,7 +3900,7 @@ function ea({
   return /* @__PURE__ */ v(
     "div",
     {
-      ref: M,
+      ref: z,
       style: { display: "inline-flex", flexDirection: r ? "row" : "column", alignItems: r ? "center" : void 0, gap: "var(--lucent-space-1)", position: "relative", ...c },
       children: [
         /* @__PURE__ */ n("style", { children: `
@@ -3918,8 +3963,8 @@ function ea({
               "aria-label": "Color picker",
               style: {
                 position: "fixed",
-                top: z.top,
-                left: z.left,
+                top: M.top,
+                left: M.left,
                 zIndex: 1e3,
                 background: "var(--lucent-surface)",
                 border: "1px solid var(--lucent-border-default)",
@@ -3934,7 +3979,7 @@ function ea({
                 /* @__PURE__ */ v(
                   "div",
                   {
-                    ref: N,
+                    ref: P,
                     style: {
                       position: "relative",
                       height: 160,
@@ -4029,7 +4074,7 @@ function ea({
                       {
                         variant: "secondary",
                         size: "sm",
-                        onClick: R,
+                        onClick: N,
                         disabled: !S,
                         title: S ? "Pick color from screen" : "Not supported in this browser",
                         leftIcon: /* @__PURE__ */ n(Qn, {}),
@@ -4047,8 +4092,8 @@ function ea({
                           x(E.toUpperCase());
                           const B = be(`#${E}`);
                           if (B) {
-                            const O = ee(B);
-                            C(O), t == null || t(Oe(B));
+                            const H = ee(B);
+                            C(H), t == null || t(Oe(B));
                           }
                         },
                         spellCheck: !1,
@@ -4063,7 +4108,7 @@ function ea({
                         size: "sm",
                         type: "number",
                         suffix: "%",
-                        value: $,
+                        value: O,
                         min: 0,
                         max: 100,
                         onChange: (w) => {
@@ -4079,37 +4124,37 @@ function ea({
                     { label: "R", val: q.r, max: 255, fn: (w) => L(ee({ ...q, r: w })) },
                     { label: "G", val: q.g, max: 255, fn: (w) => L(ee({ ...q, g: w })) },
                     { label: "B", val: q.b, max: 255, fn: (w) => L(ee({ ...q, b: w })) },
-                    { label: "A", val: $, max: 100, fn: (w) => L({ ...f, a: w / 100 }) }
-                  ].map(({ label: w, val: E, max: B, fn: O }) => /* @__PURE__ */ n(oe, { size: "sm", type: "number", prefix: w, value: E, min: 0, max: B, onChange: (X) => {
-                    const G = +X.target.value;
-                    !isNaN(G) && G >= 0 && G <= B && O(G);
+                    { label: "A", val: O, max: 100, fn: (w) => L({ ...f, a: w / 100 }) }
+                  ].map(({ label: w, val: E, max: B, fn: H }) => /* @__PURE__ */ n(oe, { size: "sm", type: "number", prefix: w, value: E, min: 0, max: B, onChange: (X) => {
+                    const _ = +X.target.value;
+                    !isNaN(_) && _ >= 0 && _ <= B && H(_);
                   }, className: "lucent-cp-field", style: { flex: 1 } }, w)) }),
                   T === "hsl" && /* @__PURE__ */ n("div", { style: { display: "flex", gap: 6 }, children: [
-                    { label: "H", val: W.h, max: 360, fn: (w) => {
-                      const { r: E, g: B, b: O } = Te(w, W.s, W.l);
-                      L(ee({ r: E, g: B, b: O, a: f.a }));
+                    { label: "H", val: $.h, max: 360, fn: (w) => {
+                      const { r: E, g: B, b: H } = Te(w, $.s, $.l);
+                      L(ee({ r: E, g: B, b: H, a: f.a }));
                     } },
-                    { label: "S", val: W.s, max: 100, fn: (w) => {
-                      const { r: E, g: B, b: O } = Te(W.h, w, W.l);
-                      L(ee({ r: E, g: B, b: O, a: f.a }));
+                    { label: "S", val: $.s, max: 100, fn: (w) => {
+                      const { r: E, g: B, b: H } = Te($.h, w, $.l);
+                      L(ee({ r: E, g: B, b: H, a: f.a }));
                     } },
-                    { label: "L", val: W.l, max: 100, fn: (w) => {
-                      const { r: E, g: B, b: O } = Te(W.h, W.s, w);
-                      L(ee({ r: E, g: B, b: O, a: f.a }));
+                    { label: "L", val: $.l, max: 100, fn: (w) => {
+                      const { r: E, g: B, b: H } = Te($.h, $.s, w);
+                      L(ee({ r: E, g: B, b: H, a: f.a }));
                     } },
-                    { label: "A", val: $, max: 100, fn: (w) => L({ ...f, a: w / 100 }) }
-                  ].map(({ label: w, val: E, max: B, fn: O }) => /* @__PURE__ */ n(oe, { size: "sm", type: "number", prefix: w, value: E, min: 0, max: B, onChange: (X) => {
-                    const G = +X.target.value;
-                    !isNaN(G) && G >= 0 && G <= B && O(G);
+                    { label: "A", val: O, max: 100, fn: (w) => L({ ...f, a: w / 100 }) }
+                  ].map(({ label: w, val: E, max: B, fn: H }) => /* @__PURE__ */ n(oe, { size: "sm", type: "number", prefix: w, value: E, min: 0, max: B, onChange: (X) => {
+                    const _ = +X.target.value;
+                    !isNaN(_) && _ >= 0 && _ <= B && H(_);
                   }, className: "lucent-cp-field", style: { flex: 1 } }, w)) }),
                   T === "hsb" && /* @__PURE__ */ n("div", { style: { display: "flex", gap: 6 }, children: [
                     { label: "H", val: f.h, max: 360, fn: (w) => L({ ...f, h: w }) },
                     { label: "S", val: f.s, max: 100, fn: (w) => L({ ...f, s: w }) },
                     { label: "B", val: f.v, max: 100, fn: (w) => L({ ...f, v: w }) },
-                    { label: "A", val: $, max: 100, fn: (w) => L({ ...f, a: w / 100 }) }
-                  ].map(({ label: w, val: E, max: B, fn: O }) => /* @__PURE__ */ n(oe, { size: "sm", type: "number", prefix: w, value: E, min: 0, max: B, onChange: (X) => {
-                    const G = +X.target.value;
-                    !isNaN(G) && G >= 0 && G <= B && O(G);
+                    { label: "A", val: O, max: 100, fn: (w) => L({ ...f, a: w / 100 }) }
+                  ].map(({ label: w, val: E, max: B, fn: H }) => /* @__PURE__ */ n(oe, { size: "sm", type: "number", prefix: w, value: E, min: 0, max: B, onChange: (X) => {
+                    const _ = +X.target.value;
+                    !isNaN(_) && _ >= 0 && _ <= B && H(_);
                   }, className: "lucent-cp-field", style: { flex: 1 } }, w)) }),
                   l.length > 0 && /* @__PURE__ */ v("div", { style: { display: "flex", flexDirection: "column", gap: 8 }, children: [
                     l.length > 1 && /* @__PURE__ */ n(
@@ -4126,9 +4171,9 @@ function ea({
                       fontWeight: "var(--lucent-font-weight-medium)",
                       color: "var(--lucent-text-secondary)",
                       fontFamily: "var(--lucent-font-family-base)"
-                    }, children: (P = l[0]) == null ? void 0 : P.label }),
-                    /* @__PURE__ */ n("div", { style: { display: "flex", gap: 6, flexWrap: "wrap" }, children: (((F = l[u]) == null ? void 0 : F.colors) ?? []).map((w) => {
-                      const E = Ge(w).toLowerCase() === _.slice(0, 7).toLowerCase();
+                    }, children: (F = l[0]) == null ? void 0 : F.label }),
+                    /* @__PURE__ */ n("div", { style: { display: "flex", gap: 6, flexWrap: "wrap" }, children: (((R = l[u]) == null ? void 0 : R.colors) ?? []).map((w) => {
+                      const E = Ge(w).toLowerCase() === G.slice(0, 7).toLowerCase();
                       return /* @__PURE__ */ n(
                         Se,
                         {
@@ -4515,9 +4560,9 @@ function Po({
     c == null || c(k), T(!1);
   }, x = () => {
     m.current = setTimeout(() => T(!1), 150);
-  }, M = () => {
+  }, z = () => {
     m.current && clearTimeout(m.current), T(!0);
-  }, N = d ? /* @__PURE__ */ n(on, { size: "sm" }) : e ? /* @__PURE__ */ n(
+  }, P = d ? /* @__PURE__ */ n(on, { size: "sm" }) : e ? /* @__PURE__ */ n(
     "button",
     {
       type: "button",
@@ -4554,8 +4599,8 @@ function Po({
         placeholder: a,
         disabled: p,
         leftElement: /* @__PURE__ */ n(na, { size: ta[o] }),
-        rightElement: N ?? void 0,
-        onFocus: M,
+        rightElement: P ?? void 0,
+        onFocus: z,
         onBlur: x,
         ...r !== void 0 && { label: r },
         ...i !== void 0 && { helperText: i },
@@ -4578,18 +4623,18 @@ function Po({
           boxShadow: "var(--lucent-shadow-md)",
           overflow: "hidden"
         },
-        children: s.map((k, z) => /* @__PURE__ */ n(
+        children: s.map((k, M) => /* @__PURE__ */ n(
           "div",
           {
             role: "option",
             "aria-selected": !1,
             onMouseDown: () => I(k),
-            onMouseEnter: () => u(z),
+            onMouseEnter: () => u(M),
             onMouseLeave: () => u(null),
             style: {
               padding: "var(--lucent-space-2) var(--lucent-space-3)",
               cursor: "pointer",
-              background: y === z ? "var(--lucent-surface-secondary)" : "transparent",
+              background: y === M ? "var(--lucent-surface-secondary)" : "transparent",
               transition: "background var(--lucent-duration-fast) var(--lucent-easing-default)"
             },
             children: /* @__PURE__ */ n(U, { as: "span", size: "md", children: k.label })
@@ -4806,32 +4851,32 @@ function $o({
   selected: T,
   media: y
 }) {
-  const u = la[e], m = e === "combo", f = i ?? (m ? "md" : u.shadowDefault), { py: C, px: I } = ra[r], x = `${C} ${I}`, M = oa[l], N = d != null, k = c != null || N, z = (h ?? !1) && k, V = N ? "a" : k ? "button" : "div", [L, A] = D(!1), [R, q] = D(!1), [W, _] = D(!1), Q = (T ?? !1) && !z, $ = Q ? pa : void 0, K = fa(u, T ?? !1, z);
+  const u = la[e], m = e === "combo", f = i ?? (m ? "md" : u.shadowDefault), { py: C, px: I } = ra[r], x = `${C} ${I}`, z = oa[l], P = d != null, k = c != null || P, M = (h ?? !1) && k, W = P ? "a" : k ? "button" : "div", [L, A] = D(!1), [N, q] = D(!1), [$, G] = D(!1), Q = (T ?? !1) && !M, O = Q ? pa : void 0, K = fa(u, T ?? !1, M);
   let S;
-  m ? S = $ : k && !z ? W ? S = ue(ua, $) : R ? S = ue(da, $) : L ? S = ue(ca, ve[f], $) : S = ue(ve[f], $) : S = ue(ve[f], $);
-  const P = {
+  m ? S = O : k && !M ? $ ? S = ue(ua, O) : N ? S = ue(da, O) : L ? S = ue(ca, ve[f], O) : S = ue(ve[f], O) : S = ue(ve[f], O);
+  const F = {
     display: "flex",
     flexDirection: "column",
     background: K,
     border: u.border,
-    borderRadius: M,
+    borderRadius: z,
     // Outer box-shadow rings (selected, focus) get clipped by overflow:hidden,
     // so we switch to overflow:visible when a ring is active.
-    overflow: Q || k && R ? "visible" : "hidden",
+    overflow: Q || k && N ? "visible" : "hidden",
     boxSizing: "border-box",
     position: "relative",
     ...S !== void 0 && { boxShadow: S },
     // Interactive transform
-    ...k && !z && W && { transform: "translateY(1px)" },
-    ...k && !z && L && !W && { transform: "translateY(-1px)" },
+    ...k && !M && $ && { transform: "translateY(1px)" },
+    ...k && !M && L && !$ && { transform: "translateY(-1px)" },
     // Interactive base styles
     ...k && {
-      cursor: z ? "not-allowed" : "pointer",
+      cursor: M ? "not-allowed" : "pointer",
       outline: "none",
       transition: sa
     },
     // Button UA reset
-    ...k && !N && {
+    ...k && !P && {
       padding: 0,
       font: "inherit",
       textAlign: "inherit",
@@ -4839,45 +4884,45 @@ function $o({
       background: K
     },
     // Link reset
-    ...N && {
+    ...P && {
       textDecoration: "none",
       color: "inherit"
     },
     // Disabled
-    ...z && {
+    ...M && {
       opacity: 0.6,
       pointerEvents: "none"
     },
     ...s
   };
   return /* @__PURE__ */ v(
-    V,
+    W,
     {
-      style: P,
-      ...k && !z ? {
+      style: F,
+      ...k && !M ? {
         onMouseEnter: () => A(!0),
         onMouseLeave: () => {
-          A(!1), _(!1);
+          A(!1), G(!1);
         },
-        onMouseDown: () => _(!0),
-        onMouseUp: () => _(!1),
+        onMouseDown: () => G(!0),
+        onMouseUp: () => G(!1),
         onFocus: () => q(!0),
         onBlur: () => {
-          q(!1), _(!1);
+          q(!1), G(!1);
         }
       } : {},
-      ...N && {
-        href: z ? void 0 : d,
+      ...P && {
+        href: M ? void 0 : d,
         ...p !== void 0 && { target: p },
         ...b !== void 0 && { rel: b }
       },
-      ...!N && k && {
+      ...!P && k && {
         type: "button",
-        ...z && { disabled: !0 }
+        ...M && { disabled: !0 }
       },
-      ...c !== void 0 && !z && { onClick: c },
+      ...c !== void 0 && !M && { onClick: c },
       ...k && T !== void 0 && { "aria-pressed": T },
-      ...N && z && { "aria-disabled": !0 },
+      ...P && M && { "aria-disabled": !0 },
       children: [
         y != null && /* @__PURE__ */ n("div", { style: { lineHeight: 0 }, children: y }),
         g != null && /* @__PURE__ */ n(
@@ -4914,7 +4959,7 @@ function $o({
               ...m ? {
                 background: "var(--lucent-surface)",
                 border: "1px solid var(--lucent-border-default)",
-                borderRadius: M,
+                borderRadius: z,
                 boxShadow: ve[f],
                 marginLeft: `calc(${I} / 3)`,
                 marginRight: `calc(${I} / 3)`
@@ -5677,76 +5722,76 @@ function Yo({ items: e, separator: t = "/", style: a }) {
 }
 function Ko({ tabs: e, defaultValue: t, value: a, onChange: o, variant: r = "underline", style: i }) {
   var K;
-  const l = a !== void 0, [s, c] = D(t ?? ((K = e[0]) == null ? void 0 : K.value) ?? ""), d = l ? a : s, [p, b] = D(null), h = j([]), [g, T] = D(null), y = j(!1), u = r === "pills", m = j(null), f = j(null), C = j(null), [I, x] = D(e.length), [M, N] = D(!1), [k, z] = D(!1), [V, L] = D(null), A = e.slice(0, I), R = e.slice(I), q = R.length > 0, W = R.some((S) => S.value === d), _ = () => {
-    if (W) {
+  const l = a !== void 0, [s, c] = D(t ?? ((K = e[0]) == null ? void 0 : K.value) ?? ""), d = l ? a : s, [p, b] = D(null), h = j([]), [g, T] = D(null), y = j(!1), u = r === "pills", m = j(null), f = j(null), C = j(null), [I, x] = D(e.length), [z, P] = D(!1), [k, M] = D(!1), [W, L] = D(null), A = e.slice(0, I), N = e.slice(I), q = N.length > 0, $ = N.some((S) => S.value === d), G = () => {
+    if ($) {
       T(null);
       return;
     }
-    const S = e.findIndex((F, w) => w < I && F.value === d), P = h.current[S];
-    if (P) {
+    const S = e.findIndex((R, w) => w < I && R.value === d), F = h.current[S];
+    if (F) {
       if (u) {
-        const F = P.querySelector("span");
-        if (!F) return;
-        T({ left: F.offsetLeft + P.offsetLeft, width: F.offsetWidth, animate: y.current });
+        const R = F.querySelector("span");
+        if (!R) return;
+        T({ left: R.offsetLeft + F.offsetLeft, width: R.offsetWidth, animate: y.current });
       } else
-        T({ left: P.offsetLeft, width: P.offsetWidth, animate: y.current });
+        T({ left: F.offsetLeft, width: F.offsetWidth, animate: y.current });
       y.current = !0;
     }
   };
   Ee(() => {
-    _(), document.fonts.ready.then(_);
+    G(), document.fonts.ready.then(G);
   }, [d, I, u]), J(() => {
     const S = m.current;
     if (!S) return;
-    const P = () => {
-      const B = S.clientWidth, O = 70;
-      let X = 0, G = 0;
+    const F = () => {
+      const B = S.clientWidth, H = 70;
+      let X = 0, _ = 0;
       for (let re = 0; re < e.length; re++) {
         const le = h.current[re];
         if (!le) {
-          G++;
+          _++;
           continue;
         }
         const se = le.offsetWidth;
         if (re < e.length - 1) {
-          if (X + se + O > B) break;
+          if (X + se + H > B) break;
         } else if (X + se > B) break;
-        X += se, G++;
+        X += se, _++;
       }
-      if (G >= e.length - 1 && G < e.length) {
+      if (_ >= e.length - 1 && _ < e.length) {
         let re = 0;
         for (let le = 0; le < e.length; le++) {
           const se = h.current[le];
           se && (re += se.offsetWidth);
         }
-        re <= B && (G = e.length);
+        re <= B && (_ = e.length);
       }
-      x(G < 1 ? 1 : G);
+      x(_ < 1 ? 1 : _);
     };
-    let F;
+    let R;
     (() => {
-      F = requestAnimationFrame(() => {
-        F = requestAnimationFrame(P);
+      R = requestAnimationFrame(() => {
+        R = requestAnimationFrame(F);
       });
     })();
-    const E = new ResizeObserver(P);
+    const E = new ResizeObserver(F);
     return E.observe(S), () => {
-      E.disconnect(), cancelAnimationFrame(F);
+      E.disconnect(), cancelAnimationFrame(R);
     };
   }, [e]), J(() => {
-    if (!M) return;
-    const S = (P) => {
-      C.current && !C.current.contains(P.target) && f.current && !f.current.contains(P.target) && (N(!1), L(null));
+    if (!z) return;
+    const S = (F) => {
+      C.current && !C.current.contains(F.target) && f.current && !f.current.contains(F.target) && (P(!1), L(null));
     };
     return document.addEventListener("mousedown", S), () => document.removeEventListener("mousedown", S);
-  }, [M]);
+  }, [z]);
   const Q = (S) => {
     l || c(S), o == null || o(S);
-  }, $ = (S, P) => {
+  }, O = (S, F) => {
     var B;
-    const F = A.map((O, X) => O.disabled ? -1 : X).filter((O) => O !== -1), w = F.indexOf(P);
+    const R = A.map((H, X) => H.disabled ? -1 : X).filter((H) => H !== -1), w = R.indexOf(F);
     let E = -1;
-    S.key === "ArrowRight" && (E = F[(w + 1) % F.length] ?? -1), S.key === "ArrowLeft" && (E = F[(w - 1 + F.length) % F.length] ?? -1), S.key === "Home" && (E = F[0] ?? -1), S.key === "End" && (E = F[F.length - 1] ?? -1), E !== -1 && (S.preventDefault(), (B = h.current[E]) == null || B.focus(), Q(A[E].value));
+    S.key === "ArrowRight" && (E = R[(w + 1) % R.length] ?? -1), S.key === "ArrowLeft" && (E = R[(w - 1 + R.length) % R.length] ?? -1), S.key === "Home" && (E = R[0] ?? -1), S.key === "End" && (E = R[R.length - 1] ?? -1), E !== -1 && (S.preventDefault(), (B = h.current[E]) == null || B.focus(), Q(A[E].value));
   };
   return /* @__PURE__ */ v("div", { style: { display: "flex", flexDirection: "column", position: "relative", ...i }, children: [
     /* @__PURE__ */ v(
@@ -5765,26 +5810,26 @@ function Ko({ tabs: e, defaultValue: t, value: a, onChange: o, variant: r = "und
           }
         },
         children: [
-          e.map((S, P) => {
-            const F = P < I, w = S.value === d, E = S.disabled ?? !1;
+          e.map((S, F) => {
+            const R = F < I, w = S.value === d, E = S.disabled ?? !1;
             return /* @__PURE__ */ v(
               "button",
               {
                 ref: (B) => {
-                  h.current[P] = B;
+                  h.current[F] = B;
                 },
                 role: "tab",
                 "aria-selected": w,
                 "aria-controls": `lucent-tabpanel-${S.value}`,
                 id: `lucent-tab-${S.value}`,
                 disabled: E,
-                tabIndex: w && F ? 0 : -1,
+                tabIndex: w && R ? 0 : -1,
                 onClick: () => {
                   E || Q(S.value);
                 },
-                onKeyDown: (B) => $(B, P),
+                onKeyDown: (B) => O(B, F),
                 onMouseEnter: () => {
-                  !E && F && b(P);
+                  !E && R && b(F);
                 },
                 onMouseLeave: () => b(null),
                 style: {
@@ -5799,20 +5844,20 @@ function Ko({ tabs: e, defaultValue: t, value: a, onChange: o, variant: r = "und
                   transition: "color var(--lucent-duration-fast) var(--lucent-easing-default)",
                   whiteSpace: "nowrap",
                   outline: "none",
-                  position: F ? "relative" : "absolute",
+                  position: R ? "relative" : "absolute",
                   zIndex: w ? 1 : 0,
                   // Hidden overflow tabs are positioned off-screen for measurement
-                  ...F ? {} : { visibility: "hidden", pointerEvents: "none", left: -9999 }
+                  ...R ? {} : { visibility: "hidden", pointerEvents: "none", left: -9999 }
                 },
                 children: [
                   /* @__PURE__ */ n("span", { style: {
                     display: "block",
                     padding: "var(--lucent-space-1) var(--lucent-space-3)",
                     borderRadius: "var(--lucent-radius-md)",
-                    background: !u && p === P && !w && !E ? "var(--lucent-surface-secondary)" : "transparent",
+                    background: !u && p === F && !w && !E ? "var(--lucent-surface-secondary)" : "transparent",
                     transition: "background var(--lucent-duration-fast) var(--lucent-easing-default)"
                   }, children: S.label }),
-                  u && p === P && !w && !E && F && /* @__PURE__ */ n(
+                  u && p === F && !w && !E && R && /* @__PURE__ */ n(
                     "span",
                     {
                       "aria-hidden": !0,
@@ -5838,9 +5883,9 @@ function Ko({ tabs: e, defaultValue: t, value: a, onChange: o, variant: r = "und
             "button",
             {
               ref: f,
-              onClick: () => N((S) => !S),
-              onMouseEnter: () => z(!0),
-              onMouseLeave: () => z(!1),
+              onClick: () => P((S) => !S),
+              onMouseEnter: () => M(!0),
+              onMouseLeave: () => M(!1),
               style: {
                 padding: u ? "var(--lucent-space-1) var(--lucent-space-2)" : "var(--lucent-space-1) var(--lucent-space-2) var(--lucent-space-3)",
                 background: "none",
@@ -5848,8 +5893,8 @@ function Ko({ tabs: e, defaultValue: t, value: a, onChange: o, variant: r = "und
                 cursor: "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: W ? "var(--lucent-text-primary)" : "var(--lucent-text-secondary)",
+                fontWeight: $ ? "var(--lucent-font-weight-medium)" : "var(--lucent-font-weight-regular)",
+                color: $ ? "var(--lucent-text-primary)" : "var(--lucent-text-secondary)",
                 whiteSpace: "nowrap",
                 outline: "none",
                 position: "relative",
@@ -5892,7 +5937,7 @@ function Ko({ tabs: e, defaultValue: t, value: a, onChange: o, variant: r = "und
         ]
       }
     ),
-    q && M && /* @__PURE__ */ n(
+    q && z && /* @__PURE__ */ n(
       "div",
       {
         ref: C,
@@ -5909,30 +5954,30 @@ function Ko({ tabs: e, defaultValue: t, value: a, onChange: o, variant: r = "und
           padding: "var(--lucent-space-1) 0",
           minWidth: 140
         },
-        children: R.map((S, P) => {
-          const F = S.value === d, w = S.disabled ?? !1, E = V === P;
+        children: N.map((S, F) => {
+          const R = S.value === d, w = S.disabled ?? !1, E = W === F;
           return /* @__PURE__ */ n(
             "button",
             {
               disabled: w,
               onClick: () => {
-                w || (Q(S.value), N(!1));
+                w || (Q(S.value), P(!1));
               },
               onMouseEnter: () => {
-                w || L(P);
+                w || L(F);
               },
               onMouseLeave: () => L(null),
               style: {
                 display: "block",
                 width: "100%",
                 padding: "var(--lucent-space-2) var(--lucent-space-4)",
-                background: F || E ? "var(--lucent-surface-secondary)" : "none",
+                background: R || E ? "var(--lucent-surface-secondary)" : "none",
                 border: "none",
                 cursor: w ? "not-allowed" : "pointer",
                 fontFamily: "var(--lucent-font-family-base)",
                 fontSize: "var(--lucent-font-size-md)",
-                fontWeight: F ? "var(--lucent-font-weight-medium)" : "var(--lucent-font-weight-regular)",
-                color: w ? "var(--lucent-text-disabled)" : F || E ? "var(--lucent-text-primary)" : "var(--lucent-text-secondary)",
+                fontWeight: R ? "var(--lucent-font-weight-medium)" : "var(--lucent-font-weight-regular)",
+                color: w ? "var(--lucent-text-disabled)" : R || E ? "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)"
@@ -6226,32 +6271,32 @@ function Zo({
   emptyState: l,
   style: s
 }) {
-  const [c, d] = D(null), [p, b] = D(0), [h, g] = D(null), [T, y] = D({}), u = o !== void 0, m = u ? o : p, f = e.some((A) => A.filterable), C = f ? t.filter((A) => e.every((R) => {
-    if (!R.filterable) return !0;
-    const q = T[R.key];
+  const [c, d] = D(null), [p, b] = D(0), [h, g] = D(null), [T, y] = D({}), u = o !== void 0, m = u ? o : p, f = e.some((A) => A.filterable), C = f ? t.filter((A) => e.every((N) => {
+    if (!N.filterable) return !0;
+    const q = T[N.key];
     if (!q || q.length === 0) return !0;
-    const W = String(A[R.key] ?? "");
-    return q.includes(W);
-  })) : t, I = c ? [...C].sort((A, R) => {
-    const q = A[c.key], W = R[c.key], _ = String(q ?? "").localeCompare(String(W ?? ""), void 0, { numeric: !0 });
-    return c.dir === "asc" ? _ : -_;
-  }) : C, x = a > 0 ? I.slice(m * a, (m + 1) * a) : I, M = a > 0 ? Math.max(1, Math.ceil(I.length / a)) : 1, N = (A) => {
+    const $ = String(A[N.key] ?? "");
+    return q.includes($);
+  })) : t, I = c ? [...C].sort((A, N) => {
+    const q = A[c.key], $ = N[c.key], G = String(q ?? "").localeCompare(String($ ?? ""), void 0, { numeric: !0 });
+    return c.dir === "asc" ? G : -G;
+  }) : C, x = a > 0 ? I.slice(m * a, (m + 1) * a) : I, z = a > 0 ? Math.max(1, Math.ceil(I.length / a)) : 1, P = (A) => {
     u || b(A), r == null || r(A);
   }, k = (A) => {
-    d((R) => !R || R.key !== A ? { key: A, dir: "asc" } : R.dir === "asc" ? { key: A, dir: "desc" } : null), u || b(0), r == null || r(0);
-  }, z = (A, R) => {
-    const q = { ...T, [A]: R };
-    R.length === 0 && delete q[A], y(q), u || b(0), r == null || r(0), i == null || i(q);
-  }, V = () => {
+    d((N) => !N || N.key !== A ? { key: A, dir: "asc" } : N.dir === "asc" ? { key: A, dir: "desc" } : null), u || b(0), r == null || r(0);
+  }, M = (A, N) => {
+    const q = { ...T, [A]: N };
+    N.length === 0 && delete q[A], y(q), u || b(0), r == null || r(0), i == null || i(q);
+  }, W = () => {
     y({}), u || b(0), r == null || r(0), i == null || i({});
   }, L = [];
-  if (M <= 7)
-    for (let A = 0; A < M; A++) L.push(A);
+  if (z <= 7)
+    for (let A = 0; A < z; A++) L.push(A);
   else {
     L.push(0), m > 2 && L.push("…");
-    for (let A = Math.max(1, m - 1); A <= Math.min(M - 2, m + 1); A++)
+    for (let A = Math.max(1, m - 1); A <= Math.min(z - 2, m + 1); A++)
       L.push(A);
-    m < M - 3 && L.push("…"), L.push(M - 1);
+    m < z - 3 && L.push("…"), L.push(z - 1);
   }
   return /* @__PURE__ */ v("div", { style: { display: "flex", flexDirection: "column", gap: "var(--lucent-space-3)", ...s }, children: [
     f && /* @__PURE__ */ n("div", { style: { position: "relative", zIndex: 1 }, children: /* @__PURE__ */ n(
@@ -6260,8 +6305,8 @@ function Zo({
         columns: e,
         rows: t,
         filters: T,
-        onFilter: z,
-        onClearAll: V
+        onFilter: M,
+        onClearAll: W
       }
     ) }),
     /* @__PURE__ */ n("div", { style: {
@@ -6275,7 +6320,7 @@ function Zo({
       fontSize: "var(--lucent-font-size-sm)"
     }, children: [
       /* @__PURE__ */ n("thead", { children: /* @__PURE__ */ n("tr", { style: { borderBottom: "1px solid var(--lucent-border-default)" }, children: e.map((A) => {
-        const R = (c == null ? void 0 : c.key) === A.key ? c.dir : "none";
+        const N = (c == null ? void 0 : c.key) === A.key ? c.dir : "none";
         return /* @__PURE__ */ n(
           "th",
           {
@@ -6294,7 +6339,7 @@ function Zo({
             },
             children: /* @__PURE__ */ v("span", { style: { display: "inline-flex", alignItems: "center", gap: "var(--lucent-space-1)" }, children: [
               A.header,
-              A.sortable && /* @__PURE__ */ n(Da, { state: R })
+              A.sortable && /* @__PURE__ */ n(Da, { state: N })
             ] })
           },
           A.key
@@ -6307,14 +6352,14 @@ function Zo({
           style: { padding: "var(--lucent-space-12)", textAlign: "center" },
           children: l ?? /* @__PURE__ */ n(U, { color: "secondary", children: "No data" })
         }
-      ) }) : x.map((A, R) => /* @__PURE__ */ n(
+      ) }) : x.map((A, N) => /* @__PURE__ */ n(
         "tr",
         {
-          onMouseEnter: () => g(R),
+          onMouseEnter: () => g(N),
           onMouseLeave: () => g(null),
           style: {
-            borderBottom: R < x.length - 1 ? "1px solid var(--lucent-border-subtle)" : "none",
-            background: h === R ? "var(--lucent-surface-secondary)" : "var(--lucent-surface)",
+            borderBottom: N < x.length - 1 ? "1px solid var(--lucent-border-subtle)" : "none",
+            background: h === N ? "var(--lucent-surface-secondary)" : "var(--lucent-surface)",
             transition: "background var(--lucent-duration-fast) var(--lucent-easing-default)"
           },
           children: e.map((q) => /* @__PURE__ */ n(
@@ -6326,12 +6371,12 @@ function Zo({
                 textAlign: q.align ?? "left",
                 verticalAlign: "middle"
               },
-              children: q.render ? q.render(A, R) : String(A[q.key] ?? "")
+              children: q.render ? q.render(A, N) : String(A[q.key] ?? "")
             },
             q.key
           ))
         },
-        R
+        N
       )) })
     ] }) }),
     a > 0 && I.length > 0 && /* @__PURE__ */ v("div", { style: {
@@ -6346,21 +6391,21 @@ function Zo({
         /* @__PURE__ */ n(
           Re,
           {
-            onClick: () => N(m - 1),
+            onClick: () => P(m - 1),
             disabled: m === 0,
             "aria-label": "Previous page",
             children: /* @__PURE__ */ n(nt, { dir: "left" })
           }
         ),
         L.map(
-          (A, R) => A === "…" ? /* @__PURE__ */ n("span", { style: {
+          (A, N) => A === "…" ? /* @__PURE__ */ n("span", { style: {
             padding: "0 var(--lucent-space-1)",
             color: "var(--lucent-text-disabled)",
             fontSize: "var(--lucent-font-size-sm)"
-          }, children: "…" }, `ellipsis-${R}`) : /* @__PURE__ */ n(
+          }, children: "…" }, `ellipsis-${N}`) : /* @__PURE__ */ n(
             Re,
             {
-              onClick: () => N(A),
+              onClick: () => P(A),
               active: A === m,
               "aria-label": `Page ${A + 1}`,
               "aria-current": A === m ? "page" : void 0,
@@ -6372,8 +6417,8 @@ function Zo({
         /* @__PURE__ */ n(
           Re,
           {
-            onClick: () => N(m + 1),
-            disabled: m >= M - 1,
+            onClick: () => P(m + 1),
+            disabled: m >= z - 1,
             "aria-label": "Next page",
             children: /* @__PURE__ */ n(nt, { dir: "right" })
           }
@@ -6796,8 +6841,8 @@ function ei({
     l || c(k), r == null || r(k);
   }, [l, r]);
   J(() => {
-    const k = (z) => {
-      (z.metaKey || z.ctrlKey) && z.key === a && (z.preventDefault(), m(!d));
+    const k = (M) => {
+      (M.metaKey || M.ctrlKey) && M.key === a && (M.preventDefault(), m(!d));
     };
     return window.addEventListener("keydown", k), () => window.removeEventListener("keydown", k);
   }, [d, a, m]), J(() => {
@@ -6810,8 +6855,8 @@ function ei({
   J(() => {
     const k = y.current;
     if (!k) return;
-    const z = k.querySelector('[data-active="true"]');
-    z == null || z.scrollIntoView({ block: "nearest" });
+    const M = k.querySelector('[data-active="true"]');
+    M == null || M.scrollIntoView({ block: "nearest" });
   }, [h]);
   const I = (k) => {
     k.disabled || (k.onSelect(), m(!1));
@@ -6820,17 +6865,17 @@ function ei({
       m(!1);
       return;
     }
-    if (k.key === "ArrowDown" && (k.preventDefault(), g((z) => Math.min(z + 1, C.length - 1))), k.key === "ArrowUp" && (k.preventDefault(), g((z) => Math.max(z - 1, 0))), k.key === "Enter") {
-      const z = C[h];
-      z && I(z);
+    if (k.key === "ArrowDown" && (k.preventDefault(), g((M) => Math.min(M + 1, C.length - 1))), k.key === "ArrowUp" && (k.preventDefault(), g((M) => Math.max(M - 1, 0))), k.key === "Enter") {
+      const M = C[h];
+      M && I(M);
     }
-  }, M = [];
+  }, z = [];
   for (const k of f) {
-    const z = M[M.length - 1];
-    z && z.group === k.group ? z.items.push(k) : M.push({ group: k.group, items: [k] });
+    const M = z[z.length - 1];
+    M && M.group === k.group ? M.items.push(k) : z.push({ group: k.group, items: [k] });
   }
   if (!d) return null;
-  let N = 0;
+  let P = 0;
   return /* @__PURE__ */ n(
     "div",
     {
@@ -6927,21 +6972,21 @@ function ei({
                   'No results for "',
                   p,
                   '"'
-                ] }) }) : M.map(({ group: k, items: z }, V) => /* @__PURE__ */ v("div", { children: [
+                ] }) }) : z.map(({ group: k, items: M }, W) => /* @__PURE__ */ v("div", { children: [
                   k && /* @__PURE__ */ n("div", { style: {
                     padding: "var(--lucent-space-2) var(--lucent-space-4) var(--lucent-space-1)",
-                    ...V > 0 ? { borderTop: "1px solid var(--lucent-border-subtle)", marginTop: "var(--lucent-space-1)" } : {}
+                    ...W > 0 ? { borderTop: "1px solid var(--lucent-border-subtle)", marginTop: "var(--lucent-space-1)" } : {}
                   }, children: /* @__PURE__ */ n(U, { size: "xs", color: "secondary", weight: "medium", children: k }) }),
-                  z.map((L) => {
+                  M.map((L) => {
                     const A = L.disabled ?? !1;
-                    let R = !1;
-                    return A || (R = N === h, N++), /* @__PURE__ */ v(
+                    let N = !1;
+                    return A || (N = P === h, P++), /* @__PURE__ */ v(
                       "div",
                       {
                         role: "option",
-                        "aria-selected": R,
+                        "aria-selected": N,
                         "aria-disabled": A,
-                        "data-active": R,
+                        "data-active": N,
                         onClick: () => I(L),
                         onMouseEnter: () => {
                           if (!A) {
@@ -6955,7 +7000,7 @@ function ei({
                           gap: "var(--lucent-space-3)",
                           padding: "var(--lucent-space-2) var(--lucent-space-4)",
                           cursor: A ? "not-allowed" : "pointer",
-                          background: R ? "var(--lucent-surface-secondary)" : "transparent",
+                          background: N ? "var(--lucent-surface-secondary)" : "transparent",
                           transition: "background var(--lucent-duration-fast) var(--lucent-easing-default)",
                           opacity: A ? 0.5 : 1
                         },
@@ -6970,7 +7015,7 @@ function ei({
                       L.id
                     );
                   })
-                ] }, V))
+                ] }, W))
               }
             ),
             /* @__PURE__ */ n("div", { style: {
@@ -6983,7 +7028,7 @@ function ei({
               ["↑↓", "Navigate"],
               ["↵", "Select"],
               ["Esc", "Close"]
-            ].map(([k, z]) => /* @__PURE__ */ v("span", { style: { display: "flex", alignItems: "center", gap: "var(--lucent-space-1)" }, children: [
+            ].map(([k, M]) => /* @__PURE__ */ v("span", { style: { display: "flex", alignItems: "center", gap: "var(--lucent-space-1)" }, children: [
               /* @__PURE__ */ n("kbd", { style: {
                 padding: "1px 5px",
                 borderRadius: "var(--lucent-radius-sm)",
@@ -6993,7 +7038,7 @@ function ei({
                 fontSize: "var(--lucent-font-size-xs)",
                 color: "var(--lucent-text-secondary)"
               }, children: k }),
-              /* @__PURE__ */ n(U, { size: "xs", color: "secondary", children: z })
+              /* @__PURE__ */ n(U, { size: "xs", color: "secondary", children: M })
             ] }, k)) })
           ]
         }
@@ -7118,35 +7163,35 @@ function ni({
   errorText: p,
   style: b
 }) {
-  const h = t !== void 0, [g, T] = D(a), y = h ? t : g, [u, m] = D(!1), [f, C] = D(""), [I, x] = D(0), [M, N] = D(!1), k = j(null), z = j(null), V = Ce();
+  const h = t !== void 0, [g, T] = D(a), y = h ? t : g, [u, m] = D(!1), [f, C] = D(""), [I, x] = D(0), [z, P] = D(!1), k = j(null), M = j(null), W = Ce();
   J(() => {
     if (!u) return;
-    const S = (P) => {
-      var F;
-      (F = k.current) != null && F.contains(P.target) || (m(!1), C(""));
+    const S = (F) => {
+      var R;
+      (R = k.current) != null && R.contains(F.target) || (m(!1), C(""));
     };
     return document.addEventListener("mousedown", S), () => document.removeEventListener("mousedown", S);
   }, [u]);
   const L = (S) => {
-    const P = y.includes(S) ? y.filter((F) => F !== S) : l !== void 0 && y.length >= l ? y : [...y, S];
-    h || T(P), o == null || o(P);
+    const F = y.includes(S) ? y.filter((R) => R !== S) : l !== void 0 && y.length >= l ? y : [...y, S];
+    h || T(F), o == null || o(F);
   }, A = (S) => {
-    const P = y.filter((F) => F !== S);
-    h || T(P), o == null || o(P);
-  }, R = e.filter(
+    const F = y.filter((R) => R !== S);
+    h || T(F), o == null || o(F);
+  }, N = e.filter(
     (S) => S.label.toLowerCase().includes(f.toLowerCase())
   ), q = (S) => {
     if (S.key === "Escape") {
       m(!1), C("");
       return;
     }
-    if (S.key === "ArrowDown" && (S.preventDefault(), m(!0), x((P) => Math.min(P + 1, R.length - 1))), S.key === "ArrowUp" && (S.preventDefault(), x((P) => Math.max(P - 1, 0))), S.key === "Enter") {
+    if (S.key === "ArrowDown" && (S.preventDefault(), m(!0), x((F) => Math.min(F + 1, N.length - 1))), S.key === "ArrowUp" && (S.preventDefault(), x((F) => Math.max(F - 1, 0))), S.key === "Enter") {
       S.preventDefault();
-      const P = R[I];
-      P && !P.disabled && L(P.value);
+      const F = N[I];
+      F && !F.disabled && L(F.value);
     }
     S.key === "Backspace" && f === "" && y.length > 0 && A(y[y.length - 1]);
-  }, W = l !== void 0 && y.length >= l, _ = !!p, Q = i ? "var(--lucent-border-default)" : _ ? "var(--lucent-danger-default)" : M ? "var(--lucent-focus-ring)" : "var(--lucent-border-default)", $ = M ? `0 0 0 3px ${_ ? "var(--lucent-danger-subtle)" : "var(--lucent-accent-subtle)"}` : "none", K = `lucent-multiselect-${Ce()}`;
+  }, $ = l !== void 0 && y.length >= l, G = !!p, Q = i ? "var(--lucent-border-default)" : G ? "var(--lucent-danger-default)" : z ? "var(--lucent-focus-ring)" : "var(--lucent-border-default)", O = z ? `0 0 0 3px ${G ? "var(--lucent-danger-subtle)" : "var(--lucent-accent-subtle)"}` : "none", K = `lucent-multiselect-${Ce()}`;
   return /* @__PURE__ */ v("div", { ref: k, style: { display: "flex", flexDirection: "column", gap: "var(--lucent-space-1)", ...b }, children: [
     c && /* @__PURE__ */ n(
       "label",
@@ -7167,7 +7212,7 @@ function ni({
         {
           onClick: () => {
             var S;
-            i || (m(!0), (S = z.current) == null || S.focus());
+            i || (m(!0), (S = M.current) == null || S.focus());
           },
           style: {
             display: "flex",
@@ -7182,31 +7227,31 @@ function ni({
             background: i ? "var(--lucent-surface-secondary)" : "var(--lucent-surface)",
             cursor: i ? "not-allowed" : "text",
             transition: "border-color var(--lucent-duration-fast) var(--lucent-easing-default), box-shadow var(--lucent-duration-fast) var(--lucent-easing-default)",
-            boxShadow: $
+            boxShadow: O
           },
           children: [
             y.map((S) => {
-              const P = e.find((F) => F.value === S);
-              return P ? /* @__PURE__ */ n(Qt, { size: Ra[s], onDismiss: () => A(S), disabled: i, children: P.label }, S) : null;
+              const F = e.find((R) => R.value === S);
+              return F ? /* @__PURE__ */ n(Qt, { size: Ra[s], onDismiss: () => A(S), disabled: i, children: F.label }, S) : null;
             }),
             /* @__PURE__ */ n(
               "input",
               {
                 id: K,
-                ref: z,
+                ref: M,
                 value: f,
                 onChange: (S) => {
                   C(S.target.value), m(!0), x(0);
                 },
                 onKeyDown: q,
-                onFocus: () => N(!0),
-                onBlur: () => N(!1),
+                onFocus: () => P(!0),
+                onBlur: () => P(!1),
                 disabled: i,
                 placeholder: y.length === 0 ? r : "",
                 "aria-autocomplete": "list",
-                "aria-controls": V,
+                "aria-controls": W,
                 "aria-expanded": u,
-                "aria-describedby": _ ? `${K}-error` : d ? `${K}-helper` : void 0,
+                "aria-describedby": G ? `${K}-error` : d ? `${K}-helper` : void 0,
                 role: "combobox",
                 style: {
                   flex: "1 1 80px",
@@ -7228,7 +7273,7 @@ function ni({
       u && !i && /* @__PURE__ */ v(
         "div",
         {
-          id: V,
+          id: W,
           role: "listbox",
           "aria-multiselectable": "true",
           style: {
@@ -7246,18 +7291,18 @@ function ni({
             padding: xe[s]
           },
           children: [
-            R.length === 0 ? /* @__PURE__ */ n("div", { style: { padding: "var(--lucent-space-2)" }, children: /* @__PURE__ */ n(U, { color: "secondary", size: "sm", children: "No options" }) }) : R.map((S, P) => {
-              const F = y.includes(S.value), w = P === I, E = S.disabled ?? !1, B = W && !F;
+            N.length === 0 ? /* @__PURE__ */ n("div", { style: { padding: "var(--lucent-space-2)" }, children: /* @__PURE__ */ n(U, { color: "secondary", size: "sm", children: "No options" }) }) : N.map((S, F) => {
+              const R = y.includes(S.value), w = F === I, E = S.disabled ?? !1, B = $ && !R;
               return /* @__PURE__ */ v(
                 "div",
                 {
                   role: "option",
-                  "aria-selected": F,
+                  "aria-selected": R,
                   "aria-disabled": E || B,
                   onClick: () => {
                     !E && !B && L(S.value);
                   },
-                  onMouseEnter: () => x(P),
+                  onMouseEnter: () => x(F),
                   style: {
                     display: "flex",
                     alignItems: "center",
@@ -7272,7 +7317,7 @@ function ni({
                     /* @__PURE__ */ n(
                       dt,
                       {
-                        checked: F,
+                        checked: R,
                         disabled: E || B,
                         size: s,
                         style: { margin: 0, pointerEvents: "none" },
@@ -7286,7 +7331,7 @@ function ni({
                 S.value
               );
             }),
-            W && /* @__PURE__ */ n("div", { style: {
+            $ && /* @__PURE__ */ n("div", { style: {
               padding: "var(--lucent-space-2)",
               borderTop: "1px solid var(--lucent-border-subtle)"
             }, children: /* @__PURE__ */ v(U, { size: "xs", color: "secondary", children: [
@@ -7298,7 +7343,7 @@ function ni({
         }
       )
     ] }),
-    _ && /* @__PURE__ */ n(
+    G && /* @__PURE__ */ n(
       "span",
       {
         id: `${K}-error`,
@@ -7311,7 +7356,7 @@ function ni({
         children: p
       }
     ),
-    !_ && d && /* @__PURE__ */ n(
+    !G && d && /* @__PURE__ */ n(
       "span",
       {
         id: `${K}-helper`,
@@ -7548,8 +7593,8 @@ function He({
     /* @__PURE__ */ n("div", { style: { display: "grid", gridTemplateColumns: "repeat(7, 1fr)", gap: 2 }, children: y.map((u, m) => {
       if (!u) return /* @__PURE__ */ n("div", {}, m);
       const f = new Date(e, t, u), C = a ? Ie(f, a) : !1, I = Ie(f, o), x = (r ? Me(f, r) : !1) || (i ? at(f, i) : !1);
-      let M = !1;
-      return d != null && d.start && (d != null && d.end) && (M = !Me(f, d.start) && !at(f, d.end)), /* @__PURE__ */ n(
+      let z = !1;
+      return d != null && d.start && (d != null && d.end) && (z = !Me(f, d.start) && !at(f, d.end)), /* @__PURE__ */ n(
         "button",
         {
           type: "button",
@@ -7571,7 +7616,7 @@ function He({
             width: "100%",
             border: I && !C ? "1px solid var(--lucent-border-strong)" : "1px solid transparent",
             borderRadius: "var(--lucent-radius-md)",
-            background: C ? "var(--lucent-accent-default)" : M ? "var(--lucent-accent-subtle)" : g === u && !x ? "var(--lucent-surface-secondary)" : "transparent",
+            background: C ? "var(--lucent-accent-default)" : z ? "var(--lucent-accent-subtle)" : g === u && !x ? "var(--lucent-surface-secondary)" : "transparent",
             color: C ? "var(--lucent-text-on-accent)" : x ? "var(--lucent-text-disabled)" : "var(--lucent-text-primary)",
             fontSize: "var(--lucent-font-size-sm)",
             fontFamily: "var(--lucent-font-family-base)",
@@ -7600,22 +7645,22 @@ function ri({
   errorText: p,
   style: b
 }) {
-  const h = e !== void 0, [g, T] = D(t), y = h ? e : g, u = !!p, m = r, f = `lucent-datepicker-${Math.random().toString(36).slice(2, 7)}`, C = /* @__PURE__ */ new Date(), [I, x] = D((y ?? C).getFullYear()), [M, N] = D((y ?? C).getMonth()), [k, z] = D(!1), [V, L] = D(!1), A = j(null);
+  const h = e !== void 0, [g, T] = D(t), y = h ? e : g, u = !!p, m = r, f = `lucent-datepicker-${Math.random().toString(36).slice(2, 7)}`, C = /* @__PURE__ */ new Date(), [I, x] = D((y ?? C).getFullYear()), [z, P] = D((y ?? C).getMonth()), [k, M] = D(!1), [W, L] = D(!1), A = j(null);
   J(() => {
     if (!k) return;
-    const $ = (K) => {
+    const O = (K) => {
       var S;
-      (S = A.current) != null && S.contains(K.target) || z(!1);
+      (S = A.current) != null && S.contains(K.target) || M(!1);
     };
-    return document.addEventListener("mousedown", $), () => document.removeEventListener("mousedown", $);
+    return document.addEventListener("mousedown", O), () => document.removeEventListener("mousedown", O);
   }, [k]);
-  const R = ($) => {
-    h || T($), a == null || a($), z(!1);
+  const N = (O) => {
+    h || T(O), a == null || a(O), M(!1);
   }, q = () => {
-    M === 0 ? (N(11), x(($) => $ - 1)) : N(($) => $ - 1);
-  }, W = () => {
-    M === 11 ? (N(0), x(($) => $ + 1)) : N(($) => $ + 1);
-  }, _ = m ? "transparent" : u ? "var(--lucent-danger-default)" : V ? "var(--lucent-focus-ring)" : "var(--lucent-border-default)", Q = V ? `0 0 0 3px ${u ? "var(--lucent-danger-subtle)" : "var(--lucent-accent-subtle)"}` : "none";
+    z === 0 ? (P(11), x((O) => O - 1)) : P((O) => O - 1);
+  }, $ = () => {
+    z === 11 ? (P(0), x((O) => O + 1)) : P((O) => O + 1);
+  }, G = m ? "transparent" : u ? "var(--lucent-danger-default)" : W ? "var(--lucent-focus-ring)" : "var(--lucent-border-default)", Q = W ? `0 0 0 3px ${u ? "var(--lucent-danger-subtle)" : "var(--lucent-accent-subtle)"}` : "none";
   return /* @__PURE__ */ v("div", { ref: A, style: { display: "flex", flexDirection: "column", gap: "var(--lucent-space-1)", position: "relative", ...b }, children: [
     c && /* @__PURE__ */ n(
       "label",
@@ -7636,7 +7681,7 @@ function ri({
         type: "button",
         id: f,
         disabled: r,
-        onClick: () => !r && z(($) => !$),
+        onClick: () => !r && M((O) => !O),
         onFocus: () => L(!0),
         onBlur: () => L(!1),
         "aria-haspopup": "dialog",
@@ -7651,7 +7696,7 @@ function ri({
           boxSizing: "border-box",
           padding: `0 ${Ha[s]}`,
           borderRadius: "var(--lucent-radius-lg)",
-          border: `1px solid ${_}`,
+          border: `1px solid ${G}`,
           boxShadow: Q,
           background: m ? "var(--lucent-surface-secondary)" : "var(--lucent-surface)",
           color: y ? "var(--lucent-text-primary)" : "var(--lucent-text-secondary)",
@@ -7718,14 +7763,14 @@ function ri({
           He,
           {
             year: I,
-            month: M,
+            month: z,
             ...y !== void 0 && { selected: y },
             today: C,
             ...i !== void 0 && { min: i },
             ...l !== void 0 && { max: l },
-            onSelect: R,
+            onSelect: N,
             onPrevMonth: q,
-            onNextMonth: W
+            onNextMonth: $
           }
         )
       }
@@ -7877,12 +7922,12 @@ function ii({
   errorText: p,
   style: b
 }) {
-  const h = e !== void 0, [g, T] = D(t), y = h ? e : g, u = !!p, m = r, f = `lucent-daterangepicker-${Math.random().toString(36).slice(2, 7)}`, [C, I] = D(null), [x, M] = D(null), N = /* @__PURE__ */ new Date(), [k, z] = D(((y == null ? void 0 : y.start) ?? N).getFullYear()), [V, L] = D(((y == null ? void 0 : y.start) ?? N).getMonth()), A = V === 11 ? 0 : V + 1, R = V === 11 ? k + 1 : k, [q, W] = D(!1), [_, Q] = D(!1), $ = j(null);
+  const h = e !== void 0, [g, T] = D(t), y = h ? e : g, u = !!p, m = r, f = `lucent-daterangepicker-${Math.random().toString(36).slice(2, 7)}`, [C, I] = D(null), [x, z] = D(null), P = /* @__PURE__ */ new Date(), [k, M] = D(((y == null ? void 0 : y.start) ?? P).getFullYear()), [W, L] = D(((y == null ? void 0 : y.start) ?? P).getMonth()), A = W === 11 ? 0 : W + 1, N = W === 11 ? k + 1 : k, [q, $] = D(!1), [G, Q] = D(!1), O = j(null);
   J(() => {
     if (!q) return;
-    const B = (O) => {
+    const B = (H) => {
       var X;
-      (X = $.current) != null && X.contains(O.target) || (W(!1), I(null));
+      (X = O.current) != null && X.contains(H.target) || ($(!1), I(null));
     };
     return document.addEventListener("mousedown", B), () => document.removeEventListener("mousedown", B);
   }, [q]);
@@ -7890,21 +7935,21 @@ function ii({
     if (!C)
       I(B);
     else {
-      const [O, X] = Me(B, C) || Ie(B, C) ? [B, C] : [C, B], G = { start: O, end: X };
-      h || T(G), a == null || a(G), I(null), W(!1);
+      const [H, X] = Me(B, C) || Ie(B, C) ? [B, C] : [C, B], _ = { start: H, end: X };
+      h || T(_), a == null || a(_), I(null), $(!1);
     }
   }, S = () => {
-    V === 0 ? (L(11), z((B) => B - 1)) : L((B) => B - 1);
-  }, P = () => {
-    V === 11 ? (L(0), z((B) => B + 1)) : L((B) => B + 1);
+    W === 0 ? (L(11), M((B) => B - 1)) : L((B) => B - 1);
+  }, F = () => {
+    W === 11 ? (L(0), M((B) => B + 1)) : L((B) => B + 1);
   };
-  let F;
+  let R;
   if (C && x) {
-    const [B, O] = Me(x, C) ? [x, C] : [C, x];
-    F = { start: B, end: O };
-  } else C ? F = { start: C, end: C } : y && (F = { start: y.start, end: y.end });
-  const w = m ? "transparent" : u ? "var(--lucent-danger-default)" : _ ? "var(--lucent-focus-ring)" : "var(--lucent-border-default)", E = _ ? `0 0 0 3px ${u ? "var(--lucent-danger-subtle)" : "var(--lucent-accent-subtle)"}` : "none";
-  return /* @__PURE__ */ v("div", { ref: $, style: { display: "flex", flexDirection: "column", gap: "var(--lucent-space-1)", position: "relative", ...b }, children: [
+    const [B, H] = Me(x, C) ? [x, C] : [C, x];
+    R = { start: B, end: H };
+  } else C ? R = { start: C, end: C } : y && (R = { start: y.start, end: y.end });
+  const w = m ? "transparent" : u ? "var(--lucent-danger-default)" : G ? "var(--lucent-focus-ring)" : "var(--lucent-border-default)", E = G ? `0 0 0 3px ${u ? "var(--lucent-danger-subtle)" : "var(--lucent-accent-subtle)"}` : "none";
+  return /* @__PURE__ */ v("div", { ref: O, style: { display: "flex", flexDirection: "column", gap: "var(--lucent-space-1)", position: "relative", ...b }, children: [
     c && /* @__PURE__ */ n(
       "label",
       {
@@ -7924,7 +7969,7 @@ function ii({
         type: "button",
         id: f,
         disabled: r,
-        onClick: () => !r && W((B) => !B),
+        onClick: () => !r && $((B) => !B),
         onFocus: () => Q(!0),
         onBlur: () => Q(!1),
         "aria-haspopup": "dialog",
@@ -8008,33 +8053,33 @@ function ii({
             He,
             {
               year: k,
-              month: V,
+              month: W,
               ...(y == null ? void 0 : y.start) !== void 0 && { selected: y.start },
-              today: N,
+              today: P,
               ...i !== void 0 && { min: i },
               ...l !== void 0 && { max: l },
               onSelect: K,
               onPrevMonth: S,
-              onNextMonth: P,
-              ...F !== void 0 && { highlightRange: F },
-              ...C && { onDayHover: M }
+              onNextMonth: F,
+              ...R !== void 0 && { highlightRange: R },
+              ...C && { onDayHover: z }
             }
           ) }),
           /* @__PURE__ */ n("div", { style: { width: 1, background: "var(--lucent-border-subtle)", flexShrink: 0 } }),
           /* @__PURE__ */ n("div", { style: { minWidth: 220 }, children: /* @__PURE__ */ n(
             He,
             {
-              year: R,
+              year: N,
               month: A,
               ...(y == null ? void 0 : y.end) !== void 0 && { selected: y.end },
-              today: N,
+              today: P,
               ...i !== void 0 && { min: i },
               ...l !== void 0 && { max: l },
               onSelect: K,
               onPrevMonth: S,
-              onNextMonth: P,
-              ...F !== void 0 && { highlightRange: F },
-              ...C && { onDayHover: M }
+              onNextMonth: F,
+              ...R !== void 0 && { highlightRange: R },
+              ...C && { onDayHover: z }
             }
           ) })
         ]
@@ -8236,21 +8281,21 @@ function si({
 }) {
   const c = o !== void 0, [d, p] = D([]), b = c ? o : d, [h, g] = D(!1), [T, y] = D(!1), u = j(null), m = ie((x) => {
     if (!x || l) return;
-    const M = [];
+    const z = [];
     for (const k of Array.from(x)) {
       if (a && k.size > a) {
         i == null || i(`"${k.name}" exceeds the ${Ve(a)} limit.`);
         continue;
       }
-      if (!t && b.length + M.length >= 1) break;
-      M.push({ id: Ka(), file: k });
+      if (!t && b.length + z.length >= 1) break;
+      z.push({ id: Ka(), file: k });
     }
-    if (M.length === 0) return;
-    const N = t ? [...b, ...M] : M;
-    c || p(N), r == null || r(N);
+    if (z.length === 0) return;
+    const P = t ? [...b, ...z] : z;
+    c || p(P), r == null || r(P);
   }, [l, b, c, a, t, r, i]), f = (x) => {
-    const M = b.filter((N) => N.id !== x);
-    c || p(M), r == null || r(M);
+    const z = b.filter((P) => P.id !== x);
+    c || p(z), r == null || r(z);
   }, C = (x) => {
     x.preventDefault(), g(!1), m(x.dataTransfer.files);
   }, I = (x) => {
@@ -8269,8 +8314,8 @@ function si({
           return !l && ((x = u.current) == null ? void 0 : x.click());
         },
         onKeyDown: (x) => {
-          var M;
-          (x.key === "Enter" || x.key === " ") && (x.preventDefault(), (M = u.current) == null || M.click());
+          var z;
+          (x.key === "Enter" || x.key === " ") && (x.preventDefault(), (z = u.current) == null || z.click());
         },
         onFocus: () => y(!0),
         onBlur: () => y(!1),
@@ -8723,7 +8768,7 @@ function ne(e, t, a) {
   let l = 0, s = 0, c = 0;
   return e < 60 ? (l = o, s = r) : e < 120 ? (l = r, s = o) : e < 180 ? (s = o, c = r) : e < 240 ? (s = r, c = o) : e < 300 ? (l = r, c = o) : (l = o, c = r), lr({ r: Math.round((l + i) * 255), g: Math.round((s + i) * 255), b: Math.round((c + i) * 255) });
 }
-function H(e, t) {
+function V(e, t) {
   const [a, o, r] = ae(e);
   return ne(a, o, Math.min(1, Math.max(0, r + t)));
 }
@@ -8785,19 +8830,19 @@ function ur(e) {
     accentBorder: e.accentBorder,
     // auto-recomputed by LucentProvider
     // ── Status: lighten defaults for visibility; darken for subtle bg ─────────
-    successDefault: H(e.successDefault, 0.1),
-    successSubtle: H(e.successDefault, -0.25),
-    successText: H(e.successText, 0.15),
-    warningDefault: H(e.warningDefault, 0.1),
-    warningSubtle: H(e.warningDefault, -0.25),
-    warningText: H(e.warningText, 0.15),
-    dangerDefault: H(e.dangerDefault, 0.1),
-    dangerHover: H(e.dangerHover, 0.1),
-    dangerSubtle: H(e.dangerDefault, -0.25),
-    dangerText: H(e.dangerText, 0.15),
-    infoDefault: H(e.infoDefault, 0.1),
-    infoSubtle: H(e.infoDefault, -0.25),
-    infoText: H(e.infoText, 0.15),
+    successDefault: V(e.successDefault, 0.1),
+    successSubtle: V(e.successDefault, -0.25),
+    successText: V(e.successText, 0.15),
+    warningDefault: V(e.warningDefault, 0.1),
+    warningSubtle: V(e.warningDefault, -0.25),
+    warningText: V(e.warningText, 0.15),
+    dangerDefault: V(e.dangerDefault, 0.1),
+    dangerHover: V(e.dangerHover, 0.1),
+    dangerSubtle: V(e.dangerDefault, -0.25),
+    dangerText: V(e.dangerText, 0.15),
+    infoDefault: V(e.infoDefault, 0.1),
+    infoSubtle: V(e.infoDefault, -0.25),
+    infoText: V(e.infoText, 0.15),
     // ── Focus ─────────────────────────────────────────────────────────────────
     focusRing: pe(e.focusRing)
   };
@@ -8885,14 +8930,14 @@ function ke(e, t) {
 }
 function xt(e, t, a) {
   const o = {}, r = a === "light";
-  if ("borderDefault" in e && ("borderSubtle" in e || (o.borderSubtle = H(t.borderDefault, r ? 0.05 : -0.02)), "borderStrong" in e || (o.borderStrong = H(t.borderDefault, r ? -0.27 : 0.19))), "bgBase" in e && ("bgSubtle" in e || (o.bgSubtle = H(t.bgBase, r ? -0.02 : 0.02)), "surfaceTint" in e || (o.surfaceTint = H(t.bgBase, r ? -0.04 : 0.03)), !("surface" in e))) {
+  if ("borderDefault" in e && ("borderSubtle" in e || (o.borderSubtle = V(t.borderDefault, r ? 0.05 : -0.02)), "borderStrong" in e || (o.borderStrong = V(t.borderDefault, r ? -0.27 : 0.19))), "bgBase" in e && ("bgSubtle" in e || (o.bgSubtle = V(t.bgBase, r ? -0.02 : 0.02)), "surfaceTint" in e || (o.surfaceTint = V(t.bgBase, r ? -0.04 : 0.03)), !("surface" in e))) {
     const i = Ir(t.bgBase, r);
-    o.surface = i, "surfaceSecondary" in e || (o.surfaceSecondary = H(i, r ? -0.04 : 0.03)), "surfaceRaised" in e || (o.surfaceRaised = H(i, r ? 0 : 0.06)), "surfaceOverlay" in e || (o.surfaceOverlay = H(i, r ? 0 : 0.06));
+    o.surface = i, "surfaceSecondary" in e || (o.surfaceSecondary = V(i, r ? -0.04 : 0.03)), "surfaceRaised" in e || (o.surfaceRaised = V(i, r ? 0 : 0.06)), "surfaceOverlay" in e || (o.surfaceOverlay = V(i, r ? 0 : 0.06));
   }
-  return "surface" in e && ("surfaceSecondary" in e || (o.surfaceSecondary = H(t.surface, r ? -0.04 : 0.03)), "surfaceRaised" in e || (o.surfaceRaised = H(t.surface, r ? 0 : 0.06)), "surfaceOverlay" in e || (o.surfaceOverlay = H(t.surface, r ? 0 : 0.06))), "textPrimary" in e && ("textSecondary" in e || (o.textSecondary = H(t.textPrimary, r ? 0.2 : -0.15)), "textDisabled" in e || (o.textDisabled = H(t.textPrimary, r ? 0.35 : -0.4))), "accentDefault" in e && ("accentHover" in e || (o.accentHover = H(t.accentDefault, r ? 0.05 : -0.07)), "accentActive" in e || (o.accentActive = H(t.accentDefault, r ? 0.13 : -0.14)), "accentSubtle" in e || (o.accentSubtle = H(t.accentDefault, r ? 0.85 : -0.6))), "successDefault" in e && ("successSubtle" in e || (o.successSubtle = we(t.successDefault, r)), "successText" in e || (o.successText = ke(t.successDefault, r))), "warningDefault" in e && ("warningSubtle" in e || (o.warningSubtle = we(t.warningDefault, r)), "warningText" in e || (o.warningText = ke(t.warningDefault, r))), "dangerDefault" in e && ("dangerHover" in e || (o.dangerHover = H(t.dangerDefault, r ? 0.05 : -0.07)), "dangerSubtle" in e || (o.dangerSubtle = we(t.dangerDefault, r)), "dangerText" in e || (o.dangerText = ke(t.dangerDefault, r))), "infoDefault" in e && ("infoSubtle" in e || (o.infoSubtle = we(t.infoDefault, r)), "infoText" in e || (o.infoText = ke(t.infoDefault, r))), o;
+  return "surface" in e && ("surfaceSecondary" in e || (o.surfaceSecondary = V(t.surface, r ? -0.04 : 0.03)), "surfaceRaised" in e || (o.surfaceRaised = V(t.surface, r ? 0 : 0.06)), "surfaceOverlay" in e || (o.surfaceOverlay = V(t.surface, r ? 0 : 0.06))), "textPrimary" in e && ("textSecondary" in e || (o.textSecondary = V(t.textPrimary, r ? 0.2 : -0.15)), "textDisabled" in e || (o.textDisabled = V(t.textPrimary, r ? 0.35 : -0.4))), "accentDefault" in e && ("accentHover" in e || (o.accentHover = V(t.accentDefault, r ? 0.05 : -0.07)), "accentActive" in e || (o.accentActive = V(t.accentDefault, r ? 0.13 : -0.14)), "accentSubtle" in e || (o.accentSubtle = V(t.accentDefault, r ? 0.85 : -0.6))), "successDefault" in e && ("successSubtle" in e || (o.successSubtle = we(t.successDefault, r)), "successText" in e || (o.successText = ke(t.successDefault, r))), "warningDefault" in e && ("warningSubtle" in e || (o.warningSubtle = we(t.warningDefault, r)), "warningText" in e || (o.warningText = ke(t.warningDefault, r))), "dangerDefault" in e && ("dangerHover" in e || (o.dangerHover = V(t.dangerDefault, r ? 0.05 : -0.07)), "dangerSubtle" in e || (o.dangerSubtle = we(t.dangerDefault, r)), "dangerText" in e || (o.dangerText = ke(t.dangerDefault, r))), "infoDefault" in e && ("infoSubtle" in e || (o.infoSubtle = we(t.infoDefault, r)), "infoText" in e || (o.infoText = ke(t.infoDefault, r))), o;
 }
 function wt(e, t = "light") {
-  const o = { ...t === "dark" ? vt : qe, ...e }, r = xt(e, o, t), i = t === "light" ? H(o.accentDefault, -0.15) : H(o.accentDefault, 0.15);
+  const o = { ...t === "dark" ? vt : qe, ...e }, r = xt(e, o, t), i = t === "light" ? V(o.accentDefault, -0.15) : V(o.accentDefault, 0.15);
   return {
     ...o,
     ...r,
@@ -9390,7 +9435,7 @@ function pi({
       }
       return u;
     }
-    const d = e === "dark" ? vt : qe, p = l ? { ...l, ...a } : a, b = p ? { ...d, ...p } : d, h = p ? xt(p, b, e) : {}, g = (p == null ? void 0 : p.accentBorder) ?? (e === "light" ? H(b.accentDefault, -0.15) : H(b.accentDefault, 0.15)), T = (p == null ? void 0 : p.textOnAccent) ?? yt(b.accentDefault), y = Cr(b.accentDefault, T);
+    const d = e === "dark" ? vt : qe, p = l ? { ...l, ...a } : a, b = p ? { ...d, ...p } : d, h = p ? xt(p, b, e) : {}, g = (p == null ? void 0 : p.accentBorder) ?? (e === "light" ? V(b.accentDefault, -0.15) : V(b.accentDefault, 0.15)), T = (p == null ? void 0 : p.textOnAccent) ?? yt(b.accentDefault), y = Cr(b.accentDefault, T);
     return {
       ...b,
       ...h,