design-system-next 2.3.0 → 2.3.1

package/dist/design-system-next.js

@@ -825,7 +825,7 @@ function oo(e, t, r, n) {
       $.status === "pending" && ($.status = "aborted");
     }), f = [];
   }
-  function j($, D, F) {
+  function j($, D, Y) {
     const O = D !== "success";
     switch (f = f.filter((x) => x !== $), u) {
       case "pending":
@@ -838,11 +838,11 @@ function oo(e, t, r, n) {
         return;
     }
     if (D === "abort") {
-      p = F, m();
+      p = Y, m();
       return;
     }
     if (O) {
-      p = F, f.length || (o.length ? w() : m());
+      p = Y, f.length || (o.length ? w() : m());
       return;
     }
     if (h(), b(), !e.random) {
@@ -850,7 +850,7 @@ function oo(e, t, r, n) {
       x !== -1 && x !== e.index && (e.index = x);
     }
     u = "completed", M.forEach((x) => {
-      x(F);
+      x(Y);
     });
   }
   function w() {
@@ -871,8 +871,8 @@ function oo(e, t, r, n) {
     const D = {
       status: "pending",
       resource: $,
-      callback: (F, O) => {
-        j(D, F, O);
+      callback: (Y, O) => {
+        j(D, Y, O);
       }
     };
     f.push(D), d++, c = setTimeout(w, e.rotate), r($, t, D.callback);
@@ -1819,8 +1819,8 @@ function si(e, t = {}) {
       return m && b;
     }, h = () => /^(?:(?!chrome|android).)*safari/i.test(navigator.userAgent) && !("chrome" in window), N = (C, v) => {
       var m, b, j, w, $, D;
-      const F = (m = C.dataTransfer) == null ? void 0 : m.items;
-      if (i = (b = F && M(F)) != null ? b : !1, p && C.preventDefault(), !h() && !i) {
+      const Y = (m = C.dataTransfer) == null ? void 0 : m.items;
+      if (i = (b = Y && M(Y)) != null ? b : !1, p && C.preventDefault(), !h() && !i) {
         C.dataTransfer && (C.dataTransfer.dropEffect = "none");
         return;
       }
@@ -1997,7 +1997,7 @@ function li(e, t = {}) {
       N(void 0, D);
     }
   });
-  function N(D, F) {
+  function N(D, Y) {
     var O, x, S, k;
     if (!d)
       return;
@@ -2005,7 +2005,7 @@ function li(e, t = {}) {
     if (!re)
       return;
     (S = re instanceof Document ? d.document.body : re) == null || S.scrollTo({
-      top: (O = $e(F)) != null ? O : h.value,
+      top: (O = $e(Y)) != null ? O : h.value,
       left: (x = $e(D)) != null ? x : M.value,
       behavior: $e(u)
     });
@@ -2025,22 +2025,22 @@ function li(e, t = {}) {
   }), b = (D) => {
     C.value && (C.value = !1, m.left = !1, m.right = !1, m.top = !1, m.bottom = !1, s(D));
   }, j = Zn(b, r + n), w = (D) => {
-    var F;
+    var Y;
     if (!d)
       return;
-    const O = ((F = D == null ? void 0 : D.document) == null ? void 0 : F.documentElement) || (D == null ? void 0 : D.documentElement) || ze(D), { display: x, flexDirection: S, direction: k } = getComputedStyle(O), re = k === "rtl" ? -1 : 1, Q = O.scrollLeft;
+    const O = ((Y = D == null ? void 0 : D.document) == null ? void 0 : Y.documentElement) || (D == null ? void 0 : D.documentElement) || ze(D), { display: x, flexDirection: S, direction: k } = getComputedStyle(O), re = k === "rtl" ? -1 : 1, Q = O.scrollLeft;
     m.left = Q < c.value, m.right = Q > c.value;
     const R = Math.abs(Q * re) <= (o.left || 0), P = Math.abs(Q * re) + O.clientWidth >= O.scrollWidth - (o.right || 0) - br;
     x === "flex" && S === "row-reverse" ? (v.left = P, v.right = R) : (v.left = R, v.right = P), c.value = Q;
     let V = O.scrollTop;
     D === d.document && !V && (V = d.document.body.scrollTop), m.top = V < f.value, m.bottom = V > f.value;
-    const Y = Math.abs(V) <= (o.top || 0), W = Math.abs(V) + O.clientHeight >= O.scrollHeight - (o.bottom || 0) - br;
-    x === "flex" && S === "column-reverse" ? (v.top = W, v.bottom = Y) : (v.top = Y, v.bottom = W), f.value = V;
+    const F = Math.abs(V) <= (o.top || 0), W = Math.abs(V) + O.clientHeight >= O.scrollHeight - (o.bottom || 0) - br;
+    x === "flex" && S === "column-reverse" ? (v.top = W, v.bottom = F) : (v.top = F, v.bottom = W), f.value = V;
   }, $ = (D) => {
-    var F;
+    var Y;
     if (!d)
       return;
-    const O = (F = D.target.documentElement) != null ? F : D.target;
+    const O = (Y = D.target.documentElement) != null ? Y : D.target;
     w(O), C.value = !0, j(D), a(D);
   };
   return me(
@@ -2431,13 +2431,13 @@ const di = (e, t) => {
         "spr-border-dashed": e.status === "pending",
         "spr-border-solid spr-border-color-danger-base": e.status === "error",
         "spr-border-solid": !e.status || e.status !== "pending" && e.status !== "error"
-      }), C = _("spr-text-color-strong spr-body-xs-regular-medium", {
+      }), C = _("spr-text-color-strong spr-body-sm-regular-medium", {
         "spr-text-color-danger-base": e.status === "error"
-      }), v = _("spr-text-color-strong spr-body-xs-regular", {
+      }), v = _("spr-text-color-strong spr-body-sm-regular", {
         "spr-text-color-danger-base": e.status === "error"
-      }), m = _("spr-text-color-strong spr-body-xs-regular", {
+      }), m = _("spr-text-color-strong spr-body-sm-regular", {
         "spr-text-color-danger-base": e.status === "error",
-        "spr-text-color-strong spr-body-xs-regular-medium": r.includes(e.type)
+        "spr-text-color-strong spr-body-sm-regular-medium": r.includes(e.type)
       }), b = _(h, c.value, N);
       return {
         titleClasses: C,
@@ -3306,7 +3306,7 @@ const p1 = (e) => ({
     }, M = Qt(s), h = Rt(M), N = await o.getDimensions(d), C = M === "y", v = C ? "top" : "left", m = C ? "bottom" : "right", b = C ? "clientHeight" : "clientWidth", j = a.reference[h] + a.reference[M] - f[M] - a.floating[h], w = f[M] - a.reference[M], $ = await (o.getOffsetParent == null ? void 0 : o.getOffsetParent(d));
     let D = $ ? $[b] : 0;
     (!D || !await (o.isElement == null ? void 0 : o.isElement($))) && (D = i.floating[b] || a.floating[h]);
-    const F = j / 2 - w / 2, O = D / 2 - N[h] / 2 - 1, x = G2(c[v], O), S = G2(c[m], O), k = x, re = D - N[h] - S, Q = D / 2 - N[h] / 2 + F, R = Mt(k, Q, re), P = !u.arrow && Qe(s) != null && Q !== R && a.reference[h] / 2 - (Q < k ? x : S) - N[h] / 2 < 0, V = P ? Q < k ? Q - k : Q - re : 0;
+    const Y = j / 2 - w / 2, O = D / 2 - N[h] / 2 - 1, x = G2(c[v], O), S = G2(c[m], O), k = x, re = D - N[h] - S, Q = D / 2 - N[h] / 2 + Y, R = Mt(k, Q, re), P = !u.arrow && Qe(s) != null && Q !== R && a.reference[h] / 2 - (Q < k ? x : S) - N[h] / 2 < 0, V = P ? Q < k ? Q - k : Q - re : 0;
     return {
       [M]: f[M] + V,
       data: {
@@ -3417,11 +3417,11 @@ const f1 = function(e) {
         return {};
       const v = Ke(s), m = N2(i), b = Ke(i) === i, j = await (u.isRTL == null ? void 0 : u.isRTL(d.floating)), w = f || (b || !N ? [A0(i)] : i1(i)), $ = h !== "none";
       !f && $ && w.push(...d1(i, N, h, j));
-      const D = [i, ...w], F = await Q0(t, C), O = [];
+      const D = [i, ...w], Y = await Q0(t, C), O = [];
       let x = ((n = a.flip) == null ? void 0 : n.overflows) || [];
-      if (p && O.push(F[v]), c) {
+      if (p && O.push(Y[v]), c) {
         const Q = qn(s, o, j);
-        O.push(F[Q[0]], F[Q[1]]);
+        O.push(Y[Q[0]], Y[Q[1]]);
       }
       if (x = [...x, {
         placement: s,
@@ -3439,20 +3439,20 @@ const f1 = function(e) {
               placement: R
             }
           };
-        let P = (k = x.filter((V) => V.overflows[0] <= 0).sort((V, Y) => V.overflows[1] - Y.overflows[1])[0]) == null ? void 0 : k.placement;
+        let P = (k = x.filter((V) => V.overflows[0] <= 0).sort((V, F) => V.overflows[1] - F.overflows[1])[0]) == null ? void 0 : k.placement;
         if (!P)
           switch (M) {
             case "bestFit": {
               var re;
-              const V = (re = x.filter((Y) => {
+              const V = (re = x.filter((F) => {
                 if ($) {
-                  const W = N2(Y.placement);
+                  const W = N2(F.placement);
                   return W === m || // Create a bias to the `y` side axis due to horizontal
                   // reading directions favoring greater width.
                   W === "y";
                 }
                 return !0;
-              }).map((Y) => [Y.placement, Y.overflows.filter((W) => W > 0).reduce((W, ae) => W + ae, 0)]).sort((Y, W) => Y[1] - W[1])[0]) == null ? void 0 : re[0];
+              }).map((F) => [F.placement, F.overflows.filter((W) => W > 0).reduce((W, ae) => W + ae, 0)]).sort((F, W) => F[1] - W[1])[0]) == null ? void 0 : re[0];
               V && (P = V);
               break;
             }
@@ -3598,14 +3598,14 @@ const M1 = function(e) {
       let C, v;
       c === "top" || c === "bottom" ? (C = c, v = f === (await (o.isRTL == null ? void 0 : o.isRTL(i.floating)) ? "start" : "end") ? "left" : "right") : (v = c, C = f === "end" ? "top" : "bottom");
       const m = N - p.top - p.bottom, b = h - p.left - p.right, j = G2(N - p[C], m), w = G2(h - p[v], b), $ = !t.middlewareData.shift;
-      let D = j, F = w;
-      if ((r = t.middlewareData.shift) != null && r.enabled.x && (F = b), (n = t.middlewareData.shift) != null && n.enabled.y && (D = m), $ && !f) {
+      let D = j, Y = w;
+      if ((r = t.middlewareData.shift) != null && r.enabled.x && (Y = b), (n = t.middlewareData.shift) != null && n.enabled.y && (D = m), $ && !f) {
         const x = f2(p.left, 0), S = f2(p.right, 0), k = f2(p.top, 0), re = f2(p.bottom, 0);
-        M ? F = h - 2 * (x !== 0 || S !== 0 ? x + S : f2(p.left, p.right)) : D = N - 2 * (k !== 0 || re !== 0 ? k + re : f2(p.top, p.bottom));
+        M ? Y = h - 2 * (x !== 0 || S !== 0 ? x + S : f2(p.left, p.right)) : D = N - 2 * (k !== 0 || re !== 0 ? k + re : f2(p.top, p.bottom));
       }
       await u({
         ...t,
-        availableWidth: F,
+        availableWidth: Y,
         availableHeight: D
       });
       const O = await o.getDimensions(i.floating);
@@ -5285,12 +5285,12 @@ function q1() {
         var V = String(Q);
         return !V || V.length >= R ? Q : "" + Array(R + 1 - V.length).join(P) + Q;
       }, j = { s: b, z: function(Q) {
-        var R = -Q.utcOffset(), P = Math.abs(R), V = Math.floor(P / 60), Y = P % 60;
-        return (R <= 0 ? "+" : "-") + b(V, 2, "0") + ":" + b(Y, 2, "0");
+        var R = -Q.utcOffset(), P = Math.abs(R), V = Math.floor(P / 60), F = P % 60;
+        return (R <= 0 ? "+" : "-") + b(V, 2, "0") + ":" + b(F, 2, "0");
       }, m: function Q(R, P) {
         if (R.date() < P.date()) return -Q(P, R);
-        var V = 12 * (P.year() - R.year()) + (P.month() - R.month()), Y = R.clone().add(V, c), W = P - Y < 0, ae = R.clone().add(V + (W ? -1 : 1), c);
-        return +(-(V + (P - Y) / (W ? Y - ae : ae - Y)) || 0);
+        var V = 12 * (P.year() - R.year()) + (P.month() - R.month()), F = R.clone().add(V, c), W = P - F < 0, ae = R.clone().add(V + (W ? -1 : 1), c);
+        return +(-(V + (P - F) / (W ? F - ae : ae - F)) || 0);
       }, a: function(Q) {
         return Q < 0 ? Math.ceil(Q) || 0 : Math.floor(Q);
       }, p: function(Q) {
@@ -5299,27 +5299,27 @@ function q1() {
         return Q === void 0;
       } }, w = "en", $ = {};
       $[w] = m;
-      var D = "$isDayjsObject", F = function(Q) {
+      var D = "$isDayjsObject", Y = function(Q) {
         return Q instanceof k || !(!Q || !Q[D]);
       }, O = function Q(R, P, V) {
-        var Y;
+        var F;
         if (!R) return w;
         if (typeof R == "string") {
           var W = R.toLowerCase();
-          $[W] && (Y = W), P && ($[W] = P, Y = W);
+          $[W] && (F = W), P && ($[W] = P, F = W);
           var ae = R.split("-");
-          if (!Y && ae.length > 1) return Q(ae[0]);
+          if (!F && ae.length > 1) return Q(ae[0]);
         } else {
           var ie = R.name;
-          $[ie] = R, Y = ie;
+          $[ie] = R, F = ie;
         }
-        return !V && Y && (w = Y), Y || !V && w;
+        return !V && F && (w = F), F || !V && w;
       }, x = function(Q, R) {
-        if (F(Q)) return Q.clone();
+        if (Y(Q)) return Q.clone();
         var P = typeof R == "object" ? R : {};
         return P.date = Q, P.args = arguments, new k(P);
       }, S = j;
-      S.l = O, S.i = F, S.w = function(Q, R) {
+      S.l = O, S.i = Y, S.w = function(Q, R) {
         return x(Q, { locale: R.$L, utc: R.$u, x: R.$x, $offset: R.$offset });
       };
       var k = function() {
@@ -5329,18 +5329,18 @@ function q1() {
         var R = Q.prototype;
         return R.parse = function(P) {
           this.$d = function(V) {
-            var Y = V.date, W = V.utc;
-            if (Y === null) return /* @__PURE__ */ new Date(NaN);
-            if (S.u(Y)) return /* @__PURE__ */ new Date();
-            if (Y instanceof Date) return new Date(Y);
-            if (typeof Y == "string" && !/Z$/i.test(Y)) {
-              var ae = Y.match(C);
+            var F = V.date, W = V.utc;
+            if (F === null) return /* @__PURE__ */ new Date(NaN);
+            if (S.u(F)) return /* @__PURE__ */ new Date();
+            if (F instanceof Date) return new Date(F);
+            if (typeof F == "string" && !/Z$/i.test(F)) {
+              var ae = F.match(C);
               if (ae) {
                 var ie = ae[2] - 1 || 0, fe = (ae[7] || "0").substring(0, 3);
                 return W ? new Date(Date.UTC(ae[1], ie, ae[3] || 1, ae[4] || 0, ae[5] || 0, ae[6] || 0, fe)) : new Date(ae[1], ie, ae[3] || 1, ae[4] || 0, ae[5] || 0, ae[6] || 0, fe);
               }
             }
-            return new Date(Y);
+            return new Date(F);
           }(P), this.init();
         }, R.init = function() {
           var P = this.$d;
@@ -5350,24 +5350,24 @@ function q1() {
         }, R.isValid = function() {
           return this.$d.toString() !== N;
         }, R.isSame = function(P, V) {
-          var Y = x(P);
-          return this.startOf(V) <= Y && Y <= this.endOf(V);
+          var F = x(P);
+          return this.startOf(V) <= F && F <= this.endOf(V);
         }, R.isAfter = function(P, V) {
           return x(P) < this.startOf(V);
         }, R.isBefore = function(P, V) {
           return this.endOf(V) < x(P);
-        }, R.$g = function(P, V, Y) {
-          return S.u(P) ? this[V] : this.set(Y, P);
+        }, R.$g = function(P, V, F) {
+          return S.u(P) ? this[V] : this.set(F, P);
         }, R.unix = function() {
           return Math.floor(this.valueOf() / 1e3);
         }, R.valueOf = function() {
           return this.$d.getTime();
         }, R.startOf = function(P, V) {
-          var Y = this, W = !!S.u(V) || V, ae = S.p(P), ie = function(ve, se) {
-            var E = S.w(Y.$u ? Date.UTC(Y.$y, se, ve) : new Date(Y.$y, se, ve), Y);
+          var F = this, W = !!S.u(V) || V, ae = S.p(P), ie = function(ve, se) {
+            var E = S.w(F.$u ? Date.UTC(F.$y, se, ve) : new Date(F.$y, se, ve), F);
             return W ? E : E.endOf(d);
           }, fe = function(ve, se) {
-            return S.w(Y.toDate()[ve].apply(Y.toDate("s"), (W ? [0, 0, 0, 0] : [23, 59, 59, 999]).slice(se)), Y);
+            return S.w(F.toDate()[ve].apply(F.toDate("s"), (W ? [0, 0, 0, 0] : [23, 59, 59, 999]).slice(se)), F);
           }, q = this.$W, ne = this.$M, de = this.$D, Me = "set" + (this.$u ? "UTC" : "");
           switch (ae) {
             case M:
@@ -5392,7 +5392,7 @@ function q1() {
         }, R.endOf = function(P) {
           return this.startOf(P, !1);
         }, R.$set = function(P, V) {
-          var Y, W = S.p(P), ae = "set" + (this.$u ? "UTC" : ""), ie = (Y = {}, Y[d] = ae + "Date", Y[h] = ae + "Date", Y[c] = ae + "Month", Y[M] = ae + "FullYear", Y[u] = ae + "Hours", Y[i] = ae + "Minutes", Y[o] = ae + "Seconds", Y[a] = ae + "Milliseconds", Y)[W], fe = W === d ? this.$D + (V - this.$W) : V;
+          var F, W = S.p(P), ae = "set" + (this.$u ? "UTC" : ""), ie = (F = {}, F[d] = ae + "Date", F[h] = ae + "Date", F[c] = ae + "Month", F[M] = ae + "FullYear", F[u] = ae + "Hours", F[i] = ae + "Minutes", F[o] = ae + "Seconds", F[a] = ae + "Milliseconds", F)[W], fe = W === d ? this.$D + (V - this.$W) : V;
           if (W === c || W === M) {
             var q = this.clone().set(h, 1);
             q.$d[ie](fe), q.init(), this.$d = q.set(h, Math.min(this.$D, q.daysInMonth())).$d;
@@ -5403,7 +5403,7 @@ function q1() {
         }, R.get = function(P) {
           return this[S.p(P)]();
         }, R.add = function(P, V) {
-          var Y, W = this;
+          var F, W = this;
           P = Number(P);
           var ae = S.p(V), ie = function(ne) {
             var de = x(W);
@@ -5413,14 +5413,14 @@ function q1() {
           if (ae === M) return this.set(M, this.$y + P);
           if (ae === d) return ie(1);
           if (ae === p) return ie(7);
-          var fe = (Y = {}, Y[i] = n, Y[u] = s, Y[o] = r, Y)[ae] || 1, q = this.$d.getTime() + P * fe;
+          var fe = (F = {}, F[i] = n, F[u] = s, F[o] = r, F)[ae] || 1, q = this.$d.getTime() + P * fe;
           return S.w(q, this);
         }, R.subtract = function(P, V) {
           return this.add(-1 * P, V);
         }, R.format = function(P) {
-          var V = this, Y = this.$locale();
-          if (!this.isValid()) return Y.invalidDate || N;
-          var W = P || "YYYY-MM-DDTHH:mm:ssZ", ae = S.z(this), ie = this.$H, fe = this.$m, q = this.$M, ne = Y.weekdays, de = Y.months, Me = Y.meridiem, ge = function(se, E, Oe, Je) {
+          var V = this, F = this.$locale();
+          if (!this.isValid()) return F.invalidDate || N;
+          var W = P || "YYYY-MM-DDTHH:mm:ssZ", ae = S.z(this), ie = this.$H, fe = this.$m, q = this.$M, ne = F.weekdays, de = F.months, Me = F.meridiem, ge = function(se, E, Oe, Je) {
             return se && (se[E] || se(V, W)) || Oe[E].slice(0, Je);
           }, Ae = function(se) {
             return S.s(ie % 12 || 12, se, "0");
@@ -5440,7 +5440,7 @@ function q1() {
                 case "MM":
                   return S.s(q + 1, 2, "0");
                 case "MMM":
-                  return ge(Y.monthsShort, q, de, 3);
+                  return ge(F.monthsShort, q, de, 3);
                 case "MMMM":
                   return ge(de, q);
                 case "D":
@@ -5450,9 +5450,9 @@ function q1() {
                 case "d":
                   return String(V.$W);
                 case "dd":
-                  return ge(Y.weekdaysMin, V.$W, ne, 2);
+                  return ge(F.weekdaysMin, V.$W, ne, 2);
                 case "ddd":
-                  return ge(Y.weekdaysShort, V.$W, ne, 3);
+                  return ge(F.weekdaysShort, V.$W, ne, 3);
                 case "dddd":
                   return ne[V.$W];
                 case "H":
@@ -5485,7 +5485,7 @@ function q1() {
           });
         }, R.utcOffset = function() {
           return 15 * -Math.round(this.$d.getTimezoneOffset() / 15);
-        }, R.diff = function(P, V, Y) {
+        }, R.diff = function(P, V, F) {
           var W, ae = this, ie = S.p(V), fe = x(P), q = (fe.utcOffset() - this.utcOffset()) * n, ne = this - fe, de = function() {
             return S.m(ae, fe);
           };
@@ -5517,15 +5517,15 @@ function q1() {
             default:
               W = ne;
           }
-          return Y ? W : S.a(W);
+          return F ? W : S.a(W);
         }, R.daysInMonth = function() {
           return this.endOf(c).$D;
         }, R.$locale = function() {
           return $[this.$L];
         }, R.locale = function(P, V) {
           if (!P) return this.$L;
-          var Y = this.clone(), W = O(P, V, !0);
-          return W && (Y.$L = W), Y;
+          var F = this.clone(), W = O(P, V, !0);
+          return W && (F.$L = W), F;
         }, R.clone = function() {
           return S.w(this.$d, this);
         }, R.toDate = function() {
@@ -5544,7 +5544,7 @@ function q1() {
         };
       }), x.extend = function(Q, R) {
         return Q.$i || (Q(R, k, x), Q.$i = !0), x;
-      }, x.locale = O, x.isDayjs = F, x.unix = function(Q) {
+      }, x.locale = O, x.isDayjs = Y, x.unix = function(Q) {
         return x(1e3 * Q);
       }, x.en = $[w], x.Ls = $, x.p = {}, x;
     });
@@ -5656,7 +5656,7 @@ const dl = (e, t) => {
       fullText: le().month(H).format("MMMM"),
       monthValue: H
     }))
-  ), w = Z(""), $ = Z(""), D = Z(""), F = Z([]), O = Z({
+  ), w = Z(""), $ = Z(""), D = Z(""), Y = Z([]), O = Z({
     selectedMonth: le().month(),
     selectedYear: Number(o.value),
     calendarDays: []
@@ -5693,7 +5693,7 @@ const dl = (e, t) => {
       return (ce = b.value.find((Ne) => Ne.text.toLowerCase() === K.toLowerCase())) == null ? void 0 : ce.dayValue;
     });
     return W(L) ? !1 : !!H.includes(L.date.getDay());
-  }, P = (L) => L.date.toDateString() === m.value.format("ddd MMM DD YYYY"), V = (L) => !L.inactive && !ie(L), Y = (L) => !!(L.inactive && !ie(L)), W = (L) => {
+  }, P = (L) => L.date.toDateString() === m.value.format("ddd MMM DD YYYY"), V = (L) => !L.inactive && !ie(L), F = (L) => !!(L.inactive && !ie(L)), W = (L) => {
     var K;
     const H = (K = n0("text", w.value)) == null ? void 0 : K.monthValue;
     return $.value && !w.value && !D.value && !ie(L) ? L.date.getDate() === Number($.value) && !L.inactive : $.value && w && !D.value && !ie(L) ? L.date.getDate() === Number($.value) && L.date.getMonth() === H && !L.inactive : $.value && w.value && D.value && !ie(L) ? L.date.getDate() === Number($.value) && L.date.getMonth() === H && L.date.getFullYear().toString() === D.value && !L.inactive : !1;
@@ -5760,13 +5760,13 @@ const dl = (e, t) => {
     return !1;
   }, ve = (L) => {
     const H = le(L.date, "MM-DD-YYYY"), K = H.format("MM"), ce = H.format("DD"), Ne = H.format("YYYY");
-    w.value = K, $.value = ce, D.value = Ne, O.value.selectedMonth = L.date.getMonth(), O.value.selectedYear = L.date.getFullYear(), L2(), k(), z2(), a0(), F.value = [], t("getDateErrors", F.value), setTimeout(() => {
+    w.value = K, $.value = ce, D.value = Ne, O.value.selectedMonth = L.date.getMonth(), O.value.selectedYear = L.date.getFullYear(), L2(), k(), z2(), a0(), Y.value = [], t("getDateErrors", Y.value), setTimeout(() => {
       C.value = !1;
     }, 100);
   }, se = (L) => {
     v.value = "tab-calendar";
     const H = L.monthValue + 1, K = H < 10 ? `0${H}` : `${H}`;
-    w.value = K, O.value.selectedMonth = L.monthValue, L2(), k(), z2(), F.value = [], t("getDateErrors", F.value);
+    w.value = K, O.value.selectedMonth = L.monthValue, L2(), k(), z2(), Y.value = [], t("getDateErrors", Y.value);
   }, E = Z({
     currentPage: 0,
     itemsPerPage: 12,
@@ -5785,7 +5785,7 @@ const dl = (e, t) => {
   }, Hs = () => {
     (E.value.currentPage + 1) * E.value.itemsPerPage < E.value.yearsArray.length && E.value.currentPage++;
   }, Zs = z(() => E.value.currentPage === 0), Gs = z(() => (E.value.currentPage + 1) * E.value.itemsPerPage >= E.value.yearsArray.length), Ws = (L) => {
-    v.value = "tab-calendar", D.value = L, O.value.selectedYear = Number(L), L2(), k(), z2(), F.value = [], t("getDateErrors", F.value);
+    v.value = "tab-calendar", D.value = L, O.value.selectedYear = Number(L), L2(), k(), z2(), Y.value = [], t("getDateErrors", Y.value);
   }, Ks = z(() => n.value || s.value), or = (L) => {
     var H, K;
     switch (L) {
@@ -5814,11 +5814,11 @@ const dl = (e, t) => {
   ), Js = (L) => _(c.value.datePickerInputClasses, `spr-w-[${L}] spr-min-w-[${L}]`), Xs = (L) => _("spr-cursor-pointer", {
     "spr-background-color-pressed !spr-shadow-button": v.value === L
   }), qs = () => {
-    w.value = w.value.replace(/[^A-Za-z0-9\s]/g, "").toLocaleUpperCase(), F.value = [], t("getDateErrors", F.value), L2(), s0(), a0();
+    w.value = w.value.replace(/[^A-Za-z0-9\s]/g, "").toLocaleUpperCase(), Y.value = [], t("getDateErrors", Y.value), L2(), s0(), a0();
   }, ea = () => {
-    $.value = $.value.replace(/[^0-9]/g, ""), F.value = [], t("getDateErrors", F.value), s0(), a0();
+    $.value = $.value.replace(/[^0-9]/g, ""), Y.value = [], t("getDateErrors", Y.value), s0(), a0();
   }, ta = () => {
-    D.value = D.value.replace(/[^0-9]/g, ""), F.value = [], t("getDateErrors", F.value), s0(), a0();
+    D.value = D.value.replace(/[^0-9]/g, ""), Y.value = [], t("getDateErrors", Y.value), s0(), a0();
   }, L2 = () => {
     if (w.value.length >= 2)
       if (!isNaN(Number(w.value)) && !isNaN(parseFloat(w.value))) {
@@ -5835,15 +5835,15 @@ const dl = (e, t) => {
     if (w.value && $.value && D.value) {
       const H = `${w.value}-${$.value}-${D.value}`, K = le(H, "MM-DD-YYYY").isValid(), ce = Number(D.value) >= i.value.min && Number(D.value) <= i.value.max;
       if (K && ce) {
-        F.value = F.value.filter((De) => De.title !== "Invalid Date");
+        Y.value = Y.value.filter((De) => De.title !== "Invalid Date");
         const Ne = (L = n0("text", w.value)) == null ? void 0 : L.monthValue;
         O.value.selectedMonth = Number(Ne), O.value.selectedYear = Number(D.value), k(), z2();
-      } else if (!F.value.some((De) => De.title === "Invalid Date")) {
+      } else if (!Y.value.some((De) => De.title === "Invalid Date")) {
         let De;
-        ce ? De = "Invalid Date Format. Please use MM/DD/YYYY" : De = `Year must be between ${i.value.min} and ${i.value.max}.`, F.value.push({
+        ce ? De = "Invalid Date Format. Please use MM/DD/YYYY" : De = `Year must be between ${i.value.min} and ${i.value.max}.`, Y.value.push({
           title: "Invalid Date",
           message: De
-        }), C.value = !1, t("getDateErrors", F.value), console.error(`Invalid Date: "${H}". ${De}`);
+        }), C.value = !1, t("getDateErrors", Y.value), console.error(`Invalid Date: "${H}". ${De}`);
       }
     }
   }, 500), ra = (L) => {
@@ -5943,7 +5943,7 @@ const dl = (e, t) => {
     dateInput: $,
     monthInput: w,
     yearInput: D,
-    datePickerErrors: F,
+    datePickerErrors: Y,
     calendarTabPageData: O,
     calendarTabIsMinMonth: x,
     calendarTabIsMaxMonth: S,
@@ -5952,7 +5952,7 @@ const dl = (e, t) => {
     calendarTabIsRestDay: R,
     calendarTabIsTodayIndicator: P,
     calendarTabIsActiveMonthDates: V,
-    calendarTabIsInactiveMonthDates: Y,
+    calendarTabIsInactiveMonthDates: F,
     calendarTabIsSelectedDate: W,
     calendarTabIsUnSelectedDate: ae,
     calendarTabIsDateIsDisabled: ie,
@@ -6029,7 +6029,7 @@ const dl = (e, t) => {
       calendarTabIsTodayIndicator: w,
       calendarTabIsActiveMonthDates: $,
       calendarTabIsInactiveMonthDates: D,
-      calendarTabIsSelectedDate: F,
+      calendarTabIsSelectedDate: Y,
       calendarTabIsUnSelectedDate: O,
       calendarTabIsDateIsDisabled: x,
       calendarTabHandleDateInput: S,
@@ -6039,7 +6039,7 @@ const dl = (e, t) => {
       calendarTabPrevMonth: R,
       calendarTabNextMonth: P,
       monthTabHandleSelectedMonth: V,
-      yearTabCurrentYearPage: Y,
+      yearTabCurrentYearPage: F,
       yearTabGoToPreviousPage: W,
       yearTabGoToNextPage: ae,
       yearTabIsPreviousButtonDisabled: ie,
@@ -6178,7 +6178,7 @@ const dl = (e, t) => {
                         // Inactive Month Dates (Past/Future)
                         "spr-text-color-disabled": l(D)(E),
                         // Selected Date
-                        "spr-background-color-brand-base active:spr-background-color-brand-pressed spr-text-color-inverted-strong spr-cursor-pointer spr-text-white-50 active:spr-scale-95": l(F)(E),
+                        "spr-background-color-brand-base active:spr-background-color-brand-pressed spr-text-color-inverted-strong spr-cursor-pointer spr-text-white-50 active:spr-scale-95": l(Y)(E),
                         // Unselected Date
                         "hover:spr-background-color-hover spr-border-color-weak active:spr-background-color-pressed spr-cursor-pointer spr-border spr-border-solid active:spr-scale-95": l(O)(E),
                         // Disabled Dates
@@ -6210,7 +6210,7 @@ const dl = (e, t) => {
                 ], 10, xl))), 128))
               ])) : T("", !0),
               l(p) === "tab-years" ? (g(), y("div", jl, [
-                (g(!0), y(te, null, ue(l(Y), (E, Oe) => (g(), y("div", {
+                (g(!0), y(te, null, ue(l(F), (E, Oe) => (g(), y("div", {
                   key: Oe,
                   class: A([
                     l(s).yearsTabItemsBaseClasses,
@@ -6465,8 +6465,8 @@ const dl = (e, t) => {
       f.value = !1;
     }, 10));
   }, D = (O) => {
-    F(O) && (f.value = !1);
-  }, F = (O) => {
+    Y(O) && (f.value = !1);
+  }, Y = (O) => {
     let x = c.value;
     return O.forEach((S) => {
       var k;
@@ -7529,7 +7529,7 @@ const dl = (e, t) => {
 }, Symbol.toStringTag, { value: "Module" })), o4 = (e, t) => {
   const { options: r, filterMenu: n, filterData: s, loading: a, filterable: o, filling: i, deselected: u, hasSearchApi: d } = ye(e), p = Ee(e, "modelValue", t), c = Z(!1), f = Ee(e, "search", t), M = Ee(e, "searchFilter", t), h = Z(""), N = Z(""), C = Z(!1), v = Z(!1), m = Z({}), b = Z({}), j = Z(`filter-${le().valueOf()}-${Math.floor(Math.random() * 1e3)}`), w = Z(
     n.value
-  ), $ = Z([]), D = Z(null), F = Z([]), O = Z(""), x = z(() => {
+  ), $ = Z([]), D = Z(null), Y = Z([]), O = Z(""), x = z(() => {
     var de;
     if (i.value) return r.value;
     const q = d.value ? "" : h.value.toLowerCase();
@@ -7552,7 +7552,7 @@ const dl = (e, t) => {
   Yt(D, () => {
     c.value = !1;
   });
-  const Y = () => {
+  const F = () => {
     var q;
     (q = r.value) != null && q.length && x.value.forEach((ne, de) => {
       x.value[de].isSelected = !0;
@@ -7602,7 +7602,7 @@ const dl = (e, t) => {
     q !== ne && (f.value = q);
   }), he(N, (q, ne) => {
     q !== ne && (M.value = q);
-  }), Ct(() => F.value[0], ie, { distance: 10 }), Ct(D, ie, { distance: 10 });
+  }), Ct(() => Y.value[0], ie, { distance: 10 }), Ct(D, ie, { distance: 10 });
   const fe = z(() => {
     const q = _("spr-relative spr-inline-block spr-w-full"), ne = _(
       "spr-border-color-weak spr-border spr-border-x-0 spr-border-t-0 spr-border-solid spr-p-size-spacing-2xs",
@@ -7643,8 +7643,8 @@ const dl = (e, t) => {
     filterClass: fe,
     uniqueId: j,
     filterOptionRef: D,
-    filterMenuOptionList: F,
-    selectAllOptions: Y,
+    filterMenuOptionList: Y,
+    selectAllOptions: F,
     getMappedFilterData: Q,
     saveSelectedFilter: W,
     getSelectedItemPerFilterMenu: V,
@@ -7734,7 +7734,7 @@ const dl = (e, t) => {
 }, c4 = { class: "spr-space-x-size-spacing-3xs spr-space-y-size-spacing-3xs" }, p4 = ["onClick"], g4 = { class: "spr-p-size-spacing-2xs" }, f4 = {
   key: 0,
   class: "spr-space-x-2 spr-space-y-2 spr-p-size-spacing-2xs"
-}, h4 = ["id"], C4 = { class: "spr-flex spr-w-full spr-flex-row spr-items-center spr-justify-items-start spr-gap-size-spacing-3xs" }, M4 = { class: "spr-body-sm-regular" }, y4 = { class: "spr-body-xs-regular spr-text-color-supporting" }, m4 = { key: 1 }, v4 = /* @__PURE__ */ oe({
+}, h4 = ["id"], C4 = ["onClick"], M4 = { class: "spr-body-sm-regular" }, y4 = { class: "spr-body-xs-regular spr-text-color-supporting" }, m4 = { key: 1 }, v4 = /* @__PURE__ */ oe({
   __name: "filter",
   props: i4,
   emits: l4,
@@ -7760,17 +7760,18 @@ const dl = (e, t) => {
     } = o4(r, n);
     return (w, $) => (g(), G(l(Le), {
       shown: l(s),
-      "onUpdate:shown": $[4] || ($[4] = (D) => Ce(s) ? s.value = D : null),
+      "onUpdate:shown": $[5] || ($[5] = (D) => Ce(s) ? s.value = D : null),
       "aria-id": "filter-option-wrapper",
       distance: "4",
       placement: "bottom",
-      triggers: ["click"],
+      triggers: [],
+      "popper-hide-triggers": [],
       container: `#${l(M)}`,
+      "auto-hide": !1,
       style: _e({
         width: r.width,
         position: "relative"
-      }),
-      "auto-hide": !1
+      })
     }, {
       popper: B(() => [
         I("div", {
@@ -7790,7 +7791,7 @@ const dl = (e, t) => {
             ]),
             U(l(Le), {
               shown: l(o),
-              "onUpdate:shown": $[3] || ($[3] = (D) => Ce(o) ? o.value = D : null),
+              "onUpdate:shown": $[4] || ($[4] = (D) => Ce(o) ? o.value = D : null),
               "aria-id": "filter-menu-wrapper",
               distance: "4",
               placement: "right-start",
@@ -7804,10 +7805,10 @@ const dl = (e, t) => {
                   I("div", {
                     class: A(l(f).PopperHeaderClasses)
                   }, [
-                    $[5] || ($[5] = Se(" Add Filter ")),
+                    $[6] || ($[6] = Se(" Add Filter ")),
                     I("span", {
                       class: "spr-cursor-pointer",
-                      onClick: $[1] || ($[1] = (D) => o.value = !1)
+                      onClick: $[2] || ($[2] = (D) => o.value = !1)
                     }, [
                       U(l(X), { icon: "ph:x" })
                     ])
@@ -7818,7 +7819,7 @@ const dl = (e, t) => {
                     (g(!0), y(te, null, ue(w.filterMenu, (D) => (g(), G(l(Le), {
                       key: D.field,
                       shown: l(c)[D.field].isFilterVisible,
-                      "onUpdate:shown": (F) => l(c)[D.field].isFilterVisible = F,
+                      "onUpdate:shown": (Y) => l(c)[D.field].isFilterVisible = Y,
                       "aria-id": "filter-menu-wrapper",
                       placement: "right-start",
                       triggers: ["click"],
@@ -7831,10 +7832,10 @@ const dl = (e, t) => {
                           I("div", {
                             class: A(l(f).PopperHeaderClasses)
                           }, [
-                            $[6] || ($[6] = Se(" Add Filter ")),
+                            $[7] || ($[7] = Se(" Add Filter ")),
                             I("span", {
                               class: "spr-cursor-pointer",
-                              onClick: (F) => l(c)[D.field].isFilterVisible = !1
+                              onClick: (Y) => l(c)[D.field].isFilterVisible = !1
                             }, [
                               U(l(X), { icon: "ph:x" })
                             ], 8, p4)
@@ -7842,7 +7843,7 @@ const dl = (e, t) => {
                           I("div", g4, [
                             U(Ye, {
                               modelValue: l(p),
-                              "onUpdate:modelValue": $[2] || ($[2] = (F) => Ce(p) ? p.value = F : null),
+                              "onUpdate:modelValue": $[3] || ($[3] = (Y) => Ce(p) ? p.value = Y : null),
                               type: "text",
                               placeholder: "Select Employees"
                             }, {
@@ -7853,12 +7854,12 @@ const dl = (e, t) => {
                             }, 8, ["modelValue"])
                           ]),
                           l(u).length > 0 ? (g(), y("div", f4, [
-                            (g(!0), y(te, null, ue(l(u), (F, O) => (g(), G(F2, {
+                            (g(!0), y(te, null, ue(l(u), (Y, O) => (g(), G(F2, {
                               key: O,
-                              label: F.text,
+                              label: Y.text,
                               active: !0,
                               closable: "",
-                              onClose: (x) => l(j)(F.value)
+                              onClose: (x) => l(j)(Y.value)
                             }, null, 8, ["label", "onClose"]))), 128))
                           ])) : T("", !0),
                           l(d).length > 0 ? (g(), y("div", {
@@ -7869,8 +7870,8 @@ const dl = (e, t) => {
                             ref: N,
                             class: "spr-max-h-[264px] spr-space-y-size-spacing-6xs spr-overflow-auto spr-p-size-spacing-2xs"
                           }, [
-                            (g(!0), y(te, null, ue(l(d), (F, O) => (g(), y("div", {
-                              key: F.value,
+                            (g(!0), y(te, null, ue(l(d), (Y, O) => (g(), y("div", {
+                              key: Y.value,
                               class: A([
                                 l(f).filterListClasses,
                                 { "spr-background-color-multiple-active": l(d)[O].isSelected }
@@ -7890,9 +7891,9 @@ const dl = (e, t) => {
                             class: A(l(f).LoadingStateClasses)
                           }, [
                             r.loading ? ee(w.$slots, "loading", { key: 0 }, () => [
-                              $[7] || ($[7] = Se(" loading... "))
+                              $[8] || ($[8] = Se(" loading... "))
                             ]) : ee(w.$slots, "empty", { key: 1 }, () => [
-                              $[8] || ($[8] = Se(" No Result Found! "))
+                              $[9] || ($[9] = Se(" No Result Found! "))
                             ])
                           ], 2)),
                           I("div", {
@@ -7901,9 +7902,9 @@ const dl = (e, t) => {
                             U(be, {
                               variant: "secondary",
                               size: "small",
-                              onClick: (F) => l(c)[D.field].isFilterVisible = !1
+                              onClick: (Y) => l(c)[D.field].isFilterVisible = !1
                             }, {
-                              default: B(() => $[9] || ($[9] = [
+                              default: B(() => $[10] || ($[10] = [
                                 Se(" Cancel ")
                               ])),
                               _: 2
@@ -7911,9 +7912,9 @@ const dl = (e, t) => {
                             U(be, {
                               size: "small",
                               tone: "success",
-                              onClick: (F) => l(m)(D.field)
+                              onClick: (Y) => l(m)(D.field)
                             }, {
-                              default: B(() => $[10] || ($[10] = [
+                              default: B(() => $[11] || ($[11] = [
                                 Se(" Save ")
                               ])),
                               _: 2
@@ -7929,7 +7930,7 @@ const dl = (e, t) => {
                           "badge-text": l(b)(D.field).toString(),
                           "badge-variant": "danger",
                           icon: "ph:funnel-simple",
-                          onClick: (F) => l(v)(D.field)
+                          onClick: (Y) => l(v)(D.field)
                         }, null, 8, ["active", "label", "badge", "badge-text", "onClick"])
                       ]),
                       _: 2
@@ -7957,7 +7958,7 @@ const dl = (e, t) => {
             size: "small",
             onClick: l(C)
           }, {
-            default: B(() => $[11] || ($[11] = [
+            default: B(() => $[12] || ($[12] = [
               Se("Select All")
             ])),
             _: 1
@@ -7969,34 +7970,37 @@ const dl = (e, t) => {
           ref: h,
           class: "spr-max-h-[264px] spr-space-y-size-spacing-6xs spr-overflow-auto spr-p-size-spacing-3xs"
         }, [
-          (g(!0), y(te, null, ue(l(i), (D, F) => (g(), y("div", {
+          (g(!0), y(te, null, ue(l(i), (D, Y) => (g(), y("div", {
             key: D.value,
             class: A([
               l(f).filterListClasses,
               {
-                "spr-background-color-multiple-active": l(i)[F].isSelected
+                "spr-background-color-multiple-active": l(i)[Y].isSelected
               }
             ])
           }, [
-            I("div", C4, [
+            I("div", {
+              class: "spr-flex spr-w-full spr-flex-row spr-items-center spr-justify-items-start spr-gap-size-spacing-3xs",
+              onClick: (O) => l(i)[Y].isSelected = !l(i)[Y].isSelected
+            }, [
               U(v2, {
-                modelValue: l(i)[F].isSelected,
-                "onUpdate:modelValue": (O) => l(i)[F].isSelected = O,
-                checked: l(i)[F].isSelected
+                modelValue: l(i)[Y].isSelected,
+                "onUpdate:modelValue": (O) => l(i)[Y].isSelected = O,
+                checked: l(i)[Y].isSelected
               }, null, 8, ["modelValue", "onUpdate:modelValue", "checked"]),
               r.hasAvatar ? (g(), G(F0, {
                 key: 0,
                 size: "md",
                 alt: "User Avatar",
-                src: l(i)[F].avatar,
-                variant: l(i)[F].avatar ? "image" : "initial",
-                initial: l(i)[F].text
+                src: l(i)[Y].avatar,
+                variant: l(i)[Y].avatar ? "image" : "initial",
+                initial: l(i)[Y].text
               }, null, 8, ["src", "variant", "initial"])) : T("", !0),
               I("div", null, [
-                I("div", M4, J(l(i)[F].text), 1),
-                I("div", y4, J(l(i)[F].subtext), 1)
+                I("div", M4, J(l(i)[Y].text), 1),
+                I("div", y4, J(l(i)[Y].subtext), 1)
               ])
-            ])
+            ], 8, C4)
           ], 2))), 128))
         ], 512)) : (g(), y("div", m4, [
           w.filling ? ee(w.$slots, "loading-state", { key: 0 }, () => [
@@ -8016,7 +8020,8 @@ const dl = (e, t) => {
           style: _e({
             width: r.width,
             position: "relative"
-          })
+          }),
+          onClick: $[1] || ($[1] = (D) => s.value = !0)
         }, [
           ee(w.$slots, "default", {}, () => [
             U(Ye, {
@@ -12022,7 +12027,7 @@ const Wc = ["white", "dark", "gray", "green"], Kc = [
                                     "hover:spr-background-color-hover": r.activeNav.submenu !== $.title,
                                     "active:spr-background-color-pressed": !0
                                   }),
-                                  onClick: (F) => l(u)(
+                                  onClick: (Y) => l(u)(
                                     $,
                                     h.title,
                                     m.title,
@@ -12202,7 +12207,7 @@ const Wc = ["white", "dark", "gray", "green"], Kc = [
                                     "hover:spr-background-color-hover": r.activeNav.submenu !== $.title,
                                     "active:spr-background-color-pressed": !0
                                   }),
-                                  onClick: (F) => l(u)(
+                                  onClick: (Y) => l(u)(
                                     $,
                                     h.title,
                                     m.title,
@@ -13750,13 +13755,13 @@ function Ot(e, t, r = {}, n, s, a) {
         after: P,
         onError: V
       });
-      let Y;
+      let F;
       try {
-        Y = x.apply(this && this.$id === e ? this : D, re);
+        F = x.apply(this && this.$id === e ? this : D, re);
       } catch (W) {
         throw x2(R, W), W;
       }
-      return Y instanceof Promise ? Y.then((W) => (x2(Q, W), W)).catch((W) => (x2(R, W), Promise.reject(W))) : (x2(Q, Y), Y);
+      return F instanceof Promise ? F.then((W) => (x2(Q, W), W)).catch((W) => (x2(R, W), Promise.reject(W))) : (x2(Q, F), F);
     };
     return k[An] = !0, k[it] = S, k;
   }, w = /* @__PURE__ */ C2({
@@ -14373,13 +14378,10 @@ const L5 = (e) => ({
   next: () => !0
 }, i8 = (e, t) => {
   const { selectedRowCount: r, currentPage: n, totalItems: s, bordered: a } = ye(e), o = z(() => {
-    const v = _(
-      "spr-p-size-spacing-xs spr-flex spr-justify-between spr-bg-white-50 spr-h-max",
-      {
-        "spr-border spr-border-solid spr-border-color-weak": a.value,
-        "spr-border-x-0 spr-border-t spr-border-b-0 spr-border-solid spr-border-color-weak": !a.value
-      }
-    ), m = _("spr-w-[120px] spr-font-bold spr-h-full spr-space-x-2"), b = _("spr-mt-0.5 spr-pl-1 spr-text-mushroom-950"), j = _("spr-flex spr-justify-between spr-items-center spr-space-x-4"), w = _("spr-font-main spr-text-color-base"), $ = _("spr-flex spr-space-x-2"), D = _("spr-rounded-border-radius-md"), F = _("!spr-w-max");
+    const v = _("spr-p-size-spacing-xs spr-flex spr-justify-between spr-bg-white-50 spr-h-max", {
+      "spr-border spr-border-solid spr-border-color-weak": a.value,
+      "spr-border-x-0 spr-border-t spr-border-b-0 spr-border-solid spr-border-color-weak": !a.value
+    }), m = _("spr-w-[120px] spr-h-full spr-space-x-2"), b = _("spr-mt-0.5 spr-pl-1 spr-text-mushroom-950"), j = _("spr-flex spr-justify-between spr-items-center spr-space-x-4"), w = _("spr-text-color-base spr-body-sm-regular"), $ = _("spr-flex spr-space-x-2"), D = _("spr-rounded-border-radius-md"), Y = _("!spr-w-max");
     return {
       baseClass: v,
       dropdownInputFieldClass: m,
@@ -14388,7 +14390,7 @@ const L5 = (e) => ({
       inputFieldIconClass: b,
       navigationContainerClass: $,
       navigationButtonClass: D,
-      dropdownClass: F
+      dropdownClass: Y
     };
   }), i = Z(e.dropdownSelection), u = z(() => {
     const v = (n.value - 1) * r.value + 1, m = Math.min(n.value * r.value, s.value);
@@ -14604,10 +14606,10 @@ const L5 = (e) => ({
     () => e.tableActions.search || e.tableActions.filter || e.tableActions.option
   ), w = (k, re) => {
     e.isRowClickable && t("onRowClick", k, re);
-  }, $ = z(() => i.value ? "large" : "small"), D = (k) => typeof k == "string" ? k.toLowerCase() : typeof k == "object" && !Array.isArray(k) && k !== null ? k.title.toLowerCase() : Array.isArray(k) && k.length > 0 ? k[0].title.toLowerCase() : "", F = z(() => {
+  }, $ = z(() => i.value ? "large" : "small"), D = (k) => typeof k == "string" ? k.toLowerCase() : typeof k == "object" && !Array.isArray(k) && k !== null ? k.title.toLowerCase() : Array.isArray(k) && k.length > 0 ? k[0].title.toLowerCase() : "", Y = z(() => {
     const k = _(
       "spr-border-color-weak spr-w-full spr-overflow-hidden spr-rounded-border-radius-lg spr-border spr-border-solid spr-table-wrapper spr-relative spr-h-max"
-    ), re = _("spr-absolute spr-w-full spr-bottom-0 spr-left-0", {
+    ), re = _("spr-w-full spr-bottom-0 spr-left-0", {
       "spr-background-color-surface": e.variant === "surface",
       "spr-background-color": e.variant === "white"
     }), Q = _({
@@ -14623,7 +14625,7 @@ const L5 = (e) => ({
       Q
     ), P = "spr-flex spr-flex-row spr-items-center spr-gap-size-spacing-5xs", V = _({
       "spr-px-size-spacing-sm spr-py-size-spacing-xs": !!r.default
-    }), Y = "spr-border-color-weak spr-w-full spr-border spr-border-solid", W = "spr-background-color-surface spr-text-color-strong spr-font-size-100 spr-font-line-height-100 spr-font-letter-spacing-normal spr-uppercase", ae = _("hover:spr-background-color-hover spr-min-h-[60px]", {
+    }), F = "spr-border-color-weak spr-w-full spr-border spr-border-solid", W = "spr-background-color-surface spr-text-color-strong spr-font-size-100 spr-font-line-height-100 spr-font-letter-spacing-normal spr-uppercase", ae = _("hover:spr-background-color-hover spr-min-h-[60px]", {
       "spr-cursor-pointer": e.isRowClickable
     }), ie = "spr-border-color-weak spr-overflow-hidden spr-border-x-0 spr-border-b spr-border-t-0 spr-border-solid spr-p-3", fe = "spr-border-color-weak spr-overflow-hidden spr-border-x-0 spr-border-b spr-border-t-0 spr-border-solid spr-p-3", q = _("spr-h-full"), ne = _({
       "spr-overflow-y-auto spr-h-[calc(85vh-150px)] md:spr-h-[calc(75vh-150px)] sm:spr-h-[calc(70vh-150px)]": i.value && r.footer,
@@ -14646,7 +14648,7 @@ const L5 = (e) => ({
       headerClasses: R,
       tableWrapperClasses: k,
       defaultSlotClasses: V,
-      tableHeaderActionsClasses: Y,
+      tableHeaderActionsClasses: F,
       headerNameClass: P,
       tableCellSlotClasses: W,
       multiselectRowClass: Me,
@@ -14688,7 +14690,7 @@ const L5 = (e) => ({
     getHeaderCount: m,
     hasTableActions: j,
     searchField: c,
-    getTableClasses: F,
+    getTableClasses: Y,
     getEmptyStateSize: $,
     selectAll: M,
     selectedData: h,
@@ -14881,14 +14883,14 @@ const L5 = (e) => ({
                     ])) : T("", !0),
                     I("div", null, [
                       Array.isArray(l(a)[w][$.field].title) ? (g(), y("div", D8, [
-                        (g(!0), y(te, null, ue(l(a)[w][$.field].title, (F, O) => (g(), y("div", { key: O }, [
+                        (g(!0), y(te, null, ue(l(a)[w][$.field].title, (Y, O) => (g(), y("div", { key: O }, [
                           $.hasLozengeTitle ? (g(), y("div", I8, [
                             U(zt, {
-                              cell: F
+                              cell: Y
                             }, null, 8, ["cell"])
                           ])) : $.hasChipTitle ? (g(), y("div", A8, [
                             U(Lt, {
-                              cell: F
+                              cell: Y
                             }, null, 8, ["cell"])
                           ])) : T("", !0)
                         ]))), 128))

package/package.json

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

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

@@ -80,17 +80,17 @@ export const useCalendarCell = (props: CalendarCellPropTypes, emit: SetupContext
       'spr-border-solid': !props.status || (props.status !== 'pending' && props.status !== 'error'),
     });
 
-    const titleClasses = classNames('spr-text-color-strong spr-body-xs-regular-medium', {
+    const titleClasses = classNames('spr-text-color-strong spr-body-sm-regular-medium', {
       'spr-text-color-danger-base': props.status === 'error',
     });
 
-    const descriptionClasses = classNames('spr-text-color-strong spr-body-xs-regular', {
+    const descriptionClasses = classNames('spr-text-color-strong spr-body-sm-regular', {
       'spr-text-color-danger-base': props.status === 'error',
     });
 
-    const getTypeLabelClassess = classNames('spr-text-color-strong spr-body-xs-regular', {
+    const getTypeLabelClassess = classNames('spr-text-color-strong spr-body-sm-regular', {
       'spr-text-color-danger-base': props.status === 'error',
-      'spr-text-color-strong spr-body-xs-regular-medium': offlineStatus.includes(props.type),
+      'spr-text-color-strong spr-body-sm-regular-medium': offlineStatus.includes(props.type),
     });
 
     const getMainClasses = classNames(calendarCellWrapper, getCellClasses.value, statusCellClasses);

package/src/components/dropdown/dropdown.vue

@@ -86,6 +86,6 @@ const {
   handleSelectedLadderizedItem,
   dropdownValue,
   removeCurrentLevelInBackLabel,
-  isLadderizedSearch
+  isLadderizedSearch,
 } = useDropdown(props, emit);
 </script>

package/src/components/filter/filter.vue

@@ -4,13 +4,14 @@
     aria-id="filter-option-wrapper"
     distance="4"
     placement="bottom"
-    :triggers="['click']"
+    :triggers="[]"
+    :popper-hide-triggers="[]"
     :container="`#${uniqueId}`"
+    :auto-hide="false"
     :style="{
       width: props.width,
       position: 'relative',
     }"
-    :auto-hide="false"
   >
     <span
       :id="uniqueId"
@@ -18,6 +19,7 @@
         width: props.width,
         position: 'relative',
       }"
+      @click="isFilterOpen = true"
     >
       <slot>
         <spr-input v-model="searchValue" type="text" :placeholder="placeholder" :label="label" :disabled="disabled">
@@ -184,6 +186,7 @@
         >
           <div
             class="spr-flex spr-w-full spr-flex-row spr-items-center spr-justify-items-start spr-gap-size-spacing-3xs"
+            @click="getFiltereredOption[key].isSelected = !getFiltereredOption[key].isSelected"
           >
             <spr-checkbox
               v-model="getFiltereredOption[key].isSelected"

package/src/components/table/table-pagination/use-table-pagination.ts

@@ -24,17 +24,14 @@ export const useTablePagination = (
   const { selectedRowCount, currentPage, totalItems, bordered } = toRefs(props);
 
   const paginationClasses: ComputedRef<TablePaginationClasses> = computed(() => {
-    const baseClass = classNames(
-      'spr-p-size-spacing-xs spr-flex spr-justify-between spr-bg-white-50 spr-h-max',
-      {
-        'spr-border spr-border-solid spr-border-color-weak': bordered.value,
-        'spr-border-x-0 spr-border-t spr-border-b-0 spr-border-solid spr-border-color-weak': !bordered.value,
-      },
-    );
-    const dropdownInputFieldClass = classNames('spr-w-[120px] spr-font-bold spr-h-full spr-space-x-2');
+    const baseClass = classNames('spr-p-size-spacing-xs spr-flex spr-justify-between spr-bg-white-50 spr-h-max', {
+      'spr-border spr-border-solid spr-border-color-weak': bordered.value,
+      'spr-border-x-0 spr-border-t spr-border-b-0 spr-border-solid spr-border-color-weak': !bordered.value,
+    });
+    const dropdownInputFieldClass = classNames('spr-w-[120px] spr-h-full spr-space-x-2');
     const inputFieldIconClass = classNames('spr-mt-0.5 spr-pl-1 spr-text-mushroom-950');
     const rightSideClass = classNames('spr-flex spr-justify-between spr-items-center spr-space-x-4');
-    const computeRowRangeClass = classNames('spr-font-main spr-text-color-base');
+    const computeRowRangeClass = classNames('spr-text-color-base spr-body-sm-regular');
     const navigationContainerClass = classNames('spr-flex spr-space-x-2');
     const navigationButtonClass = classNames('spr-rounded-border-radius-md');
     const dropdownClass = classNames('!spr-w-max');

package/src/components/table/use-table.ts

@@ -76,7 +76,7 @@ export const useTable = (props: TablePropTypes, emit: SetupContext<TableEmitType
     const tableWrapperClasses = classNames(
       'spr-border-color-weak spr-w-full spr-overflow-hidden spr-rounded-border-radius-lg spr-border spr-border-solid spr-table-wrapper spr-relative spr-h-max',
     );
-    const tableFooterClasses = classNames('spr-absolute spr-w-full spr-bottom-0 spr-left-0', {
+    const tableFooterClasses = classNames('spr-w-full spr-bottom-0 spr-left-0', {
       'spr-background-color-surface': props.variant === 'surface',
       'spr-background-color': props.variant === 'white',
     });