@maltjoy/core-vue 1.0.0-alpha.7 → 1.0.0-alpha.9

package/dist/joy-vue.js

@@ -1,26 +1,26 @@
-import { defineComponent as S, openBlock as i, createElementBlock as r, normalizeClass as v, useAttrs as O, computed as J, createBlock as V, resolveDynamicComponent as z, unref as b, withCtx as q, createCommentVNode as f, createElementVNode as d, renderSlot as m, ref as _, createTextVNode as B, toDisplayString as $, mergeProps as w, createVNode as R, pushScopeId as M, popScopeId as T, useSlots as L, onBeforeMount as P, Fragment as F, renderList as A, onMounted as E, watch as D, createSlots as K } from "vue";
-const Z = ["teal", "white"], Q = /* @__PURE__ */ S({
+import { defineComponent as p, openBlock as o, createElementBlock as d, normalizeClass as b, useAttrs as O, computed as V, createBlock as J, resolveDynamicComponent as E, unref as m, withCtx as q, createCommentVNode as y, createElementVNode as u, renderSlot as c, ref as S, createTextVNode as B, toDisplayString as $, mergeProps as L, createVNode as R, pushScopeId as z, popScopeId as M, useSlots as w, onBeforeMount as W, Fragment as A, renderList as F, normalizeStyle as D, onMounted as N, watch as Z, createSlots as K } from "vue";
+const Q = ["teal", "white"], X = /* @__PURE__ */ p({
   __name: "JoySpinner",
   props: {
     color: {
       type: String,
       validator(e) {
-        return Z.includes(e);
+        return Q.includes(e);
       }
     }
   },
   setup(e) {
-    return (n, a) => (i(), r("div", {
-      class: v(["joy-spinner", `joy-spinner_${e.color}`])
+    return (l, a) => (o(), d("div", {
+      class: b(["joy-spinner", `joy-spinner_${e.color}`])
     }, null, 2));
   }
 });
-const j = (e, n) => {
+const _ = (e, l) => {
   const a = e.__vccOpts || e;
-  for (const [t, o] of n)
-    a[t] = o;
+  for (const [t, i] of l)
+    a[t] = i;
   return a;
-}, H = /* @__PURE__ */ j(Q, [["__scopeId", "data-v-b633f633"]]), X = ["primary", "secondary"], Y = ["neutral", "success", "info", "warning", "error"], ee = ["main", "admin", "ghost"], te = [...X, ...ee], ae = ["large", "medium", "small", "xsmall", "xxsmall"], le = ["xxsmall", "xsmall", "small"], ne = ["name", "size"], ie = { class: "joy-button--slot" }, oe = /* @__PURE__ */ S({
+}, P = /* @__PURE__ */ _(X, [["__scopeId", "data-v-b633f633"]]), Y = ["primary", "secondary"], ee = ["neutral", "success", "info", "warning", "error"], te = ["main", "admin", "ghost"], ae = [...Y, ...te], le = ["large", "medium", "small", "xsmall", "xxsmall"], ne = ["xxsmall", "xsmall", "small"], oe = ["name", "size"], ie = { class: "joy-button--slot" }, de = /* @__PURE__ */ p({
   __name: "JoyButton",
   props: {
     /**
@@ -43,7 +43,7 @@ const j = (e, n) => {
       type: String,
       default: "primary",
       validator(e) {
-        return te.includes(e);
+        return ae.includes(e);
       }
     },
     /** Button or Link size */
@@ -51,7 +51,7 @@ const j = (e, n) => {
       type: String,
       default: "medium",
       validator(e) {
-        return ae.includes(e);
+        return le.includes(e);
       }
     },
     /** Override the icon size. Default to xsmall */
@@ -59,15 +59,15 @@ const j = (e, n) => {
       type: String,
       default: "xsmall",
       validator(e) {
-        return le.includes(e);
+        return ne.includes(e);
       }
     }
   },
   setup(e) {
-    const n = e, a = O(), t = J(() => ["white", "ghost", "secondary"].includes(n.variant) ? "teal" : "white");
-    return (o, s) => (i(), V(z(b(a).href ? "a" : "button"), {
-      disabled: e.loading || b(a).disabled,
-      class: v([
+    const l = e, a = O(), t = V(() => ["white", "ghost", "secondary"].includes(l.variant) ? "teal" : "white");
+    return (i, s) => (o(), J(E(m(a).href ? "a" : "button"), {
+      disabled: e.loading || m(a).disabled,
+      class: b([
         "joy-button",
         `joy-button_${e.variant}`,
         `joy-button_${e.size}`,
@@ -78,25 +78,25 @@ const j = (e, n) => {
       ])
     }, {
       default: q(() => [
-        e.icon ? (i(), r("joy-icon", {
+        e.icon ? (o(), d("joy-icon", {
           key: 0,
           name: e.icon,
           size: e.iconSize,
           lazy: !1
-        }, null, 8, ne)) : f("", !0),
-        e.loading ? (i(), V(H, {
+        }, null, 8, oe)) : y("", !0),
+        e.loading ? (o(), J(P, {
           key: 1,
-          color: b(t)
-        }, null, 8, ["color"])) : f("", !0),
-        d("span", ie, [
-          m(o.$slots, "default", {}, void 0, !0)
+          color: m(t)
+        }, null, 8, ["color"])) : y("", !0),
+        u("span", ie, [
+          c(i.$slots, "default", {}, void 0, !0)
         ])
       ]),
       _: 3
     }, 8, ["disabled", "class"]));
   }
 });
-const de = /* @__PURE__ */ j(oe, [["__scopeId", "data-v-958cc680"]]), ue = ["aria-checked", "aria-hidden"], re = ["id", "name", "disabled", "checked", "required", "aria-checked", "value", "indeterminate"], se = { class: "joy-checkbox__content-wrapper" }, ce = { class: "joy-checkbox__content" }, ye = /* @__PURE__ */ S({
+const ue = /* @__PURE__ */ _(de, [["__scopeId", "data-v-958cc680"]]), se = ["aria-checked", "aria-hidden"], re = ["id", "name", "disabled", "checked", "required", "aria-checked", "value", "indeterminate"], ce = { class: "joy-checkbox__content-wrapper" }, ye = { class: "joy-checkbox__content" }, me = /* @__PURE__ */ p({
   __name: "JoyCheckbox",
   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 */
@@ -135,21 +135,21 @@ const de = /* @__PURE__ */ j(oe, [["__scopeId", "data-v-958cc680"]]), ue = ["ari
     }
   },
   emits: ["update:checked"],
-  setup(e, { expose: n, emit: a }) {
-    const t = e, o = _(), s = _(t.indeterminate), c = {
-      onChange: (l) => {
-        const u = l.target.checked;
-        s.value = !1, a("update:checked", u);
+  setup(e, { expose: l, emit: a }) {
+    const t = e, i = S(), s = S(t.indeterminate), f = {
+      onChange: (n) => {
+        const r = n.target.checked;
+        s.value = !1, a("update:checked", r);
       }
     };
-    return n({
+    return l({
       isIndeterminate: s
-    }), (l, u) => (i(), r("div", {
+    }), (n, r) => (o(), d("div", {
       "aria-checked": e.checked,
       "aria-hidden": e.disabled
     }, [
-      d("label", {
-        class: v([
+      u("label", {
+        class: b([
           "joy-checkbox",
           {
             "joy-checkbox__checked": e.checked,
@@ -157,10 +157,10 @@ const de = /* @__PURE__ */ j(oe, [["__scopeId", "data-v-958cc680"]]), ue = ["ari
           }
         ])
       }, [
-        d("input", {
+        u("input", {
           id: e.id,
           ref_key: "input",
-          ref: o,
+          ref: i,
           type: "checkbox",
           class: "joy-checkbox__input",
           role: "checkbox",
@@ -171,37 +171,37 @@ const de = /* @__PURE__ */ j(oe, [["__scopeId", "data-v-958cc680"]]), ue = ["ari
           "aria-checked": e.checked,
           value: e.value,
           indeterminate: s.value,
-          onChange: u[0] || (u[0] = //@ts-ignore
-          (...g) => c.onChange && c.onChange(...g))
+          onChange: r[0] || (r[0] = //@ts-ignore
+          (...g) => f.onChange && f.onChange(...g))
         }, null, 40, re),
-        d("div", se, [
-          m(l.$slots, "default", {}, () => [
+        u("div", ce, [
+          c(n.$slots, "default", {}, () => [
             B($(e.label), 1)
           ], !0),
-          d("div", ce, [
-            m(l.$slots, "checkbox-content", {}, void 0, !0)
+          u("div", ye, [
+            c(n.$slots, "checkbox-content", {}, void 0, !0)
           ])
         ])
       ], 2)
-    ], 8, ue));
+    ], 8, se));
   }
 });
-const N = /* @__PURE__ */ j(ye, [["__scopeId", "data-v-7251a11b"]]), G = (e) => (M("data-v-47a76942"), e = e(), T(), e), me = { class: "joy-counter" }, fe = { class: "joy-counter__wrapper" }, be = ["aria-label", "disabled"], ve = /* @__PURE__ */ G(() => /* @__PURE__ */ d("joy-icon", {
+const T = /* @__PURE__ */ _(me, [["__scopeId", "data-v-7251a11b"]]), H = (e) => (z("data-v-47a76942"), e = e(), M(), e), fe = { class: "joy-counter" }, ve = { class: "joy-counter__wrapper" }, be = ["aria-label", "disabled"], ge = /* @__PURE__ */ H(() => /* @__PURE__ */ u("joy-icon", {
   name: "minus",
   color: "teal",
   lazy: !1
-}, null, -1)), ge = [
-  ve
-], he = ["id", "min", "max", "aria-invalid", "name", "required", "value"], pe = ["aria-label", "disabled"], ke = /* @__PURE__ */ G(() => /* @__PURE__ */ d("joy-icon", {
+}, null, -1)), he = [
+  ge
+], pe = ["id", "min", "max", "aria-invalid", "name", "required", "value"], _e = ["aria-label", "disabled"], ke = /* @__PURE__ */ H(() => /* @__PURE__ */ u("joy-icon", {
   name: "add",
   lazy: !1,
   color: "teal"
-}, null, -1)), Se = [
+}, null, -1)), je = [
   ke
-], je = {
+], Se = {
   key: 0,
   class: "joy-counter_error"
-}, _e = /* @__PURE__ */ S({
+}, $e = /* @__PURE__ */ p({
   __name: "JoyCounter",
   props: {
     /** Removes any interactivity */
@@ -267,44 +267,44 @@ const N = /* @__PURE__ */ j(ye, [["__scopeId", "data-v-7251a11b"]]), G = (e) =>
     }
   },
   emits: ["update:modelValue"],
-  setup(e, { expose: n, emit: a }) {
-    const t = e, o = _(!1);
+  setup(e, { expose: l, emit: a }) {
+    const t = e, i = S(!1);
     function s() {
-      const y = u(!1);
-      y >= 0 ? a("update:modelValue", y <= t.min ? t.min : y) : a("update:modelValue", 0), l();
+      const v = r(!1);
+      v >= 0 ? a("update:modelValue", v <= t.min ? t.min : v) : a("update:modelValue", 0), n();
     }
-    function c() {
-      const y = u();
-      t.max && y <= t.max ? a("update:modelValue", y >= t.max ? t.max : y) : t.max && y > t.max ? a("update:modelValue", t.max) : a("update:modelValue", y), l();
+    function f() {
+      const v = r();
+      t.max && v <= t.max ? a("update:modelValue", v >= t.max ? t.max : v) : t.max && v > t.max ? a("update:modelValue", t.max) : a("update:modelValue", v), n();
     }
-    function l() {
-      o.value = !g();
+    function n() {
+      i.value = !g();
     }
-    function u(y = !0) {
+    function r(v = !0) {
       const h = t.step.toString().split("."), x = h.length === 2 ? h[1].length : 0;
-      return parseFloat(y ? (t.modelValue + t.step).toFixed(x) : (t.modelValue - t.step).toFixed(x));
+      return parseFloat(v ? (t.modelValue + t.step).toFixed(x) : (t.modelValue - t.step).toFixed(x));
     }
     function g() {
-      return p() && I();
+      return k() && I();
     }
-    function p() {
+    function k() {
       return !t.max || t.modelValue <= t.max;
     }
     function I() {
       return t.min <= t.modelValue;
     }
-    const k = {
-      onInput: (y) => {
-        a("update:modelValue", +y.target.value || 0), o.value = !1;
+    const j = {
+      onInput: (v) => {
+        a("update:modelValue", +v.target.value || 0), i.value = !1;
       },
       onBlur: () => {
-        l();
+        n();
       }
     };
-    return n({
+    return l({
       props: t
-    }), (y, h) => (i(), r("div", me, [
-      e.label ? (i(), V(b(C), {
+    }), (v, h) => (o(), d("div", fe, [
+      e.label ? (o(), J(m(C), {
         key: 0,
         for: e.id,
         required: e.required && e.requiredMark,
@@ -312,56 +312,56 @@ const N = /* @__PURE__ */ j(ye, [["__scopeId", "data-v-7251a11b"]]), G = (e) =>
         size: e.labelSize
       }, {
         default: q(() => [
-          m(y.$slots, "default", {}, () => [
+          c(v.$slots, "default", {}, () => [
             B($(e.label), 1)
           ], !0)
         ]),
         _: 3
-      }, 8, ["for", "required", "optional-label", "size"])) : f("", !0),
-      d("div", fe, [
-        d("button", {
+      }, 8, ["for", "required", "optional-label", "size"])) : y("", !0),
+      u("div", ve, [
+        u("button", {
           class: "joy-counter__decrement",
           type: "button",
           "aria-label": e.labelDecrement,
           disabled: e.modelValue <= e.min,
           onClick: s
-        }, ge, 8, be),
-        d("input", w({
+        }, he, 8, be),
+        u("input", L({
           id: e.id,
           ref: "input",
           type: "number",
-          class: { "joy-counter__invalid": e.invalid || o.value },
+          class: { "joy-counter__invalid": e.invalid || i.value },
           min: e.min,
           max: e.max,
-          "aria-invalid": e.invalid || o.value,
+          "aria-invalid": e.invalid || i.value,
           name: e.name,
           required: e.required,
           step: "any",
           value: e.modelValue
-        }, y.$attrs, {
+        }, v.$attrs, {
           onInput: h[0] || (h[0] = //@ts-ignore
-          (...x) => k.onInput && k.onInput(...x)),
+          (...x) => j.onInput && j.onInput(...x)),
           onBlur: h[1] || (h[1] = //@ts-ignore
-          (...x) => k.onBlur && k.onBlur(...x))
-        }), null, 16, he),
-        d("button", {
+          (...x) => j.onBlur && j.onBlur(...x))
+        }), null, 16, pe),
+        u("button", {
           class: "joy-counter__increment",
           type: "button",
           "aria-label": e.labelIncrement,
           disabled: e.max ? e.modelValue >= e.max : !1,
-          onClick: c
-        }, Se, 8, pe),
-        e.invalid && e.errorMessage ? (i(), r("div", je, [
-          R(b(U), { "no-html-error-text": e.errorMessage }, null, 8, ["no-html-error-text"])
-        ])) : f("", !0)
+          onClick: f
+        }, je, 8, _e),
+        e.invalid && e.errorMessage ? (o(), d("div", Se, [
+          R(m(G), { "no-html-error-text": e.errorMessage }, null, 8, ["no-html-error-text"])
+        ])) : y("", !0)
       ])
     ]));
   }
 });
-const $e = /* @__PURE__ */ j(_e, [["__scopeId", "data-v-47a76942"]]), xe = (e) => (M("data-v-d693f93c"), e = e(), T(), e), Ie = ["aria-hidden"], qe = /* @__PURE__ */ xe(() => /* @__PURE__ */ d("joy-icon", {
+const xe = /* @__PURE__ */ _($e, [["__scopeId", "data-v-47a76942"]]), Ie = (e) => (z("data-v-d693f93c"), e = e(), M(), e), qe = ["aria-hidden"], Be = /* @__PURE__ */ Ie(() => /* @__PURE__ */ u("joy-icon", {
   "custom-class": "joy-icon-error",
   name: "warning-triangle"
-}, null, -1)), Be = /* @__PURE__ */ S({
+}, null, -1)), Je = /* @__PURE__ */ p({
   __name: "JoyFormError",
   props: {
     /** In some cases you'll need to inject the error in the DOM but hide it. Visible by default */
@@ -373,36 +373,36 @@ const $e = /* @__PURE__ */ j(_e, [["__scopeId", "data-v-47a76942"]]), xe = (e) =
     noHtmlErrorText: String
   },
   setup(e) {
-    return (n, a) => (i(), r("div", {
+    return (l, a) => (o(), d("div", {
       "aria-hidden": e.visible,
-      class: v(["joy-form-error", { "joy-has-error": e.visible }]),
+      class: b(["joy-form-error", { "joy-has-error": e.visible }]),
       role: "alert"
     }, [
-      qe,
-      d("div", null, [
-        m(n.$slots, "default", {}, () => [
+      Be,
+      u("div", null, [
+        c(l.$slots, "default", {}, () => [
           B($(e.noHtmlErrorText), 1)
         ], !0)
       ])
-    ], 10, Ie));
+    ], 10, qe));
   }
 });
-const U = /* @__PURE__ */ j(Be, [["__scopeId", "data-v-d693f93c"]]);
+const G = /* @__PURE__ */ _(Je, [["__scopeId", "data-v-d693f93c"]]);
 function Ve(e) {
-  let n;
+  let l;
   switch (e) {
     case "error":
-      n = "warning-triangle";
+      l = "warning-triangle";
       break;
     case "success":
-      n = "check";
+      l = "check";
       break;
     default:
-      n = "info-circle";
+      l = "info-circle";
   }
-  return n;
+  return l;
 }
-const Je = [...Y], Ce = ["name"], we = { class: "joy-highlight--text" }, Le = /* @__PURE__ */ S({
+const Ce = [...ee], we = ["name"], Le = { class: "joy-highlight--text" }, ze = /* @__PURE__ */ p({
   __name: "JoyHighlight",
   props: {
     accent: {
@@ -418,51 +418,51 @@ const Je = [...Y], Ce = ["name"], we = { class: "joy-highlight--text" }, Le = /*
       type: String,
       default: "neutral",
       validator(e) {
-        return Je.includes(e);
+        return Ce.includes(e);
       }
     }
   },
-  setup(e, { expose: n }) {
-    const a = e, t = J(() => a.icon ? a.icon : Ve(a.level));
-    return n({
+  setup(e, { expose: l }) {
+    const a = e, t = V(() => a.icon ? a.icon : Ve(a.level));
+    return l({
       getRelevantIcon: t
-    }), (o, s) => (i(), r("div", {
-      class: v([
+    }), (i, s) => (o(), d("div", {
+      class: b([
         "joy-highlight",
         `joy-highlight_${e.level}`,
         {
           "joy-highlight__accent": e.accent,
-          "joy-highlight__titled": o.$slots["highlight-title"]
+          "joy-highlight__titled": i.$slots["highlight-title"]
         }
       ])
     }, [
-      e.displayIcon ? (i(), r("joy-icon", {
+      e.displayIcon ? (o(), d("joy-icon", {
         key: 0,
-        name: b(t)
-      }, null, 8, Ce)) : f("", !0),
-      d("div", we, [
-        d("strong", null, [
-          m(o.$slots, "highlight-title", {}, void 0, !0)
+        name: m(t)
+      }, null, 8, we)) : y("", !0),
+      u("div", Le, [
+        u("strong", null, [
+          c(i.$slots, "highlight-title", {}, void 0, !0)
         ]),
-        m(o.$slots, "default", {}, void 0, !0)
+        c(i.$slots, "default", {}, void 0, !0)
       ])
     ], 2));
   }
 });
-const ze = /* @__PURE__ */ j(Le, [["__scopeId", "data-v-15d3fa11"]]), Me = ["small", "medium", "large"], Te = {
+const Me = /* @__PURE__ */ _(ze, [["__scopeId", "data-v-15d3fa11"]]), Ee = ["small", "medium", "large"], Ne = {
   key: 0,
   class: "joy-label-required"
-}, Ee = {
+}, Te = {
   key: 1,
   class: "joy-label-optional"
-}, Ne = /* @__PURE__ */ S({
+}, Oe = /* @__PURE__ */ p({
   __name: "JoyLabel",
   props: {
     size: {
       type: String,
       default: "medium",
       validator(e) {
-        return Me.includes(e);
+        return Ee.includes(e);
       }
     },
     tagName: {
@@ -478,19 +478,19 @@ const ze = /* @__PURE__ */ j(Le, [["__scopeId", "data-v-15d3fa11"]]), Me = ["sma
     }
   },
   setup(e) {
-    return (n, a) => (i(), V(z(e.tagName), w({
+    return (l, a) => (o(), J(E(e.tagName), L({
       class: ["joy-label", `joy-label--${e.size}`]
-    }, n.$attrs), {
+    }, l.$attrs), {
       default: q(() => [
-        m(n.$slots, "default", {}, void 0, !0),
-        e.required ? (i(), r("span", Te, "*")) : f("", !0),
-        e.optionalLabel ? (i(), r("span", Ee, "- " + $(e.optionalLabel), 1)) : f("", !0)
+        c(l.$slots, "default", {}, void 0, !0),
+        e.required ? (o(), d("span", Ne, "*")) : y("", !0),
+        e.optionalLabel ? (o(), d("span", Te, "- " + $(e.optionalLabel), 1)) : y("", !0)
       ]),
       _: 3
     }, 16, ["class"]));
   }
 });
-const C = /* @__PURE__ */ j(Ne, [["__scopeId", "data-v-e3232407"]]), Oe = ["large", "medium", "small"], Re = ["id", "disabled", "type", "value"], Fe = ["data-unit"], Ae = /* @__PURE__ */ S({
+const C = /* @__PURE__ */ _(Oe, [["__scopeId", "data-v-e3232407"]]), Re = ["large", "medium", "small"], Ae = ["id", "disabled", "type", "value"], Fe = ["name"], Pe = ["data-unit"], He = /* @__PURE__ */ p({
   __name: "JoyInput",
   props: {
     disabled: {
@@ -505,7 +505,8 @@ const C = /* @__PURE__ */ j(Ne, [["__scopeId", "data-v-e3232407"]]), Oe = ["larg
       default: !1
     },
     name: {
-      type: String
+      type: String,
+      required: !0
     },
     required: {
       type: Boolean,
@@ -540,7 +541,7 @@ const C = /* @__PURE__ */ j(Ne, [["__scopeId", "data-v-e3232407"]]), Oe = ["larg
       type: String,
       default: "medium",
       validator(e) {
-        return Oe.includes(e);
+        return Re.includes(e);
       }
     },
     type: String,
@@ -548,46 +549,46 @@ const C = /* @__PURE__ */ j(Ne, [["__scopeId", "data-v-e3232407"]]), Oe = ["larg
     unit: String
   },
   emits: ["update:modelValue"],
-  setup(e, { emit: n }) {
-    const a = e, t = _(), o = _(), s = O(), c = L(), l = _(!1), u = J(() => a.clearable && a.modelValue.length > 0 && !a.unit), g = J(() => c.default && c.default()), p = J(() => {
-      var y, h;
-      return !!((y = o.value) != null && y.closest("joy-wrapper")) || !!((h = o.value) != null && h.closest(".joy-wrapper"));
-    }), I = _(a.type);
-    P(() => {
+  setup(e, { emit: l }) {
+    const a = e, t = S(), i = S(), s = O(), f = w(), n = S(!1), r = V(() => a.clearable && a.modelValue.length > 0 && !a.unit), g = V(() => f.default && f.default()), k = V(() => {
+      var v, h;
+      return !!((v = i.value) != null && v.closest("joy-wrapper")) || !!((h = i.value) != null && h.closest(".joy-wrapper"));
+    }), I = S(a.type);
+    W(() => {
       I.value = a.unit ? "number" : a.unit || "text";
     });
-    const k = {
+    const j = {
       onFocus: () => {
-        l.value = !0;
+        n.value = !0;
       },
       onBlur: () => {
-        l.value = !1;
+        n.value = !1;
       },
-      onInput: (y) => {
-        let h = y.target.value;
-        n("update:modelValue", h);
+      onInput: (v) => {
+        let h = v.target.value;
+        l("update:modelValue", h);
       },
       clearValue: () => {
-        a.disabled || n("update:modelValue", "");
+        a.disabled || l("update:modelValue", "");
       }
     };
-    return (y, h) => (i(), r("div", {
+    return (v, h) => (o(), d("div", {
       ref_key: "root",
-      ref: o,
-      class: v([`joy-input--${a.size}`])
+      ref: i,
+      class: b([`joy-input--${a.size}`])
     }, [
-      d("div", {
-        class: v([
+      u("div", {
+        class: b([
           "joy-input",
           {
-            "joy-input--focusing": l.value,
+            "joy-input--focusing": n.value,
             "joy-input--disabled": e.disabled,
             "joy-input--invalid": e.invalid,
-            "joy-input--valid": !e.invalid && !b(s).disabled
+            "joy-input--valid": !e.invalid && !m(s).disabled
           }
         ])
       }, [
-        b(g) || e.label ? (i(), V(C, {
+        m(g) || e.label ? (o(), J(C, {
           key: 0,
           for: e.name,
           required: e.required && e.requiredMark,
@@ -595,24 +596,24 @@ const C = /* @__PURE__ */ j(Ne, [["__scopeId", "data-v-e3232407"]]), Oe = ["larg
           size: e.labelSize
         }, {
           default: q(() => [
-            m(y.$slots, "default", {}, () => [
+            c(v.$slots, "default", {}, () => [
               B($(e.label), 1)
             ], !0)
           ]),
           _: 3
-        }, 8, ["for", "required", "optional-label", "size"])) : f("", !0),
-        d("div", {
-          class: v([
+        }, 8, ["for", "required", "optional-label", "size"])) : y("", !0),
+        u("div", {
+          class: b([
             "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": !b(p)
+              "joy-input--wrapper-margin": !m(k)
             }
           ])
         }, [
-          d("input", w(y.$attrs, {
+          u("input", L(v.$attrs, {
             id: a.name,
             ref_key: "input",
             ref: t,
@@ -626,31 +627,37 @@ const C = /* @__PURE__ */ j(Ne, [["__scopeId", "data-v-e3232407"]]), Oe = ["larg
             type: I.value,
             value: e.modelValue,
             onFocus: h[0] || (h[0] = //@ts-ignore
-            (...x) => k.onFocus && k.onFocus(...x)),
+            (...x) => j.onFocus && j.onFocus(...x)),
             onBlur: h[1] || (h[1] = //@ts-ignore
-            (...x) => k.onBlur && k.onBlur(...x)),
+            (...x) => j.onBlur && j.onBlur(...x)),
             onInput: h[2] || (h[2] = //@ts-ignore
-            (...x) => k.onInput && k.onInput(...x))
-          }), null, 16, Re),
-          b(u) ? (i(), r("joy-icon", {
+            (...x) => j.onInput && j.onInput(...x))
+          }), null, 16, Ae),
+          m(r) ? (o(), d("joy-icon", {
             key: 0,
             size: "xxsmall",
             name: "cross",
             class: "joy-input--clear",
             onClick: h[3] || (h[3] = //@ts-ignore
-            (...x) => k.clearValue && k.clearValue(...x))
-          })) : f("", !0),
-          e.unit ? (i(), r("div", {
+            (...x) => j.clearValue && j.clearValue(...x))
+          })) : y("", !0),
+          e.icon && !e.clearable ? (o(), d("joy-icon", {
             key: 1,
+            role: "img",
+            class: "joy-input--decorative-icon",
+            name: e.icon
+          }, null, 8, Fe)) : y("", !0),
+          e.unit ? (o(), d("div", {
+            key: 2,
             "data-unit": e.unit,
             class: "joy-input--unit"
-          }, null, 8, Fe)) : f("", !0)
+          }, null, 8, Pe)) : y("", !0)
         ], 2)
       ], 2)
     ], 2));
   }
 });
-const He = /* @__PURE__ */ j(Ae, [["__scopeId", "data-v-f264c5ef"]]), Ge = ["teal", "white"], Ue = ["href"], We = ["color", "name"], Pe = /* @__PURE__ */ S({
+const Ge = /* @__PURE__ */ _(He, [["__scopeId", "data-v-023262dd"]]), Ue = ["teal", "white"], We = ["href"], De = ["color", "name"], Ze = /* @__PURE__ */ p({
   __name: "JoyLink",
   props: {
     href: {
@@ -661,36 +668,36 @@ const He = /* @__PURE__ */ j(Ae, [["__scopeId", "data-v-f264c5ef"]]), Ge = ["tea
       type: String,
       default: "teal",
       validator(e) {
-        return Ge.includes(e);
+        return Ue.includes(e);
       }
     },
     icon: String
   },
   setup(e) {
-    const n = e, a = J(() => n.color === "white" ? "white" : "teal");
-    return (t, o) => (i(), r("a", w({ href: e.href }, t.$attrs, {
+    const l = e, a = V(() => l.color === "white" ? "white" : "teal");
+    return (t, i) => (o(), d("a", L({ href: e.href }, t.$attrs, {
       class: ["joy-link", `joy-link_${e.color}`]
     }), [
-      e.icon ? (i(), r("joy-icon", {
+      e.icon ? (o(), d("joy-icon", {
         key: 0,
-        color: b(a),
+        color: m(a),
         name: e.icon
-      }, null, 8, We)) : f("", !0),
-      m(t.$slots, "default", {}, void 0, !0)
-    ], 16, Ue));
+      }, null, 8, De)) : y("", !0),
+      c(t.$slots, "default", {}, void 0, !0)
+    ], 16, We));
   }
 });
-const De = /* @__PURE__ */ j(Pe, [["__scopeId", "data-v-640ee9a6"]]), Ke = ["id"], Ze = {
-  class: /* @__PURE__ */ v(["joy-multi-checkbox"])
-}, Qe = /* @__PURE__ */ S({
+const Ke = /* @__PURE__ */ _(Ze, [["__scopeId", "data-v-640ee9a6"]]), Qe = ["id"], Xe = {
+  class: /* @__PURE__ */ b(["joy-multi-checkbox"])
+}, Ye = /* @__PURE__ */ p({
   __name: "JoyMultiCheckbox",
   props: {
     options: {
       type: Array,
       required: !0,
       validator(e) {
-        const n = e.every((t) => Object.keys(t).includes("value")), a = e.every((t) => Object.keys(t).includes("label"));
-        return n && a;
+        const l = e.every((t) => Object.keys(t).includes("value")), a = e.every((t) => Object.keys(t).includes("label"));
+        return l && a;
       }
     },
     id: String,
@@ -720,20 +727,20 @@ const De = /* @__PURE__ */ j(Pe, [["__scopeId", "data-v-640ee9a6"]]), Ke = ["id"
     }
   },
   emits: ["update:value"],
-  setup(e, { emit: n }) {
+  setup(e, { emit: l }) {
     const a = e;
     function t(s) {
       return a.value.includes(s.value);
     }
-    function o(s, c) {
-      let l = [...a.value || []];
-      c ? l.push(s) : l.splice(l.indexOf(s), 1), n("update:value", l);
+    function i(s, f) {
+      let n = [...a.value || []];
+      f ? n.push(s) : n.splice(n.indexOf(s), 1), l("update:value", n);
     }
-    return (s, c) => (i(), r("fieldset", {
+    return (s, f) => (o(), d("fieldset", {
       id: e.id,
       class: "joy-multi-checkbox__wrapper"
     }, [
-      e.label ? (i(), V(b(C), {
+      e.label ? (o(), J(m(C), {
         key: 0,
         "tag-name": "legend",
         required: e.required && e.requiredMark,
@@ -744,26 +751,106 @@ const De = /* @__PURE__ */ j(Pe, [["__scopeId", "data-v-640ee9a6"]]), Ke = ["id"
           B($(e.label), 1)
         ]),
         _: 1
-      }, 8, ["required", "optional-label", "size"])) : f("", !0),
-      d("div", Ze, [
-        (i(!0), r(F, null, A(e.options, (l) => (i(), V(b(N), {
-          id: l.id,
-          key: l.id,
-          name: l.name,
-          value: l.value,
-          checked: t(l),
-          "onUpdate:checked": (u) => o(l.value, u)
+      }, 8, ["required", "optional-label", "size"])) : y("", !0),
+      u("div", Xe, [
+        (o(!0), d(A, null, F(e.options, (n) => (o(), J(m(T), {
+          id: n.id,
+          key: n.id,
+          name: n.name,
+          value: n.value,
+          checked: t(n),
+          "onUpdate:checked": (r) => i(n.value, r)
         }, {
           default: q(() => [
-            B($(l.label), 1)
+            B($(n.label), 1)
           ]),
           _: 2
         }, 1032, ["id", "name", "value", "checked", "onUpdate:checked"]))), 128))
       ])
-    ], 8, Ke));
+    ], 8, Qe));
+  }
+});
+const et = /* @__PURE__ */ _(Ye, [["__scopeId", "data-v-4a9e39e2"]]), tt = ["small", "medium", "large"], at = {
+  class: /* @__PURE__ */ b(["joy-panel__header"])
+}, lt = {
+  key: 0,
+  class: "joy-panel__header-title"
+}, nt = {
+  key: 1,
+  class: "joy-panel__header-action"
+}, ot = {
+  key: 2,
+  class: "joy-panel__header-subtitle"
+}, it = { class: "joy-panel__body" }, dt = { class: "joy-panel__footer" }, ut = /* @__PURE__ */ p({
+  __name: "JoyPanel",
+  props: {
+    flex: {
+      type: String
+    },
+    noMargin: {
+      type: Boolean,
+      default: !1
+    },
+    padding: {
+      type: String,
+      defaut: "medium",
+      validator(e) {
+        return tt.includes(e);
+      }
+    }
+  },
+  setup(e) {
+    const l = w(), a = S(), t = V(() => {
+      var i;
+      return (i = a.value) == null ? void 0 : i.closest(".joy-wrapper");
+    });
+    return (i, s) => (o(), d("section", {
+      ref_key: "panel",
+      ref: a,
+      style: D({ flex: e.flex }),
+      class: b(["joy-panel", `joy-panel--${e.padding}`, { "joy-panel--no-margin": e.noMargin || m(t) }])
+    }, [
+      u("header", at, [
+        m(l)["panel-title"] ? (o(), d("div", lt, [
+          c(i.$slots, "panel-title", {}, void 0, !0)
+        ])) : y("", !0),
+        m(l)["panel-action"] ? (o(), d("div", nt, [
+          c(i.$slots, "panel-title-action", {}, void 0, !0)
+        ])) : y("", !0),
+        m(l)["panel-subtitle"] ? (o(), d("div", ot, [
+          c(i.$slots, "panel-subtitle", {}, void 0, !0)
+        ])) : y("", !0)
+      ]),
+      u("div", it, [
+        c(i.$slots, "panel-body", {}, void 0, !0)
+      ]),
+      u("footer", dt, [
+        c(i.$slots, "panel-action", {}, void 0, !0)
+      ])
+    ], 6));
+  }
+});
+const st = /* @__PURE__ */ _(ut, [["__scopeId", "data-v-ab3b6d88"]]), rt = { class: "joy-panel-section" }, ct = {
+  key: 0,
+  class: "joy-panel-section__title"
+}, yt = {
+  key: 1,
+  class: "joy-panel-section__content"
+}, mt = /* @__PURE__ */ p({
+  __name: "JoyPanelSection",
+  setup(e) {
+    const l = w();
+    return (a, t) => (o(), d("div", rt, [
+      m(l)["panel-section-title"] ? (o(), d("div", ct, [
+        c(a.$slots, "panel-section-title", {}, void 0, !0)
+      ])) : y("", !0),
+      m(l)["panel-section-content"] ? (o(), d("div", yt, [
+        c(a.$slots, "panel-section-content", {}, void 0, !0)
+      ])) : y("", !0)
+    ]));
   }
 });
-const Xe = /* @__PURE__ */ j(Qe, [["__scopeId", "data-v-ac218b17"]]), Ye = ["id", "value", "checked", "disabled", "required", "name"], et = { class: "joy-radio-label" }, tt = { class: "joy-radio-content__wrapper" }, at = { class: "joy-radio-content" }, lt = /* @__PURE__ */ S({
+const ft = /* @__PURE__ */ _(mt, [["__scopeId", "data-v-3b8a6001"]]), vt = ["id", "value", "checked", "disabled", "required", "name"], bt = { class: "joy-radio-label" }, gt = { class: "joy-radio-content__wrapper" }, ht = { class: "joy-radio-content" }, pt = /* @__PURE__ */ p({
   __name: "JoyRadio",
   props: {
     disabled: {
@@ -793,70 +880,71 @@ const Xe = /* @__PURE__ */ j(Qe, [["__scopeId", "data-v-ac218b17"]]), Ye = ["id"
       default: "default"
     },
     value: {
-      type: String
+      type: String,
+      required: !0
     }
   },
   emits: ["update:modelValue"],
-  setup(e, { expose: n, emit: a }) {
-    const t = e, o = _(!1), s = _(null), c = _(null), l = L(), u = J(() => !t.modelValue || !t.value ? !1 : t.modelValue === t.value);
+  setup(e, { expose: l, emit: a }) {
+    const t = e, i = S(!1), s = S(null), f = S(null), n = w(), r = V(() => !t.modelValue || !t.value ? !1 : t.modelValue === t.value);
     function g() {
-      o.value = !!l["expandable-content"] && u.value;
+      i.value = !!n["expandable-content"] && r.value;
     }
-    function p() {
+    function k() {
       a("update:modelValue", t.value), g();
     }
-    return E(() => {
+    return N(() => {
       t.theme === "outline" && g();
-    }), D(
+    }), Z(
       () => t.modelValue,
       () => {
         g();
       }
-    ), n({
-      checked: u,
-      isExpanded: o
-    }), (I, k) => (i(), r("label", {
+    ), l({
+      checked: r,
+      isExpanded: i
+    }), (I, j) => (o(), d("label", {
       ref_key: "root",
       ref: s,
-      class: v([
+      class: b([
         "joy-radio",
         `joy-radio--${e.theme}`,
         {
-          "joy-radio--checked": b(u),
+          "joy-radio--checked": m(r),
           "joy-radio--disabled": e.disabled,
           "joy-radio--invalid": e.invalid
         }
       ])
     }, [
-      d("input", {
+      u("input", {
         id: e.id,
         type: "radio",
         value: e.value,
-        checked: b(u),
+        checked: m(r),
         disabled: e.disabled,
         required: e.required,
         name: e.name,
-        onChange: p
-      }, null, 40, Ye),
-      d("span", et, [
-        m(I.$slots, "default", {}, void 0, !0)
+        onChange: k
+      }, null, 40, vt),
+      u("span", bt, [
+        c(I.$slots, "default", {}, void 0, !0)
       ]),
-      d("div", tt, [
-        d("div", at, [
-          m(I.$slots, "radio-content", {}, void 0, !0)
+      u("div", gt, [
+        u("div", ht, [
+          c(I.$slots, "radio-content", {}, void 0, !0)
         ]),
-        d("div", {
+        u("div", {
           ref_key: "expandableElement",
-          ref: c,
-          class: v(["joy-radio-expandable", { "joy-radio-expandable--expanded": o.value }])
+          ref: f,
+          class: b(["joy-radio-expandable", { "joy-radio-expandable--expanded": i.value }])
         }, [
-          m(I.$slots, "expandable-content", {}, void 0, !0)
+          c(I.$slots, "expandable-content", {}, void 0, !0)
         ], 2)
       ])
     ], 2));
   }
 });
-const nt = /* @__PURE__ */ j(lt, [["__scopeId", "data-v-8882dc58"]]), it = ["form", "name"], ot = /* @__PURE__ */ S({
+const _t = /* @__PURE__ */ _(pt, [["__scopeId", "data-v-5b66be9f"]]), kt = ["form", "name"], jt = /* @__PURE__ */ p({
   __name: "JoyRadioGroup",
   props: {
     direction: {
@@ -871,26 +959,26 @@ const nt = /* @__PURE__ */ j(lt, [["__scopeId", "data-v-8882dc58"]]), it = ["for
     }
   },
   setup(e) {
-    return (n, a) => (i(), r("fieldset", {
+    return (l, a) => (o(), d("fieldset", {
       ref: "root",
       class: "joy-radio-group-fieldset",
       role: "radiogroup",
       form: e.form,
       name: e.name
     }, [
-      m(n.$slots, "radio-group-legend", {}, void 0, !0),
-      d("div", {
-        class: v(["joy-radio-group-container", `joy-radio-group-${e.direction}`])
+      c(l.$slots, "radio-group-legend", {}, void 0, !0),
+      u("div", {
+        class: b(["joy-radio-group-container", `joy-radio-group-${e.direction}`])
       }, [
-        m(n.$slots, "default", {}, void 0, !0)
+        c(l.$slots, "default", {}, void 0, !0)
       ], 2)
-    ], 8, it));
+    ], 8, kt));
   }
 });
-const dt = /* @__PURE__ */ j(ot, [["__scopeId", "data-v-d75cd96a"]]), ut = (e) => (M("data-v-f9015b7b"), e = e(), T(), e), rt = ["id", "name", "aria-invalid", "required", "disabled", "value"], st = /* @__PURE__ */ ut(() => /* @__PURE__ */ d("joy-icon", {
+const St = /* @__PURE__ */ _(jt, [["__scopeId", "data-v-d75cd96a"]]), $t = (e) => (z("data-v-0d978ea6"), e = e(), M(), e), xt = ["id", "name", "aria-invalid", "required", "disabled", "value"], It = /* @__PURE__ */ $t(() => /* @__PURE__ */ u("joy-icon", {
   class: "joy-select__chevron",
   name: "chevron-down"
-}, null, -1)), ct = /* @__PURE__ */ S({
+}, null, -1)), qt = /* @__PURE__ */ p({
   __name: "JoySelect",
   props: {
     disabled: {
@@ -930,33 +1018,33 @@ const dt = /* @__PURE__ */ j(ot, [["__scopeId", "data-v-d75cd96a"]]), ut = (e) =
     // ...TEXT_BASED_PROPS,
   },
   emits: ["update:modelValue"],
-  setup(e, { emit: n }) {
-    const a = e, t = _(), o = _(), s = L();
-    E(() => {
+  setup(e, { emit: l }) {
+    const a = e, t = S(), i = S(), s = w();
+    N(() => {
       var g;
-      const l = s.label && s.label();
-      if (!l || !l.length)
+      const n = s.label && s.label();
+      if (!n || !n.length)
         return;
-      const u = l[0];
-      if (u.type === "JoyLabel") {
-        const p = (g = u.props) == null ? void 0 : g.for;
-        if (!p) {
+      const r = n[0];
+      if (r.type === "JoyLabel") {
+        const k = (g = r.props) == null ? void 0 : g.for;
+        if (!k) {
           console.warn("JoyLabel for attribute is missing");
           return;
         }
-        p !== a.id && console.warn("JoyLabel for attribute does not match with JoySelect id");
+        k !== a.id && console.warn("JoyLabel for attribute does not match with JoySelect id");
       }
     });
-    function c(l) {
-      const u = l.target.value;
-      n("update:modelValue", u);
+    function f(n) {
+      const r = n.target.value;
+      l("update:modelValue", r);
     }
-    return (l, u) => (i(), r("div", {
+    return (n, r) => (o(), d("div", {
       ref_key: "root",
       ref: t
     }, [
-      m(l.$slots, "label", {}, () => [
-        e.label ? (i(), V(C, {
+      c(n.$slots, "label", {}, () => [
+        e.label ? (o(), J(C, {
           key: 0,
           required: e.required && e.requiredMark,
           "optional-label": e.optionalLabel,
@@ -967,35 +1055,35 @@ const dt = /* @__PURE__ */ j(ot, [["__scopeId", "data-v-d75cd96a"]]), ut = (e) =
             B($(e.label), 1)
           ]),
           _: 1
-        }, 8, ["required", "optional-label", "for", "size"])) : f("", !0)
+        }, 8, ["required", "optional-label", "for", "size"])) : y("", !0)
       ], !0),
-      d("div", {
-        class: v({
+      u("div", {
+        class: b({
           "joy-select__wrapper": !0,
           "joy-select--invalid": e.invalid,
           "joy-select--disabled": e.disabled
         })
       }, [
-        d("select", {
+        u("select", {
           id: e.id || e.name,
           ref_key: "select",
-          ref: o,
+          ref: i,
           class: "joy-select",
           name: e.name,
           "aria-invalid": e.invalid,
           required: e.required,
           disabled: e.disabled,
           value: e.modelValue,
-          onInput: c
+          onInput: f
         }, [
-          m(l.$slots, "default", {}, void 0, !0)
-        ], 40, rt),
-        st
+          c(n.$slots, "default", {}, void 0, !0)
+        ], 40, xt),
+        It
       ], 2)
     ], 512));
   }
 });
-const yt = /* @__PURE__ */ j(ct, [["__scopeId", "data-v-f9015b7b"]]), mt = ["aria-disabled"], ft = ["id", "value", "checked", "disabled", "required", "name"], bt = /* @__PURE__ */ S({
+const Bt = /* @__PURE__ */ _(qt, [["__scopeId", "data-v-0d978ea6"]]), Jt = ["aria-disabled"], Vt = ["id", "value", "checked", "disabled", "required", "name"], Ct = /* @__PURE__ */ p({
   __name: "JoySelectableItem",
   props: {
     disabled: {
@@ -1026,36 +1114,37 @@ const yt = /* @__PURE__ */ j(ct, [["__scopeId", "data-v-f9015b7b"]]), mt = ["ari
       type: Boolean
     },
     value: {
-      type: String
+      type: String,
+      required: !0
     }
   },
   emits: ["update:checked"],
-  setup(e, { emit: n }) {
-    const a = e, t = _(a.checked), o = _(), s = a.multiple ? "div" : "label", c = {
+  setup(e, { emit: l }) {
+    const a = e, t = S(a.checked), i = S(), s = a.multiple ? "div" : "label", f = {
       onRadioChange: () => {
-        n("update:checked", a.value);
+        l("update:checked", a.value);
       },
       onClick: () => {
-        a.checked && !a.multiple && n("update:checked", "");
+        a.checked && !a.multiple && l("update:checked", "");
       },
-      onLabelClick: (u) => {
-        a.multiple || u.stopPropagation();
+      onLabelClick: (r) => {
+        a.multiple || r.stopPropagation();
       }
     };
-    function l(u) {
-      n("update:checked", u);
+    function n(r) {
+      l("update:checked", r);
     }
-    return (u, g) => (i(), r("div", {
+    return (r, g) => (o(), d("div", {
       class: "joy-selectable-item__wrapper",
       "aria-disabled": e.disabled,
       onClick: g[2] || (g[2] = //@ts-ignore
-      (...p) => c.onClick && c.onClick(...p))
+      (...k) => f.onClick && f.onClick(...k))
     }, [
-      e.multiple ? f("", !0) : (i(), r("input", {
+      e.multiple ? y("", !0) : (o(), d("input", {
         key: 0,
         id: e.id,
         ref_key: "inputRadio",
-        ref: o,
+        ref: i,
         type: "radio",
         value: e.value,
         checked: e.checked,
@@ -1063,11 +1152,11 @@ const yt = /* @__PURE__ */ j(ct, [["__scopeId", "data-v-f9015b7b"]]), mt = ["ari
         required: e.required,
         name: e.name,
         onChange: g[0] || (g[0] = //@ts-ignore
-        (...p) => c.onRadioChange && c.onRadioChange(...p))
-      }, null, 40, ft)),
-      (i(), V(z(b(s)), {
+        (...k) => f.onRadioChange && f.onRadioChange(...k))
+      }, null, 40, Vt)),
+      (o(), J(E(m(s)), {
         for: e.id,
-        class: v([
+        class: b([
           "joy-selectable-item",
           {
             "joy-selectable-item--disabled": e.disabled,
@@ -1076,16 +1165,16 @@ const yt = /* @__PURE__ */ j(ct, [["__scopeId", "data-v-f9015b7b"]]), mt = ["ari
             "joy-selectable-item--single": !e.multiple
           }
         ]),
-        onClick: c.onLabelClick
+        onClick: f.onLabelClick
       }, {
         default: q(() => [
-          e.multiple ? (i(), V(b(N), {
+          e.multiple ? (o(), J(m(T), {
             key: 0,
             id: e.id,
             checked: t.value,
             "onUpdate:checked": [
-              g[1] || (g[1] = (p) => t.value = p),
-              l
+              g[1] || (g[1] = (k) => t.value = k),
+              n
             ],
             disabled: e.disabled,
             value: e.value,
@@ -1093,31 +1182,31 @@ const yt = /* @__PURE__ */ j(ct, [["__scopeId", "data-v-f9015b7b"]]), mt = ["ari
             required: e.required
           }, {
             default: q(() => [
-              m(u.$slots, "default", {}, void 0, !0)
+              c(r.$slots, "default", {}, void 0, !0)
             ]),
             _: 3
-          }, 8, ["id", "checked", "disabled", "value", "name", "required"])) : f("", !0),
-          e.multiple ? f("", !0) : m(u.$slots, "default", { key: 1 }, void 0, !0),
-          d("div", {
-            class: v([{ "joy-selectable-item__sublabel": u.$slots["selectable-item-sublabel"] }])
+          }, 8, ["id", "checked", "disabled", "value", "name", "required"])) : y("", !0),
+          e.multiple ? y("", !0) : c(r.$slots, "default", { key: 1 }, void 0, !0),
+          u("div", {
+            class: b([{ "joy-selectable-item__sublabel": r.$slots["selectable-item-sublabel"] }])
           }, [
-            m(u.$slots, "selectable-item-sublabel", {}, void 0, !0)
+            c(r.$slots, "selectable-item-sublabel", {}, void 0, !0)
           ], 2)
         ]),
         _: 3
       }, 8, ["for", "class", "onClick"]))
-    ], 8, mt));
+    ], 8, Jt));
   }
 });
-const W = /* @__PURE__ */ j(bt, [["__scopeId", "data-v-6fdac15a"]]), vt = ["id"], gt = /* @__PURE__ */ S({
+const U = /* @__PURE__ */ _(Ct, [["__scopeId", "data-v-46f0bc5e"]]), wt = ["id"], Lt = /* @__PURE__ */ p({
   __name: "JoySelectableItemGroup",
   props: {
     options: {
       type: Array,
       required: !0,
       validator(e) {
-        const n = e.every((t) => Object.keys(t).includes("value")), a = e.every((t) => Object.keys(t).includes("label"));
-        return n && a;
+        const l = e.every((t) => Object.keys(t).includes("value")), a = e.every((t) => Object.keys(t).includes("label"));
+        return l && a;
       }
     },
     id: String,
@@ -1149,22 +1238,22 @@ const W = /* @__PURE__ */ j(bt, [["__scopeId", "data-v-6fdac15a"]]), vt = ["id"]
     }
   },
   emits: ["update:value"],
-  setup(e, { emit: n }) {
+  setup(e, { emit: l }) {
     const a = e;
     function t(s) {
       return typeof a.value == "string" ? a.value === s.value : (a.value || []).includes(s.value);
     }
-    function o(s, c) {
+    function i(s, f) {
       if (!a.multiple)
-        return n("update:value", c);
-      let l = [...a.value || []];
-      c && typeof c == "boolean" ? l.push(s) : l.splice(l.indexOf(s), 1), n("update:value", l);
+        return l("update:value", f);
+      let n = [...a.value || []];
+      f && typeof f == "boolean" ? n.push(s) : n.splice(n.indexOf(s), 1), l("update:value", n);
     }
-    return (s, c) => (i(), r("fieldset", {
+    return (s, f) => (o(), d("fieldset", {
       id: e.id,
       class: "joy-selectable-item-group__wrapper"
     }, [
-      e.label ? (i(), V(b(C), {
+      e.label ? (o(), J(m(C), {
         key: 0,
         "tag-name": "legend",
         required: e.required && e.requiredMark,
@@ -1175,9 +1264,9 @@ const W = /* @__PURE__ */ j(bt, [["__scopeId", "data-v-6fdac15a"]]), vt = ["id"]
           B($(e.label), 1)
         ]),
         _: 1
-      }, 8, ["required", "optional-label", "size"])) : f("", !0),
-      d("div", {
-        class: v([
+      }, 8, ["required", "optional-label", "size"])) : y("", !0),
+      u("div", {
+        class: b([
           "joy-selectable-item-group",
           {
             "joy-selectable-item-group--multiple": e.multiple,
@@ -1186,33 +1275,33 @@ const W = /* @__PURE__ */ j(bt, [["__scopeId", "data-v-6fdac15a"]]), vt = ["id"]
           }
         ])
       }, [
-        (i(!0), r(F, null, A(e.options, (l) => (i(), V(b(W), {
-          id: l.id,
-          key: l.id,
-          name: l.name,
-          value: l.value,
+        (o(!0), d(A, null, F(e.options, (n) => (o(), J(m(U), {
+          id: n.id,
+          key: n.id,
+          name: n.name,
+          value: n.value,
           multiple: e.multiple,
-          checked: t(l),
-          "onUpdate:checked": (u) => o(l.value, u)
+          checked: t(n),
+          "onUpdate:checked": (r) => i(n.value, r)
         }, K({
           default: q(() => [
-            B($(l.label) + " ", 1)
+            B($(n.label) + " ", 1)
           ]),
           _: 2
         }, [
-          l.subLabel ? {
+          n.subLabel ? {
             name: "selectable-item-sublabel",
             fn: q(() => [
-              B($(l.subLabel), 1)
+              B($(n.subLabel), 1)
             ]),
             key: "0"
           } : void 0
         ]), 1032, ["id", "name", "value", "multiple", "checked", "onUpdate:checked"]))), 128))
       ], 2)
-    ], 8, vt));
+    ], 8, wt));
   }
 });
-const ht = /* @__PURE__ */ j(gt, [["__scopeId", "data-v-93c88f70"]]), pt = /* @__PURE__ */ S({
+const zt = /* @__PURE__ */ _(Lt, [["__scopeId", "data-v-cec63fed"]]), Mt = /* @__PURE__ */ p({
   __name: "JoyWrapper",
   props: {
     justify: {
@@ -1233,64 +1322,79 @@ const ht = /* @__PURE__ */ j(gt, [["__scopeId", "data-v-93c88f70"]]), pt = /* @_
     }
   },
   setup(e) {
-    return (n, a) => (i(), r("div", {
-      class: v(["joy-wrapper", `joy-wrapper--justify-${e.justify}`, `joy-wrapper--align-${e.align}`, `joy-wrapper--direction-${e.direction}`, `joy-wrapper--wrap-${e.wrap}`])
+    return (l, a) => (o(), d("div", {
+      class: b(["joy-wrapper", `joy-wrapper--justify-${e.justify}`, `joy-wrapper--align-${e.align}`, `joy-wrapper--direction-${e.direction}`, `joy-wrapper--wrap-${e.wrap}`])
     }, [
-      m(n.$slots, "default", {}, void 0, !0)
+      c(l.$slots, "default", {}, void 0, !0)
     ], 2));
   }
 });
-const kt = /* @__PURE__ */ j(pt, [["__scopeId", "data-v-ce0e1214"]]), St = { class: "joy-template__heading" }, jt = { key: 0 }, _t = { class: "joy-template__heading___headings" }, $t = { key: 0 }, xt = { key: 1 }, It = { key: 0 }, qt = { key: 1 }, Bt = /* @__PURE__ */ S({
+const Et = /* @__PURE__ */ _(Mt, [["__scopeId", "data-v-ce0e1214"]]), Nt = { class: "joy-template__heading" }, Tt = {
+  key: 0,
+  class: "joy-template-slot-back"
+}, Ot = { class: "joy-template__heading___headings" }, Rt = {
+  key: 0,
+  class: "joy-template-slot-title"
+}, At = {
+  key: 1,
+  class: "joy-template-slot-subtitle"
+}, Ft = {
+  key: 0,
+  class: "joy-template-slot-main"
+}, Pt = {
+  key: 1,
+  class: "joy-template-slot-sidebar"
+}, Ht = /* @__PURE__ */ p({
   __name: "JoyTemplate",
   props: {
     full: { type: Boolean, default: !1 },
     sidebar: { type: String, default: "right" }
   },
   setup(e) {
-    const n = e, a = L();
-    return (t, o) => (i(), r("main", {
-      class: v(["joy-template", { "joy-template--full": n.full }])
+    const l = e, a = w();
+    return (t, i) => (o(), d("main", {
+      class: b(["joy-template", { "joy-template--full": l.full }])
     }, [
-      d("div", St, [
-        b(a)["template-back"] ? (i(), r("div", jt, [
-          m(t.$slots, "template-back", {}, void 0, !0)
-        ])) : f("", !0),
-        d("div", _t, [
-          b(a)["template-title"] ? (i(), r("div", $t, [
-            m(t.$slots, "template-title", {}, void 0, !0)
-          ])) : f("", !0),
-          b(a)["template-subtitle"] ? (i(), r("div", xt, [
-            m(t.$slots, "template-subtitle", {}, void 0, !0)
-          ])) : f("", !0)
+      u("div", Nt, [
+        m(a)["template-back"] ? (o(), d("div", Tt, [
+          c(t.$slots, "template-back", {}, void 0, !0)
+        ])) : y("", !0),
+        u("div", Ot, [
+          m(a)["template-title"] ? (o(), d("div", Rt, [
+            c(t.$slots, "template-title", {}, void 0, !0)
+          ])) : y("", !0),
+          m(a)["template-subtitle"] ? (o(), d("div", At, [
+            c(t.$slots, "template-subtitle", {}, void 0, !0)
+          ])) : y("", !0)
         ])
       ]),
-      d("div", {
-        class: v([
+      u("div", {
+        class: b([
           "joy-template__content",
           {
-            "joy-template__content--reverse": n.sidebar === "left"
+            "joy-template__content--reverse": l.sidebar === "left"
           }
         ])
       }, [
-        t.$slots["template-main"] ? (i(), r("div", It, [
-          m(t.$slots, "template-main", {}, void 0, !0)
-        ])) : f("", !0),
-        t.$slots["template-sidebar"] ? (i(), r("div", qt, [
-          m(t.$slots, "template-sidebar", {}, void 0, !0)
-        ])) : f("", !0)
+        t.$slots["template-main"] ? (o(), d("div", Ft, [
+          c(t.$slots, "template-main", {}, void 0, !0)
+        ])) : y("", !0),
+        t.$slots["template-sidebar"] ? (o(), d("div", Pt, [
+          c(t.$slots, "template-sidebar", {}, void 0, !0)
+        ])) : y("", !0)
       ], 2)
     ], 2));
   }
 });
-const Vt = /* @__PURE__ */ j(Bt, [["__scopeId", "data-v-ba1a4be0"]]), Jt = ["aria-disabled"], Ct = ["id", "disabled", "name", "required", "minlength", "value"], wt = {
+const Gt = /* @__PURE__ */ _(Ht, [["__scopeId", "data-v-b332d474"]]), Ut = ["aria-disabled"], Wt = ["id", "disabled", "name", "required", "minlength", "value"], Dt = {
   key: 0,
   class: "joy-textarea_helpers"
-}, Lt = {
+}, Zt = {
   key: 0,
   name: "check",
   color: "grey",
   size: "xxsmall"
-}, zt = /* @__PURE__ */ S({
+}, Kt = /* @__PURE__ */ p({
   __name: "JoyTextarea",
   props: {
     disabled: {
@@ -1311,7 +1415,6 @@ const Vt = /* @__PURE__ */ j(Bt, [["__scopeId", "data-v-ba1a4be0"]]), Jt = ["ari
       type: Boolean,
       default: !1
     },
-    // ...FORM_BASED_PROPS,
     label: String,
     labelSize: {
       type: String,
@@ -1322,12 +1425,10 @@ const Vt = /* @__PURE__ */ j(Bt, [["__scopeId", "data-v-ba1a4be0"]]), Jt = ["ari
       type: Boolean,
       default: !1
     },
-    // ...LABEL_BASED_PROPS,
     modelValue: {
       type: String,
       default: ""
     },
-    // ...TEXT_BASED_PROPS,
     autogrow: {
       type: Boolean,
       default: !1
@@ -1341,88 +1442,101 @@ const Vt = /* @__PURE__ */ j(Bt, [["__scopeId", "data-v-ba1a4be0"]]), Jt = ["ari
     }
   },
   emits: ["update:modelValue"],
-  setup(e, { expose: n, emit: a }) {
-    const t = e, o = _(), s = _(), c = _(!1), l = J(() => t.maxlength ? t.modelValue.length > t.maxlength : !1), u = J(() => t.minlength ? t.modelValue.length < t.minlength : !1);
+  setup(e, { expose: l, emit: a }) {
+    const t = e, i = S(), s = S(), f = S(!1), n = V(() => t.maxlength ? t.modelValue.length > t.maxlength : !1), r = V(() => t.minlength ? t.modelValue.length < t.minlength : !1);
     function g() {
-      o.value && t.autogrow && (o.value.style.height = "auto", o.value.style.height = o.value.scrollHeight + "px", s.value && (s.value.style.height = o.value.scrollHeight + "px"));
+      i.value && t.autogrow && (i.value.style.height = "auto", i.value.style.height = i.value.scrollHeight + "px", s.value && (s.value.style.height = i.value.scrollHeight + "px"));
     }
-    E(() => {
+    N(() => {
       g();
     });
-    const p = {
+    const k = {
       onInput: (I) => {
         a("update:modelValue", I.target.value), g();
       },
       onBlur: () => {
-        c.value = l.value || u.value;
+        f.value = n.value || r.value;
       }
     };
-    return n({
-      isInvalid: c,
-      valueOverMaxlength: l,
-      valueUnderMinlength: u
-    }), (I, k) => (i(), r("div", {
+    return l({
+      isInvalid: f,
+      valueOverMaxlength: n,
+      valueUnderMinlength: r
+    }), (I, j) => (o(), d("div", {
       "aria-disabled": e.disabled,
-      class: v([
+      class: b([
         "joy-textarea",
         {
-          "joy-textarea_invalid": c.value || e.invalid,
+          "joy-textarea_invalid": f.value || e.invalid,
           "joy-textarea_disabled": e.disabled,
           "joy-textarea_autogrow": e.autogrow
         }
       ])
     }, [
-      R(b(C), {
+      R(m(C), {
         for: e.id,
         required: e.required && e.requiredMark,
         "optional-label": e.optionalLabel,
         size: e.labelSize
       }, {
         default: q(() => [
-          m(I.$slots, "default", {}, () => [
+          c(I.$slots, "default", {}, () => [
             B($(e.label), 1)
           ], !0)
         ]),
         _: 3
       }, 8, ["for", "required", "optional-label", "size"]),
-      d("div", {
+      u("div", {
         ref_key: "textareaWrapper",
         ref: s,
         class: "joy-textarea_wrapper"
       }, [
-        d("textarea", w(I.$attrs, {
+        u("textarea", L(I.$attrs, {
           id: e.id,
           ref_key: "textarea",
-          ref: o,
+          ref: i,
           class: "joy-native-textarea",
           disabled: e.disabled,
           name: e.name,
           required: e.required,
           minlength: e.minlength,
           value: e.modelValue,
-          onInput: k[0] || (k[0] = //@ts-ignore
-          (...y) => p.onInput && p.onInput(...y)),
-          onBlur: k[1] || (k[1] = //@ts-ignore
-          (...y) => p.onBlur && p.onBlur(...y))
-        }), null, 16, Ct)
+          onInput: j[0] || (j[0] = //@ts-ignore
+          (...v) => k.onInput && k.onInput(...v)),
+          onBlur: j[1] || (j[1] = //@ts-ignore
+          (...v) => k.onBlur && k.onBlur(...v))
+        }), null, 16, Wt)
       ], 512),
-      e.minlength || e.maxlength ? (i(), r("div", wt, [
-        e.minlength ? (i(), r("p", {
+      e.minlength || e.maxlength ? (o(), d("div", Dt, [
+        e.minlength ? (o(), d("p", {
           key: 0,
-          class: v(["joy-textarea-min", { "joy-textarea-min-invalid": e.invalid }])
+          class: b(["joy-textarea-min", { "joy-textarea-min-invalid": e.invalid }])
         }, [
-          b(u) ? f("", !0) : (i(), r("joy-icon", Lt)),
+          m(r) ? y("", !0) : (o(), d("joy-icon", Zt)),
           B(" " + $(e.minlengthLabel || `Minimum ${e.minlength} characters`), 1)
-        ], 2)) : f("", !0),
-        e.maxlength ? (i(), r("p", {
+        ], 2)) : y("", !0),
+        e.maxlength ? (o(), d("p", {
           key: 1,
-          class: v(["joy-textarea-count", { "joy-textarea-count-invalid": b(l) }])
-        }, $(e.modelValue.length + "/" + e.maxlength), 3)) : f("", !0)
-      ])) : f("", !0)
-    ], 10, Jt));
+          class: b(["joy-textarea-count", { "joy-textarea-count-invalid": m(n) }])
+        }, $(e.modelValue.length + "/" + e.maxlength), 3)) : y("", !0)
+      ])) : y("", !0)
+    ], 10, Ut));
   }
 });
-const Mt = /* @__PURE__ */ j(zt, [["__scopeId", "data-v-d68ef0dd"]]), Tt = ["name", "disabled", "checked", "required", "aria-checked", "value"], Et = { class: "joy-toggle__content" }, Nt = /* @__PURE__ */ S({
+const Qt = /* @__PURE__ */ _(Kt, [["__scopeId", "data-v-4505e508"]]), Xt = (e) => (z("data-v-ab8aee40"), e = e(), M(), e), Yt = ["name", "disabled", "checked", "required", "aria-checked", "value"], ea = { class: "joy-toggle__content" }, ta = { class: "joy-toggle__content-label" }, aa = /* @__PURE__ */ Xt(() => /* @__PURE__ */ u("span", { class: "joy-toggle__smile" }, [
+  /* @__PURE__ */ u("svg", {
+    width: "18",
+    height: "10",
+    viewBox: "0 0 18 10",
+    fill: "currentColor",
+    xmlns: "http://www.w3.org/2000/svg"
+  }, [
+    /* @__PURE__ */ u("path", {
+      d: "M9.0237 9.14856C15.7144 9.14856 17.8736 2.22231 17.9649 1.91853L17.9345 1.94891C18.1778 1.15908 17.7216 0.308485 16.9309 0.0654591C16.1402 -0.177566 15.2886 0.278108 15.0453 1.06794C14.9845 1.25021 13.5551 6.11073 8.99328 6.11073C4.43147 6.11073 3.03249 1.43248 2.97167 1.21983C2.75878 0.399622 1.90724 -0.0560541 1.11652 0.156593C0.295397 0.369241 -0.160787 1.18945 0.0520982 2.00967C0.721165 4.4703 3.48869 9.14856 9.0237 9.14856Z",
+      fill: "currentColor"
+    })
+  ])
+], -1)), la = /* @__PURE__ */ p({
   __name: "JoyToggle",
   props: {
     modelValue: {
@@ -1455,16 +1569,16 @@ const Mt = /* @__PURE__ */ j(zt, [["__scopeId", "data-v-d68ef0dd"]]), Tt = ["nam
     label: String
   },
   emits: ["update:modelValue"],
-  setup(e, { emit: n }) {
+  setup(e, { emit: l }) {
     const a = {
       onChange: (t) => {
-        const o = t.target.checked;
-        n("update:modelValue", o);
+        const i = t.target.checked;
+        l("update:modelValue", i);
       }
     };
-    return (t, o) => (i(), r("div", null, [
-      d("label", {
-        class: v([
+    return (t, i) => (o(), d("div", null, [
+      u("label", {
+        class: b([
           "joy-toggle",
           {
             "joy-toggle__checked": e.modelValue,
@@ -1472,7 +1586,7 @@ const Mt = /* @__PURE__ */ j(zt, [["__scopeId", "data-v-d68ef0dd"]]), Tt = ["nam
           }
         ])
       }, [
-        d("input", {
+        u("input", {
           ref: "input",
           type: "checkbox",
           class: "joy-toggle__input",
@@ -1483,65 +1597,72 @@ const Mt = /* @__PURE__ */ j(zt, [["__scopeId", "data-v-d68ef0dd"]]), Tt = ["nam
           required: e.required,
           "aria-checked": e.modelValue,
           value: e.value,
-          onChange: o[0] || (o[0] = //@ts-ignore
+          onChange: i[0] || (i[0] = //@ts-ignore
           (...s) => a.onChange && a.onChange(...s))
-        }, null, 40, Tt),
-        d("p", Et, [
-          m(t.$slots, "default", {}, () => [
-            B($(e.label), 1)
-          ], !0)
+        }, null, 40, Yt),
+        u("p", ea, [
+          u("span", ta, [
+            c(t.$slots, "default", {}, () => [
+              B($(e.label), 1)
+            ], !0)
+          ]),
+          aa
         ])
       ], 2)
     ]));
   }
 });
-const Ot = /* @__PURE__ */ j(Nt, [["__scopeId", "data-v-e31a6b5e"]]), Rt = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
+const na = /* @__PURE__ */ _(la, [["__scopeId", "data-v-ab8aee40"]]), oa = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
   __proto__: null,
-  JoyButton: de,
-  JoyCheckbox: N,
-  JoyCounter: $e,
-  JoyFormError: U,
-  JoyHighlight: ze,
-  JoyInput: He,
+  JoyButton: ue,
+  JoyCheckbox: T,
+  JoyCounter: xe,
+  JoyFormError: G,
+  JoyHighlight: Me,
+  JoyInput: Ge,
   JoyLabel: C,
-  JoyLink: De,
-  JoyMultiCheckbox: Xe,
-  JoyRadio: nt,
-  JoyRadioGroup: dt,
-  JoySelect: yt,
-  JoySelectableItem: W,
-  JoySelectableItemGroup: ht,
-  JoySpinner: H,
-  JoyTemplate: Vt,
-  JoyTextarea: Mt,
-  JoyToggle: Ot,
-  JoyWrapper: kt
-}, Symbol.toStringTag, { value: "Module" })), At = {
+  JoyLink: Ke,
+  JoyMultiCheckbox: et,
+  JoyPanel: st,
+  JoyPanelSection: ft,
+  JoyRadio: _t,
+  JoyRadioGroup: St,
+  JoySelect: Bt,
+  JoySelectableItem: U,
+  JoySelectableItemGroup: zt,
+  JoySpinner: P,
+  JoyTemplate: Gt,
+  JoyTextarea: Qt,
+  JoyToggle: na,
+  JoyWrapper: Et
+}, Symbol.toStringTag, { value: "Module" })), da = {
   install: (e) => {
-    Object.entries(Rt).forEach(([n, a]) => {
-      e.component(n, a);
+    Object.entries(oa).forEach(([l, a]) => {
+      e.component(l, a);
     });
   }
 };
 export {
-  de as JoyButton,
-  N as JoyCheckbox,
-  $e as JoyCounter,
-  U as JoyFormError,
-  ze as JoyHighlight,
-  He as JoyInput,
+  ue as JoyButton,
+  T as JoyCheckbox,
+  xe as JoyCounter,
+  G as JoyFormError,
+  Me as JoyHighlight,
+  Ge as JoyInput,
   C as JoyLabel,
-  De as JoyLink,
-  Xe as JoyMultiCheckbox,
-  nt as JoyRadio,
-  dt as JoyRadioGroup,
-  yt as JoySelect,
-  W as JoySelectableItem,
-  ht as JoySelectableItemGroup,
-  H as JoySpinner,
-  Vt as JoyTemplate,
-  Mt as JoyTextarea,
-  Ot as JoyToggle,
-  At as JoyVuePlugin,
-  kt as JoyWrapper
+  Ke as JoyLink,
+  et as JoyMultiCheckbox,
+  st as JoyPanel,
+  ft as JoyPanelSection,
+  _t as JoyRadio,
+  St as JoyRadioGroup,
+  Bt as JoySelect,
+  U as JoySelectableItem,
+  zt as JoySelectableItemGroup,
+  P as JoySpinner,
+  Gt as JoyTemplate,
+  Qt as JoyTextarea,
+  na as JoyToggle,
+  da as JoyVuePlugin,
+  Et as JoyWrapper
 };