@mozaic-ds/vue 2.5.0 → 2.6.0

package/dist/mozaic-vue.js

@@ -1,4 +1,4 @@
-import { defineComponent as $, computed as v, createElementBlock as n, openBlock as o, normalizeClass as g, renderSlot as k, createBlock as B, resolveDynamicComponent as F, withCtx as M, createCommentVNode as h, createElementVNode as d, Fragment as S, renderList as P, createVNode as w, createTextVNode as q, toDisplayString as b, normalizeStyle as H, mergeProps as I, ref as z, watch as T, withKeys as R, withDirectives as K, vModelDynamic as ee, nextTick as ae, vModelText as te, onMounted as se, onBeforeUnmount as oe } from "vue";
+import { defineComponent as $, computed as v, createElementBlock as i, openBlock as o, normalizeClass as g, renderSlot as k, createBlock as B, resolveDynamicComponent as F, withCtx as M, createCommentVNode as h, createElementVNode as d, Fragment as P, renderList as D, createVNode as w, createTextVNode as q, toDisplayString as b, normalizeStyle as H, mergeProps as I, ref as z, watch as T, withKeys as R, withDirectives as K, vModelDynamic as ee, nextTick as ae, vModelText as te, onMounted as se, onBeforeUnmount as oe } from "vue";
 const le = /* @__PURE__ */ $({
   __name: "MAvatar",
   props: {
@@ -8,7 +8,7 @@ const le = /* @__PURE__ */ $({
     const e = r, a = v(() => ({
       [`mc-avatar--${e.size}`]: e.size && e.size != "s"
     }));
-    return (t, i) => (o(), n("span", {
+    return (t, n) => (o(), i("span", {
       class: g(["mc-avatar", a.value])
     }, [
       k(t.$slots, "default", {}, void 0, !0)
@@ -16,8 +16,8 @@ const le = /* @__PURE__ */ $({
   }
 }), m = (r, e) => {
   const a = r.__vccOpts || r;
-  for (const [t, i] of e)
-    a[t] = i;
+  for (const [t, n] of e)
+    a[t] = n;
   return a;
 }, Ys = /* @__PURE__ */ m(le, [["__scopeId", "data-v-4fdb6762"]]), ne = {
   key: 0,
@@ -45,20 +45,20 @@ const le = /* @__PURE__ */ $({
       "mc-link--inline": e.inline,
       "mc-link--stand-alone": !e.inline
     }));
-    return (t, i) => (o(), B(F(t.router ? "router-link" : "a"), {
+    return (t, n) => (o(), B(F(t.router ? "router-link" : "a"), {
       class: g(["mc-link", a.value]),
       href: t.href,
       target: t.target,
       to: t.router ? t.href : void 0
     }, {
       default: M(() => [
-        t.$slots.icon && t.iconPosition == "left" ? (o(), n("span", ne, [
+        t.$slots.icon && t.iconPosition == "left" ? (o(), i("span", ne, [
           k(t.$slots, "icon", {}, void 0, !0)
         ])) : h("", !0),
         d("span", ie, [
           k(t.$slots, "default", {}, void 0, !0)
         ]),
-        t.$slots.icon && t.iconPosition == "right" ? (o(), n("span", re, [
+        t.$slots.icon && t.iconPosition == "right" ? (o(), i("span", re, [
           k(t.$slots, "icon", {}, void 0, !0)
         ])) : h("", !0)
       ]),
@@ -74,25 +74,25 @@ const le = /* @__PURE__ */ $({
   setup(r) {
     const e = r, a = v(() => ({
       [`mc-breadcrumb--${e.appearance}`]: e.appearance && e.appearance != "standard"
-    })), t = (i) => i === (e.links?.length ?? 0) - 1;
-    return (i, s) => (o(), n("nav", {
+    })), t = (n) => n === (e.links?.length ?? 0) - 1;
+    return (n, s) => (o(), i("nav", {
       class: g(["mc-breadcrumb", a.value]),
       "aria-label": "Breadcrumb"
     }, [
       d("ul", ue, [
-        (o(!0), n(S, null, P(i.links, (l, u) => (o(), n("li", {
+        (o(!0), i(P, null, D(n.links, (l, p) => (o(), i("li", {
           class: "mc-breadcrumb__item",
-          key: `breadcrumb-${u}`
+          key: `breadcrumb-${p}`
         }, [
           w(ce, {
             href: l.href,
             router: l.router,
-            appearance: i.appearance,
+            appearance: n.appearance,
             inline: "",
             class: g({
-              "mc-breadcrumb__current": t(u)
+              "mc-breadcrumb__current": t(p)
             }),
-            "aria-current": t(u) ? "page" : void 0
+            "aria-current": t(p) ? "page" : void 0
           }, {
             default: M(() => [
               q(b(l.label), 1)
@@ -132,7 +132,7 @@ const le = /* @__PURE__ */ $({
           s = "0 0 32 32";
       }
       return s;
-    }), i = v(() => {
+    }), n = v(() => {
       let s;
       switch (e.size) {
         case "s":
@@ -146,11 +146,11 @@ const le = /* @__PURE__ */ $({
       }
       return s;
     });
-    return (s, l) => (o(), n("div", {
+    return (s, l) => (o(), i("div", {
       class: g(["mc-loader", a.value])
     }, [
       d("span", me, [
-        (o(), n("svg", {
+        (o(), i("svg", {
           class: "mc-loader__icon",
           xmlns: "http://www.w3.org/2000/svg",
           viewBox: t.value,
@@ -160,11 +160,11 @@ const le = /* @__PURE__ */ $({
             class: "mc-loader__path",
             cx: "50%",
             cy: "50%",
-            r: i.value
+            r: n.value
           }, null, 8, ve)
         ], 8, _e))
       ]),
-      s.text ? (o(), n("p", be, b(s.text), 1)) : h("", !0)
+      s.text ? (o(), i("p", be, b(s.text), 1)) : h("", !0)
     ], 2));
   }
 }), E = /* @__PURE__ */ m(fe, [["__scopeId", "data-v-998c550b"]]), he = ["disabled", "type"], $e = {
@@ -200,32 +200,32 @@ const le = /* @__PURE__ */ $({
       "mc-button--outlined": e.outlined,
       "mc-button--icon-only": e.iconPosition == "only"
     }));
-    return (t, i) => (o(), n("button", {
+    return (t, n) => (o(), i("button", {
       class: g(["mc-button", a.value]),
       disabled: t.disabled,
       type: t.type
     }, [
-      t.$slots.icon && t.iconPosition == "left" && !t.isLoading ? (o(), n("span", $e, [
+      t.$slots.icon && t.iconPosition == "left" && !t.isLoading ? (o(), i("span", $e, [
         k(t.$slots, "icon", {}, void 0, !0)
       ])) : h("", !0),
-      t.isLoading ? (o(), n("span", ge, [
+      t.isLoading ? (o(), i("span", ge, [
         w(E, {
           style: { color: "currentColor" },
           size: "s"
         })
       ])) : h("", !0),
-      t.$slots.icon && t.iconPosition == "only" ? (o(), n("span", ye, [
+      t.$slots.icon && t.iconPosition == "only" ? (o(), i("span", ye, [
         k(t.$slots, "icon", {}, void 0, !0)
-      ])) : (o(), n("span", {
+      ])) : (o(), i("span", {
         key: 3,
         class: "mc-button__label",
         style: H({ visibility: t.isLoading ? "hidden" : "visible" })
       }, [
         k(t.$slots, "default", {}, () => [
-          i[0] || (i[0] = q("Button Label", -1))
+          n[0] || (n[0] = q("Button Label", -1))
         ], !0)
       ], 4)),
-      t.$slots.icon && t.iconPosition == "right" && !t.isLoading ? (o(), n("span", ke, [
+      t.$slots.icon && t.iconPosition == "right" && !t.isLoading ? (o(), i("span", ke, [
         k(t.$slots, "icon", {}, void 0, !0)
       ])) : h("", !0)
     ], 10, he));
@@ -246,11 +246,11 @@ const le = /* @__PURE__ */ $({
   setup(r, { emit: e }) {
     const a = r, t = v(() => ({
       "is-invalid": a.isInvalid
-    })), i = v(() => ({
+    })), n = v(() => ({
       "mc-checkbox--indented": a.indented
     })), s = e;
-    return (l, u) => (o(), n("div", {
-      class: g(["mc-checkbox", i.value])
+    return (l, p) => (o(), i("div", {
+      class: g(["mc-checkbox", n.value])
     }, [
       d("input", I({
         id: l.id,
@@ -262,9 +262,9 @@ const le = /* @__PURE__ */ $({
         disabled: l.disabled,
         "aria-invalid": l.isInvalid
       }, l.$attrs, {
-        onChange: u[0] || (u[0] = (p) => s("update:modelValue", p.target.checked))
+        onChange: p[0] || (p[0] = (u) => s("update:modelValue", u.target.checked))
       }), null, 16, Ve),
-      l.label ? (o(), n("label", {
+      l.label ? (o(), i("label", {
         key: 0,
         for: l.id,
         class: "mc-checkbox__label"
@@ -284,33 +284,33 @@ const le = /* @__PURE__ */ $({
     const a = r, t = z([]);
     T(
       () => a.modelValue,
-      (p) => {
-        t.value = p || [];
+      (u) => {
+        t.value = u || [];
       },
       { immediate: !0 }
     );
-    const i = (p, _) => {
+    const n = (u, _) => {
       let c = [...t.value];
-      p && !c.includes(_) ? c.push(_) : c = c.filter((f) => f !== _), u("update:modelValue", c), t.value = c;
+      u && !c.includes(_) ? c.push(_) : c = c.filter((f) => f !== _), p("update:modelValue", c), t.value = c;
     }, s = v(() => ({
       "mc-field__container--inline": a.inline
     })), l = v(() => ({
       "mc-field__container--inline__item": a.inline
-    })), u = e;
-    return (p, _) => (o(), n("div", {
+    })), p = e;
+    return (u, _) => (o(), i("div", {
       class: g(["mc-field__container", s.value])
     }, [
-      (o(!0), n(S, null, P(p.options, (c) => (o(), B(Ce, {
+      (o(!0), i(P, null, D(u.options, (c) => (o(), B(Ce, {
         id: c.id,
         key: c.id,
         label: c.label,
         "is-invalid": c.isInvalid,
-        name: p.name,
+        name: u.name,
         class: g(["mc-field__item", l.value]),
-        "model-value": p.modelValue ? p.modelValue.includes(c.value) : void 0,
+        "model-value": u.modelValue ? u.modelValue.includes(c.value) : void 0,
         disabled: c.disabled,
         indented: c.indented,
-        "onUpdate:modelValue": (f) => i(f, c.value)
+        "onUpdate:modelValue": (f) => n(f, c.value)
       }, null, 8, ["id", "label", "is-invalid", "name", "class", "model-value", "disabled", "indented", "onUpdate:modelValue"]))), 128))
     ], 2));
   }
@@ -336,7 +336,7 @@ const le = /* @__PURE__ */ $({
     const e = r, a = v(() => ({
       [`mc-circular-progressbar--${e.size}`]: e.size && e.size != "l"
     }));
-    return (t, i) => (o(), n("div", {
+    return (t, n) => (o(), i("div", {
       class: g(["mc-circular-progressbar", a.value]),
       role: "progressbar",
       style: H(`--progress-value: ${t.value};`),
@@ -344,7 +344,7 @@ const le = /* @__PURE__ */ $({
       "aria-valuemin": 0,
       "aria-valuemax": 100
     }, [
-      i[1] || (i[1] = d("svg", {
+      n[1] || (n[1] = d("svg", {
         class: "mc-circular-progressbar__line",
         xmlns: "http://www.w3.org/2000/svg",
         "aria-hidden": "true",
@@ -363,13 +363,13 @@ const le = /* @__PURE__ */ $({
           r: "46"
         })
       ], -1)),
-      t.type === "percentage" ? (o(), n("div", Le, [
+      t.type === "percentage" ? (o(), i("div", Le, [
         d("p", je, b(t.value), 1),
-        i[0] || (i[0] = d("p", { class: "mc-circular-progressbar__unit" }, "%", -1))
+        n[0] || (n[0] = d("p", { class: "mc-circular-progressbar__unit" }, "%", -1))
       ])) : h("", !0),
-      t.type === "content" ? (o(), n("div", Oe, [
+      t.type === "content" ? (o(), i("div", Oe, [
         d("p", Te, b(t.contentValue), 1),
-        t.additionalInfo ? (o(), n("p", Se, b(t.additionalInfo), 1)) : h("", !0)
+        t.additionalInfo ? (o(), i("p", Se, b(t.additionalInfo), 1)) : h("", !0)
       ])) : h("", !0)
     ], 14, ze));
   }
@@ -387,7 +387,7 @@ const le = /* @__PURE__ */ $({
     const e = r, a = v(() => ({
       [`mc-callout--${e.appearance}`]: e.appearance && e.appearance != "standard"
     }));
-    return (t, i) => (o(), n("section", {
+    return (t, n) => (o(), i("section", {
       class: g(["mc-callout", a.value]),
       role: "status"
     }, [
@@ -397,7 +397,7 @@ const le = /* @__PURE__ */ $({
       d("div", qe, [
         d("h2", Fe, b(t.title), 1),
         d("p", Ae, b(t.description), 1),
-        t.$slots.footer ? (o(), n("div", Ne, [
+        t.$slots.footer ? (o(), i("div", Ne, [
           k(t.$slots, "footer", {}, void 0, !0)
         ])) : h("", !0)
       ])
@@ -412,7 +412,7 @@ const le = /* @__PURE__ */ $({
     const e = r, a = v(() => ({
       "ml-container--fluid": e.fluid
     }));
-    return (t, i) => (o(), n("div", {
+    return (t, n) => (o(), i("div", {
       class: g(["ml-container", a.value])
     }, [
       k(t.$slots, "default", {}, void 0, !0)
@@ -430,8 +430,8 @@ const le = /* @__PURE__ */ $({
     }
   }
 }, He = ["fill"];
-function Ke(r, e, a, t, i, s) {
-  return o(), n("svg", {
+function Ke(r, e, a, t, n, s) {
+  return o(), i("svg", {
     "aria-hidden": "true",
     fill: a.color,
     xmlns: "http://www.w3.org/2000/svg",
@@ -466,25 +466,25 @@ const A = /* @__PURE__ */ m(Ue, [["render", Ke]]), Ee = ["id", "value", "name",
     const a = r, t = v(() => ({
       [`mc-text-input--${a.size} mc-datepicker--${a.size}`]: a.size && a.size != "m",
       "is-invalid": a.isInvalid
-    })), i = z(a.modelValue), s = () => {
-      i.value = "", l("update:modelValue", "");
+    })), n = z(a.modelValue), s = () => {
+      n.value = "", l("update:modelValue", "");
     }, l = e;
-    return (u, p) => (o(), n("div", {
+    return (p, u) => (o(), i("div", {
       class: g(["mc-datepicker mc-text-input", t.value])
     }, [
       d("input", I({
-        id: u.id,
+        id: p.id,
         class: "mc-datepicker__control mc-text-input__control",
-        value: i.value,
+        value: n.value,
         type: "date",
-        name: u.name,
-        disabled: u.disabled,
-        "aria-invalid": u.isInvalid,
-        readonly: u.readonly
-      }, u.$attrs, {
-        onInput: p[0] || (p[0] = (_) => l("update:modelValue", _.target.value))
+        name: p.name,
+        disabled: p.disabled,
+        "aria-invalid": p.isInvalid,
+        readonly: p.readonly
+      }, p.$attrs, {
+        onInput: u[0] || (u[0] = (_) => l("update:modelValue", _.target.value))
       }), null, 16, Ee),
-      u.isClearable && i.value ? (o(), n("div", Qe, [
+      p.isClearable && n.value ? (o(), i("div", Qe, [
         d("button", {
           type: "button",
           class: "mc-controls-options__button",
@@ -494,7 +494,7 @@ const A = /* @__PURE__ */ m(Ue, [["render", Ke]]), Ee = ["id", "value", "name",
             class: "mc-controls-options__icon",
             "aria-hidden": "true"
           }),
-          d("span", Je, b(u.clearLabel), 1)
+          d("span", Je, b(p.clearLabel), 1)
         ])
       ])) : h("", !0)
     ], 2));
@@ -512,7 +512,7 @@ const A = /* @__PURE__ */ m(Ue, [["render", Ke]]), Ee = ["id", "value", "name",
       [`mc-divider-horizontal--${e.style}`]: e.style && e.style != "primary",
       [`mc-divider-horizontal--${e.size}`]: e.size && e.size != "s"
     }));
-    return (t, i) => (o(), n("div", Xe, [
+    return (t, n) => (o(), i("div", Xe, [
       d("div", {
         class: g(a.value)
       }, null, 2),
@@ -531,8 +531,8 @@ const A = /* @__PURE__ */ m(Ue, [["render", Ke]]), Ee = ["id", "value", "name",
     }
   }
 }, ea = ["fill"];
-function aa(r, e, a, t, i, s) {
-  return o(), n("svg", {
+function aa(r, e, a, t, n, s) {
+  return o(), i("svg", {
     "aria-hidden": "true",
     fill: a.color,
     xmlns: "http://www.w3.org/2000/svg",
@@ -558,8 +558,8 @@ const ta = /* @__PURE__ */ m(xe, [["render", aa]]), sa = {
     }
   }
 }, oa = ["fill"];
-function la(r, e, a, t, i, s) {
-  return o(), n("svg", {
+function la(r, e, a, t, n, s) {
+  return o(), i("svg", {
     "aria-hidden": "true",
     fill: a.color,
     xmlns: "http://www.w3.org/2000/svg",
@@ -590,7 +590,7 @@ const Q = /* @__PURE__ */ m(sa, [["render", la]]), na = ["disabled", "type"], ia
       "mc-button--ghost": e.ghost,
       "mc-button--outlined": e.outlined
     }));
-    return (t, i) => (o(), n("button", {
+    return (t, n) => (o(), i("button", {
       class: g(["mc-button mc-button--icon-button", a.value]),
       disabled: t.disabled,
       type: t.type
@@ -600,14 +600,14 @@ const Q = /* @__PURE__ */ m(sa, [["render", la]]), na = ["disabled", "type"], ia
       ])
     ], 10, na));
   }
-}), D = /* @__PURE__ */ m(ra, [["__scopeId", "data-v-abf78562"]]), da = ["aria-labelledby"], ca = /* @__PURE__ */ $({
+}), S = /* @__PURE__ */ m(ra, [["__scopeId", "data-v-abf78562"]]), da = ["aria-labelledby"], ca = /* @__PURE__ */ $({
   __name: "MOverlay",
   props: {
     isVisible: { type: Boolean },
     dialogLabel: {}
   },
   setup(r) {
-    return (e, a) => (o(), n("div", {
+    return (e, a) => (o(), i("div", {
       class: g(["mc-overlay", { "is-visible": e.isVisible }])
     }, [
       d("div", {
@@ -657,10 +657,10 @@ const Q = /* @__PURE__ */ m(sa, [["render", la]]), na = ["disabled", "type"], ia
         s("update:open", l);
       }
     );
-    const i = () => {
+    const n = () => {
       s("update:open", !1);
     }, s = e;
-    return (l, u) => (o(), B(J, {
+    return (l, p) => (o(), B(J, {
       "is-visible": l.open,
       dialogLabel: "drawerTitle"
     }, {
@@ -673,16 +673,16 @@ const Q = /* @__PURE__ */ m(sa, [["render", la]]), na = ["disabled", "type"], ia
           tabindex: "-1",
           "aria-hidden": !l.open
         }, l.$attrs, {
-          onKeydown: R(i, ["esc"])
+          onKeydown: R(n, ["esc"])
         }), [
           d("div", pa, [
             d("div", ma, [
-              l.back ? (o(), B(D, {
+              l.back ? (o(), B(S, {
                 key: 0,
                 class: "mc-drawer__back",
                 "aria-label": "Back",
                 ghost: "",
-                onClick: u[0] || (u[0] = (p) => s("back"))
+                onClick: p[0] || (p[0] = (u) => s("back"))
               }, {
                 icon: M(() => [
                   w(ta, { "aria-hidden": "true" })
@@ -690,11 +690,11 @@ const Q = /* @__PURE__ */ m(sa, [["render", la]]), na = ["disabled", "type"], ia
                 _: 1
               })) : h("", !0),
               d("h2", _a, b(l.title), 1),
-              w(D, {
+              w(S, {
                 class: "mc-drawer__close",
                 "aria-label": "Close",
                 ghost: "",
-                onClick: i
+                onClick: n
               }, {
                 icon: M(() => [
                   w(Q, { "aria-hidden": "true" })
@@ -704,11 +704,11 @@ const Q = /* @__PURE__ */ m(sa, [["render", la]]), na = ["disabled", "type"], ia
             ]),
             d("div", va, [
               d("div", ba, [
-                l.contentTitle ? (o(), n("h2", fa, b(l.contentTitle), 1)) : h("", !0),
+                l.contentTitle ? (o(), i("h2", fa, b(l.contentTitle), 1)) : h("", !0),
                 k(l.$slots, "default", {}, void 0, !0)
               ])
             ]),
-            l.$slots.footer ? (o(), n("div", ha, [
+            l.$slots.footer ? (o(), i("div", ha, [
               k(l.$slots, "footer", {}, void 0, !0)
             ])) : h("", !0)
           ])
@@ -738,15 +738,15 @@ const Q = /* @__PURE__ */ m(sa, [["render", la]]), na = ["disabled", "type"], ia
       "is-valid": e.isValid,
       "is-invalid": e.isInvalid
     }));
-    return (t, i) => (o(), n("div", ga, [
+    return (t, n) => (o(), i("div", ga, [
       d("label", {
         class: "mc-field__label",
         for: t.id
       }, [
         q(b(t.label) + " ", 1),
-        t.requirementText ? (o(), n("span", ka, "(" + b(t.requirementText) + ")", 1)) : h("", !0)
+        t.requirementText ? (o(), i("span", ka, "(" + b(t.requirementText) + ")", 1)) : h("", !0)
       ], 8, ya),
-      t.helpId && t.helpText ? (o(), n("span", {
+      t.helpId && t.helpText ? (o(), i("span", {
         key: 0,
         id: t.helpId,
         class: "mc-field__help"
@@ -754,7 +754,7 @@ const Q = /* @__PURE__ */ m(sa, [["render", la]]), na = ["disabled", "type"], ia
       d("div", Va, [
         k(t.$slots, "default", {}, void 0, !0)
       ]),
-      (t.isValid || t.isInvalid) && t.message ? (o(), n("span", {
+      (t.isValid || t.isInvalid) && t.message ? (o(), i("span", {
         key: 1,
         class: g(["mc-field__validation-message", a.value]),
         id: t.messageId
@@ -783,19 +783,19 @@ const Q = /* @__PURE__ */ m(sa, [["render", la]]), na = ["disabled", "type"], ia
       "is-valid": e.isValid,
       "is-invalid": e.isInvalid
     }));
-    return (t, i) => (o(), n("fieldset", Ca, [
+    return (t, n) => (o(), i("fieldset", Ca, [
       d("legend", {
         class: "mc-field__legend",
         for: t.id
       }, [
         q(b(t.legend) + " ", 1),
-        t.requirementText ? (o(), n("span", za, "(" + b(t.requirementText) + ")", 1)) : h("", !0)
+        t.requirementText ? (o(), i("span", za, "(" + b(t.requirementText) + ")", 1)) : h("", !0)
       ], 8, Ma),
-      t.helpText ? (o(), n("span", La, b(t.helpText), 1)) : h("", !0),
+      t.helpText ? (o(), i("span", La, b(t.helpText), 1)) : h("", !0),
       d("div", ja, [
         k(t.$slots, "default", {}, void 0, !0)
       ]),
-      (t.isValid || t.isInvalid) && t.message ? (o(), n("span", {
+      (t.isValid || t.isInvalid) && t.message ? (o(), i("span", {
         key: 1,
         class: g(["mc-field__validation-message", a.value])
       }, b(t.message), 3)) : h("", !0)
@@ -811,7 +811,7 @@ const Q = /* @__PURE__ */ m(sa, [["render", la]]), na = ["disabled", "type"], ia
     const e = r, a = v(() => ({
       [`mc-flag--${e.appearance}`]: e.appearance && e.appearance != "standard"
     }));
-    return (t, i) => (o(), n("div", {
+    return (t, n) => (o(), i("div", {
       class: g(["mc-flag", a.value])
     }, [
       d("span", Ta, b(t.label), 1)
@@ -824,7 +824,7 @@ const Q = /* @__PURE__ */ m(sa, [["render", la]]), na = ["disabled", "type"], ia
     text: {}
   },
   setup(r) {
-    return (e, a) => (o(), n("div", {
+    return (e, a) => (o(), i("div", {
       class: g(["mc-loading-loader", { "is-visible": e.isVisible }])
     }, [
       d("div", I({
@@ -871,10 +871,10 @@ const Q = /* @__PURE__ */ m(sa, [["render", la]]), na = ["disabled", "type"], ia
         s("update:open", l);
       }
     );
-    const i = () => {
+    const n = () => {
       s("update:open", !1);
     }, s = e;
-    return (l, u) => (o(), B(J, {
+    return (l, p) => (o(), B(J, {
       "is-visible": l.open,
       dialogLabel: "modalTitle"
     }, {
@@ -887,20 +887,20 @@ const Q = /* @__PURE__ */ m(sa, [["render", la]]), na = ["disabled", "type"], ia
           tabindex: "-1",
           "aria-hidden": !l.open
         }, l.$attrs, {
-          onKeydown: R(i, ["esc"])
+          onKeydown: R(n, ["esc"])
         }), [
           d("div", Fa, [
             d("header", Aa, [
-              l.$slots.icon ? (o(), n("span", Na, [
+              l.$slots.icon ? (o(), i("span", Na, [
                 k(l.$slots, "icon", {}, void 0, !0)
               ])) : h("", !0),
               d("h2", Ra, b(l.title), 1),
-              l.closable ? (o(), B(D, {
+              l.closable ? (o(), B(S, {
                 key: 1,
                 class: "mc-modal__close",
                 "aria-label": "Close",
                 ghost: "",
-                onClick: i
+                onClick: n
               }, {
                 icon: M(() => [
                   w(Q, { "aria-hidden": "true" })
@@ -912,7 +912,7 @@ const Q = /* @__PURE__ */ m(sa, [["render", la]]), na = ["disabled", "type"], ia
               d("p", null, b(l.description), 1),
               k(l.$slots, "default", {}, void 0, !0)
             ]),
-            l.$slots.footer ? (o(), n("footer", Ua, [
+            l.$slots.footer ? (o(), i("footer", Ua, [
               d("span", Ha, [
                 k(l.$slots, "link", {}, void 0, !0)
               ]),
@@ -936,7 +936,7 @@ const Q = /* @__PURE__ */ m(sa, [["render", la]]), na = ["disabled", "type"], ia
       [`mc-number-badge--${e.appearance}`]: e.appearance && e.appearance != "standard",
       [`mc-number-badge--${e.size}`]: e.size && e.size != "s"
     }));
-    return (t, i) => (o(), n("span", {
+    return (t, n) => (o(), i("span", {
       class: g(["mc-number-badge", a.value])
     }, b(t.label), 3));
   }
@@ -963,23 +963,23 @@ const Q = /* @__PURE__ */ m(sa, [["render", la]]), na = ["disabled", "type"], ia
       [`mc-select--${a.size}`]: a.size && a.size != "m",
       "mc-select--readonly": a.readonly,
       "is-invalid": a.isInvalid
-    })), i = e;
-    return (s, l) => (o(), n("select", I({
+    })), n = e;
+    return (s, l) => (o(), i("select", I({
       id: s.id,
       class: ["mc-select", t.value],
       name: s.name,
       value: s.modelValue,
       disabled: s.disabled
     }, s.$attrs, {
-      onChange: l[0] || (l[0] = (u) => i("update:modelValue", u.target.value))
+      onChange: l[0] || (l[0] = (p) => n("update:modelValue", p.target.value))
     }), [
-      s.placeholder ? (o(), n("option", Wa, " -- " + b(s.placeholder) + " -- ", 1)) : h("", !0),
-      (o(!0), n(S, null, P(s.options, (u, p) => (o(), n("option", I({
-        key: p,
-        value: u.value
-      }, { ref_for: !0 }, u.attributes, {
-        disabled: u.disabled
-      }), b(u.text), 17, Xa))), 128))
+      s.placeholder ? (o(), i("option", Wa, " -- " + b(s.placeholder) + " -- ", 1)) : h("", !0),
+      (o(!0), i(P, null, D(s.options, (p, u) => (o(), i("option", I({
+        key: u,
+        value: p.value
+      }, { ref_for: !0 }, p.attributes, {
+        disabled: p.disabled
+      }), b(p.text), 17, Xa))), 128))
     ], 16, Ja));
   }
 }), Za = /* @__PURE__ */ m(Ya, [["__scopeId", "data-v-68c735e4"]]), xa = {
@@ -994,8 +994,8 @@ const Q = /* @__PURE__ */ m(sa, [["render", la]]), na = ["disabled", "type"], ia
     }
   }
 }, et = ["fill"];
-function at(r, e, a, t, i, s) {
-  return o(), n("svg", {
+function at(r, e, a, t, n, s) {
+  return o(), i("svg", {
     "aria-hidden": "true",
     fill: a.color,
     xmlns: "http://www.w3.org/2000/svg",
@@ -1021,8 +1021,8 @@ const G = /* @__PURE__ */ m(xa, [["render", at]]), tt = {
     }
   }
 }, st = ["fill"];
-function ot(r, e, a, t, i, s) {
-  return o(), n("svg", {
+function ot(r, e, a, t, n, s) {
+  return o(), i("svg", {
     "aria-hidden": "true",
     fill: a.color,
     xmlns: "http://www.w3.org/2000/svg",
@@ -1058,32 +1058,32 @@ const U = /* @__PURE__ */ m(tt, [["render", ot]]), lt = {
   },
   emits: ["update:modelValue"],
   setup(r, { emit: e }) {
-    const a = r, t = e, i = z(a.modelValue);
-    T(i, (c) => {
+    const a = r, t = e, n = z(a.modelValue);
+    T(n, (c) => {
       c !== a.modelValue && t("update:modelValue", c);
     });
     const s = v(
-      () => a.options.findIndex((c) => c.value === i.value)
-    ), l = v(() => s.value === 0), u = v(
+      () => a.options.findIndex((c) => c.value === n.value)
+    ), l = v(() => s.value === 0), p = v(
       () => s.value === a.options.length - 1
-    ), p = () => {
+    ), u = () => {
       const c = a.options.findIndex(
-        (f) => f.value === i.value
+        (f) => f.value === n.value
       );
-      c > 0 && (i.value = a.options[c - 1].value, t("update:modelValue", a.options[c - 1].value));
+      c > 0 && (n.value = a.options[c - 1].value, t("update:modelValue", a.options[c - 1].value));
     }, _ = () => {
       const c = a.options.findIndex(
-        (f) => f.value === i.value
+        (f) => f.value === n.value
       );
-      c < a.options.length - 1 && (i.value = a.options[c + 1].value, t("update:modelValue", a.options[c + 1].value));
+      c < a.options.length - 1 && (n.value = a.options[c + 1].value, t("update:modelValue", a.options[c + 1].value));
     };
-    return (c, f) => (o(), n("nav", lt, [
-      c.compact ? (o(), B(D, {
+    return (c, f) => (o(), i("nav", lt, [
+      c.compact ? (o(), B(S, {
         key: 1,
         outlined: "",
         "aria-label": "Previous page",
         disabled: l.value,
-        onClick: p
+        onClick: u
       }, {
         icon: M(() => [
           w(G)
@@ -1094,32 +1094,32 @@ const U = /* @__PURE__ */ m(tt, [["render", ot]]), lt = {
         "icon-position": "only",
         "aria-label": "Previous page",
         disabled: l.value,
-        onClick: p
+        onClick: u
       }, {
         icon: M(() => [
           w(G)
         ]),
         _: 1
       }, 8, ["disabled"])),
-      c.compact ? h("", !0) : (o(), n("div", nt, [
+      c.compact ? h("", !0) : (o(), i("div", nt, [
         w(Za, {
           class: "mc-pagination__select",
           id: c.id,
-          modelValue: i.value,
+          modelValue: n.value,
           "onUpdate:modelValue": [
-            f[0] || (f[0] = (C) => i.value = C),
+            f[0] || (f[0] = (C) => n.value = C),
             f[1] || (f[1] = (C) => t("update:modelValue", Number(C)))
           ],
           options: c.options,
           "aria-label": c.selectLabel
         }, null, 8, ["id", "modelValue", "options", "aria-label"])
       ])),
-      c.compact ? (o(), n("span", it, b(c.options.find((C) => C.value === i.value)?.text), 1)) : h("", !0),
-      c.compact ? (o(), B(D, {
+      c.compact ? (o(), i("span", it, b(c.options.find((C) => C.value === n.value)?.text), 1)) : h("", !0),
+      c.compact ? (o(), B(S, {
         key: 5,
         outlined: "",
         "aria-label": "Next page",
-        disabled: u.value,
+        disabled: p.value,
         onClick: _
       }, {
         icon: M(() => [
@@ -1130,7 +1130,7 @@ const U = /* @__PURE__ */ m(tt, [["render", ot]]), lt = {
         key: 4,
         "icon-position": "only",
         "aria-label": "Next page",
-        disabled: u.value,
+        disabled: p.value,
         onClick: _
       }, {
         icon: M(() => [
@@ -1161,19 +1161,19 @@ const U = /* @__PURE__ */ m(tt, [["render", ot]]), lt = {
   setup(r, { emit: e }) {
     const a = r, t = v(() => ({
       "is-invalid": a.isInvalid
-    })), i = z(a.modelValue), s = z(!1), l = () => {
-      i.value = "", c("update:modelValue", "");
-    }, u = () => {
+    })), n = z(a.modelValue), s = z(!1), l = () => {
+      n.value = "", c("update:modelValue", "");
+    }, p = () => {
       s.value = !s.value;
-    }, p = v(() => s.value ? "text" : "password"), _ = v(() => s.value ? "true" : "false"), c = e;
-    return (f, C) => (o(), n("div", {
+    }, u = v(() => s.value ? "text" : "password"), _ = v(() => s.value ? "true" : "false"), c = e;
+    return (f, C) => (o(), i("div", {
       class: g(["mc-password-input mc-text-input", t.value])
     }, [
       K(d("input", I({
         class: "mc-password-input__control mc-text-input__control",
-        "onUpdate:modelValue": C[0] || (C[0] = (y) => i.value = y),
+        "onUpdate:modelValue": C[0] || (C[0] = (y) => n.value = y),
         id: f.id,
-        type: p.value,
+        type: u.value,
         name: f.name,
         placeholder: f.placeholder,
         disabled: f.disabled,
@@ -1182,9 +1182,9 @@ const U = /* @__PURE__ */ m(tt, [["render", ot]]), lt = {
       }, f.$attrs, {
         onInput: C[1] || (C[1] = (y) => c("update:modelValue", y.target.value))
       }), null, 16, dt), [
-        [ee, i.value]
+        [ee, n.value]
       ]),
-      f.isClearable && i.value ? (o(), n("div", ct, [
+      f.isClearable && n.value ? (o(), i("div", ct, [
         d("button", {
           class: "mc-controls-options__button",
           onClick: l
@@ -1201,7 +1201,7 @@ const U = /* @__PURE__ */ m(tt, [["render", ot]]), lt = {
         role: "switch",
         "aria-checked": _.value,
         disabled: f.disabled,
-        onClick: u,
+        onClick: p,
         size: "s",
         ghost: ""
       }, {
@@ -1227,7 +1227,7 @@ const U = /* @__PURE__ */ m(tt, [["render", ot]]), lt = {
   setup(r, { emit: e }) {
     const a = r, t = v(() => ({
       "is-invalid": a.isInvalid
-    })), i = e, s = z(Array(a.length).fill("")), l = z([]), u = (y, V) => {
+    })), n = e, s = z(Array(a.length).fill("")), l = z([]), p = (y, V) => {
       l.value[V] = y;
     };
     T(
@@ -1238,29 +1238,29 @@ const U = /* @__PURE__ */ m(tt, [["render", ot]]), lt = {
       },
       { immediate: !0 }
     );
-    const p = (y) => {
+    const u = (y) => {
       ae(() => l.value[y]?.focus());
     }, _ = (y, V) => {
       const O = y.target.value.replace(/\D/g, "");
-      O ? (s.value[V] = O[0], i("update:modelValue", s.value.join("")), V + 1 < a.length && p(V + 1)) : (s.value[V] = "", i("update:modelValue", s.value.join("")));
+      O ? (s.value[V] = O[0], n("update:modelValue", s.value.join("")), V + 1 < a.length && u(V + 1)) : (s.value[V] = "", n("update:modelValue", s.value.join("")));
     }, c = (y, V) => {
-      y.key === "ArrowLeft" && V > 0 ? p(V - 1) : y.key === "ArrowRight" && V < a.length - 1 ? p(V + 1) : y.key === "Backspace" && f(y, V);
+      y.key === "ArrowLeft" && V > 0 ? u(V - 1) : y.key === "ArrowRight" && V < a.length - 1 ? u(V + 1) : y.key === "Backspace" && f(y, V);
     }, f = (y, V) => {
-      s.value[V] === "" && V > 0 && (s.value[V - 1] = "", i("update:modelValue", s.value.join("")), p(V - 1));
+      s.value[V] === "" && V > 0 && (s.value[V - 1] = "", n("update:modelValue", s.value.join("")), u(V - 1));
     }, C = (y) => {
       y.preventDefault();
       const O = (y.clipboardData?.getData("text") ?? "").replace(/\D/g, "").slice(0, a.length).split("");
-      s.value = Array.from({ length: a.length }, (L, j) => O[j] ?? ""), i("update:modelValue", s.value.join("")), p(Math.min(O.length, a.length - 1));
+      s.value = Array.from({ length: a.length }, (L, j) => O[j] ?? ""), n("update:modelValue", s.value.join("")), u(Math.min(O.length, a.length - 1));
     };
-    return (y, V) => (o(), n("div", {
+    return (y, V) => (o(), i("div", {
       class: g(["mc-pincode-input", t.value]),
       onPaste: C
     }, [
-      (o(!0), n(S, null, P(s.value, (O, L) => (o(), n("input", I({
+      (o(!0), i(P, null, D(s.value, (O, L) => (o(), i("input", I({
         key: L,
         id: `pincodeItem${L}`,
         ref_for: !0,
-        ref: (j) => u(j, L),
+        ref: (j) => p(j, L),
         type: "text",
         inputmode: "numeric",
         maxlength: "1",
@@ -1290,7 +1290,7 @@ const U = /* @__PURE__ */ m(tt, [["render", ot]]), lt = {
     const e = r, a = v(() => ({
       [`mc-linear-progressbar-buffer--${e.size}`]: e.size && e.size != "m"
     }));
-    return (t, i) => (o(), n("div", {
+    return (t, n) => (o(), i("div", {
       class: g(["mc-linear-progressbar-buffer", a.value])
     }, [
       d("div", I({
@@ -1309,7 +1309,7 @@ const U = /* @__PURE__ */ m(tt, [["render", ot]]), lt = {
     value: { default: 0 }
   },
   setup(r) {
-    return (e, a) => (o(), n("div", ht, [
+    return (e, a) => (o(), i("div", ht, [
       d("div", I({
         class: "mc-linear-progressbar-percentage__indicator",
         role: "progressbar",
@@ -1339,8 +1339,8 @@ const U = /* @__PURE__ */ m(tt, [["render", ot]]), lt = {
     }
   }
 }, Vt = ["fill"];
-function It(r, e, a, t, i, s) {
-  return o(), n("svg", {
+function It(r, e, a, t, n, s) {
+  return o(), i("svg", {
     "aria-hidden": "true",
     fill: a.color,
     xmlns: "http://www.w3.org/2000/svg",
@@ -1366,8 +1366,8 @@ const Bt = /* @__PURE__ */ m(wt, [["render", It]]), Ct = {
     }
   }
 }, Mt = ["fill"];
-function zt(r, e, a, t, i, s) {
-  return o(), n("svg", {
+function zt(r, e, a, t, n, s) {
+  return o(), i("svg", {
     "aria-hidden": "true",
     fill: a.color,
     xmlns: "http://www.w3.org/2000/svg",
@@ -1401,20 +1401,20 @@ const Lt = /* @__PURE__ */ m(Ct, [["render", zt]]), jt = ["id", "name", "disable
   setup(r, { emit: e }) {
     const a = r, t = z(a.modelValue);
     T(t, (_) => {
-      _ !== a.modelValue && p("update:modelValue", _);
+      _ !== a.modelValue && u("update:modelValue", _);
     });
-    const i = v(() => ({
+    const n = v(() => ({
       [`mc-quantity-selector--${a.size}`]: a.size && a.size != "m",
       "is-invalid": a.isInvalid
     })), s = () => {
       t.value + a.step <= a.max ? t.value += a.step : t.value = a.max;
     }, l = () => {
       t.value - a.step > a.min ? t.value -= a.step : t.value = a.min;
-    }, u = (_) => {
-      t.value = _, t.value > a.max && (t.value = a.max), t.value <= a.min && (t.value = a.min), p("update:modelValue", t.value);
-    }, p = e;
-    return (_, c) => (o(), n("div", {
-      class: g(["mc-quantity-selector", i.value])
+    }, p = (_) => {
+      t.value = _, t.value > a.max && (t.value = a.max), t.value <= a.min && (t.value = a.min), u("update:modelValue", t.value);
+    }, u = e;
+    return (_, c) => (o(), i("div", {
+      class: g(["mc-quantity-selector", n.value])
     }, [
       K(d("input", I({
         id: _.id,
@@ -1432,11 +1432,11 @@ const Lt = /* @__PURE__ */ m(Ct, [["render", zt]]), jt = ["id", "name", "disable
         "aria-valuemax": _.max,
         "aria-valuenow": t.value
       }, _.$attrs, {
-        onChange: c[1] || (c[1] = (f) => u(Number(f.target.value)))
+        onChange: c[1] || (c[1] = (f) => p(Number(f.target.value)))
       }), null, 16, jt), [
         [te, t.value]
       ]),
-      _.readonly ? h("", !0) : (o(), n("button", {
+      _.readonly ? h("", !0) : (o(), i("button", {
         key: 0,
         type: "button",
         "aria-controls": _.id,
@@ -1450,7 +1450,7 @@ const Lt = /* @__PURE__ */ m(Ct, [["render", zt]]), jt = ["id", "name", "disable
         ]),
         d("span", St, b(_.incrementlabel), 1)
       ], 8, Ot)),
-      _.readonly ? h("", !0) : (o(), n("button", {
+      _.readonly ? h("", !0) : (o(), i("button", {
         key: 1,
         type: "button",
         "aria-controls": _.id,
@@ -1480,8 +1480,8 @@ const Lt = /* @__PURE__ */ m(Ct, [["render", zt]]), jt = ["id", "name", "disable
   setup(r, { emit: e }) {
     const a = r, t = v(() => ({
       "is-invalid": a.isInvalid
-    })), i = e;
-    return (s, l) => (o(), n("div", At, [
+    })), n = e;
+    return (s, l) => (o(), i("div", At, [
       d("input", I({
         id: s.id,
         type: "radio",
@@ -1491,9 +1491,9 @@ const Lt = /* @__PURE__ */ m(Ct, [["render", zt]]), jt = ["id", "name", "disable
         disabled: s.disabled,
         "aria-invalid": s.isInvalid
       }, s.$attrs, {
-        onChange: l[0] || (l[0] = (u) => i("update:modelValue", u.target.checked))
+        onChange: l[0] || (l[0] = (p) => n("update:modelValue", p.target.checked))
       }), null, 16, Nt),
-      s.label ? (o(), n("label", {
+      s.label ? (o(), i("label", {
         key: 0,
         for: s.id,
         class: "mc-radio__label"
@@ -1513,22 +1513,22 @@ const Lt = /* @__PURE__ */ m(Ct, [["render", zt]]), jt = ["id", "name", "disable
   setup(r, { emit: e }) {
     const a = r, t = v(() => ({
       "mc-field__container--inline": a.inline
-    })), i = v(() => ({
+    })), n = v(() => ({
       "mc-field__container--inline__item": a.inline
     })), s = e;
-    return (l, u) => (o(), n("div", {
+    return (l, p) => (o(), i("div", {
       class: g(["mc-field__container", t.value])
     }, [
-      (o(!0), n(S, null, P(l.options, (p) => (o(), B(Ut, {
-        id: p.id,
-        key: p.id,
-        label: p.label,
+      (o(!0), i(P, null, D(l.options, (u) => (o(), B(Ut, {
+        id: u.id,
+        key: u.id,
+        label: u.label,
         "is-invalid": l.isInvalid,
         name: l.name,
-        class: g(["mc-field__item", i.value]),
-        "model-value": l.modelValue === p.value,
-        disabled: p.disabled,
-        "onUpdate:modelValue": (_) => _ ? s("update:modelValue", p.value) : null
+        class: g(["mc-field__item", n.value]),
+        "model-value": l.modelValue === u.value,
+        disabled: u.disabled,
+        "onUpdate:modelValue": (_) => _ ? s("update:modelValue", u.value) : null
       }, null, 8, ["id", "label", "is-invalid", "name", "class", "model-value", "disabled", "onUpdate:modelValue"]))), 128))
     ], 2));
   }
@@ -1543,7 +1543,7 @@ const Lt = /* @__PURE__ */ m(Ct, [["render", zt]]), jt = ["id", "name", "disable
       [`mc-status-dot--${e.status}`]: e.status && e.status != "info",
       [`mc-status-dot--${e.size}`]: e.size && e.size != "m"
     }));
-    return (t, i) => (o(), n("span", {
+    return (t, n) => (o(), i("span", {
       class: g(["mc-status-dot", a.value])
     }, null, 2));
   }
@@ -1557,7 +1557,7 @@ const Lt = /* @__PURE__ */ m(Ct, [["render", zt]]), jt = ["id", "name", "disable
     const e = r, a = v(() => ({
       [`mc-status-badge--${e.status}`]: e.status && e.status != "info"
     }));
-    return (t, i) => (o(), n("div", {
+    return (t, n) => (o(), i("div", {
       class: g(["mc-status-badge", a.value])
     }, [
       w(Et, { status: t.status }, null, 8, ["status"]),
@@ -1576,8 +1576,8 @@ const Lt = /* @__PURE__ */ m(Ct, [["render", zt]]), jt = ["id", "name", "disable
     }
   }
 }, Xt = ["fill"];
-function Yt(r, e, a, t, i, s) {
-  return o(), n("svg", {
+function Yt(r, e, a, t, n, s) {
+  return o(), i("svg", {
     "aria-hidden": "true",
     fill: a.color,
     xmlns: "http://www.w3.org/2000/svg",
@@ -1603,8 +1603,8 @@ const W = /* @__PURE__ */ m(Wt, [["render", Yt]]), Zt = {
     }
   }
 }, xt = ["fill"];
-function es(r, e, a, t, i, s) {
-  return o(), n("svg", {
+function es(r, e, a, t, n, s) {
+  return o(), i("svg", {
     "aria-hidden": "true",
     fill: a.color,
     xmlns: "http://www.w3.org/2000/svg",
@@ -1630,8 +1630,8 @@ const X = /* @__PURE__ */ m(Zt, [["render", es]]), as = {
     }
   }
 }, ts = ["fill"];
-function ss(r, e, a, t, i, s) {
-  return o(), n("svg", {
+function ss(r, e, a, t, n, s) {
+  return o(), i("svg", {
     "aria-hidden": "true",
     fill: a.color,
     xmlns: "http://www.w3.org/2000/svg",
@@ -1657,8 +1657,8 @@ const Y = /* @__PURE__ */ m(as, [["render", ss]]), os = {
     }
   }
 }, ls = ["fill"];
-function ns(r, e, a, t, i, s) {
-  return o(), n("svg", {
+function ns(r, e, a, t, n, s) {
+  return o(), i("svg", {
     "aria-hidden": "true",
     fill: a.color,
     xmlns: "http://www.w3.org/2000/svg",
@@ -1684,8 +1684,8 @@ const Z = /* @__PURE__ */ m(os, [["render", ns]]), is = {
     }
   }
 }, rs = ["fill"];
-function ds(r, e, a, t, i, s) {
-  return o(), n("svg", {
+function ds(r, e, a, t, n, s) {
+  return o(), i("svg", {
     "aria-hidden": "true",
     fill: a.color,
     xmlns: "http://www.w3.org/2000/svg",
@@ -1714,7 +1714,7 @@ const x = /* @__PURE__ */ m(is, [["render", ds]]), cs = { class: "mc-status-noti
   setup(r, { emit: e }) {
     const a = r, t = v(() => ({
       [`mc-status-notification--${a.status}`]: a.status && a.status != "info"
-    })), i = v(() => {
+    })), n = v(() => {
       switch (a.status) {
         case "success":
           return x;
@@ -1727,35 +1727,40 @@ const x = /* @__PURE__ */ m(is, [["render", ds]]), cs = { class: "mc-status-noti
           return X;
       }
     }), s = e;
-    return (l, u) => (o(), n("section", {
+    return (l, p) => (o(), i("section", {
       class: g(["mc-status-notification", t.value]),
       role: "status"
     }, [
-      (o(), B(F(i.value), {
+      (o(), B(F(n.value), {
         class: "mc-status-notification__icon",
         "aria-hidden": "true"
       })),
       d("div", cs, [
         d("h2", us, b(l.title), 1),
         d("p", ps, b(l.description), 1),
-        l.$slots.footer ? (o(), n("div", ms, [
+        l.$slots.footer ? (o(), i("div", ms, [
           k(l.$slots, "footer", {}, void 0, !0)
         ])) : h("", !0)
       ]),
-      l.closable ? (o(), n("button", {
+      l.closable ? (o(), B(S, {
         key: 0,
         class: "mc-status-notification-closable__close",
-        onClick: u[0] || (u[0] = (p) => s("close"))
-      }, [
-        w(W, {
-          class: "mc-status-notification-closable__icon",
-          "aria-hidden": "true"
-        }),
-        u[1] || (u[1] = d("span", { class: "mc-status-notification-closable__text" }, "Close", -1))
-      ])) : h("", !0)
+        size: "s",
+        ghost: "",
+        "aria-label": "Close",
+        onClick: p[0] || (p[0] = (u) => s("close"))
+      }, {
+        icon: M(() => [
+          w(W, {
+            class: "mc-button__icon",
+            "aria-hidden": "true"
+          })
+        ]),
+        _: 1
+      })) : h("", !0)
     ], 2));
   }
-}), ho = /* @__PURE__ */ m(_s, [["__scopeId", "data-v-457733a1"]]), vs = ["aria-label"], bs = ["aria-selected", "onClick"], fs = {
+}), ho = /* @__PURE__ */ m(_s, [["__scopeId", "data-v-2c7c85ad"]]), vs = ["aria-label"], bs = ["aria-selected", "onClick"], fs = {
   key: 0,
   class: "mc-tabs__icon"
 }, hs = { class: "mc-tabs__label" }, $s = /* @__PURE__ */ $({
@@ -1771,18 +1776,18 @@ const x = /* @__PURE__ */ m(is, [["render", ds]]), cs = { class: "mc-status-noti
   setup(r, { emit: e }) {
     const a = r, t = v(() => ({
       "mc-tabs--centered": a.centered
-    })), i = z(a.modelValue), s = (p) => {
-      a.tabs[p].disabled || p !== i.value && (i.value = p, u("update:modelValue", p));
-    }, l = (p) => i.value === p, u = e;
-    return (p, _) => (o(), n("nav", {
+    })), n = z(a.modelValue), s = (u) => {
+      a.tabs[u].disabled || u !== n.value && (n.value = u, p("update:modelValue", u));
+    }, l = (u) => n.value === u, p = e;
+    return (u, _) => (o(), i("nav", {
       class: g(["mc-tabs", t.value])
     }, [
       d("ul", {
         role: "tablist",
         class: "mc-tabs__list",
-        "aria-label": p.description
+        "aria-label": u.description
       }, [
-        (o(!0), n(S, null, P(p.tabs, (c, f) => (o(), n("li", {
+        (o(!0), i(P, null, D(u.tabs, (c, f) => (o(), i("li", {
           key: `tab-${f}`,
           role: "presentation",
           class: "mc-tabs__item"
@@ -1799,7 +1804,7 @@ const x = /* @__PURE__ */ m(is, [["render", ds]]), cs = { class: "mc-status-noti
             type: "button",
             onClick: (C) => s(f)
           }, [
-            c.icon ? (o(), n("span", fs, [
+            c.icon ? (o(), i("span", fs, [
               (o(), B(F(c.icon)))
             ])) : h("", !0),
             d("div", hs, [
@@ -1808,7 +1813,7 @@ const x = /* @__PURE__ */ m(is, [["render", ds]]), cs = { class: "mc-status-noti
           ], 10, bs)
         ]))), 128))
       ], 8, vs),
-      p.divider ? (o(), B(Ze, { key: 0 })) : h("", !0)
+      u.divider ? (o(), B(Ze, { key: 0 })) : h("", !0)
     ], 2));
   }
 }), $o = /* @__PURE__ */ m($s, [["__scopeId", "data-v-3919f834"]]), gs = ["for"], ys = ["id", "name", "checked", "disabled"], ks = { class: "mc-tag__label" }, ws = ["disabled"], Vs = { class: "mc-tag__label" }, Is = ["disabled"], Bs = { class: "mc-tag__label" }, Cs = { class: "mc-tag__label" }, Ms = { class: "mc-tag__label" }, zs = /* @__PURE__ */ $({
@@ -1829,8 +1834,8 @@ const x = /* @__PURE__ */ m(is, [["render", ds]]), cs = { class: "mc-status-noti
     const a = r, t = v(() => ({
       [`mc-tag-${a.type}`]: a.type && a.type != "informative",
       [`mc-tag--${a.size}`]: a.size && a.size != "m"
-    })), i = e;
-    return (s, l) => s.type === "selectable" ? (o(), n("label", {
+    })), n = e;
+    return (s, l) => s.type === "selectable" ? (o(), i("label", {
       key: 0,
       for: s.id,
       class: g(["mc-tag", t.value])
@@ -1842,17 +1847,17 @@ const x = /* @__PURE__ */ m(is, [["render", ds]]), cs = { class: "mc-status-noti
         name: s.name,
         checked: s.modelValue,
         disabled: s.disabled,
-        onChange: l[0] || (l[0] = (u) => i("update:modelValue", u.target.checked))
+        onChange: l[0] || (l[0] = (p) => n("update:modelValue", p.target.checked))
       }, s.$attrs), null, 16, ys),
       d("span", ks, b(s.label), 1)
-    ], 10, gs)) : s.type === "interactive" ? (o(), n("button", I({
+    ], 10, gs)) : s.type === "interactive" ? (o(), i("button", I({
       key: 1,
       class: ["mc-tag", t.value],
       type: "button",
       disabled: s.disabled
     }, s.$attrs), [
       d("span", Vs, b(s.label), 1)
-    ], 16, ws)) : s.type === "contextualised" ? (o(), n("button", I({
+    ], 16, ws)) : s.type === "contextualised" ? (o(), i("button", I({
       key: 2,
       class: ["mc-tag", t.value],
       type: "button",
@@ -1864,7 +1869,7 @@ const x = /* @__PURE__ */ m(is, [["render", ds]]), cs = { class: "mc-status-noti
         size: s.size === "l" ? "m" : void 0
       }, null, 8, ["label", "size"]),
       d("span", Bs, b(s.label), 1)
-    ], 16, Is)) : s.type === "removable" ? (o(), n("span", I({
+    ], 16, Is)) : s.type === "removable" ? (o(), i("span", I({
       key: 3,
       class: ["mc-tag", t.value]
     }, s.$attrs), [
@@ -1872,7 +1877,7 @@ const x = /* @__PURE__ */ m(is, [["render", ds]]), cs = { class: "mc-status-noti
       d("button", {
         class: "mc-tag-removable__remove",
         type: "button",
-        onClick: l[1] || (l[1] = (u) => s.id && i("remove-tag", s.id))
+        onClick: l[1] || (l[1] = (p) => s.id && n("remove-tag", s.id))
       }, [
         w(A, {
           class: "mc-tag-removable__icon",
@@ -1880,7 +1885,7 @@ const x = /* @__PURE__ */ m(is, [["render", ds]]), cs = { class: "mc-status-noti
         }),
         l[2] || (l[2] = d("span", { class: "mc-tag-removable__text" }, "removableLabel", -1))
       ])
-    ], 16)) : (o(), n("span", I({
+    ], 16)) : (o(), i("span", I({
       key: 4,
       class: ["mc-tag", t.value]
     }, s.$attrs), [
@@ -1905,8 +1910,8 @@ const x = /* @__PURE__ */ m(is, [["render", ds]]), cs = { class: "mc-status-noti
   setup(r, { emit: e }) {
     const a = r, t = v(() => ({
       "is-invalid": a.isInvalid
-    })), i = e;
-    return (s, l) => (o(), n("textarea", I({
+    })), n = e;
+    return (s, l) => (o(), i("textarea", I({
       id: s.id,
       class: ["mc-textarea", t.value],
       "aria-invalid": s.isInvalid,
@@ -1919,7 +1924,7 @@ const x = /* @__PURE__ */ m(is, [["render", ds]]), cs = { class: "mc-status-noti
       rows: s.rows,
       readonly: s.readonly
     }, s.$attrs, {
-      onInput: l[0] || (l[0] = (u) => i("update:modelValue", u.target.value))
+      onInput: l[0] || (l[0] = (p) => n("update:modelValue", p.target.value))
     }), null, 16, Ls));
   }
 }), yo = /* @__PURE__ */ m(js, [["__scopeId", "data-v-8184b69c"]]), Os = {
@@ -1948,13 +1953,13 @@ const x = /* @__PURE__ */ m(is, [["render", ds]]), cs = { class: "mc-status-noti
     const a = r, t = v(() => ({
       [`mc-text-input--${a.size}`]: a.size && a.size != "m",
       "is-invalid": a.isInvalid
-    })), i = () => {
+    })), n = () => {
       s("update:modelValue", "");
     }, s = e;
-    return (l, u) => (o(), n("div", {
+    return (l, p) => (o(), i("div", {
       class: g(["mc-text-input", t.value])
     }, [
-      l.$slots.icon ? (o(), n("span", Os, [
+      l.$slots.icon ? (o(), i("span", Os, [
         k(l.$slots, "icon", {}, void 0, !0)
       ])) : h("", !0),
       d("input", I({
@@ -1968,19 +1973,19 @@ const x = /* @__PURE__ */ m(is, [["render", ds]]), cs = { class: "mc-status-noti
         "aria-invalid": l.isInvalid,
         readonly: l.readonly
       }, l.$attrs, {
-        onInput: u[0] || (u[0] = (p) => s("update:modelValue", p.target.value))
+        onInput: p[0] || (p[0] = (u) => s("update:modelValue", u.target.value))
       }), null, 16, Ts),
-      l.isClearable && l.modelValue ? (o(), n("div", Ss, [
+      l.isClearable && l.modelValue ? (o(), i("div", Ss, [
         d("button", {
           type: "button",
           class: "mc-controls-options__button",
-          onClick: i
+          onClick: n
         }, [
           w(A, {
             class: "mc-controls-options__icon",
             "aria-hidden": "true"
           }),
-          u[1] || (u[1] = d("span", { class: "mc-controls-options__label" }, "{clearLabel}", -1))
+          p[1] || (p[1] = d("span", { class: "mc-controls-options__label" }, "{clearLabel}", -1))
         ])
       ])) : h("", !0)
     ], 2));
@@ -2005,7 +2010,7 @@ const x = /* @__PURE__ */ m(is, [["render", ds]]), cs = { class: "mc-status-noti
       "is-open": a.open,
       [`mc-toaster--${a.status}`]: a.status && a.status != "info",
       [`mc-toaster--${a.position}`]: a.position && a.position != "top"
-    })), i = v(() => {
+    })), n = v(() => {
       switch (a.status) {
         case "success":
           return x;
@@ -2026,36 +2031,36 @@ const x = /* @__PURE__ */ m(is, [["render", ds]]), cs = { class: "mc-status-noti
     );
     const s = () => {
       l("update:open", !1);
-    }, l = e, u = z(0);
-    let p = null, _ = null;
+    }, l = e, p = z(0);
+    let u = null, _ = null;
     return se(() => {
       if (a.timeout)
         if (a.progress) {
           const C = 100 / (a.timeout / 100);
-          p = setInterval(() => {
-            u.value += C, u.value >= 100 && (u.value = 100, s(), clearInterval(p));
+          u = setInterval(() => {
+            p.value += C, p.value >= 100 && (p.value = 100, s(), clearInterval(u));
           }, 100);
         } else
           _ = setTimeout(() => {
             s();
           }, a.timeout);
     }), oe(() => {
-      a.timeout && (p && clearInterval(p), _ && clearTimeout(_));
-    }), (c, f) => (o(), n("section", {
+      a.timeout && (u && clearInterval(u), _ && clearTimeout(_));
+    }), (c, f) => (o(), i("section", {
       class: g(["mc-toaster", t.value]),
       role: "status"
     }, [
-      (o(), B(F(i.value), {
+      (o(), B(F(n.value), {
         class: "mc-toaster__icon",
         "aria-hidden": "true"
       })),
       d("div", Ds, [
         d("p", qs, b(c.description), 1),
-        c.$slots.action ? (o(), n("div", Fs, [
+        c.$slots.action ? (o(), i("div", Fs, [
           k(c.$slots, "action", {}, void 0, !0)
         ])) : h("", !0)
       ]),
-      c.closable ? (o(), B(D, {
+      c.closable ? (o(), B(S, {
         key: 0,
         class: "mc-toaster__close",
         appearance: "inverse",
@@ -2075,7 +2080,7 @@ const x = /* @__PURE__ */ m(is, [["render", ds]]), cs = { class: "mc-status-noti
       c.progress ? (o(), B(ft, {
         key: 1,
         class: "mc-toaster__indicator",
-        value: u.value
+        value: p.value
       }, null, 8, ["value"])) : h("", !0)
     ], 2));
   }
@@ -2093,8 +2098,8 @@ const x = /* @__PURE__ */ m(is, [["render", ds]]), cs = { class: "mc-status-noti
   setup(r, { emit: e }) {
     const a = r, t = v(() => ({
       [`mc-toggle--${a.size}`]: a.size && a.size != "s"
-    })), i = e;
-    return (s, l) => (o(), n("div", {
+    })), n = e;
+    return (s, l) => (o(), i("div", {
       class: g(["mc-toggle", t.value])
     }, [
       d("label", {
@@ -2109,9 +2114,9 @@ const x = /* @__PURE__ */ m(is, [["render", ds]]), cs = { class: "mc-status-noti
           checked: s.modelValue,
           disabled: s.disabled
         }, s.$attrs, {
-          onChange: l[0] || (l[0] = (u) => i("update:modelValue", u.target.checked))
+          onChange: l[0] || (l[0] = (p) => n("update:modelValue", p.target.checked))
         }), null, 16, Rs),
-        s.label ? (o(), n("span", {
+        s.label ? (o(), i("span", {
           key: 0,
           for: s.id,
           class: "mc-toggle__label"
@@ -2132,7 +2137,7 @@ const x = /* @__PURE__ */ m(is, [["render", ds]]), cs = { class: "mc-status-noti
       [`mc-tooltip--${e.position}`]: e.position,
       "mc-tooltip--no-pointer": !e.pointer
     }));
-    return (t, i) => (o(), n("div", Ks, [
+    return (t, n) => (o(), i("div", Ks, [
       d("div", {
         class: g(["mc-tooltip", a.value]),
         "aria-describedby": t.id
@@ -2159,32 +2164,32 @@ const x = /* @__PURE__ */ m(is, [["render", ds]]), cs = { class: "mc-status-noti
     const a = r, t = z([]);
     T(
       () => a.modelValue,
-      (p) => {
-        t.value = p || [];
+      (u) => {
+        t.value = u || [];
       },
       { immediate: !0 }
     );
-    const i = (p, _) => {
+    const n = (u, _) => {
       let c = [...t.value];
-      p && !c.includes(_) ? c.push(_) : c = c.filter((f) => f !== _), u("update:modelValue", c), t.value = c;
+      u && !c.includes(_) ? c.push(_) : c = c.filter((f) => f !== _), p("update:modelValue", c), t.value = c;
     }, s = v(() => ({
       "mc-field__container--inline": a.inline
     })), l = v(() => ({
       "mc-field__container--inline__item": a.inline
-    })), u = e;
-    return (p, _) => (o(), n("div", {
+    })), p = e;
+    return (u, _) => (o(), i("div", {
       class: g(s.value)
     }, [
-      (o(!0), n(S, null, P(p.options, (c) => (o(), B(Hs, {
+      (o(!0), i(P, null, D(u.options, (c) => (o(), B(Hs, {
         id: c.id,
         key: c.id,
         label: c.label,
         "is-invalid": c.isInvalid,
-        name: p.name,
+        name: u.name,
         class: g(l.value),
-        "model-value": p.modelValue ? p.modelValue.includes(c.value) : void 0,
+        "model-value": u.modelValue ? u.modelValue.includes(c.value) : void 0,
         disabled: c.disabled,
-        "onUpdate:modelValue": (f) => i(f, c.value)
+        "onUpdate:modelValue": (f) => n(f, c.value)
       }, null, 8, ["id", "label", "is-invalid", "name", "class", "model-value", "disabled", "onUpdate:modelValue"]))), 128))
     ], 2));
   }
@@ -2204,7 +2209,7 @@ export {
   lo as MField,
   no as MFieldGroup,
   io as MFlag,
-  D as MIconButton,
+  S as MIconButton,
   ft as MLinearProgressbarBuffer,
   _o as MLinearProgressbarPercentage,
   ce as MLink,