@lumx/vue 4.4.0 → 4.4.1-alpha.1

package/index.js

@@ -1,35 +1,121 @@
-import { ColorVariant as Ta, Theme as Ca, AspectRatio as _a, Size as xa } from "@lumx/core/js/constants";
+import { ColorVariant as xa, Theme as Ea, AspectRatio as Jr, Size as wa } from "@lumx/core/js/constants";
 export * from "@lumx/core/js/constants";
 export * from "@lumx/core/js/types";
-import { createVNode as l, mergeProps as h, defineComponent as v, useAttrs as S, isVNode as ae, inject as It, computed as P, unref as Pt, provide as Yr, getCurrentScope as Ea, onScopeDispose as wa, watch as H, toValue as Lt, shallowRef as Ia, getCurrentInstance as Jr, onMounted as La, ref as ne, useSlots as Ot, Fragment as Ae, useTemplateRef as Oa, toRefs as Ba, reactive as Ra, onBeforeUnmount as ja, nextTick as Ma, toRef as J } from "vue";
-import { getDisabledState as qa } from "@lumx/core/js/utils/disabledState";
-import { mdiAlertCircle as Xr } from "@lumx/icons/esm/alert-circle.js";
+import { createVNode as l, mergeProps as h, inject as Ot, computed as P, unref as Pt, isVNode as ae, Fragment as Ae, getCurrentInstance as Xr, ref as ne, watch as H, onBeforeUnmount as La, nextTick as Oa, defineComponent as g, useAttrs as S, toRef as J, provide as Qr, getCurrentScope as Ia, onScopeDispose as Ba, toValue as It, shallowRef as Ra, onMounted as Ma, useSlots as Bt, useTemplateRef as ja, toRefs as qa, reactive as Da } from "vue";
 import { classNames as W } from "@lumx/core/js/utils";
