@lumx/vue 4.19.0-next.0 → 4.19.0

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 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 { 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";
@@ -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) => {
@@ -266,10 +266,10 @@ const Wd = {
   } = e, {
     color: N,
     icon: x
-  } = Wd[i] || {}, w = `${t}-title`, k = `${t}-description`, {
+  } = 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({
@@ -298,11 +298,11 @@ const Wd = {
         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,7 +314,7 @@ const Wd = {
         onClick: q
       }), Ln(_) ? _ : {
         default: () => [_]
-      }), m(v, S(O, {
+      }), m(v, S(k, {
         ref: f,
         color: N,
         className: "lumx-spacing-margin-left-regular",
@@ -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;
   });
@@ -377,14 +377,14 @@ function Jd() {
 // @__NO_SIDE_EFFECTS__
 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 = Pr, ...o } = n;
   let r;
   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) => {
@@ -406,7 +406,7 @@ function ef(e, t, n = {}) {
   let r;
   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 = Pr, immediate: i = !0 } = n, l = /* @__PURE__ */ xr(() => 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;
     },
@@ -494,7 +494,7 @@ function tf(e, t = !1) {
 const nf = "lumx-dialog", {
   block: af,
   element: xe
-} = B(nf), Nc = {
+} = F(nf), Nc = {
   size: H.big
 }, of = (e) => {
   const {
@@ -519,23 +519,23 @@ const nf = "lumx-dialog", {
     ClickAwayProvider: A,
     shouldPreventCloseOnClickAway: N,
     clickAwayRefs: x,
-    rootRef: w,
-    wrapperRef: k,
+    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,
@@ -560,11 +560,11 @@ const nf = "lumx-dialog", {
         }, f), [m(A, {
           callback: !N && c,
           childrenRefs: x,
-          parentRef: w
+          parentRef: C
         }, {
           default: () => [m("section", {
             className: xe("wrapper"),
-            ref: k
+            ref: O
           }, [(a || g) && m("header", S(T, {
             className: L(xe("header", {
               "has-divider": !!(r || P)
@@ -576,7 +576,7 @@ const nf = "lumx-dialog", {
             className: xe("sentinel", {
               top: !0
             }),
-            ref: O
+            ref: k
           }, null), _, m("div", {
             className: xe("sentinel", {
               bottom: !0
@@ -584,11 +584,11 @@ const nf = "lumx-dialog", {
             ref: q
           }, null)]), (s || j) && m("footer", S(I, {
             className: L(xe("footer", {
-              "has-divider": !!(o || V)
+              "has-divider": !!(o || z)
             }), I?.className)
           }), [s, j]), i && m("div", {
             className: xe("progress-overlay")
-          }, [m(F, null, null)])])]
+          }, [m(B, null, null)])])]
         })])]
       })]
     })])]
@@ -608,7 +608,7 @@ const nf = "lumx-dialog", {
 }) => {
   const {
     level: n
-  } = hd(e), a = xc(), 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
   });
