lucent-ui 0.25.1 → 0.26.0

package/dist/index.js

@@ -958,21 +958,21 @@ const Yi = {
   md: 40,
   lg: 56,
   xl: 80
-}, $n = {
+}, Pn = {
   xs: "var(--lucent-font-size-xs)",
   sm: "var(--lucent-font-size-xs)",
   md: "var(--lucent-font-size-sm)",
   lg: "var(--lucent-font-size-lg)",
   xl: "var(--lucent-font-size-xl)"
 };
-function Pn(e, t) {
+function $n(e, t) {
   var o, a, i;
   if (t) return t.slice(0, 2).toUpperCase();
   const r = e.trim().split(/\s+/);
   return r.length === 1 ? (((o = r[0]) == null ? void 0 : o[0]) ?? "").toUpperCase() : ((((a = r[0]) == null ? void 0 : a[0]) ?? "") + (((i = r[r.length - 1]) == null ? void 0 : i[0]) ?? "")).toUpperCase();
 }
 function Ki({ src: e, alt: t, size: r = "md", initials: o, style: a, ...i }) {
-  const l = Fn[r], s = Pn(t, o), c = {
+  const l = Fn[r], s = $n(t, o), c = {
     width: l,
     height: l,
     borderRadius: "var(--lucent-radius-full)",
@@ -1004,7 +1004,7 @@ function Ki({ src: e, alt: t, size: r = "md", initials: o, style: a, ...i }) {
         ...c,
         background: "var(--lucent-accent-default)",
         color: "var(--lucent-text-on-accent)",
-        fontSize: $n[r],
+        fontSize: Pn[r],
         fontWeight: "var(--lucent-font-weight-semibold)",
         fontFamily: "var(--lucent-font-family-base)"
       },
@@ -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); }
 }
-`, $t = ge(
+`, Pt = ge(
   ({
     label: e,
     size: t = "md",
@@ -1222,9 +1222,9 @@ const Qi = {
     G(() => {
       h.current && (h.current.indeterminate = r);
     }, [r]);
-    const $ = (q) => {
+    const P = (q) => {
       f || v(q.target.checked), d == null || d(q);
-    }, P = s ? "var(--lucent-text-disabled)" : "var(--lucent-text-on-accent)", M = {
+    }, $ = s ? "var(--lucent-text-disabled)" : "var(--lucent-text-on-accent)", M = {
       width: m,
       height: m,
       // fixed corner so global radius overrides (e.g. via customizer) don't
@@ -1264,7 +1264,7 @@ const Qi = {
               id: x,
               checked: f ? i : g,
               disabled: s,
-              onChange: $,
+              onChange: P,
               style: { position: "absolute", opacity: 0, width: 0, height: 0, margin: 0, pointerEvents: "none" },
               ...p
             }
@@ -1278,7 +1278,7 @@ const Qi = {
                 viewBox: "0 0 10 10",
                 fill: "none",
                 style: { animation: "lucent-cb-mark 200ms cubic-bezier(0.34, 1.56, 0.64, 1) forwards" },
-                children: /* @__PURE__ */ n("path", { d: "M1.5 5L4 7.5L8.5 2.5", stroke: P, strokeWidth: 1.5, strokeLinecap: "round", strokeLinejoin: "round" })
+                children: /* @__PURE__ */ n("path", { d: "M1.5 5L4 7.5L8.5 2.5", stroke: $, strokeWidth: 1.5, strokeLinecap: "round", strokeLinejoin: "round" })
               }
             ),
             r && /* @__PURE__ */ n(
@@ -1289,7 +1289,7 @@ const Qi = {
                 viewBox: "0 0 10 10",
                 fill: "none",
                 style: { animation: "lucent-cb-mark 200ms cubic-bezier(0.34, 1.56, 0.64, 1) forwards" },
-                children: /* @__PURE__ */ n("path", { d: "M2 5H8", stroke: P, strokeWidth: 1.5, strokeLinecap: "round" })
+                children: /* @__PURE__ */ n("path", { d: "M2 5H8", stroke: $, strokeWidth: 1.5, strokeLinecap: "round" })
               }
             )
           ] }, L),
@@ -1338,7 +1338,7 @@ const Qi = {
     ] });
   }
 );
