@lumx/vue 4.3.2-alpha.0 → 4.3.2-alpha.1

package/index.js

@@ -1,54 +1,245 @@
-import { ColorVariant as kr, Theme as Pr } from '@lumx/core/js/constants/index.js';
+import { ColorVariant as Ir, Theme as Er } 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 f, mergeProps as g, isVNode as X, inject as ze, computed as A, unref as Ze, defineComponent as S, provide as Wt, useAttrs as P, getCurrentScope as jr, onScopeDispose as xr, watch as Q, toValue as He, shallowRef as wr, getCurrentInstance as Cr, onMounted as Ir, ref as zt, useSlots as Ht, Fragment as Kt, useTemplateRef as Or, toRefs as $r, reactive as Er } from "vue";
-import { getDisabledState as qr } from "@lumx/core/js/utils/disabledState";
-import { mdiAlertCircle as Yt } from '@lumx/icons/esm/alert-circle.js';
-import { classNames as Br } from "@lumx/core/js/utils";
-import { mdiCheck as Mr } from '@lumx/icons/esm/check.js';
-import { mdiMinus as Rr } from '@lumx/icons/esm/minus.js';
-import { mdiAlert as Lr } from '@lumx/icons/esm/alert.js';
-import { mdiCheckCircle as Dr } from '@lumx/icons/esm/check-circle.js';
-import { mdiClose as Fr } from '@lumx/icons/esm/close.js';
-import { mdiInformation as Vr } from '@lumx/icons/esm/information.js';
-var K = typeof globalThis < "u" ? globalThis : typeof window < "u" ? window : typeof global < "u" ? global : typeof self < "u" ? self : {};
-function Ke(e) {
+import { createVNode as u, mergeProps as m, defineComponent as y, useAttrs as S, isVNode as ee, inject as Xe, computed as k, unref as at, provide as Jt, getCurrentScope as Br, onScopeDispose as Rr, watch as te, toValue as Qe, shallowRef as Mr, getCurrentInstance as Lr, onMounted as qr, ref as Xt, useSlots as Qt, Fragment as Zt, useTemplateRef as Dr, toRefs as Fr, reactive as Vr } from "vue";
+import { getDisabledState as Gr } from '@lumx/core/js/utils/disabledState/index.js';
+import { mdiAlertCircle as er } from '@lumx/icons/esm/alert-circle.js';
+import { classNames as Ur } from '@lumx/core/js/utils/index.js';
+import { mdiCheck as Wr } from '@lumx/icons/esm/check.js';
+import { mdiMinus as zr } from '@lumx/icons/esm/minus.js';
+import { mdiAlert as Hr } from '@lumx/icons/esm/alert.js';
+import { mdiCheckCircle as Kr } from '@lumx/icons/esm/check-circle.js';
+import { mdiClose as Yr } from '@lumx/icons/esm/close.js';
+import { mdiInformation as Jr } from '@lumx/icons/esm/information.js';
+const Q = {
+  light: "light",
+  dark: "dark"
+}, O = {
+  xxs: "xxs",
+  xs: "xs",
+  s: "s",
+  m: "m",
+  xl: "xl",
+  xxl: "xxl"
+}, Xr = {
+  horizontal: "horizontal"
+}, L = {
+  low: "low",
+  high: "high"
+}, Qr = {
+  overline: "overline",
+  caption: "caption",
+  body1: "body1",
+  body2: "body2",
+  subtitle1: "subtitle1",
+  subtitle2: "subtitle2",
+  title: "title",
+  headline: "headline",
+  display1: "display1"
+}, V = {
+  ...Qr
+}, B = {
+  info: "info",
+  success: "success",
+  warning: "warning",
+  error: "error"
+}, _ = {
+  primary: "primary",
+  blue: "blue",
+  dark: "dark",
+  green: "green",
+  yellow: "yellow",
+  red: "red",
+  light: "light"
+};
+var X = typeof globalThis < "u" ? globalThis : typeof window < "u" ? window : typeof global < "u" ? global : typeof self < "u" ? self : {};
+function Ze(e) {
   return e && e.__esModule && Object.prototype.hasOwnProperty.call(e, "default") ? e.default : e;
 }
-var ne, et;
-function Jt() {
-  if (et) return ne;
-  et = 1;
+var le = { exports: {} };
+var ot;
+function Zr() {
+  return ot || (ot = 1, (function(e) {
+    (function() {
+      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(o);
+            else if (Array.isArray(o)) {
+              if (o.length) {
+                var i = r.apply(null, o);
+                i && n.push(i);
+              }
+            } else if (s === "object") {
+              if (o.toString !== Object.prototype.toString && !o.toString.toString().includes("[native code]")) {
+                n.push(o.toString());
+                continue;
+              }
+              for (var l in o)
+                t.call(o, l) && o[l] && n.push(l);
+            }
+          }
+        }
+        return n.join(" ");
+      }
+      e.exports ? (r.default = r, e.exports = r) : window.classNames = r;
+    })();
+  })(le)), le.exports;
+}
+var en = Zr();
+const N = /* @__PURE__ */ Ze(en);
+function tr(e, t) {
+  if (!e) return [void 0, t];
+  const [r, n] = e.split("-");
+  return [r, t || n];
+}
+function tn(e, t, r) {
+  const [n, a = Ir.N] = tr(t, r);
+  return `lumx-color-${e}-${n}-${a}`;
+}
+const rn = (e, t) => tn("font", e, t);
+function rr(e) {
+  return `lumx-typography-${e}`;
+}
+function nr(e, t) {
+  const r = [];
+  for (const [n, a] of Object.entries(t))
+    a && r.push(`${e}--${n}`);
+  return r.join(" ");
+}
+function Z(e, t, r) {
+  let n, a;
+  return Array.isArray(t) ? a = t : (n = t, a = r), !n && !a ? e : N(
+    // Additional classes
+    a,
+    // Base class
+    e,
+    // Modifier(s)
+    n ? nr(e, n) : null
+  );
+}
+function st(e, t, r, n) {
+  return Array.isArray(r) ? Z(`${e}__${t}`, r) : Z(`${e}__${t}`, r, n);
+}
+function T(e) {
+  function t(n, a) {
+    return Array.isArray(n) ? Z(e, n) : Z(e, n, a);
+  }
+  function r(n, a, o) {
+    return Array.isArray(a) ? st(e, n, a) : st(e, n, a, o);
+  }
+  return {
+    block: t,
+    element: r,
+    modifier: (n) => nr(e, n)
+  };
+}
+const nn = "Badge", ar = "lumx-badge", {
+  block: an
+} = T(ar), or = {
+  color: _.primary
+}, re = (e) => {
+  const {
+    children: t,
+    className: r,
+    color: n = or.color,
+    ref: a,
+    ...o
+  } = e;
+  return u("div", m({
+    ref: a
+  }, o, {
+    className: N(r, an({
+      [`color-${n}`]: !!n
+    }))
+  }), [t]);
+};
+re.displayName = nn;
+re.className = ar;
+re.defaultProps = or;
+const A = () => (...e) => e.reduce((t, r) => (t[r] = { required: !1 }, t), {}), Oo = /* @__PURE__ */ y((e, {
+  slots: t
+}) => {
+  const r = S();
+  return () => u(re, m(e, r, {
+    className: e.class,
+    children: t.default?.()
+  }), null);
+}, {
+  name: "LumxBadge",
+  inheritAttrs: !1,
+  // Redefine properties so that they come in as `props` on the `defineComponent` function
+  props: A()("color", "class")
+}), on = "lumx-badge-wrapper", {
+  block: sn,
+  element: ln
+} = T(on), cn = (e) => {
+  const {
+    badge: t,
+    children: r,
+    className: n,
+    ref: a,
+    ...o
+  } = e;
+  return u("div", m({
+    ref: a
+  }, o, {
+    className: N(n, sn())
+  }), [r, t && u("div", {
+    className: ln("badge")
+  }, [t])]);
+}, jo = /* @__PURE__ */ y((e, {
+  slots: t
+}) => {
+  const r = S();
+  return () => u(cn, m(e, r, {
+    className: e.class,
+    badge: e.badge || t.badge?.(),
+    children: t.default?.()
+  }), null);
+}, {
+  name: "LumxBadgeWrapper",
+  inheritAttrs: !1,
+  props: A()("badge", "class")
+});
+var ce, it;
+function sr() {
+  if (it) return ce;
+  it = 1;
   var e = Object.prototype;
   function t(r) {
     var n = r && r.constructor, a = typeof n == "function" && n.prototype || e;
     return r === a;
   }
-  return ne = t, ne;
+  return ce = t, ce;
 }
-var ae, tt;
-function Gr() {
-  if (tt) return ae;
-  tt = 1;
+var ue, lt;
+function un() {
+  if (lt) return ue;
+  lt = 1;
   function e(t, r) {
     return function(n) {
       return t(r(n));
     };
   }
-  return ae = e, ae;
-}
-var oe, rt;
-function Ur() {
-  if (rt) return oe;
-  rt = 1;
-  var e = Gr(), t = e(Object.keys, Object);
-  return oe = t, oe;
-}
-var se, nt;
-function Wr() {
-  if (nt) return se;
-  nt = 1;
-  var e = Jt(), t = Ur(), r = Object.prototype, n = r.hasOwnProperty;
+  return ue = e, ue;
+}
+var de, ct;
+function dn() {
+  if (ct) return de;
+  ct = 1;
+  var e = un(), t = e(Object.keys, Object);
+  return de = t, de;
+}
+var fe, ut;
+function fn() {
+  if (ut) return fe;
+  ut = 1;
+  var e = sr(), t = dn(), r = Object.prototype, n = r.hasOwnProperty;
   function a(o) {
     if (!e(o))
       return t(o);
@@ -57,113 +248,113 @@ function Wr() {
       n.call(o, i) && i != "constructor" && s.push(i);
     return s;
   }
-  return se = a, se;
-}
-var ie, at;
-function Xt() {
-  if (at) return ie;
-  at = 1;
-  var e = typeof K == "object" && K && K.Object === Object && K;
-  return ie = e, ie;
-}
-var ce, ot;
-function $() {
-  if (ot) return ce;
-  ot = 1;
-  var e = Xt(), t = typeof self == "object" && self && self.Object === Object && self, r = e || t || Function("return this")();
-  return ce = r, ce;
-}
-var le, st;
-function Qt() {
-  if (st) return le;
-  st = 1;
-  var e = $(), t = e.Symbol;
-  return le = t, le;
-}
-var ue, it;
-function zr() {
-  if (it) return ue;
-  it = 1;
-  var e = Qt(), t = Object.prototype, r = t.hasOwnProperty, n = t.toString, a = e ? e.toStringTag : void 0;
+  return fe = a, fe;
+}
+var pe, dt;
+function ir() {
+  if (dt) return pe;
+  dt = 1;
+  var e = typeof X == "object" && X && X.Object === Object && X;
+  return pe = e, pe;
+}
+var he, ft;
+function R() {
+  if (ft) return he;
+  ft = 1;
+  var e = ir(), t = typeof self == "object" && self && self.Object === Object && self, r = e || t || Function("return this")();
+  return he = r, he;
+}
+var me, pt;
+function lr() {
+  if (pt) return me;
+  pt = 1;
+  var e = R(), t = e.Symbol;
+  return me = t, me;
+}
+var be, ht;
+function pn() {
+  if (ht) return be;
+  ht = 1;
+  var e = lr(), 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];
+    var i = r.call(s, a), l = s[a];
     try {
       s[a] = void 0;
-      var u = !0;
+      var d = !0;
     } catch {
     }
-    var l = n.call(s);
-    return u && (i ? s[a] = c : delete s[a]), l;
+    var c = n.call(s);
+    return d && (i ? s[a] = l : delete s[a]), c;
   }
-  return ue = o, ue;
+  return be = o, be;
 }
