design-system-next 1.5.1 → 1.5.5

package/dist/design-system-next.js

@@ -1436,14 +1436,14 @@ const Z4 = {
     }, [
       ["image", "client", "user", "user-group"].includes(t.variant) || n.$slots.default ? (M(), f("div", {
         key: 0,
-        class: z([n.avatarClassses.imageClasses, "avatar__slot spr-border-color-weak spr-border spr-border-solid"])
+        class: z([d(s).imageClasses, "avatar__slot spr-border-color-weak spr-border spr-border-solid"])
       }, [
         G(n.$slots, "default", {}, () => [
           n.src ? (M(), f("img", {
             key: 0,
             src: n.src,
             alt: n.alt,
-            class: z(n.avatarClassses.imageClasses)
+            class: z(d(s).imageClasses)
           }, null, 10, J4)) : (M(), F(d(R), {
             key: 1,
             icon: d(o)
@@ -1451,11 +1451,11 @@ const Z4 = {
         ])
       ], 2)) : (M(), f("div", {
         key: 1,
-        class: z(n.avatarClassses.nameInitalsClasses)
+        class: z(d(s).nameInitialsClasses)
       }, $(t.variant === "count" ? `+${n.count}` : d(i)), 3)),
       n.notification ? (M(), f("span", {
         key: 2,
-        class: z(n.avatarClassses.notificationClasses)
+        class: z(d(s).notificationClasses)
       }, [
         J(K2, {
           text: n.NotificationText,
@@ -1465,7 +1465,7 @@ const Z4 = {
       ], 2)) : A("", !0),
       n.badge ? (M(), f("span", {
         key: 3,
-        class: z(n.avatarClassses.onlineNotificationClasses)
+        class: z(d(s).onlineNotificationClasses)
       }, [
         J(K2, {
           text: "",
@@ -1938,9 +1938,9 @@ const Ns = (e, t) => {
 }, zs = {
   key: 0,
   class: "spr-flex spr-items-center"
-}, As = { class: "spr-mr-size-spacing-3xs" }, bs = { class: "spr-text-mushroom-950 spr-font-size-300 spr-font-medium spr-leading-5" }, vs = {
+}, As = { class: "spr-mr-size-spacing-3xs" }, bs = { class: "spr-body-md-regular-medium spr-text-mushroom-950" }, vs = {
   key: 0,
-  class: "spr-font-size-100 spr-leading-4 spr-text-mushroom-600"
+  class: "spr-body-xs-regular spr-text-mushroom-600"
 }, ws = /* @__PURE__ */ X({
   __name: "card",
   props: js,
@@ -7361,29 +7361,39 @@ const ti = (e) => ({
 }), ii = /* @__PURE__ */ q2(oi, [["__scopeId", "data-v-98d65aa3"]]), ni = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
   __proto__: null,
   default: ii
-}, Symbol.toStringTag, { value: "Module" })), li = ["success", "information", "pending", "caution", "danger"], ai = {
-  /**
-   * @description status state
-   */
+}, Symbol.toStringTag, { value: "Module" })), li = ["success", "information", "pending", "caution", "danger"], ai = ["2xs", "xs", "sm", "base", "lg", "xl", "2xl"], ci = {
   state: {
     type: String,
     validator: (e) => li.includes(e),
     default: "success"
+  },
+  size: {
+    type: String,
+    validator: (e) => ai.includes(e),
+    default: "base"
   }
-}, ci = (e) => {
-  const t = Y(() => "spr-w-6 spr-h-6 " + ({
+}, ui = (e) => {
+  const t = Y(() => ({
+    "2xs": "spr-w-[14px] spr-h-[14px]",
+    xs: "spr-w-4 spr-h-4",
+    sm: "spr-w-5 spr-h-5",
+    base: "spr-w-6 spr-h-6",
+    lg: "spr-w-8 spr-h-8",
+    xl: "spr-w-10 spr-h-10",
+    "2xl": "spr-w-12 spr-h-12"
+  })[e.size] || "spr-w-6 spr-h-6"), s = Y(() => ({
     success: "spr-text-kangkong-600",
     information: "spr-text-blueberry-700",
     pending: "spr-text-mango-500",
     caution: "spr-text-carrot-500",
     danger: "spr-text-tomato-600"
-  }[e.state] || "spr-text-kangkong-600")), s = Y(() => ({
+  })[e.state] || "spr-text-kangkong-600"), r = Y(() => ({
     success: "ph:check-circle-fill",
     information: "ph:info-fill",
     pending: "ph:warning-fill",
     caution: "ph:warning-fill",
     danger: "ph:warning-circle-fill"
-  })[e.state] || "ph:check-circle-fill"), r = Y(() => ({
+  })[e.state] || "ph:check-circle-fill"), o = Y(() => ({
     success: "Success",
     information: "Information",
     pending: "Pending",
@@ -7391,31 +7401,32 @@ const ti = (e) => ({
     danger: "Danger"
   })[e.state] || "Success");
   return {
-    statusIcon: s,
-    statusClass: t,
-    statusDescription: r
+    statusIcon: r,
+    statusClass: s,
+    statusDescription: o,
+    statusSize: t
   };
-}, ui = /* @__PURE__ */ X({
+}, pi = /* @__PURE__ */ X({
   __name: "status",
-  props: ai,
+  props: ci,
   setup(e) {
-    const t = e, { statusIcon: s, statusClass: r, statusDescription: o } = ci(t);
-    return (i, n) => (M(), F(d(R), {
+    const t = e, { statusIcon: s, statusClass: r, statusDescription: o, statusSize: i } = ui(t);
+    return (n, l) => (M(), F(d(R), {
       icon: d(s),
-      class: z(d(r)),
+      class: z([d(r), d(i)]),
       "aria-label": d(o)
     }, null, 8, ["icon", "class", "aria-label"]));
   }
-}), pi = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
+}), di = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
   __proto__: null,
-  default: ui
-}, Symbol.toStringTag, { value: "Module" })), di = ["default", "hover", "pressed", "disabled"], gi = {
+  default: pi
+}, Symbol.toStringTag, { value: "Module" })), gi = ["default", "hover", "pressed", "disabled"], Mi = {
   /**
    * @description Switch UI state when hovered, pressed, disabled
    */
   state: {
     type: String,
-    validator: (e) => di.includes(e),
+    validator: (e) => gi.includes(e),
     default: "default"
   },
   /**
@@ -7433,7 +7444,7 @@ const ti = (e) => ({
     required: !0,
     default: !1
   }
-}, Mi = ["update:modelValue"], Ci = (e) => {
+}, Ci = ["update:modelValue"], fi = (e) => {
   const t = q(null), s = q(null), r = Le(t), { pressed: o } = Vt({ target: s }), { disabled: i, state: n, modelValue: l } = n2(e), a = Y(() => ({
     ...i.value && { ariaDisabled: !0 },
     disabled: i.value,
@@ -7474,12 +7485,12 @@ const ti = (e) => ({
     switchTextClass: I,
     switchInputClass: h
   };
-}, fi = ["disabled"], hi = /* @__PURE__ */ X({
+}, hi = ["disabled"], Ni = /* @__PURE__ */ X({
   __name: "switch",
-  props: gi,
-  emits: Mi,
+  props: Mi,
+  emits: Ci,
   setup(e, { emit: t }) {
-    const s = e, o = m0(s, "modelValue", t), { switchWrapperRef: i, switchRef: n, switchProps: l, switchMarkClass: a, switchTextClass: c, switchInputClass: u } = Ci(s);
+    const s = e, o = m0(s, "modelValue", t), { switchWrapperRef: i, switchRef: n, switchProps: l, switchMarkClass: a, switchTextClass: c, switchInputClass: u } = fi(s);
     return (p, C) => (M(), f("div", Z2(d(l), {
       class: ["spr-flex spr-items-center spr-gap-2", d(c)]
     }), [
@@ -7507,7 +7518,7 @@ const ti = (e) => ({
             d(u)
           ]),
           disabled: s.disabled
-        }, null, 10, fi), [
+        }, null, 10, hi), [
           [_1, d(o)]
         ]),
         j("span", {
@@ -7522,10 +7533,10 @@ const ti = (e) => ({
       ])
     ], 16));
   }
-}), Ni = /* @__PURE__ */ q2(hi, [["__scopeId", "data-v-83ea5712"]]), Di = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
+}), Di = /* @__PURE__ */ q2(Ni, [["__scopeId", "data-v-83ea5712"]]), yi = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
   __proto__: null,
-  default: Ni
-}, Symbol.toStringTag, { value: "Module" })), yi = {
+  default: Di
+}, Symbol.toStringTag, { value: "Module" })), Ii = {
   /**
    * @description Action Column,
    */
@@ -7560,7 +7571,7 @@ const ti = (e) => ({
     type: Boolean,
     default: !1
   }
-}, Ii = (e) => {
+}, ji = (e) => {
   const { dataTable: t, action: s, headers: r } = n2(e), o = q(""), i = q("asc"), n = Y(() => o.value ? [...t.value].sort((u, p) => {
     const C = u[o.value].title.toLowerCase(), g = p[o.value].title.toLowerCase();
     return C < g ? i.value === "asc" ? -1 : 1 : C > g ? i.value === "asc" ? 1 : -1 : 0;
@@ -7572,44 +7583,44 @@ const ti = (e) => ({
     getHeaderCount: a,
     sortData: l
   };
-}, ji = { class: "spr-table-wrapper spr-border-color-weak spr-w-full spr-overflow-hidden spr-rounded-border-radius-lg spr-border spr-border-solid" }, mi = { class: "spr-h-[400px]" }, zi = {
+}, mi = { class: "spr-table-wrapper spr-border-color-weak spr-w-full spr-overflow-hidden spr-rounded-border-radius-lg spr-border spr-border-solid" }, zi = { class: "spr-h-[400px]" }, Ai = {
   "aria-describedby": "describe",
   class: "spr-w-full spr-table-fixed",
   cellspacing: "0",
   cellpadding: "0"
-}, Ai = { class: "spr-flex spr-flex-row spr-items-center spr-gap-size-spacing-5xs" }, bi = ["onClick"], vi = ["onClick"], wi = {
+}, bi = { class: "spr-flex spr-flex-row spr-items-center spr-gap-size-spacing-5xs" }, vi = ["onClick"], wi = ["onClick"], xi = {
   key: 0,
   class: /* @__PURE__ */ z([
     "spr-background-color-surface spr-min-h-12 spr-py-size-spacing-3xs",
     "spr-text-color-strong spr-font-size-100 spr-font-line-height-100 spr-font-letter-spacing-normal spr-text-start spr-font-medium spr-uppercase",
     "spr-border-color-weak spr-border-x-0 spr-border-y spr-border-solid"
   ])
-}, xi = { key: 0 }, Li = {
+}, Li = { key: 0 }, Ti = {
   key: 0,
   class: "spr-flex spr-flex-row spr-items-center spr-gap-2"
-}, Ti = {
+}, Oi = {
   key: 0,
   class: "spr-text-color-base spr-text-xs spr-font-normal"
-}, Oi = {
+}, ki = {
   key: 0,
   class: "spr-border-color-weak spr-overflow-hidden spr-border-x-0 spr-border-b spr-border-t-0 spr-border-solid"
-}, ki = { class: "spr-flex spr-items-center" }, Si = { key: 1 }, _i = { key: 0 }, Ei = ["colspan"], Yi = { key: 1 }, Qi = ["colspan"], Ui = {
+}, Si = { class: "spr-flex spr-items-center" }, _i = { key: 1 }, Ei = { key: 0 }, Yi = ["colspan"], Qi = { key: 1 }, Ui = ["colspan"], $i = {
   key: 0,
   class: "spr-flex spr-items-center spr-justify-center"
-}, $i = /* @__PURE__ */ X({
+}, Pi = /* @__PURE__ */ X({
   __name: "table",
-  props: yi,
+  props: Ii,
   setup(e) {
-    const t = e, { sortedData: s, sortData: r, getHeaderCount: o } = Ii(t);
-    return (i, n) => (M(), f("div", ji, [
+    const t = e, { sortedData: s, sortData: r, getHeaderCount: o } = ji(t);
+    return (i, n) => (M(), f("div", mi, [
       i.$slots.default ? (M(), f("div", {
         key: 0,
         class: z([{ "spr-px-size-spacing-sm spr-py-size-spacing-xs": !!i.$slots.default }])
       }, [
         G(i.$slots, "default")
       ], 2)) : A("", !0),
-      j("div", mi, [
-        j("table", zi, [
+      j("div", zi, [
+        j("table", Ai, [
           j("thead", null, [
             j("tr", null, [
               (M(!0), f(Z, null, s2(i.headers, (l, a) => (M(), f("th", {
@@ -7624,25 +7635,25 @@ const ti = (e) => ({
                   }
                 ])
               }, [
-                j("div", Ai, [
+                j("div", bi, [
                   j("span", {
                     onClick: (c) => l.sort && d(r)(l.field)
-                  }, $(l.name), 9, bi),
+                  }, $(l.name), 9, vi),
                   l.sort ? (M(), f("span", {
                     key: 0,
                     class: "spr-flex spr-flex-row spr-items-center",
                     onClick: (c) => l.sort && d(r)(l.field)
                   }, [
                     J(d(R), { icon: "ph:caret-up-down-light" })
-                  ], 8, vi)) : A("", !0)
+                  ], 8, wi)) : A("", !0)
                 ])
               ], 2))), 128)),
-              i.action ? (M(), f("th", wi, [
+              i.action ? (M(), f("th", xi, [
                 G(i.$slots, "action-name", { class: "spr-background-color-surface spr-text-color-strong spr-font-size-100 spr-font-line-height-100 spr-font-letter-spacing-normal spr-uppercase" })
               ])) : A("", !0)
             ])
           ]),
-          d(s).length > 0 && !i.loading ? (M(), f("tbody", xi, [
+          d(s).length > 0 && !i.loading ? (M(), f("tbody", Li, [
             (M(!0), f(Z, null, s2(d(s), (l, a) => (M(), f("tr", {
               key: a,
               class: "hover:spr-background-color-hover spr-min-h-[60px]"
@@ -7651,7 +7662,7 @@ const ti = (e) => ({
                 key: u,
                 class: "spr-border-color-weak spr-overflow-hidden spr-border-x-0 spr-border-b spr-border-t-0 spr-border-solid spr-p-3"
               }, [
-                d(s)[a][c.field] ? (M(), f("div", Li, [
+                d(s)[a][c.field] ? (M(), f("div", Ti, [
                   c.hasAvatar && d(s)[a][c.field].image ? (M(), F(Ht, {
                     key: 0,
                     size: "lg",
@@ -7665,42 +7676,42 @@ const ti = (e) => ({
                         { "spr-text-color-strong spr-body-sm-regular-medium": c.hasSubtext }
                       ])
                     }, $(d(s)[a][c.field].title), 3),
-                    c.hasSubtext ? (M(), f("div", Ti, $(d(s)[a][c.field].subtext), 1)) : A("", !0)
+                    c.hasSubtext ? (M(), f("div", Oi, $(d(s)[a][c.field].subtext), 1)) : A("", !0)
                   ])
                 ])) : A("", !0)
               ]))), 128)),
-              i.action ? (M(), f("td", Oi, [
-                j("div", ki, [
+              i.action ? (M(), f("td", ki, [
+                j("div", Si, [
                   G(i.$slots, "action", { row: l })
                 ])
               ])) : A("", !0)
             ]))), 128))
-          ])) : (M(), f("tbody", Si, [
-            i.loading ? (M(), f("tr", Yi, [
+          ])) : (M(), f("tbody", _i, [
+            i.loading ? (M(), f("tr", Qi, [
               j("td", {
                 colspan: d(o),
                 class: "spr-overflow-hidden"
               }, [
-                i.$slots.loading ? A("", !0) : (M(), f("div", Ui, "Loading...")),
+                i.$slots.loading ? A("", !0) : (M(), f("div", $i, "Loading...")),
                 G(i.$slots, "loading", { class: "" })
-              ], 8, Qi)
-            ])) : (M(), f("tr", _i, [
+              ], 8, Ui)
+            ])) : (M(), f("tr", Ei, [
               j("td", {
                 colspan: d(o),
                 class: "spr-overflow-hidden"
               }, [
                 J(a1)
-              ], 8, Ei)
+              ], 8, Yi)
             ]))
           ]))
         ])
       ])
     ]));
   }
-}), Pi = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
+}), Zi = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
   __proto__: null,
-  default: $i
-}, Symbol.toStringTag, { value: "Module" })), Zi = {
+  default: Pi
+}, Symbol.toStringTag, { value: "Module" })), Hi = {
   /**
    * @description Tabs List,
    * option list: label, icon, iconFill, disabled
@@ -7723,9 +7734,9 @@ const ti = (e) => ({
     type: String,
     default: ""
   }
-}, Hi = {
+}, Vi = {
   tabIndex: (e) => typeof e == "number"
-}, Vi = (e, t) => {
+}, Fi = (e, t) => {
   const s = Y(() => O({
     "spr-relative spr-px-size-spacing-xs spr-py-size-spacing-3xs spr-body-sm spr-text-color-strong spr-group": !0,
     "spr-transition-left spr-duration-150 spr-ease-in-out": !0,
@@ -7764,13 +7775,13 @@ const ti = (e) => ({
     tabElements: i,
     updateSelectedTabIndex: n
   };
-}, Fi = { class: "spr-relative spr-flex" }, Bi = ["onClick"], Ri = { key: 0 }, Gi = { key: 1 }, Wi = /* @__PURE__ */ X({
+}, Bi = { class: "spr-relative spr-flex" }, Ri = ["onClick"], Gi = { key: 0 }, Wi = { key: 1 }, Ji = /* @__PURE__ */ X({
   __name: "tabs",
-  props: Zi,
-  emits: Hi,
+  props: Hi,
+  emits: Vi,
   setup(e, { emit: t }) {
-    const s = t, r = e, { tabsClasses: o, activeTab: i, tabElements: n, updateSelectedTabIndex: l } = Vi(r, s);
-    return (a, c) => (M(), f("div", Fi, [
+    const s = t, r = e, { tabsClasses: o, activeTab: i, tabElements: n, updateSelectedTabIndex: l } = Fi(r, s);
+    return (a, c) => (M(), f("div", Bi, [
       (M(!0), f(Z, null, s2(a.list, (u, p) => (M(), f("div", {
         key: p,
         ref_for: !0,
@@ -7815,7 +7826,7 @@ const ti = (e) => ({
             "spr-cursor-not-allowed": u.disabled
           })
         }, [
-          u.icon ? (M(), f("div", Ri, [
+          u.icon ? (M(), f("div", Gi, [
             J(d(R), {
               class: z({
                 "spr-body-sm-regular": !0,
@@ -7824,9 +7835,9 @@ const ti = (e) => ({
               icon: d(i).index === p && typeof u.iconFill == "string" ? u.iconFill : u.icon
             }, null, 8, ["class", "icon"])
           ])) : A("", !0),
-          u.label ? (M(), f("div", Gi, $(u.label), 1)) : A("", !0)
+          u.label ? (M(), f("div", Wi, $(u.label), 1)) : A("", !0)
         ], 2)
-      ], 10, Bi))), 128)),
+      ], 10, Ri))), 128)),
       a.underlined ? (M(), f("div", {
         key: 0,
         class: z([
@@ -7840,10 +7851,10 @@ const ti = (e) => ({
       }, null, 4)) : A("", !0)
     ]));
   }
-}), Ji = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
+}), Ki = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
   __proto__: null,
-  default: Wi
-}, Symbol.toStringTag, { value: "Module" })), Ki = {
+  default: Ji
+}, Symbol.toStringTag, { value: "Module" })), Xi = {
   modelValue: {
     type: String,
     default: ""
@@ -7880,9 +7891,9 @@ const ti = (e) => ({
     type: String,
     default: ""
   }
-}, Xi = {
+}, qi = {
   "update:modelValue": (e) => e instanceof KeyboardEvent
-}, qi = (e, t) => {
+}, en = (e, t) => {
   const { error: s, disabled: r, readonly: o } = n2(e), i = m0(e, "modelValue", t);
   return {
     textareaClasses: Y(() => {
@@ -7910,12 +7921,12 @@ const ti = (e) => ({
       i.value = c.value;
     }
   };
-}, en = ["for"], tn = ["disabled", "rows", "placeholder", "readonly"], sn = /* @__PURE__ */ X({
+}, tn = ["for"], sn = ["disabled", "rows", "placeholder", "readonly"], rn = /* @__PURE__ */ X({
   __name: "textarea",
-  props: Ki,
-  emits: Xi,
+  props: Xi,
+  emits: qi,
   setup(e, { emit: t }) {
-    const s = e, r = t, { onInput: o, textareaClasses: i } = qi(s, r);
+    const s = e, r = t, { onInput: o, textareaClasses: i } = en(s, r);
     return (n, l) => (M(), f("div", {
       class: z(d(i).wrapperClasses)
     }, [
@@ -7923,7 +7934,7 @@ const ti = (e) => ({
         key: 0,
         for: n.id,
         class: z(d(i).labelClasses)
-      }, $(n.label), 11, en)) : A("", !0),
+      }, $(n.label), 11, tn)) : A("", !0),
       W2(j("textarea", Z2({
         "onUpdate:modelValue": l[0] || (l[0] = (a) => n.modelValue = a),
         class: d(i).textAreaClasses
@@ -7934,7 +7945,7 @@ const ti = (e) => ({
         readonly: n.readonly,
         onInput: l[1] || (l[1] = //@ts-ignore
         (...a) => d(o) && d(o)(...a))
-      }), null, 16, tn), [
+      }), null, 16, sn), [
         [Lt, n.modelValue]
       ]),
       n.error ? (M(), f("div", {
@@ -7946,10 +7957,10 @@ const ti = (e) => ({
       ], 2)) : A("", !0)
     ], 2));
   }
-}), rn = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
+}), on = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
   __proto__: null,
-  default: sn
-}, Symbol.toStringTag, { value: "Module" })), on = {
+  default: rn
+}, Symbol.toStringTag, { value: "Module" })), nn = {
   modelValue: {
     type: String,
     required: !0
@@ -7994,15 +8005,15 @@ const ti = (e) => ({
     type: Boolean,
     default: !1
   }
-}, nn = {
+}, ln = {
   "update:modelValue": (e) => e instanceof MouseEvent
 };
-var Y0 = { exports: {} }, ln = Y0.exports, mt;
-function an() {
+var Y0 = { exports: {} }, an = Y0.exports, mt;
+function cn() {
   return mt || (mt = 1, function(e, t) {
     (function(s, r) {
       e.exports = r();
-    })(ln, function() {
+    })(an, function() {
       var s = 1e3, r = 6e4, o = 36e5, i = "millisecond", n = "second", l = "minute", a = "hour", c = "day", u = "week", p = "month", C = "quarter", g = "year", I = "date", m = "Invalid Date", y = /^(\d{4})[-/]?(\d{1,2})?[-/]?(\d{0,2})[Tt\s]*(\d{1,2})?:?(\d{1,2})?:?(\d{1,2})?[.:]?(\d+)?$/, h = /\[([^\]]+)]|Y{1,4}|M{1,4}|D{1,2}|d{1,4}|H{1,2}|h{1,2}|a|A|m{1,2}|s{1,2}|Z{1,2}|SSS/g, b = { name: "en", weekdays: "Sunday_Monday_Tuesday_Wednesday_Thursday_Friday_Saturday".split("_"), months: "January_February_March_April_May_June_July_August_September_October_November_December".split("_"), ordinal: function(k) {
         var T = ["th", "st", "nd", "rd"], w = k % 100;
         return "[" + k + (T[(w - 20) % 10] || T[w] || T[0]) + "]";
@@ -8275,8 +8286,8 @@ function an() {
     });
   }(Y0)), Y0.exports;
 }
-var cn = an();
-const zt = /* @__PURE__ */ Tt(cn), un = (e, t) => {
+var un = cn();
+const zt = /* @__PURE__ */ Tt(un), pn = (e, t) => {
   const { error: s, disabled: r, format: o, interval: i, disableTyping: n, fullWidth: l } = n2(e), a = q(!1), c = m0(e, "modelValue", t), u = Y(() => O(
     "spr-block spr-w-full spr-px-size-spacing-2xs spr-py-size-spacing-4xs spr-rounded-border-radius-md spr-outline-none spr-ring-0",
     "spr-text-color-strong spr-font-size-200",
@@ -8348,16 +8359,16 @@ const zt = /* @__PURE__ */ Tt(cn), un = (e, t) => {
     selectOption: U,
     handleClick: _
   };
-}, pn = { class: "spr-relative spr-flex spr-items-center" }, dn = ["placeholder", "readonly", "disabled"], gn = { key: 0 }, Mn = ["onMousedown"], Cn = {
+}, dn = { class: "spr-relative spr-flex spr-items-center" }, gn = ["placeholder", "readonly", "disabled"], Mn = { key: 0 }, Cn = ["onMousedown"], fn = {
   key: 0,
   class: "spr-text-color-brand-base spr-font-bold"
-}, fn = {
+}, hn = {
   key: 1,
   class: "spr-px-3 spr-py-2 spr-text-gray-500"
-}, hn = /* @__PURE__ */ X({
+}, Nn = /* @__PURE__ */ X({
   __name: "time-picker",
-  props: on,
-  emits: nn,
+  props: nn,
+  emits: ln,
   setup(e, { emit: t }) {
     const s = e, r = t, {
       timepickerClasses: o,
@@ -8372,7 +8383,7 @@ const zt = /* @__PURE__ */ Tt(cn), un = (e, t) => {
       selectOption: g,
       filterInput: I,
       handleClick: m
-    } = un(s, r);
+    } = pn(s, r);
     return (y, h) => (M(), f("div", {
       class: z(d(a))
     }, [
@@ -8380,7 +8391,7 @@ const zt = /* @__PURE__ */ Tt(cn), un = (e, t) => {
         key: 0,
         class: z(d(l))
       }, $(y.label), 3)) : A("", !0),
-      j("div", pn, [
+      j("div", dn, [
         W2(j("input", {
           "onUpdate:modelValue": h[0] || (h[0] = (b) => h2(p) ? p.value = b : null),
           type: "text",
@@ -8399,7 +8410,7 @@ const zt = /* @__PURE__ */ Tt(cn), un = (e, t) => {
           onInput: h[5] || (h[5] = //@ts-ignore
           (...b) => d(I) && d(I)(...b)),
           onFocusout: h[6] || (h[6] = (b) => c.value = !1)
-        }, null, 42, dn), [
+        }, null, 42, gn), [
           [Lt, d(p)]
         ]),
         j("div", {
@@ -8414,7 +8425,7 @@ const zt = /* @__PURE__ */ Tt(cn), un = (e, t) => {
         key: 1,
         class: z(d(i))
       }, [
-        d(u).length > 0 ? (M(), f("div", gn, [
+        d(u).length > 0 ? (M(), f("div", Mn, [
           (M(!0), f(Z, null, s2(d(u), (b) => {
             var L, U;
             return M(), f("div", {
@@ -8429,19 +8440,19 @@ const zt = /* @__PURE__ */ Tt(cn), un = (e, t) => {
               onMousedown: a0((_) => d(g)(b), ["prevent"])
             }, [
               B0($(b) + " ", 1),
-              b.toUpperCase() === ((U = d(p)) == null ? void 0 : U.toUpperCase()) ? (M(), f("span", Cn, [
+              b.toUpperCase() === ((U = d(p)) == null ? void 0 : U.toUpperCase()) ? (M(), f("span", fn, [
                 J(d(R), { icon: "ph:check" })
               ])) : A("", !0)
-            ], 42, Mn);
+            ], 42, Cn);
           }), 128))
-        ])) : (M(), f("div", fn, "No matching options found"))
+        ])) : (M(), f("div", hn, "No matching options found"))
       ], 2)) : A("", !0)
     ], 2));
   }
-}), Nn = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
+}), Dn = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
   __proto__: null,
-  default: hn
-}, Symbol.toStringTag, { value: "Module" })), Dn = [
+  default: Nn
+}, Symbol.toStringTag, { value: "Module" })), yn = [
   "top",
   "top-start",
   "top-end",
@@ -8454,7 +8465,7 @@ const zt = /* @__PURE__ */ Tt(cn), un = (e, t) => {
   "right",
   "right-start",
   "right-end"
-], yn = {
+], In = {
   /**
    * @description Tooltip Label
    */
@@ -8467,27 +8478,27 @@ const zt = /* @__PURE__ */ Tt(cn), un = (e, t) => {
    */
   placement: {
     type: String,
-    validator: (e) => Dn.includes(e),
+    validator: (e) => yn.includes(e),
     default: "top"
   },
   hasMaxWidth: {
     type: Boolean,
     default: !0
   }
-}, In = (e) => ({
+}, jn = (e) => ({
   placement: q(e.placement)
-}), jn = { key: 0 }, mn = /* @__PURE__ */ X({
+}), mn = { key: 0 }, zn = /* @__PURE__ */ X({
   __name: "tooltip",
-  props: yn,
+  props: In,
   setup(e) {
-    const t = e, { placement: s } = In(t);
+    const t = e, { placement: s } = jn(t);
     return (r, o) => (M(), F(d(i0), {
       class: "spr-w-fit",
       "aria-id": t.hasMaxWidth ? "tooltip-full-width-wrapper" : "tooltip-wrapper",
       placement: d(s)
     }, {
       popper: W(() => [
-        r.text ? (M(), f("span", jn, $(r.text), 1)) : A("", !0),
+        r.text ? (M(), f("span", mn, $(r.text), 1)) : A("", !0),
         G(r.$slots, "popper-content")
       ]),
       default: W(() => [
@@ -8496,16 +8507,16 @@ const zt = /* @__PURE__ */ Tt(cn), un = (e, t) => {
       _: 3
     }, 8, ["aria-id", "placement"]));
   }
-}), zn = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
+}), An = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
   __proto__: null,
-  default: mn
-}, Symbol.toStringTag, { value: "Module" })), An = "spr-", bn = /* @__PURE__ */ Object.assign({ "../src/components/avatar/avatar.vue": K4, "../src/components/badge/badge.vue": W4, "../src/components/button/button.vue": ys, "../src/components/card/card.vue": xs, "../src/components/checkbox/checkbox.vue": Es, "../src/components/chips/chips.vue": Js, "../src/components/dropdown/dropdown.vue": J3, "../src/components/empty-state/empty-state.vue": Cr, "../src/components/input/input-email/input-email.vue": vr, "../src/components/input/input-password/input-password.vue": Lr, "../src/components/input/input-search/input-search.vue": Or, "../src/components/input/input-url/input-url.vue": Sr, "../src/components/input/input-username/input-username.vue": Er, "../src/components/input/input.vue": Ar, "../src/components/lozenge/lozenge.vue": Fr, "../src/components/modal/modal.vue": so, "../src/components/radio/radio.vue": po, "../src/components/sidenav/sidenav.vue": n5, "../src/components/sidepanel/sidepanel.vue": N5, "../src/components/snackbar/snack/snack.vue": A5, "../src/components/snackbar/snackbar.vue": ni, "../src/components/status/status.vue": pi, "../src/components/switch/switch.vue": Di, "../src/components/table/table.vue": Pi, "../src/components/tabs/tabs.vue": Ji, "../src/components/textarea/textarea.vue": rn, "../src/components/time-picker/time-picker.vue": Nn, "../src/components/tooltip/tooltip.vue": zn }), vn = (e) => {
-  Object.entries(bn).forEach(([t, s]) => {
+  default: zn
+}, Symbol.toStringTag, { value: "Module" })), bn = "spr-", vn = /* @__PURE__ */ Object.assign({ "../src/components/avatar/avatar.vue": K4, "../src/components/badge/badge.vue": W4, "../src/components/button/button.vue": ys, "../src/components/card/card.vue": xs, "../src/components/checkbox/checkbox.vue": Es, "../src/components/chips/chips.vue": Js, "../src/components/dropdown/dropdown.vue": J3, "../src/components/empty-state/empty-state.vue": Cr, "../src/components/input/input-email/input-email.vue": vr, "../src/components/input/input-password/input-password.vue": Lr, "../src/components/input/input-search/input-search.vue": Or, "../src/components/input/input-url/input-url.vue": Sr, "../src/components/input/input-username/input-username.vue": Er, "../src/components/input/input.vue": Ar, "../src/components/lozenge/lozenge.vue": Fr, "../src/components/modal/modal.vue": so, "../src/components/radio/radio.vue": po, "../src/components/sidenav/sidenav.vue": n5, "../src/components/sidepanel/sidepanel.vue": N5, "../src/components/snackbar/snack/snack.vue": A5, "../src/components/snackbar/snackbar.vue": ni, "../src/components/status/status.vue": di, "../src/components/switch/switch.vue": yi, "../src/components/table/table.vue": Zi, "../src/components/tabs/tabs.vue": Ki, "../src/components/textarea/textarea.vue": on, "../src/components/time-picker/time-picker.vue": Dn, "../src/components/tooltip/tooltip.vue": An }), wn = (e) => {
+  Object.entries(vn).forEach(([t, s]) => {
     var o;
     const r = (o = t.split("/").pop()) == null ? void 0 : o.replace(".vue", "");
-    r && e.component(`${An}${r}`, s.default);
+    r && e.component(`${bn}${r}`, s.default);
   }), console.log("%c🚀⭐ Design System Next Installed ⭐🚀", "color: green; font-weight: bold; font-size: 14px;");
-}, xn = { install: vn };
+}, Ln = { install: wn };
 export {
-  xn as default
+  Ln as default
 };

package/dist/main.css

@@ -1 +1 @@
-@import"https://fonts.googleapis.com/css2?family=Rubik:ital,wght@0,300..900;1,300..900&display=swap";@import"https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap";@import"https://fonts.googleapis.com/css2?family=Roboto+Mono:ital,wght@0,100..700;1,100..700&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap";.resize-observer[data-v-b329ee4c]{position:absolute;top:0;left:0;z-index:-1;width:100%;height:100%;border:none;background-color:transparent;pointer-events:none;display:block;overflow:hidden;opacity:0}.resize-observer[data-v-b329ee4c] object{display:block;position:absolute;top:0;left:0;height:100%;width:100%;overflow:hidden;pointer-events:none;z-index:-1}.v-popper__popper{z-index:10000;top:0;left:0;outline:none}.v-popper__popper.v-popper__popper--hidden{visibility:hidden;opacity:0;transition:opacity .15s,visibility .15s;pointer-events:none}.v-popper__popper.v-popper__popper--shown{visibility:visible;opacity:1;transition:opacity .15s}.v-popper__popper.v-popper__popper--skip-transition,.v-popper__popper.v-popper__popper--skip-transition>.v-popper__wrapper{transition:none!important}.v-popper__backdrop{position:absolute;top:0;left:0;width:100%;height:100%;display:none}.v-popper__inner{position:relative;box-sizing:border-box;overflow-y:auto}.v-popper__inner>div{position:relative;z-index:1;max-width:inherit;max-height:inherit}.v-popper__arrow-container{position:absolute;width:10px;height:10px}.v-popper__popper--arrow-overflow .v-popper__arrow-container,.v-popper__popper--no-positioning .v-popper__arrow-container{display:none}.v-popper__arrow-inner,.v-popper__arrow-outer{border-style:solid;position:absolute;top:0;left:0;width:0;height:0}.v-popper__arrow-inner{visibility:hidden;border-width:7px}.v-popper__arrow-outer{border-width:6px}.v-popper__popper[data-popper-placement^=top] .v-popper__arrow-inner,.v-popper__popper[data-popper-placement^=bottom] .v-popper__arrow-inner{left:-2px}.v-popper__popper[data-popper-placement^=top] .v-popper__arrow-outer,.v-popper__popper[data-popper-placement^=bottom] .v-popper__arrow-outer{left:-1px}.v-popper__popper[data-popper-placement^=top] .v-popper__arrow-inner,.v-popper__popper[data-popper-placement^=top] .v-popper__arrow-outer{border-bottom-width:0;border-left-color:transparent!important;border-right-color:transparent!important;border-bottom-color:transparent!important}.v-popper__popper[data-popper-placement^=top] .v-popper__arrow-inner{top:-2px}.v-popper__popper[data-popper-placement^=bottom] .v-popper__arrow-container{top:0}.v-popper__popper[data-popper-placement^=bottom] .v-popper__arrow-inner,.v-popper__popper[data-popper-placement^=bottom] .v-popper__arrow-outer{border-top-width:0;border-left-color:transparent!important;border-right-color:transparent!important;border-top-color:transparent!important}.v-popper__popper[data-popper-placement^=bottom] .v-popper__arrow-inner{top:-4px}.v-popper__popper[data-popper-placement^=bottom] .v-popper__arrow-outer{top:-6px}.v-popper__popper[data-popper-placement^=left] .v-popper__arrow-inner,.v-popper__popper[data-popper-placement^=right] .v-popper__arrow-inner{top:-2px}.v-popper__popper[data-popper-placement^=left] .v-popper__arrow-outer,.v-popper__popper[data-popper-placement^=right] .v-popper__arrow-outer{top:-1px}.v-popper__popper[data-popper-placement^=right] .v-popper__arrow-inner,.v-popper__popper[data-popper-placement^=right] .v-popper__arrow-outer{border-left-width:0;border-left-color:transparent!important;border-top-color:transparent!important;border-bottom-color:transparent!important}.v-popper__popper[data-popper-placement^=right] .v-popper__arrow-inner{left:-4px}.v-popper__popper[data-popper-placement^=right] .v-popper__arrow-outer{left:-6px}.v-popper__popper[data-popper-placement^=left] .v-popper__arrow-container{right:-10px}.v-popper__popper[data-popper-placement^=left] .v-popper__arrow-inner,.v-popper__popper[data-popper-placement^=left] .v-popper__arrow-outer{border-right-width:0;border-top-color:transparent!important;border-right-color:transparent!important;border-bottom-color:transparent!important}.v-popper__popper[data-popper-placement^=left] .v-popper__arrow-inner{left:-2px}.v-popper--theme-tooltip .v-popper__inner{background:#000c;color:#fff;border-radius:6px;padding:7px 12px 6px}.v-popper--theme-tooltip .v-popper__arrow-outer{border-color:#000c}.v-popper--theme-dropdown .v-popper__inner{background:#fff;color:#000;border-radius:6px;border:1px solid #ddd;box-shadow:0 6px 30px #0000001a}.v-popper--theme-dropdown .v-popper__arrow-inner{visibility:visible;border-color:#fff}.v-popper--theme-dropdown .v-popper__arrow-outer{border-color:#ddd}.number-input[data-v-4ecedabc]::-webkit-outer-spin-button,.number-input[data-v-4ecedabc]::-webkit-inner-spin-button{margin:0;-webkit-appearance:none}.number-input[data-v-4ecedabc]{-moz-appearance:textfield}.spr-modal[data-v-498d4cdd]::backdrop{background-color:#4c5857;opacity:.6}@keyframes shadowGrow-804192a8{0%{box-shadow:inset 0 0 0 25px #fff}to{box-shadow:inset 0 0 0 2.5px #fff}}.animate-shadow-grow[data-v-804192a8]{animation:shadowGrow-804192a8 .3s ease-in-out forwards}.snackbar[data-v-dcbdc1be]{width:360px;max-width:360px;min-height:56px;max-height:76px}.snackbar-enter-from[data-v-98d65aa3],.snackbar-leave-to[data-v-98d65aa3]{transform:translateY(100%);opacity:0}.snackbar-enter-active[data-v-98d65aa3],.snackbar-leave-active[data-v-98d65aa3]{transition:.25s ease all}.snackbar-wrapper[data-v-98d65aa3]{position:fixed;bottom:1rem;left:50%;transform:translate(-50%);z-index:100}.snackbar-wrapper>ul[data-v-98d65aa3]{list-style-type:none}.input:checked~.switch-mark[data-v-83ea5712]:before{left:1.7rem}.switch-mark[data-v-83ea5712]:before,.switch-mark[data-v-83ea5712]:after{position:absolute;content:""}.switch-mark[data-v-83ea5712]:before{left:.25rem;top:.25rem;height:1rem;width:1rem;border-radius:50%;--tw-bg-opacity: 1;background-color:rgb(255 255 255 / var(--tw-bg-opacity, 1))}*,:before,:after{--tw-border-spacing-x: 0;--tw-border-spacing-y: 0;--tw-translate-x: 0;--tw-translate-y: 0;--tw-rotate: 0;--tw-skew-x: 0;--tw-skew-y: 0;--tw-scale-x: 1;--tw-scale-y: 1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness: proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-color: rgb(59 130 246 / .5);--tw-ring-offset-shadow: 0 0 #0000;--tw-ring-shadow: 0 0 #0000;--tw-shadow: 0 0 #0000;--tw-shadow-colored: 0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }::backdrop{--tw-border-spacing-x: 0;--tw-border-spacing-y: 0;--tw-translate-x: 0;--tw-translate-y: 0;--tw-rotate: 0;--tw-skew-x: 0;--tw-skew-y: 0;--tw-scale-x: 1;--tw-scale-y: 1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness: proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-color: rgb(59 130 246 / .5);--tw-ring-offset-shadow: 0 0 #0000;--tw-ring-shadow: 0 0 #0000;--tw-shadow: 0 0 #0000;--tw-shadow-colored: 0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }:root{--size-50: 2px;--size-100: 4px;--size-150: 6px;--size-200: 8px;--size-250: 12px;--size-300: 16px;--size-400: 24px;--size-500: 32px;--size-600: 40px;--size-700: 48px;--size-800: 64px;--size-900: 72px;--size-1000: 80px;--size-1100: 96px;--size-1200: 128px}*::-webkit-scrollbar{height:8px;width:8px}*::-webkit-scrollbar-track{--tw-bg-opacity: 1;background-color:rgb(219 219 221 / var(--tw-bg-opacity, 1))}*::-webkit-scrollbar-thumb{border-radius:9999px;--tw-bg-opacity: 1;background-color:rgb(186 188 192 / var(--tw-bg-opacity, 1))}#quick-action-menu-wrapper{max-height:500px;width:400px}#sidenav-menu-wrapper,#sidenav-submenu-wrapper{max-height:500px;width:215px}#user-menu-wrapper{top:-20px!important;max-height:500px;width:300px}#sidenav-sub-submenu-wrapper{display:none}#quick-action-menu-wrapper,#sidenav-menu-wrapper,#sidenav-submenu-wrapper,#user-menu-wrapper{overflow-y:auto;overflow-x:hidden;border-radius:12px;border-width:1px;border-style:solid;--tw-drop-shadow: drop-shadow(0 4px 3px rgb(0 0 0 / .07)) drop-shadow(0 2px 2px rgb(0 0 0 / .06));filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);--tw-bg-opacity: 1;background-color:rgb(255 255 255 / var(--tw-bg-opacity, 1));--tw-border-opacity: 1;border-color:rgb(184 193 192 / var(--tw-border-opacity, 1));--tw-shadow: 0px 4px 12px 0px #262B2B29;--tw-shadow-colored: 0px 4px 12px 0px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow)}#quick-action-menu-wrapper .v-popper__wrapper .v-popper__inner,#sidenav-menu-wrapper .v-popper__wrapper .v-popper__inner,#sidenav-submenu-wrapper .v-popper__wrapper .v-popper__inner,#user-menu-wrapper .v-popper__wrapper .v-popper__inner{overflow:hidden}#quick-action-menu-wrapper .v-popper__wrapper .v-popper__inner,#sidenav-menu-wrapper .v-popper__wrapper .v-popper__inner,#sidenav-submenu-wrapper .v-popper__wrapper .v-popper__inner,#user-menu-wrapper .v-popper__wrapper .v-popper__inner{border-radius:0}#quick-action-menu-wrapper .v-popper__wrapper .v-popper__inner,#sidenav-menu-wrapper .v-popper__wrapper .v-popper__inner,#sidenav-submenu-wrapper .v-popper__wrapper .v-popper__inner,#user-menu-wrapper .v-popper__wrapper .v-popper__inner{border-style:none}#quick-action-menu-wrapper .v-popper__wrapper .v-popper__inner,#sidenav-menu-wrapper .v-popper__wrapper .v-popper__inner,#sidenav-submenu-wrapper .v-popper__wrapper .v-popper__inner,#user-menu-wrapper .v-popper__wrapper .v-popper__inner{background-color:transparent}#quick-action-menu-wrapper .v-popper__wrapper .v-popper__inner,#sidenav-menu-wrapper .v-popper__wrapper .v-popper__inner,#sidenav-submenu-wrapper .v-popper__wrapper .v-popper__inner,#user-menu-wrapper .v-popper__wrapper .v-popper__inner{--tw-shadow: 0 0 #0000;--tw-shadow-colored: 0 0 #0000;box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow)}#quick-action-menu-wrapper .v-popper__wrapper .v-popper__inner .slide-fade-enter-active,#sidenav-menu-wrapper .v-popper__wrapper .v-popper__inner .slide-fade-enter-active,#sidenav-submenu-wrapper .v-popper__wrapper .v-popper__inner .slide-fade-enter-active,#user-menu-wrapper .v-popper__wrapper .v-popper__inner .slide-fade-enter-active{transition-duration:.3s}#quick-action-menu-wrapper .v-popper__wrapper .v-popper__inner .slide-fade-enter-active,#sidenav-menu-wrapper .v-popper__wrapper .v-popper__inner .slide-fade-enter-active,#sidenav-submenu-wrapper .v-popper__wrapper .v-popper__inner .slide-fade-enter-active,#user-menu-wrapper .v-popper__wrapper .v-popper__inner .slide-fade-enter-active{transition-timing-function:cubic-bezier(0,0,.2,1)}#quick-action-menu-wrapper .v-popper__wrapper .v-popper__inner .slide-fade-leave-active,#sidenav-menu-wrapper .v-popper__wrapper .v-popper__inner .slide-fade-leave-active,#sidenav-submenu-wrapper .v-popper__wrapper .v-popper__inner .slide-fade-leave-active,#user-menu-wrapper .v-popper__wrapper .v-popper__inner .slide-fade-leave-active{transition:all .8s cubic-bezier(1,.5,.8,1)}#quick-action-menu-wrapper .v-popper__wrapper .v-popper__inner .slide-fade-enter-from,#quick-action-menu-wrapper .v-popper__wrapper .v-popper__inner .slide-fade-leave-to,#sidenav-menu-wrapper .v-popper__wrapper .v-popper__inner .slide-fade-enter-from,#sidenav-menu-wrapper .v-popper__wrapper .v-popper__inner .slide-fade-leave-to,#sidenav-submenu-wrapper .v-popper__wrapper .v-popper__inner .slide-fade-enter-from,#sidenav-submenu-wrapper .v-popper__wrapper .v-popper__inner .slide-fade-leave-to,#user-menu-wrapper .v-popper__wrapper .v-popper__inner .slide-fade-enter-from,#user-menu-wrapper .v-popper__wrapper .v-popper__inner .slide-fade-leave-to{--tw-translate-x: -20px;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}#quick-action-menu-wrapper .v-popper__wrapper .v-popper__inner .slide-fade-enter-from,#quick-action-menu-wrapper .v-popper__wrapper .v-popper__inner .slide-fade-leave-to,#sidenav-menu-wrapper .v-popper__wrapper .v-popper__inner .slide-fade-enter-from,#sidenav-menu-wrapper .v-popper__wrapper .v-popper__inner .slide-fade-leave-to,#sidenav-submenu-wrapper .v-popper__wrapper .v-popper__inner .slide-fade-enter-from,#sidenav-submenu-wrapper .v-popper__wrapper .v-popper__inner .slide-fade-leave-to,#user-menu-wrapper .v-popper__wrapper .v-popper__inner .slide-fade-enter-from,#user-menu-wrapper .v-popper__wrapper .v-popper__inner .slide-fade-leave-to{opacity:0}#quick-action-menu-wrapper .v-popper__wrapper .v-popper__arrow-container,#sidenav-menu-wrapper .v-popper__wrapper .v-popper__arrow-container,#sidenav-submenu-wrapper .v-popper__wrapper .v-popper__arrow-container,#user-menu-wrapper .v-popper__wrapper .v-popper__arrow-container{display:none}#tooltip-wrapper .v-popper__wrapper .v-popper__inner,#tooltip-full-width-wrapper .v-popper__wrapper .v-popper__inner{border-radius:var(--size-200)}#tooltip-wrapper .v-popper__wrapper .v-popper__inner,#tooltip-full-width-wrapper .v-popper__wrapper .v-popper__inner{padding-left:.5rem;padding-right:.5rem}#tooltip-wrapper .v-popper__wrapper .v-popper__inner,#tooltip-full-width-wrapper .v-popper__wrapper .v-popper__inner{padding-top:.375rem;padding-bottom:.375rem}#tooltip-wrapper .v-popper__wrapper .v-popper__inner,#tooltip-full-width-wrapper .v-popper__wrapper .v-popper__inner{opacity:1}#tooltip-wrapper .v-popper__wrapper .v-popper__inner,#tooltip-full-width-wrapper .v-popper__wrapper .v-popper__inner{font-weight:400}#tooltip-wrapper .v-popper__wrapper .v-popper__inner,#tooltip-full-width-wrapper .v-popper__wrapper .v-popper__inner{font-family:Rubik,sans-serif}#tooltip-wrapper .v-popper__wrapper .v-popper__inner,#tooltip-full-width-wrapper .v-popper__wrapper .v-popper__inner{font-size:12px}#tooltip-wrapper .v-popper__wrapper .v-popper__inner,#tooltip-full-width-wrapper .v-popper__wrapper .v-popper__inner{line-height:16px}#tooltip-wrapper .v-popper__wrapper .v-popper__inner,#tooltip-full-width-wrapper .v-popper__wrapper .v-popper__inner{letter-spacing:0px}#tooltip-wrapper .v-popper__wrapper .v-popper__inner,#tooltip-full-width-wrapper .v-popper__wrapper .v-popper__inner{--tw-text-opacity: 1;color:rgb(255 255 255 / var(--tw-text-opacity, 1))}#tooltip-wrapper .v-popper__wrapper .v-popper__inner,#tooltip-full-width-wrapper .v-popper__wrapper .v-popper__inner{--tw-bg-opacity: 1;background-color:rgb(38 43 43 / var(--tw-bg-opacity, 1))}#tooltip-wrapper .v-popper__wrapper .v-popper__arrow-outer,#tooltip-full-width-wrapper .v-popper__wrapper .v-popper__arrow-outer{display:none}#tooltip-wrapper .v-popper__wrapper .v-popper__inner{max-width:100%}#tooltip-full-width-wrapper .v-popper__wrapper .v-popper__inner{max-width:280px}#sidenav-tooltip-wrapper .v-popper__wrapper .v-popper__inner{border-radius:var(--size-200)}#sidenav-tooltip-wrapper .v-popper__wrapper .v-popper__inner{padding-left:.5rem;padding-right:.5rem}#sidenav-tooltip-wrapper .v-popper__wrapper .v-popper__inner{padding-top:.375rem;padding-bottom:.375rem}#sidenav-tooltip-wrapper .v-popper__wrapper .v-popper__inner{opacity:1}#sidenav-tooltip-wrapper .v-popper__wrapper .v-popper__inner{font-family:Rubik,sans-serif}#sidenav-tooltip-wrapper .v-popper__wrapper .v-popper__inner{text-transform:uppercase}#sidenav-tooltip-wrapper .v-popper__wrapper .v-popper__inner{font-size:12px}#sidenav-tooltip-wrapper .v-popper__wrapper .v-popper__inner{line-height:12px}#sidenav-tooltip-wrapper .v-popper__wrapper .v-popper__inner{letter-spacing:.7px}#sidenav-tooltip-wrapper .v-popper__wrapper .v-popper__inner{--tw-bg-opacity: 1;background-color:rgb(38 43 43 / var(--tw-bg-opacity, 1))}#sidenav-tooltip-wrapper .v-popper__wrapper .v-popper__arrow-outer{display:none}#dropdown-wrapper{overflow:hidden}#dropdown-wrapper .v-popper__wrapper .v-popper__inner{max-height:300px}#dropdown-wrapper .v-popper__wrapper .v-popper__inner{width:240px}#dropdown-wrapper .v-popper__wrapper .v-popper__inner{overflow-y:auto}#dropdown-wrapper .v-popper__wrapper .v-popper__inner{border-radius:.75rem}#dropdown-wrapper .v-popper__wrapper .v-popper__inner{border-width:1px}#dropdown-wrapper .v-popper__wrapper .v-popper__inner{border-style:solid}#dropdown-wrapper .v-popper__wrapper .v-popper__inner{padding:.5rem}#dropdown-wrapper .v-popper__wrapper .v-popper__inner{font-family:Rubik,sans-serif}#dropdown-wrapper .v-popper__wrapper .v-popper__inner{--tw-shadow: 0 0 #0000;--tw-shadow-colored: 0 0 #0000;box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow)}#dropdown-wrapper .v-popper__wrapper .v-popper__inner{--tw-border-opacity: 1;border-color:rgb(217 222 222 / var(--tw-border-opacity, 1))}#dropdown-wrapper .v-popper__wrapper .v-popper__inner::-webkit-scrollbar-track{border-bottom-right-radius:.75rem}#dropdown-wrapper .v-popper__wrapper .v-popper__inner::-webkit-scrollbar-track{border-top-right-radius:.75rem}#dropdown-wrapper .v-popper__wrapper .v-popper__arrow-container{display:none}.avatar__slot img{height:100%;width:100%;-o-object-fit:cover;object-fit:cover}.spr-table-wrapper tbody{display:block}.spr-table-wrapper tbody{height:400px}.spr-table-wrapper tbody{width:100%}.spr-table-wrapper tbody{overflow-y:auto}.spr-table-wrapper tr{display:table}.spr-table-wrapper tr{width:100%}.spr-table-wrapper tr{table-layout:fixed}.spr-table-wrapper tbody::-webkit-scrollbar{height:0px}.spr-table-wrapper tbody::-webkit-scrollbar{width:0px}.spr-sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border-width:0}.spr-pointer-events-none{pointer-events:none}.spr-fixed{position:fixed}.spr-absolute{position:absolute}.spr-relative{position:relative}.\!spr-top-4{top:1rem!important}.-spr-bottom-1{bottom:-.25rem}.-spr-bottom-2{bottom:-.5rem}.-spr-bottom-3{bottom:-.75rem}.-spr-right-1{right:-.25rem}.-spr-right-2{right:-.5rem}.-spr-top-0\.5{top:-.125rem}.-spr-top-1{top:-.25rem}.-spr-top-2{top:-.5rem}.-spr-top-3{top:-.75rem}.spr-bottom-0{bottom:0}.spr-bottom-\[-2px\]{bottom:-2px}.spr-bottom-\[-3px\]{bottom:-3px}.spr-bottom-\[-4px\]{bottom:-4px}.spr-bottom-\[1px\]{bottom:1px}.spr-left-0{left:0}.spr-left-1{left:.25rem}.spr-left-1\/2{left:50%}.spr-left-3{left:.75rem}.spr-left-\[1\.7rem\]{left:1.7rem}.spr-left-\[12\%\]{left:12%}.spr-left-\[52\%\]{left:52%}.spr-left-\[55\%\]{left:55%}.spr-left-\[7\%\]{left:7%}.spr-right-0{right:0}.spr-right-1{right:.25rem}.spr-right-2\.5{right:.625rem}.spr-right-3{right:.75rem}.spr-right-4{right:1rem}.spr-right-\[-3px\]{right:-3px}.spr-right-\[-4px\]{right:-4px}.spr-right-\[-5px\]{right:-5px}.spr-right-\[-7px\]{right:-7px}.spr-right-\[1px\]{right:1px}.spr-top-0{top:0}.spr-top-1{top:.25rem}.spr-top-1\/2{top:50%}.spr-top-\[-4px\]{top:-4px}.spr-top-\[-6\.3px\]{top:-6.3px}.spr-top-\[-6px\]{top:-6px}.spr-top-\[-7px\]{top:-7px}.spr-top-\[-8px\]{top:-8px}.spr-z-10{z-index:10}.spr-z-50{z-index:50}.spr-z-\[10\]{z-index:10}.spr-z-\[1\]{z-index:1}.spr-z-\[4000\]{z-index:4000}.spr-z-\[5\]{z-index:5}.\!spr-m-0{margin:0!important}.spr-m-0{margin:0}.spr-m-auto{margin:auto}.spr-m-size-spacing-xs{margin:var(--size-300)}.\!spr-mb-0{margin-bottom:0!important}.\!spr-mt-\[12px\]{margin-top:12px!important}.\!spr-mt-\[6px\]{margin-top:6px!important}.\!spr-mt-\[8px\]{margin-top:8px!important}.spr-mb-10{margin-bottom:2.5rem}.spr-mb-2{margin-bottom:.5rem}.spr-mb-4{margin-bottom:1rem}.spr-mb-6{margin-bottom:1.5rem}.spr-mb-\[52px\]{margin-bottom:52px}.spr-mb-size-spacing-3xs{margin-bottom:var(--size-200)}.spr-mb-size-spacing-4xs{margin-bottom:var(--size-150)}.spr-mb-size-spacing-md{margin-bottom:var(--size-500)}.spr-me-size-spacing-3xs{margin-inline-end:var(--size-200)}.spr-ml-\[60px\]{margin-left:60px}.spr-ml-size-spacing-3xs{margin-left:var(--size-200)}.spr-mr-2{margin-right:.5rem}.spr-mr-size-spacing-3xs{margin-right:var(--size-200)}.spr-ms-auto{margin-inline-start:auto}.spr-mt-1{margin-top:.25rem}.spr-mt-10{margin-top:2.5rem}.spr-mt-2{margin-top:.5rem}.spr-mt-3{margin-top:.75rem}.spr-mt-size-spacing-4xs{margin-top:var(--size-150)}.spr-box-border{box-sizing:border-box}.spr-block{display:block}.spr-inline-block{display:inline-block}.spr-flex{display:flex}.spr-inline-flex{display:inline-flex}.spr-table{display:table}.spr-grid{display:grid}.spr-aspect-square{aspect-ratio:1 / 1}.spr-h-0\.5{height:.125rem}.spr-h-10{height:2.5rem}.spr-h-14{height:3.5rem}.spr-h-20{height:5rem}.spr-h-3{height:.75rem}.spr-h-4{height:1rem}.spr-h-5{height:1.25rem}.spr-h-6{height:1.5rem}.spr-h-9{height:2.25rem}.spr-h-\[1\.25em\]{height:1.25em}.spr-h-\[100vh\]{height:100vh}.spr-h-\[10px\]{height:10px}.spr-h-\[120px\]{height:120px}.spr-h-\[16px\]{height:16px}.spr-h-\[18px\]{height:18px}.spr-h-\[1em\]{height:1em}.spr-h-\[200px\]{height:200px}.spr-h-\[20px\]{height:20px}.spr-h-\[2px\]{height:2px}.spr-h-\[36px\]{height:36px}.spr-h-\[400px\]{height:400px}.spr-h-\[52px\]{height:52px}.spr-h-\[calc\(100vh-32px\)\]{height:calc(100vh - 32px)}.spr-h-fit{height:-moz-fit-content;height:fit-content}.spr-h-full{height:100%}.spr-h-screen{height:100vh}.spr-max-h-9{max-height:2.25rem}.spr-max-h-\[268px\]{max-height:268px}.spr-max-h-\[300px\]{max-height:300px}.spr-max-h-\[calc\(100vh-150px\)\]{max-height:calc(100vh - 150px)}.spr-max-h-\[calc\(100vh-194px\)\]{max-height:calc(100vh - 194px)}.spr-max-h-\[calc\(100vh-60px\)\]{max-height:calc(100vh - 60px)}.spr-min-h-12{min-height:3rem}.spr-min-h-\[18px\]{min-height:18px}.spr-min-h-\[200px\]{min-height:200px}.spr-min-h-\[240px\]{min-height:240px}.spr-min-h-\[360px\]{min-height:360px}.spr-min-h-\[60px\]{min-height:60px}.\!spr-w-full{width:100%!important}.spr-w-10{width:2.5rem}.spr-w-12{width:3rem}.spr-w-3{width:.75rem}.spr-w-4{width:1rem}.spr-w-5{width:1.25rem}.spr-w-6{width:1.5rem}.spr-w-\[1\.25em\]{width:1.25em}.spr-w-\[1\.39em\]{width:1.39em}.spr-w-\[110px\]{width:110px}.spr-w-\[120px\]{width:120px}.spr-w-\[1280px\]{width:1280px}.spr-w-\[16px\]{width:16px}.spr-w-\[1em\]{width:1em}.spr-w-\[200px\]{width:200px}.spr-w-\[20px\]{width:20px}.spr-w-\[240px\]{width:240px}.spr-w-\[2px\]{width:2px}.spr-w-\[360px\]{width:360px}.spr-w-\[36px\]{width:36px}.spr-w-\[420px\]{width:420px}.spr-w-\[480px\]{width:480px}.spr-w-\[50vw\]{width:50vw}.spr-w-\[720px\]{width:720px}.spr-w-\[80px\]{width:80px}.spr-w-auto{width:auto}.spr-w-fit{width:-moz-fit-content;width:fit-content}.spr-w-full{width:100%}.spr-w-screen{width:100vw}.\!spr-min-w-9{min-width:2.25rem!important}.spr-min-w-10{min-width:2.5rem}.spr-min-w-14{min-width:3.5rem}.spr-min-w-20{min-width:5rem}.spr-min-w-4{min-width:1rem}.spr-min-w-5{min-width:1.25rem}.spr-min-w-6{min-width:1.5rem}.spr-min-w-7{min-width:1.75rem}.spr-min-w-9{min-width:2.25rem}.spr-min-w-\[10px\]{min-width:10px}.spr-min-w-\[110px\]{min-width:110px}.spr-min-w-\[16px\]{min-width:16px}.spr-min-w-\[180px\]{min-width:180px}.spr-min-w-\[18em\]{min-width:18em}.spr-min-w-\[20px\]{min-width:20px}.spr-min-w-\[24px\]{min-width:24px}.spr-min-w-\[360px\]{min-width:360px}.spr-min-w-\[480px\]{min-width:480px}.spr-max-w-9{max-width:2.25rem}.spr-max-w-\[800px\]{max-width:800px}.spr-max-w-\[calc\(100\%-60px\)\]{max-width:calc(100% - 60px)}.spr-max-w-lg{max-width:1320px}.spr-max-w-md{max-width:1000px}.spr-max-w-sm{max-width:640px}.spr-flex-1{flex:1 1 0%}.spr-shrink-0{flex-shrink:0}.spr-grow{flex-grow:1}.spr-table-fixed{table-layout:fixed}.-spr-translate-x-1\/2{--tw-translate-x: -50%;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.-spr-translate-y-1\/2,.-spr-translate-y-2\/4{--tw-translate-y: -50%;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.spr-translate-x-0{--tw-translate-x: 0px;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.spr-translate-x-full{--tw-translate-x: 100%;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.spr-translate-y-\[-50\%\]{--tw-translate-y: -50%;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.spr-rotate-180{--tw-rotate: 180deg;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.spr-scale-90{--tw-scale-x: .9;--tw-scale-y: .9;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.spr-transform{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.\!spr-cursor-not-allowed{cursor:not-allowed!important}.spr-cursor-not-allowed{cursor:not-allowed}.spr-cursor-pointer{cursor:pointer}.spr-select-none{-webkit-user-select:none;-moz-user-select:none;user-select:none}.spr-resize-none{resize:none}.spr-appearance-none{-webkit-appearance:none;-moz-appearance:none;appearance:none}.spr-flex-row{flex-direction:row}.spr-flex-col{flex-direction:column}.spr-flex-wrap{flex-wrap:wrap}.spr-items-start{align-items:flex-start}.spr-items-center{align-items:center}.spr-justify-end{justify-content:flex-end}.spr-justify-center{justify-content:center}.spr-justify-between{justify-content:space-between}.spr-gap-0\.5{gap:.125rem}.spr-gap-1{gap:.25rem}.spr-gap-1\.5{gap:.375rem}.spr-gap-2{gap:.5rem}.spr-gap-20{gap:5rem}.spr-gap-3{gap:.75rem}.spr-gap-4{gap:1rem}.spr-gap-6{gap:1.5rem}.spr-gap-size-spacing-2xs{gap:var(--size-250)}.spr-gap-size-spacing-3xs{gap:var(--size-200)}.spr-gap-size-spacing-4xs{gap:var(--size-150)}.spr-gap-size-spacing-5xs{gap:var(--size-100)}.spr-gap-size-spacing-6xs{gap:var(--size-50)}.spr-gap-size-spacing-md{gap:var(--size-500)}.spr-space-x-2>:not([hidden])~:not([hidden]){--tw-space-x-reverse: 0;margin-right:calc(.5rem * var(--tw-space-x-reverse));margin-left:calc(.5rem * calc(1 - var(--tw-space-x-reverse)))}.spr-space-x-3>:not([hidden])~:not([hidden]){--tw-space-x-reverse: 0;margin-right:calc(.75rem * var(--tw-space-x-reverse));margin-left:calc(.75rem * calc(1 - var(--tw-space-x-reverse)))}.spr-space-x-4>:not([hidden])~:not([hidden]){--tw-space-x-reverse: 0;margin-right:calc(1rem * var(--tw-space-x-reverse));margin-left:calc(1rem * calc(1 - var(--tw-space-x-reverse)))}.spr-space-y-4>:not([hidden])~:not([hidden]){--tw-space-y-reverse: 0;margin-top:calc(1rem * calc(1 - var(--tw-space-y-reverse)));margin-bottom:calc(1rem * var(--tw-space-y-reverse))}.spr-overflow-auto{overflow:auto}.spr-overflow-hidden{overflow:hidden}.spr-overflow-y-auto{overflow-y:auto}.spr-overflow-x-hidden{overflow-x:hidden}.spr-truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.spr-rounded-\[2\.5px\]{border-radius:2.5px}.spr-rounded-\[32px\]{border-radius:32px}.spr-rounded-\[40px\]{border-radius:40px}.spr-rounded-\[50\%\]{border-radius:50%}.spr-rounded-border-radius-2xs{border-radius:var(--size-50)}.spr-rounded-border-radius-full{border-radius:999px}.spr-rounded-border-radius-lg{border-radius:var(--size-250)}.spr-rounded-border-radius-md{border-radius:var(--size-200)}.spr-rounded-border-radius-sm{border-radius:var(--size-150)}.spr-rounded-border-radius-xl{border-radius:var(--size-300)}.spr-rounded-border-radius-xs{border-radius:var(--size-100)}.spr-rounded-full{border-radius:9999px}.spr-rounded-lg{border-radius:.5rem}.spr-rounded-md{border-radius:.375rem}.spr-rounded-b-border-radius-2xs{border-bottom-right-radius:var(--size-50);border-bottom-left-radius:var(--size-50)}.spr-rounded-b-border-radius-lg{border-bottom-right-radius:var(--size-250);border-bottom-left-radius:var(--size-250)}.spr-rounded-b-border-radius-md{border-bottom-right-radius:var(--size-200);border-bottom-left-radius:var(--size-200)}.spr-rounded-b-border-radius-sm{border-bottom-right-radius:var(--size-150);border-bottom-left-radius:var(--size-150)}.spr-rounded-b-border-radius-xl{border-bottom-right-radius:var(--size-300);border-bottom-left-radius:var(--size-300)}.spr-rounded-b-border-radius-xs{border-bottom-right-radius:var(--size-100);border-bottom-left-radius:var(--size-100)}.spr-rounded-l-md{border-top-left-radius:.375rem;border-bottom-left-radius:.375rem}.spr-rounded-r-md{border-top-right-radius:.375rem;border-bottom-right-radius:.375rem}.spr-rounded-t-border-radius-2xs{border-top-left-radius:var(--size-50);border-top-right-radius:var(--size-50)}.spr-rounded-t-border-radius-lg{border-top-left-radius:var(--size-250);border-top-right-radius:var(--size-250)}.spr-rounded-t-border-radius-md{border-top-left-radius:var(--size-200);border-top-right-radius:var(--size-200)}.spr-rounded-t-border-radius-sm{border-top-left-radius:var(--size-150);border-top-right-radius:var(--size-150)}.spr-rounded-t-border-radius-xl{border-top-left-radius:var(--size-300);border-top-right-radius:var(--size-300)}.spr-rounded-t-border-radius-xs{border-top-left-radius:var(--size-100);border-top-right-radius:var(--size-100)}.\!spr-border{border-width:1px!important}.\!spr-border-0{border-width:0px!important}.\!spr-border-\[1\.5px\]{border-width:1.5px!important}.spr-border{border-width:1px}.spr-border-0{border-width:0px}.spr-border-2{border-width:2px}.spr-border-\[1\.25px\]{border-width:1.25px}.spr-border-\[1\.5px\]{border-width:1.5px}.spr-border-\[1px\]{border-width:1px}.\!spr-border-x-\[0\.5px\]{border-left-width:.5px!important;border-right-width:.5px!important}.\!spr-border-y{border-top-width:1px!important;border-bottom-width:1px!important}.spr-border-x-0{border-left-width:0px;border-right-width:0px}.spr-border-y{border-top-width:1px;border-bottom-width:1px}.\!spr-border-b{border-bottom-width:1px!important}.spr-border-b{border-bottom-width:1px}.spr-border-b-0{border-bottom-width:0px}.spr-border-l-0{border-left-width:0px}.spr-border-r{border-right-width:1px}.spr-border-r-0{border-right-width:0px}.spr-border-t{border-top-width:1px}.spr-border-t-0{border-top-width:0px}.\!spr-border-solid{border-style:solid!important}.spr-border-solid{border-style:solid}.\!spr-border-tomato-600{--tw-border-opacity: 1 !important;border-color:rgb(218 47 56 / var(--tw-border-opacity, 1))!important}.\!spr-border-transparent{border-color:transparent!important}.\!spr-border-white-100{--tw-border-opacity: 1 !important;border-color:rgb(241 242 243 / var(--tw-border-opacity, 1))!important}.\!spr-border-white-50{--tw-border-opacity: 1 !important;border-color:rgb(255 255 255 / var(--tw-border-opacity, 1))!important}.spr-border-kangkong-400{--tw-border-opacity: 1;border-color:rgb(74 222 123 / var(--tw-border-opacity, 1))}.spr-border-kangkong-700{--tw-border-opacity: 1;border-color:rgb(21 128 57 / var(--tw-border-opacity, 1))}.spr-border-mushroom-200{--tw-border-opacity: 1;border-color:rgb(217 222 222 / var(--tw-border-opacity, 1))}.spr-border-tomato-600{--tw-border-opacity: 1;border-color:rgb(218 47 56 / var(--tw-border-opacity, 1))}.spr-border-ubas-400{--tw-border-opacity: 1;border-color:rgb(170 139 250 / var(--tw-border-opacity, 1))}.spr-border-white-100{--tw-border-opacity: 1;border-color:rgb(241 242 243 / var(--tw-border-opacity, 1))}.spr-bg-kangkong-50{--tw-bg-opacity: 1;background-color:rgb(240 253 244 / var(--tw-bg-opacity, 1))}.spr-bg-mushroom-100{--tw-bg-opacity: 1;background-color:rgb(230 234 234 / var(--tw-bg-opacity, 1))}.spr-bg-mushroom-700\/60{background-color:#4c585799}.spr-bg-ubas-50{--tw-bg-opacity: 1;background-color:rgb(245 243 255 / var(--tw-bg-opacity, 1))}.spr-bg-white-50{--tw-bg-opacity: 1;background-color:rgb(255 255 255 / var(--tw-bg-opacity, 1))}.spr-bg-white-500{--tw-bg-opacity: 1;background-color:rgb(124 124 124 / var(--tw-bg-opacity, 1))}.spr-object-cover{-o-object-fit:cover;object-fit:cover}.spr-p-0{padding:0}.spr-p-1{padding:.25rem}.spr-p-2{padding:.5rem}.spr-p-3{padding:.75rem}.spr-p-3\.5{padding:.875rem}.spr-p-4{padding:1rem}.spr-p-8{padding:2rem}.spr-p-size-spacing-3xs{padding:var(--size-200)}.spr-p-size-spacing-4xs{padding:var(--size-150)}.spr-p-size-spacing-5xs{padding:var(--size-100)}.spr-p-size-spacing-sm{padding:var(--size-400)}.spr-px-2{padding-left:.5rem;padding-right:.5rem}.spr-px-3{padding-left:.75rem;padding-right:.75rem}.spr-px-4{padding-left:1rem;padding-right:1rem}.spr-px-size-spacing-2xl{padding-left:var(--size-800);padding-right:var(--size-800)}.spr-px-size-spacing-2xs{padding-left:var(--size-250);padding-right:var(--size-250)}.spr-px-size-spacing-4xs{padding-left:var(--size-150);padding-right:var(--size-150)}.spr-px-size-spacing-5xs{padding-left:var(--size-100);padding-right:var(--size-100)}.spr-px-size-spacing-sm{padding-left:var(--size-400);padding-right:var(--size-400)}.spr-px-size-spacing-xs{padding-left:var(--size-300);padding-right:var(--size-300)}.spr-py-1\.5{padding-top:.375rem;padding-bottom:.375rem}.spr-py-2{padding-top:.5rem;padding-bottom:.5rem}.spr-py-3{padding-top:.75rem;padding-bottom:.75rem}.spr-py-4{padding-top:1rem;padding-bottom:1rem}.spr-py-6{padding-top:1.5rem;padding-bottom:1.5rem}.spr-py-size-spacing-2xl{padding-top:var(--size-800);padding-bottom:var(--size-800)}.spr-py-size-spacing-2xs{padding-top:var(--size-250);padding-bottom:var(--size-250)}.spr-py-size-spacing-3xl{padding-top:var(--size-900);padding-bottom:var(--size-900)}.spr-py-size-spacing-3xs{padding-top:var(--size-200);padding-bottom:var(--size-200)}.spr-py-size-spacing-4xs{padding-top:var(--size-150);padding-bottom:var(--size-150)}.spr-py-size-spacing-6xs{padding-top:var(--size-50);padding-bottom:var(--size-50)}.spr-py-size-spacing-md{padding-top:var(--size-500);padding-bottom:var(--size-500)}.spr-py-size-spacing-xs{padding-top:var(--size-300);padding-bottom:var(--size-300)}.\!spr-pl-size-spacing-3xl{padding-left:var(--size-900)!important}.spr-pb-4{padding-bottom:1rem}.spr-pl-size-spacing-lg{padding-left:var(--size-600)}.spr-pr-\[5\%\]{padding-right:5%}.spr-pr-\[50\%\]{padding-right:50%}.spr-pr-\[90\%\]{padding-right:90%}.spr-pr-\[93\%\]{padding-right:93%}.spr-pt-0{padding-top:0}.spr-pt-4{padding-top:1rem}.spr-text-center{text-align:center}.spr-text-start{text-align:start}.spr-align-middle{vertical-align:middle}.spr-font-code{font-family:Roboto Mono,sans-serif}.spr-font-inbound{font-family:Roboto,sans-serif}.spr-font-main{font-family:Rubik,sans-serif}.\!spr-text-\[10px\]{font-size:10px!important}.spr-text-\[10px\]{font-size:10px}.spr-text-\[20px\]{font-size:20px}.spr-text-\[28px\]{font-size:28px}.spr-text-\[36px\]{font-size:36px}.spr-text-xs{font-size:.75rem;line-height:1rem}.spr-font-black{font-weight:900}.spr-font-bold{font-weight:700}.spr-font-extrabold{font-weight:800}.spr-font-extralight{font-weight:200}.spr-font-light{font-weight:300}.spr-font-medium{font-weight:500}.spr-font-normal{font-weight:400}.spr-font-semibold{font-weight:600}.spr-font-thin{font-weight:100}.spr-uppercase{text-transform:uppercase}.\!spr-leading-\[0\]{line-height:0!important}.spr-leading-100{line-height:12px}.spr-leading-300{line-height:16px}.spr-leading-4{line-height:1rem}.spr-leading-5{line-height:1.25rem}.spr-leading-\[0\]{line-height:0}.spr-leading-none{line-height:1}.\!spr-tracking-normal{letter-spacing:0em!important}.\!spr-text-tomato-600{--tw-text-opacity: 1 !important;color:rgb(218 47 56 / var(--tw-text-opacity, 1))!important}.spr-text-blueberry-500{--tw-text-opacity: 1;color:rgb(45 136 255 / var(--tw-text-opacity, 1))}.spr-text-blueberry-700{--tw-text-opacity: 1;color:rgb(15 110 235 / var(--tw-text-opacity, 1))}.spr-text-carrot-500{--tw-text-opacity: 1;color:rgb(255 151 10 / var(--tw-text-opacity, 1))}.spr-text-gray-500{--tw-text-opacity: 1;color:rgb(107 114 128 / var(--tw-text-opacity, 1))}.spr-text-kangkong-500{--tw-text-opacity: 1;color:rgb(34 197 88 / var(--tw-text-opacity, 1))}.spr-text-kangkong-600{--tw-text-opacity: 1;color:rgb(23 173 73 / var(--tw-text-opacity, 1))}.spr-text-kangkong-700{--tw-text-opacity: 1;color:rgb(21 128 57 / var(--tw-text-opacity, 1))}.spr-text-kangkong-800{--tw-text-opacity: 1;color:rgb(22 101 49 / var(--tw-text-opacity, 1))}.spr-text-mango-500{--tw-text-opacity: 1;color:rgb(255 191 0 / var(--tw-text-opacity, 1))}.spr-text-mushroom-300{--tw-text-opacity: 1;color:rgb(184 193 192 / var(--tw-text-opacity, 1))}.spr-text-mushroom-600{--tw-text-opacity: 1;color:rgb(93 108 107 / var(--tw-text-opacity, 1))}.spr-text-mushroom-950{--tw-text-opacity: 1;color:rgb(38 43 43 / var(--tw-text-opacity, 1))}.spr-text-tomato-500{--tw-text-opacity: 1;color:rgb(236 71 80 / var(--tw-text-opacity, 1))}.spr-text-tomato-600{--tw-text-opacity: 1;color:rgb(218 47 56 / var(--tw-text-opacity, 1))}.spr-text-ubas-800{--tw-text-opacity: 1;color:rgb(95 33 182 / var(--tw-text-opacity, 1))}.spr-decoration-solid{text-decoration-style:solid}.spr-opacity-0{opacity:0}.spr-opacity-100{opacity:1}.spr-opacity-60{opacity:.6}.\!spr-shadow-button{--tw-shadow: 0px 2px 1px 0px rgba(0, 0, 0, .15) inset !important;--tw-shadow-colored: inset 0px 2px 1px 0px var(--tw-shadow-color) !important;box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow)!important}.\!spr-shadow-none{--tw-shadow: 0 0 #0000 !important;--tw-shadow-colored: 0 0 #0000 !important;box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow)!important}.spr-shadow-\[inset_0px_0px_0px_2\.5px_\#fff\]{--tw-shadow: inset 0px 0px 0px 2.5px #fff;--tw-shadow-colored: inset 0px 0px 0px 2.5px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow)}.spr-outline-none{outline:2px solid transparent;outline-offset:2px}.spr-outline-2{outline-width:2px}.spr-outline-offset-4{outline-offset:4px}.spr-ring-0{--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow, 0 0 #0000)}.spr-brightness-75{--tw-brightness: brightness(.75);filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.spr-drop-shadow{--tw-drop-shadow: drop-shadow(0 1px 2px rgb(0 0 0 / .1)) drop-shadow(0 1px 1px rgb(0 0 0 / .06));filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.spr-drop-shadow-\[0_2px_8px_-2px_rgba\(38\,43\,43\,0\.20\)\]{--tw-drop-shadow: drop-shadow(0 2px 8px -2px rgba(38,43,43,.2));filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.spr-transition{transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,-webkit-backdrop-filter;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter,-webkit-backdrop-filter;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.spr-transition-all{transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.spr-transition-colors{transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.spr-transition-transform{transition-property:transform;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.spr-duration-150{transition-duration:.15s}.spr-duration-300{transition-duration:.3s}.spr-duration-\[150ms\]{transition-duration:.15s}.spr-ease-\[ease-in-out\]{transition-timing-function:ease-in-out}.spr-ease-in-out{transition-timing-function:cubic-bezier(.4,0,.2,1)}.spr-hidden-scrolls::-webkit-scrollbar{display:none}.spr-heading-xl{font-family:Rubik,sans-serif;font-weight:500;font-size:48px;line-height:60px;letter-spacing:-1.3px}.spr-heading-lg{font-family:Rubik,sans-serif;font-weight:500;font-size:40px;line-height:48px;letter-spacing:-1px}.spr-heading-md{font-family:Rubik,sans-serif;font-weight:500;font-size:32px;line-height:40px;letter-spacing:-1px}.spr-heading-sm{font-family:Rubik,sans-serif;font-weight:500;font-size:28px;line-height:36px;letter-spacing:-.7px}.spr-heading-xs{font-family:Rubik,sans-serif;font-weight:500;font-size:24px;line-height:32px;letter-spacing:-.7px}.spr-subheading-sm{font-family:Rubik,sans-serif;font-weight:500;font-size:20px;line-height:24px;letter-spacing:-.7px}.spr-subheading-xs{font-family:Rubik,sans-serif;font-weight:500;font-size:16px;line-height:20px;letter-spacing:0px}.spr-body-lg{font-family:Rubik,sans-serif;font-size:20px;line-height:32px;letter-spacing:0px}.spr-body-lg-regular{font-weight:400;font-family:Rubik,sans-serif;font-size:20px;line-height:32px;letter-spacing:0px}.spr-body-lg-regular-underline{font-weight:400;text-decoration-style:solid;font-family:Rubik,sans-serif;font-size:20px;line-height:32px;letter-spacing:0px}.spr-body-lg-regular-medium{font-weight:500;font-family:Rubik,sans-serif;font-size:20px;line-height:32px;letter-spacing:0px}.spr-body-lg-medium-underline{font-weight:500;text-decoration-style:solid;font-family:Rubik,sans-serif;font-size:20px;line-height:32px;letter-spacing:0px}.spr-body-md{font-family:Rubik,sans-serif;font-size:16px;line-height:24px;letter-spacing:0px}.spr-body-md-regular{font-weight:400;font-family:Rubik,sans-serif;font-size:16px;line-height:24px;letter-spacing:0px}.spr-body-md-regular-underline{font-weight:400;text-decoration-style:solid;font-family:Rubik,sans-serif;font-size:16px;line-height:24px;letter-spacing:0px}.spr-body-md-regular-medium{font-weight:500;font-family:Rubik,sans-serif;font-size:16px;line-height:24px;letter-spacing:0px}.spr-body-md-medium-underline{font-weight:500;text-decoration-style:solid;font-family:Rubik,sans-serif;font-size:16px;line-height:24px;letter-spacing:0px}.spr-body-sm{font-family:Rubik,sans-serif;font-size:14px;line-height:20px;letter-spacing:0px}.spr-body-sm-regular{font-weight:400;font-family:Rubik,sans-serif;font-size:14px;line-height:20px;letter-spacing:0px}.spr-body-sm-regular-underline{font-weight:400;text-decoration-style:solid;font-family:Rubik,sans-serif;font-size:14px;line-height:20px;letter-spacing:0px}.spr-body-sm-regular-medium{font-weight:500;font-family:Rubik,sans-serif;font-size:14px;line-height:20px;letter-spacing:0px}.spr-body-sm-medium-underline{font-weight:500;text-decoration-style:solid;font-family:Rubik,sans-serif;font-size:14px;line-height:20px;letter-spacing:0px}.spr-body-xs{font-family:Rubik,sans-serif;font-size:12px;line-height:16px;letter-spacing:0px}.spr-body-xs-regular{font-weight:400;font-family:Rubik,sans-serif;font-size:12px;line-height:16px;letter-spacing:0px}.spr-body-xs-regular-underline{font-weight:400;text-decoration-style:solid;font-family:Rubik,sans-serif;font-size:12px;line-height:16px;letter-spacing:0px}.spr-body-xs-regular-medium{font-weight:500;font-family:Rubik,sans-serif;font-size:12px;line-height:16px;letter-spacing:0px}.spr-body-xs-medium-underline{font-weight:500;text-decoration-style:solid;font-family:Rubik,sans-serif;font-size:12px;line-height:16px;letter-spacing:0px}.spr-label-xs{font-family:Rubik,sans-serif;text-transform:uppercase;font-size:12px;line-height:12px;letter-spacing:.7px}.spr-label-xs-regular{font-weight:400;font-family:Rubik,sans-serif;text-transform:uppercase;font-size:12px;line-height:12px;letter-spacing:.7px}.spr-label-xs-medium{font-weight:500;font-family:Rubik,sans-serif;text-transform:uppercase;font-size:12px;line-height:12px;letter-spacing:.7px}.spr-label-sm{font-family:Rubik,sans-serif;text-transform:uppercase;font-size:14px;line-height:14px;letter-spacing:.7px}.spr-label-sm-regular{font-weight:400;font-family:Rubik,sans-serif;text-transform:uppercase;font-size:14px;line-height:14px;letter-spacing:.7px}.spr-label-sm-medium{font-weight:500;font-family:Rubik,sans-serif;text-transform:uppercase;font-size:14px;line-height:14px;letter-spacing:.7px}.spr-font-size-100{font-size:12px}.spr-font-size-200{font-size:14px}.spr-font-size-300{font-size:16px}.spr-font-size-400{font-size:20px}.spr-font-size-500{font-size:24px}.spr-font-size-600{font-size:28px}.spr-font-size-700{font-size:32px}.spr-font-size-800{font-size:40px}.spr-font-size-900{font-size:48px}.spr-font-size-1000{font-size:56px}.spr-line-height-100{line-height:12px}.spr-line-height-200{line-height:14px}.spr-line-height-300{line-height:16px}.spr-line-height-400{line-height:20px}.spr-line-height-500{line-height:24px}.spr-line-height-600{line-height:32px}.spr-line-height-700{line-height:36px}.spr-line-height-800{line-height:40px}.spr-line-height-900{line-height:48px}.spr-line-height-1000{line-height:60px}.spr-letter-spacing-densest{letter-spacing:-1.3px}.spr-letter-spacing-denser{letter-spacing:-1px}.spr-letter-spacing-dense{letter-spacing:-.7px}.spr-letter-spacing-normal{letter-spacing:0px}.spr-letter-spacing-wide{letter-spacing:.7px}.spr-letter-spacing-wider{letter-spacing:1px}.spr-letter-spacing-widest{letter-spacing:1.3px}.spr-text-color-strong{--tw-text-opacity: 1;color:rgb(38 43 43 / var(--tw-text-opacity, 1))}.spr-text-color-supporting{--tw-text-opacity: 1;color:rgb(145 159 157 / var(--tw-text-opacity, 1))}.spr-text-color-base{--tw-text-opacity: 1;color:rgb(93 108 107 / var(--tw-text-opacity, 1))}.spr-text-color-weak{--tw-text-opacity: 1;color:rgb(184 193 192 / var(--tw-text-opacity, 1))}.spr-text-color-disabled{--tw-text-opacity: 1;color:rgb(186 188 192 / var(--tw-text-opacity, 1))}.\!spr-text-color-on-fill-disabled,.spr-text-color-on-fill-disabled{--tw-text-opacity: 1;color:rgb(152 152 152 / var(--tw-text-opacity, 1))}.spr-text-color-inverted-strong{--tw-text-opacity: 1;color:rgb(255 255 255 / var(--tw-text-opacity, 1))}.spr-text-color-inverted-disabled{--tw-text-opacity: 1;color:rgb(101 101 101 / var(--tw-text-opacity, 1))}.spr-text-color-brand-base,.spr-text-color-success-base{--tw-text-opacity: 1;color:rgb(21 128 57 / var(--tw-text-opacity, 1))}.spr-text-color-information-base{--tw-text-opacity: 1;color:rgb(15 110 235 / var(--tw-text-opacity, 1))}.spr-text-color-danger-base{--tw-text-opacity: 1;color:rgb(218 47 56 / var(--tw-text-opacity, 1))}.spr-text-color-pending-base{--tw-text-opacity: 1;color:rgb(187 104 2 / var(--tw-text-opacity, 1))}.spr-text-color-caution-base{--tw-text-opacity: 1;color:rgb(204 92 2 / var(--tw-text-opacity, 1))}.spr-background-color{--tw-bg-opacity: 1;background-color:rgb(255 255 255 / var(--tw-bg-opacity, 1))}.spr-background-color-surface{--tw-bg-opacity: 1;background-color:rgb(241 242 243 / var(--tw-bg-opacity, 1))}.spr-background-color-inverted{--tw-bg-opacity: 1;background-color:rgb(38 43 43 / var(--tw-bg-opacity, 1))}.spr-background-color-base{--tw-bg-opacity: 1;background-color:rgb(239 241 241 / var(--tw-bg-opacity, 1))}.spr-background-color-single-active{--tw-bg-opacity: 1;background-color:rgb(220 252 230 / var(--tw-bg-opacity, 1))}.spr-background-color-hover{--tw-bg-opacity: 1;background-color:rgb(239 241 241 / var(--tw-bg-opacity, 1))}.spr-background-color-pressed{--tw-bg-opacity: 1;background-color:rgb(230 234 234 / var(--tw-bg-opacity, 1))}.spr-background-color-disabled{--tw-bg-opacity: 1;background-color:rgb(241 242 243 / var(--tw-bg-opacity, 1))}.spr-background-color-brand-base{--tw-bg-opacity: 1;background-color:rgb(21 128 57 / var(--tw-bg-opacity, 1))}.spr-background-color-brand-hover{--tw-bg-opacity: 1;background-color:rgb(22 101 49 / var(--tw-bg-opacity, 1))}.spr-background-color-brand-pressed{--tw-bg-opacity: 1;background-color:rgb(20 83 43 / var(--tw-bg-opacity, 1))}.spr-background-color-brand-weak{--tw-bg-opacity: 1;background-color:rgb(220 252 230 / var(--tw-bg-opacity, 1))}.spr-background-color-success-base{--tw-bg-opacity: 1;background-color:rgb(23 173 73 / var(--tw-bg-opacity, 1))}.spr-background-color-success-hover{--tw-bg-opacity: 1;background-color:rgb(21 128 57 / var(--tw-bg-opacity, 1))}.spr-background-color-success-pressed{--tw-bg-opacity: 1;background-color:rgb(22 101 49 / var(--tw-bg-opacity, 1))}.spr-background-color-success-weak{--tw-bg-opacity: 1;background-color:rgb(220 252 230 / var(--tw-bg-opacity, 1))}.spr-background-color-information-base{--tw-bg-opacity: 1;background-color:rgb(22 121 250 / var(--tw-bg-opacity, 1))}.spr-background-color-information-weak{--tw-bg-opacity: 1;background-color:rgb(216 235 255 / var(--tw-bg-opacity, 1))}.spr-background-color-pending-base{--tw-bg-opacity: 1;background-color:rgb(255 191 0 / var(--tw-bg-opacity, 1))}.spr-background-color-pending-weak{--tw-bg-opacity: 1;background-color:rgb(255 251 197 / var(--tw-bg-opacity, 1))}.spr-background-color-caution-base{--tw-bg-opacity: 1;background-color:rgb(255 151 10 / var(--tw-bg-opacity, 1))}.spr-background-color-caution-weak{--tw-bg-opacity: 1;background-color:rgb(255 244 211 / var(--tw-bg-opacity, 1))}.spr-background-color-danger-base{--tw-bg-opacity: 1;background-color:rgb(218 47 56 / var(--tw-bg-opacity, 1))}.spr-background-color-danger-hover{--tw-bg-opacity: 1;background-color:rgb(182 31 39 / var(--tw-bg-opacity, 1))}.spr-background-color-danger-pressed{--tw-bg-opacity: 1;background-color:rgb(151 29 35 / var(--tw-bg-opacity, 1))}.spr-background-color-danger-weak{--tw-bg-opacity: 1;background-color:rgb(254 226 227 / var(--tw-bg-opacity, 1))}.spr-switch-background-default{--tw-bg-opacity: 1;background-color:rgb(217 222 222 / var(--tw-bg-opacity, 1))}.spr-switch-background-hover{--tw-bg-opacity: 1;background-color:rgb(184 193 192 / var(--tw-bg-opacity, 1))}.spr-switch-background-pressed{--tw-bg-opacity: 1;background-color:rgb(145 159 157 / var(--tw-bg-opacity, 1))}.spr-border-color-strong{--tw-border-opacity: 1;border-color:rgb(115 132 130 / var(--tw-border-opacity, 1))}.spr-border-color-supporting{--tw-border-opacity: 1;border-color:rgb(145 159 157 / var(--tw-border-opacity, 1))}.\!spr-border-color-base,.spr-border-color-base{--tw-border-opacity: 1;border-color:rgb(184 193 192 / var(--tw-border-opacity, 1))}.spr-border-color-weak{--tw-border-opacity: 1;border-color:rgb(217 222 222 / var(--tw-border-opacity, 1))}.\!spr-border-color-disabled,.spr-border-color-disabled{--tw-border-opacity: 1;border-color:rgb(241 242 243 / var(--tw-border-opacity, 1))}.\!spr-border-color-brand-base,.spr-border-color-brand-base{--tw-border-opacity: 1;border-color:rgb(21 128 57 / var(--tw-border-opacity, 1))}.spr-border-color-brand-hover{--tw-border-opacity: 1;border-color:rgb(22 101 49 / var(--tw-border-opacity, 1))}.\!spr-border-color-success-base,.spr-border-color-success-base{--tw-border-opacity: 1;border-color:rgb(21 128 57 / var(--tw-border-opacity, 1))}.\!spr-border-color-information-base,.spr-border-color-information-base{--tw-border-opacity: 1;border-color:rgb(15 110 235 / var(--tw-border-opacity, 1))}.\!spr-border-color-danger-base{--tw-border-opacity: 1;border-color:rgb(218 47 56 / var(--tw-border-opacity, 1))}.\!spr-border-color-pending-base{--tw-border-opacity: 1;border-color:rgb(187 104 2 / var(--tw-border-opacity, 1))}.\!spr-border-color-caution-base{--tw-border-opacity: 1;border-color:rgb(204 92 2 / var(--tw-border-opacity, 1))}.spr-drop-shadow{--tw-shadow: 0px 2px 8px -2px #262B2B33;--tw-shadow-colored: 0px 2px 8px -2px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow)}.selection\:spr-cursor-pointer *::-moz-selection{cursor:pointer}.selection\:spr-cursor-pointer *::selection{cursor:pointer}.selection\:spr-cursor-pointer::-moz-selection{cursor:pointer}.selection\:spr-cursor-pointer::selection{cursor:pointer}.placeholder\:spr-text-mushroom-300::-moz-placeholder{--tw-text-opacity: 1;color:rgb(184 193 192 / var(--tw-text-opacity, 1))}.placeholder\:spr-text-mushroom-300::placeholder{--tw-text-opacity: 1;color:rgb(184 193 192 / var(--tw-text-opacity, 1))}.before\:spr-transition-all:before{content:var(--tw-content);transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.before\:spr-duration-150:before{content:var(--tw-content);transition-duration:.15s}.after\:spr-transition-all:after{content:var(--tw-content);transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.after\:spr-duration-150:after{content:var(--tw-content);transition-duration:.15s}.last\:spr-rounded-b-xl:last-child{border-bottom-right-radius:.75rem;border-bottom-left-radius:.75rem}.last-of-type\:spr-border-0:last-of-type{border-width:0px}.last-of-type\:spr-border-t:last-of-type{border-top-width:1px}.last-of-type\:spr-border-solid:last-of-type{border-style:solid}.last-of-type\:spr-border-color-weak:last-of-type{--tw-border-opacity: 1;border-color:rgb(217 222 222 / var(--tw-border-opacity, 1))}.hover\:spr-cursor-pointer:hover{cursor:pointer}.hover\:spr-shadow-button-hover:hover{--tw-shadow: 0px -2px 1px 0px rgba(0, 0, 0, .1) inset;--tw-shadow-colored: inset 0px -2px 1px 0px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow)}.hover\:spr-brightness-75:hover{--tw-brightness: brightness(.75);filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.hover\:spr-background-color-hover:hover{--tw-bg-opacity: 1;background-color:rgb(239 241 241 / var(--tw-bg-opacity, 1))}.focus\:\!spr-border-\[1\.5px\]:focus{border-width:1.5px!important}.focus\:\!spr-border-kangkong-700:focus{--tw-border-opacity: 1 !important;border-color:rgb(21 128 57 / var(--tw-border-opacity, 1))!important}.focus\:\!spr-border-tomato-600:focus{--tw-border-opacity: 1 !important;border-color:rgb(218 47 56 / var(--tw-border-opacity, 1))!important}.focus\:spr-border-kangkong-700:focus{--tw-border-opacity: 1;border-color:rgb(21 128 57 / var(--tw-border-opacity, 1))}.focus\:spr-border-tomato-600:focus{--tw-border-opacity: 1;border-color:rgb(218 47 56 / var(--tw-border-opacity, 1))}.focus\:spr-border-white-100:focus{--tw-border-opacity: 1;border-color:rgb(241 242 243 / var(--tw-border-opacity, 1))}.focus\:spr-text-color-strong:focus{--tw-text-opacity: 1;color:rgb(38 43 43 / var(--tw-text-opacity, 1))}.active\:spr-scale-90:active{--tw-scale-x: .9;--tw-scale-y: .9;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.active\:spr-scale-95:active{--tw-scale-x: .95;--tw-scale-y: .95;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.active\:spr-text-color-success-pressed:active{--tw-text-opacity: 1;color:rgb(20 83 43 / var(--tw-text-opacity, 1))}.active\:spr-background-color-single-active:active{--tw-bg-opacity: 1;background-color:rgb(220 252 230 / var(--tw-bg-opacity, 1))}.active\:spr-background-color-pressed:active{--tw-bg-opacity: 1;background-color:rgb(230 234 234 / var(--tw-bg-opacity, 1))}.spr-group:hover .group-hover\:spr-background-color-hover{--tw-bg-opacity: 1;background-color:rgb(239 241 241 / var(--tw-bg-opacity, 1))}.spr-group:active .group-active\:spr-scale-90{--tw-scale-x: .9;--tw-scale-y: .9;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.spr-group:active .group-active\:spr-background-color-pressed{--tw-bg-opacity: 1;background-color:rgb(230 234 234 / var(--tw-bg-opacity, 1))}@media (max-width: 575.98px){.sm\:spr-left-\[16\%\]{left:16%}.sm\:spr-left-\[24\%\]{left:24%}.sm\:spr-pr-\[80\%\]{padding-right:80%}.sm\:spr-pr-\[85\%\]{padding-right:85%}}.\[\&\>img\]\:spr-mx-auto>img{margin-left:auto;margin-right:auto}.\[\&\>img\]\:spr-h-\[24px\]>img{height:24px}.\[\&\>img\]\:spr-h-\[36px\]>img{height:36px}.\[\&\>img\]\:spr-w-\[24px\]>img{width:24px}.\[\&\>img\]\:spr-w-\[36px\]>img{width:36px}.\[\&\>img\]\:spr-rounded-full>img{border-radius:9999px}.\[\&\>img\]\:spr-object-cover>img{-o-object-fit:cover;object-fit:cover}.\[\&_\.chips-close\]\:spr-m-0 .chips-close{margin:0}.\[\&_\.chips-close\]\:spr-inline-flex .chips-close{display:inline-flex}.\[\&_\.chips-close\]\:spr-items-center .chips-close{align-items:center}.\[\&_\.chips-close\]\:spr-border-0 .chips-close{border-width:0px}.\[\&_\.chips-close\]\:spr-bg-transparent .chips-close{background-color:transparent}.\[\&_\.chips-close\]\:spr-p-0 .chips-close{padding:0}.\[\&_\.chips-close\]\:spr-leading-\[0\] .chips-close{line-height:0}.\[\&_\.chips-close\]\:hover\:spr-cursor-pointer:hover .chips-close{cursor:pointer}
+@import"https://fonts.googleapis.com/css2?family=Rubik:ital,wght@0,300..900;1,300..900&display=swap";@import"https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap";@import"https://fonts.googleapis.com/css2?family=Roboto+Mono:ital,wght@0,100..700;1,100..700&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap";.resize-observer[data-v-b329ee4c]{position:absolute;top:0;left:0;z-index:-1;width:100%;height:100%;border:none;background-color:transparent;pointer-events:none;display:block;overflow:hidden;opacity:0}.resize-observer[data-v-b329ee4c] object{display:block;position:absolute;top:0;left:0;height:100%;width:100%;overflow:hidden;pointer-events:none;z-index:-1}.v-popper__popper{z-index:10000;top:0;left:0;outline:none}.v-popper__popper.v-popper__popper--hidden{visibility:hidden;opacity:0;transition:opacity .15s,visibility .15s;pointer-events:none}.v-popper__popper.v-popper__popper--shown{visibility:visible;opacity:1;transition:opacity .15s}.v-popper__popper.v-popper__popper--skip-transition,.v-popper__popper.v-popper__popper--skip-transition>.v-popper__wrapper{transition:none!important}.v-popper__backdrop{position:absolute;top:0;left:0;width:100%;height:100%;display:none}.v-popper__inner{position:relative;box-sizing:border-box;overflow-y:auto}.v-popper__inner>div{position:relative;z-index:1;max-width:inherit;max-height:inherit}.v-popper__arrow-container{position:absolute;width:10px;height:10px}.v-popper__popper--arrow-overflow .v-popper__arrow-container,.v-popper__popper--no-positioning .v-popper__arrow-container{display:none}.v-popper__arrow-inner,.v-popper__arrow-outer{border-style:solid;position:absolute;top:0;left:0;width:0;height:0}.v-popper__arrow-inner{visibility:hidden;border-width:7px}.v-popper__arrow-outer{border-width:6px}.v-popper__popper[data-popper-placement^=top] .v-popper__arrow-inner,.v-popper__popper[data-popper-placement^=bottom] .v-popper__arrow-inner{left:-2px}.v-popper__popper[data-popper-placement^=top] .v-popper__arrow-outer,.v-popper__popper[data-popper-placement^=bottom] .v-popper__arrow-outer{left:-1px}.v-popper__popper[data-popper-placement^=top] .v-popper__arrow-inner,.v-popper__popper[data-popper-placement^=top] .v-popper__arrow-outer{border-bottom-width:0;border-left-color:transparent!important;border-right-color:transparent!important;border-bottom-color:transparent!important}.v-popper__popper[data-popper-placement^=top] .v-popper__arrow-inner{top:-2px}.v-popper__popper[data-popper-placement^=bottom] .v-popper__arrow-container{top:0}.v-popper__popper[data-popper-placement^=bottom] .v-popper__arrow-inner,.v-popper__popper[data-popper-placement^=bottom] .v-popper__arrow-outer{border-top-width:0;border-left-color:transparent!important;border-right-color:transparent!important;border-top-color:transparent!important}.v-popper__popper[data-popper-placement^=bottom] .v-popper__arrow-inner{top:-4px}.v-popper__popper[data-popper-placement^=bottom] .v-popper__arrow-outer{top:-6px}.v-popper__popper[data-popper-placement^=left] .v-popper__arrow-inner,.v-popper__popper[data-popper-placement^=right] .v-popper__arrow-inner{top:-2px}.v-popper__popper[data-popper-placement^=left] .v-popper__arrow-outer,.v-popper__popper[data-popper-placement^=right] .v-popper__arrow-outer{top:-1px}.v-popper__popper[data-popper-placement^=right] .v-popper__arrow-inner,.v-popper__popper[data-popper-placement^=right] .v-popper__arrow-outer{border-left-width:0;border-left-color:transparent!important;border-top-color:transparent!important;border-bottom-color:transparent!important}.v-popper__popper[data-popper-placement^=right] .v-popper__arrow-inner{left:-4px}.v-popper__popper[data-popper-placement^=right] .v-popper__arrow-outer{left:-6px}.v-popper__popper[data-popper-placement^=left] .v-popper__arrow-container{right:-10px}.v-popper__popper[data-popper-placement^=left] .v-popper__arrow-inner,.v-popper__popper[data-popper-placement^=left] .v-popper__arrow-outer{border-right-width:0;border-top-color:transparent!important;border-right-color:transparent!important;border-bottom-color:transparent!important}.v-popper__popper[data-popper-placement^=left] .v-popper__arrow-inner{left:-2px}.v-popper--theme-tooltip .v-popper__inner{background:#000c;color:#fff;border-radius:6px;padding:7px 12px 6px}.v-popper--theme-tooltip .v-popper__arrow-outer{border-color:#000c}.v-popper--theme-dropdown .v-popper__inner{background:#fff;color:#000;border-radius:6px;border:1px solid #ddd;box-shadow:0 6px 30px #0000001a}.v-popper--theme-dropdown .v-popper__arrow-inner{visibility:visible;border-color:#fff}.v-popper--theme-dropdown .v-popper__arrow-outer{border-color:#ddd}.number-input[data-v-4ecedabc]::-webkit-outer-spin-button,.number-input[data-v-4ecedabc]::-webkit-inner-spin-button{margin:0;-webkit-appearance:none}.number-input[data-v-4ecedabc]{-moz-appearance:textfield}.spr-modal[data-v-498d4cdd]::backdrop{background-color:#4c5857;opacity:.6}@keyframes shadowGrow-804192a8{0%{box-shadow:inset 0 0 0 25px #fff}to{box-shadow:inset 0 0 0 2.5px #fff}}.animate-shadow-grow[data-v-804192a8]{animation:shadowGrow-804192a8 .3s ease-in-out forwards}.snackbar[data-v-dcbdc1be]{width:360px;max-width:360px;min-height:56px;max-height:76px}.snackbar-enter-from[data-v-98d65aa3],.snackbar-leave-to[data-v-98d65aa3]{transform:translateY(100%);opacity:0}.snackbar-enter-active[data-v-98d65aa3],.snackbar-leave-active[data-v-98d65aa3]{transition:.25s ease all}.snackbar-wrapper[data-v-98d65aa3]{position:fixed;bottom:1rem;left:50%;transform:translate(-50%);z-index:100}.snackbar-wrapper>ul[data-v-98d65aa3]{list-style-type:none}.input:checked~.switch-mark[data-v-83ea5712]:before{left:1.7rem}.switch-mark[data-v-83ea5712]:before,.switch-mark[data-v-83ea5712]:after{position:absolute;content:""}.switch-mark[data-v-83ea5712]:before{left:.25rem;top:.25rem;height:1rem;width:1rem;border-radius:50%;--tw-bg-opacity: 1;background-color:rgb(255 255 255 / var(--tw-bg-opacity, 1))}*,:before,:after{--tw-border-spacing-x: 0;--tw-border-spacing-y: 0;--tw-translate-x: 0;--tw-translate-y: 0;--tw-rotate: 0;--tw-skew-x: 0;--tw-skew-y: 0;--tw-scale-x: 1;--tw-scale-y: 1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness: proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-color: rgb(59 130 246 / .5);--tw-ring-offset-shadow: 0 0 #0000;--tw-ring-shadow: 0 0 #0000;--tw-shadow: 0 0 #0000;--tw-shadow-colored: 0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }::backdrop{--tw-border-spacing-x: 0;--tw-border-spacing-y: 0;--tw-translate-x: 0;--tw-translate-y: 0;--tw-rotate: 0;--tw-skew-x: 0;--tw-skew-y: 0;--tw-scale-x: 1;--tw-scale-y: 1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness: proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-color: rgb(59 130 246 / .5);--tw-ring-offset-shadow: 0 0 #0000;--tw-ring-shadow: 0 0 #0000;--tw-shadow: 0 0 #0000;--tw-shadow-colored: 0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }:root{--size-50: 2px;--size-100: 4px;--size-150: 6px;--size-200: 8px;--size-250: 12px;--size-300: 16px;--size-400: 24px;--size-500: 32px;--size-600: 40px;--size-700: 48px;--size-800: 64px;--size-900: 72px;--size-1000: 80px;--size-1100: 96px;--size-1200: 128px}*::-webkit-scrollbar{height:8px;width:8px}*::-webkit-scrollbar-track{--tw-bg-opacity: 1;background-color:rgb(219 219 221 / var(--tw-bg-opacity, 1))}*::-webkit-scrollbar-thumb{border-radius:9999px;--tw-bg-opacity: 1;background-color:rgb(186 188 192 / var(--tw-bg-opacity, 1))}#quick-action-menu-wrapper{max-height:500px;width:400px}#sidenav-menu-wrapper,#sidenav-submenu-wrapper{max-height:500px;width:215px}#user-menu-wrapper{top:-20px!important;max-height:500px;width:300px}#sidenav-sub-submenu-wrapper{display:none}#quick-action-menu-wrapper,#sidenav-menu-wrapper,#sidenav-submenu-wrapper,#user-menu-wrapper{overflow-y:auto;overflow-x:hidden;border-radius:12px;border-width:1px;border-style:solid;--tw-drop-shadow: drop-shadow(0 4px 3px rgb(0 0 0 / .07)) drop-shadow(0 2px 2px rgb(0 0 0 / .06));filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);--tw-bg-opacity: 1;background-color:rgb(255 255 255 / var(--tw-bg-opacity, 1));--tw-border-opacity: 1;border-color:rgb(184 193 192 / var(--tw-border-opacity, 1));--tw-shadow: 0px 4px 12px 0px #262B2B29;--tw-shadow-colored: 0px 4px 12px 0px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow)}#quick-action-menu-wrapper .v-popper__wrapper .v-popper__inner,#sidenav-menu-wrapper .v-popper__wrapper .v-popper__inner,#sidenav-submenu-wrapper .v-popper__wrapper .v-popper__inner,#user-menu-wrapper .v-popper__wrapper .v-popper__inner{overflow:hidden}#quick-action-menu-wrapper .v-popper__wrapper .v-popper__inner,#sidenav-menu-wrapper .v-popper__wrapper .v-popper__inner,#sidenav-submenu-wrapper .v-popper__wrapper .v-popper__inner,#user-menu-wrapper .v-popper__wrapper .v-popper__inner{border-radius:0}#quick-action-menu-wrapper .v-popper__wrapper .v-popper__inner,#sidenav-menu-wrapper .v-popper__wrapper .v-popper__inner,#sidenav-submenu-wrapper .v-popper__wrapper .v-popper__inner,#user-menu-wrapper .v-popper__wrapper .v-popper__inner{border-style:none}#quick-action-menu-wrapper .v-popper__wrapper .v-popper__inner,#sidenav-menu-wrapper .v-popper__wrapper .v-popper__inner,#sidenav-submenu-wrapper .v-popper__wrapper .v-popper__inner,#user-menu-wrapper .v-popper__wrapper .v-popper__inner{background-color:transparent}#quick-action-menu-wrapper .v-popper__wrapper .v-popper__inner,#sidenav-menu-wrapper .v-popper__wrapper .v-popper__inner,#sidenav-submenu-wrapper .v-popper__wrapper .v-popper__inner,#user-menu-wrapper .v-popper__wrapper .v-popper__inner{--tw-shadow: 0 0 #0000;--tw-shadow-colored: 0 0 #0000;box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow)}#quick-action-menu-wrapper .v-popper__wrapper .v-popper__inner .slide-fade-enter-active,#sidenav-menu-wrapper .v-popper__wrapper .v-popper__inner .slide-fade-enter-active,#sidenav-submenu-wrapper .v-popper__wrapper .v-popper__inner .slide-fade-enter-active,#user-menu-wrapper .v-popper__wrapper .v-popper__inner .slide-fade-enter-active{transition-duration:.3s}#quick-action-menu-wrapper .v-popper__wrapper .v-popper__inner .slide-fade-enter-active,#sidenav-menu-wrapper .v-popper__wrapper .v-popper__inner .slide-fade-enter-active,#sidenav-submenu-wrapper .v-popper__wrapper .v-popper__inner .slide-fade-enter-active,#user-menu-wrapper .v-popper__wrapper .v-popper__inner .slide-fade-enter-active{transition-timing-function:cubic-bezier(0,0,.2,1)}#quick-action-menu-wrapper .v-popper__wrapper .v-popper__inner .slide-fade-leave-active,#sidenav-menu-wrapper .v-popper__wrapper .v-popper__inner .slide-fade-leave-active,#sidenav-submenu-wrapper .v-popper__wrapper .v-popper__inner .slide-fade-leave-active,#user-menu-wrapper .v-popper__wrapper .v-popper__inner .slide-fade-leave-active{transition:all .8s cubic-bezier(1,.5,.8,1)}#quick-action-menu-wrapper .v-popper__wrapper .v-popper__inner .slide-fade-enter-from,#quick-action-menu-wrapper .v-popper__wrapper .v-popper__inner .slide-fade-leave-to,#sidenav-menu-wrapper .v-popper__wrapper .v-popper__inner .slide-fade-enter-from,#sidenav-menu-wrapper .v-popper__wrapper .v-popper__inner .slide-fade-leave-to,#sidenav-submenu-wrapper .v-popper__wrapper .v-popper__inner .slide-fade-enter-from,#sidenav-submenu-wrapper .v-popper__wrapper .v-popper__inner .slide-fade-leave-to,#user-menu-wrapper .v-popper__wrapper .v-popper__inner .slide-fade-enter-from,#user-menu-wrapper .v-popper__wrapper .v-popper__inner .slide-fade-leave-to{--tw-translate-x: -20px;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}#quick-action-menu-wrapper .v-popper__wrapper .v-popper__inner .slide-fade-enter-from,#quick-action-menu-wrapper .v-popper__wrapper .v-popper__inner .slide-fade-leave-to,#sidenav-menu-wrapper .v-popper__wrapper .v-popper__inner .slide-fade-enter-from,#sidenav-menu-wrapper .v-popper__wrapper .v-popper__inner .slide-fade-leave-to,#sidenav-submenu-wrapper .v-popper__wrapper .v-popper__inner .slide-fade-enter-from,#sidenav-submenu-wrapper .v-popper__wrapper .v-popper__inner .slide-fade-leave-to,#user-menu-wrapper .v-popper__wrapper .v-popper__inner .slide-fade-enter-from,#user-menu-wrapper .v-popper__wrapper .v-popper__inner .slide-fade-leave-to{opacity:0}#quick-action-menu-wrapper .v-popper__wrapper .v-popper__arrow-container,#sidenav-menu-wrapper .v-popper__wrapper .v-popper__arrow-container,#sidenav-submenu-wrapper .v-popper__wrapper .v-popper__arrow-container,#user-menu-wrapper .v-popper__wrapper .v-popper__arrow-container{display:none}#tooltip-wrapper .v-popper__wrapper .v-popper__inner,#tooltip-full-width-wrapper .v-popper__wrapper .v-popper__inner{border-radius:var(--size-200)}#tooltip-wrapper .v-popper__wrapper .v-popper__inner,#tooltip-full-width-wrapper .v-popper__wrapper .v-popper__inner{padding-left:.5rem;padding-right:.5rem}#tooltip-wrapper .v-popper__wrapper .v-popper__inner,#tooltip-full-width-wrapper .v-popper__wrapper .v-popper__inner{padding-top:.375rem;padding-bottom:.375rem}#tooltip-wrapper .v-popper__wrapper .v-popper__inner,#tooltip-full-width-wrapper .v-popper__wrapper .v-popper__inner{opacity:1}#tooltip-wrapper .v-popper__wrapper .v-popper__inner,#tooltip-full-width-wrapper .v-popper__wrapper .v-popper__inner{font-weight:400}#tooltip-wrapper .v-popper__wrapper .v-popper__inner,#tooltip-full-width-wrapper .v-popper__wrapper .v-popper__inner{font-family:Rubik,sans-serif}#tooltip-wrapper .v-popper__wrapper .v-popper__inner,#tooltip-full-width-wrapper .v-popper__wrapper .v-popper__inner{font-size:12px}#tooltip-wrapper .v-popper__wrapper .v-popper__inner,#tooltip-full-width-wrapper .v-popper__wrapper .v-popper__inner{line-height:16px}#tooltip-wrapper .v-popper__wrapper .v-popper__inner,#tooltip-full-width-wrapper .v-popper__wrapper .v-popper__inner{letter-spacing:0px}#tooltip-wrapper .v-popper__wrapper .v-popper__inner,#tooltip-full-width-wrapper .v-popper__wrapper .v-popper__inner{--tw-text-opacity: 1;color:rgb(255 255 255 / var(--tw-text-opacity, 1))}#tooltip-wrapper .v-popper__wrapper .v-popper__inner,#tooltip-full-width-wrapper .v-popper__wrapper .v-popper__inner{--tw-bg-opacity: 1;background-color:rgb(38 43 43 / var(--tw-bg-opacity, 1))}#tooltip-wrapper .v-popper__wrapper .v-popper__arrow-outer,#tooltip-full-width-wrapper .v-popper__wrapper .v-popper__arrow-outer{display:none}#tooltip-wrapper .v-popper__wrapper .v-popper__inner{max-width:100%}#tooltip-full-width-wrapper .v-popper__wrapper .v-popper__inner{max-width:280px}#sidenav-tooltip-wrapper .v-popper__wrapper .v-popper__inner{border-radius:var(--size-200)}#sidenav-tooltip-wrapper .v-popper__wrapper .v-popper__inner{padding-left:.5rem;padding-right:.5rem}#sidenav-tooltip-wrapper .v-popper__wrapper .v-popper__inner{padding-top:.375rem;padding-bottom:.375rem}#sidenav-tooltip-wrapper .v-popper__wrapper .v-popper__inner{opacity:1}#sidenav-tooltip-wrapper .v-popper__wrapper .v-popper__inner{font-family:Rubik,sans-serif}#sidenav-tooltip-wrapper .v-popper__wrapper .v-popper__inner{text-transform:uppercase}#sidenav-tooltip-wrapper .v-popper__wrapper .v-popper__inner{font-size:12px}#sidenav-tooltip-wrapper .v-popper__wrapper .v-popper__inner{line-height:12px}#sidenav-tooltip-wrapper .v-popper__wrapper .v-popper__inner{letter-spacing:.7px}#sidenav-tooltip-wrapper .v-popper__wrapper .v-popper__inner{--tw-bg-opacity: 1;background-color:rgb(38 43 43 / var(--tw-bg-opacity, 1))}#sidenav-tooltip-wrapper .v-popper__wrapper .v-popper__arrow-outer{display:none}#dropdown-wrapper{overflow:hidden}#dropdown-wrapper .v-popper__wrapper .v-popper__inner{max-height:300px}#dropdown-wrapper .v-popper__wrapper .v-popper__inner{width:240px}#dropdown-wrapper .v-popper__wrapper .v-popper__inner{overflow-y:auto}#dropdown-wrapper .v-popper__wrapper .v-popper__inner{border-radius:.75rem}#dropdown-wrapper .v-popper__wrapper .v-popper__inner{border-width:1px}#dropdown-wrapper .v-popper__wrapper .v-popper__inner{border-style:solid}#dropdown-wrapper .v-popper__wrapper .v-popper__inner{padding:.5rem}#dropdown-wrapper .v-popper__wrapper .v-popper__inner{font-family:Rubik,sans-serif}#dropdown-wrapper .v-popper__wrapper .v-popper__inner{--tw-shadow: 0 0 #0000;--tw-shadow-colored: 0 0 #0000;box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow)}#dropdown-wrapper .v-popper__wrapper .v-popper__inner{--tw-border-opacity: 1;border-color:rgb(217 222 222 / var(--tw-border-opacity, 1))}#dropdown-wrapper .v-popper__wrapper .v-popper__inner::-webkit-scrollbar-track{border-bottom-right-radius:.75rem}#dropdown-wrapper .v-popper__wrapper .v-popper__inner::-webkit-scrollbar-track{border-top-right-radius:.75rem}#dropdown-wrapper .v-popper__wrapper .v-popper__arrow-container{display:none}.avatar__slot img{height:100%;width:100%;-o-object-fit:cover;object-fit:cover}.spr-table-wrapper tbody{display:block}.spr-table-wrapper tbody{height:400px}.spr-table-wrapper tbody{width:100%}.spr-table-wrapper tbody{overflow-y:auto}.spr-table-wrapper tr{display:table}.spr-table-wrapper tr{width:100%}.spr-table-wrapper tr{table-layout:fixed}.spr-table-wrapper tbody::-webkit-scrollbar{height:0px}.spr-table-wrapper tbody::-webkit-scrollbar{width:0px}.spr-sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border-width:0}.spr-pointer-events-none{pointer-events:none}.spr-fixed{position:fixed}.spr-absolute{position:absolute}.spr-relative{position:relative}.\!spr-top-4{top:1rem!important}.-spr-bottom-1{bottom:-.25rem}.-spr-bottom-2{bottom:-.5rem}.-spr-bottom-3{bottom:-.75rem}.-spr-right-1{right:-.25rem}.-spr-right-2{right:-.5rem}.-spr-top-0\.5{top:-.125rem}.-spr-top-1{top:-.25rem}.-spr-top-2{top:-.5rem}.-spr-top-3{top:-.75rem}.spr-bottom-0{bottom:0}.spr-bottom-\[-2px\]{bottom:-2px}.spr-bottom-\[-3px\]{bottom:-3px}.spr-bottom-\[-4px\]{bottom:-4px}.spr-bottom-\[1px\]{bottom:1px}.spr-left-0{left:0}.spr-left-1{left:.25rem}.spr-left-1\/2{left:50%}.spr-left-3{left:.75rem}.spr-left-\[1\.7rem\]{left:1.7rem}.spr-left-\[12\%\]{left:12%}.spr-left-\[52\%\]{left:52%}.spr-left-\[55\%\]{left:55%}.spr-left-\[7\%\]{left:7%}.spr-right-0{right:0}.spr-right-1{right:.25rem}.spr-right-2\.5{right:.625rem}.spr-right-3{right:.75rem}.spr-right-4{right:1rem}.spr-right-\[-3px\]{right:-3px}.spr-right-\[-4px\]{right:-4px}.spr-right-\[-5px\]{right:-5px}.spr-right-\[-7px\]{right:-7px}.spr-right-\[1px\]{right:1px}.spr-top-0{top:0}.spr-top-1{top:.25rem}.spr-top-1\/2{top:50%}.spr-top-\[-4px\]{top:-4px}.spr-top-\[-6\.3px\]{top:-6.3px}.spr-top-\[-6px\]{top:-6px}.spr-top-\[-7px\]{top:-7px}.spr-top-\[-8px\]{top:-8px}.spr-z-10{z-index:10}.spr-z-50{z-index:50}.spr-z-\[10\]{z-index:10}.spr-z-\[1\]{z-index:1}.spr-z-\[4000\]{z-index:4000}.spr-z-\[5\]{z-index:5}.\!spr-m-0{margin:0!important}.spr-m-0{margin:0}.spr-m-auto{margin:auto}.spr-m-size-spacing-xs{margin:var(--size-300)}.\!spr-mb-0{margin-bottom:0!important}.\!spr-mt-\[12px\]{margin-top:12px!important}.\!spr-mt-\[6px\]{margin-top:6px!important}.\!spr-mt-\[8px\]{margin-top:8px!important}.spr-mb-10{margin-bottom:2.5rem}.spr-mb-2{margin-bottom:.5rem}.spr-mb-4{margin-bottom:1rem}.spr-mb-6{margin-bottom:1.5rem}.spr-mb-\[52px\]{margin-bottom:52px}.spr-mb-size-spacing-3xs{margin-bottom:var(--size-200)}.spr-mb-size-spacing-4xs{margin-bottom:var(--size-150)}.spr-mb-size-spacing-md{margin-bottom:var(--size-500)}.spr-me-size-spacing-3xs{margin-inline-end:var(--size-200)}.spr-ml-\[60px\]{margin-left:60px}.spr-ml-size-spacing-3xs{margin-left:var(--size-200)}.spr-mr-2{margin-right:.5rem}.spr-mr-size-spacing-3xs{margin-right:var(--size-200)}.spr-ms-auto{margin-inline-start:auto}.spr-mt-1{margin-top:.25rem}.spr-mt-10{margin-top:2.5rem}.spr-mt-2{margin-top:.5rem}.spr-mt-3{margin-top:.75rem}.spr-mt-size-spacing-4xs{margin-top:var(--size-150)}.spr-box-border{box-sizing:border-box}.spr-block{display:block}.spr-inline-block{display:inline-block}.spr-flex{display:flex}.spr-inline-flex{display:inline-flex}.spr-table{display:table}.spr-grid{display:grid}.spr-aspect-square{aspect-ratio:1 / 1}.spr-h-0\.5{height:.125rem}.spr-h-10{height:2.5rem}.spr-h-12{height:3rem}.spr-h-14{height:3.5rem}.spr-h-20{height:5rem}.spr-h-3{height:.75rem}.spr-h-4{height:1rem}.spr-h-5{height:1.25rem}.spr-h-6{height:1.5rem}.spr-h-8{height:2rem}.spr-h-9{height:2.25rem}.spr-h-\[1\.25em\]{height:1.25em}.spr-h-\[100vh\]{height:100vh}.spr-h-\[10px\]{height:10px}.spr-h-\[120px\]{height:120px}.spr-h-\[14px\]{height:14px}.spr-h-\[16px\]{height:16px}.spr-h-\[18px\]{height:18px}.spr-h-\[1em\]{height:1em}.spr-h-\[200px\]{height:200px}.spr-h-\[20px\]{height:20px}.spr-h-\[2px\]{height:2px}.spr-h-\[36px\]{height:36px}.spr-h-\[400px\]{height:400px}.spr-h-\[52px\]{height:52px}.spr-h-\[calc\(100vh-32px\)\]{height:calc(100vh - 32px)}.spr-h-fit{height:-moz-fit-content;height:fit-content}.spr-h-full{height:100%}.spr-h-screen{height:100vh}.spr-max-h-9{max-height:2.25rem}.spr-max-h-\[268px\]{max-height:268px}.spr-max-h-\[300px\]{max-height:300px}.spr-max-h-\[calc\(100vh-150px\)\]{max-height:calc(100vh - 150px)}.spr-max-h-\[calc\(100vh-194px\)\]{max-height:calc(100vh - 194px)}.spr-max-h-\[calc\(100vh-60px\)\]{max-height:calc(100vh - 60px)}.spr-min-h-12{min-height:3rem}.spr-min-h-\[18px\]{min-height:18px}.spr-min-h-\[200px\]{min-height:200px}.spr-min-h-\[240px\]{min-height:240px}.spr-min-h-\[360px\]{min-height:360px}.spr-min-h-\[60px\]{min-height:60px}.\!spr-w-full{width:100%!important}.spr-w-10{width:2.5rem}.spr-w-12{width:3rem}.spr-w-3{width:.75rem}.spr-w-4{width:1rem}.spr-w-5{width:1.25rem}.spr-w-6{width:1.5rem}.spr-w-8{width:2rem}.spr-w-\[1\.25em\]{width:1.25em}.spr-w-\[1\.39em\]{width:1.39em}.spr-w-\[110px\]{width:110px}.spr-w-\[120px\]{width:120px}.spr-w-\[1280px\]{width:1280px}.spr-w-\[14px\]{width:14px}.spr-w-\[16px\]{width:16px}.spr-w-\[1em\]{width:1em}.spr-w-\[200px\]{width:200px}.spr-w-\[20px\]{width:20px}.spr-w-\[240px\]{width:240px}.spr-w-\[2px\]{width:2px}.spr-w-\[360px\]{width:360px}.spr-w-\[36px\]{width:36px}.spr-w-\[420px\]{width:420px}.spr-w-\[480px\]{width:480px}.spr-w-\[50vw\]{width:50vw}.spr-w-\[720px\]{width:720px}.spr-w-\[80px\]{width:80px}.spr-w-auto{width:auto}.spr-w-fit{width:-moz-fit-content;width:fit-content}.spr-w-full{width:100%}.spr-w-screen{width:100vw}.\!spr-min-w-9{min-width:2.25rem!important}.spr-min-w-10{min-width:2.5rem}.spr-min-w-14{min-width:3.5rem}.spr-min-w-20{min-width:5rem}.spr-min-w-4{min-width:1rem}.spr-min-w-5{min-width:1.25rem}.spr-min-w-6{min-width:1.5rem}.spr-min-w-7{min-width:1.75rem}.spr-min-w-9{min-width:2.25rem}.spr-min-w-\[10px\]{min-width:10px}.spr-min-w-\[110px\]{min-width:110px}.spr-min-w-\[16px\]{min-width:16px}.spr-min-w-\[180px\]{min-width:180px}.spr-min-w-\[18em\]{min-width:18em}.spr-min-w-\[20px\]{min-width:20px}.spr-min-w-\[24px\]{min-width:24px}.spr-min-w-\[360px\]{min-width:360px}.spr-min-w-\[480px\]{min-width:480px}.spr-max-w-9{max-width:2.25rem}.spr-max-w-\[800px\]{max-width:800px}.spr-max-w-\[calc\(100\%-60px\)\]{max-width:calc(100% - 60px)}.spr-max-w-lg{max-width:1320px}.spr-max-w-md{max-width:1000px}.spr-max-w-sm{max-width:640px}.spr-flex-1{flex:1 1 0%}.spr-shrink-0{flex-shrink:0}.spr-grow{flex-grow:1}.spr-table-fixed{table-layout:fixed}.-spr-translate-x-1\/2{--tw-translate-x: -50%;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.-spr-translate-y-1\/2,.-spr-translate-y-2\/4{--tw-translate-y: -50%;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.spr-translate-x-0{--tw-translate-x: 0px;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.spr-translate-x-full{--tw-translate-x: 100%;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.spr-translate-y-\[-50\%\]{--tw-translate-y: -50%;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.spr-rotate-180{--tw-rotate: 180deg;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.spr-scale-90{--tw-scale-x: .9;--tw-scale-y: .9;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.spr-transform{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.\!spr-cursor-not-allowed{cursor:not-allowed!important}.spr-cursor-not-allowed{cursor:not-allowed}.spr-cursor-pointer{cursor:pointer}.spr-select-none{-webkit-user-select:none;-moz-user-select:none;user-select:none}.spr-resize-none{resize:none}.spr-appearance-none{-webkit-appearance:none;-moz-appearance:none;appearance:none}.spr-flex-row{flex-direction:row}.spr-flex-col{flex-direction:column}.spr-flex-wrap{flex-wrap:wrap}.spr-items-start{align-items:flex-start}.spr-items-center{align-items:center}.spr-justify-end{justify-content:flex-end}.spr-justify-center{justify-content:center}.spr-justify-between{justify-content:space-between}.spr-gap-0\.5{gap:.125rem}.spr-gap-1{gap:.25rem}.spr-gap-1\.5{gap:.375rem}.spr-gap-2{gap:.5rem}.spr-gap-20{gap:5rem}.spr-gap-3{gap:.75rem}.spr-gap-4{gap:1rem}.spr-gap-6{gap:1.5rem}.spr-gap-size-spacing-2xs{gap:var(--size-250)}.spr-gap-size-spacing-3xs{gap:var(--size-200)}.spr-gap-size-spacing-4xs{gap:var(--size-150)}.spr-gap-size-spacing-5xs{gap:var(--size-100)}.spr-gap-size-spacing-6xs{gap:var(--size-50)}.spr-gap-size-spacing-md{gap:var(--size-500)}.spr-space-x-2>:not([hidden])~:not([hidden]){--tw-space-x-reverse: 0;margin-right:calc(.5rem * var(--tw-space-x-reverse));margin-left:calc(.5rem * calc(1 - var(--tw-space-x-reverse)))}.spr-space-x-3>:not([hidden])~:not([hidden]){--tw-space-x-reverse: 0;margin-right:calc(.75rem * var(--tw-space-x-reverse));margin-left:calc(.75rem * calc(1 - var(--tw-space-x-reverse)))}.spr-space-x-4>:not([hidden])~:not([hidden]){--tw-space-x-reverse: 0;margin-right:calc(1rem * var(--tw-space-x-reverse));margin-left:calc(1rem * calc(1 - var(--tw-space-x-reverse)))}.spr-space-y-4>:not([hidden])~:not([hidden]){--tw-space-y-reverse: 0;margin-top:calc(1rem * calc(1 - var(--tw-space-y-reverse)));margin-bottom:calc(1rem * var(--tw-space-y-reverse))}.spr-overflow-auto{overflow:auto}.spr-overflow-hidden{overflow:hidden}.spr-overflow-y-auto{overflow-y:auto}.spr-overflow-x-hidden{overflow-x:hidden}.spr-truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.spr-rounded-\[2\.5px\]{border-radius:2.5px}.spr-rounded-\[32px\]{border-radius:32px}.spr-rounded-\[40px\]{border-radius:40px}.spr-rounded-\[50\%\]{border-radius:50%}.spr-rounded-border-radius-2xs{border-radius:var(--size-50)}.spr-rounded-border-radius-full{border-radius:999px}.spr-rounded-border-radius-lg{border-radius:var(--size-250)}.spr-rounded-border-radius-md{border-radius:var(--size-200)}.spr-rounded-border-radius-sm{border-radius:var(--size-150)}.spr-rounded-border-radius-xl{border-radius:var(--size-300)}.spr-rounded-border-radius-xs{border-radius:var(--size-100)}.spr-rounded-full{border-radius:9999px}.spr-rounded-lg{border-radius:.5rem}.spr-rounded-md{border-radius:.375rem}.spr-rounded-b-border-radius-2xs{border-bottom-right-radius:var(--size-50);border-bottom-left-radius:var(--size-50)}.spr-rounded-b-border-radius-lg{border-bottom-right-radius:var(--size-250);border-bottom-left-radius:var(--size-250)}.spr-rounded-b-border-radius-md{border-bottom-right-radius:var(--size-200);border-bottom-left-radius:var(--size-200)}.spr-rounded-b-border-radius-sm{border-bottom-right-radius:var(--size-150);border-bottom-left-radius:var(--size-150)}.spr-rounded-b-border-radius-xl{border-bottom-right-radius:var(--size-300);border-bottom-left-radius:var(--size-300)}.spr-rounded-b-border-radius-xs{border-bottom-right-radius:var(--size-100);border-bottom-left-radius:var(--size-100)}.spr-rounded-l-md{border-top-left-radius:.375rem;border-bottom-left-radius:.375rem}.spr-rounded-r-md{border-top-right-radius:.375rem;border-bottom-right-radius:.375rem}.spr-rounded-t-border-radius-2xs{border-top-left-radius:var(--size-50);border-top-right-radius:var(--size-50)}.spr-rounded-t-border-radius-lg{border-top-left-radius:var(--size-250);border-top-right-radius:var(--size-250)}.spr-rounded-t-border-radius-md{border-top-left-radius:var(--size-200);border-top-right-radius:var(--size-200)}.spr-rounded-t-border-radius-sm{border-top-left-radius:var(--size-150);border-top-right-radius:var(--size-150)}.spr-rounded-t-border-radius-xl{border-top-left-radius:var(--size-300);border-top-right-radius:var(--size-300)}.spr-rounded-t-border-radius-xs{border-top-left-radius:var(--size-100);border-top-right-radius:var(--size-100)}.\!spr-border{border-width:1px!important}.\!spr-border-0{border-width:0px!important}.\!spr-border-\[1\.5px\]{border-width:1.5px!important}.spr-border{border-width:1px}.spr-border-0{border-width:0px}.spr-border-2{border-width:2px}.spr-border-\[1\.25px\]{border-width:1.25px}.spr-border-\[1\.5px\]{border-width:1.5px}.spr-border-\[1px\]{border-width:1px}.\!spr-border-x-\[0\.5px\]{border-left-width:.5px!important;border-right-width:.5px!important}.\!spr-border-y{border-top-width:1px!important;border-bottom-width:1px!important}.spr-border-x-0{border-left-width:0px;border-right-width:0px}.spr-border-y{border-top-width:1px;border-bottom-width:1px}.\!spr-border-b{border-bottom-width:1px!important}.spr-border-b{border-bottom-width:1px}.spr-border-b-0{border-bottom-width:0px}.spr-border-l-0{border-left-width:0px}.spr-border-r{border-right-width:1px}.spr-border-r-0{border-right-width:0px}.spr-border-t{border-top-width:1px}.spr-border-t-0{border-top-width:0px}.\!spr-border-solid{border-style:solid!important}.spr-border-solid{border-style:solid}.\!spr-border-tomato-600{--tw-border-opacity: 1 !important;border-color:rgb(218 47 56 / var(--tw-border-opacity, 1))!important}.\!spr-border-transparent{border-color:transparent!important}.\!spr-border-white-100{--tw-border-opacity: 1 !important;border-color:rgb(241 242 243 / var(--tw-border-opacity, 1))!important}.\!spr-border-white-50{--tw-border-opacity: 1 !important;border-color:rgb(255 255 255 / var(--tw-border-opacity, 1))!important}.spr-border-kangkong-400{--tw-border-opacity: 1;border-color:rgb(74 222 123 / var(--tw-border-opacity, 1))}.spr-border-kangkong-700{--tw-border-opacity: 1;border-color:rgb(21 128 57 / var(--tw-border-opacity, 1))}.spr-border-mushroom-200{--tw-border-opacity: 1;border-color:rgb(217 222 222 / var(--tw-border-opacity, 1))}.spr-border-tomato-600{--tw-border-opacity: 1;border-color:rgb(218 47 56 / var(--tw-border-opacity, 1))}.spr-border-ubas-400{--tw-border-opacity: 1;border-color:rgb(170 139 250 / var(--tw-border-opacity, 1))}.spr-border-white-100{--tw-border-opacity: 1;border-color:rgb(241 242 243 / var(--tw-border-opacity, 1))}.spr-bg-kangkong-50{--tw-bg-opacity: 1;background-color:rgb(240 253 244 / var(--tw-bg-opacity, 1))}.spr-bg-mushroom-100{--tw-bg-opacity: 1;background-color:rgb(230 234 234 / var(--tw-bg-opacity, 1))}.spr-bg-mushroom-700\/60{background-color:#4c585799}.spr-bg-ubas-50{--tw-bg-opacity: 1;background-color:rgb(245 243 255 / var(--tw-bg-opacity, 1))}.spr-bg-white-50{--tw-bg-opacity: 1;background-color:rgb(255 255 255 / var(--tw-bg-opacity, 1))}.spr-bg-white-500{--tw-bg-opacity: 1;background-color:rgb(124 124 124 / var(--tw-bg-opacity, 1))}.spr-object-cover{-o-object-fit:cover;object-fit:cover}.spr-p-0{padding:0}.spr-p-1{padding:.25rem}.spr-p-2{padding:.5rem}.spr-p-3{padding:.75rem}.spr-p-3\.5{padding:.875rem}.spr-p-4{padding:1rem}.spr-p-8{padding:2rem}.spr-p-size-spacing-3xs{padding:var(--size-200)}.spr-p-size-spacing-4xs{padding:var(--size-150)}.spr-p-size-spacing-5xs{padding:var(--size-100)}.spr-p-size-spacing-sm{padding:var(--size-400)}.spr-px-2{padding-left:.5rem;padding-right:.5rem}.spr-px-3{padding-left:.75rem;padding-right:.75rem}.spr-px-4{padding-left:1rem;padding-right:1rem}.spr-px-size-spacing-2xl{padding-left:var(--size-800);padding-right:var(--size-800)}.spr-px-size-spacing-2xs{padding-left:var(--size-250);padding-right:var(--size-250)}.spr-px-size-spacing-4xs{padding-left:var(--size-150);padding-right:var(--size-150)}.spr-px-size-spacing-5xs{padding-left:var(--size-100);padding-right:var(--size-100)}.spr-px-size-spacing-sm{padding-left:var(--size-400);padding-right:var(--size-400)}.spr-px-size-spacing-xs{padding-left:var(--size-300);padding-right:var(--size-300)}.spr-py-1\.5{padding-top:.375rem;padding-bottom:.375rem}.spr-py-2{padding-top:.5rem;padding-bottom:.5rem}.spr-py-3{padding-top:.75rem;padding-bottom:.75rem}.spr-py-4{padding-top:1rem;padding-bottom:1rem}.spr-py-6{padding-top:1.5rem;padding-bottom:1.5rem}.spr-py-size-spacing-2xl{padding-top:var(--size-800);padding-bottom:var(--size-800)}.spr-py-size-spacing-2xs{padding-top:var(--size-250);padding-bottom:var(--size-250)}.spr-py-size-spacing-3xl{padding-top:var(--size-900);padding-bottom:var(--size-900)}.spr-py-size-spacing-3xs{padding-top:var(--size-200);padding-bottom:var(--size-200)}.spr-py-size-spacing-4xs{padding-top:var(--size-150);padding-bottom:var(--size-150)}.spr-py-size-spacing-6xs{padding-top:var(--size-50);padding-bottom:var(--size-50)}.spr-py-size-spacing-md{padding-top:var(--size-500);padding-bottom:var(--size-500)}.spr-py-size-spacing-xs{padding-top:var(--size-300);padding-bottom:var(--size-300)}.\!spr-pl-size-spacing-3xl{padding-left:var(--size-900)!important}.spr-pb-4{padding-bottom:1rem}.spr-pl-size-spacing-lg{padding-left:var(--size-600)}.spr-pr-\[5\%\]{padding-right:5%}.spr-pr-\[50\%\]{padding-right:50%}.spr-pr-\[90\%\]{padding-right:90%}.spr-pr-\[93\%\]{padding-right:93%}.spr-pt-0{padding-top:0}.spr-pt-4{padding-top:1rem}.spr-text-center{text-align:center}.spr-text-start{text-align:start}.spr-align-middle{vertical-align:middle}.spr-font-code{font-family:Roboto Mono,sans-serif}.spr-font-inbound{font-family:Roboto,sans-serif}.spr-font-main{font-family:Rubik,sans-serif}.\!spr-text-\[10px\]{font-size:10px!important}.spr-text-\[10px\]{font-size:10px}.spr-text-\[20px\]{font-size:20px}.spr-text-\[28px\]{font-size:28px}.spr-text-\[36px\]{font-size:36px}.spr-text-xs{font-size:.75rem;line-height:1rem}.spr-font-black{font-weight:900}.spr-font-bold{font-weight:700}.spr-font-extrabold{font-weight:800}.spr-font-extralight{font-weight:200}.spr-font-light{font-weight:300}.spr-font-medium{font-weight:500}.spr-font-normal{font-weight:400}.spr-font-semibold{font-weight:600}.spr-font-thin{font-weight:100}.spr-uppercase{text-transform:uppercase}.\!spr-leading-\[0\]{line-height:0!important}.spr-leading-100{line-height:12px}.spr-leading-300{line-height:16px}.spr-leading-\[0\]{line-height:0}.spr-leading-none{line-height:1}.\!spr-tracking-normal{letter-spacing:0em!important}.\!spr-text-tomato-600{--tw-text-opacity: 1 !important;color:rgb(218 47 56 / var(--tw-text-opacity, 1))!important}.spr-text-blueberry-500{--tw-text-opacity: 1;color:rgb(45 136 255 / var(--tw-text-opacity, 1))}.spr-text-blueberry-700{--tw-text-opacity: 1;color:rgb(15 110 235 / var(--tw-text-opacity, 1))}.spr-text-carrot-500{--tw-text-opacity: 1;color:rgb(255 151 10 / var(--tw-text-opacity, 1))}.spr-text-gray-500{--tw-text-opacity: 1;color:rgb(107 114 128 / var(--tw-text-opacity, 1))}.spr-text-kangkong-500{--tw-text-opacity: 1;color:rgb(34 197 88 / var(--tw-text-opacity, 1))}.spr-text-kangkong-600{--tw-text-opacity: 1;color:rgb(23 173 73 / var(--tw-text-opacity, 1))}.spr-text-kangkong-700{--tw-text-opacity: 1;color:rgb(21 128 57 / var(--tw-text-opacity, 1))}.spr-text-kangkong-800{--tw-text-opacity: 1;color:rgb(22 101 49 / var(--tw-text-opacity, 1))}.spr-text-mango-500{--tw-text-opacity: 1;color:rgb(255 191 0 / var(--tw-text-opacity, 1))}.spr-text-mushroom-300{--tw-text-opacity: 1;color:rgb(184 193 192 / var(--tw-text-opacity, 1))}.spr-text-mushroom-600{--tw-text-opacity: 1;color:rgb(93 108 107 / var(--tw-text-opacity, 1))}.spr-text-mushroom-950{--tw-text-opacity: 1;color:rgb(38 43 43 / var(--tw-text-opacity, 1))}.spr-text-tomato-500{--tw-text-opacity: 1;color:rgb(236 71 80 / var(--tw-text-opacity, 1))}.spr-text-tomato-600{--tw-text-opacity: 1;color:rgb(218 47 56 / var(--tw-text-opacity, 1))}.spr-text-ubas-800{--tw-text-opacity: 1;color:rgb(95 33 182 / var(--tw-text-opacity, 1))}.spr-decoration-solid{text-decoration-style:solid}.spr-opacity-0{opacity:0}.spr-opacity-100{opacity:1}.spr-opacity-60{opacity:.6}.\!spr-shadow-button{--tw-shadow: 0px 2px 1px 0px rgba(0, 0, 0, .15) inset !important;--tw-shadow-colored: inset 0px 2px 1px 0px var(--tw-shadow-color) !important;box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow)!important}.\!spr-shadow-none{--tw-shadow: 0 0 #0000 !important;--tw-shadow-colored: 0 0 #0000 !important;box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow)!important}.spr-shadow-\[inset_0px_0px_0px_2\.5px_\#fff\]{--tw-shadow: inset 0px 0px 0px 2.5px #fff;--tw-shadow-colored: inset 0px 0px 0px 2.5px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow)}.spr-outline-none{outline:2px solid transparent;outline-offset:2px}.spr-outline-2{outline-width:2px}.spr-outline-offset-4{outline-offset:4px}.spr-ring-0{--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow, 0 0 #0000)}.spr-brightness-75{--tw-brightness: brightness(.75);filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.spr-drop-shadow{--tw-drop-shadow: drop-shadow(0 1px 2px rgb(0 0 0 / .1)) drop-shadow(0 1px 1px rgb(0 0 0 / .06));filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.spr-drop-shadow-\[0_2px_8px_-2px_rgba\(38\,43\,43\,0\.20\)\]{--tw-drop-shadow: drop-shadow(0 2px 8px -2px rgba(38,43,43,.2));filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.spr-transition{transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,-webkit-backdrop-filter;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter,-webkit-backdrop-filter;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.spr-transition-all{transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.spr-transition-colors{transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.spr-transition-transform{transition-property:transform;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.spr-duration-150{transition-duration:.15s}.spr-duration-300{transition-duration:.3s}.spr-duration-\[150ms\]{transition-duration:.15s}.spr-ease-\[ease-in-out\]{transition-timing-function:ease-in-out}.spr-ease-in-out{transition-timing-function:cubic-bezier(.4,0,.2,1)}.spr-hidden-scrolls::-webkit-scrollbar{display:none}.spr-heading-xl{font-family:Rubik,sans-serif;font-weight:500;font-size:48px;line-height:60px;letter-spacing:-1.3px}.spr-heading-lg{font-family:Rubik,sans-serif;font-weight:500;font-size:40px;line-height:48px;letter-spacing:-1px}.spr-heading-md{font-family:Rubik,sans-serif;font-weight:500;font-size:32px;line-height:40px;letter-spacing:-1px}.spr-heading-sm{font-family:Rubik,sans-serif;font-weight:500;font-size:28px;line-height:36px;letter-spacing:-.7px}.spr-heading-xs{font-family:Rubik,sans-serif;font-weight:500;font-size:24px;line-height:32px;letter-spacing:-.7px}.spr-subheading-sm{font-family:Rubik,sans-serif;font-weight:500;font-size:20px;line-height:24px;letter-spacing:-.7px}.spr-subheading-xs{font-family:Rubik,sans-serif;font-weight:500;font-size:16px;line-height:20px;letter-spacing:0px}.spr-body-lg{font-family:Rubik,sans-serif;font-size:20px;line-height:32px;letter-spacing:0px}.spr-body-lg-regular{font-weight:400;font-family:Rubik,sans-serif;font-size:20px;line-height:32px;letter-spacing:0px}.spr-body-lg-regular-underline{font-weight:400;text-decoration-style:solid;font-family:Rubik,sans-serif;font-size:20px;line-height:32px;letter-spacing:0px}.spr-body-lg-regular-medium{font-weight:500;font-family:Rubik,sans-serif;font-size:20px;line-height:32px;letter-spacing:0px}.spr-body-lg-medium-underline{font-weight:500;text-decoration-style:solid;font-family:Rubik,sans-serif;font-size:20px;line-height:32px;letter-spacing:0px}.spr-body-md{font-family:Rubik,sans-serif;font-size:16px;line-height:24px;letter-spacing:0px}.spr-body-md-regular{font-weight:400;font-family:Rubik,sans-serif;font-size:16px;line-height:24px;letter-spacing:0px}.spr-body-md-regular-underline{font-weight:400;text-decoration-style:solid;font-family:Rubik,sans-serif;font-size:16px;line-height:24px;letter-spacing:0px}.spr-body-md-regular-medium{font-weight:500;font-family:Rubik,sans-serif;font-size:16px;line-height:24px;letter-spacing:0px}.spr-body-md-medium-underline{font-weight:500;text-decoration-style:solid;font-family:Rubik,sans-serif;font-size:16px;line-height:24px;letter-spacing:0px}.spr-body-sm{font-family:Rubik,sans-serif;font-size:14px;line-height:20px;letter-spacing:0px}.spr-body-sm-regular{font-weight:400;font-family:Rubik,sans-serif;font-size:14px;line-height:20px;letter-spacing:0px}.spr-body-sm-regular-underline{font-weight:400;text-decoration-style:solid;font-family:Rubik,sans-serif;font-size:14px;line-height:20px;letter-spacing:0px}.spr-body-sm-regular-medium{font-weight:500;font-family:Rubik,sans-serif;font-size:14px;line-height:20px;letter-spacing:0px}.spr-body-sm-medium-underline{font-weight:500;text-decoration-style:solid;font-family:Rubik,sans-serif;font-size:14px;line-height:20px;letter-spacing:0px}.spr-body-xs{font-family:Rubik,sans-serif;font-size:12px;line-height:16px;letter-spacing:0px}.spr-body-xs-regular{font-weight:400;font-family:Rubik,sans-serif;font-size:12px;line-height:16px;letter-spacing:0px}.spr-body-xs-regular-underline{font-weight:400;text-decoration-style:solid;font-family:Rubik,sans-serif;font-size:12px;line-height:16px;letter-spacing:0px}.spr-body-xs-regular-medium{font-weight:500;font-family:Rubik,sans-serif;font-size:12px;line-height:16px;letter-spacing:0px}.spr-body-xs-medium-underline{font-weight:500;text-decoration-style:solid;font-family:Rubik,sans-serif;font-size:12px;line-height:16px;letter-spacing:0px}.spr-label-xs{font-family:Rubik,sans-serif;text-transform:uppercase;font-size:12px;line-height:12px;letter-spacing:.7px}.spr-label-xs-regular{font-weight:400;font-family:Rubik,sans-serif;text-transform:uppercase;font-size:12px;line-height:12px;letter-spacing:.7px}.spr-label-xs-medium{font-weight:500;font-family:Rubik,sans-serif;text-transform:uppercase;font-size:12px;line-height:12px;letter-spacing:.7px}.spr-label-sm{font-family:Rubik,sans-serif;text-transform:uppercase;font-size:14px;line-height:14px;letter-spacing:.7px}.spr-label-sm-regular{font-weight:400;font-family:Rubik,sans-serif;text-transform:uppercase;font-size:14px;line-height:14px;letter-spacing:.7px}.spr-label-sm-medium{font-weight:500;font-family:Rubik,sans-serif;text-transform:uppercase;font-size:14px;line-height:14px;letter-spacing:.7px}.spr-font-size-100{font-size:12px}.spr-font-size-200{font-size:14px}.spr-font-size-300{font-size:16px}.spr-font-size-400{font-size:20px}.spr-font-size-500{font-size:24px}.spr-font-size-600{font-size:28px}.spr-font-size-700{font-size:32px}.spr-font-size-800{font-size:40px}.spr-font-size-900{font-size:48px}.spr-font-size-1000{font-size:56px}.spr-line-height-100{line-height:12px}.spr-line-height-200{line-height:14px}.spr-line-height-300{line-height:16px}.spr-line-height-400{line-height:20px}.spr-line-height-500{line-height:24px}.spr-line-height-600{line-height:32px}.spr-line-height-700{line-height:36px}.spr-line-height-800{line-height:40px}.spr-line-height-900{line-height:48px}.spr-line-height-1000{line-height:60px}.spr-letter-spacing-densest{letter-spacing:-1.3px}.spr-letter-spacing-denser{letter-spacing:-1px}.spr-letter-spacing-dense{letter-spacing:-.7px}.spr-letter-spacing-normal{letter-spacing:0px}.spr-letter-spacing-wide{letter-spacing:.7px}.spr-letter-spacing-wider{letter-spacing:1px}.spr-letter-spacing-widest{letter-spacing:1.3px}.spr-text-color-strong{--tw-text-opacity: 1;color:rgb(38 43 43 / var(--tw-text-opacity, 1))}.spr-text-color-supporting{--tw-text-opacity: 1;color:rgb(145 159 157 / var(--tw-text-opacity, 1))}.spr-text-color-base{--tw-text-opacity: 1;color:rgb(93 108 107 / var(--tw-text-opacity, 1))}.spr-text-color-weak{--tw-text-opacity: 1;color:rgb(184 193 192 / var(--tw-text-opacity, 1))}.spr-text-color-disabled{--tw-text-opacity: 1;color:rgb(186 188 192 / var(--tw-text-opacity, 1))}.\!spr-text-color-on-fill-disabled,.spr-text-color-on-fill-disabled{--tw-text-opacity: 1;color:rgb(152 152 152 / var(--tw-text-opacity, 1))}.spr-text-color-inverted-strong{--tw-text-opacity: 1;color:rgb(255 255 255 / var(--tw-text-opacity, 1))}.spr-text-color-inverted-disabled{--tw-text-opacity: 1;color:rgb(101 101 101 / var(--tw-text-opacity, 1))}.spr-text-color-brand-base,.spr-text-color-success-base{--tw-text-opacity: 1;color:rgb(21 128 57 / var(--tw-text-opacity, 1))}.spr-text-color-information-base{--tw-text-opacity: 1;color:rgb(15 110 235 / var(--tw-text-opacity, 1))}.spr-text-color-danger-base{--tw-text-opacity: 1;color:rgb(218 47 56 / var(--tw-text-opacity, 1))}.spr-text-color-pending-base{--tw-text-opacity: 1;color:rgb(187 104 2 / var(--tw-text-opacity, 1))}.spr-text-color-caution-base{--tw-text-opacity: 1;color:rgb(204 92 2 / var(--tw-text-opacity, 1))}.spr-background-color{--tw-bg-opacity: 1;background-color:rgb(255 255 255 / var(--tw-bg-opacity, 1))}.spr-background-color-surface{--tw-bg-opacity: 1;background-color:rgb(241 242 243 / var(--tw-bg-opacity, 1))}.spr-background-color-inverted{--tw-bg-opacity: 1;background-color:rgb(38 43 43 / var(--tw-bg-opacity, 1))}.spr-background-color-base{--tw-bg-opacity: 1;background-color:rgb(239 241 241 / var(--tw-bg-opacity, 1))}.spr-background-color-single-active{--tw-bg-opacity: 1;background-color:rgb(220 252 230 / var(--tw-bg-opacity, 1))}.spr-background-color-hover{--tw-bg-opacity: 1;background-color:rgb(239 241 241 / var(--tw-bg-opacity, 1))}.spr-background-color-pressed{--tw-bg-opacity: 1;background-color:rgb(230 234 234 / var(--tw-bg-opacity, 1))}.spr-background-color-disabled{--tw-bg-opacity: 1;background-color:rgb(241 242 243 / var(--tw-bg-opacity, 1))}.spr-background-color-brand-base{--tw-bg-opacity: 1;background-color:rgb(21 128 57 / var(--tw-bg-opacity, 1))}.spr-background-color-brand-hover{--tw-bg-opacity: 1;background-color:rgb(22 101 49 / var(--tw-bg-opacity, 1))}.spr-background-color-brand-pressed{--tw-bg-opacity: 1;background-color:rgb(20 83 43 / var(--tw-bg-opacity, 1))}.spr-background-color-brand-weak{--tw-bg-opacity: 1;background-color:rgb(220 252 230 / var(--tw-bg-opacity, 1))}.spr-background-color-success-base{--tw-bg-opacity: 1;background-color:rgb(23 173 73 / var(--tw-bg-opacity, 1))}.spr-background-color-success-hover{--tw-bg-opacity: 1;background-color:rgb(21 128 57 / var(--tw-bg-opacity, 1))}.spr-background-color-success-pressed{--tw-bg-opacity: 1;background-color:rgb(22 101 49 / var(--tw-bg-opacity, 1))}.spr-background-color-success-weak{--tw-bg-opacity: 1;background-color:rgb(220 252 230 / var(--tw-bg-opacity, 1))}.spr-background-color-information-base{--tw-bg-opacity: 1;background-color:rgb(22 121 250 / var(--tw-bg-opacity, 1))}.spr-background-color-information-weak{--tw-bg-opacity: 1;background-color:rgb(216 235 255 / var(--tw-bg-opacity, 1))}.spr-background-color-pending-base{--tw-bg-opacity: 1;background-color:rgb(255 191 0 / var(--tw-bg-opacity, 1))}.spr-background-color-pending-weak{--tw-bg-opacity: 1;background-color:rgb(255 251 197 / var(--tw-bg-opacity, 1))}.spr-background-color-caution-base{--tw-bg-opacity: 1;background-color:rgb(255 151 10 / var(--tw-bg-opacity, 1))}.spr-background-color-caution-weak{--tw-bg-opacity: 1;background-color:rgb(255 244 211 / var(--tw-bg-opacity, 1))}.spr-background-color-danger-base{--tw-bg-opacity: 1;background-color:rgb(218 47 56 / var(--tw-bg-opacity, 1))}.spr-background-color-danger-hover{--tw-bg-opacity: 1;background-color:rgb(182 31 39 / var(--tw-bg-opacity, 1))}.spr-background-color-danger-pressed{--tw-bg-opacity: 1;background-color:rgb(151 29 35 / var(--tw-bg-opacity, 1))}.spr-background-color-danger-weak{--tw-bg-opacity: 1;background-color:rgb(254 226 227 / var(--tw-bg-opacity, 1))}.spr-switch-background-default{--tw-bg-opacity: 1;background-color:rgb(217 222 222 / var(--tw-bg-opacity, 1))}.spr-switch-background-hover{--tw-bg-opacity: 1;background-color:rgb(184 193 192 / var(--tw-bg-opacity, 1))}.spr-switch-background-pressed{--tw-bg-opacity: 1;background-color:rgb(145 159 157 / var(--tw-bg-opacity, 1))}.spr-border-color-strong{--tw-border-opacity: 1;border-color:rgb(115 132 130 / var(--tw-border-opacity, 1))}.spr-border-color-supporting{--tw-border-opacity: 1;border-color:rgb(145 159 157 / var(--tw-border-opacity, 1))}.\!spr-border-color-base,.spr-border-color-base{--tw-border-opacity: 1;border-color:rgb(184 193 192 / var(--tw-border-opacity, 1))}.spr-border-color-weak{--tw-border-opacity: 1;border-color:rgb(217 222 222 / var(--tw-border-opacity, 1))}.\!spr-border-color-disabled,.spr-border-color-disabled{--tw-border-opacity: 1;border-color:rgb(241 242 243 / var(--tw-border-opacity, 1))}.\!spr-border-color-brand-base,.spr-border-color-brand-base{--tw-border-opacity: 1;border-color:rgb(21 128 57 / var(--tw-border-opacity, 1))}.spr-border-color-brand-hover{--tw-border-opacity: 1;border-color:rgb(22 101 49 / var(--tw-border-opacity, 1))}.\!spr-border-color-success-base,.spr-border-color-success-base{--tw-border-opacity: 1;border-color:rgb(21 128 57 / var(--tw-border-opacity, 1))}.\!spr-border-color-information-base,.spr-border-color-information-base{--tw-border-opacity: 1;border-color:rgb(15 110 235 / var(--tw-border-opacity, 1))}.\!spr-border-color-danger-base{--tw-border-opacity: 1;border-color:rgb(218 47 56 / var(--tw-border-opacity, 1))}.\!spr-border-color-pending-base{--tw-border-opacity: 1;border-color:rgb(187 104 2 / var(--tw-border-opacity, 1))}.\!spr-border-color-caution-base{--tw-border-opacity: 1;border-color:rgb(204 92 2 / var(--tw-border-opacity, 1))}.spr-drop-shadow{--tw-shadow: 0px 2px 8px -2px #262B2B33;--tw-shadow-colored: 0px 2px 8px -2px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow)}.selection\:spr-cursor-pointer *::-moz-selection{cursor:pointer}.selection\:spr-cursor-pointer *::selection{cursor:pointer}.selection\:spr-cursor-pointer::-moz-selection{cursor:pointer}.selection\:spr-cursor-pointer::selection{cursor:pointer}.placeholder\:spr-text-mushroom-300::-moz-placeholder{--tw-text-opacity: 1;color:rgb(184 193 192 / var(--tw-text-opacity, 1))}.placeholder\:spr-text-mushroom-300::placeholder{--tw-text-opacity: 1;color:rgb(184 193 192 / var(--tw-text-opacity, 1))}.before\:spr-transition-all:before{content:var(--tw-content);transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.before\:spr-duration-150:before{content:var(--tw-content);transition-duration:.15s}.after\:spr-transition-all:after{content:var(--tw-content);transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.after\:spr-duration-150:after{content:var(--tw-content);transition-duration:.15s}.last\:spr-rounded-b-xl:last-child{border-bottom-right-radius:.75rem;border-bottom-left-radius:.75rem}.last-of-type\:spr-border-0:last-of-type{border-width:0px}.last-of-type\:spr-border-t:last-of-type{border-top-width:1px}.last-of-type\:spr-border-solid:last-of-type{border-style:solid}.last-of-type\:spr-border-color-weak:last-of-type{--tw-border-opacity: 1;border-color:rgb(217 222 222 / var(--tw-border-opacity, 1))}.hover\:spr-cursor-pointer:hover{cursor:pointer}.hover\:spr-shadow-button-hover:hover{--tw-shadow: 0px -2px 1px 0px rgba(0, 0, 0, .1) inset;--tw-shadow-colored: inset 0px -2px 1px 0px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow)}.hover\:spr-brightness-75:hover{--tw-brightness: brightness(.75);filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.hover\:spr-background-color-hover:hover{--tw-bg-opacity: 1;background-color:rgb(239 241 241 / var(--tw-bg-opacity, 1))}.focus\:\!spr-border-\[1\.5px\]:focus{border-width:1.5px!important}.focus\:\!spr-border-kangkong-700:focus{--tw-border-opacity: 1 !important;border-color:rgb(21 128 57 / var(--tw-border-opacity, 1))!important}.focus\:\!spr-border-tomato-600:focus{--tw-border-opacity: 1 !important;border-color:rgb(218 47 56 / var(--tw-border-opacity, 1))!important}.focus\:spr-border-kangkong-700:focus{--tw-border-opacity: 1;border-color:rgb(21 128 57 / var(--tw-border-opacity, 1))}.focus\:spr-border-tomato-600:focus{--tw-border-opacity: 1;border-color:rgb(218 47 56 / var(--tw-border-opacity, 1))}.focus\:spr-border-white-100:focus{--tw-border-opacity: 1;border-color:rgb(241 242 243 / var(--tw-border-opacity, 1))}.focus\:spr-text-color-strong:focus{--tw-text-opacity: 1;color:rgb(38 43 43 / var(--tw-text-opacity, 1))}.active\:spr-scale-90:active{--tw-scale-x: .9;--tw-scale-y: .9;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.active\:spr-scale-95:active{--tw-scale-x: .95;--tw-scale-y: .95;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.active\:spr-text-color-success-pressed:active{--tw-text-opacity: 1;color:rgb(20 83 43 / var(--tw-text-opacity, 1))}.active\:spr-background-color-single-active:active{--tw-bg-opacity: 1;background-color:rgb(220 252 230 / var(--tw-bg-opacity, 1))}.active\:spr-background-color-pressed:active{--tw-bg-opacity: 1;background-color:rgb(230 234 234 / var(--tw-bg-opacity, 1))}.spr-group:hover .group-hover\:spr-background-color-hover{--tw-bg-opacity: 1;background-color:rgb(239 241 241 / var(--tw-bg-opacity, 1))}.spr-group:active .group-active\:spr-scale-90{--tw-scale-x: .9;--tw-scale-y: .9;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.spr-group:active .group-active\:spr-background-color-pressed{--tw-bg-opacity: 1;background-color:rgb(230 234 234 / var(--tw-bg-opacity, 1))}@media (max-width: 575.98px){.sm\:spr-left-\[16\%\]{left:16%}.sm\:spr-left-\[24\%\]{left:24%}.sm\:spr-pr-\[80\%\]{padding-right:80%}.sm\:spr-pr-\[85\%\]{padding-right:85%}}.\[\&\>img\]\:spr-mx-auto>img{margin-left:auto;margin-right:auto}.\[\&\>img\]\:spr-h-\[24px\]>img{height:24px}.\[\&\>img\]\:spr-h-\[36px\]>img{height:36px}.\[\&\>img\]\:spr-w-\[24px\]>img{width:24px}.\[\&\>img\]\:spr-w-\[36px\]>img{width:36px}.\[\&\>img\]\:spr-rounded-full>img{border-radius:9999px}.\[\&\>img\]\:spr-object-cover>img{-o-object-fit:cover;object-fit:cover}.\[\&_\.chips-close\]\:spr-m-0 .chips-close{margin:0}.\[\&_\.chips-close\]\:spr-inline-flex .chips-close{display:inline-flex}.\[\&_\.chips-close\]\:spr-items-center .chips-close{align-items:center}.\[\&_\.chips-close\]\:spr-border-0 .chips-close{border-width:0px}.\[\&_\.chips-close\]\:spr-bg-transparent .chips-close{background-color:transparent}.\[\&_\.chips-close\]\:spr-p-0 .chips-close{padding:0}.\[\&_\.chips-close\]\:spr-leading-\[0\] .chips-close{line-height:0}.\[\&_\.chips-close\]\:hover\:spr-cursor-pointer:hover .chips-close{cursor:pointer}

package/package.json

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

package/src/components/avatar/avatar.vue

@@ -1,23 +1,23 @@
 <template>
   <div :class="avatarClasses.baseClasses">
     <template v-if="['image', 'client', 'user', 'user-group'].includes(props.variant) || $slots.default">
-      <div :class="[avatarClassses.imageClasses, 'avatar__slot spr-border-color-weak spr-border spr-border-solid']">
+      <div :class="[avatarClasses.imageClasses, 'avatar__slot spr-border-color-weak spr-border spr-border-solid']">
         <slot>
-          <img v-if="src" :src="src" :alt="alt" :class="avatarClassses.imageClasses" />
+          <img v-if="src" :src="src" :alt="alt" :class="avatarClasses.imageClasses" />
           <Icon v-else :icon="getIconVariant" />
         </slot>
       </div>
     </template>
 
-    <div v-else :class="avatarClassses.nameInitalsClasses">
+    <div v-else :class="avatarClasses.nameInitialsClasses">
       {{ props.variant === 'count' ? `+${count}` : getInitials }}
     </div>
 
-    <span v-if="notification" :class="avatarClassses.notificationClasses">
+    <span v-if="notification" :class="avatarClasses.notificationClasses">
       <spr-badge :text="NotificationText" variant="danger" :size="getAvatarSize.notif" />
     </span>
 
-    <span v-if="badge" :class="avatarClassses.onlineNotificationClasses">
+    <span v-if="badge" :class="avatarClasses.onlineNotificationClasses">
       <spr-badge text="" :variant="status" :size="getAvatarSize.badge" />
     </span>
   </div>

package/src/components/card/card.vue

@@ -8,8 +8,10 @@
           class="spr-me-size-spacing-3xs spr-h-6 spr-w-6 spr-text-kangkong-600"
         />
         <div class="spr-mr-size-spacing-3xs">
-          <div class="spr-text-mushroom-950 spr-font-size-300 spr-font-medium spr-leading-5">{{ props.title }}</div>
-          <div v-if="props.subtitle" class="spr-font-size-100 spr-leading-4 spr-text-mushroom-600">
+          <div class="spr-body-md-regular-medium spr-text-mushroom-950">
+            {{ props.title }}
+          </div>
+          <div v-if="props.subtitle" class="spr-body-xs-regular spr-text-mushroom-600">
             {{ props.subtitle }}
           </div>
         </div>

package/src/components/status/status.ts

@@ -1,16 +1,19 @@
 import type { PropType, ExtractPropTypes } from 'vue';
 
 const STATUS_STATES = ['success', 'information', 'pending', 'caution', 'danger'] as const;
+const STATUS_SIZES = ['2xs', 'xs', 'sm', 'base', 'lg', 'xl', '2xl'] as const;
 
 export const statusPropTypes = {
-  /**
-   * @description status state
-   */
   state: {
     type: String as PropType<(typeof STATUS_STATES)[number]>,
     validator: (value: (typeof STATUS_STATES)[number]) => STATUS_STATES.includes(value),
     default: 'success',
   },
+  size: {
+    type: String as PropType<(typeof STATUS_SIZES)[number]>,
+    validator: (value: (typeof STATUS_SIZES)[number]) => STATUS_SIZES.includes(value),
+    default: 'base',
+  },
 };
 
 export type StatusPropTypes = ExtractPropTypes<typeof statusPropTypes>;

package/src/components/status/status.vue

@@ -1,5 +1,5 @@
 <template>
-  <Icon :icon="statusIcon" :class="statusClass" :aria-label="statusDescription" />
+  <Icon :icon="statusIcon"  :class="[statusClass, statusSize]" :aria-label="statusDescription" />
 </template>
 
 <script lang="ts" setup>
@@ -9,5 +9,5 @@ import { useStatus } from './use-status';
 
 const props = defineProps(statusPropTypes);
 
-const { statusIcon, statusClass, statusDescription } = useStatus(props);
+const { statusIcon, statusClass, statusDescription, statusSize} = useStatus(props);
 </script>

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

@@ -3,9 +3,21 @@ import { computed, type ComputedRef } from 'vue';
 import type { StatusPropTypes } from './status';
 
 export const useStatus = (props: StatusPropTypes) => {
+  const statusSize: ComputedRef<string> = computed(() => {
+    const stateSizes: Record<string, string> = {
+      '2xs': 'spr-w-[14px] spr-h-[14px]',
+      xs: 'spr-w-4 spr-h-4',
+      sm: 'spr-w-5 spr-h-5',
+      base: 'spr-w-6 spr-h-6',
+      lg: 'spr-w-8 spr-h-8',
+      xl: 'spr-w-10 spr-h-10',
+      '2xl': 'spr-w-12 spr-h-12',
+    };
+
+    return stateSizes[props.size] || 'spr-w-6 spr-h-6';
+  });
 
   const statusClass: ComputedRef<string> = computed(() => {
-    const baseClasses = 'spr-w-6 spr-h-6 ';
     const stateClasses: Record<string, string> = {
       success: 'spr-text-kangkong-600',
       information: 'spr-text-blueberry-700',
@@ -13,7 +25,7 @@ export const useStatus = (props: StatusPropTypes) => {
       caution: 'spr-text-carrot-500',
       danger: 'spr-text-tomato-600',
     };
-    return baseClasses + (stateClasses[props.state] || 'spr-text-kangkong-600');
+    return stateClasses[props.state] || 'spr-text-kangkong-600';
   });
 
   const statusIcon: ComputedRef<string> = computed(() => {
@@ -41,6 +53,7 @@ export const useStatus = (props: StatusPropTypes) => {
   return {
     statusIcon,
     statusClass,
-    statusDescription
+    statusDescription,
+    statusSize,
   };
 };