lucent-ui 0.34.0 → 0.36.0

package/dist/index.js

@@ -1,6 +1,6 @@
 import { jsxs as g, jsx as e, Fragment as Q } from "react/jsx-runtime";
-import { T as V, I as ut, B as ce, g as St, a as Me } from "./LucentProvider-BoiXYqA4.js";
-import { b as gi, C as vi, c as bi, L as yi, S as xi, d as wi, e as ki, f as Si, h as Ti, i as Ci, j as Ii, k as Mi, l as zi, m as Ei, n as Ai, o as qi, p as Di, q as Bi, r as Ri, s as Li, t as Pi, u as Fi, v as Ni, w as $i, x as Wi, y as Oi, z as Vi, A as Hi, D as Gi, E as Ui, F as ji, G as _i, H as Yi, J as Ki, K as Xi, M as Ji, N as Zi, O as Qi, P as es, Q as ts, R as ns, U as rs, V as as, W as os, X as is, Y as ss, Z as ls, _ as cs } from "./LucentProvider-BoiXYqA4.js";
+import { T as V, I as ut, B as ce, g as St, a as Me } from "./LucentProvider-F0EN_7TD.js";
+import { b as gi, C as vi, c as bi, L as yi, S as xi, d as wi, e as ki, f as Si, h as Ti, i as Ci, j as Ii, k as Mi, l as zi, m as Ei, n as Ai, o as qi, p as Di, q as Bi, r as Ri, s as Li, t as Pi, u as Fi, v as Ni, w as $i, x as Wi, y as Oi, z as Vi, A as Hi, D as Gi, E as Ui, F as ji, G as _i, H as Yi, J as Ki, K as Xi, M as Ji, N as Zi, O as Qi, P as es, Q as ts, R as ns, U as rs, V as as, W as os, X as is, Y as ss, Z as ls, _ as cs } from "./LucentProvider-F0EN_7TD.js";
 import { forwardRef as pt, useRef as $, useEffect as H, useState as z, useCallback as J, useContext as ee, createContext as fe, useLayoutEffect as te, useId as Pe, Children as Tt, isValidElement as Ct, cloneElement as It } from "react";
 import { createPortal as ae } from "react-dom";
 const Ra = {
@@ -208,19 +208,19 @@ const Ra = {
   md: "var(--lucent-space-4)",
   lg: "var(--lucent-space-4)"
 }, At = pt(
-  ({ label: t, helperText: r, errorText: n, autoResize: o = !1, maxLength: a, showCount: i = !1, size: l = "md", id: s, value: c, onChange: p, disabled: f, style: u, ...k }, x) => {
-    const m = $(null), h = x ?? m, d = s ?? `lucent-textarea-${Math.random().toString(36).slice(2, 7)}`, b = !!n, w = !!f, y = typeof c == "string" ? c.length : 0;
+  ({ label: t, helperText: r, errorText: n, autoResize: o = !1, maxLength: a, showCount: i = !1, size: s = "md", id: l, value: c, onChange: u, disabled: f, style: p, ...w }, y) => {
+    const m = $(null), h = y ?? m, d = l ?? `lucent-textarea-${Math.random().toString(36).slice(2, 7)}`, b = !!n, x = !!f, k = typeof c == "string" ? c.length : 0;
     H(() => {
       if (!o) return;
       const C = h.current;
       C && (C.style.height = "auto", C.style.height = `${C.scrollHeight}px`);
     }, [c, o, h]);
-    const S = w ? "transparent" : b ? "var(--lucent-danger-default)" : "var(--lucent-border-default)";
+    const S = x ? "transparent" : b ? "var(--lucent-danger-default)" : "var(--lucent-border-default)";
     return /* @__PURE__ */ g("div", { style: { display: "flex", flexDirection: "column", gap: "var(--lucent-space-1)", width: "100%" }, children: [
       t && /* @__PURE__ */ e("label", { htmlFor: d, style: {
-        fontSize: zt[l],
+        fontSize: zt[s],
         fontWeight: "var(--lucent-font-weight-medium)",
-        color: w ? "var(--lucent-text-disabled)" : "var(--lucent-text-primary)",
+        color: x ? "var(--lucent-text-disabled)" : "var(--lucent-text-primary)",
         fontFamily: "var(--lucent-font-family-base)"
       }, children: t }),
       /* @__PURE__ */ e(
@@ -230,48 +230,48 @@ const Ra = {
           id: d,
           maxLength: a,
           value: c,
-          onChange: p,
+          onChange: u,
           disabled: f,
           "aria-invalid": b,
           "aria-describedby": b ? `${d}-error` : r ? `${d}-helper` : void 0,
           style: {
             width: "100%",
             minHeight: "100px",
-            padding: Et[l],
-            fontSize: Mt[l],
+            padding: Et[s],
+            fontSize: Mt[s],
             fontFamily: "var(--lucent-font-family-base)",
-            color: w ? "var(--lucent-text-disabled)" : "var(--lucent-text-primary)",
-            background: w ? "color-mix(in srgb, var(--lucent-text-primary) 6%, transparent)" : "var(--lucent-surface)",
+            color: x ? "var(--lucent-text-disabled)" : "var(--lucent-text-primary)",
+            background: x ? "color-mix(in srgb, var(--lucent-text-primary) 6%, transparent)" : "var(--lucent-surface)",
             border: `1px solid ${S}`,
             borderRadius: "var(--lucent-radius-lg)",
             outline: "none",
             resize: o ? "none" : "vertical",
             boxSizing: "border-box",
             lineHeight: "var(--lucent-line-height-base)",
-            cursor: w ? "not-allowed" : void 0,
+            cursor: x ? "not-allowed" : void 0,
             transition: [
               "border-color var(--lucent-duration-fast) var(--lucent-easing-default)",
               "box-shadow var(--lucent-duration-fast) var(--lucent-easing-default)"
             ].join(", "),
-            ...u
+            ...p
           },
           onMouseEnter: (C) => {
             var v;
-            !w && C.currentTarget !== document.activeElement && (C.currentTarget.style.borderColor = b ? "var(--lucent-danger-default)" : "var(--lucent-border-strong)"), (v = k.onMouseEnter) == null || v.call(k, C);
+            !x && C.currentTarget !== document.activeElement && (C.currentTarget.style.borderColor = b ? "var(--lucent-danger-default)" : "var(--lucent-border-strong)"), (v = w.onMouseEnter) == null || v.call(w, C);
           },
           onMouseLeave: (C) => {
             var v;
-            !w && C.currentTarget !== document.activeElement && (C.currentTarget.style.borderColor = b ? "var(--lucent-danger-default)" : "var(--lucent-border-default)"), (v = k.onMouseLeave) == null || v.call(k, C);
+            !x && C.currentTarget !== document.activeElement && (C.currentTarget.style.borderColor = b ? "var(--lucent-danger-default)" : "var(--lucent-border-default)"), (v = w.onMouseLeave) == null || v.call(w, C);
           },
           onFocus: (C) => {
             var v;
-            w || (C.currentTarget.style.borderColor = b ? "var(--lucent-danger-default)" : "var(--lucent-accent-border)", C.currentTarget.style.boxShadow = `0 0 0 3px ${b ? "var(--lucent-danger-subtle)" : "var(--lucent-accent-subtle)"}`, (v = k.onFocus) == null || v.call(k, C));
+            x || (C.currentTarget.style.borderColor = b ? "var(--lucent-danger-default)" : "var(--lucent-accent-border)", C.currentTarget.style.boxShadow = `0 0 0 3px ${b ? "var(--lucent-danger-subtle)" : "var(--lucent-accent-subtle)"}`, (v = w.onFocus) == null || v.call(w, C));
           },
           onBlur: (C) => {
             var v;
-            w || (C.currentTarget.style.borderColor = b ? "var(--lucent-danger-default)" : "var(--lucent-border-default)", C.currentTarget.style.boxShadow = "none", (v = k.onBlur) == null || v.call(k, C));
+            x || (C.currentTarget.style.borderColor = b ? "var(--lucent-danger-default)" : "var(--lucent-border-default)", C.currentTarget.style.boxShadow = "none", (v = w.onBlur) == null || v.call(w, C));
           },
-          ...k
+          ...w
         }
       ),
       /* @__PURE__ */ g("div", { style: { display: "flex", justifyContent: "space-between", alignItems: "flex-start" }, children: [
@@ -281,12 +281,12 @@ const Ra = {
         ] }),
         (i || a) && /* @__PURE__ */ g("span", { style: {
           fontSize: "var(--lucent-font-size-xs)",
-          color: a && y >= a ? "var(--lucent-danger-text)" : "var(--lucent-text-secondary)",
+          color: a && k >= a ? "var(--lucent-danger-text)" : "var(--lucent-text-secondary)",
           fontFamily: "var(--lucent-font-family-mono)",
           flexShrink: 0,
           marginLeft: "var(--lucent-space-2)"
         }, children: [
-          y,
+          k,
           a ? `/${a}` : ""
         ] })
       ] })
@@ -435,56 +435,56 @@ function ke({
   onDismiss: o,
   onClick: a,
   leftIcon: i,
-  swatch: l,
-  dot: s = !1,
+  swatch: s,
+  dot: l = !1,
   pulse: c = !1,
-  borderless: p = !1,
+  borderless: u = !1,
   ghost: f = !1,
-  disabled: u = !1,
-  style: k
+  disabled: p = !1,
+  style: w
 }) {
-  const x = qt[r], m = Dt[n], [h, d] = z(!1), b = s && c, w = s && !t, y = !u && (o || a), S = `color-mix(in srgb, ${x.color} 8%, transparent)`, C = m.dotSize * 3, v = {
+  const y = qt[r], m = Dt[n], [h, d] = z(!1), b = l && c, x = l && !t, k = !p && (o || a), S = `color-mix(in srgb, ${y.color} 8%, transparent)`, C = m.dotSize * 3, v = {
     display: "inline-flex",
     alignItems: "center",
-    justifyContent: w ? "center" : void 0,
-    gap: w ? void 0 : m.gap,
-    height: w ? C : m.height,
-    width: w ? C : void 0,
-    padding: w ? 0 : o ? m.paddingDismiss : m.padding,
+    justifyContent: x ? "center" : void 0,
+    gap: x ? void 0 : m.gap,
+    height: x ? C : m.height,
+    width: x ? C : void 0,
+    padding: x ? 0 : o ? m.paddingDismiss : m.padding,
     fontSize: m.fontSize,
     fontFamily: "var(--lucent-font-family-base)",
     fontWeight: "var(--lucent-font-weight-medium)",
     lineHeight: 1,
-    borderRadius: w ? "var(--lucent-radius-full)" : "var(--lucent-radius-lg)",
-    background: f ? h && y ? S : "transparent" : h && y ? x.hoverBg : x.bg,
-    color: x.color,
-    border: f || p ? "1px solid transparent" : `1px solid ${h && y ? x.hoverBorder : x.border}`,
+    borderRadius: x ? "var(--lucent-radius-full)" : "var(--lucent-radius-lg)",
+    background: f ? h && k ? S : "transparent" : h && k ? y.hoverBg : y.bg,
+    color: y.color,
+    border: f || u ? "1px solid transparent" : `1px solid ${h && k ? y.hoverBorder : y.border}`,
     whiteSpace: "nowrap",
     boxSizing: "border-box",
-    opacity: u ? 0.5 : 1,
-    transform: h && y ? "translateY(-1px)" : "none",
-    boxShadow: h && y && !f ? `0 2px 4px ${x.hoverBorder}22` : "none",
+    opacity: p ? 0.5 : 1,
+    transform: h && k ? "translateY(-1px)" : "none",
+    boxShadow: h && k && !f ? `0 2px 4px ${y.hoverBorder}22` : "none",
     transition: [
       "transform var(--lucent-duration-fast) var(--lucent-easing-default)",
       "box-shadow var(--lucent-duration-fast) var(--lucent-easing-default)",
       "border-color var(--lucent-duration-fast) var(--lucent-easing-default)",
       "background var(--lucent-duration-fast) var(--lucent-easing-default)"
     ].join(", "),
-    cursor: y ? "pointer" : "default",
+    cursor: k ? "pointer" : "default",
     // Reset button styles when onClick
     ...a ? { outline: "none" } : {},
-    ...k
-  }, q = /* @__PURE__ */ g(Q, { children: [
+    ...w
+  }, E = /* @__PURE__ */ g(Q, { children: [
     b && /* @__PURE__ */ e("style", { children: Bt }),
-    l && /* @__PURE__ */ e("span", { style: {
+    s && /* @__PURE__ */ e("span", { style: {
       width: m.dotSize + 2,
       height: m.dotSize + 2,
       borderRadius: "50%",
-      background: l,
+      background: s,
       border: "1px solid rgba(0,0,0,0.1)",
       flexShrink: 0
     } }),
-    s && !l && /* @__PURE__ */ g("span", { style: {
+    l && !s && /* @__PURE__ */ g("span", { style: {
       position: "relative",
       width: m.dotSize,
       height: m.dotSize,
@@ -504,7 +504,7 @@ function ke({
         animation: "lucent-chip-pulse 1.5s ease-out infinite"
       } })
     ] }),
-    i && !l && !s && /* @__PURE__ */ e("span", { style: {
+    i && !s && !l && /* @__PURE__ */ e("span", { style: {
       display: "inline-flex",
       alignItems: "center",
       justifyContent: "center",
@@ -517,10 +517,10 @@ function ke({
       "button",
       {
         type: "button",
-        onClick: u ? void 0 : (E) => {
-          E.stopPropagation(), o();
+        onClick: p ? void 0 : (A) => {
+          A.stopPropagation(), o();
         },
-        disabled: u,
+        disabled: p,
         "aria-label": "Dismiss",
         style: {
           display: "inline-flex",
@@ -533,7 +533,7 @@ function ke({
           borderRadius: "var(--lucent-radius-lg)",
           background: "transparent",
           color: "inherit",
-          cursor: u ? "not-allowed" : "pointer",
+          cursor: p ? "not-allowed" : "pointer",
           flexShrink: 0,
           lineHeight: 1
         },
@@ -542,7 +542,7 @@ function ke({
     )
   ] }), T = {
     onMouseEnter: () => {
-      u || d(!0);
+      p || d(!0);
     },
     onMouseLeave: () => d(!1)
   };
@@ -550,13 +550,13 @@ function ke({
     "button",
     {
       type: "button",
-      onClick: u ? void 0 : a,
-      disabled: u,
+      onClick: p ? void 0 : a,
+      disabled: p,
       style: v,
       ...T,
-      children: q
+      children: E
     }
-  ) : /* @__PURE__ */ e("span", { style: v, ...T, children: q });
+  ) : /* @__PURE__ */ e("span", { style: v, ...T, children: E });
 }
 const Na = {
   id: "chip",
@@ -623,9 +623,9 @@ function Pt(t, r) {
   return n.length === 1 ? (((o = n[0]) == null ? void 0 : o[0]) ?? "").toUpperCase() : ((((a = n[0]) == null ? void 0 : a[0]) ?? "") + (((i = n[n.length - 1]) == null ? void 0 : i[0]) ?? "")).toUpperCase();
 }
 function $a({ src: t, alt: r, size: n = "md", initials: o, style: a, ...i }) {
-  const l = Rt[n], s = Pt(r, o), c = {
-    width: l,
-    height: l,
+  const s = Rt[n], l = Pt(r, o), c = {
+    width: s,
+    height: s,
     borderRadius: "var(--lucent-radius-full)",
     flexShrink: 0,
     display: "inline-flex",
@@ -641,8 +641,8 @@ function $a({ src: t, alt: r, size: n = "md", initials: o, style: a, ...i }) {
     {
       src: t,
       alt: r,
-      width: l,
-      height: l,
+      width: s,
+      height: s,
       style: { ...c, objectFit: "cover" },
       ...i
     }
@@ -659,7 +659,7 @@ function $a({ src: t, alt: r, size: n = "md", initials: o, style: a, ...i }) {
         fontWeight: "var(--lucent-font-weight-semibold)",
         fontFamily: "var(--lucent-font-family-base)"
       },
-      children: s
+      children: l
     }
   );
 }
@@ -853,29 +853,29 @@ const Ha = {
     contained: o = !1,
     helperText: a,
     checked: i,
-    defaultChecked: l,
-    disabled: s,
+    defaultChecked: s,
+    disabled: l,
     id: c,
-    onChange: p,
+    onChange: u,
     style: f,
-    ...u
-  }, k) => {
-    const x = $(null), m = c ?? `lucent-checkbox-${Math.random().toString(36).slice(2, 7)}`, h = Wt[r], d = i !== void 0, [b, w] = z(l ?? !1), y = d ? !!i : b, S = $(y), [C, v] = z(0);
+    ...p
+  }, w) => {
+    const y = $(null), m = c ?? `lucent-checkbox-${Math.random().toString(36).slice(2, 7)}`, h = Wt[r], d = i !== void 0, [b, x] = z(s ?? !1), k = d ? !!i : b, S = $(k), [C, v] = z(0);
     H(() => {
-      !s && S.current !== y && (S.current = y, v((I) => I + 1));
-    }, [y, s]);
-    const q = J(
+      !l && S.current !== k && (S.current = k, v((I) => I + 1));
+    }, [k, l]);
+    const E = J(
       (I) => {
-        x.current = I, typeof k == "function" ? k(I) : k && (k.current = I);
+        y.current = I, typeof w == "function" ? w(I) : w && (w.current = I);
       },
-      [k]
+      [w]
     );
     H(() => {
-      x.current && (x.current.indeterminate = n);
+      y.current && (y.current.indeterminate = n);
     }, [n]);
     const T = (I) => {
-      d || w(I.target.checked), p == null || p(I);
-    }, E = s ? "var(--lucent-text-disabled)" : "var(--lucent-accent-fg)", N = {
+      d || x(I.target.checked), u == null || u(I);
+    }, A = l ? "var(--lucent-text-disabled)" : "var(--lucent-accent-fg)", N = {
       width: h,
       height: h,
       // fixed corner so global radius overrides (e.g. via customizer) don't
@@ -883,8 +883,8 @@ const Ha = {
       // rounded regardless of theming.
       // bumping up a bit to keep the box from feeling too sharp.
       borderRadius: "4px",
-      border: `1.5px solid ${s ? "transparent" : y || n ? "var(--lucent-accent-default)" : "var(--lucent-border-strong)"}`,
-      background: s ? "var(--lucent-surface-secondary)" : y || n ? "var(--lucent-accent-default)" : "var(--lucent-surface)",
+      border: `1.5px solid ${l ? "transparent" : k || n ? "var(--lucent-accent-default)" : "var(--lucent-border-strong)"}`,
+      background: l ? "var(--lucent-surface-secondary)" : k || n ? "var(--lucent-accent-default)" : "var(--lucent-surface)",
       display: "inline-flex",
       alignItems: "center",
       justifyContent: "center",
@@ -899,10 +899,10 @@ const Ha = {
           display: "inline-flex",
           alignItems: a ? "flex-start" : "center",
           gap: "var(--lucent-space-2)",
-          cursor: s ? "not-allowed" : "pointer",
+          cursor: l ? "not-allowed" : "pointer",
           fontFamily: "var(--lucent-font-family-base)",
           fontSize: r === "sm" ? "var(--lucent-font-size-sm)" : "var(--lucent-font-size-md)",
-          color: s ? "var(--lucent-text-disabled)" : "var(--lucent-text-primary)",
+          color: l ? "var(--lucent-text-disabled)" : "var(--lucent-text-primary)",
           userSelect: "none",
           ...o ? {} : f
         },
@@ -910,18 +910,18 @@ const Ha = {
           /* @__PURE__ */ e(
             "input",
             {
-              ref: q,
+              ref: E,
               type: "checkbox",
               id: m,
               checked: d ? i : b,
-              disabled: s,
+              disabled: l,
               onChange: T,
               style: { position: "absolute", opacity: 0, width: 0, height: 0, margin: 0, pointerEvents: "none" },
-              ...u
+              ...p
             }
           ),
           /* @__PURE__ */ g("span", { "aria-hidden": !0, style: N, children: [
-            y && !n && /* @__PURE__ */ e(
+            k && !n && /* @__PURE__ */ e(
               "svg",
               {
                 width: h - 4,
@@ -929,7 +929,7 @@ const Ha = {
                 viewBox: "0 0 10 10",
                 fill: "none",
                 style: { animation: "lucent-cb-mark 200ms cubic-bezier(0.34, 1.56, 0.64, 1) forwards" },
-                children: /* @__PURE__ */ e("path", { d: "M1.5 5L4 7.5L8.5 2.5", stroke: E, strokeWidth: 1.5, strokeLinecap: "round", strokeLinejoin: "round" })
+                children: /* @__PURE__ */ e("path", { d: "M1.5 5L4 7.5L8.5 2.5", stroke: A, strokeWidth: 1.5, strokeLinecap: "round", strokeLinejoin: "round" })
               }
             ),
             n && /* @__PURE__ */ e(
@@ -940,7 +940,7 @@ const Ha = {
                 viewBox: "0 0 10 10",
                 fill: "none",
                 style: { animation: "lucent-cb-mark 200ms cubic-bezier(0.34, 1.56, 0.64, 1) forwards" },
-                children: /* @__PURE__ */ e("path", { d: "M2 5H8", stroke: E, strokeWidth: 1.5, strokeLinecap: "round" })
+                children: /* @__PURE__ */ e("path", { d: "M2 5H8", stroke: A, strokeWidth: 1.5, strokeLinecap: "round" })
               }
             )
           ] }, C),
@@ -951,7 +951,7 @@ const Ha = {
             }, children: t }),
             a && /* @__PURE__ */ e("span", { style: {
               fontSize: "var(--lucent-font-size-xs)",
-              color: s ? "var(--lucent-text-disabled)" : "var(--lucent-text-secondary)",
+              color: l ? "var(--lucent-text-disabled)" : "var(--lucent-text-secondary)",
               marginTop: "2px"
             }, children: a })
           ] })
@@ -970,14 +970,14 @@ const Ha = {
             padding: a ? "var(--lucent-space-3)" : "0 var(--lucent-space-3)",
             display: "flex",
             alignItems: a ? "flex-start" : "center",
-            background: y && !s ? "color-mix(in srgb, var(--lucent-text-primary) 6%, transparent)" : "transparent",
+            background: k && !l ? "color-mix(in srgb, var(--lucent-text-primary) 6%, transparent)" : "transparent",
             transition: "border-color var(--lucent-duration-fast) var(--lucent-easing-default), background var(--lucent-duration-fast) var(--lucent-easing-default)",
-            cursor: s ? "not-allowed" : "pointer",
+            cursor: l ? "not-allowed" : "pointer",
             ...f
           },
           onClick: (I) => {
             var P;
-            s || I.target === I.currentTarget && ((P = x.current) == null || P.click());
+            l || I.target === I.currentTarget && ((P = y.current) == null || P.click());
           },
           children: R
         }
@@ -1090,7 +1090,7 @@ function Gt({
   disabled: o,
   orientation: a = "vertical",
   label: i,
-  children: l
+  children: s
 }) {
   return /* @__PURE__ */ e(ht.Provider, { value: { name: t, value: r, onChange: n, disabled: o ?? !1 }, children: /* @__PURE__ */ e(
     "div",
@@ -1103,7 +1103,7 @@ function Gt({
         gap: a === "vertical" ? "var(--lucent-space-3)" : "var(--lucent-space-4)",
         flexWrap: "wrap"
       },
-      children: l
+      children: s
     }
   ) });
 }
@@ -1112,23 +1112,23 @@ const Ut = { sm: 14, md: 16, lg: 20 }, jt = { sm: "calc(var(--lucent-space-8) *
   md: "var(--lucent-font-size-md)",
   lg: "var(--lucent-font-size-md)"
 };
-function Ua({ value: t, label: r, size: n = "md", contained: o = !1, helperText: a, disabled: i, id: l, onChange: s, checked: c, style: p, ...f }) {
-  const u = ee(ht), k = l ?? `lucent-radio-${Math.random().toString(36).slice(2, 7)}`, x = Ut[n], m = i ?? (u == null ? void 0 : u.disabled) ?? !1, h = u ? u.value === t : !!c, d = $(h), [b, w] = z(0);
+function Ua({ value: t, label: r, size: n = "md", contained: o = !1, helperText: a, disabled: i, id: s, onChange: l, checked: c, style: u, ...f }) {
+  const p = ee(ht), w = s ?? `lucent-radio-${Math.random().toString(36).slice(2, 7)}`, y = Ut[n], m = i ?? (p == null ? void 0 : p.disabled) ?? !1, h = p ? p.value === t : !!c, d = $(h), [b, x] = z(0);
   H(() => {
-    !m && d.current !== h && (d.current = h, w((q) => q + 1));
+    !m && d.current !== h && (d.current = h, x((E) => E + 1));
   }, [h, m]);
-  const y = (q) => {
-    u == null || u.onChange(t), s == null || s(q);
+  const k = (E) => {
+    p == null || p.onChange(t), l == null || l(E);
   }, S = {
-    width: x / 2,
-    height: x / 2,
+    width: y / 2,
+    height: y / 2,
     borderRadius: "50%",
     background: m ? "var(--lucent-text-disabled)" : "var(--lucent-accent-fg)",
     animation: h ? "lucent-radio-dot 200ms cubic-bezier(0.34, 1.56, 0.64, 1) forwards" : void 0,
     opacity: h ? 1 : 0
   }, C = {
-    width: x,
-    height: x,
+    width: y,
+    height: y,
     borderRadius: "50%",
     border: `1.5px solid ${m ? "transparent" : h ? "var(--lucent-accent-default)" : "var(--lucent-border-strong)"}`,
     background: m ? "var(--lucent-surface-secondary)" : h ? "var(--lucent-accent-default)" : "var(--lucent-surface)",
@@ -1150,19 +1150,19 @@ function Ua({ value: t, label: r, size: n = "md", contained: o = !1, helperText:
         fontSize: _t[n],
         color: m ? "var(--lucent-text-disabled)" : "var(--lucent-text-primary)",
         userSelect: "none",
-        ...o ? {} : p
+        ...o ? {} : u
       },
       children: [
         /* @__PURE__ */ e(
           "input",
           {
             type: "radio",
-            id: k,
+            id: w,
             value: t,
-            name: (u == null ? void 0 : u.name) ?? f.name,
+            name: (p == null ? void 0 : p.name) ?? f.name,
             checked: h,
             disabled: m,
-            onChange: y,
+            onChange: k,
             style: { position: "absolute", opacity: 0, width: 0, height: 0, margin: 0, pointerEvents: "none" },
             ...f
           }
@@ -1194,11 +1194,11 @@ function Ua({ value: t, label: r, size: n = "md", contained: o = !1, helperText:
           background: h && !m ? "color-mix(in srgb, var(--lucent-text-primary) 6%, transparent)" : "transparent",
           transition: "border-color var(--lucent-duration-fast) var(--lucent-easing-default), background var(--lucent-duration-fast) var(--lucent-easing-default)",
           cursor: m ? "not-allowed" : "pointer",
-          ...p
+          ...u
         },
-        onClick: (q) => {
-          if (!m && q.target === q.currentTarget) {
-            const T = q.currentTarget.querySelector("input");
+        onClick: (E) => {
+          if (!m && E.target === E.currentTarget) {
+            const T = E.currentTarget.querySelector("input");
             T == null || T.click();
           }
         },
@@ -1520,7 +1520,7 @@ const _a = {
   lg: { fontSize: "var(--lucent-font-size-md)", height: "28px", padding: "0 var(--lucent-space-4)", iconSize: 14, gap: "var(--lucent-space-2)" }
 };
 function Xa({ children: t, variant: r = "neutral", size: n = "md", onDismiss: o, disabled: a }) {
-  const i = Yt[r], l = Kt[n], [s, c] = z(!1), p = !a && o;
+  const i = Yt[r], s = Kt[n], [l, c] = z(!1), u = !a && o;
   return /* @__PURE__ */ g(
     "span",
     {
@@ -1531,24 +1531,24 @@ function Xa({ children: t, variant: r = "neutral", size: n = "md", onDismiss: o,
       style: {
         display: "inline-flex",
         alignItems: "center",
-        gap: l.gap,
-        height: l.height,
-        padding: o ? `0 var(--lucent-space-2) 0 ${l.padding.split(" ")[1]}` : l.padding,
-        fontSize: l.fontSize,
+        gap: s.gap,
+        height: s.height,
+        padding: o ? `0 var(--lucent-space-2) 0 ${s.padding.split(" ")[1]}` : s.padding,
+        fontSize: s.fontSize,
         fontFamily: "var(--lucent-font-family-base)",
         fontWeight: "var(--lucent-font-weight-medium)",
         lineHeight: 1,
         borderRadius: "var(--lucent-radius-lg)",
         background: i.bg,
         color: i.color,
-        border: `1px solid ${s && !a ? i.dismissHover : i.border}`,
+        border: `1px solid ${l && !a ? i.dismissHover : i.border}`,
         whiteSpace: "nowrap",
         boxSizing: "border-box",
         opacity: a ? 0.5 : 1,
-        transform: s && p ? "translateY(-1px)" : "none",
-        boxShadow: s && p ? `0 2px 4px ${i.dismissHover}22` : "none",
+        transform: l && u ? "translateY(-1px)" : "none",
+        boxShadow: l && u ? `0 2px 4px ${i.dismissHover}22` : "none",
         transition: "transform var(--lucent-duration-fast) var(--lucent-easing-default), box-shadow var(--lucent-duration-fast) var(--lucent-easing-default), border-color var(--lucent-duration-fast) var(--lucent-easing-default)",
-        cursor: p ? "pointer" : "default"
+        cursor: u ? "pointer" : "default"
       },
       children: [
         t,
@@ -1565,8 +1565,8 @@ function Xa({ children: t, variant: r = "neutral", size: n = "md", onDismiss: o,
               display: "inline-flex",
               alignItems: "center",
               justifyContent: "center",
-              width: l.iconSize + 4,
-              height: l.iconSize + 4,
+              width: s.iconSize + 4,
+              height: s.iconSize + 4,
               padding: 0,
               border: "none",
               borderRadius: "var(--lucent-radius-lg)",
@@ -1582,7 +1582,7 @@ function Xa({ children: t, variant: r = "neutral", size: n = "md", onDismiss: o,
             onMouseLeave: (f) => {
               f.currentTarget.style.background = "transparent";
             },
-            children: /* @__PURE__ */ e("svg", { width: l.iconSize, height: l.iconSize, viewBox: "0 0 10 10", fill: "none", stroke: "currentColor", strokeWidth: 1.5, strokeLinecap: "round", children: /* @__PURE__ */ e("path", { d: "M2 2L8 8M8 2L2 8" }) })
+            children: /* @__PURE__ */ e("svg", { width: s.iconSize, height: s.iconSize, viewBox: "0 0 10 10", fill: "none", stroke: "currentColor", strokeWidth: 1.5, strokeLinecap: "round", children: /* @__PURE__ */ e("path", { d: "M2 2L8 8M8 2L2 8" }) })
           }
         )
       ]
@@ -1682,18 +1682,18 @@ const Ja = {
   }
 };
 function Za({ content: t, children: r, placement: n = "top", delay: o = 300 }) {
-  const [a, i] = z(!1), l = $(null), s = () => {
-    l.current = setTimeout(() => i(!0), o);
+  const [a, i] = z(!1), s = $(null), l = () => {
+    s.current = setTimeout(() => i(!0), o);
   }, c = () => {
-    l.current && clearTimeout(l.current), i(!1);
+    s.current && clearTimeout(s.current), i(!1);
   };
   return t ? /* @__PURE__ */ g(
     "span",
     {
       style: { position: "relative", display: "inline-flex" },
-      onMouseEnter: s,
+      onMouseEnter: l,
       onMouseLeave: c,
-      onFocus: s,
+      onFocus: l,
       onBlur: c,
       children: [
         r,
@@ -1974,15 +1974,15 @@ function ro({
   icon: o,
   disabled: a = !1,
   inverse: i = !1,
-  onClick: l,
-  as: s,
+  onClick: s,
+  as: l,
   style: c
 }) {
   return /* @__PURE__ */ g(
-    s ?? "a",
+    l ?? "a",
     {
       href: a ? void 0 : r,
-      onClick: a ? void 0 : l,
+      onClick: a ? void 0 : s,
       "aria-current": n ? "page" : void 0,
       "aria-disabled": a || void 0,
       style: {
@@ -2130,17 +2130,19 @@ function oo({
   language: r,
   tabs: n,
   variant: o = "code",
-  helperText: a,
-  showCopyButton: i = !0,
-  style: l
+  wrap: a,
+  minimal: i,
+  helperText: s,
+  showCopyButton: l = !0,
+  style: c
 }) {
-  var b, w;
-  const s = !!(n != null && n.length), [c, p] = z(0), [f, u] = z(!1), k = s ? ((b = n[c]) == null ? void 0 : b.code) ?? "" : t ?? "", x = s ? (w = n[c]) == null ? void 0 : w.language : r, m = async () => {
+  var k, S;
+  const u = !!(n != null && n.length), [f, p] = z(0), [w, y] = z(!1), m = u ? ((k = n[f]) == null ? void 0 : k.code) ?? "" : t ?? "", h = u ? (S = n[f]) == null ? void 0 : S.language : r, d = async () => {
     try {
-      await navigator.clipboard.writeText(k), u(!0), setTimeout(() => u(!1), Qt);
+      await navigator.clipboard.writeText(m), y(!0), setTimeout(() => y(!1), Qt);
     } catch {
     }
-  }, h = {
+  }, b = {
     display: "inline-flex",
     alignItems: "center",
     gap: "var(--lucent-space-1)",
@@ -2148,27 +2150,27 @@ function oo({
     border: "1px solid transparent",
     borderRadius: "var(--lucent-radius-md)",
     background: "transparent",
-    color: f ? "var(--lucent-success-default)" : "var(--lucent-text-secondary)",
+    color: w ? "var(--lucent-success-default)" : "var(--lucent-text-secondary)",
     fontFamily: "var(--lucent-font-family-base)",
     fontSize: "var(--lucent-font-size-xs)",
     cursor: "pointer",
     flexShrink: 0,
     transition: "color var(--lucent-duration-fast) var(--lucent-easing-default), background var(--lucent-duration-fast) var(--lucent-easing-default)"
-  }, d = () => /* @__PURE__ */ g(
+  }, x = () => /* @__PURE__ */ g(
     "button",
     {
-      onClick: m,
-      "aria-label": f ? "Copied!" : "Copy code",
-      style: h,
-      onMouseEnter: (y) => {
-        f || (y.currentTarget.style.background = "var(--lucent-surface-secondary)", y.currentTarget.style.color = "var(--lucent-text-primary)");
+      onClick: d,
+      "aria-label": w ? "Copied!" : "Copy code",
+      style: b,
+      onMouseEnter: (C) => {
+        w || (C.currentTarget.style.background = "var(--lucent-surface-secondary)", C.currentTarget.style.color = "var(--lucent-text-primary)");
       },
-      onMouseLeave: (y) => {
-        f || (y.currentTarget.style.background = "transparent", y.currentTarget.style.color = "var(--lucent-text-secondary)");
+      onMouseLeave: (C) => {
+        w || (C.currentTarget.style.background = "transparent", C.currentTarget.style.color = "var(--lucent-text-secondary)");
       },
       children: [
-        f ? /* @__PURE__ */ e(tn, {}) : /* @__PURE__ */ e(en, {}),
-        f ? "Copied!" : "Copy"
+        w ? /* @__PURE__ */ e(tn, {}) : /* @__PURE__ */ e(en, {}),
+        w ? "Copied!" : "Copy"
       ]
     }
   );
@@ -2179,10 +2181,10 @@ function oo({
         borderRadius: "var(--lucent-radius-lg)",
         border: "1px solid var(--lucent-border-default)",
         overflow: "hidden",
-        ...l
+        ...c
       },
       children: [
-        s && /* @__PURE__ */ e(
+        u && /* @__PURE__ */ e(
           "div",
           {
             style: {
@@ -2192,13 +2194,13 @@ function oo({
               borderBottom: "1px solid var(--lucent-border-default)",
               padding: "0 var(--lucent-space-2)"
             },
-            children: n.map((y, S) => {
-              const C = S === c;
+            children: n.map((C, v) => {
+              const E = v === f;
               return /* @__PURE__ */ g(
                 "button",
                 {
                   onClick: () => {
-                    p(S), u(!1);
+                    p(v), y(!1);
                   },
                   style: {
                     display: "inline-flex",
@@ -2206,47 +2208,47 @@ function oo({
                     gap: "var(--lucent-space-1)",
                     padding: "var(--lucent-space-2) var(--lucent-space-3)",
                     border: "none",
-                    borderBottom: C ? "2px solid var(--lucent-accent-default)" : "2px solid transparent",
+                    borderBottom: E ? "2px solid var(--lucent-accent-default)" : "2px solid transparent",
                     marginBottom: -1,
                     background: "transparent",
-                    color: C ? "var(--lucent-text-primary)" : "var(--lucent-text-secondary)",
+                    color: E ? "var(--lucent-text-primary)" : "var(--lucent-text-secondary)",
                     fontFamily: "var(--lucent-font-family-base)",
                     fontSize: "var(--lucent-font-size-sm)",
-                    fontWeight: C ? "var(--lucent-font-weight-semibold)" : "var(--lucent-font-weight-regular)",
+                    fontWeight: E ? "var(--lucent-font-weight-semibold)" : "var(--lucent-font-weight-regular)",
                     cursor: "pointer",
                     transition: "color var(--lucent-duration-fast) var(--lucent-easing-default)",
                     whiteSpace: "nowrap"
                   },
-                  onMouseEnter: (v) => {
-                    C || (v.currentTarget.style.color = "var(--lucent-text-primary)");
+                  onMouseEnter: (T) => {
+                    E || (T.currentTarget.style.color = "var(--lucent-text-primary)");
                   },
-                  onMouseLeave: (v) => {
-                    C || (v.currentTarget.style.color = "var(--lucent-text-secondary)");
+                  onMouseLeave: (T) => {
+                    E || (T.currentTarget.style.color = "var(--lucent-text-secondary)");
                   },
                   children: [
-                    y.icon !== void 0 && /* @__PURE__ */ e("span", { style: { display: "inline-flex", alignItems: "center" }, children: y.icon }),
-                    y.label
+                    C.icon !== void 0 && /* @__PURE__ */ e("span", { style: { display: "inline-flex", alignItems: "center" }, children: C.icon }),
+                    C.label
                   ]
                 },
-                y.label
+                C.label
               );
             })
           }
         ),
-        !s && (!!x || i) && /* @__PURE__ */ g(
+        !i && !u && (!!h || l) && /* @__PURE__ */ g(
           "div",
           {
             style: {
               display: "flex",
               alignItems: "center",
-              justifyContent: x ? "space-between" : "flex-end",
+              justifyContent: h ? "space-between" : "flex-end",
               padding: "0 var(--lucent-space-3)",
               height: 36,
-              background: "color-mix(in srgb, var(--lucent-text-primary) 5%, transparent)",
+              background: "var(--lucent-surface)",
               borderBottom: "1px solid var(--lucent-border-default)"
             },
             children: [
-              x && /* @__PURE__ */ e(
+              h && /* @__PURE__ */ e(
                 "span",
                 {
                   style: {
@@ -2255,14 +2257,14 @@ function oo({
                     color: "var(--lucent-text-secondary)",
                     letterSpacing: "var(--lucent-letter-spacing-wide)"
                   },
-                  children: x
+                  children: h
                 }
               ),
-              i && /* @__PURE__ */ e(d, {})
+              l && /* @__PURE__ */ e(x, {})
             ]
           }
         ),
-        a && /* @__PURE__ */ e(
+        s && /* @__PURE__ */ e(
           "div",
           {
             style: {
@@ -2273,7 +2275,7 @@ function oo({
               background: "color-mix(in srgb, var(--lucent-text-primary) 5%, transparent)",
               borderBottom: "1px solid var(--lucent-border-default)"
             },
-            children: a
+            children: s
           }
         ),
         o === "code" ? /* @__PURE__ */ g("div", { style: { position: "relative" }, children: [
@@ -2283,10 +2285,11 @@ function oo({
               style: {
                 margin: 0,
                 padding: "var(--lucent-space-4)",
-                paddingRight: s && i ? "var(--lucent-space-16)" : "var(--lucent-space-4)",
+                paddingRight: (u || i) && l ? "var(--lucent-space-16)" : "var(--lucent-space-4)",
                 background: "color-mix(in srgb, var(--lucent-text-primary) 5%, transparent)",
-                overflowX: "auto",
-                lineHeight: 1.65
+                overflowX: a ? "hidden" : "auto",
+                lineHeight: 1.65,
+                ...a && { whiteSpace: "pre-wrap", wordBreak: "break-word" }
               },
               children: /* @__PURE__ */ e(
                 "code",
@@ -2296,12 +2299,12 @@ function oo({
                     fontSize: "var(--lucent-font-size-sm)",
                     color: "var(--lucent-text-primary)"
                   },
-                  children: k
+                  children: m
                 }
               )
             }
           ),
-          s && i && /* @__PURE__ */ e("div", { style: { position: "absolute", top: "var(--lucent-space-2)", right: "var(--lucent-space-3)" }, children: /* @__PURE__ */ e(d, {}) })
+          (u || i) && l && /* @__PURE__ */ e("div", { style: { position: "absolute", top: i ? 0 : "var(--lucent-space-2)", bottom: i ? 0 : void 0, right: "var(--lucent-space-3)", display: "flex", alignItems: "center" }, children: /* @__PURE__ */ e(x, {}) })
         ] }) : (
           /* ── Prompt area ── */
           /* @__PURE__ */ g(
@@ -2321,16 +2324,15 @@ function oo({
                     style: {
                       flex: 1,
                       overflow: "hidden",
-                      whiteSpace: "nowrap",
-                      textOverflow: "ellipsis",
+                      ...a ? { whiteSpace: "pre-wrap", wordBreak: "break-word" } : { whiteSpace: "nowrap", textOverflow: "ellipsis" },
                       fontFamily: "var(--lucent-font-family-mono)",
                       fontSize: "var(--lucent-font-size-sm)",
                       color: "var(--lucent-text-primary)"
                     },
-                    children: k
+                    children: m
                   }
                 ),
-                i && /* @__PURE__ */ e(d, {})
+                l && /* @__PURE__ */ e(x, {})
               ]
             }
           )
@@ -2374,6 +2376,20 @@ const io = {
       enumValues: ["code", "prompt"],
       description: '"code" renders a <pre><code> block with horizontal scroll. "prompt" renders a single-line truncated span suited to AI prompts.'
     },
+    {
+      name: "minimal",
+      type: "boolean",
+      required: !1,
+      default: "false",
+      description: "Hides the header bar and shows only a corner copy button overlay."
+    },
+    {
+      name: "wrap",
+      type: "boolean",
+      required: !1,
+      default: "false",
+      description: "When true, wraps long lines instead of scrolling horizontally."
+    },
     {
       name: "helperText",
       type: "string",
@@ -2865,8 +2881,8 @@ function po({
   as: o = "div",
   wrap: a = !1,
   children: i,
-  style: l,
-  ...s
+  style: s,
+  ...l
 }) {
   const c = {
     display: "flex",
@@ -2875,9 +2891,9 @@ function po({
     alignItems: cn[r],
     justifyContent: dn[n],
     ...a && { flexWrap: "wrap" },
-    ...l
+    ...s
   };
-  return /* @__PURE__ */ e(o, { style: c, ...s, children: i });
+  return /* @__PURE__ */ e(o, { style: c, ...l, children: i });
 }
 const ho = {
   id: "stack",
@@ -3011,8 +3027,8 @@ function fo({
   as: o = "div",
   wrap: a = !1,
   children: i,
-  style: l,
-  ...s
+  style: s,
+  ...l
 }) {
   const c = {
     display: "flex",
@@ -3021,9 +3037,9 @@ function fo({
     alignItems: un[r],
     justifyContent: pn[n],
     ...a && { flexWrap: "wrap" },
-    ...l
+    ...s
   };
-  return /* @__PURE__ */ e(o, { style: c, ...s, children: i });
+  return /* @__PURE__ */ e(o, { style: c, ...l, children: i });
 }
 const mo = {
   id: "row",
@@ -3162,10 +3178,10 @@ function go({
   size: o = "md",
   warnAt: a,
   dangerAt: i,
-  label: l,
-  style: s
+  label: s,
+  style: l
 }) {
-  const c = Math.max(0, Math.min(t, r)), p = r > 0 ? c / r * 100 : 0, f = mn(c, r, n, a, i), u = hn[o], k = fn[f], x = l === !0 ? `${Math.round(p)}%` : l || null;
+  const c = Math.max(0, Math.min(t, r)), u = r > 0 ? c / r * 100 : 0, f = mn(c, r, n, a, i), p = hn[o], w = fn[f], y = s === !0 ? `${Math.round(u)}%` : s || null;
   return /* @__PURE__ */ g(
     "div",
     {
@@ -3174,7 +3190,7 @@ function go({
         alignItems: "center",
         gap: "var(--lucent-space-3)",
         fontFamily: "var(--lucent-font-family-base)",
-        ...s
+        ...l
       },
       children: [
         /* @__PURE__ */ e(
@@ -3186,8 +3202,8 @@ function go({
             "aria-valuemax": r,
             style: {
               flex: 1,
-              height: u.height,
-              borderRadius: u.radius,
+              height: p.height,
+              borderRadius: p.radius,
               background: "color-mix(in srgb, var(--lucent-text-primary) 8%, transparent)",
               overflow: "hidden"
             },
@@ -3195,17 +3211,17 @@ function go({
               "div",
               {
                 style: {
-                  width: `${p}%`,
+                  width: `${u}%`,
                   height: "100%",
-                  borderRadius: u.radius,
-                  background: k,
+                  borderRadius: p.radius,
+                  background: w,
                   transition: "width var(--lucent-duration-base) var(--lucent-easing-default), background var(--lucent-duration-base) var(--lucent-easing-default)"
                 }
               }
             )
           }
         ),
-        x != null && /* @__PURE__ */ e(
+        y != null && /* @__PURE__ */ e(
           "span",
           {
             style: {
@@ -3215,7 +3231,7 @@ function go({
               whiteSpace: "nowrap",
               flexShrink: 0
             },
-            children: x
+            children: y
           }
         )
       ]
@@ -3278,17 +3294,17 @@ const vo = {
   lg: 16
 }, je = fe(null), ve = 4;
 function xn(t, r, n) {
-  const o = r.offsetWidth, a = r.offsetHeight, i = window.innerWidth, l = window.innerHeight;
-  let s = 0, c = 0, p = n;
+  const o = r.offsetWidth, a = r.offsetHeight, i = window.innerWidth, s = window.innerHeight;
+  let l = 0, c = 0, u = n;
   const f = {
     top: t.top - a - ve,
     bottom: t.bottom + ve,
     left: t.left - o - ve,
     right: t.right + ve
   };
-  p.startsWith("bottom") ? (s = f.bottom, s + a > l && f.top >= 0 && (s = f.top, p = p.replace("bottom", "top"))) : p.startsWith("top") ? (s = f.top, s < 0 && f.bottom + a <= l && (s = f.bottom, p = p.replace("top", "bottom"))) : p === "left" ? (s = t.top + t.height / 2 - a / 2, c = f.left, c < 0 && f.right + o <= i && (c = f.right, p = "right")) : p === "right" && (s = t.top + t.height / 2 - a / 2, c = f.right, c + o > i && f.left >= 0 && (c = f.left, p = "left")), (p.startsWith("top") || p.startsWith("bottom")) && (p.endsWith("-start") ? c = t.left : p.endsWith("-end") ? c = t.right - o : c = t.left + t.width / 2 - o / 2), c + o > i && (c = i - o - 8), c < 0 && (c = 8), s + a > l && (s = l - a - 8), s < 0 && (s = 8);
-  let u = "top left";
-  return p.startsWith("top") ? u = p.endsWith("-end") ? "bottom right" : p.endsWith("-start") ? "bottom left" : "bottom center" : p.startsWith("bottom") ? u = p.endsWith("-end") ? "top right" : p.endsWith("-start") ? "top left" : "top center" : p === "left" ? u = "center right" : p === "right" && (u = "center left"), { top: s, left: c, transformOrigin: u };
+  u.startsWith("bottom") ? (l = f.bottom, l + a > s && f.top >= 0 && (l = f.top, u = u.replace("bottom", "top"))) : u.startsWith("top") ? (l = f.top, l < 0 && f.bottom + a <= s && (l = f.bottom, u = u.replace("top", "bottom"))) : u === "left" ? (l = t.top + t.height / 2 - a / 2, c = f.left, c < 0 && f.right + o <= i && (c = f.right, u = "right")) : u === "right" && (l = t.top + t.height / 2 - a / 2, c = f.right, c + o > i && f.left >= 0 && (c = f.left, u = "left")), (u.startsWith("top") || u.startsWith("bottom")) && (u.endsWith("-start") ? c = t.left : u.endsWith("-end") ? c = t.right - o : c = t.left + t.width / 2 - o / 2), c + o > i && (c = i - o - 8), c < 0 && (c = 8), l + a > s && (l = s - a - 8), l < 0 && (l = 8);
+  let p = "top left";
+  return u.startsWith("top") ? p = u.endsWith("-end") ? "bottom right" : u.endsWith("-start") ? "bottom left" : "bottom center" : u.startsWith("bottom") ? p = u.endsWith("-end") ? "top right" : u.endsWith("-start") ? "top left" : "top center" : u === "left" ? p = "center right" : u === "right" && (p = "center left"), { top: l, left: c, transformOrigin: p };
 }
 function Fe({
   onSelect: t,
@@ -3297,21 +3313,21 @@ function Fe({
   shortcut: o,
   disabled: a = !1,
   danger: i = !1,
-  selected: l = !1,
-  style: s
+  selected: s = !1,
+  style: l
 }) {
-  const c = ee(je), p = $(-1);
-  p.current === -1 && c && (p.current = c.getItemIndex(), c.registerItem(p.current, a));
-  const f = c ? c.activeIndex === p.current : !1, u = (c == null ? void 0 : c.size) ?? "md", k = Ue[u], x = vn[u], m = yn[u], h = () => {
+  const c = ee(je), u = $(-1);
+  u.current === -1 && c && (u.current = c.getItemIndex(), c.registerItem(u.current, a));
+  const f = c ? c.activeIndex === u.current : !1, p = (c == null ? void 0 : c.size) ?? "md", w = Ue[p], y = vn[p], m = yn[p], h = () => {
     a || (t(), c == null || c.close());
   }, d = () => {
-    !a && c && c.setActiveIndex(p.current);
+    !a && c && c.setActiveIndex(u.current);
   }, b = a ? "var(--lucent-text-disabled)" : i ? "var(--lucent-danger-text)" : "var(--lucent-text-primary)";
   return /* @__PURE__ */ g(
     "div",
     {
       role: "menuitemcheckbox",
-      "aria-checked": l,
+      "aria-checked": s,
       "aria-disabled": a || void 0,
       "data-active": f || void 0,
       tabIndex: -1,
@@ -3320,16 +3336,16 @@ function Fe({
       style: {
         display: "flex",
         alignItems: "center",
-        gap: k,
-        padding: k,
+        gap: w,
+        padding: w,
         borderRadius: "var(--lucent-radius-md)",
         cursor: a ? "not-allowed" : "pointer",
-        background: l ? "color-mix(in srgb, var(--lucent-accent-default) 12%, var(--lucent-surface-overlay))" : f ? "var(--lucent-surface-secondary)" : "transparent",
-        boxShadow: l ? "var(--lucent-shadow-sm)" : "none",
+        background: s ? "color-mix(in srgb, var(--lucent-accent-default) 12%, var(--lucent-surface-overlay))" : f ? "var(--lucent-surface-secondary)" : "transparent",
+        boxShadow: s ? "var(--lucent-shadow-sm)" : "none",
         transition: "background var(--lucent-duration-fast) var(--lucent-easing-default), box-shadow var(--lucent-duration-fast) var(--lucent-easing-default)",
         opacity: a ? 0.5 : 1,
         outline: "none",
-        ...s
+        ...l
       },
       children: [
         n && /* @__PURE__ */ e("span", { style: {
@@ -3337,9 +3353,9 @@ function Fe({
           display: "flex",
           color: a ? "var(--lucent-text-disabled)" : i ? "var(--lucent-danger-text)" : "var(--lucent-text-secondary)"
         }, children: n }),
-        /* @__PURE__ */ e("span", { style: { flex: 1, minWidth: 0 }, children: /* @__PURE__ */ e(V, { size: x, style: { color: b }, children: r }) }),
-        o && /* @__PURE__ */ e(V, { size: u === "lg" ? "sm" : "xs", style: { color: "var(--lucent-text-secondary)", flexShrink: 0 }, children: o }),
-        l && /* @__PURE__ */ e("span", { style: {
+        /* @__PURE__ */ e("span", { style: { flex: 1, minWidth: 0 }, children: /* @__PURE__ */ e(V, { size: y, style: { color: b }, children: r }) }),
+        o && /* @__PURE__ */ e(V, { size: p === "lg" ? "sm" : "xs", style: { color: "var(--lucent-text-secondary)", flexShrink: 0 }, children: o }),
+        s && /* @__PURE__ */ e("span", { style: {
           flexShrink: 0,
           display: "flex",
           color: "var(--lucent-accent-default)"
@@ -3376,106 +3392,106 @@ function ft({
   size: o = "md",
   open: a,
   onOpenChange: i,
-  portalContainer: l,
-  style: s
+  portalContainer: s,
+  style: l
 }) {
-  const c = a !== void 0, [p, f] = z(!1), u = c ? a : p, [k, x] = z(!1), [m, h] = z("idle"), d = $(null), b = $(null), w = $(null), y = $(!1), [S, C] = z(null), v = $(0), q = $(/* @__PURE__ */ new Map()), [T, E] = z(-1);
-  if (!y.current && typeof document < "u") {
-    const A = document.createElement("style");
-    A.textContent = gn, document.head.appendChild(A), y.current = !0;
+  const c = a !== void 0, [u, f] = z(!1), p = c ? a : u, [w, y] = z(!1), [m, h] = z("idle"), d = $(null), b = $(null), x = $(null), k = $(!1), [S, C] = z(null), v = $(0), E = $(/* @__PURE__ */ new Map()), [T, A] = z(-1);
+  if (!k.current && typeof document < "u") {
+    const q = document.createElement("style");
+    q.textContent = gn, document.head.appendChild(q), k.current = !0;
   }
   H(() => {
-    if (u)
-      v.current = 0, q.current.clear(), x(!0), h("entering");
-    else if (k) {
+    if (p)
+      v.current = 0, E.current.clear(), y(!0), h("entering");
+    else if (w) {
       h("exiting");
-      const A = setTimeout(() => {
-        x(!1), h("idle");
+      const q = setTimeout(() => {
+        y(!1), h("idle");
       }, ze);
-      return () => clearTimeout(A);
+      return () => clearTimeout(q);
     }
-  }, [u]);
-  const N = J((A) => {
-    c || f(A), i == null || i(A);
+  }, [p]);
+  const N = J((q) => {
+    c || f(q), i == null || i(q);
   }, [c, i]), R = J(() => {
-    const A = w.current;
-    A && (A.querySelector("button, [tabindex]") ?? A).focus();
+    const q = x.current;
+    q && (q.querySelector("button, [tabindex]") ?? q).focus();
   }, []), I = J(() => {
     N(!1), R();
   }, [N, R]);
   te(() => {
-    if (!k || m !== "entering" || !d.current) return;
-    const A = requestAnimationFrame(() => {
+    if (!w || m !== "entering" || !d.current) return;
+    const q = requestAnimationFrame(() => {
       const L = b.current, M = d.current;
       if (!L || !M) return;
       const O = M.getBoundingClientRect();
       C(xn(O, L, n));
     });
-    return () => cancelAnimationFrame(A);
-  }, [k, m, n]), H(() => {
-    if (!k || m !== "entering") return;
-    const A = setTimeout(() => {
-      const M = Array.from(q.current.entries()).sort((O, j) => O[0] - j[0]).find(([, O]) => !O.disabled);
-      E(M ? M[0] : -1);
+    return () => cancelAnimationFrame(q);
+  }, [w, m, n]), H(() => {
+    if (!w || m !== "entering") return;
+    const q = setTimeout(() => {
+      const M = Array.from(E.current.entries()).sort((O, j) => O[0] - j[0]).find(([, O]) => !O.disabled);
+      A(M ? M[0] : -1);
     }, 0);
-    return () => clearTimeout(A);
-  }, [k, m]), H(() => {
-    if (!u) return;
-    const A = (M) => {
+    return () => clearTimeout(q);
+  }, [w, m]), H(() => {
+    if (!p) return;
+    const q = (M) => {
       var j, F;
       const O = M.target;
       (j = d.current) != null && j.contains(O) || (F = b.current) != null && F.contains(O) || I();
     }, L = requestAnimationFrame(() => {
-      document.addEventListener("mousedown", A);
+      document.addEventListener("mousedown", q);
     });
     return () => {
-      cancelAnimationFrame(L), document.removeEventListener("mousedown", A);
+      cancelAnimationFrame(L), document.removeEventListener("mousedown", q);
     };
-  }, [u, I]), H(() => {
-    if (!u) return;
-    let A = !1;
+  }, [p, I]), H(() => {
+    if (!p) return;
+    let q = !1;
     const L = setTimeout(() => {
-      A = !0;
+      q = !0;
     }, 50), M = () => {
-      A && I();
+      q && I();
     };
     return window.addEventListener("scroll", M, { passive: !0, capture: !0 }), () => {
       clearTimeout(L), window.removeEventListener("scroll", M, { capture: !0 });
     };
-  }, [u, I]);
-  const P = J(() => Array.from(q.current.entries()).filter(([, A]) => !A.disabled).map(([A]) => A).sort((A, L) => A - L), []), B = J((A) => {
-    if (!u) return;
+  }, [p, I]);
+  const P = J(() => Array.from(E.current.entries()).filter(([, q]) => !q.disabled).map(([q]) => q).sort((q, L) => q - L), []), B = J((q) => {
+    if (!p) return;
     const L = P();
     if (L.length !== 0)
-      switch (A.key) {
+      switch (q.key) {
         case "Escape":
-          A.preventDefault(), I();
+          q.preventDefault(), I();
           break;
         case "ArrowDown": {
-          A.preventDefault(), E((M) => {
+          q.preventDefault(), A((M) => {
             const O = L.indexOf(M);
             return O < L.length - 1 ? L[O + 1] : L[0];
           });
           break;
         }
         case "ArrowUp": {
-          A.preventDefault(), E((M) => {
+          q.preventDefault(), A((M) => {
             const O = L.indexOf(M);
             return O > 0 ? L[O - 1] : L[L.length - 1];
           });
           break;
         }
         case "Home": {
-          A.preventDefault(), E(L[0]);
+          q.preventDefault(), A(L[0]);
           break;
         }
         case "End": {
-          A.preventDefault(), E(L[L.length - 1]);
+          q.preventDefault(), A(L[L.length - 1]);
           break;
         }
         case "Enter":
         case " ": {
-          A.preventDefault();
+          q.preventDefault();
           const M = b.current;
           if (M) {
             const O = M.querySelector('[data-active="true"]');
@@ -3488,29 +3504,29 @@ function ft({
           break;
         }
       }
-  }, [u, I, P]);
+  }, [p, I, P]);
   H(() => {
-    if (u)
+    if (p)
       return document.addEventListener("keydown", B), () => document.removeEventListener("keydown", B);
-  }, [u, B]), H(() => {
-    if (!u) return;
-    const A = b.current;
-    if (!A) return;
-    const L = A.querySelector('[data-active="true"]');
+  }, [p, B]), H(() => {
+    if (!p) return;
+    const q = b.current;
+    if (!q) return;
+    const L = q.querySelector('[data-active="true"]');
     L == null || L.scrollIntoView({ block: "nearest" });
-  }, [T, u]);
+  }, [T, p]);
   const G = () => {
-    N(!u);
-  }, D = (A) => {
-    (A.key === "Enter" || A.key === " " || A.key === "ArrowDown") && (A.preventDefault(), u || N(!0)), A.key === "ArrowUp" && (A.preventDefault(), u || (N(!0), setTimeout(() => {
+    N(!p);
+  }, D = (q) => {
+    (q.key === "Enter" || q.key === " " || q.key === "ArrowDown") && (q.preventDefault(), p || N(!0)), q.key === "ArrowUp" && (q.preventDefault(), p || (N(!0), setTimeout(() => {
       const L = P();
-      L.length > 0 && E(L[L.length - 1]);
+      L.length > 0 && A(L[L.length - 1]);
     }, 0)));
   }, W = {
     activeIndex: T,
-    setActiveIndex: E,
-    registerItem: (A, L) => {
-      q.current.set(A, { disabled: L });
+    setActiveIndex: A,
+    registerItem: (q, L) => {
+      E.current.set(q, { disabled: L });
     },
     close: I,
     getItemIndex: () => v.current++,
@@ -3525,19 +3541,19 @@ function ft({
         children: /* @__PURE__ */ e(
           "span",
           {
-            ref: w,
+            ref: x,
             onClick: G,
             onKeyDown: D,
             "aria-haspopup": "menu",
-            "aria-expanded": u,
-            "aria-controls": u ? _ : void 0,
+            "aria-expanded": p,
+            "aria-controls": p ? _ : void 0,
             style: { display: "inline-flex", cursor: "pointer" },
             children: t
           }
         )
       }
     ),
-    k && ae(
+    w && ae(
       /* @__PURE__ */ e(je.Provider, { value: W, children: /* @__PURE__ */ e(
         "div",
         {
@@ -3563,12 +3579,12 @@ function ft({
             transformOrigin: (S == null ? void 0 : S.transformOrigin) ?? "top left",
             outline: "none",
             pointerEvents: m === "exiting" ? "none" : "auto",
-            ...s
+            ...l
           },
           children: r
         }
       ) }),
-      l ?? document.body
+      s ?? document.body
     )
   ] });
 }
@@ -3895,17 +3911,17 @@ function zn({
   variant: o = "primary",
   size: a = "md",
   bordered: i = !0,
-  menuPlacement: l = "bottom-end",
-  disabled: s,
+  menuPlacement: s = "bottom-end",
+  disabled: l,
   loading: c = !1,
-  leftIcon: p,
+  leftIcon: u,
   style: f
 }) {
-  const u = s ?? c, [k, x] = z(!1), m = kn[a], h = m.borderRadius ?? "var(--lucent-radius-lg)", d = Sn[a], b = u ? {
+  const p = l ?? c, [w, y] = z(!1), m = kn[a], h = m.borderRadius ?? "var(--lucent-radius-lg)", d = Sn[a], b = p ? {
     background: "color-mix(in srgb, var(--lucent-text-primary) 6%, transparent)",
     color: "var(--lucent-text-disabled)",
     borderColor: "transparent"
-  } : {}, w = {
+  } : {}, x = {
     display: "inline-flex",
     alignItems: "center",
     justifyContent: "center",
@@ -3914,7 +3930,7 @@ function zn({
     fontWeight: "var(--lucent-font-weight-medium)",
     lineHeight: 1,
     letterSpacing: "0.01em",
-    cursor: u ? "not-allowed" : "pointer",
+    cursor: p ? "not-allowed" : "pointer",
     outline: "none",
     margin: 0,
     boxSizing: "border-box",
@@ -3925,7 +3941,7 @@ function zn({
     ...mt[o],
     ...i === !1 && { border: "none" },
     ...b
-  }, y = "var(--lucent-radius-sm)", S = `${h} ${y} ${y} ${h}`, C = `${y} ${h} ${h} ${y}`;
+  }, k = "var(--lucent-radius-sm)", S = `${h} ${k} ${k} ${h}`, C = `${k} ${h} ${h} ${k}`;
   return /* @__PURE__ */ g(
     "div",
     {
@@ -3942,17 +3958,17 @@ function zn({
           "button",
           {
             type: "button",
-            disabled: u,
+            disabled: p,
             "aria-busy": c,
             onClick: r,
             onMouseEnter: (v) => {
-              u || Ye(v.currentTarget, o, i);
+              p || Ye(v.currentTarget, o, i);
             },
             onMouseLeave: (v) => {
-              u || Ke(v.currentTarget, o, i);
+              p || Ke(v.currentTarget, o, i);
             },
             onMouseDown: (v) => {
-              u || Xe(v.currentTarget, o);
+              p || Xe(v.currentTarget, o);
             },
             onMouseUp: (v) => {
               Je(v.currentTarget);
@@ -3964,12 +3980,12 @@ function zn({
               v.currentTarget.style.boxShadow = "";
             },
             style: {
-              ...w,
+              ...x,
               borderRadius: S,
               padding: o === "ghost" || o === "danger-ghost" ? `0 ${m.paddingInner} 0 ${m.paddingOuter}` : `0 ${m.paddingOuter}`
             },
             children: [
-              p,
+              u,
               c ? /* @__PURE__ */ e(En, {}) : t
             ]
           }
@@ -3977,24 +3993,24 @@ function zn({
         /* @__PURE__ */ e(
           ft,
           {
-            open: k,
-            onOpenChange: x,
-            placement: l,
+            open: w,
+            onOpenChange: y,
+            placement: s,
             size: Cn[a],
             trigger: /* @__PURE__ */ e(
               "button",
               {
                 type: "button",
-                disabled: u,
+                disabled: p,
                 "aria-label": "More actions",
                 onMouseEnter: (v) => {
-                  u || Ye(v.currentTarget, o, i);
+                  p || Ye(v.currentTarget, o, i);
                 },
                 onMouseLeave: (v) => {
-                  u || Ke(v.currentTarget, o, i);
+                  p || Ke(v.currentTarget, o, i);
                 },
                 onMouseDown: (v) => {
-                  u || Xe(v.currentTarget, o);
+                  p || Xe(v.currentTarget, o);
                 },
                 onMouseUp: (v) => {
                   Je(v.currentTarget);
@@ -4006,15 +4022,15 @@ function zn({
                   v.currentTarget.style.boxShadow = "";
                 },
                 style: {
-                  ...w,
+                  ...x,
                   borderRadius: C,
                   padding: 0,
                   width: Tn[a]
                 },
-                children: /* @__PURE__ */ e("svg", { width: d, height: d, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 2.5, strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": !0, style: { flexShrink: 0, transition: "transform var(--lucent-duration-fast) var(--lucent-easing-default)", ...k && { transform: "rotate(180deg)" } }, children: /* @__PURE__ */ e("polyline", { points: "6 9 12 15 18 9" }) })
+                children: /* @__PURE__ */ e("svg", { width: d, height: d, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 2.5, strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": !0, style: { flexShrink: 0, transition: "transform var(--lucent-duration-fast) var(--lucent-easing-default)", ...w && { transform: "rotate(180deg)" } }, children: /* @__PURE__ */ e("polyline", { points: "6 9 12 15 18 9" }) })
               }
             ),
-            children: n.map((v, q) => /* @__PURE__ */ e(
+            children: n.map((v, E) => /* @__PURE__ */ e(
               Fe,
               {
                 onSelect: v.onSelect,
@@ -4023,7 +4039,7 @@ function zn({
                 ...v.icon !== void 0 && { icon: v.icon },
                 children: v.label
               },
-              q
+              E
             ))
           }
         )
@@ -4123,15 +4139,15 @@ function An({
         ...r
       },
       children: n.map((a, i) => {
-        const l = i === 0, s = i === o - 1;
+        const s = i === 0, l = i === o - 1;
         if (o === 1) return a;
-        const p = a.props.style ?? {}, f = p.borderRadius ?? "var(--lucent-radius-lg)";
-        let u;
-        return l ? u = `${f} ${ue} ${ue} ${f}` : s ? u = `${ue} ${f} ${f} ${ue}` : u = ue, It(a, {
+        const u = a.props.style ?? {}, f = u.borderRadius ?? "var(--lucent-radius-lg)";
+        let p;
+        return s ? p = `${f} ${ue} ${ue} ${f}` : l ? p = `${ue} ${f} ${f} ${ue}` : p = ue, It(a, {
           key: i,
           style: {
-            ...p,
-            borderRadius: u
+            ...u,
+            borderRadius: p
           }
         });
       })
@@ -4195,16 +4211,16 @@ function ko({
   helperText: o,
   errorMessage: a,
   children: i,
-  style: l
+  style: s
 }) {
-  const s = a ?? o, c = a ? "danger" : "secondary";
-  return /* @__PURE__ */ g("div", { style: { display: "flex", flexDirection: "column", gap: "var(--lucent-space-2)", ...l }, children: [
+  const l = a ?? o, c = a ? "danger" : "secondary";
+  return /* @__PURE__ */ g("div", { style: { display: "flex", flexDirection: "column", gap: "var(--lucent-space-2)", ...s }, children: [
     t && /* @__PURE__ */ g("div", { style: { display: "flex", alignItems: "baseline", gap: "var(--lucent-space-1)" }, children: [
       /* @__PURE__ */ e(V, { as: "label", size: "sm", weight: "medium", lineHeight: "tight", ...r !== void 0 && { htmlFor: r }, children: t }),
       n && /* @__PURE__ */ e(V, { as: "span", size: "sm", color: "danger", lineHeight: "tight", "aria-hidden": "true", children: "*" })
     ] }),
     i,
-    s && /* @__PURE__ */ e(V, { size: "xs", color: c, lineHeight: "tight", children: s })
+    l && /* @__PURE__ */ e(V, { size: "xs", color: c, lineHeight: "tight", children: l })
   ] });
 }
 const So = {
@@ -4304,35 +4320,35 @@ function To({
   placeholder: o,
   size: a = "md",
   label: i,
-  helperText: l,
-  errorText: s,
+  helperText: s,
+  errorText: l,
   results: c = [],
-  onResultSelect: p,
+  onResultSelect: u,
   isLoading: f = !1,
-  disabled: u = !1,
-  id: k,
-  style: x
+  disabled: p = !1,
+  id: w,
+  style: y
 }) {
-  const m = o ?? (n === "filter" ? "Filter…" : "Search…"), [h, d] = z(!1), [b, w] = z(null), y = $(null), S = $(null), C = $(null), [v, q] = z({ top: 0, left: 0, width: 0 }), T = n === "search" && h && c.length > 0;
+  const m = o ?? (n === "filter" ? "Filter…" : "Search…"), [h, d] = z(!1), [b, x] = z(null), k = $(null), S = $(null), C = $(null), [v, E] = z({ top: 0, left: 0, width: 0 }), T = n === "search" && h && c.length > 0;
   te(() => {
     if (!T || !S.current) return;
     const B = S.current.getBoundingClientRect();
-    q({ top: B.bottom + 4, left: B.left, width: B.width });
+    E({ top: B.bottom + 4, left: B.left, width: B.width });
   }, [T]);
-  const E = () => {
+  const A = () => {
     r("");
   }, N = (B) => {
-    p == null || p(B), d(!1);
+    u == null || u(B), d(!1);
   }, R = () => {
-    y.current = setTimeout(() => d(!1), 150);
+    k.current = setTimeout(() => d(!1), 150);
   }, I = () => {
-    y.current && clearTimeout(y.current), d(!0);
+    k.current && clearTimeout(k.current), d(!0);
   }, P = f ? /* @__PURE__ */ e($t, { size: "sm" }) : t ? /* @__PURE__ */ e(
     "button",
     {
       type: "button",
       "aria-label": n === "filter" ? "Clear filter" : "Clear search",
-      onClick: E,
+      onClick: A,
       style: {
         display: "flex",
         alignItems: "center",
@@ -4352,24 +4368,24 @@ function To({
       children: /* @__PURE__ */ e(Ln, {})
     }
   ) : null;
-  return /* @__PURE__ */ g("div", { ref: S, style: { ...x }, children: [
+  return /* @__PURE__ */ g("div", { ref: S, style: { ...y }, children: [
     /* @__PURE__ */ e(
       ut,
       {
-        id: k,
+        id: w,
         type: "text",
         size: a,
         value: t,
         onChange: (B) => r(B.target.value),
         placeholder: m,
-        disabled: u,
+        disabled: p,
         leftElement: n === "filter" ? /* @__PURE__ */ e(Rn, { size: Ze[a] }) : /* @__PURE__ */ e(Bn, { size: Ze[a] }),
         rightElement: P ?? void 0,
         onFocus: I,
         onBlur: R,
         ...i !== void 0 && { label: i },
-        ...l !== void 0 && { helperText: l },
-        ...s !== void 0 && { errorText: s }
+        ...s !== void 0 && { helperText: s },
+        ...l !== void 0 && { errorText: l }
       }
     ),
     T && ae(
@@ -4398,8 +4414,8 @@ function To({
               role: "option",
               "aria-selected": !1,
               onMouseDown: () => N(B),
-              onMouseEnter: () => w(G),
-              onMouseLeave: () => w(null),
+              onMouseEnter: () => x(G),
+              onMouseLeave: () => x(null),
               style: {
                 padding: "var(--lucent-space-2)",
                 borderRadius: "var(--lucent-radius-md)",
@@ -4624,30 +4640,30 @@ function Io({
   children: o,
   padding: a = "md",
   shadow: i,
-  radius: l = "lg",
-  style: s,
+  radius: s = "lg",
+  style: l,
   onClick: c,
-  href: p,
+  href: u,
   target: f,
-  rel: u,
-  disabled: k,
-  status: x,
+  rel: p,
+  disabled: w,
+  status: y,
   selected: m,
   hoverable: h,
   media: d
 }) {
-  const b = $n[t], w = t === "combo", y = i ?? (w ? "md" : b.shadowDefault), { py: S, px: C } = Pn[a], v = `${S} ${C}`, q = Fn[l], T = p != null, E = c != null || T, N = E || (h ?? !1), R = (k ?? !1) && E, I = T ? "a" : E ? "button" : "div", [P, B] = z(!1), [G, D] = z(!1), [W, _] = z(!1), A = (m ?? !1) && !R, L = A ? Un : void 0, M = jn(b, m ?? !1, R), O = x != null ? `inset 3px 0 0 ${Nn[x]}` : void 0;
+  const b = $n[t], x = t === "combo", k = i ?? (x ? "md" : b.shadowDefault), { py: S, px: C } = Pn[a], v = `${S} ${C}`, E = Fn[s], T = u != null, A = c != null || T, N = A || (h ?? !1), R = (w ?? !1) && A, I = T ? "a" : A ? "button" : "div", [P, B] = z(!1), [G, D] = z(!1), [W, _] = z(!1), q = (m ?? !1) && !R, L = q ? Un : void 0, M = jn(b, m ?? !1, R), O = y != null ? `inset 3px 0 0 ${Nn[y]}` : void 0;
   let j;
-  w ? j = se(L, O) : N && !R ? W ? j = se(Gn, L, O) : G ? j = se(Hn, L, O) : P ? j = se(E ? On : Vn, be[y], L, O) : j = se(be[y], L, O) : j = se(be[y], L, O);
+  x ? j = se(L, O) : N && !R ? W ? j = se(Gn, L, O) : G ? j = se(Hn, L, O) : P ? j = se(A ? On : Vn, be[k], L, O) : j = se(be[k], L, O) : j = se(be[k], L, O);
   const F = {
     display: "flex",
     flexDirection: "column",
     background: M,
     border: b.border,
-    borderRadius: q,
+    borderRadius: E,
     // Only clip overflow when media is present (to round image corners).
     // Default to visible so nested child shadows (e.g. elevated Card inside combo) aren't cut off.
-    overflow: d != null && !(A || N && G) ? "hidden" : "visible",
+    overflow: d != null && !(q || N && G) ? "hidden" : "visible",
     boxSizing: "border-box",
     position: "relative",
     ...j !== void 0 && { boxShadow: j },
@@ -4660,7 +4676,7 @@ function Io({
       transition: Wn
     },
     // Button UA reset
-    ...E && !T && {
+    ...A && !T && {
       padding: 0,
       font: "inherit",
       textAlign: "inherit",
@@ -4677,7 +4693,7 @@ function Io({
       opacity: 0.6,
       pointerEvents: "none"
     },
-    ...s
+    ...l
   };
   return /* @__PURE__ */ g(
     I,
@@ -4696,19 +4712,19 @@ function Io({
         }
       } : {},
       ...T && {
-        href: R ? void 0 : p,
+        href: R ? void 0 : u,
         ...f !== void 0 && { target: f },
-        ...u !== void 0 && { rel: u }
+        ...p !== void 0 && { rel: p }
       },
-      ...!T && E && {
+      ...!T && A && {
         type: "button",
         ...R && { disabled: !0 }
       },
       ...c !== void 0 && !R && { onClick: c },
-      ...E && m !== void 0 && { "aria-pressed": m },
+      ...A && m !== void 0 && { "aria-pressed": m },
       ...T && R && { "aria-disabled": !0 },
       children: [
-        d != null && /* @__PURE__ */ e("div", { style: { lineHeight: 0, overflow: "hidden", borderRadius: `${q} ${q} 0 0` }, children: d }),
+        d != null && /* @__PURE__ */ e("div", { style: { lineHeight: 0, overflow: "hidden", borderRadius: `${E} ${E} 0 0` }, children: d }),
         r != null && /* @__PURE__ */ e(
           "div",
           {
@@ -4725,11 +4741,11 @@ function Io({
             style: {
               padding: v,
               flex: 1,
-              ...w ? {
+              ...x ? {
                 background: "var(--lucent-surface)",
                 border: "1px solid var(--lucent-border-default)",
-                borderRadius: q,
-                boxShadow: be[y],
+                borderRadius: E,
+                boxShadow: be[k],
                 marginLeft: `calc(${C} / 3)`,
                 marginRight: `calc(${C} / 3)`
               } : {}
@@ -4774,7 +4790,7 @@ const zo = {
   domain: "neutral",
   specVersion: "0.1",
   description: "A surface container with five elevation variants that form a visual importance hierarchy. Supports optional header, body, and footer slots with configurable padding, shadow, and radius. Includes a CardBleed sub-component for edge-to-edge content.",
-  designIntent: 'Card provides a configurable surface with an explicit elevation hierarchy. Each variant maps to a distinct level of visual prominence, giving consumers a single prop to express how much attention a surface should command relative to its surroundings.\n\n## Elevation hierarchy (lowest → highest)\n\n1. **ghost** — transparent background, no border, no shadow.\n   The card is invisible as a container — content floats directly against the page or parent surface. Use for logical groupings that shouldn\'t compete visually: sidebar sections, form regions, or layout slots where structure exists conceptually but not visually. Header/footer dividers still render if those slots are used, providing minimal internal structure.\n\n2. **outline** (default) — transparent background with `border-default` border, no shadow.\n   Like ghost, the card inherits its container\'s background — the border alone defines the boundary. This is the workhorse variant for lists of items, form sections, data panels, and any content that needs a visible container without drawing excessive attention. Header and footer slots are separated from the body by matching `border-default` dividers.\n\n3. **filled** — semi-transparent tinted background, no border, no shadow.\n   Differentiates the card from its surroundings by darkening (light mode) or lightening (dark mode) whatever surface it sits on. Uses `color-mix(in srgb, textPrimary 6%, transparent)` so the tint is always relative to the container — never a fixed color. Use for secondary content areas, inset panels, summary blocks, or anywhere a border would feel heavy but the card needs to be visually distinct. Effective for nesting (e.g., a filled card inside an elevated card creates a recessed region).\n\n4. **elevated** — `surface` background with medium shadow, no border.\n   The card lifts off the page through depth. The shadow creates a physical metaphor: this content sits above the surface it rests on. Use for primary content areas, feature highlights, pricing cards, or any surface that should feel physically elevated. The lack of border keeps the silhouette soft — the shadow alone defines the boundary.\n\n5. **combo** — transparent wrapper with an elevated body inset.\n   The header and footer are flat — they blend into the page background as if they were part of it. Only the body section is elevated: it gets `surface` background, border-radius, and shadow, appearing as a raised card sitting between the flat header/footer regions. This draws the eye to the primary content while keeping supporting info (header) and actions (footer) visually subordinate — they frame the elevated body without competing with it. No dividers are rendered — the elevation change IS the visual separator. Use for detail panels, profile cards, or settings forms where the body content is the focal point.\n\n## Shadow override\nThe `shadow` prop overrides whatever shadow the variant implies. This allows fine-tuning without changing the variant. For example, `variant="elevated" shadow="lg"` gives an elevated card with extra depth, while `variant="outline" shadow="none"` gives a flat bordered card.\n\n## Token rules\n- `elevated` and `combo` body use `surface` (the primary component surface — white in light mode).\n- `filled` uses a semi-transparent tint of `textPrimary` — contextually darker/lighter than its container.\n- `combo` wrapper is transparent (header/footer blend with page); only the body is elevated with `surface`.\n- `ghost` and `outline` use `transparent` — they inherit from whatever they\'re placed on. The border is the only visual differentiator for `outline`.\n- Never use `bgBase` or `bgSubtle` on a Card — those tokens are reserved for the page canvas.\n- Content nested inside a Card that needs a tinted fill should use `color-mix(in srgb, var(--lucent-text-primary) 5%, transparent)` for accent-neutral insets.',
+  designIntent: 'Card provides a configurable surface with an explicit elevation hierarchy. Each variant maps to a distinct level of visual prominence, giving consumers a single prop to express how much attention a surface should command relative to its surroundings.\n\n## Elevation hierarchy (lowest → highest)\n\n1. **ghost** — transparent background, no border, no shadow.\n   The card is invisible as a container — content floats directly against the page or parent surface. Use for logical groupings that shouldn\'t compete visually: sidebar sections, form regions, or layout slots where structure exists conceptually but not visually. Header/footer dividers still render if those slots are used, providing minimal internal structure.\n\n2. **outline** (default) — transparent background with `border-default` border, no shadow.\n   Like ghost, the card inherits its container\'s background — the border alone defines the boundary. This is the workhorse variant for lists of items, form sections, data panels, and any content that needs a visible container without drawing excessive attention. Header and footer slots are separated from the body by matching `border-default` dividers.\n\n3. **filled** — semi-transparent tinted background, no border, no shadow.\n   Differentiates the card from its surroundings by darkening (light mode) or lightening (dark mode) whatever surface it sits on. Uses `color-mix(in srgb, textPrimary 6%, transparent)` so the tint is always relative to the container — never a fixed color. Use for secondary content areas, inset panels, summary blocks, or anywhere a border would feel heavy but the card needs to be visually distinct. Effective for nesting (e.g., a filled card inside an elevated card creates a recessed region).\n\n4. **elevated** — `surface` background with medium shadow, no border.\n   The card lifts off the page through depth. The shadow creates a physical metaphor: this content sits above the surface it rests on. Use for primary content areas, feature highlights, pricing cards, or any surface that should feel physically elevated. The lack of border keeps the silhouette soft — the shadow alone defines the boundary.\n\n5. **combo** — transparent wrapper with an elevated body inset.\n   The header and footer are flat — they blend into the page background as if they were part of it. Only the body section is elevated: it gets `surface` background, border-radius, and shadow, appearing as a raised card sitting between the flat header/footer regions. This draws the eye to the primary content while keeping supporting info (header) and actions (footer) visually subordinate — they frame the elevated body without competing with it. No dividers are rendered — the elevation change IS the visual separator. Use for detail panels, profile cards, or settings forms where the body content is the focal point.\n\n## Shadow override\nThe `shadow` prop overrides whatever shadow the variant implies. This allows fine-tuning without changing the variant. For example, `variant="elevated" shadow="lg"` gives an elevated card with extra depth, while `variant="outline" shadow="none"` gives a flat bordered card.\n\n## Token rules\n- `elevated` and `combo` body use `surface` (the primary component surface — white in light mode).\n- `filled` uses a semi-transparent tint of `textPrimary` — contextually darker/lighter than its container.\n- `combo` wrapper is transparent (header/footer blend with page); only the body is elevated with `surface`.\n- `ghost` and `outline` use `transparent` — they inherit from whatever they\'re placed on. The border is the only visual differentiator for `outline`.\n- Never use `navigation`, `bgBase`, or `bgSubtle` on a Card — those tokens are reserved for the page chrome and content area.\n- Content nested inside a Card that needs a tinted fill should use `color-mix(in srgb, var(--lucent-text-primary) 5%, transparent)` for accent-neutral insets.',
   props: [
     {
       name: "variant",
@@ -5032,7 +5048,7 @@ function Eo({
   icon: a,
   style: i
 }) {
-  const l = _n[t], s = a ?? Zn[t];
+  const s = _n[t], l = a ?? Zn[t];
   return /* @__PURE__ */ g(
     "div",
     {
@@ -5042,8 +5058,8 @@ function Eo({
         alignItems: "flex-start",
         gap: "var(--lucent-space-3)",
         padding: "var(--lucent-space-3) var(--lucent-space-4)",
-        background: l.bg,
-        border: `1px solid ${l.border}`,
+        background: s.bg,
+        border: `1px solid ${s.border}`,
         borderRadius: "var(--lucent-radius-md)",
         boxSizing: "border-box",
         ...i
@@ -5054,17 +5070,17 @@ function Eo({
           {
             style: {
               flexShrink: 0,
-              color: l.iconColor,
+              color: s.iconColor,
               display: "flex",
               alignItems: "center",
               paddingTop: 2
             },
-            children: s
+            children: l
           }
         ),
         /* @__PURE__ */ g("div", { style: { flex: 1, display: "flex", flexDirection: "column", gap: "var(--lucent-space-1)" }, children: [
-          r && /* @__PURE__ */ e(V, { as: "span", size: "sm", weight: "semibold", color: l.textColor, lineHeight: "tight", children: r }),
-          n && /* @__PURE__ */ e(V, { as: "span", size: "sm", color: l.textColor, lineHeight: "base", children: n })
+          r && /* @__PURE__ */ e(V, { as: "span", size: "sm", weight: "semibold", color: s.textColor, lineHeight: "tight", children: r }),
+          n && /* @__PURE__ */ e(V, { as: "span", size: "sm", color: s.textColor, lineHeight: "base", children: n })
         ] }),
         o && /* @__PURE__ */ e(
           "button",
@@ -5081,7 +5097,7 @@ function Eo({
               cursor: "pointer",
               padding: 2,
               borderRadius: "var(--lucent-radius-sm)",
-              color: l.iconColor,
+              color: s.iconColor,
               opacity: 0.7
             },
             onMouseEnter: (c) => {
@@ -5326,36 +5342,36 @@ function Bo({
   lines: o = 1,
   animate: a = !0,
   radius: i,
-  style: l
+  style: s
 }) {
-  const s = n ?? er[t], c = i ?? tr[t], p = a ? /* @__PURE__ */ e("style", { children: `
+  const l = n ?? er[t], c = i ?? tr[t], u = a ? /* @__PURE__ */ e("style", { children: `
       @keyframes lucent-skeleton-shimmer {
         0%   { background-position: 200% 0; }
         100% { background-position: -200% 0; }
       }
     ` }) : null;
   return t === "text" && o > 1 ? /* @__PURE__ */ g(Q, { children: [
-    p,
-    /* @__PURE__ */ e("div", { style: { display: "flex", flexDirection: "column", gap: "var(--lucent-space-2)", ...l }, children: Array.from({ length: o }).map((f, u) => /* @__PURE__ */ e(
+    u,
+    /* @__PURE__ */ e("div", { style: { display: "flex", flexDirection: "column", gap: "var(--lucent-space-2)", ...s }, children: Array.from({ length: o }).map((f, p) => /* @__PURE__ */ e(
       Qe,
       {
-        width: u === o - 1 ? "70%" : r,
-        height: s,
+        width: p === o - 1 ? "70%" : r,
+        height: l,
         radius: c,
         animate: a
       },
-      u
+      p
     )) })
   ] }) : /* @__PURE__ */ g(Q, { children: [
-    p,
+    u,
     /* @__PURE__ */ e(
       Qe,
       {
         width: t === "circle" ? n ?? 40 : r,
-        height: s,
+        height: l,
         radius: c,
         animate: a,
-        ...l !== void 0 && { style: l }
+        ...s !== void 0 && { style: s }
       }
     )
   ] });
@@ -5476,11 +5492,11 @@ function Lo({ items: t, separator: r = "/", style: n }) {
                 fontFamily: "var(--lucent-font-family-base)",
                 transition: "color var(--lucent-duration-fast) var(--lucent-easing-default)"
               },
-              onMouseEnter: (l) => {
-                l.currentTarget.style.color = "var(--lucent-text-primary)";
+              onMouseEnter: (s) => {
+                s.currentTarget.style.color = "var(--lucent-text-primary)";
               },
-              onMouseLeave: (l) => {
-                l.currentTarget.style.color = "var(--lucent-text-secondary)";
+              onMouseLeave: (s) => {
+                s.currentTarget.style.color = "var(--lucent-text-secondary)";
               },
               children: o.label
             }
@@ -5498,11 +5514,11 @@ function Lo({ items: t, separator: r = "/", style: n }) {
                 cursor: "pointer",
                 transition: "color var(--lucent-duration-fast) var(--lucent-easing-default)"
               },
-              onMouseEnter: (l) => {
-                l.currentTarget.style.color = "var(--lucent-text-primary)";
+              onMouseEnter: (s) => {
+                s.currentTarget.style.color = "var(--lucent-text-primary)";
               },
-              onMouseLeave: (l) => {
-                l.currentTarget.style.color = "var(--lucent-text-secondary)";
+              onMouseLeave: (s) => {
+                s.currentTarget.style.color = "var(--lucent-text-secondary)";
               },
               children: o.label
             }
@@ -5530,37 +5546,37 @@ function rr() {
   const t = document.createElement("style");
   t.setAttribute("data-lucent-collapsible", ""), t.textContent = nr, document.head.appendChild(t), nt = !0;
 }
-function Po({ trigger: t, children: r, defaultOpen: n = !1, open: o, onOpenChange: a, padded: i = !0, disabled: l = !1, style: s }) {
-  const c = ee(_e), p = c.px !== "0" || c.py !== "0", f = o !== void 0, [u, k] = z(n), x = f ? o : u, m = $(null), h = $(!1), d = $();
+function Po({ trigger: t, children: r, defaultOpen: n = !1, open: o, onOpenChange: a, padded: i = !0, disabled: s = !1, style: l }) {
+  const c = ee(_e), u = c.px !== "0" || c.py !== "0", f = o !== void 0, [p, w] = z(n), y = f ? o : p, m = $(null), h = $(!1), d = $();
   H(rr, []), H(() => {
     h.current = !0;
   }, []), te(() => {
-    const w = m.current;
-    if (w)
-      if (x) {
-        w.style.overflow = "hidden";
-        const y = w.scrollHeight;
-        w.style.height = `${y}px`, w.style.transition = tt, clearTimeout(d.current), d.current = setTimeout(() => {
-          w.style.height = "auto", w.style.overflow = "visible", w.style.transition = "";
+    const x = m.current;
+    if (x)
+      if (y) {
+        x.style.overflow = "hidden";
+        const k = x.scrollHeight;
+        x.style.height = `${k}px`, x.style.transition = tt, clearTimeout(d.current), d.current = setTimeout(() => {
+          x.style.height = "auto", x.style.overflow = "visible", x.style.transition = "";
         }, gt + 20);
-      } else h.current && (clearTimeout(d.current), w.style.overflow = "hidden", w.style.transition = "", w.style.height = `${w.scrollHeight}px`, w.getBoundingClientRect(), w.style.transition = tt, w.style.height = "0px");
-  }, [x]), H(() => {
-    const w = m.current;
-    w && !x && !h.current && (w.style.height = "0px");
+      } else h.current && (clearTimeout(d.current), x.style.overflow = "hidden", x.style.transition = "", x.style.height = `${x.scrollHeight}px`, x.getBoundingClientRect(), x.style.transition = tt, x.style.height = "0px");
+  }, [y]), H(() => {
+    const x = m.current;
+    x && !y && !h.current && (x.style.height = "0px");
   }, []), H(() => () => clearTimeout(d.current), []);
   const b = () => {
-    if (l) return;
-    const w = !x;
-    f || k(w), a == null || a(w);
+    if (s) return;
+    const x = !y;
+    f || w(x), a == null || a(x);
   };
-  return /* @__PURE__ */ g("div", { style: { display: "flex", flexDirection: "column", fontFamily: "var(--lucent-font-family-base)", fontSize: "var(--lucent-font-size-md)", ...p && { margin: `calc(-1 * ${c.py}) calc(-1 * ${c.px})` }, ...s }, children: [
+  return /* @__PURE__ */ g("div", { style: { display: "flex", flexDirection: "column", fontFamily: "var(--lucent-font-family-base)", fontSize: "var(--lucent-font-size-md)", ...u && { margin: `calc(-1 * ${c.py}) calc(-1 * ${c.px})` }, ...l }, children: [
     /* @__PURE__ */ g(
       "button",
       {
         "data-lucent-collapsible-trigger": !0,
         onClick: b,
-        disabled: l,
-        "aria-expanded": x,
+        disabled: s,
+        "aria-expanded": y,
         style: {
           display: "flex",
           alignItems: "center",
@@ -5570,18 +5586,18 @@ function Po({ trigger: t, children: r, defaultOpen: n = !1, open: o, onOpenChang
           border: "none",
           borderRadius: "var(--lucent-radius-md)",
           padding: "var(--lucent-space-4)",
-          cursor: l ? "not-allowed" : "pointer",
+          cursor: s ? "not-allowed" : "pointer",
           textAlign: "left",
           outline: "none",
           color: "inherit",
           fontFamily: "inherit",
           fontSize: "inherit",
-          opacity: l ? 0.5 : 1,
+          opacity: s ? 0.5 : 1,
           transition: `background ${Ne} ${le}`
         },
         children: [
           /* @__PURE__ */ e("span", { style: { flex: 1 }, children: t }),
-          /* @__PURE__ */ e(ar, { open: x })
+          /* @__PURE__ */ e(ar, { open: y })
         ]
       }
     ),
@@ -5589,15 +5605,15 @@ function Po({ trigger: t, children: r, defaultOpen: n = !1, open: o, onOpenChang
       "div",
       {
         ref: m,
-        "aria-hidden": !x,
-        style: { overflow: x ? "visible" : "hidden" },
+        "aria-hidden": !y,
+        style: { overflow: y ? "visible" : "hidden" },
         children: /* @__PURE__ */ e(
           "div",
           {
             style: {
               ...i ? { padding: "var(--lucent-space-3) var(--lucent-space-4) var(--lucent-space-4)" } : {},
-              opacity: x ? 1 : 0,
-              transform: x ? "translateY(0)" : "translateY(-4px)",
+              opacity: y ? 1 : 0,
+              transform: y ? "translateY(0)" : "translateY(-4px)",
               transition: `opacity ${et}ms ${le}, transform ${et}ms ${le}`
             },
             children: r
@@ -5642,21 +5658,22 @@ function Fo({
   sidebarWidth: o = 240,
   headerHeight: a = 48,
   sidebarCollapsed: i = !1,
-  rightSidebar: l,
-  rightSidebarWidth: s = 240,
+  rightSidebar: s,
+  rightSidebarWidth: l = 240,
   rightSidebarCollapsed: c = !1,
-  footer: p,
+  footer: u,
   footerHeight: f = 28,
-  chromeBackground: u = "bgBase",
-  mainStyle: k,
-  style: x
+  chromeBackground: p = "navigation",
+  mainStyle: w,
+  style: y
 }) {
-  const m = ye(a), h = ye(o), d = ye(s), b = ye(f), y = {
+  const m = ye(a), h = ye(o), d = ye(l), b = ye(f), k = {
+    navigation: "var(--lucent-navigation)",
     bgBase: "var(--lucent-bg-base)",
     bgSubtle: "var(--lucent-bg-subtle)",
     surface: "var(--lucent-surface)",
     surfaceSecondary: "var(--lucent-surface-secondary)"
-  }[u] ?? "var(--lucent-bg-base)";
+  }[p] ?? "var(--lucent-navigation)";
   return /* @__PURE__ */ g(
     "div",
     {
@@ -5665,9 +5682,9 @@ function Fo({
         flexDirection: "column",
         height: "100vh",
         overflow: "hidden",
-        background: y,
+        background: k,
         fontFamily: "var(--lucent-font-family-base)",
-        ...x
+        ...y
       },
       children: [
         /* @__PURE__ */ e("style", { children: or }),
@@ -5678,7 +5695,7 @@ function Fo({
               flexShrink: 0,
               height: m,
               zIndex: 10,
-              background: y
+              background: k
             },
             children: r
           }
@@ -5693,7 +5710,7 @@ function Fo({
                 flexShrink: 0,
                 overflow: "hidden",
                 overflowY: i ? "hidden" : "auto",
-                background: y,
+                background: k,
                 transition: "width 200ms var(--lucent-easing-default)"
               },
               children: n
@@ -5707,17 +5724,17 @@ function Fo({
                 flex: 1,
                 overflowY: "auto",
                 minWidth: 0,
-                margin: l != null ? "0 0 var(--lucent-space-3) 0" : "0 var(--lucent-space-3) var(--lucent-space-3) 0",
+                margin: s != null ? "0 0 var(--lucent-space-3) 0" : "0 var(--lucent-space-3) var(--lucent-space-3) 0",
                 border: "1px solid var(--lucent-border-default)",
                 borderRadius: "var(--lucent-radius-lg)",
                 boxShadow: "var(--lucent-shadow-sm)",
-                background: "var(--lucent-surface)",
-                ...k
+                background: "var(--lucent-bg-base)",
+                ...w
               },
               children: t
             }
           ),
-          l != null && /* @__PURE__ */ e(
+          s != null && /* @__PURE__ */ e(
             "aside",
             {
               className: pe,
@@ -5726,23 +5743,23 @@ function Fo({
                 flexShrink: 0,
                 overflow: "hidden",
                 overflowY: c ? "hidden" : "auto",
-                background: y,
+                background: k,
                 transition: "width 200ms var(--lucent-easing-default)"
               },
-              children: l
+              children: s
             }
           )
         ] }),
-        p != null && /* @__PURE__ */ e(
+        u != null && /* @__PURE__ */ e(
           "div",
           {
             style: {
               flexShrink: 0,
               height: b,
               zIndex: 10,
-              background: y
+              background: k
             },
-            children: p
+            children: u
           }
         )
       ]
@@ -5799,27 +5816,27 @@ function No({
   page: o,
   onPageChange: a,
   onFilterChange: i,
-  emptyState: l,
-  style: s
+  emptyState: s,
+  style: l
 }) {
-  const [c, p] = z(null), [f, u] = z(0), [k, x] = z(null), [m, h] = z({}), d = o !== void 0, b = d ? o : f, w = t.some((I) => I.filterable), y = w ? r.filter((I) => t.every((P) => {
+  const [c, u] = z(null), [f, p] = z(0), [w, y] = z(null), [m, h] = z({}), d = o !== void 0, b = d ? o : f, x = t.some((I) => I.filterable), k = x ? r.filter((I) => t.every((P) => {
     if (!P.filterable) return !0;
     const B = m[P.key];
     if (!B || B.length === 0) return !0;
     const G = String(I[P.key] ?? "");
     return B.includes(G);
-  })) : r, S = c ? [...y].sort((I, P) => {
+  })) : r, S = c ? [...k].sort((I, P) => {
     const B = I[c.key], G = P[c.key], D = String(B ?? "").localeCompare(String(G ?? ""), void 0, { numeric: !0 });
     return c.dir === "asc" ? D : -D;
-  }) : y, C = n > 0 ? S.slice(b * n, (b + 1) * n) : S, v = n > 0 ? Math.max(1, Math.ceil(S.length / n)) : 1, q = (I) => {
-    d || u(I), a == null || a(I);
+  }) : k, C = n > 0 ? S.slice(b * n, (b + 1) * n) : S, v = n > 0 ? Math.max(1, Math.ceil(S.length / n)) : 1, E = (I) => {
+    d || p(I), a == null || a(I);
   }, T = (I) => {
-    p((P) => !P || P.key !== I ? { key: I, dir: "asc" } : P.dir === "asc" ? { key: I, dir: "desc" } : null), d || u(0), a == null || a(0);
-  }, E = (I, P) => {
+    u((P) => !P || P.key !== I ? { key: I, dir: "asc" } : P.dir === "asc" ? { key: I, dir: "desc" } : null), d || p(0), a == null || a(0);
+  }, A = (I, P) => {
     const B = { ...m, [I]: P };
-    P.length === 0 && delete B[I], h(B), d || u(0), a == null || a(0), i == null || i(B);
+    P.length === 0 && delete B[I], h(B), d || p(0), a == null || a(0), i == null || i(B);
   }, N = () => {
-    h({}), d || u(0), a == null || a(0), i == null || i({});
+    h({}), d || p(0), a == null || a(0), i == null || i({});
   }, R = [];
   if (v <= 7)
     for (let I = 0; I < v; I++) R.push(I);
@@ -5829,14 +5846,14 @@ function No({
       R.push(I);
     b < v - 3 && R.push("…"), R.push(v - 1);
   }
-  return /* @__PURE__ */ g("div", { style: { display: "flex", flexDirection: "column", gap: "var(--lucent-space-3)", ...s }, children: [
-    w && /* @__PURE__ */ e("div", { style: { position: "relative", zIndex: 1 }, children: /* @__PURE__ */ e(
+  return /* @__PURE__ */ g("div", { style: { display: "flex", flexDirection: "column", gap: "var(--lucent-space-3)", ...l }, children: [
+    x && /* @__PURE__ */ e("div", { style: { position: "relative", zIndex: 1 }, children: /* @__PURE__ */ e(
       sr,
       {
         columns: t,
         rows: r,
         filters: m,
-        onFilter: E,
+        onFilter: A,
         onClearAll: N
       }
     ) }),
@@ -5889,16 +5906,16 @@ function No({
         {
           colSpan: t.length,
           style: { padding: "var(--lucent-space-12)", textAlign: "center" },
-          children: l ?? /* @__PURE__ */ e(V, { color: "secondary", children: "No data" })
+          children: s ?? /* @__PURE__ */ e(V, { color: "secondary", children: "No data" })
         }
       ) }) : C.map((I, P) => /* @__PURE__ */ e(
         "tr",
         {
-          onMouseEnter: () => x(P),
-          onMouseLeave: () => x(null),
+          onMouseEnter: () => y(P),
+          onMouseLeave: () => y(null),
           style: {
             borderBottom: P < C.length - 1 ? "1px solid var(--lucent-border-subtle)" : "none",
-            background: k === P ? "color-mix(in srgb, var(--lucent-text-primary) 4%, transparent)" : "transparent",
+            background: w === P ? "color-mix(in srgb, var(--lucent-text-primary) 4%, transparent)" : "transparent",
             transition: "background var(--lucent-duration-fast) var(--lucent-easing-default)"
           },
           children: t.map((B) => /* @__PURE__ */ e(
@@ -5930,7 +5947,7 @@ function No({
         /* @__PURE__ */ e(
           Ee,
           {
-            onClick: () => q(b - 1),
+            onClick: () => E(b - 1),
             disabled: b === 0,
             "aria-label": "Previous page",
             children: /* @__PURE__ */ e(rt, { dir: "left" })
@@ -5944,7 +5961,7 @@ function No({
           }, children: "…" }, `ellipsis-${P}`) : /* @__PURE__ */ e(
             Ee,
             {
-              onClick: () => q(I),
+              onClick: () => E(I),
               active: I === b,
               "aria-label": `Page ${I + 1}`,
               "aria-current": I === b ? "page" : void 0,
@@ -5956,7 +5973,7 @@ function No({
         /* @__PURE__ */ e(
           Ee,
           {
-            onClick: () => q(b + 1),
+            onClick: () => E(b + 1),
             disabled: b >= v - 1,
             "aria-label": "Next page",
             children: /* @__PURE__ */ e(rt, { dir: "right" })
@@ -5973,24 +5990,24 @@ function sr({
   onFilter: o,
   onClearAll: a
 }) {
-  const i = t.filter((s) => s.filterable), l = Object.keys(n).length;
+  const i = t.filter((l) => l.filterable), s = Object.keys(n).length;
   return /* @__PURE__ */ g("div", { style: { display: "flex", alignItems: "center", gap: "var(--lucent-space-2)", flexWrap: "wrap" }, children: [
-    i.map((s) => {
+    i.map((l) => {
       const c = Array.from(
-        new Set(r.map((p) => String(p[s.key] ?? "")))
+        new Set(r.map((u) => String(u[l.key] ?? "")))
       ).sort();
       return /* @__PURE__ */ e(
         lr,
         {
-          label: s.header,
+          label: l.header,
           values: c,
-          value: n[s.key] ?? [],
-          onChange: (p) => o(s.key, p)
+          value: n[l.key] ?? [],
+          onChange: (u) => o(l.key, u)
         },
-        s.key
+        l.key
       );
     }),
-    l > 0 && /* @__PURE__ */ e(
+    s > 0 && /* @__PURE__ */ e(
       "button",
       {
         onClick: a,
@@ -6018,26 +6035,26 @@ function lr({
   value: n,
   onChange: o
 }) {
-  const [a, i] = z(!1), [l, s] = z(!1), [c, p] = z(""), f = $(null), u = $(null), k = n.length > 0;
+  const [a, i] = z(!1), [s, l] = z(!1), [c, u] = z(""), f = $(null), p = $(null), w = n.length > 0;
   H(() => {
     if (!a) {
-      p("");
+      u("");
       return;
     }
     setTimeout(() => {
-      var w;
-      return (w = u.current) == null ? void 0 : w.focus();
+      var x;
+      return (x = p.current) == null ? void 0 : x.focus();
     }, 0);
-    const d = (w) => {
-      f.current && !f.current.contains(w.target) && i(!1);
-    }, b = (w) => {
-      w.key === "Escape" && i(!1);
+    const d = (x) => {
+      f.current && !f.current.contains(x.target) && i(!1);
+    }, b = (x) => {
+      x.key === "Escape" && i(!1);
     };
     return document.addEventListener("mousedown", d), document.addEventListener("keydown", b), () => {
       document.removeEventListener("mousedown", d), document.removeEventListener("keydown", b);
     };
   }, [a]);
-  const x = c ? r.filter((d) => d.toLowerCase().includes(c.toLowerCase())) : r, m = (d) => o(n.includes(d) ? n.filter((b) => b !== d) : [...n, d]), h = n.length === 0 ? null : n.length === 1 ? /* @__PURE__ */ g("span", { style: { color: "var(--lucent-text-secondary)", fontWeight: "var(--lucent-font-weight-regular)" }, children: [
+  const y = c ? r.filter((d) => d.toLowerCase().includes(c.toLowerCase())) : r, m = (d) => o(n.includes(d) ? n.filter((b) => b !== d) : [...n, d]), h = n.length === 0 ? null : n.length === 1 ? /* @__PURE__ */ g("span", { style: { color: "var(--lucent-text-secondary)", fontWeight: "var(--lucent-font-weight-regular)" }, children: [
     ": ",
     n[0]
   ] }) : /* @__PURE__ */ g("span", { style: { color: "var(--lucent-accent-default)" }, children: [
@@ -6050,8 +6067,8 @@ function lr({
       "button",
       {
         onClick: () => i((d) => !d),
-        onMouseEnter: () => s(!0),
-        onMouseLeave: () => s(!1),
+        onMouseEnter: () => l(!0),
+        onMouseLeave: () => l(!1),
         style: {
           display: "inline-flex",
           alignItems: "center",
@@ -6059,12 +6076,12 @@ function lr({
           height: 30,
           padding: "0 var(--lucent-space-3)",
           borderRadius: "var(--lucent-radius-md)",
-          border: `1px solid ${k ? "var(--lucent-accent-default)" : l ? "var(--lucent-border-strong)" : "var(--lucent-border-default)"}`,
-          background: k ? "var(--lucent-accent-subtle)" : "var(--lucent-surface)",
-          color: k ? "var(--lucent-accent-default)" : "var(--lucent-text-primary)",
+          border: `1px solid ${w ? "var(--lucent-accent-default)" : s ? "var(--lucent-border-strong)" : "var(--lucent-border-default)"}`,
+          background: w ? "var(--lucent-accent-subtle)" : "var(--lucent-surface)",
+          color: w ? "var(--lucent-accent-default)" : "var(--lucent-text-primary)",
           fontFamily: "var(--lucent-font-family-base)",
           fontSize: "var(--lucent-font-size-xs)",
-          fontWeight: k ? "var(--lucent-font-weight-medium)" : "var(--lucent-font-weight-regular)",
+          fontWeight: w ? "var(--lucent-font-weight-medium)" : "var(--lucent-font-weight-regular)",
           cursor: "pointer",
           outline: "none",
           whiteSpace: "nowrap",
@@ -6105,10 +6122,10 @@ function lr({
       /* @__PURE__ */ e("div", { style: { padding: "var(--lucent-space-2)", paddingBottom: 0 }, children: /* @__PURE__ */ e(
         "input",
         {
-          ref: u,
+          ref: p,
           type: "text",
           value: c,
-          onChange: (d) => p(d.target.value),
+          onChange: (d) => u(d.target.value),
           placeholder: "Search…",
           style: {
             width: "100%",
@@ -6144,13 +6161,13 @@ function lr({
           children: "Clear selection"
         }
       ) }),
-      /* @__PURE__ */ e("div", { style: { overflowY: "auto", padding: "var(--lucent-space-1)", borderTop: "1px solid var(--lucent-border-subtle)", marginTop: "var(--lucent-space-2)" }, children: x.length === 0 ? /* @__PURE__ */ e("div", { style: {
+      /* @__PURE__ */ e("div", { style: { overflowY: "auto", padding: "var(--lucent-space-1)", borderTop: "1px solid var(--lucent-border-subtle)", marginTop: "var(--lucent-space-2)" }, children: y.length === 0 ? /* @__PURE__ */ e("div", { style: {
         padding: "var(--lucent-space-3)",
         color: "var(--lucent-text-disabled)",
         fontFamily: "var(--lucent-font-family-base)",
         fontSize: "var(--lucent-font-size-xs)",
         textAlign: "center"
-      }, children: "No results" }) : x.map((d) => /* @__PURE__ */ e(
+      }, children: "No results" }) : y.map((d) => /* @__PURE__ */ e(
         cr,
         {
           label: d,
@@ -6213,15 +6230,15 @@ function Ee({
   active: o,
   ...a
 }) {
-  const [i, l] = z(!1);
+  const [i, s] = z(!1);
   return /* @__PURE__ */ e(
     "button",
     {
       ...a,
       onClick: r,
       disabled: n,
-      onMouseEnter: () => l(!0),
-      onMouseLeave: () => l(!1),
+      onMouseEnter: () => s(!0),
+      onMouseLeave: () => s(!1),
       style: {
         display: "inline-flex",
         alignItems: "center",
@@ -6371,32 +6388,32 @@ function Wo({
   onOpenChange: a,
   style: i
 }) {
-  const l = o !== void 0, [s, c] = z(!1), p = l ? o : s, [f, u] = z(""), [k, x] = z(0), m = $(null), h = $(null), d = $(!1);
+  const s = o !== void 0, [l, c] = z(!1), u = s ? o : l, [f, p] = z(""), [w, y] = z(0), m = $(null), h = $(null), d = $(!1);
   if (!d.current) {
     const T = document.createElement("style");
     T.textContent = dr, document.head.appendChild(T), d.current = !0;
   }
   const b = J((T) => {
-    l || c(T), a == null || a(T);
-  }, [l, a]);
+    s || c(T), a == null || a(T);
+  }, [s, a]);
   H(() => {
-    const T = (E) => {
-      (E.metaKey || E.ctrlKey) && E.key === n && (E.preventDefault(), b(!p));
+    const T = (A) => {
+      (A.metaKey || A.ctrlKey) && A.key === n && (A.preventDefault(), b(!u));
     };
     return window.addEventListener("keydown", T), () => window.removeEventListener("keydown", T);
-  }, [p, n, b]), H(() => {
-    p && (u(""), x(0), setTimeout(() => {
+  }, [u, n, b]), H(() => {
+    u && (p(""), y(0), setTimeout(() => {
       var T;
       return (T = m.current) == null ? void 0 : T.focus();
     }, 10));
-  }, [p]);
-  const w = f ? t.filter((T) => ur(T, f)) : t, y = w.filter((T) => !T.disabled);
+  }, [u]);
+  const x = f ? t.filter((T) => ur(T, f)) : t, k = x.filter((T) => !T.disabled);
   H(() => {
     const T = h.current;
     if (!T) return;
-    const E = T.querySelector('[data-active="true"]');
-    E == null || E.scrollIntoView({ block: "nearest" });
-  }, [k]);
+    const A = T.querySelector('[data-active="true"]');
+    A == null || A.scrollIntoView({ block: "nearest" });
+  }, [w]);
   const S = (T) => {
     T.disabled || (T.onSelect(), b(!1));
   }, C = (T) => {
@@ -6405,20 +6422,20 @@ function Wo({
       return;
     }
     if (T.key === "ArrowDown")
-      T.preventDefault(), y.length > 0 && x((E) => (E + 1) % y.length);
+      T.preventDefault(), k.length > 0 && y((A) => (A + 1) % k.length);
     else if (T.key === "ArrowUp")
-      T.preventDefault(), y.length > 0 && x((E) => (E - 1 + y.length) % y.length);
+      T.preventDefault(), k.length > 0 && y((A) => (A - 1 + k.length) % k.length);
     else if (T.key === "Enter") {
-      const E = y[k];
-      E && S(E);
+      const A = k[w];
+      A && S(A);
     }
   }, v = [];
-  for (const T of w) {
-    const E = v[v.length - 1];
-    E && E.group === T.group ? E.items.push(T) : v.push({ group: T.group, items: [T] });
+  for (const T of x) {
+    const A = v[v.length - 1];
+    A && A.group === T.group ? A.items.push(T) : v.push({ group: T.group, items: [T] });
   }
-  if (!p) return null;
-  let q = 0;
+  if (!u) return null;
+  let E = 0;
   return /* @__PURE__ */ e(
     "div",
     {
@@ -6465,7 +6482,7 @@ function Wo({
               alignItems: "center",
               gap: "var(--lucent-space-3)",
               padding: "var(--lucent-space-3) var(--lucent-space-4)",
-              borderBottom: w.length > 0 ? "1px solid var(--lucent-border-subtle)" : "none"
+              borderBottom: x.length > 0 ? "1px solid var(--lucent-border-subtle)" : "none"
             }, children: [
               /* @__PURE__ */ g("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", "aria-hidden": !0, style: { flexShrink: 0, color: "var(--lucent-text-secondary)" }, children: [
                 /* @__PURE__ */ e("circle", { cx: "7", cy: "7", r: "4.5", stroke: "currentColor", strokeWidth: "1.5" }),
@@ -6480,7 +6497,7 @@ function Wo({
                   "aria-controls": "lucent-command-list",
                   value: f,
                   onChange: (T) => {
-                    u(T.target.value), x(0);
+                    p(T.target.value), y(0);
                   },
                   onKeyDown: C,
                   placeholder: r,
@@ -6505,19 +6522,19 @@ function Wo({
                 role: "listbox",
                 ref: h,
                 style: { maxHeight: 360, overflowY: "auto", padding: "var(--lucent-space-1) var(--lucent-space-2)" },
-                children: w.length === 0 ? /* @__PURE__ */ e("div", { style: { padding: "var(--lucent-space-8)", textAlign: "center" }, children: /* @__PURE__ */ g(V, { color: "secondary", children: [
+                children: x.length === 0 ? /* @__PURE__ */ e("div", { style: { padding: "var(--lucent-space-8)", textAlign: "center" }, children: /* @__PURE__ */ g(V, { color: "secondary", children: [
                   'No results for "',
                   f,
                   '"'
-                ] }) }) : v.map(({ group: T, items: E }, N) => /* @__PURE__ */ g("div", { children: [
+                ] }) }) : v.map(({ group: T, items: A }, N) => /* @__PURE__ */ g("div", { children: [
                   T && /* @__PURE__ */ e("div", { style: {
                     padding: "var(--lucent-space-2) var(--lucent-space-2) var(--lucent-space-1)",
                     ...N > 0 ? { borderTop: "1px solid var(--lucent-border-subtle)", marginTop: "var(--lucent-space-2)" } : {}
                   }, children: /* @__PURE__ */ e(V, { size: "xs", color: "secondary", weight: "medium", children: T }) }),
-                  E.map((R) => {
+                  A.map((R) => {
                     const I = R.disabled ?? !1;
                     let P = !1;
-                    return I || (P = q === k, q++), /* @__PURE__ */ g(
+                    return I || (P = E === w, E++), /* @__PURE__ */ g(
                       "div",
                       {
                         role: "option",
@@ -6527,8 +6544,8 @@ function Wo({
                         onClick: () => S(R),
                         onMouseEnter: () => {
                           if (!I) {
-                            const B = y.indexOf(R);
-                            B !== -1 && x(B);
+                            const B = k.indexOf(R);
+                            B !== -1 && y(B);
                           }
                         },
                         style: {
@@ -6566,9 +6583,9 @@ function Wo({
               ["↑↓", "Navigate"],
               ["↵", "Select"],
               ["Esc", "Close"]
-            ].map(([T, E]) => /* @__PURE__ */ g("span", { style: { display: "flex", alignItems: "center", gap: "var(--lucent-space-1)" }, children: [
+            ].map(([T, A]) => /* @__PURE__ */ g("span", { style: { display: "flex", alignItems: "center", gap: "var(--lucent-space-1)" }, children: [
               /* @__PURE__ */ e(ce, { size: "xs", variant: "outline", tabIndex: -1, style: { pointerEvents: "none" }, children: T }),
-              /* @__PURE__ */ e(V, { size: "xs", color: "secondary", children: E })
+              /* @__PURE__ */ e(V, { size: "xs", color: "secondary", children: A })
             ] }, T)) })
           ]
         }
@@ -6686,37 +6703,37 @@ function Vo({
   onChange: o,
   placeholder: a = "Select…",
   disabled: i = !1,
-  max: l,
-  size: s = "md",
+  max: s,
+  size: l = "md",
   label: c,
-  helperText: p,
+  helperText: u,
   errorText: f,
-  style: u
+  style: p
 }) {
-  const k = r !== void 0, [x, m] = z(n), h = k ? r : x, [d, b] = z(!1), [w, y] = z(""), [S, C] = z(0), [v, q] = z(!1), T = $(null), E = $(null), N = $(null), R = $(null), [I, P] = z({ top: 0, left: 0, width: 0 }), B = Pe();
+  const w = r !== void 0, [y, m] = z(n), h = w ? r : y, [d, b] = z(!1), [x, k] = z(""), [S, C] = z(0), [v, E] = z(!1), T = $(null), A = $(null), N = $(null), R = $(null), [I, P] = z({ top: 0, left: 0, width: 0 }), B = Pe();
   H(() => {
     if (!d) return;
     const F = (Y) => {
       var K, oe;
-      !((K = T.current) != null && K.contains(Y.target)) && !((oe = R.current) != null && oe.contains(Y.target)) && (b(!1), y(""));
+      !((K = T.current) != null && K.contains(Y.target)) && !((oe = R.current) != null && oe.contains(Y.target)) && (b(!1), k(""));
     };
     return document.addEventListener("mousedown", F), () => document.removeEventListener("mousedown", F);
   }, [d]), te(() => {
     if (!d || !N.current) return;
     const F = N.current.getBoundingClientRect();
     P({ top: F.bottom + 4, left: F.left, width: F.width });
-  }, [d, h, w]);
+  }, [d, h, x]);
   const G = (F) => {
-    const Y = h.includes(F) ? h.filter((K) => K !== F) : l !== void 0 && h.length >= l ? h : [...h, F];
-    k || m(Y), o == null || o(Y);
+    const Y = h.includes(F) ? h.filter((K) => K !== F) : s !== void 0 && h.length >= s ? h : [...h, F];
+    w || m(Y), o == null || o(Y);
   }, D = (F) => {
     const Y = h.filter((K) => K !== F);
-    k || m(Y), o == null || o(Y);
+    w || m(Y), o == null || o(Y);
   }, W = t.filter(
-    (F) => F.label.toLowerCase().includes(w.toLowerCase())
+    (F) => F.label.toLowerCase().includes(x.toLowerCase())
   ), _ = (F) => {
     if (F.key === "Escape") {
-      b(!1), y("");
+      b(!1), k("");
       return;
     }
     if (F.key === "ArrowDown" && (F.preventDefault(), b(!0), C((Y) => Math.min(Y + 1, W.length - 1))), F.key === "ArrowUp" && (F.preventDefault(), C((Y) => Math.max(Y - 1, 0))), F.key === "Enter") {
@@ -6724,15 +6741,15 @@ function Vo({
       const Y = W[S];
       Y && !Y.disabled && G(Y.value);
     }
-    F.key === "Backspace" && w === "" && h.length > 0 && D(h[h.length - 1]);
-  }, A = l !== void 0 && h.length >= l, L = !!f, M = i ? "var(--lucent-border-default)" : L ? "var(--lucent-danger-default)" : v ? "var(--lucent-accent-border)" : "var(--lucent-border-default)", O = v ? `0 0 0 3px ${L ? "var(--lucent-danger-subtle)" : "var(--lucent-accent-subtle)"}` : "none", j = `lucent-multiselect-${Pe()}`;
-  return /* @__PURE__ */ g("div", { ref: T, style: { display: "flex", flexDirection: "column", gap: "var(--lucent-space-1)", ...u }, children: [
+    F.key === "Backspace" && x === "" && h.length > 0 && D(h[h.length - 1]);
+  }, q = s !== void 0 && h.length >= s, L = !!f, M = i ? "var(--lucent-border-default)" : L ? "var(--lucent-danger-default)" : v ? "var(--lucent-accent-border)" : "var(--lucent-border-default)", O = v ? `0 0 0 3px ${L ? "var(--lucent-danger-subtle)" : "var(--lucent-accent-subtle)"}` : "none", j = `lucent-multiselect-${Pe()}`;
+  return /* @__PURE__ */ g("div", { ref: T, style: { display: "flex", flexDirection: "column", gap: "var(--lucent-space-1)", ...p }, children: [
     c && /* @__PURE__ */ e(
       "label",
       {
         htmlFor: j,
         style: {
-          fontSize: Ae[s],
+          fontSize: Ae[l],
           fontWeight: "var(--lucent-font-weight-medium)",
           color: i ? "var(--lucent-text-disabled)" : "var(--lucent-text-primary)",
           fontFamily: "var(--lucent-font-family-base)"
@@ -6746,16 +6763,16 @@ function Vo({
         {
           onClick: () => {
             var F;
-            i || (b(!0), (F = E.current) == null || F.focus());
+            i || (b(!0), (F = A.current) == null || F.focus());
           },
           style: {
             display: "flex",
             flexWrap: "wrap",
             alignItems: "center",
-            gap: xe[s],
-            minHeight: pr[s],
+            gap: xe[l],
+            minHeight: pr[l],
             boxSizing: "border-box",
-            padding: fr[s],
+            padding: fr[l],
             borderRadius: "var(--lucent-radius-lg)",
             border: `1px solid ${M}`,
             background: i ? "color-mix(in srgb, var(--lucent-text-primary) 6%, transparent)" : "var(--lucent-surface)",
@@ -6766,26 +6783,26 @@ function Vo({
           children: [
             h.map((F) => {
               const Y = t.find((K) => K.value === F);
-              return Y ? /* @__PURE__ */ e(ke, { size: mr[s], onDismiss: () => D(F), disabled: i, children: Y.label }, F) : null;
+              return Y ? /* @__PURE__ */ e(ke, { size: mr[l], onDismiss: () => D(F), disabled: i, children: Y.label }, F) : null;
             }),
             /* @__PURE__ */ e(
               "input",
               {
                 id: j,
-                ref: E,
-                value: w,
+                ref: A,
+                value: x,
                 onChange: (F) => {
-                  y(F.target.value), b(!0), C(0);
+                  k(F.target.value), b(!0), C(0);
                 },
                 onKeyDown: _,
-                onFocus: () => q(!0),
-                onBlur: () => q(!1),
+                onFocus: () => E(!0),
+                onBlur: () => E(!1),
                 disabled: i,
                 placeholder: h.length === 0 ? a : "",
                 "aria-autocomplete": "list",
                 "aria-controls": B,
                 "aria-expanded": d,
-                "aria-describedby": L ? `${j}-error` : p ? `${j}-helper` : void 0,
+                "aria-describedby": L ? `${j}-error` : u ? `${j}-helper` : void 0,
                 role: "combobox",
                 style: {
                   flex: "1 1 80px",
@@ -6794,7 +6811,7 @@ function Vo({
                   outline: "none",
                   background: "transparent",
                   fontFamily: "var(--lucent-font-family-base)",
-                  fontSize: hr[s],
+                  fontSize: hr[l],
                   color: i ? "var(--lucent-text-disabled)" : "var(--lucent-text-primary)",
                   cursor: i ? "not-allowed" : "text",
                   padding: h.length === 0 ? "2px 0 2px var(--lucent-space-1)" : "2px 0"
@@ -6826,11 +6843,11 @@ function Vo({
               boxShadow: "0 0 24px -4px color-mix(in srgb, var(--lucent-accent-default) 12%, transparent), var(--lucent-shadow-md)",
               maxHeight: 240,
               overflowY: "auto",
-              padding: xe[s]
+              padding: xe[l]
             },
             children: [
-              W.length === 0 ? /* @__PURE__ */ e("div", { style: { padding: "var(--lucent-space-2)" }, children: /* @__PURE__ */ e(V, { color: "secondary", size: at[s], children: "No options" }) }) : W.map((F, Y) => {
-                const K = h.includes(F.value), oe = Y === S, ne = F.disabled ?? !1, U = A && !K;
+              W.length === 0 ? /* @__PURE__ */ e("div", { style: { padding: "var(--lucent-space-2)" }, children: /* @__PURE__ */ e(V, { color: "secondary", size: at[l], children: "No options" }) }) : W.map((F, Y) => {
+                const K = h.includes(F.value), oe = Y === S, ne = F.disabled ?? !1, U = q && !K;
                 return /* @__PURE__ */ g(
                   "div",
                   {
@@ -6844,8 +6861,8 @@ function Vo({
                     style: {
                       display: "flex",
                       alignItems: "center",
-                      gap: xe[s],
-                      padding: xe[s],
+                      gap: xe[l],
+                      padding: xe[l],
                       borderRadius: "var(--lucent-radius-md)",
                       cursor: ne || U ? "not-allowed" : "pointer",
                       background: oe ? "color-mix(in srgb, var(--lucent-text-primary) 5%, transparent)" : "transparent",
@@ -6857,24 +6874,24 @@ function Vo({
                         {
                           checked: K,
                           disabled: ne || U,
-                          size: s,
+                          size: l,
                           style: { margin: 0, pointerEvents: "none" },
                           "aria-hidden": !0,
                           readOnly: !0
                         }
                       ),
-                      /* @__PURE__ */ e(V, { size: at[s], children: F.label })
+                      /* @__PURE__ */ e(V, { size: at[l], children: F.label })
                     ]
                   },
                   F.value
                 );
               }),
-              A && /* @__PURE__ */ e("div", { style: {
+              q && /* @__PURE__ */ e("div", { style: {
                 padding: "var(--lucent-space-2)",
                 borderTop: "1px solid var(--lucent-border-subtle)"
-              }, children: /* @__PURE__ */ g(V, { size: s === "lg" ? "sm" : "xs", color: "secondary", children: [
+              }, children: /* @__PURE__ */ g(V, { size: l === "lg" ? "sm" : "xs", color: "secondary", children: [
                 "Max ",
-                l,
+                s,
                 " selected"
               ] }) })
             ]
@@ -6889,23 +6906,23 @@ function Vo({
         id: `${j}-error`,
         role: "alert",
         style: {
-          fontSize: Ae[s],
+          fontSize: Ae[l],
           color: "var(--lucent-danger-text)",
           fontFamily: "var(--lucent-font-family-base)"
         },
         children: f
       }
     ),
-    !L && p && /* @__PURE__ */ e(
+    !L && u && /* @__PURE__ */ e(
       "span",
       {
         id: `${j}-helper`,
         style: {
-          fontSize: Ae[s],
+          fontSize: Ae[l],
           color: "var(--lucent-text-secondary)",
           fontFamily: "var(--lucent-font-family-base)"
         },
-        children: p
+        children: u
       }
     )
   ] });
@@ -7065,7 +7082,7 @@ const xr = { sm: "calc(var(--lucent-space-8) * 0.5 + 18px)", md: "calc(var(--luc
   lg: "var(--lucent-space-3)"
 }, Tr = { sm: 28, md: 32, lg: 38 }, Cr = { sm: "var(--lucent-font-size-xs)", md: "var(--lucent-font-size-sm)", lg: "var(--lucent-font-size-md)" }, Ir = { sm: "xs", md: "sm", lg: "md" }, Mr = { sm: "xs", md: "xs", lg: "sm" }, zr = { sm: 24, md: 28, lg: 32 }, Er = { sm: 14, md: 16, lg: 18 }, vt = { sm: "var(--lucent-space-3)", md: "var(--lucent-space-4)", lg: "var(--lucent-space-5)" }, $e = { sm: 220, md: 260, lg: 300 };
 function it({ dir: t, onClick: r, disabled: n, size: o = "md" }) {
-  const [a, i] = z(!1), l = zr[o], s = Er[o];
+  const [a, i] = z(!1), s = zr[o], l = Er[o];
   return /* @__PURE__ */ e(
     "button",
     {
@@ -7079,8 +7096,8 @@ function it({ dir: t, onClick: r, disabled: n, size: o = "md" }) {
         display: "inline-flex",
         alignItems: "center",
         justifyContent: "center",
-        width: l,
-        height: l,
+        width: s,
+        height: s,
         border: "none",
         borderRadius: "var(--lucent-radius-md)",
         background: a && !n ? "color-mix(in srgb, var(--lucent-text-primary) 5%, transparent)" : "transparent",
@@ -7088,7 +7105,7 @@ function it({ dir: t, onClick: r, disabled: n, size: o = "md" }) {
         cursor: n ? "not-allowed" : "pointer",
         transition: "background var(--lucent-duration-fast)"
       },
-      children: /* @__PURE__ */ e("svg", { width: s, height: s, viewBox: "0 0 16 16", fill: "none", "aria-hidden": !0, children: /* @__PURE__ */ e(
+      children: /* @__PURE__ */ e("svg", { width: l, height: l, viewBox: "0 0 16 16", fill: "none", "aria-hidden": !0, children: /* @__PURE__ */ e(
         "path",
         {
           d: t === "prev" ? "M10 12L6 8l4-4" : "M6 4l4 4-4 4",
@@ -7108,58 +7125,58 @@ function We({
   today: o,
   min: a,
   max: i,
-  onSelect: l,
-  onPrevMonth: s,
+  onSelect: s,
+  onPrevMonth: l,
   onNextMonth: c,
-  highlightRange: p,
+  highlightRange: u,
   onDayHover: f,
-  size: u = "md"
+  size: p = "md"
 }) {
-  const k = gr(t, r), x = vr(t, r), [m, h] = z(null), d = [
-    ...Array(x).fill(null),
-    ...Array.from({ length: k }, (b, w) => w + 1)
+  const w = gr(t, r), y = vr(t, r), [m, h] = z(null), d = [
+    ...Array(y).fill(null),
+    ...Array.from({ length: w }, (b, x) => x + 1)
   ];
   for (; d.length % 7 !== 0; ) d.push(null);
   return /* @__PURE__ */ g("div", { children: [
     /* @__PURE__ */ g("div", { style: { display: "flex", alignItems: "center", justifyContent: "space-between", marginBottom: "var(--lucent-space-3)" }, children: [
-      /* @__PURE__ */ e(it, { dir: "prev", onClick: s, size: u }),
-      /* @__PURE__ */ g(V, { weight: "medium", size: Ir[u], children: [
+      /* @__PURE__ */ e(it, { dir: "prev", onClick: l, size: p }),
+      /* @__PURE__ */ g(V, { weight: "medium", size: Ir[p], children: [
         br[r],
         " ",
         t
       ] }),
-      /* @__PURE__ */ e(it, { dir: "next", onClick: c, size: u })
+      /* @__PURE__ */ e(it, { dir: "next", onClick: c, size: p })
     ] }),
-    /* @__PURE__ */ e("div", { style: { display: "grid", gridTemplateColumns: "repeat(7, 1fr)", gap: 2, marginBottom: "var(--lucent-space-1)" }, children: yr.map((b) => /* @__PURE__ */ e("div", { style: { textAlign: "center" }, children: /* @__PURE__ */ e(V, { size: Mr[u], color: "secondary", children: b }) }, b)) }),
-    /* @__PURE__ */ e("div", { style: { display: "grid", gridTemplateColumns: "repeat(7, 1fr)", gap: 2 }, children: d.map((b, w) => {
-      if (!b) return /* @__PURE__ */ e("div", {}, w);
-      const y = new Date(t, r, b), S = n ? Se(y, n) : !1, C = Se(y, o), v = (a ? Te(y, a) : !1) || (i ? ot(y, i) : !1);
-      let q = !1;
-      return p != null && p.start && (p != null && p.end) && (q = !Te(y, p.start) && !ot(y, p.end)), /* @__PURE__ */ e(
+    /* @__PURE__ */ e("div", { style: { display: "grid", gridTemplateColumns: "repeat(7, 1fr)", gap: 2, marginBottom: "var(--lucent-space-1)" }, children: yr.map((b) => /* @__PURE__ */ e("div", { style: { textAlign: "center" }, children: /* @__PURE__ */ e(V, { size: Mr[p], color: "secondary", children: b }) }, b)) }),
+    /* @__PURE__ */ e("div", { style: { display: "grid", gridTemplateColumns: "repeat(7, 1fr)", gap: 2 }, children: d.map((b, x) => {
+      if (!b) return /* @__PURE__ */ e("div", {}, x);
+      const k = new Date(t, r, b), S = n ? Se(k, n) : !1, C = Se(k, o), v = (a ? Te(k, a) : !1) || (i ? ot(k, i) : !1);
+      let E = !1;
+      return u != null && u.start && (u != null && u.end) && (E = !Te(k, u.start) && !ot(k, u.end)), /* @__PURE__ */ e(
         "button",
         {
           type: "button",
           disabled: v,
-          onClick: () => !v && l(y),
+          onClick: () => !v && s(k),
           onMouseEnter: () => {
-            h(b), f == null || f(y);
+            h(b), f == null || f(k);
           },
           onMouseLeave: () => {
             h(null), f == null || f(null);
           },
-          "aria-label": he(y),
+          "aria-label": he(k),
           "aria-pressed": S,
           style: {
             display: "flex",
             alignItems: "center",
             justifyContent: "center",
-            height: Tr[u],
+            height: Tr[p],
             width: "100%",
             border: C && !S ? "1px solid var(--lucent-border-strong)" : "1px solid transparent",
             borderRadius: "var(--lucent-radius-md)",
-            background: S ? "var(--lucent-accent-default)" : q ? "var(--lucent-accent-subtle)" : m === b && !v ? "color-mix(in srgb, var(--lucent-accent-default) 14%, transparent)" : "transparent",
+            background: S ? "var(--lucent-accent-default)" : E ? "var(--lucent-accent-subtle)" : m === b && !v ? "color-mix(in srgb, var(--lucent-accent-default) 14%, transparent)" : "transparent",
             color: S ? "var(--lucent-accent-fg)" : v ? "var(--lucent-text-disabled)" : "var(--lucent-text-primary)",
-            fontSize: Cr[u],
+            fontSize: Cr[p],
             fontFamily: "var(--lucent-font-family-base)",
             fontWeight: C ? "var(--lucent-font-weight-medium)" : "var(--lucent-font-weight-regular)",
             cursor: v ? "not-allowed" : "pointer",
@@ -7167,7 +7184,7 @@ function We({
           },
           children: b
         },
-        w
+        x
       );
     }) })
   ] });
@@ -7179,19 +7196,19 @@ function Go({
   placeholder: o = "Pick a date",
   disabled: a = !1,
   min: i,
-  max: l,
-  size: s = "md",
+  max: s,
+  size: l = "md",
   label: c,
-  helperText: p,
+  helperText: u,
   errorText: f,
-  style: u
+  style: p
 }) {
-  const k = t !== void 0, [x, m] = z(r), h = k ? t : x, d = !!f, b = a, w = `lucent-datepicker-${Math.random().toString(36).slice(2, 7)}`, y = /* @__PURE__ */ new Date(), [S, C] = z((h ?? y).getFullYear()), [v, q] = z((h ?? y).getMonth()), [T, E] = z(!1), [N, R] = z(!1), I = $(null), P = $(null), [B, G] = z({ top: 0, left: 0 });
+  const w = t !== void 0, [y, m] = z(r), h = w ? t : y, d = !!f, b = a, x = `lucent-datepicker-${Math.random().toString(36).slice(2, 7)}`, k = /* @__PURE__ */ new Date(), [S, C] = z((h ?? k).getFullYear()), [v, E] = z((h ?? k).getMonth()), [T, A] = z(!1), [N, R] = z(!1), I = $(null), P = $(null), [B, G] = z({ top: 0, left: 0 });
   H(() => {
     if (!T) return;
     const M = (O) => {
       var j, F;
-      !((j = I.current) != null && j.contains(O.target)) && !((F = P.current) != null && F.contains(O.target)) && E(!1);
+      !((j = I.current) != null && j.contains(O.target)) && !((F = P.current) != null && F.contains(O.target)) && A(!1);
     };
     return document.addEventListener("mousedown", M), () => document.removeEventListener("mousedown", M);
   }, [T]), te(() => {
@@ -7200,19 +7217,19 @@ function Go({
     G({ top: M.bottom + 4, left: M.left });
   }, [T]);
   const D = (M) => {
-    k || m(M), n == null || n(M), E(!1);
+    w || m(M), n == null || n(M), A(!1);
   }, W = () => {
-    v === 0 ? (q(11), C((M) => M - 1)) : q((M) => M - 1);
+    v === 0 ? (E(11), C((M) => M - 1)) : E((M) => M - 1);
   }, _ = () => {
-    v === 11 ? (q(0), C((M) => M + 1)) : q((M) => M + 1);
-  }, A = b ? "transparent" : d ? "var(--lucent-danger-default)" : N ? "var(--lucent-accent-border)" : "var(--lucent-border-default)", L = N ? `0 0 0 3px ${d ? "var(--lucent-danger-subtle)" : "var(--lucent-accent-subtle)"}` : "none";
-  return /* @__PURE__ */ g("div", { ref: I, style: { display: "flex", flexDirection: "column", gap: "var(--lucent-space-1)", ...u }, children: [
+    v === 11 ? (E(0), C((M) => M + 1)) : E((M) => M + 1);
+  }, q = b ? "transparent" : d ? "var(--lucent-danger-default)" : N ? "var(--lucent-accent-border)" : "var(--lucent-border-default)", L = N ? `0 0 0 3px ${d ? "var(--lucent-danger-subtle)" : "var(--lucent-accent-subtle)"}` : "none";
+  return /* @__PURE__ */ g("div", { ref: I, style: { display: "flex", flexDirection: "column", gap: "var(--lucent-space-1)", ...p }, children: [
     c && /* @__PURE__ */ e(
       "label",
       {
-        htmlFor: w,
+        htmlFor: x,
         style: {
-          fontSize: qe[s],
+          fontSize: qe[l],
           fontWeight: "var(--lucent-font-weight-medium)",
           color: b ? "var(--lucent-text-disabled)" : "var(--lucent-text-primary)",
           fontFamily: "var(--lucent-font-family-base)"
@@ -7224,9 +7241,9 @@ function Go({
       "button",
       {
         type: "button",
-        id: w,
+        id: x,
         disabled: a,
-        onClick: () => !a && E((M) => !M),
+        onClick: () => !a && A((M) => !M),
         onFocus: () => R(!0),
         onBlur: () => R(!1),
         "aria-haspopup": "dialog",
@@ -7235,18 +7252,18 @@ function Go({
         style: {
           display: "flex",
           alignItems: "center",
-          gap: Sr[s],
+          gap: Sr[l],
           width: "100%",
-          height: xr[s],
+          height: xr[l],
           boxSizing: "border-box",
-          padding: `0 ${kr[s]}`,
+          padding: `0 ${kr[l]}`,
           borderRadius: "var(--lucent-radius-lg)",
-          border: `1px solid ${A}`,
+          border: `1px solid ${q}`,
           boxShadow: L,
           background: b ? "color-mix(in srgb, var(--lucent-text-primary) 6%, transparent)" : "var(--lucent-surface)",
           color: h ? "var(--lucent-text-primary)" : "var(--lucent-text-secondary)",
           fontFamily: "var(--lucent-font-family-base)",
-          fontSize: wr[s],
+          fontSize: wr[l],
           cursor: b ? "not-allowed" : "pointer",
           outline: "none",
           transition: [
@@ -7269,22 +7286,22 @@ function Go({
       {
         role: "alert",
         style: {
-          fontSize: qe[s],
+          fontSize: qe[l],
           color: "var(--lucent-danger-text)",
           fontFamily: "var(--lucent-font-family-base)"
         },
         children: f
       }
     ),
-    !d && p && /* @__PURE__ */ e(
+    !d && u && /* @__PURE__ */ e(
       "span",
       {
         style: {
-          fontSize: qe[s],
+          fontSize: qe[l],
           color: "var(--lucent-text-secondary)",
           fontFamily: "var(--lucent-font-family-base)"
         },
-        children: p
+        children: u
       }
     ),
     T && ae(
@@ -7305,8 +7322,8 @@ function Go({
             border: "1px solid color-mix(in srgb, var(--lucent-accent-default) 15%, var(--lucent-border-default))",
             borderRadius: "var(--lucent-radius-lg)",
             boxShadow: "0 0 24px -4px color-mix(in srgb, var(--lucent-accent-default) 12%, transparent), var(--lucent-shadow-md)",
-            padding: vt[s],
-            minWidth: $e[s]
+            padding: vt[l],
+            minWidth: $e[l]
           },
           children: /* @__PURE__ */ e(
             We,
@@ -7314,13 +7331,13 @@ function Go({
               year: S,
               month: v,
               ...h !== void 0 && { selected: h },
-              today: y,
+              today: k,
               ...i !== void 0 && { min: i },
-              ...l !== void 0 && { max: l },
+              ...s !== void 0 && { max: s },
               onSelect: D,
               onPrevMonth: W,
               onNextMonth: _,
-              size: s
+              size: l
             }
           )
         }
@@ -7467,25 +7484,25 @@ function Lr({
   placeholder: o = "Pick a date range",
   disabled: a = !1,
   min: i,
-  max: l,
-  size: s = "md",
+  max: s,
+  size: l = "md",
   label: c,
-  helperText: p,
+  helperText: u,
   errorText: f,
-  trigger: u,
-  style: k
+  trigger: p,
+  style: w
 }) {
-  const x = t !== void 0, [m, h] = z(r), d = x ? t : m, b = !!f, w = a, y = `lucent-daterangepicker-${Math.random().toString(36).slice(2, 7)}`, [S, C] = z(null), [v, q] = z(null), T = /* @__PURE__ */ new Date(), [E, N] = z(((d == null ? void 0 : d.start) ?? T).getFullYear()), [R, I] = z(((d == null ? void 0 : d.start) ?? T).getMonth()), P = R === 11 ? 0 : R + 1, B = R === 11 ? E + 1 : E, [G, D] = z(!1), [W, _] = z(!1), A = $(null), L = $(null), [M, O] = z({ top: 0, left: 0 });
+  const y = t !== void 0, [m, h] = z(r), d = y ? t : m, b = !!f, x = a, k = `lucent-daterangepicker-${Math.random().toString(36).slice(2, 7)}`, [S, C] = z(null), [v, E] = z(null), T = /* @__PURE__ */ new Date(), [A, N] = z(((d == null ? void 0 : d.start) ?? T).getFullYear()), [R, I] = z(((d == null ? void 0 : d.start) ?? T).getMonth()), P = R === 11 ? 0 : R + 1, B = R === 11 ? A + 1 : A, [G, D] = z(!1), [W, _] = z(!1), q = $(null), L = $(null), [M, O] = z({ top: 0, left: 0 });
   H(() => {
     if (!G) return;
     const U = (ie) => {
       var ge, de;
-      !((ge = A.current) != null && ge.contains(ie.target)) && !((de = L.current) != null && de.contains(ie.target)) && (D(!1), C(null));
+      !((ge = q.current) != null && ge.contains(ie.target)) && !((de = L.current) != null && de.contains(ie.target)) && (D(!1), C(null));
     };
     return document.addEventListener("mousedown", U), () => document.removeEventListener("mousedown", U);
   }, [G]), te(() => {
-    if (!G || !A.current) return;
-    const U = A.current.getBoundingClientRect();
+    if (!G || !q.current) return;
+    const U = q.current.getBoundingClientRect();
     O({ top: U.bottom + 4, left: U.left });
   }, [G]);
   const j = (U) => {
@@ -7493,7 +7510,7 @@ function Lr({
       C(U);
     else {
       const [ie, ge] = Te(U, S) || Se(U, S) ? [U, S] : [S, U], de = { start: ie, end: ge };
-      x || h(de), n == null || n(de), C(null), D(!1);
+      y || h(de), n == null || n(de), C(null), D(!1);
     }
   }, F = () => {
     R === 0 ? (I(11), N((U) => U - 1)) : I((U) => U - 1);
@@ -7505,35 +7522,35 @@ function Lr({
     const [U, ie] = Te(v, S) ? [v, S] : [S, v];
     K = { start: U, end: ie };
   } else S ? K = { start: S, end: S } : d && (K = { start: d.start, end: d.end });
-  const oe = w ? "transparent" : b ? "var(--lucent-danger-default)" : W ? "var(--lucent-accent-border)" : "var(--lucent-border-default)", ne = W ? `0 0 0 3px ${b ? "var(--lucent-danger-subtle)" : "var(--lucent-accent-subtle)"}` : "none";
-  return /* @__PURE__ */ g("div", { ref: A, style: { display: "flex", flexDirection: "column", gap: "var(--lucent-space-1)", ...k }, children: [
+  const oe = x ? "transparent" : b ? "var(--lucent-danger-default)" : W ? "var(--lucent-accent-border)" : "var(--lucent-border-default)", ne = W ? `0 0 0 3px ${b ? "var(--lucent-danger-subtle)" : "var(--lucent-accent-subtle)"}` : "none";
+  return /* @__PURE__ */ g("div", { ref: q, style: { display: "flex", flexDirection: "column", gap: "var(--lucent-space-1)", ...w }, children: [
     c && /* @__PURE__ */ e(
       "label",
       {
-        htmlFor: y,
+        htmlFor: k,
         style: {
-          fontSize: De[s],
+          fontSize: De[l],
           fontWeight: "var(--lucent-font-weight-medium)",
-          color: w ? "var(--lucent-text-disabled)" : "var(--lucent-text-primary)",
+          color: x ? "var(--lucent-text-disabled)" : "var(--lucent-text-primary)",
           fontFamily: "var(--lucent-font-family-base)"
         },
         children: c
       }
     ),
-    u ? /* @__PURE__ */ e(
+    p ? /* @__PURE__ */ e(
       "span",
       {
         onClick: () => !a && D((U) => !U),
         "aria-haspopup": "dialog",
         "aria-expanded": G,
         style: { display: "inline-flex", cursor: a ? "not-allowed" : "pointer" },
-        children: u
+        children: p
       }
     ) : /* @__PURE__ */ g(
       "button",
       {
         type: "button",
-        id: y,
+        id: k,
         disabled: a,
         onClick: () => !a && D((U) => !U),
         onFocus: () => _(!0),
@@ -7544,19 +7561,19 @@ function Lr({
         style: {
           display: "flex",
           alignItems: "center",
-          gap: Br[s],
+          gap: Br[l],
           width: "100%",
-          height: Ar[s],
+          height: Ar[l],
           boxSizing: "border-box",
-          padding: `0 ${Dr[s]}`,
+          padding: `0 ${Dr[l]}`,
           borderRadius: "var(--lucent-radius-lg)",
           border: `1px solid ${oe}`,
           boxShadow: ne,
-          background: w ? "color-mix(in srgb, var(--lucent-text-primary) 6%, transparent)" : "var(--lucent-surface)",
+          background: x ? "color-mix(in srgb, var(--lucent-text-primary) 6%, transparent)" : "var(--lucent-surface)",
           color: d ? "var(--lucent-text-primary)" : "var(--lucent-text-secondary)",
           fontFamily: "var(--lucent-font-family-base)",
-          fontSize: qr[s],
-          cursor: w ? "not-allowed" : "pointer",
+          fontSize: qr[l],
+          cursor: x ? "not-allowed" : "pointer",
           outline: "none",
           transition: [
             "border-color var(--lucent-duration-fast) var(--lucent-easing-default)",
@@ -7578,22 +7595,22 @@ function Lr({
       {
         role: "alert",
         style: {
-          fontSize: De[s],
+          fontSize: De[l],
           color: "var(--lucent-danger-text)",
           fontFamily: "var(--lucent-font-family-base)"
         },
         children: f
       }
     ),
-    !b && p && /* @__PURE__ */ e(
+    !b && u && /* @__PURE__ */ e(
       "span",
       {
         style: {
-          fontSize: De[s],
+          fontSize: De[l],
           color: "var(--lucent-text-secondary)",
           fontFamily: "var(--lucent-font-family-base)"
         },
-        children: p
+        children: u
       }
     ),
     G && ae(
@@ -7614,30 +7631,30 @@ function Lr({
             border: "1px solid color-mix(in srgb, var(--lucent-accent-default) 15%, var(--lucent-border-default))",
             borderRadius: "var(--lucent-radius-lg)",
             boxShadow: "0 0 24px -4px color-mix(in srgb, var(--lucent-accent-default) 12%, transparent), var(--lucent-shadow-md)",
-            padding: vt[s],
+            padding: vt[l],
             display: "flex",
             gap: "var(--lucent-space-6)"
           },
           children: [
-            /* @__PURE__ */ e("div", { style: { minWidth: $e[s] }, children: /* @__PURE__ */ e(
+            /* @__PURE__ */ e("div", { style: { minWidth: $e[l] }, children: /* @__PURE__ */ e(
               We,
               {
-                year: E,
+                year: A,
                 month: R,
                 ...(d == null ? void 0 : d.start) !== void 0 && { selected: d.start },
                 today: T,
                 ...i !== void 0 && { min: i },
-                ...l !== void 0 && { max: l },
+                ...s !== void 0 && { max: s },
                 onSelect: j,
                 onPrevMonth: F,
                 onNextMonth: Y,
                 ...K !== void 0 && { highlightRange: K },
-                ...S && { onDayHover: q },
-                size: s
+                ...S && { onDayHover: E },
+                size: l
               }
             ) }),
             /* @__PURE__ */ e("div", { style: { width: 1, background: "var(--lucent-border-subtle)", flexShrink: 0 } }),
-            /* @__PURE__ */ e("div", { style: { minWidth: $e[s] }, children: /* @__PURE__ */ e(
+            /* @__PURE__ */ e("div", { style: { minWidth: $e[l] }, children: /* @__PURE__ */ e(
               We,
               {
                 year: B,
@@ -7645,13 +7662,13 @@ function Lr({
                 ...(d == null ? void 0 : d.end) !== void 0 && { selected: d.end },
                 today: T,
                 ...i !== void 0 && { min: i },
-                ...l !== void 0 && { max: l },
+                ...s !== void 0 && { max: s },
                 onSelect: j,
                 onPrevMonth: F,
                 onNextMonth: Y,
                 ...K !== void 0 && { highlightRange: K },
-                ...S && { onDayHover: q },
-                size: s
+                ...S && { onDayHover: E },
+                size: l
               }
             ) })
           ]
@@ -7850,42 +7867,42 @@ function _o({
   value: o,
   onChange: a,
   onError: i,
-  disabled: l = !1,
-  style: s
+  disabled: s = !1,
+  style: l
 }) {
-  const c = o !== void 0, [p, f] = z([]), u = c ? o : p, [k, x] = z(!1), [m, h] = z(!1), d = $(null), b = J((C) => {
-    if (!C || l) return;
+  const c = o !== void 0, [u, f] = z([]), p = c ? o : u, [w, y] = z(!1), [m, h] = z(!1), d = $(null), b = J((C) => {
+    if (!C || s) return;
     const v = [];
     for (const T of Array.from(C)) {
       if (n && T.size > n) {
         i == null || i(`"${T.name}" exceeds the ${Oe(n)} limit.`);
         continue;
       }
-      if (!r && u.length + v.length >= 1) break;
+      if (!r && p.length + v.length >= 1) break;
       v.push({ id: Pr(), file: T });
     }
     if (v.length === 0) return;
-    const q = r ? [...u, ...v] : v;
-    c || f(q), a == null || a(q);
-  }, [l, u, c, n, r, a, i]), w = (C) => {
-    const v = u.filter((q) => q.id !== C);
+    const E = r ? [...p, ...v] : v;
+    c || f(E), a == null || a(E);
+  }, [s, p, c, n, r, a, i]), x = (C) => {
+    const v = p.filter((E) => E.id !== C);
     c || f(v), a == null || a(v);
-  }, y = (C) => {
-    C.preventDefault(), x(!1), b(C.dataTransfer.files);
+  }, k = (C) => {
+    C.preventDefault(), y(!1), b(C.dataTransfer.files);
   }, S = (C) => {
     b(C.target.files), C.target.value = "";
   };
-  return /* @__PURE__ */ g("div", { style: { display: "flex", flexDirection: "column", gap: "var(--lucent-space-3)", ...s }, children: [
+  return /* @__PURE__ */ g("div", { style: { display: "flex", flexDirection: "column", gap: "var(--lucent-space-3)", ...l }, children: [
     /* @__PURE__ */ g(
       "div",
       {
         role: "button",
-        tabIndex: l ? -1 : 0,
+        tabIndex: s ? -1 : 0,
         "aria-label": "Upload files",
-        "aria-disabled": l,
+        "aria-disabled": s,
         onClick: () => {
           var C;
-          return !l && ((C = d.current) == null ? void 0 : C.click());
+          return !s && ((C = d.current) == null ? void 0 : C.click());
         },
         onKeyDown: (C) => {
           var v;
@@ -7894,10 +7911,10 @@ function _o({
         onFocus: () => h(!0),
         onBlur: () => h(!1),
         onDragOver: (C) => {
-          C.preventDefault(), l || x(!0);
+          C.preventDefault(), s || y(!0);
         },
-        onDragLeave: () => x(!1),
-        onDrop: y,
+        onDragLeave: () => y(!1),
+        onDrop: k,
         style: {
           display: "flex",
           flexDirection: "column",
@@ -7906,9 +7923,9 @@ function _o({
           gap: "var(--lucent-space-2)",
           padding: "var(--lucent-space-8) var(--lucent-space-6)",
           borderRadius: "var(--lucent-radius-lg)",
-          border: `2px dashed ${l ? "var(--lucent-border-default)" : k || m ? "var(--lucent-accent-default)" : "var(--lucent-border-default)"}`,
-          background: k ? "var(--lucent-accent-subtle)" : "var(--lucent-surface-secondary)",
-          cursor: l ? "not-allowed" : "pointer",
+          border: `2px dashed ${s ? "var(--lucent-border-default)" : w || m ? "var(--lucent-accent-default)" : "var(--lucent-border-default)"}`,
+          background: w ? "var(--lucent-accent-subtle)" : "var(--lucent-surface-secondary)",
+          cursor: s ? "not-allowed" : "pointer",
           transition: "border-color var(--lucent-duration-fast), background var(--lucent-duration-fast)",
           outline: "none"
         },
@@ -7921,7 +7938,7 @@ function _o({
               viewBox: "0 0 32 32",
               fill: "none",
               "aria-hidden": !0,
-              style: { color: l ? "var(--lucent-text-disabled)" : k ? "var(--lucent-accent-default)" : "var(--lucent-text-secondary)" },
+              style: { color: s ? "var(--lucent-text-disabled)" : w ? "var(--lucent-accent-default)" : "var(--lucent-text-secondary)" },
               children: [
                 /* @__PURE__ */ e("path", { d: "M16 20V10M16 10l-4 4M16 10l4 4", stroke: "currentColor", strokeWidth: "1.8", strokeLinecap: "round", strokeLinejoin: "round" }),
                 /* @__PURE__ */ e("path", { d: "M8 24h16", stroke: "currentColor", strokeWidth: "1.8", strokeLinecap: "round" })
@@ -7929,7 +7946,7 @@ function _o({
             }
           ),
           /* @__PURE__ */ g("div", { style: { textAlign: "center", width: "100%" }, children: [
-            /* @__PURE__ */ e(V, { color: l ? "disabled" : "primary", weight: "medium", align: "center", children: k ? "Drop to upload" : "Drop files here or click to browse" }),
+            /* @__PURE__ */ e(V, { color: s ? "disabled" : "primary", weight: "medium", align: "center", children: w ? "Drop to upload" : "Drop files here or click to browse" }),
             (t || n) && /* @__PURE__ */ e(V, { size: "xs", color: "secondary", align: "center", children: [
               t && `Accepted: ${t}`,
               n && `Max size: ${Oe(n)}`
@@ -7942,7 +7959,7 @@ function _o({
               type: "file",
               accept: t,
               multiple: r,
-              disabled: l,
+              disabled: s,
               onChange: S,
               style: { display: "none" },
               tabIndex: -1
@@ -7951,7 +7968,7 @@ function _o({
         ]
       }
     ),
-    u.length > 0 && /* @__PURE__ */ e("div", { style: { display: "flex", flexDirection: "column", gap: "var(--lucent-space-2)" }, children: u.map((C) => /* @__PURE__ */ e(Fr, { item: C, onRemove: w }, C.id)) })
+    p.length > 0 && /* @__PURE__ */ e("div", { style: { display: "flex", flexDirection: "column", gap: "var(--lucent-space-2)" }, children: p.map((C) => /* @__PURE__ */ e(Fr, { item: C, onRemove: x }, C.id)) })
   ] });
 }
 const Yo = {
@@ -8078,7 +8095,7 @@ function Ko({ items: t, style: r }) {
         ...r
       },
       children: t.map((n, o) => {
-        const a = n.status ?? "default", i = Nr[a], l = o === t.length - 1;
+        const a = n.status ?? "default", i = Nr[a], s = o === t.length - 1;
         return /* @__PURE__ */ g(
           "li",
           {
@@ -8106,7 +8123,7 @@ function Ko({ items: t, style: r }) {
                   flexShrink: 0,
                   zIndex: 1
                 }, children: n.icon ?? /* @__PURE__ */ e($r, { status: a }) }),
-                !l && /* @__PURE__ */ e("div", { style: {
+                !s && /* @__PURE__ */ e("div", { style: {
                   flex: 1,
                   width: 1.5,
                   background: "var(--lucent-border-subtle)",
@@ -8115,7 +8132,7 @@ function Ko({ items: t, style: r }) {
               ] }),
               /* @__PURE__ */ g("div", { style: {
                 flex: 1,
-                paddingBottom: l ? 0 : "var(--lucent-space-5)",
+                paddingBottom: s ? 0 : "var(--lucent-space-5)",
                 paddingTop: 1,
                 minWidth: 0
               }, children: [
@@ -8240,7 +8257,7 @@ function yt(t) {
 }
 const Kr = 200, Xr = 8, Jr = 0.04, Zr = 0.2, Qr = 3, ea = 356;
 function st({ entry: t, onDismiss: r, hideContent: n, fixedHeight: o }) {
-  const { id: a, title: i, description: l, variant: s, action: c, icon: p } = t, f = jr[s], u = p ?? (s !== "default" ? Ur[s] : null), k = (c == null ? void 0 : c.style) ?? "button";
+  const { id: a, title: i, description: s, variant: l, action: c, icon: u } = t, f = jr[l], p = u ?? (l !== "default" ? Ur[l] : null), w = (c == null ? void 0 : c.style) ?? "button";
   return /* @__PURE__ */ e(
     "div",
     {
@@ -8272,15 +8289,15 @@ function st({ entry: t, onDismiss: r, hideContent: n, fixedHeight: o }) {
             transition: "opacity var(--lucent-duration-base) var(--lucent-easing-default)"
           },
           children: [
-            u && /* @__PURE__ */ e("span", { style: { flexShrink: 0, color: f.iconColor, display: "flex", alignItems: "center" }, children: u }),
+            p && /* @__PURE__ */ e("span", { style: { flexShrink: 0, color: f.iconColor, display: "flex", alignItems: "center" }, children: p }),
             /* @__PURE__ */ g("div", { style: { flex: 1, minWidth: 0, display: "flex", flexDirection: "column", gap: "var(--lucent-space-1)" }, children: [
               /* @__PURE__ */ e(V, { as: "span", size: "sm", weight: "semibold", color: "primary", lineHeight: "tight", children: i }),
-              l && /* @__PURE__ */ e(V, { as: "span", size: "sm", color: "secondary", lineHeight: "base", style: { whiteSpace: "pre-line" }, children: l })
+              s && /* @__PURE__ */ e(V, { as: "span", size: "sm", color: "secondary", lineHeight: "base", style: { whiteSpace: "pre-line" }, children: s })
             ] }),
-            c && k === "button" && /* @__PURE__ */ e(ta, { label: c.label, onClick: () => {
+            c && w === "button" && /* @__PURE__ */ e(ta, { label: c.label, onClick: () => {
               c.onClick(), r(a);
             } }),
-            c && k === "link" && /* @__PURE__ */ e(na, { label: c.label, iconColor: f.iconColor, onClick: () => {
+            c && w === "link" && /* @__PURE__ */ e(na, { label: c.label, iconColor: f.iconColor, onClick: () => {
               c.onClick(), r(a);
             } }),
             /* @__PURE__ */ e(
@@ -8301,11 +8318,11 @@ function st({ entry: t, onDismiss: r, hideContent: n, fixedHeight: o }) {
                   color: "var(--lucent-text-secondary)",
                   opacity: n ? 0 : 0.6
                 },
-                onMouseEnter: (x) => {
-                  n || (x.currentTarget.style.opacity = "1");
+                onMouseEnter: (y) => {
+                  n || (y.currentTarget.style.opacity = "1");
                 },
-                onMouseLeave: (x) => {
-                  n || (x.currentTarget.style.opacity = "0.6");
+                onMouseLeave: (y) => {
+                  n || (y.currentTarget.style.opacity = "0.6");
                 },
                 children: /* @__PURE__ */ e(Gr, {})
               }
@@ -8382,56 +8399,56 @@ function oa(t) {
   return yt(t) ? r.top = ra : r.top = `calc(100vh - ${aa}px)`, t.endsWith("left") ? r.left = lt : t.endsWith("right") ? r.right = lt : (r.left = "50%", r.transform = "translateX(-50%)"), r;
 }
 function ia({ toasts: t, position: r, onDismiss: n, portalContainer: o }) {
-  const [a, i] = z(!1), [l, s] = z(void 0), c = J((d) => {
-    d && s(d.offsetHeight);
-  }, []), p = yt(r), f = t.filter((d) => d.phase !== "exiting"), u = t.filter((d) => d.phase === "exiting");
+  const [a, i] = z(!1), [s, l] = z(void 0), c = J((d) => {
+    d && l(d.offsetHeight);
+  }, []), u = yt(r), f = t.filter((d) => d.phase !== "exiting"), p = t.filter((d) => d.phase === "exiting");
   H(() => {
     f.length <= 1 && i(!1);
   }, [f.length]);
-  const k = $(null), x = J(() => {
-    k.current && (clearTimeout(k.current), k.current = null), f.length > 1 && i(!0);
+  const w = $(null), y = J(() => {
+    w.current && (clearTimeout(w.current), w.current = null), f.length > 1 && i(!0);
   }, [f.length]), m = J(() => {
-    k.current = setTimeout(() => {
-      i(!1), k.current = null;
+    w.current = setTimeout(() => {
+      i(!1), w.current = null;
     }, 150);
   }, []), h = /* @__PURE__ */ e("div", { style: oa(r), children: /* @__PURE__ */ e(
     "div",
     {
-      onMouseEnter: x,
+      onMouseEnter: y,
       onMouseLeave: m,
       style: { margin: "calc(-1 * var(--lucent-space-2))", padding: "var(--lucent-space-2)" },
       children: /* @__PURE__ */ g("div", { style: {
         position: "relative",
         display: "flex",
-        flexDirection: p ? "column-reverse" : "column",
+        flexDirection: u ? "column-reverse" : "column",
         gap: a ? "var(--lucent-space-2)" : 0,
-        transform: a && !p ? "translateY(-100%)" : void 0,
-        marginTop: a && !p ? l ?? 0 : 0,
+        transform: a && !u ? "translateY(-100%)" : void 0,
+        marginTop: a && !u ? s ?? 0 : 0,
         transition: "transform var(--lucent-duration-base) var(--lucent-easing-emphasized), margin var(--lucent-duration-base) var(--lucent-easing-emphasized), gap var(--lucent-duration-base) var(--lucent-easing-emphasized)"
       }, children: [
         f.map((d, b) => {
-          const w = f.length - 1 - b, y = !a && w > Qr, S = w * Xr, C = p ? S : -S, v = a ? 1 : 1 - w * Jr, q = a ? 1 : Math.max(0, 1 - w * Zr), T = d.phase === "entering", E = w === 0, N = !a && !E;
+          const x = f.length - 1 - b, k = !a && x > Qr, S = x * Xr, C = u ? S : -S, v = a ? 1 : 1 - x * Jr, E = a ? 1 : Math.max(0, 1 - x * Zr), T = d.phase === "entering", A = x === 0, N = !a && !A;
           return /* @__PURE__ */ e(
             "div",
             {
-              ref: E ? c : void 0,
+              ref: A ? c : void 0,
               role: "status",
               "aria-live": "polite",
-              "aria-hidden": y,
+              "aria-hidden": k,
               style: {
                 // Front toast is relative (sets container height).
                 // Stacked toasts overlap via absolute + top: 0.
-                position: E || a ? "relative" : "absolute",
+                position: A || a ? "relative" : "absolute",
                 // Bottom positions: anchor at top:0 (peek above front toast)
                 // Top positions: anchor at bottom:0 (peek below front toast)
-                ...!a && !E && (p ? { bottom: 0 } : { top: 0 }),
-                zIndex: 100 - w,
-                transform: T ? `translateY(${p ? "-20px" : "20px"}) scale(0.96)` : a ? void 0 : `translateY(${C}px) scaleX(${v})`,
-                opacity: T || d.phase === "exiting" ? 0 : q,
-                transformOrigin: p ? "bottom center" : "top center",
+                ...!a && !A && (u ? { bottom: 0 } : { top: 0 }),
+                zIndex: 100 - x,
+                transform: T ? `translateY(${u ? "-20px" : "20px"}) scale(0.96)` : a ? void 0 : `translateY(${C}px) scaleX(${v})`,
+                opacity: T || d.phase === "exiting" ? 0 : E,
+                transformOrigin: u ? "bottom center" : "top center",
                 transition: T ? "none" : "transform var(--lucent-duration-base) var(--lucent-easing-emphasized), opacity var(--lucent-duration-base) var(--lucent-easing-default)",
-                pointerEvents: y ? "none" : "auto",
-                visibility: y ? "hidden" : "visible"
+                pointerEvents: k ? "none" : "auto",
+                visibility: k ? "hidden" : "visible"
               },
               children: /* @__PURE__ */ e(
                 st,
@@ -8439,25 +8456,25 @@ function ia({ toasts: t, position: r, onDismiss: n, portalContainer: o }) {
                   entry: d,
                   onDismiss: n,
                   hideContent: N,
-                  ...N && l !== void 0 && { fixedHeight: l }
+                  ...N && s !== void 0 && { fixedHeight: s }
                 }
               )
             },
             d.id
           );
         }),
-        u.map((d) => /* @__PURE__ */ e(
+        p.map((d) => /* @__PURE__ */ e(
           "div",
           {
             role: "status",
             "aria-live": "polite",
             style: {
               position: "absolute",
-              ...p ? { bottom: 0 } : { top: 0 },
+              ...u ? { bottom: 0 } : { top: 0 },
               zIndex: 200,
-              transform: `translateY(${p ? "20px" : "-20px"}) scale(0.96)`,
+              transform: `translateY(${u ? "20px" : "-20px"}) scale(0.96)`,
               opacity: 0,
-              transformOrigin: p ? "bottom center" : "top center",
+              transformOrigin: u ? "bottom center" : "top center",
               transition: "transform var(--lucent-duration-base) var(--lucent-easing-default), opacity var(--lucent-duration-base) var(--lucent-easing-default)",
               pointerEvents: "none"
             },
@@ -8477,16 +8494,16 @@ function Zo({
   max: o = 5,
   portalContainer: a
 }) {
-  const [i, l] = z([]), s = J((f) => {
-    l((u) => {
-      const k = u.find((x) => x.id === f);
-      return !k || k.phase === "exiting" ? u : u.map((x) => x.id === f ? { ...x, phase: "exiting" } : x);
+  const [i, s] = z([]), l = J((f) => {
+    s((p) => {
+      const w = p.find((y) => y.id === f);
+      return !w || w.phase === "exiting" ? p : p.map((y) => y.id === f ? { ...y, phase: "exiting" } : y);
     }), setTimeout(() => {
-      l((u) => u.filter((k) => k.id !== f));
+      s((p) => p.filter((w) => w.id !== f));
     }, Kr);
   }, []), c = J((f) => {
-    const u = Yr(), k = {
-      id: u,
+    const p = Yr(), w = {
+      id: p,
       title: f.title,
       variant: f.variant ?? "default",
       duration: f.duration ?? n,
@@ -8495,40 +8512,40 @@ function Zo({
       ...f.icon !== void 0 && { icon: f.icon },
       phase: "entering"
     };
-    return l((x) => {
-      const m = [...x, k], h = m.filter((d) => d.phase !== "exiting");
+    return s((y) => {
+      const m = [...y, w], h = m.filter((d) => d.phase !== "exiting");
       if (h.length > o) {
         const d = h.slice(0, h.length - o);
         for (const b of d)
-          setTimeout(() => s(b.id), 0);
+          setTimeout(() => l(b.id), 0);
       }
       return m;
     }), requestAnimationFrame(() => {
       requestAnimationFrame(() => {
-        l(
-          (x) => x.map((m) => m.id === u && m.phase === "entering" ? { ...m, phase: "visible" } : m)
+        s(
+          (y) => y.map((m) => m.id === p && m.phase === "entering" ? { ...m, phase: "visible" } : m)
         );
       });
-    }), u;
-  }, [n, o, s]);
+    }), p;
+  }, [n, o, l]);
   H(() => {
     const f = [];
-    for (const u of i)
-      if (u.phase === "visible" && u.duration !== 1 / 0) {
-        const k = setTimeout(() => s(u.id), u.duration);
-        f.push(k);
+    for (const p of i)
+      if (p.phase === "visible" && p.duration !== 1 / 0) {
+        const w = setTimeout(() => l(p.id), p.duration);
+        f.push(w);
       }
     return () => f.forEach(clearTimeout);
-  }, [i, s]);
-  const p = { toast: c, dismiss: s };
-  return /* @__PURE__ */ g(bt.Provider, { value: p, children: [
+  }, [i, l]);
+  const u = { toast: c, dismiss: l };
+  return /* @__PURE__ */ g(bt.Provider, { value: u, children: [
     t,
     i.length > 0 && /* @__PURE__ */ e(
       ia,
       {
         toasts: i,
         position: r,
-        onDismiss: s,
+        onDismiss: l,
         ...a !== void 0 && { portalContainer: a }
       }
     )
@@ -8793,24 +8810,24 @@ function Ie({
   size: o = "md",
   hasIcons: a = !1,
   style: i,
-  "aria-label": l = "Navigation"
+  "aria-label": s = "Navigation"
 }) {
-  const s = $(!1);
-  if (!s.current && typeof document < "u") {
+  const l = $(!1);
+  if (!l.current && typeof document < "u") {
     const h = document.createElement("style");
-    h.textContent = sa, document.head.appendChild(h), s.current = !0;
+    h.textContent = sa, document.head.appendChild(h), l.current = !0;
   }
-  const c = Ce[o], p = $(null), f = $(null), u = $(!1), k = $(0), x = J(() => {
-    const h = p.current, d = f.current;
+  const c = Ce[o], u = $(null), f = $(null), p = $(!1), w = $(0), y = J(() => {
+    const h = u.current, d = f.current;
     if (!h || !d) return;
-    const b = h.querySelector('[data-active="true"]'), w = h.querySelector('[data-active-parent="true"]');
-    let y = null, S = !1;
-    if (b && !b.closest('[aria-hidden="true"]') ? y = b : w && !w.closest('[aria-hidden="true"]') && (y = w, S = !0), !y) {
+    const b = h.querySelector('[data-active="true"]'), x = h.querySelector('[data-active-parent="true"]');
+    let k = null, S = !1;
+    if (b && !b.closest('[aria-hidden="true"]') ? k = b : x && !x.closest('[aria-hidden="true"]') && (k = x, S = !0), !k) {
       d.style.opacity = "0";
       return;
     }
-    const C = h.getBoundingClientRect(), v = y.getBoundingClientRect();
-    u.current ? d.style.transition = [
+    const C = h.getBoundingClientRect(), v = k.getBoundingClientRect();
+    p.current ? d.style.transition = [
       `top 150ms ${we}`,
       `left 150ms ${we}`,
       `width 150ms ${we}`,
@@ -8818,12 +8835,12 @@ function Ie({
       "opacity 100ms ease",
       "background 150ms ease",
       "box-shadow 150ms ease"
-    ].join(", ") : (d.style.transition = "none", u.current = !0), d.style.top = `${v.top - C.top}px`, d.style.left = `${v.left - C.left}px`, d.style.width = `${v.width}px`, d.style.height = `${v.height}px`, d.style.opacity = "1", S ? (d.style.background = n ? "var(--lucent-surface-secondary)" : "color-mix(in srgb, var(--lucent-accent-default) 12%, transparent)", d.style.boxShadow = "none") : (d.style.background = n ? "var(--lucent-surface)" : "var(--lucent-accent-default)", d.style.boxShadow = n ? "inset -3px 0 0 var(--lucent-accent-default), var(--lucent-shadow-sm)" : "none");
+    ].join(", ") : (d.style.transition = "none", p.current = !0), d.style.top = `${v.top - C.top}px`, d.style.left = `${v.left - C.left}px`, d.style.width = `${v.width}px`, d.style.height = `${v.height}px`, d.style.opacity = "1", S ? (d.style.background = n ? "var(--lucent-surface-secondary)" : "color-mix(in srgb, var(--lucent-accent-default) 12%, transparent)", d.style.boxShadow = "none") : (d.style.background = n ? "var(--lucent-surface)" : "var(--lucent-accent-default)", d.style.boxShadow = n ? "inset -3px 0 0 var(--lucent-accent-default), var(--lucent-shadow-sm)" : "none");
   }, [n]), m = J(() => {
-    cancelAnimationFrame(k.current), k.current = requestAnimationFrame(x);
-  }, [x]);
+    cancelAnimationFrame(w.current), w.current = requestAnimationFrame(y);
+  }, [y]);
   return H(() => {
-    const h = p.current;
+    const h = u.current;
     if (!h) return;
     const d = new MutationObserver(m);
     return d.observe(h, {
@@ -8832,7 +8849,7 @@ function Ie({
       subtree: !0
     }), () => d.disconnect();
   }, [m]), H(() => {
-    const h = p.current;
+    const h = u.current;
     if (!h) return;
     const d = new ResizeObserver(m);
     return d.observe(h), () => d.disconnect();
@@ -8843,8 +8860,8 @@ function Ie({
   }, [t, n, o, m]), /* @__PURE__ */ e(re.Provider, { value: { orientation: r, depth: 0, inverse: n, size: o, hasIcons: a, parentHasIcon: !1, requestMeasure: m }, children: /* @__PURE__ */ g(
     "nav",
     {
-      ref: p,
-      "aria-label": l,
+      ref: u,
+      "aria-label": s,
       style: {
         display: "flex",
         flexDirection: r === "vertical" ? "column" : "row",
@@ -8885,53 +8902,53 @@ function la({
   icon: o,
   badge: a,
   disabled: i = !1,
-  onClick: l,
-  as: s,
+  onClick: s,
+  as: l,
   style: c
 }) {
-  const { orientation: p, depth: f, inverse: u, size: k, parentHasIcon: x, requestMeasure: m } = ee(re), h = Ce[k];
+  const { orientation: u, depth: f, inverse: p, size: w, parentHasIcon: y, requestMeasure: m } = ee(re), h = Ce[w];
   H(() => {
     m();
   }, [n, m]);
   let d = null;
-  const b = [], w = Array.isArray(t) ? t : [t];
-  for (const S of w)
+  const b = [], x = Array.isArray(t) ? t : [t];
+  for (const S of x)
     S != null && typeof S == "object" && "type" in S && S.type === xt ? d = S : b.push(S);
   return d ? /* @__PURE__ */ e(
     ca,
     {
       subMenu: d,
-      orientation: p,
+      orientation: u,
       depth: f,
-      inverse: u,
-      size: k,
+      inverse: p,
+      size: w,
       isActive: n,
       disabled: i,
       ...o !== void 0 && { icon: o },
       ...a !== void 0 && { badge: a },
-      ...l !== void 0 && { onClick: l },
+      ...s !== void 0 && { onClick: s },
       ...c !== void 0 && { style: c },
       children: b
     }
   ) : /* @__PURE__ */ g(
-    s ?? "a",
+    l ?? "a",
     {
       "data-lucent-navitem": "",
       "data-active": n || void 0,
       href: i ? void 0 : r,
-      onClick: i ? void 0 : l,
+      onClick: i ? void 0 : s,
       "aria-current": n ? "page" : void 0,
       "aria-disabled": i || void 0,
       style: {
         display: "flex",
         alignItems: "center",
         gap: h.gap,
-        padding: p === "vertical" ? `${h.paddingY} ${h.paddingX} ${h.paddingY} ${o != null || x ? "var(--lucent-space-2)" : "var(--lucent-space-4)"}` : `${h.paddingY} ${h.paddingX}`,
+        padding: u === "vertical" ? `${h.paddingY} ${h.paddingX} ${h.paddingY} ${o != null || y ? "var(--lucent-space-2)" : "var(--lucent-space-4)"}` : `${h.paddingY} ${h.paddingX}`,
         borderRadius: "var(--lucent-radius-md)",
         background: "transparent",
-        color: i ? "var(--lucent-text-disabled)" : n ? u ? "var(--lucent-text-primary)" : "var(--lucent-accent-fg)" : "var(--lucent-text-secondary)",
+        color: i ? "var(--lucent-text-disabled)" : n ? p ? "var(--lucent-text-primary)" : "var(--lucent-accent-fg)" : "var(--lucent-text-secondary)",
         border: 0,
-        borderBottom: n && p === "horizontal" ? "2px solid var(--lucent-accent-default)" : p === "horizontal" ? "2px solid transparent" : 0,
+        borderBottom: n && u === "horizontal" ? "2px solid var(--lucent-accent-default)" : u === "horizontal" ? "2px solid transparent" : 0,
         boxShadow: "none",
         fontFamily: "var(--lucent-font-family-base)",
         fontSize: h.fontSize,
@@ -8943,8 +8960,8 @@ function la({
         boxSizing: "border-box",
         position: "relative",
         zIndex: 1,
-        whiteSpace: p === "horizontal" ? "nowrap" : void 0,
-        width: p === "vertical" ? "100%" : void 0,
+        whiteSpace: u === "horizontal" ? "nowrap" : void 0,
+        width: u === "vertical" ? "100%" : void 0,
         textAlign: "left",
         outline: "none",
         ...c
@@ -8964,29 +8981,29 @@ function ca({
   isActive: o = !1,
   disabled: a = !1,
   onClick: i,
-  style: l,
-  subMenu: s,
+  style: s,
+  subMenu: l,
   orientation: c,
-  depth: p,
+  depth: u,
   inverse: f,
-  size: u
+  size: p
 }) {
-  const { hasIcons: k, requestMeasure: x } = ee(re), m = Ce[u], [h, d] = z(!1), b = $(null), [w, y] = z(0), S = $(null), C = $(null), v = $(), q = da(s), T = o && !q, E = !T && !h && q, N = o || q;
+  const { hasIcons: w, requestMeasure: y } = ee(re), m = Ce[p], [h, d] = z(!1), b = $(null), [x, k] = z(0), S = $(null), C = $(null), v = $(), E = da(l), T = o && !E, A = !T && !h && E, N = o || E;
   H(() => {
-    x();
-  }, [h, o, q, x]), H(() => {
+    y();
+  }, [h, o, E, y]), H(() => {
     if (c !== "vertical") return;
     const M = b.current;
     if (M)
       if (h) {
         const O = M.scrollHeight;
-        y(O);
+        k(O);
         const j = setTimeout(() => {
-          y(void 0);
+          k(void 0);
         }, 130);
         return () => clearTimeout(j);
       } else
-        y(M.scrollHeight), M.getBoundingClientRect(), y(0);
+        k(M.scrollHeight), M.getBoundingClientRect(), k(0);
   }, [h, c]), H(() => {
     if (c !== "horizontal" || !h) return;
     const M = (O) => {
@@ -9010,7 +9027,7 @@ function ca({
     a || (c === "horizontal" ? h ? D() : G() : d(!h));
   }, _ = (M) => {
     a || (c === "vertical" ? (M.key === "ArrowRight" && !h && (M.preventDefault(), d(!0)), M.key === "ArrowLeft" && h && (M.preventDefault(), d(!1))) : (M.key === "ArrowDown" && !h && (M.preventDefault(), G()), M.key === "ArrowUp" && h && (M.preventDefault(), D())), (M.key === "Enter" || M.key === " ") && (M.preventDefault(), W()), M.key === "Escape" && h && (M.preventDefault(), c === "horizontal" ? D() : d(!1)));
-  }, A = () => {
+  }, q = () => {
     c === "horizontal" && !a && (clearTimeout(v.current), G());
   }, L = () => {
     c === "horizontal" && (v.current = setTimeout(() => D(), 150));
@@ -9020,7 +9037,7 @@ function ca({
     {
       ref: S,
       style: { position: "relative" },
-      onMouseEnter: A,
+      onMouseEnter: q,
       onMouseLeave: L,
       children: [
         /* @__PURE__ */ g(
@@ -9053,7 +9070,7 @@ function ca({
               whiteSpace: "nowrap",
               outline: "none",
               boxSizing: "border-box",
-              ...l
+              ...s
             },
             children: [
               r != null && /* @__PURE__ */ e("span", { style: { display: "flex", flexShrink: 0, width: m.iconWidth, minWidth: 14, minHeight: 14, alignItems: "center", justifyContent: "center", color: "inherit" }, children: r }),
@@ -9062,7 +9079,7 @@ function ca({
             ]
           }
         ),
-        P && /* @__PURE__ */ e(re.Provider, { value: { orientation: "vertical", depth: 0, inverse: f, size: u, hasIcons: k, parentHasIcon: !1, requestMeasure: x }, children: /* @__PURE__ */ e(
+        P && /* @__PURE__ */ e(re.Provider, { value: { orientation: "vertical", depth: 0, inverse: f, size: p, hasIcons: w, parentHasIcon: !1, requestMeasure: y }, children: /* @__PURE__ */ e(
           "div",
           {
             ref: C,
@@ -9080,7 +9097,7 @@ function ca({
               zIndex: 100,
               animation: R === "exiting" ? `lucent-navmenu-dropdown-out ${Be}ms var(--lucent-easing-default) forwards` : `lucent-navmenu-dropdown-in ${Be}ms var(--lucent-easing-default) forwards`
             },
-            children: s
+            children: l
           }
         ) })
       ]
@@ -9091,8 +9108,8 @@ function ca({
       {
         "data-lucent-navitem": "",
         "data-active": T || void 0,
-        "data-active-parent": E || void 0,
-        "data-hint": !T && !E && N || void 0,
+        "data-active-parent": A || void 0,
+        "data-hint": !T && !A && N || void 0,
         onClick: (M) => {
           W(), i == null || i(M);
         },
@@ -9107,7 +9124,7 @@ function ca({
           padding: `${m.paddingY} ${m.paddingX} ${m.paddingY} ${r != null ? "var(--lucent-space-2)" : "var(--lucent-space-4)"}`,
           borderRadius: "var(--lucent-radius-md)",
           background: "transparent",
-          color: a ? "var(--lucent-text-disabled)" : T ? f ? "var(--lucent-text-primary)" : "var(--lucent-accent-fg)" : E || N ? "var(--lucent-text-primary)" : "var(--lucent-text-secondary)",
+          color: a ? "var(--lucent-text-disabled)" : T ? f ? "var(--lucent-text-primary)" : "var(--lucent-accent-fg)" : A || N ? "var(--lucent-text-primary)" : "var(--lucent-text-secondary)",
           border: 0,
           boxShadow: "none",
           fontFamily: "var(--lucent-font-family-base)",
@@ -9120,7 +9137,7 @@ function ca({
           userSelect: "none",
           boxSizing: "border-box",
           outline: "none",
-          ...l
+          ...s
         },
         children: [
           r != null && /* @__PURE__ */ e("span", { style: { display: "flex", flexShrink: 0, width: m.iconWidth, minWidth: 14, minHeight: 14, alignItems: "center", justifyContent: "center", color: "inherit" }, children: r }),
@@ -9136,10 +9153,10 @@ function ca({
         "aria-hidden": !h,
         style: {
           overflow: "hidden",
-          height: w !== void 0 ? w : "auto",
+          height: x !== void 0 ? x : "auto",
           transition: "height 120ms var(--lucent-easing-default)"
         },
-        children: /* @__PURE__ */ e(re.Provider, { value: { orientation: c, depth: p + 1, inverse: f, size: u, hasIcons: k, parentHasIcon: r != null, requestMeasure: x }, children: /* @__PURE__ */ e(
+        children: /* @__PURE__ */ e(re.Provider, { value: { orientation: c, depth: u + 1, inverse: f, size: p, hasIcons: w, parentHasIcon: r != null, requestMeasure: y }, children: /* @__PURE__ */ e(
           "div",
           {
             style: {
@@ -9150,7 +9167,7 @@ function ca({
               marginLeft: r != null ? `calc(${m.iconWidth} + ${m.gap})` : "var(--lucent-space-3)",
               animation: h ? "lucent-navmenu-open 200ms var(--lucent-easing-default) forwards" : void 0
             },
-            children: s
+            children: l
           }
         ) })
       }
@@ -9180,32 +9197,32 @@ function ua({
   open: o,
   onOpenChange: a,
   collapsible: i,
-  style: l
+  style: s
 }) {
-  const { orientation: s, inverse: c, size: p, hasIcons: f } = ee(re), u = Ce[p], k = i ?? r != null, x = f ? "var(--lucent-space-2)" : "var(--lucent-space-4)";
-  if (s === "horizontal")
+  const { orientation: l, inverse: c, size: u, hasIcons: f } = ee(re), p = Ce[u], w = i ?? r != null, y = f ? "var(--lucent-space-2)" : "var(--lucent-space-4)";
+  if (l === "horizontal")
     return /* @__PURE__ */ e(Q, { children: t });
-  const m = o !== void 0, [h, d] = z(n), b = m ? o : h, w = $(null), [y, S] = z(b ? void 0 : 0);
+  const m = o !== void 0, [h, d] = z(n), b = m ? o : h, x = $(null), [k, S] = z(b ? void 0 : 0);
   H(() => {
-    if (!k) return;
-    const v = w.current;
+    if (!w) return;
+    const v = x.current;
     if (v)
       if (b) {
-        const q = v.scrollHeight;
-        S(q);
+        const E = v.scrollHeight;
+        S(E);
         const T = setTimeout(() => {
           S(void 0);
         }, 130);
         return () => clearTimeout(T);
       } else
         S(v.scrollHeight), v.getBoundingClientRect(), S(0);
-  }, [b, k]);
+  }, [b, w]);
   const C = J(() => {
     const v = !b;
     m || d(v), a == null || a(v);
   }, [b, m, a]);
-  return r ? /* @__PURE__ */ g("div", { style: { display: "flex", flexDirection: "column", marginTop: "var(--lucent-space-3)", ...l }, children: [
-    k ? /* @__PURE__ */ g(
+  return r ? /* @__PURE__ */ g("div", { style: { display: "flex", flexDirection: "column", marginTop: "var(--lucent-space-3)", ...s }, children: [
+    w ? /* @__PURE__ */ g(
       "button",
       {
         onClick: C,
@@ -9215,7 +9232,7 @@ function ua({
           alignItems: "center",
           justifyContent: "space-between",
           width: "100%",
-          padding: `var(--lucent-space-1) var(--lucent-space-3) var(--lucent-space-1) ${x}`,
+          padding: `var(--lucent-space-1) var(--lucent-space-3) var(--lucent-space-1) ${y}`,
           background: "none",
           border: 0,
           cursor: "pointer",
@@ -9240,7 +9257,7 @@ function ua({
       "div",
       {
         style: {
-          padding: `var(--lucent-space-1) var(--lucent-space-3) var(--lucent-space-1) ${x}`,
+          padding: `var(--lucent-space-1) var(--lucent-space-3) var(--lucent-space-1) ${y}`,
           fontFamily: "var(--lucent-font-family-base)",
           fontSize: "var(--lucent-font-size-xs)",
           fontWeight: "var(--lucent-font-weight-semibold)",
@@ -9253,14 +9270,14 @@ function ua({
         children: r
       }
     ),
-    k ? /* @__PURE__ */ e(
+    w ? /* @__PURE__ */ e(
       "div",
       {
-        ref: w,
+        ref: x,
         "aria-hidden": !b,
         style: {
           overflow: "hidden",
-          height: y !== void 0 ? y : "auto",
+          height: k !== void 0 ? k : "auto",
           transition: "height 120ms var(--lucent-easing-default)"
         },
         children: /* @__PURE__ */ e(
@@ -9269,14 +9286,14 @@ function ua({
             style: {
               display: "flex",
               flexDirection: "column",
-              gap: u.itemGap
+              gap: p.itemGap
             },
             children: t
           }
         )
       }
-    ) : /* @__PURE__ */ e("div", { style: { display: "flex", flexDirection: "column", gap: u.itemGap }, children: t })
-  ] }) : /* @__PURE__ */ e("div", { style: { display: "flex", flexDirection: "column", gap: u.itemGap, ...l }, children: t });
+    ) : /* @__PURE__ */ e("div", { style: { display: "flex", flexDirection: "column", gap: p.itemGap }, children: t })
+  ] }) : /* @__PURE__ */ e("div", { style: { display: "flex", flexDirection: "column", gap: p.itemGap, ...s }, children: t });
 }
 function pa({ style: t }) {
   const { orientation: r } = ee(re);
@@ -9351,8 +9368,8 @@ const ma = {
 }, Le = 4;
 function va(t, r) {
   const n = r.offsetHeight, o = r.offsetWidth, a = window.innerWidth, i = window.innerHeight;
-  let l = t.bottom + Le, s = t.left, c = "top left";
-  return l + n > i && t.top - n - Le >= 0 && (l = t.top - n - Le, c = "bottom left"), s + o > a && (s = a - o - 8), s < 0 && (s = 8), { top: l, left: s, transformOrigin: c };
+  let s = t.bottom + Le, l = t.left, c = "top left";
+  return s + n > i && t.top - n - Le >= 0 && (s = t.top - n - Le, c = "bottom left"), l + o > a && (l = a - o - 8), l < 0 && (l = 8), { top: s, left: l, transformOrigin: c };
 }
 function ei({
   label: t,
@@ -9361,41 +9378,41 @@ function ei({
   defaultValue: o = [],
   onChange: a,
   variant: i = "secondary",
-  size: l = "sm",
-  disabled: s = !1,
+  size: s = "sm",
+  disabled: l = !1,
   icon: c,
-  style: p
+  style: u
 }) {
-  const f = n !== void 0, [u, k] = z(o), x = f ? n : u, [m, h] = z(!1), [d, b] = z(!1), [w, y] = z("idle"), [S, C] = z(null), [v, q] = z(-1), T = $(null), E = $(null);
+  const f = n !== void 0, [p, w] = z(o), y = f ? n : p, [m, h] = z(!1), [d, b] = z(!1), [x, k] = z("idle"), [S, C] = z(null), [v, E] = z(-1), T = $(null), A = $(null);
   if (!ct && typeof document < "u") {
     const D = document.createElement("style");
     D.textContent = fa, document.head.appendChild(D), ct = !0;
   }
   H(() => {
     if (m)
-      b(!0), y("entering"), q(-1);
+      b(!0), k("entering"), E(-1);
     else if (d) {
-      y("exiting");
+      k("exiting");
       const D = setTimeout(() => {
-        b(!1), y("idle");
+        b(!1), k("idle");
       }, Re);
       return () => clearTimeout(D);
     }
   }, [m]), te(() => {
-    if (!d || w !== "entering" || !T.current) return;
+    if (!d || x !== "entering" || !T.current) return;
     const D = requestAnimationFrame(() => {
-      const W = E.current, _ = T.current;
+      const W = A.current, _ = T.current;
       !W || !_ || C(va(_.getBoundingClientRect(), W));
     });
     return () => cancelAnimationFrame(D);
-  }, [d, w]);
+  }, [d, x]);
   const N = J(() => h(!1), []);
   H(() => {
     if (!m) return;
     const D = (_) => {
       var L, M;
-      const A = _.target;
-      (L = T.current) != null && L.contains(A) || (M = E.current) != null && M.contains(A) || N();
+      const q = _.target;
+      (L = T.current) != null && L.contains(q) || (M = A.current) != null && M.contains(q) || N();
     }, W = requestAnimationFrame(() => {
       document.addEventListener("mousedown", D);
     });
@@ -9410,34 +9427,34 @@ function ei({
     return document.addEventListener("keydown", D), () => document.removeEventListener("keydown", D);
   }, [m, N]);
   const R = (D) => {
-    const W = x.includes(D) ? x.filter((_) => _ !== D) : [...x, D];
-    f || k(W), a == null || a(W);
+    const W = y.includes(D) ? y.filter((_) => _ !== D) : [...y, D];
+    f || w(W), a == null || a(W);
   }, I = () => {
-    f || k([]), a == null || a([]), N();
+    f || w([]), a == null || a([]), N();
   }, P = (D) => {
     if (D.key === "ArrowDown")
-      D.preventDefault(), q((W) => (W + 1) % r.length);
+      D.preventDefault(), E((W) => (W + 1) % r.length);
     else if (D.key === "ArrowUp")
-      D.preventDefault(), q((W) => (W - 1 + r.length) % r.length);
+      D.preventDefault(), E((W) => (W - 1 + r.length) % r.length);
     else if ((D.key === "Enter" || D.key === " ") && v >= 0) {
       D.preventDefault();
       const W = r[v];
       W && !W.disabled && R(W.value);
     }
-  }, B = ma[l], G = ga[l];
-  return /* @__PURE__ */ g("span", { ref: T, style: { display: "inline-flex", ...p }, children: [
+  }, B = ma[s], G = ga[s];
+  return /* @__PURE__ */ g("span", { ref: T, style: { display: "inline-flex", ...u }, children: [
     /* @__PURE__ */ g(
       ce,
       {
-        variant: i === "outline" && x.length > 0 ? "secondary" : i === "ghost" ? "ghost" : i,
-        size: l,
+        variant: i === "outline" && y.length > 0 ? "secondary" : i === "ghost" ? "ghost" : i,
+        size: s,
         ...t ? { chevron: !0 } : {},
-        disabled: s,
-        onClick: () => !s && h((D) => !D),
+        disabled: l,
+        onClick: () => !l && h((D) => !D),
         ...c !== void 0 && { leftIcon: c },
         children: [
           t || void 0,
-          x.length > 0 && /* @__PURE__ */ e(ke, { variant: "accent", size: l === "xs" ? "sm" : l, children: x.length })
+          y.length > 0 && /* @__PURE__ */ e(ke, { variant: "accent", size: s === "xs" ? "sm" : s, children: y.length })
         ]
       }
     ),
@@ -9445,7 +9462,7 @@ function ei({
       /* @__PURE__ */ g(
         "div",
         {
-          ref: E,
+          ref: A,
           role: "listbox",
           "aria-multiselectable": !0,
           "aria-label": t,
@@ -9466,15 +9483,15 @@ function ei({
             padding: B,
             maxHeight: "min(320px, calc(100vh - 32px))",
             overflowY: "auto",
-            animation: w === "exiting" ? `lucent-filter-ms-out ${Re}ms var(--lucent-easing-default) forwards` : `lucent-filter-ms-in ${Re}ms var(--lucent-easing-decelerate)`,
+            animation: x === "exiting" ? `lucent-filter-ms-out ${Re}ms var(--lucent-easing-default) forwards` : `lucent-filter-ms-in ${Re}ms var(--lucent-easing-decelerate)`,
             transformOrigin: (S == null ? void 0 : S.transformOrigin) ?? "top left",
             outline: "none",
-            pointerEvents: w === "exiting" ? "none" : "auto",
+            pointerEvents: x === "exiting" ? "none" : "auto",
             fontFamily: "var(--lucent-font-family-base)"
           },
           children: [
             r.map((D, W) => {
-              const _ = x.includes(D.value), A = v === W;
+              const _ = y.includes(D.value), q = v === W;
               return /* @__PURE__ */ g(
                 "div",
                 {
@@ -9482,7 +9499,7 @@ function ei({
                   "aria-selected": _,
                   "aria-disabled": D.disabled,
                   onClick: () => !D.disabled && R(D.value),
-                  onMouseEnter: () => q(W),
+                  onMouseEnter: () => E(W),
                   style: {
                     display: "flex",
                     alignItems: "center",
@@ -9490,7 +9507,7 @@ function ei({
                     padding: `var(--lucent-space-2) ${B}`,
                     borderRadius: "var(--lucent-radius-md)",
                     cursor: D.disabled ? "not-allowed" : "pointer",
-                    background: A ? "var(--lucent-surface-secondary)" : "transparent",
+                    background: q ? "var(--lucent-surface-secondary)" : "transparent",
                     opacity: D.disabled ? 0.5 : 1,
                     transition: "background var(--lucent-duration-fast) var(--lucent-easing-default)"
                   },
@@ -9505,7 +9522,7 @@ function ei({
                         style: { pointerEvents: "none" }
                       }
                     ),
-                    D.swatch ? /* @__PURE__ */ e(ke, { size: l === "xs" ? "sm" : l, swatch: D.swatch, children: D.label }) : /* @__PURE__ */ e(V, { size: G, children: D.label })
+                    D.swatch ? /* @__PURE__ */ e(ke, { size: s === "xs" ? "sm" : s, swatch: D.swatch, children: D.label }) : /* @__PURE__ */ e(V, { size: G, children: D.label })
                   ]
                 },
                 D.value
@@ -9525,16 +9542,16 @@ function ei({
             /* @__PURE__ */ e(
               "div",
               {
-                onClick: x.length > 0 ? I : void 0,
+                onClick: y.length > 0 ? I : void 0,
                 style: {
                   display: "flex",
                   alignItems: "center",
                   padding: `var(--lucent-space-2) ${B}`,
                   borderRadius: "var(--lucent-radius-md)",
-                  cursor: x.length > 0 ? "pointer" : "default",
-                  opacity: x.length > 0 ? 1 : 0.5
+                  cursor: y.length > 0 ? "pointer" : "default",
+                  opacity: y.length > 0 ? 1 : 0.5
                 },
-                children: /* @__PURE__ */ e(V, { size: G, color: x.length > 0 ? "secondary" : "disabled", children: "Clear all" })
+                children: /* @__PURE__ */ e(V, { size: G, color: y.length > 0 ? "secondary" : "disabled", children: "Clear all" })
               }
             )
           ]
@@ -9551,16 +9568,16 @@ function ti({
   defaultValue: o,
   onChange: a,
   variant: i = "secondary",
-  size: l = "sm",
-  disabled: s = !1,
+  size: s = "sm",
+  disabled: l = !1,
   icon: c,
-  style: p
+  style: u
 }) {
-  var w;
-  const f = n !== void 0, [u, k] = z(o), x = f ? n : u, m = (w = r.find((y) => y.value === x)) == null ? void 0 : w.label, h = x !== void 0, d = (y) => {
-    f || k(y), a == null || a(y);
+  var x;
+  const f = n !== void 0, [p, w] = z(o), y = f ? n : p, m = (x = r.find((k) => k.value === y)) == null ? void 0 : x.label, h = y !== void 0, d = (k) => {
+    f || w(k), a == null || a(k);
   }, b = () => {
-    f || k(void 0), a == null || a(void 0);
+    f || w(void 0), a == null || a(void 0);
   };
   return /* @__PURE__ */ g(
     ft,
@@ -9569,29 +9586,29 @@ function ti({
         ce,
         {
           variant: i === "outline" && h ? "secondary" : i,
-          size: l,
+          size: s,
           chevron: !0,
-          disabled: s,
+          disabled: l,
           ...c !== void 0 && { leftIcon: c },
           children: m ?? t
         }
       ),
-      size: l,
-      ...p !== void 0 && { style: p },
+      size: s,
+      ...u !== void 0 && { style: u },
       children: [
-        r.map((y) => /* @__PURE__ */ e(
+        r.map((k) => /* @__PURE__ */ e(
           Fe,
           {
-            selected: x === y.value,
-            ...y.disabled !== void 0 && { disabled: y.disabled },
-            onSelect: () => d(y.value),
-            children: y.label
+            selected: y === k.value,
+            ...k.disabled !== void 0 && { disabled: k.disabled },
+            onSelect: () => d(k.value),
+            children: k.label
           },
-          y.value
+          k.value
         )),
         h && /* @__PURE__ */ g(Q, { children: [
           /* @__PURE__ */ e(wn, {}),
-          /* @__PURE__ */ e(Fe, { onSelect: b, children: /* @__PURE__ */ e(V, { size: l === "lg" ? "md" : "sm", color: "secondary", children: "Clear" }) })
+          /* @__PURE__ */ e(Fe, { onSelect: b, children: /* @__PURE__ */ e(V, { size: s === "lg" ? "md" : "sm", color: "secondary", children: "Clear" }) })
         ] })
       ]
     }
@@ -9608,44 +9625,44 @@ function ni({
   placeholder: o = "Search…",
   variant: a = "secondary",
   size: i = "sm",
-  width: l = 260,
-  disabled: s = !1,
+  width: s = 260,
+  disabled: l = !1,
   style: c
 }) {
-  const p = t !== void 0, [f, u] = z(r), k = p ? t : f, [x, m] = z(!!k), h = $(null);
+  const u = t !== void 0, [f, p] = z(r), w = u ? t : f, [y, m] = z(!!w), h = $(null);
   H(() => {
-    x && requestAnimationFrame(() => {
-      var y;
-      return (y = h.current) == null ? void 0 : y.focus();
+    y && requestAnimationFrame(() => {
+      var k;
+      return (k = h.current) == null ? void 0 : k.focus();
     });
-  }, [x]);
-  const d = (y) => {
-    const S = y.target.value;
-    p || u(S), n == null || n(S);
+  }, [y]);
+  const d = (k) => {
+    const S = k.target.value;
+    u || p(S), n == null || n(S);
   }, b = () => {
-    k || m(!1);
-  }, w = () => {
-    s || m(!0);
+    w || m(!1);
+  }, x = () => {
+    l || m(!0);
   };
-  return x ? /* @__PURE__ */ e(
+  return y ? /* @__PURE__ */ e(
     ut,
     {
       ref: h,
       placeholder: o,
       size: i,
-      value: k,
+      value: w,
       onChange: d,
       onBlur: b,
-      disabled: s,
-      style: { width: l, ...c }
+      disabled: l,
+      style: { width: s, ...c }
     }
   ) : /* @__PURE__ */ e(
     ce,
     {
       variant: a,
       size: i,
-      disabled: s,
-      onClick: w,
+      disabled: l,
+      onClick: x,
       "aria-label": "Search",
       leftIcon: /* @__PURE__ */ e(ba, {}),
       style: c
@@ -9664,10 +9681,10 @@ function ri({
   onChange: o,
   variant: a = "secondary",
   size: i = "sm",
-  min: l,
-  max: s,
+  min: s,
+  max: l,
   disabled: c = !1,
-  style: p
+  style: u
 }) {
   return /* @__PURE__ */ e(
     Lr,
@@ -9676,8 +9693,8 @@ function ri({
       ...r !== void 0 && { value: r },
       ...n !== void 0 && { defaultValue: n },
       ...o !== void 0 && { onChange: o },
-      ...l !== void 0 && { min: l },
-      ...s !== void 0 && { max: s },
+      ...s !== void 0 && { min: s },
+      ...l !== void 0 && { max: l },
       disabled: c,
       trigger: /* @__PURE__ */ e(
         ce,
@@ -9689,7 +9706,7 @@ function ri({
           children: ya(r, t)
         }
       ),
-      ...p !== void 0 && { style: p }
+      ...u !== void 0 && { style: u }
     }
   );
 }
@@ -9796,30 +9813,30 @@ function Ma({ steps: t, current: r, cfg: n, numbered: o, showStatus: a }) {
         width: t.length > 1 ? `${r / (t.length - 1) * 100}%` : "0%",
         transition: "width 300ms var(--lucent-easing-default)"
       } }) }),
-      t.map((i, l) => /* @__PURE__ */ e("div", { style: {
+      t.map((i, s) => /* @__PURE__ */ e("div", { style: {
         flex: 1,
         display: "flex",
-        justifyContent: l === 0 ? "flex-start" : l === t.length - 1 ? "flex-end" : "center",
+        justifyContent: s === 0 ? "flex-start" : s === t.length - 1 ? "flex-end" : "center",
         position: "relative",
         zIndex: 1
-      }, children: /* @__PURE__ */ e(wt, { index: l, state: He(l, r), step: i, cfg: n }) }, i.label))
+      }, children: /* @__PURE__ */ e(wt, { index: s, state: He(s, r), step: i, cfg: n }) }, i.label))
     ] }),
-    /* @__PURE__ */ e("div", { style: { display: "flex" }, children: t.map((i, l) => {
-      const s = He(l, r), c = l === t.length - 1;
+    /* @__PURE__ */ e("div", { style: { display: "flex" }, children: t.map((i, s) => {
+      const l = He(s, r), c = s === t.length - 1;
       return /* @__PURE__ */ e("div", { style: {
         flex: 1,
         display: "flex",
         flexDirection: "column",
-        alignItems: l === 0 ? "flex-start" : c ? "flex-end" : "center",
+        alignItems: s === 0 ? "flex-start" : c ? "flex-end" : "center",
         gap: "2px",
-        textAlign: l === 0 ? "left" : c ? "right" : "center"
-      }, children: /* @__PURE__ */ e(Ia, { step: i, state: s, index: l, cfg: n, numbered: o, showStatus: a }) }, i.label);
+        textAlign: s === 0 ? "left" : c ? "right" : "center"
+      }, children: /* @__PURE__ */ e(Ia, { step: i, state: l, index: s, cfg: n, numbered: o, showStatus: a }) }, i.label);
     }) })
   ] });
 }
 function za({ steps: t, current: r, cfg: n, numbered: o, showStatus: a }) {
-  return /* @__PURE__ */ e("div", { style: { display: "flex", flexDirection: "column" }, children: t.map((i, l) => {
-    const s = He(l, r), c = l === t.length - 1;
+  return /* @__PURE__ */ e("div", { style: { display: "flex", flexDirection: "column" }, children: t.map((i, s) => {
+    const l = He(s, r), c = s === t.length - 1;
     return /* @__PURE__ */ g("div", { style: { display: "flex", gap: n.gap }, children: [
       /* @__PURE__ */ g("div", { style: {
         display: "flex",
@@ -9827,13 +9844,13 @@ function za({ steps: t, current: r, cfg: n, numbered: o, showStatus: a }) {
         alignItems: "center",
         flexShrink: 0
       }, children: [
-        /* @__PURE__ */ e(wt, { index: l, state: s, step: i, cfg: n }),
+        /* @__PURE__ */ e(wt, { index: s, state: l, step: i, cfg: n }),
         !c && /* @__PURE__ */ e("div", { style: {
           width: n.connector,
           flex: 1,
           minHeight: 24,
           borderRadius: n.connector / 2,
-          background: l < r ? "var(--lucent-accent-default)" : "var(--lucent-border-default)",
+          background: s < r ? "var(--lucent-accent-default)" : "var(--lucent-border-default)",
           transition: "background var(--lucent-duration-base) var(--lucent-easing-default)",
           margin: "4px 0"
         } })
@@ -9855,13 +9872,13 @@ function za({ steps: t, current: r, cfg: n, numbered: o, showStatus: a }) {
           letterSpacing: "var(--lucent-letter-spacing-wide)"
         }, children: [
           "Step ",
-          l + 1
+          s + 1
         ] }),
         /* @__PURE__ */ e("span", { style: {
           fontSize: n.labelSize,
           fontFamily: "var(--lucent-font-family-base)",
-          fontWeight: s === "current" ? "var(--lucent-font-weight-semibold)" : "var(--lucent-font-weight-regular)",
-          color: s !== "pending" ? "var(--lucent-text-primary)" : "var(--lucent-text-secondary)",
+          fontWeight: l === "current" ? "var(--lucent-font-weight-semibold)" : "var(--lucent-font-weight-regular)",
+          color: l !== "pending" ? "var(--lucent-text-primary)" : "var(--lucent-text-secondary)",
           transition: "color var(--lucent-duration-base) var(--lucent-easing-default)"
         }, children: i.label }),
         i.description && /* @__PURE__ */ e("span", { style: {
@@ -9869,7 +9886,7 @@ function za({ steps: t, current: r, cfg: n, numbered: o, showStatus: a }) {
           fontFamily: "var(--lucent-font-family-base)",
           color: "var(--lucent-text-secondary)"
         }, children: i.description }),
-        a && /* @__PURE__ */ e(kt, { state: s })
+        a && /* @__PURE__ */ e(kt, { state: l })
       ] })
     ] }, i.label);
   }) });
@@ -9881,10 +9898,10 @@ function ai({
   orientation: o = "horizontal",
   numbered: a = !1,
   showStatus: i = !1,
-  style: l
+  style: s
 }) {
   H(Ca, []);
-  const s = xa[n], c = t.map(wa), p = o === "vertical" ? za : Ma;
+  const l = xa[n], c = t.map(wa), u = o === "vertical" ? za : Ma;
   return /* @__PURE__ */ e(
     "div",
     {
@@ -9892,9 +9909,9 @@ function ai({
       "aria-label": "Progress steps",
       style: {
         fontFamily: "var(--lucent-font-family-base)",
-        ...l
+        ...s
       },
-      children: /* @__PURE__ */ e(p, { steps: c, current: r, cfg: s, numbered: a, showStatus: i })
+      children: /* @__PURE__ */ e(u, { steps: c, current: r, cfg: l, numbered: a, showStatus: i })
     }
   );
 }
@@ -9998,15 +10015,21 @@ const oi = {
     notes: 'Root element has role="group" with aria-label="Progress steps". The current step circle receives aria-current="step" so screen readers can identify which step is active. Step labels are visible text, not aria-only. The checkmark animation uses prefers-reduced-motion: the spring scale is purely decorative and does not affect content comprehension.'
   }
 }, ii = {
+  navigation: {
+    description: "Chrome/shell background for sidebars, headers, footers, and navigation rails. The outermost structural layer of the UI. Independent of bgBase — set it explicitly when the chrome needs a different tint than the content area.",
+    lightGuidance: "A very faint cool or warm tint that distinguishes the chrome from the content area. Default #f4f6f8. Typically L 0.95–0.98.",
+    darkGuidance: "The darkest layer — near-black with a subtle cool or warm tint. Typically L 0.06–0.09 (e.g. #0f0f11, #111318).",
+    derives: []
+  },
   bgBase: {
-    description: "Main page/canvas background. The lowest elevation layer — everything sits on top of this. When bgBase is customized, `surface` and `surfaceTint` are auto-derived so the entire card elevation hierarchy (ghost → outline → filled → elevated → combo) adapts automatically.",
-    lightGuidance: "Near-white. Typically #ffffff or a very faint tint (L > 0.96).",
-    darkGuidance: "Near-black with a subtle cool or warm tint. Typically L 0.07–0.10 (e.g. #0f0f11, #111318).",
+    description: "Main content area background. The canvas on which surface elements (cards, tables, panels) sit. Slightly distinct from `navigation` to create a visual content/chrome boundary. When bgBase is customized, `surface` and `surfaceTint` are auto-derived so the entire card elevation hierarchy adapts automatically.",
+    lightGuidance: "White or near-white. Default #ffffff. The content canvas that surface elements (cards) sit on.",
+    darkGuidance: "Slightly lighter than navigation. Typically L 0.08–0.11 (e.g. #14161c, #15171e).",
     derives: ["bgSubtle", "surfaceTint", "surface", "surfaceSecondary", "surfaceRaised", "surfaceOverlay"]
   },
   surface: {
     description: "Component surface color for elevated cards, input backgrounds, table rows, list items. Optional — when omitted, auto-derived from bgBase (pushed 85% toward white in light mode, +0.04 lightness in dark mode, with 30% saturation retention). Only set explicitly when you need a surface color that doesn't match the bgBase hue.",
-    lightGuidance: "Very slightly off-white — just enough to read as distinct from bgBase. Typically L 0.96–0.98 (e.g. #f9fafb, #f8f8f8).",
+    lightGuidance: "White or near-white. Default #ffffff. Cards and panels sit on this surface above the content area background.",
     darkGuidance: "Slightly lighter than bgBase. Typically L 0.11–0.15 (e.g. #1a1a1e, #18181b).",
     derives: ["surfaceSecondary", "surfaceRaised", "surfaceOverlay"]
   },
@@ -10071,7 +10094,7 @@ const oi = {
       name: "anchors",
       type: "ThemeAnchors",
       required: !1,
-      description: "Minimal theming API: supply 9 semantic anchor colors and all variant tokens are derived automatically. See ThemeAnchorsSpec for guidance on each key. When provided alongside a preset, anchors override the preset's palette colors but preset shape/density/shadow tokens are preserved. When provided without a preset, the `tokens` prop is ignored. Required keys: bgBase, borderDefault, accentDefault, successDefault, warningDefault, dangerDefault, infoDefault. Optional keys: textPrimary (defaults to near-black/white), surface (auto-derived from bgBase)."
+      description: "Minimal theming API: supply 9 semantic anchor colors and all variant tokens are derived automatically. See ThemeAnchorsSpec for guidance on each key. When provided alongside a preset, anchors override the preset's palette colors but preset shape/density/shadow tokens are preserved. When provided without a preset, the `tokens` prop is ignored. Required keys: bgBase, borderDefault, accentDefault, successDefault, warningDefault, dangerDefault, infoDefault. Optional keys: textPrimary (defaults to near-black/white), surface (auto-derived from bgBase), navigation (chrome background — defaults to base theme value)."
     },
     {
       name: "theme",
@@ -10153,6 +10176,7 @@ const oi = {
 
 <LucentProvider
   anchors={{
+    navigation:     '#f4f6f8',
     bgBase:         '#ffffff',
     borderDefault:  '#e5e7eb',
     accentDefault:  '#6366f1',
@@ -10200,6 +10224,7 @@ const oi = {
       code: `import { LucentProvider, createTheme } from 'lucent-ui';
 
 const myTheme = createTheme({
+  navigation:     '#f4f6f8',
   bgBase:         '#ffffff',
   borderDefault:  '#e7e5e4',
   accentDefault:  '#f97316',
@@ -10259,12 +10284,12 @@ function Ea(t) {
     (typeof n[i] != "string" || n[i].trim() === "") && r.push(Z(i, "Must be a non-empty string"));
   typeof n.id == "string" && !/^[a-z][a-z0-9-]*$/.test(n.id) && r.push(Z("id", 'Must be kebab-case (e.g. "button", "form-field")'));
   const a = ["atom", "molecule", "block", "flow", "overlay", "provider"];
-  return a.includes(n.tier) || r.push(Z("tier", `Must be one of: ${a.join(", ")}`)), (typeof n.domain != "string" || n.domain.trim() === "") && r.push(Z("domain", "Must be a non-empty string")), Array.isArray(n.props) ? n.props.forEach((i, l) => {
-    const s = i, c = `props[${l}]`;
-    (typeof s.name != "string" || s.name === "") && r.push(Z(`${c}.name`, "Must be a non-empty string")), (typeof s.type != "string" || s.type === "") && r.push(Z(`${c}.type`, "Must be a non-empty string")), typeof s.required != "boolean" && r.push(Z(`${c}.required`, "Must be a boolean")), (typeof s.description != "string" || s.description === "") && r.push(Z(`${c}.description`, "Must be a non-empty string"));
-  }) : r.push(Z("props", "Must be an array")), Array.isArray(n.usageExamples) ? n.usageExamples.length === 0 ? r.push(Z("usageExamples", "Must have at least one example")) : n.usageExamples.forEach((i, l) => {
-    const s = i, c = `usageExamples[${l}]`;
-    (typeof s.title != "string" || s.title === "") && r.push(Z(`${c}.title`, "Must be a non-empty string")), (typeof s.code != "string" || s.code === "") && r.push(Z(`${c}.code`, "Must be a non-empty string"));
+  return a.includes(n.tier) || r.push(Z("tier", `Must be one of: ${a.join(", ")}`)), (typeof n.domain != "string" || n.domain.trim() === "") && r.push(Z("domain", "Must be a non-empty string")), Array.isArray(n.props) ? n.props.forEach((i, s) => {
+    const l = i, c = `props[${s}]`;
+    (typeof l.name != "string" || l.name === "") && r.push(Z(`${c}.name`, "Must be a non-empty string")), (typeof l.type != "string" || l.type === "") && r.push(Z(`${c}.type`, "Must be a non-empty string")), typeof l.required != "boolean" && r.push(Z(`${c}.required`, "Must be a boolean")), (typeof l.description != "string" || l.description === "") && r.push(Z(`${c}.description`, "Must be a non-empty string"));
+  }) : r.push(Z("props", "Must be an array")), Array.isArray(n.usageExamples) ? n.usageExamples.length === 0 ? r.push(Z("usageExamples", "Must have at least one example")) : n.usageExamples.forEach((i, s) => {
+    const l = i, c = `usageExamples[${s}]`;
+    (typeof l.title != "string" || l.title === "") && r.push(Z(`${c}.title`, "Must be a non-empty string")), (typeof l.code != "string" || l.code === "") && r.push(Z(`${c}.code`, "Must be a non-empty string"));
   }) : r.push(Z("usageExamples", "Must be an array")), Array.isArray(n.compositionGraph) || r.push(Z("compositionGraph", "Must be an array (empty array is fine for atoms)")), typeof n.specVersion == "string" && !/^\d+\.\d+$/.test(n.specVersion) && r.push(Z("specVersion", 'Must be "MAJOR.MINOR" format, e.g. "0.1"')), { valid: r.length === 0, errors: r };
 }
 function di(t) {