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

package/index.js

@@ -1,111 +1,113 @@
-import { ColorVariant as wr, Theme as Kt } 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 q, inject as Je, defineComponent as T, useAttrs as k, openBlock as A, createBlock as N, unref as b, normalizeProps as O, guardReactiveProps as I, withCtx as x, renderSlot as D, isVNode as Ye, useSlots as xr, computed as g, provide as Jt, getCurrentScope as kr, onScopeDispose as Or, watch as Xe, toValue as Qe, shallowRef as Ir, getCurrentInstance as $r, onMounted as Br, ref as Er, Fragment as qr, useTemplateRef as Cr, resolveDynamicComponent as Rr, h as Mr, createCommentVNode as rt, toRefs as Lr, reactive as Dr } from "vue";
-import { getDisabledState as Fr } from "@lumx/core/js/utils/disabledState";
+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 Vr } from "@lumx/core/js/utils";
-import { mdiAlert as Gr } from '@lumx/icons/esm/alert.js';
-import { mdiCheckCircle as Ur } from '@lumx/icons/esm/check-circle.js';
-import { mdiClose as Wr } from '@lumx/icons/esm/close.js';
-import { mdiInformation as Hr } 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 Xt(e) {
+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 nt;
-function zr() {
-  return nt || (nt = 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 Kr = zr();
-const P = /* @__PURE__ */ Xt(Kr);
-function Qt(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 Jr(e, r, t) {
-  const [n, o = wr.N] = Qt(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 Yr = (e, r) => Jr("font", e, r);
-function Zt(e) {
+const Yr = (e, t) => Kr("font", e, t);
+function Xt(e) {
   return `lumx-typography-${e}`;
 }
-function er(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 : P(
+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 ? er(e, n) : null
+    n ? Qt(e, n) : null
   );
 }
-function ot(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 $(e) {
-  function r(n, o) {
-    return Array.isArray(n) ? Z(e, n) : Z(e, n, o);
+function k(e) {
+  function t(n, a) {
+    return Array.isArray(n) ? H(e, n) : H(e, n, a);
   }
-  function t(n, o, a) {
-    return Array.isArray(o) ? ot(e, n, o) : ot(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) => er(e, n)
+    block: t,
+    element: r,
+    modifier: (n) => Qt(e, n)
   };
 }
-const ee = {
+const K = {
   light: "light",
   dark: "dark"
-}, w = {
+}, j = {
   xxs: "xxs",
   xs: "xs",
   s: "s",
   m: "m",
   xl: "xl",
   xxl: "xxl"
-}, L = {
+}, Jr = {
+  horizontal: "horizontal"
+}, $ = {
   low: "low",
   high: "high"
 }, Xr = {
@@ -118,14 +120,14 @@ const ee = {
   title: "title",
   headline: "headline",
   display1: "display1"
-}, U = {
+}, R = {
   ...Xr
-}, E = {
+}, O = {
   info: "info",
   success: "success",
   warning: "warning",
   error: "error"
-}, _ = {
+}, v = {
   primary: "primary",
   blue: "blue",
   dark: "dark",
@@ -134,514 +136,252 @@ const ee = {
   red: "red",
   light: "light"
 }, Qr = {
-  [E.error]: { color: "red" },
-  [E.success]: { color: "green" },
-  [E.warning]: { color: "yellow" }
-}, Zr = "InputHelper", en = "lumx-input-helper", tr = en, {
+  [O.error]: { color: "red" },
+  [O.success]: { color: "green" },
+  [O.warning]: { color: "yellow" }
+}, Zr = "InputHelper", en = "lumx-input-helper", Zt = en, {
   block: tn
-} = $(tr), rr = {
-  kind: E.info
+} = k(Zt), er = {
+  kind: O.info
 };
-function te(e) {
+function Y(e) {
   const {
-    children: r,
-    className: t,
-    kind: n = rr.kind,
-    theme: o,
-    ref: a,
+    children: t,
+    className: r,
+    kind: n = er.kind,
+    theme: a,
+    ref: o,
     ...s
   } = e, {
     color: i
   } = Qr[n] || {};
-  return y("p", q({
-    ref: a
+  return d("p", g({
+    ref: o
   }, s, {
-    className: P(t, tn({
+    className: S(r, tn({
       [`color-${i}`]: !!i,
-      [`theme-${o}`]: !!o
+      [`theme-${a}`]: !!a
     }))
-  }), [r]);
-}
-te.displayName = Zr;
-te.className = tr;
-te.defaultProps = rr;
-function C(e = { defaultTheme: Kt.light }) {
-  const { defaultTheme: r } = e;
-  return Je("theme", r);
-}
-const R = (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;
-}, $o = /* @__PURE__ */ T({
+  }), [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 = k(), n = C(), o = R(te);
-    return (a, s) => (A(), N(b(o), O(I({ ...b(t), ...r, theme: r.theme || b(n) })), {
-      default: x(() => [
-        D(a.$slots, "default")
-      ]),
-      _: 3
-    }, 16));
-  }
-}), rn = "InputLabel", nn = "lumx-input-label", nr = nn, {
-  block: on
-} = $(nr), an = {};
-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", q({
+  return d("label", g({
     ref: i
   }, c, {
     htmlFor: n,
-    className: P(t, on({
-      "is-required": o,
-      [`theme-${a}`]: !!a,
+    className: S(r, an({
+      "is-required": a,
+      [`theme-${o}`]: !!o,
       "has-custom-typography": !!s
-    }), s && Zt(s))
-  }), [r]);
+    }), s && Xt(s))
+  }), [t]);
 }
-re.displayName = rn;
-re.className = nr;
-re.defaultProps = an;
-const Bo = /* @__PURE__ */ 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 = R(re), t = e, n = k(), o = C();
-    return (a, s) => (A(), N(b(r), O(I({ ...t, ...b(n), theme: t.theme || b(o) })), {
-      default: x(() => [
-        D(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 sn(e) {
-  return typeof e == "function" || Object.prototype.toString.call(e) === "[object Object]" && !Ye(e);
-}
-const cn = (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, q({
-    "aria-disabled": c || void 0
-  }, i, l, {
-    onClick: (p) => {
-      if (c) {
-        p.stopPropagation(), p.preventDefault();
-        return;
-      }
-      t?.(p);
-    }
-  }), sn(r) ? r : {
-    default: () => [r]
-  });
-}, un = "ButtonRoot", ln = "lumx-button-wrapper", {
-  block: pn
-} = $(ln), fn = "lumx-button", {
-  block: dn
-} = $(fn), mn = (e) => {
-  const {
-    color: r,
-    emphasis: t,
-    variant: n,
-    fullWidth: o
-  } = e, a = t === L.low && (r === _.light ? _.dark : _.light), s = pn({
-    [`color-${a}`]: !!a,
-    [`variant-${n}`]: !!n,
-    "is-full-width": o
-  }), i = {
-    ...e,
-    hasBackground: !1
-  };
-  return y("div", {
-    className: s
-  }, [z(i)]);
-}, z = (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: j,
-    ref: V,
-    ...S
-  } = e, B = a || s !== L.high && v === ee.dark && _.light || s === L.high && _.primary || _.dark;
-  if (i)
-    return mn({
-      ...e,
-      ref: V,
-      variant: h,
-      color: B
-    });
-  const G = P(o, dn({
-    [`color-${B}`]: !!B,
-    [`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 === L.high && v),
-    [`variant-${h}`]: !!h,
-    "is-full-width": j
-  }));
-  return cn({
-    as: d || (S.href ? "a" : "button"),
-    ...S,
-    "aria-disabled": t,
-    "aria-label": r,
-    ref: V,
-    className: G,
-    children: n
-  });
-};
-z.displayName = un;
-z.defaultProps = {};
-const hn = "Button", or = "lumx-button", {
-  modifier: bn
-} = $(or), Ue = {
-  emphasis: L.high,
-  size: w.m
-}, ne = (e) => {
-  const {
-    className: r,
-    emphasis: t = Ue.emphasis,
-    leftIcon: n,
-    rightIcon: o,
-    size: a = Ue.size,
-    ...s
-  } = e, i = P(r, bn({
-    "has-left-icon": !!n,
-    "has-right-icon": !!o
-  }));
-  return z({
-    emphasis: t,
-    size: a,
-    ...s,
-    className: i,
-    variant: "button"
-  });
-};
-ne.displayName = hn;
-ne.className = or;
-ne.defaultProps = Ue;
-const vn = "Icon", yn = "lumx-icon", ar = yn, {
-  block: gn
-} = $(ar), _n = {}, 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] = Qt(t, n);
-  let v = d;
-  !v && (o || c) && (v = c === ee.dark ? _.light : _.dark);
-  let h = f;
-  !h && o && v === _.dark && (h = "L2");
-  let j = s;
-  return s && o ? s === w.xxs || s === w.xs ? j = w.s : s === w.xxl && (j = w.xl) : o && (j = w.m), y("i", q({
-    ref: i
-  }, p, {
-    className: P(r, gn({
-      [`color-${v}`]: !!v,
-      [`color-variant-${h}`]: !!h,
-      "has-shape": o,
-      [`theme-${c}`]: !!c,
-      [`size-${j}`]: !!j,
-      "no-shape": !o,
-      "has-dark-layer": !o && v === _.yellow && a === Yt,
-      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 = vn;
-F.className = ar;
-F.defaultProps = _n;
-const Tn = "IconButton", Sn = "lumx-icon-button", We = {
-  emphasis: L.high,
-  size: w.m
-}, K = (e) => {
-  const {
-    emphasis: r = We.emphasis,
-    image: t,
-    icon: n,
-    label: o,
-    size: a = We.size,
-    ...s
-  } = e, i = t ? y("img", {
-    alt: "",
-    src: t
-  }, null) : F({
-    icon: n
-  });
-  return z({
-    emphasis: r,
-    size: a,
-    ...s,
-    "aria-label": o,
-    variant: "icon",
-    children: i
-  });
-};
-K.displayName = Tn;
-K.className = Sn;
-K.defaultProps = We;
-const An = "ButtonGroup", sr = "lumx-button-group", Nn = {}, oe = (e) => {
-  const {
-    children: r,
-    className: t,
-    ...n
-  } = e;
-  return y("div", q(n, {
-    className: P(t, sr)
-  }), [r]);
-};
-oe.displayName = An;
-oe.className = sr;
-oe.defaultProps = Nn;
-var ce, at;
-function ir() {
-  if (at) return ce;
-  at = 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, st;
-function jn() {
-  if (st) return ue;
-  st = 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;
+  return ae = e, ae;
 }
-var le, it;
-function Pn() {
-  if (it) return le;
-  it = 1;
-  var e = jn(), r = e(Object.keys, Object);
-  return le = r, le;
+var oe, rt;
+function cn() {
+  if (rt) return oe;
+  rt = 1;
+  var e = sn(), t = e(Object.keys, Object);
+  return oe = t, oe;
 }
-var pe, ct;
-function wn() {
-  if (ct) return pe;
-  ct = 1;
-  var e = ir(), r = Pn(), t = Object.prototype, n = t.hasOwnProperty;
-  function o(a) {
-    if (!e(a))
-      return r(a);
+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;
+  return se = a, se;
 }
-var fe, ut;
-function cr() {
-  if (ut) return fe;
-  ut = 1;
-  var e = typeof Q == "object" && Q && Q.Object === Object && Q;
-  return fe = e, fe;
+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 de, lt;
-function M() {
-  if (lt) return de;
-  lt = 1;
-  var e = cr(), r = typeof self == "object" && self && self.Object === Object && self, t = e || r || Function("return this")();
-  return de = t, de;
+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 me, pt;
-function ur() {
-  if (pt) return me;
-  pt = 1;
-  var e = M(), r = e.Symbol;
-  return me = r, me;
+var le, st;
+function ar() {
+  if (st) return le;
+  st = 1;
+  var e = I(), t = e.Symbol;
+  return le = t, le;
 }
-var he, ft;
-function xn() {
-  if (ft) return he;
-  ft = 1;
-  var e = ur(), 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, dt;
-function kn() {
-  if (dt) return be;
-  dt = 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, mt;
-function ae() {
-  if (mt) return ve;
-  mt = 1;
-  var e = ur(), r = xn(), t = kn(), 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 ye, ht;
-function lr() {
-  if (ht) return ye;
-  ht = 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 ye = e, ye;
+  return pe = e, pe;
 }
-var ge, bt;
-function pr() {
-  if (bt) return ge;
-  bt = 1;
-  var e = ae(), r = lr(), 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 ge = s, ge;
+  return he = s, he;
 }
-var _e, vt;
-function On() {
-  if (vt) return _e;
-  vt = 1;
-  var e = M(), 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 Te, yt;
-function In() {
-  if (yt) return Te;
-  yt = 1;
-  var e = On(), 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 Te = t, Te;
+  return be = r, be;
 }
-var Se, gt;
-function fr() {
-  if (gt) return Se;
-  gt = 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 {
@@ -651,379 +391,559 @@ function fr() {
     }
     return "";
   }
-  return Se = t, Se;
+  return ve = r, ve;
 }
-var Ae, _t;
-function $n() {
-  if (_t) return Ae;
-  _t = 1;
-  var e = pr(), r = In(), t = lr(), n = fr(), 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 Ae = p, Ae;
+  return ge = f, ge;
 }
-var Ne, Tt;
-function Bn() {
-  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, St;
-function J() {
-  if (St) return je;
-  St = 1;
-  var e = $n(), r = Bn();
-  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, At;
-function En() {
-  if (At) return Pe;
-  At = 1;
-  var e = J(), r = M(), 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, Nt;
-function qn() {
-  if (Nt) return we;
-  Nt = 1;
-  var e = J(), r = M(), 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, jt;
-function Cn() {
-  if (jt) return xe;
-  jt = 1;
-  var e = J(), r = M(), 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 ke, Pt;
-function Rn() {
-  if (Pt) return ke;
-  Pt = 1;
-  var e = J(), r = M(), t = e(r, "Set");
-  return ke = t, ke;
+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 Oe, wt;
-function Mn() {
-  if (wt) return Oe;
-  wt = 1;
-  var e = J(), r = M(), t = e(r, "WeakMap");
-  return Oe = t, Oe;
+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 Ie, xt;
-function Ln() {
-  if (xt) return Ie;
-  xt = 1;
-  var e = En(), r = qn(), t = Cn(), n = Rn(), o = Mn(), a = ae(), s = fr(), 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), j = s(n), V = s(o), S = a;
-  return (e && S(new e(new ArrayBuffer(1))) != d || r && S(new r()) != i || t && S(t.resolve()) != u || n && S(new n()) != l || o && S(new o()) != p) && (S = function(B) {
-    var G = a(B), Y = G == c ? B.constructor : void 0, X = Y ? s(Y) : "";
-    if (X)
-      switch (X) {
-        case f:
-          return d;
-        case v:
-          return i;
+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 j:
+        case N:
           return l;
-        case V:
-          return p;
+        case E:
+          return f;
       }
-    return G;
-  }), Ie = S, Ie;
+    return q;
+  }), je = T, je;
 }
-var $e, kt;
-function Ze() {
-  if (kt) return $e;
-  kt = 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 $e = e, $e;
+  return ke = e, ke;
 }
-var Be, Ot;
-function Dn() {
-  if (Ot) return Be;
-  Ot = 1;
-  var e = ae(), r = Ze(), 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 Be = n, Be;
+  return we = n, we;
 }
-var Ee, It;
-function Fn() {
-  if (It) return Ee;
-  It = 1;
-  var e = Dn(), r = Ze(), 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, $t;
-function Vn() {
-  if ($t) return qe;
-  $t = 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, Bt;
-function dr() {
-  if (Bt) return Ce;
-  Bt = 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, Et;
-function Gn() {
-  if (Et) return Re;
-  Et = 1;
-  var e = pr(), r = dr();
-  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, qt;
-function Un() {
-  if (qt) return Me;
-  qt = 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 Ct;
-function Wn() {
-  return Ct || (Ct = 1, (function(e, r) {
-    var t = M(), n = Un(), 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, Rt;
-function Hn() {
-  if (Rt) return Le;
-  Rt = 1;
-  var e = ae(), r = dr(), t = Ze(), 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]", j = "[object ArrayBuffer]", V = "[object DataView]", S = "[object Float32Array]", B = "[object Float64Array]", G = "[object Int8Array]", Y = "[object Int16Array]", X = "[object Int32Array]", Sr = "[object Uint8Array]", Ar = "[object Uint8ClampedArray]", Nr = "[object Uint16Array]", jr = "[object Uint32Array]", m = {};
-  m[S] = m[B] = m[G] = m[Y] = m[X] = m[Sr] = m[Ar] = m[Nr] = m[jr] = !0, m[n] = m[o] = m[j] = 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 Pr(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 = Pr, Le;
+  return Be = Pr, Be;
 }
-var De, Mt;
-function zn() {
-  if (Mt) return De;
-  Mt = 1;
-  function e(r) {
-    return function(t) {
-      return r(t);
+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 H = { exports: {} };
-H.exports;
-var Lt;
-function Kn() {
-  return Lt || (Lt = 1, (function(e, r) {
-    var t = cr(), 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;
-  })(H, H.exports)), H.exports;
-}
-var Fe, Dt;
-function Jn() {
-  if (Dt) return Fe;
-  Dt = 1;
-  var e = Hn(), r = zn(), t = Kn(), n = t && t.isTypedArray, o = n ? r(n) : e;
-  return Fe = o, Fe;
-}
-var Ve, Ft;
-function Yn() {
-  if (Ft) return Ve;
-  Ft = 1;
-  var e = wn(), r = Ln(), t = Fn(), n = Vn(), o = Gn(), a = Wn(), s = ir(), i = Jn(), 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 Xn = Yn();
-const Vt = /* @__PURE__ */ Xt(Xn), mr = (e = "default") => {
-  const r = xr();
-  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
   };
-}, Qn = /* @__PURE__ */ Symbol("DISABLED_STATE_KEY");
-function Zn() {
-  return Je(Qn, { state: null });
-}
-function hr(e) {
-  const r = Zn(), t = g(() => {
-    const o = typeof e == "function" ? e() : b(e);
-    return Fr(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 Gt = T({
+const Mt = _({
   name: "ResetTheme",
-  setup(e, { slots: r }) {
-    return Jt("theme", void 0), () => r.default?.();
+  setup(e, { slots: t }) {
+    return Vt("theme", void 0), () => t.default?.();
   }
-}), He = /* @__PURE__ */ T({
+}), 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 = R(F), t = e, n = k(), o = C({ defaultTheme: void 0 });
-    return (a, s) => (A(), N(b(r), O(I({ ...b(n), ...t, theme: t.theme || b(o) })), null, 16));
-  }
-}), eo = "lumx-text", {
-  block: to
-} = $(eo), ro = (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: P(r, to({
-      "is-truncated": p && !l,
+    className: S(t, Yn({
+      "is-truncated": f && !l,
       "is-truncated-multiline": l,
-      "no-wrap": o
-    }), a && Zt(a), t && Yr(t, n)),
+      "no-wrap": a
+    }), o && Xt(o), r && Yr(r, n)),
     style: {
       ...u,
-      ...d,
+      ...p,
       ...c
     }
   };
 };
-function br(e, r) {
-  return kr() ? (Or(e, r), !0) : !1;
+function hr(e, t) {
+  return wr() ? (xr(e, t), !0) : !1;
 }
-const no = typeof window < "u" && typeof document < "u";
+const Xn = typeof window < "u" && typeof document < "u";
 typeof WorkerGlobalScope < "u" && globalThis instanceof WorkerGlobalScope;
-const oo = (e) => e != null;
-function ao(e) {
+const Qn = (e) => e != null;
+function Zn(e) {
   return Array.isArray(e) ? e : [e];
 }
-const vr = no ? window : void 0;
-function ze(e) {
-  var r;
-  const t = Qe(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 so() {
-  const e = Ir(!1), r = $r();
-  return r && Br(() => {
+function ea() {
+  const e = Or(!1), t = Ir();
+  return t && $r(() => {
     e.value = !0;
-  }, r), e;
+  }, t), e;
 }
 // @__NO_SIDE_EFFECTS__
-function yr(e) {
-  const r = /* @__PURE__ */ so();
-  return g(() => (r.value, !!e()));
-}
-function io(e, r, t = {}) {
-  const { window: n = vr, ...o } = t;
-  let a;
-  const s = /* @__PURE__ */ yr(() => n && "MutationObserver" in n), i = () => {
-    a && (a.disconnect(), a = void 0);
-  }, c = Xe(g(() => {
-    const p = ao(Qe(e)).map(ze).filter(oo);
-    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 br(l), {
+  return hr(l), {
     isSupported: s,
     stop: l,
     takeRecords: u
   };
 }
-function co(e, r, t = {}) {
-  const { window: n = vr, ...o } = t;
-  let a;
-  const s = /* @__PURE__ */ yr(() => n && "ResizeObserver" in n), i = () => {
-    a && (a.disconnect(), a = void 0);
-  }, c = Xe(g(() => {
-    const l = Qe(e);
-    return Array.isArray(l) ? l.map((p) => ze(p)) : [ze(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,
@@ -1031,50 +951,57 @@ function co(e, r, t = {}) {
   }), u = () => {
     i(), c();
   };
-  return br(u), {
+  return hr(u), {
     isSupported: s,
     stop: u
   };
 }
-function uo(e) {
-  const r = Er(void 0), t = () => {
+function na(e) {
+  const t = Cr(void 0), r = () => {
     const n = e.value;
-    n && !n.closest(`.${Vr.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 io(e, t, {
+  return ta(e, r, {
     childList: !0,
     attributes: !0,
     characterData: !0,
     subtree: !0
-  }), co(e, t), Xe(e, t, { immediate: !0 }), { tooltipLabel: r };
+  }), ra(e, r), He(e, r, { immediate: !0 }), { tooltipLabel: t };
 }
-function Ke(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 (!Ye(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 === qr && Array.isArray(t.children)) {
-      const n = Ke(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 = Ke(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 et = /* @__PURE__ */ T({
+const Z = /* @__PURE__ */ _({
   inheritAttrs: !1,
   __name: "Text",
   props: {
@@ -1085,137 +1012,172 @@ const et = /* @__PURE__ */ T({
     truncate: { type: [Boolean, Object] },
     noWrap: { type: Boolean },
     whiteSpace: {},
-    children: { type: [Boolean, Number, String, null] },
+    children: {},
+    style: {},
     className: {}
   },
   setup(e) {
-    const r = e, t = k(), n = mr(), o = Cr("tooltip-label"), { tooltipLabel: a } = uo(o), s = g(
-      () => ro({
-        ...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 ? Ke(u) : null;
-    }, c = g(() => ({ ...t, ...s.value }));
-    return (u, l) => (A(), N(Rr(r.as), q({ 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: x(() => [
-        y(i)
+      default: Ht(() => [
+        d(i)
       ]),
       _: 1
     }, 16, ["class", "style", "title"]));
   }
-}), Ut = {
+}), oa = {
   click: (e) => e instanceof MouseEvent
-}, Eo = /* @__PURE__ */ T({
+}, 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: Ut,
-  setup(e, { emit: r }) {
-    const t = e, n = k(), o = C(), a = mr(), { isAnyDisabled: s, disabledStateProps: i } = hr(g(() => ({ ...t, ...n }))), u = R(ne, { emit: r, events: Object.keys(Ut) }), l = g(() => ({
-      ...n,
-      ...t,
-      ...i.value,
-      theme: t.theme || n.theme || o,
-      "aria-disabled": s.value
-    })), p = g(() => !Vt(t.leftIcon)), d = g(() => !Vt(t.rightIcon)), f = T({
-      props: ["content"],
-      setup(v) {
-        return () => {
-          const h = v.content;
-          return !h || h.length === 0 ? null : h.length === 1 && h[0].type === et ? h[0] : Mr("span", h);
-        };
-      }
-    });
-    return (v, h) => (A(), N(b(u), O(I(l.value)), {
-      default: x(() => [
-        p.value ? (A(), N(b(Gt), { key: 0 }, {
-          default: x(() => [
-            y(He, {
-              icon: t.leftIcon
-            }, null, 8, ["icon"])
-          ]),
-          _: 1
-        })) : rt("", !0),
-        y(b(f), {
-          content: b(a)()
-        }, null, 8, ["content"]),
-        d.value ? (A(), N(b(Gt), { key: 1 }, {
-          default: x(() => [
-            y(He, {
-              icon: t.rightIcon
-            }, null, 8, ["icon"])
-          ]),
-          _: 1
-        })) : rt("", !0)
-      ]),
-      _: 1
-    }, 16));
-  }
-}), Wt = {
+  // 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
-}, qo = /* @__PURE__ */ T({
+}, 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: Wt,
-  setup(e, { emit: r }) {
-    const t = e, n = k(), o = C(), s = R(K, { emit: r, events: Object.keys(Wt) }), { isAnyDisabled: i, disabledStateProps: c } = hr(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) => (A(), N(b(s), O(I(u.value)), null, 16));
-  }
-}), Co = /* @__PURE__ */ T({
+  // 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 = k(), n = C(), o = R(oe);
-    return (a, s) => (A(), N(b(o), O(I({ ...b(t), ...r, theme: r.theme || b(n) })), {
-      default: x(() => [
-        D(a.$slots, "default")
-      ]),
-      _: 3
-    }, 16));
-  }
-}), Ht = 6, lo = {
-  h1: U.display1,
-  h2: U.headline,
-  h3: U.title,
-  h4: U.subtitle2,
-  h5: U.subtitle1,
-  h6: U.body2
-}, po = { level: 1, headingElement: "h1" }, fo = "lumx-heading", mo = (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: P(n, fo),
-    typography: o || lo[s]
+    className: S(n, pa),
+    typography: a || fa[s]
   };
-}, gr = /* @__PURE__ */ Symbol("HeadingLevelContext"), _r = () => Je(gr, po), Ro = /* @__PURE__ */ T({
+}, gr = /* @__PURE__ */ Symbol("HeadingLevelContext"), yr = () => Ue(gr, da), Ga = /* @__PURE__ */ _({
   inheritAttrs: !1,
   __name: "Heading",
   props: {
@@ -1226,199 +1188,258 @@ const et = /* @__PURE__ */ T({
     truncate: { type: [Boolean, Object] },
     noWrap: { type: Boolean },
     whiteSpace: {},
-    children: { type: [Boolean, Number, String, null] },
+    children: {},
+    style: {},
     className: {}
   },
   setup(e) {
-    const r = e, t = k(), n = C(), o = _r(), a = g(() => {
-      const { className: s, ...i } = mo(
+    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) => (A(), N(b(et), O(I(a.value)), {
-      default: x(() => [
-        D(s.$slots, "default")
+    return (s, i) => (Ut(), Wt(W(Z), qr(Rr(o.value)), {
+      default: Ht(() => [
+        Kt(s.$slots, "default")
       ]),
       _: 3
     }, 16));
   }
-}), ho = (e, r) => {
-  const t = e || r + 1;
-  return t > Ht ? Ht : t;
-}, Mo = /* @__PURE__ */ T({
+}), 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 } = Lr(r), n = _r(), o = g(() => ho(t?.value, n.level)), a = g(() => `h${o.value}`), s = Dr({
-      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 Jt(gr, s), (i, c) => D(i.$slots, "default");
+    return Vt(gr, s), (i, c) => Kt(i.$slots, "default");
   }
-}), bo = "Message", Tr = "lumx-message", {
-  block: vo,
-  element: Ge
-} = $(Tr), yo = {
-  [E.error]: {
-    color: _.red,
-    icon: Gr
-  },
-  [E.info]: {
-    color: _.blue,
-    icon: Hr
+}), ba = "Message", Ar = "lumx-message", {
+  block: va,
+  element: Me
+} = k(Ar), ga = {
+  [O.error]: {
+    color: v.red,
+    icon: Vr
   },
-  [E.success]: {
-    color: _.green,
+  [O.info]: {
+    color: v.blue,
     icon: Ur
   },
-  [E.warning]: {
-    color: _.yellow,
+  [O.success]: {
+    color: v.green,
+    icon: Gr
+  },
+  [O.warning]: {
+    color: v.yellow,
     icon: Yt
   }
-}, tt = (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
-  } = yo[o] || {}, {
-    onClick: l,
+    color: u,
+    icon: l
+  } = ga[a] || {}, {
+    onClick: f,
     label: p
-  } = s || {}, d = n && o === "info" && l && p;
-  return y("div", q(i, {
-    className: P(t, vo({
-      [`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: w.xs,
-    color: c
-  }), y("div", {
-    className: Ge("text")
-  }, [r]), d && K({
-    className: Ge("close-button"),
-    icon: Wr,
-    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: L.low
+    emphasis: $.low
   })]);
 };
-tt.displayName = bo;
-tt.className = Tr;
-const Lo = /* @__PURE__ */ T({
+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 = k(), n = R(tt);
-    return (o, a) => (A(), N(b(n), O(I({ ...b(t), ...r })), {
-      default: x(() => [
-        D(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 go(e) {
-  return typeof e == "function" || Object.prototype.toString.call(e) === "[object Object]" && !Ye(e);
+function ya(e) {
+  return typeof e == "function" || Object.prototype.toString.call(e) === "[object Object]" && !We(e);
 }
-const _o = "lumx-flag", {
-  block: To,
-  element: zt
-} = $(_o), So = (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", q(u, {
-    className: P(s, To({
-      [`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: w.xxs,
-    className: zt("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: zt("label")
-  }, go(n) ? n : {
-    default: () => [n]
+    className: Dt("label")
+  }, ya(t) ? t : {
+    default: () => [t]
   })]);
-}, Do = /* @__PURE__ */ T({
+}, 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 = R(So, { nestedComponents: { Text: et } }), t = e, n = k(), o = C(), a = g(() => ({
-      ...n,
-      ...t,
-      theme: t.theme || n.theme || o || Kt.light
-    }));
-    return (s, i) => (A(), N(b(r), O(I(a.value)), {
-      default: x(() => [
-        D(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 Le, Ft;
+function Sa() {
+  if (Ft) return Le;
+  Ft = 1;
+  var e = cr();
+  function t() {
+    if (!arguments.length)
+      return [];
+    var r = arguments[0];
+    return e(r) ? r : [r];
   }
+  return Le = t, Le;
+}
+var Na = Sa();
+const Pa = /* @__PURE__ */ Ye(Na), ja = "lumx-flex-box", {
+  block: ka
+} = k(ja);
+function wa(e) {
+  const {
+    className: t,
+    fillSpace: r,
+    gap: n,
+    hAlign: a,
+    marginAuto: o,
+    noShrink: s,
+    vAlign: i,
+    wrap: c,
+    orientation: u,
+    ...l
+  } = e, f = u ?? (c || a || i ? Jr.horizontal : null);
+  return {
+    ...l,
+    className: S(t, ka({
+      [`orientation-${f}`]: !!f,
+      [`v-align-${i}`]: !!i,
+      [`h-align-${a}`]: !!a,
+      [`gap-${n}`]: !!n,
+      wrap: !!c,
+      "fill-space": r,
+      "no-shrink": s,
+      ...Object.fromEntries(Pa(o).filter(Boolean).map((p) => [`margin-auto-${p}`, !0]))
+    }))
+  };
+}
+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,
+  // 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 {
-  Eo as Button,
-  Co as ButtonGroup,
-  Do as Flag,
-  Ro as Heading,
-  Mo as HeadingLevelProvider,
-  He as Icon,
-  qo as IconButton,
-  $o as InputHelper,
-  Bo as InputLabel,
-  Lo as Message,
-  et as Text,
-  _r 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