@@ -619,7 +619,7 @@ const nf = "lumx-dialog", {
 }), cf = "lumx-progress-circular", {
   block: uf,
   element: Gt
-} = B(cf), is = {
+} = F(cf), is = {
   size: H.m,
   display: "block"
 }, df = (e) => {
@@ -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), x = (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"), P = w.find((_) => _.type === "footer"), O = !!(k || P) ? 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,7 +1272,7 @@ const qf = {
       ProgressCircular: ff,
       className: o.value,
       clickAwayRefs: A,
-      content: O.length ? O : void 0,
+      content: k.length ? k : void 0,
       contentRef: x,
       dialogProps: e.dialogProps,
       footer: void 0,
@@ -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,
@@ -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), x = N == l ? A.constructor : void 0, w = x ? s(x) : "";
-    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]", x = "[object Int16Array]", w = "[object Int32Array]", k = "[object Uint8Array]", P = "[object Uint8ClampedArray]", T = "[object Uint16Array]", O = "[object Uint32Array]", _ = {};
-  _[y] = _[A] = _[N] = _[x] = _[w] = _[k] = _[P] = _[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,16 +1679,16 @@ function ph() {
   return qe(mh, { state: null });
 }
 function te(e) {
-  const t = ph(), n = C(() => {
+  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(() => {
+  ), 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;
   });
@@ -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,
@@ -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 {
@@ -2144,31 +2144,31 @@ const Bh = "lumx-thumbnail", {
     disabledStateProps: A,
     size: N,
     theme: x,
-    loadingState: w,
-    variant: k,
+    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 = !!(P?.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 || (P?.href ? "a" : "button")
-  }, A), z ? Object.assign(ae, P) : ae["aria-label"] = q["aria-label"] || n);
+  }, 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-${x}`]: !!x,
-    [`variant-${k}`]: !!k,
+    [`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,7 +2200,7 @@ const Bh = "lumx-thumbnail", {
     loading: b
   }), null), !j && I && m("span", {
     className: Nt("fallback")
-  }, [F ? ee({
+  }, [B ? ee({
     icon: l,
     size: rt.xxs,
     theme: x
@@ -2210,7 +2210,7 @@ const Bh = "lumx-thumbnail", {
     ...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),
@@ -2507,33 +2507,33 @@ function _r(e, t, n) {
   }
   const f = Kc(n);
   function g(N) {
-    const x = N > 0, w = Math.abs(N), k = l(), P = d(), T = x ? () => P.nextNode() : () => P.previousNode();
-    let O = null, _ = w;
-    if (k)
-      P.currentNode = k;
+    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 (O = P.lastChild(), !O) return null;
+      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) {
+        k = j;
+      else if (O && s) {
         const I = x ? u() : h();
-        if (!I || I === k) break;
-        O = I, P.currentNode = I;
+        if (!I || I === O) break;
+        k = I, P.currentNode = I;
       } else
         break;
     }
-    return O;
+    return k;
   }
   function p(N) {
     const x = d(!1);
-    let w = x.nextNode();
-    for (; w; ) {
-      if (N(w)) return w;
-      w = x.nextNode();
+    let C = x.nextNode();
+    for (; C; ) {
+      if (N(C)) return C;
+      C = x.nextNode();
     }
     return null;
   }
@@ -2559,15 +2559,15 @@ function _r(e, t, n) {
         return N;
       const x = d();
       x.currentNode = N;
-      const w = x.nextNode();
-      return w instanceof HTMLElement ? w : (x.currentNode = N, x.previousNode());
+      const C = x.nextNode();
+      return C instanceof HTMLElement ? C : (x.currentNode = N, x.previousNode());
     }
   };
   function y(N) {
     const x = N(v);
     if (x && x.matches(o) && a.contains(x)) {
-      const w = l();
-      return w !== x && (w && t.onDeactivate(w), t.onActivate(x)), f.clear(), !0;
+      const C = l();
+      return C !== x && (C && t.onDeactivate(C), t.onActivate(x)), f.clear(), !0;
     }
     return f.defer(() => y(N)), !1;
   }
@@ -2625,13 +2625,13 @@ function _e(e) {
 }
 function Qh(e, t, n) {
   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", O) {
+  function* u(P = "first", T = "next", k) {
     const _ = Lt(a, o);
     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);
@@ -2644,10 +2644,10 @@ function Qh(e, t, n) {
   const p = Kc(n);
   let b = 0;
   function v(P, T) {
-    const O = d(P);
-    if (O.length === 0) return !1;
-    const _ = Math.min(T, O.length - 1);
-    return i.setActive(O[_]), !0;
+    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);
@@ -2667,33 +2667,33 @@ function Qh(e, t, n) {
     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 = _ + P;
-    if (q >= 0 && q < O.length)
-      return b = q, i.setActive(O[q]), !0;
+    if (q >= 0 && q < k.length)
+      return b = q, i.setActive(k[q]), !0;
     if (!s) return !1;
-    const j = P > 0 ? "next" : "prev", F = _e(u(T, j)) ?? (P > 0 ? h() : f());
-    if (!F) return !1;
-    const V = d(F);
-    if (V.length === 0) return !1;
-    const W = P > 0 ? 0 : V.length - 1;
-    return b = W, i.setActive(V[W]), !0;
-  }
-  function w(P) {
+    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 P === "next" ? A() : N();
     const T = g(i.active);
     if (!T) return !1;
-    const O = _e(u(T, P));
-    if (O) return v(O, b);
+    const k = _e(u(T, P));
+    if (k) return v(k, b);
     if (s) {
       const _ = P === "next" ? h() : f();
       if (_) return v(_, b);
     }
     return !1;
   }
-  const k = {
+  const O = {
     get activeItem() {
       return i.active;
     },
@@ -2709,18 +2709,18 @@ function Qh(e, t, n) {
   };
   return {
     type: "grid",
-    selectors: k,
+    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 = P > 0 ? 0 : T.length - 1, I = P > 0 ? P - 1 : P + 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(_ + P, T.length - 1));
       return q === _ ? !1 : v(T[q], b);
@@ -2729,17 +2729,17 @@ function Qh(e, t, n) {
       i.clear(), p.clear();
     },
     goTo(P) {
-      const T = P(k);
+      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 x(-1);
@@ -2837,42 +2837,42 @@ function tm(e, t) {
   g();
   const b = new MutationObserver((v) => {
     let y = null, A = null, N = null;
-    const x = [], 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 P = k.target;
-      k.type === "attributes" && P.matches(a) && (k.attributeName === s && P.getAttribute(s) === "true" ? N = P : r && P.matches(r) && x.push(P));
+      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 (x.length > 0) {
-      const k = u.selectors.activeItem;
-      for (const O of x)
-        h(O, "-1");
-      const T = !!(k && x.includes(k) && d.hasFocus);
+      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 x = 500;
-  let w, k = !1;
+  let C, O = !1;
   function P() {
-    clearTimeout(w), p > 0 && i && (w = setTimeout(() => {
-      p > 0 && i && (k = !0, v("loadingAnnouncement", !0));
+    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 ? P() : (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 && P() : (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) {
@@ -3493,7 +3493,7 @@ const vm = async (e, t, n) => {
       x: A,
       y: N,
       data: x,
-      reset: w
+      reset: C
     } = await y({
       x: d,
       y: u,
@@ -3517,11 +3517,11 @@ const vm = async (e, t, n) => {
         ...f[v],
         ...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
     } = Pi(c, h, l)), b = -1);
@@ -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], x = 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 P = N / 2 - x / 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 + P, 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
     };
   }
 });
@@ -3605,32 +3605,32 @@ const Am = function(e) {
       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: x
           },
           reset: {
-            placement: w
+            placement: C
           }
         };
-      const k = x.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,
@@ -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)), x = h || (A || !p ? [Zt(i)] : um(i)), w = g !== "none";
-      !h && w && x.push(...mm(i, p, g, N));
-      const k = [i, ...x], P = await l.detectOverflow(t, b), T = [];
-      let O = ((a = r.flip) == null ? void 0 : a.overflows) || [];
+      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(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
             }
           };
       }
@@ -3851,16 +3851,16 @@ const xm = 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), x = Be(g - d[v], A), w = !t.middlewareData.shift;
-      let k = N, P = x;
-      if ((n = t.middlewareData.shift) != null && n.enabled.x && (P = 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 ? P = 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: P,
-        availableHeight: k
+        availableHeight: O
       });
       const T = await s.getDimensions(i.floating);
       return g !== T.width || p !== T.height ? {
@@ -4298,16 +4298,16 @@ function Zm(e, t) {
       threshold: le(0, Be(1, l)) || 1
     };
     let N = !0;
-    function x(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(x, {
@@ -4393,29 +4393,29 @@ 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;
+      return O;
     const P = Ti(d.value, u.value), T = Ti(d.value, h.value);
     return l.value ? {
-      ...k,
+      ...O,
       transform: "translate(" + P + "px, " + T + "px)",
       ...cu(d.value) >= 1.5 && {
         willChange: "transform"
@@ -4430,13 +4430,13 @@ 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((P) => {
-      u.value = P.x, h.value = P.y, f.value = P.strategy, g.value = P.placement, p.value = P.middlewareData, b.value = k !== !1;
+      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() {
@@ -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], 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,8 +4631,8 @@ 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)), Ph(), () => {
+  } = 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?.(),
@@ -4646,8 +4646,8 @@ const gn = /* @__PURE__ */ E((e, {
     });
     return m(ne, null, [N, b.value && m(tn, null, mp(y = Dr({
       ref: (x) => {
-        const w = x?.$el || x;
-        r.value = w, f(w);
+        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) => {
@@ -4947,7 +4947,7 @@ function Np(e, t) {
 }
 const gu = "lumx-text-field", vu = `${gu}__input-native`, {
   block: Pp
-} = B(vu), xp = {
+} = F(vu), xp = {
   type: "text"
 }, wp = (e) => {
   const {
@@ -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: x,
-    theme: w,
-    value: k,
-    afterElement: P,
-    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: x,
+    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": x
+  }), 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), P && m("div", {
+  }), null), T && m("div", {
     className: ue("after-element")
-  }, [P])]), 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);
@@ -5339,20 +5341,20 @@ const Vp = (e) => {
       helperId: A,
       errorId: N,
       describedById: x,
-      labelId: w
+      labelId: C
     } = h.value, {
-      class: k,
+      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,
@@ -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,
@@ -5460,19 +5463,19 @@ const Vp = (e) => {
       class: A,
       ...N
     } = e, x = {
-      onChange: (P, T, O) => t("change", P, T, O),
+      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,
+      ...O,
+      "aria-disabled": C ?? n.ariaDisabled,
       ...x,
       listboxId: o,
       isOpen: l.value && (!!u.value?.optionsLength || h.value),
@@ -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,
@@ -5596,7 +5599,7 @@ const ng = /* @__PURE__ */ E((e, {
 }), ag = "ListItem", xu = "lumx-list-item", {
   block: og,
   element: jt
-} = B(xu), wu = {
+} = F(xu), wu = {
   size: H.regular
 }, tt = (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 {
@@ -5707,7 +5710,7 @@ const sg = "lumx-combobox-option", {
     "aria-disabled": d ? "true" : void 0,
     role: A,
     children: o
-  }), w = t && b && !l ? m(t, b, rg(x) ? x : {
+  }), C = t && b && !l ? m(t, b, rg(x) ? x : {
     default: () => [x]
   }) : x;
   return tt({
@@ -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"),
@@ -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
 }) => {
@@ -5914,7 +5917,7 @@ function Pg(e) {
 const xg = "lumx-popover", {
   block: wg,
   element: Cg
-} = B(xg), Wt = {
+} = F(xg), Wt = {
   closeMode: "unmount",
   elevation: 3,
   placement: Ag.AUTO,
@@ -5945,8 +5948,8 @@ const xg = "lumx-popover", {
     unmountSentinel: N,
     // Forwarded props
     ...x
-  } = e, w = !d && i === "hide", k = d || i === "hide", P = o, T = Math.min(l || 0, 5);
-  return k ? m(t, {
+  } = 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(P, S(x, {
@@ -5955,20 +5958,20 @@ const xg = "lumx-popover", {
         [`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
@@ -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 = [], x = (t?.away ?? 0) + (n ? qa : 0), w = t?.along ?? 0;
-  return N.push(lu({ mainAxis: x, 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: P, 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 || "";
+        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`;
-        O.floating.style.maxHeight = Li(
+        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(() => xt(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(() => xt(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,
@@ -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,
@@ -6420,7 +6423,7 @@ const yn = /* @__PURE__ */ E((e, {
   } = 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,
@@ -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) => {
@@ -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 {
@@ -7532,7 +7535,7 @@ const PN = /* @__PURE__ */ E((e, {
 }), mb = "lumx-badge-wrapper", {
   block: pb,
   element: gb
-} = B(mb), vb = (e) => {
+} = F(mb), vb = (e) => {
   const {
     badge: t,
     children: n,
@@ -7563,7 +7566,7 @@ const PN = /* @__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 PN = /* @__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,7 +7677,7 @@ const PN = /* @__PURE__ */ E((e, {
 }), kt = "lumx-chip", {
   block: Nb,
   element: Fo
-} = B(kt), Pb = {
+} = F(kt), Pb = {
   size: H.m
 }, xb = (e) => {
   const {
@@ -7699,14 +7702,14 @@ const PN = /* @__PURE__ */ E((e, {
     handleKeyDown: A,
     disabledStateProps: N,
     isAnyDisabled: x,
-    keyDownProp: w = "onKeyDown",
-    tabIndexProp: k = "tabIndex",
+    keyDownProp: C = "onKeyDown",
+    tabIndexProp: O = "tabIndex",
     ...P
-  } = e, T = g && !y, O = !!g || !!y || s, _ = r || (b === he.light ? G.dark : G.light), q = (I) => {
+  } = 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
@@ -7716,7 +7719,7 @@ const PN = /* @__PURE__ */ E((e, {
       href: N.disabled ? void 0 : y,
       ref: v,
       className: L(o, Nb({
-        "is-clickable": O,
+        "is-clickable": k,
         [`color-${_}`]: !!_,
         "is-disabled": x,
         "has-after": !!t,
@@ -7726,7 +7729,7 @@ const PN = /* @__PURE__ */ E((e, {
         [`size-${p}`]: !!p,
         "is-unselected": !l
       })),
-      "aria-disabled": O && x || 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 PN = /* @__PURE__ */ E((e, {
     isAnyDisabled: c,
     disabledStateProps: d,
     otherProps: u
-  } = te(C(() => ({
+  } = te(w(() => ({
     ...e,
     ...a
   }))), h = (b) => {
@@ -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,10 +7854,10 @@ 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), x = p?.(y) || {}, w = x.isDisabled || h, k = typeof x.children == "string" ? x.children : A, P = 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 : P
+      label: C ? void 0 : P
     }, {
       default: () => [m(t, S({
         "aria-label": P
@@ -7869,7 +7872,7 @@ const _b = "lumx-selection-chip-group", {
         role: "option",
         "aria-selected": "true",
         theme: f,
-        isDisabled: w
+        isDisabled: C
       }), {
         default: () => [m(o, {
           as: "span",
@@ -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,
@@ -8044,8 +8047,8 @@ const Hu = (e) => (t) => K(t) && t.type === e, Rb = {
     ThemeProvider: A,
     ClickAwayProvider: N,
     childrenRef: x,
-    clickAwayRefs: w,
-    closeButtonRef: k,
+    clickAwayRefs: C,
+    closeButtonRef: O,
     IconButton: P,
     ...T
   } = e;
@@ -8069,7 +8072,7 @@ const Hu = (e) => (t) => K(t) && t.type === e, Rb = {
     }), [i && m("div", {
       className: El("close")
     }, [m(P, S(i, {
-      ref: k,
+      ref: O,
       emphasis: "low",
       hasBackground: !0,
       icon: yr,
@@ -8084,7 +8087,7 @@ const Hu = (e) => (t) => K(t) && t.type === e, Rb = {
       }, {
         default: () => [m(N, {
           callback: !h && c,
-          childrenRefs: w
+          childrenRefs: C
         }, {
           default: () => [m("div", {
             ref: x,
@@ -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 {
@@ -8222,10 +8225,10 @@ const Hu = (e) => (t) => K(t) && t.type === e, Rb = {
     IconButton: A,
     footer: N,
     closeMode: x,
-    ...w
-  } = e, k = (O) => {
+    ...C
+  } = e, O = (k) => {
     const _ = !s;
-    c && _ && c(O), l && !_ && l(O), d && d(_, O);
+    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),
@@ -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, {
@@ -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 = xc(), 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) => {
@@ -8733,7 +8736,7 @@ const yy = "lumx-link-preview", {
 }), Ny = "lumx-menu-item", {
   block: Py,
   element: xy
-} = B(Ny), wy = (e) => {
+} = F(Ny), wy = (e) => {
   const {
     children: t,
     className: n,
@@ -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,
@@ -9684,7 +9687,7 @@ const zN = /* @__PURE__ */ E((e, {
 }, PA = "lumx-skeleton-rectangle", {
   block: xA,
   element: wA
-} = B(PA), CA = {
+} = F(PA), CA = {
   variant: NA.squared
 }, OA = (e) => {
   const {
@@ -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 {
@@ -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,
@@ -10406,7 +10409,7 @@ const YN = /* @__PURE__ */ E((e, {
   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,
@@ -10449,12 +10452,12 @@ const oS = `${Qu}__link`, {
     Text: A,
     ref: N,
     ...x
-  } = e, w = () => {
+  } = e, C = () => {
     o || g?.();
-  }, k = (T) => {
-    c?.(T), b && w();
+  }, O = (T) => {
+    c?.(T), b && C();
   }, P = (T) => {
-    d?.(T), !(T.key !== "Enter" || o) && w();
+    d?.(T), !(T.key !== "Enter" || o) && C();
   };
   return m("button", S({
     ref: N
@@ -10465,11 +10468,11 @@ const oS = `${Qu}__link`, {
       "is-active": i,
       "is-disabled": o
     })),
-    onClick: w
+    onClick: C
   }, {
     [f]: P
   }, {
-    onFocus: k,
+    onFocus: O,
     role: "tab"
   }, {
     [h]: i ? 0 : u
@@ -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 {
@@ -10544,10 +10547,10 @@ const oS = `${Qu}__link`, {
 }) => {
   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;
 })({});
@@ -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,
@@ -10653,7 +10656,7 @@ const Yl = {
     "aria-labelledby": r
   }), [(!s || a) && t]);
 }, oP = /* @__PURE__ */ E((e) => {
-  const t = D(), n = ke(), a = M(() => e.class), o = td("tabPanel", e.id), r = C(() => e.isActive || o.value?.isActive);
+  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,
@@ -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 = ({
@@ -10769,24 +10772,24 @@ const SS = "lumx-user-block", {
     children: A,
     additionalFields: N,
     after: x,
-    Text: w,
-    Avatar: k,
+    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
@@ -10804,7 +10807,7 @@ const SS = "lumx-user-block", {
       [`theme-${y}`]: !!y,
       "is-clickable": _
     }))
-  }), [t && m(k, S({
+  }), [t && m(O, S({
     linkAs: r,
     linkProps: o,
     alt: ""
@@ -10815,9 +10818,9 @@ 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]), x ? m("div", {
     className: $e("after")
@@ -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;
@@ -10866,7 +10869,7 @@ const wS = {
         default: () => [g]
       })]
     });
-  }), f = C(() => {
+  }), f = w(() => {
     if (!e.avatarProps) return;
     if (dr({
       linkAs: e.linkAs,
@@ -11024,8 +11027,8 @@ const OS = "SelectButton", kS = "lumx-select-button", TS = {
     translations: A,
     onOpen: N,
     onLoadMore: x,
-    infiniteScrollOptions: w
-  } = e, k = y === "loading", P = y === "loadingMore", T = y === "error", O = u === "multiple", _ = d != null ? qr(d).map((q) => ad(q, r, o)).filter(Boolean).join(", ") : "";
+    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,
@@ -11060,7 +11063,7 @@ const OS = "SelectButton", kS = "lumx-select-button", TS = {
           callback: () => {
             y && y !== "idle" || x();
           },
-          options: w
+          options: C
         }, null), P && m(t.OptionSkeleton, {
           count: 1
         }, null)]
@@ -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,
@@ -11147,10 +11150,10 @@ const LS = {
 }) => {
   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,
@@ -11242,21 +11245,21 @@ const LS = {
     nbOptionMessage: A,
     errorMessage: N,
     errorTryReloadMessage: x,
-    onOpen: w,
-    chips: k,
+    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,
@@ -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, {
@@ -11329,19 +11332,19 @@ 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, (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 = (x) => {
-    const w = nd(e.options, e.getOptionId, e.value, x.value, e.selectionType === "multiple");
-    t("change", w), l.value = !1, c.value = "", t("search", "");
+  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) => {
@@ -11350,7 +11353,7 @@ const MS = {
     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 x = !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", P = 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,
@@ -11420,7 +11423,7 @@ const MS = {
       listProps: {
         ref: d
       },
-      chips: w,
+      chips: C,
       beforeOptions: P,
       onLoadMore: A ? N : void 0,
       infiniteScrollOptions: {
@@ -11439,7 +11442,7 @@ const MS = {
   emits: MS
 }), 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, {
@@ -11542,12 +11545,12 @@ const WS = () => navigator.languages?.[0] || navigator.language, US = {
 }, 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;