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

package/dist/joy-vue.js

@@ -1,6 +1,6 @@
-import { defineComponent as p, openBlock as o, createElementBlock as d, normalizeClass as b, useAttrs as O, computed as V, createBlock as J, resolveDynamicComponent as E, unref as m, withCtx as q, createCommentVNode as y, createElementVNode as u, renderSlot as c, ref as S, createTextVNode as B, toDisplayString as $, mergeProps as L, createVNode as R, pushScopeId as z, popScopeId as M, useSlots as w, onBeforeMount as W, Fragment as A, renderList as F, normalizeStyle as D, onMounted as N, watch as Z, createSlots as K } from "vue";
+import { defineComponent as p, openBlock as o, createElementBlock as d, normalizeClass as b, useAttrs as O, computed as J, createBlock as B, resolveDynamicComponent as E, unref as m, withCtx as I, createCommentVNode as y, createElementVNode as u, renderSlot as c, ref as S, createTextVNode as q, toDisplayString as $, mergeProps as L, createVNode as R, pushScopeId as z, popScopeId as M, useSlots as w, onBeforeMount as W, Fragment as A, renderList as F, normalizeStyle as D, onMounted as N, watch as Z, createSlots as K } from "vue";
 const Q = ["teal", "white"], X = /* @__PURE__ */ p({
-  __name: "JoySpinner",
+  __name: "VJoySpinner",
   props: {
     color: {
       type: String,
@@ -10,18 +10,18 @@ const Q = ["teal", "white"], X = /* @__PURE__ */ p({
     }
   },
   setup(e) {
-    return (l, a) => (o(), d("div", {
+    return (a, l) => (o(), d("div", {
       class: b(["joy-spinner", `joy-spinner_${e.color}`])
     }, null, 2));
   }
 });
-const _ = (e, l) => {
-  const a = e.__vccOpts || e;
-  for (const [t, i] of l)
-    a[t] = i;
-  return a;
-}, P = /* @__PURE__ */ _(X, [["__scopeId", "data-v-b633f633"]]), Y = ["primary", "secondary"], ee = ["neutral", "success", "info", "warning", "error"], te = ["main", "admin", "ghost"], ae = [...Y, ...te], le = ["large", "medium", "small", "xsmall", "xxsmall"], ne = ["xxsmall", "xsmall", "small"], oe = ["name", "size"], ie = { class: "joy-button--slot" }, de = /* @__PURE__ */ p({
-  __name: "JoyButton",
+const _ = (e, a) => {
+  const l = e.__vccOpts || e;
+  for (const [t, i] of a)
+    l[t] = i;
+  return l;
+}, P = /* @__PURE__ */ _(X, [["__scopeId", "data-v-616a29d0"]]), Y = ["primary", "secondary"], ee = ["neutral", "success", "info", "warning", "error"], te = ["main", "admin", "ghost"], le = [...Y, ...te], ae = ["large", "medium", "small", "xsmall", "xxsmall"], ne = ["xxsmall", "xsmall", "small"], oe = ["name", "size"], ie = { class: "joy-button--slot" }, de = /* @__PURE__ */ p({
+  __name: "VJoyButton",
   props: {
     /**
      * If you only need a button with an icon. To keep your component accessible, you can give a text as slot, it will be used as title and aria-label.
@@ -43,7 +43,7 @@ const _ = (e, l) => {
       type: String,
       default: "primary",
       validator(e) {
-        return ae.includes(e);
+        return le.includes(e);
       }
     },
     /** Button or Link size */
@@ -51,7 +51,7 @@ const _ = (e, l) => {
       type: String,
       default: "medium",
       validator(e) {
-        return le.includes(e);
+        return ae.includes(e);
       }
     },
     /** Override the icon size. Default to xsmall */
@@ -64,9 +64,9 @@ const _ = (e, l) => {
     }
   },
   setup(e) {
-    const l = e, a = O(), t = V(() => ["white", "ghost", "secondary"].includes(l.variant) ? "teal" : "white");
-    return (i, s) => (o(), J(E(m(a).href ? "a" : "button"), {
-      disabled: e.loading || m(a).disabled,
+    const a = e, l = O(), t = J(() => ["white", "ghost", "secondary"].includes(a.variant) ? "teal" : "white");
+    return (i, s) => (o(), B(E(m(l).href ? "a" : "button"), {
+      disabled: e.loading || m(l).disabled,
       class: b([
         "joy-button",
         `joy-button_${e.variant}`,
@@ -77,14 +77,14 @@ const _ = (e, l) => {
         }
       ])
     }, {
-      default: q(() => [
+      default: I(() => [
         e.icon ? (o(), d("joy-icon", {
           key: 0,
           name: e.icon,
           size: e.iconSize,
           lazy: !1
         }, null, 8, oe)) : y("", !0),
-        e.loading ? (o(), J(P, {
+        e.loading ? (o(), B(P, {
           key: 1,
           color: m(t)
         }, null, 8, ["color"])) : y("", !0),
@@ -96,8 +96,8 @@ const _ = (e, l) => {
     }, 8, ["disabled", "class"]));
   }
 });
-const ue = /* @__PURE__ */ _(de, [["__scopeId", "data-v-958cc680"]]), se = ["aria-checked", "aria-hidden"], re = ["id", "name", "disabled", "checked", "required", "aria-checked", "value", "indeterminate"], ce = { class: "joy-checkbox__content-wrapper" }, ye = { class: "joy-checkbox__content" }, me = /* @__PURE__ */ p({
-  __name: "JoyCheckbox",
+const ue = /* @__PURE__ */ _(de, [["__scopeId", "data-v-638792d7"]]), se = ["aria-checked", "aria-hidden"], re = ["id", "name", "disabled", "checked", "required", "aria-checked", "value", "indeterminate"], ce = { class: "joy-checkbox__content-wrapper" }, ye = { class: "joy-checkbox__content" }, me = /* @__PURE__ */ p({
+  __name: "VJoyCheckbox",
   props: {
     /** Can't be used in addition of v-model. See usage : https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/checkbox#indeterminate_state_checkboxes */
     indeterminate: {
@@ -135,14 +135,14 @@ const ue = /* @__PURE__ */ _(de, [["__scopeId", "data-v-958cc680"]]), se = ["ari
     }
   },
   emits: ["update:checked"],
-  setup(e, { expose: l, emit: a }) {
+  setup(e, { expose: a, emit: l }) {
     const t = e, i = S(), s = S(t.indeterminate), f = {
       onChange: (n) => {
         const r = n.target.checked;
-        s.value = !1, a("update:checked", r);
+        s.value = !1, l("update:checked", r);
       }
     };
-    return l({
+    return a({
       isIndeterminate: s
     }), (n, r) => (o(), d("div", {
       "aria-checked": e.checked,
@@ -176,7 +176,7 @@ const ue = /* @__PURE__ */ _(de, [["__scopeId", "data-v-958cc680"]]), se = ["ari
         }, null, 40, re),
         u("div", ce, [
           c(n.$slots, "default", {}, () => [
-            B($(e.label), 1)
+            q($(e.label), 1)
           ], !0),
           u("div", ye, [
             c(n.$slots, "checkbox-content", {}, void 0, !0)
@@ -186,7 +186,7 @@ const ue = /* @__PURE__ */ _(de, [["__scopeId", "data-v-958cc680"]]), se = ["ari
     ], 8, se));
   }
 });
-const T = /* @__PURE__ */ _(me, [["__scopeId", "data-v-7251a11b"]]), H = (e) => (z("data-v-47a76942"), e = e(), M(), e), fe = { class: "joy-counter" }, ve = { class: "joy-counter__wrapper" }, be = ["aria-label", "disabled"], ge = /* @__PURE__ */ H(() => /* @__PURE__ */ u("joy-icon", {
+const T = /* @__PURE__ */ _(me, [["__scopeId", "data-v-d6496829"]]), H = (e) => (z("data-v-01418e7e"), e = e(), M(), e), fe = { class: "joy-counter" }, ve = { class: "joy-counter__wrapper" }, be = ["aria-label", "disabled"], ge = /* @__PURE__ */ H(() => /* @__PURE__ */ u("joy-icon", {
   name: "minus",
   color: "teal",
   lazy: !1
@@ -202,7 +202,7 @@ const T = /* @__PURE__ */ _(me, [["__scopeId", "data-v-7251a11b"]]), H = (e) =>
   key: 0,
   class: "joy-counter_error"
 }, $e = /* @__PURE__ */ p({
-  __name: "JoyCounter",
+  __name: "VJoyCounter",
   props: {
     /** Removes any interactivity */
     disabled: {
@@ -267,53 +267,53 @@ const T = /* @__PURE__ */ _(me, [["__scopeId", "data-v-7251a11b"]]), H = (e) =>
     }
   },
   emits: ["update:modelValue"],
-  setup(e, { expose: l, emit: a }) {
+  setup(e, { expose: a, emit: l }) {
     const t = e, i = S(!1);
     function s() {
       const v = r(!1);
-      v >= 0 ? a("update:modelValue", v <= t.min ? t.min : v) : a("update:modelValue", 0), n();
+      v >= 0 ? l("update:modelValue", v <= t.min ? t.min : v) : l("update:modelValue", 0), n();
     }
     function f() {
       const v = r();
-      t.max && v <= t.max ? a("update:modelValue", v >= t.max ? t.max : v) : t.max && v > t.max ? a("update:modelValue", t.max) : a("update:modelValue", v), n();
+      t.max && v <= t.max ? l("update:modelValue", v >= t.max ? t.max : v) : t.max && v > t.max ? l("update:modelValue", t.max) : l("update:modelValue", v), n();
     }
     function n() {
       i.value = !g();
     }
     function r(v = !0) {
-      const h = t.step.toString().split("."), x = h.length === 2 ? h[1].length : 0;
-      return parseFloat(v ? (t.modelValue + t.step).toFixed(x) : (t.modelValue - t.step).toFixed(x));
+      const h = t.step.toString().split("."), V = h.length === 2 ? h[1].length : 0;
+      return parseFloat(v ? (t.modelValue + t.step).toFixed(V) : (t.modelValue - t.step).toFixed(V));
     }
     function g() {
-      return k() && I();
+      return k() && x();
     }
     function k() {
       return !t.max || t.modelValue <= t.max;
     }
-    function I() {
+    function x() {
       return t.min <= t.modelValue;
     }
     const j = {
       onInput: (v) => {
-        a("update:modelValue", +v.target.value || 0), i.value = !1;
+        l("update:modelValue", +v.target.value || 0), i.value = !1;
       },
       onBlur: () => {
         n();
       }
     };
-    return l({
+    return a({
       props: t
     }), (v, h) => (o(), d("div", fe, [
-      e.label ? (o(), J(m(C), {
+      e.label ? (o(), B(m(C), {
         key: 0,
         for: e.id,
         required: e.required && e.requiredMark,
         "optional-label": e.optionalLabel,
         size: e.labelSize
       }, {
-        default: q(() => [
+        default: I(() => [
           c(v.$slots, "default", {}, () => [
-            B($(e.label), 1)
+            q($(e.label), 1)
           ], !0)
         ]),
         _: 3
@@ -340,9 +340,9 @@ const T = /* @__PURE__ */ _(me, [["__scopeId", "data-v-7251a11b"]]), H = (e) =>
           value: e.modelValue
         }, v.$attrs, {
           onInput: h[0] || (h[0] = //@ts-ignore
-          (...x) => j.onInput && j.onInput(...x)),
+          (...V) => j.onInput && j.onInput(...V)),
           onBlur: h[1] || (h[1] = //@ts-ignore
-          (...x) => j.onBlur && j.onBlur(...x))
+          (...V) => j.onBlur && j.onBlur(...V))
         }), null, 16, pe),
         u("button", {
           class: "joy-counter__increment",
@@ -358,11 +358,11 @@ const T = /* @__PURE__ */ _(me, [["__scopeId", "data-v-7251a11b"]]), H = (e) =>
     ]));
   }
 });
-const xe = /* @__PURE__ */ _($e, [["__scopeId", "data-v-47a76942"]]), Ie = (e) => (z("data-v-d693f93c"), e = e(), M(), e), qe = ["aria-hidden"], Be = /* @__PURE__ */ Ie(() => /* @__PURE__ */ u("joy-icon", {
+const Ve = /* @__PURE__ */ _($e, [["__scopeId", "data-v-01418e7e"]]), xe = (e) => (z("data-v-50e209d6"), e = e(), M(), e), Ie = ["aria-hidden"], qe = /* @__PURE__ */ xe(() => /* @__PURE__ */ u("joy-icon", {
   "custom-class": "joy-icon-error",
   name: "warning-triangle"
-}, null, -1)), Je = /* @__PURE__ */ p({
-  __name: "JoyFormError",
+}, null, -1)), Be = /* @__PURE__ */ p({
+  __name: "VJoyFormError",
   props: {
     /** In some cases you'll need to inject the error in the DOM but hide it. Visible by default */
     visible: {
@@ -373,37 +373,37 @@ const xe = /* @__PURE__ */ _($e, [["__scopeId", "data-v-47a76942"]]), Ie = (e) =
     noHtmlErrorText: String
   },
   setup(e) {
-    return (l, a) => (o(), d("div", {
+    return (a, l) => (o(), d("div", {
       "aria-hidden": e.visible,
       class: b(["joy-form-error", { "joy-has-error": e.visible }]),
       role: "alert"
     }, [
-      Be,
+      qe,
       u("div", null, [
-        c(l.$slots, "default", {}, () => [
-          B($(e.noHtmlErrorText), 1)
+        c(a.$slots, "default", {}, () => [
+          q($(e.noHtmlErrorText), 1)
         ], !0)
       ])
-    ], 10, qe));
+    ], 10, Ie));
   }
 });
-const G = /* @__PURE__ */ _(Je, [["__scopeId", "data-v-d693f93c"]]);
-function Ve(e) {
-  let l;
+const G = /* @__PURE__ */ _(Be, [["__scopeId", "data-v-50e209d6"]]);
+function Je(e) {
+  let a;
   switch (e) {
     case "error":
-      l = "warning-triangle";
+      a = "warning-triangle";
       break;
     case "success":
-      l = "check";
+      a = "check";
       break;
     default:
-      l = "info-circle";
+      a = "info-circle";
   }
-  return l;
+  return a;
 }
 const Ce = [...ee], we = ["name"], Le = { class: "joy-highlight--text" }, ze = /* @__PURE__ */ p({
-  __name: "JoyHighlight",
+  __name: "VJoyHighlight",
   props: {
     accent: {
       type: Boolean,
@@ -422,9 +422,9 @@ const Ce = [...ee], we = ["name"], Le = { class: "joy-highlight--text" }, ze = /
       }
     }
   },
-  setup(e, { expose: l }) {
-    const a = e, t = V(() => a.icon ? a.icon : Ve(a.level));
-    return l({
+  setup(e, { expose: a }) {
+    const l = e, t = J(() => l.icon ? l.icon : Je(l.level));
+    return a({
       getRelevantIcon: t
     }), (i, s) => (o(), d("div", {
       class: b([
@@ -449,14 +449,14 @@ const Ce = [...ee], we = ["name"], Le = { class: "joy-highlight--text" }, ze = /
     ], 2));
   }
 });
-const Me = /* @__PURE__ */ _(ze, [["__scopeId", "data-v-15d3fa11"]]), Ee = ["small", "medium", "large"], Ne = {
+const Me = /* @__PURE__ */ _(ze, [["__scopeId", "data-v-a0ff7a60"]]), Ee = ["small", "medium", "large"], Ne = {
   key: 0,
   class: "joy-label-required"
 }, Te = {
   key: 1,
   class: "joy-label-optional"
 }, Oe = /* @__PURE__ */ p({
-  __name: "JoyLabel",
+  __name: "VJoyLabel",
   props: {
     size: {
       type: String,
@@ -478,11 +478,11 @@ const Me = /* @__PURE__ */ _(ze, [["__scopeId", "data-v-15d3fa11"]]), Ee = ["sma
     }
   },
   setup(e) {
-    return (l, a) => (o(), J(E(e.tagName), L({
+    return (a, l) => (o(), B(E(e.tagName), L({
       class: ["joy-label", `joy-label--${e.size}`]
-    }, l.$attrs), {
-      default: q(() => [
-        c(l.$slots, "default", {}, void 0, !0),
+    }, a.$attrs), {
+      default: I(() => [
+        c(a.$slots, "default", {}, void 0, !0),
         e.required ? (o(), d("span", Ne, "*")) : y("", !0),
         e.optionalLabel ? (o(), d("span", Te, "- " + $(e.optionalLabel), 1)) : y("", !0)
       ]),
@@ -490,8 +490,8 @@ const Me = /* @__PURE__ */ _(ze, [["__scopeId", "data-v-15d3fa11"]]), Ee = ["sma
     }, 16, ["class"]));
   }
 });
-const C = /* @__PURE__ */ _(Oe, [["__scopeId", "data-v-e3232407"]]), Re = ["large", "medium", "small"], Ae = ["id", "disabled", "type", "value"], Fe = ["name"], Pe = ["data-unit"], He = /* @__PURE__ */ p({
-  __name: "JoyInput",
+const C = /* @__PURE__ */ _(Oe, [["__scopeId", "data-v-1e682734"]]), Re = ["large", "medium", "small"], Ae = ["id", "disabled", "type", "value"], Fe = ["name"], Pe = ["data-unit"], He = /* @__PURE__ */ p({
+  __name: "VJoyInput",
   props: {
     disabled: {
       type: Boolean,
@@ -549,13 +549,13 @@ const C = /* @__PURE__ */ _(Oe, [["__scopeId", "data-v-e3232407"]]), Re = ["larg
     unit: String
   },
   emits: ["update:modelValue"],
-  setup(e, { emit: l }) {
-    const a = e, t = S(), i = S(), s = O(), f = w(), n = S(!1), r = V(() => a.clearable && a.modelValue.length > 0 && !a.unit), g = V(() => f.default && f.default()), k = V(() => {
+  setup(e, { emit: a }) {
+    const l = e, t = S(), i = S(), s = O(), f = w(), n = S(!1), r = J(() => l.clearable && l.modelValue.length > 0 && !l.unit), g = J(() => f.default && f.default()), k = J(() => {
       var v, h;
       return !!((v = i.value) != null && v.closest("joy-wrapper")) || !!((h = i.value) != null && h.closest(".joy-wrapper"));
-    }), I = S(a.type);
+    }), x = S(l.type);
     W(() => {
-      I.value = a.unit ? "number" : a.unit || "text";
+      x.value = l.unit ? "number" : l.unit || "text";
     });
     const j = {
       onFocus: () => {
@@ -566,16 +566,16 @@ const C = /* @__PURE__ */ _(Oe, [["__scopeId", "data-v-e3232407"]]), Re = ["larg
       },
       onInput: (v) => {
         let h = v.target.value;
-        l("update:modelValue", h);
+        a("update:modelValue", h);
       },
       clearValue: () => {
-        a.disabled || l("update:modelValue", "");
+        l.disabled || a("update:modelValue", "");
       }
     };
     return (v, h) => (o(), d("div", {
       ref_key: "root",
       ref: i,
-      class: b([`joy-input--${a.size}`])
+      class: b([`joy-input--${l.size}`])
     }, [
       u("div", {
         class: b([
@@ -588,16 +588,16 @@ const C = /* @__PURE__ */ _(Oe, [["__scopeId", "data-v-e3232407"]]), Re = ["larg
           }
         ])
       }, [
-        m(g) || e.label ? (o(), J(C, {
+        m(g) || e.label ? (o(), B(C, {
           key: 0,
           for: e.name,
           required: e.required && e.requiredMark,
           "optional-label": e.optionalLabel,
           size: e.labelSize
         }, {
-          default: q(() => [
+          default: I(() => [
             c(v.$slots, "default", {}, () => [
-              B($(e.label), 1)
+              q($(e.label), 1)
             ], !0)
           ]),
           _: 3
@@ -614,7 +614,7 @@ const C = /* @__PURE__ */ _(Oe, [["__scopeId", "data-v-e3232407"]]), Re = ["larg
           ])
         }, [
           u("input", L(v.$attrs, {
-            id: a.name,
+            id: l.name,
             ref_key: "input",
             ref: t,
             disabled: e.disabled,
@@ -624,14 +624,14 @@ const C = /* @__PURE__ */ _(Oe, [["__scopeId", "data-v-e3232407"]]), Re = ["larg
                 "joy-input--field-invalid": e.invalid
               }
             ],
-            type: I.value,
+            type: x.value,
             value: e.modelValue,
             onFocus: h[0] || (h[0] = //@ts-ignore
-            (...x) => j.onFocus && j.onFocus(...x)),
+            (...V) => j.onFocus && j.onFocus(...V)),
             onBlur: h[1] || (h[1] = //@ts-ignore
-            (...x) => j.onBlur && j.onBlur(...x)),
+            (...V) => j.onBlur && j.onBlur(...V)),
             onInput: h[2] || (h[2] = //@ts-ignore
-            (...x) => j.onInput && j.onInput(...x))
+            (...V) => j.onInput && j.onInput(...V))
           }), null, 16, Ae),
           m(r) ? (o(), d("joy-icon", {
             key: 0,
@@ -639,7 +639,7 @@ const C = /* @__PURE__ */ _(Oe, [["__scopeId", "data-v-e3232407"]]), Re = ["larg
             name: "cross",
             class: "joy-input--clear",
             onClick: h[3] || (h[3] = //@ts-ignore
-            (...x) => j.clearValue && j.clearValue(...x))
+            (...V) => j.clearValue && j.clearValue(...V))
           })) : y("", !0),
           e.icon && !e.clearable ? (o(), d("joy-icon", {
             key: 1,
@@ -657,8 +657,8 @@ const C = /* @__PURE__ */ _(Oe, [["__scopeId", "data-v-e3232407"]]), Re = ["larg
     ], 2));
   }
 });
-const Ge = /* @__PURE__ */ _(He, [["__scopeId", "data-v-023262dd"]]), Ue = ["teal", "white"], We = ["href"], De = ["color", "name"], Ze = /* @__PURE__ */ p({
-  __name: "JoyLink",
+const Ge = /* @__PURE__ */ _(He, [["__scopeId", "data-v-8258d6d7"]]), Ue = ["teal", "white"], We = ["href"], De = ["color", "name"], Ze = /* @__PURE__ */ p({
+  __name: "VJoyLink",
   props: {
     href: {
       type: String,
@@ -674,30 +674,30 @@ const Ge = /* @__PURE__ */ _(He, [["__scopeId", "data-v-023262dd"]]), Ue = ["tea
     icon: String
   },
   setup(e) {
-    const l = e, a = V(() => l.color === "white" ? "white" : "teal");
+    const a = e, l = J(() => a.color === "white" ? "white" : "teal");
     return (t, i) => (o(), d("a", L({ href: e.href }, t.$attrs, {
       class: ["joy-link", `joy-link_${e.color}`]
     }), [
       e.icon ? (o(), d("joy-icon", {
         key: 0,
-        color: m(a),
+        color: m(l),
         name: e.icon
       }, null, 8, De)) : y("", !0),
       c(t.$slots, "default", {}, void 0, !0)
     ], 16, We));
   }
 });
-const Ke = /* @__PURE__ */ _(Ze, [["__scopeId", "data-v-640ee9a6"]]), Qe = ["id"], Xe = {
+const Ke = /* @__PURE__ */ _(Ze, [["__scopeId", "data-v-7ef59bc8"]]), Qe = ["id"], Xe = {
   class: /* @__PURE__ */ b(["joy-multi-checkbox"])
 }, Ye = /* @__PURE__ */ p({
-  __name: "JoyMultiCheckbox",
+  __name: "VJoyMultiCheckbox",
   props: {
     options: {
       type: Array,
       required: !0,
       validator(e) {
-        const l = e.every((t) => Object.keys(t).includes("value")), a = e.every((t) => Object.keys(t).includes("label"));
-        return l && a;
+        const a = e.every((t) => Object.keys(t).includes("value")), l = e.every((t) => Object.keys(t).includes("label"));
+        return a && l;
       }
     },
     id: String,
@@ -727,33 +727,33 @@ const Ke = /* @__PURE__ */ _(Ze, [["__scopeId", "data-v-640ee9a6"]]), Qe = ["id"
     }
   },
   emits: ["update:value"],
-  setup(e, { emit: l }) {
-    const a = e;
+  setup(e, { emit: a }) {
+    const l = e;
     function t(s) {
-      return a.value.includes(s.value);
+      return l.value.includes(s.value);
     }
     function i(s, f) {
-      let n = [...a.value || []];
-      f ? n.push(s) : n.splice(n.indexOf(s), 1), l("update:value", n);
+      let n = [...l.value || []];
+      f ? n.push(s) : n.splice(n.indexOf(s), 1), a("update:value", n);
     }
     return (s, f) => (o(), d("fieldset", {
       id: e.id,
       class: "joy-multi-checkbox__wrapper"
     }, [
-      e.label ? (o(), J(m(C), {
+      e.label ? (o(), B(m(C), {
         key: 0,
         "tag-name": "legend",
         required: e.required && e.requiredMark,
         "optional-label": e.optionalLabel,
         size: e.labelSize
       }, {
-        default: q(() => [
-          B($(e.label), 1)
+        default: I(() => [
+          q($(e.label), 1)
         ]),
         _: 1
       }, 8, ["required", "optional-label", "size"])) : y("", !0),
       u("div", Xe, [
-        (o(!0), d(A, null, F(e.options, (n) => (o(), J(m(T), {
+        (o(!0), d(A, null, F(e.options, (n) => (o(), B(m(T), {
           id: n.id,
           key: n.id,
           name: n.name,
@@ -761,8 +761,8 @@ const Ke = /* @__PURE__ */ _(Ze, [["__scopeId", "data-v-640ee9a6"]]), Qe = ["id"
           checked: t(n),
           "onUpdate:checked": (r) => i(n.value, r)
         }, {
-          default: q(() => [
-            B($(n.label), 1)
+          default: I(() => [
+            q($(n.label), 1)
           ]),
           _: 2
         }, 1032, ["id", "name", "value", "checked", "onUpdate:checked"]))), 128))
@@ -770,9 +770,9 @@ const Ke = /* @__PURE__ */ _(Ze, [["__scopeId", "data-v-640ee9a6"]]), Qe = ["id"
     ], 8, Qe));
   }
 });
-const et = /* @__PURE__ */ _(Ye, [["__scopeId", "data-v-4a9e39e2"]]), tt = ["small", "medium", "large"], at = {
+const et = /* @__PURE__ */ _(Ye, [["__scopeId", "data-v-b2679b58"]]), tt = ["small", "medium", "large"], lt = {
   class: /* @__PURE__ */ b(["joy-panel__header"])
-}, lt = {
+}, at = {
   key: 0,
   class: "joy-panel__header-title"
 }, nt = {
@@ -782,7 +782,7 @@ const et = /* @__PURE__ */ _(Ye, [["__scopeId", "data-v-4a9e39e2"]]), tt = ["sma
   key: 2,
   class: "joy-panel__header-subtitle"
 }, it = { class: "joy-panel__body" }, dt = { class: "joy-panel__footer" }, ut = /* @__PURE__ */ p({
-  __name: "JoyPanel",
+  __name: "VJoyPanel",
   props: {
     flex: {
       type: String
@@ -800,24 +800,24 @@ const et = /* @__PURE__ */ _(Ye, [["__scopeId", "data-v-4a9e39e2"]]), tt = ["sma
     }
   },
   setup(e) {
-    const l = w(), a = S(), t = V(() => {
+    const a = w(), l = S(), t = J(() => {
       var i;
-      return (i = a.value) == null ? void 0 : i.closest(".joy-wrapper");
+      return (i = l.value) == null ? void 0 : i.closest(".joy-wrapper");
     });
     return (i, s) => (o(), d("section", {
       ref_key: "panel",
-      ref: a,
+      ref: l,
       style: D({ flex: e.flex }),
       class: b(["joy-panel", `joy-panel--${e.padding}`, { "joy-panel--no-margin": e.noMargin || m(t) }])
     }, [
-      u("header", at, [
-        m(l)["panel-title"] ? (o(), d("div", lt, [
+      u("header", lt, [
+        m(a)["panel-title"] ? (o(), d("div", at, [
           c(i.$slots, "panel-title", {}, void 0, !0)
         ])) : y("", !0),
-        m(l)["panel-action"] ? (o(), d("div", nt, [
+        m(a)["panel-action"] ? (o(), d("div", nt, [
           c(i.$slots, "panel-title-action", {}, void 0, !0)
         ])) : y("", !0),
-        m(l)["panel-subtitle"] ? (o(), d("div", ot, [
+        m(a)["panel-subtitle"] ? (o(), d("div", ot, [
           c(i.$slots, "panel-subtitle", {}, void 0, !0)
         ])) : y("", !0)
       ]),
@@ -830,28 +830,28 @@ const et = /* @__PURE__ */ _(Ye, [["__scopeId", "data-v-4a9e39e2"]]), tt = ["sma
     ], 6));
   }
 });
-const st = /* @__PURE__ */ _(ut, [["__scopeId", "data-v-ab3b6d88"]]), rt = { class: "joy-panel-section" }, ct = {
+const st = /* @__PURE__ */ _(ut, [["__scopeId", "data-v-2e2ef043"]]), rt = { class: "joy-panel-section" }, ct = {
   key: 0,
   class: "joy-panel-section__title"
 }, yt = {
   key: 1,
   class: "joy-panel-section__content"
 }, mt = /* @__PURE__ */ p({
-  __name: "JoyPanelSection",
+  __name: "VJoyPanelSection",
   setup(e) {
-    const l = w();
-    return (a, t) => (o(), d("div", rt, [
-      m(l)["panel-section-title"] ? (o(), d("div", ct, [
-        c(a.$slots, "panel-section-title", {}, void 0, !0)
+    const a = w();
+    return (l, t) => (o(), d("div", rt, [
+      m(a)["panel-section-title"] ? (o(), d("div", ct, [
+        c(l.$slots, "panel-section-title", {}, void 0, !0)
       ])) : y("", !0),
-      m(l)["panel-section-content"] ? (o(), d("div", yt, [
-        c(a.$slots, "panel-section-content", {}, void 0, !0)
+      m(a)["panel-section-content"] ? (o(), d("div", yt, [
+        c(l.$slots, "panel-section-content", {}, void 0, !0)
       ])) : y("", !0)
     ]));
   }
 });
-const ft = /* @__PURE__ */ _(mt, [["__scopeId", "data-v-3b8a6001"]]), vt = ["id", "value", "checked", "disabled", "required", "name"], bt = { class: "joy-radio-label" }, gt = { class: "joy-radio-content__wrapper" }, ht = { class: "joy-radio-content" }, pt = /* @__PURE__ */ p({
-  __name: "JoyRadio",
+const ft = /* @__PURE__ */ _(mt, [["__scopeId", "data-v-d88510ab"]]), vt = ["id", "value", "checked", "disabled", "required", "name"], bt = { class: "joy-radio-label" }, gt = { class: "joy-radio-content__wrapper" }, ht = { class: "joy-radio-content" }, pt = /* @__PURE__ */ p({
+  __name: "VJoyRadio",
   props: {
     disabled: {
       type: Boolean,
@@ -885,13 +885,13 @@ const ft = /* @__PURE__ */ _(mt, [["__scopeId", "data-v-3b8a6001"]]), vt = ["id"
     }
   },
   emits: ["update:modelValue"],
-  setup(e, { expose: l, emit: a }) {
-    const t = e, i = S(!1), s = S(null), f = S(null), n = w(), r = V(() => !t.modelValue || !t.value ? !1 : t.modelValue === t.value);
+  setup(e, { expose: a, emit: l }) {
+    const t = e, i = S(!1), s = S(null), f = S(null), n = w(), r = J(() => !t.modelValue || !t.value ? !1 : t.modelValue === t.value);
     function g() {
       i.value = !!n["expandable-content"] && r.value;
     }
     function k() {
-      a("update:modelValue", t.value), g();
+      l("update:modelValue", t.value), g();
     }
     return N(() => {
       t.theme === "outline" && g();
@@ -900,10 +900,10 @@ const ft = /* @__PURE__ */ _(mt, [["__scopeId", "data-v-3b8a6001"]]), vt = ["id"
       () => {
         g();
       }
-    ), l({
+    ), a({
       checked: r,
       isExpanded: i
-    }), (I, j) => (o(), d("label", {
+    }), (x, j) => (o(), d("label", {
       ref_key: "root",
       ref: s,
       class: b([
@@ -927,25 +927,25 @@ const ft = /* @__PURE__ */ _(mt, [["__scopeId", "data-v-3b8a6001"]]), vt = ["id"
         onChange: k
       }, null, 40, vt),
       u("span", bt, [
-        c(I.$slots, "default", {}, void 0, !0)
+        c(x.$slots, "default", {}, void 0, !0)
       ]),
       u("div", gt, [
         u("div", ht, [
-          c(I.$slots, "radio-content", {}, void 0, !0)
+          c(x.$slots, "radio-content", {}, void 0, !0)
         ]),
         u("div", {
           ref_key: "expandableElement",
           ref: f,
           class: b(["joy-radio-expandable", { "joy-radio-expandable--expanded": i.value }])
         }, [
-          c(I.$slots, "expandable-content", {}, void 0, !0)
+          c(x.$slots, "expandable-content", {}, void 0, !0)
         ], 2)
       ])
     ], 2));
   }
 });
-const _t = /* @__PURE__ */ _(pt, [["__scopeId", "data-v-5b66be9f"]]), kt = ["form", "name"], jt = /* @__PURE__ */ p({
-  __name: "JoyRadioGroup",
+const _t = /* @__PURE__ */ _(pt, [["__scopeId", "data-v-d5988486"]]), kt = ["form", "name"], jt = /* @__PURE__ */ p({
+  __name: "VJoyRadioGroup",
   props: {
     direction: {
       type: String,
@@ -959,27 +959,27 @@ const _t = /* @__PURE__ */ _(pt, [["__scopeId", "data-v-5b66be9f"]]), kt = ["for
     }
   },
   setup(e) {
-    return (l, a) => (o(), d("fieldset", {
+    return (a, l) => (o(), d("fieldset", {
       ref: "root",
       class: "joy-radio-group-fieldset",
       role: "radiogroup",
       form: e.form,
       name: e.name
     }, [
-      c(l.$slots, "radio-group-legend", {}, void 0, !0),
+      c(a.$slots, "radio-group-legend", {}, void 0, !0),
       u("div", {
         class: b(["joy-radio-group-container", `joy-radio-group-${e.direction}`])
       }, [
-        c(l.$slots, "default", {}, void 0, !0)
+        c(a.$slots, "default", {}, void 0, !0)
       ], 2)
     ], 8, kt));
   }
 });
-const St = /* @__PURE__ */ _(jt, [["__scopeId", "data-v-d75cd96a"]]), $t = (e) => (z("data-v-0d978ea6"), e = e(), M(), e), xt = ["id", "name", "aria-invalid", "required", "disabled", "value"], It = /* @__PURE__ */ $t(() => /* @__PURE__ */ u("joy-icon", {
+const St = /* @__PURE__ */ _(jt, [["__scopeId", "data-v-de56c3c4"]]), $t = (e) => (z("data-v-e856916f"), e = e(), M(), e), Vt = ["id", "name", "aria-invalid", "required", "disabled", "value"], xt = /* @__PURE__ */ $t(() => /* @__PURE__ */ u("joy-icon", {
   class: "joy-select__chevron",
   name: "chevron-down"
-}, null, -1)), qt = /* @__PURE__ */ p({
-  __name: "JoySelect",
+}, null, -1)), It = /* @__PURE__ */ p({
+  __name: "VJoySelect",
   props: {
     disabled: {
       type: Boolean,
@@ -1018,8 +1018,8 @@ const St = /* @__PURE__ */ _(jt, [["__scopeId", "data-v-d75cd96a"]]), $t = (e) =
     // ...TEXT_BASED_PROPS,
   },
   emits: ["update:modelValue"],
-  setup(e, { emit: l }) {
-    const a = e, t = S(), i = S(), s = w();
+  setup(e, { emit: a }) {
+    const l = e, t = S(), i = S(), s = w();
     N(() => {
       var g;
       const n = s.label && s.label();
@@ -1032,27 +1032,27 @@ const St = /* @__PURE__ */ _(jt, [["__scopeId", "data-v-d75cd96a"]]), $t = (e) =
           console.warn("JoyLabel for attribute is missing");
           return;
         }
-        k !== a.id && console.warn("JoyLabel for attribute does not match with JoySelect id");
+        k !== l.id && console.warn("JoyLabel for attribute does not match with JoySelect id");
       }
     });
     function f(n) {
       const r = n.target.value;
-      l("update:modelValue", r);
+      a("update:modelValue", r);
     }
     return (n, r) => (o(), d("div", {
       ref_key: "root",
       ref: t
     }, [
       c(n.$slots, "label", {}, () => [
-        e.label ? (o(), J(C, {
+        e.label ? (o(), B(C, {
           key: 0,
           required: e.required && e.requiredMark,
           "optional-label": e.optionalLabel,
           for: e.id || e.name,
           size: e.labelSize
         }, {
-          default: q(() => [
-            B($(e.label), 1)
+          default: I(() => [
+            q($(e.label), 1)
           ]),
           _: 1
         }, 8, ["required", "optional-label", "for", "size"])) : y("", !0)
@@ -1077,14 +1077,14 @@ const St = /* @__PURE__ */ _(jt, [["__scopeId", "data-v-d75cd96a"]]), $t = (e) =
           onInput: f
         }, [
           c(n.$slots, "default", {}, void 0, !0)
-        ], 40, xt),
-        It
+        ], 40, Vt),
+        xt
       ], 2)
     ], 512));
   }
 });
-const Bt = /* @__PURE__ */ _(qt, [["__scopeId", "data-v-0d978ea6"]]), Jt = ["aria-disabled"], Vt = ["id", "value", "checked", "disabled", "required", "name"], Ct = /* @__PURE__ */ p({
-  __name: "JoySelectableItem",
+const qt = /* @__PURE__ */ _(It, [["__scopeId", "data-v-e856916f"]]), Bt = ["aria-disabled"], Jt = ["id", "value", "checked", "disabled", "required", "name"], Ct = /* @__PURE__ */ p({
+  __name: "VJoySelectableItem",
   props: {
     disabled: {
       type: Boolean,
@@ -1119,20 +1119,20 @@ const Bt = /* @__PURE__ */ _(qt, [["__scopeId", "data-v-0d978ea6"]]), Jt = ["ari
     }
   },
   emits: ["update:checked"],
-  setup(e, { emit: l }) {
-    const a = e, t = S(a.checked), i = S(), s = a.multiple ? "div" : "label", f = {
+  setup(e, { emit: a }) {
+    const l = e, t = S(l.checked), i = S(), s = l.multiple ? "div" : "label", f = {
       onRadioChange: () => {
-        l("update:checked", a.value);
+        a("update:checked", l.value);
       },
       onClick: () => {
-        a.checked && !a.multiple && l("update:checked", "");
+        l.checked && !l.multiple && a("update:checked", "");
       },
       onLabelClick: (r) => {
-        a.multiple || r.stopPropagation();
+        l.multiple || r.stopPropagation();
       }
     };
     function n(r) {
-      l("update:checked", r);
+      a("update:checked", r);
     }
     return (r, g) => (o(), d("div", {
       class: "joy-selectable-item__wrapper",
@@ -1153,8 +1153,8 @@ const Bt = /* @__PURE__ */ _(qt, [["__scopeId", "data-v-0d978ea6"]]), Jt = ["ari
         name: e.name,
         onChange: g[0] || (g[0] = //@ts-ignore
         (...k) => f.onRadioChange && f.onRadioChange(...k))
-      }, null, 40, Vt)),
-      (o(), J(E(m(s)), {
+      }, null, 40, Jt)),
+      (o(), B(E(m(s)), {
         for: e.id,
         class: b([
           "joy-selectable-item",
@@ -1167,8 +1167,8 @@ const Bt = /* @__PURE__ */ _(qt, [["__scopeId", "data-v-0d978ea6"]]), Jt = ["ari
         ]),
         onClick: f.onLabelClick
       }, {
-        default: q(() => [
-          e.multiple ? (o(), J(m(T), {
+        default: I(() => [
+          e.multiple ? (o(), B(m(T), {
             key: 0,
             id: e.id,
             checked: t.value,
@@ -1181,7 +1181,7 @@ const Bt = /* @__PURE__ */ _(qt, [["__scopeId", "data-v-0d978ea6"]]), Jt = ["ari
             name: e.name,
             required: e.required
           }, {
-            default: q(() => [
+            default: I(() => [
               c(r.$slots, "default", {}, void 0, !0)
             ]),
             _: 3
@@ -1195,18 +1195,18 @@ const Bt = /* @__PURE__ */ _(qt, [["__scopeId", "data-v-0d978ea6"]]), Jt = ["ari
         ]),
         _: 3
       }, 8, ["for", "class", "onClick"]))
-    ], 8, Jt));
+    ], 8, Bt));
   }
 });
-const U = /* @__PURE__ */ _(Ct, [["__scopeId", "data-v-46f0bc5e"]]), wt = ["id"], Lt = /* @__PURE__ */ p({
-  __name: "JoySelectableItemGroup",
+const U = /* @__PURE__ */ _(Ct, [["__scopeId", "data-v-c40bf83e"]]), wt = ["id"], Lt = /* @__PURE__ */ p({
+  __name: "VJoySelectableItemGroup",
   props: {
     options: {
       type: Array,
       required: !0,
       validator(e) {
-        const l = e.every((t) => Object.keys(t).includes("value")), a = e.every((t) => Object.keys(t).includes("label"));
-        return l && a;
+        const a = e.every((t) => Object.keys(t).includes("value")), l = e.every((t) => Object.keys(t).includes("label"));
+        return a && l;
       }
     },
     id: String,
@@ -1238,30 +1238,30 @@ const U = /* @__PURE__ */ _(Ct, [["__scopeId", "data-v-46f0bc5e"]]), wt = ["id"]
     }
   },
   emits: ["update:value"],
-  setup(e, { emit: l }) {
-    const a = e;
+  setup(e, { emit: a }) {
+    const l = e;
     function t(s) {
-      return typeof a.value == "string" ? a.value === s.value : (a.value || []).includes(s.value);
+      return typeof l.value == "string" ? l.value === s.value : (l.value || []).includes(s.value);
     }
     function i(s, f) {
-      if (!a.multiple)
-        return l("update:value", f);
-      let n = [...a.value || []];
-      f && typeof f == "boolean" ? n.push(s) : n.splice(n.indexOf(s), 1), l("update:value", n);
+      if (!l.multiple)
+        return a("update:value", f);
+      let n = [...l.value || []];
+      f && typeof f == "boolean" ? n.push(s) : n.splice(n.indexOf(s), 1), a("update:value", n);
     }
     return (s, f) => (o(), d("fieldset", {
       id: e.id,
       class: "joy-selectable-item-group__wrapper"
     }, [
-      e.label ? (o(), J(m(C), {
+      e.label ? (o(), B(m(C), {
         key: 0,
         "tag-name": "legend",
         required: e.required && e.requiredMark,
         "optional-label": e.optionalLabel,
         size: e.labelSize
       }, {
-        default: q(() => [
-          B($(e.label), 1)
+        default: I(() => [
+          q($(e.label), 1)
         ]),
         _: 1
       }, 8, ["required", "optional-label", "size"])) : y("", !0),
@@ -1275,7 +1275,7 @@ const U = /* @__PURE__ */ _(Ct, [["__scopeId", "data-v-46f0bc5e"]]), wt = ["id"]
           }
         ])
       }, [
-        (o(!0), d(A, null, F(e.options, (n) => (o(), J(m(U), {
+        (o(!0), d(A, null, F(e.options, (n) => (o(), B(m(U), {
           id: n.id,
           key: n.id,
           name: n.name,
@@ -1284,15 +1284,15 @@ const U = /* @__PURE__ */ _(Ct, [["__scopeId", "data-v-46f0bc5e"]]), wt = ["id"]
           checked: t(n),
           "onUpdate:checked": (r) => i(n.value, r)
         }, K({
-          default: q(() => [
-            B($(n.label) + " ", 1)
+          default: I(() => [
+            q($(n.label) + " ", 1)
           ]),
           _: 2
         }, [
           n.subLabel ? {
             name: "selectable-item-sublabel",
-            fn: q(() => [
-              B($(n.subLabel), 1)
+            fn: I(() => [
+              q($(n.subLabel), 1)
             ]),
             key: "0"
           } : void 0
@@ -1301,8 +1301,8 @@ const U = /* @__PURE__ */ _(Ct, [["__scopeId", "data-v-46f0bc5e"]]), wt = ["id"]
     ], 8, wt));
   }
 });
-const zt = /* @__PURE__ */ _(Lt, [["__scopeId", "data-v-cec63fed"]]), Mt = /* @__PURE__ */ p({
-  __name: "JoyWrapper",
+const zt = /* @__PURE__ */ _(Lt, [["__scopeId", "data-v-3ba17434"]]), Mt = /* @__PURE__ */ p({
+  __name: "VJoyWrapper",
   props: {
     justify: {
       type: String,
@@ -1322,14 +1322,14 @@ const zt = /* @__PURE__ */ _(Lt, [["__scopeId", "data-v-cec63fed"]]), Mt = /* @_
     }
   },
   setup(e) {
-    return (l, a) => (o(), d("div", {
+    return (a, l) => (o(), d("div", {
       class: b(["joy-wrapper", `joy-wrapper--justify-${e.justify}`, `joy-wrapper--align-${e.align}`, `joy-wrapper--direction-${e.direction}`, `joy-wrapper--wrap-${e.wrap}`])
     }, [
-      c(l.$slots, "default", {}, void 0, !0)
+      c(a.$slots, "default", {}, void 0, !0)
     ], 2));
   }
 });
-const Et = /* @__PURE__ */ _(Mt, [["__scopeId", "data-v-ce0e1214"]]), Nt = { class: "joy-template__heading" }, Tt = {
+const Et = /* @__PURE__ */ _(Mt, [["__scopeId", "data-v-319d995e"]]), Nt = { class: "joy-template__heading" }, Tt = {
   key: 0,
   class: "joy-template-slot-back"
 }, Ot = { class: "joy-template__heading___headings" }, Rt = {
@@ -1345,25 +1345,25 @@ const Et = /* @__PURE__ */ _(Mt, [["__scopeId", "data-v-ce0e1214"]]), Nt = { cla
   key: 1,
   class: "joy-template-slot-sidebar"
 }, Ht = /* @__PURE__ */ p({
-  __name: "JoyTemplate",
+  __name: "VJoyTemplate",
   props: {
     full: { type: Boolean, default: !1 },
     sidebar: { type: String, default: "right" }
   },
   setup(e) {
-    const l = e, a = w();
+    const a = e, l = w();
     return (t, i) => (o(), d("main", {
-      class: b(["joy-template", { "joy-template--full": l.full }])
+      class: b(["joy-template", { "joy-template--full": a.full }])
     }, [
       u("div", Nt, [
-        m(a)["template-back"] ? (o(), d("div", Tt, [
+        m(l)["template-back"] ? (o(), d("div", Tt, [
           c(t.$slots, "template-back", {}, void 0, !0)
         ])) : y("", !0),
         u("div", Ot, [
-          m(a)["template-title"] ? (o(), d("div", Rt, [
+          m(l)["template-title"] ? (o(), d("div", Rt, [
             c(t.$slots, "template-title", {}, void 0, !0)
           ])) : y("", !0),
-          m(a)["template-subtitle"] ? (o(), d("div", At, [
+          m(l)["template-subtitle"] ? (o(), d("div", At, [
             c(t.$slots, "template-subtitle", {}, void 0, !0)
           ])) : y("", !0)
         ])
@@ -1372,7 +1372,7 @@ const Et = /* @__PURE__ */ _(Mt, [["__scopeId", "data-v-ce0e1214"]]), Nt = { cla
         class: b([
           "joy-template__content",
           {
-            "joy-template__content--reverse": l.sidebar === "left"
+            "joy-template__content--reverse": a.sidebar === "left"
           }
         ])
       }, [
@@ -1386,7 +1386,7 @@ const Et = /* @__PURE__ */ _(Mt, [["__scopeId", "data-v-ce0e1214"]]), Nt = { cla
     ], 2));
   }
 });
-const Gt = /* @__PURE__ */ _(Ht, [["__scopeId", "data-v-b332d474"]]), Ut = ["aria-disabled"], Wt = ["id", "disabled", "name", "required", "minlength", "value"], Dt = {
+const Gt = /* @__PURE__ */ _(Ht, [["__scopeId", "data-v-a03bc629"]]), Ut = ["aria-disabled"], Wt = ["id", "disabled", "name", "required", "minlength", "value"], Dt = {
   key: 0,
   class: "joy-textarea_helpers"
 }, Zt = {
@@ -1395,7 +1395,7 @@ const Gt = /* @__PURE__ */ _(Ht, [["__scopeId", "data-v-b332d474"]]), Ut = ["ari
   color: "grey",
   size: "xxsmall"
 }, Kt = /* @__PURE__ */ p({
-  __name: "JoyTextarea",
+  __name: "VJoyTextarea",
   props: {
     disabled: {
       type: Boolean,
@@ -1442,8 +1442,8 @@ const Gt = /* @__PURE__ */ _(Ht, [["__scopeId", "data-v-b332d474"]]), Ut = ["ari
     }
   },
   emits: ["update:modelValue"],
-  setup(e, { expose: l, emit: a }) {
-    const t = e, i = S(), s = S(), f = S(!1), n = V(() => t.maxlength ? t.modelValue.length > t.maxlength : !1), r = V(() => t.minlength ? t.modelValue.length < t.minlength : !1);
+  setup(e, { expose: a, emit: l }) {
+    const t = e, i = S(), s = S(), f = S(!1), n = J(() => t.maxlength ? t.modelValue.length > t.maxlength : !1), r = J(() => t.minlength ? t.modelValue.length < t.minlength : !1);
     function g() {
       i.value && t.autogrow && (i.value.style.height = "auto", i.value.style.height = i.value.scrollHeight + "px", s.value && (s.value.style.height = i.value.scrollHeight + "px"));
     }
@@ -1451,18 +1451,18 @@ const Gt = /* @__PURE__ */ _(Ht, [["__scopeId", "data-v-b332d474"]]), Ut = ["ari
       g();
     });
     const k = {
-      onInput: (I) => {
-        a("update:modelValue", I.target.value), g();
+      onInput: (x) => {
+        l("update:modelValue", x.target.value), g();
       },
       onBlur: () => {
         f.value = n.value || r.value;
       }
     };
-    return l({
+    return a({
       isInvalid: f,
       valueOverMaxlength: n,
       valueUnderMinlength: r
-    }), (I, j) => (o(), d("div", {
+    }), (x, j) => (o(), d("div", {
       "aria-disabled": e.disabled,
       class: b([
         "joy-textarea",
@@ -1479,9 +1479,9 @@ const Gt = /* @__PURE__ */ _(Ht, [["__scopeId", "data-v-b332d474"]]), Ut = ["ari
         "optional-label": e.optionalLabel,
         size: e.labelSize
       }, {
-        default: q(() => [
-          c(I.$slots, "default", {}, () => [
-            B($(e.label), 1)
+        default: I(() => [
+          c(x.$slots, "default", {}, () => [
+            q($(e.label), 1)
           ], !0)
         ]),
         _: 3
@@ -1491,7 +1491,7 @@ const Gt = /* @__PURE__ */ _(Ht, [["__scopeId", "data-v-b332d474"]]), Ut = ["ari
         ref: s,
         class: "joy-textarea_wrapper"
       }, [
-        u("textarea", L(I.$attrs, {
+        u("textarea", L(x.$attrs, {
           id: e.id,
           ref_key: "textarea",
           ref: i,
@@ -1513,7 +1513,7 @@ const Gt = /* @__PURE__ */ _(Ht, [["__scopeId", "data-v-b332d474"]]), Ut = ["ari
           class: b(["joy-textarea-min", { "joy-textarea-min-invalid": e.invalid }])
         }, [
           m(r) ? y("", !0) : (o(), d("joy-icon", Zt)),
-          B(" " + $(e.minlengthLabel || `Minimum ${e.minlength} characters`), 1)
+          q(" " + $(e.minlengthLabel || `Minimum ${e.minlength} characters`), 1)
         ], 2)) : y("", !0),
         e.maxlength ? (o(), d("p", {
           key: 1,
@@ -1523,7 +1523,7 @@ const Gt = /* @__PURE__ */ _(Ht, [["__scopeId", "data-v-b332d474"]]), Ut = ["ari
     ], 10, Ut));
   }
 });
-const Qt = /* @__PURE__ */ _(Kt, [["__scopeId", "data-v-4505e508"]]), Xt = (e) => (z("data-v-ab8aee40"), e = e(), M(), e), Yt = ["name", "disabled", "checked", "required", "aria-checked", "value"], ea = { class: "joy-toggle__content" }, ta = { class: "joy-toggle__content-label" }, aa = /* @__PURE__ */ Xt(() => /* @__PURE__ */ u("span", { class: "joy-toggle__smile" }, [
+const Qt = /* @__PURE__ */ _(Kt, [["__scopeId", "data-v-650f33d9"]]), Xt = (e) => (z("data-v-79792513"), e = e(), M(), e), Yt = ["name", "disabled", "checked", "required", "aria-checked", "value"], el = { class: "joy-toggle__content" }, tl = { class: "joy-toggle__content-label" }, ll = /* @__PURE__ */ Xt(() => /* @__PURE__ */ u("span", { class: "joy-toggle__smile" }, [
   /* @__PURE__ */ u("svg", {
     width: "18",
     height: "10",
@@ -1536,8 +1536,8 @@ const Qt = /* @__PURE__ */ _(Kt, [["__scopeId", "data-v-4505e508"]]), Xt = (e) =
       fill: "currentColor"
     })
   ])
-], -1)), la = /* @__PURE__ */ p({
-  __name: "JoyToggle",
+], -1)), al = /* @__PURE__ */ p({
+  __name: "VJoyToggle",
   props: {
     modelValue: {
       type: Boolean,
@@ -1569,11 +1569,11 @@ const Qt = /* @__PURE__ */ _(Kt, [["__scopeId", "data-v-4505e508"]]), Xt = (e) =
     label: String
   },
   emits: ["update:modelValue"],
-  setup(e, { emit: l }) {
-    const a = {
+  setup(e, { emit: a }) {
+    const l = {
       onChange: (t) => {
         const i = t.target.checked;
-        l("update:modelValue", i);
+        a("update:modelValue", i);
       }
     };
     return (t, i) => (o(), d("div", null, [
@@ -1598,71 +1598,71 @@ const Qt = /* @__PURE__ */ _(Kt, [["__scopeId", "data-v-4505e508"]]), Xt = (e) =
           "aria-checked": e.modelValue,
           value: e.value,
           onChange: i[0] || (i[0] = //@ts-ignore
-          (...s) => a.onChange && a.onChange(...s))
+          (...s) => l.onChange && l.onChange(...s))
         }, null, 40, Yt),
-        u("p", ea, [
-          u("span", ta, [
+        u("p", el, [
+          u("span", tl, [
             c(t.$slots, "default", {}, () => [
-              B($(e.label), 1)
+              q($(e.label), 1)
             ], !0)
           ]),
-          aa
+          ll
         ])
       ], 2)
     ]));
   }
 });
-const na = /* @__PURE__ */ _(la, [["__scopeId", "data-v-ab8aee40"]]), oa = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
+const nl = /* @__PURE__ */ _(al, [["__scopeId", "data-v-79792513"]]), ol = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
   __proto__: null,
-  JoyButton: ue,
-  JoyCheckbox: T,
-  JoyCounter: xe,
-  JoyFormError: G,
-  JoyHighlight: Me,
-  JoyInput: Ge,
-  JoyLabel: C,
-  JoyLink: Ke,
-  JoyMultiCheckbox: et,
-  JoyPanel: st,
-  JoyPanelSection: ft,
-  JoyRadio: _t,
-  JoyRadioGroup: St,
-  JoySelect: Bt,
-  JoySelectableItem: U,
-  JoySelectableItemGroup: zt,
-  JoySpinner: P,
-  JoyTemplate: Gt,
-  JoyTextarea: Qt,
-  JoyToggle: na,
-  JoyWrapper: Et
-}, Symbol.toStringTag, { value: "Module" })), da = {
+  VJoyButton: ue,
+  VJoyCheckbox: T,
+  VJoyCounter: Ve,
+  VJoyFormError: G,
+  VJoyHighlight: Me,
+  VJoyInput: Ge,
+  VJoyLabel: C,
+  VJoyLink: Ke,
+  VJoyMultiCheckbox: et,
+  VJoyPanel: st,
+  VJoyPanelSection: ft,
+  VJoyRadio: _t,
+  VJoyRadioGroup: St,
+  VJoySelect: qt,
+  VJoySelectableItem: U,
+  VJoySelectableItemGroup: zt,
+  VJoySpinner: P,
+  VJoyTemplate: Gt,
+  VJoyTextarea: Qt,
+  VJoyToggle: nl,
+  VJoyWrapper: Et
+}, Symbol.toStringTag, { value: "Module" })), dl = {
   install: (e) => {
-    Object.entries(oa).forEach(([l, a]) => {
-      e.component(l, a);
+    Object.entries(ol).forEach(([a, l]) => {
+      e.component(a, l);
     });
   }
 };
 export {
-  ue as JoyButton,
-  T as JoyCheckbox,
-  xe as JoyCounter,
-  G as JoyFormError,
-  Me as JoyHighlight,
-  Ge as JoyInput,
-  C as JoyLabel,
-  Ke as JoyLink,
-  et as JoyMultiCheckbox,
-  st as JoyPanel,
-  ft as JoyPanelSection,
-  _t as JoyRadio,
-  St as JoyRadioGroup,
-  Bt as JoySelect,
-  U as JoySelectableItem,
-  zt as JoySelectableItemGroup,
-  P as JoySpinner,
-  Gt as JoyTemplate,
-  Qt as JoyTextarea,
-  na as JoyToggle,
-  da as JoyVuePlugin,
-  Et as JoyWrapper
+  dl as JoyVuePlugin,
+  ue as VJoyButton,
+  T as VJoyCheckbox,
+  Ve as VJoyCounter,
+  G as VJoyFormError,
+  Me as VJoyHighlight,
+  Ge as VJoyInput,
+  C as VJoyLabel,
+  Ke as VJoyLink,
+  et as VJoyMultiCheckbox,
+  st as VJoyPanel,
+  ft as VJoyPanelSection,
+  _t as VJoyRadio,
+  St as VJoyRadioGroup,
+  qt as VJoySelect,
+  U as VJoySelectableItem,
+  zt as VJoySelectableItemGroup,
+  P as VJoySpinner,
+  Gt as VJoyTemplate,
+  Qt as VJoyTextarea,
+  nl as VJoyToggle,
+  Et as VJoyWrapper
 };