@maltjoy/core-vue 1.0.0-alpha.9 → 1.0.0-beta.2

package/dist/joy-vue.js

@@ -1,27 +1,27 @@
-import { defineComponent as p, openBlock as o, createElementBlock as d, normalizeClass as b, useAttrs as O, computed as V, createBlock as J, resolveDynamicComponent as E, unref as m, withCtx as q, createCommentVNode as y, createElementVNode as u, renderSlot as c, ref as S, createTextVNode as B, toDisplayString as $, mergeProps as L, createVNode as R, pushScopeId as z, popScopeId as M, useSlots as w, onBeforeMount as W, Fragment as A, renderList as F, normalizeStyle as D, onMounted as N, watch as Z, createSlots as K } from "vue";
-const Q = ["teal", "white"], X = /* @__PURE__ */ p({
-  __name: "JoySpinner",
+import { defineComponent as $, openBlock as m, createElementBlock as p, normalizeClass as k, useAttrs as De, computed as I, createBlock as P, resolveDynamicComponent as de, unref as _, withCtx as L, createCommentVNode as w, createElementVNode as h, renderSlot as b, ref as g, createTextVNode as T, toDisplayString as O, mergeProps as K, createVNode as ce, pushScopeId as ee, popScopeId as te, getCurrentScope as et, onScopeDispose as tt, getCurrentInstance as lt, onMounted as W, nextTick as Me, watch as q, h as at, reactive as Y, onBeforeUnmount as Re, normalizeStyle as G, Fragment as fe, renderList as ye, normalizeProps as me, guardReactiveProps as ve, Teleport as ot, useSlots as F, onBeforeMount as nt, createSlots as it } from "vue";
+const rt = ["teal", "white"], st = /* @__PURE__ */ $({
+  __name: "VJoySpinner",
   props: {
     color: {
       type: String,
       validator(e) {
-        return Q.includes(e);
+        return rt.includes(e);
       }
     }
   },
   setup(e) {
-    return (l, a) => (o(), d("div", {
-      class: b(["joy-spinner", `joy-spinner_${e.color}`])
+    return (t, l) => (m(), p("div", {
+      class: k(["joy-spinner", `joy-spinner_${e.color}`])
     }, null, 2));
   }
 });
-const _ = (e, l) => {
-  const a = e.__vccOpts || e;
-  for (const [t, i] of l)
-    a[t] = i;
-  return a;
-}, P = /* @__PURE__ */ _(X, [["__scopeId", "data-v-b633f633"]]), Y = ["primary", "secondary"], ee = ["neutral", "success", "info", "warning", "error"], te = ["main", "admin", "ghost"], ae = [...Y, ...te], le = ["large", "medium", "small", "xsmall", "xxsmall"], ne = ["xxsmall", "xsmall", "small"], oe = ["name", "size"], ie = { class: "joy-button--slot" }, de = /* @__PURE__ */ p({
-  __name: "JoyButton",
+const V = (e, t) => {
+  const l = e.__vccOpts || e;
+  for (const [a, o] of t)
+    l[a] = o;
+  return l;
+}, Ne = /* @__PURE__ */ V(st, [["__scopeId", "data-v-616a29d0"]]), ut = ["primary", "secondary"], dt = ["neutral", "success", "info", "warning", "error"], ct = ["main", "admin", "ghost"], ft = [...ut, ...ct], yt = ["large", "medium", "small", "xsmall", "xxsmall"], mt = ["name", "size"], vt = { class: "joy-button--slot" }, pt = /* @__PURE__ */ $({
+  __name: "VJoyButton",
   props: {
     /**
      * If you only need a button with an icon. To keep your component accessible, you can give a text as slot, it will be used as title and aria-label.
@@ -43,7 +43,7 @@ const _ = (e, l) => {
       type: String,
       default: "primary",
       validator(e) {
-        return ae.includes(e);
+        return ft.includes(e);
       }
     },
     /** Button or Link size */
@@ -51,23 +51,24 @@ const _ = (e, l) => {
       type: String,
       default: "medium",
       validator(e) {
-        return le.includes(e);
-      }
-    },
-    /** Override the icon size. Default to xsmall */
-    iconSize: {
-      type: String,
-      default: "xsmall",
-      validator(e) {
-        return ne.includes(e);
+        return yt.includes(e);
       }
     }
   },
   setup(e) {
-    const l = e, a = O(), t = V(() => ["white", "ghost", "secondary"].includes(l.variant) ? "teal" : "white");
-    return (i, s) => (o(), J(E(m(a).href ? "a" : "button"), {
-      disabled: e.loading || m(a).disabled,
-      class: b([
+    const t = e, l = De(), a = I(() => {
+      switch (t.size) {
+        case "xxsmall":
+          return "xsmall";
+        case "xsmall":
+          return "xxsmall";
+        case "small":
+          return "xsmall";
+      }
+    }), o = I(() => ["white", "ghost", "secondary"].includes(t.variant) ? "teal" : "white");
+    return (r, s) => (m(), P(de(_(l).href ? "a" : "button"), {
+      disabled: e.loading || _(l).disabled,
+      class: k([
         "joy-button",
         `joy-button_${e.variant}`,
         `joy-button_${e.size}`,
@@ -77,27 +78,27 @@ const _ = (e, l) => {
         }
       ])
     }, {
-      default: q(() => [
-        e.icon ? (o(), d("joy-icon", {
+      default: L(() => [
+        e.icon ? (m(), p("joy-icon", {
           key: 0,
           name: e.icon,
-          size: e.iconSize,
+          size: _(a),
           lazy: !1
-        }, null, 8, oe)) : y("", !0),
-        e.loading ? (o(), J(P, {
+        }, null, 8, mt)) : w("", !0),
+        e.loading ? (m(), P(Ne, {
           key: 1,
-          color: m(t)
-        }, null, 8, ["color"])) : y("", !0),
-        u("span", ie, [
-          c(i.$slots, "default", {}, void 0, !0)
+          color: _(o)
+        }, null, 8, ["color"])) : w("", !0),
+        h("span", vt, [
+          b(r.$slots, "default", {}, void 0, !0)
         ])
       ]),
       _: 3
     }, 8, ["disabled", "class"]));
   }
 });
-const ue = /* @__PURE__ */ _(de, [["__scopeId", "data-v-958cc680"]]), se = ["aria-checked", "aria-hidden"], re = ["id", "name", "disabled", "checked", "required", "aria-checked", "value", "indeterminate"], ce = { class: "joy-checkbox__content-wrapper" }, ye = { class: "joy-checkbox__content" }, me = /* @__PURE__ */ p({
-  __name: "JoyCheckbox",
+const ht = /* @__PURE__ */ V(pt, [["__scopeId", "data-v-62aca3ad"]]), bt = ["aria-checked", "aria-hidden"], gt = ["id", "name", "disabled", "checked", "required", "aria-checked", "value", "indeterminate"], _t = { class: "joy-checkbox__content-wrapper" }, wt = { class: "joy-checkbox__content" }, St = /* @__PURE__ */ $({
+  __name: "VJoyCheckbox",
   props: {
     /** Can't be used in addition of v-model. See usage : https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/checkbox#indeterminate_state_checkboxes */
     indeterminate: {
@@ -135,32 +136,32 @@ const ue = /* @__PURE__ */ _(de, [["__scopeId", "data-v-958cc680"]]), se = ["ari
     }
   },
   emits: ["update:checked"],
-  setup(e, { expose: l, emit: a }) {
-    const t = e, i = S(), s = S(t.indeterminate), f = {
+  setup(e, { expose: t, emit: l }) {
+    const a = e, o = g(), r = g(a.indeterminate), s = {
       onChange: (n) => {
-        const r = n.target.checked;
-        s.value = !1, a("update:checked", r);
+        const u = n.target.checked;
+        r.value = !1, l("update:checked", u);
       }
     };
-    return l({
-      isIndeterminate: s
-    }), (n, r) => (o(), d("div", {
+    return t({
+      isIndeterminate: r
+    }), (n, u) => (m(), p("div", {
       "aria-checked": e.checked,
       "aria-hidden": e.disabled
     }, [
-      u("label", {
-        class: b([
+      h("label", {
+        class: k([
           "joy-checkbox",
           {
             "joy-checkbox__checked": e.checked,
-            "joy-checkbox__indeterminate": s.value
+            "joy-checkbox__indeterminate": r.value
           }
         ])
       }, [
-        u("input", {
+        h("input", {
           id: e.id,
           ref_key: "input",
-          ref: i,
+          ref: o,
           type: "checkbox",
           class: "joy-checkbox__input",
           role: "checkbox",
@@ -170,39 +171,39 @@ const ue = /* @__PURE__ */ _(de, [["__scopeId", "data-v-958cc680"]]), se = ["ari
           required: e.required,
           "aria-checked": e.checked,
           value: e.value,
-          indeterminate: s.value,
-          onChange: r[0] || (r[0] = //@ts-ignore
-          (...g) => f.onChange && f.onChange(...g))
-        }, null, 40, re),
-        u("div", ce, [
-          c(n.$slots, "default", {}, () => [
-            B($(e.label), 1)
+          indeterminate: r.value,
+          onChange: u[0] || (u[0] = //@ts-ignore
+          (...y) => s.onChange && s.onChange(...y))
+        }, null, 40, gt),
+        h("div", _t, [
+          b(n.$slots, "default", {}, () => [
+            T(O(e.label), 1)
           ], !0),
-          u("div", ye, [
-            c(n.$slots, "checkbox-content", {}, void 0, !0)
+          h("div", wt, [
+            b(n.$slots, "checkbox-content", {}, void 0, !0)
           ])
         ])
       ], 2)
-    ], 8, se));
+    ], 8, bt));
   }
 });
-const T = /* @__PURE__ */ _(me, [["__scopeId", "data-v-7251a11b"]]), H = (e) => (z("data-v-47a76942"), e = e(), M(), e), fe = { class: "joy-counter" }, ve = { class: "joy-counter__wrapper" }, be = ["aria-label", "disabled"], ge = /* @__PURE__ */ H(() => /* @__PURE__ */ u("joy-icon", {
+const pe = /* @__PURE__ */ V(St, [["__scopeId", "data-v-d6496829"]]), He = (e) => (ee("data-v-01418e7e"), e = e(), te(), e), kt = { class: "joy-counter" }, jt = { class: "joy-counter__wrapper" }, $t = ["aria-label", "disabled"], Vt = /* @__PURE__ */ He(() => /* @__PURE__ */ h("joy-icon", {
   name: "minus",
   color: "teal",
   lazy: !1
-}, null, -1)), he = [
-  ge
-], pe = ["id", "min", "max", "aria-invalid", "name", "required", "value"], _e = ["aria-label", "disabled"], ke = /* @__PURE__ */ H(() => /* @__PURE__ */ u("joy-icon", {
+}, null, -1)), xt = [
+  Vt
+], It = ["id", "min", "max", "aria-invalid", "name", "required", "value"], Ot = ["aria-label", "disabled"], Lt = /* @__PURE__ */ He(() => /* @__PURE__ */ h("joy-icon", {
   name: "add",
   lazy: !1,
   color: "teal"
-}, null, -1)), je = [
-  ke
-], Se = {
+}, null, -1)), Et = [
+  Lt
+], Bt = {
   key: 0,
   class: "joy-counter_error"
-}, $e = /* @__PURE__ */ p({
-  __name: "JoyCounter",
+}, Ct = /* @__PURE__ */ $({
+  __name: "VJoyCounter",
   props: {
     /** Removes any interactivity */
     disabled: {
@@ -267,102 +268,963 @@ const T = /* @__PURE__ */ _(me, [["__scopeId", "data-v-7251a11b"]]), H = (e) =>
     }
   },
   emits: ["update:modelValue"],
-  setup(e, { expose: l, emit: a }) {
-    const t = e, i = S(!1);
-    function s() {
-      const v = r(!1);
-      v >= 0 ? a("update:modelValue", v <= t.min ? t.min : v) : a("update:modelValue", 0), n();
+  setup(e, { expose: t, emit: l }) {
+    const a = e, o = g(!1);
+    function r() {
+      const d = u(!1);
+      d >= 0 ? l("update:modelValue", d <= a.min ? a.min : d) : l("update:modelValue", 0), n();
     }
-    function f() {
-      const v = r();
-      t.max && v <= t.max ? a("update:modelValue", v >= t.max ? t.max : v) : t.max && v > t.max ? a("update:modelValue", t.max) : a("update:modelValue", v), n();
+    function s() {
+      const d = u();
+      a.max && d <= a.max ? l("update:modelValue", d >= a.max ? a.max : d) : a.max && d > a.max ? l("update:modelValue", a.max) : l("update:modelValue", d), n();
     }
     function n() {
-      i.value = !g();
+      o.value = !y();
     }
-    function r(v = !0) {
-      const h = t.step.toString().split("."), x = h.length === 2 ? h[1].length : 0;
-      return parseFloat(v ? (t.modelValue + t.step).toFixed(x) : (t.modelValue - t.step).toFixed(x));
+    function u(d = !0) {
+      const f = a.step.toString().split("."), S = f.length === 2 ? f[1].length : 0;
+      return parseFloat(d ? (a.modelValue + a.step).toFixed(S) : (a.modelValue - a.step).toFixed(S));
     }
-    function g() {
-      return k() && I();
+    function y() {
+      return c() && v();
     }
-    function k() {
-      return !t.max || t.modelValue <= t.max;
+    function c() {
+      return !a.max || a.modelValue <= a.max;
     }
-    function I() {
-      return t.min <= t.modelValue;
+    function v() {
+      return a.min <= a.modelValue;
     }
-    const j = {
-      onInput: (v) => {
-        a("update:modelValue", +v.target.value || 0), i.value = !1;
+    const i = {
+      onInput: (d) => {
+        l("update:modelValue", +d.target.value || 0), o.value = !1;
       },
       onBlur: () => {
         n();
       }
     };
-    return l({
-      props: t
-    }), (v, h) => (o(), d("div", fe, [
-      e.label ? (o(), J(m(C), {
+    return t({
+      props: a
+    }), (d, f) => (m(), p("div", kt, [
+      e.label ? (m(), P(_(H), {
         key: 0,
         for: e.id,
         required: e.required && e.requiredMark,
         "optional-label": e.optionalLabel,
         size: e.labelSize
       }, {
-        default: q(() => [
-          c(v.$slots, "default", {}, () => [
-            B($(e.label), 1)
+        default: L(() => [
+          b(d.$slots, "default", {}, () => [
+            T(O(e.label), 1)
           ], !0)
         ]),
         _: 3
-      }, 8, ["for", "required", "optional-label", "size"])) : y("", !0),
-      u("div", ve, [
-        u("button", {
+      }, 8, ["for", "required", "optional-label", "size"])) : w("", !0),
+      h("div", jt, [
+        h("button", {
           class: "joy-counter__decrement",
           type: "button",
           "aria-label": e.labelDecrement,
           disabled: e.modelValue <= e.min,
-          onClick: s
-        }, he, 8, be),
-        u("input", L({
+          onClick: r
+        }, xt, 8, $t),
+        h("input", K({
           id: e.id,
           ref: "input",
           type: "number",
-          class: { "joy-counter__invalid": e.invalid || i.value },
+          class: { "joy-counter__invalid": e.invalid || o.value },
           min: e.min,
           max: e.max,
-          "aria-invalid": e.invalid || i.value,
+          "aria-invalid": e.invalid || o.value,
           name: e.name,
           required: e.required,
           step: "any",
           value: e.modelValue
-        }, v.$attrs, {
-          onInput: h[0] || (h[0] = //@ts-ignore
-          (...x) => j.onInput && j.onInput(...x)),
-          onBlur: h[1] || (h[1] = //@ts-ignore
-          (...x) => j.onBlur && j.onBlur(...x))
-        }), null, 16, pe),
-        u("button", {
+        }, d.$attrs, {
+          onInput: f[0] || (f[0] = //@ts-ignore
+          (...S) => i.onInput && i.onInput(...S)),
+          onBlur: f[1] || (f[1] = //@ts-ignore
+          (...S) => i.onBlur && i.onBlur(...S))
+        }), null, 16, It),
+        h("button", {
           class: "joy-counter__increment",
           type: "button",
           "aria-label": e.labelIncrement,
           disabled: e.max ? e.modelValue >= e.max : !1,
-          onClick: f
-        }, je, 8, _e),
-        e.invalid && e.errorMessage ? (o(), d("div", Se, [
-          R(m(G), { "no-html-error-text": e.errorMessage }, null, 8, ["no-html-error-text"])
-        ])) : y("", !0)
+          onClick: s
+        }, Et, 8, Ot),
+        e.invalid && e.errorMessage ? (m(), p("div", Bt, [
+          ce(_(Ye), { "no-html-error-text": e.errorMessage }, null, 8, ["no-html-error-text"])
+        ])) : w("", !0)
       ])
     ]));
   }
 });
-const xe = /* @__PURE__ */ _($e, [["__scopeId", "data-v-47a76942"]]), Ie = (e) => (z("data-v-d693f93c"), e = e(), M(), e), qe = ["aria-hidden"], Be = /* @__PURE__ */ Ie(() => /* @__PURE__ */ u("joy-icon", {
+const Pt = /* @__PURE__ */ V(Ct, [["__scopeId", "data-v-01418e7e"]]);
+var ge;
+const he = typeof window < "u", We = (e) => typeof e == "string", z = () => {
+}, X = he && ((ge = window == null ? void 0 : window.navigator) == null ? void 0 : ge.userAgent) && /iP(ad|hone|od)/.test(window.navigator.userAgent);
+function B(e) {
+  return typeof e == "function" ? e() : _(e);
+}
+function Fe(e, t) {
+  function l(...a) {
+    return new Promise((o, r) => {
+      Promise.resolve(e(() => t.apply(this, a), { fn: t, thisArg: this, args: a })).then(o).catch(r);
+    });
+  }
+  return l;
+}
+function qt(e, t = {}) {
+  let l, a, o = z;
+  const r = (n) => {
+    clearTimeout(n), o(), o = z;
+  };
+  return (n) => {
+    const u = B(e), y = B(t.maxWait);
+    return l && r(l), u <= 0 || y !== void 0 && y <= 0 ? (a && (r(a), a = null), Promise.resolve(n())) : new Promise((c, v) => {
+      o = t.rejectOnCancel ? v : c, y && !a && (a = setTimeout(() => {
+        l && r(l), a = null, c(n());
+      }, y)), l = setTimeout(() => {
+        a && r(a), a = null, c(n());
+      }, u);
+    });
+  };
+}
+function Jt(e, t = !0, l = !0, a = !1) {
+  let o = 0, r, s = !0, n = z, u;
+  const y = () => {
+    r && (clearTimeout(r), r = void 0, n(), n = z);
+  };
+  return (v) => {
+    const i = B(e), d = Date.now() - o, f = () => u = v();
+    return y(), i <= 0 ? (o = Date.now(), f()) : (d > i && (l || !s) ? (o = Date.now(), f()) : t && (u = new Promise((S, j) => {
+      n = a ? j : S, r = setTimeout(() => {
+        o = Date.now(), s = !0, S(f()), y();
+      }, Math.max(0, i - d));
+    })), !l && !r && (r = setTimeout(() => s = !0, i)), s = !1, u);
+  };
+}
+const R = {
+  mounted: "mounted",
+  updated: "updated",
+  unmounted: "unmounted"
+};
+function Tt(e) {
+  return e;
+}
+function Q(e) {
+  return et() ? (tt(e), !0) : !1;
+}
+function zt(e, t = 200, l = {}) {
+  return Fe(qt(t, l), e);
+}
+function At(e, t = 200, l = !1, a = !0, o = !1) {
+  return Fe(Jt(t, l, a, o), e);
+}
+function Dt(e) {
+  return typeof e == "function" ? I(e) : g(e);
+}
+function Mt(e, t = !0) {
+  lt() ? W(e) : t ? e() : Me(e);
+}
+function U(e) {
+  var t;
+  const l = B(e);
+  return (t = l == null ? void 0 : l.$el) != null ? t : l;
+}
+const Ue = he ? window : void 0;
+function oe(...e) {
+  let t, l, a, o;
+  if (We(e[0]) || Array.isArray(e[0]) ? ([l, a, o] = e, t = Ue) : [t, l, a, o] = e, !t)
+    return z;
+  Array.isArray(l) || (l = [l]), Array.isArray(a) || (a = [a]);
+  const r = [], s = () => {
+    r.forEach((c) => c()), r.length = 0;
+  }, n = (c, v, i, d) => (c.addEventListener(v, i, d), () => c.removeEventListener(v, i, d)), u = q(() => [U(t), B(o)], ([c, v]) => {
+    s(), c && r.push(...l.flatMap((i) => a.map((d) => n(c, i, d, v))));
+  }, { immediate: !0, flush: "post" }), y = () => {
+    u(), s();
+  };
+  return Q(y), y;
+}
+let _e = !1;
+function Rt(e, t, l = {}) {
+  const { window: a = Ue, ignore: o = [], capture: r = !0, detectIframe: s = !1 } = l;
+  if (!a)
+    return;
+  X && !_e && (_e = !0, Array.from(a.document.body.children).forEach((i) => i.addEventListener("click", z)));
+  let n = !0;
+  const u = (i) => o.some((d) => {
+    if (typeof d == "string")
+      return Array.from(a.document.querySelectorAll(d)).some((f) => f === i.target || i.composedPath().includes(f));
+    {
+      const f = U(d);
+      return f && (i.target === f || i.composedPath().includes(f));
+    }
+  }), c = [
+    oe(a, "click", (i) => {
+      const d = U(e);
+      if (!(!d || d === i.target || i.composedPath().includes(d))) {
+        if (i.detail === 0 && (n = !u(i)), !n) {
+          n = !0;
+          return;
+        }
+        t(i);
+      }
+    }, { passive: !0, capture: r }),
+    oe(a, "pointerdown", (i) => {
+      const d = U(e);
+      d && (n = !i.composedPath().includes(d) && !u(i));
+    }, { passive: !0 }),
+    s && oe(a, "blur", (i) => {
+      var d;
+      const f = U(e);
+      ((d = a.document.activeElement) == null ? void 0 : d.tagName) === "IFRAME" && !(f != null && f.contains(a.document.activeElement)) && t(i);
+    })
+  ].filter(Boolean);
+  return () => c.forEach((i) => i());
+}
+const ne = typeof globalThis < "u" ? globalThis : typeof window < "u" ? window : typeof global < "u" ? global : typeof self < "u" ? self : {}, ie = "__vueuse_ssr_handlers__";
+ne[ie] = ne[ie] || {};
+ne[ie];
+var we;
+(function(e) {
+  e.UP = "UP", e.RIGHT = "RIGHT", e.DOWN = "DOWN", e.LEFT = "LEFT", e.NONE = "NONE";
+})(we || (we = {}));
+var Nt = Object.defineProperty, Se = Object.getOwnPropertySymbols, Ht = Object.prototype.hasOwnProperty, Wt = Object.prototype.propertyIsEnumerable, ke = (e, t, l) => t in e ? Nt(e, t, { enumerable: !0, configurable: !0, writable: !0, value: l }) : e[t] = l, Ft = (e, t) => {
+  for (var l in t || (t = {}))
+    Ht.call(t, l) && ke(e, l, t[l]);
+  if (Se)
+    for (var l of Se(t))
+      Wt.call(t, l) && ke(e, l, t[l]);
+  return e;
+};
+const Ut = {
+  easeInSine: [0.12, 0, 0.39, 0],
+  easeOutSine: [0.61, 1, 0.88, 1],
+  easeInOutSine: [0.37, 0, 0.63, 1],
+  easeInQuad: [0.11, 0, 0.5, 0],
+  easeOutQuad: [0.5, 1, 0.89, 1],
+  easeInOutQuad: [0.45, 0, 0.55, 1],
+  easeInCubic: [0.32, 0, 0.67, 0],
+  easeOutCubic: [0.33, 1, 0.68, 1],
+  easeInOutCubic: [0.65, 0, 0.35, 1],
+  easeInQuart: [0.5, 0, 0.75, 0],
+  easeOutQuart: [0.25, 1, 0.5, 1],
+  easeInOutQuart: [0.76, 0, 0.24, 1],
+  easeInQuint: [0.64, 0, 0.78, 0],
+  easeOutQuint: [0.22, 1, 0.36, 1],
+  easeInOutQuint: [0.83, 0, 0.17, 1],
+  easeInExpo: [0.7, 0, 0.84, 0],
+  easeOutExpo: [0.16, 1, 0.3, 1],
+  easeInOutExpo: [0.87, 0, 0.13, 1],
+  easeInCirc: [0.55, 0, 1, 0.45],
+  easeOutCirc: [0, 0.55, 0.45, 1],
+  easeInOutCirc: [0.85, 0, 0.15, 1],
+  easeInBack: [0.36, 0, 0.66, -0.56],
+  easeOutBack: [0.34, 1.56, 0.64, 1],
+  easeInOutBack: [0.68, -0.6, 0.32, 1.6]
+};
+Ft({
+  linear: Tt
+}, Ut);
+const Gt = /* @__PURE__ */ $({
+  name: "OnClickOutside",
+  props: ["as", "options"],
+  emits: ["trigger"],
+  setup(e, { slots: t, emit: l }) {
+    const a = g();
+    return Rt(a, (o) => {
+      l("trigger", o);
+    }, e.options), () => {
+      if (t.default)
+        return at(e.as || "div", { ref: a }, t.default());
+    };
+  }
+});
+function C(e) {
+  var t;
+  const l = B(e);
+  return (t = l == null ? void 0 : l.$el) != null ? t : l;
+}
+const N = he ? window : void 0;
+function A(...e) {
+  let t, l, a, o;
+  if (We(e[0]) || Array.isArray(e[0]) ? ([l, a, o] = e, t = N) : [t, l, a, o] = e, !t)
+    return z;
+  Array.isArray(l) || (l = [l]), Array.isArray(a) || (a = [a]);
+  const r = [], s = () => {
+    r.forEach((c) => c()), r.length = 0;
+  }, n = (c, v, i, d) => (c.addEventListener(v, i, d), () => c.removeEventListener(v, i, d)), u = q(() => [C(t), B(o)], ([c, v]) => {
+    s(), c && r.push(...l.flatMap((i) => a.map((d) => n(c, i, d, v))));
+  }, { immediate: !0, flush: "post" }), y = () => {
+    u(), s();
+  };
+  return Q(y), y;
+}
+let je = !1;
+function $e(e, t, l = {}) {
+  const { window: a = N, ignore: o = [], capture: r = !0, detectIframe: s = !1 } = l;
+  if (!a)
+    return;
+  X && !je && (je = !0, Array.from(a.document.body.children).forEach((i) => i.addEventListener("click", z)));
+  let n = !0;
+  const u = (i) => o.some((d) => {
+    if (typeof d == "string")
+      return Array.from(a.document.querySelectorAll(d)).some((f) => f === i.target || i.composedPath().includes(f));
+    {
+      const f = C(d);
+      return f && (i.target === f || i.composedPath().includes(f));
+    }
+  }), c = [
+    A(a, "click", (i) => {
+      const d = C(e);
+      if (!(!d || d === i.target || i.composedPath().includes(d))) {
+        if (i.detail === 0 && (n = !u(i)), !n) {
+          n = !0;
+          return;
+        }
+        t(i);
+      }
+    }, { passive: !0, capture: r }),
+    A(a, "pointerdown", (i) => {
+      const d = C(e);
+      d && (n = !i.composedPath().includes(d) && !u(i));
+    }, { passive: !0 }),
+    s && A(a, "blur", (i) => {
+      var d;
+      const f = C(e);
+      ((d = a.document.activeElement) == null ? void 0 : d.tagName) === "IFRAME" && !(f != null && f.contains(a.document.activeElement)) && t(i);
+    })
+  ].filter(Boolean);
+  return () => c.forEach((i) => i());
+}
+R.mounted + "", R.unmounted + "";
+const Kt = (e) => typeof e == "function" ? e : typeof e == "string" ? (t) => t.key === e : Array.isArray(e) ? (t) => e.includes(t.key) : () => !0;
+function Ve(...e) {
+  let t, l, a = {};
+  e.length === 3 ? (t = e[0], l = e[1], a = e[2]) : e.length === 2 ? typeof e[1] == "object" ? (t = !0, l = e[0], a = e[1]) : (t = e[0], l = e[1]) : (t = !0, l = e[0]);
+  const { target: o = N, eventName: r = "keydown", passive: s = !1 } = a, n = Kt(t);
+  return A(o, r, (y) => {
+    n(y) && l(y);
+  }, s);
+}
+var Qt = Object.defineProperty, xe = Object.getOwnPropertySymbols, Zt = Object.prototype.hasOwnProperty, Yt = Object.prototype.propertyIsEnumerable, Ie = (e, t, l) => t in e ? Qt(e, t, { enumerable: !0, configurable: !0, writable: !0, value: l }) : e[t] = l, Xt = (e, t) => {
+  for (var l in t || (t = {}))
+    Zt.call(t, l) && Ie(e, l, t[l]);
+  if (xe)
+    for (var l of xe(t))
+      Yt.call(t, l) && Ie(e, l, t[l]);
+  return e;
+};
+R.mounted + "";
+const el = 500;
+function Oe(e, t, l) {
+  var a, o;
+  const r = I(() => C(e));
+  let s;
+  function n() {
+    s && (clearTimeout(s), s = void 0);
+  }
+  function u(c) {
+    var v, i, d, f;
+    (v = l == null ? void 0 : l.modifiers) != null && v.self && c.target !== r.value || (n(), (i = l == null ? void 0 : l.modifiers) != null && i.prevent && c.preventDefault(), (d = l == null ? void 0 : l.modifiers) != null && d.stop && c.stopPropagation(), s = setTimeout(() => t(c), (f = l == null ? void 0 : l.delay) != null ? f : el));
+  }
+  const y = {
+    capture: (a = l == null ? void 0 : l.modifiers) == null ? void 0 : a.capture,
+    once: (o = l == null ? void 0 : l.modifiers) == null ? void 0 : o.once
+  };
+  A(r, "pointerdown", u, y), A(r, "pointerup", n, y), A(r, "pointerleave", n, y);
+}
+R.mounted + "";
+const re = typeof globalThis < "u" ? globalThis : typeof window < "u" ? window : typeof global < "u" ? global : typeof self < "u" ? self : {}, se = "__vueuse_ssr_handlers__";
+re[se] = re[se] || {};
+re[se];
+function Ge(e, t = !1) {
+  const l = g(), a = () => l.value = Boolean(e());
+  return a(), Mt(a, t), l;
+}
+function tl(e, t = {}) {
+  const l = t ? t.delayEnter : 0, a = t ? t.delayLeave : 0, o = g(!1);
+  let r;
+  const s = (n) => {
+    const u = n ? l : a;
+    r && (clearTimeout(r), r = void 0), u ? r = setTimeout(() => o.value = n, u) : o.value = n;
+  };
+  return window && (A(e, "mouseenter", () => s(!0), { passive: !0 }), A(e, "mouseleave", () => s(!1), { passive: !0 })), o;
+}
+R.mounted + "";
+var Le = Object.getOwnPropertySymbols, ll = Object.prototype.hasOwnProperty, al = Object.prototype.propertyIsEnumerable, ol = (e, t) => {
+  var l = {};
+  for (var a in e)
+    ll.call(e, a) && t.indexOf(a) < 0 && (l[a] = e[a]);
+  if (e != null && Le)
+    for (var a of Le(e))
+      t.indexOf(a) < 0 && al.call(e, a) && (l[a] = e[a]);
+  return l;
+};
+function nl(e, t, l = {}) {
+  const a = l, { window: o = N } = a, r = ol(a, ["window"]);
+  let s;
+  const n = Ge(() => o && "ResizeObserver" in o), u = () => {
+    s && (s.disconnect(), s = void 0);
+  }, y = q(() => C(e), (v) => {
+    u(), n.value && o && v && (s = new ResizeObserver(t), s.observe(v, r));
+  }, { immediate: !0, flush: "post" }), c = () => {
+    u(), y();
+  };
+  return Q(c), {
+    isSupported: n,
+    stop: c
+  };
+}
+function il(e, t = { width: 0, height: 0 }, l = {}) {
+  const { window: a = N, box: o = "content-box" } = l, r = I(() => {
+    var u, y;
+    return (y = (u = C(e)) == null ? void 0 : u.namespaceURI) == null ? void 0 : y.includes("svg");
+  }), s = g(t.width), n = g(t.height);
+  return nl(e, ([u]) => {
+    const y = o === "border-box" ? u.borderBoxSize : o === "content-box" ? u.contentBoxSize : u.devicePixelContentBoxSize;
+    if (a && r.value) {
+      const c = C(e);
+      if (c) {
+        const v = a.getComputedStyle(c);
+        s.value = parseFloat(v.width), n.value = parseFloat(v.height);
+      }
+    } else if (y) {
+      const c = Array.isArray(y) ? y : [y];
+      s.value = c.reduce((v, { inlineSize: i }) => v + i, 0), n.value = c.reduce((v, { blockSize: i }) => v + i, 0);
+    } else
+      s.value = u.contentRect.width, n.value = u.contentRect.height;
+  }, l), q(() => C(e), (u) => {
+    s.value = u ? t.width : 0, n.value = u ? t.height : 0;
+  }), {
+    width: s,
+    height: n
+  };
+}
+R.mounted + "";
+function Ee(e, { window: t = N, scrollTarget: l } = {}) {
+  const a = g(!1), o = () => {
+    if (!t)
+      return;
+    const r = t.document, s = C(e);
+    if (!s)
+      a.value = !1;
+    else {
+      const n = s.getBoundingClientRect();
+      a.value = n.top <= (t.innerHeight || r.documentElement.clientHeight) && n.left <= (t.innerWidth || r.documentElement.clientWidth) && n.bottom >= 0 && n.right >= 0;
+    }
+  };
+  return q(() => C(e), () => o(), { immediate: !0, flush: "post" }), t && A(l || t, "scroll", o, {
+    capture: !1,
+    passive: !0
+  }), a;
+}
+R.mounted + "";
+const Be = 1;
+function ue(e, t = {}) {
+  const {
+    throttle: l = 0,
+    idle: a = 200,
+    onStop: o = z,
+    onScroll: r = z,
+    offset: s = {
+      left: 0,
+      right: 0,
+      top: 0,
+      bottom: 0
+    },
+    eventListenerOptions: n = {
+      capture: !1,
+      passive: !0
+    },
+    behavior: u = "auto"
+  } = t, y = g(0), c = g(0), v = I({
+    get() {
+      return y.value;
+    },
+    set(x) {
+      d(x, void 0);
+    }
+  }), i = I({
+    get() {
+      return c.value;
+    },
+    set(x) {
+      d(void 0, x);
+    }
+  });
+  function d(x, J) {
+    var M, D, be;
+    const ae = B(e);
+    ae && ((be = ae instanceof Document ? document.body : ae) == null || be.scrollTo({
+      top: (M = B(J)) != null ? M : i.value,
+      left: (D = B(x)) != null ? D : v.value,
+      behavior: B(u)
+    }));
+  }
+  const f = g(!1), S = Y({
+    left: !0,
+    right: !1,
+    top: !0,
+    bottom: !1
+  }), j = Y({
+    left: !1,
+    right: !1,
+    top: !1,
+    bottom: !1
+  }), Z = (x) => {
+    f.value && (f.value = !1, j.left = !1, j.right = !1, j.top = !1, j.bottom = !1, o(x));
+  }, le = zt(Z, l + a), E = (x) => {
+    const J = x.target === document ? x.target.documentElement : x.target, M = J.scrollLeft;
+    j.left = M < y.value, j.right = M > c.value, S.left = M <= 0 + (s.left || 0), S.right = M + J.clientWidth >= J.scrollWidth - (s.right || 0) - Be, y.value = M;
+    let D = J.scrollTop;
+    x.target === document && !D && (D = document.body.scrollTop), j.top = D < c.value, j.bottom = D > c.value, S.top = D <= 0 + (s.top || 0), S.bottom = D + J.clientHeight >= J.scrollHeight - (s.bottom || 0) - Be, c.value = D, f.value = !0, le(x), r(x);
+  };
+  return A(e, "scroll", l ? At(E, l, !0, !1) : E, n), A(e, "scrollend", Z, n), {
+    x: v,
+    y: i,
+    isScrolling: f,
+    arrivedState: S,
+    directions: j
+  };
+}
+var rl = Object.defineProperty, sl = Object.defineProperties, ul = Object.getOwnPropertyDescriptors, Ce = Object.getOwnPropertySymbols, dl = Object.prototype.hasOwnProperty, cl = Object.prototype.propertyIsEnumerable, Pe = (e, t, l) => t in e ? rl(e, t, { enumerable: !0, configurable: !0, writable: !0, value: l }) : e[t] = l, qe = (e, t) => {
+  for (var l in t || (t = {}))
+    dl.call(t, l) && Pe(e, l, t[l]);
+  if (Ce)
+    for (var l of Ce(t))
+      cl.call(t, l) && Pe(e, l, t[l]);
+  return e;
+}, fl = (e, t) => sl(e, ul(t));
+function Je(e, t, l = {}) {
+  var a, o;
+  const r = (a = l.direction) != null ? a : "bottom", s = Y(ue(e, fl(qe({}, l), {
+    offset: qe({
+      [r]: (o = l.distance) != null ? o : 0
+    }, l.offset)
+  })));
+  q(() => s.arrivedState[r], async (n) => {
+    var u, y;
+    if (n) {
+      const c = B(e), v = {
+        height: (u = c == null ? void 0 : c.scrollHeight) != null ? u : 0,
+        width: (y = c == null ? void 0 : c.scrollWidth) != null ? y : 0
+      };
+      await t(s), l.preserveScrollPosition && c && Me(() => {
+        c.scrollTo({
+          top: c.scrollHeight - v.height,
+          left: c.scrollWidth - v.width
+        });
+      });
+    }
+  });
+}
+R.mounted + "";
+function Te(e, t, l = {}) {
+  const {
+    root: a,
+    rootMargin: o = "0px",
+    threshold: r = 0.1,
+    window: s = N
+  } = l, n = Ge(() => s && "IntersectionObserver" in s);
+  let u = z;
+  const y = n.value ? q(() => ({
+    el: C(e),
+    root: C(a)
+  }), ({ el: v, root: i }) => {
+    if (u(), !v)
+      return;
+    const d = new IntersectionObserver(t, {
+      root: i,
+      rootMargin: o,
+      threshold: r
+    });
+    d.observe(v), u = () => {
+      d.disconnect(), u = z;
+    };
+  }, { immediate: !0, flush: "post" }) : z, c = () => {
+    u(), y();
+  };
+  return Q(c), {
+    isSupported: n,
+    stop: c
+  };
+}
+R.mounted + "";
+var yl = Object.defineProperty, ml = Object.defineProperties, vl = Object.getOwnPropertyDescriptors, ze = Object.getOwnPropertySymbols, pl = Object.prototype.hasOwnProperty, hl = Object.prototype.propertyIsEnumerable, Ae = (e, t, l) => t in e ? yl(e, t, { enumerable: !0, configurable: !0, writable: !0, value: l }) : e[t] = l, bl = (e, t) => {
+  for (var l in t || (t = {}))
+    pl.call(t, l) && Ae(e, l, t[l]);
+  if (ze)
+    for (var l of ze(t))
+      hl.call(t, l) && Ae(e, l, t[l]);
+  return e;
+}, gl = (e, t) => ml(e, vl(t));
+R.mounted + "";
+function Ke(e) {
+  const t = window.getComputedStyle(e);
+  if (t.overflowX === "scroll" || t.overflowY === "scroll" || t.overflowX === "auto" && e.clientHeight < e.scrollHeight || t.overflowY === "auto" && e.clientWidth < e.scrollWidth)
+    return !0;
+  {
+    const l = e.parentNode;
+    return !l || l.tagName === "BODY" ? !1 : Ke(l);
+  }
+}
+function _l(e) {
+  const t = e || window.event, l = t.target;
+  return Ke(l) ? !1 : t.touches.length > 1 ? !0 : (t.preventDefault && t.preventDefault(), !1);
+}
+function wl(e, t = !1) {
+  const l = g(t);
+  let a = null, o;
+  q(Dt(e), (n) => {
+    if (n) {
+      const u = n;
+      o = u.style.overflow, l.value && (u.style.overflow = "hidden");
+    }
+  }, {
+    immediate: !0
+  });
+  const r = () => {
+    const n = B(e);
+    !n || l.value || (X && (a = A(n, "touchmove", (u) => {
+      _l(u);
+    }, { passive: !1 })), n.style.overflow = "hidden", l.value = !0);
+  }, s = () => {
+    const n = B(e);
+    !n || !l.value || (X && (a == null || a()), n.style.overflow = o, l.value = !1);
+  };
+  return Q(s), I({
+    get() {
+      return l.value;
+    },
+    set(n) {
+      n ? r() : s();
+    }
+  });
+}
+const Sl = () => {
+  let e = !1;
+  const t = g(!1);
+  return (l, a) => {
+    if (t.value = a.value, e)
+      return;
+    e = !0;
+    const o = wl(l, a.value);
+    q(t, (r) => o.value = r);
+  };
+};
+Sl();
+const Qe = ["medium", "small"], kl = ["id", "tabindex", "aria-disabled", "aria-selected", "title", "aria-label", ".dataLabel", "onClick"], jl = {
+  key: 0,
+  class: "joy-dropdown-list__footer"
+}, $l = /* @__PURE__ */ $({
+  __name: "VJoyDropdownList",
+  props: {
+    options: {
+      type: Array,
+      validator(e) {
+        return e.every((l) => Object.keys(l).includes("label"));
+      },
+      default() {
+        return [];
+      }
+    },
+    size: {
+      type: String,
+      default: "medium",
+      validator(e) {
+        return Qe.includes(e);
+      }
+    },
+    modelValue: {
+      type: String
+    },
+    width: {
+      type: String,
+      default: "300"
+    },
+    height: {
+      type: String,
+      default: "300"
+    }
+  },
+  emits: ["update:modelValue", "close:dropdownList"],
+  setup(e, { expose: t, emit: l }) {
+    const a = e, o = g(), r = I(() => (i) => !a.modelValue && !i.value ? !1 : a.modelValue === i.label || a.modelValue === i.value);
+    function s(i) {
+      i.disabled || l("update:modelValue", i.label);
+    }
+    function n() {
+      var i;
+      return Array.from(((i = o.value) == null ? void 0 : i.querySelectorAll("li")) || []);
+    }
+    function u() {
+      const i = n().find((d) => d.getAttribute("aria-selected") === "true");
+      i && (i.focus(), o.value.scrollTo({
+        top: i.offsetTop
+      }));
+    }
+    function y() {
+      return n().find((i) => i === document.activeElement);
+    }
+    function c(i) {
+      var d;
+      if ((i.key === "Escape" || i.key === "Tab") && l("close:dropdownList"), (i.key === "Enter" || i.key === "enter") && (i.preventDefault(), y() && ((d = o.value) != null && d.contains(y())))) {
+        const f = y();
+        if (!f)
+          return;
+        if (f.querySelector("a"))
+          return f.querySelector("a").click();
+        l("update:modelValue", f.dataLabel);
+      }
+      if (i.key === " " && i.preventDefault(), ["ArrowDown", "ArrowUp", "Home", "End"].includes(i.key)) {
+        const f = n(), S = y();
+        let j = f.indexOf(S);
+        if (f.length) {
+          i.preventDefault(), i.key === "ArrowDown" ? j++ : i.key === "ArrowUp" ? j-- : i.key === "Home" ? j = 0 : i.key === "End" && (j = f.length - 1), j < 0 && (j = 0), j > f.length - 1 && (j = 0), v(f[j]);
+          return;
+        }
+      }
+    }
+    function v(i) {
+      i.focus();
+    }
+    return W(() => {
+      window.addEventListener("keydown", c), u();
+    }), Re(() => {
+      window.removeEventListener("keydown", c);
+    }), t({
+      isSelected: r
+    }), (i, d) => (m(), p("div", {
+      class: "joy-dropdown-list",
+      style: G({ "max-width": `${e.width}px`, "max-height": `${e.height}px` })
+    }, [
+      h("ul", {
+        ref_key: "listbox",
+        ref: o,
+        role: "listbox",
+        class: "joy-dropdown-list__items",
+        style: G({ "max-height": `${e.height}px` })
+      }, [
+        (m(!0), p(fe, null, ye(e.options, (f) => (m(), p("li", {
+          id: f.id,
+          key: f.label,
+          style: G({ "max-width": `${e.width}px` }),
+          class: k([
+            "joy-dropdown-list__item",
+            `joy-dropdown-list__item--${e.size}`,
+            {
+              "joy-dropdown-list__item--selected": _(r)(f),
+              "joy-dropdown-list__item--disabled": f.disabled
+            }
+          ]),
+          tabindex: f.disabled ? void 0 : 0,
+          "aria-disabled": f.disabled,
+          "aria-selected": _(r)(f),
+          title: f.label,
+          "aria-label": f.label,
+          ".dataLabel": f.value || f.label,
+          role: "option",
+          onClick: (S) => s(f)
+        }, [
+          b(i.$slots, "label", me(ve(f)), () => [
+            h("span", null, O(f.label), 1)
+          ], !0)
+        ], 14, kl))), 128))
+      ], 4),
+      i.$slots.footer ? (m(), p("footer", jl, [
+        b(i.$slots, "footer", {}, void 0, !0)
+      ])) : w("", !0)
+    ], 4));
+  }
+});
+const Ze = /* @__PURE__ */ V($l, [["__scopeId", "data-v-5ab31622"]]);
+function Vl(e) {
+  const t = () => e();
+  W(() => {
+    window.addEventListener("resize", t);
+  }), Re(() => {
+    window.removeEventListener("resize", t);
+  });
+}
+const xl = /* @__PURE__ */ $({
+  __name: "VJoyDropdown",
+  props: {
+    /** DOM valid selector to give to Vue3 Teleport "to" property */
+    appendTo: {
+      type: String,
+      default: "body"
+    },
+    /**
+     * Disable teleport for testing purpose mostly.
+     */
+    disableTeleport: {
+      type: Boolean,
+      default: !1
+    },
+    /** close the dropdown list when clicking on any item. Default to false */
+    closeOnSelect: {
+      type: Boolean,
+      default: !0
+    },
+    /** Dropdown vertical position according to the trigger */
+    direction: {
+      type: String,
+      default: "down"
+    },
+    /** Dropdown horizontal justify according to the trigger */
+    justify: {
+      type: String,
+      default: "left"
+    },
+    /**
+     * ```
+     * interface Option {id?: string; value?: string; label: string; href?: string; disabled?:boolean; checked?:boolean}
+     * ```
+     */
+    options: {
+      type: Array,
+      validator(e) {
+        return e.every((l) => Object.keys(l).includes("label"));
+      },
+      default() {
+        return [];
+      }
+    },
+    size: {
+      type: String,
+      default: "medium",
+      validator(e) {
+        return Qe.includes(e);
+      }
+    },
+    modelValue: {
+      type: String,
+      default: ""
+    },
+    /**
+     * Space between the trigger and the list
+     */
+    dropdownGap: {
+      type: String,
+      default: "16"
+    },
+    /**
+     * Max-width of the dropdown list
+     */
+    width: {
+      type: String,
+      default: "300"
+    },
+    /**
+     * Max-height of the dropdown list
+     */
+    height: {
+      type: String,
+      default: "300"
+    }
+  },
+  emits: ["update:modelValue"],
+  setup(e, { expose: t, emit: l }) {
+    const a = e, o = g(!1), r = g(null), s = g(), n = g(null), u = g(null), y = g(!1), c = {
+      ignore: [s, ".joy-dropdown__list"]
+    };
+    let v = null;
+    const i = Y({
+      left: "auto",
+      top: "0px",
+      right: "auto"
+    });
+    function d() {
+      v && clearTimeout(v), y.value = !0, v = setTimeout(() => {
+        o.value = !1, y.value = !1;
+      }, 300);
+    }
+    function f(E) {
+      y.value = !1, v && clearTimeout(v), Z(), u.value = E.target, o.value = !0;
+    }
+    function S() {
+      d(), j();
+    }
+    function j() {
+      u.value && u.value.focus();
+    }
+    function Z() {
+      const E = s.value.getBoundingClientRect(), x = document.documentElement.scrollTop + E.top, J = E.height, M = E.left, D = E.width;
+      a.justify === "left" ? i.left = M + "px" : i.left = M + D - parseInt(a.width) + "px", a.direction === "down" ? i.top = x + J + parseInt(a.dropdownGap) + "px" : i.top = x - (parseInt(a.height) + parseInt(a.dropdownGap)) + "px";
+    }
+    function le(E) {
+      l("update:modelValue", E), a.closeOnSelect && (d(), j());
+    }
+    return Vl(d), t({
+      showDropdownList: o
+    }), (E, x) => (m(), P(_(Gt), {
+      ref_key: "dropdown",
+      ref: r,
+      options: c,
+      class: "joy-dropdown",
+      onTrigger: d
+    }, {
+      default: L(() => [
+        h("div", {
+          ref_key: "button",
+          ref: s,
+          class: "joy-dropdown__button",
+          onClick: f
+        }, [
+          b(E.$slots, "dropdown-button", {}, void 0, !0)
+        ], 512),
+        (m(), P(ot, {
+          to: e.appendTo,
+          disabled: e.disableTeleport
+        }, [
+          o.value ? (m(), p("div", {
+            key: 0,
+            ref_key: "list",
+            ref: n,
+            class: k([
+              "joy-dropdown__list",
+              `joy-dropdown__list--${e.direction}`,
+              {
+                "joy-dropdown__list--visible": !y.value,
+                "joy-dropdown__list--hiding": y.value
+              }
+            ]),
+            style: G({
+              top: i.top,
+              left: i.left
+            })
+          }, [
+            ce(Ze, {
+              "model-value": e.modelValue,
+              options: e.options,
+              size: e.size,
+              width: e.width,
+              height: e.height,
+              "onUpdate:modelValue": le,
+              "onClose:dropdownList": S
+            }, {
+              label: L((J) => [
+                b(E.$slots, "dropdown-item", me(ve(J)), () => [
+                  h("span", null, O(J.label), 1)
+                ], !0)
+              ]),
+              _: 3
+            }, 8, ["model-value", "options", "size", "width", "height"])
+          ], 6)) : w("", !0)
+        ], 8, ["to", "disabled"]))
+      ]),
+      _: 3
+    }, 512));
+  }
+});
+const Il = /* @__PURE__ */ V(xl, [["__scopeId", "data-v-49159b35"]]), Ol = (e) => (ee("data-v-50e209d6"), e = e(), te(), e), Ll = ["aria-hidden"], El = /* @__PURE__ */ Ol(() => /* @__PURE__ */ h("joy-icon", {
   "custom-class": "joy-icon-error",
   name: "warning-triangle"
-}, null, -1)), Je = /* @__PURE__ */ p({
-  __name: "JoyFormError",
+}, null, -1)), Bl = /* @__PURE__ */ $({
+  __name: "VJoyFormError",
   props: {
     /** In some cases you'll need to inject the error in the DOM but hide it. Visible by default */
     visible: {
@@ -373,37 +1235,37 @@ const xe = /* @__PURE__ */ _($e, [["__scopeId", "data-v-47a76942"]]), Ie = (e) =
     noHtmlErrorText: String
   },
   setup(e) {
-    return (l, a) => (o(), d("div", {
+    return (t, l) => (m(), p("div", {
       "aria-hidden": e.visible,
-      class: b(["joy-form-error", { "joy-has-error": e.visible }]),
+      class: k(["joy-form-error", { "joy-has-error": e.visible }]),
       role: "alert"
     }, [
-      Be,
-      u("div", null, [
-        c(l.$slots, "default", {}, () => [
-          B($(e.noHtmlErrorText), 1)
+      El,
+      h("div", null, [
+        b(t.$slots, "default", {}, () => [
+          T(O(e.noHtmlErrorText), 1)
         ], !0)
       ])
-    ], 10, qe));
+    ], 10, Ll));
   }
 });
-const G = /* @__PURE__ */ _(Je, [["__scopeId", "data-v-d693f93c"]]);
-function Ve(e) {
-  let l;
+const Ye = /* @__PURE__ */ V(Bl, [["__scopeId", "data-v-50e209d6"]]);
+function Cl(e) {
+  let t;
   switch (e) {
     case "error":
-      l = "warning-triangle";
+      t = "warning-triangle";
       break;
     case "success":
-      l = "check";
+      t = "check";
       break;
     default:
-      l = "info-circle";
+      t = "info-circle";
   }
-  return l;
+  return t;
 }
-const Ce = [...ee], we = ["name"], Le = { class: "joy-highlight--text" }, ze = /* @__PURE__ */ p({
-  __name: "JoyHighlight",
+const Pl = [...dt], ql = ["name"], Jl = { class: "joy-highlight--text" }, Tl = /* @__PURE__ */ $({
+  __name: "VJoyHighlight",
   props: {
     accent: {
       type: Boolean,
@@ -418,51 +1280,51 @@ const Ce = [...ee], we = ["name"], Le = { class: "joy-highlight--text" }, ze = /
       type: String,
       default: "neutral",
       validator(e) {
-        return Ce.includes(e);
+        return Pl.includes(e);
       }
     }
   },
-  setup(e, { expose: l }) {
-    const a = e, t = V(() => a.icon ? a.icon : Ve(a.level));
-    return l({
-      getRelevantIcon: t
-    }), (i, s) => (o(), d("div", {
-      class: b([
+  setup(e, { expose: t }) {
+    const l = e, a = I(() => l.icon ? l.icon : Cl(l.level));
+    return t({
+      getRelevantIcon: a
+    }), (o, r) => (m(), p("div", {
+      class: k([
         "joy-highlight",
         `joy-highlight_${e.level}`,
         {
           "joy-highlight__accent": e.accent,
-          "joy-highlight__titled": i.$slots["highlight-title"]
+          "joy-highlight__titled": o.$slots["highlight-title"]
         }
       ])
     }, [
-      e.displayIcon ? (o(), d("joy-icon", {
+      e.displayIcon ? (m(), p("joy-icon", {
         key: 0,
-        name: m(t)
-      }, null, 8, we)) : y("", !0),
-      u("div", Le, [
-        u("strong", null, [
-          c(i.$slots, "highlight-title", {}, void 0, !0)
+        name: _(a)
+      }, null, 8, ql)) : w("", !0),
+      h("div", Jl, [
+        h("strong", null, [
+          b(o.$slots, "highlight-title", {}, void 0, !0)
         ]),
-        c(i.$slots, "default", {}, void 0, !0)
+        b(o.$slots, "default", {}, void 0, !0)
       ])
     ], 2));
   }
 });
-const Me = /* @__PURE__ */ _(ze, [["__scopeId", "data-v-15d3fa11"]]), Ee = ["small", "medium", "large"], Ne = {
+const zl = /* @__PURE__ */ V(Tl, [["__scopeId", "data-v-a0ff7a60"]]), Al = ["small", "medium", "large"], Dl = {
   key: 0,
   class: "joy-label-required"
-}, Te = {
+}, Ml = {
   key: 1,
   class: "joy-label-optional"
-}, Oe = /* @__PURE__ */ p({
-  __name: "JoyLabel",
+}, Rl = /* @__PURE__ */ $({
+  __name: "VJoyLabel",
   props: {
     size: {
       type: String,
       default: "medium",
       validator(e) {
-        return Ee.includes(e);
+        return Al.includes(e);
       }
     },
     tagName: {
@@ -478,20 +1340,20 @@ const Me = /* @__PURE__ */ _(ze, [["__scopeId", "data-v-15d3fa11"]]), Ee = ["sma
     }
   },
   setup(e) {
-    return (l, a) => (o(), J(E(e.tagName), L({
+    return (t, l) => (m(), P(de(e.tagName), K({
       class: ["joy-label", `joy-label--${e.size}`]
-    }, l.$attrs), {
-      default: q(() => [
-        c(l.$slots, "default", {}, void 0, !0),
-        e.required ? (o(), d("span", Ne, "*")) : y("", !0),
-        e.optionalLabel ? (o(), d("span", Te, "- " + $(e.optionalLabel), 1)) : y("", !0)
+    }, t.$attrs), {
+      default: L(() => [
+        b(t.$slots, "default", {}, void 0, !0),
+        e.required ? (m(), p("span", Dl, "*")) : w("", !0),
+        e.optionalLabel ? (m(), p("span", Ml, "- " + O(e.optionalLabel), 1)) : w("", !0)
       ]),
       _: 3
     }, 16, ["class"]));
   }
 });
-const C = /* @__PURE__ */ _(Oe, [["__scopeId", "data-v-e3232407"]]), Re = ["large", "medium", "small"], Ae = ["id", "disabled", "type", "value"], Fe = ["name"], Pe = ["data-unit"], He = /* @__PURE__ */ p({
-  __name: "JoyInput",
+const H = /* @__PURE__ */ V(Rl, [["__scopeId", "data-v-1e682734"]]), Nl = ["large", "medium", "small"], Hl = ["id", "disabled", "type", "value"], Wl = ["name"], Fl = ["data-unit"], Ul = /* @__PURE__ */ $({
+  __name: "VJoyInput",
   props: {
     disabled: {
       type: Boolean,
@@ -541,7 +1403,7 @@ const C = /* @__PURE__ */ _(Oe, [["__scopeId", "data-v-e3232407"]]), Re = ["larg
       type: String,
       default: "medium",
       validator(e) {
-        return Re.includes(e);
+        return Nl.includes(e);
       }
     },
     type: String,
@@ -549,74 +1411,74 @@ const C = /* @__PURE__ */ _(Oe, [["__scopeId", "data-v-e3232407"]]), Re = ["larg
     unit: String
   },
   emits: ["update:modelValue"],
-  setup(e, { emit: l }) {
-    const a = e, t = S(), i = S(), s = O(), f = w(), n = S(!1), r = V(() => a.clearable && a.modelValue.length > 0 && !a.unit), g = V(() => f.default && f.default()), k = V(() => {
-      var v, h;
-      return !!((v = i.value) != null && v.closest("joy-wrapper")) || !!((h = i.value) != null && h.closest(".joy-wrapper"));
-    }), I = S(a.type);
-    W(() => {
-      I.value = a.unit ? "number" : a.unit || "text";
+  setup(e, { emit: t }) {
+    const l = e, a = g(), o = g(), r = De(), s = F(), n = g(!1), u = I(() => l.clearable && l.modelValue.length > 0 && !l.unit), y = I(() => s.default && s.default()), c = I(() => {
+      var d, f;
+      return !!((d = o.value) != null && d.closest("joy-wrapper")) || !!((f = o.value) != null && f.closest(".joy-wrapper"));
+    }), v = g(l.type);
+    nt(() => {
+      v.value = l.unit ? "number" : l.unit || "text";
     });
-    const j = {
+    const i = {
       onFocus: () => {
         n.value = !0;
       },
       onBlur: () => {
         n.value = !1;
       },
-      onInput: (v) => {
-        let h = v.target.value;
-        l("update:modelValue", h);
+      onInput: (d) => {
+        let f = d.target.value;
+        t("update:modelValue", f);
       },
       clearValue: () => {
-        a.disabled || l("update:modelValue", "");
+        l.disabled || t("update:modelValue", "");
       }
     };
-    return (v, h) => (o(), d("div", {
+    return (d, f) => (m(), p("div", {
       ref_key: "root",
-      ref: i,
-      class: b([`joy-input--${a.size}`])
+      ref: o,
+      class: k([`joy-input--${l.size}`])
     }, [
-      u("div", {
-        class: b([
+      h("div", {
+        class: k([
           "joy-input",
           {
             "joy-input--focusing": n.value,
             "joy-input--disabled": e.disabled,
             "joy-input--invalid": e.invalid,
-            "joy-input--valid": !e.invalid && !m(s).disabled
+            "joy-input--valid": !e.invalid && !_(r).disabled
           }
         ])
       }, [
-        m(g) || e.label ? (o(), J(C, {
+        _(y) || e.label ? (m(), P(H, {
           key: 0,
           for: e.name,
           required: e.required && e.requiredMark,
           "optional-label": e.optionalLabel,
           size: e.labelSize
         }, {
-          default: q(() => [
-            c(v.$slots, "default", {}, () => [
-              B($(e.label), 1)
+          default: L(() => [
+            b(d.$slots, "default", {}, () => [
+              T(O(e.label), 1)
             ], !0)
           ]),
           _: 3
-        }, 8, ["for", "required", "optional-label", "size"])) : y("", !0),
-        u("div", {
-          class: b([
+        }, 8, ["for", "required", "optional-label", "size"])) : w("", !0),
+        h("div", {
+          class: k([
             "joy-input--wrapper",
             {
               "joy-input--wrapper-has-icon": !!e.icon,
               "joy-input--wrapper---clearable": e.clearable,
               "joy-input--wrapper-unit": !!e.unit,
-              "joy-input--wrapper-margin": !m(k)
+              "joy-input--wrapper-margin": !_(c)
             }
           ])
         }, [
-          u("input", L(v.$attrs, {
-            id: a.name,
+          h("input", K(d.$attrs, {
+            id: l.name,
             ref_key: "input",
-            ref: t,
+            ref: a,
             disabled: e.disabled,
             class: [
               {
@@ -624,41 +1486,41 @@ const C = /* @__PURE__ */ _(Oe, [["__scopeId", "data-v-e3232407"]]), Re = ["larg
                 "joy-input--field-invalid": e.invalid
               }
             ],
-            type: I.value,
+            type: v.value,
             value: e.modelValue,
-            onFocus: h[0] || (h[0] = //@ts-ignore
-            (...x) => j.onFocus && j.onFocus(...x)),
-            onBlur: h[1] || (h[1] = //@ts-ignore
-            (...x) => j.onBlur && j.onBlur(...x)),
-            onInput: h[2] || (h[2] = //@ts-ignore
-            (...x) => j.onInput && j.onInput(...x))
-          }), null, 16, Ae),
-          m(r) ? (o(), d("joy-icon", {
+            onFocus: f[0] || (f[0] = //@ts-ignore
+            (...S) => i.onFocus && i.onFocus(...S)),
+            onBlur: f[1] || (f[1] = //@ts-ignore
+            (...S) => i.onBlur && i.onBlur(...S)),
+            onInput: f[2] || (f[2] = //@ts-ignore
+            (...S) => i.onInput && i.onInput(...S))
+          }), null, 16, Hl),
+          _(u) ? (m(), p("joy-icon", {
             key: 0,
             size: "xxsmall",
             name: "cross",
             class: "joy-input--clear",
-            onClick: h[3] || (h[3] = //@ts-ignore
-            (...x) => j.clearValue && j.clearValue(...x))
-          })) : y("", !0),
-          e.icon && !e.clearable ? (o(), d("joy-icon", {
+            onClick: f[3] || (f[3] = //@ts-ignore
+            (...S) => i.clearValue && i.clearValue(...S))
+          })) : w("", !0),
+          e.icon && !e.clearable ? (m(), p("joy-icon", {
             key: 1,
             role: "img",
             class: "joy-input--decorative-icon",
             name: e.icon
-          }, null, 8, Fe)) : y("", !0),
-          e.unit ? (o(), d("div", {
+          }, null, 8, Wl)) : w("", !0),
+          e.unit ? (m(), p("div", {
             key: 2,
             "data-unit": e.unit,
             class: "joy-input--unit"
-          }, null, 8, Pe)) : y("", !0)
+          }, null, 8, Fl)) : w("", !0)
         ], 2)
       ], 2)
     ], 2));
   }
 });
-const Ge = /* @__PURE__ */ _(He, [["__scopeId", "data-v-023262dd"]]), Ue = ["teal", "white"], We = ["href"], De = ["color", "name"], Ze = /* @__PURE__ */ p({
-  __name: "JoyLink",
+const Gl = /* @__PURE__ */ V(Ul, [["__scopeId", "data-v-8258d6d7"]]), Kl = ["teal", "white"], Ql = ["href"], Zl = ["color", "name"], Yl = /* @__PURE__ */ $({
+  __name: "VJoyLink",
   props: {
     href: {
       type: String,
@@ -668,36 +1530,36 @@ const Ge = /* @__PURE__ */ _(He, [["__scopeId", "data-v-023262dd"]]), Ue = ["tea
       type: String,
       default: "teal",
       validator(e) {
-        return Ue.includes(e);
+        return Kl.includes(e);
       }
     },
     icon: String
   },
   setup(e) {
-    const l = e, a = V(() => l.color === "white" ? "white" : "teal");
-    return (t, i) => (o(), d("a", L({ href: e.href }, t.$attrs, {
+    const t = e, l = I(() => t.color === "white" ? "white" : "teal");
+    return (a, o) => (m(), p("a", K({ href: e.href }, a.$attrs, {
       class: ["joy-link", `joy-link_${e.color}`]
     }), [
-      e.icon ? (o(), d("joy-icon", {
+      e.icon ? (m(), p("joy-icon", {
         key: 0,
-        color: m(a),
+        color: _(l),
         name: e.icon
-      }, null, 8, De)) : y("", !0),
-      c(t.$slots, "default", {}, void 0, !0)
-    ], 16, We));
+      }, null, 8, Zl)) : w("", !0),
+      b(a.$slots, "default", {}, void 0, !0)
+    ], 16, Ql));
   }
 });
-const Ke = /* @__PURE__ */ _(Ze, [["__scopeId", "data-v-640ee9a6"]]), Qe = ["id"], Xe = {
-  class: /* @__PURE__ */ b(["joy-multi-checkbox"])
-}, Ye = /* @__PURE__ */ p({
-  __name: "JoyMultiCheckbox",
+const Xl = /* @__PURE__ */ V(Yl, [["__scopeId", "data-v-7ef59bc8"]]), ea = ["id"], ta = {
+  class: /* @__PURE__ */ k(["joy-multi-checkbox"])
+}, la = /* @__PURE__ */ $({
+  __name: "VJoyMultiCheckbox",
   props: {
     options: {
       type: Array,
       required: !0,
       validator(e) {
-        const l = e.every((t) => Object.keys(t).includes("value")), a = e.every((t) => Object.keys(t).includes("label"));
-        return l && a;
+        const t = e.every((a) => Object.keys(a).includes("value")), l = e.every((a) => Object.keys(a).includes("label"));
+        return t && l;
       }
     },
     id: String,
@@ -727,62 +1589,64 @@ const Ke = /* @__PURE__ */ _(Ze, [["__scopeId", "data-v-640ee9a6"]]), Qe = ["id"
     }
   },
   emits: ["update:value"],
-  setup(e, { emit: l }) {
-    const a = e;
-    function t(s) {
-      return a.value.includes(s.value);
+  setup(e, { emit: t }) {
+    const l = e;
+    function a(r) {
+      return l.value.includes(r.value);
     }
-    function i(s, f) {
-      let n = [...a.value || []];
-      f ? n.push(s) : n.splice(n.indexOf(s), 1), l("update:value", n);
+    function o(r, s) {
+      let n = [...l.value || []];
+      s ? n.push(r) : n.splice(n.indexOf(r), 1), t("update:value", n);
     }
-    return (s, f) => (o(), d("fieldset", {
+    return (r, s) => (m(), p("fieldset", {
       id: e.id,
       class: "joy-multi-checkbox__wrapper"
     }, [
-      e.label ? (o(), J(m(C), {
+      e.label ? (m(), P(_(H), {
         key: 0,
         "tag-name": "legend",
         required: e.required && e.requiredMark,
         "optional-label": e.optionalLabel,
         size: e.labelSize
       }, {
-        default: q(() => [
-          B($(e.label), 1)
+        default: L(() => [
+          T(O(e.label), 1)
         ]),
         _: 1
-      }, 8, ["required", "optional-label", "size"])) : y("", !0),
-      u("div", Xe, [
-        (o(!0), d(A, null, F(e.options, (n) => (o(), J(m(T), {
+      }, 8, ["required", "optional-label", "size"])) : w("", !0),
+      h("div", ta, [
+        (m(!0), p(fe, null, ye(e.options, (n) => (m(), P(_(pe), {
           id: n.id,
           key: n.id,
           name: n.name,
           value: n.value,
-          checked: t(n),
-          "onUpdate:checked": (r) => i(n.value, r)
+          checked: a(n),
+          "onUpdate:checked": (u) => o(n.value, u)
         }, {
-          default: q(() => [
-            B($(n.label), 1)
+          default: L(() => [
+            b(r.$slots, "checkbox", me(ve(n)), () => [
+              T(O(n.label), 1)
+            ], !0)
           ]),
           _: 2
         }, 1032, ["id", "name", "value", "checked", "onUpdate:checked"]))), 128))
       ])
-    ], 8, Qe));
+    ], 8, ea));
   }
 });
-const et = /* @__PURE__ */ _(Ye, [["__scopeId", "data-v-4a9e39e2"]]), tt = ["small", "medium", "large"], at = {
-  class: /* @__PURE__ */ b(["joy-panel__header"])
-}, lt = {
+const aa = /* @__PURE__ */ V(la, [["__scopeId", "data-v-f4301a1f"]]), oa = ["small", "medium", "large"], na = {
+  class: /* @__PURE__ */ k(["joy-panel__header"])
+}, ia = {
   key: 0,
   class: "joy-panel__header-title"
-}, nt = {
+}, ra = {
   key: 1,
   class: "joy-panel__header-action"
-}, ot = {
+}, sa = {
   key: 2,
   class: "joy-panel__header-subtitle"
-}, it = { class: "joy-panel__body" }, dt = { class: "joy-panel__footer" }, ut = /* @__PURE__ */ p({
-  __name: "JoyPanel",
+}, ua = { class: "joy-panel__body" }, da = { class: "joy-panel__footer" }, ca = /* @__PURE__ */ $({
+  __name: "VJoyPanel",
   props: {
     flex: {
       type: String
@@ -795,63 +1659,63 @@ const et = /* @__PURE__ */ _(Ye, [["__scopeId", "data-v-4a9e39e2"]]), tt = ["sma
       type: String,
       defaut: "medium",
       validator(e) {
-        return tt.includes(e);
+        return oa.includes(e);
       }
     }
   },
   setup(e) {
-    const l = w(), a = S(), t = V(() => {
-      var i;
-      return (i = a.value) == null ? void 0 : i.closest(".joy-wrapper");
+    const t = F(), l = g(), a = I(() => {
+      var o;
+      return (o = l.value) == null ? void 0 : o.closest(".joy-wrapper");
     });
-    return (i, s) => (o(), d("section", {
+    return (o, r) => (m(), p("section", {
       ref_key: "panel",
-      ref: a,
-      style: D({ flex: e.flex }),
-      class: b(["joy-panel", `joy-panel--${e.padding}`, { "joy-panel--no-margin": e.noMargin || m(t) }])
+      ref: l,
+      style: G({ flex: e.flex }),
+      class: k(["joy-panel", `joy-panel--${e.padding}`, { "joy-panel--no-margin": e.noMargin || _(a) }])
     }, [
-      u("header", at, [
-        m(l)["panel-title"] ? (o(), d("div", lt, [
-          c(i.$slots, "panel-title", {}, void 0, !0)
-        ])) : y("", !0),
-        m(l)["panel-action"] ? (o(), d("div", nt, [
-          c(i.$slots, "panel-title-action", {}, void 0, !0)
-        ])) : y("", !0),
-        m(l)["panel-subtitle"] ? (o(), d("div", ot, [
-          c(i.$slots, "panel-subtitle", {}, void 0, !0)
-        ])) : y("", !0)
+      h("header", na, [
+        _(t)["panel-title"] ? (m(), p("div", ia, [
+          b(o.$slots, "panel-title", {}, void 0, !0)
+        ])) : w("", !0),
+        _(t)["panel-action"] ? (m(), p("div", ra, [
+          b(o.$slots, "panel-title-action", {}, void 0, !0)
+        ])) : w("", !0),
+        _(t)["panel-subtitle"] ? (m(), p("div", sa, [
+          b(o.$slots, "panel-subtitle", {}, void 0, !0)
+        ])) : w("", !0)
       ]),
-      u("div", it, [
-        c(i.$slots, "panel-body", {}, void 0, !0)
+      h("div", ua, [
+        b(o.$slots, "panel-body", {}, void 0, !0)
       ]),
-      u("footer", dt, [
-        c(i.$slots, "panel-action", {}, void 0, !0)
+      h("footer", da, [
+        b(o.$slots, "panel-action", {}, void 0, !0)
       ])
     ], 6));
   }
 });
-const st = /* @__PURE__ */ _(ut, [["__scopeId", "data-v-ab3b6d88"]]), rt = { class: "joy-panel-section" }, ct = {
+const fa = /* @__PURE__ */ V(ca, [["__scopeId", "data-v-2e2ef043"]]), ya = { class: "joy-panel-section" }, ma = {
   key: 0,
   class: "joy-panel-section__title"
-}, yt = {
+}, va = {
   key: 1,
   class: "joy-panel-section__content"
-}, mt = /* @__PURE__ */ p({
-  __name: "JoyPanelSection",
+}, pa = /* @__PURE__ */ $({
+  __name: "VJoyPanelSection",
   setup(e) {
-    const l = w();
-    return (a, t) => (o(), d("div", rt, [
-      m(l)["panel-section-title"] ? (o(), d("div", ct, [
-        c(a.$slots, "panel-section-title", {}, void 0, !0)
-      ])) : y("", !0),
-      m(l)["panel-section-content"] ? (o(), d("div", yt, [
-        c(a.$slots, "panel-section-content", {}, void 0, !0)
-      ])) : y("", !0)
+    const t = F();
+    return (l, a) => (m(), p("div", ya, [
+      _(t)["panel-section-title"] ? (m(), p("div", ma, [
+        b(l.$slots, "panel-section-title", {}, void 0, !0)
+      ])) : w("", !0),
+      _(t)["panel-section-content"] ? (m(), p("div", va, [
+        b(l.$slots, "panel-section-content", {}, void 0, !0)
+      ])) : w("", !0)
     ]));
   }
 });
-const ft = /* @__PURE__ */ _(mt, [["__scopeId", "data-v-3b8a6001"]]), vt = ["id", "value", "checked", "disabled", "required", "name"], bt = { class: "joy-radio-label" }, gt = { class: "joy-radio-content__wrapper" }, ht = { class: "joy-radio-content" }, pt = /* @__PURE__ */ p({
-  __name: "JoyRadio",
+const ha = /* @__PURE__ */ V(pa, [["__scopeId", "data-v-d88510ab"]]), ba = ["id", "value", "checked", "disabled", "required", "name"], ga = { class: "joy-radio-label" }, _a = { class: "joy-radio-content__wrapper" }, wa = { class: "joy-radio-content" }, Sa = /* @__PURE__ */ $({
+  __name: "VJoyRadio",
   props: {
     disabled: {
       type: Boolean,
@@ -885,67 +1749,67 @@ const ft = /* @__PURE__ */ _(mt, [["__scopeId", "data-v-3b8a6001"]]), vt = ["id"
     }
   },
   emits: ["update:modelValue"],
-  setup(e, { expose: l, emit: a }) {
-    const t = e, i = S(!1), s = S(null), f = S(null), n = w(), r = V(() => !t.modelValue || !t.value ? !1 : t.modelValue === t.value);
-    function g() {
-      i.value = !!n["expandable-content"] && r.value;
+  setup(e, { expose: t, emit: l }) {
+    const a = e, o = g(!1), r = g(null), s = g(null), n = F(), u = I(() => !a.modelValue || !a.value ? !1 : a.modelValue === a.value);
+    function y() {
+      o.value = !!n["expandable-content"] && u.value;
     }
-    function k() {
-      a("update:modelValue", t.value), g();
+    function c() {
+      l("update:modelValue", a.value), y();
     }
-    return N(() => {
-      t.theme === "outline" && g();
-    }), Z(
-      () => t.modelValue,
+    return W(() => {
+      a.theme === "outline" && y();
+    }), q(
+      () => a.modelValue,
       () => {
-        g();
+        y();
       }
-    ), l({
-      checked: r,
-      isExpanded: i
-    }), (I, j) => (o(), d("label", {
+    ), t({
+      checked: u,
+      isExpanded: o
+    }), (v, i) => (m(), p("label", {
       ref_key: "root",
-      ref: s,
-      class: b([
+      ref: r,
+      class: k([
         "joy-radio",
         `joy-radio--${e.theme}`,
         {
-          "joy-radio--checked": m(r),
+          "joy-radio--checked": _(u),
           "joy-radio--disabled": e.disabled,
           "joy-radio--invalid": e.invalid
         }
       ])
     }, [
-      u("input", {
+      h("input", {
         id: e.id,
         type: "radio",
         value: e.value,
-        checked: m(r),
+        checked: _(u),
         disabled: e.disabled,
         required: e.required,
         name: e.name,
-        onChange: k
-      }, null, 40, vt),
-      u("span", bt, [
-        c(I.$slots, "default", {}, void 0, !0)
+        onChange: c
+      }, null, 40, ba),
+      h("span", ga, [
+        b(v.$slots, "default", {}, void 0, !0)
       ]),
-      u("div", gt, [
-        u("div", ht, [
-          c(I.$slots, "radio-content", {}, void 0, !0)
+      h("div", _a, [
+        h("div", wa, [
+          b(v.$slots, "radio-content", {}, void 0, !0)
         ]),
-        u("div", {
+        h("div", {
           ref_key: "expandableElement",
-          ref: f,
-          class: b(["joy-radio-expandable", { "joy-radio-expandable--expanded": i.value }])
+          ref: s,
+          class: k(["joy-radio-expandable", { "joy-radio-expandable--expanded": o.value }])
         }, [
-          c(I.$slots, "expandable-content", {}, void 0, !0)
+          b(v.$slots, "expandable-content", {}, void 0, !0)
         ], 2)
       ])
     ], 2));
   }
 });
-const _t = /* @__PURE__ */ _(pt, [["__scopeId", "data-v-5b66be9f"]]), kt = ["form", "name"], jt = /* @__PURE__ */ p({
-  __name: "JoyRadioGroup",
+const ka = /* @__PURE__ */ V(Sa, [["__scopeId", "data-v-d5988486"]]), ja = ["form", "name"], $a = /* @__PURE__ */ $({
+  __name: "VJoyRadioGroup",
   props: {
     direction: {
       type: String,
@@ -959,27 +1823,27 @@ const _t = /* @__PURE__ */ _(pt, [["__scopeId", "data-v-5b66be9f"]]), kt = ["for
     }
   },
   setup(e) {
-    return (l, a) => (o(), d("fieldset", {
+    return (t, l) => (m(), p("fieldset", {
       ref: "root",
       class: "joy-radio-group-fieldset",
       role: "radiogroup",
       form: e.form,
       name: e.name
     }, [
-      c(l.$slots, "radio-group-legend", {}, void 0, !0),
-      u("div", {
-        class: b(["joy-radio-group-container", `joy-radio-group-${e.direction}`])
+      b(t.$slots, "radio-group-legend", {}, void 0, !0),
+      h("div", {
+        class: k(["joy-radio-group-container", `joy-radio-group-${e.direction}`])
       }, [
-        c(l.$slots, "default", {}, void 0, !0)
+        b(t.$slots, "default", {}, void 0, !0)
       ], 2)
-    ], 8, kt));
+    ], 8, ja));
   }
 });
-const St = /* @__PURE__ */ _(jt, [["__scopeId", "data-v-d75cd96a"]]), $t = (e) => (z("data-v-0d978ea6"), e = e(), M(), e), xt = ["id", "name", "aria-invalid", "required", "disabled", "value"], It = /* @__PURE__ */ $t(() => /* @__PURE__ */ u("joy-icon", {
+const Va = /* @__PURE__ */ V($a, [["__scopeId", "data-v-de56c3c4"]]), xa = (e) => (ee("data-v-e856916f"), e = e(), te(), e), Ia = ["id", "name", "aria-invalid", "required", "disabled", "value"], Oa = /* @__PURE__ */ xa(() => /* @__PURE__ */ h("joy-icon", {
   class: "joy-select__chevron",
   name: "chevron-down"
-}, null, -1)), qt = /* @__PURE__ */ p({
-  __name: "JoySelect",
+}, null, -1)), La = /* @__PURE__ */ $({
+  __name: "VJoySelect",
   props: {
     disabled: {
       type: Boolean,
@@ -1018,73 +1882,73 @@ const St = /* @__PURE__ */ _(jt, [["__scopeId", "data-v-d75cd96a"]]), $t = (e) =
     // ...TEXT_BASED_PROPS,
   },
   emits: ["update:modelValue"],
-  setup(e, { emit: l }) {
-    const a = e, t = S(), i = S(), s = w();
-    N(() => {
-      var g;
-      const n = s.label && s.label();
+  setup(e, { emit: t }) {
+    const l = e, a = g(), o = g(), r = F();
+    W(() => {
+      var y;
+      const n = r.label && r.label();
       if (!n || !n.length)
         return;
-      const r = n[0];
-      if (r.type === "JoyLabel") {
-        const k = (g = r.props) == null ? void 0 : g.for;
-        if (!k) {
+      const u = n[0];
+      if (u.type === "JoyLabel") {
+        const c = (y = u.props) == null ? void 0 : y.for;
+        if (!c) {
           console.warn("JoyLabel for attribute is missing");
           return;
         }
-        k !== a.id && console.warn("JoyLabel for attribute does not match with JoySelect id");
+        c !== l.id && console.warn("JoyLabel for attribute does not match with JoySelect id");
       }
     });
-    function f(n) {
-      const r = n.target.value;
-      l("update:modelValue", r);
+    function s(n) {
+      const u = n.target.value;
+      t("update:modelValue", u);
     }
-    return (n, r) => (o(), d("div", {
+    return (n, u) => (m(), p("div", {
       ref_key: "root",
-      ref: t
+      ref: a
     }, [
-      c(n.$slots, "label", {}, () => [
-        e.label ? (o(), J(C, {
+      b(n.$slots, "label", {}, () => [
+        e.label ? (m(), P(H, {
           key: 0,
           required: e.required && e.requiredMark,
           "optional-label": e.optionalLabel,
           for: e.id || e.name,
           size: e.labelSize
         }, {
-          default: q(() => [
-            B($(e.label), 1)
+          default: L(() => [
+            T(O(e.label), 1)
           ]),
           _: 1
-        }, 8, ["required", "optional-label", "for", "size"])) : y("", !0)
+        }, 8, ["required", "optional-label", "for", "size"])) : w("", !0)
       ], !0),
-      u("div", {
-        class: b({
+      h("div", {
+        class: k({
           "joy-select__wrapper": !0,
           "joy-select--invalid": e.invalid,
           "joy-select--disabled": e.disabled
         })
       }, [
-        u("select", {
+        h("select", {
           id: e.id || e.name,
           ref_key: "select",
-          ref: i,
+          ref: o,
           class: "joy-select",
           name: e.name,
           "aria-invalid": e.invalid,
           required: e.required,
           disabled: e.disabled,
           value: e.modelValue,
-          onInput: f
+          onInput: s
         }, [
-          c(n.$slots, "default", {}, void 0, !0)
-        ], 40, xt),
-        It
+          b(n.$slots, "default", {}, void 0, !0)
+        ], 40, Ia),
+        Oa
       ], 2)
     ], 512));
   }
 });
-const Bt = /* @__PURE__ */ _(qt, [["__scopeId", "data-v-0d978ea6"]]), Jt = ["aria-disabled"], Vt = ["id", "value", "checked", "disabled", "required", "name"], Ct = /* @__PURE__ */ p({
-  __name: "JoySelectableItem",
+const Ea = /* @__PURE__ */ V(La, [["__scopeId", "data-v-e856916f"]]), Ba = ["aria-disabled"], Ca = ["id", "value", "checked", "disabled", "required", "name"], Pa = /* @__PURE__ */ $({
+  __name: "VJoySelectableItem",
   props: {
     disabled: {
       type: Boolean,
@@ -1119,44 +1983,44 @@ const Bt = /* @__PURE__ */ _(qt, [["__scopeId", "data-v-0d978ea6"]]), Jt = ["ari
     }
   },
   emits: ["update:checked"],
-  setup(e, { emit: l }) {
-    const a = e, t = S(a.checked), i = S(), s = a.multiple ? "div" : "label", f = {
+  setup(e, { emit: t }) {
+    const l = e, a = g(l.checked), o = g(), r = l.multiple ? "div" : "label", s = {
       onRadioChange: () => {
-        l("update:checked", a.value);
+        t("update:checked", l.value);
       },
       onClick: () => {
-        a.checked && !a.multiple && l("update:checked", "");
+        l.checked && !l.multiple && t("update:checked", "");
       },
-      onLabelClick: (r) => {
-        a.multiple || r.stopPropagation();
+      onLabelClick: (u) => {
+        l.multiple || u.stopPropagation();
       }
     };
-    function n(r) {
-      l("update:checked", r);
+    function n(u) {
+      t("update:checked", u);
     }
-    return (r, g) => (o(), d("div", {
+    return (u, y) => (m(), p("div", {
       class: "joy-selectable-item__wrapper",
       "aria-disabled": e.disabled,
-      onClick: g[2] || (g[2] = //@ts-ignore
-      (...k) => f.onClick && f.onClick(...k))
+      onClick: y[2] || (y[2] = //@ts-ignore
+      (...c) => s.onClick && s.onClick(...c))
     }, [
-      e.multiple ? y("", !0) : (o(), d("input", {
+      e.multiple ? w("", !0) : (m(), p("input", {
         key: 0,
         id: e.id,
         ref_key: "inputRadio",
-        ref: i,
+        ref: o,
         type: "radio",
         value: e.value,
         checked: e.checked,
         disabled: e.disabled,
         required: e.required,
         name: e.name,
-        onChange: g[0] || (g[0] = //@ts-ignore
-        (...k) => f.onRadioChange && f.onRadioChange(...k))
-      }, null, 40, Vt)),
-      (o(), J(E(m(s)), {
+        onChange: y[0] || (y[0] = //@ts-ignore
+        (...c) => s.onRadioChange && s.onRadioChange(...c))
+      }, null, 40, Ca)),
+      (m(), P(de(_(r)), {
         for: e.id,
-        class: b([
+        class: k([
           "joy-selectable-item",
           {
             "joy-selectable-item--disabled": e.disabled,
@@ -1165,15 +2029,15 @@ const Bt = /* @__PURE__ */ _(qt, [["__scopeId", "data-v-0d978ea6"]]), Jt = ["ari
             "joy-selectable-item--single": !e.multiple
           }
         ]),
-        onClick: f.onLabelClick
+        onClick: s.onLabelClick
       }, {
-        default: q(() => [
-          e.multiple ? (o(), J(m(T), {
+        default: L(() => [
+          e.multiple ? (m(), P(_(pe), {
             key: 0,
             id: e.id,
-            checked: t.value,
+            checked: a.value,
             "onUpdate:checked": [
-              g[1] || (g[1] = (k) => t.value = k),
+              y[1] || (y[1] = (c) => a.value = c),
               n
             ],
             disabled: e.disabled,
@@ -1181,32 +2045,32 @@ const Bt = /* @__PURE__ */ _(qt, [["__scopeId", "data-v-0d978ea6"]]), Jt = ["ari
             name: e.name,
             required: e.required
           }, {
-            default: q(() => [
-              c(r.$slots, "default", {}, void 0, !0)
+            default: L(() => [
+              b(u.$slots, "default", {}, void 0, !0)
             ]),
             _: 3
-          }, 8, ["id", "checked", "disabled", "value", "name", "required"])) : y("", !0),
-          e.multiple ? y("", !0) : c(r.$slots, "default", { key: 1 }, void 0, !0),
-          u("div", {
-            class: b([{ "joy-selectable-item__sublabel": r.$slots["selectable-item-sublabel"] }])
+          }, 8, ["id", "checked", "disabled", "value", "name", "required"])) : w("", !0),
+          e.multiple ? w("", !0) : b(u.$slots, "default", { key: 1 }, void 0, !0),
+          h("div", {
+            class: k([{ "joy-selectable-item__sublabel": u.$slots["selectable-item-sublabel"] }])
           }, [
-            c(r.$slots, "selectable-item-sublabel", {}, void 0, !0)
+            b(u.$slots, "selectable-item-sublabel", {}, void 0, !0)
           ], 2)
         ]),
         _: 3
       }, 8, ["for", "class", "onClick"]))
-    ], 8, Jt));
+    ], 8, Ba));
   }
 });
-const U = /* @__PURE__ */ _(Ct, [["__scopeId", "data-v-46f0bc5e"]]), wt = ["id"], Lt = /* @__PURE__ */ p({
-  __name: "JoySelectableItemGroup",
+const Xe = /* @__PURE__ */ V(Pa, [["__scopeId", "data-v-c40bf83e"]]), qa = ["id"], Ja = /* @__PURE__ */ $({
+  __name: "VJoySelectableItemGroup",
   props: {
     options: {
       type: Array,
       required: !0,
       validator(e) {
-        const l = e.every((t) => Object.keys(t).includes("value")), a = e.every((t) => Object.keys(t).includes("label"));
-        return l && a;
+        const t = e.every((a) => Object.keys(a).includes("value")), l = e.every((a) => Object.keys(a).includes("label"));
+        return t && l;
       }
     },
     id: String,
@@ -1238,35 +2102,35 @@ const U = /* @__PURE__ */ _(Ct, [["__scopeId", "data-v-46f0bc5e"]]), wt = ["id"]
     }
   },
   emits: ["update:value"],
-  setup(e, { emit: l }) {
-    const a = e;
-    function t(s) {
-      return typeof a.value == "string" ? a.value === s.value : (a.value || []).includes(s.value);
+  setup(e, { emit: t }) {
+    const l = e;
+    function a(r) {
+      return typeof l.value == "string" ? l.value === r.value : (l.value || []).includes(r.value);
     }
-    function i(s, f) {
-      if (!a.multiple)
-        return l("update:value", f);
-      let n = [...a.value || []];
-      f && typeof f == "boolean" ? n.push(s) : n.splice(n.indexOf(s), 1), l("update:value", n);
+    function o(r, s) {
+      if (!l.multiple)
+        return t("update:value", s);
+      let n = [...l.value || []];
+      s && typeof s == "boolean" ? n.push(r) : n.splice(n.indexOf(r), 1), t("update:value", n);
     }
-    return (s, f) => (o(), d("fieldset", {
+    return (r, s) => (m(), p("fieldset", {
       id: e.id,
       class: "joy-selectable-item-group__wrapper"
     }, [
-      e.label ? (o(), J(m(C), {
+      e.label ? (m(), P(_(H), {
         key: 0,
         "tag-name": "legend",
         required: e.required && e.requiredMark,
         "optional-label": e.optionalLabel,
         size: e.labelSize
       }, {
-        default: q(() => [
-          B($(e.label), 1)
+        default: L(() => [
+          T(O(e.label), 1)
         ]),
         _: 1
-      }, 8, ["required", "optional-label", "size"])) : y("", !0),
-      u("div", {
-        class: b([
+      }, 8, ["required", "optional-label", "size"])) : w("", !0),
+      h("div", {
+        class: k([
           "joy-selectable-item-group",
           {
             "joy-selectable-item-group--multiple": e.multiple,
@@ -1275,34 +2139,34 @@ const U = /* @__PURE__ */ _(Ct, [["__scopeId", "data-v-46f0bc5e"]]), wt = ["id"]
           }
         ])
       }, [
-        (o(!0), d(A, null, F(e.options, (n) => (o(), J(m(U), {
+        (m(!0), p(fe, null, ye(e.options, (n) => (m(), P(_(Xe), {
           id: n.id,
           key: n.id,
           name: n.name,
           value: n.value,
           multiple: e.multiple,
-          checked: t(n),
-          "onUpdate:checked": (r) => i(n.value, r)
-        }, K({
-          default: q(() => [
-            B($(n.label) + " ", 1)
+          checked: a(n),
+          "onUpdate:checked": (u) => o(n.value, u)
+        }, it({
+          default: L(() => [
+            T(O(n.label) + " ", 1)
           ]),
           _: 2
         }, [
           n.subLabel ? {
             name: "selectable-item-sublabel",
-            fn: q(() => [
-              B($(n.subLabel), 1)
+            fn: L(() => [
+              T(O(n.subLabel), 1)
             ]),
             key: "0"
           } : void 0
         ]), 1032, ["id", "name", "value", "multiple", "checked", "onUpdate:checked"]))), 128))
       ], 2)
-    ], 8, wt));
+    ], 8, qa));
   }
 });
-const zt = /* @__PURE__ */ _(Lt, [["__scopeId", "data-v-cec63fed"]]), Mt = /* @__PURE__ */ p({
-  __name: "JoyWrapper",
+const Ta = /* @__PURE__ */ V(Ja, [["__scopeId", "data-v-3ba17434"]]), za = /* @__PURE__ */ $({
+  __name: "VJoyWrapper",
   props: {
     justify: {
       type: String,
@@ -1322,80 +2186,80 @@ const zt = /* @__PURE__ */ _(Lt, [["__scopeId", "data-v-cec63fed"]]), Mt = /* @_
     }
   },
   setup(e) {
-    return (l, a) => (o(), d("div", {
-      class: b(["joy-wrapper", `joy-wrapper--justify-${e.justify}`, `joy-wrapper--align-${e.align}`, `joy-wrapper--direction-${e.direction}`, `joy-wrapper--wrap-${e.wrap}`])
+    return (t, l) => (m(), p("div", {
+      class: k(["joy-wrapper", `joy-wrapper--justify-${e.justify}`, `joy-wrapper--align-${e.align}`, `joy-wrapper--direction-${e.direction}`, `joy-wrapper--wrap-${e.wrap}`])
     }, [
-      c(l.$slots, "default", {}, void 0, !0)
+      b(t.$slots, "default", {}, void 0, !0)
     ], 2));
   }
 });
-const Et = /* @__PURE__ */ _(Mt, [["__scopeId", "data-v-ce0e1214"]]), Nt = { class: "joy-template__heading" }, Tt = {
+const Aa = /* @__PURE__ */ V(za, [["__scopeId", "data-v-319d995e"]]), Da = { class: "joy-template__heading" }, Ma = {
   key: 0,
   class: "joy-template-slot-back"
-}, Ot = { class: "joy-template__heading___headings" }, Rt = {
+}, Ra = { class: "joy-template__heading___headings" }, Na = {
   key: 0,
   class: "joy-template-slot-title"
-}, At = {
+}, Ha = {
   key: 1,
   class: "joy-template-slot-subtitle"
-}, Ft = {
+}, Wa = {
   key: 0,
   class: "joy-template-slot-main"
-}, Pt = {
+}, Fa = {
   key: 1,
   class: "joy-template-slot-sidebar"
-}, Ht = /* @__PURE__ */ p({
-  __name: "JoyTemplate",
+}, Ua = /* @__PURE__ */ $({
+  __name: "VJoyTemplate",
   props: {
     full: { type: Boolean, default: !1 },
     sidebar: { type: String, default: "right" }
   },
   setup(e) {
-    const l = e, a = w();
-    return (t, i) => (o(), d("main", {
-      class: b(["joy-template", { "joy-template--full": l.full }])
+    const t = e, l = F();
+    return (a, o) => (m(), p("main", {
+      class: k(["joy-template", { "joy-template--full": t.full }])
     }, [
-      u("div", Nt, [
-        m(a)["template-back"] ? (o(), d("div", Tt, [
-          c(t.$slots, "template-back", {}, void 0, !0)
-        ])) : y("", !0),
-        u("div", Ot, [
-          m(a)["template-title"] ? (o(), d("div", Rt, [
-            c(t.$slots, "template-title", {}, void 0, !0)
-          ])) : y("", !0),
-          m(a)["template-subtitle"] ? (o(), d("div", At, [
-            c(t.$slots, "template-subtitle", {}, void 0, !0)
-          ])) : y("", !0)
+      h("div", Da, [
+        _(l)["template-back"] ? (m(), p("div", Ma, [
+          b(a.$slots, "template-back", {}, void 0, !0)
+        ])) : w("", !0),
+        h("div", Ra, [
+          _(l)["template-title"] ? (m(), p("div", Na, [
+            b(a.$slots, "template-title", {}, void 0, !0)
+          ])) : w("", !0),
+          _(l)["template-subtitle"] ? (m(), p("div", Ha, [
+            b(a.$slots, "template-subtitle", {}, void 0, !0)
+          ])) : w("", !0)
         ])
       ]),
-      u("div", {
-        class: b([
+      h("div", {
+        class: k([
           "joy-template__content",
           {
-            "joy-template__content--reverse": l.sidebar === "left"
+            "joy-template__content--reverse": t.sidebar === "left"
           }
         ])
       }, [
-        t.$slots["template-main"] ? (o(), d("div", Ft, [
-          c(t.$slots, "template-main", {}, void 0, !0)
-        ])) : y("", !0),
-        t.$slots["template-sidebar"] ? (o(), d("div", Pt, [
-          c(t.$slots, "template-sidebar", {}, void 0, !0)
-        ])) : y("", !0)
+        a.$slots["template-main"] ? (m(), p("div", Wa, [
+          b(a.$slots, "template-main", {}, void 0, !0)
+        ])) : w("", !0),
+        a.$slots["template-sidebar"] ? (m(), p("div", Fa, [
+          b(a.$slots, "template-sidebar", {}, void 0, !0)
+        ])) : w("", !0)
       ], 2)
     ], 2));
   }
 });
-const Gt = /* @__PURE__ */ _(Ht, [["__scopeId", "data-v-b332d474"]]), Ut = ["aria-disabled"], Wt = ["id", "disabled", "name", "required", "minlength", "value"], Dt = {
+const Ga = /* @__PURE__ */ V(Ua, [["__scopeId", "data-v-a03bc629"]]), Ka = ["aria-disabled"], Qa = ["id", "disabled", "name", "required", "minlength", "value"], Za = {
   key: 0,
   class: "joy-textarea_helpers"
-}, Zt = {
+}, Ya = {
   key: 0,
   name: "check",
   color: "grey",
   size: "xxsmall"
-}, Kt = /* @__PURE__ */ p({
-  __name: "JoyTextarea",
+}, Xa = /* @__PURE__ */ $({
+  __name: "VJoyTextarea",
   props: {
     disabled: {
       type: Boolean,
@@ -1442,102 +2306,102 @@ const Gt = /* @__PURE__ */ _(Ht, [["__scopeId", "data-v-b332d474"]]), Ut = ["ari
     }
   },
   emits: ["update:modelValue"],
-  setup(e, { expose: l, emit: a }) {
-    const t = e, i = S(), s = S(), f = S(!1), n = V(() => t.maxlength ? t.modelValue.length > t.maxlength : !1), r = V(() => t.minlength ? t.modelValue.length < t.minlength : !1);
-    function g() {
-      i.value && t.autogrow && (i.value.style.height = "auto", i.value.style.height = i.value.scrollHeight + "px", s.value && (s.value.style.height = i.value.scrollHeight + "px"));
+  setup(e, { expose: t, emit: l }) {
+    const a = e, o = g(), r = g(), s = g(!1), n = I(() => a.maxlength ? a.modelValue.length > a.maxlength : !1), u = I(() => a.minlength ? a.modelValue.length < a.minlength : !1);
+    function y() {
+      o.value && a.autogrow && (o.value.style.height = "auto", o.value.style.height = o.value.scrollHeight + "px", r.value && (r.value.style.height = o.value.scrollHeight + "px"));
     }
-    N(() => {
-      g();
+    W(() => {
+      y();
     });
-    const k = {
-      onInput: (I) => {
-        a("update:modelValue", I.target.value), g();
+    const c = {
+      onInput: (v) => {
+        l("update:modelValue", v.target.value), y();
       },
       onBlur: () => {
-        f.value = n.value || r.value;
+        s.value = n.value || u.value;
       }
     };
-    return l({
-      isInvalid: f,
+    return t({
+      isInvalid: s,
       valueOverMaxlength: n,
-      valueUnderMinlength: r
-    }), (I, j) => (o(), d("div", {
+      valueUnderMinlength: u
+    }), (v, i) => (m(), p("div", {
       "aria-disabled": e.disabled,
-      class: b([
+      class: k([
         "joy-textarea",
         {
-          "joy-textarea_invalid": f.value || e.invalid,
+          "joy-textarea_invalid": s.value || e.invalid,
           "joy-textarea_disabled": e.disabled,
           "joy-textarea_autogrow": e.autogrow
         }
       ])
     }, [
-      R(m(C), {
+      ce(_(H), {
         for: e.id,
         required: e.required && e.requiredMark,
         "optional-label": e.optionalLabel,
         size: e.labelSize
       }, {
-        default: q(() => [
-          c(I.$slots, "default", {}, () => [
-            B($(e.label), 1)
+        default: L(() => [
+          b(v.$slots, "default", {}, () => [
+            T(O(e.label), 1)
           ], !0)
         ]),
         _: 3
       }, 8, ["for", "required", "optional-label", "size"]),
-      u("div", {
+      h("div", {
         ref_key: "textareaWrapper",
-        ref: s,
+        ref: r,
         class: "joy-textarea_wrapper"
       }, [
-        u("textarea", L(I.$attrs, {
+        h("textarea", K(v.$attrs, {
           id: e.id,
           ref_key: "textarea",
-          ref: i,
+          ref: o,
           class: "joy-native-textarea",
           disabled: e.disabled,
           name: e.name,
           required: e.required,
           minlength: e.minlength,
           value: e.modelValue,
-          onInput: j[0] || (j[0] = //@ts-ignore
-          (...v) => k.onInput && k.onInput(...v)),
-          onBlur: j[1] || (j[1] = //@ts-ignore
-          (...v) => k.onBlur && k.onBlur(...v))
-        }), null, 16, Wt)
+          onInput: i[0] || (i[0] = //@ts-ignore
+          (...d) => c.onInput && c.onInput(...d)),
+          onBlur: i[1] || (i[1] = //@ts-ignore
+          (...d) => c.onBlur && c.onBlur(...d))
+        }), null, 16, Qa)
       ], 512),
-      e.minlength || e.maxlength ? (o(), d("div", Dt, [
-        e.minlength ? (o(), d("p", {
+      e.minlength || e.maxlength ? (m(), p("div", Za, [
+        e.minlength ? (m(), p("p", {
           key: 0,
-          class: b(["joy-textarea-min", { "joy-textarea-min-invalid": e.invalid }])
+          class: k(["joy-textarea-min", { "joy-textarea-min-invalid": e.invalid }])
         }, [
-          m(r) ? y("", !0) : (o(), d("joy-icon", Zt)),
-          B(" " + $(e.minlengthLabel || `Minimum ${e.minlength} characters`), 1)
-        ], 2)) : y("", !0),
-        e.maxlength ? (o(), d("p", {
+          _(u) ? w("", !0) : (m(), p("joy-icon", Ya)),
+          T(" " + O(e.minlengthLabel || `Minimum ${e.minlength} characters`), 1)
+        ], 2)) : w("", !0),
+        e.maxlength ? (m(), p("p", {
           key: 1,
-          class: b(["joy-textarea-count", { "joy-textarea-count-invalid": m(n) }])
-        }, $(e.modelValue.length + "/" + e.maxlength), 3)) : y("", !0)
-      ])) : y("", !0)
-    ], 10, Ut));
+          class: k(["joy-textarea-count", { "joy-textarea-count-invalid": _(n) }])
+        }, O(e.modelValue.length + "/" + e.maxlength), 3)) : w("", !0)
+      ])) : w("", !0)
+    ], 10, Ka));
   }
 });
-const Qt = /* @__PURE__ */ _(Kt, [["__scopeId", "data-v-4505e508"]]), Xt = (e) => (z("data-v-ab8aee40"), e = e(), M(), e), Yt = ["name", "disabled", "checked", "required", "aria-checked", "value"], ea = { class: "joy-toggle__content" }, ta = { class: "joy-toggle__content-label" }, aa = /* @__PURE__ */ Xt(() => /* @__PURE__ */ u("span", { class: "joy-toggle__smile" }, [
-  /* @__PURE__ */ u("svg", {
+const eo = /* @__PURE__ */ V(Xa, [["__scopeId", "data-v-650f33d9"]]), to = (e) => (ee("data-v-79792513"), e = e(), te(), e), lo = ["name", "disabled", "checked", "required", "aria-checked", "value"], ao = { class: "joy-toggle__content" }, oo = { class: "joy-toggle__content-label" }, no = /* @__PURE__ */ to(() => /* @__PURE__ */ h("span", { class: "joy-toggle__smile" }, [
+  /* @__PURE__ */ h("svg", {
     width: "18",
     height: "10",
     viewBox: "0 0 18 10",
     fill: "currentColor",
     xmlns: "http://www.w3.org/2000/svg"
   }, [
-    /* @__PURE__ */ u("path", {
+    /* @__PURE__ */ h("path", {
       d: "M9.0237 9.14856C15.7144 9.14856 17.8736 2.22231 17.9649 1.91853L17.9345 1.94891C18.1778 1.15908 17.7216 0.308485 16.9309 0.0654591C16.1402 -0.177566 15.2886 0.278108 15.0453 1.06794C14.9845 1.25021 13.5551 6.11073 8.99328 6.11073C4.43147 6.11073 3.03249 1.43248 2.97167 1.21983C2.75878 0.399622 1.90724 -0.0560541 1.11652 0.156593C0.295397 0.369241 -0.160787 1.18945 0.0520982 2.00967C0.721165 4.4703 3.48869 9.14856 9.0237 9.14856Z",
       fill: "currentColor"
     })
   ])
-], -1)), la = /* @__PURE__ */ p({
-  __name: "JoyToggle",
+], -1)), io = /* @__PURE__ */ $({
+  __name: "VJoyToggle",
   props: {
     modelValue: {
       type: Boolean,
@@ -1569,16 +2433,16 @@ const Qt = /* @__PURE__ */ _(Kt, [["__scopeId", "data-v-4505e508"]]), Xt = (e) =
     label: String
   },
   emits: ["update:modelValue"],
-  setup(e, { emit: l }) {
-    const a = {
-      onChange: (t) => {
-        const i = t.target.checked;
-        l("update:modelValue", i);
+  setup(e, { emit: t }) {
+    const l = {
+      onChange: (a) => {
+        const o = a.target.checked;
+        t("update:modelValue", o);
       }
     };
-    return (t, i) => (o(), d("div", null, [
-      u("label", {
-        class: b([
+    return (a, o) => (m(), p("div", null, [
+      h("label", {
+        class: k([
           "joy-toggle",
           {
             "joy-toggle__checked": e.modelValue,
@@ -1586,7 +2450,7 @@ const Qt = /* @__PURE__ */ _(Kt, [["__scopeId", "data-v-4505e508"]]), Xt = (e) =
           }
         ])
       }, [
-        u("input", {
+        h("input", {
           ref: "input",
           type: "checkbox",
           class: "joy-toggle__input",
@@ -1597,72 +2461,76 @@ const Qt = /* @__PURE__ */ _(Kt, [["__scopeId", "data-v-4505e508"]]), Xt = (e) =
           required: e.required,
           "aria-checked": e.modelValue,
           value: e.value,
-          onChange: i[0] || (i[0] = //@ts-ignore
-          (...s) => a.onChange && a.onChange(...s))
-        }, null, 40, Yt),
-        u("p", ea, [
-          u("span", ta, [
-            c(t.$slots, "default", {}, () => [
-              B($(e.label), 1)
+          onChange: o[0] || (o[0] = //@ts-ignore
+          (...r) => l.onChange && l.onChange(...r))
+        }, null, 40, lo),
+        h("p", ao, [
+          h("span", oo, [
+            b(a.$slots, "default", {}, () => [
+              T(O(e.label), 1)
             ], !0)
           ]),
-          aa
+          no
         ])
       ], 2)
     ]));
   }
 });
-const na = /* @__PURE__ */ _(la, [["__scopeId", "data-v-ab8aee40"]]), oa = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
+const ro = /* @__PURE__ */ V(io, [["__scopeId", "data-v-79792513"]]), so = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
   __proto__: null,
-  JoyButton: ue,
-  JoyCheckbox: T,
-  JoyCounter: xe,
-  JoyFormError: G,
-  JoyHighlight: Me,
-  JoyInput: Ge,
-  JoyLabel: C,
-  JoyLink: Ke,
-  JoyMultiCheckbox: et,
-  JoyPanel: st,
-  JoyPanelSection: ft,
-  JoyRadio: _t,
-  JoyRadioGroup: St,
-  JoySelect: Bt,
-  JoySelectableItem: U,
-  JoySelectableItemGroup: zt,
-  JoySpinner: P,
-  JoyTemplate: Gt,
-  JoyTextarea: Qt,
-  JoyToggle: na,
-  JoyWrapper: Et
-}, Symbol.toStringTag, { value: "Module" })), da = {
+  VJoyButton: ht,
+  VJoyCheckbox: pe,
+  VJoyCounter: Pt,
+  VJoyDropdown: Il,
+  VJoyDropdownList: Ze,
+  VJoyFormError: Ye,
+  VJoyHighlight: zl,
+  VJoyInput: Gl,
+  VJoyLabel: H,
+  VJoyLink: Xl,
+  VJoyMultiCheckbox: aa,
+  VJoyPanel: fa,
+  VJoyPanelSection: ha,
+  VJoyRadio: ka,
+  VJoyRadioGroup: Va,
+  VJoySelect: Ea,
+  VJoySelectableItem: Xe,
+  VJoySelectableItemGroup: Ta,
+  VJoySpinner: Ne,
+  VJoyTemplate: Ga,
+  VJoyTextarea: eo,
+  VJoyToggle: ro,
+  VJoyWrapper: Aa
+}, Symbol.toStringTag, { value: "Module" })), co = {
   install: (e) => {
-    Object.entries(oa).forEach(([l, a]) => {
-      e.component(l, a);
+    Object.entries(so).forEach(([t, l]) => {
+      e.component(t, l);
     });
   }
 };
 export {
-  ue as JoyButton,
-  T as JoyCheckbox,
-  xe as JoyCounter,
-  G as JoyFormError,
-  Me as JoyHighlight,
-  Ge as JoyInput,
-  C as JoyLabel,
-  Ke as JoyLink,
-  et as JoyMultiCheckbox,
-  st as JoyPanel,
-  ft as JoyPanelSection,
-  _t as JoyRadio,
-  St as JoyRadioGroup,
-  Bt as JoySelect,
-  U as JoySelectableItem,
-  zt as JoySelectableItemGroup,
-  P as JoySpinner,
-  Gt as JoyTemplate,
-  Qt as JoyTextarea,
-  na as JoyToggle,
-  da as JoyVuePlugin,
-  Et as JoyWrapper
+  co as JoyVuePlugin,
+  ht as VJoyButton,
+  pe as VJoyCheckbox,
+  Pt as VJoyCounter,
+  Il as VJoyDropdown,
+  Ze as VJoyDropdownList,
+  Ye as VJoyFormError,
+  zl as VJoyHighlight,
+  Gl as VJoyInput,
+  H as VJoyLabel,
+  Xl as VJoyLink,
+  aa as VJoyMultiCheckbox,
+  fa as VJoyPanel,
+  ha as VJoyPanelSection,
+  ka as VJoyRadio,
+  Va as VJoyRadioGroup,
+  Ea as VJoySelect,
+  Xe as VJoySelectableItem,
+  Ta as VJoySelectableItemGroup,
+  Ne as VJoySpinner,
+  Ga as VJoyTemplate,
+  eo as VJoyTextarea,
+  ro as VJoyToggle,
+  Aa as VJoyWrapper
 };