@maltjoy/core-vue 1.0.0-beta.10 → 1.0.0-beta.11

package/dist/joy-vue.js

@@ -1,5 +1,5 @@
-import { defineComponent as $, openBlock as v, createElementBlock as p, normalizeClass as k, renderSlot as b, createTextVNode as E, toDisplayString as x, useAttrs as Re, computed as I, createBlock as q, resolveDynamicComponent as ce, unref as w, withCtx as L, createCommentVNode as _, createElementVNode as h, ref as g, mergeProps as Q, createVNode as fe, pushScopeId as te, popScopeId as le, getCurrentScope as nt, onScopeDispose as at, getCurrentInstance as it, onMounted as Z, nextTick as Me, watch as P, h as rt, reactive as X, onBeforeUnmount as Ne, normalizeStyle as K, Fragment as ye, renderList as me, normalizeProps as ve, guardReactiveProps as pe, Teleport as st, createSlots as He, useSlots as W, onBeforeMount as ut } from "vue";
-const dt = ["info", "gray", "green", "orange", "red", "teal", "turquoise", "pink", "dark-blue", "yellow"], ct = /* @__PURE__ */ $({
+import { defineComponent as $, openBlock as m, createElementBlock as p, normalizeClass as k, renderSlot as b, createTextVNode as L, toDisplayString as x, useAttrs as Re, computed as I, createBlock as T, resolveDynamicComponent as ce, unref as _, withCtx as E, createCommentVNode as w, createElementVNode as h, ref as g, mergeProps as Q, createVNode as fe, pushScopeId as te, popScopeId as le, getCurrentScope as nt, onScopeDispose as at, getCurrentInstance as it, onMounted as Z, nextTick as Me, watch as C, h as rt, reactive as X, onBeforeUnmount as Ne, normalizeStyle as K, Fragment as ye, renderList as ve, normalizeProps as me, guardReactiveProps as pe, Teleport as st, createSlots as He, useSlots as W, onBeforeMount as ut, inject as dt, provide as ct } from "vue";
+const ft = ["info", "gray", "green", "orange", "red", "teal", "turquoise", "pink", "dark-blue", "yellow"], yt = /* @__PURE__ */ $({
   __name: "VJoyBadge",
   props: {
     /**
@@ -22,43 +22,43 @@ const dt = ["info", "gray", "green", "orange", "red", "teal", "turquoise", "pink
     variant: {
       type: String,
       validator(e) {
-        return dt.includes(e);
+        return ft.includes(e);
       }
     }
   },
   setup(e) {
-    return (t, l) => (v(), p("span", {
+    return (l, t) => (m(), p("span", {
       class: k(["joy-badge", `joy-badge__${e.variant}`, { "joy-badge--with-bulletpoint": e.bulletpoint }]),
       role: "status"
     }, [
-      b(t.$slots, "default", {}, () => [
-        E(x(e.label), 1)
+      b(l.$slots, "default", {}, () => [
+        L(x(e.label), 1)
       ], !0)
     ], 2));
   }
 });
-const V = (e, t) => {
-  const l = e.__vccOpts || e;
-  for (const [o, n] of t)
-    l[o] = n;
-  return l;
-}, ft = /* @__PURE__ */ V(ct, [["__scopeId", "data-v-41907acc"]]), yt = ["teal", "white"], mt = /* @__PURE__ */ $({
+const V = (e, l) => {
+  const t = e.__vccOpts || e;
+  for (const [o, a] of l)
+    t[o] = a;
+  return t;
+}, vt = /* @__PURE__ */ V(yt, [["__scopeId", "data-v-41907acc"]]), mt = ["teal", "white"], pt = /* @__PURE__ */ $({
   __name: "VJoySpinner",
   props: {
     color: {
       type: String,
       validator(e) {
-        return yt.includes(e);
+        return mt.includes(e);
       }
     }
   },
   setup(e) {
-    return (t, l) => (v(), p("div", {
+    return (l, t) => (m(), p("div", {
       class: k(["joy-spinner", `joy-spinner_${e.color}`])
     }, null, 2));
   }
 });
-const We = /* @__PURE__ */ V(mt, [["__scopeId", "data-v-616a29d0"]]), vt = ["primary", "secondary"], pt = ["neutral", "success", "info", "warning", "error"], ht = ["main", "admin", "ghost"], bt = [...vt, ...ht], gt = ["large", "medium", "small", "xsmall", "xxsmall"], _t = ["name", "size"], wt = { class: "joy-button--slot" }, St = ["name", "size"], jt = /* @__PURE__ */ $({
+const We = /* @__PURE__ */ V(pt, [["__scopeId", "data-v-616a29d0"]]), ht = ["primary", "secondary"], bt = ["neutral", "success", "info", "warning", "error"], gt = ["main", "admin", "ghost"], _t = [...ht, ...gt], wt = ["large", "medium", "small", "xsmall", "xxsmall"], St = ["name", "size"], jt = { class: "joy-button--slot" }, kt = ["name", "size"], $t = /* @__PURE__ */ $({
   __name: "VJoyButton",
   props: {
     /**
@@ -92,7 +92,7 @@ const We = /* @__PURE__ */ V(mt, [["__scopeId", "data-v-616a29d0"]]), vt = ["pri
       type: String,
       default: "primary",
       validator(e) {
-        return bt.includes(e);
+        return _t.includes(e);
       }
     },
     /** Button or Link size */
@@ -100,13 +100,13 @@ const We = /* @__PURE__ */ V(mt, [["__scopeId", "data-v-616a29d0"]]), vt = ["pri
       type: String,
       default: "medium",
       validator(e) {
-        return gt.includes(e);
+        return wt.includes(e);
       }
     }
   },
   setup(e) {
-    const t = e, l = Re(), o = I(() => {
-      switch (t.size) {
+    const l = e, t = Re(), o = I(() => {
+      switch (l.size) {
         case "xxsmall":
           return "xxsmall";
         case "xsmall":
@@ -116,10 +116,10 @@ const We = /* @__PURE__ */ V(mt, [["__scopeId", "data-v-616a29d0"]]), vt = ["pri
         default:
           return "small";
       }
-    }), n = I(() => ["white", "ghost", "secondary"].includes(t.variant) ? "teal" : "white");
-    return (r, s) => (v(), q(ce(w(l).href ? "a" : "button"), {
-      disabled: e.loading || w(l).disabled,
-      type: w(l).type || "button",
+    }), a = I(() => ["white", "ghost", "secondary"].includes(l.variant) ? "teal" : "white");
+    return (r, s) => (m(), T(ce(_(t).href ? "a" : "button"), {
+      disabled: e.loading || _(t).disabled,
+      type: _(t).type || "button",
       class: k([
         "joy-button",
         `joy-button_${e.variant}`,
@@ -130,36 +130,36 @@ const We = /* @__PURE__ */ V(mt, [["__scopeId", "data-v-616a29d0"]]), vt = ["pri
         }
       ])
     }, {
-      default: L(() => [
-        e.icon && e.iconPosition === "left" ? (v(), p("joy-icon", {
+      default: E(() => [
+        e.icon && e.iconPosition === "left" ? (m(), p("joy-icon", {
           key: 0,
           class: "joy-button_icon joy-button_icon--left",
           name: e.icon,
-          size: w(o),
+          size: _(o),
           lazy: !1
-        }, null, 8, _t)) : _("", !0),
-        e.loading ? (v(), q(We, {
+        }, null, 8, St)) : w("", !0),
+        e.loading ? (m(), T(We, {
           key: 1,
-          color: w(n)
-        }, null, 8, ["color"])) : _("", !0),
-        h("span", wt, [
+          color: _(a)
+        }, null, 8, ["color"])) : w("", !0),
+        h("span", jt, [
           b(r.$slots, "default", {}, () => [
-            E(x(e.label), 1)
+            L(x(e.label), 1)
           ], !0)
         ]),
-        e.icon && e.iconPosition === "right" ? (v(), p("joy-icon", {
+        e.icon && e.iconPosition === "right" ? (m(), p("joy-icon", {
           key: 2,
           class: "joy-button_icon joy-button_icon--right",
           name: e.icon,
-          size: w(o),
+          size: _(o),
           lazy: !1
-        }, null, 8, St)) : _("", !0)
+        }, null, 8, kt)) : w("", !0)
       ]),
       _: 3
     }, 8, ["disabled", "type", "class"]));
   }
 });
-const kt = /* @__PURE__ */ V(jt, [["__scopeId", "data-v-44b223fb"]]), $t = ["aria-checked", "aria-hidden"], Vt = { class: "joy-checkbox__input-wrapper" }, xt = ["id", "name", "disabled", "checked", "required", "aria-checked", "value", "indeterminate"], Ot = { class: "joy-checkbox__content-wrapper" }, It = { class: "joy-checkbox__content" }, Bt = /* @__PURE__ */ $({
+const Vt = /* @__PURE__ */ V($t, [["__scopeId", "data-v-44b223fb"]]), xt = ["aria-checked", "aria-hidden"], Ot = { class: "joy-checkbox__input-wrapper" }, It = ["id", "name", "disabled", "checked", "required", "aria-checked", "value", "indeterminate"], Bt = { class: "joy-checkbox__content-wrapper" }, Et = { class: "joy-checkbox__content" }, Lt = /* @__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 */
@@ -206,22 +206,22 @@ const kt = /* @__PURE__ */ V(jt, [["__scopeId", "data-v-44b223fb"]]), $t = ["ari
     }
   },
   emits: ["update:checked", "focus", "blur"],
-  setup(e, { expose: t, emit: l }) {
-    const o = e, n = g(), r = g(o.indeterminate), s = g(!1), a = {
+  setup(e, { expose: l, emit: t }) {
+    const o = e, a = g(), r = g(o.indeterminate), s = g(!1), n = {
       onChange: (c) => {
         const f = c.target.checked;
-        r.value = !1, l("update:checked", f);
+        r.value = !1, t("update:checked", f);
       },
       onFocus: () => {
-        s.value = !0, l("focus");
+        s.value = !0, t("focus");
       },
       onBlur: () => {
-        s.value = !1, l("blur");
+        s.value = !1, t("blur");
       }
     };
-    return t({
+    return l({
       isIndeterminate: r
-    }), (c, f) => (v(), p("div", {
+    }), (c, f) => (m(), p("div", {
       class: "joy-checkbox__wrapper",
       "aria-checked": e.checked,
       "aria-hidden": e.disabled
@@ -237,11 +237,11 @@ const kt = /* @__PURE__ */ V(jt, [["__scopeId", "data-v-44b223fb"]]), $t = ["ari
           }
         ])
       }, [
-        h("div", Vt, [
+        h("div", Ot, [
           h("input", {
             id: e.id,
             ref_key: "input",
-            ref: n,
+            ref: a,
             type: "checkbox",
             class: "joy-checkbox__input",
             role: "checkbox",
@@ -253,41 +253,41 @@ const kt = /* @__PURE__ */ V(jt, [["__scopeId", "data-v-44b223fb"]]), $t = ["ari
             value: e.value,
             indeterminate: r.value,
             onChange: f[0] || (f[0] = //@ts-ignore
-            (...u) => a.onChange && a.onChange(...u)),
+            (...u) => n.onChange && n.onChange(...u)),
             onFocus: f[1] || (f[1] = //@ts-ignore
-            (...u) => a.onFocus && a.onFocus(...u)),
+            (...u) => n.onFocus && n.onFocus(...u)),
             onBlur: f[2] || (f[2] = //@ts-ignore
-            (...u) => a.onBlur && a.onBlur(...u))
-          }, null, 40, xt)
+            (...u) => n.onBlur && n.onBlur(...u))
+          }, null, 40, It)
         ]),
-        h("div", Ot, [
+        h("div", Bt, [
           b(c.$slots, "default", {}, () => [
-            E(x(e.label), 1)
+            L(x(e.label), 1)
           ], !0),
-          h("div", It, [
+          h("div", Et, [
             b(c.$slots, "checkbox-content", {}, void 0, !0)
           ])
         ])
       ], 2)
-    ], 8, $t));
+    ], 8, xt));
   }
 });
-const he = /* @__PURE__ */ V(Bt, [["__scopeId", "data-v-e8b172ed"]]), Ue = (e) => (te("data-v-0d1ab3f2"), e = e(), le(), e), Lt = { class: "joy-counter" }, Et = ["aria-label", "disabled"], Pt = /* @__PURE__ */ Ue(() => /* @__PURE__ */ h("joy-icon", {
+const he = /* @__PURE__ */ V(Lt, [["__scopeId", "data-v-e8b172ed"]]), Ue = (e) => (te("data-v-0d1ab3f2"), e = e(), le(), e), Ct = { class: "joy-counter" }, Pt = ["aria-label", "disabled"], Jt = /* @__PURE__ */ Ue(() => /* @__PURE__ */ h("joy-icon", {
   name: "minus",
   color: "teal",
   lazy: !1
-}, null, -1)), Ct = [
-  Pt
-], Jt = { class: "joy-counter__input-wrapper" }, qt = ["id", "min", "max", "aria-invalid", "name", "required", "value"], Tt = ["aria-label", "disabled"], zt = /* @__PURE__ */ Ue(() => /* @__PURE__ */ h("joy-icon", {
+}, null, -1)), Tt = [
+  Jt
+], qt = { class: "joy-counter__input-wrapper" }, zt = ["id", "min", "max", "aria-invalid", "name", "required", "value"], At = ["aria-label", "disabled"], Ft = /* @__PURE__ */ Ue(() => /* @__PURE__ */ h("joy-icon", {
   name: "add",
   lazy: !1,
   color: "teal"
-}, null, -1)), At = [
-  zt
-], Ft = {
+}, null, -1)), Dt = [
+  Ft
+], Rt = {
   key: 0,
   class: "joy-counter_error"
-}, Dt = /* @__PURE__ */ $({
+}, Mt = /* @__PURE__ */ $({
   __name: "VJoyCounter",
   props: {
     /** Removes any interactivity */
@@ -353,27 +353,27 @@ const he = /* @__PURE__ */ V(Bt, [["__scopeId", "data-v-e8b172ed"]]), Ue = (e) =
     }
   },
   emits: ["update:modelValue"],
-  setup(e, { expose: t, emit: l }) {
-    const o = e, n = g(!1), r = g(!1);
+  setup(e, { expose: l, emit: t }) {
+    const o = e, a = g(!1), r = g(!1);
     function s() {
       const d = f(!1);
-      d >= 0 ? l("update:modelValue", d <= o.min ? o.min : d) : l("update:modelValue", 0), c();
+      d >= 0 ? t("update:modelValue", d <= o.min ? o.min : d) : t("update:modelValue", 0), c();
     }
-    function a() {
+    function n() {
       const d = f();
-      o.max && d <= o.max ? l("update:modelValue", d >= o.max ? o.max : d) : o.max && d > o.max ? l("update:modelValue", o.max) : l("update:modelValue", d), c();
+      o.max && d <= o.max ? t("update:modelValue", d >= o.max ? o.max : d) : o.max && d > o.max ? t("update:modelValue", o.max) : t("update:modelValue", d), c();
     }
     function c() {
-      n.value = !u();
+      a.value = !u();
     }
     function f(d = !0) {
       const j = o.step.toString().split("."), S = j.length === 2 ? j[1].length : 0;
       return parseFloat(d ? (o.modelValue + o.step).toFixed(S) : (o.modelValue - o.step).toFixed(S));
     }
     function u() {
-      return m() && i();
+      return v() && i();
     }
-    function m() {
+    function v() {
       return !o.max || o.modelValue <= o.max;
     }
     function i() {
@@ -381,7 +381,7 @@ const he = /* @__PURE__ */ V(Bt, [["__scopeId", "data-v-e8b172ed"]]), Ue = (e) =
     }
     const y = {
       onInput: (d) => {
-        l("update:modelValue", +d.target.value || 0), n.value = !1;
+        t("update:modelValue", +d.target.value || 0), a.value = !1;
       },
       onFocus: () => {
         r.value = !0;
@@ -390,23 +390,23 @@ const he = /* @__PURE__ */ V(Bt, [["__scopeId", "data-v-e8b172ed"]]), Ue = (e) =
         r.value = !1, c();
       }
     };
-    return t({
+    return l({
       props: o
-    }), (d, j) => (v(), p("div", Lt, [
-      e.label ? (v(), q(w(N), {
+    }), (d, j) => (m(), p("div", Ct, [
+      e.label ? (m(), T(_(N), {
         key: 0,
         for: e.id,
         required: e.required && e.requiredMark,
         "optional-label": e.optionalLabel,
         size: e.labelSize
       }, {
-        default: L(() => [
+        default: E(() => [
           b(d.$slots, "default", {}, () => [
-            E(x(e.label), 1)
+            L(x(e.label), 1)
           ], !0)
         ]),
         _: 3
-      }, 8, ["for", "required", "optional-label", "size"])) : _("", !0),
+      }, 8, ["for", "required", "optional-label", "size"])) : w("", !0),
       h("div", {
         class: k(["joy-counter__wrapper", { "joy-counter--focusing": r.value }])
       }, [
@@ -416,16 +416,16 @@ const he = /* @__PURE__ */ V(Bt, [["__scopeId", "data-v-e8b172ed"]]), Ue = (e) =
           "aria-label": e.labelDecrement,
           disabled: e.modelValue <= e.min,
           onClick: s
-        }, Ct, 8, Et),
-        h("div", Jt, [
+        }, Tt, 8, Pt),
+        h("div", qt, [
           h("input", Q({
             id: e.id,
             ref: "input",
             type: "number",
-            class: { "joy-counter__invalid": e.invalid || n.value },
+            class: { "joy-counter__invalid": e.invalid || a.value },
             min: e.min,
             max: e.max,
-            "aria-invalid": e.invalid || n.value,
+            "aria-invalid": e.invalid || a.value,
             name: e.name,
             required: e.required,
             step: "any",
@@ -437,65 +437,65 @@ const he = /* @__PURE__ */ V(Bt, [["__scopeId", "data-v-e8b172ed"]]), Ue = (e) =
             (...S) => y.onBlur && y.onBlur(...S)),
             onFocus: j[2] || (j[2] = //@ts-ignore
             (...S) => y.onFocus && y.onFocus(...S))
-          }), null, 16, qt)
+          }), null, 16, zt)
         ]),
         h("button", {
           class: "joy-counter__increment",
           type: "button",
           "aria-label": e.labelIncrement,
           disabled: e.max ? e.modelValue >= e.max : !1,
-          onClick: a
-        }, At, 8, Tt),
-        e.invalid && e.errorMessage ? (v(), p("div", Ft, [
-          fe(w(tt), { "no-html-error-text": e.errorMessage }, null, 8, ["no-html-error-text"])
-        ])) : _("", !0)
+          onClick: n
+        }, Dt, 8, At),
+        e.invalid && e.errorMessage ? (m(), p("div", Rt, [
+          fe(_(tt), { "no-html-error-text": e.errorMessage }, null, 8, ["no-html-error-text"])
+        ])) : w("", !0)
       ], 2)
     ]));
   }
 });
-const Rt = /* @__PURE__ */ V(Dt, [["__scopeId", "data-v-0d1ab3f2"]]);
+const Nt = /* @__PURE__ */ V(Mt, [["__scopeId", "data-v-0d1ab3f2"]]);
 var _e;
 const U = typeof window < "u", Ge = (e) => typeof e == "string", z = () => {
 }, ee = U && ((_e = window == null ? void 0 : window.navigator) == null ? void 0 : _e.userAgent) && /iP(ad|hone|od)/.test(window.navigator.userAgent);
-function C(e) {
-  return typeof e == "function" ? e() : w(e);
+function P(e) {
+  return typeof e == "function" ? e() : _(e);
 }
-function Ke(e, t) {
-  function l(...o) {
-    return new Promise((n, r) => {
-      Promise.resolve(e(() => t.apply(this, o), { fn: t, thisArg: this, args: o })).then(n).catch(r);
+function Ke(e, l) {
+  function t(...o) {
+    return new Promise((a, r) => {
+      Promise.resolve(e(() => l.apply(this, o), { fn: l, thisArg: this, args: o })).then(a).catch(r);
     });
   }
-  return l;
+  return t;
 }
-function Mt(e, t = {}) {
-  let l, o, n = z;
-  const r = (a) => {
-    clearTimeout(a), n(), n = z;
+function Ht(e, l = {}) {
+  let t, o, a = z;
+  const r = (n) => {
+    clearTimeout(n), a(), a = z;
   };
-  return (a) => {
-    const c = C(e), f = C(t.maxWait);
-    return l && r(l), c <= 0 || f !== void 0 && f <= 0 ? (o && (r(o), o = null), Promise.resolve(a())) : new Promise((u, m) => {
-      n = t.rejectOnCancel ? m : u, f && !o && (o = setTimeout(() => {
-        l && r(l), o = null, u(a());
-      }, f)), l = setTimeout(() => {
-        o && r(o), o = null, u(a());
+  return (n) => {
+    const c = P(e), f = P(l.maxWait);
+    return t && r(t), c <= 0 || f !== void 0 && f <= 0 ? (o && (r(o), o = null), Promise.resolve(n())) : new Promise((u, v) => {
+      a = l.rejectOnCancel ? v : u, f && !o && (o = setTimeout(() => {
+        t && r(t), o = null, u(n());
+      }, f)), t = setTimeout(() => {
+        o && r(o), o = null, u(n());
       }, c);
     });
   };
 }
-function Nt(e, t = !0, l = !0, o = !1) {
-  let n = 0, r, s = !0, a = z, c;
+function Wt(e, l = !0, t = !0, o = !1) {
+  let a = 0, r, s = !0, n = z, c;
   const f = () => {
-    r && (clearTimeout(r), r = void 0, a(), a = z);
+    r && (clearTimeout(r), r = void 0, n(), n = z);
   };
-  return (m) => {
-    const i = C(e), y = Date.now() - n, d = () => c = m();
-    return f(), i <= 0 ? (n = Date.now(), d()) : (y > i && (l || !s) ? (n = Date.now(), d()) : t && (c = new Promise((j, S) => {
-      a = o ? S : j, r = setTimeout(() => {
-        n = Date.now(), s = !0, j(d()), f();
+  return (v) => {
+    const i = P(e), y = Date.now() - a, d = () => c = v();
+    return f(), i <= 0 ? (a = Date.now(), d()) : (y > i && (t || !s) ? (a = Date.now(), d()) : l && (c = new Promise((j, S) => {
+      n = o ? S : j, r = setTimeout(() => {
+        a = Date.now(), s = !0, j(d()), f();
       }, Math.max(0, i - y));
-    })), !l && !r && (r = setTimeout(() => s = !0, i)), s = !1, c);
+    })), !t && !r && (r = setTimeout(() => s = !0, i)), s = !1, c);
   };
 }
 const R = {
@@ -503,55 +503,55 @@ const R = {
   updated: "updated",
   unmounted: "unmounted"
 };
-function Ht(e) {
+function Ut(e) {
   return e;
 }
 function G(e) {
   return nt() ? (at(e), !0) : !1;
 }
-function Wt(e, t = 200, l = {}) {
-  return Ke(Mt(t, l), e);
+function Gt(e, l = 200, t = {}) {
+  return Ke(Ht(l, t), e);
 }
-function Ut(e, t = 200, l = !1, o = !0, n = !1) {
-  return Ke(Nt(t, l, o, n), e);
+function Kt(e, l = 200, t = !1, o = !0, a = !1) {
+  return Ke(Wt(l, t, o, a), e);
 }
-function Gt(e) {
+function Qt(e) {
   return typeof e == "function" ? I(e) : g(e);
 }
-function Qe(e, t = !0) {
-  it() ? Z(e) : t ? e() : Me(e);
+function Qe(e, l = !0) {
+  it() ? Z(e) : l ? e() : Me(e);
 }
 function H(e) {
-  var t;
-  const l = C(e);
-  return (t = l == null ? void 0 : l.$el) != null ? t : l;
+  var l;
+  const t = P(e);
+  return (l = t == null ? void 0 : t.$el) != null ? l : t;
 }
 const be = U ? window : void 0;
 U && window.document;
 U && window.navigator;
 U && window.location;
 function ae(...e) {
-  let t, l, o, n;
-  if (Ge(e[0]) || Array.isArray(e[0]) ? ([l, o, n] = e, t = be) : [t, l, o, n] = e, !t)
+  let l, t, o, a;
+  if (Ge(e[0]) || Array.isArray(e[0]) ? ([t, o, a] = e, l = be) : [l, t, o, a] = e, !l)
     return z;
-  Array.isArray(l) || (l = [l]), Array.isArray(o) || (o = [o]);
+  Array.isArray(t) || (t = [t]), Array.isArray(o) || (o = [o]);
   const r = [], s = () => {
     r.forEach((u) => u()), r.length = 0;
-  }, a = (u, m, i, y) => (u.addEventListener(m, i, y), () => u.removeEventListener(m, i, y)), c = P(() => [H(t), C(n)], ([u, m]) => {
-    s(), u && r.push(...l.flatMap((i) => o.map((y) => a(u, i, y, m))));
+  }, n = (u, v, i, y) => (u.addEventListener(v, i, y), () => u.removeEventListener(v, i, y)), c = C(() => [H(l), P(a)], ([u, v]) => {
+    s(), u && r.push(...t.flatMap((i) => o.map((y) => n(u, i, y, v))));
   }, { immediate: !0, flush: "post" }), f = () => {
     c(), s();
   };
   return G(f), f;
 }
 let we = !1;
-function Kt(e, t, l = {}) {
-  const { window: o = be, ignore: n = [], capture: r = !0, detectIframe: s = !1 } = l;
+function Zt(e, l, t = {}) {
+  const { window: o = be, ignore: a = [], capture: r = !0, detectIframe: s = !1 } = t;
   if (!o)
     return;
   ee && !we && (we = !0, Array.from(o.document.body.children).forEach((i) => i.addEventListener("click", z)));
-  let a = !0;
-  const c = (i) => n.some((y) => {
+  let n = !0;
+  const c = (i) => a.some((y) => {
     if (typeof y == "string")
       return Array.from(o.document.querySelectorAll(y)).some((d) => d === i.target || i.composedPath().includes(d));
     {
@@ -562,53 +562,53 @@ function Kt(e, t, l = {}) {
     ae(o, "click", (i) => {
       const y = H(e);
       if (!(!y || y === i.target || i.composedPath().includes(y))) {
-        if (i.detail === 0 && (a = !c(i)), !a) {
-          a = !0;
+        if (i.detail === 0 && (n = !c(i)), !n) {
+          n = !0;
           return;
         }
-        t(i);
+        l(i);
       }
     }, { passive: !0, capture: r }),
     ae(o, "pointerdown", (i) => {
       const y = H(e);
-      y && (a = !i.composedPath().includes(y) && !c(i));
+      y && (n = !i.composedPath().includes(y) && !c(i));
     }, { passive: !0 }),
     s && ae(o, "blur", (i) => {
       var y;
       const d = H(e);
-      ((y = o.document.activeElement) == null ? void 0 : y.tagName) === "IFRAME" && !(d != null && d.contains(o.document.activeElement)) && t(i);
+      ((y = o.document.activeElement) == null ? void 0 : y.tagName) === "IFRAME" && !(d != null && d.contains(o.document.activeElement)) && l(i);
     })
   ].filter(Boolean);
   return () => u.forEach((i) => i());
 }
-function Qt(e, t = !1) {
-  const l = g(), o = () => l.value = Boolean(e());
-  return o(), Qe(o, t), l;
+function Yt(e, l = !1) {
+  const t = g(), o = () => t.value = Boolean(e());
+  return o(), Qe(o, l), t;
 }
 const ie = typeof globalThis < "u" ? globalThis : typeof window < "u" ? window : typeof global < "u" ? global : typeof self < "u" ? self : {}, re = "__vueuse_ssr_handlers__";
 ie[re] = ie[re] || {};
 ie[re];
-var Se = Object.getOwnPropertySymbols, Zt = Object.prototype.hasOwnProperty, Yt = Object.prototype.propertyIsEnumerable, Xt = (e, t) => {
-  var l = {};
+var Se = Object.getOwnPropertySymbols, Xt = Object.prototype.hasOwnProperty, el = Object.prototype.propertyIsEnumerable, tl = (e, l) => {
+  var t = {};
   for (var o in e)
-    Zt.call(e, o) && t.indexOf(o) < 0 && (l[o] = e[o]);
+    Xt.call(e, o) && l.indexOf(o) < 0 && (t[o] = e[o]);
   if (e != null && Se)
     for (var o of Se(e))
-      t.indexOf(o) < 0 && Yt.call(e, o) && (l[o] = e[o]);
-  return l;
+      l.indexOf(o) < 0 && el.call(e, o) && (t[o] = e[o]);
+  return t;
 };
-function el(e, t, l = {}) {
-  const o = l, { window: n = be } = o, r = Xt(o, ["window"]);
+function ll(e, l, t = {}) {
+  const o = t, { window: a = be } = o, r = tl(o, ["window"]);
   let s;
-  const a = Qt(() => n && "ResizeObserver" in n), c = () => {
+  const n = Yt(() => a && "ResizeObserver" in a), c = () => {
     s && (s.disconnect(), s = void 0);
-  }, f = P(() => H(e), (m) => {
-    c(), a.value && n && m && (s = new ResizeObserver(t), s.observe(m, r));
+  }, f = C(() => H(e), (v) => {
+    c(), n.value && a && v && (s = new ResizeObserver(l), s.observe(v, r));
   }, { immediate: !0, flush: "post" }), u = () => {
     c(), f();
   };
   return G(u), {
-    isSupported: a,
+    isSupported: n,
     stop: u
   };
 }
@@ -616,27 +616,27 @@ var je;
 (function(e) {
   e.UP = "UP", e.RIGHT = "RIGHT", e.DOWN = "DOWN", e.LEFT = "LEFT", e.NONE = "NONE";
 })(je || (je = {}));
-function tl(e) {
-  const t = g(e == null ? void 0 : e.element), l = g(e == null ? void 0 : e.input);
+function ol(e) {
+  const l = g(e == null ? void 0 : e.element), t = g(e == null ? void 0 : e.input);
   function o() {
-    var n, r;
-    t.value && (t.value.style.height = "1px", t.value.style.height = `${(n = t.value) == null ? void 0 : n.scrollHeight}px`, (r = e == null ? void 0 : e.onResize) == null || r.call(e));
+    var a, r;
+    l.value && (l.value.style.height = "1px", l.value.style.height = `${(a = l.value) == null ? void 0 : a.scrollHeight}px`, (r = e == null ? void 0 : e.onResize) == null || r.call(e));
   }
-  return P([l, t], o, { immediate: !0 }), el(t, () => o()), e != null && e.watch && P(e.watch, o, { immediate: !0, deep: !0 }), {
-    textarea: t,
-    input: l,
+  return C([t, l], o, { immediate: !0 }), ll(l, () => o()), e != null && e.watch && C(e.watch, o, { immediate: !0, deep: !0 }), {
+    textarea: l,
+    input: t,
     triggerResize: o
   };
 }
-var ll = Object.defineProperty, ke = Object.getOwnPropertySymbols, ol = Object.prototype.hasOwnProperty, nl = Object.prototype.propertyIsEnumerable, $e = (e, t, l) => t in e ? ll(e, t, { enumerable: !0, configurable: !0, writable: !0, value: l }) : e[t] = l, al = (e, t) => {
-  for (var l in t || (t = {}))
-    ol.call(t, l) && $e(e, l, t[l]);
+var nl = Object.defineProperty, ke = Object.getOwnPropertySymbols, al = Object.prototype.hasOwnProperty, il = Object.prototype.propertyIsEnumerable, $e = (e, l, t) => l in e ? nl(e, l, { enumerable: !0, configurable: !0, writable: !0, value: t }) : e[l] = t, rl = (e, l) => {
+  for (var t in l || (l = {}))
+    al.call(l, t) && $e(e, t, l[t]);
   if (ke)
-    for (var l of ke(t))
-      nl.call(t, l) && $e(e, l, t[l]);
+    for (var t of ke(l))
+      il.call(l, t) && $e(e, t, l[t]);
   return e;
 };
-const il = {
+const sl = {
   easeInSine: [0.12, 0, 0.39, 0],
   easeOutSine: [0.61, 1, 0.88, 1],
   easeInOutSine: [0.37, 0, 0.63, 1],
@@ -662,51 +662,51 @@ const il = {
   easeOutBack: [0.34, 1.56, 0.64, 1],
   easeInOutBack: [0.68, -0.6, 0.32, 1.6]
 };
-al({
-  linear: Ht
-}, il);
-const rl = /* @__PURE__ */ $({
+rl({
+  linear: Ut
+}, sl);
+const ul = /* @__PURE__ */ $({
   name: "OnClickOutside",
   props: ["as", "options"],
   emits: ["trigger"],
-  setup(e, { slots: t, emit: l }) {
+  setup(e, { slots: l, emit: t }) {
     const o = g();
-    return Kt(o, (n) => {
-      l("trigger", n);
+    return Zt(o, (a) => {
+      t("trigger", a);
     }, e.options), () => {
-      if (t.default)
-        return rt(e.as || "div", { ref: o }, t.default());
+      if (l.default)
+        return rt(e.as || "div", { ref: o }, l.default());
     };
   }
 });
 function J(e) {
-  var t;
-  const l = C(e);
-  return (t = l == null ? void 0 : l.$el) != null ? t : l;
+  var l;
+  const t = P(e);
+  return (l = t == null ? void 0 : t.$el) != null ? l : t;
 }
 const M = U ? window : void 0;
 function A(...e) {
-  let t, l, o, n;
-  if (Ge(e[0]) || Array.isArray(e[0]) ? ([l, o, n] = e, t = M) : [t, l, o, n] = e, !t)
+  let l, t, o, a;
+  if (Ge(e[0]) || Array.isArray(e[0]) ? ([t, o, a] = e, l = M) : [l, t, o, a] = e, !l)
     return z;
-  Array.isArray(l) || (l = [l]), Array.isArray(o) || (o = [o]);
+  Array.isArray(t) || (t = [t]), Array.isArray(o) || (o = [o]);
   const r = [], s = () => {
     r.forEach((u) => u()), r.length = 0;
-  }, a = (u, m, i, y) => (u.addEventListener(m, i, y), () => u.removeEventListener(m, i, y)), c = P(() => [J(t), C(n)], ([u, m]) => {
-    s(), u && r.push(...l.flatMap((i) => o.map((y) => a(u, i, y, m))));
+  }, n = (u, v, i, y) => (u.addEventListener(v, i, y), () => u.removeEventListener(v, i, y)), c = C(() => [J(l), P(a)], ([u, v]) => {
+    s(), u && r.push(...t.flatMap((i) => o.map((y) => n(u, i, y, v))));
   }, { immediate: !0, flush: "post" }), f = () => {
     c(), s();
   };
   return G(f), f;
 }
 let Ve = !1;
-function xe(e, t, l = {}) {
-  const { window: o = M, ignore: n = [], capture: r = !0, detectIframe: s = !1 } = l;
+function xe(e, l, t = {}) {
+  const { window: o = M, ignore: a = [], capture: r = !0, detectIframe: s = !1 } = t;
   if (!o)
     return;
   ee && !Ve && (Ve = !0, Array.from(o.document.body.children).forEach((i) => i.addEventListener("click", z)));
-  let a = !0;
-  const c = (i) => n.some((y) => {
+  let n = !0;
+  const c = (i) => a.some((y) => {
     if (typeof y == "string")
       return Array.from(o.document.querySelectorAll(y)).some((d) => d === i.target || i.composedPath().includes(d));
     {
@@ -717,154 +717,154 @@ function xe(e, t, l = {}) {
     A(o, "click", (i) => {
       const y = J(e);
       if (!(!y || y === i.target || i.composedPath().includes(y))) {
-        if (i.detail === 0 && (a = !c(i)), !a) {
-          a = !0;
+        if (i.detail === 0 && (n = !c(i)), !n) {
+          n = !0;
           return;
         }
-        t(i);
+        l(i);
       }
     }, { passive: !0, capture: r }),
     A(o, "pointerdown", (i) => {
       const y = J(e);
-      y && (a = !i.composedPath().includes(y) && !c(i));
+      y && (n = !i.composedPath().includes(y) && !c(i));
     }, { passive: !0 }),
     s && A(o, "blur", (i) => {
       var y;
       const d = J(e);
-      ((y = o.document.activeElement) == null ? void 0 : y.tagName) === "IFRAME" && !(d != null && d.contains(o.document.activeElement)) && t(i);
+      ((y = o.document.activeElement) == null ? void 0 : y.tagName) === "IFRAME" && !(d != null && d.contains(o.document.activeElement)) && l(i);
     })
   ].filter(Boolean);
   return () => u.forEach((i) => i());
 }
 R.mounted + "", R.unmounted + "";
-const sl = (e) => typeof e == "function" ? e : typeof e == "string" ? (t) => t.key === e : Array.isArray(e) ? (t) => e.includes(t.key) : () => !0;
+const dl = (e) => typeof e == "function" ? e : typeof e == "string" ? (l) => l.key === e : Array.isArray(e) ? (l) => e.includes(l.key) : () => !0;
 function Oe(...e) {
-  let t, l, o = {};
-  e.length === 3 ? (t = e[0], l = e[1], o = e[2]) : e.length === 2 ? typeof e[1] == "object" ? (t = !0, l = e[0], o = e[1]) : (t = e[0], l = e[1]) : (t = !0, l = e[0]);
-  const { target: n = M, eventName: r = "keydown", passive: s = !1 } = o, a = sl(t);
-  return A(n, r, (f) => {
-    a(f) && l(f);
+  let l, t, o = {};
+  e.length === 3 ? (l = e[0], t = e[1], o = e[2]) : e.length === 2 ? typeof e[1] == "object" ? (l = !0, t = e[0], o = e[1]) : (l = e[0], t = e[1]) : (l = !0, t = e[0]);
+  const { target: a = M, eventName: r = "keydown", passive: s = !1 } = o, n = dl(l);
+  return A(a, r, (f) => {
+    n(f) && t(f);
   }, s);
 }
-var ul = Object.defineProperty, Ie = Object.getOwnPropertySymbols, dl = Object.prototype.hasOwnProperty, cl = Object.prototype.propertyIsEnumerable, Be = (e, t, l) => t in e ? ul(e, t, { enumerable: !0, configurable: !0, writable: !0, value: l }) : e[t] = l, fl = (e, t) => {
-  for (var l in t || (t = {}))
-    dl.call(t, l) && Be(e, l, t[l]);
+var cl = Object.defineProperty, Ie = Object.getOwnPropertySymbols, fl = Object.prototype.hasOwnProperty, yl = Object.prototype.propertyIsEnumerable, Be = (e, l, t) => l in e ? cl(e, l, { enumerable: !0, configurable: !0, writable: !0, value: t }) : e[l] = t, vl = (e, l) => {
+  for (var t in l || (l = {}))
+    fl.call(l, t) && Be(e, t, l[t]);
   if (Ie)
-    for (var l of Ie(t))
-      cl.call(t, l) && Be(e, l, t[l]);
+    for (var t of Ie(l))
+      yl.call(l, t) && Be(e, t, l[t]);
   return e;
 };
 R.mounted + "";
-const yl = 500;
-function Le(e, t, l) {
-  var o, n;
+const ml = 500;
+function Ee(e, l, t) {
+  var o, a;
   const r = I(() => J(e));
   let s;
-  function a() {
+  function n() {
     s && (clearTimeout(s), s = void 0);
   }
   function c(u) {
-    var m, i, y, d;
-    (m = l == null ? void 0 : l.modifiers) != null && m.self && u.target !== r.value || (a(), (i = l == null ? void 0 : l.modifiers) != null && i.prevent && u.preventDefault(), (y = l == null ? void 0 : l.modifiers) != null && y.stop && u.stopPropagation(), s = setTimeout(() => t(u), (d = l == null ? void 0 : l.delay) != null ? d : yl));
+    var v, i, y, d;
+    (v = t == null ? void 0 : t.modifiers) != null && v.self && u.target !== r.value || (n(), (i = t == null ? void 0 : t.modifiers) != null && i.prevent && u.preventDefault(), (y = t == null ? void 0 : t.modifiers) != null && y.stop && u.stopPropagation(), s = setTimeout(() => l(u), (d = t == null ? void 0 : t.delay) != null ? d : ml));
   }
   const f = {
-    capture: (o = l == null ? void 0 : l.modifiers) == null ? void 0 : o.capture,
-    once: (n = l == null ? void 0 : l.modifiers) == null ? void 0 : n.once
+    capture: (o = t == null ? void 0 : t.modifiers) == null ? void 0 : o.capture,
+    once: (a = t == null ? void 0 : t.modifiers) == null ? void 0 : a.once
   };
-  A(r, "pointerdown", c, f), A(r, "pointerup", a, f), A(r, "pointerleave", a, f);
+  A(r, "pointerdown", c, f), A(r, "pointerup", n, f), A(r, "pointerleave", n, f);
 }
 R.mounted + "";
 const se = typeof globalThis < "u" ? globalThis : typeof window < "u" ? window : typeof global < "u" ? global : typeof self < "u" ? self : {}, ue = "__vueuse_ssr_handlers__";
 se[ue] = se[ue] || {};
 se[ue];
-function Ze(e, t = !1) {
-  const l = g(), o = () => l.value = Boolean(e());
-  return o(), Qe(o, t), l;
+function Ze(e, l = !1) {
+  const t = g(), o = () => t.value = Boolean(e());
+  return o(), Qe(o, l), t;
 }
-function ml(e, t = {}) {
-  const l = t ? t.delayEnter : 0, o = t ? t.delayLeave : 0, n = g(!1);
+function pl(e, l = {}) {
+  const t = l ? l.delayEnter : 0, o = l ? l.delayLeave : 0, a = g(!1);
   let r;
-  const s = (a) => {
-    const c = a ? l : o;
-    r && (clearTimeout(r), r = void 0), c ? r = setTimeout(() => n.value = a, c) : n.value = a;
+  const s = (n) => {
+    const c = n ? t : o;
+    r && (clearTimeout(r), r = void 0), c ? r = setTimeout(() => a.value = n, c) : a.value = n;
   };
-  return window && (A(e, "mouseenter", () => s(!0), { passive: !0 }), A(e, "mouseleave", () => s(!1), { passive: !0 })), n;
+  return window && (A(e, "mouseenter", () => s(!0), { passive: !0 }), A(e, "mouseleave", () => s(!1), { passive: !0 })), a;
 }
 R.mounted + "";
-var Ee = Object.getOwnPropertySymbols, vl = Object.prototype.hasOwnProperty, pl = Object.prototype.propertyIsEnumerable, hl = (e, t) => {
-  var l = {};
+var Le = Object.getOwnPropertySymbols, hl = Object.prototype.hasOwnProperty, bl = Object.prototype.propertyIsEnumerable, gl = (e, l) => {
+  var t = {};
   for (var o in e)
-    vl.call(e, o) && t.indexOf(o) < 0 && (l[o] = e[o]);
-  if (e != null && Ee)
-    for (var o of Ee(e))
-      t.indexOf(o) < 0 && pl.call(e, o) && (l[o] = e[o]);
-  return l;
+    hl.call(e, o) && l.indexOf(o) < 0 && (t[o] = e[o]);
+  if (e != null && Le)
+    for (var o of Le(e))
+      l.indexOf(o) < 0 && bl.call(e, o) && (t[o] = e[o]);
+  return t;
 };
-function bl(e, t, l = {}) {
-  const o = l, { window: n = M } = o, r = hl(o, ["window"]);
+function _l(e, l, t = {}) {
+  const o = t, { window: a = M } = o, r = gl(o, ["window"]);
   let s;
-  const a = Ze(() => n && "ResizeObserver" in n), c = () => {
+  const n = Ze(() => a && "ResizeObserver" in a), c = () => {
     s && (s.disconnect(), s = void 0);
-  }, f = P(() => J(e), (m) => {
-    c(), a.value && n && m && (s = new ResizeObserver(t), s.observe(m, r));
+  }, f = C(() => J(e), (v) => {
+    c(), n.value && a && v && (s = new ResizeObserver(l), s.observe(v, r));
   }, { immediate: !0, flush: "post" }), u = () => {
     c(), f();
   };
   return G(u), {
-    isSupported: a,
+    isSupported: n,
     stop: u
   };
 }
-function gl(e, t = { width: 0, height: 0 }, l = {}) {
-  const { window: o = M, box: n = "content-box" } = l, r = I(() => {
+function wl(e, l = { width: 0, height: 0 }, t = {}) {
+  const { window: o = M, box: a = "content-box" } = t, r = I(() => {
     var c, f;
     return (f = (c = J(e)) == null ? void 0 : c.namespaceURI) == null ? void 0 : f.includes("svg");
-  }), s = g(t.width), a = g(t.height);
-  return bl(e, ([c]) => {
-    const f = n === "border-box" ? c.borderBoxSize : n === "content-box" ? c.contentBoxSize : c.devicePixelContentBoxSize;
+  }), s = g(l.width), n = g(l.height);
+  return _l(e, ([c]) => {
+    const f = a === "border-box" ? c.borderBoxSize : a === "content-box" ? c.contentBoxSize : c.devicePixelContentBoxSize;
     if (o && r.value) {
       const u = J(e);
       if (u) {
-        const m = o.getComputedStyle(u);
-        s.value = parseFloat(m.width), a.value = parseFloat(m.height);
+        const v = o.getComputedStyle(u);
+        s.value = parseFloat(v.width), n.value = parseFloat(v.height);
       }
     } else if (f) {
       const u = Array.isArray(f) ? f : [f];
-      s.value = u.reduce((m, { inlineSize: i }) => m + i, 0), a.value = u.reduce((m, { blockSize: i }) => m + i, 0);
+      s.value = u.reduce((v, { inlineSize: i }) => v + i, 0), n.value = u.reduce((v, { blockSize: i }) => v + i, 0);
     } else
-      s.value = c.contentRect.width, a.value = c.contentRect.height;
-  }, l), P(() => J(e), (c) => {
-    s.value = c ? t.width : 0, a.value = c ? t.height : 0;
+      s.value = c.contentRect.width, n.value = c.contentRect.height;
+  }, t), C(() => J(e), (c) => {
+    s.value = c ? l.width : 0, n.value = c ? l.height : 0;
   }), {
     width: s,
-    height: a
+    height: n
   };
 }
 R.mounted + "";
-function Pe(e, { window: t = M, scrollTarget: l } = {}) {
-  const o = g(!1), n = () => {
-    if (!t)
+function Ce(e, { window: l = M, scrollTarget: t } = {}) {
+  const o = g(!1), a = () => {
+    if (!l)
       return;
-    const r = t.document, s = J(e);
+    const r = l.document, s = J(e);
     if (!s)
       o.value = !1;
     else {
-      const a = s.getBoundingClientRect();
-      o.value = a.top <= (t.innerHeight || r.documentElement.clientHeight) && a.left <= (t.innerWidth || r.documentElement.clientWidth) && a.bottom >= 0 && a.right >= 0;
+      const n = s.getBoundingClientRect();
+      o.value = n.top <= (l.innerHeight || r.documentElement.clientHeight) && n.left <= (l.innerWidth || r.documentElement.clientWidth) && n.bottom >= 0 && n.right >= 0;
     }
   };
-  return P(() => J(e), () => n(), { immediate: !0, flush: "post" }), t && A(l || t, "scroll", n, {
+  return C(() => J(e), () => a(), { immediate: !0, flush: "post" }), l && A(t || l, "scroll", a, {
     capture: !1,
     passive: !0
   }), o;
 }
 R.mounted + "";
-const Ce = 1;
-function de(e, t = {}) {
+const Pe = 1;
+function de(e, l = {}) {
   const {
-    throttle: l = 0,
+    throttle: t = 0,
     idle: o = 200,
-    onStop: n = z,
+    onStop: a = z,
     onScroll: r = z,
     offset: s = {
       left: 0,
@@ -872,12 +872,12 @@ function de(e, t = {}) {
       top: 0,
       bottom: 0
     },
-    eventListenerOptions: a = {
+    eventListenerOptions: n = {
       capture: !1,
       passive: !0
     },
     behavior: c = "auto"
-  } = t, f = g(0), u = g(0), m = I({
+  } = l, f = g(0), u = g(0), v = I({
     get() {
       return f.value;
     },
@@ -892,13 +892,13 @@ function de(e, t = {}) {
       y(void 0, B);
     }
   });
-  function y(B, T) {
+  function y(B, q) {
     var D, F, ge;
-    const ne = C(e);
+    const ne = P(e);
     ne && ((ge = ne instanceof Document ? document.body : ne) == null || ge.scrollTo({
-      top: (D = C(T)) != null ? D : i.value,
-      left: (F = C(B)) != null ? F : m.value,
-      behavior: C(c)
+      top: (D = P(q)) != null ? D : i.value,
+      left: (F = P(B)) != null ? F : v.value,
+      behavior: P(c)
     }));
   }
   const d = g(!1), j = X({
@@ -912,154 +912,154 @@ function de(e, t = {}) {
     top: !1,
     bottom: !1
   }), Y = (B) => {
-    d.value && (d.value = !1, S.left = !1, S.right = !1, S.top = !1, S.bottom = !1, n(B));
-  }, oe = Wt(Y, l + o), O = (B) => {
-    const T = B.target === document ? B.target.documentElement : B.target, D = T.scrollLeft;
-    S.left = D < f.value, S.right = D > u.value, j.left = D <= 0 + (s.left || 0), j.right = D + T.clientWidth >= T.scrollWidth - (s.right || 0) - Ce, f.value = D;
-    let F = T.scrollTop;
-    B.target === document && !F && (F = document.body.scrollTop), S.top = F < u.value, S.bottom = F > u.value, j.top = F <= 0 + (s.top || 0), j.bottom = F + T.clientHeight >= T.scrollHeight - (s.bottom || 0) - Ce, u.value = F, d.value = !0, oe(B), r(B);
+    d.value && (d.value = !1, S.left = !1, S.right = !1, S.top = !1, S.bottom = !1, a(B));
+  }, oe = Gt(Y, t + o), O = (B) => {
+    const q = B.target === document ? B.target.documentElement : B.target, D = q.scrollLeft;
+    S.left = D < f.value, S.right = D > u.value, j.left = D <= 0 + (s.left || 0), j.right = D + q.clientWidth >= q.scrollWidth - (s.right || 0) - Pe, f.value = D;
+    let F = q.scrollTop;
+    B.target === document && !F && (F = document.body.scrollTop), S.top = F < u.value, S.bottom = F > u.value, j.top = F <= 0 + (s.top || 0), j.bottom = F + q.clientHeight >= q.scrollHeight - (s.bottom || 0) - Pe, u.value = F, d.value = !0, oe(B), r(B);
   };
-  return A(e, "scroll", l ? Ut(O, l, !0, !1) : O, a), A(e, "scrollend", Y, a), {
-    x: m,
+  return A(e, "scroll", t ? Kt(O, t, !0, !1) : O, n), A(e, "scrollend", Y, n), {
+    x: v,
     y: i,
     isScrolling: d,
     arrivedState: j,
     directions: S
   };
 }
-var _l = Object.defineProperty, wl = Object.defineProperties, Sl = Object.getOwnPropertyDescriptors, Je = Object.getOwnPropertySymbols, jl = Object.prototype.hasOwnProperty, kl = Object.prototype.propertyIsEnumerable, qe = (e, t, l) => t in e ? _l(e, t, { enumerable: !0, configurable: !0, writable: !0, value: l }) : e[t] = l, Te = (e, t) => {
-  for (var l in t || (t = {}))
-    jl.call(t, l) && qe(e, l, t[l]);
+var Sl = Object.defineProperty, jl = Object.defineProperties, kl = Object.getOwnPropertyDescriptors, Je = Object.getOwnPropertySymbols, $l = Object.prototype.hasOwnProperty, Vl = Object.prototype.propertyIsEnumerable, Te = (e, l, t) => l in e ? Sl(e, l, { enumerable: !0, configurable: !0, writable: !0, value: t }) : e[l] = t, qe = (e, l) => {
+  for (var t in l || (l = {}))
+    $l.call(l, t) && Te(e, t, l[t]);
   if (Je)
-    for (var l of Je(t))
-      kl.call(t, l) && qe(e, l, t[l]);
+    for (var t of Je(l))
+      Vl.call(l, t) && Te(e, t, l[t]);
   return e;
-}, $l = (e, t) => wl(e, Sl(t));
-function ze(e, t, l = {}) {
-  var o, n;
-  const r = (o = l.direction) != null ? o : "bottom", s = X(de(e, $l(Te({}, l), {
-    offset: Te({
-      [r]: (n = l.distance) != null ? n : 0
-    }, l.offset)
+}, xl = (e, l) => jl(e, kl(l));
+function ze(e, l, t = {}) {
+  var o, a;
+  const r = (o = t.direction) != null ? o : "bottom", s = X(de(e, xl(qe({}, t), {
+    offset: qe({
+      [r]: (a = t.distance) != null ? a : 0
+    }, t.offset)
   })));
-  P(() => s.arrivedState[r], async (a) => {
+  C(() => s.arrivedState[r], async (n) => {
     var c, f;
-    if (a) {
-      const u = C(e), m = {
+    if (n) {
+      const u = P(e), v = {
         height: (c = u == null ? void 0 : u.scrollHeight) != null ? c : 0,
         width: (f = u == null ? void 0 : u.scrollWidth) != null ? f : 0
       };
-      await t(s), l.preserveScrollPosition && u && Me(() => {
+      await l(s), t.preserveScrollPosition && u && Me(() => {
         u.scrollTo({
-          top: u.scrollHeight - m.height,
-          left: u.scrollWidth - m.width
+          top: u.scrollHeight - v.height,
+          left: u.scrollWidth - v.width
         });
       });
     }
   });
 }
 R.mounted + "";
-function Ae(e, t, l = {}) {
+function Ae(e, l, t = {}) {
   const {
     root: o,
-    rootMargin: n = "0px",
+    rootMargin: a = "0px",
     threshold: r = 0.1,
     window: s = M
-  } = l, a = Ze(() => s && "IntersectionObserver" in s);
+  } = t, n = Ze(() => s && "IntersectionObserver" in s);
   let c = z;
-  const f = a.value ? P(() => ({
+  const f = n.value ? C(() => ({
     el: J(e),
     root: J(o)
-  }), ({ el: m, root: i }) => {
-    if (c(), !m)
+  }), ({ el: v, root: i }) => {
+    if (c(), !v)
       return;
-    const y = new IntersectionObserver(t, {
+    const y = new IntersectionObserver(l, {
       root: i,
-      rootMargin: n,
+      rootMargin: a,
       threshold: r
     });
-    y.observe(m), c = () => {
+    y.observe(v), c = () => {
       y.disconnect(), c = z;
     };
   }, { immediate: !0, flush: "post" }) : z, u = () => {
     c(), f();
   };
   return G(u), {
-    isSupported: a,
+    isSupported: n,
     stop: u
   };
 }
 R.mounted + "";
-var Vl = Object.defineProperty, xl = Object.defineProperties, Ol = Object.getOwnPropertyDescriptors, Fe = Object.getOwnPropertySymbols, Il = Object.prototype.hasOwnProperty, Bl = Object.prototype.propertyIsEnumerable, De = (e, t, l) => t in e ? Vl(e, t, { enumerable: !0, configurable: !0, writable: !0, value: l }) : e[t] = l, Ll = (e, t) => {
-  for (var l in t || (t = {}))
-    Il.call(t, l) && De(e, l, t[l]);
+var Ol = Object.defineProperty, Il = Object.defineProperties, Bl = Object.getOwnPropertyDescriptors, Fe = Object.getOwnPropertySymbols, El = Object.prototype.hasOwnProperty, Ll = Object.prototype.propertyIsEnumerable, De = (e, l, t) => l in e ? Ol(e, l, { enumerable: !0, configurable: !0, writable: !0, value: t }) : e[l] = t, Cl = (e, l) => {
+  for (var t in l || (l = {}))
+    El.call(l, t) && De(e, t, l[t]);
   if (Fe)
-    for (var l of Fe(t))
-      Bl.call(t, l) && De(e, l, t[l]);
+    for (var t of Fe(l))
+      Ll.call(l, t) && De(e, t, l[t]);
   return e;
-}, El = (e, t) => xl(e, Ol(t));
+}, Pl = (e, l) => Il(e, Bl(l));
 R.mounted + "";
 function Ye(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)
+  const l = window.getComputedStyle(e);
+  if (l.overflowX === "scroll" || l.overflowY === "scroll" || l.overflowX === "auto" && e.clientHeight < e.scrollHeight || l.overflowY === "auto" && e.clientWidth < e.scrollWidth)
     return !0;
   {
-    const l = e.parentNode;
-    return !l || l.tagName === "BODY" ? !1 : Ye(l);
+    const t = e.parentNode;
+    return !t || t.tagName === "BODY" ? !1 : Ye(t);
   }
 }
-function Pl(e) {
-  const t = e || window.event, l = t.target;
-  return Ye(l) ? !1 : t.touches.length > 1 ? !0 : (t.preventDefault && t.preventDefault(), !1);
+function Jl(e) {
+  const l = e || window.event, t = l.target;
+  return Ye(t) ? !1 : l.touches.length > 1 ? !0 : (l.preventDefault && l.preventDefault(), !1);
 }
-function Cl(e, t = !1) {
-  const l = g(t);
-  let o = null, n;
-  P(Gt(e), (a) => {
-    if (a) {
-      const c = a;
-      n = c.style.overflow, l.value && (c.style.overflow = "hidden");
+function Tl(e, l = !1) {
+  const t = g(l);
+  let o = null, a;
+  C(Qt(e), (n) => {
+    if (n) {
+      const c = n;
+      a = c.style.overflow, t.value && (c.style.overflow = "hidden");
     }
   }, {
     immediate: !0
   });
   const r = () => {
-    const a = C(e);
-    !a || l.value || (ee && (o = A(a, "touchmove", (c) => {
-      Pl(c);
-    }, { passive: !1 })), a.style.overflow = "hidden", l.value = !0);
+    const n = P(e);
+    !n || t.value || (ee && (o = A(n, "touchmove", (c) => {
+      Jl(c);
+    }, { passive: !1 })), n.style.overflow = "hidden", t.value = !0);
   }, s = () => {
-    const a = C(e);
-    !a || !l.value || (ee && (o == null || o()), a.style.overflow = n, l.value = !1);
+    const n = P(e);
+    !n || !t.value || (ee && (o == null || o()), n.style.overflow = a, t.value = !1);
   };
   return G(s), I({
     get() {
-      return l.value;
+      return t.value;
     },
-    set(a) {
-      a ? r() : s();
+    set(n) {
+      n ? r() : s();
     }
   });
 }
-const Jl = () => {
+const ql = () => {
   let e = !1;
-  const t = g(!1);
-  return (l, o) => {
-    if (t.value = o.value, e)
+  const l = g(!1);
+  return (t, o) => {
+    if (l.value = o.value, e)
       return;
     e = !0;
-    const n = Cl(l, o.value);
-    P(t, (r) => n.value = r);
+    const a = Tl(t, o.value);
+    C(l, (r) => a.value = r);
   };
 };
-Jl();
-const Xe = ["medium", "small"], ql = {
+ql();
+const Xe = ["medium", "small"], zl = {
   key: 0,
   class: "joy-dropdown-list__header"
-}, Tl = ["id", "tabindex", "aria-disabled", "aria-selected", "title", "aria-label", ".dataModel", "onClick"], zl = {
+}, Al = ["id", "tabindex", "aria-disabled", "aria-selected", "title", "aria-label", ".dataModel", "onClick"], Fl = {
   key: 1,
   class: "joy-dropdown-list__footer"
-}, Al = /* @__PURE__ */ $({
+}, Dl = /* @__PURE__ */ $({
   __name: "VJoyDropdownList",
   props: {
     /**
@@ -1068,7 +1068,7 @@ const Xe = ["medium", "small"], ql = {
     options: {
       type: Array,
       validator(e) {
-        return e.every((t) => Object.keys(t).includes("value") || Object.keys(t).includes("id"));
+        return e.every((l) => Object.keys(l).includes("value") || Object.keys(l).includes("id"));
       },
       default() {
         return [];
@@ -1094,71 +1094,71 @@ const Xe = ["medium", "small"], ql = {
     }
   },
   emits: ["update:modelValue", "close:dropdownList"],
-  setup(e, { expose: t, emit: l }) {
-    const o = e, n = g(), r = I(() => (i) => !o.modelValue && !i.value && !i.id ? !1 : o.modelValue === i.value || o.modelValue === i.id);
+  setup(e, { expose: l, emit: t }) {
+    const o = e, a = g(), r = I(() => (i) => !o.modelValue && !i.value && !i.id ? !1 : o.modelValue === i.value || o.modelValue === i.id);
     function s(i) {
-      i.disabled || l("update:modelValue", i.value || i.id);
+      i.disabled || t("update:modelValue", i.value || i.id);
     }
-    function a() {
+    function n() {
       var i;
-      return Array.from(((i = n.value) == null ? void 0 : i.querySelectorAll("li")) || []);
+      return Array.from(((i = a.value) == null ? void 0 : i.querySelectorAll("li")) || []);
     }
     function c() {
-      const i = a().find((y) => y.getAttribute("aria-selected") === "true");
-      i && (i.focus(), n.value.scrollTo({
+      const i = n().find((y) => y.getAttribute("aria-selected") === "true");
+      i && (i.focus(), a.value.scrollTo({
         top: i.offsetTop
       }));
     }
     function f() {
-      return a().find((i) => i === document.activeElement);
+      return n().find((i) => i === document.activeElement);
     }
     function u(i) {
       var y;
-      if ((i.key === "Escape" || i.key === "Tab") && l("close:dropdownList"), (i.key === "Enter" || i.key === "enter") && (i.preventDefault(), f() && ((y = n.value) != null && y.contains(f())))) {
+      if ((i.key === "Escape" || i.key === "Tab") && t("close:dropdownList"), (i.key === "Enter" || i.key === "enter") && (i.preventDefault(), f() && ((y = a.value) != null && y.contains(f())))) {
         const d = f();
         if (!d)
           return;
         if (d.querySelector("a"))
           return d.querySelector("a").click();
-        l("update:modelValue", d.dataModel);
+        t("update:modelValue", d.dataModel);
       }
       if (i.key === " " && i.preventDefault(), ["ArrowDown", "ArrowUp", "Home", "End"].includes(i.key)) {
-        const d = a(), j = f();
+        const d = n(), j = f();
         let S = d.indexOf(j);
         if (d.length) {
-          i.preventDefault(), i.key === "ArrowDown" ? S++ : i.key === "ArrowUp" ? S-- : i.key === "Home" ? S = 0 : i.key === "End" && (S = d.length - 1), S < 0 && (S = d.length - 1), S > d.length - 1 && (S = 0), m(d[S]);
+          i.preventDefault(), i.key === "ArrowDown" ? S++ : i.key === "ArrowUp" ? S-- : i.key === "Home" ? S = 0 : i.key === "End" && (S = d.length - 1), S < 0 && (S = d.length - 1), S > d.length - 1 && (S = 0), v(d[S]);
           return;
         }
       }
     }
-    function m(i) {
+    function v(i) {
       i.focus();
     }
     return Z(() => {
       window.addEventListener("keydown", u), c();
     }), Ne(() => {
       window.removeEventListener("keydown", u);
-    }), t({
+    }), l({
       isSelected: r
-    }), (i, y) => (v(), p("div", {
+    }), (i, y) => (m(), p("div", {
       class: "joy-dropdown-list",
       style: K({ width: `${e.width}px`, "max-width": `${e.width}px` })
     }, [
-      i.$slots["dropdown-list-header"] ? (v(), p("header", ql, [
+      i.$slots["dropdown-list-header"] ? (m(), p("header", zl, [
         b(i.$slots, "dropdown-list-header", {}, void 0, !0)
-      ])) : _("", !0),
+      ])) : w("", !0),
       h("div", {
         class: k(["joy-dropdown-list__items", { "joy-dropdown-list__items-slotted": i.$slots["dropdown-list-items"] }]),
         style: K({ "max-height": `${e.height}px` })
       }, [
         b(i.$slots, "dropdown-list-items", {}, void 0, !0),
-        e.options.length ? (v(), p("ul", {
+        e.options.length ? (m(), p("ul", {
           key: 0,
           ref_key: "listbox",
-          ref: n,
+          ref: a,
           role: "listbox"
         }, [
-          (v(!0), p(ye, null, me(e.options, (d) => (v(), p("li", {
+          (m(!0), p(ye, null, ve(e.options, (d) => (m(), p("li", {
             id: d.id,
             key: d.label,
             style: K({ "max-width": `${e.width}px` }),
@@ -1166,41 +1166,41 @@ const Xe = ["medium", "small"], ql = {
               "joy-dropdown-list__item",
               `joy-dropdown-list__item--${e.size}`,
               {
-                "joy-dropdown-list__item--selected": w(r)(d),
+                "joy-dropdown-list__item--selected": _(r)(d),
                 "joy-dropdown-list__item--disabled": d.disabled
               }
             ]),
             tabindex: d.disabled ? void 0 : 0,
             "aria-disabled": d.disabled,
-            "aria-selected": w(r)(d),
+            "aria-selected": _(r)(d),
             title: d.label,
             "aria-label": d.label,
             ".dataModel": d.value || d.id,
             role: "option",
             onClick: (j) => s(d)
           }, [
-            b(i.$slots, "label", ve(pe(d)), () => [
+            b(i.$slots, "label", me(pe(d)), () => [
               h("span", null, x(d.label), 1)
             ], !0)
-          ], 14, Tl))), 128))
-        ], 512)) : _("", !0)
+          ], 14, Al))), 128))
+        ], 512)) : w("", !0)
       ], 6),
-      i.$slots["dropdown-list-footer"] ? (v(), p("footer", zl, [
+      i.$slots["dropdown-list-footer"] ? (m(), p("footer", Fl, [
         b(i.$slots, "dropdown-list-footer", {}, void 0, !0)
-      ])) : _("", !0)
+      ])) : w("", !0)
     ], 4));
   }
 });
-const et = /* @__PURE__ */ V(Al, [["__scopeId", "data-v-63134a7f"]]);
-function Fl(e) {
-  const t = () => e();
+const et = /* @__PURE__ */ V(Dl, [["__scopeId", "data-v-63134a7f"]]);
+function Rl(e) {
+  const l = () => e();
   Z(() => {
-    window.addEventListener("resize", t);
+    window.addEventListener("resize", l);
   }), Ne(() => {
-    window.removeEventListener("resize", t);
+    window.removeEventListener("resize", l);
   });
 }
-const Dl = /* @__PURE__ */ $({
+const Ml = /* @__PURE__ */ $({
   __name: "VJoyDropdown",
   props: {
     /** DOM valid selector to give to Vue3 Teleport "to" property */
@@ -1238,7 +1238,7 @@ const Dl = /* @__PURE__ */ $({
     options: {
       type: Array,
       validator(e) {
-        return e.every((l) => Object.keys(l).includes("label"));
+        return e.every((t) => Object.keys(t).includes("label"));
       },
       default() {
         return [];
@@ -1278,23 +1278,23 @@ const Dl = /* @__PURE__ */ $({
     }
   },
   emits: ["update:modelValue", "dropdown:open", "dropdown:hide"],
-  setup(e, { expose: t, emit: l }) {
-    const o = e, n = g(!1), r = g(null), s = g(), a = g(null), c = g(null), f = g(!1), u = {
+  setup(e, { expose: l, emit: t }) {
+    const o = e, a = g(!1), r = g(null), s = g(), n = g(null), c = g(null), f = g(!1), u = {
       ignore: [s, ".joy-dropdown__list"]
     };
-    let m = null;
+    let v = null;
     const i = X({
       left: "auto",
       top: "0px",
       right: "auto"
     });
     function y() {
-      m && clearTimeout(m), f.value = !0, m = setTimeout(() => {
-        n.value = !1, f.value = !1, l("dropdown:hide");
+      v && clearTimeout(v), f.value = !0, v = setTimeout(() => {
+        a.value = !1, f.value = !1, t("dropdown:hide");
       }, 300);
     }
     function d(O) {
-      f.value = !1, m && clearTimeout(m), Y(), c.value = O.target, n.value = !0, l("dropdown:open");
+      f.value = !1, v && clearTimeout(v), Y(), c.value = O.target, a.value = !0, t("dropdown:open");
     }
     function j() {
       y(), S();
@@ -1303,22 +1303,22 @@ const Dl = /* @__PURE__ */ $({
       c.value && c.value.focus();
     }
     function Y() {
-      const O = s.value.getBoundingClientRect(), B = document.documentElement.scrollTop + O.top, T = O.height, D = O.left, F = O.width;
-      o.justify === "left" ? i.left = D + "px" : i.left = D + F - parseInt(o.width) + "px", o.direction === "down" ? i.top = B + T + parseInt(o.dropdownGap) + "px" : i.top = B - (parseInt(o.height) + parseInt(o.dropdownGap)) + "px";
+      const O = s.value.getBoundingClientRect(), B = document.documentElement.scrollTop + O.top, q = O.height, D = O.left, F = O.width;
+      o.justify === "left" ? i.left = D + "px" : i.left = D + F - parseInt(o.width) + "px", o.direction === "down" ? i.top = B + q + parseInt(o.dropdownGap) + "px" : i.top = B - (parseInt(o.height) + parseInt(o.dropdownGap)) + "px";
     }
     function oe(O) {
-      l("update:modelValue", O), o.closeOnSelect && (y(), S());
+      t("update:modelValue", O), o.closeOnSelect && (y(), S());
     }
-    return Fl(y), t({
-      showDropdownList: n
-    }), (O, B) => (v(), q(w(rl), {
+    return Rl(y), l({
+      showDropdownList: a
+    }), (O, B) => (m(), T(_(ul), {
       ref_key: "dropdown",
       ref: r,
       options: u,
       class: "joy-dropdown",
       onTrigger: y
     }, {
-      default: L(() => [
+      default: E(() => [
         h("div", {
           ref_key: "button",
           ref: s,
@@ -1327,14 +1327,14 @@ const Dl = /* @__PURE__ */ $({
         }, [
           b(O.$slots, "dropdown-button", {}, void 0, !0)
         ], 512),
-        (v(), q(st, {
+        (m(), T(st, {
           to: e.appendTo,
           disabled: e.disableTeleport
         }, [
-          n.value ? (v(), p("div", {
+          a.value ? (m(), p("div", {
             key: 0,
             ref_key: "list",
-            ref: a,
+            ref: n,
             class: k([
               "joy-dropdown__list",
               `joy-dropdown__list--${e.direction}`,
@@ -1357,46 +1357,46 @@ const Dl = /* @__PURE__ */ $({
               "onUpdate:modelValue": oe,
               "onClose:dropdownList": j
             }, He({
-              label: L((T) => [
-                b(O.$slots, "dropdown-item", ve(pe(T)), () => [
-                  h("span", null, x(T.label), 1)
+              label: E((q) => [
+                b(O.$slots, "dropdown-item", me(pe(q)), () => [
+                  h("span", null, x(q.label), 1)
                 ], !0)
               ]),
               _: 2
             }, [
               O.$slots["dropdown-header"] ? {
                 name: "dropdown-list-header",
-                fn: L(() => [
+                fn: E(() => [
                   b(O.$slots, "dropdown-header", {}, void 0, !0)
                 ]),
                 key: "0"
               } : void 0,
               O.$slots["dropdown-items"] ? {
                 name: "dropdown-list-items",
-                fn: L(() => [
+                fn: E(() => [
                   b(O.$slots, "dropdown-items", {}, void 0, !0)
                 ]),
                 key: "1"
               } : void 0,
               O.$slots["dropdown-footer"] ? {
                 name: "dropdown-list-footer",
-                fn: L(() => [
+                fn: E(() => [
                   b(O.$slots, "dropdown-footer", {}, void 0, !0)
                 ]),
                 key: "2"
               } : void 0
             ]), 1032, ["model-value", "options", "size", "width", "height"])
-          ], 6)) : _("", !0)
+          ], 6)) : w("", !0)
         ], 8, ["to", "disabled"]))
       ]),
       _: 3
     }, 512));
   }
 });
-const Rl = /* @__PURE__ */ V(Dl, [["__scopeId", "data-v-2657fbc4"]]), Ml = (e) => (te("data-v-50e209d6"), e = e(), le(), e), Nl = ["aria-hidden"], Hl = /* @__PURE__ */ Ml(() => /* @__PURE__ */ h("joy-icon", {
+const Nl = /* @__PURE__ */ V(Ml, [["__scopeId", "data-v-2657fbc4"]]), Hl = (e) => (te("data-v-50e209d6"), e = e(), le(), e), Wl = ["aria-hidden"], Ul = /* @__PURE__ */ Hl(() => /* @__PURE__ */ h("joy-icon", {
   "custom-class": "joy-icon-error",
   name: "warning-triangle"
-}, null, -1)), Wl = /* @__PURE__ */ $({
+}, null, -1)), Gl = /* @__PURE__ */ $({
   __name: "VJoyFormError",
   props: {
     /** In some cases you'll need to inject the error in the DOM but hide it. Visible by default */
@@ -1408,36 +1408,36 @@ const Rl = /* @__PURE__ */ V(Dl, [["__scopeId", "data-v-2657fbc4"]]), Ml = (e) =
     noHtmlErrorText: String
   },
   setup(e) {
-    return (t, l) => (v(), p("div", {
+    return (l, t) => (m(), p("div", {
       "aria-hidden": e.visible,
       class: k(["joy-form-error", { "joy-has-error": e.visible }]),
       role: "alert"
     }, [
-      Hl,
+      Ul,
       h("div", null, [
-        b(t.$slots, "default", {}, () => [
-          E(x(e.noHtmlErrorText), 1)
+        b(l.$slots, "default", {}, () => [
+          L(x(e.noHtmlErrorText), 1)
         ], !0)
       ])
-    ], 10, Nl));
+    ], 10, Wl));
   }
 });
-const tt = /* @__PURE__ */ V(Wl, [["__scopeId", "data-v-50e209d6"]]);
-function Ul(e) {
-  let t;
+const tt = /* @__PURE__ */ V(Gl, [["__scopeId", "data-v-50e209d6"]]);
+function Kl(e) {
+  let l;
   switch (e) {
     case "error":
-      t = "warning-triangle";
+      l = "warning-triangle";
       break;
     case "success":
-      t = "check";
+      l = "check";
       break;
     default:
-      t = "info-circle";
+      l = "info-circle";
   }
-  return t;
+  return l;
 }
-const Gl = [...pt], Kl = ["name"], Ql = { class: "joy-highlight--text" }, Zl = /* @__PURE__ */ $({
+const Ql = [...bt], Zl = ["name"], Yl = { class: "joy-highlight--text" }, Xl = /* @__PURE__ */ $({
   __name: "VJoyHighlight",
   props: {
     accent: {
@@ -1453,51 +1453,51 @@ const Gl = [...pt], Kl = ["name"], Ql = { class: "joy-highlight--text" }, Zl = /
       type: String,
       default: "neutral",
       validator(e) {
-        return Gl.includes(e);
+        return Ql.includes(e);
       }
     }
   },
-  setup(e, { expose: t }) {
-    const l = e, o = I(() => l.icon ? l.icon : Ul(l.level));
-    return t({
+  setup(e, { expose: l }) {
+    const t = e, o = I(() => t.icon ? t.icon : Kl(t.level));
+    return l({
       getRelevantIcon: o
-    }), (n, r) => (v(), p("div", {
+    }), (a, r) => (m(), p("div", {
       class: k([
         "joy-highlight",
         `joy-highlight_${e.level}`,
         {
           "joy-highlight__accent": e.accent,
-          "joy-highlight__titled": n.$slots["highlight-title"]
+          "joy-highlight__titled": a.$slots["highlight-title"]
         }
       ])
     }, [
-      e.displayIcon ? (v(), p("joy-icon", {
+      e.displayIcon ? (m(), p("joy-icon", {
         key: 0,
-        name: w(o)
-      }, null, 8, Kl)) : _("", !0),
-      h("div", Ql, [
+        name: _(o)
+      }, null, 8, Zl)) : w("", !0),
+      h("div", Yl, [
         h("strong", null, [
-          b(n.$slots, "highlight-title", {}, void 0, !0)
+          b(a.$slots, "highlight-title", {}, void 0, !0)
         ]),
-        b(n.$slots, "default", {}, void 0, !0)
+        b(a.$slots, "default", {}, void 0, !0)
       ])
     ], 2));
   }
 });
-const Yl = /* @__PURE__ */ V(Zl, [["__scopeId", "data-v-a0ff7a60"]]), Xl = ["small", "medium", "large"], eo = {
+const eo = /* @__PURE__ */ V(Xl, [["__scopeId", "data-v-a0ff7a60"]]), to = ["small", "medium", "large"], lo = {
   key: 0,
   class: "joy-label-required"
-}, to = {
+}, oo = {
   key: 1,
   class: "joy-label-optional"
-}, lo = /* @__PURE__ */ $({
+}, no = /* @__PURE__ */ $({
   __name: "VJoyLabel",
   props: {
     size: {
       type: String,
       default: "medium",
       validator(e) {
-        return Xl.includes(e);
+        return to.includes(e);
       }
     },
     tagName: {
@@ -1514,21 +1514,21 @@ const Yl = /* @__PURE__ */ V(Zl, [["__scopeId", "data-v-a0ff7a60"]]), Xl = ["sma
     text: String
   },
   setup(e) {
-    return (t, l) => (v(), q(ce(e.tagName), Q({
+    return (l, t) => (m(), T(ce(e.tagName), Q({
       class: ["joy-label", `joy-label--${e.size}`]
-    }, t.$attrs), {
-      default: L(() => [
-        b(t.$slots, "default", {}, () => [
-          E(x(e.text), 1)
+    }, l.$attrs), {
+      default: E(() => [
+        b(l.$slots, "default", {}, () => [
+          L(x(e.text), 1)
         ], !0),
-        e.required ? (v(), p("span", eo, "*")) : _("", !0),
-        e.optionalLabel ? (v(), p("span", to, "- " + x(e.optionalLabel), 1)) : _("", !0)
+        e.required ? (m(), p("span", lo, "*")) : w("", !0),
+        e.optionalLabel ? (m(), p("span", oo, "- " + x(e.optionalLabel), 1)) : w("", !0)
       ]),
       _: 3
     }, 16, ["class"]));
   }
 });
-const N = /* @__PURE__ */ V(lo, [["__scopeId", "data-v-1265214a"]]), oo = ["large", "medium", "small"], no = ["id", "disabled", "type", "value"], ao = ["name"], io = ["data-unit"], ro = /* @__PURE__ */ $({
+const N = /* @__PURE__ */ V(no, [["__scopeId", "data-v-1265214a"]]), ao = ["large", "medium", "small"], io = ["id", "disabled", "type", "value"], ro = ["name"], so = ["data-unit"], uo = /* @__PURE__ */ $({
   __name: "VJoyInput",
   props: {
     disabled: {
@@ -1579,7 +1579,7 @@ const N = /* @__PURE__ */ V(lo, [["__scopeId", "data-v-1265214a"]]), oo = ["larg
       type: String,
       default: "medium",
       validator(e) {
-        return oo.includes(e);
+        return ao.includes(e);
       }
     },
     type: String,
@@ -1587,59 +1587,59 @@ const N = /* @__PURE__ */ V(lo, [["__scopeId", "data-v-1265214a"]]), oo = ["larg
     unit: String
   },
   emits: ["update:modelValue"],
-  setup(e, { emit: t }) {
-    const l = e, o = g(), n = g(), r = Re(), s = W(), a = g(!1), c = I(() => l.clearable && l.modelValue.length > 0 && !l.unit), f = I(() => s.default && s.default()), u = I(() => {
+  setup(e, { emit: l }) {
+    const t = e, o = g(), a = g(), r = Re(), s = W(), n = g(!1), c = I(() => t.clearable && t.modelValue.length > 0 && !t.unit), f = I(() => s.default && s.default()), u = I(() => {
       var y, d;
-      return !!((y = n.value) != null && y.closest("joy-wrapper")) || !!((d = n.value) != null && d.closest(".joy-wrapper"));
-    }), m = g(l.type);
+      return !!((y = a.value) != null && y.closest("joy-wrapper")) || !!((d = a.value) != null && d.closest(".joy-wrapper"));
+    }), v = g(t.type);
     ut(() => {
-      m.value = l.unit ? "number" : l.unit || "text";
+      v.value = t.unit ? "number" : t.unit || "text";
     });
     const i = {
       onFocus: () => {
-        a.value = !0;
+        n.value = !0;
       },
       onBlur: () => {
-        a.value = !1;
+        n.value = !1;
       },
       onInput: (y) => {
         let d = y.target.value;
-        t("update:modelValue", d);
+        l("update:modelValue", d);
       },
       clearValue: () => {
-        l.disabled || t("update:modelValue", "");
+        t.disabled || l("update:modelValue", "");
       }
     };
-    return (y, d) => (v(), p("div", {
+    return (y, d) => (m(), p("div", {
       ref_key: "root",
-      ref: n,
-      class: k([`joy-input--${l.size}`])
+      ref: a,
+      class: k([`joy-input--${t.size}`])
     }, [
       h("div", {
         class: k([
           "joy-input",
           {
-            "joy-input--focusing": a.value,
+            "joy-input--focusing": n.value,
             "joy-input--disabled": e.disabled,
             "joy-input--invalid": e.invalid,
-            "joy-input--valid": !e.invalid && !w(r).disabled
+            "joy-input--valid": !e.invalid && !_(r).disabled
           }
         ])
       }, [
-        w(f) || e.label ? (v(), q(N, {
+        _(f) || e.label ? (m(), T(N, {
           key: 0,
           for: e.name,
           required: e.required && e.requiredMark,
           "optional-label": e.optionalLabel,
           size: e.labelSize
         }, {
-          default: L(() => [
+          default: E(() => [
             b(y.$slots, "default", {}, () => [
-              E(x(e.label), 1)
+              L(x(e.label), 1)
             ], !0)
           ]),
           _: 3
-        }, 8, ["for", "required", "optional-label", "size"])) : _("", !0),
+        }, 8, ["for", "required", "optional-label", "size"])) : w("", !0),
         h("div", {
           class: k([
             "joy-input--wrapper",
@@ -1647,12 +1647,12 @@ const N = /* @__PURE__ */ V(lo, [["__scopeId", "data-v-1265214a"]]), oo = ["larg
               "joy-input--wrapper-has-icon": !!e.icon,
               "joy-input--wrapper---clearable": e.clearable,
               "joy-input--wrapper-unit": !!e.unit,
-              "joy-input--wrapper-margin": !w(u)
+              "joy-input--wrapper-margin": !_(u)
             }
           ])
         }, [
           h("input", Q(y.$attrs, {
-            id: l.name,
+            id: t.name,
             ref_key: "input",
             ref: o,
             disabled: e.disabled,
@@ -1662,7 +1662,7 @@ const N = /* @__PURE__ */ V(lo, [["__scopeId", "data-v-1265214a"]]), oo = ["larg
                 "joy-input--field-invalid": e.invalid
               }
             ],
-            type: m.value,
+            type: v.value,
             value: e.modelValue,
             onFocus: d[0] || (d[0] = //@ts-ignore
             (...j) => i.onFocus && i.onFocus(...j)),
@@ -1670,32 +1670,32 @@ const N = /* @__PURE__ */ V(lo, [["__scopeId", "data-v-1265214a"]]), oo = ["larg
             (...j) => i.onBlur && i.onBlur(...j)),
             onInput: d[2] || (d[2] = //@ts-ignore
             (...j) => i.onInput && i.onInput(...j))
-          }), null, 16, no),
-          w(c) ? (v(), p("joy-icon", {
+          }), null, 16, io),
+          _(c) ? (m(), p("joy-icon", {
             key: 0,
             size: "xxsmall",
             name: "cross",
             class: "joy-input--clear",
             onClick: d[3] || (d[3] = //@ts-ignore
             (...j) => i.clearValue && i.clearValue(...j))
-          })) : _("", !0),
-          e.icon && !e.clearable ? (v(), p("joy-icon", {
+          })) : w("", !0),
+          e.icon && !e.clearable ? (m(), p("joy-icon", {
             key: 1,
             role: "img",
             class: "joy-input--decorative-icon",
             name: e.icon
-          }, null, 8, ao)) : _("", !0),
-          e.unit ? (v(), p("div", {
+          }, null, 8, ro)) : w("", !0),
+          e.unit ? (m(), p("div", {
             key: 2,
             "data-unit": e.unit,
             class: "joy-input--unit"
-          }, null, 8, io)) : _("", !0)
+          }, null, 8, so)) : w("", !0)
         ], 2)
       ], 2)
     ], 2));
   }
 });
-const so = /* @__PURE__ */ V(ro, [["__scopeId", "data-v-8258d6d7"]]), uo = ["teal", "white"], co = ["href"], fo = ["color", "name"], yo = /* @__PURE__ */ $({
+const co = /* @__PURE__ */ V(uo, [["__scopeId", "data-v-8258d6d7"]]), fo = ["teal", "white"], yo = ["href"], vo = ["color", "name"], mo = /* @__PURE__ */ $({
   __name: "VJoyLink",
   props: {
     href: {
@@ -1706,39 +1706,39 @@ const so = /* @__PURE__ */ V(ro, [["__scopeId", "data-v-8258d6d7"]]), uo = ["tea
       type: String,
       default: "teal",
       validator(e) {
-        return uo.includes(e);
+        return fo.includes(e);
       }
     },
     icon: String,
     text: String
   },
   setup(e) {
-    const t = e, l = I(() => t.color === "white" ? "white" : "teal");
-    return (o, n) => (v(), p("a", Q({ href: e.href }, o.$attrs, {
+    const l = e, t = I(() => l.color === "white" ? "white" : "teal");
+    return (o, a) => (m(), p("a", Q({ href: e.href }, o.$attrs, {
       class: ["joy-link", `joy-link_${e.color}`]
     }), [
-      e.icon ? (v(), p("joy-icon", {
+      e.icon ? (m(), p("joy-icon", {
         key: 0,
-        color: w(l),
+        color: _(t),
         name: e.icon
-      }, null, 8, fo)) : _("", !0),
+      }, null, 8, vo)) : w("", !0),
       b(o.$slots, "default", {}, () => [
-        E(x(e.text), 1)
+        L(x(e.text), 1)
       ], !0)
-    ], 16, co));
+    ], 16, yo));
   }
 });
-const mo = /* @__PURE__ */ V(yo, [["__scopeId", "data-v-920769ba"]]), vo = ["id"], po = {
+const po = /* @__PURE__ */ V(mo, [["__scopeId", "data-v-920769ba"]]), ho = ["id"], bo = {
   class: /* @__PURE__ */ k(["joy-multi-checkbox"])
-}, ho = /* @__PURE__ */ $({
+}, go = /* @__PURE__ */ $({
   __name: "VJoyMultiCheckbox",
   props: {
     options: {
       type: Array,
       required: !0,
       validator(e) {
-        const t = e.every((o) => Object.keys(o).includes("value")), l = e.every((o) => Object.keys(o).includes("label"));
-        return t && l;
+        const l = e.every((o) => Object.keys(o).includes("value")), t = e.every((o) => Object.keys(o).includes("label"));
+        return l && t;
       }
     },
     id: String,
@@ -1764,67 +1764,64 @@ const mo = /* @__PURE__ */ V(yo, [["__scopeId", "data-v-920769ba"]]), vo = ["id"
     }
   },
   emits: ["update:value"],
-  setup(e, { emit: t }) {
-    const l = e;
+  setup(e, { emit: l }) {
+    const t = e;
     function o(r) {
-      return l.value.includes(r.value);
+      return t.value.includes(r.value);
     }
-    function n(r, s) {
-      let a = [...l.value || []];
-      s ? a.push(r) : a.splice(a.indexOf(r), 1), t("update:value", a);
+    function a(r, s) {
+      let n = [...t.value || []];
+      s ? n.push(r) : n.splice(n.indexOf(r), 1), l("update:value", n);
     }
-    return (r, s) => (v(), p("fieldset", {
+    return (r, s) => (m(), p("fieldset", {
       id: e.id,
       class: "joy-multi-checkbox__wrapper"
     }, [
-      e.label ? (v(), q(w(N), {
+      e.label ? (m(), T(_(N), {
         key: 0,
         "tag-name": "legend",
         required: e.required && e.requiredMark,
         "optional-label": e.optionalLabel,
         size: e.labelSize
       }, {
-        default: L(() => [
-          E(x(e.label), 1)
+        default: E(() => [
+          L(x(e.label), 1)
         ]),
         _: 1
-      }, 8, ["required", "optional-label", "size"])) : _("", !0),
-      h("div", po, [
-        (v(!0), p(ye, null, me(e.options, (a) => (v(), q(w(he), {
-          id: a.id,
-          key: a.id,
-          name: a.name,
-          value: a.value,
-          checked: o(a),
-          "onUpdate:checked": (c) => n(a.value, c)
+      }, 8, ["required", "optional-label", "size"])) : w("", !0),
+      h("div", bo, [
+        (m(!0), p(ye, null, ve(e.options, (n) => (m(), T(_(he), {
+          id: n.id,
+          key: n.id,
+          name: n.name,
+          value: n.value,
+          checked: o(n),
+          "onUpdate:checked": (c) => a(n.value, c)
         }, {
-          default: L(() => [
-            b(r.$slots, "checkbox", ve(pe(a)), () => [
-              E(x(a.label), 1)
+          default: E(() => [
+            b(r.$slots, "checkbox", me(pe(n)), () => [
+              L(x(n.label), 1)
             ], !0)
           ]),
           _: 2
         }, 1032, ["id", "name", "value", "checked", "onUpdate:checked"]))), 128))
       ])
-    ], 8, vo));
+    ], 8, ho));
   }
 });
-const bo = /* @__PURE__ */ V(ho, [["__scopeId", "data-v-47574ced"]]), go = ["small", "medium", "large"], _o = {
+const _o = /* @__PURE__ */ V(go, [["__scopeId", "data-v-47574ced"]]), wo = ["small", "medium", "large"], So = ["small", "large"], jo = {
   key: 0,
   class: /* @__PURE__ */ k(["joy-panel__header"])
-}, wo = {
-  key: 0,
-  class: "joy-panel__header-title"
-}, So = {
+}, ko = {
   key: 1,
   class: "joy-panel__header-action"
-}, jo = {
+}, $o = {
   key: 2,
   class: "joy-panel__header-subtitle"
-}, ko = { class: "joy-panel__body" }, $o = {
+}, Vo = { class: "joy-panel__body" }, xo = {
   key: 1,
   class: "joy-panel__footer"
-}, Vo = /* @__PURE__ */ $({
+}, Oo = /* @__PURE__ */ $({
   __name: "VJoyPanel",
   props: {
     flex: {
@@ -1838,59 +1835,75 @@ const bo = /* @__PURE__ */ V(ho, [["__scopeId", "data-v-47574ced"]]), go = ["sma
       type: String,
       default: "medium",
       validator(e) {
-        return go.includes(e);
+        return wo.includes(e);
+      }
+    },
+    titleSize: {
+      type: String,
+      default: "large",
+      validator(e) {
+        return So.includes(e);
       }
     }
   },
   setup(e) {
-    const t = W(), l = g(), o = I(() => t["panel-title"] || t["panel-subtitle"] || t["panel-title-action"]);
-    return (n, r) => (v(), p("section", {
+    const l = dt("VJoyWrapperContext", {}), t = I(() => Object.keys(l).length > 0), o = W(), a = g(), r = I(() => o["panel-title"] || o["panel-subtitle"] || o["panel-title-action"]);
+    return (s, n) => (m(), p("section", {
       ref_key: "panel",
-      ref: l,
+      ref: a,
       style: K({ flex: e.flex }),
-      class: k(["joy-panel", `joy-panel--${e.padding}`, { "joy-panel--no-margin": e.noMargin }])
+      class: k([
+        "joy-panel",
+        `joy-panel--${e.padding}`,
+        {
+          "joy-panel--no-margin": e.noMargin || _(t)
+        }
+      ])
     }, [
-      w(o) ? (v(), p("header", _o, [
-        w(t)["panel-title"] ? (v(), p("div", wo, [
-          b(n.$slots, "panel-title", {}, void 0, !0)
-        ])) : _("", !0),
-        w(t)["panel-title-action"] ? (v(), p("div", So, [
-          b(n.$slots, "panel-title-action", {}, void 0, !0)
-        ])) : _("", !0),
-        w(t)["panel-subtitle"] ? (v(), p("div", jo, [
-          b(n.$slots, "panel-subtitle", {}, void 0, !0)
-        ])) : _("", !0)
-      ])) : _("", !0),
-      h("div", ko, [
-        b(n.$slots, "panel-body", {}, void 0, !0)
+      _(r) ? (m(), p("header", jo, [
+        _(o)["panel-title"] ? (m(), p("div", {
+          key: 0,
+          class: k(["joy-panel__header-title", `joy-panel__header-title--${e.titleSize}`])
+        }, [
+          b(s.$slots, "panel-title", {}, void 0, !0)
+        ], 2)) : w("", !0),
+        _(o)["panel-title-action"] ? (m(), p("div", ko, [
+          b(s.$slots, "panel-title-action", {}, void 0, !0)
+        ])) : w("", !0),
+        _(o)["panel-subtitle"] ? (m(), p("div", $o, [
+          b(s.$slots, "panel-subtitle", {}, void 0, !0)
+        ])) : w("", !0)
+      ])) : w("", !0),
+      h("div", Vo, [
+        b(s.$slots, "panel-body", {}, void 0, !0)
       ]),
-      w(t)["panel-action"] ? (v(), p("footer", $o, [
-        b(n.$slots, "panel-action", {}, void 0, !0)
-      ])) : _("", !0)
+      _(o)["panel-action"] ? (m(), p("footer", xo, [
+        b(s.$slots, "panel-action", {}, void 0, !0)
+      ])) : w("", !0)
     ], 6));
   }
 });
-const xo = /* @__PURE__ */ V(Vo, [["__scopeId", "data-v-1aadee0b"]]), Oo = { class: "joy-panel-section" }, Io = {
+const Io = /* @__PURE__ */ V(Oo, [["__scopeId", "data-v-49d83306"]]), Bo = { class: "joy-panel-section" }, Eo = {
   key: 0,
   class: "joy-panel-section__title"
-}, Bo = {
+}, Lo = {
   key: 1,
   class: "joy-panel-section__content"
-}, Lo = /* @__PURE__ */ $({
+}, Co = /* @__PURE__ */ $({
   __name: "VJoyPanelSection",
   setup(e) {
-    const t = W();
-    return (l, o) => (v(), p("div", Oo, [
-      w(t)["panel-section-title"] ? (v(), p("div", Io, [
-        b(l.$slots, "panel-section-title", {}, void 0, !0)
-      ])) : _("", !0),
-      w(t)["panel-section-content"] ? (v(), p("div", Bo, [
-        b(l.$slots, "panel-section-content", {}, void 0, !0)
-      ])) : _("", !0)
+    const l = W();
+    return (t, o) => (m(), p("div", Bo, [
+      _(l)["panel-section-title"] ? (m(), p("div", Eo, [
+        b(t.$slots, "panel-section-title", {}, void 0, !0)
+      ])) : w("", !0),
+      _(l)["panel-section-content"] ? (m(), p("div", Lo, [
+        b(t.$slots, "panel-section-content", {}, void 0, !0)
+      ])) : w("", !0)
     ]));
   }
 });
-const Eo = /* @__PURE__ */ V(Lo, [["__scopeId", "data-v-d88510ab"]]), Po = ["id", "value", "checked", "disabled", "required", "name"], Co = { class: "joy-radio-label" }, Jo = { class: "joy-radio-content__wrapper" }, qo = { class: "joy-radio-content" }, To = /* @__PURE__ */ $({
+const Po = /* @__PURE__ */ V(Co, [["__scopeId", "data-v-d88510ab"]]), Jo = ["id", "value", "checked", "disabled", "required", "name"], To = { class: "joy-radio-label" }, qo = { class: "joy-radio-content__wrapper" }, zo = { class: "joy-radio-content" }, Ao = /* @__PURE__ */ $({
   __name: "VJoyRadio",
   props: {
     disabled: {
@@ -1925,13 +1938,13 @@ const Eo = /* @__PURE__ */ V(Lo, [["__scopeId", "data-v-d88510ab"]]), Po = ["id"
     }
   },
   emits: ["update:modelValue"],
-  setup(e, { expose: t, emit: l }) {
-    const o = e, n = g(!1), r = g(!1), s = g(null), a = g(null), c = W(), f = I(() => !o.modelValue || !o.value ? !1 : o.modelValue === o.value);
+  setup(e, { expose: l, emit: t }) {
+    const o = e, a = g(!1), r = g(!1), s = g(null), n = g(null), c = W(), f = I(() => !o.modelValue || !o.value ? !1 : o.modelValue === o.value);
     function u() {
-      n.value = !!c["expandable-content"] && f.value;
+      a.value = !!c["expandable-content"] && f.value;
     }
-    function m() {
-      l("update:modelValue", o.value), u();
+    function v() {
+      t("update:modelValue", o.value), u();
     }
     Z(() => {
       o.theme === "outline" && u();
@@ -1942,22 +1955,22 @@ const Eo = /* @__PURE__ */ V(Lo, [["__scopeId", "data-v-d88510ab"]]), Po = ["id"
     function y() {
       r.value = !1;
     }
-    return P(
+    return C(
       () => o.modelValue,
       () => {
         u();
       }
-    ), t({
+    ), l({
       checked: f,
-      isExpanded: n
-    }), (d, j) => (v(), p("label", {
+      isExpanded: a
+    }), (d, j) => (m(), p("label", {
       ref_key: "root",
       ref: s,
       class: k([
         "joy-radio",
         `joy-radio--${e.theme}`,
         {
-          "joy-radio--checked": w(f),
+          "joy-radio--checked": _(f),
           "joy-radio--disabled": e.disabled,
           "joy-radio--invalid": e.invalid,
           "joy-radio--outline-focus": r.value && e.theme === "outline",
@@ -1969,25 +1982,25 @@ const Eo = /* @__PURE__ */ V(Lo, [["__scopeId", "data-v-d88510ab"]]), Po = ["id"
         id: e.id,
         type: "radio",
         value: e.value,
-        checked: w(f),
+        checked: _(f),
         disabled: e.disabled,
         required: e.required,
         name: e.name,
-        onChange: m,
+        onChange: v,
         onFocus: i,
         onBlur: y
-      }, null, 40, Po),
-      h("span", Co, [
+      }, null, 40, Jo),
+      h("span", To, [
         b(d.$slots, "default", {}, void 0, !0)
       ]),
-      h("div", Jo, [
-        h("div", qo, [
+      h("div", qo, [
+        h("div", zo, [
           b(d.$slots, "radio-content", {}, void 0, !0)
         ]),
         h("div", {
           ref_key: "expandableElement",
-          ref: a,
-          class: k(["joy-radio-expandable", { "joy-radio-expandable--expanded": n.value }])
+          ref: n,
+          class: k(["joy-radio-expandable", { "joy-radio-expandable--expanded": a.value }])
         }, [
           b(d.$slots, "expandable-content", {}, void 0, !0)
         ], 2)
@@ -1995,7 +2008,7 @@ const Eo = /* @__PURE__ */ V(Lo, [["__scopeId", "data-v-d88510ab"]]), Po = ["id"
     ], 2));
   }
 });
-const zo = /* @__PURE__ */ V(To, [["__scopeId", "data-v-24cea99b"]]), Ao = ["form", "name"], Fo = /* @__PURE__ */ $({
+const Fo = /* @__PURE__ */ V(Ao, [["__scopeId", "data-v-24cea99b"]]), Do = ["form", "name"], Ro = /* @__PURE__ */ $({
   __name: "VJoyRadioGroup",
   props: {
     direction: {
@@ -2010,26 +2023,26 @@ const zo = /* @__PURE__ */ V(To, [["__scopeId", "data-v-24cea99b"]]), Ao = ["for
     }
   },
   setup(e) {
-    return (t, l) => (v(), p("fieldset", {
+    return (l, t) => (m(), p("fieldset", {
       ref: "root",
       class: "joy-radio-group-fieldset",
       role: "radiogroup",
       form: e.form,
       name: e.name
     }, [
-      b(t.$slots, "radio-group-legend", {}, void 0, !0),
+      b(l.$slots, "radio-group-legend", {}, void 0, !0),
       h("div", {
         class: k(["joy-radio-group-container", `joy-radio-group-${e.direction}`])
       }, [
-        b(t.$slots, "default", {}, void 0, !0)
+        b(l.$slots, "default", {}, void 0, !0)
       ], 2)
-    ], 8, Ao));
+    ], 8, Do));
   }
 });
-const Do = /* @__PURE__ */ V(Fo, [["__scopeId", "data-v-ace1a80f"]]), Ro = (e) => (te("data-v-ab4d0113"), e = e(), le(), e), Mo = ["id", "name", "aria-invalid", "required", "disabled", "value"], No = /* @__PURE__ */ Ro(() => /* @__PURE__ */ h("joy-icon", {
+const Mo = /* @__PURE__ */ V(Ro, [["__scopeId", "data-v-ace1a80f"]]), No = (e) => (te("data-v-ab4d0113"), e = e(), le(), e), Ho = ["id", "name", "aria-invalid", "required", "disabled", "value"], Wo = /* @__PURE__ */ No(() => /* @__PURE__ */ h("joy-icon", {
   class: "joy-select__chevron",
   name: "chevron-down"
-}, null, -1)), Ho = /* @__PURE__ */ $({
+}, null, -1)), Uo = /* @__PURE__ */ $({
   __name: "VJoySelect",
   props: {
     disabled: {
@@ -2069,26 +2082,26 @@ const Do = /* @__PURE__ */ V(Fo, [["__scopeId", "data-v-ace1a80f"]]), Ro = (e) =
     // ...TEXT_BASED_PROPS,
   },
   emits: ["update:modelValue"],
-  setup(e, { emit: t }) {
-    const l = e, o = g(), n = g(), r = W(), s = g(!1);
+  setup(e, { emit: l }) {
+    const t = e, o = g(), a = g(), r = W(), s = g(!1);
     Z(() => {
       var i;
       const u = r.label && r.label();
       if (!u || !u.length)
         return;
-      const m = u[0];
-      if (m.type === "JoyLabel") {
-        const y = (i = m.props) == null ? void 0 : i.for;
+      const v = u[0];
+      if (v.type === "JoyLabel") {
+        const y = (i = v.props) == null ? void 0 : i.for;
         if (!y) {
           console.warn("JoyLabel for attribute is missing");
           return;
         }
-        y !== l.id && console.warn("JoyLabel for attribute does not match with JoySelect id");
+        y !== t.id && console.warn("JoyLabel for attribute does not match with JoySelect id");
       }
     });
-    function a(u) {
-      const m = u.target.value;
-      t("update:modelValue", m);
+    function n(u) {
+      const v = u.target.value;
+      l("update:modelValue", v);
     }
     function c() {
       s.value = !0;
@@ -2096,23 +2109,23 @@ const Do = /* @__PURE__ */ V(Fo, [["__scopeId", "data-v-ace1a80f"]]), Ro = (e) =
     function f() {
       s.value = !1;
     }
-    return (u, m) => (v(), p("div", {
+    return (u, v) => (m(), p("div", {
       ref_key: "root",
       ref: o
     }, [
       b(u.$slots, "select-label", {}, () => [
-        e.label ? (v(), q(N, {
+        e.label ? (m(), T(N, {
           key: 0,
           required: e.required && e.requiredMark,
           "optional-label": e.optionalLabel,
           for: e.id || e.name,
           size: e.labelSize
         }, {
-          default: L(() => [
-            E(x(e.label), 1)
+          default: E(() => [
+            L(x(e.label), 1)
           ]),
           _: 1
-        }, 8, ["required", "optional-label", "for", "size"])) : _("", !0)
+        }, 8, ["required", "optional-label", "for", "size"])) : w("", !0)
       ], !0),
       h("div", {
         class: k({
@@ -2125,25 +2138,25 @@ const Do = /* @__PURE__ */ V(Fo, [["__scopeId", "data-v-ace1a80f"]]), Ro = (e) =
         h("select", {
           id: e.id || e.name,
           ref_key: "select",
-          ref: n,
+          ref: a,
           class: "joy-select",
           name: e.name,
           "aria-invalid": e.invalid,
           required: e.required,
           disabled: e.disabled,
           value: e.modelValue,
-          onInput: a,
+          onInput: n,
           onFocus: c,
           onBlur: f
         }, [
           b(u.$slots, "default", {}, void 0, !0)
-        ], 40, Mo),
-        No
+        ], 40, Ho),
+        Wo
       ], 2)
     ], 512));
   }
 });
-const Wo = /* @__PURE__ */ V(Ho, [["__scopeId", "data-v-ab4d0113"]]), Uo = ["aria-disabled"], Go = ["id", "value", "checked", "disabled", "required", "name"], Ko = /* @__PURE__ */ $({
+const Go = /* @__PURE__ */ V(Uo, [["__scopeId", "data-v-ab4d0113"]]), Ko = ["aria-disabled"], Qo = ["id", "value", "checked", "disabled", "required", "name"], Zo = /* @__PURE__ */ $({
   __name: "VJoySelectableItem",
   props: {
     disabled: {
@@ -2179,16 +2192,16 @@ const Wo = /* @__PURE__ */ V(Ho, [["__scopeId", "data-v-ab4d0113"]]), Uo = ["ari
     }
   },
   emits: ["update:checked"],
-  setup(e, { emit: t }) {
-    const l = e, o = g(l.checked), n = g(), r = g(!1), s = l.multiple ? "div" : "label", a = {
+  setup(e, { emit: l }) {
+    const t = e, o = g(t.checked), a = g(), r = g(!1), s = t.multiple ? "div" : "label", n = {
       onRadioChange: () => {
-        t("update:checked", l.value);
+        l("update:checked", t.value);
       },
       onClick: () => {
-        l.checked && !l.multiple && t("update:checked", "");
+        t.checked && !t.multiple && l("update:checked", "");
       },
       onLabelClick: (f) => {
-        l.multiple || f.stopPropagation();
+        t.multiple || f.stopPropagation();
       },
       onFocus: () => {
         r.value = !0;
@@ -2198,9 +2211,9 @@ const Wo = /* @__PURE__ */ V(Ho, [["__scopeId", "data-v-ab4d0113"]]), Uo = ["ari
       }
     };
     function c(f) {
-      t("update:checked", f);
+      l("update:checked", f);
     }
-    return (f, u) => (v(), p("div", {
+    return (f, u) => (m(), p("div", {
       class: k([
         "joy-selectable-item__wrapper",
         {
@@ -2209,13 +2222,13 @@ const Wo = /* @__PURE__ */ V(Ho, [["__scopeId", "data-v-ab4d0113"]]), Uo = ["ari
       ]),
       "aria-disabled": e.disabled,
       onClick: u[4] || (u[4] = //@ts-ignore
-      (...m) => a.onClick && a.onClick(...m))
+      (...v) => n.onClick && n.onClick(...v))
     }, [
-      e.multiple ? _("", !0) : (v(), p("input", {
+      e.multiple ? w("", !0) : (m(), p("input", {
         key: 0,
         id: e.id,
         ref_key: "inputRadio",
-        ref: n,
+        ref: a,
         type: "radio",
         value: e.value,
         checked: e.checked,
@@ -2223,13 +2236,13 @@ const Wo = /* @__PURE__ */ V(Ho, [["__scopeId", "data-v-ab4d0113"]]), Uo = ["ari
         required: e.required,
         name: e.name,
         onChange: u[0] || (u[0] = //@ts-ignore
-        (...m) => a.onRadioChange && a.onRadioChange(...m)),
+        (...v) => n.onRadioChange && n.onRadioChange(...v)),
         onFocus: u[1] || (u[1] = //@ts-ignore
-        (...m) => a.onFocus && a.onFocus(...m)),
+        (...v) => n.onFocus && n.onFocus(...v)),
         onBlur: u[2] || (u[2] = //@ts-ignore
-        (...m) => a.onBlur && a.onBlur(...m))
-      }, null, 40, Go)),
-      (v(), q(ce(w(s)), {
+        (...v) => n.onBlur && n.onBlur(...v))
+      }, null, 40, Qo)),
+      (m(), T(ce(_(s)), {
         for: e.id,
         class: k([
           "joy-selectable-item",
@@ -2240,15 +2253,15 @@ const Wo = /* @__PURE__ */ V(Ho, [["__scopeId", "data-v-ab4d0113"]]), Uo = ["ari
             "joy-selectable-item--single": !e.multiple
           }
         ]),
-        onClick: a.onLabelClick
+        onClick: n.onLabelClick
       }, {
-        default: L(() => [
-          e.multiple ? (v(), q(w(he), {
+        default: E(() => [
+          e.multiple ? (m(), T(_(he), {
             key: 0,
             id: e.id,
             checked: o.value,
             "onUpdate:checked": [
-              u[3] || (u[3] = (m) => o.value = m),
+              u[3] || (u[3] = (v) => o.value = v),
               c
             ],
             disabled: e.disabled,
@@ -2256,15 +2269,15 @@ const Wo = /* @__PURE__ */ V(Ho, [["__scopeId", "data-v-ab4d0113"]]), Uo = ["ari
             name: e.name,
             "display-focus": !1,
             required: e.required,
-            onFocus: a.onFocus,
-            onBlur: a.onBlur
+            onFocus: n.onFocus,
+            onBlur: n.onBlur
           }, {
-            default: L(() => [
+            default: E(() => [
               b(f.$slots, "default", {}, void 0, !0)
             ]),
             _: 3
-          }, 8, ["id", "checked", "disabled", "value", "name", "required", "onFocus", "onBlur"])) : _("", !0),
-          e.multiple ? _("", !0) : b(f.$slots, "default", { key: 1 }, void 0, !0),
+          }, 8, ["id", "checked", "disabled", "value", "name", "required", "onFocus", "onBlur"])) : w("", !0),
+          e.multiple ? w("", !0) : b(f.$slots, "default", { key: 1 }, void 0, !0),
           h("div", {
             class: k([{ "joy-selectable-item__sublabel": f.$slots["selectable-item-sublabel"] }])
           }, [
@@ -2273,18 +2286,18 @@ const Wo = /* @__PURE__ */ V(Ho, [["__scopeId", "data-v-ab4d0113"]]), Uo = ["ari
         ]),
         _: 3
       }, 8, ["for", "class", "onClick"]))
-    ], 10, Uo));
+    ], 10, Ko));
   }
 });
-const lt = /* @__PURE__ */ V(Ko, [["__scopeId", "data-v-cb2531c0"]]), Qo = ["id"], Zo = /* @__PURE__ */ $({
+const lt = /* @__PURE__ */ V(Zo, [["__scopeId", "data-v-cb2531c0"]]), Yo = ["id"], Xo = /* @__PURE__ */ $({
   __name: "VJoySelectableItemGroup",
   props: {
     options: {
       type: Array,
       required: !0,
       validator(e) {
-        const t = e.every((o) => Object.keys(o).includes("value")), l = e.every((o) => Object.keys(o).includes("label"));
-        return t && l;
+        const l = e.every((o) => Object.keys(o).includes("value")), t = e.every((o) => Object.keys(o).includes("label"));
+        return l && t;
       }
     },
     id: String,
@@ -2316,33 +2329,33 @@ const lt = /* @__PURE__ */ V(Ko, [["__scopeId", "data-v-cb2531c0"]]), Qo = ["id"
     }
   },
   emits: ["update:value"],
-  setup(e, { emit: t }) {
-    const l = e;
+  setup(e, { emit: l }) {
+    const t = e;
     function o(r) {
-      return typeof l.value == "string" ? l.value === r.value : (l.value || []).includes(r.value);
+      return typeof t.value == "string" ? t.value === r.value : (t.value || []).includes(r.value);
     }
-    function n(r, s) {
-      if (!l.multiple)
-        return t("update:value", s);
-      let a = [...l.value || []];
-      s && typeof s == "boolean" ? a.push(r) : a.splice(a.indexOf(r), 1), t("update:value", a);
+    function a(r, s) {
+      if (!t.multiple)
+        return l("update:value", s);
+      let n = [...t.value || []];
+      s && typeof s == "boolean" ? n.push(r) : n.splice(n.indexOf(r), 1), l("update:value", n);
     }
-    return (r, s) => (v(), p("fieldset", {
+    return (r, s) => (m(), p("fieldset", {
       id: e.id,
       class: "joy-selectable-item-group__wrapper"
     }, [
-      e.label ? (v(), q(w(N), {
+      e.label ? (m(), T(_(N), {
         key: 0,
         "tag-name": "legend",
         required: e.required && e.requiredMark,
         "optional-label": e.optionalLabel,
         size: e.labelSize
       }, {
-        default: L(() => [
-          E(x(e.label), 1)
+        default: E(() => [
+          L(x(e.label), 1)
         ]),
         _: 1
-      }, 8, ["required", "optional-label", "size"])) : _("", !0),
+      }, 8, ["required", "optional-label", "size"])) : w("", !0),
       h("div", {
         class: k([
           "joy-selectable-item-group",
@@ -2353,47 +2366,51 @@ const lt = /* @__PURE__ */ V(Ko, [["__scopeId", "data-v-cb2531c0"]]), Qo = ["id"
           }
         ])
       }, [
-        (v(!0), p(ye, null, me(e.options, (a) => (v(), q(w(lt), {
-          id: a.id,
-          key: a.id,
-          name: a.name,
-          value: a.value,
+        (m(!0), p(ye, null, ve(e.options, (n) => (m(), T(_(lt), {
+          id: n.id,
+          key: n.id,
+          name: n.name,
+          value: n.value,
           multiple: e.multiple,
-          checked: o(a),
-          "onUpdate:checked": (c) => n(a.value, c)
+          checked: o(n),
+          "onUpdate:checked": (c) => a(n.value, c)
         }, He({
-          default: L(() => [
-            E(x(a.label) + " ", 1)
+          default: E(() => [
+            L(x(n.label) + " ", 1)
           ]),
           _: 2
         }, [
-          a.subLabel ? {
+          n.subLabel ? {
             name: "selectable-item-sublabel",
-            fn: L(() => [
-              E(x(a.subLabel), 1)
+            fn: E(() => [
+              L(x(n.subLabel), 1)
             ]),
             key: "0"
           } : void 0
         ]), 1032, ["id", "name", "value", "multiple", "checked", "onUpdate:checked"]))), 128))
       ], 2)
-    ], 8, Qo));
+    ], 8, Yo));
   }
 });
-const Yo = /* @__PURE__ */ V(Zo, [["__scopeId", "data-v-3ba17434"]]), Xo = /* @__PURE__ */ $({
+const en = /* @__PURE__ */ V(Xo, [["__scopeId", "data-v-3ba17434"]]), tn = /* @__PURE__ */ $({
   __name: "VJoyWrapper",
   props: {
+    /** Horizontal spread. Refers to CSS flex justify-content. */
     justify: {
       type: String,
       default: "flex-start"
     },
+    /** Vertical spread. Refers to CSS flex align-items. */
     align: {
       type: String,
       default: "center"
     },
+    /** Vertical flex, or horizontal. Refers to CSS flex-direction */
     direction: {
       type: String,
       default: "row"
     },
+    /** Automatically sets new line if there are not enough horizontal space. Refers to CSS flex-wrap */
     wrap: {
       type: String,
       default: "wrap"
@@ -2404,7 +2421,7 @@ const Yo = /* @__PURE__ */ V(Zo, [["__scopeId", "data-v-3ba17434"]]), Xo = /* @_
     }
   },
   setup(e) {
-    return (t, l) => (v(), p("div", {
+    return ct("VJoyWrapperContext", e), (t, o) => (m(), p("div", {
       class: k([
         "joy-wrapper",
         `joy-wrapper--justify-${e.justify}`,
@@ -2418,83 +2435,83 @@ const Yo = /* @__PURE__ */ V(Zo, [["__scopeId", "data-v-3ba17434"]]), Xo = /* @_
     ], 2));
   }
 });
-const en = /* @__PURE__ */ V(Xo, [["__scopeId", "data-v-477e149b"]]), tn = { class: "joy-template__wrapper" }, ln = {
+const ln = /* @__PURE__ */ V(tn, [["__scopeId", "data-v-ff154744"]]), on = { class: "joy-template__wrapper" }, nn = {
   key: 0,
   class: "joy-template__heading"
-}, on = {
+}, an = {
   key: 0,
   class: "joy-template-slot-back"
-}, nn = { class: "joy-template__heading___headings" }, an = {
+}, rn = { class: "joy-template__heading___headings" }, sn = {
   key: 0,
   class: "joy-template-slot-title"
-}, rn = {
+}, un = {
   key: 1,
   class: "joy-template-slot-subtitle"
-}, sn = {
+}, dn = {
   key: 1,
   class: "joy-template-slot-actions"
-}, un = {
+}, cn = {
   key: 0,
   class: "joy-template-slot-main"
-}, dn = {
+}, fn = {
   key: 1,
   class: "joy-template-slot-sidebar"
-}, cn = /* @__PURE__ */ $({
+}, yn = /* @__PURE__ */ $({
   __name: "VJoyTemplate",
   props: {
     full: { type: Boolean, default: !1 },
     sidebar: { type: String, default: "right" }
   },
   setup(e) {
-    const t = e, l = W(), o = I(() => !!l["template-back"] || !!l["template-title"] || !!l["template-subtitle"] || !l["template-actions"]);
-    return (n, r) => (v(), p("main", {
-      class: k(["joy-template", { "joy-template--full": t.full }])
+    const l = e, t = W(), o = I(() => !!t["template-back"] || !!t["template-title"] || !!t["template-subtitle"] || !!t["template-actions"]);
+    return (a, r) => (m(), p("main", {
+      class: k(["joy-template", { "joy-template--full": l.full }])
     }, [
-      h("div", tn, [
-        w(o) ? (v(), p("div", ln, [
-          w(l)["template-back"] ? (v(), p("div", on, [
-            b(n.$slots, "template-back", {}, void 0, !0)
-          ])) : _("", !0),
-          h("div", nn, [
-            w(l)["template-title"] ? (v(), p("div", an, [
-              b(n.$slots, "template-title", {}, void 0, !0)
-            ])) : _("", !0),
-            w(l)["template-subtitle"] ? (v(), p("div", rn, [
-              b(n.$slots, "template-subtitle", {}, void 0, !0)
-            ])) : _("", !0)
+      h("div", on, [
+        _(o) ? (m(), p("div", nn, [
+          _(t)["template-back"] ? (m(), p("div", an, [
+            b(a.$slots, "template-back", {}, void 0, !0)
+          ])) : w("", !0),
+          h("div", rn, [
+            _(t)["template-title"] ? (m(), p("div", sn, [
+              b(a.$slots, "template-title", {}, void 0, !0)
+            ])) : w("", !0),
+            _(t)["template-subtitle"] ? (m(), p("div", un, [
+              b(a.$slots, "template-subtitle", {}, void 0, !0)
+            ])) : w("", !0)
           ]),
-          w(l)["template-actions"] ? (v(), p("div", sn, [
-            b(n.$slots, "template-actions", {}, void 0, !0)
-          ])) : _("", !0)
-        ])) : _("", !0),
+          _(t)["template-actions"] ? (m(), p("div", dn, [
+            b(a.$slots, "template-actions", {}, void 0, !0)
+          ])) : w("", !0)
+        ])) : w("", !0),
         h("div", {
           class: k([
             "joy-template__content",
             {
-              "joy-template__content--reverse": t.sidebar === "left"
+              "joy-template__content--reverse": l.sidebar === "left"
             }
           ])
         }, [
-          n.$slots["template-main"] ? (v(), p("div", un, [
-            b(n.$slots, "template-main", {}, void 0, !0)
-          ])) : _("", !0),
-          n.$slots["template-sidebar"] ? (v(), p("div", dn, [
-            b(n.$slots, "template-sidebar", {}, void 0, !0)
-          ])) : _("", !0)
+          a.$slots["template-main"] ? (m(), p("div", cn, [
+            b(a.$slots, "template-main", {}, void 0, !0)
+          ])) : w("", !0),
+          a.$slots["template-sidebar"] ? (m(), p("div", fn, [
+            b(a.$slots, "template-sidebar", {}, void 0, !0)
+          ])) : w("", !0)
         ], 2)
       ])
     ], 2));
   }
 });
-const fn = /* @__PURE__ */ V(cn, [["__scopeId", "data-v-2d3f45da"]]), yn = ["aria-disabled"], mn = { class: "joy-textarea_wrapper" }, vn = ["id", "disabled", "name", "required", "minlength", "value"], pn = {
+const vn = /* @__PURE__ */ V(yn, [["__scopeId", "data-v-85e0d8cf"]]), mn = ["aria-disabled"], pn = { class: "joy-textarea_wrapper" }, hn = ["id", "disabled", "name", "required", "minlength", "value"], bn = {
   key: 0,
   class: "joy-textarea_helpers"
-}, hn = {
+}, gn = {
   key: 0,
   name: "check",
   color: "grey",
   size: "xxsmall"
-}, bn = /* @__PURE__ */ $({
+}, _n = /* @__PURE__ */ $({
   __name: "VJoyTextarea",
   props: {
     disabled: {
@@ -2542,25 +2559,25 @@ const fn = /* @__PURE__ */ V(cn, [["__scopeId", "data-v-2d3f45da"]]), yn = ["ari
     }
   },
   emits: ["update:modelValue"],
-  setup(e, { expose: t, emit: l }) {
-    const o = e, n = g(), { triggerResize: r } = tl({
-      element: o.autogrow ? n : void 0
-    }), s = g(!1), a = g(!1), c = I(() => o.maxlength ? o.modelValue.length > o.maxlength : !1), f = I(() => o.minlength ? o.modelValue.length < o.minlength : !1), u = {
-      onInput: (m) => {
-        l("update:modelValue", m.target.value), r();
+  setup(e, { expose: l, emit: t }) {
+    const o = e, a = g(), { triggerResize: r } = ol({
+      element: o.autogrow ? a : void 0
+    }), s = g(!1), n = g(!1), c = I(() => o.maxlength ? o.modelValue.length > o.maxlength : !1), f = I(() => o.minlength ? o.modelValue.length < o.minlength : !1), u = {
+      onInput: (v) => {
+        t("update:modelValue", v.target.value), r();
       },
       onBlur: () => {
-        a.value = !1, s.value = c.value || f.value;
+        n.value = !1, s.value = c.value || f.value;
       },
       onFocus: () => {
-        a.value = !0;
+        n.value = !0;
       }
     };
-    return t({
+    return l({
       isInvalid: s,
       valueOverMaxlength: c,
       valueUnderMinlength: f
-    }), (m, i) => (v(), p("div", {
+    }), (v, i) => (m(), p("div", {
       "aria-disabled": e.disabled,
       class: k([
         "joy-textarea",
@@ -2568,28 +2585,28 @@ const fn = /* @__PURE__ */ V(cn, [["__scopeId", "data-v-2d3f45da"]]), yn = ["ari
           "joy-textarea_invalid": s.value || e.invalid,
           "joy-textarea_disabled": e.disabled,
           "joy-textarea_autogrow": e.autogrow,
-          "joy-textarea_focusing": a.value
+          "joy-textarea_focusing": n.value
         }
       ])
     }, [
-      fe(w(N), {
+      fe(_(N), {
         for: e.id,
         required: e.required && e.requiredMark,
         "optional-label": e.optionalLabel,
         size: e.labelSize
       }, {
-        default: L(() => [
-          b(m.$slots, "default", {}, () => [
-            E(x(e.label), 1)
+        default: E(() => [
+          b(v.$slots, "default", {}, () => [
+            L(x(e.label), 1)
           ], !0)
         ]),
         _: 3
       }, 8, ["for", "required", "optional-label", "size"]),
-      h("div", mn, [
-        h("textarea", Q(m.$attrs, {
+      h("div", pn, [
+        h("textarea", Q(v.$attrs, {
           id: e.id,
           ref_key: "textarea",
-          ref: n,
+          ref: a,
           class: "joy-native-textarea",
           disabled: e.disabled,
           name: e.name,
@@ -2602,25 +2619,25 @@ const fn = /* @__PURE__ */ V(cn, [["__scopeId", "data-v-2d3f45da"]]), yn = ["ari
           (...y) => u.onFocus && u.onFocus(...y)),
           onBlur: i[2] || (i[2] = //@ts-ignore
           (...y) => u.onBlur && u.onBlur(...y))
-        }), null, 16, vn)
+        }), null, 16, hn)
       ]),
-      e.minlength || e.maxlength ? (v(), p("div", pn, [
-        e.minlength ? (v(), p("p", {
+      e.minlength || e.maxlength ? (m(), p("div", bn, [
+        e.minlength ? (m(), p("p", {
           key: 0,
           class: k(["joy-textarea-min", { "joy-textarea-min-invalid": e.invalid }])
         }, [
-          w(f) ? _("", !0) : (v(), p("joy-icon", hn)),
-          E(" " + x(e.minlengthLabel || `Minimum ${e.minlength} characters`), 1)
-        ], 2)) : _("", !0),
-        e.maxlength ? (v(), p("p", {
+          _(f) ? w("", !0) : (m(), p("joy-icon", gn)),
+          L(" " + x(e.minlengthLabel || `Minimum ${e.minlength} characters`), 1)
+        ], 2)) : w("", !0),
+        e.maxlength ? (m(), p("p", {
           key: 1,
-          class: k(["joy-textarea-count", { "joy-textarea-count-invalid": w(c) }])
-        }, x(e.modelValue.length + "/" + e.maxlength), 3)) : _("", !0)
-      ])) : _("", !0)
-    ], 10, yn));
+          class: k(["joy-textarea-count", { "joy-textarea-count-invalid": _(c) }])
+        }, x(e.modelValue.length + "/" + e.maxlength), 3)) : w("", !0)
+      ])) : w("", !0)
+    ], 10, mn));
   }
 });
-const gn = /* @__PURE__ */ V(bn, [["__scopeId", "data-v-1496c389"]]), ot = (e) => (te("data-v-cf79d999"), e = e(), le(), e), _n = { class: "joy-toggle__wrapper" }, wn = ["name", "disabled", "checked", "required", "aria-checked", "value"], Sn = { class: "joy-toggle__content" }, jn = /* @__PURE__ */ ot(() => /* @__PURE__ */ h("span", { class: "joy-toggle__symbol" }, null, -1)), kn = { class: "joy-toggle__content-label" }, $n = /* @__PURE__ */ ot(() => /* @__PURE__ */ h("span", { class: "joy-toggle__smile" }, [
+const wn = /* @__PURE__ */ V(_n, [["__scopeId", "data-v-1496c389"]]), ot = (e) => (te("data-v-cf79d999"), e = e(), le(), e), Sn = { class: "joy-toggle__wrapper" }, jn = ["name", "disabled", "checked", "required", "aria-checked", "value"], kn = { class: "joy-toggle__content" }, $n = /* @__PURE__ */ ot(() => /* @__PURE__ */ h("span", { class: "joy-toggle__symbol" }, null, -1)), Vn = { class: "joy-toggle__content-label" }, xn = /* @__PURE__ */ ot(() => /* @__PURE__ */ h("span", { class: "joy-toggle__smile" }, [
   /* @__PURE__ */ h("svg", {
     width: "18",
     height: "10",
@@ -2633,7 +2650,7 @@ const gn = /* @__PURE__ */ V(bn, [["__scopeId", "data-v-1496c389"]]), ot = (e) =
       fill: "currentColor"
     })
   ])
-], -1)), Vn = /* @__PURE__ */ $({
+], -1)), On = /* @__PURE__ */ $({
   __name: "VJoyToggle",
   props: {
     modelValue: {
@@ -2666,27 +2683,27 @@ const gn = /* @__PURE__ */ V(bn, [["__scopeId", "data-v-1496c389"]]), ot = (e) =
     label: String
   },
   emits: ["update:modelValue"],
-  setup(e, { emit: t }) {
-    const l = g(!1), o = {
-      onChange: (n) => {
-        const r = n.target.checked;
-        t("update:modelValue", r);
+  setup(e, { emit: l }) {
+    const t = g(!1), o = {
+      onChange: (a) => {
+        const r = a.target.checked;
+        l("update:modelValue", r);
       },
       onFocus: () => {
-        l.value = !0;
+        t.value = !0;
       },
       onBlur: () => {
-        l.value = !1;
+        t.value = !1;
       }
     };
-    return (n, r) => (v(), p("div", _n, [
+    return (a, r) => (m(), p("div", Sn, [
       h("label", {
         class: k([
           "joy-toggle",
           {
             "joy-toggle__checked": e.modelValue,
             "joy-toggle__disabled": e.disabled,
-            "joy-toggle__focusing": l.value
+            "joy-toggle__focusing": t.value
           }
         ])
       }, [
@@ -2707,77 +2724,77 @@ const gn = /* @__PURE__ */ V(bn, [["__scopeId", "data-v-1496c389"]]), ot = (e) =
           (...s) => o.onFocus && o.onFocus(...s)),
           onBlur: r[2] || (r[2] = //@ts-ignore
           (...s) => o.onBlur && o.onBlur(...s))
-        }, null, 40, wn),
-        h("p", Sn, [
-          jn,
-          h("span", kn, [
-            b(n.$slots, "default", {}, () => [
-              E(x(e.label), 1)
+        }, null, 40, jn),
+        h("p", kn, [
+          $n,
+          h("span", Vn, [
+            b(a.$slots, "default", {}, () => [
+              L(x(e.label), 1)
             ], !0)
           ]),
-          $n
+          xn
         ])
       ], 2)
     ]));
   }
 });
-const xn = /* @__PURE__ */ V(Vn, [["__scopeId", "data-v-cf79d999"]]), On = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
+const In = /* @__PURE__ */ V(On, [["__scopeId", "data-v-cf79d999"]]), Bn = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
   __proto__: null,
-  VJoyBadge: ft,
-  VJoyButton: kt,
+  VJoyBadge: vt,
+  VJoyButton: Vt,
   VJoyCheckbox: he,
-  VJoyCounter: Rt,
-  VJoyDropdown: Rl,
+  VJoyCounter: Nt,
+  VJoyDropdown: Nl,
   VJoyDropdownList: et,
   VJoyFormError: tt,
-  VJoyHighlight: Yl,
-  VJoyInput: so,
+  VJoyHighlight: eo,
+  VJoyInput: co,
   VJoyLabel: N,
-  VJoyLink: mo,
-  VJoyMultiCheckbox: bo,
-  VJoyPanel: xo,
-  VJoyPanelSection: Eo,
-  VJoyRadio: zo,
-  VJoyRadioGroup: Do,
-  VJoySelect: Wo,
+  VJoyLink: po,
+  VJoyMultiCheckbox: _o,
+  VJoyPanel: Io,
+  VJoyPanelSection: Po,
+  VJoyRadio: Fo,
+  VJoyRadioGroup: Mo,
+  VJoySelect: Go,
   VJoySelectableItem: lt,
-  VJoySelectableItemGroup: Yo,
+  VJoySelectableItemGroup: en,
   VJoySpinner: We,
-  VJoyTemplate: fn,
-  VJoyTextarea: gn,
-  VJoyToggle: xn,
-  VJoyWrapper: en
-}, Symbol.toStringTag, { value: "Module" })), Bn = {
+  VJoyTemplate: vn,
+  VJoyTextarea: wn,
+  VJoyToggle: In,
+  VJoyWrapper: ln
+}, Symbol.toStringTag, { value: "Module" })), Ln = {
   install: (e) => {
-    Object.entries(On).forEach(([t, l]) => {
-      e.component(t, l);
+    Object.entries(Bn).forEach(([l, t]) => {
+      e.component(l, t);
     });
   }
 };
 export {
-  Bn as JoyVuePlugin,
-  ft as VJoyBadge,
-  kt as VJoyButton,
+  Ln as JoyVuePlugin,
+  vt as VJoyBadge,
+  Vt as VJoyButton,
   he as VJoyCheckbox,
-  Rt as VJoyCounter,
-  Rl as VJoyDropdown,
+  Nt as VJoyCounter,
+  Nl as VJoyDropdown,
   et as VJoyDropdownList,
   tt as VJoyFormError,
-  Yl as VJoyHighlight,
-  so as VJoyInput,
+  eo as VJoyHighlight,
+  co as VJoyInput,
   N as VJoyLabel,
-  mo as VJoyLink,
-  bo as VJoyMultiCheckbox,
-  xo as VJoyPanel,
-  Eo as VJoyPanelSection,
-  zo as VJoyRadio,
-  Do as VJoyRadioGroup,
-  Wo as VJoySelect,
+  po as VJoyLink,
+  _o as VJoyMultiCheckbox,
+  Io as VJoyPanel,
+  Po as VJoyPanelSection,
+  Fo as VJoyRadio,
+  Mo as VJoyRadioGroup,
+  Go as VJoySelect,
   lt as VJoySelectableItem,
-  Yo as VJoySelectableItemGroup,
+  en as VJoySelectableItemGroup,
   We as VJoySpinner,
-  fn as VJoyTemplate,
-  gn as VJoyTextarea,
-  xn as VJoyToggle,
-  en as VJoyWrapper
+  vn as VJoyTemplate,
+  wn as VJoyTextarea,
+  In as VJoyToggle,
+  ln as VJoyWrapper
 };