spicykatsu 0.0.42 → 0.0.43

package/dist/spicykatsu.es.js

@@ -1,4 +1,4 @@
-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";
+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",
@@ -12,31 +12,31 @@ const se = { class: "spicyAccordion" }, le = ["onClick", "aria-expanded"], ae =
     defaultOpen: {}
   },
   setup(e) {
-    const o = e, s = S(o.defaultOpen || []), l = (a) => {
-      if (o.singleOpen)
-        s.value = s.value.includes(a) ? [] : [a];
+    const s = e, o = C(s.defaultOpen || []), l = (a) => {
+      if (s.singleOpen)
+        o.value = o.value.includes(a) ? [] : [a];
       else {
-        const d = s.value.indexOf(a);
-        d === -1 ? s.value.push(a) : s.value.splice(d, 1);
+        const r = o.value.indexOf(a);
+        r === -1 ? o.value.push(a) : o.value.splice(r, 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,
+    }, 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(u) }]),
-          onClick: (i) => l(u),
-          "aria-expanded": t(u)
+          class: k(["spicyAccordionHeader", { open: t(d) }]),
+          onClick: (i) => l(d),
+          "aria-expanded": t(d)
         }, [
-          p("span", null, v(n.title), 1),
-          n.icon ? (r(), c("svg", ae, [
+          p("span", null, h(n.title), 1),
+          n.icon ? (c(), u("svg", ae, [
             p("path", {
               d: n.icon
             }, null, 8, ne)
           ])) : y("", !0),
-          d[0] || (d[0] = p("span", { class: "accordionToggle" }, [
+          r[0] || (r[0] = p("span", { class: "accordionToggle" }, [
             p("svg", {
               class: "accordionArrow",
               viewBox: "0 0 24 24"
@@ -45,12 +45,12 @@ const se = { class: "spicyAccordion" }, le = ["onClick", "aria-expanded"], ae =
             ])
           ], -1))
         ], 10, le),
-        A(D, { name: "fade" }, {
+        L(D, { name: "fade" }, {
           default: M(() => [
-            z(p("div", ie, [
-              g(a.$slots, `section-${u}`)
+            A(p("div", ie, [
+              g(a.$slots, `section-${d}`)
             ], 512), [
-              [G, t(u)]
+              [G, t(d)]
             ])
           ]),
           _: 2
@@ -75,29 +75,29 @@ const se = { class: "spicyAccordion" }, le = ["onClick", "aria-expanded"], ae =
     autoClose: { default: 0 }
   },
   setup(e) {
-    const o = e, s = S(!0), l = () => {
-      s.value = !1;
+    const s = e, o = C(!0), l = () => {
+      o.value = !1;
     };
-    return x(
-      () => o.autoClose,
+    return E(
+      () => s.autoClose,
       (t) => {
         t && t > 0 && setTimeout(() => {
           l();
         }, t);
       }
-    ), (t, a) => (r(), J(D, { name: "fade" }, {
+    ), (t, a) => (c(), J(D, { name: "fade" }, {
       default: M(() => [
-        s.value ? (r(), c("div", {
+        o.value ? (c(), u("div", {
           key: 0,
           class: k(["spicyAlert", t.variant]),
           "aria-atomic": "true",
           "aria-label": t.text,
           role: "alert",
-          onKeydown: P(l, ["enter"])
+          onKeydown: V(l, ["enter"])
         }, [
-          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", {
+          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: l,
@@ -114,7 +114,7 @@ const se = { class: "spicyAccordion" }, le = ["onClick", "aria-expanded"], ae =
   class: "spicyBtnIcon spicyMDI",
   viewBox: "0 0 24 24",
   xmlns: "http://www.w3.org/2000/svg"
-}, he = ["d"], ve = {
+}, ve = ["d"], he = {
   key: 1,
   class: "spicyBtnIcon"
 }, me = {
@@ -136,50 +136,50 @@ const se = { class: "spicyAccordion" }, le = ["onClick", "aria-expanded"], ae =
     fontWeight: { default: 500 }
   },
   emits: ["click"],
-  setup(e, { emit: o }) {
-    const s = o, l = () => {
-      s("click");
-    }, t = e, a = h(() => ({
+  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
-    })), d = h(() => !t.text && (t.icon || t.mdi)), n = h(() => ({
+    })), r = v(() => !t.text && (t.icon || t.mdi)), n = v(() => ({
       spicyBtn: !0,
       outlined: t.variant === "outlined",
       disabled: t.disabled,
-      isRound: d.value
+      isRound: r.value
     }));
-    return (u, i) => {
+    return (d, i) => {
       const f = Q("spicyRipple");
-      return z((r(), c("button", {
+      return A((c(), u("button", {
         class: k(n.value),
-        style: C(a.value),
-        disabled: u.disabled,
+        style: S(a.value),
+        disabled: d.disabled,
         onClick: l,
         role: "button",
-        "aria-label": u.text,
-        "aria-disabled": u.disabled,
-        tabindex: u.disabled ? -1 : 0
+        "aria-label": d.text,
+        "aria-disabled": d.disabled,
+        tabindex: d.disabled ? -1 : 0
       }, [
-        u.mdi ? (r(), c("svg", fe, [
+        d.mdi ? (c(), u("svg", fe, [
           p("path", {
             fill: "currentColor",
             class: "mdi-icon",
-            d: u.mdi
-          }, null, 8, he)
+            d: d.mdi
+          }, null, 8, ve)
         ])) : 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")
+        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]
       ]);
     };
   }
-}), be = ["aria-label"], ke = { class: "spicyCarouselInfoText" }, Se = { class: "spicyCarouselTitle" }, Ce = { key: 0 }, we = {
+}), be = ["aria-label"], ke = { class: "spicyCarouselInfoText" }, Ce = { class: "spicyCarouselTitle" }, Se = { key: 0 }, we = {
   key: 0,
   class: "spicyCarouselNavControls"
 }, $e = {
@@ -202,70 +202,70 @@ const se = { class: "spicyAccordion" }, le = ["onClick", "aria-expanded"], ae =
     enableImageClick: { type: Boolean, default: !1 }
   },
   setup(e) {
-    let o, s, l = !1;
-    const t = e, a = h(() => ({
+    let s, o, l = !1;
+    const t = e, a = v(() => ({
       "--width": t.width,
       "--height": t.height,
       "--activeColor": t.activeColor
-    })), d = h(() => {
+    })), r = v(() => {
       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]);
+      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 _ = () => {
-      u.value = (u.value - 1 + t.slides.length) % t.slides.length;
+      d.value = (d.value - 1 + t.slides.length) % t.slides.length;
     }, T = () => {
-      u.value = (u.value + 1) % t.slides.length;
-    }, K = (m) => {
-      u.value = m;
-    }, V = () => {
+      d.value = (d.value + 1) % t.slides.length;
+    }, X = (m) => {
+      d.value = m;
+    }, z = () => {
       f && clearInterval(f);
-    }, F = () => {
+    }, P = () => {
       t.autoplay && (f = window.setInterval(T, t.autoplaySpeed));
-    }, X = () => {
+    }, K = () => {
       window.open(i.value.img);
     }, U = () => {
-      t.enableImageClick && X();
+      t.enableImageClick && K();
     }, j = (m) => {
-      o = m.touches[0].clientX, s = m.touches[0].clientY, l = !1;
+      s = m.touches[0].clientX, o = 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));
+        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 Z(() => {
-      F();
+      P();
     }), ee(() => {
-      V();
-    }), (m, w) => (r(), c("div", {
+      z();
+    }), (m, w) => (c(), u("div", {
       class: "spicyCarouselWrapper",
-      style: C({ ...a.value })
+      style: S({ ...a.value })
     }, [
       p("div", {
         class: "spicyCarouselContainer",
-        onMouseenter: V,
-        onMouseleave: F,
+        onMouseenter: z,
+        onMouseleave: P,
         onTouchstart: j,
         onTouchmove: q
       }, [
-        A(D, {
+        L(D, {
           name: "slide",
           mode: "out-in"
         }, {
           default: M(() => [
-            (r(), c("div", {
+            (c(), u("div", {
               class: k(["spicyCarouselSlide", { pointCursor: t.enableImageClick }]),
-              key: u.value,
-              style: C({ backgroundImage: `url(${i.value.img})` }),
+              key: d.value,
+              style: S({ backgroundImage: `url(${i.value.img})` }),
               onClick: U
             }, [
-              m.slides[u.value].text ? (r(), c("div", {
+              m.slides[d.value].text ? (c(), u("div", {
                 key: 0,
                 class: k(["spicyCarouselTextOverlay", { fullScreen: n.value }]),
-                "aria-label": m.slides[u.value].text
+                "aria-label": m.slides[d.value].text
               }, [
-                p("span", ke, v(m.slides[u.value].text), 1)
+                p("span", ke, h(m.slides[d.value].text), 1)
               ], 10, be)) : y("", !0),
               g(m.$slots, "default")
             ], 6))
@@ -273,10 +273,10 @@ const se = { class: "spicyAccordion" }, le = ["onClick", "aria-expanded"], ae =
           _: 3
         })
       ], 32),
-      p("div", Se, [
-        d.value ? (r(), c("h2", Ce, v(i.value.title), 1)) : y("", !0)
+      p("div", Ce, [
+        r.value ? (c(), u("h2", Se, h(i.value.title), 1)) : y("", !0)
       ]),
-      m.showNavigation ? (r(), c("div", we, [
+      m.showNavigation ? (c(), u("div", we, [
         p("button", {
           class: "spicyCarouselPrevBtn",
           onClick: _
@@ -290,13 +290,13 @@ const se = { class: "spicyAccordion" }, le = ["onClick", "aria-expanded"], ae =
           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", {
+      m.showPagination ? (c(), u("div", $e, [
+        (c(!0), u(B, null, O(m.slides, (Y, I) => (c(), u("button", {
           key: I,
-          onClick: (Dt) => K(I),
-          class: k(["spicyCarouselPageBtn", { active: I === u.value }])
+          onClick: (It) => X(I),
+          class: k(["spicyCarouselPageBtn", { active: I === d.value }])
         }, [
-          p("span", Be, v(I + 1), 1)
+          p("span", Be, h(I + 1), 1)
         ], 10, _e))), 128))
       ])) : y("", !0)
     ], 4));
@@ -310,20 +310,20 @@ const se = { class: "spicyAccordion" }, le = ["onClick", "aria-expanded"], ae =
     bgColor: { default: "#5f5f5f" }
   },
   setup(e) {
-    const o = e, s = h(() => ({
-      width: o.width,
-      borderBottom: `${o.height} ${o.variant} ${o.bgColor}`
+    const s = e, o = v(() => ({
+      width: s.width,
+      borderBottom: `${s.height} ${s.variant} ${s.bgColor}`
     }));
-    return (l, t) => (r(), c("div", {
+    return (l, t) => (c(), u("div", {
       class: "spicyDivider",
-      style: C(s.value),
+      style: S(o.value),
       role: "separator",
       "aria-orientation": "horizontal"
     }, [
       g(l.$slots, "default")
     ], 4));
   }
-}), Me = ["width", "height"], Ie = ["d"], Oe = ["width", "height"], Ae = /* @__PURE__ */ b({
+}), Me = ["width", "height"], Ie = ["d"], Oe = ["width", "height"], Le = /* @__PURE__ */ b({
   __name: "SpicyDropdown",
   props: {
     label: {},
@@ -333,20 +333,20 @@ const se = { class: "spicyAccordion" }, le = ["onClick", "aria-expanded"], ae =
     iconSize: { default: "24px" }
   },
   setup(e) {
-    const o = e, s = S(!1), l = () => {
-      s.value = !s.value;
-    }, t = h(() => ({
-      width: o.width,
-      textAlign: o.align
+    const s = e, o = C(!1), l = () => {
+      o.value = !o.value;
+    }, t = v(() => ({
+      width: s.width,
+      textAlign: s.align
     }));
-    return (a, d) => (r(), c("div", {
-      class: k(["spicyDropdown", { open: s.value }])
+    return (a, r) => (c(), u("div", {
+      class: k(["spicyDropdown", { open: o.value }])
     }, [
       p("button", {
         onClick: l,
         class: "spicyDropdownButton"
       }, [
-        a.icon ? (r(), c("svg", {
+        a.icon ? (c(), u("svg", {
           key: 0,
           width: a.iconSize,
           height: a.iconSize,
@@ -355,23 +355,23 @@ const se = { class: "spicyAccordion" }, le = ["onClick", "aria-expanded"], ae =
         }, [
           p("path", { d: a.icon }, null, 8, Ie)
         ], 8, Me)) : y("", !0),
-        E(" " + v(a.label) + " ", 1),
-        a.icon === "" ? (r(), c("svg", {
+        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: s.value }])
-        }, d[0] || (d[0] = [
+          class: k(["arrow", { open: o.value }])
+        }, r[0] || (r[0] = [
           p("path", { d: "M7 10l5 5 5-5H7z" }, null, -1)
         ]), 10, Oe)) : y("", !0)
       ]),
-      A(D, { name: "fade" }, {
+      L(D, { name: "fade" }, {
         default: M(() => [
-          s.value ? (r(), c("div", {
+          o.value ? (c(), u("div", {
             key: 0,
             class: "spicyDropdownMenu",
-            style: C(t.value)
+            style: S(t.value)
           }, [
             g(a.$slots, "default")
           ], 4)) : y("", !0)
@@ -380,10 +380,10 @@ const se = { class: "spicyAccordion" }, le = ["onClick", "aria-expanded"], ae =
       })
     ], 2));
   }
-}), ze = ["aria-label"], Pe = ["placeholder", "aria-label"], Ve = {
+}), Ae = ["aria-label"], Ve = ["placeholder", "aria-label"], ze = {
   key: 0,
   class: "spicyInputError"
-}, Fe = /* @__PURE__ */ b({
+}, Pe = /* @__PURE__ */ b({
   __name: "SpicyLabel",
   props: {
     value: { default: "" },
@@ -393,39 +393,39 @@ const se = { class: "spicyAccordion" }, le = ["onClick", "aria-expanded"], ae =
     variant: { default: "filled" }
   },
   setup(e) {
-    const s = S(e.value), l = S(!1), t = (n) => {
-      const u = n.target;
-      s.value = u.value;
+    const o = C(e.value), l = C(!1), t = (n) => {
+      const d = n.target;
+      o.value = d.value;
     }, a = () => {
       l.value = !1;
-    }, d = () => {
+    }, r = () => {
       l.value = !0;
     };
-    return (n, u) => (r(), c("div", {
-      class: k(["spicyInputWrapper", [n.variant, { hasValue: s.value || n.value, hasFocus: l.value, hasError: n.error }]])
+    return (n, d) => (c(), u("div", {
+      class: k(["spicyInputWrapper", [n.variant, { hasValue: o.value || n.value, hasFocus: l.value, hasError: n.error }]])
     }, [
       p("label", {
         class: "spicyInputLabel",
         "aria-label": n.label
-      }, v(n.label), 9, ze),
-      z(p("input", {
+      }, h(n.label), 9, Ae),
+      A(p("input", {
         type: "text",
         name: "spicyInput",
         class: k(["spicyInput", n.variant]),
-        "onUpdate:modelValue": u[0] || (u[0] = (i) => s.value = i),
+        "onUpdate:modelValue": d[0] || (d[0] = (i) => o.value = i),
         placeholder: n.placeholder,
         onInput: t,
         onBlur: a,
-        onFocus: d,
+        onFocus: r,
         "aria-label": n.label
-      }, null, 42, Pe), [
-        [R, s.value]
+      }, null, 42, Ve), [
+        [R, o.value]
       ]),
       g(n.$slots, "default"),
-      n.error ? (r(), c("span", Ve, v(n.error), 1)) : y("", !0)
+      n.error ? (c(), u("span", ze, h(n.error), 1)) : y("", !0)
     ], 2));
   }
-}), Le = { class: "spicyModalHeader" }, Ye = { class: "spicyModalActions" }, xe = ["onClick"], Ee = /* @__PURE__ */ b({
+}), Ye = { class: "spicyModalHeader" }, Fe = { class: "spicyModalActions" }, Ee = ["onClick"], xe = /* @__PURE__ */ b({
   __name: "SpicyModal",
   props: {
     width: { default: "400px" },
@@ -440,49 +440,49 @@ const se = { class: "spicyAccordion" }, le = ["onClick", "aria-expanded"], ae =
     textColor: { default: "" }
   },
   emits: ["update:visible"],
-  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 = () => {
+  setup(e, { emit: s }) {
+    const o = e, l = v(() => ({
+      "--width": o.width,
+      "--height": o.height,
+      "--skBorderRadius": o.borderRadius,
+      "--skBgColor": o.bgColor,
+      "--skTextColor": o.textColor
+    })), t = s, a = () => {
       t("update:visible", !1);
-    }, d = (n) => {
-      const u = n.target;
-      s.closeOnClick && u.classList.contains("spicyModalOverlay") && a();
+    }, r = (n) => {
+      const d = n.target;
+      o.closeOnClick && d.classList.contains("spicyModalOverlay") && a();
     };
-    return (n, u) => n.visible ? (r(), c("div", {
+    return (n, d) => n.visible ? (c(), u("div", {
       key: 0,
       class: "spicyModalOverlay",
-      onClick: d
+      onClick: r
     }, [
       p("div", {
         class: "spicyModal",
-        style: C({ ...l.value })
+        style: S({ ...l.value })
       }, [
-        p("header", Le, [
+        p("header", Ye, [
           g(n.$slots, "spicyModalHeader", {
             title: n.modalTitle,
             ariaLabel: n.modalTitle
           }, () => [
-            E(v(n.modalTitle), 1)
+            x(h(n.modalTitle), 1)
           ])
         ]),
         g(n.$slots, "default"),
-        p("div", Ye, [
+        p("div", Fe, [
           g(n.$slots, "spicyModalActions"),
-          n.actions.length === 0 && n.closeBtn ? (r(), c("button", {
+          n.actions.length === 0 && n.closeBtn ? (c(), u("button", {
             key: 0,
             class: "spicyModalCloseBtn spicyModalActionBtn",
             onClick: a
           }, " Close ")) : y("", !0),
-          (r(!0), c(B, null, O(n.actions, (i) => (r(), c("button", {
+          (c(!0), u(B, null, O(n.actions, (i) => (c(), u("button", {
             class: "spicyModalExtraBtn spicyModalActionBtn",
             key: i.label,
             onClick: i.handler
-          }, v(i.label), 9, xe))), 128))
+          }, h(i.label), 9, Ee))), 128))
         ])
       ], 4)
     ])) : y("", !0);
@@ -496,7 +496,7 @@ const se = { class: "spicyAccordion" }, le = ["onClick", "aria-expanded"], ae =
 }, Ne = {
   key: 1,
   class: "spicyProgressCircular"
-}, He = ["width", "height"], Ke = ["stroke-width", "r", "cx", "cy"], Xe = ["stroke", "stroke-width", "r", "cx", "cy"], Ue = {
+}, He = ["width", "height"], Xe = ["stroke-width", "r", "cx", "cy"], Ke = ["stroke", "stroke-width", "r", "cx", "cy"], Ue = {
   key: 0,
   class: "spicyCircularLabel"
 }, je = /* @__PURE__ */ b({
@@ -512,24 +512,24 @@ const se = { class: "spicyAccordion" }, le = ["onClick", "aria-expanded"], ae =
     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(() => ({
+    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 - s.value / 100 * n.value}`,
+      strokeDashoffset: `${n.value - o.value / 100 * n.value}`,
       transition: "stroke-dashoffset 400ms ease"
     }));
-    return (i, f) => (r(), c(B, null, [
-      l.value ? (r(), c("div", Re, [
+    return (i, f) => (c(), u(B, null, [
+      l.value ? (c(), u("div", Re, [
         p("div", {
           class: "spicyProgressBar",
-          style: C(t.value)
+          style: S(t.value)
         }, null, 4),
-        i.showLabel ? (r(), c("div", We, v(s.value) + "%", 1)) : y("", !0)
-      ])) : (r(), c("div", Ne, [
-        (r(), c("svg", {
+        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
@@ -537,21 +537,21 @@ const se = { class: "spicyAccordion" }, le = ["onClick", "aria-expanded"], ae =
           p("circle", {
             class: "spicyCircularTrack",
             "stroke-width": i.strokeWidth,
-            r: d.value,
+            r: r.value,
             cx: a.value,
             cy: a.value
-          }, null, 8, Ke),
+          }, null, 8, Xe),
           p("circle", {
             class: "spicyCircularProgress",
             stroke: i.color,
             "stroke-width": i.strokeWidth,
-            r: d.value,
+            r: r.value,
             cx: a.value,
             cy: a.value,
-            style: C(u.value)
-          }, null, 12, Xe)
+            style: S(d.value)
+          }, null, 12, Ke)
         ], 8, He)),
-        i.showLabel ? (r(), c("div", Ue, v(s.value) + "%", 1)) : y("", !0)
+        i.showLabel ? (c(), u("div", Ue, h(o.value) + "%", 1)) : y("", !0)
       ])),
       g(i.$slots, "default")
     ], 64));
@@ -563,12 +563,12 @@ const se = { class: "spicyAccordion" }, le = ["onClick", "aria-expanded"], ae =
     color: { default: "" }
   },
   setup(e) {
-    const o = e, s = h(() => ({
-      "--color": o.color || "transparent"
+    const s = e, o = v(() => ({
+      "--color": s.color || "transparent"
     }));
-    return (l, t) => (r(), c("div", {
+    return (l, t) => (c(), u("div", {
       class: k(["spicySheet", { isRound: l.isRound }]),
-      style: C({ ...s.value })
+      style: S({ ...o.value })
     }, [
       g(l.$slots, "default")
     ], 6));
@@ -583,37 +583,37 @@ const se = { class: "spicyAccordion" }, le = ["onClick", "aria-expanded"], ae =
     modelValue: { default: 0 }
   },
   emits: ["update:modelValue"],
-  setup(e, { emit: o }) {
-    const s = e, l = o, t = S(s.modelValue);
-    x(
-      () => s.modelValue,
-      (d) => {
-        t.value = d;
+  setup(e, { emit: s }) {
+    const o = e, l = s, t = C(o.modelValue);
+    E(
+      () => o.modelValue,
+      (r) => {
+        t.value = r;
       }
     );
-    const a = (d) => {
-      const n = d.target;
+    const a = (r) => {
+      const n = r.target;
       l("update:modelValue", Number(n.value));
     };
-    return (d, n) => (r(), c("div", Ge, [
-      d.label ? (r(), c("label", {
+    return (r, n) => (c(), u("div", Ge, [
+      r.label ? (c(), u("label", {
         key: 0,
         class: "spicySliderLabel",
-        "aria-label": d.label
-      }, v(d.label), 9, Je)) : y("", !0),
-      z(p("input", {
+        "aria-label": r.label
+      }, h(r.label), 9, Je)) : y("", !0),
+      A(p("input", {
         name: "spicySliderInput",
         class: "spicySliderInput",
         type: "range",
-        min: d.min,
-        max: d.max,
-        step: d.step,
-        "onUpdate:modelValue": n[0] || (n[0] = (u) => t.value = u),
+        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]
       ]),
-      g(d.$slots, "default")
+      g(r.$slots, "default")
     ]));
   }
 }), et = { class: "spicyTabsHeader" }, tt = ["onClick"], ot = {
@@ -626,26 +626,26 @@ const se = { class: "spicyAccordion" }, le = ["onClick", "aria-expanded"], ae =
     tabs: {}
   },
   setup(e) {
-    var d;
-    const o = e, s = S(((d = o.tabs[0]) == null ? void 0 : d.name) || ""), l = h(() => {
+    var r;
+    const s = e, o = C(((r = s.tabs[0]) == null ? void 0 : r.name) || ""), l = v(() => {
       var n;
-      return (n = o.tabs.find((u) => u.name === s.value)) == null ? void 0 : n.name;
+      return (n = s.tabs.find((d) => d.name === o.value)) == null ? void 0 : n.name;
     }), t = (n) => {
-      s.value = n;
-    }, a = h(() => o.layout === "vertical" ? "vertical" : "horizontal");
-    return (n, u) => (r(), c("div", {
+      o.value = n;
+    }, a = v(() => s.layout === "vertical" ? "vertical" : "horizontal");
+    return (n, d) => (c(), u("div", {
       class: k(["spicyTabs", a.value])
     }, [
       p("div", et, [
-        (r(!0), c(B, null, O(n.tabs, (i) => (r(), c("button", {
+        (c(!0), u(B, null, O(n.tabs, (i) => (c(), u("button", {
           key: i.name,
-          class: k(["tabButton", { active: s.value === i.name }]),
+          class: k(["tabButton", { active: o.value === i.name }]),
           onClick: (f) => t(i.name)
-        }, v(i.label), 11, tt))), 128))
+        }, h(i.label), 11, tt))), 128))
       ]),
-      A(D, { name: "fade" }, {
+      L(D, { name: "fade" }, {
         default: M(() => [
-          l.value ? (r(), c("div", ot, [
+          l.value ? (c(), u("div", ot, [
             g(n.$slots, l.value)
           ])) : y("", !0)
         ]),
@@ -653,30 +653,38 @@ const se = { class: "spicyAccordion" }, le = ["onClick", "aria-expanded"], ae =
       })
     ], 2));
   }
-}), lt = /* @__PURE__ */ b({
+}), 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" }
+    color: { default: "#4e4e4e" },
+    modelValue: { default: "" },
+    name: { default: "" }
   },
-  setup(e) {
-    const o = e, s = h(() => ({
+  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
-    }));
-    return (l, t) => (r(), c(B, null, [
+    })), t = s, a = (r) => {
+      t("update:modelValue", r.target.value);
+    };
+    return (r, n) => (c(), u(B, null, [
       p("textarea", W({
-        class: "spicyTextArea",
-        style: s.value
-      }, l.$attrs), null, 16),
-      g(l.$slots, "default")
+        class: "spicyTextarea",
+        value: r.modelValue,
+        onInput: a,
+        name: r.name,
+        style: l.value
+      }, r.$attrs), null, 16, lt),
+      g(r.$slots, "default")
     ], 64));
   }
-}), at = ["tabindex", "aria-label", "aria-checked", "onKeydown"], nt = /* @__PURE__ */ b({
+}), nt = ["tabindex", "aria-label", "aria-checked", "onKeydown"], it = /* @__PURE__ */ b({
   __name: "SpicyToggle",
   props: {
     modelValue: { type: Boolean, default: !1 },
@@ -687,36 +695,36 @@ const se = { class: "spicyAccordion" }, le = ["onClick", "aria-expanded"], ae =
     disabled: { type: Boolean, default: !1 }
   },
   emits: ["update:modelValue"],
-  setup(e, { emit: o }) {
-    const s = e, l = h(() => ({
-      "--skBorderColor": s.borderColor,
-      "--activeColor": s.activeColor
-    })), t = o, a = () => {
-      t("update:modelValue", !s.modelValue);
+  setup(e, { emit: s }) {
+    const o = e, l = v(() => ({
+      "--skBorderColor": o.borderColor,
+      "--activeColor": o.activeColor
+    })), t = s, a = () => {
+      t("update:modelValue", !o.modelValue);
     };
-    return (d, n) => (r(), c("div", W({
-      class: ["spicyToggle", { outlined: d.variant === "outlined", "is-active": d.modelValue }],
-      tabindex: d.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: { ...l.value },
-      "aria-label": d.label,
-      "aria-checked": d.modelValue,
+      "aria-label": r.label,
+      "aria-checked": r.modelValue,
       onClick: a,
       onKeydown: [
-        P(Y(a, ["prevent"]), ["space"]),
-        P(Y(a, ["prevent"]), ["enter"])
+        V(F(a, ["prevent"]), ["space"]),
+        V(F(a, ["prevent"]), ["enter"])
       ]
-    }, d.$attrs), n[0] || (n[0] = [
+    }, r.$attrs), n[0] || (n[0] = [
       p("div", { class: "spicyToggleKnob" }, null, -1)
-    ]), 16, at));
+    ]), 16, nt));
   }
-}), it = ["aria-hidden"], rt = {
+}), rt = ["aria-hidden"], ct = {
   key: 0,
   class: "spicyTooltipIcon"
-}, ct = ["aria-label"], ut = {
+}, ut = ["aria-label"], dt = {
   key: 2,
   class: "spicyTooltipIcon"
-}, dt = /* @__PURE__ */ b({
+}, pt = /* @__PURE__ */ b({
   __name: "SpicyTooltip",
   props: {
     text: { default: "" },
@@ -725,7 +733,7 @@ const se = { class: "spicyAccordion" }, le = ["onClick", "aria-expanded"], ae =
     position: { default: "top" }
   },
   setup(e) {
-    const o = e, s = S(!1), l = S(null), t = te({
+    const s = e, o = C(!1), l = C(null), t = te({
       position: "absolute",
       top: "0px",
       left: "0px",
@@ -733,7 +741,7 @@ const se = { class: "spicyAccordion" }, le = ["onClick", "aria-expanded"], ae =
     }), 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 = {
+    }, r = {
       top: (i, f) => {
         t.left = `${i.left + (i.width - f.width) / 2}px`, t.top = `${i.top - f.height - 5}px`;
       },
@@ -747,172 +755,193 @@ const se = { class: "spicyAccordion" }, le = ["onClick", "aria-expanded"], ae =
         t.left = `${i.right + 5}px`, t.top = `${i.top + (i.height - f.height) / 2}px`;
       }
     }, n = () => {
-      s.value = !0, oe(() => {
-        if (l.value && s.value) {
+      o.value = !0, oe(() => {
+        if (l.value && o.value) {
           const i = l.value.getBoundingClientRect(), f = l.value.querySelector(".spicyTooltip");
           if (f) {
-            const _ = f.getBoundingClientRect(), T = d[o.position];
+            const _ = f.getBoundingClientRect(), T = r[s.position];
             T(i, _), a(_);
           }
         }
       });
-    }, u = () => {
-      s.value = !1;
+    }, d = () => {
+      o.value = !1;
     };
-    return (i, f) => (r(), c("div", {
+    return (i, f) => (c(), u("div", {
       onMouseover: n,
-      onMouseleave: u,
+      onMouseleave: d,
       ref_key: "host",
       ref: l
     }, [
       g(i.$slots, "default"),
-      s.value ? (r(), c("div", {
+      o.value ? (c(), u("div", {
         key: 0,
         class: "spicyTooltip",
-        style: C(t),
+        style: S(t),
         role: "tooltip",
-        "aria-hidden": !s.value
+        "aria-hidden": !o.value
       }, [
-        i.prependIcon ? (r(), c("span", rt, v(i.prependIcon), 1)) : y("", !0),
-        i.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": 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)
+        }, 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 N(e, o) {
-  const s = {
+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 o.replace(/YYYY|MM|DD/g, (l) => s[l]());
-}
-function pt(e) {
-  const [o, s, l] = e.split("-");
-  return new Date(Number(o), Number(s) - 1, Number(l));
+  return s.replace(/YYYY|MM|DD/g, (l) => o[l]());
 }
-function yt(e, o) {
-  const s = Math.abs(o.getTime() - e.getTime());
-  return Math.ceil(s / (1e3 * 60 * 60 * 24));
+function yt(e) {
+  const [s, o, l] = e.split("-");
+  return new Date(Number(s), Number(o) - 1, Number(l));
 }
-function ft(e, o) {
-  const s = new Date(e);
-  return s.setDate(e.getDate() + o), s;
+function ft(e, s) {
+  const o = Math.abs(s.getTime() - e.getTime());
+  return Math.ceil(o / (1e3 * 60 * 60 * 24));
 }
-function ht(e, o) {
-  const s = new Date(e);
-  return s.setDate(e.getDate() - o), s;
+function vt(e, s) {
+  const o = new Date(e);
+  return o.setDate(e.getDate() + s), o;
 }
-function vt(e) {
-  const o = /* @__PURE__ */ new Date();
-  return e.getDate() === o.getDate() && e.getMonth() === o.getMonth() && e.getFullYear() === o.getFullYear();
+function ht(e, s) {
+  const o = new Date(e);
+  return o.setDate(e.getDate() - s), o;
 }
 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();
+  const s = /* @__PURE__ */ new Date();
+  return e.getDate() === s.getDate() && e.getMonth() === s.getMonth() && e.getFullYear() === s.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();
+  const s = /* @__PURE__ */ new Date();
+  return s.setDate(s.getDate() - 1), e.getDate() === s.getDate() && e.getMonth() === s.getMonth() && e.getFullYear() === s.getFullYear();
 }
-function bt(e = "YYYY-MM-DD", o = { show: !0, separator: "-" }) {
-  if (typeof e != "string" || typeof o != "object" || !o.hasOwnProperty("show") || typeof o.show != "boolean")
+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 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 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 };
+  return s.separator && s.separator !== "-" && (l = l.replace(/-/g, s.separator)), s.show ? { value: l, isVisible: !0 } : { value: l, isVisible: !1 };
 }
-const It = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
+const Lt = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
   __proto__: null,
-  currentDate: bt,
-  dateAdd: ft,
-  dateDiff: yt,
-  dateIsToday: vt,
-  dateIsTomorrow: gt,
-  dateIsYesterday: mt,
+  currentDate: kt,
+  dateAdd: vt,
+  dateDiff: ft,
+  dateIsToday: mt,
+  dateIsTomorrow: bt,
+  dateIsYesterday: gt,
   dateSubtract: ht,
   formatDate: N,
-  parseDate: pt
+  parseDate: yt
 }, Symbol.toStringTag, { value: "Module" }));
-function kt(e) {
-  const o = /* @__PURE__ */ new WeakMap();
-  function s(l) {
+function Ct(e) {
+  const s = /* @__PURE__ */ new WeakMap();
+  function o(l) {
     if ($(l) || typeof l != "object")
       return l;
-    if (o.has(l))
-      return o.get(l);
+    if (s.has(l))
+      return s.get(l);
     const t = Array.isArray(l) ? [] : {};
-    o.set(l, t);
+    s.set(l, t);
     for (const a in l)
-      Object.prototype.hasOwnProperty.call(l, a) && (t[a] = s(l[a]));
+      Object.prototype.hasOwnProperty.call(l, a) && (t[a] = o(l[a]));
     return t;
   }
-  return s(e);
+  return o(e);
 }
 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);
+  const s = {};
+  return e.forEach((o) => {
+    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);
         }
     }
-  }), o;
+  }), s;
 }
 function St(...e) {
   return $(e[0]) ? e[0] : Object.assign({}, ...e);
 }
-function Ct(e) {
+function wt(e) {
   return $(e) ? [] : Object.keys(e);
 }
-function wt(e) {
+function $t(e) {
   return $(e) ? [] : Object.values(e);
 }
-function $t(e) {
+function _t(e) {
   return $(e) ? [] : Object.entries(e);
 }
 function $(e) {
   return e === null || typeof e != "object" ? !1 : Array.isArray(e) ? e.length === 0 : Object.keys(e).length === 0;
 }
-const Ot = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
+const At = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
   __proto__: null,
-  deepClone: kt,
+  deepClone: Ct,
   deepMerge: H,
-  getObjectEntries: $t,
-  getObjectKeys: Ct,
-  getObjectValues: wt,
+  getObjectEntries: _t,
+  getObjectKeys: wt,
+  getObjectValues: $t,
   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 = {
+}, 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();
+  }
+}, Mt = {
   beforeMount(e) {
-    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");
+    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(s), s.addEventListener("animationend", () => {
-        s.remove();
+      a && a.remove(), e.appendChild(o), o.addEventListener("animationend", () => {
+        o.remove();
       });
     });
   }
-}, 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) {
+}, 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 = _t, document.head.appendChild(a);
+      a.id = "SpicyStyles", a.textContent = Bt, document.head.appendChild(a);
     }
     if (t) {
-      e.directive("spicyRipple", Tt);
+      e.directive("spicyDrag", Dt), e.directive("spicyRipple", Mt);
       const a = document.createElement("style");
-      a.id = "SpicyRippleStyles", a.textContent = Bt, document.head.appendChild(a);
+      a.id = "SpicyRippleStyles", a.textContent = Tt, document.head.appendChild(a);
     }
   }
 };
@@ -922,34 +951,35 @@ export {
   ge as SpicyBtn,
   Te as SpicyCarousel,
   De as SpicyDivider,
-  Ae as SpicyDropdown,
-  At as SpicyKatsu,
-  Fe as SpicyLabel,
-  Ee as SpicyModal,
+  Le as SpicyDropdown,
+  Vt as SpicyKatsu,
+  Pe as SpicyLabel,
+  xe 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,
+  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,
-  It as dateUtils,
-  kt as deepClone,
+  Lt as dateUtils,
+  Ct as deepClone,
   H as deepMerge,
   N as formatDate,
-  $t as getObjectEntries,
-  Ct as getObjectKeys,
-  wt as getObjectValues,
+  _t as getObjectEntries,
+  wt as getObjectKeys,
+  $t as getObjectValues,
   $ as isObjectEmpty,
   St as mergeObjects,
-  Ot as objUtils,
-  pt as parseDate,
-  Tt as ripple
+  At as objUtils,
+  yt as parseDate,
+  Dt as spicyDrag,
+  Mt as spicyRipple
 };