spicykatsu 0.0.41 → 0.0.42

package/dist/spicykatsu.es.js

@@ -1,11 +1,70 @@
-import { defineComponent as b, ref as S, watch as Y, openBlock as r, createBlock as X, Transition as P, withCtx as A, createElementBlock as c, normalizeClass as C, withKeys as M, toDisplayString as v, createCommentVNode as f, renderSlot as m, computed as g, resolveDirective as q, withDirectives as D, normalizeStyle as k, createElementVNode as h, onMounted as G, onUnmounted as J, createVNode as Q, Fragment as E, renderList as z, vModelText as x, createTextVNode as Z, mergeProps as ee, withModifiers as L, reactive as te, nextTick as oe } from "vue";
-const le = ["aria-label"], ae = {
+import { defineComponent as b, ref as S, openBlock as r, createElementBlock as c, Fragment as B, renderList as O, createElementVNode as p, normalizeClass as k, toDisplayString as v, createCommentVNode as y, createVNode as A, Transition as D, withCtx as M, withDirectives as z, renderSlot as g, vShow as G, watch as x, createBlock as J, withKeys as P, computed as h, resolveDirective as Q, normalizeStyle as C, onMounted as Z, onUnmounted as ee, createTextVNode as E, vModelText as R, mergeProps as W, withModifiers as Y, reactive as te, nextTick as oe } from "vue";
+const se = { class: "spicyAccordion" }, le = ["onClick", "aria-expanded"], ae = {
+  key: 0,
+  class: "accordionIcon",
+  viewBox: "0 0 24 24",
+  xmlns: "http://www.w3.org/2000/svg"
+}, ne = ["d"], ie = { class: "spicyAccordionContent" }, re = /* @__PURE__ */ b({
+  __name: "SpicyAccordion",
+  props: {
+    sections: {},
+    singleOpen: { type: Boolean, default: !1 },
+    defaultOpen: {}
+  },
+  setup(e) {
+    const o = e, s = S(o.defaultOpen || []), l = (a) => {
+      if (o.singleOpen)
+        s.value = s.value.includes(a) ? [] : [a];
+      else {
+        const d = s.value.indexOf(a);
+        d === -1 ? s.value.push(a) : s.value.splice(d, 1);
+      }
+    }, t = (a) => s.value.includes(a);
+    return (a, d) => (r(), c("div", se, [
+      (r(!0), c(B, null, O(a.sections, (n, u) => (r(), c("div", {
+        key: u,
+        class: "spicyAccordionItem"
+      }, [
+        p("button", {
+          class: k(["spicyAccordionHeader", { open: t(u) }]),
+          onClick: (i) => l(u),
+          "aria-expanded": t(u)
+        }, [
+          p("span", null, v(n.title), 1),
+          n.icon ? (r(), c("svg", ae, [
+            p("path", {
+              d: n.icon
+            }, null, 8, ne)
+          ])) : y("", !0),
+          d[0] || (d[0] = p("span", { class: "accordionToggle" }, [
+            p("svg", {
+              class: "accordionArrow",
+              viewBox: "0 0 24 24"
+            }, [
+              p("path", { d: "M7 10l5 5 5-5H7z" })
+            ])
+          ], -1))
+        ], 10, le),
+        A(D, { name: "fade" }, {
+          default: M(() => [
+            z(p("div", ie, [
+              g(a.$slots, `section-${u}`)
+            ], 512), [
+              [G, t(u)]
+            ])
+          ]),
+          _: 2
+        }, 1024)
+      ]))), 128))
+    ]));
+  }
+}), ce = ["aria-label"], ue = {
   key: 0,
   class: "spicyAlertIcon"
-}, se = {
+}, de = {
   key: 1,
   class: "spicyAlertText"
-}, ne = /* @__PURE__ */ b({
+}, pe = /* @__PURE__ */ b({
   __name: "SpicyAlert",
   props: {
     variant: { default: "info" },
@@ -16,52 +75,52 @@ const le = ["aria-label"], ae = {
     autoClose: { default: 0 }
   },
   setup(e) {
-    const t = e, o = S(!0), a = () => {
-      o.value = !1;
+    const o = e, s = S(!0), l = () => {
+      s.value = !1;
     };
-    return Y(
-      () => t.autoClose,
-      (l) => {
-        l && l > 0 && setTimeout(() => {
-          a();
-        }, l);
+    return x(
+      () => o.autoClose,
+      (t) => {
+        t && t > 0 && setTimeout(() => {
+          l();
+        }, t);
       }
-    ), (l, s) => (r(), X(P, { name: "fade" }, {
-      default: A(() => [
-        o.value ? (r(), c("div", {
+    ), (t, a) => (r(), J(D, { name: "fade" }, {
+      default: M(() => [
+        s.value ? (r(), c("div", {
           key: 0,
-          class: C(["spicyAlert", l.variant]),
+          class: k(["spicyAlert", t.variant]),
           "aria-atomic": "true",
-          "aria-label": l.text,
+          "aria-label": t.text,
           role: "alert",
-          onKeydown: M(a, ["enter"])
+          onKeydown: P(l, ["enter"])
         }, [
-          l.iconOnly || l.text ? (r(), c("span", ae, v(l.icon), 1)) : f("", !0),
-          !l.iconOnly && l.text ? (r(), c("span", se, v(l.text), 1)) : f("", !0),
-          l.closable ? (r(), c("button", {
+          t.iconOnly || t.text ? (r(), c("span", ue, v(t.icon), 1)) : y("", !0),
+          !t.iconOnly && t.text ? (r(), c("span", de, v(t.text), 1)) : y("", !0),
+          t.closable ? (r(), c("button", {
             key: 2,
             class: "spicyAlertCloseBtn",
-            onClick: a,
+            onClick: l,
             "aria-label": "Close alert"
-          }, " X ")) : f("", !0),
-          m(l.$slots, "default")
-        ], 42, le)) : f("", !0)
+          }, " X ")) : y("", !0),
+          g(t.$slots, "default")
+        ], 42, ce)) : y("", !0)
       ]),
       _: 3
     }));
   }
-}), ie = ["disabled", "aria-label", "aria-disabled", "tabindex"], re = {
+}), ye = ["disabled", "aria-label", "aria-disabled", "tabindex"], fe = {
   key: 0,
   class: "spicyBtnIcon spicyMDI",
   viewBox: "0 0 24 24",
   xmlns: "http://www.w3.org/2000/svg"
-}, ce = ["d"], ue = {
+}, he = ["d"], ve = {
   key: 1,
   class: "spicyBtnIcon"
-}, de = {
+}, me = {
   key: 2,
   class: "spicyBtnText"
-}, pe = /* @__PURE__ */ b({
+}, ge = /* @__PURE__ */ b({
   __name: "SpicyBtn",
   props: {
     variant: { default: "filled" },
@@ -77,53 +136,56 @@ const le = ["aria-label"], ae = {
     fontWeight: { default: 500 }
   },
   emits: ["click"],
-  setup(e, { emit: t }) {
-    const o = e, a = g(() => ({
-      "--skFontSize": typeof o.fontSize == "number" ? `${o.fontSize}px` : o.fontSize,
-      "--skFontWeight": o.fontWeight,
-      "--skBgColor": o.bgColor,
-      "--skTextColor": o.textColor,
-      "--skBorderColor": o.borderColor,
-      "--hoverColor": o.hoverColor
-    })), l = g(() => !o.text && (o.icon || o.mdi));
-    return (s, u) => {
-      const i = q("spicyRipple");
-      return D((r(), c("button", {
-        class: C(["spicyBtn", { outlined: s.variant === "outlined", disabled: s.disabled, isRound: l.value }]),
-        style: k({ ...a.value }),
-        disabled: s.disabled,
-        onClick: u[0] || (u[0] = (d) => s.$emit("click")),
+  setup(e, { emit: o }) {
+    const s = o, l = () => {
+      s("click");
+    }, t = e, a = h(() => ({
+      "--skFontSize": typeof t.fontSize == "number" ? `${t.fontSize}px` : t.fontSize,
+      "--skFontWeight": t.fontWeight,
+      "--skBgColor": t.bgColor,
+      "--skTextColor": t.textColor,
+      "--skBorderColor": t.borderColor,
+      "--hoverColor": t.hoverColor
+    })), d = h(() => !t.text && (t.icon || t.mdi)), n = h(() => ({
+      spicyBtn: !0,
+      outlined: t.variant === "outlined",
+      disabled: t.disabled,
+      isRound: d.value
+    }));
+    return (u, i) => {
+      const f = Q("spicyRipple");
+      return z((r(), c("button", {
+        class: k(n.value),
+        style: C(a.value),
+        disabled: u.disabled,
+        onClick: l,
         role: "button",
-        "aria-label": s.text,
-        "aria-disabled": s.disabled,
-        tabindex: s.disabled ? -1 : 0
+        "aria-label": u.text,
+        "aria-disabled": u.disabled,
+        tabindex: u.disabled ? -1 : 0
       }, [
-        s.mdi ? (r(), c("svg", re, [
-          h("path", {
+        u.mdi ? (r(), c("svg", fe, [
+          p("path", {
             fill: "currentColor",
             class: "mdi-icon",
-            d: s.mdi
-          }, null, 8, ce)
-        ])) : f("", !0),
-        s.icon && !s.mdi ? (r(), c("span", ue, v(s.icon), 1)) : f("", !0),
-        s.text ? (r(), c("span", de, v(s.text), 1)) : f("", !0),
-        m(s.$slots, "default")
-      ], 14, ie)), [
-        [i]
+            d: u.mdi
+          }, null, 8, he)
+        ])) : y("", !0),
+        u.icon && !u.mdi ? (r(), c("span", ve, v(u.icon), 1)) : y("", !0),
+        u.text ? (r(), c("span", me, v(u.text), 1)) : y("", !0),
+        g(u.$slots, "default")
+      ], 14, ye)), [
+        [f]
       ]);
     };
   }
-}), fe = ["aria-label"], ye = { class: "spicyCarouselInfoText" }, he = { class: "spicyCarouselTitle" }, ve = { key: 0 }, me = {
+}), be = ["aria-label"], ke = { class: "spicyCarouselInfoText" }, Se = { class: "spicyCarouselTitle" }, Ce = { key: 0 }, we = {
   key: 0,
   class: "spicyCarouselNavControls"
-}, ge = /* @__PURE__ */ h("span", { class: "spicyCarouselPrevBtnIcon" }, "<", -1), be = [
-  ge
-], Ce = /* @__PURE__ */ h("span", { class: "spicyCarouselNextBtnIcon" }, ">", -1), Se = [
-  Ce
-], ke = {
+}, $e = {
   key: 1,
   class: "spicyCarouselPagination"
-}, we = ["onClick"], $e = { class: "spicyCarouselPage" }, _e = /* @__PURE__ */ b({
+}, _e = ["onClick"], Be = { class: "spicyCarouselPage" }, Te = /* @__PURE__ */ b({
   __name: "SpicyCarousel",
   props: {
     autoplay: { type: Boolean, default: !1 },
@@ -140,102 +202,106 @@ const le = ["aria-label"], ae = {
     enableImageClick: { type: Boolean, default: !1 }
   },
   setup(e) {
-    let t, o, a = !1;
-    const l = e, s = g(() => ({
-      "--width": l.width,
-      "--height": l.height,
-      "--activeColor": l.activeColor
-    })), u = g(() => {
-      var y;
-      return (y = l.slides[d.value]) == null ? void 0 : y.title;
-    }), i = g(() => n.value.fullScreen === !1 ? !1 : l.fullScreen), d = S(l.initialSlide), n = g(() => l.slides[d.value]);
-    let p;
-    const $ = () => {
-      d.value = (d.value - 1 + l.slides.length) % l.slides.length;
-    }, _ = () => {
-      d.value = (d.value + 1) % l.slides.length;
-    }, U = (y) => {
-      d.value = y;
-    }, O = () => {
-      p && clearInterval(p);
+    let o, s, l = !1;
+    const t = e, a = h(() => ({
+      "--width": t.width,
+      "--height": t.height,
+      "--activeColor": t.activeColor
+    })), d = h(() => {
+      var m;
+      return (m = t.slides[u.value]) == null ? void 0 : m.title;
+    }), n = h(() => i.value.fullScreen === !1 ? !1 : t.fullScreen), u = S(t.initialSlide), i = h(() => t.slides[u.value]);
+    let f;
+    const _ = () => {
+      u.value = (u.value - 1 + t.slides.length) % t.slides.length;
+    }, T = () => {
+      u.value = (u.value + 1) % t.slides.length;
+    }, K = (m) => {
+      u.value = m;
     }, V = () => {
-      l.autoplay && (p = window.setInterval(_, l.autoplaySpeed));
-    }, W = () => {
-      window.open(n.value.img);
-    }, H = () => {
-      l.enableImageClick && W();
-    }, j = (y) => {
-      t = y.touches[0].clientX, o = y.touches[0].clientY, a = !1;
-    }, K = (y) => {
-      if (!a) {
-        const B = y.touches[0].clientX - t, F = y.touches[0].clientY - o;
-        Math.abs(B) > Math.abs(F) && (B > 40 ? ($(), a = !0) : B < -40 && (_(), a = !0));
+      f && clearInterval(f);
+    }, F = () => {
+      t.autoplay && (f = window.setInterval(T, t.autoplaySpeed));
+    }, X = () => {
+      window.open(i.value.img);
+    }, U = () => {
+      t.enableImageClick && X();
+    }, j = (m) => {
+      o = m.touches[0].clientX, s = m.touches[0].clientY, l = !1;
+    }, q = (m) => {
+      if (!l) {
+        const w = m.touches[0].clientX - o, L = m.touches[0].clientY - s;
+        Math.abs(w) > Math.abs(L) && (w > 40 ? (_(), l = !0) : w < -40 && (T(), l = !0));
       }
     };
-    return G(() => {
+    return Z(() => {
+      F();
+    }), ee(() => {
       V();
-    }), J(() => {
-      O();
-    }), (y, B) => (r(), c("div", {
+    }), (m, w) => (r(), c("div", {
       class: "spicyCarouselWrapper",
-      style: k({ ...s.value })
+      style: C({ ...a.value })
     }, [
-      h("div", {
+      p("div", {
         class: "spicyCarouselContainer",
-        onMouseenter: O,
-        onMouseleave: V,
+        onMouseenter: V,
+        onMouseleave: F,
         onTouchstart: j,
-        onTouchmove: K
+        onTouchmove: q
       }, [
-        Q(P, {
+        A(D, {
           name: "slide",
           mode: "out-in"
         }, {
-          default: A(() => [
+          default: M(() => [
             (r(), c("div", {
-              class: C(["spicyCarouselSlide", { pointCursor: l.enableImageClick }]),
-              key: d.value,
-              style: k({ backgroundImage: `url(${n.value.img})` }),
-              onClick: H
+              class: k(["spicyCarouselSlide", { pointCursor: t.enableImageClick }]),
+              key: u.value,
+              style: C({ backgroundImage: `url(${i.value.img})` }),
+              onClick: U
             }, [
-              y.slides[d.value].text ? (r(), c("div", {
+              m.slides[u.value].text ? (r(), c("div", {
                 key: 0,
-                class: C(["spicyCarouselTextOverlay", { fullScreen: i.value }]),
-                "aria-label": y.slides[d.value].text
+                class: k(["spicyCarouselTextOverlay", { fullScreen: n.value }]),
+                "aria-label": m.slides[u.value].text
               }, [
-                h("span", ye, v(y.slides[d.value].text), 1)
-              ], 10, fe)) : f("", !0),
-              m(y.$slots, "default")
+                p("span", ke, v(m.slides[u.value].text), 1)
+              ], 10, be)) : y("", !0),
+              g(m.$slots, "default")
             ], 6))
           ]),
           _: 3
         })
       ], 32),
-      h("div", he, [
-        u.value ? (r(), c("h2", ve, v(n.value.title), 1)) : f("", !0)
+      p("div", Se, [
+        d.value ? (r(), c("h2", Ce, v(i.value.title), 1)) : y("", !0)
       ]),
-      y.showNavigation ? (r(), c("div", me, [
-        h("button", {
+      m.showNavigation ? (r(), c("div", we, [
+        p("button", {
           class: "spicyCarouselPrevBtn",
-          onClick: $
-        }, be),
-        h("button", {
-          class: "spicyCarouselNextBtn",
           onClick: _
-        }, Se)
-      ])) : f("", !0),
-      y.showPagination ? (r(), c("div", ke, [
-        (r(!0), c(E, null, z(y.slides, (F, T) => (r(), c("button", {
-          key: T,
-          onClick: (yt) => U(T),
-          class: C(["spicyCarouselPageBtn", { active: T === d.value }])
+        }, w[0] || (w[0] = [
+          p("span", { class: "spicyCarouselPrevBtnIcon" }, "<", -1)
+        ])),
+        p("button", {
+          class: "spicyCarouselNextBtn",
+          onClick: T
+        }, w[1] || (w[1] = [
+          p("span", { class: "spicyCarouselNextBtnIcon" }, ">", -1)
+        ]))
+      ])) : y("", !0),
+      m.showPagination ? (r(), c("div", $e, [
+        (r(!0), c(B, null, O(m.slides, (L, I) => (r(), c("button", {
+          key: I,
+          onClick: (Dt) => K(I),
+          class: k(["spicyCarouselPageBtn", { active: I === u.value }])
         }, [
-          h("span", $e, v(T + 1), 1)
-        ], 10, we))), 128))
-      ])) : f("", !0)
+          p("span", Be, v(I + 1), 1)
+        ], 10, _e))), 128))
+      ])) : y("", !0)
     ], 4));
   }
-}), Be = /* @__PURE__ */ b({
+}), De = /* @__PURE__ */ b({
   __name: "SpicyDivider",
   props: {
     variant: { default: "solid" },
@@ -244,23 +310,80 @@ const le = ["aria-label"], ae = {
     bgColor: { default: "#5f5f5f" }
   },
   setup(e) {
-    const t = e, o = g(() => ({
-      width: t.width,
-      borderBottom: `${t.height} ${t.variant} ${t.bgColor}`
+    const o = e, s = h(() => ({
+      width: o.width,
+      borderBottom: `${o.height} ${o.variant} ${o.bgColor}`
     }));
-    return (a, l) => (r(), c("div", {
+    return (l, t) => (r(), c("div", {
       class: "spicyDivider",
-      style: k(o.value),
+      style: C(s.value),
       role: "separator",
       "aria-orientation": "horizontal"
     }, [
-      m(a.$slots, "default")
+      g(l.$slots, "default")
     ], 4));
   }
-}), Te = ["aria-label"], Me = ["placeholder", "aria-label"], De = {
+}), Me = ["width", "height"], Ie = ["d"], Oe = ["width", "height"], Ae = /* @__PURE__ */ b({
+  __name: "SpicyDropdown",
+  props: {
+    label: {},
+    align: { default: "left" },
+    width: { default: "200px" },
+    icon: { default: "" },
+    iconSize: { default: "24px" }
+  },
+  setup(e) {
+    const o = e, s = S(!1), l = () => {
+      s.value = !s.value;
+    }, t = h(() => ({
+      width: o.width,
+      textAlign: o.align
+    }));
+    return (a, d) => (r(), c("div", {
+      class: k(["spicyDropdown", { open: s.value }])
+    }, [
+      p("button", {
+        onClick: l,
+        class: "spicyDropdownButton"
+      }, [
+        a.icon ? (r(), c("svg", {
+          key: 0,
+          width: a.iconSize,
+          height: a.iconSize,
+          viewBox: "0 0 24 24",
+          class: "dropdownIcon"
+        }, [
+          p("path", { d: a.icon }, null, 8, Ie)
+        ], 8, Me)) : y("", !0),
+        E(" " + v(a.label) + " ", 1),
+        a.icon === "" ? (r(), c("svg", {
+          key: 1,
+          width: a.iconSize,
+          height: a.iconSize,
+          viewBox: "0 0 24 24",
+          class: k(["arrow", { open: s.value }])
+        }, d[0] || (d[0] = [
+          p("path", { d: "M7 10l5 5 5-5H7z" }, null, -1)
+        ]), 10, Oe)) : y("", !0)
+      ]),
+      A(D, { name: "fade" }, {
+        default: M(() => [
+          s.value ? (r(), c("div", {
+            key: 0,
+            class: "spicyDropdownMenu",
+            style: C(t.value)
+          }, [
+            g(a.$slots, "default")
+          ], 4)) : y("", !0)
+        ]),
+        _: 3
+      })
+    ], 2));
+  }
+}), ze = ["aria-label"], Pe = ["placeholder", "aria-label"], Ve = {
   key: 0,
   class: "spicyInputError"
-}, Ie = /* @__PURE__ */ b({
+}, Fe = /* @__PURE__ */ b({
   __name: "SpicyLabel",
   props: {
     value: { default: "" },
@@ -270,39 +393,39 @@ const le = ["aria-label"], ae = {
     variant: { default: "filled" }
   },
   setup(e) {
-    const o = S(e.value), a = S(!1), l = (i) => {
-      const d = i.target;
-      o.value = d.value;
-    }, s = () => {
-      a.value = !1;
-    }, u = () => {
-      a.value = !0;
+    const s = S(e.value), l = S(!1), t = (n) => {
+      const u = n.target;
+      s.value = u.value;
+    }, a = () => {
+      l.value = !1;
+    }, d = () => {
+      l.value = !0;
     };
-    return (i, d) => (r(), c("div", {
-      class: C(["spicyInputWrapper", [i.variant, { hasValue: o.value || i.value, hasFocus: a.value, hasError: i.error }]])
+    return (n, u) => (r(), c("div", {
+      class: k(["spicyInputWrapper", [n.variant, { hasValue: s.value || n.value, hasFocus: l.value, hasError: n.error }]])
     }, [
-      h("label", {
+      p("label", {
         class: "spicyInputLabel",
-        "aria-label": i.label
-      }, v(i.label), 9, Te),
-      D(h("input", {
+        "aria-label": n.label
+      }, v(n.label), 9, ze),
+      z(p("input", {
         type: "text",
         name: "spicyInput",
-        class: C(["spicyInput", i.variant]),
-        "onUpdate:modelValue": d[0] || (d[0] = (n) => o.value = n),
-        placeholder: i.placeholder,
-        onInput: l,
-        onBlur: s,
-        onFocus: u,
-        "aria-label": i.label
-      }, null, 42, Me), [
-        [x, o.value]
+        class: k(["spicyInput", n.variant]),
+        "onUpdate:modelValue": u[0] || (u[0] = (i) => s.value = i),
+        placeholder: n.placeholder,
+        onInput: t,
+        onBlur: a,
+        onFocus: d,
+        "aria-label": n.label
+      }, null, 42, Pe), [
+        [R, s.value]
       ]),
-      m(i.$slots, "default"),
-      i.error ? (r(), c("span", De, v(i.error), 1)) : f("", !0)
+      g(n.$slots, "default"),
+      n.error ? (r(), c("span", Ve, v(n.error), 1)) : y("", !0)
     ], 2));
   }
-}), Oe = { class: "spicyModalHeader" }, Ve = { class: "spicyModalActions" }, Fe = ["onClick"], Le = /* @__PURE__ */ b({
+}), Le = { class: "spicyModalHeader" }, Ye = { class: "spicyModalActions" }, xe = ["onClick"], Ee = /* @__PURE__ */ b({
   __name: "SpicyModal",
   props: {
     width: { default: "400px" },
@@ -317,71 +440,140 @@ const le = ["aria-label"], ae = {
     textColor: { default: "" }
   },
   emits: ["update:visible"],
-  setup(e, { emit: t }) {
-    const o = e, a = g(() => ({
-      "--width": o.width,
-      "--height": o.height,
-      "--skBorderRadius": o.borderRadius,
-      "--skBgColor": o.bgColor,
-      "--skTextColor": o.textColor
-    })), l = t, s = () => {
-      l("update:visible", !1);
-    }, u = (i) => {
-      const d = i.target;
-      o.closeOnClick && d.classList.contains("spicyModalOverlay") && s();
+  setup(e, { emit: o }) {
+    const s = e, l = h(() => ({
+      "--width": s.width,
+      "--height": s.height,
+      "--skBorderRadius": s.borderRadius,
+      "--skBgColor": s.bgColor,
+      "--skTextColor": s.textColor
+    })), t = o, a = () => {
+      t("update:visible", !1);
+    }, d = (n) => {
+      const u = n.target;
+      s.closeOnClick && u.classList.contains("spicyModalOverlay") && a();
     };
-    return (i, d) => i.visible ? (r(), c("div", {
+    return (n, u) => n.visible ? (r(), c("div", {
       key: 0,
       class: "spicyModalOverlay",
-      onClick: u
+      onClick: d
     }, [
-      h("div", {
+      p("div", {
         class: "spicyModal",
-        style: k({ ...a.value })
+        style: C({ ...l.value })
       }, [
-        h("header", Oe, [
-          m(i.$slots, "spicyModalHeader", {
-            title: i.modalTitle,
-            ariaLabel: i.modalTitle
+        p("header", Le, [
+          g(n.$slots, "spicyModalHeader", {
+            title: n.modalTitle,
+            ariaLabel: n.modalTitle
           }, () => [
-            Z(v(i.modalTitle), 1)
+            E(v(n.modalTitle), 1)
           ])
         ]),
-        m(i.$slots, "default"),
-        h("div", Ve, [
-          m(i.$slots, "spicyModalActions"),
-          i.actions.length === 0 && i.closeBtn ? (r(), c("button", {
+        g(n.$slots, "default"),
+        p("div", Ye, [
+          g(n.$slots, "spicyModalActions"),
+          n.actions.length === 0 && n.closeBtn ? (r(), c("button", {
             key: 0,
             class: "spicyModalCloseBtn spicyModalActionBtn",
-            onClick: s
-          }, " Close ")) : f("", !0),
-          (r(!0), c(E, null, z(i.actions, (n) => (r(), c("button", {
+            onClick: a
+          }, " Close ")) : y("", !0),
+          (r(!0), c(B, null, O(n.actions, (i) => (r(), c("button", {
             class: "spicyModalExtraBtn spicyModalActionBtn",
-            key: n.label,
-            onClick: n.handler
-          }, v(n.label), 9, Fe))), 128))
+            key: i.label,
+            onClick: i.handler
+          }, v(i.label), 9, xe))), 128))
         ])
       ], 4)
-    ])) : f("", !0);
+    ])) : y("", !0);
+  }
+}), Re = {
+  key: 0,
+  class: "spicyProgress"
+}, We = {
+  key: 0,
+  class: "spicyProgressLabel"
+}, Ne = {
+  key: 1,
+  class: "spicyProgressCircular"
+}, He = ["width", "height"], Ke = ["stroke-width", "r", "cx", "cy"], Xe = ["stroke", "stroke-width", "r", "cx", "cy"], Ue = {
+  key: 0,
+  class: "spicyCircularLabel"
+}, je = /* @__PURE__ */ b({
+  __name: "SpicyProgress",
+  props: {
+    value: {},
+    max: { default: 100 },
+    color: { default: "#4caf50" },
+    height: { default: "8px" },
+    strokeWidth: { default: 8 },
+    type: { default: "linear" },
+    showLabel: { type: Boolean, default: !1 },
+    size: { default: 100 }
+  },
+  setup(e) {
+    const o = e, s = h(() => Math.round(o.value / o.max * 100)), l = h(() => o.type === "linear"), t = h(() => ({
+      width: `${s.value}%`,
+      backgroundColor: o.color,
+      height: o.height
+    })), a = h(() => o.size / 2), d = h(() => (o.size - o.strokeWidth) / 2), n = h(() => 2 * Math.PI * d.value), u = h(() => ({
+      strokeDasharray: `${n.value} ${n.value}`,
+      strokeDashoffset: `${n.value - s.value / 100 * n.value}`,
+      transition: "stroke-dashoffset 400ms ease"
+    }));
+    return (i, f) => (r(), c(B, null, [
+      l.value ? (r(), c("div", Re, [
+        p("div", {
+          class: "spicyProgressBar",
+          style: C(t.value)
+        }, null, 4),
+        i.showLabel ? (r(), c("div", We, v(s.value) + "%", 1)) : y("", !0)
+      ])) : (r(), c("div", Ne, [
+        (r(), c("svg", {
+          class: "spicyCircularSvg",
+          width: i.size,
+          height: i.size
+        }, [
+          p("circle", {
+            class: "spicyCircularTrack",
+            "stroke-width": i.strokeWidth,
+            r: d.value,
+            cx: a.value,
+            cy: a.value
+          }, null, 8, Ke),
+          p("circle", {
+            class: "spicyCircularProgress",
+            stroke: i.color,
+            "stroke-width": i.strokeWidth,
+            r: d.value,
+            cx: a.value,
+            cy: a.value,
+            style: C(u.value)
+          }, null, 12, Xe)
+        ], 8, He)),
+        i.showLabel ? (r(), c("div", Ue, v(s.value) + "%", 1)) : y("", !0)
+      ])),
+      g(i.$slots, "default")
+    ], 64));
   }
-}), Ye = /* @__PURE__ */ b({
+}), qe = /* @__PURE__ */ b({
   __name: "SpicySheet",
   props: {
-    isRounded: { type: Boolean, default: !1 },
+    isRound: { type: Boolean, default: !1 },
     color: { default: "" }
   },
   setup(e) {
-    const t = e, o = g(() => ({
-      "--color": t.color || "transparent"
+    const o = e, s = h(() => ({
+      "--color": o.color || "transparent"
     }));
-    return (a, l) => (r(), c("div", {
-      class: C(["spicySheet", { isRound: a.isRounded }]),
-      style: k({ ...o.value })
+    return (l, t) => (r(), c("div", {
+      class: k(["spicySheet", { isRound: l.isRound }]),
+      style: C({ ...s.value })
     }, [
-      m(a.$slots, "default")
+      g(l.$slots, "default")
     ], 6));
   }
-}), Pe = { class: "spicySlider" }, Ae = ["aria-label"], Ee = ["min", "max", "step"], ze = /* @__PURE__ */ b({
+}), Ge = { class: "spicySlider" }, Je = ["aria-label"], Qe = ["min", "max", "step"], Ze = /* @__PURE__ */ b({
   __name: "SpicySlider",
   props: {
     min: { default: 0 },
@@ -391,42 +583,100 @@ const le = ["aria-label"], ae = {
     modelValue: { default: 0 }
   },
   emits: ["update:modelValue"],
-  setup(e, { emit: t }) {
-    const o = e, a = t, l = S(o.modelValue);
-    Y(
-      () => o.modelValue,
-      (u) => {
-        l.value = u;
+  setup(e, { emit: o }) {
+    const s = e, l = o, t = S(s.modelValue);
+    x(
+      () => s.modelValue,
+      (d) => {
+        t.value = d;
       }
     );
-    const s = (u) => {
-      const i = u.target;
-      a("update:modelValue", Number(i.value));
+    const a = (d) => {
+      const n = d.target;
+      l("update:modelValue", Number(n.value));
     };
-    return (u, i) => (r(), c("div", Pe, [
-      u.label ? (r(), c("label", {
+    return (d, n) => (r(), c("div", Ge, [
+      d.label ? (r(), c("label", {
         key: 0,
         class: "spicySliderLabel",
-        "aria-label": u.label
-      }, v(u.label), 9, Ae)) : f("", !0),
-      D(h("input", {
+        "aria-label": d.label
+      }, v(d.label), 9, Je)) : y("", !0),
+      z(p("input", {
         name: "spicySliderInput",
         class: "spicySliderInput",
         type: "range",
-        min: u.min,
-        max: u.max,
-        step: u.step,
-        "onUpdate:modelValue": i[0] || (i[0] = (d) => l.value = d),
-        onInput: s
-      }, null, 40, Ee), [
-        [x, l.value]
+        min: d.min,
+        max: d.max,
+        step: d.step,
+        "onUpdate:modelValue": n[0] || (n[0] = (u) => t.value = u),
+        onInput: a
+      }, null, 40, Qe), [
+        [R, t.value]
       ]),
-      m(u.$slots, "default")
+      g(d.$slots, "default")
     ]));
   }
-}), xe = ["tabindex", "aria-label", "aria-checked", "onKeydown"], Re = /* @__PURE__ */ h("div", { class: "spicyToggleKnob" }, null, -1), Ne = [
-  Re
-], Ue = /* @__PURE__ */ b({
+}), et = { class: "spicyTabsHeader" }, tt = ["onClick"], ot = {
+  key: 0,
+  class: "spicyTabsContent"
+}, st = /* @__PURE__ */ b({
+  __name: "SpicyTabs",
+  props: {
+    layout: { default: "horizontal" },
+    tabs: {}
+  },
+  setup(e) {
+    var d;
+    const o = e, s = S(((d = o.tabs[0]) == null ? void 0 : d.name) || ""), l = h(() => {
+      var n;
+      return (n = o.tabs.find((u) => u.name === s.value)) == null ? void 0 : n.name;
+    }), t = (n) => {
+      s.value = n;
+    }, a = h(() => o.layout === "vertical" ? "vertical" : "horizontal");
+    return (n, u) => (r(), c("div", {
+      class: k(["spicyTabs", a.value])
+    }, [
+      p("div", et, [
+        (r(!0), c(B, null, O(n.tabs, (i) => (r(), c("button", {
+          key: i.name,
+          class: k(["tabButton", { active: s.value === i.name }]),
+          onClick: (f) => t(i.name)
+        }, v(i.label), 11, tt))), 128))
+      ]),
+      A(D, { name: "fade" }, {
+        default: M(() => [
+          l.value ? (r(), c("div", ot, [
+            g(n.$slots, l.value)
+          ])) : y("", !0)
+        ]),
+        _: 3
+      })
+    ], 2));
+  }
+}), lt = /* @__PURE__ */ b({
+  __name: "SpicyTextarea",
+  props: {
+    border: { default: "1px solid var(--skBorderColor, #515353)" },
+    isRound: { type: Boolean, default: !1 },
+    padding: { default: "8px" },
+    color: { default: "#4e4e4e" }
+  },
+  setup(e) {
+    const o = e, s = h(() => ({
+      borderRadius: o.isRound ? "16px" : "2px",
+      border: o.border,
+      padding: o.padding,
+      backgroundColor: o.color
+    }));
+    return (l, t) => (r(), c(B, null, [
+      p("textarea", W({
+        class: "spicyTextArea",
+        style: s.value
+      }, l.$attrs), null, 16),
+      g(l.$slots, "default")
+    ], 64));
+  }
+}), at = ["tabindex", "aria-label", "aria-checked", "onKeydown"], nt = /* @__PURE__ */ b({
   __name: "SpicyToggle",
   props: {
     modelValue: { type: Boolean, default: !1 },
@@ -437,34 +687,36 @@ const le = ["aria-label"], ae = {
     disabled: { type: Boolean, default: !1 }
   },
   emits: ["update:modelValue"],
-  setup(e, { emit: t }) {
-    const o = e, a = g(() => ({
-      "--skBorderColor": o.borderColor,
-      "--activeColor": o.activeColor
-    })), l = t, s = () => {
-      l("update:modelValue", !o.modelValue);
+  setup(e, { emit: o }) {
+    const s = e, l = h(() => ({
+      "--skBorderColor": s.borderColor,
+      "--activeColor": s.activeColor
+    })), t = o, a = () => {
+      t("update:modelValue", !s.modelValue);
     };
-    return (u, i) => (r(), c("div", ee({
-      class: ["spicyToggle", { outlined: u.variant === "outlined", "is-active": u.modelValue }],
-      tabindex: u.disabled ? -1 : 0,
+    return (d, n) => (r(), c("div", W({
+      class: ["spicyToggle", { outlined: d.variant === "outlined", "is-active": d.modelValue }],
+      tabindex: d.disabled ? -1 : 0,
       role: "switch",
-      style: { ...a.value },
-      "aria-label": u.label,
-      "aria-checked": u.modelValue,
-      onClick: s,
+      style: { ...l.value },
+      "aria-label": d.label,
+      "aria-checked": d.modelValue,
+      onClick: a,
       onKeydown: [
-        M(L(s, ["prevent"]), ["space"]),
-        M(L(s, ["prevent"]), ["enter"])
+        P(Y(a, ["prevent"]), ["space"]),
+        P(Y(a, ["prevent"]), ["enter"])
       ]
-    }, u.$attrs), Ne, 16, xe));
+    }, d.$attrs), n[0] || (n[0] = [
+      p("div", { class: "spicyToggleKnob" }, null, -1)
+    ]), 16, at));
   }
-}), We = ["aria-hidden"], He = {
+}), it = ["aria-hidden"], rt = {
   key: 0,
   class: "spicyTooltipIcon"
-}, je = ["aria-label"], Ke = {
+}, ct = ["aria-label"], ut = {
   key: 2,
   class: "spicyTooltipIcon"
-}, Xe = /* @__PURE__ */ b({
+}, dt = /* @__PURE__ */ b({
   __name: "SpicyTooltip",
   props: {
     text: { default: "" },
@@ -473,260 +725,231 @@ const le = ["aria-label"], ae = {
     position: { default: "top" }
   },
   setup(e) {
-    const t = e, o = S(!1), a = S(null), l = te({
+    const o = e, s = S(!1), l = S(null), t = te({
       position: "absolute",
       top: "0px",
       left: "0px",
       maxWidth: "175px"
-    }), s = (n) => {
-      const p = n.right - window.innerWidth;
-      p > 0 && (l.left = `${parseInt(l.left) - p - 5}px`), n.left < 0 && (l.left = "5px");
-    }, u = {
-      top: (n, p) => {
-        l.left = `${n.left + (n.width - p.width) / 2}px`, l.top = `${n.top - p.height - 5}px`;
+    }), a = (i) => {
+      const f = i.right - window.innerWidth;
+      f > 0 && (t.left = `${parseInt(t.left) - f - 5}px`), i.left < 0 && (t.left = "5px");
+    }, d = {
+      top: (i, f) => {
+        t.left = `${i.left + (i.width - f.width) / 2}px`, t.top = `${i.top - f.height - 5}px`;
       },
-      bottom: (n, p) => {
-        l.left = `${n.left + (n.width - p.width) / 2}px`, l.top = `${n.bottom + 5}px`;
+      bottom: (i, f) => {
+        t.left = `${i.left + (i.width - f.width) / 2}px`, t.top = `${i.bottom + 5}px`;
       },
-      left: (n, p) => {
-        l.left = `${n.left - p.width - 5}px`, l.top = `${n.top + (n.height - p.height) / 2}px`;
+      left: (i, f) => {
+        t.left = `${i.left - f.width - 5}px`, t.top = `${i.top + (i.height - f.height) / 2}px`;
       },
-      right: (n, p) => {
-        l.left = `${n.right + 5}px`, l.top = `${n.top + (n.height - p.height) / 2}px`;
+      right: (i, f) => {
+        t.left = `${i.right + 5}px`, t.top = `${i.top + (i.height - f.height) / 2}px`;
       }
-    }, i = () => {
-      o.value = !0, oe(() => {
-        if (a.value && o.value) {
-          const n = a.value.getBoundingClientRect(), p = a.value.querySelector(".spicyTooltip");
-          if (p) {
-            const $ = p.getBoundingClientRect(), _ = u[t.position];
-            _(n, $), s($);
+    }, n = () => {
+      s.value = !0, oe(() => {
+        if (l.value && s.value) {
+          const i = l.value.getBoundingClientRect(), f = l.value.querySelector(".spicyTooltip");
+          if (f) {
+            const _ = f.getBoundingClientRect(), T = d[o.position];
+            T(i, _), a(_);
           }
         }
       });
-    }, d = () => {
-      o.value = !1;
+    }, u = () => {
+      s.value = !1;
     };
-    return (n, p) => (r(), c("div", {
-      onMouseover: i,
-      onMouseleave: d,
+    return (i, f) => (r(), c("div", {
+      onMouseover: n,
+      onMouseleave: u,
       ref_key: "host",
-      ref: a
+      ref: l
     }, [
-      m(n.$slots, "default"),
-      o.value ? (r(), c("div", {
+      g(i.$slots, "default"),
+      s.value ? (r(), c("div", {
         key: 0,
         class: "spicyTooltip",
-        style: k(l),
+        style: C(t),
         role: "tooltip",
-        "aria-hidden": !o.value
+        "aria-hidden": !s.value
       }, [
-        n.prependIcon ? (r(), c("span", He, v(n.prependIcon), 1)) : f("", !0),
-        n.text ? (r(), c("span", {
+        i.prependIcon ? (r(), c("span", rt, v(i.prependIcon), 1)) : y("", !0),
+        i.text ? (r(), c("span", {
           key: 1,
           class: "spicyTooltipText",
-          "aria-label": n.text
-        }, v(n.text), 9, je)) : f("", !0),
-        n.appendIcon ? (r(), c("span", Ke, v(n.appendIcon), 1)) : f("", !0)
-      ], 12, We)) : f("", !0)
+          "aria-label": i.text
+        }, v(i.text), 9, ct)) : y("", !0),
+        i.appendIcon ? (r(), c("span", ut, v(i.appendIcon), 1)) : y("", !0)
+      ], 12, it)) : y("", !0)
     ], 544));
   }
 });
-function R(e, t) {
-  const o = {
+function N(e, o) {
+  const s = {
     YYYY: () => e.getFullYear().toString(),
     MM: () => (e.getMonth() + 1).toString().padStart(2, "0"),
     DD: () => e.getDate().toString().padStart(2, "0")
   };
-  return t.replace(/YYYY|MM|DD/g, (a) => o[a]());
+  return o.replace(/YYYY|MM|DD/g, (l) => s[l]());
 }
-function qe(e) {
-  const [t, o, a] = e.split("-");
-  return new Date(Number(t), Number(o) - 1, Number(a));
+function pt(e) {
+  const [o, s, l] = e.split("-");
+  return new Date(Number(o), Number(s) - 1, Number(l));
 }
-function Ge(e, t) {
-  const o = Math.abs(t.getTime() - e.getTime());
-  return Math.ceil(o / (1e3 * 60 * 60 * 24));
+function yt(e, o) {
+  const s = Math.abs(o.getTime() - e.getTime());
+  return Math.ceil(s / (1e3 * 60 * 60 * 24));
 }
-function Je(e, t) {
-  const o = new Date(e);
-  return o.setDate(e.getDate() + t), o;
+function ft(e, o) {
+  const s = new Date(e);
+  return s.setDate(e.getDate() + o), s;
 }
-function Qe(e, t) {
-  const o = new Date(e);
-  return o.setDate(e.getDate() - t), o;
+function ht(e, o) {
+  const s = new Date(e);
+  return s.setDate(e.getDate() - o), s;
 }
-function Ze(e) {
-  const t = /* @__PURE__ */ new Date();
-  return e.getDate() === t.getDate() && e.getMonth() === t.getMonth() && e.getFullYear() === t.getFullYear();
+function vt(e) {
+  const o = /* @__PURE__ */ new Date();
+  return e.getDate() === o.getDate() && e.getMonth() === o.getMonth() && e.getFullYear() === o.getFullYear();
 }
-function et(e) {
-  const t = /* @__PURE__ */ new Date();
-  return t.setDate(t.getDate() - 1), e.getDate() === t.getDate() && e.getMonth() === t.getMonth() && e.getFullYear() === t.getFullYear();
+function mt(e) {
+  const o = /* @__PURE__ */ new Date();
+  return o.setDate(o.getDate() - 1), e.getDate() === o.getDate() && e.getMonth() === o.getMonth() && e.getFullYear() === o.getFullYear();
 }
-function tt(e) {
-  const t = /* @__PURE__ */ new Date();
-  return t.setDate(t.getDate() + 1), e.getDate() === t.getDate() && e.getMonth() === t.getMonth() && e.getFullYear() === t.getFullYear();
+function gt(e) {
+  const o = /* @__PURE__ */ new Date();
+  return o.setDate(o.getDate() + 1), e.getDate() === o.getDate() && e.getMonth() === o.getMonth() && e.getFullYear() === o.getFullYear();
 }
-function ot(e = "YYYY-MM-DD", t = { show: !0, separator: "-" }) {
-  if (typeof e != "string" || typeof t != "object" || !t.hasOwnProperty("show") || typeof t.show != "boolean")
+function bt(e = "YYYY-MM-DD", o = { show: !0, separator: "-" }) {
+  if (typeof e != "string" || typeof o != "object" || !o.hasOwnProperty("show") || typeof o.show != "boolean")
     throw new Error(
       'Invalid parameters: Please provide a valid format string and options object with a boolean "show" property.'
     );
-  let a = R(/* @__PURE__ */ new Date(), e);
-  return t.separator && t.separator !== "-" && (a = a.replace(/-/g, t.separator)), t.show ? { value: a, isVisible: !0 } : { value: a, isVisible: !1 };
+  let l = N(/* @__PURE__ */ new Date(), e);
+  return o.separator && o.separator !== "-" && (l = l.replace(/-/g, o.separator)), o.show ? { value: l, isVisible: !0 } : { value: l, isVisible: !1 };
 }
-const vt = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
+const It = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
   __proto__: null,
-  currentDate: ot,
-  dateAdd: Je,
-  dateDiff: Ge,
-  dateIsToday: Ze,
-  dateIsTomorrow: tt,
-  dateIsYesterday: et,
-  dateSubtract: Qe,
-  formatDate: R,
-  parseDate: qe
+  currentDate: bt,
+  dateAdd: ft,
+  dateDiff: yt,
+  dateIsToday: vt,
+  dateIsTomorrow: gt,
+  dateIsYesterday: mt,
+  dateSubtract: ht,
+  formatDate: N,
+  parseDate: pt
 }, Symbol.toStringTag, { value: "Module" }));
-function lt(e) {
-  const t = /* @__PURE__ */ new WeakMap();
-  function o(a) {
-    if (w(a) || typeof a != "object")
-      return a;
-    if (t.has(a))
-      return t.get(a);
-    const l = Array.isArray(a) ? [] : {};
-    t.set(a, l);
-    for (const s in a)
-      Object.prototype.hasOwnProperty.call(a, s) && (l[s] = o(a[s]));
-    return l;
+function kt(e) {
+  const o = /* @__PURE__ */ new WeakMap();
+  function s(l) {
+    if ($(l) || typeof l != "object")
+      return l;
+    if (o.has(l))
+      return o.get(l);
+    const t = Array.isArray(l) ? [] : {};
+    o.set(l, t);
+    for (const a in l)
+      Object.prototype.hasOwnProperty.call(l, a) && (t[a] = s(l[a]));
+    return t;
   }
-  return o(e);
+  return s(e);
 }
-function N(...e) {
-  const t = {};
-  return e.forEach((o) => {
-    if (!w(o)) {
-      for (const a in o)
-        if (Object.prototype.hasOwnProperty.call(o, a)) {
-          const l = o[a];
-          l !== void 0 && (typeof l == "object" && l !== null && !Array.isArray(l) ? t[a] = N(t[a] || {}, l) : t[a] = l);
+function H(...e) {
+  const o = {};
+  return e.forEach((s) => {
+    if (!$(s)) {
+      for (const l in s)
+        if (Object.prototype.hasOwnProperty.call(s, l)) {
+          const t = s[l];
+          t !== void 0 && (typeof t == "object" && t !== null && !Array.isArray(t) ? o[l] = H(o[l] || {}, t) : o[l] = t);
         }
     }
-  }), t;
+  }), o;
 }
-function at(...e) {
-  return w(e[0]) ? e[0] : Object.assign({}, ...e);
+function St(...e) {
+  return $(e[0]) ? e[0] : Object.assign({}, ...e);
 }
-function st(e) {
-  return w(e) ? [] : Object.keys(e);
+function Ct(e) {
+  return $(e) ? [] : Object.keys(e);
 }
-function nt(e) {
-  return w(e) ? [] : Object.values(e);
+function wt(e) {
+  return $(e) ? [] : Object.values(e);
 }
-function it(e) {
-  return w(e) ? [] : Object.entries(e);
+function $t(e) {
+  return $(e) ? [] : Object.entries(e);
 }
-function w(e) {
+function $(e) {
   return e === null || typeof e != "object" ? !1 : Array.isArray(e) ? e.length === 0 : Object.keys(e).length === 0;
 }
-const mt = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
-  __proto__: null,
-  deepClone: lt,
-  deepMerge: N,
-  getObjectEntries: it,
-  getObjectKeys: st,
-  getObjectValues: nt,
-  isObjectEmpty: w,
-  mergeObjects: at
-}, Symbol.toStringTag, { value: "Module" }));
-function I(e) {
-  try {
-    return new URL(e), !0;
-  } catch (t) {
-    return console.error("Invalid URL:", t), !1;
-  }
-}
-function rt(e) {
-  return I(e) ? new URL(e).hostname : null;
-}
-function ct(e, t) {
-  if (!I(e)) return e;
-  const o = new URL(e);
-  return Object.keys(t).forEach((a) => o.searchParams.append(a, t[a])), o.toString();
-}
-function ut(e, t, o = "https") {
-  if (!["http", "https", "ftp", "sftp", "ftps", "ssh"].includes(o.toLowerCase()))
-    throw new Error("Invalid protocol: " + o);
-  if (!/^(?!:\/\/)([a-z0-9-]+\.)*[a-z0-9-]+$/i.test(e))
-    throw new Error("Invalid hostname: " + e);
-  return t.startsWith("/") || (t = "/" + t), t.endsWith("/") && t.length > 1 && (t = t.slice(0, -1)), t === "/" && (t = ""), `${o.toLowerCase()}://${e}${t}`;
-}
-const gt = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
+const Ot = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
   __proto__: null,
-  appendParamsToUrl: ct,
-  generateUrl: ut,
-  getHostname: rt,
-  isUrlValid: I
-}, Symbol.toStringTag, { value: "Module" })), dt = ':root{--skBgColor: #28292a;--skBgSecondaryColor: #424344;--skBorderColor: #515353;--skPrimaryColor: #811faf;--skSecondaryColor: #0066b3;--skAccentColor: #004a77;--skHoverColor: #656769;--skTextColor: #ddd;--disabledOpacity: .5;--skLabelFocus: var(--skPrimaryColor);--skFontFamily: "Helvetica Neue", Helvetica, Arial, sans-serif;--skFontSize: 14px;--skFontWeight: 500;--skBorderWidth: 2px;--skBorderRadius: 4px}.spicyText{color:var(--skTextColor);font-family:var(--skFontFamily);font-size:var(--skFontSize)}.spicyHeader{color:var(--skTextColor);font-family:var(--skFontFamily);font-size:24px;font-weight:700}.spicyLink:hover{color:var(--skHoverColor)}.spicyLink:active{color:var(--skPrimaryColor)}.spicyLink:focus{color:var(--skLabelFocus)}.spicyLink:disabled{opacity:var(--disabledOpacity)}', pt = ".spicyRipple{position:absolute;border-radius:50%;background:currentColor;transform:scale(0);animation:spicy-ripple-animation .6s linear;pointer-events:none;z-index:1}@keyframes spicy-ripple-animation{to{transform:scale(4);opacity:0}}", ft = {
+  deepClone: kt,
+  deepMerge: H,
+  getObjectEntries: $t,
+  getObjectKeys: Ct,
+  getObjectValues: wt,
+  isObjectEmpty: $,
+  mergeObjects: St
+}, Symbol.toStringTag, { value: "Module" })), _t = ':root{--skBgColor: #28292a;--skBgSecondaryColor: #424344;--skBorderColor: #515353;--skPrimaryColor: #811faf;--skSecondaryColor: #0066b3;--skAccentColor: #004a77;--skHoverColor: #656769;--skTextColor: #ddd;--disabledOpacity: .5;--skLabelFocus: var(--skPrimaryColor);--skFontFamily: "Helvetica Neue", Helvetica, Arial, sans-serif;--skFontSize: 14px;--skFontWeight: 500;--skBorderWidth: 2px;--skBorderRadius: 4px}.spicyText{color:var(--skTextColor);font-family:var(--skFontFamily);font-size:var(--skFontSize)}.spicyHeader{color:var(--skTextColor);font-family:var(--skFontFamily);font-size:24px;font-weight:700}.spicyLink:hover{color:var(--skHoverColor)}.spicyLink:active{color:var(--skPrimaryColor)}.spicyLink:focus{color:var(--skLabelFocus)}.spicyLink:disabled{opacity:var(--disabledOpacity)}', Bt = ".spicyRipple{position:absolute;border-radius:50%;background:currentColor;transform:scale(0);animation:spicy-ripple-animation .6s linear;pointer-events:none;z-index:1}@keyframes spicy-ripple-animation{to{transform:scale(4);opacity:0}}", Tt = {
   beforeMount(e) {
-    e.style.position = "relative", e.style.overflow = "hidden", e.addEventListener("click", (t) => {
-      const o = document.createElement("span"), a = Math.max(e.clientWidth, e.clientHeight), l = a / 2;
-      o.style.width = o.style.height = `${a}px`, o.style.left = `${t.clientX - e.getBoundingClientRect().left - l}px`, o.style.top = `${t.clientY - e.getBoundingClientRect().top - l}px`, o.classList.add("spicyRipple");
-      const s = e.querySelector(".spicyRipple");
-      s && s.remove(), e.appendChild(o), o.addEventListener("animationend", () => {
-        o.remove();
+    e.style.position = "relative", e.style.overflow = "hidden", e.addEventListener("click", (o) => {
+      const s = document.createElement("span"), l = Math.max(e.clientWidth, e.clientHeight), t = l / 2;
+      s.style.width = s.style.height = `${l}px`, s.style.left = `${o.clientX - e.getBoundingClientRect().left - t}px`, s.style.top = `${o.clientY - e.getBoundingClientRect().top - t}px`, s.classList.add("spicyRipple");
+      const a = e.querySelector(".spicyRipple");
+      a && a.remove(), e.appendChild(s), s.addEventListener("animationend", () => {
+        s.remove();
       });
     });
   }
-}, bt = {
-  install(e, t = {}) {
-    const { useComponents: o = !0, useStyles: a = !0, useDirectives: l = !0 } = t;
-    if (o && (e.component("SpicyAlert", ne), e.component("SpicyBtn", pe), e.component("SpicyCarousel", _e), e.component("SpicyDivider", Be), e.component("SpicyLabel", Ie), e.component("SpicyModal", Le), e.component("SpicySheet", Ye), e.component("SpicySlider", ze), e.component("SpicyToggle", Ue), e.component("SpicyTooltip", Xe)), a) {
-      const s = document.createElement("style");
-      s.id = "SpicyStyles", s.textContent = dt, document.head.appendChild(s);
+}, At = {
+  install(e, o = {}) {
+    const { useComponents: s = !0, useStyles: l = !0, useDirectives: t = !0 } = o;
+    if (s && (e.component("SpicyAccordion", re), e.component("SpicyAlert", pe), e.component("SpicyBtn", ge), e.component("SpicyCarousel", Te), e.component("SpicyDivider", De), e.component("SpicyDropdown", Ae), e.component("SpicyLabel", Fe), e.component("SpicyModal", Ee), e.component("SpicyProgress", je), e.component("SpicySheet", qe), e.component("SpicySlider", Ze), e.component("SpicyTabs", st), e.component("SpicyTextarea", lt), e.component("SpicyToggle", nt), e.component("SpicyTooltip", dt)), l) {
+      const a = document.createElement("style");
+      a.id = "SpicyStyles", a.textContent = _t, document.head.appendChild(a);
     }
-    if (l) {
-      e.directive("spicyRipple", ft);
-      const s = document.createElement("style");
-      s.id = "SpicyRippleStyles", s.textContent = pt, document.head.appendChild(s);
+    if (t) {
+      e.directive("spicyRipple", Tt);
+      const a = document.createElement("style");
+      a.id = "SpicyRippleStyles", a.textContent = Bt, document.head.appendChild(a);
     }
   }
 };
 export {
-  ne as SpicyAlert,
-  pe as SpicyBtn,
-  _e as SpicyCarousel,
-  Be as SpicyDivider,
-  bt as SpicyKatsu,
-  Ie as SpicyLabel,
-  Le as SpicyModal,
-  Ye as SpicySheet,
-  ze as SpicySlider,
-  Ue as SpicyToggle,
-  Xe as SpicyTooltip,
-  ct as appendParamsToUrl,
-  ot as currentDate,
-  Je as dateAdd,
-  Ge as dateDiff,
-  Ze as dateIsToday,
-  tt as dateIsTomorrow,
-  et as dateIsYesterday,
-  Qe as dateSubtract,
-  vt as dateUtils,
-  lt as deepClone,
-  N as deepMerge,
-  R as formatDate,
-  ut as generateUrl,
-  rt as getHostname,
-  it as getObjectEntries,
-  st as getObjectKeys,
-  nt as getObjectValues,
-  w as isObjectEmpty,
-  I as isUrlValid,
-  at as mergeObjects,
-  mt as objUtils,
-  qe as parseDate,
-  ft as ripple,
-  gt as urlUtils
+  re as SpicyAccordion,
+  pe as SpicyAlert,
+  ge as SpicyBtn,
+  Te as SpicyCarousel,
+  De as SpicyDivider,
+  Ae as SpicyDropdown,
+  At as SpicyKatsu,
+  Fe as SpicyLabel,
+  Ee as SpicyModal,
+  je as SpicyProgress,
+  qe as SpicySheet,
+  Ze as SpicySlider,
+  st as SpicyTabs,
+  lt as SpicyTextarea,
+  nt as SpicyToggle,
+  dt as SpicyTooltip,
+  bt as currentDate,
+  ft as dateAdd,
+  yt as dateDiff,
+  vt as dateIsToday,
+  gt as dateIsTomorrow,
+  mt as dateIsYesterday,
+  ht as dateSubtract,
+  It as dateUtils,
+  kt as deepClone,
+  H as deepMerge,
+  N as formatDate,
+  $t as getObjectEntries,
+  Ct as getObjectKeys,
+  wt as getObjectValues,
+  $ as isObjectEmpty,
+  St as mergeObjects,
+  Ot as objUtils,
+  pt as parseDate,
+  Tt as ripple
 };