@lumx/vue 4.2.1-alpha.1 → 4.2.1-alpha.2

package/index.js

@@ -1,116 +1,116 @@
-import { ColorVariant as $r, Theme as Xt } from '@lumx/core/js/constants/index.js';
+import { ColorVariant as jr, Theme as kr } from '@lumx/core/js/constants/index.js';
 export * from '@lumx/core/js/constants/index.js';
 export * from '@lumx/core/js/types/index.js';
-import { createVNode as y, mergeProps as $, inject as Ye, defineComponent as A, useAttrs as x, openBlock as S, createBlock as T, unref as b, normalizeProps as O, guardReactiveProps as I, withCtx as w, renderSlot as C, isVNode as Xe, useSlots as Or, computed as g, provide as Qt, getCurrentScope as Ir, onScopeDispose as Er, watch as Qe, toValue as Ze, shallowRef as qr, getCurrentInstance as Cr, onMounted as Rr, ref as Mr, Fragment as Lr, useTemplateRef as Dr, resolveDynamicComponent as Zt, h as Fr, createCommentVNode as ot, toRefs as Vr, reactive as Gr } from "vue";
-import { getDisabledState as Ur } from "@lumx/core/js/utils/disabledState";
-import { mdiAlertCircle as er } from '@lumx/icons/esm/alert-circle.js';
-import { classNames as Wr } from "@lumx/core/js/utils";
-import { mdiAlert as zr } from '@lumx/icons/esm/alert.js';
-import { mdiCheckCircle as Hr } from '@lumx/icons/esm/check-circle.js';
-import { mdiClose as Kr } from '@lumx/icons/esm/close.js';
-import { mdiInformation as Jr } from '@lumx/icons/esm/information.js';
-var Q = typeof globalThis < "u" ? globalThis : typeof window < "u" ? window : typeof global < "u" ? global : typeof self < "u" ? self : {};
-function et(e) {
+import { createVNode as d, mergeProps as g, inject as Ue, defineComponent as _, useAttrs as P, isVNode as We, computed as A, unref as W, provide as Vt, getCurrentScope as wr, onScopeDispose as xr, watch as He, toValue as Ke, shallowRef as Or, getCurrentInstance as Ir, onMounted as $r, ref as Cr, useSlots as Gt, Fragment as zt, useTemplateRef as Br, openBlock as Ut, createBlock as Wt, resolveDynamicComponent as Er, withCtx as Ht, normalizeProps as qr, guardReactiveProps as Rr, renderSlot as Kt, toRefs as Mr, reactive as Lr } from "vue";
+import { getDisabledState as Dr } from "@lumx/core/js/utils/disabledState";
+import { mdiAlertCircle as Yt } from '@lumx/icons/esm/alert-circle.js';
+import { classNames as Fr } from "@lumx/core/js/utils";
+import { mdiAlert as Vr } from '@lumx/icons/esm/alert.js';
+import { mdiCheckCircle as Gr } from '@lumx/icons/esm/check-circle.js';
+import { mdiClose as zr } from '@lumx/icons/esm/close.js';
+import { mdiInformation as Ur } from '@lumx/icons/esm/information.js';
+var U = typeof globalThis < "u" ? globalThis : typeof window < "u" ? window : typeof global < "u" ? global : typeof self < "u" ? self : {};
+function Ye(e) {
   return e && e.__esModule && Object.prototype.hasOwnProperty.call(e, "default") ? e.default : e;
 }
-var ie = { exports: {} };
-var at;
-function Yr() {
-  return at || (at = 1, (function(e) {
+var re = { exports: {} };
+var Qe;
+function Wr() {
+  return Qe || (Qe = 1, (function(e) {
     (function() {
-      var r = {}.hasOwnProperty;
-      function t() {
-        for (var n = [], o = 0; o < arguments.length; o++) {
-          var a = arguments[o];
-          if (a) {
-            var s = typeof a;
+      var t = {}.hasOwnProperty;
+      function r() {
+        for (var n = [], a = 0; a < arguments.length; a++) {
+          var o = arguments[a];
+          if (o) {
+            var s = typeof o;
             if (s === "string" || s === "number")
-              n.push(a);
-            else if (Array.isArray(a)) {
-              if (a.length) {
-                var i = t.apply(null, a);
+              n.push(o);
+            else if (Array.isArray(o)) {
+              if (o.length) {
+                var i = r.apply(null, o);
                 i && n.push(i);
               }
             } else if (s === "object") {
-              if (a.toString !== Object.prototype.toString && !a.toString.toString().includes("[native code]")) {
-                n.push(a.toString());
+              if (o.toString !== Object.prototype.toString && !o.toString.toString().includes("[native code]")) {
+                n.push(o.toString());
                 continue;
               }
-              for (var c in a)
-                r.call(a, c) && a[c] && n.push(c);
+              for (var c in o)
+                t.call(o, c) && o[c] && n.push(c);
             }
           }
         }
         return n.join(" ");
       }
-      e.exports ? (t.default = t, e.exports = t) : window.classNames = t;
+      e.exports ? (r.default = r, e.exports = r) : window.classNames = r;
     })();
-  })(ie)), ie.exports;
+  })(re)), re.exports;
 }
-var Xr = Yr();
-const j = /* @__PURE__ */ et(Xr);
-function tr(e, r) {
-  if (!e) return [void 0, r];
-  const [t, n] = e.split("-");
-  return [t, r || n];
+var Hr = Wr();
+const S = /* @__PURE__ */ Ye(Hr);
+function Jt(e, t) {
+  if (!e) return [void 0, t];
+  const [r, n] = e.split("-");
+  return [r, t || n];
 }
-function Qr(e, r, t) {
-  const [n, o = $r.N] = tr(r, t);
-  return `lumx-color-${e}-${n}-${o}`;
+function Kr(e, t, r) {
+  const [n, a = jr.N] = Jt(t, r);
+  return `lumx-color-${e}-${n}-${a}`;
 }
-const Zr = (e, r) => Qr("font", e, r);
-function rr(e) {
+const Yr = (e, t) => Kr("font", e, t);
+function Xt(e) {
   return `lumx-typography-${e}`;
 }
-function nr(e, r) {
-  const t = [];
-  for (const [n, o] of Object.entries(r))
-    o && t.push(`${e}--${n}`);
-  return t.join(" ");
+function Qt(e, t) {
+  const r = [];
+  for (const [n, a] of Object.entries(t))
+    a && r.push(`${e}--${n}`);
+  return r.join(" ");
 }
-function Z(e, r, t) {
-  let n, o;
-  return Array.isArray(r) ? o = r : (n = r, o = t), !n && !o ? e : j(
+function H(e, t, r) {
+  let n, a;
+  return Array.isArray(t) ? a = t : (n = t, a = r), !n && !a ? e : S(
     // Additional classes
-    o,
+    a,
     // Base class
     e,
     // Modifier(s)
-    n ? nr(e, n) : null
+    n ? Qt(e, n) : null
   );
 }
-function st(e, r, t, n) {
-  return Array.isArray(t) ? Z(`${e}__${r}`, t) : Z(`${e}__${r}`, t, n);
+function Ze(e, t, r, n) {
+  return Array.isArray(r) ? H(`${e}__${t}`, r) : H(`${e}__${t}`, r, n);
 }
 function k(e) {
-  function r(n, o) {
-    return Array.isArray(n) ? Z(e, n) : Z(e, n, o);
+  function t(n, a) {
+    return Array.isArray(n) ? H(e, n) : H(e, n, a);
   }
-  function t(n, o, a) {
-    return Array.isArray(o) ? st(e, n, o) : st(e, n, o, a);
+  function r(n, a, o) {
+    return Array.isArray(a) ? Ze(e, n, a) : Ze(e, n, a, o);
   }
   return {
-    block: r,
-    element: t,
-    modifier: (n) => nr(e, n)
+    block: t,
+    element: r,
+    modifier: (n) => Qt(e, n)
   };
 }
-const ee = {
+const K = {
   light: "light",
   dark: "dark"
-}, B = {
+}, j = {
   xxs: "xxs",
   xs: "xs",
   s: "s",
   m: "m",
   xl: "xl",
   xxl: "xxl"
-}, en = {
+}, Jr = {
   horizontal: "horizontal"
-}, D = {
+}, $ = {
   low: "low",
   high: "high"
-}, tn = {
+}, Xr = {
   overline: "overline",
   caption: "caption",
   body1: "body1",
@@ -120,14 +120,14 @@ const ee = {
   title: "title",
   headline: "headline",
   display1: "display1"
-}, U = {
-  ...tn
-}, q = {
+}, R = {
+  ...Xr
+}, O = {
   info: "info",
   success: "success",
   warning: "warning",
   error: "error"
-}, _ = {
+}, v = {
   primary: "primary",
   blue: "blue",
   dark: "dark",
@@ -135,515 +135,253 @@ const ee = {
   yellow: "yellow",
   red: "red",
   light: "light"
-}, rn = {
-  [q.error]: { color: "red" },
-  [q.success]: { color: "green" },
-  [q.warning]: { color: "yellow" }
-}, nn = "InputHelper", on = "lumx-input-helper", or = on, {
-  block: an
-} = k(or), ar = {
-  kind: q.info
+}, Qr = {
+  [O.error]: { color: "red" },
+  [O.success]: { color: "green" },
+  [O.warning]: { color: "yellow" }
+}, Zr = "InputHelper", en = "lumx-input-helper", Zt = en, {
+  block: tn
+} = k(Zt), er = {
+  kind: O.info
 };
-function te(e) {
+function Y(e) {
   const {
-    children: r,
-    className: t,
-    kind: n = ar.kind,
-    theme: o,
-    ref: a,
+    children: t,
+    className: r,
+    kind: n = er.kind,
+    theme: a,
+    ref: o,
     ...s
   } = e, {
     color: i
-  } = rn[n] || {};
-  return y("p", $({
-    ref: a
+  } = Qr[n] || {};
+  return d("p", g({
+    ref: o
   }, s, {
-    className: j(t, an({
+    className: S(r, tn({
       [`color-${i}`]: !!i,
-      [`theme-${o}`]: !!o
+      [`theme-${a}`]: !!a
     }))
-  }), [r]);
-}
-te.displayName = nn;
-te.className = or;
-te.defaultProps = ar;
-function R(e = { defaultTheme: Xt.light }) {
-  const { defaultTheme: r } = e;
-  return Ye("theme", void 0) || r;
-}
-const M = (e, r) => {
-  function t(n, o) {
-    const { emit: a, events: s, nestedComponents: i } = r || {}, { slots: c } = o, u = c.default, l = s?.reduce(
-      (d, f) => {
-        const v = `on${f.charAt(0).toUpperCase() + f.slice(1)}`;
-        return d[v] = (h) => a?.(f, h), d;
-      },
-      {}
-    ) || {}, p = {
-      ...n,
-      ...l,
-      className: n.class
-    };
-    return e(
-      u ? {
-        ...p,
-        children: u()
-      } : p,
-      i
-    );
-  }
-  return t;
-}, Fo = /* @__PURE__ */ A({
+  }), [t]);
+}
+Y.displayName = Zr;
+Y.className = Zt;
+Y.defaultProps = er;
+function C(e = { defaultTheme: kr.light }) {
+  const { defaultTheme: t } = e;
+  return Ue("theme", void 0) || t;
+}
+const w = () => (...e) => e, Ma = /* @__PURE__ */ _((e, {
+  slots: t
+}) => {
+  const r = P(), n = C();
+  return () => d(Y, g(e, r, {
+    className: e.class,
+    theme: e.theme || n,
+    children: t.default?.()
+  }), null);
+}, {
+  name: "InputHelper",
   inheritAttrs: !1,
-  __name: "InputHelper",
-  props: {
-    children: { type: [Boolean, Number, String, null] },
-    kind: {},
-    className: {},
-    theme: {}
-  },
-  setup(e) {
-    const r = e, t = x(), n = R(), o = M(te);
-    return (a, s) => (S(), T(b(o), O(I({ ...b(t), ...r, theme: r.theme || b(n) })), {
-      default: w(() => [
-        C(a.$slots, "default")
-      ]),
-      _: 3
-    }, 16));
-  }
-}), sn = "InputLabel", cn = "lumx-input-label", sr = cn, {
-  block: un
-} = k(sr), ln = {};
-function re(e) {
+  // Redefine properties so that they come in as `props` on the `defineComponent` function
+  props: w()("kind", "theme", "class")
+}), rn = "InputLabel", nn = "lumx-input-label", tr = nn, {
+  block: an
+} = k(tr), on = {};
+function J(e) {
   const {
-    children: r,
-    className: t,
+    children: t,
+    className: r,
     htmlFor: n,
-    isRequired: o,
-    theme: a,
+    isRequired: a,
+    theme: o,
     typography: s,
     ref: i,
     ...c
   } = e;
-  return y("label", $({
+  return d("label", g({
     ref: i
   }, c, {
     htmlFor: n,
-    className: j(t, un({
-      "is-required": o,
-      [`theme-${a}`]: !!a,
+    className: S(r, an({
+      "is-required": a,
+      [`theme-${o}`]: !!o,
       "has-custom-typography": !!s
-    }), s && rr(s))
-  }), [r]);
-}
-re.displayName = sn;
-re.className = sr;
-re.defaultProps = ln;
-const Vo = /* @__PURE__ */ A({
+    }), s && Xt(s))
+  }), [t]);
+}
+J.displayName = rn;
+J.className = tr;
+J.defaultProps = on;
+const La = /* @__PURE__ */ _((e, {
+  slots: t
+}) => {
+  const r = P(), n = C();
+  return () => d(J, g(e, r, {
+    className: e.class,
+    theme: e.theme || n,
+    children: t.default?.()
+  }), null);
+}, {
+  name: "InputLabel",
   inheritAttrs: !1,
-  __name: "InputLabel",
-  props: {
-    typography: {},
-    children: { type: [Boolean, Number, String, null] },
-    htmlFor: {},
-    isRequired: { type: Boolean },
-    className: {},
-    theme: {}
-  },
-  setup(e) {
-    const r = M(re), t = e, n = x(), o = R();
-    return (a, s) => (S(), T(b(r), O(I({ ...t, ...b(n), theme: t.theme || b(o) })), {
-      default: w(() => [
-        C(a.$slots, "default")
-      ]),
-      _: 3
-    }, 16));
-  }
+  // Redefine properties so that they come in as `props` on the `defineComponent` function
+  props: w()("htmlFor", "isRequired", "typography", "theme", "class")
 });
-function pn(e) {
-  return typeof e == "function" || Object.prototype.toString.call(e) === "[object Object]" && !Xe(e);
-}
-const fn = (e) => {
-  const {
-    children: r,
-    onClick: t,
-    disabled: n,
-    isDisabled: o = n,
-    "aria-disabled": a,
-    as: s,
-    ...i
-  } = e, c = o || a === "true" || a === !0, u = s;
-  let l;
-  return u === "button" ? l = {
-    type: i.type || "button",
-    disabled: o
-  } : l = {
-    tabIndex: o ? "-1" : i.tabIndex
-  }, y(u, $({
-    "aria-disabled": c || void 0
-  }, i, l, {
-    onClick: (p) => {
-      if (c) {
-        p.stopPropagation(), p.preventDefault();
-        return;
-      }
-      t?.(p);
-    }
-  }), pn(r) ? r : {
-    default: () => [r]
-  });
-}, dn = "ButtonRoot", mn = "lumx-button-wrapper", {
-  block: hn
-} = k(mn), bn = "lumx-button", {
-  block: vn
-} = k(bn), gn = (e) => {
-  const {
-    color: r,
-    emphasis: t,
-    variant: n,
-    fullWidth: o
-  } = e, a = t === D.low && (r === _.light ? _.dark : _.light), s = hn({
-    [`color-${a}`]: !!a,
-    [`variant-${n}`]: !!n,
-    "is-full-width": o
-  }), i = {
-    ...e,
-    hasBackground: !1
-  };
-  return y("div", {
-    className: s
-  }, [H(i)]);
-}, H = (e) => {
-  const {
-    "aria-label": r,
-    "aria-disabled": t,
-    children: n,
-    className: o,
-    color: a,
-    emphasis: s,
-    hasBackground: i,
-    isSelected: c,
-    isActive: u,
-    isFocused: l,
-    isHovered: p,
-    linkAs: d,
-    size: f,
-    theme: v = ee.light,
-    variant: h,
-    fullWidth: P,
-    ref: V,
-    ...N
-  } = e, E = a || s !== D.high && v === ee.dark && _.light || s === D.high && _.primary || _.dark;
-  if (i)
-    return gn({
-      ...e,
-      ref: V,
-      variant: h,
-      color: E
-    });
-  const G = j(o, vn({
-    [`color-${E}`]: !!E,
-    [`emphasis-${s}`]: !!s,
-    "is-selected": c,
-    "is-disabled": !!(e.isDisabled || e["aria-disabled"]),
-    "is-active": u,
-    "is-focused": l,
-    "is-hovered": p,
-    [`size-${f}`]: !!f,
-    [`theme-${v}`]: !!(s === D.high && v),
-    [`variant-${h}`]: !!h,
-    "is-full-width": P
-  }));
-  return fn({
-    as: d || (N.href ? "a" : "button"),
-    ...N,
-    "aria-disabled": t,
-    "aria-label": r,
-    ref: V,
-    className: G,
-    children: n
-  });
-};
-H.displayName = dn;
-H.defaultProps = {};
-const yn = "Button", ir = "lumx-button", {
-  modifier: _n
-} = k(ir), We = {
-  emphasis: D.high,
-  size: B.m
-}, ne = (e) => {
-  const {
-    className: r,
-    emphasis: t = We.emphasis,
-    leftIcon: n,
-    rightIcon: o,
-    size: a = We.size,
-    ...s
-  } = e, i = j(r, _n({
-    "has-left-icon": !!n,
-    "has-right-icon": !!o
-  }));
-  return H({
-    emphasis: t,
-    size: a,
-    ...s,
-    className: i,
-    variant: "button"
-  });
-};
-ne.displayName = yn;
-ne.className = ir;
-ne.defaultProps = We;
-const An = "Icon", Sn = "lumx-icon", cr = Sn, {
-  block: Tn
-} = k(cr), Nn = {}, F = (e) => {
-  const {
-    className: r,
-    color: t,
-    colorVariant: n,
-    hasShape: o,
-    icon: a,
-    size: s,
-    ref: i,
-    theme: c,
-    alt: u,
-    verticalAlign: l,
-    ...p
-  } = e, [d, f] = tr(t, n);
-  let v = d;
-  !v && (o || c) && (v = c === ee.dark ? _.light : _.dark);
-  let h = f;
-  !h && o && v === _.dark && (h = "L2");
-  let P = s;
-  return s && o ? s === B.xxs || s === B.xs ? P = B.s : s === B.xxl && (P = B.xl) : o && (P = B.m), y("i", $({
-    ref: i
-  }, p, {
-    className: j(r, Tn({
-      [`color-${v}`]: !!v,
-      [`color-variant-${h}`]: !!h,
-      "has-shape": o,
-      [`theme-${c}`]: !!c,
-      [`size-${P}`]: !!P,
-      "no-shape": !o,
-      "has-dark-layer": !o && v === _.yellow && a === er,
-      path: !0,
-      "vertical-align-middle": l === "middle"
-    }))
-  }), [y("svg", {
-    "aria-hidden": u ? void 0 : "true",
-    role: u ? "img" : void 0,
-    "aria-label": u,
-    height: "1em",
-    preserveAspectRatio: "xMidYMid meet",
-    style: {
-      verticalAlign: l ? void 0 : "-0.125em"
-    },
-    viewBox: "0 0 24 24",
-    width: "1em"
-  }, [y("path", {
-    d: a,
-    fill: "currentColor"
-  }, null)])]);
-};
-F.displayName = An;
-F.className = cr;
-F.defaultProps = Nn;
-const jn = "IconButton", Pn = "lumx-icon-button", ze = {
-  emphasis: D.high,
-  size: B.m
-}, K = (e) => {
-  const {
-    emphasis: r = ze.emphasis,
-    image: t,
-    icon: n,
-    label: o,
-    size: a = ze.size,
-    ...s
-  } = e, i = t ? y("img", {
-    alt: "",
-    src: t
-  }, null) : F({
-    icon: n
-  });
-  return H({
-    emphasis: r,
-    size: a,
-    ...s,
-    "aria-label": o,
-    variant: "icon",
-    children: i
-  });
-};
-K.displayName = jn;
-K.className = Pn;
-K.defaultProps = ze;
-const wn = "ButtonGroup", ur = "lumx-button-group", xn = {}, oe = (e) => {
-  const {
-    children: r,
-    className: t,
-    ...n
-  } = e;
-  return y("div", $(n, {
-    className: j(t, ur)
-  }), [r]);
-};
-oe.displayName = wn;
-oe.className = ur;
-oe.defaultProps = xn;
-var ce, it;
-function lr() {
-  if (it) return ce;
-  it = 1;
+var ne, et;
+function rr() {
+  if (et) return ne;
+  et = 1;
   var e = Object.prototype;
-  function r(t) {
-    var n = t && t.constructor, o = typeof n == "function" && n.prototype || e;
-    return t === o;
+  function t(r) {
+    var n = r && r.constructor, a = typeof n == "function" && n.prototype || e;
+    return r === a;
   }
-  return ce = r, ce;
+  return ne = t, ne;
 }
-var ue, ct;
-function Bn() {
-  if (ct) return ue;
-  ct = 1;
-  function e(r, t) {
+var ae, tt;
+function sn() {
+  if (tt) return ae;
+  tt = 1;
+  function e(t, r) {
     return function(n) {
-      return r(t(n));
+      return t(r(n));
     };
   }
-  return ue = e, ue;
-}
-var le, ut;
-function kn() {
-  if (ut) return le;
-  ut = 1;
-  var e = Bn(), r = e(Object.keys, Object);
-  return le = r, le;
-}
-var pe, lt;
-function $n() {
-  if (lt) return pe;
-  lt = 1;
-  var e = lr(), r = kn(), t = Object.prototype, n = t.hasOwnProperty;
-  function o(a) {
-    if (!e(a))
-      return r(a);
+  return ae = e, ae;
+}
+var oe, rt;
+function cn() {
+  if (rt) return oe;
+  rt = 1;
+  var e = sn(), t = e(Object.keys, Object);
+  return oe = t, oe;
+}
+var se, nt;
+function ln() {
+  if (nt) return se;
+  nt = 1;
+  var e = rr(), t = cn(), r = Object.prototype, n = r.hasOwnProperty;
+  function a(o) {
+    if (!e(o))
+      return t(o);
     var s = [];
-    for (var i in Object(a))
-      n.call(a, i) && i != "constructor" && s.push(i);
+    for (var i in Object(o))
+      n.call(o, i) && i != "constructor" && s.push(i);
     return s;
   }
-  return pe = o, pe;
-}
-var fe, pt;
-function pr() {
-  if (pt) return fe;
-  pt = 1;
-  var e = typeof Q == "object" && Q && Q.Object === Object && Q;
-  return fe = e, fe;
+  return se = a, se;
+}
+var ie, at;
+function nr() {
+  if (at) return ie;
+  at = 1;
+  var e = typeof U == "object" && U && U.Object === Object && U;
+  return ie = e, ie;
+}
+var ce, ot;
+function I() {
+  if (ot) return ce;
+  ot = 1;
+  var e = nr(), t = typeof self == "object" && self && self.Object === Object && self, r = e || t || Function("return this")();
+  return ce = r, ce;
 }
-var de, ft;
-function L() {
-  if (ft) return de;
-  ft = 1;
-  var e = pr(), r = typeof self == "object" && self && self.Object === Object && self, t = e || r || Function("return this")();
-  return de = t, de;
+var le, st;
+function ar() {
+  if (st) return le;
+  st = 1;
+  var e = I(), t = e.Symbol;
+  return le = t, le;
 }
-var me, dt;
-function fr() {
-  if (dt) return me;
-  dt = 1;
-  var e = L(), r = e.Symbol;
-  return me = r, me;
-}
-var he, mt;
-function On() {
-  if (mt) return he;
-  mt = 1;
-  var e = fr(), r = Object.prototype, t = r.hasOwnProperty, n = r.toString, o = e ? e.toStringTag : void 0;
-  function a(s) {
-    var i = t.call(s, o), c = s[o];
+var ue, it;
+function un() {
+  if (it) return ue;
+  it = 1;
+  var e = ar(), t = Object.prototype, r = t.hasOwnProperty, n = t.toString, a = e ? e.toStringTag : void 0;
+  function o(s) {
+    var i = r.call(s, a), c = s[a];
     try {
-      s[o] = void 0;
+      s[a] = void 0;
       var u = !0;
     } catch {
     }
     var l = n.call(s);
-    return u && (i ? s[o] = c : delete s[o]), l;
+    return u && (i ? s[a] = c : delete s[a]), l;
   }
-  return he = a, he;
+  return ue = o, ue;
 }
-var be, ht;
-function In() {
-  if (ht) return be;
-  ht = 1;
-  var e = Object.prototype, r = e.toString;
-  function t(n) {
-    return r.call(n);
+var fe, ct;
+function fn() {
+  if (ct) return fe;
+  ct = 1;
+  var e = Object.prototype, t = e.toString;
+  function r(n) {
+    return t.call(n);
   }
-  return be = t, be;
+  return fe = r, fe;
 }
-var ve, bt;
-function ae() {
-  if (bt) return ve;
-  bt = 1;
-  var e = fr(), r = On(), t = In(), n = "[object Null]", o = "[object Undefined]", a = e ? e.toStringTag : void 0;
+var de, lt;
+function X() {
+  if (lt) return de;
+  lt = 1;
+  var e = ar(), t = un(), r = fn(), n = "[object Null]", a = "[object Undefined]", o = e ? e.toStringTag : void 0;
   function s(i) {
-    return i == null ? i === void 0 ? o : n : a && a in Object(i) ? r(i) : t(i);
+    return i == null ? i === void 0 ? a : n : o && o in Object(i) ? t(i) : r(i);
   }
-  return ve = s, ve;
+  return de = s, de;
 }
-var ge, vt;
-function dr() {
-  if (vt) return ge;
-  vt = 1;
-  function e(r) {
-    var t = typeof r;
-    return r != null && (t == "object" || t == "function");
+var pe, ut;
+function or() {
+  if (ut) return pe;
+  ut = 1;
+  function e(t) {
+    var r = typeof t;
+    return t != null && (r == "object" || r == "function");
   }
-  return ge = e, ge;
+  return pe = e, pe;
 }
-var ye, gt;
-function mr() {
-  if (gt) return ye;
-  gt = 1;
-  var e = ae(), r = dr(), t = "[object AsyncFunction]", n = "[object Function]", o = "[object GeneratorFunction]", a = "[object Proxy]";
+var he, ft;
+function sr() {
+  if (ft) return he;
+  ft = 1;
+  var e = X(), t = or(), r = "[object AsyncFunction]", n = "[object Function]", a = "[object GeneratorFunction]", o = "[object Proxy]";
   function s(i) {
-    if (!r(i))
+    if (!t(i))
       return !1;
     var c = e(i);
-    return c == n || c == o || c == t || c == a;
+    return c == n || c == a || c == r || c == o;
   }
-  return ye = s, ye;
+  return he = s, he;
 }
-var _e, yt;
-function En() {
-  if (yt) return _e;
-  yt = 1;
-  var e = L(), r = e["__core-js_shared__"];
-  return _e = r, _e;
+var me, dt;
+function dn() {
+  if (dt) return me;
+  dt = 1;
+  var e = I(), t = e["__core-js_shared__"];
+  return me = t, me;
 }
-var Ae, _t;
-function qn() {
-  if (_t) return Ae;
-  _t = 1;
-  var e = En(), r = (function() {
+var be, pt;
+function pn() {
+  if (pt) return be;
+  pt = 1;
+  var e = dn(), t = (function() {
     var n = /[^.]+$/.exec(e && e.keys && e.keys.IE_PROTO || "");
     return n ? "Symbol(src)_1." + n : "";
   })();
-  function t(n) {
-    return !!r && r in n;
+  function r(n) {
+    return !!t && t in n;
   }
-  return Ae = t, Ae;
+  return be = r, be;
 }
-var Se, At;
-function hr() {
-  if (At) return Se;
-  At = 1;
-  var e = Function.prototype, r = e.toString;
-  function t(n) {
+var ve, ht;
+function ir() {
+  if (ht) return ve;
+  ht = 1;
+  var e = Function.prototype, t = e.toString;
+  function r(n) {
     if (n != null) {
       try {
-        return r.call(n);
+        return t.call(n);
       } catch {
       }
       try {
@@ -653,379 +391,559 @@ function hr() {
     }
     return "";
   }
-  return Se = t, Se;
+  return ve = r, ve;
 }
-var Te, St;
-function Cn() {
-  if (St) return Te;
-  St = 1;
-  var e = mr(), r = qn(), t = dr(), n = hr(), o = /[\\^$.*+?()[\]{}|]/g, a = /^\[object .+?Constructor\]$/, s = Function.prototype, i = Object.prototype, c = s.toString, u = i.hasOwnProperty, l = RegExp(
-    "^" + c.call(u).replace(o, "\\$&").replace(/hasOwnProperty|(function).*?(?=\\\()| for .+?(?=\\\])/g, "$1.*?") + "$"
+var ge, mt;
+function hn() {
+  if (mt) return ge;
+  mt = 1;
+  var e = sr(), t = pn(), r = or(), n = ir(), a = /[\\^$.*+?()[\]{}|]/g, o = /^\[object .+?Constructor\]$/, s = Function.prototype, i = Object.prototype, c = s.toString, u = i.hasOwnProperty, l = RegExp(
+    "^" + c.call(u).replace(a, "\\$&").replace(/hasOwnProperty|(function).*?(?=\\\()| for .+?(?=\\\])/g, "$1.*?") + "$"
   );
-  function p(d) {
-    if (!t(d) || r(d))
+  function f(p) {
+    if (!r(p) || t(p))
       return !1;
-    var f = e(d) ? l : a;
-    return f.test(n(d));
+    var h = e(p) ? l : o;
+    return h.test(n(p));
   }
-  return Te = p, Te;
+  return ge = f, ge;
 }
-var Ne, Tt;
-function Rn() {
-  if (Tt) return Ne;
-  Tt = 1;
-  function e(r, t) {
-    return r?.[t];
+var ye, bt;
+function mn() {
+  if (bt) return ye;
+  bt = 1;
+  function e(t, r) {
+    return t?.[r];
   }
-  return Ne = e, Ne;
+  return ye = e, ye;
 }
-var je, Nt;
-function J() {
-  if (Nt) return je;
-  Nt = 1;
-  var e = Cn(), r = Rn();
-  function t(n, o) {
-    var a = r(n, o);
-    return e(a) ? a : void 0;
+var Ae, vt;
+function D() {
+  if (vt) return Ae;
+  vt = 1;
+  var e = hn(), t = mn();
+  function r(n, a) {
+    var o = t(n, a);
+    return e(o) ? o : void 0;
   }
-  return je = t, je;
+  return Ae = r, Ae;
 }
-var Pe, jt;
-function Mn() {
-  if (jt) return Pe;
-  jt = 1;
-  var e = J(), r = L(), t = e(r, "DataView");
-  return Pe = t, Pe;
+var _e, gt;
+function bn() {
+  if (gt) return _e;
+  gt = 1;
+  var e = D(), t = I(), r = e(t, "DataView");
+  return _e = r, _e;
 }
-var we, Pt;
-function Ln() {
-  if (Pt) return we;
-  Pt = 1;
-  var e = J(), r = L(), t = e(r, "Map");
-  return we = t, we;
+var Te, yt;
+function vn() {
+  if (yt) return Te;
+  yt = 1;
+  var e = D(), t = I(), r = e(t, "Map");
+  return Te = r, Te;
 }
-var xe, wt;
-function Dn() {
-  if (wt) return xe;
-  wt = 1;
-  var e = J(), r = L(), t = e(r, "Promise");
-  return xe = t, xe;
+var Se, At;
+function gn() {
+  if (At) return Se;
+  At = 1;
+  var e = D(), t = I(), r = e(t, "Promise");
+  return Se = r, Se;
 }
-var Be, xt;
-function Fn() {
-  if (xt) return Be;
-  xt = 1;
-  var e = J(), r = L(), t = e(r, "Set");
-  return Be = t, Be;
-}
-var ke, Bt;
-function Vn() {
-  if (Bt) return ke;
-  Bt = 1;
-  var e = J(), r = L(), t = e(r, "WeakMap");
-  return ke = t, ke;
-}
-var $e, kt;
-function Gn() {
-  if (kt) return $e;
-  kt = 1;
-  var e = Mn(), r = Ln(), t = Dn(), n = Fn(), o = Vn(), a = ae(), s = hr(), i = "[object Map]", c = "[object Object]", u = "[object Promise]", l = "[object Set]", p = "[object WeakMap]", d = "[object DataView]", f = s(e), v = s(r), h = s(t), P = s(n), V = s(o), N = a;
-  return (e && N(new e(new ArrayBuffer(1))) != d || r && N(new r()) != i || t && N(t.resolve()) != u || n && N(new n()) != l || o && N(new o()) != p) && (N = function(E) {
-    var G = a(E), Y = G == c ? E.constructor : void 0, X = Y ? s(Y) : "";
-    if (X)
-      switch (X) {
-        case f:
-          return d;
-        case v:
-          return i;
+var Ne, _t;
+function yn() {
+  if (_t) return Ne;
+  _t = 1;
+  var e = D(), t = I(), r = e(t, "Set");
+  return Ne = r, Ne;
+}
+var Pe, Tt;
+function An() {
+  if (Tt) return Pe;
+  Tt = 1;
+  var e = D(), t = I(), r = e(t, "WeakMap");
+  return Pe = r, Pe;
+}
+var je, St;
+function _n() {
+  if (St) return je;
+  St = 1;
+  var e = bn(), t = vn(), r = gn(), n = yn(), a = An(), o = X(), s = ir(), i = "[object Map]", c = "[object Object]", u = "[object Promise]", l = "[object Set]", f = "[object WeakMap]", p = "[object DataView]", h = s(e), b = s(t), y = s(r), N = s(n), E = s(a), T = o;
+  return (e && T(new e(new ArrayBuffer(1))) != p || t && T(new t()) != i || r && T(r.resolve()) != u || n && T(new n()) != l || a && T(new a()) != f) && (T = function(x) {
+    var q = o(x), G = q == c ? x.constructor : void 0, z = G ? s(G) : "";
+    if (z)
+      switch (z) {
         case h:
+          return p;
+        case b:
+          return i;
+        case y:
           return u;
-        case P:
+        case N:
           return l;
-        case V:
-          return p;
+        case E:
+          return f;
       }
-    return G;
-  }), $e = N, $e;
+    return q;
+  }), je = T, je;
 }
-var Oe, $t;
-function tt() {
-  if ($t) return Oe;
-  $t = 1;
-  function e(r) {
-    return r != null && typeof r == "object";
+var ke, Nt;
+function Je() {
+  if (Nt) return ke;
+  Nt = 1;
+  function e(t) {
+    return t != null && typeof t == "object";
   }
-  return Oe = e, Oe;
+  return ke = e, ke;
 }
-var Ie, Ot;
-function Un() {
-  if (Ot) return Ie;
-  Ot = 1;
-  var e = ae(), r = tt(), t = "[object Arguments]";
-  function n(o) {
-    return r(o) && e(o) == t;
+var we, Pt;
+function Tn() {
+  if (Pt) return we;
+  Pt = 1;
+  var e = X(), t = Je(), r = "[object Arguments]";
+  function n(a) {
+    return t(a) && e(a) == r;
   }
-  return Ie = n, Ie;
+  return we = n, we;
 }
-var Ee, It;
-function Wn() {
-  if (It) return Ee;
-  It = 1;
-  var e = Un(), r = tt(), t = Object.prototype, n = t.hasOwnProperty, o = t.propertyIsEnumerable, a = e(/* @__PURE__ */ (function() {
+var xe, jt;
+function Sn() {
+  if (jt) return xe;
+  jt = 1;
+  var e = Tn(), t = Je(), r = Object.prototype, n = r.hasOwnProperty, a = r.propertyIsEnumerable, o = e(/* @__PURE__ */ (function() {
     return arguments;
   })()) ? e : function(s) {
-    return r(s) && n.call(s, "callee") && !o.call(s, "callee");
+    return t(s) && n.call(s, "callee") && !a.call(s, "callee");
   };
-  return Ee = a, Ee;
+  return xe = o, xe;
 }
-var qe, Et;
-function br() {
-  if (Et) return qe;
-  Et = 1;
+var Oe, kt;
+function cr() {
+  if (kt) return Oe;
+  kt = 1;
   var e = Array.isArray;
-  return qe = e, qe;
+  return Oe = e, Oe;
 }
-var Ce, qt;
-function vr() {
-  if (qt) return Ce;
-  qt = 1;
+var Ie, wt;
+function lr() {
+  if (wt) return Ie;
+  wt = 1;
   var e = 9007199254740991;
-  function r(t) {
-    return typeof t == "number" && t > -1 && t % 1 == 0 && t <= e;
+  function t(r) {
+    return typeof r == "number" && r > -1 && r % 1 == 0 && r <= e;
   }
-  return Ce = r, Ce;
+  return Ie = t, Ie;
 }
-var Re, Ct;
-function zn() {
-  if (Ct) return Re;
-  Ct = 1;
-  var e = mr(), r = vr();
-  function t(n) {
-    return n != null && r(n.length) && !e(n);
+var $e, xt;
+function Nn() {
+  if (xt) return $e;
+  xt = 1;
+  var e = sr(), t = lr();
+  function r(n) {
+    return n != null && t(n.length) && !e(n);
   }
-  return Re = t, Re;
+  return $e = r, $e;
 }
-var W = { exports: {} }, Me, Rt;
-function Hn() {
-  if (Rt) return Me;
-  Rt = 1;
+var M = { exports: {} }, Ce, Ot;
+function Pn() {
+  if (Ot) return Ce;
+  Ot = 1;
   function e() {
     return !1;
   }
-  return Me = e, Me;
+  return Ce = e, Ce;
 }
-W.exports;
-var Mt;
-function Kn() {
-  return Mt || (Mt = 1, (function(e, r) {
-    var t = L(), n = Hn(), o = r && !r.nodeType && r, a = o && !0 && e && !e.nodeType && e, s = a && a.exports === o, i = s ? t.Buffer : void 0, c = i ? i.isBuffer : void 0, u = c || n;
+M.exports;
+var It;
+function jn() {
+  return It || (It = 1, (function(e, t) {
+    var r = I(), n = Pn(), a = t && !t.nodeType && t, o = a && !0 && e && !e.nodeType && e, s = o && o.exports === a, i = s ? r.Buffer : void 0, c = i ? i.isBuffer : void 0, u = c || n;
     e.exports = u;
-  })(W, W.exports)), W.exports;
-}
-var Le, Lt;
-function Jn() {
-  if (Lt) return Le;
-  Lt = 1;
-  var e = ae(), r = vr(), t = tt(), n = "[object Arguments]", o = "[object Array]", a = "[object Boolean]", s = "[object Date]", i = "[object Error]", c = "[object Function]", u = "[object Map]", l = "[object Number]", p = "[object Object]", d = "[object RegExp]", f = "[object Set]", v = "[object String]", h = "[object WeakMap]", P = "[object ArrayBuffer]", V = "[object DataView]", N = "[object Float32Array]", E = "[object Float64Array]", G = "[object Int8Array]", Y = "[object Int16Array]", X = "[object Int32Array]", Pr = "[object Uint8Array]", wr = "[object Uint8ClampedArray]", xr = "[object Uint16Array]", Br = "[object Uint32Array]", m = {};
-  m[N] = m[E] = m[G] = m[Y] = m[X] = m[Pr] = m[wr] = m[xr] = m[Br] = !0, m[n] = m[o] = m[P] = m[a] = m[V] = m[s] = m[i] = m[c] = m[u] = m[l] = m[p] = m[d] = m[f] = m[v] = m[h] = !1;
-  function kr(se) {
-    return t(se) && r(se.length) && !!m[e(se)];
+  })(M, M.exports)), M.exports;
+}
+var Be, $t;
+function kn() {
+  if ($t) return Be;
+  $t = 1;
+  var e = X(), t = lr(), r = Je(), n = "[object Arguments]", a = "[object Array]", o = "[object Boolean]", s = "[object Date]", i = "[object Error]", c = "[object Function]", u = "[object Map]", l = "[object Number]", f = "[object Object]", p = "[object RegExp]", h = "[object Set]", b = "[object String]", y = "[object WeakMap]", N = "[object ArrayBuffer]", E = "[object DataView]", T = "[object Float32Array]", x = "[object Float64Array]", q = "[object Int8Array]", G = "[object Int16Array]", z = "[object Int32Array]", _r = "[object Uint8Array]", Tr = "[object Uint8ClampedArray]", Sr = "[object Uint16Array]", Nr = "[object Uint32Array]", m = {};
+  m[T] = m[x] = m[q] = m[G] = m[z] = m[_r] = m[Tr] = m[Sr] = m[Nr] = !0, m[n] = m[a] = m[N] = m[o] = m[E] = m[s] = m[i] = m[c] = m[u] = m[l] = m[f] = m[p] = m[h] = m[b] = m[y] = !1;
+  function Pr(te) {
+    return r(te) && t(te.length) && !!m[e(te)];
   }
-  return Le = kr, Le;
-}
-var De, Dt;
-function Yn() {
-  if (Dt) return De;
-  Dt = 1;
-  function e(r) {
-    return function(t) {
-      return r(t);
+  return Be = Pr, Be;
+}
+var Ee, Ct;
+function wn() {
+  if (Ct) return Ee;
+  Ct = 1;
+  function e(t) {
+    return function(r) {
+      return t(r);
     };
   }
-  return De = e, De;
-}
-var z = { exports: {} };
-z.exports;
-var Ft;
-function Xn() {
-  return Ft || (Ft = 1, (function(e, r) {
-    var t = pr(), n = r && !r.nodeType && r, o = n && !0 && e && !e.nodeType && e, a = o && o.exports === n, s = a && t.process, i = (function() {
+  return Ee = e, Ee;
+}
+var L = { exports: {} };
+L.exports;
+var Bt;
+function xn() {
+  return Bt || (Bt = 1, (function(e, t) {
+    var r = nr(), n = t && !t.nodeType && t, a = n && !0 && e && !e.nodeType && e, o = a && a.exports === n, s = o && r.process, i = (function() {
       try {
-        var c = o && o.require && o.require("util").types;
+        var c = a && a.require && a.require("util").types;
         return c || s && s.binding && s.binding("util");
       } catch {
       }
     })();
     e.exports = i;
-  })(z, z.exports)), z.exports;
-}
-var Fe, Vt;
-function Qn() {
-  if (Vt) return Fe;
-  Vt = 1;
-  var e = Jn(), r = Yn(), t = Xn(), n = t && t.isTypedArray, o = n ? r(n) : e;
-  return Fe = o, Fe;
-}
-var Ve, Gt;
-function Zn() {
-  if (Gt) return Ve;
-  Gt = 1;
-  var e = $n(), r = Gn(), t = Wn(), n = br(), o = zn(), a = Kn(), s = lr(), i = Qn(), c = "[object Map]", u = "[object Set]", l = Object.prototype, p = l.hasOwnProperty;
-  function d(f) {
-    if (f == null)
+  })(L, L.exports)), L.exports;
+}
+var qe, Et;
+function On() {
+  if (Et) return qe;
+  Et = 1;
+  var e = kn(), t = wn(), r = xn(), n = r && r.isTypedArray, a = n ? t(n) : e;
+  return qe = a, qe;
+}
+var Re, qt;
+function In() {
+  if (qt) return Re;
+  qt = 1;
+  var e = ln(), t = _n(), r = Sn(), n = cr(), a = Nn(), o = jn(), s = rr(), i = On(), c = "[object Map]", u = "[object Set]", l = Object.prototype, f = l.hasOwnProperty;
+  function p(h) {
+    if (h == null)
       return !0;
-    if (o(f) && (n(f) || typeof f == "string" || typeof f.splice == "function" || a(f) || i(f) || t(f)))
-      return !f.length;
-    var v = r(f);
-    if (v == c || v == u)
-      return !f.size;
-    if (s(f))
-      return !e(f).length;
-    for (var h in f)
-      if (p.call(f, h))
+    if (a(h) && (n(h) || typeof h == "string" || typeof h.splice == "function" || o(h) || i(h) || r(h)))
+      return !h.length;
+    var b = t(h);
+    if (b == c || b == u)
+      return !h.size;
+    if (s(h))
+      return !e(h).length;
+    for (var y in h)
+      if (f.call(h, y))
         return !1;
     return !0;
   }
-  return Ve = d, Ve;
+  return Re = p, Re;
 }
-var eo = Zn();
-const Ut = /* @__PURE__ */ et(eo), gr = (e = "default") => {
-  const r = Or();
-  return () => {
-    const t = r?.[e];
-    return t ? t() : null;
+var $n = In();
+const Rt = /* @__PURE__ */ Ye($n);
+function Cn(e) {
+  return typeof e == "function" || Object.prototype.toString.call(e) === "[object Object]" && !We(e);
+}
+const Bn = (e) => {
+  const {
+    children: t,
+    onClick: r,
+    disabled: n,
+    isDisabled: a = n,
+    "aria-disabled": o,
+    as: s,
+    ...i
+  } = e, c = a || o === "true" || o === !0, u = s;
+  let l;
+  return u === "button" ? l = {
+    type: i.type || "button",
+    disabled: a
+  } : l = {
+    tabIndex: a ? "-1" : i.tabIndex
+  }, d(u, g(i, l, {
+    "aria-disabled": c || void 0,
+    onClick: (f) => {
+      if (c) {
+        f.stopPropagation(), f.preventDefault();
+        return;
+      }
+      r?.(f);
+    }
+  }), Cn(t) ? t : {
+    default: () => [t]
+  });
+}, En = "ButtonRoot", qn = "lumx-button-wrapper", {
+  block: Rn
+} = k(qn), Mn = "lumx-button", {
+  block: Ln
+} = k(Mn), Dn = (e) => {
+  const {
+    color: t,
+    emphasis: r,
+    variant: n,
+    fullWidth: a
+  } = e, o = r === $.low && (t === v.light ? v.dark : v.light), s = Rn({
+    [`color-${o}`]: !!o,
+    [`variant-${n}`]: !!n,
+    "is-full-width": a
+  }), i = {
+    ...e,
+    hasBackground: !1
   };
-}, to = /* @__PURE__ */ Symbol("DISABLED_STATE_KEY");
-function ro() {
-  return Ye(to, { state: null });
-}
-function yr(e) {
-  const r = ro(), t = g(() => {
-    const o = typeof e == "function" ? e() : b(e);
-    return Ur(r, {
+  return d("div", {
+    className: s
+  }, [F(i)]);
+}, F = (e) => {
+  const {
+    "aria-label": t,
+    "aria-disabled": r,
+    children: n,
+    className: a,
+    color: o,
+    emphasis: s,
+    hasBackground: i,
+    isSelected: c,
+    isActive: u,
+    isFocused: l,
+    isHovered: f,
+    linkAs: p,
+    size: h,
+    theme: b = K.light,
+    variant: y,
+    fullWidth: N,
+    ref: E,
+    ...T
+  } = e, x = o || s !== $.high && b === K.dark && v.light || s === $.high && v.primary || v.dark;
+  if (i)
+    return Dn({
+      ...e,
+      ref: E,
+      variant: y,
+      color: x
+    });
+  const q = S(a, Ln({
+    [`color-${x}`]: !!x,
+    [`emphasis-${s}`]: !!s,
+    "is-selected": c,
+    "is-disabled": !!(e.isDisabled || e["aria-disabled"]),
+    "is-active": u,
+    "is-focused": l,
+    "is-hovered": f,
+    [`size-${h}`]: !!h,
+    [`theme-${b}`]: !!(s === $.high && b),
+    [`variant-${y}`]: !!y,
+    "is-full-width": N
+  }));
+  return Bn({
+    as: p || (T.href ? "a" : "button"),
+    ...T,
+    "aria-disabled": r,
+    "aria-label": t,
+    ref: E,
+    className: q,
+    children: n
+  });
+};
+F.displayName = En;
+F.defaultProps = {};
+const Fn = "Button", ur = "lumx-button", {
+  modifier: Vn
+} = k(ur), De = {
+  emphasis: $.high,
+  size: j.m
+}, Q = (e) => {
+  const {
+    className: t,
+    emphasis: r = De.emphasis,
+    leftIcon: n,
+    rightIcon: a,
+    size: o = De.size,
+    ...s
+  } = e, i = S(t, Vn({
+    "has-left-icon": !!n,
+    "has-right-icon": !!a
+  }));
+  return F({
+    emphasis: r,
+    size: o,
+    ...s,
+    className: i,
+    variant: "button"
+  });
+};
+Q.displayName = Fn;
+Q.className = ur;
+Q.defaultProps = De;
+const Gn = /* @__PURE__ */ Symbol("DISABLED_STATE_KEY");
+function zn() {
+  return Ue(Gn, { state: null });
+}
+function fr(e) {
+  const t = zn(), r = A(() => {
+    const o = typeof e == "function" ? e() : W(e);
+    return Dr(t, {
       disabled: o.disabled,
       isDisabled: o.isDisabled,
-      "aria-disabled": o["aria-disabled"]
+      "aria-disabled": o["aria-disabled"] ?? o.ariaDisabled
     });
-  }), n = g(
-    () => t.value["aria-disabled"] || t.value.disabled
-  );
-  return { disabledStateProps: t, isAnyDisabled: n };
+  }), n = A(
+    () => r.value["aria-disabled"] || r.value.disabled || void 0
+  ), a = A(() => {
+    const o = typeof e == "function" ? e() : W(e), { disabled: s, isDisabled: i, "aria-disabled": c, ariaDisabled: u, onClick: l, onChange: f, ...p } = o;
+    return n.value || (l && (p.onClick = l), f && (p.onChange = f)), p;
+  });
+  return { disabledStateProps: r, isAnyDisabled: n, otherProps: a };
 }
-const Wt = A({
+const Mt = _({
   name: "ResetTheme",
-  setup(e, { slots: r }) {
-    return Qt("theme", void 0), () => r.default?.();
+  setup(e, { slots: t }) {
+    return Vt("theme", void 0), () => t.default?.();
   }
-}), He = /* @__PURE__ */ A({
+}), Un = "Icon", Wn = "lumx-icon", dr = Wn, {
+  block: Hn
+} = k(dr), Kn = {}, B = (e) => {
+  const {
+    className: t,
+    color: r,
+    colorVariant: n,
+    hasShape: a,
+    icon: o,
+    size: s,
+    ref: i,
+    theme: c,
+    alt: u,
+    verticalAlign: l,
+    ...f
+  } = e, [p, h] = Jt(r, n);
+  let b = p;
+  !b && (a || c) && (b = c === K.dark ? v.light : v.dark);
+  let y = h;
+  !y && a && b === v.dark && (y = "L2");
+  let N = s;
+  return s && a ? s === j.xxs || s === j.xs ? N = j.s : s === j.xxl && (N = j.xl) : a && (N = j.m), d("i", g({
+    ref: i
+  }, f, {
+    className: S(t, Hn({
+      [`color-${b}`]: !!b,
+      [`color-variant-${y}`]: !!y,
+      "has-shape": a,
+      [`theme-${c}`]: !!c,
+      [`size-${N}`]: !!N,
+      "no-shape": !a,
+      "has-dark-layer": !a && b === v.yellow && o === Yt,
+      path: !0,
+      "vertical-align-middle": l === "middle"
+    }))
+  }), [d("svg", {
+    "aria-hidden": u ? void 0 : "true",
+    role: u ? "img" : void 0,
+    "aria-label": u,
+    height: "1em",
+    preserveAspectRatio: "xMidYMid meet",
+    style: {
+      verticalAlign: l ? void 0 : "-0.125em"
+    },
+    viewBox: "0 0 24 24",
+    width: "1em"
+  }, [d("path", {
+    d: o,
+    fill: "currentColor"
+  }, null)])]);
+};
+B.displayName = Un;
+B.className = dr;
+B.defaultProps = Kn;
+const Fe = /* @__PURE__ */ _((e) => {
+  const t = P(), r = C({
+    defaultTheme: void 0
+  });
+  return () => d(B, g(e, t, {
+    className: e.class,
+    theme: e.theme || r
+  }), null);
+}, {
+  name: "Icon",
   inheritAttrs: !1,
-  __name: "Icon",
-  props: {
-    color: {},
-    colorVariant: {},
-    hasShape: { type: Boolean },
-    icon: {},
-    size: {},
-    alt: {},
-    verticalAlign: {},
-    className: {},
-    theme: {}
-  },
-  setup(e) {
-    const r = M(F), t = e, n = x(), o = R({ defaultTheme: void 0 });
-    return (a, s) => (S(), T(b(r), O(I({ ...b(n), ...t, theme: t.theme || b(o) })), null, 16));
-  }
-}), no = "lumx-text", {
-  block: oo
-} = k(no), ao = (e) => {
+  // Redefine properties so that they come in as `props` on the `defineComponent` function
+  props: w()("icon", "color", "colorVariant", "hasShape", "size", "alt", "verticalAlign", "theme", "class")
+}), pr = "lumx-text", {
+  block: Yn
+} = k(pr), Jn = (e) => {
   const {
-    className: r,
-    color: t,
+    className: t,
+    color: r,
     colorVariant: n,
-    noWrap: o,
-    typography: a,
+    noWrap: a,
+    typography: o,
     truncate: s,
     whiteSpace: i,
     style: c
   } = e, u = typeof s == "object" && s.lines > 1 && {
     "--lumx-text-truncate-lines": s.lines
-  }, l = !!u, p = !!s, d = !o && !(p && !l) && i && {
+  }, l = !!u, f = !!s, p = !a && !(f && !l) && i && {
     "--lumx-text-white-space": i
   };
   return {
-    className: j(r, oo({
-      "is-truncated": p && !l,
+    className: S(t, Yn({
+      "is-truncated": f && !l,
       "is-truncated-multiline": l,
-      "no-wrap": o
-    }), a && rr(a), t && Zr(t, n)),
+      "no-wrap": a
+    }), o && Xt(o), r && Yr(r, n)),
     style: {
       ...u,
-      ...d,
+      ...p,
       ...c
     }
   };
 };
-function _r(e, r) {
-  return Ir() ? (Er(e, r), !0) : !1;
+function hr(e, t) {
+  return wr() ? (xr(e, t), !0) : !1;
 }
-const so = typeof window < "u" && typeof document < "u";
+const Xn = typeof window < "u" && typeof document < "u";
 typeof WorkerGlobalScope < "u" && globalThis instanceof WorkerGlobalScope;
-const io = (e) => e != null;
-function co(e) {
+const Qn = (e) => e != null;
+function Zn(e) {
   return Array.isArray(e) ? e : [e];
 }
-const Ar = so ? window : void 0;
-function Ke(e) {
-  var r;
-  const t = Ze(e);
-  return (r = t?.$el) !== null && r !== void 0 ? r : t;
+const mr = Xn ? window : void 0;
+function Ve(e) {
+  var t;
+  const r = Ke(e);
+  return (t = r?.$el) !== null && t !== void 0 ? t : r;
 }
 // @__NO_SIDE_EFFECTS__
-function uo() {
-  const e = qr(!1), r = Cr();
-  return r && Rr(() => {
+function ea() {
+  const e = Or(!1), t = Ir();
+  return t && $r(() => {
     e.value = !0;
-  }, r), e;
+  }, t), e;
 }
 // @__NO_SIDE_EFFECTS__
-function Sr(e) {
-  const r = /* @__PURE__ */ uo();
-  return g(() => (r.value, !!e()));
-}
-function lo(e, r, t = {}) {
-  const { window: n = Ar, ...o } = t;
-  let a;
-  const s = /* @__PURE__ */ Sr(() => n && "MutationObserver" in n), i = () => {
-    a && (a.disconnect(), a = void 0);
-  }, c = Qe(g(() => {
-    const p = co(Ze(e)).map(Ke).filter(io);
-    return new Set(p);
-  }), (p) => {
-    i(), s.value && p.size && (a = new MutationObserver(r), p.forEach((d) => a.observe(d, o)));
+function br(e) {
+  const t = /* @__PURE__ */ ea();
+  return A(() => (t.value, !!e()));
+}
+function ta(e, t, r = {}) {
+  const { window: n = mr, ...a } = r;
+  let o;
+  const s = /* @__PURE__ */ br(() => n && "MutationObserver" in n), i = () => {
+    o && (o.disconnect(), o = void 0);
+  }, c = He(A(() => {
+    const f = Zn(Ke(e)).map(Ve).filter(Qn);
+    return new Set(f);
+  }), (f) => {
+    i(), s.value && f.size && (o = new MutationObserver(t), f.forEach((p) => o.observe(p, a)));
   }, {
     immediate: !0,
     flush: "post"
-  }), u = () => a?.takeRecords(), l = () => {
+  }), u = () => o?.takeRecords(), l = () => {
     c(), i();
   };
-  return _r(l), {
+  return hr(l), {
     isSupported: s,
     stop: l,
     takeRecords: u
   };
 }
-function po(e, r, t = {}) {
-  const { window: n = Ar, ...o } = t;
-  let a;
-  const s = /* @__PURE__ */ Sr(() => n && "ResizeObserver" in n), i = () => {
-    a && (a.disconnect(), a = void 0);
-  }, c = Qe(g(() => {
-    const l = Ze(e);
-    return Array.isArray(l) ? l.map((p) => Ke(p)) : [Ke(l)];
+function ra(e, t, r = {}) {
+  const { window: n = mr, ...a } = r;
+  let o;
+  const s = /* @__PURE__ */ br(() => n && "ResizeObserver" in n), i = () => {
+    o && (o.disconnect(), o = void 0);
+  }, c = He(A(() => {
+    const l = Ke(e);
+    return Array.isArray(l) ? l.map((f) => Ve(f)) : [Ve(l)];
   }), (l) => {
     if (i(), s.value && n) {
-      a = new ResizeObserver(r);
-      for (const p of l) p && a.observe(p, o);
+      o = new ResizeObserver(t);
+      for (const f of l) f && o.observe(f, a);
     }
   }, {
     immediate: !0,
@@ -1033,50 +951,57 @@ function po(e, r, t = {}) {
   }), u = () => {
     i(), c();
   };
-  return _r(u), {
+  return hr(u), {
     isSupported: s,
     stop: u
   };
 }
-function fo(e) {
-  const r = Mr(void 0), t = () => {
+function na(e) {
+  const t = Cr(void 0), r = () => {
     const n = e.value;
-    n && !n.closest(`.${Wr.visuallyHidden()}`) && n.offsetWidth < n.scrollWidth ? r.value = n.innerText : r.value = void 0;
+    n && !n.closest(`.${Fr.visuallyHidden()}`) && n.offsetWidth < n.scrollWidth ? t.value = n.innerText : t.value = void 0;
   };
-  return lo(e, t, {
+  return ta(e, r, {
     childList: !0,
     attributes: !0,
     characterData: !0,
     subtree: !0
-  }), po(e, t), Qe(e, t, { immediate: !0 }), { tooltipLabel: r };
+  }), ra(e, r), He(e, r, { immediate: !0 }), { tooltipLabel: t };
 }
-function Je(e) {
+const aa = (e = "default") => {
+  const t = Gt();
+  return () => {
+    const r = t?.[e];
+    return r ? r() : null;
+  };
+};
+function Ge(e) {
   if (!e) return;
-  const r = [];
-  for (const t of e) {
-    if (!Xe(t)) {
-      r.push(t);
+  const t = [];
+  for (const r of e) {
+    if (!We(r)) {
+      t.push(r);
       continue;
     }
-    if (t.type === He) {
-      r.push(" "), r.push(t), r.push(" ");
+    if (r.type === Fe) {
+      t.push(" "), t.push(r), t.push(" ");
       continue;
     }
-    if (t.type === Lr && Array.isArray(t.children)) {
-      const n = Je(t.children);
-      n && r.push(...n);
+    if (r.type === zt && Array.isArray(r.children)) {
+      const n = Ge(r.children);
+      n && t.push(...n);
       continue;
     }
-    if (typeof t.type == "string" && Array.isArray(t.children)) {
-      const n = Je(t.children), o = { ...t.props || {} };
-      t.key != null && (o.key = t.key), t.ref != null && (o.ref = t.ref), r.push(y(t.type, o, n));
+    if (typeof r.type == "string" && Array.isArray(r.children)) {
+      const n = Ge(r.children), a = { ...r.props || {} };
+      r.key != null && (a.key = r.key), r.ref != null && (a.ref = r.ref), t.push(d(r.type, a, n));
       continue;
     }
-    r.push(t);
+    t.push(r);
   }
-  return r;
+  return t;
 }
-const rt = /* @__PURE__ */ A({
+const Z = /* @__PURE__ */ _({
   inheritAttrs: !1,
   __name: "Text",
   props: {
@@ -1087,137 +1012,172 @@ const rt = /* @__PURE__ */ A({
     truncate: { type: [Boolean, Object] },
     noWrap: { type: Boolean },
     whiteSpace: {},
-    children: { type: [Boolean, Number, String, null] },
+    children: {},
+    style: {},
     className: {}
   },
   setup(e) {
-    const r = e, t = x(), n = gr(), o = Dr("tooltip-label"), { tooltipLabel: a } = fo(o), s = g(
-      () => ao({
-        ...r,
-        className: t.class
+    const t = e, r = P(), n = aa(), a = Br("tooltip-label"), { tooltipLabel: o } = na(a), s = A(
+      () => Jn({
+        ...t,
+        className: t.className || r.class
       })
     ), i = () => {
       const u = n();
-      return u ? Je(u) : null;
-    }, c = g(() => ({ ...t, ...s.value }));
-    return (u, l) => (S(), T(Zt(r.as), $({ ref: "tooltip-label" }, c.value, {
+      return u ? Ge(u) : null;
+    }, c = A(() => ({ ...r, ...s.value }));
+    return (u, l) => (Ut(), Wt(Er(t.as), g({ ref: "tooltip-label" }, c.value, {
       class: c.value.className,
       style: c.value.style,
-      title: b(a)
+      title: W(o)
     }), {
-      default: w(() => [
-        y(i)
+      default: Ht(() => [
+        d(i)
       ]),
       _: 1
     }, 16, ["class", "style", "title"]));
   }
-}), zt = {
+}), oa = {
   click: (e) => e instanceof MouseEvent
-}, Go = /* @__PURE__ */ A({
+}, Da = /* @__PURE__ */ _((e, {
+  emit: t
+}) => {
+  const r = Gt(), n = P(), a = C(), {
+    isAnyDisabled: o,
+    disabledStateProps: s,
+    otherProps: i
+  } = fr(A(() => ({
+    ...e,
+    ...n
+  }))), c = (l) => {
+    o.value || (l.stopImmediatePropagation(), t("click", l));
+  }, u = () => {
+    const l = r.default?.();
+    return !l || l.length === 0 ? null : l.length === 1 && l[0].type === Z ? l[0] : d("span", null, [l]);
+  };
+  return () => {
+    const l = d(zt, null, [e.leftIcon && !Rt(e.leftIcon) && d(Mt, null, {
+      default: () => [d(Fe, {
+        icon: e.leftIcon
+      }, null)]
+    }), u(), e.rightIcon && !Rt(e.rightIcon) && d(Mt, null, {
+      default: () => [d(Fe, {
+        icon: e.rightIcon
+      }, null)]
+    })]);
+    return d(Q, g(i.value, s.value, {
+      className: e.class,
+      theme: e.theme || a,
+      onClick: c,
+      children: l
+    }), null);
+  };
+}, {
+  name: "LumxButton",
   inheritAttrs: !1,
-  __name: "Button",
-  props: {
-    leftIcon: {},
-    rightIcon: {},
-    fullWidth: { type: Boolean },
-    children: { type: [Boolean, Number, String, null] }
-  },
-  emits: zt,
-  setup(e, { emit: r }) {
-    const t = e, n = x(), o = R(), a = gr(), { isAnyDisabled: s, disabledStateProps: i } = yr(g(() => ({ ...t, ...n }))), u = M(ne, { emit: r, events: Object.keys(zt) }), l = g(() => ({
-      ...n,
-      ...t,
-      ...i.value,
-      theme: t.theme || n.theme || o,
-      "aria-disabled": s.value
-    })), p = g(() => !Ut(t.leftIcon)), d = g(() => !Ut(t.rightIcon)), f = A({
-      props: ["content"],
-      setup(v) {
-        return () => {
-          const h = v.content;
-          return !h || h.length === 0 ? null : h.length === 1 && h[0].type === rt ? h[0] : Fr("span", h);
-        };
-      }
-    });
-    return (v, h) => (S(), T(b(u), O(I(l.value)), {
-      default: w(() => [
-        p.value ? (S(), T(b(Wt), { key: 0 }, {
-          default: w(() => [
-            y(He, {
-              icon: t.leftIcon
-            }, null, 8, ["icon"])
-          ]),
-          _: 1
-        })) : ot("", !0),
-        y(b(f), {
-          content: b(a)()
-        }, null, 8, ["content"]),
-        d.value ? (S(), T(b(Wt), { key: 1 }, {
-          default: w(() => [
-            y(He, {
-              icon: t.rightIcon
-            }, null, 8, ["icon"])
-          ]),
-          _: 1
-        })) : ot("", !0)
-      ]),
-      _: 1
-    }, 16));
-  }
-}), Ht = {
+  // Redefine properties so that they come in as `props` on the `defineComponent` function
+  props: w()("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: oa
+}), sa = "IconButton", ia = "lumx-icon-button", ze = {
+  emphasis: $.high,
+  size: j.m
+}, V = (e) => {
+  const {
+    emphasis: t = ze.emphasis,
+    image: r,
+    icon: n,
+    label: a,
+    size: o = ze.size,
+    ...s
+  } = e, i = r ? d("img", {
+    alt: "",
+    src: r
+  }, null) : B({
+    icon: n
+  });
+  return F({
+    emphasis: t,
+    size: o,
+    ...s,
+    "aria-label": a,
+    variant: "icon",
+    children: i
+  });
+};
+V.displayName = sa;
+V.className = ia;
+V.defaultProps = ze;
+const ca = {
   click: (e) => e instanceof MouseEvent
-}, Uo = /* @__PURE__ */ A({
+}, Fa = /* @__PURE__ */ _((e, {
+  emit: t
+}) => {
+  const r = P(), n = C(), {
+    isAnyDisabled: a,
+    disabledStateProps: o,
+    otherProps: s
+  } = fr(A(() => ({
+    ...e,
+    ...r
+  }))), i = (c) => {
+    a.value || (c.stopImmediatePropagation(), t("click", c));
+  };
+  return () => d(V, g(s.value, o.value, {
+    className: e.class,
+    theme: e.theme || n,
+    title: e.label,
+    onClick: i
+  }), null);
+}, {
+  name: "IconButton",
   inheritAttrs: !1,
-  __name: "IconButton",
-  props: {
-    icon: {},
-    image: {},
-    label: {}
-  },
-  emits: Ht,
-  setup(e, { emit: r }) {
-    const t = e, n = x(), o = R(), s = M(K, { emit: r, events: Object.keys(Ht) }), { isAnyDisabled: i, disabledStateProps: c } = yr(g(() => ({ ...t, ...n }))), u = g(() => ({
-      ...n,
-      ...t,
-      ...c.value,
-      title: t.label,
-      theme: t.theme || n.theme || o,
-      "aria-disabled": i.value
-    }));
-    return (l, p) => (S(), T(b(s), O(I(u.value)), null, 16));
-  }
-}), Wo = /* @__PURE__ */ A({
+  // Redefine properties so that they come in as `props` on the `defineComponent` function
+  props: w()("icon", "image", "label", "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", "isDisabled", "linkAs", "target", "type", "title"),
+  emits: ca
+}), la = "ButtonGroup", vr = "lumx-button-group", ua = {}, ee = (e) => {
+  const {
+    children: t,
+    className: r,
+    ...n
+  } = e;
+  return d("div", g(n, {
+    className: S(r, vr)
+  }), [t]);
+};
+ee.displayName = la;
+ee.className = vr;
+ee.defaultProps = ua;
+const Va = /* @__PURE__ */ _((e, {
+  slots: t
+}) => {
+  const r = P();
+  return () => d(ee, g(e, r, {
+    className: e.class,
+    children: t.default?.()
+  }), null);
+}, {
+  name: "ButtonGroup",
   inheritAttrs: !1,
-  __name: "ButtonGroup",
-  props: {
-    children: { type: [Boolean, Number, String, null] },
-    className: {}
-  },
-  setup(e) {
-    const r = e, t = x(), n = R(), o = M(oe);
-    return (a, s) => (S(), T(b(o), O(I({ ...b(t), ...r, theme: r.theme || b(n) })), {
-      default: w(() => [
-        C(a.$slots, "default")
-      ]),
-      _: 3
-    }, 16));
-  }
-}), Kt = 6, mo = {
-  h1: U.display1,
-  h2: U.headline,
-  h3: U.title,
-  h4: U.subtitle2,
-  h5: U.subtitle1,
-  h6: U.body2
-}, ho = { level: 1, headingElement: "h1" }, bo = "lumx-heading", vo = (e, r) => {
-  const { as: t, className: n, typography: o, ...a } = e, s = t || r || "h1";
+  // Redefine properties so that they come in as `props` on the `defineComponent` function
+  props: w()("class")
+});
+Z.className = pr;
+const Lt = 6, fa = {
+  h1: R.display1,
+  h2: R.headline,
+  h3: R.title,
+  h4: R.subtitle2,
+  h5: R.subtitle1,
+  h6: R.body2
+}, da = { level: 1, headingElement: "h1" }, pa = "lumx-heading", ha = (e, t) => {
+  const { as: r, className: n, typography: a, ...o } = e, s = r || t || "h1";
   return {
-    ...a,
+    ...o,
     as: s,
-    className: j(n, bo),
-    typography: o || mo[s]
+    className: S(n, pa),
+    typography: a || fa[s]
   };
-}, Tr = /* @__PURE__ */ Symbol("HeadingLevelContext"), Nr = () => Ye(Tr, ho), zo = /* @__PURE__ */ A({
+}, gr = /* @__PURE__ */ Symbol("HeadingLevelContext"), yr = () => Ue(gr, da), Ga = /* @__PURE__ */ _({
   inheritAttrs: !1,
   __name: "Heading",
   props: {
@@ -1228,274 +1188,258 @@ const rt = /* @__PURE__ */ A({
     truncate: { type: [Boolean, Object] },
     noWrap: { type: Boolean },
     whiteSpace: {},
-    children: { type: [Boolean, Number, String, null] },
+    children: {},
+    style: {},
     className: {}
   },
   setup(e) {
-    const r = e, t = x(), n = R(), o = Nr(), a = g(() => {
-      const { className: s, ...i } = vo(
+    const t = e, r = P(), n = C(), a = yr(), o = A(() => {
+      const { className: s, ...i } = ha(
         {
-          ...t,
           ...r,
-          className: t.class
+          ...t,
+          className: r.class
         },
-        o.headingElement
+        a.headingElement
       );
       return {
         ...i,
         class: s,
-        theme: r.theme || t.theme || n
+        theme: t.theme || r.theme || n
       };
     });
-    return (s, i) => (S(), T(b(rt), O(I(a.value)), {
-      default: w(() => [
-        C(s.$slots, "default")
+    return (s, i) => (Ut(), Wt(W(Z), qr(Rr(o.value)), {
+      default: Ht(() => [
+        Kt(s.$slots, "default")
       ]),
       _: 3
     }, 16));
   }
-}), go = (e, r) => {
-  const t = e || r + 1;
-  return t > Kt ? Kt : t;
-}, Ho = /* @__PURE__ */ A({
+}), ma = (e, t) => {
+  const r = e || t + 1;
+  return r > Lt ? Lt : r;
+}, za = /* @__PURE__ */ _({
   name: "HeadingLevelProvider",
   __name: "HeadingLevelProvider",
   props: {
     level: {}
   },
   setup(e) {
-    const r = e, { level: t } = Vr(r), n = Nr(), o = g(() => go(t?.value, n.level)), a = g(() => `h${o.value}`), s = Gr({
-      level: o,
-      headingElement: a
+    const t = e, { level: r } = Mr(t), n = yr(), a = A(() => ma(r?.value, n.level)), o = A(() => `h${a.value}`), s = Lr({
+      level: a,
+      headingElement: o
     });
-    return Qt(Tr, s), (i, c) => C(i.$slots, "default");
+    return Vt(gr, s), (i, c) => Kt(i.$slots, "default");
   }
-}), yo = "Message", jr = "lumx-message", {
-  block: _o,
-  element: Ge
-} = k(jr), Ao = {
-  [q.error]: {
-    color: _.red,
-    icon: zr
+}), ba = "Message", Ar = "lumx-message", {
+  block: va,
+  element: Me
+} = k(Ar), ga = {
+  [O.error]: {
+    color: v.red,
+    icon: Vr
   },
-  [q.info]: {
-    color: _.blue,
-    icon: Jr
+  [O.info]: {
+    color: v.blue,
+    icon: Ur
   },
-  [q.success]: {
-    color: _.green,
-    icon: Hr
+  [O.success]: {
+    color: v.green,
+    icon: Gr
   },
-  [q.warning]: {
-    color: _.yellow,
-    icon: er
+  [O.warning]: {
+    color: v.yellow,
+    icon: Yt
   }
-}, nt = (e) => {
+}, Xe = (e) => {
   const {
-    children: r,
-    className: t,
+    children: t,
+    className: r,
     hasBackground: n,
-    kind: o,
-    icon: a,
+    kind: a,
+    icon: o,
     closeButtonProps: s,
-    ...i
+    ref: i,
+    ...c
   } = e, {
-    color: c,
-    icon: u
-  } = Ao[o] || {}, {
-    onClick: l,
+    color: u,
+    icon: l
+  } = ga[a] || {}, {
+    onClick: f,
     label: p
-  } = s || {}, d = n && o === "info" && l && p;
-  return y("div", $(i, {
-    className: j(t, _o({
-      [`color-${c}`]: !!c,
+  } = s || {}, h = n && a === "info" && f && p;
+  return d("div", g(c, {
+    ref: i,
+    className: S(r, va({
+      [`color-${u}`]: !!u,
       "has-background": n
     }))
-  }), [(a || u) && F({
-    className: Ge("icon"),
-    icon: a || u,
-    size: B.xs,
-    color: c
-  }), y("div", {
-    className: Ge("text")
-  }, [r]), d && K({
-    className: Ge("close-button"),
-    icon: Kr,
-    onClick: l,
+  }), [(o || l) && B({
+    className: Me("icon"),
+    icon: o || l,
+    size: j.xs,
+    color: u
+  }), d("div", {
+    className: Me("text")
+  }, [t]), h && V({
+    className: Me("close-button"),
+    icon: zr,
+    onClick: f,
     label: p,
-    emphasis: D.low
+    emphasis: $.low
   })]);
 };
-nt.displayName = yo;
-nt.className = jr;
-const Ko = /* @__PURE__ */ A({
+Xe.displayName = ba;
+Xe.className = Ar;
+const Ua = /* @__PURE__ */ _((e, {
+  slots: t,
+  emit: r
+}) => {
+  const n = P(), {
+    closeButtonLabel: a
+  } = e;
+  return () => d(Xe, g(e, n, {
+    className: e.class,
+    children: t.default?.(),
+    closeButtonProps: a ? {
+      label: a,
+      onClick: () => r("close")
+    } : void 0
+  }), null);
+}, {
+  name: "Message",
   inheritAttrs: !1,
-  __name: "Message",
-  props: {
-    children: { type: [Boolean, Number, String, null] },
-    hasBackground: { type: Boolean },
-    kind: {},
-    icon: {},
-    closeButtonProps: {},
-    className: {}
-  },
-  setup(e) {
-    const r = e, t = x(), n = M(nt);
-    return (o, a) => (S(), T(b(n), O(I({ ...b(t), ...r })), {
-      default: w(() => [
-        C(o.$slots, "default")
-      ]),
-      _: 3
-    }, 16));
-  }
+  // Redefine properties so that they come in as `props` on the `defineComponent` function
+  props: w()("hasBackground", "icon", "kind", "class", "closeButtonLabel"),
+  emits: ["close"]
 });
-function So(e) {
-  return typeof e == "function" || Object.prototype.toString.call(e) === "[object Object]" && !Xe(e);
+function ya(e) {
+  return typeof e == "function" || Object.prototype.toString.call(e) === "[object Object]" && !We(e);
 }
-const To = "lumx-flag", {
-  block: No,
-  element: Jt
-} = k(To), jo = (e, r) => {
+const Aa = "lumx-flag", {
+  block: _a,
+  element: Dt
+} = k(Aa), Ta = (e) => {
   const {
-    Text: t
-  } = r || {}, {
-    children: n,
-    icon: o,
-    color: a,
-    className: s,
-    theme: i,
-    truncate: c,
-    ...u
-  } = e, l = a || (i === ee.light ? _.dark : _.light), p = !!c;
-  return y("div", $(u, {
-    className: j(s, No({
-      [`color-${l}`]: !!l,
-      "is-truncated": p
+    children: t,
+    icon: r,
+    color: n,
+    className: a,
+    theme: o,
+    truncate: s,
+    Text: i,
+    ...c
+  } = e, u = n || (o === K.light ? v.dark : v.light), l = !!s;
+  return d("div", g(c, {
+    className: S(a, _a({
+      [`color-${u}`]: !!u,
+      "is-truncated": l
     }))
-  }), [o && F({
-    icon: o,
-    size: B.xxs,
-    className: Jt("icon")
-  }), y(t, {
+  }), [r && B({
+    icon: r,
+    size: j.xxs,
+    className: Dt("icon")
+  }), d(i, {
     as: "span",
-    truncate: !!e.truncate,
+    truncate: !!s,
     typography: "overline",
-    className: Jt("label")
-  }, So(n) ? n : {
-    default: () => [n]
+    className: Dt("label")
+  }, ya(t) ? t : {
+    default: () => [t]
   })]);
-}, Jo = /* @__PURE__ */ A({
+}, Wa = /* @__PURE__ */ _((e, {
+  slots: t
+}) => {
+  const r = P(), n = C();
+  return () => d(Ta, g(e, r, {
+    className: e.class,
+    theme: e.theme || n,
+    children: t.default?.(),
+    Text: Z
+  }), null);
+}, {
+  name: "Flag",
   inheritAttrs: !1,
-  __name: "Flag",
-  props: {
-    color: {},
-    icon: {},
-    children: { type: [Boolean, Number, String, null] },
-    truncate: { type: Boolean },
-    className: {},
-    theme: {}
-  },
-  setup(e) {
-    const r = M(jo, { nestedComponents: { Text: rt } }), t = e, n = x(), o = R(), a = g(() => ({
-      ...n,
-      ...t,
-      theme: t.theme || n.theme || o || Xt.light
-    }));
-    return (s, i) => (S(), T(b(r), O(I(a.value)), {
-      default: w(() => [
-        C(s.$slots, "default")
-      ]),
-      _: 3
-    }, 16));
-  }
+  // Redefine properties so that they come in as `props` on the `defineComponent` function
+  props: w()("color", "icon", "truncate", "theme", "class")
 });
-var Ue, Yt;
-function Po() {
-  if (Yt) return Ue;
-  Yt = 1;
-  var e = br();
-  function r() {
+var Le, Ft;
+function Sa() {
+  if (Ft) return Le;
+  Ft = 1;
+  var e = cr();
+  function t() {
     if (!arguments.length)
       return [];
-    var t = arguments[0];
-    return e(t) ? t : [t];
+    var r = arguments[0];
+    return e(r) ? r : [r];
   }
-  return Ue = r, Ue;
+  return Le = t, Le;
 }
-var wo = Po();
-const xo = /* @__PURE__ */ et(wo), Bo = "lumx-flex-box", {
-  block: ko
-} = k(Bo);
-function $o(e) {
+var Na = Sa();
+const Pa = /* @__PURE__ */ Ye(Na), ja = "lumx-flex-box", {
+  block: ka
+} = k(ja);
+function wa(e) {
   const {
-    className: r,
-    fillSpace: t,
+    className: t,
+    fillSpace: r,
     gap: n,
-    hAlign: o,
-    marginAuto: a,
+    hAlign: a,
+    marginAuto: o,
     noShrink: s,
     vAlign: i,
     wrap: c,
     orientation: u,
     ...l
-  } = e, p = u ?? (c || o || i ? en.horizontal : null);
+  } = e, f = u ?? (c || a || i ? Jr.horizontal : null);
   return {
     ...l,
-    className: j(r, ko({
-      [`orientation-${p}`]: !!p,
+    className: S(t, ka({
+      [`orientation-${f}`]: !!f,
       [`v-align-${i}`]: !!i,
-      [`h-align-${o}`]: !!o,
+      [`h-align-${a}`]: !!a,
       [`gap-${n}`]: !!n,
       wrap: !!c,
-      "fill-space": t,
+      "fill-space": r,
       "no-shrink": s,
-      ...Object.fromEntries(xo(a).filter(Boolean).map((d) => [`margin-auto-${d}`, !0]))
+      ...Object.fromEntries(Pa(o).filter(Boolean).map((p) => [`margin-auto-${p}`, !0]))
     }))
   };
 }
-const Yo = /* @__PURE__ */ A({
+const Ha = /* @__PURE__ */ _((e, {
+  slots: t
+}) => {
+  const r = P();
+  return () => {
+    const n = e.as || "div", a = wa({
+      ...e,
+      ...r,
+      className: e.class
+    });
+    return d(n, a, {
+      default: () => [t.default?.()]
+    });
+  };
+}, {
+  name: "FlexBox",
   inheritAttrs: !1,
-  __name: "FlexBox",
-  props: {
-    as: {},
-    fillSpace: { type: Boolean },
-    gap: {},
-    hAlign: {},
-    marginAuto: {},
-    noShrink: { type: Boolean },
-    orientation: {},
-    vAlign: {},
-    wrap: { type: Boolean },
-    className: {}
-  },
-  setup(e) {
-    const r = e, t = x(), n = g(() => ({
-      ...t,
-      ...$o({ ...r, className: t.class })
-    }));
-    return (o, a) => (S(), T(Zt(r.as || "div"), $(n.value, {
-      class: n.value.className
-    }), {
-      default: w(() => [
-        C(o.$slots, "default")
-      ]),
-      _: 3
-    }, 16, ["class"]));
-  }
+  // Redefine properties so that they come in as `props` on the `defineComponent` function
+  props: w()("as", "fillSpace", "gap", "hAlign", "marginAuto", "noShrink", "orientation", "vAlign", "wrap", "class")
 });
 export {
-  Go as Button,
-  Wo as ButtonGroup,
-  Jo as Flag,
-  Yo as FlexBox,
-  zo as Heading,
-  Ho as HeadingLevelProvider,
-  He as Icon,
-  Uo as IconButton,
-  Fo as InputHelper,
-  Vo as InputLabel,
-  Ko as Message,
-  rt as Text,
-  Nr as useHeadingLevel
+  Da as Button,
+  Va as ButtonGroup,
+  Wa as Flag,
+  Ha as FlexBox,
+  Ga as Heading,
+  za as HeadingLevelProvider,
+  Fe as Icon,
+  Fa as IconButton,
+  Ma as InputHelper,
+  La as InputLabel,
+  Ua as Message,
+  Z as Text,
+  yr as useHeadingLevel
 };
 //# sourceMappingURL=index.js.map