-var de, ct;
-function Hr() {
-  if (ct) return de;
-  ct = 1;
+var ve, mt;
+function hn() {
+  if (mt) return ve;
+  mt = 1;
   var e = Object.prototype, t = e.toString;
   function r(n) {
     return t.call(n);
   }
-  return de = r, de;
+  return ve = r, ve;
 }
-var fe, lt;
-function Z() {
-  if (lt) return fe;
-  lt = 1;
-  var e = Qt(), t = zr(), r = Hr(), n = "[object Null]", a = "[object Undefined]", o = e ? e.toStringTag : void 0;
+var ge, bt;
+function ne() {
+  if (bt) return ge;
+  bt = 1;
+  var e = lr(), t = pn(), r = hn(), n = "[object Null]", a = "[object Undefined]", o = e ? e.toStringTag : void 0;
   function s(i) {
     return i == null ? i === void 0 ? a : n : o && o in Object(i) ? t(i) : r(i);
   }
-  return fe = s, fe;
+  return ge = s, ge;
 }
-var pe, ut;
-function Zt() {
-  if (ut) return pe;
-  ut = 1;
+var ye, vt;
+function cr() {
+  if (vt) return ye;
+  vt = 1;
   function e(t) {
     var r = typeof t;
     return t != null && (r == "object" || r == "function");
   }
-  return pe = e, pe;
+  return ye = e, ye;
 }
-var he, dt;
-function er() {
-  if (dt) return he;
-  dt = 1;
-  var e = Z(), t = Zt(), r = "[object AsyncFunction]", n = "[object Function]", a = "[object GeneratorFunction]", o = "[object Proxy]";
+var Ne, gt;
+function ur() {
+  if (gt) return Ne;
+  gt = 1;
+  var e = ne(), t = cr(), r = "[object AsyncFunction]", n = "[object Function]", a = "[object GeneratorFunction]", o = "[object Proxy]";
   function s(i) {
     if (!t(i))
       return !1;
-    var c = e(i);
-    return c == n || c == a || c == r || c == o;
+    var l = e(i);
+    return l == n || l == a || l == r || l == o;
   }
-  return he = s, he;
+  return Ne = s, Ne;
 }
-var me, ft;
-function Kr() {
-  if (ft) return me;
-  ft = 1;
-  var e = $(), t = e["__core-js_shared__"];
-  return me = t, me;
+var Ae, yt;
+function mn() {
+  if (yt) return Ae;
+  yt = 1;
+  var e = R(), t = e["__core-js_shared__"];
+  return Ae = t, Ae;
 }
-var be, pt;
-function Yr() {
-  if (pt) return be;
-  pt = 1;
-  var e = Kr(), t = (function() {
+var Se, Nt;
+function bn() {
+  if (Nt) return Se;
+  Nt = 1;
+  var e = mn(), t = (function() {
     var n = /[^.]+$/.exec(e && e.keys && e.keys.IE_PROTO || "");
     return n ? "Symbol(src)_1." + n : "";
   })();
   function r(n) {
     return !!t && t in n;
   }
-  return be = r, be;
+  return Se = r, Se;
 }
-var ve, ht;
-function tr() {
-  if (ht) return ve;
-  ht = 1;
+var ke, At;
+function dr() {
+  if (At) return ke;
+  At = 1;
   var e = Function.prototype, t = e.toString;
   function r(n) {
     if (n != null) {
@@ -178,369 +369,247 @@ function tr() {
     }
     return "";
   }
-  return ve = r, ve;
+  return ke = r, ke;
 }
-var ge, mt;
-function Jr() {
-  if (mt) return ge;
-  mt = 1;
-  var e = er(), t = Yr(), r = Zt(), n = tr(), 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.*?") + "$"
+var Te, St;
+function vn() {
+  if (St) return Te;
+  St = 1;
+  var e = ur(), t = bn(), r = cr(), n = dr(), a = /[\\^$.*+?()[\]{}|]/g, o = /^\[object .+?Constructor\]$/, s = Function.prototype, i = Object.prototype, l = s.toString, d = i.hasOwnProperty, c = RegExp(
+    "^" + l.call(d).replace(a, "\\$&").replace(/hasOwnProperty|(function).*?(?=\\\()| for .+?(?=\\\])/g, "$1.*?") + "$"
   );
-  function d(p) {
+  function f(p) {
     if (!r(p) || t(p))
       return !1;
-    var h = e(p) ? l : o;
+    var h = e(p) ? c : o;
     return h.test(n(p));
   }
-  return ge = d, ge;
+  return Te = f, Te;
 }
-var ye, bt;
-function Xr() {
-  if (bt) return ye;
-  bt = 1;
+var $e, kt;
+function gn() {
+  if (kt) return $e;
+  kt = 1;
   function e(t, r) {
     return t?.[r];
   }
-  return ye = e, ye;
+  return $e = e, $e;
 }
-var Ae, vt;
-function F() {
-  if (vt) return Ae;
-  vt = 1;
-  var e = Jr(), t = Xr();
+var Pe, Tt;
+function W() {
+  if (Tt) return Pe;
+  Tt = 1;
+  var e = vn(), t = gn();
   function r(n, a) {
     var o = t(n, a);
     return e(o) ? o : void 0;
   }
-  return Ae = r, Ae;
+  return Pe = r, Pe;
 }
-var Te, gt;
-function Qr() {
-  if (gt) return Te;
-  gt = 1;
-  var e = F(), t = $(), r = e(t, "DataView");
-  return Te = r, Te;
+var _e, $t;
+function yn() {
+  if ($t) return _e;
+  $t = 1;
+  var e = W(), t = R(), r = e(t, "DataView");
+  return _e = r, _e;
 }
-var Se, yt;
-function Zr() {
-  if (yt) return Se;
-  yt = 1;
-  var e = F(), t = $(), r = e(t, "Map");
-  return Se = r, Se;
+var we, Pt;
+function Nn() {
+  if (Pt) return we;
+  Pt = 1;
+  var e = W(), t = R(), r = e(t, "Map");
+  return we = r, we;
 }
-var _e, At;
-function en() {
-  if (At) return _e;
-  At = 1;
-  var e = F(), t = $(), r = e(t, "Promise");
-  return _e = r, _e;
+var Ce, _t;
+function An() {
+  if (_t) return Ce;
+  _t = 1;
+  var e = W(), t = R(), r = e(t, "Promise");
+  return Ce = r, Ce;
 }
-var Ne, Tt;
-function tn() {
-  if (Tt) return Ne;
-  Tt = 1;
-  var e = F(), t = $(), r = e(t, "Set");
-  return Ne = r, Ne;
+var xe, wt;
+function Sn() {
+  if (wt) return xe;
+  wt = 1;
+  var e = W(), t = R(), r = e(t, "Set");
+  return xe = r, xe;
 }
-var ke, St;
-function rn() {
-  if (St) return ke;
-  St = 1;
-  var e = F(), t = $(), r = e(t, "WeakMap");
-  return ke = r, ke;
+var Oe, Ct;
+function kn() {
+  if (Ct) return Oe;
+  Ct = 1;
+  var e = W(), t = R(), r = e(t, "WeakMap");
+  return Oe = r, Oe;
 }
-var Pe, _t;
-function nn() {
-  if (_t) return Pe;
-  _t = 1;
-  var e = Qr(), t = Zr(), r = en(), n = tn(), a = rn(), o = Z(), s = tr(), i = "[object Map]", c = "[object Object]", u = "[object Promise]", l = "[object Set]", d = "[object WeakMap]", p = "[object DataView]", h = s(e), b = s(t), v = s(r), _ = s(n), x = 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()) != d) && (T = function(w) {
-    var M = o(w), z = M == c ? w.constructor : void 0, H = z ? s(z) : "";
-    if (H)
-      switch (H) {
+var je, xt;
+function Tn() {
+  if (xt) return je;
+  xt = 1;
+  var e = yn(), t = Nn(), r = An(), n = Sn(), a = kn(), o = ne(), s = dr(), i = "[object Map]", l = "[object Object]", d = "[object Promise]", c = "[object Set]", f = "[object WeakMap]", p = "[object DataView]", h = s(e), v = s(t), b = s(r), $ = s(n), w = s(a), P = o;
+  return (e && P(new e(new ArrayBuffer(1))) != p || t && P(new t()) != i || r && P(r.resolve()) != d || n && P(new n()) != c || a && P(new a()) != f) && (P = function(x) {
+    var F = o(x), Y = F == l ? x.constructor : void 0, J = Y ? s(Y) : "";
+    if (J)
+      switch (J) {
         case h:
           return p;
-        case b:
-          return i;
         case v:
-          return u;
-        case _:
-          return l;
-        case x:
+          return i;
+        case b:
           return d;
+        case $:
+          return c;
+        case w:
+          return f;
       }
-    return M;
-  }), Pe = T, Pe;
+    return F;
+  }), je = P, je;
 }
-var je, Nt;
-function Ye() {
-  if (Nt) return je;
-  Nt = 1;
+var Ie, Ot;
+function et() {
+  if (Ot) return Ie;
+  Ot = 1;
   function e(t) {
     return t != null && typeof t == "object";
   }
-  return je = e, je;
+  return Ie = e, Ie;
 }
-var xe, kt;
-function an() {
-  if (kt) return xe;
-  kt = 1;
-  var e = Z(), t = Ye(), r = "[object Arguments]";
+var Ee, jt;
+function $n() {
+  if (jt) return Ee;
+  jt = 1;
+  var e = ne(), t = et(), r = "[object Arguments]";
   function n(a) {
     return t(a) && e(a) == r;
   }
-  return xe = n, xe;
+  return Ee = n, Ee;
 }
-var we, Pt;
-function on() {
-  if (Pt) return we;
-  Pt = 1;
-  var e = an(), t = Ye(), r = Object.prototype, n = r.hasOwnProperty, a = r.propertyIsEnumerable, o = e(/* @__PURE__ */ (function() {
+var Be, It;
+function Pn() {
+  if (It) return Be;
+  It = 1;
+  var e = $n(), t = et(), r = Object.prototype, n = r.hasOwnProperty, a = r.propertyIsEnumerable, o = e(/* @__PURE__ */ (function() {
     return arguments;
   })()) ? e : function(s) {
     return t(s) && n.call(s, "callee") && !a.call(s, "callee");
   };
-  return we = o, we;
+  return Be = o, Be;
 }
-var Ce, jt;
-function rr() {
-  if (jt) return Ce;
-  jt = 1;
+var Re, Et;
+function fr() {
+  if (Et) return Re;
+  Et = 1;
   var e = Array.isArray;
-  return Ce = e, Ce;
+  return Re = e, Re;
 }
-var Ie, xt;
-function nr() {
-  if (xt) return Ie;
-  xt = 1;
+var Me, Bt;
+function pr() {
+  if (Bt) return Me;
+  Bt = 1;
   var e = 9007199254740991;
   function t(r) {
     return typeof r == "number" && r > -1 && r % 1 == 0 && r <= e;
   }
-  return Ie = t, Ie;
+  return Me = t, Me;
 }
-var Oe, wt;
-function sn() {
-  if (wt) return Oe;
-  wt = 1;
-  var e = er(), t = nr();
+var Le, Rt;
+function _n() {
+  if (Rt) return Le;
+  Rt = 1;
+  var e = ur(), t = pr();
   function r(n) {
     return n != null && t(n.length) && !e(n);
   }
-  return Oe = r, Oe;
+  return Le = r, Le;
 }
-var L = { exports: {} }, $e, Ct;
-function cn() {
-  if (Ct) return $e;
-  Ct = 1;
+var G = { exports: {} }, qe, Mt;
+function wn() {
+  if (Mt) return qe;
+  Mt = 1;
   function e() {
     return !1;
   }
-  return $e = e, $e;
-}
-L.exports;
-var It;
-function ln() {
-  return It || (It = 1, (function(e, t) {
-    var r = $(), n = cn(), 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;
-  })(L, L.exports)), L.exports;
+  return qe = e, qe;
 }
-var Ee, Ot;
-function un() {
-  if (Ot) return Ee;
-  Ot = 1;
-  var e = Z(), t = nr(), r = Ye(), n = "[object Arguments]", a = "[object Array]", o = "[object Boolean]", s = "[object Date]", i = "[object Error]", c = "[object Function]", u = "[object Map]", l = "[object Number]", d = "[object Object]", p = "[object RegExp]", h = "[object Set]", b = "[object String]", v = "[object WeakMap]", _ = "[object ArrayBuffer]", x = "[object DataView]", T = "[object Float32Array]", w = "[object Float64Array]", M = "[object Int8Array]", z = "[object Int16Array]", H = "[object Int32Array]", Ar = "[object Uint8Array]", Tr = "[object Uint8ClampedArray]", Sr = "[object Uint16Array]", _r = "[object Uint32Array]", m = {};
-  m[T] = m[w] = m[M] = m[z] = m[H] = m[Ar] = m[Tr] = m[Sr] = m[_r] = !0, m[n] = m[a] = m[_] = m[o] = m[x] = m[s] = m[i] = m[c] = m[u] = m[l] = m[d] = m[p] = m[h] = m[b] = m[v] = !1;
-  function Nr(re) {
-    return r(re) && t(re.length) && !!m[e(re)];
+G.exports;
+var Lt;
+function Cn() {
+  return Lt || (Lt = 1, (function(e, t) {
+    var r = R(), n = wn(), 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, d = l || n;
+    e.exports = d;
+  })(G, G.exports)), G.exports;
+}
+var De, qt;
+function xn() {
+  if (qt) return De;
+  qt = 1;
+  var e = ne(), t = pr(), r = et(), n = "[object Arguments]", a = "[object Array]", o = "[object Boolean]", s = "[object Date]", i = "[object Error]", l = "[object Function]", d = "[object Map]", c = "[object Number]", f = "[object Object]", p = "[object RegExp]", h = "[object Set]", v = "[object String]", b = "[object WeakMap]", $ = "[object ArrayBuffer]", w = "[object DataView]", P = "[object Float32Array]", x = "[object Float64Array]", F = "[object Int8Array]", Y = "[object Int16Array]", J = "[object Int32Array]", wr = "[object Uint8Array]", Cr = "[object Uint8ClampedArray]", xr = "[object Uint16Array]", Or = "[object Uint32Array]", g = {};
+  g[P] = g[x] = g[F] = g[Y] = g[J] = g[wr] = g[Cr] = g[xr] = g[Or] = !0, g[n] = g[a] = g[$] = g[o] = g[w] = g[s] = g[i] = g[l] = g[d] = g[c] = g[f] = g[p] = g[h] = g[v] = g[b] = !1;
+  function jr(ie) {
+    return r(ie) && t(ie.length) && !!g[e(ie)];
   }
-  return Ee = Nr, Ee;
+  return De = jr, De;
 }
-var qe, $t;
-function dn() {
-  if ($t) return qe;
-  $t = 1;
+var Fe, Dt;
+function On() {
+  if (Dt) return Fe;
+  Dt = 1;
   function e(t) {
     return function(r) {
       return t(r);
     };
   }
-  return qe = e, qe;
-}
-var D = { exports: {} };
-D.exports;
-var Et;
-function fn() {
-  return Et || (Et = 1, (function(e, t) {
-    var r = Xt(), n = t && !t.nodeType && t, a = n && !0 && e && !e.nodeType && e, o = a && a.exports === n, s = o && r.process, i = (function() {
+  return Fe = e, Fe;
+}
+var U = { exports: {} };
+U.exports;
+var Ft;
+function jn() {
+  return Ft || (Ft = 1, (function(e, t) {
+    var r = ir(), 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 = a && a.require && a.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;
-  })(D, D.exports)), D.exports;
-}
-var Be, qt;
-function pn() {
-  if (qt) return Be;
-  qt = 1;
-  var e = un(), t = dn(), r = fn(), n = r && r.isTypedArray, a = n ? t(n) : e;
-  return Be = a, Be;
-}
-var Me, Bt;
-function hn() {
-  if (Bt) return Me;
-  Bt = 1;
-  var e = Wr(), t = nn(), r = on(), n = rr(), a = sn(), o = ln(), s = Jt(), i = pn(), c = "[object Map]", u = "[object Set]", l = Object.prototype, d = l.hasOwnProperty;
+  })(U, U.exports)), U.exports;
+}
+var Ve, Vt;
+function In() {
+  if (Vt) return Ve;
+  Vt = 1;
+  var e = xn(), t = On(), r = jn(), n = r && r.isTypedArray, a = n ? t(n) : e;
+  return Ve = a, Ve;
+}
+var Ge, Gt;
+function En() {
+  if (Gt) return Ge;
+  Gt = 1;
+  var e = fn(), t = Tn(), r = Pn(), n = fr(), a = _n(), o = Cn(), s = sr(), i = In(), l = "[object Map]", d = "[object Set]", c = Object.prototype, f = c.hasOwnProperty;
   function p(h) {
     if (h == null)
       return !0;
     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)
+    var v = t(h);
+    if (v == l || v == d)
       return !h.size;
     if (s(h))
       return !e(h).length;
-    for (var v in h)
-      if (d.call(h, v))
+    for (var b in h)
+      if (f.call(h, b))
         return !1;
     return !0;
   }
-  return Me = p, Me;
+  return Ge = p, Ge;
 }
-var mn = hn();
-const Mt = /* @__PURE__ */ Ke(mn), Y = {
-  light: "light",
-  dark: "dark"
-}, C = {
-  xxs: "xxs",
-  xs: "xs",
-  s: "s",
-  m: "m",
-  xl: "xl",
-  xxl: "xxl"
-}, bn = {
-  horizontal: "horizontal"
-}, q = {
-  low: "low",
-  high: "high"
-}, vn = {
-  overline: "overline",
-  caption: "caption",
-  body1: "body1",
-  body2: "body2",
-  subtitle1: "subtitle1",
-  subtitle2: "subtitle2",
-  title: "title",
-  headline: "headline",
-  display1: "display1"
-}, R = {
-  ...vn
-}, O = {
-  info: "info",
-  success: "success",
-  warning: "warning",
-  error: "error"
-}, y = {
-  primary: "primary",
-  blue: "blue",
-  dark: "dark",
-  green: "green",
-  yellow: "yellow",
-  red: "red",
-  light: "light"
-};
-var Re = { exports: {} };
-var Rt;
-function gn() {
-  return Rt || (Rt = 1, (function(e) {
-    (function() {
-      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(o);
-            else if (Array.isArray(o)) {
-              if (o.length) {
-                var i = r.apply(null, o);
-                i && n.push(i);
-              }
-            } else if (s === "object") {
-              if (o.toString !== Object.prototype.toString && !o.toString.toString().includes("[native code]")) {
-                n.push(o.toString());
-                continue;
-              }
-              for (var c in o)
-                t.call(o, c) && o[c] && n.push(c);
-            }
-          }
-        }
-        return n.join(" ");
-      }
-      e.exports ? (r.default = r, e.exports = r) : window.classNames = r;
-    })();
-  })(Re)), Re.exports;
-}
-var yn = gn();
-const N = /* @__PURE__ */ Ke(yn);
-function ar(e, t) {
-  if (!e) return [void 0, t];
-  const [r, n] = e.split("-");
-  return [r, t || n];
-}
-function An(e, t, r) {
-  const [n, a = kr.N] = ar(t, r);
-  return `lumx-color-${e}-${n}-${a}`;
-}
-const Tn = (e, t) => An("font", e, t);
-function or(e) {
-  return `lumx-typography-${e}`;
-}
-function sr(e, t) {
-  const r = [];
-  for (const [n, a] of Object.entries(t))
-    a && r.push(`${e}--${n}`);
-  return r.join(" ");
-}
-function J(e, t, r) {
-  let n, a;
-  return Array.isArray(t) ? a = t : (n = t, a = r), !n && !a ? e : N(
-    // Additional classes
-    a,
-    // Base class
-    e,
-    // Modifier(s)
-    n ? sr(e, n) : null
-  );
-}
-function Lt(e, t, r, n) {
-  return Array.isArray(r) ? J(`${e}__${t}`, r) : J(`${e}__${t}`, r, n);
-}
-function j(e) {
-  function t(n, a) {
-    return Array.isArray(n) ? J(e, n) : J(e, n, a);
-  }
-  function r(n, a, o) {
-    return Array.isArray(a) ? Lt(e, n, a) : Lt(e, n, a, o);
-  }
-  return {
-    block: t,
-    element: r,
-    modifier: (n) => sr(e, n)
-  };
+var Bn = En();
+const Ut = /* @__PURE__ */ Ze(Bn);
+function Rn(e) {
+  return typeof e == "function" || Object.prototype.toString.call(e) === "[object Object]" && !ee(e);
 }
-function Sn(e) {
-  return typeof e == "function" || Object.prototype.toString.call(e) === "[object Object]" && !X(e);
-}
-const _n = (e) => {
+const Mn = (e) => {
   const {
     children: t,
     onClick: r,
@@ -549,37 +618,37 @@ const _n = (e) => {
     "aria-disabled": o,
     as: s,
     ...i
-  } = e, c = a || o === "true" || o === !0, u = s;
-  let l;
-  return u === "button" ? l = {
+  } = e, l = a || o === "true" || o === !0, d = s;
+  let c;
+  return d === "button" ? c = {
     type: i.type || "button",
     disabled: a
-  } : l = {
+  } : c = {
     tabIndex: a ? "-1" : i.tabIndex
-  }, f(u, g({
-    "aria-disabled": c || void 0
-  }, i, l, {
-    onClick: (d) => {
-      if (c) {
-        d.stopPropagation(), d.preventDefault();
+  }, u(d, m({
+    "aria-disabled": l || void 0
+  }, i, c, {
+    onClick: (f) => {
+      if (l) {
+        f.stopPropagation(), f.preventDefault();
         return;
       }
-      r?.(d);
+      r?.(f);
     }
-  }), Sn(t) ? t : {
+  }), Rn(t) ? t : {
     default: () => [t]
   });
-}, Nn = "ButtonRoot", kn = "lumx-button-wrapper", {
-  block: Pn
-} = j(kn), jn = "lumx-button", {
-  block: xn
-} = j(jn), wn = (e) => {
+}, Ln = "ButtonRoot", qn = "lumx-button-wrapper", {
+  block: Dn
+} = T(qn), Fn = "lumx-button", {
+  block: Vn
+} = T(Fn), Gn = (e) => {
   const {
     color: t,
     emphasis: r,
     variant: n,
     fullWidth: a
-  } = e, o = r === q.low && (t === y.light ? y.dark : y.light), s = Pn({
+  } = e, o = r === L.low && (t === _.light ? _.dark : _.light), s = Dn({
     [`color-${o}`]: !!o,
     [`variant-${n}`]: !!n,
     "is-full-width": a
@@ -587,10 +656,10 @@ const _n = (e) => {
     ...e,
     hasBackground: !1
   };
-  return f("div", {
+  return u("div", {
     className: s
-  }, [V(i)]);
-}, V = (e) => {
+  }, [z(i)]);
+}, z = (e) => {
   const {
     "aria-label": t,
     "aria-disabled": r,
@@ -599,68 +668,68 @@ const _n = (e) => {
     color: o,
     emphasis: s,
     hasBackground: i,
-    isSelected: c,
-    isActive: u,
-    isFocused: l,
-    isHovered: d,
+    isSelected: l,
+    isActive: d,
+    isFocused: c,
+    isHovered: f,
     linkAs: p,
     size: h,
-    theme: b = Y.light,
-    variant: v,
-    fullWidth: _,
-    ref: x,
-    ...T
-  } = e, w = o || s !== q.high && b === Y.dark && y.light || s === q.high && y.primary || y.dark;
+    theme: v = Q.light,
+    variant: b,
+    fullWidth: $,
+    ref: w,
+    ...P
+  } = e, x = o || s !== L.high && v === Q.dark && _.light || s === L.high && _.primary || _.dark;
   if (i)
-    return wn({
+    return Gn({
       ...e,
-      ref: x,
-      variant: v,
-      color: w
+      ref: w,
+      variant: b,
+      color: x
     });
-  const M = N(a, xn({
-    [`color-${w}`]: !!w,
+  const F = N(a, Vn({
+    [`color-${x}`]: !!x,
     [`emphasis-${s}`]: !!s,
-    "is-selected": c,
+    "is-selected": l,
     "is-disabled": !!(e.isDisabled || e["aria-disabled"]),
-    "is-active": u,
-    "is-focused": l,
-    "is-hovered": d,
+    "is-active": d,
+    "is-focused": c,
+    "is-hovered": f,
     [`size-${h}`]: !!h,
-    [`theme-${b}`]: !!(s === q.high && b),
-    [`variant-${v}`]: !!v,
-    "is-full-width": _
+    [`theme-${v}`]: !!(s === L.high && v),
+    [`variant-${b}`]: !!b,
+    "is-full-width": $
   }));
-  return _n({
-    as: p || (T.href ? "a" : "button"),
-    ...T,
+  return Mn({
+    as: p || (P.href ? "a" : "button"),
+    ...P,
     "aria-disabled": r,
     "aria-label": t,
-    ref: x,
-    className: M,
+    ref: w,
+    className: F,
     children: n
   });
 };
-V.displayName = Nn;
-V.defaultProps = {};
-const Cn = "Button", ir = "lumx-button", {
-  modifier: In
-} = j(ir), Fe = {
-  emphasis: q.high,
-  size: C.m
-}, ee = (e) => {
+z.displayName = Ln;
+z.defaultProps = {};
+const Un = "Button", hr = "lumx-button", {
+  modifier: Wn
+} = T(hr), ze = {
+  emphasis: L.high,
+  size: O.m
+}, ae = (e) => {
   const {
     className: t,
-    emphasis: r = Fe.emphasis,
+    emphasis: r = ze.emphasis,
     leftIcon: n,
     rightIcon: a,
-    size: o = Fe.size,
+    size: o = ze.size,
     ...s
-  } = e, i = N(t, In({
+  } = e, i = N(t, Wn({
     "has-left-icon": !!n,
     "has-right-icon": !!a
   }));
-  return V({
+  return z({
     emphasis: r,
     size: o,
     ...s,
@@ -668,41 +737,41 @@ const Cn = "Button", ir = "lumx-button", {
     variant: "button"
   });
 };
-ee.displayName = Cn;
-ee.className = ir;
-ee.defaultProps = Fe;
-function B(e = { defaultTheme: Pr.light }) {
+ae.displayName = Un;
+ae.className = hr;
+ae.defaultProps = ze;
+function C(e = { defaultTheme: Er.light }) {
   const { defaultTheme: t } = e;
-  return ze("theme", void 0) || t;
+  return Xe("theme", void 0) || t;
 }
-const On = /* @__PURE__ */ Symbol("DISABLED_STATE_KEY");
-function $n() {
-  return ze(On, { state: null });
+const zn = /* @__PURE__ */ Symbol("DISABLED_STATE_KEY");
+function Hn() {
+  return Xe(zn, { state: null });
 }
-function Je(e) {
-  const t = $n(), r = A(() => {
-    const o = typeof e == "function" ? e() : Ze(e);
-    return qr(t, {
+function H(e) {
+  const t = Hn(), r = k(() => {
+    const o = typeof e == "function" ? e() : at(e);
+    return Gr(t, {
       disabled: o.disabled,
       isDisabled: o.isDisabled,
       "aria-disabled": o["aria-disabled"] ?? o.ariaDisabled
     });
-  }), n = A(
+  }), n = k(
     () => r.value["aria-disabled"] || r.value.disabled || void 0
-  ), a = A(() => {
-    const o = typeof e == "function" ? e() : Ze(e), { disabled: s, isDisabled: i, "aria-disabled": c, ariaDisabled: u, onClick: l, onChange: d, ...p } = o;
-    return n.value || (l && (p.onClick = l), d && (p.onChange = d)), p;
+  ), a = k(() => {
+    const o = typeof e == "function" ? e() : at(e), { disabled: s, isDisabled: i, "aria-disabled": l, ariaDisabled: d, 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 k = () => (...e) => e, Dt = S({
+const Wt = y({
   name: "ResetTheme",
   setup(e, { slots: t }) {
-    return Wt("theme", void 0), () => t.default?.();
+    return Jt("theme", void 0), () => t.default?.();
   }
-}), En = "Icon", qn = "lumx-icon", cr = qn, {
-  block: Bn
-} = j(cr), Mn = {}, E = (e) => {
+}), Kn = "Icon", Yn = "lumx-icon", mr = Yn, {
+  block: Jn
+} = T(mr), Xn = {}, M = (e) => {
   const {
     className: t,
     color: r,
@@ -711,54 +780,54 @@ const k = () => (...e) => e, Dt = S({
     icon: o,
     size: s,
     ref: i,
-    theme: c,
-    alt: u,
-    verticalAlign: l,
-    ...d
-  } = e, [p, h] = ar(r, n);
-  let b = p;
-  !b && (a || c) && (b = c === Y.dark ? y.light : y.dark);
-  let v = h;
-  !v && a && b === y.dark && (v = "L2");
-  let _ = s;
-  return s && a ? s === C.xxs || s === C.xs ? _ = C.s : s === C.xxl && (_ = C.xl) : a && (_ = C.m), f("i", g({
+    theme: l,
+    alt: d,
+    verticalAlign: c,
+    ...f
+  } = e, [p, h] = tr(r, n);
+  let v = p;
+  !v && (a || l) && (v = l === Q.dark ? _.light : _.dark);
+  let b = h;
+  !b && a && v === _.dark && (b = "L2");
+  let $ = s;
+  return s && a ? s === O.xxs || s === O.xs ? $ = O.s : s === O.xxl && ($ = O.xl) : a && ($ = O.m), u("i", m({
     ref: i
-  }, d, {
-    className: N(t, Bn({
-      [`color-${b}`]: !!b,
-      [`color-variant-${v}`]: !!v,
+  }, f, {
+    className: N(t, Jn({
+      [`color-${v}`]: !!v,
+      [`color-variant-${b}`]: !!b,
       "has-shape": a,
-      [`theme-${c}`]: !!c,
-      [`size-${_}`]: !!_,
+      [`theme-${l}`]: !!l,
+      [`size-${$}`]: !!$,
       "no-shape": !a,
-      "has-dark-layer": !a && b === y.yellow && o === Yt,
+      "has-dark-layer": !a && v === _.yellow && o === er,
       path: !0,
-      "vertical-align-middle": l === "middle"
+      "vertical-align-middle": c === "middle"
     }))
-  }), [f("svg", {
-    "aria-hidden": u ? void 0 : "true",
-    role: u ? "img" : void 0,
-    "aria-label": u,
+  }), [u("svg", {
+    "aria-hidden": d ? void 0 : "true",
+    role: d ? "img" : void 0,
+    "aria-label": d,
     height: "1em",
     preserveAspectRatio: "xMidYMid meet",
     style: {
-      verticalAlign: l ? void 0 : "-0.125em"
+      verticalAlign: c ? void 0 : "-0.125em"
     },
     viewBox: "0 0 24 24",
     width: "1em"
-  }, [f("path", {
+  }, [u("path", {
     d: o,
     fill: "currentColor"
   }, null)])]);
 };
-E.displayName = En;
-E.className = cr;
-E.defaultProps = Mn;
-const Ve = /* @__PURE__ */ S((e) => {
-  const t = P(), r = B({
+M.displayName = Kn;
+M.className = mr;
+M.defaultProps = Xn;
+const He = /* @__PURE__ */ y((e) => {
+  const t = S(), r = C({
     defaultTheme: void 0
   });
-  return () => f(E, g(e, t, {
+  return () => u(M, m(e, t, {
     className: e.class,
     theme: e.theme || r
   }), null);
@@ -766,10 +835,10 @@ const Ve = /* @__PURE__ */ S((e) => {
   name: "Icon",
   inheritAttrs: !1,
   // Redefine properties so that they come in as `props` on the `defineComponent` function
-  props: k()("icon", "color", "colorVariant", "hasShape", "size", "alt", "verticalAlign", "theme", "class")
-}), Rn = "lumx-text", {
-  block: Ln
-} = j(Rn), Dn = (e) => {
+  props: A()("icon", "color", "colorVariant", "hasShape", "size", "alt", "verticalAlign", "theme", "class")
+}), Qn = "lumx-text", {
+  block: Zn
+} = T(Qn), ea = (e) => {
   const {
     className: t,
     color: r,
@@ -778,240 +847,240 @@ const Ve = /* @__PURE__ */ S((e) => {
     typography: o,
     truncate: s,
     whiteSpace: i,
-    style: c
-  } = e, u = typeof s == "object" && s.lines > 1 && {
+    style: l
+  } = e, d = typeof s == "object" && s.lines > 1 && {
     "--lumx-text-truncate-lines": s.lines
-  }, l = !!u, d = !!s, p = !a && !(d && !l) && i && {
+  }, c = !!d, f = !!s, p = !a && !(f && !c) && i && {
     "--lumx-text-white-space": i
   };
   return {
-    className: N(t, Ln({
-      "is-truncated": d && !l,
-      "is-truncated-multiline": l,
+    className: N(t, Zn({
+      "is-truncated": f && !c,
+      "is-truncated-multiline": c,
       "no-wrap": a
-    }), o && or(o), r && Tn(r, n)),
+    }), o && rr(o), r && rn(r, n)),
     style: {
-      ...u,
+      ...d,
       ...p,
-      ...c
+      ...l
     }
   };
 };
-function lr(e, t) {
-  return jr() ? (xr(e, t), !0) : !1;
+function br(e, t) {
+  return Br() ? (Rr(e, t), !0) : !1;
 }
-const Fn = typeof window < "u" && typeof document < "u";
+const ta = typeof window < "u" && typeof document < "u";
 typeof WorkerGlobalScope < "u" && globalThis instanceof WorkerGlobalScope;
-const Vn = (e) => e != null;
-function Gn(e) {
+const ra = (e) => e != null;
+function na(e) {
   return Array.isArray(e) ? e : [e];
 }
-const ur = Fn ? window : void 0;
-function Ge(e) {
+const vr = ta ? window : void 0;
+function Ke(e) {
   var t;
-  const r = He(e);
+  const r = Qe(e);
   return (t = r?.$el) !== null && t !== void 0 ? t : r;
 }
 // @__NO_SIDE_EFFECTS__
-function Un() {
-  const e = wr(!1), t = Cr();
-  return t && Ir(() => {
+function aa() {
+  const e = Mr(!1), t = Lr();
+  return t && qr(() => {
     e.value = !0;
   }, t), e;
 }
 // @__NO_SIDE_EFFECTS__
-function dr(e) {
-  const t = /* @__PURE__ */ Un();
-  return A(() => (t.value, !!e()));
+function gr(e) {
+  const t = /* @__PURE__ */ aa();
+  return k(() => (t.value, !!e()));
 }
-function Wn(e, t, r = {}) {
-  const { window: n = ur, ...a } = r;
+function oa(e, t, r = {}) {
+  const { window: n = vr, ...a } = r;
   let o;
-  const s = /* @__PURE__ */ dr(() => n && "MutationObserver" in n), i = () => {
+  const s = /* @__PURE__ */ gr(() => n && "MutationObserver" in n), i = () => {
     o && (o.disconnect(), o = void 0);
-  }, c = Q(A(() => {
-    const d = Gn(He(e)).map(Ge).filter(Vn);
-    return new Set(d);
-  }), (d) => {
-    i(), s.value && d.size && (o = new MutationObserver(t), d.forEach((p) => o.observe(p, a)));
+  }, l = te(k(() => {
+    const f = na(Qe(e)).map(Ke).filter(ra);
+    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 = () => o?.takeRecords(), l = () => {
-    c(), i();
+  }), d = () => o?.takeRecords(), c = () => {
+    l(), i();
   };
-  return lr(l), {
+  return br(c), {
     isSupported: s,
-    stop: l,
-    takeRecords: u
+    stop: c,
+    takeRecords: d
   };
 }
-function zn(e, t, r = {}) {
-  const { window: n = ur, ...a } = r;
+function sa(e, t, r = {}) {
+  const { window: n = vr, ...a } = r;
   let o;
-  const s = /* @__PURE__ */ dr(() => n && "ResizeObserver" in n), i = () => {
+  const s = /* @__PURE__ */ gr(() => n && "ResizeObserver" in n), i = () => {
     o && (o.disconnect(), o = void 0);
-  }, c = Q(A(() => {
-    const l = He(e);
-    return Array.isArray(l) ? l.map((d) => Ge(d)) : [Ge(l)];
-  }), (l) => {
+  }, l = te(k(() => {
+    const c = Qe(e);
+    return Array.isArray(c) ? c.map((f) => Ke(f)) : [Ke(c)];
+  }), (c) => {
     if (i(), s.value && n) {
       o = new ResizeObserver(t);
-      for (const d of l) d && o.observe(d, a);
+      for (const f of c) f && o.observe(f, a);
     }
   }, {
     immediate: !0,
     flush: "post"
-  }), u = () => {
-    i(), c();
+  }), d = () => {
+    i(), l();
   };
-  return lr(u), {
+  return br(d), {
     isSupported: s,
-    stop: u
+    stop: d
   };
 }
-function Hn(e) {
-  const t = zt(void 0), r = () => {
+function ia(e) {
+  const t = Xt(void 0), r = () => {
     const n = e.value;
-    n && !n.closest(`.${Br.visuallyHidden()}`) && n.offsetWidth < n.scrollWidth ? t.value = n.innerText : t.value = void 0;
+    n && !n.closest(`.${Ur.visuallyHidden()}`) && n.offsetWidth < n.scrollWidth ? t.value = n.innerText : t.value = void 0;
   };
-  return Wn(e, r, {
+  return oa(e, r, {
     childList: !0,
     attributes: !0,
     characterData: !0,
     subtree: !0
-  }), zn(e, r), Q(e, r, { immediate: !0 }), { tooltipLabel: t };
+  }), sa(e, r), te(e, r, { immediate: !0 }), { tooltipLabel: t };
 }
-const Kn = (e = "default") => {
-  const t = Ht();
+const la = (e = "default") => {
+  const t = Qt();
   return () => {
     const r = t?.[e];
     return r ? r() : null;
   };
 };
-function Ue(e) {
+function Ye(e) {
   if (!e) return;
   const t = [];
   for (const r of e) {
-    if (!X(r)) {
+    if (!ee(r)) {
       t.push(r);
       continue;
     }
-    if (r.type === Ve) {
+    if (r.type === He) {
       t.push(" "), t.push(r), t.push(" ");
       continue;
     }
-    if (r.type === Kt && Array.isArray(r.children)) {
-      const n = Ue(r.children);
+    if (r.type === Zt && Array.isArray(r.children)) {
+      const n = Ye(r.children);
       n && t.push(...n);
       continue;
     }
     if (typeof r.type == "string" && Array.isArray(r.children)) {
-      const n = Ue(r.children), a = { ...r.props || {} };
-      r.key != null && (a.key = r.key), r.ref != null && (a.ref = r.ref), t.push(f(r.type, a, n));
+      const n = Ye(r.children), a = { ...r.props || {} };
+      r.key != null && (a.key = r.key), r.ref != null && (a.ref = r.ref), t.push(u(r.type, a, n));
       continue;
     }
     t.push(r);
   }
   return t;
 }
-function Yn(e) {
-  return typeof e == "function" || Object.prototype.toString.call(e) === "[object Object]" && !X(e);
+function ca(e) {
+  return typeof e == "function" || Object.prototype.toString.call(e) === "[object Object]" && !ee(e);
 }
-const Xe = /* @__PURE__ */ S((e, {
+const tt = /* @__PURE__ */ y((e, {
   slots: t
 }) => {
-  const r = P(), n = Kn(), a = Or("tooltip-label"), {
+  const r = S(), n = la(), a = Dr("tooltip-label"), {
     tooltipLabel: o
-  } = Hn(a), s = A(() => Dn({
+  } = ia(a), s = k(() => ea({
     ...e,
     className: e.class || r.class || r.className
-  })), i = A(() => {
+  })), i = k(() => {
     const {
-      children: c,
-      ...u
+      children: l,
+      ...d
     } = r;
     return {
-      ...u,
+      ...d,
       ...s.value
     };
   });
   return () => {
-    const c = e.as || "div", u = n() || t.default?.(), l = u ? Ue(u) : null;
-    return f(c, g({
+    const l = e.as || "div", d = n() || t.default?.(), c = d ? Ye(d) : null;
+    return u(l, m({
       ref: "tooltip-label"
     }, i.value, {
       class: i.value.className,
       style: i.value.style,
       title: o.value
-    }), Yn(l) ? l : {
-      default: () => [l]
+    }), ca(c) ? c : {
+      default: () => [c]
     });
   };
 }, {
   name: "LumxText",
   inheritAttrs: !1,
   // Redefine properties so that they come in as `props` on the `defineComponent` function
-  props: k()("as", "color", "colorVariant", "typography", "truncate", "noWrap", "whiteSpace", "style", "class")
-}), Jn = {
+  props: A()("as", "color", "colorVariant", "typography", "truncate", "noWrap", "whiteSpace", "style", "class")
+}), ua = {
   click: (e) => e instanceof MouseEvent
-}, Ua = /* @__PURE__ */ S((e, {
+}, Io = /* @__PURE__ */ y((e, {
   emit: t
 }) => {
-  const r = Ht(), n = P(), a = B(), {
+  const r = Qt(), n = S(), a = C(), {
     isAnyDisabled: o,
     disabledStateProps: s,
     otherProps: i
-  } = Je(A(() => ({
+  } = H(k(() => ({
     ...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 === Xe ? l[0] : f("span", null, [l]);
+  }))), l = (c) => {
+    o.value || (c.stopImmediatePropagation(), t("click", c));
+  }, d = () => {
+    const c = r.default?.();
+    return !c || c.length === 0 ? null : c.length === 1 && c[0].type === tt ? c[0] : u("span", null, [c]);
   };
   return () => {
-    const l = f(Kt, null, [e.leftIcon && !Mt(e.leftIcon) && f(Dt, null, {
-      default: () => [f(Ve, {
+    const c = u(Zt, null, [e.leftIcon && !Ut(e.leftIcon) && u(Wt, null, {
+      default: () => [u(He, {
         icon: e.leftIcon
       }, null)]
-    }), u(), e.rightIcon && !Mt(e.rightIcon) && f(Dt, null, {
-      default: () => [f(Ve, {
+    }), d(), e.rightIcon && !Ut(e.rightIcon) && u(Wt, null, {
+      default: () => [u(He, {
         icon: e.rightIcon
       }, null)]
     })]);
-    return f(ee, g(i.value, s.value, {
+    return u(ae, m(i.value, s.value, {
       className: e.class,
       theme: e.theme || a,
-      onClick: c,
-      children: l
+      onClick: l,
+      children: c
     }), null);
   };
 }, {
   name: "LumxButton",
   inheritAttrs: !1,
   // Redefine properties so that they come in as `props` on the `defineComponent` function
-  props: k()("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: Jn
-}), Xn = "IconButton", Qn = "lumx-icon-button", We = {
-  emphasis: q.high,
-  size: C.m
-}, G = (e) => {
+  props: A()("leftIcon", "rightIcon", "color", "emphasis", "hasBackground", "href", "isDisabled", "isSelected", "name", "size", "theme", "class", "aria-expanded", "aria-disabled", "aria-haspopup", "aria-label", "aria-pressed", "disabled", "fullWidth", "isActive", "isFocused", "isHovered", "linkAs", "target", "type"),
+  emits: ua
+}), da = "IconButton", fa = "lumx-icon-button", Je = {
+  emphasis: L.high,
+  size: O.m
+}, K = (e) => {
   const {
-    emphasis: t = We.emphasis,
+    emphasis: t = Je.emphasis,
     image: r,
     icon: n,
     label: a,
-    size: o = We.size,
+    size: o = Je.size,
     ...s
-  } = e, i = r ? f("img", {
+  } = e, i = r ? u("img", {
     alt: "",
     src: r
-  }, null) : E({
+  }, null) : M({
     icon: n
   });
-  return V({
+  return z({
     emphasis: t,
     size: o,
     ...s,
@@ -1020,25 +1089,25 @@ const Xe = /* @__PURE__ */ S((e, {
     children: i
   });
 };
-G.displayName = Xn;
-G.className = Qn;
-G.defaultProps = We;
-const Zn = {
+K.displayName = da;
+K.className = fa;
+K.defaultProps = Je;
+const pa = {
   click: (e) => e instanceof MouseEvent
-}, Wa = /* @__PURE__ */ S((e, {
+}, Eo = /* @__PURE__ */ y((e, {
   emit: t
 }) => {
-  const r = P(), n = B(), {
+  const r = S(), n = C(), {
     isAnyDisabled: a,
     disabledStateProps: o,
     otherProps: s
-  } = Je(A(() => ({
+  } = H(k(() => ({
     ...e,
     ...r
-  }))), i = (c) => {
-    a.value || (c.stopImmediatePropagation(), t("click", c));
+  }))), i = (l) => {
+    a.value || (l.stopImmediatePropagation(), t("click", l));
   };
-  return () => f(G, g(s.value, o.value, {
+  return () => u(K, m(s.value, o.value, {
     className: e.class,
     theme: e.theme || n,
     title: e.label,
@@ -1048,26 +1117,26 @@ const Zn = {
   name: "IconButton",
   inheritAttrs: !1,
   // Redefine properties so that they come in as `props` on the `defineComponent` function
-  props: k()("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: Zn
-}), ea = "ButtonGroup", fr = "lumx-button-group", ta = {}, te = (e) => {
+  props: A()("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: pa
+}), ha = "ButtonGroup", yr = "lumx-button-group", ma = {}, oe = (e) => {
   const {
     children: t,
     className: r,
     ...n
   } = e;
-  return f("div", g(n, {
-    className: N(r, fr)
+  return u("div", m(n, {
+    className: N(r, yr)
   }), [t]);
 };
-te.displayName = ea;
-te.className = fr;
-te.defaultProps = ta;
-const za = /* @__PURE__ */ S((e, {
+oe.displayName = ha;
+oe.className = yr;
+oe.defaultProps = ma;
+const Bo = /* @__PURE__ */ y((e, {
   slots: t
 }) => {
-  const r = P();
-  return () => f(te, g(e, r, {
+  const r = S();
+  return () => u(oe, m(e, r, {
     className: e.class,
     children: t.default?.()
   }), null);
@@ -1075,11 +1144,11 @@ const za = /* @__PURE__ */ S((e, {
   name: "ButtonGroup",
   inheritAttrs: !1,
   // Redefine properties so that they come in as `props` on the `defineComponent` function
-  props: k()("class")
-}), ra = "InputLabel", na = "lumx-input-label", pr = na, {
-  block: aa
-} = j(pr), oa = {};
-function U(e) {
+  props: A()("class")
+}), ba = "InputLabel", va = "lumx-input-label", Nr = va, {
+  block: ga
+} = T(Nr), ya = {};
+function q(e) {
   const {
     children: t,
     className: r,
@@ -1088,58 +1157,58 @@ function U(e) {
     theme: o,
     typography: s,
     ref: i,
-    ...c
+    ...l
   } = e;
-  return f("label", g({
+  return u("label", m({
     ref: i
-  }, c, {
+  }, l, {
     htmlFor: n,
-    className: N(r, aa({
+    className: N(r, ga({
       "is-required": a,
       [`theme-${o}`]: !!o,
       "has-custom-typography": !!s
-    }), s && or(s))
+    }), s && rr(s))
   }), [t]);
 }
-U.displayName = ra;
-U.className = pr;
-U.defaultProps = oa;
-const sa = {
-  [O.error]: { color: "red" },
-  [O.success]: { color: "green" },
-  [O.warning]: { color: "yellow" }
-}, ia = "InputHelper", ca = "lumx-input-helper", hr = ca, {
-  block: la
-} = j(hr), mr = {
-  kind: O.info
+q.displayName = ba;
+q.className = Nr;
+q.defaultProps = ya;
+const Na = {
+  [B.error]: { color: "red" },
+  [B.success]: { color: "green" },
+  [B.warning]: { color: "yellow" }
+}, Aa = "InputHelper", Sa = "lumx-input-helper", Ar = Sa, {
+  block: ka
+} = T(Ar), Sr = {
+  kind: B.info
 };
-function W(e) {
+function D(e) {
   const {
     children: t,
     className: r,
-    kind: n = mr.kind,
+    kind: n = Sr.kind,
     theme: a,
     ref: o,
     ...s
   } = e, {
     color: i
-  } = sa[n] || {};
-  return f("p", g({
+  } = Na[n] || {};
+  return u("p", m({
     ref: o
   }, s, {
-    className: N(r, la({
+    className: N(r, ka({
       [`color-${i}`]: !!i,
       [`theme-${a}`]: !!a
     }))
   }), [t]);
 }
-W.displayName = ia;
-W.className = hr;
-W.defaultProps = mr;
-const br = "intermediate", ua = "lumx-checkbox", {
-  block: da,
-  element: I
-} = j(ua), fa = (e) => {
+D.displayName = Aa;
+D.className = Ar;
+D.defaultProps = Sr;
+const kr = "intermediate", Ta = "lumx-checkbox", {
+  block: $a,
+  element: j
+} = T(Ta), Pa = (e) => {
   const {
     checked: t,
     className: r,
@@ -1148,119 +1217,145 @@ const br = "intermediate", ua = "lumx-checkbox", {
     inputRef: o,
     isChecked: s = t,
     label: i,
-    name: c,
-    ref: u,
-    onChange: l,
-    theme: d,
+    name: l,
+    ref: d,
+    onChange: c,
+    theme: f,
     value: p,
     inputProps: h = {},
-    isDisabled: b,
-    inputId: v,
-    ..._
-  } = e, x = s === br, T = (w) => {
-    l && l(!s, p, c, w);
+    isDisabled: v,
+    inputId: b,
+    ...$
+  } = e, w = s === kr, P = (x) => {
+    c && c(!s, p, l, x);
   };
-  return f("div", g({
-    ref: u
-  }, _, {
-    className: N(r, da({
+  return u("div", m({
+    ref: d
+  }, $, {
+    className: N(r, $a({
       // Whether state is intermediate class name will "-checked"
-      "is-checked": x ? !0 : s,
-      "is-disabled": b,
+      "is-checked": w ? !0 : s,
+      "is-disabled": v,
       "is-unchecked": !s,
-      [`theme-${d}`]: !!d
+      [`theme-${f}`]: !!f
     }))
-  }), [f("div", {
-    className: I("input-wrapper")
-  }, [f("input", g({
+  }), [u("div", {
+    className: j("input-wrapper")
+  }, [u("input", m({
     ref: o,
     type: "checkbox",
-    id: v,
-    className: I("input-native"),
-    name: c,
+    id: b,
+    className: j("input-native"),
+    name: l,
     value: p,
     checked: s,
-    onChange: T,
-    "aria-describedby": n ? `${v}-helper` : void 0,
-    "aria-checked": x ? "mixed" : !!s
+    onChange: P,
+    "aria-describedby": n ? `${b}-helper` : void 0,
+    "aria-checked": w ? "mixed" : !!s
   }, h?.readOnly ? {
     readOnly: h.readOnly
-  } : {}, h), null), f("div", {
-    className: I("input-placeholder")
-  }, [f("div", {
-    className: I("input-background")
-  }, null), f("div", {
-    className: I("input-indicator")
-  }, [E({
-    icon: x ? Rr : Mr
-  })])])]), f("div", {
-    className: I("content")
-  }, [i && U({
-    htmlFor: v,
-    className: I("label"),
-    theme: d,
+  } : {}, h), null), u("div", {
+    className: j("input-placeholder")
+  }, [u("div", {
+    className: j("input-background")
+  }, null), u("div", {
+    className: j("input-indicator")
+  }, [M({
+    icon: w ? zr : Wr
+  })])])]), u("div", {
+    className: j("content")
+  }, [i && q({
+    htmlFor: b,
+    className: j("label"),
+    theme: f,
     children: i
-  }), n && W({
-    id: `${v}-helper`,
-    className: I("helper"),
-    theme: d,
+  }), n && D({
+    id: `${b}-helper`,
+    className: j("helper"),
+    theme: f,
     children: n
   })])]);
 };
-let Ft = 0;
-function pa() {
-  return Ft += 1, `:lumx${Ft}:`;
+let zt = 0;
+function rt() {
+  return zt += 1, `:lumx${zt}:`;
 }
-const ha = {
+const _a = {
   change: (e, t, r, n) => typeof e == "boolean" && n instanceof Event
-}, Ha = /* @__PURE__ */ S((e, {
+}, Ro = /* @__PURE__ */ y((e, {
   emit: t
 }) => {
-  const r = P(), n = B(), a = pa(), o = A(() => e.id || a), s = zt(null), {
+  const r = S(), n = C(), a = rt(), o = k(() => e.id || a), s = Xt(null), {
     isAnyDisabled: i,
-    disabledStateProps: c,
-    otherProps: u
-  } = Je(A(() => ({
+    disabledStateProps: l,
+    otherProps: d
+  } = H(k(() => ({
     ...e,
     ...r
-  }))), l = A(() => e.isChecked === br);
-  Q(l, (p) => {
+  }))), c = k(() => e.isChecked === kr);
+  te(c, (p) => {
     s.value && (s.value.indeterminate = p);
   }, {
     immediate: !0
   });
-  const d = (p, h, b, v) => {
-    i.value || t("change", p, h, b, v);
+  const f = (p, h, v, b) => {
+    i.value || (b?.stopImmediatePropagation?.(), t("change", p, h, v, b));
   };
-  return () => fa({
-    ...u.value,
+  return () => u(Pa, m(d.value, {
     className: e.class,
     theme: e.theme || n,
     inputId: o.value,
     inputRef: s,
     isDisabled: i.value,
-    onChange: d,
+    onChange: f,
     label: e.label,
     inputProps: {
       ...e.inputProps,
-      ...c.value,
-      readOnly: c.value["aria-disabled"]
+      ...l.value,
+      readOnly: l.value["aria-disabled"]
     }
-  });
+  }), null);
 }, {
   name: "Checkbox",
   inheritAttrs: !1,
   // Redefine properties so that they come in as `props` on the `defineComponent` function
-  props: k()("checked", "class", "helper", "id", "inputProps", "isChecked", "isDisabled", "label", "name", "theme", "value", "aria-disabled"),
-  emits: ha
+  props: A()("checked", "class", "disabled", "helper", "id", "inputProps", "isChecked", "isDisabled", "label", "name", "theme", "value", "aria-disabled"),
+  emits: _a
+}), wa = "lumx-divider", {
+  block: Ca
+} = T(wa), xa = (e) => {
+  const {
+    className: t,
+    theme: r,
+    ref: n,
+    ...a
+  } = e;
+  return u("hr", m({
+    ref: n
+  }, a, {
+    className: N(t, Ca({
+      [`theme-${r}`]: !!r
+    }))
+  }), null);
+}, Mo = /* @__PURE__ */ y((e) => {
+  const t = S(), r = C();
+  return () => u(xa, m(t, e, {
+    className: e.class,
+    theme: e.theme || r
+  }), null);
+}, {
+  name: "LumxDivider",
+  inheritAttrs: !1,
+  // Redefine properties so that they come in as `props` on the `defineComponent` function
+  props: A()("class", "theme")
 });
-function ma(e) {
-  return typeof e == "function" || Object.prototype.toString.call(e) === "[object Object]" && !X(e);
+function Oa(e) {
+  return typeof e == "function" || Object.prototype.toString.call(e) === "[object Object]" && !ee(e);
 }
-const ba = "lumx-flag", {
-  block: va,
-  element: Vt
-} = j(ba), ga = (e) => {
+const ja = "lumx-flag", {
+  block: Ia,
+  element: Ht
+} = T(ja), Ea = (e) => {
   const {
     children: t,
     icon: r,
@@ -1269,59 +1364,59 @@ const ba = "lumx-flag", {
     theme: o,
     truncate: s,
     Text: i,
-    ...c
-  } = e, u = n || (o === Y.light ? y.dark : y.light), l = !!s;
-  return f("div", g(c, {
-    className: N(a, va({
-      [`color-${u}`]: !!u,
-      "is-truncated": l
+    ...l
+  } = e, d = n || (o === Q.light ? _.dark : _.light), c = !!s;
+  return u("div", m(l, {
+    className: N(a, Ia({
+      [`color-${d}`]: !!d,
+      "is-truncated": c
     }))
-  }), [r && E({
+  }), [r && M({
     icon: r,
-    size: C.xxs,
-    className: Vt("icon")
-  }), f(i, {
+    size: O.xxs,
+    className: Ht("icon")
+  }), u(i, {
     as: "span",
     truncate: !!s,
     typography: "overline",
-    className: Vt("label")
-  }, ma(t) ? t : {
+    className: Ht("label")
+  }, Oa(t) ? t : {
     default: () => [t]
   })]);
-}, Ka = /* @__PURE__ */ S((e, {
+}, Lo = /* @__PURE__ */ y((e, {
   slots: t
 }) => {
-  const r = P(), n = B();
-  return () => f(ga, g(e, r, {
+  const r = S(), n = C();
+  return () => u(Ea, m(e, r, {
     className: e.class,
     theme: e.theme || n,
     children: t.default?.(),
-    Text: Xe
+    Text: tt
   }), null);
 }, {
   name: "Flag",
   inheritAttrs: !1,
   // Redefine properties so that they come in as `props` on the `defineComponent` function
-  props: k()("color", "icon", "truncate", "theme", "class")
+  props: A()("color", "icon", "truncate", "theme", "class")
 });
-var Le, Gt;
-function ya() {
-  if (Gt) return Le;
-  Gt = 1;
-  var e = rr();
+var Ue, Kt;
+function Ba() {
+  if (Kt) return Ue;
+  Kt = 1;
+  var e = fr();
   function t() {
     if (!arguments.length)
       return [];
     var r = arguments[0];
     return e(r) ? r : [r];
   }
-  return Le = t, Le;
+  return Ue = t, Ue;
 }
-var Aa = ya();
-const Ta = /* @__PURE__ */ Ke(Aa), Sa = "lumx-flex-box", {
-  block: _a
-} = j(Sa);
-function Na(e) {
+var Ra = Ba();
+const Ma = /* @__PURE__ */ Ze(Ra), La = "lumx-flex-box", {
+  block: qa
+} = T(La);
+function Da(e) {
   const {
     className: t,
     fillSpace: r,
@@ -1330,35 +1425,35 @@ function Na(e) {
     marginAuto: o,
     noShrink: s,
     vAlign: i,
-    wrap: c,
-    orientation: u,
-    ...l
-  } = e, d = u ?? (c || a || i ? bn.horizontal : null);
+    wrap: l,
+    orientation: d,
+    ...c
+  } = e, f = d ?? (l || a || i ? Xr.horizontal : null);
   return {
-    ...l,
-    className: N(t, _a({
-      [`orientation-${d}`]: !!d,
+    ...c,
+    className: N(t, qa({
+      [`orientation-${f}`]: !!f,
       [`v-align-${i}`]: !!i,
       [`h-align-${a}`]: !!a,
       [`gap-${n}`]: !!n,
-      wrap: !!c,
+      wrap: !!l,
       "fill-space": r,
       "no-shrink": s,
-      ...Object.fromEntries(Ta(o).filter(Boolean).map((p) => [`margin-auto-${p}`, !0]))
+      ...Object.fromEntries(Ma(o).filter(Boolean).map((p) => [`margin-auto-${p}`, !0]))
     }))
   };
 }
-const Ya = /* @__PURE__ */ S((e, {
+const qo = /* @__PURE__ */ y((e, {
   slots: t
 }) => {
-  const r = P();
+  const r = S();
   return () => {
-    const n = e.as || "div", a = Na({
+    const n = e.as || "div", a = Da({
       ...e,
       ...r,
       className: e.class
     });
-    return f(n, a, {
+    return u(n, a, {
       default: () => [t.default?.()]
     });
   };
@@ -1366,30 +1461,30 @@ const Ya = /* @__PURE__ */ S((e, {
   name: "FlexBox",
   inheritAttrs: !1,
   // Redefine properties so that they come in as `props` on the `defineComponent` function
-  props: k()("as", "fillSpace", "gap", "hAlign", "marginAuto", "noShrink", "orientation", "vAlign", "wrap", "class")
-}), Ut = 6, ka = {
-  h1: R.display1,
-  h2: R.headline,
-  h3: R.title,
-  h4: R.subtitle2,
-  h5: R.subtitle1,
-  h6: R.body2
-}, Pa = { level: 1, headingElement: "h1" }, ja = "lumx-heading", xa = (e, t) => {
+  props: A()("as", "fillSpace", "gap", "hAlign", "marginAuto", "noShrink", "orientation", "vAlign", "wrap", "class")
+}), Yt = 6, Fa = {
+  h1: V.display1,
+  h2: V.headline,
+  h3: V.title,
+  h4: V.subtitle2,
+  h5: V.subtitle1,
+  h6: V.body2
+}, Va = { level: 1, headingElement: "h1" }, Ga = "lumx-heading", Ua = (e, t) => {
   const { as: r, className: n, typography: a, ...o } = e, s = r || t || "h1";
   return {
     ...o,
     as: s,
-    className: N(n, ja),
-    typography: a || ka[s]
+    className: N(n, Ga),
+    typography: a || Fa[s]
   };
-}, vr = /* @__PURE__ */ Symbol("HeadingLevelContext"), gr = () => ze(vr, Pa), Ja = /* @__PURE__ */ S((e, {
+}, Tr = /* @__PURE__ */ Symbol("HeadingLevelContext"), $r = () => Xe(Tr, Va), Do = /* @__PURE__ */ y((e, {
   slots: t
 }) => {
-  const r = P(), n = gr(), a = A(() => {
+  const r = S(), n = $r(), a = k(() => {
     const {
       className: o,
       ...s
-    } = xa({
+    } = Ua({
       ...r,
       ...e,
       className: e.class || r.class || r.className
@@ -1399,35 +1494,35 @@ const Ya = /* @__PURE__ */ S((e, {
       class: o
     };
   });
-  return () => f(Xe, a.value, {
+  return () => u(tt, a.value, {
     default: () => [t.default?.()]
   });
 }, {
   name: "Heading",
   inheritAttrs: !1,
   // Redefine properties so that they come in as `props` on the `defineComponent` function
-  props: k()("as", "color", "colorVariant", "typography", "truncate", "noWrap", "whiteSpace", "style", "class")
-}), wa = (e, t) => {
+  props: A()("as", "color", "colorVariant", "typography", "truncate", "noWrap", "whiteSpace", "style", "class")
+}), Wa = (e, t) => {
   const r = e || t + 1;
-  return r > Ut ? Ut : r;
-}, Xa = /* @__PURE__ */ S((e, {
+  return r > Yt ? Yt : r;
+}, Fo = /* @__PURE__ */ y((e, {
   slots: t
 }) => {
   const {
     level: r
-  } = $r(e), n = gr(), a = A(() => wa(r?.value, n.level)), o = A(() => `h${a.value}`), s = Er({
+  } = Fr(e), n = $r(), a = k(() => Wa(r?.value, n.level)), o = k(() => `h${a.value}`), s = Vr({
     level: a,
     headingElement: o
   });
-  return Wt(vr, s), () => t.default?.();
+  return Jt(Tr, s), () => t.default?.();
 }, {
   name: "HeadingLevelProvider",
-  props: k()("level")
-}), Qa = /* @__PURE__ */ S((e, {
+  props: A()("level")
+}), Vo = /* @__PURE__ */ y((e, {
   slots: t
 }) => {
-  const r = P(), n = B();
-  return () => f(W, g(e, r, {
+  const r = S(), n = C();
+  return () => u(D, m(e, r, {
     className: e.class,
     theme: e.theme || n,
     children: t.default?.()
@@ -1436,12 +1531,12 @@ const Ya = /* @__PURE__ */ S((e, {
   name: "InputHelper",
   inheritAttrs: !1,
   // Redefine properties so that they come in as `props` on the `defineComponent` function
-  props: k()("kind", "theme", "class", "id")
-}), Za = /* @__PURE__ */ S((e, {
+  props: A()("kind", "theme", "class", "id")
+}), Go = /* @__PURE__ */ y((e, {
   slots: t
 }) => {
-  const r = P(), n = B();
-  return () => f(U, g(e, r, {
+  const r = S(), n = C();
+  return () => u(q, m(e, r, {
     className: e.class,
     theme: e.theme || n,
     children: t.default?.()
@@ -1450,28 +1545,28 @@ const Ya = /* @__PURE__ */ S((e, {
   name: "InputLabel",
   inheritAttrs: !1,
   // Redefine properties so that they come in as `props` on the `defineComponent` function
-  props: k()("htmlFor", "isRequired", "typography", "theme", "class")
-}), Ca = "Message", yr = "lumx-message", {
-  block: Ia,
-  element: De
-} = j(yr), Oa = {
-  [O.error]: {
-    color: y.red,
-    icon: Lr
+  props: A()("htmlFor", "isRequired", "typography", "theme", "class")
+}), za = "Message", Pr = "lumx-message", {
+  block: Ha,
+  element: We
+} = T(Pr), Ka = {
+  [B.error]: {
+    color: _.red,
+    icon: Hr
   },
-  [O.info]: {
-    color: y.blue,
-    icon: Vr
+  [B.info]: {
+    color: _.blue,
+    icon: Jr
   },
-  [O.success]: {
-    color: y.green,
-    icon: Dr
+  [B.success]: {
+    color: _.green,
+    icon: Kr
   },
-  [O.warning]: {
-    color: y.yellow,
-    icon: Yt
+  [B.warning]: {
+    color: _.yellow,
+    icon: er
   }
-}, Qe = (e) => {
+}, nt = (e) => {
   const {
     children: t,
     className: r,
@@ -1480,45 +1575,45 @@ const Ya = /* @__PURE__ */ S((e, {
     icon: o,
     closeButtonProps: s,
     ref: i,
-    ...c
+    ...l
   } = e, {
-    color: u,
-    icon: l
-  } = Oa[a] || {}, {
-    onClick: d,
+    color: d,
+    icon: c
+  } = Ka[a] || {}, {
+    onClick: f,
     label: p
-  } = s || {}, h = n && a === "info" && d && p;
-  return f("div", g(c, {
+  } = s || {}, h = n && a === "info" && f && p;
+  return u("div", m(l, {
     ref: i,
-    className: N(r, Ia({
-      [`color-${u}`]: !!u,
+    className: N(r, Ha({
+      [`color-${d}`]: !!d,
       "has-background": n
     }))
-  }), [(o || l) && E({
-    className: De("icon"),
-    icon: o || l,
-    size: C.xs,
-    color: u
-  }), f("div", {
-    className: De("text")
-  }, [t]), h && G({
-    className: De("close-button"),
-    icon: Fr,
-    onClick: d,
+  }), [(o || c) && M({
+    className: We("icon"),
+    icon: o || c,
+    size: O.xs,
+    color: d
+  }), u("div", {
+    className: We("text")
+  }, [t]), h && K({
+    className: We("close-button"),
+    icon: Yr,
+    onClick: f,
     label: p,
-    emphasis: q.low
+    emphasis: L.low
   })]);
 };
-Qe.displayName = Ca;
-Qe.className = yr;
-const eo = /* @__PURE__ */ S((e, {
+nt.displayName = za;
+nt.className = Pr;
+const Uo = /* @__PURE__ */ y((e, {
   slots: t,
   emit: r
 }) => {
-  const n = P(), {
+  const n = S(), {
     closeButtonLabel: a
   } = e;
-  return () => f(Qe, g(e, n, {
+  return () => u(nt, m(e, n, {
     className: e.class,
     children: t.default?.(),
     closeButtonProps: a ? {
@@ -1530,23 +1625,384 @@ const eo = /* @__PURE__ */ S((e, {
   name: "Message",
   inheritAttrs: !1,
   // Redefine properties so that they come in as `props` on the `defineComponent` function
-  props: k()("hasBackground", "icon", "kind", "class", "closeButtonLabel"),
+  props: A()("hasBackground", "icon", "kind", "class", "closeButtonLabel"),
   emits: ["close"]
+}), Ya = "lumx-radio-button", {
+  block: Ja,
+  element: I
+} = T(Ya), Xa = (e) => {
+  const {
+    checked: t,
+    className: r,
+    helper: n,
+    id: a,
+    inputRef: o,
+    isChecked: s = t,
+    label: i,
+    name: l,
+    ref: d,
+    onChange: c,
+    theme: f,
+    value: p,
+    inputProps: h = {},
+    isDisabled: v,
+    inputId: b,
+    ...$
+  } = e, w = (P) => {
+    c && c(p, l, P);
+  };
+  return u("div", m({
+    ref: d
+  }, $, {
+    className: N(r, Ja({
+      "is-checked": s,
+      "is-disabled": v,
+      "is-unchecked": !s,
+      [`theme-${f}`]: !!f
+    }))
+  }), [u("div", {
+    className: I("input-wrapper")
+  }, [u("input", m({
+    ref: o,
+    className: I("input-native"),
+    id: b,
+    type: "radio",
+    name: l,
+    value: p,
+    checked: s,
+    onChange: w,
+    "aria-describedby": n ? `${b}-helper` : void 0
+  }, h?.readOnly ? {
+    readOnly: h.readOnly
+  } : {}, h), null), u("div", {
+    className: I("input-placeholder")
+  }, [u("div", {
+    className: I("input-background")
+  }, null), u("div", {
+    className: I("input-indicator")
+  }, null)])]), u("div", {
+    className: I("content")
+  }, [i && q({
+    htmlFor: b,
+    className: I("label"),
+    theme: f,
+    children: i
+  }), n && D({
+    id: `${b}-helper`,
+    className: I("helper"),
+    theme: f,
+    children: n
+  })])]);
+}, Qa = {
+  change: (e, t, r) => r instanceof Event
+}, Wo = /* @__PURE__ */ y((e, {
+  emit: t
+}) => {
+  const r = S(), n = C(), a = rt(), o = k(() => e.id || a), {
+    isAnyDisabled: s,
+    disabledStateProps: i,
+    otherProps: l
+  } = H(k(() => ({
+    ...e,
+    ...r
+  }))), d = (c, f, p) => {
+    s.value || (p?.stopImmediatePropagation?.(), t("change", c, f, p));
+  };
+  return () => u(Xa, m(l.value, {
+    className: e.class,
+    theme: e.theme || n,
+    inputId: o.value,
+    isDisabled: s.value,
+    onChange: d,
+    label: e.label,
+    inputProps: {
+      ...e.inputProps,
+      ...i.value,
+      readOnly: i.value["aria-disabled"]
+    }
+  }), null);
+}, {
+  name: "RadioButton",
+  inheritAttrs: !1,
+  // Redefine properties so that they come in as `props` on the `defineComponent` function
+  props: A()("checked", "class", "disabled", "helper", "id", "inputProps", "isChecked", "isDisabled", "label", "name", "theme", "value", "aria-disabled"),
+  emits: Qa
+}), Za = "RadioGroup", _r = "lumx-radio-group", eo = {}, se = (e) => {
+  const {
+    children: t,
+    className: r,
+    ref: n,
+    ...a
+  } = e;
+  return u("div", m({
+    ref: n
+  }, a, {
+    className: N(r, _r)
+  }), [t]);
+};
+se.displayName = Za;
+se.className = _r;
+se.defaultProps = eo;
+const zo = /* @__PURE__ */ y((e, {
+  slots: t
+}) => {
+  const r = S();
+  return () => u(se, m(e, r, {
+    className: e.class,
+    children: t.default?.()
+  }), null);
+}, {
+  name: "RadioGroup",
+  inheritAttrs: !1,
+  props: A()("class")
+}), to = "lumx-skeleton-circle", {
+  block: ro
+} = T(to), no = (e) => {
+  const {
+    className: t,
+    size: r,
+    color: n,
+    theme: a,
+    ref: o,
+    ...s
+  } = e;
+  return u("div", m({
+    ref: o
+  }, s, {
+    className: N(t, ro({
+      [`size-${r}`]: !!r,
+      [`color-${n}`]: !!n,
+      [`theme-${a}`]: !!a
+    }))
+  }), null);
+}, ao = {
+  squared: "squared",
+  rounded: "rounded",
+  pill: "pill"
+}, oo = "lumx-skeleton-rectangle", {
+  block: so,
+  element: io
+} = T(oo), lo = {
+  variant: ao.squared
+}, co = (e) => {
+  const {
+    aspectRatio: t,
+    className: r,
+    height: n,
+    theme: a,
+    variant: o = lo.variant,
+    width: s,
+    color: i,
+    ref: l,
+    ...d
+  } = e;
+  return u("div", m({
+    ref: l
+  }, d, {
+    className: N(r, so({
+      [`aspect-ratio-${t}`]: !!t,
+      [`height-${n}`]: !!(!t && n),
+      [`theme-${a}`]: !!a,
+      [`variant-${o}`]: !!o,
+      [`width-${s}`]: !!s,
+      [`color-${i}`]: !!i
+    }))
+  }), [u("div", {
+    className: io("inner")
+  }, null)]);
+}, uo = "lumx-skeleton-typography", {
+  block: fo,
+  element: po
+} = T(uo), ho = (e) => {
+  const {
+    className: t,
+    theme: r,
+    typography: n,
+    width: a,
+    color: o,
+    ref: s,
+    ...i
+  } = e;
+  return u("div", m({
+    ref: s
+  }, i, {
+    className: N(t, fo({
+      [`theme-${r}`]: !!r,
+      [`typography-${n}`]: !!n,
+      [`color-${o}`]: !!o
+    })),
+    style: {
+      ...i.style,
+      width: a
+    }
+  }), [u("div", {
+    className: po("inner")
+  }, null)]);
+}, Ho = /* @__PURE__ */ y((e) => {
+  const t = S(), r = C();
+  return () => u(no, m(e, t, {
+    className: e.class,
+    theme: e.theme || r
+  }), null);
+}, {
+  name: "LumxSkeletonCircle",
+  inheritAttrs: !1,
+  props: A()("class", "size", "color", "theme")
+}), Ko = /* @__PURE__ */ y((e) => {
+  const t = S(), r = C();
+  return () => u(co, m(e, t, {
+    className: e.class,
+    theme: e.theme || r
+  }), null);
+}, {
+  name: "SkeletonRectangle",
+  inheritAttrs: !1,
+  props: A()("class", "aspectRatio", "height", "variant", "width", "color", "theme")
+}), Yo = /* @__PURE__ */ y((e) => {
+  const t = S(), r = C();
+  return () => u(ho, m(e, t, {
+    className: e.class,
+    theme: e.theme || r
+  }), null);
+}, {
+  name: "LumxSkeletonTypography",
+  inheritAttrs: !1,
+  props: A()("class", "typography", "width", "color", "theme", "style")
+}), Jo = "Switch", mo = "lumx-switch", {
+  block: bo,
+  element: E
+} = T(mo), vo = {
+  position: "left"
+}, go = (e) => {
+  const {
+    checked: t,
+    className: r,
+    helper: n,
+    id: a,
+    inputRef: o,
+    isChecked: s = t,
+    label: i,
+    name: l,
+    ref: d,
+    onChange: c,
+    theme: f,
+    value: p,
+    inputProps: h = {},
+    isDisabled: v,
+    inputId: b,
+    position: $ = vo.position,
+    ...w
+  } = e, P = (x) => {
+    c && c(!s, p, l, x);
+  };
+  return u("div", m({
+    ref: d
+  }, w, {
+    className: N(r, bo({
+      "is-checked": s,
+      "is-disabled": v,
+      "is-unchecked": !s,
+      [`position-${$}`]: !!$,
+      [`theme-${f}`]: !!f
+    }))
+  }), [u("div", {
+    className: E("input-wrapper")
+  }, [u("input", m({
+    ref: o,
+    type: "checkbox",
+    role: "switch",
+    id: b,
+    className: E("input-native"),
+    name: l,
+    value: p,
+    checked: !!s,
+    onChange: P,
+    "aria-describedby": n ? `${b}-helper` : void 0,
+    "aria-checked": !!s
+  }, h?.readOnly ? {
+    readOnly: h.readOnly
+  } : {}, h), null), u("div", {
+    className: E("input-placeholder")
+  }, [u("div", {
+    className: E("input-background")
+  }, null), u("div", {
+    className: E("input-indicator")
+  }, null)])]), u("div", {
+    className: E("content")
+  }, [i && q({
+    htmlFor: b,
+    className: E("label"),
+    theme: f,
+    children: i
+  }), n && D({
+    id: `${b}-helper`,
+    className: E("helper"),
+    theme: f,
+    children: n
+  })])]);
+}, yo = {
+  change: (e, t, r, n) => typeof e == "boolean" && n instanceof Event
+}, Xo = /* @__PURE__ */ y((e, {
+  emit: t,
+  slots: r
+}) => {
+  const n = S(), a = C(), o = rt(), s = k(() => e.id || o), {
+    isAnyDisabled: i,
+    disabledStateProps: l,
+    otherProps: d
+  } = H(k(() => ({
+    ...e,
+    ...n
+  }))), c = (f, p, h, v) => {
+    i.value || (v.stopImmediatePropagation(), t("change", f, p, h, v));
+  };
+  return () => u(go, m(d.value, {
+    className: e.class,
+    theme: e.theme || a,
+    inputId: s.value,
+    isDisabled: i.value,
+    onChange: c,
+    label: e.label || r.default?.(),
+    inputProps: {
+      ...e.inputProps,
+      ...l.value,
+      readOnly: i.value
+    }
+  }), null);
+}, {
+  name: "LumxSwitch",
+  inheritAttrs: !1,
+  // Redefine properties so that they come in as `props` on the `defineComponent` function
+  props: A()("checked", "class", "disabled", "helper", "id", "inputProps", "isChecked", "isDisabled", "label", "name", "position", "theme", "value", "aria-disabled"),
+  emits: yo
 });
 export {
-  Ua as Button,
-  za as ButtonGroup,
-  Ha as Checkbox,
-  Ka as Flag,
-  Ya as FlexBox,
-  Ja as Heading,
-  Xa as HeadingLevelProvider,
-  Ve as Icon,
-  Wa as IconButton,
-  Qa as InputHelper,
-  Za as InputLabel,
-  eo as Message,
-  Xe as Text,
-  gr as useHeadingLevel
+  Oo as Badge,
+  jo as BadgeWrapper,
+  Io as Button,
+  Bo as ButtonGroup,
+  mo as CLASSNAME,
+  Jo as COMPONENT_NAME,
+  Ro as Checkbox,
+  vo as DEFAULT_PROPS,
+  Mo as Divider,
+  Lo as Flag,
+  qo as FlexBox,
+  Do as Heading,
+  Fo as HeadingLevelProvider,
+  He as Icon,
+  Eo as IconButton,
+  Vo as InputHelper,
+  Go as InputLabel,
+  Uo as Message,
+  Wo as RadioButton,
+  zo as RadioGroup,
+  Ho as SkeletonCircle,
+  Ko as SkeletonRectangle,
+  ao as SkeletonRectangleVariant,
+  Yo as SkeletonTypography,
+  Xo as Switch,
+  tt as Text,
+  $r as useHeadingLevel
 };
 //# sourceMappingURL=index.js.map