lucent-ui 0.4.0 → 0.4.2

package/dist/index.js

@@ -1,5 +1,5 @@
 import { jsxs as h, jsx as e, Fragment as V } from "react/jsx-runtime";
-import { forwardRef as H, useRef as F, useEffect as B, useState as z, useCallback as J, useContext as re, createContext as oe, useLayoutEffect as ie, useId as le } from "react";
+import { forwardRef as H, useRef as F, useEffect as B, useState as z, useCallback as Q, useContext as re, createContext as oe, useLayoutEffect as ie, useId as le } from "react";
 const ge = {
   primary: {
     background: "var(--lucent-accent-default)",
@@ -26,12 +26,12 @@ const ge = {
   md: { height: "38px", padding: "0 var(--lucent-space-4)", fontSize: "var(--lucent-font-size-md)" },
   lg: { height: "46px", padding: "0 var(--lucent-space-5)", fontSize: "var(--lucent-font-size-lg)" }
 }, be = H(
-  ({ variant: t = "primary", size: n = "md", loading: a = !1, fullWidth: o = !1, spread: r = !1, leftIcon: i, rightIcon: l, chevron: c = !1, disableHoverStyles: f = !1, children: g, disabled: y, style: d, ...s }, p) => {
+  ({ variant: t = "primary", size: n = "md", loading: a = !1, fullWidth: o = !1, spread: r = !1, leftIcon: i, rightIcon: l, chevron: c = !1, disableHoverStyles: f = !1, children: g, disabled: y, style: d, ...s }, u) => {
     const v = y ?? a;
     return /* @__PURE__ */ h(
       "button",
       {
-        ref: p,
+        ref: u,
         disabled: v,
         "aria-busy": a,
         style: {
@@ -61,28 +61,28 @@ const ge = {
           }
         },
         onMouseEnter: (m) => {
-          var C;
-          !v && !f && ye(m.currentTarget, t), (C = s.onMouseEnter) == null || C.call(s, m);
+          var k;
+          !v && !f && ye(m.currentTarget, t), (k = s.onMouseEnter) == null || k.call(s, m);
         },
         onMouseLeave: (m) => {
-          var C;
-          !v && !f && xe(m.currentTarget, t), (C = s.onMouseLeave) == null || C.call(s, m);
+          var k;
+          !v && !f && xe(m.currentTarget, t), (k = s.onMouseLeave) == null || k.call(s, m);
         },
         onMouseDown: (m) => {
-          var C;
-          v || (m.currentTarget.style.transform = "scale(0.95)"), (C = s.onMouseDown) == null || C.call(s, m);
+          var k;
+          v || (m.currentTarget.style.transform = "scale(0.95)"), (k = s.onMouseDown) == null || k.call(s, m);
         },
         onMouseUp: (m) => {
-          var C;
-          m.currentTarget.style.transform = "", (C = s.onMouseUp) == null || C.call(s, m);
+          var k;
+          m.currentTarget.style.transform = "", (k = s.onMouseUp) == null || k.call(s, m);
         },
         onFocus: (m) => {
-          var C;
-          m.currentTarget.style.boxShadow = "0 0 0 3px var(--lucent-accent-subtle)", (C = s.onFocus) == null || C.call(s, m);
+          var k;
+          m.currentTarget.style.boxShadow = "0 0 0 3px var(--lucent-accent-subtle)", (k = s.onFocus) == null || k.call(s, m);
         },
         onBlur: (m) => {
-          var C;
-          m.currentTarget.style.boxShadow = "", (C = s.onBlur) == null || C.call(s, m);
+          var k;
+          m.currentTarget.style.boxShadow = "", (k = s.onBlur) == null || k.call(s, m);
         },
         ...s,
         children: [
@@ -274,20 +274,20 @@ const Wt = {
               ...l
             },
             onMouseEnter: (s) => {
-              var p;
-              !c.disabled && s.currentTarget !== document.activeElement && (s.currentTarget.style.borderColor = y ? "var(--lucent-danger-default)" : "var(--lucent-border-strong)"), (p = c.onMouseEnter) == null || p.call(c, s);
+              var u;
+              !c.disabled && s.currentTarget !== document.activeElement && (s.currentTarget.style.borderColor = y ? "var(--lucent-danger-default)" : "var(--lucent-border-strong)"), (u = c.onMouseEnter) == null || u.call(c, s);
             },
             onMouseLeave: (s) => {
-              var p;
-              !c.disabled && s.currentTarget !== document.activeElement && (s.currentTarget.style.borderColor = y ? "var(--lucent-danger-default)" : "var(--lucent-border-default)"), (p = c.onMouseLeave) == null || p.call(c, s);
+              var u;
+              !c.disabled && s.currentTarget !== document.activeElement && (s.currentTarget.style.borderColor = y ? "var(--lucent-danger-default)" : "var(--lucent-border-default)"), (u = c.onMouseLeave) == null || u.call(c, s);
             },
             onFocus: (s) => {
-              var p;
-              s.currentTarget.style.borderColor = y ? "var(--lucent-danger-default)" : "var(--lucent-focus-ring)", s.currentTarget.style.boxShadow = `0 0 0 3px ${y ? "var(--lucent-danger-subtle)" : "var(--lucent-accent-subtle)"}`, (p = c.onFocus) == null || p.call(c, s);
+              var u;
+              s.currentTarget.style.borderColor = y ? "var(--lucent-danger-default)" : "var(--lucent-focus-ring)", s.currentTarget.style.boxShadow = `0 0 0 3px ${y ? "var(--lucent-danger-subtle)" : "var(--lucent-accent-subtle)"}`, (u = c.onFocus) == null || u.call(c, s);
             },
             onBlur: (s) => {
-              var p;
-              s.currentTarget.style.borderColor = y ? "var(--lucent-danger-default)" : "var(--lucent-border-default)", s.currentTarget.style.boxShadow = "none", (p = c.onBlur) == null || p.call(c, s);
+              var u;
+              s.currentTarget.style.borderColor = y ? "var(--lucent-danger-default)" : "var(--lucent-border-default)", s.currentTarget.style.boxShadow = "none", (u = c.onBlur) == null || u.call(c, s);
             },
             ...c
           }
@@ -363,12 +363,12 @@ const Vt = {
   }
 }, Te = H(
   ({ label: t, helperText: n, errorText: a, autoResize: o = !1, maxLength: r, showCount: i = !1, id: l, value: c, onChange: f, style: g, ...y }, d) => {
-    const s = F(null), p = d ?? s, v = l ?? `lucent-textarea-${Math.random().toString(36).slice(2, 7)}`, m = !!a, C = typeof c == "string" ? c.length : 0;
+    const s = F(null), u = d ?? s, v = l ?? `lucent-textarea-${Math.random().toString(36).slice(2, 7)}`, m = !!a, k = typeof c == "string" ? c.length : 0;
     return B(() => {
       if (!o) return;
-      const b = p.current;
+      const b = u.current;
       b && (b.style.height = "auto", b.style.height = `${b.scrollHeight}px`);
-    }, [c, o, p]), /* @__PURE__ */ h("div", { style: { display: "flex", flexDirection: "column", gap: "var(--lucent-space-1)", width: "100%" }, children: [
+    }, [c, o, u]), /* @__PURE__ */ h("div", { style: { display: "flex", flexDirection: "column", gap: "var(--lucent-space-1)", width: "100%" }, children: [
       t && /* @__PURE__ */ e("label", { htmlFor: v, style: {
         fontSize: "var(--lucent-font-size-sm)",
         fontWeight: "var(--lucent-font-weight-medium)",
@@ -378,7 +378,7 @@ const Vt = {
       /* @__PURE__ */ e(
         "textarea",
         {
-          ref: p,
+          ref: u,
           id: v,
           maxLength: r,
           value: c,
@@ -420,12 +420,12 @@ const Vt = {
         ] }),
         (i || r) && /* @__PURE__ */ h("span", { style: {
           fontSize: "var(--lucent-font-size-xs)",
-          color: r && C >= r ? "var(--lucent-danger-text)" : "var(--lucent-text-secondary)",
+          color: r && k >= r ? "var(--lucent-danger-text)" : "var(--lucent-text-secondary)",
           fontFamily: "var(--lucent-font-family-mono)",
           flexShrink: 0,
           marginLeft: "var(--lucent-space-2)"
         }, children: [
-          C,
+          k,
           r ? `/${r}` : ""
         ] })
       ] })
@@ -786,24 +786,24 @@ const Kt = {
     style: f,
     ...g
   }, y) => {
-    const d = F(null), s = l ?? `lucent-checkbox-${Math.random().toString(36).slice(2, 7)}`, p = Fe[n], v = o !== void 0, [m, C] = z(r ?? !1), b = v ? !!o : m, x = F(b), [E, S] = z(0);
+    const d = F(null), s = l ?? `lucent-checkbox-${Math.random().toString(36).slice(2, 7)}`, u = Fe[n], v = o !== void 0, [m, k] = z(r ?? !1), b = v ? !!o : m, x = F(b), [E, T] = z(0);
     B(() => {
-      !i && x.current !== b && (x.current = b, S((k) => k + 1));
+      !i && x.current !== b && (x.current = b, T((S) => S + 1));
     }, [b, i]);
-    const u = J(
-      (k) => {
-        d.current = k, typeof y == "function" ? y(k) : y && (y.current = k);
+    const p = Q(
+      (S) => {
+        d.current = S, typeof y == "function" ? y(S) : y && (y.current = S);
       },
       [y]
     );
     B(() => {
       d.current && (d.current.indeterminate = a);
     }, [a]);
-    const T = (k) => {
-      v || C(k.target.checked), c == null || c(k);
+    const C = (S) => {
+      v || k(S.target.checked), c == null || c(S);
     }, D = i ? "var(--lucent-text-disabled)" : "var(--lucent-text-on-accent)", w = {
-      width: p,
-      height: p,
+      width: u,
+      height: u,
       borderRadius: "var(--lucent-radius-sm)",
       border: `1.5px solid ${i ? "transparent" : b || a ? "var(--lucent-accent-default)" : "var(--lucent-border-strong)"}`,
       background: i ? "var(--lucent-bg-muted)" : b || a ? "var(--lucent-accent-default)" : "var(--lucent-surface-default)",
@@ -835,12 +835,12 @@ const Kt = {
             /* @__PURE__ */ e(
               "input",
               {
-                ref: u,
+                ref: p,
                 type: "checkbox",
                 id: s,
                 checked: v ? o : m,
                 disabled: i,
-                onChange: T,
+                onChange: C,
                 style: { position: "absolute", opacity: 0, width: 0, height: 0, margin: 0, pointerEvents: "none" },
                 ...g
               }
@@ -849,8 +849,8 @@ const Kt = {
               b && !a && /* @__PURE__ */ e(
                 "svg",
                 {
-                  width: p - 4,
-                  height: p - 4,
+                  width: u - 4,
+                  height: u - 4,
                   viewBox: "0 0 10 10",
                   fill: "none",
                   style: { animation: "lucent-cb-mark 200ms cubic-bezier(0.34, 1.56, 0.64, 1) forwards" },
@@ -860,8 +860,8 @@ const Kt = {
               a && /* @__PURE__ */ e(
                 "svg",
                 {
-                  width: p - 4,
-                  height: p - 4,
+                  width: u - 4,
+                  height: u - 4,
                   viewBox: "0 0 10 10",
                   fill: "none",
                   style: { animation: "lucent-cb-mark 200ms cubic-bezier(0.34, 1.56, 0.64, 1) forwards" },
@@ -985,11 +985,11 @@ function Be({
 }
 const $e = { sm: 14, md: 16 };
 function Jt({ value: t, label: n, size: a = "md", disabled: o, id: r, onChange: i, checked: l, ...c }) {
-  const f = re(ce), g = r ?? `lucent-radio-${Math.random().toString(36).slice(2, 7)}`, y = $e[a], d = o ?? (f == null ? void 0 : f.disabled) ?? !1, s = f ? f.value === t : !!l, p = F(s), [v, m] = z(0);
+  const f = re(ce), g = r ?? `lucent-radio-${Math.random().toString(36).slice(2, 7)}`, y = $e[a], d = o ?? (f == null ? void 0 : f.disabled) ?? !1, s = f ? f.value === t : !!l, u = F(s), [v, m] = z(0);
   B(() => {
-    !d && p.current !== s && (p.current = s, m((E) => E + 1));
+    !d && u.current !== s && (u.current = s, m((E) => E + 1));
   }, [s, d]);
-  const C = (E) => {
+  const k = (E) => {
     f == null || f.onChange(t), i == null || i(E);
   }, b = {
     width: y / 2,
@@ -1036,7 +1036,7 @@ function Jt({ value: t, label: n, size: a = "md", disabled: o, id: r, onChange:
               name: (f == null ? void 0 : f.name) ?? c.name,
               checked: s,
               disabled: d,
-              onChange: C,
+              onChange: k,
               style: { position: "absolute", opacity: 0, width: 0, height: 0, margin: 0, pointerEvents: "none" },
               ...c
             }
@@ -1146,7 +1146,7 @@ const Zt = {
   sm: { track: [28, 16], thumb: 12 },
   md: { track: [36, 20], thumb: 16 },
   lg: { track: [44, 24], thumb: 20 }
-}, Q = "cubic-bezier(0.34, 1.56, 0.64, 1)", We = `
+}, Z = "cubic-bezier(0.34, 1.56, 0.64, 1)", We = `
 @keyframes lucent-toggle-pop {
   0%   { transform: scale(1); }
   35%  { transform: scale(0.94); }
@@ -1165,12 +1165,12 @@ function en({
   style: c,
   ...f
 }) {
-  const g = i ?? `lucent-toggle-${Math.random().toString(36).slice(2, 7)}`, y = a !== void 0, [d, s] = z(o ?? !1), p = y ? !!a : d, v = F(p), [m, C] = z(0);
+  const g = i ?? `lucent-toggle-${Math.random().toString(36).slice(2, 7)}`, y = a !== void 0, [d, s] = z(o ?? !1), u = y ? !!a : d, v = F(u), [m, k] = z(0);
   B(() => {
-    !r && v.current !== p && (v.current = p, C((T) => T + 1));
-  }, [p, r]);
-  const { track: [b, x], thumb: E } = Pe[n], S = p ? b - E - 2 : 2, u = (T) => {
-    y || s(T.target.checked), l == null || l(T);
+    !r && v.current !== u && (v.current = u, k((C) => C + 1));
+  }, [u, r]);
+  const { track: [b, x], thumb: E } = Pe[n], T = u ? b - E - 2 : 2, p = (C) => {
+    y || s(C.target.checked), l == null || l(C);
   };
   return /* @__PURE__ */ h(V, { children: [
     /* @__PURE__ */ e("style", { children: We }),
@@ -1197,8 +1197,8 @@ function en({
               id: g,
               checked: y ? a : d,
               disabled: r,
-              onChange: u,
-              "aria-checked": p,
+              onChange: p,
+              "aria-checked": u,
               style: { position: "absolute", opacity: 0, width: 0, height: 0, margin: 0, pointerEvents: "none" },
               ...f
             }
@@ -1212,10 +1212,10 @@ function en({
                 width: b,
                 height: x,
                 borderRadius: x / 2,
-                background: r ? "var(--lucent-bg-muted)" : p ? "var(--lucent-accent-default)" : "var(--lucent-border-strong)",
+                background: r ? "var(--lucent-bg-muted)" : u ? "var(--lucent-accent-default)" : "var(--lucent-border-strong)",
                 flexShrink: 0,
                 transition: "background var(--lucent-duration-fast) var(--lucent-easing-default)",
-                animation: m > 0 ? `lucent-toggle-pop 240ms ${Q} forwards` : void 0
+                animation: m > 0 ? `lucent-toggle-pop 240ms ${Z} forwards` : void 0
               },
               children: /* @__PURE__ */ e(
                 "span",
@@ -1223,13 +1223,13 @@ function en({
                   style: {
                     position: "absolute",
                     top: 2,
-                    left: S,
+                    left: T,
                     width: E,
                     height: E,
                     borderRadius: "50%",
                     background: "#ffffff",
                     boxShadow: "0 1px 3px rgb(0 0 0 / 0.2)",
-                    transition: `left 260ms ${Q}`
+                    transition: `left 260ms ${Z}`
                   }
                 }
               )
@@ -1357,26 +1357,26 @@ const tn = {
               transition: "border-color var(--lucent-duration-fast) var(--lucent-easing-default)",
               ...f
             },
-            onMouseEnter: (p) => {
+            onMouseEnter: (u) => {
               var v;
-              !l && p.currentTarget !== document.activeElement && (p.currentTarget.style.borderColor = s ? "var(--lucent-danger-default)" : "var(--lucent-border-strong)"), (v = g.onMouseEnter) == null || v.call(g, p);
+              !l && u.currentTarget !== document.activeElement && (u.currentTarget.style.borderColor = s ? "var(--lucent-danger-default)" : "var(--lucent-border-strong)"), (v = g.onMouseEnter) == null || v.call(g, u);
             },
-            onMouseLeave: (p) => {
+            onMouseLeave: (u) => {
               var v;
-              !l && p.currentTarget !== document.activeElement && (p.currentTarget.style.borderColor = s ? "var(--lucent-danger-default)" : "var(--lucent-border-default)"), (v = g.onMouseLeave) == null || v.call(g, p);
+              !l && u.currentTarget !== document.activeElement && (u.currentTarget.style.borderColor = s ? "var(--lucent-danger-default)" : "var(--lucent-border-default)"), (v = g.onMouseLeave) == null || v.call(g, u);
             },
-            onFocus: (p) => {
+            onFocus: (u) => {
               var v;
-              p.currentTarget.style.borderColor = s ? "var(--lucent-danger-default)" : "var(--lucent-focus-ring)", p.currentTarget.style.boxShadow = `0 0 0 3px ${s ? "var(--lucent-danger-subtle)" : "var(--lucent-accent-subtle)"}`, (v = g.onFocus) == null || v.call(g, p);
+              u.currentTarget.style.borderColor = s ? "var(--lucent-danger-default)" : "var(--lucent-focus-ring)", u.currentTarget.style.boxShadow = `0 0 0 3px ${s ? "var(--lucent-danger-subtle)" : "var(--lucent-accent-subtle)"}`, (v = g.onFocus) == null || v.call(g, u);
             },
-            onBlur: (p) => {
+            onBlur: (u) => {
               var v;
-              p.currentTarget.style.borderColor = s ? "var(--lucent-danger-default)" : "var(--lucent-border-default)", p.currentTarget.style.boxShadow = "none", (v = g.onBlur) == null || v.call(g, p);
+              u.currentTarget.style.borderColor = s ? "var(--lucent-danger-default)" : "var(--lucent-border-default)", u.currentTarget.style.boxShadow = "none", (v = g.onBlur) == null || v.call(g, u);
             },
             ...g,
             children: [
               i && /* @__PURE__ */ e("option", { value: "", disabled: !0, children: i }),
-              t.map((p) => /* @__PURE__ */ e("option", { value: p.value, disabled: p.disabled, children: p.label }, p.value))
+              t.map((u) => /* @__PURE__ */ e("option", { value: u.value, disabled: u.disabled, children: u.label }, u.value))
             ]
           }
         ),
@@ -2198,14 +2198,14 @@ function hn({
   id: c,
   style: f
 }) {
-  const [g, y] = z(!1), [d, s] = z(null), p = F(null), v = g && o.length > 0, m = () => {
+  const [g, y] = z(!1), [d, s] = z(null), u = F(null), v = g && o.length > 0, m = () => {
     n("");
-  }, C = (S) => {
-    r == null || r(S), y(!1);
+  }, k = (T) => {
+    r == null || r(T), y(!1);
   }, b = () => {
-    p.current = setTimeout(() => y(!1), 150);
+    u.current = setTimeout(() => y(!1), 150);
   }, x = () => {
-    p.current && clearTimeout(p.current), y(!0);
+    u.current && clearTimeout(u.current), y(!0);
   }, E = i ? /* @__PURE__ */ e(Ae, { size: "sm" }) : t ? /* @__PURE__ */ e(
     "button",
     {
@@ -2222,11 +2222,11 @@ function hn({
         borderRadius: "var(--lucent-radius-sm)",
         color: "var(--lucent-text-secondary)"
       },
-      onMouseEnter: (S) => {
-        S.currentTarget.style.color = "var(--lucent-text-primary)";
+      onMouseEnter: (T) => {
+        T.currentTarget.style.color = "var(--lucent-text-primary)";
       },
-      onMouseLeave: (S) => {
-        S.currentTarget.style.color = "var(--lucent-text-secondary)";
+      onMouseLeave: (T) => {
+        T.currentTarget.style.color = "var(--lucent-text-secondary)";
       },
       children: /* @__PURE__ */ e(tt, {})
     }
@@ -2238,7 +2238,7 @@ function hn({
         id: c,
         type: "search",
         value: t,
-        onChange: (S) => n(S.target.value),
+        onChange: (T) => n(T.target.value),
         placeholder: a,
         disabled: l,
         leftElement: /* @__PURE__ */ e(et, {}),
@@ -2263,23 +2263,23 @@ function hn({
           boxShadow: "var(--lucent-shadow-md)",
           overflow: "hidden"
         },
-        children: o.map((S, u) => /* @__PURE__ */ e(
+        children: o.map((T, p) => /* @__PURE__ */ e(
           "div",
           {
             role: "option",
             "aria-selected": !1,
-            onMouseDown: () => C(S),
-            onMouseEnter: () => s(u),
+            onMouseDown: () => k(T),
+            onMouseEnter: () => s(p),
             onMouseLeave: () => s(null),
             style: {
               padding: "var(--lucent-space-2) var(--lucent-space-3)",
               cursor: "pointer",
-              background: d === u ? "var(--lucent-bg-subtle)" : "transparent",
+              background: d === p ? "var(--lucent-bg-subtle)" : "transparent",
               transition: "background var(--lucent-duration-fast) var(--lucent-easing-default)"
             },
-            children: /* @__PURE__ */ e(q, { as: "span", size: "md", children: S.label })
+            children: /* @__PURE__ */ e(q, { as: "span", size: "md", children: T.label })
           },
-          S.id
+          T.id
         ))
       }
     )
@@ -2826,7 +2826,7 @@ const wn = {
   circle: "var(--lucent-radius-full)",
   rectangle: "var(--lucent-radius-md)"
 };
-function Z({
+function ee({
   width: t,
   height: n,
   radius: a,
@@ -2868,7 +2868,7 @@ function kn({
   return t === "text" && o > 1 ? /* @__PURE__ */ h(V, { children: [
     g,
     /* @__PURE__ */ e("div", { style: { display: "flex", flexDirection: "column", gap: "var(--lucent-space-2)", ...l }, children: Array.from({ length: o }).map((y, d) => /* @__PURE__ */ e(
-      Z,
+      ee,
       {
         width: d === o - 1 ? "70%" : n,
         height: c,
@@ -2880,7 +2880,7 @@ function kn({
   ] }) : /* @__PURE__ */ h(V, { children: [
     g,
     /* @__PURE__ */ e(
-      Z,
+      ee,
       {
         width: t === "circle" ? a ?? 40 : n,
         height: c,
@@ -3046,18 +3046,18 @@ function Tn({ items: t, separator: n = "/", style: a }) {
 }
 function Cn({ tabs: t, defaultValue: n, value: a, onChange: o, style: r }) {
   var b;
-  const i = a !== void 0, [l, c] = z(n ?? ((b = t[0]) == null ? void 0 : b.value) ?? ""), f = i ? a : l, [g, y] = z(null), d = F([]), [s, p] = z(null), v = F(!1);
+  const i = a !== void 0, [l, c] = z(n ?? ((b = t[0]) == null ? void 0 : b.value) ?? ""), f = i ? a : l, [g, y] = z(null), d = F([]), [s, u] = z(null), v = F(!1);
   ie(() => {
-    const x = t.findIndex((S) => S.value === f), E = d.current[x];
-    E && (p({ left: E.offsetLeft, width: E.offsetWidth, animate: v.current }), v.current = !0);
+    const x = t.findIndex((T) => T.value === f), E = d.current[x];
+    E && (u({ left: E.offsetLeft, width: E.offsetWidth, animate: v.current }), v.current = !0);
   }, [f, t]);
   const m = (x) => {
     i || c(x), o == null || o(x);
-  }, C = (x, E) => {
+  }, k = (x, E) => {
     var D;
-    const S = t.map((w, k) => w.disabled ? -1 : k).filter((w) => w !== -1), u = S.indexOf(E);
-    let T = -1;
-    x.key === "ArrowRight" && (T = S[(u + 1) % S.length] ?? -1), x.key === "ArrowLeft" && (T = S[(u - 1 + S.length) % S.length] ?? -1), x.key === "Home" && (T = S[0] ?? -1), x.key === "End" && (T = S[S.length - 1] ?? -1), T !== -1 && (x.preventDefault(), (D = d.current[T]) == null || D.focus(), m(t[T].value));
+    const T = t.map((w, S) => w.disabled ? -1 : S).filter((w) => w !== -1), p = T.indexOf(E);
+    let C = -1;
+    x.key === "ArrowRight" && (C = T[(p + 1) % T.length] ?? -1), x.key === "ArrowLeft" && (C = T[(p - 1 + T.length) % T.length] ?? -1), x.key === "Home" && (C = T[0] ?? -1), x.key === "End" && (C = T[T.length - 1] ?? -1), C !== -1 && (x.preventDefault(), (D = d.current[C]) == null || D.focus(), m(t[C].value));
   };
   return /* @__PURE__ */ h("div", { style: { display: "flex", flexDirection: "column", ...r }, children: [
     /* @__PURE__ */ h(
@@ -3071,36 +3071,36 @@ function Cn({ tabs: t, defaultValue: n, value: a, onChange: o, style: r }) {
         },
         children: [
           t.map((x, E) => {
-            const S = x.value === f, u = x.disabled ?? !1;
+            const T = x.value === f, p = x.disabled ?? !1;
             return /* @__PURE__ */ e(
               "button",
               {
-                ref: (T) => {
-                  d.current[E] = T;
+                ref: (C) => {
+                  d.current[E] = C;
                 },
                 role: "tab",
-                "aria-selected": S,
+                "aria-selected": T,
                 "aria-controls": `lucent-tabpanel-${x.value}`,
                 id: `lucent-tab-${x.value}`,
-                disabled: u,
-                tabIndex: S ? 0 : -1,
+                disabled: p,
+                tabIndex: T ? 0 : -1,
                 onClick: () => {
-                  u || m(x.value);
+                  p || m(x.value);
                 },
-                onKeyDown: (T) => C(T, E),
+                onKeyDown: (C) => k(C, E),
                 onMouseEnter: () => {
-                  u || y(E);
+                  p || y(E);
                 },
                 onMouseLeave: () => y(null),
                 style: {
                   padding: "var(--lucent-space-1) var(--lucent-space-2) var(--lucent-space-3)",
                   background: "none",
                   border: "none",
-                  cursor: u ? "not-allowed" : "pointer",
+                  cursor: p ? "not-allowed" : "pointer",
                   fontFamily: "var(--lucent-font-family-base)",
                   fontSize: "var(--lucent-font-size-md)",
-                  fontWeight: S ? "var(--lucent-font-weight-medium)" : "var(--lucent-font-weight-regular)",
-                  color: u ? "var(--lucent-text-disabled)" : S ? "var(--lucent-text-primary)" : "var(--lucent-text-secondary)",
+                  fontWeight: T ? "var(--lucent-font-weight-medium)" : "var(--lucent-font-weight-regular)",
+                  color: p ? "var(--lucent-text-disabled)" : T ? "var(--lucent-text-primary)" : "var(--lucent-text-secondary)",
                   transition: "color var(--lucent-duration-fast) var(--lucent-easing-default)",
                   whiteSpace: "nowrap",
                   outline: "none"
@@ -3109,7 +3109,7 @@ function Cn({ tabs: t, defaultValue: n, value: a, onChange: o, style: r }) {
                   display: "block",
                   padding: "var(--lucent-space-1) var(--lucent-space-3)",
                   borderRadius: "var(--lucent-radius-md)",
-                  background: g === E && !S ? "var(--lucent-bg-subtle)" : "transparent",
+                  background: g === E && !T ? "var(--lucent-bg-subtle)" : "transparent",
                   transition: "background var(--lucent-duration-fast) var(--lucent-easing-default)"
                 }, children: x.label })
               },
@@ -3157,15 +3157,15 @@ const ht = `
 }
 `;
 function In({ trigger: t, children: n, defaultOpen: a = !1, open: o, onOpenChange: r, style: i }) {
-  const l = o !== void 0, [c, f] = z(a), g = l ? o : c, y = F(null), [d, s] = z(g ? void 0 : 0), p = F(!1);
+  const l = o !== void 0, [c, f] = z(a), g = l ? o : c, y = F(null), [d, s] = z(g ? void 0 : 0), u = F(!1);
   B(() => {
     const m = y.current;
     if (m)
       if (g) {
-        const C = m.scrollHeight;
-        s(C), p.current = !0;
+        const k = m.scrollHeight;
+        s(k), u.current = !0;
         const b = setTimeout(() => {
-          s(void 0), p.current = !1;
+          s(void 0), u.current = !1;
         }, 220);
         return () => clearTimeout(b);
       } else
@@ -3251,7 +3251,7 @@ function mt({ open: t }) {
     }
   );
 }
-function ee(t) {
+function G(t) {
   return typeof t == "number" ? `${t}px` : t;
 }
 function Mn({
@@ -3261,10 +3261,15 @@ function Mn({
   sidebarWidth: o = 240,
   headerHeight: r = 48,
   sidebarCollapsed: i = !1,
-  mainStyle: l,
-  style: c
+  rightSidebar: l,
+  rightSidebarWidth: c = 240,
+  rightSidebarCollapsed: f = !1,
+  footer: g,
+  footerHeight: y = 28,
+  mainStyle: d,
+  style: s
 }) {
-  const f = ee(r), g = ee(o);
+  const u = G(r), v = G(o), m = G(c), k = G(y);
   return /* @__PURE__ */ h(
     "div",
     {
@@ -3274,7 +3279,7 @@ function Mn({
         height: "100vh",
         overflow: "hidden",
         fontFamily: "var(--lucent-font-family-base)",
-        ...c
+        ...s
       },
       children: [
         n != null && /* @__PURE__ */ e(
@@ -3282,7 +3287,7 @@ function Mn({
           {
             style: {
               flexShrink: 0,
-              height: f,
+              height: u,
               zIndex: 10,
               background: "var(--lucent-surface-default)"
             },
@@ -3294,7 +3299,7 @@ function Mn({
             "div",
             {
               style: {
-                width: i ? 0 : g,
+                width: i ? 0 : v,
                 flexShrink: 0,
                 overflow: "hidden",
                 overflowY: i ? "hidden" : "auto",
@@ -3311,17 +3316,43 @@ function Mn({
                 flex: 1,
                 overflowY: "auto",
                 minWidth: 0,
-                margin: "0 var(--lucent-space-3) var(--lucent-space-3) 0",
+                margin: l != null ? "0 0 var(--lucent-space-3) 0" : "0 var(--lucent-space-3) var(--lucent-space-3) 0",
                 border: "1px solid var(--lucent-border-default)",
                 borderRadius: "var(--lucent-radius-lg)",
                 boxShadow: "var(--lucent-shadow-sm)",
                 background: "var(--lucent-surface-default)",
-                ...l
+                ...d
               },
               children: t
             }
+          ),
+          l != null && /* @__PURE__ */ e(
+            "aside",
+            {
+              style: {
+                width: f ? 0 : m,
+                flexShrink: 0,
+                overflow: "hidden",
+                overflowY: f ? "hidden" : "auto",
+                background: "var(--lucent-surface-default)",
+                transition: "width 200ms var(--lucent-easing-default)"
+              },
+              children: l
+            }
           )
-        ] })
+        ] }),
+        g != null && /* @__PURE__ */ e(
+          "div",
+          {
+            style: {
+              flexShrink: 0,
+              height: k,
+              zIndex: 10,
+              background: "var(--lucent-surface-default)"
+            },
+            children: g
+          }
+        )
       ]
     }
   );
@@ -3378,21 +3409,21 @@ function zn({
   emptyState: i,
   style: l
 }) {
-  const [c, f] = z(null), [g, y] = z(0), [d, s] = z(null), p = o !== void 0, v = p ? o : g, m = c ? [...n].sort((u, T) => {
-    const D = u[c.key], w = T[c.key], k = String(D ?? "").localeCompare(String(w ?? ""), void 0, { numeric: !0 });
-    return c.dir === "asc" ? k : -k;
-  }) : n, C = a > 0 ? m.slice(v * a, (v + 1) * a) : m, b = a > 0 ? Math.max(1, Math.ceil(m.length / a)) : 1, x = (u) => {
-    p || y(u), r == null || r(u);
-  }, E = (u) => {
-    f((T) => !T || T.key !== u ? { key: u, dir: "asc" } : T.dir === "asc" ? { key: u, dir: "desc" } : null), p || y(0), r == null || r(0);
-  }, S = [];
+  const [c, f] = z(null), [g, y] = z(0), [d, s] = z(null), u = o !== void 0, v = u ? o : g, m = c ? [...n].sort((p, C) => {
+    const D = p[c.key], w = C[c.key], S = String(D ?? "").localeCompare(String(w ?? ""), void 0, { numeric: !0 });
+    return c.dir === "asc" ? S : -S;
+  }) : n, k = a > 0 ? m.slice(v * a, (v + 1) * a) : m, b = a > 0 ? Math.max(1, Math.ceil(m.length / a)) : 1, x = (p) => {
+    u || y(p), r == null || r(p);
+  }, E = (p) => {
+    f((C) => !C || C.key !== p ? { key: p, dir: "asc" } : C.dir === "asc" ? { key: p, dir: "desc" } : null), u || y(0), r == null || r(0);
+  }, T = [];
   if (b <= 7)
-    for (let u = 0; u < b; u++) S.push(u);
+    for (let p = 0; p < b; p++) T.push(p);
   else {
-    S.push(0), v > 2 && S.push("…");
-    for (let u = Math.max(1, v - 1); u <= Math.min(b - 2, v + 1); u++)
-      S.push(u);
-    v < b - 3 && S.push("…"), S.push(b - 1);
+    T.push(0), v > 2 && T.push("…");
+    for (let p = Math.max(1, v - 1); p <= Math.min(b - 2, v + 1); p++)
+      T.push(p);
+    v < b - 3 && T.push("…"), T.push(b - 1);
   }
   return /* @__PURE__ */ h("div", { style: { display: "flex", flexDirection: "column", gap: "var(--lucent-space-3)", ...l }, children: [
     /* @__PURE__ */ e("div", { style: {
@@ -3405,46 +3436,46 @@ function zn({
       fontFamily: "var(--lucent-font-family-base)",
       fontSize: "var(--lucent-font-size-sm)"
     }, children: [
-      /* @__PURE__ */ e("thead", { children: /* @__PURE__ */ e("tr", { style: { borderBottom: "1px solid var(--lucent-border-default)" }, children: t.map((u) => {
-        const T = (c == null ? void 0 : c.key) === u.key ? c.dir : "none";
+      /* @__PURE__ */ e("thead", { children: /* @__PURE__ */ e("tr", { style: { borderBottom: "1px solid var(--lucent-border-default)" }, children: t.map((p) => {
+        const C = (c == null ? void 0 : c.key) === p.key ? c.dir : "none";
         return /* @__PURE__ */ e(
           "th",
           {
-            onClick: u.sortable ? () => E(u.key) : void 0,
+            onClick: p.sortable ? () => E(p.key) : void 0,
             style: {
               padding: "var(--lucent-space-3) var(--lucent-space-4)",
-              textAlign: u.align ?? "left",
+              textAlign: p.align ?? "left",
               fontWeight: "var(--lucent-font-weight-medium)",
               color: "var(--lucent-text-secondary)",
               background: "var(--lucent-bg-subtle)",
-              cursor: u.sortable ? "pointer" : "default",
+              cursor: p.sortable ? "pointer" : "default",
               userSelect: "none",
               whiteSpace: "nowrap",
-              ...u.width ? { width: u.width } : {}
+              ...p.width ? { width: p.width } : {}
             },
             children: /* @__PURE__ */ h("span", { style: { display: "inline-flex", alignItems: "center", gap: "var(--lucent-space-1)" }, children: [
-              u.header,
-              u.sortable && /* @__PURE__ */ e(gt, { state: T })
+              p.header,
+              p.sortable && /* @__PURE__ */ e(gt, { state: C })
             ] })
           },
-          u.key
+          p.key
         );
       }) }) }),
-      /* @__PURE__ */ e("tbody", { children: C.length === 0 ? /* @__PURE__ */ e("tr", { children: /* @__PURE__ */ e(
+      /* @__PURE__ */ e("tbody", { children: k.length === 0 ? /* @__PURE__ */ e("tr", { children: /* @__PURE__ */ e(
         "td",
         {
           colSpan: t.length,
           style: { padding: "var(--lucent-space-12)", textAlign: "center" },
           children: i ?? /* @__PURE__ */ e(q, { color: "secondary", children: "No data" })
         }
-      ) }) : C.map((u, T) => /* @__PURE__ */ e(
+      ) }) : k.map((p, C) => /* @__PURE__ */ e(
         "tr",
         {
-          onMouseEnter: () => s(T),
+          onMouseEnter: () => s(C),
           onMouseLeave: () => s(null),
           style: {
-            borderBottom: T < C.length - 1 ? "1px solid var(--lucent-border-subtle)" : "none",
-            background: d === T ? "var(--lucent-bg-subtle)" : "var(--lucent-surface-default)",
+            borderBottom: C < k.length - 1 ? "1px solid var(--lucent-border-subtle)" : "none",
+            background: d === C ? "var(--lucent-bg-subtle)" : "var(--lucent-surface-default)",
             transition: "background var(--lucent-duration-fast) var(--lucent-easing-default)"
           },
           children: t.map((D) => /* @__PURE__ */ e(
@@ -3456,12 +3487,12 @@ function zn({
                 textAlign: D.align ?? "left",
                 verticalAlign: "middle"
               },
-              children: D.render ? D.render(u, T) : String(u[D.key] ?? "")
+              children: D.render ? D.render(p, C) : String(p[D.key] ?? "")
             },
             D.key
           ))
         },
-        T
+        C
       )) })
     ] }) }),
     a > 0 && m.length > 0 && /* @__PURE__ */ h("div", { style: {
@@ -3474,7 +3505,7 @@ function zn({
       /* @__PURE__ */ e(q, { color: "secondary", size: "sm", children: m.length === 1 ? "1 row" : `${v * a + 1}–${Math.min((v + 1) * a, m.length)} of ${m.length} rows` }),
       /* @__PURE__ */ h("div", { style: { display: "flex", alignItems: "center", gap: "var(--lucent-space-1)" }, children: [
         /* @__PURE__ */ e(
-          _,
+          Y,
           {
             onClick: () => x(v - 1),
             disabled: v === 0,
@@ -3482,25 +3513,25 @@ function zn({
             children: /* @__PURE__ */ e(te, { dir: "left" })
           }
         ),
-        S.map(
-          (u, T) => u === "…" ? /* @__PURE__ */ e("span", { style: {
+        T.map(
+          (p, C) => p === "…" ? /* @__PURE__ */ e("span", { style: {
             padding: "0 var(--lucent-space-1)",
             color: "var(--lucent-text-disabled)",
             fontSize: "var(--lucent-font-size-sm)"
-          }, children: "…" }, `ellipsis-${T}`) : /* @__PURE__ */ e(
-            _,
+          }, children: "…" }, `ellipsis-${C}`) : /* @__PURE__ */ e(
+            Y,
             {
-              onClick: () => x(u),
-              active: u === v,
-              "aria-label": `Page ${u + 1}`,
-              "aria-current": u === v ? "page" : void 0,
-              children: u + 1
+              onClick: () => x(p),
+              active: p === v,
+              "aria-label": `Page ${p + 1}`,
+              "aria-current": p === v ? "page" : void 0,
+              children: p + 1
             },
-            u
+            p
           )
         ),
         /* @__PURE__ */ e(
-          _,
+          Y,
           {
             onClick: () => x(v + 1),
             disabled: v >= b - 1,
@@ -3512,7 +3543,7 @@ function zn({
     ] })
   ] });
 }
-function _({
+function Y({
   children: t,
   onClick: n,
   disabled: a,
@@ -3659,21 +3690,21 @@ function qn({
   onOpenChange: r,
   style: i
 }) {
-  const l = o !== void 0, [c, f] = z(!1), g = l ? o : c, [y, d] = z(""), [s, p] = z(0), v = F(null), m = F(null), C = F(!1);
-  if (!C.current) {
+  const l = o !== void 0, [c, f] = z(!1), g = l ? o : c, [y, d] = z(""), [s, u] = z(0), v = F(null), m = F(null), k = F(!1);
+  if (!k.current) {
     const w = document.createElement("style");
-    w.textContent = vt, document.head.appendChild(w), C.current = !0;
+    w.textContent = vt, document.head.appendChild(w), k.current = !0;
   }
-  const b = J((w) => {
+  const b = Q((w) => {
     l || f(w), r == null || r(w);
   }, [l, r]);
   B(() => {
-    const w = (k) => {
-      (k.metaKey || k.ctrlKey) && k.key === a && (k.preventDefault(), b(!g));
+    const w = (S) => {
+      (S.metaKey || S.ctrlKey) && S.key === a && (S.preventDefault(), b(!g));
     };
     return window.addEventListener("keydown", w), () => window.removeEventListener("keydown", w);
   }, [g, a, b]), B(() => {
-    g && (d(""), p(0), setTimeout(() => {
+    g && (d(""), u(0), setTimeout(() => {
       var w;
       return (w = v.current) == null ? void 0 : w.focus();
     }, 10));
@@ -3682,24 +3713,24 @@ function qn({
   B(() => {
     const w = m.current;
     if (!w) return;
-    const k = w.querySelector('[data-active="true"]');
-    k == null || k.scrollIntoView({ block: "nearest" });
+    const S = w.querySelector('[data-active="true"]');
+    S == null || S.scrollIntoView({ block: "nearest" });
   }, [s]);
-  const S = (w) => {
+  const T = (w) => {
     w.disabled || (w.onSelect(), b(!1));
-  }, u = (w) => {
+  }, p = (w) => {
     if (w.key === "Escape") {
       b(!1);
       return;
     }
-    if (w.key === "ArrowDown" && (w.preventDefault(), p((k) => Math.min(k + 1, E.length - 1))), w.key === "ArrowUp" && (w.preventDefault(), p((k) => Math.max(k - 1, 0))), w.key === "Enter") {
-      const k = E[s];
-      k && S(k);
+    if (w.key === "ArrowDown" && (w.preventDefault(), u((S) => Math.min(S + 1, E.length - 1))), w.key === "ArrowUp" && (w.preventDefault(), u((S) => Math.max(S - 1, 0))), w.key === "Enter") {
+      const S = E[s];
+      S && T(S);
     }
-  }, T = [];
+  }, C = [];
   for (const w of x) {
-    const k = T[T.length - 1];
-    k && k.group === w.group ? k.items.push(w) : T.push({ group: w.group, items: [w] });
+    const S = C[C.length - 1];
+    S && S.group === w.group ? S.items.push(w) : C.push({ group: w.group, items: [w] });
   }
   if (!g) return null;
   let D = 0;
@@ -3760,9 +3791,9 @@ function qn({
                   "aria-controls": "lucent-command-list",
                   value: y,
                   onChange: (w) => {
-                    d(w.target.value), p(0);
+                    d(w.target.value), u(0);
                   },
-                  onKeyDown: u,
+                  onKeyDown: p,
                   placeholder: n,
                   style: {
                     flex: 1,
@@ -3799,12 +3830,12 @@ function qn({
                   'No results for "',
                   y,
                   '"'
-                ] }) }) : T.map(({ group: w, items: k }, P) => /* @__PURE__ */ h("div", { children: [
+                ] }) }) : C.map(({ group: w, items: S }, P) => /* @__PURE__ */ h("div", { children: [
                   w && /* @__PURE__ */ e("div", { style: {
                     padding: "var(--lucent-space-2) var(--lucent-space-4) var(--lucent-space-1)",
                     ...P > 0 ? { borderTop: "1px solid var(--lucent-border-subtle)", marginTop: "var(--lucent-space-1)" } : {}
                   }, children: /* @__PURE__ */ e(q, { size: "xs", color: "secondary", weight: "medium", children: w }) }),
-                  k.map((N) => {
+                  S.map((N) => {
                     const $ = N.disabled ?? !1;
                     let I = !1;
                     return $ || (I = D === s, D++), /* @__PURE__ */ h(
@@ -3814,11 +3845,11 @@ function qn({
                         "aria-selected": I,
                         "aria-disabled": $,
                         "data-active": I,
-                        onClick: () => S(N),
+                        onClick: () => T(N),
                         onMouseEnter: () => {
                           if (!$) {
                             const M = E.indexOf(N);
-                            M !== -1 && p(M);
+                            M !== -1 && u(M);
                           }
                         },
                         style: {
@@ -3855,7 +3886,7 @@ function qn({
               ["↑↓", "Navigate"],
               ["↵", "Select"],
               ["Esc", "Close"]
-            ].map(([w, k]) => /* @__PURE__ */ h("span", { style: { display: "flex", alignItems: "center", gap: "var(--lucent-space-1)" }, children: [
+            ].map(([w, S]) => /* @__PURE__ */ h("span", { style: { display: "flex", alignItems: "center", gap: "var(--lucent-space-1)" }, children: [
               /* @__PURE__ */ e("kbd", { style: {
                 padding: "1px 5px",
                 borderRadius: "var(--lucent-radius-sm)",
@@ -3865,7 +3896,7 @@ function qn({
                 fontSize: "var(--lucent-font-size-xs)",
                 color: "var(--lucent-text-secondary)"
               }, children: w }),
-              /* @__PURE__ */ e(q, { size: "xs", color: "secondary", children: k })
+              /* @__PURE__ */ e(q, { size: "xs", color: "secondary", children: S })
             ] }, w)) })
           ]
         }
@@ -4008,12 +4039,12 @@ function An({
   max: l,
   style: c
 }) {
-  const f = n !== void 0, [g, y] = z(a), d = f ? n : g, [s, p] = z(!1), [v, m] = z(""), [C, b] = z(0), [x, E] = z(!1), S = F(null), u = F(null), T = le();
+  const f = n !== void 0, [g, y] = z(a), d = f ? n : g, [s, u] = z(!1), [v, m] = z(""), [k, b] = z(0), [x, E] = z(!1), T = F(null), p = F(null), C = le();
   B(() => {
     if (!s) return;
     const I = (M) => {
       var R;
-      (R = S.current) != null && R.contains(M.target) || (p(!1), m(""));
+      (R = T.current) != null && R.contains(M.target) || (u(!1), m(""));
     };
     return document.addEventListener("mousedown", I), () => document.removeEventListener("mousedown", I);
   }, [s]);
@@ -4023,27 +4054,27 @@ function An({
   }, w = (I) => {
     const M = d.filter((R) => R !== I);
     f || y(M), o == null || o(M);
-  }, k = t.filter(
+  }, S = t.filter(
     (I) => I.label.toLowerCase().includes(v.toLowerCase())
   ), P = (I) => {
     if (I.key === "Escape") {
-      p(!1), m("");
+      u(!1), m("");
       return;
     }
-    if (I.key === "ArrowDown" && (I.preventDefault(), p(!0), b((M) => Math.min(M + 1, k.length - 1))), I.key === "ArrowUp" && (I.preventDefault(), b((M) => Math.max(M - 1, 0))), I.key === "Enter") {
+    if (I.key === "ArrowDown" && (I.preventDefault(), u(!0), b((M) => Math.min(M + 1, S.length - 1))), I.key === "ArrowUp" && (I.preventDefault(), b((M) => Math.max(M - 1, 0))), I.key === "Enter") {
       I.preventDefault();
-      const M = k[C];
+      const M = S[k];
       M && !M.disabled && D(M.value);
     }
     I.key === "Backspace" && v === "" && d.length > 0 && w(d[d.length - 1]);
   }, N = l !== void 0 && d.length >= l, $ = i ? "var(--lucent-border-default)" : x ? "var(--lucent-accent-default)" : "var(--lucent-border-default)";
-  return /* @__PURE__ */ h("div", { ref: S, style: { position: "relative", ...c }, children: [
+  return /* @__PURE__ */ h("div", { ref: T, style: { position: "relative", ...c }, children: [
     /* @__PURE__ */ h(
       "div",
       {
         onClick: () => {
           var I;
-          i || (p(!0), (I = u.current) == null || I.focus());
+          i || (u(!0), (I = p.current) == null || I.focus());
         },
         style: {
           display: "flex",
@@ -4068,10 +4099,10 @@ function An({
           /* @__PURE__ */ e(
             "input",
             {
-              ref: u,
+              ref: p,
               value: v,
               onChange: (I) => {
-                m(I.target.value), p(!0), b(0);
+                m(I.target.value), u(!0), b(0);
               },
               onKeyDown: P,
               onFocus: () => E(!0),
@@ -4079,7 +4110,7 @@ function An({
               disabled: i,
               placeholder: d.length === 0 ? r : "",
               "aria-autocomplete": "list",
-              "aria-controls": T,
+              "aria-controls": C,
               "aria-expanded": s,
               role: "combobox",
               style: {
@@ -4102,7 +4133,7 @@ function An({
     s && !i && /* @__PURE__ */ h(
       "div",
       {
-        id: T,
+        id: C,
         role: "listbox",
         "aria-multiselectable": "true",
         style: {
@@ -4120,8 +4151,8 @@ function An({
           padding: "var(--lucent-space-1) 0"
         },
         children: [
-          k.length === 0 ? /* @__PURE__ */ e("div", { style: { padding: "var(--lucent-space-3) var(--lucent-space-4)" }, children: /* @__PURE__ */ e(q, { color: "secondary", size: "sm", children: "No options" }) }) : k.map((I, M) => {
-            const R = d.includes(I.value), O = M === C, W = I.disabled ?? !1, U = N && !R;
+          S.length === 0 ? /* @__PURE__ */ e("div", { style: { padding: "var(--lucent-space-3) var(--lucent-space-4)" }, children: /* @__PURE__ */ e(q, { color: "secondary", size: "sm", children: "No options" }) }) : S.map((I, M) => {
+            const R = d.includes(I.value), O = M === k, W = I.disabled ?? !1, U = N && !R;
             return /* @__PURE__ */ h(
               "div",
               {
@@ -4274,10 +4305,10 @@ function xt(t, n) {
 function wt(t, n) {
   return new Date(t, n, 1).getDay();
 }
-function G(t, n) {
+function _(t, n) {
   return t.getFullYear() === n.getFullYear() && t.getMonth() === n.getMonth() && t.getDate() === n.getDate();
 }
-function Y(t, n) {
+function K(t, n) {
   return new Date(t.getFullYear(), t.getMonth(), t.getDate()) < new Date(n.getFullYear(), n.getMonth(), n.getDate());
 }
 function ne(t, n) {
@@ -4337,7 +4368,7 @@ function ae({ dir: t, onClick: n, disabled: a }) {
     }
   );
 }
-function K({
+function X({
   year: t,
   month: n,
   selected: a,
@@ -4349,9 +4380,9 @@ function K({
   onNextMonth: f,
   highlightRange: g
 }) {
-  const y = xt(t, n), d = wt(t, n), [s, p] = z(null), v = [
+  const y = xt(t, n), d = wt(t, n), [s, u] = z(null), v = [
     ...Array(d).fill(null),
-    ...Array.from({ length: y }, (m, C) => C + 1)
+    ...Array.from({ length: y }, (m, k) => k + 1)
   ];
   for (; v.length % 7 !== 0; ) v.push(null);
   return /* @__PURE__ */ h("div", { children: [
@@ -4365,18 +4396,18 @@ function K({
       /* @__PURE__ */ e(ae, { dir: "next", onClick: f })
     ] }),
     /* @__PURE__ */ e("div", { style: { display: "grid", gridTemplateColumns: "repeat(7, 1fr)", gap: 2, marginBottom: "var(--lucent-space-1)" }, children: St.map((m) => /* @__PURE__ */ e("div", { style: { textAlign: "center" }, children: /* @__PURE__ */ e(q, { size: "xs", color: "secondary", children: m }) }, m)) }),
-    /* @__PURE__ */ e("div", { style: { display: "grid", gridTemplateColumns: "repeat(7, 1fr)", gap: 2 }, children: v.map((m, C) => {
-      if (!m) return /* @__PURE__ */ e("div", {}, C);
-      const b = new Date(t, n, m), x = a ? G(b, a) : !1, E = G(b, o), S = (r ? Y(b, r) : !1) || (i ? ne(b, i) : !1);
-      let u = !1;
-      return g != null && g.start && (g != null && g.end) && (u = !Y(b, g.start) && !ne(b, g.end)), /* @__PURE__ */ e(
+    /* @__PURE__ */ e("div", { style: { display: "grid", gridTemplateColumns: "repeat(7, 1fr)", gap: 2 }, children: v.map((m, k) => {
+      if (!m) return /* @__PURE__ */ e("div", {}, k);
+      const b = new Date(t, n, m), x = a ? _(b, a) : !1, E = _(b, o), T = (r ? K(b, r) : !1) || (i ? ne(b, i) : !1);
+      let p = !1;
+      return g != null && g.start && (g != null && g.end) && (p = !K(b, g.start) && !ne(b, g.end)), /* @__PURE__ */ e(
         "button",
         {
           type: "button",
-          disabled: S,
-          onClick: () => !S && l(b),
-          onMouseEnter: () => p(m),
-          onMouseLeave: () => p(null),
+          disabled: T,
+          onClick: () => !T && l(b),
+          onMouseEnter: () => u(m),
+          onMouseLeave: () => u(null),
           "aria-label": j(b),
           "aria-pressed": x,
           style: {
@@ -4387,17 +4418,17 @@ function K({
             width: "100%",
             border: E && !x ? "1px solid var(--lucent-border-strong)" : "1px solid transparent",
             borderRadius: "var(--lucent-radius-md)",
-            background: x ? "var(--lucent-accent-default)" : u ? "var(--lucent-accent-subtle)" : s === m && !S ? "var(--lucent-bg-muted)" : "transparent",
-            color: x ? "var(--lucent-text-on-accent)" : S ? "var(--lucent-text-disabled)" : "var(--lucent-text-primary)",
+            background: x ? "var(--lucent-accent-default)" : p ? "var(--lucent-accent-subtle)" : s === m && !T ? "var(--lucent-bg-muted)" : "transparent",
+            color: x ? "var(--lucent-text-on-accent)" : T ? "var(--lucent-text-disabled)" : "var(--lucent-text-primary)",
             fontSize: "var(--lucent-font-size-sm)",
             fontFamily: "var(--lucent-font-family-base)",
             fontWeight: E ? "var(--lucent-font-weight-medium)" : "var(--lucent-font-weight-regular)",
-            cursor: S ? "not-allowed" : "pointer",
+            cursor: T ? "not-allowed" : "pointer",
             transition: "background var(--lucent-duration-fast)"
           },
           children: m
         },
-        C
+        k
       );
     }) })
   ] });
@@ -4412,31 +4443,31 @@ function Nn({
   max: l,
   style: c
 }) {
-  const f = t !== void 0, [g, y] = z(n), d = f ? t : g, s = /* @__PURE__ */ new Date(), [p, v] = z((d ?? s).getFullYear()), [m, C] = z((d ?? s).getMonth()), [b, x] = z(!1), [E, S] = z(!1), u = F(null);
+  const f = t !== void 0, [g, y] = z(n), d = f ? t : g, s = /* @__PURE__ */ new Date(), [u, v] = z((d ?? s).getFullYear()), [m, k] = z((d ?? s).getMonth()), [b, x] = z(!1), [E, T] = z(!1), p = F(null);
   B(() => {
     if (!b) return;
-    const k = (P) => {
+    const S = (P) => {
       var N;
-      (N = u.current) != null && N.contains(P.target) || x(!1);
+      (N = p.current) != null && N.contains(P.target) || x(!1);
     };
-    return document.addEventListener("mousedown", k), () => document.removeEventListener("mousedown", k);
+    return document.addEventListener("mousedown", S), () => document.removeEventListener("mousedown", S);
   }, [b]);
-  const T = (k) => {
-    f || y(k), a == null || a(k), x(!1);
+  const C = (S) => {
+    f || y(S), a == null || a(S), x(!1);
   }, D = () => {
-    m === 0 ? (C(11), v((k) => k - 1)) : C((k) => k - 1);
+    m === 0 ? (k(11), v((S) => S - 1)) : k((S) => S - 1);
   }, w = () => {
-    m === 11 ? (C(0), v((k) => k + 1)) : C((k) => k + 1);
+    m === 11 ? (k(0), v((S) => S + 1)) : k((S) => S + 1);
   };
-  return /* @__PURE__ */ h("div", { ref: u, style: { position: "relative", display: "inline-block", ...c }, children: [
+  return /* @__PURE__ */ h("div", { ref: p, style: { position: "relative", display: "inline-block", ...c }, children: [
     /* @__PURE__ */ h(
       "button",
       {
         type: "button",
         disabled: r,
-        onClick: () => !r && x((k) => !k),
-        onFocus: () => S(!0),
-        onBlur: () => S(!1),
+        onClick: () => !r && x((S) => !S),
+        onFocus: () => T(!0),
+        onBlur: () => T(!1),
         "aria-haspopup": "dialog",
         "aria-expanded": b,
         style: {
@@ -4484,15 +4515,15 @@ function Nn({
           minWidth: 260
         },
         children: /* @__PURE__ */ e(
-          K,
+          X,
           {
-            year: p,
+            year: u,
             month: m,
             ...d !== void 0 && { selected: d },
             today: s,
             ...i !== void 0 && { min: i },
             ...l !== void 0 && { max: l },
-            onSelect: T,
+            onSelect: C,
             onPrevMonth: D,
             onNextMonth: w
           }
@@ -4588,7 +4619,7 @@ const Rn = {
   }
 };
 function Tt(t, n) {
-  return t ? G(t.start, t.end) ? j(t.start) : `${j(t.start)} → ${j(t.end)}` : n;
+  return t ? _(t.start, t.end) ? j(t.start) : `${j(t.start)} → ${j(t.end)}` : n;
 }
 function Ln({
   value: t,
@@ -4600,38 +4631,38 @@ function Ln({
   max: l,
   style: c
 }) {
-  const f = t !== void 0, [g, y] = z(n), d = f ? t : g, [s, p] = z(null), v = /* @__PURE__ */ new Date(), [m, C] = z(((d == null ? void 0 : d.start) ?? v).getFullYear()), [b, x] = z(((d == null ? void 0 : d.start) ?? v).getMonth()), E = b === 11 ? 0 : b + 1, S = b === 11 ? m + 1 : m, [u, T] = z(!1), [D, w] = z(!1), k = F(null);
+  const f = t !== void 0, [g, y] = z(n), d = f ? t : g, [s, u] = z(null), v = /* @__PURE__ */ new Date(), [m, k] = z(((d == null ? void 0 : d.start) ?? v).getFullYear()), [b, x] = z(((d == null ? void 0 : d.start) ?? v).getMonth()), E = b === 11 ? 0 : b + 1, T = b === 11 ? m + 1 : m, [p, C] = z(!1), [D, w] = z(!1), S = F(null);
   B(() => {
-    if (!u) return;
+    if (!p) return;
     const M = (R) => {
       var O;
-      (O = k.current) != null && O.contains(R.target) || (T(!1), p(null));
+      (O = S.current) != null && O.contains(R.target) || (C(!1), u(null));
     };
     return document.addEventListener("mousedown", M), () => document.removeEventListener("mousedown", M);
-  }, [u]);
+  }, [p]);
   const P = (M) => {
     if (!s)
-      p(M);
+      u(M);
     else {
-      const [R, O] = Y(M, s) || G(M, s) ? [M, s] : [s, M], W = { start: R, end: O };
-      f || y(W), a == null || a(W), p(null), T(!1);
+      const [R, O] = K(M, s) || _(M, s) ? [M, s] : [s, M], W = { start: R, end: O };
+      f || y(W), a == null || a(W), u(null), C(!1);
     }
   }, N = () => {
-    b === 0 ? (x(11), C((M) => M - 1)) : x((M) => M - 1);
+    b === 0 ? (x(11), k((M) => M - 1)) : x((M) => M - 1);
   }, $ = () => {
-    b === 11 ? (x(0), C((M) => M + 1)) : x((M) => M + 1);
+    b === 11 ? (x(0), k((M) => M + 1)) : x((M) => M + 1);
   }, I = s ? { start: s, end: s } : d ? { start: d.start, end: d.end } : void 0;
-  return /* @__PURE__ */ h("div", { ref: k, style: { position: "relative", display: "inline-block", ...c }, children: [
+  return /* @__PURE__ */ h("div", { ref: S, style: { position: "relative", display: "inline-block", ...c }, children: [
     /* @__PURE__ */ h(
       "button",
       {
         type: "button",
         disabled: r,
-        onClick: () => !r && T((M) => !M),
+        onClick: () => !r && C((M) => !M),
         onFocus: () => w(!0),
         onBlur: () => w(!1),
         "aria-haspopup": "dialog",
-        "aria-expanded": u,
+        "aria-expanded": p,
         style: {
           display: "inline-flex",
           alignItems: "center",
@@ -4659,7 +4690,7 @@ function Ln({
         ]
       }
     ),
-    u && /* @__PURE__ */ h(
+    p && /* @__PURE__ */ h(
       "div",
       {
         role: "dialog",
@@ -4679,7 +4710,7 @@ function Ln({
         },
         children: [
           /* @__PURE__ */ e("div", { style: { minWidth: 220 }, children: /* @__PURE__ */ e(
-            K,
+            X,
             {
               year: m,
               month: b,
@@ -4695,9 +4726,9 @@ function Ln({
           ) }),
           /* @__PURE__ */ e("div", { style: { width: 1, background: "var(--lucent-border-subtle)", flexShrink: 0 } }),
           /* @__PURE__ */ e("div", { style: { minWidth: 220 }, children: /* @__PURE__ */ e(
-            K,
+            X,
             {
-              year: S,
+              year: T,
               month: E,
               ...(d == null ? void 0 : d.end) !== void 0 && { selected: d.end },
               today: v,
@@ -4712,8 +4743,8 @@ function Ln({
         ]
       }
     ),
-    s && u && /* @__PURE__ */ e("div", { style: { position: "absolute", top: "calc(100% + 4px)", left: 0, zIndex: 1001, pointerEvents: "none" } }),
-    s && u && /* @__PURE__ */ e("div", { style: {
+    s && p && /* @__PURE__ */ e("div", { style: { position: "absolute", top: "calc(100% + 4px)", left: 0, zIndex: 1001, pointerEvents: "none" } }),
+    s && p && /* @__PURE__ */ e("div", { style: {
       position: "absolute",
       bottom: -24,
       left: 0
@@ -4802,7 +4833,7 @@ const Bn = {
     notes: 'Inherits Calendar accessibility from DatePicker. The two-step selection flow is reinforced with a visible "Now pick the end date" hint.'
   }
 };
-function X(t) {
+function J(t) {
   return t < 1024 ? `${t} B` : t < 1024 * 1024 ? `${(t / 1024).toFixed(1)} KB` : `${(t / (1024 * 1024)).toFixed(1)} MB`;
 }
 function Ct() {
@@ -4828,7 +4859,7 @@ function It({
     ] }),
     /* @__PURE__ */ h("div", { style: { flex: 1, minWidth: 0 }, children: [
       /* @__PURE__ */ e(q, { size: "sm", truncate: !0, children: t.file.name }),
-      i ? /* @__PURE__ */ e(q, { size: "xs", color: "danger", children: t.error }) : /* @__PURE__ */ e(q, { size: "xs", color: "secondary", children: X(t.file.size) }),
+      i ? /* @__PURE__ */ e(q, { size: "xs", color: "danger", children: t.error }) : /* @__PURE__ */ e(q, { size: "xs", color: "secondary", children: J(t.file.size) }),
       r !== void 0 && !i && /* @__PURE__ */ e("div", { style: {
         marginTop: 4,
         height: 3,
@@ -4880,27 +4911,27 @@ function $n({
   disabled: l = !1,
   style: c
 }) {
-  const f = o !== void 0, [g, y] = z([]), d = f ? o : g, [s, p] = z(!1), [v, m] = z(!1), C = F(null), b = J((u) => {
-    if (!u || l) return;
-    const T = [];
-    for (const w of Array.from(u)) {
+  const f = o !== void 0, [g, y] = z([]), d = f ? o : g, [s, u] = z(!1), [v, m] = z(!1), k = F(null), b = Q((p) => {
+    if (!p || l) return;
+    const C = [];
+    for (const w of Array.from(p)) {
       if (a && w.size > a) {
-        i == null || i(`"${w.name}" exceeds the ${X(a)} limit.`);
+        i == null || i(`"${w.name}" exceeds the ${J(a)} limit.`);
         continue;
       }
-      if (!n && d.length + T.length >= 1) break;
-      T.push({ id: Ct(), file: w });
+      if (!n && d.length + C.length >= 1) break;
+      C.push({ id: Ct(), file: w });
     }
-    if (T.length === 0) return;
-    const D = n ? [...d, ...T] : T;
+    if (C.length === 0) return;
+    const D = n ? [...d, ...C] : C;
     f || y(D), r == null || r(D);
-  }, [l, d, f, a, n, r, i]), x = (u) => {
-    const T = d.filter((D) => D.id !== u);
-    f || y(T), r == null || r(T);
-  }, E = (u) => {
-    u.preventDefault(), p(!1), b(u.dataTransfer.files);
-  }, S = (u) => {
-    b(u.target.files), u.target.value = "";
+  }, [l, d, f, a, n, r, i]), x = (p) => {
+    const C = d.filter((D) => D.id !== p);
+    f || y(C), r == null || r(C);
+  }, E = (p) => {
+    p.preventDefault(), u(!1), b(p.dataTransfer.files);
+  }, T = (p) => {
+    b(p.target.files), p.target.value = "";
   };
   return /* @__PURE__ */ h("div", { style: { display: "flex", flexDirection: "column", gap: "var(--lucent-space-3)", ...c }, children: [
     /* @__PURE__ */ h(
@@ -4911,19 +4942,19 @@ function $n({
         "aria-label": "Upload files",
         "aria-disabled": l,
         onClick: () => {
-          var u;
-          return !l && ((u = C.current) == null ? void 0 : u.click());
+          var p;
+          return !l && ((p = k.current) == null ? void 0 : p.click());
         },
-        onKeyDown: (u) => {
-          var T;
-          (u.key === "Enter" || u.key === " ") && (u.preventDefault(), (T = C.current) == null || T.click());
+        onKeyDown: (p) => {
+          var C;
+          (p.key === "Enter" || p.key === " ") && (p.preventDefault(), (C = k.current) == null || C.click());
         },
         onFocus: () => m(!0),
         onBlur: () => m(!1),
-        onDragOver: (u) => {
-          u.preventDefault(), l || p(!0);
+        onDragOver: (p) => {
+          p.preventDefault(), l || u(!0);
         },
-        onDragLeave: () => p(!1),
+        onDragLeave: () => u(!1),
         onDrop: E,
         style: {
           display: "flex",
@@ -4959,18 +4990,18 @@ function $n({
             /* @__PURE__ */ e(q, { color: l ? "disabled" : "primary", weight: "medium", children: s ? "Drop to upload" : "Drop files here or click to browse" }),
             (t || a) && /* @__PURE__ */ e(q, { size: "xs", color: "secondary", children: [
               t && `Accepted: ${t}`,
-              a && `Max size: ${X(a)}`
+              a && `Max size: ${J(a)}`
             ].filter(Boolean).join(" · ") })
           ] }),
           /* @__PURE__ */ e(
             "input",
             {
-              ref: C,
+              ref: k,
               type: "file",
               accept: t,
               multiple: n,
               disabled: l,
-              onChange: S,
+              onChange: T,
               style: { display: "none" },
               tabIndex: -1
             }
@@ -4978,7 +5009,7 @@ function $n({
         ]
       }
     ),
-    d.length > 0 && /* @__PURE__ */ e("div", { style: { display: "flex", flexDirection: "column", gap: "var(--lucent-space-2)" }, children: d.map((u) => /* @__PURE__ */ e(It, { item: u, onRemove: x }, u.id)) })
+    d.length > 0 && /* @__PURE__ */ e("div", { style: { display: "flex", flexDirection: "column", gap: "var(--lucent-space-2)" }, children: d.map((p) => /* @__PURE__ */ e(It, { item: p, onRemove: x }, p.id)) })
   ] });
 }
 const Pn = {