@bobbykim/manguito-theme 0.23.1 → 0.24.0

package/dist/core.js

@@ -1,10 +1,10 @@
-(function(){"use strict";try{if(typeof document<"u"){var a=document.createElement("style");a.appendChild(document.createTextNode(".collapse-enter-active[data-v-5d535dc4],.collapse-leave-active[data-v-5d535dc4]{transition-property:height,opacity;transition-duration:.5s;transition-timing-function:ease}.dropup-bottom[data-v-85c54efe]{bottom:var(--button-height)}.dropdown-content-enter-active[data-v-85c54efe],.dropdown-content-leave-active[data-v-85c54efe]{transition:all .3s}.dropdown-content-enter-from[data-v-85c54efe],.dropdown-content-leave-to[data-v-85c54efe]{opacity:0;transform:translateY(-10px)}.hamburger__icon[data-v-1b9c33a1]:before,.hamburger__icon[data-v-1b9c33a1]:after{position:absolute;left:0;transition:all .3s linear}.hamburger__icon[data-v-1b9c33a1]:before{top:-.5rem}.hamburger__icon[data-v-1b9c33a1]:after{top:.5rem}.hamburger__button:focus .hamburger__icon[data-v-1b9c33a1],.hamburger__button:hover .hamburger__icon[data-v-1b9c33a1]{scale:1.05}.hamburger__checkbox:checked+.hamburger__icon[data-v-1b9c33a1]{background-color:transparent}.hamburger__checkbox:checked+.hamburger__icon[data-v-1b9c33a1]:before{top:0;transform:rotate(135deg)}.hamburger__checkbox:checked+.hamburger__icon[data-v-1b9c33a1]:after{top:0;transform:rotate(-135deg)}.collapse-enter-active[data-v-56d20376]{transition:height .5s ease-in}.collapse-leave-active[data-v-56d20376]{transition:height .5s ease-out}.header-desktop[data-v-c48d5ce1]{width:100%}@media screen and (min-width: 1024px){.header-desktop[data-v-c48d5ce1]{width:var(--header-width)}}.slide-down-enter-active[data-v-c48d5ce1]{transition:transform .3s ease-in .2s,opacity .5s ease-in}.slide-down-leave-active[data-v-c48d5ce1]{transition:transform .5s ease-in,opacity .3s ease-in .2s}.slide-down-enter-from[data-v-c48d5ce1],.slide-down-leave-to[data-v-c48d5ce1]{opacity:0;transform:translateY(-100%)}.vertical-placement[data-v-1302a12c]{top:var(--vertical-placement);left:50%;transform:translateY(calc(-1 * var(--vertical-placement))) translate(-50%)}.fade-enter-active[data-v-1302a12c],.fade-leave-active[data-v-1302a12c]{transition-property:opacity;transition-duration:.3s;transition-timing-function:linear}.fade-enter-from[data-v-1302a12c],.fade-leave-to[data-v-1302a12c]{opacity:0}.slide-down-enter-active[data-v-1302a12c]{animation:slide-down-1302a12c .3s ease}.slide-down-leave-active[data-v-1302a12c]{animation:slide-down-1302a12c reverse .3s ease}@keyframes slide-down-1302a12c{0%{opacity:0;transform:translateY(-100%) translate(-50%)}to{opacity:1;transform:translateY(calc(-1 * var(--vertical-placement))) translate(-50%)}}.sidebar-body[data-v-15e6bcbe]{width:100%}.sidebar-body-height[data-v-15e6bcbe]{min-height:calc(100vh - var(--header-height) - var(--footer-height))}.fade-enter-active[data-v-15e6bcbe],.fade-leave-active[data-v-15e6bcbe]{transition-property:opacity;transition-duration:.3s;transition-timing-function:linear}.fade-enter-from[data-v-15e6bcbe],.fade-leave-to[data-v-15e6bcbe]{opacity:0}.sidebar-left-enter-active[data-v-15e6bcbe],.sidebar-left-leave-active[data-v-15e6bcbe],.sidebar-right-enter-active[data-v-15e6bcbe],.sidebar-right-leave-active[data-v-15e6bcbe]{transition-property:transform,opacity;transition-duration:.3s;transition-timing-function:linear}.sidebar-left-enter-from[data-v-15e6bcbe],.sidebar-left-leave-to[data-v-15e6bcbe]{transform:translate(-100%)}.sidebar-right-enter-from[data-v-15e6bcbe],.sidebar-right-leave-to[data-v-15e6bcbe]{transform:translate(100%)}@media screen and (min-width: 768px){.sidebar-body[data-v-15e6bcbe]{width:var(--sidebar-width)}.sidebar-left-enter-from[data-v-15e6bcbe],.sidebar-left-leave-to[data-v-15e6bcbe]{transform:translate(calc(-1 * var(--sidebar-width)))}.sidebar-right-enter-from[data-v-15e6bcbe],.sidebar-right-leave-to[data-v-15e6bcbe]{transform:translate(var(--sidebar-width))}}.container-hts[data-v-1014eb3f]{max-height:var(--container-hts)}.slide-prev-enter-active[data-v-1014eb3f]{transition:all .5s linear}.slide-prev-leave-active[data-v-1014eb3f]{transition:all .5s}.slide-prev-enter-from[data-v-1014eb3f]{transform:translate(-100%);opacity:0}.slide-prev-leave-to[data-v-1014eb3f]{transform:translate(100%);opacity:0}.slide-next-enter-active[data-v-1014eb3f]{transition:all .5s linear}.slide-next-leave-active[data-v-1014eb3f]{transition:all .5s}.slide-next-enter-from[data-v-1014eb3f]{transform:translate(100%);opacity:0}.slide-next-leave-to[data-v-1014eb3f]{transform:translate(-100%);opacity:0}.slide-prev-enter-active[data-v-05e275d0]{transition:all .5s linear}.slide-prev-leave-active[data-v-05e275d0]{transition:all .5s}.slide-prev-enter-from[data-v-05e275d0]{transform:translate(-100%);opacity:0}.slide-prev-leave-to[data-v-05e275d0]{transform:translate(100%);opacity:0}.slide-next-enter-active[data-v-05e275d0]{transition:all .5s linear}.slide-next-leave-active[data-v-05e275d0]{transition:all .5s}.slide-next-enter-from[data-v-05e275d0]{transform:translate(100%);opacity:0}.slide-next-leave-to[data-v-05e275d0]{transform:translate(-100%);opacity:0}")),document.head.appendChild(a)}}catch(e){console.error("vite-plugin-css-injected-by-js",e)}})();
-var se = Object.defineProperty;
-var ae = (s, r, e) => r in s ? se(s, r, { enumerable: !0, configurable: !0, writable: !0, value: e }) : s[r] = e;
-var n = (s, r, e) => ae(s, typeof r != "symbol" ? r + "" : r, e);
-import { defineComponent as A, useSlots as D, ref as C, computed as V, watch as L, openBlock as g, createElementBlock as h, normalizeClass as v, createElementVNode as y, renderSlot as B, createCommentVNode as T, onMounted as F, createVNode as S, unref as R, withCtx as E, Transition as G, withDirectives as W, vShow as P, h as le, render as J, provide as Y, withKeys as oe, inject as j, createBlock as z, normalizeStyle as X, vModelCheckbox as ie, Teleport as ne, toDisplayString as Q } from "vue";
-import { useMutationObserver as de, useWindowSize as ce, useWindowScroll as ge, useScrollLock as K, useElementSize as ue } from "@vueuse/core";
-class he {
+(function(){"use strict";try{if(typeof document<"u"){var a=document.createElement("style");a.appendChild(document.createTextNode(".collapse-enter-active[data-v-5d535dc4],.collapse-leave-active[data-v-5d535dc4]{transition-property:height,opacity;transition-duration:.5s;transition-timing-function:ease}.dropup-bottom[data-v-85c54efe]{bottom:var(--button-height)}.dropdown-content-enter-active[data-v-85c54efe],.dropdown-content-leave-active[data-v-85c54efe]{transition:all .3s}.dropdown-content-enter-from[data-v-85c54efe],.dropdown-content-leave-to[data-v-85c54efe]{opacity:0;transform:translateY(-10px)}.hamburger__icon[data-v-1b9c33a1]:before,.hamburger__icon[data-v-1b9c33a1]:after{position:absolute;left:0;transition:all .3s linear}.hamburger__icon[data-v-1b9c33a1]:before{top:-.5rem}.hamburger__icon[data-v-1b9c33a1]:after{top:.5rem}.hamburger__button:focus .hamburger__icon[data-v-1b9c33a1],.hamburger__button:hover .hamburger__icon[data-v-1b9c33a1]{scale:1.05}.hamburger__checkbox:checked+.hamburger__icon[data-v-1b9c33a1]{background-color:transparent}.hamburger__checkbox:checked+.hamburger__icon[data-v-1b9c33a1]:before{top:0;transform:rotate(135deg)}.hamburger__checkbox:checked+.hamburger__icon[data-v-1b9c33a1]:after{top:0;transform:rotate(-135deg)}.collapse-enter-active[data-v-56d20376]{transition:height .5s ease-in}.collapse-leave-active[data-v-56d20376]{transition:height .5s ease-out}.header-desktop[data-v-c48d5ce1]{width:100%}@media screen and (min-width: 1024px){.header-desktop[data-v-c48d5ce1]{width:var(--header-width)}}.slide-down-enter-active[data-v-c48d5ce1]{transition:transform .3s ease-in .2s,opacity .5s ease-in}.slide-down-leave-active[data-v-c48d5ce1]{transition:transform .5s ease-in,opacity .3s ease-in .2s}.slide-down-enter-from[data-v-c48d5ce1],.slide-down-leave-to[data-v-c48d5ce1]{opacity:0;transform:translateY(-100%)}.vertical-placement[data-v-37ba23d2]{top:var(--vertical-placement);left:50%;transform:translateY(calc(-1 * var(--vertical-placement))) translate(-50%)}.fade-enter-active[data-v-37ba23d2],.fade-leave-active[data-v-37ba23d2]{transition-property:opacity;transition-duration:.3s;transition-timing-function:linear}.fade-enter-from[data-v-37ba23d2],.fade-leave-to[data-v-37ba23d2]{opacity:0}.slide-down-enter-active[data-v-37ba23d2]{animation:slide-down-37ba23d2 .3s ease}.slide-down-leave-active[data-v-37ba23d2]{animation:slide-down-37ba23d2 reverse .3s ease}@keyframes slide-down-37ba23d2{0%{opacity:0;transform:translateY(-100%) translate(-50%)}to{opacity:1;transform:translateY(calc(-1 * var(--vertical-placement))) translate(-50%)}}.sidebar-body[data-v-048c4fe4]{width:100%}.sidebar-body-height[data-v-048c4fe4]{min-height:calc(100vh - var(--header-height) - var(--footer-height))}.fade-enter-active[data-v-048c4fe4],.fade-leave-active[data-v-048c4fe4]{transition-property:opacity;transition-duration:.3s;transition-timing-function:linear}.fade-enter-from[data-v-048c4fe4],.fade-leave-to[data-v-048c4fe4]{opacity:0}.sidebar-left-enter-active[data-v-048c4fe4],.sidebar-left-leave-active[data-v-048c4fe4],.sidebar-right-enter-active[data-v-048c4fe4],.sidebar-right-leave-active[data-v-048c4fe4]{transition-property:transform,opacity;transition-duration:.3s;transition-timing-function:linear}.sidebar-left-enter-from[data-v-048c4fe4],.sidebar-left-leave-to[data-v-048c4fe4]{transform:translate(-100%)}.sidebar-right-enter-from[data-v-048c4fe4],.sidebar-right-leave-to[data-v-048c4fe4]{transform:translate(100%)}@media screen and (min-width: 768px){.sidebar-body[data-v-048c4fe4]{width:var(--sidebar-width)}.sidebar-left-enter-from[data-v-048c4fe4],.sidebar-left-leave-to[data-v-048c4fe4]{transform:translate(calc(-1 * var(--sidebar-width)))}.sidebar-right-enter-from[data-v-048c4fe4],.sidebar-right-leave-to[data-v-048c4fe4]{transform:translate(var(--sidebar-width))}}.container-hts[data-v-1014eb3f]{max-height:var(--container-hts)}.slide-prev-enter-active[data-v-1014eb3f]{transition:all .5s linear}.slide-prev-leave-active[data-v-1014eb3f]{transition:all .5s}.slide-prev-enter-from[data-v-1014eb3f]{transform:translate(-100%);opacity:0}.slide-prev-leave-to[data-v-1014eb3f]{transform:translate(100%);opacity:0}.slide-next-enter-active[data-v-1014eb3f]{transition:all .5s linear}.slide-next-leave-active[data-v-1014eb3f]{transition:all .5s}.slide-next-enter-from[data-v-1014eb3f]{transform:translate(100%);opacity:0}.slide-next-leave-to[data-v-1014eb3f]{transform:translate(-100%);opacity:0}.slide-prev-enter-active[data-v-05e275d0]{transition:all .5s linear}.slide-prev-leave-active[data-v-05e275d0]{transition:all .5s}.slide-prev-enter-from[data-v-05e275d0]{transform:translate(-100%);opacity:0}.slide-prev-leave-to[data-v-05e275d0]{transform:translate(100%);opacity:0}.slide-next-enter-active[data-v-05e275d0]{transition:all .5s linear}.slide-next-leave-active[data-v-05e275d0]{transition:all .5s}.slide-next-enter-from[data-v-05e275d0]{transform:translate(100%);opacity:0}.slide-next-leave-to[data-v-05e275d0]{transform:translate(-100%);opacity:0}")),document.head.appendChild(a)}}catch(e){console.error("vite-plugin-css-injected-by-js",e)}})();
+var ae = Object.defineProperty;
+var le = (s, r, e) => r in s ? ae(s, r, { enumerable: !0, configurable: !0, writable: !0, value: e }) : s[r] = e;
+var n = (s, r, e) => le(s, typeof r != "symbol" ? r + "" : r, e);
+import { defineComponent as A, useSlots as D, ref as k, computed as V, watch as L, openBlock as g, createElementBlock as h, normalizeClass as f, createElementVNode as C, renderSlot as B, createCommentVNode as w, onMounted as F, createVNode as S, unref as R, withCtx as E, Transition as I, withDirectives as M, vShow as P, h as oe, render as Q, provide as Y, withKeys as ie, inject as j, createBlock as z, normalizeStyle as X, vModelCheckbox as ne, Teleport as de, toDisplayString as Z } from "vue";
+import { useMutationObserver as ce, useWindowSize as ge, useWindowScroll as ue, useScrollLock as K, useElementSize as he } from "@vueuse/core";
+class pe {
   constructor() {
     // body text class
     n(this, "bodyText", {
@@ -28,7 +28,7 @@ class he {
     });
   }
 }
-class pe {
+class be {
   constructor() {
     // Border width class
     n(this, "borderWidth", {
@@ -131,7 +131,7 @@ class pe {
     });
   }
 }
-class be {
+class fe {
   constructor() {
     // bg color class
     n(this, "bgColor", {
@@ -609,7 +609,7 @@ class be {
     });
   }
 }
-class fe {
+class ve {
   constructor() {
     // h1 class
     n(this, "heading1", {
@@ -641,7 +641,7 @@ class fe {
     });
   }
 }
-class ve {
+class me {
   constructor() {
     // opacity
     n(this, "backgroundOpacity", {
@@ -670,7 +670,7 @@ class ve {
     });
   }
 }
-class me {
+class xe {
   constructor() {
     // spacing: margin
     n(this, "margin", {
@@ -857,53 +857,53 @@ class me {
     });
   }
 }
-class xe {
+class ye {
   constructor(r) {
     n(this, "classType");
     this.classType = r;
   }
   validateColorType(r) {
     const e = /(primary|secondary|success|info|warning|danger|light-1|light-2|light-3|light-4|dark-1|dark-2|dark-3|dark-4|black|white|transparent)/;
-    return typeof r != "string" || !e.test(r) ? !1 : H.colorType.includes(this.classType);
+    return typeof r != "string" || !e.test(r) ? !1 : W.colorType.includes(this.classType);
   }
   validateSpaceType(r) {
     const e = /(0|3xs|2xs|xs|sm|md|lg|xl|2xl|3xl)/;
-    return typeof r != "string" || !e.test(r) ? !1 : H.spacingType.includes(this.classType);
+    return typeof r != "string" || !e.test(r) ? !1 : W.spacingType.includes(this.classType);
   }
   validateHeadingTextSizeType(r) {
     const e = /(sm|md|lg|xl)/;
-    return typeof r != "string" || !e.test(r) ? !1 : H.headingSizeType.includes(
+    return typeof r != "string" || !e.test(r) ? !1 : W.headingSizeType.includes(
       this.classType
     );
   }
   validateBodyTextSizeType(r) {
     const e = /(xs|sm|md|lg|xl)/;
-    return typeof r != "string" || !e.test(r) ? !1 : H.textType.includes(this.classType);
+    return typeof r != "string" || !e.test(r) ? !1 : W.textType.includes(this.classType);
   }
   validateFontWeightType(r) {
     const e = /(light|normal|bold)/;
-    return typeof r != "string" || !e.test(r) ? !1 : H.fontWeightType.includes(
+    return typeof r != "string" || !e.test(r) ? !1 : W.fontWeightType.includes(
       this.classType
     );
   }
   validateOpacityType(r) {
     const e = /\b(0|[1-9]0|100)\b/;
-    return typeof r != "number" || !e.test(r.toString()) ? !1 : H.scaleType.includes(this.classType);
+    return typeof r != "number" || !e.test(r.toString()) ? !1 : W.scaleType.includes(this.classType);
   }
   validateRangeType(r) {
     const e = /\b([1-9]|1[0-2])\b/;
-    return typeof r != "number" || !e.test(r.toString()) ? !1 : H.borderWidthType.includes(
+    return typeof r != "number" || !e.test(r.toString()) ? !1 : W.borderWidthType.includes(
       this.classType
     );
   }
   validateAlignment(r) {
     const e = /(left|center|right)/;
-    return typeof r != "string" || !e.test(r) ? !1 : H.textAlignType.includes(
+    return typeof r != "string" || !e.test(r) ? !1 : W.textAlignType.includes(
       this.classType
     );
   }
 }
-const H = {
+const W = {
   colorType: [
     "BGCOLOR",
     "BEFOREBG",
@@ -962,7 +962,7 @@ const H = {
     "GAP"
   ]
 };
-class ye {
+class Ce {
   constructor(r, e) {
     n(this, "classType");
     n(this, "classValue");
@@ -973,7 +973,7 @@ class ye {
     n(this, "spacingClass");
     n(this, "textClass");
     n(this, "validator");
-    this.classType = r, this.classValue = e, this.colorClass = new be(), this.headingSizeClass = new fe(), this.borderWidthClass = new pe(), this.opacityClass = new ve(), this.spacingClass = new me(), this.textClass = new he(), this.validator = new xe(r);
+    this.classType = r, this.classValue = e, this.colorClass = new fe(), this.headingSizeClass = new ve(), this.borderWidthClass = new be(), this.opacityClass = new me(), this.spacingClass = new xe(), this.textClass = new pe(), this.validator = new ye(r);
   }
   generateClass() {
     switch (this.classType) {
@@ -1284,7 +1284,7 @@ class ye {
     return this.validator.validateSpaceType(this.classValue) ? this.spacingClass.gap[this.classValue] : " ";
   }
 }
-const w = (s, r) => new ye(s, r).generateClass(), Ce = { class: "w-full flex justify-between gap-2xs" }, ke = { class: "w-full" }, ot = /* @__PURE__ */ A({
+const T = (s, r) => new Ce(s, r).generateClass(), ke = { class: "w-full flex justify-between gap-2xs" }, we = { class: "w-full" }, lt = /* @__PURE__ */ A({
   __name: "Alert",
   props: {
     color: { default: "danger" },
@@ -1297,9 +1297,9 @@ const w = (s, r) => new ye(s, r).generateClass(), Ce = { class: "w-full flex jus
   setup(s, { expose: r, emit: e }) {
     const l = s;
     D();
-    const t = e, d = C(l.show), a = V(() => {
-      const { color: u, rounded: c, shadow: m } = l, f = [w("BGCOLOR", u)];
-      return c && f.push("rounded-md"), m && f.push("drop-shadow-md"), f.join(" ");
+    const t = e, d = k(l.show), a = V(() => {
+      const { color: u, rounded: c, shadow: x } = l, v = [T("BGCOLOR", u)];
+      return c && v.push("rounded-md"), x && v.push("drop-shadow-md"), v.join(" ");
     }), o = (u) => {
       d.value = !1, t("close", u);
     }, i = () => {
@@ -1317,10 +1317,10 @@ const w = (s, r) => new ye(s, r).generateClass(), Ce = { class: "w-full flex jus
       role: "alert",
       "aria-live": "polite",
       "aria-atomic": "true",
-      class: v(["py-[0.75rem] px-[1.25rem] relative", [a.value]])
+      class: f(["py-[0.75rem] px-[1.25rem] relative", [a.value]])
     }, [
-      y("div", Ce, [
-        y("div", ke, [
+      C("div", ke, [
+        C("div", we, [
           B(u.$slots, "default")
         ]),
         u.dismissible ? (g(), h("button", {
@@ -1328,19 +1328,19 @@ const w = (s, r) => new ye(s, r).generateClass(), Ce = { class: "w-full flex jus
           onClick: o,
           class: "flex items-center opacity-60 hover:opacity-40 transition-opacity duration-300 ease-linear"
         }, c[0] || (c[0] = [
-          y("svg", {
+          C("svg", {
             xmlns: "http://www.w3.org/2000/svg",
             viewBox: "0 0 384 512",
             fill: "currentColor",
             class: "h-xs"
           }, [
-            y("path", { d: "M342.6 150.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L192 210.7 86.6 105.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L146.7 256 41.4 361.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L192 301.3 297.4 406.6c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L237.3 256 342.6 150.6z" })
+            C("path", { d: "M342.6 150.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L192 210.7 86.6 105.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L146.7 256 41.4 361.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L192 301.3 297.4 406.6c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L237.3 256 342.6 150.6z" })
           ], -1)
-        ]))) : T("", !0)
+        ]))) : w("", !0)
       ])
-    ], 2)) : T("", !0);
+    ], 2)) : w("", !0);
   }
-}), U = (s, r) => de(
+}), U = (s, r) => ce(
   s,
   (e) => {
     let l = !1;
@@ -1355,12 +1355,12 @@ const w = (s, r) => new ye(s, r).generateClass(), Ce = { class: "w-full flex jus
   { attributes: !0 }
 ), Te = A({
   setup(s, { slots: r }) {
-    const e = C(!1);
+    const e = k(!1);
     return F(() => {
       e.value = !0;
     }), () => e.value && r.default ? r.default() : null;
   }
-}), we = ["accordion", "visible"], Be = /* @__PURE__ */ A({
+}), Be = ["accordion", "visible"], Re = /* @__PURE__ */ A({
   __name: "Collapse",
   props: {
     accordion: {},
@@ -1371,7 +1371,7 @@ const w = (s, r) => new ye(s, r).generateClass(), Ce = { class: "w-full flex jus
   setup(s, { expose: r, emit: e }) {
     const l = s;
     D();
-    const t = e, d = C(), a = C(l.visible), o = () => {
+    const t = e, d = k(), a = k(l.visible), o = () => {
       a.value = !a.value;
     }, i = () => {
       a.value = !0;
@@ -1379,15 +1379,15 @@ const w = (s, r) => new ye(s, r).generateClass(), Ce = { class: "w-full flex jus
       a.value = !1;
     }, c = () => {
       t("open", !0);
-    }, m = () => {
+    }, x = () => {
       t("close", !1);
-    }, f = (p) => {
+    }, v = (p) => {
       p.style.height = "auto", p.style.opacity = "0";
       const _ = getComputedStyle(p).height;
       p.style.height = "0px", p.offsetHeight, p.style.height = _, p.style.opacity = "1";
     }, O = (p) => {
       p.style.height = "auto", p.style.opacity = "1";
-    }, N = (p) => {
+    }, $ = (p) => {
       p.style.height = getComputedStyle(p).height, p.offsetHeight, p.style.height = "0px", p.style.opacity = "0";
     };
     return U(d, (p = !1) => {
@@ -1398,7 +1398,7 @@ const w = (s, r) => new ye(s, r).generateClass(), Ce = { class: "w-full flex jus
         a.value = p;
       }
     ), L(a, (p) => {
-      p === !0 ? c() : p === !1 && m();
+      p === !0 ? c() : p === !1 && x();
     }), r({
       toggle: o,
       close: u,
@@ -1411,18 +1411,18 @@ const w = (s, r) => new ye(s, r).generateClass(), Ce = { class: "w-full flex jus
     }, [
       S(R(Te), null, {
         default: E(() => [
-          S(G, {
+          S(I, {
             name: "collapse",
             tag: "div",
-            onEnter: f,
+            onEnter: v,
             onAfterEnter: O,
-            onLeave: N,
+            onLeave: $,
             class: "overflow-y-clip"
           }, {
             default: E(() => [
-              W(y("div", null, [
-                y("div", {
-                  class: v(p.className)
+              M(C("div", null, [
+                C("div", {
+                  class: f(p.className)
                 }, [
                   B(p.$slots, "default", {}, void 0, !0)
                 ], 2)
@@ -1435,14 +1435,14 @@ const w = (s, r) => new ye(s, r).generateClass(), Ce = { class: "w-full flex jus
         ]),
         _: 3
       })
-    ], 8, we));
+    ], 8, Be));
   }
-}), I = (s, r) => {
+}), N = (s, r) => {
   const e = s.__vccOpts || s;
   for (const [l, t] of r)
     e[l] = t;
   return e;
-}, it = /* @__PURE__ */ I(Be, [["__scopeId", "data-v-5d535dc4"]]), Re = A({
+}, ot = /* @__PURE__ */ N(Re, [["__scopeId", "data-v-5d535dc4"]]), Oe = A({
   props: {
     direction: {
       type: String,
@@ -1473,8 +1473,8 @@ const w = (s, r) => new ye(s, r).generateClass(), Ce = { class: "w-full flex jus
     const r = "invisible opacity-0 group-hover:visible group-hover:opacity-100 z-[100] tooltip", e = V(() => {
       const { color: d, textColor: a } = s;
       return [
-        w("BGCOLOR", d),
-        w("TEXTCOLOR", a)
+        T("BGCOLOR", d),
+        T("TEXTCOLOR", a)
       ].join(" ");
     }), l = V(() => ({ width: `${s.width}px` })), t = V(() => {
       switch (s.direction) {
@@ -1488,7 +1488,7 @@ const w = (s, r) => new ye(s, r).generateClass(), Ce = { class: "w-full flex jus
           return "tooltip-right";
       }
     });
-    return () => le("div", {
+    return () => oe("div", {
       class: [
         r,
         s.customClass,
@@ -1509,7 +1509,7 @@ const w = (s, r) => new ye(s, r).generateClass(), Ce = { class: "w-full flex jus
   unmounted(s) {
     document.body.removeEventListener("click", s.__ClickOutsideHandler);
   }
-}, nt = {
+}, it = {
   mounted(s, r) {
     s.__ClickToggleHandler = (e) => {
       e.preventDefault();
@@ -1529,7 +1529,7 @@ const w = (s, r) => new ye(s, r).generateClass(), Ce = { class: "w-full flex jus
   unmounted(s) {
     s.removeEventListener("click", s.__ClickToggleHandler);
   }
-}, dt = {
+}, nt = {
   mounted(s, r) {
     s.__HandleToggler = (e) => {
       e.preventDefault();
@@ -1562,7 +1562,7 @@ const w = (s, r) => new ye(s, r).generateClass(), Ce = { class: "w-full flex jus
   unmounted(s) {
     s.removeEventListener("click", s.__HandleToggler);
   }
-}, ct = {
+}, dt = {
   mounted(s, r) {
     s.__HandleTooltip = (e, l) => {
       e.classList.add("relative", "group", "overflow-visible");
@@ -1579,7 +1579,7 @@ const w = (s, r) => new ye(s, r).generateClass(), Ce = { class: "w-full flex jus
       let u;
       const c = Object.keys(l.modifiers);
       c.length > 0 && (u = c[0]);
-      const m = S(Re, {
+      const x = S(Oe, {
         direction: u,
         title: t,
         color: d,
@@ -1587,9 +1587,9 @@ const w = (s, r) => new ye(s, r).generateClass(), Ce = { class: "w-full flex jus
         width: o,
         customClass: i
       });
-      J(m, e);
+      Q(x, e);
     }, s.__UnmountTooltip = (e) => {
-      J(null, e);
+      Q(null, e);
     }, s.__HandleTooltip(s, r);
   },
   updated(s, r) {
@@ -1598,13 +1598,13 @@ const w = (s, r) => new ye(s, r).generateClass(), Ce = { class: "w-full flex jus
   unmounted(s) {
     s.__UnmountTooltip(s);
   }
-}, Z = Symbol(), gt = /* @__PURE__ */ A({
+}, ee = Symbol(), ct = /* @__PURE__ */ A({
   __name: "DropdownContainer",
   emits: ["click-outside", "toggle"],
   setup(s, { emit: r }) {
     D();
-    const e = r, l = C(), t = C(!1), d = C(0);
-    Y(Z, {
+    const e = r, l = k(), t = k(!1), d = k(0);
+    Y(ee, {
       active: t,
       buttonHeight: d,
       closeDropdown: () => {
@@ -1620,11 +1620,11 @@ const w = (s, r) => new ye(s, r).generateClass(), Ce = { class: "w-full flex jus
     };
     return F(() => {
       d.value = l.value.scrollHeight;
-    }), (c, m) => W((g(), h("div", {
+    }), (c, x) => M((g(), h("div", {
       class: "relative",
       ref_key: "dropdownTarget",
       ref: l,
-      onKeyup: oe(u, ["esc"])
+      onKeyup: ie(u, ["esc"])
     }, [
       B(c.$slots, "toggler", {
         toggle: o,
@@ -1635,36 +1635,36 @@ const w = (s, r) => new ye(s, r).generateClass(), Ce = { class: "w-full flex jus
       [R(q), i]
     ]);
   }
-}), Oe = /* @__PURE__ */ A({
+}), Ve = /* @__PURE__ */ A({
   __name: "DropdownContent",
   props: {
     className: { default: "" }
   },
   setup(s) {
-    const { height: r } = ce();
+    const { height: r } = ge();
     D();
-    const e = C(), { active: l, buttonHeight: t, closeDropdown: d } = j(
-      Z
+    const e = k(), { active: l, buttonHeight: t, closeDropdown: d } = j(
+      ee
     ), a = V(() => ({ "--button-height": `${t}px` })), o = V(() => {
       if (!(!l || !e.value) && r.value - e.value.getBoundingClientRect().bottom < 0)
         return "dropup-bottom";
     });
-    return (i, u) => (g(), z(G, { name: "dropdown-content" }, {
+    return (i, u) => (g(), z(I, { name: "dropdown-content" }, {
       default: E(() => [
         R(l) ? (g(), h("div", {
           key: 0,
           ref_key: "contentRef",
           ref: e,
-          class: v(["absolute my-2xs max-w-[14rem] w-max overflow-hidden", [o.value, i.className]]),
+          class: f(["absolute my-2xs max-w-[14rem] w-max overflow-hidden", [o.value, i.className]]),
           style: X(a.value)
         }, [
           B(i.$slots, "default", { itemClick: R(d) }, void 0, !0)
-        ], 6)) : T("", !0)
+        ], 6)) : w("", !0)
       ]),
       _: 3
     }));
   }
-}), ut = /* @__PURE__ */ I(Oe, [["__scopeId", "data-v-85c54efe"]]), Ve = ["aria-label", "aria-expanded"], Ae = /* @__PURE__ */ A({
+}), gt = /* @__PURE__ */ N(Ve, [["__scopeId", "data-v-85c54efe"]]), Ae = ["aria-label", "aria-expanded"], _e = /* @__PURE__ */ A({
   __name: "NavDrawer",
   props: {
     color: { default: "dark-2" },
@@ -1684,38 +1684,38 @@ const w = (s, r) => new ye(s, r).generateClass(), Ce = { class: "w-full flex jus
         return i;
       }
     }), a = (i, u, c) => {
-      const m = [
-        w("RINGCOLOR", i),
-        w("OFFSETRING", c)
+      const x = [
+        T("RINGCOLOR", i),
+        T("OFFSETRING", c)
       ];
-      return u && (m.push(w("BORDER", i)), m.push("border")), m.join(" ");
+      return u && (x.push(T("BORDER", i)), x.push("border")), x.join(" ");
     }, o = (i) => [
-      w("BGCOLOR", i),
-      w("BEFOREBG", i),
-      w("AFTERBG", i)
+      T("BGCOLOR", i),
+      T("BEFOREBG", i),
+      T("AFTERBG", i)
     ].join(" ");
     return (i, u) => (g(), h("button", {
-      class: v(["p-3xs rounded-md aspect-square outline-none focus:ring-4 ring-offset-2 transition-all duration-300 ease-linear hover:opacity-70 focus:opacity-70 hamburger__button", a(i.color, i.displayBorder, i.navColor)]),
+      class: f(["p-3xs rounded-md aspect-square outline-none focus:ring-4 ring-offset-2 transition-all duration-300 ease-linear hover:opacity-70 focus:opacity-70 hamburger__button", a(i.color, i.displayBorder, i.navColor)]),
       onClick: t,
       "aria-label": i.toggle ? "Close" : "Open",
       "aria-expanded": i.toggle
     }, [
-      W(y("input", {
+      M(C("input", {
         type: "checkbox",
         "onUpdate:modelValue": u[0] || (u[0] = (c) => d.value = c),
         class: "hidden hamburger__checkbox"
       }, null, 512), [
-        [ie, d.value]
+        [ne, d.value]
       ]),
-      y("div", {
-        class: v(["relative h-[3px] w-sm hamburger__icon before:w-sm after:w-sm before:h-[3px] after:h-[3px] transition-all duration-300 ease-linear", o(i.color)])
+      C("div", {
+        class: f(["relative h-[3px] w-sm hamburger__icon before:w-sm after:w-sm before:h-[3px] after:h-[3px] transition-all duration-300 ease-linear", o(i.color)])
       }, null, 2)
-    ], 10, Ve));
+    ], 10, Ae));
   }
-}), ee = /* @__PURE__ */ I(Ae, [["__scopeId", "data-v-1b9c33a1"]]), _e = { class: "flex flex-wrap items-center py-xs md:py-2xs mx-xs md:mx-sm align-middle justify-between sm:max-w-[640px] md:max-w-[768px] lg:max-w-[1024px] xl:max-w-[1280px] 2xl:max-w-[1536px]" }, Le = { class: "min-h-[24px]" }, Se = { class: "ml-auto" }, Ee = {
+}), te = /* @__PURE__ */ N(_e, [["__scopeId", "data-v-1b9c33a1"]]), Le = { class: "flex flex-wrap items-center py-xs md:py-2xs mx-xs md:mx-sm align-middle justify-between sm:max-w-[640px] md:max-w-[768px] lg:max-w-[1024px] xl:max-w-[1280px] 2xl:max-w-[1536px]" }, Se = { class: "min-h-[24px]" }, Ee = { class: "ml-auto" }, De = {
   key: 0,
   class: "hidden lg:block"
-}, De = { class: "overflow-hidden lg:hidden" }, Ge = { key: 0 }, Ie = /* @__PURE__ */ A({
+}, Ge = { class: "overflow-hidden lg:hidden" }, Ie = { key: 0 }, He = /* @__PURE__ */ A({
   __name: "HeaderHorizontal",
   props: {
     bgColor: { default: "light-1" },
@@ -1728,7 +1728,7 @@ const w = (s, r) => new ye(s, r).generateClass(), Ce = { class: "w-full flex jus
   },
   emits: ["toggle-drawer"],
   setup(s, { expose: r, emit: e }) {
-    const l = s, t = D(), d = C(!1), { y: a } = ge(), o = e, i = () => {
+    const l = s, t = D(), d = k(!1), { y: a } = ue(), o = e, i = () => {
       d.value = !1;
     }, u = (b) => {
       d.value = !d.value, o("toggle-drawer", b, d.value);
@@ -1736,28 +1736,28 @@ const w = (s, r) => new ye(s, r).generateClass(), Ce = { class: "w-full flex jus
       b.style.height = "auto";
       const p = getComputedStyle(b).height;
       b.style.height = "0px", b.offsetHeight, b.style.height = p;
-    }, m = (b) => {
+    }, x = (b) => {
       b.style.height = "auto";
-    }, f = (b) => {
+    }, v = (b) => {
       b.style.height = getComputedStyle(b).height, b.offsetHeight, b.style.height = "0px";
     }, O = V(() => {
-      const { bgColor: b, sticky: p } = l, _ = [w("BGCOLOR", b)];
+      const { bgColor: b, sticky: p } = l, _ = [T("BGCOLOR", b)];
       return p === "all" ? (_.push("sticky top-0"), _.join(" ")) : p === "tablet" ? (_.push("md:sticky top-0"), _.join(" ")) : (p === "pc" && _.push("lg:sticky top-0"), _.join(" "));
-    }), N = V(() => {
+    }), $ = V(() => {
       const { fadeInOnScroll: b, scrollDistance: p } = l;
       return b ? a.value >= p ? "lg:shadow-md bg-opacity-70" : "bg-opacity-100" : "";
     });
     return r({
       headerClose: i
     }), (b, p) => (g(), h("header", {
-      class: v(["w-full items-center z-50 transition ease-in duration-500 delay-150", [N.value, O.value]])
+      class: f(["w-full items-center z-50 transition ease-in duration-500 delay-150", [$.value, O.value]])
     }, [
-      y("nav", _e, [
-        y("div", Le, [
+      C("nav", Le, [
+        C("div", Se, [
           B(b.$slots, "content", {}, void 0, !0)
         ]),
-        y("div", Se, [
-          S(ee, {
+        C("div", Ee, [
+          S(te, {
             color: b.drawerBtnColor,
             "display-border": b.drawerBtnBorder,
             class: "block lg:hidden",
@@ -1765,40 +1765,40 @@ const w = (s, r) => new ye(s, r).generateClass(), Ce = { class: "w-full flex jus
             toggle: d.value,
             "nav-color": b.bgColor
           }, null, 8, ["color", "display-border", "toggle", "nav-color"]),
-          t["content-right"] ? (g(), h("div", Ee, [
+          t["content-right"] ? (g(), h("div", De, [
             B(b.$slots, "content-right", {}, void 0, !0)
-          ])) : T("", !0)
+          ])) : w("", !0)
         ])
       ]),
-      y("div", De, [
-        S(G, {
+      C("div", Ge, [
+        S(I, {
           name: "collapse",
           onEnter: c,
-          onAfterEnter: m,
-          onLeave: f
+          onAfterEnter: x,
+          onLeave: v
         }, {
           default: E(() => [
             d.value ? (g(), h("div", {
               key: 0,
-              class: v(["bg-opacity-80 rounded-md my-2xs mx-xs overflow-hidden", R(w)("BGCOLOR", b.mobileMenuBgColor)])
+              class: f(["bg-opacity-80 rounded-md my-2xs mx-xs overflow-hidden", R(T)("BGCOLOR", b.mobileMenuBgColor)])
             }, [
-              t["mobile-content"] ? (g(), h("div", Ge, [
+              t["mobile-content"] ? (g(), h("div", Ie, [
                 B(b.$slots, "mobile-content", { headerClose: i }, void 0, !0)
-              ])) : T("", !0)
-            ], 2)) : T("", !0)
+              ])) : w("", !0)
+            ], 2)) : w("", !0)
           ]),
           _: 3
         })
       ])
     ], 2));
   }
-}), ht = /* @__PURE__ */ I(Ie, [["__scopeId", "data-v-56d20376"]]), He = { class: "flex flex-col justify-between h-full" }, Ne = { key: 0 }, We = { class: "block lg:hidden relative z-40" }, $e = {
+}), ut = /* @__PURE__ */ N(He, [["__scopeId", "data-v-56d20376"]]), Ne = { class: "flex flex-col justify-between h-full" }, We = { key: 0 }, $e = { class: "block lg:hidden relative z-40" }, Me = {
   key: 0,
   class: "block fixed lg:hidden top-0 right-0 mr-xs mt-xs z-50"
-}, Me = {
+}, Fe = {
   key: 0,
   class: "h-full"
-}, Fe = /* @__PURE__ */ A({
+}, Xe = /* @__PURE__ */ A({
   __name: "HeaderVertical",
   props: {
     bgColor: { default: "light-1" },
@@ -1808,38 +1808,38 @@ const w = (s, r) => new ye(s, r).generateClass(), Ce = { class: "w-full flex jus
   },
   emits: ["toggle-drawer"],
   setup(s, { expose: r, emit: e }) {
-    const l = s, t = D(), d = e, a = C(!1), o = (c) => {
+    const l = s, t = D(), d = e, a = k(!1), o = (c) => {
       a.value = !a.value, d("toggle-drawer", c, a.value);
     }, i = () => {
       a.value = !1;
     }, u = V(() => ({ "--header-width": `${l.headerWidth}px` }));
     return F(() => {
       const c = K(document);
-      L(a, (m) => {
-        c.value = m;
+      L(a, (x) => {
+        c.value = x;
       });
     }), r({
       headerClose: i
-    }), (c, m) => (g(), h("header", {
+    }), (c, x) => (g(), h("header", {
       class: "relative",
       style: X(u.value)
     }, [
-      y("nav", {
-        class: v(["hidden lg:block lg:sticky lg:top-0 lg:left-0 lg:h-[100vh] py-sm header-desktop overscroll-contain overflow-y-scroll", [R(w)("BGCOLOR", c.bgColor)]])
+      C("nav", {
+        class: f(["hidden lg:block lg:sticky lg:top-0 lg:left-0 lg:h-[100vh] py-sm header-desktop overscroll-contain overflow-y-scroll", [R(T)("BGCOLOR", c.bgColor)]])
       }, [
-        y("div", He, [
-          y("div", null, [
+        C("div", Ne, [
+          C("div", null, [
             B(c.$slots, "content", {}, void 0, !0)
           ]),
-          t["content-bottom"] ? (g(), h("div", Ne, [
+          t["content-bottom"] ? (g(), h("div", We, [
             B(c.$slots, "content-bottom", {}, void 0, !0)
-          ])) : T("", !0)
+          ])) : w("", !0)
         ])
       ], 2),
-      (g(), z(ne, { to: "body" }, [
-        y("div", We, [
-          t["mobile-content"] ? (g(), h("div", $e, [
-            S(ee, {
+      (g(), z(de, { to: "body" }, [
+        C("div", $e, [
+          t["mobile-content"] ? (g(), h("div", Me, [
+            S(te, {
               color: c.drawerBtnColor,
               "display-border": c.drawerBtnBorder,
               class: "block lg:hidden relative",
@@ -1847,20 +1847,20 @@ const w = (s, r) => new ye(s, r).generateClass(), Ce = { class: "w-full flex jus
               toggle: a.value,
               "nav-color": c.bgColor
             }, null, 8, ["color", "display-border", "toggle", "nav-color"])
-          ])) : T("", !0),
-          S(G, {
+          ])) : w("", !0),
+          S(I, {
             name: "slide-down",
             appear: ""
           }, {
             default: E(() => [
               a.value ? (g(), h("nav", {
                 key: 0,
-                class: v(["fixed inset-0 overflow-y-scroll overscroll-contain py-lg px-sm", R(w)("BGCOLOR", c.bgColor)])
+                class: f(["fixed inset-0 overflow-y-scroll overscroll-contain py-lg px-sm", R(T)("BGCOLOR", c.bgColor)])
               }, [
-                t["mobile-content"] ? (g(), h("div", Me, [
+                t["mobile-content"] ? (g(), h("div", Fe, [
                   B(c.$slots, "mobile-content", { headerClose: i }, void 0, !0)
-                ])) : T("", !0)
-              ], 2)) : T("", !0)
+                ])) : w("", !0)
+              ], 2)) : w("", !0)
             ]),
             _: 3
           })
@@ -1868,10 +1868,7 @@ const w = (s, r) => new ye(s, r).generateClass(), Ce = { class: "w-full flex jus
       ]))
     ], 4));
   }
-}), pt = /* @__PURE__ */ I(Fe, [["__scopeId", "data-v-c48d5ce1"]]), Xe = ["visible"], ze = {
-  key: 0,
-  class: "vertical-placement fixed w-full max-w-md z-[110] px-xs"
-}, Pe = {
+}), ht = /* @__PURE__ */ N(Xe, [["__scopeId", "data-v-c48d5ce1"]]), ze = ["visible"], Pe = {
   key: 0,
   class: "sticky top-0"
 }, Ye = {
@@ -1888,53 +1885,65 @@ const w = (s, r) => new ye(s, r).generateClass(), Ce = { class: "w-full flex jus
     noHeader: { type: Boolean, default: !1 },
     color: { default: "light-1" },
     backdropColor: { default: "dark-4" },
-    placement: { default: "center" }
+    placement: { default: "center" },
+    modalWidth: { default: "small" }
   },
   emits: ["open", "close"],
   setup(s, { expose: r, emit: e }) {
-    const l = s, t = D(), d = e, a = C(), o = C(l.visible), i = C(!1), u = () => {
+    const l = s, t = D(), d = e, a = k(), o = k(l.visible), i = k(!1), u = () => {
       o.value = !o.value;
     }, c = () => {
       o.value = !0;
-    }, m = () => {
+    }, x = () => {
       i.value === !0 && (o.value = !1);
-    }, f = () => {
+    }, v = () => {
       d("open", !0);
     }, O = () => {
       d("close", !1);
-    }, N = V(() => {
-      let x;
-      return l.placement === "top" ? x = 25 : l.placement === "bottom" ? x = 75 : x = 50, { "--vertical-placement": x + "%" };
-    }), b = () => {
+    }, $ = V(() => {
+      const y = {
+        top: 25,
+        center: 50,
+        bottom: 75
+      }, { placement: G } = l;
+      return { "--vertical-placement": (y[G] ?? y.center) + "%" };
+    }), b = V(() => {
+      const { modalWidth: y } = l, G = {
+        small: "max-w-md",
+        medium: "max-w-md md:max-w-xl",
+        large: "max-w-md md:max-w-4xl"
+      };
+      return G[y] ?? G.small;
+    }), p = () => {
       i.value = !0;
-    }, p = () => {
+    }, _ = () => {
       i.value = !1;
     };
-    return U(a, (x = !1) => {
-      o.value = x;
+    return U(a, (y = !1) => {
+      o.value = y;
     }), L(
       () => l.visible,
-      (x) => {
-        o.value = x;
+      (y) => {
+        o.value = y;
       }
-    ), L(o, (x) => {
-      x === !0 ? f() : x === !1 && i.value === !0 && O();
+    ), L(o, (y) => {
+      y === !0 ? v() : y === !1 && i.value === !0 && O();
     }), F(() => {
-      const x = K(document);
-      L(o, ($) => {
-        x.value = $;
+      const y = K(document);
+      L(o, (G) => {
+        y.value = G;
       });
     }), r({
       toggle: u,
-      close: m,
+      close: x,
       open: c
-    }), (x, $) => (g(), h("div", {
-      style: X(N.value),
+    }), (y, G) => (g(), h("div", {
+      style: X($.value),
       visible: o.value,
       ref_key: "modalRef",
       ref: a
     }, [
-      x.noBackdrop ? T("", !0) : (g(), z(G, {
+      y.noBackdrop ? w("", !0) : (g(), z(I, {
         key: 0,
         name: "fade",
         appear: "",
@@ -1943,69 +1952,72 @@ const w = (s, r) => new ye(s, r).generateClass(), Ce = { class: "w-full flex jus
         default: E(() => [
           o.value ? (g(), h("section", {
             key: 0,
-            onClick: m,
-            class: v(["fixed inset-0 overflow-y-auto bg-opacity-70 backdrop-blur z-[100]", R(w)("BGCOLOR", x.backdropColor)])
-          }, null, 2)) : T("", !0)
+            onClick: x,
+            class: f(["fixed inset-0 overflow-y-auto bg-opacity-70 backdrop-blur z-[100]", R(T)("BGCOLOR", y.backdropColor)])
+          }, null, 2)) : w("", !0)
         ]),
         _: 1
       })),
-      S(G, {
+      S(I, {
         name: "slide-down",
         tag: "div",
-        onAfterEnter: b,
-        onAfterLeave: p,
+        onAfterEnter: p,
+        onAfterLeave: _,
         appear: ""
       }, {
         default: E(() => [
-          o.value ? (g(), h("div", ze, [
-            W((g(), h("div", {
-              class: v([[R(w)("BGCOLOR", x.color), x.className], "relative overscroll-contain overflow-y-scroll max-h-[80vh] md:max-h-[60vh]"])
+          o.value ? (g(), h("div", {
+            key: 0,
+            class: f(["vertical-placement fixed w-full z-[110] px-xs", b.value])
+          }, [
+            M((g(), h("div", {
+              class: f([[R(T)("BGCOLOR", y.color), y.className], "relative overscroll-contain overflow-y-scroll max-h-[80vh] md:max-h-[60vh]"])
             }, [
-              x.noHeader ? T("", !0) : (g(), h("div", Pe, [
-                B(x.$slots, "header", {
-                  close: m,
+              y.noHeader ? w("", !0) : (g(), h("div", Pe, [
+                B(y.$slots, "header", {
+                  close: x,
                   status: o.value
                 }, () => [
-                  y("div", {
-                    class: v(["flex justify-between items-center p-xs border-b-2", R(w)("BGCOLOR", x.color)])
+                  C("div", {
+                    class: f(["flex justify-between items-center p-xs border-b-2", R(T)("BGCOLOR", y.color)])
                   }, [
-                    x.title ? (g(), h("h3", {
+                    y.title ? (g(), h("h3", {
                       key: 0,
-                      class: v(["h3-md", R(w)("TEXTCOLOR", x.titleColor)])
-                    }, Q(x.title), 3)) : T("", !0),
-                    y("button", { onClick: m }, [
+                      class: f(["h3-md", R(T)("TEXTCOLOR", y.titleColor)])
+                    }, Z(y.title), 3)) : w("", !0),
+                    C("button", { onClick: x }, [
                       (g(), h("svg", {
                         xmlns: "http://www.w3.org/2000/svg",
                         height: "1em",
                         viewBox: "0 0 384 512",
-                        class: v(["hover:opacity-75 focus:opacity-75 transition-opacity duration-300 ease-in h-sm", [R(w)("SVGFILL", x.titleColor)]])
-                      }, $[0] || ($[0] = [
-                        y("path", { d: "M342.6 150.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L192 210.7 86.6 105.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L146.7 256 41.4 361.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L192 301.3 297.4 406.6c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L237.3 256 342.6 150.6z" }, null, -1)
+                        class: f(["hover:opacity-75 focus:opacity-75 transition-opacity duration-300 ease-in h-sm", [R(T)("SVGFILL", y.titleColor)]])
+                      }, G[0] || (G[0] = [
+                        C("path", { d: "M342.6 150.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L192 210.7 86.6 105.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L146.7 256 41.4 361.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L192 301.3 297.4 406.6c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L237.3 256 342.6 150.6z" }, null, -1)
                       ]), 2))
                     ])
                   ], 2)
                 ], !0)
               ])),
-              B(x.$slots, "body", {
-                close: m,
+              B(y.$slots, "body", {
+                close: x,
                 status: o.value
               }, void 0, !0),
               t.footer ? (g(), h("div", Ye, [
-                B(x.$slots, "footer", {
-                  close: m,
+                B(y.$slots, "footer", {
+                  close: x,
                   status: o.value
                 }, void 0, !0)
-              ])) : T("", !0)
+              ])) : w("", !0)
             ], 2)), [
-              [R(q), m]
+              [R(q), x]
             ])
-          ])) : T("", !0)
+          ], 2)) : w("", !0)
         ]),
         _: 3
       })
-    ], 12, Xe));
+    ], 12, ze));
   }
-}), bt = /* @__PURE__ */ I(je, [["__scopeId", "data-v-1302a12c"]]), Ke = ["visible"], Ue = { class: "sidebar-body-height" }, qe = /* @__PURE__ */ A({
+}), pt = /* @__PURE__ */ N(je, [["__scopeId", "data-v-37ba23d2"]]), Ke = ["visible"], Ue = { class: "sidebar-body-height" }, qe = /* @__PURE__ */ A({
   __name: "Sidebar",
   props: {
     title: {},
@@ -2021,50 +2033,53 @@ const w = (s, r) => new ye(s, r).generateClass(), Ce = { class: "w-full flex jus
   },
   emits: ["open", "close"],
   setup(s, { expose: r, emit: e }) {
-    const l = s, t = D(), d = e, a = C(l.visible), o = C(!1), i = C(), u = C(), c = C(), m = () => {
+    const l = s, t = D(), d = e, a = k(l.visible), o = k(!1), i = k(), u = k(), c = k(), x = () => {
       a.value = !a.value;
-    }, f = () => {
+    }, v = () => {
       a.value = !0;
     }, O = () => {
       o.value === !0 && (a.value = !1);
-    }, N = () => {
+    }, $ = () => {
       d("open", !0);
     }, b = () => {
       d("close", !1);
-    }, p = V(() => ({
-      "--sidebar-width": `${l.width}px`,
-      "--header-height": u.value && a.value ? u.value.scrollHeight + "px" : "0px",
-      "--footer-height": c.value && a.value ? c.value.scrollHeight + "px" : "0px"
-    })), _ = V(() => l.placement === "left" ? "sidebar-left" : "sidebar-right"), x = () => {
+    }, p = V(() => {
+      const m = (H) => H && a.value ? `${H.scrollHeight}px` : "0px";
+      return {
+        "--sidebar-width": `${l.width}px`,
+        "--header-height": m(u.value),
+        "--footer-height": m(c.value)
+      };
+    }), _ = V(() => l.placement === "left" ? "sidebar-left" : "sidebar-right"), J = () => {
       o.value = !0;
-    }, $ = () => {
+    }, y = () => {
       o.value = !1;
     };
-    return U(i, (k = !1) => {
-      a.value = k;
+    return U(i, (m = !1) => {
+      a.value = m;
     }), L(
       () => l.visible,
-      (k) => {
-        a.value = k;
+      (m) => {
+        a.value = m;
       }
-    ), L(a, (k) => {
-      k === !0 ? N() : k === !1 && o.value === !0 && b();
+    ), L(a, (m) => {
+      m === !0 ? $() : m === !1 && o.value === !0 && b();
     }), F(() => {
-      const k = K(document);
-      L(a, (M) => {
-        k.value = M;
+      const m = K(document);
+      L(a, (H) => {
+        m.value = H;
       });
     }), r({
-      toggle: m,
-      open: f,
+      toggle: x,
+      open: v,
       close: O
-    }), (k, M) => (g(), h("div", {
+    }), (m, H) => (g(), h("div", {
       style: X(p.value),
       visible: a.value,
       ref_key: "sidebarRef",
       ref: i
     }, [
-      k.noBackdrop ? T("", !0) : (g(), z(G, {
+      m.noBackdrop ? w("", !0) : (g(), z(I, {
         key: 0,
         name: "fade",
         appear: "",
@@ -2074,39 +2089,39 @@ const w = (s, r) => new ye(s, r).generateClass(), Ce = { class: "w-full flex jus
           a.value ? (g(), h("section", {
             key: 0,
             onClick: O,
-            class: v(["fixed inset-0 overflow-y-auto bg-opacity-70 backdrop-blur z-[100]", R(w)("BGCOLOR", k.backdropColor)])
-          }, null, 2)) : T("", !0)
+            class: f(["fixed inset-0 overflow-y-auto bg-opacity-70 backdrop-blur z-[100]", R(T)("BGCOLOR", m.backdropColor)])
+          }, null, 2)) : w("", !0)
         ]),
         _: 1
       })),
-      S(G, {
+      S(I, {
         name: _.value,
-        onAfterEnter: x,
-        onAfterLeave: $,
+        onAfterEnter: J,
+        onAfterLeave: y,
         appear: ""
       }, {
         default: E(() => [
-          a.value ? W((g(), h("div", {
+          a.value ? M((g(), h("div", {
             key: 0,
-            class: v(["sidebar-body fixed h-full overflow-hidden inset-y-0 shadow z-[110]", [k.placement === "left" ? "left-0" : "right-0"]])
+            class: f(["sidebar-body fixed h-full overflow-hidden inset-y-0 shadow z-[110]", [m.placement === "left" ? "left-0" : "right-0"]])
           }, [
-            y("div", {
-              class: v(["relative h-full overscroll-contain overflow-y-scroll", [R(w)("BGCOLOR", k.color), k.className]])
+            C("div", {
+              class: f(["relative h-full overscroll-contain overflow-y-scroll", [R(T)("BGCOLOR", m.color), m.className]])
             }, [
-              k.noHeader ? T("", !0) : (g(), h("div", {
+              m.noHeader ? w("", !0) : (g(), h("div", {
                 key: 0,
                 class: "sticky top-0 z-10",
                 ref_key: "headerRef",
                 ref: u
               }, [
-                B(k.$slots, "header", {
+                B(m.$slots, "header", {
                   close: O,
                   status: a.value
                 }, () => [
-                  y("div", {
-                    class: v(["flex justify-between items-center p-xs", R(w)("BGCOLOR", k.color)])
+                  C("div", {
+                    class: f(["flex justify-between items-center p-xs", R(T)("BGCOLOR", m.color)])
                   }, [
-                    k.placement === "right" ? (g(), h("button", {
+                    m.placement === "right" ? (g(), h("button", {
                       key: 0,
                       onClick: O
                     }, [
@@ -2114,16 +2129,16 @@ const w = (s, r) => new ye(s, r).generateClass(), Ce = { class: "w-full flex jus
                         xmlns: "http://www.w3.org/2000/svg",
                         height: "1em",
                         viewBox: "0 0 384 512",
-                        class: v(["hover:opacity-75 focus:opacity-75 transition-opacity duration-300 ease-in h-sm", [R(w)("SVGFILL", k.titleColor)]])
-                      }, M[0] || (M[0] = [
-                        y("path", { d: "M342.6 150.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L192 210.7 86.6 105.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L146.7 256 41.4 361.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L192 301.3 297.4 406.6c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L237.3 256 342.6 150.6z" }, null, -1)
+                        class: f(["hover:opacity-75 focus:opacity-75 transition-opacity duration-300 ease-in h-sm", [R(T)("SVGFILL", m.titleColor)]])
+                      }, H[0] || (H[0] = [
+                        C("path", { d: "M342.6 150.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L192 210.7 86.6 105.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L146.7 256 41.4 361.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L192 301.3 297.4 406.6c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L237.3 256 342.6 150.6z" }, null, -1)
                       ]), 2))
-                    ])) : T("", !0),
-                    k.title ? (g(), h("h3", {
+                    ])) : w("", !0),
+                    m.title ? (g(), h("h3", {
                       key: 1,
-                      class: v(["h3-md", R(w)("TEXTCOLOR", k.titleColor)])
-                    }, Q(k.title), 3)) : T("", !0),
-                    k.placement === "left" ? (g(), h("button", {
+                      class: f(["h3-md", R(T)("TEXTCOLOR", m.titleColor)])
+                    }, Z(m.title), 3)) : w("", !0),
+                    m.placement === "left" ? (g(), h("button", {
                       key: 2,
                       onClick: O
                     }, [
@@ -2131,16 +2146,16 @@ const w = (s, r) => new ye(s, r).generateClass(), Ce = { class: "w-full flex jus
                         xmlns: "http://www.w3.org/2000/svg",
                         height: "1em",
                         viewBox: "0 0 384 512",
-                        class: v(["hover:opacity-75 focus:opacity-75 transition-opacity duration-300 ease-in h-sm", [R(w)("SVGFILL", k.titleColor)]])
-                      }, M[1] || (M[1] = [
-                        y("path", { d: "M342.6 150.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L192 210.7 86.6 105.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L146.7 256 41.4 361.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L192 301.3 297.4 406.6c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L237.3 256 342.6 150.6z" }, null, -1)
+                        class: f(["hover:opacity-75 focus:opacity-75 transition-opacity duration-300 ease-in h-sm", [R(T)("SVGFILL", m.titleColor)]])
+                      }, H[1] || (H[1] = [
+                        C("path", { d: "M342.6 150.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L192 210.7 86.6 105.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L146.7 256 41.4 361.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L192 301.3 297.4 406.6c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L237.3 256 342.6 150.6z" }, null, -1)
                       ]), 2))
-                    ])) : T("", !0)
+                    ])) : w("", !0)
                   ], 2)
                 ], !0)
               ], 512)),
-              y("div", Ue, [
-                B(k.$slots, "body", {
+              C("div", Ue, [
+                B(m.$slots, "body", {
                   close: O,
                   status: a.value
                 }, void 0, !0)
@@ -2151,21 +2166,21 @@ const w = (s, r) => new ye(s, r).generateClass(), Ce = { class: "w-full flex jus
                 ref_key: "footerRef",
                 ref: c
               }, [
-                B(k.$slots, "footer", {
+                B(m.$slots, "footer", {
                   close: O,
                   status: a.value
                 }, void 0, !0)
-              ], 512)) : T("", !0)
+              ], 512)) : w("", !0)
             ], 2)
           ], 2)), [
             [R(q), O]
-          ]) : T("", !0)
+          ]) : w("", !0)
         ]),
         _: 3
       }, 8, ["name"])
     ], 12, Ke));
   }
-}), ft = /* @__PURE__ */ I(qe, [["__scopeId", "data-v-15e6bcbe"]]), te = Symbol(), Je = { class: "container-hts transition-[max-height] duration-300 grid grid-cols-1 grid-rows-1" }, Qe = /* @__PURE__ */ A({
+}), bt = /* @__PURE__ */ N(qe, [["__scopeId", "data-v-048c4fe4"]]), re = Symbol(), Je = { class: "container-hts transition-[max-height] duration-300 grid grid-cols-1 grid-rows-1" }, Qe = /* @__PURE__ */ A({
   __name: "TabContainer",
   props: {
     bodyClass: { default: "" },
@@ -2174,8 +2189,8 @@ const w = (s, r) => new ye(s, r).generateClass(), Ce = { class: "w-full flex jus
   },
   setup(s, { expose: r }) {
     D();
-    const e = C(0), l = C(0), t = C("slide-next");
-    Y(te, {
+    const e = k(0), l = k(0), t = k("slide-next");
+    Y(re, {
       activeTabIdx: e,
       containerHeight: l,
       updateHeight: (i) => {
@@ -2193,11 +2208,11 @@ const w = (s, r) => new ye(s, r).generateClass(), Ce = { class: "w-full flex jus
         i > u ? t.value = "slide-next" : t.value = "slide-prev";
       }
     ), (i, u) => (g(), h("div", {
-      class: v(i.bodyClass),
+      class: f(i.bodyClass),
       style: X(o.value)
     }, [
-      y("div", {
-        class: v(i.btnContainerClass),
+      C("div", {
+        class: f(i.btnContainerClass),
         role: "tablist"
       }, [
         B(i.$slots, "tab-button", {
@@ -2205,11 +2220,11 @@ const w = (s, r) => new ye(s, r).generateClass(), Ce = { class: "w-full flex jus
           activeTab: e.value
         }, void 0, !0)
       ], 2),
-      y("div", {
-        class: v(i.contentContainerClass)
+      C("div", {
+        class: f(i.contentContainerClass)
       }, [
-        y("div", Je, [
-          S(G, { name: t.value }, {
+        C("div", Je, [
+          S(I, { name: t.value }, {
             default: E(() => [
               (g(), h("div", {
                 key: e.value,
@@ -2224,7 +2239,7 @@ const w = (s, r) => new ye(s, r).generateClass(), Ce = { class: "w-full flex jus
       ], 2)
     ], 6));
   }
-}), vt = /* @__PURE__ */ I(Qe, [["__scopeId", "data-v-1014eb3f"]]), Ze = ["id"], mt = /* @__PURE__ */ A({
+}), ft = /* @__PURE__ */ N(Qe, [["__scopeId", "data-v-1014eb3f"]]), Ze = ["id"], vt = /* @__PURE__ */ A({
   __name: "TabContent",
   props: {
     tabNumber: {},
@@ -2233,13 +2248,13 @@ const w = (s, r) => new ye(s, r).generateClass(), Ce = { class: "w-full flex jus
   },
   setup(s) {
     const r = s, { activeTabIdx: e, updateHeight: l } = j(
-      te
-    ), t = C(null), { height: d } = ue(t), a = V(() => e.value === r.tabNumber ? (l(d.value), !0) : !1);
-    return (o, i) => W((g(), h("div", {
+      re
+    ), t = k(null), { height: d } = he(t), a = V(() => e.value === r.tabNumber ? (l(d.value), !0) : !1);
+    return (o, i) => M((g(), h("div", {
       ref_key: "slotRef",
       ref: t,
       id: o.id,
-      class: v([o.tabClass, "w-full"]),
+      class: f([o.tabClass, "w-full"]),
       role: "tabpanel",
       tabindex: "-1"
     }, [
@@ -2248,7 +2263,7 @@ const w = (s, r) => new ye(s, r).generateClass(), Ce = { class: "w-full flex jus
       [P, a.value]
     ]);
   }
-}), re = Symbol(), et = /* @__PURE__ */ A({
+}), se = Symbol(), et = /* @__PURE__ */ A({
   __name: "CarouselContainer",
   props: {
     bodyClass: { default: "" },
@@ -2258,57 +2273,57 @@ const w = (s, r) => new ye(s, r).generateClass(), Ce = { class: "w-full flex jus
     loop: { type: Boolean, default: !1 }
   },
   setup(s, { expose: r }) {
-    const e = s, l = D(), t = C(0), d = C([]), a = C(0), o = C("slide-next"), i = (f) => {
-      d.value.push(f), a.value = [...new Set(d.value)].length;
-    }, u = (f) => {
-      t.value = f;
+    const e = s, l = D(), t = k(0), d = k([]), a = k(0), o = k("slide-next"), i = (v) => {
+      d.value.push(v), a.value = [...new Set(d.value)].length;
+    }, u = (v) => {
+      t.value = v;
     };
-    Y(re, {
+    Y(se, {
       activeIdx: t,
       setSlide: i
     });
     const c = () => {
-      const { loop: f } = e;
-      f && t.value === a.value - 1 ? t.value = 0 : t.value < a.value - 1 && (t.value = t.value + 1);
-    }, m = () => {
-      const { loop: f } = e;
-      f && t.value === 0 ? t.value = a.value - 1 : t.value > 0 && (t.value = t.value - 1);
+      const { loop: v } = e;
+      v && t.value === a.value - 1 ? t.value = 0 : t.value < a.value - 1 && (t.value = t.value + 1);
+    }, x = () => {
+      const { loop: v } = e;
+      v && t.value === 0 ? t.value = a.value - 1 : t.value > 0 && (t.value = t.value - 1);
     };
     return L(
       () => t.value,
-      (f, O) => {
-        f > O || f === 0 && O === a.value - 1 ? o.value = "slide-next" : o.value = "slide-prev";
+      (v, O) => {
+        v > O || v === 0 && O === a.value - 1 ? o.value = "slide-next" : o.value = "slide-prev";
       }
     ), r({
       numberOfSlides: a,
-      prev: m,
+      prev: x,
       next: c,
       setActive: u
-    }), (f, O) => (g(), h("div", {
-      class: v([f.bodyClass, "relative overflow-x-hidden"])
+    }), (v, O) => (g(), h("div", {
+      class: f([v.bodyClass, "relative overflow-x-hidden"])
     }, [
       l["controller-top"] ? (g(), h("div", {
         key: 0,
-        class: v(f.controllerTopClass)
+        class: f(v.controllerTopClass)
       }, [
-        B(f.$slots, "controller-top", {
+        B(v.$slots, "controller-top", {
           next: c,
-          prev: m,
+          prev: x,
           setActive: u,
           activeSlide: t.value,
           numberOfSlides: a.value
         }, void 0, !0)
-      ], 2)) : T("", !0),
-      y("div", {
-        class: v(["grid grid-cols-1 grid-rows-1", f.contentContainerClass])
+      ], 2)) : w("", !0),
+      C("div", {
+        class: f(["grid grid-cols-1 grid-rows-1", v.contentContainerClass])
       }, [
-        S(G, { name: o.value }, {
+        S(I, { name: o.value }, {
           default: E(() => [
             (g(), h("div", {
               key: t.value,
               class: "col-start-1 col-end-1 row-start-1 row-end-1"
             }, [
-              B(f.$slots, "content", {}, void 0, !0)
+              B(v.$slots, "content", {}, void 0, !0)
             ]))
           ]),
           _: 3
@@ -2316,19 +2331,19 @@ const w = (s, r) => new ye(s, r).generateClass(), Ce = { class: "w-full flex jus
       ], 2),
       l["controller-bottom"] ? (g(), h("div", {
         key: 1,
-        class: v(f.controllerBottomClass)
+        class: f(v.controllerBottomClass)
       }, [
-        B(f.$slots, "controller-bottom", {
+        B(v.$slots, "controller-bottom", {
           next: c,
-          prev: m,
+          prev: x,
           setActive: u,
           activeSlide: t.value,
           numberOfSlides: a.value
         }, void 0, !0)
-      ], 2)) : T("", !0)
+      ], 2)) : w("", !0)
     ], 2));
   }
-}), xt = /* @__PURE__ */ I(et, [["__scopeId", "data-v-05e275d0"]]), tt = ["id"], yt = /* @__PURE__ */ A({
+}), mt = /* @__PURE__ */ N(et, [["__scopeId", "data-v-05e275d0"]]), tt = ["id"], xt = /* @__PURE__ */ A({
   __name: "CarouselContent",
   props: {
     slideNumber: {},
@@ -2337,18 +2352,18 @@ const w = (s, r) => new ye(s, r).generateClass(), Ce = { class: "w-full flex jus
   },
   setup(s) {
     const r = s, { activeIdx: e, setSlide: l } = j(
-      re
-    ), t = C(null);
+      se
+    ), t = k(null);
     l(r.slideNumber), D();
     const d = V(() => {
       const { slideNumber: a } = r;
       return e.value === a;
     });
-    return (a, o) => W((g(), h("div", {
+    return (a, o) => M((g(), h("div", {
       ref_key: "slideRef",
       ref: t,
       id: a.id,
-      class: v([a.slideClass, "w-full"]),
+      class: f([a.slideClass, "w-full"]),
       role: "tabpanel",
       tabindex: "-1"
     }, [
@@ -2359,22 +2374,22 @@ const w = (s, r) => new ye(s, r).generateClass(), Ce = { class: "w-full flex jus
   }
 });
 export {
-  ot as Alert,
-  xt as CarouselContainer,
-  yt as CarouselContent,
+  lt as Alert,
+  mt as CarouselContainer,
+  xt as CarouselContent,
   Te as ClientSideRender,
-  it as Collapse,
-  gt as DropdownContainer,
-  ut as DropdownContent,
-  ht as HeaderHorizontal,
-  pt as HeaderVertical,
-  bt as Modal,
-  ft as Sidebar,
-  vt as TabContainer,
-  mt as TabContent,
-  w as default,
+  ot as Collapse,
+  ct as DropdownContainer,
+  gt as DropdownContent,
+  ut as HeaderHorizontal,
+  ht as HeaderVertical,
+  pt as Modal,
+  bt as Sidebar,
+  ft as TabContainer,
+  vt as TabContent,
+  T as default,
   q as vClickOutside,
-  dt as vCollapse,
-  nt as vToggle,
-  ct as vTooltip
+  nt as vCollapse,
+  it as vToggle,
+  dt as vTooltip
 };