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

package/index.js

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