spicykatsu 0.0.38 → 0.0.40

package/dist/spicykatsu.es.js

@@ -1,822 +1,726 @@
-import { ref as w, watch as Y, openBlock as n, createBlock as R, Transition as E, withCtx as z, createElementBlock as s, normalizeClass as k, withKeys as A, toDisplayString as h, createCommentVNode as v, renderSlot as b, computed as C, normalizeStyle as I, onMounted as q, onUnmounted as G, createElementVNode as f, createVNode as J, Fragment as D, renderList as F, withDirectives as _, vModelCheckbox as Q, createTextVNode as U, vModelText as W, mergeProps as Z, withModifiers as N, reactive as ee, nextTick as te } from "vue";
-const le = ["aria-label"], oe = {
+import { defineComponent as b, ref as k, 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 S, createElementVNode as h, onMounted as G, onUnmounted as J, createVNode as Q, Fragment as z, renderList as E, 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 = {
   key: 0,
   class: "spicyAlertIcon"
-}, ae = {
+}, se = {
   key: 1,
   class: "spicyAlertText"
-}, ne = {
+}, ne = /* @__PURE__ */ b({
   __name: "SpicyAlert",
   props: {
-    variant: {
-      type: String,
-      default: "info",
-      validator: (e) => ["info", "success", "warning", "error", "custom"].includes(e)
-    },
-    text: { type: String, default: "" },
-    icon: String,
-    iconOnly: Boolean,
-    closable: { type: Boolean, default: !1 },
-    autoClose: { type: Number, default: 0 }
+    variant: { default: "info" },
+    text: { default: "" },
+    icon: { default: "" },
+    iconOnly: { type: Boolean, default: !1 },
+    closable: { type: Boolean, default: !0 },
+    autoClose: { default: 0 }
   },
   setup(e) {
-    const t = e, l = w(!0), a = () => {
-      l.value = !1;
+    const t = e, o = k(!0), a = () => {
+      o.value = !1;
     };
     return Y(
       () => t.autoClose,
-      (o) => {
-        o > 0 && setTimeout(() => {
-          l.value = !1;
-        }, o);
+      (l) => {
+        l && l > 0 && setTimeout(() => {
+          a();
+        }, l);
       }
-    ), (o, r) => (n(), R(E, { name: "fade" }, {
-      default: z(() => [
-        l.value ? (n(), s("div", {
+    ), (l, s) => (r(), X(P, { name: "fade" }, {
+      default: A(() => [
+        o.value ? (r(), c("div", {
           key: 0,
-          class: k(["spicyAlert", e.variant]),
+          class: C(["spicyAlert", l.variant]),
           "aria-atomic": "true",
-          "aria-label": e.text,
+          "aria-label": l.text,
           role: "alert",
-          onKeydown: A(a, ["enter"])
+          onKeydown: M(a, ["enter"])
         }, [
-          e.iconOnly || e.text ? (n(), s("span", oe, h(e.icon), 1)) : v("", !0),
-          !e.iconOnly && e.text ? (n(), s("span", ae, h(e.text), 1)) : v("", !0),
-          e.closable ? (n(), s("button", {
+          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", {
             key: 2,
             class: "spicyAlertCloseBtn",
             onClick: a,
             "aria-label": "Close alert"
-          }, " X ")) : v("", !0),
-          b(o.$slots, "default")
-        ], 42, le)) : v("", !0)
+          }, " X ")) : f("", !0),
+          m(l.$slots, "default")
+        ], 42, le)) : f("", !0)
       ]),
       _: 3
     }));
   }
-}, se = ["disabled", "aria-label", "aria-disabled", "tabindex"], ie = {
+}), ie = ["disabled", "aria-label", "aria-disabled", "tabindex"], re = {
   key: 0,
-  class: "spicyBtnIcon"
-}, re = {
+  class: "spicyBtnIcon spicyMDI",
+  viewBox: "0 0 24 24",
+  xmlns: "http://www.w3.org/2000/svg"
+}, ce = ["d"], ue = {
   key: 1,
+  class: "spicyBtnIcon"
+}, de = {
+  key: 2,
   class: "spicyBtnText"
-}, ce = {
+}, pe = /* @__PURE__ */ b({
   __name: "SpicyBtn",
   props: {
-    variant: {
-      type: String,
-      default: "filled",
-      validator: (e) => ["outlined", "filled"].includes(e)
-    },
+    variant: { default: "filled" },
     disabled: { type: Boolean, default: !1 },
-    text: { type: String, default: "Button" },
-    icon: String,
-    bgColor: String,
-    textColor: String,
-    hoverColor: String,
-    borderColor: String,
-    // Custom color (if outlined variant)
-    fontSize: { type: [Number, String], default: 16 },
-    fontWeight: { type: [Number, String], default: 500 }
+    text: { default: "" },
+    icon: { default: "" },
+    mdi: { default: "" },
+    bgColor: { default: "" },
+    textColor: { default: "#ddd" },
+    hoverColor: { default: "" },
+    borderColor: { default: "" },
+    fontSize: { default: 16 },
+    fontWeight: { default: 500 }
   },
   emits: ["click"],
   setup(e, { emit: t }) {
-    const l = e, a = C(() => ({
-      "--skFontSize": typeof l.fontSize == "number" ? `${l.fontSize}px` : l.fontSize,
-      "--skFontWeight": l.fontWeight,
-      "--skBgColor": l.bgColor,
-      "--skTextColor": l.textColor,
-      "--skBorderColor": l.borderColor,
-      "--hoverColor": l.hoverColor
-    }));
-    return (o, r) => (n(), s("button", {
-      class: k(["spicyBtn", { outlined: e.variant === "outlined", disabled: e.disabled }]),
-      style: I({ ...a.value }),
-      disabled: e.disabled,
-      onClick: r[0] || (r[0] = (d) => o.$emit("click")),
-      role: "button",
-      "aria-label": e.text,
-      "aria-disabled": e.disabled,
-      tabindex: e.disabled ? -1 : 0
-    }, [
-      e.icon ? (n(), s("span", ie, h(e.icon), 1)) : v("", !0),
-      e.text ? (n(), s("span", re, h(e.text), 1)) : v("", !0),
-      b(o.$slots, "default")
-    ], 14, se));
+    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: S({ ...a.value }),
+        disabled: s.disabled,
+        onClick: u[0] || (u[0] = (d) => s.$emit("click")),
+        role: "button",
+        "aria-label": s.text,
+        "aria-disabled": s.disabled,
+        tabindex: s.disabled ? -1 : 0
+      }, [
+        s.mdi ? (r(), c("svg", re, [
+          h("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]
+      ]);
+    };
   }
-}, ue = { class: "spicyCarouselWrapper" }, de = ["aria-label"], ye = { class: "spicyCarouselInfoText" }, pe = { class: "spicyCarouselTitle" }, fe = { key: 0 }, ve = {
+}), fe = ["aria-label"], ye = { class: "spicyCarouselInfoText" }, he = { class: "spicyCarouselTitle" }, ve = { key: 0 }, me = {
   key: 0,
   class: "spicyCarouselNavControls"
-}, he = /* @__PURE__ */ f("span", { class: "spicyCarouselPrevBtnIcon" }, "<", -1), ge = [
-  he
-], me = /* @__PURE__ */ f("span", { class: "spicyCarouselNextBtnIcon" }, ">", -1), be = [
-  me
+}, ge = /* @__PURE__ */ h("span", { class: "spicyCarouselPrevBtnIcon" }, "<", -1), be = [
+  ge
+], Ce = /* @__PURE__ */ h("span", { class: "spicyCarouselNextBtnIcon" }, ">", -1), ke = [
+  Ce
 ], Se = {
   key: 1,
   class: "spicyCarouselPagination"
-}, Ce = ["onClick"], ke = { class: "spicyCarouselPage" }, we = {
+}, we = ["onClick"], $e = { class: "spicyCarouselPage" }, _e = /* @__PURE__ */ b({
   __name: "SpicyCarousel",
   props: {
     autoplay: { type: Boolean, default: !1 },
-    autoplaySpeed: { type: Number, default: 5e3 },
+    autoplaySpeed: { default: 5e3 },
     showNavigation: { type: Boolean, default: !0 },
     showPagination: { type: Boolean, default: !0 },
-    activeColor: { type: String, default: "#00ffea80" },
+    activeColor: { default: "var(--skPrimaryColor)" },
     loop: { type: Boolean, default: !0 },
-    initialSlide: { type: Number, default: 0 },
-    slides: { type: Array, required: !0 },
-    width: { type: String, default: "580px" },
-    height: { type: String, default: "360px" },
+    initialSlide: { default: 0 },
+    slides: { default: () => [] },
+    width: { default: "580px" },
+    height: { default: "360px" },
     fullScreen: { type: Boolean, default: !1 },
     enableImageClick: { type: Boolean, default: !1 }
   },
   setup(e) {
-    let t, l, a = !1;
-    const o = e, r = C(() => ({
-      "--width": o.width,
-      "--height": o.height,
-      "--activeColor": o.activeColor
-    })), d = C(() => o.slides[u.value].title), y = C(() => i.value.fullScreen === !1 ? !1 : o.fullScreen), u = w(o.initialSlide), i = C(() => o.slides[u.value]);
-    let c;
-    const p = () => {
-      u.value = (u.value - 1 + o.slides.length) % o.slides.length;
-    }, $ = () => {
-      u.value = (u.value + 1) % o.slides.length;
-    }, g = (S) => {
-      u.value = S;
-    }, B = () => {
-      clearInterval(c);
-    }, T = () => {
-      o.autoplay && (c = setInterval($, o.autoplaySpeed));
-    }, x = () => {
-      window.open(i.value.img);
-    }, m = () => {
-      o.enableImageClick && x();
-    }, O = (S) => {
-      t = S.touches[0].clientX, l = S.touches[0].clientY, a = !1;
-    }, X = (S) => {
+    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 = k(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 P = S.touches[0].clientX - t, L = S.touches[0].clientY - l;
-        Math.abs(P) > Math.abs(L) && (P > 40 ? (p(), a = !0) : P < -40 && ($(), a = !0));
+        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));
       }
     };
-    return q(() => {
-      o.autoplay && (c = setInterval($, o.autoplaySpeed));
-    }), G(() => {
-      clearInterval(c);
-    }), (S, P) => (n(), s("div", ue, [
-      f("div", {
+    return G(() => {
+      V();
+    }), J(() => {
+      O();
+    }), (y, B) => (r(), c("div", {
+      class: "spicyCarouselWrapper",
+      style: S({ ...s.value })
+    }, [
+      h("div", {
         class: "spicyCarouselContainer",
-        style: I({ ...r.value }),
-        onMouseenter: B,
-        onMouseleave: T,
-        onTouchstart: O,
-        onTouchmove: X
+        onMouseenter: O,
+        onMouseleave: V,
+        onTouchstart: j,
+        onTouchmove: K
       }, [
-        J(E, {
+        Q(P, {
           name: "slide",
           mode: "out-in"
         }, {
-          default: z(() => [
-            (n(), s("div", {
-              class: k(["spicyCarouselSlide", { pointCursor: o.enableImageClick }]),
-              key: u.value,
-              style: I({ backgroundImage: `url(${i.value.img})` }),
-              onClick: m
+          default: A(() => [
+            (r(), c("div", {
+              class: C(["spicyCarouselSlide", { pointCursor: l.enableImageClick }]),
+              key: d.value,
+              style: S({ backgroundImage: `url(${n.value.img})` }),
+              onClick: H
             }, [
-              e.slides[u.value].text ? (n(), s("div", {
+              y.slides[d.value].text ? (r(), c("div", {
                 key: 0,
-                class: k(["spicyCarouselTextOverlay", { fullScreen: y.value }]),
-                "aria-label": e.slides[u.value].text
+                class: C(["spicyCarouselTextOverlay", { fullScreen: i.value }]),
+                "aria-label": y.slides[d.value].text
               }, [
-                f("span", ye, h(e.slides[u.value].text), 1)
-              ], 10, de)) : v("", !0),
-              b(S.$slots, "default")
+                h("span", ye, v(y.slides[d.value].text), 1)
+              ], 10, fe)) : f("", !0),
+              m(y.$slots, "default")
             ], 6))
           ]),
           _: 3
         })
-      ], 36),
-      f("div", pe, [
-        d.value ? (n(), s("h2", fe, h(i.value.title), 1)) : v("", !0)
+      ], 32),
+      h("div", he, [
+        u.value ? (r(), c("h2", ve, v(n.value.title), 1)) : f("", !0)
       ]),
-      e.showNavigation ? (n(), s("div", ve, [
-        f("button", {
+      y.showNavigation ? (r(), c("div", me, [
+        h("button", {
           class: "spicyCarouselPrevBtn",
-          onClick: p
-        }, ge),
-        f("button", {
-          class: "spicyCarouselNextBtn",
           onClick: $
-        }, be)
-      ])) : v("", !0),
-      e.showPagination ? (n(), s("div", Se, [
-        (n(!0), s(D, null, F(e.slides, (L, V) => (n(), s("button", {
-          key: V,
-          onClick: (ht) => g(V),
-          class: k(["spicyCarouselPageBtn", { active: V === u.value }])
+        }, be),
+        h("button", {
+          class: "spicyCarouselNextBtn",
+          onClick: _
+        }, ke)
+      ])) : f("", !0),
+      y.showPagination ? (r(), c("div", Se, [
+        (r(!0), c(z, null, E(y.slides, (F, T) => (r(), c("button", {
+          key: T,
+          onClick: (ft) => U(T),
+          class: C(["spicyCarouselPageBtn", { active: T === d.value }])
         }, [
-          f("span", ke, h(V + 1), 1)
-        ], 10, Ce))), 128))
-      ])) : v("", !0)
-    ]));
+          h("span", $e, v(T + 1), 1)
+        ], 10, we))), 128))
+      ])) : f("", !0)
+    ], 4));
   }
-}, $e = {
+}), Be = /* @__PURE__ */ b({
   __name: "SpicyDivider",
   props: {
-    variant: { type: String, default: "solid", validator: (e) => ["solid", "dashed"].includes(e) },
-    width: { type: String, default: "100%" },
-    height: { type: String, default: "1px" },
-    bgColor: { type: String, default: "var(--skBgColor)" }
+    variant: { default: "solid" },
+    width: { default: "100%" },
+    height: { default: "1px" },
+    bgColor: { default: "#5f5f5f" }
   },
   setup(e) {
-    const t = e, l = C(() => ({
+    const t = e, o = g(() => ({
       width: t.width,
-      height: t.height,
       borderBottom: `${t.height} ${t.variant} ${t.bgColor}`
     }));
-    return (a, o) => (n(), s("div", {
+    return (a, l) => (r(), c("div", {
       class: "spicyDivider",
-      style: I(l.value),
+      style: S(o.value),
       role: "separator",
       "aria-orientation": "horizontal"
     }, [
-      b(a.$slots, "default")
+      m(a.$slots, "default")
     ], 4));
   }
-}, xe = { class: "kbContainer" }, Be = { class: "kbSidebar" }, Te = ["onUpdate:modelValue"], Me = { class: "spicyKB" }, De = ["onMousedown", "onTouchstart", "onClick"], Fe = { class: "keyText" }, Ie = {
-  __name: "SpicyKeyboard",
-  emits: ["input"],
-  setup(e, { emit: t }) {
-    const l = w(null), a = w([
-      {
-        label: "Function Keys",
-        visible: !1,
-        layout: [
-          [
-            "Esc",
-            "F1",
-            "F2",
-            "F3",
-            "F4",
-            "F5",
-            "F6",
-            "F7",
-            "F8",
-            "F9",
-            "F10",
-            "F11",
-            "F12",
-            "PrtScr",
-            "ScrLk",
-            "Pause"
-          ]
-          // ['PrtScr', 'ScrLk', 'Pause'],
-        ]
-      },
-      {
-        label: "Main Keys",
-        visible: !0,
-        layout: [
-          ["`", "1", "2", "3", "4", "5", "6", "7", "8", "9", "0", "-", "=", "Backspace"],
-          ["Tab", "Q", "W", "E", "R", "T", "Y", "U", "I", "O", "P", "[", "]", "\\"],
-          ["Caps", "A", "S", "D", "F", "G", "H", "J", "K", "L", ";", "'", "Enter"],
-          ["Shift", "Z", "X", "C", "V", "B", "N", "M", ",", ".", "/", "Shift"],
-          ["Ctrl", "Win", "Alt", "Space", "Alt", "Fn", "Ctrl"]
-        ]
-      },
-      {
-        label: "Arrow Keys",
-        visible: !0,
-        layout: [
-          ["Ins", "Home", "PgUp"],
-          ["Del", "End", "PgDn"],
-          ["&uarr;", "&larr;", "&darr;", "&rarr;"]
-        ]
-      },
-      {
-        label: "Numpad",
-        visible: !0,
-        layout: [
-          ["NumLock", "/", "*", "-"],
-          ["7", "8", "9", "+"],
-          ["4", "5", "6"],
-          ["1", "2", "3", "Enter"],
-          ["0", "."]
-        ]
-      }
-    ]), o = C(
-      () => a.value.filter((p) => p.visible).map((p) => p)
-    ), r = t, d = (p) => {
-      l.value = p;
-    }, y = () => {
-      l.value = null;
-    }, u = (p) => {
-      r("input", p);
-    }, i = (p) => [
-      "Backspace",
-      "Tab",
-      "Caps",
-      "Enter",
-      "Shift",
-      "Ctrl",
-      "Win",
-      "Alt",
-      "Space",
-      "Fn",
-      "Ins",
-      "Del",
-      "Home",
-      "End",
-      "PgUp",
-      "PgDn",
-      "NumLock"
-    ].includes(p) ? `key-${p.toLowerCase()}` : "", c = (p, $, g) => {
-      const B = (x) => ["Backspace", "Tab", "Caps", "Enter", "Shift", "Space"].includes(x), T = (x) => ["Ctrl", "Win", "Alt", "Fn"].includes(x);
-      return B(p) ? "key-wide" : T(p) ? "key-small" : $[g].length === 1 ? "key-fullwidth" : "";
-    };
-    return (p, $) => (n(), s("div", xe, [
-      f("div", Be, [
-        (n(!0), s(D, null, F(a.value, (g, B) => (n(), s("div", {
-          class: "sidebar",
-          key: B
-        }, [
-          f("label", null, [
-            _(f("input", {
-              type: "checkbox",
-              "onUpdate:modelValue": (T) => g.visible = T
-            }, null, 8, Te), [
-              [Q, g.visible]
-            ]),
-            U(" " + h(g.label), 1)
-          ])
-        ]))), 128))
-      ]),
-      f("div", Me, [
-        (n(!0), s(D, null, F(o.value, (g, B) => (n(), s("div", {
-          class: k(["kbSection", { [g.label.toLowerCase().replace(/\s+/g, "")]: !0 }]),
-          key: B
-        }, [
-          (n(!0), s(D, null, F(g.layout, (T, x) => (n(), s("div", {
-            class: "spicyKBRow",
-            key: x
-          }, [
-            (n(!0), s(D, null, F(T, (m) => (n(), s("button", {
-              key: m,
-              class: k(["spicyKBKey", [
-                { "is-active": l.value === m },
-                i(m),
-                c(m, g.layout, x)
-              ]]),
-              onMousedown: (O) => d(m),
-              onMouseup: y,
-              onTouchstart: (O) => d(m),
-              onTouchend: y,
-              onClick: (O) => u(m)
-            }, [
-              f("span", Fe, h(m), 1)
-            ], 42, De))), 128))
-          ]))), 128))
-        ], 2))), 128))
-      ])
-    ]));
-  }
-}, Oe = { class: "spicyInputLabel" }, Pe = ["placeholder", "aria-label"], Ve = {
+}), Te = ["aria-label"], Me = ["placeholder", "aria-label"], De = {
   key: 0,
   class: "spicyInputError"
-}, Ae = {
+}, Ie = /* @__PURE__ */ b({
   __name: "SpicyLabel",
   props: {
-    value: { type: String, default: "" },
-    placeholder: { type: String, default: "" },
-    label: { type: String, default: "" },
-    error: { type: String, default: "" },
-    variant: {
-      type: String,
-      default: "filled",
-      validator: (e) => ["outlined", "filled"].includes(e)
-    }
+    value: { default: "" },
+    placeholder: { default: "" },
+    label: { default: "" },
+    error: { default: "" },
+    variant: { default: "filled" }
   },
   setup(e) {
-    const l = w(e.value), a = w(!1), o = (y) => {
-      l.value = y.target.value;
-    }, r = () => {
+    const o = k(e.value), a = k(!1), l = (i) => {
+      const d = i.target;
+      o.value = d.value;
+    }, s = () => {
       a.value = !1;
-    }, d = () => {
+    }, u = () => {
       a.value = !0;
     };
-    return (y, u) => (n(), s("div", {
-      class: k(["spicyInputWrapper", [e.variant, { hasValue: l.value || e.value, hasFocus: a.value, hasError: e.error }]])
+    return (i, d) => (r(), c("div", {
+      class: C(["spicyInputWrapper", [i.variant, { hasValue: o.value || i.value, hasFocus: a.value, hasError: i.error }]])
     }, [
-      f("label", Oe, h(e.label), 1),
-      _(f("input", {
-        class: k(["spicyInput", e.variant]),
-        "onUpdate:modelValue": u[0] || (u[0] = (i) => l.value = i),
-        placeholder: e.placeholder,
-        onInput: o,
-        onBlur: r,
-        onFocus: d,
-        "aria-label": e.label
-      }, null, 42, Pe), [
-        [W, l.value]
+      h("label", {
+        class: "spicyInputLabel",
+        "aria-label": i.label
+      }, v(i.label), 9, Te),
+      D(h("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]
       ]),
-      b(y.$slots, "default"),
-      e.error ? (n(), s("span", Ve, h(e.error), 1)) : v("", !0)
+      m(i.$slots, "default"),
+      i.error ? (r(), c("span", De, v(i.error), 1)) : f("", !0)
     ], 2));
   }
-}, _e = { class: "spicyModalHeader" }, Ke = { class: "spicyModalActions" }, Le = ["onClick"], Ne = {
+}), Oe = { class: "spicyModalHeader" }, Ve = { class: "spicyModalActions" }, Fe = ["onClick"], Le = /* @__PURE__ */ b({
   __name: "SpicyModal",
   props: {
-    width: { type: String, default: "50%" },
-    height: { type: String, default: "auto" },
-    borderRadius: { type: String, default: "8px" },
-    bgColor: { type: String, default: "#2b2b2b" },
+    width: { default: "400px" },
+    height: { default: "auto" },
+    borderRadius: { default: "6px" },
+    bgColor: { default: "" },
     visible: { type: Boolean, default: !1 },
-    closeBtn: { type: Boolean, default: !1 },
-    actions: { type: Array, default: () => [] },
+    closeBtn: { type: Boolean, default: !0 },
+    actions: { default: () => [] },
     closeOnClick: { type: Boolean, default: !0 },
-    modalTitle: { type: String, default: "" }
+    modalTitle: { default: "" },
+    textColor: { default: "" }
   },
   emits: ["update:visible"],
   setup(e, { emit: t }) {
-    const l = e, a = C(() => ({
-      "--width": l.width,
-      "--height": l.height,
-      "--skBorderRadius": l.borderRadius,
-      "--skBgColor": l.bgColor
-    })), o = t, r = () => {
-      o("update:visible", !1);
-    }, d = (y) => {
-      l.closeOnClick && y.target.classList.contains("spicyModalOverlay") && r();
+    const o = e, a = g(() => ({
+      "--width": o.width,
+      "--height": o.height,
+      "--skBorderRadius": o.borderRadius,
+      "--skBgColor": o.bgColor,
+      "--skTextColor": o.textColor
+    })), l = t, s = () => {
+      l("update:visible", !1);
+    }, u = (i) => {
+      const d = i.target;
+      o.closeOnClick && d.classList.contains("spicyModalOverlay") && s();
     };
-    return (y, u) => e.visible ? (n(), s("div", {
+    return (i, d) => i.visible ? (r(), c("div", {
       key: 0,
       class: "spicyModalOverlay",
-      onClick: d
+      onClick: u
     }, [
-      f("div", {
+      h("div", {
         class: "spicyModal",
-        style: I({ ...a.value })
+        style: S({ ...a.value })
       }, [
-        f("header", _e, [
-          b(y.$slots, "spicyModalHeader", { title: e.modalTitle }, () => [
-            U(h(e.modalTitle), 1)
+        h("header", Oe, [
+          m(i.$slots, "spicyModalHeader", {
+            title: i.modalTitle,
+            ariaLabel: i.modalTitle
+          }, () => [
+            Z(v(i.modalTitle), 1)
           ])
         ]),
-        b(y.$slots, "default"),
-        f("div", Ke, [
-          b(y.$slots, "spicyModalActions"),
-          e.actions.length === 0 && e.closeBtn ? (n(), s("button", {
+        m(i.$slots, "default"),
+        h("div", Ve, [
+          m(i.$slots, "spicyModalActions"),
+          i.actions.length === 0 && i.closeBtn ? (r(), c("button", {
             key: 0,
             class: "spicyModalCloseBtn spicyModalActionBtn",
-            onClick: r
-          }, " Close ")) : v("", !0),
-          (n(!0), s(D, null, F(e.actions, (i) => (n(), s("button", {
+            onClick: s
+          }, " Close ")) : f("", !0),
+          (r(!0), c(z, null, E(i.actions, (n) => (r(), c("button", {
             class: "spicyModalExtraBtn spicyModalActionBtn",
-            key: i.label,
-            onClick: i.handler
-          }, h(i.label), 9, Le))), 128))
+            key: n.label,
+            onClick: n.handler
+          }, v(n.label), 9, Fe))), 128))
         ])
       ], 4)
-    ])) : v("", !0);
+    ])) : f("", !0);
   }
-}, Ye = { class: "spicySlider" }, Ee = {
-  key: 0,
-  class: "spicySliderLabel"
-}, ze = ["min", "max", "step"], Ue = {
+}), Ye = /* @__PURE__ */ b({
+  __name: "SpicySheet",
+  props: {
+    isRounded: { type: Boolean, default: !1 },
+    color: { default: "" }
+  },
+  setup(e) {
+    const t = e, o = g(() => ({
+      "--color": t.color || "transparent"
+    }));
+    return (a, l) => (r(), c("div", {
+      class: C(["spicySheet", { isRound: a.isRounded }]),
+      style: S({ ...o.value })
+    }, [
+      m(a.$slots, "default")
+    ], 6));
+  }
+}), Pe = { class: "spicySlider" }, Ae = ["aria-label"], ze = ["min", "max", "step"], Ee = /* @__PURE__ */ b({
   __name: "SpicySlider",
   props: {
-    min: { type: Number, default: 0 },
-    max: { type: Number, default: 100 },
-    step: { type: Number, default: 1 },
-    label: { type: String, default: "" },
-    modelValue: { type: Number, default: 0 }
+    min: { default: 0 },
+    max: { default: 100 },
+    step: { default: 1 },
+    label: { default: "" },
+    modelValue: { default: 0 }
   },
   emits: ["update:modelValue"],
   setup(e, { emit: t }) {
-    const l = e, a = t, o = w(l.modelValue);
-    Y(
-      () => l.modelValue,
-      (d) => {
-        o.value = d;
-      }
-    );
-    const r = (d) => {
-      a("update:modelValue", Number(d.target.value));
+    const o = e, a = t, l = k(o.modelValue);
+    Y(() => o.modelValue, (u) => {
+      l.value = u;
+    });
+    const s = (u) => {
+      const i = u.target;
+      a("update:modelValue", Number(i.value));
     };
-    return (d, y) => (n(), s("div", Ye, [
-      e.label ? (n(), s("label", Ee, h(e.label), 1)) : v("", !0),
-      _(f("input", {
+    return (u, i) => (r(), c("div", Pe, [
+      u.label ? (r(), c("label", {
+        key: 0,
+        class: "spicySliderLabel",
+        "aria-label": u.label
+      }, v(u.label), 9, Ae)) : f("", !0),
+      D(h("input", {
+        name: "spicySliderInput",
         class: "spicySliderInput",
         type: "range",
-        min: e.min,
-        max: e.max,
-        step: e.step,
-        "onUpdate:modelValue": y[0] || (y[0] = (u) => o.value = u),
-        onInput: r
+        min: u.min,
+        max: u.max,
+        step: u.step,
+        "onUpdate:modelValue": i[0] || (i[0] = (d) => l.value = d),
+        onInput: s
       }, null, 40, ze), [
-        [W, o.value]
+        [x, l.value]
       ]),
-      b(d.$slots, "default")
+      m(u.$slots, "default")
     ]));
   }
-}, We = ["tabindex", "aria-label", "aria-checked", "onKeydown"], He = /* @__PURE__ */ f("div", { class: "spicyToggleKnob" }, null, -1), je = [
-  He
-], Xe = {
+}), xe = ["tabindex", "aria-label", "aria-checked", "onKeydown"], Re = /* @__PURE__ */ h("div", { class: "spicyToggleKnob" }, null, -1), Ne = [
+  Re
+], Ue = /* @__PURE__ */ b({
   __name: "SpicyToggle",
   props: {
-    modelValue: Boolean,
-    label: {
-      type: String,
-      default: "Toggle"
-    },
-    variant: {
-      type: String,
-      default: "filled",
-      validator: (e) => ["outlined", "filled"].includes(e)
-    },
-    borderColor: String,
-    activeColor: {
-      type: String,
-      default: "var(--skPrimaryColor)"
-    }
+    modelValue: { type: Boolean, default: !1 },
+    label: { default: "" },
+    variant: { default: "outlined" },
+    borderColor: { default: "" },
+    activeColor: { default: "" },
+    disabled: { type: Boolean, default: !1 }
   },
   emits: ["update:modelValue"],
   setup(e, { emit: t }) {
-    const l = e, a = C(() => ({
-      "--skBorderColor": l.borderColor,
-      "--activeColor": l.activeColor
-    })), o = t, r = () => {
-      o("update:modelValue", !l.modelValue);
+    const o = e, a = g(() => ({
+      "--skBorderColor": o.borderColor,
+      "--activeColor": o.activeColor
+    })), l = t, s = () => {
+      l("update:modelValue", !o.modelValue);
     };
-    return (d, y) => (n(), s("div", Z({
-      class: ["spicyToggle", { outlined: e.variant === "outlined", "is-active": e.modelValue }],
-      tabindex: d.disabled ? -1 : 0,
+    return (u, i) => (r(), c("div", ee({
+      class: ["spicyToggle", { outlined: u.variant === "outlined", "is-active": u.modelValue }],
+      tabindex: u.disabled ? -1 : 0,
       role: "switch",
       style: { ...a.value },
-      "aria-label": e.label,
-      "aria-checked": e.modelValue.toString(),
-      onClick: r,
+      "aria-label": u.label,
+      "aria-checked": u.modelValue,
+      onClick: s,
       onKeydown: [
-        A(N(r, ["prevent"]), ["space"]),
-        A(N(r, ["prevent"]), ["enter"])
+        M(L(s, ["prevent"]), ["space"]),
+        M(L(s, ["prevent"]), ["enter"])
       ]
-    }, d.$attrs), je, 16, We));
+    }, u.$attrs), Ne, 16, xe));
   }
-}, Re = ["aria-hidden"], qe = {
+}), We = ["aria-hidden"], He = {
   key: 0,
   class: "spicyTooltipIcon"
-}, Ge = ["aria-label"], Je = {
+}, je = ["aria-label"], Ke = {
   key: 2,
   class: "spicyTooltipIcon"
-}, Qe = {
+}, Xe = /* @__PURE__ */ b({
   __name: "SpicyTooltip",
   props: {
-    text: String,
-    prependIcon: String,
-    appendIcon: String,
-    position: {
-      type: String,
-      default: "top",
-      validator: (e) => ["top", "bottom", "left", "right"].includes(e)
-    }
+    text: { default: "" },
+    prependIcon: { default: "" },
+    appendIcon: { default: "" },
+    position: { default: "top" }
   },
   setup(e) {
-    const t = e, l = w(!1), a = w(null), o = ee({
+    const t = e, o = k(!1), a = k(null), l = te({
       position: "absolute",
       top: "0px",
       left: "0px",
       maxWidth: "175px"
-    }), r = (i) => {
-      const c = i.right - window.innerWidth;
-      c > 0 && (o.left = `${parseInt(o.left) - c - 5}px`), i.left < 0 && (o.left = "5px");
-    }, d = {
-      top: (i, c) => {
-        o.left = `${i.left + (i.width - c.width) / 2}px`, o.top = `${i.top - c.height - 5}px`;
+    }), 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`;
       },
-      bottom: (i, c) => {
-        o.left = `${i.left + (i.width - c.width) / 2}px`, o.top = `${i.bottom + 5}px`;
+      bottom: (n, p) => {
+        l.left = `${n.left + (n.width - p.width) / 2}px`, l.top = `${n.bottom + 5}px`;
       },
-      left: (i, c) => {
-        o.left = `${i.left - c.width - 5}px`, o.top = `${i.top + (i.height - c.height) / 2}px`;
+      left: (n, p) => {
+        l.left = `${n.left - p.width - 5}px`, l.top = `${n.top + (n.height - p.height) / 2}px`;
       },
-      right: (i, c) => {
-        o.left = `${i.right + 5}px`, o.top = `${i.top + (i.height - c.height) / 2}px`;
+      right: (n, p) => {
+        l.left = `${n.right + 5}px`, l.top = `${n.top + (n.height - p.height) / 2}px`;
       }
-    }, y = () => {
-      l.value = !0, te(() => {
-        if (a.value && l.value) {
-          const i = a.value.getBoundingClientRect(), c = a.value.querySelector(".spicyTooltip").getBoundingClientRect(), p = d[t.position];
-          p(i, c), r(c);
+    }, i = () => {
+      o.value = !0, oe(() => {
+        if (a.value && o.value) {
+          const n = a.value.getBoundingClientRect(), p = a.value.querySelector(".spicyTooltip");
+          if (p) {
+            const $ = p.getBoundingClientRect(), _ = u[t.position];
+            _(n, $), s($);
+          }
         }
       });
-    }, u = () => {
-      l.value = !1;
+    }, d = () => {
+      o.value = !1;
     };
-    return (i, c) => (n(), s("div", {
-      onMouseover: y,
-      onMouseleave: u,
+    return (n, p) => (r(), c("div", {
+      onMouseover: i,
+      onMouseleave: d,
       ref_key: "host",
       ref: a
     }, [
-      b(i.$slots, "default"),
-      l.value ? (n(), s("div", {
+      m(n.$slots, "default"),
+      o.value ? (r(), c("div", {
         key: 0,
         class: "spicyTooltip",
-        style: I(o),
+        style: S(l),
         role: "tooltip",
-        "aria-hidden": !l.value
+        "aria-hidden": !o.value
       }, [
-        e.prependIcon ? (n(), s("span", qe, h(e.prependIcon), 1)) : v("", !0),
-        e.text ? (n(), s("span", {
+        n.prependIcon ? (r(), c("span", He, v(n.prependIcon), 1)) : f("", !0),
+        n.text ? (r(), c("span", {
           key: 1,
           class: "spicyTooltipText",
-          "aria-label": e.text
-        }, h(e.text), 9, Ge)) : v("", !0),
-        e.appendIcon ? (n(), s("span", Je, h(e.appendIcon), 1)) : v("", !0)
-      ], 12, Re)) : v("", !0)
+          "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)
     ], 544));
   }
-};
-function H(e, t) {
-  const l = {
+});
+function R(e, t) {
+  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) => l[a]());
+  return t.replace(/YYYY|MM|DD/g, (a) => o[a]());
 }
-function Ze(e) {
-  const [t, l, a] = e.split("-");
-  return new Date(Number(t), Number(l) - 1, Number(a));
+function qe(e) {
+  const [t, o, a] = e.split("-");
+  return new Date(Number(t), Number(o) - 1, Number(a));
 }
-function et(e, t) {
-  const l = Math.abs(t.getTime() - e.getTime());
-  return Math.ceil(l / (1e3 * 60 * 60 * 24));
+function Ge(e, t) {
+  const o = Math.abs(t.getTime() - e.getTime());
+  return Math.ceil(o / (1e3 * 60 * 60 * 24));
 }
-function tt(e, t) {
-  const l = new Date(e);
-  return l.setDate(e.getDate() + t), l;
+function Je(e, t) {
+  const o = new Date(e);
+  return o.setDate(e.getDate() + t), o;
 }
-function lt(e, t) {
-  const l = new Date(e);
-  return l.setDate(e.getDate() - t), l;
+function Qe(e, t) {
+  const o = new Date(e);
+  return o.setDate(e.getDate() - t), o;
 }
-function ot(e) {
+function Ze(e) {
   const t = /* @__PURE__ */ new Date();
   return e.getDate() === t.getDate() && e.getMonth() === t.getMonth() && e.getFullYear() === t.getFullYear();
 }
-function at(e) {
+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 nt(e) {
+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 st(e = "YYYY-MM-DD", t = { show: !0, separator: "-" }) {
+function ot(e = "YYYY-MM-DD", t = { show: !0, separator: "-" }) {
   if (typeof e != "string" || typeof t != "object" || !t.hasOwnProperty("show") || typeof t.show != "boolean")
     throw new Error(
       'Invalid parameters: Please provide a valid format string and options object with a boolean "show" property.'
     );
-  let a = H(/* @__PURE__ */ new Date(), e);
+  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 };
 }
-const mt = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
+const ht = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
   __proto__: null,
-  currentDate: st,
-  dateAdd: tt,
-  dateDiff: et,
-  dateIsToday: ot,
-  dateIsTomorrow: nt,
-  dateIsYesterday: at,
-  dateSubtract: lt,
-  formatDate: H,
-  parseDate: Ze
+  currentDate: ot,
+  dateAdd: Je,
+  dateDiff: Ge,
+  dateIsToday: Ze,
+  dateIsTomorrow: tt,
+  dateIsYesterday: et,
+  dateSubtract: Qe,
+  formatDate: R,
+  parseDate: qe
 }, Symbol.toStringTag, { value: "Module" }));
-function it(e) {
+function lt(e) {
   const t = /* @__PURE__ */ new WeakMap();
-  function l(a) {
-    if (M(a) || typeof a != "object")
+  function o(a) {
+    if (w(a) || typeof a != "object")
       return a;
     if (t.has(a))
       return t.get(a);
-    const o = Array.isArray(a) ? [] : {};
-    t.set(a, o);
-    for (const r in a)
-      Object.prototype.hasOwnProperty.call(a, r) && (o[r] = l(a[r]));
-    return o;
+    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;
   }
-  return l(e);
+  return o(e);
 }
-function j(...e) {
+function N(...e) {
   const t = {};
-  return e.forEach((l) => {
-    if (!M(l)) {
-      for (const a in l)
-        if (Object.prototype.hasOwnProperty.call(l, a)) {
-          const o = l[a];
-          o !== void 0 && (typeof o == "object" && o !== null && !Array.isArray(o) ? t[a] = j(t[a] || {}, o) : t[a] = o);
+  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);
         }
     }
   }), t;
 }
-function rt(...e) {
-  return M(e[0]) ? e[0] : Object.assign({}, ...e);
+function at(...e) {
+  return w(e[0]) ? e[0] : Object.assign({}, ...e);
 }
-function ct(e) {
-  return M(e) ? [] : Object.keys(e);
+function st(e) {
+  return w(e) ? [] : Object.keys(e);
 }
-function ut(e) {
-  return M(e) ? [] : Object.values(e);
+function nt(e) {
+  return w(e) ? [] : Object.values(e);
 }
-function dt(e) {
-  return M(e) ? [] : Object.entries(e);
+function it(e) {
+  return w(e) ? [] : Object.entries(e);
 }
-function M(e) {
+function w(e) {
   return e === null || typeof e != "object" ? !1 : Array.isArray(e) ? e.length === 0 : Object.keys(e).length === 0;
 }
-const bt = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
+const vt = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
   __proto__: null,
-  deepClone: it,
-  deepMerge: j,
-  getObjectEntries: dt,
-  getObjectKeys: ct,
-  getObjectValues: ut,
-  isObjectEmpty: M,
-  mergeObjects: rt
+  deepClone: lt,
+  deepMerge: N,
+  getObjectEntries: it,
+  getObjectKeys: st,
+  getObjectValues: nt,
+  isObjectEmpty: w,
+  mergeObjects: at
 }, Symbol.toStringTag, { value: "Module" }));
-function K(e) {
+function I(e) {
   try {
     return new URL(e), !0;
   } catch (t) {
     return console.error("Invalid URL:", t), !1;
   }
 }
-function yt(e) {
-  return K(e) ? new URL(e).hostname : null;
+function rt(e) {
+  return I(e) ? new URL(e).hostname : null;
 }
-function pt(e, t) {
-  if (!K(e)) return e;
-  const l = new URL(e);
-  return Object.keys(t).forEach((a) => l.searchParams.append(a, t[a])), l.toString();
+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 ft(e, t, l = "https") {
-  if (!["http", "https", "ftp", "sftp", "ftps", "ssh"].includes(l.toLowerCase()))
-    throw new Error("Invalid protocol: " + l);
+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 = ""), `${l.toLowerCase()}://${e}${t}`;
+  return t.startsWith("/") || (t = "/" + t), t.endsWith("/") && t.length > 1 && (t = t.slice(0, -1)), t === "/" && (t = ""), `${o.toLowerCase()}://${e}${t}`;
 }
-const St = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
+const mt = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
   __proto__: null,
-  appendParamsToUrl: pt,
-  generateUrl: ft,
-  getHostname: yt,
-  isUrlValid: K
-}, Symbol.toStringTag, { value: "Module" })), vt = ':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)}', Ct = {
+  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)}.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}}', pt = {
+  beforeMount(e) {
+    e.style.position = "relative", e.style.overflow = "hidden", e.addEventListener("click", (t) => {
+      const o = document.createElement("span"), a = Math.max(e.clientWidth, e.clientHeight), l = a / 2;
+      o.style.width = o.style.height = `${a}px`, o.style.left = `${t.clientX - e.getBoundingClientRect().left - l}px`, o.style.top = `${t.clientY - e.getBoundingClientRect().top - l}px`, o.classList.add("spicyRipple");
+      const s = e.querySelector(".spicyRipple");
+      s && s.remove(), e.appendChild(o), o.addEventListener("animationend", () => {
+        o.remove();
+      });
+    });
+  }
+}, gt = {
   install(e, t = {}) {
-    const { useComponents: l = !0, useStyles: a = !0 } = t;
-    if (l && (e.component("SpicyAlert", ne), e.component("SpicyBtn", ce), e.component("SpicyCarousel", we), e.component("SpicyDivider", $e), e.component("SpicyKeyboard", Ie), e.component("SpicyLabel", Ae), e.component("SpicyModal", Ne), e.component("SpicySlider", Ue), e.component("SpicyToggle", Xe), e.component("SpicyTooltip", Qe)), a) {
-      const o = document.createElement("style");
-      o.textContent = vt, document.head.appendChild(o);
+    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", Ee), e.component("SpicyToggle", Ue), e.component("SpicyTooltip", Xe)), a) {
+      const s = document.createElement("style");
+      s.textContent = dt, document.head.appendChild(s);
     }
+    l && e.directive("spicyRipple", pt);
   }
 };
 export {
   ne as SpicyAlert,
-  ce as SpicyBtn,
-  we as SpicyCarousel,
-  $e as SpicyDivider,
-  Ct as SpicyKatsu,
-  Ie as SpicyKeyboard,
-  Ae as SpicyLabel,
-  Ne as SpicyModal,
-  Ue as SpicySlider,
-  Xe as SpicyToggle,
-  Qe as SpicyTooltip,
-  pt as appendParamsToUrl,
-  st as currentDate,
-  tt as dateAdd,
-  et as dateDiff,
-  ot as dateIsToday,
-  nt as dateIsTomorrow,
-  at as dateIsYesterday,
-  lt as dateSubtract,
-  mt as dateUtils,
-  it as deepClone,
-  j as deepMerge,
-  H as formatDate,
-  ft as generateUrl,
-  yt as getHostname,
-  dt as getObjectEntries,
-  ct as getObjectKeys,
-  ut as getObjectValues,
-  M as isObjectEmpty,
-  K as isUrlValid,
-  rt as mergeObjects,
-  bt as objUtils,
-  Ze as parseDate,
-  vt as spicyStyles,
-  St as urlUtils
+  pe as SpicyBtn,
+  _e as SpicyCarousel,
+  Be as SpicyDivider,
+  gt as SpicyKatsu,
+  Ie as SpicyLabel,
+  Le as SpicyModal,
+  Ye as SpicySheet,
+  Ee 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,
+  ht 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,
+  vt as objUtils,
+  qe as parseDate,
+  pt as ripple,
+  dt as spicyStyles,
+  mt as urlUtils
 };