-$t.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",
@@ -1466,7 +1466,7 @@ const _n = { sm: 14, md: 16, lg: 20 }, Yn = { sm: "calc(var(--lucent-space-8) *
   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, ...u }) {
-  const p = ie(Pt), 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);
+  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 && v.current !== g && (v.current = g, C((A) => A + 1));
   }, [g, f]);
@@ -1555,8 +1555,8 @@ function ts({ value: e, label: t, size: r = "md", contained: o = !1, helperText:
         },
         onClick: (A) => {
           if (!f && A.target === A.currentTarget) {
-            const $ = A.currentTarget.querySelector("input");
-            $ == null || $.click();
+            const P = A.currentTarget.querySelector("input");
+            P == null || P.click();
           }
         },
         children: I
@@ -1713,7 +1713,7 @@ function rs({
       return () => clearTimeout(W);
     }
   }, [f, s]);
-  const { track: [I, A], thumb: $ } = Jn[t], P = f ? I - $ - 2 : 2, M = (W) => {
+  const { track: [I, A], thumb: P } = Jn[t], $ = f ? I - P - 2 : 2, M = (W) => {
     h || m(W.target.checked), d == null || d(W);
   }, N = /* @__PURE__ */ k(
     "span",
@@ -1747,10 +1747,10 @@ function rs({
             style: {
               position: "absolute",
               top: 2,
-              left: P,
-              width: S ? $ * 1.3 : $,
-              height: $,
-              borderRadius: $,
+              left: $,
+              width: S ? P * 1.3 : P,
+              height: P,
+              borderRadius: P,
               background: "#ffffff",
               boxShadow: "0 1px 3px rgb(0 0 0 / 0.2)",
               transition: `left 260ms ${pt}, width 200ms cubic-bezier(0.22, 1, 0.36, 1)`
@@ -3895,7 +3895,7 @@ function La({
   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 });
+  }), [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();
@@ -3905,7 +3905,7 @@ function La({
       const K = A.current.offsetWidth;
       B + K > window.innerWidth && (B = w.right - K);
     }
-    P({ top: V, left: B });
+    $({ top: V, left: B });
   }, [h]), G(() => {
     if (!e) return;
     const w = Ce(e);
@@ -4005,8 +4005,8 @@ function La({
               "aria-label": "Color picker",
               style: {
                 position: "fixed",
-                top: $.top,
-                left: $.left,
+                top: P.top,
+                left: P.left,
                 zIndex: 1e3,
                 background: "color-mix(in srgb, var(--lucent-surface-overlay) 85%, transparent)",
                 backdropFilter: "blur(6px)",
@@ -4485,7 +4485,7 @@ const xs = {
   end: "flex-end",
   stretch: "stretch",
   baseline: "baseline"
-}, $a = {
+}, Pa = {
   start: "flex-start",
   center: "center",
   end: "flex-end",
@@ -4507,7 +4507,7 @@ function Ss({
     flexDirection: "column",
     gap: `var(--lucent-space-${e})`,
     alignItems: Fa[t],
-    justifyContent: $a[r],
+    justifyContent: Pa[r],
     ...a && { flexWrap: "wrap" },
     ...l
   };
@@ -4625,7 +4625,7 @@ const Ts = {
   accessibility: {
     notes: "Stack renders a <div> by default, which has no implicit ARIA role. Use the `as` prop to render semantic elements (nav, section, form) when the content has a specific structural purpose. Add aria-label or aria-labelledby when using landmark elements."
   }
-}, Pa = {
+}, $a = {
   start: "flex-start",
   center: "center",
   end: "flex-end",
@@ -4652,7 +4652,7 @@ function Cs({
     display: "flex",
     flexDirection: "row",
     gap: `var(--lucent-space-${e})`,
-    alignItems: Pa[t],
+    alignItems: $a[t],
     justifyContent: Na[r],
     ...a && { flexWrap: "wrap" },
     ...l
@@ -5029,14 +5029,14 @@ function Ka({
       return () => clearTimeout(F);
     }
   }, [p]);
-  const $ = ee((F) => {
+  const P = ee((F) => {
     c || u(F), i == null || i(F);
-  }, [c, i]), P = ee(() => {
+  }, [c, i]), $ = ee(() => {
     const F = v.current;
     F && (F.querySelector("button, [tabindex]") ?? F).focus();
   }, []), M = ee(() => {
-    $(!1), P();
-  }, [$, P]);
+    P(!1), $();
+  }, [P, $]);
   se(() => {
     if (!y || x !== "entering" || !f.current) return;
     const F = requestAnimationFrame(() => {
@@ -5134,9 +5134,9 @@ function Ka({
     z == null || z.scrollIntoView({ block: "nearest" });
   }, [I, p]);
   const W = () => {
-    $(!p);
+    P(!p);
   }, U = (F) => {
-    (F.key === "Enter" || F.key === " " || F.key === "ArrowDown") && (F.preventDefault(), p || $(!0)), F.key === "ArrowUp" && (F.preventDefault(), 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)));
@@ -5955,9 +5955,9 @@ function Fs({
   }, [I]);
   const A = () => {
     t("");
-  }, $ = (q) => {
+  }, P = (q) => {
     d == null || d(q), f(!1);
-  }, P = () => {
+  }, $ = () => {
     b.current = setTimeout(() => f(!1), 150);
   }, M = () => {
     b.current && clearTimeout(b.current), f(!0);
@@ -6000,7 +6000,7 @@ function Fs({
         leftElement: r === "filter" ? /* @__PURE__ */ n(lr, { size: kt[a] }) : /* @__PURE__ */ n(sr, { size: kt[a] }),
         rightElement: N ?? void 0,
         onFocus: M,
-        onBlur: P,
+        onBlur: $,
         ...i !== void 0 && { label: i },
         ...l !== void 0 && { helperText: l },
         ...s !== void 0 && { errorText: s }
@@ -6031,7 +6031,7 @@ function Fs({
             {
               role: "option",
               "aria-selected": !1,
-              onMouseDown: () => $(q),
+              onMouseDown: () => P(q),
               onMouseEnter: () => v(W),
               onMouseLeave: () => v(null),
               style: {
@@ -6051,7 +6051,7 @@ function Fs({
     )
   ] });
 }
-const $s = {
+const Ps = {
   id: "search-input",
   name: "SearchInput",
   tier: "molecule",
@@ -6251,7 +6251,7 @@ function he(...e) {
 function xr(e, t, r) {
   return !t || r ? e.background : e.background === "transparent" ? "var(--lucent-accent-subtle)" : `color-mix(in srgb, var(--lucent-accent-default) 6%, ${e.background})`;
 }
-function Ps({
+function $s({
   variant: e = "outline",
   header: t,
   footer: r,
@@ -6270,9 +6270,9 @@ function Ps({
   hoverable: m,
   media: f
 }) {
-  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, $ = A || (m ?? !1), P = (y ?? !1) && A, M = I ? "a" : A ? "button" : "div", [N, q] = E(!1), [W, U] = E(!1), [J, Z] = E(!1), F = (x ?? !1) && !P, z = F ? yr : void 0, D = xr(g, x ?? !1, P), R = h != null ? `inset 3px 0 0 ${pr[h]}` : 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;
-  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);
+  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",
@@ -6281,16 +6281,16 @@ function Ps({
     borderRadius: L,
     // 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 || $ && W) ? "hidden" : "visible",
+    overflow: f != null && !(F || P && W) ? "hidden" : "visible",
     boxSizing: "border-box",
     position: "relative",
     ...H !== void 0 && { boxShadow: H },
     // Hover/press transform
-    ...$ && !P && J && { transform: "translateY(1px)" },
-    ...$ && !P && N && !J && { transform: "translateY(-1px)" },
+    ...P && !$ && J && { transform: "translateY(1px)" },
+    ...P && !$ && N && !J && { transform: "translateY(-1px)" },
     // Hover/interactive base styles
-    ...$ && {
-      cursor: P ? "not-allowed" : "pointer",
+    ...P && {
+      cursor: $ ? "not-allowed" : "pointer",
       transition: hr
     },
     // Button UA reset
@@ -6307,7 +6307,7 @@ function Ps({
       color: "inherit"
     },
     // Disabled
-    ...P && {
+    ...$ && {
       opacity: 0.6,
       pointerEvents: "none"
     },
@@ -6317,7 +6317,7 @@ function Ps({
     M,
     {
       style: w,
-      ...$ && !P ? {
+      ...P && !$ ? {
         onMouseEnter: () => q(!0),
         onMouseLeave: () => {
           q(!1), Z(!1);
@@ -6330,17 +6330,17 @@ function Ps({
         }
       } : {},
       ...I && {
-        href: P ? void 0 : d,
+        href: $ ? void 0 : d,
         ...u !== void 0 && { target: u },
         ...p !== void 0 && { rel: p }
       },
       ...!I && A && {
         type: "button",
-        ...P && { disabled: !0 }
+        ...$ && { disabled: !0 }
       },
-      ...c !== void 0 && !P && { onClick: c },
+      ...c !== void 0 && !$ && { onClick: c },
       ...A && x !== void 0 && { "aria-pressed": x },
-      ...I && P && { "aria-disabled": !0 },
+      ...I && $ && { "aria-disabled": !0 },
       children: [
         f != null && /* @__PURE__ */ n("div", { style: { lineHeight: 0, overflow: "hidden", borderRadius: `${L} ${L} 0 0` }, children: f }),
         t != null && /* @__PURE__ */ n(
@@ -7149,7 +7149,7 @@ 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, [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 = () => {
+  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) {
       x(null);
       return;
@@ -7208,7 +7208,7 @@ function Ys({ tabs: e, defaultValue: t, value: r, onChange: o, variant: a = "und
   }, [e]), G(() => {
     if (!S) return;
     const z = (D) => {
-      b.current && !b.current.contains(D.target) && v.current && !v.current.contains(D.target) && (L(!1), P(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]);
@@ -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, w = $ === D;
+          const R = z.value === d, H = z.disabled ?? !1, w = P === D;
           return /* @__PURE__ */ n(
             "button",
             {
@@ -7391,9 +7391,9 @@ function Ys({ tabs: e, defaultValue: t, value: r, onChange: o, variant: a = "und
                 H || (J(z.value), L(!1));
               },
               onMouseEnter: () => {
-                H || P(D);
+                H || $(D);
               },
-              onMouseLeave: () => P(null),
+              onMouseLeave: () => $(null),
               style: {
                 display: "block",
                 width: "100%",
@@ -7731,16 +7731,16 @@ function Js({
   }, A = (M, N) => {
     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 = () => {
     m({}), f || p(0), a == null || a(0), i == null || i({});
-  }, P = [];
+  }, $ = [];
   if (S <= 7)
-    for (let M = 0; M < S; M++) P.push(M);
+    for (let M = 0; M < S; M++) $.push(M);
   else {
-    P.push(0), g > 2 && P.push("…");
+    $.push(0), g > 2 && $.push("…");
     for (let M = Math.max(1, g - 1); M <= Math.min(S - 2, g + 1); M++)
-      P.push(M);
-    g < S - 3 && P.push("…"), P.push(S - 1);
+      $.push(M);
+    g < S - 3 && $.push("…"), $.push(S - 1);
   }
   return /* @__PURE__ */ k("div", { style: { display: "flex", flexDirection: "column", gap: "var(--lucent-space-3)", ...s }, children: [
     v && /* @__PURE__ */ n("div", { style: { position: "relative", zIndex: 1 }, children: /* @__PURE__ */ n(
@@ -7750,7 +7750,7 @@ function Js({
         rows: t,
         filters: x,
         onFilter: A,
-        onClearAll: $
+        onClearAll: P
       }
     ) }),
     /* @__PURE__ */ n("div", { style: {
@@ -7841,7 +7841,7 @@ function Js({
             children: /* @__PURE__ */ n(Mt, { dir: "left" })
           }
         ),
-        P.map(
+        $.map(
           (M, N) => M === "…" ? /* @__PURE__ */ n("span", { style: {
             padding: "0 var(--lucent-space-1)",
             color: "var(--lucent-text-disabled)",
@@ -8056,7 +8056,7 @@ function Fr({
         fontSize: "var(--lucent-font-size-xs)",
         textAlign: "center"
       }, children: "No results" }) : h.map((f) => /* @__PURE__ */ n(
-        $r,
+        Pr,
         {
           label: f,
           isSelected: r.includes(f),
@@ -8067,7 +8067,7 @@ function Fr({
     ] })
   ] });
 }
-function $r({ label: e, isSelected: t, onClick: r }) {
+function Pr({ label: e, isSelected: t, onClick: r }) {
   const [o, a] = E(!1);
   return /* @__PURE__ */ k(
     "button",
@@ -8257,7 +8257,7 @@ const Zs = {
     keyboardInteractions: ["Tab to pagination controls", "Enter/Space to activate buttons"],
     notes: 'Column headers with sortable:true are interactive buttons with aria-sort reflecting the current sort direction. Pagination buttons include aria-label and aria-current="page" for the active page.'
   }
-}, Pr = `
+}, $r = `
 @keyframes lucent-palette-in {
   from { opacity: 0; transform: scale(0.96) translateY(-8px); }
   to   { opacity: 1; transform: scale(1)    translateY(0);    }
@@ -8279,7 +8279,7 @@ function Qs({
   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 = Pr, document.head.appendChild(I), f.current = !0;
+    I.textContent = $r, document.head.appendChild(I), f.current = !0;
   }
   const g = ee((I) => {
     l || c(I), a == null || a(I);
@@ -8414,13 +8414,13 @@ function Qs({
                   'No results for "',
                   u,
                   '"'
-                ] }) }) : S.map(({ group: I, items: A }, $) => /* @__PURE__ */ k("div", { children: [
+                ] }) }) : S.map(({ group: I, items: A }, P) => /* @__PURE__ */ k("div", { children: [
                   I && /* @__PURE__ */ n("div", { style: {
                     padding: "var(--lucent-space-2) var(--lucent-space-2) var(--lucent-space-1)",
-                    ...$ > 0 ? { borderTop: "1px solid var(--lucent-border-subtle)", marginTop: "var(--lucent-space-2)" } : {}
+                    ...P > 0 ? { borderTop: "1px solid var(--lucent-border-subtle)", marginTop: "var(--lucent-space-2)" } : {}
                   }, children: /* @__PURE__ */ n(Y, { size: "xs", color: "secondary", weight: "medium", children: I }) }),
-                  A.map((P) => {
-                    const M = P.disabled ?? !1;
+                  A.map(($) => {
+                    const M = $.disabled ?? !1;
                     let N = !1;
                     return M || (N = L === y, L++), /* @__PURE__ */ k(
                       "div",
@@ -8429,10 +8429,10 @@ function Qs({
                         "aria-selected": N,
                         "aria-disabled": M,
                         "data-active": N,
-                        onClick: () => C(P),
+                        onClick: () => C($),
                         onMouseEnter: () => {
                           if (!M) {
-                            const q = b.indexOf(P);
+                            const q = b.indexOf($);
                             q !== -1 && h(q);
                           }
                         },
@@ -8448,17 +8448,17 @@ function Qs({
                           opacity: M ? 0.5 : 1
                         },
                         children: [
-                          P.icon && /* @__PURE__ */ n("span", { style: { flexShrink: 0, color: "var(--lucent-text-secondary)", display: "flex" }, children: P.icon }),
+                          $.icon && /* @__PURE__ */ n("span", { style: { flexShrink: 0, color: "var(--lucent-text-secondary)", display: "flex" }, children: $.icon }),
                           /* @__PURE__ */ k("div", { style: { flex: 1, minWidth: 0 }, children: [
-                            /* @__PURE__ */ n(Y, { size: "sm", weight: "medium", truncate: !0, children: P.label }),
-                            P.description && /* @__PURE__ */ n(Y, { size: "xs", color: "secondary", truncate: !0, children: P.description })
+                            /* @__PURE__ */ n(Y, { size: "sm", weight: "medium", truncate: !0, children: $.label }),
+                            $.description && /* @__PURE__ */ n(Y, { size: "xs", color: "secondary", truncate: !0, children: $.description })
                           ] })
                         ]
                       },
-                      P.id
+                      $.id
                     );
                   })
-                ] }, $))
+                ] }, P))
               }
             ),
             /* @__PURE__ */ n("div", { style: {
@@ -8598,17 +8598,17 @@ function tl({
   errorText: u,
   style: p
 }) {
-  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), $ = O(null), P = 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 w = (B) => {
       var V, K;
-      !((V = I.current) != null && V.contains(B.target)) && !((K = P.current) != null && K.contains(B.target)) && (g(!1), b(""));
+      !((V = I.current) != null && V.contains(B.target)) && !((K = $.current) != null && K.contains(B.target)) && (g(!1), b(""));
     };
     return document.addEventListener("mousedown", w), () => document.removeEventListener("mousedown", w);
   }, [f]), se(() => {
-    if (!f || !$.current) return;
-    const w = $.current.getBoundingClientRect();
+    if (!f || !P.current) return;
+    const w = P.current.getBoundingClientRect();
     N({ top: w.bottom + 4, left: w.left, width: w.width });
   }, [f, m, v]);
   const W = (w) => {
@@ -8645,7 +8645,7 @@ function tl({
         children: c
       }
     ),
-    /* @__PURE__ */ k("div", { ref: $, children: [
+    /* @__PURE__ */ k("div", { ref: P, children: [
       /* @__PURE__ */ k(
         "div",
         {
@@ -8713,7 +8713,7 @@ function tl({
         /* @__PURE__ */ k(
           "div",
           {
-            ref: P,
+            ref: $,
             id: q,
             role: "listbox",
             "aria-multiselectable": "true",
@@ -8758,7 +8758,7 @@ function tl({
                     },
                     children: [
                       /* @__PURE__ */ n(
-                        $t,
+                        Pt,
                         {
                           checked: V,
                           disabled: j || _,
@@ -8926,10 +8926,10 @@ function jr(e, t) {
 function Ur(e, t) {
   return new Date(e, t, 1).getDay();
 }
-function $e(e, t) {
+function Pe(e, t) {
   return e.getFullYear() === t.getFullYear() && e.getMonth() === t.getMonth() && e.getDate() === t.getDate();
 }
-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 zt(e, t) {
@@ -9038,9 +9038,9 @@ function at({
     /* @__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 ? $e(b, r) : !1, T = $e(b, o), S = (a ? Pe(b, a) : !1) || (i ? zt(b, i) : !1);
+      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 = !Pe(b, d.start) && !zt(b, 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",
@@ -9091,7 +9091,7 @@ function al({
   errorText: u,
   style: p
 }) {
-  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 });
+  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) => {
@@ -9110,7 +9110,7 @@ function al({
     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)" : $ ? "var(--lucent-focus-ring)" : "var(--lucent-border-default)", z = $ ? `0 0 0 3px ${f ? "var(--lucent-danger-subtle)" : "var(--lucent-accent-subtle)"}` : "none";
+  }, 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)", ...p }, children: [
     c && /* @__PURE__ */ n(
       "label",
@@ -9132,8 +9132,8 @@ function al({
         id: v,
         disabled: a,
         onClick: () => !a && A((D) => !D),
-        onFocus: () => P(!0),
-        onBlur: () => P(!1),
+        onFocus: () => $(!0),
+        onBlur: () => $(!1),
         "aria-haspopup": "dialog",
         "aria-expanded": I,
         "aria-invalid": f,
@@ -9363,7 +9363,7 @@ const rl = {
   lg: "var(--lucent-font-size-md)"
 };
 function lo(e, t) {
-  return e ? $e(e.start, e.end) ? we(e.start) : `${we(e.start)} → ${we(e.end)}` : t;
+  return e ? Pe(e.start, e.end) ? we(e.start) : `${we(e.start)} → ${we(e.end)}` : t;
 }
 function ol({
   value: e,
@@ -9379,7 +9379,7 @@ function ol({
   errorText: u,
   style: p
 }) {
-  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 = $ === 11 ? 0 : $ + 1, N = $ === 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 = (_) => {
@@ -9396,17 +9396,17 @@ function ol({
     if (!b)
       C(j);
     else {
-      const [_, re] = Pe(j, b) || $e(j, b) ? [j, b] : [b, j], ne = { start: _, end: re };
+      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 = () => {
-    $ === 0 ? (P(11), A((j) => j - 1)) : P((j) => j - 1);
+    P === 0 ? ($(11), A((j) => j - 1)) : $((j) => j - 1);
   }, w = () => {
-    $ === 11 ? (P(0), A((j) => j + 1)) : P((j) => j + 1);
+    P === 11 ? ($(0), A((j) => j + 1)) : $((j) => j + 1);
   };
   let B;
   if (b && T) {
-    const [j, _] = Pe(T, b) ? [T, b] : [b, T];
+    const [j, _] = $e(T, b) ? [T, b] : [b, T];
     B = { start: j, 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";
@@ -9518,7 +9518,7 @@ function ol({
               at,
               {
                 year: I,
-                month: $,
+                month: P,
                 ...(m == null ? void 0 : m.start) !== void 0 && { selected: m.start },
                 today: L,
                 ...i !== void 0 && { min: i },
@@ -10296,7 +10296,7 @@ function Lo({ toasts: e, position: t, onDismiss: r, portalContainer: o }) {
         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: [
         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, $ = !a && !A;
+          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",
             {
@@ -10324,8 +10324,8 @@ function Lo({ toasts: e, position: t, onDismiss: r, portalContainer: o }) {
                 {
                   entry: f,
                   onDismiss: r,
-                  hideContent: $,
-                  ...$ && l !== void 0 && { fixedHeight: l }
+                  hideContent: P,
+                  ...P && l !== void 0 && { fixedHeight: l }
                 }
               )
             },
@@ -10764,7 +10764,7 @@ function He({
     }
   ) });
 }
-function $o({
+function Po({
   children: e,
   href: t,
   isActive: r = !1,
@@ -10784,7 +10784,7 @@ function $o({
   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(
-    Po,
+    $o,
     {
       subMenu: f,
       orientation: d,
@@ -10843,7 +10843,7 @@ function $o({
     }
   );
 }
-function Po({
+function $o({
   children: e,
   icon: t,
   badge: r,
@@ -10857,7 +10857,7 @@ function Po({
   inverse: u,
   size: p
 }) {
-  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, $ = 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(() => {
     h();
   }, [m, o, L, h]), G(() => {
@@ -10886,7 +10886,7 @@ function Po({
     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, m]);
-  const [P, M] = E("idle"), [N, q] = E(!1), W = () => {
+  const [$, M] = E("idle"), [N, q] = E(!1), W = () => {
     a || (q(!0), M("entering"), f(!0));
   }, U = () => {
     M("exiting"), setTimeout(() => {
@@ -10913,7 +10913,7 @@ function Po({
           "button",
           {
             "data-lucent-navitem": "",
-            "data-hint": $ || void 0,
+            "data-hint": P || void 0,
             onClick: (D) => {
               J(), i == null || i(D);
             },
@@ -10927,12 +10927,12 @@ function Po({
               padding: `${x.paddingY} ${x.paddingX}`,
               borderRadius: "var(--lucent-radius-md)",
               background: "transparent",
-              color: a ? "var(--lucent-text-disabled)" : $ ? "var(--lucent-text-primary)" : "var(--lucent-text-secondary)",
+              color: a ? "var(--lucent-text-disabled)" : P ? "var(--lucent-text-primary)" : "var(--lucent-text-secondary)",
               border: 0,
-              borderBottom: $ ? "2px solid var(--lucent-accent-default)" : "2px solid transparent",
+              borderBottom: P ? "2px solid var(--lucent-accent-default)" : "2px solid transparent",
               fontFamily: "var(--lucent-font-family-base)",
               fontSize: x.fontSize,
-              fontWeight: $ ? "var(--lucent-font-weight-medium)" : "var(--lucent-font-weight-regular)",
+              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)",
               userSelect: "none",
@@ -10964,7 +10964,7 @@ function Po({
               boxShadow: "var(--lucent-shadow-lg)",
               padding: "var(--lucent-space-1)",
               zIndex: 100,
-              animation: P === "exiting" ? `lucent-navmenu-dropdown-out ${Je}ms var(--lucent-easing-default) forwards` : `lucent-navmenu-dropdown-in ${Je}ms var(--lucent-easing-default) forwards`
+              animation: $ === "exiting" ? `lucent-navmenu-dropdown-out ${Je}ms var(--lucent-easing-default) forwards` : `lucent-navmenu-dropdown-in ${Je}ms var(--lucent-easing-default) forwards`
             },
             children: s
           }
@@ -10978,7 +10978,7 @@ function Po({
         "data-lucent-navitem": "",
         "data-active": I || void 0,
         "data-active-parent": A || void 0,
-        "data-hint": !I && !A && $ || void 0,
+        "data-hint": !I && !A && P || void 0,
         onClick: (D) => {
           J(), i == null || i(D);
         },
@@ -10993,12 +10993,12 @@ function Po({
           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 ? u ? "var(--lucent-text-primary)" : "var(--lucent-text-on-accent)" : A || $ ? "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: x.fontSize,
-          fontWeight: $ ? "var(--lucent-font-weight-medium)" : "var(--lucent-font-weight-regular)",
+          fontWeight: P ? "var(--lucent-font-weight-medium)" : "var(--lucent-font-weight-regular)",
           textAlign: "left",
           textDecoration: "none",
           cursor: a ? "not-allowed" : "pointer",
@@ -11209,7 +11209,7 @@ function Ho({ open: e, size: t = 14 }) {
     }
   );
 }
-He.Item = $o;
+He.Item = Po;
 He.Group = Wo;
 He.Sub = Yt;
 He.Separator = Oo;
@@ -11990,17 +11990,17 @@ function Li(e) {
 function Fi(e) {
   return typeof e == "string" ? Ai[e] : e;
 }
-function $i(e) {
+function Pi(e) {
   return typeof e == "string" ? Bi[e] : e;
 }
-function Pi(e, t) {
+function $i(e, t) {
   let r, o, a, i;
   if (typeof e == "string") {
     const s = qi[e];
     if (!s) return {};
     r = s.palette, o = s.shape, a = s.density, i = s.shadow;
   } else
-    e.palette !== void 0 && (r = Ri(e.palette)), e.shape !== void 0 && (o = Li(e.shape)), e.density !== void 0 && (a = Fi(e.density)), e.shadow !== void 0 && (i = $i(e.shadow));
+    e.palette !== void 0 && (r = Ri(e.palette)), e.shape !== void 0 && (o = Li(e.shape)), e.density !== void 0 && (a = Fi(e.density)), e.shadow !== void 0 && (i = Pi(e.shadow));
   const l = {};
   if (r) {
     const s = Qt(r[t], t);
@@ -12019,7 +12019,7 @@ function hl({
   anchors: o,
   children: a
 }) {
-  const i = ke().replace(/:/g, ""), l = t ? Pi(t, e) : void 0, s = (() => {
+  const i = ke().replace(/:/g, ""), l = t ? $i(t, e) : void 0, s = (() => {
     if (o) {
       const f = Qt(o, e);
       if (l) {
@@ -12344,11 +12344,11 @@ export {
   xs as COLOR_PICKER_MANIFEST,
   ws as COLOR_SWATCH_MANIFEST,
   el as COMMAND_PALETTE_MANIFEST,
-  Ps as Card,
+  $s as Card,
   Ns as CardBleed,
   Ws as CardManifest,
   ct as CardPaddingContext,
-  $t as Checkbox,
+  Pt as Checkbox,
   es as CheckboxManifest,
   Ln as Chip,
   vs as CodeBlock,
@@ -12389,7 +12389,7 @@ export {
   hs as NavLink,
   He as NavMenu,
   Wo as NavMenuGroup,
-  $o as NavMenuItem,
+  Po as NavMenuItem,
   Oo as NavMenuSeparator,
   Yt as NavMenuSub,
   Xs as PageLayout,
@@ -12403,7 +12403,7 @@ export {
   Is as RowManifest,
   ks as SEGMENTED_CONTROL_MANIFEST,
   Fs as SearchInput,
-  $s as SearchInputManifest,
+  Ps as SearchInputManifest,
   Wt as SegmentedControl,
   Nt as Select,
   is as SelectManifest,
@@ -12458,7 +12458,7 @@ export {
   Si as oceanPalette,
   on as pillShape,
   Di as playfulPreset,
-  Pi as resolvePreset,
+  $i as resolvePreset,
   nn as rosePalette,
   rn as roundedShape,
   an as sharpShape,