spicykatsu 0.0.41 → 0.0.43

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 C, openBlock as c, createElementBlock as u, Fragment as B, renderList as O, createElementVNode as p, normalizeClass as k, toDisplayString as h, createCommentVNode as y, createVNode as L, Transition as D, withCtx as M, withDirectives as A, renderSlot as g, vShow as G, watch as E, createBlock as J, withKeys as V, computed as v, resolveDirective as Q, normalizeStyle as S, onMounted as Z, onUnmounted as ee, createTextVNode as x, vModelText as R, mergeProps as W, withModifiers as F, 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 s = e, o = C(s.defaultOpen || []), l = (a) => {
+      if (s.singleOpen)
+        o.value = o.value.includes(a) ? [] : [a];
+      else {
+        const r = o.value.indexOf(a);
+        r === -1 ? o.value.push(a) : o.value.splice(r, 1);
+      }
+    }, t = (a) => o.value.includes(a);
+    return (a, r) => (c(), u("div", se, [
+      (c(!0), u(B, null, O(a.sections, (n, d) => (c(), u("div", {
+        key: d,
+        class: "spicyAccordionItem"
+      }, [
+        p("button", {
+          class: k(["spicyAccordionHeader", { open: t(d) }]),
+          onClick: (i) => l(d),
+          "aria-expanded": t(d)
+        }, [
+          p("span", null, h(n.title), 1),
+          n.icon ? (c(), u("svg", ae, [
+            p("path", {
+              d: n.icon
+            }, null, 8, ne)
+          ])) : y("", !0),
+          r[0] || (r[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),
+        L(D, { name: "fade" }, {
+          default: M(() => [
+            A(p("div", ie, [
+              g(a.$slots, `section-${d}`)
+            ], 512), [
+              [G, t(d)]
+            ])
+          ]),
+          _: 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 = () => {
+    const s = e, o = C(!0), l = () => {
       o.value = !1;
     };
-    return Y(
-      () => t.autoClose,
-      (l) => {
-        l && l > 0 && setTimeout(() => {
-          a();
-        }, l);
+    return E(
+      () => s.autoClose,
+      (t) => {
+        t && t > 0 && setTimeout(() => {
+          l();
+        }, t);
       }
-    ), (l, s) => (r(), X(P, { name: "fade" }, {
-      default: A(() => [
-        o.value ? (r(), c("div", {
+    ), (t, a) => (c(), J(D, { name: "fade" }, {
+      default: M(() => [
+        o.value ? (c(), u("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: V(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 ? (c(), u("span", ue, h(t.icon), 1)) : y("", !0),
+          !t.iconOnly && t.text ? (c(), u("span", de, h(t.text), 1)) : y("", !0),
+          t.closable ? (c(), u("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 = {
+}, ve = ["d"], he = {
   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: s }) {
+    const o = s, l = () => {
+      t.disabled || o("click");
+    }, t = e, a = v(() => ({
+      "--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
+    })), r = v(() => !t.text && (t.icon || t.mdi)), n = v(() => ({
+      spicyBtn: !0,
+      outlined: t.variant === "outlined",
+      disabled: t.disabled,
+      isRound: r.value
+    }));
+    return (d, i) => {
+      const f = Q("spicyRipple");
+      return A((c(), u("button", {
+        class: k(n.value),
+        style: S(a.value),
+        disabled: d.disabled,
+        onClick: l,
         role: "button",
-        "aria-label": s.text,
-        "aria-disabled": s.disabled,
-        tabindex: s.disabled ? -1 : 0
+        "aria-label": d.text,
+        "aria-disabled": d.disabled,
+        tabindex: d.disabled ? -1 : 0
       }, [
-        s.mdi ? (r(), c("svg", re, [
-          h("path", {
+        d.mdi ? (c(), u("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: d.mdi
+          }, null, 8, ve)
+        ])) : y("", !0),
+        d.icon && !d.mdi ? (c(), u("span", he, h(d.icon), 1)) : y("", !0),
+        d.text ? (c(), u("span", me, h(d.text), 1)) : y("", !0),
+        g(d.$slots, "default")
+      ], 14, ye)), [
+        [f]
       ]);
     };
   }
-}), fe = ["aria-label"], ye = { class: "spicyCarouselInfoText" }, he = { class: "spicyCarouselTitle" }, ve = { key: 0 }, me = {
+}), be = ["aria-label"], ke = { class: "spicyCarouselInfoText" }, Ce = { class: "spicyCarouselTitle" }, Se = { 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);
-    }, 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));
+    let s, o, l = !1;
+    const t = e, a = v(() => ({
+      "--width": t.width,
+      "--height": t.height,
+      "--activeColor": t.activeColor
+    })), r = v(() => {
+      var m;
+      return (m = t.slides[d.value]) == null ? void 0 : m.title;
+    }), n = v(() => i.value.fullScreen === !1 ? !1 : t.fullScreen), d = C(t.initialSlide), i = v(() => t.slides[d.value]);
+    let f;
+    const _ = () => {
+      d.value = (d.value - 1 + t.slides.length) % t.slides.length;
+    }, T = () => {
+      d.value = (d.value + 1) % t.slides.length;
+    }, X = (m) => {
+      d.value = m;
+    }, z = () => {
+      f && clearInterval(f);
+    }, P = () => {
+      t.autoplay && (f = window.setInterval(T, t.autoplaySpeed));
+    }, K = () => {
+      window.open(i.value.img);
+    }, U = () => {
+      t.enableImageClick && K();
+    }, j = (m) => {
+      s = m.touches[0].clientX, o = m.touches[0].clientY, l = !1;
+    }, q = (m) => {
+      if (!l) {
+        const w = m.touches[0].clientX - s, Y = m.touches[0].clientY - o;
+        Math.abs(w) > Math.abs(Y) && (w > 40 ? (_(), l = !0) : w < -40 && (T(), l = !0));
       }
     };
-    return G(() => {
-      V();
-    }), J(() => {
-      O();
-    }), (y, B) => (r(), c("div", {
+    return Z(() => {
+      P();
+    }), ee(() => {
+      z();
+    }), (m, w) => (c(), u("div", {
       class: "spicyCarouselWrapper",
-      style: k({ ...s.value })
+      style: S({ ...a.value })
     }, [
-      h("div", {
+      p("div", {
         class: "spicyCarouselContainer",
-        onMouseenter: O,
-        onMouseleave: V,
+        onMouseenter: z,
+        onMouseleave: P,
         onTouchstart: j,
-        onTouchmove: K
+        onTouchmove: q
       }, [
-        Q(P, {
+        L(D, {
           name: "slide",
           mode: "out-in"
         }, {
-          default: A(() => [
-            (r(), c("div", {
-              class: C(["spicyCarouselSlide", { pointCursor: l.enableImageClick }]),
+          default: M(() => [
+            (c(), u("div", {
+              class: k(["spicyCarouselSlide", { pointCursor: t.enableImageClick }]),
               key: d.value,
-              style: k({ backgroundImage: `url(${n.value.img})` }),
-              onClick: H
+              style: S({ backgroundImage: `url(${i.value.img})` }),
+              onClick: U
             }, [
-              y.slides[d.value].text ? (r(), c("div", {
+              m.slides[d.value].text ? (c(), u("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[d.value].text
               }, [
-                h("span", ye, v(y.slides[d.value].text), 1)
-              ], 10, fe)) : f("", !0),
-              m(y.$slots, "default")
+                p("span", ke, h(m.slides[d.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", Ce, [
+        r.value ? (c(), u("h2", Se, h(i.value.title), 1)) : y("", !0)
       ]),
-      y.showNavigation ? (r(), c("div", me, [
-        h("button", {
+      m.showNavigation ? (c(), u("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 ? (c(), u("div", $e, [
+        (c(!0), u(B, null, O(m.slides, (Y, I) => (c(), u("button", {
+          key: I,
+          onClick: (It) => X(I),
+          class: k(["spicyCarouselPageBtn", { active: I === d.value }])
         }, [
-          h("span", $e, v(T + 1), 1)
-        ], 10, we))), 128))
-      ])) : f("", !0)
+          p("span", Be, h(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 s = e, o = v(() => ({
+      width: s.width,
+      borderBottom: `${s.height} ${s.variant} ${s.bgColor}`
     }));
-    return (a, l) => (r(), c("div", {
+    return (l, t) => (c(), u("div", {
       class: "spicyDivider",
-      style: k(o.value),
+      style: S(o.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"], Le = /* @__PURE__ */ b({
+  __name: "SpicyDropdown",
+  props: {
+    label: {},
+    align: { default: "left" },
+    width: { default: "200px" },
+    icon: { default: "" },
+    iconSize: { default: "24px" }
+  },
+  setup(e) {
+    const s = e, o = C(!1), l = () => {
+      o.value = !o.value;
+    }, t = v(() => ({
+      width: s.width,
+      textAlign: s.align
+    }));
+    return (a, r) => (c(), u("div", {
+      class: k(["spicyDropdown", { open: o.value }])
+    }, [
+      p("button", {
+        onClick: l,
+        class: "spicyDropdownButton"
+      }, [
+        a.icon ? (c(), u("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),
+        x(" " + h(a.label) + " ", 1),
+        a.icon === "" ? (c(), u("svg", {
+          key: 1,
+          width: a.iconSize,
+          height: a.iconSize,
+          viewBox: "0 0 24 24",
+          class: k(["arrow", { open: o.value }])
+        }, r[0] || (r[0] = [
+          p("path", { d: "M7 10l5 5 5-5H7z" }, null, -1)
+        ]), 10, Oe)) : y("", !0)
+      ]),
+      L(D, { name: "fade" }, {
+        default: M(() => [
+          o.value ? (c(), u("div", {
+            key: 0,
+            class: "spicyDropdownMenu",
+            style: S(t.value)
+          }, [
+            g(a.$slots, "default")
+          ], 4)) : y("", !0)
+        ]),
+        _: 3
+      })
+    ], 2));
+  }
+}), Ae = ["aria-label"], Ve = ["placeholder", "aria-label"], ze = {
   key: 0,
   class: "spicyInputError"
-}, Ie = /* @__PURE__ */ b({
+}, Pe = /* @__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;
+    const o = C(e.value), l = C(!1), t = (n) => {
+      const d = n.target;
       o.value = d.value;
-    }, s = () => {
-      a.value = !1;
-    }, u = () => {
-      a.value = !0;
+    }, a = () => {
+      l.value = !1;
+    }, r = () => {
+      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, d) => (c(), u("div", {
+      class: k(["spicyInputWrapper", [n.variant, { hasValue: o.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
+      }, h(n.label), 9, Ae),
+      A(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": d[0] || (d[0] = (i) => o.value = i),
+        placeholder: n.placeholder,
+        onInput: t,
+        onBlur: a,
+        onFocus: r,
+        "aria-label": n.label
+      }, null, 42, Ve), [
+        [R, o.value]
       ]),
-      m(i.$slots, "default"),
-      i.error ? (r(), c("span", De, v(i.error), 1)) : f("", !0)
+      g(n.$slots, "default"),
+      n.error ? (c(), u("span", ze, h(n.error), 1)) : y("", !0)
     ], 2));
   }
-}), Oe = { class: "spicyModalHeader" }, Ve = { class: "spicyModalActions" }, Fe = ["onClick"], Le = /* @__PURE__ */ b({
+}), Ye = { class: "spicyModalHeader" }, Fe = { class: "spicyModalActions" }, Ee = ["onClick"], xe = /* @__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(() => ({
+  setup(e, { emit: s }) {
+    const o = e, l = v(() => ({
       "--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();
+    })), t = s, a = () => {
+      t("update:visible", !1);
+    }, r = (n) => {
+      const d = n.target;
+      o.closeOnClick && d.classList.contains("spicyModalOverlay") && a();
     };
-    return (i, d) => i.visible ? (r(), c("div", {
+    return (n, d) => n.visible ? (c(), u("div", {
       key: 0,
       class: "spicyModalOverlay",
-      onClick: u
+      onClick: r
     }, [
-      h("div", {
+      p("div", {
         class: "spicyModal",
-        style: k({ ...a.value })
+        style: S({ ...l.value })
       }, [
-        h("header", Oe, [
-          m(i.$slots, "spicyModalHeader", {
-            title: i.modalTitle,
-            ariaLabel: i.modalTitle
+        p("header", Ye, [
+          g(n.$slots, "spicyModalHeader", {
+            title: n.modalTitle,
+            ariaLabel: n.modalTitle
           }, () => [
-            Z(v(i.modalTitle), 1)
+            x(h(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", Fe, [
+          g(n.$slots, "spicyModalActions"),
+          n.actions.length === 0 && n.closeBtn ? (c(), u("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),
+          (c(!0), u(B, null, O(n.actions, (i) => (c(), u("button", {
             class: "spicyModalExtraBtn spicyModalActionBtn",
-            key: n.label,
-            onClick: n.handler
-          }, v(n.label), 9, Fe))), 128))
+            key: i.label,
+            onClick: i.handler
+          }, h(i.label), 9, Ee))), 128))
         ])
       ], 4)
-    ])) : f("", !0);
+    ])) : y("", !0);
+  }
+}), Re = {
+  key: 0,
+  class: "spicyProgress"
+}, We = {
+  key: 0,
+  class: "spicyProgressLabel"
+}, Ne = {
+  key: 1,
+  class: "spicyProgressCircular"
+}, He = ["width", "height"], Xe = ["stroke-width", "r", "cx", "cy"], Ke = ["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 s = e, o = v(() => Math.round(s.value / s.max * 100)), l = v(() => s.type === "linear"), t = v(() => ({
+      width: `${o.value}%`,
+      backgroundColor: s.color,
+      height: s.height
+    })), a = v(() => s.size / 2), r = v(() => (s.size - s.strokeWidth) / 2), n = v(() => 2 * Math.PI * r.value), d = v(() => ({
+      strokeDasharray: `${n.value} ${n.value}`,
+      strokeDashoffset: `${n.value - o.value / 100 * n.value}`,
+      transition: "stroke-dashoffset 400ms ease"
+    }));
+    return (i, f) => (c(), u(B, null, [
+      l.value ? (c(), u("div", Re, [
+        p("div", {
+          class: "spicyProgressBar",
+          style: S(t.value)
+        }, null, 4),
+        i.showLabel ? (c(), u("div", We, h(o.value) + "%", 1)) : y("", !0)
+      ])) : (c(), u("div", Ne, [
+        (c(), u("svg", {
+          class: "spicyCircularSvg",
+          width: i.size,
+          height: i.size
+        }, [
+          p("circle", {
+            class: "spicyCircularTrack",
+            "stroke-width": i.strokeWidth,
+            r: r.value,
+            cx: a.value,
+            cy: a.value
+          }, null, 8, Xe),
+          p("circle", {
+            class: "spicyCircularProgress",
+            stroke: i.color,
+            "stroke-width": i.strokeWidth,
+            r: r.value,
+            cx: a.value,
+            cy: a.value,
+            style: S(d.value)
+          }, null, 12, Ke)
+        ], 8, He)),
+        i.showLabel ? (c(), u("div", Ue, h(o.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 s = e, o = v(() => ({
+      "--color": s.color || "transparent"
     }));
-    return (a, l) => (r(), c("div", {
-      class: C(["spicySheet", { isRound: a.isRounded }]),
-      style: k({ ...o.value })
+    return (l, t) => (c(), u("div", {
+      class: k(["spicySheet", { isRound: l.isRound }]),
+      style: S({ ...o.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,108 @@ 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(
+  setup(e, { emit: s }) {
+    const o = e, l = s, t = C(o.modelValue);
+    E(
       () => o.modelValue,
-      (u) => {
-        l.value = u;
+      (r) => {
+        t.value = r;
       }
     );
-    const s = (u) => {
-      const i = u.target;
-      a("update:modelValue", Number(i.value));
+    const a = (r) => {
+      const n = r.target;
+      l("update:modelValue", Number(n.value));
     };
-    return (u, i) => (r(), c("div", Pe, [
-      u.label ? (r(), c("label", {
+    return (r, n) => (c(), u("div", Ge, [
+      r.label ? (c(), u("label", {
         key: 0,
         class: "spicySliderLabel",
-        "aria-label": u.label
-      }, v(u.label), 9, Ae)) : f("", !0),
-      D(h("input", {
+        "aria-label": r.label
+      }, h(r.label), 9, Je)) : y("", !0),
+      A(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: r.min,
+        max: r.max,
+        step: r.step,
+        "onUpdate:modelValue": n[0] || (n[0] = (d) => t.value = d),
+        onInput: a
+      }, null, 40, Qe), [
+        [R, t.value]
       ]),
-      m(u.$slots, "default")
+      g(r.$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 r;
+    const s = e, o = C(((r = s.tabs[0]) == null ? void 0 : r.name) || ""), l = v(() => {
+      var n;
+      return (n = s.tabs.find((d) => d.name === o.value)) == null ? void 0 : n.name;
+    }), t = (n) => {
+      o.value = n;
+    }, a = v(() => s.layout === "vertical" ? "vertical" : "horizontal");
+    return (n, d) => (c(), u("div", {
+      class: k(["spicyTabs", a.value])
+    }, [
+      p("div", et, [
+        (c(!0), u(B, null, O(n.tabs, (i) => (c(), u("button", {
+          key: i.name,
+          class: k(["tabButton", { active: o.value === i.name }]),
+          onClick: (f) => t(i.name)
+        }, h(i.label), 11, tt))), 128))
+      ]),
+      L(D, { name: "fade" }, {
+        default: M(() => [
+          l.value ? (c(), u("div", ot, [
+            g(n.$slots, l.value)
+          ])) : y("", !0)
+        ]),
+        _: 3
+      })
+    ], 2));
+  }
+}), lt = ["value", "name"], at = /* @__PURE__ */ b({
+  __name: "SpicyTextarea",
+  props: {
+    border: { default: "1px solid var(--skBorderColor, #515353)" },
+    isRound: { type: Boolean, default: !1 },
+    padding: { default: "8px" },
+    color: { default: "#4e4e4e" },
+    modelValue: { default: "" },
+    name: { default: "" }
+  },
+  emits: ["update:modelValue"],
+  setup(e, { emit: s }) {
+    const o = e, l = v(() => ({
+      borderRadius: o.isRound ? "16px" : "2px",
+      border: o.border,
+      padding: o.padding,
+      backgroundColor: o.color
+    })), t = s, a = (r) => {
+      t("update:modelValue", r.target.value);
+    };
+    return (r, n) => (c(), u(B, null, [
+      p("textarea", W({
+        class: "spicyTextarea",
+        value: r.modelValue,
+        onInput: a,
+        name: r.name,
+        style: l.value
+      }, r.$attrs), null, 16, lt),
+      g(r.$slots, "default")
+    ], 64));
+  }
+}), nt = ["tabindex", "aria-label", "aria-checked", "onKeydown"], it = /* @__PURE__ */ b({
   __name: "SpicyToggle",
   props: {
     modelValue: { type: Boolean, default: !1 },
@@ -437,34 +695,36 @@ const le = ["aria-label"], ae = {
     disabled: { type: Boolean, default: !1 }
   },
   emits: ["update:modelValue"],
-  setup(e, { emit: t }) {
-    const o = e, a = g(() => ({
+  setup(e, { emit: s }) {
+    const o = e, l = v(() => ({
       "--skBorderColor": o.borderColor,
       "--activeColor": o.activeColor
-    })), l = t, s = () => {
-      l("update:modelValue", !o.modelValue);
+    })), t = s, a = () => {
+      t("update:modelValue", !o.modelValue);
     };
-    return (u, i) => (r(), c("div", ee({
-      class: ["spicyToggle", { outlined: u.variant === "outlined", "is-active": u.modelValue }],
-      tabindex: u.disabled ? -1 : 0,
+    return (r, n) => (c(), u("div", W({
+      class: ["spicyToggle", { outlined: r.variant === "outlined", "is-active": r.modelValue }],
+      tabindex: r.disabled ? -1 : 0,
       role: "switch",
-      style: { ...a.value },
-      "aria-label": u.label,
-      "aria-checked": u.modelValue,
-      onClick: s,
+      style: { ...l.value },
+      "aria-label": r.label,
+      "aria-checked": r.modelValue,
+      onClick: a,
       onKeydown: [
-        M(L(s, ["prevent"]), ["space"]),
-        M(L(s, ["prevent"]), ["enter"])
+        V(F(a, ["prevent"]), ["space"]),
+        V(F(a, ["prevent"]), ["enter"])
       ]
-    }, u.$attrs), Ne, 16, xe));
+    }, r.$attrs), n[0] || (n[0] = [
+      p("div", { class: "spicyToggleKnob" }, null, -1)
+    ]), 16, nt));
   }
-}), We = ["aria-hidden"], He = {
+}), rt = ["aria-hidden"], ct = {
   key: 0,
   class: "spicyTooltipIcon"
-}, je = ["aria-label"], Ke = {
+}, ut = ["aria-label"], dt = {
   key: 2,
   class: "spicyTooltipIcon"
-}, Xe = /* @__PURE__ */ b({
+}, pt = /* @__PURE__ */ b({
   __name: "SpicyTooltip",
   props: {
     text: { default: "" },
@@ -473,260 +733,253 @@ const le = ["aria-label"], ae = {
     position: { default: "top" }
   },
   setup(e) {
-    const t = e, o = S(!1), a = S(null), l = te({
+    const s = e, o = C(!1), l = C(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");
+    }, r = {
+      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 = () => {
+    }, n = () => {
       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($);
+        if (l.value && o.value) {
+          const i = l.value.getBoundingClientRect(), f = l.value.querySelector(".spicyTooltip");
+          if (f) {
+            const _ = f.getBoundingClientRect(), T = r[s.position];
+            T(i, _), a(_);
           }
         }
       });
     }, d = () => {
       o.value = !1;
     };
-    return (n, p) => (r(), c("div", {
-      onMouseover: i,
+    return (i, f) => (c(), u("div", {
+      onMouseover: n,
       onMouseleave: d,
       ref_key: "host",
-      ref: a
+      ref: l
     }, [
-      m(n.$slots, "default"),
-      o.value ? (r(), c("div", {
+      g(i.$slots, "default"),
+      o.value ? (c(), u("div", {
         key: 0,
         class: "spicyTooltip",
-        style: k(l),
+        style: S(t),
         role: "tooltip",
         "aria-hidden": !o.value
       }, [
-        n.prependIcon ? (r(), c("span", He, v(n.prependIcon), 1)) : f("", !0),
-        n.text ? (r(), c("span", {
+        i.prependIcon ? (c(), u("span", ct, h(i.prependIcon), 1)) : y("", !0),
+        i.text ? (c(), u("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
+        }, h(i.text), 9, ut)) : y("", !0),
+        i.appendIcon ? (c(), u("span", dt, h(i.appendIcon), 1)) : y("", !0)
+      ], 12, rt)) : y("", !0)
     ], 544));
   }
 });
-function R(e, t) {
+function N(e, s) {
   const o = {
     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 s.replace(/YYYY|MM|DD/g, (l) => o[l]());
 }
-function qe(e) {
-  const [t, o, a] = e.split("-");
-  return new Date(Number(t), Number(o) - 1, Number(a));
+function yt(e) {
+  const [s, o, l] = e.split("-");
+  return new Date(Number(s), Number(o) - 1, Number(l));
 }
-function Ge(e, t) {
-  const o = Math.abs(t.getTime() - e.getTime());
+function ft(e, s) {
+  const o = Math.abs(s.getTime() - e.getTime());
   return Math.ceil(o / (1e3 * 60 * 60 * 24));
 }
-function Je(e, t) {
+function vt(e, s) {
   const o = new Date(e);
-  return o.setDate(e.getDate() + t), o;
+  return o.setDate(e.getDate() + s), o;
 }
-function Qe(e, t) {
+function ht(e, s) {
   const o = new Date(e);
-  return o.setDate(e.getDate() - t), o;
+  return o.setDate(e.getDate() - s), o;
 }
-function Ze(e) {
-  const t = /* @__PURE__ */ new Date();
-  return e.getDate() === t.getDate() && e.getMonth() === t.getMonth() && e.getFullYear() === t.getFullYear();
+function mt(e) {
+  const s = /* @__PURE__ */ new Date();
+  return e.getDate() === s.getDate() && e.getMonth() === s.getMonth() && e.getFullYear() === s.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 gt(e) {
+  const s = /* @__PURE__ */ new Date();
+  return s.setDate(s.getDate() - 1), e.getDate() === s.getDate() && e.getMonth() === s.getMonth() && e.getFullYear() === s.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 bt(e) {
+  const s = /* @__PURE__ */ new Date();
+  return s.setDate(s.getDate() + 1), e.getDate() === s.getDate() && e.getMonth() === s.getMonth() && e.getFullYear() === s.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 kt(e = "YYYY-MM-DD", s = { show: !0, separator: "-" }) {
+  if (typeof e != "string" || typeof s != "object" || !s.hasOwnProperty("show") || typeof s.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 s.separator && s.separator !== "-" && (l = l.replace(/-/g, s.separator)), s.show ? { value: l, isVisible: !0 } : { value: l, isVisible: !1 };
 }
-const vt = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
+const Lt = /* @__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: kt,
+  dateAdd: vt,
+  dateDiff: ft,
+  dateIsToday: mt,
+  dateIsTomorrow: bt,
+  dateIsYesterday: gt,
+  dateSubtract: ht,
+  formatDate: N,
+  parseDate: yt
 }, 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 Ct(e) {
+  const s = /* @__PURE__ */ new WeakMap();
+  function o(l) {
+    if ($(l) || typeof l != "object")
+      return l;
+    if (s.has(l))
+      return s.get(l);
+    const t = Array.isArray(l) ? [] : {};
+    s.set(l, t);
+    for (const a in l)
+      Object.prototype.hasOwnProperty.call(l, a) && (t[a] = o(l[a]));
+    return t;
   }
   return o(e);
 }
-function N(...e) {
-  const t = {};
+function H(...e) {
+  const s = {};
   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);
+    if (!$(o)) {
+      for (const l in o)
+        if (Object.prototype.hasOwnProperty.call(o, l)) {
+          const t = o[l];
+          t !== void 0 && (typeof t == "object" && t !== null && !Array.isArray(t) ? s[l] = H(s[l] || {}, t) : s[l] = t);
         }
     }
-  }), t;
+  }), s;
 }
-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 wt(e) {
+  return $(e) ? [] : Object.keys(e);
 }
-function nt(e) {
-  return w(e) ? [] : Object.values(e);
+function $t(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({
+const At = /* @__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;
+  deepClone: Ct,
+  deepMerge: H,
+  getObjectEntries: _t,
+  getObjectKeys: wt,
+  getObjectValues: $t,
+  isObjectEmpty: $,
+  mergeObjects: St
+}, Symbol.toStringTag, { value: "Module" })), Bt = ':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)}', Tt = ".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}}", Dt = {
+  mounted(e) {
+    e.style.position = "absolute", e.style.cursor = "move";
+    let s, o;
+    const l = (n) => {
+      e.style.left = `${n.pageX - s}px`, e.style.top = `${n.pageY - o}px`;
+    }, t = () => {
+      document.removeEventListener("mousemove", l), document.removeEventListener("mouseup", t);
+    }, a = (n) => {
+      s = n.clientX - e.getBoundingClientRect().left, o = n.clientY - e.getBoundingClientRect().top, document.addEventListener("mousemove", l), document.addEventListener("mouseup", t);
+    };
+    e.addEventListener("mousedown", a);
+    const r = e;
+    r._cleanup = () => {
+      r.removeEventListener("mousedown", a), document.removeEventListener("mousemove", l), document.removeEventListener("mouseup", t);
+    };
+  },
+  unmounted(e) {
+    const s = e;
+    s._cleanup && s._cleanup();
   }
-}
-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({
-  __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 = {
+}, Mt = {
   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", () => {
+    e.style.position = "relative", e.style.overflow = "hidden", e.addEventListener("click", (s) => {
+      const o = document.createElement("span"), l = Math.max(e.clientWidth, e.clientHeight), t = l / 2;
+      o.style.width = o.style.height = `${l}px`, o.style.left = `${s.clientX - e.getBoundingClientRect().left - t}px`, o.style.top = `${s.clientY - e.getBoundingClientRect().top - t}px`, o.classList.add("spicyRipple");
+      const a = e.querySelector(".spicyRipple");
+      a && a.remove(), e.appendChild(o), o.addEventListener("animationend", () => {
         o.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);
+}, Vt = {
+  install(e, s = {}) {
+    const { useComponents: o = !0, useStyles: l = !0, useDirectives: t = !0 } = s;
+    if (o && (e.component("SpicyAccordion", re), e.component("SpicyAlert", pe), e.component("SpicyBtn", ge), e.component("SpicyCarousel", Te), e.component("SpicyDivider", De), e.component("SpicyDropdown", Le), e.component("SpicyLabel", Pe), e.component("SpicyModal", xe), e.component("SpicyProgress", je), e.component("SpicySheet", qe), e.component("SpicySlider", Ze), e.component("SpicyTabs", st), e.component("SpicyTextarea", at), e.component("SpicyToggle", it), e.component("SpicyTooltip", pt)), l) {
+      const a = document.createElement("style");
+      a.id = "SpicyStyles", a.textContent = Bt, 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("spicyDrag", Dt), e.directive("spicyRipple", Mt);
+      const a = document.createElement("style");
+      a.id = "SpicyRippleStyles", a.textContent = Tt, 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,
+  Le as SpicyDropdown,
+  Vt as SpicyKatsu,
+  Pe as SpicyLabel,
+  xe as SpicyModal,
+  je as SpicyProgress,
+  qe as SpicySheet,
+  Ze as SpicySlider,
+  st as SpicyTabs,
+  at as SpicyTextarea,
+  it as SpicyToggle,
+  pt as SpicyTooltip,
+  kt as currentDate,
+  vt as dateAdd,
+  ft as dateDiff,
+  mt as dateIsToday,
+  bt as dateIsTomorrow,
+  gt as dateIsYesterday,
+  ht as dateSubtract,
+  Lt as dateUtils,
+  Ct as deepClone,
+  H as deepMerge,
+  N as formatDate,
+  _t as getObjectEntries,
+  wt as getObjectKeys,
+  $t as getObjectValues,
+  $ as isObjectEmpty,
+  St as mergeObjects,
+  At as objUtils,
+  yt as parseDate,
+  Dt as spicyDrag,
+  Mt as spicyRipple
 };