@maltjoy/core-vue 3.10.0 → 3.11.0

package/dist/joy-vue.js

@@ -1,5 +1,43 @@
-import { defineComponent as j, openBlock as y, createElementBlock as p, normalizeClass as w, createElementVNode as _, computed as O, createBlock as I, resolveDynamicComponent as re, mergeProps as H, withCtx as B, createCommentVNode as g, Fragment as Q, createTextVNode as L, toDisplayString as C, pushScopeId as Re, popScopeId as De, renderSlot as h, useAttrs as He, unref as V, ref as b, createVNode as R, getCurrentScope as st, onScopeDispose as ut, getCurrentInstance as dt, onMounted as Y, nextTick as We, watch as E, h as ct, reactive as ne, onBeforeUnmount as Ue, normalizeStyle as te, renderList as se, normalizeProps as me, guardReactiveProps as pe, Teleport as ft, createSlots as Ge, useSlots as Z, onBeforeMount as yt, inject as vt, provide as mt, withModifiers as pt } from "vue";
-const q = /* @__PURE__ */ j({
+import { defineComponent as k, computed as I, openBlock as y, createElementBlock as p, normalizeClass as w, createElementVNode as b, Fragment as H, createTextVNode as L, toDisplayString as C, createCommentVNode as g, createBlock as O, resolveDynamicComponent as re, mergeProps as W, withCtx as B, pushScopeId as Re, popScopeId as De, renderSlot as h, useAttrs as He, unref as x, ref as _, createVNode as R, getCurrentScope as st, onScopeDispose as ut, getCurrentInstance as dt, onMounted as Y, nextTick as We, watch as E, h as ct, reactive as ne, onBeforeUnmount as Ue, normalizeStyle as te, renderList as se, normalizeProps as me, guardReactiveProps as pe, Teleport as ft, createSlots as Ge, useSlots as Z, onBeforeMount as yt, inject as vt, provide as mt, withModifiers as pt } from "vue";
+const gt = ["title"], ht = /* @__PURE__ */ k({
+  __name: "VJoyAvailability",
+  props: {
+    /** Don't fill it and you'll only have the colored dot */
+    label: String,
+    status: {
+      type: String,
+      default: ""
+    },
+    /**
+     * Partial availabilty. Not 5 days/week cases
+     */
+    isPartial: Boolean
+  },
+  setup(e) {
+    const l = e, t = I(() => ({
+      "joy-availability__dot": !0,
+      "joy-availability--partial": l.isPartial,
+      [l.status]: !0
+    }));
+    return (o, n) => (y(), p("div", {
+      class: w(["joy-availability", { "joy-availability-has-label": !!e.label }]),
+      title: e.label || void 0
+    }, [
+      b("span", {
+        class: w(t.value)
+      }, null, 2),
+      e.label ? (y(), p(H, { key: 0 }, [
+        L(C(e.label), 1)
+      ], 64)) : g("", !0)
+    ], 10, gt));
+  }
+});
+const $ = (e, l) => {
+  const t = e.__vccOpts || e;
+  for (const [o, n] of l)
+    t[o] = n;
+  return t;
+}, bt = /* @__PURE__ */ $(ht, [["__scopeId", "data-v-34b760ee"]]), q = /* @__PURE__ */ k({
   __name: "VJoyIcon",
   props: {
     name: {
@@ -19,24 +57,24 @@ const q = /* @__PURE__ */ j({
     return (l, t) => (y(), p("span", {
       class: w(["joy-icon", `joy-icon--${e.color}`, `joy-icon--${e.size}`])
     }, [
-      _("i", {
+      b("i", {
         class: w(["icon", `icon-${e.name}`])
       }, null, 2)
     ], 2));
   }
 });
-const gt = (e) => (Re("data-v-b3dcdecc"), e = e(), De(), e), ht = {
+const _t = (e) => (Re("data-v-b3dcdecc"), e = e(), De(), e), wt = {
   ref: "avatarEl",
   class: "joy-avatar__wrapper"
-}, bt = ["src", "title", "alt"], _t = {
+}, St = ["src", "title", "alt"], jt = {
   key: 0,
   class: "joy-avatar__strategy"
-}, wt = ["height"], St = /* @__PURE__ */ gt(() => /* @__PURE__ */ _("path", {
+}, kt = ["height"], $t = /* @__PURE__ */ _t(() => /* @__PURE__ */ b("path", {
   d: "M6.40531 15.88C5.29156 15.88 4.31531 15.6737 3.47656 15.2612C2.63781 14.8487 1.98469 14.2644 1.51719 13.5081C1.04969 12.7519 0.809061 11.8719 0.795311 10.8681L4.01281 10.3525C4.01281 11.2188 4.25344 11.9131 4.73469 12.4356C5.21594 12.9581 5.82781 13.2194 6.57031 13.2194C7.16156 13.2194 7.63594 13.0612 7.99344 12.745C8.36469 12.4288 8.55031 12.0231 8.55031 11.5281C8.55031 11.1156 8.40594 10.7719 8.11719 10.4969C7.84219 10.2081 7.38844 9.95375 6.75594 9.73375L4.96156 9.15625C3.65531 8.7575 2.70656 8.21438 2.11531 7.52687C1.53781 6.83937 1.24906 5.93187 1.24906 4.80437C1.24906 3.47062 1.68219 2.39812 2.54844 1.58687C3.41469 0.775624 4.63156 0.369999 6.19906 0.369999C7.65656 0.369999 8.83219 0.768749 9.72594 1.56625C10.6197 2.35 11.0803 3.41562 11.1078 4.76312L7.97281 5.36125C7.98656 4.64625 7.82156 4.07562 7.47781 3.64937C7.13406 3.20937 6.68719 2.98937 6.13719 2.98937C5.65594 2.98937 5.26406 3.14062 4.96156 3.44313C4.65906 3.73187 4.50781 4.10312 4.50781 4.55687C4.50781 4.99687 4.64531 5.36125 4.92031 5.65C5.20906 5.925 5.67656 6.15875 6.32281 6.35125L8.03469 6.92875C9.36844 7.3275 10.3309 7.87063 10.9222 8.55812C11.5272 9.23188 11.8297 10.1325 11.8297 11.26C11.8297 12.1538 11.6166 12.9513 11.1903 13.6525C10.7641 14.3538 10.1453 14.9038 9.33406 15.3025C8.52281 15.6875 7.54656 15.88 6.40531 15.88Z",
   fill: "#F7F7F5"
-}, null, -1)), kt = [
-  St
-], jt = /* @__PURE__ */ j({
+}, null, -1)), Vt = [
+  $t
+], xt = /* @__PURE__ */ k({
   __name: "VJoyAvatar",
   props: {
     /** 3 different sizes of avatar */
@@ -65,15 +103,15 @@ const gt = (e) => (Re("data-v-b3dcdecc"), e = e(), De(), e), ht = {
   },
   emits: ["click"],
   setup(e, { expose: l, emit: t }) {
-    const o = e, n = O(() => o.size === "large" ? "medium" : o.size === "medium" ? "small" : o.size === "small" ? "xsmall" : "small"), r = O(() => o.link ? {
+    const o = e, n = I(() => o.size === "large" ? "medium" : o.size === "medium" ? "small" : o.size === "small" ? "xsmall" : "small"), r = I(() => o.link ? {
       type: "button"
-    } : null), s = O(() => ({
+    } : null), s = I(() => ({
       "joy-avatar": !0,
       "joy-avatar__link": o.link,
       "joy-avatar__placeholder": a.value,
       [`joy-avatar__${o.size}`]: !0,
       [`joy-avatar__${o.color}`]: !0
-    })), a = O(() => !o.fullName && !o.photoUrl && !o.totalNumber), d = O(() => {
+    })), a = I(() => !o.fullName && !o.photoUrl && !o.totalNumber), d = I(() => {
       function u(i) {
         return i.replace(/[';,:()]/g, "").charAt(0);
       }
@@ -88,13 +126,13 @@ const gt = (e) => (Re("data-v-b3dcdecc"), e = e(), De(), e), ht = {
     return l({
       isAnonymous: a,
       initials: d
-    }), (u, v) => (y(), p("div", ht, [
-      (y(), I(re(e.link ? "button" : "div"), H(r.value, {
+    }), (u, v) => (y(), p("div", wt, [
+      (y(), O(re(e.link ? "button" : "div"), W(r.value, {
         class: [s.value],
         onClick: m
       }), {
         default: B(() => [
-          a.value ? (y(), I(q, {
+          a.value ? (y(), O(q, {
             key: 0,
             name: "user-photo",
             color: "white",
@@ -106,34 +144,29 @@ const gt = (e) => (Re("data-v-b3dcdecc"), e = e(), De(), e), ht = {
             title: e.fullName,
             alt: e.fullName || "",
             loading: "lazy"
-          }, null, 8, bt)) : g("", !0),
-          e.fullName ? (y(), p(Q, { key: 2 }, [
+          }, null, 8, St)) : g("", !0),
+          e.fullName ? (y(), p(H, { key: 2 }, [
             L(C(d.value), 1)
           ], 64)) : g("", !0),
-          e.totalNumber ? (y(), p(Q, { key: 3 }, [
+          e.totalNumber ? (y(), p(H, { key: 3 }, [
             L(C("+" + e.totalNumber), 1)
           ], 64)) : g("", !0)
         ]),
         _: 1
       }, 16, ["class"])),
-      e.profile === "strategy" ? (y(), p("span", _t, [
+      e.profile === "strategy" ? (y(), p("span", jt, [
         (y(), p("svg", {
           width: "12",
           height: e.size === "small" ? "10" : "16",
           viewBox: "0 0 12 16",
           fill: "none",
           xmlns: "http://www.w3.org/2000/svg"
-        }, kt, 8, wt))
+        }, Vt, 8, kt))
       ])) : g("", !0)
     ], 512));
   }
 });
-const x = (e, l) => {
-  const t = e.__vccOpts || e;
-  for (const [o, n] of l)
-    t[o] = n;
-  return t;
-}, $t = /* @__PURE__ */ x(jt, [["__scopeId", "data-v-b3dcdecc"]]), Vt = /* @__PURE__ */ j({
+const It = /* @__PURE__ */ $(xt, [["__scopeId", "data-v-b3dcdecc"]]), Ot = /* @__PURE__ */ k({
   __name: "VJoyAvatarsList",
   props: {
     /** Renders a compact list of avatars */
@@ -148,7 +181,7 @@ const x = (e, l) => {
     ], 2));
   }
 });
-const xt = /* @__PURE__ */ x(Vt, [["__scopeId", "data-v-46e4547e"]]), It = ["info", "gray", "green", "orange", "red", "teal", "pink", "dark-blue", "yellow"], Ot = /* @__PURE__ */ j({
+const Ct = /* @__PURE__ */ $(Ot, [["__scopeId", "data-v-46e4547e"]]), Bt = ["info", "gray", "green", "orange", "red", "teal", "pink", "dark-blue", "yellow"], Lt = /* @__PURE__ */ k({
   __name: "VJoyBadge",
   props: {
     /**
@@ -171,7 +204,7 @@ const xt = /* @__PURE__ */ x(Vt, [["__scopeId", "data-v-46e4547e"]]), It = ["inf
     variant: {
       type: String,
       validator(e) {
-        return It.includes(e);
+        return Bt.includes(e);
       }
     }
   },
@@ -186,13 +219,13 @@ const xt = /* @__PURE__ */ x(Vt, [["__scopeId", "data-v-46e4547e"]]), It = ["inf
     ], 2));
   }
 });
-const Ct = /* @__PURE__ */ x(Ot, [["__scopeId", "data-v-1ed08e27"]]), Bt = ["teal", "white"], Lt = /* @__PURE__ */ j({
+const Et = /* @__PURE__ */ $(Lt, [["__scopeId", "data-v-1ed08e27"]]), Jt = ["teal", "white"], zt = /* @__PURE__ */ k({
   __name: "VJoySpinner",
   props: {
     color: {
       type: String,
       validator(e) {
-        return Bt.includes(e);
+        return Jt.includes(e);
       }
     }
   },
@@ -202,7 +235,7 @@ const Ct = /* @__PURE__ */ x(Ot, [["__scopeId", "data-v-1ed08e27"]]), Bt = ["tea
     }, null, 2));
   }
 });
-const ge = /* @__PURE__ */ x(Lt, [["__scopeId", "data-v-616a29d0"]]), Et = ["primary", "secondary"], Jt = ["neutral", "success", "info", "warning", "error"], Tt = ["main", "admin", "ghost", "white"], zt = [...Et, ...Tt], Pt = ["large", "medium", "small", "xsmall", "xxsmall"], qt = { class: "joy-button--slot" }, At = /* @__PURE__ */ j({
+const ge = /* @__PURE__ */ $(zt, [["__scopeId", "data-v-616a29d0"]]), Tt = ["primary", "secondary"], Pt = ["neutral", "success", "info", "warning", "error"], qt = ["main", "admin", "ghost", "white"], At = [...Tt, ...qt], Ft = ["large", "medium", "small", "xsmall", "xxsmall"], Mt = { class: "joy-button--slot" }, Nt = /* @__PURE__ */ k({
   __name: "VJoyButton",
   props: {
     /**
@@ -238,7 +271,7 @@ const ge = /* @__PURE__ */ x(Lt, [["__scopeId", "data-v-616a29d0"]]), Et = ["pri
       type: String,
       default: "primary",
       validator(e) {
-        return zt.includes(e);
+        return At.includes(e);
       }
     },
     /** Button or Link size */
@@ -246,12 +279,12 @@ const ge = /* @__PURE__ */ x(Lt, [["__scopeId", "data-v-616a29d0"]]), Et = ["pri
       type: String,
       default: "medium",
       validator(e) {
-        return Pt.includes(e);
+        return Ft.includes(e);
       }
     }
   },
   setup(e) {
-    const l = e, t = He(), o = O(() => {
+    const l = e, t = He(), o = I(() => {
       switch (l.size) {
         case "xxsmall":
           return "xxsmall";
@@ -262,10 +295,10 @@ const ge = /* @__PURE__ */ x(Lt, [["__scopeId", "data-v-616a29d0"]]), Et = ["pri
         default:
           return "small";
       }
-    }), n = O(() => ["white", "ghost", "secondary"].includes(l.variant) ? "teal" : "white");
-    return (r, s) => (y(), I(re(V(t).href ? "a" : "button"), {
-      disabled: e.loading || V(t).disabled,
-      type: V(t).type || "button",
+    }), n = I(() => ["white", "ghost", "secondary"].includes(l.variant) ? "teal" : "white");
+    return (r, s) => (y(), O(re(x(t).href ? "a" : "button"), {
+      disabled: e.loading || x(t).disabled,
+      type: x(t).type || "button",
       class: w([
         "joy-button",
         `joy-button_${e.variant}`,
@@ -277,22 +310,22 @@ const ge = /* @__PURE__ */ x(Lt, [["__scopeId", "data-v-616a29d0"]]), Et = ["pri
       ])
     }, {
       default: B(() => [
-        e.icon && e.iconPosition === "left" ? (y(), I(q, {
+        e.icon && e.iconPosition === "left" ? (y(), O(q, {
           key: 0,
           class: "joy-button_icon joy-button_icon--left",
           name: e.icon,
           size: o.value
         }, null, 8, ["name", "size"])) : g("", !0),
-        e.loading ? (y(), I(ge, {
+        e.loading ? (y(), O(ge, {
           key: 1,
           color: n.value
         }, null, 8, ["color"])) : g("", !0),
-        _("span", qt, [
+        b("span", Mt, [
           h(r.$slots, "default", {}, () => [
             L(C(e.label), 1)
           ], !0)
         ]),
-        e.icon && e.iconPosition === "right" ? (y(), I(q, {
+        e.icon && e.iconPosition === "right" ? (y(), O(q, {
           key: 2,
           class: "joy-button_icon joy-button_icon--right",
           name: e.icon,
@@ -303,7 +336,7 @@ const ge = /* @__PURE__ */ x(Lt, [["__scopeId", "data-v-616a29d0"]]), Et = ["pri
     }, 8, ["disabled", "type", "class"]));
   }
 });
-const Ke = /* @__PURE__ */ x(At, [["__scopeId", "data-v-ae0676bb"]]), Ft = ["aria-checked", "aria-hidden"], Nt = { class: "joy-checkbox__input-wrapper" }, Mt = ["id", "name", "disabled", "checked", "required", "aria-checked", "value", "indeterminate"], Rt = { class: "joy-checkbox__content-wrapper" }, Dt = { class: "joy-checkbox__content" }, Ht = /* @__PURE__ */ j({
+const Ke = /* @__PURE__ */ $(Nt, [["__scopeId", "data-v-ae0676bb"]]), Rt = ["aria-checked", "aria-hidden"], Dt = { class: "joy-checkbox__input-wrapper" }, Ht = ["id", "name", "disabled", "checked", "required", "aria-checked", "value", "indeterminate"], Wt = { class: "joy-checkbox__content-wrapper" }, Ut = { class: "joy-checkbox__content" }, Gt = /* @__PURE__ */ k({
   __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 */
@@ -358,7 +391,7 @@ const Ke = /* @__PURE__ */ x(At, [["__scopeId", "data-v-ae0676bb"]]), Ft = ["ari
   },
   emits: ["update:checked", "focus", "blur"],
   setup(e, { expose: l, emit: t }) {
-    const o = e, n = b(), r = b(o.indeterminate), s = b(o.invalid), a = b(!1), d = {
+    const o = e, n = _(), r = _(o.indeterminate), s = _(o.invalid), a = _(!1), d = {
       onChange: (m) => {
         const u = m.target.checked;
         r.value = !1, s.value = !1, t("update:checked", u);
@@ -377,7 +410,7 @@ const Ke = /* @__PURE__ */ x(At, [["__scopeId", "data-v-ae0676bb"]]), Ft = ["ari
       "aria-checked": e.checked,
       "aria-hidden": e.disabled
     }, [
-      _("label", {
+      b("label", {
         class: w([
           "joy-checkbox",
           {
@@ -389,8 +422,8 @@ const Ke = /* @__PURE__ */ x(At, [["__scopeId", "data-v-ae0676bb"]]), Ft = ["ari
           }
         ])
       }, [
-        _("div", Nt, [
-          _("input", {
+        b("div", Dt, [
+          b("input", {
             id: e.id,
             ref_key: "input",
             ref: n,
@@ -410,27 +443,27 @@ const Ke = /* @__PURE__ */ x(At, [["__scopeId", "data-v-ae0676bb"]]), Ft = ["ari
             (...v) => d.onFocus && d.onFocus(...v)),
             onBlur: u[2] || (u[2] = //@ts-ignore
             (...v) => d.onBlur && d.onBlur(...v))
-          }, null, 40, Mt)
+          }, null, 40, Ht)
         ]),
-        _("div", Rt, [
+        b("div", Wt, [
           h(m.$slots, "default", {}, () => [
             L(C(e.label), 1)
           ], !0),
-          _("div", Dt, [
+          b("div", Ut, [
             h(m.$slots, "checkbox-content", {}, void 0, !0)
           ])
         ])
       ], 2)
-    ], 8, Ft));
+    ], 8, Rt));
   }
 });
-const he = /* @__PURE__ */ x(Ht, [["__scopeId", "data-v-27cc9d8c"]]), Wt = { class: "joy-counter" }, Ut = ["aria-label", "disabled"], Gt = { class: "joy-counter__input-wrapper" }, Kt = ["id", "min", "max", "aria-invalid", "name", "required", "value"], Qt = ["aria-label", "disabled"], Yt = {
+const he = /* @__PURE__ */ $(Gt, [["__scopeId", "data-v-27cc9d8c"]]), Kt = { class: "joy-counter" }, Qt = ["aria-label", "disabled"], Yt = { class: "joy-counter__input-wrapper" }, Zt = ["id", "min", "max", "aria-invalid", "name", "required", "value"], Xt = ["aria-label", "disabled"], el = {
   key: 0,
   class: "joy-counter_error"
-}, Zt = {
+}, tl = {
   inheritAttrs: !1
-}, Xt = /* @__PURE__ */ j({
-  ...Zt,
+}, ll = /* @__PURE__ */ k({
+  ...tl,
   __name: "VJoyCounter",
   props: {
     /** Removes any interactivity */
@@ -497,7 +530,7 @@ const he = /* @__PURE__ */ x(Ht, [["__scopeId", "data-v-27cc9d8c"]]), Wt = { cla
   },
   emits: ["update:modelValue"],
   setup(e, { expose: l, emit: t }) {
-    const o = e, n = b(!1), r = b(!1);
+    const o = e, n = _(!1), r = _(!1);
     function s() {
       const f = m(!1);
       f >= 0 ? t("update:modelValue", f <= o.min ? o.min : f) : t("update:modelValue", 0), d();
@@ -510,8 +543,8 @@ const he = /* @__PURE__ */ x(Ht, [["__scopeId", "data-v-27cc9d8c"]]), Wt = { cla
       n.value = !u();
     }
     function m(f = !0) {
-      const S = o.step.toString().split("."), k = S.length === 2 ? S[1].length : 0;
-      return parseFloat(f ? (o.modelValue + o.step).toFixed(k) : (o.modelValue - o.step).toFixed(k));
+      const S = o.step.toString().split("."), j = S.length === 2 ? S[1].length : 0;
+      return parseFloat(f ? (o.modelValue + o.step).toFixed(j) : (o.modelValue - o.step).toFixed(j));
     }
     function u() {
       return v() && i();
@@ -535,8 +568,8 @@ const he = /* @__PURE__ */ x(Ht, [["__scopeId", "data-v-27cc9d8c"]]), Wt = { cla
     };
     return l({
       props: o
-    }), (f, S) => (y(), p("div", Wt, [
-      e.label ? (y(), I(V(U), {
+    }), (f, S) => (y(), p("div", Kt, [
+      e.label ? (y(), O(x(G), {
         key: 0,
         for: e.id,
         required: e.required && e.requiredMark,
@@ -550,20 +583,20 @@ const he = /* @__PURE__ */ x(Ht, [["__scopeId", "data-v-27cc9d8c"]]), Wt = { cla
         ]),
         _: 3
       }, 8, ["for", "required", "optional-label", "size"])) : g("", !0),
-      _("div", {
+      b("div", {
         class: w(["joy-counter__wrapper", { "joy-counter--focusing": r.value }])
       }, [
-        _("button", {
+        b("button", {
           class: "joy-counter__decrement",
           type: "button",
           "aria-label": e.labelDecrement,
           disabled: e.modelValue <= e.min,
           onClick: s
         }, [
-          R(V(q), { name: "minus" })
-        ], 8, Ut),
-        _("div", Gt, [
-          _("input", H({
+          R(x(q), { name: "minus" })
+        ], 8, Qt),
+        b("div", Yt, [
+          b("input", W({
             id: e.id,
             ref: "input",
             type: "number",
@@ -577,35 +610,35 @@ const he = /* @__PURE__ */ x(Ht, [["__scopeId", "data-v-27cc9d8c"]]), Wt = { cla
             value: e.modelValue
           }, f.$attrs, {
             onInput: S[0] || (S[0] = //@ts-ignore
-            (...k) => c.onInput && c.onInput(...k)),
+            (...j) => c.onInput && c.onInput(...j)),
             onBlur: S[1] || (S[1] = //@ts-ignore
-            (...k) => c.onBlur && c.onBlur(...k)),
+            (...j) => c.onBlur && c.onBlur(...j)),
             onFocus: S[2] || (S[2] = //@ts-ignore
-            (...k) => c.onFocus && c.onFocus(...k))
-          }), null, 16, Kt)
+            (...j) => c.onFocus && c.onFocus(...j))
+          }), null, 16, Zt)
         ]),
-        _("button", {
+        b("button", {
           class: "joy-counter__increment",
           type: "button",
           "aria-label": e.labelIncrement,
           disabled: e.max ? e.modelValue >= e.max : !1,
           onClick: a
         }, [
-          R(V(q), { name: "add" })
-        ], 8, Qt),
-        e.invalid && e.errorMessage ? (y(), p("div", Yt, [
-          R(V(ot), { "no-html-error-text": e.errorMessage }, null, 8, ["no-html-error-text"])
+          R(x(q), { name: "add" })
+        ], 8, Xt),
+        e.invalid && e.errorMessage ? (y(), p("div", el, [
+          R(x(ot), { "no-html-error-text": e.errorMessage }, null, 8, ["no-html-error-text"])
         ])) : g("", !0)
       ], 2)
     ]));
   }
 });
-const el = /* @__PURE__ */ x(Xt, [["__scopeId", "data-v-a59ac0ad"]]);
+const ol = /* @__PURE__ */ $(ll, [["__scopeId", "data-v-a59ac0ad"]]);
 var we;
 const X = typeof window < "u", Qe = (e) => typeof e == "string", A = () => {
 }, ie = X && ((we = window == null ? void 0 : window.navigator) == null ? void 0 : we.userAgent) && /iP(ad|hone|od)/.test(window.navigator.userAgent);
-function z(e) {
-  return typeof e == "function" ? e() : V(e);
+function T(e) {
+  return typeof e == "function" ? e() : x(e);
 }
 function Ye(e, l) {
   function t(...o) {
@@ -615,13 +648,13 @@ function Ye(e, l) {
   }
   return t;
 }
-function tl(e, l = {}) {
+function al(e, l = {}) {
   let t, o, n = A;
   const r = (a) => {
     clearTimeout(a), n(), n = A;
   };
   return (a) => {
-    const d = z(e), m = z(l.maxWait);
+    const d = T(e), m = T(l.maxWait);
     return t && r(t), d <= 0 || m !== void 0 && m <= 0 ? (o && (r(o), o = null), Promise.resolve(a())) : new Promise((u, v) => {
       n = l.rejectOnCancel ? v : u, m && !o && (o = setTimeout(() => {
         t && r(t), o = null, u(a());
@@ -631,46 +664,46 @@ function tl(e, l = {}) {
     });
   };
 }
-function ll(e, l = !0, t = !0, o = !1) {
+function nl(e, l = !0, t = !0, o = !1) {
   let n = 0, r, s = !0, a = A, d;
   const m = () => {
     r && (clearTimeout(r), r = void 0, a(), a = A);
   };
   return (v) => {
-    const i = z(e), c = Date.now() - n, f = () => d = v();
-    return m(), i <= 0 ? (n = Date.now(), f()) : (c > i && (t || !s) ? (n = Date.now(), f()) : l && (d = new Promise((S, k) => {
-      a = o ? k : S, r = setTimeout(() => {
+    const i = T(e), c = Date.now() - n, f = () => d = v();
+    return m(), i <= 0 ? (n = Date.now(), f()) : (c > i && (t || !s) ? (n = Date.now(), f()) : l && (d = new Promise((S, j) => {
+      a = o ? j : S, r = setTimeout(() => {
         n = Date.now(), s = !0, S(f()), m();
       }, Math.max(0, i - c));
     })), !t && !r && (r = setTimeout(() => s = !0, i)), s = !1, d);
   };
 }
-const M = {
+const N = {
   mounted: "mounted",
   updated: "updated",
   unmounted: "unmounted"
 };
-function ol(e) {
+function il(e) {
   return e;
 }
 function ee(e) {
   return st() ? (ut(e), !0) : !1;
 }
-function al(e, l = 200, t = {}) {
-  return Ye(tl(l, t), e);
+function rl(e, l = 200, t = {}) {
+  return Ye(al(l, t), e);
 }
-function nl(e, l = 200, t = !1, o = !0, n = !1) {
-  return Ye(ll(l, t, o, n), e);
+function sl(e, l = 200, t = !1, o = !0, n = !1) {
+  return Ye(nl(l, t, o, n), e);
 }
-function il(e) {
-  return typeof e == "function" ? O(e) : b(e);
+function ul(e) {
+  return typeof e == "function" ? I(e) : _(e);
 }
 function Ze(e, l = !0) {
   dt() ? Y(e) : l ? e() : We(e);
 }
-function K(e) {
+function Q(e) {
   var l;
-  const t = z(e);
+  const t = T(e);
   return (l = t == null ? void 0 : t.$el) != null ? l : t;
 }
 const be = X ? window : void 0;
@@ -684,7 +717,7 @@ function ue(...e) {
   Array.isArray(t) || (t = [t]), Array.isArray(o) || (o = [o]);
   const r = [], s = () => {
     r.forEach((u) => u()), r.length = 0;
-  }, a = (u, v, i, c) => (u.addEventListener(v, i, c), () => u.removeEventListener(v, i, c)), d = E(() => [K(l), z(n)], ([u, v]) => {
+  }, a = (u, v, i, c) => (u.addEventListener(v, i, c), () => u.removeEventListener(v, i, c)), d = E(() => [Q(l), T(n)], ([u, v]) => {
     s(), u && r.push(...t.flatMap((i) => o.map((c) => a(u, i, c, v))));
   }, { immediate: !0, flush: "post" }), m = () => {
     d(), s();
@@ -692,7 +725,7 @@ function ue(...e) {
   return ee(m), m;
 }
 let Se = !1;
-function rl(e, l, t = {}) {
+function dl(e, l, t = {}) {
   const { window: o = be, ignore: n = [], capture: r = !0, detectIframe: s = !1 } = t;
   if (!o)
     return;
@@ -702,12 +735,12 @@ function rl(e, l, t = {}) {
     if (typeof c == "string")
       return Array.from(o.document.querySelectorAll(c)).some((f) => f === i.target || i.composedPath().includes(f));
     {
-      const f = K(c);
+      const f = Q(c);
       return f && (i.target === f || i.composedPath().includes(f));
     }
   }), u = [
     ue(o, "click", (i) => {
-      const c = K(e);
+      const c = Q(e);
       if (!(!c || c === i.target || i.composedPath().includes(c))) {
         if (i.detail === 0 && (a = !d(i)), !a) {
           a = !0;
@@ -717,39 +750,39 @@ function rl(e, l, t = {}) {
       }
     }, { passive: !0, capture: r }),
     ue(o, "pointerdown", (i) => {
-      const c = K(e);
+      const c = Q(e);
       c && (a = !i.composedPath().includes(c) && !d(i));
     }, { passive: !0 }),
     s && ue(o, "blur", (i) => {
       var c;
-      const f = K(e);
+      const f = Q(e);
       ((c = o.document.activeElement) == null ? void 0 : c.tagName) === "IFRAME" && !(f != null && f.contains(o.document.activeElement)) && l(i);
     })
   ].filter(Boolean);
   return () => u.forEach((i) => i());
 }
-function sl(e, l = !1) {
-  const t = b(), o = () => t.value = Boolean(e());
+function cl(e, l = !1) {
+  const t = _(), o = () => t.value = Boolean(e());
   return o(), Ze(o, l), t;
 }
 const de = typeof globalThis < "u" ? globalThis : typeof window < "u" ? window : typeof global < "u" ? global : typeof self < "u" ? self : {}, ce = "__vueuse_ssr_handlers__";
 de[ce] = de[ce] || {};
 de[ce];
-var ke = Object.getOwnPropertySymbols, ul = Object.prototype.hasOwnProperty, dl = Object.prototype.propertyIsEnumerable, cl = (e, l) => {
+var je = Object.getOwnPropertySymbols, fl = Object.prototype.hasOwnProperty, yl = Object.prototype.propertyIsEnumerable, vl = (e, l) => {
   var t = {};
   for (var o in e)
-    ul.call(e, o) && l.indexOf(o) < 0 && (t[o] = e[o]);
-  if (e != null && ke)
-    for (var o of ke(e))
-      l.indexOf(o) < 0 && dl.call(e, o) && (t[o] = e[o]);
+    fl.call(e, o) && l.indexOf(o) < 0 && (t[o] = e[o]);
+  if (e != null && je)
+    for (var o of je(e))
+      l.indexOf(o) < 0 && yl.call(e, o) && (t[o] = e[o]);
   return t;
 };
-function fl(e, l, t = {}) {
-  const o = t, { window: n = be } = o, r = cl(o, ["window"]);
+function ml(e, l, t = {}) {
+  const o = t, { window: n = be } = o, r = vl(o, ["window"]);
   let s;
-  const a = sl(() => n && "ResizeObserver" in n), d = () => {
+  const a = cl(() => n && "ResizeObserver" in n), d = () => {
     s && (s.disconnect(), s = void 0);
-  }, m = E(() => K(e), (v) => {
+  }, m = E(() => Q(e), (v) => {
     d(), a.value && n && v && (s = new ResizeObserver(l), s.observe(v, r));
   }, { immediate: !0, flush: "post" }), u = () => {
     d(), m();
@@ -759,31 +792,31 @@ function fl(e, l, t = {}) {
     stop: u
   };
 }
-var je;
+var ke;
 (function(e) {
   e.UP = "UP", e.RIGHT = "RIGHT", e.DOWN = "DOWN", e.LEFT = "LEFT", e.NONE = "NONE";
-})(je || (je = {}));
-function yl(e) {
-  const l = b(e == null ? void 0 : e.element), t = b(e == null ? void 0 : e.input);
+})(ke || (ke = {}));
+function pl(e) {
+  const l = _(e == null ? void 0 : e.element), t = _(e == null ? void 0 : e.input);
   function o() {
     var n, r;
     l.value && (l.value.style.height = "1px", l.value.style.height = `${(n = l.value) == null ? void 0 : n.scrollHeight}px`, (r = e == null ? void 0 : e.onResize) == null || r.call(e));
   }
-  return E([t, l], o, { immediate: !0 }), fl(l, () => o()), e != null && e.watch && E(e.watch, o, { immediate: !0, deep: !0 }), {
+  return E([t, l], o, { immediate: !0 }), ml(l, () => o()), e != null && e.watch && E(e.watch, o, { immediate: !0, deep: !0 }), {
     textarea: l,
     input: t,
     triggerResize: o
   };
 }
-var vl = Object.defineProperty, $e = Object.getOwnPropertySymbols, ml = Object.prototype.hasOwnProperty, pl = Object.prototype.propertyIsEnumerable, Ve = (e, l, t) => l in e ? vl(e, l, { enumerable: !0, configurable: !0, writable: !0, value: t }) : e[l] = t, gl = (e, l) => {
+var gl = Object.defineProperty, $e = Object.getOwnPropertySymbols, hl = Object.prototype.hasOwnProperty, bl = Object.prototype.propertyIsEnumerable, Ve = (e, l, t) => l in e ? gl(e, l, { enumerable: !0, configurable: !0, writable: !0, value: t }) : e[l] = t, _l = (e, l) => {
   for (var t in l || (l = {}))
-    ml.call(l, t) && Ve(e, t, l[t]);
+    hl.call(l, t) && Ve(e, t, l[t]);
   if ($e)
     for (var t of $e(l))
-      pl.call(l, t) && Ve(e, t, l[t]);
+      bl.call(l, t) && Ve(e, t, l[t]);
   return e;
 };
-const hl = {
+const wl = {
   easeInSine: [0.12, 0, 0.39, 0],
   easeOutSine: [0.61, 1, 0.88, 1],
   easeInOutSine: [0.37, 0, 0.63, 1],
@@ -809,16 +842,16 @@ const hl = {
   easeOutBack: [0.34, 1.56, 0.64, 1],
   easeInOutBack: [0.68, -0.6, 0.32, 1.6]
 };
-gl({
-  linear: ol
-}, hl);
-const bl = /* @__PURE__ */ j({
+_l({
+  linear: il
+}, wl);
+const Sl = /* @__PURE__ */ k({
   name: "OnClickOutside",
   props: ["as", "options"],
   emits: ["trigger"],
   setup(e, { slots: l, emit: t }) {
-    const o = b();
-    return rl(o, (n) => {
+    const o = _();
+    return dl(o, (n) => {
       t("trigger", n);
     }, e.options), () => {
       if (l.default)
@@ -828,18 +861,18 @@ const bl = /* @__PURE__ */ j({
 });
 function P(e) {
   var l;
-  const t = z(e);
+  const t = T(e);
   return (l = t == null ? void 0 : t.$el) != null ? l : t;
 }
-const W = X ? window : void 0;
+const U = X ? window : void 0;
 function F(...e) {
   let l, t, o, n;
-  if (Qe(e[0]) || Array.isArray(e[0]) ? ([t, o, n] = e, l = W) : [l, t, o, n] = e, !l)
+  if (Qe(e[0]) || Array.isArray(e[0]) ? ([t, o, n] = e, l = U) : [l, t, o, n] = e, !l)
     return A;
   Array.isArray(t) || (t = [t]), Array.isArray(o) || (o = [o]);
   const r = [], s = () => {
     r.forEach((u) => u()), r.length = 0;
-  }, a = (u, v, i, c) => (u.addEventListener(v, i, c), () => u.removeEventListener(v, i, c)), d = E(() => [P(l), z(n)], ([u, v]) => {
+  }, a = (u, v, i, c) => (u.addEventListener(v, i, c), () => u.removeEventListener(v, i, c)), d = E(() => [P(l), T(n)], ([u, v]) => {
     s(), u && r.push(...t.flatMap((i) => o.map((c) => a(u, i, c, v))));
   }, { immediate: !0, flush: "post" }), m = () => {
     d(), s();
@@ -848,7 +881,7 @@ function F(...e) {
 }
 let xe = !1;
 function Ie(e, l, t = {}) {
-  const { window: o = W, ignore: n = [], capture: r = !0, detectIframe: s = !1 } = t;
+  const { window: o = U, ignore: n = [], capture: r = !0, detectIframe: s = !1 } = t;
   if (!o)
     return;
   ie && !xe && (xe = !0, Array.from(o.document.body.children).forEach((i) => i.addEventListener("click", A)));
@@ -883,36 +916,36 @@ function Ie(e, l, t = {}) {
   ].filter(Boolean);
   return () => u.forEach((i) => i());
 }
-M.mounted + "", M.unmounted + "";
-const _l = (e) => typeof e == "function" ? e : typeof e == "string" ? (l) => l.key === e : Array.isArray(e) ? (l) => e.includes(l.key) : () => !0;
+N.mounted + "", N.unmounted + "";
+const jl = (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 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: n = W, eventName: r = "keydown", passive: s = !1 } = o, a = _l(l);
+  const { target: n = U, eventName: r = "keydown", passive: s = !1 } = o, a = jl(l);
   return F(n, r, (m) => {
     a(m) && t(m);
   }, s);
 }
-var wl = Object.defineProperty, Ce = Object.getOwnPropertySymbols, Sl = Object.prototype.hasOwnProperty, kl = Object.prototype.propertyIsEnumerable, Be = (e, l, t) => l in e ? wl(e, l, { enumerable: !0, configurable: !0, writable: !0, value: t }) : e[l] = t, jl = (e, l) => {
+var kl = Object.defineProperty, Ce = Object.getOwnPropertySymbols, $l = Object.prototype.hasOwnProperty, Vl = Object.prototype.propertyIsEnumerable, Be = (e, l, t) => l in e ? kl(e, l, { enumerable: !0, configurable: !0, writable: !0, value: t }) : e[l] = t, xl = (e, l) => {
   for (var t in l || (l = {}))
-    Sl.call(l, t) && Be(e, t, l[t]);
+    $l.call(l, t) && Be(e, t, l[t]);
   if (Ce)
     for (var t of Ce(l))
-      kl.call(l, t) && Be(e, t, l[t]);
+      Vl.call(l, t) && Be(e, t, l[t]);
   return e;
 };
-M.mounted + "";
-const $l = 500;
+N.mounted + "";
+const Il = 500;
 function Le(e, l, t) {
   var o, n;
-  const r = O(() => P(e));
+  const r = I(() => P(e));
   let s;
   function a() {
     s && (clearTimeout(s), s = void 0);
   }
   function d(u) {
     var v, i, c, f;
-    (v = t == null ? void 0 : t.modifiers) != null && v.self && u.target !== r.value || (a(), (i = t == null ? void 0 : t.modifiers) != null && i.prevent && u.preventDefault(), (c = t == null ? void 0 : t.modifiers) != null && c.stop && u.stopPropagation(), s = setTimeout(() => l(u), (f = t == null ? void 0 : t.delay) != null ? f : $l));
+    (v = t == null ? void 0 : t.modifiers) != null && v.self && u.target !== r.value || (a(), (i = t == null ? void 0 : t.modifiers) != null && i.prevent && u.preventDefault(), (c = t == null ? void 0 : t.modifiers) != null && c.stop && u.stopPropagation(), s = setTimeout(() => l(u), (f = t == null ? void 0 : t.delay) != null ? f : Il));
   }
   const m = {
     capture: (o = t == null ? void 0 : t.modifiers) == null ? void 0 : o.capture,
@@ -920,16 +953,16 @@ function Le(e, l, t) {
   };
   F(r, "pointerdown", d, m), F(r, "pointerup", a, m), F(r, "pointerleave", a, m);
 }
-M.mounted + "";
+N.mounted + "";
 const fe = typeof globalThis < "u" ? globalThis : typeof window < "u" ? window : typeof global < "u" ? global : typeof self < "u" ? self : {}, ye = "__vueuse_ssr_handlers__";
 fe[ye] = fe[ye] || {};
 fe[ye];
 function Xe(e, l = !1) {
-  const t = b(), o = () => t.value = Boolean(e());
+  const t = _(), o = () => t.value = Boolean(e());
   return o(), Ze(o, l), t;
 }
-function Vl(e, l = {}) {
-  const t = l ? l.delayEnter : 0, o = l ? l.delayLeave : 0, n = b(!1);
+function Ol(e, l = {}) {
+  const t = l ? l.delayEnter : 0, o = l ? l.delayLeave : 0, n = _(!1);
   let r;
   const s = (a) => {
     const d = a ? t : o;
@@ -937,18 +970,18 @@ function Vl(e, l = {}) {
   };
   return window && (F(e, "mouseenter", () => s(!0), { passive: !0 }), F(e, "mouseleave", () => s(!1), { passive: !0 })), n;
 }
-M.mounted + "";
-var Ee = Object.getOwnPropertySymbols, xl = Object.prototype.hasOwnProperty, Il = Object.prototype.propertyIsEnumerable, Ol = (e, l) => {
+N.mounted + "";
+var Ee = Object.getOwnPropertySymbols, Cl = Object.prototype.hasOwnProperty, Bl = Object.prototype.propertyIsEnumerable, Ll = (e, l) => {
   var t = {};
   for (var o in e)
-    xl.call(e, o) && l.indexOf(o) < 0 && (t[o] = e[o]);
+    Cl.call(e, o) && l.indexOf(o) < 0 && (t[o] = e[o]);
   if (e != null && Ee)
     for (var o of Ee(e))
-      l.indexOf(o) < 0 && Il.call(e, o) && (t[o] = e[o]);
+      l.indexOf(o) < 0 && Bl.call(e, o) && (t[o] = e[o]);
   return t;
 };
-function Cl(e, l, t = {}) {
-  const o = t, { window: n = W } = o, r = Ol(o, ["window"]);
+function El(e, l, t = {}) {
+  const o = t, { window: n = U } = o, r = Ll(o, ["window"]);
   let s;
   const a = Xe(() => n && "ResizeObserver" in n), d = () => {
     s && (s.disconnect(), s = void 0);
@@ -962,12 +995,12 @@ function Cl(e, l, t = {}) {
     stop: u
   };
 }
-function Bl(e, l = { width: 0, height: 0 }, t = {}) {
-  const { window: o = W, box: n = "content-box" } = t, r = O(() => {
+function Jl(e, l = { width: 0, height: 0 }, t = {}) {
+  const { window: o = U, box: n = "content-box" } = t, r = I(() => {
     var d, m;
     return (m = (d = P(e)) == null ? void 0 : d.namespaceURI) == null ? void 0 : m.includes("svg");
-  }), s = b(l.width), a = b(l.height);
-  return Cl(e, ([d]) => {
+  }), s = _(l.width), a = _(l.height);
+  return El(e, ([d]) => {
     const m = n === "border-box" ? d.borderBoxSize : n === "content-box" ? d.contentBoxSize : d.devicePixelContentBoxSize;
     if (o && r.value) {
       const u = P(e);
@@ -987,9 +1020,9 @@ function Bl(e, l = { width: 0, height: 0 }, t = {}) {
     height: a
   };
 }
-M.mounted + "";
-function Je(e, { window: l = W, scrollTarget: t } = {}) {
-  const o = b(!1), n = () => {
+N.mounted + "";
+function Je(e, { window: l = U, scrollTarget: t } = {}) {
+  const o = _(!1), n = () => {
     if (!l)
       return;
     const r = l.document, s = P(e);
@@ -1005,8 +1038,8 @@ function Je(e, { window: l = W, scrollTarget: t } = {}) {
     passive: !0
   }), o;
 }
-M.mounted + "";
-const Te = 1;
+N.mounted + "";
+const ze = 1;
 function ve(e, l = {}) {
   const {
     throttle: t = 0,
@@ -1024,14 +1057,14 @@ function ve(e, l = {}) {
       passive: !0
     },
     behavior: d = "auto"
-  } = l, m = b(0), u = b(0), v = O({
+  } = l, m = _(0), u = _(0), v = I({
     get() {
       return m.value;
     },
     set(J) {
       c(J, void 0);
     }
-  }), i = O({
+  }), i = I({
     get() {
       return u.value;
     },
@@ -1039,52 +1072,52 @@ function ve(e, l = {}) {
       c(void 0, J);
     }
   });
-  function c(J, N) {
-    var $, T, D;
-    const G = z(e);
-    G && ((D = G instanceof Document ? document.body : G) == null || D.scrollTo({
-      top: ($ = z(N)) != null ? $ : i.value,
-      left: (T = z(J)) != null ? T : v.value,
-      behavior: z(d)
+  function c(J, M) {
+    var V, z, D;
+    const K = T(e);
+    K && ((D = K instanceof Document ? document.body : K) == null || D.scrollTo({
+      top: (V = T(M)) != null ? V : i.value,
+      left: (z = T(J)) != null ? z : v.value,
+      behavior: T(d)
     }));
   }
-  const f = b(!1), S = ne({
+  const f = _(!1), S = ne({
     left: !0,
     right: !1,
     top: !0,
     bottom: !1
-  }), k = ne({
+  }), j = ne({
     left: !1,
     right: !1,
     top: !1,
     bottom: !1
   }), le = (J) => {
-    f.value && (f.value = !1, k.left = !1, k.right = !1, k.top = !1, k.bottom = !1, n(J));
-  }, oe = al(le, t + o), ae = (J) => {
-    const N = J.target === document ? J.target.documentElement : J.target, $ = N.scrollLeft;
-    k.left = $ < m.value, k.right = $ > u.value, S.left = $ <= 0 + (s.left || 0), S.right = $ + N.clientWidth >= N.scrollWidth - (s.right || 0) - Te, m.value = $;
-    let T = N.scrollTop;
-    J.target === document && !T && (T = document.body.scrollTop), k.top = T < u.value, k.bottom = T > u.value, S.top = T <= 0 + (s.top || 0), S.bottom = T + N.clientHeight >= N.scrollHeight - (s.bottom || 0) - Te, u.value = T, f.value = !0, oe(J), r(J);
+    f.value && (f.value = !1, j.left = !1, j.right = !1, j.top = !1, j.bottom = !1, n(J));
+  }, oe = rl(le, t + o), ae = (J) => {
+    const M = J.target === document ? J.target.documentElement : J.target, V = M.scrollLeft;
+    j.left = V < m.value, j.right = V > u.value, S.left = V <= 0 + (s.left || 0), S.right = V + M.clientWidth >= M.scrollWidth - (s.right || 0) - ze, m.value = V;
+    let z = M.scrollTop;
+    J.target === document && !z && (z = document.body.scrollTop), j.top = z < u.value, j.bottom = z > u.value, S.top = z <= 0 + (s.top || 0), S.bottom = z + M.clientHeight >= M.scrollHeight - (s.bottom || 0) - ze, u.value = z, f.value = !0, oe(J), r(J);
   };
-  return F(e, "scroll", t ? nl(ae, t, !0, !1) : ae, a), F(e, "scrollend", le, a), {
+  return F(e, "scroll", t ? sl(ae, t, !0, !1) : ae, a), F(e, "scrollend", le, a), {
     x: v,
     y: i,
     isScrolling: f,
     arrivedState: S,
-    directions: k
+    directions: j
   };
 }
-var Ll = Object.defineProperty, El = Object.defineProperties, Jl = Object.getOwnPropertyDescriptors, ze = Object.getOwnPropertySymbols, Tl = Object.prototype.hasOwnProperty, zl = Object.prototype.propertyIsEnumerable, Pe = (e, l, t) => l in e ? Ll(e, l, { enumerable: !0, configurable: !0, writable: !0, value: t }) : e[l] = t, qe = (e, l) => {
+var zl = Object.defineProperty, Tl = Object.defineProperties, Pl = Object.getOwnPropertyDescriptors, Te = Object.getOwnPropertySymbols, ql = Object.prototype.hasOwnProperty, Al = Object.prototype.propertyIsEnumerable, Pe = (e, l, t) => l in e ? zl(e, l, { enumerable: !0, configurable: !0, writable: !0, value: t }) : e[l] = t, qe = (e, l) => {
   for (var t in l || (l = {}))
-    Tl.call(l, t) && Pe(e, t, l[t]);
-  if (ze)
-    for (var t of ze(l))
-      zl.call(l, t) && Pe(e, t, l[t]);
+    ql.call(l, t) && Pe(e, t, l[t]);
+  if (Te)
+    for (var t of Te(l))
+      Al.call(l, t) && Pe(e, t, l[t]);
   return e;
-}, Pl = (e, l) => El(e, Jl(l));
+}, Fl = (e, l) => Tl(e, Pl(l));
 function Ae(e, l, t = {}) {
   var o, n;
-  const r = (o = t.direction) != null ? o : "bottom", s = ne(ve(e, Pl(qe({}, t), {
+  const r = (o = t.direction) != null ? o : "bottom", s = ne(ve(e, Fl(qe({}, t), {
     offset: qe({
       [r]: (n = t.distance) != null ? n : 0
     }, t.offset)
@@ -1092,7 +1125,7 @@ function Ae(e, l, t = {}) {
   E(() => s.arrivedState[r], async (a) => {
     var d, m;
     if (a) {
-      const u = z(e), v = {
+      const u = T(e), v = {
         height: (d = u == null ? void 0 : u.scrollHeight) != null ? d : 0,
         width: (m = u == null ? void 0 : u.scrollWidth) != null ? m : 0
       };
@@ -1105,13 +1138,13 @@ function Ae(e, l, t = {}) {
     }
   });
 }
-M.mounted + "";
+N.mounted + "";
 function Fe(e, l, t = {}) {
   const {
     root: o,
     rootMargin: n = "0px",
     threshold: r = 0.1,
-    window: s = W
+    window: s = U
   } = t, a = Xe(() => s && "IntersectionObserver" in s);
   let d = A;
   const m = a.value ? E(() => ({
@@ -1136,16 +1169,16 @@ function Fe(e, l, t = {}) {
     stop: u
   };
 }
-M.mounted + "";
-var ql = Object.defineProperty, Al = Object.defineProperties, Fl = Object.getOwnPropertyDescriptors, Ne = Object.getOwnPropertySymbols, Nl = Object.prototype.hasOwnProperty, Ml = Object.prototype.propertyIsEnumerable, Me = (e, l, t) => l in e ? ql(e, l, { enumerable: !0, configurable: !0, writable: !0, value: t }) : e[l] = t, Rl = (e, l) => {
+N.mounted + "";
+var Ml = Object.defineProperty, Nl = Object.defineProperties, Rl = Object.getOwnPropertyDescriptors, Me = Object.getOwnPropertySymbols, Dl = Object.prototype.hasOwnProperty, Hl = Object.prototype.propertyIsEnumerable, Ne = (e, l, t) => l in e ? Ml(e, l, { enumerable: !0, configurable: !0, writable: !0, value: t }) : e[l] = t, Wl = (e, l) => {
   for (var t in l || (l = {}))
-    Nl.call(l, t) && Me(e, t, l[t]);
-  if (Ne)
-    for (var t of Ne(l))
-      Ml.call(l, t) && Me(e, t, l[t]);
+    Dl.call(l, t) && Ne(e, t, l[t]);
+  if (Me)
+    for (var t of Me(l))
+      Hl.call(l, t) && Ne(e, t, l[t]);
   return e;
-}, Dl = (e, l) => Al(e, Fl(l));
-M.mounted + "";
+}, Ul = (e, l) => Nl(e, Rl(l));
+N.mounted + "";
 function et(e) {
   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)
@@ -1155,14 +1188,14 @@ function et(e) {
     return !t || t.tagName === "BODY" ? !1 : et(t);
   }
 }
-function Hl(e) {
+function Gl(e) {
   const l = e || window.event, t = l.target;
   return et(t) ? !1 : l.touches.length > 1 ? !0 : (l.preventDefault && l.preventDefault(), !1);
 }
-function Wl(e, l = !1) {
-  const t = b(l);
+function Kl(e, l = !1) {
+  const t = _(l);
   let o = null, n;
-  E(il(e), (a) => {
+  E(ul(e), (a) => {
     if (a) {
       const d = a;
       n = d.style.overflow, t.value && (d.style.overflow = "hidden");
@@ -1171,15 +1204,15 @@ function Wl(e, l = !1) {
     immediate: !0
   });
   const r = () => {
-    const a = z(e);
+    const a = T(e);
     !a || t.value || (ie && (o = F(a, "touchmove", (d) => {
-      Hl(d);
+      Gl(d);
     }, { passive: !1 })), a.style.overflow = "hidden", t.value = !0);
   }, s = () => {
-    const a = z(e);
+    const a = T(e);
     !a || !t.value || (ie && (o == null || o()), a.style.overflow = n, t.value = !1);
   };
-  return ee(s), O({
+  return ee(s), I({
     get() {
       return t.value;
     },
@@ -1188,25 +1221,25 @@ function Wl(e, l = !1) {
     }
   });
 }
-const Ul = () => {
+const Ql = () => {
   let e = !1;
-  const l = b(!1);
+  const l = _(!1);
   return (t, o) => {
     if (l.value = o.value, e)
       return;
     e = !0;
-    const n = Wl(t, o.value);
+    const n = Kl(t, o.value);
     E(l, (r) => n.value = r);
   };
 };
-Ul();
-const tt = ["medium", "small", "xsmall"], Gl = {
+Ql();
+const tt = ["medium", "small", "xsmall"], Yl = {
   key: 0,
   class: "joy-dropdown-list__header"
-}, Kl = ["id", "tabindex", "aria-disabled", "aria-selected", "title", "aria-label", ".dataModel", "onClick"], Ql = {
+}, Zl = ["id", "tabindex", "aria-disabled", "aria-selected", "title", "aria-label", ".dataModel", "onClick"], Xl = {
   key: 1,
   class: "joy-dropdown-list__footer"
-}, Yl = /* @__PURE__ */ j({
+}, eo = /* @__PURE__ */ k({
   __name: "VJoyDropdownList",
   props: {
     /**
@@ -1243,7 +1276,7 @@ const tt = ["medium", "small", "xsmall"], Gl = {
   },
   emits: ["update:modelValue", "close:dropdownList"],
   setup(e, { expose: l, emit: t }) {
-    const o = e, n = b(), r = O(() => (i) => !o.modelValue || !i.value && !i.id ? !1 : o.modelValue === i.value || o.modelValue === i.id);
+    const o = e, n = _(), r = I(() => (i) => !o.modelValue || !i.value && !i.id ? !1 : o.modelValue === i.value || o.modelValue === i.id);
     function s(i) {
       i.disabled || t("update:modelValue", i.value || i.id);
     }
@@ -1273,9 +1306,9 @@ const tt = ["medium", "small", "xsmall"], Gl = {
         }
         if (m() && i.key === " " && i.preventDefault(), ["ArrowDown", "ArrowUp", "Home", "End"].includes(i.key)) {
           const f = a(), S = m();
-          let k = f.indexOf(S);
+          let j = f.indexOf(S);
           if (f.length) {
-            i.preventDefault(), i.key === "ArrowDown" ? k++ : i.key === "ArrowUp" ? k-- : i.key === "Home" ? k = 0 : i.key === "End" && (k = f.length - 1), k < 0 && (k = f.length - 1), k > f.length - 1 && (k = 0), v(f[k]);
+            i.preventDefault(), i.key === "ArrowDown" ? j++ : i.key === "ArrowUp" ? j-- : i.key === "Home" ? j = 0 : i.key === "End" && (j = f.length - 1), j < 0 && (j = f.length - 1), j > f.length - 1 && (j = 0), v(f[j]);
             return;
           }
         }
@@ -1294,10 +1327,10 @@ const tt = ["medium", "small", "xsmall"], Gl = {
       class: "joy-dropdown-list",
       style: te({ width: `${e.width}px`, "max-width": `${e.width}px` })
     }, [
-      i.$slots["dropdown-list-header"] ? (y(), p("header", Gl, [
+      i.$slots["dropdown-list-header"] ? (y(), p("header", Yl, [
         h(i.$slots, "dropdown-list-header", {}, void 0, !0)
       ])) : g("", !0),
-      _("div", {
+      b("div", {
         class: w(["joy-dropdown-list__items", { "joy-dropdown-list__items-slotted": i.$slots["dropdown-list-items"] }]),
         style: te({ "max-height": `${e.height}px` })
       }, [
@@ -1309,7 +1342,7 @@ const tt = ["medium", "small", "xsmall"], Gl = {
           role: "listbox",
           "aria-expanded": "true"
         }, [
-          (y(!0), p(Q, null, se(e.options, (f) => (y(), p("li", {
+          (y(!0), p(H, null, se(e.options, (f) => (y(), p("li", {
             id: f.id,
             key: f.label,
             style: te({ "max-width": `${e.width}px` }),
@@ -1331,19 +1364,19 @@ const tt = ["medium", "small", "xsmall"], Gl = {
             onClick: (S) => s(f)
           }, [
             h(i.$slots, "label", me(pe(f)), () => [
-              _("span", null, C(f.label), 1)
+              b("span", null, C(f.label), 1)
             ], !0)
-          ], 14, Kl))), 128))
+          ], 14, Zl))), 128))
         ], 512)) : g("", !0)
       ], 6),
-      i.$slots["dropdown-list-footer"] ? (y(), p("footer", Ql, [
+      i.$slots["dropdown-list-footer"] ? (y(), p("footer", Xl, [
         h(i.$slots, "dropdown-list-footer", {}, void 0, !0)
       ])) : g("", !0)
     ], 4));
   }
 });
-const lt = /* @__PURE__ */ x(Yl, [["__scopeId", "data-v-cd3f6251"]]);
-function Zl(e) {
+const lt = /* @__PURE__ */ $(eo, [["__scopeId", "data-v-cd3f6251"]]);
+function to(e) {
   const l = () => e();
   Y(() => {
     window.addEventListener("resize", l);
@@ -1351,22 +1384,22 @@ function Zl(e) {
     window.removeEventListener("resize", l);
   });
 }
-const Xl = ["JOY-DRAWER", "JOY-DIALOG", "JOY-BOTTOM-SHEET"];
-function eo(e) {
+const lo = ["JOY-DRAWER", "JOY-DIALOG", "JOY-BOTTOM-SHEET"];
+function oo(e) {
   let l = e.value.parentElement, t = !1;
   for (; l != null && l.parentElement; )
-    Xl.includes(l == null ? void 0 : l.tagName) && (t = !0), l = l.parentElement;
+    lo.includes(l == null ? void 0 : l.tagName) && (t = !0), l = l.parentElement;
   return t;
 }
-function to(e) {
-  const l = b(!1);
+function ao(e) {
+  const l = _(!1);
   return Y(() => {
-    l.value = eo(e);
+    l.value = oo(e);
   }), {
     isInOverlay: l
   };
 }
-function lo(e) {
+function no(e) {
   let l;
   switch (e) {
     case "error":
@@ -1380,7 +1413,7 @@ function lo(e) {
   }
   return l;
 }
-function oo(e) {
+function io(e) {
   if (!e) {
     console.warn("Missing ref element for focusOnFirstFocusableFormField use");
     return;
@@ -1390,7 +1423,7 @@ function oo(e) {
   if (t.length)
     return t[0].focus();
 }
-const ao = /* @__PURE__ */ j({
+const ro = /* @__PURE__ */ k({
   __name: "VJoyDropdown",
   props: {
     /** DOM valid selector to give to Vue3 Teleport "to" property */
@@ -1471,14 +1504,14 @@ const ao = /* @__PURE__ */ j({
   },
   emits: ["update:modelValue", "dropdown:open", "dropdown:hide"],
   setup(e, { expose: l, emit: t }) {
-    const o = e, n = b(!1), r = b(null), s = b(), a = b(null), { isInOverlay: d } = to(s), m = b(null), u = b(!1), v = {
+    const o = e, n = _(!1), r = _(null), s = _(), a = _(null), { isInOverlay: d } = ao(s), m = _(null), u = _(!1), v = {
       ignore: [s, ".joy-dropdown__list"]
     };
     let i = null;
     E(
       () => n.value,
-      ($) => {
-        $ && oo(a);
+      (V) => {
+        V && io(a);
       },
       { flush: "post" }
     );
@@ -1488,7 +1521,7 @@ const ao = /* @__PURE__ */ j({
       right: "auto",
       zIndex: void 0,
       position: void 0
-    }), f = O(() => ({
+    }), f = I(() => ({
       position: c.position,
       top: c.top,
       left: c.left,
@@ -1499,8 +1532,8 @@ const ao = /* @__PURE__ */ j({
         n.value = !1, u.value = !1, t("dropdown:hide");
       }, 300);
     }
-    function k($) {
-      u.value = !1, i && clearTimeout(i), J(), ae(), m.value = $.target, n.value = !0, t("dropdown:open");
+    function j(V) {
+      u.value = !1, i && clearTimeout(i), J(), ae(), m.value = V.target, n.value = !0, t("dropdown:open");
     }
     function le() {
       S(), oe();
@@ -1512,19 +1545,19 @@ const ao = /* @__PURE__ */ j({
       d.value && (c.zIndex = "9999", c.position = "fixed");
     }
     function J() {
-      const $ = s.value.getBoundingClientRect();
-      let T = 0;
-      d.value ? T = document.documentElement.offsetTop + $.top : T = document.documentElement.scrollTop + $.top;
-      const D = $.height, G = $.left, rt = $.width;
-      o.justify === "left" ? c.left = G + "px" : c.left = G + rt - parseInt(o.width) + "px", o.direction === "down" ? c.top = T + D + parseInt(o.dropdownGap) + "px" : c.top = T - (parseInt(o.height) + parseInt(o.dropdownGap)) + "px";
+      const V = s.value.getBoundingClientRect();
+      let z = 0;
+      d.value ? z = document.documentElement.offsetTop + V.top : z = document.documentElement.scrollTop + V.top;
+      const D = V.height, K = V.left, rt = V.width;
+      o.justify === "left" ? c.left = K + "px" : c.left = K + rt - parseInt(o.width) + "px", o.direction === "down" ? c.top = z + D + parseInt(o.dropdownGap) + "px" : c.top = z - (parseInt(o.height) + parseInt(o.dropdownGap)) + "px";
     }
-    function N($) {
-      t("update:modelValue", $), o.closeOnSelect && (S(), oe());
+    function M(V) {
+      t("update:modelValue", V), o.closeOnSelect && (S(), oe());
     }
-    return Zl(S), l({
+    return to(S), l({
       coords: c,
       showDropdownList: n
-    }), ($, T) => (y(), I(V(bl), {
+    }), (V, z) => (y(), O(x(Sl), {
       ref_key: "dropdown",
       ref: r,
       options: v,
@@ -1532,15 +1565,15 @@ const ao = /* @__PURE__ */ j({
       onTrigger: S
     }, {
       default: B(() => [
-        _("div", {
+        b("div", {
           ref_key: "button",
           ref: s,
           class: "joy-dropdown__button",
-          onClick: k
+          onClick: j
         }, [
-          h($.$slots, "dropdown-button", {}, void 0, !0)
+          h(V.$slots, "dropdown-button", {}, void 0, !0)
         ], 512),
-        (y(), I(ft, {
+        (y(), O(ft, {
           to: e.appendTo,
           disabled: e.disableTeleport
         }, [
@@ -1564,34 +1597,34 @@ const ao = /* @__PURE__ */ j({
               size: e.size,
               width: e.width,
               height: e.height,
-              "onUpdate:modelValue": N,
+              "onUpdate:modelValue": M,
               "onClose:dropdownList": le
             }, Ge({
               label: B((D) => [
-                h($.$slots, "dropdown-item", me(pe(D)), () => [
-                  _("span", null, C(D.label), 1)
+                h(V.$slots, "dropdown-item", me(pe(D)), () => [
+                  b("span", null, C(D.label), 1)
                 ], !0)
               ]),
               _: 2
             }, [
-              $.$slots["dropdown-header"] ? {
+              V.$slots["dropdown-header"] ? {
                 name: "dropdown-list-header",
                 fn: B(() => [
-                  h($.$slots, "dropdown-header", {}, void 0, !0)
+                  h(V.$slots, "dropdown-header", {}, void 0, !0)
                 ]),
                 key: "0"
               } : void 0,
-              $.$slots["dropdown-items"] ? {
+              V.$slots["dropdown-items"] ? {
                 name: "dropdown-list-items",
                 fn: B(() => [
-                  h($.$slots, "dropdown-items", {}, void 0, !0)
+                  h(V.$slots, "dropdown-items", {}, void 0, !0)
                 ]),
                 key: "1"
               } : void 0,
-              $.$slots["dropdown-footer"] ? {
+              V.$slots["dropdown-footer"] ? {
                 name: "dropdown-list-footer",
                 fn: B(() => [
-                  h($.$slots, "dropdown-footer", {}, void 0, !0)
+                  h(V.$slots, "dropdown-footer", {}, void 0, !0)
                 ]),
                 key: "2"
               } : void 0
@@ -1603,7 +1636,7 @@ const ao = /* @__PURE__ */ j({
     }, 512));
   }
 });
-const no = /* @__PURE__ */ x(ao, [["__scopeId", "data-v-194e09e1"]]), io = ["aria-hidden"], ro = /* @__PURE__ */ j({
+const so = /* @__PURE__ */ $(ro, [["__scopeId", "data-v-194e09e1"]]), uo = ["aria-hidden"], co = /* @__PURE__ */ k({
   __name: "VJoyFormError",
   props: {
     /** In some cases you'll need to inject the error in the DOM but hide it. Visible by default */
@@ -1624,15 +1657,15 @@ const no = /* @__PURE__ */ x(ao, [["__scopeId", "data-v-194e09e1"]]), io = ["ari
         class: "joy-icon-error",
         name: "warning-triangle"
       }),
-      _("div", null, [
+      b("div", null, [
         h(l.$slots, "default", {}, () => [
           L(C(e.noHtmlErrorText), 1)
         ], !0)
       ])
-    ], 10, io));
+    ], 10, uo));
   }
 });
-const ot = /* @__PURE__ */ x(ro, [["__scopeId", "data-v-581fd33b"]]), so = [...Jt], uo = { class: "joy-highlight--text" }, co = { key: 0 }, fo = /* @__PURE__ */ j({
+const ot = /* @__PURE__ */ $(co, [["__scopeId", "data-v-581fd33b"]]), fo = [...Pt], yo = { class: "joy-highlight--text" }, vo = { key: 0 }, mo = /* @__PURE__ */ k({
   __name: "VJoyHighlight",
   props: {
     accent: {
@@ -1650,12 +1683,12 @@ const ot = /* @__PURE__ */ x(ro, [["__scopeId", "data-v-581fd33b"]]), so = [...J
       type: String,
       default: "neutral",
       validator(e) {
-        return so.includes(e);
+        return fo.includes(e);
       }
     }
   },
   setup(e, { expose: l }) {
-    const t = e, o = O(() => t.icon ? t.icon : lo(t.level));
+    const t = e, o = I(() => t.icon ? t.icon : no(t.level));
     return l({
       getRelevantIcon: o
     }), (n, r) => (y(), p("div", {
@@ -1668,12 +1701,12 @@ const ot = /* @__PURE__ */ x(ro, [["__scopeId", "data-v-581fd33b"]]), so = [...J
         }
       ])
     }, [
-      e.displayIcon ? (y(), I(q, {
+      e.displayIcon ? (y(), O(q, {
         key: 0,
         name: o.value
       }, null, 8, ["name"])) : g("", !0),
-      _("div", uo, [
-        n.$slots["highlight-title"] ? (y(), p("strong", co, [
+      b("div", yo, [
+        n.$slots["highlight-title"] ? (y(), p("strong", vo, [
           h(n.$slots, "highlight-title", {}, void 0, !0)
         ])) : g("", !0),
         h(n.$slots, "default", {}, void 0, !0)
@@ -1681,20 +1714,20 @@ const ot = /* @__PURE__ */ x(ro, [["__scopeId", "data-v-581fd33b"]]), so = [...J
     ], 2));
   }
 });
-const yo = /* @__PURE__ */ x(fo, [["__scopeId", "data-v-ba5e6101"]]), vo = ["small", "medium", "large"], mo = {
+const po = /* @__PURE__ */ $(mo, [["__scopeId", "data-v-ba5e6101"]]), go = ["small", "medium", "large"], ho = {
   key: 0,
   class: "joy-label-required"
-}, po = {
+}, bo = {
   key: 1,
   class: "joy-label-optional"
-}, go = /* @__PURE__ */ j({
+}, _o = /* @__PURE__ */ k({
   __name: "VJoyLabel",
   props: {
     size: {
       type: String,
       default: "medium",
       validator(e) {
-        return vo.includes(e);
+        return go.includes(e);
       }
     },
     tagName: {
@@ -1711,21 +1744,21 @@ const yo = /* @__PURE__ */ x(fo, [["__scopeId", "data-v-ba5e6101"]]), vo = ["sma
     text: String
   },
   setup(e) {
-    return (l, t) => (y(), I(re(e.tagName), H({
+    return (l, t) => (y(), O(re(e.tagName), W({
       class: ["joy-label", `joy-label--${e.size}`]
     }, l.$attrs), {
       default: B(() => [
         h(l.$slots, "default", {}, () => [
           L(C(e.text), 1)
         ], !0),
-        e.required ? (y(), p("span", mo, "*")) : g("", !0),
-        e.optionalLabel ? (y(), p("span", po, "- " + C(e.optionalLabel), 1)) : g("", !0)
+        e.required ? (y(), p("span", ho, "*")) : g("", !0),
+        e.optionalLabel ? (y(), p("span", bo, "- " + C(e.optionalLabel), 1)) : g("", !0)
       ]),
       _: 3
     }, 16, ["class"]));
   }
 });
-const U = /* @__PURE__ */ x(go, [["__scopeId", "data-v-1265214a"]]), ho = ["large", "medium", "small"], bo = ["id", "required", "disabled", "type", "value"], _o = ["data-unit"], wo = /* @__PURE__ */ j({
+const G = /* @__PURE__ */ $(_o, [["__scopeId", "data-v-1265214a"]]), wo = ["large", "medium", "small"], So = ["id", "required", "disabled", "type", "value"], jo = ["data-unit"], ko = /* @__PURE__ */ k({
   inheritAttrs: !1,
   __name: "VJoyInput",
   props: {
@@ -1765,6 +1798,11 @@ const U = /* @__PURE__ */ x(go, [["__scopeId", "data-v-1265214a"]]), ho = ["larg
     modelValue: {
       type: [String, Number]
     },
+    modelModifiers: {
+      default: () => ({
+        lazy: !1
+      })
+    },
     /** Display a cross icon on the right that enables to clear the field */
     clearable: {
       type: Boolean,
@@ -1778,7 +1816,7 @@ const U = /* @__PURE__ */ x(go, [["__scopeId", "data-v-1265214a"]]), ho = ["larg
       type: String,
       default: "medium",
       validator(e) {
-        return ho.includes(e);
+        return wo.includes(e);
       }
     },
     type: {
@@ -1790,10 +1828,10 @@ const U = /* @__PURE__ */ x(go, [["__scopeId", "data-v-1265214a"]]), ho = ["larg
   },
   emits: ["update:modelValue"],
   setup(e, { emit: l }) {
-    const t = e, o = b(), n = b(), r = He(), s = Z(), a = b(!1), d = O(() => typeof t.modelValue == "number" || !t.clearable || t.unit || !t.modelValue ? !1 : t.modelValue.length > 0 && !t.unit), m = O(() => s.default && s.default()), u = O(() => {
+    const t = e, o = _(), n = _(), r = He(), s = Z(), a = _(!1), d = I(() => typeof t.modelValue == "number" || !t.clearable || t.unit || !t.modelValue ? !1 : t.modelValue.length > 0 && !t.unit), m = I(() => s.default && s.default()), u = I(() => {
       var c, f;
       return !!((c = n.value) != null && c.closest("joy-wrapper")) || !!((f = n.value) != null && f.closest(".joy-wrapper"));
-    }), v = b(t.type);
+    }), v = _(t.type);
     yt(() => {
       v.value = t.unit ? "number" : t.type;
     });
@@ -1806,7 +1844,11 @@ const U = /* @__PURE__ */ x(go, [["__scopeId", "data-v-1265214a"]]), ho = ["larg
       },
       onInput: (c) => {
         let f = c.target.value;
-        l("update:modelValue", f);
+        t.modelModifiers.lazy || l("update:modelValue", f);
+      },
+      onChange: (c) => {
+        let f = c.target.value;
+        t.modelModifiers.lazy && l("update:modelValue", f);
       },
       clearValue: () => {
         t.disabled || l("update:modelValue", "");
@@ -1817,18 +1859,18 @@ const U = /* @__PURE__ */ x(go, [["__scopeId", "data-v-1265214a"]]), ho = ["larg
       ref: n,
       class: w([`joy-input--${t.size}`])
     }, [
-      _("div", {
+      b("div", {
         class: w([
           "joy-input",
           {
             "joy-input--focusing": a.value,
             "joy-input--disabled": e.disabled,
             "joy-input--invalid": e.invalid,
-            "joy-input--valid": !e.invalid && !V(r).disabled
+            "joy-input--valid": !e.invalid && !x(r).disabled
           }
         ])
       }, [
-        m.value || e.label ? (y(), I(U, {
+        m.value || e.label ? (y(), O(G, {
           key: 0,
           for: e.name,
           required: e.required && e.requiredMark,
@@ -1842,7 +1884,7 @@ const U = /* @__PURE__ */ x(go, [["__scopeId", "data-v-1265214a"]]), ho = ["larg
           ]),
           _: 3
         }, 8, ["for", "required", "optional-label", "size"])) : g("", !0),
-        _("div", {
+        b("div", {
           class: w([
             "joy-input--wrapper",
             {
@@ -1853,7 +1895,7 @@ const U = /* @__PURE__ */ x(go, [["__scopeId", "data-v-1265214a"]]), ho = ["larg
             }
           ])
         }, [
-          _("input", H(c.$attrs, {
+          b("input", W(c.$attrs, {
             id: t.name,
             ref_key: "input",
             ref: o,
@@ -1872,9 +1914,11 @@ const U = /* @__PURE__ */ x(go, [["__scopeId", "data-v-1265214a"]]), ho = ["larg
             onBlur: f[1] || (f[1] = //@ts-ignore
             (...S) => i.onBlur && i.onBlur(...S)),
             onInput: f[2] || (f[2] = //@ts-ignore
-            (...S) => i.onInput && i.onInput(...S))
-          }), null, 16, bo),
-          d.value ? (y(), I(Ke, {
+            (...S) => i.onInput && i.onInput(...S)),
+            onChange: f[3] || (f[3] = //@ts-ignore
+            (...S) => i.onChange && i.onChange(...S))
+          }), null, 16, So),
+          d.value ? (y(), O(Ke, {
             key: 0,
             class: "joy-input--clear",
             circle: "",
@@ -1883,7 +1927,7 @@ const U = /* @__PURE__ */ x(go, [["__scopeId", "data-v-1265214a"]]), ho = ["larg
             icon: "cross",
             onClick: i.clearValue
           }, null, 8, ["onClick"])) : g("", !0),
-          e.icon ? (y(), I(q, {
+          e.icon ? (y(), O(q, {
             key: 1,
             role: "img",
             class: "joy-input--decorative-icon",
@@ -1893,13 +1937,13 @@ const U = /* @__PURE__ */ x(go, [["__scopeId", "data-v-1265214a"]]), ho = ["larg
             key: 2,
             "data-unit": e.unit,
             class: "joy-input--unit"
-          }, null, 8, _o)) : g("", !0)
+          }, null, 8, jo)) : g("", !0)
         ], 2)
       ], 2)
     ], 2));
   }
 });
-const So = /* @__PURE__ */ x(wo, [["__scopeId", "data-v-ba3aad9d"]]), ko = ["teal", "white"], jo = ["href"], $o = /* @__PURE__ */ j({
+const $o = /* @__PURE__ */ $(ko, [["__scopeId", "data-v-a49577c6"]]), Vo = ["teal", "white"], xo = ["href"], Io = /* @__PURE__ */ k({
   __name: "VJoyLink",
   props: {
     href: {
@@ -1910,29 +1954,29 @@ const So = /* @__PURE__ */ x(wo, [["__scopeId", "data-v-ba3aad9d"]]), ko = ["tea
       type: String,
       default: "teal",
       validator(e) {
-        return ko.includes(e);
+        return Vo.includes(e);
       }
     },
     icon: String,
     text: String
   },
   setup(e) {
-    return (l, t) => (y(), p("a", H({ href: e.href }, l.$attrs, {
+    return (l, t) => (y(), p("a", W({ href: e.href }, l.$attrs, {
       class: ["joy-link", `joy-link_${e.color}`]
     }), [
-      e.icon ? (y(), I(q, {
+      e.icon ? (y(), O(q, {
         key: 0,
         name: e.icon
       }, null, 8, ["name"])) : g("", !0),
       h(l.$slots, "default", {}, () => [
         L(C(e.text), 1)
       ], !0)
-    ], 16, jo));
+    ], 16, xo));
   }
 });
-const Vo = /* @__PURE__ */ x($o, [["__scopeId", "data-v-76f0342e"]]), xo = ["id"], Io = {
+const Oo = /* @__PURE__ */ $(Io, [["__scopeId", "data-v-76f0342e"]]), Co = ["id"], Bo = {
   class: /* @__PURE__ */ w(["joy-multi-checkbox"])
-}, Oo = /* @__PURE__ */ j({
+}, Lo = /* @__PURE__ */ k({
   __name: "VJoyMultiCheckbox",
   props: {
     options: {
@@ -1979,7 +2023,7 @@ const Vo = /* @__PURE__ */ x($o, [["__scopeId", "data-v-76f0342e"]]), xo = ["id"
       id: e.id,
       class: "joy-multi-checkbox__wrapper"
     }, [
-      e.label ? (y(), I(V(U), {
+      e.label ? (y(), O(x(G), {
         key: 0,
         "tag-name": "legend",
         required: e.required && e.requiredMark,
@@ -1991,8 +2035,8 @@ const Vo = /* @__PURE__ */ x($o, [["__scopeId", "data-v-76f0342e"]]), xo = ["id"
         ]),
         _: 1
       }, 8, ["required", "optional-label", "size"])) : g("", !0),
-      _("div", Io, [
-        (y(!0), p(Q, null, se(e.options, (a) => (y(), I(V(he), {
+      b("div", Bo, [
+        (y(!0), p(H, null, se(e.options, (a) => (y(), O(x(he), {
           id: a.id,
           key: a.id,
           name: a.name,
@@ -2008,22 +2052,22 @@ const Vo = /* @__PURE__ */ x($o, [["__scopeId", "data-v-76f0342e"]]), xo = ["id"
           _: 2
         }, 1032, ["id", "name", "value", "checked", "onUpdate:checked"]))), 128))
       ])
-    ], 8, xo));
+    ], 8, Co));
   }
 });
-const Co = /* @__PURE__ */ x(Oo, [["__scopeId", "data-v-47574ced"]]), Bo = ["small", "medium", "large"], Lo = ["small", "large"], Eo = {
+const Eo = /* @__PURE__ */ $(Lo, [["__scopeId", "data-v-47574ced"]]), Jo = ["small", "medium", "large"], zo = ["small", "large"], To = {
   key: 0,
   class: /* @__PURE__ */ w(["joy-panel__header"])
-}, Jo = {
+}, Po = {
   key: 1,
   class: "joy-panel__header-action"
-}, To = {
+}, qo = {
   key: 2,
   class: "joy-panel__header-subtitle"
-}, zo = { class: "joy-panel__body" }, Po = {
+}, Ao = { class: "joy-panel__body" }, Fo = {
   key: 1,
   class: "joy-panel__footer"
-}, qo = /* @__PURE__ */ j({
+}, Mo = /* @__PURE__ */ k({
   __name: "VJoyPanel",
   props: {
     flex: {
@@ -2037,14 +2081,14 @@ const Co = /* @__PURE__ */ x(Oo, [["__scopeId", "data-v-47574ced"]]), Bo = ["sma
       type: String,
       default: "medium",
       validator(e) {
-        return Bo.includes(e);
+        return Jo.includes(e);
       }
     },
     titleSize: {
       type: String,
       default: "large",
       validator(e) {
-        return Lo.includes(e);
+        return zo.includes(e);
       }
     },
     loading: {
@@ -2057,7 +2101,7 @@ const Co = /* @__PURE__ */ x(Oo, [["__scopeId", "data-v-47574ced"]]), Bo = ["sma
     }
   },
   setup(e) {
-    const l = vt("VJoyWrapperContext", {}), t = O(() => Object.keys(l).length > 0), o = Z(), n = b(), r = O(() => o["panel-title"] || o["panel-subtitle"] || o["panel-title-action"]);
+    const l = vt("VJoyWrapperContext", {}), t = I(() => Object.keys(l).length > 0), o = Z(), n = _(), r = I(() => o["panel-title"] || o["panel-subtitle"] || o["panel-title-action"]);
     return (s, a) => (y(), p("section", {
       ref_key: "panel",
       ref: n,
@@ -2071,27 +2115,27 @@ const Co = /* @__PURE__ */ x(Oo, [["__scopeId", "data-v-47574ced"]]), Bo = ["sma
         }
       ])
     }, [
-      r.value ? (y(), p("header", Eo, [
-        V(o)["panel-title"] ? (y(), p("div", {
+      r.value ? (y(), p("header", To, [
+        x(o)["panel-title"] ? (y(), p("div", {
           key: 0,
           class: w(["joy-panel__header-title", `joy-panel__header-title--${e.titleSize}`])
         }, [
           h(s.$slots, "panel-title", {}, void 0, !0)
         ], 2)) : g("", !0),
-        V(o)["panel-title-action"] ? (y(), p("div", Jo, [
+        x(o)["panel-title-action"] ? (y(), p("div", Po, [
           h(s.$slots, "panel-title-action", {}, void 0, !0)
         ])) : g("", !0),
-        V(o)["panel-subtitle"] ? (y(), p("div", To, [
+        x(o)["panel-subtitle"] ? (y(), p("div", qo, [
           h(s.$slots, "panel-subtitle", {}, void 0, !0)
         ])) : g("", !0)
       ])) : g("", !0),
-      _("div", zo, [
+      b("div", Ao, [
         h(s.$slots, "panel-body", {}, void 0, !0)
       ]),
-      V(o)["panel-action"] ? (y(), p("footer", Po, [
+      x(o)["panel-action"] ? (y(), p("footer", Fo, [
         h(s.$slots, "panel-action", {}, void 0, !0)
       ])) : g("", !0),
-      e.loading ? (y(), I(V(_e), {
+      e.loading ? (y(), O(x(_e), {
         key: 2,
         overlay: "",
         color: e.loadingColor
@@ -2104,27 +2148,27 @@ const Co = /* @__PURE__ */ x(Oo, [["__scopeId", "data-v-47574ced"]]), Bo = ["sma
     ], 6));
   }
 });
-const Ao = /* @__PURE__ */ x(qo, [["__scopeId", "data-v-2e3a2baa"]]), Fo = { class: "joy-panel-section" }, No = {
+const No = /* @__PURE__ */ $(Mo, [["__scopeId", "data-v-2e3a2baa"]]), Ro = { class: "joy-panel-section" }, Do = {
   key: 0,
   class: "joy-panel-section__title"
-}, Mo = {
+}, Ho = {
   key: 1,
   class: "joy-panel-section__content"
-}, Ro = /* @__PURE__ */ j({
+}, Wo = /* @__PURE__ */ k({
   __name: "VJoyPanelSection",
   setup(e) {
     const l = Z();
-    return (t, o) => (y(), p("div", Fo, [
-      V(l)["panel-section-title"] ? (y(), p("div", No, [
+    return (t, o) => (y(), p("div", Ro, [
+      x(l)["panel-section-title"] ? (y(), p("div", Do, [
         h(t.$slots, "panel-section-title", {}, void 0, !0)
       ])) : g("", !0),
-      V(l)["panel-section-content"] ? (y(), p("div", Mo, [
+      x(l)["panel-section-content"] ? (y(), p("div", Ho, [
         h(t.$slots, "panel-section-content", {}, void 0, !0)
       ])) : g("", !0)
     ]));
   }
 });
-const Do = /* @__PURE__ */ x(Ro, [["__scopeId", "data-v-d88510ab"]]), Ho = ["id", "value", "checked", "disabled", "required", "name"], Wo = { class: "joy-radio-label" }, Uo = { class: "joy-radio-content__wrapper" }, Go = { class: "joy-radio-content" }, Ko = /* @__PURE__ */ j({
+const Uo = /* @__PURE__ */ $(Wo, [["__scopeId", "data-v-d88510ab"]]), Go = ["id", "value", "checked", "disabled", "required", "name"], Ko = { class: "joy-radio-label" }, Qo = { class: "joy-radio-content__wrapper" }, Yo = { class: "joy-radio-content" }, Zo = /* @__PURE__ */ k({
   __name: "VJoyRadio",
   props: {
     disabled: {
@@ -2160,7 +2204,7 @@ const Do = /* @__PURE__ */ x(Ro, [["__scopeId", "data-v-d88510ab"]]), Ho = ["id"
   },
   emits: ["update:modelValue"],
   setup(e, { expose: l, emit: t }) {
-    const o = e, n = b(!1), r = b(!1), s = b(null), a = b(null), d = Z(), m = O(() => !o.modelValue || !o.value ? !1 : o.modelValue === o.value);
+    const o = e, n = _(!1), r = _(!1), s = _(null), a = _(null), d = Z(), m = I(() => !o.modelValue || !o.value ? !1 : o.modelValue === o.value);
     function u() {
       n.value = !!d["expandable-content"] && m.value;
     }
@@ -2199,7 +2243,7 @@ const Do = /* @__PURE__ */ x(Ro, [["__scopeId", "data-v-d88510ab"]]), Ho = ["id"
         }
       ])
     }, [
-      _("input", {
+      b("input", {
         id: e.id,
         type: "radio",
         value: e.value,
@@ -2210,15 +2254,15 @@ const Do = /* @__PURE__ */ x(Ro, [["__scopeId", "data-v-d88510ab"]]), Ho = ["id"
         onChange: v,
         onFocus: i,
         onBlur: c
-      }, null, 40, Ho),
-      _("span", Wo, [
+      }, null, 40, Go),
+      b("span", Ko, [
         h(f.$slots, "default", {}, void 0, !0)
       ]),
-      _("div", Uo, [
-        _("div", Go, [
+      b("div", Qo, [
+        b("div", Yo, [
           h(f.$slots, "radio-content", {}, void 0, !0)
         ]),
-        _("div", {
+        b("div", {
           ref_key: "expandableElement",
           ref: a,
           class: w(["joy-radio-expandable", { "joy-radio-expandable--expanded": n.value }])
@@ -2229,7 +2273,7 @@ const Do = /* @__PURE__ */ x(Ro, [["__scopeId", "data-v-d88510ab"]]), Ho = ["id"
     ], 2));
   }
 });
-const Qo = /* @__PURE__ */ x(Ko, [["__scopeId", "data-v-24cea99b"]]), Yo = ["form", "name"], Zo = /* @__PURE__ */ j({
+const Xo = /* @__PURE__ */ $(Zo, [["__scopeId", "data-v-24cea99b"]]), ea = ["form", "name"], ta = /* @__PURE__ */ k({
   __name: "VJoyRadioGroup",
   props: {
     /**
@@ -2258,18 +2302,18 @@ const Qo = /* @__PURE__ */ x(Ko, [["__scopeId", "data-v-24cea99b"]]), Yo = ["for
       name: e.name
     }, [
       h(l.$slots, "radio-group-legend", {}, void 0, !0),
-      _("div", {
+      b("div", {
         class: w(["joy-radio-group-container", `joy-radio-group-${e.direction}`])
       }, [
         h(l.$slots, "default", {}, void 0, !0)
       ], 2)
-    ], 8, Yo));
+    ], 8, ea));
   }
 });
-const Xo = /* @__PURE__ */ x(Zo, [["__scopeId", "data-v-a77e7f95"]]), ea = { class: "joy-screen-loader__content" }, ta = {
+const la = /* @__PURE__ */ $(ta, [["__scopeId", "data-v-a77e7f95"]]), oa = { class: "joy-screen-loader__content" }, aa = {
   key: 0,
   class: "joy-screen-loader__content"
-}, la = /* @__PURE__ */ j({
+}, na = /* @__PURE__ */ k({
   __name: "VJoyScreenLoader",
   props: {
     /** Light or dark. Changes the spinner and background color */
@@ -2287,20 +2331,20 @@ const Xo = /* @__PURE__ */ x(Zo, [["__scopeId", "data-v-a77e7f95"]]), ea = { cla
     return (l, t) => (y(), p("div", {
       class: w(["joy-screen-loader", `joy-screen-loader--${e.color}`, { "joy-screen-loader--overlay": e.overlay }])
     }, [
-      _("div", ea, [
+      b("div", oa, [
         h(l.$slots, "spinner", {}, () => [
           R(ge, {
             color: e.color === "dark" ? "white" : "teal"
           }, null, 8, ["color"])
         ], !0),
-        l.$slots.content ? (y(), p("div", ta, [
+        l.$slots.content ? (y(), p("div", aa, [
           h(l.$slots, "content", {}, void 0, !0)
         ])) : g("", !0)
       ])
     ], 2));
   }
 });
-const _e = /* @__PURE__ */ x(la, [["__scopeId", "data-v-5c4f6d7f"]]), oa = ["id", "name", "aria-invalid", "required", "disabled", "value"], aa = /* @__PURE__ */ j({
+const _e = /* @__PURE__ */ $(na, [["__scopeId", "data-v-5c4f6d7f"]]), ia = ["id", "name", "aria-invalid", "required", "disabled", "value"], ra = /* @__PURE__ */ k({
   __name: "VJoySelect",
   props: {
     disabled: {
@@ -2333,8 +2377,7 @@ const _e = /* @__PURE__ */ x(la, [["__scopeId", "data-v-5c4f6d7f"]]), oa = ["id"
     },
     // ...LABEL_BASED_PROPS,
     modelValue: {
-      type: String,
-      default: ""
+      type: [String, Number]
     },
     size: {
       type: String,
@@ -2344,7 +2387,7 @@ const _e = /* @__PURE__ */ x(la, [["__scopeId", "data-v-5c4f6d7f"]]), oa = ["id"
   },
   emits: ["update:modelValue"],
   setup(e, { emit: l }) {
-    const t = e, o = b(), n = b(), r = Z(), s = b(!1), a = O(() => t.labelSize ? t.labelSize : t.size !== "medium" ? "small" : "medium");
+    const t = e, o = _(), n = _(), r = Z(), s = _(!1), a = I(() => t.labelSize ? t.labelSize : t.size !== "medium" ? "small" : "medium");
     Y(() => {
       var c;
       const v = r.label && r.label();
@@ -2375,7 +2418,7 @@ const _e = /* @__PURE__ */ x(la, [["__scopeId", "data-v-5c4f6d7f"]]), oa = ["id"
       ref: o
     }, [
       h(v.$slots, "select-label", {}, () => [
-        e.label ? (y(), I(U, {
+        e.label ? (y(), O(G, {
           key: 0,
           required: e.required && e.requiredMark,
           "optional-label": e.optionalLabel,
@@ -2388,7 +2431,7 @@ const _e = /* @__PURE__ */ x(la, [["__scopeId", "data-v-5c4f6d7f"]]), oa = ["id"
           _: 1
         }, 8, ["required", "optional-label", "for", "size"])) : g("", !0)
       ], !0),
-      _("div", {
+      b("div", {
         class: w([
           `joy-select--${e.size}`,
           {
@@ -2399,7 +2442,7 @@ const _e = /* @__PURE__ */ x(la, [["__scopeId", "data-v-5c4f6d7f"]]), oa = ["id"
           }
         ])
       }, [
-        _("select", {
+        b("select", {
           id: e.id || e.name,
           ref_key: "select",
           ref: n,
@@ -2414,7 +2457,7 @@ const _e = /* @__PURE__ */ x(la, [["__scopeId", "data-v-5c4f6d7f"]]), oa = ["id"
           onBlur: u
         }, [
           h(v.$slots, "default", {}, void 0, !0)
-        ], 40, oa),
+        ], 40, ia),
         R(q, {
           class: "joy-select__chevron",
           name: "chevron-down"
@@ -2423,7 +2466,7 @@ const _e = /* @__PURE__ */ x(la, [["__scopeId", "data-v-5c4f6d7f"]]), oa = ["id"
     ], 512));
   }
 });
-const na = /* @__PURE__ */ x(aa, [["__scopeId", "data-v-18112ea4"]]), ia = ["aria-disabled"], ra = ["id", "value", "checked", "disabled", "required", "name"], sa = /* @__PURE__ */ j({
+const sa = /* @__PURE__ */ $(ra, [["__scopeId", "data-v-b8f98cc8"]]), ua = ["aria-disabled"], da = ["id", "value", "checked", "disabled", "required", "name"], ca = /* @__PURE__ */ k({
   __name: "VJoySelectableItem",
   props: {
     disabled: {
@@ -2460,7 +2503,7 @@ const na = /* @__PURE__ */ x(aa, [["__scopeId", "data-v-18112ea4"]]), ia = ["ari
   },
   emits: ["update:checked"],
   setup(e, { emit: l }) {
-    const t = e, o = b(t.checked), n = b(), r = b(!1), s = t.multiple ? "div" : "label", a = {
+    const t = e, o = _(t.checked), n = _(), r = _(!1), s = t.multiple ? "div" : "label", a = {
       onRadioChange: () => {
         l("update:checked", t.value);
       },
@@ -2508,8 +2551,8 @@ const na = /* @__PURE__ */ x(aa, [["__scopeId", "data-v-18112ea4"]]), ia = ["ari
         (...v) => a.onFocus && a.onFocus(...v)),
         onBlur: u[2] || (u[2] = //@ts-ignore
         (...v) => a.onBlur && a.onBlur(...v))
-      }, null, 40, ra)),
-      (y(), I(re(V(s)), {
+      }, null, 40, da)),
+      (y(), O(re(x(s)), {
         for: e.id,
         class: w([
           "joy-selectable-item",
@@ -2523,7 +2566,7 @@ const na = /* @__PURE__ */ x(aa, [["__scopeId", "data-v-18112ea4"]]), ia = ["ari
         onClick: a.onLabelClick
       }, {
         default: B(() => [
-          e.multiple ? (y(), I(V(he), {
+          e.multiple ? (y(), O(x(he), {
             key: 0,
             id: e.id,
             checked: o.value,
@@ -2545,7 +2588,7 @@ const na = /* @__PURE__ */ x(aa, [["__scopeId", "data-v-18112ea4"]]), ia = ["ari
             _: 3
           }, 8, ["id", "checked", "disabled", "value", "name", "required", "onFocus", "onBlur"])) : g("", !0),
           e.multiple ? g("", !0) : h(m.$slots, "default", { key: 1 }, void 0, !0),
-          _("div", {
+          b("div", {
             class: w([{ "joy-selectable-item__sublabel": m.$slots["selectable-item-sublabel"] }])
           }, [
             h(m.$slots, "selectable-item-sublabel", {}, void 0, !0)
@@ -2553,10 +2596,10 @@ const na = /* @__PURE__ */ x(aa, [["__scopeId", "data-v-18112ea4"]]), ia = ["ari
         ]),
         _: 3
       }, 8, ["for", "class", "onClick"]))
-    ], 10, ia));
+    ], 10, ua));
   }
 });
-const at = /* @__PURE__ */ x(sa, [["__scopeId", "data-v-cb2531c0"]]), ua = ["id"], da = /* @__PURE__ */ j({
+const at = /* @__PURE__ */ $(ca, [["__scopeId", "data-v-cb2531c0"]]), fa = ["id"], ya = /* @__PURE__ */ k({
   __name: "VJoySelectableItemGroup",
   props: {
     options: {
@@ -2611,7 +2654,7 @@ const at = /* @__PURE__ */ x(sa, [["__scopeId", "data-v-cb2531c0"]]), ua = ["id"
       id: e.id,
       class: "joy-selectable-item-group__wrapper"
     }, [
-      e.label ? (y(), I(V(U), {
+      e.label ? (y(), O(x(G), {
         key: 0,
         "tag-name": "legend",
         required: e.required && e.requiredMark,
@@ -2623,7 +2666,7 @@ const at = /* @__PURE__ */ x(sa, [["__scopeId", "data-v-cb2531c0"]]), ua = ["id"
         ]),
         _: 1
       }, 8, ["required", "optional-label", "size"])) : g("", !0),
-      _("div", {
+      b("div", {
         class: w([
           "joy-selectable-item-group",
           {
@@ -2633,7 +2676,7 @@ const at = /* @__PURE__ */ x(sa, [["__scopeId", "data-v-cb2531c0"]]), ua = ["id"
           }
         ])
       }, [
-        (y(!0), p(Q, null, se(e.options, (a) => (y(), I(V(at), {
+        (y(!0), p(H, null, se(e.options, (a) => (y(), O(x(at), {
           id: a.id,
           key: a.id,
           name: a.name,
@@ -2657,10 +2700,10 @@ const at = /* @__PURE__ */ x(sa, [["__scopeId", "data-v-cb2531c0"]]), ua = ["id"
           } : void 0
         ]), 1032, ["id", "name", "disabled", "value", "multiple", "checked", "onUpdate:checked"]))), 128))
       ], 2)
-    ], 8, ua));
+    ], 8, fa));
   }
 });
-const ca = /* @__PURE__ */ x(da, [["__scopeId", "data-v-0730aed0"]]), fa = /* @__PURE__ */ j({
+const va = /* @__PURE__ */ $(ya, [["__scopeId", "data-v-0730aed0"]]), ma = /* @__PURE__ */ k({
   __name: "VJoyWrapper",
   props: {
     /** Horizontal spread. Refers to CSS flex justify-content. */
@@ -2691,6 +2734,16 @@ const ca = /* @__PURE__ */ x(da, [["__scopeId", "data-v-0730aed0"]]), fa = /* @_
     noMargin: {
       type: Boolean,
       default: !1
+    },
+    /** Gap between the columns. Refers to CSS column-gap. Value is based on spacing tokens. */
+    columnGap: {
+      type: String,
+      default: "4"
+    },
+    /** Gap between the rows. Refers to CSS row-gap. Value is based on spacing tokens. */
+    rowGap: {
+      type: String,
+      default: "8"
     }
   },
   setup(e) {
@@ -2701,6 +2754,8 @@ const ca = /* @__PURE__ */ x(da, [["__scopeId", "data-v-0730aed0"]]), fa = /* @_
         `joy-wrapper--align-${e.align}`,
         `joy-wrapper--direction-${e.direction}`,
         `joy-wrapper--wrap-${e.wrap}`,
+        `joy-wrapper--row-gap-${e.rowGap}`,
+        `joy-wrapper--column-gap-${e.columnGap}`,
         { "joy-wrapper--item-stretch": e.itemStretch },
         { "joy-wrapper--has-margin": !e.noMargin }
       ])
@@ -2709,7 +2764,7 @@ const ca = /* @__PURE__ */ x(da, [["__scopeId", "data-v-0730aed0"]]), fa = /* @_
     ], 2));
   }
 });
-const ya = /* @__PURE__ */ x(fa, [["__scopeId", "data-v-e2f29698"]]), va = ["role"], ma = /* @__PURE__ */ j({
+const pa = /* @__PURE__ */ $(ma, [["__scopeId", "data-v-8a6c4326"]]), ga = ["role"], ha = /* @__PURE__ */ k({
   __name: "VJoyTag",
   props: {
     /** Text injected within the tag */
@@ -2748,7 +2803,7 @@ const ya = /* @__PURE__ */ x(fa, [["__scopeId", "data-v-e2f29698"]]), va = ["rol
   },
   emits: ["selected", "remove", "click"],
   setup(e, { emit: l }) {
-    const t = e, o = ["primary", "secondary"], n = O(() => ({
+    const t = e, o = ["primary", "secondary"], n = I(() => ({
       "joy-tag": !0,
       "joy-tag__selected": t.selected,
       "joy-tag__selectable": t.selectable || t.link,
@@ -2767,24 +2822,24 @@ const ya = /* @__PURE__ */ x(fa, [["__scopeId", "data-v-e2f29698"]]), va = ["rol
       role: e.link || e.selectable ? "button" : void 0,
       onClick: s
     }, [
-      e.draggable ? (y(), I(q, {
+      e.draggable ? (y(), O(q, {
         key: 0,
         class: "joy-tag__drag",
         name: "drag",
         size: "xxsmall"
       })) : g("", !0),
       L(" " + C(e.label) + " ", 1),
-      e.removable ? (y(), I(q, {
+      e.removable ? (y(), O(q, {
         key: 1,
         class: "joy-tag__removable",
         name: "cross",
         size: "xxsmall",
         onClick: pt(r, ["stop"])
       }, null, 8, ["onClick"])) : g("", !0)
-    ], 10, va));
+    ], 10, ga));
   }
 });
-const nt = /* @__PURE__ */ x(ma, [["__scopeId", "data-v-01b9f7cc"]]), pa = /* @__PURE__ */ j({
+const nt = /* @__PURE__ */ $(ha, [["__scopeId", "data-v-01b9f7cc"]]), ba = /* @__PURE__ */ k({
   __name: "VJoyTagsList",
   props: {
     align: {
@@ -2800,54 +2855,64 @@ const nt = /* @__PURE__ */ x(ma, [["__scopeId", "data-v-01b9f7cc"]]), pa = /* @_
         return [];
       },
       required: !0
+    },
+    /** You can either pass this property to make all generated tags removable, or pass the `removable: true` to each tag in "tags" prop. */
+    removable: {
+      type: Boolean,
+      default: !1
     }
   },
-  emits: ["update:modelValue"],
+  emits: ["update:modelValue", "removeTag"],
   setup(e, { emit: l }) {
     const t = e;
-    function o(r) {
-      var s;
-      return (s = t.modelValue) == null ? void 0 : s.includes(r.value);
+    function o(s) {
+      var a;
+      return t.removable ? !1 : (a = t.modelValue) == null ? void 0 : a.includes(s.value);
     }
-    function n(r, s) {
-      let a = [];
-      r.selected && !o(s) ? a = [...t.modelValue || [], s.value] : a = (t.modelValue || []).filter((d) => d !== s.value), l("update:modelValue", a);
+    function n(s, a) {
+      let d = [];
+      s.selected && !o(a) ? d = [...t.modelValue || [], a.value] : d = (t.modelValue || []).filter((m) => m !== a.value), l("update:modelValue", d);
     }
-    return (r, s) => (y(), p("div", {
+    function r(s) {
+      l("removeTag", s.value);
+    }
+    return (s, a) => (y(), p("div", {
       class: w(["joy-tags-list", `joy-tags-list--${e.align}`])
     }, [
-      (y(!0), p(Q, null, se(e.tags, (a) => (y(), I(V(nt), H({
-        key: a.value,
-        selectable: !!e.modelValue
-      }, a, {
-        selected: o(a),
-        onSelected: (d) => n(d, a)
-      }), null, 16, ["selectable", "selected", "onSelected"]))), 128))
+      (y(!0), p(H, null, se(e.tags, (d) => (y(), O(x(nt), W({
+        key: d.value,
+        selectable: !!e.modelValue && !e.removable
+      }, d, {
+        removable: e.removable,
+        selected: o(d),
+        onRemove: r,
+        onSelected: (m) => n(m, d)
+      }), null, 16, ["selectable", "removable", "selected", "onSelected"]))), 128))
     ], 2));
   }
 });
-const ga = /* @__PURE__ */ x(pa, [["__scopeId", "data-v-598cca84"]]), ha = { class: "joy-template__wrapper" }, ba = {
+const _a = /* @__PURE__ */ $(ba, [["__scopeId", "data-v-510c6367"]]), wa = { class: "joy-template__wrapper" }, Sa = {
   key: 0,
   class: "joy-template__heading"
-}, _a = {
+}, ja = {
   key: 0,
   class: "joy-template-slot-back"
-}, wa = { class: "joy-template__heading___headings" }, Sa = {
+}, ka = { class: "joy-template__heading___headings" }, $a = {
   key: 0,
   class: "joy-template-slot-title"
-}, ka = {
+}, Va = {
   key: 1,
   class: "joy-template-slot-subtitle"
-}, ja = {
+}, xa = {
   key: 1,
   class: "joy-template-slot-actions"
-}, $a = {
+}, Ia = {
   key: 0,
   class: "joy-template-slot-main"
-}, Va = {
+}, Oa = {
   key: 1,
   class: "joy-template-slot-sidebar"
-}, xa = /* @__PURE__ */ j({
+}, Ca = /* @__PURE__ */ k({
   __name: "VJoyTemplate",
   props: {
     full: { type: Boolean, default: !1 },
@@ -2862,28 +2927,28 @@ const ga = /* @__PURE__ */ x(pa, [["__scopeId", "data-v-598cca84"]]), ha = { cla
     }
   },
   setup(e) {
-    const l = e, t = Z(), o = O(() => !!t["template-back"] || !!t["template-title"] || !!t["template-subtitle"] || !!t["template-actions"]);
+    const l = e, t = Z(), o = I(() => !!t["template-back"] || !!t["template-title"] || !!t["template-subtitle"] || !!t["template-actions"]);
     return (n, r) => (y(), p("main", {
       class: w(["joy-template", { "joy-template--full": e.full, "joy-template--loading": e.loading }])
     }, [
-      _("div", ha, [
-        o.value ? (y(), p("div", ba, [
-          V(t)["template-back"] ? (y(), p("div", _a, [
+      b("div", wa, [
+        o.value ? (y(), p("div", Sa, [
+          x(t)["template-back"] ? (y(), p("div", ja, [
             h(n.$slots, "template-back", {}, void 0, !0)
           ])) : g("", !0),
-          _("div", wa, [
-            V(t)["template-title"] ? (y(), p("div", Sa, [
+          b("div", ka, [
+            x(t)["template-title"] ? (y(), p("div", $a, [
               h(n.$slots, "template-title", {}, void 0, !0)
             ])) : g("", !0),
-            V(t)["template-subtitle"] ? (y(), p("div", ka, [
+            x(t)["template-subtitle"] ? (y(), p("div", Va, [
               h(n.$slots, "template-subtitle", {}, void 0, !0)
             ])) : g("", !0)
           ]),
-          V(t)["template-actions"] ? (y(), p("div", ja, [
+          x(t)["template-actions"] ? (y(), p("div", xa, [
             h(n.$slots, "template-actions", {}, void 0, !0)
           ])) : g("", !0)
         ])) : g("", !0),
-        _("div", {
+        b("div", {
           class: w([
             "joy-template__content",
             {
@@ -2891,15 +2956,15 @@ const ga = /* @__PURE__ */ x(pa, [["__scopeId", "data-v-598cca84"]]), ha = { cla
             }
           ])
         }, [
-          n.$slots["template-main"] ? (y(), p("div", $a, [
+          n.$slots["template-main"] ? (y(), p("div", Ia, [
             h(n.$slots, "template-main", {}, void 0, !0)
           ])) : g("", !0),
-          n.$slots["template-sidebar"] ? (y(), p("div", Va, [
+          n.$slots["template-sidebar"] ? (y(), p("div", Oa, [
             h(n.$slots, "template-sidebar", {}, void 0, !0)
           ])) : g("", !0)
         ], 2)
       ]),
-      e.loading ? (y(), I(_e, {
+      e.loading ? (y(), O(_e, {
         key: 0,
         overlay: "",
         color: e.loadingColor
@@ -2912,13 +2977,13 @@ const ga = /* @__PURE__ */ x(pa, [["__scopeId", "data-v-598cca84"]]), ha = { cla
     ], 2));
   }
 });
-const Ia = /* @__PURE__ */ x(xa, [["__scopeId", "data-v-a2355e4b"]]), Oa = ["aria-disabled"], Ca = { class: "joy-textarea_wrapper" }, Ba = ["id", "disabled", "name", "required", "minlength", "value"], La = {
+const Ba = /* @__PURE__ */ $(Ca, [["__scopeId", "data-v-a2355e4b"]]), La = ["aria-disabled"], Ea = { class: "joy-textarea_wrapper" }, Ja = ["id", "disabled", "name", "required", "minlength", "value"], za = {
   key: 0,
   class: "joy-textarea_helpers"
-}, Ea = {
+}, Ta = {
   inheritAttrs: !1
-}, Ja = /* @__PURE__ */ j({
-  ...Ea,
+}, Pa = /* @__PURE__ */ k({
+  ...Ta,
   __name: "VJoyTextarea",
   props: {
     disabled: {
@@ -2953,6 +3018,11 @@ const Ia = /* @__PURE__ */ x(xa, [["__scopeId", "data-v-a2355e4b"]]), Oa = ["ari
       type: String,
       default: ""
     },
+    modelModifiers: {
+      default: () => ({
+        lazy: !1
+      })
+    },
     autogrow: {
       type: Boolean,
       default: !1
@@ -2967,11 +3037,14 @@ const Ia = /* @__PURE__ */ x(xa, [["__scopeId", "data-v-a2355e4b"]]), Oa = ["ari
   },
   emits: ["update:modelValue"],
   setup(e, { expose: l, emit: t }) {
-    const o = e, n = b(), { triggerResize: r } = yl({
+    const o = e, n = _(), { triggerResize: r } = pl({
       element: o.autogrow ? n : void 0
-    }), s = b(!1), a = b(!1), d = O(() => o.maxlength ? o.modelValue.length > o.maxlength : !1), m = O(() => o.minlength ? o.modelValue.length < o.minlength : !1), u = {
+    }), s = _(!1), a = _(!1), d = I(() => o.maxlength ? o.modelValue.length > o.maxlength : !1), m = I(() => o.minlength ? o.modelValue.length < o.minlength : !1), u = {
       onInput: (v) => {
-        t("update:modelValue", v.target.value), r();
+        o.modelModifiers.lazy || t("update:modelValue", v.target.value), r();
+      },
+      onChange: (v) => {
+        o.modelModifiers.lazy && t("update:modelValue", v.target.value);
       },
       onBlur: () => {
         a.value = !1, s.value = d.value || m.value;
@@ -2996,7 +3069,7 @@ const Ia = /* @__PURE__ */ x(xa, [["__scopeId", "data-v-a2355e4b"]]), Oa = ["ari
         }
       ])
     }, [
-      R(V(U), {
+      R(x(G), {
         for: e.id,
         required: e.required && e.requiredMark,
         "optional-label": e.optionalLabel,
@@ -3009,8 +3082,8 @@ const Ia = /* @__PURE__ */ x(xa, [["__scopeId", "data-v-a2355e4b"]]), Oa = ["ari
         ]),
         _: 3
       }, 8, ["for", "required", "optional-label", "size"]),
-      _("div", Ca, [
-        _("textarea", H(v.$attrs, {
+      b("div", Ea, [
+        b("textarea", W(v.$attrs, {
           id: e.id,
           ref_key: "textarea",
           ref: n,
@@ -3022,18 +3095,20 @@ const Ia = /* @__PURE__ */ x(xa, [["__scopeId", "data-v-a2355e4b"]]), Oa = ["ari
           value: e.modelValue,
           onInput: i[0] || (i[0] = //@ts-ignore
           (...c) => u.onInput && u.onInput(...c)),
-          onFocus: i[1] || (i[1] = //@ts-ignore
+          onChange: i[1] || (i[1] = //@ts-ignore
+          (...c) => u.onChange && u.onChange(...c)),
+          onFocus: i[2] || (i[2] = //@ts-ignore
           (...c) => u.onFocus && u.onFocus(...c)),
-          onBlur: i[2] || (i[2] = //@ts-ignore
+          onBlur: i[3] || (i[3] = //@ts-ignore
           (...c) => u.onBlur && u.onBlur(...c))
-        }), null, 16, Ba)
+        }), null, 16, Ja)
       ]),
-      e.minlength || e.maxlength ? (y(), p("div", La, [
+      e.minlength || e.maxlength ? (y(), p("div", za, [
         e.minlength ? (y(), p("p", {
           key: 0,
           class: w(["joy-textarea-min", { "joy-textarea-min-invalid": e.invalid }])
         }, [
-          m.value ? g("", !0) : (y(), I(q, {
+          m.value ? g("", !0) : (y(), O(q, {
             key: 0,
             name: "check",
             color: "neutral",
@@ -3046,23 +3121,23 @@ const Ia = /* @__PURE__ */ x(xa, [["__scopeId", "data-v-a2355e4b"]]), Oa = ["ari
           class: w(["joy-textarea-count", { "joy-textarea-count-invalid": d.value }])
         }, C(e.modelValue.length + "/" + e.maxlength), 3)) : g("", !0)
       ])) : g("", !0)
-    ], 10, Oa));
+    ], 10, La));
   }
 });
-const Ta = /* @__PURE__ */ x(Ja, [["__scopeId", "data-v-d0d2c93e"]]), it = (e) => (Re("data-v-cf79d999"), e = e(), De(), e), za = { class: "joy-toggle__wrapper" }, Pa = ["name", "disabled", "checked", "required", "aria-checked", "value"], qa = { class: "joy-toggle__content" }, Aa = /* @__PURE__ */ it(() => /* @__PURE__ */ _("span", { class: "joy-toggle__symbol" }, null, -1)), Fa = { class: "joy-toggle__content-label" }, Na = /* @__PURE__ */ it(() => /* @__PURE__ */ _("span", { class: "joy-toggle__smile" }, [
-  /* @__PURE__ */ _("svg", {
+const qa = /* @__PURE__ */ $(Pa, [["__scopeId", "data-v-1d2165ca"]]), it = (e) => (Re("data-v-cf79d999"), e = e(), De(), e), Aa = { class: "joy-toggle__wrapper" }, Fa = ["name", "disabled", "checked", "required", "aria-checked", "value"], Ma = { class: "joy-toggle__content" }, Na = /* @__PURE__ */ it(() => /* @__PURE__ */ b("span", { class: "joy-toggle__symbol" }, null, -1)), Ra = { class: "joy-toggle__content-label" }, Da = /* @__PURE__ */ it(() => /* @__PURE__ */ b("span", { class: "joy-toggle__smile" }, [
+  /* @__PURE__ */ b("svg", {
     width: "18",
     height: "10",
     viewBox: "0 0 18 10",
     fill: "currentColor",
     xmlns: "http://www.w3.org/2000/svg"
   }, [
-    /* @__PURE__ */ _("path", {
+    /* @__PURE__ */ b("path", {
       d: "M9.0237 9.14856C15.7144 9.14856 17.8736 2.22231 17.9649 1.91853L17.9345 1.94891C18.1778 1.15908 17.7216 0.308485 16.9309 0.0654591C16.1402 -0.177566 15.2886 0.278108 15.0453 1.06794C14.9845 1.25021 13.5551 6.11073 8.99328 6.11073C4.43147 6.11073 3.03249 1.43248 2.97167 1.21983C2.75878 0.399622 1.90724 -0.0560541 1.11652 0.156593C0.295397 0.369241 -0.160787 1.18945 0.0520982 2.00967C0.721165 4.4703 3.48869 9.14856 9.0237 9.14856Z",
       fill: "currentColor"
     })
   ])
-], -1)), Ma = /* @__PURE__ */ j({
+], -1)), Ha = /* @__PURE__ */ k({
   __name: "VJoyToggle",
   props: {
     modelValue: {
@@ -3096,7 +3171,7 @@ const Ta = /* @__PURE__ */ x(Ja, [["__scopeId", "data-v-d0d2c93e"]]), it = (e) =
   },
   emits: ["update:modelValue"],
   setup(e, { emit: l }) {
-    const t = b(!1), o = {
+    const t = _(!1), o = {
       onChange: (n) => {
         const r = n.target.checked;
         l("update:modelValue", r);
@@ -3108,8 +3183,8 @@ const Ta = /* @__PURE__ */ x(Ja, [["__scopeId", "data-v-d0d2c93e"]]), it = (e) =
         t.value = !1;
       }
     };
-    return (n, r) => (y(), p("div", za, [
-      _("label", {
+    return (n, r) => (y(), p("div", Aa, [
+      b("label", {
         class: w([
           "joy-toggle",
           {
@@ -3119,7 +3194,7 @@ const Ta = /* @__PURE__ */ x(Ja, [["__scopeId", "data-v-d0d2c93e"]]), it = (e) =
           }
         ])
       }, [
-        _("input", {
+        b("input", {
           ref: "input",
           type: "checkbox",
           class: "joy-toggle__input",
@@ -3136,89 +3211,91 @@ const Ta = /* @__PURE__ */ x(Ja, [["__scopeId", "data-v-d0d2c93e"]]), it = (e) =
           (...s) => o.onFocus && o.onFocus(...s)),
           onBlur: r[2] || (r[2] = //@ts-ignore
           (...s) => o.onBlur && o.onBlur(...s))
-        }, null, 40, Pa),
-        _("p", qa, [
-          Aa,
-          _("span", Fa, [
+        }, null, 40, Fa),
+        b("p", Ma, [
+          Na,
+          b("span", Ra, [
             h(n.$slots, "default", {}, () => [
               L(C(e.label), 1)
             ], !0)
           ]),
-          Na
+          Da
         ])
       ], 2)
     ]));
   }
 });
-const Ra = /* @__PURE__ */ x(Ma, [["__scopeId", "data-v-cf79d999"]]), Da = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
+const Wa = /* @__PURE__ */ $(Ha, [["__scopeId", "data-v-cf79d999"]]), Ua = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
   __proto__: null,
-  VJoyAvatar: $t,
-  VJoyAvatarsList: xt,
-  VJoyBadge: Ct,
+  VJoyAvailability: bt,
+  VJoyAvatar: It,
+  VJoyAvatarsList: Ct,
+  VJoyBadge: Et,
   VJoyButton: Ke,
   VJoyCheckbox: he,
-  VJoyCounter: el,
-  VJoyDropdown: no,
+  VJoyCounter: ol,
+  VJoyDropdown: so,
   VJoyDropdownList: lt,
   VJoyFormError: ot,
-  VJoyHighlight: yo,
+  VJoyHighlight: po,
   VJoyIcon: q,
-  VJoyInput: So,
-  VJoyLabel: U,
-  VJoyLink: Vo,
-  VJoyMultiCheckbox: Co,
-  VJoyPanel: Ao,
-  VJoyPanelSection: Do,
-  VJoyRadio: Qo,
-  VJoyRadioGroup: Xo,
+  VJoyInput: $o,
+  VJoyLabel: G,
+  VJoyLink: Oo,
+  VJoyMultiCheckbox: Eo,
+  VJoyPanel: No,
+  VJoyPanelSection: Uo,
+  VJoyRadio: Xo,
+  VJoyRadioGroup: la,
   VJoyScreenLoader: _e,
-  VJoySelect: na,
+  VJoySelect: sa,
   VJoySelectableItem: at,
-  VJoySelectableItemGroup: ca,
+  VJoySelectableItemGroup: va,
   VJoySpinner: ge,
   VJoyTag: nt,
-  VJoyTagsList: ga,
-  VJoyTemplate: Ia,
-  VJoyTextarea: Ta,
-  VJoyToggle: Ra,
-  VJoyWrapper: ya
-}, Symbol.toStringTag, { value: "Module" })), Wa = {
+  VJoyTagsList: _a,
+  VJoyTemplate: Ba,
+  VJoyTextarea: qa,
+  VJoyToggle: Wa,
+  VJoyWrapper: pa
+}, Symbol.toStringTag, { value: "Module" })), Ka = {
   install: (e) => {
-    Object.entries(Da).forEach(([l, t]) => {
+    Object.entries(Ua).forEach(([l, t]) => {
       e.component(l, t);
     });
   }
 };
 export {
-  Wa as JoyVuePlugin,
-  $t as VJoyAvatar,
-  xt as VJoyAvatarsList,
-  Ct as VJoyBadge,
+  Ka as JoyVuePlugin,
+  bt as VJoyAvailability,
+  It as VJoyAvatar,
+  Ct as VJoyAvatarsList,
+  Et as VJoyBadge,
   Ke as VJoyButton,
   he as VJoyCheckbox,
-  el as VJoyCounter,
-  no as VJoyDropdown,
+  ol as VJoyCounter,
+  so as VJoyDropdown,
   lt as VJoyDropdownList,
   ot as VJoyFormError,
-  yo as VJoyHighlight,
+  po as VJoyHighlight,
   q as VJoyIcon,
-  So as VJoyInput,
-  U as VJoyLabel,
-  Vo as VJoyLink,
-  Co as VJoyMultiCheckbox,
-  Ao as VJoyPanel,
-  Do as VJoyPanelSection,
-  Qo as VJoyRadio,
-  Xo as VJoyRadioGroup,
+  $o as VJoyInput,
+  G as VJoyLabel,
+  Oo as VJoyLink,
+  Eo as VJoyMultiCheckbox,
+  No as VJoyPanel,
+  Uo as VJoyPanelSection,
+  Xo as VJoyRadio,
+  la as VJoyRadioGroup,
   _e as VJoyScreenLoader,
-  na as VJoySelect,
+  sa as VJoySelect,
   at as VJoySelectableItem,
-  ca as VJoySelectableItemGroup,
+  va as VJoySelectableItemGroup,
   ge as VJoySpinner,
   nt as VJoyTag,
-  ga as VJoyTagsList,
-  Ia as VJoyTemplate,
-  Ta as VJoyTextarea,
-  Ra as VJoyToggle,
-  ya as VJoyWrapper
+  _a as VJoyTagsList,
+  Ba as VJoyTemplate,
+  qa as VJoyTextarea,
+  Wa as VJoyToggle,
+  pa as VJoyWrapper
 };