design-system-next 1.5.6 → 1.5.7

package/dist/design-system-next.js

@@ -1,4 +1,4 @@
-import { toRefs as n2, computed as Y, defineComponent as X, h as Ue, createElementBlock as f, openBlock as M, renderSlot as B, createElementVNode as j, normalizeClass as z, unref as d, toDisplayString as $, createCommentVNode as A, createBlock as F, createVNode as J, watch as I2, getCurrentScope as bt, onScopeDispose as vt, getCurrentInstance as ze, ref as q, nextTick as Q0, shallowRef as Ae, toValue as l0, watchEffect as A1, onMounted as F0, mergeProps as Z2, useSlots as wt, withKeys as M0, Fragment as Z, withModifiers as a0, createTextVNode as B0, pushScopeId as b1, popScopeId as v1, normalizeProps as R0, guardReactiveProps as G0, resolveComponent as ue, withCtx as W, withScopeId as w1, normalizeStyle as c0, isRef as h2, renderList as s2, createSlots as W0, withDirectives as W2, vModelRadio as x1, vShow as $e, onUnmounted as L1, Transition as xt, effectScope as Lt, markRaw as Q2, toRaw as C0, hasInjectionContext as T1, inject as O1, reactive as k1, isReactive as be, toRef as se, Teleport as S1, TransitionGroup as _1, vModelCheckbox as E1, vModelText as Tt } from "vue";
+import { toRefs as n2, computed as Y, defineComponent as X, h as Ue, createElementBlock as f, openBlock as M, renderSlot as H, createElementVNode as j, normalizeClass as z, unref as d, toDisplayString as $, createCommentVNode as A, createBlock as B, createVNode as J, watch as I2, getCurrentScope as bt, onScopeDispose as vt, getCurrentInstance as ze, ref as q, nextTick as Q0, shallowRef as Ae, toValue as l0, watchEffect as A1, onMounted as F0, mergeProps as H2, useSlots as wt, withKeys as M0, Fragment as Z, withModifiers as a0, createTextVNode as B0, pushScopeId as b1, popScopeId as v1, normalizeProps as R0, guardReactiveProps as G0, resolveComponent as ue, withCtx as W, withScopeId as w1, normalizeStyle as c0, isRef as h2, renderList as s2, createSlots as W0, withDirectives as J2, vModelRadio as x1, vShow as $e, onUnmounted as T1, Transition as xt, effectScope as Tt, markRaw as Q2, toRaw as C0, hasInjectionContext as L1, inject as O1, reactive as k1, isReactive as be, toRef as se, Teleport as S1, TransitionGroup as _1, vModelCheckbox as E1, vModelText as Lt } from "vue";
 const Y1 = ["2xl", "xl", "lg", "md", "sm", "xs", "2xs"], Q1 = ["primary", "secondary"], U1 = ["danger", "disabled", "information", "brand"], $1 = ["image", "initial", "client", "user", "user-group", "count"], P1 = {
   src: {
     type: String
@@ -335,7 +335,7 @@ function W1(e, t) {
     missing: /* @__PURE__ */ new Set()
   };
 }
-function J2(e, t) {
+function K2(e, t) {
   const s = He[e] || (He[e] = /* @__PURE__ */ Object.create(null));
   return s[t] || (s[t] = W1(e, t));
 }
@@ -359,7 +359,7 @@ function Qt(e) {
 function K1(e) {
   const t = typeof e == "string" ? J0(e, !0, f0) : e;
   if (t) {
-    const s = J2(t.provider, t.prefix), r = t.name;
+    const s = K2(t.provider, t.prefix), r = t.name;
     return s.icons[r] || (s.missing.has(r) ? null : void 0);
   }
 }
@@ -367,7 +367,7 @@ function X1(e, t) {
   const s = J0(e, !0, f0);
   if (!s)
     return !1;
-  const r = J2(s.provider, s.prefix);
+  const r = K2(s.provider, s.prefix);
   return t ? J1(r, s.name, t) : (r.missing.add(s.name), !0);
 }
 function q1(e, t) {
@@ -385,7 +385,7 @@ function q1(e, t) {
     name: "a"
   }))
     return !1;
-  const r = J2(t, s);
+  const r = K2(t, s);
   return !!Yt(r, e);
 }
 const Ut = Object.freeze({
@@ -460,48 +460,48 @@ function n4(e, t) {
   };
   let i = s.body;
   [s, r].forEach((m) => {
-    const y = [], h = m.hFlip, b = m.vFlip;
-    let L = m.rotate;
-    h ? b ? L += 2 : (y.push(
+    const I = [], h = m.hFlip, b = m.vFlip;
+    let T = m.rotate;
+    h ? b ? T += 2 : (I.push(
       "translate(" + (o.width + o.left).toString() + " " + (0 - o.top).toString() + ")"
-    ), y.push("scale(-1 1)"), o.top = o.left = 0) : b && (y.push(
+    ), I.push("scale(-1 1)"), o.top = o.left = 0) : b && (I.push(
       "translate(" + (0 - o.left).toString() + " " + (o.height + o.top).toString() + ")"
-    ), y.push("scale(1 -1)"), o.top = o.left = 0);
+    ), I.push("scale(1 -1)"), o.top = o.left = 0);
     let U;
-    switch (L < 0 && (L -= Math.floor(L / 4) * 4), L = L % 4, L) {
+    switch (T < 0 && (T -= Math.floor(T / 4) * 4), T = T % 4, T) {
       case 1:
-        U = o.height / 2 + o.top, y.unshift(
+        U = o.height / 2 + o.top, I.unshift(
           "rotate(90 " + U.toString() + " " + U.toString() + ")"
         );
         break;
       case 2:
-        y.unshift(
+        I.unshift(
           "rotate(180 " + (o.width / 2 + o.left).toString() + " " + (o.height / 2 + o.top).toString() + ")"
         );
         break;
       case 3:
-        U = o.width / 2 + o.left, y.unshift(
+        U = o.width / 2 + o.left, I.unshift(
           "rotate(-90 " + U.toString() + " " + U.toString() + ")"
         );
         break;
     }
-    L % 2 === 1 && (o.left !== o.top && (U = o.left, o.left = o.top, o.top = U), o.width !== o.height && (U = o.width, o.width = o.height, o.height = U)), y.length && (i = o4(
+    T % 2 === 1 && (o.left !== o.top && (U = o.left, o.left = o.top, o.top = U), o.width !== o.height && (U = o.width, o.width = o.height, o.height = U)), I.length && (i = o4(
       i,
-      '<g transform="' + y.join(" ") + '">',
+      '<g transform="' + I.join(" ") + '">',
       "</g>"
     ));
   });
   const n = r.width, l = r.height, a = o.width, c = o.height;
   let u, p;
   n === null ? (p = l === null ? "1em" : l === "auto" ? c : l, u = Ve(p, a / c)) : (u = n === "auto" ? a : n, p = l === null ? Ve(u, c / a) : l === "auto" ? c : l);
-  const C = {}, g = (m, y) => {
-    i4(y) || (C[m] = y.toString());
+  const C = {}, g = (m, I) => {
+    i4(I) || (C[m] = I.toString());
   };
   g("width", u), g("height", p);
-  const I = [o.left, o.top, a, c];
-  return C.viewBox = I.join(" "), {
+  const y = [o.left, o.top, a, c];
+  return C.viewBox = y.join(" "), {
     attributes: C,
-    viewBox: I,
+    viewBox: y,
     body: i
   };
 }
@@ -693,7 +693,7 @@ function y4(e) {
     if (r.name === o.name && r.prefix === o.prefix && r.provider === o.provider)
       return;
     r = o;
-    const i = o.provider, n = o.prefix, l = o.name, a = s[i] || (s[i] = /* @__PURE__ */ Object.create(null)), c = a[n] || (a[n] = J2(i, n));
+    const i = o.provider, n = o.prefix, l = o.name, a = s[i] || (s[i] = /* @__PURE__ */ Object.create(null)), c = a[n] || (a[n] = K2(i, n));
     let u;
     l in c.icons ? u = t.loaded : n === "" || c.missing.has(l) ? u = t.missing : u = t.pending;
     const p = {
@@ -793,15 +793,15 @@ function b4(e, t, s, r) {
   const l = Date.now();
   let a = "pending", c = 0, u, p = null, C = [], g = [];
   typeof r == "function" && g.push(r);
-  function I() {
+  function y() {
     p && (clearTimeout(p), p = null);
   }
   function m() {
-    a === "pending" && (a = "aborted"), I(), C.forEach((Q) => {
+    a === "pending" && (a = "aborted"), y(), C.forEach((Q) => {
       Q.status === "pending" && (Q.status = "aborted");
     }), C = [];
   }
-  function y(Q, v) {
+  function I(Q, v) {
     v && (g = []), typeof Q == "function" && g.push(Q);
   }
   function h() {
@@ -811,7 +811,7 @@ function b4(e, t, s, r) {
       status: a,
       queriesSent: c,
       queriesPending: C.length,
-      subscribe: y,
+      subscribe: I,
       abort: m
     };
   }
@@ -820,12 +820,12 @@ function b4(e, t, s, r) {
       Q(void 0, u);
     });
   }
-  function L() {
+  function T() {
     C.forEach((Q) => {
       Q.status === "pending" && (Q.status = "aborted");
     }), C = [];
   }
-  function U(Q, v, H) {
+  function U(Q, v, V) {
     const P = v !== "success";
     switch (C = C.filter((N) => N !== Q), a) {
       case "pending":
@@ -838,30 +838,30 @@ function b4(e, t, s, r) {
         return;
     }
     if (v === "abort") {
-      u = H, b();
+      u = V, b();
       return;
     }
     if (P) {
-      u = H, C.length || (n.length ? _() : b());
+      u = V, C.length || (n.length ? _() : b());
       return;
     }
-    if (I(), L(), !e.random) {
+    if (y(), T(), !e.random) {
       const N = e.resources.indexOf(Q.resource);
       N !== -1 && N !== e.index && (e.index = N);
     }
     a = "completed", g.forEach((N) => {
-      N(H);
+      N(V);
     });
   }
   function _() {
     if (a !== "pending")
       return;
-    I();
+    y();
     const Q = n.shift();
     if (Q === void 0) {
       if (C.length) {
         p = setTimeout(() => {
-          I(), a === "pending" && (L(), b());
+          y(), a === "pending" && (T(), b());
         }, e.timeout);
         return;
       }
@@ -871,8 +871,8 @@ function b4(e, t, s, r) {
     const v = {
       status: "pending",
       resource: Q,
-      callback: (H, P) => {
-        U(v, H, P);
+      callback: (V, P) => {
+        U(v, V, P);
       }
     };
     C.push(v), c++, p = setTimeout(_, e.rotate), s(Q, t, v.callback);
@@ -954,7 +954,7 @@ function x4(e) {
     e.iconsLoaderFlag = !1, I4(e);
   }));
 }
-function L4(e) {
+function T4(e) {
   const t = [], s = [];
   return e.forEach((r) => {
     (r.match(kt) ? t : s).push(r);
@@ -988,7 +988,7 @@ function Ge(e, t) {
     t(null);
   }) : t(e);
 }
-function T4(e, t) {
+function L4(e, t) {
   e.iconsToLoad ? e.iconsToLoad = e.iconsToLoad.concat(t).sort() : e.iconsToLoad = t, e.iconsQueueFlag || (e.iconsQueueFlag = !0, setTimeout(() => {
     e.iconsQueueFlag = !1;
     const { provider: s, prefix: r } = e, o = e.iconsToLoad;
@@ -1019,7 +1019,7 @@ function T4(e, t) {
       });
       return;
     }
-    const { valid: n, invalid: l } = L4(o);
+    const { valid: n, invalid: l } = T4(o);
     if (l.length && o0(e, l, null), !n.length)
       return;
     const a = r.match(kt) ? ge(s) : null;
@@ -1055,15 +1055,15 @@ const O4 = (e, t) => {
     const { provider: c, prefix: u } = a;
     if (u === l && c === n)
       return;
-    n = c, l = u, i.push(J2(c, u));
+    n = c, l = u, i.push(K2(c, u));
     const p = o[c] || (o[c] = /* @__PURE__ */ Object.create(null));
     p[u] || (p[u] = []);
   }), r.pending.forEach((a) => {
-    const { provider: c, prefix: u, name: p } = a, C = J2(c, u), g = C.pendingIcons || (C.pendingIcons = /* @__PURE__ */ new Set());
+    const { provider: c, prefix: u, name: p } = a, C = K2(c, u), g = C.pendingIcons || (C.pendingIcons = /* @__PURE__ */ new Set());
     g.has(p) || (g.add(p), o[c][u].push(p));
   }), i.forEach((a) => {
     const c = o[a.provider][a.prefix];
-    c.length && T4(a, c);
+    c.length && L4(a, c);
   }), t ? m4(t, r, i) : Re;
 };
 function k4(e, t) {
@@ -1158,10 +1158,10 @@ for (const e in Ke) {
   for (const s in Je)
     t[e + s] = Je[s];
 }
-const L0 = {};
+const T0 = {};
 ["horizontal", "vertical"].forEach((e) => {
   const t = e.slice(0, 1) + "Flip";
-  L0[e + "-flip"] = t, L0[e.slice(0, 1) + "-flip"] = t, L0[e + "Flip"] = t;
+  T0[e + "-flip"] = t, T0[e.slice(0, 1) + "-flip"] = t, T0[e + "Flip"] = t;
 });
 function Xe(e) {
   return e + (e.match(/^[-0-9.]+$/) ? "px" : "");
@@ -1169,8 +1169,8 @@ function Xe(e) {
 const qe = (e, t) => {
   const s = k4(We, t), r = { ...P4 }, o = t.mode || "svg", i = {}, n = t.style, l = typeof n == "object" && !(n instanceof Array) ? n : {};
   for (let m in t) {
-    const y = t[m];
-    if (y !== void 0)
+    const I = t[m];
+    if (I !== void 0)
       switch (m) {
         // Properties to ignore
         case "icon":
@@ -1183,28 +1183,28 @@ const qe = (e, t) => {
         case "inline":
         case "hFlip":
         case "vFlip":
-          s[m] = y === !0 || y === "true" || y === 1;
+          s[m] = I === !0 || I === "true" || I === 1;
           break;
         // Flip as string: 'horizontal,vertical'
         case "flip":
-          typeof y == "string" && _4(s, y);
+          typeof I == "string" && _4(s, I);
           break;
         // Color: override style
         case "color":
-          i.color = y;
+          i.color = I;
           break;
         // Rotation as string
         case "rotate":
-          typeof y == "string" ? s[m] = E4(y) : typeof y == "number" && (s[m] = y);
+          typeof I == "string" ? s[m] = E4(I) : typeof I == "number" && (s[m] = I);
           break;
         // Remove aria-hidden
         case "ariaHidden":
         case "aria-hidden":
-          y !== !0 && y !== "true" && delete r["aria-hidden"];
+          I !== !0 && I !== "true" && delete r["aria-hidden"];
           break;
         default: {
-          const h = L0[m];
-          h ? (y === !0 || y === "true" || y === 1) && (s[h] = !0) : We[m] === void 0 && (r[m] = y);
+          const h = T0[m];
+          h ? (I === !0 || I === "true" || I === 1) && (s[h] = !0) : We[m] === void 0 && (r[m] = I);
         }
       }
   }
@@ -1214,17 +1214,17 @@ const qe = (e, t) => {
       ...i,
       ...l
     }, Object.assign(r, c);
-    let m = 0, y = t.id;
-    return typeof y == "string" && (y = y.replace(/-/g, "_")), r.innerHTML = u4(a.body, y ? () => y + "ID" + m++ : "iconifyVue"), Ue("svg", r);
+    let m = 0, I = t.id;
+    return typeof I == "string" && (I = I.replace(/-/g, "_")), r.innerHTML = u4(a.body, I ? () => I + "ID" + m++ : "iconifyVue"), Ue("svg", r);
   }
-  const { body: u, width: p, height: C } = e, g = o === "mask" || (o === "bg" ? !1 : u.indexOf("currentColor") !== -1), I = Y4(u, {
+  const { body: u, width: p, height: C } = e, g = o === "mask" || (o === "bg" ? !1 : u.indexOf("currentColor") !== -1), y = Y4(u, {
     ...c,
     width: p + "",
     height: C + ""
   });
   return r.style = {
     ...i,
-    "--svg": $4(I),
+    "--svg": $4(y),
     width: Xe(c.width),
     height: Xe(c.height),
     ...Z4,
@@ -1380,8 +1380,8 @@ const H4 = {
         "spr-background-color-information-base spr-text-color-inverted-strong": t.value === "information",
         "spr-background-color-brand-base spr-text-color-inverted-strong": t.value === "brand"
       }), l = O({
-        "spr-label-sm-medium !spr-leading-[0] !spr-tracking-normal spr-h-[20px] spr-min-w-[20px] spr-rounded-[32px] spr-py-size-spacing-3xs spr-px-size-spacing-5xs": s.value === "big",
-        "spr-label-xs-medium !spr-leading-[0] !spr-tracking-normal spr-h-[16px] spr-min-w-[16px] spr-rounded-[32px] spr-py-size-spacing-6xs spr-px-size-spacing-5xs": s.value === "small",
+        "spr-label-sm-medium !spr-leading-[0] !spr-tracking-normal spr-h-[20px] spr-min-w-[20px] spr-rounded-[32px] spr-py-size-spacing-3xs spr-px-size-spacing-5xs spr-box-border": s.value === "big",
+        "spr-label-xs-medium !spr-leading-[0] !spr-tracking-normal spr-h-[16px] spr-min-w-[16px] spr-rounded-[32px] spr-py-size-spacing-6xs spr-px-size-spacing-5xs spr-box-border": s.value === "small",
         "spr-h-[10px] spr-min-w-[10px] spr-rounded-full": s.value === "tiny"
       }), a = O({
         "spr-absolute -spr-top-1 spr-right-1": r.value === "top" && s.value === "tiny",
@@ -1399,13 +1399,13 @@ const H4 = {
       };
     })
   };
-}, W4 = { class: "spr-flex spr-gap-2" }, K2 = /* @__PURE__ */ X({
+}, W4 = { class: "spr-flex spr-gap-2" }, $2 = /* @__PURE__ */ X({
   __name: "badge",
   props: R4,
   setup(e) {
     const t = e, { badgeClasses: s } = G4(t);
     return (r, o) => (M(), f("div", W4, [
-      B(r.$slots, "default"),
+      H(r.$slots, "default"),
       j("div", {
         class: z(d(s).baseClasses)
       }, [
@@ -1425,7 +1425,7 @@ const H4 = {
   }
 }), J4 = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
   __proto__: null,
-  default: K2
+  default: $2
 }, Symbol.toStringTag, { value: "Module" })), K4 = ["src", "alt"], Vt = /* @__PURE__ */ X({
   __name: "avatar",
   props: P1,
@@ -1438,13 +1438,13 @@ const H4 = {
         key: 0,
         class: z([d(s).imageClasses, "avatar__slot spr-border-color-weak spr-border spr-border-solid"])
       }, [
-        B(n.$slots, "default", {}, () => [
+        H(n.$slots, "default", {}, () => [
           n.src ? (M(), f("img", {
             key: 0,
             src: n.src,
             alt: n.alt,
             class: z(d(s).imageClasses)
-          }, null, 10, K4)) : (M(), F(d(G), {
+          }, null, 10, K4)) : (M(), B(d(G), {
             key: 1,
             icon: d(o)
           }, null, 8, ["icon"]))
@@ -1457,7 +1457,7 @@ const H4 = {
         key: 2,
         class: z(d(s).notificationClasses)
       }, [
-        J(K2, {
+        J($2, {
           text: n.NotificationText,
           variant: "danger",
           size: d(r).notif
@@ -1467,7 +1467,7 @@ const H4 = {
         key: 3,
         class: z(d(s).onlineNotificationClasses)
       }, [
-        J(K2, {
+        J($2, {
           text: "",
           variant: n.status,
           size: d(r).badge
@@ -1530,14 +1530,14 @@ const H4 = {
 }, is = {
   click: (e) => e instanceof MouseEvent
 };
-function Le(e) {
+function Te(e) {
   return bt() ? (vt(e), !0) : !1;
 }
 const ns = typeof window < "u" && typeof document < "u";
 typeof WorkerGlobalScope < "u" && globalThis instanceof WorkerGlobalScope;
 const ls = (e) => typeof e < "u", as = (e) => e != null, cs = Object.prototype.toString, us = (e) => cs.call(e) === "[object Object]", ps = () => {
 };
-function T0(e) {
+function L0(e) {
   return Array.isArray(e) ? e : [e];
 }
 function ds(e, t, s) {
@@ -1560,15 +1560,15 @@ function u2(...e) {
   const t = [], s = () => {
     t.forEach((l) => l()), t.length = 0;
   }, r = (l, a, c, u) => (l.addEventListener(a, c, u), () => l.removeEventListener(a, c, u)), o = Y(() => {
-    const l = T0(l0(e[0])).filter((a) => a != null);
+    const l = L0(l0(e[0])).filter((a) => a != null);
     return l.every((a) => typeof a != "string") ? l : void 0;
   }), i = ds(
     () => {
       var l, a;
       return [
         (a = (l = o.value) == null ? void 0 : l.map((c) => X2(c))) != null ? a : [j0].filter((c) => c != null),
-        T0(l0(o.value ? e[1] : e[0])),
-        T0(d(o.value ? e[2] : e[1])),
+        L0(l0(o.value ? e[1] : e[0])),
+        L0(d(o.value ? e[2] : e[1])),
         // @ts-expect-error - TypeScript gets the correct types, but somehow still complains
         l0(o.value ? e[3] : e[2])
       ];
@@ -1580,7 +1580,7 @@ function u2(...e) {
       t.push(
         ...l.flatMap(
           (C) => a.flatMap(
-            (g) => c.map((I) => r(C, g, I, p))
+            (g) => c.map((y) => r(C, g, y, p))
           )
         )
       );
@@ -1589,7 +1589,7 @@ function u2(...e) {
   ), n = () => {
     i(), s();
   };
-  return Le(s), n;
+  return Te(s), n;
 }
 function gs() {
   const e = Ae(!1), t = ze();
@@ -1607,7 +1607,7 @@ function Cs(e, t, s = {}) {
   const n = Ms(() => r && "MutationObserver" in r), l = () => {
     i && (i.disconnect(), i = void 0);
   }, a = Y(() => {
-    const C = l0(e), g = T0(C).map(X2).filter(as);
+    const C = l0(e), g = L0(C).map(X2).filter(as);
     return new Set(g);
   }), c = I2(
     () => a.value,
@@ -1618,7 +1618,7 @@ function Cs(e, t, s = {}) {
   ), u = () => i == null ? void 0 : i.takeRecords(), p = () => {
     c(), l();
   };
-  return Le(p), {
+  return Te(p), {
     isSupported: n,
     stop: p,
     takeRecords: u
@@ -1641,7 +1641,7 @@ function fs(e, t, s = {}) {
       const { stop: p } = Cs(
         o,
         (C) => {
-          C.map((I) => [...I.removedNodes]).flat().some((I) => I === u || I.contains(u)) && t(C);
+          C.map((y) => [...y.removedNodes]).flat().some((y) => y === u || y.contains(u)) && t(C);
         },
         {
           window: r,
@@ -1654,12 +1654,12 @@ function fs(e, t, s = {}) {
   }, { flush: i }), c = () => {
     a(), l();
   };
-  return Le(c), c;
+  return Te(c), c;
 }
 function hs(e) {
   return JSON.parse(JSON.stringify(e));
 }
-function Te(e, t = {}) {
+function Le(e, t = {}) {
   const {
     delayEnter: s = 0,
     delayLeave: r = 0,
@@ -1711,8 +1711,8 @@ function Ft(e = {}) {
       sourceType: l
     };
   const a = (C) => (g) => {
-    var I;
-    n.value = !0, l.value = C, (I = e.onPressed) == null || I.call(e, g);
+    var y;
+    n.value = !0, l.value = C, (y = e.onPressed) == null || y.call(e, g);
   }, c = (C) => {
     var g;
     n.value = !1, l.value = null, (g = e.onReleased) == null || g.call(e, C);
@@ -1731,19 +1731,19 @@ function m0(e, t, s, r = {}) {
     deep: u = !1,
     defaultValue: p,
     shouldEmit: C
-  } = r, g = ze(), I = s || (g == null ? void 0 : g.emit) || ((o = g == null ? void 0 : g.$emit) == null ? void 0 : o.bind(g)) || ((n = (i = g == null ? void 0 : g.proxy) == null ? void 0 : i.$emit) == null ? void 0 : n.bind(g == null ? void 0 : g.proxy));
+  } = r, g = ze(), y = s || (g == null ? void 0 : g.emit) || ((o = g == null ? void 0 : g.$emit) == null ? void 0 : o.bind(g)) || ((n = (i = g == null ? void 0 : g.proxy) == null ? void 0 : i.$emit) == null ? void 0 : n.bind(g == null ? void 0 : g.proxy));
   let m = c;
   m = m || `update:${t.toString()}`;
-  const y = (L) => l ? typeof l == "function" ? l(L) : hs(L) : L, h = () => ls(e[t]) ? y(e[t]) : p, b = (L) => {
-    C ? C(L) && I(m, L) : I(m, L);
+  const I = (T) => l ? typeof l == "function" ? l(T) : hs(T) : T, h = () => ls(e[t]) ? I(e[t]) : p, b = (T) => {
+    C ? C(T) && y(m, T) : y(m, T);
   };
   if (a) {
-    const L = h(), U = q(L);
+    const T = h(), U = q(T);
     let _ = !1;
     return I2(
       () => e[t],
       (Q) => {
-        _ || (_ = !0, U.value = y(Q), Q0(() => _ = !1));
+        _ || (_ = !0, U.value = I(Q), Q0(() => _ = !1));
       }
     ), I2(
       U,
@@ -1757,14 +1757,14 @@ function m0(e, t, s, r = {}) {
       get() {
         return h();
       },
-      set(L) {
-        b(L);
+      set(T) {
+        b(T);
       }
     });
 }
 const Ds = (e, t) => {
-  const { state: s, type: r, size: o, tone: i, variant: n, disabled: l, hasIcon: a } = n2(e), c = q(null), u = Te(c), { pressed: p } = Ft({ target: c }), { focused: C } = Ns(c), g = Y(() => {
-    const H = O(
+  const { state: s, type: r, size: o, tone: i, variant: n, disabled: l, hasIcon: a } = n2(e), c = q(null), u = Le(c), { pressed: p } = Ft({ target: c }), { focused: C } = Ns(c), g = Y(() => {
+    const V = O(
       "spr-background-color spr-flex spr-items-center spr-gap-1.5 spr-w-fit spr-min-w-[24px] spr-items-center spr-justify-center spr-rounded-md spr-outline-2 spr-outline-offset-4"
     ), P = O({
       "spr-min-w-6 spr-p-size-spacing-4xs spr-font-medium spr-font-size-100 spr-leading-100": o.value === "small",
@@ -1775,7 +1775,7 @@ const Ds = (e, t) => {
       "spr-font-size-200": a.value && o.value === "small"
     }), N = O(
       m.value,
-      I.value,
+      y.value,
       _.value
     ), D = O([
       "spr-transition spr-duration-150 spr-ease-in-out",
@@ -1785,38 +1785,38 @@ const Ds = (e, t) => {
     if (l.value) {
       if (n.value === "primary")
         return O(
-          H,
+          V,
           P,
           "spr-text-color-disabled spr-background-color-disabled !spr-border-0 !spr-shadow-none !spr-cursor-not-allowed"
         );
       if (n.value === "secondary")
         return O(
-          H,
+          V,
           P,
           "spr-text-color-disabled spr-border-solid !spr-border !spr-border-color-disabled !spr-shadow-none !spr-cursor-not-allowed"
         );
       if (n.value === "tertiary")
         return O(
-          H,
+          V,
           P,
           "spr-text-color-disabled !spr-border-0 !spr-shadow-none !spr-cursor-not-allowed"
         );
     }
-    return O(H, P, N, D);
-  }), I = Y(() => n.value === "secondary" || n.value === "tertiary" ? O({
+    return O(V, P, N, D);
+  }), y = Y(() => n.value === "secondary" || n.value === "tertiary" ? O({
     "spr-text-color-strong": i.value === "neutral",
     "spr-text-color-brand-base": i.value === "success",
     "spr-text-color-danger-base": i.value === "danger"
   }) : O({
     "spr-text-color-strong": i.value === "neutral",
     "spr-text-color-inverted-strong": i.value === "success" || i.value === "danger"
-  })), m = Y(() => n.value === "secondary" ? p.value ? "spr-background-color-pressed !spr-shadow-button" : u.value ? "spr-background-color-hover" : "spr-background-color " : n.value === "tertiary" ? y() : h()), y = () => p.value ? "spr-background-color-pressed !spr-shadow-button" : O("!border-none", {
+  })), m = Y(() => n.value === "secondary" ? p.value ? "spr-background-color-pressed !spr-shadow-button" : u.value ? "spr-background-color-hover" : "spr-background-color " : n.value === "tertiary" ? I() : h()), I = () => p.value ? "spr-background-color-pressed !spr-shadow-button" : O("!border-none", {
     "spr-background-color-hover": u.value
-  }), h = () => p.value ? b() : u.value ? L() : U(), b = () => ({
+  }), h = () => p.value ? b() : u.value ? T() : U(), b = () => ({
     neutral: "spr-background-color-pressed !spr-shadow-button",
     success: "spr-background-color-brand-pressed !spr-shadow-button",
     danger: "spr-background-color-danger-pressed !spr-shadow-button"
-  })[i.value] || "", L = () => ({
+  })[i.value] || "", T = () => ({
     neutral: "spr-background-color-hover",
     success: "spr-background-color-success-pressed",
     danger: "spr-background-color-danger-hover"
@@ -1838,12 +1838,12 @@ const Ds = (e, t) => {
     buttonClassses: g,
     buttonRef: c,
     buttonProps: Q,
-    handleClick: (H) => {
+    handleClick: (V) => {
       if (l.value) {
-        H.stopPropagation();
+        V.stopPropagation();
         return;
       }
-      t("click", H);
+      t("click", V);
     }
   };
 }, ys = /* @__PURE__ */ X({
@@ -1852,7 +1852,7 @@ const Ds = (e, t) => {
   emits: is,
   setup(e, { emit: t }) {
     const s = e, r = t, { buttonRef: o, buttonClassses: i, buttonProps: n, handleClick: l } = Ds(s, r);
-    return (a, c) => (M(), f("button", Z2({
+    return (a, c) => (M(), f("button", H2({
       ref_key: "buttonRef",
       ref: o,
       class: d(i)
@@ -1860,7 +1860,7 @@ const Ds = (e, t) => {
       onClick: c[0] || (c[0] = //@ts-ignore
       (...u) => d(l) && d(l)(...u))
     }), [
-      B(a.$slots, "default")
+      H(a.$slots, "default")
     ], 16));
   }
 }), Is = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
@@ -1954,7 +1954,7 @@ const Ds = (e, t) => {
         class: z(d(r).headerClasses)
       }, [
         t.title ? (M(), f("div", As, [
-          t.headerIcon ? (M(), F(d(G), {
+          t.headerIcon ? (M(), B(d(G), {
             key: 0,
             icon: t.headerIcon,
             class: "spr-me-size-spacing-3xs spr-h-6 spr-w-6 spr-text-kangkong-600"
@@ -1964,27 +1964,27 @@ const Ds = (e, t) => {
             t.subtitle ? (M(), f("div", ws, $(t.subtitle), 1)) : A("", !0)
           ])
         ])) : A("", !0),
-        o.$slots.header ? B(o.$slots, "header", { key: 1 }) : A("", !0)
+        o.$slots.header ? H(o.$slots, "header", { key: 1 }) : A("", !0)
       ], 2)) : A("", !0),
       o.$slots.content ? (M(), f("div", {
         key: 1,
         class: z(d(r).contentPaddingSizeClasses)
       }, [
-        B(o.$slots, "content")
+        H(o.$slots, "content")
       ], 2)) : A("", !0),
-      B(o.$slots, "default"),
+      H(o.$slots, "default"),
       o.$slots.footer && o.$props.showFooter ? (M(), f("div", {
         key: 2,
         class: z(d(r).footerClasses)
       }, [
-        B(o.$slots, "footer")
+        H(o.$slots, "footer")
       ], 2)) : A("", !0)
     ], 2));
   }
-}), Ls = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
+}), Ts = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
   __proto__: null,
   default: xs
-}, Symbol.toStringTag, { value: "Module" })), Ts = {
+}, Symbol.toStringTag, { value: "Module" })), Ls = {
   modelValue: {
     type: Boolean,
     required: !0
@@ -2048,7 +2048,7 @@ const Ds = (e, t) => {
   class: "spr-grid spr-gap-0.5"
 }, Bt = {
   __name: "checkbox",
-  props: Ts,
+  props: Ls,
   emits: Os,
   setup(e, { emit: t }) {
     const s = e, r = t, { checkboxClasses: o, handleCheckbox: i } = ks(s, r);
@@ -2218,7 +2218,7 @@ const Ds = (e, t) => {
     }, [
       a.variant === "tag" ? (M(), f(Z, { key: 0 }, [
         a.icon || a.$slots.icon ? (M(), f("span", Bs, [
-          B(a.$slots, "icon", {}, () => [
+          H(a.$slots, "icon", {}, () => [
             J(d(G), {
               icon: d(l),
               class: "spr-font-size-300"
@@ -2227,7 +2227,7 @@ const Ds = (e, t) => {
         ])) : A("", !0),
         j("span", Rs, $(a.label), 1),
         a.badge ? (M(), f("span", Gs, [
-          J(K2, {
+          J($2, {
             text: a.badgeText,
             variant: a.badgeVariant,
             size: "small",
@@ -2251,7 +2251,7 @@ const Ds = (e, t) => {
             ["stop"]
           ), ["enter"]))
         }, [
-          B(a.$slots, "close-icon", {}, () => [
+          H(a.$slots, "close-icon", {}, () => [
             J(d(G), { icon: "ph:x" })
           ])
         ], 40, Ws)) : A("", !0)
@@ -2275,7 +2275,7 @@ const Ds = (e, t) => {
 function Ce(e, t, s) {
   return E2(e, h0(t, s));
 }
-function H2(e, t) {
+function V2(e, t) {
   return typeof e == "function" ? e(t) : e;
 }
 function j2(e) {
@@ -2290,11 +2290,11 @@ function Rt(e) {
 function Oe(e) {
   return e === "y" ? "height" : "width";
 }
-function $2(e) {
+function P2(e) {
   return ["top", "bottom"].includes(j2(e)) ? "y" : "x";
 }
 function ke(e) {
-  return Rt($2(e));
+  return Rt(P2(e));
 }
 function Gt(e, t, s) {
   s === void 0 && (s = !1);
@@ -2370,7 +2370,7 @@ function st(e, t, s) {
     reference: r,
     floating: o
   } = e;
-  const i = $2(t), n = ke(t), l = Oe(n), a = j2(t), c = i === "y", u = r.x + r.width / 2 - o.width / 2, p = r.y + r.height / 2 - o.height / 2, C = r[l] / 2 - o[l] / 2;
+  const i = P2(t), n = ke(t), l = Oe(n), a = j2(t), c = i === "y", u = r.x + r.width / 2 - o.width / 2, p = r.y + r.height / 2 - o.height / 2, C = r[l] / 2 - o[l] / 2;
   let g;
   switch (a) {
     case "top":
@@ -2427,14 +2427,14 @@ const i3 = async (e, t, s) => {
   }), {
     x: u,
     y: p
-  } = st(c, r, a), C = r, g = {}, I = 0;
+  } = st(c, r, a), C = r, g = {}, y = 0;
   for (let m = 0; m < l.length; m++) {
     const {
-      name: y,
+      name: I,
       fn: h
     } = l[m], {
       x: b,
-      y: L,
+      y: T,
       data: U,
       reset: _
     } = await h({
@@ -2451,13 +2451,13 @@ const i3 = async (e, t, s) => {
         floating: t
       }
     });
-    u = b ?? u, p = L ?? p, g = {
+    u = b ?? u, p = T ?? p, g = {
       ...g,
-      [y]: {
-        ...g[y],
+      [I]: {
+        ...g[I],
         ...U
       }
-    }, _ && I <= 50 && (I++, typeof _ == "object" && (_.placement && (C = _.placement), _.rects && (c = _.rects === !0 ? await n.getElementRects({
+    }, _ && y <= 50 && (y++, typeof _ == "object" && (_.placement && (C = _.placement), _.rects && (c = _.rects === !0 ? await n.getElementRects({
       reference: e,
       floating: t,
       strategy: o
@@ -2490,8 +2490,8 @@ async function X0(e, t) {
     elementContext: p = "floating",
     altBoundary: C = !1,
     padding: g = 0
-  } = H2(t, e), I = Wt(g), y = l[C ? p === "floating" ? "reference" : "floating" : p], h = u0(await i.getClippingRect({
-    element: (s = await (i.isElement == null ? void 0 : i.isElement(y))) == null || s ? y : y.contextElement || await (i.getDocumentElement == null ? void 0 : i.getDocumentElement(l.floating)),
+  } = V2(t, e), y = Wt(g), I = l[C ? p === "floating" ? "reference" : "floating" : p], h = u0(await i.getClippingRect({
+    element: (s = await (i.isElement == null ? void 0 : i.isElement(I))) == null || s ? I : I.contextElement || await (i.getDocumentElement == null ? void 0 : i.getDocumentElement(l.floating)),
     boundary: c,
     rootBoundary: u,
     strategy: a
@@ -2500,7 +2500,7 @@ async function X0(e, t) {
     y: o,
     width: n.floating.width,
     height: n.floating.height
-  } : n.reference, L = await (i.getOffsetParent == null ? void 0 : i.getOffsetParent(l.floating)), U = await (i.isElement == null ? void 0 : i.isElement(L)) ? await (i.getScale == null ? void 0 : i.getScale(L)) || {
+  } : n.reference, T = await (i.getOffsetParent == null ? void 0 : i.getOffsetParent(l.floating)), U = await (i.isElement == null ? void 0 : i.isElement(T)) ? await (i.getScale == null ? void 0 : i.getScale(T)) || {
     x: 1,
     y: 1
   } : {
@@ -2509,14 +2509,14 @@ async function X0(e, t) {
   }, _ = u0(i.convertOffsetParentRelativeRectToViewportRelativeRect ? await i.convertOffsetParentRelativeRectToViewportRelativeRect({
     elements: l,
     rect: b,
-    offsetParent: L,
+    offsetParent: T,
     strategy: a
   }) : b);
   return {
-    top: (h.top - _.top + I.top) / U.y,
-    bottom: (_.bottom - h.bottom + I.bottom) / U.y,
-    left: (h.left - _.left + I.left) / U.x,
-    right: (_.right - h.right + I.right) / U.x
+    top: (h.top - _.top + y.top) / U.y,
+    bottom: (_.bottom - h.bottom + y.bottom) / U.y,
+    left: (h.left - _.left + y.left) / U.x,
+    right: (_.right - h.right + y.right) / U.x
   };
 }
 const n3 = (e) => ({
@@ -2534,21 +2534,21 @@ const n3 = (e) => ({
     } = t, {
       element: c,
       padding: u = 0
-    } = H2(e, t) || {};
+    } = V2(e, t) || {};
     if (c == null)
       return {};
     const p = Wt(u), C = {
       x: s,
       y: r
-    }, g = ke(o), I = Oe(g), m = await n.getDimensions(c), y = g === "y", h = y ? "top" : "left", b = y ? "bottom" : "right", L = y ? "clientHeight" : "clientWidth", U = i.reference[I] + i.reference[g] - C[g] - i.floating[I], _ = C[g] - i.reference[g], Q = await (n.getOffsetParent == null ? void 0 : n.getOffsetParent(c));
-    let v = Q ? Q[L] : 0;
-    (!v || !await (n.isElement == null ? void 0 : n.isElement(Q))) && (v = l.floating[L] || i.floating[I]);
-    const H = U / 2 - _ / 2, P = v / 2 - m[I] / 2 - 1, N = h0(p[h], P), D = h0(p[b], P), R = N, e2 = v - m[I] - D, k = v / 2 - m[I] / 2 + H, T = Ce(R, k, e2), w = !a.arrow && f2(o) != null && k !== T && i.reference[I] / 2 - (k < R ? N : D) - m[I] / 2 < 0, S = w ? k < R ? k - R : k - e2 : 0;
+    }, g = ke(o), y = Oe(g), m = await n.getDimensions(c), I = g === "y", h = I ? "top" : "left", b = I ? "bottom" : "right", T = I ? "clientHeight" : "clientWidth", U = i.reference[y] + i.reference[g] - C[g] - i.floating[y], _ = C[g] - i.reference[g], Q = await (n.getOffsetParent == null ? void 0 : n.getOffsetParent(c));
+    let v = Q ? Q[T] : 0;
+    (!v || !await (n.isElement == null ? void 0 : n.isElement(Q))) && (v = l.floating[T] || i.floating[y]);
+    const V = U / 2 - _ / 2, P = v / 2 - m[y] / 2 - 1, N = h0(p[h], P), D = h0(p[b], P), R = N, e2 = v - m[y] - D, k = v / 2 - m[y] / 2 + V, L = Ce(R, k, e2), w = !a.arrow && f2(o) != null && k !== L && i.reference[y] / 2 - (k < R ? N : D) - m[y] / 2 < 0, S = w ? k < R ? k - R : k - e2 : 0;
     return {
       [g]: C[g] + S,
       data: {
-        [g]: T,
-        centerOffset: k - T - S,
+        [g]: L,
+        centerOffset: k - L - S,
         ...w && {
           alignmentOffset: S
         }
@@ -2577,18 +2577,18 @@ const a3 = function(e) {
         alignment: p,
         allowedPlacements: C = tt,
         autoAlignment: g = !0,
-        ...I
-      } = H2(e, t), m = p !== void 0 || C === tt ? l3(p || null, g, C) : C, y = await X0(t, I), h = ((s = n.autoPlacement) == null ? void 0 : s.index) || 0, b = m[h];
+        ...y
+      } = V2(e, t), m = p !== void 0 || C === tt ? l3(p || null, g, C) : C, I = await X0(t, y), h = ((s = n.autoPlacement) == null ? void 0 : s.index) || 0, b = m[h];
       if (b == null)
         return {};
-      const L = Gt(b, i, await (a.isRTL == null ? void 0 : a.isRTL(c.floating)));
+      const T = Gt(b, i, await (a.isRTL == null ? void 0 : a.isRTL(c.floating)));
       if (l !== b)
         return {
           reset: {
             placement: m[0]
           }
         };
-      const U = [y[j2(b)], y[L[0]], y[L[1]]], _ = [...((r = n.autoPlacement) == null ? void 0 : r.overflows) || [], {
+      const U = [I[j2(b)], I[T[0]], I[T[1]]], _ = [...((r = n.autoPlacement) == null ? void 0 : r.overflows) || [], {
         placement: b,
         overflows: U
       }], Q = m[h + 1];
@@ -2646,34 +2646,34 @@ const a3 = function(e) {
         crossAxis: p = !0,
         fallbackPlacements: C,
         fallbackStrategy: g = "bestFit",
-        fallbackAxisSideDirection: I = "none",
+        fallbackAxisSideDirection: y = "none",
         flipAlignment: m = !0,
-        ...y
-      } = H2(e, t);
+        ...I
+      } = V2(e, t);
       if ((s = i.arrow) != null && s.alignmentOffset)
         return {};
-      const h = j2(o), b = $2(l), L = j2(l) === l, U = await (a.isRTL == null ? void 0 : a.isRTL(c.floating)), _ = C || (L || !m ? [P0(l)] : t3(l)), Q = I !== "none";
-      !C && Q && _.push(...r3(l, m, I, U));
-      const v = [l, ..._], H = await X0(t, y), P = [];
+      const h = j2(o), b = P2(l), T = j2(l) === l, U = await (a.isRTL == null ? void 0 : a.isRTL(c.floating)), _ = C || (T || !m ? [P0(l)] : t3(l)), Q = y !== "none";
+      !C && Q && _.push(...r3(l, m, y, U));
+      const v = [l, ..._], V = await X0(t, I), P = [];
       let N = ((r = i.flip) == null ? void 0 : r.overflows) || [];
-      if (u && P.push(H[h]), p) {
+      if (u && P.push(V[h]), p) {
         const k = Gt(o, n, U);
-        P.push(H[k[0]], H[k[1]]);
+        P.push(V[k[0]], V[k[1]]);
       }
       if (N = [...N, {
         placement: o,
         overflows: P
       }], !P.every((k) => k <= 0)) {
         var D, R;
-        const k = (((D = i.flip) == null ? void 0 : D.index) || 0) + 1, T = v[k];
-        if (T)
+        const k = (((D = i.flip) == null ? void 0 : D.index) || 0) + 1, L = v[k];
+        if (L)
           return {
             data: {
               index: k,
               overflows: N
             },
             reset: {
-              placement: T
+              placement: L
             }
           };
         let w = (R = N.filter((S) => S.overflows[0] <= 0).sort((S, x) => S.overflows[1] - x.overflows[1])[0]) == null ? void 0 : R.placement;
@@ -2683,13 +2683,13 @@ const a3 = function(e) {
               var e2;
               const S = (e2 = N.filter((x) => {
                 if (Q) {
-                  const E = $2(x.placement);
+                  const E = P2(x.placement);
                   return E === b || // Create a bias to the `y` side axis due to horizontal
                   // reading directions favoring greater width.
                   E === "y";
                 }
                 return !0;
-              }).map((x) => [x.placement, x.overflows.filter((E) => E > 0).reduce((E, V) => E + V, 0)]).sort((x, E) => x[1] - E[1])[0]) == null ? void 0 : e2[0];
+              }).map((x) => [x.placement, x.overflows.filter((E) => E > 0).reduce((E, F) => E + F, 0)]).sort((x, E) => x[1] - E[1])[0]) == null ? void 0 : e2[0];
               S && (w = S);
               break;
             }
@@ -2713,11 +2713,11 @@ async function u3(e, t) {
     placement: s,
     platform: r,
     elements: o
-  } = e, i = await (r.isRTL == null ? void 0 : r.isRTL(o.floating)), n = j2(s), l = f2(s), a = $2(s) === "y", c = ["left", "top"].includes(n) ? -1 : 1, u = i && a ? -1 : 1, p = H2(t, e);
+  } = e, i = await (r.isRTL == null ? void 0 : r.isRTL(o.floating)), n = j2(s), l = f2(s), a = P2(s) === "y", c = ["left", "top"].includes(n) ? -1 : 1, u = i && a ? -1 : 1, p = V2(t, e);
   let {
     mainAxis: C,
     crossAxis: g,
-    alignmentAxis: I
+    alignmentAxis: y
   } = typeof p == "number" ? {
     mainAxis: p,
     crossAxis: 0,
@@ -2727,7 +2727,7 @@ async function u3(e, t) {
     crossAxis: p.crossAxis || 0,
     alignmentAxis: p.alignmentAxis
   };
-  return l && typeof I == "number" && (g = l === "end" ? I * -1 : I), a ? {
+  return l && typeof y == "number" && (g = l === "end" ? y * -1 : y), a ? {
     x: g * u,
     y: C * c
   } : {
@@ -2770,11 +2770,11 @@ const p3 = function(e) {
         mainAxis: i = !0,
         crossAxis: n = !1,
         limiter: l = {
-          fn: (y) => {
+          fn: (I) => {
             let {
               x: h,
               y: b
-            } = y;
+            } = I;
             return {
               x: h,
               y: b
@@ -2782,23 +2782,23 @@ const p3 = function(e) {
           }
         },
         ...a
-      } = H2(e, t), c = {
+      } = V2(e, t), c = {
         x: s,
         y: r
-      }, u = await X0(t, a), p = $2(j2(o)), C = Rt(p);
-      let g = c[C], I = c[p];
+      }, u = await X0(t, a), p = P2(j2(o)), C = Rt(p);
+      let g = c[C], y = c[p];
       if (i) {
-        const y = C === "y" ? "top" : "left", h = C === "y" ? "bottom" : "right", b = g + u[y], L = g - u[h];
-        g = Ce(b, g, L);
+        const I = C === "y" ? "top" : "left", h = C === "y" ? "bottom" : "right", b = g + u[I], T = g - u[h];
+        g = Ce(b, g, T);
       }
       if (n) {
-        const y = p === "y" ? "top" : "left", h = p === "y" ? "bottom" : "right", b = I + u[y], L = I - u[h];
-        I = Ce(b, I, L);
+        const I = p === "y" ? "top" : "left", h = p === "y" ? "bottom" : "right", b = y + u[I], T = y - u[h];
+        y = Ce(b, y, T);
       }
       const m = l.fn({
         ...t,
         [C]: g,
-        [p]: I
+        [p]: y
       });
       return {
         ...m,
@@ -2828,25 +2828,25 @@ const p3 = function(e) {
         apply: a = () => {
         },
         ...c
-      } = H2(e, t), u = await X0(t, c), p = j2(o), C = f2(o), g = $2(o) === "y", {
-        width: I,
+      } = V2(e, t), u = await X0(t, c), p = j2(o), C = f2(o), g = P2(o) === "y", {
+        width: y,
         height: m
       } = i.floating;
-      let y, h;
-      p === "top" || p === "bottom" ? (y = p, h = C === (await (n.isRTL == null ? void 0 : n.isRTL(l.floating)) ? "start" : "end") ? "left" : "right") : (h = p, y = C === "end" ? "top" : "bottom");
-      const b = m - u.top - u.bottom, L = I - u.left - u.right, U = h0(m - u[y], b), _ = h0(I - u[h], L), Q = !t.middlewareData.shift;
-      let v = U, H = _;
-      if ((s = t.middlewareData.shift) != null && s.enabled.x && (H = L), (r = t.middlewareData.shift) != null && r.enabled.y && (v = b), Q && !C) {
+      let I, h;
+      p === "top" || p === "bottom" ? (I = p, h = C === (await (n.isRTL == null ? void 0 : n.isRTL(l.floating)) ? "start" : "end") ? "left" : "right") : (h = p, I = C === "end" ? "top" : "bottom");
+      const b = m - u.top - u.bottom, T = y - u.left - u.right, U = h0(m - u[I], b), _ = h0(y - u[h], T), Q = !t.middlewareData.shift;
+      let v = U, V = _;
+      if ((s = t.middlewareData.shift) != null && s.enabled.x && (V = T), (r = t.middlewareData.shift) != null && r.enabled.y && (v = b), Q && !C) {
         const N = E2(u.left, 0), D = E2(u.right, 0), R = E2(u.top, 0), e2 = E2(u.bottom, 0);
-        g ? H = I - 2 * (N !== 0 || D !== 0 ? N + D : E2(u.left, u.right)) : v = m - 2 * (R !== 0 || e2 !== 0 ? R + e2 : E2(u.top, u.bottom));
+        g ? V = y - 2 * (N !== 0 || D !== 0 ? N + D : E2(u.left, u.right)) : v = m - 2 * (R !== 0 || e2 !== 0 ? R + e2 : E2(u.top, u.bottom));
       }
       await a({
         ...t,
-        availableWidth: H,
+        availableWidth: V,
         availableHeight: v
       });
       const P = await n.getDimensions(l.floating);
-      return I !== P.width || m !== P.height ? {
+      return y !== P.width || m !== P.height ? {
         reset: {
           rects: !0
         }
@@ -2880,7 +2880,7 @@ function Kt() {
 function D2(e) {
   return e instanceof g2(e).HTMLElement;
 }
-function L2(e) {
+function T2(e) {
   return e instanceof g2(e).Element;
 }
 function Xt(e) {
@@ -2910,10 +2910,10 @@ function Se(e) {
   return ["html", "body", "#document"].includes(O2(e));
 }
 function e1(e) {
-  return L2(e) ? e : e.contextElement;
+  return T2(e) ? e : e.contextElement;
 }
 const t1 = { x: 1, y: 1 };
-function G2(e) {
+function W2(e) {
   const t = e1(e);
   if (!D2(t)) return t1;
   const s = t.getBoundingClientRect(), { width: r, height: o, fallback: i } = Jt(t);
@@ -2925,31 +2925,31 @@ function N0(e, t, s, r) {
   t === void 0 && (t = !1), s === void 0 && (s = !1);
   const n = e.getBoundingClientRect(), l = e1(e);
   let a = t1;
-  t && (r ? L2(r) && (a = G2(r)) : a = G2(e));
+  t && (r ? T2(r) && (a = W2(r)) : a = W2(e));
   const c = l ? g2(l) : window, u = !qt() && s;
-  let p = (n.left + (u && ((o = c.visualViewport) == null ? void 0 : o.offsetLeft) || 0)) / a.x, C = (n.top + (u && ((i = c.visualViewport) == null ? void 0 : i.offsetTop) || 0)) / a.y, g = n.width / a.x, I = n.height / a.y;
+  let p = (n.left + (u && ((o = c.visualViewport) == null ? void 0 : o.offsetLeft) || 0)) / a.x, C = (n.top + (u && ((i = c.visualViewport) == null ? void 0 : i.offsetTop) || 0)) / a.y, g = n.width / a.x, y = n.height / a.y;
   if (l) {
-    const m = g2(l), y = r && L2(r) ? g2(r) : r;
+    const m = g2(l), I = r && T2(r) ? g2(r) : r;
     let h = m.frameElement;
-    for (; h && r && y !== m; ) {
-      const b = G2(h), L = h.getBoundingClientRect(), U = getComputedStyle(h);
-      L.x += (h.clientLeft + parseFloat(U.paddingLeft)) * b.x, L.y += (h.clientTop + parseFloat(U.paddingTop)) * b.y, p *= b.x, C *= b.y, g *= b.x, I *= b.y, p += L.x, C += L.y, h = g2(h).frameElement;
+    for (; h && r && I !== m; ) {
+      const b = W2(h), T = h.getBoundingClientRect(), U = getComputedStyle(h);
+      T.x += (h.clientLeft + parseFloat(U.paddingLeft)) * b.x, T.y += (h.clientTop + parseFloat(U.paddingTop)) * b.y, p *= b.x, C *= b.y, g *= b.x, y *= b.y, p += T.x, C += T.y, h = g2(h).frameElement;
     }
   }
-  return { width: g, height: I, top: C, right: p + g, bottom: C + I, left: p, x: p, y: C };
+  return { width: g, height: y, top: C, right: p + g, bottom: C + y, left: p, x: p, y: C };
 }
-function T2(e) {
+function L2(e) {
   return ((Xt(e) ? e.ownerDocument : e.document) || window.document).documentElement;
 }
 function ee(e) {
-  return L2(e) ? { scrollLeft: e.scrollLeft, scrollTop: e.scrollTop } : { scrollLeft: e.pageXOffset, scrollTop: e.pageYOffset };
+  return T2(e) ? { scrollLeft: e.scrollLeft, scrollTop: e.scrollTop } : { scrollLeft: e.pageXOffset, scrollTop: e.pageYOffset };
 }
 function s1(e) {
-  return N0(T2(e)).left + ee(e).scrollLeft;
+  return N0(L2(e)).left + ee(e).scrollLeft;
 }
 function D0(e) {
   if (O2(e) === "html") return e;
-  const t = e.assignedSlot || e.parentNode || ot(e) && e.host || T2(e);
+  const t = e.assignedSlot || e.parentNode || ot(e) && e.host || L2(e);
   return ot(t) ? t.host : t;
 }
 function r1(e) {
@@ -2964,7 +2964,7 @@ function H0(e, t) {
 }
 function it(e, t, s) {
   return t === "viewport" ? u0(function(r, o) {
-    const i = g2(r), n = T2(r), l = i.visualViewport;
+    const i = g2(r), n = L2(r), l = i.visualViewport;
     let a = n.clientWidth, c = n.clientHeight, u = 0, p = 0;
     if (l) {
       a = l.width, c = l.height;
@@ -2972,15 +2972,15 @@ function it(e, t, s) {
       (C || !C && o === "fixed") && (u = l.offsetLeft, p = l.offsetTop);
     }
     return { width: a, height: c, x: u, y: p };
-  }(e, s)) : L2(t) ? u0(function(r, o) {
-    const i = N0(r, !0, o === "fixed"), n = i.top + r.clientTop, l = i.left + r.clientLeft, a = D2(r) ? G2(r) : { x: 1, y: 1 };
+  }(e, s)) : T2(t) ? u0(function(r, o) {
+    const i = N0(r, !0, o === "fixed"), n = i.top + r.clientTop, l = i.left + r.clientLeft, a = D2(r) ? W2(r) : { x: 1, y: 1 };
     return { width: r.clientWidth * a.x, height: r.clientHeight * a.y, x: l * a.x, y: n * a.y };
   }(t, s)) : u0(function(r) {
-    const o = T2(r), i = ee(r), n = r.ownerDocument.body, l = p0(o.scrollWidth, o.clientWidth, n.scrollWidth, n.clientWidth), a = p0(o.scrollHeight, o.clientHeight, n.scrollHeight, n.clientHeight);
+    const o = L2(r), i = ee(r), n = r.ownerDocument.body, l = p0(o.scrollWidth, o.clientWidth, n.scrollWidth, n.clientWidth), a = p0(o.scrollHeight, o.clientHeight, n.scrollHeight, n.clientHeight);
     let c = -i.scrollLeft + s1(r);
     const u = -i.scrollTop;
     return N2(n).direction === "rtl" && (c += p0(o.clientWidth, n.clientWidth) - l), { width: l, height: a, x: c, y: u };
-  }(T2(e)));
+  }(L2(e)));
 }
 function nt(e) {
   return D2(e) && N2(e).position !== "fixed" ? e.offsetParent : null;
@@ -2999,7 +2999,7 @@ function lt(e) {
   }(e) || t;
 }
 function C3(e, t, s) {
-  const r = D2(t), o = T2(t), i = N0(e, !0, s === "fixed", t);
+  const r = D2(t), o = L2(t), i = N0(e, !0, s === "fixed", t);
   let n = { scrollLeft: 0, scrollTop: 0 };
   const l = { x: 0, y: 0 };
   if (r || !r && s !== "fixed") if ((O2(t) !== "body" || q0(o)) && (n = ee(t)), D2(t)) {
@@ -3013,12 +3013,12 @@ const f3 = { getClippingRect: function(e) {
   const i = s === "clippingAncestors" ? function(c, u) {
     const p = u.get(c);
     if (p) return p;
-    let C = H0(c).filter((y) => L2(y) && O2(y) !== "body"), g = null;
-    const I = N2(c).position === "fixed";
-    let m = I ? D0(c) : c;
-    for (; L2(m) && !Se(m); ) {
-      const y = N2(m), h = fe(m);
-      (I ? h || g : h || y.position !== "static" || !g || !["absolute", "fixed"].includes(g.position)) ? g = y : C = C.filter((b) => b !== m), m = D0(m);
+    let C = H0(c).filter((I) => T2(I) && O2(I) !== "body"), g = null;
+    const y = N2(c).position === "fixed";
+    let m = y ? D0(c) : c;
+    for (; T2(m) && !Se(m); ) {
+      const I = N2(m), h = fe(m);
+      (y ? h || g : h || I.position !== "static" || !g || !["absolute", "fixed"].includes(g.position)) ? g = I : C = C.filter((b) => b !== m), m = D0(m);
     }
     return u.set(c, C), C;
   }(t, this._c) : [].concat(s), n = [...i, r], l = n[0], a = n.reduce((c, u) => {
@@ -3028,18 +3028,18 @@ const f3 = { getClippingRect: function(e) {
   return { width: a.right - a.left, height: a.bottom - a.top, x: a.left, y: a.top };
 }, convertOffsetParentRelativeRectToViewportRelativeRect: function(e) {
   let { rect: t, offsetParent: s, strategy: r } = e;
-  const o = D2(s), i = T2(s);
+  const o = D2(s), i = L2(s);
   if (s === i) return t;
   let n = { scrollLeft: 0, scrollTop: 0 }, l = { x: 1, y: 1 };
   const a = { x: 0, y: 0 };
   if ((o || !o && r !== "fixed") && ((O2(s) !== "body" || q0(i)) && (n = ee(s)), D2(s))) {
     const c = N0(s);
-    l = G2(s), a.x = c.x + s.clientLeft, a.y = c.y + s.clientTop;
+    l = W2(s), a.x = c.x + s.clientLeft, a.y = c.y + s.clientTop;
   }
   return { width: t.width * l.x, height: t.height * l.y, x: t.x * l.x - n.scrollLeft * l.x + a.x, y: t.y * l.y - n.scrollTop * l.y + a.y };
-}, isElement: L2, getDimensions: function(e) {
+}, isElement: T2, getDimensions: function(e) {
   return D2(e) ? Jt(e) : e.getBoundingClientRect();
-}, getOffsetParent: lt, getDocumentElement: T2, getScale: G2, async getElementRects(e) {
+}, getOffsetParent: lt, getDocumentElement: L2, getScale: W2, async getElementRects(e) {
   let { reference: t, floating: s, strategy: r } = e;
   const o = this.getOffsetParent || lt, i = this.getDimensions;
   return { reference: C3(t, await o(s), r), floating: { x: 0, y: 0, ...await i(s) } };
@@ -3856,7 +3856,7 @@ function z3(e, t, s, r, o, i) {
       "v-popper--shown": e.slotData.isShown
     }])
   }, [
-    B(e.$slots, "default", R0(G0(e.slotData)))
+    H(e.$slots, "default", R0(G0(e.slotData)))
   ], 2);
 }
 const A3 = /* @__PURE__ */ _e(m3, [["render", z3]]);
@@ -3930,7 +3930,7 @@ const w3 = {
   tabindex: "-1"
 };
 v1();
-const x3 = /* @__PURE__ */ v3((e, t, s, r, o, i) => (M(), F("div", w3)));
+const x3 = /* @__PURE__ */ v3((e, t, s, r, o, i) => (M(), B("div", w3)));
 te.render = x3;
 te.__scopeId = "data-v-b329ee4c";
 te.__file = "src/components/ResizeObserver.vue";
@@ -3940,7 +3940,7 @@ const n1 = (e = "theme") => ({
       return N3(this[e]);
     }
   }
-}), L3 = X({
+}), T3 = X({
   name: "VPopperContent",
   components: {
     ResizeObserver: te
@@ -3968,7 +3968,7 @@ const n1 = (e = "theme") => ({
       return e != null && !isNaN(e) ? `${e}px` : null;
     }
   }
-}), T3 = ["id", "aria-hidden", "tabindex", "data-popper-placement"], O3 = {
+}), L3 = ["id", "aria-hidden", "tabindex", "data-popper-placement"], O3 = {
   ref: "inner",
   class: "v-popper__inner"
 }, k3 = /* @__PURE__ */ j("div", { class: "v-popper__arrow-outer" }, null, -1), S3 = /* @__PURE__ */ j("div", { class: "v-popper__arrow-inner" }, null, -1), _3 = [
@@ -4017,9 +4017,9 @@ function E3(e, t, s, r, o, i) {
       j("div", O3, [
         e.mounted ? (M(), f(Z, { key: 0 }, [
           j("div", null, [
-            B(e.$slots, "default")
+            H(e.$slots, "default")
           ]),
-          e.handleResize ? (M(), F(n, {
+          e.handleResize ? (M(), B(n, {
             key: 0,
             onNotify: t[1] || (t[1] = (l) => e.$emit("resize", l))
           })) : A("", !0)
@@ -4034,9 +4034,9 @@ function E3(e, t, s, r, o, i) {
         } : void 0)
       }, _3, 4)
     ], 4)
-  ], 46, T3);
+  ], 46, L3);
 }
-const l1 = /* @__PURE__ */ _e(L3, [["render", E3]]), a1 = {
+const l1 = /* @__PURE__ */ _e(T3, [["render", E3]]), a1 = {
   methods: {
     show(...e) {
       return this.$refs.popper.show(...e);
@@ -4253,7 +4253,7 @@ const Y3 = X({
 });
 function Q3(e, t, s, r, o, i) {
   const n = ue("PopperContent"), l = ue("Popper");
-  return M(), F(l, Z2({ ref: "popper" }, e.$props, {
+  return M(), B(l, H2({ ref: "popper" }, e.$props, {
     theme: e.finalTheme,
     "target-nodes": e.getTargetNodes,
     "popper-node": () => e.$refs.popperContent.$el,
@@ -4277,16 +4277,16 @@ function Q3(e, t, s, r, o, i) {
       skipTransition: p,
       autoHide: C,
       show: g,
-      hide: I,
+      hide: y,
       handleResize: m,
-      onResize: y,
+      onResize: I,
       classes: h,
       result: b
     }) => [
-      B(e.$slots, "default", {
+      H(e.$slots, "default", {
         shown: c,
         show: g,
-        hide: I
+        hide: y
       }),
       J(n, {
         ref: "popperContent",
@@ -4299,13 +4299,13 @@ function Q3(e, t, s, r, o, i) {
         "handle-resize": m,
         classes: h,
         result: b,
-        onHide: I,
-        onResize: y
+        onHide: y,
+        onResize: I
       }, {
         default: W(() => [
-          B(e.$slots, "popper", {
+          H(e.$slots, "popper", {
             shown: c,
-            hide: I
+            hide: y
           })
         ]),
         _: 2
@@ -4460,14 +4460,14 @@ const z2 = U3, i0 = $3, P3 = ["single-select", "multi-select"], Z3 = [
     "active:spr-background-color-single-active active:spr-scale-95"
   )), l = q(!1);
   I2(l, () => {
-    y();
+    I();
   });
   const a = Y(() => o.value === "single-select"), c = Y(() => o.value === "multi-select"), u = q([]), p = (h) => {
     if (a.value && (l.value = !1, u.value = [h], t("get-selected-item", u.value[0])), c.value) {
-      const b = u.value.findIndex((L) => L.value === h.value);
+      const b = u.value.findIndex((T) => T.value === h.value);
       b === -1 ? (g.value[h.text] = !0, u.value.push(h)) : (g.value[h.text] = !1, u.value.splice(b, 1)), t("get-selected-item", u.value);
     }
-  }, C = (h) => Array.isArray(u.value) ? u.value.some((b) => b.text === h.text) : u.value[0].text === h.text, g = q({}), I = () => {
+  }, C = (h) => Array.isArray(u.value) ? u.value.some((b) => b.text === h.text) : u.value[0].text === h.text, g = q({}), y = () => {
     s.value && s.value.length > 0 && s.value.forEach((h) => {
       g.value = Object.assign({}, g.value, {
         [h.text]: !1
@@ -4475,14 +4475,14 @@ const z2 = U3, i0 = $3, P3 = ["single-select", "multi-select"], Z3 = [
     });
   }, m = () => {
     s.value && s.value.length > 0 && r.value && r.value.length > 0 && (r.value.forEach((h) => {
-      const b = s.value.find((L) => L.text === h);
+      const b = s.value.find((T) => T.text === h);
       b && (c.value && (g.value[b.text] = !0), u.value.push(b));
     }), a.value && u.value.length > 0 && t("get-selected-item", u.value[0]), c.value && t("get-selected-item", u.value));
-  }, y = () => {
+  }, I = () => {
     t("get-popper-state", l.value);
   };
   return F0(() => {
-    l.value = i.value, I(), m(), y();
+    l.value = i.value, y(), m(), I();
   }), {
     dropdownItemBaseClasses: n,
     menuOpenedState: l,
@@ -4499,7 +4499,7 @@ const z2 = U3, i0 = $3, P3 = ["single-select", "multi-select"], Z3 = [
       s,
       r
     );
-    return (c, u) => (M(), F(d(z2), {
+    return (c, u) => (M(), B(d(z2), {
       shown: d(i),
       "onUpdate:shown": u[1] || (u[1] = (p) => h2(i) ? i.value = p : null),
       class: "spr-w-fit",
@@ -4521,7 +4521,7 @@ const z2 = U3, i0 = $3, P3 = ["single-select", "multi-select"], Z3 = [
             ]),
             onClick: (g) => d(n)(p)
           }, [
-            s.dropdownType === "multi-select" ? (M(), F(Bt, {
+            s.dropdownType === "multi-select" ? (M(), B(Bt, {
               key: 0,
               modelValue: d(a)[p.text],
               "onUpdate:modelValue": (g) => d(a)[p.text] = g
@@ -4529,7 +4529,7 @@ const z2 = U3, i0 = $3, P3 = ["single-select", "multi-select"], Z3 = [
             j("div", G3, [
               j("span", W3, $(p.text), 1)
             ]),
-            s.dropdownType === "single-select" && d(l)(p) ? (M(), F(d(G), {
+            s.dropdownType === "single-select" && d(l)(p) ? (M(), B(d(G), {
               key: 1,
               class: "spr-text-color-brand-base spr-w-[1.39em]",
               icon: "ph:check"
@@ -4541,7 +4541,7 @@ const z2 = U3, i0 = $3, P3 = ["single-select", "multi-select"], Z3 = [
         j("div", {
           onClick: u[0] || (u[0] = (p) => i.value = !d(i))
         }, [
-          B(c.$slots, "default")
+          H(c.$slots, "default")
         ])
       ]),
       _: 3
@@ -4579,6 +4579,7 @@ const z2 = U3, i0 = $3, P3 = ["single-select", "multi-select"], Z3 = [
   },
   image: {
     type: String,
+    default: "list",
     validator: (e) => e === void 0 || q3.includes(e)
   },
   hasButton: {
@@ -4601,7 +4602,7 @@ const z2 = U3, i0 = $3, P3 = ["single-select", "multi-select"], Z3 = [
       baseClasses: i,
       imageSizeClasses: n
     };
-  }), o = Y(() => s != null && s.value ? new URL((/* @__PURE__ */ Object.assign({ "../../assets/images/empty-states/bug.svg": tr, "../../assets/images/empty-states/clock.svg": sr, "../../assets/images/empty-states/dashboard.svg": rr, "../../assets/images/empty-states/employees.svg": or, "../../assets/images/empty-states/government-id.svg": ir, "../../assets/images/empty-states/integration.svg": nr, "../../assets/images/empty-states/list.svg": lr, "../../assets/images/empty-states/social-media-handles.svg": ar, "../../assets/images/empty-states/work-in-progress.svg": cr, "../../assets/images/empty-states/work-location.svg": ur }))[`../../assets/images/empty-states/${s.value}.svg`], import.meta.url).href : "");
+  }), o = Y(() => s.value ? new URL((/* @__PURE__ */ Object.assign({ "../../assets/images/empty-states/bug.svg": tr, "../../assets/images/empty-states/clock.svg": sr, "../../assets/images/empty-states/dashboard.svg": rr, "../../assets/images/empty-states/employees.svg": or, "../../assets/images/empty-states/government-id.svg": ir, "../../assets/images/empty-states/integration.svg": nr, "../../assets/images/empty-states/list.svg": lr, "../../assets/images/empty-states/social-media-handles.svg": ar, "../../assets/images/empty-states/work-in-progress.svg": cr, "../../assets/images/empty-states/work-location.svg": ur }))[`../../assets/images/empty-states/${s.value}.svg`], import.meta.url).href : "");
   return {
     emptyStateClasses: r,
     getImageUrl: o
@@ -4616,7 +4617,7 @@ const z2 = U3, i0 = $3, P3 = ["single-select", "multi-select"], Z3 = [
       id: "empty-state",
       class: z(d(s).baseClasses)
     }, [
-      B(o.$slots, "default", {
+      H(o.$slots, "default", {
         class: z(d(s).imageSizeClasses)
       }),
       o.$slots.default ? A("", !0) : (M(), f("div", {
@@ -4634,7 +4635,7 @@ const z2 = U3, i0 = $3, P3 = ["single-select", "multi-select"], Z3 = [
           j("span", null, $(o.description), 1),
           j("div", Cr, $(o.subDescription), 1)
         ]),
-        B(o.$slots, "button")
+        H(o.$slots, "button")
       ])
     ], 2));
   }
@@ -4745,7 +4746,7 @@ const z2 = U3, i0 = $3, P3 = ["single-select", "multi-select"], Z3 = [
           "spr-pr-[50%]": l.value === "md" && t.trailing,
           "spr-cursor-pointer": n.value
         }
-      ), I = O(
+      ), y = O(
         "spr-absolute spr-right-3 spr-top-1/2 spr-h-5 spr-w-5 -spr-translate-y-1/2 spr-transform spr-text-mushroom-300",
         {
           "!spr-text-tomato-600": o.value
@@ -4756,7 +4757,7 @@ const z2 = U3, i0 = $3, P3 = ["single-select", "multi-select"], Z3 = [
           "!spr-text-tomato-600": o.value,
           "spr-font-size-200 !spr-top-4 ": e.type === "url"
         }
-      ), y = O(
+      ), I = O(
         "spr-absolute spr-left-[55%] spr-top-1/2 -spr-translate-y-1/2 spr-transform spr-text-mushroom-300",
         {
           "!spr-text-tomato-600": o.value,
@@ -4770,7 +4771,7 @@ const z2 = U3, i0 = $3, P3 = ["single-select", "multi-select"], Z3 = [
           "spr-text-color-supporting": !o.value
         }
       );
-      return { baseClasses: p, labelClasses: C, inputTextClasses: g, iconSlotClasses: I, prefixSlotClasses: m, trailingSlotClasses: y, helperClasses: h };
+      return { baseClasses: p, labelClasses: C, inputTextClasses: g, iconSlotClasses: y, prefixSlotClasses: m, trailingSlotClasses: I, helperClasses: h };
     }),
     onInput: (p) => {
       const C = p.target;
@@ -4796,7 +4797,7 @@ const z2 = U3, i0 = $3, P3 = ["single-select", "multi-select"], Z3 = [
           key: 0,
           class: z(d(i).prefixSlotClasses)
         }, [
-          B(l.$slots, "prefix", {}, void 0, !0)
+          H(l.$slots, "prefix", {}, void 0, !0)
         ], 2)) : A("", !0),
         j("input", {
           class: z([d(i).inputTextClasses, { "number-input": r.type === "number" }]),
@@ -4812,13 +4813,13 @@ const z2 = U3, i0 = $3, P3 = ["single-select", "multi-select"], Z3 = [
           key: 1,
           class: z(d(i).trailingSlotClasses)
         }, [
-          B(l.$slots, "trailing", {}, void 0, !0)
+          H(l.$slots, "trailing", {}, void 0, !0)
         ], 2)) : A("", !0),
         l.$slots.icon ? (M(), f("div", {
           key: 2,
           class: z(d(i).iconSlotClasses)
         }, [
-          B(l.$slots, "icon", {}, void 0, !0)
+          H(l.$slots, "icon", {}, void 0, !0)
         ], 2)) : A("", !0)
       ]),
       r.displayHelper ? (M(), f("label", {
@@ -4829,8 +4830,8 @@ const z2 = U3, i0 = $3, P3 = ["single-select", "multi-select"], Z3 = [
           "spr-flex spr-items-center spr-gap-size-spacing-5xs"
         ])
       }, [
-        B(l.$slots, "helperMessage", {}, () => [
-          r.helperIcon ? (M(), F(d(G), {
+        H(l.$slots, "helperMessage", {}, () => [
+          r.helperIcon ? (M(), B(d(G), {
             key: 0,
             icon: r.helperIcon,
             width: "20px",
@@ -4852,7 +4853,7 @@ const z2 = U3, i0 = $3, P3 = ["single-select", "multi-select"], Z3 = [
 }, Symbol.toStringTag, { value: "Module" })), vr = /* @__PURE__ */ X({
   __name: "input-email",
   setup(e) {
-    return (t, s) => (M(), F(e0, R0(G0(t.$attrs)), W0({
+    return (t, s) => (M(), B(e0, R0(G0(t.$attrs)), W0({
       prefix: W(() => [
         J(d(G), { icon: "ph:envelope" })
       ]),
@@ -4861,7 +4862,7 @@ const z2 = U3, i0 = $3, P3 = ["single-select", "multi-select"], Z3 = [
       s2(t.$slots, (r, o) => ({
         name: o,
         fn: W(() => [
-          B(t.$slots, o)
+          H(t.$slots, o)
         ])
       }))
     ]), 1040));
@@ -4879,7 +4880,7 @@ const z2 = U3, i0 = $3, P3 = ["single-select", "multi-select"], Z3 = [
     evaluateEyeIcon: () => t.value ? "ph:eye" : "ph:eye-closed",
     evaluatePasswordInputType: () => t.value ? "text" : "password"
   };
-}, Lr = /* @__PURE__ */ X({
+}, Tr = /* @__PURE__ */ X({
   __name: "input-password",
   setup(e) {
     const {
@@ -4888,7 +4889,7 @@ const z2 = U3, i0 = $3, P3 = ["single-select", "multi-select"], Z3 = [
       toggleShowPassword: r,
       evaluatePasswordInputType: o
     } = xr();
-    return (i, n) => (M(), F(e0, Z2(i.$attrs, {
+    return (i, n) => (M(), B(e0, H2(i.$attrs, {
       type: d(o)()
     }), W0({
       icon: W(() => [
@@ -4903,18 +4904,18 @@ const z2 = U3, i0 = $3, P3 = ["single-select", "multi-select"], Z3 = [
       s2(i.$slots, (l, a) => ({
         name: a,
         fn: W(() => [
-          B(i.$slots, a)
+          H(i.$slots, a)
         ])
       }))
     ]), 1040, ["type"]));
   }
-}), Tr = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
+}), Lr = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
   __proto__: null,
-  default: Lr
+  default: Tr
 }, Symbol.toStringTag, { value: "Module" })), Or = /* @__PURE__ */ X({
   __name: "input-search",
   setup(e) {
-    return (t, s) => (M(), F(e0, R0(G0(t.$attrs)), {
+    return (t, s) => (M(), B(e0, R0(G0(t.$attrs)), {
       icon: W(() => [
         J(d(G), { icon: "ph:magnifying-glass" })
       ]),
@@ -4927,7 +4928,7 @@ const z2 = U3, i0 = $3, P3 = ["single-select", "multi-select"], Z3 = [
 }, Symbol.toStringTag, { value: "Module" })), Sr = /* @__PURE__ */ X({
   __name: "input-url",
   setup(e) {
-    return (t, s) => (M(), F(e0, Z2(t.$attrs, { type: "url" }), W0({
+    return (t, s) => (M(), B(e0, H2(t.$attrs, { type: "url" }), W0({
       prefix: W(() => [
         s[0] || (s[0] = j("span", null, " https:// ", -1))
       ]),
@@ -4939,7 +4940,7 @@ const z2 = U3, i0 = $3, P3 = ["single-select", "multi-select"], Z3 = [
       s2(t.$slots, (r, o) => ({
         name: o,
         fn: W(() => [
-          B(t.$slots, o)
+          H(t.$slots, o)
         ])
       }))
     ]), 1040));
@@ -4950,7 +4951,7 @@ const z2 = U3, i0 = $3, P3 = ["single-select", "multi-select"], Z3 = [
 }, Symbol.toStringTag, { value: "Module" })), Er = /* @__PURE__ */ X({
   __name: "input-username",
   setup(e) {
-    return (t, s) => (M(), F(e0, R0(G0(t.$attrs)), W0({
+    return (t, s) => (M(), B(e0, R0(G0(t.$attrs)), W0({
       prefix: W(() => [
         J(d(G), { icon: "ph:user" })
       ]),
@@ -4959,7 +4960,7 @@ const z2 = U3, i0 = $3, P3 = ["single-select", "multi-select"], Z3 = [
       s2(t.$slots, (r, o) => ({
         name: o,
         fn: W(() => [
-          B(t.$slots, o)
+          H(t.$slots, o)
         ])
       }))
     ]), 1040));
@@ -5065,10 +5066,10 @@ const z2 = U3, i0 = $3, P3 = ["single-select", "multi-select"], Z3 = [
         class: z(d(s).toneClasses)
       }, [
         r.$slots.icon ? (M(), f("div", Pr, [
-          B(r.$slots, "icon")
+          H(r.$slots, "icon")
         ])) : A("", !0),
         r.$slots.avatar ? (M(), f("div", Zr, [
-          B(r.$slots, "avatar")
+          H(r.$slots, "avatar")
         ])) : A("", !0),
         r.url && !r.$slots.avatar ? (M(), f("div", Hr, [
           j("img", {
@@ -5167,7 +5168,7 @@ const z2 = U3, i0 = $3, P3 = ["single-select", "multi-select"], Z3 = [
       class: z([d(o).baseClasses, d(o).sizeClasses])
     }, [
       l.hasHeader ? (M(), f("header", Kr, [
-        B(l.$slots, "header", {}, void 0, !0),
+        H(l.$slots, "header", {}, void 0, !0),
         l.$slots.header ? A("", !0) : (M(), f("div", Xr, $(l.title), 1)),
         l.hasClose ? (M(), f("span", {
           key: 1,
@@ -5178,10 +5179,10 @@ const z2 = U3, i0 = $3, P3 = ["single-select", "multi-select"], Z3 = [
         ])) : A("", !0)
       ])) : A("", !0),
       j("div", qr, [
-        B(l.$slots, "default", {}, void 0, !0)
+        H(l.$slots, "default", {}, void 0, !0)
       ]),
       l.hasFooter ? (M(), f("footer", eo, [
-        B(l.$slots, "footer", {}, void 0, !0)
+        H(l.$slots, "footer", {}, void 0, !0)
       ])) : A("", !0)
     ], 2));
   }
@@ -5231,7 +5232,7 @@ const z2 = U3, i0 = $3, P3 = ["single-select", "multi-select"], Z3 = [
     required: !0
   }
 }, no = ["update:modelValue"], lo = (e) => {
-  const t = q(null), s = Te(t), r = Y(() => {
+  const t = q(null), s = Le(t), r = Y(() => {
     const n = "spr-sr-only spr-peer spr-inline-block";
     return e.disabled ? O(n, "spr-cursor-not-allowed") : n;
   }), o = Y(() => {
@@ -5264,7 +5265,7 @@ const z2 = U3, i0 = $3, P3 = ["single-select", "multi-select"], Z3 = [
   setup(e, { emit: t }) {
     const s = e, o = m0(s, "modelValue", t), { radioRef: i, radioClasses: n, indicatorClasses: l, radioLabelClasses: a } = lo(s);
     return (c, u) => (M(), f(Z, null, [
-      W2(j("input", {
+      J2(j("input", {
         id: s.id,
         ref_key: "radioRef",
         ref: i,
@@ -5287,7 +5288,7 @@ const z2 = U3, i0 = $3, P3 = ["single-select", "multi-select"], Z3 = [
         j("span", {
           class: z(d(l))
         }, null, 2),
-        B(c.$slots, "default", {}, void 0, !0)
+        H(c.$slots, "default", {}, void 0, !0)
       ], 10, co)
     ], 64));
   }
@@ -5380,7 +5381,7 @@ const z2 = U3, i0 = $3, P3 = ["single-select", "multi-select"], Z3 = [
 }, Io = { class: "spr-max-h-[268px] spr-overflow-auto" }, jo = ["onClick"], mo = { class: "spr-grid spr-justify-between" }, zo = { class: "spr-body-sm-regular-medium spr-text-color-strong spr-m-0 spr-truncate" }, Ao = { class: "spr-body-xs-regular spr-text-color-base spr-m-0 spr-truncate" }, bo = { class: "spr-border-color-weak spr-border-x-0 spr-border-b spr-border-t-0 spr-border-solid spr-p-2" }, vo = { class: "spr-body-sm-regular-medium spr-m-0" }, wo = {
   key: 0,
   class: "spr-background-color-brand-base spr-absolute spr-left-0 spr-top-0 spr-h-full spr-w-[2px]"
-}, xo = ["onClick"], Lo = { class: "spr-background-color-brand-base spr-absolute spr-left-0 spr-top-0 spr-h-full spr-w-[2px]" }, To = ["onClick"], Oo = { class: "spr-label-xs-medium spr-uppercase" }, ko = ["onClick"], So = {
+}, xo = ["onClick"], To = { class: "spr-background-color-brand-base spr-absolute spr-left-0 spr-top-0 spr-h-full spr-w-[2px]" }, Lo = ["onClick"], Oo = { class: "spr-label-xs-medium spr-uppercase" }, ko = ["onClick"], So = {
   key: 0,
   class: "spr-background-color-hover spr-h-[2px] spr-w-full"
 }, _o = {
@@ -5433,9 +5434,9 @@ const z2 = U3, i0 = $3, P3 = ["single-select", "multi-select"], Z3 = [
       }, [
         j("div", No, [
           j("div", Do, [
-            B(c.$slots, "logo-image")
+            H(c.$slots, "logo-image")
           ]),
-          s.quickActions && s.quickActions.length > 0 ? (M(), F(d(z2), {
+          s.quickActions && s.quickActions.length > 0 ? (M(), B(d(z2), {
             key: 0,
             shown: d(o),
             "onUpdate:shown": u[2] || (u[2] = (p) => h2(o) ? o.value = p : null),
@@ -5470,7 +5471,7 @@ const z2 = U3, i0 = $3, P3 = ["single-select", "multi-select"], Z3 = [
                       }
                     ])
                   }, $(p.menuHeading), 3)) : A("", !0),
-                  (M(!0), f(Z, null, s2(p.items, (g, I) => (M(), f(Z, { key: I }, [
+                  (M(!0), f(Z, null, s2(p.items, (g, y) => (M(), f(Z, { key: y }, [
                     g.hidden ? A("", !0) : (M(), f("div", {
                       key: 0,
                       class: z([
@@ -5487,7 +5488,7 @@ const z2 = U3, i0 = $3, P3 = ["single-select", "multi-select"], Z3 = [
                           "spr-border spr-border-solid spr-border-ubas-400 spr-bg-ubas-50 spr-text-ubas-800": g.iconBgColor === "purple"
                         })
                       }, [
-                        g.icon ? (M(), F(d(G), {
+                        g.icon ? (M(), B(d(G), {
                           key: 0,
                           icon: g.icon,
                           class: "spr-h-[1em] spr-w-[1em] spr-text-[20px]"
@@ -5537,8 +5538,8 @@ const z2 = U3, i0 = $3, P3 = ["single-select", "multi-select"], Z3 = [
             })
           ])) : A("", !0),
           (M(!0), f(Z, null, s2(s.navLinks.top, (p, C) => (M(), f(Z, { key: C }, [
-            (M(!0), f(Z, null, s2(p.parentLinks, (g, I) => (M(), f(Z, { key: I }, [
-              g.menuLinks && g.menuLinks.length > 0 ? (M(), F(d(z2), {
+            (M(!0), f(Z, null, s2(p.parentLinks, (g, y) => (M(), f(Z, { key: y }, [
+              g.menuLinks && g.menuLinks.length > 0 ? (M(), B(d(z2), {
                 key: 0,
                 "aria-id": "sidenav-menu-wrapper",
                 distance: "18",
@@ -5550,16 +5551,16 @@ const z2 = U3, i0 = $3, P3 = ["single-select", "multi-select"], Z3 = [
                   j("div", bo, [
                     j("h3", vo, $(g.title), 1)
                   ]),
-                  (M(!0), f(Z, null, s2(g.menuLinks, (m, y) => (M(), f(Z, { key: y }, [
+                  (M(!0), f(Z, null, s2(g.menuLinks, (m, I) => (M(), f(Z, { key: I }, [
                     m.menuHeading ? (M(), f("h5", {
                       key: 0,
                       class: z({
                         "spr-label-xs-medium spr-text-color-supporting spr-m-0 spr-p-2": !0,
-                        "spr-mt-2": y !== 0
+                        "spr-mt-2": I !== 0
                       })
                     }, $(m.menuHeading), 3)) : A("", !0),
                     (M(!0), f(Z, null, s2(m.items, (h, b) => (M(), f(Z, { key: b }, [
-                      h.submenuLinks && h.submenuLinks.length > 0 ? (M(), F(d(z2), {
+                      h.submenuLinks && h.submenuLinks.length > 0 ? (M(), B(d(z2), {
                         key: 0,
                         "aria-id": "sidenav-submenu-wrapper",
                         distance: "4",
@@ -5568,15 +5569,15 @@ const z2 = U3, i0 = $3, P3 = ["single-select", "multi-select"], Z3 = [
                         "instant-move": ""
                       }, {
                         popper: W(() => [
-                          (M(!0), f(Z, null, s2(h.submenuLinks, (L, U) => (M(), f(Z, { key: U }, [
-                            L.subMenuHeading ? (M(), f("h5", {
+                          (M(!0), f(Z, null, s2(h.submenuLinks, (T, U) => (M(), f(Z, { key: U }, [
+                            T.subMenuHeading ? (M(), f("h5", {
                               key: 0,
                               class: z({
                                 "spr-label-xs-medium spr-text-color-supporting spr-m-0 spr-p-2": !0,
                                 "spr-mt-2": U !== 0
                               })
-                            }, $(L.subMenuHeading), 3)) : A("", !0),
-                            (M(!0), f(Z, null, s2(L.items, (_, Q) => (M(), F(d(z2), {
+                            }, $(T.subMenuHeading), 3)) : A("", !0),
+                            (M(!0), f(Z, null, s2(T.items, (_, Q) => (M(), B(d(z2), {
                               key: Q,
                               "aria-id": "sidenav-sub-submenu-wrapper",
                               triggers: ["click", "hover"],
@@ -5598,7 +5599,7 @@ const z2 = U3, i0 = $3, P3 = ["single-select", "multi-select"], Z3 = [
                                     _.title
                                   )
                                 }, [
-                                  W2(j("div", Lo, null, 512), [
+                                  J2(j("div", To, null, 512), [
                                     [$e, s.activeNav.submenu === _.title]
                                   ]),
                                   j("span", null, $(_.title), 1)
@@ -5635,10 +5636,10 @@ const z2 = U3, i0 = $3, P3 = ["single-select", "multi-select"], Z3 = [
                             "hover:spr-background-color-hover": s.activeNav.menu !== h.title,
                             "active:spr-background-color-pressed": !0
                           }),
-                          onClick: (L) => d(a)(h, g.title, h.title, "")
+                          onClick: (T) => d(a)(h, g.title, h.title, "")
                         }, [
                           j("span", null, $(h.title), 1)
-                        ], 10, To))
+                        ], 10, Lo))
                       ], 64))
                     ], 64))), 128))
                   ], 64))), 128))
@@ -5652,15 +5653,15 @@ const z2 = U3, i0 = $3, P3 = ["single-select", "multi-select"], Z3 = [
                       "active:spr-background-color-single-active active:spr-scale-90": !0
                     })
                   }, [
-                    g.icon && s.activeNav.parentNav !== g.title ? (M(), F(d(G), {
+                    g.icon && s.activeNav.parentNav !== g.title ? (M(), B(d(G), {
                       key: 0,
                       icon: g.icon,
                       class: "spr-h-[1.25em] spr-w-[1.25em]"
-                    }, null, 8, ["icon"])) : s.activeNav.parentNav === g.title ? (M(), F(d(G), {
+                    }, null, 8, ["icon"])) : s.activeNav.parentNav === g.title ? (M(), B(d(G), {
                       key: 1,
                       icon: `${g.icon}-fill`,
                       class: "spr-text-kangkong-700 spr-h-[1.25em] spr-w-[1.25em]"
-                    }, null, 8, ["icon"])) : (M(), F(d(G), {
+                    }, null, 8, ["icon"])) : (M(), B(d(G), {
                       key: 2,
                       icon: "ph:globe"
                     }))
@@ -5668,7 +5669,7 @@ const z2 = U3, i0 = $3, P3 = ["single-select", "multi-select"], Z3 = [
                 ]),
                 _: 2
               }, 1024)) : (M(), f(Z, { key: 1 }, [
-                g.hidden ? A("", !0) : (M(), F(d(i0), {
+                g.hidden ? A("", !0) : (M(), B(d(i0), {
                   key: 0,
                   "aria-id": "sidenav-tooltip-wrapper",
                   placement: "right",
@@ -5688,15 +5689,15 @@ const z2 = U3, i0 = $3, P3 = ["single-select", "multi-select"], Z3 = [
                       }),
                       onClick: (m) => d(a)(g, g.title, "", "")
                     }, [
-                      g.icon && s.activeNav.parentNav !== g.title ? (M(), F(d(G), {
+                      g.icon && s.activeNav.parentNav !== g.title ? (M(), B(d(G), {
                         key: 0,
                         icon: g.icon,
                         class: "spr-h-[1.25em] spr-w-[1.25em]"
-                      }, null, 8, ["icon"])) : s.activeNav.parentNav === g.title ? (M(), F(d(G), {
+                      }, null, 8, ["icon"])) : s.activeNav.parentNav === g.title ? (M(), B(d(G), {
                         key: 1,
                         icon: `${g.icon}-fill`,
                         class: "spr-text-kangkong-700 spr-h-[1.25em] spr-w-[1.25em]"
-                      }, null, 8, ["icon"])) : (M(), F(d(G), {
+                      }, null, 8, ["icon"])) : (M(), B(d(G), {
                         key: 2,
                         icon: "ph:globe"
                       }))
@@ -5711,8 +5712,8 @@ const z2 = U3, i0 = $3, P3 = ["single-select", "multi-select"], Z3 = [
         ]),
         s.navLinks.bottom && s.navLinks.bottom.length > 0 ? (M(), f("div", _o, [
           (M(!0), f(Z, null, s2(s.navLinks.bottom, (p, C) => (M(), f(Z, { key: C }, [
-            (M(!0), f(Z, null, s2(p.parentLinks, (g, I) => (M(), f(Z, { key: I }, [
-              g.menuLinks && g.menuLinks.length > 0 ? (M(), F(d(z2), {
+            (M(!0), f(Z, null, s2(p.parentLinks, (g, y) => (M(), f(Z, { key: y }, [
+              g.menuLinks && g.menuLinks.length > 0 ? (M(), B(d(z2), {
                 key: 0,
                 "aria-id": "sidenav-menu-wrapper",
                 distance: "18",
@@ -5724,16 +5725,16 @@ const z2 = U3, i0 = $3, P3 = ["single-select", "multi-select"], Z3 = [
                   j("div", Eo, [
                     j("h3", Yo, $(g.title), 1)
                   ]),
-                  (M(!0), f(Z, null, s2(g.menuLinks, (m, y) => (M(), f(Z, { key: y }, [
+                  (M(!0), f(Z, null, s2(g.menuLinks, (m, I) => (M(), f(Z, { key: I }, [
                     m.menuHeading ? (M(), f("h5", {
                       key: 0,
                       class: z({
                         "spr-label-xs-medium spr-text-color-supporting spr-m-0 spr-p-2": !0,
-                        "spr-mt-3": y !== 0
+                        "spr-mt-3": I !== 0
                       })
                     }, $(m.menuHeading), 3)) : A("", !0),
                     (M(!0), f(Z, null, s2(m.items, (h, b) => (M(), f(Z, { key: b }, [
-                      h.submenuLinks && h.submenuLinks.length > 0 ? (M(), F(d(z2), {
+                      h.submenuLinks && h.submenuLinks.length > 0 ? (M(), B(d(z2), {
                         key: 0,
                         "aria-id": "sidenav-submenu-wrapper",
                         distance: "4",
@@ -5742,15 +5743,15 @@ const z2 = U3, i0 = $3, P3 = ["single-select", "multi-select"], Z3 = [
                         "instant-move": ""
                       }, {
                         popper: W(() => [
-                          (M(!0), f(Z, null, s2(h.submenuLinks, (L, U) => (M(), f(Z, { key: U }, [
-                            L.subMenuHeading ? (M(), f("h5", {
+                          (M(!0), f(Z, null, s2(h.submenuLinks, (T, U) => (M(), f(Z, { key: U }, [
+                            T.subMenuHeading ? (M(), f("h5", {
                               key: 0,
                               class: z({
                                 "spr-label-xs-medium spr-text-color-supporting spr-m-0 spr-p-2": !0,
                                 "spr-mt-3": U !== 0
                               })
-                            }, $(L.subMenuHeading), 3)) : A("", !0),
-                            (M(!0), f(Z, null, s2(L.items, (_, Q) => (M(), F(d(z2), {
+                            }, $(T.subMenuHeading), 3)) : A("", !0),
+                            (M(!0), f(Z, null, s2(T.items, (_, Q) => (M(), B(d(z2), {
                               key: Q,
                               "aria-id": "sidenav-sub-submenu-wrapper",
                               triggers: ["click", "hover"],
@@ -5772,7 +5773,7 @@ const z2 = U3, i0 = $3, P3 = ["single-select", "multi-select"], Z3 = [
                                     _.title
                                   )
                                 }, [
-                                  W2(j("div", $o, null, 512), [
+                                  J2(j("div", $o, null, 512), [
                                     [$e, s.activeNav.submenu === _.title]
                                   ]),
                                   j("span", null, $(_.title), 1)
@@ -5809,7 +5810,7 @@ const z2 = U3, i0 = $3, P3 = ["single-select", "multi-select"], Z3 = [
                             "active:spr-background-color-pressed",
                             "last:spr-rounded-b-xl"
                           ]),
-                          onClick: (L) => d(a)(h, g.title, h.title, "")
+                          onClick: (T) => d(a)(h, g.title, h.title, "")
                         }, [
                           j("span", null, $(h.title), 1)
                         ], 8, Po))
@@ -5826,15 +5827,15 @@ const z2 = U3, i0 = $3, P3 = ["single-select", "multi-select"], Z3 = [
                       "active:spr-background-color-single-active active:spr-scale-90": !0
                     })
                   }, [
-                    g.icon && s.activeNav.parentNav !== g.title ? (M(), F(d(G), {
+                    g.icon && s.activeNav.parentNav !== g.title ? (M(), B(d(G), {
                       key: 0,
                       icon: g.icon,
                       class: "spr-h-[1.25em] spr-w-[1.25em]"
-                    }, null, 8, ["icon"])) : s.activeNav.parentNav === g.title ? (M(), F(d(G), {
+                    }, null, 8, ["icon"])) : s.activeNav.parentNav === g.title ? (M(), B(d(G), {
                       key: 1,
                       icon: `${g.icon}-fill`,
                       class: "spr-text-kangkong-700 spr-h-[1.25em] spr-w-[1.25em]"
-                    }, null, 8, ["icon"])) : (M(), F(d(G), {
+                    }, null, 8, ["icon"])) : (M(), B(d(G), {
                       key: 2,
                       icon: "ph:globe"
                     }))
@@ -5842,7 +5843,7 @@ const z2 = U3, i0 = $3, P3 = ["single-select", "multi-select"], Z3 = [
                 ]),
                 _: 2
               }, 1024)) : (M(), f(Z, { key: 1 }, [
-                g.hidden ? A("", !0) : (M(), F(d(i0), {
+                g.hidden ? A("", !0) : (M(), B(d(i0), {
                   key: 0,
                   "aria-id": "sidenav-tooltip-wrapper",
                   placement: "right",
@@ -5862,15 +5863,15 @@ const z2 = U3, i0 = $3, P3 = ["single-select", "multi-select"], Z3 = [
                       }),
                       onClick: (m) => d(a)(g, g.title, "", "")
                     }, [
-                      g.icon && s.activeNav.parentNav !== g.title ? (M(), F(d(G), {
+                      g.icon && s.activeNav.parentNav !== g.title ? (M(), B(d(G), {
                         key: 0,
                         icon: g.icon,
                         class: "spr-h-[1.25em] spr-w-[1.25em]"
-                      }, null, 8, ["icon"])) : s.activeNav.parentNav === g.title ? (M(), F(d(G), {
+                      }, null, 8, ["icon"])) : s.activeNav.parentNav === g.title ? (M(), B(d(G), {
                         key: 1,
                         icon: `${g.icon}-fill`,
                         class: "spr-text-kangkong-700 spr-h-[1.25em] spr-w-[1.25em]"
-                      }, null, 8, ["icon"])) : (M(), F(d(G), {
+                      }, null, 8, ["icon"])) : (M(), B(d(G), {
                         key: 2,
                         icon: "ph:globe"
                       }))
@@ -5908,7 +5909,7 @@ const z2 = U3, i0 = $3, P3 = ["single-select", "multi-select"], Z3 = [
                 icon: "ph:bell",
                 class: "spr-h-[1.25em] spr-w-[1.25em]"
               }),
-              s.notificationCount !== 0 ? (M(), F(K2, {
+              s.notificationCount !== 0 ? (M(), B($2, {
                 key: 0,
                 class: "spr-absolute -spr-top-0.5 spr-right-2.5",
                 text: String(s.notificationCount),
@@ -5942,7 +5943,7 @@ const z2 = U3, i0 = $3, P3 = ["single-select", "multi-select"], Z3 = [
                 icon: "ph:check-square",
                 class: "spr-h-[1.25em] spr-w-[1.25em]"
               }),
-              s.requestCount !== 0 ? (M(), F(K2, {
+              s.requestCount !== 0 ? (M(), B($2, {
                 key: 0,
                 class: "spr-absolute -spr-top-0.5 spr-right-2.5",
                 text: String(s.requestCount),
@@ -5993,7 +5994,7 @@ const z2 = U3, i0 = $3, P3 = ["single-select", "multi-select"], Z3 = [
                   ]),
                   onClick: (g) => d(a)(p, "", "", "")
                 }, [
-                  p.icon ? (M(), F(d(G), {
+                  p.icon ? (M(), B(d(G), {
                     key: 0,
                     icon: p.icon,
                     class: "spr-h-[1em] spr-w-[1em] spr-text-[20px]"
@@ -6058,7 +6059,7 @@ const z2 = U3, i0 = $3, P3 = ["single-select", "multi-select"], Z3 = [
     }
   ), F0(() => {
     document.addEventListener("click", u), window.addEventListener("keydown", p);
-  }), L1(() => {
+  }), T1(() => {
     document.removeEventListener("click", u), window.removeEventListener("keydown", p);
   }), {
     sidepanelRef: s,
@@ -6204,7 +6205,7 @@ const z2 = U3, i0 = $3, P3 = ["single-select", "multi-select"], Z3 = [
           }, [
             c.hideHeader ? A("", !0) : (M(), f(Z, { key: 0 }, [
               c.$slots.header ? (M(), f("div", f5, [
-                B(c.$slots, "header")
+                H(c.$slots, "header")
               ])) : (M(), f("div", M5, [
                 j("div", C5, $(c.headerTitle), 1),
                 J(d(G), {
@@ -6218,10 +6219,10 @@ const z2 = U3, i0 = $3, P3 = ["single-select", "multi-select"], Z3 = [
               id: "sidepanel-content",
               class: z(["spr-overflow-y-auto", { "spr-mb-[52px]": c.$slots.footer }])
             }, [
-              B(c.$slots, "default")
+              H(c.$slots, "default")
             ], 2),
             c.$slots.footer ? (M(), f("div", h5, [
-              B(c.$slots, "footer")
+              H(c.$slots, "footer")
             ])) : A("", !0)
           ], 6)) : A("", !0)
         ]),
@@ -6314,7 +6315,7 @@ const z2 = U3, i0 = $3, P3 = ["single-select", "multi-select"], Z3 = [
   emits: j5,
   setup(e, { emit: t }) {
     const s = e, r = t, { snackRef: o, snackProps: i, snackToneCssClass: n, snackIcon: l, handleClick: a } = m5(s, r);
-    return (c, u) => (M(), f("div", Z2(d(i), {
+    return (c, u) => (M(), f("div", H2(d(i), {
       ref_key: "snackRef",
       ref: o,
       class: "snackbar spr-background-color-inverted spr-text-color-inverted-strong spr-font-size-200 spr-line-height-400 spr-h-fit spr-rounded-border-radius-lg spr-px-size-spacing-2xs spr-py-size-spacing-3xs spr-border spr-border-solid spr-border-color-strong spr-box-border spr-flex spr-flex-row spr-items-center",
@@ -6363,14 +6364,14 @@ function v5() {
 function p1() {
   return typeof navigator < "u" && typeof window < "u" ? window : typeof globalThis < "u" ? globalThis : {};
 }
-const w5 = typeof Proxy == "function", x5 = "devtools-plugin:setup", L5 = "plugin:settings:set";
-let F2, Ie;
-function T5() {
+const w5 = typeof Proxy == "function", x5 = "devtools-plugin:setup", T5 = "plugin:settings:set";
+let B2, Ie;
+function L5() {
   var e;
-  return F2 !== void 0 || (typeof window < "u" && window.performance ? (F2 = !0, Ie = window.performance) : typeof globalThis < "u" && (!((e = globalThis.perf_hooks) === null || e === void 0) && e.performance) ? (F2 = !0, Ie = globalThis.perf_hooks.performance) : F2 = !1), F2;
+  return B2 !== void 0 || (typeof window < "u" && window.performance ? (B2 = !0, Ie = window.performance) : typeof globalThis < "u" && (!((e = globalThis.perf_hooks) === null || e === void 0) && e.performance) ? (B2 = !0, Ie = globalThis.perf_hooks.performance) : B2 = !1), B2;
 }
 function O5() {
-  return T5() ? Ie.now() : Date.now();
+  return L5() ? Ie.now() : Date.now();
 }
 class k5 {
   constructor(t, s) {
@@ -6402,7 +6403,7 @@ class k5 {
       now() {
         return O5();
       }
-    }, s && s.on(L5, (n, l) => {
+    }, s && s.on(T5, (n, l) => {
       n === this.plugin.id && this.fallbacks.setSettings(l);
     }), this.proxiedOn = new Proxy({}, {
       get: (n, l) => this.target ? this.target.on[l] : (...a) => {
@@ -6457,7 +6458,7 @@ const I0 = (e) => n0 = e, g1 = process.env.NODE_ENV !== "production" ? Symbol("p
   /* istanbul ignore next */
   Symbol()
 );
-function P2(e) {
+function Z2(e) {
   return e && typeof e == "object" && Object.prototype.toString.call(e) === "[object Object]" && typeof e.toJSON != "function";
 }
 var y2;
@@ -6698,7 +6699,7 @@ function B5(e) {
       return "unknown";
   }
 }
-let R2 = !0;
+let G2 = !0;
 const E0 = [], Y2 = "pinia:mutations", a2 = "pinia", { assign: R5 } = Object, V0 = (e) => "🍍 " + e;
 function G5(e, t) {
   d1({
@@ -6816,7 +6817,7 @@ function G5(e, t) {
         if (!i)
           return i2(`store "${r.nodeId}" not found`, "error");
         const { path: n } = r;
-        Qe(i) ? n.unshift("state") : (n.length !== 1 || !i._customProperties.has(n[0]) || n[0] in i.$state) && n.unshift("$state"), R2 = !1, r.set(i, n, r.state.value), R2 = !0;
+        Qe(i) ? n.unshift("state") : (n.length !== 1 || !i._customProperties.has(n[0]) || n[0] in i.$state) && n.unshift("$state"), G2 = !1, r.set(i, n, r.state.value), G2 = !0;
       }
     }), s.on.editComponentState((r) => {
       if (r.type.startsWith("🍍")) {
@@ -6828,7 +6829,7 @@ function G5(e, t) {
           return i2(`Invalid path for store "${o}":
 ${n}
 Only state can be modified.`);
-        n[0] = "$state", R2 = !1, r.set(i, n, r.state.value), R2 = !0;
+        n[0] = "$state", G2 = !1, r.set(i, n, r.state.value), G2 = !0;
       }
     });
   });
@@ -6907,7 +6908,7 @@ function W5(e, t) {
       });
     }, !0), t._customProperties.forEach((n) => {
       I2(() => d(t[n]), (l, a) => {
-        s.notifyComponentUpdate(), s.sendInspectorState(a2), R2 && s.addTimelineEvent({
+        s.notifyComponentUpdate(), s.sendInspectorState(a2), G2 && s.addTimelineEvent({
           layerId: Y2,
           event: {
             time: r(),
@@ -6922,7 +6923,7 @@ function W5(e, t) {
         });
       }, { deep: !0 });
     }), t.$subscribe(({ events: n, type: l }, a) => {
-      if (s.notifyComponentUpdate(), s.sendInspectorState(a2), !R2)
+      if (s.notifyComponentUpdate(), s.sendInspectorState(a2), !G2)
         return;
       const c = {
         time: r(),
@@ -6998,7 +6999,7 @@ function J5({ app: e, store: t, options: s }) {
   }
 }
 function K5() {
-  const e = Lt(!0), t = e.run(() => q({}));
+  const e = Tt(!0), t = e.run(() => q({}));
   let s = [], r = [];
   const o = Q2({
     install(i) {
@@ -7023,7 +7024,7 @@ function j1(e, t) {
     if (!(s in e))
       continue;
     const o = e[s];
-    P2(o) && P2(r) && !h2(r) && !be(r) ? e[s] = j1(o, r) : e[s] = r;
+    Z2(o) && Z2(r) && !h2(r) && !be(r) ? e[s] = j1(o, r) : e[s] = r;
   }
   return e;
 }
@@ -7037,7 +7038,7 @@ function yt(e, t, s, r = m1) {
   };
   return !s && bt() && vt(o), o;
 }
-function B2(e, ...t) {
+function R2(e, ...t) {
   e.slice().forEach((s) => {
     s(...t);
   });
@@ -7049,7 +7050,7 @@ function je(e, t) {
     if (!t.hasOwnProperty(s))
       continue;
     const r = t[s], o = e[s];
-    P2(o) && P2(r) && e.hasOwnProperty(s) && !h2(r) && !be(r) ? e[s] = je(o, r) : e[s] = r;
+    Z2(o) && Z2(r) && e.hasOwnProperty(s) && !h2(r) && !be(r) ? e[s] = je(o, r) : e[s] = r;
   }
   return e;
 }
@@ -7058,7 +7059,7 @@ const q5 = process.env.NODE_ENV !== "production" ? Symbol("pinia:skipHydration")
   Symbol()
 );
 function ei(e) {
-  return !P2(e) || !e.hasOwnProperty(q5);
+  return !Z2(e) || !e.hasOwnProperty(q5);
 }
 const { assign: d2 } = Object;
 function jt(e) {
@@ -7091,10 +7092,10 @@ function me(e, t, s = {}, r, o, i) {
     c ? g = N : c == !1 && !v._hotUpdating && (Array.isArray(g) ? g.push(N) : console.error("🍍 debuggerEvents should be an array. This is most likely an internal Pinia bug."));
   });
   let c, u, p = [], C = [], g;
-  const I = r.state.value[e];
-  !i && !I && (process.env.NODE_ENV === "production" || !o) && (r.state.value[e] = {});
+  const y = r.state.value[e];
+  !i && !y && (process.env.NODE_ENV === "production" || !o) && (r.state.value[e] = {});
   const m = q({});
-  let y;
+  let I;
   function h(N) {
     let D;
     c = u = !1, process.env.NODE_ENV !== "production" && (g = []), typeof N == "function" ? (N(r.state.value[e]), D = {
@@ -7107,10 +7108,10 @@ function me(e, t, s = {}, r, o, i) {
       storeId: e,
       events: g
     });
-    const R = y = Symbol();
+    const R = I = Symbol();
     Q0().then(() => {
-      y === R && (c = !0);
-    }), u = !0, B2(p, D, r.state.value[e]);
+      I === R && (c = !0);
+    }), u = !0, R2(p, D, r.state.value[e]);
   }
   const b = i ? function() {
     const { state: D } = s, R = D ? D() : {};
@@ -7123,7 +7124,7 @@ function me(e, t, s = {}, r, o, i) {
       throw new Error(`🍍: Store "${e}" is built using the setup syntax and does not implement $reset().`);
     } : m1
   );
-  function L() {
+  function T() {
     n.stop(), p = [], C = [], r._s.delete(e);
   }
   const U = (N, D = "") => {
@@ -7131,14 +7132,14 @@ function me(e, t, s = {}, r, o, i) {
       return N[ce] = D, N;
     const R = function() {
       I0(r);
-      const e2 = Array.from(arguments), k = [], T = [];
+      const e2 = Array.from(arguments), k = [], L = [];
       function w(E) {
         k.push(E);
       }
       function S(E) {
-        T.push(E);
+        L.push(E);
       }
-      B2(C, {
+      R2(C, {
         args: e2,
         name: R[ce],
         store: v,
@@ -7149,9 +7150,9 @@ function me(e, t, s = {}, r, o, i) {
       try {
         x = N.apply(this && this.$id === e ? this : v, e2);
       } catch (E) {
-        throw B2(T, E), E;
+        throw R2(L, E), E;
       }
-      return x instanceof Promise ? x.then((E) => (B2(k, E), E)).catch((E) => (B2(T, E), Promise.reject(E))) : (B2(k, x), x);
+      return x instanceof Promise ? x.then((E) => (R2(k, E), E)).catch((E) => (R2(L, E), Promise.reject(E))) : (R2(k, x), x);
     };
     return R[It] = !0, R[ce] = D, R;
   }, _ = /* @__PURE__ */ Q2({
@@ -7176,7 +7177,7 @@ function me(e, t, s = {}, r, o, i) {
       }, d2({}, a, D)));
       return R;
     },
-    $dispose: L
+    $dispose: T
   }, v = k1(process.env.NODE_ENV !== "production" || process.env.NODE_ENV !== "production" && process.env.NODE_ENV !== "test" && w2 ? d2(
     {
       _hmrPayload: _,
@@ -7188,11 +7189,11 @@ function me(e, t, s = {}, r, o, i) {
     // setupStore
   ) : Q);
   r._s.set(e, v);
-  const P = (r._a && r._a.runWithContext || X5)(() => r._e.run(() => (n = Lt()).run(() => t({ action: U }))));
+  const P = (r._a && r._a.runWithContext || X5)(() => r._e.run(() => (n = Tt()).run(() => t({ action: U }))));
   for (const N in P) {
     const D = P[N];
     if (h2(D) && !jt(D) || be(D))
-      process.env.NODE_ENV !== "production" && o ? v0(m.value, N, se(P, N)) : i || (I && ei(D) && (h2(D) ? D.value = I[N] : je(D, I[N])), r.state.value[e][N] = D), process.env.NODE_ENV !== "production" && _.state.push(N);
+      process.env.NODE_ENV !== "production" && o ? v0(m.value, N, se(P, N)) : i || (y && ei(D) && (h2(D) ? D.value = y[N] : je(D, y[N])), r.state.value[e][N] = D), process.env.NODE_ENV !== "production" && _.state.push(N);
     else if (typeof D == "function") {
       const R = process.env.NODE_ENV !== "production" && o ? D : U(D, N);
       P[N] = R, process.env.NODE_ENV !== "production" && (_.actions[N] = D), l.actions[N] = D;
@@ -7215,7 +7216,7 @@ function me(e, t, s = {}, r, o, i) {
     v._hotUpdating = !0, N._hmrPayload.state.forEach((D) => {
       if (D in v.$state) {
         const R = N.$state[D], e2 = v.$state[D];
-        typeof R == "object" && P2(R) && P2(e2) ? j1(R, e2) : N.$state[D] = e2;
+        typeof R == "object" && Z2(R) && Z2(e2) ? j1(R, e2) : N.$state[D] = e2;
       }
       v0(v, D, se(N.$state, D));
     }), Object.keys(v.$state).forEach((D) => {
@@ -7268,7 +7269,7 @@ function me(e, t, s = {}, r, o, i) {
       })));
   }), process.env.NODE_ENV !== "production" && v.$state && typeof v.$state == "object" && typeof v.$state.constructor == "function" && !v.$state.constructor.toString().includes("[native code]") && console.warn(`[🍍]: The "state" must be a plain object. It cannot be
 	state: () => new MyClass()
-Found in store "${v.$id}".`), I && i && s.hydrate && s.hydrate(v.$state, I), c = !0, u = !0, v;
+Found in store "${v.$id}".`), y && i && s.hydrate && s.hydrate(v.$state, y), c = !0, u = !0, v;
 }
 /*! #__NO_SIDE_EFFECTS__ */
 // @__NO_SIDE_EFFECTS__
@@ -7277,7 +7278,7 @@ function ti(e, t, s) {
   const i = typeof t == "function";
   r = e, o = i ? s : t;
   function n(l, a) {
-    const c = T1();
+    const c = L1();
     if (l = // in test mode, ignore the argument provided as we can always retrieve a
     // pinia instance with getActivePinia()
     (process.env.NODE_ENV === "test" && n0 && n0._testing ? null : l) || (c ? O1(g1, null) : null), l && I0(l), process.env.NODE_ENV !== "production" && !n0)
@@ -7353,7 +7354,7 @@ const si = (e) => ({
       showInformation: (c) => n(c),
       showDanger: (c) => l(c),
       showCaution: (c) => a(c)
-    }), (c, u) => (M(), F(S1, { to: "body" }, [
+    }), (c, u) => (M(), B(S1, { to: "body" }, [
       J(xt, { name: "snackbar" }, {
         default: W(() => [
           d(r).snacks.length > 0 ? (M(), f("div", oi, [
@@ -7438,7 +7439,7 @@ const si = (e) => ({
   props: ui,
   setup(e) {
     const t = e, { statusIcon: s, statusClass: r, statusDescription: o, statusSize: i } = pi(t);
-    return (n, l) => (M(), F(d(G), {
+    return (n, l) => (M(), B(d(G), {
       icon: d(s),
       class: z([d(r), d(i)]),
       "aria-label": d(o)
@@ -7472,7 +7473,7 @@ const si = (e) => ({
     default: !1
   }
 }, fi = ["update:modelValue"], hi = (e) => {
-  const t = q(null), s = q(null), r = Te(t), { pressed: o } = Ft({ target: s }), { disabled: i, state: n, modelValue: l } = n2(e), a = Y(() => ({
+  const t = q(null), s = q(null), r = Le(t), { pressed: o } = Ft({ target: s }), { disabled: i, state: n, modelValue: l } = n2(e), a = Y(() => ({
     ...i.value && { ariaDisabled: !0 },
     disabled: i.value,
     autofocus: n.value === "hover",
@@ -7496,11 +7497,11 @@ const si = (e) => ({
       "spr-opacity-60"
     );
   }
-  const I = Y(() => e.disabled ? "spr-text-color-disabled" : "spr-text-color-strong"), m = Y(() => O(
+  const y = Y(() => e.disabled ? "spr-text-color-disabled" : "spr-text-color-strong"), m = Y(() => O(
     "spr-transition-colors",
     "before:spr-transition-all before:spr-duration-150",
     "after:spr-transition-all after:spr-duration-150"
-  )), y = Y(() => O(c.value, m.value)), h = Y(() => O({
+  )), I = Y(() => O(c.value, m.value)), h = Y(() => O({
     "spr-cursor-not-allowed": e.disabled,
     "spr-cursor-pointer": !e.disabled
   }));
@@ -7508,8 +7509,8 @@ const si = (e) => ({
     switchWrapperRef: t,
     switchRef: s,
     switchProps: a,
-    switchMarkClass: y,
-    switchTextClass: I,
+    switchMarkClass: I,
+    switchTextClass: y,
     switchInputClass: h
   };
 }, Ni = ["disabled"], Di = /* @__PURE__ */ X({
@@ -7518,12 +7519,12 @@ const si = (e) => ({
   emits: fi,
   setup(e, { emit: t }) {
     const s = e, o = m0(s, "modelValue", t), { switchWrapperRef: i, switchRef: n, switchProps: l, switchMarkClass: a, switchTextClass: c, switchInputClass: u } = hi(s);
-    return (p, C) => (M(), f("div", Z2(d(l), {
+    return (p, C) => (M(), f("div", H2(d(l), {
       class: ["spr-flex spr-items-center spr-gap-2", d(c)]
     }), [
       j("label", null, [
-        B(p.$slots, "leftText", {}, () => [
-          B(p.$slots, "default", {}, void 0, !0)
+        H(p.$slots, "leftText", {}, () => [
+          H(p.$slots, "default", {}, void 0, !0)
         ], !0)
       ]),
       j("div", {
@@ -7534,7 +7535,7 @@ const si = (e) => ({
           "spr-cursor-pointer spr-transition spr-duration-300 spr-ease-in-out active:spr-scale-90": !s.disabled
         })
       }, [
-        W2(j("input", {
+        J2(j("input", {
           ref_key: "switchRef",
           ref: n,
           "onUpdate:modelValue": C[0] || (C[0] = (g) => h2(o) ? o.value = g : null),
@@ -7556,14 +7557,14 @@ const si = (e) => ({
         }, null, 2)
       ], 2),
       j("label", null, [
-        B(p.$slots, "rightText", {}, void 0, !0)
+        H(p.$slots, "rightText", {}, void 0, !0)
       ])
     ], 16));
   }
 }), yi = /* @__PURE__ */ q2(Di, [["__scopeId", "data-v-83ea5712"]]), Ii = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
   __proto__: null,
   default: yi
-}, Symbol.toStringTag, { value: "Module" })), ji = {
+}, Symbol.toStringTag, { value: "Module" })), ji = ["asc", "desc"], mi = {
   /**
    * @description Action Column,
    */
@@ -7597,148 +7598,163 @@ const si = (e) => ({
   loading: {
     type: Boolean,
     default: !1
-  }
-}, mi = (e) => {
-  const { dataTable: t, action: s, headers: r } = n2(e), o = q(""), i = q("asc"), n = Y(() => o.value ? [...t.value].sort((u, p) => {
-    const C = u[o.value].title.toLowerCase(), g = p[o.value].title.toLowerCase();
-    return C < g ? i.value === "asc" ? -1 : 1 : C > g ? i.value === "asc" ? 1 : -1 : 0;
-  }) : t.value), l = (c) => {
-    o.value === c ? i.value = i.value === "asc" ? "desc" : "asc" : (o.value = c, i.value = "asc");
-  }, a = Y(() => s.value ? r.value.length + 1 : r.value.length);
+  },
+  sortOrder: {
+    type: String,
+    validator: (e) => ji.includes(e),
+    default: "asc"
+  }
+}, zi = ["onSort"], Ai = (e, t) => {
+  const { dataTable: s, action: r, headers: o, sortOrder: i } = n2(e), n = q(""), l = q("asc"), a = Y(() => n.value ? [...s.value].sort((C, g) => {
+    const y = C[n.value].title.toLowerCase(), m = g[n.value].title.toLowerCase();
+    return y < m ? l.value === "asc" ? -1 : 1 : y > m ? l.value === "asc" ? 1 : -1 : 0;
+  }) : s.value), c = (p) => {
+    n.value === p ? l.value = i.value ? i.value : l.value === "asc" ? "desc" : "asc" : (n.value = p, l.value = i.value ? i.value : "asc"), t("onSort", { field: p, sortOrder: l.value });
+  }, u = Y(() => r.value ? o.value.length + 1 : o.value.length);
   return {
-    sortedData: n,
-    getHeaderCount: a,
-    sortData: l
+    sortedData: a,
+    getHeaderCount: u,
+    sortData: c
   };
-}, zi = { class: "spr-table-wrapper spr-border-color-weak spr-w-full spr-overflow-hidden spr-rounded-border-radius-lg spr-border spr-border-solid" }, Ai = { class: "spr-h-[400px]" }, bi = {
+}, bi = { class: "spr-table-wrapper spr-border-color-weak spr-w-full spr-overflow-hidden spr-rounded-border-radius-lg spr-border spr-border-solid" }, vi = { class: "spr-h-[400px]" }, wi = {
   "aria-describedby": "describe",
   class: "spr-w-full spr-table-fixed",
   cellspacing: "0",
   cellpadding: "0"
-}, vi = { class: "spr-flex spr-flex-row spr-items-center spr-gap-size-spacing-5xs" }, wi = ["onClick"], xi = ["onClick"], Li = {
+}, xi = { class: "spr-flex spr-flex-row spr-items-center spr-gap-size-spacing-5xs" }, Ti = ["onClick"], Li = { key: 0 }, Oi = ["onClick"], ki = {
   key: 0,
   class: /* @__PURE__ */ z([
     "spr-background-color-surface spr-min-h-12 spr-py-size-spacing-3xs",
     "spr-text-color-strong spr-font-size-100 spr-font-line-height-100 spr-font-letter-spacing-normal spr-text-start spr-font-medium spr-uppercase",
     "spr-border-color-weak spr-border-x-0 spr-border-y spr-border-solid"
   ])
-}, Ti = { key: 0 }, Oi = {
+}, Si = { key: 0 }, _i = {
   key: 0,
   class: "spr-flex spr-flex-row spr-items-center spr-gap-2"
-}, ki = {
+}, Ei = {
   key: 0,
   class: "spr-text-color-base spr-text-xs spr-font-normal"
-}, Si = {
+}, Yi = {
   key: 0,
   class: "spr-border-color-weak spr-overflow-hidden spr-border-x-0 spr-border-b spr-border-t-0 spr-border-solid"
-}, _i = { class: "spr-flex spr-items-center" }, Ei = { key: 1 }, Yi = { key: 0 }, Qi = ["colspan"], Ui = { key: 1 }, $i = ["colspan"], Pi = {
-  key: 0,
-  class: "spr-flex spr-items-center spr-justify-center"
-}, Zi = /* @__PURE__ */ X({
+}, Qi = { class: "spr-flex spr-items-center" }, Ui = { key: 1 }, $i = { key: 0 }, Pi = ["colspan"], Zi = { key: 1 }, Hi = ["colspan"], Vi = /* @__PURE__ */ X({
   __name: "table",
-  props: ji,
-  setup(e) {
-    const t = e, { sortedData: s, sortData: r, getHeaderCount: o } = mi(t);
-    return (i, n) => (M(), f("div", zi, [
-      i.$slots.default ? (M(), f("div", {
+  props: mi,
+  emits: zi,
+  setup(e, { emit: t }) {
+    const s = e, r = t, { sortedData: o, sortData: i, getHeaderCount: n } = Ai(s, r);
+    return (l, a) => (M(), f("div", bi, [
+      l.$slots.default ? (M(), f("div", {
         key: 0,
-        class: z([{ "spr-px-size-spacing-sm spr-py-size-spacing-xs": !!i.$slots.default }])
+        class: z([{ "spr-px-size-spacing-sm spr-py-size-spacing-xs": !!l.$slots.default }])
       }, [
-        B(i.$slots, "default")
+        H(l.$slots, "default")
       ], 2)) : A("", !0),
-      j("div", Ai, [
-        j("table", bi, [
+      j("div", vi, [
+        j("table", wi, [
           j("thead", null, [
             j("tr", null, [
-              (M(!0), f(Z, null, s2(i.headers, (l, a) => (M(), f("th", {
-                key: a,
+              (M(!0), f(Z, null, s2(l.headers, (c, u) => (M(), f("th", {
+                key: u,
                 class: z([
                   "spr-background-color-surface spr-min-h-12 spr-px-size-spacing-2xs spr-py-size-spacing-3xs",
                   "spr-text-color-strong spr-font-size-100 spr-font-line-height-100 spr-font-letter-spacing-normal spr-text-start spr-font-medium spr-uppercase",
                   "spr-border-color-weak spr-border-x-0 spr-border-y spr-border-solid",
                   {
-                    "spr-cursor-pointer": l.sort,
-                    "spr-border-t-0": !i.$slots.default
+                    "spr-cursor-pointer": c.sort,
+                    "spr-border-t-0": !l.$slots.default
                   }
                 ])
               }, [
-                j("div", vi, [
+                j("div", xi, [
                   j("span", {
-                    onClick: (c) => l.sort && d(r)(l.field)
-                  }, $(l.name), 9, wi),
-                  l.sort ? (M(), f("span", {
-                    key: 0,
+                    onClick: (p) => c.sort && d(i)(c.field)
+                  }, $(c.name), 9, Ti),
+                  c.badgeText ? (M(), f("span", Li, [
+                    J($2, {
+                      text: c.badgeText,
+                      variant: c.badgeVariant,
+                      size: "small"
+                    }, null, 8, ["text", "variant"])
+                  ])) : A("", !0),
+                  c.sort ? (M(), f("span", {
+                    key: 1,
                     class: "spr-flex spr-flex-row spr-items-center",
-                    onClick: (c) => l.sort && d(r)(l.field)
+                    onClick: (p) => c.sort && d(i)(c.field)
                   }, [
                     J(d(G), { icon: "ph:caret-up-down-light" })
-                  ], 8, xi)) : A("", !0)
+                  ], 8, Oi)) : A("", !0)
                 ])
               ], 2))), 128)),
-              i.action ? (M(), f("th", Li, [
-                B(i.$slots, "action-name", { class: "spr-background-color-surface spr-text-color-strong spr-font-size-100 spr-font-line-height-100 spr-font-letter-spacing-normal spr-uppercase" })
+              l.action ? (M(), f("th", ki, [
+                H(l.$slots, "action-name", { class: "spr-background-color-surface spr-text-color-strong spr-font-size-100 spr-font-line-height-100 spr-font-letter-spacing-normal spr-uppercase" })
               ])) : A("", !0)
             ])
           ]),
-          d(s).length > 0 && !i.loading ? (M(), f("tbody", Ti, [
-            (M(!0), f(Z, null, s2(d(s), (l, a) => (M(), f("tr", {
-              key: a,
+          d(o).length > 0 && !l.loading ? (M(), f("tbody", Si, [
+            (M(!0), f(Z, null, s2(d(o), (c, u) => (M(), f("tr", {
+              key: u,
               class: "hover:spr-background-color-hover spr-min-h-[60px]"
             }, [
-              (M(!0), f(Z, null, s2(i.headers, (c, u) => (M(), f("td", {
-                key: u,
+              (M(!0), f(Z, null, s2(l.headers, (p, C) => (M(), f("td", {
+                key: C,
                 class: "spr-border-color-weak spr-overflow-hidden spr-border-x-0 spr-border-b spr-border-t-0 spr-border-solid spr-p-3"
               }, [
-                d(s)[a][c.field] ? (M(), f("div", Oi, [
-                  c.hasAvatar && d(s)[a][c.field].image ? (M(), F(Vt, {
+                d(o)[u][p.field] ? (M(), f("div", _i, [
+                  p.hasAvatar ? (M(), B(Vt, {
                     key: 0,
                     size: "lg",
-                    src: d(s)[a][c.field].image,
-                    alt: "User Avatar"
-                  }, null, 8, ["src"])) : A("", !0),
+                    src: d(o)[u][p.field].image,
+                    alt: "User Avatar",
+                    variant: d(o)[u][p.field].image ? "image" : "initial",
+                    initial: d(o)[u][p.field].title
+                  }, null, 8, ["src", "variant", "initial"])) : A("", !0),
                   j("div", null, [
                     j("div", {
                       class: z([
                         "spr-text-color-strong spr-font-size-200 spr-font-normal",
-                        { "spr-text-color-strong spr-body-sm-regular-medium": c.hasSubtext }
+                        { "spr-text-color-strong spr-body-sm-regular-medium": p.hasSubtext }
                       ])
-                    }, $(d(s)[a][c.field].title), 3),
-                    c.hasSubtext ? (M(), f("div", ki, $(d(s)[a][c.field].subtext), 1)) : A("", !0)
+                    }, $(d(o)[u][p.field].title), 3),
+                    p.hasSubtext ? (M(), f("div", Ei, $(d(o)[u][p.field].subtext), 1)) : A("", !0)
                   ])
                 ])) : A("", !0)
               ]))), 128)),
-              i.action ? (M(), f("td", Si, [
-                j("div", _i, [
-                  B(i.$slots, "action", { row: l })
+              l.action ? (M(), f("td", Yi, [
+                j("div", Qi, [
+                  H(l.$slots, "action", { row: c })
                 ])
               ])) : A("", !0)
             ]))), 128))
-          ])) : (M(), f("tbody", Ei, [
-            i.loading ? (M(), f("tr", Ui, [
+          ])) : (M(), f("tbody", Ui, [
+            l.loading ? (M(), f("tr", Zi, [
               j("td", {
-                colspan: d(o),
+                colspan: d(n),
                 class: "spr-overflow-hidden"
               }, [
-                i.$slots.loading ? A("", !0) : (M(), f("div", Pi, "Loading...")),
-                B(i.$slots, "loading", { class: "" })
-              ], 8, $i)
-            ])) : (M(), f("tr", Yi, [
+                H(l.$slots, "loading", {}, () => [
+                  a[0] || (a[0] = j("div", { class: "spr-flex spr-items-center spr-justify-center" }, "Loading...", -1))
+                ])
+              ], 8, Hi)
+            ])) : (M(), f("tr", $i, [
               j("td", {
-                colspan: d(o),
+                colspan: d(n),
                 class: "spr-overflow-hidden"
               }, [
-                J(c1)
-              ], 8, Qi)
+                H(l.$slots, "empty-state", {}, () => [
+                  J(c1)
+                ])
+              ], 8, Pi)
             ]))
           ]))
         ])
       ])
     ]));
   }
-}), Hi = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
+}), Fi = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
   __proto__: null,
-  default: Zi
-}, Symbol.toStringTag, { value: "Module" })), Vi = {
+  default: Vi
+}, Symbol.toStringTag, { value: "Module" })), Bi = {
   /**
    * @description Tabs List,
    * option list: label, icon, iconFill, disabled
@@ -7761,9 +7777,9 @@ const si = (e) => ({
     type: String,
     default: ""
   }
-}, Fi = {
+}, Ri = {
   tabIndex: (e) => typeof e == "number"
-}, Bi = (e, t) => {
+}, Gi = (e, t) => {
   const s = Y(() => O({
     "spr-relative spr-px-size-spacing-xs spr-py-size-spacing-3xs spr-body-sm spr-text-color-strong spr-group": !0,
     "spr-transition-left spr-duration-150 spr-ease-in-out": !0,
@@ -7802,13 +7818,13 @@ const si = (e) => ({
     tabElements: i,
     updateSelectedTabIndex: n
   };
-}, Ri = { class: "spr-relative spr-flex" }, Gi = ["onClick"], Wi = { key: 0 }, Ji = { key: 1 }, Ki = /* @__PURE__ */ X({
+}, Wi = { class: "spr-relative spr-flex" }, Ji = ["onClick"], Ki = { key: 0 }, Xi = { key: 1 }, qi = /* @__PURE__ */ X({
   __name: "tabs",
-  props: Vi,
-  emits: Fi,
+  props: Bi,
+  emits: Ri,
   setup(e, { emit: t }) {
-    const s = t, r = e, { tabsClasses: o, activeTab: i, tabElements: n, updateSelectedTabIndex: l } = Bi(r, s);
-    return (a, c) => (M(), f("div", Ri, [
+    const s = t, r = e, { tabsClasses: o, activeTab: i, tabElements: n, updateSelectedTabIndex: l } = Gi(r, s);
+    return (a, c) => (M(), f("div", Wi, [
       (M(!0), f(Z, null, s2(a.list, (u, p) => (M(), f("div", {
         key: p,
         ref_for: !0,
@@ -7853,7 +7869,7 @@ const si = (e) => ({
             "spr-cursor-not-allowed": u.disabled
           })
         }, [
-          u.icon ? (M(), f("div", Wi, [
+          u.icon ? (M(), f("div", Ki, [
             J(d(G), {
               class: z({
                 "spr-body-sm-regular": !0,
@@ -7862,9 +7878,9 @@ const si = (e) => ({
               icon: d(i).index === p && typeof u.iconFill == "string" ? u.iconFill : u.icon
             }, null, 8, ["class", "icon"])
           ])) : A("", !0),
-          u.label ? (M(), f("div", Ji, $(u.label), 1)) : A("", !0)
+          u.label ? (M(), f("div", Xi, $(u.label), 1)) : A("", !0)
         ], 2)
-      ], 10, Gi))), 128)),
+      ], 10, Ji))), 128)),
       a.underlined ? (M(), f("div", {
         key: 0,
         class: z([
@@ -7878,10 +7894,10 @@ const si = (e) => ({
       }, null, 4)) : A("", !0)
     ]));
   }
-}), Xi = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
+}), en = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
   __proto__: null,
-  default: Ki
-}, Symbol.toStringTag, { value: "Module" })), qi = {
+  default: qi
+}, Symbol.toStringTag, { value: "Module" })), tn = {
   modelValue: {
     type: String,
     default: ""
@@ -7918,9 +7934,9 @@ const si = (e) => ({
     type: String,
     default: ""
   }
-}, en = {
+}, sn = {
   "update:modelValue": (e) => e instanceof KeyboardEvent
-}, tn = (e, t) => {
+}, rn = (e, t) => {
   const { error: s, disabled: r, readonly: o } = n2(e), i = m0(e, "modelValue", t);
   return {
     textareaClasses: Y(() => {
@@ -7948,12 +7964,12 @@ const si = (e) => ({
       i.value = c.value;
     }
   };
-}, sn = ["for"], rn = ["disabled", "rows", "placeholder", "readonly"], on = /* @__PURE__ */ X({
+}, on = ["for"], nn = ["disabled", "rows", "placeholder", "readonly"], ln = /* @__PURE__ */ X({
   __name: "textarea",
-  props: qi,
-  emits: en,
+  props: tn,
+  emits: sn,
   setup(e, { emit: t }) {
-    const s = e, r = t, { onInput: o, textareaClasses: i } = tn(s, r);
+    const s = e, r = t, { onInput: o, textareaClasses: i } = rn(s, r);
     return (n, l) => (M(), f("div", {
       class: z(d(i).wrapperClasses)
     }, [
@@ -7961,8 +7977,8 @@ const si = (e) => ({
         key: 0,
         for: n.id,
         class: z(d(i).labelClasses)
-      }, $(n.label), 11, sn)) : A("", !0),
-      W2(j("textarea", Z2({
+      }, $(n.label), 11, on)) : A("", !0),
+      J2(j("textarea", H2({
         "onUpdate:modelValue": l[0] || (l[0] = (a) => n.modelValue = a),
         class: d(i).textAreaClasses
       }, n.$attrs, {
@@ -7972,8 +7988,8 @@ const si = (e) => ({
         readonly: n.readonly,
         onInput: l[1] || (l[1] = //@ts-ignore
         (...a) => d(o) && d(o)(...a))
-      }), null, 16, rn), [
-        [Tt, n.modelValue]
+      }), null, 16, nn), [
+        [Lt, n.modelValue]
       ]),
       n.error ? (M(), f("div", {
         key: 1,
@@ -7984,10 +8000,10 @@ const si = (e) => ({
       ], 2)) : A("", !0)
     ], 2));
   }
-}), nn = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
+}), an = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
   __proto__: null,
-  default: on
-}, Symbol.toStringTag, { value: "Module" })), ln = {
+  default: ln
+}, Symbol.toStringTag, { value: "Module" })), cn = {
   modelValue: {
     type: String,
     required: !0
@@ -8032,107 +8048,107 @@ const si = (e) => ({
     type: Boolean,
     default: !1
   }
-}, an = {
+}, un = {
   "update:modelValue": (e) => e instanceof MouseEvent
 };
-var Y0 = { exports: {} }, cn = Y0.exports, zt;
-function un() {
+var Y0 = { exports: {} }, pn = Y0.exports, zt;
+function dn() {
   return zt || (zt = 1, function(e, t) {
     (function(s, r) {
       e.exports = r();
-    })(cn, function() {
-      var s = 1e3, r = 6e4, o = 36e5, i = "millisecond", n = "second", l = "minute", a = "hour", c = "day", u = "week", p = "month", C = "quarter", g = "year", I = "date", m = "Invalid Date", y = /^(\d{4})[-/]?(\d{1,2})?[-/]?(\d{0,2})[Tt\s]*(\d{1,2})?:?(\d{1,2})?:?(\d{1,2})?[.:]?(\d+)?$/, h = /\[([^\]]+)]|Y{1,4}|M{1,4}|D{1,2}|d{1,4}|H{1,2}|h{1,2}|a|A|m{1,2}|s{1,2}|Z{1,2}|SSS/g, b = { name: "en", weekdays: "Sunday_Monday_Tuesday_Wednesday_Thursday_Friday_Saturday".split("_"), months: "January_February_March_April_May_June_July_August_September_October_November_December".split("_"), ordinal: function(k) {
-        var T = ["th", "st", "nd", "rd"], w = k % 100;
-        return "[" + k + (T[(w - 20) % 10] || T[w] || T[0]) + "]";
-      } }, L = function(k, T, w) {
+    })(pn, function() {
+      var s = 1e3, r = 6e4, o = 36e5, i = "millisecond", n = "second", l = "minute", a = "hour", c = "day", u = "week", p = "month", C = "quarter", g = "year", y = "date", m = "Invalid Date", I = /^(\d{4})[-/]?(\d{1,2})?[-/]?(\d{0,2})[Tt\s]*(\d{1,2})?:?(\d{1,2})?:?(\d{1,2})?[.:]?(\d+)?$/, h = /\[([^\]]+)]|Y{1,4}|M{1,4}|D{1,2}|d{1,4}|H{1,2}|h{1,2}|a|A|m{1,2}|s{1,2}|Z{1,2}|SSS/g, b = { name: "en", weekdays: "Sunday_Monday_Tuesday_Wednesday_Thursday_Friday_Saturday".split("_"), months: "January_February_March_April_May_June_July_August_September_October_November_December".split("_"), ordinal: function(k) {
+        var L = ["th", "st", "nd", "rd"], w = k % 100;
+        return "[" + k + (L[(w - 20) % 10] || L[w] || L[0]) + "]";
+      } }, T = function(k, L, w) {
         var S = String(k);
-        return !S || S.length >= T ? k : "" + Array(T + 1 - S.length).join(w) + k;
-      }, U = { s: L, z: function(k) {
-        var T = -k.utcOffset(), w = Math.abs(T), S = Math.floor(w / 60), x = w % 60;
-        return (T <= 0 ? "+" : "-") + L(S, 2, "0") + ":" + L(x, 2, "0");
-      }, m: function k(T, w) {
-        if (T.date() < w.date()) return -k(w, T);
-        var S = 12 * (w.year() - T.year()) + (w.month() - T.month()), x = T.clone().add(S, p), E = w - x < 0, V = T.clone().add(S + (E ? -1 : 1), p);
-        return +(-(S + (w - x) / (E ? x - V : V - x)) || 0);
+        return !S || S.length >= L ? k : "" + Array(L + 1 - S.length).join(w) + k;
+      }, U = { s: T, z: function(k) {
+        var L = -k.utcOffset(), w = Math.abs(L), S = Math.floor(w / 60), x = w % 60;
+        return (L <= 0 ? "+" : "-") + T(S, 2, "0") + ":" + T(x, 2, "0");
+      }, m: function k(L, w) {
+        if (L.date() < w.date()) return -k(w, L);
+        var S = 12 * (w.year() - L.year()) + (w.month() - L.month()), x = L.clone().add(S, p), E = w - x < 0, F = L.clone().add(S + (E ? -1 : 1), p);
+        return +(-(S + (w - x) / (E ? x - F : F - x)) || 0);
       }, a: function(k) {
         return k < 0 ? Math.ceil(k) || 0 : Math.floor(k);
       }, p: function(k) {
-        return { M: p, y: g, w: u, d: c, D: I, h: a, m: l, s: n, ms: i, Q: C }[k] || String(k || "").toLowerCase().replace(/s$/, "");
+        return { M: p, y: g, w: u, d: c, D: y, h: a, m: l, s: n, ms: i, Q: C }[k] || String(k || "").toLowerCase().replace(/s$/, "");
       }, u: function(k) {
         return k === void 0;
       } }, _ = "en", Q = {};
       Q[_] = b;
-      var v = "$isDayjsObject", H = function(k) {
+      var v = "$isDayjsObject", V = function(k) {
         return k instanceof R || !(!k || !k[v]);
-      }, P = function k(T, w, S) {
+      }, P = function k(L, w, S) {
         var x;
-        if (!T) return _;
-        if (typeof T == "string") {
-          var E = T.toLowerCase();
+        if (!L) return _;
+        if (typeof L == "string") {
+          var E = L.toLowerCase();
           Q[E] && (x = E), w && (Q[E] = w, x = E);
-          var V = T.split("-");
-          if (!x && V.length > 1) return k(V[0]);
+          var F = L.split("-");
+          if (!x && F.length > 1) return k(F[0]);
         } else {
-          var t2 = T.name;
-          Q[t2] = T, x = t2;
+          var t2 = L.name;
+          Q[t2] = L, x = t2;
         }
         return !S && x && (_ = x), x || !S && _;
-      }, N = function(k, T) {
-        if (H(k)) return k.clone();
-        var w = typeof T == "object" ? T : {};
+      }, N = function(k, L) {
+        if (V(k)) return k.clone();
+        var w = typeof L == "object" ? L : {};
         return w.date = k, w.args = arguments, new R(w);
       }, D = U;
-      D.l = P, D.i = H, D.w = function(k, T) {
-        return N(k, { locale: T.$L, utc: T.$u, x: T.$x, $offset: T.$offset });
+      D.l = P, D.i = V, D.w = function(k, L) {
+        return N(k, { locale: L.$L, utc: L.$u, x: L.$x, $offset: L.$offset });
       };
       var R = function() {
         function k(w) {
           this.$L = P(w.locale, null, !0), this.parse(w), this.$x = this.$x || w.x || {}, this[v] = !0;
         }
-        var T = k.prototype;
-        return T.parse = function(w) {
+        var L = k.prototype;
+        return L.parse = function(w) {
           this.$d = function(S) {
             var x = S.date, E = S.utc;
             if (x === null) return /* @__PURE__ */ new Date(NaN);
             if (D.u(x)) return /* @__PURE__ */ new Date();
             if (x instanceof Date) return new Date(x);
             if (typeof x == "string" && !/Z$/i.test(x)) {
-              var V = x.match(y);
-              if (V) {
-                var t2 = V[2] - 1 || 0, r2 = (V[7] || "0").substring(0, 3);
-                return E ? new Date(Date.UTC(V[1], t2, V[3] || 1, V[4] || 0, V[5] || 0, V[6] || 0, r2)) : new Date(V[1], t2, V[3] || 1, V[4] || 0, V[5] || 0, V[6] || 0, r2);
+              var F = x.match(I);
+              if (F) {
+                var t2 = F[2] - 1 || 0, r2 = (F[7] || "0").substring(0, 3);
+                return E ? new Date(Date.UTC(F[1], t2, F[3] || 1, F[4] || 0, F[5] || 0, F[6] || 0, r2)) : new Date(F[1], t2, F[3] || 1, F[4] || 0, F[5] || 0, F[6] || 0, r2);
               }
             }
             return new Date(x);
           }(w), this.init();
-        }, T.init = function() {
+        }, L.init = function() {
           var w = this.$d;
           this.$y = w.getFullYear(), this.$M = w.getMonth(), this.$D = w.getDate(), this.$W = w.getDay(), this.$H = w.getHours(), this.$m = w.getMinutes(), this.$s = w.getSeconds(), this.$ms = w.getMilliseconds();
-        }, T.$utils = function() {
+        }, L.$utils = function() {
           return D;
-        }, T.isValid = function() {
+        }, L.isValid = function() {
           return this.$d.toString() !== m;
-        }, T.isSame = function(w, S) {
+        }, L.isSame = function(w, S) {
           var x = N(w);
           return this.startOf(S) <= x && x <= this.endOf(S);
-        }, T.isAfter = function(w, S) {
+        }, L.isAfter = function(w, S) {
           return N(w) < this.startOf(S);
-        }, T.isBefore = function(w, S) {
+        }, L.isBefore = function(w, S) {
           return this.endOf(S) < N(w);
-        }, T.$g = function(w, S, x) {
+        }, L.$g = function(w, S, x) {
           return D.u(w) ? this[S] : this.set(x, w);
-        }, T.unix = function() {
+        }, L.unix = function() {
           return Math.floor(this.valueOf() / 1e3);
-        }, T.valueOf = function() {
+        }, L.valueOf = function() {
           return this.$d.getTime();
-        }, T.startOf = function(w, S) {
-          var x = this, E = !!D.u(S) || S, V = D.p(w), t2 = function(S2, c2) {
+        }, L.startOf = function(w, S) {
+          var x = this, E = !!D.u(S) || S, F = D.p(w), t2 = function(S2, c2) {
             var A2 = D.w(x.$u ? Date.UTC(x.$y, c2, S2) : new Date(x.$y, c2, S2), x);
             return E ? A2 : A2.endOf(c);
           }, r2 = function(S2, c2) {
             return D.w(x.toDate()[S2].apply(x.toDate("s"), (E ? [0, 0, 0, 0] : [23, 59, 59, 999]).slice(c2)), x);
-          }, o2 = this.$W, l2 = this.$M, p2 = this.$D, V2 = "set" + (this.$u ? "UTC" : "");
-          switch (V) {
+          }, o2 = this.$W, l2 = this.$M, p2 = this.$D, F2 = "set" + (this.$u ? "UTC" : "");
+          switch (F) {
             case g:
               return E ? t2(1, 0) : t2(31, 11);
             case p:
@@ -8141,53 +8157,53 @@ function un() {
               var k2 = this.$locale().weekStart || 0, t0 = (o2 < k2 ? o2 + 7 : o2) - k2;
               return t2(E ? p2 - t0 : p2 + (6 - t0), l2);
             case c:
-            case I:
-              return r2(V2 + "Hours", 0);
+            case y:
+              return r2(F2 + "Hours", 0);
             case a:
-              return r2(V2 + "Minutes", 1);
+              return r2(F2 + "Minutes", 1);
             case l:
-              return r2(V2 + "Seconds", 2);
+              return r2(F2 + "Seconds", 2);
             case n:
-              return r2(V2 + "Milliseconds", 3);
+              return r2(F2 + "Milliseconds", 3);
             default:
               return this.clone();
           }
-        }, T.endOf = function(w) {
+        }, L.endOf = function(w) {
           return this.startOf(w, !1);
-        }, T.$set = function(w, S) {
-          var x, E = D.p(w), V = "set" + (this.$u ? "UTC" : ""), t2 = (x = {}, x[c] = V + "Date", x[I] = V + "Date", x[p] = V + "Month", x[g] = V + "FullYear", x[a] = V + "Hours", x[l] = V + "Minutes", x[n] = V + "Seconds", x[i] = V + "Milliseconds", x)[E], r2 = E === c ? this.$D + (S - this.$W) : S;
+        }, L.$set = function(w, S) {
+          var x, E = D.p(w), F = "set" + (this.$u ? "UTC" : ""), t2 = (x = {}, x[c] = F + "Date", x[y] = F + "Date", x[p] = F + "Month", x[g] = F + "FullYear", x[a] = F + "Hours", x[l] = F + "Minutes", x[n] = F + "Seconds", x[i] = F + "Milliseconds", x)[E], r2 = E === c ? this.$D + (S - this.$W) : S;
           if (E === p || E === g) {
-            var o2 = this.clone().set(I, 1);
-            o2.$d[t2](r2), o2.init(), this.$d = o2.set(I, Math.min(this.$D, o2.daysInMonth())).$d;
+            var o2 = this.clone().set(y, 1);
+            o2.$d[t2](r2), o2.init(), this.$d = o2.set(y, Math.min(this.$D, o2.daysInMonth())).$d;
           } else t2 && this.$d[t2](r2);
           return this.init(), this;
-        }, T.set = function(w, S) {
+        }, L.set = function(w, S) {
           return this.clone().$set(w, S);
-        }, T.get = function(w) {
+        }, L.get = function(w) {
           return this[D.p(w)]();
-        }, T.add = function(w, S) {
+        }, L.add = function(w, S) {
           var x, E = this;
           w = Number(w);
-          var V = D.p(S), t2 = function(l2) {
+          var F = D.p(S), t2 = function(l2) {
             var p2 = N(E);
             return D.w(p2.date(p2.date() + Math.round(l2 * w)), E);
           };
-          if (V === p) return this.set(p, this.$M + w);
-          if (V === g) return this.set(g, this.$y + w);
-          if (V === c) return t2(1);
-          if (V === u) return t2(7);
-          var r2 = (x = {}, x[l] = r, x[a] = o, x[n] = s, x)[V] || 1, o2 = this.$d.getTime() + w * r2;
+          if (F === p) return this.set(p, this.$M + w);
+          if (F === g) return this.set(g, this.$y + w);
+          if (F === c) return t2(1);
+          if (F === u) return t2(7);
+          var r2 = (x = {}, x[l] = r, x[a] = o, x[n] = s, x)[F] || 1, o2 = this.$d.getTime() + w * r2;
           return D.w(o2, this);
-        }, T.subtract = function(w, S) {
+        }, L.subtract = function(w, S) {
           return this.add(-1 * w, S);
-        }, T.format = function(w) {
+        }, L.format = function(w) {
           var S = this, x = this.$locale();
           if (!this.isValid()) return x.invalidDate || m;
-          var E = w || "YYYY-MM-DDTHH:mm:ssZ", V = D.z(this), t2 = this.$H, r2 = this.$m, o2 = this.$M, l2 = x.weekdays, p2 = x.months, V2 = x.meridiem, k2 = function(c2, A2, s0, z0) {
+          var E = w || "YYYY-MM-DDTHH:mm:ssZ", F = D.z(this), t2 = this.$H, r2 = this.$m, o2 = this.$M, l2 = x.weekdays, p2 = x.months, F2 = x.meridiem, k2 = function(c2, A2, s0, z0) {
             return c2 && (c2[A2] || c2(S, E)) || s0[A2].slice(0, z0);
           }, t0 = function(c2) {
             return D.s(t2 % 12 || 12, c2, "0");
-          }, S2 = V2 || function(c2, A2, s0) {
+          }, S2 = F2 || function(c2, A2, s0) {
             var z0 = c2 < 12 ? "AM" : "PM";
             return s0 ? z0.toLowerCase() : z0;
           };
@@ -8241,16 +8257,16 @@ function un() {
                 case "SSS":
                   return D.s(S.$ms, 3, "0");
                 case "Z":
-                  return V;
+                  return F;
               }
               return null;
-            }(c2) || V.replace(":", "");
+            }(c2) || F.replace(":", "");
           });
-        }, T.utcOffset = function() {
+        }, L.utcOffset = function() {
           return 15 * -Math.round(this.$d.getTimezoneOffset() / 15);
-        }, T.diff = function(w, S, x) {
-          var E, V = this, t2 = D.p(S), r2 = N(w), o2 = (r2.utcOffset() - this.utcOffset()) * r, l2 = this - r2, p2 = function() {
-            return D.m(V, r2);
+        }, L.diff = function(w, S, x) {
+          var E, F = this, t2 = D.p(S), r2 = N(w), o2 = (r2.utcOffset() - this.utcOffset()) * r, l2 = this - r2, p2 = function() {
+            return D.m(F, r2);
           };
           switch (t2) {
             case g:
@@ -8281,40 +8297,40 @@ function un() {
               E = l2;
           }
           return x ? E : D.a(E);
-        }, T.daysInMonth = function() {
+        }, L.daysInMonth = function() {
           return this.endOf(p).$D;
-        }, T.$locale = function() {
+        }, L.$locale = function() {
           return Q[this.$L];
-        }, T.locale = function(w, S) {
+        }, L.locale = function(w, S) {
           if (!w) return this.$L;
           var x = this.clone(), E = P(w, S, !0);
           return E && (x.$L = E), x;
-        }, T.clone = function() {
+        }, L.clone = function() {
           return D.w(this.$d, this);
-        }, T.toDate = function() {
+        }, L.toDate = function() {
           return new Date(this.valueOf());
-        }, T.toJSON = function() {
+        }, L.toJSON = function() {
           return this.isValid() ? this.toISOString() : null;
-        }, T.toISOString = function() {
+        }, L.toISOString = function() {
           return this.$d.toISOString();
-        }, T.toString = function() {
+        }, L.toString = function() {
           return this.$d.toUTCString();
         }, k;
       }(), e2 = R.prototype;
-      return N.prototype = e2, [["$ms", i], ["$s", n], ["$m", l], ["$H", a], ["$W", c], ["$M", p], ["$y", g], ["$D", I]].forEach(function(k) {
-        e2[k[1]] = function(T) {
-          return this.$g(T, k[0], k[1]);
+      return N.prototype = e2, [["$ms", i], ["$s", n], ["$m", l], ["$H", a], ["$W", c], ["$M", p], ["$y", g], ["$D", y]].forEach(function(k) {
+        e2[k[1]] = function(L) {
+          return this.$g(L, k[0], k[1]);
         };
-      }), N.extend = function(k, T) {
-        return k.$i || (k(T, R, N), k.$i = !0), N;
-      }, N.locale = P, N.isDayjs = H, N.unix = function(k) {
+      }), N.extend = function(k, L) {
+        return k.$i || (k(L, R, N), k.$i = !0), N;
+      }, N.locale = P, N.isDayjs = V, N.unix = function(k) {
         return N(1e3 * k);
       }, N.en = Q[_], N.Ls = Q, N.p = {}, N;
     });
   }(Y0)), Y0.exports;
 }
-var pn = un();
-const At = /* @__PURE__ */ Ot(pn), dn = (e, t) => {
+var gn = dn();
+const At = /* @__PURE__ */ Ot(gn), Mn = (e, t) => {
   const { error: s, disabled: r, format: o, interval: i, disableTyping: n, fullWidth: l } = n2(e), a = q(!1), c = m0(e, "modelValue", t), u = Y(() => O(
     "spr-block spr-w-full spr-px-size-spacing-2xs spr-py-size-spacing-4xs spr-rounded-border-radius-md spr-outline-none spr-ring-0",
     "spr-text-color-strong spr-font-size-200",
@@ -8343,27 +8359,27 @@ const At = /* @__PURE__ */ Ot(pn), dn = (e, t) => {
     "!spr-text-tomato-600": s.value
   })), g = Y(() => O("spr-body-sm-regular spr-text-color-strong spr-block spr-mb-size-spacing-4xs", {
     "spr-text-color-on-fill-disabled": r.value
-  })), I = Y(() => "spr-relative spr-w-full"), m = (v) => {
+  })), y = Y(() => "spr-relative spr-w-full"), m = (v) => {
     var D;
-    const H = v.target;
-    if (!H) return;
-    const P = H.value.toUpperCase();
+    const V = v.target;
+    if (!V) return;
+    const P = V.value.toUpperCase();
     (o.value === "12" ? /^[0-9:APM\s]*$/ : /^[0-9:]*$/).test(P) ? c.value = P : c.value = (D = c.value) == null ? void 0 : D.slice(0, -1);
-  }, y = () => {
-    const v = [], H = At().startOf("day"), P = At().endOf("day");
-    let N = H;
+  }, I = () => {
+    const v = [], V = At().startOf("day"), P = At().endOf("day");
+    let N = V;
     for (; N.isBefore(P) || N.isSame(P); )
       v.push(h(N)), N = N.add(i.value, "minute");
     return v;
   }, h = (v) => {
-    let H = v.hour();
+    let V = v.hour();
     const P = v.minute().toString().padStart(2, "0");
     if (e.format === "12") {
-      const N = H >= 12 ? "PM" : "AM";
-      return H = H % 12 || 12, `${H.toString().padStart(2, "0")}:${P} ${N}`;
+      const N = V >= 12 ? "PM" : "AM";
+      return V = V % 12 || 12, `${V.toString().padStart(2, "0")}:${P} ${N}`;
     }
-    return `${H.toString().padStart(2, "0")}:${P}`;
-  }, b = Y(() => y()), L = Y(() => b.value), U = (v) => {
+    return `${V.toString().padStart(2, "0")}:${P}`;
+  }, b = Y(() => I()), T = Y(() => b.value), U = (v) => {
     c.value = v, a.value = !1;
   }, _ = (v) => {
     if (r.value) {
@@ -8377,8 +8393,8 @@ const At = /* @__PURE__ */ Ot(pn), dn = (e, t) => {
     optionClasses: p,
     iconClasses: C,
     labelClasses: g,
-    wrapperClasses: I,
-    filteredOptions: L,
+    wrapperClasses: y,
+    filteredOptions: T,
     selectedValue: c,
     isOpen: a,
     getPlaceHolder: Q,
@@ -8386,16 +8402,16 @@ const At = /* @__PURE__ */ Ot(pn), dn = (e, t) => {
     selectOption: U,
     handleClick: _
   };
-}, gn = { class: "spr-relative spr-flex spr-items-center" }, Mn = ["placeholder", "readonly", "disabled"], Cn = { key: 0 }, fn = ["onMousedown"], hn = {
+}, Cn = { class: "spr-relative spr-flex spr-items-center" }, fn = ["placeholder", "readonly", "disabled"], hn = { key: 0 }, Nn = ["onMousedown"], Dn = {
   key: 0,
   class: "spr-text-color-brand-base spr-font-bold"
-}, Nn = {
+}, yn = {
   key: 1,
   class: "spr-px-3 spr-py-2 spr-text-gray-500"
-}, Dn = /* @__PURE__ */ X({
+}, In = /* @__PURE__ */ X({
   __name: "time-picker",
-  props: ln,
-  emits: an,
+  props: cn,
+  emits: un,
   setup(e, { emit: t }) {
     const s = e, r = t, {
       timepickerClasses: o,
@@ -8408,24 +8424,24 @@ const At = /* @__PURE__ */ Ot(pn), dn = (e, t) => {
       selectedValue: p,
       getPlaceHolder: C,
       selectOption: g,
-      filterInput: I,
+      filterInput: y,
       handleClick: m
-    } = dn(s, r);
-    return (y, h) => (M(), f("div", {
+    } = Mn(s, r);
+    return (I, h) => (M(), f("div", {
       class: z(d(a))
     }, [
-      y.label ? (M(), f("label", {
+      I.label ? (M(), f("label", {
         key: 0,
         class: z(d(l))
-      }, $(y.label), 3)) : A("", !0),
-      j("div", gn, [
-        W2(j("input", {
+      }, $(I.label), 3)) : A("", !0),
+      j("div", Cn, [
+        J2(j("input", {
           "onUpdate:modelValue": h[0] || (h[0] = (b) => h2(p) ? p.value = b : null),
           type: "text",
           class: z(d(o)),
           placeholder: d(C),
-          readonly: y.disableTyping,
-          disabled: y.disabled,
+          readonly: I.disableTyping,
+          disabled: I.disabled,
           onFocus: h[1] || (h[1] = //@ts-ignore
           (...b) => d(m) && d(m)(...b)),
           onKeydown: [
@@ -8435,10 +8451,10 @@ const At = /* @__PURE__ */ Ot(pn), dn = (e, t) => {
           onClick: h[4] || (h[4] = //@ts-ignore
           (...b) => d(m) && d(m)(...b)),
           onInput: h[5] || (h[5] = //@ts-ignore
-          (...b) => d(I) && d(I)(...b)),
+          (...b) => d(y) && d(y)(...b)),
           onFocusout: h[6] || (h[6] = (b) => c.value = !1)
-        }, null, 42, Mn), [
-          [Tt, d(p)]
+        }, null, 42, fn), [
+          [Lt, d(p)]
         ]),
         j("div", {
           class: z(d(n)),
@@ -8452,34 +8468,34 @@ const At = /* @__PURE__ */ Ot(pn), dn = (e, t) => {
         key: 1,
         class: z(d(i))
       }, [
-        d(u).length > 0 ? (M(), f("div", Cn, [
+        d(u).length > 0 ? (M(), f("div", hn, [
           (M(!0), f(Z, null, s2(d(u), (b) => {
-            var L, U;
+            var T, U;
             return M(), f("div", {
               key: b,
               class: z([
                 "spr-body-xs-regular spr-flex spr-cursor-pointer spr-justify-between spr-rounded-border-radius-md spr-p-size-spacing-3xs",
                 "hover:spr-background-color-hover",
                 {
-                  "spr-background-color-single-active spr-rounded-border-radius-md": b.toUpperCase() === ((L = d(p)) == null ? void 0 : L.toUpperCase())
+                  "spr-background-color-single-active spr-rounded-border-radius-md": b.toUpperCase() === ((T = d(p)) == null ? void 0 : T.toUpperCase())
                 }
               ]),
               onMousedown: a0((_) => d(g)(b), ["prevent"])
             }, [
               B0($(b) + " ", 1),
-              b.toUpperCase() === ((U = d(p)) == null ? void 0 : U.toUpperCase()) ? (M(), f("span", hn, [
+              b.toUpperCase() === ((U = d(p)) == null ? void 0 : U.toUpperCase()) ? (M(), f("span", Dn, [
                 J(d(G), { icon: "ph:check" })
               ])) : A("", !0)
-            ], 42, fn);
+            ], 42, Nn);
           }), 128))
-        ])) : (M(), f("div", Nn, "No matching options found"))
+        ])) : (M(), f("div", yn, "No matching options found"))
       ], 2)) : A("", !0)
     ], 2));
   }
-}), yn = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
+}), jn = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
   __proto__: null,
-  default: Dn
-}, Symbol.toStringTag, { value: "Module" })), In = [
+  default: In
+}, Symbol.toStringTag, { value: "Module" })), mn = [
   "top",
   "top-start",
   "top-end",
@@ -8492,7 +8508,7 @@ const At = /* @__PURE__ */ Ot(pn), dn = (e, t) => {
   "right",
   "right-start",
   "right-end"
-], jn = {
+], zn = {
   /**
    * @description Tooltip Label
    */
@@ -8505,45 +8521,45 @@ const At = /* @__PURE__ */ Ot(pn), dn = (e, t) => {
    */
   placement: {
     type: String,
-    validator: (e) => In.includes(e),
+    validator: (e) => mn.includes(e),
     default: "top"
   },
   hasMaxWidth: {
     type: Boolean,
     default: !0
   }
-}, mn = (e) => ({
+}, An = (e) => ({
   placement: q(e.placement)
-}), zn = { key: 0 }, An = /* @__PURE__ */ X({
+}), bn = { key: 0 }, vn = /* @__PURE__ */ X({
   __name: "tooltip",
-  props: jn,
+  props: zn,
   setup(e) {
-    const t = e, { placement: s } = mn(t);
-    return (r, o) => (M(), F(d(i0), {
+    const t = e, { placement: s } = An(t);
+    return (r, o) => (M(), B(d(i0), {
       class: "spr-w-fit",
       "aria-id": t.hasMaxWidth ? "tooltip-full-width-wrapper" : "tooltip-wrapper",
       placement: d(s)
     }, {
       popper: W(() => [
-        r.text ? (M(), f("span", zn, $(r.text), 1)) : A("", !0),
-        B(r.$slots, "popper-content")
+        r.text ? (M(), f("span", bn, $(r.text), 1)) : A("", !0),
+        H(r.$slots, "popper-content")
       ]),
       default: W(() => [
-        B(r.$slots, "default")
+        H(r.$slots, "default")
       ]),
       _: 3
     }, 8, ["aria-id", "placement"]));
   }
-}), bn = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
+}), wn = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
   __proto__: null,
-  default: An
-}, Symbol.toStringTag, { value: "Module" })), vn = "spr-", wn = /* @__PURE__ */ Object.assign({ "../src/components/avatar/avatar.vue": X4, "../src/components/badge/badge.vue": J4, "../src/components/button/button.vue": Is, "../src/components/card/card.vue": Ls, "../src/components/checkbox/checkbox.vue": Ys, "../src/components/chips/chips.vue": Ks, "../src/components/dropdown/dropdown.vue": K3, "../src/components/empty-state/empty-state.vue": fr, "../src/components/input/input-email/input-email.vue": wr, "../src/components/input/input-password/input-password.vue": Tr, "../src/components/input/input-search/input-search.vue": kr, "../src/components/input/input-url/input-url.vue": _r, "../src/components/input/input-username/input-username.vue": Yr, "../src/components/input/input.vue": br, "../src/components/lozenge/lozenge.vue": Br, "../src/components/modal/modal.vue": ro, "../src/components/radio/radio.vue": go, "../src/components/sidenav/sidenav.vue": l5, "../src/components/sidepanel/sidepanel.vue": D5, "../src/components/snackbar/snack/snack.vue": b5, "../src/components/snackbar/snackbar.vue": li, "../src/components/status/status.vue": gi, "../src/components/switch/switch.vue": Ii, "../src/components/table/table.vue": Hi, "../src/components/tabs/tabs.vue": Xi, "../src/components/textarea/textarea.vue": nn, "../src/components/time-picker/time-picker.vue": yn, "../src/components/tooltip/tooltip.vue": bn }), xn = (e) => {
-  Object.entries(wn).forEach(([t, s]) => {
+  default: vn
+}, Symbol.toStringTag, { value: "Module" })), xn = "spr-", Tn = /* @__PURE__ */ Object.assign({ "../src/components/avatar/avatar.vue": X4, "../src/components/badge/badge.vue": J4, "../src/components/button/button.vue": Is, "../src/components/card/card.vue": Ts, "../src/components/checkbox/checkbox.vue": Ys, "../src/components/chips/chips.vue": Ks, "../src/components/dropdown/dropdown.vue": K3, "../src/components/empty-state/empty-state.vue": fr, "../src/components/input/input-email/input-email.vue": wr, "../src/components/input/input-password/input-password.vue": Lr, "../src/components/input/input-search/input-search.vue": kr, "../src/components/input/input-url/input-url.vue": _r, "../src/components/input/input-username/input-username.vue": Yr, "../src/components/input/input.vue": br, "../src/components/lozenge/lozenge.vue": Br, "../src/components/modal/modal.vue": ro, "../src/components/radio/radio.vue": go, "../src/components/sidenav/sidenav.vue": l5, "../src/components/sidepanel/sidepanel.vue": D5, "../src/components/snackbar/snack/snack.vue": b5, "../src/components/snackbar/snackbar.vue": li, "../src/components/status/status.vue": gi, "../src/components/switch/switch.vue": Ii, "../src/components/table/table.vue": Fi, "../src/components/tabs/tabs.vue": en, "../src/components/textarea/textarea.vue": an, "../src/components/time-picker/time-picker.vue": jn, "../src/components/tooltip/tooltip.vue": wn }), Ln = (e) => {
+  Object.entries(Tn).forEach(([t, s]) => {
     var o;
     const r = (o = t.split("/").pop()) == null ? void 0 : o.replace(".vue", "");
-    r && e.component(`${vn}${r}`, s.default);
+    r && e.component(`${xn}${r}`, s.default);
   }), console.log("%c🚀⭐ Design System Next Installed ⭐🚀", "color: green; font-weight: bold; font-size: 14px;");
-}, Tn = { install: xn };
+}, kn = { install: Ln };
 export {
-  Tn as default
+  kn as default
 };