-import { mdiCheck as Da } from "@lumx/icons/esm/check.js";
-import { mdiMinus as Fa } from "@lumx/icons/esm/minus.js";
-import { mdiAlert as za } from "@lumx/icons/esm/alert.js";
-import { mdiCheckCircle as Ga } from "@lumx/icons/esm/check-circle.js";
-import { mdiClose as Ua } from "@lumx/icons/esm/close.js";
-import { mdiInformation as Ha } from "@lumx/icons/esm/information.js";
-import { mdiArrowDown as Wa } from "@lumx/icons/esm/arrow-down.js";
-import { mdiArrowUp as Va } from "@lumx/icons/esm/arrow-up.js";
-import { mdiImageBroken as Ka } from "@lumx/icons/esm/image-broken.js";
-const ve = {
+import { mdiImageBroken as Fa } from "@lumx/icons/esm/image-broken.js";
+import { mdiAlertCircle as Zr } from "@lumx/icons/esm/alert-circle.js";
+import { getDisabledState as za } from "@lumx/core/js/utils/disabledState";
+import { mdiCheck as Ga } from "@lumx/icons/esm/check.js";
+import { mdiMinus as Ua } from "@lumx/icons/esm/minus.js";
+import { mdiAlert as Ha } from "@lumx/icons/esm/alert.js";
+import { mdiCheckCircle as Wa } from "@lumx/icons/esm/check-circle.js";
+import { mdiClose as Va } from "@lumx/icons/esm/close.js";
+import { mdiInformation as Ka } from "@lumx/icons/esm/information.js";
+import { mdiArrowDown as Ya } from "@lumx/icons/esm/arrow-down.js";
+import { mdiArrowUp as Ja } from "@lumx/icons/esm/arrow-up.js";
+var be = typeof globalThis < "u" ? globalThis : typeof window < "u" ? window : typeof global < "u" ? global : typeof self < "u" ? self : {};
+function Se(e) {
+  return e && e.__esModule && Object.prototype.hasOwnProperty.call(e, "default") ? e.default : e;
+}
+var we = { exports: {} };
+var Vt;
+function Xa() {
+  return Vt || (Vt = 1, (function(e) {
+    (function() {
+      var t = {}.hasOwnProperty;
+      function r() {
+        for (var a = [], n = 0; n < arguments.length; n++) {
+          var s = arguments[n];
+          if (s) {
+            var o = typeof s;
+            if (o === "string" || o === "number")
+              a.push(s);
+            else if (Array.isArray(s)) {
+              if (s.length) {
+                var i = r.apply(null, s);
+                i && a.push(i);
+              }
+            } else if (o === "object") {
+              if (s.toString !== Object.prototype.toString && !s.toString.toString().includes("[native code]")) {
+                a.push(s.toString());
+                continue;
+              }
+              for (var c in s)
+                t.call(s, c) && s[c] && a.push(c);
+            }
+          }
+        }
+        return a.join(" ");
+      }
+      e.exports ? (r.default = r, e.exports = r) : window.classNames = r;
+    })();
+  })(we)), we.exports;
+}
+var Qa = Xa();
+const y = /* @__PURE__ */ Se(Qa);
+function Rt(e, t) {
+  if (!e) return [void 0, t];
+  const [r, a] = e.split("-");
+  return [r, t || a];
+}
+function Za(e, t, r) {
+  const [a, n = xa.N] = Rt(t, r);
+  return `lumx-color-${e}-${a}-${n}`;
+}
+const en = (e, t) => Za("font", e, t);
+function Mt(e) {
+  return `lumx-typography-${e}`;
+}
+function ea(e, t) {
+  const r = [];
+  for (const [a, n] of Object.entries(t))
+    n && r.push(`${e}--${a}`);
+  return r.join(" ");
+}
+function ge(e, t, r) {
+  let a, n;
+  return Array.isArray(t) ? n = t : (a = t, n = r), !a && !n ? e : y(
+    // Additional classes
+    n,
+    // Base class
+    e,
+    // Modifier(s)
+    a ? ea(e, a) : null
+  );
+}
+function Kt(e, t, r, a) {
+  return Array.isArray(r) ? ge(`${e}__${t}`, r) : ge(`${e}__${t}`, r, a);
+}
+function $(e) {
+  function t(a, n) {
+    return Array.isArray(a) ? ge(e, a) : ge(e, a, n);
+  }
+  function r(a, n, s) {
+    return Array.isArray(n) ? Kt(e, a, n) : Kt(e, a, n, s);
+  }
+  return {
+    block: t,
+    element: r,
+    modifier: (a) => ea(e, a)
+  };
+}
+const ye = {
   light: "light",
   dark: "dark"
-}, w = {
+}, E = {
   xxs: "xxs",
   xs: "xs",
   s: "s",
   m: "m",
   xl: "xl",
   xxl: "xxl"
-}, Ya = {
+}, tn = {
   horizontal: "horizontal"
 }, U = {
   low: "low",
   high: "high"
-}, Ja = {
+}, rn = {
   overline: "overline",
   caption: "caption",
   body1: "body1",
@@ -40,8 +126,8 @@ const ve = {
   headline: "headline",
   display1: "display1"
 }, X = {
-  ...Ja
-}, Qr = {
+  ...rn
+}, ta = {
   /** Intrinsic content ratio. */
   original: "original"
 }, q = {
@@ -49,7 +135,7 @@ const ve = {
   success: "success",
   warning: "warning",
   error: "error"
-}, _ = {
+}, x = {
   primary: "primary",
   blue: "blue",
   dark: "dark",
@@ -57,120 +143,505 @@ const ve = {
   yellow: "yellow",
   red: "red",
   light: "light"
+}, an = "lumx-avatar", {
+  block: nn,
+  element: $t
+} = $(an), ra = {
+  size: E.m
+}, sn = (e) => {
+  const {
+    actions: t,
+    badge: r,
+    className: a,
+    image: n,
+    size: s = ra.size,
+    theme: o,
+    ref: i,
+    ...c
+  } = e;
+  return l("div", h({
+    ref: i
+  }, c, {
+    className: y(a, nn({
+      [`size-${s}`]: !!s,
+      [`theme-${o}`]: !!o
+    }))
+  }), [n, t && l("div", {
+    className: $t("actions")
+  }, [t]), r && l("div", {
+    className: $t("badge")
+  }, [r])]);
 };
-var be = typeof globalThis < "u" ? globalThis : typeof window < "u" ? window : typeof global < "u" ? global : typeof self < "u" ? self : {};
-function Se(e) {
-  return e && e.__esModule && Object.prototype.hasOwnProperty.call(e, "default") ? e.default : e;
+function _(e = { defaultTheme: Ea.light }) {
+  const { defaultTheme: t } = e, r = Ot("theme", void 0);
+  return P(() => Pt(r) || t);
 }
-var we = { exports: {} };
-var Wt;
-function Xa() {
-  return Wt || (Wt = 1, (function(e) {
-    (function() {
-      var t = {}.hasOwnProperty;
-      function r() {
-        for (var a = [], n = 0; n < arguments.length; n++) {
-          var s = arguments[n];
-          if (s) {
-            var o = typeof s;
-            if (o === "string" || o === "number")
-              a.push(s);
-            else if (Array.isArray(s)) {
-              if (s.length) {
-                var i = r.apply(null, s);
-                i && a.push(i);
-              }
-            } else if (o === "object") {
-              if (s.toString !== Object.prototype.toString && !s.toString.toString().includes("[native code]")) {
-                a.push(s.toString());
-                continue;
-              }
-              for (var c in s)
-                t.call(s, c) && s[c] && a.push(c);
-            }
-          }
+const N = () => (...e) => e.reduce(
+  (t, r) => (t[r] = { required: !1 }, t),
+  {}
+), on = "Icon", ln = "lumx-icon", aa = ln, {
+  block: cn
+} = $(aa), un = {}, L = (e) => {
+  const {
+    className: t,
+    color: r,
+    colorVariant: a,
+    hasShape: n,
+    icon: s,
+    size: o,
+    ref: i,
+    theme: c,
+    alt: u,
+    verticalAlign: d,
+    ...f
+  } = e, [m, p] = Rt(r, a);
+  let v = m;
+  !v && (n || c) && (v = c === ye.dark ? x.light : x.dark);
+  let b = p;
+  !b && n && v === x.dark && (b = "L2");
+  let A = o;
+  return o && n ? o === E.xxs || o === E.xs ? A = E.s : o === E.xxl && (A = E.xl) : n && (A = E.m), l("i", h({
+    ref: i
+  }, f, {
+    className: y(t, cn({
+      [`color-${v}`]: !!v,
+      [`color-variant-${b}`]: !!b,
+      "has-shape": n,
+      [`theme-${c}`]: !!c,
+      [`size-${A}`]: !!A,
+      "no-shape": !n,
+      "has-dark-layer": !n && v === x.yellow && s === Zr,
+      path: !0,
+      "vertical-align-middle": d === "middle"
+    }))
+  }), [l("svg", {
+    "aria-hidden": u ? void 0 : "true",
+    role: u ? "img" : void 0,
+    "aria-label": u,
+    height: "1em",
+    preserveAspectRatio: "xMidYMid meet",
+    style: {
+      verticalAlign: d ? void 0 : "-0.125em"
+    },
+    viewBox: "0 0 24 24",
+    width: "1em"
+  }, [l("path", {
+    d: s,
+    fill: "currentColor"
+  }, null)])]);
+};
+L.displayName = on;
+L.className = aa;
+L.defaultProps = un;
+function dn(e) {
+  return typeof e == "function" || Object.prototype.toString.call(e) === "[object Object]" && !ae(e);
+}
+const jt = (e) => {
+  const {
+    children: t,
+    handleClick: r,
+    handleKeyPress: a,
+    disabled: n,
+    isDisabled: s = n,
+    "aria-disabled": o,
+    as: i,
+    ...c
+  } = e, u = s || o === "true" || o === !0, d = i;
+  let f;
+  return d === "button" ? f = {
+    type: c.type || "button",
+    disabled: s
+  } : f = {
+    tabIndex: s ? "-1" : c.tabIndex
+  }, l(d, h({
+    "aria-disabled": u || void 0
+  }, c, f, {
+    onKeyPress: a,
+    onClick: (m) => {
+      if (u) {
+        m.stopPropagation(), m.preventDefault();
+        return;
+      }
+      r?.(m);
+    }
+  }), dn(t) ? t : {
+    default: () => [t]
+  });
+};
+function Le(e, t) {
+  return t?.type === "error" || e?.complete && !e.getAttribute("src") ? "hasError" : !e || !e.complete ? "isLoading" : "isLoaded";
+}
+function fn({
+  image: e,
+  aspectRatio: t,
+  focusPoint: r,
+  width: a,
+  height: n,
+  element: s,
+  isLoaded: o
+}) {
+  if (!(!e || t === ta.original || !r?.x && !r?.y)) {
+    if (typeof a == "number" && typeof n == "number")
+      return { width: a, height: n };
+    if (s && o)
+      return { width: s.naturalWidth, height: s.naturalHeight };
+  }
+}
+function Yt({
+  scale: e,
+  focusPoint: t,
+  imageSize: r,
+  containerSize: a
+}) {
+  const n = r / e;
+  if (n === a) return 0;
+  const i = (t * n - a / 2) / (n - a);
+  return Math.floor(Math.max(Math.min(i, 1), 0) * 100);
+}
+function mn({
+  image: e,
+  aspectRatio: t,
+  focusPoint: r,
+  element: a,
+  imageSize: n,
+  containerSize: s
+}) {
+  if (!e || t === ta.original || !r?.x && !r?.y)
+    return {};
+  if (!a || !n)
+    return { visibility: "hidden" };
+  if (!s || !n.height || !n.width)
+    return {};
+  const o = n.height / s.height, i = n.width / s.width, c = Math.min(i, o), u = Math.abs((r?.y || 0) - 1) / 2, d = Yt({
+    scale: c,
+    focusPoint: u,
+    imageSize: n.height,
+    containerSize: s.height
+  }), f = Math.abs((r?.x || 0) + 1) / 2;
+  return { objectPosition: `${Yt({
+    scale: c,
+    focusPoint: f,
+    imageSize: n.width,
+    containerSize: s.width
+  })}% ${d}%` };
+}
+const hn = "lumx-thumbnail", {
+  block: pn,
+  element: re
+} = W.bem(hn), Jt = {
+  fallback: Fa,
+  loading: "lazy"
+}, bn = (e) => {
+  const {
+    align: t,
+    alt: r,
+    aspectRatio: a = Jr.original,
+    badge: n,
+    className: s,
+    crossOrigin: o,
+    ref: i,
+    fallback: c = Jt.fallback,
+    focusPointStyle: u,
+    fillHeight: d,
+    image: f,
+    imgProps: m,
+    imgRef: p,
+    isLoading: v,
+    objectFit: b,
+    loading: A = Jt.loading,
+    loadingPlaceholderImageRef: C,
+    isAnyDisabled: T,
+    disabledStateProps: w,
+    size: O,
+    theme: B,
+    loadingState: z,
+    variant: ue,
+    linkProps: Y,
+    linkAs: de,
+    handleClick: fe,
+    handleKeyPress: k,
+    ...me
+  } = e, I = v || z === "isLoading", he = z === "hasError", pe = he && typeof c == "string", Gt = he && !pe, xe = {};
+  pe ? xe.visibility = "hidden" : Gt && (xe.display = "none");
+  const Ut = !!(Y?.href || de), Ee = !T && !!(Ut || fe || k), Q = {
+    ...me
+  };
+  Ee && (Object.assign(Q, {
+    as: de || (Y?.href ? "a" : "button")
+  }, w), Ut ? Object.assign(Q, Y) : Q["aria-label"] = me["aria-label"] || r);
+  const Ht = W.join(Y?.className, s, pn({
+    [`align-${t}`]: !!t,
+    [`aspect-ratio-${a}`]: !!a,
+    [`size-${O}`]: !!O,
+    [`theme-${B}`]: !!B,
+    [`variant-${ue}`]: !!ue,
+    "is-clickable": Ee,
+    "has-error": he,
+    "has-icon-error-fallback": pe,
+    "has-custom-error-fallback": Gt,
+    "is-loading": I,
+    [`object-fit-${b}`]: !!b,
+    "has-badge": !!n,
+    "fill-height": d
+  })), Z = I && C?.current?.complete && C?.current || void 0, _a = Z ? {
+    backgroundImage: `url(${Z.src})`
+  } : void 0, Wt = l(Ae, null, [l("span", {
+    className: re("background")
+  }, [l("img", h({
+    width: Z?.naturalWidth,
+    height: Z?.naturalHeight
+  }, m, {
+    style: {
+      // Reserve space while loading (when possible)
+      width: I ? m?.width || Z?.naturalWidth : void 0,
+      ...m?.style,
+      ...xe,
+      ...u,
+      ..._a
+    },
+    ref: p,
+    className: W.join(re("image", {
+      "is-loading": I,
+      "has-defined-size": !!(m?.height && m.width)
+    }), m?.className),
+    crossOrigin: o,
+    src: f,
+    alt: r,
+    loading: A
+  }), null), !I && he && l("span", {
+    className: re("fallback")
+  }, [pe ? L({
+    icon: c,
+    size: wa.xxs,
+    theme: B
+  }) : c])]), n]);
+  return Ee ? jt({
+    ref: i,
+    ...Q,
+    className: Ht,
+    children: Wt,
+    handleClick: fe,
+    handleKeyPress: k
+  }) : l("div", h({
+    ref: i
+  }, Q, {
+    className: Ht
+  }), [Wt]);
+}, vn = /* @__PURE__ */ Symbol("DISABLED_STATE_KEY");
+function gn() {
+  return Ot(vn, { state: null });
+}
+function D(e) {
+  const t = gn(), r = P(() => {
+    const s = typeof e == "function" ? e() : Pt(e);
+    return za(t, {
+      disabled: s.disabled,
+      isDisabled: s.isDisabled,
+      "aria-disabled": s["aria-disabled"] ?? s.ariaDisabled
+    });
+  }), a = P(
+    () => r.value["aria-disabled"] || r.value.disabled || void 0
+  ), n = P(() => {
+    const s = typeof e == "function" ? e() : Pt(e), { disabled: o, isDisabled: i, "aria-disabled": c, ariaDisabled: u, onClick: d, onChange: f, ...m } = s;
+    return a.value || (d && (m.onClick = d), f && (m.onChange = f)), m;
+  });
+  return { disabledStateProps: r, isAnyDisabled: a, otherProps: n };
+}
+const Tt = (e) => Xr()?.vnode.props?.[e] !== void 0;
+function yn(e, t) {
+  const r = ne(Le(t.value));
+  H(
+    [e, t],
+    () => {
+      r.value = Le(t.value);
+    },
+    { immediate: !0 }
+  );
+  const a = (n) => {
+    t.value && (r.value = Le(t.value, n));
+  };
+  return H(
+    t,
+    (n, s) => {
+      s && (s.removeEventListener("load", a), s.removeEventListener("error", a)), n && (n.addEventListener("load", a), n.addEventListener("error", a));
+    },
+    { immediate: !0 }
+  ), La(() => {
+    t.value && (t.value.removeEventListener("load", a), t.value.removeEventListener("error", a));
+  }), r;
+}
+function Nn(e) {
+  const { image: t, aspectRatio: r, focusPoint: a, width: n, height: s, element: o, isLoaded: i } = e, c = P(
+    () => fn({
+      image: t.value,
+      aspectRatio: r.value,
+      focusPoint: a.value,
+      width: n.value,
+      height: s.value,
+      element: o.value,
+      isLoaded: i.value
+    })
+  ), u = ne(void 0), d = () => {
+    const m = o.value?.offsetWidth, p = o.value?.offsetHeight;
+    if (m && p) {
+      const v = u.value;
+      (v?.width !== m || v?.height !== p) && (u.value = { width: m, height: p });
+    } else c.value && requestAnimationFrame(d);
+  };
+  return H(
+    [() => o.value?.offsetWidth, () => o.value?.offsetHeight, c],
+    () => {
+      Oa(d);
+    },
+    { immediate: !0 }
+  ), P(
+    () => mn({
+      image: t.value,
+      aspectRatio: r.value,
+      focusPoint: a.value,
+      element: o.value,
+      imageSize: c.value,
+      containerSize: u.value
+    })
+  );
+}
+const An = {
+  click: (e) => e instanceof Event,
+  keyPress: (e) => e instanceof Event
+}, Sn = /* @__PURE__ */ g((e, {
+  emit: t,
+  slots: r
+}) => {
+  const a = S(), n = _(), s = ne(), o = Tt("onClick"), i = Tt("onKeyPress"), {
+    isAnyDisabled: c,
+    disabledStateProps: u,
+    otherProps: d
+  } = D(P(() => ({
+    ...e,
+    ...a
+  }))), f = yn(J(() => e.image), s), m = P(() => f.value === "isLoaded"), p = Nn({
+    image: J(() => e.image),
+    aspectRatio: J(() => e.aspectRatio),
+    focusPoint: J(() => e.focusPoint),
+    width: J(() => typeof e.imgProps?.width == "number" ? e.imgProps.width : void 0),
+    height: J(() => typeof e.imgProps?.height == "number" ? e.imgProps.height : void 0),
+    element: s,
+    isLoaded: m
+  }), v = (A) => {
+    c.value || t("click", A);
+  }, b = (A) => {
+    c.value || t("keyPress", A);
+  };
+  return () => {
+    const A = r.badge?.(), C = r.fallback?.();
+    return l(bn, h(d.value, {
+      className: e.class,
+      theme: e.theme || n.value,
+      isAnyDisabled: c.value,
+      disabledStateProps: u.value,
+      focusPointStyle: p.value,
+      loadingState: f.value,
+      imgRef: s,
+      image: e.image,
+      handleClick: o ? v : void 0,
+      handleKeyPress: i ? b : void 0,
+      fallback: C,
+      badge: A && (Array.isArray(A) ? A.map((T) => ({
+        ...T,
+        props: {
+          ...T.props,
+          class: W.join(re("badge"), T.props?.class)
+        }
+      })) : {
+        ...A,
+        props: {
+          ...A.props,
+          class: W.join(re("badge"), A.props?.class)
         }
-        return a.join(" ");
-      }
-      e.exports ? (r.default = r, e.exports = r) : window.classNames = r;
-    })();
-  })(we)), we.exports;
-}
-var Qa = Xa();
-const N = /* @__PURE__ */ Se(Qa);
-function Bt(e, t) {
-  if (!e) return [void 0, t];
-  const [r, a] = e.split("-");
-  return [r, t || a];
-}
-function Za(e, t, r) {
-  const [a, n = Ta.N] = Bt(t, r);
-  return `lumx-color-${e}-${a}-${n}`;
-}
-const en = (e, t) => Za("font", e, t);
-function Rt(e) {
-  return `lumx-typography-${e}`;
-}
-function Zr(e, t) {
-  const r = [];
-  for (const [a, n] of Object.entries(t))
-    n && r.push(`${e}--${a}`);
-  return r.join(" ");
-}
-function ye(e, t, r) {
-  let a, n;
-  return Array.isArray(t) ? n = t : (a = t, n = r), !a && !n ? e : N(
-    // Additional classes
-    n,
-    // Base class
-    e,
-    // Modifier(s)
-    a ? Zr(e, a) : null
-  );
-}
-function Vt(e, t, r, a) {
-  return Array.isArray(r) ? ye(`${e}__${t}`, r) : ye(`${e}__${t}`, r, a);
-}
-function $(e) {
-  function t(a, n) {
-    return Array.isArray(a) ? ye(e, a) : ye(e, a, n);
-  }
-  function r(a, n, s) {
-    return Array.isArray(n) ? Vt(e, a, n) : Vt(e, a, n, s);
-  }
-  return {
-    block: t,
-    element: r,
-    modifier: (a) => Zr(e, a)
+      })
+    }), null);
   };
-}
-const tn = "Badge", ea = "lumx-badge", {
-  block: rn
-} = $(ea), ta = {
-  color: _.primary
+}, {
+  name: "LumxThumbnail",
+  inheritAttrs: !1,
+  props: N()("align", "alt", "aspectRatio", "class", "crossOrigin", "fillHeight", "focusPoint", "image", "imgProps", "isLoading", "linkAs", "linkProps", "loading", "loadingPlaceholderImageRef", "objectFit", "size", "theme", "variant", "aria-disabled", "aria-label"),
+  emits: An
+}), _i = {
+  squared: "squared",
+  rounded: "rounded"
+}, xi = {
+  cover: "cover",
+  contain: "contain"
+}, Ei = /* @__PURE__ */ g((e, {
+  slots: t
+}) => {
+  const r = S(), a = _();
+  return () => {
+    const {
+      image: n,
+      alt: s,
+      size: o = ra.size,
+      theme: i,
+      linkProps: c,
+      linkAs: u,
+      thumbnailProps: d,
+      class: f
+    } = e, m = i || a.value, {
+      onClick: p,
+      onKeyPress: v,
+      ...b
+    } = {
+      ...r
+    }, A = t.actions?.(), C = t.badge?.();
+    return l(sn, h(b, {
+      className: f,
+      theme: m,
+      size: o,
+      actions: A,
+      badge: C,
+      image: l(Sn, h({
+        linkProps: c,
+        linkAs: u,
+        class: $t("thumbnail"),
+        onClick: p,
+        onKeyPress: v
+      }, d, {
+        aspectRatio: Jr.square,
+        size: o,
+        image: n,
+        alt: s,
+        theme: m
+      }), null)
+    }), null);
+  };
+}, {
+  name: "LumxAvatar",
+  inheritAttrs: !1,
+  props: N()("image", "alt", "size", "theme", "linkProps", "linkAs", "thumbnailProps", "class")
+}), kn = "Badge", na = "lumx-badge", {
+  block: Pn
+} = $(na), sa = {
+  color: x.primary
 }, ke = (e) => {
   const {
     children: t,
     className: r,
-    color: a = ta.color,
+    color: a = sa.color,
     ref: n,
     ...s
   } = e;
   return l("div", h({
     ref: n
   }, s, {
-    className: N(r, rn({
+    className: y(r, Pn({
       [`color-${a}`]: !!a
     }))
   }), [t]);
 };
-ke.displayName = tn;
-ke.className = ea;
-ke.defaultProps = ta;
-const A = () => (...e) => e.reduce(
-  (t, r) => (t[r] = { required: !1 }, t),
-  {}
-), Si = /* @__PURE__ */ v((e, {
+ke.displayName = kn;
+ke.className = na;
+ke.defaultProps = sa;
+const wi = /* @__PURE__ */ g((e, {
   slots: t
 }) => {
   const r = S();
@@ -182,11 +653,11 @@ const A = () => (...e) => e.reduce(
   name: "LumxBadge",
   inheritAttrs: !1,
   // Redefine properties so that they come in as `props` on the `defineComponent` function
-  props: A()("color", "class")
-}), an = "lumx-badge-wrapper", {
-  block: nn,
-  element: sn
-} = $(an), on = (e) => {
+  props: N()("color", "class")
+}), $n = "lumx-badge-wrapper", {
+  block: Tn,
+  element: Cn
+} = $($n), _n = (e) => {
   const {
     badge: t,
     children: r,
@@ -197,15 +668,15 @@ const A = () => (...e) => e.reduce(
   return l("div", h({
     ref: n
   }, s, {
-    className: N(a, nn())
+    className: y(a, Tn())
   }), [r, t && l("div", {
-    className: sn("badge")
+    className: Cn("badge")
   }, [t])]);
-}, ki = /* @__PURE__ */ v((e, {
+}, Li = /* @__PURE__ */ g((e, {
   slots: t
 }) => {
   const r = S();
-  return () => l(on, h(e, r, {
+  return () => l(_n, h(e, r, {
     className: e.class,
     badge: e.badge || t.badge?.(),
     children: t.default?.()
@@ -213,42 +684,42 @@ const A = () => (...e) => e.reduce(
 }, {
   name: "LumxBadgeWrapper",
   inheritAttrs: !1,
-  props: A()("badge", "class")
+  props: N()("badge", "class")
 });
-var Ie, Kt;
-function ra() {
-  if (Kt) return Ie;
-  Kt = 1;
+var Oe, Xt;
+function oa() {
+  if (Xt) return Oe;
+  Xt = 1;
   var e = Object.prototype;
   function t(r) {
     var a = r && r.constructor, n = typeof a == "function" && a.prototype || e;
     return r === n;
   }
-  return Ie = t, Ie;
+  return Oe = t, Oe;
 }
-var Le, Yt;
-function ln() {
-  if (Yt) return Le;
-  Yt = 1;
+var Ie, Qt;
+function xn() {
+  if (Qt) return Ie;
+  Qt = 1;
   function e(t, r) {
     return function(a) {
       return t(r(a));
     };
   }
-  return Le = e, Le;
+  return Ie = e, Ie;
 }
-var Oe, Jt;
-function cn() {
-  if (Jt) return Oe;
-  Jt = 1;
-  var e = ln(), t = e(Object.keys, Object);
-  return Oe = t, Oe;
+var Be, Zt;
+function En() {
+  if (Zt) return Be;
+  Zt = 1;
+  var e = xn(), t = e(Object.keys, Object);
+  return Be = t, Be;
 }
-var Be, Xt;
-function un() {
-  if (Xt) return Be;
-  Xt = 1;
-  var e = ra(), t = cn(), r = Object.prototype, a = r.hasOwnProperty;
+var Re, er;
+function wn() {
+  if (er) return Re;
+  er = 1;
+  var e = oa(), t = En(), r = Object.prototype, a = r.hasOwnProperty;
   function n(s) {
     if (!e(s))
       return t(s);
@@ -257,34 +728,34 @@ function un() {
       a.call(s, i) && i != "constructor" && o.push(i);
     return o;
   }
-  return Be = n, Be;
+  return Re = n, Re;
 }
-var Re, Qt;
-function aa() {
-  if (Qt) return Re;
-  Qt = 1;
+var Me, tr;
+function ia() {
+  if (tr) return Me;
+  tr = 1;
   var e = typeof be == "object" && be && be.Object === Object && be;
-  return Re = e, Re;
+  return Me = e, Me;
 }
-var je, Zt;
-function D() {
-  if (Zt) return je;
-  Zt = 1;
-  var e = aa(), t = typeof self == "object" && self && self.Object === Object && self, r = e || t || Function("return this")();
+var je, rr;
+function F() {
+  if (rr) return je;
+  rr = 1;
+  var e = ia(), t = typeof self == "object" && self && self.Object === Object && self, r = e || t || Function("return this")();
   return je = r, je;
 }
-var Me, er;
-function na() {
-  if (er) return Me;
-  er = 1;
-  var e = D(), t = e.Symbol;
-  return Me = t, Me;
+var qe, ar;
+function la() {
+  if (ar) return qe;
+  ar = 1;
+  var e = F(), t = e.Symbol;
+  return qe = t, qe;
 }
-var qe, tr;
-function dn() {
-  if (tr) return qe;
-  tr = 1;
-  var e = na(), t = Object.prototype, r = t.hasOwnProperty, a = t.toString, n = e ? e.toStringTag : void 0;
+var De, nr;
+function Ln() {
+  if (nr) return De;
+  nr = 1;
+  var e = la(), t = Object.prototype, r = t.hasOwnProperty, a = t.toString, n = e ? e.toStringTag : void 0;
   function s(o) {
     var i = r.call(o, n), c = o[n];
     try {
@@ -295,75 +766,75 @@ function dn() {
     var d = a.call(o);
     return u && (i ? o[n] = c : delete o[n]), d;
   }
-  return qe = s, qe;
+  return De = s, De;
 }
-var De, rr;
-function fn() {
-  if (rr) return De;
-  rr = 1;
+var Fe, sr;
+function On() {
+  if (sr) return Fe;
+  sr = 1;
   var e = Object.prototype, t = e.toString;
   function r(a) {
     return t.call(a);
   }
-  return De = r, De;
+  return Fe = r, Fe;
 }
-var Fe, ar;
+var ze, or;
 function se() {
-  if (ar) return Fe;
-  ar = 1;
-  var e = na(), t = dn(), r = fn(), a = "[object Null]", n = "[object Undefined]", s = e ? e.toStringTag : void 0;
+  if (or) return ze;
+  or = 1;
+  var e = la(), t = Ln(), r = On(), a = "[object Null]", n = "[object Undefined]", s = e ? e.toStringTag : void 0;
   function o(i) {
     return i == null ? i === void 0 ? n : a : s && s in Object(i) ? t(i) : r(i);
   }
-  return Fe = o, Fe;
+  return ze = o, ze;
 }
-var ze, nr;
-function jt() {
-  if (nr) return ze;
-  nr = 1;
+var Ge, ir;
+function qt() {
+  if (ir) return Ge;
+  ir = 1;
   function e(t) {
     var r = typeof t;
     return t != null && (r == "object" || r == "function");
   }
-  return ze = e, ze;
+  return Ge = e, Ge;
 }
-var Ge, sr;
-function sa() {
-  if (sr) return Ge;
-  sr = 1;
-  var e = se(), t = jt(), r = "[object AsyncFunction]", a = "[object Function]", n = "[object GeneratorFunction]", s = "[object Proxy]";
+var Ue, lr;
+function ca() {
+  if (lr) return Ue;
+  lr = 1;
+  var e = se(), t = qt(), r = "[object AsyncFunction]", a = "[object Function]", n = "[object GeneratorFunction]", s = "[object Proxy]";
   function o(i) {
     if (!t(i))
       return !1;
     var c = e(i);
     return c == a || c == n || c == r || c == s;
   }
-  return Ge = o, Ge;
+  return Ue = o, Ue;
 }
-var Ue, or;
-function mn() {
-  if (or) return Ue;
-  or = 1;
-  var e = D(), t = e["__core-js_shared__"];
-  return Ue = t, Ue;
+var He, cr;
+function In() {
+  if (cr) return He;
+  cr = 1;
+  var e = F(), t = e["__core-js_shared__"];
+  return He = t, He;
 }
-var He, ir;
-function hn() {
-  if (ir) return He;
-  ir = 1;
-  var e = mn(), t = (function() {
+var We, ur;
+function Bn() {
+  if (ur) return We;
+  ur = 1;
+  var e = In(), t = (function() {
     var a = /[^.]+$/.exec(e && e.keys && e.keys.IE_PROTO || "");
     return a ? "Symbol(src)_1." + a : "";
   })();
   function r(a) {
     return !!t && t in a;
   }
-  return He = r, He;
+  return We = r, We;
 }
-var We, lr;
-function oa() {
-  if (lr) return We;
-  lr = 1;
+var Ve, dr;
+function ua() {
+  if (dr) return Ve;
+  dr = 1;
   var e = Function.prototype, t = e.toString;
   function r(a) {
     if (a != null) {
@@ -378,13 +849,13 @@ function oa() {
     }
     return "";
   }
-  return We = r, We;
+  return Ve = r, Ve;
 }
-var Ve, cr;
-function pn() {
-  if (cr) return Ve;
-  cr = 1;
-  var e = sa(), t = hn(), r = jt(), a = oa(), n = /[\\^$.*+?()[\]{}|]/g, s = /^\[object .+?Constructor\]$/, o = Function.prototype, i = Object.prototype, c = o.toString, u = i.hasOwnProperty, d = RegExp(
+var Ke, fr;
+function Rn() {
+  if (fr) return Ke;
+  fr = 1;
+  var e = ca(), t = Bn(), r = qt(), a = ua(), n = /[\\^$.*+?()[\]{}|]/g, s = /^\[object .+?Constructor\]$/, o = Function.prototype, i = Object.prototype, c = o.toString, u = i.hasOwnProperty, d = RegExp(
     "^" + c.call(u).replace(n, "\\$&").replace(/hasOwnProperty|(function).*?(?=\\\()| for .+?(?=\\\])/g, "$1.*?") + "$"
   );
   function f(m) {
@@ -393,188 +864,188 @@ function pn() {
     var p = e(m) ? d : s;
     return p.test(a(m));
   }
-  return Ve = f, Ve;
+  return Ke = f, Ke;
 }
-var Ke, ur;
-function bn() {
-  if (ur) return Ke;
-  ur = 1;
+var Ye, mr;
+function Mn() {
+  if (mr) return Ye;
+  mr = 1;
   function e(t, r) {
     return t?.[r];
   }
-  return Ke = e, Ke;
+  return Ye = e, Ye;
 }
-var Ye, dr;
+var Je, hr;
 function oe() {
-  if (dr) return Ye;
-  dr = 1;
-  var e = pn(), t = bn();
+  if (hr) return Je;
+  hr = 1;
+  var e = Rn(), t = Mn();
   function r(a, n) {
     var s = t(a, n);
     return e(s) ? s : void 0;
   }
-  return Ye = r, Ye;
-}
-var Je, fr;
-function gn() {
-  if (fr) return Je;
-  fr = 1;
-  var e = oe(), t = D(), r = e(t, "DataView");
   return Je = r, Je;
 }
-var Xe, mr;
-function vn() {
-  if (mr) return Xe;
-  mr = 1;
-  var e = oe(), t = D(), r = e(t, "Map");
+var Xe, pr;
+function jn() {
+  if (pr) return Xe;
+  pr = 1;
+  var e = oe(), t = F(), r = e(t, "DataView");
   return Xe = r, Xe;
 }
-var Qe, hr;
-function yn() {
-  if (hr) return Qe;
-  hr = 1;
-  var e = oe(), t = D(), r = e(t, "Promise");
+var Qe, br;
+function qn() {
+  if (br) return Qe;
+  br = 1;
+  var e = oe(), t = F(), r = e(t, "Map");
   return Qe = r, Qe;
 }
-var Ze, pr;
-function Nn() {
-  if (pr) return Ze;
-  pr = 1;
-  var e = oe(), t = D(), r = e(t, "Set");
+var Ze, vr;
+function Dn() {
+  if (vr) return Ze;
+  vr = 1;
+  var e = oe(), t = F(), r = e(t, "Promise");
   return Ze = r, Ze;
 }
-var et, br;
-function An() {
-  if (br) return et;
-  br = 1;
-  var e = oe(), t = D(), r = e(t, "WeakMap");
+var et, gr;
+function Fn() {
+  if (gr) return et;
+  gr = 1;
+  var e = oe(), t = F(), r = e(t, "Set");
   return et = r, et;
 }
-var tt, gr;
-function Sn() {
-  if (gr) return tt;
-  gr = 1;
-  var e = gn(), t = vn(), r = yn(), a = Nn(), n = An(), s = se(), o = oa(), i = "[object Map]", c = "[object Object]", u = "[object Promise]", d = "[object Set]", f = "[object WeakMap]", m = "[object DataView]", p = o(e), g = o(t), b = o(r), y = o(a), C = o(n), T = s;
-  return (e && T(new e(new ArrayBuffer(1))) != m || t && T(new t()) != i || r && T(r.resolve()) != u || a && T(new a()) != d || n && T(new n()) != f) && (T = function(E) {
-    var L = s(E), B = L == c ? E.constructor : void 0, z = B ? o(B) : "";
+var tt, yr;
+function zn() {
+  if (yr) return tt;
+  yr = 1;
+  var e = oe(), t = F(), r = e(t, "WeakMap");
+  return tt = r, tt;
+}
+var rt, Nr;
+function Gn() {
+  if (Nr) return rt;
+  Nr = 1;
+  var e = jn(), t = qn(), r = Dn(), a = Fn(), n = zn(), s = se(), o = ua(), i = "[object Map]", c = "[object Object]", u = "[object Promise]", d = "[object Set]", f = "[object WeakMap]", m = "[object DataView]", p = o(e), v = o(t), b = o(r), A = o(a), C = o(n), T = s;
+  return (e && T(new e(new ArrayBuffer(1))) != m || t && T(new t()) != i || r && T(r.resolve()) != u || a && T(new a()) != d || n && T(new n()) != f) && (T = function(w) {
+    var O = s(w), B = O == c ? w.constructor : void 0, z = B ? o(B) : "";
     if (z)
       switch (z) {
         case p:
           return m;
-        case g:
+        case v:
           return i;
         case b:
           return u;
-        case y:
+        case A:
           return d;
         case C:
           return f;
       }
-    return L;
-  }), tt = T, tt;
+    return O;
+  }), rt = T, rt;
 }
-var rt, vr;
+var at, Ar;
 function Pe() {
-  if (vr) return rt;
-  vr = 1;
+  if (Ar) return at;
+  Ar = 1;
   function e(t) {
     return t != null && typeof t == "object";
   }
-  return rt = e, rt;
+  return at = e, at;
 }
-var at, yr;
-function kn() {
-  if (yr) return at;
-  yr = 1;
+var nt, Sr;
+function Un() {
+  if (Sr) return nt;
+  Sr = 1;
   var e = se(), t = Pe(), r = "[object Arguments]";
   function a(n) {
     return t(n) && e(n) == r;
   }
-  return at = a, at;
+  return nt = a, nt;
 }
-var nt, Nr;
-function Pn() {
-  if (Nr) return nt;
-  Nr = 1;
-  var e = kn(), t = Pe(), r = Object.prototype, a = r.hasOwnProperty, n = r.propertyIsEnumerable, s = e(/* @__PURE__ */ (function() {
+var st, kr;
+function Hn() {
+  if (kr) return st;
+  kr = 1;
+  var e = Un(), t = Pe(), r = Object.prototype, a = r.hasOwnProperty, n = r.propertyIsEnumerable, s = e(/* @__PURE__ */ (function() {
     return arguments;
   })()) ? e : function(o) {
     return t(o) && a.call(o, "callee") && !n.call(o, "callee");
   };
-  return nt = s, nt;
+  return st = s, st;
 }
-var st, Ar;
-function ia() {
-  if (Ar) return st;
-  Ar = 1;
+var ot, Pr;
+function da() {
+  if (Pr) return ot;
+  Pr = 1;
   var e = Array.isArray;
-  return st = e, st;
+  return ot = e, ot;
 }
-var ot, Sr;
-function la() {
-  if (Sr) return ot;
-  Sr = 1;
+var it, $r;
+function fa() {
+  if ($r) return it;
+  $r = 1;
   var e = 9007199254740991;
   function t(r) {
     return typeof r == "number" && r > -1 && r % 1 == 0 && r <= e;
   }
-  return ot = t, ot;
+  return it = t, it;
 }
-var it, kr;
-function $n() {
-  if (kr) return it;
-  kr = 1;
-  var e = sa(), t = la();
+var lt, Tr;
+function Wn() {
+  if (Tr) return lt;
+  Tr = 1;
+  var e = ca(), t = fa();
   function r(a) {
     return a != null && t(a.length) && !e(a);
   }
-  return it = r, it;
+  return lt = r, lt;
 }
-var ee = { exports: {} }, lt, Pr;
-function Tn() {
-  if (Pr) return lt;
-  Pr = 1;
+var ee = { exports: {} }, ct, Cr;
+function Vn() {
+  if (Cr) return ct;
+  Cr = 1;
   function e() {
     return !1;
   }
-  return lt = e, lt;
+  return ct = e, ct;
 }
 ee.exports;
-var $r;
-function Cn() {
-  return $r || ($r = 1, (function(e, t) {
-    var r = D(), a = Tn(), n = t && !t.nodeType && t, s = n && !0 && e && !e.nodeType && e, o = s && s.exports === n, i = o ? r.Buffer : void 0, c = i ? i.isBuffer : void 0, u = c || a;
+var _r;
+function Kn() {
+  return _r || (_r = 1, (function(e, t) {
+    var r = F(), a = Vn(), n = t && !t.nodeType && t, s = n && !0 && e && !e.nodeType && e, o = s && s.exports === n, i = o ? r.Buffer : void 0, c = i ? i.isBuffer : void 0, u = c || a;
     e.exports = u;
   })(ee, ee.exports)), ee.exports;
 }
-var ct, Tr;
-function _n() {
-  if (Tr) return ct;
-  Tr = 1;
-  var e = se(), t = la(), r = Pe(), a = "[object Arguments]", n = "[object Array]", s = "[object Boolean]", o = "[object Date]", i = "[object Error]", c = "[object Function]", u = "[object Map]", d = "[object Number]", f = "[object Object]", m = "[object RegExp]", p = "[object Set]", g = "[object String]", b = "[object WeakMap]", y = "[object ArrayBuffer]", C = "[object DataView]", T = "[object Float32Array]", E = "[object Float64Array]", L = "[object Int8Array]", B = "[object Int16Array]", z = "[object Int32Array]", ue = "[object Uint8Array]", Y = "[object Uint8ClampedArray]", de = "[object Uint16Array]", fe = "[object Uint32Array]", k = {};
-  k[T] = k[E] = k[L] = k[B] = k[z] = k[ue] = k[Y] = k[de] = k[fe] = !0, k[a] = k[n] = k[y] = k[s] = k[C] = k[o] = k[i] = k[c] = k[u] = k[d] = k[f] = k[m] = k[p] = k[g] = k[b] = !1;
-  function me(O) {
-    return r(O) && t(O.length) && !!k[e(O)];
+var ut, xr;
+function Yn() {
+  if (xr) return ut;
+  xr = 1;
+  var e = se(), t = fa(), r = Pe(), a = "[object Arguments]", n = "[object Array]", s = "[object Boolean]", o = "[object Date]", i = "[object Error]", c = "[object Function]", u = "[object Map]", d = "[object Number]", f = "[object Object]", m = "[object RegExp]", p = "[object Set]", v = "[object String]", b = "[object WeakMap]", A = "[object ArrayBuffer]", C = "[object DataView]", T = "[object Float32Array]", w = "[object Float64Array]", O = "[object Int8Array]", B = "[object Int16Array]", z = "[object Int32Array]", ue = "[object Uint8Array]", Y = "[object Uint8ClampedArray]", de = "[object Uint16Array]", fe = "[object Uint32Array]", k = {};
+  k[T] = k[w] = k[O] = k[B] = k[z] = k[ue] = k[Y] = k[de] = k[fe] = !0, k[a] = k[n] = k[A] = k[s] = k[C] = k[o] = k[i] = k[c] = k[u] = k[d] = k[f] = k[m] = k[p] = k[v] = k[b] = !1;
+  function me(I) {
+    return r(I) && t(I.length) && !!k[e(I)];
   }
-  return ct = me, ct;
+  return ut = me, ut;
 }
-var ut, Cr;
-function xn() {
-  if (Cr) return ut;
-  Cr = 1;
+var dt, Er;
+function Jn() {
+  if (Er) return dt;
+  Er = 1;
   function e(t) {
     return function(r) {
       return t(r);
     };
   }
-  return ut = e, ut;
+  return dt = e, dt;
 }
 var te = { exports: {} };
 te.exports;
-var _r;
-function En() {
-  return _r || (_r = 1, (function(e, t) {
-    var r = aa(), a = t && !t.nodeType && t, n = a && !0 && e && !e.nodeType && e, s = n && n.exports === a, o = s && r.process, i = (function() {
+var wr;
+function Xn() {
+  return wr || (wr = 1, (function(e, t) {
+    var r = ia(), a = t && !t.nodeType && t, n = a && !0 && e && !e.nodeType && e, s = n && n.exports === a, o = s && r.process, i = (function() {
       try {
         var c = n && n.require && n.require("util").types;
         return c || o && o.binding && o.binding("util");
@@ -584,25 +1055,25 @@ function En() {
     e.exports = i;
   })(te, te.exports)), te.exports;
 }
-var dt, xr;
-function wn() {
-  if (xr) return dt;
-  xr = 1;
-  var e = _n(), t = xn(), r = En(), a = r && r.isTypedArray, n = a ? t(a) : e;
-  return dt = n, dt;
-}
-var ft, Er;
-function In() {
-  if (Er) return ft;
-  Er = 1;
-  var e = un(), t = Sn(), r = Pn(), a = ia(), n = $n(), s = Cn(), o = ra(), i = wn(), c = "[object Map]", u = "[object Set]", d = Object.prototype, f = d.hasOwnProperty;
+var ft, Lr;
+function Qn() {
+  if (Lr) return ft;
+  Lr = 1;
+  var e = Yn(), t = Jn(), r = Xn(), a = r && r.isTypedArray, n = a ? t(a) : e;
+  return ft = n, ft;
+}
+var mt, Or;
+function Zn() {
+  if (Or) return mt;
+  Or = 1;
+  var e = wn(), t = Gn(), r = Hn(), a = da(), n = Wn(), s = Kn(), o = oa(), i = Qn(), c = "[object Map]", u = "[object Set]", d = Object.prototype, f = d.hasOwnProperty;
   function m(p) {
     if (p == null)
       return !0;
     if (n(p) && (a(p) || typeof p == "string" || typeof p.splice == "function" || s(p) || i(p) || r(p)))
       return !p.length;
-    var g = t(p);
-    if (g == c || g == u)
+    var v = t(p);
+    if (v == c || v == u)
       return !p.size;
     if (o(p))
       return !e(p).length;
@@ -611,55 +1082,20 @@ function In() {
         return !1;
     return !0;
   }
-  return ft = m, ft;
-}
-var Ln = In();
-const wr = /* @__PURE__ */ Se(Ln);
-function On(e) {
-  return typeof e == "function" || Object.prototype.toString.call(e) === "[object Object]" && !ae(e);
-}
-const Mt = (e) => {
-  const {
-    children: t,
-    handleClick: r,
-    handleKeyPress: a,
-    disabled: n,
-    isDisabled: s = n,
-    "aria-disabled": o,
-    as: i,
-    ...c
-  } = e, u = s || o === "true" || o === !0, d = i;
-  let f;
-  return d === "button" ? f = {
-    type: c.type || "button",
-    disabled: s
-  } : f = {
-    tabIndex: s ? "-1" : c.tabIndex
-  }, l(d, h({
-    "aria-disabled": u || void 0
-  }, c, f, {
-    onKeyPress: a,
-    onClick: (m) => {
-      if (u) {
-        m.stopPropagation(), m.preventDefault();
-        return;
-      }
-      r?.(m);
-    }
-  }), On(t) ? t : {
-    default: () => [t]
-  });
-}, Bn = "ButtonRoot", Rn = "lumx-button-wrapper", {
-  block: jn
-} = $(Rn), Mn = "lumx-button", {
-  block: qn
-} = $(Mn), Dn = (e) => {
+  return mt = m, mt;
+}
+var es = Zn();
+const Ir = /* @__PURE__ */ Se(es), ts = "ButtonRoot", rs = "lumx-button-wrapper", {
+  block: as
+} = $(rs), ns = "lumx-button", {
+  block: ss
+} = $(ns), os = (e) => {
   const {
     color: t,
     emphasis: r,
     variant: a,
     fullWidth: n
-  } = e, s = r === U.low && (t === _.light ? _.dark : _.light), o = jn({
+  } = e, s = r === U.low && (t === x.light ? x.dark : x.light), o = as({
     [`color-${s}`]: !!s,
     [`variant-${a}`]: !!a,
     "is-full-width": n
@@ -685,21 +1121,21 @@ const Mt = (e) => {
     isHovered: f,
     linkAs: m,
     size: p,
-    theme: g = ve.light,
+    theme: v = ye.light,
     variant: b,
-    fullWidth: y,
+    fullWidth: A,
     ref: C,
     ...T
-  } = e, E = s || o !== U.high && g === ve.dark && _.light || o === U.high && _.primary || _.dark;
+  } = e, w = s || o !== U.high && v === ye.dark && x.light || o === U.high && x.primary || x.dark;
   if (i)
-    return Dn({
+    return os({
       ...e,
       ref: C,
       variant: b,
-      color: E
+      color: w
     });
-  const L = N(n, qn({
-    [`color-${E}`]: !!E,
+  const O = y(n, ss({
+    [`color-${w}`]: !!w,
     [`emphasis-${o}`]: !!o,
     "is-selected": c,
     "is-disabled": !!(e.isDisabled || e["aria-disabled"]),
@@ -707,36 +1143,36 @@ const Mt = (e) => {
     "is-focused": d,
     "is-hovered": f,
     [`size-${p}`]: !!p,
-    [`theme-${g}`]: !!(o === U.high && g),
+    [`theme-${v}`]: !!(o === U.high && v),
     [`variant-${b}`]: !!b,
-    "is-full-width": y
+    "is-full-width": A
   }));
-  return Mt({
+  return jt({
     as: m || (T.href ? "a" : "button"),
     ...T,
     "aria-disabled": r,
     "aria-label": t,
     ref: C,
-    className: L,
+    className: O,
     children: a
   });
 };
-ie.displayName = Bn;
+ie.displayName = ts;
 ie.defaultProps = {};
-const Fn = "Button", ca = "lumx-button", {
-  modifier: zn
-} = $(ca), $t = {
+const is = "Button", ma = "lumx-button", {
+  modifier: ls
+} = $(ma), Ct = {
   emphasis: U.high,
-  size: w.m
+  size: E.m
 }, $e = (e) => {
   const {
     className: t,
-    emphasis: r = $t.emphasis,
+    emphasis: r = Ct.emphasis,
     leftIcon: a,
     rightIcon: n,
-    size: s = $t.size,
+    size: s = Ct.size,
     ...o
-  } = e, i = N(t, zn({
+  } = e, i = y(t, ls({
     "has-left-icon": !!a,
     "has-right-icon": !!n
   }));
@@ -748,97 +1184,19 @@ const Fn = "Button", ca = "lumx-button", {
     variant: "button"
   });
 };
-$e.displayName = Fn;
-$e.className = ca;
-$e.defaultProps = $t;
-function x(e = { defaultTheme: Ca.light }) {
-  const { defaultTheme: t } = e, r = It("theme", void 0);
-  return P(() => Pt(r) || t);
-}
-const Gn = /* @__PURE__ */ Symbol("DISABLED_STATE_KEY");
-function Un() {
-  return It(Gn, { state: null });
-}
-function F(e) {
-  const t = Un(), r = P(() => {
-    const s = typeof e == "function" ? e() : Pt(e);
-    return qa(t, {
-      disabled: s.disabled,
-      isDisabled: s.isDisabled,
-      "aria-disabled": s["aria-disabled"] ?? s.ariaDisabled
-    });
-  }), a = P(
-    () => r.value["aria-disabled"] || r.value.disabled || void 0
-  ), n = P(() => {
-    const s = typeof e == "function" ? e() : Pt(e), { disabled: o, isDisabled: i, "aria-disabled": c, ariaDisabled: u, onClick: d, onChange: f, ...m } = s;
-    return a.value || (d && (m.onClick = d), f && (m.onChange = f)), m;
-  });
-  return { disabledStateProps: r, isAnyDisabled: a, otherProps: n };
-}
-const Ir = v({
+$e.displayName = is;
+$e.className = ma;
+$e.defaultProps = Ct;
+const Br = g({
   name: "ResetTheme",
   setup(e, { slots: t }) {
-    return Yr("theme", void 0), () => t.default?.();
+    return Qr("theme", void 0), () => t.default?.();
   }
-}), Hn = "Icon", Wn = "lumx-icon", ua = Wn, {
-  block: Vn
-} = $(ua), Kn = {}, I = (e) => {
-  const {
-    className: t,
-    color: r,
-    colorVariant: a,
-    hasShape: n,
-    icon: s,
-    size: o,
-    ref: i,
-    theme: c,
-    alt: u,
-    verticalAlign: d,
-    ...f
-  } = e, [m, p] = Bt(r, a);
-  let g = m;
-  !g && (n || c) && (g = c === ve.dark ? _.light : _.dark);
-  let b = p;
-  !b && n && g === _.dark && (b = "L2");
-  let y = o;
-  return o && n ? o === w.xxs || o === w.xs ? y = w.s : o === w.xxl && (y = w.xl) : n && (y = w.m), l("i", h({
-    ref: i
-  }, f, {
-    className: N(t, Vn({
-      [`color-${g}`]: !!g,
-      [`color-variant-${b}`]: !!b,
-      "has-shape": n,
-      [`theme-${c}`]: !!c,
-      [`size-${y}`]: !!y,
-      "no-shape": !n,
-      "has-dark-layer": !n && g === _.yellow && s === Xr,
-      path: !0,
-      "vertical-align-middle": d === "middle"
-    }))
-  }), [l("svg", {
-    "aria-hidden": u ? void 0 : "true",
-    role: u ? "img" : void 0,
-    "aria-label": u,
-    height: "1em",
-    preserveAspectRatio: "xMidYMid meet",
-    style: {
-      verticalAlign: d ? void 0 : "-0.125em"
-    },
-    viewBox: "0 0 24 24",
-    width: "1em"
-  }, [l("path", {
-    d: s,
-    fill: "currentColor"
-  }, null)])]);
-};
-I.displayName = Hn;
-I.className = ua;
-I.defaultProps = Kn;
-const Tt = /* @__PURE__ */ v((e) => {
-  const t = S(), r = x({
+}), _t = /* @__PURE__ */ g((e) => {
+  const t = S(), r = _({
     defaultTheme: void 0
   });
-  return () => l(I, h(e, t, {
+  return () => l(L, h(e, t, {
     className: e.class,
     theme: e.theme || r.value
   }), null);
@@ -846,10 +1204,10 @@ const Tt = /* @__PURE__ */ v((e) => {
   name: "Icon",
   inheritAttrs: !1,
   // Redefine properties so that they come in as `props` on the `defineComponent` function
-  props: A()("icon", "color", "colorVariant", "hasShape", "size", "alt", "verticalAlign", "theme", "class")
-}), Yn = "lumx-text", {
-  block: Jn
-} = $(Yn), Xn = (e) => {
+  props: N()("icon", "color", "colorVariant", "hasShape", "size", "alt", "verticalAlign", "theme", "class")
+}), cs = "lumx-text", {
+  block: us
+} = $(cs), ds = (e) => {
   const {
     className: t,
     color: r,
@@ -865,11 +1223,11 @@ const Tt = /* @__PURE__ */ v((e) => {
     "--lumx-text-white-space": i
   };
   return {
-    className: N(t, Jn({
+    className: y(t, us({
       "is-truncated": f && !d,
       "is-truncated-multiline": d,
       "no-wrap": n
-    }), s && Rt(s), r && en(r, a)),
+    }), s && Mt(s), r && en(r, a)),
     style: {
       ...u,
       ...m,
@@ -877,40 +1235,40 @@ const Tt = /* @__PURE__ */ v((e) => {
     }
   };
 };
-function da(e, t) {
-  return Ea() ? (wa(e, t), !0) : !1;
+function ha(e, t) {
+  return Ia() ? (Ba(e, t), !0) : !1;
 }
-const Qn = typeof window < "u" && typeof document < "u";
+const fs = typeof window < "u" && typeof document < "u";
 typeof WorkerGlobalScope < "u" && globalThis instanceof WorkerGlobalScope;
-const Zn = (e) => e != null;
-function es(e) {
+const ms = (e) => e != null;
+function hs(e) {
   return Array.isArray(e) ? e : [e];
 }
-const fa = Qn ? window : void 0;
-function Ct(e) {
+const pa = fs ? window : void 0;
+function xt(e) {
   var t;
-  const r = Lt(e);
+  const r = It(e);
   return (t = r?.$el) !== null && t !== void 0 ? t : r;
 }
 // @__NO_SIDE_EFFECTS__
-function ts() {
-  const e = Ia(!1), t = Jr();
-  return t && La(() => {
+function ps() {
+  const e = Ra(!1), t = Xr();
+  return t && Ma(() => {
     e.value = !0;
   }, t), e;
 }
 // @__NO_SIDE_EFFECTS__
-function ma(e) {
-  const t = /* @__PURE__ */ ts();
+function ba(e) {
+  const t = /* @__PURE__ */ ps();
   return P(() => (t.value, !!e()));
 }
-function rs(e, t, r = {}) {
-  const { window: a = fa, ...n } = r;
+function bs(e, t, r = {}) {
+  const { window: a = pa, ...n } = r;
   let s;
-  const o = /* @__PURE__ */ ma(() => a && "MutationObserver" in a), i = () => {
+  const o = /* @__PURE__ */ ba(() => a && "MutationObserver" in a), i = () => {
     s && (s.disconnect(), s = void 0);
   }, c = H(P(() => {
-    const f = es(Lt(e)).map(Ct).filter(Zn);
+    const f = hs(It(e)).map(xt).filter(ms);
     return new Set(f);
   }), (f) => {
     i(), o.value && f.size && (s = new MutationObserver(t), f.forEach((m) => s.observe(m, n)));
@@ -920,20 +1278,20 @@ function rs(e, t, r = {}) {
   }), u = () => s?.takeRecords(), d = () => {
     c(), i();
   };
-  return da(d), {
+  return ha(d), {
     isSupported: o,
     stop: d,
     takeRecords: u
   };
 }
-function as(e, t, r = {}) {
-  const { window: a = fa, ...n } = r;
+function vs(e, t, r = {}) {
+  const { window: a = pa, ...n } = r;
   let s;
-  const o = /* @__PURE__ */ ma(() => a && "ResizeObserver" in a), i = () => {
+  const o = /* @__PURE__ */ ba(() => a && "ResizeObserver" in a), i = () => {
     s && (s.disconnect(), s = void 0);
   }, c = H(P(() => {
-    const d = Lt(e);
-    return Array.isArray(d) ? d.map((f) => Ct(f)) : [Ct(d)];
+    const d = It(e);
+    return Array.isArray(d) ? d.map((f) => xt(f)) : [xt(d)];
   }), (d) => {
     if (i(), o.value && a) {
       s = new ResizeObserver(t);
@@ -945,31 +1303,31 @@ function as(e, t, r = {}) {
   }), u = () => {
     i(), c();
   };
-  return da(u), {
+  return ha(u), {
     isSupported: o,
     stop: u
   };
 }
-function ns(e) {
+function gs(e) {
   const t = ne(void 0), r = () => {
     const a = e.value;
     a && !a.closest(`.${W.visuallyHidden()}`) && a.offsetWidth < a.scrollWidth ? t.value = a.innerText : t.value = void 0;
   };
-  return rs(e, r, {
+  return bs(e, r, {
     childList: !0,
     attributes: !0,
     characterData: !0,
     subtree: !0
-  }), as(e, r), H(e, r, { immediate: !0 }), { tooltipLabel: t };
+  }), vs(e, r), H(e, r, { immediate: !0 }), { tooltipLabel: t };
 }
-const ss = (e = "default") => {
-  const t = Ot();
+const ys = (e = "default") => {
+  const t = Bt();
   return () => {
     const r = t?.[e];
     return r ? r() : null;
   };
 };
-function _t(e) {
+function Et(e) {
   if (!e) return;
   const t = [];
   for (const r of e) {
@@ -977,17 +1335,17 @@ function _t(e) {
       t.push(r);
       continue;
     }
-    if (r.type === Tt) {
+    if (r.type === _t) {
       t.push(" "), t.push(r), t.push(" ");
       continue;
     }
     if (r.type === Ae && Array.isArray(r.children)) {
-      const a = _t(r.children);
+      const a = Et(r.children);
       a && t.push(...a);
       continue;
     }
     if (typeof r.type == "string" && Array.isArray(r.children)) {
-      const a = _t(r.children), n = { ...r.props || {} };
+      const a = Et(r.children), n = { ...r.props || {} };
       r.key != null && (n.key = r.key), r.ref != null && (n.ref = r.ref), t.push(l(r.type, n, a));
       continue;
     }
@@ -995,15 +1353,15 @@ function _t(e) {
   }
   return t;
 }
-function os(e) {
+function Ns(e) {
   return typeof e == "function" || Object.prototype.toString.call(e) === "[object Object]" && !ae(e);
 }
-const qt = /* @__PURE__ */ v((e, {
+const Dt = /* @__PURE__ */ g((e, {
   slots: t
 }) => {
-  const r = S(), a = ss(), n = Oa("tooltip-label"), {
+  const r = S(), a = ys(), n = ja("tooltip-label"), {
     tooltipLabel: s
-  } = ns(n), o = P(() => Xn({
+  } = gs(n), o = P(() => ds({
     ...e,
     className: e.class || r.class || r.className
   })), i = P(() => {
@@ -1017,14 +1375,14 @@ const qt = /* @__PURE__ */ v((e, {
     };
   });
   return () => {
-    const c = e.as || "div", u = a() || t.default?.(), d = u ? _t(u) : null;
+    const c = e.as || "div", u = a() || t.default?.(), d = u ? Et(u) : null;
     return l(c, h({
       ref: "tooltip-label"
     }, i.value, {
       class: i.value.className,
       style: i.value.style,
       title: s.value
-    }), os(d) ? d : {
+    }), Ns(d) ? d : {
       default: () => [d]
     });
   };
@@ -1032,32 +1390,32 @@ const qt = /* @__PURE__ */ v((e, {
   name: "LumxText",
   inheritAttrs: !1,
   // Redefine properties so that they come in as `props` on the `defineComponent` function
-  props: A()("as", "color", "colorVariant", "typography", "truncate", "noWrap", "whiteSpace", "style", "class")
-}), is = {
+  props: N()("as", "color", "colorVariant", "typography", "truncate", "noWrap", "whiteSpace", "style", "class")
+}), As = {
   click: (e) => e instanceof MouseEvent
-}, Pi = /* @__PURE__ */ v((e, {
+}, Oi = /* @__PURE__ */ g((e, {
   emit: t
 }) => {
-  const r = Ot(), a = S(), n = x(), {
+  const r = Bt(), a = S(), n = _(), {
     isAnyDisabled: s,
     disabledStateProps: o,
     otherProps: i
-  } = F(P(() => ({
+  } = D(P(() => ({
     ...e,
     ...a
   }))), c = (d) => {
-    s.value || (d.stopImmediatePropagation(), t("click", d));
+    s.value || t("click", d);
   }, u = () => {
     const d = r.default?.();
-    return !d || d.length === 0 ? null : d.length === 1 && d[0].type === qt ? d[0] : l("span", null, [d]);
+    return !d || d.length === 0 ? null : d.length === 1 && d[0].type === Dt ? d[0] : l("span", null, [d]);
   };
   return () => {
-    const d = l(Ae, null, [e.leftIcon && !wr(e.leftIcon) && l(Ir, null, {
-      default: () => [l(Tt, {
+    const d = l(Ae, null, [e.leftIcon && !Ir(e.leftIcon) && l(Br, null, {
+      default: () => [l(_t, {
         icon: e.leftIcon
       }, null)]
-    }), u(), e.rightIcon && !wr(e.rightIcon) && l(Ir, null, {
-      default: () => [l(Tt, {
+    }), u(), e.rightIcon && !Ir(e.rightIcon) && l(Br, null, {
+      default: () => [l(_t, {
         icon: e.rightIcon
       }, null)]
     })]);
@@ -1072,23 +1430,23 @@ const qt = /* @__PURE__ */ v((e, {
   name: "LumxButton",
   inheritAttrs: !1,
   // Redefine properties so that they come in as `props` on the `defineComponent` function
-  props: A()("leftIcon", "rightIcon", "color", "emphasis", "hasBackground", "href", "isDisabled", "isSelected", "name", "size", "theme", "class", "aria-expanded", "aria-disabled", "aria-haspopup", "aria-label", "aria-pressed", "disabled", "fullWidth", "isActive", "isFocused", "isHovered", "linkAs", "target", "type"),
-  emits: is
-}), ls = "IconButton", cs = "lumx-icon-button", xt = {
+  props: N()("leftIcon", "rightIcon", "color", "emphasis", "hasBackground", "href", "isDisabled", "isSelected", "name", "size", "theme", "class", "aria-expanded", "aria-disabled", "aria-haspopup", "aria-label", "aria-pressed", "disabled", "fullWidth", "isActive", "isFocused", "isHovered", "linkAs", "target", "type"),
+  emits: As
+}), Ss = "IconButton", ks = "lumx-icon-button", wt = {
   emphasis: U.high,
-  size: w.m
+  size: E.m
 }, le = (e) => {
   const {
-    emphasis: t = xt.emphasis,
+    emphasis: t = wt.emphasis,
     image: r,
     icon: a,
     label: n,
-    size: s = xt.size,
+    size: s = wt.size,
     ...o
   } = e, i = r ? l("img", {
     alt: "",
     src: r
-  }, null) : I({
+  }, null) : L({
     icon: a
   });
   return ie({
@@ -1100,23 +1458,23 @@ const qt = /* @__PURE__ */ v((e, {
     children: i
   });
 };
-le.displayName = ls;
-le.className = cs;
-le.defaultProps = xt;
-const us = {
+le.displayName = Ss;
+le.className = ks;
+le.defaultProps = wt;
+const Ps = {
   click: (e) => e instanceof MouseEvent
-}, $i = /* @__PURE__ */ v((e, {
+}, Ii = /* @__PURE__ */ g((e, {
   emit: t
 }) => {
-  const r = S(), a = x(), {
+  const r = S(), a = _(), {
     isAnyDisabled: n,
     disabledStateProps: s,
     otherProps: o
-  } = F(P(() => ({
+  } = D(P(() => ({
     ...e,
     ...r
   }))), i = (c) => {
-    n.value || (c.stopImmediatePropagation(), t("click", c));
+    n.value || t("click", c);
   };
   return () => l(le, h(o.value, s.value, {
     className: e.class,
@@ -1129,22 +1487,22 @@ const us = {
   name: "IconButton",
   inheritAttrs: !1,
   // Redefine properties so that they come in as `props` on the `defineComponent` function
-  props: A()("icon", "image", "color", "label", "emphasis", "hasBackground", "href", "isDisabled", "isSelected", "name", "size", "theme", "class", "aria-expanded", "aria-disabled", "aria-haspopup", "aria-label", "aria-pressed", "disabled", "fullWidth", "isActive", "isFocused", "isHovered", "isDisabled", "linkAs", "target", "type", "title"),
-  emits: us
-}), ds = "ButtonGroup", ha = "lumx-button-group", fs = {}, Te = (e) => {
+  props: N()("icon", "image", "color", "label", "emphasis", "hasBackground", "href", "isDisabled", "isSelected", "name", "size", "theme", "class", "aria-expanded", "aria-disabled", "aria-haspopup", "aria-label", "aria-pressed", "disabled", "fullWidth", "isActive", "isFocused", "isHovered", "isDisabled", "linkAs", "target", "type", "title"),
+  emits: Ps
+}), $s = "ButtonGroup", va = "lumx-button-group", Ts = {}, Te = (e) => {
   const {
     children: t,
     className: r,
     ...a
   } = e;
   return l("div", h(a, {
-    className: N(r, ha)
+    className: y(r, va)
   }), [t]);
 };
-Te.displayName = ds;
-Te.className = ha;
-Te.defaultProps = fs;
-const Ti = /* @__PURE__ */ v((e, {
+Te.displayName = $s;
+Te.className = va;
+Te.defaultProps = Ts;
+const Bi = /* @__PURE__ */ g((e, {
   slots: t
 }) => {
   const r = S();
@@ -1156,10 +1514,10 @@ const Ti = /* @__PURE__ */ v((e, {
   name: "ButtonGroup",
   inheritAttrs: !1,
   // Redefine properties so that they come in as `props` on the `defineComponent` function
-  props: A()("class")
-}), ms = "InputLabel", hs = "lumx-input-label", pa = hs, {
-  block: ps
-} = $(pa), bs = {};
+  props: N()("class")
+}), Cs = "InputLabel", _s = "lumx-input-label", ga = _s, {
+  block: xs
+} = $(ga), Es = {};
 function V(e) {
   const {
     children: t,
@@ -1175,52 +1533,52 @@ function V(e) {
     ref: i
   }, c, {
     htmlFor: a,
-    className: N(r, ps({
+    className: y(r, xs({
       "is-required": n,
       [`theme-${s}`]: !!s,
       "has-custom-typography": !!o
-    }), o && Rt(o))
+    }), o && Mt(o))
   }), [t]);
 }
-V.displayName = ms;
-V.className = pa;
-V.defaultProps = bs;
-const gs = {
+V.displayName = Cs;
+V.className = ga;
+V.defaultProps = Es;
+const ws = {
   [q.error]: { color: "red" },
   [q.success]: { color: "green" },
   [q.warning]: { color: "yellow" }
-}, vs = "InputHelper", ys = "lumx-input-helper", ba = ys, {
-  block: Ns
-} = $(ba), ga = {
+}, Ls = "InputHelper", Os = "lumx-input-helper", ya = Os, {
+  block: Is
+} = $(ya), Na = {
   kind: q.info
 };
 function K(e) {
   const {
     children: t,
     className: r,
-    kind: a = ga.kind,
+    kind: a = Na.kind,
     theme: n,
     ref: s,
     ...o
   } = e, {
     color: i
-  } = gs[a] || {};
+  } = ws[a] || {};
   return l("p", h({
     ref: s
   }, o, {
-    className: N(r, Ns({
+    className: y(r, Is({
       [`color-${i}`]: !!i,
       [`theme-${n}`]: !!n
     }))
   }), [t]);
 }
-K.displayName = vs;
-K.className = ba;
-K.defaultProps = ga;
-const va = "intermediate", As = "lumx-checkbox", {
-  block: Ss,
+K.displayName = Ls;
+K.className = ya;
+K.defaultProps = Na;
+const Aa = "intermediate", Bs = "lumx-checkbox", {
+  block: Rs,
   element: R
-} = $(As), ks = (e) => {
+} = $(Bs), Ms = (e) => {
   const {
     checked: t,
     className: r,
@@ -1235,19 +1593,19 @@ const va = "intermediate", As = "lumx-checkbox", {
     theme: f,
     value: m,
     inputProps: p = {},
-    isDisabled: g,
+    isDisabled: v,
     inputId: b,
-    ...y
-  } = e, C = o === va, T = (E) => {
-    d && d(!o, m, c, E);
+    ...A
+  } = e, C = o === Aa, T = (w) => {
+    d && d(!o, m, c, w);
   };
   return l("div", h({
     ref: u
-  }, y, {
-    className: N(r, Ss({
+  }, A, {
+    className: y(r, Rs({
       // Whether state is intermediate class name will "-checked"
       "is-checked": C ? !0 : o,
-      "is-disabled": g,
+      "is-disabled": v,
       "is-unchecked": !o,
       [`theme-${f}`]: !!f
     }))
@@ -1272,8 +1630,8 @@ const va = "intermediate", As = "lumx-checkbox", {
     className: R("input-background")
   }, null), l("div", {
     className: R("input-indicator")
-  }, [I({
-    icon: C ? Fa : Da
+  }, [L({
+    icon: C ? Ua : Ga
   })])])]), l("div", {
     className: R("content")
   }, [i && V({
@@ -1288,32 +1646,32 @@ const va = "intermediate", As = "lumx-checkbox", {
     children: a
   })])]);
 };
-let Lr = 0;
-function Dt() {
-  return Lr += 1, `:lumx${Lr}:`;
+let Rr = 0;
+function Ft() {
+  return Rr += 1, `:lumx${Rr}:`;
 }
-const Ps = {
+const js = {
   change: (e, t, r, a) => typeof e == "boolean" && a instanceof Event
-}, Ci = /* @__PURE__ */ v((e, {
+}, Ri = /* @__PURE__ */ g((e, {
   emit: t
 }) => {
-  const r = S(), a = x(), n = Dt(), s = P(() => e.id || n), o = ne(null), {
+  const r = S(), a = _(), n = Ft(), s = P(() => e.id || n), o = ne(null), {
     isAnyDisabled: i,
     disabledStateProps: c,
     otherProps: u
-  } = F(P(() => ({
+  } = D(P(() => ({
     ...e,
     ...r
-  }))), d = P(() => e.isChecked === va);
+  }))), d = P(() => e.isChecked === Aa);
   H(d, (m) => {
     o.value && (o.value.indeterminate = m);
   }, {
     immediate: !0
   });
-  const f = (m, p, g, b) => {
-    i.value || (b?.stopImmediatePropagation?.(), t("change", m, p, g, b));
+  const f = (m, p, v, b) => {
+    i.value || t("change", m, p, v, b);
   };
-  return () => l(ks, h(u.value, {
+  return () => l(Ms, h(u.value, {
     className: e.class,
     theme: e.theme || a.value,
     inputId: s.value,
@@ -1331,11 +1689,11 @@ const Ps = {
   name: "Checkbox",
   inheritAttrs: !1,
   // Redefine properties so that they come in as `props` on the `defineComponent` function
-  props: A()("checked", "class", "disabled", "helper", "id", "inputProps", "isChecked", "isDisabled", "label", "name", "theme", "value", "aria-disabled"),
-  emits: Ps
-}), $s = "lumx-divider", {
-  block: Ts
-} = $($s), Cs = (e) => {
+  props: N()("checked", "class", "disabled", "helper", "id", "inputProps", "isChecked", "isDisabled", "label", "name", "theme", "value", "aria-disabled"),
+  emits: js
+}), qs = "lumx-divider", {
+  block: Ds
+} = $(qs), Fs = (e) => {
   const {
     className: t,
     theme: r,
@@ -1345,13 +1703,13 @@ const Ps = {
   return l("hr", h({
     ref: a
   }, n, {
-    className: N(t, Ts({
+    className: y(t, Ds({
       [`theme-${r}`]: !!r
     }))
   }), null);
-}, _i = /* @__PURE__ */ v((e) => {
-  const t = S(), r = x();
-  return () => l(Cs, h(t, e, {
+}, Mi = /* @__PURE__ */ g((e) => {
+  const t = S(), r = _();
+  return () => l(Fs, h(t, e, {
     className: e.class,
     theme: e.theme || r.value
   }), null);
@@ -1359,15 +1717,15 @@ const Ps = {
   name: "LumxDivider",
   inheritAttrs: !1,
   // Redefine properties so that they come in as `props` on the `defineComponent` function
-  props: A()("class", "theme")
+  props: N()("class", "theme")
 });
-function _s(e) {
+function zs(e) {
   return typeof e == "function" || Object.prototype.toString.call(e) === "[object Object]" && !ae(e);
 }
-const xs = "lumx-flag", {
-  block: Es,
-  element: Or
-} = $(xs), ws = (e) => {
+const Gs = "lumx-flag", {
+  block: Us,
+  element: Mr
+} = $(Gs), Hs = (e) => {
   const {
     children: t,
     icon: r,
@@ -1377,58 +1735,58 @@ const xs = "lumx-flag", {
     truncate: o,
     Text: i,
     ...c
-  } = e, u = a || (s === ve.light ? _.dark : _.light), d = !!o;
+  } = e, u = a || (s === ye.light ? x.dark : x.light), d = !!o;
   return l("div", h(c, {
-    className: N(n, Es({
+    className: y(n, Us({
       [`color-${u}`]: !!u,
       "is-truncated": d
     }))
-  }), [r && I({
+  }), [r && L({
     icon: r,
-    size: w.xxs,
-    className: Or("icon")
+    size: E.xxs,
+    className: Mr("icon")
   }), l(i, {
     as: "span",
     truncate: !!o,
     typography: "overline",
-    className: Or("label")
-  }, _s(t) ? t : {
+    className: Mr("label")
+  }, zs(t) ? t : {
     default: () => [t]
   })]);
-}, xi = /* @__PURE__ */ v((e, {
+}, ji = /* @__PURE__ */ g((e, {
   slots: t
 }) => {
-  const r = S(), a = x();
-  return () => l(ws, h(e, r, {
+  const r = S(), a = _();
+  return () => l(Hs, h(e, r, {
     className: e.class,
     theme: e.theme || a.value,
     children: t.default?.(),
-    Text: qt
+    Text: Dt
   }), null);
 }, {
   name: "Flag",
   inheritAttrs: !1,
   // Redefine properties so that they come in as `props` on the `defineComponent` function
-  props: A()("color", "icon", "truncate", "theme", "class")
+  props: N()("color", "icon", "truncate", "theme", "class")
 });
-var mt, Br;
-function Is() {
-  if (Br) return mt;
-  Br = 1;
-  var e = ia();
+var ht, jr;
+function Ws() {
+  if (jr) return ht;
+  jr = 1;
+  var e = da();
   function t() {
     if (!arguments.length)
       return [];
     var r = arguments[0];
     return e(r) ? r : [r];
   }
-  return mt = t, mt;
+  return ht = t, ht;
 }
-var Ls = Is();
-const Os = /* @__PURE__ */ Se(Ls), Bs = "lumx-flex-box", {
-  block: Rs
-} = $(Bs);
-function js(e) {
+var Vs = Ws();
+const Ks = /* @__PURE__ */ Se(Vs), Ys = "lumx-flex-box", {
+  block: Js
+} = $(Ys);
+function Xs(e) {
   const {
     className: t,
     fillSpace: r,
@@ -1440,10 +1798,10 @@ function js(e) {
     wrap: c,
     orientation: u,
     ...d
-  } = e, f = u ?? (c || n || i ? Ya.horizontal : null);
+  } = e, f = u ?? (c || n || i ? tn.horizontal : null);
   return {
     ...d,
-    className: N(t, Rs({
+    className: y(t, Js({
       [`orientation-${f}`]: !!f,
       [`v-align-${i}`]: !!i,
       [`h-align-${n}`]: !!n,
@@ -1451,19 +1809,21 @@ function js(e) {
       wrap: !!c,
       "fill-space": r,
       "no-shrink": o,
-      ...Object.fromEntries(Os(s).filter(Boolean).map((m) => [`margin-auto-${m}`, !0]))
+      ...Object.fromEntries(Ks(s).filter(Boolean).map((m) => [`margin-auto-${m}`, !0]))
     }))
   };
 }
-const Ei = /* @__PURE__ */ v((e, {
+const qi = /* @__PURE__ */ g((e, {
   slots: t
 }) => {
   const r = S();
   return () => {
-    const a = e.as || "div", n = js({
+    const a = e.as || "div", n = Xs({
       ...e,
       ...r,
-      className: e.class
+      className: e.class,
+      vAlign: e.verticalAlign,
+      hAlign: e.horizontalAlign
     });
     return l(a, n, {
       default: () => [t.default?.()]
@@ -1473,45 +1833,45 @@ const Ei = /* @__PURE__ */ v((e, {
   name: "FlexBox",
   inheritAttrs: !1,
   // Redefine properties so that they come in as `props` on the `defineComponent` function
-  props: A()("as", "fillSpace", "gap", "hAlign", "marginAuto", "noShrink", "orientation", "vAlign", "wrap", "class")
+  props: N()("as", "fillSpace", "gap", "horizontalAlign", "marginAuto", "noShrink", "orientation", "verticalAlign", "wrap", "class")
 });
-var ht, Rr;
-function Ms() {
-  if (Rr) return ht;
-  Rr = 1;
+var pt, qr;
+function Qs() {
+  if (qr) return pt;
+  qr = 1;
   var e = /\s/;
   function t(r) {
     for (var a = r.length; a-- && e.test(r.charAt(a)); )
       ;
     return a;
   }
-  return ht = t, ht;
+  return pt = t, pt;
 }
-var pt, jr;
-function qs() {
-  if (jr) return pt;
-  jr = 1;
-  var e = Ms(), t = /^\s+/;
+var bt, Dr;
+function Zs() {
+  if (Dr) return bt;
+  Dr = 1;
+  var e = Qs(), t = /^\s+/;
   function r(a) {
     return a && a.slice(0, e(a) + 1).replace(t, "");
   }
-  return pt = r, pt;
+  return bt = r, bt;
 }
-var bt, Mr;
-function Ds() {
-  if (Mr) return bt;
-  Mr = 1;
+var vt, Fr;
+function eo() {
+  if (Fr) return vt;
+  Fr = 1;
   var e = se(), t = Pe(), r = "[object Symbol]";
   function a(n) {
     return typeof n == "symbol" || t(n) && e(n) == r;
   }
-  return bt = a, bt;
+  return vt = a, vt;
 }
-var gt, qr;
-function Fs() {
-  if (qr) return gt;
-  qr = 1;
-  var e = qs(), t = jt(), r = Ds(), a = NaN, n = /^[-+]0x[0-9a-f]+$/i, s = /^0b[01]+$/i, o = /^0o[0-7]+$/i, i = parseInt;
+var gt, zr;
+function to() {
+  if (zr) return gt;
+  zr = 1;
+  var e = Zs(), t = qt(), r = eo(), a = NaN, n = /^[-+]0x[0-9a-f]+$/i, s = /^0b[01]+$/i, o = /^0o[0-7]+$/i, i = parseInt;
   function c(u) {
     if (typeof u == "number")
       return u;
@@ -1529,11 +1889,11 @@ function Fs() {
   }
   return gt = c, gt;
 }
-var vt, Dr;
-function zs() {
-  if (Dr) return vt;
-  Dr = 1;
-  var e = Fs(), t = 1 / 0, r = 17976931348623157e292;
+var yt, Gr;
+function ro() {
+  if (Gr) return yt;
+  Gr = 1;
+  var e = to(), t = 1 / 0, r = 17976931348623157e292;
   function a(n) {
     if (!n)
       return n === 0 ? n : 0;
@@ -1543,35 +1903,35 @@ function zs() {
     }
     return n === n ? n : 0;
   }
-  return vt = a, vt;
+  return yt = a, yt;
 }
-var yt, Fr;
-function Gs() {
-  if (Fr) return yt;
-  Fr = 1;
-  var e = zs();
+var Nt, Ur;
+function ao() {
+  if (Ur) return Nt;
+  Ur = 1;
+  var e = ro();
   function t(r) {
     var a = e(r), n = a % 1;
     return a === a ? n ? a - n : a : 0;
   }
-  return yt = t, yt;
+  return Nt = t, Nt;
 }
-var Nt, zr;
-function Us() {
-  if (zr) return Nt;
-  zr = 1;
-  var e = Gs();
+var At, Hr;
+function no() {
+  if (Hr) return At;
+  Hr = 1;
+  var e = ao();
   function t(r) {
     return typeof r == "number" && r == e(r);
   }
-  return Nt = t, Nt;
+  return At = t, At;
 }
-var Hs = Us();
-const Ws = /* @__PURE__ */ Se(Hs);
-function Vs(e) {
+var so = no();
+const oo = /* @__PURE__ */ Se(so);
+function io(e) {
   return typeof e == "function" || Object.prototype.toString.call(e) === "[object Object]" && !ae(e);
 }
-const Ks = "GridColumn", ya = "lumx-grid-column", Ys = {}, Ce = (e) => {
+const lo = "GridColumn", Sa = "lumx-grid-column", co = {}, Ce = (e) => {
   const {
     as: t = "div",
     gap: r,
@@ -1585,21 +1945,21 @@ const Ks = "GridColumn", ya = "lumx-grid-column", Ys = {}, Ce = (e) => {
   } = e;
   return l(t, h(u, {
     ref: c,
-    className: N(o, ya),
+    className: y(o, Sa),
     style: {
       ...i,
-      "--lumx-grid-column-item-min-width": Ws(n) && `${n}px`,
+      "--lumx-grid-column-item-min-width": oo(n) && `${n}px`,
       "--lumx-grid-column-columns": a,
       "--lumx-grid-column-gap": r && `var(--lumx-spacing-unit-${r})`
     }
-  }), Vs(s) ? s : {
+  }), io(s) ? s : {
     default: () => [s]
   });
 };
-Ce.displayName = Ks;
-Ce.className = ya;
-Ce.defaultProps = Ys;
-const wi = /* @__PURE__ */ v((e, {
+Ce.displayName = lo;
+Ce.className = Sa;
+Ce.defaultProps = co;
+const Di = /* @__PURE__ */ g((e, {
   slots: t
 }) => {
   const r = S();
@@ -1610,30 +1970,30 @@ const wi = /* @__PURE__ */ v((e, {
 }, {
   name: "LumxGridColumn",
   inheritAttrs: !1,
-  props: A()("as", "class", "gap", "itemMinWidth", "maxColumns", "style")
-}), Gr = 6, Js = {
+  props: N()("as", "class", "gap", "itemMinWidth", "maxColumns", "style")
+}), Wr = 6, uo = {
   h1: X.display1,
   h2: X.headline,
   h3: X.title,
   h4: X.subtitle2,
   h5: X.subtitle1,
   h6: X.body2
-}, Xs = { level: 1, headingElement: "h1" }, Qs = "lumx-heading", Zs = (e, t) => {
+}, fo = { level: 1, headingElement: "h1" }, mo = "lumx-heading", ho = (e, t) => {
   const { as: r, className: a, typography: n, ...s } = e, o = r || t || "h1";
   return {
     ...s,
     as: o,
-    className: N(a, Qs),
-    typography: n || Js[o]
+    className: y(a, mo),
+    typography: n || uo[o]
   };
-}, Na = /* @__PURE__ */ Symbol("HeadingLevelContext"), Aa = () => It(Na, Xs), Ii = /* @__PURE__ */ v((e, {
+}, ka = /* @__PURE__ */ Symbol("HeadingLevelContext"), Pa = () => Ot(ka, fo), Fi = /* @__PURE__ */ g((e, {
   slots: t
 }) => {
-  const r = S(), a = Aa(), n = P(() => {
+  const r = S(), a = Pa(), n = P(() => {
     const {
       className: s,
       ...o
-    } = Zs({
+    } = ho({
       ...r,
       ...e,
       className: e.class || r.class || r.className
@@ -1643,34 +2003,34 @@ const wi = /* @__PURE__ */ v((e, {
       class: s
     };
   });
-  return () => l(qt, n.value, {
+  return () => l(Dt, n.value, {
     default: () => [t.default?.()]
   });
 }, {
   name: "Heading",
   inheritAttrs: !1,
   // Redefine properties so that they come in as `props` on the `defineComponent` function
-  props: A()("as", "color", "colorVariant", "typography", "truncate", "noWrap", "whiteSpace", "style", "class")
-}), eo = (e, t) => {
+  props: N()("as", "color", "colorVariant", "typography", "truncate", "noWrap", "whiteSpace", "style", "class")
+}), po = (e, t) => {
   const r = e || t + 1;
-  return r > Gr ? Gr : r;
-}, Li = /* @__PURE__ */ v((e, {
+  return r > Wr ? Wr : r;
+}, zi = /* @__PURE__ */ g((e, {
   slots: t
 }) => {
   const {
     level: r
-  } = Ba(e), a = Aa(), n = P(() => eo(r?.value, a.level)), s = P(() => `h${n.value}`), o = Ra({
+  } = qa(e), a = Pa(), n = P(() => po(r?.value, a.level)), s = P(() => `h${n.value}`), o = Da({
     level: n,
     headingElement: s
   });
-  return Yr(Na, o), () => t.default?.();
+  return Qr(ka, o), () => t.default?.();
 }, {
   name: "HeadingLevelProvider",
-  props: A()("level")
-}), Oi = /* @__PURE__ */ v((e, {
+  props: N()("level")
+}), Gi = /* @__PURE__ */ g((e, {
   slots: t
 }) => {
-  const r = S(), a = x();
+  const r = S(), a = _();
   return () => l(K, h(e, r, {
     className: e.class,
     theme: e.theme || a.value,
@@ -1680,11 +2040,11 @@ const wi = /* @__PURE__ */ v((e, {
   name: "InputHelper",
   inheritAttrs: !1,
   // Redefine properties so that they come in as `props` on the `defineComponent` function
-  props: A()("kind", "theme", "class", "id")
-}), Bi = /* @__PURE__ */ v((e, {
+  props: N()("kind", "theme", "class", "id")
+}), Ui = /* @__PURE__ */ g((e, {
   slots: t
 }) => {
-  const r = S(), a = x();
+  const r = S(), a = _();
   return () => l(V, h(e, r, {
     className: e.class,
     theme: e.theme || a.value,
@@ -1694,10 +2054,10 @@ const wi = /* @__PURE__ */ v((e, {
   name: "InputLabel",
   inheritAttrs: !1,
   // Redefine properties so that they come in as `props` on the `defineComponent` function
-  props: A()("htmlFor", "isRequired", "typography", "theme", "class")
-}), Sa = "lumx-link", {
-  block: to
-} = $(Sa), ro = (e) => {
+  props: N()("htmlFor", "isRequired", "typography", "theme", "class")
+}), $a = "lumx-link", {
+  block: bo
+} = $($a), vo = (e) => {
   const {
     children: t,
     className: r,
@@ -1709,70 +2069,70 @@ const wi = /* @__PURE__ */ v((e, {
     ref: c,
     href: u,
     ...d
-  } = e, [f, m] = Bt(a, n);
-  return Mt({
+  } = e, [f, m] = Rt(a, n);
+  return jt({
     ref: c,
     as: o || (u ? "a" : "button"),
     href: u,
     ...d,
     handleClick: i,
     children: t,
-    className: N(r, to({
+    className: y(r, bo({
       [`color-${f}`]: !!f,
       [`color-variant-${m}`]: !!m,
       "has-typography": !!s
-    }), s && Rt(s))
+    }), s && Mt(s))
   });
-}, ao = {
+}, go = {
   click: (e) => e instanceof MouseEvent
 }, {
-  element: no
-} = W.bem(Sa), Ri = /* @__PURE__ */ v((e, {
+  element: yo
+} = W.bem($a), Hi = /* @__PURE__ */ g((e, {
   emit: t
 }) => {
-  const r = Ot(), a = S(), {
+  const r = Bt(), a = S(), {
     isAnyDisabled: n,
     disabledStateProps: s,
     otherProps: o
-  } = F(P(() => ({
+  } = D(P(() => ({
     ...e,
     ...a
   }))), i = (c) => {
-    n.value || (c.stopImmediatePropagation(), t("click", c));
+    n.value || t("click", c);
   };
-  return () => l(ro, h(o.value, s.value, {
+  return () => l(vo, h(o.value, s.value, {
     className: e.class,
     handleClick: i,
     children: l("span", {
-      className: no("content")
+      className: yo("content")
     }, [r.default?.()])
   }), null);
 }, {
   name: "LumxLink",
   inheritAttrs: !1,
-  props: A()("color", "colorVariant", "href", "isDisabled", "disabled", "linkAs", "target", "typography", "class", "aria-disabled"),
-  emits: ao
-}), so = "Message", ka = "lumx-message", {
-  block: oo,
-  element: At
-} = $(ka), io = {
+  props: N()("color", "colorVariant", "href", "isDisabled", "disabled", "linkAs", "target", "typography", "class", "aria-disabled"),
+  emits: go
+}), No = "Message", Ta = "lumx-message", {
+  block: Ao,
+  element: St
+} = $(Ta), So = {
   [q.error]: {
-    color: _.red,
-    icon: za
+    color: x.red,
+    icon: Ha
   },
   [q.info]: {
-    color: _.blue,
-    icon: Ha
+    color: x.blue,
+    icon: Ka
   },
   [q.success]: {
-    color: _.green,
-    icon: Ga
+    color: x.green,
+    icon: Wa
   },
   [q.warning]: {
-    color: _.yellow,
-    icon: Xr
+    color: x.yellow,
+    icon: Zr
   }
-}, Ft = (e) => {
+}, zt = (e) => {
   const {
     children: t,
     className: r,
@@ -1785,41 +2145,41 @@ const wi = /* @__PURE__ */ v((e, {
   } = e, {
     color: u,
     icon: d
-  } = io[n] || {}, {
+  } = So[n] || {}, {
     onClick: f,
     label: m
   } = o || {}, p = a && n === "info" && f && m;
   return l("div", h(c, {
     ref: i,
-    className: N(r, oo({
+    className: y(r, Ao({
       [`color-${u}`]: !!u,
       "has-background": a
     }))
-  }), [(s || d) && I({
-    className: At("icon"),
+  }), [(s || d) && L({
+    className: St("icon"),
     icon: s || d,
-    size: w.xs,
+    size: E.xs,
     color: u
   }), l("div", {
-    className: At("text")
+    className: St("text")
   }, [t]), p && le({
-    className: At("close-button"),
-    icon: Ua,
+    className: St("close-button"),
+    icon: Va,
     handleClick: f,
     label: m,
     emphasis: U.low
   })]);
 };
-Ft.displayName = so;
-Ft.className = ka;
-const ji = /* @__PURE__ */ v((e, {
+zt.displayName = No;
+zt.className = Ta;
+const Wi = /* @__PURE__ */ g((e, {
   slots: t,
   emit: r
 }) => {
   const a = S(), {
     closeButtonLabel: n
   } = e;
-  return () => l(Ft, h(e, a, {
+  return () => l(zt, h(e, a, {
     className: e.class,
     children: t.default?.(),
     closeButtonProps: n ? {
@@ -1831,20 +2191,20 @@ const ji = /* @__PURE__ */ v((e, {
   name: "Message",
   inheritAttrs: !1,
   // Redefine properties so that they come in as `props` on the `defineComponent` function
-  props: A()("hasBackground", "icon", "kind", "class", "closeButtonLabel"),
+  props: N()("hasBackground", "icon", "kind", "class", "closeButtonLabel"),
   emits: ["close"]
-}), Mi = "ProgressCircular", lo = "lumx-progress-circular", {
-  block: co,
+}), Vi = "ProgressCircular", ko = "lumx-progress-circular", {
+  block: Po,
   element: Ne
-} = $(lo), Ur = {
-  size: w.m,
+} = $(ko), Vr = {
+  size: E.m,
   display: "block"
-}, uo = (e) => {
+}, $o = (e) => {
   const {
     className: t,
     theme: r,
-    size: a = Ur.size,
-    display: n = Ur.display,
+    size: a = Vr.size,
+    display: n = Vr.display,
     ref: s,
     circleProps: o,
     svgProps: i,
@@ -1853,7 +2213,7 @@ const ji = /* @__PURE__ */ v((e, {
   return l(u, h({
     ref: s
   }, c, {
-    className: N(t, co({
+    className: y(t, Po({
       [`theme-${r}`]: !!r,
       [`size-${a}`]: !!a,
       [`display-${n}`]: !!n
@@ -1872,9 +2232,9 @@ const ji = /* @__PURE__ */ v((e, {
       fill: "none"
     }), null)])]
   });
-}, qi = /* @__PURE__ */ v((e) => {
-  const t = S(), r = x();
-  return () => l(uo, h(e, t, {
+}, Ki = /* @__PURE__ */ g((e) => {
+  const t = S(), r = _();
+  return () => l($o, h(e, t, {
     className: e.class,
     theme: e.theme || r.value,
     circleProps: {
@@ -1888,11 +2248,11 @@ const ji = /* @__PURE__ */ v((e, {
 }, {
   name: "LumxProgressCircular",
   inheritAttrs: !1,
-  props: A()("class", "size", "display", "theme")
-}), Di = "ProgressLinear", fo = "lumx-progress-linear", {
-  block: mo,
-  element: Hr
-} = $(fo), ho = (e) => {
+  props: N()("class", "size", "display", "theme")
+}), Yi = "ProgressLinear", To = "lumx-progress-linear", {
+  block: Co,
+  element: Kr
+} = $(To), _o = (e) => {
   const {
     className: t,
     theme: r,
@@ -1902,28 +2262,28 @@ const ji = /* @__PURE__ */ v((e, {
   return l("div", h({
     ref: a
   }, n, {
-    className: N(t, mo({
+    className: y(t, Co({
       [`theme-${r}`]: !!r
     }))
   }), [l("div", {
-    className: Hr("line1")
+    className: Kr("line1")
   }, null), l("div", {
-    className: Hr("line2")
+    className: Kr("line2")
   }, null)]);
-}, Fi = /* @__PURE__ */ v((e) => {
-  const t = S(), r = x();
-  return () => l(ho, h(e, t, {
+}, Ji = /* @__PURE__ */ g((e) => {
+  const t = S(), r = _();
+  return () => l(_o, h(e, t, {
     className: e.class,
     theme: e.theme || r.value
   }), null);
 }, {
   name: "LumxProgressLinear",
   inheritAttrs: !1,
-  props: A()("class", "theme")
-}), po = "lumx-radio-button", {
-  block: bo,
-  element: j
-} = $(po), go = (e) => {
+  props: N()("class", "theme")
+}), xo = "lumx-radio-button", {
+  block: Eo,
+  element: M
+} = $(xo), wo = (e) => {
   const {
     checked: t,
     className: r,
@@ -1938,26 +2298,26 @@ const ji = /* @__PURE__ */ v((e, {
     theme: f,
     value: m,
     inputProps: p = {},
-    isDisabled: g,
+    isDisabled: v,
     inputId: b,
-    ...y
+    ...A
   } = e, C = (T) => {
     d && d(m, c, T);
   };
   return l("div", h({
     ref: u
-  }, y, {
-    className: N(r, bo({
+  }, A, {
+    className: y(r, Eo({
       "is-checked": o,
-      "is-disabled": g,
+      "is-disabled": v,
       "is-unchecked": !o,
       [`theme-${f}`]: !!f
     }))
   }), [l("div", {
-    className: j("input-wrapper")
+    className: M("input-wrapper")
   }, [l("input", h({
     ref: s,
-    className: j("input-native"),
+    className: M("input-native"),
     id: b,
     type: "radio",
     name: c,
@@ -1968,40 +2328,40 @@ const ji = /* @__PURE__ */ v((e, {
   }, p?.readOnly ? {
     readOnly: p.readOnly
   } : {}, p), null), l("div", {
-    className: j("input-placeholder")
+    className: M("input-placeholder")
   }, [l("div", {
-    className: j("input-background")
+    className: M("input-background")
   }, null), l("div", {
-    className: j("input-indicator")
+    className: M("input-indicator")
   }, null)])]), l("div", {
-    className: j("content")
+    className: M("content")
   }, [i && V({
     htmlFor: b,
-    className: j("label"),
+    className: M("label"),
     theme: f,
     children: i
   }), a && K({
     id: `${b}-helper`,
-    className: j("helper"),
+    className: M("helper"),
     theme: f,
     children: a
   })])]);
-}, vo = {
+}, Lo = {
   change: (e, t, r) => r instanceof Event
-}, zi = /* @__PURE__ */ v((e, {
+}, Xi = /* @__PURE__ */ g((e, {
   emit: t
 }) => {
-  const r = S(), a = x(), n = Dt(), s = P(() => e.id || n), {
+  const r = S(), a = _(), n = Ft(), s = P(() => e.id || n), {
     isAnyDisabled: o,
     disabledStateProps: i,
     otherProps: c
-  } = F(P(() => ({
+  } = D(P(() => ({
     ...e,
     ...r
   }))), u = (d, f, m) => {
-    o.value || (m?.stopImmediatePropagation?.(), t("change", d, f, m));
+    o.value || t("change", d, f, m);
   };
-  return () => l(go, h(c.value, {
+  return () => l(wo, h(c.value, {
     className: e.class,
     theme: e.theme || a.value,
     inputId: s.value,
@@ -2018,9 +2378,9 @@ const ji = /* @__PURE__ */ v((e, {
   name: "RadioButton",
   inheritAttrs: !1,
   // Redefine properties so that they come in as `props` on the `defineComponent` function
-  props: A()("checked", "class", "disabled", "helper", "id", "inputProps", "isChecked", "isDisabled", "label", "name", "theme", "value", "aria-disabled"),
-  emits: vo
-}), yo = "RadioGroup", Pa = "lumx-radio-group", No = {}, _e = (e) => {
+  props: N()("checked", "class", "disabled", "helper", "id", "inputProps", "isChecked", "isDisabled", "label", "name", "theme", "value", "aria-disabled"),
+  emits: Lo
+}), Oo = "RadioGroup", Ca = "lumx-radio-group", Io = {}, _e = (e) => {
   const {
     children: t,
     className: r,
@@ -2030,13 +2390,13 @@ const ji = /* @__PURE__ */ v((e, {
   return l("div", h({
     ref: a
   }, n, {
-    className: N(r, Pa)
+    className: y(r, Ca)
   }), [t]);
 };
-_e.displayName = yo;
-_e.className = Pa;
-_e.defaultProps = No;
-const Gi = /* @__PURE__ */ v((e, {
+_e.displayName = Oo;
+_e.className = Ca;
+_e.defaultProps = Io;
+const Qi = /* @__PURE__ */ g((e, {
   slots: t
 }) => {
   const r = S();
@@ -2047,10 +2407,10 @@ const Gi = /* @__PURE__ */ v((e, {
 }, {
   name: "RadioGroup",
   inheritAttrs: !1,
-  props: A()("class")
-}), Ao = "lumx-skeleton-circle", {
-  block: So
-} = $(Ao), ko = (e) => {
+  props: N()("class")
+}), Bo = "lumx-skeleton-circle", {
+  block: Ro
+} = $(Bo), Mo = (e) => {
   const {
     className: t,
     size: r,
@@ -2062,28 +2422,28 @@ const Gi = /* @__PURE__ */ v((e, {
   return l("div", h({
     ref: s
   }, o, {
-    className: N(t, So({
+    className: y(t, Ro({
       [`size-${r}`]: !!r,
       [`color-${a}`]: !!a,
       [`theme-${n}`]: !!n
     }))
   }), null);
-}, Po = {
+}, jo = {
   squared: "squared",
   rounded: "rounded",
   pill: "pill"
-}, $o = "lumx-skeleton-rectangle", {
-  block: To,
-  element: Co
-} = $($o), _o = {
-  variant: Po.squared
-}, xo = (e) => {
+}, qo = "lumx-skeleton-rectangle", {
+  block: Do,
+  element: Fo
+} = $(qo), zo = {
+  variant: jo.squared
+}, Go = (e) => {
   const {
     aspectRatio: t,
     className: r,
     height: a,
     theme: n,
-    variant: s = _o.variant,
+    variant: s = zo.variant,
     width: o,
     color: i,
     ref: c,
@@ -2092,7 +2452,7 @@ const Gi = /* @__PURE__ */ v((e, {
   return l("div", h({
     ref: c
   }, u, {
-    className: N(r, To({
+    className: y(r, Do({
       [`aspect-ratio-${t}`]: !!t,
       [`height-${a}`]: !!(!t && a),
       [`theme-${n}`]: !!n,
@@ -2101,12 +2461,12 @@ const Gi = /* @__PURE__ */ v((e, {
       [`color-${i}`]: !!i
     }))
   }), [l("div", {
-    className: Co("inner")
+    className: Fo("inner")
   }, null)]);
-}, Eo = "lumx-skeleton-typography", {
-  block: wo,
-  element: Io
-} = $(Eo), Lo = (e) => {
+}, Uo = "lumx-skeleton-typography", {
+  block: Ho,
+  element: Wo
+} = $(Uo), Vo = (e) => {
   const {
     className: t,
     theme: r,
@@ -2119,7 +2479,7 @@ const Gi = /* @__PURE__ */ v((e, {
   return l("div", h({
     ref: o
   }, i, {
-    className: N(t, wo({
+    className: y(t, Ho({
       [`theme-${r}`]: !!r,
       [`typography-${a}`]: !!a,
       [`color-${s}`]: !!s
@@ -2129,44 +2489,44 @@ const Gi = /* @__PURE__ */ v((e, {
       width: n
     }
   }), [l("div", {
-    className: Io("inner")
+    className: Wo("inner")
   }, null)]);
-}, Ui = /* @__PURE__ */ v((e) => {
-  const t = S(), r = x();
-  return () => l(ko, h(e, t, {
+}, Zi = /* @__PURE__ */ g((e) => {
+  const t = S(), r = _();
+  return () => l(Mo, h(e, t, {
     className: e.class,
     theme: e.theme || r.value
   }), null);
 }, {
   name: "LumxSkeletonCircle",
   inheritAttrs: !1,
-  props: A()("class", "size", "color", "theme")
-}), Hi = /* @__PURE__ */ v((e) => {
-  const t = S(), r = x();
-  return () => l(xo, h(e, t, {
+  props: N()("class", "size", "color", "theme")
+}), el = /* @__PURE__ */ g((e) => {
+  const t = S(), r = _();
+  return () => l(Go, h(e, t, {
     className: e.class,
     theme: e.theme || r.value
   }), null);
 }, {
   name: "SkeletonRectangle",
   inheritAttrs: !1,
-  props: A()("class", "aspectRatio", "height", "variant", "width", "color", "theme")
-}), Wi = /* @__PURE__ */ v((e) => {
-  const t = S(), r = x();
-  return () => l(Lo, h(e, t, {
+  props: N()("class", "aspectRatio", "height", "variant", "width", "color", "theme")
+}), tl = /* @__PURE__ */ g((e) => {
+  const t = S(), r = _();
+  return () => l(Vo, h(e, t, {
     className: e.class,
     theme: e.theme || r.value
   }), null);
 }, {
   name: "LumxSkeletonTypography",
   inheritAttrs: !1,
-  props: A()("class", "typography", "width", "color", "theme", "style")
-}), Vi = "Switch", Oo = "lumx-switch", {
-  block: Bo,
-  element: M
-} = $(Oo), Ro = {
+  props: N()("class", "typography", "width", "color", "theme", "style")
+}), rl = "Switch", Ko = "lumx-switch", {
+  block: Yo,
+  element: j
+} = $(Ko), Jo = {
   position: "left"
-}, jo = (e) => {
+}, Xo = (e) => {
   const {
     checked: t,
     className: r,
@@ -2181,31 +2541,31 @@ const Gi = /* @__PURE__ */ v((e, {
     theme: f,
     value: m,
     inputProps: p = {},
-    isDisabled: g,
+    isDisabled: v,
     inputId: b,
-    position: y = Ro.position,
+    position: A = Jo.position,
     ...C
-  } = e, T = (E) => {
-    d && d(!o, m, c, E);
+  } = e, T = (w) => {
+    d && d(!o, m, c, w);
   };
   return l("div", h({
     ref: u
   }, C, {
-    className: N(r, Bo({
+    className: y(r, Yo({
       "is-checked": o,
-      "is-disabled": g,
+      "is-disabled": v,
       "is-unchecked": !o,
-      [`position-${y}`]: !!y,
+      [`position-${A}`]: !!A,
       [`theme-${f}`]: !!f
     }))
   }), [l("div", {
-    className: M("input-wrapper")
+    className: j("input-wrapper")
   }, [l("input", h({
     ref: s,
     type: "checkbox",
     role: "switch",
     id: b,
-    className: M("input-native"),
+    className: j("input-native"),
     name: c,
     value: m,
     checked: !!o,
@@ -2215,41 +2575,41 @@ const Gi = /* @__PURE__ */ v((e, {
   }, p?.readOnly ? {
     readOnly: p.readOnly
   } : {}, p), null), l("div", {
-    className: M("input-placeholder")
+    className: j("input-placeholder")
   }, [l("div", {
-    className: M("input-background")
+    className: j("input-background")
   }, null), l("div", {
-    className: M("input-indicator")
+    className: j("input-indicator")
   }, null)])]), l("div", {
-    className: M("content")
+    className: j("content")
   }, [i && V({
     htmlFor: b,
-    className: M("label"),
+    className: j("label"),
     theme: f,
     children: i
   }), a && K({
     id: `${b}-helper`,
-    className: M("helper"),
+    className: j("helper"),
     theme: f,
     children: a
   })])]);
-}, Mo = {
+}, Qo = {
   change: (e, t, r, a) => typeof e == "boolean" && a instanceof Event
-}, Ki = /* @__PURE__ */ v((e, {
+}, al = /* @__PURE__ */ g((e, {
   emit: t,
   slots: r
 }) => {
-  const a = S(), n = x(), s = Dt(), o = P(() => e.id || s), {
+  const a = S(), n = _(), s = Ft(), o = P(() => e.id || s), {
     isAnyDisabled: i,
     disabledStateProps: c,
     otherProps: u
-  } = F(P(() => ({
+  } = D(P(() => ({
     ...e,
     ...a
-  }))), d = (f, m, p, g) => {
-    i.value || (g.stopImmediatePropagation(), t("change", f, m, p, g));
+  }))), d = (f, m, p, v) => {
+    i.value || t("change", f, m, p, v);
   };
-  return () => l(jo, h(u.value, {
+  return () => l(Xo, h(u.value, {
     className: e.class,
     theme: e.theme || n.value,
     inputId: o.value,
@@ -2266,11 +2626,11 @@ const Gi = /* @__PURE__ */ v((e, {
   name: "LumxSwitch",
   inheritAttrs: !1,
   // Redefine properties so that they come in as `props` on the `defineComponent` function
-  props: A()("checked", "class", "disabled", "helper", "id", "inputProps", "isChecked", "isDisabled", "label", "name", "position", "theme", "value", "aria-disabled"),
-  emits: Mo
+  props: N()("checked", "class", "disabled", "helper", "id", "inputProps", "isChecked", "isDisabled", "label", "name", "position", "theme", "value", "aria-disabled"),
+  emits: Qo
 }), ce = "lumx-table", {
-  block: qo
-} = $(ce), Do = (e) => {
+  block: Zo
+} = $(ce), ei = (e) => {
   const {
     children: t,
     className: r,
@@ -2283,17 +2643,17 @@ const Gi = /* @__PURE__ */ v((e, {
   return l("table", h({
     ref: s
   }, i, {
-    className: N(r, qo({
+    className: y(r, Zo({
       "has-before": a,
       "has-dividers": n,
       [`theme-${o}`]: !!o
     }))
   }), [t]);
-}, Yi = /* @__PURE__ */ v((e, {
+}, nl = /* @__PURE__ */ g((e, {
   slots: t
 }) => {
-  const r = S(), a = x();
-  return () => l(Do, h(e, r, {
+  const r = S(), a = _();
+  return () => l(ei, h(e, r, {
     className: e.class,
     theme: e.theme || a.value,
     children: t.default?.()
@@ -2301,8 +2661,8 @@ const Gi = /* @__PURE__ */ v((e, {
 }, {
   name: "LumxTable",
   inheritAttrs: !1,
-  props: A()("class", "hasBefore", "hasDividers", "theme")
-}), Fo = `${ce}__body`, zo = (e) => {
+  props: N()("class", "hasBefore", "hasDividers", "theme")
+}), ti = `${ce}__body`, ri = (e) => {
   const {
     children: t,
     className: r,
@@ -2312,31 +2672,31 @@ const Gi = /* @__PURE__ */ v((e, {
   return l("tbody", h({
     ref: a
   }, n, {
-    className: N(r, Fo)
+    className: y(r, ti)
   }), [t]);
-}, Ji = /* @__PURE__ */ v((e, {
+}, sl = /* @__PURE__ */ g((e, {
   slots: t
 }) => {
   const r = S();
-  return () => l(zo, h(e, r, {
+  return () => l(ri, h(e, r, {
     className: e.class,
     children: t.default?.()
   }), null);
 }, {
   name: "LumxTableBody",
   inheritAttrs: !1,
-  props: A()("class")
-}), ge = {
+  props: N()("class")
+}), ve = {
   asc: "asc",
   desc: "desc"
-}, Et = {
+}, Lt = {
   body: "body",
   head: "head"
 }, G = `${ce}__cell`, {
-  block: Wr
-} = $(G), Go = {
-  variant: Et.body
-}, Uo = (e) => {
+  block: Yr
+} = $(G), ai = {
+  variant: Lt.body
+}, ni = (e) => {
   const {
     children: t,
     className: r,
@@ -2345,17 +2705,17 @@ const Gi = /* @__PURE__ */ v((e, {
     handleClick: s,
     ref: o,
     sortOrder: i,
-    variant: c = Go.variant,
+    variant: c = ai.variant,
     ...u
   } = e, d = s ? "button" : "div", f = d === "button" ? {
     type: "button",
     onClick: s
   } : void 0;
   let m;
-  return n && (m = "none", i === ge.asc && (m = "ascending"), i === ge.desc && (m = "descending")), l(Ae, null, [c === Et.head && l("th", h({
+  return n && (m = "none", i === ve.asc && (m = "ascending"), i === ve.desc && (m = "descending")), l(Ae, null, [c === Lt.head && l("th", h({
     ref: o
   }, u, {
-    className: N(r, Wr({
+    className: y(r, Yr({
       "is-sortable": n,
       "is-sorted": n && !!i,
       head: !0
@@ -2364,41 +2724,41 @@ const Gi = /* @__PURE__ */ v((e, {
   }), [l(d, h({
     className: `${G}-wrapper`
   }, f), {
-    default: () => [a && !n && I({
+    default: () => [a && !n && L({
       className: `${G}-icon`,
       icon: a,
-      size: w.xxs
-    }), n && i === ge.asc && I({
+      size: E.xxs
+    }), n && i === ve.asc && L({
       className: `${G}-icon`,
-      icon: Va,
-      size: w.xxs
-    }), n && i === ge.desc && I({
+      icon: Ja,
+      size: E.xxs
+    }), n && i === ve.desc && L({
       className: `${G}-icon`,
-      icon: Wa,
-      size: w.xxs
+      icon: Ya,
+      size: E.xxs
     }), l("div", {
       className: `${G}-content`
     }, [t])]
-  })]), c === Et.body && l("td", h({
+  })]), c === Lt.body && l("td", h({
     ref: o
   }, u, {
-    className: N(r, Wr({
+    className: y(r, Yr({
       body: !0
     }))
   }), [l("div", {
     className: `${G}-content`
   }, [t])])]);
-}, wt = (e) => Jr()?.vnode.props?.[e] !== void 0, Ho = {
+}, si = {
   headerClick: () => !0
-}, Xi = /* @__PURE__ */ v((e, {
+}, ol = /* @__PURE__ */ g((e, {
   emit: t,
   slots: r,
   attrs: a
 }) => {
   const n = () => {
     t("headerClick");
-  }, s = wt("onHeaderClick");
-  return () => l(Uo, h(e, a, {
+  }, s = Tt("onHeaderClick");
+  return () => l(ni, h(e, a, {
     className: e.class,
     handleClick: s ? n : void 0,
     children: r.default?.()
@@ -2406,9 +2766,9 @@ const Gi = /* @__PURE__ */ v((e, {
 }, {
   name: "LumxTableCell",
   inheritAttrs: !1,
-  props: A()("class", "icon", "isSortable", "sortOrder", "variant"),
-  emits: Ho
-}), Wo = `${ce}__header`, Vo = (e) => {
+  props: N()("class", "icon", "isSortable", "sortOrder", "variant"),
+  emits: si
+}), oi = `${ce}__header`, ii = (e) => {
   const {
     children: t,
     className: r,
@@ -2418,23 +2778,23 @@ const Gi = /* @__PURE__ */ v((e, {
   return l("thead", h({
     ref: a
   }, n, {
-    className: N(r, Wo)
+    className: y(r, oi)
   }), [t]);
-}, Qi = /* @__PURE__ */ v((e, {
+}, il = /* @__PURE__ */ g((e, {
   slots: t
 }) => {
   const r = S();
-  return () => l(Vo, h(e, r, {
+  return () => l(ii, h(e, r, {
     className: e.class,
     children: t.default?.()
   }), null);
 }, {
   name: "LumxTableHeader",
   inheritAttrs: !1,
-  props: A()("class")
-}), Ko = `${ce}__row`, {
-  block: Yo
-} = $(Ko), Jo = (e) => {
+  props: N()("class")
+}), li = `${ce}__row`, {
+  block: ci
+} = $(li), ui = (e) => {
   const {
     children: t,
     className: r,
@@ -2451,23 +2811,23 @@ const Gi = /* @__PURE__ */ v((e, {
   }, o !== void 0 ? {
     tabIndex: o
   } : {}, c, {
-    className: N(r, Yo({
+    className: y(r, ci({
       "is-clickable": a && !u,
       "is-disabled": u,
       "is-selected": n && !u
     }))
   }), [t]);
-}, Zi = /* @__PURE__ */ v((e, {
+}, ll = /* @__PURE__ */ g((e, {
   slots: t
 }) => {
   const r = S(), {
     isAnyDisabled: a,
     otherProps: n
-  } = F(P(() => ({
+  } = D(P(() => ({
     ...e,
     ...r
   })));
-  return () => l(Jo, h(n.value, {
+  return () => l(ui, h(n.value, {
     className: e.class,
     tabIndex: e.isClickable && !a.value ? 0 : -1,
     "aria-disabled": a.value,
@@ -2476,296 +2836,11 @@ const Gi = /* @__PURE__ */ v((e, {
 }, {
   name: "LumxTableRow",
   inheritAttrs: !1,
-  props: A()("class", "isClickable", "isDisabled", "isSelected")
-});
-function St(e, t) {
-  return t?.type === "error" || e?.complete && !e.getAttribute("src") ? "hasError" : !e || !e.complete ? "isLoading" : "isLoaded";
-}
-function Xo({
-  image: e,
-  aspectRatio: t,
-  focusPoint: r,
-  width: a,
-  height: n,
-  element: s,
-  isLoaded: o
-}) {
-  if (!(!e || t === Qr.original || !r?.x && !r?.y)) {
-    if (typeof a == "number" && typeof n == "number")
-      return { width: a, height: n };
-    if (s && o)
-      return { width: s.naturalWidth, height: s.naturalHeight };
-  }
-}
-function Vr({
-  scale: e,
-  focusPoint: t,
-  imageSize: r,
-  containerSize: a
-}) {
-  const n = r / e;
-  if (n === a) return 0;
-  const i = (t * n - a / 2) / (n - a);
-  return Math.floor(Math.max(Math.min(i, 1), 0) * 100);
-}
-function Qo({
-  image: e,
-  aspectRatio: t,
-  focusPoint: r,
-  element: a,
-  imageSize: n,
-  containerSize: s
-}) {
-  if (!e || t === Qr.original || !r?.x && !r?.y)
-    return {};
-  if (!a || !n)
-    return { visibility: "hidden" };
-  if (!s || !n.height || !n.width)
-    return {};
-  const o = n.height / s.height, i = n.width / s.width, c = Math.min(i, o), u = Math.abs((r?.y || 0) - 1) / 2, d = Vr({
-    scale: c,
-    focusPoint: u,
-    imageSize: n.height,
-    containerSize: s.height
-  }), f = Math.abs((r?.x || 0) + 1) / 2;
-  return { objectPosition: `${Vr({
-    scale: c,
-    focusPoint: f,
-    imageSize: n.width,
-    containerSize: s.width
-  })}% ${d}%` };
-}
-const Zo = "lumx-thumbnail", {
-  block: ei,
-  element: re
-} = W.bem(Zo), Kr = {
-  fallback: Ka,
-  loading: "lazy"
-}, ti = (e) => {
-  const {
-    align: t,
-    alt: r,
-    aspectRatio: a = _a.original,
-    badge: n,
-    className: s,
-    crossOrigin: o,
-    ref: i,
-    fallback: c = Kr.fallback,
-    focusPointStyle: u,
-    fillHeight: d,
-    image: f,
-    imgProps: m,
-    imgRef: p,
-    isLoading: g,
-    objectFit: b,
-    loading: y = Kr.loading,
-    loadingPlaceholderImageRef: C,
-    isAnyDisabled: T,
-    disabledStateProps: E,
-    size: L,
-    theme: B,
-    loadingState: z,
-    variant: ue,
-    linkProps: Y,
-    linkAs: de,
-    handleClick: fe,
-    handleKeyPress: k,
-    ...me
-  } = e, O = g || z === "isLoading", he = z === "hasError", pe = he && typeof c == "string", zt = he && !pe, xe = {};
-  pe ? xe.visibility = "hidden" : zt && (xe.display = "none");
-  const Gt = !!(Y?.href || de), Ee = !T && !!(Gt || fe || k), Q = {
-    ...me
-  };
-  Ee && (Object.assign(Q, {
-    as: de || (Y?.href ? "a" : "button")
-  }, E), Gt ? Object.assign(Q, Y) : Q["aria-label"] = me["aria-label"] || r);
-  const Ut = W.join(Y?.className, s, ei({
-    [`align-${t}`]: !!t,
-    [`aspect-ratio-${a}`]: !!a,
-    [`size-${L}`]: !!L,
-    [`theme-${B}`]: !!B,
-    [`variant-${ue}`]: !!ue,
-    "is-clickable": Ee,
-    "has-error": he,
-    "has-icon-error-fallback": pe,
-    "has-custom-error-fallback": zt,
-    "is-loading": O,
-    [`object-fit-${b}`]: !!b,
-    "has-badge": !!n,
-    "fill-height": d
-  })), Z = O && C?.current?.complete && C?.current || void 0, $a = Z ? {
-    backgroundImage: `url(${Z.src})`
-  } : void 0, Ht = l(Ae, null, [l("span", {
-    className: re("background")
-  }, [l("img", h({
-    width: Z?.naturalWidth,
-    height: Z?.naturalHeight
-  }, m, {
-    style: {
-      // Reserve space while loading (when possible)
-      width: O ? m?.width || Z?.naturalWidth : void 0,
-      ...m?.style,
-      ...xe,
-      ...u,
-      ...$a
-    },
-    ref: p,
-    className: W.join(re("image", {
-      "is-loading": O,
-      "has-defined-size": !!(m?.height && m.width)
-    }), m?.className),
-    crossOrigin: o,
-    src: f,
-    alt: r,
-    loading: y
-  }), null), !O && he && l("span", {
-    className: re("fallback")
-  }, [pe ? I({
-    icon: c,
-    size: xa.xxs,
-    theme: B
-  }) : c])]), n]);
-  return Ee ? Mt({
-    ref: i,
-    ...Q,
-    className: Ut,
-    children: Ht,
-    handleClick: fe,
-    handleKeyPress: k
-  }) : l("div", h({
-    ref: i
-  }, Q, {
-    className: Ut
-  }), [Ht]);
-};
-function ri(e, t) {
-  const r = ne(St(t.value));
-  H(
-    [e, t],
-    () => {
-      r.value = St(t.value);
-    },
-    { immediate: !0 }
-  );
-  const a = (n) => {
-    t.value && (r.value = St(t.value, n));
-  };
-  return H(
-    t,
-    (n, s) => {
-      s && (s.removeEventListener("load", a), s.removeEventListener("error", a)), n && (n.addEventListener("load", a), n.addEventListener("error", a));
-    },
-    { immediate: !0 }
-  ), ja(() => {
-    t.value && (t.value.removeEventListener("load", a), t.value.removeEventListener("error", a));
-  }), r;
-}
-function ai(e) {
-  const { image: t, aspectRatio: r, focusPoint: a, width: n, height: s, element: o, isLoaded: i } = e, c = P(
-    () => Xo({
-      image: t.value,
-      aspectRatio: r.value,
-      focusPoint: a.value,
-      width: n.value,
-      height: s.value,
-      element: o.value,
-      isLoaded: i.value
-    })
-  ), u = ne(void 0), d = () => {
-    const m = o.value?.offsetWidth, p = o.value?.offsetHeight;
-    if (m && p) {
-      const g = u.value;
-      (g?.width !== m || g?.height !== p) && (u.value = { width: m, height: p });
-    } else c.value && requestAnimationFrame(d);
-  };
-  return H(
-    [() => o.value?.offsetWidth, () => o.value?.offsetHeight, c],
-    () => {
-      Ma(d);
-    },
-    { immediate: !0 }
-  ), P(
-    () => Qo({
-      image: t.value,
-      aspectRatio: r.value,
-      focusPoint: a.value,
-      element: o.value,
-      imageSize: c.value,
-      containerSize: u.value
-    })
-  );
-}
-const ni = {
-  click: (e) => e instanceof Event,
-  keyPress: (e) => e instanceof Event
-}, el = /* @__PURE__ */ v((e, {
-  emit: t,
-  slots: r
-}) => {
-  const a = S(), n = x(), s = ne(), o = wt("onClick"), i = wt("onKeyPress"), {
-    isAnyDisabled: c,
-    disabledStateProps: u,
-    otherProps: d
-  } = F(P(() => ({
-    ...e,
-    ...a
-  }))), f = ri(J(() => e.image), s), m = P(() => f.value === "isLoaded"), p = ai({
-    image: J(() => e.image),
-    aspectRatio: J(() => e.aspectRatio),
-    focusPoint: J(() => e.focusPoint),
-    width: J(() => typeof e.imgProps?.width == "number" ? e.imgProps.width : void 0),
-    height: J(() => typeof e.imgProps?.height == "number" ? e.imgProps.height : void 0),
-    element: s,
-    isLoaded: m
-  }), g = (y) => {
-    c.value || (y.stopImmediatePropagation(), t("click", y));
-  }, b = (y) => {
-    c.value || (y.stopImmediatePropagation(), t("keyPress", y));
-  };
-  return () => {
-    const y = r.badge?.(), C = r.fallback?.();
-    return l(ti, h(d.value, {
-      className: e.class,
-      theme: e.theme || n.value,
-      isAnyDisabled: c.value,
-      disabledStateProps: u.value,
-      focusPointStyle: p.value,
-      loadingState: f.value,
-      imgRef: s,
-      image: e.image,
-      handleClick: o ? g : void 0,
-      handleKeyPress: i ? b : void 0,
-      fallback: C,
-      badge: y && (Array.isArray(y) ? y.map((T) => ({
-        ...T,
-        props: {
-          ...T.props,
-          class: W.join(re("badge"), T.props?.class)
-        }
-      })) : {
-        ...y,
-        props: {
-          ...y.props,
-          class: W.join(re("badge"), y.props?.class)
-        }
-      })
-    }), null);
-  };
-}, {
-  name: "LumxThumbnail",
-  inheritAttrs: !1,
-  props: A()("align", "alt", "aspectRatio", "class", "crossOrigin", "fillHeight", "focusPoint", "image", "imgProps", "isLoading", "linkAs", "linkProps", "loading", "loadingPlaceholderImageRef", "objectFit", "size", "theme", "variant", "aria-disabled", "aria-label"),
-  emits: ni
-}), tl = {
-  squared: "squared",
-  rounded: "rounded"
-}, rl = {
-  cover: "cover",
-  contain: "contain"
-}, al = "Toolbar", si = "lumx-toolbar", {
-  block: oi,
+  props: N()("class", "isClickable", "isDisabled", "isSelected")
+}), cl = "Toolbar", di = "lumx-toolbar", {
+  block: fi,
   element: kt
-} = $(si), ii = (e) => {
+} = $(di), mi = (e) => {
   const {
     after: t,
     before: r,
@@ -2777,7 +2852,7 @@ const ni = {
   return l("div", h({
     ref: s
   }, o, {
-    className: N(a, oi({
+    className: y(a, fi({
       "has-after": !!t,
       "has-before": !!r,
       "has-label": !!n
@@ -2789,11 +2864,11 @@ const ni = {
   }, [n]), t && l("div", {
     className: kt("after")
   }, [t])]);
-}, nl = /* @__PURE__ */ v((e, {
+}, ul = /* @__PURE__ */ g((e, {
   slots: t
 }) => {
   const r = S();
-  return () => l(ii, h(e, r, {
+  return () => l(mi, h(e, r, {
     className: e.class,
     label: t.default?.(),
     before: t.before?.(),
@@ -2802,58 +2877,59 @@ const ni = {
 }, {
   name: "LumxToolbar",
   inheritAttrs: !1,
-  props: A()("class")
+  props: N()("class")
 });
 export {
-  Si as Badge,
-  ki as BadgeWrapper,
-  Pi as Button,
-  Ti as ButtonGroup,
-  Oo as CLASSNAME,
-  Vi as COMPONENT_NAME,
-  Ci as Checkbox,
-  Ro as DEFAULT_PROPS,
-  _i as Divider,
-  xi as Flag,
-  Ei as FlexBox,
-  ya as GRID_COLUMN_CLASSNAME,
-  Ks as GRID_COLUMN_COMPONENT_NAME,
-  wi as GridColumn,
-  Ii as Heading,
-  Li as HeadingLevelProvider,
-  Tt as Icon,
-  $i as IconButton,
-  Oi as InputHelper,
-  Bi as InputLabel,
-  Ri as Link,
-  ji as Message,
-  lo as PROGRESS_CIRCULAR_CLASSNAME,
-  Mi as PROGRESS_CIRCULAR_COMPONENT_NAME,
-  fo as PROGRESS_LINEAR_CLASSNAME,
-  Di as PROGRESS_LINEAR_COMPONENT_NAME,
-  qi as ProgressCircular,
-  Fi as ProgressLinear,
-  zi as RadioButton,
-  Gi as RadioGroup,
-  Ui as SkeletonCircle,
-  Hi as SkeletonRectangle,
-  Po as SkeletonRectangleVariant,
-  Wi as SkeletonTypography,
-  Ki as Switch,
-  al as TOOLBAR_NAME,
-  Yi as Table,
-  Ji as TableBody,
-  Xi as TableCell,
-  Et as TableCellVariant,
-  Qi as TableHeader,
-  Zi as TableRow,
-  qt as Text,
-  ge as ThOrder,
-  el as Thumbnail,
-  rl as ThumbnailObjectFit,
-  tl as ThumbnailVariant,
-  nl as Toolbar,
-  Ho as emitSchema,
-  Aa as useHeadingLevel
+  Ei as Avatar,
+  wi as Badge,
+  Li as BadgeWrapper,
+  Oi as Button,
+  Bi as ButtonGroup,
+  Ko as CLASSNAME,
+  rl as COMPONENT_NAME,
+  Ri as Checkbox,
+  Jo as DEFAULT_PROPS,
+  Mi as Divider,
+  ji as Flag,
+  qi as FlexBox,
+  Sa as GRID_COLUMN_CLASSNAME,
+  lo as GRID_COLUMN_COMPONENT_NAME,
+  Di as GridColumn,
+  Fi as Heading,
+  zi as HeadingLevelProvider,
+  _t as Icon,
+  Ii as IconButton,
+  Gi as InputHelper,
+  Ui as InputLabel,
+  Hi as Link,
+  Wi as Message,
+  ko as PROGRESS_CIRCULAR_CLASSNAME,
+  Vi as PROGRESS_CIRCULAR_COMPONENT_NAME,
+  To as PROGRESS_LINEAR_CLASSNAME,
+  Yi as PROGRESS_LINEAR_COMPONENT_NAME,
+  Ki as ProgressCircular,
+  Ji as ProgressLinear,
+  Xi as RadioButton,
+  Qi as RadioGroup,
+  Zi as SkeletonCircle,
+  el as SkeletonRectangle,
+  jo as SkeletonRectangleVariant,
+  tl as SkeletonTypography,
+  al as Switch,
+  cl as TOOLBAR_NAME,
+  nl as Table,
+  sl as TableBody,
+  ol as TableCell,
+  Lt as TableCellVariant,
+  il as TableHeader,
+  ll as TableRow,
+  Dt as Text,
+  ve as ThOrder,
+  Sn as Thumbnail,
+  xi as ThumbnailObjectFit,
+  _i as ThumbnailVariant,
+  ul as Toolbar,
+  si as emitSchema,
+  Pa as useHeadingLevel
 };
 //# sourceMappingURL=index.js.map