@lumx/vue 4.18.0 → 4.18.1-alpha.1

package/index.js

@@ -1,7 +1,7 @@
 import { ColorVariant as ld, Size as rt, VISUALLY_HIDDEN as cd, DIALOG_TRANSITION_DURATION as ac, AspectRatio as oc, IS_BROWSER as Yr, ColorPalette as ud } from "@lumx/core/js/constants";
 export * from "@lumx/core/js/constants";
 export * from "@lumx/core/js/types";
-import { createVNode as m, mergeProps as S, Fragment as ne, isVNode as K, useAttrs as D, computed as C, toValue as Me, getCurrentScope as rc, onScopeDispose as mr, toRef as Q, readonly as dd, customRef as fd, ref as R, shallowRef as Re, watch as X, getCurrentInstance as sc, onMounted as Ke, inject as qe, defineComponent as E, toRefs as hd, reactive as ic, provide as je, watchEffect as Xe, isRef as lt, onUnmounted as He, watchPostEffect as md, onBeforeUnmount as en, Comment as pr, unref as Pt, useSlots as ke, useTemplateRef as pd, toRaw as Ye, Text as lc, nextTick as cc, shallowReadonly as nt, h as Zr, cloneVNode as gd, onWatcherCleanup as vd, createTextVNode as bd, withDirectives as yd, resolveDirective as Ad } from "vue";
+import { createVNode as m, mergeProps as S, Fragment as ne, isVNode as K, useAttrs as D, computed as w, toValue as Me, getCurrentScope as rc, onScopeDispose as mr, toRef as Q, readonly as dd, customRef as fd, ref as R, shallowRef as Re, watch as X, getCurrentInstance as sc, onMounted as Ke, inject as qe, defineComponent as E, toRefs as hd, reactive as ic, provide as je, watchEffect as Xe, isRef as lt, onUnmounted as He, watchPostEffect as md, onBeforeUnmount as en, Comment as pr, unref as xt, useSlots as ke, useTemplateRef as pd, toRaw as Ye, Text as lc, nextTick as cc, shallowReadonly as nt, h as Zr, cloneVNode as gd, onWatcherCleanup as vd, createTextVNode as bd, withDirectives as yd, resolveDirective as Ad } from "vue";
 import { classNames as fe } from "@lumx/core/js/utils";
 import { k as $, u as U, T as gr, P as tn, C as vr, I as uc } from "./_internal/CHaqSUjw.js";
 import { getDisabledState as Sd } from "@lumx/core/js/utils/disabledState";
@@ -10,10 +10,10 @@ import { mdiChevronUp as dc } from "@lumx/icons/esm/chevron-up.js";
 import { mdiChevronDown as fc } from "@lumx/icons/esm/chevron-down.js";
 import { mdiCheckCircle as br } from "@lumx/icons/esm/check-circle.js";
 import { mdiCloseCircle as Nd } from "@lumx/icons/esm/close-circle.js";
-import { mdiInformationOutline as xd } from "@lumx/icons/esm/information-outline.js";
+import { mdiInformationOutline as Pd } from "@lumx/icons/esm/information-outline.js";
 import { mdiAlert as hc } from "@lumx/icons/esm/alert.js";
 import { mdiInformation as mc } from "@lumx/icons/esm/information.js";
-import { mdiImageBroken as Pd } from "@lumx/icons/esm/image-broken.js";
+import { mdiImageBroken as xd } from "@lumx/icons/esm/image-broken.js";
 import { mdiCheck as wd } from "@lumx/icons/esm/check.js";
 import { mdiMinus as Cd } from "@lumx/icons/esm/minus.js";
 import { mdiDragVertical as Od } from "@lumx/icons/esm/drag-vertical.js";
@@ -184,7 +184,7 @@ const an = () => cd;
 function jd(e, t, n, a) {
   return Sr(`${e}__${t}`, n, a);
 }
-function B(e) {
+function F(e) {
   function t(a, o) {
     return Sr(e, a, o);
   }
@@ -239,7 +239,7 @@ const Wd = {
   }
 }, Ud = "AlertDialog", Gd = "lumx-alert-dialog", {
   block: Kd
-} = B(Gd), as = {
+} = F(Gd), as = {
   size: H.tiny,
   kind: ie.info
 }, Xd = (e) => {
@@ -265,11 +265,11 @@ const Wd = {
     ...A
   } = e, {
     color: N,
-    icon: P
-  } = Wd[i] || {}, w = `${t}-title`, k = `${t}-description`, {
-    label: x,
+    icon: x
+  } = Wd[i] || {}, C = `${t}-title`, O = `${t}-description`, {
+    label: P,
     onClick: T,
-    ...O
+    ...k
   } = r, {
     label: _,
     onClick: q,
@@ -282,8 +282,8 @@ const Wd = {
     dialogProps: {
       id: t,
       role: "alertdialog",
-      "aria-labelledby": w,
-      "aria-describedby": k,
+      "aria-labelledby": C,
+      "aria-describedby": O,
       ...c
     },
     className: L(a, Kd({
@@ -293,16 +293,16 @@ const Wd = {
     default: () => [m("header", null, [m(b, {
       className: "lumx-spacing-margin-horizontal",
       before: m(y, {
-        icon: P,
+        icon: x,
         size: H.s,
         color: N
       }, null),
       label: m("h2", {
-        id: w,
+        id: C,
         className: "lumx-typography-title"
       }, [n])
     }, null)]), d && m(u, {
-      id: k,
+      id: O,
       className: "lumx-typography-body2 lumx-spacing-padding-vertical-big lumx-spacing-padding-horizontal-huge"
     }, Ln(d) ? d : {
       default: () => [d]
@@ -314,13 +314,13 @@ const Wd = {
         onClick: q
       }), Ln(_) ? _ : {
         default: () => [_]
-      }), m(v, S(O, {
+      }), m(v, S(k, {
         ref: f,
         color: N,
         className: "lumx-spacing-margin-left-regular",
         onClick: T
-      }), Ln(x) ? x : {
-        default: () => [x]
+      }), Ln(P) ? P : {
+        default: () => [P]
       })])
     }, null)])]
   });
