design-system-next 2.7.20 → 2.7.21

package/dist/design-system-next.js

@@ -1,4 +1,4 @@
-import { toRefs as Ce, ref as U, reactive as H2, computed as L, nextTick as Ge, defineComponent as oe, openBlock as g, createElementBlock as C, normalizeClass as I, unref as i, renderSlot as te, createVNode as E, Transition as M2, withCtx as F, withDirectives as o2, createElementVNode as A, normalizeStyle as ke, vShow as dt, h as dr, onUnmounted as jn, getCurrentScope as Sn, onScopeDispose as On, getCurrentInstance as E0, onMounted as e2, watch as Me, isRef as ge, toValue as be, shallowRef as da, watchEffect as ua, mergeProps as Qe, Fragment as X, renderList as de, toDisplayString as G, createCommentVNode as S, createBlock as J, useSlots as $2, pushScopeId as ca, popScopeId as pa, normalizeProps as P0, guardReactiveProps as Y0, withScopeId as ga, resolveComponent as ut, withKeys as ct, onBeforeMount as fa, createTextVNode as Se, withModifiers as pt, vModelText as q0, toRef as c0, createSlots as n0, vModelRadio as ha, effectScope as zn, markRaw as h2, toRaw as Z2, hasInjectionContext as Ca, inject as Ma, isReactive as kt, Teleport as ya, TransitionGroup as ma, vModelCheckbox as va } from "vue";
+import { toRefs as Ce, ref as U, reactive as H2, computed as L, nextTick as Ge, defineComponent as oe, openBlock as g, createElementBlock as C, normalizeClass as I, unref as i, renderSlot as ee, createVNode as E, Transition as M2, withCtx as F, withDirectives as o2, createElementVNode as A, normalizeStyle as ke, vShow as dt, h as dr, onUnmounted as jn, getCurrentScope as Sn, onScopeDispose as On, getCurrentInstance as E0, onMounted as e2, watch as Me, isRef as ge, toValue as be, shallowRef as da, watchEffect as ua, mergeProps as Qe, Fragment as X, renderList as de, toDisplayString as G, createCommentVNode as S, createBlock as J, useSlots as $2, pushScopeId as ca, popScopeId as pa, normalizeProps as P0, guardReactiveProps as Y0, withScopeId as ga, resolveComponent as ut, withKeys as ct, onBeforeMount as fa, createTextVNode as Se, withModifiers as pt, vModelText as q0, toRef as c0, createSlots as n0, vModelRadio as ha, effectScope as zn, markRaw as h2, toRaw as Z2, hasInjectionContext as Ca, inject as Ma, isReactive as kt, Teleport as ya, TransitionGroup as ma, vModelCheckbox as va } from "vue";
 const Na = ["header", "button"], $a = {
   accordionItems: {
     type: Array,
@@ -91,7 +91,7 @@ const Na = ["header", "button"], $a = {
     return (c, h) => (g(), C("div", {
       class: I(i(s).container)
     }, [
-      te(c.$slots, "trigger", { toggleCollapsible: i(o) }),
+      ee(c.$slots, "trigger", { toggleCollapsible: i(o) }),
       E(M2, {
         css: !1,
         onBeforeEnter: i(l),
@@ -103,7 +103,7 @@ const Na = ["header", "button"], $a = {
           o2(A("div", {
             style: ke(i(a))
           }, [
-            te(c.$slots, "default")
+            ee(c.$slots, "default")
           ], 4), [
             [dt, c.modelValue]
           ])
@@ -2109,7 +2109,7 @@ const O = /* @__PURE__ */ B0(ri), ni = (e, t) => {
       onClick: d[0] || (d[0] = //@ts-ignore
       (...p) => i(l) && i(l)(...p))
     }), [
-      te(u.$slots, "default")
+      ee(u.$slots, "default")
     ], 16));
   }
 }), si = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
@@ -2183,7 +2183,7 @@ const O = /* @__PURE__ */ B0(ri), ni = (e, t) => {
         }, {
           default: F(() => [
             A("div", ci, [
-              te(l.$slots, d.collapseId)
+              ee(l.$slots, d.collapseId)
             ])
           ]),
           _: 2
@@ -2392,7 +2392,7 @@ const O = /* @__PURE__ */ B0(ri), ni = (e, t) => {
   setup(e) {
     const t = e, { badgeClasses: r } = Di(t);
     return (n, s) => (g(), C("div", Ii, [
-      te(n.$slots, "default"),
+      ee(n.$slots, "default"),
       A("div", {
         class: I(i(r).baseClasses)
       }, [
@@ -2426,7 +2426,7 @@ const O = /* @__PURE__ */ B0(ri), ni = (e, t) => {
           key: 0,
           class: I([i(r).imageClasses, "avatar__slot spr-border-color-weak spr-border spr-border-solid"])
         }, [
-          te(o.$slots, "default", {}, () => [
+          ee(o.$slots, "default", {}, () => [
             o.src ? (g(), C("img", {
               key: 0,
               src: o.src,
@@ -2561,6 +2561,10 @@ const O = /* @__PURE__ */ B0(ri), ni = (e, t) => {
   subDescription: {
     type: String,
     default: ""
+  },
+  icon: {
+    type: String,
+    default: ""
   }
 }, Ei = {
   onClick: (e) => e instanceof MouseEvent
@@ -2602,7 +2606,7 @@ const O = /* @__PURE__ */ B0(ri), ni = (e, t) => {
     "flexible-weekly": "spr-border-[#539300] spr-bg-[#EBFFD2]",
     "flexible-daily": "spr-border-[#0084CB] spr-bg-[#D4F0FF]",
     "fixed-flexible": "spr-border-[#C771A6] spr-bg-[#FFF2FA]"
-  }, o = L(() => e.title || e.description || d.value), l = L(() => r.includes(e.type) && e.status != "error"), u = L(() => e.status === "error"), d = L(() => n[e.type] || e.subDescription), p = L(() => s[e.type] || ""), c = L(() => a[e.type] || "spr-border-color-supporting spr-background-color-surface");
+  }, o = L(() => e.title || e.description || d.value), l = L(() => r.includes(e.type) && e.status != "error"), u = L(() => e.status === "error"), d = L(() => e.subDescription || n[e.type]), p = L(() => e.icon || s[e.type]), c = L(() => a[e.type] || "spr-border-color-supporting spr-background-color-surface");
   return {
     getCalendarCellClassess: L(() => {
       const f = O(
@@ -2647,7 +2651,7 @@ const O = /* @__PURE__ */ B0(ri), ni = (e, t) => {
     }
   };
 }, Yi = {
-  key: 2,
+  key: 1,
   class: "spr-break-words"
 }, h0 = /* @__PURE__ */ oe({
   __name: "calendar-cell",
@@ -2660,16 +2664,18 @@ const O = /* @__PURE__ */ B0(ri), ni = (e, t) => {
       onClick: h[0] || (h[0] = //@ts-ignore
       (...M) => i(p) && i(p)(...M))
     }, [
-      te(c.$slots, "default", {}, () => [
+      ee(c.$slots, "prefix", {}, () => [
+        i(l) ? (g(), J(i(W), {
+          key: 0,
+          icon: i(o)
+        }, null, 8, ["icon"])) : S("", !0)
+      ]),
+      ee(c.$slots, "default", {}, () => [
         i(u) ? (g(), J(qn, {
           key: 0,
           state: r.state,
           size: "sm"
         }, null, 8, ["state"])) : S("", !0),
-        i(l) ? (g(), J(i(W), {
-          key: 1,
-          icon: i(o)
-        }, null, 8, ["icon"])) : S("", !0),
         i(d) ? (g(), C("div", Yi, [
           r.title ? (g(), C("div", {
             key: 0,
@@ -2874,7 +2880,7 @@ const O = /* @__PURE__ */ B0(ri), ni = (e, t) => {
           key: 0,
           class: I(i(a).prefixSlotClasses)
         }, [
-          te(d.$slots, "prefix", {}, void 0, !0)
+          ee(d.$slots, "prefix", {}, void 0, !0)
         ], 2)) : S("", !0),
         A("input", Qe({
           ref_key: "inputTextRef",
@@ -2895,7 +2901,7 @@ const O = /* @__PURE__ */ B0(ri), ni = (e, t) => {
           key: 1,
           class: I(i(a).trailingSlotClasses)
         }, [
-          te(d.$slots, "trailing", {}, void 0, !0)
+          ee(d.$slots, "trailing", {}, void 0, !0)
         ], 2)) : S("", !0),
         d.$slots.icon ? (g(), C("div", {
           key: 2,
@@ -2903,14 +2909,14 @@ const O = /* @__PURE__ */ B0(ri), ni = (e, t) => {
           onClick: p[1] || (p[1] = //@ts-ignore
           (...c) => i(u) && i(u)(...c))
         }, [
-          te(d.$slots, "icon", {}, void 0, !0)
+          ee(d.$slots, "icon", {}, void 0, !0)
         ], 2)) : S("", !0)
       ], 2),
       n.displayHelper ? (g(), C("div", {
         key: 1,
         class: I(i(a).helperClasses)
       }, [
-        te(d.$slots, "helperMessage", {}, () => [
+        ee(d.$slots, "helperMessage", {}, () => [
           n.helperIcon ? (g(), J(i(W), {
             key: 0,
             icon: n.helperIcon,
@@ -3043,20 +3049,20 @@ const O = /* @__PURE__ */ B0(ri), ni = (e, t) => {
             t.subtitle ? (g(), C("div", r1, G(t.subtitle), 1)) : S("", !0)
           ])
         ])) : S("", !0),
-        s.$slots.header ? te(s.$slots, "header", { key: 1 }) : S("", !0)
+        s.$slots.header ? ee(s.$slots, "header", { key: 1 }) : S("", !0)
       ], 2)) : S("", !0),
       s.$slots.content ? (g(), C("div", {
         key: 1,
         class: I(i(n).contentPaddingSizeClasses)
       }, [
-        te(s.$slots, "content")
+        ee(s.$slots, "content")
       ], 2)) : S("", !0),
-      te(s.$slots, "default"),
+      ee(s.$slots, "default"),
       s.$slots.footer && s.$props.showFooter ? (g(), C("div", {
         key: 2,
         class: I(i(n).footerClasses)
       }, [
-        te(s.$slots, "footer")
+        ee(s.$slots, "footer")
       ], 2)) : S("", !0)
     ], 2));
   }
@@ -4656,7 +4662,7 @@ function j1(e, t, r, n, s, a) {
       "v-popper--shown": e.slotData.isShown
     }])
   }, [
-    te(e.$slots, "default", P0(Y0(e.slotData)))
+    ee(e.$slots, "default", P0(Y0(e.slotData)))
   ], 2);
 }
 const S1 = /* @__PURE__ */ Ht(T1, [["render", j1]]);
@@ -4817,7 +4823,7 @@ function R1(e, t, r, n, s, a) {
       A("div", P1, [
         e.mounted ? (g(), C(X, { key: 0 }, [
           A("div", null, [
-            te(e.$slots, "default")
+            ee(e.$slots, "default")
           ]),
           e.handleResize ? (g(), J(o, {
             key: 0,
@@ -5083,7 +5089,7 @@ function Q1(e, t, r, n, s, a) {
       classes: v,
       result: N
     }) => [
-      te(e.$slots, "default", {
+      ee(e.$slots, "default", {
         shown: d,
         show: M,
         hide: f
@@ -5103,7 +5109,7 @@ function Q1(e, t, r, n, s, a) {
         onResize: y
       }, {
         default: F(() => [
-          te(e.$slots, "popper", {
+          ee(e.$slots, "popper", {
             shown: d,
             hide: f
           })
@@ -5902,7 +5908,7 @@ const Le = V1, P2 = H1, Z1 = ["A-Z", "Z-A"], G1 = [
         A("div", {
           onClick: m[0] || (m[0] = (y) => s.value = !0)
         }, [
-          te(f.$slots, "default")
+          ee(f.$slots, "default")
         ]),
         A("div", {
           id: r.id,
@@ -6016,10 +6022,10 @@ const Le = V1, P2 = H1, Z1 = ["A-Z", "Z-A"], G1 = [
           class: I(i(r).toneClasses)
         }, [
           n.$slots.icon ? (g(), C("div", Pl, [
-            te(n.$slots, "icon")
+            ee(n.$slots, "icon")
           ])) : S("", !0),
           n.$slots.avatar ? (g(), C("div", Yl, [
-            te(n.$slots, "avatar")
+            ee(n.$slots, "avatar")
           ])) : S("", !0),
           n.url && !n.$slots.avatar ? (g(), C("div", Ul, [
             A("img", {
@@ -6178,14 +6184,14 @@ function Hl() {
             return V ? R : R.endOf(d);
           }, fe = function(Ne, ae) {
             return w.w(Y.toDate()[Ne].apply(Y.toDate("s"), (V ? [0, 0, 0, 0] : [23, 59, 59, 999]).slice(ae)), Y);
-          }, ee = this.$W, se = this.$M, ue = this.$D, ye = "set" + (this.$u ? "UTC" : "");
+          }, te = this.$W, se = this.$M, ue = this.$D, ye = "set" + (this.$u ? "UTC" : "");
           switch (ne) {
             case M:
               return V ? ie(1, 0) : ie(31, 11);
             case c:
               return V ? ie(1, se) : ie(0, se + 1);
             case p:
-              var he = this.$locale().weekStart || 0, De = (ee < he ? ee + 7 : ee) - he;
+              var he = this.$locale().weekStart || 0, De = (te < he ? te + 7 : te) - he;
               return ie(V ? ue - De : ue + (6 - De), se);
             case d:
             case f:
@@ -6204,8 +6210,8 @@ function Hl() {
         }, Q.$set = function(B, k) {
           var Y, V = w.p(B), ne = "set" + (this.$u ? "UTC" : ""), ie = (Y = {}, Y[d] = ne + "Date", Y[f] = ne + "Date", Y[c] = ne + "Month", Y[M] = ne + "FullYear", Y[u] = ne + "Hours", Y[l] = ne + "Minutes", Y[o] = ne + "Seconds", Y[a] = ne + "Milliseconds", Y)[V], fe = V === d ? this.$D + (k - this.$W) : k;
           if (V === c || V === M) {
-            var ee = this.clone().set(f, 1);
-            ee.$d[ie](fe), ee.init(), this.$d = ee.set(f, Math.min(this.$D, ee.daysInMonth())).$d;
+            var te = this.clone().set(f, 1);
+            te.$d[ie](fe), te.init(), this.$d = te.set(f, Math.min(this.$D, te.daysInMonth())).$d;
           } else ie && this.$d[ie](fe);
           return this.init(), this;
         }, Q.set = function(B, k) {
@@ -6223,14 +6229,14 @@ function Hl() {
           if (ne === M) return this.set(M, this.$y + B);
           if (ne === d) return ie(1);
           if (ne === p) return ie(7);
-          var fe = (Y = {}, Y[l] = n, Y[u] = s, Y[o] = r, Y)[ne] || 1, ee = this.$d.getTime() + B * fe;
-          return w.w(ee, this);
+          var fe = (Y = {}, Y[l] = n, Y[u] = s, Y[o] = r, Y)[ne] || 1, te = this.$d.getTime() + B * fe;
+          return w.w(te, this);
         }, Q.subtract = function(B, k) {
           return this.add(-1 * B, k);
         }, Q.format = function(B) {
           var k = this, Y = this.$locale();
           if (!this.isValid()) return Y.invalidDate || m;
-          var V = B || "YYYY-MM-DDTHH:mm:ssZ", ne = w.z(this), ie = this.$H, fe = this.$m, ee = this.$M, se = Y.weekdays, ue = Y.months, ye = Y.meridiem, he = function(ae, R, we, Ke) {
+          var V = B || "YYYY-MM-DDTHH:mm:ssZ", ne = w.z(this), ie = this.$H, fe = this.$m, te = this.$M, se = Y.weekdays, ue = Y.months, ye = Y.meridiem, he = function(ae, R, we, Ke) {
             return ae && (ae[R] || ae(k, V)) || we[R].slice(0, Ke);
           }, De = function(ae) {
             return w.s(ie % 12 || 12, ae, "0");
@@ -6246,13 +6252,13 @@ function Hl() {
                 case "YYYY":
                   return w.s(k.$y, 4, "0");
                 case "M":
-                  return ee + 1;
+                  return te + 1;
                 case "MM":
-                  return w.s(ee + 1, 2, "0");
+                  return w.s(te + 1, 2, "0");
                 case "MMM":
-                  return he(Y.monthsShort, ee, ue, 3);
+                  return he(Y.monthsShort, te, ue, 3);
                 case "MMMM":
-                  return he(ue, ee);
+                  return he(ue, te);
                 case "D":
                   return k.$D;
                 case "DD":
@@ -6296,7 +6302,7 @@ function Hl() {
         }, Q.utcOffset = function() {
           return 15 * -Math.round(this.$d.getTimezoneOffset() / 15);
         }, Q.diff = function(B, k, Y) {
-          var V, ne = this, ie = w.p(k), fe = $(B), ee = (fe.utcOffset() - this.utcOffset()) * n, se = this - fe, ue = function() {
+          var V, ne = this, ie = w.p(k), fe = $(B), te = (fe.utcOffset() - this.utcOffset()) * n, se = this - fe, ue = function() {
             return w.m(ne, fe);
           };
           switch (ie) {
@@ -6310,10 +6316,10 @@ function Hl() {
               V = ue() / 3;
               break;
             case p:
-              V = (se - ee) / 6048e5;
+              V = (se - te) / 6048e5;
               break;
             case d:
-              V = (se - ee) / 864e5;
+              V = (se - te) / 864e5;
               break;
             case u:
               V = se / s;
@@ -6526,7 +6532,7 @@ const le = /* @__PURE__ */ B0(Zl), Gl = (e, t) => {
         A("div", {
           class: I(i(p).contentWrapper)
         }, [
-          te(P.$slots, "filter", {}, () => [
+          ee(P.$slots, "filter", {}, () => [
             A("div", {
               class: I(i(p).calendarFilter)
             }, [
@@ -6888,7 +6894,7 @@ const le = /* @__PURE__ */ B0(Zl), Gl = (e, t) => {
     }, [
       c.variant === "tag" ? (g(), C(X, { key: 0 }, [
         i(p) ? (g(), C("span", v3, [
-          te(c.$slots, "icon", {}, () => [
+          ee(c.$slots, "icon", {}, () => [
             E(i(W), {
               icon: i(u),
               class: "spr-font-size-300"
@@ -6929,7 +6935,7 @@ const le = /* @__PURE__ */ B0(Zl), Gl = (e, t) => {
             ["stop"]
           ), ["enter"]))
         }, [
-          te(c.$slots, "close-icon", {}, () => [
+          ee(c.$slots, "close-icon", {}, () => [
             E(i(W), { icon: "ph:x" })
           ])
         ], 40, D3)) : S("", !0)
@@ -7192,13 +7198,13 @@ const Y3 = (e, t) => {
     var q;
     const K = (q = a0("text", j.value)) == null ? void 0 : q.monthValue;
     return T.value && !j.value && !ie(_) ? _.date.getDate() !== Number(T.value) : T.value && j && !ie(_) ? _.date.getDate() !== Number(T.value) || _.date.getMonth() !== K : !!(!T.value && j.value && !ie(_) || !T.value && !j.value && !ie(_));
-  }, ie = (_) => !!(fe(_) || ee(_) || se(_) || ue(_) || ye(_) || he(_) || De(_)), fe = (_) => {
+  }, ie = (_) => !!(fe(_) || te(_) || se(_) || ue(_) || ye(_) || he(_) || De(_)), fe = (_) => {
     if (d != null && d.value && d.value.from && d.value.to) {
       const K = le(d.value.from, "MM-DD-YYYY").startOf("day"), q = le(d.value.to, "MM-DD-YYYY").endOf("day"), ce = le(_.date);
       return ce.isSameOrAfter(K, "day") && ce.isSameOrBefore(q, "day");
     }
     return !1;
-  }, ee = (_) => {
+  }, te = (_) => {
     if (d != null && d.value && (d != null && d.value.pastDates)) {
       const K = le(_.date);
       if (typeof d.value.pastDates == "boolean")
@@ -7535,7 +7541,7 @@ const Y3 = (e, t) => {
       yearTabGoToNextPage: ne,
       yearTabIsPreviousButtonDisabled: ie,
       yearTabIsNextButtonDisabled: fe,
-      yearTabHandleSelectedYear: ee,
+      yearTabHandleSelectedYear: te,
       handleMonthInput: se,
       handleDateInput: ue,
       handleYearInput: ye,
@@ -7711,7 +7717,7 @@ const Y3 = (e, t) => {
                       "spr-border-color-brand-base spr-background-color-single-active": R === Number(i(y))
                     }
                   ]),
-                  onClick: (Ke) => i(ee)(String(R))
+                  onClick: (Ke) => i(te)(String(R))
                 }, [
                   A("span", null, G(R), 1),
                   R === i(c).year() ? (g(), C("div", i4)) : S("", !0)
@@ -7812,7 +7818,7 @@ const Y3 = (e, t) => {
         key: 0,
         class: I(i(s).datePickerInputHelperClasses)
       }, [
-        te(Ne.$slots, "helperMessage", {}, () => [
+        ee(Ne.$slots, "helperMessage", {}, () => [
           r.helperIcon ? (g(), J(i(W), {
             key: 0,
             icon: r.helperIcon,
@@ -7899,7 +7905,7 @@ const Y3 = (e, t) => {
       id: "empty-state",
       class: I(i(s))
     }, [
-      te(a.$slots, "default", {
+      ee(a.$slots, "default", {
         class: I(i(r).imageSizeClasses)
       }),
       a.$slots.default ? S("", !0) : (g(), C("div", {
@@ -7917,7 +7923,7 @@ const Y3 = (e, t) => {
           A("span", null, G(a.description), 1),
           A("div", x4, G(a.subDescription), 1)
         ]),
-        te(a.$slots, "button")
+        ee(a.$slots, "button")
       ])
     ], 2));
   }
@@ -8216,38 +8222,38 @@ const Y3 = (e, t) => {
   ), T = U([]), D = U(null), P = U([]), b = U(""), $ = L(() => {
     var ue;
     if (l.value) return r.value;
-    const ee = d.value ? "" : f.value.toLowerCase();
-    return (ue = r.value) == null ? void 0 : ue.filter((ye, he) => (p.value.find((Ne) => Ne.value === ye.value && Ne.isSelected) && (r.value[he].isSelected = !0), ye.text.toLowerCase().includes(ee)));
+    const te = d.value ? "" : f.value.toLowerCase();
+    return (ue = r.value) == null ? void 0 : ue.filter((ye, he) => (p.value.find((Ne) => Ne.value === ye.value && Ne.isSelected) && (r.value[he].isSelected = !0), ye.text.toLowerCase().includes(te)));
   }), w = L(() => a.value ? s.value : s.value.filter((se, ue) => (T.value.find(
     (he) => he.value === se.value && he.isSelected
-  ) && (s.value[ue].isSelected = !0), se.text.toLowerCase().includes(m.value.toLowerCase())))), H = L(() => Object.values(x.value).some((ee) => ee.isFilterVisible)), re = L(() => w.value.filter((ee) => ee.isSelected)), Z = (ee) => {
-    t("getFilterData", ee), b.value = ee;
-  }, Q = (ee) => {
+  ) && (s.value[ue].isSelected = !0), se.text.toLowerCase().includes(m.value.toLowerCase())))), H = L(() => Object.values(x.value).some((te) => te.isFilterVisible)), re = L(() => w.value.filter((te) => te.isSelected)), Z = (te) => {
+    t("getFilterData", te), b.value = te;
+  }, Q = (te) => {
     Object.keys(x.value).forEach((se) => {
-      x.value[se].isFilterVisible = se === ee;
+      x.value[se].isFilterVisible = se === te;
     });
   }, B = () => {
-    var ee;
-    (ee = n.value) != null && ee.length && (x.value = n.value.reduce(
+    var te;
+    (te = n.value) != null && te.length && (x.value = n.value.reduce(
       (se, { isFilterVisible: ue, columnName: ye, field: he }) => (se[he] = { isFilterVisible: ue || !1, columnName: ye, field: he, count: 0, selected: {} }, se),
       {}
     ));
-  }, k = (ee) => T.value.filter((se) => se.column === ee).length;
+  }, k = (te) => T.value.filter((se) => se.column === te).length;
   Ft(D, () => {
     M.value = !1;
   });
   const Y = () => {
-    var ee;
-    (ee = r.value) != null && ee.length && $.value.forEach((se, ue) => {
+    var te;
+    (te = r.value) != null && te.length && $.value.forEach((se, ue) => {
       $.value[ue].isSelected = !0;
     });
-  }, V = (ee) => {
+  }, V = (te) => {
     const se = Object.values(w.value).filter(
-      (ue) => ue.isSelected && ue.column === ee
+      (ue) => ue.isSelected && ue.column === te
     );
-    T.value = T.value.filter((ue) => ue.column !== ee).concat(se), t("selectedFilter", T.value), x.value[ee].count = se.length, x.value[ee].isFilterVisible = !1;
-  }, ne = (ee) => {
-    w.value.map((se) => (se.value === ee && (se.isSelected = !1), se)), T.value = T.value.filter((se) => se.value !== ee), t("selectedFilter", T.value);
+    T.value = T.value.filter((ue) => ue.column !== te).concat(se), t("selectedFilter", T.value), x.value[te].count = se.length, x.value[te].isFilterVisible = !1;
+  }, ne = (te) => {
+    w.value.map((se) => (se.value === te && (se.isSelected = !1), se)), T.value = T.value.filter((se) => se.value !== te), t("selectedFilter", T.value);
   }, ie = () => {
     if (H.value) {
       t("infiniteScrollFilterTrigger", b.value);
@@ -8257,18 +8263,18 @@ const Y3 = (e, t) => {
   };
   Me(a, () => {
     a.value || getMappedMenuOptionList();
-  }), Me(b, (ee) => {
-    Q(ee);
-  }), Me(u, (ee) => {
-    ee && ($.value.forEach(({ value: se }, ue) => {
-      se === ee && ($.value[ue].isSelected = !1);
+  }), Me(b, (te) => {
+    Q(te);
+  }), Me(u, (te) => {
+    te && ($.value.forEach(({ value: se }, ue) => {
+      se === te && ($.value[ue].isSelected = !1);
     }), p.value = p.value.filter(
-      ({ value: se }) => se !== ee
+      ({ value: se }) => se !== te
     ));
   }), Me(
     () => $.value,
-    (ee) => {
-      const se = ee.filter((he) => he.isSelected), ye = Array.from(
+    (te) => {
+      const se = te.filter((he) => he.isSelected), ye = Array.from(
         new Map(
           [...p.value, ...se].map((he) => [
             he.value,
@@ -8282,13 +8288,13 @@ const Y3 = (e, t) => {
       JSON.stringify(p.value) !== JSON.stringify(ye) && (p.value = ye);
     },
     { deep: !0 }
-  ), Me(f, (ee, se) => {
-    ee !== se && (c.value = ee);
-  }), Me(m, (ee, se) => {
-    ee !== se && (h.value = ee);
+  ), Me(f, (te, se) => {
+    te !== se && (c.value = te);
+  }), Me(m, (te, se) => {
+    te !== se && (h.value = te);
   }), Mt(() => P.value[0], ie, { distance: 10 }), Mt(D, ie, { distance: 10 });
   const fe = L(() => {
-    const ee = O("spr-relative spr-inline-block spr-w-full"), se = O(
+    const te = O("spr-relative spr-inline-block spr-w-full"), se = O(
       "spr-border-color-weak spr-border spr-border-x-0 spr-border-t-0 spr-border-solid spr-p-size-spacing-2xs",
       "spr-flex spr-items-center",
       { "spr-justify-between": n.value.length > 0 && o.value },
@@ -8302,7 +8308,7 @@ const Y3 = (e, t) => {
       "hover:spr-background-color-hover"
     );
     return B(), {
-      MainClasses: ee,
+      MainClasses: te,
       MenuOptionClasses: se,
       PopperWrapperClasses: ue,
       PopperHeaderClasses: ye,
@@ -8577,9 +8583,9 @@ const Y3 = (e, t) => {
                             key: 2,
                             class: I(i(h).LoadingStateClasses)
                           }, [
-                            r.loading ? te(j.$slots, "loading", { key: 0 }, () => [
+                            r.loading ? ee(j.$slots, "loading", { key: 0 }, () => [
                               T[8] || (T[8] = Se(" loading... "))
-                            ]) : te(j.$slots, "empty", { key: 1 }, () => [
+                            ]) : ee(j.$slots, "empty", { key: 1 }, () => [
                               T[9] || (T[9] = Se(" No Result Found! "))
                             ])
                           ], 2)),
@@ -8694,11 +8700,11 @@ const Y3 = (e, t) => {
             ], 8, nd)
           ], 2))), 128))
         ], 512)) : (g(), C("div", od, [
-          j.filling ? te(j.$slots, "loading-state", { key: 0 }, () => [
+          j.filling ? ee(j.$slots, "loading-state", { key: 0 }, () => [
             A("div", {
               class: I(i(h).LoadingStateClasses)
             }, "Loading...", 2)
-          ]) : te(j.$slots, "empty-state", { key: 1 }, () => [
+          ]) : ee(j.$slots, "empty-state", { key: 1 }, () => [
             A("div", {
               class: I(i(h).LoadingStateClasses)
             }, "Result not found!", 2)
@@ -8714,7 +8720,7 @@ const Y3 = (e, t) => {
           }),
           onClick: T[1] || (T[1] = (D) => s.value = !0)
         }, [
-          te(j.$slots, "default", {}, () => [
+          ee(j.$slots, "default", {}, () => [
             E(Oe, {
               id: "search",
               modelValue: i(a),
@@ -8776,12 +8782,12 @@ const cd = {
           class: I([i(n).wrapperClass])
         }, [
           s.$slots.default ? S("", !0) : (g(), C("div", cd, [
-            s.$slots.message ? te(s.$slots, "message", { key: 0 }) : S("", !0),
+            s.$slots.message ? ee(s.$slots, "message", { key: 0 }) : S("", !0),
             s.$slots.actions ? (g(), C("div", pd, [
-              te(s.$slots, "actions")
+              ee(s.$slots, "actions")
             ])) : S("", !0)
           ])),
-          te(s.$slots, "default")
+          ee(s.$slots, "default")
         ], 2)) : S("", !0)
       ]),
       _: 3
@@ -10621,7 +10627,7 @@ const bc = xs().map((e) => {
       de(t.$slots, (n, s) => ({
         name: s,
         fn: F(() => [
-          te(t.$slots, s)
+          ee(t.$slots, s)
         ])
       }))
     ]), 1040));
@@ -10653,7 +10659,7 @@ const bc = xs().map((e) => {
       de(s.$slots, (o, l) => ({
         name: l,
         fn: F(() => [
-          te(s.$slots, l)
+          ee(s.$slots, l)
         ])
       }))
     ]), 1040, ["type"]));
@@ -10689,7 +10695,7 @@ const bc = xs().map((e) => {
       de(t.$slots, (n, s) => ({
         name: s,
         fn: F(() => [
-          te(t.$slots, s)
+          ee(t.$slots, s)
         ])
       }))
     ]), 1040));
@@ -10709,7 +10715,7 @@ const bc = xs().map((e) => {
       de(t.$slots, (n, s) => ({
         name: s,
         fn: F(() => [
-          te(t.$slots, s)
+          ee(t.$slots, s)
         ])
       }))
     ]), 1040));
@@ -12077,7 +12083,7 @@ const k6 = ["white", "dark", "gray", "green"], E6 = [
               class: I(i(s).headerClasses)
             }, [
               !l.$slots.header && l.title ? (g(), C("span", H6, G(l.title), 1)) : S("", !0),
-              te(l.$slots, "header", {}, void 0, !0),
+              ee(l.$slots, "header", {}, void 0, !0),
               r.closeButtonX ? (g(), C("span", {
                 key: 1,
                 class: I(i(s).headerCloseButtonXClasses),
@@ -12093,13 +12099,13 @@ const k6 = ["white", "dark", "gray", "green"], E6 = [
             A("div", {
               class: I(i(s).contentClasses)
             }, [
-              te(l.$slots, "default", {}, void 0, !0)
+              ee(l.$slots, "default", {}, void 0, !0)
             ], 2),
             l.$slots.footer ? (g(), C("footer", {
               key: 1,
               class: I(i(s).footerClasses)
             }, [
-              te(l.$slots, "footer", {}, void 0, !0)
+              ee(l.$slots, "footer", {}, void 0, !0)
             ], 2)) : S("", !0)
           ], 2)) : S("", !0)
         ]),
@@ -12326,7 +12332,7 @@ const k6 = ["white", "dark", "gray", "green"], E6 = [
           class: I(i(l).baseIndicatorClasses)
         }, null, 2),
         A("div", l5, [
-          te(u.$slots, "default", {}, void 0, !0),
+          ee(u.$slots, "default", {}, void 0, !0),
           r.description && r.description !== "" ? (g(), C("span", {
             key: 0,
             class: I(["spr-text-xs spr-font-normal spr-leading-4 spr-text-mushroom-600", { "spr-text-color-disabled": r.disabled }])
@@ -12491,7 +12497,7 @@ const k6 = ["white", "dark", "gray", "green"], E6 = [
       }, [
         A("div", C5, [
           A("div", M5, [
-            te(p.$slots, "logo-image")
+            ee(p.$slots, "logo-image")
           ]),
           r.quickActions && r.quickActions.length > 0 ? (g(), J(i(Le), {
             key: 0,
@@ -13352,7 +13358,7 @@ const k6 = ["white", "dark", "gray", "green"], E6 = [
           }, [
             r.hideHeader ? S("", !0) : (g(), C(X, { key: 0 }, [
               l.$slots.header ? (g(), C("div", D9, [
-                te(l.$slots, "header")
+                ee(l.$slots, "header")
               ])) : (g(), C("div", {
                 key: 0,
                 class: I(i(s).sidepanelHeaderClasses)
@@ -13372,13 +13378,13 @@ const k6 = ["white", "dark", "gray", "green"], E6 = [
               id: "sidepanel-content",
               class: I(i(s).sidepanelContentClasses)
             }, [
-              te(l.$slots, "default")
+              ee(l.$slots, "default")
             ], 2),
             l.$slots.footer ? (g(), C("div", {
               key: 1,
               class: I(i(s).sidepanelFooterClasses)
             }, [
-              te(l.$slots, "footer")
+              ee(l.$slots, "footer")
             ], 2)) : S("", !0)
           ], 6)) : S("", !0)
         ]),
@@ -13618,7 +13624,7 @@ const k6 = ["white", "dark", "gray", "green"], E6 = [
         }, null, 8, ["icon", "class"])) : S("", !0),
         A("label", null, G(d.text), 1)
       ]),
-      d.showAction ? te(d.$slots, "default", { key: 0 }, () => [
+      d.showAction ? ee(d.$slots, "default", { key: 0 }, () => [
         A("label", {
           class: I([
             i(o),
@@ -14682,8 +14688,8 @@ const h8 = (e) => ({
                     action: c.action || c.defaultAction
                   }, {
                     default: F(() => [
-                      te(d.$slots, "default", {}, () => [
-                        te(d.$slots, "snackbarActions", {}, void 0, !0)
+                      ee(d.$slots, "default", {}, () => [
+                        ee(d.$slots, "snackbarActions", {}, void 0, !0)
                       ], !0)
                     ]),
                     _: 2
@@ -14970,8 +14976,8 @@ const h8 = (e) => ({
         for: i(s),
         class: "spr-cursor-pointer"
       }, [
-        te(f.$slots, "leftText", {}, () => [
-          te(f.$slots, "default", {}, void 0, !0)
+        ee(f.$slots, "leftText", {}, () => [
+          ee(f.$slots, "default", {}, void 0, !0)
         ], !0)
       ], 8, _8)),
       A("div", {
@@ -15009,7 +15015,7 @@ const h8 = (e) => ({
         for: i(s),
         class: "spr-cursor-pointer"
       }, [
-        te(f.$slots, "rightText", {}, void 0, !0)
+        ee(f.$slots, "rightText", {}, void 0, !0)
       ], 8, E8))
     ], 16));
   }
@@ -15068,7 +15074,7 @@ const h8 = (e) => ({
     return (u, d) => (g(), C("div", {
       class: I(i(s))
     }, [
-      te(u.$slots, "tableActionSection", {}, () => [
+      ee(u.$slots, "tableActionSection", {}, () => [
         A("div", {
           class: I(i(o))
         }, [
@@ -15529,7 +15535,7 @@ const h8 = (e) => ({
       V
     ), ie = "spr-flex spr-flex-row spr-items-center spr-gap-size-spacing-5xs", fe = O({
       "spr-px-size-spacing-sm spr-py-size-spacing-xs": !!r.default
-    }), ee = "spr-border-color-weak spr-w-full spr-border spr-border-solid", se = "spr-background-color-surface spr-text-color-strong spr-font-size-100 spr-font-line-height-100 spr-font-letter-spacing-normal spr-uppercase", ue = O("hover:spr-background-color-hover spr-min-h-[60px]", {
+    }), te = "spr-border-color-weak spr-w-full spr-border spr-border-solid", se = "spr-background-color-surface spr-text-color-strong spr-font-size-100 spr-font-line-height-100 spr-font-letter-spacing-normal spr-uppercase", ue = O("hover:spr-background-color-hover spr-min-h-[60px]", {
       "spr-cursor-pointer": e.isRowClickable
     }), ye = "spr-border-color-weak spr-overflow-hidden spr-border-x-0 spr-border-b spr-border-t-0 spr-border-solid spr-p-3", he = "spr-border-color-weak spr-overflow-hidden spr-border-x-0 spr-border-b spr-border-t-0 spr-border-solid spr-p-3", De = O("spr-h-full"), Ne = O({
       "spr-overflow-y-auto spr-h-full": l.value,
@@ -15549,7 +15555,7 @@ const h8 = (e) => ({
       headerClasses: ne,
       tableWrapperClasses: k,
       defaultSlotClasses: fe,
-      tableHeaderActionsClasses: ee,
+      tableHeaderActionsClasses: te,
       headerNameClass: ie,
       tableCellSlotClasses: se,
       multiselectRowClass: R,
@@ -15678,7 +15684,7 @@ const h8 = (e) => ({
         key: 0,
         class: I(i(d).defaultSlotClasses)
       }, [
-        te(j.$slots, "default")
+        ee(j.$slots, "default")
       ], 2)) : S("", !0),
       i(l) ? (g(), C("div", {
         key: 1,
@@ -15695,7 +15701,7 @@ const h8 = (e) => ({
           "toggle-filter": r.tableActions.filter
         }, {
           tableActionSection: F(() => [
-            te(j.$slots, "tableActionSection")
+            ee(j.$slots, "tableActionSection")
           ]),
           _: 3
         }, 8, ["search-model", "toggle-search", "toggle-option", "toggle-filter", "onUpdate:searchModel"])
@@ -15750,7 +15756,7 @@ const h8 = (e) => ({
                 key: 1,
                 class: I(i(d).headerClasses)
               }, [
-                te(j.$slots, "action-name", {
+                ee(j.$slots, "action-name", {
                   class: I(i(d).tableCellSlotClasses)
                 })
               ], 2)) : S("", !0)
@@ -15783,7 +15789,7 @@ const h8 = (e) => ({
                 key: $,
                 class: I(i(d).tableDataClasses)
               }, [
-                j.$slots[b.field] ? te(j.$slots, b.field, {
+                j.$slots[b.field] ? ee(j.$slots, b.field, {
                   key: 0,
                   row: D,
                   rowIndex: P
@@ -15836,7 +15842,7 @@ const h8 = (e) => ({
                 class: I(i(d).tableRowActionClasses)
               }, [
                 A("div", A7, [
-                  te(j.$slots, "action", { row: D })
+                  ee(j.$slots, "action", { row: D })
                 ])
               ], 2)) : S("", !0)
             ], 42, f7))), 128))
@@ -15849,7 +15855,7 @@ const h8 = (e) => ({
                 colspan: i(o),
                 class: "spr-overflow-hidden"
               }, [
-                te(j.$slots, "loading", {}, () => [
+                ee(j.$slots, "loading", {}, () => [
                   T[1] || (T[1] = A("div", { class: "spr-flex spr-items-center spr-justify-center" }, "Loading...", -1))
                 ])
               ], 8, j7)
@@ -15858,7 +15864,7 @@ const h8 = (e) => ({
                 colspan: i(o),
                 class: "spr-flex spr-h-full spr-items-center spr-justify-center"
               }, [
-                te(j.$slots, "empty-state", {}, () => [
+                ee(j.$slots, "empty-state", {}, () => [
                   E(ys, { size: i(p) }, null, 8, ["size"])
                 ])
               ], 8, w7)
@@ -15870,7 +15876,7 @@ const h8 = (e) => ({
         key: 2,
         class: I(i(d).tableFooterClasses)
       }, [
-        te(j.$slots, "footer")
+        ee(j.$slots, "footer")
       ], 2)) : S("", !0)
     ], 2));
   }
@@ -16141,7 +16147,7 @@ const h8 = (e) => ({
           key: 0,
           class: I(i(a).helperClasses)
         }, [
-          te(o.$slots, "helperMessage", {}, () => [
+          ee(o.$slots, "helperMessage", {}, () => [
             r.helperIcon ? (g(), J(i(W), {
               key: 0,
               icon: r.helperIcon,
@@ -16155,7 +16161,7 @@ const h8 = (e) => ({
           key: 1,
           class: I(i(a).helperClasses)
         }, [
-          te(o.$slots, "counter", {}, () => [
+          ee(o.$slots, "counter", {}, () => [
             A("span", null, G(`${o.$attrs.modelValue.length}/${r.maxLength}`), 1)
           ])
         ], 2)) : S("", !0)
@@ -16399,13 +16405,13 @@ const h8 = (e) => ({
     }, {
       popper: F(() => [
         t.text ? (g(), C("span", lp, G(t.text), 1)) : S("", !0),
-        te(s.$slots, "popper-content")
+        ee(s.$slots, "popper-content")
       ]),
       default: F(() => [
-        te(s.$slots, "default")
+        ee(s.$slots, "default")
       ]),
       _: 3
-    }, 8, ["class", "aria-id", "placement"])) : te(s.$slots, "default", { key: 1 });
+    }, 8, ["class", "aria-id", "placement"])) : ee(s.$slots, "default", { key: 1 });
   }
 }), up = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
   __proto__: null,

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "design-system-next",
   "private": false,
-  "version": "2.7.20",
+  "version": "2.7.21",
   "main": "./dist/design-system-next.js",
   "module": "./dist/design-system-next.js",
   "repository": {

package/src/components/calendar-cell/calendar-cell.ts

@@ -41,6 +41,10 @@ export const calendarCellPropTypes = {
     type: String,
     default: '',
   },
+  icon: {
+    type: String,
+    default: '',
+  },
 };
 
 export type CalendarCellPropTypes = ExtractPropTypes<typeof calendarCellPropTypes>;

package/src/components/calendar-cell/calendar-cell.vue

@@ -1,9 +1,10 @@
 <template>
   <div :class="getCalendarCellClassess.getMainClasses" @click="handleClick">
+    <slot name="prefix">
+      <Icon v-if="hasIconStatus" :icon="getCellIcon" />
+    </slot>
     <slot>
       <spr-status v-if="isError" :state="props.state" size="sm" />
-      <Icon v-if="hasIconStatus" :icon="getCellIcon" />
-
       <div v-if="hasContent" class="spr-break-words">
         <div v-if="props.title" :class="getCalendarCellClassess.titleClasses">
           {{ props.title }}

package/src/components/calendar-cell/use-calendar-cell.ts

@@ -53,11 +53,11 @@ export const useCalendarCell = (props: CalendarCellPropTypes, emit: SetupContext
   const isError = computed(() => props.status === 'error');
 
   const getShiftLabel = computed((): string => {
-    return shiftLabels[props.type] || props.subDescription;
+    return props.subDescription || shiftLabels[props.type];
   });
 
   const getCellIcon = computed((): string => {
-    return iconMap[props.type] || '';
+    return props.icon || iconMap[props.type];
   });
 
   const getCellClasses = computed((): string => {