lucent-ui 0.25.0 → 0.26.0

package/dist/index.js

@@ -1,5 +1,5 @@
 import { jsxs as k, jsx as n, Fragment as ae } from "react/jsx-runtime";
-import { forwardRef as ge, useState as E, useRef as O, useEffect as G, useCallback as ee, useContext as le, createContext as ve, useLayoutEffect as ie, useId as ke, Children as hn, isValidElement as mn, cloneElement as gn } from "react";
+import { forwardRef as ge, useState as E, useRef as O, useEffect as G, useCallback as ee, useContext as ie, createContext as ve, useLayoutEffect as se, useId as ke, Children as hn, isValidElement as mn, cloneElement as gn } from "react";
 import { createPortal as pe } from "react-dom";
 const vn = {
   primary: {
@@ -44,13 +44,13 @@ const vn = {
   md: { height: "calc(var(--lucent-space-10) * 0.5 + 22px)", padding: "0 var(--lucent-space-5)", fontSize: "var(--lucent-font-size-md)" },
   lg: { height: "calc(var(--lucent-space-12) * 0.5 + 26px)", padding: "0 var(--lucent-space-6)", fontSize: "var(--lucent-font-size-lg)" }
 }, Le = ge(
-  ({ variant: e = "primary", size: t = "md", loading: r = !1, fullWidth: o = !1, spread: a = !1, leftIcon: i, rightIcon: l, chevron: s = !1, disableHoverStyles: c = !1, bordered: d = !0, children: p, disabled: u, style: v, ...m }, b) => {
-    const h = u ?? r, f = !p && !r && (!!i || !!l);
+  ({ variant: e = "primary", size: t = "md", loading: r = !1, fullWidth: o = !1, spread: a = !1, leftIcon: i, rightIcon: l, chevron: s = !1, disableHoverStyles: c = !1, bordered: d = !0, children: u, disabled: p, style: y, ...h }, x) => {
+    const m = p ?? r, f = !u && !r && (!!i || !!l);
     return /* @__PURE__ */ k(
       "button",
       {
-        ref: b,
-        disabled: h,
+        ref: x,
+        disabled: m,
         "aria-busy": r,
         style: {
           display: "inline-flex",
@@ -62,7 +62,7 @@ const vn = {
           lineHeight: 1,
           letterSpacing: "0.01em",
           borderRadius: "var(--lucent-radius-lg)",
-          cursor: h ? "not-allowed" : "pointer",
+          cursor: m ? "not-allowed" : "pointer",
           width: o ? "100%" : void 0,
           transition: "background var(--lucent-duration-fast) var(--lucent-easing-default), border-color var(--lucent-duration-fast) var(--lucent-easing-default), box-shadow var(--lucent-duration-fast) var(--lucent-easing-default), transform 80ms var(--lucent-easing-default)",
           whiteSpace: "nowrap",
@@ -72,8 +72,8 @@ const vn = {
           ...bn[t],
           ...f && { padding: 0, aspectRatio: "1" },
           ...vn[e],
-          ...v,
-          ...h && {
+          ...y,
+          ...m && {
             background: "color-mix(in srgb, var(--lucent-surface-secondary) 70%, var(--lucent-border-default))",
             color: "color-mix(in srgb, var(--lucent-text-disabled) 50%, var(--lucent-border-default))",
             borderColor: "transparent"
@@ -82,37 +82,37 @@ const vn = {
           ...d === !1 && { border: "none" }
         },
         onMouseEnter: (g) => {
-          var w;
-          !h && !c && xn(g.currentTarget, e, d), (w = m.onMouseEnter) == null || w.call(m, g);
+          var v;
+          !m && !c && xn(g.currentTarget, e, d), (v = h.onMouseEnter) == null || v.call(h, g);
         },
         onMouseLeave: (g) => {
-          var w;
-          !h && !c && wn(g.currentTarget, e, d), (w = m.onMouseLeave) == null || w.call(m, g);
+          var v;
+          !m && !c && wn(g.currentTarget, e, d), (v = h.onMouseLeave) == null || v.call(h, g);
         },
         onMouseDown: (g) => {
-          var w;
-          if (!h) {
+          var v;
+          if (!m) {
             const C = e === "danger" || e === "danger-outline" || e === "danger-ghost" ? "var(--lucent-danger-default)" : "var(--lucent-accent-default)";
             g.currentTarget.style.transform = "translateY(1px)", g.currentTarget.style.boxShadow = `0 0 0 2px var(--lucent-surface), 0 0 0 4px ${C}`, g.currentTarget.dataset.pressed = "1";
           }
-          (w = m.onMouseDown) == null || w.call(m, g);
+          (v = h.onMouseDown) == null || v.call(h, g);
         },
         onMouseUp: (g) => {
-          var w;
-          g.currentTarget.style.transform = "", g.currentTarget.style.boxShadow = "", delete g.currentTarget.dataset.pressed, (w = m.onMouseUp) == null || w.call(m, g);
+          var v;
+          g.currentTarget.style.transform = "", g.currentTarget.style.boxShadow = "", delete g.currentTarget.dataset.pressed, (v = h.onMouseUp) == null || v.call(h, g);
         },
         onFocus: (g) => {
-          var w;
-          g.currentTarget.dataset.pressed || (g.currentTarget.style.boxShadow = "0 0 0 3px var(--lucent-accent-subtle)"), (w = m.onFocus) == null || w.call(m, g);
+          var v;
+          g.currentTarget.dataset.pressed || (g.currentTarget.style.boxShadow = "0 0 0 3px var(--lucent-accent-subtle)"), (v = h.onFocus) == null || v.call(h, g);
         },
         onBlur: (g) => {
-          var w;
-          g.currentTarget.style.boxShadow = "", (w = m.onBlur) == null || w.call(m, g);
+          var v;
+          g.currentTarget.style.boxShadow = "", (v = h.onBlur) == null || v.call(h, g);
         },
-        ...m,
+        ...h,
         children: [
           i,
-          r ? /* @__PURE__ */ n(Tn, {}) : p,
+          r ? /* @__PURE__ */ n(Tn, {}) : u,
           !r && l,
           !r && s && /* @__PURE__ */ n(Sn, { size: t })
         ]
@@ -308,7 +308,7 @@ const Vi = {
   sm: "calc(var(--lucent-space-8) * 0.5 + 16px)",
   md: "calc(var(--lucent-space-10) * 0.5 + 20px)",
   lg: "calc(var(--lucent-space-12) * 0.5 + 24px)"
-}, ct = {
+}, dt = {
   sm: "var(--lucent-font-size-sm)",
   md: "var(--lucent-font-size-md)",
   lg: "var(--lucent-font-size-md)"
@@ -320,7 +320,7 @@ const Vi = {
   sm: "var(--lucent-space-3)",
   md: "var(--lucent-space-4)",
   lg: "var(--lucent-space-4)"
-}, dt = {
+}, ut = {
   sm: "calc(var(--lucent-space-3) + 14px + var(--lucent-space-2))",
   md: "calc(var(--lucent-space-4) + 18px + var(--lucent-space-2))",
   lg: "calc(var(--lucent-space-4) + 20px + var(--lucent-space-3))"
@@ -336,13 +336,13 @@ const Vi = {
     suffix: s,
     id: c,
     style: d,
-    ...p
-  }, u) => {
-    const v = c ?? `lucent-input-${Math.random().toString(36).slice(2, 7)}`, m = !!o, b = !!p.disabled, [h, f] = E(!1), [g, w] = E(!1), y = b ? "transparent" : m ? "var(--lucent-danger-default)" : h ? "var(--lucent-focus-ring)" : g ? "var(--lucent-border-strong)" : "var(--lucent-border-default)", C = h ? `0 0 0 3px ${m ? "var(--lucent-danger-subtle)" : "var(--lucent-accent-subtle)"}` : "none", T = {
+    ...u
+  }, p) => {
+    const y = c ?? `lucent-input-${Math.random().toString(36).slice(2, 7)}`, h = !!o, x = !!u.disabled, [m, f] = E(!1), [g, v] = E(!1), b = x ? "transparent" : h ? "var(--lucent-danger-default)" : m ? "var(--lucent-focus-ring)" : g ? "var(--lucent-border-strong)" : "var(--lucent-border-default)", C = m ? `0 0 0 3px ${h ? "var(--lucent-danger-subtle)" : "var(--lucent-accent-subtle)"}` : "none", T = {
       display: "flex",
       alignItems: "center",
-      color: b ? "var(--lucent-text-disabled)" : "var(--lucent-text-secondary)",
-      fontSize: ct[e],
+      color: x ? "var(--lucent-text-disabled)" : "var(--lucent-text-secondary)",
+      fontSize: dt[e],
       fontFamily: "var(--lucent-font-family-base)",
       whiteSpace: "nowrap",
       userSelect: "none",
@@ -352,11 +352,11 @@ const Vi = {
       t && /* @__PURE__ */ n(
         "label",
         {
-          htmlFor: v,
+          htmlFor: y,
           style: {
             fontSize: je[e],
             fontWeight: "var(--lucent-font-weight-medium)",
-            color: b ? "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
@@ -369,28 +369,28 @@ const Vi = {
             display: "flex",
             alignItems: "stretch",
             height: Cn[e],
-            border: `1px solid ${y}`,
+            border: `1px solid ${b}`,
             borderRadius: "var(--lucent-radius-lg)",
             boxShadow: C,
-            background: b ? "var(--lucent-surface-secondary)" : "var(--lucent-surface)",
+            background: x ? "var(--lucent-surface-secondary)" : "var(--lucent-surface)",
             overflow: "hidden",
-            cursor: b ? "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(", ")
           },
           onMouseEnter: () => {
-            b || w(!0);
+            x || v(!0);
           },
-          onMouseLeave: () => w(!1),
+          onMouseLeave: () => v(!1),
           children: [
             l && /* @__PURE__ */ n("span", { style: S, children: l }),
             /* @__PURE__ */ k("div", { style: { position: "relative", flex: 1, display: "flex", alignItems: "center", minWidth: 0 }, children: [
               a && /* @__PURE__ */ n("span", { style: {
                 position: "absolute",
                 left: fe[e],
-                color: b ? "var(--lucent-text-disabled)" : "var(--lucent-text-secondary)",
+                color: x ? "var(--lucent-text-disabled)" : "var(--lucent-text-secondary)",
                 display: "flex",
                 alignItems: "center",
                 pointerEvents: "none"
@@ -398,39 +398,39 @@ const Vi = {
               /* @__PURE__ */ n(
                 "input",
                 {
-                  ref: u,
-                  id: v,
-                  "aria-invalid": m,
-                  "aria-describedby": m ? `${v}-error` : r ? `${v}-helper` : void 0,
+                  ref: p,
+                  id: y,
+                  "aria-invalid": h,
+                  "aria-describedby": h ? `${y}-error` : r ? `${y}-helper` : void 0,
                   style: {
                     width: "100%",
                     height: "100%",
-                    paddingLeft: a ? dt[e] : fe[e],
-                    paddingRight: i ? dt[e] : fe[e],
-                    fontSize: ct[e],
+                    paddingLeft: a ? ut[e] : fe[e],
+                    paddingRight: i ? ut[e] : fe[e],
+                    fontSize: dt[e],
                     fontFamily: "var(--lucent-font-family-base)",
-                    color: b ? "var(--lucent-text-disabled)" : "var(--lucent-text-primary)",
+                    color: x ? "var(--lucent-text-disabled)" : "var(--lucent-text-primary)",
                     background: "transparent",
                     border: "none",
                     outline: "none",
-                    cursor: b ? "not-allowed" : void 0,
+                    cursor: x ? "not-allowed" : void 0,
                     boxSizing: "border-box"
                   },
-                  ...p,
+                  ...u,
                   onFocus: (I) => {
                     var A;
-                    f(!0), (A = p.onFocus) == null || A.call(p, I);
+                    f(!0), (A = u.onFocus) == null || A.call(u, I);
                   },
                   onBlur: (I) => {
                     var A;
-                    f(!1), (A = p.onBlur) == null || A.call(p, I);
+                    f(!1), (A = u.onBlur) == null || A.call(u, I);
                   }
                 }
               ),
               i && /* @__PURE__ */ n("span", { style: {
                 position: "absolute",
                 right: fe[e],
-                color: b ? "var(--lucent-text-disabled)" : "var(--lucent-text-secondary)",
+                color: x ? "var(--lucent-text-disabled)" : "var(--lucent-text-secondary)",
                 display: "flex",
                 alignItems: "center"
               }, children: i })
@@ -439,10 +439,10 @@ const Vi = {
           ]
         }
       ),
-      m && /* @__PURE__ */ n(
+      h && /* @__PURE__ */ n(
         "span",
         {
-          id: `${v}-error`,
+          id: `${y}-error`,
           role: "alert",
           style: {
             fontSize: je[e],
@@ -452,10 +452,10 @@ const Vi = {
           children: o
         }
       ),
-      !m && r && /* @__PURE__ */ n(
+      !h && r && /* @__PURE__ */ n(
         "span",
         {
-          id: `${v}-helper`,
+          id: `${y}-helper`,
           style: {
             fontSize: je[e],
             color: "var(--lucent-text-secondary)",
@@ -516,30 +516,30 @@ const ji = {
   md: "var(--lucent-space-4)",
   lg: "var(--lucent-space-4)"
 }, zn = ge(
-  ({ label: e, helperText: t, errorText: r, autoResize: o = !1, maxLength: a, showCount: i = !1, size: l = "md", id: s, value: c, onChange: d, disabled: p, style: u, ...v }, m) => {
-    const b = O(null), h = m ?? b, f = s ?? `lucent-textarea-${Math.random().toString(36).slice(2, 7)}`, g = !!r, w = !!p, y = typeof c == "string" ? c.length : 0;
+  ({ label: e, helperText: t, errorText: r, autoResize: o = !1, maxLength: a, showCount: i = !1, size: l = "md", id: s, value: c, onChange: d, disabled: u, style: p, ...y }, h) => {
+    const x = O(null), m = h ?? x, f = s ?? `lucent-textarea-${Math.random().toString(36).slice(2, 7)}`, g = !!r, v = !!u, b = typeof c == "string" ? c.length : 0;
     G(() => {
       if (!o) return;
-      const T = h.current;
+      const T = m.current;
       T && (T.style.height = "auto", T.style.height = `${T.scrollHeight}px`);
-    }, [c, o, h]);
-    const C = w ? "transparent" : g ? "var(--lucent-danger-default)" : "var(--lucent-border-default)";
+    }, [c, o, m]);
+    const C = v ? "transparent" : g ? "var(--lucent-danger-default)" : "var(--lucent-border-default)";
     return /* @__PURE__ */ k("div", { style: { display: "flex", flexDirection: "column", gap: "var(--lucent-space-1)", width: "100%" }, children: [
       e && /* @__PURE__ */ n("label", { htmlFor: f, style: {
         fontSize: Mn[l],
         fontWeight: "var(--lucent-font-weight-medium)",
-        color: w ? "var(--lucent-text-disabled)" : "var(--lucent-text-primary)",
+        color: v ? "var(--lucent-text-disabled)" : "var(--lucent-text-primary)",
         fontFamily: "var(--lucent-font-family-base)"
       }, children: e }),
       /* @__PURE__ */ n(
         "textarea",
         {
-          ref: h,
+          ref: m,
           id: f,
           maxLength: a,
           value: c,
           onChange: d,
-          disabled: p,
+          disabled: u,
           "aria-invalid": g,
           "aria-describedby": g ? `${f}-error` : t ? `${f}-helper` : void 0,
           style: {
@@ -548,38 +548,38 @@ const ji = {
             padding: Dn[l],
             fontSize: In[l],
             fontFamily: "var(--lucent-font-family-base)",
-            color: w ? "var(--lucent-text-disabled)" : "var(--lucent-text-primary)",
-            background: w ? "var(--lucent-surface-secondary)" : "var(--lucent-surface)",
+            color: v ? "var(--lucent-text-disabled)" : "var(--lucent-text-primary)",
+            background: v ? "var(--lucent-surface-secondary)" : "var(--lucent-surface)",
             border: `1px solid ${C}`,
             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: v ? "not-allowed" : void 0,
             transition: [
               "border-color var(--lucent-duration-fast) var(--lucent-easing-default)",
               "box-shadow var(--lucent-duration-fast) var(--lucent-easing-default)"
             ].join(", "),
-            ...u
+            ...p
           },
           onMouseEnter: (T) => {
             var S;
-            !w && T.currentTarget !== document.activeElement && (T.currentTarget.style.borderColor = g ? "var(--lucent-danger-default)" : "var(--lucent-border-strong)"), (S = v.onMouseEnter) == null || S.call(v, T);
+            !v && T.currentTarget !== document.activeElement && (T.currentTarget.style.borderColor = g ? "var(--lucent-danger-default)" : "var(--lucent-border-strong)"), (S = y.onMouseEnter) == null || S.call(y, T);
           },
           onMouseLeave: (T) => {
             var S;
-            !w && T.currentTarget !== document.activeElement && (T.currentTarget.style.borderColor = g ? "var(--lucent-danger-default)" : "var(--lucent-border-default)"), (S = v.onMouseLeave) == null || S.call(v, T);
+            !v && T.currentTarget !== document.activeElement && (T.currentTarget.style.borderColor = g ? "var(--lucent-danger-default)" : "var(--lucent-border-default)"), (S = y.onMouseLeave) == null || S.call(y, T);
           },
           onFocus: (T) => {
             var S;
-            w || (T.currentTarget.style.borderColor = g ? "var(--lucent-danger-default)" : "var(--lucent-focus-ring)", T.currentTarget.style.boxShadow = `0 0 0 3px ${g ? "var(--lucent-danger-subtle)" : "var(--lucent-accent-subtle)"}`, (S = v.onFocus) == null || S.call(v, T));
+            v || (T.currentTarget.style.borderColor = g ? "var(--lucent-danger-default)" : "var(--lucent-focus-ring)", T.currentTarget.style.boxShadow = `0 0 0 3px ${g ? "var(--lucent-danger-subtle)" : "var(--lucent-accent-subtle)"}`, (S = y.onFocus) == null || S.call(y, T));
           },
           onBlur: (T) => {
             var S;
-            w || (T.currentTarget.style.borderColor = g ? "var(--lucent-danger-default)" : "var(--lucent-border-default)", T.currentTarget.style.boxShadow = "none", (S = v.onBlur) == null || S.call(v, T));
+            v || (T.currentTarget.style.borderColor = g ? "var(--lucent-danger-default)" : "var(--lucent-border-default)", T.currentTarget.style.boxShadow = "none", (S = y.onBlur) == null || S.call(y, T));
           },
-          ...v
+          ...y
         }
       ),
       /* @__PURE__ */ k("div", { style: { display: "flex", justifyContent: "space-between", alignItems: "flex-start" }, children: [
@@ -589,12 +589,12 @@ const ji = {
         ] }),
         (i || a) && /* @__PURE__ */ k("span", { style: {
           fontSize: "var(--lucent-font-size-xs)",
-          color: a && y >= a ? "var(--lucent-danger-text)" : "var(--lucent-text-secondary)",
+          color: a && b >= a ? "var(--lucent-danger-text)" : "var(--lucent-text-secondary)",
           fontFamily: "var(--lucent-font-family-mono)",
           flexShrink: 0,
           marginLeft: "var(--lucent-space-2)"
         }, children: [
-          y,
+          b,
           a ? `/${a}` : ""
         ] })
       ] })
@@ -788,46 +788,46 @@ function Ln({
   dot: s = !1,
   pulse: c = !1,
   borderless: d = !1,
-  ghost: p = !1,
-  disabled: u = !1,
-  style: v
+  ghost: u = !1,
+  disabled: p = !1,
+  style: y
 }) {
-  const m = Bn[t], b = qn[r], [h, f] = E(!1), g = s && c, w = s && !e, y = !u && (o || a), C = `color-mix(in srgb, ${m.color} 8%, transparent)`, T = b.dotSize * 3, S = {
+  const h = Bn[t], x = qn[r], [m, f] = E(!1), g = s && c, v = s && !e, b = !p && (o || a), C = `color-mix(in srgb, ${h.color} 8%, transparent)`, T = x.dotSize * 3, S = {
     display: "inline-flex",
     alignItems: "center",
-    justifyContent: w ? "center" : void 0,
-    gap: w ? void 0 : b.gap,
-    height: w ? T : b.height,
-    width: w ? T : void 0,
-    padding: w ? 0 : o ? b.paddingDismiss : b.padding,
-    fontSize: b.fontSize,
+    justifyContent: v ? "center" : void 0,
+    gap: v ? void 0 : x.gap,
+    height: v ? T : x.height,
+    width: v ? T : void 0,
+    padding: v ? 0 : o ? x.paddingDismiss : x.padding,
+    fontSize: x.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: p ? h && y ? C : "transparent" : h && y ? m.hoverBg : m.bg,
-    color: m.color,
-    border: p || d ? "1px solid transparent" : `1px solid ${h && y ? m.hoverBorder : m.border}`,
+    borderRadius: v ? "var(--lucent-radius-full)" : "var(--lucent-radius-lg)",
+    background: u ? m && b ? C : "transparent" : m && b ? h.hoverBg : h.bg,
+    color: h.color,
+    border: u || d ? "1px solid transparent" : `1px solid ${m && b ? h.hoverBorder : h.border}`,
     whiteSpace: "nowrap",
     boxSizing: "border-box",
-    opacity: u ? 0.5 : 1,
-    transform: h && y ? "translateY(-1px)" : "none",
-    boxShadow: h && y && !p ? `0 2px 4px ${m.hoverBorder}22` : "none",
+    opacity: p ? 0.5 : 1,
+    transform: m && b ? "translateY(-1px)" : "none",
+    boxShadow: m && b && !u ? `0 2px 4px ${h.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: b ? "pointer" : "default",
     // Reset button styles when onClick
     ...a ? { outline: "none" } : {},
-    ...v
+    ...y
   }, L = /* @__PURE__ */ k(ae, { children: [
     g && /* @__PURE__ */ n("style", { children: Rn }),
     l && /* @__PURE__ */ n("span", { style: {
-      width: b.dotSize + 2,
-      height: b.dotSize + 2,
+      width: x.dotSize + 2,
+      height: x.dotSize + 2,
       borderRadius: "50%",
       background: l,
       border: "1px solid rgba(0,0,0,0.1)",
@@ -835,8 +835,8 @@ function Ln({
     } }),
     s && !l && /* @__PURE__ */ k("span", { style: {
       position: "relative",
-      width: b.dotSize,
-      height: b.dotSize,
+      width: x.dotSize,
+      height: x.dotSize,
       flexShrink: 0
     }, children: [
       /* @__PURE__ */ n("span", { style: {
@@ -857,8 +857,8 @@ function Ln({
       display: "inline-flex",
       alignItems: "center",
       justifyContent: "center",
-      width: b.iconSize,
-      height: b.iconSize,
+      width: x.iconSize,
+      height: x.iconSize,
       flexShrink: 0
     }, children: i }),
     e,
@@ -866,32 +866,32 @@ function Ln({
       "button",
       {
         type: "button",
-        onClick: u ? void 0 : (A) => {
+        onClick: p ? void 0 : (A) => {
           A.stopPropagation(), o();
         },
-        disabled: u,
+        disabled: p,
         "aria-label": "Dismiss",
         style: {
           display: "inline-flex",
           alignItems: "center",
           justifyContent: "center",
-          width: b.iconSize + 2,
-          height: b.iconSize + 2,
+          width: x.iconSize + 2,
+          height: x.iconSize + 2,
           padding: 0,
           border: "none",
           borderRadius: "var(--lucent-radius-lg)",
           background: "transparent",
           color: "inherit",
-          cursor: u ? "not-allowed" : "pointer",
+          cursor: p ? "not-allowed" : "pointer",
           flexShrink: 0,
           lineHeight: 1
         },
-        children: /* @__PURE__ */ n("svg", { width: b.iconSize - 2, height: b.iconSize - 2, viewBox: "0 0 10 10", fill: "none", stroke: "currentColor", strokeWidth: 1.5, strokeLinecap: "round", children: /* @__PURE__ */ n("path", { d: "M2 2L8 8M8 2L2 8" }) })
+        children: /* @__PURE__ */ n("svg", { width: x.iconSize - 2, height: x.iconSize - 2, viewBox: "0 0 10 10", fill: "none", stroke: "currentColor", strokeWidth: 1.5, strokeLinecap: "round", children: /* @__PURE__ */ n("path", { d: "M2 2L8 8M8 2L2 8" }) })
       }
     )
   ] }), I = {
     onMouseEnter: () => {
-      u || f(!0);
+      p || f(!0);
     },
     onMouseLeave: () => f(!1)
   };
@@ -899,8 +899,8 @@ function Ln({
     "button",
     {
       type: "button",
-      onClick: u ? void 0 : a,
-      disabled: u,
+      onClick: p ? void 0 : a,
+      disabled: p,
       style: S,
       ...I,
       children: L
@@ -1104,7 +1104,7 @@ const Ji = {
     notes: 'The visible SVG is aria-hidden. The label is conveyed via a visually-hidden span inside role="status".'
   }
 };
-function Zi({ orientation: e = "horizontal", label: t, spacing: r = "var(--lucent-space-4)", style: o }) {
+function Zi({ orientation: e = "horizontal", label: t, spacing: r = "0", style: o }) {
   return e === "vertical" ? /* @__PURE__ */ n(
     "span",
     {
@@ -1170,7 +1170,7 @@ const Qi = {
   props: [
     { name: "orientation", type: "enum", required: !1, default: "horizontal", description: "Direction of the divider line.", enumValues: ["horizontal", "vertical"] },
     { name: "label", type: "string", required: !1, description: 'Optional centered label (horizontal only). Common use: "OR", "AND", section titles.' },
-    { name: "spacing", type: "string", required: !1, default: "var(--lucent-space-4)", description: "Margin on the axis perpendicular to the line." }
+    { name: "spacing", type: "string", required: !1, default: "0", description: 'Margin on the axis perpendicular to the line. Defaults to 0 so parent gap-based layouts (Stack, Row) control spacing. Pass an explicit value like "var(--lucent-space-4)" for standalone use outside flex/grid containers.' }
   ],
   usageExamples: [
     { title: "Section separator", code: "<Divider />" },
@@ -1194,7 +1194,7 @@ const Qi = {
   60%  { transform: scale(1.15) rotate(2deg); }
   100% { opacity: 1; transform: scale(1) rotate(0deg); }
 }
-`, Ft = ge(
+`, Pt = ge(
   ({
     label: e,
     size: t = "md",
@@ -1206,27 +1206,27 @@ const Qi = {
     disabled: s,
     id: c,
     onChange: d,
-    style: p,
-    ...u
-  }, v) => {
-    const m = O(null), b = c ?? `lucent-checkbox-${Math.random().toString(36).slice(2, 7)}`, h = Hn[t], f = i !== void 0, [g, w] = E(l ?? !1), [y, C] = E(!1), T = f ? !!i : g, S = O(T), [L, I] = E(0);
+    style: u,
+    ...p
+  }, y) => {
+    const h = O(null), x = c ?? `lucent-checkbox-${Math.random().toString(36).slice(2, 7)}`, m = Hn[t], f = i !== void 0, [g, v] = E(l ?? !1), [b, C] = E(!1), T = f ? !!i : g, S = O(T), [L, I] = E(0);
     G(() => {
       !s && S.current !== T && (S.current = T, I((q) => q + 1));
     }, [T, s]);
     const A = ee(
       (q) => {
-        m.current = q, typeof v == "function" ? v(q) : v && (v.current = q);
+        h.current = q, typeof y == "function" ? y(q) : y && (y.current = q);
       },
-      [v]
+      [y]
     );
     G(() => {
-      m.current && (m.current.indeterminate = r);
+      h.current && (h.current.indeterminate = r);
     }, [r]);
     const P = (q) => {
-      f || w(q.target.checked), d == null || d(q);
+      f || v(q.target.checked), d == null || d(q);
     }, $ = s ? "var(--lucent-text-disabled)" : "var(--lucent-text-on-accent)", M = {
-      width: h,
-      height: h,
+      width: m,
+      height: m,
       // fixed corner so global radius overrides (e.g. via customizer) don't
       // turn checkboxes into circles. the design spec keeps them slightly
       // rounded regardless of theming.
@@ -1253,7 +1253,7 @@ const Qi = {
           fontSize: t === "sm" ? "var(--lucent-font-size-sm)" : "var(--lucent-font-size-md)",
           color: s ? "var(--lucent-text-disabled)" : "var(--lucent-text-primary)",
           userSelect: "none",
-          ...o ? {} : p
+          ...o ? {} : u
         },
         children: [
           /* @__PURE__ */ n(
@@ -1261,20 +1261,20 @@ const Qi = {
             {
               ref: A,
               type: "checkbox",
-              id: b,
+              id: x,
               checked: f ? i : g,
               disabled: s,
               onChange: P,
               style: { position: "absolute", opacity: 0, width: 0, height: 0, margin: 0, pointerEvents: "none" },
-              ...u
+              ...p
             }
           ),
           /* @__PURE__ */ k("span", { "aria-hidden": !0, style: M, children: [
             T && !r && /* @__PURE__ */ n(
               "svg",
               {
-                width: h - 4,
-                height: h - 4,
+                width: m - 4,
+                height: m - 4,
                 viewBox: "0 0 10 10",
                 fill: "none",
                 style: { animation: "lucent-cb-mark 200ms cubic-bezier(0.34, 1.56, 0.64, 1) forwards" },
@@ -1284,8 +1284,8 @@ const Qi = {
             r && /* @__PURE__ */ n(
               "svg",
               {
-                width: h - 4,
-                height: h - 4,
+                width: m - 4,
+                height: m - 4,
                 viewBox: "0 0 10 10",
                 fill: "none",
                 style: { animation: "lucent-cb-mark 200ms cubic-bezier(0.34, 1.56, 0.64, 1) forwards" },
@@ -1317,7 +1317,7 @@ const Qi = {
           },
           onMouseLeave: () => C(!1),
           style: {
-            border: `1px solid ${T && !s ? "var(--lucent-accent-default)" : y && !s ? "var(--lucent-border-strong)" : "var(--lucent-border-default)"}`,
+            border: `1px solid ${T && !s ? "var(--lucent-accent-default)" : b && !s ? "var(--lucent-border-strong)" : "var(--lucent-border-default)"}`,
             borderRadius: "var(--lucent-radius-lg)",
             ...a ? {} : { minHeight: Vn[t] },
             padding: a ? "var(--lucent-space-3)" : "0 var(--lucent-space-3)",
@@ -1326,11 +1326,11 @@ const Qi = {
             background: T && !s ? "var(--lucent-accent-subtle)" : "var(--lucent-surface)",
             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",
-            ...p
+            ...u
           },
           onClick: (q) => {
             var W;
-            s || q.target === q.currentTarget && ((W = m.current) == null || W.click());
+            s || q.target === q.currentTarget && ((W = h.current) == null || W.click());
           },
           children: N
         }
@@ -1338,7 +1338,7 @@ const Qi = {
     ] });
   }
 );
-Ft.displayName = "Checkbox";
+Pt.displayName = "Checkbox";
 const es = {
   id: "checkbox",
   name: "Checkbox",
@@ -1435,7 +1435,7 @@ const es = {
   60%  { transform: scale(1.2); }
   100% { opacity: 1; transform: scale(1); }
 }
-`, Pt = ve(null);
+`, $t = ve(null);
 function Gn({
   name: e,
   value: t,
@@ -1445,7 +1445,7 @@ function Gn({
   label: i,
   children: l
 }) {
-  return /* @__PURE__ */ n(Pt.Provider, { value: { name: e, value: t, onChange: r, disabled: o ?? !1 }, children: /* @__PURE__ */ n(
+  return /* @__PURE__ */ n($t.Provider, { value: { name: e, value: t, onChange: r, disabled: o ?? !1 }, children: /* @__PURE__ */ n(
     "div",
     {
       role: "radiogroup",
@@ -1465,23 +1465,23 @@ const _n = { sm: 14, md: 16, lg: 20 }, Yn = { sm: "calc(var(--lucent-space-8) *
   md: "var(--lucent-font-size-md)",
   lg: "var(--lucent-font-size-md)"
 };
-function ts({ value: e, label: t, size: r = "md", contained: o = !1, helperText: a, disabled: i, id: l, onChange: s, checked: c, style: d, ...p }) {
-  const u = le(Pt), v = l ?? `lucent-radio-${Math.random().toString(36).slice(2, 7)}`, m = _n[r], [b, h] = E(!1), f = i ?? (u == null ? void 0 : u.disabled) ?? !1, g = u ? u.value === e : !!c, w = O(g), [y, C] = E(0);
+function ts({ value: e, label: t, size: r = "md", contained: o = !1, helperText: a, disabled: i, id: l, onChange: s, checked: c, style: d, ...u }) {
+  const p = ie($t), y = l ?? `lucent-radio-${Math.random().toString(36).slice(2, 7)}`, h = _n[r], [x, m] = E(!1), f = i ?? (p == null ? void 0 : p.disabled) ?? !1, g = p ? p.value === e : !!c, v = O(g), [b, C] = E(0);
   G(() => {
-    !f && w.current !== g && (w.current = g, C((A) => A + 1));
+    !f && v.current !== g && (v.current = g, C((A) => A + 1));
   }, [g, f]);
   const T = (A) => {
-    u == null || u.onChange(e), s == null || s(A);
+    p == null || p.onChange(e), s == null || s(A);
   }, S = {
-    width: m / 2,
-    height: m / 2,
+    width: h / 2,
+    height: h / 2,
     borderRadius: "50%",
     background: f ? "var(--lucent-text-disabled)" : "var(--lucent-text-on-accent)",
     animation: g ? "lucent-radio-dot 200ms cubic-bezier(0.34, 1.56, 0.64, 1) forwards" : void 0,
     opacity: g ? 1 : 0
   }, L = {
-    width: m,
-    height: m,
+    width: h,
+    height: h,
     borderRadius: "50%",
     border: `1.5px solid ${f ? "transparent" : g ? "var(--lucent-accent-default)" : "var(--lucent-border-strong)"}`,
     background: f ? "var(--lucent-surface-secondary)" : g ? "var(--lucent-accent-default)" : "var(--lucent-surface)",
@@ -1490,7 +1490,7 @@ function ts({ value: e, label: t, size: r = "md", contained: o = !1, helperText:
     justifyContent: "center",
     flexShrink: 0,
     transition: "background var(--lucent-duration-fast) var(--lucent-easing-default), border-color var(--lucent-duration-fast) var(--lucent-easing-default)",
-    animation: y > 0 ? "lucent-radio-pop 220ms cubic-bezier(0.34, 1.56, 0.64, 1) forwards" : void 0
+    animation: b > 0 ? "lucent-radio-pop 220ms cubic-bezier(0.34, 1.56, 0.64, 1) forwards" : void 0
   }, I = /* @__PURE__ */ k(
     "label",
     {
@@ -1510,17 +1510,17 @@ function ts({ value: e, label: t, size: r = "md", contained: o = !1, helperText:
           "input",
           {
             type: "radio",
-            id: v,
+            id: y,
             value: e,
-            name: (u == null ? void 0 : u.name) ?? p.name,
+            name: (p == null ? void 0 : p.name) ?? u.name,
             checked: g,
             disabled: f,
             onChange: T,
             style: { position: "absolute", opacity: 0, width: 0, height: 0, margin: 0, pointerEvents: "none" },
-            ...p
+            ...u
           }
         ),
-        /* @__PURE__ */ n("span", { "aria-hidden": !0, style: L, children: /* @__PURE__ */ n("span", { style: S }) }, y),
+        /* @__PURE__ */ n("span", { "aria-hidden": !0, style: L, children: /* @__PURE__ */ n("span", { style: S }) }, b),
         t || a ? /* @__PURE__ */ k("span", { style: { display: "flex", flexDirection: "column" }, children: [
           t && /* @__PURE__ */ n("span", { style: {
             fontWeight: a ? "var(--lucent-font-weight-medium)" : "var(--lucent-font-weight-regular)",
@@ -1541,11 +1541,11 @@ function ts({ value: e, label: t, size: r = "md", contained: o = !1, helperText:
       "div",
       {
         onMouseEnter: () => {
-          f || h(!0);
+          f || m(!0);
         },
-        onMouseLeave: () => h(!1),
+        onMouseLeave: () => m(!1),
         style: {
-          border: `1px solid ${g && !f ? "var(--lucent-accent-default)" : b && !f ? "var(--lucent-border-strong)" : "var(--lucent-border-default)"}`,
+          border: `1px solid ${g && !f ? "var(--lucent-accent-default)" : x && !f ? "var(--lucent-border-strong)" : "var(--lucent-border-default)"}`,
           borderRadius: "var(--lucent-radius-lg)",
           ...a ? { padding: "var(--lucent-space-3)" } : { minHeight: Yn[r], padding: "0 var(--lucent-space-3)", display: "flex", alignItems: "center" },
           background: g && !f ? "var(--lucent-accent-subtle)" : "var(--lucent-surface)",
@@ -1683,7 +1683,7 @@ const as = {
   sm: { track: [28, 16], thumb: 12 },
   md: { track: [36, 20], thumb: 16 },
   lg: { track: [44, 24], thumb: 20 }
-}, ut = "cubic-bezier(0.34, 1.56, 0.64, 1)", Zn = `
+}, pt = "cubic-bezier(0.34, 1.56, 0.64, 1)", Zn = `
 @keyframes lucent-toggle-pop {
   0%   { transform: scale(1); }
   35%  { transform: scale(0.94); }
@@ -1702,19 +1702,19 @@ function rs({
   disabled: s,
   id: c,
   onChange: d,
-  style: p,
-  ...u
+  style: u,
+  ...p
 }) {
-  const v = c ?? `lucent-toggle-${Math.random().toString(36).slice(2, 7)}`, m = r !== void 0, [b, h] = E(o ?? !1), f = m ? !!r : b, [g, w] = E(!1), y = O(f), [C, T] = E(0), [S, L] = E(!1);
+  const y = c ?? `lucent-toggle-${Math.random().toString(36).slice(2, 7)}`, h = r !== void 0, [x, m] = E(o ?? !1), f = h ? !!r : x, [g, v] = E(!1), b = O(f), [C, T] = E(0), [S, L] = E(!1);
   G(() => {
-    if (!s && y.current !== f) {
-      y.current = f, T((U) => U + 1), L(!0);
+    if (!s && b.current !== f) {
+      b.current = f, T((U) => U + 1), L(!0);
       const W = setTimeout(() => L(!1), 150);
       return () => clearTimeout(W);
     }
   }, [f, s]);
   const { track: [I, A], thumb: P } = Jn[t], $ = f ? I - P - 2 : 2, M = (W) => {
-    m || h(W.target.checked), d == null || d(W);
+    h || m(W.target.checked), d == null || d(W);
   }, N = /* @__PURE__ */ k(
     "span",
     {
@@ -1736,7 +1736,7 @@ function rs({
               borderRadius: "inherit",
               background: s ? "var(--lucent-surface-secondary)" : f ? "var(--lucent-accent-default)" : "var(--lucent-control-track)",
               transition: "background var(--lucent-duration-fast) var(--lucent-easing-default)",
-              animation: C > 0 ? `lucent-toggle-pop 240ms ${ut} forwards` : void 0
+              animation: C > 0 ? `lucent-toggle-pop 240ms ${pt} forwards` : void 0
             }
           },
           C
@@ -1753,7 +1753,7 @@ function rs({
               borderRadius: P,
               background: "#ffffff",
               boxShadow: "0 1px 3px rgb(0 0 0 / 0.2)",
-              transition: `left 260ms ${ut}, width 200ms cubic-bezier(0.22, 1, 0.36, 1)`
+              transition: `left 260ms ${pt}, width 200ms cubic-bezier(0.22, 1, 0.36, 1)`
             }
           }
         )
@@ -1772,7 +1772,7 @@ function rs({
         fontSize: t === "sm" ? "var(--lucent-font-size-sm)" : "var(--lucent-font-size-md)",
         color: s ? "var(--lucent-text-disabled)" : "var(--lucent-text-primary)",
         userSelect: "none",
-        ...a ? {} : p
+        ...a ? {} : u
       },
       children: [
         /* @__PURE__ */ n(
@@ -1780,13 +1780,13 @@ function rs({
           {
             type: "checkbox",
             role: "switch",
-            id: v,
-            checked: m ? r : b,
+            id: y,
+            checked: h ? r : x,
             disabled: s,
             onChange: M,
             "aria-checked": f,
             style: { position: "absolute", opacity: 0, width: 0, height: 0, margin: 0, pointerEvents: "none" },
-            ...u
+            ...p
           }
         ),
         l === "left" && N,
@@ -1811,9 +1811,9 @@ function rs({
       "div",
       {
         onMouseEnter: () => {
-          s || w(!0);
+          s || v(!0);
         },
-        onMouseLeave: () => w(!1),
+        onMouseLeave: () => v(!1),
         style: {
           border: `1px solid ${f && !s ? "var(--lucent-accent-default)" : g && !s ? "var(--lucent-border-strong)" : "var(--lucent-border-default)"}`,
           borderRadius: "var(--lucent-radius-lg)",
@@ -1821,7 +1821,7 @@ function rs({
           background: f && !s ? "var(--lucent-accent-subtle)" : "var(--lucent-surface)",
           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",
-          ...p
+          ...u
         },
         onClick: (W) => {
           if (!s && W.target === W.currentTarget) {
@@ -1933,22 +1933,22 @@ const os = {
   sm: "var(--lucent-font-size-sm)",
   md: "var(--lucent-font-size-sm)",
   lg: "var(--lucent-font-size-md)"
-}, pt = {
+}, ft = {
   sm: "var(--lucent-space-2)",
   md: "var(--lucent-space-3)",
   lg: "var(--lucent-space-3)"
-}, $t = ge(
-  ({ options: e, size: t = "md", label: r, helperText: o, errorText: a, placeholder: i, disabled: l, id: s, style: c, ...d }, p) => {
-    const u = s ?? `lucent-select-${Math.random().toString(36).slice(2, 7)}`, v = !!a, m = !!l, [b, h] = E(!1), [f, g] = E(!1), w = m ? "transparent" : v ? "var(--lucent-danger-default)" : b ? "var(--lucent-focus-ring)" : f ? "var(--lucent-border-strong)" : "var(--lucent-border-default)", y = b ? `0 0 0 3px ${v ? "var(--lucent-danger-subtle)" : "var(--lucent-accent-subtle)"}` : "none";
+}, Nt = ge(
+  ({ options: e, size: t = "md", label: r, helperText: o, errorText: a, placeholder: i, disabled: l, id: s, style: c, ...d }, u) => {
+    const p = s ?? `lucent-select-${Math.random().toString(36).slice(2, 7)}`, y = !!a, h = !!l, [x, m] = E(!1), [f, g] = E(!1), v = h ? "transparent" : y ? "var(--lucent-danger-default)" : x ? "var(--lucent-focus-ring)" : f ? "var(--lucent-border-strong)" : "var(--lucent-border-default)", b = x ? `0 0 0 3px ${y ? "var(--lucent-danger-subtle)" : "var(--lucent-accent-subtle)"}` : "none";
     return /* @__PURE__ */ k("div", { style: { display: "flex", flexDirection: "column", gap: "var(--lucent-space-1)", width: "100%", ...c }, children: [
       r && /* @__PURE__ */ n(
         "label",
         {
-          htmlFor: u,
+          htmlFor: p,
           style: {
             fontSize: Ue[t],
             fontWeight: "var(--lucent-font-weight-medium)",
-            color: m ? "var(--lucent-text-disabled)" : "var(--lucent-text-primary)",
+            color: h ? "var(--lucent-text-disabled)" : "var(--lucent-text-primary)",
             fontFamily: "var(--lucent-font-family-base)"
           },
           children: r
@@ -1962,54 +1962,54 @@ const os = {
             display: "flex",
             alignItems: "center",
             height: Qn[t],
-            border: `1px solid ${w}`,
+            border: `1px solid ${v}`,
             borderRadius: "var(--lucent-radius-lg)",
-            boxShadow: y,
-            background: m ? "var(--lucent-surface-secondary)" : "var(--lucent-surface)",
-            cursor: m ? "not-allowed" : "pointer",
+            boxShadow: b,
+            background: h ? "var(--lucent-surface-secondary)" : "var(--lucent-surface)",
+            cursor: h ? "not-allowed" : "pointer",
             transition: [
               "border-color var(--lucent-duration-fast) var(--lucent-easing-default)",
               "box-shadow var(--lucent-duration-fast) var(--lucent-easing-default)"
             ].join(", ")
           },
           onMouseEnter: () => {
-            m || g(!0);
+            h || g(!0);
           },
           onMouseLeave: () => g(!1),
           children: [
             /* @__PURE__ */ k(
               "select",
               {
-                ref: p,
-                id: u,
+                ref: u,
+                id: p,
                 disabled: l,
-                "aria-invalid": v,
-                "aria-describedby": v ? `${u}-error` : o ? `${u}-helper` : void 0,
+                "aria-invalid": y,
+                "aria-describedby": y ? `${p}-error` : o ? `${p}-helper` : void 0,
                 style: {
                   width: "100%",
                   height: "100%",
-                  padding: `0 var(--lucent-space-8) 0 ${pt[t]}`,
+                  padding: `0 var(--lucent-space-8) 0 ${ft[t]}`,
                   fontSize: ea[t],
                   fontFamily: "var(--lucent-font-family-base)",
-                  color: m ? "var(--lucent-text-disabled)" : "var(--lucent-text-primary)",
+                  color: h ? "var(--lucent-text-disabled)" : "var(--lucent-text-primary)",
                   background: "transparent",
                   border: "none",
                   borderRadius: "var(--lucent-radius-lg)",
                   outline: "none",
                   appearance: "none",
-                  cursor: m ? "not-allowed" : "pointer",
+                  cursor: h ? "not-allowed" : "pointer",
                   boxSizing: "border-box"
                 },
                 onFocus: (C) => {
                   var T;
-                  m || h(!0), (T = d.onFocus) == null || T.call(d, C);
+                  h || m(!0), (T = d.onFocus) == null || T.call(d, C);
                 },
                 onBlur: (C) => {
                   var T;
-                  h(!1), (T = d.onBlur) == null || T.call(d, C);
+                  m(!1), (T = d.onBlur) == null || T.call(d, C);
                 },
                 onMouseDown: () => {
-                  m || h(!0);
+                  h || m(!0);
                 },
                 ...d,
                 children: [
@@ -2024,9 +2024,9 @@ const os = {
                 "aria-hidden": !0,
                 style: {
                   position: "absolute",
-                  right: pt[t],
+                  right: ft[t],
                   pointerEvents: "none",
-                  color: m ? "var(--lucent-text-disabled)" : "var(--lucent-text-secondary)",
+                  color: h ? "var(--lucent-text-disabled)" : "var(--lucent-text-secondary)",
                   display: "flex",
                   alignItems: "center"
                 },
@@ -2036,10 +2036,10 @@ const os = {
           ]
         }
       ),
-      v && /* @__PURE__ */ n(
+      y && /* @__PURE__ */ n(
         "span",
         {
-          id: `${u}-error`,
+          id: `${p}-error`,
           role: "alert",
           style: {
             fontSize: Ue[t],
@@ -2049,10 +2049,10 @@ const os = {
           children: a
         }
       ),
-      !v && o && /* @__PURE__ */ n(
+      !y && o && /* @__PURE__ */ n(
         "span",
         {
-          id: `${u}-helper`,
+          id: `${p}-helper`,
           style: {
             fontSize: Ue[t],
             color: "var(--lucent-text-secondary)",
@@ -2064,7 +2064,7 @@ const os = {
     ] });
   }
 );
-$t.displayName = "Select";
+Nt.displayName = "Select";
 const is = {
   id: "select",
   name: "Select",
@@ -2212,8 +2212,8 @@ function ss({ children: e, variant: t = "neutral", size: r = "md", onDismiss: o,
           "button",
           {
             type: "button",
-            onClick: a ? void 0 : (p) => {
-              p.stopPropagation(), o == null || o();
+            onClick: a ? void 0 : (u) => {
+              u.stopPropagation(), o == null || o();
             },
             disabled: a,
             "aria-label": "Dismiss",
@@ -2232,11 +2232,11 @@ function ss({ children: e, variant: t = "neutral", size: r = "md", onDismiss: o,
               flexShrink: 0,
               lineHeight: 1
             },
-            onMouseEnter: (p) => {
-              a || (p.currentTarget.style.background = i.dismissHover + "33");
+            onMouseEnter: (u) => {
+              a || (u.currentTarget.style.background = i.dismissHover + "33");
             },
-            onMouseLeave: (p) => {
-              p.currentTarget.style.background = "transparent";
+            onMouseLeave: (u) => {
+              u.currentTarget.style.background = "transparent";
             },
             children: /* @__PURE__ */ n("svg", { width: l.iconSize, height: l.iconSize, viewBox: "0 0 10 10", fill: "none", stroke: "currentColor", strokeWidth: 1.5, strokeLinecap: "round", children: /* @__PURE__ */ n("path", { d: "M2 2L8 8M8 2L2 8" }) })
           }
@@ -2564,9 +2564,9 @@ function Y({
   truncate: s = !1,
   children: c,
   style: d,
-  ...p
+  ...u
 }) {
-  const u = {
+  const p = {
     fontSize: sa[t],
     fontWeight: la[r],
     color: ia[o],
@@ -2581,7 +2581,7 @@ function Y({
     },
     ...d
   };
-  return /* @__PURE__ */ n(e, { style: u, ...p, children: c });
+  return /* @__PURE__ */ n(e, { style: p, ...u, children: c });
 }
 const fs = {
   id: "text",
@@ -2724,11 +2724,11 @@ function hs({
         boxSizing: "border-box",
         ...c
       },
-      onMouseEnter: (p) => {
-        !a && !r && (p.currentTarget.style.background = "var(--lucent-surface-secondary)");
+      onMouseEnter: (u) => {
+        !a && !r && (u.currentTarget.style.background = "var(--lucent-surface-secondary)");
       },
-      onMouseLeave: (p) => {
-        !a && !r && (p.currentTarget.style.background = "transparent");
+      onMouseLeave: (u) => {
+        !a && !r && (u.currentTarget.style.background = "transparent");
       },
       children: [
         o != null && /* @__PURE__ */ n("span", { style: { display: "flex", flexShrink: 0, color: "inherit" }, children: o }),
@@ -2842,14 +2842,14 @@ function ms({
   defaultValue: s,
   disabled: c,
   id: d,
-  onChange: p,
-  style: u,
-  ...v
+  onChange: u,
+  style: p,
+  ...y
 }) {
-  const m = d ?? `lucent-slider-${Math.random().toString(36).slice(2, 7)}`, b = l !== void 0, [h, f] = E(
+  const h = d ?? `lucent-slider-${Math.random().toString(36).slice(2, 7)}`, x = l !== void 0, [m, f] = E(
     s ?? Math.round((o + a) / 2)
-  ), g = b ? l : h, w = `${(g - o) / (a - o) * 100}%`, y = (C) => {
-    b || f(Number(C.target.value)), p == null || p(C);
+  ), g = x ? l : m, v = `${(g - o) / (a - o) * 100}%`, b = (C) => {
+    x || f(Number(C.target.value)), u == null || u(C);
   };
   return /* @__PURE__ */ k(ae, { children: [
     /* @__PURE__ */ n("style", { children: fa }),
@@ -2862,7 +2862,7 @@ function ms({
           gap: "var(--lucent-space-1)",
           width: "100%",
           fontFamily: "var(--lucent-font-family-base)",
-          ...u
+          ...p
         },
         children: [
           (e || t) && /* @__PURE__ */ k(
@@ -2877,7 +2877,7 @@ function ms({
                 e && /* @__PURE__ */ n(
                   "label",
                   {
-                    htmlFor: m,
+                    htmlFor: h,
                     style: {
                       fontSize: "var(--lucent-font-size-sm)",
                       fontWeight: "var(--lucent-font-weight-medium)",
@@ -2905,20 +2905,20 @@ function ms({
             "input",
             {
               type: "range",
-              id: m,
+              id: h,
               className: "lucent-slider",
               min: o,
               max: a,
               step: i,
               disabled: c,
-              value: b ? l : h,
-              onChange: y,
+              value: x ? l : m,
+              onChange: b,
               style: {
                 "--ls-track-h": ua[r],
                 "--ls-thumb": pa[r],
-                "--ls-fill": w
+                "--ls-fill": v
               },
-              ...v
+              ...y
             }
           )
         ]
@@ -3041,13 +3041,13 @@ function vs({
   showCopyButton: i = !0,
   style: l
 }) {
-  var g, w;
-  const s = !!(r != null && r.length), [c, d] = E(0), [p, u] = E(!1), v = s ? ((g = r[c]) == null ? void 0 : g.code) ?? "" : e ?? "", m = s ? (w = r[c]) == null ? void 0 : w.language : t, b = async () => {
+  var g, v;
+  const s = !!(r != null && r.length), [c, d] = E(0), [u, p] = E(!1), y = s ? ((g = r[c]) == null ? void 0 : g.code) ?? "" : e ?? "", h = s ? (v = r[c]) == null ? void 0 : v.language : t, x = async () => {
     try {
-      await navigator.clipboard.writeText(v), u(!0), setTimeout(() => u(!1), ha);
+      await navigator.clipboard.writeText(y), p(!0), setTimeout(() => p(!1), ha);
     } catch {
     }
-  }, h = {
+  }, m = {
     display: "inline-flex",
     alignItems: "center",
     gap: "var(--lucent-space-1)",
@@ -3055,7 +3055,7 @@ function vs({
     border: "1px solid transparent",
     borderRadius: "var(--lucent-radius-md)",
     background: "transparent",
-    color: p ? "var(--lucent-success-default)" : "var(--lucent-text-secondary)",
+    color: u ? "var(--lucent-success-default)" : "var(--lucent-text-secondary)",
     fontFamily: "var(--lucent-font-family-base)",
     fontSize: "var(--lucent-font-size-xs)",
     cursor: "pointer",
@@ -3064,18 +3064,18 @@ function vs({
   }, f = () => /* @__PURE__ */ k(
     "button",
     {
-      onClick: b,
-      "aria-label": p ? "Copied!" : "Copy code",
-      style: h,
-      onMouseEnter: (y) => {
-        p || (y.currentTarget.style.background = "var(--lucent-surface-secondary)", y.currentTarget.style.color = "var(--lucent-text-primary)");
+      onClick: x,
+      "aria-label": u ? "Copied!" : "Copy code",
+      style: m,
+      onMouseEnter: (b) => {
+        u || (b.currentTarget.style.background = "var(--lucent-surface-secondary)", b.currentTarget.style.color = "var(--lucent-text-primary)");
       },
-      onMouseLeave: (y) => {
-        p || (y.currentTarget.style.background = "transparent", y.currentTarget.style.color = "var(--lucent-text-secondary)");
+      onMouseLeave: (b) => {
+        u || (b.currentTarget.style.background = "transparent", b.currentTarget.style.color = "var(--lucent-text-secondary)");
       },
       children: [
-        p ? /* @__PURE__ */ n(ga, {}) : /* @__PURE__ */ n(ma, {}),
-        p ? "Copied!" : "Copy"
+        u ? /* @__PURE__ */ n(ga, {}) : /* @__PURE__ */ n(ma, {}),
+        u ? "Copied!" : "Copy"
       ]
     }
   );
@@ -3099,13 +3099,13 @@ function vs({
               borderBottom: "1px solid var(--lucent-border-default)",
               padding: "0 var(--lucent-space-2)"
             },
-            children: r.map((y, C) => {
+            children: r.map((b, C) => {
               const T = C === c;
               return /* @__PURE__ */ k(
                 "button",
                 {
                   onClick: () => {
-                    d(C), u(!1);
+                    d(C), p(!1);
                   },
                   style: {
                     display: "inline-flex",
@@ -3131,29 +3131,29 @@ function vs({
                     T || (S.currentTarget.style.color = "var(--lucent-text-secondary)");
                   },
                   children: [
-                    y.icon !== void 0 && /* @__PURE__ */ n("span", { style: { display: "inline-flex", alignItems: "center" }, children: y.icon }),
-                    y.label
+                    b.icon !== void 0 && /* @__PURE__ */ n("span", { style: { display: "inline-flex", alignItems: "center" }, children: b.icon }),
+                    b.label
                   ]
                 },
-                y.label
+                b.label
               );
             })
           }
         ),
-        !s && (!!m || i) && /* @__PURE__ */ k(
+        !s && (!!h || i) && /* @__PURE__ */ k(
           "div",
           {
             style: {
               display: "flex",
               alignItems: "center",
-              justifyContent: m ? "space-between" : "flex-end",
+              justifyContent: h ? "space-between" : "flex-end",
               padding: "0 var(--lucent-space-3)",
               height: 36,
               background: "var(--lucent-surface-secondary)",
               borderBottom: "1px solid var(--lucent-border-default)"
             },
             children: [
-              m && /* @__PURE__ */ n(
+              h && /* @__PURE__ */ n(
                 "span",
                 {
                   style: {
@@ -3162,7 +3162,7 @@ function vs({
                     color: "var(--lucent-text-secondary)",
                     letterSpacing: "var(--lucent-letter-spacing-wide)"
                   },
-                  children: m
+                  children: h
                 }
               ),
               i && /* @__PURE__ */ n(f, {})
@@ -3203,7 +3203,7 @@ function vs({
                     fontSize: "var(--lucent-font-size-sm)",
                     color: "var(--lucent-text-primary)"
                   },
-                  children: v
+                  children: y
                 }
               )
             }
@@ -3234,7 +3234,7 @@ function vs({
                       fontSize: "var(--lucent-font-size-sm)",
                       color: "var(--lucent-text-primary)"
                     },
-                    children: v
+                    children: y
                   }
                 ),
                 i && /* @__PURE__ */ n(f, {})
@@ -3513,7 +3513,7 @@ const ys = {
     ariaAttributes: ['scope="col" on th cells'],
     keyboardInteractions: ["Standard browser table navigation"]
   }
-}, ft = {
+}, ht = {
   sm: "calc(var(--lucent-space-8) * 0.5 + 18px)",
   md: "calc(var(--lucent-space-10) * 0.5 + 22px)",
   lg: "calc(var(--lucent-space-12) * 0.5 + 26px)"
@@ -3526,7 +3526,7 @@ const ys = {
   md: "var(--lucent-space-4)",
   lg: "var(--lucent-space-5)"
 };
-function Nt({
+function Wt({
   options: e,
   value: t,
   defaultValue: r,
@@ -3538,39 +3538,39 @@ function Nt({
   style: c
 }) {
   var g;
-  const [d, p] = E(
+  const [d, u] = E(
     r ?? ((g = e[0]) == null ? void 0 : g.value) ?? ""
-  ), u = t !== void 0 ? t : d, v = O(null), [m, b] = E(null), h = O(!1);
-  ie(() => {
-    const w = v.current;
-    if (!w) return;
-    const y = () => {
-      const T = w.querySelector(`[data-sc-value="${u}"]`);
-      T && (b({
+  ), p = t !== void 0 ? t : d, y = O(null), [h, x] = E(null), m = O(!1);
+  se(() => {
+    const v = y.current;
+    if (!v) return;
+    const b = () => {
+      const T = v.querySelector(`[data-sc-value="${p}"]`);
+      T && (x({
         left: T.offsetLeft,
         width: T.offsetWidth,
-        animate: h.current
-      }), h.current = !0);
+        animate: m.current
+      }), m.current = !0);
     };
-    y();
-    const C = new ResizeObserver(y);
-    return C.observe(w), () => C.disconnect();
-  }, [u, e]);
-  const f = (w) => {
-    i || w.disabled || (t === void 0 && p(w.value), o == null || o(w.value));
+    b();
+    const C = new ResizeObserver(b);
+    return C.observe(v), () => C.disconnect();
+  }, [p, e]);
+  const f = (v) => {
+    i || v.disabled || (t === void 0 && u(v.value), o == null || o(v.value));
   };
   return /* @__PURE__ */ k(
     "div",
     {
       id: s,
-      ref: v,
+      ref: y,
       role: "group",
       style: {
         position: "relative",
         display: "flex",
         alignItems: "center",
         width: l ? "100%" : "fit-content",
-        height: ft[a],
+        height: ht[a],
         background: "var(--lucent-surface-secondary)",
         borderRadius: "var(--lucent-radius-lg)",
         padding: 0,
@@ -3579,36 +3579,36 @@ function Nt({
         ...c
       },
       children: [
-        m && /* @__PURE__ */ n(
+        h && /* @__PURE__ */ n(
           "span",
           {
             "aria-hidden": !0,
             style: {
               position: "absolute",
               top: 3,
-              left: m.left + 3,
-              width: m.width - 6,
+              left: h.left + 3,
+              width: h.width - 6,
               height: "calc(100% - 6px)",
               background: "var(--lucent-surface)",
               borderRadius: "var(--lucent-radius-lg)",
               boxShadow: "var(--lucent-shadow-sm)",
-              transition: m.animate ? "left var(--lucent-duration-base) cubic-bezier(0.34, 1.56, 0.64, 1), width var(--lucent-duration-base) cubic-bezier(0.22, 1, 0.36, 1)" : "none",
+              transition: h.animate ? "left var(--lucent-duration-base) cubic-bezier(0.34, 1.56, 0.64, 1), width var(--lucent-duration-base) cubic-bezier(0.22, 1, 0.36, 1)" : "none",
               zIndex: 0,
               pointerEvents: "none"
             }
           }
         ),
-        e.map((w) => {
-          const y = w.value === u, C = i || !!w.disabled;
+        e.map((v) => {
+          const b = v.value === p, C = i || !!v.disabled;
           return /* @__PURE__ */ n(
             "button",
             {
-              "data-sc-value": w.value,
+              "data-sc-value": v.value,
               type: "button",
               role: "radio",
-              "aria-checked": y,
+              "aria-checked": b,
               disabled: C,
-              onClick: () => f(w),
+              onClick: () => f(v),
               style: {
                 position: "relative",
                 zIndex: 1,
@@ -3617,12 +3617,12 @@ function Nt({
                 justifyContent: "center",
                 gap: "var(--lucent-space-1)",
                 flex: 1,
-                height: ft[a],
+                height: ht[a],
                 padding: `0 ${Ta[a]}`,
                 fontSize: Sa[a],
                 fontFamily: "var(--lucent-font-family-base)",
-                fontWeight: y ? "var(--lucent-font-weight-medium)" : "var(--lucent-font-weight-regular)",
-                color: C ? "var(--lucent-text-disabled)" : y ? "var(--lucent-text-primary)" : "var(--lucent-text-secondary)",
+                fontWeight: b ? "var(--lucent-font-weight-medium)" : "var(--lucent-font-weight-regular)",
+                color: C ? "var(--lucent-text-disabled)" : b ? "var(--lucent-text-primary)" : "var(--lucent-text-secondary)",
                 background: "transparent",
                 border: "none",
                 borderRadius: "var(--lucent-radius-lg)",
@@ -3640,16 +3640,16 @@ function Nt({
               onBlur: (T) => {
                 T.currentTarget.style.boxShadow = "";
               },
-              children: w.label
+              children: v.label
             },
-            w.value
+            v.value
           );
         })
       ]
     }
   );
 }
-Nt.displayName = "SegmentedControl";
+Wt.displayName = "SegmentedControl";
 const Ca = {
   xs: 12,
   sm: 16,
@@ -3664,7 +3664,7 @@ const Ca = {
   lg: "var(--lucent-radius-md)",
   xl: "var(--lucent-radius-lg)",
   "2xl": "var(--lucent-radius-lg)"
-}, ht = "inset 0 0 0 1px rgba(0,0,0,0.2)", mt = "inset 0 0 0 2px rgba(0,0,0,0.5)", Ma = "inset 0 0 0 1px rgba(0,0,0,0.2), 0 0 0 3px var(--lucent-accent-subtle)";
+}, mt = "inset 0 0 0 1px rgba(0,0,0,0.2)", gt = "inset 0 0 0 2px rgba(0,0,0,0.5)", Ma = "inset 0 0 0 1px rgba(0,0,0,0.2), 0 0 0 3px var(--lucent-accent-subtle)";
 function Da(e) {
   return {
     backgroundImage: [
@@ -3690,38 +3690,38 @@ const qe = ge(({
   onFocus: s,
   onBlur: c,
   onClick: d,
-  ...p
-}, u) => {
-  const v = Ca[t], m = r === "circle" ? "50%" : Ia[t];
+  ...u
+}, p) => {
+  const y = Ca[t], h = r === "circle" ? "50%" : Ia[t];
   return /* @__PURE__ */ n(
     "button",
     {
-      ref: u,
+      ref: p,
       type: "button",
       disabled: i,
       onClick: d,
       style: {
-        width: v,
-        height: v,
+        width: y,
+        height: y,
         flexShrink: 0,
         ...o ? Da(e) : { background: e },
         border: "none",
-        borderRadius: m,
+        borderRadius: h,
         cursor: i ? "not-allowed" : d ? "pointer" : "default",
         padding: 0,
         outline: "none",
         opacity: i ? 0.4 : 1,
-        boxShadow: a ? mt : ht,
+        boxShadow: a ? gt : mt,
         transition: "box-shadow var(--lucent-duration-fast) var(--lucent-easing-default)",
         ...l
       },
-      onFocus: (b) => {
-        i || (b.currentTarget.style.boxShadow = Ma), s == null || s(b);
+      onFocus: (x) => {
+        i || (x.currentTarget.style.boxShadow = Ma), s == null || s(x);
       },
-      onBlur: (b) => {
-        b.currentTarget.style.boxShadow = a ? mt : ht, c == null || c(b);
+      onBlur: (x) => {
+        x.currentTarget.style.boxShadow = a ? gt : mt, c == null || c(x);
       },
-      ...p
+      ...u
     }
   );
 });
@@ -3731,31 +3731,31 @@ function Fe(e, t, r) {
 }
 function za(e, t, r) {
   const o = t / 100, a = r / 100, i = a * o, l = i * (1 - Math.abs(e / 60 % 2 - 1)), s = a - i;
-  let c = 0, d = 0, p = 0;
-  return e < 60 ? (c = i, d = l) : e < 120 ? (c = l, d = i) : e < 180 ? (d = i, p = l) : e < 240 ? (d = l, p = i) : e < 300 ? (c = l, p = i) : (c = i, p = l), { r: Math.round((c + s) * 255), g: Math.round((d + s) * 255), b: Math.round((p + s) * 255) };
+  let c = 0, d = 0, u = 0;
+  return e < 60 ? (c = i, d = l) : e < 120 ? (c = l, d = i) : e < 180 ? (d = i, u = l) : e < 240 ? (d = l, u = i) : e < 300 ? (c = l, u = i) : (c = i, u = l), { r: Math.round((c + s) * 255), g: Math.round((d + s) * 255), b: Math.round((u + s) * 255) };
 }
 function Ea(e, t, r) {
-  const o = e / 255, a = t / 255, i = r / 255, l = Math.max(o, a, i), s = Math.min(o, a, i), c = l - s, d = l, p = l === 0 ? 0 : c / l;
-  let u = 0;
-  return c !== 0 && (l === o ? u = ((a - i) / c + (a < i ? 6 : 0)) / 6 : l === a ? u = ((i - o) / c + 2) / 6 : u = ((o - a) / c + 4) / 6), { h: Math.round(u * 360), s: Math.round(p * 100), v: Math.round(d * 100) };
+  const o = e / 255, a = t / 255, i = r / 255, l = Math.max(o, a, i), s = Math.min(o, a, i), c = l - s, d = l, u = l === 0 ? 0 : c / l;
+  let p = 0;
+  return c !== 0 && (l === o ? p = ((a - i) / c + (a < i ? 6 : 0)) / 6 : l === a ? p = ((i - o) / c + 2) / 6 : p = ((o - a) / c + 4) / 6), { h: Math.round(p * 360), s: Math.round(u * 100), v: Math.round(d * 100) };
 }
 function Aa(e, t, r) {
   const o = e / 255, a = t / 255, i = r / 255, l = Math.max(o, a, i), s = Math.min(o, a, i), c = (l + s) / 2;
   if (l === s) return { h: 0, s: 0, l: Math.round(c * 100) };
-  const d = l - s, p = c > 0.5 ? d / (2 - l - s) : d / (l + s);
-  let u = 0;
-  return l === o ? u = ((a - i) / d + (a < i ? 6 : 0)) / 6 : l === a ? u = ((i - o) / d + 2) / 6 : u = ((o - a) / d + 4) / 6, { h: Math.round(u * 360), s: Math.round(p * 100), l: Math.round(c * 100) };
+  const d = l - s, u = c > 0.5 ? d / (2 - l - s) : d / (l + s);
+  let p = 0;
+  return l === o ? p = ((a - i) / d + (a < i ? 6 : 0)) / 6 : l === a ? p = ((i - o) / d + 2) / 6 : p = ((o - a) / d + 4) / 6, { h: Math.round(p * 360), s: Math.round(u * 100), l: Math.round(c * 100) };
 }
 function Re(e, t, r) {
   const o = t / 100, a = r / 100, i = (1 - Math.abs(2 * a - 1)) * o, l = i * (1 - Math.abs(e / 60 % 2 - 1)), s = a - i / 2;
-  let c = 0, d = 0, p = 0;
-  return e < 60 ? (c = i, d = l) : e < 120 ? (c = l, d = i) : e < 180 ? (d = i, p = l) : e < 240 ? (d = l, p = i) : e < 300 ? (c = l, p = i) : (c = i, p = l), { r: Math.round((c + s) * 255), g: Math.round((d + s) * 255), b: Math.round((p + s) * 255) };
+  let c = 0, d = 0, u = 0;
+  return e < 60 ? (c = i, d = l) : e < 120 ? (c = l, d = i) : e < 180 ? (d = i, u = l) : e < 240 ? (d = l, u = i) : e < 300 ? (c = l, u = i) : (c = i, u = l), { r: Math.round((c + s) * 255), g: Math.round((d + s) * 255), b: Math.round((u + s) * 255) };
 }
 function it(e) {
   const t = e.replace("#", "");
   return t.length === 3 ? `#${t[0]}${t[0]}${t[1]}${t[1]}${t[2]}${t[2]}` : t.length === 6 || t.length === 8 ? `#${t}` : "#000000";
 }
-function Wt(e) {
+function Ot(e) {
   const t = it(e);
   return {
     r: parseInt(t.slice(1, 3), 16),
@@ -3768,20 +3768,20 @@ function et({ r: e, g: t, b: r, a: o }) {
   const a = (l) => Fe(Math.round(l), 0, 255).toString(16).padStart(2, "0"), i = `#${a(e)}${a(t)}${a(r)}`;
   return o < 1 ? `${i}${a(Math.round(o * 255))}` : i;
 }
-function Ot({ h: e, s: t, v: r, a: o }) {
+function Ht({ h: e, s: t, v: r, a: o }) {
   return { ...za(e, t, r), a: o };
 }
 function oe({ r: e, g: t, b: r, a: o }) {
   return { ...Ea(e, t, r), a: o };
 }
 function Te(e) {
-  return et(Ot(e));
+  return et(Ht(e));
 }
 function Ce(e) {
   const t = e.trim();
   if (t.startsWith("#")) {
     const a = it(t);
-    return /^#[0-9a-f]{6}([0-9a-f]{2})?$/i.test(a) ? Wt(a) : null;
+    return /^#[0-9a-f]{6}([0-9a-f]{2})?$/i.test(a) ? Ot(a) : null;
   }
   const r = t.match(/^rgba?\(\s*(\d{1,3})\s*,\s*(\d{1,3})\s*,\s*(\d{1,3})(?:\s*,\s*([\d.]+))?\s*\)$/);
   if (r) {
@@ -3816,21 +3816,21 @@ const Ba = [
   "linear-gradient(45deg, transparent 75%, #c0c0c0 75%)",
   "linear-gradient(-45deg, transparent 75%, #c0c0c0 75%)"
 ].join(", ");
-function gt({ value: e, min: t, max: r, onChange: o, trackStyle: a, formatTooltip: i }) {
-  const l = O(null), [s, c] = E(!1), d = ee((u) => {
-    const v = l.current.getBoundingClientRect(), m = Fe((u.clientX - v.left) / v.width, 0, 1);
-    o(t + m * (r - t));
-  }, [t, r, o]), p = (e - t) / (r - t) * 100;
+function vt({ value: e, min: t, max: r, onChange: o, trackStyle: a, formatTooltip: i }) {
+  const l = O(null), [s, c] = E(!1), d = ee((p) => {
+    const y = l.current.getBoundingClientRect(), h = Fe((p.clientX - y.left) / y.width, 0, 1);
+    o(t + h * (r - t));
+  }, [t, r, o]), u = (e - t) / (r - t) * 100;
   return /* @__PURE__ */ n(
     "div",
     {
       ref: l,
       style: { position: "relative", height: 12, borderRadius: 6, cursor: "crosshair", userSelect: "none", ...a },
-      onPointerDown: (u) => {
-        u.currentTarget.setPointerCapture(u.pointerId), c(!0), d(u);
+      onPointerDown: (p) => {
+        p.currentTarget.setPointerCapture(p.pointerId), c(!0), d(p);
       },
-      onPointerMove: (u) => {
-        u.buttons > 0 && d(u);
+      onPointerMove: (p) => {
+        p.buttons > 0 && d(p);
       },
       onPointerUp: () => c(!1),
       onPointerCancel: () => c(!1),
@@ -3839,7 +3839,7 @@ function gt({ value: e, min: t, max: r, onChange: o, trackStyle: a, formatToolti
         {
           style: {
             position: "absolute",
-            left: `${p}%`,
+            left: `${u}%`,
             top: "50%",
             transform: "translate(-50%, -50%)",
             width: 14,
@@ -3892,48 +3892,48 @@ function La({
   style: d
 }) {
   var R, H;
-  const p = o === "sm" ? 24 : 40, u = ke(), v = c ?? u, [m, b] = E(!1), [h, f] = E("hex"), [g, w] = E(0), [y, C] = E(() => {
-    const x = e ? Ce(e) ?? { r: 0, g: 0, b: 0, a: 1 } : { r: 0, g: 0, b: 0, a: 1 };
-    return oe(x);
-  }), [T, S] = E(() => Te(y).slice(1).toUpperCase()), L = O(null), I = O(null), A = O(null), [P, $] = E({ top: 0, left: 0 });
-  ie(() => {
-    if (!m || !L.current) return;
-    const x = L.current.getBoundingClientRect();
-    let B = x.left;
-    const V = x.bottom + 8;
+  const u = o === "sm" ? 24 : 40, p = ke(), y = c ?? p, [h, x] = E(!1), [m, f] = E("hex"), [g, v] = E(0), [b, C] = E(() => {
+    const w = e ? Ce(e) ?? { r: 0, g: 0, b: 0, a: 1 } : { r: 0, g: 0, b: 0, a: 1 };
+    return oe(w);
+  }), [T, S] = E(() => Te(b).slice(1).toUpperCase()), L = O(null), I = O(null), A = O(null), [P, $] = E({ top: 0, left: 0 });
+  se(() => {
+    if (!h || !L.current) return;
+    const w = L.current.getBoundingClientRect();
+    let B = w.left;
+    const V = w.bottom + 8;
     if (A.current) {
       const K = A.current.offsetWidth;
-      B + K > window.innerWidth && (B = x.right - K);
+      B + K > window.innerWidth && (B = w.right - K);
     }
     $({ top: V, left: B });
-  }, [m]), G(() => {
+  }, [h]), G(() => {
     if (!e) return;
-    const x = Ce(e);
-    x && (C(oe(x)), S(et(x).slice(1).toUpperCase()));
+    const w = Ce(e);
+    w && (C(oe(w)), S(et(w).slice(1).toUpperCase()));
   }, [e]), G(() => {
-    if (!m) return;
-    const x = (B) => {
+    if (!h) return;
+    const w = (B) => {
       var K, j;
       const V = B.target;
-      (K = L.current) != null && K.contains(V) || (j = A.current) != null && j.contains(V) || b(!1);
+      (K = L.current) != null && K.contains(V) || (j = A.current) != null && j.contains(V) || x(!1);
     };
-    return document.addEventListener("mousedown", x), () => document.removeEventListener("mousedown", x);
-  }, [m]);
-  const M = ee((x) => {
-    C(x);
-    const B = Te(x);
+    return document.addEventListener("mousedown", w), () => document.removeEventListener("mousedown", w);
+  }, [h]);
+  const M = ee((w) => {
+    C(w);
+    const B = Te(w);
     S(B.slice(1).toUpperCase()), t == null || t(B);
-  }, [t]), N = ee((x) => {
-    const B = I.current.getBoundingClientRect(), V = Math.round(Fe((x.clientX - B.left) / B.width, 0, 1) * 100), K = Math.round((1 - Fe((x.clientY - B.top) / B.height, 0, 1)) * 100);
-    M({ ...y, s: V, v: K });
-  }, [y, M]), q = ee(async () => {
+  }, [t]), N = ee((w) => {
+    const B = I.current.getBoundingClientRect(), V = Math.round(Fe((w.clientX - B.left) / B.width, 0, 1) * 100), K = Math.round((1 - Fe((w.clientY - B.top) / B.height, 0, 1)) * 100);
+    M({ ...b, s: V, v: K });
+  }, [b, M]), q = ee(async () => {
     if ("EyeDropper" in window)
       try {
-        const x = await new window.EyeDropper().open(), B = Ce(x.sRGBHex);
+        const w = await new window.EyeDropper().open(), B = Ce(w.sRGBHex);
         B && M(oe(B));
       } catch {
       }
-  }, [M]), W = Ot(y), U = Aa(W.r, W.g, W.b), J = Te(y), Z = Te({ ...y, a: 1 }), F = Math.round(y.a * 100), z = [
+  }, [M]), W = Ht(b), U = Aa(W.r, W.g, W.b), J = Te(b), Z = Te({ ...b, a: 1 }), F = Math.round(b.a * 100), z = [
     { id: "hex", label: "Hex" },
     { id: "rgb", label: "RGB" },
     { id: "hsl", label: "HSL" },
@@ -3953,7 +3953,7 @@ function La({
         r && !a && /* @__PURE__ */ n(
           "label",
           {
-            htmlFor: `${v}-swatch`,
+            htmlFor: `${y}-swatch`,
             style: {
               fontSize: o === "sm" ? "var(--lucent-font-size-xs)" : "var(--lucent-font-size-sm)",
               fontWeight: "var(--lucent-font-weight-medium)",
@@ -3966,26 +3966,26 @@ function La({
         /* @__PURE__ */ n(
           qe,
           {
-            id: `${v}-swatch`,
-            color: `rgba(${W.r},${W.g},${W.b},${y.a})`,
+            id: `${y}-swatch`,
+            color: `rgba(${W.r},${W.g},${W.b},${b.a})`,
             shape: "square",
             showCheckerboard: !0,
             disabled: i,
-            onClick: () => b((x) => !x),
-            "aria-expanded": m,
+            onClick: () => x((w) => !w),
+            "aria-expanded": h,
             "aria-haspopup": "dialog",
             style: {
-              width: p,
-              height: p,
+              width: u,
+              height: u,
               borderRadius: o === "sm" ? "var(--lucent-radius-md)" : "var(--lucent-radius-lg)",
-              boxShadow: m ? "inset 0 0 0 2px var(--lucent-focus-ring), 0 0 0 3px var(--lucent-accent-subtle)" : "inset 0 0 0 1px rgba(0,0,0,0.2)"
+              boxShadow: h ? "inset 0 0 0 2px var(--lucent-focus-ring), 0 0 0 3px var(--lucent-accent-subtle)" : "inset 0 0 0 1px rgba(0,0,0,0.2)"
             }
           }
         ),
         r && a && /* @__PURE__ */ n(
           "label",
           {
-            htmlFor: `${v}-swatch`,
+            htmlFor: `${y}-swatch`,
             style: {
               fontSize: o === "sm" ? "var(--lucent-font-size-xs)" : "var(--lucent-font-size-sm)",
               fontWeight: "var(--lucent-font-weight-medium)",
@@ -3996,7 +3996,7 @@ function La({
             children: r
           }
         ),
-        m && pe(
+        h && pe(
           /* @__PURE__ */ k(
             "div",
             {
@@ -4027,24 +4027,24 @@ function La({
                     style: {
                       position: "relative",
                       height: 160,
-                      background: `hsl(${y.h}, 100%, 50%)`,
+                      background: `hsl(${b.h}, 100%, 50%)`,
                       cursor: "crosshair",
                       userSelect: "none",
                       flexShrink: 0
                     },
-                    onPointerDown: (x) => {
-                      x.currentTarget.setPointerCapture(x.pointerId), N(x);
+                    onPointerDown: (w) => {
+                      w.currentTarget.setPointerCapture(w.pointerId), N(w);
                     },
-                    onPointerMove: (x) => {
-                      x.buttons > 0 && N(x);
+                    onPointerMove: (w) => {
+                      w.buttons > 0 && N(w);
                     },
                     children: [
                       /* @__PURE__ */ n("div", { style: { position: "absolute", inset: 0, background: "linear-gradient(to right, #fff, transparent)" } }),
                       /* @__PURE__ */ n("div", { style: { position: "absolute", inset: 0, background: "linear-gradient(to bottom, transparent, #000)" } }),
                       /* @__PURE__ */ n("div", { style: {
                         position: "absolute",
-                        left: `${y.s}%`,
-                        top: `${100 - y.v}%`,
+                        left: `${b.s}%`,
+                        top: `${100 - b.v}%`,
                         transform: "translate(-50%, -50%)",
                         width: 14,
                         height: 14,
@@ -4061,7 +4061,7 @@ function La({
                     /* @__PURE__ */ n(
                       qe,
                       {
-                        color: `rgba(${W.r},${W.g},${W.b},${y.a})`,
+                        color: `rgba(${W.r},${W.g},${W.b},${b.a})`,
                         shape: "square",
                         showCheckerboard: !0,
                         style: { width: 44, height: 44, borderRadius: 8 }
@@ -4069,14 +4069,14 @@ function La({
                     ),
                     /* @__PURE__ */ k("div", { style: { flex: 1, display: "flex", flexDirection: "column", gap: 8 }, children: [
                       /* @__PURE__ */ n(
-                        gt,
+                        vt,
                         {
-                          value: y.h,
+                          value: b.h,
                           min: 0,
                           max: 360,
-                          onChange: (x) => M({ ...y, h: Math.round(x) }),
+                          onChange: (w) => M({ ...b, h: Math.round(w) }),
                           trackStyle: { background: "linear-gradient(to right, #f00 0%, #ff0 17%, #0f0 33%, #0ff 50%, #00f 67%, #f0f 83%, #f00 100%)" },
-                          formatTooltip: (x) => `${Math.round(x)}°`
+                          formatTooltip: (w) => `${Math.round(w)}°`
                         }
                       ),
                       /* @__PURE__ */ k("div", { style: { position: "relative", borderRadius: 6, overflow: "hidden" }, children: [
@@ -4090,29 +4090,29 @@ function La({
                         } }),
                         /* @__PURE__ */ n("div", { style: { position: "absolute", inset: 0, background: `linear-gradient(to right, transparent, ${Z})` } }),
                         /* @__PURE__ */ n(
-                          gt,
+                          vt,
                           {
-                            value: y.a,
+                            value: b.a,
                             min: 0,
                             max: 1,
-                            onChange: (x) => M({ ...y, a: Math.round(x * 100) / 100 }),
+                            onChange: (w) => M({ ...b, a: Math.round(w * 100) / 100 }),
                             trackStyle: { background: "transparent", position: "relative", zIndex: 1 },
-                            formatTooltip: (x) => `${Math.round(x * 100)}%`
+                            formatTooltip: (w) => `${Math.round(w * 100)}%`
                           }
                         )
                       ] })
                     ] })
                   ] }),
                   /* @__PURE__ */ n(
-                    Nt,
+                    Wt,
                     {
                       size: "sm",
-                      value: h,
-                      onChange: (x) => f(x),
-                      options: z.map(({ id: x, label: B }) => ({ value: x, label: B }))
+                      value: m,
+                      onChange: (w) => f(w),
+                      options: z.map(({ id: w, label: B }) => ({ value: w, label: B }))
                     }
                   ),
-                  h === "hex" && /* @__PURE__ */ k("div", { style: { display: "flex", gap: 6, alignItems: "center" }, children: [
+                  m === "hex" && /* @__PURE__ */ k("div", { style: { display: "flex", gap: 6, alignItems: "center" }, children: [
                     /* @__PURE__ */ n(
                       Le,
                       {
@@ -4131,8 +4131,8 @@ function La({
                         size: "sm",
                         prefix: "#",
                         value: T,
-                        onChange: (x) => {
-                          const B = x.target.value.replace("#", "");
+                        onChange: (w) => {
+                          const B = w.target.value.replace("#", "");
                           S(B.toUpperCase());
                           const V = Ce(`#${B}`);
                           if (V) {
@@ -4155,59 +4155,59 @@ function La({
                         value: F,
                         min: 0,
                         max: 100,
-                        onChange: (x) => {
-                          const B = +x.target.value;
-                          !isNaN(B) && B >= 0 && B <= 100 && M({ ...y, a: B / 100 });
+                        onChange: (w) => {
+                          const B = +w.target.value;
+                          !isNaN(B) && B >= 0 && B <= 100 && M({ ...b, a: B / 100 });
                         },
                         className: "lucent-cp-field",
                         style: { width: 68, flexShrink: 0 }
                       }
                     )
                   ] }),
-                  h === "rgb" && /* @__PURE__ */ n("div", { style: { display: "flex", gap: 6 }, children: [
-                    { label: "R", val: W.r, max: 255, fn: (x) => M(oe({ ...W, r: x })) },
-                    { label: "G", val: W.g, max: 255, fn: (x) => M(oe({ ...W, g: x })) },
-                    { label: "B", val: W.b, max: 255, fn: (x) => M(oe({ ...W, b: x })) },
-                    { label: "A", val: F, max: 100, fn: (x) => M({ ...y, a: x / 100 }) }
-                  ].map(({ label: x, val: B, max: V, fn: K }) => /* @__PURE__ */ n(de, { size: "sm", type: "number", prefix: x, value: B, min: 0, max: V, onChange: (j) => {
+                  m === "rgb" && /* @__PURE__ */ n("div", { style: { display: "flex", gap: 6 }, children: [
+                    { label: "R", val: W.r, max: 255, fn: (w) => M(oe({ ...W, r: w })) },
+                    { label: "G", val: W.g, max: 255, fn: (w) => M(oe({ ...W, g: w })) },
+                    { label: "B", val: W.b, max: 255, fn: (w) => M(oe({ ...W, b: w })) },
+                    { label: "A", val: F, max: 100, fn: (w) => M({ ...b, a: w / 100 }) }
+                  ].map(({ label: w, val: B, max: V, fn: K }) => /* @__PURE__ */ n(de, { size: "sm", type: "number", prefix: w, value: B, min: 0, max: V, onChange: (j) => {
                     const _ = +j.target.value;
                     !isNaN(_) && _ >= 0 && _ <= V && K(_);
-                  }, className: "lucent-cp-field", style: { flex: 1 } }, x)) }),
-                  h === "hsl" && /* @__PURE__ */ n("div", { style: { display: "flex", gap: 6 }, children: [
-                    { label: "H", val: U.h, max: 360, fn: (x) => {
-                      const { r: B, g: V, b: K } = Re(x, U.s, U.l);
-                      M(oe({ r: B, g: V, b: K, a: y.a }));
+                  }, className: "lucent-cp-field", style: { flex: 1 } }, w)) }),
+                  m === "hsl" && /* @__PURE__ */ n("div", { style: { display: "flex", gap: 6 }, children: [
+                    { label: "H", val: U.h, max: 360, fn: (w) => {
+                      const { r: B, g: V, b: K } = Re(w, U.s, U.l);
+                      M(oe({ r: B, g: V, b: K, a: b.a }));
                     } },
-                    { label: "S", val: U.s, max: 100, fn: (x) => {
-                      const { r: B, g: V, b: K } = Re(U.h, x, U.l);
-                      M(oe({ r: B, g: V, b: K, a: y.a }));
+                    { label: "S", val: U.s, max: 100, fn: (w) => {
+                      const { r: B, g: V, b: K } = Re(U.h, w, U.l);
+                      M(oe({ r: B, g: V, b: K, a: b.a }));
                     } },
-                    { label: "L", val: U.l, max: 100, fn: (x) => {
-                      const { r: B, g: V, b: K } = Re(U.h, U.s, x);
-                      M(oe({ r: B, g: V, b: K, a: y.a }));
+                    { label: "L", val: U.l, max: 100, fn: (w) => {
+                      const { r: B, g: V, b: K } = Re(U.h, U.s, w);
+                      M(oe({ r: B, g: V, b: K, a: b.a }));
                     } },
-                    { label: "A", val: F, max: 100, fn: (x) => M({ ...y, a: x / 100 }) }
-                  ].map(({ label: x, val: B, max: V, fn: K }) => /* @__PURE__ */ n(de, { size: "sm", type: "number", prefix: x, value: B, min: 0, max: V, onChange: (j) => {
+                    { label: "A", val: F, max: 100, fn: (w) => M({ ...b, a: w / 100 }) }
+                  ].map(({ label: w, val: B, max: V, fn: K }) => /* @__PURE__ */ n(de, { size: "sm", type: "number", prefix: w, value: B, min: 0, max: V, onChange: (j) => {
                     const _ = +j.target.value;
                     !isNaN(_) && _ >= 0 && _ <= V && K(_);
-                  }, className: "lucent-cp-field", style: { flex: 1 } }, x)) }),
-                  h === "hsb" && /* @__PURE__ */ n("div", { style: { display: "flex", gap: 6 }, children: [
-                    { label: "H", val: y.h, max: 360, fn: (x) => M({ ...y, h: x }) },
-                    { label: "S", val: y.s, max: 100, fn: (x) => M({ ...y, s: x }) },
-                    { label: "B", val: y.v, max: 100, fn: (x) => M({ ...y, v: x }) },
-                    { label: "A", val: F, max: 100, fn: (x) => M({ ...y, a: x / 100 }) }
-                  ].map(({ label: x, val: B, max: V, fn: K }) => /* @__PURE__ */ n(de, { size: "sm", type: "number", prefix: x, value: B, min: 0, max: V, onChange: (j) => {
+                  }, className: "lucent-cp-field", style: { flex: 1 } }, w)) }),
+                  m === "hsb" && /* @__PURE__ */ n("div", { style: { display: "flex", gap: 6 }, children: [
+                    { label: "H", val: b.h, max: 360, fn: (w) => M({ ...b, h: w }) },
+                    { label: "S", val: b.s, max: 100, fn: (w) => M({ ...b, s: w }) },
+                    { label: "B", val: b.v, max: 100, fn: (w) => M({ ...b, v: w }) },
+                    { label: "A", val: F, max: 100, fn: (w) => M({ ...b, a: w / 100 }) }
+                  ].map(({ label: w, val: B, max: V, fn: K }) => /* @__PURE__ */ n(de, { size: "sm", type: "number", prefix: w, value: B, min: 0, max: V, onChange: (j) => {
                     const _ = +j.target.value;
                     !isNaN(_) && _ >= 0 && _ <= V && K(_);
-                  }, className: "lucent-cp-field", style: { flex: 1 } }, x)) }),
+                  }, className: "lucent-cp-field", style: { flex: 1 } }, w)) }),
                   l.length > 0 && /* @__PURE__ */ k("div", { style: { display: "flex", flexDirection: "column", gap: 8 }, children: [
                     l.length > 1 && /* @__PURE__ */ n(
-                      $t,
+                      Nt,
                       {
                         size: "sm",
                         value: String(g),
-                        onChange: (x) => w(Number(x.target.value)),
-                        options: l.map((x, B) => ({ value: String(B), label: x.label }))
+                        onChange: (w) => v(Number(w.target.value)),
+                        options: l.map((w, B) => ({ value: String(B), label: w.label }))
                       }
                     ),
                     l.length === 1 && /* @__PURE__ */ n("span", { style: {
@@ -4216,16 +4216,16 @@ function La({
                       color: "var(--lucent-text-secondary)",
                       fontFamily: "var(--lucent-font-family-base)"
                     }, children: (R = l[0]) == null ? void 0 : R.label }),
-                    /* @__PURE__ */ n("div", { style: { display: "flex", gap: 6, flexWrap: "wrap" }, children: (((H = l[g]) == null ? void 0 : H.colors) ?? []).map((x) => {
-                      const B = it(x).toLowerCase() === J.slice(0, 7).toLowerCase();
+                    /* @__PURE__ */ n("div", { style: { display: "flex", gap: 6, flexWrap: "wrap" }, children: (((H = l[g]) == null ? void 0 : H.colors) ?? []).map((w) => {
+                      const B = it(w).toLowerCase() === J.slice(0, 7).toLowerCase();
                       return /* @__PURE__ */ n(
                         qe,
                         {
-                          color: x,
+                          color: w,
                           selected: B,
-                          onClick: () => M(oe(Wt(x)))
+                          onClick: () => M(oe(Ot(w)))
                         },
-                        x
+                        w
                       );
                     }) })
                   ] })
@@ -4799,7 +4799,7 @@ function Ms({
   label: l,
   style: s
 }) {
-  const c = Math.max(0, Math.min(e, t)), d = t > 0 ? c / t * 100 : 0, p = Ha(c, t, r, a, i), u = Wa[o], v = Oa[p], m = l === !0 ? `${Math.round(d)}%` : l || null;
+  const c = Math.max(0, Math.min(e, t)), d = t > 0 ? c / t * 100 : 0, u = Ha(c, t, r, a, i), p = Wa[o], y = Oa[u], h = l === !0 ? `${Math.round(d)}%` : l || null;
   return /* @__PURE__ */ k(
     "div",
     {
@@ -4820,8 +4820,8 @@ function Ms({
             "aria-valuemax": t,
             style: {
               flex: 1,
-              height: u.height,
-              borderRadius: u.radius,
+              height: p.height,
+              borderRadius: p.radius,
               background: "var(--lucent-surface-secondary)",
               overflow: "hidden"
             },
@@ -4831,15 +4831,15 @@ function Ms({
                 style: {
                   width: `${d}%`,
                   height: "100%",
-                  borderRadius: u.radius,
-                  background: v,
+                  borderRadius: p.radius,
+                  background: y,
                   transition: "width var(--lucent-duration-base) var(--lucent-easing-default), background var(--lucent-duration-base) var(--lucent-easing-default)"
                 }
               }
             )
           }
         ),
-        m != null && /* @__PURE__ */ n(
+        h != null && /* @__PURE__ */ n(
           "span",
           {
             style: {
@@ -4849,7 +4849,7 @@ function Ms({
               whiteSpace: "nowrap",
               flexShrink: 0
             },
-            children: m
+            children: h
           }
         )
       ]
@@ -4914,15 +4914,15 @@ const Ds = {
 function _a(e, t, r) {
   const o = t.offsetWidth, a = t.offsetHeight, i = window.innerWidth, l = window.innerHeight;
   let s = 0, c = 0, d = r;
-  const p = {
+  const u = {
     top: e.top - a - Ie,
     bottom: e.bottom + Ie,
     left: e.left - o - Ie,
     right: e.right + Ie
   };
-  d.startsWith("bottom") ? (s = p.bottom, s + a > l && p.top >= 0 && (s = p.top, d = d.replace("bottom", "top"))) : d.startsWith("top") ? (s = p.top, s < 0 && p.bottom + a <= l && (s = p.bottom, d = d.replace("top", "bottom"))) : d === "left" ? (s = e.top + e.height / 2 - a / 2, c = p.left, c < 0 && p.right + o <= i && (c = p.right, d = "right")) : d === "right" && (s = e.top + e.height / 2 - a / 2, c = p.right, c + o > i && p.left >= 0 && (c = p.left, d = "left")), (d.startsWith("top") || d.startsWith("bottom")) && (d.endsWith("-start") ? c = e.left : d.endsWith("-end") ? c = e.right - o : c = e.left + e.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 d.startsWith("top") ? u = d.endsWith("-end") ? "bottom right" : d.endsWith("-start") ? "bottom left" : "bottom center" : d.startsWith("bottom") ? u = d.endsWith("-end") ? "top right" : d.endsWith("-start") ? "top left" : "top center" : d === "left" ? u = "center right" : d === "right" && (u = "center left"), { top: s, left: c, transformOrigin: u };
+  d.startsWith("bottom") ? (s = u.bottom, s + a > l && u.top >= 0 && (s = u.top, d = d.replace("bottom", "top"))) : d.startsWith("top") ? (s = u.top, s < 0 && u.bottom + a <= l && (s = u.bottom, d = d.replace("top", "bottom"))) : d === "left" ? (s = e.top + e.height / 2 - a / 2, c = u.left, c < 0 && u.right + o <= i && (c = u.right, d = "right")) : d === "right" && (s = e.top + e.height / 2 - a / 2, c = u.right, c + o > i && u.left >= 0 && (c = u.left, d = "left")), (d.startsWith("top") || d.startsWith("bottom")) && (d.endsWith("-start") ? c = e.left : d.endsWith("-end") ? c = e.right - o : c = e.left + e.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 p = "top left";
+  return d.startsWith("top") ? p = d.endsWith("-end") ? "bottom right" : d.endsWith("-start") ? "bottom left" : "bottom center" : d.startsWith("bottom") ? p = d.endsWith("-end") ? "top right" : d.endsWith("-start") ? "top left" : "top center" : d === "left" ? p = "center right" : d === "right" && (p = "center left"), { top: s, left: c, transformOrigin: p };
 }
 function Ya({
   onSelect: e,
@@ -4934,9 +4934,9 @@ function Ya({
   selected: l = !1,
   style: s
 }) {
-  const c = le(lt), d = O(-1);
+  const c = ie(lt), d = O(-1);
   d.current === -1 && c && (d.current = c.getItemIndex(), c.registerItem(d.current, a));
-  const p = c ? c.activeIndex === d.current : !1, u = (c == null ? void 0 : c.size) ?? "md", v = st[u], m = ja[u], b = Ga[u], h = () => {
+  const u = c ? c.activeIndex === d.current : !1, p = (c == null ? void 0 : c.size) ?? "md", y = st[p], h = ja[p], x = Ga[p], m = () => {
     a || (e(), c == null || c.close());
   }, f = () => {
     !a && c && c.setActiveIndex(d.current);
@@ -4947,18 +4947,18 @@ function Ya({
       role: "menuitemcheckbox",
       "aria-checked": l,
       "aria-disabled": a || void 0,
-      "data-active": p || void 0,
+      "data-active": u || void 0,
       tabIndex: -1,
-      onClick: h,
+      onClick: m,
       onMouseEnter: f,
       style: {
         display: "flex",
         alignItems: "center",
-        gap: v,
-        padding: v,
+        gap: y,
+        padding: y,
         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))" : p ? "var(--lucent-surface-secondary)" : "transparent",
+        background: l ? "color-mix(in srgb, var(--lucent-accent-default) 12%, var(--lucent-surface-overlay))" : u ? "var(--lucent-surface-secondary)" : "transparent",
         boxShadow: l ? "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,
@@ -4971,13 +4971,13 @@ function Ya({
           display: "flex",
           color: a ? "var(--lucent-text-disabled)" : i ? "var(--lucent-danger-text)" : "var(--lucent-text-secondary)"
         }, children: r }),
-        /* @__PURE__ */ n("span", { style: { flex: 1, minWidth: 0 }, children: /* @__PURE__ */ n(Y, { size: m, style: { color: g }, children: t }) }),
-        o && /* @__PURE__ */ n(Y, { size: u === "lg" ? "sm" : "xs", style: { color: "var(--lucent-text-secondary)", flexShrink: 0 }, children: o }),
+        /* @__PURE__ */ n("span", { style: { flex: 1, minWidth: 0 }, children: /* @__PURE__ */ n(Y, { size: h, style: { color: g }, children: t }) }),
+        o && /* @__PURE__ */ n(Y, { size: p === "lg" ? "sm" : "xs", style: { color: "var(--lucent-text-secondary)", flexShrink: 0 }, children: o }),
         l && /* @__PURE__ */ n("span", { style: {
           flexShrink: 0,
           display: "flex",
           color: "var(--lucent-accent-default)"
-        }, children: /* @__PURE__ */ n("svg", { width: b, height: b, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 2.5, strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": !0, children: /* @__PURE__ */ n("polyline", { points: "20 6 9 17 4 12" }) }) })
+        }, children: /* @__PURE__ */ n("svg", { width: x, height: x, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 2.5, strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": !0, children: /* @__PURE__ */ n("polyline", { points: "20 6 9 17 4 12" }) }) })
       ]
     }
   );
@@ -4997,7 +4997,7 @@ function zs({ style: e }) {
   );
 }
 function Es({ label: e, children: t, style: r }) {
-  const o = le(lt), a = (o == null ? void 0 : o.size) ?? "md", i = st[a];
+  const o = ie(lt), a = (o == null ? void 0 : o.size) ?? "md", i = st[a];
   return /* @__PURE__ */ k("div", { role: "group", "aria-label": e, style: r, children: [
     /* @__PURE__ */ n("div", { style: { padding: `${i} ${i} var(--lucent-space-1)` }, children: /* @__PURE__ */ n(Y, { size: Ua[a], color: "secondary", weight: "medium", children: e }) }),
     t
@@ -5013,32 +5013,32 @@ function Ka({
   portalContainer: l,
   style: s
 }) {
-  const c = a !== void 0, [d, p] = E(!1), u = c ? a : d, [v, m] = E(!1), [b, h] = E("idle"), f = O(null), g = O(null), w = O(null), y = O(!1), [C, T] = E(null), S = O(0), L = O(/* @__PURE__ */ new Map()), [I, A] = E(-1);
-  if (!y.current && typeof document < "u") {
+  const c = a !== void 0, [d, u] = E(!1), p = c ? a : d, [y, h] = E(!1), [x, m] = E("idle"), f = O(null), g = O(null), v = O(null), b = O(!1), [C, T] = E(null), S = O(0), L = O(/* @__PURE__ */ new Map()), [I, A] = E(-1);
+  if (!b.current && typeof document < "u") {
     const F = document.createElement("style");
-    F.textContent = Va, document.head.appendChild(F), y.current = !0;
+    F.textContent = Va, document.head.appendChild(F), b.current = !0;
   }
   G(() => {
-    if (u)
-      S.current = 0, L.current.clear(), m(!0), h("entering");
-    else if (v) {
-      h("exiting");
+    if (p)
+      S.current = 0, L.current.clear(), h(!0), m("entering");
+    else if (y) {
+      m("exiting");
       const F = setTimeout(() => {
-        m(!1), h("idle");
+        h(!1), m("idle");
       }, Ge);
       return () => clearTimeout(F);
     }
-  }, [u]);
+  }, [p]);
   const P = ee((F) => {
-    c || p(F), i == null || i(F);
+    c || u(F), i == null || i(F);
   }, [c, i]), $ = ee(() => {
-    const F = w.current;
+    const F = v.current;
     F && (F.querySelector("button, [tabindex]") ?? F).focus();
   }, []), M = ee(() => {
     P(!1), $();
   }, [P, $]);
-  ie(() => {
-    if (!v || b !== "entering" || !f.current) return;
+  se(() => {
+    if (!y || x !== "entering" || !f.current) return;
     const F = requestAnimationFrame(() => {
       const z = g.current, D = f.current;
       if (!z || !D) return;
@@ -5046,27 +5046,27 @@ function Ka({
       T(_a(R, z, r));
     });
     return () => cancelAnimationFrame(F);
-  }, [v, b, r]), G(() => {
-    if (!v || b !== "entering") return;
+  }, [y, x, r]), G(() => {
+    if (!y || x !== "entering") return;
     const F = setTimeout(() => {
       const D = Array.from(L.current.entries()).sort((R, H) => R[0] - H[0]).find(([, R]) => !R.disabled);
       A(D ? D[0] : -1);
     }, 0);
     return () => clearTimeout(F);
-  }, [v, b]), G(() => {
-    if (!u) return;
+  }, [y, x]), G(() => {
+    if (!p) return;
     const F = (D) => {
-      var H, x;
+      var H, w;
       const R = D.target;
-      (H = f.current) != null && H.contains(R) || (x = g.current) != null && x.contains(R) || M();
+      (H = f.current) != null && H.contains(R) || (w = g.current) != null && w.contains(R) || M();
     }, z = requestAnimationFrame(() => {
       document.addEventListener("mousedown", F);
     });
     return () => {
       cancelAnimationFrame(z), document.removeEventListener("mousedown", F);
     };
-  }, [u, M]), G(() => {
-    if (!u) return;
+  }, [p, M]), G(() => {
+    if (!p) return;
     let F = !1;
     const z = setTimeout(() => {
       F = !0;
@@ -5076,9 +5076,9 @@ function Ka({
     return window.addEventListener("scroll", D, { passive: !0, capture: !0 }), () => {
       clearTimeout(z), window.removeEventListener("scroll", D, { capture: !0 });
     };
-  }, [u, M]);
+  }, [p, M]);
   const N = ee(() => Array.from(L.current.entries()).filter(([, F]) => !F.disabled).map(([F]) => F).sort((F, z) => F - z), []), q = ee((F) => {
-    if (!u) return;
+    if (!p) return;
     const z = N();
     if (z.length !== 0)
       switch (F.key) {
@@ -5122,21 +5122,21 @@ function Ka({
           break;
         }
       }
-  }, [u, M, N]);
+  }, [p, M, N]);
   G(() => {
-    if (u)
+    if (p)
       return document.addEventListener("keydown", q), () => document.removeEventListener("keydown", q);
-  }, [u, q]), G(() => {
-    if (!u) return;
+  }, [p, q]), G(() => {
+    if (!p) return;
     const F = g.current;
     if (!F) return;
     const z = F.querySelector('[data-active="true"]');
     z == null || z.scrollIntoView({ block: "nearest" });
-  }, [I, u]);
+  }, [I, p]);
   const W = () => {
-    P(!u);
+    P(!p);
   }, U = (F) => {
-    (F.key === "Enter" || F.key === " " || F.key === "ArrowDown") && (F.preventDefault(), u || P(!0)), F.key === "ArrowUp" && (F.preventDefault(), u || (P(!0), setTimeout(() => {
+    (F.key === "Enter" || F.key === " " || F.key === "ArrowDown") && (F.preventDefault(), p || P(!0)), F.key === "ArrowUp" && (F.preventDefault(), p || (P(!0), setTimeout(() => {
       const z = N();
       z.length > 0 && A(z[z.length - 1]);
     }, 0)));
@@ -5159,19 +5159,19 @@ function Ka({
         children: /* @__PURE__ */ n(
           "span",
           {
-            ref: w,
+            ref: v,
             onClick: W,
             onKeyDown: U,
             "aria-haspopup": "menu",
-            "aria-expanded": u,
-            "aria-controls": u ? Z : void 0,
+            "aria-expanded": p,
+            "aria-controls": p ? Z : void 0,
             style: { display: "inline-flex", cursor: "pointer" },
             children: e
           }
         )
       }
     ),
-    v && pe(
+    y && pe(
       /* @__PURE__ */ n(lt.Provider, { value: J, children: /* @__PURE__ */ n(
         "div",
         {
@@ -5193,10 +5193,10 @@ function Ka({
             padding: st[o],
             maxHeight: "min(320px, calc(100vh - 32px))",
             overflowY: "auto",
-            animation: b === "exiting" ? `lucent-menu-out ${Ge}ms var(--lucent-easing-default) forwards` : `lucent-menu-in ${Ge}ms var(--lucent-easing-decelerate)`,
+            animation: x === "exiting" ? `lucent-menu-out ${Ge}ms var(--lucent-easing-default) forwards` : `lucent-menu-in ${Ge}ms var(--lucent-easing-decelerate)`,
             transformOrigin: (C == null ? void 0 : C.transformOrigin) ?? "top left",
             outline: "none",
-            pointerEvents: b === "exiting" ? "none" : "auto",
+            pointerEvents: x === "exiting" ? "none" : "auto",
             ...s
           },
           children: t
@@ -5438,7 +5438,7 @@ const As = {
     ],
     notes: 'Focus returns to the trigger element after the menu is dismissed via Escape or selection. Disabled items are skipped during keyboard navigation and have aria-disabled. Selected items use role="menuitemcheckbox" with aria-checked for screen reader announcement. The popover is portaled to document.body (or portalContainer) but remains semantically linked to the trigger via aria-controls.'
   }
-}, Ht = {
+}, Vt = {
   primary: {
     background: "var(--lucent-accent-default)",
     color: "var(--lucent-text-on-accent)",
@@ -5509,17 +5509,17 @@ const As = {
   "danger-outline": "0 4px 14px -2px var(--lucent-danger-subtle)",
   "danger-ghost": "0 4px 14px -2px var(--lucent-danger-subtle)"
 };
-function vt(e, t, r) {
+function bt(e, t, r) {
   e.style.transform = "translateY(-1px)", e.style.boxShadow = tr[t], e.style.background = er[t], (t === "danger" && r !== !1 || t === "danger-outline" && r !== !1) && (e.style.borderColor = "var(--lucent-danger-hover)");
 }
-function bt(e, t, r) {
-  e.style.transform = "", e.style.boxShadow = "", e.style.background = Ht[t].background, (t === "danger" && r !== !1 || t === "danger-outline" && r !== !1) && (e.style.borderColor = "var(--lucent-danger-default)");
+function yt(e, t, r) {
+  e.style.transform = "", e.style.boxShadow = "", e.style.background = Vt[t].background, (t === "danger" && r !== !1 || t === "danger-outline" && r !== !1) && (e.style.borderColor = "var(--lucent-danger-default)");
 }
-function yt(e, t) {
+function xt(e, t) {
   const o = t === "danger" || t === "danger-outline" || t === "danger-ghost" ? "var(--lucent-danger-default)" : "var(--lucent-accent-default)";
   e.style.transform = "translateY(1px)", e.style.boxShadow = `0 0 0 2px var(--lucent-surface), 0 0 0 4px ${o}`, e.dataset.pressed = "1";
 }
-function xt(e) {
+function wt(e) {
   e.style.transform = "", e.style.boxShadow = "", delete e.dataset.pressed;
 }
 function nr({
@@ -5533,13 +5533,13 @@ function nr({
   disabled: s,
   loading: c = !1,
   leftIcon: d,
-  style: p
+  style: u
 }) {
-  const u = s ?? c, [v, m] = E(!1), b = Xa[a], h = b.borderRadius ?? "var(--lucent-radius-lg)", f = Ja[a], g = u ? {
+  const p = s ?? c, [y, h] = E(!1), x = Xa[a], m = x.borderRadius ?? "var(--lucent-radius-lg)", f = Ja[a], g = p ? {
     background: "color-mix(in srgb, var(--lucent-surface-secondary) 70%, var(--lucent-border-default))",
     color: "color-mix(in srgb, var(--lucent-text-disabled) 50%, var(--lucent-border-default))",
     borderColor: "transparent"
-  } : {}, w = {
+  } : {}, v = {
     display: "inline-flex",
     alignItems: "center",
     justifyContent: "center",
@@ -5548,18 +5548,18 @@ function nr({
     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",
     whiteSpace: "nowrap",
     transition: "background var(--lucent-duration-fast) var(--lucent-easing-default), border-color var(--lucent-duration-fast) var(--lucent-easing-default), box-shadow var(--lucent-duration-fast) var(--lucent-easing-default), transform 80ms var(--lucent-easing-default)",
-    height: b.height,
-    fontSize: b.fontSize,
-    ...Ht[o],
+    height: x.height,
+    fontSize: x.fontSize,
+    ...Vt[o],
     ...i === !1 && { border: "none" },
     ...g
-  }, y = "var(--lucent-radius-sm)", C = `${h} ${y} ${y} ${h}`, T = `${y} ${h} ${h} ${y}`;
+  }, b = "var(--lucent-radius-sm)", C = `${m} ${b} ${b} ${m}`, T = `${b} ${m} ${m} ${b}`;
   return /* @__PURE__ */ k(
     "div",
     {
@@ -5569,27 +5569,27 @@ function nr({
         display: "inline-flex",
         alignItems: "center",
         gap: "calc(var(--lucent-space-1) / 2)",
-        ...p
+        ...u
       },
       children: [
         /* @__PURE__ */ k(
           "button",
           {
             type: "button",
-            disabled: u,
+            disabled: p,
             "aria-busy": c,
             onClick: t,
             onMouseEnter: (S) => {
-              u || vt(S.currentTarget, o, i);
+              p || bt(S.currentTarget, o, i);
             },
             onMouseLeave: (S) => {
-              u || bt(S.currentTarget, o, i);
+              p || yt(S.currentTarget, o, i);
             },
             onMouseDown: (S) => {
-              u || yt(S.currentTarget, o);
+              p || xt(S.currentTarget, o);
             },
             onMouseUp: (S) => {
-              xt(S.currentTarget);
+              wt(S.currentTarget);
             },
             onFocus: (S) => {
               S.currentTarget.dataset.pressed || (S.currentTarget.style.boxShadow = "0 0 0 3px var(--lucent-accent-subtle)");
@@ -5598,9 +5598,9 @@ function nr({
               S.currentTarget.style.boxShadow = "";
             },
             style: {
-              ...w,
+              ...v,
               borderRadius: C,
-              padding: o === "ghost" || o === "danger-ghost" ? `0 ${b.paddingInner} 0 ${b.paddingOuter}` : `0 ${b.paddingOuter}`
+              padding: o === "ghost" || o === "danger-ghost" ? `0 ${x.paddingInner} 0 ${x.paddingOuter}` : `0 ${x.paddingOuter}`
             },
             children: [
               d,
@@ -5611,27 +5611,27 @@ function nr({
         /* @__PURE__ */ n(
           Ka,
           {
-            open: v,
-            onOpenChange: m,
+            open: y,
+            onOpenChange: h,
             placement: l,
             size: Qa[a],
             trigger: /* @__PURE__ */ n(
               "button",
               {
                 type: "button",
-                disabled: u,
+                disabled: p,
                 "aria-label": "More actions",
                 onMouseEnter: (S) => {
-                  u || vt(S.currentTarget, o, i);
+                  p || bt(S.currentTarget, o, i);
                 },
                 onMouseLeave: (S) => {
-                  u || bt(S.currentTarget, o, i);
+                  p || yt(S.currentTarget, o, i);
                 },
                 onMouseDown: (S) => {
-                  u || yt(S.currentTarget, o);
+                  p || xt(S.currentTarget, o);
                 },
                 onMouseUp: (S) => {
-                  xt(S.currentTarget);
+                  wt(S.currentTarget);
                 },
                 onFocus: (S) => {
                   S.currentTarget.dataset.pressed || (S.currentTarget.style.boxShadow = "0 0 0 3px var(--lucent-accent-subtle)");
@@ -5640,12 +5640,12 @@ function nr({
                   S.currentTarget.style.boxShadow = "";
                 },
                 style: {
-                  ...w,
+                  ...v,
                   borderRadius: T,
                   padding: 0,
                   width: Za[a]
                 },
-                children: /* @__PURE__ */ n("svg", { width: f, height: f, 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)", ...v && { transform: "rotate(180deg)" } }, children: /* @__PURE__ */ n("polyline", { points: "6 9 12 15 18 9" }) })
+                children: /* @__PURE__ */ n("svg", { width: f, height: f, 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)", ...y && { transform: "rotate(180deg)" } }, children: /* @__PURE__ */ n("polyline", { points: "6 9 12 15 18 9" }) })
               }
             ),
             children: r.map((S, L) => /* @__PURE__ */ n(
@@ -5759,13 +5759,13 @@ function rr({
       children: r.map((a, i) => {
         const l = i === 0, s = i === o - 1;
         if (o === 1) return a;
-        const d = a.props.style ?? {}, p = d.borderRadius ?? "var(--lucent-radius-lg)";
-        let u;
-        return l ? u = `${p} ${be} ${be} ${p}` : s ? u = `${be} ${p} ${p} ${be}` : u = be, gn(a, {
+        const d = a.props.style ?? {}, u = d.borderRadius ?? "var(--lucent-radius-lg)";
+        let p;
+        return l ? p = `${u} ${be} ${be} ${u}` : s ? p = `${be} ${u} ${u} ${be}` : p = be, gn(a, {
           key: i,
           style: {
             ...d,
-            borderRadius: u
+            borderRadius: p
           }
         });
       })
@@ -5927,7 +5927,7 @@ const Ls = {
     ariaAttributes: ["aria-required", "aria-describedby"],
     notes: 'Link the wrapped control to an error message using aria-describedby on the control and a matching id on the error element for full screen reader support. The required asterisk is aria-hidden; set aria-required="true" on the control itself.'
   }
-}, wt = { sm: 14, md: 18, lg: 20 }, or = { sm: "sm", md: "md", lg: "md" }, ir = { sm: "var(--lucent-space-1)", md: "var(--lucent-space-2)", lg: "var(--lucent-space-2)" }, sr = ({ size: e = 16 }) => /* @__PURE__ */ k("svg", { width: e, height: e, viewBox: "0 0 16 16", fill: "none", "aria-hidden": "true", children: [
+}, kt = { sm: 14, md: 18, lg: 20 }, or = { sm: "sm", md: "md", lg: "md" }, ir = { sm: "var(--lucent-space-1)", md: "var(--lucent-space-2)", lg: "var(--lucent-space-2)" }, sr = ({ size: e = 16 }) => /* @__PURE__ */ k("svg", { width: e, height: e, viewBox: "0 0 16 16", fill: "none", "aria-hidden": "true", children: [
   /* @__PURE__ */ n("circle", { cx: "6.5", cy: "6.5", r: "4", stroke: "currentColor", strokeWidth: "1.5" }),
   /* @__PURE__ */ n("path", { d: "M9.5 9.5L13 13", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round" })
 ] }), lr = ({ size: e = 16 }) => /* @__PURE__ */ n("svg", { width: e, height: e, viewBox: "0 0 16 16", fill: "none", "aria-hidden": "true", children: /* @__PURE__ */ n("path", { d: "M2 3h12M4 8h8M6 13h4", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round" }) }), cr = () => /* @__PURE__ */ n("svg", { width: "14", height: "14", viewBox: "0 0 14 14", fill: "none", "aria-hidden": "true", children: /* @__PURE__ */ n("path", { d: "M3 3L11 11M11 3L3 11", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round" }) });
@@ -5942,13 +5942,13 @@ function Fs({
   errorText: s,
   results: c = [],
   onResultSelect: d,
-  isLoading: p = !1,
-  disabled: u = !1,
-  id: v,
-  style: m
+  isLoading: u = !1,
+  disabled: p = !1,
+  id: y,
+  style: h
 }) {
-  const b = o ?? (r === "filter" ? "Filter…" : "Search…"), [h, f] = E(!1), [g, w] = E(null), y = O(null), C = O(null), T = O(null), [S, L] = E({ top: 0, left: 0, width: 0 }), I = r === "search" && h && c.length > 0;
-  ie(() => {
+  const x = o ?? (r === "filter" ? "Filter…" : "Search…"), [m, f] = E(!1), [g, v] = E(null), b = O(null), C = O(null), T = O(null), [S, L] = E({ top: 0, left: 0, width: 0 }), I = r === "search" && m && c.length > 0;
+  se(() => {
     if (!I || !C.current) return;
     const q = C.current.getBoundingClientRect();
     L({ top: q.bottom + 4, left: q.left, width: q.width });
@@ -5958,10 +5958,10 @@ function Fs({
   }, P = (q) => {
     d == null || d(q), f(!1);
   }, $ = () => {
-    y.current = setTimeout(() => f(!1), 150);
+    b.current = setTimeout(() => f(!1), 150);
   }, M = () => {
-    y.current && clearTimeout(y.current), f(!0);
-  }, N = p ? /* @__PURE__ */ n(On, { size: "sm" }) : e ? /* @__PURE__ */ n(
+    b.current && clearTimeout(b.current), f(!0);
+  }, N = u ? /* @__PURE__ */ n(On, { size: "sm" }) : e ? /* @__PURE__ */ n(
     "button",
     {
       type: "button",
@@ -5986,18 +5986,18 @@ function Fs({
       children: /* @__PURE__ */ n(cr, {})
     }
   ) : null;
-  return /* @__PURE__ */ k("div", { ref: C, style: { ...m }, children: [
+  return /* @__PURE__ */ k("div", { ref: C, style: { ...h }, children: [
     /* @__PURE__ */ n(
       de,
       {
-        id: v,
+        id: y,
         type: "text",
         size: a,
         value: e,
         onChange: (q) => t(q.target.value),
-        placeholder: b,
-        disabled: u,
-        leftElement: r === "filter" ? /* @__PURE__ */ n(lr, { size: wt[a] }) : /* @__PURE__ */ n(sr, { size: wt[a] }),
+        placeholder: x,
+        disabled: p,
+        leftElement: r === "filter" ? /* @__PURE__ */ n(lr, { size: kt[a] }) : /* @__PURE__ */ n(sr, { size: kt[a] }),
         rightElement: N ?? void 0,
         onFocus: M,
         onBlur: $,
@@ -6032,8 +6032,8 @@ function Fs({
               role: "option",
               "aria-selected": !1,
               onMouseDown: () => P(q),
-              onMouseEnter: () => w(W),
-              onMouseLeave: () => w(null),
+              onMouseEnter: () => v(W),
+              onMouseLeave: () => v(null),
               style: {
                 padding: "var(--lucent-space-2)",
                 borderRadius: "var(--lucent-radius-md)",
@@ -6185,7 +6185,7 @@ const [results, setResults] = useState([]);
     keyboardInteractions: ["Enter to select focused result", "Escape to close dropdown"],
     notes: 'The results list uses role="listbox" with role="option" items. For full keyboard navigation (arrow keys to move between results), wire up onKeyDown on the Input and manage an activeIndex state.'
   }
-}, Vt = ve("0"), dr = {
+}, ct = ve({ px: "0", py: "0" }), dr = {
   none: { py: "0", px: "0" },
   sm: { py: "var(--lucent-space-2)", px: "var(--lucent-space-3)" },
   md: { py: "var(--lucent-space-4)", px: "var(--lucent-space-5)" },
@@ -6262,26 +6262,26 @@ function $s({
   style: s,
   onClick: c,
   href: d,
-  target: p,
-  rel: u,
-  disabled: v,
-  status: m,
-  selected: b,
-  hoverable: h,
+  target: u,
+  rel: p,
+  disabled: y,
+  status: h,
+  selected: x,
+  hoverable: m,
   media: f
 }) {
-  const g = fr[e], w = e === "combo", y = i ?? (w ? "md" : g.shadowDefault), { py: C, px: T } = dr[a], S = `${C} ${T}`, L = ur[l], I = d != null, A = c != null || I, P = A || (h ?? !1), $ = (v ?? !1) && A, M = I ? "a" : A ? "button" : "div", [N, q] = E(!1), [W, U] = E(!1), [J, Z] = E(!1), F = (b ?? !1) && !$, z = F ? yr : void 0, D = xr(g, b ?? !1, $), R = m != null ? `inset 3px 0 0 ${pr[m]}` : void 0;
+  const g = fr[e], v = e === "combo", b = i ?? (v ? "md" : g.shadowDefault), { py: C, px: T } = dr[a], S = `${C} ${T}`, L = ur[l], I = d != null, A = c != null || I, P = A || (m ?? !1), $ = (y ?? !1) && A, M = I ? "a" : A ? "button" : "div", [N, q] = E(!1), [W, U] = E(!1), [J, Z] = E(!1), F = (x ?? !1) && !$, z = F ? yr : void 0, D = xr(g, x ?? !1, $), R = h != null ? `inset 3px 0 0 ${pr[h]}` : void 0;
   let H;
-  w ? H = he(z, R) : P && !$ ? J ? H = he(br, z, R) : W ? H = he(vr, z, R) : N ? H = he(A ? mr : gr, Me[y], z, R) : H = he(Me[y], z, R) : H = he(Me[y], z, R);
-  const x = {
+  v ? H = he(z, R) : P && !$ ? J ? H = he(br, z, R) : W ? H = he(vr, z, R) : N ? H = he(A ? mr : gr, Me[b], z, R) : H = he(Me[b], z, R) : H = he(Me[b], z, R);
+  const w = {
     display: "flex",
     flexDirection: "column",
     background: D,
     border: g.border,
     borderRadius: L,
-    // Outer box-shadow rings (selected, focus) get clipped by overflow:hidden,
-    // so we switch to overflow:visible when a ring is active.
-    overflow: F || P && W ? "visible" : "hidden",
+    // 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: f != null && !(F || P && W) ? "hidden" : "visible",
     boxSizing: "border-box",
     position: "relative",
     ...H !== void 0 && { boxShadow: H },
@@ -6316,7 +6316,7 @@ function $s({
   return /* @__PURE__ */ k(
     M,
     {
-      style: x,
+      style: w,
       ...P && !$ ? {
         onMouseEnter: () => q(!0),
         onMouseLeave: () => {
@@ -6331,18 +6331,18 @@ function $s({
       } : {},
       ...I && {
         href: $ ? void 0 : d,
-        ...p !== void 0 && { target: p },
-        ...u !== void 0 && { rel: u }
+        ...u !== void 0 && { target: u },
+        ...p !== void 0 && { rel: p }
       },
       ...!I && A && {
         type: "button",
         ...$ && { disabled: !0 }
       },
       ...c !== void 0 && !$ && { onClick: c },
-      ...A && b !== void 0 && { "aria-pressed": b },
+      ...A && x !== void 0 && { "aria-pressed": x },
       ...I && $ && { "aria-disabled": !0 },
       children: [
-        f != null && /* @__PURE__ */ n("div", { style: { lineHeight: 0 }, children: f }),
+        f != null && /* @__PURE__ */ n("div", { style: { lineHeight: 0, overflow: "hidden", borderRadius: `${L} ${L} 0 0` }, children: f }),
         t != null && /* @__PURE__ */ n(
           "div",
           {
@@ -6353,17 +6353,17 @@ function $s({
             children: t
           }
         ),
-        /* @__PURE__ */ n(Vt.Provider, { value: T, children: /* @__PURE__ */ n(
+        /* @__PURE__ */ n(ct.Provider, { value: { px: T, py: C }, children: /* @__PURE__ */ n(
           "div",
           {
             style: {
               padding: S,
               flex: 1,
-              ...w ? {
+              ...v ? {
                 background: "var(--lucent-surface)",
                 border: "1px solid var(--lucent-border-default)",
                 borderRadius: L,
-                boxShadow: Me[y],
+                boxShadow: Me[b],
                 marginLeft: `calc(${T} / 3)`,
                 marginRight: `calc(${T} / 3)`
               } : {}
@@ -6386,7 +6386,7 @@ function $s({
   );
 }
 function Ns({ children: e, style: t }) {
-  const r = le(Vt);
+  const { px: r } = ie(ct);
   return /* @__PURE__ */ n(
     "div",
     {
@@ -6518,7 +6518,7 @@ const Ws = {
       name: "media",
       type: "ReactNode",
       required: !1,
-      description: "Full-bleed content rendered at the top of the card (before header). No padding is applied. Use for hero images, illustrations, or any edge-to-edge top content. The card's overflow:hidden clips media to the border-radius."
+      description: "Full-bleed content rendered at the top of the card (before header). No padding is applied. Use for hero images, illustrations, or any edge-to-edge top content. The media slot self-clips to the card's top border-radius. Cards without media default to overflow:visible so nested child shadows (e.g. an elevated Card inside a Collapsible) are never cut off."
     }
   ],
   usageExamples: [
@@ -6614,17 +6614,17 @@ const Ws = {
     },
     {
       title: "CollapsibleCard recipe — outline",
-      code: `<Card variant="outline" padding="none" hoverable>
+      code: `<Card variant="outline" hoverable>
   <Collapsible trigger={<Text as="span" weight="semibold" size="sm">Filters</Text>} defaultOpen>
-    <Text size="sm" color="secondary">Card + Collapsible composed together.</Text>
+    <Text size="sm" color="secondary">Card + Collapsible composed together. Collapsible auto-bleeds to card edges.</Text>
   </Collapsible>
 </Card>`
     },
     {
       title: "CollapsibleCard recipe — combo (filled + elevated)",
-      code: `<Card variant="filled" padding="none" hoverable>
+      code: `<Card variant="filled" hoverable>
   <Collapsible trigger={<Text as="span" weight="semibold" size="sm">Details</Text>} padded={false}>
-    <Card variant="elevated" padding="sm">
+    <Card variant="elevated" padding="sm" style={{ margin: 'var(--lucent-space-1) var(--lucent-space-2) var(--lucent-space-2)' }}>
       <Text size="sm" color="secondary">Two-tone: flat trigger on filled surface, content in elevated body.</Text>
     </Card>
   </Collapsible>
@@ -6929,7 +6929,7 @@ const js = {
   circle: "var(--lucent-radius-full)",
   rectangle: "var(--lucent-radius-md)"
 };
-function kt({
+function St({
   width: e,
   height: t,
   radius: r,
@@ -6970,20 +6970,20 @@ function Us({
     ` }) : null;
   return e === "text" && o > 1 ? /* @__PURE__ */ k(ae, { children: [
     d,
-    /* @__PURE__ */ n("div", { style: { display: "flex", flexDirection: "column", gap: "var(--lucent-space-2)", ...l }, children: Array.from({ length: o }).map((p, u) => /* @__PURE__ */ n(
-      kt,
+    /* @__PURE__ */ n("div", { style: { display: "flex", flexDirection: "column", gap: "var(--lucent-space-2)", ...l }, children: Array.from({ length: o }).map((u, p) => /* @__PURE__ */ n(
+      St,
       {
-        width: u === o - 1 ? "70%" : t,
+        width: p === o - 1 ? "70%" : t,
         height: s,
         radius: c,
         animate: a
       },
-      u
+      p
     )) })
   ] }) : /* @__PURE__ */ k(ae, { children: [
     d,
     /* @__PURE__ */ n(
-      kt,
+      St,
       {
         width: e === "circle" ? r ?? 40 : t,
         height: s,
@@ -7149,23 +7149,23 @@ function _s({ items: e, separator: t = "/", style: r }) {
 }
 function Ys({ tabs: e, defaultValue: t, value: r, onChange: o, variant: a = "underline", style: i }) {
   var F;
-  const l = r !== void 0, [s, c] = E(t ?? ((F = e[0]) == null ? void 0 : F.value) ?? ""), d = l ? r : s, [p, u] = E(null), v = O([]), [m, b] = E(null), h = O(!1), f = a === "pills", g = O(null), w = O(null), y = O(null), [C, T] = E(e.length), [S, L] = E(!1), [I, A] = E(!1), [P, $] = E(null), M = e.slice(0, C), N = e.slice(C), q = N.length > 0, W = N.some((z) => z.value === d), U = () => {
+  const l = r !== void 0, [s, c] = E(t ?? ((F = e[0]) == null ? void 0 : F.value) ?? ""), d = l ? r : s, [u, p] = E(null), y = O([]), [h, x] = E(null), m = O(!1), f = a === "pills", g = O(null), v = O(null), b = O(null), [C, T] = E(e.length), [S, L] = E(!1), [I, A] = E(!1), [P, $] = E(null), M = e.slice(0, C), N = e.slice(C), q = N.length > 0, W = N.some((z) => z.value === d), U = () => {
     if (W) {
-      b(null);
+      x(null);
       return;
     }
-    const z = e.findIndex((R, H) => H < C && R.value === d), D = v.current[z];
+    const z = e.findIndex((R, H) => H < C && R.value === d), D = y.current[z];
     if (D) {
       if (f) {
         const R = D.querySelector("span");
         if (!R) return;
-        b({ left: R.offsetLeft + D.offsetLeft, width: R.offsetWidth, animate: h.current });
+        x({ left: R.offsetLeft + D.offsetLeft, width: R.offsetWidth, animate: m.current });
       } else
-        b({ left: D.offsetLeft, width: D.offsetWidth, animate: h.current });
-      h.current = !0;
+        x({ left: D.offsetLeft, width: D.offsetWidth, animate: m.current });
+      m.current = !0;
     }
   };
-  ie(() => {
+  se(() => {
     U(), document.fonts.ready.then(U);
   }, [d, C, f]), G(() => {
     const z = g.current;
@@ -7174,7 +7174,7 @@ function Ys({ tabs: e, defaultValue: t, value: r, onChange: o, variant: a = "und
       const B = z.clientWidth, V = 70;
       let K = 0, j = 0;
       for (let _ = 0; _ < e.length; _++) {
-        const re = v.current[_];
+        const re = y.current[_];
         if (!re) {
           j++;
           continue;
@@ -7188,7 +7188,7 @@ function Ys({ tabs: e, defaultValue: t, value: r, onChange: o, variant: a = "und
       if (j >= e.length - 1 && j < e.length) {
         let _ = 0;
         for (let re = 0; re < e.length; re++) {
-          const ne = v.current[re];
+          const ne = y.current[re];
           ne && (_ += ne.offsetWidth);
         }
         _ <= B && (j = e.length);
@@ -7201,14 +7201,14 @@ function Ys({ tabs: e, defaultValue: t, value: r, onChange: o, variant: a = "und
         R = requestAnimationFrame(D);
       });
     })();
-    const x = new ResizeObserver(D);
-    return x.observe(z), () => {
-      x.disconnect(), cancelAnimationFrame(R);
+    const w = new ResizeObserver(D);
+    return w.observe(z), () => {
+      w.disconnect(), cancelAnimationFrame(R);
     };
   }, [e]), G(() => {
     if (!S) return;
     const z = (D) => {
-      y.current && !y.current.contains(D.target) && w.current && !w.current.contains(D.target) && (L(!1), $(null));
+      b.current && !b.current.contains(D.target) && v.current && !v.current.contains(D.target) && (L(!1), $(null));
     };
     return document.addEventListener("mousedown", z), () => document.removeEventListener("mousedown", z);
   }, [S]);
@@ -7217,8 +7217,8 @@ function Ys({ tabs: e, defaultValue: t, value: r, onChange: o, variant: a = "und
   }, Z = (z, D) => {
     var B;
     const R = M.map((V, K) => V.disabled ? -1 : K).filter((V) => V !== -1), H = R.indexOf(D);
-    let x = -1;
-    z.key === "ArrowRight" && (x = R[(H + 1) % R.length] ?? -1), z.key === "ArrowLeft" && (x = R[(H - 1 + R.length) % R.length] ?? -1), z.key === "Home" && (x = R[0] ?? -1), z.key === "End" && (x = R[R.length - 1] ?? -1), x !== -1 && (z.preventDefault(), (B = v.current[x]) == null || B.focus(), J(M[x].value));
+    let w = -1;
+    z.key === "ArrowRight" && (w = R[(H + 1) % R.length] ?? -1), z.key === "ArrowLeft" && (w = R[(H - 1 + R.length) % R.length] ?? -1), z.key === "Home" && (w = R[0] ?? -1), z.key === "End" && (w = R[R.length - 1] ?? -1), w !== -1 && (z.preventDefault(), (B = y.current[w]) == null || B.focus(), J(M[w].value));
   };
   return /* @__PURE__ */ k("div", { style: { display: "flex", flexDirection: "column", position: "relative", ...i }, children: [
     /* @__PURE__ */ k(
@@ -7238,36 +7238,36 @@ function Ys({ tabs: e, defaultValue: t, value: r, onChange: o, variant: a = "und
         },
         children: [
           e.map((z, D) => {
-            const R = D < C, H = z.value === d, x = z.disabled ?? !1;
+            const R = D < C, H = z.value === d, w = z.disabled ?? !1;
             return /* @__PURE__ */ k(
               "button",
               {
                 ref: (B) => {
-                  v.current[D] = B;
+                  y.current[D] = B;
                 },
                 role: "tab",
                 "aria-selected": H,
                 "aria-controls": `lucent-tabpanel-${z.value}`,
                 id: `lucent-tab-${z.value}`,
-                disabled: x,
+                disabled: w,
                 tabIndex: H && R ? 0 : -1,
                 onClick: () => {
-                  x || J(z.value);
+                  w || J(z.value);
                 },
                 onKeyDown: (B) => Z(B, D),
                 onMouseEnter: () => {
-                  !x && R && u(D);
+                  !w && R && p(D);
                 },
-                onMouseLeave: () => u(null),
+                onMouseLeave: () => p(null),
                 style: {
                   padding: f ? "var(--lucent-space-1) var(--lucent-space-2)" : "var(--lucent-space-1) var(--lucent-space-2) var(--lucent-space-3)",
                   background: "none",
                   border: "none",
-                  cursor: x ? "not-allowed" : "pointer",
+                  cursor: w ? "not-allowed" : "pointer",
                   fontFamily: "var(--lucent-font-family-base)",
                   fontSize: "var(--lucent-font-size-md)",
                   fontWeight: H ? "var(--lucent-font-weight-medium)" : "var(--lucent-font-weight-regular)",
-                  color: x ? "var(--lucent-text-disabled)" : f && H ? "var(--lucent-text-on-accent)" : H ? "var(--lucent-text-primary)" : "var(--lucent-text-secondary)",
+                  color: w ? "var(--lucent-text-disabled)" : f && H ? "var(--lucent-text-on-accent)" : H ? "var(--lucent-text-primary)" : "var(--lucent-text-secondary)",
                   transition: "color var(--lucent-duration-fast) var(--lucent-easing-default)",
                   whiteSpace: "nowrap",
                   outline: "none",
@@ -7281,10 +7281,10 @@ function Ys({ tabs: e, defaultValue: t, value: r, onChange: o, variant: a = "und
                     display: "block",
                     padding: "var(--lucent-space-1) var(--lucent-space-3)",
                     borderRadius: "var(--lucent-radius-md)",
-                    background: !f && p === D && !H && !x ? "var(--lucent-surface-secondary)" : "transparent",
+                    background: !f && u === D && !H && !w ? "var(--lucent-surface-secondary)" : "transparent",
                     transition: "background var(--lucent-duration-fast) var(--lucent-easing-default)"
                   }, children: z.label }),
-                  f && p === D && !H && !x && R && /* @__PURE__ */ n(
+                  f && u === D && !H && !w && R && /* @__PURE__ */ n(
                     "span",
                     {
                       "aria-hidden": !0,
@@ -7309,7 +7309,7 @@ function Ys({ tabs: e, defaultValue: t, value: r, onChange: o, variant: a = "und
           q && /* @__PURE__ */ n(
             "button",
             {
-              ref: w,
+              ref: v,
               onClick: () => L((z) => !z),
               onMouseEnter: () => A(!0),
               onMouseLeave: () => A(!1),
@@ -7336,7 +7336,7 @@ function Ys({ tabs: e, defaultValue: t, value: r, onChange: o, variant: a = "und
               }, children: "More…" })
             }
           ),
-          m != null && /* @__PURE__ */ n(
+          h != null && /* @__PURE__ */ n(
             "span",
             {
               "aria-hidden": !0,
@@ -7344,20 +7344,20 @@ function Ys({ tabs: e, defaultValue: t, value: r, onChange: o, variant: a = "und
                 position: "absolute",
                 top: "var(--lucent-space-1)",
                 bottom: "var(--lucent-space-1)",
-                left: m.left,
-                width: m.width,
+                left: h.left,
+                width: h.width,
                 background: "var(--lucent-accent-default)",
                 borderRadius: "var(--lucent-radius-md)",
-                transition: m.animate ? "left 220ms var(--lucent-easing-default), width 220ms var(--lucent-easing-default)" : "none"
+                transition: h.animate ? "left 220ms var(--lucent-easing-default), width 220ms var(--lucent-easing-default)" : "none"
               } : {
                 position: "absolute",
                 bottom: 0,
-                left: m.left,
-                width: m.width,
+                left: h.left,
+                width: h.width,
                 height: 2,
                 background: "var(--lucent-accent-default)",
                 borderRadius: "var(--lucent-radius-sm)",
-                transition: m.animate ? "left 220ms var(--lucent-easing-default), width 220ms var(--lucent-easing-default)" : "none"
+                transition: h.animate ? "left 220ms var(--lucent-easing-default), width 220ms var(--lucent-easing-default)" : "none"
               }
             }
           )
@@ -7367,7 +7367,7 @@ function Ys({ tabs: e, defaultValue: t, value: r, onChange: o, variant: a = "und
     q && S && /* @__PURE__ */ n(
       "div",
       {
-        ref: y,
+        ref: b,
         style: {
           position: "absolute",
           top: "100%",
@@ -7382,7 +7382,7 @@ function Ys({ tabs: e, defaultValue: t, value: r, onChange: o, variant: a = "und
           minWidth: 140
         },
         children: N.map((z, D) => {
-          const R = z.value === d, H = z.disabled ?? !1, x = P === D;
+          const R = z.value === d, H = z.disabled ?? !1, w = P === D;
           return /* @__PURE__ */ n(
             "button",
             {
@@ -7398,13 +7398,13 @@ function Ys({ tabs: e, defaultValue: t, value: r, onChange: o, variant: a = "und
                 display: "block",
                 width: "100%",
                 padding: "var(--lucent-space-2) var(--lucent-space-4)",
-                background: R || x ? "var(--lucent-surface-secondary)" : "none",
+                background: R || w ? "var(--lucent-surface-secondary)" : "none",
                 border: "none",
                 cursor: H ? "not-allowed" : "pointer",
                 fontFamily: "var(--lucent-font-family-base)",
                 fontSize: "var(--lucent-font-size-md)",
                 fontWeight: R ? "var(--lucent-font-weight-medium)" : "var(--lucent-font-weight-regular)",
-                color: H ? "var(--lucent-text-disabled)" : R || x ? "var(--lucent-text-primary)" : "var(--lucent-text-secondary)",
+                color: H ? "var(--lucent-text-disabled)" : R || w ? "var(--lucent-text-primary)" : "var(--lucent-text-secondary)",
                 textAlign: "left",
                 outline: "none",
                 transition: "background var(--lucent-duration-fast) var(--lucent-easing-default), color var(--lucent-duration-fast) var(--lucent-easing-default)"
@@ -7431,7 +7431,7 @@ function Ys({ tabs: e, defaultValue: t, value: r, onChange: o, variant: a = "und
     ))
   ] });
 }
-const St = 80, jt = 180, me = "var(--lucent-easing-default)", tt = "var(--lucent-duration-fast)", Tt = `height ${jt}ms ${me}`, Er = `
+const Tt = 80, jt = 180, me = "var(--lucent-easing-default)", tt = "var(--lucent-duration-fast)", Ct = `height ${jt}ms ${me}`, Er = `
 [data-lucent-collapsible-trigger]:hover:not(:disabled) {
   background: color-mix(in srgb, var(--lucent-text-primary) 5%, transparent) !important;
 }
@@ -7442,42 +7442,43 @@ const St = 80, jt = 180, me = "var(--lucent-easing-default)", tt = "var(--lucent
   box-shadow: 0 0 0 2px var(--lucent-surface), 0 0 0 4px var(--lucent-accent-default) !important;
 }
 `;
-let Ct = !1;
+let It = !1;
 function Ar() {
-  if (Ct || typeof document > "u") return;
+  if (It || typeof document > "u") return;
   const e = document.createElement("style");
-  e.setAttribute("data-lucent-collapsible", ""), e.textContent = Er, document.head.appendChild(e), Ct = !0;
+  e.setAttribute("data-lucent-collapsible", ""), e.textContent = Er, document.head.appendChild(e), It = !0;
 }
 function Ks({ trigger: e, children: t, defaultOpen: r = !1, open: o, onOpenChange: a, padded: i = !0, disabled: l = !1, style: s }) {
-  const c = o !== void 0, [d, p] = E(r), u = c ? o : d, v = O(null), m = O(!1), b = O();
+  const c = ie(ct), d = c.px !== "0" || c.py !== "0", u = o !== void 0, [p, y] = E(r), h = u ? o : p, x = O(null), m = O(!1), f = O();
   G(Ar, []), G(() => {
     m.current = !0;
-  }, []), ie(() => {
-    const f = v.current;
-    if (f)
-      if (u) {
-        const g = f.scrollHeight;
-        f.style.height = `${g}px`, f.style.transition = Tt, clearTimeout(b.current), b.current = setTimeout(() => {
-          f.style.height = "auto", f.style.transition = "";
+  }, []), se(() => {
+    const v = x.current;
+    if (v)
+      if (h) {
+        v.style.overflow = "hidden";
+        const b = v.scrollHeight;
+        v.style.height = `${b}px`, v.style.transition = Ct, clearTimeout(f.current), f.current = setTimeout(() => {
+          v.style.height = "auto", v.style.overflow = "visible", v.style.transition = "";
         }, jt + 20);
-      } else m.current && (clearTimeout(b.current), f.style.transition = "", f.style.height = `${f.scrollHeight}px`, f.getBoundingClientRect(), f.style.transition = Tt, f.style.height = "0px");
-  }, [u]), G(() => {
-    const f = v.current;
-    f && !u && !m.current && (f.style.height = "0px");
-  }, []), G(() => () => clearTimeout(b.current), []);
-  const h = () => {
+      } else m.current && (clearTimeout(f.current), v.style.overflow = "hidden", v.style.transition = "", v.style.height = `${v.scrollHeight}px`, v.getBoundingClientRect(), v.style.transition = Ct, v.style.height = "0px");
+  }, [h]), G(() => {
+    const v = x.current;
+    v && !h && !m.current && (v.style.height = "0px");
+  }, []), G(() => () => clearTimeout(f.current), []);
+  const g = () => {
     if (l) return;
-    const f = !u;
-    c || p(f), a == null || a(f);
+    const v = !h;
+    u || y(v), a == null || a(v);
   };
-  return /* @__PURE__ */ k("div", { style: { display: "flex", flexDirection: "column", fontFamily: "var(--lucent-font-family-base)", fontSize: "var(--lucent-font-size-md)", ...s }, children: [
+  return /* @__PURE__ */ k("div", { style: { display: "flex", flexDirection: "column", fontFamily: "var(--lucent-font-family-base)", fontSize: "var(--lucent-font-size-md)", ...d && { margin: `calc(-1 * ${c.py}) calc(-1 * ${c.px})` }, ...s }, children: [
     /* @__PURE__ */ k(
       "button",
       {
         "data-lucent-collapsible-trigger": !0,
-        onClick: h,
+        onClick: g,
         disabled: l,
-        "aria-expanded": u,
+        "aria-expanded": h,
         style: {
           display: "flex",
           alignItems: "center",
@@ -7498,24 +7499,24 @@ function Ks({ trigger: e, children: t, defaultOpen: r = !1, open: o, onOpenChang
         },
         children: [
           /* @__PURE__ */ n("span", { style: { flex: 1 }, children: e }),
-          /* @__PURE__ */ n(Br, { open: u })
+          /* @__PURE__ */ n(Br, { open: h })
         ]
       }
     ),
     /* @__PURE__ */ n(
       "div",
       {
-        ref: v,
-        "aria-hidden": !u,
-        style: { overflow: "hidden" },
+        ref: x,
+        "aria-hidden": !h,
+        style: { overflow: h ? "visible" : "hidden" },
         children: /* @__PURE__ */ n(
           "div",
           {
             style: {
               ...i ? { padding: "var(--lucent-space-2) var(--lucent-space-4) var(--lucent-space-3)" } : {},
-              opacity: u ? 1 : 0,
-              transform: u ? "translateY(0)" : "translateY(-4px)",
-              transition: `opacity ${St}ms ${me}, transform ${St}ms ${me}`
+              opacity: h ? 1 : 0,
+              transform: h ? "translateY(0)" : "translateY(-4px)",
+              transition: `opacity ${Tt}ms ${me}, transform ${Tt}ms ${me}`
             },
             children: t
           }
@@ -7563,12 +7564,12 @@ function Xs({
   rightSidebarWidth: s = 240,
   rightSidebarCollapsed: c = !1,
   footer: d,
-  footerHeight: p = 28,
-  chromeBackground: u = "bgBase",
-  mainStyle: v,
-  style: m
+  footerHeight: u = 28,
+  chromeBackground: p = "bgBase",
+  mainStyle: y,
+  style: h
 }) {
-  const b = De(a), h = De(o), f = De(s), g = De(p), w = u === "bgBase" ? "var(--lucent-bg-base)" : u === "bgSubtle" ? "var(--lucent-bg-subtle)" : "var(--lucent-surface)";
+  const x = De(a), m = De(o), f = De(s), g = De(u), v = p === "bgBase" ? "var(--lucent-bg-base)" : p === "bgSubtle" ? "var(--lucent-bg-subtle)" : "var(--lucent-surface)";
   return /* @__PURE__ */ k(
     "div",
     {
@@ -7577,9 +7578,9 @@ function Xs({
         flexDirection: "column",
         height: "100vh",
         overflow: "hidden",
-        background: w,
+        background: v,
         fontFamily: "var(--lucent-font-family-base)",
-        ...m
+        ...h
       },
       children: [
         /* @__PURE__ */ n("style", { children: qr }),
@@ -7588,9 +7589,9 @@ function Xs({
           {
             style: {
               flexShrink: 0,
-              height: b,
+              height: x,
               zIndex: 10,
-              background: w
+              background: v
             },
             children: t
           }
@@ -7601,11 +7602,11 @@ function Xs({
             {
               className: xe,
               style: {
-                width: i ? 0 : h,
+                width: i ? 0 : m,
                 flexShrink: 0,
                 overflow: "hidden",
                 overflowY: i ? "hidden" : "auto",
-                background: w,
+                background: v,
                 transition: "width 200ms var(--lucent-easing-default)"
               },
               children: r
@@ -7624,7 +7625,7 @@ function Xs({
                 borderRadius: "var(--lucent-radius-lg)",
                 boxShadow: "var(--lucent-shadow-sm)",
                 background: "var(--lucent-surface)",
-                ...v
+                ...y
               },
               children: e
             }
@@ -7638,7 +7639,7 @@ function Xs({
                 flexShrink: 0,
                 overflow: "hidden",
                 overflowY: c ? "hidden" : "auto",
-                background: w,
+                background: v,
                 transition: "width 200ms var(--lucent-easing-default)"
               },
               children: l
@@ -7652,7 +7653,7 @@ function Xs({
               flexShrink: 0,
               height: g,
               zIndex: 10,
-              background: w
+              background: v
             },
             children: d
           }
@@ -7692,7 +7693,7 @@ function Rr({ state: e }) {
     }
   );
 }
-function It({ dir: e }) {
+function Mt({ dir: e }) {
   return /* @__PURE__ */ n("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", "aria-hidden": !0, children: /* @__PURE__ */ n(
     "path",
     {
@@ -7714,24 +7715,24 @@ function Js({
   emptyState: l,
   style: s
 }) {
-  const [c, d] = E(null), [p, u] = E(0), [v, m] = E(null), [b, h] = E({}), f = o !== void 0, g = f ? o : p, w = e.some((M) => M.filterable), y = w ? t.filter((M) => e.every((N) => {
+  const [c, d] = E(null), [u, p] = E(0), [y, h] = E(null), [x, m] = E({}), f = o !== void 0, g = f ? o : u, v = e.some((M) => M.filterable), b = v ? t.filter((M) => e.every((N) => {
     if (!N.filterable) return !0;
-    const q = b[N.key];
+    const q = x[N.key];
     if (!q || q.length === 0) return !0;
     const W = String(M[N.key] ?? "");
     return q.includes(W);
-  })) : t, C = c ? [...y].sort((M, N) => {
+  })) : t, C = c ? [...b].sort((M, N) => {
     const q = M[c.key], W = N[c.key], U = String(q ?? "").localeCompare(String(W ?? ""), void 0, { numeric: !0 });
     return c.dir === "asc" ? U : -U;
-  }) : y, T = r > 0 ? C.slice(g * r, (g + 1) * r) : C, S = r > 0 ? Math.max(1, Math.ceil(C.length / r)) : 1, L = (M) => {
-    f || u(M), a == null || a(M);
+  }) : b, T = r > 0 ? C.slice(g * r, (g + 1) * r) : C, S = r > 0 ? Math.max(1, Math.ceil(C.length / r)) : 1, L = (M) => {
+    f || p(M), a == null || a(M);
   }, I = (M) => {
-    d((N) => !N || N.key !== M ? { key: M, dir: "asc" } : N.dir === "asc" ? { key: M, dir: "desc" } : null), f || u(0), a == null || a(0);
+    d((N) => !N || N.key !== M ? { key: M, dir: "asc" } : N.dir === "asc" ? { key: M, dir: "desc" } : null), f || p(0), a == null || a(0);
   }, A = (M, N) => {
-    const q = { ...b, [M]: N };
-    N.length === 0 && delete q[M], h(q), f || u(0), a == null || a(0), i == null || i(q);
+    const q = { ...x, [M]: N };
+    N.length === 0 && delete q[M], m(q), f || p(0), a == null || a(0), i == null || i(q);
   }, P = () => {
-    h({}), f || u(0), a == null || a(0), i == null || i({});
+    m({}), f || p(0), a == null || a(0), i == null || i({});
   }, $ = [];
   if (S <= 7)
     for (let M = 0; M < S; M++) $.push(M);
@@ -7742,12 +7743,12 @@ function Js({
     g < S - 3 && $.push("…"), $.push(S - 1);
   }
   return /* @__PURE__ */ k("div", { style: { display: "flex", flexDirection: "column", gap: "var(--lucent-space-3)", ...s }, children: [
-    w && /* @__PURE__ */ n("div", { style: { position: "relative", zIndex: 1 }, children: /* @__PURE__ */ n(
+    v && /* @__PURE__ */ n("div", { style: { position: "relative", zIndex: 1 }, children: /* @__PURE__ */ n(
       Lr,
       {
         columns: e,
         rows: t,
-        filters: b,
+        filters: x,
         onFilter: A,
         onClearAll: P
       }
@@ -7798,11 +7799,11 @@ function Js({
       ) }) : T.map((M, N) => /* @__PURE__ */ n(
         "tr",
         {
-          onMouseEnter: () => m(N),
-          onMouseLeave: () => m(null),
+          onMouseEnter: () => h(N),
+          onMouseLeave: () => h(null),
           style: {
             borderBottom: N < T.length - 1 ? "1px solid var(--lucent-border-subtle)" : "none",
-            background: v === N ? "var(--lucent-surface-secondary)" : "var(--lucent-surface)",
+            background: y === N ? "var(--lucent-surface-secondary)" : "var(--lucent-surface)",
             transition: "background var(--lucent-duration-fast) var(--lucent-easing-default)"
           },
           children: e.map((q) => /* @__PURE__ */ n(
@@ -7837,7 +7838,7 @@ function Js({
             onClick: () => L(g - 1),
             disabled: g === 0,
             "aria-label": "Previous page",
-            children: /* @__PURE__ */ n(It, { dir: "left" })
+            children: /* @__PURE__ */ n(Mt, { dir: "left" })
           }
         ),
         $.map(
@@ -7863,7 +7864,7 @@ function Js({
             onClick: () => L(g + 1),
             disabled: g >= S - 1,
             "aria-label": "Next page",
-            children: /* @__PURE__ */ n(It, { dir: "right" })
+            children: /* @__PURE__ */ n(Mt, { dir: "right" })
           }
         )
       ] })
@@ -7922,26 +7923,26 @@ function Fr({
   value: r,
   onChange: o
 }) {
-  const [a, i] = E(!1), [l, s] = E(!1), [c, d] = E(""), p = O(null), u = O(null), v = r.length > 0;
+  const [a, i] = E(!1), [l, s] = E(!1), [c, d] = E(""), u = O(null), p = O(null), y = r.length > 0;
   G(() => {
     if (!a) {
       d("");
       return;
     }
     setTimeout(() => {
-      var w;
-      return (w = u.current) == null ? void 0 : w.focus();
+      var v;
+      return (v = p.current) == null ? void 0 : v.focus();
     }, 0);
-    const f = (w) => {
-      p.current && !p.current.contains(w.target) && i(!1);
-    }, g = (w) => {
-      w.key === "Escape" && i(!1);
+    const f = (v) => {
+      u.current && !u.current.contains(v.target) && i(!1);
+    }, g = (v) => {
+      v.key === "Escape" && i(!1);
     };
     return document.addEventListener("mousedown", f), document.addEventListener("keydown", g), () => {
       document.removeEventListener("mousedown", f), document.removeEventListener("keydown", g);
     };
   }, [a]);
-  const m = c ? t.filter((f) => f.toLowerCase().includes(c.toLowerCase())) : t, b = (f) => o(r.includes(f) ? r.filter((g) => g !== f) : [...r, f]), h = r.length === 0 ? null : r.length === 1 ? /* @__PURE__ */ k("span", { style: { color: "var(--lucent-text-secondary)", fontWeight: "var(--lucent-font-weight-regular)" }, children: [
+  const h = c ? t.filter((f) => f.toLowerCase().includes(c.toLowerCase())) : t, x = (f) => o(r.includes(f) ? r.filter((g) => g !== f) : [...r, f]), m = r.length === 0 ? null : r.length === 1 ? /* @__PURE__ */ k("span", { style: { color: "var(--lucent-text-secondary)", fontWeight: "var(--lucent-font-weight-regular)" }, children: [
     ": ",
     r[0]
   ] }) : /* @__PURE__ */ k("span", { style: { color: "var(--lucent-accent-default)" }, children: [
@@ -7949,7 +7950,7 @@ function Fr({
     r.length,
     ")"
   ] });
-  return /* @__PURE__ */ k("div", { ref: p, style: { position: "relative" }, children: [
+  return /* @__PURE__ */ k("div", { ref: u, style: { position: "relative" }, children: [
     /* @__PURE__ */ k(
       "button",
       {
@@ -7963,12 +7964,12 @@ function Fr({
           height: 30,
           padding: "0 var(--lucent-space-3)",
           borderRadius: "var(--lucent-radius-md)",
-          border: `1px solid ${v ? "var(--lucent-accent-default)" : l ? "var(--lucent-border-strong)" : "var(--lucent-border-default)"}`,
-          background: v ? "var(--lucent-accent-subtle)" : "var(--lucent-surface)",
-          color: v ? "var(--lucent-accent-default)" : "var(--lucent-text-primary)",
+          border: `1px solid ${y ? "var(--lucent-accent-default)" : l ? "var(--lucent-border-strong)" : "var(--lucent-border-default)"}`,
+          background: y ? "var(--lucent-accent-subtle)" : "var(--lucent-surface)",
+          color: y ? "var(--lucent-accent-default)" : "var(--lucent-text-primary)",
           fontFamily: "var(--lucent-font-family-base)",
           fontSize: "var(--lucent-font-size-xs)",
-          fontWeight: v ? "var(--lucent-font-weight-medium)" : "var(--lucent-font-weight-regular)",
+          fontWeight: y ? "var(--lucent-font-weight-medium)" : "var(--lucent-font-weight-regular)",
           cursor: "pointer",
           outline: "none",
           whiteSpace: "nowrap",
@@ -7976,7 +7977,7 @@ function Fr({
         },
         children: [
           e,
-          h,
+          m,
           /* @__PURE__ */ n(
             "svg",
             {
@@ -8009,7 +8010,7 @@ function Fr({
       /* @__PURE__ */ n("div", { style: { padding: "var(--lucent-space-2)", paddingBottom: 0 }, children: /* @__PURE__ */ n(
         "input",
         {
-          ref: u,
+          ref: p,
           type: "text",
           value: c,
           onChange: (f) => d(f.target.value),
@@ -8048,18 +8049,18 @@ function Fr({
           children: "Clear selection"
         }
       ) }),
-      /* @__PURE__ */ n("div", { style: { overflowY: "auto", padding: "var(--lucent-space-1)", borderTop: "1px solid var(--lucent-border-subtle)", marginTop: "var(--lucent-space-2)" }, children: m.length === 0 ? /* @__PURE__ */ n("div", { style: {
+      /* @__PURE__ */ n("div", { style: { overflowY: "auto", padding: "var(--lucent-space-1)", borderTop: "1px solid var(--lucent-border-subtle)", marginTop: "var(--lucent-space-2)" }, children: h.length === 0 ? /* @__PURE__ */ n("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" }) : m.map((f) => /* @__PURE__ */ n(
+      }, children: "No results" }) : h.map((f) => /* @__PURE__ */ n(
         Pr,
         {
           label: f,
           isSelected: r.includes(f),
-          onClick: () => b(f)
+          onClick: () => x(f)
         },
         f
       )) })
@@ -8275,7 +8276,7 @@ function Qs({
   onOpenChange: a,
   style: i
 }) {
-  const l = o !== void 0, [s, c] = E(!1), d = l ? o : s, [p, u] = E(""), [v, m] = E(0), b = O(null), h = O(null), f = O(!1);
+  const l = o !== void 0, [s, c] = E(!1), d = l ? o : s, [u, p] = E(""), [y, h] = E(0), x = O(null), m = O(null), f = O(!1);
   if (!f.current) {
     const I = document.createElement("style");
     I.textContent = $r, document.head.appendChild(I), f.current = !0;
@@ -8289,18 +8290,18 @@ function Qs({
     };
     return window.addEventListener("keydown", I), () => window.removeEventListener("keydown", I);
   }, [d, r, g]), G(() => {
-    d && (u(""), m(0), setTimeout(() => {
+    d && (p(""), h(0), setTimeout(() => {
       var I;
-      return (I = b.current) == null ? void 0 : I.focus();
+      return (I = x.current) == null ? void 0 : I.focus();
     }, 10));
   }, [d]);
-  const w = p ? e.filter((I) => Nr(I, p)) : e, y = w.filter((I) => !I.disabled);
+  const v = u ? e.filter((I) => Nr(I, u)) : e, b = v.filter((I) => !I.disabled);
   G(() => {
-    const I = h.current;
+    const I = m.current;
     if (!I) return;
     const A = I.querySelector('[data-active="true"]');
     A == null || A.scrollIntoView({ block: "nearest" });
-  }, [v]);
+  }, [y]);
   const C = (I) => {
     I.disabled || (I.onSelect(), g(!1));
   }, T = (I) => {
@@ -8309,15 +8310,15 @@ function Qs({
       return;
     }
     if (I.key === "ArrowDown")
-      I.preventDefault(), y.length > 0 && m((A) => (A + 1) % y.length);
+      I.preventDefault(), b.length > 0 && h((A) => (A + 1) % b.length);
     else if (I.key === "ArrowUp")
-      I.preventDefault(), y.length > 0 && m((A) => (A - 1 + y.length) % y.length);
+      I.preventDefault(), b.length > 0 && h((A) => (A - 1 + b.length) % b.length);
     else if (I.key === "Enter") {
-      const A = y[v];
+      const A = b[y];
       A && C(A);
     }
   }, S = [];
-  for (const I of w) {
+  for (const I of v) {
     const A = S[S.length - 1];
     A && A.group === I.group ? A.items.push(I) : S.push({ group: I.group, items: [I] });
   }
@@ -8369,7 +8370,7 @@ function Qs({
               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: v.length > 0 ? "1px solid var(--lucent-border-subtle)" : "none"
             }, children: [
               /* @__PURE__ */ k("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__ */ n("circle", { cx: "7", cy: "7", r: "4.5", stroke: "currentColor", strokeWidth: "1.5" }),
@@ -8378,13 +8379,13 @@ function Qs({
               /* @__PURE__ */ n(
                 "input",
                 {
-                  ref: b,
+                  ref: x,
                   role: "searchbox",
                   "aria-autocomplete": "list",
                   "aria-controls": "lucent-command-list",
-                  value: p,
+                  value: u,
                   onChange: (I) => {
-                    u(I.target.value), m(0);
+                    p(I.target.value), h(0);
                   },
                   onKeyDown: T,
                   placeholder: t,
@@ -8407,11 +8408,11 @@ function Qs({
               {
                 id: "lucent-command-list",
                 role: "listbox",
-                ref: h,
+                ref: m,
                 style: { maxHeight: 360, overflowY: "auto", padding: "var(--lucent-space-1) var(--lucent-space-2)" },
-                children: w.length === 0 ? /* @__PURE__ */ n("div", { style: { padding: "var(--lucent-space-8)", textAlign: "center" }, children: /* @__PURE__ */ k(Y, { color: "secondary", children: [
+                children: v.length === 0 ? /* @__PURE__ */ n("div", { style: { padding: "var(--lucent-space-8)", textAlign: "center" }, children: /* @__PURE__ */ k(Y, { color: "secondary", children: [
                   'No results for "',
-                  p,
+                  u,
                   '"'
                 ] }) }) : S.map(({ group: I, items: A }, P) => /* @__PURE__ */ k("div", { children: [
                   I && /* @__PURE__ */ n("div", { style: {
@@ -8421,7 +8422,7 @@ function Qs({
                   A.map(($) => {
                     const M = $.disabled ?? !1;
                     let N = !1;
-                    return M || (N = L === v, L++), /* @__PURE__ */ k(
+                    return M || (N = L === y, L++), /* @__PURE__ */ k(
                       "div",
                       {
                         role: "option",
@@ -8431,8 +8432,8 @@ function Qs({
                         onClick: () => C($),
                         onMouseEnter: () => {
                           if (!M) {
-                            const q = y.indexOf($);
-                            q !== -1 && m(q);
+                            const q = b.indexOf($);
+                            q !== -1 && h(q);
                           }
                         },
                         style: {
@@ -8582,7 +8583,7 @@ const el = {
   sm: "var(--lucent-font-size-sm)",
   md: "var(--lucent-font-size-sm)",
   lg: "var(--lucent-font-size-md)"
-}, Mt = { sm: "sm", md: "md", lg: "lg" }, Vr = { sm: "sm", md: "md", lg: "lg" };
+}, Dt = { sm: "sm", md: "md", lg: "lg" }, Vr = { sm: "sm", md: "md", lg: "lg" };
 function tl({
   options: e,
   value: t,
@@ -8594,43 +8595,43 @@ function tl({
   size: s = "md",
   label: c,
   helperText: d,
-  errorText: p,
-  style: u
+  errorText: u,
+  style: p
 }) {
-  const v = t !== void 0, [m, b] = E(r), h = v ? t : m, [f, g] = E(!1), [w, y] = E(""), [C, T] = E(0), [S, L] = E(!1), I = O(null), A = O(null), P = O(null), $ = O(null), [M, N] = E({ top: 0, left: 0, width: 0 }), q = ke();
+  const y = t !== void 0, [h, x] = E(r), m = y ? t : h, [f, g] = E(!1), [v, b] = E(""), [C, T] = E(0), [S, L] = E(!1), I = O(null), A = O(null), P = O(null), $ = O(null), [M, N] = E({ top: 0, left: 0, width: 0 }), q = ke();
   G(() => {
     if (!f) return;
-    const x = (B) => {
+    const w = (B) => {
       var V, K;
-      !((V = I.current) != null && V.contains(B.target)) && !((K = $.current) != null && K.contains(B.target)) && (g(!1), y(""));
+      !((V = I.current) != null && V.contains(B.target)) && !((K = $.current) != null && K.contains(B.target)) && (g(!1), b(""));
     };
-    return document.addEventListener("mousedown", x), () => document.removeEventListener("mousedown", x);
-  }, [f]), ie(() => {
+    return document.addEventListener("mousedown", w), () => document.removeEventListener("mousedown", w);
+  }, [f]), se(() => {
     if (!f || !P.current) return;
-    const x = P.current.getBoundingClientRect();
-    N({ top: x.bottom + 4, left: x.left, width: x.width });
-  }, [f, h, w]);
-  const W = (x) => {
-    const B = h.includes(x) ? h.filter((V) => V !== x) : l !== void 0 && h.length >= l ? h : [...h, x];
-    v || b(B), o == null || o(B);
-  }, U = (x) => {
-    const B = h.filter((V) => V !== x);
-    v || b(B), o == null || o(B);
+    const w = P.current.getBoundingClientRect();
+    N({ top: w.bottom + 4, left: w.left, width: w.width });
+  }, [f, m, v]);
+  const W = (w) => {
+    const B = m.includes(w) ? m.filter((V) => V !== w) : l !== void 0 && m.length >= l ? m : [...m, w];
+    y || x(B), o == null || o(B);
+  }, U = (w) => {
+    const B = m.filter((V) => V !== w);
+    y || x(B), o == null || o(B);
   }, J = e.filter(
-    (x) => x.label.toLowerCase().includes(w.toLowerCase())
-  ), Z = (x) => {
-    if (x.key === "Escape") {
-      g(!1), y("");
+    (w) => w.label.toLowerCase().includes(v.toLowerCase())
+  ), Z = (w) => {
+    if (w.key === "Escape") {
+      g(!1), b("");
       return;
     }
-    if (x.key === "ArrowDown" && (x.preventDefault(), g(!0), T((B) => Math.min(B + 1, J.length - 1))), x.key === "ArrowUp" && (x.preventDefault(), T((B) => Math.max(B - 1, 0))), x.key === "Enter") {
-      x.preventDefault();
+    if (w.key === "ArrowDown" && (w.preventDefault(), g(!0), T((B) => Math.min(B + 1, J.length - 1))), w.key === "ArrowUp" && (w.preventDefault(), T((B) => Math.max(B - 1, 0))), w.key === "Enter") {
+      w.preventDefault();
       const B = J[C];
       B && !B.disabled && W(B.value);
     }
-    x.key === "Backspace" && w === "" && h.length > 0 && U(h[h.length - 1]);
-  }, F = l !== void 0 && h.length >= l, z = !!p, D = i ? "var(--lucent-border-default)" : z ? "var(--lucent-danger-default)" : S ? "var(--lucent-focus-ring)" : "var(--lucent-border-default)", R = S ? `0 0 0 3px ${z ? "var(--lucent-danger-subtle)" : "var(--lucent-accent-subtle)"}` : "none", H = `lucent-multiselect-${ke()}`;
-  return /* @__PURE__ */ k("div", { ref: I, style: { display: "flex", flexDirection: "column", gap: "var(--lucent-space-1)", ...u }, children: [
+    w.key === "Backspace" && v === "" && m.length > 0 && U(m[m.length - 1]);
+  }, F = l !== void 0 && m.length >= l, z = !!u, D = i ? "var(--lucent-border-default)" : z ? "var(--lucent-danger-default)" : S ? "var(--lucent-focus-ring)" : "var(--lucent-border-default)", R = S ? `0 0 0 3px ${z ? "var(--lucent-danger-subtle)" : "var(--lucent-accent-subtle)"}` : "none", H = `lucent-multiselect-${ke()}`;
+  return /* @__PURE__ */ k("div", { ref: I, style: { display: "flex", flexDirection: "column", gap: "var(--lucent-space-1)", ...p }, children: [
     c && /* @__PURE__ */ n(
       "label",
       {
@@ -8649,8 +8650,8 @@ function tl({
         "div",
         {
           onClick: () => {
-            var x;
-            i || (g(!0), (x = A.current) == null || x.focus());
+            var w;
+            i || (g(!0), (w = A.current) == null || w.focus());
           },
           style: {
             display: "flex",
@@ -8668,24 +8669,24 @@ function tl({
             boxShadow: R
           },
           children: [
-            h.map((x) => {
-              const B = e.find((V) => V.value === x);
-              return B ? /* @__PURE__ */ n(Ln, { size: Vr[s], onDismiss: () => U(x), disabled: i, children: B.label }, x) : null;
+            m.map((w) => {
+              const B = e.find((V) => V.value === w);
+              return B ? /* @__PURE__ */ n(Ln, { size: Vr[s], onDismiss: () => U(w), disabled: i, children: B.label }, w) : null;
             }),
             /* @__PURE__ */ n(
               "input",
               {
                 id: H,
                 ref: A,
-                value: w,
-                onChange: (x) => {
-                  y(x.target.value), g(!0), T(0);
+                value: v,
+                onChange: (w) => {
+                  b(w.target.value), g(!0), T(0);
                 },
                 onKeyDown: Z,
                 onFocus: () => L(!0),
                 onBlur: () => L(!1),
                 disabled: i,
-                placeholder: h.length === 0 ? a : "",
+                placeholder: m.length === 0 ? a : "",
                 "aria-autocomplete": "list",
                 "aria-controls": q,
                 "aria-expanded": f,
@@ -8701,7 +8702,7 @@ function tl({
                   fontSize: Or[s],
                   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"
+                  padding: m.length === 0 ? "2px 0 2px var(--lucent-space-1)" : "2px 0"
                 }
               }
             )
@@ -8733,8 +8734,8 @@ function tl({
               padding: ze[s]
             },
             children: [
-              J.length === 0 ? /* @__PURE__ */ n("div", { style: { padding: "var(--lucent-space-2)" }, children: /* @__PURE__ */ n(Y, { color: "secondary", size: Mt[s], children: "No options" }) }) : J.map((x, B) => {
-                const V = h.includes(x.value), K = B === C, j = x.disabled ?? !1, _ = F && !V;
+              J.length === 0 ? /* @__PURE__ */ n("div", { style: { padding: "var(--lucent-space-2)" }, children: /* @__PURE__ */ n(Y, { color: "secondary", size: Dt[s], children: "No options" }) }) : J.map((w, B) => {
+                const V = m.includes(w.value), K = B === C, j = w.disabled ?? !1, _ = F && !V;
                 return /* @__PURE__ */ k(
                   "div",
                   {
@@ -8742,7 +8743,7 @@ function tl({
                     "aria-selected": V,
                     "aria-disabled": j || _,
                     onClick: () => {
-                      !j && !_ && W(x.value);
+                      !j && !_ && W(w.value);
                     },
                     onMouseEnter: () => T(B),
                     style: {
@@ -8757,7 +8758,7 @@ function tl({
                     },
                     children: [
                       /* @__PURE__ */ n(
-                        Ft,
+                        Pt,
                         {
                           checked: V,
                           disabled: j || _,
@@ -8767,10 +8768,10 @@ function tl({
                           readOnly: !0
                         }
                       ),
-                      /* @__PURE__ */ n(Y, { size: Mt[s], children: x.label })
+                      /* @__PURE__ */ n(Y, { size: Dt[s], children: w.label })
                     ]
                   },
-                  x.value
+                  w.value
                 );
               }),
               F && /* @__PURE__ */ n("div", { style: {
@@ -8797,7 +8798,7 @@ function tl({
           color: "var(--lucent-danger-text)",
           fontFamily: "var(--lucent-font-family-base)"
         },
-        children: p
+        children: u
       }
     ),
     !z && d && /* @__PURE__ */ n(
@@ -8931,7 +8932,7 @@ function Pe(e, t) {
 function $e(e, t) {
   return new Date(e.getFullYear(), e.getMonth(), e.getDate()) < new Date(t.getFullYear(), t.getMonth(), t.getDate());
 }
-function Dt(e, t) {
+function zt(e, t) {
   return new Date(e.getFullYear(), e.getMonth(), e.getDate()) > new Date(t.getFullYear(), t.getMonth(), t.getDate());
 }
 const Gr = [
@@ -8968,7 +8969,7 @@ const Yr = { sm: "calc(var(--lucent-space-8) * 0.5 + 18px)", md: "calc(var(--luc
   md: "calc((var(--lucent-space-2) + var(--lucent-space-3)) / 2)",
   lg: "var(--lucent-space-3)"
 }, Zr = { sm: 28, md: 32, lg: 38 }, Qr = { sm: "var(--lucent-font-size-xs)", md: "var(--lucent-font-size-sm)", lg: "var(--lucent-font-size-md)" }, eo = { sm: "xs", md: "sm", lg: "md" }, to = { sm: "xs", md: "xs", lg: "sm" }, no = { sm: 24, md: 28, lg: 32 }, ao = { sm: 14, md: 16, lg: 18 }, Ut = { sm: "var(--lucent-space-3)", md: "var(--lucent-space-4)", lg: "var(--lucent-space-5)" }, nt = { sm: 220, md: 260, lg: 300 };
-function zt({ dir: e, onClick: t, disabled: r, size: o = "md" }) {
+function Et({ dir: e, onClick: t, disabled: r, size: o = "md" }) {
   const [a, i] = E(!1), l = no[o], s = ao[o];
   return /* @__PURE__ */ n(
     "button",
@@ -9016,54 +9017,54 @@ function at({
   onPrevMonth: s,
   onNextMonth: c,
   highlightRange: d,
-  onDayHover: p,
-  size: u = "md"
+  onDayHover: u,
+  size: p = "md"
 }) {
-  const v = jr(e, t), m = Ur(e, t), [b, h] = E(null), f = [
-    ...Array(m).fill(null),
-    ...Array.from({ length: v }, (g, w) => w + 1)
+  const y = jr(e, t), h = Ur(e, t), [x, m] = E(null), f = [
+    ...Array(h).fill(null),
+    ...Array.from({ length: y }, (g, v) => v + 1)
   ];
   for (; f.length % 7 !== 0; ) f.push(null);
   return /* @__PURE__ */ k("div", { children: [
     /* @__PURE__ */ k("div", { style: { display: "flex", alignItems: "center", justifyContent: "space-between", marginBottom: "var(--lucent-space-3)" }, children: [
-      /* @__PURE__ */ n(zt, { dir: "prev", onClick: s, size: u }),
-      /* @__PURE__ */ k(Y, { weight: "medium", size: eo[u], children: [
+      /* @__PURE__ */ n(Et, { dir: "prev", onClick: s, size: p }),
+      /* @__PURE__ */ k(Y, { weight: "medium", size: eo[p], children: [
         Gr[t],
         " ",
         e
       ] }),
-      /* @__PURE__ */ n(zt, { dir: "next", onClick: c, size: u })
+      /* @__PURE__ */ n(Et, { dir: "next", onClick: c, size: p })
     ] }),
-    /* @__PURE__ */ n("div", { style: { display: "grid", gridTemplateColumns: "repeat(7, 1fr)", gap: 2, marginBottom: "var(--lucent-space-1)" }, children: _r.map((g) => /* @__PURE__ */ n("div", { style: { textAlign: "center" }, children: /* @__PURE__ */ n(Y, { size: to[u], color: "secondary", children: g }) }, g)) }),
-    /* @__PURE__ */ n("div", { style: { display: "grid", gridTemplateColumns: "repeat(7, 1fr)", gap: 2 }, children: f.map((g, w) => {
-      if (!g) return /* @__PURE__ */ n("div", {}, w);
-      const y = new Date(e, t, g), C = r ? Pe(y, r) : !1, T = Pe(y, o), S = (a ? $e(y, a) : !1) || (i ? Dt(y, i) : !1);
+    /* @__PURE__ */ n("div", { style: { display: "grid", gridTemplateColumns: "repeat(7, 1fr)", gap: 2, marginBottom: "var(--lucent-space-1)" }, children: _r.map((g) => /* @__PURE__ */ n("div", { style: { textAlign: "center" }, children: /* @__PURE__ */ n(Y, { size: to[p], color: "secondary", children: g }) }, g)) }),
+    /* @__PURE__ */ n("div", { style: { display: "grid", gridTemplateColumns: "repeat(7, 1fr)", gap: 2 }, children: f.map((g, v) => {
+      if (!g) return /* @__PURE__ */ n("div", {}, v);
+      const b = new Date(e, t, g), C = r ? Pe(b, r) : !1, T = Pe(b, o), S = (a ? $e(b, a) : !1) || (i ? zt(b, i) : !1);
       let L = !1;
-      return d != null && d.start && (d != null && d.end) && (L = !$e(y, d.start) && !Dt(y, d.end)), /* @__PURE__ */ n(
+      return d != null && d.start && (d != null && d.end) && (L = !$e(b, d.start) && !zt(b, d.end)), /* @__PURE__ */ n(
         "button",
         {
           type: "button",
           disabled: S,
-          onClick: () => !S && l(y),
+          onClick: () => !S && l(b),
           onMouseEnter: () => {
-            h(g), p == null || p(y);
+            m(g), u == null || u(b);
           },
           onMouseLeave: () => {
-            h(null), p == null || p(null);
+            m(null), u == null || u(null);
           },
-          "aria-label": we(y),
+          "aria-label": we(b),
           "aria-pressed": C,
           style: {
             display: "flex",
             alignItems: "center",
             justifyContent: "center",
-            height: Zr[u],
+            height: Zr[p],
             width: "100%",
             border: T && !C ? "1px solid var(--lucent-border-strong)" : "1px solid transparent",
             borderRadius: "var(--lucent-radius-md)",
-            background: C ? "var(--lucent-accent-default)" : L ? "var(--lucent-accent-subtle)" : b === g && !S ? "color-mix(in srgb, var(--lucent-accent-default) 20%, var(--lucent-surface-secondary))" : "transparent",
+            background: C ? "var(--lucent-accent-default)" : L ? "var(--lucent-accent-subtle)" : x === g && !S ? "color-mix(in srgb, var(--lucent-accent-default) 20%, var(--lucent-surface-secondary))" : "transparent",
             color: C ? "var(--lucent-text-on-accent)" : S ? "var(--lucent-text-disabled)" : "var(--lucent-text-primary)",
-            fontSize: Qr[u],
+            fontSize: Qr[p],
             fontFamily: "var(--lucent-font-family-base)",
             fontWeight: T ? "var(--lucent-font-weight-medium)" : "var(--lucent-font-weight-regular)",
             cursor: S ? "not-allowed" : "pointer",
@@ -9071,7 +9072,7 @@ function at({
           },
           children: g
         },
-        w
+        v
       );
     }) })
   ] });
@@ -9087,34 +9088,34 @@ function al({
   size: s = "md",
   label: c,
   helperText: d,
-  errorText: p,
-  style: u
+  errorText: u,
+  style: p
 }) {
-  const v = e !== void 0, [m, b] = E(t), h = v ? e : m, f = !!p, g = a, w = `lucent-datepicker-${Math.random().toString(36).slice(2, 7)}`, y = /* @__PURE__ */ new Date(), [C, T] = E((h ?? y).getFullYear()), [S, L] = E((h ?? y).getMonth()), [I, A] = E(!1), [P, $] = E(!1), M = O(null), N = O(null), [q, W] = E({ top: 0, left: 0 });
+  const y = e !== void 0, [h, x] = E(t), m = y ? e : h, f = !!u, g = a, v = `lucent-datepicker-${Math.random().toString(36).slice(2, 7)}`, b = /* @__PURE__ */ new Date(), [C, T] = E((m ?? b).getFullYear()), [S, L] = E((m ?? b).getMonth()), [I, A] = E(!1), [P, $] = E(!1), M = O(null), N = O(null), [q, W] = E({ top: 0, left: 0 });
   G(() => {
     if (!I) return;
     const D = (R) => {
-      var H, x;
-      !((H = M.current) != null && H.contains(R.target)) && !((x = N.current) != null && x.contains(R.target)) && A(!1);
+      var H, w;
+      !((H = M.current) != null && H.contains(R.target)) && !((w = N.current) != null && w.contains(R.target)) && A(!1);
     };
     return document.addEventListener("mousedown", D), () => document.removeEventListener("mousedown", D);
-  }, [I]), ie(() => {
+  }, [I]), se(() => {
     if (!I || !M.current) return;
     const D = M.current.getBoundingClientRect();
     W({ top: D.bottom + 4, left: D.left });
   }, [I]);
   const U = (D) => {
-    v || b(D), r == null || r(D), A(!1);
+    y || x(D), r == null || r(D), A(!1);
   }, J = () => {
     S === 0 ? (L(11), T((D) => D - 1)) : L((D) => D - 1);
   }, Z = () => {
     S === 11 ? (L(0), T((D) => D + 1)) : L((D) => D + 1);
   }, F = g ? "transparent" : f ? "var(--lucent-danger-default)" : P ? "var(--lucent-focus-ring)" : "var(--lucent-border-default)", z = P ? `0 0 0 3px ${f ? "var(--lucent-danger-subtle)" : "var(--lucent-accent-subtle)"}` : "none";
-  return /* @__PURE__ */ k("div", { ref: M, style: { display: "flex", flexDirection: "column", gap: "var(--lucent-space-1)", ...u }, children: [
+  return /* @__PURE__ */ k("div", { ref: M, style: { display: "flex", flexDirection: "column", gap: "var(--lucent-space-1)", ...p }, children: [
     c && /* @__PURE__ */ n(
       "label",
       {
-        htmlFor: w,
+        htmlFor: v,
         style: {
           fontSize: Ke[s],
           fontWeight: "var(--lucent-font-weight-medium)",
@@ -9128,7 +9129,7 @@ function al({
       "button",
       {
         type: "button",
-        id: w,
+        id: v,
         disabled: a,
         onClick: () => !a && A((D) => !D),
         onFocus: () => $(!0),
@@ -9148,7 +9149,7 @@ function al({
           border: `1px solid ${F}`,
           boxShadow: z,
           background: g ? "var(--lucent-surface-secondary)" : "var(--lucent-surface)",
-          color: h ? "var(--lucent-text-primary)" : "var(--lucent-text-secondary)",
+          color: m ? "var(--lucent-text-primary)" : "var(--lucent-text-secondary)",
           fontFamily: "var(--lucent-font-family-base)",
           fontSize: Kr[s],
           cursor: g ? "not-allowed" : "pointer",
@@ -9164,7 +9165,7 @@ function al({
             /* @__PURE__ */ n("path", { d: "M1 6h12", stroke: "currentColor", strokeWidth: "1.3" }),
             /* @__PURE__ */ n("path", { d: "M4 1v2M10 1v2", stroke: "currentColor", strokeWidth: "1.3", strokeLinecap: "round" })
           ] }),
-          /* @__PURE__ */ n("span", { style: { flex: 1, textAlign: "left" }, children: h ? we(h) : o })
+          /* @__PURE__ */ n("span", { style: { flex: 1, textAlign: "left" }, children: m ? we(m) : o })
         ]
       }
     ),
@@ -9177,7 +9178,7 @@ function al({
           color: "var(--lucent-danger-text)",
           fontFamily: "var(--lucent-font-family-base)"
         },
-        children: p
+        children: u
       }
     ),
     !f && d && /* @__PURE__ */ n(
@@ -9217,8 +9218,8 @@ function al({
             {
               year: C,
               month: S,
-              ...h !== void 0 && { selected: h },
-              today: y,
+              ...m !== void 0 && { selected: m },
+              today: b,
               ...i !== void 0 && { min: i },
               ...l !== void 0 && { max: l },
               onSelect: U,
@@ -9375,10 +9376,10 @@ function ol({
   size: s = "md",
   label: c,
   helperText: d,
-  errorText: p,
-  style: u
+  errorText: u,
+  style: p
 }) {
-  const v = e !== void 0, [m, b] = E(t), h = v ? e : m, f = !!p, g = a, w = `lucent-daterangepicker-${Math.random().toString(36).slice(2, 7)}`, [y, C] = E(null), [T, S] = E(null), L = /* @__PURE__ */ new Date(), [I, A] = E(((h == null ? void 0 : h.start) ?? L).getFullYear()), [P, $] = E(((h == null ? void 0 : h.start) ?? L).getMonth()), M = P === 11 ? 0 : P + 1, N = P === 11 ? I + 1 : I, [q, W] = E(!1), [U, J] = E(!1), Z = O(null), F = O(null), [z, D] = E({ top: 0, left: 0 });
+  const y = e !== void 0, [h, x] = E(t), m = y ? e : h, f = !!u, g = a, v = `lucent-daterangepicker-${Math.random().toString(36).slice(2, 7)}`, [b, C] = E(null), [T, S] = E(null), L = /* @__PURE__ */ new Date(), [I, A] = E(((m == null ? void 0 : m.start) ?? L).getFullYear()), [P, $] = E(((m == null ? void 0 : m.start) ?? L).getMonth()), M = P === 11 ? 0 : P + 1, N = P === 11 ? I + 1 : I, [q, W] = E(!1), [U, J] = E(!1), Z = O(null), F = O(null), [z, D] = E({ top: 0, left: 0 });
   G(() => {
     if (!q) return;
     const j = (_) => {
@@ -9386,34 +9387,34 @@ function ol({
       !((re = Z.current) != null && re.contains(_.target)) && !((ne = F.current) != null && ne.contains(_.target)) && (W(!1), C(null));
     };
     return document.addEventListener("mousedown", j), () => document.removeEventListener("mousedown", j);
-  }, [q]), ie(() => {
+  }, [q]), se(() => {
     if (!q || !Z.current) return;
     const j = Z.current.getBoundingClientRect();
     D({ top: j.bottom + 4, left: j.left });
   }, [q]);
   const R = (j) => {
-    if (!y)
+    if (!b)
       C(j);
     else {
-      const [_, re] = $e(j, y) || Pe(j, y) ? [j, y] : [y, j], ne = { start: _, end: re };
-      v || b(ne), r == null || r(ne), C(null), W(!1);
+      const [_, re] = $e(j, b) || Pe(j, b) ? [j, b] : [b, j], ne = { start: _, end: re };
+      y || x(ne), r == null || r(ne), C(null), W(!1);
     }
   }, H = () => {
     P === 0 ? ($(11), A((j) => j - 1)) : $((j) => j - 1);
-  }, x = () => {
+  }, w = () => {
     P === 11 ? ($(0), A((j) => j + 1)) : $((j) => j + 1);
   };
   let B;
-  if (y && T) {
-    const [j, _] = $e(T, y) ? [T, y] : [y, T];
+  if (b && T) {
+    const [j, _] = $e(T, b) ? [T, b] : [b, T];
     B = { start: j, end: _ };
-  } else y ? B = { start: y, end: y } : h && (B = { start: h.start, end: h.end });
+  } else b ? B = { start: b, end: b } : m && (B = { start: m.start, end: m.end });
   const V = g ? "transparent" : f ? "var(--lucent-danger-default)" : U ? "var(--lucent-focus-ring)" : "var(--lucent-border-default)", K = U ? `0 0 0 3px ${f ? "var(--lucent-danger-subtle)" : "var(--lucent-accent-subtle)"}` : "none";
-  return /* @__PURE__ */ k("div", { ref: Z, style: { display: "flex", flexDirection: "column", gap: "var(--lucent-space-1)", ...u }, children: [
+  return /* @__PURE__ */ k("div", { ref: Z, style: { display: "flex", flexDirection: "column", gap: "var(--lucent-space-1)", ...p }, children: [
     c && /* @__PURE__ */ n(
       "label",
       {
-        htmlFor: w,
+        htmlFor: v,
         style: {
           fontSize: Xe[s],
           fontWeight: "var(--lucent-font-weight-medium)",
@@ -9427,7 +9428,7 @@ function ol({
       "button",
       {
         type: "button",
-        id: w,
+        id: v,
         disabled: a,
         onClick: () => !a && W((j) => !j),
         onFocus: () => J(!0),
@@ -9447,7 +9448,7 @@ function ol({
           border: `1px solid ${V}`,
           boxShadow: K,
           background: g ? "var(--lucent-surface-secondary)" : "var(--lucent-surface)",
-          color: h ? "var(--lucent-text-primary)" : "var(--lucent-text-secondary)",
+          color: m ? "var(--lucent-text-primary)" : "var(--lucent-text-secondary)",
           fontFamily: "var(--lucent-font-family-base)",
           fontSize: oo[s],
           cursor: g ? "not-allowed" : "pointer",
@@ -9463,7 +9464,7 @@ function ol({
             /* @__PURE__ */ n("path", { d: "M1 6h12", stroke: "currentColor", strokeWidth: "1.3" }),
             /* @__PURE__ */ n("path", { d: "M4 1v2M10 1v2", stroke: "currentColor", strokeWidth: "1.3", strokeLinecap: "round" })
           ] }),
-          /* @__PURE__ */ n("span", { style: { flex: 1, textAlign: "left" }, children: lo(h, o) })
+          /* @__PURE__ */ n("span", { style: { flex: 1, textAlign: "left" }, children: lo(m, o) })
         ]
       }
     ),
@@ -9476,7 +9477,7 @@ function ol({
           color: "var(--lucent-danger-text)",
           fontFamily: "var(--lucent-font-family-base)"
         },
-        children: p
+        children: u
       }
     ),
     !f && d && /* @__PURE__ */ n(
@@ -9518,15 +9519,15 @@ function ol({
               {
                 year: I,
                 month: P,
-                ...(h == null ? void 0 : h.start) !== void 0 && { selected: h.start },
+                ...(m == null ? void 0 : m.start) !== void 0 && { selected: m.start },
                 today: L,
                 ...i !== void 0 && { min: i },
                 ...l !== void 0 && { max: l },
                 onSelect: R,
                 onPrevMonth: H,
-                onNextMonth: x,
+                onNextMonth: w,
                 ...B !== void 0 && { highlightRange: B },
-                ...y && { onDayHover: S },
+                ...b && { onDayHover: S },
                 size: s
               }
             ) }),
@@ -9536,15 +9537,15 @@ function ol({
               {
                 year: N,
                 month: M,
-                ...(h == null ? void 0 : h.end) !== void 0 && { selected: h.end },
+                ...(m == null ? void 0 : m.end) !== void 0 && { selected: m.end },
                 today: L,
                 ...i !== void 0 && { min: i },
                 ...l !== void 0 && { max: l },
                 onSelect: R,
                 onPrevMonth: H,
-                onNextMonth: x,
+                onNextMonth: w,
                 ...B !== void 0 && { highlightRange: B },
-                ...y && { onDayHover: S },
+                ...b && { onDayHover: S },
                 size: s
               }
             ) })
@@ -9553,8 +9554,8 @@ function ol({
       ),
       document.body
     ),
-    y && q && /* @__PURE__ */ n("div", { style: { position: "absolute", top: "calc(100% + var(--lucent-space-1))", left: 0, zIndex: 1001, pointerEvents: "none" } }),
-    y && q && /* @__PURE__ */ n("div", { style: {
+    b && q && /* @__PURE__ */ n("div", { style: { position: "absolute", top: "calc(100% + var(--lucent-space-1))", left: 0, zIndex: 1001, pointerEvents: "none" } }),
+    b && q && /* @__PURE__ */ n("div", { style: {
       position: "absolute",
       bottom: -24,
       left: 0
@@ -9747,7 +9748,7 @@ function sl({
   disabled: l = !1,
   style: s
 }) {
-  const c = o !== void 0, [d, p] = E([]), u = c ? o : d, [v, m] = E(!1), [b, h] = E(!1), f = O(null), g = ee((T) => {
+  const c = o !== void 0, [d, u] = E([]), p = c ? o : d, [y, h] = E(!1), [x, m] = E(!1), f = O(null), g = ee((T) => {
     if (!T || l) return;
     const S = [];
     for (const I of Array.from(T)) {
@@ -9755,17 +9756,17 @@ function sl({
         i == null || i(`"${I.name}" exceeds the ${rt(r)} limit.`);
         continue;
       }
-      if (!t && u.length + S.length >= 1) break;
+      if (!t && p.length + S.length >= 1) break;
       S.push({ id: co(), file: I });
     }
     if (S.length === 0) return;
-    const L = t ? [...u, ...S] : S;
-    c || p(L), a == null || a(L);
-  }, [l, u, c, r, t, a, i]), w = (T) => {
-    const S = u.filter((L) => L.id !== T);
-    c || p(S), a == null || a(S);
-  }, y = (T) => {
-    T.preventDefault(), m(!1), g(T.dataTransfer.files);
+    const L = t ? [...p, ...S] : S;
+    c || u(L), a == null || a(L);
+  }, [l, p, c, r, t, a, i]), v = (T) => {
+    const S = p.filter((L) => L.id !== T);
+    c || u(S), a == null || a(S);
+  }, b = (T) => {
+    T.preventDefault(), h(!1), g(T.dataTransfer.files);
   }, C = (T) => {
     g(T.target.files), T.target.value = "";
   };
@@ -9785,13 +9786,13 @@ function sl({
           var S;
           (T.key === "Enter" || T.key === " ") && (T.preventDefault(), (S = f.current) == null || S.click());
         },
-        onFocus: () => h(!0),
-        onBlur: () => h(!1),
+        onFocus: () => m(!0),
+        onBlur: () => m(!1),
         onDragOver: (T) => {
-          T.preventDefault(), l || m(!0);
+          T.preventDefault(), l || h(!0);
         },
-        onDragLeave: () => m(!1),
-        onDrop: y,
+        onDragLeave: () => h(!1),
+        onDrop: b,
         style: {
           display: "flex",
           flexDirection: "column",
@@ -9800,8 +9801,8 @@ function sl({
           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)" : v || b ? "var(--lucent-accent-default)" : "var(--lucent-border-default)"}`,
-          background: v ? "var(--lucent-accent-subtle)" : "var(--lucent-surface-secondary)",
+          border: `2px dashed ${l ? "var(--lucent-border-default)" : y || x ? "var(--lucent-accent-default)" : "var(--lucent-border-default)"}`,
+          background: y ? "var(--lucent-accent-subtle)" : "var(--lucent-surface-secondary)",
           cursor: l ? "not-allowed" : "pointer",
           transition: "border-color var(--lucent-duration-fast), background var(--lucent-duration-fast)",
           outline: "none"
@@ -9815,7 +9816,7 @@ function sl({
               viewBox: "0 0 32 32",
               fill: "none",
               "aria-hidden": !0,
-              style: { color: l ? "var(--lucent-text-disabled)" : v ? "var(--lucent-accent-default)" : "var(--lucent-text-secondary)" },
+              style: { color: l ? "var(--lucent-text-disabled)" : y ? "var(--lucent-accent-default)" : "var(--lucent-text-secondary)" },
               children: [
                 /* @__PURE__ */ n("path", { d: "M16 20V10M16 10l-4 4M16 10l4 4", stroke: "currentColor", strokeWidth: "1.8", strokeLinecap: "round", strokeLinejoin: "round" }),
                 /* @__PURE__ */ n("path", { d: "M8 24h16", stroke: "currentColor", strokeWidth: "1.8", strokeLinecap: "round" })
@@ -9823,7 +9824,7 @@ function sl({
             }
           ),
           /* @__PURE__ */ k("div", { style: { textAlign: "center" }, children: [
-            /* @__PURE__ */ n(Y, { color: l ? "disabled" : "primary", weight: "medium", children: v ? "Drop to upload" : "Drop files here or click to browse" }),
+            /* @__PURE__ */ n(Y, { color: l ? "disabled" : "primary", weight: "medium", children: y ? "Drop to upload" : "Drop files here or click to browse" }),
             (e || r) && /* @__PURE__ */ n(Y, { size: "xs", color: "secondary", children: [
               e && `Accepted: ${e}`,
               r && `Max size: ${rt(r)}`
@@ -9845,7 +9846,7 @@ function sl({
         ]
       }
     ),
-    u.length > 0 && /* @__PURE__ */ n("div", { style: { display: "flex", flexDirection: "column", gap: "var(--lucent-space-2)" }, children: u.map((T) => /* @__PURE__ */ n(uo, { item: T, onRemove: w }, T.id)) })
+    p.length > 0 && /* @__PURE__ */ n("div", { style: { display: "flex", flexDirection: "column", gap: "var(--lucent-space-2)" }, children: p.map((T) => /* @__PURE__ */ n(uo, { item: T, onRemove: v }, T.id)) })
   ] });
 }
 const ll = {
@@ -10088,7 +10089,7 @@ const dl = {
   }
 }, Gt = ve(null);
 function ul() {
-  const e = le(Gt);
+  const e = ie(Gt);
   if (!e) throw new Error("useToast must be used inside <ToastProvider>");
   return e;
 }
@@ -10124,8 +10125,8 @@ function _t(e) {
   return e.startsWith("top");
 }
 const To = 200, Co = 8, Io = 0.04, Mo = 0.2, Do = 3, zo = 356;
-function Et({ entry: e, onDismiss: t, hideContent: r, fixedHeight: o }) {
-  const { id: a, title: i, description: l, variant: s, action: c, icon: d } = e, p = wo[s], u = d ?? (s !== "default" ? xo[s] : null), v = (c == null ? void 0 : c.style) ?? "button";
+function At({ entry: e, onDismiss: t, hideContent: r, fixedHeight: o }) {
+  const { id: a, title: i, description: l, variant: s, action: c, icon: d } = e, u = wo[s], p = d ?? (s !== "default" ? xo[s] : null), y = (c == null ? void 0 : c.style) ?? "button";
   return /* @__PURE__ */ n(
     "div",
     {
@@ -10135,7 +10136,7 @@ function Et({ entry: e, onDismiss: t, hideContent: r, fixedHeight: o }) {
         gap: "var(--lucent-space-3)",
         padding: "var(--lucent-space-3) var(--lucent-space-4)",
         background: "var(--lucent-surface-raised)",
-        border: `1px solid ${p.border}`,
+        border: `1px solid ${u.border}`,
         borderRadius: "var(--lucent-radius-lg)",
         boxShadow: r ? "none" : "var(--lucent-shadow-lg)",
         boxSizing: "border-box",
@@ -10157,15 +10158,15 @@ function Et({ entry: e, onDismiss: t, hideContent: r, fixedHeight: o }) {
             transition: "opacity var(--lucent-duration-base) var(--lucent-easing-default)"
           },
           children: [
-            u && /* @__PURE__ */ n("span", { style: { flexShrink: 0, color: p.iconColor, display: "flex", alignItems: "center" }, children: u }),
+            p && /* @__PURE__ */ n("span", { style: { flexShrink: 0, color: u.iconColor, display: "flex", alignItems: "center" }, children: p }),
             /* @__PURE__ */ k("div", { style: { flex: 1, minWidth: 0, display: "flex", flexDirection: "column", gap: "var(--lucent-space-1)" }, children: [
               /* @__PURE__ */ n(Y, { as: "span", size: "sm", weight: "semibold", color: "primary", lineHeight: "tight", children: i }),
               l && /* @__PURE__ */ n(Y, { as: "span", size: "sm", color: "secondary", lineHeight: "base", style: { whiteSpace: "pre-line" }, children: l })
             ] }),
-            c && v === "button" && /* @__PURE__ */ n(Eo, { label: c.label, onClick: () => {
+            c && y === "button" && /* @__PURE__ */ n(Eo, { label: c.label, onClick: () => {
               c.onClick(), t(a);
             } }),
-            c && v === "link" && /* @__PURE__ */ n(Ao, { label: c.label, iconColor: p.iconColor, onClick: () => {
+            c && y === "link" && /* @__PURE__ */ n(Ao, { label: c.label, iconColor: u.iconColor, onClick: () => {
               c.onClick(), t(a);
             } }),
             /* @__PURE__ */ n(
@@ -10186,11 +10187,11 @@ function Et({ entry: e, onDismiss: t, hideContent: r, fixedHeight: o }) {
                   color: "var(--lucent-text-secondary)",
                   opacity: r ? 0 : 0.6
                 },
-                onMouseEnter: (m) => {
-                  r || (m.currentTarget.style.opacity = "1");
+                onMouseEnter: (h) => {
+                  r || (h.currentTarget.style.opacity = "1");
                 },
-                onMouseLeave: (m) => {
-                  r || (m.currentTarget.style.opacity = "0.6");
+                onMouseLeave: (h) => {
+                  r || (h.currentTarget.style.opacity = "0.6");
                 },
                 children: /* @__PURE__ */ n(yo, {})
               }
@@ -10256,7 +10257,7 @@ function Ao({ label: e, iconColor: t, onClick: r }) {
     }
   );
 }
-const At = "var(--lucent-space-6)", Bo = 40, qo = 120;
+const Bt = "var(--lucent-space-6)", Bo = 40, qo = 120;
 function Ro(e) {
   const t = {
     position: "fixed",
@@ -10264,26 +10265,26 @@ function Ro(e) {
     pointerEvents: "none",
     boxSizing: "border-box"
   };
-  return _t(e) ? t.top = Bo : t.top = `calc(100vh - ${qo}px)`, e.endsWith("left") ? t.left = At : e.endsWith("right") ? t.right = At : (t.left = "50%", t.transform = "translateX(-50%)"), t;
+  return _t(e) ? t.top = Bo : t.top = `calc(100vh - ${qo}px)`, e.endsWith("left") ? t.left = Bt : e.endsWith("right") ? t.right = Bt : (t.left = "50%", t.transform = "translateX(-50%)"), t;
 }
 function Lo({ toasts: e, position: t, onDismiss: r, portalContainer: o }) {
   const [a, i] = E(!1), [l, s] = E(void 0), c = ee((f) => {
     f && s(f.offsetHeight);
-  }, []), d = _t(t), p = e.filter((f) => f.phase !== "exiting"), u = e.filter((f) => f.phase === "exiting");
+  }, []), d = _t(t), u = e.filter((f) => f.phase !== "exiting"), p = e.filter((f) => f.phase === "exiting");
   G(() => {
-    p.length <= 1 && i(!1);
-  }, [p.length]);
-  const v = O(null), m = ee(() => {
-    v.current && (clearTimeout(v.current), v.current = null), p.length > 1 && i(!0);
-  }, [p.length]), b = ee(() => {
-    v.current = setTimeout(() => {
-      i(!1), v.current = null;
+    u.length <= 1 && i(!1);
+  }, [u.length]);
+  const y = O(null), h = ee(() => {
+    y.current && (clearTimeout(y.current), y.current = null), u.length > 1 && i(!0);
+  }, [u.length]), x = ee(() => {
+    y.current = setTimeout(() => {
+      i(!1), y.current = null;
     }, 150);
-  }, []), h = /* @__PURE__ */ n("div", { style: Ro(t), children: /* @__PURE__ */ n(
+  }, []), m = /* @__PURE__ */ n("div", { style: Ro(t), children: /* @__PURE__ */ n(
     "div",
     {
-      onMouseEnter: m,
-      onMouseLeave: b,
+      onMouseEnter: h,
+      onMouseLeave: x,
       style: { margin: "calc(-1 * var(--lucent-space-2))", padding: "var(--lucent-space-2)" },
       children: /* @__PURE__ */ k("div", { style: {
         position: "relative",
@@ -10294,15 +10295,15 @@ function Lo({ toasts: e, position: t, onDismiss: r, portalContainer: o }) {
         marginTop: a && !d ? l ?? 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: [
-        p.map((f, g) => {
-          const w = p.length - 1 - g, y = !a && w > Do, C = w * Co, T = d ? C : -C, S = a ? 1 : 1 - w * Io, L = a ? 1 : Math.max(0, 1 - w * Mo), I = f.phase === "entering", A = w === 0, P = !a && !A;
+        u.map((f, g) => {
+          const v = u.length - 1 - g, b = !a && v > Do, C = v * Co, T = d ? C : -C, S = a ? 1 : 1 - v * Io, L = a ? 1 : Math.max(0, 1 - v * Mo), I = f.phase === "entering", A = v === 0, P = !a && !A;
           return /* @__PURE__ */ n(
             "div",
             {
               ref: A ? c : void 0,
               role: "status",
               "aria-live": "polite",
-              "aria-hidden": y,
+              "aria-hidden": b,
               style: {
                 // Front toast is relative (sets container height).
                 // Stacked toasts overlap via absolute + top: 0.
@@ -10310,16 +10311,16 @@ function Lo({ toasts: e, position: t, onDismiss: r, portalContainer: o }) {
                 // Bottom positions: anchor at top:0 (peek above front toast)
                 // Top positions: anchor at bottom:0 (peek below front toast)
                 ...!a && !A && (d ? { bottom: 0 } : { top: 0 }),
-                zIndex: 100 - w,
+                zIndex: 100 - v,
                 transform: I ? `translateY(${d ? "-20px" : "20px"}) scale(0.96)` : a ? void 0 : `translateY(${T}px) scaleX(${S})`,
                 opacity: I || f.phase === "exiting" ? 0 : L,
                 transformOrigin: d ? "bottom center" : "top center",
                 transition: I ? "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: b ? "none" : "auto",
+                visibility: b ? "hidden" : "visible"
               },
               children: /* @__PURE__ */ n(
-                Et,
+                At,
                 {
                   entry: f,
                   onDismiss: r,
@@ -10331,7 +10332,7 @@ function Lo({ toasts: e, position: t, onDismiss: r, portalContainer: o }) {
             f.id
           );
         }),
-        u.map((f) => /* @__PURE__ */ n(
+        p.map((f) => /* @__PURE__ */ n(
           "div",
           {
             role: "status",
@@ -10346,14 +10347,14 @@ function Lo({ toasts: e, position: t, onDismiss: r, portalContainer: o }) {
               transition: "transform var(--lucent-duration-base) var(--lucent-easing-default), opacity var(--lucent-duration-base) var(--lucent-easing-default)",
               pointerEvents: "none"
             },
-            children: /* @__PURE__ */ n(Et, { entry: f, onDismiss: r })
+            children: /* @__PURE__ */ n(At, { entry: f, onDismiss: r })
           },
           f.id
         ))
       ] })
     }
   ) });
-  return pe(h, o ?? document.body);
+  return pe(m, o ?? document.body);
 }
 function pl({
   children: e,
@@ -10362,48 +10363,48 @@ function pl({
   max: o = 5,
   portalContainer: a
 }) {
-  const [i, l] = E([]), s = ee((p) => {
-    l((u) => {
-      const v = u.find((m) => m.id === p);
-      return !v || v.phase === "exiting" ? u : u.map((m) => m.id === p ? { ...m, phase: "exiting" } : m);
+  const [i, l] = E([]), s = ee((u) => {
+    l((p) => {
+      const y = p.find((h) => h.id === u);
+      return !y || y.phase === "exiting" ? p : p.map((h) => h.id === u ? { ...h, phase: "exiting" } : h);
     }), setTimeout(() => {
-      l((u) => u.filter((v) => v.id !== p));
+      l((p) => p.filter((y) => y.id !== u));
     }, To);
-  }, []), c = ee((p) => {
-    const u = So(), v = {
-      id: u,
-      title: p.title,
-      variant: p.variant ?? "default",
-      duration: p.duration ?? r,
-      ...p.description !== void 0 && { description: p.description },
-      ...p.action !== void 0 && { action: p.action },
-      ...p.icon !== void 0 && { icon: p.icon },
+  }, []), c = ee((u) => {
+    const p = So(), y = {
+      id: p,
+      title: u.title,
+      variant: u.variant ?? "default",
+      duration: u.duration ?? r,
+      ...u.description !== void 0 && { description: u.description },
+      ...u.action !== void 0 && { action: u.action },
+      ...u.icon !== void 0 && { icon: u.icon },
       phase: "entering"
     };
-    return l((m) => {
-      const b = [...m, v], h = b.filter((f) => f.phase !== "exiting");
-      if (h.length > o) {
-        const f = h.slice(0, h.length - o);
+    return l((h) => {
+      const x = [...h, y], m = x.filter((f) => f.phase !== "exiting");
+      if (m.length > o) {
+        const f = m.slice(0, m.length - o);
         for (const g of f)
           setTimeout(() => s(g.id), 0);
       }
-      return b;
+      return x;
     }), requestAnimationFrame(() => {
       requestAnimationFrame(() => {
         l(
-          (m) => m.map((b) => b.id === u && b.phase === "entering" ? { ...b, phase: "visible" } : b)
+          (h) => h.map((x) => x.id === p && x.phase === "entering" ? { ...x, phase: "visible" } : x)
         );
       });
-    }), u;
+    }), p;
   }, [r, o, s]);
   G(() => {
-    const p = [];
-    for (const u of i)
-      if (u.phase === "visible" && u.duration !== 1 / 0) {
-        const v = setTimeout(() => s(u.id), u.duration);
-        p.push(v);
+    const u = [];
+    for (const p of i)
+      if (p.phase === "visible" && p.duration !== 1 / 0) {
+        const y = setTimeout(() => s(p.id), p.duration);
+        u.push(y);
       }
-    return () => p.forEach(clearTimeout);
+    return () => u.forEach(clearTimeout);
   }, [i, s]);
   const d = { toast: c, dismiss: s };
   return /* @__PURE__ */ k(Gt.Provider, { value: d, children: [
@@ -10682,20 +10683,20 @@ function He({
 }) {
   const s = O(!1);
   if (!s.current && typeof document < "u") {
-    const h = document.createElement("style");
-    h.textContent = Fo, document.head.appendChild(h), s.current = !0;
+    const m = document.createElement("style");
+    m.textContent = Fo, document.head.appendChild(m), s.current = !0;
   }
-  const c = Oe[o], d = O(null), p = O(null), u = O(!1), v = O(0), m = ee(() => {
-    const h = d.current, f = p.current;
-    if (!h || !f) return;
-    const g = h.querySelector('[data-active="true"]'), w = h.querySelector('[data-active-parent="true"]');
-    let y = null, C = !1;
-    if (g && !g.closest('[aria-hidden="true"]') ? y = g : w && !w.closest('[aria-hidden="true"]') && (y = w, C = !0), !y) {
+  const c = Oe[o], d = O(null), u = O(null), p = O(!1), y = O(0), h = ee(() => {
+    const m = d.current, f = u.current;
+    if (!m || !f) return;
+    const g = m.querySelector('[data-active="true"]'), v = m.querySelector('[data-active-parent="true"]');
+    let b = null, C = !1;
+    if (g && !g.closest('[aria-hidden="true"]') ? b = g : v && !v.closest('[aria-hidden="true"]') && (b = v, C = !0), !b) {
       f.style.opacity = "0";
       return;
     }
-    const T = h.getBoundingClientRect(), S = y.getBoundingClientRect();
-    u.current ? f.style.transition = [
+    const T = m.getBoundingClientRect(), S = b.getBoundingClientRect();
+    p.current ? f.style.transition = [
       `top 150ms ${Ee}`,
       `left 150ms ${Ee}`,
       `width 150ms ${Ee}`,
@@ -10703,29 +10704,29 @@ function He({
       "opacity 100ms ease",
       "background 150ms ease",
       "box-shadow 150ms ease"
-    ].join(", ") : (f.style.transition = "none", u.current = !0), f.style.top = `${S.top - T.top}px`, f.style.left = `${S.left - T.left}px`, f.style.width = `${S.width}px`, f.style.height = `${S.height}px`, f.style.opacity = "1", C ? (f.style.background = r ? "var(--lucent-surface-secondary)" : "color-mix(in srgb, var(--lucent-accent-default) 12%, transparent)", f.style.boxShadow = "none") : (f.style.background = r ? "var(--lucent-surface)" : "var(--lucent-accent-default)", f.style.boxShadow = r ? "inset -3px 0 0 var(--lucent-accent-default), var(--lucent-shadow-sm)" : "none");
-  }, [r]), b = ee(() => {
-    cancelAnimationFrame(v.current), v.current = requestAnimationFrame(m);
-  }, [m]);
+    ].join(", ") : (f.style.transition = "none", p.current = !0), f.style.top = `${S.top - T.top}px`, f.style.left = `${S.left - T.left}px`, f.style.width = `${S.width}px`, f.style.height = `${S.height}px`, f.style.opacity = "1", C ? (f.style.background = r ? "var(--lucent-surface-secondary)" : "color-mix(in srgb, var(--lucent-accent-default) 12%, transparent)", f.style.boxShadow = "none") : (f.style.background = r ? "var(--lucent-surface)" : "var(--lucent-accent-default)", f.style.boxShadow = r ? "inset -3px 0 0 var(--lucent-accent-default), var(--lucent-shadow-sm)" : "none");
+  }, [r]), x = ee(() => {
+    cancelAnimationFrame(y.current), y.current = requestAnimationFrame(h);
+  }, [h]);
   return G(() => {
-    const h = d.current;
-    if (!h) return;
-    const f = new MutationObserver(b);
-    return f.observe(h, {
+    const m = d.current;
+    if (!m) return;
+    const f = new MutationObserver(x);
+    return f.observe(m, {
       attributes: !0,
       attributeFilter: ["data-active", "data-active-parent", "aria-hidden"],
       subtree: !0
     }), () => f.disconnect();
-  }, [b]), G(() => {
-    const h = d.current;
-    if (!h) return;
-    const f = new ResizeObserver(b);
-    return f.observe(h), () => f.disconnect();
-  }, [b]), G(() => {
-    document.fonts.ready.then(b);
-  }, [b]), G(() => {
-    b();
-  }, [e, r, o, b]), /* @__PURE__ */ n(ue.Provider, { value: { orientation: t, depth: 0, inverse: r, size: o, hasIcons: a, parentHasIcon: !1, requestMeasure: b }, children: /* @__PURE__ */ k(
+  }, [x]), G(() => {
+    const m = d.current;
+    if (!m) return;
+    const f = new ResizeObserver(x);
+    return f.observe(m), () => f.disconnect();
+  }, [x]), G(() => {
+    document.fonts.ready.then(x);
+  }, [x]), G(() => {
+    x();
+  }, [e, r, o, x]), /* @__PURE__ */ n(ue.Provider, { value: { orientation: t, depth: 0, inverse: r, size: o, hasIcons: a, parentHasIcon: !1, requestMeasure: x }, children: /* @__PURE__ */ k(
     "nav",
     {
       ref: d,
@@ -10743,7 +10744,7 @@ function He({
         /* @__PURE__ */ n(
           "div",
           {
-            ref: p,
+            ref: u,
             "aria-hidden": !0,
             style: {
               position: "absolute",
@@ -10774,22 +10775,22 @@ function Po({
   as: s,
   style: c
 }) {
-  const { orientation: d, depth: p, inverse: u, size: v, parentHasIcon: m, requestMeasure: b } = le(ue), h = Oe[v];
+  const { orientation: d, depth: u, inverse: p, size: y, parentHasIcon: h, requestMeasure: x } = ie(ue), m = Oe[y];
   G(() => {
-    b();
-  }, [r, b]);
+    x();
+  }, [r, x]);
   let f = null;
-  const g = [], w = Array.isArray(e) ? e : [e];
-  for (const C of w)
+  const g = [], v = Array.isArray(e) ? e : [e];
+  for (const C of v)
     C != null && typeof C == "object" && "type" in C && C.type === Yt ? f = C : g.push(C);
   return f ? /* @__PURE__ */ n(
     $o,
     {
       subMenu: f,
       orientation: d,
-      depth: p,
-      inverse: u,
-      size: v,
+      depth: u,
+      inverse: p,
+      size: y,
       isActive: r,
       disabled: i,
       ...o !== void 0 && { icon: o },
@@ -10810,16 +10811,16 @@ function Po({
       style: {
         display: "flex",
         alignItems: "center",
-        gap: h.gap,
-        padding: d === "vertical" ? `${h.paddingY} ${h.paddingX} ${h.paddingY} ${o != null || m ? "var(--lucent-space-2)" : "var(--lucent-space-4)"}` : `${h.paddingY} ${h.paddingX}`,
+        gap: m.gap,
+        padding: d === "vertical" ? `${m.paddingY} ${m.paddingX} ${m.paddingY} ${o != null || h ? "var(--lucent-space-2)" : "var(--lucent-space-4)"}` : `${m.paddingY} ${m.paddingX}`,
         borderRadius: "var(--lucent-radius-md)",
         background: "transparent",
-        color: i ? "var(--lucent-text-disabled)" : r ? u ? "var(--lucent-text-primary)" : "var(--lucent-text-on-accent)" : "var(--lucent-text-secondary)",
+        color: i ? "var(--lucent-text-disabled)" : r ? p ? "var(--lucent-text-primary)" : "var(--lucent-text-on-accent)" : "var(--lucent-text-secondary)",
         border: 0,
         borderBottom: r && d === "horizontal" ? "2px solid var(--lucent-accent-default)" : d === "horizontal" ? "2px solid transparent" : 0,
         boxShadow: "none",
         fontFamily: "var(--lucent-font-family-base)",
-        fontSize: h.fontSize,
+        fontSize: m.fontSize,
         fontWeight: r ? "var(--lucent-font-weight-medium)" : "var(--lucent-font-weight-regular)",
         textDecoration: "none",
         cursor: i ? "not-allowed" : "pointer",
@@ -10835,7 +10836,7 @@ function Po({
         ...c
       },
       children: [
-        o != null && /* @__PURE__ */ n("span", { style: { display: "flex", flexShrink: 0, width: h.iconWidth, minWidth: 14, minHeight: 14, alignItems: "center", justifyContent: "center", color: "inherit" }, children: o }),
+        o != null && /* @__PURE__ */ n("span", { style: { display: "flex", flexShrink: 0, width: m.iconWidth, minWidth: 14, minHeight: 14, alignItems: "center", justifyContent: "center", color: "inherit" }, children: o }),
         /* @__PURE__ */ n("span", { style: { flex: 1 }, children: g }),
         a != null && /* @__PURE__ */ n("span", { style: { display: "flex", flexShrink: 0, marginLeft: "auto" }, children: a })
       ]
@@ -10853,38 +10854,38 @@ function $o({
   subMenu: s,
   orientation: c,
   depth: d,
-  inverse: p,
-  size: u
+  inverse: u,
+  size: p
 }) {
-  const { hasIcons: v, requestMeasure: m } = le(ue), b = Oe[u], [h, f] = E(!1), g = O(null), [w, y] = E(0), C = O(null), T = O(null), S = O(), L = No(s), I = o && !L, A = !I && !h && L, P = o || L;
+  const { hasIcons: y, requestMeasure: h } = ie(ue), x = Oe[p], [m, f] = E(!1), g = O(null), [v, b] = E(0), C = O(null), T = O(null), S = O(), L = No(s), I = o && !L, A = !I && !m && L, P = o || L;
   G(() => {
-    m();
-  }, [h, o, L, m]), G(() => {
+    h();
+  }, [m, o, L, h]), G(() => {
     if (c !== "vertical") return;
     const D = g.current;
     if (D)
-      if (h) {
+      if (m) {
         const R = D.scrollHeight;
-        y(R);
+        b(R);
         const H = setTimeout(() => {
-          y(void 0);
+          b(void 0);
         }, 130);
         return () => clearTimeout(H);
       } else
-        y(D.scrollHeight), D.getBoundingClientRect(), y(0);
-  }, [h, c]), G(() => {
-    if (c !== "horizontal" || !h) return;
+        b(D.scrollHeight), D.getBoundingClientRect(), b(0);
+  }, [m, c]), G(() => {
+    if (c !== "horizontal" || !m) return;
     const D = (R) => {
       C.current && !C.current.contains(R.target) && U();
     };
     return document.addEventListener("mousedown", D), () => document.removeEventListener("mousedown", D);
-  }, [c, h]), ie(() => {
-    if (c !== "horizontal" || !h) return;
+  }, [c, m]), se(() => {
+    if (c !== "horizontal" || !m) return;
     const D = T.current;
     if (!D) return;
     const R = D.getBoundingClientRect();
     R.right > window.innerWidth && (D.style.left = "auto", D.style.right = "0"), R.bottom > window.innerHeight && (D.style.top = "auto", D.style.bottom = "100%", D.style.marginTop = "0", D.style.marginBottom = "var(--lucent-space-1)");
-  }, [c, h]);
+  }, [c, m]);
   const [$, M] = E("idle"), [N, q] = E(!1), W = () => {
     a || (q(!0), M("entering"), f(!0));
   }, U = () => {
@@ -10892,9 +10893,9 @@ function $o({
       f(!1), q(!1), M("idle");
     }, Je);
   }, J = () => {
-    a || (c === "horizontal" ? h ? U() : W() : f(!h));
+    a || (c === "horizontal" ? m ? U() : W() : f(!m));
   }, Z = (D) => {
-    a || (c === "vertical" ? (D.key === "ArrowRight" && !h && (D.preventDefault(), f(!0)), D.key === "ArrowLeft" && h && (D.preventDefault(), f(!1))) : (D.key === "ArrowDown" && !h && (D.preventDefault(), W()), D.key === "ArrowUp" && h && (D.preventDefault(), U())), (D.key === "Enter" || D.key === " ") && (D.preventDefault(), J()), D.key === "Escape" && h && (D.preventDefault(), c === "horizontal" ? U() : f(!1)));
+    a || (c === "vertical" ? (D.key === "ArrowRight" && !m && (D.preventDefault(), f(!0)), D.key === "ArrowLeft" && m && (D.preventDefault(), f(!1))) : (D.key === "ArrowDown" && !m && (D.preventDefault(), W()), D.key === "ArrowUp" && m && (D.preventDefault(), U())), (D.key === "Enter" || D.key === " ") && (D.preventDefault(), J()), D.key === "Escape" && m && (D.preventDefault(), c === "horizontal" ? U() : f(!1)));
   }, F = () => {
     c === "horizontal" && !a && (clearTimeout(S.current), W());
   }, z = () => {
@@ -10917,20 +10918,20 @@ function $o({
               J(), i == null || i(D);
             },
             onKeyDown: Z,
-            "aria-expanded": h,
+            "aria-expanded": m,
             "aria-disabled": a || void 0,
             style: {
               display: "flex",
               alignItems: "center",
-              gap: b.gap,
-              padding: `${b.paddingY} ${b.paddingX}`,
+              gap: x.gap,
+              padding: `${x.paddingY} ${x.paddingX}`,
               borderRadius: "var(--lucent-radius-md)",
               background: "transparent",
               color: a ? "var(--lucent-text-disabled)" : P ? "var(--lucent-text-primary)" : "var(--lucent-text-secondary)",
               border: 0,
               borderBottom: P ? "2px solid var(--lucent-accent-default)" : "2px solid transparent",
               fontFamily: "var(--lucent-font-family-base)",
-              fontSize: b.fontSize,
+              fontSize: x.fontSize,
               fontWeight: P ? "var(--lucent-font-weight-medium)" : "var(--lucent-font-weight-regular)",
               cursor: a ? "not-allowed" : "pointer",
               transition: "background var(--lucent-duration-fast) var(--lucent-easing-default), color var(--lucent-duration-fast) var(--lucent-easing-default)",
@@ -10941,13 +10942,13 @@ function $o({
               ...l
             },
             children: [
-              t != null && /* @__PURE__ */ n("span", { style: { display: "flex", flexShrink: 0, width: b.iconWidth, minWidth: 14, minHeight: 14, alignItems: "center", justifyContent: "center", color: "inherit" }, children: t }),
+              t != null && /* @__PURE__ */ n("span", { style: { display: "flex", flexShrink: 0, width: x.iconWidth, minWidth: 14, minHeight: 14, alignItems: "center", justifyContent: "center", color: "inherit" }, children: t }),
               /* @__PURE__ */ n("span", { children: e }),
               r != null && /* @__PURE__ */ n("span", { style: { display: "flex", flexShrink: 0 }, children: r })
             ]
           }
         ),
-        N && /* @__PURE__ */ n(ue.Provider, { value: { orientation: "vertical", depth: 0, inverse: p, size: u, hasIcons: v, parentHasIcon: !1, requestMeasure: m }, children: /* @__PURE__ */ n(
+        N && /* @__PURE__ */ n(ue.Provider, { value: { orientation: "vertical", depth: 0, inverse: u, size: p, hasIcons: y, parentHasIcon: !1, requestMeasure: h }, children: /* @__PURE__ */ n(
           "div",
           {
             ref: T,
@@ -10982,21 +10983,21 @@ function $o({
           J(), i == null || i(D);
         },
         onKeyDown: Z,
-        "aria-expanded": h,
+        "aria-expanded": m,
         "aria-disabled": a || void 0,
         style: {
           display: "flex",
           alignItems: "center",
-          gap: b.gap,
+          gap: x.gap,
           width: "100%",
-          padding: `${b.paddingY} ${b.paddingX} ${b.paddingY} ${t != null ? "var(--lucent-space-2)" : "var(--lucent-space-4)"}`,
+          padding: `${x.paddingY} ${x.paddingX} ${x.paddingY} ${t != null ? "var(--lucent-space-2)" : "var(--lucent-space-4)"}`,
           borderRadius: "var(--lucent-radius-md)",
           background: "transparent",
-          color: a ? "var(--lucent-text-disabled)" : I ? p ? "var(--lucent-text-primary)" : "var(--lucent-text-on-accent)" : A || P ? "var(--lucent-text-primary)" : "var(--lucent-text-secondary)",
+          color: a ? "var(--lucent-text-disabled)" : I ? u ? "var(--lucent-text-primary)" : "var(--lucent-text-on-accent)" : A || P ? "var(--lucent-text-primary)" : "var(--lucent-text-secondary)",
           border: 0,
           boxShadow: "none",
           fontFamily: "var(--lucent-font-family-base)",
-          fontSize: b.fontSize,
+          fontSize: x.fontSize,
           fontWeight: P ? "var(--lucent-font-weight-medium)" : "var(--lucent-font-weight-regular)",
           textAlign: "left",
           textDecoration: "none",
@@ -11008,7 +11009,7 @@ function $o({
           ...l
         },
         children: [
-          t != null && /* @__PURE__ */ n("span", { style: { display: "flex", flexShrink: 0, width: b.iconWidth, minWidth: 14, minHeight: 14, alignItems: "center", justifyContent: "center", color: "inherit" }, children: t }),
+          t != null && /* @__PURE__ */ n("span", { style: { display: "flex", flexShrink: 0, width: x.iconWidth, minWidth: 14, minHeight: 14, alignItems: "center", justifyContent: "center", color: "inherit" }, children: t }),
           /* @__PURE__ */ n("span", { style: { flex: 1 }, children: e }),
           r != null && /* @__PURE__ */ n("span", { style: { display: "flex", flexShrink: 0 }, children: r })
         ]
@@ -11018,22 +11019,22 @@ function $o({
       "div",
       {
         ref: g,
-        "aria-hidden": !h,
+        "aria-hidden": !m,
         style: {
           overflow: "hidden",
-          height: w !== void 0 ? w : "auto",
+          height: v !== void 0 ? v : "auto",
           transition: "height 120ms var(--lucent-easing-default)"
         },
-        children: /* @__PURE__ */ n(ue.Provider, { value: { orientation: c, depth: d + 1, inverse: p, size: u, hasIcons: v, parentHasIcon: t != null, requestMeasure: m }, children: /* @__PURE__ */ n(
+        children: /* @__PURE__ */ n(ue.Provider, { value: { orientation: c, depth: d + 1, inverse: u, size: p, hasIcons: y, parentHasIcon: t != null, requestMeasure: h }, children: /* @__PURE__ */ n(
           "div",
           {
             style: {
               display: "flex",
               flexDirection: "column",
-              gap: b.itemGap,
+              gap: x.itemGap,
               padding: "var(--lucent-space-1) 0",
-              marginLeft: t != null ? `calc(${b.iconWidth} + ${b.gap})` : "var(--lucent-space-3)",
-              animation: h ? "lucent-navmenu-open 200ms var(--lucent-easing-default) forwards" : void 0
+              marginLeft: t != null ? `calc(${x.iconWidth} + ${x.gap})` : "var(--lucent-space-3)",
+              animation: m ? "lucent-navmenu-open 200ms var(--lucent-easing-default) forwards" : void 0
             },
             children: s
           }
@@ -11067,13 +11068,13 @@ function Wo({
   collapsible: i,
   style: l
 }) {
-  const { orientation: s, inverse: c, size: d, hasIcons: p } = le(ue), u = Oe[d], v = i ?? t != null, m = p ? "var(--lucent-space-2)" : "var(--lucent-space-4)";
+  const { orientation: s, inverse: c, size: d, hasIcons: u } = ie(ue), p = Oe[d], y = i ?? t != null, h = u ? "var(--lucent-space-2)" : "var(--lucent-space-4)";
   if (s === "horizontal")
     return /* @__PURE__ */ n(ae, { children: e });
-  const b = o !== void 0, [h, f] = E(r), g = b ? o : h, w = O(null), [y, C] = E(g ? void 0 : 0);
+  const x = o !== void 0, [m, f] = E(r), g = x ? o : m, v = O(null), [b, C] = E(g ? void 0 : 0);
   G(() => {
-    if (!v) return;
-    const S = w.current;
+    if (!y) return;
+    const S = v.current;
     if (S)
       if (g) {
         const L = S.scrollHeight;
@@ -11084,13 +11085,13 @@ function Wo({
         return () => clearTimeout(I);
       } else
         C(S.scrollHeight), S.getBoundingClientRect(), C(0);
-  }, [g, v]);
+  }, [g, y]);
   const T = ee(() => {
     const S = !g;
-    b || f(S), a == null || a(S);
-  }, [g, b, a]);
+    x || f(S), a == null || a(S);
+  }, [g, x, a]);
   return t ? /* @__PURE__ */ k("div", { style: { display: "flex", flexDirection: "column", marginTop: "var(--lucent-space-3)", ...l }, children: [
-    v ? /* @__PURE__ */ k(
+    y ? /* @__PURE__ */ k(
       "button",
       {
         onClick: T,
@@ -11100,7 +11101,7 @@ function Wo({
           alignItems: "center",
           justifyContent: "space-between",
           width: "100%",
-          padding: `var(--lucent-space-1) var(--lucent-space-3) var(--lucent-space-1) ${m}`,
+          padding: `var(--lucent-space-1) var(--lucent-space-3) var(--lucent-space-1) ${h}`,
           background: "none",
           border: 0,
           cursor: "pointer",
@@ -11125,7 +11126,7 @@ function Wo({
       "div",
       {
         style: {
-          padding: `var(--lucent-space-1) var(--lucent-space-3) var(--lucent-space-1) ${m}`,
+          padding: `var(--lucent-space-1) var(--lucent-space-3) var(--lucent-space-1) ${h}`,
           fontFamily: "var(--lucent-font-family-base)",
           fontSize: "var(--lucent-font-size-xs)",
           fontWeight: "var(--lucent-font-weight-semibold)",
@@ -11138,14 +11139,14 @@ function Wo({
         children: t
       }
     ),
-    v ? /* @__PURE__ */ n(
+    y ? /* @__PURE__ */ n(
       "div",
       {
-        ref: w,
+        ref: v,
         "aria-hidden": !g,
         style: {
           overflow: "hidden",
-          height: y !== void 0 ? y : "auto",
+          height: b !== void 0 ? b : "auto",
           transition: "height 120ms var(--lucent-easing-default)"
         },
         children: /* @__PURE__ */ n(
@@ -11154,17 +11155,17 @@ function Wo({
             style: {
               display: "flex",
               flexDirection: "column",
-              gap: u.itemGap
+              gap: p.itemGap
             },
             children: e
           }
         )
       }
-    ) : /* @__PURE__ */ n("div", { style: { display: "flex", flexDirection: "column", gap: u.itemGap }, children: e })
-  ] }) : /* @__PURE__ */ n("div", { style: { display: "flex", flexDirection: "column", gap: u.itemGap, ...l }, children: e });
+    ) : /* @__PURE__ */ n("div", { style: { display: "flex", flexDirection: "column", gap: p.itemGap }, children: e })
+  ] }) : /* @__PURE__ */ n("div", { style: { display: "flex", flexDirection: "column", gap: p.itemGap, ...l }, children: e });
 }
 function Oo({ style: e }) {
-  const { orientation: t } = le(ue);
+  const { orientation: t } = ie(ue);
   return /* @__PURE__ */ n(
     "div",
     {
@@ -11337,26 +11338,26 @@ function Xo({ r: e, g: t, b: r }) {
 }
 function ce(e) {
   const { r: t, g: r, b: o } = Ko(e), a = t / 255, i = r / 255, l = o / 255, s = Math.max(a, i, l), c = Math.min(a, i, l);
-  let d = 0, p = 0;
-  const u = (s + c) / 2;
+  let d = 0, u = 0;
+  const p = (s + c) / 2;
   if (s !== c) {
-    const v = s - c;
-    switch (p = u > 0.5 ? v / (2 - s - c) : v / (s + c), s) {
+    const y = s - c;
+    switch (u = p > 0.5 ? y / (2 - s - c) : y / (s + c), s) {
       case a:
-        d = (i - l) / v + (i < l ? 6 : 0);
+        d = (i - l) / y + (i < l ? 6 : 0);
         break;
       case i:
-        d = (l - a) / v + 2;
+        d = (l - a) / y + 2;
         break;
       case l:
-        d = (a - i) / v + 4;
+        d = (a - i) / y + 4;
         break;
     }
     d /= 6;
   }
-  return [d * 360, p, u];
+  return [d * 360, u, p];
 }
-function se(e, t, r) {
+function le(e, t, r) {
   e = (e % 360 + 360) % 360, t = Math.min(1, Math.max(0, t)), r = Math.min(1, Math.max(0, r));
   const o = (1 - Math.abs(2 * r - 1)) * t, a = o * (1 - Math.abs(e / 60 % 2 - 1)), i = r - o / 2;
   let l = 0, s = 0, c = 0;
@@ -11364,7 +11365,7 @@ function se(e, t, r) {
 }
 function X(e, t) {
   const [r, o, a] = ce(e);
-  return se(r, o, Math.min(1, Math.max(0, a + t)));
+  return le(r, o, Math.min(1, Math.max(0, a + t)));
 }
 const Jo = 222, Zo = 0.12;
 function Kt(e, t) {
@@ -11372,22 +11373,22 @@ function Kt(e, t) {
 }
 function Qo(e) {
   const [t, r, o] = ce(e), [a, i] = Kt(t, r);
-  return se(a, i, Math.max(0.04, Math.min(0.2, 0.07 + (1 - o))));
+  return le(a, i, Math.max(0.04, Math.min(0.2, 0.07 + (1 - o))));
 }
 function Ze(e) {
   const [t, r, o] = ce(e), [a, i] = Kt(t, r);
-  return se(a, i, Math.max(0.06, Math.min(0.5, (1 - o) * 0.6 + 0.06)));
+  return le(a, i, Math.max(0.06, Math.min(0.5, (1 - o) * 0.6 + 0.06)));
 }
 function Qe(e) {
   const [t, r, o] = ce(e);
-  return se(t, r, Math.max(0.04, Math.min(0.97, 1 - o + 0.04)));
+  return le(t, r, Math.max(0.04, Math.min(0.97, 1 - o + 0.04)));
 }
 function ye(e) {
   const [t, r, o] = ce(e);
-  return se(t, r, Math.max(0.02, Math.min(0.98, 1 - o)));
+  return le(t, r, Math.max(0.02, Math.min(0.98, 1 - o)));
 }
 function ei(e) {
-  const t = Qo(e.bgBase), [r, o, a] = ce(t), i = (l) => se(r, o, Math.min(0.25, a + l));
+  const t = Qo(e.bgBase), [r, o, a] = ce(t), i = (l) => le(r, o, Math.min(0.25, a + l));
   return {
     // ── Non-color tokens: carry over from light unchanged ──────────────────
     ...e,
@@ -11456,21 +11457,21 @@ function ai(e) {
   const t = parseInt(e.slice(1, 3), 16) / 255, r = parseInt(e.slice(3, 5), 16) / 255, o = parseInt(e.slice(5, 7), 16) / 255, a = (i) => i <= 0.03928 ? i / 12.92 : Math.pow((i + 0.055) / 1.055, 2.4);
   return 0.2126 * a(t) + 0.7152 * a(r) + 0.0722 * a(o);
 }
-const ri = 0.2126729, oi = 0.7151522, ii = 0.072175, si = 0.56, li = 0.57, ci = 0.65, di = 0.62, Bt = 0.022, ui = 1.414, pi = 1.14, fi = 1.14, qt = 0.027, Rt = 0.027;
-function Lt(e) {
+const ri = 0.2126729, oi = 0.7151522, ii = 0.072175, si = 0.56, li = 0.57, ci = 0.65, di = 0.62, qt = 0.022, ui = 1.414, pi = 1.14, fi = 1.14, Rt = 0.027, Lt = 0.027;
+function Ft(e) {
   const t = parseInt(e.slice(1, 3), 16) / 255, r = parseInt(e.slice(3, 5), 16) / 255, o = parseInt(e.slice(5, 7), 16) / 255, a = Math.pow(t, 2.4), i = Math.pow(r, 2.4), l = Math.pow(o, 2.4);
   let s = ri * a + oi * i + ii * l;
-  return s < 0 && (s = 0), s < Bt ? s + Math.pow(Bt - s, ui) : s;
+  return s < 0 && (s = 0), s < qt ? s + Math.pow(qt - s, ui) : s;
 }
 function Ne(e, t) {
-  const r = Lt(e), o = Lt(t);
+  const r = Ft(e), o = Ft(t);
   let a;
   if (r > o) {
     const i = (Math.pow(r, si) - Math.pow(o, li)) * pi;
-    a = i < qt ? 0 : i - qt;
+    a = i < Rt ? 0 : i - Rt;
   } else {
     const i = (Math.pow(r, ci) - Math.pow(o, di)) * fi;
-    a = i > -Rt ? 0 : i + Rt;
+    a = i > -Lt ? 0 : i + Lt;
   }
   return a * 100;
 }
@@ -11481,21 +11482,21 @@ function Jt(e) {
 function hi(e, t, r = 60) {
   if (Math.abs(Ne(e, t)) >= r) return e;
   const o = parseInt(e.slice(1, 3), 16) / 255, a = parseInt(e.slice(3, 5), 16) / 255, i = parseInt(e.slice(5, 7), 16) / 255, l = Math.max(o, a, i), s = Math.min(o, a, i);
-  let c = 0, d = 0, p = (l + s) / 2;
+  let c = 0, d = 0, u = (l + s) / 2;
   if (l !== s) {
-    const m = l - s;
-    d = p > 0.5 ? m / (2 - l - s) : m / (l + s), l === o ? c = ((a - i) / m + (a < i ? 6 : 0)) / 6 : l === a ? c = ((i - o) / m + 2) / 6 : c = ((o - a) / m + 4) / 6;
+    const h = l - s;
+    d = u > 0.5 ? h / (2 - l - s) : h / (l + s), l === o ? c = ((a - i) / h + (a < i ? 6 : 0)) / 6 : l === a ? c = ((i - o) / h + 2) / 6 : c = ((o - a) / h + 4) / 6;
   }
-  const v = ai(t) > 0.5 ? -5e-3 : 5e-3;
-  for (let m = 0; m < 100; m++) {
-    p = Math.min(1, Math.max(0, p + v));
-    const b = mi(c, d, p);
-    if (Math.abs(Ne(b, t)) >= r) return b;
+  const y = ai(t) > 0.5 ? -5e-3 : 5e-3;
+  for (let h = 0; h < 100; h++) {
+    u = Math.min(1, Math.max(0, u + y));
+    const x = mi(c, d, u);
+    if (Math.abs(Ne(x, t)) >= r) return x;
   }
   return e;
 }
 function mi(e, t, r) {
-  const o = (c, d, p) => (p < 0 && (p += 1), p > 1 && (p -= 1), p < 0.16666666666666666 ? c + (d - c) * 6 * p : p < 0.5 ? d : p < 0.6666666666666666 ? c + (d - c) * (0.6666666666666666 - p) * 6 : c);
+  const o = (c, d, u) => (u < 0 && (u += 1), u > 1 && (u -= 1), u < 0.16666666666666666 ? c + (d - c) * 6 * u : u < 0.5 ? d : u < 0.6666666666666666 ? c + (d - c) * (0.6666666666666666 - u) * 6 : c);
   let a, i, l;
   if (t === 0)
     a = i = l = r;
@@ -11508,7 +11509,7 @@ function mi(e, t, r) {
 }
 function gi(e, t) {
   const [r, o, a] = ce(e);
-  return t ? se(r, o * 0.3, Math.min(1, a + (1 - a) * 0.85)) : se(r, o, Math.min(0.25, a + 0.04));
+  return t ? le(r, o * 0.3, Math.min(1, a + (1 - a) * 0.85)) : le(r, o, Math.min(0.25, a + 0.04));
 }
 const We = {
   subtle: { light: 0.95, dark: 0.12 },
@@ -11516,11 +11517,11 @@ const We = {
 };
 function Ae(e, t) {
   const [r, o] = ce(e);
-  return se(r, o * 0.5, t ? We.subtle.light : We.subtle.dark);
+  return le(r, o * 0.5, t ? We.subtle.light : We.subtle.dark);
 }
 function Be(e, t) {
   const [r, o] = ce(e);
-  return se(r, o, t ? We.text.light : We.text.dark);
+  return le(r, o, t ? We.text.light : We.text.dark);
 }
 function Zt(e, t, r) {
   const o = {}, a = r === "light";
@@ -12023,32 +12024,32 @@ function hl({
       const f = Qt(o, e);
       if (l) {
         const g = {};
-        for (const [w, y] of Object.entries(l))
-          (w.startsWith("space") || w.startsWith("radius") || w.startsWith("shadow") || w.startsWith("duration") || w.startsWith("easing")) && (g[w] = y);
+        for (const [v, b] of Object.entries(l))
+          (v.startsWith("space") || v.startsWith("radius") || v.startsWith("shadow") || v.startsWith("duration") || v.startsWith("easing")) && (g[v] = b);
         return { ...f, ...g };
       }
       return f;
     }
-    const d = e === "dark" ? Xt : Ve, p = l ? { ...l, ...r } : r, u = p ? { ...d, ...p } : d, v = p ? Zt(p, u, e) : {}, m = (p == null ? void 0 : p.accentBorder) ?? (e === "light" ? X(u.accentDefault, -0.15) : X(u.accentDefault, 0.15)), b = (p == null ? void 0 : p.textOnAccent) ?? Jt(u.accentDefault), h = hi(u.accentDefault, b);
+    const d = e === "dark" ? Xt : Ve, u = l ? { ...l, ...r } : r, p = u ? { ...d, ...u } : d, y = u ? Zt(u, p, e) : {}, h = (u == null ? void 0 : u.accentBorder) ?? (e === "light" ? X(p.accentDefault, -0.15) : X(p.accentDefault, 0.15)), x = (u == null ? void 0 : u.textOnAccent) ?? Jt(p.accentDefault), m = hi(p.accentDefault, x);
     return {
-      ...u,
-      ...v,
-      accentDefault: h,
-      textOnAccent: b,
-      accentBorder: m
+      ...p,
+      ...y,
+      accentDefault: m,
+      textOnAccent: x,
+      accentBorder: h
     };
   })(), c = `html { font-size: 14px; }
 ` + ni(s, ":root");
-  return ie(() => {
+  return se(() => {
     let d = document.getElementById(`lucent-tokens-${i}`);
     return d || (d = document.createElement("style"), d.id = `lucent-tokens-${i}`, document.head.appendChild(d)), d.textContent = c, () => {
-      var p;
-      (p = document.getElementById(`lucent-tokens-${i}`)) == null || p.remove();
+      var u;
+      (u = document.getElementById(`lucent-tokens-${i}`)) == null || u.remove();
     };
   }, [i, c]), /* @__PURE__ */ n(fn.Provider, { value: { theme: e, tokens: s }, children: a });
 }
 function ml() {
-  return le(fn);
+  return ie(fn);
 }
 const gl = {
   bgBase: {
@@ -12346,7 +12347,8 @@ export {
   $s as Card,
   Ns as CardBleed,
   Ws as CardManifest,
-  Ft as Checkbox,
+  ct as CardPaddingContext,
+  Pt as Checkbox,
   es as CheckboxManifest,
   Ln as Chip,
   vs as CodeBlock,
@@ -12402,8 +12404,8 @@ export {
   ks as SEGMENTED_CONTROL_MANIFEST,
   Fs as SearchInput,
   Ps as SearchInputManifest,
-  Nt as SegmentedControl,
-  $t as Select,
+  Wt as SegmentedControl,
+  Nt as Select,
   is as SelectManifest,
   Us as Skeleton,
   Gs as SkeletonManifest,