@@ -331,7 +331,7 @@ function re() {
 }
 function yc(e, t, n) {
   const a = D();
-  return C(() => {
+  return w(() => {
     const o = Me(e), r = a[t];
     return n ? n(o, r) : o ?? r;
   });
@@ -361,7 +361,7 @@ function Zd(...e) {
 function Sc(e) {
   return Array.isArray(e) ? e : [e];
 }
-const xr = Yd ? window : void 0;
+const Pr = Yd ? window : void 0;
 function st(e) {
   var t;
   const n = Me(e);
@@ -375,16 +375,16 @@ function Jd() {
   }, t), e;
 }
 // @__NO_SIDE_EFFECTS__
-function Pr(e) {
+function xr(e) {
   const t = /* @__PURE__ */ Jd();
-  return C(() => (t.value, !!e()));
+  return w(() => (t.value, !!e()));
 }
 function Qd(e, t, n = {}) {
-  const { window: a = xr, ...o } = n;
+  const { window: a = Pr, ...o } = n;
   let r;
-  const s = /* @__PURE__ */ Pr(() => a && "MutationObserver" in a), i = () => {
+  const s = /* @__PURE__ */ xr(() => a && "MutationObserver" in a), i = () => {
     r && (r.disconnect(), r = void 0);
-  }, l = X(C(() => {
+  }, l = X(w(() => {
     const u = Sc(Me(e)).map(st).filter(Ac);
     return new Set(u);
   }), (u) => {
@@ -402,11 +402,11 @@ function Qd(e, t, n = {}) {
   };
 }
 function ef(e, t, n = {}) {
-  const { window: a = xr, ...o } = n;
+  const { window: a = Pr, ...o } = n;
   let r;
-  const s = /* @__PURE__ */ Pr(() => a && "ResizeObserver" in a), i = () => {
+  const s = /* @__PURE__ */ xr(() => a && "ResizeObserver" in a), i = () => {
     r && (r.disconnect(), r = void 0);
-  }, l = X(C(() => {
+  }, l = X(w(() => {
     const d = Me(e);
     return Array.isArray(d) ? d.map((u) => st(u)) : [st(d)];
   }), (d) => {
@@ -426,7 +426,7 @@ function ef(e, t, n = {}) {
   };
 }
 function rs(e, t, n = {}) {
-  const { root: a, rootMargin: o = "0px", threshold: r = 0, window: s = xr, immediate: i = !0 } = n, l = /* @__PURE__ */ Pr(() => s && "IntersectionObserver" in s), c = C(() => Sc(Me(e)).map(st).filter(Ac));
+  const { root: a, rootMargin: o = "0px", threshold: r = 0, window: s = Pr, immediate: i = !0 } = n, l = /* @__PURE__ */ xr(() => s && "IntersectionObserver" in s), c = w(() => Sc(Me(e)).map(st).filter(Ac));
   let d = Vt;
   const u = Re(i), h = l.value ? X(() => [
     c.value,
@@ -482,7 +482,7 @@ function tf(e, t = !1) {
     const s = En(Me(e));
     !s || !n.value || (s.style.overflow = a, $n.delete(s), n.value = !1);
   };
-  return on(r), C({
+  return on(r), w({
     get() {
       return n.value;
     },
@@ -493,8 +493,8 @@ function tf(e, t = !1) {
 }
 const nf = "lumx-dialog", {
   block: af,
-  element: Pe
-} = B(nf), Nc = {
+  element: xe
+} = F(nf), Nc = {
   size: H.big
 }, of = (e) => {
   const {
@@ -518,24 +518,24 @@ const nf = "lumx-dialog", {
     ThemeProvider: y,
     ClickAwayProvider: A,
     shouldPreventCloseOnClickAway: N,
-    clickAwayRefs: P,
-    rootRef: w,
-    wrapperRef: k,
-    hasTopIntersection: x,
+    clickAwayRefs: x,
+    rootRef: C,
+    wrapperRef: O,
+    hasTopIntersection: P,
     headerChildProps: T,
-    setSentinelTop: O,
+    setSentinelTop: k,
     content: _,
     setSentinelBottom: q,
     footerChildContent: j,
     footerChildProps: I,
-    ProgressCircular: F,
-    hasBottomIntersection: V,
-    ...W
+    ProgressCircular: B,
+    hasBottomIntersection: z,
+    ...V
   } = e;
   return m(b, null, {
     default: () => [m("div", S({
       ref: n
-    }, W, {
+    }, V, {
       className: L(t, af({
         "is-hidden": !l,
         "is-loading": i,
@@ -546,7 +546,7 @@ const nf = "lumx-dialog", {
         zIndex: h
       }
     }), [m("div", {
-      className: Pe("overlay")
+      className: xe("overlay")
     }, null), m(v, {
       level: 2
     }, {
@@ -554,41 +554,41 @@ const nf = "lumx-dialog", {
         value: void 0
       }, {
         default: () => [m("div", S({
-          className: Pe("container"),
+          className: xe("container"),
           role: "dialog",
           "aria-modal": "true"
         }, f), [m(A, {
           callback: !N && c,
-          childrenRefs: P,
-          parentRef: w
+          childrenRefs: x,
+          parentRef: C
         }, {
           default: () => [m("section", {
-            className: Pe("wrapper"),
-            ref: k
+            className: xe("wrapper"),
+            ref: O
           }, [(a || g) && m("header", S(T, {
-            className: L(Pe("header", {
-              "has-divider": !!(r || x)
+            className: L(xe("header", {
+              "has-divider": !!(r || P)
             }), T?.className)
           }), [a, g]), m("div", {
             ref: d,
-            className: Pe("content")
+            className: xe("content")
           }, [m("div", {
-            className: Pe("sentinel", {
+            className: xe("sentinel", {
               top: !0
             }),
-            ref: O
+            ref: k
           }, null), _, m("div", {
-            className: Pe("sentinel", {
+            className: xe("sentinel", {
               bottom: !0
             }),
             ref: q
           }, null)]), (s || j) && m("footer", S(I, {
-            className: L(Pe("footer", {
-              "has-divider": !!(o || V)
+            className: L(xe("footer", {
+              "has-divider": !!(o || z)
             }), I?.className)
           }), [s, j]), i && m("div", {
-            className: Pe("progress-overlay")
-          }, [m(F, null, null)])])]
+            className: xe("progress-overlay")
+          }, [m(B, null, null)])])]
         })])]
       })]
     })])]
@@ -603,23 +603,23 @@ const nf = "lumx-dialog", {
 }, sf = { level: 1, headingElement: "h1" }, lf = (e, t) => {
   const n = e || t + 1;
   return n > ss ? ss : n;
-}, xc = /* @__PURE__ */ Symbol("HeadingLevelContext"), Pc = () => qe(xc, sf), wr = /* @__PURE__ */ E((e, {
+}, Pc = /* @__PURE__ */ Symbol("HeadingLevelContext"), xc = () => qe(Pc, sf), wr = /* @__PURE__ */ E((e, {
   slots: t
 }) => {
   const {
     level: n
-  } = hd(e), a = Pc(), o = C(() => lf(n?.value, a.level)), r = C(() => `h${o.value}`), s = ic({
+  } = hd(e), a = xc(), o = w(() => lf(n?.value, a.level)), r = w(() => `h${o.value}`), s = ic({
     level: o,
     headingElement: r
   });
-  return je(xc, s), () => t.default?.();
+  return je(Pc, s), () => t.default?.();
 }, {
   name: "HeadingLevelProvider",
   props: $()("level")
 }), cf = "lumx-progress-circular", {
   block: uf,
   element: Gt
-} = B(cf), is = {
+} = F(cf), is = {
   size: H.m,
   display: "block"
 }, df = (e) => {
@@ -829,10 +829,10 @@ function yf() {
   var e = ze(), t = e["__core-js_shared__"];
   return Kn = t, Kn;
 }
-var Xn, xs;
+var Xn, Ps;
 function Af() {
-  if (xs) return Xn;
-  xs = 1;
+  if (Ps) return Xn;
+  Ps = 1;
   var e = yf(), t = (function() {
     var a = /[^.]+$/.exec(e && e.keys && e.keys.IE_PROTO || "");
     return a ? "Symbol(src)_1." + a : "";
@@ -842,10 +842,10 @@ function Af() {
   }
   return Xn = n, Xn;
 }
-var Yn, Ps;
+var Yn, xs;
 function Tc() {
-  if (Ps) return Yn;
-  Ps = 1;
+  if (xs) return Yn;
+  xs = 1;
   var e = Function.prototype, t = e.toString;
   function n(a) {
     if (a != null) {
@@ -911,7 +911,7 @@ function _c() {
   return ea = t, ea;
 }
 var ta, Ts;
-function xf() {
+function Pf() {
   if (Ts) return ta;
   Ts = 1;
   var e = gf(), t = _c(), n = wc(), a = t ? function(o, r) {
@@ -925,7 +925,7 @@ function xf() {
   return ta = a, ta;
 }
 var na, _s;
-function Pf() {
+function xf() {
   if (_s) return na;
   _s = 1;
   var e = 800, t = 16, n = Date.now;
@@ -947,7 +947,7 @@ var aa, Is;
 function Ic() {
   if (Is) return aa;
   Is = 1;
-  var e = xf(), t = Pf(), n = t(e);
+  var e = Pf(), t = xf(), n = t(e);
   return aa = n, aa;
 }
 var oa, Ls;
@@ -1224,7 +1224,7 @@ function Dc(e, t, n) {
     s !== r && (r = s, n?.value?.(s));
   }), en(() => {
     clearTimeout(o);
-  }), C(() => e.value || a.value);
+  }), w(() => e.value || a.value);
 }
 function Bc(e) {
   const t = tf(typeof document < "u" ? document.body : null);
@@ -1240,29 +1240,29 @@ const qf = {
   slots: n,
   attrs: a
 }) => {
-  const o = M(() => e.class), r = R(null), s = R(null), i = R(null), l = R(null), c = R(null), d = (w) => {
-    l.value = w;
-  }, u = (w) => {
-    c.value = w;
+  const o = M(() => e.class), r = R(null), s = R(null), i = R(null), l = R(null), c = R(null), d = (C) => {
+    l.value = C;
+  }, u = (C) => {
+    c.value = C;
   }, h = R(null), f = R(null);
-  rs(l, (w) => {
-    const k = w[0];
-    h.value = k ? !k.isIntersecting : null;
-  }), rs(c, (w) => {
-    const k = w[0];
-    f.value = k ? !k.isIntersecting : null;
+  rs(l, (C) => {
+    const O = C[0];
+    h.value = O ? !O.isIntersecting : null;
+  }), rs(c, (C) => {
+    const O = C[0];
+    f.value = O ? !O.isIntersecting : null;
   });
-  const g = C(() => e.preventAutoClose || e.preventCloseOnEscape), p = () => t("close");
-  ln(p, C(() => !!(e.isOpen && !g.value)));
-  const b = C(() => e.isOpen && s.value || !1);
-  Cr(b, C(() => e.focusElement)), Or(C(() => !0), C(() => {
-  }), C(() => e.parentElement), s, C(() => !!e.isOpen)), Bc(C(() => e.disableBodyScroll !== !1 && !!e.isOpen));
-  const v = Dc(C(() => !!e.isOpen), ac, C(() => (w) => t("visibilityChange", w))), y = C(() => e.isOpen || v.value || e.closeMode === "hide"), A = C(() => [s]), N = C(() => e.preventAutoClose || e.preventCloseOnClick), P = (w) => {
-    i.value = w, e.contentRef && (e.contentRef.value = w);
+  const g = w(() => e.preventAutoClose || e.preventCloseOnEscape), p = () => t("close");
+  ln(p, w(() => !!(e.isOpen && !g.value)));
+  const b = w(() => e.isOpen && s.value || !1);
+  Cr(b, w(() => e.focusElement)), Or(w(() => !0), w(() => {
+  }), w(() => e.parentElement), s, w(() => !!e.isOpen)), Bc(w(() => e.disableBodyScroll !== !1 && !!e.isOpen));
+  const v = Dc(w(() => !!e.isOpen), ac, w(() => (C) => t("visibilityChange", C))), y = w(() => e.isOpen || v.value || e.closeMode === "hide"), A = w(() => [s]), N = w(() => e.preventAutoClose || e.preventCloseOnClick), x = (C) => {
+    i.value = C, e.contentRef && (e.contentRef.value = C);
   };
   return () => {
     if (!y.value) return null;
-    const w = n.default?.() ?? [], k = w.find((_) => _.type === "header"), x = w.find((_) => _.type === "footer"), O = !!(k || x) ? w.filter((_) => _.type !== "header" && _.type !== "footer" && _.type !== pr) : w;
+    const C = n.default?.() ?? [], O = C.find((_) => _.type === "header"), P = C.find((_) => _.type === "footer"), k = !!(O || P) ? C.filter((_) => _.type !== "header" && _.type !== "footer" && _.type !== pr) : C;
     return of({
       ...a,
       ClickAwayProvider: vr,
@@ -1272,11 +1272,11 @@ const qf = {
       ProgressCircular: ff,
       className: o.value,
       clickAwayRefs: A,
-      content: O.length ? O : void 0,
-      contentRef: P,
+      content: k.length ? k : void 0,
+      contentRef: x,
       dialogProps: e.dialogProps,
       footer: void 0,
-      footerChildContent: n.footer?.() ?? x?.children,
+      footerChildContent: n.footer?.() ?? P?.children,
       footerChildProps: void 0,
       forceFooterDivider: e.forceFooterDivider,
       forceHeaderDivider: e.forceHeaderDivider,
@@ -1284,7 +1284,7 @@ const qf = {
       hasBottomIntersection: f.value,
       hasTopIntersection: h.value,
       header: void 0,
-      headerChildContent: n.header?.() ?? k?.children,
+      headerChildContent: n.header?.() ?? O?.children,
       headerChildProps: void 0,
       isLoading: e.isLoading,
       isOpen: e.isOpen,
@@ -1363,19 +1363,19 @@ function qc() {
   var e = Ze(), t = ze(), n = e(t, "Map");
   return Na = n, Na;
 }
-var xa, Zs;
+var Pa, Zs;
 function Uf() {
-  if (Zs) return xa;
+  if (Zs) return Pa;
   Zs = 1;
   var e = Ze(), t = ze(), n = e(t, "Promise");
-  return xa = n, xa;
+  return Pa = n, Pa;
 }
-var Pa, Js;
+var xa, Js;
 function Gf() {
-  if (Js) return Pa;
+  if (Js) return xa;
   Js = 1;
   var e = Ze(), t = ze(), n = e(t, "Set");
-  return Pa = n, Pa;
+  return xa = n, xa;
 }
 var wa, Qs;
 function Kf() {
@@ -1390,9 +1390,9 @@ function Xf() {
   ei = 1;
   var e = Wf(), t = qc(), n = Uf(), a = Gf(), o = Kf(), r = Tt(), s = Tc(), i = "[object Map]", l = "[object Object]", c = "[object Promise]", d = "[object Set]", u = "[object WeakMap]", h = "[object DataView]", f = s(e), g = s(t), p = s(n), b = s(a), v = s(o), y = r;
   return (e && y(new e(new ArrayBuffer(1))) != h || t && y(new t()) != i || n && y(n.resolve()) != c || a && y(new a()) != d || o && y(new o()) != u) && (y = function(A) {
-    var N = r(A), P = N == l ? A.constructor : void 0, w = P ? s(P) : "";
-    if (w)
-      switch (w) {
+    var N = r(A), x = N == l ? A.constructor : void 0, C = x ? s(x) : "";
+    if (C)
+      switch (C) {
         case f:
           return h;
         case g:
@@ -1485,8 +1485,8 @@ var $a, ci;
 function eh() {
   if (ci) return $a;
   ci = 1;
-  var e = Tt(), t = Tr(), n = cn(), a = "[object Arguments]", o = "[object Array]", r = "[object Boolean]", s = "[object Date]", i = "[object Error]", l = "[object Function]", c = "[object Map]", d = "[object Number]", u = "[object Object]", h = "[object RegExp]", f = "[object Set]", g = "[object String]", p = "[object WeakMap]", b = "[object ArrayBuffer]", v = "[object DataView]", y = "[object Float32Array]", A = "[object Float64Array]", N = "[object Int8Array]", P = "[object Int16Array]", w = "[object Int32Array]", k = "[object Uint8Array]", x = "[object Uint8ClampedArray]", T = "[object Uint16Array]", O = "[object Uint32Array]", _ = {};
-  _[y] = _[A] = _[N] = _[P] = _[w] = _[k] = _[x] = _[T] = _[O] = !0, _[a] = _[o] = _[b] = _[r] = _[v] = _[s] = _[i] = _[l] = _[c] = _[d] = _[u] = _[h] = _[f] = _[g] = _[p] = !1;
+  var e = Tt(), t = Tr(), n = cn(), a = "[object Arguments]", o = "[object Array]", r = "[object Boolean]", s = "[object Date]", i = "[object Error]", l = "[object Function]", c = "[object Map]", d = "[object Number]", u = "[object Object]", h = "[object RegExp]", f = "[object Set]", g = "[object String]", p = "[object WeakMap]", b = "[object ArrayBuffer]", v = "[object DataView]", y = "[object Float32Array]", A = "[object Float64Array]", N = "[object Int8Array]", x = "[object Int16Array]", C = "[object Int32Array]", O = "[object Uint8Array]", P = "[object Uint8ClampedArray]", T = "[object Uint16Array]", k = "[object Uint32Array]", _ = {};
+  _[y] = _[A] = _[N] = _[x] = _[C] = _[O] = _[P] = _[T] = _[k] = !0, _[a] = _[o] = _[b] = _[r] = _[v] = _[s] = _[i] = _[l] = _[c] = _[d] = _[u] = _[h] = _[f] = _[g] = _[p] = !1;
   function q(j) {
     return n(j) && t(j.length) && !!_[e(j)];
   }
@@ -1574,9 +1574,9 @@ const ft = (e) => {
   });
 }, sh = "ButtonRoot", ih = "lumx-button-wrapper", {
   block: lh
-} = B(ih), ch = "lumx-button", {
+} = F(ih), ch = "lumx-button", {
   block: uh
-} = B(ch), dh = (e) => {
+} = F(ch), dh = (e) => {
   const {
     color: t,
     emphasis: n,
@@ -1648,7 +1648,7 @@ _t.displayName = sh;
 _t.defaultProps = {};
 const fh = "Button", jc = "lumx-button", {
   modifier: hh
-} = B(jc), er = {
+} = F(jc), er = {
   emphasis: ve.high,
   size: H.m
 }, un = (e) => {
@@ -1679,17 +1679,17 @@ function ph() {
   return qe(mh, { state: null });
 }
 function te(e) {
-  const t = ph(), n = C(() => {
-    const r = typeof e == "function" ? e() : Pt(e);
+  const t = ph(), n = w(() => {
+    const r = typeof e == "function" ? e() : xt(e);
     return Sd(t, {
       disabled: r.disabled,
       isDisabled: r.isDisabled,
       "aria-disabled": r["aria-disabled"] ?? r.ariaDisabled
     });
-  }), a = C(
+  }), a = w(
     () => n.value["aria-disabled"] || n.value.disabled || void 0
-  ), o = C(() => {
-    const r = typeof e == "function" ? e() : Pt(e), { disabled: s, isDisabled: i, "aria-disabled": l, ariaDisabled: c, onClick: d, onChange: u, ...h } = r;
+  ), o = w(() => {
+    const r = typeof e == "function" ? e() : xt(e), { disabled: s, isDisabled: i, "aria-disabled": l, ariaDisabled: c, onClick: d, onChange: u, ...h } = r;
     return a.value || (d && (h.onClick = d), u && (h.onChange = u)), h;
   });
   return { disabledStateProps: n, isAnyDisabled: a, otherProps: o };
@@ -1701,7 +1701,7 @@ const hi = E({
   }
 }), gh = "Icon", vh = "lumx-icon", Hc = vh, {
   block: bh
-} = B(Hc), yh = {}, ee = (e) => {
+} = F(Hc), yh = {}, ee = (e) => {
   const {
     className: t,
     color: n,
@@ -1768,7 +1768,7 @@ const De = /* @__PURE__ */ E((e) => {
   props: $()("icon", "color", "colorVariant", "hasShape", "size", "alt", "verticalAlign", "theme", "class")
 }), Ah = "lumx-text", {
   block: Sh
-} = B(Ah), zc = (e) => {
+} = F(Ah), zc = (e) => {
   const {
     className: t,
     color: n,
@@ -1796,15 +1796,15 @@ const De = /* @__PURE__ */ E((e) => {
     }
   };
 }, Vc = /* @__PURE__ */ Symbol("tooltip-context"), Nh = {};
-function xh() {
+function Ph() {
   je(Vc, Nh);
 }
-function Ph() {
+function xh() {
   return qe(Vc, void 0);
 }
 function wh(e) {
   const t = R(void 0);
-  if (Ph())
+  if (xh())
     return { tooltipLabel: t };
   const a = () => {
     const o = e.value;
@@ -1858,10 +1858,10 @@ const me = /* @__PURE__ */ E((e, {
 }) => {
   const n = D(), a = Wc(), o = pd("tooltip-label"), {
     tooltipLabel: r
-  } = wh(o), s = M(() => e.class), i = C(() => zc({
+  } = wh(o), s = M(() => e.class), i = w(() => zc({
     ...e,
     className: s.value
-  })), l = C(() => {
+  })), l = w(() => {
     const {
       children: c,
       ...d
@@ -1897,7 +1897,7 @@ const me = /* @__PURE__ */ E((e, {
     isAnyDisabled: s,
     disabledStateProps: i,
     otherProps: l
-  } = te(C(() => ({
+  } = te(w(() => ({
     ...e,
     ...a
   }))), c = (u) => {
@@ -1937,7 +1937,7 @@ const me = /* @__PURE__ */ E((e, {
 }), pN = "Toolbar", kh = "lumx-toolbar", {
   block: Th,
   element: Da
-} = B(kh), _h = (e) => {
+} = F(kh), _h = (e) => {
   const {
     after: t,
     before: n,
@@ -1981,7 +1981,7 @@ const me = /* @__PURE__ */ E((e, {
   emit: t,
   slots: n
 }) => {
-  const a = D(), o = M(() => e.class), r = re(), s = C(() => e.id || r), i = Re(void 0), l = Re(void 0);
+  const a = D(), o = M(() => e.class), r = re(), s = w(() => e.id || r), i = Re(void 0), l = Re(void 0);
   return () => {
     const c = n.default?.(), u = c?.length === 1 && c[0].type === lc ? "p" : "div", h = {
       isOpen: e.isOpen,
@@ -2032,7 +2032,7 @@ const me = /* @__PURE__ */ E((e, {
 }), Eh = "lumx-avatar", {
   block: $h,
   element: nr
-} = B(Eh), Uc = {
+} = F(Eh), Uc = {
   size: H.m
 }, Mh = (e) => {
   const {
@@ -2119,7 +2119,7 @@ const Bh = "lumx-thumbnail", {
   block: Fh,
   element: Nt
 } = fe.bem(Bh), pi = {
-  fallback: Pd,
+  fallback: xd,
   loading: "lazy"
 }, qh = (e) => {
   const {
@@ -2143,32 +2143,32 @@ const Bh = "lumx-thumbnail", {
     isAnyDisabled: y,
     disabledStateProps: A,
     size: N,
-    theme: P,
-    loadingState: w,
-    variant: k,
-    linkProps: x,
+    theme: x,
+    loadingState: C,
+    variant: O,
+    linkProps: P,
     linkAs: T,
-    handleClick: O,
+    handleClick: k,
     handleKeyPress: _,
     ...q
-  } = e, j = g || w === "isLoading", I = w === "hasError", F = I && typeof l == "string", V = I && !F, W = {};
-  F ? W.visibility = "hidden" : V && (W.display = "none");
-  const z = !!(x?.href || T), Y = !y && !!(z || O || _), ae = {
+  } = e, j = g || C === "isLoading", I = C === "hasError", B = I && typeof l == "string", z = I && !B, V = {};
+  B ? V.visibility = "hidden" : z && (V.display = "none");
+  const W = !!(P?.href || T), Y = !y && !!(W || k || _), ae = {
     ...q
   };
   Y && (Object.assign(ae, {
-    as: T || (x?.href ? "a" : "button")
-  }, A), z ? Object.assign(ae, x) : ae["aria-label"] = q["aria-label"] || n);
-  const Z = fe.join(x?.className, r, Fh({
+    as: T || (P?.href ? "a" : "button")
+  }, A), W ? Object.assign(ae, P) : ae["aria-label"] = q["aria-label"] || n);
+  const Z = fe.join(P?.className, r, Fh({
     [`align-${t}`]: !!t,
     [`aspect-ratio-${a}`]: !!a,
     [`size-${N}`]: !!N,
-    [`theme-${P}`]: !!P,
-    [`variant-${k}`]: !!k,
+    [`theme-${x}`]: !!x,
+    [`variant-${O}`]: !!O,
     "is-clickable": Y,
     "has-error": I,
-    "has-icon-error-fallback": F,
-    "has-custom-error-fallback": V,
+    "has-icon-error-fallback": B,
+    "has-custom-error-fallback": z,
     "is-loading": j,
     [`object-fit-${p}`]: !!p,
     "has-badge": !!o,
@@ -2185,7 +2185,7 @@ const Bh = "lumx-thumbnail", {
       // Reserve space while loading (when possible)
       width: j ? h?.width || J?.naturalWidth : void 0,
       ...h?.style,
-      ...W,
+      ...V,
       ...c,
       ...id
     },
@@ -2200,17 +2200,17 @@ const Bh = "lumx-thumbnail", {
     loading: b
   }), null), !j && I && m("span", {
     className: Nt("fallback")
-  }, [F ? ee({
+  }, [B ? ee({
     icon: l,
     size: rt.xxs,
-    theme: P
+    theme: x
   }) : l])]), o]);
   return Y ? ft({
     ref: i,
     ...ae,
     className: Z,
     children: Xr,
-    handleClick: O,
+    handleClick: k,
     handleKeyPress: _
   }) : m("div", S({
     ref: i
@@ -2241,7 +2241,7 @@ function jh(e, t) {
   }), n;
 }
 function Hh(e) {
-  const { image: t, aspectRatio: n, focusPoint: a, width: o, height: r, element: s, isLoaded: i } = e, l = C(
+  const { image: t, aspectRatio: n, focusPoint: a, width: o, height: r, element: s, isLoaded: i } = e, l = w(
     () => Rh({
       image: t.value,
       aspectRatio: n.value,
@@ -2264,7 +2264,7 @@ function Hh(e) {
       cc(d);
     },
     { immediate: !0 }
-  ), C(
+  ), w(
     () => Dh({
       image: t.value,
       aspectRatio: n.value,
@@ -2286,10 +2286,10 @@ const zh = {
     isAnyDisabled: c,
     disabledStateProps: d,
     otherProps: u
-  } = te(C(() => ({
+  } = te(w(() => ({
     ...e,
     ...a
-  }))), h = jh(Q(() => e.image), s), f = C(() => h.value === "isLoaded"), g = Hh({
+  }))), h = jh(Q(() => e.image), s), f = w(() => h.value === "isLoaded"), g = Hh({
     image: Q(() => e.image),
     aspectRatio: Q(() => e.aspectRatio),
     focusPoint: Q(() => e.focusPoint),
@@ -2320,11 +2320,11 @@ const zh = {
       handleClick: i ? p : void 0,
       handleKeyPress: l ? b : void 0,
       fallback: y,
-      badge: v && (Array.isArray(v) ? v.map((P) => ({
-        ...P,
+      badge: v && (Array.isArray(v) ? v.map((x) => ({
+        ...x,
         props: {
-          ...P.props,
-          class: fe.join(Nt("badge"), P.props?.class)
+          ...x.props,
+          class: fe.join(Nt("badge"), x.props?.class)
         }
       })) : {
         ...v,
@@ -2507,33 +2507,33 @@ function _r(e, t, n) {
   }
   const f = Kc(n);
   function g(N) {
-    const P = N > 0, w = Math.abs(N), k = l(), x = d(), T = P ? () => x.nextNode() : () => x.previousNode();
-    let O = null, _ = w;
-    if (k)
-      x.currentNode = k;
-    else if (!P) {
-      if (O = x.lastChild(), !O) return null;
+    const x = N > 0, C = Math.abs(N), O = l(), P = d(), T = x ? () => P.nextNode() : () => P.previousNode();
+    let k = null, _ = C;
+    if (O)
+      P.currentNode = O;
+    else if (!x) {
+      if (k = P.lastChild(), !k) return null;
       _ -= 1;
     }
     for (let q = 0; q < _; q++) {
       const j = T();
       if (j)
-        O = j;
-      else if (k && s) {
-        const I = P ? u() : h();
-        if (!I || I === k) break;
-        O = I, x.currentNode = I;
+        k = j;
+      else if (O && s) {
+        const I = x ? u() : h();
+        if (!I || I === O) break;
+        k = I, P.currentNode = I;
       } else
         break;
     }
-    return O;
+    return k;
   }
   function p(N) {
-    const P = d(!1);
-    let w = P.nextNode();
-    for (; w; ) {
-      if (N(w)) return w;
-      w = P.nextNode();
+    const x = d(!1);
+    let C = x.nextNode();
+    for (; C; ) {
+      if (N(C)) return C;
+      C = x.nextNode();
     }
     return null;
   }
@@ -2557,24 +2557,24 @@ function _r(e, t, n) {
       if (!a.contains(N)) return u();
       if (N instanceof HTMLElement && N.matches(c))
         return N;
-      const P = d();
-      P.currentNode = N;
-      const w = P.nextNode();
-      return w instanceof HTMLElement ? w : (P.currentNode = N, P.previousNode());
+      const x = d();
+      x.currentNode = N;
+      const C = x.nextNode();
+      return C instanceof HTMLElement ? C : (x.currentNode = N, x.previousNode());
     }
   };
   function y(N) {
-    const P = N(v);
-    if (P && P.matches(o) && a.contains(P)) {
-      const w = l();
-      return w !== P && (w && t.onDeactivate(w), t.onActivate(P)), f.clear(), !0;
+    const x = N(v);
+    if (x && x.matches(o) && a.contains(x)) {
+      const C = l();
+      return C !== x && (C && t.onDeactivate(C), t.onActivate(x)), f.clear(), !0;
     }
     return f.defer(() => y(N)), !1;
   }
   function A(N) {
     if (N === 0) return l() !== null;
-    const P = g(N);
-    return P ? y(() => P) : !1;
+    const x = g(N);
+    return x ? y(() => x) : !1;
   }
   return {
     type: "list",
@@ -2624,76 +2624,76 @@ function _e(e) {
   return n ? null : t;
 }
 function Qh(e, t, n) {
-  const { container: a, rowSelector: o, cellSelector: r, wrap: s = !1 } = e, i = Zh(t, n), l = (x) => x.querySelector(r) !== null, c = (x) => x.querySelector(r), d = (x) => Array.from(x.querySelectorAll(r));
-  function* u(x = "first", T = "next", O) {
+  const { container: a, rowSelector: o, cellSelector: r, wrap: s = !1 } = e, i = Zh(t, n), l = (P) => P.querySelector(r) !== null, c = (P) => P.querySelector(r), d = (P) => Array.from(P.querySelectorAll(r));
+  function* u(P = "first", T = "next", k) {
     const _ = Lt(a, o);
-    x instanceof HTMLElement ? _.currentNode = x : x === "last" && (_.currentNode = Jh(a));
+    P instanceof HTMLElement ? _.currentNode = P : P === "last" && (_.currentNode = Jh(a));
     let q;
     do
       if (q = T === "next" ? _.nextNode() : _.previousNode(), q && l(q)) {
-        const j = O ? O(q) : q;
+        const j = k ? k(q) : q;
         j && (yield j);
       }
     while (q);
   }
   const h = () => _e(u()), f = () => _e(u("last", "prev"));
-  function g(x) {
-    const T = x.closest(o);
+  function g(P) {
+    const T = P.closest(o);
     return T && a.contains(T) ? T : null;
   }
   const p = Kc(n);
   let b = 0;
-  function v(x, T) {
-    const O = d(x);
-    if (O.length === 0) return !1;
-    const _ = Math.min(T, O.length - 1);
-    return i.setActive(O[_]), !0;
-  }
-  function y(x) {
-    const T = g(x);
+  function v(P, T) {
+    const k = d(P);
+    if (k.length === 0) return !1;
+    const _ = Math.min(T, k.length - 1);
+    return i.setActive(k[_]), !0;
+  }
+  function y(P) {
+    const T = g(P);
     if (!T) return !1;
-    const _ = d(T).indexOf(x);
-    return _ === -1 ? !1 : (b = _, i.setActive(x), !0);
+    const _ = d(T).indexOf(P);
+    return _ === -1 ? !1 : (b = _, i.setActive(P), !0);
   }
   function A() {
-    const x = h();
-    return x ? (b = 0, v(x, 0)) : !1;
+    const P = h();
+    return P ? (b = 0, v(P, 0)) : !1;
   }
   function N() {
-    const x = f();
-    return x ? (b = 0, v(x, 0)) : !1;
+    const P = f();
+    return P ? (b = 0, v(P, 0)) : !1;
   }
-  function P(x) {
+  function x(P) {
     if (!i.active) return !1;
     const T = g(i.active);
     if (!T) return !1;
-    const O = d(T), _ = O.indexOf(i.active);
+    const k = d(T), _ = k.indexOf(i.active);
     if (_ === -1) return !1;
-    const q = _ + x;
-    if (q >= 0 && q < O.length)
-      return b = q, i.setActive(O[q]), !0;
+    const q = _ + P;
+    if (q >= 0 && q < k.length)
+      return b = q, i.setActive(k[q]), !0;
     if (!s) return !1;
-    const j = x > 0 ? "next" : "prev", F = _e(u(T, j)) ?? (x > 0 ? h() : f());
-    if (!F) return !1;
-    const V = d(F);
-    if (V.length === 0) return !1;
-    const W = x > 0 ? 0 : V.length - 1;
-    return b = W, i.setActive(V[W]), !0;
-  }
-  function w(x) {
+    const j = P > 0 ? "next" : "prev", B = _e(u(T, j)) ?? (P > 0 ? h() : f());
+    if (!B) return !1;
+    const z = d(B);
+    if (z.length === 0) return !1;
+    const V = P > 0 ? 0 : z.length - 1;
+    return b = V, i.setActive(z[V]), !0;
+  }
+  function C(P) {
     if (!i.active)
-      return x === "next" ? A() : N();
+      return P === "next" ? A() : N();
     const T = g(i.active);
     if (!T) return !1;
-    const O = _e(u(T, x));
-    if (O) return v(O, b);
+    const k = _e(u(T, P));
+    if (k) return v(k, b);
     if (s) {
-      const _ = x === "next" ? h() : f();
+      const _ = P === "next" ? h() : f();
       if (_) return v(_, b);
     }
     return !1;
   }
-  const k = {
+  const O = {
     get activeItem() {
       return i.active;
     },
@@ -2705,47 +2705,47 @@ function Qh(e, t, n) {
     // First cell in last row
     getLast: () => _e(u("last", "prev", c)),
     // First cell matching predicate
-    getMatching: (x) => _e(u("first", "next", (T) => d(T).find(x)))
+    getMatching: (P) => _e(u("first", "next", (T) => d(T).find(P)))
   };
   return {
     type: "grid",
-    selectors: k,
-    goToOffset(x) {
-      if (x === 0) return i.active !== null;
+    selectors: O,
+    goToOffset(P) {
+      if (P === 0) return i.active !== null;
       const T = Array.from(u());
       if (T.length === 0) return !1;
       if (!i.active) {
-        const j = x > 0 ? 0 : T.length - 1, I = x > 0 ? x - 1 : x + 1, F = Math.max(0, Math.min(j + I, T.length - 1));
-        return v(T[F], b);
+        const j = P > 0 ? 0 : T.length - 1, I = P > 0 ? P - 1 : P + 1, B = Math.max(0, Math.min(j + I, T.length - 1));
+        return v(T[B], b);
       }
-      const O = g(i.active);
-      if (!O) return !1;
-      const _ = T.indexOf(O);
+      const k = g(i.active);
+      if (!k) return !1;
+      const _ = T.indexOf(k);
       if (_ === -1) return !1;
-      const q = Math.max(0, Math.min(_ + x, T.length - 1));
+      const q = Math.max(0, Math.min(_ + P, T.length - 1));
       return q === _ ? !1 : v(T[q], b);
     },
     clear() {
       i.clear(), p.clear();
     },
-    goTo(x) {
-      const T = x(k);
-      return T && y(T) ? (p.clear(), !0) : (p.defer(() => this.goTo(x)), !1);
+    goTo(P) {
+      const T = P(O);
+      return T && y(T) ? (p.clear(), !0) : (p.defer(() => this.goTo(P)), !1);
     },
     flushPendingNavigation() {
       p.flush();
     },
     goUp() {
-      return w("prev");
+      return C("prev");
     },
     goDown() {
-      return w("next");
+      return C("next");
     },
     goLeft() {
-      return P(-1);
+      return x(-1);
     },
     goRight() {
-      return P(1);
+      return x(1);
     }
   };
 }
@@ -2837,42 +2837,42 @@ function tm(e, t) {
   g();
   const b = new MutationObserver((v) => {
     let y = null, A = null, N = null;
-    const P = [], w = [];
-    for (const k of v) {
-      if (k.type === "childList") {
+    const x = [], C = [];
+    for (const O of v) {
+      if (O.type === "childList") {
         if (!y)
-          for (const T of k.removedNodes) {
-            const { value: O } = vi(T, l).next();
-            if (O) {
-              y = O, A = k.nextSibling ?? k.previousSibling ?? null;
+          for (const T of O.removedNodes) {
+            const { value: k } = vi(T, l).next();
+            if (k) {
+              y = k, A = O.nextSibling ?? O.previousSibling ?? null;
               break;
             }
           }
-        for (const T of k.addedNodes)
-          for (const O of vi(T, a))
-            w.push(O);
+        for (const T of O.addedNodes)
+          for (const k of vi(T, a))
+            C.push(k);
       }
-      const x = k.target;
-      k.type === "attributes" && x.matches(a) && (k.attributeName === s && x.getAttribute(s) === "true" ? N = x : r && x.matches(r) && P.push(x));
+      const P = O.target;
+      O.type === "attributes" && P.matches(a) && (O.attributeName === s && P.getAttribute(s) === "true" ? N = P : r && P.matches(r) && x.push(P));
     }
     if (y) {
-      const k = d.hasFocus;
-      d.reset(), p(k, A);
+      const O = d.hasFocus;
+      d.reset(), p(O, A);
     }
-    if (w.length > 0) {
-      const k = n.querySelector(l) !== null;
-      f(w, k);
+    if (C.length > 0) {
+      const O = n.querySelector(l) !== null;
+      f(C, O);
     }
-    if (P.length > 0) {
-      const k = u.selectors.activeItem;
-      for (const O of P)
-        h(O, "-1");
-      const T = !!(k && P.includes(k) && d.hasFocus);
+    if (x.length > 0) {
+      const O = u.selectors.activeItem;
+      for (const k of x)
+        h(k, "-1");
+      const T = !!(O && x.includes(O) && d.hasFocus);
       p(T);
     }
     if (N) {
-      const k = n.querySelector(l);
-      k && k !== N && h(k, "-1"), h(N, "0");
+      const O = n.querySelector(l);
+      O && O !== N && h(O, "-1"), h(N, "0");
     }
   });
   return b.observe(n, {
@@ -2988,92 +2988,92 @@ function Xc(e, t, n) {
     loadingChange: /* @__PURE__ */ new Set(),
     loadingAnnouncement: /* @__PURE__ */ new Set()
   };
-  function v(I, F) {
-    b[I].forEach((V) => V(F));
+  function v(I, B) {
+    b[I].forEach((z) => z(B));
   }
   function y() {
     let I = 0;
-    for (const F of c.values())
-      F.lastFiltered || (I += 1);
+    for (const B of c.values())
+      B.lastFiltered || (I += 1);
     return I;
   }
   function A() {
     return y() > 0 || p > 0;
   }
   function N() {
-    for (const [W] of d)
-      gi(W, d, c);
-    const I = y(), F = o?.value ?? "";
-    (I !== h || I === 0 && F !== f) && (h = I, f = F, v("optionsChange", { optionsLength: I, inputValue: F })), i && o?.setAttribute("aria-expanded", String(A()));
+    for (const [V] of d)
+      gi(V, d, c);
+    const I = y(), B = o?.value ?? "";
+    (I !== h || I === 0 && B !== f) && (h = I, f = B, v("optionsChange", { optionsLength: I, inputValue: B })), i && o?.setAttribute("aria-expanded", String(A()));
   }
-  const P = 500;
-  let w, k = !1;
-  function x() {
-    clearTimeout(w), p > 0 && i && (w = setTimeout(() => {
-      p > 0 && i && (k = !0, v("loadingAnnouncement", !0));
-    }, P));
+  const x = 500;
+  let C, O = !1;
+  function P() {
+    clearTimeout(C), p > 0 && i && (C = setTimeout(() => {
+      p > 0 && i && (O = !0, v("loadingAnnouncement", !0));
+    }, x));
   }
   function T() {
     const I = p > 0;
-    g = I, v("loadingChange", I), I ? x() : (clearTimeout(w), k && (k = !1, v("loadingAnnouncement", !1)));
+    g = I, v("loadingChange", I), I ? P() : (clearTimeout(C), O && (O = !1, v("loadingAnnouncement", !1)));
   }
-  let O;
+  let k;
   function _() {
     u?.abort(), u = null, s = null;
   }
-  function q(I, F, V) {
-    function W(z) {
-      if (V?.(z)) {
-        z.stopPropagation(), z.preventDefault();
+  function q(I, B, z) {
+    function V(W) {
+      if (z?.(W)) {
+        W.stopPropagation(), W.preventDefault();
         return;
       }
       let Y = !1;
-      const { altKey: ae } = z, Z = O.focusNav;
-      switch (z.key) {
+      const { altKey: ae } = W, Z = k.focusNav;
+      switch (W.key) {
         case "Enter":
-          if (O.isOpen && Z?.selectors.activeItem) {
+          if (k.isOpen && Z?.selectors.activeItem) {
             const { activeItem: J } = Z.selectors;
             Gc(J) || J.click(), Y = !0;
-          } else O.isOpen && !O.isMultiSelect && O.setIsOpen(!1);
+          } else k.isOpen && !k.isMultiSelect && k.setIsOpen(!1);
           break;
         // Open if closed, else move focus within listbox (wrap if enabled).
         case "ArrowDown":
-          O.isOpen ? Z?.selectors.hasNavigableItems && !ae && (Z.selectors.activeItem ? Z.goDown() : Z.goTo((J) => J.getMatching(Bt) ?? J.getFirst())) : (O.setIsOpen(!0), ae || Z?.goTo((J) => J.getMatching(Bt) ?? J.getFirst())), Y = !0;
+          k.isOpen ? Z?.selectors.hasNavigableItems && !ae && (Z.selectors.activeItem ? Z.goDown() : Z.goTo((J) => J.getMatching(Bt) ?? J.getFirst())) : (k.setIsOpen(!0), ae || Z?.goTo((J) => J.getMatching(Bt) ?? J.getFirst())), Y = !0;
           break;
         // Open if closed, else move focus within listbox (wrap if enabled).
         case "ArrowUp":
-          !O.isOpen && !ae ? (O.setIsOpen(!0), Z?.goTo((J) => J.getMatching(Bt) ?? J.getLast())) : O.isOpen && Z?.selectors.hasNavigableItems && (Z.selectors.activeItem ? Z.goUp() : ae || Z.goTo((J) => J.getMatching(Bt) ?? J.getLast())), Y = !0;
+          !k.isOpen && !ae ? (k.setIsOpen(!0), Z?.goTo((J) => J.getMatching(Bt) ?? J.getLast())) : k.isOpen && Z?.selectors.hasNavigableItems && (Z.selectors.activeItem ? Z.goUp() : ae || Z.goTo((J) => J.getMatching(Bt) ?? J.getLast())), Y = !0;
           break;
         case "Escape":
-          O.isOpen ? O.setIsOpen(!1) : O.select(null), Y = !0;
+          k.isOpen ? k.setIsOpen(!1) : k.select(null), Y = !0;
           break;
         case "PageUp":
-          O.isOpen && Z?.selectors.activeItem && Z.goToOffset(-10), Y = !0;
+          k.isOpen && Z?.selectors.activeItem && Z.goToOffset(-10), Y = !0;
           break;
         case "PageDown":
-          O.isOpen && Z?.selectors.activeItem && Z.goToOffset(10), Y = !0;
+          k.isOpen && Z?.selectors.activeItem && Z.goToOffset(10), Y = !0;
           break;
       }
-      Y && (z.stopPropagation(), z.preventDefault());
+      Y && (W.stopPropagation(), W.preventDefault());
     }
-    I.addEventListener("keydown", (z) => W(z), { signal: F });
+    I.addEventListener("keydown", (W) => V(W), { signal: B });
   }
   function j() {
     if (!o) return;
     const I = !u;
     if (u || (u = new AbortController()), o.getAttribute("aria-activedescendant") || o.setAttribute("aria-activedescendant", ""), o.setAttribute("aria-expanded", String(i)), I) {
-      const F = n?.(O, u.signal) || void 0;
-      q(o, u.signal, F), o.addEventListener(
+      const B = n?.(k, u.signal) || void 0;
+      q(o, u.signal, B), o.addEventListener(
         "focusout",
         () => {
-          O.setIsOpen(!1);
+          k.setIsOpen(!1);
         },
         { signal: u.signal }
       );
     }
-    r && !s && (s = bi(O, u.signal, v, { wrapNavigation: a }));
+    r && !s && (s = bi(k, u.signal, v, { wrapNavigation: a }));
   }
-  return O = {
+  return k = {
     get trigger() {
       return o;
     },
@@ -3093,39 +3093,39 @@ function Xc(e, t, n) {
       return p > 0;
     },
     setIsOpen(I) {
-      i !== I && (i = I, I ? p > 0 && x() : (s?.clear(), clearTimeout(w), k && (k = !1, v("loadingAnnouncement", !1))), o?.setAttribute("aria-expanded", String(I && A())), v("open", I));
+      i !== I && (i = I, I ? p > 0 && P() : (s?.clear(), clearTimeout(C), O && (O = !1, v("loadingAnnouncement", !1))), o?.setAttribute("aria-expanded", String(I && A())), v("open", I));
     },
     select(I) {
-      e.onSelect?.({ value: I ? Dt(I) : "" }), I && !O.isMultiSelect && (O.focusNav?.clear(), requestAnimationFrame(() => {
-        O.setIsOpen(!1);
+      e.onSelect?.({ value: I ? Dt(I) : "" }), I && !k.isMultiSelect && (k.focusNav?.clear(), requestAnimationFrame(() => {
+        k.setIsOpen(!1);
       }));
     },
     flushPendingNavigation() {
       s?.flushPendingNavigation();
     },
-    registerOption(I, F) {
-      const V = l.toLowerCase(), W = Dt(I).toLowerCase(), z = V.length > 0 && !W.includes(V);
-      return c.set(I, { callback: F, lastFiltered: z }), F(z), N(), () => {
+    registerOption(I, B) {
+      const z = l.toLowerCase(), V = Dt(I).toLowerCase(), W = z.length > 0 && !V.includes(z);
+      return c.set(I, { callback: B, lastFiltered: W }), B(W), N(), () => {
         c.delete(I), N();
       };
     },
     setFilter(I) {
       l = I;
-      const F = I.toLowerCase();
-      for (const [V, W] of c) {
-        const z = Dt(V).toLowerCase(), Y = F.length > 0 && !z.includes(F);
-        Y !== W.lastFiltered && (W.lastFiltered = Y, W.callback(Y));
+      const B = I.toLowerCase();
+      for (const [z, V] of c) {
+        const W = Dt(z).toLowerCase(), Y = B.length > 0 && !W.includes(B);
+        Y !== V.lastFiltered && (V.lastFiltered = Y, V.callback(Y));
       }
       N();
     },
     refilterOption(I) {
-      const F = c.get(I);
-      if (!F) return;
-      const V = l.toLowerCase(), W = Dt(I).toLowerCase(), z = V.length > 0 && !W.includes(V);
-      z !== F.lastFiltered && (F.lastFiltered = z, F.callback(z), N());
+      const B = c.get(I);
+      if (!B) return;
+      const z = l.toLowerCase(), V = Dt(I).toLowerCase(), W = z.length > 0 && !V.includes(z);
+      W !== B.lastFiltered && (B.lastFiltered = W, B.callback(W), N());
     },
-    registerSection(I, F) {
-      return d.set(I, { callback: F, last: { hidden: !1, "aria-hidden": !1 } }), gi(I, d, c, !0), () => {
+    registerSection(I, B) {
+      return d.set(I, { callback: B, last: { hidden: !1, "aria-hidden": !1 } }), gi(I, d, c, !0), () => {
         d.delete(I);
       };
     },
@@ -3143,22 +3143,22 @@ function Xc(e, t, n) {
     registerListbox(I) {
       if (r === I) return () => {
       };
-      const F = !!r;
-      return r = I, o && u && (F ? (_(), j()) : s = bi(O, u.signal, v, { wrapNavigation: a })), () => {
+      const B = !!r;
+      return r = I, o && u && (B ? (_(), j()) : s = bi(k, u.signal, v, { wrapNavigation: a })), () => {
         r === I && (r = null, s = null);
       };
     },
-    subscribe(I, F) {
-      return b[I].add(F), I === "open" && i && F(!0), I === "loadingChange" && g && F(!0), () => {
-        b[I].delete(F);
+    subscribe(I, B) {
+      return b[I].add(B), I === "open" && i && B(!0), I === "loadingChange" && g && B(!0), () => {
+        b[I].delete(B);
       };
     },
     destroy() {
-      _(), o = null, r = null, l = "", h = 0, f = "", g = !1, c.clear(), d.clear(), p = 0, clearTimeout(w), k = !1;
+      _(), o = null, r = null, l = "", h = 0, f = "", g = !1, c.clear(), d.clear(), p = 0, clearTimeout(C), O = !1;
       for (const I of Object.values(b))
         I.clear();
     }
-  }, O;
+  }, k;
 }
 const nm = 500;
 function Yc(e, t, n) {
@@ -3376,7 +3376,7 @@ function Jt(e) {
     y: n
   };
 }
-function xi(e, t, n) {
+function Pi(e, t, n) {
   let {
     reference: a,
     floating: o
@@ -3456,17 +3456,17 @@ async function gm(e, t) {
   } : {
     x: 1,
     y: 1
-  }, P = Jt(r.convertOffsetParentRelativeRectToViewportRelativeRect ? await r.convertOffsetParentRelativeRectToViewportRelativeRect({
+  }, x = Jt(r.convertOffsetParentRelativeRectToViewportRelativeRect ? await r.convertOffsetParentRelativeRectToViewportRelativeRect({
     elements: i,
     rect: y,
     offsetParent: A,
     strategy: l
   }) : y);
   return {
-    top: (v.top - P.top + g.top) / N.y,
-    bottom: (P.bottom - v.bottom + g.bottom) / N.y,
-    left: (v.left - P.left + g.left) / N.x,
-    right: (P.right - v.right + g.right) / N.x
+    top: (v.top - x.top + g.top) / N.y,
+    bottom: (x.bottom - v.bottom + g.bottom) / N.y,
+    left: (v.left - x.left + g.left) / N.x,
+    right: (x.right - v.right + g.right) / N.x
   };
 }
 const vm = async (e, t, n) => {
@@ -3483,7 +3483,7 @@ const vm = async (e, t, n) => {
   }), {
     x: d,
     y: u
-  } = xi(c, a, l), h = a, f = {}, g = 0;
+  } = Pi(c, a, l), h = a, f = {}, g = 0;
   for (let b = 0; b < i.length; b++) {
     var p;
     const {
@@ -3492,8 +3492,8 @@ const vm = async (e, t, n) => {
     } = i[b], {
       x: A,
       y: N,
-      data: P,
-      reset: w
+      data: x,
+      reset: C
     } = await y({
       x: d,
       y: u,
@@ -3515,16 +3515,16 @@ const vm = async (e, t, n) => {
       ...f,
       [v]: {
         ...f[v],
-        ...P
+        ...x
       }
-    }, w && g <= 50 && (g++, typeof w == "object" && (w.placement && (h = w.placement), w.rects && (c = w.rects === !0 ? await s.getElementRects({
+    }, C && g <= 50 && (g++, typeof C == "object" && (C.placement && (h = C.placement), C.rects && (c = C.rects === !0 ? await s.getElementRects({
       reference: e,
       floating: t,
       strategy: o
-    }) : w.rects), {
+    }) : C.rects), {
       x: d,
       y: u
-    } = xi(c, h, l)), b = -1);
+    } = Pi(c, h, l)), b = -1);
   }
   return {
     x: d,
@@ -3554,20 +3554,20 @@ const vm = async (e, t, n) => {
     const u = Qc(d), h = {
       x: n,
       y: a
-    }, f = Lr(o), g = Ir(f), p = await s.getDimensions(c), b = f === "y", v = b ? "top" : "left", y = b ? "bottom" : "right", A = b ? "clientHeight" : "clientWidth", N = r.reference[g] + r.reference[f] - h[f] - r.floating[g], P = h[f] - r.reference[f], w = await (s.getOffsetParent == null ? void 0 : s.getOffsetParent(c));
-    let k = w ? w[A] : 0;
-    (!k || !await (s.isElement == null ? void 0 : s.isElement(w))) && (k = i.floating[A] || r.floating[g]);
-    const x = N / 2 - P / 2, T = k / 2 - p[g] / 2 - 1, O = Be(u[v], T), _ = Be(u[y], T), q = O, j = k - p[g] - _, I = k / 2 - p[g] / 2 + x, F = rr(q, I, j), V = !l.arrow && de(o) != null && I !== F && r.reference[g] / 2 - (I < q ? O : _) - p[g] / 2 < 0, W = V ? I < q ? I - q : I - j : 0;
+    }, f = Lr(o), g = Ir(f), p = await s.getDimensions(c), b = f === "y", v = b ? "top" : "left", y = b ? "bottom" : "right", A = b ? "clientHeight" : "clientWidth", N = r.reference[g] + r.reference[f] - h[f] - r.floating[g], x = h[f] - r.reference[f], C = await (s.getOffsetParent == null ? void 0 : s.getOffsetParent(c));
+    let O = C ? C[A] : 0;
+    (!O || !await (s.isElement == null ? void 0 : s.isElement(C))) && (O = i.floating[A] || r.floating[g]);
+    const P = N / 2 - x / 2, T = O / 2 - p[g] / 2 - 1, k = Be(u[v], T), _ = Be(u[y], T), q = k, j = O - p[g] - _, I = O / 2 - p[g] / 2 + P, B = rr(q, I, j), z = !l.arrow && de(o) != null && I !== B && r.reference[g] / 2 - (I < q ? k : _) - p[g] / 2 < 0, V = z ? I < q ? I - q : I - j : 0;
     return {
-      [f]: h[f] + W,
+      [f]: h[f] + V,
       data: {
-        [f]: F,
-        centerOffset: I - F - W,
-        ...V && {
-          alignmentOffset: W
+        [f]: B,
+        centerOffset: I - B - V,
+        ...z && {
+          alignmentOffset: V
         }
       },
-      reset: V
+      reset: z
     };
   }
 });
@@ -3602,39 +3602,39 @@ const Am = function(e) {
             placement: p[0]
           }
         };
-      const N = [b[Ae(y)], b[A[0]], b[A[1]]], P = [...((a = s.autoPlacement) == null ? void 0 : a.overflows) || [], {
+      const N = [b[Ae(y)], b[A[0]], b[A[1]]], x = [...((a = s.autoPlacement) == null ? void 0 : a.overflows) || [], {
         placement: y,
         overflows: N
-      }], w = p[v + 1];
-      if (w)
+      }], C = p[v + 1];
+      if (C)
         return {
           data: {
             index: v + 1,
-            overflows: P
+            overflows: x
           },
           reset: {
-            placement: w
+            placement: C
           }
         };
-      const k = P.map((O) => {
-        const _ = de(O.placement);
-        return [O.placement, _ && d ? (
+      const O = x.map((k) => {
+        const _ = de(k.placement);
+        return [k.placement, _ && d ? (
           // Check along the mainAxis and main crossAxis side.
-          O.overflows.slice(0, 2).reduce((q, j) => q + j, 0)
+          k.overflows.slice(0, 2).reduce((q, j) => q + j, 0)
         ) : (
           // Check only the mainAxis.
-          O.overflows[0]
-        ), O.overflows];
-      }).sort((O, _) => O[1] - _[1]), T = ((o = k.filter((O) => O[2].slice(
+          k.overflows[0]
+        ), k.overflows];
+      }).sort((k, _) => k[1] - _[1]), T = ((o = O.filter((k) => k[2].slice(
         0,
         // Aligned placements should not check their opposite crossAxis
         // side.
-        de(O[0]) ? 2 : 3
-      ).every((_) => _ <= 0))[0]) == null ? void 0 : o[0]) || k[0][0];
+        de(k[0]) ? 2 : 3
+      ).every((_) => _ <= 0))[0]) == null ? void 0 : o[0]) || O[0][0];
       return T !== i ? {
         data: {
           index: v + 1,
-          overflows: P
+          overflows: x
         },
         reset: {
           placement: T
@@ -3666,57 +3666,57 @@ const Am = function(e) {
       } = Qe(e, t);
       if ((n = r.arrow) != null && n.alignmentOffset)
         return {};
-      const v = Ae(o), y = Ce(i), A = Ae(i) === i, N = await (l.isRTL == null ? void 0 : l.isRTL(c.floating)), P = h || (A || !p ? [Zt(i)] : um(i)), w = g !== "none";
-      !h && w && P.push(...mm(i, p, g, N));
-      const k = [i, ...P], x = await l.detectOverflow(t, b), T = [];
-      let O = ((a = r.flip) == null ? void 0 : a.overflows) || [];
-      if (d && T.push(x[v]), u) {
+      const v = Ae(o), y = Ce(i), A = Ae(i) === i, N = await (l.isRTL == null ? void 0 : l.isRTL(c.floating)), x = h || (A || !p ? [Zt(i)] : um(i)), C = g !== "none";
+      !h && C && x.push(...mm(i, p, g, N));
+      const O = [i, ...x], P = await l.detectOverflow(t, b), T = [];
+      let k = ((a = r.flip) == null ? void 0 : a.overflows) || [];
+      if (d && T.push(P[v]), u) {
         const I = Jc(o, s, N);
-        T.push(x[I[0]], x[I[1]]);
+        T.push(P[I[0]], P[I[1]]);
       }
-      if (O = [...O, {
+      if (k = [...k, {
         placement: o,
         overflows: T
       }], !T.every((I) => I <= 0)) {
         var _, q;
-        const I = (((_ = r.flip) == null ? void 0 : _.index) || 0) + 1, F = k[I];
-        if (F && (!(u === "alignment" ? y !== Ce(F) : !1) || // We leave the current main axis only if every placement on that axis
+        const I = (((_ = r.flip) == null ? void 0 : _.index) || 0) + 1, B = O[I];
+        if (B && (!(u === "alignment" ? y !== Ce(B) : !1) || // We leave the current main axis only if every placement on that axis
         // overflows the main axis.
-        O.every((z) => Ce(z.placement) === y ? z.overflows[0] > 0 : !0)))
+        k.every((W) => Ce(W.placement) === y ? W.overflows[0] > 0 : !0)))
           return {
             data: {
               index: I,
-              overflows: O
+              overflows: k
             },
             reset: {
-              placement: F
+              placement: B
             }
           };
-        let V = (q = O.filter((W) => W.overflows[0] <= 0).sort((W, z) => W.overflows[1] - z.overflows[1])[0]) == null ? void 0 : q.placement;
-        if (!V)
+        let z = (q = k.filter((V) => V.overflows[0] <= 0).sort((V, W) => V.overflows[1] - W.overflows[1])[0]) == null ? void 0 : q.placement;
+        if (!z)
           switch (f) {
             case "bestFit": {
               var j;
-              const W = (j = O.filter((z) => {
-                if (w) {
-                  const Y = Ce(z.placement);
+              const V = (j = k.filter((W) => {
+                if (C) {
+                  const Y = Ce(W.placement);
                   return Y === y || // Create a bias to the `y` side axis due to horizontal
                   // reading directions favoring greater width.
                   Y === "y";
                 }
                 return !0;
-              }).map((z) => [z.placement, z.overflows.filter((Y) => Y > 0).reduce((Y, ae) => Y + ae, 0)]).sort((z, Y) => z[1] - Y[1])[0]) == null ? void 0 : j[0];
-              W && (V = W);
+              }).map((W) => [W.placement, W.overflows.filter((Y) => Y > 0).reduce((Y, ae) => Y + ae, 0)]).sort((W, Y) => W[1] - Y[1])[0]) == null ? void 0 : j[0];
+              V && (z = V);
               break;
             }
             case "initialPlacement":
-              V = i;
+              z = i;
               break;
           }
-        if (o !== V)
+        if (o !== z)
           return {
             reset: {
-              placement: V
+              placement: z
             }
           };
       }
@@ -3724,7 +3724,7 @@ const Am = function(e) {
     }
   };
 }, Nm = /* @__PURE__ */ new Set(["left", "top"]);
-async function xm(e, t) {
+async function Pm(e, t) {
   const {
     placement: n,
     platform: a,
@@ -3751,7 +3751,7 @@ async function xm(e, t) {
     y: f * d
   };
 }
-const Pm = function(e) {
+const xm = function(e) {
   return e === void 0 && (e = 0), {
     name: "offset",
     options: e,
@@ -3762,7 +3762,7 @@ const Pm = function(e) {
         y: r,
         placement: s,
         middlewareData: i
-      } = t, l = await xm(t, e);
+      } = t, l = await Pm(t, e);
       return s === ((n = i.offset) == null ? void 0 : n.placement) && (a = i.arrow) != null && a.alignmentOffset ? {} : {
         x: o + l.x,
         y: r + l.y,
@@ -3851,16 +3851,16 @@ const Pm = function(e) {
       } = r.floating;
       let b, v;
       u === "top" || u === "bottom" ? (b = u, v = h === (await (s.isRTL == null ? void 0 : s.isRTL(i.floating)) ? "start" : "end") ? "left" : "right") : (v = u, b = h === "end" ? "top" : "bottom");
-      const y = p - d.top - d.bottom, A = g - d.left - d.right, N = Be(p - d[b], y), P = Be(g - d[v], A), w = !t.middlewareData.shift;
-      let k = N, x = P;
-      if ((n = t.middlewareData.shift) != null && n.enabled.x && (x = A), (a = t.middlewareData.shift) != null && a.enabled.y && (k = y), w && !h) {
-        const O = le(d.left, 0), _ = le(d.right, 0), q = le(d.top, 0), j = le(d.bottom, 0);
-        f ? x = g - 2 * (O !== 0 || _ !== 0 ? O + _ : le(d.left, d.right)) : k = p - 2 * (q !== 0 || j !== 0 ? q + j : le(d.top, d.bottom));
+      const y = p - d.top - d.bottom, A = g - d.left - d.right, N = Be(p - d[b], y), x = Be(g - d[v], A), C = !t.middlewareData.shift;
+      let O = N, P = x;
+      if ((n = t.middlewareData.shift) != null && n.enabled.x && (P = A), (a = t.middlewareData.shift) != null && a.enabled.y && (O = y), C && !h) {
+        const k = le(d.left, 0), _ = le(d.right, 0), q = le(d.top, 0), j = le(d.bottom, 0);
+        f ? P = g - 2 * (k !== 0 || _ !== 0 ? k + _ : le(d.left, d.right)) : O = p - 2 * (q !== 0 || j !== 0 ? q + j : le(d.top, d.bottom));
       }
       await l({
         ...t,
-        availableWidth: x,
-        availableHeight: k
+        availableWidth: P,
+        availableHeight: O
       });
       const T = await s.getDimensions(i.floating);
       return g !== T.width || p !== T.height ? {
@@ -3894,7 +3894,7 @@ function pe(e) {
 function Se(e) {
   return fn() ? e instanceof HTMLElement || e instanceof ce(e).HTMLElement : !1;
 }
-function Pi(e) {
+function xi(e) {
   return !fn() || typeof ShadowRoot > "u" ? !1 : e instanceof ShadowRoot || e instanceof ce(e).ShadowRoot;
 }
 const Om = /* @__PURE__ */ new Set(["inline", "contents"]);
@@ -3963,10 +3963,10 @@ function Fe(e) {
     // Step into the shadow DOM of the parent of a slotted node.
     e.assignedSlot || // DOM Element detected.
     e.parentNode || // ShadowRoot detected.
-    Pi(e) && e.host || // Fallback.
+    xi(e) && e.host || // Fallback.
     Ne(e)
   );
-  return Pi(t) ? t.host : t;
+  return xi(t) ? t.host : t;
 }
 function eu(e) {
   const t = Fe(e);
@@ -4298,25 +4298,25 @@ function Zm(e, t) {
       threshold: le(0, Be(1, l)) || 1
     };
     let N = !0;
-    function P(w) {
-      const k = w[0].intersectionRatio;
-      if (k !== l) {
+    function x(C) {
+      const O = C[0].intersectionRatio;
+      if (O !== l) {
         if (!N)
           return s();
-        k ? s(!1, k) : a = setTimeout(() => {
+        O ? s(!1, O) : a = setTimeout(() => {
           s(!1, 1e-7);
         }, 1e3);
       }
-      k === 1 && !su(c, e.getBoundingClientRect()) && s(), N = !1;
+      O === 1 && !su(c, e.getBoundingClientRect()) && s(), N = !1;
     }
     try {
-      n = new IntersectionObserver(P, {
+      n = new IntersectionObserver(x, {
         ...A,
         // Handle <iframe>s
         root: o.ownerDocument
       });
     } catch {
-      n = new IntersectionObserver(P, A);
+      n = new IntersectionObserver(x, A);
     }
     n.observe(e);
   }
@@ -4358,7 +4358,7 @@ function iu(e, t, n, a) {
     }), u?.(), (v = f) == null || v.disconnect(), f = null, l && cancelAnimationFrame(g);
   };
 }
-const lu = Pm, Jm = Am, Qm = wm, ep = Sm, tp = Cm, np = bm, ap = (e, t, n) => {
+const lu = xm, Jm = Am, Qm = wm, ep = Sm, tp = Cm, np = bm, ap = (e, t, n) => {
   const a = /* @__PURE__ */ new Map(), o = {
     platform: Ym,
     ...n
@@ -4382,7 +4382,7 @@ function ki(e) {
   return e;
 }
 function vt(e) {
-  return typeof e == "function" ? e() : Pt(e);
+  return typeof e == "function" ? e() : xt(e);
 }
 function cu(e) {
   return typeof window > "u" ? 1 : (e.ownerDocument.defaultView || window).devicePixelRatio || 1;
@@ -4393,36 +4393,36 @@ function Ti(e, t) {
 }
 function uu(e, t, n) {
   n === void 0 && (n = {});
-  const a = n.whileElementsMounted, o = C(() => {
-    var k;
-    return (k = vt(n.open)) != null ? k : !0;
-  }), r = C(() => vt(n.middleware)), s = C(() => {
-    var k;
-    return (k = vt(n.placement)) != null ? k : "bottom";
-  }), i = C(() => {
-    var k;
-    return (k = vt(n.strategy)) != null ? k : "absolute";
-  }), l = C(() => {
-    var k;
-    return (k = vt(n.transform)) != null ? k : !0;
-  }), c = C(() => ki(e.value)), d = C(() => ki(t.value)), u = R(0), h = R(0), f = R(i.value), g = R(s.value), p = Re({}), b = R(!1), v = C(() => {
-    const k = {
+  const a = n.whileElementsMounted, o = w(() => {
+    var O;
+    return (O = vt(n.open)) != null ? O : !0;
+  }), r = w(() => vt(n.middleware)), s = w(() => {
+    var O;
+    return (O = vt(n.placement)) != null ? O : "bottom";
+  }), i = w(() => {
+    var O;
+    return (O = vt(n.strategy)) != null ? O : "absolute";
+  }), l = w(() => {
+    var O;
+    return (O = vt(n.transform)) != null ? O : !0;
+  }), c = w(() => ki(e.value)), d = w(() => ki(t.value)), u = R(0), h = R(0), f = R(i.value), g = R(s.value), p = Re({}), b = R(!1), v = w(() => {
+    const O = {
       position: f.value,
       left: "0",
       top: "0"
     };
     if (!d.value)
-      return k;
-    const x = Ti(d.value, u.value), T = Ti(d.value, h.value);
+      return O;
+    const P = Ti(d.value, u.value), T = Ti(d.value, h.value);
     return l.value ? {
-      ...k,
-      transform: "translate(" + x + "px, " + T + "px)",
+      ...O,
+      transform: "translate(" + P + "px, " + T + "px)",
       ...cu(d.value) >= 1.5 && {
         willChange: "transform"
       }
     } : {
       position: f.value,
-      left: x + "px",
+      left: P + "px",
       top: T + "px"
     };
   });
@@ -4430,19 +4430,19 @@ function uu(e, t, n) {
   function A() {
     if (c.value == null || d.value == null)
       return;
-    const k = o.value;
+    const O = o.value;
     ap(c.value, d.value, {
       middleware: r.value,
       placement: s.value,
       strategy: i.value
-    }).then((x) => {
-      u.value = x.x, h.value = x.y, f.value = x.strategy, g.value = x.placement, p.value = x.middlewareData, b.value = k !== !1;
+    }).then((P) => {
+      u.value = P.x, h.value = P.y, f.value = P.strategy, g.value = P.placement, p.value = P.middlewareData, b.value = O !== !1;
     });
   }
   function N() {
     typeof y == "function" && (y(), y = void 0);
   }
-  function P() {
+  function x() {
     if (N(), a === void 0) {
       A();
       return;
@@ -4452,14 +4452,14 @@ function uu(e, t, n) {
       return;
     }
   }
-  function w() {
+  function C() {
     o.value || (b.value = !1);
   }
   return X([r, s, i, o], A, {
     flush: "sync"
-  }), X([c, d], P, {
+  }), X([c, d], x, {
     flush: "sync"
-  }), X(o, w, {
+  }), X(o, C, {
     flush: "sync"
   }), rc() && mr(N), {
     x: nt(u),
@@ -4480,7 +4480,7 @@ const rp = 8, du = 1e4, qt = {
 }, sp = "Tooltip", fu = "lumx-tooltip", {
   block: ip,
   element: _i
-} = B(fu), Dr = (e) => {
+} = F(fu), Dr = (e) => {
   const {
     id: t,
     label: n,
@@ -4620,7 +4620,7 @@ function mp(e) {
 const gn = /* @__PURE__ */ E((e, {
   slots: t
 }) => {
-  const n = re(), a = M(() => e.class), o = R(null), r = R(null), s = C(() => e.placement || qt.placement), i = C(() => e.closeMode || qt.closeMode), l = C(() => e.ariaLinkMode || qt.ariaLinkMode), c = C(() => e.zIndex || qt.zIndex), {
+  const n = re(), a = M(() => e.class), o = R(null), r = R(null), s = w(() => e.placement || qt.placement), i = w(() => e.closeMode || qt.closeMode), l = w(() => e.ariaLinkMode || qt.ariaLinkMode), c = w(() => e.zIndex || qt.zIndex), {
     floatingStyles: d,
     placement: u
   } = uu(o, r, {
@@ -4631,13 +4631,13 @@ const gn = /* @__PURE__ */ E((e, {
     isOpen: h,
     onPopperMount: f,
     manager: g
-  } = dp(C(() => e.delay), o), p = C(() => (h.value || e.forceOpen) && !!e.label), b = C(() => !!e.label && (p.value || i.value === "hide")), v = C(() => !p.value && i.value === "hide");
-  return ln(C(() => p.value ? () => g.value?.close() : void 0)), xh(), () => {
+  } = dp(w(() => e.delay), o), p = w(() => (h.value || e.forceOpen) && !!e.label), b = w(() => !!e.label && (p.value || i.value === "hide")), v = w(() => !p.value && i.value === "hide");
+  return ln(w(() => p.value ? () => g.value?.close() : void 0)), Ph(), () => {
     let y;
     const A = u.value ?? s.value, N = hp({
       slotContent: t.default?.(),
-      setAnchorElement: (P) => {
-        o.value = P?.$el || P;
+      setAnchorElement: (x) => {
+        o.value = x?.$el || x;
       },
       isMounted: b.value,
       id: n,
@@ -4645,9 +4645,9 @@ const gn = /* @__PURE__ */ E((e, {
       ariaLinkMode: l.value
     });
     return m(ne, null, [N, b.value && m(tn, null, mp(y = Dr({
-      ref: (P) => {
-        const w = P?.$el || P;
-        r.value = w, f(w);
+      ref: (x) => {
+        const C = x?.$el || x;
+        r.value = C, f(C);
       },
       id: n,
       label: e.label,
@@ -4674,7 +4674,7 @@ const gn = /* @__PURE__ */ E((e, {
     isAnyDisabled: i,
     disabledStateProps: l,
     otherProps: c
-  } = te(C(() => ({
+  } = te(w(() => ({
     ...e,
     ...a
   }))), d = (f) => {
@@ -4746,7 +4746,7 @@ const yN = /* @__PURE__ */ E((e, {
 function bp(e) {
   je(pu, e);
 }
-function xe() {
+function Pe() {
   const e = qe(pu);
   if (!e)
     throw new Error("Combobox sub-components must be used within a Combobox");
@@ -4772,7 +4772,7 @@ function mt(e, t, n = { immediate: !0 }) {
   };
 }
 function ye(e, t) {
-  const { handle: n } = xe(), a = R(t);
+  const { handle: n } = Pe(), a = R(t);
   return mt(n, (o) => {
     if (o)
       return o.subscribe(e, (r) => {
@@ -4781,7 +4781,7 @@ function ye(e, t) {
   }), a;
 }
 function Br() {
-  const { handle: e } = xe();
+  const { handle: e } = Pe();
   return { isOpen: ye("open", !1), setIsOpen: (a) => e.value?.setIsOpen(a) };
 }
 const yp = /* @__PURE__ */ E((e, {
@@ -4792,7 +4792,7 @@ const yp = /* @__PURE__ */ E((e, {
     anchorRef: r,
     setHandle: s,
     handle: i
-  } = xe(), {
+  } = Pe(), {
     isOpen: l
   } = Br(), c = ye("optionsChange", {
     optionsLength: 0
@@ -4946,8 +4946,8 @@ function Np(e, t) {
   }), n.registerTrigger(e), n;
 }
 const gu = "lumx-text-field", vu = `${gu}__input-native`, {
-  block: xp
-} = B(vu), Pp = {
+  block: Pp
+} = F(vu), xp = {
   type: "text"
 }, wp = (e) => {
   const {
@@ -4958,7 +4958,7 @@ const gu = "lumx-text-field", vu = `${gu}__input-native`, {
     handleInput: r,
     handleFocus: s,
     handleBlur: i,
-    type: l = Pp.type,
+    type: l = xp.type,
     name: c,
     ref: d,
     ...u
@@ -4971,7 +4971,7 @@ const gu = "lumx-text-field", vu = `${gu}__input-native`, {
     name: c,
     type: l,
     ref: d,
-    className: L(t, xp({
+    className: L(t, Pp({
       [`theme-${n}`]: !!n,
       text: !0
     })),
@@ -5020,7 +5020,7 @@ const gu = "lumx-text-field", vu = `${gu}__input-native`, {
   emits: Cp
 }), {
   block: kp
-} = B(vu), bu = {
+} = F(vu), bu = {
   rows: 2
 }, Tp = (e) => {
   const {
@@ -5087,7 +5087,7 @@ const Ip = {
 }, Lp = /* @__PURE__ */ E((e, {
   emit: t
 }) => {
-  const n = D(), a = U(), o = M(() => e.class), r = R(null), s = _p(C(() => e.rows ?? bu.rows), r, C(() => e.value)), i = (u, h, f) => {
+  const n = D(), a = U(), o = M(() => e.class), r = R(null), s = _p(w(() => e.rows ?? bu.rows), r, w(() => e.value)), i = (u, h, f) => {
     f?.stopImmediatePropagation(), t("change", u, h, f);
   }, l = (u, h, f) => {
     t("input", u, h, f);
@@ -5119,7 +5119,7 @@ function Ep(e) {
 }
 const $p = "InputLabel", Mp = "lumx-input-label", yu = Mp, {
   block: Rp
-} = B(yu), Dp = {};
+} = F(yu), Dp = {};
 function Ve(e) {
   const {
     children: t,
@@ -5154,7 +5154,7 @@ const Bp = {
   [ie.warning]: { color: "yellow" }
 }, Fp = "InputHelper", qp = "lumx-input-helper", Au = qp, {
   block: jp
-} = B(Au), Su = {
+} = F(Au), Su = {
   kind: ie.info
 };
 function Oe(e) {
@@ -5183,7 +5183,7 @@ Oe.defaultProps = Su;
 const {
   block: Hp,
   element: ue
-} = B(gu);
+} = F(gu);
 function zp(e, t, n, a, o) {
   const r = e ? `text-field-helper-${n}` : void 0, s = t ? `text-field-error-${n}` : void 0, i = o ? `text-field-label-${n}` : void 0, l = [s, r, a].filter(Boolean), c = l.length === 0 ? void 0 : l.join(" ");
   return {
@@ -5213,87 +5213,89 @@ const Vp = (e) => {
     multiline: b,
     placeholder: v,
     textFieldRef: y,
-    helperId: A,
-    errorId: N,
-    labelId: P,
-    theme: w,
-    value: k,
-    afterElement: x,
-    input: T,
-    isFocus: O,
-    IconButton: _,
-    ref: q
-  } = e, j = (k || "").length, I = j > 0;
+    charCounterMessage: A,
+    helperId: N,
+    errorId: x,
+    labelId: C,
+    theme: O,
+    value: P,
+    afterElement: T,
+    input: k,
+    isFocus: _,
+    IconButton: q,
+    ref: j
+  } = e, I = (P || "").length, B = I > 0, z = p ? p - I : 0, V = p ? m("span", {
+    className: ue("char-counter"),
+    role: "status"
+  }, [A ? A(z) : z, z === 0 && ee({
+    icon: wt,
+    size: H.xxs
+  })]) : void 0;
   return m("div", {
-    ref: q,
+    ref: j,
     className: L(n, Hp({
       "has-chips": !!t,
       "has-error": !u && s,
       "has-icon": !!l,
       "has-input": !b,
-      "has-input-clear": !!(a && I),
+      "has-input-clear": !!(a && B),
       "has-label": !!h,
       "has-placeholder": !!v,
       "has-textarea": b,
-      "has-value": !!k,
+      "has-value": !!P,
       "is-disabled": g,
-      "is-focus": O || r,
+      "is-focus": _ || r,
       "is-valid": u,
-      [`theme-${w}`]: !!w
+      [`theme-${O}`]: !!O
     }))
   }, [(h || p) && m("div", {
     className: ue("header")
-  }, [h && Ve({
+  }, [Ve({
     ...f,
-    id: P,
+    id: C,
     htmlFor: c,
     className: ue("label"),
     isRequired: d,
-    theme: w,
-    children: h
-  }), p && m("div", {
-    className: ue("char-counter")
-  }, [m("span", null, [p - j]), p - j === 0 && ee({
-    icon: wt,
-    size: H.xxs
-  })])]), m("div", {
+    theme: O,
+    children: [h, V]
+  })]), m("div", {
     className: ue("wrapper"),
     ref: y
   }, [l && ee({
     className: ue("input-icon"),
-    color: w === he.dark ? "light" : void 0,
+    color: O === he.dark ? "light" : void 0,
     icon: l,
     size: H.xs
   }), t ? m("div", {
     className: ue("chips")
-  }, [t, T]) : m("div", {
+  }, [t, k]) : m("div", {
     className: ue("input-wrapper")
-  }, [T]), (u || s) && ee({
+  }, [k]), (u || s) && ee({
     className: ue("input-validity"),
-    color: w === he.dark ? "light" : void 0,
+    color: O === he.dark ? "light" : void 0,
     icon: u ? br : wt,
     size: H.xxs
-  }), a && I && !g && m(_, S({
-    "aria-describedby": P
+  }), a && B && !g && m(q, S({
+    "aria-describedby": C
   }, a, {
     className: ue("input-clear"),
     icon: Nd,
     emphasis: ve.low,
     size: H.s,
-    theme: w,
+    theme: O,
     type: "button"
-  }), null), x && m("div", {
+  }), null), T && m("div", {
     className: ue("after-element")
-  }, [x])]), s && o && Oe({
+  }, [T])]), s && o && Oe({
     children: o,
     className: ue("helper"),
     kind: ie.error,
-    theme: w,
-    id: N
+    theme: O,
+    id: x
   }), i && Oe({
     className: ue("helper"),
-    theme: w,
-    id: A,
+    theme: O,
+    id: N,
     children: i
   })]);
 }, Wp = {
@@ -5310,10 +5312,10 @@ const Vp = (e) => {
 }, Up = /* @__PURE__ */ E((e, {
   emit: t
 }) => {
-  const n = D(), a = Wc("chips"), o = U(), r = M(() => e.class), s = re(), i = C(() => e.id || s), l = R(!1), {
+  const n = D(), a = Wc("chips"), o = U(), r = M(() => e.class), s = re(), i = w(() => e.id || s), l = R(!1), {
     isAnyDisabled: c,
     disabledStateProps: d
-  } = te(C(() => ({
+  } = te(w(() => ({
     ...e,
     ...n
   }))), u = R(null);
@@ -5323,7 +5325,7 @@ const Vp = (e) => {
   }, {
     flush: "sync"
   });
-  const h = C(() => zp(e.helper, e.error, s, n["aria-describedby"] || void 0, e.label)), f = (y, A, N) => {
+  const h = w(() => zp(e.helper, e.error, s, n["aria-describedby"] || void 0, e.label)), f = (y, A, N) => {
     t("change", y, A, N);
   }, g = (y, A, N) => {
     t("input", y, A, N);
@@ -5338,21 +5340,21 @@ const Vp = (e) => {
     const y = e.theme || o.value, {
       helperId: A,
       errorId: N,
-      describedById: P,
-      labelId: w
+      describedById: x,
+      labelId: C
     } = h.value, {
-      class: k,
-      className: x,
+      class: O,
+      className: P,
       "aria-describedby": T,
-      disabled: O,
+      disabled: k,
       isDisabled: _,
       "aria-disabled": q,
       ariaDisabled: j,
       onChange: I,
-      onInput: F,
-      onFocus: V,
-      onBlur: W,
-      chips: z,
+      onInput: B,
+      onFocus: z,
+      onBlur: V,
+      chips: W,
       ...Y
     } = n, ae = {
       ...Y,
@@ -5362,7 +5364,7 @@ const Vp = (e) => {
       placeholder: e.placeholder,
       theme: y,
       "aria-invalid": e.hasError || void 0,
-      "aria-describedby": P,
+      "aria-describedby": x,
       ...d.value,
       readOnly: !!Y.readOnly || !!d.value["aria-disabled"],
       onChange: f,
@@ -5379,7 +5381,7 @@ const Vp = (e) => {
       type: e.type || "text"
     }), null);
     return m(Vp, {
-      chips: (a() ?? z) || void 0,
+      chips: (a() ?? W) || void 0,
       error: e.error,
       forceFocusStyle: e.forceFocusStyle,
       hasError: e.hasError,
@@ -5391,6 +5393,7 @@ const Vp = (e) => {
       label: e.label,
       labelProps: e.labelProps,
       maxLength: e.maxLength,
+      charCounterMessage: e.charCounterMessage,
       multiline: e.multiline,
       placeholder: e.placeholder,
       value: e.value,
@@ -5399,7 +5402,7 @@ const Vp = (e) => {
       id: i.value,
       isAnyDisabled: c.value,
       helperId: A,
-      labelId: w,
+      labelId: C,
       errorId: N,
       isFocus: l.value,
       input: Z,
@@ -5414,7 +5417,7 @@ const Vp = (e) => {
 }, {
   name: "LumxTextField",
   inheritAttrs: !1,
-  props: $()("class", "theme", "value", "error", "forceFocusStyle", "hasError", "afterElement", "helper", "icon", "isRequired", "isValid", "label", "labelProps", "maxLength", "isDisabled", "disabled", "multiline", "placeholder", "aria-disabled", "id", "clearButtonProps", "name", "type", "minimumRows", "inputRef", "textFieldRef"),
+  props: $()("class", "theme", "value", "error", "forceFocusStyle", "hasError", "afterElement", "helper", "icon", "isRequired", "isValid", "label", "labelProps", "maxLength", "charCounterMessage", "isDisabled", "disabled", "multiline", "placeholder", "aria-disabled", "id", "clearButtonProps", "name", "type", "minimumRows", "inputRef", "textFieldRef"),
   emits: Wp
 }), Gp = /* @__PURE__ */ E((e, {
   emit: t,
@@ -5425,7 +5428,7 @@ const Vp = (e) => {
     anchorRef: r,
     setHandle: s,
     handle: i
-  } = xe(), {
+  } = Pe(), {
     isOpen: l,
     setIsOpen: c
   } = Br(), d = R(null);
@@ -5459,29 +5462,29 @@ const Vp = (e) => {
       selectionMode: y,
       class: A,
       ...N
-    } = e, P = {
-      onChange: (x, T, O) => t("change", x, T, O),
-      onInput: (x) => t("change", x),
-      onFocus: (x) => t("focus", x),
-      onBlur: (x) => t("blur", x),
-      onClear: (x) => t("clear", x)
+    } = e, x = {
+      onChange: (P, T, k) => t("change", P, T, k),
+      onInput: (P) => t("change", P),
+      onFocus: (P) => t("focus", P),
+      onBlur: (P) => t("blur", P),
+      onClear: (P) => t("clear", P)
     }, {
-      ariaDisabled: w,
-      ...k
+      ariaDisabled: C,
+      ...O
     } = N;
     return Sp({
       ...n,
-      ...k,
-      "aria-disabled": w ?? n.ariaDisabled,
-      ...P,
+      ...O,
+      "aria-disabled": C ?? n.ariaDisabled,
+      ...x,
       listboxId: o,
       isOpen: l.value && (!!u.value?.optionsLength || h.value),
       filter: b,
-      textFieldRef: (x) => {
-        r.value = x, e.textFieldRef?.(x);
+      textFieldRef: (P) => {
+        r.value = P, e.textFieldRef?.(P);
       },
-      inputRef: (x) => {
-        d.value = x, e.inputRef?.(x);
+      inputRef: (P) => {
+        d.value = P, e.inputRef?.(P);
       },
       toggleButtonProps: g,
       handleToggle: f,
@@ -5494,7 +5497,7 @@ const Vp = (e) => {
 }, {
   name: "LumxComboboxInput",
   inheritAttrs: !1,
-  props: $()("class", "theme", "value", "error", "forceFocusStyle", "hasError", "afterElement", "helper", "icon", "isRequired", "isValid", "label", "labelProps", "maxLength", "isDisabled", "disabled", "aria-disabled", "multiline", "placeholder", "id", "clearButtonProps", "name", "type", "minimumRows", "inputRef", "textFieldRef", "toggleButtonProps", "onSelect", "filter", "openOnFocus", "selectionMode"),
+  props: $()("class", "theme", "value", "error", "forceFocusStyle", "hasError", "afterElement", "helper", "icon", "isRequired", "isValid", "label", "labelProps", "maxLength", "charCounterMessage", "isDisabled", "disabled", "aria-disabled", "multiline", "placeholder", "id", "clearButtonProps", "name", "type", "minimumRows", "inputRef", "textFieldRef", "toggleButtonProps", "onSelect", "filter", "openOnFocus", "selectionMode"),
   emits: {
     select: (e) => !!e,
     // eslint-disable-next-line @typescript-eslint/no-unused-vars
@@ -5508,7 +5511,7 @@ const Vp = (e) => {
   }
 }), Kp = "List", Nu = "lumx-list", {
   block: Xp
-} = B(Nu), Yp = {}, pt = (e) => {
+} = F(Nu), Yp = {}, pt = (e) => {
   const {
     children: t,
     className: n,
@@ -5548,12 +5551,12 @@ const Zp = "lumx-combobox-list", Jp = (e) => {
     "aria-busy": n || void 0,
     children: a
   });
-}, xu = /* @__PURE__ */ Symbol("combobox-list-context"), Qp = { type: "listbox" };
+}, Pu = /* @__PURE__ */ Symbol("combobox-list-context"), Qp = { type: "listbox" };
 function eg(e) {
-  je(xu, e);
+  je(Pu, e);
 }
 function tg() {
-  return qe(xu, Qp);
+  return qe(Pu, Qp);
 }
 const ng = /* @__PURE__ */ E((e, {
   slots: t
@@ -5561,7 +5564,7 @@ const ng = /* @__PURE__ */ E((e, {
   const n = D(), a = M(() => e.class), {
     listboxId: o,
     handle: r
-  } = xe(), s = R(null);
+  } = Pe(), s = R(null);
   eg({
     type: e.type || "listbox"
   }), mt([r, s], ([d, u]) => {
@@ -5593,10 +5596,10 @@ const ng = /* @__PURE__ */ E((e, {
   // hyphenated prop names to camelCase (ariaLabel) internally, making it inaccessible
   // via props['aria-label']. Instead, we read it from attrs where Vue keeps the original name.
   props: $()("type", "class")
-}), ag = "ListItem", Pu = "lumx-list-item", {
+}), ag = "ListItem", xu = "lumx-list-item", {
   block: og,
   element: jt
-} = B(Pu), wu = {
+} = F(xu), wu = {
   size: H.regular
 }, tt = (e) => {
   const {
@@ -5644,7 +5647,7 @@ const ng = /* @__PURE__ */ E((e, {
   })]);
 };
 tt.displayName = ag;
-tt.className = Pu;
+tt.className = xu;
 tt.defaultProps = wu;
 const Fr = (e) => {
   const {
@@ -5671,7 +5674,7 @@ function rg(e) {
 const sg = "lumx-combobox-option", {
   block: ig,
   element: Ii
-} = B(sg), lg = (e, {
+} = F(sg), lg = (e, {
   Tooltip: t
 } = {}) => {
   const {
@@ -5695,7 +5698,7 @@ const sg = "lumx-combobox-option", {
   } = e;
   let A, N;
   l || (A = u ? "gridcell" : "option", N = u ? "row" : "none");
-  const P = Fr({
+  const x = Fr({
     as: "button",
     ...g,
     id: c,
@@ -5707,9 +5710,9 @@ const sg = "lumx-combobox-option", {
     "aria-disabled": d ? "true" : void 0,
     role: A,
     children: o
-  }), w = t && b && !l ? m(t, b, rg(P) ? P : {
-    default: () => [P]
-  }) : P;
+  }), C = t && b && !l ? m(t, b, rg(x) ? x : {
+    default: () => [x]
+  }) : x;
   return tt({
     ref: p,
     size: "tiny",
@@ -5719,7 +5722,7 @@ const sg = "lumx-combobox-option", {
     before: n,
     after: a,
     role: N,
-    children: m(ne, null, [w, s && m("p", S({
+    children: m(ne, null, [C, s && m("p", S({
       id: i
     }, zc({
       className: Ii("description"),
@@ -5747,7 +5750,7 @@ const dg = {
     type: r
   } = tg(), {
     handle: s
-  } = xe(), i = r === "grid", l = re(), c = re(), d = R(null), u = R(!1);
+  } = Pe(), i = r === "grid", l = re(), c = re(), d = R(null), u = R(!1);
   cg({
     optionId: l
   }), mt([s, d], ([p, b]) => {
@@ -5851,7 +5854,7 @@ function pg(e) {
 const gg = "lumx-combobox-option-more-info", {
   block: vg,
   element: bg
-} = B(gg), yg = (e, {
+} = F(gg), yg = (e, {
   IconButton: t,
   Popover: n
 }) => {
@@ -5867,7 +5870,7 @@ const gg = "lumx-combobox-option-more-info", {
   } = e;
   return m(ne, null, [m(t, S({
     ref: i,
-    icon: xd,
+    icon: Pd,
     size: "s"
   }, d, {
     className: vg([o, d?.className]),
@@ -5908,13 +5911,13 @@ const gg = "lumx-combobox-option-more-info", {
 }, Sg = {
   MIN_WIDTH: "minWidth"
 }, qa = 14, Ng = 9999;
-function xg(e) {
+function Pg(e) {
   return typeof e == "function" || Object.prototype.toString.call(e) === "[object Object]" && !K(e);
 }
-const Pg = "lumx-popover", {
+const xg = "lumx-popover", {
   block: wg,
   element: Cg
-} = B(Pg), Wt = {
+} = F(xg), Wt = {
   closeMode: "unmount",
   elevation: 3,
   placement: Ag.AUTO,
@@ -5944,31 +5947,31 @@ const Pg = "lumx-popover", {
     clickAwayRefs: A,
     unmountSentinel: N,
     // Forwarded props
-    ...P
-  } = e, w = !d && i === "hide", k = d || i === "hide", x = o, T = Math.min(l || 0, 5);
-  return k ? m(t, {
+    ...x
+  } = e, C = !d && i === "hide", O = d || i === "hide", P = o, T = Math.min(l || 0, 5);
+  return O ? m(t, {
     enabled: v
   }, {
-    default: () => [m(x, S(P, {
+    default: () => [m(P, S(x, {
       ref: p,
       className: L(s, wg({
         [`theme-${g}`]: !!g,
         [`elevation-${T}`]: !!T,
         [`position-${u}`]: !!u,
-        "is-hidden": !!w
+        "is-hidden": !!C
       })),
-      hidden: w || void 0,
-      style: w ? void 0 : h,
+      hidden: C || void 0,
+      style: C ? void 0 : h,
       "data-popper-placement": u
     }), {
       default: () => [N, m(n, {
-        callback: !w && y,
+        callback: !C && y,
         childrenRefs: A
       }, {
         default: () => [c && m("div", {
           ref: b,
           className: Cg("arrow"),
-          style: w ? void 0 : f
+          style: C ? void 0 : f
         }, [m("svg", {
           viewBox: "0 0 14 14",
           "aria-hidden": !0
@@ -5976,7 +5979,7 @@ const Pg = "lumx-popover", {
           d: "M8 3.49C7.62 2.82 6.66 2.82 6.27 3.48L.04 14 14.04 14 8 3.49Z"
         }, null)])]), m(a, {
           value: g
-        }, xg(r) ? r : {
+        }, Pg(r) ? r : {
           default: () => [r]
         })]
       })]
@@ -6012,17 +6015,17 @@ function Ig(e) {
     boundary: u,
     parsedPlacement: h,
     arrowElement: f
-  } = e, g = ot(r), p = ot(s), b = ot(i), v = ot(l), y = ot(c), A = ot(d), N = [], P = (t?.away ?? 0) + (n ? qa : 0), w = t?.along ?? 0;
-  return N.push(lu({ mainAxis: P, crossAxis: w })), h.isAuto ? N.push(
+  } = e, g = ot(r), p = ot(s), b = ot(i), v = ot(l), y = ot(c), A = ot(d), N = [], x = (t?.away ?? 0) + (n ? qa : 0), C = t?.along ?? 0;
+  return N.push(lu({ mainAxis: x, crossAxis: C })), h.isAuto ? N.push(
     Jm({ ...u ? { boundary: u } : {}, alignment: h.autoAlignment })
   ) : (N.push(ep(u ? { boundary: u } : {})), N.push(Qm(u ? { boundary: u } : {}))), (a || o || g || p || b || v || y || A) && N.push(
     tp({
       ...u ? { boundary: u } : {},
-      apply({ availableHeight: x, rects: T, elements: O }) {
+      apply({ availableHeight: P, rects: T, elements: k }) {
         const _ = `${T.reference.width}px`;
-        O.floating.style.width = g || (a === "width" ? _ : ""), O.floating.style.minWidth = _g(p, a === "minWidth" ? _ : ""), O.floating.style.maxWidth = Li(b, a === "maxWidth" ? _ : ""), O.floating.style.height = v || "", O.floating.style.minHeight = y || "";
-        const q = `${Math.max(0, x - qa)}px`;
-        O.floating.style.maxHeight = Li(
+        k.floating.style.width = g || (a === "width" ? _ : ""), k.floating.style.minWidth = _g(p, a === "minWidth" ? _ : ""), k.floating.style.maxWidth = Li(b, a === "maxWidth" ? _ : ""), k.floating.style.height = v || "", k.floating.style.minHeight = y || "";
+        const q = `${Math.max(0, P - qa)}px`;
+        k.floating.style.maxHeight = Li(
           A,
           o ? q : ""
         );
@@ -6041,7 +6044,7 @@ function Eg(e) {
   return e.isAuto ? void 0 : e.floatingPlacement;
 }
 function $g(e) {
-  const t = R(), n = R(), a = C(() => kg(e.placement?.value)), o = C(() => Tg(e.fitToAnchorWidth?.value)), r = C(
+  const t = R(), n = R(), a = w(() => kg(e.placement?.value)), o = w(() => Tg(e.fitToAnchorWidth?.value)), r = w(
     () => Ig({
       offset: e.offset?.value,
       hasArrow: e.hasArrow?.value,
@@ -6057,7 +6060,7 @@ function $g(e) {
       parsedPlacement: a.value,
       arrowElement: n.value
     })
-  ), s = C(() => Eg(a.value)), {
+  ), s = w(() => Eg(a.value)), {
     floatingStyles: i,
     placement: l,
     isPositioned: c,
@@ -6066,9 +6069,9 @@ function $g(e) {
     placement: s,
     whileElementsMounted: iu,
     middleware: r
-  }), u = C(
+  }), u = w(
     () => l.value ?? e.placement?.value
-  ), h = C(() => Lg(d.value?.arrow)), f = C(() => ({
+  ), h = w(() => Lg(d.value?.arrow)), f = w(() => ({
     ...e.style?.value || {},
     ...i.value,
     zIndex: e.zIndex?.value
@@ -6095,7 +6098,7 @@ const Rg = {
   slots: n,
   attrs: a
 }) => {
-  const o = M(() => e.class), r = C(() => Pt(e.anchorRef)), s = Q(e, "focusElement"), {
+  const o = M(() => e.class), r = w(() => xt(e.anchorRef)), s = Q(e, "focusElement"), {
     styles: i,
     isPositioned: l,
     position: c,
@@ -6103,7 +6106,7 @@ const Rg = {
     arrowRef: u
   } = $g({
     anchorRef: r,
-    boundaryRef: C(() => Pt(e.boundaryRef)),
+    boundaryRef: w(() => xt(e.boundaryRef)),
     offset: Q(e, "offset"),
     hasArrow: Q(e, "hasArrow"),
     fitToAnchorWidth: Q(e, "fitToAnchorWidth"),
@@ -6114,21 +6117,21 @@ const Rg = {
     height: Q(e, "height"),
     minHeight: Q(e, "minHeight"),
     maxHeight: Q(e, "maxHeight"),
-    placement: C(() => e.placement || Wt.placement),
-    style: C(() => {
+    placement: w(() => e.placement || Wt.placement),
+    style: w(() => {
     }),
-    zIndex: C(() => e.zIndex ?? Ng)
+    zIndex: w(() => e.zIndex ?? Ng)
   });
-  Or(C(() => e.focusAnchorOnClose ?? !0), r, C(() => e.parentElement), d, C(() => !!e.isOpen));
+  Or(w(() => e.focusAnchorOnClose ?? !0), r, w(() => e.parentElement), d, w(() => !!e.isOpen));
   const h = () => {
     t("close");
   };
-  ln(C(() => h), C(() => !!(e.isOpen && e.closeOnEscape)));
-  const f = C(() => !e.withFocusTrap && !!e.isOpen && l.value);
+  ln(w(() => h), w(() => !!(e.isOpen && e.closeOnEscape)));
+  const f = w(() => !e.withFocusTrap && !!e.isOpen && l.value);
   Mg(s, f);
-  const g = C(() => !e.withFocusTrap || !e.isOpen ? !1 : e.focusTrapZoneElement || d.value || !1);
+  const g = w(() => !e.withFocusTrap || !e.isOpen ? !1 : e.focusTrapZoneElement || d.value || !1);
   Cr(g, s);
-  const p = C(() => [d, r]);
+  const p = w(() => [d, r]);
   return () => Og({
     ...a,
     as: e.as,
@@ -6164,7 +6167,7 @@ function Dg(e) {
 const ku = /* @__PURE__ */ E((e, {
   slots: t
 }) => {
-  const n = M(() => e.class), a = R(null), o = C(() => a.value?.$el ?? void 0), r = R(!1), {
+  const n = M(() => e.class), a = R(null), o = w(() => a.value?.$el ?? void 0), r = R(!1), {
     optionId: s
   } = ug(), i = ye("activeDescendantChange", null), l = `${s}-more-info`;
   function c(u) {
@@ -6229,7 +6232,7 @@ const ku = /* @__PURE__ */ E((e, {
 }), Bg = "lumx-skeleton-typography", {
   block: Fg,
   element: qg
-} = B(Bg), ir = (e) => {
+} = F(Bg), ir = (e) => {
   const {
     className: t,
     theme: n,
@@ -6287,7 +6290,7 @@ const ku = /* @__PURE__ */ E((e, {
 }) => {
   const a = M(() => e.class), {
     handle: o
-  } = xe();
+  } = Pe();
   return mt(o, (r) => r?.registerSkeleton()), () => {
     const r = n.before, s = n.after, i = t.default?.();
     return Hg({
@@ -6310,7 +6313,7 @@ function Vg(e) {
 const Wg = "lumx-combobox-popover", {
   block: Ug,
   element: Gg
-} = B(Wg), Kg = (e, {
+} = F(Wg), Kg = (e, {
   Popover: t,
   FlexBox: n
 }) => {
@@ -6363,7 +6366,7 @@ function Xg() {
 var Yg = Xg();
 const qr = /* @__PURE__ */ Te(Yg), Zg = "lumx-flex-box", {
   block: Jg
-} = B(Zg);
+} = F(Zg);
 function Qg(e) {
   const {
     className: t,
@@ -6417,10 +6420,10 @@ const yn = /* @__PURE__ */ E((e, {
 }) => {
   const n = M(() => e.class), {
     anchorRef: a
-  } = xe(), {
+  } = Pe(), {
     isOpen: o,
     setIsOpen: r
-  } = Br(), s = C(() => a.value ?? void 0);
+  } = Br(), s = w(() => a.value ?? void 0);
   return () => {
     const {
       class: i,
@@ -6541,7 +6544,7 @@ const Iu = /* @__PURE__ */ E((e) => {
     isAnyDisabled: r,
     disabledStateProps: s,
     otherProps: i
-  } = te(C(() => ({
+  } = te(w(() => ({
     ...e,
     ...a
   }))), l = (c) => {
@@ -6575,7 +6578,7 @@ const Iu = /* @__PURE__ */ E((e) => {
     isAnyDisabled: s,
     disabledStateProps: i,
     otherProps: l
-  } = te(C(() => ({
+  } = te(w(() => ({
     ...e,
     ...a
   }))), c = (d) => {
@@ -6607,7 +6610,7 @@ const Iu = /* @__PURE__ */ E((e) => {
 }), dv = "ListSection", Lu = "lumx-list-section", {
   block: fv,
   element: $i
-} = B(Lu), hv = {}, Sn = (e) => {
+} = F(Lu), hv = {}, Sn = (e) => {
   const {
     children: t,
     className: n,
@@ -6659,7 +6662,7 @@ const mv = /* @__PURE__ */ E((e, {
 }) => {
   const n = M(() => e.class), {
     handle: a
-  } = xe(), o = R(null), r = ic({
+  } = Pe(), o = R(null), r = ic({
     hidden: !1,
     "aria-hidden": !1
   });
@@ -6698,7 +6701,7 @@ function bt(e) {
 }
 const pv = "lumx-combobox-state", {
   block: gv
-} = B(pv), vv = (e, {
+} = F(pv), vv = (e, {
   GenericBlock: t,
   Text: n
 }) => {
@@ -6771,7 +6774,7 @@ function Ha(e) {
 const Av = "lumx-generic-block", {
   block: Sv,
   element: za
-} = B(Av), Mi = {
+} = F(Av), Mi = {
   gap: H.big,
   orientation: ct.horizontal
 }, Nv = (e) => {
@@ -6813,7 +6816,7 @@ const Av = "lumx-generic-block", {
       default: () => [r]
     })]
   });
-}, xv = /* @__PURE__ */ E((e, {
+}, Pv = /* @__PURE__ */ E((e, {
   slots: t
 }) => {
   const n = D(), a = M(() => e.class);
@@ -6861,7 +6864,7 @@ function Nn() {
   return Va = a, Va;
 }
 var Wa, Di;
-function Pv() {
+function xv() {
   if (Di) return Wa;
   Di = 1;
   var e = Je(), t = Nn(), n = /\.|\[(?:[^[\]]*|(["'])(?:(?!\1)[^\\]|\\.)*?\1)\]/, a = /^\w*$/;
@@ -6874,7 +6877,7 @@ function Pv() {
   return Wa = o, Wa;
 }
 var Ua, Bi;
-function xn() {
+function Pn() {
   if (Bi) return Ua;
   Bi = 1;
   var e = Ze(), t = e(Object, "create");
@@ -6884,7 +6887,7 @@ var Ga, Fi;
 function wv() {
   if (Fi) return Ga;
   Fi = 1;
-  var e = xn();
+  var e = Pn();
   function t() {
     this.__data__ = e ? e(null) : {}, this.size = 0;
   }
@@ -6904,7 +6907,7 @@ var Xa, ji;
 function Ov() {
   if (ji) return Xa;
   ji = 1;
-  var e = xn(), t = "__lodash_hash_undefined__", n = Object.prototype, a = n.hasOwnProperty;
+  var e = Pn(), t = "__lodash_hash_undefined__", n = Object.prototype, a = n.hasOwnProperty;
   function o(r) {
     var s = this.__data__;
     if (e) {
@@ -6919,7 +6922,7 @@ var Ya, Hi;
 function kv() {
   if (Hi) return Ya;
   Hi = 1;
-  var e = xn(), t = Object.prototype, n = t.hasOwnProperty;
+  var e = Pn(), t = Object.prototype, n = t.hasOwnProperty;
   function a(o) {
     var r = this.__data__;
     return e ? r[o] !== void 0 : n.call(r, o);
@@ -6930,7 +6933,7 @@ var Za, zi;
 function Tv() {
   if (zi) return Za;
   zi = 1;
-  var e = xn(), t = "__lodash_hash_undefined__";
+  var e = Pn(), t = "__lodash_hash_undefined__";
   function n(a, o) {
     var r = this.__data__;
     return this.size += this.has(a) ? 0 : 1, r[a] = e && o === void 0 ? t : o, this;
@@ -6970,7 +6973,7 @@ function $u() {
   return eo = e, eo;
 }
 var to, Gi;
-function Pn() {
+function xn() {
   if (Gi) return to;
   Gi = 1;
   var e = $u();
@@ -6986,7 +6989,7 @@ var no, Ki;
 function Lv() {
   if (Ki) return no;
   Ki = 1;
-  var e = Pn(), t = Array.prototype, n = t.splice;
+  var e = xn(), t = Array.prototype, n = t.splice;
   function a(o) {
     var r = this.__data__, s = e(r, o);
     if (s < 0)
@@ -7000,7 +7003,7 @@ var ao, Xi;
 function Ev() {
   if (Xi) return ao;
   Xi = 1;
-  var e = Pn();
+  var e = xn();
   function t(n) {
     var a = this.__data__, o = e(a, n);
     return o < 0 ? void 0 : a[o][1];
@@ -7011,7 +7014,7 @@ var oo, Yi;
 function $v() {
   if (Yi) return oo;
   Yi = 1;
-  var e = Pn();
+  var e = xn();
   function t(n) {
     return e(this.__data__, n) > -1;
   }
@@ -7021,7 +7024,7 @@ var ro, Zi;
 function Mv() {
   if (Zi) return ro;
   Zi = 1;
-  var e = Pn();
+  var e = xn();
   function t(n, a) {
     var o = this.__data__, r = e(o, n);
     return r < 0 ? (++this.size, o.push([n, a])) : o[r][1] = a, this;
@@ -7208,7 +7211,7 @@ var So, fl;
 function Cn() {
   if (fl) return So;
   fl = 1;
-  var e = Je(), t = Pv(), n = Uv(), a = Kv();
+  var e = Je(), t = xv(), n = Uv(), a = Kv();
   function o(r, s) {
     return e(r) ? r : t(r, s) ? [r] : n(a(r));
   }
@@ -7227,9 +7230,9 @@ function jr() {
   }
   return No = t, No;
 }
-var xo, ml;
+var Po, ml;
 function Xv() {
-  if (ml) return xo;
+  if (ml) return Po;
   ml = 1;
   var e = Cn(), t = jr();
   function n(a, o) {
@@ -7238,11 +7241,11 @@ function Xv() {
       a = a[t(o[r++])];
     return r && r == s ? a : void 0;
   }
-  return xo = n, xo;
+  return Po = n, Po;
 }
-var Po, pl;
+var xo, pl;
 function Yv() {
-  if (pl) return Po;
+  if (pl) return xo;
   pl = 1;
   var e = _c();
   function t(n, a, o) {
@@ -7253,7 +7256,7 @@ function Yv() {
       writable: !0
     }) : n[a] = o;
   }
-  return Po = t, Po;
+  return xo = t, xo;
 }
 var wo, gl;
 function Zv() {
@@ -7350,10 +7353,10 @@ function tb() {
   }
   return Io = n, Io;
 }
-var Lo, xl;
+var Lo, Pl;
 function nb() {
-  if (xl) return Lo;
-  xl = 1;
+  if (Pl) return Lo;
+  Pl = 1;
   var e = Jv(), t = tb();
   function n(a, o) {
     return e(a, o, function(r, s) {
@@ -7362,10 +7365,10 @@ function nb() {
   }
   return Lo = n, Lo;
 }
-var Eo, Pl;
+var Eo, xl;
 function ab() {
-  if (Pl) return Eo;
-  Pl = 1;
+  if (xl) return Eo;
+  xl = 1;
   function e(t, n) {
     for (var a = -1, o = n.length, r = t.length; ++a < o; )
       t[r + a] = n[a];
@@ -7432,7 +7435,7 @@ var cb = lb();
 const ub = /* @__PURE__ */ Te(cb), NN = ub(H, ["tiny", "regular", "medium", "big", "huge"]), db = /* @__PURE__ */ E((e) => {
   const {
     handle: t
-  } = xe(), n = ye("optionsChange", void 0), a = R(!1), o = R(!1), r = R(!1);
+  } = Pe(), n = ye("optionsChange", void 0), a = R(!1), o = R(!1), r = R(!1);
   return mt(t, (s) => {
     if (s)
       return yv(s, {
@@ -7460,7 +7463,7 @@ const ub = /* @__PURE__ */ Te(cb), NN = ub(H, ["tiny", "regular", "medium", "big
       loadingMessage: i,
       state: s
     }, {
-      GenericBlock: xv,
+      GenericBlock: Pv,
       Text: me
     });
   };
@@ -7495,7 +7498,7 @@ const ub = /* @__PURE__ */ Te(cb), NN = ub(H, ["tiny", "regular", "medium", "big
   Divider: Iu
 }, fb = "Badge", Bu = "lumx-badge", {
   block: hb
-} = B(Bu), Fu = {
+} = F(Bu), Fu = {
   color: G.primary
 }, On = (e) => {
   const {
@@ -7516,7 +7519,7 @@ const ub = /* @__PURE__ */ Te(cb), NN = ub(H, ["tiny", "regular", "medium", "big
 On.displayName = fb;
 On.className = Bu;
 On.defaultProps = Fu;
-const xN = /* @__PURE__ */ E((e, {
+const PN = /* @__PURE__ */ E((e, {
   slots: t
 }) => {
   const n = D(), a = M(() => e.class);
@@ -7532,7 +7535,7 @@ const xN = /* @__PURE__ */ E((e, {
 }), mb = "lumx-badge-wrapper", {
   block: pb,
   element: gb
-} = B(mb), vb = (e) => {
+} = F(mb), vb = (e) => {
   const {
     badge: t,
     children: n,
@@ -7547,7 +7550,7 @@ const xN = /* @__PURE__ */ E((e, {
   }), [n, t && m("div", {
     className: gb("badge")
   }, [t])]);
-}, PN = /* @__PURE__ */ E((e, {
+}, xN = /* @__PURE__ */ E((e, {
   slots: t
 }) => {
   const n = D(), a = M(() => e.class);
@@ -7563,7 +7566,7 @@ const xN = /* @__PURE__ */ E((e, {
 }), qu = "intermediate", bb = "lumx-checkbox", {
   block: yb,
   element: Ie
-} = B(bb), Ab = (e) => {
+} = F(bb), Ab = (e) => {
   const {
     checked: t,
     className: n,
@@ -7635,14 +7638,14 @@ const xN = /* @__PURE__ */ E((e, {
 }, wN = /* @__PURE__ */ E((e, {
   emit: t
 }) => {
-  const n = D(), a = U(), o = M(() => e.class), r = re(), s = C(() => e.id || r), i = R(null), {
+  const n = D(), a = U(), o = M(() => e.class), r = re(), s = w(() => e.id || r), i = R(null), {
     isAnyDisabled: l,
     disabledStateProps: c,
     otherProps: d
-  } = te(C(() => ({
+  } = te(w(() => ({
     ...e,
     ...n
-  }))), u = C(() => e.isChecked === qu);
+  }))), u = w(() => e.isChecked === qu);
   X(u, (f) => {
     i.value && (i.value.indeterminate = f);
   }, {
@@ -7674,9 +7677,9 @@ const xN = /* @__PURE__ */ E((e, {
 }), kt = "lumx-chip", {
   block: Nb,
   element: Fo
-} = B(kt), xb = {
+} = F(kt), Pb = {
   size: H.m
-}, Pb = (e) => {
+}, xb = (e) => {
   const {
     after: t,
     before: n,
@@ -7692,33 +7695,33 @@ const xN = /* @__PURE__ */ E((e, {
     hasAfterClick: h,
     hasBeforeClick: f,
     hasOnClick: g,
-    size: p = xb.size,
+    size: p = Pb.size,
     theme: b,
     ref: v,
     href: y,
     handleKeyDown: A,
     disabledStateProps: N,
-    isAnyDisabled: P,
-    keyDownProp: w = "onKeyDown",
-    tabIndexProp: k = "tabIndex",
-    ...x
-  } = e, T = g && !y, O = !!g || !!y || s, _ = r || (b === he.light ? G.dark : G.light), q = (I) => {
+    isAnyDisabled: x,
+    keyDownProp: C = "onKeyDown",
+    tabIndexProp: O = "tabIndex",
+    ...P
+  } = e, T = g && !y, k = !!g || !!y || s, _ = r || (b === he.light ? G.dark : G.light), q = (I) => {
     A?.(I), g && u && Hd(u)(I);
   }, j = {
-    [w]: q,
-    [k]: O && !N.disabled ? 0 : void 0
+    [C]: q,
+    [O]: k && !N.disabled ? 0 : void 0
   };
   return (
     // eslint-disable-next-line jsx-a11y/no-static-element-interactions
     m("a", S({
       role: T ? "button" : void 0
-    }, j, x, {
+    }, j, P, {
       href: N.disabled ? void 0 : y,
       ref: v,
       className: L(o, Nb({
-        "is-clickable": O,
+        "is-clickable": k,
         [`color-${_}`]: !!_,
-        "is-disabled": P,
+        "is-disabled": x,
         "has-after": !!t,
         "has-before": !!n,
         "is-highlighted": !!i,
@@ -7726,7 +7729,7 @@ const xN = /* @__PURE__ */ E((e, {
         [`size-${p}`]: !!p,
         "is-unselected": !l
       })),
-      "aria-disabled": O && P || void 0,
+      "aria-disabled": k && x || void 0,
       onClick: g ? u : void 0
     }), [n && // eslint-disable-next-line jsx-a11y/click-events-have-key-events,jsx-a11y/no-static-element-interactions
     m("div", {
@@ -7756,7 +7759,7 @@ const xN = /* @__PURE__ */ E((e, {
     isAnyDisabled: c,
     disabledStateProps: d,
     otherProps: u
-  } = te(C(() => ({
+  } = te(w(() => ({
     ...e,
     ...a
   }))), h = (b) => {
@@ -7768,7 +7771,7 @@ const xN = /* @__PURE__ */ E((e, {
   }, p = (b) => {
     c.value || t("keydown", b);
   };
-  return () => m(Pb, S(u.value, {
+  return () => m(xb, S(u.value, {
     className: r.value,
     theme: e.theme || o.value,
     handleClick: h,
@@ -7822,7 +7825,7 @@ function Tb(e) {
 const _b = "lumx-selection-chip-group", {
   block: Ib,
   element: Lb
-} = B(_b), Eb = (e, {
+} = F(_b), Eb = (e, {
   Chip: t,
   ChipGroup: n,
   Icon: a,
@@ -7851,31 +7854,31 @@ const _b = "lumx-selection-chip-group", {
     "aria-orientation": "horizontal",
     className: Ib([g])
   }), Tb(s = i.map((y) => {
-    const A = c && se(c, y) || se(l, y), N = se(l, y), P = p?.(y) || {}, w = P.isDisabled || h, k = typeof P.children == "string" ? P.children : A, x = u ? `${k} - ${u}` : k;
+    const A = c && se(c, y) || se(l, y), N = se(l, y), x = p?.(y) || {}, C = x.isDisabled || h, O = typeof x.children == "string" ? x.children : A, P = u ? `${O} - ${u}` : O;
     return m(r, {
       key: N,
-      label: w ? void 0 : x
+      label: C ? void 0 : P
     }, {
       default: () => [m(t, S({
-        "aria-label": x
-      }, P, {
+        "aria-label": P
+      }, x, {
         size: "s",
         after: m(a, {
           icon: yr
         }, null),
-        className: Lb("chip", [P.className]),
+        className: Lb("chip", [x.className]),
         "data-option-id": N,
         isClickable: !0,
         role: "option",
         "aria-selected": "true",
         theme: f,
-        isDisabled: w
+        isDisabled: C
       }), {
         default: () => [m(o, {
           as: "span",
           truncate: !0
         }, {
-          default: () => [P.children || A]
+          default: () => [x.children || A]
         })]
       })]
     });
@@ -7966,7 +7969,7 @@ const Hu = (e) => (t) => K(t) && t.type === e, Rb = {
       });
       c(d);
     });
-    const l = C(i);
+    const l = w(i);
     return ju({
       containerRef: l,
       itemSelector: `.${kt}`,
@@ -8021,7 +8024,7 @@ const Hu = (e) => (t) => K(t) && t.type === e, Rb = {
 ), Bb = "lumx-lightbox", {
   block: Fb,
   element: El
-} = B(Bb), qb = (e) => {
+} = F(Bb), qb = (e) => {
   const {
     "aria-labelledby": t,
     ariaLabelledBy: n = t,
@@ -8043,10 +8046,10 @@ const Hu = (e) => (t) => K(t) && t.type === e, Rb = {
     HeadingLevelProvider: y,
     ThemeProvider: A,
     ClickAwayProvider: N,
-    childrenRef: P,
-    clickAwayRefs: w,
-    closeButtonRef: k,
-    IconButton: x,
+    childrenRef: x,
+    clickAwayRefs: C,
+    closeButtonRef: O,
+    IconButton: P,
     ...T
   } = e;
   return !l && !p ? null : m(v, null, {
@@ -8068,8 +8071,8 @@ const Hu = (e) => (t) => K(t) && t.type === e, Rb = {
       }
     }), [i && m("div", {
       className: El("close")
-    }, [m(x, S(i, {
-      ref: k,
+    }, [m(P, S(i, {
+      ref: O,
       emphasis: "low",
       hasBackground: !0,
       icon: yr,
@@ -8084,10 +8087,10 @@ const Hu = (e) => (t) => K(t) && t.type === e, Rb = {
       }, {
         default: () => [m(N, {
           callback: !h && c,
-          childrenRefs: w
+          childrenRefs: C
         }, {
           default: () => [m("div", {
-            ref: P,
+            ref: x,
             className: El("wrapper"),
             role: "presentation"
           }, [r])]
@@ -8103,14 +8106,14 @@ const Hu = (e) => (t) => K(t) && t.type === e, Rb = {
   attrs: a
 }) => {
   const o = M(() => e.class), r = R(null), s = R(null), i = () => t("close");
-  ln(i, C(() => !!(e.isOpen && !e.preventAutoClose)));
-  const l = C(() => e.isOpen && r.value || !1);
-  Cr(l, C(() => {
+  ln(i, w(() => !!(e.isOpen && !e.preventAutoClose)));
+  const l = w(() => e.isOpen && r.value || !1);
+  Cr(l, w(() => {
     const h = s.value?.$el ?? s.value;
     return e.focusElement || h || r.value;
-  })), Or(C(() => !0), C(() => {
-  }), C(() => e.parentElement), r, C(() => !!e.isOpen)), Bc(C(() => !!e.isOpen));
-  const c = Dc(C(() => !!e.isOpen), ac), d = C(() => e.isOpen || c.value), u = C(() => [r]);
+  })), Or(w(() => !0), w(() => {
+  }), w(() => e.parentElement), r, w(() => !!e.isOpen)), Bc(w(() => !!e.isOpen));
+  const c = Dc(w(() => !!e.isOpen), ac), d = w(() => e.isOpen || c.value), u = w(() => [r]);
   return () => d.value ? qb({
     ...a,
     ClickAwayProvider: vr,
@@ -8137,7 +8140,7 @@ const Hu = (e) => (t) => K(t) && t.type === e, Rb = {
   emits: jb
 }), Hb = "lumx-divider", {
   block: zb
-} = B(Hb), Vb = (e) => {
+} = F(Hb), Vb = (e) => {
   const {
     className: t,
     theme: n,
@@ -8164,7 +8167,7 @@ const Hu = (e) => (t) => K(t) && t.type === e, Rb = {
   props: $()("class", "theme")
 }), Wb = "lumx-drag-handle", {
   block: Ub
-} = B(Wb), Gb = (e) => {
+} = F(Wb), Gb = (e) => {
   const {
     className: t,
     theme: n,
@@ -8197,7 +8200,7 @@ const Hu = (e) => (t) => K(t) && t.type === e, Rb = {
 }), Kb = "lumx-expansion-panel", {
   block: Xb,
   element: we
-} = B(Kb), Yb = {
+} = F(Kb), Yb = {
   closeMode: "unmount"
 }, Zb = (e) => {
   const {
@@ -8221,12 +8224,12 @@ const Hu = (e) => (t) => K(t) && t.type === e, Rb = {
     isChildrenVisible: y,
     IconButton: A,
     footer: N,
-    closeMode: P,
-    ...w
-  } = e, k = (O) => {
+    closeMode: x,
+    ...C
+  } = e, O = (k) => {
     const _ = !s;
-    c && _ && c(O), l && !_ && l(O), d && d(_, O);
-  }, x = u === he.dark ? G.light : G.dark, T = L(t, Xb({
+    c && _ && c(k), l && !_ && l(k), d && d(_, k);
+  }, P = u === he.dark ? G.light : G.dark, T = L(t, Xb({
     "has-background": a,
     "has-header": !Kt(f.children),
     "has-header-divider": r,
@@ -8237,11 +8240,11 @@ const Hu = (e) => (t) => K(t) && t.type === e, Rb = {
   }));
   return m("section", S({
     ref: o
-  }, w, {
+  }, C, {
     className: T
   }), [m("header", {
     className: we("header"),
-    onClick: k
+    onClick: O
   }, [p && m("div", {
     className: we("header-drag")
   }, [p]), m("div", S(f, {
@@ -8249,7 +8252,7 @@ const Hu = (e) => (t) => K(t) && t.type === e, Rb = {
   }), [g]), m("div", {
     className: we("header-toggle")
   }, [m(A, S(h, {
-    color: x,
+    color: P,
     emphasis: ve.low,
     icon: s ? dc : fc,
     "aria-expanded": s || "false"
@@ -8335,7 +8338,7 @@ function Qb(e) {
 const ey = "lumx-flag", {
   block: ty,
   element: $l
-} = B(ey), ny = (e) => {
+} = F(ey), ny = (e) => {
   const {
     children: t,
     icon: n,
@@ -8516,7 +8519,7 @@ const IN = /* @__PURE__ */ E((e, {
 }, LN = /* @__PURE__ */ E((e, {
   slots: t
 }) => {
-  const n = D(), a = Pc(), o = M(() => e.class), r = C(() => {
+  const n = D(), a = xc(), o = M(() => e.class), r = w(() => {
     const {
       className: s,
       ...i
@@ -8568,7 +8571,7 @@ const IN = /* @__PURE__ */ E((e, {
   props: $()("htmlFor", "id", "isRequired", "typography", "theme", "class", "as")
 }), Wu = "lumx-link", {
   block: py
-} = B(Wu), gy = (e) => {
+} = F(Wu), gy = (e) => {
   const {
     children: t,
     className: n,
@@ -8605,7 +8608,7 @@ const IN = /* @__PURE__ */ E((e, {
     isAnyDisabled: r,
     disabledStateProps: s,
     otherProps: i
-  } = te(C(() => ({
+  } = te(w(() => ({
     ...e,
     ...a
   }))), l = (c) => {
@@ -8638,7 +8641,7 @@ function jl(e) {
 const yy = "lumx-link-preview", {
   block: Ay,
   element: We
-} = B(yy), Uu = {
+} = F(yy), Uu = {
   size: H.regular,
   titleHeading: "h2"
 }, Sy = (e) => {
@@ -8731,9 +8734,9 @@ const yy = "lumx-link-preview", {
   inheritAttrs: !1,
   props: $()("class", "description", "link", "linkAs", "linkProps", "size", "theme", "thumbnailProps", "title", "titleHeading")
 }), Ny = "lumx-menu-item", {
-  block: xy,
-  element: Py
-} = B(Ny), wy = (e) => {
+  block: Py,
+  element: xy
+} = F(Ny), wy = (e) => {
   const {
     children: t,
     className: n,
@@ -8750,7 +8753,7 @@ const yy = "lumx-link-preview", {
     type: "button",
     ...i,
     ref: l,
-    className: Py("action"),
+    className: xy("action"),
     handleClick: s,
     "data-menu-item": "",
     "aria-disabled": r ? "true" : void 0,
@@ -8760,7 +8763,7 @@ const yy = "lumx-link-preview", {
     ref: c,
     size: "tiny",
     ...d,
-    className: L(n, xy()),
+    className: L(n, Py()),
     before: a,
     after: o,
     children: u
@@ -9150,7 +9153,7 @@ function qy(e) {
 const jy = "lumx-menu-popover", {
   block: Hy,
   element: zy
-} = B(jy), Vy = (e, {
+} = F(jy), Vy = (e, {
   Popover: t,
   FlexBox: n
 }) => {
@@ -9287,7 +9290,7 @@ const jy = "lumx-menu-popover", {
 }), Yy = "Message", Ku = "lumx-message", {
   block: Zy,
   element: Uo
-} = B(Ku), Jy = {
+} = F(Ku), Jy = {
   [ie.error]: {
     color: G.red,
     icon: hc
@@ -9393,7 +9396,7 @@ var tA = eA();
 const nA = /* @__PURE__ */ Te(tA), aA = "lumx-mosaic", {
   block: oA,
   element: Xo
-} = B(aA), rA = (e) => {
+} = F(aA), rA = (e) => {
   const {
     className: t,
     theme: n,
@@ -9467,7 +9470,7 @@ const nA = /* @__PURE__ */ Te(tA), aA = "lumx-mosaic", {
   emit: t,
   slots: n
 }) => {
-  const a = D(), o = M(() => e.class), r = C(() => e.label ?? e.ariaLabel ?? a["aria-label"]), s = () => t("close");
+  const a = D(), o = M(() => e.class), r = w(() => e.label ?? e.ariaLabel ?? a["aria-label"]), s = () => t("close");
   return () => {
     const {
       label: i,
@@ -9501,7 +9504,7 @@ const nA = /* @__PURE__ */ Te(tA), aA = "lumx-mosaic", {
 }), uA = "lumx-progress-linear", {
   block: dA,
   element: Wl
-} = B(uA), fA = (e) => {
+} = F(uA), fA = (e) => {
   const {
     className: t,
     theme: n,
@@ -9532,7 +9535,7 @@ const nA = /* @__PURE__ */ Te(tA), aA = "lumx-mosaic", {
 }), hA = "lumx-radio-button", {
   block: mA,
   element: Le
-} = B(hA), pA = (e) => {
+} = F(hA), pA = (e) => {
   const {
     checked: t,
     className: n,
@@ -9600,11 +9603,11 @@ const nA = /* @__PURE__ */ Te(tA), aA = "lumx-mosaic", {
 }, HN = /* @__PURE__ */ E((e, {
   emit: t
 }) => {
-  const n = D(), a = U(), o = M(() => e.class), r = re(), s = C(() => e.id || r), {
+  const n = D(), a = U(), o = M(() => e.class), r = re(), s = w(() => e.id || r), {
     isAnyDisabled: i,
     disabledStateProps: l,
     otherProps: c
-  } = te(C(() => ({
+  } = te(w(() => ({
     ...e,
     ...n
   }))), d = (u, h, f) => {
@@ -9659,7 +9662,7 @@ const zN = /* @__PURE__ */ E((e, {
   props: $()("class")
 }), yA = "lumx-skeleton-circle", {
   block: AA
-} = B(yA), SA = (e) => {
+} = F(yA), SA = (e) => {
   const {
     className: t,
     size: n,
@@ -9681,10 +9684,10 @@ const zN = /* @__PURE__ */ E((e, {
   squared: "squared",
   rounded: "rounded",
   pill: "pill"
-}, xA = "lumx-skeleton-rectangle", {
-  block: PA,
+}, PA = "lumx-skeleton-rectangle", {
+  block: xA,
   element: wA
-} = B(xA), CA = {
+} = F(PA), CA = {
   variant: NA.squared
 }, OA = (e) => {
   const {
@@ -9701,7 +9704,7 @@ const zN = /* @__PURE__ */ E((e, {
   return m("div", S({
     ref: l
   }, c, {
-    className: L(n, PA({
+    className: L(n, xA({
       [`aspect-ratio-${t}`]: !!t,
       [`height-${a}`]: !!(!t && a),
       [`theme-${o}`]: !!o,
@@ -9745,7 +9748,7 @@ const zN = /* @__PURE__ */ E((e, {
 }), kA = "lumx-switch", {
   block: TA,
   element: Ee
-} = B(kA), _A = {
+} = F(kA), _A = {
   position: "left"
 }, IA = (e) => {
   const {
@@ -9820,11 +9823,11 @@ const zN = /* @__PURE__ */ E((e, {
   emit: t,
   slots: n
 }) => {
-  const a = D(), o = U(), r = M(() => e.class), s = re(), i = C(() => e.id || s), {
+  const a = D(), o = U(), r = M(() => e.class), s = re(), i = w(() => e.id || s), {
     isAnyDisabled: l,
     disabledStateProps: c,
     otherProps: d
-  } = te(C(() => ({
+  } = te(w(() => ({
     ...e,
     ...a
   }))), u = (h, f, g, p) => {
@@ -9856,7 +9859,7 @@ const zN = /* @__PURE__ */ E((e, {
 }, EA = "lumx-uploader", {
   block: $A,
   element: yt
-} = B(EA), Yo = {
+} = F(EA), Yo = {
   aspectRatio: dt.horizontal,
   size: H.xl,
   variant: Yu.square
@@ -9916,11 +9919,11 @@ const zN = /* @__PURE__ */ E((e, {
 }, KN = /* @__PURE__ */ E((e, {
   emit: t
 }) => {
-  const n = D(), a = U(), o = M(() => e.class), r = re(), s = C(() => e.fileInputProps?.id || r), i = R(!1), {
+  const n = D(), a = U(), o = M(() => e.class), r = re(), s = w(() => e.fileInputProps?.id || r), i = R(!1), {
     isAnyDisabled: l,
     disabledStateProps: c,
     otherProps: d
-  } = te(C(() => ({
+  } = te(w(() => ({
     ...e,
     ...n
   }))), u = (f) => {
@@ -9984,7 +9987,7 @@ const zN = /* @__PURE__ */ E((e, {
 }, Zu = "lumx-image-block", {
   block: BA,
   element: Ul
-} = B(Zu), Gl = {
+} = F(Zu), Gl = {
   captionPosition: DA.below,
   align: Ar.left
 }, FA = (e) => {
@@ -10163,7 +10166,7 @@ const qA = (e) => {
 }), HA = "InlineList", Ju = "lumx-inline-list", {
   block: zA,
   element: Kl
-} = B(Ju), VA = {}, _n = (e) => {
+} = F(Ju), VA = {}, _n = (e) => {
   const {
     className: t,
     color: n,
@@ -10213,7 +10216,7 @@ const YN = /* @__PURE__ */ E((e, {
   props: $()("color", "colorVariant", "typography", "wrap", "class")
 }), Mt = "lumx-table", {
   block: WA
-} = B(Mt), UA = (e) => {
+} = F(Mt), UA = (e) => {
   const {
     children: t,
     className: n,
@@ -10277,7 +10280,7 @@ const YN = /* @__PURE__ */ E((e, {
   head: "head"
 }, Ue = `${Mt}__cell`, {
   block: Xl
-} = B(Ue), XA = {
+} = F(Ue), XA = {
   variant: ur.body
 }, YA = (e) => {
   const {
@@ -10363,7 +10366,7 @@ const YN = /* @__PURE__ */ E((e, {
   }, o, {
     className: L(n, JA)
   }), [t]);
-}, ex = /* @__PURE__ */ E((e, {
+}, eP = /* @__PURE__ */ E((e, {
   slots: t
 }) => {
   const n = D(), a = M(() => e.class);
@@ -10377,7 +10380,7 @@ const YN = /* @__PURE__ */ E((e, {
   props: $()("class")
 }), eS = `${Mt}__row`, {
   block: tS
-} = B(eS), nS = (e) => {
+} = F(eS), nS = (e) => {
   const {
     children: t,
     className: n,
@@ -10400,13 +10403,13 @@ const YN = /* @__PURE__ */ E((e, {
       "is-selected": o && !c
     }))
   }), [t]);
-}, tx = /* @__PURE__ */ E((e, {
+}, tP = /* @__PURE__ */ E((e, {
   slots: t
 }) => {
   const n = D(), a = M(() => e.class), {
     isAnyDisabled: o,
     otherProps: r
-  } = te(C(() => ({
+  } = te(w(() => ({
     ...e,
     ...n
   })));
@@ -10426,7 +10429,7 @@ function aS(e) {
 }
 const oS = `${Qu}__link`, {
   block: rS
-} = B(oS), sS = (e) => {
+} = F(oS), sS = (e) => {
   const {
     className: t,
     icon: n,
@@ -10448,28 +10451,28 @@ const oS = `${Qu}__link`, {
     Icon: y,
     Text: A,
     ref: N,
-    ...P
-  } = e, w = () => {
+    ...x
+  } = e, C = () => {
     o || g?.();
-  }, k = (T) => {
-    c?.(T), b && w();
-  }, x = (T) => {
-    d?.(T), !(T.key !== "Enter" || o) && w();
+  }, O = (T) => {
+    c?.(T), b && C();
+  }, P = (T) => {
+    d?.(T), !(T.key !== "Enter" || o) && C();
   };
   return m("button", S({
     ref: N
-  }, P, {
+  }, x, {
     type: "button",
     id: v,
     className: L(t, rS({
       "is-active": i,
       "is-disabled": o
     })),
-    onClick: w
+    onClick: C
   }, {
-    [f]: x
+    [f]: P
   }, {
-    onFocus: k,
+    onFocus: O,
     role: "tab"
   }, {
     [h]: i ? 0 : u
@@ -10486,7 +10489,7 @@ const oS = `${Qu}__link`, {
   }, aS(l) ? l : {
     default: () => [l]
   })]);
-}, xt = {
+}, Pt = {
   isLazy: !0,
   shouldActivateOnFocus: !1,
   activeTabIndex: 0,
@@ -10515,14 +10518,14 @@ const oS = `${Qu}__link`, {
 }, ed = /* @__PURE__ */ Symbol("LumxTabProvider"), td = (e, t) => {
   const n = qe(ed, void 0);
   if (!n)
-    return C(() => {
+    return w(() => {
     });
   const { state: a, dispatch: o } = n, r = re(), s = t || r;
   return Ke(() => {
     o({ type: "register", payload: { type: e, id: s } });
   }), en(() => {
     o({ type: "unregister", payload: { type: e, id: s } });
-  }), C(() => {
+  }), w(() => {
     const i = a.value.ids[e].indexOf(s);
     if (i !== -1)
       return {
@@ -10539,15 +10542,15 @@ const oS = `${Qu}__link`, {
   focus: (e) => !0,
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
   keypress: (e) => !0
-}, nx = /* @__PURE__ */ E((e, {
+}, nP = /* @__PURE__ */ E((e, {
   emit: t
 }) => {
   const n = D(), a = M(() => e.class), {
     isAnyDisabled: o
-  } = te(C(() => ({
+  } = te(w(() => ({
     ...e,
     ...n
-  }))), r = td("tab", e.id), s = C(() => e.isActive || r.value?.isActive), i = (c) => t("focus", c), l = (c) => t("keypress", c);
+  }))), r = td("tab", e.id), s = w(() => e.isActive || r.value?.isActive), i = (c) => t("focus", c), l = (c) => t("keypress", c);
   return () => m(sS, S(n, {
     id: e.id,
     className: a.value,
@@ -10576,7 +10579,7 @@ const oS = `${Qu}__link`, {
 }), {
   block: cS,
   element: uS
-} = B(Qu);
+} = F(Qu);
 let dS = /* @__PURE__ */ (function(e) {
   return e.clustered = "clustered", e.fixed = "fixed", e;
 })({});
@@ -10607,7 +10610,7 @@ const Yl = {
     role: "tablist",
     "aria-label": t
   }, [n])]);
-}, ax = /* @__PURE__ */ E((e) => {
+}, aP = /* @__PURE__ */ E((e) => {
   const t = D(), n = ke(), a = U(), o = M(() => e.class), r = R(null);
   return ju({
     containerRef: r,
@@ -10627,7 +10630,7 @@ const Yl = {
   props: $()("layout", "position", "theme", "class")
 }), hS = "lumx-tab-panel", {
   block: mS
-} = B(hS), pS = (e) => {
+} = F(hS), pS = (e) => {
   const {
     children: t,
     className: n,
@@ -10652,8 +10655,8 @@ const Yl = {
   }, {
     "aria-labelledby": r
   }), [(!s || a) && t]);
-}, ox = /* @__PURE__ */ E((e) => {
-  const t = D(), n = ke(), a = M(() => e.class), o = td("tabPanel", e.id), r = C(() => e.isActive || o.value?.isActive);
+}, oP = /* @__PURE__ */ E((e) => {
+  const t = D(), n = ke(), a = M(() => e.class), o = td("tabPanel", e.id), r = w(() => e.isActive || o.value?.isActive);
   return () => m(pS, S(t, {
     className: a.value,
     isActive: r.value,
@@ -10668,18 +10671,18 @@ const Yl = {
   inheritAttrs: !1,
   props: $()("isActive", "id", "class")
 }), Zl = {
-  isLazy: xt.isLazy,
-  shouldActivateOnFocus: xt.shouldActivateOnFocus
+  isLazy: Pt.isLazy,
+  shouldActivateOnFocus: Pt.shouldActivateOnFocus
 }, gS = {
   change: (e) => typeof e == "number"
-}, rx = /* @__PURE__ */ E((e, {
+}, rP = /* @__PURE__ */ E((e, {
   emit: t,
   slots: n
 }) => {
   const a = R({
-    ...xt,
-    isLazy: e.isLazy ?? xt.isLazy,
-    shouldActivateOnFocus: e.shouldActivateOnFocus ?? xt.shouldActivateOnFocus,
+    ...Pt,
+    isLazy: e.isLazy ?? Pt.isLazy,
+    shouldActivateOnFocus: e.shouldActivateOnFocus ?? Pt.shouldActivateOnFocus,
     ...e.activeTabIndex !== void 0 ? {
       activeTabIndex: e.activeTabIndex
     } : {}
@@ -10736,7 +10739,7 @@ function AS(e) {
 const SS = "lumx-user-block", {
   block: NS,
   element: $e
-} = B(SS), Ql = {
+} = F(SS), Ql = {
   orientation: ct.horizontal,
   size: H.m
 }, dr = ({
@@ -10746,7 +10749,7 @@ const SS = "lumx-user-block", {
 }) => {
   const a = !!(t?.href || e);
   return !!n || a;
-}, xS = (e) => {
+}, PS = (e) => {
   const {
     avatarProps: t,
     className: n,
@@ -10768,25 +10771,25 @@ const SS = "lumx-user-block", {
     theme: y,
     children: A,
     additionalFields: N,
-    after: P,
-    Text: w,
-    Avatar: k,
-    ...x
+    after: x,
+    Text: C,
+    Avatar: O,
+    ...P
   } = e;
   let T = v;
   p === ct.vertical && (T = H.l);
-  const O = p === ct.vertical, _ = dr({
+  const k = p === ct.vertical, _ = dr({
     handleClick: h,
     linkAs: r,
     linkProps: o
   }), q = T !== H.s && T !== H.xs, j = a && q && m("div", {
     className: $e("fields")
-  }, [a.map((F, V) => m(w, {
+  }, [a.map((B, z) => m(C, {
     as: "span",
-    key: V,
+    key: z,
     className: $e("field")
-  }, AS(F) ? F : {
-    default: () => [F]
+  }, AS(B) ? B : {
+    default: () => [B]
   }))]), I = {
     ...f && {
       [l]: f
@@ -10797,14 +10800,14 @@ const SS = "lumx-user-block", {
   };
   return m("div", S({
     ref: s
-  }, x, I, {
+  }, P, I, {
     className: L(n, NS({
       [`orientation-${p}`]: !!p,
       [`size-${T}`]: !!T,
       [`theme-${y}`]: !!y,
       "is-clickable": _
     }))
-  }), [t && m(k, S({
+  }), [t && m(O, S({
     linkAs: r,
     linkProps: o,
     alt: ""
@@ -10815,22 +10818,22 @@ const SS = "lumx-user-block", {
     theme: y
   }), null), (a || d || A || N) && m("div", {
     className: $e("wrapper")
-  }, [A, j, q ? N : null]), O && b && m("div", {
+  }, [A, j, q ? N : null]), k && b && m("div", {
     className: $e("action")
-  }, [b]), O && i && m("div", {
+  }, [b]), k && i && m("div", {
     className: $e("actions")
-  }, [i]), P ? m("div", {
+  }, [i]), x ? m("div", {
     className: $e("after")
-  }, [P]) : null]);
+  }, [x]) : null]);
 };
-function PS(e) {
+function xS(e) {
   return typeof e == "function" || Object.prototype.toString.call(e) === "[object Object]" && !K(e);
 }
 const wS = {
   click: () => !0,
   mouseenter: () => !0,
   mouseleave: () => !0
-}, sx = /* @__PURE__ */ E((e, {
+}, sP = /* @__PURE__ */ E((e, {
   emit: t,
   slots: n
 }) => {
@@ -10840,7 +10843,7 @@ const wS = {
     t("mouseenter");
   }, l = () => {
     t("mouseleave");
-  }, c = oe("onClick"), d = oe("onMouseenter"), u = oe("onMouseleave"), h = C(() => {
+  }, c = oe("onClick"), d = oe("onMouseenter"), u = oe("onMouseleave"), h = w(() => {
     const g = e.name || n.name?.();
     if (Kt(g))
       return null;
@@ -10862,11 +10865,11 @@ const wS = {
     }), {
       default: () => [m(me, {
         as: "span"
-      }, PS(g) ? g : {
+      }, xS(g) ? g : {
         default: () => [g]
       })]
     });
-  }), f = C(() => {
+  }), f = w(() => {
     if (!e.avatarProps) return;
     if (dr({
       linkAs: e.linkAs,
@@ -10886,7 +10889,7 @@ const wS = {
       fields: p,
       ...b
     } = e, v = n.default?.() || h.value;
-    return m(xS, S(b, a, {
+    return m(PS, S(b, a, {
       linkAs: Ye(g),
       className: r.value,
       theme: e.theme || o.value,
@@ -11023,9 +11026,9 @@ const OS = "SelectButton", kS = "lumx-select-button", TS = {
     listStatus: y = "idle",
     translations: A,
     onOpen: N,
-    onLoadMore: P,
-    infiniteScrollOptions: w
-  } = e, k = y === "loading", x = y === "loadingMore", T = y === "error", O = u === "multiple", _ = d != null ? qr(d).map((q) => ad(q, r, o)).filter(Boolean).join(", ") : "";
+    onLoadMore: x,
+    infiniteScrollOptions: C
+  } = e, O = y === "loading", P = y === "loadingMore", T = y === "error", k = u === "multiple", _ = d != null ? qr(d).map((q) => ad(q, r, o)).filter(Boolean).join(", ") : "";
   return m(t.Provider, {
     onOpen: N
   }, {
@@ -11041,9 +11044,9 @@ const OS = "SelectButton", kS = "lumx-select-button", TS = {
     }, p), {
       default: () => [m(t.List, S(b, {
         "aria-label": h,
-        "aria-multiselectable": O || void 0
+        "aria-multiselectable": k || void 0
       }), {
-        default: () => [k ? m(t.OptionSkeleton, {
+        default: () => [O ? m(t.OptionSkeleton, {
           count: 3
         }, null) : Wr({
           options: a,
@@ -11056,12 +11059,12 @@ const OS = "SelectButton", kS = "lumx-select-button", TS = {
           selected: d
         }, {
           Combobox: t
-        }), P && n && m(n, {
+        }), x && n && m(n, {
           callback: () => {
-            y && y !== "idle" || P();
+            y && y !== "idle" || x();
           },
-          options: w
-        }, null), x && m(t.OptionSkeleton, {
+          options: C
+        }, null), P && m(t.OptionSkeleton, {
           count: 1
         }, null)]
       }), m(t.State, {
@@ -11081,7 +11084,7 @@ function _S(e) {
 }
 function od(e) {
   const t = D();
-  return C(() => {
+  return w(() => {
     const n = t.renderOption;
     if (!(!e && !n))
       return (a, o) => {
@@ -11115,7 +11118,7 @@ function od(e) {
   });
 }
 function rd(e) {
-  return C(() => {
+  return w(() => {
     if (e)
       return (t, n) => e({
         sectionId: t,
@@ -11140,17 +11143,17 @@ const LS = {
   "load-more": () => !0,
   /** Dropdown opened or closed. */
   open: (e) => !0
-}, ix = /* @__PURE__ */ E((e, {
+}, iP = /* @__PURE__ */ E((e, {
   emit: t,
   slots: n,
   attrs: a
 }) => {
   const o = R(null), r = M(() => e.class), {
     disabledStateProps: s
-  } = te(C(() => ({
+  } = te(w(() => ({
     ...e,
     ...a
-  }))), i = od(n.option), l = rd(n.sectionTitle), c = C(() => ({
+  }))), i = od(n.option), l = rd(n.sectionTitle), c = w(() => ({
     className: f,
     children: g,
     ref: p,
@@ -11218,7 +11221,7 @@ const LS = {
   slots: Object,
   props: $()("options", "getOptionId", "getOptionName", "getOptionDescription", "getSectionId", "selectionType", "value", "label", "labelDisplayMode", "popoverProps", "listStatus", "translations", "class"),
   emits: LS
-}), lx = Ot, ES = "SelectTextField", $S = "lumx-select-text-field", Gr = (e, {
+}), lP = Ot, ES = "SelectTextField", $S = "lumx-select-text-field", Gr = (e, {
   Combobox: t,
   InfiniteScroll: n
 }) => {
@@ -11241,22 +11244,22 @@ const LS = {
     emptyMessage: y,
     nbOptionMessage: A,
     errorMessage: N,
-    errorTryReloadMessage: P,
-    onOpen: w,
-    chips: k,
-    beforeOptions: x,
+    errorTryReloadMessage: x,
+    onOpen: C,
+    chips: O,
+    beforeOptions: P,
     afterOptions: T,
-    onLoadMore: O,
+    onLoadMore: k,
     infiniteScrollOptions: _
   } = e, q = b === "loading", j = b === "loadingMore", I = b === "error";
   return m(t.Provider, {
-    onOpen: w
+    onOpen: C
   }, {
     default: () => [m(t.Input, S({
       label: u
     }, f, {
       selectionMode: "keep",
-      chips: k
+      chips: O
     }), null), m(t.Popover, S({
       fitToAnchorWidth: "minWidth",
       fitWithinViewportHeight: !0,
@@ -11266,7 +11269,7 @@ const LS = {
         "aria-label": u,
         "aria-multiselectable": h || void 0
       }), {
-        default: () => [x, q ? m(t.OptionSkeleton, {
+        default: () => [P, q ? m(t.OptionSkeleton, {
           count: 3
         }, null) : Wr({
           options: a,
@@ -11279,9 +11282,9 @@ const LS = {
           selected: d
         }, {
           Combobox: t
-        }), T, O && n && m(n, {
+        }), T, k && n && m(n, {
           callback: () => {
-            b && b !== "idle" || O();
+            b && b !== "idle" || k();
           },
           options: _
         }, null), j && m(t.OptionSkeleton, {
@@ -11292,7 +11295,7 @@ const LS = {
         emptyMessage: y,
         nbOptionMessage: A,
         errorMessage: I ? N : void 0,
-        errorTryReloadMessage: I ? P : void 0
+        errorTryReloadMessage: I ? x : void 0
       }, null)]
     })]
   });
@@ -11329,28 +11332,28 @@ const MS = {
   slots: n,
   attrs: a
 }) => {
-  const o = C(() => e.selectionType === "multiple"), r = M(() => e.class), {
+  const o = w(() => e.selectionType === "multiple"), r = M(() => e.class), {
     isAnyDisabled: s,
     disabledStateProps: i
-  } = te(C(() => ({
+  } = te(w(() => ({
     ...e,
     ...a
   }))), l = R(!!e.searchInputValue), c = R(e.searchInputValue ?? ""), d = R(null), u = R(null);
-  X(() => e.searchInputValue, (P) => {
-    P !== void 0 && (c.value = P, l.value = !!P);
+  X(() => e.searchInputValue, (x) => {
+    x !== void 0 && (c.value = x, l.value = !!x);
   });
-  const h = C(() => e.selectionType === "multiple" || l.value ? c.value : ad(e.value, e.getOptionName, e.getOptionId)), f = (P) => {
-    const w = nd(e.options, e.getOptionId, e.value, P.value, e.selectionType === "multiple");
-    t("change", w), l.value = !1, c.value = "", t("search", "");
-  }, g = (P) => {
-    l.value = !0, c.value = P, t("search", P), !o.value && P === "" && e.value !== void 0 && e.value !== null && t("change", void 0);
-  }, p = (P) => {
-    t("change", void 0), l.value = !1, c.value = "", t("search", ""), t("clear", P);
-  }, b = (P) => {
-    l.value = !1, c.value = "", t("search", ""), t("blur", P);
+  const h = w(() => e.selectionType === "multiple" || l.value ? c.value : ad(e.value, e.getOptionName, e.getOptionId)), f = (x) => {
+    const C = nd(e.options, e.getOptionId, e.value, x.value, e.selectionType === "multiple");
+    t("change", C), l.value = !1, c.value = "", t("search", "");
+  }, g = (x) => {
+    l.value = !0, c.value = x, t("search", x), !o.value && x === "" && e.value !== void 0 && e.value !== null && t("change", void 0);
+  }, p = (x) => {
+    t("change", void 0), l.value = !1, c.value = "", t("search", ""), t("clear", x);
+  }, b = (x) => {
+    l.value = !1, c.value = "", t("search", ""), t("blur", x);
   }, v = od(n.option), y = rd(n.sectionTitle), A = oe("onLoadMore") || oe("onLoad-more"), N = () => t("load-more");
   return () => {
-    const P = !o.value && !s.value && (e.hasClearButton ?? !0) && e.value !== void 0 && e.value !== null, w = e.selectionType === "multiple" ? m(Db, {
+    const x = !o.value && !s.value && (e.hasClearButton ?? !0) && e.value !== void 0 && e.value !== null, C = e.selectionType === "multiple" ? m(Db, {
       value: e.value,
       theme: e.theme,
       getOptionId: e.getOptionId,
@@ -11362,7 +11365,7 @@ const MS = {
       chipRemoveLabel: e.translations.chipRemoveLabel
     }, {
       chip: n.chip || void 0
-    }) : void 0, k = e.listStatus ?? "idle", x = e.beforeOptions ?? n.beforeOptions?.();
+    }) : void 0, O = e.listStatus ?? "idle", P = e.beforeOptions ?? n.beforeOptions?.();
     return Gr({
       options: e.options,
       getOptionId: e.getOptionId,
@@ -11374,7 +11377,7 @@ const MS = {
       selected: e.value,
       label: e.label,
       isMultiselectable: o.value,
-      listStatus: k,
+      listStatus: O,
       onOpen: (T) => t("open", T),
       loadingMessage: e.translations.loadingMessage,
       emptyMessage: e.translations.emptyMessage,
@@ -11404,7 +11407,7 @@ const MS = {
         isValid: e.isValid,
         maxLength: e.maxLength,
         "aria-label": e.ariaLabel,
-        clearButtonProps: P ? {
+        clearButtonProps: x ? {
           label: e.translations.clearLabel
         } : void 0,
         onClear: p,
@@ -11420,8 +11423,8 @@ const MS = {
       listProps: {
         ref: d
       },
-      chips: w,
-      beforeOptions: x,
+      chips: C,
+      beforeOptions: P,
       onLoadMore: A ? N : void 0,
       infiniteScrollOptions: {
         root: d.value?.$el ?? null,
@@ -11437,9 +11440,9 @@ const MS = {
   inheritAttrs: !1,
   props: $()("options", "getOptionId", "getOptionName", "getOptionDescription", "getSectionId", "selectionType", "value", "filter", "searchInputValue", "hasClearButton", "listStatus", "label", "placeholder", "icon", "isDisabled", "aria-disabled", "isRequired", "hasError", "error", "helper", "id", "name", "isValid", "maxLength", "ariaLabel", "inputProps", "popoverProps", "translations", "beforeOptions", "openOnFocus", "class", "theme"),
   emits: MS
-}), DS = Ot, cx = Eu, ux = ku, dx = Tu, fx = Iu, BS = "TimePickerField", sd = "lumx-time-picker-field", {
+}), DS = Ot, cP = Eu, uP = ku, dP = Tu, fP = Iu, BS = "TimePickerField", sd = "lumx-time-picker-field", {
   block: FS
-} = B(sd), tc = {
+} = F(sd), tc = {
   step: 30,
   boundsMode: "on-blur"
 }, Kr = (e, {
@@ -11453,16 +11456,30 @@ const MS = {
     handleChange: s,
     handleSearch: i,
     handleBlur: l,
-    ...c
+    getOptionProps: c,
+    ...d
   } = e;
-  return m(t, S(c, {
+  return m(t, S(d, {
     className: FS([r]),
     selectionType: "single",
     options: a,
     getOptionId: "name",
-    renderOption: (d) => m(n, {
-      isDisabled: d.outOfRange
-    }, null),
+    renderOption: ({
+      hour: u,
+      minute: h,
+      outOfRange: f
+    }) => {
+      const {
+        isDisabled: g,
+        ...p
+      } = c?.({
+        hour: u,
+        minute: h
+      }) || {};
+      return m(n, S({
+        isDisabled: f || g
+      }, p), null);
+    },
     onChange: s,
     onSearch: i,
     onBlur: l,
@@ -11525,15 +11542,15 @@ const WS = () => navigator.languages?.[0] || navigator.language, US = {
    */
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
   change: (e) => !0
-}, hx = /* @__PURE__ */ E((e, {
+}, hP = /* @__PURE__ */ E((e, {
   emit: t
 }) => {
-  const n = M(() => e.class), a = C(() => e.locale ?? WS()), o = C(() => e.step ?? tc.step), r = C(() => e.boundsMode ?? tc.boundsMode), s = C(() => jS({
+  const n = M(() => e.class), a = w(() => e.locale ?? WS()), o = w(() => e.step ?? tc.step), r = w(() => e.boundsMode ?? tc.boundsMode), s = w(() => jS({
     step: o.value,
     minTime: e.minTime,
     maxTime: e.maxTime,
     locale: a.value
-  })), i = R(""), l = C(() => {
+  })), i = R(""), l = w(() => {
     const {
       value: h
     } = e;
@@ -11576,10 +11593,11 @@ const WS = () => navigator.languages?.[0] || navigator.language, US = {
       maxTime: v,
       translations: y,
       class: A,
-      ...N
+      getOptionProps: N,
+      ...x
     } = e;
     return Kr({
-      ...N,
+      ...x,
       value: l.value,
       options: s.value,
       translations: y,
@@ -11587,7 +11605,8 @@ const WS = () => navigator.languages?.[0] || navigator.language, US = {
       handleChange: c,
       handleSearch: d,
       handleBlur: u,
-      searchInputValue: h
+      searchInputValue: h,
+      getOptionProps: N
     }, {
       SelectTextField: RS,
       Option: DS
@@ -11604,6 +11623,7 @@ const WS = () => navigator.languages?.[0] || navigator.language, US = {
     "maxTime",
     "boundsMode",
     "translations",
+    "getOptionProps",
     "class",
     // Inherited SelectTextField props
     "label",
@@ -11628,8 +11648,8 @@ const WS = () => navigator.languages?.[0] || navigator.language, US = {
 export {
   gN as AlertDialog,
   Wh as Avatar,
-  xN as Badge,
-  PN as BadgeWrapper,
+  PN as Badge,
+  xN as BadgeWrapper,
   It as Button,
   yN as ButtonGroup,
   wN as Checkbox,
@@ -11642,7 +11662,7 @@ export {
   TN as ExpansionPanel,
   _N as Flag,
   yn as FlexBox,
-  xv as GenericBlock,
+  Pv as GenericBlock,
   NN as GenericBlockGapSize,
   IN as GridColumn,
   LN as Heading,
@@ -11676,14 +11696,14 @@ export {
   zN as RadioGroup,
   Op as RawInputText,
   Lp as RawInputTextarea,
-  ix as SelectButton,
-  lx as SelectButtonOption,
+  iP as SelectButton,
+  lP as SelectButtonOption,
   RS as SelectTextField,
-  fx as SelectTextFieldDivider,
+  fP as SelectTextFieldDivider,
   DS as SelectTextFieldOption,
-  ux as SelectTextFieldOptionMoreInfo,
-  dx as SelectTextFieldOptionSkeleton,
-  cx as SelectTextFieldSection,
+  uP as SelectTextFieldOptionMoreInfo,
+  dP as SelectTextFieldOptionSkeleton,
+  cP as SelectTextFieldSection,
   Db as SelectionChipGroup,
   VN as SkeletonCircle,
   WN as SkeletonRectangle,
@@ -11691,30 +11711,30 @@ export {
   UN as SkeletonTypography,
   GN as Switch,
   pN as TOOLBAR_NAME,
-  nx as Tab,
-  ax as TabList,
+  nP as Tab,
+  aP as TabList,
   dS as TabListLayout,
-  ox as TabPanel,
-  rx as TabProvider,
+  oP as TabPanel,
+  rP as TabProvider,
   ZN as Table,
   JN as TableBody,
   QN as TableCell,
   ur as TableCellVariant,
-  ex as TableHeader,
-  tx as TableRow,
+  eP as TableHeader,
+  tP as TableRow,
   me as Text,
   Up as TextField,
   zt as ThOrder,
   dn as Thumbnail,
   bN as ThumbnailObjectFit,
   vN as ThumbnailVariant,
-  hx as TimePickerField,
+  hP as TimePickerField,
   Ih as Toolbar,
   gn as Tooltip,
   KN as Uploader,
   Yu as UploaderVariant,
-  sx as UserBlock,
+  sP as UserBlock,
   ZA as emitSchema,
-  Pc as useHeadingLevel
+  xc as useHeadingLevel
 };
 //# sourceMappingURL=index.js.map