@mozaic-ds/vue 2.2.0 → 2.4.0

package/dist/mozaic-vue.js

@@ -1,13 +1,13 @@
-import { defineComponent as $, computed as v, createBlock as B, openBlock as l, resolveDynamicComponent as A, normalizeClass as g, withCtx as C, createElementBlock as n, createCommentVNode as h, createElementVNode as r, renderSlot as V, Fragment as O, renderList as S, createVNode as w, createTextVNode as P, toDisplayString as f, normalizeStyle as J, mergeProps as I, ref as z, watch as q, withKeys as R, withDirectives as H, vModelDynamic as X, nextTick as Y, vModelText as Z } from "vue";
-const x = {
+import { defineComponent as h, computed as v, createBlock as B, openBlock as l, resolveDynamicComponent as A, normalizeClass as g, withCtx as M, createElementBlock as n, createCommentVNode as $, createElementVNode as d, renderSlot as w, Fragment as O, renderList as S, createVNode as k, createTextVNode as q, toDisplayString as f, normalizeStyle as K, mergeProps as I, ref as z, watch as P, withKeys as R, withDirectives as G, vModelDynamic as E, nextTick as X, vModelText as Y } from "vue";
+const Z = {
   key: 0,
   class: "mc-link__icon",
   "aria-hidden": "true"
-}, ee = { class: "mc-link__label" }, ae = {
+}, x = { class: "mc-link__label" }, ee = {
   key: 1,
   class: "mc-link__icon",
   "aria-hidden": "true"
-}, te = /* @__PURE__ */ $({
+}, ae = /* @__PURE__ */ h({
   __name: "MLink",
   props: {
     iconPosition: { default: "left" },
@@ -18,72 +18,69 @@ const x = {
     inline: { type: Boolean },
     router: { type: Boolean }
   },
-  setup(d) {
-    const e = d, a = v(() => ({
+  setup(r) {
+    const e = r, t = v(() => ({
       [`mc-link--${e.appearance}`]: e.appearance && e.appearance != "standard",
       [`mc-link--${e.size}`]: e.size && e.size != "s",
       "mc-link--inline": e.inline,
       "mc-link--stand-alone": !e.inline
     }));
-    return (t, o) => (l(), B(A(t.router ? "router-link" : "a"), {
-      class: g(["mc-link", a.value]),
-      href: t.href,
-      target: t.target,
-      to: t.router ? t.href : void 0
+    return (a, o) => (l(), B(A(a.router ? "router-link" : "a"), {
+      class: g(["mc-link", t.value]),
+      href: a.href,
+      target: a.target,
+      to: a.router ? a.href : void 0
     }, {
-      default: C(() => [
-        t.$slots.icon && t.iconPosition == "left" ? (l(), n("span", x, [
-          V(t.$slots, "icon", {}, void 0, !0)
-        ])) : h("", !0),
-        r("span", ee, [
-          V(t.$slots, "default", {}, void 0, !0)
+      default: M(() => [
+        a.$slots.icon && a.iconPosition == "left" ? (l(), n("span", Z, [
+          w(a.$slots, "icon", {}, void 0, !0)
+        ])) : $("", !0),
+        d("span", x, [
+          w(a.$slots, "default", {}, void 0, !0)
         ]),
-        t.$slots.icon && t.iconPosition == "right" ? (l(), n("span", ae, [
-          V(t.$slots, "icon", {}, void 0, !0)
-        ])) : h("", !0)
+        a.$slots.icon && a.iconPosition == "right" ? (l(), n("span", ee, [
+          w(a.$slots, "icon", {}, void 0, !0)
+        ])) : $("", !0)
       ]),
       _: 3
     }, 8, ["class", "href", "target", "to"]));
   }
-}), _ = (d, e) => {
-  const a = d.__vccOpts || d;
-  for (const [t, o] of e)
-    a[t] = o;
-  return a;
-}, se = /* @__PURE__ */ _(te, [["__scopeId", "data-v-df607c25"]]), le = { class: "mc-breadcrumb__container" }, oe = /* @__PURE__ */ $({
+}), _ = (r, e) => {
+  const t = r.__vccOpts || r;
+  for (const [a, o] of e)
+    t[a] = o;
+  return t;
+}, te = /* @__PURE__ */ _(ae, [["__scopeId", "data-v-df607c25"]]), se = { class: "mc-breadcrumb__container" }, le = /* @__PURE__ */ h({
   __name: "MBreadcrumb",
   props: {
     appearance: {},
     links: {}
   },
-  setup(d) {
-    const e = d, a = v(() => ({
+  setup(r) {
+    const e = r, t = v(() => ({
       [`mc-breadcrumb--${e.appearance}`]: e.appearance && e.appearance != "standard"
-    })), t = (o) => {
-      var s;
-      return o === (((s = e.links) == null ? void 0 : s.length) ?? 0) - 1;
-    };
+    })), a = (o) => o === (e.links?.length ?? 0) - 1;
     return (o, s) => (l(), n("nav", {
-      class: g(["mc-breadcrumb", a.value]),
+      class: g(["mc-breadcrumb", t.value]),
       "aria-label": "Breadcrumb"
     }, [
-      r("ul", le, [
+      d("ul", se, [
         (l(!0), n(O, null, S(o.links, (i, c) => (l(), n("li", {
           class: "mc-breadcrumb__item",
           key: `breadcrumb-${c}`
         }, [
-          w(se, {
+          k(te, {
             href: i.href,
             router: i.router,
             appearance: o.appearance,
             inline: "",
             class: g({
-              "mc-breadcrumb__current": t(c)
+              "mc-breadcrumb__current": a(c)
             }),
-            "aria-current": t(c) ? "page" : void 0
+            "aria-current": a(c) ? "page" : void 0
           }, {
-            default: C(() => [
-              P(f(i.label), 1)
+            default: M(() => [
+              q(f(i.label), 1)
             ]),
             _: 2
           }, 1032, ["href", "router", "appearance", "class", "aria-current"])
@@ -91,23 +88,23 @@ const x = {
       ])
     ], 2));
   }
-}), Vs = /* @__PURE__ */ _(oe, [["__scopeId", "data-v-41249412"]]), ne = { class: "mc-loader__spinner" }, ie = ["viewBox"], de = ["r"], re = {
+}), Fs = /* @__PURE__ */ _(le, [["__scopeId", "data-v-41249412"]]), oe = { class: "mc-loader__spinner" }, ne = ["viewBox"], ie = ["r"], re = {
   key: 0,
   class: "mc-loader__text",
   role: "status"
-}, ce = /* @__PURE__ */ $({
+}, de = /* @__PURE__ */ h({
   __name: "MLoader",
   props: {
     appearance: { default: "standard" },
     size: { default: "m" },
     text: {}
   },
-  setup(d) {
-    const e = d, a = v(() => ({
+  setup(r) {
+    const e = r, t = v(() => ({
       [`mc-loader--${e.size}`]: e.size && e.size !== "m",
       [`mc-loader--${e.appearance}`]: e.appearance && e.appearance !== "standard",
       "mc-loader--text-visible": e.text
-    })), t = v(() => {
+    })), a = v(() => {
       let s;
       switch (e.size) {
         case "s":
@@ -135,40 +132,40 @@ const x = {
       return s;
     });
     return (s, i) => (l(), n("div", {
-      class: g(["mc-loader", a.value])
+      class: g(["mc-loader", t.value])
     }, [
-      r("span", ne, [
+      d("span", oe, [
         (l(), n("svg", {
           class: "mc-loader__icon",
           xmlns: "http://www.w3.org/2000/svg",
-          viewBox: t.value,
+          viewBox: a.value,
           "aria-hidden": "true"
         }, [
-          r("circle", {
+          d("circle", {
             class: "mc-loader__path",
             cx: "50%",
             cy: "50%",
             r: o.value
-          }, null, 8, de)
-        ], 8, ie))
+          }, null, 8, ie)
+        ], 8, ne))
       ]),
-      s.text ? (l(), n("p", re, f(s.text), 1)) : h("", !0)
+      s.text ? (l(), n("p", re, f(s.text), 1)) : $("", !0)
     ], 2));
   }
-}), K = /* @__PURE__ */ _(ce, [["__scopeId", "data-v-998c550b"]]), ue = ["disabled", "type"], pe = {
+}), Q = /* @__PURE__ */ _(de, [["__scopeId", "data-v-998c550b"]]), ce = ["disabled", "type"], ue = {
   key: 0,
   class: "mc-button__icon"
-}, me = {
+}, pe = {
   key: 1,
   class: "mc-button__icon",
   style: { position: "absolute" }
-}, _e = {
+}, me = {
   key: 2,
   class: "mc-button__icon"
-}, ve = {
+}, _e = {
   key: 4,
   class: "mc-button__icon"
-}, be = /* @__PURE__ */ $({
+}, ve = /* @__PURE__ */ h({
   __name: "MButton",
   props: {
     appearance: { default: "standard" },
@@ -180,45 +177,45 @@ const x = {
     type: { default: "button" },
     isLoading: { type: Boolean }
   },
-  setup(d) {
-    const e = d, a = v(() => ({
+  setup(r) {
+    const e = r, t = v(() => ({
       [`mc-button--${e.appearance}`]: e.appearance && e.appearance != "standard",
       [`mc-button--${e.size}`]: e.size && e.size != "m",
       "mc-button--ghost": e.ghost,
       "mc-button--outlined": e.outlined,
       "mc-button--icon-only": e.iconPosition == "only"
     }));
-    return (t, o) => (l(), n("button", {
-      class: g(["mc-button", a.value]),
-      disabled: t.disabled,
-      type: t.type
+    return (a, o) => (l(), n("button", {
+      class: g(["mc-button", t.value]),
+      disabled: a.disabled,
+      type: a.type
     }, [
-      t.$slots.icon && t.iconPosition == "left" && !t.isLoading ? (l(), n("span", pe, [
-        V(t.$slots, "icon", {}, void 0, !0)
-      ])) : h("", !0),
-      t.isLoading ? (l(), n("span", me, [
-        w(K, {
+      a.$slots.icon && a.iconPosition == "left" && !a.isLoading ? (l(), n("span", ue, [
+        w(a.$slots, "icon", {}, void 0, !0)
+      ])) : $("", !0),
+      a.isLoading ? (l(), n("span", pe, [
+        k(Q, {
           style: { color: "currentColor" },
           size: "s"
         })
-      ])) : h("", !0),
-      t.$slots.icon && t.iconPosition == "only" ? (l(), n("span", _e, [
-        V(t.$slots, "icon", {}, void 0, !0)
+      ])) : $("", !0),
+      a.$slots.icon && a.iconPosition == "only" ? (l(), n("span", me, [
+        w(a.$slots, "icon", {}, void 0, !0)
       ])) : (l(), n("span", {
         key: 3,
         class: "mc-button__label",
-        style: J({ visibility: t.isLoading ? "hidden" : "visible" })
+        style: K({ visibility: a.isLoading ? "hidden" : "visible" })
       }, [
-        V(t.$slots, "default", {}, () => [
-          o[0] || (o[0] = P("Button Label"))
+        w(a.$slots, "default", {}, () => [
+          o[0] || (o[0] = q("Button Label"))
         ], !0)
       ], 4)),
-      t.$slots.icon && t.iconPosition == "right" && !t.isLoading ? (l(), n("span", ve, [
-        V(t.$slots, "icon", {}, void 0, !0)
-      ])) : h("", !0)
-    ], 10, ue));
+      a.$slots.icon && a.iconPosition == "right" && !a.isLoading ? (l(), n("span", _e, [
+        w(a.$slots, "icon", {}, void 0, !0)
+      ])) : $("", !0)
+    ], 10, ce));
   }
-}), N = /* @__PURE__ */ _(be, [["__scopeId", "data-v-f4f43ab6"]]), fe = { class: "mc-checkbox" }, he = ["id", "name", "checked", "indeterminate", "disabled", "aria-invalid"], $e = ["for"], ye = /* @__PURE__ */ $({
+}), N = /* @__PURE__ */ _(ve, [["__scopeId", "data-v-f4f43ab6"]]), be = { class: "mc-checkbox" }, fe = ["id", "name", "checked", "indeterminate", "disabled", "aria-invalid"], he = ["for"], $e = /* @__PURE__ */ h({
   __name: "MCheckbox",
   props: {
     id: {},
@@ -230,15 +227,15 @@ const x = {
     disabled: { type: Boolean }
   },
   emits: ["update:modelValue"],
-  setup(d, { emit: e }) {
-    const a = d, t = v(() => ({
-      "is-invalid": a.isInvalid
+  setup(r, { emit: e }) {
+    const t = r, a = v(() => ({
+      "is-invalid": t.isInvalid
     })), o = e;
-    return (s, i) => (l(), n("div", fe, [
-      r("input", I({
+    return (s, i) => (l(), n("div", be, [
+      d("input", I({
         id: s.id,
         type: "checkbox",
-        class: ["mc-checkbox__input", t.value],
+        class: ["mc-checkbox__input", a.value],
         name: s.name,
         checked: s.modelValue,
         indeterminate: s.indeterminate,
@@ -246,15 +243,15 @@ const x = {
         "aria-invalid": s.isInvalid
       }, s.$attrs, {
         onChange: i[0] || (i[0] = (c) => o("update:modelValue", c.target.checked))
-      }), null, 16, he),
+      }), null, 16, fe),
       s.label ? (l(), n("label", {
         key: 0,
         for: s.id,
         class: "mc-checkbox__label"
-      }, f(s.label), 9, $e)) : h("", !0)
+      }, f(s.label), 9, he)) : $("", !0)
     ]));
   }
-}), ge = /* @__PURE__ */ _(ye, [["__scopeId", "data-v-37fd0a35"]]), ke = /* @__PURE__ */ $({
+}), ge = /* @__PURE__ */ _($e, [["__scopeId", "data-v-37fd0a35"]]), ye = /* @__PURE__ */ h({
   __name: "MCheckboxGroup",
   props: {
     name: {},
@@ -263,22 +260,22 @@ const x = {
     inline: { type: Boolean }
   },
   emits: ["update:modelValue"],
-  setup(d, { emit: e }) {
-    const a = d, t = z([]);
-    q(
-      () => a.modelValue,
+  setup(r, { emit: e }) {
+    const t = r, a = z([]);
+    P(
+      () => t.modelValue,
       (p) => {
-        t.value = p || [];
+        a.value = p || [];
       },
       { immediate: !0 }
     );
     const o = (p, m) => {
-      let u = [...t.value];
-      p && !u.includes(m) ? u.push(m) : u = u.filter((b) => b !== m), c("update:modelValue", u), t.value = u;
+      let u = [...a.value];
+      p && !u.includes(m) ? u.push(m) : u = u.filter((b) => b !== m), c("update:modelValue", u), a.value = u;
     }, s = v(() => ({
-      "mc-field__container--inline": a.inline
+      "mc-field__container--inline": t.inline
     })), i = v(() => ({
-      "mc-field__container--inline__item": a.inline
+      "mc-field__container--inline__item": t.inline
     })), c = e;
     return (p, m) => (l(), n("div", {
       class: g(["mc-field__container", s.value])
@@ -296,7 +293,81 @@ const x = {
       }, null, 8, ["id", "label", "is-invalid", "name", "class", "model-value", "disabled", "onUpdate:modelValue"]))), 128))
     ], 2));
   }
-}), Is = /* @__PURE__ */ _(ke, [["__scopeId", "data-v-8ee4699f"]]), we = {
+}), Ns = /* @__PURE__ */ _(ye, [["__scopeId", "data-v-8ee4699f"]]), ke = ["aria-valuenow"], we = {
+  key: 0,
+  class: "mc-circular-progressbar__percentage"
+}, Ve = { class: "mc-circular-progressbar__value" }, Ie = {
+  key: 1,
+  class: "mc-circular-progressbar__content"
+}, Be = { class: "mc-circular-progressbar__number" }, Ce = {
+  key: 0,
+  class: "mc-circular-progressbar__text"
+}, Me = /* @__PURE__ */ h({
+  __name: "MCircularProgressbar",
+  props: {
+    size: {},
+    value: { default: 0 },
+    type: { default: "percentage" },
+    contentValue: {},
+    additionalInfo: {}
+  },
+  setup(r) {
+    const e = r, t = v(() => ({
+      [`mc-circular-progressbar--${e.size}`]: e.size && e.size != "l"
+    }));
+    return (a, o) => (l(), n("div", {
+      class: g(["mc-circular-progressbar", t.value]),
+      role: "progressbar",
+      style: K(`--progress-value: ${a.value};`),
+      "aria-valuenow": a.value,
+      "aria-valuemin": 0,
+      "aria-valuemax": 100
+    }, [
+      o[1] || (o[1] = d("svg", {
+        class: "mc-circular-progressbar__line",
+        xmlns: "http://www.w3.org/2000/svg",
+        "aria-hidden": "true",
+        viewBox: "0 0 100 100"
+      }, [
+        d("circle", {
+          class: "mc-circular-progressbar__track",
+          cx: "50",
+          cy: "50",
+          r: "46"
+        }),
+        d("circle", {
+          class: "mc-circular-progressbar__indicator",
+          cx: "50",
+          cy: "50",
+          r: "46"
+        })
+      ], -1)),
+      a.type === "percentage" ? (l(), n("div", we, [
+        d("p", Ve, f(a.value), 1),
+        o[0] || (o[0] = d("p", { class: "mc-circular-progressbar__unit" }, "%", -1))
+      ])) : $("", !0),
+      a.type === "content" ? (l(), n("div", Ie, [
+        d("p", Be, f(a.contentValue), 1),
+        a.additionalInfo ? (l(), n("p", Ce, f(a.additionalInfo), 1)) : $("", !0)
+      ])) : $("", !0)
+    ], 14, ke));
+  }
+}), As = /* @__PURE__ */ _(Me, [["__scopeId", "data-v-ec931b7f"]]), ze = /* @__PURE__ */ h({
+  __name: "MContainer",
+  props: {
+    fluid: { type: Boolean }
+  },
+  setup(r) {
+    const e = r, t = v(() => ({
+      "ml-container--fluid": e.fluid
+    }));
+    return (a, o) => (l(), n("div", {
+      class: g(["ml-container", t.value])
+    }, [
+      w(a.$slots, "default", {}, void 0, !0)
+    ], 2));
+  }
+}), Rs = /* @__PURE__ */ _(ze, [["__scopeId", "data-v-31859e0b"]]), Le = {
   name: "CrossCircleFilled24",
   props: {
     /**
@@ -307,26 +378,26 @@ const x = {
       default: "currentColor"
     }
   }
-}, Ve = ["fill"];
-function Ie(d, e, a, t, o, s) {
+}, je = ["fill"];
+function Te(r, e, t, a, o, s) {
   return l(), n("svg", {
     "aria-hidden": "true",
-    fill: a.color,
+    fill: t.color,
     xmlns: "http://www.w3.org/2000/svg",
     viewBox: "0 0 24 24",
     width: "24",
     height: "24"
   }, e[0] || (e[0] = [
-    r("path", {
+    d("path", {
       "fill-rule": "evenodd",
       d: "M12 2C6.477 2 2 6.477 2 12s4.477 10 10 10 10-4.477 10-10S17.523 2 12 2M8.293 8.293a1 1 0 0 1 1.414 0L12 10.586l2.293-2.293a1 1 0 1 1 1.414 1.414L13.414 12l2.293 2.293a1 1 0 0 1-1.414 1.414L12 13.414l-2.293 2.293a1 1 0 0 1-1.414-1.414L10.586 12 8.293 9.707a1 1 0 0 1 0-1.414"
     }, null, -1)
-  ]), 8, Ve);
+  ]), 8, je);
 }
-const F = /* @__PURE__ */ _(we, [["render", Ie]]), Be = ["id", "value", "name", "disabled", "aria-invalid", "readonly"], Ce = {
+const F = /* @__PURE__ */ _(Le, [["render", Te]]), Oe = ["id", "value", "name", "disabled", "aria-invalid", "readonly"], Se = {
   key: 0,
   class: "mc-datepicker__controls-options mc-controls-options"
-}, Me = { class: "mc-controls-options__label" }, ze = /* @__PURE__ */ $({
+}, Pe = { class: "mc-controls-options__label" }, qe = /* @__PURE__ */ h({
   __name: "MDatepicker",
   props: {
     id: {},
@@ -340,17 +411,17 @@ const F = /* @__PURE__ */ _(we, [["render", Ie]]), Be = ["id", "value", "name",
     clearLabel: { default: "clear content" }
   },
   emits: ["update:modelValue"],
-  setup(d, { emit: e }) {
-    const a = d, t = v(() => ({
-      [`mc-text-input--${a.size} mc-datepicker--${a.size}`]: a.size && a.size != "m",
-      "is-invalid": a.isInvalid
-    })), o = z(a.modelValue), s = () => {
+  setup(r, { emit: e }) {
+    const t = r, a = v(() => ({
+      [`mc-text-input--${t.size} mc-datepicker--${t.size}`]: t.size && t.size != "m",
+      "is-invalid": t.isInvalid
+    })), o = z(t.modelValue), s = () => {
       o.value = "", i("update:modelValue", "");
     }, i = e;
     return (c, p) => (l(), n("div", {
-      class: g(["mc-datepicker mc-text-input", t.value])
+      class: g(["mc-datepicker mc-text-input", a.value])
     }, [
-      r("input", I({
+      d("input", I({
         id: c.id,
         class: "mc-datepicker__control mc-text-input__control",
         value: o.value,
@@ -361,43 +432,43 @@ const F = /* @__PURE__ */ _(we, [["render", Ie]]), Be = ["id", "value", "name",
         readonly: c.readonly
       }, c.$attrs, {
         onInput: p[0] || (p[0] = (m) => i("update:modelValue", m.target.value))
-      }), null, 16, Be),
-      c.isClearable && o.value ? (l(), n("div", Ce, [
-        r("button", {
+      }), null, 16, Oe),
+      c.isClearable && o.value ? (l(), n("div", Se, [
+        d("button", {
           type: "button",
           class: "mc-controls-options__button",
           onClick: s
         }, [
-          w(F, {
+          k(F, {
             class: "mc-controls-options__icon",
             "aria-hidden": "true"
           }),
-          r("span", Me, f(c.clearLabel), 1)
+          d("span", Pe, f(c.clearLabel), 1)
         ])
-      ])) : h("", !0)
+      ])) : $("", !0)
     ], 2));
   }
-}), Bs = /* @__PURE__ */ _(ze, [["__scopeId", "data-v-0c5cddc2"]]), Le = { class: "mc-divider" }, Te = /* @__PURE__ */ $({
+}), Gs = /* @__PURE__ */ _(qe, [["__scopeId", "data-v-0c5cddc2"]]), De = { class: "mc-divider" }, Fe = /* @__PURE__ */ h({
   __name: "MDivider",
   props: {
     orientation: { default: "horizontal" },
     style: { default: "primary" },
     size: { default: "s" }
   },
-  setup(d) {
-    const e = d, a = v(() => ({
+  setup(r) {
+    const e = r, t = v(() => ({
       [`mc-divider-${e.orientation}`]: e.orientation,
       [`mc-divider-horizontal--${e.style}`]: e.style && e.style != "primary",
       [`mc-divider-horizontal--${e.size}`]: e.size && e.size != "s"
     }));
-    return (t, o) => (l(), n("div", Le, [
-      r("div", {
-        class: g(a.value)
+    return (a, o) => (l(), n("div", De, [
+      d("div", {
+        class: g(t.value)
       }, null, 2),
-      V(t.$slots, "default", {}, void 0, !0)
+      w(a.$slots, "default", {}, void 0, !0)
     ]));
   }
-}), je = /* @__PURE__ */ _(Te, [["__scopeId", "data-v-f8e160af"]]), Oe = {
+}), Ne = /* @__PURE__ */ _(Fe, [["__scopeId", "data-v-f8e160af"]]), Ae = {
   name: "ArrowBack24",
   props: {
     /**
@@ -408,23 +479,23 @@ const F = /* @__PURE__ */ _(we, [["render", Ie]]), Be = ["id", "value", "name",
       default: "currentColor"
     }
   }
-}, Se = ["fill"];
-function qe(d, e, a, t, o, s) {
+}, Re = ["fill"];
+function Ge(r, e, t, a, o, s) {
   return l(), n("svg", {
     "aria-hidden": "true",
-    fill: a.color,
+    fill: t.color,
     xmlns: "http://www.w3.org/2000/svg",
     viewBox: "0 0 24 24",
     width: "24",
     height: "24"
   }, e[0] || (e[0] = [
-    r("path", {
+    d("path", {
       "fill-rule": "evenodd",
       d: "M8.707 6.293a1 1 0 0 1 0 1.414L5.414 11H21a1 1 0 1 1 0 2H5.414l3.293 3.293a1 1 0 1 1-1.414 1.414l-5-5a1 1 0 0 1 0-1.414l5-5a1 1 0 0 1 1.414 0"
     }, null, -1)
-  ]), 8, Se);
+  ]), 8, Re);
 }
-const De = /* @__PURE__ */ _(Oe, [["render", qe]]), Pe = {
+const Ue = /* @__PURE__ */ _(Ae, [["render", Ge]]), He = {
   name: "Cross24",
   props: {
     /**
@@ -435,23 +506,23 @@ const De = /* @__PURE__ */ _(Oe, [["render", qe]]), Pe = {
       default: "currentColor"
     }
   }
-}, Fe = ["fill"];
-function Ne(d, e, a, t, o, s) {
+}, Ke = ["fill"];
+function Ee(r, e, t, a, o, s) {
   return l(), n("svg", {
     "aria-hidden": "true",
-    fill: a.color,
+    fill: t.color,
     xmlns: "http://www.w3.org/2000/svg",
     viewBox: "0 0 24 24",
     width: "24",
     height: "24"
   }, e[0] || (e[0] = [
-    r("path", {
+    d("path", {
       "fill-rule": "evenodd",
       d: "M17.707 7.707a1 1 0 0 0-1.414-1.414L12 10.586 7.707 6.293a1 1 0 0 0-1.414 1.414L10.586 12l-4.293 4.293a1 1 0 1 0 1.414 1.414L12 13.414l4.293 4.293a1 1 0 0 0 1.414-1.414L13.414 12z"
     }, null, -1)
-  ]), 8, Fe);
+  ]), 8, Ke);
 }
-const E = /* @__PURE__ */ _(Pe, [["render", Ne]]), Ae = ["disabled", "type"], Re = { class: "mc-button__icon" }, Ge = /* @__PURE__ */ $({
+const W = /* @__PURE__ */ _(He, [["render", Ee]]), Qe = ["disabled", "type"], We = { class: "mc-button__icon" }, Je = /* @__PURE__ */ h({
   __name: "MIconButton",
   props: {
     appearance: { default: "standard" },
@@ -461,58 +532,58 @@ const E = /* @__PURE__ */ _(Pe, [["render", Ne]]), Ae = ["disabled", "type"], Re
     outlined: { type: Boolean },
     type: { default: "button" }
   },
-  setup(d) {
-    const e = d, a = v(() => ({
+  setup(r) {
+    const e = r, t = v(() => ({
       [`mc-button--${e.appearance}`]: e.appearance && e.appearance != "standard",
       [`mc-button--${e.size}`]: e.size && e.size != "m",
       "mc-button--ghost": e.ghost,
       "mc-button--outlined": e.outlined
     }));
-    return (t, o) => (l(), n("button", {
-      class: g(["mc-button mc-button--icon-button", a.value]),
-      disabled: t.disabled,
-      type: t.type
+    return (a, o) => (l(), n("button", {
+      class: g(["mc-button mc-button--icon-button", t.value]),
+      disabled: a.disabled,
+      type: a.type
     }, [
-      r("span", Re, [
-        V(t.$slots, "icon", {}, void 0, !0)
+      d("span", We, [
+        w(a.$slots, "icon", {}, void 0, !0)
       ])
-    ], 10, Ae));
+    ], 10, Qe));
   }
-}), D = /* @__PURE__ */ _(Ge, [["__scopeId", "data-v-abf78562"]]), Ue = ["aria-labelledby"], He = /* @__PURE__ */ $({
+}), D = /* @__PURE__ */ _(Je, [["__scopeId", "data-v-abf78562"]]), Xe = ["aria-labelledby"], Ye = /* @__PURE__ */ h({
   __name: "MOverlay",
   props: {
     isVisible: { type: Boolean },
     dialogLabel: {}
   },
-  setup(d) {
-    return (e, a) => (l(), n("div", {
+  setup(r) {
+    return (e, t) => (l(), n("div", {
       class: g(["mc-overlay", { "is-visible": e.isVisible }])
     }, [
-      r("div", {
+      d("div", {
         role: "dialog",
         tabindex: "-1",
         "aria-labelledby": e.dialogLabel
       }, [
-        V(e.$slots, "default", {}, void 0, !0)
-      ], 8, Ue)
+        w(e.$slots, "default", {}, void 0, !0)
+      ], 8, Xe)
     ], 2));
   }
-}), Q = /* @__PURE__ */ _(He, [["__scopeId", "data-v-db90fdb3"]]), Ke = ["aria-modal", "aria-hidden"], Ee = {
+}), J = /* @__PURE__ */ _(Ye, [["__scopeId", "data-v-db90fdb3"]]), Ze = ["aria-modal", "aria-hidden"], xe = {
   class: "mc-drawer__dialog",
   role: "document"
-}, Qe = { class: "mc-drawer__header" }, We = {
+}, ea = { class: "mc-drawer__header" }, aa = {
   class: "mc-drawer__title",
   id: "drawerTitle"
-}, Je = { class: "mc-drawer__body" }, Xe = {
+}, ta = { class: "mc-drawer__body" }, sa = {
   class: "mc-drawer__content",
   tabindex: "0"
-}, Ye = {
+}, la = {
   key: 0,
   class: "mc-drawer__content__title"
-}, Ze = {
+}, oa = {
   key: 0,
   class: "mc-drawer__footer"
-}, xe = /* @__PURE__ */ $({
+}, na = /* @__PURE__ */ h({
   __name: "MDrawer",
   props: {
     open: { type: Boolean },
@@ -523,14 +594,14 @@ const E = /* @__PURE__ */ _(Pe, [["render", Ne]]), Ae = ["disabled", "type"], Re
     contentTitle: {}
   },
   emits: ["update:open", "back"],
-  setup(d, { emit: e }) {
-    const a = d, t = v(() => ({
-      "is-open": a.open,
-      "mc-drawer--extend": a.extended,
-      [`mc-drawer--${a.position}`]: a.position && a.position != "right"
+  setup(r, { emit: e }) {
+    const t = r, a = v(() => ({
+      "is-open": t.open,
+      "mc-drawer--extend": t.extended,
+      [`mc-drawer--${t.position}`]: t.position && t.position != "right"
     }));
-    q(
-      () => a.open,
+    P(
+      () => t.open,
       (i) => {
         s("update:open", i);
       }
@@ -538,13 +609,13 @@ const E = /* @__PURE__ */ _(Pe, [["render", Ne]]), Ae = ["disabled", "type"], Re
     const o = () => {
       s("update:open", !1);
     }, s = e;
-    return (i, c) => (l(), B(Q, {
+    return (i, c) => (l(), B(J, {
       "is-visible": i.open,
       dialogLabel: "drawerTitle"
     }, {
-      default: C(() => [
-        r("section", I({
-          class: ["mc-drawer", t.value],
+      default: M(() => [
+        d("section", I({
+          class: ["mc-drawer", a.value],
           role: "dialog",
           "aria-labelledby": "drawerTitle",
           "aria-modal": i.open ? "true" : "false",
@@ -553,8 +624,8 @@ const E = /* @__PURE__ */ _(Pe, [["render", Ne]]), Ae = ["disabled", "type"], Re
         }, i.$attrs, {
           onKeydown: R(o, ["esc"])
         }), [
-          r("div", Ee, [
-            r("div", Qe, [
+          d("div", xe, [
+            d("div", ea, [
               i.back ? (l(), B(D, {
                 key: 0,
                 class: "mc-drawer__back",
@@ -562,43 +633,43 @@ const E = /* @__PURE__ */ _(Pe, [["render", Ne]]), Ae = ["disabled", "type"], Re
                 ghost: "",
                 onClick: c[0] || (c[0] = (p) => s("back"))
               }, {
-                icon: C(() => [
-                  w(De, { "aria-hidden": "true" })
+                icon: M(() => [
+                  k(Ue, { "aria-hidden": "true" })
                 ]),
                 _: 1
-              })) : h("", !0),
-              r("h2", We, f(i.title), 1),
-              w(D, {
+              })) : $("", !0),
+              d("h2", aa, f(i.title), 1),
+              k(D, {
                 class: "mc-drawer__close",
                 "aria-label": "Close",
                 ghost: "",
                 onClick: o
               }, {
-                icon: C(() => [
-                  w(E, { "aria-hidden": "true" })
+                icon: M(() => [
+                  k(W, { "aria-hidden": "true" })
                 ]),
                 _: 1
               })
             ]),
-            r("div", Je, [
-              r("div", Xe, [
-                i.contentTitle ? (l(), n("h2", Ye, f(i.contentTitle), 1)) : h("", !0),
-                V(i.$slots, "default", {}, void 0, !0)
+            d("div", ta, [
+              d("div", sa, [
+                i.contentTitle ? (l(), n("h2", la, f(i.contentTitle), 1)) : $("", !0),
+                w(i.$slots, "default", {}, void 0, !0)
               ])
             ]),
-            i.$slots.footer ? (l(), n("div", Ze, [
-              V(i.$slots, "footer", {}, void 0, !0)
-            ])) : h("", !0)
+            i.$slots.footer ? (l(), n("div", oa, [
+              w(i.$slots, "footer", {}, void 0, !0)
+            ])) : $("", !0)
           ])
-        ], 16, Ke)
+        ], 16, Ze)
       ]),
       _: 3
     }, 8, ["is-visible"]));
   }
-}), Cs = /* @__PURE__ */ _(xe, [["__scopeId", "data-v-673a796c"]]), ea = { class: "mc-field" }, aa = ["for"], ta = {
+}), Us = /* @__PURE__ */ _(na, [["__scopeId", "data-v-673a796c"]]), ia = { class: "mc-field" }, ra = ["for"], da = {
   key: 0,
   class: "mc-field__requirement"
-}, sa = ["id"], la = { class: "mc-field__content" }, oa = ["id"], na = /* @__PURE__ */ $({
+}, ca = ["id"], ua = { class: "mc-field__content" }, pa = ["id"], ma = /* @__PURE__ */ h({
   __name: "MField",
   props: {
     id: {},
@@ -611,41 +682,41 @@ const E = /* @__PURE__ */ _(Pe, [["render", Ne]]), Ae = ["disabled", "type"], Re
     messageId: {},
     message: {}
   },
-  setup(d) {
-    const e = d, a = v(() => ({
+  setup(r) {
+    const e = r, t = v(() => ({
       "is-valid": e.isValid,
       "is-invalid": e.isInvalid
     }));
-    return (t, o) => (l(), n("div", ea, [
-      r("label", {
+    return (a, o) => (l(), n("div", ia, [
+      d("label", {
         class: "mc-field__label",
-        for: t.id
+        for: a.id
       }, [
-        P(f(t.label) + " ", 1),
-        t.requirementText ? (l(), n("span", ta, "(" + f(t.requirementText) + ")", 1)) : h("", !0)
-      ], 8, aa),
-      t.helpId && t.helpText ? (l(), n("span", {
+        q(f(a.label) + " ", 1),
+        a.requirementText ? (l(), n("span", da, "(" + f(a.requirementText) + ")", 1)) : $("", !0)
+      ], 8, ra),
+      a.helpId && a.helpText ? (l(), n("span", {
         key: 0,
-        id: t.helpId,
+        id: a.helpId,
         class: "mc-field__help"
-      }, f(t.helpText), 9, sa)) : h("", !0),
-      r("div", la, [
-        V(t.$slots, "default", {}, void 0, !0)
+      }, f(a.helpText), 9, ca)) : $("", !0),
+      d("div", ua, [
+        w(a.$slots, "default", {}, void 0, !0)
       ]),
-      (t.isValid || t.isInvalid) && t.message ? (l(), n("span", {
+      (a.isValid || a.isInvalid) && a.message ? (l(), n("span", {
         key: 1,
-        class: g(["mc-field__validation-message", a.value]),
-        id: t.messageId
-      }, f(t.message), 11, oa)) : h("", !0)
+        class: g(["mc-field__validation-message", t.value]),
+        id: a.messageId
+      }, f(a.message), 11, pa)) : $("", !0)
     ]));
   }
-}), Ms = /* @__PURE__ */ _(na, [["__scopeId", "data-v-ead078c4"]]), ia = { class: "mc-field--group" }, da = ["for"], ra = {
+}), Hs = /* @__PURE__ */ _(ma, [["__scopeId", "data-v-ead078c4"]]), _a = { class: "mc-field--group" }, va = ["for"], ba = {
   key: 0,
   class: "mc-field__requirement"
-}, ca = {
+}, fa = {
   key: 0,
   class: "mc-field__help"
-}, ua = { class: "mc-field__content" }, pa = /* @__PURE__ */ $({
+}, ha = { class: "mc-field__content" }, $a = /* @__PURE__ */ h({
   __name: "MFieldGroup",
   props: {
     id: {},
@@ -656,81 +727,81 @@ const E = /* @__PURE__ */ _(Pe, [["render", Ne]]), Ae = ["disabled", "type"], Re
     isInvalid: { type: Boolean },
     message: {}
   },
-  setup(d) {
-    const e = d, a = v(() => ({
+  setup(r) {
+    const e = r, t = v(() => ({
       "is-valid": e.isValid,
       "is-invalid": e.isInvalid
     }));
-    return (t, o) => (l(), n("fieldset", ia, [
-      r("legend", {
+    return (a, o) => (l(), n("fieldset", _a, [
+      d("legend", {
         class: "mc-field__legend",
-        for: t.id
+        for: a.id
       }, [
-        P(f(t.legend) + " ", 1),
-        t.requirementText ? (l(), n("span", ra, "(" + f(t.requirementText) + ")", 1)) : h("", !0)
-      ], 8, da),
-      t.helpText ? (l(), n("span", ca, f(t.helpText), 1)) : h("", !0),
-      r("div", ua, [
-        V(t.$slots, "default", {}, void 0, !0)
+        q(f(a.legend) + " ", 1),
+        a.requirementText ? (l(), n("span", ba, "(" + f(a.requirementText) + ")", 1)) : $("", !0)
+      ], 8, va),
+      a.helpText ? (l(), n("span", fa, f(a.helpText), 1)) : $("", !0),
+      d("div", ha, [
+        w(a.$slots, "default", {}, void 0, !0)
       ]),
-      (t.isValid || t.isInvalid) && t.message ? (l(), n("span", {
+      (a.isValid || a.isInvalid) && a.message ? (l(), n("span", {
         key: 1,
-        class: g(["mc-field__validation-message", a.value])
-      }, f(t.message), 3)) : h("", !0)
+        class: g(["mc-field__validation-message", t.value])
+      }, f(a.message), 3)) : $("", !0)
     ]));
   }
-}), zs = /* @__PURE__ */ _(pa, [["__scopeId", "data-v-fc0c08dc"]]), ma = { class: "mc-flag__label" }, _a = /* @__PURE__ */ $({
+}), Ks = /* @__PURE__ */ _($a, [["__scopeId", "data-v-fc0c08dc"]]), ga = { class: "mc-flag__label" }, ya = /* @__PURE__ */ h({
   __name: "MFlag",
   props: {
     label: {},
     appearance: {}
   },
-  setup(d) {
-    const e = d, a = v(() => ({
+  setup(r) {
+    const e = r, t = v(() => ({
       [`mc-flag--${e.appearance}`]: e.appearance && e.appearance != "standard"
     }));
-    return (t, o) => (l(), n("div", {
-      class: g(["mc-flag", a.value])
+    return (a, o) => (l(), n("div", {
+      class: g(["mc-flag", t.value])
     }, [
-      r("span", ma, f(t.label), 1)
+      d("span", ga, f(a.label), 1)
     ], 2));
   }
-}), Ls = /* @__PURE__ */ _(_a, [["__scopeId", "data-v-9245f79e"]]), va = ["aria-label"], ba = /* @__PURE__ */ $({
+}), Es = /* @__PURE__ */ _(ya, [["__scopeId", "data-v-9245f79e"]]), ka = ["aria-label"], wa = /* @__PURE__ */ h({
   __name: "MLoadingOverlay",
   props: {
     isVisible: { type: Boolean },
     text: {}
   },
-  setup(d) {
-    return (e, a) => (l(), n("div", {
+  setup(r) {
+    return (e, t) => (l(), n("div", {
       class: g(["mc-loading-loader", { "is-visible": e.isVisible }])
     }, [
-      r("div", I({
+      d("div", I({
         role: "dialog",
         tabindex: "-1",
         "aria-label": e.text
       }, e.$attrs), [
-        w(K, {
+        k(Q, {
           size: "l",
           appearance: "inverse",
           text: e.text
         }, null, 8, ["text"])
-      ], 16, va)
+      ], 16, ka)
     ], 2));
   }
-}), Ts = /* @__PURE__ */ _(ba, [["__scopeId", "data-v-eae6b1f2"]]), fa = ["aria-modal", "aria-hidden"], ha = {
+}), Qs = /* @__PURE__ */ _(wa, [["__scopeId", "data-v-eae6b1f2"]]), Va = ["aria-modal", "aria-hidden"], Ia = {
   class: "mc-modal__dialog",
   role: "document"
-}, $a = { class: "mc-modal__header" }, ya = {
+}, Ba = { class: "mc-modal__header" }, Ca = {
   key: 0,
   class: "mc-modal__icon"
-}, ga = {
+}, Ma = {
   class: "mc-modal__title",
   id: "modalTitle"
-}, ka = { class: "mc-modal__body" }, wa = {
+}, za = { class: "mc-modal__body" }, La = {
   key: 0,
   class: "mc-modal__footer"
-}, Va = { class: "mc-modal__link" }, Ia = /* @__PURE__ */ $({
+}, ja = { class: "mc-modal__link" }, Ta = /* @__PURE__ */ h({
   __name: "MModal",
   props: {
     open: { type: Boolean },
@@ -739,12 +810,12 @@ const E = /* @__PURE__ */ _(Pe, [["render", Ne]]), Ae = ["disabled", "type"], Re
     closable: { type: Boolean, default: !0 }
   },
   emits: ["update:open"],
-  setup(d, { emit: e }) {
-    const a = d, t = v(() => ({
-      "is-open": a.open
+  setup(r, { emit: e }) {
+    const t = r, a = v(() => ({
+      "is-open": t.open
     }));
-    q(
-      () => a.open,
+    P(
+      () => t.open,
       (i) => {
         s("update:open", i);
       }
@@ -752,13 +823,13 @@ const E = /* @__PURE__ */ _(Pe, [["render", Ne]]), Ae = ["disabled", "type"], Re
     const o = () => {
       s("update:open", !1);
     }, s = e;
-    return (i, c) => (l(), B(Q, {
+    return (i, c) => (l(), B(J, {
       "is-visible": i.open,
       dialogLabel: "modalTitle"
     }, {
-      default: C(() => [
-        r("section", I({
-          class: ["mc-modal", t.value],
+      default: M(() => [
+        d("section", I({
+          class: ["mc-modal", a.value],
           role: "dialog",
           "aria-labelledby": "modalTitle",
           "aria-modal": i.open ? "true" : "false",
@@ -767,12 +838,12 @@ const E = /* @__PURE__ */ _(Pe, [["render", Ne]]), Ae = ["disabled", "type"], Re
         }, i.$attrs, {
           onKeydown: R(o, ["esc"])
         }), [
-          r("div", ha, [
-            r("header", $a, [
-              i.$slots.icon ? (l(), n("span", ya, [
-                V(i.$slots, "icon", {}, void 0, !0)
-              ])) : h("", !0),
-              r("h2", ga, f(i.title), 1),
+          d("div", Ia, [
+            d("header", Ba, [
+              i.$slots.icon ? (l(), n("span", Ca, [
+                w(i.$slots, "icon", {}, void 0, !0)
+              ])) : $("", !0),
+              d("h2", Ma, f(i.title), 1),
               i.closable ? (l(), B(D, {
                 key: 1,
                 class: "mc-modal__close",
@@ -780,49 +851,49 @@ const E = /* @__PURE__ */ _(Pe, [["render", Ne]]), Ae = ["disabled", "type"], Re
                 ghost: "",
                 onClick: o
               }, {
-                icon: C(() => [
-                  w(E, { "aria-hidden": "true" })
+                icon: M(() => [
+                  k(W, { "aria-hidden": "true" })
                 ]),
                 _: 1
-              })) : h("", !0)
+              })) : $("", !0)
             ]),
-            r("main", ka, [
-              r("p", null, f(i.description), 1),
-              V(i.$slots, "default", {}, void 0, !0)
+            d("main", za, [
+              d("p", null, f(i.description), 1),
+              w(i.$slots, "default", {}, void 0, !0)
             ]),
-            i.$slots.footer ? (l(), n("footer", wa, [
-              r("span", Va, [
-                V(i.$slots, "link", {}, void 0, !0)
+            i.$slots.footer ? (l(), n("footer", La, [
+              d("span", ja, [
+                w(i.$slots, "link", {}, void 0, !0)
               ]),
-              V(i.$slots, "footer", {}, void 0, !0)
-            ])) : h("", !0)
+              w(i.$slots, "footer", {}, void 0, !0)
+            ])) : $("", !0)
           ])
-        ], 16, fa)
+        ], 16, Va)
       ]),
       _: 3
     }, 8, ["is-visible"]));
   }
-}), js = /* @__PURE__ */ _(Ia, [["__scopeId", "data-v-20ce36b2"]]), Ba = /* @__PURE__ */ $({
+}), Ws = /* @__PURE__ */ _(Ta, [["__scopeId", "data-v-20ce36b2"]]), Oa = /* @__PURE__ */ h({
   __name: "MNumberBadge",
   props: {
     label: {},
     appearance: { default: "standard" },
     size: { default: "s" }
   },
-  setup(d) {
-    const e = d, a = v(() => ({
+  setup(r) {
+    const e = r, t = v(() => ({
       [`mc-number-badge--${e.appearance}`]: e.appearance && e.appearance != "standard",
       [`mc-number-badge--${e.size}`]: e.size && e.size != "s"
     }));
-    return (t, o) => (l(), n("span", {
-      class: g(["mc-number-badge", a.value])
-    }, f(t.label), 3));
+    return (a, o) => (l(), n("span", {
+      class: g(["mc-number-badge", t.value])
+    }, f(a.label), 3));
   }
-}), Ca = /* @__PURE__ */ _(Ba, [["__scopeId", "data-v-7e6acb92"]]), Ma = ["id", "name", "value", "disabled"], za = {
+}), Sa = /* @__PURE__ */ _(Oa, [["__scopeId", "data-v-7e6acb92"]]), Pa = ["id", "name", "value", "disabled"], qa = {
   key: 0,
   value: "",
   disabled: ""
-}, La = ["value", "disabled"], Ta = /* @__PURE__ */ $({
+}, Da = ["value", "disabled"], Fa = /* @__PURE__ */ h({
   __name: "MSelect",
   props: {
     id: {},
@@ -836,31 +907,31 @@ const E = /* @__PURE__ */ _(Pe, [["render", Ne]]), Ae = ["disabled", "type"], Re
     readonly: { type: Boolean }
   },
   emits: ["update:modelValue"],
-  setup(d, { emit: e }) {
-    const a = d, t = v(() => ({
-      [`mc-select--${a.size}`]: a.size && a.size != "m",
-      "mc-select--readonly": a.readonly,
-      "is-invalid": a.isInvalid
+  setup(r, { emit: e }) {
+    const t = r, a = v(() => ({
+      [`mc-select--${t.size}`]: t.size && t.size != "m",
+      "mc-select--readonly": t.readonly,
+      "is-invalid": t.isInvalid
     })), o = e;
     return (s, i) => (l(), n("select", I({
       id: s.id,
-      class: ["mc-select", t.value],
+      class: ["mc-select", a.value],
       name: s.name,
       value: s.modelValue,
       disabled: s.disabled
     }, s.$attrs, {
       onChange: i[0] || (i[0] = (c) => o("update:modelValue", c.target.value))
     }), [
-      s.placeholder ? (l(), n("option", za, " -- " + f(s.placeholder) + " -- ", 1)) : h("", !0),
+      s.placeholder ? (l(), n("option", qa, " -- " + f(s.placeholder) + " -- ", 1)) : $("", !0),
       (l(!0), n(O, null, S(s.options, (c, p) => (l(), n("option", I({
         key: p,
         value: c.value
       }, { ref_for: !0 }, c.attributes, {
         disabled: c.disabled
-      }), f(c.text), 17, La))), 128))
-    ], 16, Ma));
+      }), f(c.text), 17, Da))), 128))
+    ], 16, Pa));
   }
-}), ja = /* @__PURE__ */ _(Ta, [["__scopeId", "data-v-68c735e4"]]), Oa = {
+}), Na = /* @__PURE__ */ _(Fa, [["__scopeId", "data-v-68c735e4"]]), Aa = {
   name: "ChevronLeft24",
   props: {
     /**
@@ -871,23 +942,23 @@ const E = /* @__PURE__ */ _(Pe, [["render", Ne]]), Ae = ["disabled", "type"], Re
       default: "currentColor"
     }
   }
-}, Sa = ["fill"];
-function qa(d, e, a, t, o, s) {
+}, Ra = ["fill"];
+function Ga(r, e, t, a, o, s) {
   return l(), n("svg", {
     "aria-hidden": "true",
-    fill: a.color,
+    fill: t.color,
     xmlns: "http://www.w3.org/2000/svg",
     viewBox: "0 0 24 24",
     width: "24",
     height: "24"
   }, e[0] || (e[0] = [
-    r("path", {
+    d("path", {
       "fill-rule": "evenodd",
       d: "M14.207 6.293a1 1 0 0 1 0 1.414L9.914 12l4.293 4.293a1 1 0 0 1-1.414 1.414l-5-5a1 1 0 0 1 0-1.414l5-5a1 1 0 0 1 1.414 0"
     }, null, -1)
-  ]), 8, Sa);
+  ]), 8, Ra);
 }
-const G = /* @__PURE__ */ _(Oa, [["render", qa]]), Da = {
+const U = /* @__PURE__ */ _(Aa, [["render", Ga]]), Ua = {
   name: "ChevronRight24",
   props: {
     /**
@@ -898,34 +969,34 @@ const G = /* @__PURE__ */ _(Oa, [["render", qa]]), Da = {
       default: "currentColor"
     }
   }
-}, Pa = ["fill"];
-function Fa(d, e, a, t, o, s) {
+}, Ha = ["fill"];
+function Ka(r, e, t, a, o, s) {
   return l(), n("svg", {
     "aria-hidden": "true",
-    fill: a.color,
+    fill: t.color,
     xmlns: "http://www.w3.org/2000/svg",
     viewBox: "0 0 24 24",
     width: "24",
     height: "24"
   }, e[0] || (e[0] = [
-    r("path", {
+    d("path", {
       "fill-rule": "evenodd",
       d: "M9.793 6.293a1 1 0 0 1 1.414 0l5 5a1 1 0 0 1 0 1.414l-5 5a1 1 0 0 1-1.414-1.414L14.086 12 9.793 7.707a1 1 0 0 1 0-1.414"
     }, null, -1)
-  ]), 8, Pa);
+  ]), 8, Ha);
 }
-const U = /* @__PURE__ */ _(Da, [["render", Fa]]), Na = {
+const H = /* @__PURE__ */ _(Ua, [["render", Ka]]), Ea = {
   class: "mc-pagination",
   role: "navigation",
   "aria-label": "pagination"
-}, Aa = {
+}, Qa = {
   key: 2,
   class: "mc-pagination__field"
-}, Ra = {
+}, Wa = {
   key: 3,
   class: "mc-pagination__label",
   "aria-current": "page"
-}, Ga = /* @__PURE__ */ $({
+}, Ja = /* @__PURE__ */ h({
   __name: "MPagination",
   props: {
     id: {},
@@ -935,96 +1006,93 @@ const U = /* @__PURE__ */ _(Da, [["render", Fa]]), Na = {
     selectLabel: {}
   },
   emits: ["update:modelValue"],
-  setup(d, { emit: e }) {
-    const a = d, t = e, o = z(a.modelValue);
-    q(o, (u) => {
-      u !== a.modelValue && t("update:modelValue", u);
+  setup(r, { emit: e }) {
+    const t = r, a = e, o = z(t.modelValue);
+    P(o, (u) => {
+      u !== t.modelValue && a("update:modelValue", u);
     });
     const s = v(
-      () => a.options.findIndex((u) => u.value === o.value)
+      () => t.options.findIndex((u) => u.value === o.value)
     ), i = v(() => s.value === 0), c = v(
-      () => s.value === a.options.length - 1
+      () => s.value === t.options.length - 1
     ), p = () => {
-      const u = a.options.findIndex(
+      const u = t.options.findIndex(
         (b) => b.value === o.value
       );
-      u > 0 && (o.value = a.options[u - 1].value, t("update:modelValue", a.options[u - 1].value));
+      u > 0 && (o.value = t.options[u - 1].value, a("update:modelValue", t.options[u - 1].value));
     }, m = () => {
-      const u = a.options.findIndex(
+      const u = t.options.findIndex(
         (b) => b.value === o.value
       );
-      u < a.options.length - 1 && (o.value = a.options[u + 1].value, t("update:modelValue", a.options[u + 1].value));
-    };
-    return (u, b) => {
-      var L;
-      return l(), n("nav", Na, [
-        u.compact ? (l(), B(D, {
-          key: 1,
-          outlined: "",
-          "aria-label": "Previous page",
-          disabled: i.value,
-          onClick: p
-        }, {
-          icon: C(() => [
-            w(G)
-          ]),
-          _: 1
-        }, 8, ["disabled"])) : (l(), B(N, {
-          key: 0,
-          "icon-position": "only",
-          "aria-label": "Previous page",
-          disabled: i.value,
-          onClick: p
-        }, {
-          icon: C(() => [
-            w(G)
-          ]),
-          _: 1
-        }, 8, ["disabled"])),
-        u.compact ? h("", !0) : (l(), n("div", Aa, [
-          w(ja, {
-            class: "mc-pagination__select",
-            id: u.id,
-            modelValue: o.value,
-            "onUpdate:modelValue": [
-              b[0] || (b[0] = (y) => o.value = y),
-              b[1] || (b[1] = (y) => t("update:modelValue", Number(y)))
-            ],
-            options: u.options,
-            "aria-label": u.selectLabel
-          }, null, 8, ["id", "modelValue", "options", "aria-label"])
-        ])),
-        u.compact ? (l(), n("span", Ra, f((L = u.options.find((y) => y.value === o.value)) == null ? void 0 : L.text), 1)) : h("", !0),
-        u.compact ? (l(), B(D, {
-          key: 5,
-          outlined: "",
-          "aria-label": "Next page",
-          disabled: c.value,
-          onClick: m
-        }, {
-          icon: C(() => [
-            w(U)
-          ]),
-          _: 1
-        }, 8, ["disabled"])) : (l(), B(N, {
-          key: 4,
-          "icon-position": "only",
-          "aria-label": "Next page",
-          disabled: c.value,
-          onClick: m
-        }, {
-          icon: C(() => [
-            w(U)
-          ]),
-          _: 1
-        }, 8, ["disabled"]))
-      ]);
+      u < t.options.length - 1 && (o.value = t.options[u + 1].value, a("update:modelValue", t.options[u + 1].value));
     };
+    return (u, b) => (l(), n("nav", Ea, [
+      u.compact ? (l(), B(D, {
+        key: 1,
+        outlined: "",
+        "aria-label": "Previous page",
+        disabled: i.value,
+        onClick: p
+      }, {
+        icon: M(() => [
+          k(U)
+        ]),
+        _: 1
+      }, 8, ["disabled"])) : (l(), B(N, {
+        key: 0,
+        "icon-position": "only",
+        "aria-label": "Previous page",
+        disabled: i.value,
+        onClick: p
+      }, {
+        icon: M(() => [
+          k(U)
+        ]),
+        _: 1
+      }, 8, ["disabled"])),
+      u.compact ? $("", !0) : (l(), n("div", Qa, [
+        k(Na, {
+          class: "mc-pagination__select",
+          id: u.id,
+          modelValue: o.value,
+          "onUpdate:modelValue": [
+            b[0] || (b[0] = (C) => o.value = C),
+            b[1] || (b[1] = (C) => a("update:modelValue", Number(C)))
+          ],
+          options: u.options,
+          "aria-label": u.selectLabel
+        }, null, 8, ["id", "modelValue", "options", "aria-label"])
+      ])),
+      u.compact ? (l(), n("span", Wa, f(u.options.find((C) => C.value === o.value)?.text), 1)) : $("", !0),
+      u.compact ? (l(), B(D, {
+        key: 5,
+        outlined: "",
+        "aria-label": "Next page",
+        disabled: c.value,
+        onClick: m
+      }, {
+        icon: M(() => [
+          k(H)
+        ]),
+        _: 1
+      }, 8, ["disabled"])) : (l(), B(N, {
+        key: 4,
+        "icon-position": "only",
+        "aria-label": "Next page",
+        disabled: c.value,
+        onClick: m
+      }, {
+        icon: M(() => [
+          k(H)
+        ]),
+        _: 1
+      }, 8, ["disabled"]))
+    ]));
   }
-}), Os = /* @__PURE__ */ _(Ga, [["__scopeId", "data-v-3b9257ac"]]), Ua = ["id", "type", "name", "placeholder", "disabled", "aria-invalid", "readonly"], Ha = {
+}), Js = /* @__PURE__ */ _(Ja, [["__scopeId", "data-v-3b9257ac"]]), Xa = ["id", "type", "name", "placeholder", "disabled", "aria-invalid", "readonly"], Ya = {
   key: 0,
   class: "mc-controls-options"
-}, Ka = { class: "mc-controls-options__label" }, Ea = /* @__PURE__ */ $({
+}, Za = { class: "mc-controls-options__label" }, xa = /* @__PURE__ */ h({
   __name: "MPasswordInput",
   props: {
     id: {},
@@ -1039,20 +1107,20 @@ const U = /* @__PURE__ */ _(Da, [["render", Fa]]), Na = {
     buttonLabel: { default: () => ({ show: "Show", hide: "Hide" }) }
   },
   emits: ["update:modelValue"],
-  setup(d, { emit: e }) {
-    const a = d, t = v(() => ({
-      "is-invalid": a.isInvalid
-    })), o = z(a.modelValue), s = z(!1), i = () => {
+  setup(r, { emit: e }) {
+    const t = r, a = v(() => ({
+      "is-invalid": t.isInvalid
+    })), o = z(t.modelValue), s = z(!1), i = () => {
       o.value = "", u("update:modelValue", "");
     }, c = () => {
       s.value = !s.value;
     }, p = v(() => s.value ? "text" : "password"), m = v(() => s.value ? "true" : "false"), u = e;
-    return (b, L) => (l(), n("div", {
-      class: g(["mc-password-input mc-text-input", t.value])
+    return (b, C) => (l(), n("div", {
+      class: g(["mc-password-input mc-text-input", a.value])
     }, [
-      H(r("input", I({
+      G(d("input", I({
         class: "mc-password-input__control mc-text-input__control",
-        "onUpdate:modelValue": L[0] || (L[0] = (y) => o.value = y),
+        "onUpdate:modelValue": C[0] || (C[0] = (y) => o.value = y),
         id: b.id,
         type: p.value,
         name: b.name,
@@ -1061,23 +1129,23 @@ const U = /* @__PURE__ */ _(Da, [["render", Fa]]), Na = {
         "aria-invalid": b.isInvalid,
         readonly: b.readonly
       }, b.$attrs, {
-        onInput: L[1] || (L[1] = (y) => u("update:modelValue", y.target.value))
-      }), null, 16, Ua), [
-        [X, o.value]
+        onInput: C[1] || (C[1] = (y) => u("update:modelValue", y.target.value))
+      }), null, 16, Xa), [
+        [E, o.value]
       ]),
-      b.isClearable && o.value ? (l(), n("div", Ha, [
-        r("button", {
+      b.isClearable && o.value ? (l(), n("div", Ya, [
+        d("button", {
           class: "mc-controls-options__button",
           onClick: i
         }, [
-          w(F, {
+          k(F, {
             class: "mc-controls-options__icon",
             "aria-hidden": "true"
           }),
-          r("span", Ka, f(b.clearLabel), 1)
+          d("span", Za, f(b.clearLabel), 1)
         ])
-      ])) : h("", !0),
-      w(N, {
+      ])) : $("", !0),
+      k(N, {
         ref: "button",
         role: "switch",
         "aria-checked": m.value,
@@ -1086,14 +1154,14 @@ const U = /* @__PURE__ */ _(Da, [["render", Fa]]), Na = {
         size: "s",
         ghost: ""
       }, {
-        default: C(() => [
-          P(f(s.value ? b.buttonLabel.hide : b.buttonLabel.show), 1)
+        default: M(() => [
+          q(f(s.value ? b.buttonLabel.hide : b.buttonLabel.show), 1)
         ]),
         _: 1
       }, 8, ["aria-checked", "disabled"])
     ], 2));
   }
-}), Ss = /* @__PURE__ */ _(Ea, [["__scopeId", "data-v-167f10e2"]]), Qa = ["id", "name", "disabled", "readonly", "value", "onInput", "onKeydown"], Wa = /* @__PURE__ */ $({
+}), Xs = /* @__PURE__ */ _(xa, [["__scopeId", "data-v-167f10e2"]]), et = ["id", "name", "disabled", "readonly", "value", "onInput", "onKeydown"], at = /* @__PURE__ */ h({
   __name: "MPincode",
   props: {
     id: {},
@@ -1105,47 +1173,43 @@ const U = /* @__PURE__ */ _(Da, [["render", Fa]]), Na = {
     readonly: { type: Boolean }
   },
   emits: ["update:modelValue"],
-  setup(d, { emit: e }) {
-    const a = d, t = v(() => ({
-      "is-invalid": a.isInvalid
-    })), o = e, s = z(Array(a.length).fill("")), i = z([]), c = (y, k) => {
-      i.value[k] = y;
+  setup(r, { emit: e }) {
+    const t = r, a = v(() => ({
+      "is-invalid": t.isInvalid
+    })), o = e, s = z(Array(t.length).fill("")), i = z([]), c = (y, V) => {
+      i.value[V] = y;
     };
-    q(
-      () => a.modelValue,
+    P(
+      () => t.modelValue,
       (y) => {
-        const k = String(y ?? "");
-        s.value = Array.from({ length: a.length }, (T, M) => k[M] ?? "");
+        const V = String(y ?? "");
+        s.value = Array.from({ length: t.length }, (T, L) => V[L] ?? "");
       },
       { immediate: !0 }
     );
     const p = (y) => {
-      Y(() => {
-        var k;
-        return (k = i.value[y]) == null ? void 0 : k.focus();
-      });
-    }, m = (y, k) => {
+      X(() => i.value[y]?.focus());
+    }, m = (y, V) => {
       const T = y.target.value.replace(/\D/g, "");
-      T ? (s.value[k] = T[0], o("update:modelValue", s.value.join("")), k + 1 < a.length && p(k + 1)) : (s.value[k] = "", o("update:modelValue", s.value.join("")));
-    }, u = (y, k) => {
-      y.key === "ArrowLeft" && k > 0 ? p(k - 1) : y.key === "ArrowRight" && k < a.length - 1 ? p(k + 1) : y.key === "Backspace" && b(y, k);
-    }, b = (y, k) => {
-      s.value[k] === "" && k > 0 && (s.value[k - 1] = "", o("update:modelValue", s.value.join("")), p(k - 1));
-    }, L = (y) => {
-      var M;
+      T ? (s.value[V] = T[0], o("update:modelValue", s.value.join("")), V + 1 < t.length && p(V + 1)) : (s.value[V] = "", o("update:modelValue", s.value.join("")));
+    }, u = (y, V) => {
+      y.key === "ArrowLeft" && V > 0 ? p(V - 1) : y.key === "ArrowRight" && V < t.length - 1 ? p(V + 1) : y.key === "Backspace" && b(y, V);
+    }, b = (y, V) => {
+      s.value[V] === "" && V > 0 && (s.value[V - 1] = "", o("update:modelValue", s.value.join("")), p(V - 1));
+    }, C = (y) => {
       y.preventDefault();
-      const T = (((M = y.clipboardData) == null ? void 0 : M.getData("text")) ?? "").replace(/\D/g, "").slice(0, a.length).split("");
-      s.value = Array.from({ length: a.length }, (j, W) => T[W] ?? ""), o("update:modelValue", s.value.join("")), p(Math.min(T.length, a.length - 1));
+      const T = (y.clipboardData?.getData("text") ?? "").replace(/\D/g, "").slice(0, t.length).split("");
+      s.value = Array.from({ length: t.length }, (L, j) => T[j] ?? ""), o("update:modelValue", s.value.join("")), p(Math.min(T.length, t.length - 1));
     };
-    return (y, k) => (l(), n("div", {
-      class: g(["mc-pincode-input", t.value]),
-      onPaste: L
+    return (y, V) => (l(), n("div", {
+      class: g(["mc-pincode-input", a.value]),
+      onPaste: C
     }, [
-      (l(!0), n(O, null, S(s.value, (T, M) => (l(), n("input", I({
-        key: M,
-        id: `pincodeItem${M}`,
+      (l(!0), n(O, null, S(s.value, (T, L) => (l(), n("input", I({
+        key: L,
+        id: `pincodeItem${L}`,
         ref_for: !0,
-        ref: (j) => c(j, M),
+        ref: (j) => c(j, L),
         type: "text",
         inputmode: "numeric",
         maxlength: "1",
@@ -1157,15 +1221,62 @@ const U = /* @__PURE__ */ _(Da, [["render", Fa]]), Na = {
         readonly: y.readonly,
         value: T
       }, { ref_for: !0 }, y.$attrs, {
-        onInput: (j) => m(j, M),
+        onInput: (j) => m(j, L),
         onKeydown: [
-          R((j) => b(j, M), ["backspace"]),
-          (j) => u(j, M)
+          R((j) => b(j, L), ["backspace"]),
+          (j) => u(j, L)
         ]
-      }), null, 16, Qa))), 128))
+      }), null, 16, et))), 128))
     ], 34));
   }
-}), qs = /* @__PURE__ */ _(Wa, [["__scopeId", "data-v-b2202545"]]), Ja = {
+}), Ys = /* @__PURE__ */ _(at, [["__scopeId", "data-v-b2202545"]]), tt = ["aria-valuenow"], st = /* @__PURE__ */ h({
+  __name: "MLinearProgressbarBuffer",
+  props: {
+    size: {},
+    value: { default: 0 }
+  },
+  setup(r) {
+    const e = r, t = v(() => ({
+      [`mc-linear-progressbar-buffer--${e.size}`]: e.size && e.size != "m"
+    }));
+    return (a, o) => (l(), n("div", {
+      class: g(["mc-linear-progressbar-buffer", t.value])
+    }, [
+      d("div", I({
+        class: "mc-linear-progressbar-buffer__indicator",
+        role: "progressbar",
+        style: `--progress-value: ${a.value};`,
+        "aria-valuenow": a.value,
+        "aria-valuemin": 0,
+        "aria-valuemax": 100
+      }, a.$attrs), null, 16, tt)
+    ], 2));
+  }
+}), Zs = /* @__PURE__ */ _(st, [["__scopeId", "data-v-aa64aedc"]]), lt = { class: "mc-linear-progressbar-percentage" }, ot = ["aria-valuenow"], nt = { class: "mc-linear-progressbar-percentage__label" }, it = { class: "mc-linear-progressbar-percentage__value" }, rt = /* @__PURE__ */ h({
+  __name: "MLinearProgressbarPercentage",
+  props: {
+    value: { default: 0 }
+  },
+  setup(r) {
+    return (e, t) => (l(), n("div", lt, [
+      d("div", I({
+        class: "mc-linear-progressbar-percentage__indicator",
+        role: "progressbar",
+        style: `--progress-value: ${e.value};`,
+        "aria-valuenow": e.value,
+        "aria-valuemin": 0,
+        "aria-valuemax": 100
+      }, e.$attrs), [
+        d("div", nt, [
+          d("p", it, [
+            q(f(e.value), 1),
+            t[0] || (t[0] = d("span", { class: "mc-linear-progressbar-percentage__unit" }, "%", -1))
+          ])
+        ])
+      ], 16, ot)
+    ]));
+  }
+}), xs = /* @__PURE__ */ _(rt, [["__scopeId", "data-v-14fbed65"]]), dt = {
   name: "More24",
   props: {
     /**
@@ -1176,23 +1287,23 @@ const U = /* @__PURE__ */ _(Da, [["render", Fa]]), Na = {
       default: "currentColor"
     }
   }
-}, Xa = ["fill"];
-function Ya(d, e, a, t, o, s) {
+}, ct = ["fill"];
+function ut(r, e, t, a, o, s) {
   return l(), n("svg", {
     "aria-hidden": "true",
-    fill: a.color,
+    fill: t.color,
     xmlns: "http://www.w3.org/2000/svg",
     viewBox: "0 0 24 24",
     width: "24",
     height: "24"
   }, e[0] || (e[0] = [
-    r("path", {
+    d("path", {
       "fill-rule": "evenodd",
       d: "M13 5a1 1 0 1 0-2 0v6H5a1 1 0 1 0 0 2h6v6a1 1 0 1 0 2 0v-6h6a1 1 0 1 0 0-2h-6z"
     }, null, -1)
-  ]), 8, Xa);
+  ]), 8, ct);
 }
-const Za = /* @__PURE__ */ _(Ja, [["render", Ya]]), xa = {
+const pt = /* @__PURE__ */ _(dt, [["render", ut]]), mt = {
   name: "Less24",
   props: {
     /**
@@ -1203,23 +1314,23 @@ const Za = /* @__PURE__ */ _(Ja, [["render", Ya]]), xa = {
       default: "currentColor"
     }
   }
-}, et = ["fill"];
-function at(d, e, a, t, o, s) {
+}, _t = ["fill"];
+function vt(r, e, t, a, o, s) {
   return l(), n("svg", {
     "aria-hidden": "true",
-    fill: a.color,
+    fill: t.color,
     xmlns: "http://www.w3.org/2000/svg",
     viewBox: "0 0 24 24",
     width: "24",
     height: "24"
   }, e[0] || (e[0] = [
-    r("path", {
+    d("path", {
       "fill-rule": "evenodd",
       d: "M6 12a1 1 0 0 1 1-1h10a1 1 0 1 1 0 2H7a1 1 0 0 1-1-1"
     }, null, -1)
-  ]), 8, et);
+  ]), 8, _t);
 }
-const tt = /* @__PURE__ */ _(xa, [["render", at]]), st = ["id", "name", "disabled", "min", "max", "step", "readonly", "aria-invalid", "aria-valuemin", "aria-valuemax", "aria-valuenow"], lt = ["aria-controls", "disabled"], ot = { class: "mc-quantity-selector__icon" }, nt = { class: "mc-quantity-selector__label" }, it = ["aria-controls", "disabled"], dt = { class: "mc-quantity-selector__icon" }, rt = { class: "mc-quantity-selector__label" }, ct = /* @__PURE__ */ $({
+const bt = /* @__PURE__ */ _(mt, [["render", vt]]), ft = ["id", "name", "disabled", "min", "max", "step", "readonly", "aria-invalid", "aria-valuemin", "aria-valuemax", "aria-valuenow"], ht = ["aria-controls", "disabled"], $t = { class: "mc-quantity-selector__icon" }, gt = { class: "mc-quantity-selector__label" }, yt = ["aria-controls", "disabled"], kt = { class: "mc-quantity-selector__icon" }, wt = { class: "mc-quantity-selector__label" }, Vt = /* @__PURE__ */ h({
   __name: "MQuantitySelector",
   props: {
     id: {},
@@ -1236,27 +1347,27 @@ const tt = /* @__PURE__ */ _(xa, [["render", at]]), st = ["id", "name", "disable
     decrementLabel: { default: "Decrement" }
   },
   emits: ["update:modelValue"],
-  setup(d, { emit: e }) {
-    const a = d, t = z(a.modelValue);
-    q(t, (m) => {
-      m !== a.modelValue && p("update:modelValue", m);
+  setup(r, { emit: e }) {
+    const t = r, a = z(t.modelValue);
+    P(a, (m) => {
+      m !== t.modelValue && p("update:modelValue", m);
     });
     const o = v(() => ({
-      [`mc-quantity-selector--${a.size}`]: a.size && a.size != "m",
-      "is-invalid": a.isInvalid
+      [`mc-quantity-selector--${t.size}`]: t.size && t.size != "m",
+      "is-invalid": t.isInvalid
     })), s = () => {
-      t.value + a.step <= a.max ? t.value += a.step : t.value = a.max;
+      a.value + t.step <= t.max ? a.value += t.step : a.value = t.max;
     }, i = () => {
-      t.value - a.step > a.min ? t.value -= a.step : t.value = a.min;
+      a.value - t.step > t.min ? a.value -= t.step : a.value = t.min;
     }, c = (m) => {
-      t.value = m, t.value > a.max && (t.value = a.max), t.value <= a.min && (t.value = a.min), p("update:modelValue", t.value);
+      a.value = m, a.value > t.max && (a.value = t.max), a.value <= t.min && (a.value = t.min), p("update:modelValue", a.value);
     }, p = e;
     return (m, u) => (l(), n("div", {
       class: g(["mc-quantity-selector", o.value])
     }, [
-      H(r("input", I({
+      G(d("input", I({
         id: m.id,
-        "onUpdate:modelValue": u[0] || (u[0] = (b) => t.value = b),
+        "onUpdate:modelValue": u[0] || (u[0] = (b) => a.value = b),
         class: "mc-quantity-selector__control",
         type: "number",
         name: m.name,
@@ -1268,43 +1379,43 @@ const tt = /* @__PURE__ */ _(xa, [["render", at]]), st = ["id", "name", "disable
         "aria-invalid": m.isInvalid,
         "aria-valuemin": m.min,
         "aria-valuemax": m.max,
-        "aria-valuenow": t.value
+        "aria-valuenow": a.value
       }, m.$attrs, {
         onChange: u[1] || (u[1] = (b) => c(Number(b.target.value)))
-      }), null, 16, st), [
-        [Z, t.value]
+      }), null, 16, ft), [
+        [Y, a.value]
       ]),
-      m.readonly ? h("", !0) : (l(), n("button", {
+      m.readonly ? $("", !0) : (l(), n("button", {
         key: 0,
         type: "button",
         "aria-controls": m.id,
         class: "mc-quantity-selector__button mc-quantity-selector__button--increase",
         tabindex: "-1",
-        disabled: m.disabled || t.value === m.max,
+        disabled: m.disabled || a.value === m.max,
         onClick: s
       }, [
-        r("span", ot, [
-          w(Za)
+        d("span", $t, [
+          k(pt)
         ]),
-        r("span", nt, f(m.incrementlabel), 1)
-      ], 8, lt)),
-      m.readonly ? h("", !0) : (l(), n("button", {
+        d("span", gt, f(m.incrementlabel), 1)
+      ], 8, ht)),
+      m.readonly ? $("", !0) : (l(), n("button", {
         key: 1,
         type: "button",
         "aria-controls": m.id,
         class: "mc-quantity-selector__button mc-quantity-selector__button--decrease",
         tabindex: "-1",
-        disabled: m.disabled || t.value === m.min,
+        disabled: m.disabled || a.value === m.min,
         onClick: i
       }, [
-        r("span", dt, [
-          w(tt)
+        d("span", kt, [
+          k(bt)
         ]),
-        r("span", rt, f(m.decrementLabel), 1)
-      ], 8, it))
+        d("span", wt, f(m.decrementLabel), 1)
+      ], 8, yt))
     ], 2));
   }
-}), Ds = /* @__PURE__ */ _(ct, [["__scopeId", "data-v-a732650a"]]), ut = { class: "mc-radio" }, pt = ["id", "name", "checked", "disabled", "aria-invalid"], mt = ["for"], _t = /* @__PURE__ */ $({
+}), el = /* @__PURE__ */ _(Vt, [["__scopeId", "data-v-a732650a"]]), It = { class: "mc-radio" }, Bt = ["id", "name", "checked", "disabled", "aria-invalid"], Ct = ["for"], Mt = /* @__PURE__ */ h({
   __name: "MRadio",
   props: {
     id: {},
@@ -1315,30 +1426,30 @@ const tt = /* @__PURE__ */ _(xa, [["render", at]]), st = ["id", "name", "disable
     disabled: { type: Boolean }
   },
   emits: ["update:modelValue"],
-  setup(d, { emit: e }) {
-    const a = d, t = v(() => ({
-      "is-invalid": a.isInvalid
+  setup(r, { emit: e }) {
+    const t = r, a = v(() => ({
+      "is-invalid": t.isInvalid
     })), o = e;
-    return (s, i) => (l(), n("div", ut, [
-      r("input", I({
+    return (s, i) => (l(), n("div", It, [
+      d("input", I({
         id: s.id,
         type: "radio",
-        class: ["mc-radio__input", t.value],
+        class: ["mc-radio__input", a.value],
         name: s.name,
         checked: s.modelValue,
         disabled: s.disabled,
         "aria-invalid": s.isInvalid
       }, s.$attrs, {
         onChange: i[0] || (i[0] = (c) => o("update:modelValue", c.target.checked))
-      }), null, 16, pt),
+      }), null, 16, Bt),
       s.label ? (l(), n("label", {
         key: 0,
         for: s.id,
         class: "mc-radio__label"
-      }, f(s.label), 9, mt)) : h("", !0)
+      }, f(s.label), 9, Ct)) : $("", !0)
     ]));
   }
-}), vt = /* @__PURE__ */ _(_t, [["__scopeId", "data-v-da78938c"]]), bt = /* @__PURE__ */ $({
+}), zt = /* @__PURE__ */ _(Mt, [["__scopeId", "data-v-da78938c"]]), Lt = /* @__PURE__ */ h({
   __name: "MRadioGroup",
   props: {
     name: {},
@@ -1348,16 +1459,16 @@ const tt = /* @__PURE__ */ _(xa, [["render", at]]), st = ["id", "name", "disable
     inline: { type: Boolean }
   },
   emits: ["update:modelValue"],
-  setup(d, { emit: e }) {
-    const a = d, t = v(() => ({
-      "mc-field__container--inline": a.inline
+  setup(r, { emit: e }) {
+    const t = r, a = v(() => ({
+      "mc-field__container--inline": t.inline
     })), o = v(() => ({
-      "mc-field__container--inline__item": a.inline
+      "mc-field__container--inline__item": t.inline
     })), s = e;
     return (i, c) => (l(), n("div", {
-      class: g(["mc-field__container", t.value])
+      class: g(["mc-field__container", a.value])
     }, [
-      (l(!0), n(O, null, S(i.options, (p) => (l(), B(vt, {
+      (l(!0), n(O, null, S(i.options, (p) => (l(), B(zt, {
         id: p.id,
         key: p.id,
         label: p.label,
@@ -1370,39 +1481,39 @@ const tt = /* @__PURE__ */ _(xa, [["render", at]]), st = ["id", "name", "disable
       }, null, 8, ["id", "label", "is-invalid", "name", "class", "model-value", "disabled", "onUpdate:modelValue"]))), 128))
     ], 2));
   }
-}), Ps = /* @__PURE__ */ _(bt, [["__scopeId", "data-v-d2f5e103"]]), ft = /* @__PURE__ */ $({
+}), al = /* @__PURE__ */ _(Lt, [["__scopeId", "data-v-d2f5e103"]]), jt = /* @__PURE__ */ h({
   __name: "MStatusDot",
   props: {
     status: { default: "info" },
     size: {}
   },
-  setup(d) {
-    const e = d, a = v(() => ({
+  setup(r) {
+    const e = r, t = v(() => ({
       [`mc-status-dot--${e.status}`]: e.status && e.status != "info",
       [`mc-status-dot--${e.size}`]: e.size && e.size != "m"
     }));
-    return (t, o) => (l(), n("span", {
-      class: g(["mc-status-dot", a.value])
+    return (a, o) => (l(), n("span", {
+      class: g(["mc-status-dot", t.value])
     }, null, 2));
   }
-}), ht = /* @__PURE__ */ _(ft, [["__scopeId", "data-v-417b563f"]]), $t = { class: "mc-status-badge__label" }, yt = /* @__PURE__ */ $({
+}), Tt = /* @__PURE__ */ _(jt, [["__scopeId", "data-v-417b563f"]]), Ot = { class: "mc-status-badge__label" }, St = /* @__PURE__ */ h({
   __name: "MStatusBadge",
   props: {
     label: {},
     status: { default: "info" }
   },
-  setup(d) {
-    const e = d, a = v(() => ({
+  setup(r) {
+    const e = r, t = v(() => ({
       [`mc-status-badge--${e.status}`]: e.status && e.status != "info"
     }));
-    return (t, o) => (l(), n("div", {
-      class: g(["mc-status-badge", a.value])
+    return (a, o) => (l(), n("div", {
+      class: g(["mc-status-badge", t.value])
     }, [
-      w(ht, { status: t.status }, null, 8, ["status"]),
-      r("span", $t, f(t.label), 1)
+      k(Tt, { status: a.status }, null, 8, ["status"]),
+      d("span", Ot, f(a.label), 1)
     ], 2));
   }
-}), Fs = /* @__PURE__ */ _(yt, [["__scopeId", "data-v-3e437a03"]]), gt = {
+}), tl = /* @__PURE__ */ _(St, [["__scopeId", "data-v-3e437a03"]]), Pt = {
   name: "Cross20",
   props: {
     /**
@@ -1413,23 +1524,23 @@ const tt = /* @__PURE__ */ _(xa, [["render", at]]), st = ["id", "name", "disable
       default: "currentColor"
     }
   }
-}, kt = ["fill"];
-function wt(d, e, a, t, o, s) {
+}, qt = ["fill"];
+function Dt(r, e, t, a, o, s) {
   return l(), n("svg", {
     "aria-hidden": "true",
-    fill: a.color,
+    fill: t.color,
     xmlns: "http://www.w3.org/2000/svg",
     viewBox: "0 0 20 20",
     width: "20",
     height: "20"
   }, e[0] || (e[0] = [
-    r("path", {
+    d("path", {
       "fill-rule": "evenodd",
       d: "M14.697 6.364a.75.75 0 1 0-1.061-1.061L10 8.939 6.363 5.303a.75.75 0 0 0-1.06 1.06L8.939 10l-3.636 3.636a.75.75 0 1 0 1.06 1.06L10 11.062l3.636 3.636a.75.75 0 0 0 1.06-1.06L11.06 10z"
     }, null, -1)
-  ]), 8, kt);
+  ]), 8, qt);
 }
-const Vt = /* @__PURE__ */ _(gt, [["render", wt]]), It = {
+const Ft = /* @__PURE__ */ _(Pt, [["render", Dt]]), Nt = {
   name: "InfoCircleFilled32",
   props: {
     /**
@@ -1440,23 +1551,23 @@ const Vt = /* @__PURE__ */ _(gt, [["render", wt]]), It = {
       default: "currentColor"
     }
   }
-}, Bt = ["fill"];
-function Ct(d, e, a, t, o, s) {
+}, At = ["fill"];
+function Rt(r, e, t, a, o, s) {
   return l(), n("svg", {
     "aria-hidden": "true",
-    fill: a.color,
+    fill: t.color,
     xmlns: "http://www.w3.org/2000/svg",
     viewBox: "0 0 32 32",
     width: "32",
     height: "32"
   }, e[0] || (e[0] = [
-    r("path", {
+    d("path", {
       "fill-rule": "evenodd",
       d: "M16 3C8.82 3 3 8.82 3 16s5.82 13 13 13 13-5.82 13-13S23.18 3 16 3m0 9a1.333 1.333 0 1 0 0-2.667A1.333 1.333 0 0 0 16 12m1 2.667a1 1 0 1 0-2 0v6.666a1 1 0 1 0 2 0z"
     }, null, -1)
-  ]), 8, Bt);
+  ]), 8, At);
 }
-const Mt = /* @__PURE__ */ _(It, [["render", Ct]]), zt = {
+const Gt = /* @__PURE__ */ _(Nt, [["render", Rt]]), Ut = {
   name: "WarningCircleFilled32",
   props: {
     /**
@@ -1467,23 +1578,23 @@ const Mt = /* @__PURE__ */ _(It, [["render", Ct]]), zt = {
       default: "currentColor"
     }
   }
-}, Lt = ["fill"];
-function Tt(d, e, a, t, o, s) {
+}, Ht = ["fill"];
+function Kt(r, e, t, a, o, s) {
   return l(), n("svg", {
     "aria-hidden": "true",
-    fill: a.color,
+    fill: t.color,
     xmlns: "http://www.w3.org/2000/svg",
     viewBox: "0 0 32 32",
     width: "32",
     height: "32"
   }, e[0] || (e[0] = [
-    r("path", {
+    d("path", {
       "fill-rule": "evenodd",
       d: "M16 3C8.82 3 3 8.82 3 16s5.82 13 13 13 13-5.82 13-13S23.18 3 16 3m1 7.667a1 1 0 1 0-2 0v6.666a1 1 0 1 0 2 0zm-1 12A1.333 1.333 0 1 0 16 20a1.333 1.333 0 0 0 0 2.667"
     }, null, -1)
-  ]), 8, Lt);
+  ]), 8, Ht);
 }
-const jt = /* @__PURE__ */ _(zt, [["render", Tt]]), Ot = {
+const Et = /* @__PURE__ */ _(Ut, [["render", Kt]]), Qt = {
   name: "CrossCircleFilled32",
   props: {
     /**
@@ -1494,23 +1605,23 @@ const jt = /* @__PURE__ */ _(zt, [["render", Tt]]), Ot = {
       default: "currentColor"
     }
   }
-}, St = ["fill"];
-function qt(d, e, a, t, o, s) {
+}, Wt = ["fill"];
+function Jt(r, e, t, a, o, s) {
   return l(), n("svg", {
     "aria-hidden": "true",
-    fill: a.color,
+    fill: t.color,
     xmlns: "http://www.w3.org/2000/svg",
     viewBox: "0 0 32 32",
     width: "32",
     height: "32"
   }, e[0] || (e[0] = [
-    r("path", {
+    d("path", {
       "fill-rule": "evenodd",
       d: "M16 3C8.82 3 3 8.82 3 16s5.82 13 13 13 13-5.82 13-13S23.18 3 16 3m-4.707 8.293a1 1 0 0 1 1.414 0L16 14.586l3.293-3.293a1 1 0 0 1 1.414 1.414L17.414 16l3.293 3.293a1 1 0 0 1-1.414 1.414L16 17.414l-3.293 3.293a1 1 0 0 1-1.414-1.414L14.586 16l-3.293-3.293a1 1 0 0 1 0-1.414"
     }, null, -1)
-  ]), 8, St);
+  ]), 8, Wt);
 }
-const Dt = /* @__PURE__ */ _(Ot, [["render", qt]]), Pt = {
+const Xt = /* @__PURE__ */ _(Qt, [["render", Jt]]), Yt = {
   name: "CheckCircleFilled32",
   props: {
     /**
@@ -1521,26 +1632,26 @@ const Dt = /* @__PURE__ */ _(Ot, [["render", qt]]), Pt = {
       default: "currentColor"
     }
   }
-}, Ft = ["fill"];
-function Nt(d, e, a, t, o, s) {
+}, Zt = ["fill"];
+function xt(r, e, t, a, o, s) {
   return l(), n("svg", {
     "aria-hidden": "true",
-    fill: a.color,
+    fill: t.color,
     xmlns: "http://www.w3.org/2000/svg",
     viewBox: "0 0 32 32",
     width: "32",
     height: "32"
   }, e[0] || (e[0] = [
-    r("path", {
+    d("path", {
       "fill-rule": "evenodd",
       d: "M16 3C8.82 3 3 8.82 3 16s5.82 13 13 13 13-5.82 13-13S23.18 3 16 3m6.707 8.96a1 1 0 0 1 0 1.414l-7.333 7.333a1 1 0 0 1-1.414 0l-4-4a1 1 0 1 1 1.414-1.414l3.293 3.293 6.626-6.626a1 1 0 0 1 1.414 0"
     }, null, -1)
-  ]), 8, Ft);
+  ]), 8, Zt);
 }
-const At = /* @__PURE__ */ _(Pt, [["render", Nt]]), Rt = { class: "mc-status-notification__content" }, Gt = { class: "mc-status-notification__title" }, Ut = { class: "mc-status-notification__message" }, Ht = {
+const es = /* @__PURE__ */ _(Yt, [["render", xt]]), as = { class: "mc-status-notification__content" }, ts = { class: "mc-status-notification__title" }, ss = { class: "mc-status-notification__message" }, ls = {
   key: 0,
   class: "mc-status-notification__footer"
-}, Kt = /* @__PURE__ */ $({
+}, os = /* @__PURE__ */ h({
   __name: "MStatusNotification",
   props: {
     title: {},
@@ -1549,54 +1660,54 @@ const At = /* @__PURE__ */ _(Pt, [["render", Nt]]), Rt = { class: "mc-status-not
     closable: { type: Boolean }
   },
   emits: ["close"],
-  setup(d, { emit: e }) {
-    const a = d, t = v(() => ({
-      [`mc-status-notification--${a.status}`]: a.status && a.status != "info"
+  setup(r, { emit: e }) {
+    const t = r, a = v(() => ({
+      [`mc-status-notification--${t.status}`]: t.status && t.status != "info"
     })), o = v(() => {
-      switch (a.status) {
+      switch (t.status) {
         case "success":
-          return At;
+          return es;
         case "warning":
-          return jt;
+          return Et;
         case "error":
-          return Dt;
+          return Xt;
         case "info":
         default:
-          return Mt;
+          return Gt;
       }
     }), s = e;
     return (i, c) => (l(), n("section", {
-      class: g(["mc-status-notification", t.value]),
+      class: g(["mc-status-notification", a.value]),
       role: "status"
     }, [
       (l(), B(A(o.value), {
         class: "mc-status-notification__icon",
         "aria-hidden": "true"
       })),
-      r("div", Rt, [
-        r("h2", Gt, f(i.title), 1),
-        r("p", Ut, f(i.description), 1),
-        i.$slots.footer ? (l(), n("div", Ht, [
-          V(i.$slots, "footer", {}, void 0, !0)
-        ])) : h("", !0)
+      d("div", as, [
+        d("h2", ts, f(i.title), 1),
+        d("p", ss, f(i.description), 1),
+        i.$slots.footer ? (l(), n("div", ls, [
+          w(i.$slots, "footer", {}, void 0, !0)
+        ])) : $("", !0)
       ]),
       i.closable ? (l(), n("button", {
         key: 0,
         class: "mc-status-notification-closable__close",
         onClick: c[0] || (c[0] = (p) => s("close"))
       }, [
-        w(Vt, {
+        k(Ft, {
           class: "mc-status-notification-closable__icon",
           "aria-hidden": "true"
         }),
-        c[1] || (c[1] = r("span", { class: "mc-status-notification-closable__text" }, "Close", -1))
-      ])) : h("", !0)
+        c[1] || (c[1] = d("span", { class: "mc-status-notification-closable__text" }, "Close", -1))
+      ])) : $("", !0)
     ], 2));
   }
-}), Ns = /* @__PURE__ */ _(Kt, [["__scopeId", "data-v-457733a1"]]), Et = ["aria-label"], Qt = ["aria-selected", "onClick"], Wt = {
+}), sl = /* @__PURE__ */ _(os, [["__scopeId", "data-v-457733a1"]]), ns = ["aria-label"], is = ["aria-selected", "onClick"], rs = {
   key: 0,
   class: "mc-tabs__icon"
-}, Jt = { class: "mc-tabs__label" }, Xt = /* @__PURE__ */ $({
+}, ds = { class: "mc-tabs__label" }, cs = /* @__PURE__ */ h({
   __name: "MTabs",
   props: {
     description: {},
@@ -1606,16 +1717,16 @@ const At = /* @__PURE__ */ _(Pt, [["render", Nt]]), Rt = { class: "mc-status-not
     tabs: {}
   },
   emits: ["update:modelValue"],
-  setup(d, { emit: e }) {
-    const a = d, t = v(() => ({
-      "mc-tabs--centered": a.centered
-    })), o = z(a.modelValue), s = (p) => {
-      a.tabs[p].disabled || p !== o.value && (o.value = p, c("update:modelValue", p));
+  setup(r, { emit: e }) {
+    const t = r, a = v(() => ({
+      "mc-tabs--centered": t.centered
+    })), o = z(t.modelValue), s = (p) => {
+      t.tabs[p].disabled || p !== o.value && (o.value = p, c("update:modelValue", p));
     }, i = (p) => o.value === p, c = e;
     return (p, m) => (l(), n("nav", {
-      class: g(["mc-tabs", t.value])
+      class: g(["mc-tabs", a.value])
     }, [
-      r("ul", {
+      d("ul", {
         role: "tablist",
         class: "mc-tabs__list",
         "aria-label": p.description
@@ -1625,7 +1736,7 @@ const At = /* @__PURE__ */ _(Pt, [["render", Nt]]), Rt = { class: "mc-status-not
           role: "presentation",
           class: "mc-tabs__item"
         }, [
-          r("button", {
+          d("button", {
             ref_for: !0,
             ref: "tab",
             role: "tab",
@@ -1635,21 +1746,21 @@ const At = /* @__PURE__ */ _(Pt, [["render", Nt]]), Rt = { class: "mc-status-not
             }]),
             "aria-selected": i(b),
             type: "button",
-            onClick: (L) => s(b)
+            onClick: (C) => s(b)
           }, [
-            u.icon ? (l(), n("span", Wt, [
+            u.icon ? (l(), n("span", rs, [
               (l(), B(A(u.icon)))
-            ])) : h("", !0),
-            r("div", Jt, [
-              r("span", null, f(u.label), 1)
+            ])) : $("", !0),
+            d("div", ds, [
+              d("span", null, f(u.label), 1)
             ])
-          ], 10, Qt)
+          ], 10, is)
         ]))), 128))
-      ], 8, Et),
-      p.divider ? (l(), B(je, { key: 0 })) : h("", !0)
+      ], 8, ns),
+      p.divider ? (l(), B(Ne, { key: 0 })) : $("", !0)
     ], 2));
   }
-}), As = /* @__PURE__ */ _(Xt, [["__scopeId", "data-v-3919f834"]]), Yt = ["for"], Zt = ["id", "name", "checked", "disabled"], xt = { class: "mc-tag__label" }, es = ["disabled"], as = { class: "mc-tag__label" }, ts = ["disabled"], ss = { class: "mc-tag__label" }, ls = { class: "mc-tag__label" }, os = { class: "mc-tag__label" }, ns = /* @__PURE__ */ $({
+}), ll = /* @__PURE__ */ _(cs, [["__scopeId", "data-v-3919f834"]]), us = ["for"], ps = ["id", "name", "checked", "disabled"], ms = { class: "mc-tag__label" }, _s = ["disabled"], vs = { class: "mc-tag__label" }, bs = ["disabled"], fs = { class: "mc-tag__label" }, hs = { class: "mc-tag__label" }, $s = { class: "mc-tag__label" }, gs = /* @__PURE__ */ h({
   __name: "MTag",
   props: {
     type: { default: "informative" },
@@ -1663,17 +1774,17 @@ const At = /* @__PURE__ */ _(Pt, [["render", Nt]]), Rt = { class: "mc-status-not
     removableLabel: {}
   },
   emits: ["update:modelValue", "remove-tag"],
-  setup(d, { emit: e }) {
-    const a = d, t = v(() => ({
-      [`mc-tag-${a.type}`]: a.type && a.type != "informative",
-      [`mc-tag--${a.size}`]: a.size && a.size != "m"
+  setup(r, { emit: e }) {
+    const t = r, a = v(() => ({
+      [`mc-tag-${t.type}`]: t.type && t.type != "informative",
+      [`mc-tag--${t.size}`]: t.size && t.size != "m"
     })), o = e;
     return (s, i) => s.type === "selectable" ? (l(), n("label", {
       key: 0,
       for: s.id,
-      class: g(["mc-tag", t.value])
+      class: g(["mc-tag", a.value])
     }, [
-      r("input", I({
+      d("input", I({
         type: "checkbox",
         class: "mc-tag__input",
         id: s.id,
@@ -1681,51 +1792,51 @@ const At = /* @__PURE__ */ _(Pt, [["render", Nt]]), Rt = { class: "mc-status-not
         checked: s.modelValue,
         disabled: s.disabled,
         onChange: i[0] || (i[0] = (c) => o("update:modelValue", c.target.checked))
-      }, s.$attrs), null, 16, Zt),
-      r("span", xt, f(s.label), 1)
-    ], 10, Yt)) : s.type === "interactive" ? (l(), n("button", I({
+      }, s.$attrs), null, 16, ps),
+      d("span", ms, f(s.label), 1)
+    ], 10, us)) : s.type === "interactive" ? (l(), n("button", I({
       key: 1,
-      class: ["mc-tag", t.value],
+      class: ["mc-tag", a.value],
       type: "button",
       disabled: s.disabled
     }, s.$attrs), [
-      r("span", as, f(s.label), 1)
-    ], 16, es)) : s.type === "contextualised" ? (l(), n("button", I({
+      d("span", vs, f(s.label), 1)
+    ], 16, _s)) : s.type === "contextualised" ? (l(), n("button", I({
       key: 2,
-      class: ["mc-tag", t.value],
+      class: ["mc-tag", a.value],
       type: "button",
       disabled: s.disabled
     }, s.$attrs), [
-      w(Ca, {
+      k(Sa, {
         appearance: "inverse",
         label: s.contextualisedNumber,
         size: s.size === "l" ? "m" : void 0
       }, null, 8, ["label", "size"]),
-      r("span", ss, f(s.label), 1)
-    ], 16, ts)) : s.type === "removable" ? (l(), n("span", I({
+      d("span", fs, f(s.label), 1)
+    ], 16, bs)) : s.type === "removable" ? (l(), n("span", I({
       key: 3,
-      class: ["mc-tag", t.value]
+      class: ["mc-tag", a.value]
     }, s.$attrs), [
-      r("span", ls, f(s.label), 1),
-      r("button", {
+      d("span", hs, f(s.label), 1),
+      d("button", {
         class: "mc-tag-removable__remove",
         type: "button",
         onClick: i[1] || (i[1] = (c) => s.id && o("remove-tag", s.id))
       }, [
-        w(F, {
+        k(F, {
           class: "mc-tag-removable__icon",
           "aria-hidden": "true"
         }),
-        i[2] || (i[2] = r("span", { class: "mc-tag-removable__text" }, "removableLabel", -1))
+        i[2] || (i[2] = d("span", { class: "mc-tag-removable__text" }, "removableLabel", -1))
       ])
     ], 16)) : (l(), n("span", I({
       key: 4,
-      class: ["mc-tag", t.value]
+      class: ["mc-tag", a.value]
     }, s.$attrs), [
-      r("span", os, f(s.label), 1)
+      d("span", $s, f(s.label), 1)
     ], 16));
   }
-}), Rs = /* @__PURE__ */ _(ns, [["__scopeId", "data-v-a3166010"]]), is = ["id", "aria-invalid", "value", "name", "placeholder", "disabled", "minlength", "maxlength", "rows", "readonly"], ds = /* @__PURE__ */ $({
+}), ol = /* @__PURE__ */ _(gs, [["__scopeId", "data-v-a3166010"]]), ys = ["id", "aria-invalid", "value", "name", "placeholder", "disabled", "minlength", "maxlength", "rows", "readonly"], ks = /* @__PURE__ */ h({
   __name: "MTextArea",
   props: {
     id: {},
@@ -1740,13 +1851,13 @@ const At = /* @__PURE__ */ _(Pt, [["render", Nt]]), Rt = { class: "mc-status-not
     readonly: { type: Boolean }
   },
   emits: ["update:modelValue"],
-  setup(d, { emit: e }) {
-    const a = d, t = v(() => ({
-      "is-invalid": a.isInvalid
+  setup(r, { emit: e }) {
+    const t = r, a = v(() => ({
+      "is-invalid": t.isInvalid
     })), o = e;
     return (s, i) => (l(), n("textarea", I({
       id: s.id,
-      class: ["mc-textarea", t.value],
+      class: ["mc-textarea", a.value],
       "aria-invalid": s.isInvalid,
       value: s.modelValue,
       name: s.name,
@@ -1758,15 +1869,15 @@ const At = /* @__PURE__ */ _(Pt, [["render", Nt]]), Rt = { class: "mc-status-not
       readonly: s.readonly
     }, s.$attrs, {
       onInput: i[0] || (i[0] = (c) => o("update:modelValue", c.target.value))
-    }), null, 16, is));
+    }), null, 16, ys));
   }
-}), Gs = /* @__PURE__ */ _(ds, [["__scopeId", "data-v-8184b69c"]]), rs = {
+}), nl = /* @__PURE__ */ _(ks, [["__scopeId", "data-v-8184b69c"]]), ws = {
   key: 0,
   class: "mc-text-input__icon"
-}, cs = ["id", "value", "type", "name", "placeholder", "disabled", "aria-invalid", "readonly"], us = {
+}, Vs = ["id", "type", "name", "placeholder", "disabled", "aria-invalid", "readonly"], Is = {
   key: 1,
   class: "mc-controls-options"
-}, ps = /* @__PURE__ */ $({
+}, Bs = /* @__PURE__ */ h({
   __name: "MTextInput",
   props: {
     id: {},
@@ -1782,23 +1893,23 @@ const At = /* @__PURE__ */ _(Pt, [["render", Nt]]), Rt = { class: "mc-status-not
     clearLabel: { default: "clear content" }
   },
   emits: ["update:modelValue"],
-  setup(d, { emit: e }) {
-    const a = d, t = v(() => ({
-      [`mc-text-input--${a.size}`]: a.size && a.size != "m",
-      "is-invalid": a.isInvalid
-    })), o = z(a.modelValue), s = () => {
+  setup(r, { emit: e }) {
+    const t = r, a = v(() => ({
+      [`mc-text-input--${t.size}`]: t.size && t.size != "m",
+      "is-invalid": t.isInvalid
+    })), o = z(t.modelValue), s = () => {
       o.value = "", i("update:modelValue", "");
     }, i = e;
     return (c, p) => (l(), n("div", {
-      class: g(["mc-text-input", t.value])
+      class: g(["mc-text-input", a.value])
     }, [
-      c.$slots.icon ? (l(), n("span", rs, [
-        V(c.$slots, "icon", {}, void 0, !0)
-      ])) : h("", !0),
-      r("input", I({
+      c.$slots.icon ? (l(), n("span", ws, [
+        w(c.$slots, "icon", {}, void 0, !0)
+      ])) : $("", !0),
+      G(d("input", I({
         id: c.id,
         class: "mc-text-input__control",
-        value: o.value,
+        "onUpdate:modelValue": p[0] || (p[0] = (m) => o.value = m),
         type: c.inputType,
         name: c.name,
         placeholder: c.placeholder,
@@ -1806,24 +1917,26 @@ const At = /* @__PURE__ */ _(Pt, [["render", Nt]]), Rt = { class: "mc-status-not
         "aria-invalid": c.isInvalid,
         readonly: c.readonly
       }, c.$attrs, {
-        onInput: p[0] || (p[0] = (m) => i("update:modelValue", m.target.value))
-      }), null, 16, cs),
-      c.isClearable && o.value ? (l(), n("div", us, [
-        r("button", {
+        onInput: p[1] || (p[1] = (m) => i("update:modelValue", m.target.value))
+      }), null, 16, Vs), [
+        [E, o.value]
+      ]),
+      c.isClearable && o.value ? (l(), n("div", Is, [
+        d("button", {
           type: "button",
           class: "mc-controls-options__button",
           onClick: s
         }, [
-          w(F, {
+          k(F, {
             class: "mc-controls-options__icon",
             "aria-hidden": "true"
           }),
-          p[1] || (p[1] = r("span", { class: "mc-controls-options__label" }, "{clearLabel}", -1))
+          p[2] || (p[2] = d("span", { class: "mc-controls-options__label" }, "{clearLabel}", -1))
         ])
-      ])) : h("", !0)
+      ])) : $("", !0)
     ], 2));
   }
-}), Us = /* @__PURE__ */ _(ps, [["__scopeId", "data-v-38f67338"]]), ms = ["for"], _s = ["id", "name", "checked", "disabled"], vs = ["for"], bs = /* @__PURE__ */ $({
+}), il = /* @__PURE__ */ _(Bs, [["__scopeId", "data-v-4fb14aba"]]), Cs = ["for"], Ms = ["id", "name", "checked", "disabled"], zs = ["for"], Ls = /* @__PURE__ */ h({
   __name: "MToggle",
   props: {
     id: {},
@@ -1834,18 +1947,18 @@ const At = /* @__PURE__ */ _(Pt, [["render", Nt]]), Rt = { class: "mc-status-not
     disabled: { type: Boolean }
   },
   emits: ["update:modelValue"],
-  setup(d, { emit: e }) {
-    const a = d, t = v(() => ({
-      [`mc-toggle--${a.size}`]: a.size && a.size != "s"
+  setup(r, { emit: e }) {
+    const t = r, a = v(() => ({
+      [`mc-toggle--${t.size}`]: t.size && t.size != "s"
     })), o = e;
     return (s, i) => (l(), n("div", {
-      class: g(["mc-toggle", t.value])
+      class: g(["mc-toggle", a.value])
     }, [
-      r("label", {
+      d("label", {
         class: "mc-toggle__container",
         for: s.id
       }, [
-        r("input", I({
+        d("input", I({
           id: s.id,
           type: "checkbox",
           class: "mc-toggle__input",
@@ -1854,16 +1967,16 @@ const At = /* @__PURE__ */ _(Pt, [["render", Nt]]), Rt = { class: "mc-status-not
           disabled: s.disabled
         }, s.$attrs, {
           onChange: i[0] || (i[0] = (c) => o("update:modelValue", c.target.checked))
-        }), null, 16, _s),
+        }), null, 16, Ms),
         s.label ? (l(), n("span", {
           key: 0,
           for: s.id,
           class: "mc-toggle__label"
-        }, f(s.label), 9, vs)) : h("", !0)
-      ], 8, ms)
+        }, f(s.label), 9, zs)) : $("", !0)
+      ], 8, Cs)
     ], 2));
   }
-}), fs = /* @__PURE__ */ _(bs, [["__scopeId", "data-v-5be734e7"]]), hs = { class: "tooltip-story-wrapper" }, $s = ["aria-describedby"], ys = ["id"], gs = /* @__PURE__ */ $({
+}), js = /* @__PURE__ */ _(Ls, [["__scopeId", "data-v-5be734e7"]]), Ts = { class: "tooltip-story-wrapper" }, Os = ["aria-describedby"], Ss = ["id"], Ps = /* @__PURE__ */ h({
   __name: "MTooltip",
   props: {
     id: {},
@@ -1871,26 +1984,26 @@ const At = /* @__PURE__ */ _(Pt, [["render", Nt]]), Rt = { class: "mc-status-not
     position: { default: "top" },
     pointer: { type: Boolean, default: !0 }
   },
-  setup(d) {
-    const e = d, a = v(() => ({
+  setup(r) {
+    const e = r, t = v(() => ({
       [`mc-tooltip--${e.position}`]: e.position,
       "mc-tooltip--no-pointer": !e.pointer
     }));
-    return (t, o) => (l(), n("div", hs, [
-      r("div", {
-        class: g(["mc-tooltip", a.value]),
-        "aria-describedby": t.id
+    return (a, o) => (l(), n("div", Ts, [
+      d("div", {
+        class: g(["mc-tooltip", t.value]),
+        "aria-describedby": a.id
       }, [
-        V(t.$slots, "default", {}, void 0, !0),
-        r("span", {
-          id: t.id,
+        w(a.$slots, "default", {}, void 0, !0),
+        d("span", {
+          id: a.id,
           class: "mc-tooltip__content",
           role: "tooltip"
-        }, f(t.text), 9, ys)
-      ], 10, $s)
+        }, f(a.text), 9, Ss)
+      ], 10, Os)
     ]));
   }
-}), Hs = /* @__PURE__ */ _(gs, [["__scopeId", "data-v-fbbb2707"]]), ks = /* @__PURE__ */ $({
+}), rl = /* @__PURE__ */ _(Ps, [["__scopeId", "data-v-f90a7be6"]]), qs = /* @__PURE__ */ h({
   __name: "MToggleGroup",
   props: {
     name: {},
@@ -1899,27 +2012,27 @@ const At = /* @__PURE__ */ _(Pt, [["render", Nt]]), Rt = { class: "mc-status-not
     inline: { type: Boolean }
   },
   emits: ["update:modelValue"],
-  setup(d, { emit: e }) {
-    const a = d, t = z([]);
-    q(
-      () => a.modelValue,
+  setup(r, { emit: e }) {
+    const t = r, a = z([]);
+    P(
+      () => t.modelValue,
       (p) => {
-        t.value = p || [];
+        a.value = p || [];
       },
       { immediate: !0 }
     );
     const o = (p, m) => {
-      let u = [...t.value];
-      p && !u.includes(m) ? u.push(m) : u = u.filter((b) => b !== m), c("update:modelValue", u), t.value = u;
+      let u = [...a.value];
+      p && !u.includes(m) ? u.push(m) : u = u.filter((b) => b !== m), c("update:modelValue", u), a.value = u;
     }, s = v(() => ({
-      "mc-field__container--inline": a.inline
+      "mc-field__container--inline": t.inline
     })), i = v(() => ({
-      "mc-field__container--inline__item": a.inline
+      "mc-field__container--inline__item": t.inline
     })), c = e;
     return (p, m) => (l(), n("div", {
       class: g(s.value)
     }, [
-      (l(!0), n(O, null, S(p.options, (u) => (l(), B(fs, {
+      (l(!0), n(O, null, S(p.options, (u) => (l(), B(js, {
         id: u.id,
         key: u.id,
         label: u.label,
@@ -1932,40 +2045,44 @@ const At = /* @__PURE__ */ _(Pt, [["render", Nt]]), Rt = { class: "mc-status-not
       }, null, 8, ["id", "label", "is-invalid", "name", "class", "model-value", "disabled", "onUpdate:modelValue"]))), 128))
     ], 2));
   }
-}), Ks = /* @__PURE__ */ _(ks, [["__scopeId", "data-v-c6b10172"]]);
+}), dl = /* @__PURE__ */ _(qs, [["__scopeId", "data-v-c6b10172"]]);
 export {
-  Vs as MBreadcrumb,
+  Fs as MBreadcrumb,
   N as MButton,
   ge as MCheckbox,
-  Is as MCheckboxGroup,
-  Bs as MDatepicker,
-  je as MDivider,
-  Cs as MDrawer,
-  Ms as MField,
-  zs as MFieldGroup,
-  Ls as MFlag,
+  Ns as MCheckboxGroup,
+  As as MCircularProgressbar,
+  Rs as MContainer,
+  Gs as MDatepicker,
+  Ne as MDivider,
+  Us as MDrawer,
+  Hs as MField,
+  Ks as MFieldGroup,
+  Es as MFlag,
   D as MIconButton,
-  se as MLink,
-  K as MLoader,
-  Ts as MLoadingOverlay,
-  js as MModal,
-  Ca as MNumberBadge,
-  Q as MOverlay,
-  Os as MPagination,
-  Ss as MPasswordInput,
-  qs as MPincode,
-  Ds as MQuantitySelector,
-  vt as MRadio,
-  Ps as MRadioGroup,
-  ja as MSelect,
-  Fs as MStatusBadge,
-  Ns as MStatusNotification,
-  As as MTabs,
-  Rs as MTag,
-  Gs as MTextArea,
-  Us as MTextInput,
-  fs as MToggle,
-  Ks as MToggleGroup,
-  Hs as MTooltip
+  Zs as MLinearProgressbarBuffer,
+  xs as MLinearProgressbarPercentage,
+  te as MLink,
+  Q as MLoader,
+  Qs as MLoadingOverlay,
+  Ws as MModal,
+  Sa as MNumberBadge,
+  J as MOverlay,
+  Js as MPagination,
+  Xs as MPasswordInput,
+  Ys as MPincode,
+  el as MQuantitySelector,
+  zt as MRadio,
+  al as MRadioGroup,
+  Na as MSelect,
+  tl as MStatusBadge,
+  sl as MStatusNotification,
+  ll as MTabs,
+  ol as MTag,
+  nl as MTextArea,
+  il as MTextInput,
+  js as MToggle,
+  dl as MToggleGroup,
+  rl as MTooltip
 };
 //# sourceMappingURL=mozaic-vue.js.map