@bobbykim/mcl-forms 0.9.7 → 0.9.9

package/dist/mcl-forms.js

@@ -1,8 +1,8 @@
-(function(){"use strict";try{if(typeof document<"u"){var t=document.createElement("style");t.appendChild(document.createTextNode('.switch[data-v-07d209bd]{width:var(--switch-width);height:var(--switch-height)}.slider[data-v-07d209bd]:before{content:"";height:var(--slider-size);width:var(--slider-size);left:var(--gutter-size);bottom:var(--gutter-size)}input:checked+.slider[data-v-07d209bd]:before{-webkit-transform:translateX(var(--slider-size));-ms-transform:translateX(var(--slider-size));transform:translate(var(--slider-size))}.options-enter-active[data-v-f80afd47],.options-leave-active[data-v-f80afd47]{opacity:1;transition:opacity .3s linear,transform .3s linear}.options-enter-from[data-v-f80afd47],.options-leave-to[data-v-f80afd47]{opacity:0;transform:translateY(-10px)}')),document.head.appendChild(t)}}catch(e){console.error("vite-plugin-css-injected-by-js",e)}})();
-import { defineComponent as q, useSlots as We, computed as R, createElementBlock as F, openBlock as S, createElementVNode as B, renderSlot as de, normalizeClass as A, toDisplayString as fe, mergeModels as K, useModel as ae, ref as M, createCommentVNode as pe, unref as W, normalizeStyle as qe, withDirectives as ie, vModelCheckbox as Ue, createBlock as Xe, vModelDynamic as dt, shallowRef as ft, watch as le, getCurrentScope as pt, onScopeDispose as ht, shallowReadonly as ne, withKeys as be, createVNode as gt, vModelText as Ke, Transition as mt, withCtx as vt, Fragment as bt, renderList as yt } from "vue";
-import x, { vClickOutside as wt } from "@bobbykim/manguito-theme";
-import { useResizeObserver as xt } from "@vueuse/core";
-const kt = ["for"], Oo = /* @__PURE__ */ q({
+(function(){"use strict";try{if(typeof document<"u"){var e=document.createElement("style");e.appendChild(document.createTextNode('.switch[data-v-07d209bd]{width:var(--switch-width);height:var(--switch-height)}.slider[data-v-07d209bd]:before{content:"";height:var(--slider-size);width:var(--slider-size);left:var(--gutter-size);bottom:var(--gutter-size)}input:checked+.slider[data-v-07d209bd]:before{-webkit-transform:translateX(var(--slider-size));-ms-transform:translateX(var(--slider-size));transform:translate(var(--slider-size))}.options-enter-active[data-v-ce479436],.options-leave-active[data-v-ce479436]{opacity:1;transition:opacity .3s linear,transform .3s linear}.options-enter-from[data-v-ce479436],.options-leave-to[data-v-ce479436]{opacity:0;transform:translateY(-10px)}')),document.head.appendChild(e)}}catch(t){console.error("vite-plugin-css-injected-by-js",t)}})();
+import { defineComponent as z, useSlots as Qe, computed as w, openBlock as L, createElementBlock as A, createElementVNode as B, renderSlot as he, normalizeClass as V, toDisplayString as fe, useModel as ce, ref as E, unref as U, createCommentVNode as pe, mergeModels as J, normalizeStyle as Ze, withDirectives as ie, vModelCheckbox as et, vModelDynamic as mt, createBlock as tt, h as yt, shallowRef as vt, watch as oe, getCurrentScope as Ct, onScopeDispose as kt, shallowReadonly as se, withKeys as ye, vModelText as rt, createVNode as wt, Transition as Tt, withCtx as Rt, Fragment as Ot, renderList as Bt } from "vue";
+import C from "@bobbykim/manguito-theme";
+import { useResizeObserver as Vt } from "@vueuse/core";
+const Lt = ["for"], el = /* @__PURE__ */ z({
   __name: "MclFormGroup",
   props: {
     labelFor: {},
@@ -13,31 +13,31 @@ const kt = ["for"], Oo = /* @__PURE__ */ q({
   },
   setup(e) {
     const t = e;
-    We();
-    const o = R(() => {
-      const { textColor: n, textSize: l, textBold: i } = t, r = [
-        x("TEXTCOLOR", n),
-        x("BODYTEXT", l)
+    Qe();
+    const r = w(() => {
+      const { textColor: l, textSize: s, textBold: o } = t, a = [
+        C("TEXTCOLOR", l),
+        C("BODYTEXT", s)
       ];
-      return i && r.push("font-bold"), r.join(" ");
+      return o && a.push("font-bold"), a.join(" ");
     });
-    return (n, l) => (S(), F("div", null, [
+    return (l, s) => (L(), A("div", null, [
       B("label", {
-        for: n.labelFor,
+        for: e.labelFor,
         class: "inline-block"
       }, [
-        de(n.$slots, "label", {}, () => [
+        he(l.$slots, "label", {}, () => [
           B("p", {
-            class: A(["mb-2xs", o.value])
-          }, fe(n.label), 3)
+            class: V(["mb-2xs", r.value])
+          }, fe(e.label), 3)
         ])
-      ], 8, kt),
-      de(n.$slots, "default")
+      ], 8, Lt),
+      he(l.$slots, "default")
     ]));
   }
-}), Ct = { class: "shrink-0 my-3xs ml-3xs mr-xs" }, Rt = ["id", "required", "accept"], Bo = /* @__PURE__ */ q({
+}), Et = { class: "shrink-0 my-3xs ml-3xs mr-xs" }, St = ["id", "required", "accept"], tl = /* @__PURE__ */ z({
   __name: "MclInputFile",
-  props: /* @__PURE__ */ K({
+  props: /* @__PURE__ */ J({
     id: {},
     displayBorder: { type: Boolean, default: !1 },
     borderColor: { default: "light-4" },
@@ -57,70 +57,70 @@ const kt = ["for"], Oo = /* @__PURE__ */ q({
   }),
   emits: ["update:modelValue"],
   setup(e) {
-    const t = e, o = ae(e, "modelValue"), n = M(), l = M(0), i = () => {
-      n.value.click();
-    }, r = (d) => {
-      const c = d.target.files[0];
-      o.value = c;
-    }, a = () => {
-      o.value = null, l.value++;
-    }, p = R(() => {
-      const { rounded: d, displayBorder: c, borderColor: g, displayShadow: b, bgColor: y } = t, m = [x("BGCOLOR", y)];
-      return d && m.push("rounded-md"), c && (m.push("border-2"), m.push(x("BORDER", g))), b && m.push("shadow-md"), m.join(" ");
-    }), u = R(() => {
-      const { textColor: d } = t;
-      return [x("TEXTCOLOR", d)].join(" ");
-    }), f = R(() => {
-      const { buttonColor: d, buttonTextColor: c, rounded: g } = t, b = [
-        x("BGCOLOR", d),
-        x("TEXTCOLOR", c)
+    const t = e, r = ce(e, "modelValue"), l = E(), s = E(0), o = () => {
+      l.value.click();
+    }, a = (h) => {
+      const c = h.target.files[0];
+      r.value = c;
+    }, n = () => {
+      r.value = null, s.value++;
+    }, g = w(() => {
+      const { rounded: h, displayBorder: c, borderColor: f, displayShadow: m, bgColor: y } = t, p = [C("BGCOLOR", y)];
+      return h && p.push("rounded-md"), c && (p.push("border-2"), p.push(C("BORDER", f))), m && p.push("shadow-md"), p.join(" ");
+    }), d = w(() => {
+      const { textColor: h } = t;
+      return [C("TEXTCOLOR", h)].join(" ");
+    }), u = w(() => {
+      const { buttonColor: h, buttonTextColor: c, rounded: f } = t, m = [
+        C("BGCOLOR", h),
+        C("TEXTCOLOR", c)
       ];
-      return g && b.push("rounded-l-md"), b.join(" ");
-    }), s = R(() => {
-      const { buttonColor: d, rounded: c } = t, g = [x("BGCOLOR", d)];
-      return c && g.push("rounded-r-md"), g.join(" ");
+      return f && m.push("rounded-l-md"), m.join(" ");
+    }), i = w(() => {
+      const { buttonColor: h, rounded: c } = t, f = [C("BGCOLOR", h)];
+      return c && f.push("rounded-r-md"), f.join(" ");
     });
-    return (d, c) => (S(), F("div", {
-      class: A(["flex items-center overflow-hidden", p.value])
+    return (h, c) => (L(), A("div", {
+      class: V(["flex items-center overflow-hidden", g.value])
     }, [
-      B("div", Ct, [
+      B("div", Et, [
         B("button", {
-          class: A(["px-xs py-2xs hover:bg-opacity-70 transition-all duration-200 ease-linear max-w-full", f.value]),
-          onClick: i
-        }, fe(d.buttonText), 3)
+          class: V(["px-xs py-2xs hover:bg-opacity-70 transition-all duration-200 ease-linear max-w-full", u.value]),
+          onClick: o
+        }, fe(e.buttonText), 3)
       ]),
-      (S(), F("input", {
+      (L(), A("input", {
         type: "file",
-        id: d.id,
+        id: e.id,
         ref_key: "inputRef",
-        ref: n,
-        class: A(["file:hidden w-full bg-transparent", [u.value]]),
-        required: d.isRequired,
-        accept: d.accept,
-        key: l.value,
-        onChange: r
-      }, null, 42, Rt)),
-      d.displayClear ? (S(), F("div", {
+        ref: l,
+        class: V(["file:hidden w-full bg-transparent", [d.value]]),
+        required: e.isRequired,
+        accept: e.accept,
+        key: s.value,
+        onChange: a
+      }, null, 42, St)),
+      e.displayClear ? (L(), A("div", {
         key: 0,
         class: "self-stretch my-3xs mr-3xs",
-        onClick: a
+        onClick: n
       }, [
         B("button", {
-          class: A(["px-xs py-2xs h-full flex items-center hover:bg-opacity-70 transition-all duration-200 ease-linear", [s.value]]),
+          class: V(["px-xs py-2xs h-full flex items-center hover:bg-opacity-70 transition-all duration-200 ease-linear", [i.value]]),
           "aria-label": "clear"
         }, [
-          (S(), F("svg", {
+          (L(), A("svg", {
             xmlns: "http://www.w3.org/2000/svg",
             viewBox: "0 0 384 512",
-            class: A(["h-xs", W(x)("SVGFILL", d.buttonTextColor)])
-          }, c[0] || (c[0] = [
+            class: V(["h-xs", U(C)("SVGFILL", e.buttonTextColor)])
+          }, [...c[0] || (c[0] = [
             B("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))
         ], 2)
       ])) : pe("", !0)
     ], 2));
   }
-}), Ot = { class: "flex items-center" }, Bt = ["id", "value", "checked"], Lo = /* @__PURE__ */ q({
+}), At = { class: "flex items-center" }, Dt = ["id", "value", "checked"], rl = /* @__PURE__ */ z({
   __name: "MclInputRadio",
   props: {
     id: {},
@@ -133,45 +133,44 @@ const kt = ["for"], Oo = /* @__PURE__ */ q({
   },
   emits: ["change"],
   setup(e, { emit: t }) {
-    const o = e, n = M(), l = t, i = () => {
-      var f;
-      (f = n.value) == null || f.click();
-    }, r = R(() => {
-      const { radioSize: f } = o;
-      return f === "sm" ? "h-xs w-xs" : f === "lg" ? "h-md w-md" : "h-sm w-sm";
-    }), a = R(() => {
-      const { radioSize: f } = o;
-      return f === "sm" ? "peer-checked:before:h-2xs peer-checked:before:w-2xs" : f === "lg" ? "peer-checked:before:h-xs peer-checked:before:w-xs" : "peer-checked:before:h-[12px] peer-checked:before:w-[12px]";
-    }), p = R(() => {
-      const { bgColor: f, checkedColor: s, displayShadow: d } = o, c = [
-        x("BGCOLOR", f),
-        x("BEFOREBG", s)
+    const r = e, l = E(), s = t, o = () => {
+      l.value?.click();
+    }, a = w(() => {
+      const { radioSize: u } = r;
+      return u === "sm" ? "h-xs w-xs" : u === "lg" ? "h-md w-md" : "h-sm w-sm";
+    }), n = w(() => {
+      const { radioSize: u } = r;
+      return u === "sm" ? "peer-checked:before:h-2xs peer-checked:before:w-2xs" : u === "lg" ? "peer-checked:before:h-xs peer-checked:before:w-xs" : "peer-checked:before:h-[12px] peer-checked:before:w-[12px]";
+    }), g = w(() => {
+      const { bgColor: u, checkedColor: i, displayShadow: h } = r, c = [
+        C("BGCOLOR", u),
+        C("BEFOREBG", i)
       ];
-      return d && c.push("drop-shadow-md"), c.join(" ");
-    }), u = (f) => {
-      const s = f.target.value;
-      l("change", f, s);
+      return h && c.push("drop-shadow-md"), c.join(" ");
+    }), d = (u) => {
+      const i = u.target.value;
+      s("change", u, i);
     };
-    return (f, s) => (S(), F("div", Ot, [
+    return (u, i) => (L(), A("div", At, [
       B("input", {
-        id: f.id,
+        id: e.id,
         type: "radio",
         class: "appearance-none peer",
         ref_key: "radioRef",
-        ref: n,
-        value: f.value,
-        checked: f.checked,
-        onChange: u
-      }, null, 40, Bt),
+        ref: l,
+        value: e.value,
+        checked: e.checked,
+        onChange: d
+      }, null, 40, Dt),
       B("span", {
-        class: A(["rounded-full inline-block relative before:absolute before:rounded-full before:top-1/2 before:left-1/2 before:-translate-x-1/2 before:-translate-y-1/2", [r.value, a.value, p.value]]),
-        onClick: i
+        class: V(["rounded-full inline-block relative before:absolute before:rounded-full before:top-1/2 before:left-1/2 before:-translate-x-1/2 before:-translate-y-1/2", [a.value, n.value, g.value]]),
+        onClick: o
       }, null, 2)
     ]));
   }
-}), Lt = ["id"], At = /* @__PURE__ */ q({
+}), It = ["id"], Ft = /* @__PURE__ */ z({
   __name: "MclInputSwitch",
-  props: /* @__PURE__ */ K({
+  props: /* @__PURE__ */ J({
     id: {},
     sliderColor: { default: "light-1" },
     onColor: { default: "success" },
@@ -184,7 +183,7 @@ const kt = ["for"], Oo = /* @__PURE__ */ q({
   }),
   emits: ["update:modelValue"],
   setup(e) {
-    const t = e, o = ae(e, "modelValue"), n = M(), l = {
+    const t = e, r = ce(e, "modelValue"), l = E(), s = {
       primary: "peer-checked/input:bg-primary",
       secondary: "peer-checked/input:bg-secondary",
       success: "peer-checked/input:bg-success",
@@ -202,10 +201,9 @@ const kt = ["for"], Oo = /* @__PURE__ */ q({
       transparent: "peer-checked/input:bg-transparent",
       black: "peer-checked/input:bg-black",
       white: "peer-checked/input:bg-white"
-    }, i = () => {
-      var p;
-      (p = n.value) == null || p.click();
-    }, r = R(() => t.switchSize === "sm" ? {
+    }, o = () => {
+      l.value?.click();
+    }, a = w(() => t.switchSize === "sm" ? {
       "--switch-width": "30px",
       "--switch-height": "17px",
       "--slider-size": "13px",
@@ -220,40 +218,40 @@ const kt = ["for"], Oo = /* @__PURE__ */ q({
       "--switch-height": "25.5px",
       "--slider-size": "19.5px",
       "--gutter-size": "3px"
-    }), a = R(() => {
-      const { sliderColor: p, onColor: u, offColor: f, rounded: s } = t, d = [
-        x("BGCOLOR", f),
-        x("BEFOREBG", p),
-        l[u]
+    }), n = w(() => {
+      const { sliderColor: g, onColor: d, offColor: u, rounded: i } = t, h = [
+        C("BGCOLOR", u),
+        C("BEFOREBG", g),
+        s[d]
       ];
-      return s && d.push("rounded-full before:rounded-full"), d.join(" ");
+      return i && h.push("rounded-full before:rounded-full"), h.join(" ");
     });
-    return (p, u) => (S(), F("div", {
+    return (g, d) => (L(), A("div", {
       class: "switch relative",
-      style: qe(r.value),
-      onClick: i
+      style: Ze(a.value),
+      onClick: o
     }, [
       ie(B("input", {
-        id: p.id,
+        id: e.id,
         class: "hidden peer/input",
-        "onUpdate:modelValue": u[0] || (u[0] = (f) => o.value = f),
+        "onUpdate:modelValue": d[0] || (d[0] = (u) => r.value = u),
         ref_key: "inputRef",
-        ref: n,
+        ref: l,
         type: "checkbox"
-      }, null, 8, Lt), [
-        [Ue, o.value]
+      }, null, 8, It), [
+        [et, r.value]
       ]),
       B("span", {
-        class: A(["slider absolute inset-0 cursor-pointer transition-all duration-300 before:absolute before:transition-all before:duration-300", a.value])
+        class: V(["slider absolute inset-0 cursor-pointer transition-all duration-300 before:absolute before:transition-all before:duration-300", n.value])
       }, null, 2)
     ], 4));
   }
-}), Ye = (e, t) => {
-  const o = e.__vccOpts || e;
-  for (const [n, l] of t)
-    o[n] = l;
-  return o;
-}, Ao = /* @__PURE__ */ Ye(At, [["__scopeId", "data-v-07d209bd"]]), Je = /* @__PURE__ */ q({
+}), lt = (e, t) => {
+  const r = e.__vccOpts || e;
+  for (const [l, s] of t)
+    r[l] = s;
+  return r;
+}, ll = /* @__PURE__ */ lt(Ft, [["__scopeId", "data-v-07d209bd"]]), st = /* @__PURE__ */ z({
   __name: "InputHighlight",
   props: {
     color: { default: "primary" },
@@ -261,20 +259,20 @@ const kt = ["for"], Oo = /* @__PURE__ */ q({
     offset: { default: 1 }
   },
   setup(e) {
-    const t = e, o = {
+    const t = e, r = {
       1: "-top-1",
       2.5: "-top-2.5"
-    }, n = R(() => {
-      const l = [x("BEFOREBG", t.color)];
-      return t.rounded && l.push("rounded-b-md"), l.push(o[t.offset]), l.join(" ");
+    }, l = w(() => {
+      const s = [C("BEFOREBG", t.color)];
+      return t.rounded && s.push("rounded-b-md"), s.push(r[t.offset]), s.join(" ");
     });
-    return (l, i) => (S(), F("div", {
-      class: A(["relative h-3xs overflow-hidden before:absolute before:bottom-0 before:left-0 before:h-full before:w-0 peer-focus:before:w-full before:transition-[width] before:duration-300 before:ease-linear", n.value])
+    return (s, o) => (L(), A("div", {
+      class: V(["relative h-3xs overflow-hidden before:absolute before:bottom-0 before:left-0 before:h-full before:w-0 peer-focus:before:w-full before:transition-[width] before:duration-300 before:ease-linear", l.value])
     }, null, 2));
   }
-}), St = ["id", "type", "placeholder", "required", "minlength", "maxlength", "pattern"], Et = { class: "peer-valid/validation:hidden peer-inavlid/validation:block ml-3xs" }, Tt = { class: "text-xs text-danger" }, So = /* @__PURE__ */ q({
+}), Mt = ["id", "type", "placeholder", "required", "minlength", "maxlength", "pattern"], Gt = { class: "peer-valid/validation:hidden peer-inavlid/validation:block ml-3xs" }, Wt = { class: "text-xs text-danger" }, sl = /* @__PURE__ */ z({
   __name: "MclInputText",
-  props: /* @__PURE__ */ K({
+  props: /* @__PURE__ */ J({
     id: {},
     displayBorder: { type: Boolean, default: !1 },
     borderColor: { default: "light-4" },
@@ -297,120 +295,1568 @@ const kt = ["for"], Oo = /* @__PURE__ */ q({
   }),
   emits: ["update:modelValue"],
   setup(e) {
-    const t = e, o = ae(e, "modelValue"), n = R(() => {
+    const t = e, r = ce(e, "modelValue"), l = w(() => {
       const {
-        bgColor: l,
-        displayBorder: i,
-        borderColor: r,
-        displayHighlight: a,
-        displayShadow: p,
-        rounded: u,
-        textcolor: f
-      } = t, s = [
-        x("BGCOLOR", l),
-        x("TEXTCOLOR", f)
+        bgColor: s,
+        displayBorder: o,
+        borderColor: a,
+        displayHighlight: n,
+        displayShadow: g,
+        rounded: d,
+        textcolor: u
+      } = t, i = [
+        C("BGCOLOR", s),
+        C("TEXTCOLOR", u)
       ];
-      return i && (s.push("border-2"), s.push(x("BORDER", r))), a || (s.push(
+      return o && (i.push("border-2"), i.push(C("BORDER", a))), n || (i.push(
         "focus:ring-4 ring-offset-2 transition-all duration-300 ease-linear"
-      ), s.push(x("FOCUSRING", r))), p && s.push("shadow-md"), u && s.push("rounded-md"), s.join(" ");
+      ), i.push(C("FOCUSRING", a))), g && i.push("shadow-md"), d && i.push("rounded-md"), i.join(" ");
     });
-    return (l, i) => (S(), F("div", null, [
+    return (s, o) => (L(), A("div", null, [
       ie(B("input", {
-        id: l.id,
-        type: l.type,
-        class: A(["w-full p-2xs outline-none peer peer/validation", n.value]),
-        "onUpdate:modelValue": i[0] || (i[0] = (r) => o.value = r),
-        placeholder: l.placeholder,
-        required: l.required,
-        minlength: l.minLength,
-        maxlength: l.maxLength,
-        pattern: l.pattern
-      }, null, 10, St), [
-        [dt, o.value]
+        id: e.id,
+        type: e.type,
+        class: V(["w-full p-2xs outline-none peer peer/validation", l.value]),
+        "onUpdate:modelValue": o[0] || (o[0] = (a) => r.value = a),
+        placeholder: e.placeholder,
+        required: e.required,
+        minlength: e.minLength,
+        maxlength: e.maxLength,
+        pattern: e.pattern
+      }, null, 10, Mt), [
+        [mt, r.value]
       ]),
-      l.displayHighlight ? (S(), Xe(Je, {
+      e.displayHighlight ? (L(), tt(st, {
         key: 0,
-        color: l.highlightColor,
-        rounded: l.rounded
+        color: e.highlightColor,
+        rounded: e.rounded
       }, null, 8, ["color", "rounded"])) : pe("", !0),
-      B("div", Et, [
-        de(l.$slots, "invalid-feedback", {}, () => [
-          B("span", Tt, fe(l.invalidFeedback), 1)
+      B("div", Gt, [
+        he(s.$slots, "invalid-feedback", {}, () => [
+          B("span", Wt, fe(e.invalidFeedback), 1)
         ])
       ])
     ]));
   }
-}), we = Math.min, J = Math.max, xe = Math.round, ye = Math.floor, P = (e) => ({
+});
+let Nt = class {
+  // body text class
+  bodyText = {
+    xs: "text-xs",
+    sm: "text-sm",
+    md: "text-md",
+    lg: "text-lg",
+    xl: "text-xl"
+  };
+  // font weight class
+  fontweight = {
+    light: "font-light",
+    normal: "font-normal",
+    bold: "font-bold"
+  };
+  // text alignment
+  textAlign = {
+    left: "text-left",
+    center: "text-center",
+    right: "text-right"
+  };
+};
+class Pt {
+  // Border width class
+  borderWidth = {
+    1: "border-[1px]",
+    2: "border-[2px]",
+    3: "border-[3px]",
+    4: "border-[4px]",
+    5: "border-[5px]",
+    6: "border-[6px]",
+    7: "border-[7px]",
+    8: "border-[8px]",
+    9: "border-[9px]",
+    10: "border-[10px]",
+    11: "border-[11px]",
+    12: "border-[12px]"
+  };
+  borderXWidth = {
+    1: "border-x-[1px]",
+    2: "border-x-[2px]",
+    3: "border-x-[3px]",
+    4: "border-x-[4px]",
+    5: "border-x-[5px]",
+    6: "border-x-[6px]",
+    7: "border-x-[7px]",
+    8: "border-x-[8px]",
+    9: "border-x-[9px]",
+    10: "border-x-[10px]",
+    11: "border-x-[11px]",
+    12: "border-x-[12px]"
+  };
+  borderYWidth = {
+    1: "border-y-[1px]",
+    2: "border-y-[2px]",
+    3: "border-y-[3px]",
+    4: "border-y-[4px]",
+    5: "border-y-[5px]",
+    6: "border-y-[6px]",
+    7: "border-y-[7px]",
+    8: "border-y-[8px]",
+    9: "border-y-[9px]",
+    10: "border-y-[10px]",
+    11: "border-y-[11px]",
+    12: "border-y-[12px]"
+  };
+  borderTopWidth = {
+    1: "border-t-[1px]",
+    2: "border-t-[2px]",
+    3: "border-t-[3px]",
+    4: "border-t-[4px]",
+    5: "border-t-[5px]",
+    6: "border-t-[6px]",
+    7: "border-t-[7px]",
+    8: "border-t-[8px]",
+    9: "border-t-[9px]",
+    10: "border-t-[10px]",
+    11: "border-t-[11px]",
+    12: "border-t-[12px]"
+  };
+  borderBottomWidth = {
+    1: "border-b-[1px]",
+    2: "border-b-[2px]",
+    3: "border-b-[3px]",
+    4: "border-b-[4px]",
+    5: "border-b-[5px]",
+    6: "border-b-[6px]",
+    7: "border-b-[7px]",
+    8: "border-b-[8px]",
+    9: "border-b-[9px]",
+    10: "border-b-[10px]",
+    11: "border-b-[11px]",
+    12: "border-b-[12px]"
+  };
+  borderLeftWidth = {
+    1: "border-l-[1px]",
+    2: "border-l-[2px]",
+    3: "border-l-[3px]",
+    4: "border-l-[4px]",
+    5: "border-l-[5px]",
+    6: "border-l-[6px]",
+    7: "border-l-[7px]",
+    8: "border-l-[8px]",
+    9: "border-l-[9px]",
+    10: "border-l-[10px]",
+    11: "border-l-[11px]",
+    12: "border-l-[12px]"
+  };
+  borderRightWidth = {
+    1: "border-r-[1px]",
+    2: "border-r-[2px]",
+    3: "border-r-[3px]",
+    4: "border-r-[4px]",
+    5: "border-r-[5px]",
+    6: "border-r-[6px]",
+    7: "border-r-[7px]",
+    8: "border-r-[8px]",
+    9: "border-r-[9px]",
+    10: "border-r-[10px]",
+    11: "border-r-[11px]",
+    12: "border-r-[12px]"
+  };
+}
+class Ht {
+  // bg color class
+  bgColor = {
+    primary: "bg-primary",
+    secondary: "bg-secondary",
+    success: "bg-success",
+    danger: "bg-danger",
+    info: "bg-info",
+    warning: "bg-warning",
+    "light-1": "bg-light-1",
+    "light-2": "bg-light-2",
+    "light-3": "bg-light-3",
+    "light-4": "bg-light-4",
+    "dark-1": "bg-dark-1",
+    "dark-2": "bg-dark-2",
+    "dark-3": "bg-dark-3",
+    "dark-4": "bg-dark-4",
+    black: "bg-black",
+    white: "bg-white",
+    transparent: "bg-transparent"
+  };
+  // hover: bg color class
+  hoverBgColor = {
+    primary: "hover:bg-primary",
+    secondary: "hover:bg-secondary",
+    success: "hover:bg-success",
+    danger: "hover:bg-danger",
+    info: "hover:bg-info",
+    warning: "hover:bg-warning",
+    "light-1": "hover:bg-light-1",
+    "light-2": "hover:bg-light-2",
+    "light-3": "hover:bg-light-3",
+    "light-4": "hover:bg-light-4",
+    "dark-1": "hover:bg-dark-1",
+    "dark-2": "hover:bg-dark-2",
+    "dark-3": "hover:bg-dark-3",
+    "dark-4": "hover:bg-dark-4",
+    black: "hover:bg-black",
+    white: "hover:bg-white",
+    transparent: "hover:bg-transparent"
+  };
+  // focus: bg color class
+  focusBgColor = {
+    primary: "focus:bg-primary",
+    secondary: "focus:bg-secondary",
+    success: "focus:bg-success",
+    danger: "focus:bg-danger",
+    info: "focus:bg-info",
+    warning: "focus:bg-warning",
+    "light-1": "focus:bg-light-1",
+    "light-2": "focus:bg-light-2",
+    "light-3": "focus:bg-light-3",
+    "light-4": "focus:bg-light-4",
+    "dark-1": "focus:bg-dark-1",
+    "dark-2": "focus:bg-dark-2",
+    "dark-3": "focus:bg-dark-3",
+    "dark-4": "focus:bg-dark-4",
+    black: "focus:bg-black",
+    white: "focus:bg-white",
+    transparent: "focus:bg-transparent"
+  };
+  // ::before bg color class
+  beforeBgColor = {
+    primary: "before:bg-primary",
+    secondary: "before:bg-secondary",
+    success: "before:bg-success",
+    danger: "before:bg-danger",
+    info: "before:bg-info",
+    warning: "before:bg-warning",
+    "light-1": "before:bg-light-1",
+    "light-2": "before:bg-light-2",
+    "light-3": "before:bg-light-3",
+    "light-4": "before:bg-light-4",
+    "dark-1": "before:bg-dark-1",
+    "dark-2": "before:bg-dark-2",
+    "dark-3": "before:bg-dark-3",
+    "dark-4": "before:bg-dark-4",
+    black: "before:bg-black",
+    white: "before:bg-white",
+    transparent: "before:bg-transparent"
+  };
+  // ::after bg color class
+  afterBgColor = {
+    primary: "after:bg-primary",
+    secondary: "after:bg-secondary",
+    success: "after:bg-success",
+    danger: "after:bg-danger",
+    info: "after:bg-info",
+    warning: "after:bg-warning",
+    "light-1": "after:bg-light-1",
+    "light-2": "after:bg-light-2",
+    "light-3": "after:bg-light-3",
+    "light-4": "after:bg-light-4",
+    "dark-1": "after:bg-dark-1",
+    "dark-2": "after:bg-dark-2",
+    "dark-3": "after:bg-dark-3",
+    "dark-4": "after:bg-dark-4",
+    black: "after:bg-black",
+    white: "after:bg-white",
+    transparent: "after:bg-transparent"
+  };
+  // active:bg color class
+  bgActiveColor = {
+    primary: "active:bg-primary",
+    secondary: "active:bg-secondary",
+    success: "active:bg-success",
+    danger: "active:bg-danger",
+    info: "active:bg-info",
+    warning: "active:bg-warning",
+    "light-1": "active:bg-light-1",
+    "light-2": "active:bg-light-2",
+    "light-3": "active:bg-light-3",
+    "light-4": "active:bg-light-4",
+    "dark-1": "active:bg-dark-1",
+    "dark-2": "active:bg-dark-2",
+    "dark-3": "active:bg-dark-3",
+    "dark-4": "active:bg-dark-4",
+    black: "active:bg-black",
+    white: "active:bg-white",
+    transparent: "active:bg-transparent"
+  };
+  // text color class
+  textColor = {
+    primary: "text-primary",
+    secondary: "text-secondary",
+    success: "text-success",
+    danger: "text-danger",
+    info: "text-info",
+    warning: "text-warning",
+    "light-1": "text-light-1",
+    "light-2": "text-light-2",
+    "light-3": "text-light-3",
+    "light-4": "text-light-4",
+    "dark-1": "text-dark-1",
+    "dark-2": "text-dark-2",
+    "dark-3": "text-dark-3",
+    "dark-4": "text-dark-4",
+    black: "text-black",
+    white: "text-white",
+    transparent: "text-transparent"
+  };
+  // hover text color class
+  hoverTextColor = {
+    primary: "hover:text-primary",
+    secondary: "hover:text-secondary",
+    success: "hover:text-success",
+    danger: "hover:text-danger",
+    info: "hover:text-info",
+    warning: "hover:text-warning",
+    "light-1": "hover:text-light-1",
+    "light-2": "hover:text-light-2",
+    "light-3": "hover:text-light-3",
+    "light-4": "hover:text-light-4",
+    "dark-1": "hover:text-dark-1",
+    "dark-2": "hover:text-dark-2",
+    "dark-3": "hover:text-dark-3",
+    "dark-4": "hover:text-dark-4",
+    black: "hover:text-black",
+    white: "hover:text-white",
+    transparent: "hover:text-transparent"
+  };
+  // focus text color class
+  focusTextColor = {
+    primary: "focus:text-primary",
+    secondary: "focus:text-secondary",
+    success: "focus:text-success",
+    danger: "focus:text-danger",
+    info: "focus:text-info",
+    warning: "focus:text-warning",
+    "light-1": "focus:text-light-1",
+    "light-2": "focus:text-light-2",
+    "light-3": "focus:text-light-3",
+    "light-4": "focus:text-light-4",
+    "dark-1": "focus:text-dark-1",
+    "dark-2": "focus:text-dark-2",
+    "dark-3": "focus:text-dark-3",
+    "dark-4": "focus:text-dark-4",
+    black: "focus:text-black",
+    white: "focus:text-white",
+    transparent: "focus:text-transparent"
+  };
+  // disabled text color class
+  disabledTextColor = {
+    primary: "disabled:text-primary",
+    secondary: "disabled:text-secondary",
+    success: "disabled:text-success",
+    danger: "disabled:text-danger",
+    info: "disabled:text-info",
+    warning: "disabled:text-warning",
+    "light-1": "disabled:text-light-1",
+    "light-2": "disabled:text-light-2",
+    "light-3": "disabled:text-light-3",
+    "light-4": "disabled:text-light-4",
+    "dark-1": "disabled:text-dark-1",
+    "dark-2": "disabled:text-dark-2",
+    "dark-3": "disabled:text-dark-3",
+    "dark-4": "disabled:text-dark-4",
+    black: "disabled:text-black",
+    white: "disabled:text-white",
+    transparent: "disabled:text-transparent"
+  };
+  // SVG fill color class
+  svgFillColor = {
+    primary: "fill-primary",
+    secondary: "fill-secondary",
+    success: "fill-success",
+    danger: "fill-danger",
+    info: "fill-info",
+    warning: "fill-warning",
+    "light-1": "fill-light-1",
+    "light-2": "fill-light-2",
+    "light-3": "fill-light-3",
+    "light-4": "fill-light-4",
+    "dark-1": "fill-dark-1",
+    "dark-2": "fill-dark-2",
+    "dark-3": "fill-dark-3",
+    "dark-4": "fill-dark-4",
+    black: "fill-black",
+    white: "fill-white",
+    transparent: "fill-transparent"
+  };
+  // ring color class
+  ringColor = {
+    primary: "ring-primary",
+    secondary: "ring-secondary",
+    success: "ring-success",
+    danger: "ring-danger",
+    info: "ring-info",
+    warning: "ring-warning",
+    "light-1": "ring-light-1",
+    "light-2": "ring-light-2",
+    "light-3": "ring-light-3",
+    "light-4": "ring-light-4",
+    "dark-1": "ring-dark-1",
+    "dark-2": "ring-dark-2",
+    "dark-3": "ring-dark-3",
+    "dark-4": "ring-dark-4",
+    black: "ring-black",
+    white: "ring-white",
+    transparent: "ring-transparent"
+  };
+  // focus:ring color class
+  ringFocusColor = {
+    primary: "focus:ring-primary",
+    secondary: "focus:ring-secondary",
+    success: "focus:ring-success",
+    danger: "focus:ring-danger",
+    info: "focus:ring-info",
+    warning: "focus:ring-warning",
+    "light-1": "focus:ring-light-1",
+    "light-2": "focus:ring-light-2",
+    "light-3": "focus:ring-light-3",
+    "light-4": "focus:ring-light-4",
+    "dark-1": "focus:ring-dark-1",
+    "dark-2": "focus:ring-dark-2",
+    "dark-3": "focus:ring-dark-3",
+    "dark-4": "focus:ring-dark-4",
+    black: "focus:ring-black",
+    white: "focus:ring-white",
+    transparent: "focus:ring-transparent"
+  };
+  // active:ring color class
+  ringActiveColor = {
+    primary: "active:ring-primary",
+    secondary: "active:ring-secondary",
+    success: "active:ring-success",
+    danger: "active:ring-danger",
+    info: "active:ring-info",
+    warning: "active:ring-warning",
+    "light-1": "active:ring-light-1",
+    "light-2": "active:ring-light-2",
+    "light-3": "active:ring-light-3",
+    "light-4": "active:ring-light-4",
+    "dark-1": "active:ring-dark-1",
+    "dark-2": "active:ring-dark-2",
+    "dark-3": "active:ring-dark-3",
+    "dark-4": "active:ring-dark-4",
+    black: "active:ring-black",
+    white: "active:ring-white",
+    transparent: "active:ring-transparent"
+  };
+  // ring-offset color class
+  ringOffsetColor = {
+    primary: "ring-offset-primary",
+    secondary: "ring-offset-secondary",
+    success: "ring-offset-success",
+    danger: "ring-offset-danger",
+    info: "ring-offset-info",
+    warning: "ring-offset-warning",
+    "light-1": "ring-offset-light-1",
+    "light-2": "ring-offset-light-2",
+    "light-3": "ring-offset-light-3",
+    "light-4": "ring-offset-light-4",
+    "dark-1": "ring-offset-dark-1",
+    "dark-2": "ring-offset-dark-2",
+    "dark-3": "ring-offset-dark-3",
+    "dark-4": "ring-offset-dark-4",
+    black: "ring-offset-black",
+    white: "ring-offset-white",
+    transparent: "ring-offset-transparent"
+  };
+  // outline class
+  outlineColor = {
+    primary: "outline-primary",
+    secondary: "outline-secondary",
+    success: "outline-success",
+    danger: "outline-danger",
+    info: "outline-info",
+    warning: "outline-warning",
+    "light-1": "outline-light-1",
+    "light-2": "outline-light-2",
+    "light-3": "outline-light-3",
+    "light-4": "outline-light-4",
+    "dark-1": "outline-dark-1",
+    "dark-2": "outline-dark-2",
+    "dark-3": "outline-dark-3",
+    "dark-4": "outline-dark-4",
+    black: "outline-black",
+    white: "outline-white",
+    transparent: "outline-transparent"
+  };
+  // focus:outline class
+  focusOutlineColor = {
+    primary: "focus:outline-primary",
+    secondary: "focus:outline-secondary",
+    success: "focus:outline-success",
+    danger: "focus:outline-danger",
+    info: "focus:outline-info",
+    warning: "focus:outline-warning",
+    "light-1": "focus:outline-light-1",
+    "light-2": "focus:outline-light-2",
+    "light-3": "focus:outline-light-3",
+    "light-4": "focus:outline-light-4",
+    "dark-1": "focus:outline-dark-1",
+    "dark-2": "focus:outline-dark-2",
+    "dark-3": "focus:outline-dark-3",
+    "dark-4": "focus:outline-dark-4",
+    black: "focus:outline-black",
+    white: "focus:outline-white",
+    transparent: "focus:outline-transparent"
+  };
+  // active:outline class
+  activeOutlineColor = {
+    primary: "active:outline-primary",
+    secondary: "active:outline-secondary",
+    success: "active:outline-success",
+    danger: "active:outline-danger",
+    info: "active:outline-info",
+    warning: "active:outline-warning",
+    "light-1": "active:outline-light-1",
+    "light-2": "active:outline-light-2",
+    "light-3": "active:outline-light-3",
+    "light-4": "active:outline-light-4",
+    "dark-1": "active:outline-dark-1",
+    "dark-2": "active:outline-dark-2",
+    "dark-3": "active:outline-dark-3",
+    "dark-4": "active:outline-dark-4",
+    black: "active:outline-black",
+    white: "active:outline-white",
+    transparent: "active:outline-transparent"
+  };
+  // btn color class
+  btnColor = {
+    primary: "btn-primary",
+    secondary: "btn-secondary",
+    success: "btn-success",
+    danger: "btn-danger",
+    info: "btn-info",
+    warning: "btn-warning",
+    "light-1": "btn-light-1",
+    "light-2": "btn-light-2",
+    "light-3": "btn-light-3",
+    "light-4": "btn-light-4",
+    "dark-1": "btn-dark-1",
+    "dark-2": "btn-dark-2",
+    "dark-3": "btn-dark-3",
+    "dark-4": "btn-dark-4",
+    black: "btn-black",
+    white: "btn-white",
+    transparent: "btn-transparent"
+  };
+  // list color class
+  listColor = {
+    primary: "mcl-list-primary",
+    secondary: "mcl-list-secondary",
+    success: "mcl-list-success",
+    danger: "mcl-list-danger",
+    info: "mcl-list-info",
+    warning: "mcl-list-warning",
+    "light-1": "mcl-list-light-1",
+    "light-2": "mcl-list-light-2",
+    "light-3": "mcl-list-light-3",
+    "light-4": "mcl-list-light-4",
+    "dark-1": "mcl-list-dark-1",
+    "dark-2": "mcl-list-dark-2",
+    "dark-3": "mcl-list-dark-3",
+    "dark-4": "mcl-list-dark-4",
+    black: "mcl-list-black",
+    white: "mcl-list-white",
+    transparent: "mcl-list-transparent"
+  };
+  // border color classes
+  borderColor = {
+    primary: "border-primary",
+    secondary: "border-secondary",
+    success: "border-success",
+    danger: "border-danger",
+    info: "border-info",
+    warning: "border-warning",
+    "light-1": "border-light-1",
+    "light-2": "border-light-2",
+    "light-3": "border-light-3",
+    "light-4": "border-light-4",
+    "dark-1": "border-dark-1",
+    "dark-2": "border-dark-2",
+    "dark-3": "border-dark-3",
+    "dark-4": "border-dark-4",
+    black: "border-black",
+    white: "border-white",
+    transparent: "border-transparent"
+  };
+  borderXColor = {
+    primary: "border-x-primary",
+    secondary: "border-x-secondary",
+    success: "border-x-success",
+    danger: "border-x-danger",
+    info: "border-x-info",
+    warning: "border-x-warning",
+    "light-1": "border-x-light-1",
+    "light-2": "border-x-light-2",
+    "light-3": "border-x-light-3",
+    "light-4": "border-x-light-4",
+    "dark-1": "border-x-dark-1",
+    "dark-2": "border-x-dark-2",
+    "dark-3": "border-x-dark-3",
+    "dark-4": "border-x-dark-4",
+    black: "border-x-black",
+    white: "border-x-white",
+    transparent: "border-x-transparent"
+  };
+  borderYColor = {
+    primary: "border-y-primary",
+    secondary: "border-y-secondary",
+    success: "border-y-success",
+    danger: "border-y-danger",
+    info: "border-y-info",
+    warning: "border-y-warning",
+    "light-1": "border-y-light-1",
+    "light-2": "border-y-light-2",
+    "light-3": "border-y-light-3",
+    "light-4": "border-y-light-4",
+    "dark-1": "border-y-dark-1",
+    "dark-2": "border-y-dark-2",
+    "dark-3": "border-y-dark-3",
+    "dark-4": "border-y-dark-4",
+    black: "border-y-black",
+    white: "border-y-white",
+    transparent: "border-y-transparent"
+  };
+  borderTopColor = {
+    primary: "border-t-primary",
+    secondary: "border-t-secondary",
+    success: "border-t-success",
+    danger: "border-t-danger",
+    info: "border-t-info",
+    warning: "border-t-warning",
+    "light-1": "border-t-light-1",
+    "light-2": "border-t-light-2",
+    "light-3": "border-t-light-3",
+    "light-4": "border-t-light-4",
+    "dark-1": "border-t-dark-1",
+    "dark-2": "border-t-dark-2",
+    "dark-3": "border-t-dark-3",
+    "dark-4": "border-t-dark-4",
+    black: "border-t-black",
+    white: "border-t-white",
+    transparent: "border-t-transparent"
+  };
+  borderBottomColor = {
+    primary: "border-b-primary",
+    secondary: "border-b-secondary",
+    success: "border-b-success",
+    danger: "border-b-danger",
+    info: "border-b-info",
+    warning: "border-b-warning",
+    "light-1": "border-b-light-1",
+    "light-2": "border-b-light-2",
+    "light-3": "border-b-light-3",
+    "light-4": "border-b-light-4",
+    "dark-1": "border-b-dark-1",
+    "dark-2": "border-b-dark-2",
+    "dark-3": "border-b-dark-3",
+    "dark-4": "border-b-dark-4",
+    black: "border-b-black",
+    white: "border-b-white",
+    transparent: "border-b-transparent"
+  };
+  borderLeftColor = {
+    primary: "border-l-primary",
+    secondary: "border-l-secondary",
+    success: "border-l-success",
+    danger: "border-l-danger",
+    info: "border-l-info",
+    warning: "border-l-warning",
+    "light-1": "border-l-light-1",
+    "light-2": "border-l-light-2",
+    "light-3": "border-l-light-3",
+    "light-4": "border-l-light-4",
+    "dark-1": "border-l-dark-1",
+    "dark-2": "border-l-dark-2",
+    "dark-3": "border-l-dark-3",
+    "dark-4": "border-l-dark-4",
+    black: "border-l-black",
+    white: "border-l-white",
+    transparent: "border-l-transparent"
+  };
+  borderRightColor = {
+    primary: "border-r-primary",
+    secondary: "border-r-secondary",
+    success: "border-r-success",
+    danger: "border-r-danger",
+    info: "border-r-info",
+    warning: "border-r-warning",
+    "light-1": "border-r-light-1",
+    "light-2": "border-r-light-2",
+    "light-3": "border-r-light-3",
+    "light-4": "border-r-light-4",
+    "dark-1": "border-r-dark-1",
+    "dark-2": "border-r-dark-2",
+    "dark-3": "border-r-dark-3",
+    "dark-4": "border-r-dark-4",
+    black: "border-r-black",
+    white: "border-r-white",
+    transparent: "border-r-transparent"
+  };
+}
+class zt {
+  // h1 class
+  heading1 = {
+    sm: "h1-sm",
+    md: "h1-md",
+    lg: "h1-lg",
+    xl: "h1-xl"
+  };
+  // h2 class
+  heading2 = {
+    sm: "h2-sm",
+    md: "h2-md",
+    lg: "h2-lg",
+    xl: "h2-xl"
+  };
+  // h3 class
+  heading3 = {
+    sm: "h3-sm",
+    md: "h3-md",
+    lg: "h3-lg",
+    xl: "h3-xl"
+  };
+  // h4 class
+  heading4 = {
+    sm: "h4-sm",
+    md: "h4-md",
+    lg: "h4-lg",
+    xl: "h4-xl"
+  };
+}
+class Xt {
+  // opacity
+  backgroundOpacity = {
+    10: "bg-opacity-10",
+    20: "bg-opacity-20",
+    30: "bg-opacity-30",
+    40: "bg-opacity-40",
+    50: "bg-opacity-50",
+    60: "bg-opacity-60",
+    70: "bg-opacity-70",
+    80: "bg-opacity-80",
+    90: "bg-opacity-90",
+    100: "bg-opacity-100"
+  };
+  opacity = {
+    10: "opacity-10",
+    20: "opacity-20",
+    30: "opacity-30",
+    40: "opacity-40",
+    50: "opacity-50",
+    60: "opacity-60",
+    70: "opacity-70",
+    80: "opacity-80",
+    90: "opacity-90",
+    100: "opacity-100"
+  };
+  outlineOpacity = {
+    10: "outline-opacity-10",
+    20: "outline-opacity-20",
+    30: "outline-opacity-30",
+    40: "outline-opacity-40",
+    50: "outline-opacity-50",
+    60: "outline-opacity-60",
+    70: "outline-opacity-70",
+    80: "outline-opacity-80",
+    90: "outline-opacity-90",
+    100: "outline-opacity-100"
+  };
+}
+class $t {
+  // spacing: margin
+  margin = {
+    0: "m-0",
+    "3xs": "m-3xs",
+    "2xs": "m-2xs",
+    xs: "m-xs",
+    sm: "m-sm",
+    md: "m-md",
+    lg: "m-lg",
+    xl: "m-xl",
+    "2xl": "m-2xl",
+    "3xl": "m-3xl"
+  };
+  marginX = {
+    0: "mx-0",
+    "3xs": "mx-3xs",
+    "2xs": "mx-2xs",
+    xs: "mx-xs",
+    sm: "mx-sm",
+    md: "mx-md",
+    lg: "mx-lg",
+    xl: "mx-xl",
+    "2xl": "mx-2xl",
+    "3xl": "mx-3xl"
+  };
+  marginY = {
+    0: "my-0",
+    "3xs": "my-3xs",
+    "2xs": "my-2xs",
+    xs: "my-xs",
+    sm: "my-sm",
+    md: "my-md",
+    lg: "my-lg",
+    xl: "my-xl",
+    "2xl": "my-2xl",
+    "3xl": "my-3xl"
+  };
+  marginTop = {
+    0: "mt-0",
+    "3xs": "mt-3xs",
+    "2xs": "mt-2xs",
+    xs: "mt-xs",
+    sm: "mt-sm",
+    md: "mt-md",
+    lg: "mt-lg",
+    xl: "mt-xl",
+    "2xl": "mt-2xl",
+    "3xl": "mt-3xl"
+  };
+  marginBottom = {
+    0: "mb-0",
+    "3xs": "mb-3xs",
+    "2xs": "mb-2xs",
+    xs: "mb-xs",
+    sm: "mb-sm",
+    md: "mb-md",
+    lg: "mb-lg",
+    xl: "mb-xl",
+    "2xl": "mb-2xl",
+    "3xl": "mb-3xl"
+  };
+  marginLeft = {
+    0: "ml-0",
+    "3xs": "ml-3xs",
+    "2xs": "ml-2xs",
+    xs: "ml-xs",
+    sm: "ml-sm",
+    md: "ml-md",
+    lg: "ml-lg",
+    xl: "ml-xl",
+    "2xl": "ml-2xl",
+    "3xl": "ml-3xl"
+  };
+  marginRight = {
+    0: "mr-0",
+    "3xs": "mr-3xs",
+    "2xs": "mr-2xs",
+    xs: "mr-xs",
+    sm: "mr-sm",
+    md: "mr-md",
+    lg: "mr-lg",
+    xl: "mr-xl",
+    "2xl": "mr-2xl",
+    "3xl": "mr-3xl"
+  };
+  // spacing: padding
+  padding = {
+    0: "p-0",
+    "3xs": "p-3xs",
+    "2xs": "p-2xs",
+    xs: "p-xs",
+    sm: "p-sm",
+    md: "p-md",
+    lg: "p-lg",
+    xl: "p-xl",
+    "2xl": "p-2xl",
+    "3xl": "p-3xl"
+  };
+  paddingX = {
+    0: "px-0",
+    "3xs": "px-3xs",
+    "2xs": "px-2xs",
+    xs: "px-xs",
+    sm: "px-sm",
+    md: "px-md",
+    lg: "px-lg",
+    xl: "px-xl",
+    "2xl": "px-2xl",
+    "3xl": "px-3xl"
+  };
+  paddingY = {
+    0: "py-0",
+    "3xs": "py-3xs",
+    "2xs": "py-2xs",
+    xs: "py-xs",
+    sm: "py-sm",
+    md: "py-md",
+    lg: "py-lg",
+    xl: "py-xl",
+    "2xl": "py-2xl",
+    "3xl": "py-3xl"
+  };
+  paddingTop = {
+    0: "pt-0",
+    "3xs": "pt-3xs",
+    "2xs": "pt-2xs",
+    xs: "pt-xs",
+    sm: "pt-sm",
+    md: "pt-md",
+    lg: "pt-lg",
+    xl: "pt-xl",
+    "2xl": "pt-2xl",
+    "3xl": "pt-3xl"
+  };
+  paddingBottom = {
+    0: "pb-0",
+    "3xs": "pb-3xs",
+    "2xs": "pb-2xs",
+    xs: "pb-xs",
+    sm: "pb-sm",
+    md: "pb-md",
+    lg: "pb-lg",
+    xl: "pb-xl",
+    "2xl": "pb-2xl",
+    "3xl": "pb-3xl"
+  };
+  paddingLeft = {
+    0: "pl-0",
+    "3xs": "pl-3xs",
+    "2xs": "pl-2xs",
+    xs: "pl-xs",
+    sm: "pl-sm",
+    md: "pl-md",
+    lg: "pl-lg",
+    xl: "pl-xl",
+    "2xl": "pl-2xl",
+    "3xl": "pl-3xl"
+  };
+  paddingRight = {
+    0: "pr-0",
+    "3xs": "pr-3xs",
+    "2xs": "pr-2xs",
+    xs: "pr-xs",
+    sm: "pr-sm",
+    md: "pr-md",
+    lg: "pr-lg",
+    xl: "pr-xl",
+    "2xl": "pr-2xl",
+    "3xl": "pr-3xl"
+  };
+  // spacing gap class for flex/grid
+  gap = {
+    0: "gap-0",
+    "3xs": "gap-3xs",
+    "2xs": "gap-2xs",
+    xs: "gap-xs",
+    sm: "gap-sm",
+    md: "gap-md",
+    lg: "gap-lg",
+    xl: "gap-xl",
+    "2xl": "gap-2xl",
+    "3xl": "gap-3xl"
+  };
+}
+class Yt {
+  classType;
+  constructor(t) {
+    this.classType = t;
+  }
+  validateColorType(t) {
+    return typeof t != "string" || !/(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)/.test(t) ? !1 : _.colorType.includes(this.classType);
+  }
+  validateSpaceType(t) {
+    return typeof t != "string" || !/(0|3xs|2xs|xs|sm|md|lg|xl|2xl|3xl)/.test(t) ? !1 : _.spacingType.includes(this.classType);
+  }
+  validateHeadingTextSizeType(t) {
+    return typeof t != "string" || !/(sm|md|lg|xl)/.test(t) ? !1 : _.headingSizeType.includes(
+      this.classType
+    );
+  }
+  validateBodyTextSizeType(t) {
+    return typeof t != "string" || !/(xs|sm|md|lg|xl)/.test(t) ? !1 : _.textType.includes(this.classType);
+  }
+  validateFontWeightType(t) {
+    return typeof t != "string" || !/(light|normal|bold)/.test(t) ? !1 : _.fontWeightType.includes(
+      this.classType
+    );
+  }
+  validateOpacityType(t) {
+    return typeof t != "number" || !/\b(0|[1-9]0|100)\b/.test(t.toString()) ? !1 : _.scaleType.includes(this.classType);
+  }
+  validateRangeType(t) {
+    return typeof t != "number" || !/\b([1-9]|1[0-2])\b/.test(t.toString()) ? !1 : _.borderWidthType.includes(
+      this.classType
+    );
+  }
+  validateAlignment(t) {
+    return typeof t != "string" || !/(left|center|right)/.test(t) ? !1 : _.textAlignType.includes(
+      this.classType
+    );
+  }
+}
+const _ = {
+  colorType: [
+    "BGCOLOR",
+    "BEFOREBG",
+    "AFTERBG",
+    "HVBGCOLOR",
+    "FCBGCOLOR",
+    "ACTIVEBG",
+    "TEXTCOLOR",
+    "HVTEXTCOLOR",
+    "FCTEXTCOLOR",
+    "DISABLEDTEXTCOLOR",
+    "SVGFILL",
+    "RINGCOLOR",
+    "FOCUSRING",
+    "ACTIVERING",
+    "OUTLINE",
+    "FOCUSOUTLINE",
+    "ACTIVEOUTLINE",
+    "OFFSETRING",
+    "BTNCOLOR",
+    "LISTCOLOR",
+    "BORDER",
+    "BORDERX",
+    "BORDERY",
+    "BORDERT",
+    "BORDERB",
+    "BORDERL",
+    "BORDERR"
+  ],
+  textType: ["BODYTEXT"],
+  fontWeightType: ["FONTWEIGHT"],
+  textAlignType: ["TEXTALIGN"],
+  headingSizeType: ["H1", "H2", "H3", "H4"],
+  borderWidthType: [
+    "BORDERW",
+    "BORDERXW",
+    "BORDERYW",
+    "BORDERTW",
+    "BORDERBW",
+    "BORDERLW",
+    "BORDERRW"
+  ],
+  scaleType: ["BGOPACITY", "OPACITY", "OUTLINEOPACITY"],
+  spacingType: [
+    "MARGIN",
+    "MARGINX",
+    "MARGINY",
+    "MARGINT",
+    "MARGINB",
+    "MARGINL",
+    "MARGINR",
+    "PADDING",
+    "PADDINGX",
+    "PADDINGY",
+    "PADDINGT",
+    "PADDINGB",
+    "PADDINGL",
+    "PADDINGR",
+    "GAP"
+  ]
+};
+let Ut = class {
+  classType;
+  classValue;
+  colorClass;
+  headingSizeClass;
+  borderWidthClass;
+  opacityClass;
+  spacingClass;
+  textClass;
+  validator;
+  constructor(t, r) {
+    this.classType = t, this.classValue = r, this.colorClass = new Ht(), this.headingSizeClass = new zt(), this.borderWidthClass = new Pt(), this.opacityClass = new Xt(), this.spacingClass = new $t(), this.textClass = new Nt(), this.validator = new Yt(t);
+  }
+  generateClass() {
+    switch (this.classType) {
+      // case: color classes
+      case "BGCOLOR":
+        return this.getBgColorClass();
+      case "HVBGCOLOR":
+        return this.getHoverBgColorClass();
+      case "FCBGCOLOR":
+        return this.getFocusBgColorClass();
+      case "BEFOREBG":
+        return this.getBeforeBgColorClass();
+      case "AFTERBG":
+        return this.getAfterBgColorClass();
+      case "ACTIVEBG":
+        return this.getActiveBgColorClass();
+      case "TEXTCOLOR":
+        return this.getTextColorClass();
+      case "HVTEXTCOLOR":
+        return this.getHoverTextColorClass();
+      case "FCTEXTCOLOR":
+        return this.getFocusTextColorClass();
+      case "DISABLEDTEXTCOLOR":
+        return this.getDisabledTextColorClass();
+      case "SVGFILL":
+        return this.getSvgFillColorClass();
+      case "RINGCOLOR":
+        return this.getRingColorClass();
+      case "FOCUSRING":
+        return this.getFocusRingColorClass();
+      case "ACTIVERING":
+        return this.getActiveRingColorClass();
+      case "OFFSETRING":
+        return this.getRingOffsetColorClass();
+      case "OUTLINE":
+        return this.getOutlineColorClass();
+      case "FOCUSOUTLINE":
+        return this.getFocusOutlineColorClass();
+      case "ACTIVEOUTLINE":
+        return this.getActiveOutlineColorClass();
+      case "BTNCOLOR":
+        return this.getBtnColorClass();
+      case "LISTCOLOR":
+        return this.getListColorClass();
+      case "BORDER":
+        return this.getBorderColorClass();
+      case "BORDERX":
+        return this.getBorderXColorClass();
+      case "BORDERY":
+        return this.getBorderYColorClass();
+      case "BORDERT":
+        return this.getBorderTopColorClass();
+      case "BORDERB":
+        return this.getBorderBottomColorClass();
+      case "BORDERL":
+        return this.getBorderLeftColorClass();
+      case "BORDERR":
+        return this.getBorderRightColorClass();
+      // case: heading classes
+      case "H1":
+        return this.getH1Class();
+      case "H2":
+        return this.getH2Class();
+      case "H3":
+        return this.getH3Class();
+      case "H4":
+        return this.getH4Class();
+      // case: body text class
+      case "BODYTEXT":
+        return this.getBodyTextSizeClass();
+      // case: font weight class
+      case "FONTWEIGHT":
+        return this.getFontWeightClass();
+      // case: text alignment class
+      case "TEXTALIGN":
+        return this.getTextAlignClass();
+      // case: border width classes
+      case "BORDERW":
+        return this.getBorderWidthClass();
+      case "BORDERXW":
+        return this.getBorderXWidthClass();
+      case "BORDERYW":
+        return this.getBorderYWidthClass();
+      case "BORDERTW":
+        return this.getBorderTopWidthClass();
+      case "BORDERBW":
+        return this.getBorderBottomWidthClass();
+      case "BORDERLW":
+        return this.getBorderLeftWidthClass();
+      case "BORDERRW":
+        return this.getBorderRightWidthClass();
+      // case: opacity classes
+      case "OPACITY":
+        return this.getOpacityClass();
+      case "BGOPACITY":
+        return this.getBgOpacityClass();
+      case "OUTLINEOPACITY":
+        return this.getOutlineOpacityClass();
+      // case: margins
+      case "MARGIN":
+        return this.getMarginClass();
+      case "MARGINX":
+        return this.getMarginXClass();
+      case "MARGINY":
+        return this.getMarginYClass();
+      case "MARGINT":
+        return this.getMarginTopClass();
+      case "MARGINB":
+        return this.getMarginBottomClass();
+      case "MARGINL":
+        return this.getMarginLeftClass();
+      case "MARGINR":
+        return this.getMarginRightClass();
+      // case: paddings
+      case "PADDING":
+        return this.getPaddingClass();
+      case "PADDINGX":
+        return this.getPaddingXClass();
+      case "PADDINGY":
+        return this.getPaddingYClass();
+      case "PADDINGT":
+        return this.getPaddingTopClass();
+      case "PADDINGB":
+        return this.getPaddingBottomClass();
+      case "PADDINGL":
+        return this.getPaddingLeftClass();
+      case "PADDINGR":
+        return this.getPaddingRightClass();
+      // case: gap
+      case "GAP":
+        return this.getGapClass();
+      default:
+        return " ";
+    }
+  }
+  // handle color class
+  // bg color
+  getBgColorClass() {
+    return this.validator.validateColorType(this.classValue) ? this.colorClass.bgColor[this.classValue] : " ";
+  }
+  getHoverBgColorClass() {
+    return this.validator.validateColorType(this.classValue) ? this.colorClass.hoverBgColor[this.classValue] : " ";
+  }
+  getFocusBgColorClass() {
+    return this.validator.validateColorType(this.classValue) ? this.colorClass.focusBgColor[this.classValue] : " ";
+  }
+  getBeforeBgColorClass() {
+    return this.validator.validateColorType(this.classValue) ? this.colorClass.beforeBgColor[this.classValue] : " ";
+  }
+  getAfterBgColorClass() {
+    return this.validator.validateColorType(this.classValue) ? this.colorClass.afterBgColor[this.classValue] : " ";
+  }
+  getActiveBgColorClass() {
+    return this.validator.validateColorType(this.classValue) ? this.colorClass.bgActiveColor[this.classValue] : " ";
+  }
+  // text color
+  getTextColorClass() {
+    return this.validator.validateColorType(this.classValue) ? this.colorClass.textColor[this.classValue] : " ";
+  }
+  getHoverTextColorClass() {
+    return this.validator.validateColorType(this.classValue) ? this.colorClass.hoverTextColor[this.classValue] : " ";
+  }
+  getFocusTextColorClass() {
+    return this.validator.validateColorType(this.classValue) ? this.colorClass.focusTextColor[this.classValue] : " ";
+  }
+  getDisabledTextColorClass() {
+    return this.validator.validateColorType(this.classValue) ? this.colorClass.disabledTextColor[this.classValue] : " ";
+  }
+  // svg color
+  getSvgFillColorClass() {
+    return this.validator.validateColorType(this.classValue) ? this.colorClass.svgFillColor[this.classValue] : " ";
+  }
+  // ring color
+  getRingColorClass() {
+    return this.validator.validateColorType(this.classValue) ? this.colorClass.ringColor[this.classValue] : " ";
+  }
+  getFocusRingColorClass() {
+    return this.validator.validateColorType(this.classValue) ? this.colorClass.ringFocusColor[this.classValue] : " ";
+  }
+  getActiveRingColorClass() {
+    return this.validator.validateColorType(this.classValue) ? this.colorClass.ringActiveColor[this.classValue] : " ";
+  }
+  getRingOffsetColorClass() {
+    return this.validator.validateColorType(this.classValue) ? this.colorClass.ringOffsetColor[this.classValue] : " ";
+  }
+  // outline color
+  getOutlineColorClass() {
+    return this.validator.validateColorType(this.classValue) ? this.colorClass.outlineColor[this.classValue] : " ";
+  }
+  getFocusOutlineColorClass() {
+    return this.validator.validateColorType(this.classValue) ? this.colorClass.focusOutlineColor[this.classValue] : " ";
+  }
+  getActiveOutlineColorClass() {
+    return this.validator.validateColorType(this.classValue) ? this.colorClass.activeOutlineColor[this.classValue] : " ";
+  }
+  // btn & list
+  getBtnColorClass() {
+    return this.validator.validateColorType(this.classValue) ? this.colorClass.btnColor[this.classValue] : " ";
+  }
+  getListColorClass() {
+    return this.validator.validateColorType(this.classValue) ? this.colorClass.listColor[this.classValue] : " ";
+  }
+  // border color
+  getBorderColorClass() {
+    return this.validator.validateColorType(this.classValue) ? this.colorClass.borderColor[this.classValue] : " ";
+  }
+  getBorderXColorClass() {
+    return this.validator.validateColorType(this.classValue) ? this.colorClass.borderXColor[this.classValue] : " ";
+  }
+  getBorderYColorClass() {
+    return this.validator.validateColorType(this.classValue) ? this.colorClass.borderYColor[this.classValue] : " ";
+  }
+  getBorderTopColorClass() {
+    return this.validator.validateColorType(this.classValue) ? this.colorClass.borderTopColor[this.classValue] : " ";
+  }
+  getBorderBottomColorClass() {
+    return this.validator.validateColorType(this.classValue) ? this.colorClass.borderBottomColor[this.classValue] : " ";
+  }
+  getBorderLeftColorClass() {
+    return this.validator.validateColorType(this.classValue) ? this.colorClass.borderLeftColor[this.classValue] : " ";
+  }
+  getBorderRightColorClass() {
+    return this.validator.validateColorType(this.classValue) ? this.colorClass.borderRightColor[this.classValue] : " ";
+  }
+  // handle heading classes
+  getH1Class() {
+    return this.validator.validateHeadingTextSizeType(this.classValue) ? this.headingSizeClass.heading1[this.classValue] : " ";
+  }
+  getH2Class() {
+    return this.validator.validateHeadingTextSizeType(this.classValue) ? this.headingSizeClass.heading2[this.classValue] : " ";
+  }
+  getH3Class() {
+    return this.validator.validateHeadingTextSizeType(this.classValue) ? this.headingSizeClass.heading3[this.classValue] : " ";
+  }
+  getH4Class() {
+    return this.validator.validateHeadingTextSizeType(this.classValue) ? this.headingSizeClass.heading4[this.classValue] : " ";
+  }
+  // handle body text size classes
+  getBodyTextSizeClass() {
+    return this.validator.validateBodyTextSizeType(this.classValue) ? this.textClass.bodyText[this.classValue] : " ";
+  }
+  // handle font weight classes
+  getFontWeightClass() {
+    return this.validator.validateFontWeightType(this.classValue) ? this.textClass.fontweight[this.classValue] : " ";
+  }
+  // handle text align classes
+  getTextAlignClass() {
+    return this.validator.validateAlignment(this.classValue) ? this.textClass.textAlign[this.classValue] : " ";
+  }
+  // handle border width class
+  getBorderWidthClass() {
+    return this.validator.validateRangeType(this.classValue) ? this.borderWidthClass.borderWidth[this.classValue] : " ";
+  }
+  getBorderXWidthClass() {
+    return this.validator.validateRangeType(this.classValue) ? this.borderWidthClass.borderXWidth[this.classValue] : " ";
+  }
+  getBorderYWidthClass() {
+    return this.validator.validateRangeType(this.classValue) ? this.borderWidthClass.borderYWidth[this.classValue] : " ";
+  }
+  getBorderTopWidthClass() {
+    return this.validator.validateRangeType(this.classValue) ? this.borderWidthClass.borderTopWidth[this.classValue] : " ";
+  }
+  getBorderBottomWidthClass() {
+    return this.validator.validateRangeType(this.classValue) ? this.borderWidthClass.borderBottomWidth[this.classValue] : " ";
+  }
+  getBorderLeftWidthClass() {
+    return this.validator.validateRangeType(this.classValue) ? this.borderWidthClass.borderLeftWidth[this.classValue] : " ";
+  }
+  getBorderRightWidthClass() {
+    return this.validator.validateRangeType(this.classValue) ? this.borderWidthClass.borderRightWidth[this.classValue] : " ";
+  }
+  // handle opacity classes
+  getOpacityClass() {
+    return this.validator.validateOpacityType(this.classValue) ? this.opacityClass.opacity[this.classValue] : " ";
+  }
+  getBgOpacityClass() {
+    return this.validator.validateOpacityType(this.classValue) ? this.opacityClass.backgroundOpacity[this.classValue] : " ";
+  }
+  getOutlineOpacityClass() {
+    return this.validator.validateOpacityType(this.classValue) ? this.opacityClass.outlineOpacity[this.classValue] : " ";
+  }
+  // spacing classes
+  // margins
+  getMarginClass() {
+    return this.validator.validateSpaceType(this.classValue) ? this.spacingClass.margin[this.classValue] : " ";
+  }
+  getMarginXClass() {
+    return this.validator.validateSpaceType(this.classValue) ? this.spacingClass.marginX[this.classValue] : " ";
+  }
+  getMarginYClass() {
+    return this.validator.validateSpaceType(this.classValue) ? this.spacingClass.marginY[this.classValue] : " ";
+  }
+  getMarginTopClass() {
+    return this.validator.validateSpaceType(this.classValue) ? this.spacingClass.marginTop[this.classValue] : " ";
+  }
+  getMarginBottomClass() {
+    return this.validator.validateSpaceType(this.classValue) ? this.spacingClass.marginBottom[this.classValue] : " ";
+  }
+  getMarginLeftClass() {
+    return this.validator.validateSpaceType(this.classValue) ? this.spacingClass.marginLeft[this.classValue] : " ";
+  }
+  getMarginRightClass() {
+    return this.validator.validateSpaceType(this.classValue) ? this.spacingClass.marginRight[this.classValue] : " ";
+  }
+  // paddings
+  getPaddingClass() {
+    return this.validator.validateSpaceType(this.classValue) ? this.spacingClass.padding[this.classValue] : " ";
+  }
+  getPaddingXClass() {
+    return this.validator.validateSpaceType(this.classValue) ? this.spacingClass.paddingX[this.classValue] : " ";
+  }
+  getPaddingYClass() {
+    return this.validator.validateSpaceType(this.classValue) ? this.spacingClass.paddingY[this.classValue] : " ";
+  }
+  getPaddingTopClass() {
+    return this.validator.validateSpaceType(this.classValue) ? this.spacingClass.paddingTop[this.classValue] : " ";
+  }
+  getPaddingBottomClass() {
+    return this.validator.validateSpaceType(this.classValue) ? this.spacingClass.paddingBottom[this.classValue] : " ";
+  }
+  getPaddingLeftClass() {
+    return this.validator.validateSpaceType(this.classValue) ? this.spacingClass.paddingLeft[this.classValue] : " ";
+  }
+  getPaddingRightClass() {
+    return this.validator.validateSpaceType(this.classValue) ? this.spacingClass.paddingRight[this.classValue] : " ";
+  }
+  // gaps
+  getGapClass() {
+    return this.validator.validateSpaceType(this.classValue) ? this.spacingClass.gap[this.classValue] : " ";
+  }
+};
+const Ne = (e, t) => new Ut(e, t).generateClass(), jt = (e, t, r) => !t || !(t instanceof Node) || e === t || e.contains(t) ? !1 : r?.length ? !r.some(
+  (l) => l === t || l.contains(t)
+) : !0, ve = (e) => typeof e.value == "function" ? {
+  handler: e.value,
+  events: ["click"]
+} : {
+  handler: e.value.handler,
+  events: e.value.events || ["click"],
+  excludeElements: e.value.excludeElements
+}, Pe = (e, t, r) => (l) => {
+  jt(e, l.target, r) && t(l);
+}, qt = {
+  mounted(e, t) {
+    const { handler: r, events: l, excludeElements: s } = ve(t);
+    e.__ClickOutsideHandler = Pe(e, r, s), l.forEach((o) => {
+      document.addEventListener(o, e.__ClickOutsideHandler, !0);
+    });
+  },
+  updated(e, t) {
+    e.__ClickOutsideHandler && ve({
+      ...t,
+      value: t.oldValue
+    }).events.forEach((o) => {
+      document.removeEventListener(o, e.__ClickOutsideHandler, !0);
+    });
+    const { handler: r, events: l, excludeElements: s } = ve(t);
+    e.__ClickOutsideHandler = Pe(e, r, s), l.forEach((o) => {
+      document.addEventListener(o, e.__ClickOutsideHandler, !0);
+    });
+  },
+  unmounted(e, t) {
+    if (e.__ClickOutsideHandler) {
+      const { events: r } = ve(t);
+      r.forEach((l) => {
+        document.removeEventListener(l, e.__ClickOutsideHandler, !0);
+      }), delete e.__ClickOutsideHandler;
+    }
+  }
+}, He = {
+  left: "tooltip-left",
+  top: "tooltip-top",
+  bottom: "tooltip-bottom",
+  right: "tooltip-right"
+};
+z({
+  name: "Tooltip",
+  props: {
+    direction: {
+      type: String,
+      default: "right"
+    },
+    color: {
+      type: String,
+      default: "dark-3"
+    },
+    textColor: {
+      type: String,
+      default: "white"
+    },
+    width: {
+      type: [Number, String],
+      default: 80
+    },
+    customClass: {
+      type: String,
+      default: ""
+    },
+    title: {
+      type: String,
+      required: !0
+    }
+  },
+  setup(e) {
+    const t = "invisible opacity-0 group-hover:visible group-hover:opacity-100 z-[100] tooltip", r = w(() => [
+      Ne("BGCOLOR", e.color),
+      Ne("TEXTCOLOR", e.textColor)
+    ].join(" ")), l = w(() => ({ width: `${e.width}px` })), s = w(() => He[e.direction] || He.right), o = w(() => [
+      t,
+      s.value,
+      r.value,
+      e.customClass
+    ]);
+    return () => yt("div", {
+      class: o.value,
+      role: "tooltip",
+      innerHTML: e.title,
+      style: [l.value]
+    });
+  }
+});
+const ke = Math.min, Z = Math.max, we = Math.round, Ce = Math.floor, P = (e) => ({
   x: e,
   y: e
-}), Vt = {
+}), _t = {
   left: "right",
   right: "left",
   bottom: "top",
   top: "bottom"
-}, Mt = {
+}, Kt = {
   start: "end",
   end: "start"
 };
-function ze(e, t, o) {
-  return J(e, we(t, o));
+function ze(e, t, r) {
+  return Z(e, ke(t, r));
 }
-function Re(e, t) {
+function Oe(e, t) {
   return typeof e == "function" ? e(t) : e;
 }
-function Z(e) {
+function ee(e) {
   return e.split("-")[0];
 }
-function Oe(e) {
+function Be(e) {
   return e.split("-")[1];
 }
-function Qe(e) {
+function ot(e) {
   return e === "x" ? "y" : "x";
 }
-function Ze(e) {
+function at(e) {
   return e === "y" ? "height" : "width";
 }
-function Q(e) {
-  return ["top", "bottom"].includes(Z(e)) ? "y" : "x";
+const Jt = /* @__PURE__ */ new Set(["top", "bottom"]);
+function K(e) {
+  return Jt.has(ee(e)) ? "y" : "x";
 }
-function et(e) {
-  return Qe(Q(e));
+function it(e) {
+  return ot(K(e));
 }
-function Ft(e, t, o) {
-  o === void 0 && (o = !1);
-  const n = Oe(e), l = et(e), i = Ze(l);
-  let r = l === "x" ? n === (o ? "end" : "start") ? "right" : "left" : n === "start" ? "bottom" : "top";
-  return t.reference[i] > t.floating[i] && (r = ke(r)), [r, ke(r)];
+function Qt(e, t, r) {
+  r === void 0 && (r = !1);
+  const l = Be(e), s = it(e), o = at(s);
+  let a = s === "x" ? l === (r ? "end" : "start") ? "right" : "left" : l === "start" ? "bottom" : "top";
+  return t.reference[o] > t.floating[o] && (a = Te(a)), [a, Te(a)];
 }
-function Dt(e) {
-  const t = ke(e);
-  return [Te(e), t, Te(t)];
+function Zt(e) {
+  const t = Te(e);
+  return [De(e), t, De(t)];
 }
-function Te(e) {
-  return e.replace(/start|end/g, (t) => Mt[t]);
+function De(e) {
+  return e.replace(/start|end/g, (t) => Kt[t]);
 }
-function $t(e, t, o) {
-  const n = ["left", "right"], l = ["right", "left"], i = ["top", "bottom"], r = ["bottom", "top"];
+const Xe = ["left", "right"], $e = ["right", "left"], er = ["top", "bottom"], tr = ["bottom", "top"];
+function rr(e, t, r) {
   switch (e) {
     case "top":
     case "bottom":
-      return o ? t ? l : n : t ? n : l;
+      return r ? t ? $e : Xe : t ? Xe : $e;
     case "left":
     case "right":
-      return t ? i : r;
+      return t ? er : tr;
     default:
       return [];
   }
 }
-function It(e, t, o, n) {
-  const l = Oe(e);
-  let i = $t(Z(e), o === "start", n);
-  return l && (i = i.map((r) => r + "-" + l), t && (i = i.concat(i.map(Te)))), i;
+function lr(e, t, r, l) {
+  const s = Be(e);
+  let o = rr(ee(e), r === "start", l);
+  return s && (o = o.map((a) => a + "-" + s), t && (o = o.concat(o.map(De)))), o;
 }
-function ke(e) {
-  return e.replace(/left|right|bottom|top/g, (t) => Vt[t]);
+function Te(e) {
+  return e.replace(/left|right|bottom|top/g, (t) => _t[t]);
 }
-function zt(e) {
+function sr(e) {
   return {
     top: 0,
     right: 0,
@@ -419,416 +1865,421 @@ function zt(e) {
     ...e
   };
 }
-function _t(e) {
-  return typeof e != "number" ? zt(e) : {
+function or(e) {
+  return typeof e != "number" ? sr(e) : {
     top: e,
     right: e,
     bottom: e,
     left: e
   };
 }
-function Ce(e) {
+function Re(e) {
   const {
     x: t,
-    y: o,
-    width: n,
-    height: l
+    y: r,
+    width: l,
+    height: s
   } = e;
   return {
-    width: n,
-    height: l,
-    top: o,
+    width: l,
+    height: s,
+    top: r,
     left: t,
-    right: t + n,
-    bottom: o + l,
+    right: t + l,
+    bottom: r + s,
     x: t,
-    y: o
+    y: r
   };
 }
-function _e(e, t, o) {
+function Ye(e, t, r) {
   let {
-    reference: n,
-    floating: l
+    reference: l,
+    floating: s
   } = e;
-  const i = Q(t), r = et(t), a = Ze(r), p = Z(t), u = i === "y", f = n.x + n.width / 2 - l.width / 2, s = n.y + n.height / 2 - l.height / 2, d = n[a] / 2 - l[a] / 2;
+  const o = K(t), a = it(t), n = at(a), g = ee(t), d = o === "y", u = l.x + l.width / 2 - s.width / 2, i = l.y + l.height / 2 - s.height / 2, h = l[n] / 2 - s[n] / 2;
   let c;
-  switch (p) {
+  switch (g) {
     case "top":
       c = {
-        x: f,
-        y: n.y - l.height
+        x: u,
+        y: l.y - s.height
       };
       break;
     case "bottom":
       c = {
-        x: f,
-        y: n.y + n.height
+        x: u,
+        y: l.y + l.height
       };
       break;
     case "right":
       c = {
-        x: n.x + n.width,
-        y: s
+        x: l.x + l.width,
+        y: i
       };
       break;
     case "left":
       c = {
-        x: n.x - l.width,
-        y: s
+        x: l.x - s.width,
+        y: i
       };
       break;
     default:
       c = {
-        x: n.x,
-        y: n.y
+        x: l.x,
+        y: l.y
       };
   }
-  switch (Oe(t)) {
+  switch (Be(t)) {
     case "start":
-      c[r] -= d * (o && u ? -1 : 1);
+      c[a] -= h * (r && d ? -1 : 1);
       break;
     case "end":
-      c[r] += d * (o && u ? -1 : 1);
+      c[a] += h * (r && d ? -1 : 1);
       break;
   }
   return c;
 }
-const Pt = async (e, t, o) => {
+async function ar(e, t) {
+  var r;
+  t === void 0 && (t = {});
+  const {
+    x: l,
+    y: s,
+    platform: o,
+    rects: a,
+    elements: n,
+    strategy: g
+  } = e, {
+    boundary: d = "clippingAncestors",
+    rootBoundary: u = "viewport",
+    elementContext: i = "floating",
+    altBoundary: h = !1,
+    padding: c = 0
+  } = Oe(t, e), f = or(c), y = n[h ? i === "floating" ? "reference" : "floating" : i], p = Re(await o.getClippingRect({
+    element: (r = await (o.isElement == null ? void 0 : o.isElement(y))) == null || r ? y : y.contextElement || await (o.getDocumentElement == null ? void 0 : o.getDocumentElement(n.floating)),
+    boundary: d,
+    rootBoundary: u,
+    strategy: g
+  })), v = i === "floating" ? {
+    x: l,
+    y: s,
+    width: a.floating.width,
+    height: a.floating.height
+  } : a.reference, T = await (o.getOffsetParent == null ? void 0 : o.getOffsetParent(n.floating)), O = await (o.isElement == null ? void 0 : o.isElement(T)) ? await (o.getScale == null ? void 0 : o.getScale(T)) || {
+    x: 1,
+    y: 1
+  } : {
+    x: 1,
+    y: 1
+  }, I = Re(o.convertOffsetParentRelativeRectToViewportRelativeRect ? await o.convertOffsetParentRelativeRectToViewportRelativeRect({
+    elements: n,
+    rect: v,
+    offsetParent: T,
+    strategy: g
+  }) : v);
+  return {
+    top: (p.top - I.top + f.top) / O.y,
+    bottom: (I.bottom - p.bottom + f.bottom) / O.y,
+    left: (p.left - I.left + f.left) / O.x,
+    right: (I.right - p.right + f.right) / O.x
+  };
+}
+const ir = async (e, t, r) => {
   const {
-    placement: n = "bottom",
-    strategy: l = "absolute",
-    middleware: i = [],
-    platform: r
-  } = o, a = i.filter(Boolean), p = await (r.isRTL == null ? void 0 : r.isRTL(t));
-  let u = await r.getElementRects({
+    placement: l = "bottom",
+    strategy: s = "absolute",
+    middleware: o = [],
+    platform: a
+  } = r, n = o.filter(Boolean), g = await (a.isRTL == null ? void 0 : a.isRTL(t));
+  let d = await a.getElementRects({
     reference: e,
     floating: t,
-    strategy: l
+    strategy: s
   }), {
-    x: f,
-    y: s
-  } = _e(u, n, p), d = n, c = {}, g = 0;
-  for (let b = 0; b < a.length; b++) {
+    x: u,
+    y: i
+  } = Ye(d, l, g), h = l, c = {}, f = 0;
+  for (let y = 0; y < n.length; y++) {
+    var m;
     const {
-      name: y,
-      fn: m
-    } = a[b], {
-      x: w,
-      y: C,
-      data: E,
-      reset: L
-    } = await m({
-      x: f,
-      y: s,
-      initialPlacement: n,
-      placement: d,
-      strategy: l,
+      name: p,
+      fn: v
+    } = n[y], {
+      x: T,
+      y: O,
+      data: I,
+      reset: S
+    } = await v({
+      x: u,
+      y: i,
+      initialPlacement: l,
+      placement: h,
+      strategy: s,
       middlewareData: c,
-      rects: u,
-      platform: r,
+      rects: d,
+      platform: {
+        ...a,
+        detectOverflow: (m = a.detectOverflow) != null ? m : ar
+      },
       elements: {
         reference: e,
         floating: t
       }
     });
-    f = w ?? f, s = C ?? s, c = {
+    u = T ?? u, i = O ?? i, c = {
       ...c,
-      [y]: {
-        ...c[y],
-        ...E
+      [p]: {
+        ...c[p],
+        ...I
       }
-    }, L && g <= 50 && (g++, typeof L == "object" && (L.placement && (d = L.placement), L.rects && (u = L.rects === !0 ? await r.getElementRects({
+    }, S && f <= 50 && (f++, typeof S == "object" && (S.placement && (h = S.placement), S.rects && (d = S.rects === !0 ? await a.getElementRects({
       reference: e,
       floating: t,
-      strategy: l
-    }) : L.rects), {
-      x: f,
-      y: s
-    } = _e(u, d, p)), b = -1);
+      strategy: s
+    }) : S.rects), {
+      x: u,
+      y: i
+    } = Ye(d, h, g)), y = -1);
   }
   return {
-    x: f,
-    y: s,
-    placement: d,
-    strategy: l,
+    x: u,
+    y: i,
+    placement: h,
+    strategy: s,
     middlewareData: c
   };
-};
-async function tt(e, t) {
-  var o;
-  t === void 0 && (t = {});
-  const {
-    x: n,
-    y: l,
-    platform: i,
-    rects: r,
-    elements: a,
-    strategy: p
-  } = e, {
-    boundary: u = "clippingAncestors",
-    rootBoundary: f = "viewport",
-    elementContext: s = "floating",
-    altBoundary: d = !1,
-    padding: c = 0
-  } = Re(t, e), g = _t(c), y = a[d ? s === "floating" ? "reference" : "floating" : s], m = Ce(await i.getClippingRect({
-    element: (o = await (i.isElement == null ? void 0 : i.isElement(y))) == null || o ? y : y.contextElement || await (i.getDocumentElement == null ? void 0 : i.getDocumentElement(a.floating)),
-    boundary: u,
-    rootBoundary: f,
-    strategy: p
-  })), w = s === "floating" ? {
-    x: n,
-    y: l,
-    width: r.floating.width,
-    height: r.floating.height
-  } : r.reference, C = await (i.getOffsetParent == null ? void 0 : i.getOffsetParent(a.floating)), E = await (i.isElement == null ? void 0 : i.isElement(C)) ? await (i.getScale == null ? void 0 : i.getScale(C)) || {
-    x: 1,
-    y: 1
-  } : {
-    x: 1,
-    y: 1
-  }, L = Ce(i.convertOffsetParentRelativeRectToViewportRelativeRect ? await i.convertOffsetParentRelativeRectToViewportRelativeRect({
-    elements: a,
-    rect: w,
-    offsetParent: C,
-    strategy: p
-  }) : w);
-  return {
-    top: (m.top - L.top + g.top) / E.y,
-    bottom: (L.bottom - m.bottom + g.bottom) / E.y,
-    left: (m.left - L.left + g.left) / E.x,
-    right: (L.right - m.right + g.right) / E.x
-  };
-}
-const Ht = function(e) {
+}, nr = function(e) {
   return e === void 0 && (e = {}), {
     name: "flip",
     options: e,
     async fn(t) {
-      var o, n;
+      var r, l;
       const {
-        placement: l,
-        middlewareData: i,
-        rects: r,
-        initialPlacement: a,
-        platform: p,
-        elements: u
+        placement: s,
+        middlewareData: o,
+        rects: a,
+        initialPlacement: n,
+        platform: g,
+        elements: d
       } = t, {
-        mainAxis: f = !0,
-        crossAxis: s = !0,
-        fallbackPlacements: d,
+        mainAxis: u = !0,
+        crossAxis: i = !0,
+        fallbackPlacements: h,
         fallbackStrategy: c = "bestFit",
-        fallbackAxisSideDirection: g = "none",
-        flipAlignment: b = !0,
+        fallbackAxisSideDirection: f = "none",
+        flipAlignment: m = !0,
         ...y
-      } = Re(e, t);
-      if ((o = i.arrow) != null && o.alignmentOffset)
+      } = Oe(e, t);
+      if ((r = o.arrow) != null && r.alignmentOffset)
         return {};
-      const m = Z(l), w = Q(a), C = Z(a) === a, E = await (p.isRTL == null ? void 0 : p.isRTL(u.floating)), L = d || (C || !b ? [ke(a)] : Dt(a)), _ = g !== "none";
-      !d && _ && L.push(...It(a, b, g, E));
-      const O = [a, ...L], D = await tt(t, y), G = [];
-      let U = ((n = i.flip) == null ? void 0 : n.overflows) || [];
-      if (f && G.push(D[m]), s) {
-        const j = Ft(l, r, E);
-        G.push(D[j[0]], D[j[1]]);
+      const p = ee(s), v = K(n), T = ee(n) === n, O = await (g.isRTL == null ? void 0 : g.isRTL(d.floating)), I = h || (T || !m ? [Te(n)] : Zt(n)), S = f !== "none";
+      !h && S && I.push(...lr(n, m, f, O));
+      const R = [n, ...I], F = await g.detectOverflow(t, y), $ = [];
+      let j = ((l = o.flip) == null ? void 0 : l.overflows) || [];
+      if (u && $.push(F[p]), i) {
+        const Y = Qt(s, a, O);
+        $.push(F[Y[0]], F[Y[1]]);
       }
-      if (U = [...U, {
-        placement: l,
-        overflows: G
-      }], !G.every((j) => j <= 0)) {
-        var X, ce;
-        const j = (((X = i.flip) == null ? void 0 : X.index) || 0) + 1, h = O[j];
-        if (h) {
-          var me;
-          const k = s === "alignment" ? w !== Q(h) : !1, T = ((me = U[0]) == null ? void 0 : me.overflows[0]) > 0;
-          if (!k || T)
-            return {
-              data: {
-                index: j,
-                overflows: U
-              },
-              reset: {
-                placement: h
-              }
-            };
-        }
-        let v = (ce = U.filter((k) => k.overflows[0] <= 0).sort((k, T) => k.overflows[1] - T.overflows[1])[0]) == null ? void 0 : ce.placement;
-        if (!v)
+      if (j = [...j, {
+        placement: s,
+        overflows: $
+      }], !$.every((Y) => Y <= 0)) {
+        var q, de;
+        const Y = (((q = o.flip) == null ? void 0 : q.index) || 0) + 1, ue = R[Y];
+        if (ue && (!(i === "alignment" ? v !== K(ue) : !1) || // We leave the current main axis only if every placement on that axis
+        // overflows the main axis.
+        j.every((k) => K(k.placement) === v ? k.overflows[0] > 0 : !0)))
+          return {
+            data: {
+              index: Y,
+              overflows: j
+            },
+            reset: {
+              placement: ue
+            }
+          };
+        let x = (de = j.filter((b) => b.overflows[0] <= 0).sort((b, k) => b.overflows[1] - k.overflows[1])[0]) == null ? void 0 : de.placement;
+        if (!x)
           switch (c) {
             case "bestFit": {
-              var ve;
-              const k = (ve = U.filter((T) => {
-                if (_) {
-                  const V = Q(T.placement);
-                  return V === w || // Create a bias to the `y` side axis due to horizontal
+              var me;
+              const b = (me = j.filter((k) => {
+                if (S) {
+                  const D = K(k.placement);
+                  return D === v || // Create a bias to the `y` side axis due to horizontal
                   // reading directions favoring greater width.
-                  V === "y";
+                  D === "y";
                 }
                 return !0;
-              }).map((T) => [T.placement, T.overflows.filter((V) => V > 0).reduce((V, Se) => V + Se, 0)]).sort((T, V) => T[1] - V[1])[0]) == null ? void 0 : ve[0];
-              k && (v = k);
+              }).map((k) => [k.placement, k.overflows.filter((D) => D > 0).reduce((D, G) => D + G, 0)]).sort((k, D) => k[1] - D[1])[0]) == null ? void 0 : me[0];
+              b && (x = b);
               break;
             }
             case "initialPlacement":
-              v = a;
+              x = n;
               break;
           }
-        if (l !== v)
+        if (s !== x)
           return {
             reset: {
-              placement: v
+              placement: x
             }
           };
       }
       return {};
     }
   };
-};
-async function Nt(e, t) {
+}, cr = /* @__PURE__ */ new Set(["left", "top"]);
+async function dr(e, t) {
   const {
-    placement: o,
-    platform: n,
-    elements: l
-  } = e, i = await (n.isRTL == null ? void 0 : n.isRTL(l.floating)), r = Z(o), a = Oe(o), p = Q(o) === "y", u = ["left", "top"].includes(r) ? -1 : 1, f = i && p ? -1 : 1, s = Re(t, e);
+    placement: r,
+    platform: l,
+    elements: s
+  } = e, o = await (l.isRTL == null ? void 0 : l.isRTL(s.floating)), a = ee(r), n = Be(r), g = K(r) === "y", d = cr.has(a) ? -1 : 1, u = o && g ? -1 : 1, i = Oe(t, e);
   let {
-    mainAxis: d,
+    mainAxis: h,
     crossAxis: c,
-    alignmentAxis: g
-  } = typeof s == "number" ? {
-    mainAxis: s,
+    alignmentAxis: f
+  } = typeof i == "number" ? {
+    mainAxis: i,
     crossAxis: 0,
     alignmentAxis: null
   } : {
-    mainAxis: s.mainAxis || 0,
-    crossAxis: s.crossAxis || 0,
-    alignmentAxis: s.alignmentAxis
+    mainAxis: i.mainAxis || 0,
+    crossAxis: i.crossAxis || 0,
+    alignmentAxis: i.alignmentAxis
   };
-  return a && typeof g == "number" && (c = a === "end" ? g * -1 : g), p ? {
-    x: c * f,
-    y: d * u
+  return n && typeof f == "number" && (c = n === "end" ? f * -1 : f), g ? {
+    x: c * u,
+    y: h * d
   } : {
-    x: d * u,
-    y: c * f
+    x: h * d,
+    y: c * u
   };
 }
-const Gt = function(e) {
+const ur = function(e) {
   return e === void 0 && (e = 0), {
     name: "offset",
     options: e,
     async fn(t) {
-      var o, n;
+      var r, l;
       const {
-        x: l,
-        y: i,
-        placement: r,
-        middlewareData: a
-      } = t, p = await Nt(t, e);
-      return r === ((o = a.offset) == null ? void 0 : o.placement) && (n = a.arrow) != null && n.alignmentOffset ? {} : {
-        x: l + p.x,
-        y: i + p.y,
+        x: s,
+        y: o,
+        placement: a,
+        middlewareData: n
+      } = t, g = await dr(t, e);
+      return a === ((r = n.offset) == null ? void 0 : r.placement) && (l = n.arrow) != null && l.alignmentOffset ? {} : {
+        x: s + g.x,
+        y: o + g.y,
         data: {
-          ...p,
-          placement: r
+          ...g,
+          placement: a
         }
       };
     }
   };
-}, jt = function(e) {
+}, gr = function(e) {
   return e === void 0 && (e = {}), {
     name: "shift",
     options: e,
     async fn(t) {
       const {
-        x: o,
-        y: n,
-        placement: l
+        x: r,
+        y: l,
+        placement: s,
+        platform: o
       } = t, {
-        mainAxis: i = !0,
-        crossAxis: r = !1,
-        limiter: a = {
-          fn: (y) => {
+        mainAxis: a = !0,
+        crossAxis: n = !1,
+        limiter: g = {
+          fn: (p) => {
             let {
-              x: m,
-              y: w
-            } = y;
+              x: v,
+              y: T
+            } = p;
             return {
-              x: m,
-              y: w
+              x: v,
+              y: T
             };
           }
         },
-        ...p
-      } = Re(e, t), u = {
-        x: o,
-        y: n
-      }, f = await tt(t, p), s = Q(Z(l)), d = Qe(s);
-      let c = u[d], g = u[s];
-      if (i) {
-        const y = d === "y" ? "top" : "left", m = d === "y" ? "bottom" : "right", w = c + f[y], C = c - f[m];
-        c = ze(w, c, C);
+        ...d
+      } = Oe(e, t), u = {
+        x: r,
+        y: l
+      }, i = await o.detectOverflow(t, d), h = K(ee(s)), c = ot(h);
+      let f = u[c], m = u[h];
+      if (a) {
+        const p = c === "y" ? "top" : "left", v = c === "y" ? "bottom" : "right", T = f + i[p], O = f - i[v];
+        f = ze(T, f, O);
       }
-      if (r) {
-        const y = s === "y" ? "top" : "left", m = s === "y" ? "bottom" : "right", w = g + f[y], C = g - f[m];
-        g = ze(w, g, C);
+      if (n) {
+        const p = h === "y" ? "top" : "left", v = h === "y" ? "bottom" : "right", T = m + i[p], O = m - i[v];
+        m = ze(T, m, O);
       }
-      const b = a.fn({
+      const y = g.fn({
         ...t,
-        [d]: c,
-        [s]: g
+        [c]: f,
+        [h]: m
       });
       return {
-        ...b,
+        ...y,
         data: {
-          x: b.x - o,
-          y: b.y - n,
+          x: y.x - r,
+          y: y.y - l,
           enabled: {
-            [d]: i,
-            [s]: r
+            [c]: a,
+            [h]: n
           }
         }
       };
     }
   };
 };
-function Be() {
+function Ve() {
   return typeof window < "u";
 }
-function te(e) {
-  return Me(e) ? (e.nodeName || "").toLowerCase() : "#document";
+function re(e) {
+  return Fe(e) ? (e.nodeName || "").toLowerCase() : "#document";
 }
-function $(e) {
+function M(e) {
   var t;
   return (e == null || (t = e.ownerDocument) == null ? void 0 : t.defaultView) || window;
 }
-function N(e) {
+function X(e) {
   var t;
-  return (t = (Me(e) ? e.ownerDocument : e.document) || window.document) == null ? void 0 : t.documentElement;
+  return (t = (Fe(e) ? e.ownerDocument : e.document) || window.document) == null ? void 0 : t.documentElement;
 }
-function Me(e) {
-  return Be() ? e instanceof Node || e instanceof $(e).Node : !1;
+function Fe(e) {
+  return Ve() ? e instanceof Node || e instanceof M(e).Node : !1;
 }
-function I(e) {
-  return Be() ? e instanceof Element || e instanceof $(e).Element : !1;
+function W(e) {
+  return Ve() ? e instanceof Element || e instanceof M(e).Element : !1;
 }
 function H(e) {
-  return Be() ? e instanceof HTMLElement || e instanceof $(e).HTMLElement : !1;
+  return Ve() ? e instanceof HTMLElement || e instanceof M(e).HTMLElement : !1;
 }
-function Pe(e) {
-  return !Be() || typeof ShadowRoot > "u" ? !1 : e instanceof ShadowRoot || e instanceof $(e).ShadowRoot;
+function Ue(e) {
+  return !Ve() || typeof ShadowRoot > "u" ? !1 : e instanceof ShadowRoot || e instanceof M(e).ShadowRoot;
 }
-function ge(e) {
+const hr = /* @__PURE__ */ new Set(["inline", "contents"]);
+function xe(e) {
   const {
     overflow: t,
-    overflowX: o,
-    overflowY: n,
-    display: l
-  } = z(e);
-  return /auto|scroll|overlay|hidden|clip/.test(t + n + o) && !["inline", "contents"].includes(l);
+    overflowX: r,
+    overflowY: l,
+    display: s
+  } = N(e);
+  return /auto|scroll|overlay|hidden|clip/.test(t + l + r) && !hr.has(s);
 }
-function Wt(e) {
-  return ["table", "td", "th"].includes(te(e));
+const fr = /* @__PURE__ */ new Set(["table", "td", "th"]);
+function pr(e) {
+  return fr.has(re(e));
 }
+const br = [":popover-open", ":modal"];
 function Le(e) {
-  return [":popover-open", ":modal"].some((t) => {
+  return br.some((t) => {
     try {
       return e.matches(t);
     } catch {
@@ -836,32 +2287,34 @@ function Le(e) {
     }
   });
 }
-function Fe(e) {
-  const t = De(), o = I(e) ? z(e) : e;
-  return ["transform", "translate", "scale", "rotate", "perspective"].some((n) => o[n] ? o[n] !== "none" : !1) || (o.containerType ? o.containerType !== "normal" : !1) || !t && (o.backdropFilter ? o.backdropFilter !== "none" : !1) || !t && (o.filter ? o.filter !== "none" : !1) || ["transform", "translate", "scale", "rotate", "perspective", "filter"].some((n) => (o.willChange || "").includes(n)) || ["paint", "layout", "strict", "content"].some((n) => (o.contain || "").includes(n));
+const xr = ["transform", "translate", "scale", "rotate", "perspective"], mr = ["transform", "translate", "scale", "rotate", "perspective", "filter"], yr = ["paint", "layout", "strict", "content"];
+function Me(e) {
+  const t = Ge(), r = W(e) ? N(e) : e;
+  return xr.some((l) => r[l] ? r[l] !== "none" : !1) || (r.containerType ? r.containerType !== "normal" : !1) || !t && (r.backdropFilter ? r.backdropFilter !== "none" : !1) || !t && (r.filter ? r.filter !== "none" : !1) || mr.some((l) => (r.willChange || "").includes(l)) || yr.some((l) => (r.contain || "").includes(l));
 }
-function qt(e) {
-  let t = Y(e);
-  for (; H(t) && !se(t); ) {
-    if (Fe(t))
+function vr(e) {
+  let t = Q(e);
+  for (; H(t) && !ne(t); ) {
+    if (Me(t))
       return t;
     if (Le(t))
       return null;
-    t = Y(t);
+    t = Q(t);
   }
   return null;
 }
-function De() {
+function Ge() {
   return typeof CSS > "u" || !CSS.supports ? !1 : CSS.supports("-webkit-backdrop-filter", "none");
 }
-function se(e) {
-  return ["html", "body", "#document"].includes(te(e));
+const Cr = /* @__PURE__ */ new Set(["html", "body", "#document"]);
+function ne(e) {
+  return Cr.has(re(e));
 }
-function z(e) {
-  return $(e).getComputedStyle(e);
+function N(e) {
+  return M(e).getComputedStyle(e);
 }
-function Ae(e) {
-  return I(e) ? {
+function Ee(e) {
+  return W(e) ? {
     scrollLeft: e.scrollLeft,
     scrollTop: e.scrollTop
   } : {
@@ -869,522 +2322,525 @@ function Ae(e) {
     scrollTop: e.scrollY
   };
 }
-function Y(e) {
-  if (te(e) === "html")
+function Q(e) {
+  if (re(e) === "html")
     return e;
   const t = (
     // Step into the shadow DOM of the parent of a slotted node.
     e.assignedSlot || // DOM Element detected.
     e.parentNode || // ShadowRoot detected.
-    Pe(e) && e.host || // Fallback.
-    N(e)
+    Ue(e) && e.host || // Fallback.
+    X(e)
   );
-  return Pe(t) ? t.host : t;
+  return Ue(t) ? t.host : t;
 }
-function ot(e) {
-  const t = Y(e);
-  return se(t) ? e.ownerDocument ? e.ownerDocument.body : e.body : H(t) && ge(t) ? t : ot(t);
-}
-function he(e, t, o) {
-  var n;
-  t === void 0 && (t = []), o === void 0 && (o = !0);
-  const l = ot(e), i = l === ((n = e.ownerDocument) == null ? void 0 : n.body), r = $(l);
-  if (i) {
-    const a = Ve(r);
-    return t.concat(r, r.visualViewport || [], ge(l) ? l : [], a && o ? he(a) : []);
+function nt(e) {
+  const t = Q(e);
+  return ne(t) ? e.ownerDocument ? e.ownerDocument.body : e.body : H(t) && xe(t) ? t : nt(t);
+}
+function be(e, t, r) {
+  var l;
+  t === void 0 && (t = []), r === void 0 && (r = !0);
+  const s = nt(e), o = s === ((l = e.ownerDocument) == null ? void 0 : l.body), a = M(s);
+  if (o) {
+    const n = Ie(a);
+    return t.concat(a, a.visualViewport || [], xe(s) ? s : [], n && r ? be(n) : []);
   }
-  return t.concat(l, he(l, [], o));
+  return t.concat(s, be(s, [], r));
 }
-function Ve(e) {
+function Ie(e) {
   return e.parent && Object.getPrototypeOf(e.parent) ? e.frameElement : null;
 }
-function nt(e) {
-  const t = z(e);
-  let o = parseFloat(t.width) || 0, n = parseFloat(t.height) || 0;
-  const l = H(e), i = l ? e.offsetWidth : o, r = l ? e.offsetHeight : n, a = xe(o) !== i || xe(n) !== r;
-  return a && (o = i, n = r), {
-    width: o,
-    height: n,
-    $: a
+function ct(e) {
+  const t = N(e);
+  let r = parseFloat(t.width) || 0, l = parseFloat(t.height) || 0;
+  const s = H(e), o = s ? e.offsetWidth : r, a = s ? e.offsetHeight : l, n = we(r) !== o || we(l) !== a;
+  return n && (r = o, l = a), {
+    width: r,
+    height: l,
+    $: n
   };
 }
-function $e(e) {
-  return I(e) ? e : e.contextElement;
+function We(e) {
+  return W(e) ? e : e.contextElement;
 }
-function re(e) {
-  const t = $e(e);
+function ae(e) {
+  const t = We(e);
   if (!H(t))
     return P(1);
-  const o = t.getBoundingClientRect(), {
-    width: n,
-    height: l,
-    $: i
-  } = nt(t);
-  let r = (i ? xe(o.width) : o.width) / n, a = (i ? xe(o.height) : o.height) / l;
-  return (!r || !Number.isFinite(r)) && (r = 1), (!a || !Number.isFinite(a)) && (a = 1), {
-    x: r,
-    y: a
-  };
-}
-const Ut = /* @__PURE__ */ P(0);
-function lt(e) {
-  const t = $(e);
-  return !De() || !t.visualViewport ? Ut : {
+  const r = t.getBoundingClientRect(), {
+    width: l,
+    height: s,
+    $: o
+  } = ct(t);
+  let a = (o ? we(r.width) : r.width) / l, n = (o ? we(r.height) : r.height) / s;
+  return (!a || !Number.isFinite(a)) && (a = 1), (!n || !Number.isFinite(n)) && (n = 1), {
+    x: a,
+    y: n
+  };
+}
+const kr = /* @__PURE__ */ P(0);
+function dt(e) {
+  const t = M(e);
+  return !Ge() || !t.visualViewport ? kr : {
     x: t.visualViewport.offsetLeft,
     y: t.visualViewport.offsetTop
   };
 }
-function Xt(e, t, o) {
-  return t === void 0 && (t = !1), !o || t && o !== $(e) ? !1 : t;
-}
-function ee(e, t, o, n) {
-  t === void 0 && (t = !1), o === void 0 && (o = !1);
-  const l = e.getBoundingClientRect(), i = $e(e);
-  let r = P(1);
-  t && (n ? I(n) && (r = re(n)) : r = re(e));
-  const a = Xt(i, o, n) ? lt(i) : P(0);
-  let p = (l.left + a.x) / r.x, u = (l.top + a.y) / r.y, f = l.width / r.x, s = l.height / r.y;
-  if (i) {
-    const d = $(i), c = n && I(n) ? $(n) : n;
-    let g = d, b = Ve(g);
-    for (; b && n && c !== g; ) {
-      const y = re(b), m = b.getBoundingClientRect(), w = z(b), C = m.left + (b.clientLeft + parseFloat(w.paddingLeft)) * y.x, E = m.top + (b.clientTop + parseFloat(w.paddingTop)) * y.y;
-      p *= y.x, u *= y.y, f *= y.x, s *= y.y, p += C, u += E, g = $(b), b = Ve(g);
+function wr(e, t, r) {
+  return t === void 0 && (t = !1), !r || t && r !== M(e) ? !1 : t;
+}
+function te(e, t, r, l) {
+  t === void 0 && (t = !1), r === void 0 && (r = !1);
+  const s = e.getBoundingClientRect(), o = We(e);
+  let a = P(1);
+  t && (l ? W(l) && (a = ae(l)) : a = ae(e));
+  const n = wr(o, r, l) ? dt(o) : P(0);
+  let g = (s.left + n.x) / a.x, d = (s.top + n.y) / a.y, u = s.width / a.x, i = s.height / a.y;
+  if (o) {
+    const h = M(o), c = l && W(l) ? M(l) : l;
+    let f = h, m = Ie(f);
+    for (; m && l && c !== f; ) {
+      const y = ae(m), p = m.getBoundingClientRect(), v = N(m), T = p.left + (m.clientLeft + parseFloat(v.paddingLeft)) * y.x, O = p.top + (m.clientTop + parseFloat(v.paddingTop)) * y.y;
+      g *= y.x, d *= y.y, u *= y.x, i *= y.y, g += T, d += O, f = M(m), m = Ie(f);
     }
   }
-  return Ce({
-    width: f,
-    height: s,
-    x: p,
-    y: u
+  return Re({
+    width: u,
+    height: i,
+    x: g,
+    y: d
   });
 }
-function Ie(e, t) {
-  const o = Ae(e).scrollLeft;
-  return t ? t.left + o : ee(N(e)).left + o;
+function Se(e, t) {
+  const r = Ee(e).scrollLeft;
+  return t ? t.left + r : te(X(e)).left + r;
 }
-function rt(e, t, o) {
-  o === void 0 && (o = !1);
-  const n = e.getBoundingClientRect(), l = n.left + t.scrollLeft - (o ? 0 : (
-    // RTL <body> scrollbar.
-    Ie(e, n)
-  )), i = n.top + t.scrollTop;
+function ut(e, t) {
+  const r = e.getBoundingClientRect(), l = r.left + t.scrollLeft - Se(e, r), s = r.top + t.scrollTop;
   return {
     x: l,
-    y: i
+    y: s
   };
 }
-function Kt(e) {
+function Tr(e) {
   let {
     elements: t,
-    rect: o,
-    offsetParent: n,
-    strategy: l
+    rect: r,
+    offsetParent: l,
+    strategy: s
   } = e;
-  const i = l === "fixed", r = N(n), a = t ? Le(t.floating) : !1;
-  if (n === r || a && i)
-    return o;
-  let p = {
+  const o = s === "fixed", a = X(l), n = t ? Le(t.floating) : !1;
+  if (l === a || n && o)
+    return r;
+  let g = {
     scrollLeft: 0,
     scrollTop: 0
-  }, u = P(1);
-  const f = P(0), s = H(n);
-  if ((s || !s && !i) && ((te(n) !== "body" || ge(r)) && (p = Ae(n)), H(n))) {
-    const c = ee(n);
-    u = re(n), f.x = c.x + n.clientLeft, f.y = c.y + n.clientTop;
+  }, d = P(1);
+  const u = P(0), i = H(l);
+  if ((i || !i && !o) && ((re(l) !== "body" || xe(a)) && (g = Ee(l)), H(l))) {
+    const c = te(l);
+    d = ae(l), u.x = c.x + l.clientLeft, u.y = c.y + l.clientTop;
   }
-  const d = r && !s && !i ? rt(r, p, !0) : P(0);
+  const h = a && !i && !o ? ut(a, g) : P(0);
   return {
-    width: o.width * u.x,
-    height: o.height * u.y,
-    x: o.x * u.x - p.scrollLeft * u.x + f.x + d.x,
-    y: o.y * u.y - p.scrollTop * u.y + f.y + d.y
+    width: r.width * d.x,
+    height: r.height * d.y,
+    x: r.x * d.x - g.scrollLeft * d.x + u.x + h.x,
+    y: r.y * d.y - g.scrollTop * d.y + u.y + h.y
   };
 }
-function Yt(e) {
+function Rr(e) {
   return Array.from(e.getClientRects());
 }
-function Jt(e) {
-  const t = N(e), o = Ae(e), n = e.ownerDocument.body, l = J(t.scrollWidth, t.clientWidth, n.scrollWidth, n.clientWidth), i = J(t.scrollHeight, t.clientHeight, n.scrollHeight, n.clientHeight);
-  let r = -o.scrollLeft + Ie(e);
-  const a = -o.scrollTop;
-  return z(n).direction === "rtl" && (r += J(t.clientWidth, n.clientWidth) - l), {
-    width: l,
-    height: i,
-    x: r,
-    y: a
+function Or(e) {
+  const t = X(e), r = Ee(e), l = e.ownerDocument.body, s = Z(t.scrollWidth, t.clientWidth, l.scrollWidth, l.clientWidth), o = Z(t.scrollHeight, t.clientHeight, l.scrollHeight, l.clientHeight);
+  let a = -r.scrollLeft + Se(e);
+  const n = -r.scrollTop;
+  return N(l).direction === "rtl" && (a += Z(t.clientWidth, l.clientWidth) - s), {
+    width: s,
+    height: o,
+    x: a,
+    y: n
   };
 }
-function Qt(e, t) {
-  const o = $(e), n = N(e), l = o.visualViewport;
-  let i = n.clientWidth, r = n.clientHeight, a = 0, p = 0;
-  if (l) {
-    i = l.width, r = l.height;
-    const u = De();
-    (!u || u && t === "fixed") && (a = l.offsetLeft, p = l.offsetTop);
+const je = 25;
+function Br(e, t) {
+  const r = M(e), l = X(e), s = r.visualViewport;
+  let o = l.clientWidth, a = l.clientHeight, n = 0, g = 0;
+  if (s) {
+    o = s.width, a = s.height;
+    const u = Ge();
+    (!u || u && t === "fixed") && (n = s.offsetLeft, g = s.offsetTop);
   }
+  const d = Se(l);
+  if (d <= 0) {
+    const u = l.ownerDocument, i = u.body, h = getComputedStyle(i), c = u.compatMode === "CSS1Compat" && parseFloat(h.marginLeft) + parseFloat(h.marginRight) || 0, f = Math.abs(l.clientWidth - i.clientWidth - c);
+    f <= je && (o -= f);
+  } else d <= je && (o += d);
   return {
-    width: i,
-    height: r,
-    x: a,
-    y: p
+    width: o,
+    height: a,
+    x: n,
+    y: g
   };
 }
-function Zt(e, t) {
-  const o = ee(e, !0, t === "fixed"), n = o.top + e.clientTop, l = o.left + e.clientLeft, i = H(e) ? re(e) : P(1), r = e.clientWidth * i.x, a = e.clientHeight * i.y, p = l * i.x, u = n * i.y;
+const Vr = /* @__PURE__ */ new Set(["absolute", "fixed"]);
+function Lr(e, t) {
+  const r = te(e, !0, t === "fixed"), l = r.top + e.clientTop, s = r.left + e.clientLeft, o = H(e) ? ae(e) : P(1), a = e.clientWidth * o.x, n = e.clientHeight * o.y, g = s * o.x, d = l * o.y;
   return {
-    width: r,
-    height: a,
-    x: p,
-    y: u
+    width: a,
+    height: n,
+    x: g,
+    y: d
   };
 }
-function He(e, t, o) {
-  let n;
+function qe(e, t, r) {
+  let l;
   if (t === "viewport")
-    n = Qt(e, o);
+    l = Br(e, r);
   else if (t === "document")
-    n = Jt(N(e));
-  else if (I(t))
-    n = Zt(t, o);
+    l = Or(X(e));
+  else if (W(t))
+    l = Lr(t, r);
   else {
-    const l = lt(e);
-    n = {
-      x: t.x - l.x,
-      y: t.y - l.y,
+    const s = dt(e);
+    l = {
+      x: t.x - s.x,
+      y: t.y - s.y,
       width: t.width,
       height: t.height
     };
   }
-  return Ce(n);
-}
-function it(e, t) {
-  const o = Y(e);
-  return o === t || !I(o) || se(o) ? !1 : z(o).position === "fixed" || it(o, t);
-}
-function eo(e, t) {
-  const o = t.get(e);
-  if (o)
-    return o;
-  let n = he(e, [], !1).filter((a) => I(a) && te(a) !== "body"), l = null;
-  const i = z(e).position === "fixed";
-  let r = i ? Y(e) : e;
-  for (; I(r) && !se(r); ) {
-    const a = z(r), p = Fe(r);
-    !p && a.position === "fixed" && (l = null), (i ? !p && !l : !p && a.position === "static" && !!l && ["absolute", "fixed"].includes(l.position) || ge(r) && !p && it(e, r)) ? n = n.filter((f) => f !== r) : l = a, r = Y(r);
+  return Re(l);
+}
+function gt(e, t) {
+  const r = Q(e);
+  return r === t || !W(r) || ne(r) ? !1 : N(r).position === "fixed" || gt(r, t);
+}
+function Er(e, t) {
+  const r = t.get(e);
+  if (r)
+    return r;
+  let l = be(e, [], !1).filter((n) => W(n) && re(n) !== "body"), s = null;
+  const o = N(e).position === "fixed";
+  let a = o ? Q(e) : e;
+  for (; W(a) && !ne(a); ) {
+    const n = N(a), g = Me(a);
+    !g && n.position === "fixed" && (s = null), (o ? !g && !s : !g && n.position === "static" && !!s && Vr.has(s.position) || xe(a) && !g && gt(e, a)) ? l = l.filter((u) => u !== a) : s = n, a = Q(a);
   }
-  return t.set(e, n), n;
+  return t.set(e, l), l;
 }
-function to(e) {
+function Sr(e) {
   let {
     element: t,
-    boundary: o,
-    rootBoundary: n,
-    strategy: l
+    boundary: r,
+    rootBoundary: l,
+    strategy: s
   } = e;
-  const r = [...o === "clippingAncestors" ? Le(t) ? [] : eo(t, this._c) : [].concat(o), n], a = r[0], p = r.reduce((u, f) => {
-    const s = He(t, f, l);
-    return u.top = J(s.top, u.top), u.right = we(s.right, u.right), u.bottom = we(s.bottom, u.bottom), u.left = J(s.left, u.left), u;
-  }, He(t, a, l));
+  const a = [...r === "clippingAncestors" ? Le(t) ? [] : Er(t, this._c) : [].concat(r), l], n = a[0], g = a.reduce((d, u) => {
+    const i = qe(t, u, s);
+    return d.top = Z(i.top, d.top), d.right = ke(i.right, d.right), d.bottom = ke(i.bottom, d.bottom), d.left = Z(i.left, d.left), d;
+  }, qe(t, n, s));
   return {
-    width: p.right - p.left,
-    height: p.bottom - p.top,
-    x: p.left,
-    y: p.top
+    width: g.right - g.left,
+    height: g.bottom - g.top,
+    x: g.left,
+    y: g.top
   };
 }
-function oo(e) {
+function Ar(e) {
   const {
     width: t,
-    height: o
-  } = nt(e);
+    height: r
+  } = ct(e);
   return {
     width: t,
-    height: o
+    height: r
   };
 }
-function no(e, t, o) {
-  const n = H(t), l = N(t), i = o === "fixed", r = ee(e, !0, i, t);
-  let a = {
+function Dr(e, t, r) {
+  const l = H(t), s = X(t), o = r === "fixed", a = te(e, !0, o, t);
+  let n = {
     scrollLeft: 0,
     scrollTop: 0
   };
-  const p = P(0);
-  function u() {
-    p.x = Ie(l);
-  }
-  if (n || !n && !i)
-    if ((te(t) !== "body" || ge(l)) && (a = Ae(t)), n) {
-      const c = ee(t, !0, i, t);
-      p.x = c.x + t.clientLeft, p.y = c.y + t.clientTop;
-    } else l && u();
-  i && !n && l && u();
-  const f = l && !n && !i ? rt(l, a) : P(0), s = r.left + a.scrollLeft - p.x - f.x, d = r.top + a.scrollTop - p.y - f.y;
+  const g = P(0);
+  function d() {
+    g.x = Se(s);
+  }
+  if (l || !l && !o)
+    if ((re(t) !== "body" || xe(s)) && (n = Ee(t)), l) {
+      const c = te(t, !0, o, t);
+      g.x = c.x + t.clientLeft, g.y = c.y + t.clientTop;
+    } else s && d();
+  o && !l && s && d();
+  const u = s && !l && !o ? ut(s, n) : P(0), i = a.left + n.scrollLeft - g.x - u.x, h = a.top + n.scrollTop - g.y - u.y;
   return {
-    x: s,
-    y: d,
-    width: r.width,
-    height: r.height
+    x: i,
+    y: h,
+    width: a.width,
+    height: a.height
   };
 }
-function Ee(e) {
-  return z(e).position === "static";
+function Ae(e) {
+  return N(e).position === "static";
 }
-function Ne(e, t) {
-  if (!H(e) || z(e).position === "fixed")
+function _e(e, t) {
+  if (!H(e) || N(e).position === "fixed")
     return null;
   if (t)
     return t(e);
-  let o = e.offsetParent;
-  return N(e) === o && (o = o.ownerDocument.body), o;
+  let r = e.offsetParent;
+  return X(e) === r && (r = r.ownerDocument.body), r;
 }
-function st(e, t) {
-  const o = $(e);
+function ht(e, t) {
+  const r = M(e);
   if (Le(e))
-    return o;
+    return r;
   if (!H(e)) {
-    let l = Y(e);
-    for (; l && !se(l); ) {
-      if (I(l) && !Ee(l))
-        return l;
-      l = Y(l);
+    let s = Q(e);
+    for (; s && !ne(s); ) {
+      if (W(s) && !Ae(s))
+        return s;
+      s = Q(s);
     }
-    return o;
+    return r;
   }
-  let n = Ne(e, t);
-  for (; n && Wt(n) && Ee(n); )
-    n = Ne(n, t);
-  return n && se(n) && Ee(n) && !Fe(n) ? o : n || qt(e) || o;
+  let l = _e(e, t);
+  for (; l && pr(l) && Ae(l); )
+    l = _e(l, t);
+  return l && ne(l) && Ae(l) && !Me(l) ? r : l || vr(e) || r;
 }
-const lo = async function(e) {
-  const t = this.getOffsetParent || st, o = this.getDimensions, n = await o(e.floating);
+const Ir = async function(e) {
+  const t = this.getOffsetParent || ht, r = this.getDimensions, l = await r(e.floating);
   return {
-    reference: no(e.reference, await t(e.floating), e.strategy),
+    reference: Dr(e.reference, await t(e.floating), e.strategy),
     floating: {
       x: 0,
       y: 0,
-      width: n.width,
-      height: n.height
+      width: l.width,
+      height: l.height
     }
   };
 };
-function ro(e) {
-  return z(e).direction === "rtl";
-}
-const io = {
-  convertOffsetParentRelativeRectToViewportRelativeRect: Kt,
-  getDocumentElement: N,
-  getClippingRect: to,
-  getOffsetParent: st,
-  getElementRects: lo,
-  getClientRects: Yt,
-  getDimensions: oo,
-  getScale: re,
-  isElement: I,
-  isRTL: ro
+function Fr(e) {
+  return N(e).direction === "rtl";
+}
+const Mr = {
+  convertOffsetParentRelativeRectToViewportRelativeRect: Tr,
+  getDocumentElement: X,
+  getClippingRect: Sr,
+  getOffsetParent: ht,
+  getElementRects: Ir,
+  getClientRects: Rr,
+  getDimensions: Ar,
+  getScale: ae,
+  isElement: W,
+  isRTL: Fr
 };
-function at(e, t) {
+function ft(e, t) {
   return e.x === t.x && e.y === t.y && e.width === t.width && e.height === t.height;
 }
-function so(e, t) {
-  let o = null, n;
-  const l = N(e);
-  function i() {
-    var a;
-    clearTimeout(n), (a = o) == null || a.disconnect(), o = null;
-  }
-  function r(a, p) {
-    a === void 0 && (a = !1), p === void 0 && (p = 1), i();
-    const u = e.getBoundingClientRect(), {
-      left: f,
-      top: s,
-      width: d,
+function Gr(e, t) {
+  let r = null, l;
+  const s = X(e);
+  function o() {
+    var n;
+    clearTimeout(l), (n = r) == null || n.disconnect(), r = null;
+  }
+  function a(n, g) {
+    n === void 0 && (n = !1), g === void 0 && (g = 1), o();
+    const d = e.getBoundingClientRect(), {
+      left: u,
+      top: i,
+      width: h,
       height: c
-    } = u;
-    if (a || t(), !d || !c)
+    } = d;
+    if (n || t(), !h || !c)
       return;
-    const g = ye(s), b = ye(l.clientWidth - (f + d)), y = ye(l.clientHeight - (s + c)), m = ye(f), C = {
-      rootMargin: -g + "px " + -b + "px " + -y + "px " + -m + "px",
-      threshold: J(0, we(1, p)) || 1
+    const f = Ce(i), m = Ce(s.clientWidth - (u + h)), y = Ce(s.clientHeight - (i + c)), p = Ce(u), T = {
+      rootMargin: -f + "px " + -m + "px " + -y + "px " + -p + "px",
+      threshold: Z(0, ke(1, g)) || 1
     };
-    let E = !0;
-    function L(_) {
-      const O = _[0].intersectionRatio;
-      if (O !== p) {
-        if (!E)
-          return r();
-        O ? r(!1, O) : n = setTimeout(() => {
-          r(!1, 1e-7);
+    let O = !0;
+    function I(S) {
+      const R = S[0].intersectionRatio;
+      if (R !== g) {
+        if (!O)
+          return a();
+        R ? a(!1, R) : l = setTimeout(() => {
+          a(!1, 1e-7);
         }, 1e3);
       }
-      O === 1 && !at(u, e.getBoundingClientRect()) && r(), E = !1;
+      R === 1 && !ft(d, e.getBoundingClientRect()) && a(), O = !1;
     }
     try {
-      o = new IntersectionObserver(L, {
-        ...C,
+      r = new IntersectionObserver(I, {
+        ...T,
         // Handle <iframe>s
-        root: l.ownerDocument
+        root: s.ownerDocument
       });
     } catch {
-      o = new IntersectionObserver(L, C);
+      r = new IntersectionObserver(I, T);
     }
-    o.observe(e);
+    r.observe(e);
   }
-  return r(!0), i;
+  return a(!0), o;
 }
-function ao(e, t, o, n) {
-  n === void 0 && (n = {});
+function Wr(e, t, r, l) {
+  l === void 0 && (l = {});
   const {
-    ancestorScroll: l = !0,
-    ancestorResize: i = !0,
-    elementResize: r = typeof ResizeObserver == "function",
-    layoutShift: a = typeof IntersectionObserver == "function",
-    animationFrame: p = !1
-  } = n, u = $e(e), f = l || i ? [...u ? he(u) : [], ...he(t)] : [];
-  f.forEach((m) => {
-    l && m.addEventListener("scroll", o, {
+    ancestorScroll: s = !0,
+    ancestorResize: o = !0,
+    elementResize: a = typeof ResizeObserver == "function",
+    layoutShift: n = typeof IntersectionObserver == "function",
+    animationFrame: g = !1
+  } = l, d = We(e), u = s || o ? [...d ? be(d) : [], ...be(t)] : [];
+  u.forEach((p) => {
+    s && p.addEventListener("scroll", r, {
       passive: !0
-    }), i && m.addEventListener("resize", o);
+    }), o && p.addEventListener("resize", r);
   });
-  const s = u && a ? so(u, o) : null;
-  let d = -1, c = null;
-  r && (c = new ResizeObserver((m) => {
-    let [w] = m;
-    w && w.target === u && c && (c.unobserve(t), cancelAnimationFrame(d), d = requestAnimationFrame(() => {
-      var C;
-      (C = c) == null || C.observe(t);
-    })), o();
-  }), u && !p && c.observe(u), c.observe(t));
-  let g, b = p ? ee(e) : null;
-  p && y();
+  const i = d && n ? Gr(d, r) : null;
+  let h = -1, c = null;
+  a && (c = new ResizeObserver((p) => {
+    let [v] = p;
+    v && v.target === d && c && (c.unobserve(t), cancelAnimationFrame(h), h = requestAnimationFrame(() => {
+      var T;
+      (T = c) == null || T.observe(t);
+    })), r();
+  }), d && !g && c.observe(d), c.observe(t));
+  let f, m = g ? te(e) : null;
+  g && y();
   function y() {
-    const m = ee(e);
-    b && !at(b, m) && o(), b = m, g = requestAnimationFrame(y);
+    const p = te(e);
+    m && !ft(m, p) && r(), m = p, f = requestAnimationFrame(y);
   }
-  return o(), () => {
-    var m;
-    f.forEach((w) => {
-      l && w.removeEventListener("scroll", o), i && w.removeEventListener("resize", o);
-    }), s == null || s(), (m = c) == null || m.disconnect(), c = null, p && cancelAnimationFrame(g);
-  };
-}
-const co = Gt, uo = jt, fo = Ht, po = (e, t, o) => {
-  const n = /* @__PURE__ */ new Map(), l = {
-    platform: io,
-    ...o
-  }, i = {
-    ...l.platform,
-    _c: n
-  };
-  return Pt(e, t, {
-    ...l,
-    platform: i
+  return r(), () => {
+    var p;
+    u.forEach((v) => {
+      s && v.removeEventListener("scroll", r), o && v.removeEventListener("resize", r);
+    }), i?.(), (p = c) == null || p.disconnect(), c = null, g && cancelAnimationFrame(f);
+  };
+}
+const Nr = ur, Pr = gr, Hr = nr, zr = (e, t, r) => {
+  const l = /* @__PURE__ */ new Map(), s = {
+    platform: Mr,
+    ...r
+  }, o = {
+    ...s.platform,
+    _c: l
+  };
+  return ir(e, t, {
+    ...s,
+    platform: o
   });
 };
-function ho(e) {
+function Xr(e) {
   return e != null && typeof e == "object" && "$el" in e;
 }
-function Ge(e) {
-  if (ho(e)) {
+function Ke(e) {
+  if (Xr(e)) {
     const t = e.$el;
-    return Me(t) && te(t) === "#comment" ? null : t;
+    return Fe(t) && re(t) === "#comment" ? null : t;
   }
   return e;
 }
-function ue(e) {
-  return typeof e == "function" ? e() : W(e);
+function ge(e) {
+  return typeof e == "function" ? e() : U(e);
 }
-function ct(e) {
+function pt(e) {
   return typeof window > "u" ? 1 : (e.ownerDocument.defaultView || window).devicePixelRatio || 1;
 }
-function je(e, t) {
-  const o = ct(e);
-  return Math.round(t * o) / o;
-}
-function go(e, t, o) {
-  o === void 0 && (o = {});
-  const n = o.whileElementsMounted, l = R(() => {
-    var O;
-    return (O = ue(o.open)) != null ? O : !0;
-  }), i = R(() => ue(o.middleware)), r = R(() => {
-    var O;
-    return (O = ue(o.placement)) != null ? O : "bottom";
-  }), a = R(() => {
-    var O;
-    return (O = ue(o.strategy)) != null ? O : "absolute";
-  }), p = R(() => {
-    var O;
-    return (O = ue(o.transform)) != null ? O : !0;
-  }), u = R(() => Ge(e.value)), f = R(() => Ge(t.value)), s = M(0), d = M(0), c = M(a.value), g = M(r.value), b = ft({}), y = M(!1), m = R(() => {
-    const O = {
+function Je(e, t) {
+  const r = pt(e);
+  return Math.round(t * r) / r;
+}
+function $r(e, t, r) {
+  r === void 0 && (r = {});
+  const l = r.whileElementsMounted, s = w(() => {
+    var R;
+    return (R = ge(r.open)) != null ? R : !0;
+  }), o = w(() => ge(r.middleware)), a = w(() => {
+    var R;
+    return (R = ge(r.placement)) != null ? R : "bottom";
+  }), n = w(() => {
+    var R;
+    return (R = ge(r.strategy)) != null ? R : "absolute";
+  }), g = w(() => {
+    var R;
+    return (R = ge(r.transform)) != null ? R : !0;
+  }), d = w(() => Ke(e.value)), u = w(() => Ke(t.value)), i = E(0), h = E(0), c = E(n.value), f = E(a.value), m = vt({}), y = E(!1), p = w(() => {
+    const R = {
       position: c.value,
       left: "0",
       top: "0"
     };
-    if (!f.value)
-      return O;
-    const D = je(f.value, s.value), G = je(f.value, d.value);
-    return p.value ? {
-      ...O,
-      transform: "translate(" + D + "px, " + G + "px)",
-      ...ct(f.value) >= 1.5 && {
+    if (!u.value)
+      return R;
+    const F = Je(u.value, i.value), $ = Je(u.value, h.value);
+    return g.value ? {
+      ...R,
+      transform: "translate(" + F + "px, " + $ + "px)",
+      ...pt(u.value) >= 1.5 && {
         willChange: "transform"
       }
     } : {
       position: c.value,
-      left: D + "px",
-      top: G + "px"
+      left: F + "px",
+      top: $ + "px"
     };
   });
-  let w;
-  function C() {
-    if (u.value == null || f.value == null)
+  let v;
+  function T() {
+    if (d.value == null || u.value == null)
       return;
-    const O = l.value;
-    po(u.value, f.value, {
-      middleware: i.value,
-      placement: r.value,
-      strategy: a.value
-    }).then((D) => {
-      s.value = D.x, d.value = D.y, c.value = D.strategy, g.value = D.placement, b.value = D.middlewareData, y.value = O !== !1;
+    const R = s.value;
+    zr(d.value, u.value, {
+      middleware: o.value,
+      placement: a.value,
+      strategy: n.value
+    }).then((F) => {
+      i.value = F.x, h.value = F.y, c.value = F.strategy, f.value = F.placement, m.value = F.middlewareData, y.value = R !== !1;
     });
   }
-  function E() {
-    typeof w == "function" && (w(), w = void 0);
+  function O() {
+    typeof v == "function" && (v(), v = void 0);
   }
-  function L() {
-    if (E(), n === void 0) {
-      C();
+  function I() {
+    if (O(), l === void 0) {
+      T();
       return;
     }
-    if (u.value != null && f.value != null) {
-      w = n(u.value, f.value, C);
+    if (d.value != null && u.value != null) {
+      v = l(d.value, u.value, T);
       return;
     }
   }
-  function _() {
-    l.value || (y.value = !1);
+  function S() {
+    s.value || (y.value = !1);
   }
-  return le([i, r, a, l], C, {
+  return oe([o, a, n, s], T, {
     flush: "sync"
-  }), le([u, f], L, {
+  }), oe([d, u], I, {
     flush: "sync"
-  }), le(l, _, {
+  }), oe(s, S, {
     flush: "sync"
-  }), pt() && ht(E), {
-    x: ne(s),
-    y: ne(d),
-    strategy: ne(c),
-    placement: ne(g),
-    middlewareData: ne(b),
-    isPositioned: ne(y),
-    floatingStyles: m,
-    update: C
-  };
-}
-const mo = ["id", "placeholder", "aria-expanded"], vo = ["onClick", "onMouseenter"], bo = /* @__PURE__ */ q({
+  }), Ct() && kt(O), {
+    x: se(i),
+    y: se(h),
+    strategy: se(c),
+    placement: se(f),
+    middlewareData: se(m),
+    isPositioned: se(y),
+    floatingStyles: p,
+    update: T
+  };
+}
+const Yr = ["id", "placeholder", "aria-expanded"], Ur = ["onClick", "onMouseenter"], jr = /* @__PURE__ */ z({
   __name: "MclSelect",
-  props: /* @__PURE__ */ K({
+  props: /* @__PURE__ */ J({
     id: {},
     displayBorder: { type: Boolean, default: !1 },
     borderColor: { default: "light-4" },
@@ -1404,195 +2860,193 @@ const mo = ["id", "placeholder", "aria-expanded"], vo = ["onClick", "onMouseente
     modelValue: { default: null },
     modelModifiers: {}
   }),
-  emits: /* @__PURE__ */ K(["open", "close", "clear", "changed", "select"], ["update:modelValue"]),
+  emits: /* @__PURE__ */ J(["open", "close", "clear", "changed", "select"], ["update:modelValue"]),
   setup(e, { emit: t }) {
-    const o = e;
-    We();
-    const n = t, l = ae(e, "modelValue"), i = M(), r = M(), a = M(), p = M(
+    const r = e;
+    Qe();
+    const l = t, s = ce(e, "modelValue"), o = E(), a = E(), n = E(), g = E(
       []
-    ), u = M(null), f = M(), s = M(!1), d = M(""), c = M(0), g = () => {
-      s.value = !0;
-    }, b = () => {
-      var h;
-      d.value = "", s.value = !1, u.value = null, (h = r.value) == null || h.blur(), l.value = "";
-    }, y = () => {
-      s.value = !1, c.value = 0;
+    ), d = E(null), u = E(), i = E(!1), h = E(""), c = E(0), f = () => {
+      i.value = !0;
     }, m = () => {
-      var h;
-      s.value = !s.value, c.value = 0, s.value === !0 && ((h = r.value) == null || h.focus());
-    }, w = (h) => {
-      h.preventDefault(), d.value !== "" && (d.value = ""), c.value = 0, l.value = "", n("clear");
-    }, C = (h, v) => {
-      p.value[v] = h;
-    }, E = (h) => {
-      h.style.pointerEvents = "none";
-    }, L = (h) => {
-      h.style.pointerEvents = "auto";
-    }, _ = (h) => {
-      c.value = h;
-    }, O = (h, v) => {
-      h.preventDefault(), d.value = typeof v == "string" ? v : v.text;
-      const k = typeof v == "string" ? v : v.value;
-      l.value = k, s.value = !1, n("select", k);
-    }, D = R(() => {
+      h.value = "", i.value = !1, d.value = null, a.value?.blur(), s.value = "";
+    }, y = () => {
+      i.value = !1, c.value = 0;
+    }, p = () => {
+      i.value = !i.value, c.value = 0, i.value === !0 && a.value?.focus();
+    }, v = (x) => {
+      x.preventDefault(), h.value !== "" && (h.value = ""), c.value = 0, s.value = "", l("clear");
+    }, T = (x, b) => {
+      g.value[b] = x;
+    }, O = (x) => {
+      x.style.pointerEvents = "none";
+    }, I = (x) => {
+      x.style.pointerEvents = "auto";
+    }, S = (x) => {
+      c.value = x;
+    }, R = (x, b) => {
+      x.preventDefault(), h.value = typeof b == "string" ? b : b.text;
+      const k = typeof b == "string" ? b : b.value;
+      s.value = k, i.value = !1, l("select", k);
+    }, F = w(() => {
       const {
-        bgColor: h,
-        displayBorder: v,
+        bgColor: x,
+        displayBorder: b,
         borderColor: k,
-        displayHighlight: T,
-        displayShadow: V,
-        rounded: Se,
-        textcolor: ut
-      } = o, oe = [
-        x("BGCOLOR", h),
-        x("TEXTCOLOR", ut)
+        displayHighlight: D,
+        displayShadow: G,
+        rounded: bt,
+        textcolor: xt
+      } = r, le = [
+        C("BGCOLOR", x),
+        C("TEXTCOLOR", xt)
       ];
-      return v && (oe.push("border-2"), oe.push(x("BORDER", k))), T || oe.push("ring-offset-2 transition-all duration-300 ease-linear"), V && oe.push("shadow-md"), Se && oe.push("rounded-md"), oe.join(" ");
-    }), G = R(() => {
-      const { highlightColor: h, rounded: v } = o, k = [x("BEFOREBG", h)];
-      return v && k.push("rounded-b-md"), k.join(" ");
-    }), U = R(() => {
-      const { displayHighlight: h, bgColor: v, borderColor: k, rounded: T } = o, V = [
-        x("BGCOLOR", v),
-        x("BORDER", k)
+      return b && (le.push("border-2"), le.push(C("BORDER", k))), D || le.push("ring-offset-2 transition-all duration-300 ease-linear"), G && le.push("shadow-md"), bt && le.push("rounded-md"), le.join(" ");
+    }), $ = w(() => {
+      const { highlightColor: x, rounded: b } = r, k = [C("BEFOREBG", x)];
+      return b && k.push("rounded-b-md"), k.join(" ");
+    }), j = w(() => {
+      const { displayHighlight: x, bgColor: b, borderColor: k, rounded: D } = r, G = [
+        C("BGCOLOR", b),
+        C("BORDER", k)
       ];
-      return h || V.push("mt-2xs"), T && V.push("rounded-md"), V.join(" ");
-    }), X = R(() => d.value === "" ? o.options : o.options.filter((v) => {
-      const k = new RegExp(`${d.value}`, "gi");
-      return typeof v == "string" ? v.match(k) : v.text.match(k);
-    })), ce = (h) => {
-      s.value && (h === "up" && c.value > 0 && c.value--, h === "down" && c.value < X.value.length - 1 && c.value++);
+      return x || G.push("mt-2xs"), D && G.push("rounded-md"), G.join(" ");
+    }), q = w(() => h.value === "" ? r.options : r.options.filter((b) => {
+      const k = new RegExp(`${h.value}`, "gi");
+      return typeof b == "string" ? b.match(k) : b.text.match(k);
+    })), de = (x) => {
+      i.value && (x === "up" && c.value > 0 && c.value--, x === "down" && c.value < q.value.length - 1 && c.value++);
     }, me = () => {
-      if (!s.value) return;
-      const h = X.value[c.value];
-      let v;
-      typeof h == "string" ? (d.value = h, v = h) : (d.value = h.text, v = h.value), l.value = v, s.value = !1, n("select", v);
-    }, ve = R(() => ({ width: `${f.value}px` })), { floatingStyles: j } = go(i, a, {
-      whileElementsMounted: ao,
+      if (!i.value) return;
+      const x = q.value[c.value];
+      let b;
+      typeof x == "string" ? (h.value = x, b = x) : (h.value = x.text, b = x.value), s.value = b, i.value = !1, l("select", b);
+    }, Y = w(() => ({ width: `${u.value}px` })), { floatingStyles: ue } = $r(o, n, {
+      whileElementsMounted: Wr,
       strategy: "absolute",
-      open: s,
+      open: i,
       transform: !1,
       placement: "bottom",
-      middleware: [fo(), co(-2.2), uo()]
+      middleware: [Hr(), Nr(-2.2), Pr()]
     });
-    return xt(i, () => {
-      i.value && (f.value = i.value.clientWidth);
-    }), le(s, (h) => {
-      n(h === !0 ? "open" : "close");
-    }), le(l, (h) => {
-      if (h === null) {
-        s.value = !1, u.value = null;
+    return Vt(o, () => {
+      o.value && (u.value = o.value.clientWidth);
+    }), oe(i, (x) => {
+      l(x === !0 ? "open" : "close");
+    }), oe(s, (x) => {
+      if (x === null) {
+        i.value = !1, d.value = null;
         return;
       }
-      n("changed", h);
-    }), le(c, () => {
-      u.value = p.value[c.value], u.value && u.value.scrollIntoView && u.value.scrollIntoView({ block: "nearest" });
-    }), (h, v) => ie((S(), F("div", {
+      l("changed", x);
+    }), oe(c, () => {
+      d.value = g.value[c.value], d.value && d.value.scrollIntoView && d.value.scrollIntoView({ block: "nearest" });
+    }), (x, b) => ie((L(), A("div", {
       onKeyup: [
-        be(b, ["esc"]),
-        v[1] || (v[1] = be((k) => ce("down"), ["down"])),
-        v[2] || (v[2] = be((k) => ce("up"), ["up"])),
-        be(me, ["enter"])
+        ye(m, ["esc"]),
+        b[1] || (b[1] = ye((k) => de("down"), ["down"])),
+        b[2] || (b[2] = ye((k) => de("up"), ["up"])),
+        ye(me, ["enter"])
       ],
       ref_key: "componentRef",
-      ref: i,
+      ref: o,
       class: "relative"
     }, [
       B("div", {
-        class: A(["p-2xs flex relative gap-3xs", [
-          !h.displayHighlight && s.value && W(x)("RINGCOLOR", h.borderColor) + " ring-4",
-          D.value
+        class: V(["p-2xs gap-3xs relative flex", [
+          !e.displayHighlight && i.value && U(C)("RINGCOLOR", e.borderColor) + " ring-4",
+          F.value
         ]])
       }, [
         ie(B("input", {
-          id: h.id,
+          id: e.id,
           type: "text",
           class: "w-full bg-transparent outline-none",
-          "onUpdate:modelValue": v[0] || (v[0] = (k) => d.value = k),
+          "onUpdate:modelValue": b[0] || (b[0] = (k) => h.value = k),
           ref_key: "inputBox",
-          ref: r,
+          ref: a,
           role: "combobox",
           autocomplete: "off",
-          placeholder: h.placeholder,
+          placeholder: e.placeholder,
           "aria-autocomplete": "list",
-          "aria-expanded": s.value,
-          onFocus: g
-        }, null, 40, mo), [
-          [Ke, d.value]
+          "aria-expanded": i.value,
+          onFocus: f
+        }, null, 40, Yr), [
+          [rt, h.value]
         ]),
         B("div", {
-          class: A(["flex items-center px-3xs", [
-            d.value === "" ? "hidden cursor-text" : "block cursor-pointer"
+          class: V(["px-3xs flex items-center", [
+            h.value === "" ? "hidden cursor-text" : "block cursor-pointer"
           ]]),
-          onClick: w
+          onClick: v
         }, [
-          (S(), F("svg", {
+          (L(), A("svg", {
             xmlns: "http://www.w3.org/2000/svg",
             viewBox: "0 0 384 512",
-            class: A(["h-xs opacity-70", [W(x)("SVGFILL", h.iconColor)]])
-          }, v[3] || (v[3] = [
+            class: V(["h-xs opacity-70", [U(C)("SVGFILL", e.iconColor)]])
+          }, [...b[3] || (b[3] = [
             B("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))
         ], 2),
         B("div", {
-          class: "flex items-center px-3xs",
-          onClick: m
+          class: "px-3xs flex items-center",
+          onClick: p
         }, [
-          (S(), F("svg", {
+          (L(), A("svg", {
             xmlns: "http://www.w3.org/2000/svg",
             viewBox: "0 0 320 512",
-            class: A(["h-xs", [
-              s.value ? "rotate-180" : "rotate-0",
+            class: V(["h-xs", [
+              i.value ? "rotate-180" : "rotate-0",
               "transition-transform duration-300 ease-in",
-              W(x)("SVGFILL", h.iconColor)
+              U(C)("SVGFILL", e.iconColor)
             ]])
-          }, v[4] || (v[4] = [
+          }, [...b[4] || (b[4] = [
             B("path", { d: "M137.4 374.6c12.5 12.5 32.8 12.5 45.3 0l128-128c9.2-9.2 11.9-22.9 6.9-34.9s-16.6-19.8-29.6-19.8L32 192c-12.9 0-24.6 7.8-29.6 19.8s-2.2 25.7 6.9 34.9l128 128z" }, null, -1)
-          ]), 2))
+          ])], 2))
         ])
       ], 2),
-      h.displayHighlight ? (S(), F("div", {
+      e.displayHighlight ? (L(), A("div", {
         key: 0,
-        class: A(["relative h-3xs overflow-hidden before:absolute before:bottom-0 before:left-0 before:h-full before:w-0 before:transition-[width] before:duration-300 before:ease-linear -top-1", [s.value ? "before:w-full" : "before:w-0", G.value]])
+        class: V(["h-3xs relative -top-1 overflow-hidden before:absolute before:bottom-0 before:left-0 before:h-full before:w-0 before:transition-[width] before:duration-300 before:ease-linear", [i.value ? "before:w-full" : "before:w-0", $.value]])
       }, null, 2)) : pe("", !0),
-      gt(mt, {
+      wt(Tt, {
         name: "options",
-        onBeforeLeave: E,
-        onEnter: L
+        onBeforeLeave: O,
+        onEnter: I
       }, {
-        default: vt(() => [
-          s.value ? (S(), F("ul", {
+        default: Rt(() => [
+          i.value ? (L(), A("ul", {
             key: 0,
-            class: A([[U.value], "max-h-[200px] overflow-y-auto border-2"]),
-            style: qe({ ...ve.value, ...W(j) }),
+            class: V([[j.value], "max-h-50 overflow-y-auto border-2"]),
+            style: Ze({ ...Y.value, ...U(ue) }),
             role: "listbox",
             ref_key: "dropdownRef",
-            ref: a
+            ref: n
           }, [
-            X.value.length > 0 ? de(h.$slots, "dropdown", {
+            q.value.length > 0 ? he(x.$slots, "dropdown", {
               key: 0,
-              optionClick: O,
-              options: X.value,
+              optionClick: R,
+              options: q.value,
               activeIndex: c.value,
-              setRef: C,
-              hover: _
+              setRef: T,
+              hover: S
             }, () => [
-              (S(!0), F(bt, null, yt(X.value, (k, T) => (S(), F("li", {
-                key: T,
-                class: A(["p-2xs cursor-pointer", [
-                  c.value === T && W(x)("BGCOLOR", h.highlightColor)
+              (L(!0), A(Ot, null, Bt(q.value, (k, D) => (L(), A("li", {
+                key: D,
+                class: V(["p-2xs cursor-pointer", [
+                  c.value === D && U(C)("BGCOLOR", e.highlightColor)
                 ]]),
                 role: "option",
                 ref_for: !0,
-                ref: (V) => C(V, T),
-                onClick: (V) => O(V, k),
-                onMouseenter: (V) => _(T)
-              }, fe(typeof k == "string" ? k : k.text), 43, vo))), 128))
-            ], !0) : de(h.$slots, "no-match", { key: 1 }, () => [
+                ref: (G) => T(G, D),
+                onClick: (G) => R(G, k),
+                onMouseenter: (G) => S(D)
+              }, fe(typeof k == "string" ? k : k.text), 43, Ur))), 128))
+            ], !0) : he(x.$slots, "no-match", { key: 1 }, () => [
               B("li", {
-                class: A(["p-2xs cursor-pointer", [W(x)("HVBGCOLOR", h.selectColor)]])
+                class: V(["p-2xs cursor-pointer", [U(C)("HVBGCOLOR", e.selectColor)]])
               }, [
-                B("span", null, fe(h.invalidFeedback), 1)
+                B("span", null, fe(e.invalidFeedback), 1)
               ], 2)
             ], !0)
           ], 6)) : pe("", !0)
@@ -1600,12 +3054,12 @@ const mo = ["id", "placeholder", "aria-expanded"], vo = ["onClick", "onMouseente
         _: 3
       })
     ], 32)), [
-      [W(wt), y]
+      [U(qt), y]
     ]);
   }
-}), Eo = /* @__PURE__ */ Ye(bo, [["__scopeId", "data-v-f80afd47"]]), yo = ["id", "placeholder", "required", "rows"], To = /* @__PURE__ */ q({
+}), il = /* @__PURE__ */ lt(jr, [["__scopeId", "data-v-ce479436"]]), qr = ["id", "placeholder", "required", "rows"], nl = /* @__PURE__ */ z({
   __name: "MclTextArea",
-  props: /* @__PURE__ */ K({
+  props: /* @__PURE__ */ J({
     id: {},
     displayBorder: { type: Boolean, default: !1 },
     borderColor: { default: "light-4" },
@@ -1624,45 +3078,45 @@ const mo = ["id", "placeholder", "aria-expanded"], vo = ["onClick", "onMouseente
   }),
   emits: ["update:modelValue"],
   setup(e) {
-    const t = e, o = ae(e, "modelValue"), n = R(() => {
+    const t = e, r = ce(e, "modelValue"), l = w(() => {
       const {
-        bgColor: l,
-        displayBorder: i,
-        borderColor: r,
-        displayHighlight: a,
-        displayShadow: p,
-        rounded: u,
-        textcolor: f
-      } = t, s = [
-        x("BGCOLOR", l),
-        x("TEXTCOLOR", f)
+        bgColor: s,
+        displayBorder: o,
+        borderColor: a,
+        displayHighlight: n,
+        displayShadow: g,
+        rounded: d,
+        textcolor: u
+      } = t, i = [
+        C("BGCOLOR", s),
+        C("TEXTCOLOR", u)
       ];
-      return i && (s.push("border-2"), s.push(x("BORDER", r))), a || (s.push(
+      return o && (i.push("border-2"), i.push(C("BORDER", a))), n || (i.push(
         "focus:ring-4 ring-offset-2 transition-all duration-300 ease-linear"
-      ), s.push(x("FOCUSRING", r))), p && s.push("shadow-md"), u && s.push("rounded-md"), s.join(" ");
+      ), i.push(C("FOCUSRING", a))), g && i.push("shadow-md"), d && i.push("rounded-md"), i.join(" ");
     });
-    return (l, i) => (S(), F("div", null, [
+    return (s, o) => (L(), A("div", null, [
       ie(B("textarea", {
-        id: l.id,
-        class: A(["w-full p-2xs outline-none input__text peer", n.value]),
-        "onUpdate:modelValue": i[0] || (i[0] = (r) => o.value = r),
-        placeholder: l.placeholder,
-        required: l.required,
-        rows: l.rows
-      }, null, 10, yo), [
-        [Ke, o.value]
+        id: e.id,
+        class: V(["w-full p-2xs outline-none input__text peer", l.value]),
+        "onUpdate:modelValue": o[0] || (o[0] = (a) => r.value = a),
+        placeholder: e.placeholder,
+        required: e.required,
+        rows: e.rows
+      }, null, 10, qr), [
+        [rt, r.value]
       ]),
-      l.displayHighlight ? (S(), Xe(Je, {
+      e.displayHighlight ? (L(), tt(st, {
         key: 0,
-        color: l.highlightColor,
-        rounded: l.rounded,
+        color: e.highlightColor,
+        rounded: e.rounded,
         offset: 2.5
       }, null, 8, ["color", "rounded"])) : pe("", !0)
     ]));
   }
-}), wo = { class: "relative" }, xo = ["id", "value", "checked"], Vo = /* @__PURE__ */ q({
+}), _r = { class: "relative" }, Kr = ["id", "value", "checked"], cl = /* @__PURE__ */ z({
   __name: "MclCheckbox",
-  props: /* @__PURE__ */ K({
+  props: /* @__PURE__ */ J({
     id: {},
     inputSize: { default: "md" },
     bgColor: { default: "light-1" },
@@ -1677,9 +3131,9 @@ const mo = ["id", "placeholder", "aria-expanded"], vo = ["onClick", "onMouseente
     modelValue: { type: Boolean },
     modelModifiers: {}
   }),
-  emits: /* @__PURE__ */ K(["checkbox-click"], ["update:modelValue"]),
+  emits: /* @__PURE__ */ J(["checkbox-click"], ["update:modelValue"]),
   setup(e, { emit: t }) {
-    const o = {
+    const r = {
       primary: "peer-checked/input:bg-primary",
       secondary: "peer-checked/input:bg-secondary",
       success: "peer-checked/input:bg-success",
@@ -1697,7 +3151,7 @@ const mo = ["id", "placeholder", "aria-expanded"], vo = ["onClick", "onMouseente
       transparent: "peer-checked/input:bg-transparent",
       black: "peer-checked/input:bg-black",
       white: "peer-checked/input:bg-white"
-    }, n = {
+    }, l = {
       primary: "before:bg-primary",
       secondary: "before:bg-secondary",
       success: "before:bg-success",
@@ -1715,65 +3169,63 @@ const mo = ["id", "placeholder", "aria-expanded"], vo = ["onClick", "onMouseente
       transparent: "before:bg-transparent",
       black: "before:bg-black",
       white: "before:bg-white"
-    }, l = e, i = ae(e, "modelValue"), r = M(), a = t, p = () => {
-      var d;
-      (d = r.value) == null || d.click();
-    }, u = (d) => {
-      var g;
-      const c = d.target.value;
-      a(
+    }, s = e, o = ce(e, "modelValue"), a = E(), n = t, g = () => {
+      a.value?.click();
+    }, d = (h) => {
+      const c = h.target.value;
+      n(
         "checkbox-click",
-        d,
-        r.value.checked,
-        (g = r.value) != null && g.checked ? c : ""
+        h,
+        a.value.checked,
+        a.value?.checked ? c : ""
       );
-    }, f = R(() => {
-      const { inputSize: d } = l;
-      return d === "sm" ? "h-xs w-xs before:h-2xs before:w-2xs" : d === "lg" ? "h-md w-md before:h-xs before:w-xs" : "h-sm w-sm before:w-[12px] before:h-[12px]";
-    }), s = R(() => {
+    }, u = w(() => {
+      const { inputSize: h } = s;
+      return h === "sm" ? "h-xs w-xs before:h-2xs before:w-2xs" : h === "lg" ? "h-md w-md before:h-xs before:w-xs" : "h-sm w-sm before:w-[12px] before:h-[12px]";
+    }), i = w(() => {
       const {
-        bgColor: d,
+        bgColor: h,
         borderColor: c,
-        displayShadow: g,
-        rounded: b,
+        displayShadow: f,
+        rounded: m,
         checkedBgColor: y,
-        checkColor: m
-      } = l, w = [
-        x("BGCOLOR", d),
-        x("BORDER", c),
-        n[m],
-        o[y]
+        checkColor: p
+      } = s, v = [
+        C("BGCOLOR", h),
+        C("BORDER", c),
+        l[p],
+        r[y]
       ];
-      return g && w.push("drop-shadow-md"), b && w.push("rounded-md before:rounded-[3px]"), w.join(" ");
+      return f && v.push("drop-shadow-md"), m && v.push("rounded-md before:rounded-[3px]"), v.join(" ");
     });
-    return (d, c) => (S(), F("div", wo, [
+    return (h, c) => (L(), A("div", _r, [
       ie(B("input", {
-        id: d.id,
+        id: e.id,
         ref_key: "checkboxRef",
-        ref: r,
+        ref: a,
         type: "checkbox",
-        value: d.value,
-        checked: d.checked,
-        "onUpdate:modelValue": c[0] || (c[0] = (g) => i.value = g),
+        value: e.value,
+        checked: e.checked,
+        "onUpdate:modelValue": c[0] || (c[0] = (f) => o.value = f),
         class: "appearance-none peer/input",
-        onChange: u
-      }, null, 40, xo), [
-        [Ue, i.value]
+        onChange: d
+      }, null, 40, Kr), [
+        [et, o.value]
       ]),
       B("span", {
-        class: A(["relative border inline-block p-3xs hover:bg-opacity-60 peer-checked/input:hover:bg-opacity-60 before:opacity-0 peer-checked/input:before:opacity-100 before:absolute before:top-1/2 before:-translate-y-1/2 before:left-1/2 before:-translate-x-1/2 transition-colors duration-200 ease-linear before:transition-opacity before:duration-200 before:ease-linar", [s.value, f.value]]),
-        onClick: p
+        class: V(["relative border inline-block p-3xs hover:bg-opacity-60 peer-checked/input:hover:bg-opacity-60 before:opacity-0 peer-checked/input:before:opacity-100 before:absolute before:top-1/2 before:-translate-y-1/2 before:left-1/2 before:-translate-x-1/2 transition-colors duration-200 ease-linear before:transition-opacity before:duration-200 before:ease-linar", [i.value, u.value]]),
+        onClick: g
       }, null, 2)
     ]));
   }
 });
 export {
-  Vo as MclCheckbox,
-  Oo as MclFormGroup,
-  Bo as MclInputFile,
-  Lo as MclInputRadio,
-  Ao as MclInputSwitch,
-  So as MclInputText,
-  Eo as MclSelect,
-  To as MclTextArea
+  cl as MclCheckbox,
+  el as MclFormGroup,
+  tl as MclInputFile,
+  rl as MclInputRadio,
+  ll as MclInputSwitch,
+  sl as MclInputText,
+  il as MclSelect,
+  nl as MclTextArea
 };