@maltjoy/core-vue 3.13.0 → 3.14.1

package/dist/joy-vue.js

@@ -1,5 +1,5 @@
-import { defineComponent as j, computed as V, openBlock as u, createElementBlock as m, normalizeClass as S, createElementVNode as h, Fragment as W, createTextVNode as O, toDisplayString as C, createCommentVNode as _, createBlock as x, resolveDynamicComponent as re, mergeProps as G, withCtx as B, pushScopeId as se, popScopeId as ue, renderSlot as g, unref as $, renderList as Y, createStaticVNode as Ke, useAttrs as be, ref as w, createVNode as U, getCurrentScope as mt, onScopeDispose as pt, getCurrentInstance as ht, onMounted as X, nextTick as Qe, watch as E, h as _t, reactive as ve, onBeforeUnmount as Ye, normalizeStyle as ae, normalizeProps as we, guardReactiveProps as Se, provide as Xe, createSlots as et, inject as tt, useSlots as ee, onBeforeMount as gt, withModifiers as bt } from "vue";
-const wt = ["title"], St = /* @__PURE__ */ j({
+import { defineComponent as $, computed as V, openBlock as s, createElementBlock as m, normalizeClass as S, createElementVNode as _, Fragment as H, createTextVNode as B, toDisplayString as L, createCommentVNode as h, createBlock as C, resolveDynamicComponent as oe, mergeProps as K, withCtx as O, pushScopeId as se, popScopeId as ue, renderSlot as g, unref as j, renderList as U, createStaticVNode as tt, useAttrs as we, ref as w, createVNode as R, getCurrentScope as _t, onScopeDispose as ht, getCurrentInstance as gt, onMounted as Q, nextTick as lt, watch as P, h as bt, reactive as pe, onBeforeUnmount as Se, normalizeStyle as Z, normalizeProps as $e, guardReactiveProps as je, provide as ke, createSlots as at, inject as de, useSlots as Y, onBeforeMount as wt, withModifiers as St } from "vue";
+const $t = ["title"], jt = /* @__PURE__ */ $({
   __name: "VJoyAvailability",
   props: {
     /** Don't fill it and you'll only have the colored dot */
@@ -19,17 +19,17 @@ const wt = ["title"], St = /* @__PURE__ */ j({
       "joy-availability--partial": l.isPartial,
       [l.status]: !0
     }));
-    return (a, o) => (u(), m("div", {
+    return (a, o) => (s(), m("div", {
       class: S(["joy-availability", { "joy-availability-has-label": !!e.label }]),
       title: e.label || void 0
     }, [
-      h("span", {
+      _("span", {
         class: S(t.value)
       }, null, 2),
-      e.label ? (u(), m(W, { key: 0 }, [
-        O(C(e.label), 1)
-      ], 64)) : _("", !0)
-    ], 10, wt));
+      e.label ? (s(), m(H, { key: 0 }, [
+        B(L(e.label), 1)
+      ], 64)) : h("", !0)
+    ], 10, $t));
   }
 });
 const k = (e, l) => {
@@ -37,7 +37,7 @@ const k = (e, l) => {
   for (const [a, o] of l)
     t[a] = o;
   return t;
-}, $t = /* @__PURE__ */ k(St, [["__scopeId", "data-v-34b760ee"]]), J = /* @__PURE__ */ j({
+}, kt = /* @__PURE__ */ k(jt, [["__scopeId", "data-v-34b760ee"]]), E = /* @__PURE__ */ $({
   __name: "VJoyIcon",
   props: {
     name: {
@@ -54,27 +54,27 @@ const k = (e, l) => {
     }
   },
   setup(e) {
-    return (l, t) => (u(), m("span", {
+    return (l, t) => (s(), m("span", {
       class: S(["joy-icon", `joy-icon--${e.color}`, `joy-icon--${e.size}`])
     }, [
-      h("i", {
+      _("i", {
         class: S(["icon", `icon-${e.name}`])
       }, null, 2)
     ], 2));
   }
 });
-const jt = (e) => (se("data-v-b3dcdecc"), e = e(), ue(), e), kt = {
+const Vt = (e) => (se("data-v-b3dcdecc"), e = e(), ue(), e), xt = {
   ref: "avatarEl",
   class: "joy-avatar__wrapper"
-}, Vt = ["src", "title", "alt"], xt = {
+}, Ct = ["src", "title", "alt"], Lt = {
   key: 0,
   class: "joy-avatar__strategy"
-}, Ct = ["height"], Lt = /* @__PURE__ */ jt(() => /* @__PURE__ */ h("path", {
+}, It = ["height"], Bt = /* @__PURE__ */ Vt(() => /* @__PURE__ */ _("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)), It = [
-  Lt
-], Ot = /* @__PURE__ */ j({
+}, null, -1)), Ot = [
+  Bt
+], Tt = /* @__PURE__ */ $({
   __name: "VJoyAvatar",
   props: {
     /** 3 different sizes of avatar */
@@ -111,69 +111,69 @@ const jt = (e) => (se("data-v-b3dcdecc"), e = e(), ue(), e), kt = {
       "joy-avatar__placeholder": n.value,
       [`joy-avatar__${a.size}`]: !0,
       [`joy-avatar__${a.color}`]: !0
-    })), n = V(() => !a.fullName && !a.photoUrl && !a.totalNumber), d = V(() => {
-      function c(f) {
+    })), n = V(() => !a.fullName && !a.photoUrl && !a.totalNumber), c = V(() => {
+      function d(f) {
         return f.replace(/[';,:()]/g, "").charAt(0);
       }
-      let v = a.fullName.split(" ");
-      return v = v.slice(0, 2), v.forEach((f, s) => {
-        v[s] = c(f);
-      }), v.join("").toUpperCase();
+      let y = a.fullName.split(" ");
+      return y = y.slice(0, 2), y.forEach((f, u) => {
+        y[u] = d(f);
+      }), y.join("").toUpperCase();
     });
-    function y() {
+    function v() {
       t("click");
     }
     return l({
       isAnonymous: n,
-      initials: d
-    }), (c, v) => (u(), m("div", kt, [
-      (u(), x(re(e.link ? "button" : "div"), G(i.value, {
+      initials: c
+    }), (d, y) => (s(), m("div", xt, [
+      (s(), C(oe(e.link ? "button" : "div"), K(i.value, {
         class: [r.value],
-        onClick: y
+        onClick: v
       }), {
-        default: B(() => [
-          n.value ? (u(), x(J, {
+        default: O(() => [
+          n.value ? (s(), C(E, {
             key: 0,
             name: "user-photo",
             color: "white",
             size: o.value
-          }, null, 8, ["size"])) : _("", !0),
-          e.photoUrl ? (u(), m("img", {
+          }, null, 8, ["size"])) : h("", !0),
+          e.photoUrl ? (s(), m("img", {
             key: 1,
             src: e.photoUrl,
             title: e.fullName,
             alt: e.fullName || "",
             loading: "lazy"
-          }, null, 8, Vt)) : _("", !0),
-          e.fullName ? (u(), m(W, { key: 2 }, [
-            O(C(d.value), 1)
-          ], 64)) : _("", !0),
-          e.totalNumber ? (u(), m(W, { key: 3 }, [
-            O(C("+" + e.totalNumber), 1)
-          ], 64)) : _("", !0)
+          }, null, 8, Ct)) : h("", !0),
+          e.fullName ? (s(), m(H, { key: 2 }, [
+            B(L(c.value), 1)
+          ], 64)) : h("", !0),
+          e.totalNumber ? (s(), m(H, { key: 3 }, [
+            B(L("+" + e.totalNumber), 1)
+          ], 64)) : h("", !0)
         ]),
         _: 1
       }, 16, ["class"])),
-      e.profile === "strategy" ? (u(), m("span", xt, [
-        (u(), m("svg", {
+      e.profile === "strategy" ? (s(), m("span", Lt, [
+        (s(), m("svg", {
           width: "12",
           height: e.size === "small" ? "10" : "16",
           viewBox: "0 0 12 16",
           fill: "none",
           xmlns: "http://www.w3.org/2000/svg"
-        }, It, 8, Ct))
-      ])) : _("", !0)
+        }, Ot, 8, It))
+      ])) : h("", !0)
     ], 512));
   }
 });
-const Bt = /* @__PURE__ */ k(Ot, [["__scopeId", "data-v-b3dcdecc"]]), Et = /* @__PURE__ */ j({
+const Pt = /* @__PURE__ */ k(Tt, [["__scopeId", "data-v-b3dcdecc"]]), Jt = /* @__PURE__ */ $({
   __name: "VJoyAvatarsList",
   props: {
     /** Renders a compact list of avatars */
     compress: Boolean
   },
   setup(e) {
-    return (l, t) => (u(), m("div", {
+    return (l, t) => (s(), m("div", {
       ref: "avatarsList",
       class: S(["joy-avatars-list", { "joy-avatars-list--compressed": e.compress }])
     }, [
@@ -181,7 +181,7 @@ const Bt = /* @__PURE__ */ k(Ot, [["__scopeId", "data-v-b3dcdecc"]]), Et = /* @_
     ], 2));
   }
 });
-const Tt = /* @__PURE__ */ k(Et, [["__scopeId", "data-v-46e4547e"]]), Jt = ["info", "gray", "green", "orange", "red", "teal", "pink", "dark-blue", "yellow"], Pt = /* @__PURE__ */ j({
+const Et = /* @__PURE__ */ k(Jt, [["__scopeId", "data-v-46e4547e"]]), zt = ["info", "gray", "green", "orange", "red", "teal", "pink", "dark-blue", "yellow"], At = /* @__PURE__ */ $({
   __name: "VJoyBadge",
   props: {
     /**
@@ -204,112 +204,112 @@ const Tt = /* @__PURE__ */ k(Et, [["__scopeId", "data-v-46e4547e"]]), Jt = ["inf
     variant: {
       type: String,
       validator(e) {
-        return Jt.includes(e);
+        return zt.includes(e);
       }
     }
   },
   setup(e) {
-    return (l, t) => (u(), m("span", {
+    return (l, t) => (s(), m("span", {
       class: S(["joy-badge", `joy-badge__${e.variant}`, { "joy-badge--with-bulletpoint": e.bulletpoint }]),
       role: "status"
     }, [
       g(l.$slots, "default", {}, () => [
-        O(C(e.label), 1)
+        B(L(e.label), 1)
       ], !0)
     ], 2));
   }
 });
-const zt = /* @__PURE__ */ k(Pt, [["__scopeId", "data-v-1ed08e27"]]);
-var T = /* @__PURE__ */ ((e) => (e.HIGH_POTENTIAL = "highpotential", e.HIGH_POTENTIAL_AUTO = "high-potential-auto", e.MALT_LINKER = "maltlinker", e.NEW = "new", e.SUPER_MALTER = "supermalter", e.VERIFIED = "verified", e))(T || {}), ne = /* @__PURE__ */ ((e) => (e.HIGH_POTENTIAL = "program_high-potential", e))(ne || {});
-const R = (e) => (se("data-v-f258a344"), e = e(), ue(), e), At = { class: "joy-badge-level" }, Ft = /* @__PURE__ */ R(() => /* @__PURE__ */ h("path", {
+const Ft = /* @__PURE__ */ k(At, [["__scopeId", "data-v-1ed08e27"]]);
+var J = /* @__PURE__ */ ((e) => (e.HIGH_POTENTIAL = "highpotential", e.HIGH_POTENTIAL_AUTO = "high-potential-auto", e.MALT_LINKER = "maltlinker", e.NEW = "new", e.SUPER_MALTER = "supermalter", e.VERIFIED = "verified", e))(J || {}), ie = /* @__PURE__ */ ((e) => (e.HIGH_POTENTIAL = "program_high-potential", e))(ie || {});
+const D = (e) => (se("data-v-f258a344"), e = e(), ue(), e), qt = { class: "joy-badge-level" }, Nt = /* @__PURE__ */ D(() => /* @__PURE__ */ _("path", {
   fill: "#264FFA",
   d: "M5.71533 12.2962 11.4243 18l.0049-11.45716-5.71387 5.75336Z"
-}, null, -1)), qt = /* @__PURE__ */ R(() => /* @__PURE__ */ h("path", {
+}, null, -1)), Mt = /* @__PURE__ */ D(() => /* @__PURE__ */ _("path", {
   fill: "#FC5757",
   d: "M.00195312 6.54284.00671145 18 5.7158 12.2962.00195312 6.54284Z"
-}, null, -1)), Mt = /* @__PURE__ */ R(() => /* @__PURE__ */ h("path", {
+}, null, -1)), Rt = /* @__PURE__ */ D(() => /* @__PURE__ */ _("path", {
   fill: "#FFC200",
   d: "M11.4289 5.68249c-.0059-1.52434-.6069-2.9554-1.69067-4.02851C8.95862.882797 7.99681.362073 6.9506.132677 6.95037.132599 6.95021.132599 6.94998.132521c-.04337-.009516-.08681-.018408-.13041-.02691-.0057-.001092-.01147-.002184-.01724-.003276-.0383-.0073317-.07675-.0142735-.11529-.0208255-.01068-.001794-.02144-.00351-.03213-.005304-.03385-.0055379-.06778-.0108418-.10179-.0158338-.01505-.002184-.03011-.0042121-.04516-.0063181-.03011-.0041339-.06022-.008112-.0904-.0117779-.01857-.002262-.03721-.0042901-.05577-.006396C6.33472.0328377 6.30766.029952 6.28051.0273 6.25914.025194 6.23769.0233999 6.21624.0215279 6.19144.0194219 6.16671.017316 6.14183.015522 6.11851.013806 6.09511.0123239 6.07171.0109199 6.04831.00951588 6.02483.00811199 6.00135.006942 5.9771.00577201 5.95276.00483616 5.92842.00397816 5.90541.00312017 5.8824.00234019 5.85931.00179419c-.02433-.00062399-.04874-.0009362-.07316-.0012482C5.76267.000234 5.73912 0 5.71564 0c-.02355 0-.04703.000234-.07051.000546-.02442.000312-.04883.0006242-.07316.00124819-.02309.000546-.0461.00140398-.06911.00218397-.02434.000858-.04859.00179385-.07293.00296384-.02348.00116999-.04696.00257388-.07036.0039779-.0234.001404-.0468.0028861-.07012.0046021-.0248.001794-.0496.0038999-.07441.0060059-.02145.001872-.0429.0036661-.06427.0057721-.02714.002652-.05421.0055377-.08135.0085797-.01857.0021059-.03721.004134-.05577.006396-.03019.0036659-.06037.007644-.09048.0117779-.01506.002106-.03011.0041341-.04516.0063181-.03401.004992-.06794.0102959-.10179.0158338-.01077.001794-.02145.00351-.03214.005304-.03853.006552-.07699.0134938-.11528.0208255-.00578.001092-.01155.002184-.01724.003276-.0436.008502-.08705.017394-.13041.02691-.00024.000078-.00047.000078-.00071.000156C3.43424.361995 2.4725.882719 1.6929 1.65398.609098 2.72702.00811193 4.15815.00218397 5.68249L0 6.15064l.00171623.39226L5.71556 12.2962l5.71384-5.7533.0017-.39202-.0022-.46839Z"
-}, null, -1)), Nt = [
-  Ft,
-  qt,
-  Mt
-], Rt = {
+}, null, -1)), Ht = [
+  Nt,
+  Mt,
+  Rt
+], Dt = {
   key: 1,
   class: "joy-badge-level__highpotential",
   xmlns: "http://www.w3.org/2000/svg",
   fill: "none",
   viewBox: "0 0 12 14"
-}, Ht = /* @__PURE__ */ R(() => /* @__PURE__ */ h("g", { "clip-path": "url(#a)" }, [
-  /* @__PURE__ */ h("path", {
+}, Wt = /* @__PURE__ */ D(() => /* @__PURE__ */ _("g", { "clip-path": "url(#a)" }, [
+  /* @__PURE__ */ _("path", {
     fill: "#FFC200",
     d: "M.00241952 6.50818C.00887156 4.89669.639559 3.38347 1.77754 2.24877c.8186-.8155 1.82835-1.366202 2.926-1.608251h.00081c.04516-.009747.09113-.019494.1371-.028429.00565-.001625.0121-.002437.01775-.004061.04032-.008123.08065-.015433.12097-.021931.0113-.001624.02259-.004061.03388-.005686.03548-.005685.07097-.011371.10726-.016245.01613-.002436.03146-.004873.04759-.006498.03064-.004873.0629-.008934.09436-.012995.01935-.002437.03871-.004874.05887-.006498.02823-.003249.05646-.006498.08549-.008935.02178-.002437.04436-.004874.06694-.006498.02581-.002437.05242-.004061.07823-.006498.0242-.001625.0492-.003249.07339-.004874.0242-.001624.0492-.003249.0742-.004061.02581-.001624.05081-.002437.07662-.003249.0242-.000812.04839-.001624.07259-.002437C5.87539.500812 5.9004.500812 5.92621.5h.07419c.0242 0 .0492 0 .0734.000812.0258 0 .05161.000812.07661.001625.0242.000812.04839.001624.07259.002436.02581 0 .05162.001625.07742.002437.02501.000812.0492.002437.0742.004061.0242.001625.0492.003249.07339.004874.02581.001624.05243.004061.07824.006498.02177.001624.04435.004061.06694.006498.02822.002437.05645.005686.08549.008935.01935.002436.03871.004061.05887.006498.03145.004061.06291.008122.09436.012183.01613.002437.03145.004874.04758.00731.03549.004874.07098.01056.10646.017058.01129.001624.02259.003249.03388.004873.04032.00731.08065.014621.12097.021931.00565.000812.0121.002436.01775.003249.04597.009747.09194.018681.1371.029241h.00081c1.09846.242861 2.1082.792751 2.92604 1.608251 1.1379 1.1347 1.7686 2.64792 1.7751 4.25941L12 7.00284l-.0016.41506L6.0004 13.5.00161301 7.4179 0 7.00284l.00241952-.49466Z"
   })
-], -1)), Dt = /* @__PURE__ */ R(() => /* @__PURE__ */ h("defs", null, [
-  /* @__PURE__ */ h("clipPath", { id: "a" }, [
-    /* @__PURE__ */ h("path", {
+], -1)), Gt = /* @__PURE__ */ D(() => /* @__PURE__ */ _("defs", null, [
+  /* @__PURE__ */ _("clipPath", { id: "a" }, [
+    /* @__PURE__ */ _("path", {
       fill: "#fff",
       d: "M0 0h12v13H0z",
       transform: "translate(0 .5)"
     })
   ])
 ], -1)), Ut = [
-  Ht,
-  Dt
-], Wt = {
+  Wt,
+  Gt
+], Zt = {
   key: 2,
   class: "joy-badge-level__high-potential-auto",
   xmlns: "http://www.w3.org/2000/svg",
   viewBox: "0 0 64 64",
   "enable-background": "new 0 0 64 64"
-}, Gt = /* @__PURE__ */ R(() => /* @__PURE__ */ h("path", {
+}, Kt = /* @__PURE__ */ D(() => /* @__PURE__ */ _("path", {
   fill: "#EF4E16",
   d: "M60 23.913s-8.76-2.903-14.05 1.058C44.256 17.449 45.203 8.674 34.688 2c-.712 9.413-12.856 9.891-15.691 22.005-1.86-3.319-2.227-7.716-9.28-9.871C11.615 25.513.415 31.3 5.199 47.68c2.699 9.246 12.72 13.651 21.047 14.217 16.527 1.123 31.896-6.848 32.258-24.148.155-7.437-2.975-8.343 1.496-13.836z"
-}, null, -1)), Zt = /* @__PURE__ */ R(() => /* @__PURE__ */ h("path", {
+}, null, -1)), Qt = /* @__PURE__ */ D(() => /* @__PURE__ */ _("path", {
   fill: "#F9B700",
   d: "M53.226 32.962c-6.012-.063-5.458 2.387-9.883 3.896-3.212-5.842-.067-13.682-10.056-19.364.066 10.625-7.32 7.313-10.414 17.456-3.758-2.145-1.943-6.888-9.256-8.89 4.042 6.349-.99 7.542-3.526 13.335-5.093 11.632 7.181 19.813 16.548 20.382 13.019.793 25.124-4.834 25.408-17.048.122-5.25-2.342-5.888 1.179-9.767z"
-}, null, -1)), Kt = /* @__PURE__ */ R(() => /* @__PURE__ */ h("path", {
+}, null, -1)), Yt = /* @__PURE__ */ D(() => /* @__PURE__ */ _("path", {
   fill: "#FFE463",
   d: "M47.616 41.169c-4.47-.041-4.061 1.522-7.351 2.484-2.391-3.727-.051-8.729-7.479-12.354.049 6.778-5.446 4.666-7.746 11.137-2.795-1.368-1.447-4.395-6.885-5.672 3.006 4.051-.735 4.812-2.621 8.508-3.791 7.421 5.339 12.64 12.307 13.003 9.683.506 18.686-3.084 18.896-10.876.093-3.348-1.741-3.755.879-6.23z"
-}, null, -1)), Qt = /* @__PURE__ */ R(() => /* @__PURE__ */ h("path", {
+}, null, -1)), Xt = /* @__PURE__ */ D(() => /* @__PURE__ */ _("path", {
   fill: "#FFF7D1",
   d: "M37.182 54.939c0 2.188-12.427 2.188-12.427 0 0-5.849 12.427-5.849 12.427 0z"
-}, null, -1)), Yt = [
-  Gt,
-  Zt,
+}, null, -1)), el = [
   Kt,
-  Qt
-], Xt = {
+  Qt,
+  Yt,
+  Xt
+], tl = {
   key: 3,
   class: "joy-badge-level__maltlinker",
   xmlns: "http://www.w3.org/2000/svg",
   fill: "none",
   viewBox: "0 0 22 10"
-}, el = /* @__PURE__ */ Ke('<g clip-path="url(#a)" data-v-f258a344><path fill="var(--joy-color-tertiary-10)" d="M4.919 9.893c-1.32-.005-2.558-.526-3.487-1.464C.764 7.754.313 6.922.115 6.016v-.001c-.008-.037-.016-.074-.024-.112 0-.005-.001-.01-.002-.015-.006-.033-.012-.066-.018-.1C.069 5.779.068 5.77.066 5.76c-.005-.029-.009-.058-.014-.088-.002-.013-.003-.026-.005-.039-.004-.026-.007-.052-.01-.078l-.006-.048C.028 5.483.026 5.46.024 5.436.022 5.418.02 5.399.019 5.381c-.002-.022-.004-.043-.006-.065-.001-.02-.003-.04-.004-.061-.001-.02-.002-.041-.003-.061-.001-.02-.002-.041-.003-.062-.001-.02-.001-.04-.002-.06 0-.021 0-.043-.001-.064v-.122c0-.021.001-.042.001-.063 0-.02.001-.04.002-.06L.006 4.7c.001-.02.002-.041.003-.061.001-.02.002-.04.004-.061.002-.021.003-.043.005-.064.002-.019.004-.037.006-.056.002-.024.005-.047.007-.07l.006-.048c.003-.026.007-.052.01-.078.002-.014.003-.027.005-.04.004-.029.009-.059.014-.088.002-.009.003-.019.005-.028.006-.033.012-.067.018-.1l.003-.015c.007-.038.015-.075.023-.113v-.001c.198-.904.649-1.737 1.317-2.412C2.361.527 3.6.007 4.919.002L5.324 0l.34.001 4.98 4.946-4.98 4.946-.34.002-.405-.002Z" data-v-f258a344></path><path fill="var(--joy-color-brand-primary-50)" d="M16.3651.002c1.319.005 2.558.525 3.487 1.463.668.675 1.118 1.507 1.317 2.413v.001c.008.038.016.075.023.113l.003.015c.006.033.012.066.018.1.002.009.003.019.005.028.005.029.009.059.014.088.002.013.004.026.005.039.004.026.007.052.01.078l.006.048c.003.023.005.047.007.07.002.019.003.037.005.056.002.021.004.043.005.064.001.02.003.04.004.061.001.02.002.041.003.061l.003.063c.001.02.001.04.002.06.001.021.001.042.001.063v.122c0 .021-.001.042-.001.063 0 .02-.001.04-.002.06l-.003.063c-.001.02-.002.041-.003.061-.001.02-.002.04-.004.061-.002.021-.003.043-.005.064-.002.019-.003.037-.005.056-.002.024-.005.047-.007.07l-.006.048c-.003.026-.007.052-.01.078-.002.013-.004.026-.005.039-.004.029-.009.059-.014.088-.002.009-.003.019-.005.028-.006.033-.012.067-.018.1l-.003.015c-.007.038-.015.075-.023.113v.001c-.199.906-.649 1.738-1.317 2.413-.929.938-2.168 1.458-3.487 1.463l-.405.002-.34-.001-4.98-4.946 4.98-4.946.339-.001.406.002Z" data-v-f258a344></path></g><defs data-v-f258a344><clipPath id="a" data-v-f258a344><path fill="#fff" d="M0 0h21.283v9.895H0z" data-v-f258a344></path></clipPath></defs>', 2), tl = [
-  el
-], ll = {
+}, ll = /* @__PURE__ */ tt('<g clip-path="url(#a)" data-v-f258a344><path fill="var(--joy-color-tertiary-10)" d="M4.919 9.893c-1.32-.005-2.558-.526-3.487-1.464C.764 7.754.313 6.922.115 6.016v-.001c-.008-.037-.016-.074-.024-.112 0-.005-.001-.01-.002-.015-.006-.033-.012-.066-.018-.1C.069 5.779.068 5.77.066 5.76c-.005-.029-.009-.058-.014-.088-.002-.013-.003-.026-.005-.039-.004-.026-.007-.052-.01-.078l-.006-.048C.028 5.483.026 5.46.024 5.436.022 5.418.02 5.399.019 5.381c-.002-.022-.004-.043-.006-.065-.001-.02-.003-.04-.004-.061-.001-.02-.002-.041-.003-.061-.001-.02-.002-.041-.003-.062-.001-.02-.001-.04-.002-.06 0-.021 0-.043-.001-.064v-.122c0-.021.001-.042.001-.063 0-.02.001-.04.002-.06L.006 4.7c.001-.02.002-.041.003-.061.001-.02.002-.04.004-.061.002-.021.003-.043.005-.064.002-.019.004-.037.006-.056.002-.024.005-.047.007-.07l.006-.048c.003-.026.007-.052.01-.078.002-.014.003-.027.005-.04.004-.029.009-.059.014-.088.002-.009.003-.019.005-.028.006-.033.012-.067.018-.1l.003-.015c.007-.038.015-.075.023-.113v-.001c.198-.904.649-1.737 1.317-2.412C2.361.527 3.6.007 4.919.002L5.324 0l.34.001 4.98 4.946-4.98 4.946-.34.002-.405-.002Z" data-v-f258a344></path><path fill="var(--joy-color-brand-primary-50)" d="M16.3651.002c1.319.005 2.558.525 3.487 1.463.668.675 1.118 1.507 1.317 2.413v.001c.008.038.016.075.023.113l.003.015c.006.033.012.066.018.1.002.009.003.019.005.028.005.029.009.059.014.088.002.013.004.026.005.039.004.026.007.052.01.078l.006.048c.003.023.005.047.007.07.002.019.003.037.005.056.002.021.004.043.005.064.001.02.003.04.004.061.001.02.002.041.003.061l.003.063c.001.02.001.04.002.06.001.021.001.042.001.063v.122c0 .021-.001.042-.001.063 0 .02-.001.04-.002.06l-.003.063c-.001.02-.002.041-.003.061-.001.02-.002.04-.004.061-.002.021-.003.043-.005.064-.002.019-.003.037-.005.056-.002.024-.005.047-.007.07l-.006.048c-.003.026-.007.052-.01.078-.002.013-.004.026-.005.039-.004.029-.009.059-.014.088-.002.009-.003.019-.005.028-.006.033-.012.067-.018.1l-.003.015c-.007.038-.015.075-.023.113v.001c-.199.906-.649 1.738-1.317 2.413-.929.938-2.168 1.458-3.487 1.463l-.405.002-.34-.001-4.98-4.946 4.98-4.946.339-.001.406.002Z" data-v-f258a344></path></g><defs data-v-f258a344><clipPath id="a" data-v-f258a344><path fill="#fff" d="M0 0h21.283v9.895H0z" data-v-f258a344></path></clipPath></defs>', 2), al = [
+  ll
+], ol = {
   key: 4,
   class: "joy-badge-level__highpotential-program",
   xmlns: "http://www.w3.org/2000/svg",
   fill: "none",
   viewBox: "0 0 12 14"
-}, al = /* @__PURE__ */ R(() => /* @__PURE__ */ h("g", { "clip-path": "url(#a)" }, [
-  /* @__PURE__ */ h("path", {
+}, nl = /* @__PURE__ */ D(() => /* @__PURE__ */ _("g", { "clip-path": "url(#a)" }, [
+  /* @__PURE__ */ _("path", {
     fill: "#FFC200",
     d: "M.00241952 6.50818C.00887156 4.89669.639559 3.38347 1.77754 2.24877c.8186-.8155 1.82835-1.366202 2.926-1.608251h.00081c.04516-.009747.09113-.019494.1371-.028429.00565-.001625.0121-.002437.01775-.004061.04032-.008123.08065-.015433.12097-.021931.0113-.001624.02259-.004061.03388-.005686.03548-.005685.07097-.011371.10726-.016245.01613-.002436.03146-.004873.04759-.006498.03064-.004873.0629-.008934.09436-.012995.01935-.002437.03871-.004874.05887-.006498.02823-.003249.05646-.006498.08549-.008935.02178-.002437.04436-.004874.06694-.006498.02581-.002437.05242-.004061.07823-.006498.0242-.001625.0492-.003249.07339-.004874.0242-.001624.0492-.003249.0742-.004061.02581-.001624.05081-.002437.07662-.003249.0242-.000812.04839-.001624.07259-.002437C5.87539.500812 5.9004.500812 5.92621.5h.07419c.0242 0 .0492 0 .0734.000812.0258 0 .05161.000812.07661.001625.0242.000812.04839.001624.07259.002436.02581 0 .05162.001625.07742.002437.02501.000812.0492.002437.0742.004061.0242.001625.0492.003249.07339.004874.02581.001624.05243.004061.07824.006498.02177.001624.04435.004061.06694.006498.02822.002437.05645.005686.08549.008935.01935.002436.03871.004061.05887.006498.03145.004061.06291.008122.09436.012183.01613.002437.03145.004874.04758.00731.03549.004874.07098.01056.10646.017058.01129.001624.02259.003249.03388.004873.04032.00731.08065.014621.12097.021931.00565.000812.0121.002436.01775.003249.04597.009747.09194.018681.1371.029241h.00081c1.09846.242861 2.1082.792751 2.92604 1.608251 1.1379 1.1347 1.7686 2.64792 1.7751 4.25941L12 7.00284l-.0016.41506L6.0004 13.5.00161301 7.4179 0 7.00284l.00241952-.49466Z"
   })
-], -1)), ol = /* @__PURE__ */ R(() => /* @__PURE__ */ h("defs", null, [
-  /* @__PURE__ */ h("clipPath", { id: "a" }, [
-    /* @__PURE__ */ h("path", {
+], -1)), il = /* @__PURE__ */ D(() => /* @__PURE__ */ _("defs", null, [
+  /* @__PURE__ */ _("clipPath", { id: "a" }, [
+    /* @__PURE__ */ _("path", {
       fill: "#fff",
       d: "M0 0h12v13H0z",
       transform: "translate(0 .5)"
     })
   ])
-], -1)), nl = [
-  al,
-  ol
-], il = /* @__PURE__ */ j({
+], -1)), rl = [
+  nl,
+  il
+], sl = /* @__PURE__ */ $({
   __name: "VJoyBadgeLevel",
   props: {
     /** Badge type. HIGH_POTENTIAL, SUPERMALTER, etc... */
@@ -331,69 +331,96 @@ const R = (e) => (se("data-v-f258a344"), e = e(), ue(), e), At = { class: "joy-b
   setup(e) {
     const l = e, t = V(() => {
       switch (l.type) {
-        case ne.HIGH_POTENTIAL:
-        case T.HIGH_POTENTIAL:
+        case ie.HIGH_POTENTIAL:
+        case J.HIGH_POTENTIAL:
           return "High Potential";
-        case T.HIGH_POTENTIAL_AUTO:
+        case J.HIGH_POTENTIAL_AUTO:
           return "High Potential Auto";
-        case T.MALT_LINKER:
+        case J.MALT_LINKER:
           return "Malt Linker";
-        case T.NEW:
+        case J.NEW:
           return "New";
-        case T.SUPER_MALTER:
+        case J.SUPER_MALTER:
           return "Supermalter";
-        case T.VERIFIED:
+        case J.VERIFIED:
           return "Verified";
         default:
           return "Supermalter";
       }
     });
-    return (a, o) => (u(), m("span", At, [
-      e.type === $(T).SUPER_MALTER ? (u(!0), m(W, { key: 0 }, Y(e.superMalterLevel, (i, r) => (u(), m("svg", {
+    return (a, o) => (s(), m("span", qt, [
+      e.type === j(J).SUPER_MALTER ? (s(!0), m(H, { key: 0 }, U(e.superMalterLevel, (i, r) => (s(), m("svg", {
         key: r,
         class: "joy-badge-level__supermalter",
         xmlns: "http://www.w3.org/2000/svg",
         fill: "none",
         viewBox: "0 0 12 18"
-      }, Nt))), 128)) : _("", !0),
-      e.type === $(T).HIGH_POTENTIAL ? (u(), m("svg", Rt, Ut)) : _("", !0),
-      e.type === $(T).HIGH_POTENTIAL_AUTO ? (u(), m("svg", Wt, Yt)) : _("", !0),
-      e.type === $(T).MALT_LINKER ? (u(), m("svg", Xt, tl)) : _("", !0),
-      e.type === $(ne).HIGH_POTENTIAL ? (u(), m("svg", ll, nl)) : _("", !0),
-      h("span", {
+      }, Ht))), 128)) : h("", !0),
+      e.type === j(J).HIGH_POTENTIAL ? (s(), m("svg", Dt, Ut)) : h("", !0),
+      e.type === j(J).HIGH_POTENTIAL_AUTO ? (s(), m("svg", Zt, el)) : h("", !0),
+      e.type === j(J).MALT_LINKER ? (s(), m("svg", tl, al)) : h("", !0),
+      e.type === j(ie).HIGH_POTENTIAL ? (s(), m("svg", ol, rl)) : h("", !0),
+      _("span", {
         class: S([
           {
             "joy-badge-level__tag": e.visibleText,
-            red: e.type === $(T).NEW || e.type === $(T).MALT_LINKER || e.type === $(T).HIGH_POTENTIAL_AUTO,
-            blue: e.type === $(ne).HIGH_POTENTIAL || e.type === $(T).HIGH_POTENTIAL || e.type === $(T).SUPER_MALTER,
-            turquoise: e.type === $(T).VERIFIED
+            red: e.type === j(J).NEW || e.type === j(J).MALT_LINKER || e.type === j(J).HIGH_POTENTIAL_AUTO,
+            blue: e.type === j(ie).HIGH_POTENTIAL || e.type === j(J).HIGH_POTENTIAL || e.type === j(J).SUPER_MALTER,
+            turquoise: e.type === j(J).VERIFIED
           }
         ])
       }, [
         e.visibleText ? g(a.$slots, "default", { key: 0 }, () => [
-          O(C(t.value), 1)
-        ], !0) : _("", !0)
+          B(L(t.value), 1)
+        ], !0) : h("", !0)
       ], 2)
     ]));
   }
 });
-const rl = /* @__PURE__ */ k(il, [["__scopeId", "data-v-f258a344"]]), sl = ["teal", "white"], ul = /* @__PURE__ */ j({
+const ul = /* @__PURE__ */ k(sl, [["__scopeId", "data-v-f258a344"]]), dl = ["teal", "white"], cl = /* @__PURE__ */ $({
   __name: "VJoySpinner",
   props: {
     color: {
       type: String,
       validator(e) {
-        return sl.includes(e);
+        return dl.includes(e);
       }
     }
   },
   setup(e) {
-    return (l, t) => (u(), m("div", {
+    return (l, t) => (s(), m("div", {
       class: S(["joy-spinner", `joy-spinner_${e.color}`])
     }, null, 2));
   }
 });
-const $e = /* @__PURE__ */ k(ul, [["__scopeId", "data-v-616a29d0"]]), dl = ["primary", "secondary"], cl = ["neutral", "success", "info", "warning", "error"], fl = ["main", "admin", "ghost", "white"], yl = [...dl, ...fl], vl = ["large", "medium", "small", "xsmall", "xxsmall"], ml = { class: "joy-button--slot" }, pl = /* @__PURE__ */ j({
+const Ve = /* @__PURE__ */ k(cl, [["__scopeId", "data-v-616a29d0"]]), fl = ["primary", "secondary"], yl = ["neutral", "success", "info", "warning", "error"], vl = ["main", "admin", "ghost", "white"], pl = [...fl, ...vl], ml = ["large", "medium", "small", "xsmall", "xxsmall"];
+function _l(e) {
+  let l;
+  switch (e) {
+    case "error":
+      l = "warning-triangle";
+      break;
+    case "success":
+      l = "check";
+      break;
+    default:
+      l = "info-circle";
+  }
+  return l;
+}
+function hl(e) {
+  if (!e) {
+    console.warn("Missing ref element for focusOnFirstFocusableFormField use");
+    return;
+  }
+  let l = ["input", "textarea", "select"];
+  const t = (e.value ?? e).querySelectorAll(l.join(","));
+  if (t.length)
+    return t[0].focus();
+}
+const ot = function(e = 10) {
+  return Math.random().toString(36).substring(2, e + 2);
+}, gl = /* @__PURE__ */ $({
   __name: "VJoyButton",
   props: {
     /**
@@ -429,7 +456,7 @@ const $e = /* @__PURE__ */ k(ul, [["__scopeId", "data-v-616a29d0"]]), dl = ["pri
       type: String,
       default: "primary",
       validator(e) {
-        return yl.includes(e);
+        return pl.includes(e);
       }
     },
     /** Button or Link size */
@@ -437,13 +464,13 @@ const $e = /* @__PURE__ */ k(ul, [["__scopeId", "data-v-616a29d0"]]), dl = ["pri
       type: String,
       default: "medium",
       validator(e) {
-        return vl.includes(e);
+        return ml.includes(e);
       }
     }
   },
-  setup(e) {
-    const l = e, t = be(), a = V(() => {
-      switch (l.size) {
+  setup(e, { expose: l }) {
+    const t = e, a = we(), o = "joy-button--" + ot(), i = V(() => {
+      switch (t.size) {
         case "xxsmall":
           return "xxsmall";
         case "xsmall":
@@ -453,10 +480,10 @@ const $e = /* @__PURE__ */ k(ul, [["__scopeId", "data-v-616a29d0"]]), dl = ["pri
         default:
           return "small";
       }
-    }), o = V(() => ["white", "ghost", "secondary"].includes(l.variant) ? "teal" : "white");
-    return (i, r) => (u(), x(re($(t).href ? "a" : "button"), {
-      disabled: e.loading || $(t).disabled,
-      type: $(t).type || "button",
+    }), r = V(() => ["white", "ghost", "secondary"].includes(t.variant) ? "teal" : "white");
+    return l({ randomId: o }), (n, c) => (s(), C(oe(j(a).href ? "a" : "button"), {
+      disabled: e.loading || j(a).disabled,
+      type: j(a).type || "button",
       class: S([
         "joy-button",
         `joy-button_${e.variant}`,
@@ -465,36 +492,42 @@ const $e = /* @__PURE__ */ k(ul, [["__scopeId", "data-v-616a29d0"]]), dl = ["pri
           "joy-button_circle": e.circle,
           "joy-button_loading": e.loading
         }
-      ])
+      ]),
+      "aria-labelledby": (n.$slots.default || e.label) && o
     }, {
-      default: B(() => [
-        e.icon && e.iconPosition === "left" ? (u(), x(J, {
+      default: O(() => [
+        e.icon && e.iconPosition === "left" ? (s(), C(E, {
           key: 0,
           class: "joy-button_icon joy-button_icon--left",
           name: e.icon,
-          size: a.value
-        }, null, 8, ["name", "size"])) : _("", !0),
-        e.loading ? (u(), x($e, {
+          size: i.value,
+          "aria-hidden": "true"
+        }, null, 8, ["name", "size"])) : h("", !0),
+        e.loading ? (s(), C(Ve, {
           key: 1,
-          color: o.value
-        }, null, 8, ["color"])) : _("", !0),
-        h("span", ml, [
-          g(i.$slots, "default", {}, () => [
-            O(C(e.label), 1)
+          color: r.value
+        }, null, 8, ["color"])) : h("", !0),
+        _("span", {
+          id: o,
+          class: "joy-button--slot"
+        }, [
+          g(n.$slots, "default", {}, () => [
+            B(L(e.label), 1)
           ], !0)
         ]),
-        e.icon && e.iconPosition === "right" ? (u(), x(J, {
+        e.icon && e.iconPosition === "right" ? (s(), C(E, {
           key: 2,
           class: "joy-button_icon joy-button_icon--right",
           name: e.icon,
-          size: a.value
-        }, null, 8, ["name", "size"])) : _("", !0)
+          size: i.value,
+          "aria-hidden": "true"
+        }, null, 8, ["name", "size"])) : h("", !0)
       ]),
       _: 3
-    }, 8, ["disabled", "type", "class"]));
+    }, 8, ["disabled", "type", "class", "aria-labelledby"]));
   }
 });
-const lt = /* @__PURE__ */ k(pl, [["__scopeId", "data-v-ae0676bb"]]), hl = ["aria-checked", "aria-hidden"], _l = { class: "joy-checkbox__input-wrapper" }, gl = ["id", "name", "disabled", "checked", "required", "aria-checked", "value", "indeterminate"], bl = { class: "joy-checkbox__content-wrapper" }, wl = { class: "joy-checkbox__content" }, Sl = /* @__PURE__ */ j({
+const xe = /* @__PURE__ */ k(gl, [["__scopeId", "data-v-a1870b08"]]), bl = ["aria-checked", "aria-hidden"], wl = { class: "joy-checkbox__input-wrapper" }, Sl = ["id", "name", "disabled", "checked", "required", "aria-checked", "value", "indeterminate"], $l = { class: "joy-checkbox__content-wrapper" }, jl = { class: "joy-checkbox__content" }, kl = /* @__PURE__ */ $({
   __name: "VJoyCheckbox",
   props: {
     /** Can't be used in addition of v-model. See usage : https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/checkbox#indeterminate_state_checkboxes */
@@ -549,10 +582,10 @@ const lt = /* @__PURE__ */ k(pl, [["__scopeId", "data-v-ae0676bb"]]), hl = ["ari
   },
   emits: ["update:checked", "focus", "blur"],
   setup(e, { expose: l, emit: t }) {
-    const a = e, o = w(), i = w(a.indeterminate), r = w(a.invalid), n = w(!1), d = {
-      onChange: (y) => {
-        const c = y.target.checked;
-        i.value = !1, r.value = !1, t("update:checked", c);
+    const a = e, o = w(), i = w(a.indeterminate), r = w(a.invalid), n = w(!1), c = {
+      onChange: (v) => {
+        const d = v.target.checked;
+        i.value = !1, r.value = !1, t("update:checked", d);
       },
       onFocus: () => {
         n.value = !0, t("focus");
@@ -563,12 +596,12 @@ const lt = /* @__PURE__ */ k(pl, [["__scopeId", "data-v-ae0676bb"]]), hl = ["ari
     };
     return l({
       isIndeterminate: i
-    }), (y, c) => (u(), m("div", {
+    }), (v, d) => (s(), m("div", {
       class: "joy-checkbox__wrapper",
       "aria-checked": e.checked,
       "aria-hidden": e.disabled
     }, [
-      h("label", {
+      _("label", {
         class: S([
           "joy-checkbox",
           {
@@ -580,8 +613,8 @@ const lt = /* @__PURE__ */ k(pl, [["__scopeId", "data-v-ae0676bb"]]), hl = ["ari
           }
         ])
       }, [
-        h("div", _l, [
-          h("input", {
+        _("div", wl, [
+          _("input", {
             id: e.id,
             ref_key: "input",
             ref: o,
@@ -595,27 +628,27 @@ const lt = /* @__PURE__ */ k(pl, [["__scopeId", "data-v-ae0676bb"]]), hl = ["ari
             "aria-checked": e.checked,
             value: e.value,
             indeterminate: i.value,
-            onChange: c[0] || (c[0] = //@ts-ignore
-            (...v) => d.onChange && d.onChange(...v)),
-            onFocus: c[1] || (c[1] = //@ts-ignore
-            (...v) => d.onFocus && d.onFocus(...v)),
-            onBlur: c[2] || (c[2] = //@ts-ignore
-            (...v) => d.onBlur && d.onBlur(...v))
-          }, null, 40, gl)
+            onChange: d[0] || (d[0] = //@ts-ignore
+            (...y) => c.onChange && c.onChange(...y)),
+            onFocus: d[1] || (d[1] = //@ts-ignore
+            (...y) => c.onFocus && c.onFocus(...y)),
+            onBlur: d[2] || (d[2] = //@ts-ignore
+            (...y) => c.onBlur && c.onBlur(...y))
+          }, null, 40, Sl)
         ]),
-        h("div", bl, [
-          g(y.$slots, "default", {}, () => [
-            O(C(e.label), 1)
+        _("div", $l, [
+          g(v.$slots, "default", {}, () => [
+            B(L(e.label), 1)
           ], !0),
-          h("div", wl, [
-            g(y.$slots, "checkbox-content", {}, void 0, !0)
+          _("div", jl, [
+            g(v.$slots, "checkbox-content", {}, void 0, !0)
           ])
         ])
       ], 2)
-    ], 8, hl));
+    ], 8, bl));
   }
 });
-const je = /* @__PURE__ */ k(Sl, [["__scopeId", "data-v-27cc9d8c"]]), $l = ["src", "alt", "title"], jl = /* @__PURE__ */ j({
+const Ce = /* @__PURE__ */ k(kl, [["__scopeId", "data-v-27cc9d8c"]]), Vl = ["src", "alt", "title"], xl = /* @__PURE__ */ $({
   __name: "VJoyCompanyAvatar",
   props: {
     imgSrc: String,
@@ -639,15 +672,15 @@ const je = /* @__PURE__ */ k(Sl, [["__scopeId", "data-v-27cc9d8c"]]), $l = ["src
           return "xsmall";
       }
     });
-    return (a, o) => (u(), m("div", {
+    return (a, o) => (s(), m("div", {
       class: S(["joy-company-avatar", `joy-company-avatar--${e.size}`])
     }, [
-      e.imgSrc ? (u(), m("img", {
+      e.imgSrc ? (s(), m("img", {
         key: 0,
         src: e.imgSrc,
         alt: e.imgAlt || e.companyName,
         title: e.companyName
-      }, null, 8, $l)) : (u(), x($(J), {
+      }, null, 8, Vl)) : (s(), C(j(E), {
         key: 1,
         name: "company-placeholder",
         size: t.value
@@ -655,13 +688,13 @@ const je = /* @__PURE__ */ k(Sl, [["__scopeId", "data-v-27cc9d8c"]]), $l = ["src
     ], 2));
   }
 });
-const kl = /* @__PURE__ */ k(jl, [["__scopeId", "data-v-7ab52b19"]]), Vl = { class: "joy-counter" }, xl = ["aria-label", "disabled"], Cl = { class: "joy-counter__input-wrapper" }, Ll = ["id", "min", "max", "aria-invalid", "name", "required", "value"], Il = ["aria-label", "disabled"], Ol = {
+const Cl = /* @__PURE__ */ k(xl, [["__scopeId", "data-v-7ab52b19"]]), Ll = { class: "joy-counter" }, Il = ["aria-label", "disabled"], Bl = { class: "joy-counter__input-wrapper" }, Ol = ["id", "min", "max", "aria-invalid", "name", "required", "value"], Tl = ["aria-label", "disabled"], Pl = {
   key: 0,
   class: "joy-counter_error"
-}, Bl = {
+}, Jl = {
   inheritAttrs: !1
-}, El = /* @__PURE__ */ j({
-  ...Bl,
+}, El = /* @__PURE__ */ $({
+  ...Jl,
   __name: "VJoyCounter",
   props: {
     /** Removes any interactivity */
@@ -730,30 +763,30 @@ const kl = /* @__PURE__ */ k(jl, [["__scopeId", "data-v-7ab52b19"]]), Vl = { cla
   setup(e, { expose: l, emit: t }) {
     const a = e, o = w(!1), i = w(!1);
     function r() {
-      const p = y(!1);
-      p >= 0 ? t("update:modelValue", p <= a.min ? a.min : p) : t("update:modelValue", 0), d();
+      const p = v(!1);
+      p >= 0 ? t("update:modelValue", p <= a.min ? a.min : p) : t("update:modelValue", 0), c();
     }
     function n() {
-      const p = y();
-      a.max && p <= a.max ? t("update:modelValue", p >= a.max ? a.max : p) : a.max && p > a.max ? t("update:modelValue", a.max) : t("update:modelValue", p), d();
+      const p = v();
+      a.max && p <= a.max ? t("update:modelValue", p >= a.max ? a.max : p) : a.max && p > a.max ? t("update:modelValue", a.max) : t("update:modelValue", p), c();
     }
-    function d() {
-      o.value = !c();
+    function c() {
+      o.value = !d();
     }
-    function y(p = !0) {
-      const b = a.step.toString().split("."), I = b.length === 2 ? b[1].length : 0;
-      return parseFloat(p ? (a.modelValue + a.step).toFixed(I) : (a.modelValue - a.step).toFixed(I));
+    function v(p = !0) {
+      const b = a.step.toString().split("."), x = b.length === 2 ? b[1].length : 0;
+      return parseFloat(p ? (a.modelValue + a.step).toFixed(x) : (a.modelValue - a.step).toFixed(x));
     }
-    function c() {
-      return v() && f();
+    function d() {
+      return y() && f();
     }
-    function v() {
+    function y() {
       return !a.max || a.modelValue <= a.max;
     }
     function f() {
       return a.min <= a.modelValue;
     }
-    const s = {
+    const u = {
       onInput: (p) => {
         t("update:modelValue", +p.target.value || 0), o.value = !1;
       },
@@ -761,40 +794,40 @@ const kl = /* @__PURE__ */ k(jl, [["__scopeId", "data-v-7ab52b19"]]), Vl = { cla
         i.value = !0;
       },
       onBlur: () => {
-        i.value = !1, d();
+        i.value = !1, c();
       }
     };
     return l({
       props: a
-    }), (p, b) => (u(), m("div", Vl, [
-      e.label ? (u(), x($(K), {
+    }), (p, b) => (s(), m("div", Ll, [
+      e.label ? (s(), C(j(ee), {
         key: 0,
         for: e.id,
         required: e.required && e.requiredMark,
         "optional-label": e.optionalLabel,
         size: e.labelSize
       }, {
-        default: B(() => [
+        default: O(() => [
           g(p.$slots, "default", {}, () => [
-            O(C(e.label), 1)
+            B(L(e.label), 1)
           ], !0)
         ]),
         _: 3
-      }, 8, ["for", "required", "optional-label", "size"])) : _("", !0),
-      h("div", {
+      }, 8, ["for", "required", "optional-label", "size"])) : h("", !0),
+      _("div", {
         class: S(["joy-counter__wrapper", { "joy-counter--focusing": i.value }])
       }, [
-        h("button", {
+        _("button", {
           class: "joy-counter__decrement",
           type: "button",
           "aria-label": e.labelDecrement,
           disabled: e.modelValue <= e.min,
           onClick: r
         }, [
-          U($(J), { name: "minus" })
-        ], 8, xl),
-        h("div", Cl, [
-          h("input", G({
+          R(j(E), { name: "minus" })
+        ], 8, Il),
+        _("div", Bl, [
+          _("input", K({
             id: e.id,
             ref: "input",
             type: "number",
@@ -808,30 +841,30 @@ const kl = /* @__PURE__ */ k(jl, [["__scopeId", "data-v-7ab52b19"]]), Vl = { cla
             value: e.modelValue
           }, p.$attrs, {
             onInput: b[0] || (b[0] = //@ts-ignore
-            (...I) => s.onInput && s.onInput(...I)),
+            (...x) => u.onInput && u.onInput(...x)),
             onBlur: b[1] || (b[1] = //@ts-ignore
-            (...I) => s.onBlur && s.onBlur(...I)),
+            (...x) => u.onBlur && u.onBlur(...x)),
             onFocus: b[2] || (b[2] = //@ts-ignore
-            (...I) => s.onFocus && s.onFocus(...I))
-          }), null, 16, Ll)
+            (...x) => u.onFocus && u.onFocus(...x))
+          }), null, 16, Ol)
         ]),
-        h("button", {
+        _("button", {
           class: "joy-counter__increment",
           type: "button",
           "aria-label": e.labelIncrement,
           disabled: e.max ? e.modelValue >= e.max : !1,
           onClick: n
         }, [
-          U($(J), { name: "add" })
-        ], 8, Il),
-        e.invalid && e.errorMessage ? (u(), m("div", Ol, [
-          U($(dt), { "no-html-error-text": e.errorMessage }, null, 8, ["no-html-error-text"])
-        ])) : _("", !0)
+          R(j(E), { name: "add" })
+        ], 8, Tl),
+        e.invalid && e.errorMessage ? (s(), m("div", Pl, [
+          R(j(ft), { "no-html-error-text": e.errorMessage }, null, 8, ["no-html-error-text"])
+        ])) : h("", !0)
       ], 2)
     ]));
   }
 });
-const Tl = /* @__PURE__ */ k(El, [["__scopeId", "data-v-a59ac0ad"]]), Jl = ["disabled"], Pl = { class: "joy-divider-cta--icon" }, zl = { class: "joy-divider-cta--content" }, Al = { class: "joy-divider-cta--content---title" }, Fl = /* @__PURE__ */ j({
+const zl = /* @__PURE__ */ k(El, [["__scopeId", "data-v-a59ac0ad"]]), Al = ["disabled"], Fl = { class: "joy-divider-cta--icon" }, ql = { class: "joy-divider-cta--content" }, Nl = { class: "joy-divider-cta--content---title" }, Ml = /* @__PURE__ */ $({
   __name: "VJoyDividerCta",
   props: {
     disabled: {
@@ -840,31 +873,31 @@ const Tl = /* @__PURE__ */ k(El, [["__scopeId", "data-v-a59ac0ad"]]), Jl = ["dis
     }
   },
   setup(e) {
-    return (l, t) => (u(), m("button", {
+    return (l, t) => (s(), m("button", {
       type: "button",
       class: S(["joy-divider-cta", { "joy-divider-cta__disabled": e.disabled }]),
       disabled: e.disabled
     }, [
-      h("div", Pl, [
-        U(J, { name: "add" })
+      _("div", Fl, [
+        R(E, { name: "add" })
       ]),
-      h("div", zl, [
-        h("p", Al, [
+      _("div", ql, [
+        _("p", Nl, [
           g(l.$slots, "default", {}, void 0, !0)
         ]),
         g(l.$slots, "divider-content", {}, void 0, !0)
       ])
-    ], 10, Jl));
+    ], 10, Al));
   }
 });
-const ql = /* @__PURE__ */ k(Fl, [["__scopeId", "data-v-a3d693c3"]]);
-var Ce;
-const te = typeof window < "u", at = (e) => typeof e == "string", M = () => {
-}, ie = te && ((Ce = window == null ? void 0 : window.navigator) == null ? void 0 : Ce.userAgent) && /iP(ad|hone|od)/.test(window.navigator.userAgent);
+const Rl = /* @__PURE__ */ k(Ml, [["__scopeId", "data-v-a3d693c3"]]);
+var Oe;
+const le = typeof window < "u", nt = (e) => typeof e == "string", N = () => {
+}, re = le && ((Oe = window == null ? void 0 : window.navigator) == null ? void 0 : Oe.userAgent) && /iP(ad|hone|od)/.test(window.navigator.userAgent);
 function A(e) {
-  return typeof e == "function" ? e() : $(e);
+  return typeof e == "function" ? e() : j(e);
 }
-function ot(e, l) {
+function it(e, l) {
   function t(...a) {
     return new Promise((o, i) => {
       Promise.resolve(e(() => l.apply(this, a), { fn: l, thisArg: this, args: a })).then(o).catch(i);
@@ -872,175 +905,175 @@ function ot(e, l) {
   }
   return t;
 }
-function Ml(e, l = {}) {
-  let t, a, o = M;
+function Hl(e, l = {}) {
+  let t, a, o = N;
   const i = (n) => {
-    clearTimeout(n), o(), o = M;
+    clearTimeout(n), o(), o = N;
   };
   return (n) => {
-    const d = A(e), y = A(l.maxWait);
-    return t && i(t), d <= 0 || y !== void 0 && y <= 0 ? (a && (i(a), a = null), Promise.resolve(n())) : new Promise((c, v) => {
-      o = l.rejectOnCancel ? v : c, y && !a && (a = setTimeout(() => {
-        t && i(t), a = null, c(n());
-      }, y)), t = setTimeout(() => {
-        a && i(a), a = null, c(n());
-      }, d);
+    const c = A(e), v = A(l.maxWait);
+    return t && i(t), c <= 0 || v !== void 0 && v <= 0 ? (a && (i(a), a = null), Promise.resolve(n())) : new Promise((d, y) => {
+      o = l.rejectOnCancel ? y : d, v && !a && (a = setTimeout(() => {
+        t && i(t), a = null, d(n());
+      }, v)), t = setTimeout(() => {
+        a && i(a), a = null, d(n());
+      }, c);
     });
   };
 }
-function Nl(e, l = !0, t = !0, a = !1) {
-  let o = 0, i, r = !0, n = M, d;
-  const y = () => {
-    i && (clearTimeout(i), i = void 0, n(), n = M);
+function Dl(e, l = !0, t = !0, a = !1) {
+  let o = 0, i, r = !0, n = N, c;
+  const v = () => {
+    i && (clearTimeout(i), i = void 0, n(), n = N);
   };
-  return (v) => {
-    const f = A(e), s = Date.now() - o, p = () => d = v();
-    return y(), f <= 0 ? (o = Date.now(), p()) : (s > f && (t || !r) ? (o = Date.now(), p()) : l && (d = new Promise((b, I) => {
-      n = a ? I : b, i = setTimeout(() => {
-        o = Date.now(), r = !0, b(p()), y();
-      }, Math.max(0, f - s));
-    })), !t && !i && (i = setTimeout(() => r = !0, f)), r = !1, d);
+  return (y) => {
+    const f = A(e), u = Date.now() - o, p = () => c = y();
+    return v(), f <= 0 ? (o = Date.now(), p()) : (u > f && (t || !r) ? (o = Date.now(), p()) : l && (c = new Promise((b, x) => {
+      n = a ? x : b, i = setTimeout(() => {
+        o = Date.now(), r = !0, b(p()), v();
+      }, Math.max(0, f - u));
+    })), !t && !i && (i = setTimeout(() => r = !0, f)), r = !1, c);
   };
 }
-const H = {
+const W = {
   mounted: "mounted",
   updated: "updated",
   unmounted: "unmounted"
 };
-function Rl(e) {
+function Wl(e) {
   return e;
 }
-function le(e) {
-  return mt() ? (pt(e), !0) : !1;
+function ae(e) {
+  return _t() ? (ht(e), !0) : !1;
 }
-function Hl(e, l = 200, t = {}) {
-  return ot(Ml(l, t), e);
+function Gl(e, l = 200, t = {}) {
+  return it(Hl(l, t), e);
 }
-function Dl(e, l = 200, t = !1, a = !0, o = !1) {
-  return ot(Nl(l, t, a, o), e);
+function Ul(e, l = 200, t = !1, a = !0, o = !1) {
+  return it(Dl(l, t, a, o), e);
 }
-function Ul(e) {
+function Zl(e) {
   return typeof e == "function" ? V(e) : w(e);
 }
-function nt(e, l = !0) {
-  ht() ? X(e) : l ? e() : Qe(e);
+function rt(e, l = !0) {
+  gt() ? Q(e) : l ? e() : lt(e);
 }
-function Q(e) {
+function te(e) {
   var l;
   const t = A(e);
   return (l = t == null ? void 0 : t.$el) != null ? l : t;
 }
-const ke = te ? window : void 0;
-te && window.document;
-te && window.navigator;
-te && window.location;
-function ye(...e) {
+const Le = le ? window : void 0;
+le && window.document;
+le && window.navigator;
+le && window.location;
+function ve(...e) {
   let l, t, a, o;
-  if (at(e[0]) || Array.isArray(e[0]) ? ([t, a, o] = e, l = ke) : [l, t, a, o] = e, !l)
-    return M;
+  if (nt(e[0]) || Array.isArray(e[0]) ? ([t, a, o] = e, l = Le) : [l, t, a, o] = e, !l)
+    return N;
   Array.isArray(t) || (t = [t]), Array.isArray(a) || (a = [a]);
   const i = [], r = () => {
-    i.forEach((c) => c()), i.length = 0;
-  }, n = (c, v, f, s) => (c.addEventListener(v, f, s), () => c.removeEventListener(v, f, s)), d = E(() => [Q(l), A(o)], ([c, v]) => {
-    r(), c && i.push(...t.flatMap((f) => a.map((s) => n(c, f, s, v))));
-  }, { immediate: !0, flush: "post" }), y = () => {
-    d(), r();
+    i.forEach((d) => d()), i.length = 0;
+  }, n = (d, y, f, u) => (d.addEventListener(y, f, u), () => d.removeEventListener(y, f, u)), c = P(() => [te(l), A(o)], ([d, y]) => {
+    r(), d && i.push(...t.flatMap((f) => a.map((u) => n(d, f, u, y))));
+  }, { immediate: !0, flush: "post" }), v = () => {
+    c(), r();
   };
-  return le(y), y;
+  return ae(v), v;
 }
-let Le = !1;
-function Wl(e, l, t = {}) {
-  const { window: a = ke, ignore: o = [], capture: i = !0, detectIframe: r = !1 } = t;
+let Te = !1;
+function Kl(e, l, t = {}) {
+  const { window: a = Le, ignore: o = [], capture: i = !0, detectIframe: r = !1 } = t;
   if (!a)
     return;
-  ie && !Le && (Le = !0, Array.from(a.document.body.children).forEach((f) => f.addEventListener("click", M)));
+  re && !Te && (Te = !0, Array.from(a.document.body.children).forEach((f) => f.addEventListener("click", N)));
   let n = !0;
-  const d = (f) => o.some((s) => {
-    if (typeof s == "string")
-      return Array.from(a.document.querySelectorAll(s)).some((p) => p === f.target || f.composedPath().includes(p));
+  const c = (f) => o.some((u) => {
+    if (typeof u == "string")
+      return Array.from(a.document.querySelectorAll(u)).some((p) => p === f.target || f.composedPath().includes(p));
     {
-      const p = Q(s);
+      const p = te(u);
       return p && (f.target === p || f.composedPath().includes(p));
     }
-  }), c = [
-    ye(a, "click", (f) => {
-      const s = Q(e);
-      if (!(!s || s === f.target || f.composedPath().includes(s))) {
-        if (f.detail === 0 && (n = !d(f)), !n) {
+  }), d = [
+    ve(a, "click", (f) => {
+      const u = te(e);
+      if (!(!u || u === f.target || f.composedPath().includes(u))) {
+        if (f.detail === 0 && (n = !c(f)), !n) {
           n = !0;
           return;
         }
         l(f);
       }
     }, { passive: !0, capture: i }),
-    ye(a, "pointerdown", (f) => {
-      const s = Q(e);
-      s && (n = !f.composedPath().includes(s) && !d(f));
+    ve(a, "pointerdown", (f) => {
+      const u = te(e);
+      u && (n = !f.composedPath().includes(u) && !c(f));
     }, { passive: !0 }),
-    r && ye(a, "blur", (f) => {
-      var s;
-      const p = Q(e);
-      ((s = a.document.activeElement) == null ? void 0 : s.tagName) === "IFRAME" && !(p != null && p.contains(a.document.activeElement)) && l(f);
+    r && ve(a, "blur", (f) => {
+      var u;
+      const p = te(e);
+      ((u = a.document.activeElement) == null ? void 0 : u.tagName) === "IFRAME" && !(p != null && p.contains(a.document.activeElement)) && l(f);
     })
   ].filter(Boolean);
-  return () => c.forEach((f) => f());
+  return () => d.forEach((f) => f());
 }
-function Gl(e, l = !1) {
+function Ql(e, l = !1) {
   const t = w(), a = () => t.value = Boolean(e());
-  return a(), nt(a, l), t;
+  return a(), rt(a, l), t;
 }
-const me = typeof globalThis < "u" ? globalThis : typeof window < "u" ? window : typeof global < "u" ? global : typeof self < "u" ? self : {}, pe = "__vueuse_ssr_handlers__";
-me[pe] = me[pe] || {};
-me[pe];
-var Ie = Object.getOwnPropertySymbols, Zl = Object.prototype.hasOwnProperty, Kl = Object.prototype.propertyIsEnumerable, Ql = (e, l) => {
+const me = typeof globalThis < "u" ? globalThis : typeof window < "u" ? window : typeof global < "u" ? global : typeof self < "u" ? self : {}, _e = "__vueuse_ssr_handlers__";
+me[_e] = me[_e] || {};
+me[_e];
+var Pe = Object.getOwnPropertySymbols, Yl = Object.prototype.hasOwnProperty, Xl = Object.prototype.propertyIsEnumerable, ea = (e, l) => {
   var t = {};
   for (var a in e)
-    Zl.call(e, a) && l.indexOf(a) < 0 && (t[a] = e[a]);
-  if (e != null && Ie)
-    for (var a of Ie(e))
-      l.indexOf(a) < 0 && Kl.call(e, a) && (t[a] = e[a]);
+    Yl.call(e, a) && l.indexOf(a) < 0 && (t[a] = e[a]);
+  if (e != null && Pe)
+    for (var a of Pe(e))
+      l.indexOf(a) < 0 && Xl.call(e, a) && (t[a] = e[a]);
   return t;
 };
-function Yl(e, l, t = {}) {
-  const a = t, { window: o = ke } = a, i = Ql(a, ["window"]);
+function ta(e, l, t = {}) {
+  const a = t, { window: o = Le } = a, i = ea(a, ["window"]);
   let r;
-  const n = Gl(() => o && "ResizeObserver" in o), d = () => {
+  const n = Ql(() => o && "ResizeObserver" in o), c = () => {
     r && (r.disconnect(), r = void 0);
-  }, y = E(() => Q(e), (v) => {
-    d(), n.value && o && v && (r = new ResizeObserver(l), r.observe(v, i));
-  }, { immediate: !0, flush: "post" }), c = () => {
-    d(), y();
+  }, v = P(() => te(e), (y) => {
+    c(), n.value && o && y && (r = new ResizeObserver(l), r.observe(y, i));
+  }, { immediate: !0, flush: "post" }), d = () => {
+    c(), v();
   };
-  return le(c), {
+  return ae(d), {
     isSupported: n,
-    stop: c
+    stop: d
   };
 }
-var Oe;
+var Je;
 (function(e) {
   e.UP = "UP", e.RIGHT = "RIGHT", e.DOWN = "DOWN", e.LEFT = "LEFT", e.NONE = "NONE";
-})(Oe || (Oe = {}));
-function Xl(e) {
+})(Je || (Je = {}));
+function la(e) {
   const l = w(e == null ? void 0 : e.element), t = w(e == null ? void 0 : e.input);
   function a() {
     var o, i;
     l.value && (l.value.style.height = "1px", l.value.style.height = `${(o = l.value) == null ? void 0 : o.scrollHeight}px`, (i = e == null ? void 0 : e.onResize) == null || i.call(e));
   }
-  return E([t, l], a, { immediate: !0 }), Yl(l, () => a()), e != null && e.watch && E(e.watch, a, { immediate: !0, deep: !0 }), {
+  return P([t, l], a, { immediate: !0 }), ta(l, () => a()), e != null && e.watch && P(e.watch, a, { immediate: !0, deep: !0 }), {
     textarea: l,
     input: t,
     triggerResize: a
   };
 }
-var ea = Object.defineProperty, Be = Object.getOwnPropertySymbols, ta = Object.prototype.hasOwnProperty, la = Object.prototype.propertyIsEnumerable, Ee = (e, l, t) => l in e ? ea(e, l, { enumerable: !0, configurable: !0, writable: !0, value: t }) : e[l] = t, aa = (e, l) => {
+var aa = Object.defineProperty, Ee = Object.getOwnPropertySymbols, oa = Object.prototype.hasOwnProperty, na = Object.prototype.propertyIsEnumerable, ze = (e, l, t) => l in e ? aa(e, l, { enumerable: !0, configurable: !0, writable: !0, value: t }) : e[l] = t, ia = (e, l) => {
   for (var t in l || (l = {}))
-    ta.call(l, t) && Ee(e, t, l[t]);
-  if (Be)
-    for (var t of Be(l))
-      la.call(l, t) && Ee(e, t, l[t]);
+    oa.call(l, t) && ze(e, t, l[t]);
+  if (Ee)
+    for (var t of Ee(l))
+      na.call(l, t) && ze(e, t, l[t]);
   return e;
 };
-const oa = {
+const ra = {
   easeInSine: [0.12, 0, 0.39, 0],
   easeOutSine: [0.61, 1, 0.88, 1],
   easeInOutSine: [0.37, 0, 0.63, 1],
@@ -1066,20 +1099,20 @@ const oa = {
   easeOutBack: [0.34, 1.56, 0.64, 1],
   easeInOutBack: [0.68, -0.6, 0.32, 1.6]
 };
-aa({
-  linear: Rl
-}, oa);
-const na = /* @__PURE__ */ j({
+ia({
+  linear: Wl
+}, ra);
+const sa = /* @__PURE__ */ $({
   name: "OnClickOutside",
   props: ["as", "options"],
   emits: ["trigger"],
   setup(e, { slots: l, emit: t }) {
     const a = w();
-    return Wl(a, (o) => {
+    return Kl(a, (o) => {
       t("trigger", o);
     }, e.options), () => {
       if (l.default)
-        return _t(e.as || "div", { ref: a }, l.default());
+        return bt(e.as || "div", { ref: a }, l.default());
     };
   }
 });
@@ -1088,164 +1121,164 @@ function F(e) {
   const t = A(e);
   return (l = t == null ? void 0 : t.$el) != null ? l : t;
 }
-const Z = te ? window : void 0;
-function N(...e) {
+const X = le ? window : void 0;
+function M(...e) {
   let l, t, a, o;
-  if (at(e[0]) || Array.isArray(e[0]) ? ([t, a, o] = e, l = Z) : [l, t, a, o] = e, !l)
-    return M;
+  if (nt(e[0]) || Array.isArray(e[0]) ? ([t, a, o] = e, l = X) : [l, t, a, o] = e, !l)
+    return N;
   Array.isArray(t) || (t = [t]), Array.isArray(a) || (a = [a]);
   const i = [], r = () => {
-    i.forEach((c) => c()), i.length = 0;
-  }, n = (c, v, f, s) => (c.addEventListener(v, f, s), () => c.removeEventListener(v, f, s)), d = E(() => [F(l), A(o)], ([c, v]) => {
-    r(), c && i.push(...t.flatMap((f) => a.map((s) => n(c, f, s, v))));
-  }, { immediate: !0, flush: "post" }), y = () => {
-    d(), r();
+    i.forEach((d) => d()), i.length = 0;
+  }, n = (d, y, f, u) => (d.addEventListener(y, f, u), () => d.removeEventListener(y, f, u)), c = P(() => [F(l), A(o)], ([d, y]) => {
+    r(), d && i.push(...t.flatMap((f) => a.map((u) => n(d, f, u, y))));
+  }, { immediate: !0, flush: "post" }), v = () => {
+    c(), r();
   };
-  return le(y), y;
+  return ae(v), v;
 }
-let Te = !1;
-function Je(e, l, t = {}) {
-  const { window: a = Z, ignore: o = [], capture: i = !0, detectIframe: r = !1 } = t;
+let Ae = !1;
+function Fe(e, l, t = {}) {
+  const { window: a = X, ignore: o = [], capture: i = !0, detectIframe: r = !1 } = t;
   if (!a)
     return;
-  ie && !Te && (Te = !0, Array.from(a.document.body.children).forEach((f) => f.addEventListener("click", M)));
+  re && !Ae && (Ae = !0, Array.from(a.document.body.children).forEach((f) => f.addEventListener("click", N)));
   let n = !0;
-  const d = (f) => o.some((s) => {
-    if (typeof s == "string")
-      return Array.from(a.document.querySelectorAll(s)).some((p) => p === f.target || f.composedPath().includes(p));
+  const c = (f) => o.some((u) => {
+    if (typeof u == "string")
+      return Array.from(a.document.querySelectorAll(u)).some((p) => p === f.target || f.composedPath().includes(p));
     {
-      const p = F(s);
+      const p = F(u);
       return p && (f.target === p || f.composedPath().includes(p));
     }
-  }), c = [
-    N(a, "click", (f) => {
-      const s = F(e);
-      if (!(!s || s === f.target || f.composedPath().includes(s))) {
-        if (f.detail === 0 && (n = !d(f)), !n) {
+  }), d = [
+    M(a, "click", (f) => {
+      const u = F(e);
+      if (!(!u || u === f.target || f.composedPath().includes(u))) {
+        if (f.detail === 0 && (n = !c(f)), !n) {
           n = !0;
           return;
         }
         l(f);
       }
     }, { passive: !0, capture: i }),
-    N(a, "pointerdown", (f) => {
-      const s = F(e);
-      s && (n = !f.composedPath().includes(s) && !d(f));
+    M(a, "pointerdown", (f) => {
+      const u = F(e);
+      u && (n = !f.composedPath().includes(u) && !c(f));
     }, { passive: !0 }),
-    r && N(a, "blur", (f) => {
-      var s;
+    r && M(a, "blur", (f) => {
+      var u;
       const p = F(e);
-      ((s = a.document.activeElement) == null ? void 0 : s.tagName) === "IFRAME" && !(p != null && p.contains(a.document.activeElement)) && l(f);
+      ((u = a.document.activeElement) == null ? void 0 : u.tagName) === "IFRAME" && !(p != null && p.contains(a.document.activeElement)) && l(f);
     })
   ].filter(Boolean);
-  return () => c.forEach((f) => f());
+  return () => d.forEach((f) => f());
 }
-H.mounted + "", H.unmounted + "";
-const ia = (e) => typeof e == "function" ? e : typeof e == "string" ? (l) => l.key === e : Array.isArray(e) ? (l) => e.includes(l.key) : () => !0;
-function Pe(...e) {
+W.mounted + "", W.unmounted + "";
+const ua = (e) => typeof e == "function" ? e : typeof e == "string" ? (l) => l.key === e : Array.isArray(e) ? (l) => e.includes(l.key) : () => !0;
+function qe(...e) {
   let l, t, a = {};
   e.length === 3 ? (l = e[0], t = e[1], a = e[2]) : e.length === 2 ? typeof e[1] == "object" ? (l = !0, t = e[0], a = e[1]) : (l = e[0], t = e[1]) : (l = !0, t = e[0]);
-  const { target: o = Z, eventName: i = "keydown", passive: r = !1 } = a, n = ia(l);
-  return N(o, i, (y) => {
-    n(y) && t(y);
+  const { target: o = X, eventName: i = "keydown", passive: r = !1 } = a, n = ua(l);
+  return M(o, i, (v) => {
+    n(v) && t(v);
   }, r);
 }
-var ra = Object.defineProperty, ze = Object.getOwnPropertySymbols, sa = Object.prototype.hasOwnProperty, ua = Object.prototype.propertyIsEnumerable, Ae = (e, l, t) => l in e ? ra(e, l, { enumerable: !0, configurable: !0, writable: !0, value: t }) : e[l] = t, da = (e, l) => {
+var da = Object.defineProperty, Ne = Object.getOwnPropertySymbols, ca = Object.prototype.hasOwnProperty, fa = Object.prototype.propertyIsEnumerable, Me = (e, l, t) => l in e ? da(e, l, { enumerable: !0, configurable: !0, writable: !0, value: t }) : e[l] = t, ya = (e, l) => {
   for (var t in l || (l = {}))
-    sa.call(l, t) && Ae(e, t, l[t]);
-  if (ze)
-    for (var t of ze(l))
-      ua.call(l, t) && Ae(e, t, l[t]);
+    ca.call(l, t) && Me(e, t, l[t]);
+  if (Ne)
+    for (var t of Ne(l))
+      fa.call(l, t) && Me(e, t, l[t]);
   return e;
 };
-H.mounted + "";
-const ca = 500;
-function Fe(e, l, t) {
+W.mounted + "";
+const va = 500;
+function Re(e, l, t) {
   var a, o;
   const i = V(() => F(e));
   let r;
   function n() {
     r && (clearTimeout(r), r = void 0);
   }
-  function d(c) {
-    var v, f, s, p;
-    (v = t == null ? void 0 : t.modifiers) != null && v.self && c.target !== i.value || (n(), (f = t == null ? void 0 : t.modifiers) != null && f.prevent && c.preventDefault(), (s = t == null ? void 0 : t.modifiers) != null && s.stop && c.stopPropagation(), r = setTimeout(() => l(c), (p = t == null ? void 0 : t.delay) != null ? p : ca));
+  function c(d) {
+    var y, f, u, p;
+    (y = t == null ? void 0 : t.modifiers) != null && y.self && d.target !== i.value || (n(), (f = t == null ? void 0 : t.modifiers) != null && f.prevent && d.preventDefault(), (u = t == null ? void 0 : t.modifiers) != null && u.stop && d.stopPropagation(), r = setTimeout(() => l(d), (p = t == null ? void 0 : t.delay) != null ? p : va));
   }
-  const y = {
+  const v = {
     capture: (a = t == null ? void 0 : t.modifiers) == null ? void 0 : a.capture,
     once: (o = t == null ? void 0 : t.modifiers) == null ? void 0 : o.once
   };
-  N(i, "pointerdown", d, y), N(i, "pointerup", n, y), N(i, "pointerleave", n, y);
+  M(i, "pointerdown", c, v), M(i, "pointerup", n, v), M(i, "pointerleave", n, v);
 }
-H.mounted + "";
-const he = typeof globalThis < "u" ? globalThis : typeof window < "u" ? window : typeof global < "u" ? global : typeof self < "u" ? self : {}, _e = "__vueuse_ssr_handlers__";
-he[_e] = he[_e] || {};
-he[_e];
-function it(e, l = !1) {
+W.mounted + "";
+const he = typeof globalThis < "u" ? globalThis : typeof window < "u" ? window : typeof global < "u" ? global : typeof self < "u" ? self : {}, ge = "__vueuse_ssr_handlers__";
+he[ge] = he[ge] || {};
+he[ge];
+function st(e, l = !1) {
   const t = w(), a = () => t.value = Boolean(e());
-  return a(), nt(a, l), t;
+  return a(), rt(a, l), t;
 }
-function fa(e, l = {}) {
+function pa(e, l = {}) {
   const t = l ? l.delayEnter : 0, a = l ? l.delayLeave : 0, o = w(!1);
   let i;
   const r = (n) => {
-    const d = n ? t : a;
-    i && (clearTimeout(i), i = void 0), d ? i = setTimeout(() => o.value = n, d) : o.value = n;
+    const c = n ? t : a;
+    i && (clearTimeout(i), i = void 0), c ? i = setTimeout(() => o.value = n, c) : o.value = n;
   };
-  return window && (N(e, "mouseenter", () => r(!0), { passive: !0 }), N(e, "mouseleave", () => r(!1), { passive: !0 })), o;
+  return window && (M(e, "mouseenter", () => r(!0), { passive: !0 }), M(e, "mouseleave", () => r(!1), { passive: !0 })), o;
 }
-H.mounted + "";
-var qe = Object.getOwnPropertySymbols, ya = Object.prototype.hasOwnProperty, va = Object.prototype.propertyIsEnumerable, ma = (e, l) => {
+W.mounted + "";
+var He = Object.getOwnPropertySymbols, ma = Object.prototype.hasOwnProperty, _a = Object.prototype.propertyIsEnumerable, ha = (e, l) => {
   var t = {};
   for (var a in e)
-    ya.call(e, a) && l.indexOf(a) < 0 && (t[a] = e[a]);
-  if (e != null && qe)
-    for (var a of qe(e))
-      l.indexOf(a) < 0 && va.call(e, a) && (t[a] = e[a]);
+    ma.call(e, a) && l.indexOf(a) < 0 && (t[a] = e[a]);
+  if (e != null && He)
+    for (var a of He(e))
+      l.indexOf(a) < 0 && _a.call(e, a) && (t[a] = e[a]);
   return t;
 };
-function pa(e, l, t = {}) {
-  const a = t, { window: o = Z } = a, i = ma(a, ["window"]);
+function ga(e, l, t = {}) {
+  const a = t, { window: o = X } = a, i = ha(a, ["window"]);
   let r;
-  const n = it(() => o && "ResizeObserver" in o), d = () => {
+  const n = st(() => o && "ResizeObserver" in o), c = () => {
     r && (r.disconnect(), r = void 0);
-  }, y = E(() => F(e), (v) => {
-    d(), n.value && o && v && (r = new ResizeObserver(l), r.observe(v, i));
-  }, { immediate: !0, flush: "post" }), c = () => {
-    d(), y();
+  }, v = P(() => F(e), (y) => {
+    c(), n.value && o && y && (r = new ResizeObserver(l), r.observe(y, i));
+  }, { immediate: !0, flush: "post" }), d = () => {
+    c(), v();
   };
-  return le(c), {
+  return ae(d), {
     isSupported: n,
-    stop: c
+    stop: d
   };
 }
-function ha(e, l = { width: 0, height: 0 }, t = {}) {
-  const { window: a = Z, box: o = "content-box" } = t, i = V(() => {
-    var d, y;
-    return (y = (d = F(e)) == null ? void 0 : d.namespaceURI) == null ? void 0 : y.includes("svg");
+function ba(e, l = { width: 0, height: 0 }, t = {}) {
+  const { window: a = X, box: o = "content-box" } = t, i = V(() => {
+    var c, v;
+    return (v = (c = F(e)) == null ? void 0 : c.namespaceURI) == null ? void 0 : v.includes("svg");
   }), r = w(l.width), n = w(l.height);
-  return pa(e, ([d]) => {
-    const y = o === "border-box" ? d.borderBoxSize : o === "content-box" ? d.contentBoxSize : d.devicePixelContentBoxSize;
+  return ga(e, ([c]) => {
+    const v = o === "border-box" ? c.borderBoxSize : o === "content-box" ? c.contentBoxSize : c.devicePixelContentBoxSize;
     if (a && i.value) {
-      const c = F(e);
-      if (c) {
-        const v = a.getComputedStyle(c);
-        r.value = parseFloat(v.width), n.value = parseFloat(v.height);
+      const d = F(e);
+      if (d) {
+        const y = a.getComputedStyle(d);
+        r.value = parseFloat(y.width), n.value = parseFloat(y.height);
       }
-    } else if (y) {
-      const c = Array.isArray(y) ? y : [y];
-      r.value = c.reduce((v, { inlineSize: f }) => v + f, 0), n.value = c.reduce((v, { blockSize: f }) => v + f, 0);
+    } else if (v) {
+      const d = Array.isArray(v) ? v : [v];
+      r.value = d.reduce((y, { inlineSize: f }) => y + f, 0), n.value = d.reduce((y, { blockSize: f }) => y + f, 0);
     } else
-      r.value = d.contentRect.width, n.value = d.contentRect.height;
-  }, t), E(() => F(e), (d) => {
-    r.value = d ? l.width : 0, n.value = d ? l.height : 0;
+      r.value = c.contentRect.width, n.value = c.contentRect.height;
+  }, t), P(() => F(e), (c) => {
+    r.value = c ? l.width : 0, n.value = c ? l.height : 0;
   }), {
     width: r,
     height: n
   };
 }
-H.mounted + "";
-function Me(e, { window: l = Z, scrollTarget: t } = {}) {
+W.mounted + "";
+function De(e, { window: l = X, scrollTarget: t } = {}) {
   const a = w(!1), o = () => {
     if (!l)
       return;
@@ -1257,19 +1290,19 @@ function Me(e, { window: l = Z, scrollTarget: t } = {}) {
       a.value = n.top <= (l.innerHeight || i.documentElement.clientHeight) && n.left <= (l.innerWidth || i.documentElement.clientWidth) && n.bottom >= 0 && n.right >= 0;
     }
   };
-  return E(() => F(e), () => o(), { immediate: !0, flush: "post" }), l && N(t || l, "scroll", o, {
+  return P(() => F(e), () => o(), { immediate: !0, flush: "post" }), l && M(t || l, "scroll", o, {
     capture: !1,
     passive: !0
   }), a;
 }
-H.mounted + "";
-const Ne = 1;
-function ge(e, l = {}) {
+W.mounted + "";
+const We = 1;
+function be(e, l = {}) {
   const {
     throttle: t = 0,
     idle: a = 200,
-    onStop: o = M,
-    onScroll: i = M,
+    onStop: o = N,
+    onScroll: i = N,
     offset: r = {
       left: 0,
       right: 0,
@@ -1280,163 +1313,163 @@ function ge(e, l = {}) {
       capture: !1,
       passive: !0
     },
-    behavior: d = "auto"
-  } = l, y = w(0), c = w(0), v = V({
+    behavior: c = "auto"
+  } = l, v = w(0), d = w(0), y = V({
     get() {
-      return y.value;
+      return v.value;
     },
-    set(P) {
-      s(P, void 0);
+    set(z) {
+      u(z, void 0);
     }
   }), f = V({
     get() {
-      return c.value;
+      return d.value;
     },
-    set(P) {
-      s(void 0, P);
+    set(z) {
+      u(void 0, z);
     }
   });
-  function s(P, L) {
-    var D, q, xe;
-    const fe = A(e);
-    fe && ((xe = fe instanceof Document ? document.body : fe) == null || xe.scrollTo({
-      top: (D = A(L)) != null ? D : f.value,
-      left: (q = A(P)) != null ? q : v.value,
-      behavior: A(d)
+  function u(z, I) {
+    var G, q, Be;
+    const ye = A(e);
+    ye && ((Be = ye instanceof Document ? document.body : ye) == null || Be.scrollTo({
+      top: (G = A(I)) != null ? G : f.value,
+      left: (q = A(z)) != null ? q : y.value,
+      behavior: A(c)
     }));
   }
-  const p = w(!1), b = ve({
+  const p = w(!1), b = pe({
     left: !0,
     right: !1,
     top: !0,
     bottom: !1
-  }), I = ve({
+  }), x = pe({
     left: !1,
     right: !1,
     top: !1,
     bottom: !1
-  }), z = (P) => {
-    p.value && (p.value = !1, I.left = !1, I.right = !1, I.top = !1, I.bottom = !1, o(P));
-  }, ce = Hl(z, t + a), oe = (P) => {
-    const L = P.target === document ? P.target.documentElement : P.target, D = L.scrollLeft;
-    I.left = D < y.value, I.right = D > c.value, b.left = D <= 0 + (r.left || 0), b.right = D + L.clientWidth >= L.scrollWidth - (r.right || 0) - Ne, y.value = D;
-    let q = L.scrollTop;
-    P.target === document && !q && (q = document.body.scrollTop), I.top = q < c.value, I.bottom = q > c.value, b.top = q <= 0 + (r.top || 0), b.bottom = q + L.clientHeight >= L.scrollHeight - (r.bottom || 0) - Ne, c.value = q, p.value = !0, ce(P), i(P);
+  }), T = (z) => {
+    p.value && (p.value = !1, x.left = !1, x.right = !1, x.top = !1, x.bottom = !1, o(z));
+  }, fe = Gl(T, t + a), ne = (z) => {
+    const I = z.target === document ? z.target.documentElement : z.target, G = I.scrollLeft;
+    x.left = G < v.value, x.right = G > d.value, b.left = G <= 0 + (r.left || 0), b.right = G + I.clientWidth >= I.scrollWidth - (r.right || 0) - We, v.value = G;
+    let q = I.scrollTop;
+    z.target === document && !q && (q = document.body.scrollTop), x.top = q < d.value, x.bottom = q > d.value, b.top = q <= 0 + (r.top || 0), b.bottom = q + I.clientHeight >= I.scrollHeight - (r.bottom || 0) - We, d.value = q, p.value = !0, fe(z), i(z);
   };
-  return N(e, "scroll", t ? Dl(oe, t, !0, !1) : oe, n), N(e, "scrollend", z, n), {
-    x: v,
+  return M(e, "scroll", t ? Ul(ne, t, !0, !1) : ne, n), M(e, "scrollend", T, n), {
+    x: y,
     y: f,
     isScrolling: p,
     arrivedState: b,
-    directions: I
+    directions: x
   };
 }
-var _a = Object.defineProperty, ga = Object.defineProperties, ba = Object.getOwnPropertyDescriptors, Re = Object.getOwnPropertySymbols, wa = Object.prototype.hasOwnProperty, Sa = Object.prototype.propertyIsEnumerable, He = (e, l, t) => l in e ? _a(e, l, { enumerable: !0, configurable: !0, writable: !0, value: t }) : e[l] = t, De = (e, l) => {
+var wa = Object.defineProperty, Sa = Object.defineProperties, $a = Object.getOwnPropertyDescriptors, Ge = Object.getOwnPropertySymbols, ja = Object.prototype.hasOwnProperty, ka = Object.prototype.propertyIsEnumerable, Ue = (e, l, t) => l in e ? wa(e, l, { enumerable: !0, configurable: !0, writable: !0, value: t }) : e[l] = t, Ze = (e, l) => {
   for (var t in l || (l = {}))
-    wa.call(l, t) && He(e, t, l[t]);
-  if (Re)
-    for (var t of Re(l))
-      Sa.call(l, t) && He(e, t, l[t]);
+    ja.call(l, t) && Ue(e, t, l[t]);
+  if (Ge)
+    for (var t of Ge(l))
+      ka.call(l, t) && Ue(e, t, l[t]);
   return e;
-}, $a = (e, l) => ga(e, ba(l));
-function Ue(e, l, t = {}) {
+}, Va = (e, l) => Sa(e, $a(l));
+function Ke(e, l, t = {}) {
   var a, o;
-  const i = (a = t.direction) != null ? a : "bottom", r = ve(ge(e, $a(De({}, t), {
-    offset: De({
+  const i = (a = t.direction) != null ? a : "bottom", r = pe(be(e, Va(Ze({}, t), {
+    offset: Ze({
       [i]: (o = t.distance) != null ? o : 0
     }, t.offset)
   })));
-  E(() => r.arrivedState[i], async (n) => {
-    var d, y;
+  P(() => r.arrivedState[i], async (n) => {
+    var c, v;
     if (n) {
-      const c = A(e), v = {
-        height: (d = c == null ? void 0 : c.scrollHeight) != null ? d : 0,
-        width: (y = c == null ? void 0 : c.scrollWidth) != null ? y : 0
+      const d = A(e), y = {
+        height: (c = d == null ? void 0 : d.scrollHeight) != null ? c : 0,
+        width: (v = d == null ? void 0 : d.scrollWidth) != null ? v : 0
       };
-      await l(r), t.preserveScrollPosition && c && Qe(() => {
-        c.scrollTo({
-          top: c.scrollHeight - v.height,
-          left: c.scrollWidth - v.width
+      await l(r), t.preserveScrollPosition && d && lt(() => {
+        d.scrollTo({
+          top: d.scrollHeight - y.height,
+          left: d.scrollWidth - y.width
         });
       });
     }
   });
 }
-H.mounted + "";
-function We(e, l, t = {}) {
+W.mounted + "";
+function Qe(e, l, t = {}) {
   const {
     root: a,
     rootMargin: o = "0px",
     threshold: i = 0.1,
-    window: r = Z
-  } = t, n = it(() => r && "IntersectionObserver" in r);
-  let d = M;
-  const y = n.value ? E(() => ({
+    window: r = X
+  } = t, n = st(() => r && "IntersectionObserver" in r);
+  let c = N;
+  const v = n.value ? P(() => ({
     el: F(e),
     root: F(a)
-  }), ({ el: v, root: f }) => {
-    if (d(), !v)
+  }), ({ el: y, root: f }) => {
+    if (c(), !y)
       return;
-    const s = new IntersectionObserver(l, {
+    const u = new IntersectionObserver(l, {
       root: f,
       rootMargin: o,
       threshold: i
     });
-    s.observe(v), d = () => {
-      s.disconnect(), d = M;
+    u.observe(y), c = () => {
+      u.disconnect(), c = N;
     };
-  }, { immediate: !0, flush: "post" }) : M, c = () => {
-    d(), y();
+  }, { immediate: !0, flush: "post" }) : N, d = () => {
+    c(), v();
   };
-  return le(c), {
+  return ae(d), {
     isSupported: n,
-    stop: c
+    stop: d
   };
 }
-H.mounted + "";
-var ja = Object.defineProperty, ka = Object.defineProperties, Va = Object.getOwnPropertyDescriptors, Ge = Object.getOwnPropertySymbols, xa = Object.prototype.hasOwnProperty, Ca = Object.prototype.propertyIsEnumerable, Ze = (e, l, t) => l in e ? ja(e, l, { enumerable: !0, configurable: !0, writable: !0, value: t }) : e[l] = t, La = (e, l) => {
+W.mounted + "";
+var xa = Object.defineProperty, Ca = Object.defineProperties, La = Object.getOwnPropertyDescriptors, Ye = Object.getOwnPropertySymbols, Ia = Object.prototype.hasOwnProperty, Ba = Object.prototype.propertyIsEnumerable, Xe = (e, l, t) => l in e ? xa(e, l, { enumerable: !0, configurable: !0, writable: !0, value: t }) : e[l] = t, Oa = (e, l) => {
   for (var t in l || (l = {}))
-    xa.call(l, t) && Ze(e, t, l[t]);
-  if (Ge)
-    for (var t of Ge(l))
-      Ca.call(l, t) && Ze(e, t, l[t]);
+    Ia.call(l, t) && Xe(e, t, l[t]);
+  if (Ye)
+    for (var t of Ye(l))
+      Ba.call(l, t) && Xe(e, t, l[t]);
   return e;
-}, Ia = (e, l) => ka(e, Va(l));
-H.mounted + "";
-function rt(e) {
+}, Ta = (e, l) => Ca(e, La(l));
+W.mounted + "";
+function ut(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)
     return !0;
   {
     const t = e.parentNode;
-    return !t || t.tagName === "BODY" ? !1 : rt(t);
+    return !t || t.tagName === "BODY" ? !1 : ut(t);
   }
 }
-function Oa(e) {
+function Pa(e) {
   const l = e || window.event, t = l.target;
-  return rt(t) ? !1 : l.touches.length > 1 ? !0 : (l.preventDefault && l.preventDefault(), !1);
+  return ut(t) ? !1 : l.touches.length > 1 ? !0 : (l.preventDefault && l.preventDefault(), !1);
 }
-function Ba(e, l = !1) {
+function Ja(e, l = !1) {
   const t = w(l);
   let a = null, o;
-  E(Ul(e), (n) => {
+  P(Zl(e), (n) => {
     if (n) {
-      const d = n;
-      o = d.style.overflow, t.value && (d.style.overflow = "hidden");
+      const c = n;
+      o = c.style.overflow, t.value && (c.style.overflow = "hidden");
     }
   }, {
     immediate: !0
   });
   const i = () => {
     const n = A(e);
-    !n || t.value || (ie && (a = N(n, "touchmove", (d) => {
-      Oa(d);
+    !n || t.value || (re && (a = M(n, "touchmove", (c) => {
+      Pa(c);
     }, { passive: !1 })), n.style.overflow = "hidden", t.value = !0);
   }, r = () => {
     const n = A(e);
-    !n || !t.value || (ie && (a == null || a()), n.style.overflow = o, t.value = !1);
+    !n || !t.value || (re && (a == null || a()), n.style.overflow = o, t.value = !1);
   };
-  return le(r), V({
+  return ae(r), V({
     get() {
       return t.value;
     },
@@ -1452,18 +1485,18 @@ const Ea = () => {
     if (l.value = a.value, e)
       return;
     e = !0;
-    const o = Ba(t, a.value);
-    E(l, (i) => o.value = i);
+    const o = Ja(t, a.value);
+    P(l, (i) => o.value = i);
   };
 };
 Ea();
-const st = ["medium", "small", "xsmall"], Ta = {
+const dt = ["medium", "small", "xsmall"], za = {
   key: 0,
   class: "joy-dropdown-list__header"
-}, Ja = ["aria-label", "aria-labelledby"], Pa = ["id", "tabindex", "aria-disabled", "aria-selected", "title", "aria-label", ".dataModel", "onClick"], za = {
+}, Aa = ["aria-label", "aria-labelledby"], Fa = ["id", "tabindex", "aria-disabled", "aria-selected", "title", "aria-label", ".dataModel", "onClick"], qa = {
   key: 1,
   class: "joy-dropdown-list__footer"
-}, Aa = /* @__PURE__ */ j({
+}, Na = /* @__PURE__ */ $({
   __name: "VJoyDropdownList",
   props: {
     /**
@@ -1483,7 +1516,7 @@ const st = ["medium", "small", "xsmall"], Ta = {
       type: String,
       default: "medium",
       validator(e) {
-        return st.includes(e);
+        return dt.includes(e);
       }
     },
     modelValue: {
@@ -1513,76 +1546,76 @@ const st = ["medium", "small", "xsmall"], Ta = {
   },
   emits: ["update:modelValue", "close:dropdownList", "reset"],
   setup(e, { expose: l, emit: t }) {
-    const a = e, o = w(), i = V(() => (s) => !a.modelValue || !s.value && !s.id ? !1 : a.modelValue === s.value || a.modelValue === s.id);
-    function r(s) {
-      s.disabled || t("update:modelValue", s.value || s.id);
+    const a = e, o = w(), i = V(() => (u) => !a.modelValue || !u.value && !u.id ? !1 : a.modelValue === u.value || a.modelValue === u.id);
+    function r(u) {
+      u.disabled || t("update:modelValue", u.value || u.id);
     }
     function n() {
-      var s;
-      return Array.from(((s = o.value) == null ? void 0 : s.querySelectorAll("li")) || []);
+      var u;
+      return Array.from(((u = o.value) == null ? void 0 : u.querySelectorAll("li")) || []);
     }
-    function d() {
-      const s = n().find((p) => p.getAttribute("aria-selected") === "true");
-      s && (s.focus(), o.value.scrollTo({
-        top: s.offsetTop
+    function c() {
+      const u = n().find((p) => p.getAttribute("aria-selected") === "true");
+      u && (u.focus(), o.value.scrollTo({
+        top: u.offsetTop
       }));
     }
-    function y() {
-      return n().find((s) => s === document.activeElement);
+    function v() {
+      return n().find((u) => u === document.activeElement);
     }
-    function c(s) {
+    function d(u) {
       var p;
       if (!(o.value && !o.value.contains(document.activeElement) || !o.value)) {
-        if ((s.key === "Escape" || s.key === "Tab") && t("close:dropdownList"), (s.key === "Enter" || s.key === "enter") && (s.preventDefault(), y() && ((p = o.value) != null && p.contains(y())))) {
-          const b = y();
+        if ((u.key === "Escape" || u.key === "Tab") && t("close:dropdownList"), (u.key === "Enter" || u.key === "enter") && (u.preventDefault(), v() && ((p = o.value) != null && p.contains(v())))) {
+          const b = v();
           if (!b)
             return;
           if (b.querySelector("a"))
             return b.querySelector("a").click();
           t("update:modelValue", b.dataModel);
         }
-        if (y() && s.key === " " && s.preventDefault(), ["ArrowDown", "ArrowUp", "Home", "End"].includes(s.key)) {
-          const b = n(), I = y();
-          let z = b.indexOf(I);
+        if (v() && u.key === " " && u.preventDefault(), ["ArrowDown", "ArrowUp", "Home", "End"].includes(u.key)) {
+          const b = n(), x = v();
+          let T = b.indexOf(x);
           if (b.length) {
-            s.preventDefault(), s.key === "ArrowDown" ? z++ : s.key === "ArrowUp" ? z-- : s.key === "Home" ? z = 0 : s.key === "End" && (z = b.length - 1), z < 0 && (z = b.length - 1), z > b.length - 1 && (z = 0), v(b[z]);
+            u.preventDefault(), u.key === "ArrowDown" ? T++ : u.key === "ArrowUp" ? T-- : u.key === "Home" ? T = 0 : u.key === "End" && (T = b.length - 1), T < 0 && (T = b.length - 1), T > b.length - 1 && (T = 0), y(b[T]);
             return;
           }
         }
       }
     }
-    function v(s) {
-      s.focus();
+    function y(u) {
+      u.focus();
     }
     function f() {
       t("reset");
     }
-    return X(() => {
-      window.addEventListener("keydown", c), d();
-    }), Ye(() => {
-      window.removeEventListener("keydown", c);
+    return Q(() => {
+      window.addEventListener("keydown", d), c();
+    }), Se(() => {
+      window.removeEventListener("keydown", d);
     }), l({
       isSelected: i
-    }), (s, p) => (u(), m("div", {
+    }), (u, p) => (s(), m("div", {
       class: "joy-dropdown-list",
-      style: ae({ width: `${e.width}px`, "max-width": `${e.width}px` })
+      style: Z({ width: `${e.width}px`, "max-width": `${e.width}px` })
     }, [
-      s.$slots["dropdown-list-header"] || e.reset ? (u(), m("header", Ta, [
-        e.reset ? (u(), m("button", {
+      u.$slots["dropdown-list-header"] || e.reset ? (s(), m("header", za, [
+        e.reset ? (s(), m("button", {
           key: 0,
           type: "button",
           class: "joy-dropdown-list__reset",
           onClick: f
-        }, C(e.resetLabel || "Reset"), 1)) : _("", !0),
-        g(s.$slots, "dropdown-list-header", {}, void 0, !0)
-      ])) : _("", !0),
-      h("div", {
+        }, L(e.resetLabel || "Reset"), 1)) : h("", !0),
+        g(u.$slots, "dropdown-list-header", {}, void 0, !0)
+      ])) : h("", !0),
+      _("div", {
         tabindex: "0",
-        class: S(["joy-dropdown-list__items", { "joy-dropdown-list__items-slotted": s.$slots["dropdown-list-items"] }]),
-        style: ae({ "max-height": `${e.height}px` })
+        class: S(["joy-dropdown-list__items", { "joy-dropdown-list__items-slotted": u.$slots["dropdown-list-items"] }]),
+        style: Z({ "max-height": `${e.height}px` })
       }, [
-        g(s.$slots, "dropdown-list-items", {}, void 0, !0),
-        e.options.length ? (u(), m("ul", {
+        g(u.$slots, "dropdown-list-items", {}, void 0, !0),
+        e.options.length ? (s(), m("ul", {
           key: 0,
           ref_key: "listbox",
           ref: o,
@@ -1591,10 +1624,10 @@ const st = ["medium", "small", "xsmall"], Ta = {
           "aria-label": e.ariaLabel,
           "aria-labelledby": e.ariaLabelledBy
         }, [
-          (u(!0), m(W, null, Y(e.options, (b) => (u(), m("li", {
+          (s(!0), m(H, null, U(e.options, (b) => (s(), m("li", {
             id: b.id,
             key: b.label,
-            style: ae({ "max-width": `${e.width}px` }),
+            style: Z({ "max-width": `${e.width}px` }),
             class: S([
               "joy-dropdown-list__item",
               `joy-dropdown-list__item--${e.size}`,
@@ -1610,55 +1643,30 @@ const st = ["medium", "small", "xsmall"], Ta = {
             "aria-label": b.label,
             ".dataModel": b.value || b.id,
             role: "option",
-            onClick: (I) => r(b)
+            onClick: (x) => r(b)
           }, [
-            g(s.$slots, "label", we(Se(b)), () => [
-              h("span", null, C(b.label), 1)
+            g(u.$slots, "label", $e(je(b)), () => [
+              _("span", null, L(b.label), 1)
             ], !0)
-          ], 14, Pa))), 128))
-        ], 8, Ja)) : _("", !0)
+          ], 14, Fa))), 128))
+        ], 8, Aa)) : h("", !0)
       ], 6),
-      s.$slots["dropdown-list-footer"] ? (u(), m("footer", za, [
-        g(s.$slots, "dropdown-list-footer", {}, void 0, !0)
-      ])) : _("", !0)
+      u.$slots["dropdown-list-footer"] ? (s(), m("footer", qa, [
+        g(u.$slots, "dropdown-list-footer", {}, void 0, !0)
+      ])) : h("", !0)
     ], 4));
   }
 });
-const ut = /* @__PURE__ */ k(Aa, [["__scopeId", "data-v-f46e79bc"]]);
-function Fa(e) {
+const ct = /* @__PURE__ */ k(Na, [["__scopeId", "data-v-f46e79bc"]]);
+function Ma(e) {
   const l = () => e();
-  X(() => {
+  Q(() => {
     window.addEventListener("resize", l);
-  }), Ye(() => {
+  }), Se(() => {
     window.removeEventListener("resize", l);
   });
 }
-function qa(e) {
-  let l;
-  switch (e) {
-    case "error":
-      l = "warning-triangle";
-      break;
-    case "success":
-      l = "check";
-      break;
-    default:
-      l = "info-circle";
-  }
-  return l;
-}
-function Ma(e) {
-  if (!e) {
-    console.warn("Missing ref element for focusOnFirstFocusableFormField use");
-    return;
-  }
-  let l = ["input", "textarea", "select"];
-  const t = (e.value ?? e).querySelectorAll(l.join(","));
-  if (t.length)
-    return t[0].focus();
-}
-let Na = (e = 21) => crypto.getRandomValues(new Uint8Array(e)).reduce((l, t) => (t &= 63, t < 36 ? l += t.toString(36) : t < 62 ? l += (t - 26).toString(36).toUpperCase() : t > 62 ? l += "-" : l += "_", l), "");
-const Ra = /* @__PURE__ */ j({
+const Ra = /* @__PURE__ */ $({
   __name: "VJoyDropdown",
   props: {
     /** DOM valid selector to give to Vue3 Teleport "to" property */
@@ -1708,7 +1716,7 @@ const Ra = /* @__PURE__ */ j({
       type: String,
       default: "medium",
       validator(e) {
-        return st.includes(e);
+        return dt.includes(e);
       }
     },
     /** Use v-model */
@@ -1752,71 +1760,71 @@ const Ra = /* @__PURE__ */ j({
   },
   emits: ["update:modelValue", "dropdown:open", "dropdown:hide", "dropdown:reset"],
   setup(e, { expose: l, emit: t }) {
-    const a = e, o = w(!1), i = w(null), r = w(), n = w(null), d = w(null), y = w(!1), c = "joy-dropdown--" + Na();
-    Xe("VJoyDropdownContext", a);
-    const v = {
+    const a = e, o = w(!1), i = w(null), r = w(), n = w(null), c = w(null), v = w(!1), d = "joy-dropdown--" + ot();
+    ke("VJoyDropdownContext", a);
+    const y = {
       ignore: [r, ".joy-dropdown__list"]
     };
     let f = null;
-    E(
+    P(
       () => o.value,
-      (L) => {
-        L && Ma(n);
+      (I) => {
+        I && hl(n);
       },
       { flush: "post" }
     );
-    const s = V(() => {
-      let L = `${a.dropdownGap}px`;
-      return a.direction === "up" && (L = "-" + L), {
-        marginTop: L
+    const u = V(() => {
+      let I = `${a.dropdownGap}px`;
+      return a.direction === "up" && (I = "-" + I), {
+        marginTop: I
       };
     });
     function p() {
-      f && clearTimeout(f), y.value = !0, f = setTimeout(() => {
-        o.value = !1, y.value = !1, t("dropdown:hide");
+      f && clearTimeout(f), v.value = !0, f = setTimeout(() => {
+        o.value = !1, v.value = !1, t("dropdown:hide");
       }, 300);
     }
-    function b(L) {
-      y.value = !1, f && clearTimeout(f), d.value = L.target, o.value = !0, t("dropdown:open");
+    function b(I) {
+      v.value = !1, f && clearTimeout(f), c.value = I.target, o.value = !0, t("dropdown:open");
     }
-    function I() {
-      p(), z();
+    function x() {
+      p(), T();
     }
-    function z() {
-      d.value && d.value.focus();
+    function T() {
+      c.value && c.value.focus();
     }
-    function ce(L) {
-      t("update:modelValue", L), a.closeOnSelect && (p(), z());
+    function fe(I) {
+      t("update:modelValue", I), a.closeOnSelect && (p(), T());
     }
-    function oe() {
+    function ne() {
       t("dropdown:reset");
     }
-    function P() {
-      !r.value || !r.value.children.length || (r.value.children[0].id = c);
+    function z() {
+      !r.value || !r.value.children.length || (r.value.children[0].id = d);
     }
-    return Fa(p), X(() => {
-      P();
+    return Ma(p), Q(() => {
+      z();
     }), l({
       showDropdownList: o,
-      generatedId: c
-    }), (L, D) => (u(), x($(na), {
+      generatedId: d
+    }), (I, G) => (s(), C(j(sa), {
       ref_key: "dropdown",
       ref: i,
-      options: v,
+      options: y,
       class: "joy-dropdown",
       onTrigger: p
     }, {
-      default: B(() => [
-        h("div", {
+      default: O(() => [
+        _("div", {
           ref_key: "button",
           ref: r,
           class: "joy-dropdown__button",
           "data-testid": "dropdown-trigger",
           onClick: b
         }, [
-          g(L.$slots, "dropdown-button", {}, void 0, !0)
+          g(I.$slots, "dropdown-button", {}, void 0, !0)
         ], 512),
-        o.value ? (u(), m("div", {
+        o.value ? (s(), m("div", {
           key: 0,
           ref_key: "list",
           ref: n,
@@ -1825,13 +1833,13 @@ const Ra = /* @__PURE__ */ j({
             `joy-dropdown__list--${e.justify}`,
             `joy-dropdown__list--${e.direction}`,
             {
-              "joy-dropdown__list--visible": !y.value,
-              "joy-dropdown__list--hiding": y.value
+              "joy-dropdown__list--visible": !v.value,
+              "joy-dropdown__list--hiding": v.value
             }
           ]),
-          style: ae(s.value)
+          style: Z(u.value)
         }, [
-          U(ut, {
+          R(ct, {
             "model-value": e.modelValue,
             options: e.options,
             size: e.size,
@@ -1839,64 +1847,64 @@ const Ra = /* @__PURE__ */ j({
             height: e.height,
             reset: e.reset,
             "reset-label": e.resetLabel,
-            "aria-labelled-by": c,
-            "onUpdate:modelValue": ce,
-            "onClose:dropdownList": I,
-            onReset: oe
-          }, et({
-            label: B((q) => [
-              g(L.$slots, "dropdown-item", we(Se(q)), () => [
-                h("span", null, C(q.label), 1)
+            "aria-labelled-by": d,
+            "onUpdate:modelValue": fe,
+            "onClose:dropdownList": x,
+            onReset: ne
+          }, at({
+            label: O((q) => [
+              g(I.$slots, "dropdown-item", $e(je(q)), () => [
+                _("span", null, L(q.label), 1)
               ], !0)
             ]),
             _: 2
           }, [
-            L.$slots["dropdown-header"] ? {
+            I.$slots["dropdown-header"] ? {
               name: "dropdown-list-header",
-              fn: B(() => [
-                g(L.$slots, "dropdown-header", {}, void 0, !0)
+              fn: O(() => [
+                g(I.$slots, "dropdown-header", {}, void 0, !0)
               ]),
               key: "0"
             } : void 0,
-            L.$slots["dropdown-items"] ? {
+            I.$slots["dropdown-items"] ? {
               name: "dropdown-list-items",
-              fn: B(() => [
-                g(L.$slots, "dropdown-items", {}, void 0, !0)
+              fn: O(() => [
+                g(I.$slots, "dropdown-items", {}, void 0, !0)
               ]),
               key: "1"
             } : void 0,
-            L.$slots["dropdown-footer"] ? {
+            I.$slots["dropdown-footer"] ? {
               name: "dropdown-list-footer",
-              fn: B(() => [
-                g(L.$slots, "dropdown-footer", {}, void 0, !0)
+              fn: O(() => [
+                g(I.$slots, "dropdown-footer", {}, void 0, !0)
               ]),
               key: "2"
             } : void 0
           ]), 1032, ["model-value", "options", "size", "width", "height", "reset", "reset-label"])
-        ], 6)) : _("", !0)
+        ], 6)) : h("", !0)
       ]),
       _: 3
     }, 512));
   }
 });
-const Ha = /* @__PURE__ */ k(Ra, [["__scopeId", "data-v-887e17ba"]]), Da = ["aria-label"], Ua = { class: "joy-filter-bar__wrapper" }, Wa = /* @__PURE__ */ j({
+const Ha = /* @__PURE__ */ k(Ra, [["__scopeId", "data-v-df017105"]]), Da = ["aria-label"], Wa = { class: "joy-filter-bar__wrapper" }, Ga = /* @__PURE__ */ $({
   __name: "VJoyFilterBar",
   props: {
     ariaLabel: String
   },
   setup(e) {
-    return (l, t) => (u(), m("div", {
+    return (l, t) => (s(), m("div", {
       class: "joy-filter-bar",
       role: "group",
       "aria-label": e.ariaLabel || "Filter bar"
     }, [
-      h("div", Ua, [
+      _("div", Wa, [
         g(l.$slots, "default", {}, void 0, !0)
       ])
     ], 8, Da));
   }
 });
-const Ga = /* @__PURE__ */ k(Wa, [["__scopeId", "data-v-114f8274"]]), Za = /* @__PURE__ */ j({
+const Ua = /* @__PURE__ */ k(Ga, [["__scopeId", "data-v-114f8274"]]), Za = /* @__PURE__ */ $({
   __name: "VJoyFilterBarButton",
   props: {
     label: String,
@@ -1911,28 +1919,28 @@ const Ga = /* @__PURE__ */ k(Wa, [["__scopeId", "data-v-114f8274"]]), Za = /* @_
   },
   emits: ["filter"],
   setup(e, { emit: l }) {
-    const t = e, a = tt("VJoyDropdownContext", null);
+    const t = e, a = de("VJoyDropdownContext", null);
     function o() {
       l("filter", t.value);
     }
-    return (i, r) => (u(), m("button", {
+    return (i, r) => (s(), m("button", {
       type: "button",
       class: S(["joy-filter-bar-button", { "joy-filter-bar-button--active": e.active }]),
       onClick: o
     }, [
-      O(C(e.label) + " ", 1),
+      B(L(e.label) + " ", 1),
       g(i.$slots, "default", {}, void 0, !0),
-      $(a) ? (u(), x(J, {
+      j(a) ? (s(), C(E, {
         key: 0,
         class: "joy-filter-bar-button__icon",
         name: "chevron-down",
         size: "xxsmall",
         color: "neutral"
-      })) : _("", !0)
+      })) : h("", !0)
     ], 2));
   }
 });
-const Ka = /* @__PURE__ */ k(Za, [["__scopeId", "data-v-8f87fed1"]]), Qa = ["aria-hidden"], Ya = /* @__PURE__ */ j({
+const Ka = /* @__PURE__ */ k(Za, [["__scopeId", "data-v-8f87fed1"]]), Qa = ["aria-hidden"], Ya = /* @__PURE__ */ $({
   __name: "VJoyFormError",
   props: {
     /** In some cases you'll need to inject the error in the DOM but hide it. Visible by default */
@@ -1944,24 +1952,63 @@ const Ka = /* @__PURE__ */ k(Za, [["__scopeId", "data-v-8f87fed1"]]), Qa = ["ari
     noHtmlErrorText: String
   },
   setup(e) {
-    return (l, t) => (u(), m("div", {
+    return (l, t) => (s(), m("div", {
       "aria-hidden": e.visible,
       class: S(["joy-form-error", { "joy-has-error": e.visible }]),
       role: "alert"
     }, [
-      U(J, {
+      R(E, {
         class: "joy-icon-error",
         name: "warning-triangle"
       }),
-      h("div", null, [
+      _("div", null, [
         g(l.$slots, "default", {}, () => [
-          O(C(e.noHtmlErrorText), 1)
+          B(L(e.noHtmlErrorText), 1)
         ], !0)
       ])
     ], 10, Qa));
   }
 });
-const dt = /* @__PURE__ */ k(Ya, [["__scopeId", "data-v-581fd33b"]]), Xa = [...cl], eo = { class: "joy-highlight--text" }, to = { key: 0 }, lo = /* @__PURE__ */ j({
+const ft = /* @__PURE__ */ k(Ya, [["__scopeId", "data-v-581fd33b"]]), Xa = /* @__PURE__ */ $({
+  __name: "VJoyFormFieldSkeleton",
+  props: {
+    /** In some cases you'll need to inject the error in the DOM but hide it. Visible by default */
+    size: {
+      type: String,
+      default: "medium"
+    },
+    width: {
+      type: String
+    },
+    /** The component is aimed to be used with a VJoyWrapper to quickly create skeleton layouts.
+     * Use flex property to spread your items horizontally, by default they will all have the same width.
+     */
+    flex: {
+      type: String,
+      default: "1"
+    }
+  },
+  setup(e, { expose: l }) {
+    const t = e, a = de("VJoyWrapperContext", {}), o = V(() => {
+      const i = a.direction === "column" ? "auto" : null;
+      if (!t.width && t.flex === "1") {
+        const c = ["1", "0"];
+        return i && c.push(i), c.join(" ");
+      }
+      const r = [t.flex || "1", "0"], n = t.width || i;
+      return n && r.push(n), r.join(" ");
+    });
+    return l({ flexStyle: o }), (i, r) => (s(), m("div", {
+      "aria-hidden": "true",
+      class: S(["joy-form-skeleton", `joy-form-skeleton--${e.size}`]),
+      style: Z({
+        "max-width": e.width,
+        flex: o.value
+      })
+    }, null, 6));
+  }
+});
+const eo = /* @__PURE__ */ k(Xa, [["__scopeId", "data-v-8a4ecbad"]]), to = [...yl], lo = { class: "joy-highlight--text" }, ao = { key: 0 }, oo = /* @__PURE__ */ $({
   __name: "VJoyHighlight",
   props: {
     accent: {
@@ -1979,15 +2026,15 @@ const dt = /* @__PURE__ */ k(Ya, [["__scopeId", "data-v-581fd33b"]]), Xa = [...c
       type: String,
       default: "neutral",
       validator(e) {
-        return Xa.includes(e);
+        return to.includes(e);
       }
     }
   },
   setup(e, { expose: l }) {
-    const t = e, a = V(() => t.icon ? t.icon : qa(t.level));
+    const t = e, a = V(() => t.icon ? t.icon : _l(t.level));
     return l({
       getRelevantIcon: a
-    }), (o, i) => (u(), m("div", {
+    }), (o, i) => (s(), m("div", {
       class: S([
         "joy-highlight",
         `joy-highlight_${e.level}`,
@@ -1997,33 +2044,33 @@ const dt = /* @__PURE__ */ k(Ya, [["__scopeId", "data-v-581fd33b"]]), Xa = [...c
         }
       ])
     }, [
-      e.displayIcon ? (u(), x(J, {
+      e.displayIcon ? (s(), C(E, {
         key: 0,
         name: a.value
-      }, null, 8, ["name"])) : _("", !0),
-      h("div", eo, [
-        o.$slots["highlight-title"] ? (u(), m("strong", to, [
+      }, null, 8, ["name"])) : h("", !0),
+      _("div", lo, [
+        o.$slots["highlight-title"] ? (s(), m("strong", ao, [
           g(o.$slots, "highlight-title", {}, void 0, !0)
-        ])) : _("", !0),
+        ])) : h("", !0),
         g(o.$slots, "default", {}, void 0, !0)
       ])
     ], 2));
   }
 });
-const ao = /* @__PURE__ */ k(lo, [["__scopeId", "data-v-ba5e6101"]]), oo = ["small", "medium", "large"], no = {
+const no = /* @__PURE__ */ k(oo, [["__scopeId", "data-v-ba5e6101"]]), io = ["small", "medium", "large"], ro = {
   key: 0,
   class: "joy-label-required"
-}, io = {
+}, so = {
   key: 1,
   class: "joy-label-optional"
-}, ro = /* @__PURE__ */ j({
+}, uo = /* @__PURE__ */ $({
   __name: "VJoyLabel",
   props: {
     size: {
       type: String,
       default: "medium",
       validator(e) {
-        return oo.includes(e);
+        return io.includes(e);
       }
     },
     tagName: {
@@ -2040,21 +2087,21 @@ const ao = /* @__PURE__ */ k(lo, [["__scopeId", "data-v-ba5e6101"]]), oo = ["sma
     text: String
   },
   setup(e) {
-    return (l, t) => (u(), x(re(e.tagName), G({
+    return (l, t) => (s(), C(oe(e.tagName), K({
       class: ["joy-label", `joy-label--${e.size}`]
     }, l.$attrs), {
-      default: B(() => [
+      default: O(() => [
         g(l.$slots, "default", {}, () => [
-          O(C(e.text), 1)
+          B(L(e.text), 1)
         ], !0),
-        e.required ? (u(), m("span", no, "*")) : _("", !0),
-        e.optionalLabel ? (u(), m("span", io, "- " + C(e.optionalLabel), 1)) : _("", !0)
+        e.required ? (s(), m("span", ro, "*")) : h("", !0),
+        e.optionalLabel ? (s(), m("span", so, "- " + L(e.optionalLabel), 1)) : h("", !0)
       ]),
       _: 3
     }, 16, ["class"]));
   }
 });
-const K = /* @__PURE__ */ k(ro, [["__scopeId", "data-v-1265214a"]]), so = ["large", "medium", "small"], uo = ["id", "required", "disabled", "type", "value"], co = ["data-unit"], fo = /* @__PURE__ */ j({
+const ee = /* @__PURE__ */ k(uo, [["__scopeId", "data-v-1265214a"]]), co = ["large", "medium", "small"], fo = ["id", "required", "disabled", "type", "value"], yo = ["data-unit"], vo = /* @__PURE__ */ $({
   inheritAttrs: !1,
   __name: "VJoyInput",
   props: {
@@ -2112,7 +2159,7 @@ const K = /* @__PURE__ */ k(ro, [["__scopeId", "data-v-1265214a"]]), so = ["larg
       type: String,
       default: "medium",
       validator(e) {
-        return so.includes(e);
+        return co.includes(e);
       }
     },
     type: {
@@ -2124,12 +2171,12 @@ const K = /* @__PURE__ */ k(ro, [["__scopeId", "data-v-1265214a"]]), so = ["larg
   },
   emits: ["update:modelValue"],
   setup(e, { emit: l }) {
-    const t = e, a = w(), o = w(), i = be(), r = ee(), n = w(!1), d = V(() => typeof t.modelValue == "number" || !t.clearable || t.unit || !t.modelValue ? !1 : t.modelValue.length > 0 && !t.unit), y = V(() => r.default && r.default()), c = V(() => {
-      var s, p;
-      return !!((s = o.value) != null && s.closest("joy-wrapper")) || !!((p = o.value) != null && p.closest(".joy-wrapper"));
-    }), v = w(t.type);
-    gt(() => {
-      v.value = t.unit ? "number" : t.type;
+    const t = e, a = w(), o = w(), i = we(), r = Y(), n = w(!1), c = V(() => typeof t.modelValue == "number" || !t.clearable || t.unit || !t.modelValue ? !1 : t.modelValue.length > 0 && !t.unit), v = V(() => r.default && r.default()), d = V(() => {
+      var u, p;
+      return !!((u = o.value) != null && u.closest("joy-wrapper")) || !!((p = o.value) != null && p.closest(".joy-wrapper"));
+    }), y = w(t.type);
+    wt(() => {
+      y.value = t.unit ? "number" : t.type;
     });
     const f = {
       onFocus: () => {
@@ -2138,60 +2185,60 @@ const K = /* @__PURE__ */ k(ro, [["__scopeId", "data-v-1265214a"]]), so = ["larg
       onBlur: () => {
         n.value = !1;
       },
-      onInput: (s) => {
-        let p = s.target.value;
+      onInput: (u) => {
+        let p = u.target.value;
         t.modelModifiers.lazy || l("update:modelValue", p);
       },
-      onChange: (s) => {
-        let p = s.target.value;
+      onChange: (u) => {
+        let p = u.target.value;
         t.modelModifiers.lazy && l("update:modelValue", p);
       },
       clearValue: () => {
         t.disabled || l("update:modelValue", "");
       }
     };
-    return (s, p) => (u(), m("div", {
+    return (u, p) => (s(), m("div", {
       ref_key: "root",
       ref: o,
       class: S([`joy-input--${t.size}`])
     }, [
-      h("div", {
+      _("div", {
         class: S([
           "joy-input",
           {
             "joy-input--focusing": n.value,
             "joy-input--disabled": e.disabled,
             "joy-input--invalid": e.invalid,
-            "joy-input--valid": !e.invalid && !$(i).disabled
+            "joy-input--valid": !e.invalid && !j(i).disabled
           }
         ])
       }, [
-        y.value || e.label ? (u(), x(K, {
+        v.value || e.label ? (s(), C(ee, {
           key: 0,
           for: e.name,
           required: e.required && e.requiredMark,
           "optional-label": e.optionalLabel,
           size: e.labelSize
         }, {
-          default: B(() => [
-            g(s.$slots, "default", {}, () => [
-              O(C(e.label), 1)
+          default: O(() => [
+            g(u.$slots, "default", {}, () => [
+              B(L(e.label), 1)
             ], !0)
           ]),
           _: 3
-        }, 8, ["for", "required", "optional-label", "size"])) : _("", !0),
-        h("div", {
+        }, 8, ["for", "required", "optional-label", "size"])) : h("", !0),
+        _("div", {
           class: S([
             "joy-input--wrapper",
             {
               "joy-input--wrapper-has-icon": !!e.icon,
               "joy-input--wrapper---clearable": e.clearable,
               "joy-input--wrapper-unit": !!e.unit,
-              "joy-input--wrapper-margin": !c.value
+              "joy-input--wrapper-margin": !d.value
             }
           ])
         }, [
-          h("input", G(s.$attrs, {
+          _("input", K(u.$attrs, {
             id: t.name,
             ref_key: "input",
             ref: a,
@@ -2203,7 +2250,7 @@ const K = /* @__PURE__ */ k(ro, [["__scopeId", "data-v-1265214a"]]), so = ["larg
                 "joy-input--field-invalid": e.invalid
               }
             ],
-            type: v.value,
+            type: y.value,
             value: e.modelValue,
             onFocus: p[0] || (p[0] = //@ts-ignore
             (...b) => f.onFocus && f.onFocus(...b)),
@@ -2213,8 +2260,8 @@ const K = /* @__PURE__ */ k(ro, [["__scopeId", "data-v-1265214a"]]), so = ["larg
             (...b) => f.onInput && f.onInput(...b)),
             onChange: p[3] || (p[3] = //@ts-ignore
             (...b) => f.onChange && f.onChange(...b))
-          }), null, 16, uo),
-          d.value ? (u(), x(lt, {
+          }), null, 16, fo),
+          c.value ? (s(), C(xe, {
             key: 0,
             class: "joy-input--clear",
             circle: "",
@@ -2222,23 +2269,23 @@ const K = /* @__PURE__ */ k(ro, [["__scopeId", "data-v-1265214a"]]), so = ["larg
             size: "xxsmall",
             icon: "cross",
             onClick: f.clearValue
-          }, null, 8, ["onClick"])) : _("", !0),
-          e.icon ? (u(), x(J, {
+          }, null, 8, ["onClick"])) : h("", !0),
+          e.icon ? (s(), C(E, {
             key: 1,
             class: "joy-input--decorative-icon",
             name: e.icon
-          }, null, 8, ["name"])) : _("", !0),
-          e.unit ? (u(), m("div", {
+          }, null, 8, ["name"])) : h("", !0),
+          e.unit ? (s(), m("div", {
             key: 2,
             "data-unit": e.unit,
             class: "joy-input--unit"
-          }, null, 8, co)) : _("", !0)
+          }, null, 8, yo)) : h("", !0)
         ], 2)
       ], 2)
     ], 2));
   }
 });
-const yo = /* @__PURE__ */ k(fo, [["__scopeId", "data-v-534f3025"]]), vo = ["teal", "white"], mo = ["href"], po = /* @__PURE__ */ j({
+const po = /* @__PURE__ */ k(vo, [["__scopeId", "data-v-534f3025"]]), mo = ["teal", "white"], _o = ["href"], ho = /* @__PURE__ */ $({
   __name: "VJoyLink",
   props: {
     href: {
@@ -2249,29 +2296,29 @@ const yo = /* @__PURE__ */ k(fo, [["__scopeId", "data-v-534f3025"]]), vo = ["tea
       type: String,
       default: "teal",
       validator(e) {
-        return vo.includes(e);
+        return mo.includes(e);
       }
     },
     icon: String,
     text: String
   },
   setup(e) {
-    return (l, t) => (u(), m("a", G({ href: e.href }, l.$attrs, {
+    return (l, t) => (s(), m("a", K({ href: e.href }, l.$attrs, {
       class: ["joy-link", `joy-link_${e.color}`]
     }), [
-      e.icon ? (u(), x(J, {
+      e.icon ? (s(), C(E, {
         key: 0,
         name: e.icon
-      }, null, 8, ["name"])) : _("", !0),
+      }, null, 8, ["name"])) : h("", !0),
       g(l.$slots, "default", {}, () => [
-        O(C(e.text), 1)
+        B(L(e.text), 1)
       ], !0)
-    ], 16, mo));
+    ], 16, _o));
   }
 });
-const ho = /* @__PURE__ */ k(po, [["__scopeId", "data-v-76f0342e"]]), _o = ["id"], go = {
+const go = /* @__PURE__ */ k(ho, [["__scopeId", "data-v-76f0342e"]]), bo = ["id"], wo = {
   class: /* @__PURE__ */ S(["joy-multi-checkbox"])
-}, bo = /* @__PURE__ */ j({
+}, So = /* @__PURE__ */ $({
   __name: "VJoyMultiCheckbox",
   props: {
     options: {
@@ -2314,55 +2361,181 @@ const ho = /* @__PURE__ */ k(po, [["__scopeId", "data-v-76f0342e"]]), _o = ["id"
       let n = [...t.value || []];
       r ? n.push(i) : n.splice(n.indexOf(i), 1), l("update:value", n);
     }
-    return (i, r) => (u(), m("fieldset", {
+    return (i, r) => (s(), m("fieldset", {
       id: e.id,
       class: "joy-multi-checkbox__wrapper"
     }, [
-      e.label ? (u(), x($(K), {
+      e.label ? (s(), C(j(ee), {
         key: 0,
         "tag-name": "legend",
         required: e.required && e.requiredMark,
         "optional-label": e.optionalLabel,
         size: e.labelSize
       }, {
-        default: B(() => [
-          O(C(e.label), 1)
+        default: O(() => [
+          B(L(e.label), 1)
         ]),
         _: 1
-      }, 8, ["required", "optional-label", "size"])) : _("", !0),
-      h("div", go, [
-        (u(!0), m(W, null, Y(e.options, (n) => (u(), x($(je), {
+      }, 8, ["required", "optional-label", "size"])) : h("", !0),
+      _("div", wo, [
+        (s(!0), m(H, null, U(e.options, (n) => (s(), C(j(Ce), {
           id: n.id,
           key: n.id,
           name: n.name,
           value: n.value,
           checked: a(n),
-          "onUpdate:checked": (d) => o(n.value, d)
+          "onUpdate:checked": (c) => o(n.value, c)
         }, {
-          default: B(() => [
-            g(i.$slots, "checkbox", we(Se(n)), () => [
-              O(C(n.label), 1)
+          default: O(() => [
+            g(i.$slots, "checkbox", $e(je(n)), () => [
+              B(L(n.label), 1)
             ], !0)
           ]),
           _: 2
         }, 1032, ["id", "name", "value", "checked", "onUpdate:checked"]))), 128))
       ])
-    ], 8, _o));
+    ], 8, bo));
+  }
+});
+const $o = /* @__PURE__ */ k(So, [["__scopeId", "data-v-47574ced"]]), et = /* @__PURE__ */ $({
+  __name: "PaginationIcon",
+  props: {
+    label: {
+      type: String,
+      required: !1
+    },
+    next: {
+      type: Boolean,
+      default: !1
+    },
+    disabled: {
+      type: Boolean,
+      default: !1
+    }
+  },
+  emits: ["click"],
+  setup(e) {
+    return (l, t) => (s(), C(xe, {
+      class: "joy-pagination__icon",
+      "aria-label": e.label,
+      title: e.label,
+      color: "grey",
+      icon: e.next ? "chevron-right" : "chevron-left",
+      variant: "ghost",
+      circle: "",
+      size: "xsmall",
+      disabled: e.disabled,
+      onClick: t[0] || (t[0] = (a) => l.$emit("click", a))
+    }, null, 8, ["aria-label", "title", "icon", "disabled"]));
+  }
+}), jo = ["aria-label", "data-current"], ko = { class: "joy-pagination__previous" }, Vo = ["aria-current", "onClick"], xo = { class: "joy-pagination__next" }, Co = 6, Lo = /* @__PURE__ */ $({
+  __name: "VJoyPagination",
+  props: {
+    /** Current page number */
+    currentPage: {
+      type: Number,
+      default: 1
+    },
+    /** Total number of pages in order to construct the pagination */
+    totalPages: {
+      type: Number,
+      default: 1
+    },
+    /** Can be used as aria-label attribute for the full component */
+    labelPagination: {
+      type: String,
+      required: !1
+    },
+    /** Can be used as title and aria-label attributes for the previous CTA */
+    labelPrev: {
+      type: String,
+      required: !1
+    },
+    /** Can be used as title and aria-label attributes for the next CTA */
+    labelNext: {
+      type: String,
+      required: !1
+    }
+  },
+  emits: ["update:current-page"],
+  setup(e, { emit: l }) {
+    const t = e, a = V(() => {
+      const v = i.value.length;
+      return i.value[v - 1] !== i.value[v - 2] + 1;
+    }), o = V(() => i.value[0] !== i.value[1] - 1), i = V(() => t.totalPages < Co ? n(2, t.totalPages - 1) : c(t.currentPage));
+    function r(v) {
+      l("update:current-page", v);
+    }
+    function n(v, d) {
+      const y = [];
+      y.push(1);
+      for (let f = v; f <= d; f++)
+        y.push(f);
+      return y.push(t.totalPages), y;
+    }
+    function c(v) {
+      let d = v - 2, y = v + 1;
+      return d <= 1 && (d = 2, y = 5), y >= t.totalPages && (y = t.totalPages - 1, d = y - 3), n(d, y);
+    }
+    return (v, d) => (s(), m("nav", {
+      role: "navigation",
+      "aria-label": e.labelPagination,
+      class: "joy-pagination",
+      "data-current": e.currentPage
+    }, [
+      _("ul", null, [
+        _("li", ko, [
+          g(v.$slots, "pagination-prev", {}, () => [
+            R(et, {
+              label: e.labelPrev,
+              disabled: e.currentPage === 1,
+              onClick: d[0] || (d[0] = (y) => r(e.currentPage - 1))
+            }, null, 8, ["label", "disabled"])
+          ], !0)
+        ]),
+        _("li", null, [
+          _("ul", null, [
+            (s(!0), m(H, null, U(i.value, (y) => (s(), m("li", { key: y }, [
+              _("button", {
+                type: "button",
+                "aria-current": y === e.currentPage ? "true" : "false",
+                class: S({
+                  current: y === e.currentPage,
+                  "joy-pagination__separator joy-pagination__separator-after": y === 1 && o.value,
+                  "joy-pagination__separator joy-pagination__separator-before": y === e.totalPages && a.value
+                }),
+                onClick: (f) => r(y)
+              }, L(y), 11, Vo)
+            ]))), 128))
+          ])
+        ]),
+        _("li", xo, [
+          g(v.$slots, "pagination-next", {}, () => [
+            R(et, {
+              next: "",
+              label: e.labelNext,
+              disabled: e.currentPage === e.totalPages,
+              onClick: d[1] || (d[1] = (y) => r(e.currentPage + 1))
+            }, null, 8, ["label", "disabled"])
+          ], !0)
+        ])
+      ])
+    ], 8, jo));
   }
 });
-const wo = /* @__PURE__ */ k(bo, [["__scopeId", "data-v-47574ced"]]), So = ["small", "medium", "large"], $o = ["small", "large"], jo = {
+const Io = /* @__PURE__ */ k(Lo, [["__scopeId", "data-v-e5b57944"]]), Bo = ["small", "medium", "large"], Oo = ["small", "large"], To = {
   key: 0,
   class: /* @__PURE__ */ S(["joy-panel__header"])
-}, ko = {
+}, Po = {
   key: 1,
   class: "joy-panel__header-action"
-}, Vo = {
+}, Jo = {
   key: 2,
   class: "joy-panel__header-subtitle"
-}, xo = { class: "joy-panel__body" }, Co = {
+}, Eo = { class: "joy-panel__body" }, zo = {
   key: 1,
   class: "joy-panel__footer"
-}, Lo = /* @__PURE__ */ j({
+}, Ao = /* @__PURE__ */ $({
   __name: "VJoyPanel",
   props: {
     flex: {
@@ -2376,14 +2549,14 @@ const wo = /* @__PURE__ */ k(bo, [["__scopeId", "data-v-47574ced"]]), So = ["sma
       type: String,
       default: "medium",
       validator(e) {
-        return So.includes(e);
+        return Bo.includes(e);
       }
     },
     titleSize: {
       type: String,
       default: "large",
       validator(e) {
-        return $o.includes(e);
+        return Oo.includes(e);
       }
     },
     loading: {
@@ -2396,11 +2569,11 @@ const wo = /* @__PURE__ */ k(bo, [["__scopeId", "data-v-47574ced"]]), So = ["sma
     }
   },
   setup(e) {
-    const l = tt("VJoyWrapperContext", {}), t = V(() => Object.keys(l).length > 0), a = ee(), o = w(), i = V(() => a["panel-title"] || a["panel-subtitle"] || a["panel-title-action"]);
-    return (r, n) => (u(), m("section", {
+    const l = de("VJoyWrapperContext", {}), t = V(() => Object.keys(l).length > 0), a = Y(), o = w(), i = V(() => a["panel-title"] || a["panel-subtitle"] || a["panel-title-action"]);
+    return (r, n) => (s(), m("section", {
       ref_key: "panel",
       ref: o,
-      style: ae({ flex: e.flex }),
+      style: Z({ flex: e.flex }),
       class: S([
         "joy-panel",
         `joy-panel--${e.padding}`,
@@ -2410,60 +2583,102 @@ const wo = /* @__PURE__ */ k(bo, [["__scopeId", "data-v-47574ced"]]), So = ["sma
         }
       ])
     }, [
-      i.value ? (u(), m("header", jo, [
-        $(a)["panel-title"] ? (u(), m("div", {
+      i.value ? (s(), m("header", To, [
+        j(a)["panel-title"] ? (s(), m("div", {
           key: 0,
           class: S(["joy-panel__header-title", `joy-panel__header-title--${e.titleSize}`])
         }, [
           g(r.$slots, "panel-title", {}, void 0, !0)
-        ], 2)) : _("", !0),
-        $(a)["panel-title-action"] ? (u(), m("div", ko, [
+        ], 2)) : h("", !0),
+        j(a)["panel-title-action"] ? (s(), m("div", Po, [
           g(r.$slots, "panel-title-action", {}, void 0, !0)
-        ])) : _("", !0),
-        $(a)["panel-subtitle"] ? (u(), m("div", Vo, [
+        ])) : h("", !0),
+        j(a)["panel-subtitle"] ? (s(), m("div", Jo, [
           g(r.$slots, "panel-subtitle", {}, void 0, !0)
-        ])) : _("", !0)
-      ])) : _("", !0),
-      h("div", xo, [
+        ])) : h("", !0)
+      ])) : h("", !0),
+      _("div", Eo, [
         g(r.$slots, "panel-body", {}, void 0, !0)
       ]),
-      $(a)["panel-action"] ? (u(), m("footer", Co, [
+      j(a)["panel-action"] ? (s(), m("footer", zo, [
         g(r.$slots, "panel-action", {}, void 0, !0)
-      ])) : _("", !0),
-      e.loading ? (u(), x($(Ve), {
+      ])) : h("", !0),
+      e.loading ? (s(), C(j(Ie), {
         key: 2,
         overlay: "",
         color: e.loadingColor
       }, {
-        content: B(() => [
+        content: O(() => [
           g(r.$slots, "panel-loader-content", {}, void 0, !0)
         ]),
         _: 3
-      }, 8, ["color"])) : _("", !0)
+      }, 8, ["color"])) : h("", !0)
     ], 6));
   }
 });
-const Io = /* @__PURE__ */ k(Lo, [["__scopeId", "data-v-2e3a2baa"]]), Oo = { class: "joy-panel-section" }, Bo = {
+const Fo = /* @__PURE__ */ k(Ao, [["__scopeId", "data-v-2e3a2baa"]]), qo = { class: "joy-panel-section" }, No = {
   key: 0,
   class: "joy-panel-section__title"
-}, Eo = {
+}, Mo = {
   key: 1,
   class: "joy-panel-section__content"
-}, To = /* @__PURE__ */ j({
+}, Ro = /* @__PURE__ */ $({
   __name: "VJoyPanelSection",
   setup(e) {
-    const l = ee();
-    return (t, a) => (u(), m("div", Oo, [
-      $(l)["panel-section-title"] ? (u(), m("div", Bo, [
+    const l = Y();
+    return (t, a) => (s(), m("div", qo, [
+      j(l)["panel-section-title"] ? (s(), m("div", No, [
         g(t.$slots, "panel-section-title", {}, void 0, !0)
-      ])) : _("", !0),
-      $(l)["panel-section-content"] ? (u(), m("div", Eo, [
+      ])) : h("", !0),
+      j(l)["panel-section-content"] ? (s(), m("div", Mo, [
         g(t.$slots, "panel-section-content", {}, void 0, !0)
-      ])) : _("", !0)
+      ])) : h("", !0)
+    ]));
+  }
+});
+const Ho = /* @__PURE__ */ k(Ro, [["__scopeId", "data-v-d88510ab"]]), Do = { class: "joy-progress-bar-wrapper" }, Wo = /* @__PURE__ */ $({
+  __name: "VJoyProgressBar",
+  props: {
+    color: {
+      type: String,
+      default: "secondary"
+    },
+    /**
+     * Total number of steps.
+     */
+    steps: {
+      type: Number
+    },
+    /**
+     * Current step number.
+     */
+    currentStep: {
+      type: Number
+    },
+    /**
+     * Progress bar percentage, percentage usage will override steps & currentStep definition.
+     */
+    percentage: {
+      type: Number
+    }
+  },
+  setup(e, { expose: l }) {
+    const t = e, a = w(0), o = V(() => i());
+    function i() {
+      return t.percentage ? a.value = t.percentage : t.currentStep && t.steps ? a.value = Math.round(t.currentStep / t.steps * 100) : a.value = 0, a.value < 0 && (a.value = 0), a.value > 100 && (a.value = 100), a.value + "%";
+    }
+    return l({
+      computeInnerWidth: o,
+      computedPercentage: a
+    }), (r, n) => (s(), m("div", Do, [
+      _("div", {
+        class: S(["joy-progress-bar-inner", `joy-progress-bar-inner_${e.color}`]),
+        style: Z({ width: o.value })
+      }, null, 6)
     ]));
   }
 });
-const Jo = /* @__PURE__ */ k(To, [["__scopeId", "data-v-d88510ab"]]), Po = ["id", "value", "checked", "disabled", "required", "name"], zo = { class: "joy-radio-label" }, Ao = { class: "joy-radio-content__wrapper" }, Fo = { class: "joy-radio-content" }, qo = /* @__PURE__ */ j({
+const Go = /* @__PURE__ */ k(Wo, [["__scopeId", "data-v-a28eae43"]]), Uo = ["id", "value", "checked", "disabled", "required", "name"], Zo = { class: "joy-radio-label" }, Ko = { class: "joy-radio-content__wrapper" }, Qo = { class: "joy-radio-content" }, Yo = /* @__PURE__ */ $({
   __name: "VJoyRadio",
   props: {
     disabled: {
@@ -2499,38 +2714,38 @@ const Jo = /* @__PURE__ */ k(To, [["__scopeId", "data-v-d88510ab"]]), Po = ["id"
   },
   emits: ["update:modelValue"],
   setup(e, { expose: l, emit: t }) {
-    const a = e, o = w(!1), i = w(!1), r = w(null), n = w(null), d = ee(), y = V(() => !a.modelValue || !a.value ? !1 : a.modelValue === a.value);
-    function c() {
-      o.value = !!d["expandable-content"] && y.value;
+    const a = e, o = w(!1), i = w(!1), r = w(null), n = w(null), c = Y(), v = V(() => !a.modelValue || !a.value ? !1 : a.modelValue === a.value);
+    function d() {
+      o.value = !!c["expandable-content"] && v.value;
     }
-    function v() {
-      t("update:modelValue", a.value), c();
+    function y() {
+      t("update:modelValue", a.value), d();
     }
-    X(() => {
-      a.theme === "outline" && c();
+    Q(() => {
+      a.theme === "outline" && d();
     });
     function f() {
       i.value = !0;
     }
-    function s() {
+    function u() {
       i.value = !1;
     }
-    return E(
+    return P(
       () => a.modelValue,
       () => {
-        c();
+        d();
       }
     ), l({
-      checked: y,
+      checked: v,
       isExpanded: o
-    }), (p, b) => (u(), m("label", {
+    }), (p, b) => (s(), m("label", {
       ref_key: "root",
       ref: r,
       class: S([
         "joy-radio",
         `joy-radio--${e.theme}`,
         {
-          "joy-radio--checked": y.value,
+          "joy-radio--checked": v.value,
           "joy-radio--disabled": e.disabled,
           "joy-radio--invalid": e.invalid,
           "joy-radio--outline-focus": i.value && e.theme === "outline",
@@ -2538,26 +2753,26 @@ const Jo = /* @__PURE__ */ k(To, [["__scopeId", "data-v-d88510ab"]]), Po = ["id"
         }
       ])
     }, [
-      h("input", {
+      _("input", {
         id: e.id,
         type: "radio",
         value: e.value,
-        checked: y.value,
+        checked: v.value,
         disabled: e.disabled,
         required: e.required,
         name: e.name,
-        onChange: v,
+        onChange: y,
         onFocus: f,
-        onBlur: s
-      }, null, 40, Po),
-      h("span", zo, [
+        onBlur: u
+      }, null, 40, Uo),
+      _("span", Zo, [
         g(p.$slots, "default", {}, void 0, !0)
       ]),
-      h("div", Ao, [
-        h("div", Fo, [
+      _("div", Ko, [
+        _("div", Qo, [
           g(p.$slots, "radio-content", {}, void 0, !0)
         ]),
-        h("div", {
+        _("div", {
           ref_key: "expandableElement",
           ref: n,
           class: S(["joy-radio-expandable", { "joy-radio-expandable--expanded": o.value }])
@@ -2568,7 +2783,7 @@ const Jo = /* @__PURE__ */ k(To, [["__scopeId", "data-v-d88510ab"]]), Po = ["id"
     ], 2));
   }
 });
-const Mo = /* @__PURE__ */ k(qo, [["__scopeId", "data-v-24cea99b"]]), No = ["form", "name"], Ro = /* @__PURE__ */ j({
+const Xo = /* @__PURE__ */ k(Yo, [["__scopeId", "data-v-24cea99b"]]), en = ["form", "name"], tn = /* @__PURE__ */ $({
   __name: "VJoyRadioGroup",
   props: {
     /**
@@ -2589,7 +2804,7 @@ const Mo = /* @__PURE__ */ k(qo, [["__scopeId", "data-v-24cea99b"]]), No = ["for
     }
   },
   setup(e) {
-    return (l, t) => (u(), m("fieldset", {
+    return (l, t) => (s(), m("fieldset", {
       ref: "root",
       class: "joy-radio-group-fieldset",
       role: "radiogroup",
@@ -2597,40 +2812,40 @@ const Mo = /* @__PURE__ */ k(qo, [["__scopeId", "data-v-24cea99b"]]), No = ["for
       name: e.name
     }, [
       g(l.$slots, "radio-group-legend", {}, void 0, !0),
-      h("div", {
+      _("div", {
         class: S(["joy-radio-group-container", `joy-radio-group-${e.direction}`])
       }, [
         g(l.$slots, "default", {}, void 0, !0)
       ], 2)
-    ], 8, No));
+    ], 8, en));
   }
 });
-const Ho = /* @__PURE__ */ k(Ro, [["__scopeId", "data-v-a77e7f95"]]), de = (e) => (se("data-v-adbf7701"), e = e(), ue(), e), Do = ["ariaLabel"], Uo = { class: "joy-rating-stars" }, Wo = ["width", "height"], Go = /* @__PURE__ */ de(() => /* @__PURE__ */ h("path", {
+const ln = /* @__PURE__ */ k(tn, [["__scopeId", "data-v-a77e7f95"]]), ce = (e) => (se("data-v-adbf7701"), e = e(), ue(), e), an = ["ariaLabel"], on = { class: "joy-rating-stars" }, nn = ["width", "height"], rn = /* @__PURE__ */ ce(() => /* @__PURE__ */ _("path", {
   d: "M8.51738 0.317102L10.8968 5.03115L15.4764 5.48484C15.7915 5.51103 16.0257 5.78767 15.9995 6.10274C15.9882 6.2386 15.9288 6.36597 15.832 6.46193L12.063 10.1975L13.4604 15.2735C13.5424 15.5821 13.3586 15.8987 13.05 15.9806C12.9134 16.0169 12.7682 16.0019 12.6419 15.9384L7.99897 13.6393L3.36244 15.9355C3.07717 16.079 2.72963 15.964 2.58619 15.6787C2.52268 15.5524 2.50765 15.4073 2.54393 15.2706L3.94129 10.1946L0.169485 6.45908C-0.0550713 6.23653 -0.0566948 5.87408 0.165859 5.64952C0.261822 5.55269 0.389191 5.49329 0.525048 5.482L5.10469 5.0283L7.48056 0.317103C7.62715 0.0307927 7.97809 -0.0824695 8.2644 0.0641246C8.37318 0.119821 8.46168 0.208323 8.51738 0.317102Z",
   fill: "#FFC200"
-}, null, -1)), Zo = [
-  Go
-], Ko = ["width", "height"], Qo = /* @__PURE__ */ de(() => /* @__PURE__ */ h("path", {
+}, null, -1)), sn = [
+  rn
+], un = ["width", "height"], dn = /* @__PURE__ */ ce(() => /* @__PURE__ */ _("path", {
   d: "M9.51738 1.3171L11.8968 6.03115L16.4764 6.48484C16.7915 6.51103 17.0257 6.78767 16.9995 7.10274C16.9882 7.2386 16.9288 7.36597 16.832 7.46193L13.063 11.1975L14.4604 16.2735C14.5424 16.5821 14.3586 16.8987 14.05 16.9806C13.9134 17.0169 13.7682 17.0019 13.6419 16.9384L8.99897 14.6393L4.36244 16.9355C4.07717 17.079 3.72963 16.964 3.58619 16.6787C3.52268 16.5524 3.50765 16.4073 3.54393 16.2706L4.94129 11.1946L1.16949 7.45908C0.944928 7.23653 0.943304 6.87408 1.16586 6.64952C1.26182 6.55269 1.38919 6.49329 1.52505 6.482L6.10469 6.0283L8.48056 1.3171C8.62715 1.03079 8.97809 0.917532 9.2644 1.06412C9.37318 1.11982 9.46168 1.20832 9.51738 1.3171Z",
   stroke: "#FFC200",
   "stroke-width": "1.5",
   "stroke-linecap": "round",
   "stroke-linejoin": "round"
-}, null, -1)), Yo = /* @__PURE__ */ de(() => /* @__PURE__ */ h("path", {
+}, null, -1)), cn = /* @__PURE__ */ ce(() => /* @__PURE__ */ _("path", {
   d: "M4.36243 16.9355L8.99897 14.6393V1C8.78748 1.00017 8.58356 1.11591 8.48055 1.3171L6.10469 6.0283L1.52504 6.482C1.38919 6.49329 1.26182 6.55269 1.16586 6.64952C0.943301 6.87408 0.944925 7.23653 1.16948 7.45908L4.94129 11.1946L3.54393 16.2706C3.50765 16.4073 3.52268 16.5524 3.58618 16.6787C3.72963 16.964 4.07717 17.079 4.36243 16.9355Z",
   fill: "#FFC200"
-}, null, -1)), Xo = [
-  Qo,
-  Yo
-], en = ["width", "height"], tn = /* @__PURE__ */ de(() => /* @__PURE__ */ h("path", {
+}, null, -1)), fn = [
+  dn,
+  cn
+], yn = ["width", "height"], vn = /* @__PURE__ */ ce(() => /* @__PURE__ */ _("path", {
   d: "M11.5746 6.09904C11.6613 6.27083 11.8298 6.38638 12.0213 6.40535L16.8867 6.88741L16.8867 6.88748L16.8956 6.88821C16.9207 6.8903 16.9394 6.91236 16.9373 6.93758C16.9364 6.94846 16.9317 6.95863 16.9239 6.96629L16.9239 6.9663L12.9198 10.9353C12.7754 11.0784 12.7195 11.2882 12.7734 11.4841L14.2569 16.8736C14.2635 16.9009 14.2471 16.9285 14.2199 16.9358C14.2077 16.939 14.1948 16.9377 14.1835 16.932L14.1804 16.9304L9.24773 14.4877C9.09041 14.4098 8.90575 14.4098 8.74844 14.4877L3.82259 16.9274L3.82259 16.9274L3.81953 16.929C3.79405 16.9418 3.76297 16.9315 3.75011 16.906C3.7446 16.895 3.74316 16.8824 3.74605 16.8705L5.22955 11.4811C5.2835 11.2851 5.2275 11.0752 5.08306 10.9321L1.07604 6.96327C1.07601 6.96323 1.07597 6.9632 1.07593 6.96316C1.0581 6.94537 1.05801 6.91646 1.07575 6.89856C1.08341 6.89083 1.09357 6.88609 1.1044 6.88519L1.1044 6.88526L1.11327 6.88438L5.97868 6.40233C6.17024 6.38335 6.3388 6.26773 6.42547 6.09584L8.94803 1.09326C8.94815 1.09302 8.94827 1.09279 8.9484 1.09255C8.96278 1.06539 8.99633 1.05479 9.02371 1.06881C9.03399 1.07407 9.0424 1.08237 9.04781 1.09259C9.04793 1.09281 9.04804 1.09303 9.04816 1.09326L11.5746 6.09904Z",
   stroke: "#E0DED9",
   "stroke-width": "1.5",
   "stroke-linecap": "round",
   "stroke-linejoin": "round"
-}, null, -1)), ln = [
-  tn
-], an = { class: "joy-rating-stars__content" }, on = { key: 0 }, nn = /* @__PURE__ */ j({
+}, null, -1)), pn = [
+  vn
+], mn = { class: "joy-rating-stars__content" }, _n = { key: 0 }, hn = /* @__PURE__ */ $({
   __name: "VJoyRatingStars",
   props: {
     ratingValue: {
@@ -2647,7 +2862,7 @@ const Ho = /* @__PURE__ */ k(Ro, [["__scopeId", "data-v-a77e7f95"]]), de = (e) =
     }
   },
   setup(e, { expose: l }) {
-    const t = e, a = be(), o = V(() => {
+    const t = e, a = we(), o = V(() => {
       switch (t.size) {
         case "large":
           return 17;
@@ -2659,21 +2874,21 @@ const Ho = /* @__PURE__ */ k(Ro, [["__scopeId", "data-v-a77e7f95"]]), de = (e) =
           return 14;
       }
     }), i = V(() => {
-      let r = [], n = 0.24, d = 0.75;
-      for (let y = 0; y < 5; y++)
-        t.ratingValue > n ? r.push(t.ratingValue < d ? "half" : "full") : r.push("empty"), n += 1, d += 1;
+      let r = [], n = 0.24, c = 0.75;
+      for (let v = 0; v < 5; v++)
+        t.ratingValue > n ? r.push(t.ratingValue < c ? "half" : "full") : r.push("empty"), n += 1, c += 1;
       return r;
     });
     return l({
       setStars: i
-    }), (r, n) => (u(), m("div", {
+    }), (r, n) => (s(), m("div", {
       role: "img",
       class: "joy-rating-stars__wrapper",
-      ariaLabel: $(a).ariaLabel || `Rating: ${e.ratingValue} out of 5`
+      ariaLabel: j(a).ariaLabel || `Rating: ${e.ratingValue} out of 5`
     }, [
-      h("ul", Uo, [
-        (u(!0), m(W, null, Y(i.value, (d, y) => (u(), m("li", { key: y }, [
-          d === "full" ? (u(), m("svg", {
+      _("ul", on, [
+        (s(!0), m(H, null, U(i.value, (c, v) => (s(), m("li", { key: v }, [
+          c === "full" ? (s(), m("svg", {
             key: 0,
             "aria-hidden": "true",
             class: "star-full",
@@ -2682,7 +2897,7 @@ const Ho = /* @__PURE__ */ k(Ro, [["__scopeId", "data-v-a77e7f95"]]), de = (e) =
             viewBox: "0 0 17 17",
             fill: "none",
             xmlns: "http://www.w3.org/2000/svg"
-          }, Zo, 8, Wo)) : d === "half" ? (u(), m("svg", {
+          }, sn, 8, nn)) : c === "half" ? (s(), m("svg", {
             key: 1,
             "aria-hidden": "true",
             class: "star-half",
@@ -2691,7 +2906,7 @@ const Ho = /* @__PURE__ */ k(Ro, [["__scopeId", "data-v-a77e7f95"]]), de = (e) =
             viewBox: "0 0 17 17",
             xmlns: "http://www.w3.org/2000/svg",
             fill: "none"
-          }, Xo, 8, Ko)) : (u(), m("svg", {
+          }, fn, 8, un)) : (s(), m("svg", {
             key: 2,
             class: "star-empty",
             "aria-hidden": "true",
@@ -2700,21 +2915,21 @@ const Ho = /* @__PURE__ */ k(Ro, [["__scopeId", "data-v-a77e7f95"]]), de = (e) =
             viewBox: "0 0 17 17",
             fill: "none",
             xmlns: "http://www.w3.org/2000/svg"
-          }, ln, 8, en))
+          }, pn, 8, yn))
         ]))), 128))
       ]),
-      h("div", an, [
+      _("div", mn, [
         g(r.$slots, "rating-stars-content", {}, () => [
-          e.reviewCount ? (u(), m("span", on, "(" + C(e.reviewCount) + ")", 1)) : _("", !0)
+          e.reviewCount ? (s(), m("span", _n, "(" + L(e.reviewCount) + ")", 1)) : h("", !0)
         ], !0)
       ])
-    ], 8, Do));
+    ], 8, an));
   }
 });
-const rn = /* @__PURE__ */ k(nn, [["__scopeId", "data-v-adbf7701"]]), sn = { class: "joy-screen-loader__content" }, un = {
+const gn = /* @__PURE__ */ k(hn, [["__scopeId", "data-v-adbf7701"]]), bn = { class: "joy-screen-loader__content" }, wn = {
   key: 0,
   class: "joy-screen-loader__content"
-}, dn = /* @__PURE__ */ j({
+}, Sn = /* @__PURE__ */ $({
   __name: "VJoyScreenLoader",
   props: {
     /** Light or dark. Changes the spinner and background color */
@@ -2729,23 +2944,23 @@ const rn = /* @__PURE__ */ k(nn, [["__scopeId", "data-v-adbf7701"]]), sn = { cla
     }
   },
   setup(e) {
-    return (l, t) => (u(), m("div", {
+    return (l, t) => (s(), m("div", {
       class: S(["joy-screen-loader", `joy-screen-loader--${e.color}`, { "joy-screen-loader--overlay": e.overlay }])
     }, [
-      h("div", sn, [
+      _("div", bn, [
         g(l.$slots, "spinner", {}, () => [
-          U($e, {
+          R(Ve, {
             color: e.color === "dark" ? "white" : "teal"
           }, null, 8, ["color"])
         ], !0),
-        l.$slots.content ? (u(), m("div", un, [
+        l.$slots.content ? (s(), m("div", wn, [
           g(l.$slots, "content", {}, void 0, !0)
-        ])) : _("", !0)
+        ])) : h("", !0)
       ])
     ], 2));
   }
 });
-const Ve = /* @__PURE__ */ k(dn, [["__scopeId", "data-v-5c4f6d7f"]]), cn = ["id", "name", "aria-invalid", "required", "disabled", "value"], fn = /* @__PURE__ */ j({
+const Ie = /* @__PURE__ */ k(Sn, [["__scopeId", "data-v-5c4f6d7f"]]), $n = ["id", "name", "aria-invalid", "required", "disabled", "value"], jn = /* @__PURE__ */ $({
   __name: "VJoySelect",
   props: {
     disabled: {
@@ -2788,15 +3003,15 @@ const Ve = /* @__PURE__ */ k(dn, [["__scopeId", "data-v-5c4f6d7f"]]), cn = ["id"
   },
   emits: ["update:modelValue"],
   setup(e, { emit: l }) {
-    const t = e, a = w(), o = w(), i = ee(), r = w(!1), n = V(() => t.labelSize ? t.labelSize : t.size !== "medium" ? "small" : "medium");
-    X(() => {
-      var s;
-      const v = i.label && i.label();
-      if (!v || !v.length)
+    const t = e, a = w(), o = w(), i = Y(), r = w(!1), n = V(() => t.labelSize ? t.labelSize : t.size !== "medium" ? "small" : "medium");
+    Q(() => {
+      var u;
+      const y = i.label && i.label();
+      if (!y || !y.length)
         return;
-      const f = v[0];
+      const f = y[0];
       if (f.type === "JoyLabel") {
-        const p = (s = f.props) == null ? void 0 : s.for;
+        const p = (u = f.props) == null ? void 0 : u.for;
         if (!p) {
           console.warn("JoyLabel for attribute is missing");
           return;
@@ -2804,35 +3019,35 @@ const Ve = /* @__PURE__ */ k(dn, [["__scopeId", "data-v-5c4f6d7f"]]), cn = ["id"
         p !== t.id && console.warn("JoyLabel for attribute does not match with JoySelect id");
       }
     });
-    function d(v) {
-      const f = v.target.value;
+    function c(y) {
+      const f = y.target.value;
       l("update:modelValue", f);
     }
-    function y() {
+    function v() {
       r.value = !0;
     }
-    function c() {
+    function d() {
       r.value = !1;
     }
-    return (v, f) => (u(), m("div", {
+    return (y, f) => (s(), m("div", {
       ref_key: "root",
       ref: a
     }, [
-      g(v.$slots, "select-label", {}, () => [
-        e.label ? (u(), x(K, {
+      g(y.$slots, "select-label", {}, () => [
+        e.label ? (s(), C(ee, {
           key: 0,
           required: e.required && e.requiredMark,
           "optional-label": e.optionalLabel,
           for: e.id || e.name,
           size: n.value
         }, {
-          default: B(() => [
-            O(C(e.label), 1)
+          default: O(() => [
+            B(L(e.label), 1)
           ]),
           _: 1
-        }, 8, ["required", "optional-label", "for", "size"])) : _("", !0)
+        }, 8, ["required", "optional-label", "for", "size"])) : h("", !0)
       ], !0),
-      h("div", {
+      _("div", {
         class: S([
           `joy-select--${e.size}`,
           {
@@ -2843,7 +3058,7 @@ const Ve = /* @__PURE__ */ k(dn, [["__scopeId", "data-v-5c4f6d7f"]]), cn = ["id"
           }
         ])
       }, [
-        h("select", {
+        _("select", {
           id: e.id || e.name,
           ref_key: "select",
           ref: o,
@@ -2853,13 +3068,13 @@ const Ve = /* @__PURE__ */ k(dn, [["__scopeId", "data-v-5c4f6d7f"]]), cn = ["id"
           required: e.required,
           disabled: e.disabled,
           value: e.modelValue,
-          onInput: d,
-          onFocus: y,
-          onBlur: c
+          onInput: c,
+          onFocus: v,
+          onBlur: d
         }, [
-          g(v.$slots, "default", {}, void 0, !0)
-        ], 40, cn),
-        U(J, {
+          g(y.$slots, "default", {}, void 0, !0)
+        ], 40, $n),
+        R(E, {
           class: "joy-select__chevron",
           name: "chevron-down"
         })
@@ -2867,7 +3082,7 @@ const Ve = /* @__PURE__ */ k(dn, [["__scopeId", "data-v-5c4f6d7f"]]), cn = ["id"
     ], 512));
   }
 });
-const yn = /* @__PURE__ */ k(fn, [["__scopeId", "data-v-26bd5a41"]]), vn = ["aria-disabled"], mn = ["id", "value", "checked", "disabled", "required", "name"], pn = /* @__PURE__ */ j({
+const kn = /* @__PURE__ */ k(jn, [["__scopeId", "data-v-26bd5a41"]]), Vn = ["aria-disabled"], xn = ["id", "value", "checked", "disabled", "required", "name"], Cn = /* @__PURE__ */ $({
   __name: "VJoySelectableItem",
   props: {
     disabled: {
@@ -2911,8 +3126,8 @@ const yn = /* @__PURE__ */ k(fn, [["__scopeId", "data-v-26bd5a41"]]), vn = ["ari
       onClick: () => {
         t.checked && !t.multiple && l("update:checked", "");
       },
-      onLabelClick: (y) => {
-        t.multiple || y.stopPropagation();
+      onLabelClick: (v) => {
+        t.multiple || v.stopPropagation();
       },
       onFocus: () => {
         i.value = !0;
@@ -2921,10 +3136,10 @@ const yn = /* @__PURE__ */ k(fn, [["__scopeId", "data-v-26bd5a41"]]), vn = ["ari
         i.value = !1;
       }
     };
-    function d(y) {
-      l("update:checked", y);
+    function c(v) {
+      l("update:checked", v);
     }
-    return (y, c) => (u(), m("div", {
+    return (v, d) => (s(), m("div", {
       class: S([
         "joy-selectable-item__wrapper",
         {
@@ -2932,10 +3147,10 @@ const yn = /* @__PURE__ */ k(fn, [["__scopeId", "data-v-26bd5a41"]]), vn = ["ari
         }
       ]),
       "aria-disabled": e.disabled,
-      onClick: c[4] || (c[4] = //@ts-ignore
-      (...v) => n.onClick && n.onClick(...v))
+      onClick: d[4] || (d[4] = //@ts-ignore
+      (...y) => n.onClick && n.onClick(...y))
     }, [
-      e.multiple ? _("", !0) : (u(), m("input", {
+      e.multiple ? h("", !0) : (s(), m("input", {
         key: 0,
         id: e.id,
         ref_key: "inputRadio",
@@ -2946,14 +3161,14 @@ const yn = /* @__PURE__ */ k(fn, [["__scopeId", "data-v-26bd5a41"]]), vn = ["ari
         disabled: e.disabled,
         required: e.required,
         name: e.name,
-        onChange: c[0] || (c[0] = //@ts-ignore
-        (...v) => n.onRadioChange && n.onRadioChange(...v)),
-        onFocus: c[1] || (c[1] = //@ts-ignore
-        (...v) => n.onFocus && n.onFocus(...v)),
-        onBlur: c[2] || (c[2] = //@ts-ignore
-        (...v) => n.onBlur && n.onBlur(...v))
-      }, null, 40, mn)),
-      (u(), x(re($(r)), {
+        onChange: d[0] || (d[0] = //@ts-ignore
+        (...y) => n.onRadioChange && n.onRadioChange(...y)),
+        onFocus: d[1] || (d[1] = //@ts-ignore
+        (...y) => n.onFocus && n.onFocus(...y)),
+        onBlur: d[2] || (d[2] = //@ts-ignore
+        (...y) => n.onBlur && n.onBlur(...y))
+      }, null, 40, xn)),
+      (s(), C(oe(j(r)), {
         for: e.id,
         class: S([
           "joy-selectable-item",
@@ -2966,14 +3181,14 @@ const yn = /* @__PURE__ */ k(fn, [["__scopeId", "data-v-26bd5a41"]]), vn = ["ari
         ]),
         onClick: n.onLabelClick
       }, {
-        default: B(() => [
-          e.multiple ? (u(), x($(je), {
+        default: O(() => [
+          e.multiple ? (s(), C(j(Ce), {
             key: 0,
             id: e.id,
             checked: a.value,
             "onUpdate:checked": [
-              c[3] || (c[3] = (v) => a.value = v),
-              d
+              d[3] || (d[3] = (y) => a.value = y),
+              c
             ],
             disabled: e.disabled,
             value: e.value,
@@ -2983,24 +3198,24 @@ const yn = /* @__PURE__ */ k(fn, [["__scopeId", "data-v-26bd5a41"]]), vn = ["ari
             onFocus: n.onFocus,
             onBlur: n.onBlur
           }, {
-            default: B(() => [
-              g(y.$slots, "default", {}, void 0, !0)
+            default: O(() => [
+              g(v.$slots, "default", {}, void 0, !0)
             ]),
             _: 3
-          }, 8, ["id", "checked", "disabled", "value", "name", "required", "onFocus", "onBlur"])) : _("", !0),
-          e.multiple ? _("", !0) : g(y.$slots, "default", { key: 1 }, void 0, !0),
-          h("div", {
-            class: S([{ "joy-selectable-item__sublabel": y.$slots["selectable-item-sublabel"] }])
+          }, 8, ["id", "checked", "disabled", "value", "name", "required", "onFocus", "onBlur"])) : h("", !0),
+          e.multiple ? h("", !0) : g(v.$slots, "default", { key: 1 }, void 0, !0),
+          _("div", {
+            class: S([{ "joy-selectable-item__sublabel": v.$slots["selectable-item-sublabel"] }])
           }, [
-            g(y.$slots, "selectable-item-sublabel", {}, void 0, !0)
+            g(v.$slots, "selectable-item-sublabel", {}, void 0, !0)
           ], 2)
         ]),
         _: 3
       }, 8, ["for", "class", "onClick"]))
-    ], 10, vn));
+    ], 10, Vn));
   }
 });
-const ct = /* @__PURE__ */ k(pn, [["__scopeId", "data-v-cb2531c0"]]), hn = ["id"], _n = /* @__PURE__ */ j({
+const yt = /* @__PURE__ */ k(Cn, [["__scopeId", "data-v-cb2531c0"]]), Ln = ["id"], In = /* @__PURE__ */ $({
   __name: "VJoySelectableItemGroup",
   props: {
     options: {
@@ -3051,23 +3266,23 @@ const ct = /* @__PURE__ */ k(pn, [["__scopeId", "data-v-cb2531c0"]]), hn = ["id"
       let n = [...t.value || []];
       r && typeof r == "boolean" ? n.push(i) : n.splice(n.indexOf(i), 1), l("update:value", n);
     }
-    return (i, r) => (u(), m("fieldset", {
+    return (i, r) => (s(), m("fieldset", {
       id: e.id,
       class: "joy-selectable-item-group__wrapper"
     }, [
-      e.label ? (u(), x($(K), {
+      e.label ? (s(), C(j(ee), {
         key: 0,
         "tag-name": "legend",
         required: e.required && e.requiredMark,
         "optional-label": e.optionalLabel,
         size: e.labelSize
       }, {
-        default: B(() => [
-          O(C(e.label), 1)
+        default: O(() => [
+          B(L(e.label), 1)
         ]),
         _: 1
-      }, 8, ["required", "optional-label", "size"])) : _("", !0),
-      h("div", {
+      }, 8, ["required", "optional-label", "size"])) : h("", !0),
+      _("div", {
         class: S([
           "joy-selectable-item-group",
           {
@@ -3077,7 +3292,7 @@ const ct = /* @__PURE__ */ k(pn, [["__scopeId", "data-v-cb2531c0"]]), hn = ["id"
           }
         ])
       }, [
-        (u(!0), m(W, null, Y(e.options, (n) => (u(), x($(ct), {
+        (s(!0), m(H, null, U(e.options, (n) => (s(), C(j(yt), {
           id: n.id,
           key: n.id,
           name: n.name,
@@ -3085,26 +3300,26 @@ const ct = /* @__PURE__ */ k(pn, [["__scopeId", "data-v-cb2531c0"]]), hn = ["id"
           value: n.value,
           multiple: e.multiple,
           checked: a(n),
-          "onUpdate:checked": (d) => o(n.value, d)
-        }, et({
-          default: B(() => [
-            O(C(n.label) + " ", 1)
+          "onUpdate:checked": (c) => o(n.value, c)
+        }, at({
+          default: O(() => [
+            B(L(n.label) + " ", 1)
           ]),
           _: 2
         }, [
           n.subLabel ? {
             name: "selectable-item-sublabel",
-            fn: B(() => [
-              O(C(n.subLabel), 1)
+            fn: O(() => [
+              B(L(n.subLabel), 1)
             ]),
             key: "0"
           } : void 0
         ]), 1032, ["id", "name", "disabled", "value", "multiple", "checked", "onUpdate:checked"]))), 128))
       ], 2)
-    ], 8, hn));
+    ], 8, Ln));
   }
 });
-const gn = /* @__PURE__ */ k(_n, [["__scopeId", "data-v-0730aed0"]]), bn = /* @__PURE__ */ j({
+const Bn = /* @__PURE__ */ k(In, [["__scopeId", "data-v-0730aed0"]]), On = /* @__PURE__ */ $({
   __name: "VJoySeparator",
   props: {
     /** Main text to apply in the central area */
@@ -3117,14 +3332,14 @@ const gn = /* @__PURE__ */ k(_n, [["__scopeId", "data-v-0730aed0"]]), bn = /* @_
     }
   },
   setup(e) {
-    return (l, t) => (u(), m("div", {
+    return (l, t) => (s(), m("div", {
       class: S(["joy-separator", { "joy-separator__small": e.size === "small" }])
     }, [
-      h("span", null, C(e.text), 1)
+      _("span", null, L(e.text), 1)
     ], 2));
   }
 });
-const wn = /* @__PURE__ */ k(bn, [["__scopeId", "data-v-d83b1859"]]), Sn = /* @__PURE__ */ j({
+const Tn = /* @__PURE__ */ k(On, [["__scopeId", "data-v-d83b1859"]]), Pn = /* @__PURE__ */ $({
   __name: "VJoyWrapper",
   props: {
     /** Horizontal spread. Refers to CSS flex justify-content. */
@@ -3168,7 +3383,7 @@ const wn = /* @__PURE__ */ k(bn, [["__scopeId", "data-v-d83b1859"]]), Sn = /* @_
     }
   },
   setup(e) {
-    return Xe("VJoyWrapperContext", e), (t, a) => (u(), m("div", {
+    return ke("VJoyWrapperContext", e), (t, a) => (s(), m("div", {
       class: S([
         "joy-wrapper",
         `joy-wrapper--justify-${e.justify}`,
@@ -3185,7 +3400,199 @@ const wn = /* @__PURE__ */ k(bn, [["__scopeId", "data-v-d83b1859"]]), Sn = /* @_
     ], 2));
   }
 });
-const $n = /* @__PURE__ */ k(Sn, [["__scopeId", "data-v-8a6c4326"]]), jn = ["role"], kn = /* @__PURE__ */ j({
+const Jn = /* @__PURE__ */ k(Pn, [["__scopeId", "data-v-8a6c4326"]]), En = ["id", "href", "aria-selected", "aria-controls"], zn = {
+  type: "button",
+  tabindex: "-1"
+}, An = /* @__PURE__ */ $({
+  __name: "TabButton",
+  props: {
+    /**
+     * Boolean to change style if tabButton is selected
+     */
+    selected: {
+      type: Boolean,
+      default: !1
+    },
+    /**
+     * Id of the tab, used for aria prop
+     */
+    tab: {
+      type: String,
+      required: !0
+    },
+    /**
+     * Href props to send to a link. If filled, it replaces the default comportment
+     */
+    href: {
+      type: String,
+      required: !1
+    },
+    /**
+     * Label of the button. If filled, it replaces the default slot
+     */
+    label: {
+      type: String,
+      required: !1
+    }
+  },
+  emits: ["changeTab"],
+  setup(e, { emit: l }) {
+    function t() {
+      l("changeTab");
+    }
+    function a(o) {
+      (o.code === "Enter" || o.code === "NumpadEnter") && l("changeTab");
+    }
+    return (o, i) => (s(), m("a", {
+      id: `joy-tab-${e.tab}`,
+      href: e.href,
+      "aria-selected": e.selected ? "true" : "false",
+      "aria-controls": `job-tab-${e.tab}`,
+      tabindex: "0",
+      role: "tab",
+      onClick: t,
+      onKeydown: i[0] || (i[0] = (r) => a(r))
+    }, [
+      _("div", {
+        part: "tab-button",
+        class: S({
+          "joy-tab-button": !0,
+          "joy-tab-button__selected": e.selected
+        })
+      }, [
+        _("button", zn, [
+          _("div", null, [
+            g(o.$slots, "default", {}, () => [
+              B(L(e.label), 1)
+            ], !0)
+          ])
+        ])
+      ], 2)
+    ], 40, En));
+  }
+});
+const Fn = /* @__PURE__ */ k(An, [["__scopeId", "data-v-b1e62ec8"]]), qn = { class: "joy-tabs" }, Nn = /* @__PURE__ */ $({
+  __name: "VJoyTabs",
+  props: {
+    /** Use this prop to activate a specific tab by default by giving its name */
+    selectedTab: {
+      type: String
+    }
+  },
+  emits: ["update:selected-tab"],
+  setup(e, { emit: l }) {
+    const t = e, a = Y(), o = w(t.selectedTab), i = w(null), r = w(null), n = w(!1), c = w(!1), v = V(() => a.default().filter(d));
+    function d(p) {
+      var b;
+      return ((b = p == null ? void 0 : p.type) == null ? void 0 : b.__name) === "VJoyTab";
+    }
+    function y(p) {
+      return p.props.tab === o.value;
+    }
+    function f() {
+      r.value && i.value && r.value.scrollWidth > i.value.offsetWidth ? (c.value = r.value.scrollLeft > 0, n.value = r.value.scrollLeft + i.value.offsetWidth < r.value.scrollWidth) : (c.value = !1, n.value = !1);
+    }
+    function u(p, b = !0) {
+      p && b && (o.value = p, ke("VJoyTabs", o), l("update:selected-tab", p));
+    }
+    return P(
+      () => t.selectedTab,
+      (p) => {
+        p && u(p);
+      },
+      { immediate: !0 }
+    ), Q(() => {
+      var p;
+      f(), (p = r.value) == null || p.addEventListener("scroll", f);
+    }), Se(() => {
+      var p;
+      (p = r.value) == null || p.removeEventListener("scroll", f);
+    }), (p, b) => (s(), m("div", qn, [
+      _("div", {
+        ref_key: "buttonListWrapper",
+        ref: i,
+        class: S({
+          "joy-tabs-buttons__wrapper": !0,
+          "joy-tabs-buttons__wrapper--scroll-end": n.value,
+          "joy-tabs-buttons__wrapper--scroll-start": c.value
+        })
+      }, [
+        _("div", {
+          ref_key: "buttonList",
+          ref: r,
+          class: "joy-tabs-buttons",
+          role: "tablist"
+        }, [
+          (s(!0), m(H, null, U(v.value, (x) => (s(), m("div", {
+            key: x.props.tab
+          }, [
+            R(Fn, {
+              tab: x.props.tab,
+              label: x.props.label,
+              href: x.props.href,
+              selected: y(x),
+              onChangeTab: (T) => u(x.props.tab, !x.props.href)
+            }, {
+              default: O(() => {
+                var T;
+                return [
+                  (T = x.children) != null && T.header ? (s(), C(oe(x.children.header), { key: 0 })) : h("", !0)
+                ];
+              }),
+              _: 2
+            }, 1032, ["tab", "label", "href", "selected", "onChangeTab"])
+          ]))), 128))
+        ], 512)
+      ], 2),
+      _("div", null, [
+        g(p.$slots, "default", {}, void 0, !0)
+      ])
+    ]));
+  }
+});
+const Mn = /* @__PURE__ */ k(Nn, [["__scopeId", "data-v-e3dffafe"]]), Rn = ["id", "aria-hidden", "aria-labelledby"], Hn = /* @__PURE__ */ $({
+  __name: "VJoyTab",
+  props: {
+    /**
+     * A tab id or name must be provided for each `joy-tab`. It's used internally to reference
+     * the selected tab
+     */
+    tab: {
+      type: String,
+      required: !0
+    },
+    /**
+     * The title given to the button
+     */
+    label: {
+      type: String,
+      required: !0
+    },
+    /**
+     * Allow to have a link on the button. When clicking on the button, you will be redirected to the target of the URL.
+     */
+    href: {
+      type: String,
+      required: !1
+    }
+  },
+  setup(e) {
+    const l = e, t = de("VJoyTabs", w("")), a = V(() => t.value === l.tab);
+    return (o, i) => (s(), m("div", {
+      id: `joy-tab-${e.tab}`,
+      role: "tabpanel",
+      "aria-hidden": a.value ? void 0 : "true",
+      "aria-labelledby": `joy-tab-${e.tab}`,
+      class: S({
+        "joy-tab": !0,
+        "joy-tab__selected": a.value
+      })
+    }, [
+      g(o.$slots, "default", {}, void 0, !0)
+    ], 10, Rn));
+  }
+});
+const Dn = /* @__PURE__ */ k(Hn, [["__scopeId", "data-v-47a75127"]]), Wn = ["role"], Gn = /* @__PURE__ */ $({
   __name: "VJoyTag",
   props: {
     /** Text injected within the tag */
@@ -3238,29 +3645,29 @@ const $n = /* @__PURE__ */ k(Sn, [["__scopeId", "data-v-8a6c4326"]]), jn = ["rol
     function r() {
       l("click"), t.selectable && a.includes(t.variant) && l("selected", { selected: !t.selected, value: t.value });
     }
-    return (n, d) => (u(), m("span", {
+    return (n, c) => (s(), m("span", {
       class: S([o.value]),
       role: e.link || e.selectable ? "button" : void 0,
       onClick: r
     }, [
-      e.draggable ? (u(), x(J, {
+      e.draggable ? (s(), C(E, {
         key: 0,
         class: "joy-tag__drag",
         name: "drag",
         size: "xxsmall"
-      })) : _("", !0),
-      O(" " + C(e.label) + " ", 1),
-      e.removable ? (u(), x(J, {
+      })) : h("", !0),
+      B(" " + L(e.label) + " ", 1),
+      e.removable ? (s(), C(E, {
         key: 1,
         class: "joy-tag__removable",
         name: "cross",
         size: "xxsmall",
-        onClick: bt(i, ["stop"])
-      }, null, 8, ["onClick"])) : _("", !0)
-    ], 10, jn));
+        onClick: St(i, ["stop"])
+      }, null, 8, ["onClick"])) : h("", !0)
+    ], 10, Wn));
   }
 });
-const ft = /* @__PURE__ */ k(kn, [["__scopeId", "data-v-01b9f7cc"]]), Vn = /* @__PURE__ */ j({
+const vt = /* @__PURE__ */ k(Gn, [["__scopeId", "data-v-01b9f7cc"]]), Un = /* @__PURE__ */ $({
   __name: "VJoyTagsList",
   props: {
     align: {
@@ -3291,58 +3698,58 @@ const ft = /* @__PURE__ */ k(kn, [["__scopeId", "data-v-01b9f7cc"]]), Vn = /* @_
       return t.removable ? !1 : (n = t.modelValue) == null ? void 0 : n.includes(r.value);
     }
     function o(r, n) {
-      let d = [];
-      r.selected && !a(n) ? d = [...t.modelValue || [], n.value] : d = (t.modelValue || []).filter((y) => y !== n.value), l("update:modelValue", d);
+      let c = [];
+      r.selected && !a(n) ? c = [...t.modelValue || [], n.value] : c = (t.modelValue || []).filter((v) => v !== n.value), l("update:modelValue", c);
     }
     function i(r) {
       l("removeTag", r.value);
     }
-    return (r, n) => (u(), m("div", {
+    return (r, n) => (s(), m("div", {
       class: S(["joy-tags-list", `joy-tags-list--${e.align}`])
     }, [
-      (u(!0), m(W, null, Y(e.tags, (d) => (u(), x($(ft), G({
-        key: d.value,
+      (s(!0), m(H, null, U(e.tags, (c) => (s(), C(j(vt), K({
+        key: c.value,
         selectable: !!e.modelValue && !e.removable
-      }, d, {
+      }, c, {
         removable: e.removable,
-        selected: a(d),
+        selected: a(c),
         onRemove: i,
-        onSelected: (y) => o(y, d)
+        onSelected: (v) => o(v, c)
       }), null, 16, ["selectable", "removable", "selected", "onSelected"]))), 128))
     ], 2));
   }
 });
-const xn = /* @__PURE__ */ k(Vn, [["__scopeId", "data-v-510c6367"]]);
-const Cn = {}, Ln = {
+const Zn = /* @__PURE__ */ k(Un, [["__scopeId", "data-v-510c6367"]]);
+const Kn = {}, Qn = {
   class: /* @__PURE__ */ S(["joy-template-shape__shapes"])
-}, In = /* @__PURE__ */ Ke('<div class="shapes__wrapper" data-v-8b258f92><div class="shape_1" data-v-8b258f92></div><div class="shape_2" data-v-8b258f92></div><div class="shape_3" data-v-8b258f92></div><div class="shape_4" data-v-8b258f92></div></div>', 1), On = [
-  In
+}, Yn = /* @__PURE__ */ tt('<div class="shapes__wrapper" data-v-8b258f92><div class="shape_1" data-v-8b258f92></div><div class="shape_2" data-v-8b258f92></div><div class="shape_3" data-v-8b258f92></div><div class="shape_4" data-v-8b258f92></div></div>', 1), Xn = [
+  Yn
 ];
-function Bn(e, l) {
-  return u(), m("div", Ln, On);
+function ei(e, l) {
+  return s(), m("div", Qn, Xn);
 }
-const yt = /* @__PURE__ */ k(Cn, [["render", Bn], ["__scopeId", "data-v-8b258f92"]]), En = { class: "joy-template__wrapper" }, Tn = {
+const pt = /* @__PURE__ */ k(Kn, [["render", ei], ["__scopeId", "data-v-8b258f92"]]), ti = { class: "joy-template__wrapper" }, li = {
   key: 0,
   class: "joy-template__heading"
-}, Jn = {
+}, ai = {
   key: 0,
   class: "joy-template-slot-back"
-}, Pn = { class: "joy-template__heading___headings" }, zn = {
+}, oi = { class: "joy-template__heading___headings" }, ni = {
   key: 0,
   class: "joy-template-slot-title"
-}, An = {
+}, ii = {
   key: 1,
   class: "joy-template-slot-subtitle"
-}, Fn = {
+}, ri = {
   key: 1,
   class: "joy-template-slot-actions"
-}, qn = {
+}, si = {
   key: 0,
   class: "joy-template-slot-main"
-}, Mn = {
+}, ui = {
   key: 1,
   class: "joy-template-slot-sidebar"
-}, Nn = /* @__PURE__ */ j({
+}, di = /* @__PURE__ */ $({
   __name: "VJoyTemplate",
   props: {
     full: { type: Boolean, default: !1 },
@@ -3361,29 +3768,29 @@ const yt = /* @__PURE__ */ k(Cn, [["render", Bn], ["__scopeId", "data-v-8b258f92
     }
   },
   setup(e) {
-    const l = e, t = ee(), a = V(() => !!t["template-back"] || !!t["template-title"] || !!t["template-subtitle"] || !!t["template-actions"]);
-    return (o, i) => (u(), m("main", {
+    const l = e, t = Y(), a = V(() => !!t["template-back"] || !!t["template-title"] || !!t["template-subtitle"] || !!t["template-actions"]);
+    return (o, i) => (s(), m("main", {
       class: S(["joy-template", { "joy-template--full": e.full, "joy-template--loading": e.loading }])
     }, [
-      e.shapes ? (u(), x(yt, { key: 0 })) : _("", !0),
-      h("div", En, [
-        a.value ? (u(), m("div", Tn, [
-          $(t)["template-back"] ? (u(), m("div", Jn, [
+      e.shapes ? (s(), C(pt, { key: 0 })) : h("", !0),
+      _("div", ti, [
+        a.value ? (s(), m("div", li, [
+          j(t)["template-back"] ? (s(), m("div", ai, [
             g(o.$slots, "template-back", {}, void 0, !0)
-          ])) : _("", !0),
-          h("div", Pn, [
-            $(t)["template-title"] ? (u(), m("div", zn, [
+          ])) : h("", !0),
+          _("div", oi, [
+            j(t)["template-title"] ? (s(), m("div", ni, [
               g(o.$slots, "template-title", {}, void 0, !0)
-            ])) : _("", !0),
-            $(t)["template-subtitle"] ? (u(), m("div", An, [
+            ])) : h("", !0),
+            j(t)["template-subtitle"] ? (s(), m("div", ii, [
               g(o.$slots, "template-subtitle", {}, void 0, !0)
-            ])) : _("", !0)
+            ])) : h("", !0)
           ]),
-          $(t)["template-actions"] ? (u(), m("div", Fn, [
+          j(t)["template-actions"] ? (s(), m("div", ri, [
             g(o.$slots, "template-actions", {}, void 0, !0)
-          ])) : _("", !0)
-        ])) : _("", !0),
-        h("div", {
+          ])) : h("", !0)
+        ])) : h("", !0),
+        _("div", {
           class: S([
             "joy-template__content",
             {
@@ -3391,34 +3798,34 @@ const yt = /* @__PURE__ */ k(Cn, [["render", Bn], ["__scopeId", "data-v-8b258f92
             }
           ])
         }, [
-          o.$slots["template-main"] ? (u(), m("div", qn, [
+          o.$slots["template-main"] ? (s(), m("div", si, [
             g(o.$slots, "template-main", {}, void 0, !0)
-          ])) : _("", !0),
-          o.$slots["template-sidebar"] ? (u(), m("div", Mn, [
+          ])) : h("", !0),
+          o.$slots["template-sidebar"] ? (s(), m("div", ui, [
             g(o.$slots, "template-sidebar", {}, void 0, !0)
-          ])) : _("", !0)
+          ])) : h("", !0)
         ], 2)
       ]),
-      e.loading ? (u(), x(Ve, {
+      e.loading ? (s(), C(Ie, {
         key: 1,
         overlay: "",
         color: e.loadingColor
       }, {
-        content: B(() => [
+        content: O(() => [
           g(o.$slots, "template-loader-content", {}, void 0, !0)
         ]),
         _: 3
-      }, 8, ["color"])) : _("", !0)
+      }, 8, ["color"])) : h("", !0)
     ], 2));
   }
 });
-const Rn = /* @__PURE__ */ k(Nn, [["__scopeId", "data-v-750153b6"]]), Hn = ["aria-disabled"], Dn = { class: "joy-textarea_wrapper" }, Un = ["id", "disabled", "name", "required", "minlength", "value"], Wn = {
+const ci = /* @__PURE__ */ k(di, [["__scopeId", "data-v-750153b6"]]), fi = ["aria-disabled"], yi = { class: "joy-textarea_wrapper" }, vi = ["id", "disabled", "name", "required", "minlength", "value"], pi = {
   key: 0,
   class: "joy-textarea_helpers"
-}, Gn = {
+}, mi = {
   inheritAttrs: !1
-}, Zn = /* @__PURE__ */ j({
-  ...Gn,
+}, _i = /* @__PURE__ */ $({
+  ...mi,
   __name: "VJoyTextarea",
   props: {
     disabled: {
@@ -3472,17 +3879,17 @@ const Rn = /* @__PURE__ */ k(Nn, [["__scopeId", "data-v-750153b6"]]), Hn = ["ari
   },
   emits: ["update:modelValue"],
   setup(e, { expose: l, emit: t }) {
-    const a = e, o = w(), { triggerResize: i } = Xl({
+    const a = e, o = w(), { triggerResize: i } = la({
       element: a.autogrow ? o : void 0
-    }), r = w(!1), n = w(!1), d = V(() => a.maxlength ? a.modelValue.length > a.maxlength : !1), y = V(() => a.minlength ? a.modelValue.length < a.minlength : !1), c = {
-      onInput: (v) => {
-        a.modelModifiers.lazy || t("update:modelValue", v.target.value), i();
+    }), r = w(!1), n = w(!1), c = V(() => a.maxlength ? a.modelValue.length > a.maxlength : !1), v = V(() => a.minlength ? a.modelValue.length < a.minlength : !1), d = {
+      onInput: (y) => {
+        a.modelModifiers.lazy || t("update:modelValue", y.target.value), i();
       },
-      onChange: (v) => {
-        a.modelModifiers.lazy && t("update:modelValue", v.target.value);
+      onChange: (y) => {
+        a.modelModifiers.lazy && t("update:modelValue", y.target.value);
       },
       onBlur: () => {
-        n.value = !1, r.value = d.value || y.value;
+        n.value = !1, r.value = c.value || v.value;
       },
       onFocus: () => {
         n.value = !0;
@@ -3490,9 +3897,9 @@ const Rn = /* @__PURE__ */ k(Nn, [["__scopeId", "data-v-750153b6"]]), Hn = ["ari
     };
     return l({
       isInvalid: r,
-      valueOverMaxlength: d,
-      valueUnderMinlength: y
-    }), (v, f) => (u(), m("div", {
+      valueOverMaxlength: c,
+      valueUnderMinlength: v
+    }), (y, f) => (s(), m("div", {
       "aria-disabled": e.disabled,
       class: S([
         "joy-textarea",
@@ -3504,21 +3911,21 @@ const Rn = /* @__PURE__ */ k(Nn, [["__scopeId", "data-v-750153b6"]]), Hn = ["ari
         }
       ])
     }, [
-      U($(K), {
+      R(j(ee), {
         for: e.id,
         required: e.required && e.requiredMark,
         "optional-label": e.optionalLabel,
         size: e.labelSize
       }, {
-        default: B(() => [
-          g(v.$slots, "default", {}, () => [
-            O(C(e.label), 1)
+        default: O(() => [
+          g(y.$slots, "default", {}, () => [
+            B(L(e.label), 1)
           ], !0)
         ]),
         _: 3
       }, 8, ["for", "required", "optional-label", "size"]),
-      h("div", Dn, [
-        h("textarea", G(v.$attrs, {
+      _("div", yi, [
+        _("textarea", K(y.$attrs, {
           id: e.id,
           ref_key: "textarea",
           ref: o,
@@ -3529,50 +3936,50 @@ const Rn = /* @__PURE__ */ k(Nn, [["__scopeId", "data-v-750153b6"]]), Hn = ["ari
           minlength: e.minlength,
           value: e.modelValue,
           onInput: f[0] || (f[0] = //@ts-ignore
-          (...s) => c.onInput && c.onInput(...s)),
+          (...u) => d.onInput && d.onInput(...u)),
           onChange: f[1] || (f[1] = //@ts-ignore
-          (...s) => c.onChange && c.onChange(...s)),
+          (...u) => d.onChange && d.onChange(...u)),
           onFocus: f[2] || (f[2] = //@ts-ignore
-          (...s) => c.onFocus && c.onFocus(...s)),
+          (...u) => d.onFocus && d.onFocus(...u)),
           onBlur: f[3] || (f[3] = //@ts-ignore
-          (...s) => c.onBlur && c.onBlur(...s))
-        }), null, 16, Un)
+          (...u) => d.onBlur && d.onBlur(...u))
+        }), null, 16, vi)
       ]),
-      e.minlength || e.maxlength ? (u(), m("div", Wn, [
-        e.minlength ? (u(), m("p", {
+      e.minlength || e.maxlength ? (s(), m("div", pi, [
+        e.minlength ? (s(), m("p", {
           key: 0,
           class: S(["joy-textarea-min", { "joy-textarea-min-invalid": e.invalid }])
         }, [
-          y.value ? _("", !0) : (u(), x(J, {
+          v.value ? h("", !0) : (s(), C(E, {
             key: 0,
             name: "check",
             color: "neutral",
             size: "xxsmall"
           })),
-          O(" " + C(e.minlengthLabel || `Minimum ${e.minlength} characters`), 1)
-        ], 2)) : _("", !0),
-        e.maxlength ? (u(), m("p", {
+          B(" " + L(e.minlengthLabel || `Minimum ${e.minlength} characters`), 1)
+        ], 2)) : h("", !0),
+        e.maxlength ? (s(), m("p", {
           key: 1,
-          class: S(["joy-textarea-count", { "joy-textarea-count-invalid": d.value }])
-        }, C(e.modelValue.length + "/" + e.maxlength), 3)) : _("", !0)
-      ])) : _("", !0)
-    ], 10, Hn));
+          class: S(["joy-textarea-count", { "joy-textarea-count-invalid": c.value }])
+        }, L(e.modelValue.length + "/" + e.maxlength), 3)) : h("", !0)
+      ])) : h("", !0)
+    ], 10, fi));
   }
 });
-const Kn = /* @__PURE__ */ k(Zn, [["__scopeId", "data-v-1d2165ca"]]), vt = (e) => (se("data-v-cf79d999"), e = e(), ue(), e), Qn = { class: "joy-toggle__wrapper" }, Yn = ["name", "disabled", "checked", "required", "aria-checked", "value"], Xn = { class: "joy-toggle__content" }, ei = /* @__PURE__ */ vt(() => /* @__PURE__ */ h("span", { class: "joy-toggle__symbol" }, null, -1)), ti = { class: "joy-toggle__content-label" }, li = /* @__PURE__ */ vt(() => /* @__PURE__ */ h("span", { class: "joy-toggle__smile" }, [
-  /* @__PURE__ */ h("svg", {
+const hi = /* @__PURE__ */ k(_i, [["__scopeId", "data-v-1d2165ca"]]), mt = (e) => (se("data-v-cf79d999"), e = e(), ue(), e), gi = { class: "joy-toggle__wrapper" }, bi = ["name", "disabled", "checked", "required", "aria-checked", "value"], wi = { class: "joy-toggle__content" }, Si = /* @__PURE__ */ mt(() => /* @__PURE__ */ _("span", { class: "joy-toggle__symbol" }, null, -1)), $i = { class: "joy-toggle__content-label" }, ji = /* @__PURE__ */ mt(() => /* @__PURE__ */ _("span", { class: "joy-toggle__smile" }, [
+  /* @__PURE__ */ _("svg", {
     width: "18",
     height: "10",
     viewBox: "0 0 18 10",
     fill: "currentColor",
     xmlns: "http://www.w3.org/2000/svg"
   }, [
-    /* @__PURE__ */ h("path", {
+    /* @__PURE__ */ _("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)), ai = /* @__PURE__ */ j({
+], -1)), ki = /* @__PURE__ */ $({
   __name: "VJoyToggle",
   props: {
     modelValue: {
@@ -3618,8 +4025,8 @@ const Kn = /* @__PURE__ */ k(Zn, [["__scopeId", "data-v-1d2165ca"]]), vt = (e) =
         t.value = !1;
       }
     };
-    return (o, i) => (u(), m("div", Qn, [
-      h("label", {
+    return (o, i) => (s(), m("div", gi, [
+      _("label", {
         class: S([
           "joy-toggle",
           {
@@ -3629,7 +4036,7 @@ const Kn = /* @__PURE__ */ k(Zn, [["__scopeId", "data-v-1d2165ca"]]), vt = (e) =
           }
         ])
       }, [
-        h("input", {
+        _("input", {
           ref: "input",
           type: "checkbox",
           class: "joy-toggle__input",
@@ -3646,107 +4053,117 @@ const Kn = /* @__PURE__ */ k(Zn, [["__scopeId", "data-v-1d2165ca"]]), vt = (e) =
           (...r) => a.onFocus && a.onFocus(...r)),
           onBlur: i[2] || (i[2] = //@ts-ignore
           (...r) => a.onBlur && a.onBlur(...r))
-        }, null, 40, Yn),
-        h("p", Xn, [
-          ei,
-          h("span", ti, [
+        }, null, 40, bi),
+        _("p", wi, [
+          Si,
+          _("span", $i, [
             g(o.$slots, "default", {}, () => [
-              O(C(e.label), 1)
+              B(L(e.label), 1)
             ], !0)
           ]),
-          li
+          ji
         ])
       ], 2)
     ]));
   }
 });
-const oi = /* @__PURE__ */ k(ai, [["__scopeId", "data-v-cf79d999"]]), ni = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
+const Vi = /* @__PURE__ */ k(ki, [["__scopeId", "data-v-cf79d999"]]), xi = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
   __proto__: null,
-  VJoyAvailability: $t,
-  VJoyAvatar: Bt,
-  VJoyAvatarsList: Tt,
-  VJoyBadge: zt,
-  VJoyBadgeLevel: rl,
-  VJoyButton: lt,
-  VJoyCheckbox: je,
-  VJoyCompanyAvatar: kl,
-  VJoyCounter: Tl,
-  VJoyDividerCta: ql,
+  VJoyAvailability: kt,
+  VJoyAvatar: Pt,
+  VJoyAvatarsList: Et,
+  VJoyBadge: Ft,
+  VJoyBadgeLevel: ul,
+  VJoyButton: xe,
+  VJoyCheckbox: Ce,
+  VJoyCompanyAvatar: Cl,
+  VJoyCounter: zl,
+  VJoyDividerCta: Rl,
   VJoyDropdown: Ha,
-  VJoyDropdownList: ut,
-  VJoyFilterBar: Ga,
+  VJoyDropdownList: ct,
+  VJoyFilterBar: Ua,
   VJoyFilterBarButton: Ka,
-  VJoyFormError: dt,
-  VJoyHighlight: ao,
-  VJoyIcon: J,
-  VJoyInput: yo,
-  VJoyLabel: K,
-  VJoyLink: ho,
-  VJoyMultiCheckbox: wo,
-  VJoyPanel: Io,
-  VJoyPanelSection: Jo,
-  VJoyRadio: Mo,
-  VJoyRadioGroup: Ho,
-  VJoyRatingStars: rn,
-  VJoyScreenLoader: Ve,
-  VJoySelect: yn,
-  VJoySelectableItem: ct,
-  VJoySelectableItemGroup: gn,
-  VJoySeparator: wn,
-  VJoySpinner: $e,
-  VJoyTag: ft,
-  VJoyTagsList: xn,
-  VJoyTemplate: Rn,
-  VJoyTemplateShape: yt,
-  VJoyTextarea: Kn,
-  VJoyToggle: oi,
-  VJoyWrapper: $n
-}, Symbol.toStringTag, { value: "Module" })), ri = {
+  VJoyFormError: ft,
+  VJoyFormFieldSkeleton: eo,
+  VJoyHighlight: no,
+  VJoyIcon: E,
+  VJoyInput: po,
+  VJoyLabel: ee,
+  VJoyLink: go,
+  VJoyMultiCheckbox: $o,
+  VJoyPagination: Io,
+  VJoyPanel: Fo,
+  VJoyPanelSection: Ho,
+  VJoyProgressBar: Go,
+  VJoyRadio: Xo,
+  VJoyRadioGroup: ln,
+  VJoyRatingStars: gn,
+  VJoyScreenLoader: Ie,
+  VJoySelect: kn,
+  VJoySelectableItem: yt,
+  VJoySelectableItemGroup: Bn,
+  VJoySeparator: Tn,
+  VJoySpinner: Ve,
+  VJoyTab: Dn,
+  VJoyTabs: Mn,
+  VJoyTag: vt,
+  VJoyTagsList: Zn,
+  VJoyTemplate: ci,
+  VJoyTemplateShape: pt,
+  VJoyTextarea: hi,
+  VJoyToggle: Vi,
+  VJoyWrapper: Jn
+}, Symbol.toStringTag, { value: "Module" })), Li = {
   install: (e) => {
-    Object.entries(ni).forEach(([l, t]) => {
+    Object.entries(xi).forEach(([l, t]) => {
       e.component(l, t);
     });
   }
 };
 export {
-  ri as JoyVuePlugin,
-  $t as VJoyAvailability,
-  Bt as VJoyAvatar,
-  Tt as VJoyAvatarsList,
-  zt as VJoyBadge,
-  rl as VJoyBadgeLevel,
-  lt as VJoyButton,
-  je as VJoyCheckbox,
-  kl as VJoyCompanyAvatar,
-  Tl as VJoyCounter,
-  ql as VJoyDividerCta,
+  Li as JoyVuePlugin,
+  kt as VJoyAvailability,
+  Pt as VJoyAvatar,
+  Et as VJoyAvatarsList,
+  Ft as VJoyBadge,
+  ul as VJoyBadgeLevel,
+  xe as VJoyButton,
+  Ce as VJoyCheckbox,
+  Cl as VJoyCompanyAvatar,
+  zl as VJoyCounter,
+  Rl as VJoyDividerCta,
   Ha as VJoyDropdown,
-  ut as VJoyDropdownList,
-  Ga as VJoyFilterBar,
+  ct as VJoyDropdownList,
+  Ua as VJoyFilterBar,
   Ka as VJoyFilterBarButton,
-  dt as VJoyFormError,
-  ao as VJoyHighlight,
-  J as VJoyIcon,
-  yo as VJoyInput,
-  K as VJoyLabel,
-  ho as VJoyLink,
-  wo as VJoyMultiCheckbox,
-  Io as VJoyPanel,
-  Jo as VJoyPanelSection,
-  Mo as VJoyRadio,
-  Ho as VJoyRadioGroup,
-  rn as VJoyRatingStars,
-  Ve as VJoyScreenLoader,
-  yn as VJoySelect,
-  ct as VJoySelectableItem,
-  gn as VJoySelectableItemGroup,
-  wn as VJoySeparator,
-  $e as VJoySpinner,
-  ft as VJoyTag,
-  xn as VJoyTagsList,
-  Rn as VJoyTemplate,
-  yt as VJoyTemplateShape,
-  Kn as VJoyTextarea,
-  oi as VJoyToggle,
-  $n as VJoyWrapper
+  ft as VJoyFormError,
+  eo as VJoyFormFieldSkeleton,
+  no as VJoyHighlight,
+  E as VJoyIcon,
+  po as VJoyInput,
+  ee as VJoyLabel,
+  go as VJoyLink,
+  $o as VJoyMultiCheckbox,
+  Io as VJoyPagination,
+  Fo as VJoyPanel,
+  Ho as VJoyPanelSection,
+  Go as VJoyProgressBar,
+  Xo as VJoyRadio,
+  ln as VJoyRadioGroup,
+  gn as VJoyRatingStars,
+  Ie as VJoyScreenLoader,
+  kn as VJoySelect,
+  yt as VJoySelectableItem,
+  Bn as VJoySelectableItemGroup,
+  Tn as VJoySeparator,
+  Ve as VJoySpinner,
+  Dn as VJoyTab,
+  Mn as VJoyTabs,
+  vt as VJoyTag,
+  Zn as VJoyTagsList,
+  ci as VJoyTemplate,
+  pt as VJoyTemplateShape,
+  hi as VJoyTextarea,
+  Vi as VJoyToggle,
+  Jn as VJoyWrapper
 };