design-system-next 2.12.9 → 2.12.11

package/dist/design-system-next.es.js

@@ -1,4 +1,4 @@
-import { defineComponent as ce, h as Wr, toRefs as Ie, ref as F, reactive as A2, computed as B, nextTick as We, openBlock as p, createElementBlock as v, normalizeClass as I, unref as a, renderSlot as se, createVNode as V, Transition as Gt, withCtx as G, withDirectives as Ge, createElementVNode as D, normalizeStyle as Te, vShow as yn, watch as ve, getCurrentScope as Cn, onScopeDispose as mn, readonly as Ja, onUnmounted as Mn, getCurrentInstance as v0, onMounted as rt, isRef as ye, shallowRef as Xa, markRaw as Ot, mergeProps as tt, Fragment as q, renderList as ge, toDisplayString as J, createCommentVNode as k, createBlock as ee, mergeModels as qa, useModel as eo, pushScopeId as to, popScopeId as ro, normalizeProps as y0, guardReactiveProps as C0, withScopeId as so, resolveComponent as R0, withKeys as V0, useSlots as Nt, onBeforeMount as no, createTextVNode as Pe, createSlots as h2, withModifiers as bt, vModelText as Ct, toRef as V2, vModelRadio as ao, vModelSelect as oo, useTemplateRef as lo, TransitionGroup as bn, effectScope as $n, toRaw as w2, hasInjectionContext as io, inject as uo, isReactive as fr, Teleport as co, vModelCheckbox as po } from "vue";
+import { defineComponent as ce, h as Wr, toRefs as Ie, ref as F, reactive as A2, computed as B, nextTick as We, openBlock as p, createElementBlock as v, normalizeClass as I, unref as a, renderSlot as re, createVNode as V, Transition as Gt, withCtx as G, withDirectives as Ge, createElementVNode as D, normalizeStyle as Te, vShow as yn, watch as ve, getCurrentScope as Cn, onScopeDispose as mn, readonly as Ja, onUnmounted as Mn, getCurrentInstance as v0, onMounted as rt, isRef as ye, shallowRef as Xa, markRaw as Ot, mergeProps as tt, Fragment as q, renderList as ge, toDisplayString as J, createCommentVNode as k, createBlock as ee, mergeModels as qa, useModel as eo, pushScopeId as to, popScopeId as ro, normalizeProps as y0, guardReactiveProps as C0, withScopeId as so, resolveComponent as R0, withKeys as V0, useSlots as Nt, onBeforeMount as no, createTextVNode as Pe, createSlots as h2, withModifiers as bt, vModelText as Ct, toRef as V2, vModelRadio as ao, vModelSelect as oo, useTemplateRef as lo, TransitionGroup as bn, effectScope as $n, toRaw as w2, hasInjectionContext as io, inject as uo, isReactive as fr, Teleport as co, vModelCheckbox as po } from "vue";
 const Nn = /^[a-z0-9]+(-[a-z0-9]+)*$/, m0 = (e, r, t, s = "") => {
   const n = e.split(":");
   if (e.slice(0, 1) === "@") {
@@ -1261,7 +1261,7 @@ const cl = {
     return (g, f) => (p(), v("div", {
       class: I(a(n).container)
     }, [
-      se(g.$slots, "trigger", { toggleCollapsible: a(l) }),
+      re(g.$slots, "trigger", { toggleCollapsible: a(l) }),
       V(Gt, {
         css: !1,
         onBeforeEnter: a(i),
@@ -1273,7 +1273,7 @@ const cl = {
           Ge(D("div", {
             style: Te(a(o))
           }, [
-            se(g.$slots, "default")
+            re(g.$slots, "default")
           ], 4), [
             [yn, g.modelValue]
           ])
@@ -2234,7 +2234,7 @@ const Y = /* @__PURE__ */ P2(ql), ei = (e, r) => {
       onClick: d[0] || (d[0] = //@ts-ignore
       (...c) => a(i) && a(i)(...c))
     }), [
-      se(u.$slots, "default")
+      re(u.$slots, "default")
     ], 16));
   }
 }), ti = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
@@ -2308,7 +2308,7 @@ const Y = /* @__PURE__ */ P2(ql), ei = (e, r) => {
         }, {
           default: G(() => [
             D("div", li, [
-              se(i.$slots, d.collapseId)
+              re(i.$slots, d.collapseId)
             ])
           ]),
           _: 2
@@ -2539,7 +2539,7 @@ const Y = /* @__PURE__ */ P2(ql), ei = (e, r) => {
   setup(e) {
     const r = e, { badgeClasses: t } = bi(r);
     return (s, n) => (p(), v("div", $i, [
-      se(s.$slots, "default"),
+      re(s.$slots, "default"),
       D("div", {
         class: I(a(t).baseClasses)
       }, [
@@ -2578,7 +2578,7 @@ const Y = /* @__PURE__ */ P2(ql), ei = (e, r) => {
           key: 0,
           class: I(a(n).imageContainerClasses)
         }, [
-          se(c.$slots, "default", {}, () => [
+          re(c.$slots, "default", {}, () => [
             c.src ? (p(), v("img", {
               key: 0,
               src: c.src,
@@ -2725,7 +2725,7 @@ const Y = /* @__PURE__ */ P2(ql), ei = (e, r) => {
       D("div", {
         class: I([a(s).content])
       }, [
-        se(l.$slots, "default", {}, () => [
+        re(l.$slots, "default", {}, () => [
           D("div", Ti, [
             D("span", {
               class: I([a(s).icon])
@@ -4516,7 +4516,7 @@ function f1(e, r, t, s, n, o) {
       "v-popper--shown": e.slotData.isShown
     }])
   }, [
-    se(e.$slots, "default", y0(C0(e.slotData)))
+    re(e.$slots, "default", y0(C0(e.slotData)))
   ], 2);
 }
 const h1 = /* @__PURE__ */ Ar(g1, [["render", f1]]);
@@ -4677,7 +4677,7 @@ function x1(e, r, t, s, n, o) {
       D("div", $1, [
         e.mounted ? (p(), v(q, { key: 0 }, [
           D("div", null, [
-            se(e.$slots, "default")
+            re(e.$slots, "default")
           ]),
           e.handleResize ? (p(), ee(l, {
             key: 0,
@@ -4943,7 +4943,7 @@ function w1(e, r, t, s, n, o) {
       classes: m,
       result: A
     }) => [
-      se(e.$slots, "default", {
+      re(e.$slots, "default", {
         shown: d,
         show: h,
         hide: b
@@ -4963,7 +4963,7 @@ function w1(e, r, t, s, n, o) {
         onResize: M
       }, {
         default: G(() => [
-          se(e.$slots, "popper", {
+          re(e.$slots, "popper", {
             shown: d,
             hide: b
           })
@@ -5414,8 +5414,8 @@ const Qe = S1, j1 = T1, O1 = ["A-Z", "Z-A", "default"], L1 = {
     }), M = Y(
       "spr-border spr-rounded-md spr-p-size-spacing-2xs spr-border-solid spr-box-border",
       {
-        "spr-border-kangkong-700 spr-bg-kangkong-100": (t.value || n.value) && !s.value,
-        "spr-border-mushroom-200": (!t.value || !n.value) && !s.value,
+        "spr-border-color-success-base spr-bg-kangkong-100": (t.value || n.value) && !s.value,
+        "spr-border-color-base": (!t.value || !n.value) && !s.value,
         "hover:spr-background-color-hover": !t.value && !n.value || s.value,
         "spr-border-0 spr-bg-white-100": s.value,
         "spr-w-fit": !l.value,
@@ -5696,7 +5696,7 @@ const Qe = S1, j1 = T1, O1 = ["A-Z", "Z-A", "default"], L1 = {
           key: 0,
           class: I(a(o).prefixSlotClasses)
         }, [
-          se(c.$slots, "prefix", {}, void 0, !0)
+          re(c.$slots, "prefix", {}, void 0, !0)
         ], 2)) : k("", !0),
         D("input", tt(c.$attrs, {
           id: s.id,
@@ -5717,7 +5717,7 @@ const Qe = S1, j1 = T1, O1 = ["A-Z", "Z-A", "default"], L1 = {
           key: 1,
           class: I(a(o).trailingSlotClasses)
         }, [
-          se(c.$slots, "trailing", {}, void 0, !0)
+          re(c.$slots, "trailing", {}, void 0, !0)
         ], 2)) : k("", !0),
         c.$slots.icon ? (p(), v("div", {
           key: 2,
@@ -5725,7 +5725,7 @@ const Qe = S1, j1 = T1, O1 = ["A-Z", "Z-A", "default"], L1 = {
           onClick: g[1] || (g[1] = //@ts-ignore
           (...f) => a(u) && a(u)(...f))
         }, [
-          se(c.$slots, "icon", {}, void 0, !0)
+          re(c.$slots, "icon", {}, void 0, !0)
         ], 2)) : k("", !0)
       ], 2),
       s.displayHelper || s.showCharCount ? (p(), v("div", {
@@ -5736,7 +5736,7 @@ const Qe = S1, j1 = T1, O1 = ["A-Z", "Z-A", "default"], L1 = {
           key: 0,
           class: I(a(o).helperClasses)
         }, [
-          se(c.$slots, "helperMessage", {}, () => [
+          re(c.$slots, "helperMessage", {}, () => [
             s.helperIcon ? (p(), ee(a(X), {
               key: 0,
               icon: s.helperIcon,
@@ -5943,14 +5943,14 @@ const Qe = S1, j1 = T1, O1 = ["A-Z", "Z-A", "default"], L1 = {
           tabindex: r.interactive || r.dropdown ? 0 : -1
         }, [
           s.$slots.icon || r.icon ? (p(), v("div", nu, [
-            se(s.$slots, "icon", {}, () => [
+            re(s.$slots, "icon", {}, () => [
               V(a(X), {
                 icon: r.icon
               }, null, 8, ["icon"])
             ])
           ])) : k("", !0),
           s.$slots.avatar || r.url ? (p(), v("div", au, [
-            se(s.$slots, "avatar", {}, () => [
+            re(s.$slots, "avatar", {}, () => [
               s.url ? (p(), v("div", ou, [
                 D("img", {
                   class: "spr-h-full spr-w-full spr-rounded-full spr-object-cover",
@@ -5962,7 +5962,7 @@ const Qe = S1, j1 = T1, O1 = ["A-Z", "Z-A", "default"], L1 = {
           ])) : k("", !0),
           D("span", iu, J(s.label), 1),
           s.$slots.postfixIcon || r.postfixIcon || r.dropdown ? (p(), v("div", uu, [
-            se(s.$slots, "postfixIcon", {}, () => [
+            re(s.$slots, "postfixIcon", {}, () => [
               r.postfixIcon ? (p(), ee(a(X), {
                 key: 0,
                 icon: r.postfixIcon
@@ -6694,7 +6694,7 @@ const Qe = S1, j1 = T1, O1 = ["A-Z", "Z-A", "default"], L1 = {
         D("div", {
           onClick: y[0] || (y[0] = (M) => n.value = !0)
         }, [
-          se(b.$slots, "default")
+          re(b.$slots, "default")
         ]),
         D("div", {
           id: t.id,
@@ -6721,7 +6721,7 @@ const Qe = S1, j1 = T1, O1 = ["A-Z", "Z-A", "default"], L1 = {
         onClick: i[0] || (i[0] = (u) => s("click", u))
       }), {
         default: G(() => [
-          se(l.$slots, "default")
+          re(l.$slots, "default")
         ]),
         _: 3
       }, 16, ["class"]),
@@ -6982,13 +6982,13 @@ const Qe = S1, j1 = T1, O1 = ["A-Z", "Z-A", "default"], L1 = {
       onClick: h[0] || (h[0] = //@ts-ignore
       (...b) => a(c) && a(c)(...b))
     }, [
-      se(f.$slots, "prefix", {}, () => [
+      re(f.$slots, "prefix", {}, () => [
         a(i) ? (p(), ee(a(X), {
           key: 0,
           icon: a(l)
         }, null, 8, ["icon"])) : k("", !0)
       ]),
-      se(f.$slots, "default", {}, () => [
+      re(f.$slots, "default", {}, () => [
         a(u) ? (p(), ee(aa, {
           key: 0,
           state: t.state,
@@ -7134,20 +7134,20 @@ const Qe = S1, j1 = T1, O1 = ["A-Z", "Z-A", "default"], L1 = {
             r.subtitle ? (p(), v("div", od, J(r.subtitle), 1)) : k("", !0)
           ])
         ])) : k("", !0),
-        n.$slots.header ? se(n.$slots, "header", { key: 1 }) : k("", !0)
+        n.$slots.header ? re(n.$slots, "header", { key: 1 }) : k("", !0)
       ], 2)) : k("", !0),
       n.$slots.content ? (p(), v("div", {
         key: 1,
         class: I([a(s).contentPaddingSizeClasses, a(s).hasFlexBox])
       }, [
-        se(n.$slots, "content")
+        re(n.$slots, "content")
       ], 2)) : k("", !0),
-      se(n.$slots, "default"),
+      re(n.$slots, "default"),
       n.$slots.footer && n.$props.showFooter ? (p(), v("div", {
         key: 2,
         class: I(a(s).footerClasses)
       }, [
-        se(n.$slots, "footer")
+        re(n.$slots, "footer")
       ], 2)) : k("", !0)
     ], 2));
   }
@@ -7226,7 +7226,7 @@ const Qe = S1, j1 = T1, O1 = ["A-Z", "Z-A", "default"], L1 = {
       id: "empty-state",
       class: I(a(n))
     }, [
-      se(o.$slots, "default", {
+      re(o.$slots, "default", {
         class: I(a(t).imageSizeClasses)
       }),
       o.$slots.default ? k("", !0) : (p(), v("div", {
@@ -7244,7 +7244,7 @@ const Qe = S1, j1 = T1, O1 = ["A-Z", "Z-A", "default"], L1 = {
           D("span", null, J(o.description), 1),
           D("div", Id, J(o.subDescription), 1)
         ]),
-        se(o.$slots, "button")
+        re(o.$slots, "button")
       ])
     ], 2));
   }
@@ -7799,7 +7799,7 @@ const _d = (e, r) => {
               _: 1
             }, 8, ["onClick"])
           ], 2),
-          se(_.$slots, "filter"),
+          re(_.$slots, "filter"),
           D("div", Yd, [
             D("div", Ud, [
               D("table", {
@@ -8028,7 +8028,7 @@ const _d = (e, r) => {
                       colspan: a(n).length + 1,
                       class: "spr-flex spr-h-full spr-items-center spr-justify-center"
                     }, [
-                      se(_.$slots, "empty-state", {}, () => [
+                      re(_.$slots, "empty-state", {}, () => [
                         V(jr, {
                           size: "large",
                           description: _.emptyStateTitle,
@@ -8228,7 +8228,7 @@ const _d = (e, r) => {
     }, [
       g.variant === "tag" ? (p(), v(q, { key: 0 }, [
         a(c) ? (p(), v("span", Mc, [
-          se(g.$slots, "icon", {}, () => [
+          re(g.$slots, "icon", {}, () => [
             V(a(X), {
               icon: a(u),
               class: "spr-font-size-300"
@@ -8269,7 +8269,7 @@ const _d = (e, r) => {
             ["stop"]
           ), ["enter"]))
         }, [
-          se(g.$slots, "close-icon", {}, () => [
+          re(g.$slots, "close-icon", {}, () => [
             V(a(X), { icon: "ph:x" })
           ])
         ], 40, Dc)) : k("", !0)
@@ -8426,7 +8426,7 @@ const Ec = (e, r) => {
   const { active: t, disabled: s, readonly: n, error: o, currentYear: l, minMaxYear: i, restDays: u, disabledDates: d, format: c } = Ie(e), g = Oe(e, "modelValue", r), f = B(() => {
     const Q = Y("spr-body-sm-regular spr-text-color-strong spr-block", {
       "spr-text-color-on-fill-disabled": s.value
-    }), re = Y(
+    }), se = Y(
       "spr-flex spr-justify-between spr-items-center spr-gap-6 spr-rounded-lg spr-bg-white-50 spr-min-w-[180px] spr-py-1.5 spr-px-3",
       {
         // Normal State
@@ -8473,7 +8473,7 @@ const Ec = (e, r) => {
     );
     return {
       labelClasses: Q,
-      datePickerBaseInputClasses: re,
+      datePickerBaseInputClasses: se,
       datePickerInputClasses: le,
       datePickerInputHelperClasses: Ce,
       calendarTabItemsBaseClasses: je,
@@ -8481,16 +8481,16 @@ const Ec = (e, r) => {
       yearsTabItemsBaseClasses: Ye
     };
   }), h = F(null), b = F(null), y = F(null), M = F(null), m = F(!1), A = F("tab-calendar"), T = F(te()), _ = F(
-    Array.from({ length: 7 }, (Q, re) => ({
-      text: te().day(re).format("dd"),
-      fullText: te().day(re).format("dddd"),
-      dayValue: re
+    Array.from({ length: 7 }, (Q, se) => ({
+      text: te().day(se).format("dd"),
+      fullText: te().day(se).format("dddd"),
+      dayValue: se
     }))
   ), O = F(
-    Array.from({ length: 12 }, (Q, re) => ({
-      text: te().month(re).format("MMM"),
-      fullText: te().month(re).format("MMMM"),
-      monthValue: re
+    Array.from({ length: 12 }, (Q, se) => ({
+      text: te().month(se).format("MMM"),
+      fullText: te().month(se).format("MMMM"),
+      monthValue: se
     }))
   ), C = F(""), $ = F(""), L = F(""), E = F([]), w = F({
     selectedMonth: te().month(),
@@ -8501,12 +8501,12 @@ const Ec = (e, r) => {
   ), P = B(
     () => te().year(w.value.selectedYear).month(w.value.selectedMonth).isSame(te().year(i.value.max).month(11), "month")
   ), Z = () => {
-    const Q = te().year(w.value.selectedYear).month(w.value.selectedMonth).startOf("month").day(), re = te().year(w.value.selectedYear).month(w.value.selectedMonth).endOf("month").date(), le = Q, Ce = le + re, je = Ce % 7 === 0 ? 0 : 7 - Ce % 7, Ee = [];
+    const Q = te().year(w.value.selectedYear).month(w.value.selectedMonth).startOf("month").day(), se = te().year(w.value.selectedYear).month(w.value.selectedMonth).endOf("month").date(), le = Q, Ce = le + se, je = Ce % 7 === 0 ? 0 : 7 - Ce % 7, Ee = [];
     for (let Ye = le; Ye > 0; Ye--) {
       const Rt = te().year(w.value.selectedYear).month(w.value.selectedMonth).date(-Ye + 1);
       Ee.push({ date: Rt, inactive: !0 });
     }
-    for (let Ye = 1; Ye <= re; Ye++) {
+    for (let Ye = 1; Ye <= se; Ye++) {
       const Rt = te().year(w.value.selectedYear).month(w.value.selectedMonth).date(Ye);
       Ee.push({ date: Rt, inactive: !1 });
     }
@@ -8524,95 +8524,95 @@ const Ec = (e, r) => {
     const Q = te().year(w.value.selectedYear).month(w.value.selectedMonth).add(1, "month");
     w.value.selectedMonth = Q.month(), w.value.selectedYear = Q.year(), Z();
   }, S = (Q) => {
-    const re = u.value.map((le) => {
+    const se = u.value.map((le) => {
       var Ce;
       return (Ce = _.value.find((je) => je.text.toLowerCase() === le.toLowerCase())) == null ? void 0 : Ce.dayValue;
     });
-    return W(Q) ? !1 : !!re.includes(Q.date.getDay());
+    return W(Q) ? !1 : !!se.includes(Q.date.getDay());
   }, N = (Q) => Q.date.toDateString() === T.value.format("ddd MMM DD YYYY"), z = (Q) => !Q.inactive && !ae(Q), U = (Q) => !!(Q.inactive && !ae(Q)), W = (Q) => {
     var le;
-    const re = (le = At("text", C.value)) == null ? void 0 : le.monthValue;
-    return $.value && !C.value && !L.value && !ae(Q) ? Q.date.getDate() === Number($.value) && !Q.inactive : $.value && C && !L.value && !ae(Q) ? Q.date.getDate() === Number($.value) && Q.date.getMonth() === re && !Q.inactive : $.value && C.value && L.value && !ae(Q) ? Q.date.getDate() === Number($.value) && Q.date.getMonth() === re && Q.date.getFullYear().toString() === L.value && !Q.inactive : !1;
+    const se = (le = At("text", C.value)) == null ? void 0 : le.monthValue;
+    return $.value && !C.value && !L.value && !ae(Q) ? Q.date.getDate() === Number($.value) && !Q.inactive : $.value && C && !L.value && !ae(Q) ? Q.date.getDate() === Number($.value) && Q.date.getMonth() === se && !Q.inactive : $.value && C.value && L.value && !ae(Q) ? Q.date.getDate() === Number($.value) && Q.date.getMonth() === se && Q.date.getFullYear().toString() === L.value && !Q.inactive : !1;
   }, de = (Q) => {
     var le;
-    const re = (le = At("text", C.value)) == null ? void 0 : le.monthValue;
-    return $.value && !C.value && !ae(Q) ? Q.date.getDate() !== Number($.value) : $.value && C && !ae(Q) ? Q.date.getDate() !== Number($.value) || Q.date.getMonth() !== re : !!(!$.value && C.value && !ae(Q) || !$.value && !C.value && !ae(Q));
+    const se = (le = At("text", C.value)) == null ? void 0 : le.monthValue;
+    return $.value && !C.value && !ae(Q) ? Q.date.getDate() !== Number($.value) : $.value && C && !ae(Q) ? Q.date.getDate() !== Number($.value) || Q.date.getMonth() !== se : !!(!$.value && C.value && !ae(Q) || !$.value && !C.value && !ae(Q));
   }, ae = (Q) => !!(xe(Q) || ie(Q) || pe(Q) || be(Q) || Me(Q) || $e(Q) || Se(Q)), xe = (Q) => {
     if (d != null && d.value && d.value.from && d.value.to) {
-      const re = te(d.value.from, "MM-DD-YYYY").startOf("day"), le = te(d.value.to, "MM-DD-YYYY").endOf("day"), Ce = te(Q.date);
-      return Ce.isSameOrAfter(re, "day") && Ce.isSameOrBefore(le, "day");
+      const se = te(d.value.from, "MM-DD-YYYY").startOf("day"), le = te(d.value.to, "MM-DD-YYYY").endOf("day"), Ce = te(Q.date);
+      return Ce.isSameOrAfter(se, "day") && Ce.isSameOrBefore(le, "day");
     }
     return !1;
   }, ie = (Q) => {
     if (d != null && d.value && (d != null && d.value.pastDates)) {
-      const re = te(Q.date);
+      const se = te(Q.date);
       if (typeof d.value.pastDates == "boolean")
-        return re.isBefore(T.value.startOf("day"));
+        return se.isBefore(T.value.startOf("day"));
       {
         const le = te(d.value.pastDates);
-        return re.isBefore(te(le, "MM-DD-YYYY").startOf("day"));
+        return se.isBefore(te(le, "MM-DD-YYYY").startOf("day"));
       }
     }
     return !1;
   }, pe = (Q) => {
     if (d != null && d.value && (d != null && d.value.futureDates)) {
-      const re = te(Q.date);
+      const se = te(Q.date);
       if (typeof d.value.futureDates == "boolean")
-        return re.isAfter(T.value.endOf("day"));
+        return se.isAfter(T.value.endOf("day"));
       {
         const le = te(d.value.futureDates);
-        return re.isAfter(te(le, "MM-DD-YYYY").endOf("day"));
+        return se.isAfter(te(le, "MM-DD-YYYY").endOf("day"));
       }
     }
     return !1;
   }, be = (Q) => {
     if (d != null && d.value && (d != null && d.value.selectedDates) && d.value.selectedDates.length > 0) {
-      const re = te(Q.date);
+      const se = te(Q.date);
       return d.value.selectedDates.forEach((le) => {
         te(le).isValid() || console.error(`Error: disabledDates Props - Selected Dates - Invalid date format: "${le}"`);
-      }), d.value.selectedDates.some((le) => re.isSame(te(le, "MM-DD-YYYY"), "day"));
+      }), d.value.selectedDates.some((le) => se.isSame(te(le, "MM-DD-YYYY"), "day"));
     }
     return !1;
   }, Me = (Q) => {
     if (d != null && d.value && (d != null && d.value.weekends)) {
-      const re = te(Q.date);
-      return re.day() === 0 || re.day() === 6;
+      const se = te(Q.date);
+      return se.day() === 0 || se.day() === 6;
     }
     return !1;
   }, $e = (Q) => {
     if (d != null && d.value && (d != null && d.value.weekdays)) {
-      const re = te(Q.date);
-      return re.day() > 0 && re.day() < 6;
+      const se = te(Q.date);
+      return se.day() > 0 && se.day() < 6;
     }
     return !1;
   }, Se = (Q) => {
     if (d != null && d.value && (d != null && d.value.selectedDays)) {
-      const re = te(Q.date);
+      const se = te(Q.date);
       return d.value.selectedDays.some((le) => {
         const Ce = _.value.find((je) => je.text.toLowerCase() === le.toLowerCase());
-        return Ce || console.error(`Error: disabledDates Props - Selected Days - Invalid day: "${le}"`), Ce ? re.day() === _.value.indexOf(Ce) : !1;
+        return Ce || console.error(`Error: disabledDates Props - Selected Days - Invalid day: "${le}"`), Ce ? se.day() === _.value.indexOf(Ce) : !1;
       });
     }
     return !1;
   }, we = (Q) => {
-    const re = te(Q.date), le = re.format("MM"), Ce = re.format("DD"), je = re.format("YYYY");
-    C.value = le, $.value = Ce, L.value = je, g.value = re.format(c.value), w.value.selectedMonth = Q.date.getMonth(), w.value.selectedYear = Q.date.getFullYear(), K(), Z(), Bt(), vt(), E.value = [], r("getDateErrors", E.value), setTimeout(() => {
+    const se = te(Q.date), le = se.format("MM"), Ce = se.format("DD"), je = se.format("YYYY");
+    C.value = le, $.value = Ce, L.value = je, g.value = se.format(c.value), w.value.selectedMonth = Q.date.getMonth(), w.value.selectedYear = Q.date.getFullYear(), K(), Z(), Bt(), vt(), E.value = [], r("getDateErrors", E.value), setTimeout(() => {
       m.value = !1;
     }, 100);
   }, ze = (Q) => {
     A.value = "tab-calendar";
-    const re = Q.monthValue + 1, le = re < 10 ? `0${re}` : `${re}`;
+    const se = Q.monthValue + 1, le = se < 10 ? `0${se}` : `${se}`;
     C.value = le, w.value.selectedMonth = Q.monthValue, K(), Z(), Bt(), E.value = [], r("getDateErrors", E.value);
   }, me = F({
     currentPage: 0,
     itemsPerPage: 12,
     yearsArray: Array.from(
       { length: i.value.max - i.value.min + 1 },
-      (Q, re) => i.value.min + re
+      (Q, se) => i.value.min + se
     ).filter((Q) => Q <= i.value.max && Q >= i.value.min)
   }), he = B(() => {
-    const Q = me.value.currentPage * me.value.itemsPerPage, re = me.value.yearsArray.slice(Q);
-    return re.length < me.value.itemsPerPage ? re : me.value.yearsArray.slice(Q, Q + me.value.itemsPerPage);
+    const Q = me.value.currentPage * me.value.itemsPerPage, se = me.value.yearsArray.slice(Q);
+    return se.length < me.value.itemsPerPage ? se : me.value.yearsArray.slice(Q, Q + me.value.itemsPerPage);
   }), oe = () => {
     const Q = me.value.yearsArray.indexOf(w.value.selectedYear);
     Q !== -1 && (me.value.currentPage = Math.floor(Q / me.value.itemsPerPage));
@@ -8623,7 +8623,7 @@ const Ec = (e, r) => {
   }, Dt = B(() => me.value.currentPage === 0), It = B(() => (me.value.currentPage + 1) * me.value.itemsPerPage >= me.value.yearsArray.length), xt = (Q) => {
     A.value = "tab-calendar", L.value = Q, w.value.selectedYear = Number(Q), K(), Z(), Bt(), E.value = [], r("getDateErrors", E.value);
   }, r2 = B(() => s.value || n.value), at = (Q) => {
-    var re, le;
+    var se, le;
     switch (Q) {
       case "MinMaxYear": {
         const Ce = Number(l.value) || (/* @__PURE__ */ new Date()).getFullYear(), { min: je, max: Ee } = i.value;
@@ -8633,7 +8633,7 @@ const Ec = (e, r) => {
         break;
       }
       case "disabledDatesToFrom": {
-        if ((re = d == null ? void 0 : d.value) != null && re.from && ((le = d == null ? void 0 : d.value) != null && le.to)) {
+        if ((se = d == null ? void 0 : d.value) != null && se.from && ((le = d == null ? void 0 : d.value) != null && le.to)) {
           const Ce = te(d.value.from, "MM-DD-YYYY"), je = te(d.value.to, "MM-DD-YYYY");
           Ce.isAfter(je) && console.error('Error: disabledDates props - The "from" date cannot be later than the "to" date.'), je.isBefore(Ce) && console.error('Error: disabledDates props - The "to" date cannot be earlier than the "from" date.');
         }
@@ -8644,8 +8644,8 @@ const Ec = (e, r) => {
     if (g.value) {
       let Q = te(g.value, c.value);
       if (Q.isValid() || (Q = te(g.value, "MM-DD-YYYY")), !Q.isValid()) {
-        const re = ["YYYY-MM-DD", "MM/DD/YYYY", "DD/MM/YYYY", "YYYY/MM/DD"];
-        for (const le of re) {
+        const se = ["YYYY-MM-DD", "MM/DD/YYYY", "DD/MM/YYYY", "YYYY/MM/DD"];
+        for (const le of se) {
           const Ce = te(g.value, le);
           if (Ce.isValid()) {
             Q = Ce;
@@ -8654,13 +8654,13 @@ const Ec = (e, r) => {
         }
       }
       if (Q.isValid()) {
-        const re = Q.format("MM"), le = Q.format("DD"), Ce = Q.format("YYYY");
-        Ke(), C.value = re, $.value = le, L.value = Ce, g.value = Q.format(c.value), w.value.selectedMonth = Q.get("month"), w.value.selectedYear = Q.get("year"), K(), Z(), Bt(), !C.value && !$.value && !L.value ? r("getInputValue", null) : r("getInputValue", Q.format(c.value));
+        const se = Q.format("MM"), le = Q.format("DD"), Ce = Q.format("YYYY");
+        Ke(), C.value = se, $.value = le, L.value = Ce, g.value = Q.format(c.value), w.value.selectedMonth = Q.get("month"), w.value.selectedYear = Q.get("year"), K(), Z(), Bt(), !C.value && !$.value && !L.value ? r("getInputValue", null) : r("getInputValue", Q.format(c.value));
       } else
         console.error(`Error: Could not parse date "${g.value}" with format "${c.value}"`);
     }
-  }, At = (Q, re) => O.value.find(
-    (le) => le[Q].toString().toLowerCase() === re.toString().toLowerCase()
+  }, At = (Q, se) => O.value.find(
+    (le) => le[Q].toString().toLowerCase() === se.toString().toLowerCase()
   ), n2 = (Q) => Y(f.value.datePickerInputClasses, `spr-w-[${Q}] spr-min-w-[${Q}]`), a2 = (Q) => Y("spr-cursor-pointer", {
     "spr-background-color-pressed !spr-shadow-button": A.value === Q
   }), Le = () => {
@@ -8672,18 +8672,18 @@ const Ec = (e, r) => {
   }, K = () => {
     if (C.value.length >= 2)
       if (!isNaN(Number(C.value)) && !isNaN(parseFloat(C.value))) {
-        const re = C.value.replace(/\b0(\d)\b/g, "$1"), le = Number(re), Ce = O.value.find((je) => je.monthValue + 1 === le);
+        const se = C.value.replace(/\b0(\d)\b/g, "$1"), le = Number(se), Ce = O.value.find((je) => je.monthValue + 1 === le);
         Ce && (C.value = Ce.text.toUpperCase());
       } else {
-        const re = O.value.find(
+        const se = O.value.find(
           (le) => le.text.toLowerCase() === C.value.toLowerCase()
         );
-        re && (C.value = re.text.toUpperCase());
+        se && (C.value = se.text.toUpperCase());
       }
   }, Ke = b0(() => {
     var Q;
     if (C.value && $.value && L.value) {
-      const re = `${C.value}-${$.value}-${L.value}`, le = te(re, "MM-DD-YYYY").isValid(), Ce = Number(L.value) >= i.value.min && Number(L.value) <= i.value.max;
+      const se = `${C.value}-${$.value}-${L.value}`, le = te(se, "MM-DD-YYYY").isValid(), Ce = Number(L.value) >= i.value.min && Number(L.value) <= i.value.max;
       if (le && Ce) {
         E.value = E.value.filter((Ee) => Ee.title !== "Invalid Date");
         const je = (Q = At("text", C.value)) == null ? void 0 : Q.monthValue;
@@ -8693,13 +8693,13 @@ const Ec = (e, r) => {
         Ce ? Ee = `Invalid Date Format. Please use ${c.value}` : Ee = `Year must be between ${i.value.min} and ${i.value.max}.`, E.value.push({
           title: "Invalid Date",
           message: Ee
-        }), m.value = !1, r("getDateErrors", E.value), console.error(`Invalid Date: "${re}". ${Ee}`);
+        }), m.value = !1, r("getDateErrors", E.value), console.error(`Invalid Date: "${se}". ${Ee}`);
       }
     }
   }, 500), v2 = (Q) => {
     A.value === Q ? A.value = "tab-calendar" : A.value = Q;
-  }, O0 = (Q, re) => {
-    re && re instanceof KeyboardEvent && re.key === "Backspace" && (Q === "date" && $.value === "" && We(() => {
+  }, O0 = (Q, se) => {
+    se && se instanceof KeyboardEvent && se.key === "Backspace" && (Q === "date" && $.value === "" && We(() => {
       b.value && b.value.focus();
     }), Q === "year" && L.value === "" && We(() => {
       y.value && y.value.focus();
@@ -8708,8 +8708,8 @@ const Ec = (e, r) => {
     if (C.value && $.value && L.value) {
       const Q = O.value.find(
         (le) => le.text.toLowerCase() === C.value.toLowerCase()
-      ), re = me.value.yearsArray.find((le) => le === Number(L.value));
-      if (Q && re) {
+      ), se = me.value.yearsArray.find((le) => le === Number(L.value));
+      if (Q && se) {
         const le = te(`${C.value}-${$.value}-${L.value}`, "MM-DD-YYYY"), Ce = {
           // Standard date formats
           mmddyyyy: le.format("MM-DD-YYYY"),
@@ -8765,9 +8765,9 @@ const Ec = (e, r) => {
     }, 500);
   }), ve(L, (Q) => {
     if (Q) {
-      const re = parseInt(Q, 10);
-      if (isNaN(re)) return;
-      const le = me.value.yearsArray.indexOf(re);
+      const se = parseInt(Q, 10);
+      if (isNaN(se)) return;
+      const le = me.value.yearsArray.indexOf(se);
       if (le !== -1) {
         const Ce = Math.floor(le / me.value.itemsPerPage);
         me.value.currentPage = Ce;
@@ -8776,7 +8776,7 @@ const Ec = (e, r) => {
   }), ve(i, () => {
     me.value.yearsArray = Array.from(
       { length: i.value.max - i.value.min + 1 },
-      (Q, re) => i.value.min + re
+      (Q, se) => i.value.min + se
     ).filter((Q) => Q <= i.value.max && Q >= i.value.min), me.value.currentPage = 0;
   }), qt(h, () => {
     m.value = !1;
@@ -9100,7 +9100,7 @@ const Ec = (e, r) => {
               for: s.id,
               class: I(a(o).labelClasses)
             }, J(s.label), 11, Yc)) : k("", !0),
-            se(me.$slots, "default", { handleClick: a(ze) }, () => [
+            re(me.$slots, "default", { handleClick: a(ze) }, () => [
               D("div", {
                 ref_key: "datePickerRef",
                 ref: l,
@@ -9187,7 +9187,7 @@ const Ec = (e, r) => {
         key: 0,
         class: I(a(o).datePickerInputHelperClasses)
       }, [
-        se(me.$slots, "helperMessage", {}, () => [
+        re(me.$slots, "helperMessage", {}, () => [
           s.helperIcon ? (p(), ee(a(X), {
             key: 0,
             icon: s.helperIcon,
@@ -9578,7 +9578,7 @@ const g3 = (e, r) => {
       return vt("startDate"), !1;
     const Ze = Number(fe);
     return Ze < i.value.min || Ze > i.value.max ? (vt("year"), !1) : (y2("startDate"), y2("year"), !0);
-  }, U2 = (H, ne) => j.value.find((fe) => fe[H] === ne), Q = (H) => `spr-w-[${H}] spr-min-w-[${H}]`, re = (H) => Y("spr-cursor-pointer", {
+  }, U2 = (H, ne) => j.value.find((fe) => fe[H] === ne), Q = (H) => `spr-w-[${H}] spr-min-w-[${H}]`, se = (H) => Y("spr-cursor-pointer", {
     "spr-background-color-pressed !spr-shadow-button": w.value === H
   }), le = () => {
     x.value = x.value.replace(/[^A-Za-z0-9\s]/g, "").toLocaleUpperCase(), Vr("start"), St();
@@ -9760,7 +9760,7 @@ const g3 = (e, r) => {
     yearTabHandleSelectedYear: Bt,
     getMonthObject: U2,
     getDatePickerInputClasses: Q,
-    getTabClasses: re,
+    getTabClasses: se,
     isDateRangePickerPopperDisabled: Ga,
     handleStartMonthInput: le,
     handleStartDateInput: Ce,
@@ -10072,7 +10072,7 @@ const g3 = (e, r) => {
               class: I(a(n).labelClasses)
             }, J(t.label), 11, h3)) : k("", !0),
             D("div", v3, [
-              se(wt.$slots, "default", { handleClick: a(Le) }, () => [
+              re(wt.$slots, "default", { handleClick: a(Le) }, () => [
                 D("div", {
                   ref_key: "startDateContainerRef",
                   ref: f,
@@ -10240,7 +10240,7 @@ const g3 = (e, r) => {
         key: 0,
         class: I(a(n).dateRangePickerInputHelperClasses)
       }, [
-        se(wt.$slots, "helperMessage", {}, () => [
+        re(wt.$slots, "helperMessage", {}, () => [
           t.helperIcon ? (p(), ee(a(X), {
             key: 0,
             icon: t.helperIcon,
@@ -10975,9 +10975,9 @@ const g3 = (e, r) => {
                             key: 2,
                             class: I(a(f).LoadingStateClasses)
                           }, [
-                            t.loading ? se(O.$slots, "loading", { key: 0 }, () => [
+                            t.loading ? re(O.$slots, "loading", { key: 0 }, () => [
                               C[8] || (C[8] = Pe(" loading... "))
-                            ]) : se(O.$slots, "empty", { key: 1 }, () => [
+                            ]) : re(O.$slots, "empty", { key: 1 }, () => [
                               C[9] || (C[9] = Pe(" No Result Found! "))
                             ])
                           ], 2)),
@@ -11092,11 +11092,11 @@ const g3 = (e, r) => {
             ], 8, $4)
           ], 2))), 128))
         ], 512)) : (p(), v("div", I4, [
-          O.filling ? se(O.$slots, "loading-state", { key: 0 }, () => [
+          O.filling ? re(O.$slots, "loading-state", { key: 0 }, () => [
             D("div", {
               class: I(a(f).LoadingStateClasses)
             }, "Loading...", 2)
-          ]) : se(O.$slots, "empty-state", { key: 1 }, () => [
+          ]) : re(O.$slots, "empty-state", { key: 1 }, () => [
             D("div", {
               class: I(a(f).LoadingStateClasses)
             }, "Result not found!", 2)
@@ -11112,7 +11112,7 @@ const g3 = (e, r) => {
           }),
           onClick: C[1] || (C[1] = ($) => n.value = !0)
         }, [
-          se(O.$slots, "default", {}, () => [
+          re(O.$slots, "default", {}, () => [
             V(He, {
               id: t.id,
               modelValue: a(o),
@@ -11177,12 +11177,12 @@ const T4 = {
           class: I([a(s).wrapperClass])
         }, [
           n.$slots.default ? k("", !0) : (p(), v("div", T4, [
-            n.$slots.message ? se(n.$slots, "message", { key: 0 }) : k("", !0),
+            n.$slots.message ? re(n.$slots, "message", { key: 0 }) : k("", !0),
             n.$slots.actions ? (p(), v("div", j4, [
-              se(n.$slots, "actions")
+              re(n.$slots, "actions")
             ])) : k("", !0)
           ])),
-          se(n.$slots, "default")
+          re(n.$slots, "default")
         ], 2)) : k("", !0)
       ]),
       _: 3
@@ -13022,7 +13022,7 @@ const B6 = Ca().map((e) => {
       ge(r.$slots, (s, n) => ({
         name: n,
         fn: G(() => [
-          se(r.$slots, n)
+          re(r.$slots, n)
         ])
       }))
     ]), 1040));
@@ -13054,7 +13054,7 @@ const B6 = Ca().map((e) => {
       ge(n.$slots, (l, i) => ({
         name: i,
         fn: G(() => [
-          se(n.$slots, i)
+          re(n.$slots, i)
         ])
       }))
     ]), 1040, ["type"]));
@@ -13077,7 +13077,7 @@ const B6 = Ca().map((e) => {
       ge(r.$slots, (s, n) => ({
         name: n,
         fn: G(() => [
-          se(r.$slots, n)
+          re(r.$slots, n)
         ])
       }))
     ]), 1040));
@@ -13097,7 +13097,7 @@ const B6 = Ca().map((e) => {
       ge(r.$slots, (s, n) => ({
         name: n,
         fn: G(() => [
-          se(r.$slots, n)
+          re(r.$slots, n)
         ])
       }))
     ]), 1040));
@@ -14465,7 +14465,7 @@ const e9 = ["white", "dark", "gray", "green"], t9 = [
               class: I(a(n).headerClasses)
             }, [
               !i.$slots.header && i.title ? (p(), v("span", d9, J(i.title), 1)) : k("", !0),
-              se(i.$slots, "header", {}, void 0, !0),
+              re(i.$slots, "header", {}, void 0, !0),
               t.closeButtonX ? (p(), v("span", {
                 key: 1,
                 class: I(a(n).headerCloseButtonXClasses),
@@ -14481,13 +14481,13 @@ const e9 = ["white", "dark", "gray", "green"], t9 = [
             D("div", {
               class: I(a(n).contentClasses)
             }, [
-              se(i.$slots, "default", {}, void 0, !0)
+              re(i.$slots, "default", {}, void 0, !0)
             ], 2),
             i.$slots.footer ? (p(), v("footer", {
               key: 1,
               class: I(a(n).footerClasses)
             }, [
-              se(i.$slots, "footer", {}, void 0, !0)
+              re(i.$slots, "footer", {}, void 0, !0)
             ], 2)) : k("", !0)
           ], 2)) : k("", !0)
         ]),
@@ -14714,7 +14714,7 @@ const e9 = ["white", "dark", "gray", "green"], t9 = [
           class: I(a(i).baseIndicatorClasses)
         }, null, 2),
         D("div", x9, [
-          se(u.$slots, "default", {}, void 0, !0),
+          re(u.$slots, "default", {}, void 0, !0),
           t.description && t.description !== "" ? (p(), v("span", {
             key: 0,
             class: I(["spr-text-xs spr-font-normal spr-leading-4 spr-text-mushroom-600", { "spr-text-color-disabled": t.disabled }])
@@ -14777,19 +14777,31 @@ const e9 = ["white", "dark", "gray", "green"], t9 = [
     type: Boolean,
     default: !1
   },
-  helperText: {
-    type: String,
-    default: ""
+  displayHelper: {
+    type: Boolean,
+    default: !1
   },
   helperIcon: {
     type: String,
     default: null
   },
-  displayHelper: {
+  helperText: {
+    type: String,
+    default: ""
+  },
+  clearable: {
     type: Boolean,
     default: !1
   },
-  clearable: {
+  active: {
+    type: Boolean,
+    default: !1
+  },
+  disabled: {
+    type: Boolean,
+    default: !1
+  },
+  error: {
     type: Boolean,
     default: !1
   },
@@ -14823,17 +14835,14 @@ const e9 = ["white", "dark", "gray", "green"], t9 = [
     validator: (e) => j9.includes(e),
     default: "absolute"
   },
-  disabled: {
-    type: Boolean,
-    default: !1
-  },
   removeCurrentLevelInBackLabel: {
     type: Boolean,
     default: !1
   }
 }, L9 = {
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  "update:modelValue": (e) => !0
+  "update:modelValue": (e) => !0,
+  "popper-state": Boolean
 }, k9 = (e, r) => {
   const { options: t, disabled: s, textSeperator: n, prependText: o } = Ie(e), l = B(() => ({
     baseClasses: "spr-flex spr-flex-col spr-gap-size-spacing-4xs",
@@ -14872,7 +14881,7 @@ const e9 = ["white", "dark", "gray", "green"], t9 = [
         else
           break;
       }
-      P && y(P) && (i.value = !1);
+      P && y(P) && (i.value = !1, r("popper-state", !1));
       return;
     }
     c.value = C;
@@ -14891,7 +14900,7 @@ const e9 = ["white", "dark", "gray", "green"], t9 = [
     }
     if (E) {
       const w = M(g.value, E.value);
-      o.value ? f.value = w ? w.reverse().join(n.value) : E.text || "" : f.value = w ? w.join(n.value) : E.text || "", y(E) && (i.value = !1);
+      o.value ? f.value = w ? w.reverse().join(n.value) : E.text || "" : f.value = w ? w.join(n.value) : E.text || "", y(E) && (i.value = !1, r("popper-state", !1));
     } else C.length === 0 && !b.value && (f.value = "");
   }, A = () => {
     h.value = !0, T();
@@ -14899,7 +14908,7 @@ const e9 = ["white", "dark", "gray", "green"], t9 = [
   }, 300), _ = () => {
     b.value = !0, f.value = "", r("update:modelValue", []);
   }, O = () => {
-    i.value = !0, h.value = !1;
+    i.value = !0, h.value = !1, r("popper-state", !0);
   };
   return ve(
     () => c.value,
@@ -14921,7 +14930,7 @@ const e9 = ["white", "dark", "gray", "green"], t9 = [
     },
     { immediate: !0 }
   ), qt(u, () => {
-    i.value = !1;
+    i.value = !1, r("popper-state", !1);
   }), {
     ladderizedClasses: l,
     ladderizedSelectPopperState: i,
@@ -15028,6 +15037,7 @@ const e9 = ["white", "dark", "gray", "green"], t9 = [
               "display-helper": t.displayHelper,
               readonly: "",
               disabled: t.disabled,
+              error: t.error,
               onKeyup: a(f)
             }, {
               icon: G(() => [
@@ -15041,15 +15051,18 @@ const e9 = ["white", "dark", "gray", "green"], t9 = [
                   V(a(X), { icon: "ph:caret-down" })
                 ])
               ]),
-              _: 1
-            }, 8, ["id", "modelValue", "placeholder", "helper-text", "helper-icon", "display-helper", "disabled", "onKeyup"])
+              helperMessage: G(() => [
+                re(y.$slots, "helperMessage")
+              ]),
+              _: 3
+            }, 8, ["id", "modelValue", "placeholder", "helper-text", "helper-icon", "display-helper", "disabled", "error", "onKeyup"])
           ]),
           D("div", {
             id: "ladderized-select-wrapper",
             style: Te({ width: t.popperWidth })
           }, null, 4)
         ]),
-        _: 1
+        _: 3
       }, 8, ["shown", "placement", "disabled", "strategy", "style"])
     ], 2));
   }
@@ -15190,7 +15203,8 @@ const e9 = ["white", "dark", "gray", "green"], t9 = [
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
   "update:modelValue": (e) => !0,
   "update:searchValue": (e) => typeof e == "string",
-  "infinite-scroll-trigger": Boolean
+  "infinite-scroll-trigger": Boolean,
+  "popper-state": Boolean
 }, H9 = (e, r) => {
   const { displayText: t, options: s, textField: n, valueField: o, active: l, disabled: i, error: u, disabledLocalSearch: d } = Ie(e), c = B(() => {
     const S = Y("spr-flex spr-flex-col spr-gap-size-spacing-4xs"), N = Y("spr-body-sm-regular spr-text-color-strong spr-flex spr-gap-2", {
@@ -15284,7 +15298,7 @@ const e9 = ["white", "dark", "gray", "green"], t9 = [
     }
     M.value = s.value;
   }, R = () => {
-    f.value = !f.value;
+    f.value = !f.value, r("popper-state", !f.value);
   }, P = (S) => {
     const N = S.map((z) => {
       if (typeof z.value == "string" && z.value.startsWith("{") && z.value.endsWith("}"))
@@ -15338,7 +15352,7 @@ const e9 = ["white", "dark", "gray", "green"], t9 = [
       y.value.length > 3 ? A.value = `${y.value.length} items selected` : A.value = y.value.map((S) => S.text).join(", "), T.value = A.value, t.value && !m.value && (!A.value || A.value === "") && (A.value = t.value, T.value = t.value);
     }
   }, x = () => {
-    r("update:modelValue", []), y.value = [], A.value = "", f.value = !1;
+    r("update:modelValue", []), y.value = [], A.value = "", f.value = !1, r("popper-state", !1);
   };
   return ve(b, () => {
     j();
@@ -15357,7 +15371,7 @@ const e9 = ["white", "dark", "gray", "green"], t9 = [
   ), ve(C, () => {
     O.value = C.value;
   }), qt(g, () => {
-    f.value = !1, j();
+    f.value = !1, j(), r("popper-state", !1);
   }), f2(
     $,
     () => {
@@ -15512,7 +15526,7 @@ const e9 = ["white", "dark", "gray", "green"], t9 = [
                     key: 0,
                     class: I(a(n).chippedHelperClasses)
                   }, [
-                    se(A.$slots, "helperMessage", {}, () => [
+                    re(A.$slots, "helperMessage", {}, () => [
                       t.helperIcon ? (p(), ee(a(X), {
                         key: 0,
                         icon: t.helperIcon,
@@ -15553,7 +15567,7 @@ const e9 = ["white", "dark", "gray", "green"], t9 = [
                   ])
                 ]),
                 helperMessage: G(() => [
-                  se(A.$slots, "helperMessage")
+                  re(A.$slots, "helperMessage")
                 ]),
                 _: 3
               }, 8, ["id", "modelValue", "placeholder", "helper-text", "helper-icon", "display-helper", "active", "disabled", "error"])),
@@ -15710,7 +15724,8 @@ const e9 = ["white", "dark", "gray", "green"], t9 = [
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
   "infinite-scroll-trigger": (e) => !0,
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  "search-string": (e) => !0
+  "search-string": (e) => !0,
+  "popper-state": Boolean
 }, i8 = (e, r) => {
   const { displayText: t, options: s, disabled: n, textField: o, valueField: l, disabledLocalSearch: i } = Ie(e), u = B(() => {
     const j = Y("spr-flex spr-flex-col spr-gap-size-spacing-4xs"), x = Y("spr-body-sm-regular spr-text-color-strong spr-flex spr-gap-2", {
@@ -15774,7 +15789,7 @@ const e9 = ["white", "dark", "gray", "green"], t9 = [
   }, E = b0(() => {
     r("search-string", m.value);
   }, 300), w = () => {
-    c.value = !c.value, T.value = !1;
+    c.value = !c.value, T.value = !1, r("popper-state", !c.value);
   }, R = (j) => {
     if (j.length === 0) {
       h.value = "";
@@ -15789,7 +15804,7 @@ const e9 = ["white", "dark", "gray", "green"], t9 = [
       typeof S == "string" && !isNaN(Number(S)) && S.trim() !== "" ? h.value = Number(S) : h.value = S, m.value = N;
     }
     A.value = m.value, setTimeout(() => {
-      c.value = !1;
+      c.value = !1, r("popper-state", !1);
     }, 10);
   }, P = () => {
     if (!y.value.length) return;
@@ -15833,7 +15848,7 @@ const e9 = ["white", "dark", "gray", "green"], t9 = [
     },
     { deep: !0 }
   ), qt(d, () => {
-    c.value = !1, T.value && (m.value = A.value), T.value = !1;
+    c.value = !1, T.value && (m.value = A.value), T.value = !1, r("popper-state", !1);
   }), f2(
     f,
     () => {
@@ -16014,7 +16029,7 @@ const e9 = ["white", "dark", "gray", "green"], t9 = [
                   ])
                 ]),
                 helperMessage: G(() => [
-                  se(T.$slots, "helperMessage")
+                  re(T.$slots, "helperMessage")
                 ]),
                 _: 3
               }, 8, ["id", "modelValue", "class", "placeholder", "helper-text", "helper-icon", "display-helper", "active", "readonly", "disabled", "error", "onKeyup"]),
@@ -16243,13 +16258,13 @@ const e9 = ["white", "dark", "gray", "green"], t9 = [
     }, {
       popper: G(() => [
         r.text ? (p(), v("span", N8, J(r.text), 1)) : k("", !0),
-        se(n.$slots, "popper-content")
+        re(n.$slots, "popper-content")
       ]),
       default: G(() => [
-        se(n.$slots, "default")
+        re(n.$slots, "default")
       ]),
       _: 3
-    }, 8, ["class", "aria-id", "placement", "show-triggers", "hide-triggers", "distance", "auto-hide"])) : se(n.$slots, "default", { key: 1 });
+    }, 8, ["class", "aria-id", "placement", "show-triggers", "hide-triggers", "distance", "auto-hide"])) : re(n.$slots, "default", { key: 1 });
   }
 }), D8 = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
   __proto__: null,
@@ -16560,7 +16575,7 @@ const e9 = ["white", "dark", "gray", "green"], t9 = [
       }, [
         D("div", V8, [
           D("div", Q8, [
-            se(d.$slots, "logo-image")
+            re(d.$slots, "logo-image")
           ]),
           t.quickActions && t.quickActions.length > 0 ? (p(), ee(a(Qe), {
             key: 0,
@@ -17021,7 +17036,7 @@ const e9 = ["white", "dark", "gray", "green"], t9 = [
           }, [
             t.hideHeader ? k("", !0) : (p(), v(q, { key: 0 }, [
               i.$slots.header ? (p(), v("div", v7, [
-                se(i.$slots, "header")
+                re(i.$slots, "header")
               ])) : (p(), v("div", {
                 key: 0,
                 class: I(a(n).sidepanelHeaderClasses)
@@ -17041,13 +17056,13 @@ const e9 = ["white", "dark", "gray", "green"], t9 = [
               id: "sidepanel-content",
               class: I(a(n).sidepanelContentClasses)
             }, [
-              se(i.$slots, "default")
+              re(i.$slots, "default")
             ], 2),
             i.$slots.footer ? (p(), v("div", {
               key: 1,
               class: I(a(n).sidepanelFooterClasses)
             }, [
-              se(i.$slots, "footer")
+              re(i.$slots, "footer")
             ], 2)) : k("", !0)
           ], 6)) : k("", !0)
         ]),
@@ -17154,7 +17169,7 @@ const e9 = ["white", "dark", "gray", "green"], t9 = [
         }, {
           default: G(() => [
             (p(!0), v(q, null, ge(a(c), (h) => (p(), v("div", { key: h }, [
-              se(g.$slots, h)
+              re(g.$slots, h)
             ]))), 128))
           ]),
           _: 3
@@ -17385,7 +17400,7 @@ const e9 = ["white", "dark", "gray", "green"], t9 = [
       (...g) => a(u) && a(u)(...g))
     }), [
       D("div", k7, [
-        se(d.$slots, "icon", {}, () => [
+        re(d.$slots, "icon", {}, () => [
           d.showIcon ? (p(), ee(a(X), {
             key: 0,
             icon: a(i),
@@ -17394,11 +17409,11 @@ const e9 = ["white", "dark", "gray", "green"], t9 = [
             class: I([a(l), "spr-mr-size-spacing-3xs spr-flex-shrink-0"])
           }, null, 8, ["icon", "class"])) : k("", !0)
         ], !0),
-        se(d.$slots, "label", {}, () => [
+        re(d.$slots, "label", {}, () => [
           D("label", null, J(d.text), 1)
         ], !0)
       ]),
-      d.showAction ? se(d.$slots, "default", { key: 0 }, () => [
+      d.showAction ? re(d.$slots, "default", { key: 0 }, () => [
         D("label", {
           class: I([
             a(l),
@@ -18452,8 +18467,8 @@ const pg = (e) => ({
                     action: g.action || g.defaultAction
                   }, {
                     default: G(() => [
-                      se(d.$slots, "default", {}, () => [
-                        se(d.$slots, "snackbarActions", {}, void 0, !0)
+                      re(d.$slots, "default", {}, () => [
+                        re(d.$slots, "snackbarActions", {}, void 0, !0)
                       ], !0)
                     ]),
                     _: 2
@@ -18784,8 +18799,8 @@ const pg = (e) => ({
         for: a(n),
         class: "spr-cursor-pointer"
       }, [
-        se(b.$slots, "leftText", {}, () => [
-          se(b.$slots, "default", {}, void 0, !0)
+        re(b.$slots, "leftText", {}, () => [
+          re(b.$slots, "default", {}, void 0, !0)
         ], !0)
       ], 8, Og)),
       D("div", {
@@ -18823,7 +18838,7 @@ const pg = (e) => ({
         for: a(n),
         class: "spr-cursor-pointer"
       }, [
-        se(b.$slots, "rightText", {}, void 0, !0)
+        re(b.$slots, "rightText", {}, void 0, !0)
       ], 8, kg))
     ], 16));
   }
@@ -18882,7 +18897,7 @@ const pg = (e) => ({
     return (u, d) => (p(), v("div", {
       class: I(a(n))
     }, [
-      se(u.$slots, "tableActionSection", {}, () => [
+      re(u.$slots, "tableActionSection", {}, () => [
         D("div", {
           class: I(a(l))
         }, [
@@ -19501,7 +19516,7 @@ const pg = (e) => ({
         key: 0,
         class: I(a(d).tableActionSlotClasses)
       }, [
-        se(C.$slots, "default")
+        re(C.$slots, "default")
       ], 2)) : k("", !0),
       a(i) ? (p(), v("div", {
         key: 1,
@@ -19518,7 +19533,7 @@ const pg = (e) => ({
           "toggle-filter": t.tableActions.filter
         }, {
           tableActionSection: G(() => [
-            se(C.$slots, "tableActionSection")
+            re(C.$slots, "tableActionSection")
           ]),
           _: 3
         }, 8, ["search-model", "toggle-search", "toggle-option", "toggle-filter", "onUpdate:searchModel"])
@@ -19582,7 +19597,7 @@ const pg = (e) => ({
                 key: 1,
                 class: I(a(d).headerClasses)
               }, [
-                se(C.$slots, "action-name", {
+                re(C.$slots, "action-name", {
                   class: I(a(d).tableCellSlotClasses)
                 })
               ], 2)) : k("", !0)
@@ -19618,7 +19633,7 @@ const pg = (e) => ({
                 key: R,
                 class: I(a(d).tableDataClasses)
               }, [
-                C.$slots[w.field] ? se(C.$slots, w.field, {
+                C.$slots[w.field] ? re(C.$slots, w.field, {
                   key: 0,
                   row: L,
                   rowIndex: E
@@ -19671,7 +19686,7 @@ const pg = (e) => ({
                 class: I(a(d).tableRowActionClasses)
               }, [
                 D("div", Df, [
-                  se(C.$slots, "action", { row: L })
+                  re(C.$slots, "action", { row: L })
                 ])
               ], 2)) : k("", !0)
             ], 42, pf))), 128))
@@ -19684,7 +19699,7 @@ const pg = (e) => ({
                 colspan: a(l),
                 class: "spr-overflow-hidden"
               }, [
-                se(C.$slots, "loading", {}, () => [
+                re(C.$slots, "loading", {}, () => [
                   $[1] || ($[1] = D("div", { class: "spr-flex spr-items-center spr-justify-center" }, "Loading...", -1))
                 ])
               ], 8, wf)
@@ -19693,7 +19708,7 @@ const pg = (e) => ({
                 colspan: a(l),
                 class: "spr-flex spr-h-full spr-items-center spr-justify-center"
               }, [
-                se(C.$slots, "empty-state", {}, () => [
+                re(C.$slots, "empty-state", {}, () => [
                   V(jr, { size: a(c) }, null, 8, ["size"])
                 ])
               ], 8, xf)
@@ -19705,7 +19720,7 @@ const pg = (e) => ({
         key: 2,
         class: I(a(d).tableFooterClasses)
       }, [
-        se(C.$slots, "footer")
+        re(C.$slots, "footer")
       ], 2)) : k("", !0)
     ], 2));
   }
@@ -19950,7 +19965,7 @@ const pg = (e) => ({
       ), f = Y("spr-body-sm-regular spr-flex spr-items-center spr-gap-size-spacing-5xs", {
         "spr-text-color-danger-base": t.value,
         "spr-text-color-supporting": !t.value
-      }), h = Y("spr-flex spr-items-center", {
+      }), h = Y("spr-flex spr-items-start", {
         "spr-justify-between": e.displayHelper && e.hasCounter,
         "spr-justify-end": !e.displayHelper && e.hasCounter
       });
@@ -20000,7 +20015,7 @@ const pg = (e) => ({
           key: 0,
           class: I(a(o).helperClasses)
         }, [
-          se(l.$slots, "helperMessage", {}, () => [
+          re(l.$slots, "helperMessage", {}, () => [
             t.helperIcon ? (p(), ee(a(X), {
               key: 0,
               icon: t.helperIcon,
@@ -20014,7 +20029,7 @@ const pg = (e) => ({
           key: 1,
           class: I(a(o).helperClasses)
         }, [
-          se(l.$slots, "counter", {}, () => [
+          re(l.$slots, "counter", {}, () => [
             D("span", null, J(`${l.modelValue.length}/${t.maxLength}`), 1)
           ])
         ], 2)) : k("", !0)
@@ -20206,7 +20221,7 @@ const pg = (e) => ({
 }), sh = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
   __proto__: null,
   default: rh
-}, Symbol.toStringTag, { value: "Module" })), nh = "design-system-next", ah = "2.12.9", oh = "./dist/design-system-next.umd.js", lh = "./dist/design-system-next.es.js", ih = { type: "git", url: "https://dev.azure.com/sproutphil/Sprout%20Design%20System/_git/Sprout%20Design%20System%20Next" }, uh = "module", dh = ["dist", "dist/", "src/", "README.md", "LICENSE"], ch = { ".": { import: "./dist/design-system-next.es.js", require: "./dist/design-system-next.umd.js" }, "./style.css": "./dist/main.css" }, ph = { dev: "vite", build: "vue-tsc && vite build", "watch-build": "vue-tsc && vite build --watch", types: "vue-tsc", preview: "vite preview", "lint:script": 'eslint "**/*.{js,ts,vue}"', "lint:style": 'stylelint "**/*.{vue,css}"', "fix:style": 'stylelint --fix "**/*.{vue,css}"', lint: "npm run lint:script && npm run lint:style", prepublishOnly: "npm run build", "docs:dev": "vitepress dev docs", "docs:build": "vitepress build docs", "docs:serve": "vitepress serve docs", "docs:preview": "vitepress preview docs", clean: "rm -rf node_modules dist coverage package-lock.json && npm install" }, gh = { "@cloudinary/url-gen": "^1.21.0", "@eslint/js": "^9.17.0", "@iconify-icons/ph": "^1.2.5", "@iconify/vue": "^4.3.0", classnames: "^2.5.1", "countries-list": "^3.1.1", dayjs: "^1.11.13", "floating-vue": "^5.2.2", "libphonenumber-js": "^1.12.5", lodash: "^4.17.21", pinia: "^2.3.1", stylelint: "^16.12.0", "stylelint-config-recess-order": "^5.1.1", "stylelint-config-recommended": "^14.0.1", "stylelint-config-recommended-vue": "^1.5.0", "typescript-eslint": "^8.19.1", "vite-plugin-sass": "^0.1.0", vue: "^3.0.0" }, fh = { "@stylistic/stylelint-plugin": "^3.1.1", "@types/node": "^22.10.5", "@vitejs/plugin-vue": "^5.2.1", autoprefixer: "^10.4.20", eslint: "^9.17.0", "eslint-config-prettier": "^9.1.0", "eslint-plugin-vue": "^9.32.0", prettier: "^3.4.2", "prettier-plugin-tailwindcss": "^0.6.9", "rollup-plugin-gzip": "^4.0.1", "sass-embedded": "^1.83.1", tailwindcss: "^3.4.17", typescript: "~5.7.2", "unplugin-vue-components": "^28.0.0", vite: "^6.0.7", "vite-plugin-dts": "^4.4.0", "vite-tsconfig-paths": "^5.1.4", vitepress: "^1.5.0", "vue-eslint-parser": "^9.4.3", "vue-tsc": "^2.2.0" }, hh = { vue: "^3.0.0" }, vh = { node: ">=20.0.0", npm: ">=10.0.0" }, yh = {
+}, Symbol.toStringTag, { value: "Module" })), nh = "design-system-next", ah = "2.12.11", oh = "./dist/design-system-next.umd.js", lh = "./dist/design-system-next.es.js", ih = { type: "git", url: "https://dev.azure.com/sproutphil/Sprout%20Design%20System/_git/Sprout%20Design%20System%20Next" }, uh = "module", dh = ["dist", "dist/", "src/", "README.md", "LICENSE"], ch = { ".": { import: "./dist/design-system-next.es.js", require: "./dist/design-system-next.umd.js" }, "./style.css": "./dist/main.css" }, ph = { dev: "vite", build: "vue-tsc && vite build", "watch-build": "vue-tsc && vite build --watch", types: "vue-tsc", preview: "vite preview", "lint:script": 'eslint "**/*.{js,ts,vue}"', "lint:style": 'stylelint "**/*.{vue,css}"', "fix:style": 'stylelint --fix "**/*.{vue,css}"', lint: "npm run lint:script && npm run lint:style", prepublishOnly: "npm run build", "docs:dev": "vitepress dev docs", "docs:build": "vitepress build docs", "docs:serve": "vitepress serve docs", "docs:preview": "vitepress preview docs", clean: "rm -rf node_modules dist coverage package-lock.json && npm install" }, gh = { "@cloudinary/url-gen": "^1.21.0", "@eslint/js": "^9.17.0", "@iconify-icons/ph": "^1.2.5", "@iconify/vue": "^4.3.0", classnames: "^2.5.1", "countries-list": "^3.1.1", dayjs: "^1.11.13", "floating-vue": "^5.2.2", "libphonenumber-js": "^1.12.5", lodash: "^4.17.21", pinia: "^2.3.1", stylelint: "^16.12.0", "stylelint-config-recess-order": "^5.1.1", "stylelint-config-recommended": "^14.0.1", "stylelint-config-recommended-vue": "^1.5.0", "typescript-eslint": "^8.19.1", "vite-plugin-sass": "^0.1.0", vue: "^3.0.0" }, fh = { "@stylistic/stylelint-plugin": "^3.1.1", "@types/node": "^22.10.5", "@vitejs/plugin-vue": "^5.2.1", autoprefixer: "^10.4.20", eslint: "^9.17.0", "eslint-config-prettier": "^9.1.0", "eslint-plugin-vue": "^9.32.0", prettier: "^3.4.2", "prettier-plugin-tailwindcss": "^0.6.9", "rollup-plugin-gzip": "^4.0.1", "sass-embedded": "^1.83.1", tailwindcss: "^3.4.17", typescript: "~5.7.2", "unplugin-vue-components": "^28.0.0", vite: "^6.0.7", "vite-plugin-dts": "^4.4.0", "vite-tsconfig-paths": "^5.1.4", vitepress: "^1.5.0", "vue-eslint-parser": "^9.4.3", "vue-tsc": "^2.2.0" }, hh = { vue: "^3.0.0" }, vh = { node: ">=20.0.0", npm: ">=10.0.0" }, yh = {
   name: nh,
   private: !1,
   version: ah,