veloce-vue 0.12.0 → 0.14.0

package/index.js

@@ -1,48 +1,48 @@
-import { defineComponent as h, ref as b, resolveComponent as j, createElementBlock as n, openBlock as s, Fragment as _, renderList as I, createElementVNode as l, createCommentVNode as p, normalizeClass as u, createVNode as x, toDisplayString as y, renderSlot as g, createTextVNode as A, computed as k, createBlock as L, resolveDynamicComponent as P, mergeModels as B, useModel as E, watch as V, withDirectives as O, vModelDynamic as F, onMounted as X, onUnmounted as U, normalizeStyle as $, vModelText as Z } from "vue";
-const R = { class: "w-full divide-y divide-gray-200 rounded border border-slate-200 bg-white" }, K = ["onClick"], Q = { class: "title text-gray-600" }, G = {
+import { defineComponent as x, ref as _, resolveComponent as G, createElementBlock as i, openBlock as r, Fragment as E, renderList as F, createElementVNode as a, createCommentVNode as y, createVNode as S, toDisplayString as $, normalizeClass as h, renderSlot as C, createTextVNode as K, computed as M, createBlock as j, resolveDynamicComponent as ee, mergeModels as R, useModel as W, withDirectives as Q, vModelDynamic as te, watch as P, onMounted as oe, onUnmounted as se, normalizeStyle as V, getCurrentScope as le, onScopeDispose as ne, toValue as L, unref as re, useTemplateRef as ae, vModelText as ie } from "vue";
+const ue = { class: "w-full divide-y divide-gray-200 overflow-hidden rounded-xl border border-slate-200 bg-white shadow" }, de = ["onClick"], ce = { class: "title" }, pe = {
   key: 0,
-  class: "p-3 text-gray-500"
-}, H = {
+  class: "text-text p-3"
+}, fe = {
   key: 1,
   class: "px-3 py-6 text-center text-gray-500"
-}, Je = /* @__PURE__ */ h({
+}, wt = /* @__PURE__ */ x({
   __name: "Index",
   props: {
     items: { type: Array, required: !0 }
   },
-  setup(r) {
-    const e = b(null);
-    return (t, d) => {
-      const a = j("Icon");
-      return s(), n("div", R, [
-        r.items.length ? (s(!0), n(_, { key: 0 }, I(r.items, (o, i) => (s(), n("div", { key: i }, [
-          l("div", {
-            class: u([{ "bg-primary/5": e.value === i }, "hover:bg-primary/5 relative flex cursor-pointer justify-between gap-4 p-3 font-medium duration-100"]),
-            onClick: (c) => e.value = e.value === i ? null : i
+  setup(o) {
+    const e = _(null);
+    return (t, l) => {
+      const n = G("Icon");
+      return r(), i("div", ue, [
+        o.items.length ? (r(!0), i(E, { key: 0 }, F(o.items, (s, u) => (r(), i("div", { key: u }, [
+          a("div", {
+            class: "text-text relative flex cursor-pointer justify-between gap-4 p-3 font-medium duration-100 hover:bg-gray-100",
+            onClick: (d) => e.value = e.value === u ? null : u
           }, [
-            l("span", Q, y(o.title), 1),
-            x(a, {
+            a("span", ce, $(s.title), 1),
+            S(n, {
               icon: "chevron-down",
-              class: u([{ "rotate-180": e.value === i }, "icon text-[1.4rem] text-gray-400 duration-200"])
+              class: h([{ "rotate-180 ": e.value === u }, "icon text-[1.4rem] duration-200"])
             }, null, 8, ["class"])
-          ], 10, K),
-          e.value === i ? (s(), n("div", G, [
-            o.slot ? g(t.$slots, o.slot, { key: 0 }) : (s(), n(_, { key: 1 }, [
-              A(y(o.content), 1)
+          ], 8, de),
+          e.value === u ? (r(), i("div", pe, [
+            s.slot ? C(t.$slots, s.slot, { key: 0 }) : (r(), i(E, { key: 1 }, [
+              K($(s.content), 1)
             ], 64))
-          ])) : p("", !0)
-        ]))), 128)) : (s(), n("div", H, "No items to show"))
+          ])) : y("", !0)
+        ]))), 128)) : (r(), i("div", fe, "No items to show"))
       ]);
     };
   }
-}), J = {
+}), me = {
   label: { type: String, default: "" },
   loading: { type: Boolean, default: !1 },
   disabled: { type: Boolean, default: !1 },
   variant: {
     type: String,
     default: "solid",
-    options: ["outlined", "text", "ghost", "solid"]
+    options: ["outlined", "text", "ghost", "solid", "gray"]
   },
   icon: { type: String, default: "" },
   iconClass: { type: String, default: "" },
@@ -52,11 +52,11 @@ const R = { class: "w-full divide-y divide-gray-200 rounded border border-slate-
     options: ["left", "right"]
   },
   rounded: { type: Boolean, default: !1 }
-}, W = ["disabled"], C = /* @__PURE__ */ h({
+}, ve = ["disabled"], O = /* @__PURE__ */ x({
   __name: "Index",
-  props: J,
-  setup(r) {
-    const e = r, t = k(() => {
+  props: me,
+  setup(o) {
+    const e = o, t = M(() => {
       switch (e.variant) {
         case "outlined":
           return "!border-primary text-primary bg-transparent hover:bg-primary disabled:hover:bg-transparent disabled:hover:text-primary hover:text-white";
@@ -64,96 +64,99 @@ const R = { class: "w-full divide-y divide-gray-200 rounded border border-slate-
           return "bg-transparent text-primary hover:bg-gray-200 disabled:hover:bg-transparent disabled:hover:text-primary";
         case "ghost":
           return "text-primary bg-gray-100 hover:bg-gray-200 disabled:hover:bg-transparent disabled:hover:text-primary";
+        case "gray":
+          return "bg-gray-100 text-gray-700 hover:bg-gray-200 disabled:hover:bg-gray-100 disabled:hover:text-gray-900";
         default:
           return "bg-primary text-white hover:bg-primary/75 disabled:hover:bg-primary disabled:hover:text-white";
       }
     });
-    return (d, a) => {
-      const o = j("Icon");
-      return s(), n("button", {
+    return (l, n) => {
+      const s = G("Icon");
+      return r(), i("button", {
         type: "button",
         disabled: e.disabled || e.loading,
-        class: u([
+        class: h([
           t.value,
           { "rounded-full": e.rounded },
           "flex cursor-pointer items-center justify-center gap-2 rounded border border-transparent px-3 py-2 transition duration-200 disabled:cursor-not-allowed disabled:opacity-75 "
         ])
       }, [
-        l("div", {
-          class: u([{ "justify-center": !e.icon }, "flex w-full items-center justify-between gap-2"])
+        a("div", {
+          class: h([{ "justify-center": !e.icon }, "flex w-full items-center justify-between gap-2"])
         }, [
-          e.label ? (s(), n("span", {
+          e.label ? (r(), i("span", {
             key: 0,
-            class: u({ "order-2": e.iconPosition === "left" })
-          }, y(e.label), 3)) : p("", !0),
-          e.icon && !e.loading ? (s(), L(o, {
+            class: h({ "order-2": e.iconPosition === "left" })
+          }, $(e.label), 3)) : y("", !0),
+          e.icon && !e.loading ? (r(), j(s, {
             key: 1,
             icon: e.icon,
-            class: u([e.iconClass, "duration-200"])
-          }, null, 8, ["icon", "class"])) : p("", !0)
-        ], 2),
-        e.loading ? (s(), L(o, {
-          key: 0,
-          icon: "loading"
-        })) : p("", !0)
-      ], 10, W);
+            class: h([e.iconClass, "duration-200 size-5 text-current"])
+          }, null, 8, ["icon", "class"])) : y("", !0),
+          e.loading ? (r(), j(s, {
+            key: 2,
+            icon: "loading",
+            class: "duration-200 size-5 text-current"
+          })) : y("", !0)
+        ], 2)
+      ], 10, ve);
     };
   }
-}), Y = {
+}), he = {
   label: { type: String, default: "" },
   labelClass: { type: String, default: "" },
   checkboxClass: { type: String, default: "" }
-}, S = (r, e) => {
-  const t = r.__vccOpts || r;
-  for (const [d, a] of e)
-    t[d] = a;
+}, T = (o, e) => {
+  const t = o.__vccOpts || o;
+  for (const [l, n] of e)
+    t[l] = n;
   return t;
-}, ee = {}, te = {
+}, ye = {}, ge = {
   xmlns: "http://www.w3.org/2000/svg",
   width: "24",
   height: "24",
   viewBox: "0 0 24 24"
 };
-function oe(r, e) {
-  return s(), n("svg", te, [...e[0] || (e[0] = [
-    l("path", {
+function be(o, e) {
+  return r(), i("svg", ge, [...e[0] || (e[0] = [
+    a("path", {
       fill: "currentColor",
       d: "m9.55 15.15l8.475-8.475q.3-.3.7-.3t.7.3t.3.713t-.3.712l-9.175 9.2q-.3.3-.7.3t-.7-.3L4.55 13q-.3-.3-.288-.712t.313-.713t.713-.3t.712.3z"
     }, null, -1)
   ])]);
 }
-const se = /* @__PURE__ */ S(ee, [["render", oe]]), le = {}, re = {
+const we = /* @__PURE__ */ T(ye, [["render", be]]), xe = {}, ke = {
   xmlns: "http://www.w3.org/2000/svg",
   width: "24",
   height: "24",
   viewBox: "0 0 24 24"
 };
-function ne(r, e) {
-  return s(), n("svg", re, [...e[0] || (e[0] = [
-    l("path", {
+function $e(o, e) {
+  return r(), i("svg", ke, [...e[0] || (e[0] = [
+    a("path", {
       fill: "currentColor",
       d: "m12 13.4l-4.9 4.9q-.275.275-.7.275t-.7-.275t-.275-.7t.275-.7l4.9-4.9l-4.9-4.9q-.275-.275-.275-.7t.275-.7t.7-.275t.7.275l4.9 4.9l4.9-4.9q.275-.275.7-.275t.7.275t.275.7t-.275.7L13.4 12l4.9 4.9q.275.275.275.7t-.275.7t-.7.275t-.7-.275z"
     }, null, -1)
   ])]);
 }
-const ae = /* @__PURE__ */ S(le, [["render", ne]]), ie = {}, de = {
+const _e = /* @__PURE__ */ T(xe, [["render", $e]]), Ce = {}, Se = {
   xmlns: "http://www.w3.org/2000/svg",
   width: "24",
   height: "24",
   viewBox: "0 0 24 24"
 };
-function ue(r, e) {
-  return s(), n("svg", de, [...e[0] || (e[0] = [
-    l("path", {
+function Le(o, e) {
+  return r(), i("svg", Se, [...e[0] || (e[0] = [
+    a("path", {
       fill: "currentColor",
       d: "M12,1A11,11,0,1,0,23,12,11,11,0,0,0,12,1Zm0,19a8,8,0,1,1,8-8A8,8,0,0,1,12,20Z",
       opacity: "0.25"
     }, null, -1),
-    l("path", {
+    a("path", {
       fill: "currentColor",
       d: "M10.14,1.16a11,11,0,0,0-9,8.92A1.59,1.59,0,0,0,2.46,12,1.52,1.52,0,0,0,4.11,10.7a8,8,0,0,1,6.66-6.61A1.42,1.42,0,0,0,12,2.69h0A1.57,1.57,0,0,0,10.14,1.16Z"
     }, [
-      l("animateTransform", {
+      a("animateTransform", {
         type: "rotate",
         attributeName: "transform",
         dur: "0.75s",
@@ -163,35 +166,35 @@ function ue(r, e) {
     ], -1)
   ])]);
 }
-const ce = /* @__PURE__ */ S(ie, [["render", ue]]), pe = {}, fe = {
+const Ee = /* @__PURE__ */ T(Ce, [["render", Le]]), Me = {}, Ie = {
   xmlns: "http://www.w3.org/2000/svg",
   width: "24",
   height: "24",
   viewBox: "-5 -8 24 24"
 };
-function me(r, e) {
-  return s(), n("svg", fe, [...e[0] || (e[0] = [
-    l("path", {
+function ze(o, e) {
+  return r(), i("svg", Ie, [...e[0] || (e[0] = [
+    a("path", {
       fill: "currentColor",
       d: "m7.071 5.314l4.95-4.95a1 1 0 1 1 1.414 1.414L7.778 7.435a1 1 0 0 1-1.414 0L.707 1.778A1 1 0 1 1 2.121.364z"
     }, null, -1)
   ])]);
 }
-const ve = /* @__PURE__ */ S(pe, [["render", me]]), he = {}, ye = {
+const Ve = /* @__PURE__ */ T(Me, [["render", ze]]), Ae = {}, Be = {
   xmlns: "http://www.w3.org/2000/svg",
   width: "24",
   height: "24",
   viewBox: "0 0 24 24"
 };
-function be(r, e) {
-  return s(), n("svg", ye, [...e[0] || (e[0] = [
-    l("g", { fill: "none" }, [
-      l("path", {
+function Oe(o, e) {
+  return r(), i("svg", Be, [...e[0] || (e[0] = [
+    a("g", { fill: "none" }, [
+      a("path", {
         fill: "currentColor",
         "fill-opacity": "0.16",
         d: "M10.575 5.217L3.517 17a1.667 1.667 0 0 0 1.425 2.5h14.116a1.666 1.666 0 0 0 1.425-2.5L13.426 5.217a1.666 1.666 0 0 0-2.85 0"
       }),
-      l("path", {
+      a("path", {
         stroke: "currentColor",
         "stroke-linecap": "round",
         "stroke-linejoin": "round",
@@ -202,13 +205,13 @@ function be(r, e) {
     ], -1)
   ])]);
 }
-const ge = /* @__PURE__ */ S(he, [["render", be]]), T = {
-  check: se,
-  close: ae,
-  loading: ce,
-  "chevron-down": ve,
-  alert: ge
-}, D = /* @__PURE__ */ h({
+const Te = /* @__PURE__ */ T(Ae, [["render", Oe]]), U = {
+  check: we,
+  close: _e,
+  loading: Ee,
+  "chevron-down": Ve,
+  alert: Te
+}, H = /* @__PURE__ */ x({
   __name: "index",
   props: {
     icon: {},
@@ -216,414 +219,558 @@ const ge = /* @__PURE__ */ S(he, [["render", be]]), T = {
     class: {},
     size: {}
   },
-  setup(r) {
-    const e = r, t = k(() => e.size ?? 24), d = k(() => {
-      const a = e.icon, o = e.fallbackIcon ? e.fallbackIcon : "alert";
-      return T[a] ?? T[o];
+  setup(o) {
+    const e = o, t = M(() => e.size ?? 24), l = M(() => {
+      const n = e.icon, s = e.fallbackIcon ? e.fallbackIcon : "alert";
+      return U[n] ?? U[s];
     });
-    return (a, o) => (s(), L(P(d.value), {
-      class: u(["shrink-0", e.class]),
+    return (n, s) => (r(), j(ee(l.value), {
+      class: h(["shrink-0", e.class]),
       width: t.value,
       height: t.value
     }, null, 8, ["class", "width", "height"]));
   }
-}), We = /* @__PURE__ */ h({
+}), xt = /* @__PURE__ */ x({
   __name: "Index",
-  props: /* @__PURE__ */ B(Y, {
+  props: /* @__PURE__ */ R(he, {
     modelValue: {},
     modelModifiers: {}
   }),
   emits: ["update:modelValue"],
-  setup(r) {
-    const e = E(r, "modelValue");
-    return (t, d) => (s(), n("div", {
+  setup(o) {
+    const e = W(o, "modelValue");
+    return (t, l) => (r(), i("div", {
       class: "flex w-fit cursor-pointer gap-2 select-none",
-      onClick: d[0] || (d[0] = (a) => e.value = !e.value)
+      onClick: l[0] || (l[0] = (n) => e.value = !e.value)
     }, [
-      l("div", {
-        class: u([[{ "bg-primary": e.value }, t.checkboxClass], "border-primary m-0 size-6 rounded-sm border-2 duration-200"])
+      a("div", {
+        class: h([[{ "bg-primary": e.value }, t.checkboxClass], "border-primary m-0 size-6 rounded-sm border-2 duration-200"])
       }, [
-        e.value ? (s(), L(D, {
+        e.value ? (r(), j(H, {
           key: 0,
           icon: "check",
-          class: u([{ "text-white": e.value }, "size-5"])
-        }, null, 8, ["class"])) : p("", !0)
+          class: h([{ "text-white": e.value }, "size-5"])
+        }, null, 8, ["class"])) : y("", !0)
       ], 2),
-      l("div", {
-        class: u(t.labelClass)
-      }, y(t.label), 3)
+      a("div", {
+        class: h(t.labelClass)
+      }, $(t.label), 3)
     ]));
   }
-}), we = {
+}), je = {
   direction: { type: String, default: "bottom", options: ["left", "bottom", "right"] },
   title: { type: String, default: "" },
   description: { type: String, default: "" },
   showFooter: { type: Boolean, default: !1 },
   show: { type: Boolean, default: !1 }
-}, xe = { class: "flex justify-between border-b border-gray-200 p-2" }, $e = { class: "font-semibold" }, _e = { class: "text-sm text-gray-500" }, ke = { class: "ml-auto" }, Ce = { class: "size-full overflow-auto p-2" }, Se = {
+}, Pe = { class: "flex justify-between border-b border-gray-200 p-2" }, qe = { class: "font-semibold" }, De = { class: "text-sm text-gray-500" }, Ne = { class: "ml-auto" }, Fe = { class: "size-full overflow-auto p-2" }, Re = {
   key: 0,
   class: "border-t border-gray-200 p-2"
-}, Ye = /* @__PURE__ */ h({
+}, kt = /* @__PURE__ */ x({
   __name: "Index",
-  props: /* @__PURE__ */ B(we, {
+  props: /* @__PURE__ */ R(je, {
     modelValue: {},
     modelModifiers: {}
   }),
   emits: ["update:modelValue"],
-  setup(r) {
-    const e = r, t = E(r, "modelValue"), d = k(() => {
-      let o = "";
+  setup(o) {
+    const e = o, t = W(o, "modelValue"), l = M(() => {
+      let s = "";
       switch (e.direction) {
         case "left":
-          o = t.value ? "fixed top-0 left-0 bottom-0" : "fixed top-0 -left-full bottom-0";
+          s = t.value ? "fixed top-0 left-0 bottom-0" : "fixed top-0 -left-full bottom-0";
           break;
         case "bottom":
-          o = t.value ? "fixed left-0 bottom-0 right-0" : "fixed left-0 right-0 -bottom-full";
+          s = t.value ? "fixed left-0 bottom-0 right-0" : "fixed left-0 right-0 -bottom-full";
           break;
         case "right":
-          o = t.value ? "fixed top-0 right-0 bottom-0" : "fixed top-0 -right-full bottom-0";
+          s = t.value ? "fixed top-0 right-0 bottom-0" : "fixed top-0 -right-full bottom-0";
           break;
         default:
           alert("Invalid direction");
       }
-      return o;
-    }), a = k(() => {
-      let o = "";
+      return s;
+    }), n = M(() => {
+      let s = "";
       switch (e.direction) {
         case "left":
-          o = "w-full max-w-[360px]";
+          s = "w-full max-w-[360px]";
           break;
         case "bottom":
-          o = "w-full h-full max-h-[90dvh]";
+          s = "w-full h-full max-h-[90dvh]";
           break;
         case "right":
-          o = "w-full max-w-[360px]";
+          s = "w-full max-w-[360px]";
           break;
       }
-      return o;
+      return s;
     });
-    return V(t, () => {
-      t.value ? document.body.classList.add("overflow-hidden") : document.body.classList.remove("overflow-hidden");
-    }), (o, i) => (s(), n(_, null, [
-      l("div", {
-        onClick: i[0] || (i[0] = (c) => t.value = !t.value)
+    return (s, u) => (r(), i(E, null, [
+      a("div", {
+        onClick: u[0] || (u[0] = (d) => t.value = !t.value)
       }, [
-        g(o.$slots, "default")
+        C(s.$slots, "default")
       ]),
-      l("div", {
-        class: u([[d.value, a.value], "z-50 flex flex-col justify-between bg-white duration-300"])
+      a("div", {
+        class: h([[l.value, n.value], "z-50 flex flex-col justify-between bg-white duration-300"])
       }, [
-        l("div", xe, [
-          l("div", null, [
-            l("h4", $e, y(o.title), 1),
-            l("p", _e, y(o.description), 1)
+        a("div", Pe, [
+          a("div", null, [
+            a("h4", qe, $(s.title), 1),
+            a("p", De, $(s.description), 1)
           ]),
-          l("div", ke, [
-            x(C, {
+          a("div", Ne, [
+            S(O, {
               icon: "close",
               class: "!p-1",
               circle: "",
               variant: "text",
-              onClick: i[1] || (i[1] = (c) => t.value = !1)
+              onClick: u[1] || (u[1] = (d) => t.value = !1)
             })
           ])
         ]),
-        l("div", Ce, [
-          g(o.$slots, "content")
+        a("div", Fe, [
+          C(s.$slots, "content")
         ]),
-        o.showFooter ? (s(), n("div", Se, [
-          g(o.$slots, "footer")
-        ])) : p("", !0)
+        s.showFooter ? (r(), i("div", Re, [
+          C(s.$slots, "footer")
+        ])) : y("", !0)
       ], 2),
-      l("div", {
-        class: u([t.value ? "opacity-100" : "pointer-events-none", "fixed inset-0 z-[49] bg-black/40 opacity-0 duration-200"]),
-        onClick: i[2] || (i[2] = (c) => t.value = !1)
+      a("div", {
+        class: h([t.value ? "opacity-100" : "pointer-events-none", "fixed inset-0 z-[49] bg-black/40 opacity-0 duration-200"]),
+        onClick: u[2] || (u[2] = (d) => t.value = !1)
       }, null, 2)
     ], 64));
   }
-}), Le = {
+}), We = {
   icon: { type: String, default: "" },
   placeholder: { type: String, default: "" },
   helpText: { type: String, default: "" },
   type: { type: String, default: "text", options: ["text", "password"] }
-}, Me = ["type"], ze = {
+}, Xe = ["type"], Ue = {
   key: 0,
   class: "ml-1 pt-1 text-xs text-gray-400"
-}, et = /* @__PURE__ */ h({
+}, $t = /* @__PURE__ */ x({
   __name: "Index",
-  props: /* @__PURE__ */ B(Le, {
+  props: /* @__PURE__ */ R(We, {
     modelValue: {},
     modelModifiers: {}
   }),
   emits: ["update:modelValue"],
-  setup(r) {
-    const e = E(r, "modelValue");
-    return (t, d) => (s(), n("div", {
-      class: u([{ "mb-6": t.helpText }, "relative h-[42px]"])
+  setup(o) {
+    const e = W(o, "modelValue");
+    return (t, l) => (r(), i("div", {
+      class: h([{ "mb-6": t.helpText }, "relative h-[38px]"])
     }, [
-      O(l("input", {
+      Q(a("input", {
         type: t.type,
-        "onUpdate:modelValue": d[0] || (d[0] = (a) => e.value = a),
+        "onUpdate:modelValue": l[0] || (l[0] = (n) => e.value = n),
         class: "hover:border-primary/60 peer outline-primary h-full w-full rounded-md border border-gray-200 px-3 duration-200",
         placeholder: " "
-      }, null, 8, Me), [
-        [F, e.value]
+      }, null, 8, Xe), [
+        [te, e.value]
       ]),
-      l("div", {
-        class: u([e.value ? "-top-2.5 text-sm text-black" : "top-[9px]", "absolute left-3 bg-white px-[2px] text-black duration-100 peer-placeholder-shown:text-gray-400 peer-focus:-top-2.5 peer-focus:text-sm peer-focus:text-black"])
-      }, y(t.placeholder), 3),
-      t.helpText ? (s(), n("div", ze, y(t.helpText), 1)) : p("", !0)
+      a("div", {
+        class: h([e.value ? "-top-2.5 text-sm text-black" : "top-[6px]", "absolute left-3 bg-white px-[2px] text-black duration-100 peer-placeholder-shown:text-gray-400 peer-focus:-top-2.5 peer-focus:text-sm peer-focus:text-black"])
+      }, $(t.placeholder), 3),
+      t.helpText ? (r(), i("div", Ue, $(t.helpText), 1)) : y("", !0)
     ], 2));
   }
-}), Ve = {
+}), Ze = {
   show: { type: Boolean, default: !1 }
-}, Ie = {
+}, Ge = {
   key: 0,
   class: "fixed top-0 left-0 z-20 flex h-screen w-screen items-center justify-center backdrop-blur-[2px]"
-}, Be = {
+}, Ke = {
   class: "flex max-w-[600px] flex-col overflow-hidden rounded border border-gray-200 bg-white text-slate-500 shadow-xl shadow-slate-700/10 sm:max-h-[95dvh] sm:w-[90%]",
   role: "document"
-}, Ee = { class: "flex items-center gap-4 border-b border-gray-200 px-4 py-2" }, qe = { class: "max-h-[calc(100dvh-100px)] flex-1 overflow-auto px-4 py-2 sm:max-h-[75vh]" }, Te = { class: "flex items-center justify-end gap-4 border-t border-gray-200 px-4 py-2" }, tt = /* @__PURE__ */ h({
+}, Qe = { class: "flex items-center gap-4 border-b border-gray-200 px-4 py-2" }, He = { class: "max-h-[calc(100dvh-100px)] flex-1 overflow-auto px-4 py-2 sm:max-h-[75vh]" }, Je = { class: "flex items-center justify-end gap-4 border-t border-gray-200 px-4 py-2" }, _t = /* @__PURE__ */ x({
   __name: "Index",
-  props: Ve,
+  props: Ze,
   emits: ["update:show"],
-  setup(r, { emit: e }) {
-    const t = r, d = e, a = b(t.show ?? !1);
-    return V(
+  setup(o, { emit: e }) {
+    const t = o, l = e, n = _(t.show ?? !1);
+    return P(
       () => t.show,
-      (o) => {
-        o !== a.value && (a.value = o);
+      (s) => {
+        s !== n.value && (n.value = s);
       }
-    ), V(a, (o) => {
-      d("update:show", o), document.body.classList.toggle("overflow-hidden", o);
-    }), (o, i) => (s(), n(_, null, [
-      l("div", {
+    ), P(n, (s) => {
+      l("update:show", s), document.body.classList.toggle("overflow-hidden", s);
+    }), (s, u) => (r(), i(E, null, [
+      a("div", {
         class: "w-full",
-        onClick: i[0] || (i[0] = (c) => a.value = !0)
+        onClick: u[0] || (u[0] = (d) => n.value = !0)
       }, [
-        g(o.$slots, "default")
+        C(s.$slots, "default")
       ]),
-      a.value ? (s(), n("div", Ie, [
-        l("div", Be, [
-          l("div", Ee, [
-            i[4] || (i[4] = l("h3", { class: "text-primary flex-1 text-xl font-medium" }, "Modal title", -1)),
-            x(C, {
+      n.value ? (r(), i("div", Ge, [
+        a("div", Ke, [
+          a("div", Qe, [
+            u[4] || (u[4] = a("h3", { class: "text-primary flex-1 text-xl font-medium" }, "Modal title", -1)),
+            S(O, {
               icon: "close",
               class: "!p-1",
               variant: "ghost",
               circle: "",
-              onClick: i[1] || (i[1] = (c) => a.value = !1)
+              onClick: u[1] || (u[1] = (d) => n.value = !1)
             })
           ]),
-          l("div", qe, [
-            (s(), n(_, null, I(15, (c) => l("p", null, "Lorem ipsum dolor sit amet consectetur adipisicing elit. Nemo autem consequatur aspernatur animi voluptate quasi non, maxime iste, harum ipsa reiciendis laborum ad unde a sequi molestias? Dolore, obcaecati sed?")), 64))
+          a("div", He, [
+            (r(), i(E, null, F(15, (d) => a("p", null, "Lorem ipsum dolor sit amet consectetur adipisicing elit. Nemo autem consequatur aspernatur animi voluptate quasi non, maxime iste, harum ipsa reiciendis laborum ad unde a sequi molestias? Dolore, obcaecati sed?")), 64))
           ]),
-          l("div", Te, [
-            x(C, {
+          a("div", Je, [
+            S(O, {
               class: "!px-3 !py-1",
               variant: "ghost",
               label: "Close",
-              onClick: i[2] || (i[2] = (c) => a.value = !1)
+              onClick: u[2] || (u[2] = (d) => n.value = !1)
             }),
-            x(C, {
+            S(O, {
               class: "!px-3 !py-1",
               label: "Save",
-              onClick: i[3] || (i[3] = (c) => a.value = !1)
+              onClick: u[3] || (u[3] = (d) => n.value = !1)
             })
           ])
         ])
-      ])) : p("", !0)
+      ])) : y("", !0)
     ], 64));
   }
-}), je = {
+}), Ye = {
   position: { type: String, default: "bottom", options: ["top", "bottom"] },
   bodyClass: { type: String, default: "" },
   contentClass: { type: String, default: "" }
-}, ot = /* @__PURE__ */ h({
+}, Ct = /* @__PURE__ */ x({
   __name: "Index",
-  props: je,
-  setup(r) {
-    const e = b(!0);
-    return (t, d) => (s(), n("div", {
+  props: Ye,
+  setup(o) {
+    const e = _(!0);
+    return (t, l) => (r(), i("div", {
       class: "relative inline-block",
-      onMouseleave: d[1] || (d[1] = (a) => e.value = !1)
+      onMouseleave: l[1] || (l[1] = (n) => e.value = !1)
     }, [
-      l("div", {
+      a("div", {
         class: "relative",
-        onMouseover: d[0] || (d[0] = (a) => e.value = !0)
+        onMouseover: l[0] || (l[0] = (n) => e.value = !0)
       }, [
-        e.value ? (s(), n("svg", {
+        e.value ? (r(), i("svg", {
           key: 0,
-          class: u([{ "top-full": t.position === "bottom", "bottom-full rotate-180": t.position === "top" }, "absolute left-1/2 w-4 -translate-x-1/2 text-gray-200"]),
+          class: h([{ "top-full": t.position === "bottom", "bottom-full rotate-180": t.position === "top" }, "absolute left-1/2 w-4 -translate-x-1/2 text-gray-200"]),
           xmlns: "http://www.w3.org/2000/svg",
           viewBox: "0 0 24 24"
-        }, [...d[2] || (d[2] = [
-          l("path", {
+        }, [...l[2] || (l[2] = [
+          a("path", {
             fill: "currentColor",
             d: "M3 19h18a1.002 1.002 0 0 0 .823-1.569l-9-13c-.373-.539-1.271-.539-1.645 0l-9 13A.999.999 0 0 0 3 19"
           }, null, -1)
-        ])], 2)) : p("", !0),
-        g(t.$slots, "default")
+        ])], 2)) : y("", !0),
+        C(t.$slots, "default")
       ], 32),
-      e.value ? (s(), n("div", {
+      e.value ? (r(), i("div", {
         key: 0,
-        class: u([[t.bodyClass, { "bottom-full mb-3": t.position === "top" }, { "top-full mt-3": t.position === "bottom" }], "absolute left-1/2 z-10 w-fit -translate-x-1/2"])
+        class: h([[t.bodyClass, { "bottom-full mb-3": t.position === "top" }, { "top-full mt-3": t.position === "bottom" }], "absolute left-1/2 z-10 w-fit -translate-x-1/2"])
       }, [
-        l("div", {
-          class: u([t.contentClass, "w-[200px] rounded-md border border-gray-200 bg-white p-3"])
+        a("div", {
+          class: h([t.contentClass, "w-[200px] rounded-md border border-gray-200 bg-white p-3"])
         }, [
-          g(t.$slots, "body")
+          C(t.$slots, "body")
         ], 2)
-      ], 2)) : p("", !0)
+      ], 2)) : y("", !0)
     ], 32));
   }
-}), Ae = {
+}), et = {
   showTooltip: { type: Boolean, default: !1 },
   value: { type: Number, default: 0 }
-}, Oe = { class: "progress-container relative min-w-full py-4" }, De = { class: "relative h-2 rounded-full bg-gray-200" }, st = /* @__PURE__ */ h({
+}, tt = { class: "progress-container relative min-w-full py-4" }, ot = { class: "relative h-2 rounded-full bg-gray-200" }, St = /* @__PURE__ */ x({
   __name: "Index",
-  props: Ae,
+  props: et,
   emits: ["update:value"],
-  setup(r, { emit: e }) {
-    const t = r, d = e, a = b(t.value), o = b(!1), i = b(!1), c = (m) => {
-      if (!o.value) return;
-      const w = document.querySelector(".progress-container");
-      if (!w) return;
-      const M = w.getBoundingClientRect();
-      let z;
-      m instanceof TouchEvent ? z = m.touches[0]?.clientX ?? 0 : z = m.clientX;
-      const N = z - M.left, q = Math.max(0, Math.min(100, N / M.width * 100));
-      a.value = q, d("update:value", q);
-    }, f = (m) => {
-      o.value = !0, i.value = !0, c(m);
-    }, v = () => {
-      o.value = !1, i.value = !1;
+  setup(o, { emit: e }) {
+    const t = o, l = e, n = _(t.value), s = _(!1), u = _(!1), d = (f) => {
+      if (!s.value) return;
+      const g = document.querySelector(".progress-container");
+      if (!g) return;
+      const b = g.getBoundingClientRect();
+      let k;
+      f instanceof TouchEvent ? k = f.touches[0]?.clientX ?? 0 : k = f.clientX;
+      const I = k - b.left, A = Math.max(0, Math.min(100, I / b.width * 100));
+      n.value = A, l("update:value", A);
+    }, p = (f) => {
+      s.value = !0, u.value = !0, d(f);
+    }, m = () => {
+      s.value = !1, u.value = !1;
     };
-    return X(() => {
-      window.addEventListener("mousemove", c), window.addEventListener("mouseup", v), window.addEventListener("mouseleave", v), window.addEventListener("touchmove", c, { passive: !1 }), window.addEventListener("touchend", v), window.addEventListener("touchcancel", v);
-    }), U(() => {
-      window.removeEventListener("mousemove", c), window.removeEventListener("mouseup", v), window.removeEventListener("mouseleave", v), window.removeEventListener("touchmove", c), window.removeEventListener("touchend", v), window.removeEventListener("touchcancel", v);
-    }), (m, w) => (s(), n("div", Oe, [
-      l("div", De, [
-        l("div", {
+    return oe(() => {
+      window.addEventListener("mousemove", d), window.addEventListener("mouseup", m), window.addEventListener("mouseleave", m), window.addEventListener("touchmove", d, { passive: !1 }), window.addEventListener("touchend", m), window.addEventListener("touchcancel", m);
+    }), se(() => {
+      window.removeEventListener("mousemove", d), window.removeEventListener("mouseup", m), window.removeEventListener("mouseleave", m), window.removeEventListener("touchmove", d), window.removeEventListener("touchend", m), window.removeEventListener("touchcancel", m);
+    }), (f, g) => (r(), i("div", tt, [
+      a("div", ot, [
+        a("div", {
           class: "bg-primary absolute h-2 rounded-full",
-          style: $({ width: a.value + "%" })
+          style: V({ width: n.value + "%" })
         }, null, 4),
-        l("div", {
+        a("div", {
           class: "absolute top-1/2 -ml-2 flex h-4 w-4 -translate-y-1/2 cursor-pointer items-center justify-center rounded-full border border-gray-300 bg-white shadow",
-          style: $({ left: a.value + "%" }),
+          style: V({ left: n.value + "%" }),
           unselectable: "on",
           onselectstart: "return false;",
-          onMousedown: f,
-          onTouchstart: f
+          onMousedown: p,
+          onTouchstart: p
         }, null, 36),
-        i.value && m.showTooltip ? (s(), n("div", {
+        u.value && f.showTooltip ? (r(), i("div", {
           key: 0,
           class: "absolute -top-9 mx-auto w-10 -translate-x-1/2 rounded bg-gray-800 px-2 py-1 text-xs text-white",
-          style: $({ left: a.value + "%" })
+          style: V({ left: n.value + "%" })
         }, [
-          A(y(Math.round(a.value)) + "% ", 1),
-          w[0] || (w[0] = l("span", { class: "absolute -bottom-1 left-1/2 -ml-1 h-2 w-2 rotate-45 bg-gray-800" }, null, -1))
-        ], 4)) : p("", !0)
+          K($(Math.round(n.value)) + "% ", 1),
+          g[0] || (g[0] = a("span", { class: "absolute -bottom-1 left-1/2 -ml-1 h-2 w-2 rotate-45 bg-gray-800" }, null, -1))
+        ], 4)) : y("", !0)
       ])
     ]));
   }
-}), Ne = {
+}), st = {
   modelValue: { type: String, default: "" },
   options: { type: Array, required: !0 },
-  variant: { type: String, default: "solid", options: ["outlined", "text", "ghost", "solid"] },
+  variant: { type: String, default: "solid", options: ["outlined", "text", "ghost", "solid", "gray"] },
   showFilter: { type: Boolean, default: !1 },
-  isOpen: { type: Boolean, default: !1 }
-}, Pe = { class: "relative" }, Fe = {
+  isOpen: { type: Boolean, default: !1 },
+  closeOnClickOutside: { type: Boolean, default: !0 }
+};
+function lt(o) {
+  return le() ? (ne(o), !0) : !1;
+}
+const J = typeof window < "u" && typeof document < "u";
+typeof WorkerGlobalScope < "u" && globalThis instanceof WorkerGlobalScope;
+const nt = Object.prototype.toString, rt = (o) => nt.call(o) === "[object Object]", z = () => {
+}, at = /* @__PURE__ */ it();
+function it() {
+  var o, e;
+  return J && ((o = window?.navigator) == null ? void 0 : o.userAgent) && (/iP(?:ad|hone|od)/.test(window.navigator.userAgent) || ((e = window?.navigator) == null ? void 0 : e.maxTouchPoints) > 2 && /iPad|Macintosh/.test(window?.navigator.userAgent));
+}
+function D(o) {
+  return Array.isArray(o) ? o : [o];
+}
+function ut(o, e, t) {
+  return P(
+    o,
+    e,
+    {
+      ...t,
+      immediate: !0
+    }
+  );
+}
+const Y = J ? window : void 0;
+function B(o) {
+  var e;
+  const t = L(o);
+  return (e = t?.$el) != null ? e : t;
+}
+function N(...o) {
+  const e = [], t = () => {
+    e.forEach((d) => d()), e.length = 0;
+  }, l = (d, p, m, f) => (d.addEventListener(p, m, f), () => d.removeEventListener(p, m, f)), n = M(() => {
+    const d = D(L(o[0])).filter((p) => p != null);
+    return d.every((p) => typeof p != "string") ? d : void 0;
+  }), s = ut(
+    () => {
+      var d, p;
+      return [
+        (p = (d = n.value) == null ? void 0 : d.map((m) => B(m))) != null ? p : [Y].filter((m) => m != null),
+        D(L(n.value ? o[1] : o[0])),
+        D(re(n.value ? o[2] : o[1])),
+        // @ts-expect-error - TypeScript gets the correct types, but somehow still complains
+        L(n.value ? o[3] : o[2])
+      ];
+    },
+    ([d, p, m, f]) => {
+      if (t(), !d?.length || !p?.length || !m?.length)
+        return;
+      const g = rt(f) ? { ...f } : f;
+      e.push(
+        ...d.flatMap(
+          (b) => p.flatMap(
+            (k) => m.map((I) => l(b, k, I, g))
+          )
+        )
+      );
+    },
+    { flush: "post" }
+  ), u = () => {
+    s(), t();
+  };
+  return lt(t), u;
+}
+let Z = !1;
+function dt(o, e, t = {}) {
+  const { window: l = Y, ignore: n = [], capture: s = !0, detectIframe: u = !1, controls: d = !1 } = t;
+  if (!l)
+    return d ? { stop: z, cancel: z, trigger: z } : z;
+  if (at && !Z) {
+    Z = !0;
+    const c = { passive: !0 };
+    Array.from(l.document.body.children).forEach((v) => v.addEventListener("click", z, c)), l.document.documentElement.addEventListener("click", z, c);
+  }
+  let p = !0;
+  const m = (c) => L(n).some((v) => {
+    if (typeof v == "string")
+      return Array.from(l.document.querySelectorAll(v)).some((w) => w === c.target || c.composedPath().includes(w));
+    {
+      const w = B(v);
+      return w && (c.target === w || c.composedPath().includes(w));
+    }
+  });
+  function f(c) {
+    const v = L(c);
+    return v && v.$.subTree.shapeFlag === 16;
+  }
+  function g(c, v) {
+    const w = L(c), q = w.$.subTree && w.$.subTree.children;
+    return q == null || !Array.isArray(q) ? !1 : q.some((X) => X.el === v.target || v.composedPath().includes(X.el));
+  }
+  const b = (c) => {
+    const v = B(o);
+    if (c.target != null && !(!(v instanceof Element) && f(o) && g(o, c)) && !(!v || v === c.target || c.composedPath().includes(v))) {
+      if ("detail" in c && c.detail === 0 && (p = !m(c)), !p) {
+        p = !0;
+        return;
+      }
+      e(c);
+    }
+  };
+  let k = !1;
+  const I = [
+    N(l, "click", (c) => {
+      k || (k = !0, setTimeout(() => {
+        k = !1;
+      }, 0), b(c));
+    }, { passive: !0, capture: s }),
+    N(l, "pointerdown", (c) => {
+      const v = B(o);
+      p = !m(c) && !!(v && !c.composedPath().includes(v));
+    }, { passive: !0 }),
+    u && N(l, "blur", (c) => {
+      setTimeout(() => {
+        var v;
+        const w = B(o);
+        ((v = l.document.activeElement) == null ? void 0 : v.tagName) === "IFRAME" && !w?.contains(l.document.activeElement) && e(c);
+      }, 0);
+    }, { passive: !0 })
+  ].filter(Boolean), A = () => I.forEach((c) => c());
+  return d ? {
+    stop: A,
+    cancel: () => {
+      p = !1;
+    },
+    trigger: (c) => {
+      p = !0, b(c), p = !1;
+    }
+  } : A;
+}
+const ct = {
   key: 0,
   class: "absolute top-full z-10 mt-1 flex w-full list-none flex-col rounded border border-gray-200 bg-white shadow-md shadow-slate-500/10"
-}, Xe = {
+}, pt = {
   key: 0,
   class: "border-b border-gray-200 p-2"
-}, Ue = ["onClick"], lt = /* @__PURE__ */ h({
+}, ft = ["onClick"], Lt = /* @__PURE__ */ x({
   __name: "Index",
-  props: Ne,
+  props: st,
   emits: ["update:modelValue", "update:isOpen"],
-  setup(r, { emit: e }) {
-    const t = r, d = e, a = b(t.modelValue), o = (f) => {
-      a.value = f, d("update:modelValue", f), d("update:isOpen", !1);
-    }, i = b(""), c = k(() => i.value ? t.options.filter((f) => f.toLowerCase().includes(i.value.toLowerCase())) : t.options);
-    return (f, v) => (s(), n("div", Pe, [
-      x(C, {
-        "icon-class": f.isOpen ? "rotate-180" : "",
+  setup(o, { emit: e }) {
+    const t = o, l = e, n = _(t.modelValue), s = _(t.isOpen ?? !1), u = ae("target");
+    dt(u, () => t.closeOnClickOutside && (s.value = !1)), P(
+      () => t.isOpen,
+      (f) => {
+        f !== s.value && (s.value = f);
+      }
+    );
+    const d = (f) => {
+      n.value = f, l("update:modelValue", f), s.value = !1;
+    }, p = _(""), m = M(() => p.value ? t.options.filter((f) => f.toLowerCase().includes(p.value.toLowerCase())) : t.options);
+    return (f, g) => (r(), i("div", {
+      class: "relative",
+      ref_key: "target",
+      ref: u
+    }, [
+      S(O, {
+        "icon-class": s.value ? "rotate-180" : "",
         icon: "chevron-down",
-        class: "w-full",
+        class: "w-full capitalize",
         variant: f.variant,
-        label: a.value || "Select",
-        onClick: v[0] || (v[0] = (m) => f.isOpen = !f.isOpen)
+        label: n.value || "Select",
+        onClick: g[0] || (g[0] = (b) => s.value = !s.value)
       }, null, 8, ["icon-class", "variant", "label"]),
-      f.isOpen ? (s(), n("ul", Fe, [
-        f.showFilter ? (s(), n("li", Xe, [
-          O(l("input", {
+      s.value ? (r(), i("ul", ct, [
+        f.showFilter ? (r(), i("li", pt, [
+          Q(a("input", {
             type: "text",
-            "onUpdate:modelValue": v[1] || (v[1] = (m) => i.value = m),
+            "onUpdate:modelValue": g[1] || (g[1] = (b) => p.value = b),
             class: "focus:border-primary w-full rounded-sm border border-gray-200 px-2 py-1 focus:outline-none",
             placeholder: "Search"
           }, null, 512), [
-            [Z, i.value]
+            [ie, p.value]
           ])
-        ])) : p("", !0),
-        (s(!0), n(_, null, I(c.value, (m, w) => (s(), n("li", {
-          key: w,
-          class: u([m === a.value && "bg-primary/10", "hover:bg-primary/5 cursor-pointer px-4 py-2"]),
-          onClick: (M) => o(m)
-        }, y(m), 11, Ue))), 128))
-      ])) : p("", !0)
-    ]));
+        ])) : y("", !0),
+        (r(!0), i(E, null, F(m.value, (b, k) => (r(), i("li", {
+          key: k,
+          class: h([b === n.value && "bg-primary/10", "hover:bg-primary/5 cursor-pointer px-4 py-2 text-left"]),
+          onClick: (I) => d(b)
+        }, $(b), 11, ft))), 128))
+      ])) : y("", !0)
+    ], 512));
   }
-}), Ze = {
+}), mt = {
   direction: { type: String, default: "horizontal", options: ["horizontal", "vertical"] },
-  color: { type: String, default: "#16476A" },
+  color: { type: String, default: "" },
   label: { type: String, default: "" },
   icon: { type: String, default: "" }
-}, Re = {
+}, vt = {
   key: 1,
   class: "absolute inset-0 m-auto flex h-fit w-fit shrink-0 items-center justify-center bg-white p-1"
-}, rt = /* @__PURE__ */ h({
+}, Et = /* @__PURE__ */ x({
   __name: "Index",
-  props: Ze,
-  setup(r) {
-    return (e, t) => (s(), n("div", {
-      class: u([e.direction === "horizontal" ? "h-[1px] w-full" : e.direction === "vertical" ? "h-full w-[1px]" : "", "relative bg-gray-200"]),
-      style: $({ backgroundColor: e.color })
+  props: mt,
+  setup(o) {
+    return (e, t) => (r(), i("div", {
+      class: h([e.direction === "horizontal" ? "h-[1px] w-full" : e.direction === "vertical" ? "h-full w-[1px]" : "", "relative bg-gray-200"]),
+      style: V({ backgroundColor: e.color || "var(--color-primary)" })
     }, [
-      e.direction === "horizontal" && e.label && !e.icon ? (s(), n("span", {
-        key: 0,
-        class: "absolute inset-0 m-auto flex w-fit items-center justify-center rounded-sm border border-gray-100 bg-white px-1 py-2 text-sm",
-        style: $({ color: e.color, borderColor: e.color })
-      }, "Test label", 4)) : p("", !0),
-      e.direction === "horizontal" && !e.label && e.icon ? (s(), n("span", Re, [
-        x(D, {
-          icon: e.icon,
-          class: "size-6",
-          style: $({ color: e.color })
-        }, null, 8, ["icon", "style"])
-      ])) : p("", !0)
+      e.direction === "horizontal" ? (r(), i(E, { key: 0 }, [
+        e.label && !e.icon ? (r(), i("span", {
+          key: 0,
+          class: "absolute inset-0 m-auto flex w-fit items-center justify-center rounded-sm border border-gray-100 bg-white px-1 py-2 text-sm",
+          style: V({ color: e.color, borderColor: e.color })
+        }, "Test label", 4)) : y("", !0),
+        e.icon && !e.label ? (r(), i("span", vt, [
+          S(H, {
+            icon: e.icon,
+            class: "size-6",
+            style: V({ color: e.color || "var(--color-primary)" })
+          }, null, 8, ["icon", "style"])
+        ])) : y("", !0)
+      ], 64)) : y("", !0)
     ], 6));
   }
-}), Ke = {
+}), ht = {
   content: { type: String, default: "" },
   position: { type: String, default: "bottom", options: ["top", "bottom", "left", "right"] },
   bodyClass: { type: String, default: "" }
-}, Qe = { key: 0 }, nt = /* @__PURE__ */ h({
+}, yt = { key: 0 }, Mt = /* @__PURE__ */ x({
   __name: "Index",
-  props: Ke,
-  setup(r) {
-    const e = b(!1);
-    return (t, d) => (s(), n("div", {
+  props: ht,
+  setup(o) {
+    const e = _(!1);
+    return (t, l) => (r(), i("div", {
       class: "relative inline-block",
-      onMouseenter: d[0] || (d[0] = (a) => e.value = !0),
-      onMouseleave: d[1] || (d[1] = (a) => e.value = !1)
+      onMouseenter: l[0] || (l[0] = (n) => e.value = !0),
+      onMouseleave: l[1] || (l[1] = (n) => e.value = !1)
     }, [
-      g(t.$slots, "default"),
-      e.value ? (s(), n("div", {
+      C(t.$slots, "default"),
+      e.value ? (r(), i("div", {
         key: 0,
-        class: u([
+        class: h([
           "absolute z-10 w-max rounded-md bg-white px-3 py-2 text-sm text-primary border shadow-xl transition-opacity duration-200",
           t.position === "top" && "bottom-full left-1/2 mb-2 -translate-x-1/2",
           t.position === "bottom" && "top-full left-1/2 mt-2 -translate-x-1/2",
@@ -632,35 +779,35 @@ const ge = /* @__PURE__ */ S(he, [["render", be]]), T = {
           t.bodyClass
         ])
       }, [
-        t.content ? g(t.$slots, "body", { key: 1 }) : (s(), n("span", Qe, y(t.content), 1))
-      ], 2)) : p("", !0)
+        t.content ? C(t.$slots, "body", { key: 1 }) : (r(), i("span", yt, $(t.content), 1))
+      ], 2)) : y("", !0)
     ], 32));
   }
-}), at = (r) => ({
+}), It = (o) => ({
   install() {
-    if (!r || !r.colors) {
+    if (!o || !o.colors) {
       console.warn("No config provided for the theme settings");
       return;
     }
-    Ge(r.colors);
+    gt(o.colors);
   }
-}), Ge = (r) => {
+}), gt = (o) => {
   const e = document.documentElement;
-  for (const t in r)
-    r[t] && e.style.setProperty(`--ui-color-${t}`, r[t]);
+  for (const t in o)
+    o[t] && e.style.setProperty(`--ui-color-${t}`, o[t]);
 };
 export {
-  Je as Accordion,
-  C as Button,
-  We as Checkbox,
-  Ye as Drawer,
-  et as Input,
-  tt as Modal,
-  ot as Popover,
-  st as RangeSlider,
-  lt as Select,
-  rt as Separator,
-  nt as Tooltip,
-  at as config
+  wt as Accordion,
+  O as Button,
+  xt as Checkbox,
+  kt as Drawer,
+  $t as Input,
+  _t as Modal,
+  Ct as Popover,
+  St as RangeSlider,
+  Lt as Select,
+  Et as Separator,
+  Mt as Tooltip,
+  It as config
 };
 //# sourceMappingURL=index.js.map