@mozaic-ds/vue 2.6.0 → 2.7.0

package/dist/mozaic-vue.js

@@ -1,101 +1,103 @@
-import { defineComponent as $, computed as v, createElementBlock as i, openBlock as o, normalizeClass as g, renderSlot as k, createBlock as B, resolveDynamicComponent as F, withCtx as M, createCommentVNode as h, createElementVNode as d, Fragment as P, renderList as D, createVNode as w, createTextVNode as q, toDisplayString as b, normalizeStyle as H, mergeProps as I, ref as z, watch as T, withKeys as R, withDirectives as K, vModelDynamic as ee, nextTick as ae, vModelText as te, onMounted as se, onBeforeUnmount as oe } from "vue";
-const le = /* @__PURE__ */ $({
+import { defineComponent as _, computed as b, createElementBlock as o, openBlock as s, normalizeClass as h, renderSlot as y, createBlock as C, resolveDynamicComponent as D, mergeProps as V, withCtx as B, createCommentVNode as f, createElementVNode as c, Fragment as T, renderList as S, createVNode as k, createTextVNode as P, toDisplayString as p, normalizeStyle as U, ref as M, watch as z, withKeys as N, withDirectives as K, vModelDynamic as te, nextTick as ae, vModelText as se, onMounted as le, onBeforeUnmount as ne } from "vue";
+const oe = /* @__PURE__ */ _({
   __name: "MAvatar",
   props: {
     size: { default: "s" }
   },
-  setup(r) {
-    const e = r, a = v(() => ({
-      [`mc-avatar--${e.size}`]: e.size && e.size != "s"
+  setup(e) {
+    const a = e, t = b(() => ({
+      [`mc-avatar--${a.size}`]: a.size && a.size != "s"
     }));
-    return (t, n) => (o(), i("span", {
-      class: g(["mc-avatar", a.value])
+    return (l, n) => (s(), o("span", {
+      class: h(["mc-avatar", t.value])
     }, [
-      k(t.$slots, "default", {}, void 0, !0)
+      y(l.$slots, "default", {}, void 0, !0)
     ], 2));
   }
-}), m = (r, e) => {
-  const a = r.__vccOpts || r;
-  for (const [t, n] of e)
-    a[t] = n;
-  return a;
-}, Ys = /* @__PURE__ */ m(le, [["__scopeId", "data-v-4fdb6762"]]), ne = {
+}), v = (e, a) => {
+  const t = e.__vccOpts || e;
+  for (const [l, n] of a)
+    t[l] = n;
+  return t;
+}, Ys = /* @__PURE__ */ v(oe, [["__scopeId", "data-v-9ebdb5d7"]]), ie = {
   key: 0,
   class: "mc-link__icon",
   "aria-hidden": "true"
-}, ie = { class: "mc-link__label" }, re = {
+}, ce = { class: "mc-link__label" }, de = {
   key: 1,
   class: "mc-link__icon",
   "aria-hidden": "true"
-}, de = /* @__PURE__ */ $({
+}, re = /* @__PURE__ */ _({
   __name: "MLink",
   props: {
     iconPosition: { default: "left" },
     appearance: { default: "standard" },
     size: { default: "s" },
-    href: { default: void 0 },
-    target: { default: void 0 },
+    href: {},
+    target: {},
     inline: { type: Boolean },
     router: { type: Boolean }
   },
-  setup(r) {
-    const e = r, a = 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, n) => (o(), B(F(t.router ? "router-link" : "a"), {
-      class: g(["mc-link", a.value]),
-      href: t.href,
-      target: t.target,
-      to: t.router ? t.href : void 0
-    }, {
-      default: M(() => [
-        t.$slots.icon && t.iconPosition == "left" ? (o(), i("span", ne, [
-          k(t.$slots, "icon", {}, void 0, !0)
-        ])) : h("", !0),
-        d("span", ie, [
-          k(t.$slots, "default", {}, void 0, !0)
+  setup(e) {
+    const a = e, t = b(() => ({
+      [`mc-link--${a.appearance}`]: a.appearance && a.appearance != "standard",
+      [`mc-link--${a.size}`]: a.size && a.size != "s",
+      "mc-link--inline": a.inline,
+      "mc-link--stand-alone": !a.inline
+    })), l = b(() => a.router ? {
+      to: a.href,
+      target: a.target
+    } : {
+      href: a.href,
+      target: a.target
+    });
+    return (n, i) => (s(), C(D(e.router ? "router-link" : "a"), V({
+      class: ["mc-link", t.value]
+    }, l.value), {
+      default: B(() => [
+        n.$slots.icon && e.iconPosition == "left" ? (s(), o("span", ie, [
+          y(n.$slots, "icon", {}, void 0, !0)
+        ])) : f("", !0),
+        c("span", ce, [
+          y(n.$slots, "default", {}, void 0, !0)
         ]),
-        t.$slots.icon && t.iconPosition == "right" ? (o(), i("span", re, [
-          k(t.$slots, "icon", {}, void 0, !0)
-        ])) : h("", !0)
+        n.$slots.icon && e.iconPosition == "right" ? (s(), o("span", de, [
+          y(n.$slots, "icon", {}, void 0, !0)
+        ])) : f("", !0)
       ]),
       _: 3
-    }, 8, ["class", "href", "target", "to"]));
+    }, 16, ["class"]));
   }
-}), ce = /* @__PURE__ */ m(de, [["__scopeId", "data-v-df607c25"]]), ue = { class: "mc-breadcrumb__container" }, pe = /* @__PURE__ */ $({
+}), ue = /* @__PURE__ */ v(re, [["__scopeId", "data-v-b300cd23"]]), me = { class: "mc-breadcrumb__container" }, ve = /* @__PURE__ */ _({
   __name: "MBreadcrumb",
   props: {
     appearance: {},
     links: {}
   },
-  setup(r) {
-    const e = r, a = v(() => ({
-      [`mc-breadcrumb--${e.appearance}`]: e.appearance && e.appearance != "standard"
-    })), t = (n) => n === (e.links?.length ?? 0) - 1;
-    return (n, s) => (o(), i("nav", {
-      class: g(["mc-breadcrumb", a.value]),
-      "aria-label": "Breadcrumb"
+  setup(e) {
+    const a = e, t = b(() => ({
+      [`mc-breadcrumb--${a.appearance}`]: a.appearance && a.appearance != "standard"
+    })), l = (n) => n === (a.links?.length ?? 0) - 1;
+    return (n, i) => (s(), o("nav", {
+      class: h(["mc-breadcrumb", t.value])
     }, [
-      d("ul", ue, [
-        (o(!0), i(P, null, D(n.links, (l, p) => (o(), i("li", {
+      c("ul", me, [
+        (s(!0), o(T, null, S(e.links, (d, u) => (s(), o("li", {
           class: "mc-breadcrumb__item",
-          key: `breadcrumb-${p}`
+          key: `breadcrumb-${u}`
         }, [
-          w(ce, {
-            href: l.href,
-            router: l.router,
-            appearance: n.appearance,
+          k(ue, {
+            href: d.href,
+            router: d.router,
+            appearance: e.appearance,
             inline: "",
-            class: g({
-              "mc-breadcrumb__current": t(p)
+            class: h({
+              "mc-breadcrumb__current": l(u)
             }),
-            "aria-current": t(p) ? "page" : void 0
+            "aria-current": l(u) ? "page" : void 0
           }, {
-            default: M(() => [
-              q(b(l.label), 1)
+            default: B(() => [
+              P(p(d.label), 1)
             ]),
             _: 2
           }, 1032, ["href", "router", "appearance", "class", "aria-current"])
@@ -103,84 +105,84 @@ const le = /* @__PURE__ */ $({
       ])
     ], 2));
   }
-}), Zs = /* @__PURE__ */ m(pe, [["__scopeId", "data-v-41249412"]]), me = { class: "mc-loader__spinner" }, _e = ["viewBox"], ve = ["r"], be = {
+}), Zs = /* @__PURE__ */ v(ve, [["__scopeId", "data-v-0cf6e2a5"]]), be = { class: "mc-loader__spinner" }, pe = ["viewBox"], fe = ["r"], _e = {
   key: 0,
   class: "mc-loader__text",
   role: "status"
-}, fe = /* @__PURE__ */ $({
+}, he = /* @__PURE__ */ _({
   __name: "MLoader",
   props: {
     appearance: { default: "standard" },
     size: { default: "m" },
     text: {}
   },
-  setup(r) {
-    const e = r, a = 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(() => {
-      let s;
-      switch (e.size) {
+  setup(e) {
+    const a = e, t = b(() => ({
+      [`mc-loader--${a.size}`]: a.size && a.size !== "m",
+      [`mc-loader--${a.appearance}`]: a.appearance && a.appearance !== "standard",
+      "mc-loader--text-visible": a.text
+    })), l = b(() => {
+      let i;
+      switch (a.size) {
         case "s":
-          s = "0 0 24 24";
+          i = "0 0 24 24";
           break;
         case "l":
-          s = "0 0 64 64";
+          i = "0 0 64 64";
           break;
         default:
-          s = "0 0 32 32";
+          i = "0 0 32 32";
       }
-      return s;
-    }), n = v(() => {
-      let s;
-      switch (e.size) {
+      return i;
+    }), n = b(() => {
+      let i;
+      switch (a.size) {
         case "s":
-          s = 6;
+          i = 6;
           break;
         case "l":
-          s = 19;
+          i = 19;
           break;
         default:
-          s = 9;
+          i = 9;
       }
-      return s;
+      return i;
     });
-    return (s, l) => (o(), i("div", {
-      class: g(["mc-loader", a.value])
+    return (i, d) => (s(), o("div", {
+      class: h(["mc-loader", t.value])
     }, [
-      d("span", me, [
-        (o(), i("svg", {
+      c("span", be, [
+        (s(), o("svg", {
           class: "mc-loader__icon",
           xmlns: "http://www.w3.org/2000/svg",
-          viewBox: t.value,
+          viewBox: l.value,
           "aria-hidden": "true"
         }, [
-          d("circle", {
+          c("circle", {
             class: "mc-loader__path",
             cx: "50%",
             cy: "50%",
             r: n.value
-          }, null, 8, ve)
-        ], 8, _e))
+          }, null, 8, fe)
+        ], 8, pe))
       ]),
-      s.text ? (o(), i("p", be, b(s.text), 1)) : h("", !0)
+      e.text ? (s(), o("p", _e, p(e.text), 1)) : f("", !0)
     ], 2));
   }
-}), E = /* @__PURE__ */ m(fe, [["__scopeId", "data-v-998c550b"]]), he = ["disabled", "type"], $e = {
+}), H = /* @__PURE__ */ v(he, [["__scopeId", "data-v-8561f851"]]), $e = ["disabled", "type"], ge = {
   key: 0,
   class: "mc-button__icon"
-}, ge = {
+}, ye = {
   key: 1,
   class: "mc-button__icon",
   style: { position: "absolute" }
-}, ye = {
+}, ke = {
   key: 2,
   class: "mc-button__icon"
-}, ke = {
+}, we = {
   key: 4,
   class: "mc-button__icon"
-}, we = /* @__PURE__ */ $({
+}, Ve = /* @__PURE__ */ _({
   __name: "MButton",
   props: {
     appearance: { default: "standard" },
@@ -192,45 +194,76 @@ const le = /* @__PURE__ */ $({
     type: { default: "button" },
     isLoading: { type: Boolean }
   },
-  setup(r) {
-    const e = r, a = 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"
+  setup(e) {
+    const a = e, t = b(() => ({
+      [`mc-button--${a.appearance}`]: a.appearance && a.appearance != "standard",
+      [`mc-button--${a.size}`]: a.size && a.size != "m",
+      "mc-button--ghost": a.ghost,
+      "mc-button--outlined": a.outlined,
+      "mc-button--icon-only": a.iconPosition == "only"
     }));
-    return (t, n) => (o(), i("button", {
-      class: g(["mc-button", a.value]),
-      disabled: t.disabled,
-      type: t.type
+    return (l, n) => (s(), o("button", {
+      class: h(["mc-button", t.value]),
+      disabled: e.disabled,
+      type: e.type
     }, [
-      t.$slots.icon && t.iconPosition == "left" && !t.isLoading ? (o(), i("span", $e, [
-        k(t.$slots, "icon", {}, void 0, !0)
-      ])) : h("", !0),
-      t.isLoading ? (o(), i("span", ge, [
-        w(E, {
+      l.$slots.icon && e.iconPosition == "left" && !e.isLoading ? (s(), o("span", ge, [
+        y(l.$slots, "icon", {}, void 0, !0)
+      ])) : f("", !0),
+      e.isLoading ? (s(), o("span", ye, [
+        k(H, {
           style: { color: "currentColor" },
           size: "s"
         })
-      ])) : h("", !0),
-      t.$slots.icon && t.iconPosition == "only" ? (o(), i("span", ye, [
-        k(t.$slots, "icon", {}, void 0, !0)
-      ])) : (o(), i("span", {
+      ])) : f("", !0),
+      l.$slots.icon && e.iconPosition == "only" ? (s(), o("span", ke, [
+        y(l.$slots, "icon", {}, void 0, !0)
+      ])) : (s(), o("span", {
         key: 3,
         class: "mc-button__label",
-        style: H({ visibility: t.isLoading ? "hidden" : "visible" })
+        style: U({ visibility: e.isLoading ? "hidden" : "visible" })
       }, [
-        k(t.$slots, "default", {}, () => [
-          n[0] || (n[0] = q("Button Label", -1))
+        y(l.$slots, "default", {}, () => [
+          n[0] || (n[0] = P("Button Label", -1))
         ], !0)
       ], 4)),
-      t.$slots.icon && t.iconPosition == "right" && !t.isLoading ? (o(), i("span", ke, [
-        k(t.$slots, "icon", {}, void 0, !0)
-      ])) : h("", !0)
-    ], 10, he));
+      l.$slots.icon && e.iconPosition == "right" && !e.isLoading ? (s(), o("span", we, [
+        y(l.$slots, "icon", {}, void 0, !0)
+      ])) : f("", !0)
+    ], 10, $e));
+  }
+}), F = /* @__PURE__ */ v(Ve, [["__scopeId", "data-v-e66a02e3"]]), Ie = { class: "mc-callout__icon" }, Ce = { class: "mc-callout__content" }, xe = { class: "mc-callout__title" }, Be = { class: "mc-callout__message" }, Me = {
+  key: 0,
+  class: "mc-callout__footer"
+}, ze = /* @__PURE__ */ _({
+  __name: "MCallout",
+  props: {
+    title: {},
+    description: {},
+    appearance: { default: "standard" }
+  },
+  setup(e) {
+    const a = e, t = b(() => ({
+      [`mc-callout--${a.appearance}`]: a.appearance && a.appearance != "standard"
+    }));
+    return (l, n) => (s(), o("section", {
+      class: h(["mc-callout", t.value]),
+      role: "status"
+    }, [
+      c("div", Ie, [
+        y(l.$slots, "icon", {}, void 0, !0)
+      ]),
+      c("div", Ce, [
+        c("h2", xe, p(e.title), 1),
+        c("p", Be, p(e.description), 1),
+        l.$slots.footer ? (s(), o("div", Me, [
+          y(l.$slots, "footer", {}, void 0, !0)
+        ])) : f("", !0)
+      ])
+    ], 2));
   }
-}), N = /* @__PURE__ */ m(we, [["__scopeId", "data-v-f4f43ab6"]]), Ve = ["id", "name", "checked", "indeterminate", "disabled", "aria-invalid"], Ie = ["for"], Be = /* @__PURE__ */ $({
+}), el = /* @__PURE__ */ v(ze, [["__scopeId", "data-v-0f26ffb7"]]), Le = ["id", "name", "checked", "indeterminate", "disabled", "aria-invalid"], je = ["for"], Oe = /* @__PURE__ */ _({
+  inheritAttrs: !1,
   __name: "MCheckbox",
   props: {
     id: {},
@@ -243,35 +276,35 @@ const le = /* @__PURE__ */ $({
     indented: { type: Boolean }
   },
   emits: ["update:modelValue"],
-  setup(r, { emit: e }) {
-    const a = r, t = v(() => ({
-      "is-invalid": a.isInvalid
-    })), n = v(() => ({
-      "mc-checkbox--indented": a.indented
-    })), s = e;
-    return (l, p) => (o(), i("div", {
-      class: g(["mc-checkbox", n.value])
+  setup(e, { emit: a }) {
+    const t = e, l = b(() => ({
+      "is-invalid": t.isInvalid
+    })), n = b(() => ({
+      "mc-checkbox--indented": t.indented
+    })), i = a;
+    return (d, u) => (s(), o("div", {
+      class: h(["mc-checkbox", n.value])
     }, [
-      d("input", I({
-        id: l.id,
+      c("input", V({
+        id: e.id,
         type: "checkbox",
-        class: ["mc-checkbox__input", t.value],
-        name: l.name,
-        checked: l.modelValue,
-        indeterminate: l.indeterminate,
-        disabled: l.disabled,
-        "aria-invalid": l.isInvalid
-      }, l.$attrs, {
-        onChange: p[0] || (p[0] = (u) => s("update:modelValue", u.target.checked))
-      }), null, 16, Ve),
-      l.label ? (o(), i("label", {
+        class: ["mc-checkbox__input", l.value],
+        name: e.name,
+        checked: e.modelValue,
+        indeterminate: e.indeterminate,
+        disabled: e.disabled,
+        "aria-invalid": e.isInvalid
+      }, d.$attrs, {
+        onChange: u[0] || (u[0] = (m) => i("update:modelValue", m.target.checked))
+      }), null, 16, Le),
+      e.label ? (s(), o("label", {
         key: 0,
-        for: l.id,
+        for: e.id,
         class: "mc-checkbox__label"
-      }, b(l.label), 9, Ie)) : h("", !0)
+      }, p(e.label), 9, je)) : f("", !0)
     ], 2));
   }
-}), Ce = /* @__PURE__ */ m(Be, [["__scopeId", "data-v-cb502704"]]), Me = /* @__PURE__ */ $({
+}), Te = /* @__PURE__ */ v(Oe, [["__scopeId", "data-v-829485d4"]]), Se = /* @__PURE__ */ _({
   __name: "MCheckboxGroup",
   props: {
     name: {},
@@ -280,50 +313,50 @@ const le = /* @__PURE__ */ $({
     inline: { type: Boolean }
   },
   emits: ["update:modelValue"],
-  setup(r, { emit: e }) {
-    const a = r, t = z([]);
-    T(
-      () => a.modelValue,
-      (u) => {
-        t.value = u || [];
+  setup(e, { emit: a }) {
+    const t = e, l = M([]);
+    z(
+      () => t.modelValue,
+      (m) => {
+        l.value = m || [];
       },
       { immediate: !0 }
     );
-    const n = (u, _) => {
-      let c = [...t.value];
-      u && !c.includes(_) ? c.push(_) : c = c.filter((f) => f !== _), p("update:modelValue", c), t.value = c;
-    }, s = v(() => ({
-      "mc-field__container--inline": a.inline
-    })), l = v(() => ({
-      "mc-field__container--inline__item": a.inline
-    })), p = e;
-    return (u, _) => (o(), i("div", {
-      class: g(["mc-field__container", s.value])
+    const n = (m, g) => {
+      let r = [...l.value];
+      m && !r.includes(g) ? r.push(g) : r = r.filter(($) => $ !== g), u("update:modelValue", r), l.value = r;
+    }, i = b(() => ({
+      "mc-field__container--inline": t.inline
+    })), d = b(() => ({
+      "mc-field__container--inline__item": t.inline
+    })), u = a;
+    return (m, g) => (s(), o("div", {
+      class: h(["mc-field__container", i.value])
     }, [
-      (o(!0), i(P, null, D(u.options, (c) => (o(), B(Ce, {
-        id: c.id,
-        key: c.id,
-        label: c.label,
-        "is-invalid": c.isInvalid,
-        name: u.name,
-        class: g(["mc-field__item", l.value]),
-        "model-value": u.modelValue ? u.modelValue.includes(c.value) : void 0,
-        disabled: c.disabled,
-        indented: c.indented,
-        "onUpdate:modelValue": (f) => n(f, c.value)
+      (s(!0), o(T, null, S(e.options, (r) => (s(), C(Te, {
+        id: r.id,
+        key: r.id,
+        label: r.label,
+        "is-invalid": r.isInvalid,
+        name: e.name,
+        class: h(["mc-field__item", d.value]),
+        "model-value": e.modelValue ? e.modelValue.includes(r.value) : void 0,
+        disabled: r.disabled,
+        indented: r.indented,
+        "onUpdate:modelValue": ($) => n($, r.value)
       }, null, 8, ["id", "label", "is-invalid", "name", "class", "model-value", "disabled", "indented", "onUpdate:modelValue"]))), 128))
     ], 2));
   }
-}), xs = /* @__PURE__ */ m(Me, [["__scopeId", "data-v-b5cb6446"]]), ze = ["aria-valuenow"], Le = {
+}), tl = /* @__PURE__ */ v(Se, [["__scopeId", "data-v-ede2973f"]]), Ae = ["aria-valuenow"], Pe = {
   key: 0,
   class: "mc-circular-progressbar__percentage"
-}, je = { class: "mc-circular-progressbar__value" }, Oe = {
+}, De = { class: "mc-circular-progressbar__value" }, qe = {
   key: 1,
   class: "mc-circular-progressbar__content"
-}, Te = { class: "mc-circular-progressbar__number" }, Se = {
+}, Fe = { class: "mc-circular-progressbar__number" }, Ne = {
   key: 0,
   class: "mc-circular-progressbar__text"
-}, Pe = /* @__PURE__ */ $({
+}, Re = /* @__PURE__ */ _({
   __name: "MCircularProgressbar",
   props: {
     size: {},
@@ -332,93 +365,63 @@ const le = /* @__PURE__ */ $({
     contentValue: {},
     additionalInfo: {}
   },
-  setup(r) {
-    const e = r, a = v(() => ({
-      [`mc-circular-progressbar--${e.size}`]: e.size && e.size != "l"
+  setup(e) {
+    const a = e, t = b(() => ({
+      [`mc-circular-progressbar--${a.size}`]: a.size && a.size != "l"
     }));
-    return (t, n) => (o(), i("div", {
-      class: g(["mc-circular-progressbar", a.value]),
+    return (l, n) => (s(), o("div", {
+      class: h(["mc-circular-progressbar", t.value]),
       role: "progressbar",
-      style: H(`--progress-value: ${t.value};`),
-      "aria-valuenow": t.value,
+      style: U(`--progress-value: ${e.value};`),
+      "aria-valuenow": e.value,
       "aria-valuemin": 0,
       "aria-valuemax": 100
     }, [
-      n[1] || (n[1] = d("svg", {
+      n[1] || (n[1] = c("svg", {
         class: "mc-circular-progressbar__line",
         xmlns: "http://www.w3.org/2000/svg",
         "aria-hidden": "true",
         viewBox: "0 0 100 100"
       }, [
-        d("circle", {
+        c("circle", {
           class: "mc-circular-progressbar__track",
           cx: "50",
           cy: "50",
           r: "46"
         }),
-        d("circle", {
+        c("circle", {
           class: "mc-circular-progressbar__indicator",
           cx: "50",
           cy: "50",
           r: "46"
         })
       ], -1)),
-      t.type === "percentage" ? (o(), i("div", Le, [
-        d("p", je, b(t.value), 1),
-        n[0] || (n[0] = d("p", { class: "mc-circular-progressbar__unit" }, "%", -1))
-      ])) : h("", !0),
-      t.type === "content" ? (o(), i("div", Oe, [
-        d("p", Te, b(t.contentValue), 1),
-        t.additionalInfo ? (o(), i("p", Se, b(t.additionalInfo), 1)) : h("", !0)
-      ])) : h("", !0)
-    ], 14, ze));
-  }
-}), eo = /* @__PURE__ */ m(Pe, [["__scopeId", "data-v-ec931b7f"]]), De = { class: "mc-callout__icon" }, qe = { class: "mc-callout__content" }, Fe = { class: "mc-callout__title" }, Ae = { class: "mc-callout__message" }, Ne = {
-  key: 0,
-  class: "mc-callout__footer"
-}, Re = /* @__PURE__ */ $({
-  __name: "MCallout",
-  props: {
-    title: {},
-    description: {},
-    appearance: { default: "standard" }
-  },
-  setup(r) {
-    const e = r, a = v(() => ({
-      [`mc-callout--${e.appearance}`]: e.appearance && e.appearance != "standard"
-    }));
-    return (t, n) => (o(), i("section", {
-      class: g(["mc-callout", a.value]),
-      role: "status"
-    }, [
-      d("div", De, [
-        k(t.$slots, "icon", {}, void 0, !0)
-      ]),
-      d("div", qe, [
-        d("h2", Fe, b(t.title), 1),
-        d("p", Ae, b(t.description), 1),
-        t.$slots.footer ? (o(), i("div", Ne, [
-          k(t.$slots, "footer", {}, void 0, !0)
-        ])) : h("", !0)
-      ])
-    ], 2));
+      e.type === "percentage" ? (s(), o("div", Pe, [
+        c("p", De, p(e.value), 1),
+        n[0] || (n[0] = c("p", { class: "mc-circular-progressbar__unit" }, "%", -1))
+      ])) : f("", !0),
+      e.type === "content" ? (s(), o("div", qe, [
+        c("p", Fe, p(e.contentValue), 1),
+        e.additionalInfo ? (s(), o("p", Ne, p(e.additionalInfo), 1)) : f("", !0)
+      ])) : f("", !0)
+    ], 14, Ae));
   }
-}), ao = /* @__PURE__ */ m(Re, [["__scopeId", "data-v-b8152dc3"]]), Ge = /* @__PURE__ */ $({
+}), al = /* @__PURE__ */ v(Re, [["__scopeId", "data-v-f37d31c9"]]), Ge = /* @__PURE__ */ _({
   __name: "MContainer",
   props: {
     fluid: { type: Boolean }
   },
-  setup(r) {
-    const e = r, a = v(() => ({
-      "ml-container--fluid": e.fluid
+  setup(e) {
+    const a = e, t = b(() => ({
+      "ml-container--fluid": a.fluid
     }));
-    return (t, n) => (o(), i("div", {
-      class: g(["ml-container", a.value])
+    return (l, n) => (s(), o("div", {
+      class: h(["ml-container", t.value])
     }, [
-      k(t.$slots, "default", {}, void 0, !0)
+      y(l.$slots, "default", {}, void 0, !0)
     ], 2));
   }
-}), to = /* @__PURE__ */ m(Ge, [["__scopeId", "data-v-7e690cca"]]), Ue = {
+}), sl = /* @__PURE__ */ v(Ge, [["__scopeId", "data-v-e0acf0a2"]]), Ue = {
   name: "CrossCircleFilled24",
   props: {
     /**
@@ -429,26 +432,27 @@ const le = /* @__PURE__ */ $({
       default: "currentColor"
     }
   }
-}, He = ["fill"];
-function Ke(r, e, a, t, n, s) {
-  return o(), i("svg", {
+}, Ke = ["fill"];
+function He(e, a, t, l, n, i) {
+  return s(), o("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] = [
-    d("path", {
+  }, [...a[0] || (a[0] = [
+    c("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, He);
+  ])], 8, Ke);
 }
-const A = /* @__PURE__ */ m(Ue, [["render", Ke]]), Ee = ["id", "value", "name", "disabled", "aria-invalid", "readonly"], Qe = {
+const q = /* @__PURE__ */ v(Ue, [["render", He]]), Ee = ["id", "value", "name", "disabled", "aria-invalid", "readonly"], Qe = {
   key: 0,
   class: "mc-datepicker__controls-options mc-controls-options"
-}, Je = { class: "mc-controls-options__label" }, We = /* @__PURE__ */ $({
+}, Je = { class: "mc-controls-options__label" }, We = /* @__PURE__ */ _({
+  inheritAttrs: !1,
   __name: "MDatepicker",
   props: {
     id: {},
@@ -462,64 +466,64 @@ const A = /* @__PURE__ */ m(Ue, [["render", Ke]]), Ee = ["id", "value", "name",
     clearLabel: { default: "clear content" }
   },
   emits: ["update:modelValue"],
-  setup(r, { emit: e }) {
-    const a = r, t = v(() => ({
-      [`mc-text-input--${a.size} mc-datepicker--${a.size}`]: a.size && a.size != "m",
-      "is-invalid": a.isInvalid
-    })), n = z(a.modelValue), s = () => {
-      n.value = "", l("update:modelValue", "");
-    }, l = e;
-    return (p, u) => (o(), i("div", {
-      class: g(["mc-datepicker mc-text-input", t.value])
+  setup(e, { emit: a }) {
+    const t = e, l = b(() => ({
+      [`mc-text-input--${t.size} mc-datepicker--${t.size}`]: t.size && t.size != "m",
+      "is-invalid": t.isInvalid
+    })), n = M(t.modelValue), i = () => {
+      n.value = "", d("update:modelValue", "");
+    }, d = a;
+    return (u, m) => (s(), o("div", {
+      class: h(["mc-datepicker mc-text-input", l.value])
     }, [
-      d("input", I({
-        id: p.id,
+      c("input", V({
+        id: e.id,
         class: "mc-datepicker__control mc-text-input__control",
         value: n.value,
         type: "date",
-        name: p.name,
-        disabled: p.disabled,
-        "aria-invalid": p.isInvalid,
-        readonly: p.readonly
-      }, p.$attrs, {
-        onInput: u[0] || (u[0] = (_) => l("update:modelValue", _.target.value))
+        name: e.name,
+        disabled: e.disabled,
+        "aria-invalid": e.isInvalid,
+        readonly: e.readonly
+      }, u.$attrs, {
+        onInput: m[0] || (m[0] = (g) => d("update:modelValue", g.target.value))
       }), null, 16, Ee),
-      p.isClearable && n.value ? (o(), i("div", Qe, [
-        d("button", {
+      e.isClearable && n.value ? (s(), o("div", Qe, [
+        c("button", {
           type: "button",
           class: "mc-controls-options__button",
-          onClick: s
+          onClick: i
         }, [
-          w(A, {
+          k(q, {
             class: "mc-controls-options__icon",
             "aria-hidden": "true"
           }),
-          d("span", Je, b(p.clearLabel), 1)
+          c("span", Je, p(e.clearLabel), 1)
         ])
-      ])) : h("", !0)
+      ])) : f("", !0)
     ], 2));
   }
-}), so = /* @__PURE__ */ m(We, [["__scopeId", "data-v-0c5cddc2"]]), Xe = { class: "mc-divider" }, Ye = /* @__PURE__ */ $({
+}), ll = /* @__PURE__ */ v(We, [["__scopeId", "data-v-e9a7bac9"]]), Xe = { class: "mc-divider" }, Ye = /* @__PURE__ */ _({
   __name: "MDivider",
   props: {
     orientation: { default: "horizontal" },
-    style: { default: "primary" },
+    appearance: { default: "primary" },
     size: { default: "s" }
   },
-  setup(r) {
-    const e = r, a = 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"
+  setup(e) {
+    const a = e, t = b(() => ({
+      [`mc-divider-${a.orientation}`]: a.orientation,
+      [`mc-divider-horizontal--${a.appearance}`]: a.appearance && a.appearance != "primary",
+      [`mc-divider-horizontal--${a.size}`]: a.size && a.size != "s"
     }));
-    return (t, n) => (o(), i("div", Xe, [
-      d("div", {
-        class: g(a.value)
+    return (l, n) => (s(), o("div", Xe, [
+      c("div", {
+        class: h(t.value)
       }, null, 2),
-      k(t.$slots, "default", {}, void 0, !0)
+      y(l.$slots, "default", {}, void 0, !0)
     ]));
   }
-}), Ze = /* @__PURE__ */ m(Ye, [["__scopeId", "data-v-9af5a704"]]), xe = {
+}), Ze = /* @__PURE__ */ v(Ye, [["__scopeId", "data-v-49acd035"]]), et = {
   name: "ArrowBack24",
   props: {
     /**
@@ -530,23 +534,23 @@ const A = /* @__PURE__ */ m(Ue, [["render", Ke]]), Ee = ["id", "value", "name",
       default: "currentColor"
     }
   }
-}, ea = ["fill"];
-function aa(r, e, a, t, n, s) {
-  return o(), i("svg", {
+}, tt = ["fill"];
+function at(e, a, t, l, n, i) {
+  return s(), o("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] = [
-    d("path", {
+  }, [...a[0] || (a[0] = [
+    c("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, ea);
+  ])], 8, tt);
 }
-const ta = /* @__PURE__ */ m(xe, [["render", aa]]), sa = {
+const st = /* @__PURE__ */ v(et, [["render", at]]), lt = {
   name: "Cross24",
   props: {
     /**
@@ -557,23 +561,23 @@ const ta = /* @__PURE__ */ m(xe, [["render", aa]]), sa = {
       default: "currentColor"
     }
   }
-}, oa = ["fill"];
-function la(r, e, a, t, n, s) {
-  return o(), i("svg", {
+}, nt = ["fill"];
+function ot(e, a, t, l, n, i) {
+  return s(), o("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] = [
-    d("path", {
+  }, [...a[0] || (a[0] = [
+    c("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, oa);
+  ])], 8, nt);
 }
-const Q = /* @__PURE__ */ m(sa, [["render", la]]), na = ["disabled", "type"], ia = { class: "mc-button__icon" }, ra = /* @__PURE__ */ $({
+const E = /* @__PURE__ */ v(lt, [["render", ot]]), it = ["disabled", "type"], ct = { class: "mc-button__icon" }, dt = /* @__PURE__ */ _({
   __name: "MIconButton",
   props: {
     appearance: { default: "standard" },
@@ -583,58 +587,56 @@ const Q = /* @__PURE__ */ m(sa, [["render", la]]), na = ["disabled", "type"], ia
     outlined: { type: Boolean },
     type: { default: "button" }
   },
-  setup(r) {
-    const e = r, a = 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
+  setup(e) {
+    const a = e, t = b(() => ({
+      [`mc-button--${a.appearance}`]: a.appearance && a.appearance != "standard",
+      [`mc-button--${a.size}`]: a.size && a.size != "m",
+      "mc-button--ghost": a.ghost,
+      "mc-button--outlined": a.outlined
     }));
-    return (t, n) => (o(), i("button", {
-      class: g(["mc-button mc-button--icon-button", a.value]),
-      disabled: t.disabled,
-      type: t.type
+    return (l, n) => (s(), o("button", {
+      class: h(["mc-button mc-button--icon-button", t.value]),
+      disabled: e.disabled,
+      type: e.type
     }, [
-      d("span", ia, [
-        k(t.$slots, "icon", {}, void 0, !0)
+      c("span", ct, [
+        y(l.$slots, "icon", {}, void 0, !0)
       ])
-    ], 10, na));
+    ], 10, it));
   }
-}), S = /* @__PURE__ */ m(ra, [["__scopeId", "data-v-abf78562"]]), da = ["aria-labelledby"], ca = /* @__PURE__ */ $({
+}), A = /* @__PURE__ */ v(dt, [["__scopeId", "data-v-a6332bf4"]]), rt = ["aria-labelledby"], ut = /* @__PURE__ */ _({
   __name: "MOverlay",
   props: {
     isVisible: { type: Boolean },
     dialogLabel: {}
   },
-  setup(r) {
-    return (e, a) => (o(), i("div", {
-      class: g(["mc-overlay", { "is-visible": e.isVisible }])
+  setup(e) {
+    return (a, t) => (s(), o("div", {
+      class: h(["mc-overlay", { "is-visible": e.isVisible }])
     }, [
-      d("div", {
+      c("div", {
         role: "dialog",
         tabindex: "-1",
         "aria-labelledby": e.dialogLabel
       }, [
-        k(e.$slots, "default", {}, void 0, !0)
-      ], 8, da)
+        y(a.$slots, "default", {}, void 0, !0)
+      ], 8, rt)
     ], 2));
   }
-}), J = /* @__PURE__ */ m(ca, [["__scopeId", "data-v-db90fdb3"]]), ua = ["aria-modal", "aria-hidden"], pa = {
+}), Q = /* @__PURE__ */ v(ut, [["__scopeId", "data-v-c69efda4"]]), mt = ["aria-modal", "aria-hidden"], vt = {
   class: "mc-drawer__dialog",
   role: "document"
-}, ma = { class: "mc-drawer__header" }, _a = {
-  class: "mc-drawer__title",
-  id: "drawerTitle"
-}, va = { class: "mc-drawer__body" }, ba = {
+}, bt = { class: "mc-drawer__header" }, pt = { class: "mc-drawer__body" }, ft = {
   class: "mc-drawer__content",
   tabindex: "0"
-}, fa = {
+}, _t = {
   key: 0,
   class: "mc-drawer__content__title"
-}, ha = {
+}, ht = {
   key: 0,
   class: "mc-drawer__footer"
-}, $a = /* @__PURE__ */ $({
+}, $t = /* @__PURE__ */ _({
+  inheritAttrs: !1,
   __name: "MDrawer",
   props: {
     open: { type: Boolean },
@@ -645,82 +647,92 @@ const Q = /* @__PURE__ */ m(sa, [["render", la]]), na = ["disabled", "type"], ia
     contentTitle: {}
   },
   emits: ["update:open", "back"],
-  setup(r, { emit: e }) {
-    const a = r, t = v(() => ({
-      "is-open": a.open,
-      "mc-drawer--extend": a.extended,
-      [`mc-drawer--${a.position}`]: a.position && a.position != "right"
+  setup(e, { emit: a }) {
+    const t = e, l = b(() => ({
+      "is-open": t.open,
+      "mc-drawer--extend": t.extended,
+      [`mc-drawer--${t.position}`]: t.position && t.position != "right"
     }));
-    T(
-      () => a.open,
-      (l) => {
-        s("update:open", l);
+    z(
+      () => t.open,
+      (u) => {
+        d("update:open", u);
       }
     );
-    const n = () => {
-      s("update:open", !1);
-    }, s = e;
-    return (l, p) => (o(), B(J, {
-      "is-visible": l.open,
+    const n = M(null);
+    z(() => t.open, (u) => {
+      u && n.value && n.value.focus();
+    });
+    const i = () => {
+      d("update:open", !1);
+    }, d = a;
+    return (u, m) => (s(), C(Q, {
+      "is-visible": e.open,
       dialogLabel: "drawerTitle"
     }, {
-      default: M(() => [
-        d("section", I({
-          class: ["mc-drawer", t.value],
+      default: B(() => [
+        c("section", V({
+          class: ["mc-drawer", l.value],
           role: "dialog",
           "aria-labelledby": "drawerTitle",
-          "aria-modal": l.open ? "true" : "false",
+          "aria-modal": e.open ? "true" : "false",
           tabindex: "-1",
-          "aria-hidden": !l.open
-        }, l.$attrs, {
-          onKeydown: R(n, ["esc"])
+          "aria-hidden": !e.open
+        }, u.$attrs, {
+          onKeydown: N(i, ["esc"])
         }), [
-          d("div", pa, [
-            d("div", ma, [
-              l.back ? (o(), B(S, {
+          c("div", vt, [
+            c("div", bt, [
+              e.back ? (s(), C(A, {
                 key: 0,
                 class: "mc-drawer__back",
                 "aria-label": "Back",
                 ghost: "",
-                onClick: p[0] || (p[0] = (u) => s("back"))
+                onClick: m[0] || (m[0] = (g) => d("back"))
               }, {
-                icon: M(() => [
-                  w(ta, { "aria-hidden": "true" })
+                icon: B(() => [
+                  k(st, { "aria-hidden": "true" })
                 ]),
                 _: 1
-              })) : h("", !0),
-              d("h2", _a, b(l.title), 1),
-              w(S, {
+              })) : f("", !0),
+              c("h2", {
+                class: "mc-drawer__title",
+                tabindex: "-1",
+                id: "drawerTitle",
+                ref_key: "titleRef",
+                ref: n
+              }, p(e.title), 513),
+              k(A, {
                 class: "mc-drawer__close",
                 "aria-label": "Close",
                 ghost: "",
-                onClick: n
+                onClick: i
               }, {
-                icon: M(() => [
-                  w(Q, { "aria-hidden": "true" })
+                icon: B(() => [
+                  k(E, { "aria-hidden": "true" })
                 ]),
                 _: 1
               })
             ]),
-            d("div", va, [
-              d("div", ba, [
-                l.contentTitle ? (o(), i("h2", fa, b(l.contentTitle), 1)) : h("", !0),
-                k(l.$slots, "default", {}, void 0, !0)
+            c("div", pt, [
+              c("div", ft, [
+                e.contentTitle ? (s(), o("h2", _t, p(e.contentTitle), 1)) : f("", !0),
+                y(u.$slots, "default", {}, void 0, !0)
               ])
             ]),
-            l.$slots.footer ? (o(), i("div", ha, [
-              k(l.$slots, "footer", {}, void 0, !0)
-            ])) : h("", !0)
+            u.$slots.footer ? (s(), o("div", ht, [
+              y(u.$slots, "footer", {}, void 0, !0)
+            ])) : f("", !0)
           ])
-        ], 16, ua)
+        ], 16, mt)
       ]),
       _: 3
     }, 8, ["is-visible"]));
   }
-}), oo = /* @__PURE__ */ m($a, [["__scopeId", "data-v-673a796c"]]), ga = { class: "mc-field" }, ya = ["for"], ka = {
+}), nl = /* @__PURE__ */ v($t, [["__scopeId", "data-v-89771581"]]), gt = { class: "mc-field" }, yt = ["for"], kt = {
   key: 0,
   class: "mc-field__requirement"
-}, wa = ["id"], Va = { class: "mc-field__content" }, Ia = ["id"], Ba = /* @__PURE__ */ $({
+}, wt = ["id"], Vt = { class: "mc-field__content" }, It = ["id"], Ct = /* @__PURE__ */ _({
   __name: "MField",
   props: {
     id: {},
@@ -733,41 +745,41 @@ const Q = /* @__PURE__ */ m(sa, [["render", la]]), na = ["disabled", "type"], ia
     messageId: {},
     message: {}
   },
-  setup(r) {
-    const e = r, a = v(() => ({
-      "is-valid": e.isValid,
-      "is-invalid": e.isInvalid
+  setup(e) {
+    const a = e, t = b(() => ({
+      "is-valid": a.isValid,
+      "is-invalid": a.isInvalid
     }));
-    return (t, n) => (o(), i("div", ga, [
-      d("label", {
+    return (l, n) => (s(), o("div", gt, [
+      c("label", {
         class: "mc-field__label",
-        for: t.id
+        for: e.id
       }, [
-        q(b(t.label) + " ", 1),
-        t.requirementText ? (o(), i("span", ka, "(" + b(t.requirementText) + ")", 1)) : h("", !0)
-      ], 8, ya),
-      t.helpId && t.helpText ? (o(), i("span", {
+        P(p(e.label) + " ", 1),
+        e.requirementText ? (s(), o("span", kt, "(" + p(e.requirementText) + ")", 1)) : f("", !0)
+      ], 8, yt),
+      e.helpId && e.helpText ? (s(), o("span", {
         key: 0,
-        id: t.helpId,
+        id: e.helpId,
         class: "mc-field__help"
-      }, b(t.helpText), 9, wa)) : h("", !0),
-      d("div", Va, [
-        k(t.$slots, "default", {}, void 0, !0)
+      }, p(e.helpText), 9, wt)) : f("", !0),
+      c("div", Vt, [
+        y(l.$slots, "default", {}, void 0, !0)
       ]),
-      (t.isValid || t.isInvalid) && t.message ? (o(), i("span", {
+      (e.isValid || e.isInvalid) && e.message ? (s(), o("span", {
         key: 1,
-        class: g(["mc-field__validation-message", a.value]),
-        id: t.messageId
-      }, b(t.message), 11, Ia)) : h("", !0)
+        class: h(["mc-field__validation-message", t.value]),
+        id: e.messageId
+      }, p(e.message), 11, It)) : f("", !0)
     ]));
   }
-}), lo = /* @__PURE__ */ m(Ba, [["__scopeId", "data-v-ead078c4"]]), Ca = { class: "mc-field--group" }, Ma = ["for"], za = {
+}), ol = /* @__PURE__ */ v(Ct, [["__scopeId", "data-v-1a3a8141"]]), xt = { class: "mc-field--group" }, Bt = ["for"], Mt = {
   key: 0,
   class: "mc-field__requirement"
-}, La = {
+}, zt = {
   key: 0,
   class: "mc-field__help"
-}, ja = { class: "mc-field__content" }, Oa = /* @__PURE__ */ $({
+}, Lt = { class: "mc-field__content" }, jt = /* @__PURE__ */ _({
   __name: "MFieldGroup",
   props: {
     id: {},
@@ -778,81 +790,132 @@ const Q = /* @__PURE__ */ m(sa, [["render", la]]), na = ["disabled", "type"], ia
     isInvalid: { type: Boolean },
     message: {}
   },
-  setup(r) {
-    const e = r, a = v(() => ({
-      "is-valid": e.isValid,
-      "is-invalid": e.isInvalid
+  setup(e) {
+    const a = e, t = b(() => ({
+      "is-valid": a.isValid,
+      "is-invalid": a.isInvalid
     }));
-    return (t, n) => (o(), i("fieldset", Ca, [
-      d("legend", {
+    return (l, n) => (s(), o("fieldset", xt, [
+      c("legend", {
         class: "mc-field__legend",
-        for: t.id
+        for: e.id
       }, [
-        q(b(t.legend) + " ", 1),
-        t.requirementText ? (o(), i("span", za, "(" + b(t.requirementText) + ")", 1)) : h("", !0)
-      ], 8, Ma),
-      t.helpText ? (o(), i("span", La, b(t.helpText), 1)) : h("", !0),
-      d("div", ja, [
-        k(t.$slots, "default", {}, void 0, !0)
+        P(p(e.legend) + " ", 1),
+        e.requirementText ? (s(), o("span", Mt, "(" + p(e.requirementText) + ")", 1)) : f("", !0)
+      ], 8, Bt),
+      e.helpText ? (s(), o("span", zt, p(e.helpText), 1)) : f("", !0),
+      c("div", Lt, [
+        y(l.$slots, "default", {}, void 0, !0)
       ]),
-      (t.isValid || t.isInvalid) && t.message ? (o(), i("span", {
+      (e.isValid || e.isInvalid) && e.message ? (s(), o("span", {
         key: 1,
-        class: g(["mc-field__validation-message", a.value])
-      }, b(t.message), 3)) : h("", !0)
+        class: h(["mc-field__validation-message", t.value])
+      }, p(e.message), 3)) : f("", !0)
     ]));
   }
-}), no = /* @__PURE__ */ m(Oa, [["__scopeId", "data-v-fc0c08dc"]]), Ta = { class: "mc-flag__label" }, Sa = /* @__PURE__ */ $({
+}), il = /* @__PURE__ */ v(jt, [["__scopeId", "data-v-fc0c08dc"]]), Ot = { class: "mc-flag__label" }, Tt = /* @__PURE__ */ _({
   __name: "MFlag",
   props: {
     label: {},
     appearance: {}
   },
-  setup(r) {
-    const e = r, a = v(() => ({
-      [`mc-flag--${e.appearance}`]: e.appearance && e.appearance != "standard"
+  setup(e) {
+    const a = e, t = b(() => ({
+      [`mc-flag--${a.appearance}`]: a.appearance && a.appearance != "standard"
+    }));
+    return (l, n) => (s(), o("div", {
+      class: h(["mc-flag", t.value])
+    }, [
+      c("span", Ot, p(e.label), 1)
+    ], 2));
+  }
+}), cl = /* @__PURE__ */ v(Tt, [["__scopeId", "data-v-dae5e572"]]), St = ["aria-valuenow"], At = /* @__PURE__ */ _({
+  inheritAttrs: !1,
+  __name: "MLinearProgressbarBuffer",
+  props: {
+    size: {},
+    value: { default: 0 }
+  },
+  setup(e) {
+    const a = e, t = b(() => ({
+      [`mc-linear-progressbar-buffer--${a.size}`]: a.size && a.size != "m"
     }));
-    return (t, n) => (o(), i("div", {
-      class: g(["mc-flag", a.value])
+    return (l, n) => (s(), o("div", {
+      class: h(["mc-linear-progressbar-buffer", t.value])
     }, [
-      d("span", Ta, b(t.label), 1)
+      c("div", V({
+        class: "mc-linear-progressbar-buffer__indicator",
+        role: "progressbar",
+        style: `--progress-value: ${e.value};`,
+        "aria-valuenow": e.value,
+        "aria-valuemin": 0,
+        "aria-valuemax": 100
+      }, l.$attrs), null, 16, St)
     ], 2));
   }
-}), io = /* @__PURE__ */ m(Sa, [["__scopeId", "data-v-9245f79e"]]), Pa = ["aria-label"], Da = /* @__PURE__ */ $({
+}), Pt = /* @__PURE__ */ v(At, [["__scopeId", "data-v-5306d571"]]), Dt = { class: "mc-linear-progressbar-percentage" }, qt = ["aria-valuenow"], Ft = { class: "mc-linear-progressbar-percentage__label" }, Nt = { class: "mc-linear-progressbar-percentage__value" }, Rt = /* @__PURE__ */ _({
+  inheritAttrs: !1,
+  __name: "MLinearProgressbarPercentage",
+  props: {
+    value: { default: 0 }
+  },
+  setup(e) {
+    return (a, t) => (s(), o("div", Dt, [
+      c("div", V({
+        class: "mc-linear-progressbar-percentage__indicator",
+        role: "progressbar",
+        style: `--progress-value: ${e.value};`,
+        "aria-valuenow": e.value,
+        "aria-valuemin": 0,
+        "aria-valuemax": 100
+      }, a.$attrs), [
+        c("div", Ft, [
+          c("p", Nt, [
+            P(p(e.value), 1),
+            t[0] || (t[0] = c("span", { class: "mc-linear-progressbar-percentage__unit" }, "%", -1))
+          ])
+        ])
+      ], 16, qt)
+    ]));
+  }
+}), dl = /* @__PURE__ */ v(Rt, [["__scopeId", "data-v-01197cd0"]]), Gt = ["aria-label"], Ut = /* @__PURE__ */ _({
+  inheritAttrs: !1,
   __name: "MLoadingOverlay",
   props: {
     isVisible: { type: Boolean },
     text: {}
   },
-  setup(r) {
-    return (e, a) => (o(), i("div", {
-      class: g(["mc-loading-loader", { "is-visible": e.isVisible }])
+  setup(e) {
+    return (a, t) => (s(), o("div", {
+      class: h(["mc-loading-loader", { "is-visible": e.isVisible }])
     }, [
-      d("div", I({
+      c("div", V({
         role: "dialog",
         tabindex: "-1",
         "aria-label": e.text
-      }, e.$attrs), [
-        w(E, {
+      }, a.$attrs), [
+        k(H, {
           size: "l",
           appearance: "inverse",
           text: e.text
         }, null, 8, ["text"])
-      ], 16, Pa)
+      ], 16, Gt)
     ], 2));
   }
-}), ro = /* @__PURE__ */ m(Da, [["__scopeId", "data-v-eae6b1f2"]]), qa = ["aria-modal", "aria-hidden"], Fa = {
+}), rl = /* @__PURE__ */ v(Ut, [["__scopeId", "data-v-d5adc90d"]]), Kt = ["aria-modal", "aria-hidden"], Ht = {
   class: "mc-modal__dialog",
   role: "document"
-}, Aa = { class: "mc-modal__header" }, Na = {
+}, Et = { class: "mc-modal__header" }, Qt = {
   key: 0,
   class: "mc-modal__icon"
-}, Ra = {
+}, Jt = {
   class: "mc-modal__title",
   id: "modalTitle"
-}, Ga = { class: "mc-modal__body" }, Ua = {
+}, Wt = { class: "mc-modal__body" }, Xt = {
   key: 0,
   class: "mc-modal__footer"
-}, Ha = { class: "mc-modal__link" }, Ka = /* @__PURE__ */ $({
+}, Yt = { class: "mc-modal__link" }, Zt = /* @__PURE__ */ _({
+  inheritAttrs: !1,
   __name: "MModal",
   props: {
     open: { type: Boolean },
@@ -861,90 +924,91 @@ const Q = /* @__PURE__ */ m(sa, [["render", la]]), na = ["disabled", "type"], ia
     closable: { type: Boolean, default: !0 }
   },
   emits: ["update:open"],
-  setup(r, { emit: e }) {
-    const a = r, t = v(() => ({
-      "is-open": a.open
+  setup(e, { emit: a }) {
+    const t = e, l = b(() => ({
+      "is-open": t.open
     }));
-    T(
-      () => a.open,
-      (l) => {
-        s("update:open", l);
+    z(
+      () => t.open,
+      (d) => {
+        i("update:open", d);
       }
     );
     const n = () => {
-      s("update:open", !1);
-    }, s = e;
-    return (l, p) => (o(), B(J, {
-      "is-visible": l.open,
+      i("update:open", !1);
+    }, i = a;
+    return (d, u) => (s(), C(Q, {
+      "is-visible": e.open,
       dialogLabel: "modalTitle"
     }, {
-      default: M(() => [
-        d("section", I({
-          class: ["mc-modal", t.value],
+      default: B(() => [
+        c("section", V({
+          class: ["mc-modal", l.value],
           role: "dialog",
           "aria-labelledby": "modalTitle",
-          "aria-modal": l.open ? "true" : "false",
+          "aria-modal": e.open ? "true" : "false",
           tabindex: "-1",
-          "aria-hidden": !l.open
-        }, l.$attrs, {
-          onKeydown: R(n, ["esc"])
+          "aria-hidden": !e.open
+        }, d.$attrs, {
+          onKeydown: N(n, ["esc"])
         }), [
-          d("div", Fa, [
-            d("header", Aa, [
-              l.$slots.icon ? (o(), i("span", Na, [
-                k(l.$slots, "icon", {}, void 0, !0)
-              ])) : h("", !0),
-              d("h2", Ra, b(l.title), 1),
-              l.closable ? (o(), B(S, {
+          c("div", Ht, [
+            c("header", Et, [
+              d.$slots.icon ? (s(), o("span", Qt, [
+                y(d.$slots, "icon", {}, void 0, !0)
+              ])) : f("", !0),
+              c("h2", Jt, p(e.title), 1),
+              e.closable ? (s(), C(A, {
                 key: 1,
                 class: "mc-modal__close",
                 "aria-label": "Close",
                 ghost: "",
                 onClick: n
               }, {
-                icon: M(() => [
-                  w(Q, { "aria-hidden": "true" })
+                icon: B(() => [
+                  k(E, { "aria-hidden": "true" })
                 ]),
                 _: 1
-              })) : h("", !0)
+              })) : f("", !0)
             ]),
-            d("main", Ga, [
-              d("p", null, b(l.description), 1),
-              k(l.$slots, "default", {}, void 0, !0)
+            c("main", Wt, [
+              c("p", null, p(e.description), 1),
+              y(d.$slots, "default", {}, void 0, !0)
             ]),
-            l.$slots.footer ? (o(), i("footer", Ua, [
-              d("span", Ha, [
-                k(l.$slots, "link", {}, void 0, !0)
+            d.$slots.footer ? (s(), o("footer", Xt, [
+              c("span", Yt, [
+                y(d.$slots, "link", {}, void 0, !0)
               ]),
-              k(l.$slots, "footer", {}, void 0, !0)
-            ])) : h("", !0)
+              y(d.$slots, "footer", {}, void 0, !0)
+            ])) : f("", !0)
           ])
-        ], 16, qa)
+        ], 16, Kt)
       ]),
       _: 3
     }, 8, ["is-visible"]));
   }
-}), co = /* @__PURE__ */ m(Ka, [["__scopeId", "data-v-20ce36b2"]]), Ea = /* @__PURE__ */ $({
+}), ul = /* @__PURE__ */ v(Zt, [["__scopeId", "data-v-41ee6da9"]]), ea = /* @__PURE__ */ _({
   __name: "MNumberBadge",
   props: {
     label: {},
     appearance: { default: "standard" },
     size: { default: "s" }
   },
-  setup(r) {
-    const e = r, a = v(() => ({
-      [`mc-number-badge--${e.appearance}`]: e.appearance && e.appearance != "standard",
-      [`mc-number-badge--${e.size}`]: e.size && e.size != "s"
+  setup(e) {
+    const a = e, t = b(() => ({
+      [`mc-number-badge--${a.appearance}`]: a.appearance && a.appearance != "standard",
+      [`mc-number-badge--${a.size}`]: a.size && a.size != "s"
     }));
-    return (t, n) => (o(), i("span", {
-      class: g(["mc-number-badge", a.value])
-    }, b(t.label), 3));
+    return (l, n) => (s(), o("span", {
+      class: h(["mc-number-badge", t.value])
+    }, p(e.label), 3));
   }
-}), Qa = /* @__PURE__ */ m(Ea, [["__scopeId", "data-v-7e6acb92"]]), Ja = ["id", "name", "value", "disabled"], Wa = {
+}), J = /* @__PURE__ */ v(ea, [["__scopeId", "data-v-7b35d96e"]]), ta = ["id", "name", "value", "disabled"], aa = {
   key: 0,
   value: "",
   disabled: ""
-}, Xa = ["value", "disabled"], Ya = /* @__PURE__ */ $({
+}, sa = ["value", "disabled"], la = /* @__PURE__ */ _({
+  inheritAttrs: !1,
   __name: "MSelect",
   props: {
     id: {},
@@ -958,31 +1022,31 @@ const Q = /* @__PURE__ */ m(sa, [["render", la]]), na = ["disabled", "type"], ia
     readonly: { type: Boolean }
   },
   emits: ["update:modelValue"],
-  setup(r, { emit: e }) {
-    const a = r, t = v(() => ({
-      [`mc-select--${a.size}`]: a.size && a.size != "m",
-      "mc-select--readonly": a.readonly,
-      "is-invalid": a.isInvalid
-    })), n = e;
-    return (s, l) => (o(), i("select", I({
-      id: s.id,
-      class: ["mc-select", t.value],
-      name: s.name,
-      value: s.modelValue,
-      disabled: s.disabled
-    }, s.$attrs, {
-      onChange: l[0] || (l[0] = (p) => n("update:modelValue", p.target.value))
+  setup(e, { emit: a }) {
+    const t = e, l = b(() => ({
+      [`mc-select--${t.size}`]: t.size && t.size != "m",
+      "mc-select--readonly": t.readonly,
+      "is-invalid": t.isInvalid
+    })), n = a;
+    return (i, d) => (s(), o("select", V({
+      id: e.id,
+      class: ["mc-select", l.value],
+      name: e.name,
+      value: e.modelValue,
+      disabled: e.disabled
+    }, i.$attrs, {
+      onChange: d[0] || (d[0] = (u) => n("update:modelValue", u.target.value))
     }), [
-      s.placeholder ? (o(), i("option", Wa, " -- " + b(s.placeholder) + " -- ", 1)) : h("", !0),
-      (o(!0), i(P, null, D(s.options, (p, u) => (o(), i("option", I({
-        key: u,
-        value: p.value
-      }, { ref_for: !0 }, p.attributes, {
-        disabled: p.disabled
-      }), b(p.text), 17, Xa))), 128))
-    ], 16, Ja));
+      e.placeholder ? (s(), o("option", aa, " -- " + p(e.placeholder) + " -- ", 1)) : f("", !0),
+      (s(!0), o(T, null, S(e.options, (u, m) => (s(), o("option", V({
+        key: m,
+        value: u.value
+      }, { ref_for: !0 }, u.attributes, {
+        disabled: u.disabled
+      }), p(u.text), 17, sa))), 128))
+    ], 16, ta));
   }
-}), Za = /* @__PURE__ */ m(Ya, [["__scopeId", "data-v-68c735e4"]]), xa = {
+}), na = /* @__PURE__ */ v(la, [["__scopeId", "data-v-ded98964"]]), oa = {
   name: "ChevronLeft24",
   props: {
     /**
@@ -993,23 +1057,23 @@ const Q = /* @__PURE__ */ m(sa, [["render", la]]), na = ["disabled", "type"], ia
       default: "currentColor"
     }
   }
-}, et = ["fill"];
-function at(r, e, a, t, n, s) {
-  return o(), i("svg", {
+}, ia = ["fill"];
+function ca(e, a, t, l, n, i) {
+  return s(), o("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] = [
-    d("path", {
+  }, [...a[0] || (a[0] = [
+    c("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, et);
+  ])], 8, ia);
 }
-const G = /* @__PURE__ */ m(xa, [["render", at]]), tt = {
+const R = /* @__PURE__ */ v(oa, [["render", ca]]), da = {
   name: "ChevronRight24",
   props: {
     /**
@@ -1020,34 +1084,33 @@ const G = /* @__PURE__ */ m(xa, [["render", at]]), tt = {
       default: "currentColor"
     }
   }
-}, st = ["fill"];
-function ot(r, e, a, t, n, s) {
-  return o(), i("svg", {
+}, ra = ["fill"];
+function ua(e, a, t, l, n, i) {
+  return s(), o("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] = [
-    d("path", {
+  }, [...a[0] || (a[0] = [
+    c("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, st);
+  ])], 8, ra);
 }
-const U = /* @__PURE__ */ m(tt, [["render", ot]]), lt = {
+const G = /* @__PURE__ */ v(da, [["render", ua]]), ma = {
   class: "mc-pagination",
-  role: "navigation",
-  "aria-label": "pagination"
-}, nt = {
+  role: "navigation"
+}, va = {
   key: 2,
   class: "mc-pagination__field"
-}, it = {
+}, ba = {
   key: 3,
   class: "mc-pagination__label",
   "aria-current": "page"
-}, rt = /* @__PURE__ */ $({
+}, pa = /* @__PURE__ */ _({
   __name: "MPagination",
   props: {
     id: {},
@@ -1057,93 +1120,94 @@ const U = /* @__PURE__ */ m(tt, [["render", ot]]), lt = {
     selectLabel: {}
   },
   emits: ["update:modelValue"],
-  setup(r, { emit: e }) {
-    const a = r, t = e, n = z(a.modelValue);
-    T(n, (c) => {
-      c !== a.modelValue && t("update:modelValue", c);
+  setup(e, { emit: a }) {
+    const t = e, l = a, n = M(t.modelValue);
+    z(n, (r) => {
+      r !== t.modelValue && l("update:modelValue", r);
     });
-    const s = v(
-      () => a.options.findIndex((c) => c.value === n.value)
-    ), l = v(() => s.value === 0), p = v(
-      () => s.value === a.options.length - 1
-    ), u = () => {
-      const c = a.options.findIndex(
-        (f) => f.value === n.value
+    const i = b(
+      () => t.options.findIndex((r) => r.value === n.value)
+    ), d = b(() => i.value === 0), u = b(
+      () => i.value === t.options.length - 1
+    ), m = () => {
+      const r = t.options.findIndex(
+        ($) => $.value === n.value
       );
-      c > 0 && (n.value = a.options[c - 1].value, t("update:modelValue", a.options[c - 1].value));
-    }, _ = () => {
-      const c = a.options.findIndex(
-        (f) => f.value === n.value
+      r > 0 && (n.value = t.options[r - 1].value, l("update:modelValue", t.options[r - 1].value));
+    }, g = () => {
+      const r = t.options.findIndex(
+        ($) => $.value === n.value
       );
-      c < a.options.length - 1 && (n.value = a.options[c + 1].value, t("update:modelValue", a.options[c + 1].value));
+      r < t.options.length - 1 && (n.value = t.options[r + 1].value, l("update:modelValue", t.options[r + 1].value));
     };
-    return (c, f) => (o(), i("nav", lt, [
-      c.compact ? (o(), B(S, {
+    return (r, $) => (s(), o("nav", ma, [
+      e.compact ? (s(), C(A, {
         key: 1,
         outlined: "",
         "aria-label": "Previous page",
-        disabled: l.value,
-        onClick: u
+        disabled: d.value,
+        onClick: m
       }, {
-        icon: M(() => [
-          w(G)
+        icon: B(() => [
+          k(R)
         ]),
         _: 1
-      }, 8, ["disabled"])) : (o(), B(N, {
+      }, 8, ["disabled"])) : (s(), C(F, {
         key: 0,
         "icon-position": "only",
         "aria-label": "Previous page",
-        disabled: l.value,
-        onClick: u
+        disabled: d.value,
+        onClick: m
       }, {
-        icon: M(() => [
-          w(G)
+        icon: B(() => [
+          k(R)
         ]),
         _: 1
       }, 8, ["disabled"])),
-      c.compact ? h("", !0) : (o(), i("div", nt, [
-        w(Za, {
+      e.compact ? f("", !0) : (s(), o("div", va, [
+        k(na, {
           class: "mc-pagination__select",
-          id: c.id,
+          id: e.id,
           modelValue: n.value,
           "onUpdate:modelValue": [
-            f[0] || (f[0] = (C) => n.value = C),
-            f[1] || (f[1] = (C) => t("update:modelValue", Number(C)))
+            $[0] || ($[0] = (x) => n.value = x),
+            $[1] || ($[1] = (x) => l("update:modelValue", Number(x)))
           ],
-          options: c.options,
-          "aria-label": c.selectLabel
+          options: e.options,
+          "aria-label": e.selectLabel
         }, null, 8, ["id", "modelValue", "options", "aria-label"])
       ])),
-      c.compact ? (o(), i("span", it, b(c.options.find((C) => C.value === n.value)?.text), 1)) : h("", !0),
-      c.compact ? (o(), B(S, {
+      e.compact ? (s(), o("span", ba, p(e.options.find((x) => x.value === n.value)?.text), 1)) : f("", !0),
+      e.compact ? (s(), C(A, {
         key: 5,
         outlined: "",
         "aria-label": "Next page",
-        disabled: p.value,
-        onClick: _
+        disabled: u.value,
+        onClick: g
       }, {
-        icon: M(() => [
-          w(U)
+        icon: B(() => [
+          k(G)
         ]),
         _: 1
-      }, 8, ["disabled"])) : (o(), B(N, {
+      }, 8, ["disabled"])) : (s(), C(F, {
         key: 4,
         "icon-position": "only",
         "aria-label": "Next page",
-        disabled: p.value,
-        onClick: _
+        disabled: u.value,
+        onClick: g
       }, {
-        icon: M(() => [
-          w(U)
+        icon: B(() => [
+          k(G)
         ]),
         _: 1
       }, 8, ["disabled"]))
     ]));
   }
-}), uo = /* @__PURE__ */ m(rt, [["__scopeId", "data-v-3b9257ac"]]), dt = ["id", "type", "name", "placeholder", "disabled", "aria-invalid", "readonly"], ct = {
+}), ml = /* @__PURE__ */ v(pa, [["__scopeId", "data-v-4cb89be1"]]), fa = ["id", "type", "name", "placeholder", "disabled", "aria-invalid", "readonly"], _a = {
   key: 0,
   class: "mc-controls-options"
-}, ut = { class: "mc-controls-options__label" }, pt = /* @__PURE__ */ $({
+}, ha = { class: "mc-controls-options__label" }, $a = /* @__PURE__ */ _({
+  inheritAttrs: !1,
   __name: "MPasswordInput",
   props: {
     id: {},
@@ -1158,61 +1222,62 @@ const U = /* @__PURE__ */ m(tt, [["render", ot]]), lt = {
     buttonLabel: { default: () => ({ show: "Show", hide: "Hide" }) }
   },
   emits: ["update:modelValue"],
-  setup(r, { emit: e }) {
-    const a = r, t = v(() => ({
-      "is-invalid": a.isInvalid
-    })), n = z(a.modelValue), s = z(!1), l = () => {
-      n.value = "", c("update:modelValue", "");
-    }, p = () => {
-      s.value = !s.value;
-    }, u = v(() => s.value ? "text" : "password"), _ = v(() => s.value ? "true" : "false"), c = e;
-    return (f, C) => (o(), i("div", {
-      class: g(["mc-password-input mc-text-input", t.value])
+  setup(e, { emit: a }) {
+    const t = e, l = b(() => ({
+      "is-invalid": t.isInvalid
+    })), n = M(t.modelValue), i = M(!1), d = () => {
+      n.value = "", r("update:modelValue", "");
+    }, u = () => {
+      i.value = !i.value;
+    }, m = b(() => i.value ? "text" : "password"), g = b(() => i.value ? "true" : "false"), r = a;
+    return ($, x) => (s(), o("div", {
+      class: h(["mc-password-input mc-text-input", l.value])
     }, [
-      K(d("input", I({
+      K(c("input", V({
         class: "mc-password-input__control mc-text-input__control",
-        "onUpdate:modelValue": C[0] || (C[0] = (y) => n.value = y),
-        id: f.id,
-        type: u.value,
-        name: f.name,
-        placeholder: f.placeholder,
-        disabled: f.disabled,
-        "aria-invalid": f.isInvalid,
-        readonly: f.readonly
-      }, f.$attrs, {
-        onInput: C[1] || (C[1] = (y) => c("update:modelValue", y.target.value))
-      }), null, 16, dt), [
-        [ee, n.value]
+        "onUpdate:modelValue": x[0] || (x[0] = (w) => n.value = w),
+        id: e.id,
+        type: m.value,
+        name: e.name,
+        placeholder: e.placeholder,
+        disabled: e.disabled,
+        "aria-invalid": e.isInvalid,
+        readonly: e.readonly
+      }, $.$attrs, {
+        onInput: x[1] || (x[1] = (w) => r("update:modelValue", w.target.value))
+      }), null, 16, fa), [
+        [te, n.value]
       ]),
-      f.isClearable && n.value ? (o(), i("div", ct, [
-        d("button", {
+      e.isClearable && n.value ? (s(), o("div", _a, [
+        c("button", {
           class: "mc-controls-options__button",
-          onClick: l
+          onClick: d
         }, [
-          w(A, {
+          k(q, {
             class: "mc-controls-options__icon",
             "aria-hidden": "true"
           }),
-          d("span", ut, b(f.clearLabel), 1)
+          c("span", ha, p(e.clearLabel), 1)
         ])
-      ])) : h("", !0),
-      w(N, {
+      ])) : f("", !0),
+      k(F, {
         ref: "button",
         role: "switch",
-        "aria-checked": _.value,
-        disabled: f.disabled,
-        onClick: p,
+        "aria-checked": g.value,
+        disabled: e.disabled,
+        onClick: u,
         size: "s",
         ghost: ""
       }, {
-        default: M(() => [
-          q(b(s.value ? f.buttonLabel.hide : f.buttonLabel.show), 1)
+        default: B(() => [
+          P(p(i.value ? e.buttonLabel.hide : e.buttonLabel.show), 1)
         ]),
         _: 1
       }, 8, ["aria-checked", "disabled"])
     ], 2));
   }
-}), po = /* @__PURE__ */ m(pt, [["__scopeId", "data-v-167f10e2"]]), mt = ["id", "name", "disabled", "readonly", "value", "onInput", "onKeydown"], _t = /* @__PURE__ */ $({
+}), vl = /* @__PURE__ */ v($a, [["__scopeId", "data-v-47bbb809"]]), ga = ["id", "name", "disabled", "readonly", "value", "onInput", "onKeydown"], ya = /* @__PURE__ */ _({
+  inheritAttrs: !1,
   __name: "MPincode",
   props: {
     id: {},
@@ -1224,110 +1289,63 @@ const U = /* @__PURE__ */ m(tt, [["render", ot]]), lt = {
     readonly: { type: Boolean }
   },
   emits: ["update:modelValue"],
-  setup(r, { emit: e }) {
-    const a = r, t = v(() => ({
-      "is-invalid": a.isInvalid
-    })), n = e, s = z(Array(a.length).fill("")), l = z([]), p = (y, V) => {
-      l.value[V] = y;
+  setup(e, { emit: a }) {
+    const t = e, l = b(() => ({
+      "is-invalid": t.isInvalid
+    })), n = a, i = M(Array(t.length).fill("")), d = M([]), u = (w, I) => {
+      d.value[I] = w;
     };
-    T(
-      () => a.modelValue,
-      (y) => {
-        const V = String(y ?? "");
-        s.value = Array.from({ length: a.length }, (O, L) => V[L] ?? "");
+    z(
+      () => t.modelValue,
+      (w) => {
+        const I = String(w ?? "");
+        i.value = Array.from({ length: t.length }, (O, L) => I[L] ?? "");
       },
       { immediate: !0 }
     );
-    const u = (y) => {
-      ae(() => l.value[y]?.focus());
-    }, _ = (y, V) => {
-      const O = y.target.value.replace(/\D/g, "");
-      O ? (s.value[V] = O[0], n("update:modelValue", s.value.join("")), V + 1 < a.length && u(V + 1)) : (s.value[V] = "", n("update:modelValue", s.value.join("")));
-    }, c = (y, V) => {
-      y.key === "ArrowLeft" && V > 0 ? u(V - 1) : y.key === "ArrowRight" && V < a.length - 1 ? u(V + 1) : y.key === "Backspace" && f(y, V);
-    }, f = (y, V) => {
-      s.value[V] === "" && V > 0 && (s.value[V - 1] = "", n("update:modelValue", s.value.join("")), u(V - 1));
-    }, C = (y) => {
-      y.preventDefault();
-      const O = (y.clipboardData?.getData("text") ?? "").replace(/\D/g, "").slice(0, a.length).split("");
-      s.value = Array.from({ length: a.length }, (L, j) => O[j] ?? ""), n("update:modelValue", s.value.join("")), u(Math.min(O.length, a.length - 1));
+    const m = (w) => {
+      ae(() => d.value[w]?.focus());
+    }, g = (w, I) => {
+      const O = w.target.value.replace(/\D/g, "");
+      O ? (i.value[I] = O[0], n("update:modelValue", i.value.join("")), I + 1 < t.length && m(I + 1)) : (i.value[I] = "", n("update:modelValue", i.value.join("")));
+    }, r = (w, I) => {
+      w.key === "ArrowLeft" && I > 0 ? m(I - 1) : w.key === "ArrowRight" && I < t.length - 1 ? m(I + 1) : w.key === "Backspace" && $(w, I);
+    }, $ = (w, I) => {
+      i.value[I] === "" && I > 0 && (i.value[I - 1] = "", n("update:modelValue", i.value.join("")), m(I - 1));
+    }, x = (w) => {
+      w.preventDefault();
+      const O = (w.clipboardData?.getData("text") ?? "").replace(/\D/g, "").slice(0, t.length).split("");
+      i.value = Array.from({ length: t.length }, (L, j) => O[j] ?? ""), n("update:modelValue", i.value.join("")), m(Math.min(O.length, t.length - 1));
     };
-    return (y, V) => (o(), i("div", {
-      class: g(["mc-pincode-input", t.value]),
-      onPaste: C
+    return (w, I) => (s(), o("div", {
+      class: "mc-pincode-input",
+      onPaste: x
     }, [
-      (o(!0), i(P, null, D(s.value, (O, L) => (o(), i("input", I({
+      (s(!0), o(T, null, S(i.value, (O, L) => (s(), o("input", V({
         key: L,
         id: `pincodeItem${L}`,
         ref_for: !0,
-        ref: (j) => p(j, L),
+        ref: (j) => u(j, L),
         type: "text",
         inputmode: "numeric",
         maxlength: "1",
         pattern: "\\d*",
         autocomplete: "one-time-code",
-        name: y.name || `pincode-${y.id}`,
-        class: "mc-pincode-input__control",
-        disabled: y.disabled,
-        readonly: y.readonly,
+        name: e.name || `pincode-${e.id}`,
+        class: ["mc-pincode-input__control", l.value],
+        disabled: e.disabled,
+        readonly: e.readonly,
         value: O
-      }, { ref_for: !0 }, y.$attrs, {
-        onInput: (j) => _(j, L),
+      }, { ref_for: !0 }, w.$attrs, {
+        onInput: (j) => g(j, L),
         onKeydown: [
-          R((j) => f(j, L), ["backspace"]),
-          (j) => c(j, L)
+          N((j) => $(j, L), ["backspace"]),
+          (j) => r(j, L)
         ]
-      }), null, 16, mt))), 128))
-    ], 34));
-  }
-}), mo = /* @__PURE__ */ m(_t, [["__scopeId", "data-v-b2202545"]]), vt = ["aria-valuenow"], bt = /* @__PURE__ */ $({
-  __name: "MLinearProgressbarBuffer",
-  props: {
-    size: {},
-    value: { default: 0 }
-  },
-  setup(r) {
-    const e = r, a = v(() => ({
-      [`mc-linear-progressbar-buffer--${e.size}`]: e.size && e.size != "m"
-    }));
-    return (t, n) => (o(), i("div", {
-      class: g(["mc-linear-progressbar-buffer", a.value])
-    }, [
-      d("div", I({
-        class: "mc-linear-progressbar-buffer__indicator",
-        role: "progressbar",
-        style: `--progress-value: ${t.value};`,
-        "aria-valuenow": t.value,
-        "aria-valuemin": 0,
-        "aria-valuemax": 100
-      }, t.$attrs), null, 16, vt)
-    ], 2));
-  }
-}), ft = /* @__PURE__ */ m(bt, [["__scopeId", "data-v-aa64aedc"]]), ht = { class: "mc-linear-progressbar-percentage" }, $t = ["aria-valuenow"], gt = { class: "mc-linear-progressbar-percentage__label" }, yt = { class: "mc-linear-progressbar-percentage__value" }, kt = /* @__PURE__ */ $({
-  __name: "MLinearProgressbarPercentage",
-  props: {
-    value: { default: 0 }
-  },
-  setup(r) {
-    return (e, a) => (o(), i("div", ht, [
-      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", gt, [
-          d("p", yt, [
-            q(b(e.value), 1),
-            a[0] || (a[0] = d("span", { class: "mc-linear-progressbar-percentage__unit" }, "%", -1))
-          ])
-        ])
-      ], 16, $t)
-    ]));
+      }), null, 16, ga))), 128))
+    ], 32));
   }
-}), _o = /* @__PURE__ */ m(kt, [["__scopeId", "data-v-14fbed65"]]), wt = {
+}), bl = /* @__PURE__ */ v(ya, [["__scopeId", "data-v-635e677f"]]), ka = {
   name: "More24",
   props: {
     /**
@@ -1338,23 +1356,23 @@ const U = /* @__PURE__ */ m(tt, [["render", ot]]), lt = {
       default: "currentColor"
     }
   }
-}, Vt = ["fill"];
-function It(r, e, a, t, n, s) {
-  return o(), i("svg", {
+}, wa = ["fill"];
+function Va(e, a, t, l, n, i) {
+  return s(), o("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] = [
-    d("path", {
+  }, [...a[0] || (a[0] = [
+    c("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, Vt);
+  ])], 8, wa);
 }
-const Bt = /* @__PURE__ */ m(wt, [["render", It]]), Ct = {
+const Ia = /* @__PURE__ */ v(ka, [["render", Va]]), Ca = {
   name: "Less24",
   props: {
     /**
@@ -1365,23 +1383,24 @@ const Bt = /* @__PURE__ */ m(wt, [["render", It]]), Ct = {
       default: "currentColor"
     }
   }
-}, Mt = ["fill"];
-function zt(r, e, a, t, n, s) {
-  return o(), i("svg", {
+}, xa = ["fill"];
+function Ba(e, a, t, l, n, i) {
+  return s(), o("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] = [
-    d("path", {
+  }, [...a[0] || (a[0] = [
+    c("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, Mt);
+  ])], 8, xa);
 }
-const Lt = /* @__PURE__ */ m(Ct, [["render", zt]]), jt = ["id", "name", "disabled", "min", "max", "step", "readonly", "aria-invalid", "aria-valuemin", "aria-valuemax", "aria-valuenow"], Ot = ["aria-controls", "disabled"], Tt = { class: "mc-quantity-selector__icon" }, St = { class: "mc-quantity-selector__label" }, Pt = ["aria-controls", "disabled"], Dt = { class: "mc-quantity-selector__icon" }, qt = { class: "mc-quantity-selector__label" }, Ft = /* @__PURE__ */ $({
+const Ma = /* @__PURE__ */ v(Ca, [["render", Ba]]), za = ["id", "name", "disabled", "min", "max", "step", "readonly", "aria-invalid", "aria-valuemin", "aria-valuemax", "aria-valuenow"], La = ["aria-controls", "disabled"], ja = { class: "mc-quantity-selector__icon" }, Oa = { class: "mc-quantity-selector__label" }, Ta = ["aria-controls", "disabled"], Sa = { class: "mc-quantity-selector__icon" }, Aa = { class: "mc-quantity-selector__label" }, Pa = /* @__PURE__ */ _({
+  inheritAttrs: !1,
   __name: "MQuantitySelector",
   props: {
     id: {},
@@ -1398,75 +1417,76 @@ const Lt = /* @__PURE__ */ m(Ct, [["render", zt]]), jt = ["id", "name", "disable
     decrementLabel: { default: "Decrement" }
   },
   emits: ["update:modelValue"],
-  setup(r, { emit: e }) {
-    const a = r, t = z(a.modelValue);
-    T(t, (_) => {
-      _ !== a.modelValue && u("update:modelValue", _);
+  setup(e, { emit: a }) {
+    const t = e, l = M(t.modelValue);
+    z(l, (g) => {
+      g !== t.modelValue && m("update:modelValue", g);
     });
-    const n = v(() => ({
-      [`mc-quantity-selector--${a.size}`]: a.size && a.size != "m",
-      "is-invalid": a.isInvalid
-    })), s = () => {
-      t.value + a.step <= a.max ? t.value += a.step : t.value = a.max;
-    }, l = () => {
-      t.value - a.step > a.min ? t.value -= a.step : t.value = a.min;
-    }, p = (_) => {
-      t.value = _, t.value > a.max && (t.value = a.max), t.value <= a.min && (t.value = a.min), u("update:modelValue", t.value);
-    }, u = e;
-    return (_, c) => (o(), i("div", {
-      class: g(["mc-quantity-selector", n.value])
+    const n = b(() => ({
+      [`mc-quantity-selector--${t.size}`]: t.size && t.size != "m",
+      "is-invalid": t.isInvalid
+    })), i = () => {
+      l.value + t.step <= t.max ? l.value += t.step : l.value = t.max;
+    }, d = () => {
+      l.value - t.step > t.min ? l.value -= t.step : l.value = t.min;
+    }, u = (g) => {
+      l.value = g, l.value > t.max && (l.value = t.max), l.value <= t.min && (l.value = t.min), m("update:modelValue", l.value);
+    }, m = a;
+    return (g, r) => (s(), o("div", {
+      class: h(["mc-quantity-selector", n.value])
     }, [
-      K(d("input", I({
-        id: _.id,
-        "onUpdate:modelValue": c[0] || (c[0] = (f) => t.value = f),
+      K(c("input", V({
+        id: e.id,
+        "onUpdate:modelValue": r[0] || (r[0] = ($) => l.value = $),
         class: "mc-quantity-selector__control",
         type: "number",
-        name: _.name,
-        disabled: _.disabled,
-        min: _.min,
-        max: _.max,
-        step: _.step,
-        readonly: _.readonly,
-        "aria-invalid": _.isInvalid,
-        "aria-valuemin": _.min,
-        "aria-valuemax": _.max,
-        "aria-valuenow": t.value
-      }, _.$attrs, {
-        onChange: c[1] || (c[1] = (f) => p(Number(f.target.value)))
-      }), null, 16, jt), [
-        [te, t.value]
+        name: e.name,
+        disabled: e.disabled,
+        min: e.min,
+        max: e.max,
+        step: e.step,
+        readonly: e.readonly,
+        "aria-invalid": e.isInvalid,
+        "aria-valuemin": e.min,
+        "aria-valuemax": e.max,
+        "aria-valuenow": l.value
+      }, g.$attrs, {
+        onChange: r[1] || (r[1] = ($) => u(Number($.target.value)))
+      }), null, 16, za), [
+        [se, l.value]
       ]),
-      _.readonly ? h("", !0) : (o(), i("button", {
+      e.readonly ? f("", !0) : (s(), o("button", {
         key: 0,
         type: "button",
-        "aria-controls": _.id,
+        "aria-controls": e.id,
         class: "mc-quantity-selector__button mc-quantity-selector__button--increase",
         tabindex: "-1",
-        disabled: _.disabled || t.value === _.max,
-        onClick: s
+        disabled: e.disabled || l.value === e.max,
+        onClick: i
       }, [
-        d("span", Tt, [
-          w(Bt)
+        c("span", ja, [
+          k(Ia)
         ]),
-        d("span", St, b(_.incrementlabel), 1)
-      ], 8, Ot)),
-      _.readonly ? h("", !0) : (o(), i("button", {
+        c("span", Oa, p(e.incrementlabel), 1)
+      ], 8, La)),
+      e.readonly ? f("", !0) : (s(), o("button", {
         key: 1,
         type: "button",
-        "aria-controls": _.id,
+        "aria-controls": e.id,
         class: "mc-quantity-selector__button mc-quantity-selector__button--decrease",
         tabindex: "-1",
-        disabled: _.disabled || t.value === _.min,
-        onClick: l
+        disabled: e.disabled || l.value === e.min,
+        onClick: d
       }, [
-        d("span", Dt, [
-          w(Lt)
+        c("span", Sa, [
+          k(Ma)
         ]),
-        d("span", qt, b(_.decrementLabel), 1)
-      ], 8, Pt))
+        c("span", Aa, p(e.decrementLabel), 1)
+      ], 8, Ta))
     ], 2));
   }
-}), vo = /* @__PURE__ */ m(Ft, [["__scopeId", "data-v-a732650a"]]), At = { class: "mc-radio" }, Nt = ["id", "name", "checked", "disabled", "aria-invalid"], Rt = ["for"], Gt = /* @__PURE__ */ $({
+}), pl = /* @__PURE__ */ v(Pa, [["__scopeId", "data-v-c0a83c82"]]), Da = { class: "mc-radio" }, qa = ["id", "name", "checked", "disabled", "aria-invalid"], Fa = ["for"], Na = /* @__PURE__ */ _({
+  inheritAttrs: !1,
   __name: "MRadio",
   props: {
     id: {},
@@ -1477,30 +1497,30 @@ const Lt = /* @__PURE__ */ m(Ct, [["render", zt]]), jt = ["id", "name", "disable
     disabled: { type: Boolean }
   },
   emits: ["update:modelValue"],
-  setup(r, { emit: e }) {
-    const a = r, t = v(() => ({
-      "is-invalid": a.isInvalid
-    })), n = e;
-    return (s, l) => (o(), i("div", At, [
-      d("input", I({
-        id: s.id,
+  setup(e, { emit: a }) {
+    const t = e, l = b(() => ({
+      "is-invalid": t.isInvalid
+    })), n = a;
+    return (i, d) => (s(), o("div", Da, [
+      c("input", V({
+        id: e.id,
         type: "radio",
-        class: ["mc-radio__input", t.value],
-        name: s.name,
-        checked: s.modelValue,
-        disabled: s.disabled,
-        "aria-invalid": s.isInvalid
-      }, s.$attrs, {
-        onChange: l[0] || (l[0] = (p) => n("update:modelValue", p.target.checked))
-      }), null, 16, Nt),
-      s.label ? (o(), i("label", {
+        class: ["mc-radio__input", l.value],
+        name: e.name,
+        checked: e.modelValue,
+        disabled: e.disabled,
+        "aria-invalid": e.isInvalid
+      }, i.$attrs, {
+        onChange: d[0] || (d[0] = (u) => n("update:modelValue", u.target.checked))
+      }), null, 16, qa),
+      e.label ? (s(), o("label", {
         key: 0,
-        for: s.id,
+        for: e.id,
         class: "mc-radio__label"
-      }, b(s.label), 9, Rt)) : h("", !0)
+      }, p(e.label), 9, Fa)) : f("", !0)
     ]));
   }
-}), Ut = /* @__PURE__ */ m(Gt, [["__scopeId", "data-v-da78938c"]]), Ht = /* @__PURE__ */ $({
+}), Ra = /* @__PURE__ */ v(Na, [["__scopeId", "data-v-98a8422f"]]), Ga = /* @__PURE__ */ _({
   __name: "MRadioGroup",
   props: {
     name: {},
@@ -1510,61 +1530,100 @@ const Lt = /* @__PURE__ */ m(Ct, [["render", zt]]), jt = ["id", "name", "disable
     inline: { type: Boolean }
   },
   emits: ["update:modelValue"],
-  setup(r, { emit: e }) {
-    const a = r, t = v(() => ({
-      "mc-field__container--inline": a.inline
-    })), n = v(() => ({
-      "mc-field__container--inline__item": a.inline
-    })), s = e;
-    return (l, p) => (o(), i("div", {
-      class: g(["mc-field__container", t.value])
+  setup(e, { emit: a }) {
+    const t = e, l = b(() => ({
+      "mc-field__container--inline": t.inline
+    })), n = b(() => ({
+      "mc-field__container--inline__item": t.inline
+    })), i = a;
+    return (d, u) => (s(), o("div", {
+      class: h(["mc-field__container", l.value])
     }, [
-      (o(!0), i(P, null, D(l.options, (u) => (o(), B(Ut, {
-        id: u.id,
-        key: u.id,
-        label: u.label,
-        "is-invalid": l.isInvalid,
-        name: l.name,
-        class: g(["mc-field__item", n.value]),
-        "model-value": l.modelValue === u.value,
-        disabled: u.disabled,
-        "onUpdate:modelValue": (_) => _ ? s("update:modelValue", u.value) : null
+      (s(!0), o(T, null, S(e.options, (m) => (s(), C(Ra, {
+        id: m.id,
+        key: m.id,
+        label: m.label,
+        "is-invalid": e.isInvalid,
+        name: e.name,
+        class: h(["mc-field__item", n.value]),
+        "model-value": e.modelValue === m.value,
+        disabled: m.disabled,
+        "onUpdate:modelValue": (g) => g ? i("update:modelValue", m.value) : null
       }, null, 8, ["id", "label", "is-invalid", "name", "class", "model-value", "disabled", "onUpdate:modelValue"]))), 128))
     ], 2));
   }
-}), bo = /* @__PURE__ */ m(Ht, [["__scopeId", "data-v-d2f5e103"]]), Kt = /* @__PURE__ */ $({
+}), fl = /* @__PURE__ */ v(Ga, [["__scopeId", "data-v-74a1b650"]]), Ua = ["aria-checked", "onClick"], Ka = /* @__PURE__ */ _({
+  __name: "MSegmentedControl",
+  props: {
+    modelValue: { default: 0 },
+    full: { type: Boolean },
+    size: { default: "s" },
+    segments: {}
+  },
+  emits: ["update:modelValue"],
+  setup(e, { emit: a }) {
+    const t = e, l = b(() => ({
+      "mc-segmented-control--full": t.full,
+      [`mc-segmented-control--${t.size}`]: t.size && t.size != "s"
+    })), n = M(t.modelValue);
+    z(
+      () => t.modelValue,
+      (m) => {
+        n.value = m;
+      }
+    );
+    const i = (m) => {
+      m !== n.value && (n.value = m, u("update:modelValue", m));
+    }, d = (m) => n.value === m, u = a;
+    return (m, g) => (s(), o("div", {
+      class: h(["mc-segmented-control", l.value]),
+      role: "radiogroup"
+    }, [
+      (s(!0), o(T, null, S(e.segments, (r, $) => (s(), o("button", {
+        key: `segment-${$}`,
+        type: "button",
+        class: h(["mc-segmented-control__segment", {
+          "mc-segmented-control__segment--selected": d($)
+        }]),
+        "aria-checked": d($),
+        role: "radio",
+        onClick: (x) => i($)
+      }, p(r.label), 11, Ua))), 128))
+    ], 2));
+  }
+}), _l = /* @__PURE__ */ v(Ka, [["__scopeId", "data-v-ee2129c0"]]), Ha = /* @__PURE__ */ _({
   __name: "MStatusDot",
   props: {
     status: { default: "info" },
     size: {}
   },
-  setup(r) {
-    const e = r, a = v(() => ({
-      [`mc-status-dot--${e.status}`]: e.status && e.status != "info",
-      [`mc-status-dot--${e.size}`]: e.size && e.size != "m"
+  setup(e) {
+    const a = e, t = b(() => ({
+      [`mc-status-dot--${a.status}`]: a.status && a.status != "info",
+      [`mc-status-dot--${a.size}`]: a.size && a.size != "m"
     }));
-    return (t, n) => (o(), i("span", {
-      class: g(["mc-status-dot", a.value])
+    return (l, n) => (s(), o("span", {
+      class: h(["mc-status-dot", t.value])
     }, null, 2));
   }
-}), Et = /* @__PURE__ */ m(Kt, [["__scopeId", "data-v-417b563f"]]), Qt = { class: "mc-status-badge__label" }, Jt = /* @__PURE__ */ $({
+}), Ea = /* @__PURE__ */ v(Ha, [["__scopeId", "data-v-113b7e8f"]]), Qa = { class: "mc-status-badge__label" }, Ja = /* @__PURE__ */ _({
   __name: "MStatusBadge",
   props: {
     label: {},
     status: { default: "info" }
   },
-  setup(r) {
-    const e = r, a = v(() => ({
-      [`mc-status-badge--${e.status}`]: e.status && e.status != "info"
+  setup(e) {
+    const a = e, t = b(() => ({
+      [`mc-status-badge--${a.status}`]: a.status && a.status != "info"
     }));
-    return (t, n) => (o(), i("div", {
-      class: g(["mc-status-badge", a.value])
+    return (l, n) => (s(), o("div", {
+      class: h(["mc-status-badge", t.value])
     }, [
-      w(Et, { status: t.status }, null, 8, ["status"]),
-      d("span", Qt, b(t.label), 1)
+      k(Ea, { status: e.status }, null, 8, ["status"]),
+      c("span", Qa, p(e.label), 1)
     ], 2));
   }
-}), fo = /* @__PURE__ */ m(Jt, [["__scopeId", "data-v-3e437a03"]]), Wt = {
+}), hl = /* @__PURE__ */ v(Ja, [["__scopeId", "data-v-744550c6"]]), Wa = {
   name: "Cross20",
   props: {
     /**
@@ -1575,23 +1634,23 @@ const Lt = /* @__PURE__ */ m(Ct, [["render", zt]]), jt = ["id", "name", "disable
       default: "currentColor"
     }
   }
-}, Xt = ["fill"];
-function Yt(r, e, a, t, n, s) {
-  return o(), i("svg", {
+}, Xa = ["fill"];
+function Ya(e, a, t, l, n, i) {
+  return s(), o("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] = [
-    d("path", {
+  }, [...a[0] || (a[0] = [
+    c("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, Xt);
+  ])], 8, Xa);
 }
-const W = /* @__PURE__ */ m(Wt, [["render", Yt]]), Zt = {
+const W = /* @__PURE__ */ v(Wa, [["render", Ya]]), Za = {
   name: "InfoCircleFilled32",
   props: {
     /**
@@ -1602,23 +1661,23 @@ const W = /* @__PURE__ */ m(Wt, [["render", Yt]]), Zt = {
       default: "currentColor"
     }
   }
-}, xt = ["fill"];
-function es(r, e, a, t, n, s) {
-  return o(), i("svg", {
+}, es = ["fill"];
+function ts(e, a, t, l, n, i) {
+  return s(), o("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] = [
-    d("path", {
+  }, [...a[0] || (a[0] = [
+    c("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, xt);
+  ])], 8, es);
 }
-const X = /* @__PURE__ */ m(Zt, [["render", es]]), as = {
+const X = /* @__PURE__ */ v(Za, [["render", ts]]), as = {
   name: "WarningCircleFilled32",
   props: {
     /**
@@ -1629,23 +1688,23 @@ const X = /* @__PURE__ */ m(Zt, [["render", es]]), as = {
       default: "currentColor"
     }
   }
-}, ts = ["fill"];
-function ss(r, e, a, t, n, s) {
-  return o(), i("svg", {
+}, ss = ["fill"];
+function ls(e, a, t, l, n, i) {
+  return s(), o("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] = [
-    d("path", {
+  }, [...a[0] || (a[0] = [
+    c("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, ts);
+  ])], 8, ss);
 }
-const Y = /* @__PURE__ */ m(as, [["render", ss]]), os = {
+const Y = /* @__PURE__ */ v(as, [["render", ls]]), ns = {
   name: "CrossCircleFilled32",
   props: {
     /**
@@ -1656,23 +1715,23 @@ const Y = /* @__PURE__ */ m(as, [["render", ss]]), os = {
       default: "currentColor"
     }
   }
-}, ls = ["fill"];
-function ns(r, e, a, t, n, s) {
-  return o(), i("svg", {
+}, os = ["fill"];
+function is(e, a, t, l, n, i) {
+  return s(), o("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] = [
-    d("path", {
+  }, [...a[0] || (a[0] = [
+    c("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, ls);
+  ])], 8, os);
 }
-const Z = /* @__PURE__ */ m(os, [["render", ns]]), is = {
+const Z = /* @__PURE__ */ v(ns, [["render", is]]), cs = {
   name: "CheckCircleFilled32",
   props: {
     /**
@@ -1683,26 +1742,26 @@ const Z = /* @__PURE__ */ m(os, [["render", ns]]), is = {
       default: "currentColor"
     }
   }
-}, rs = ["fill"];
-function ds(r, e, a, t, n, s) {
-  return o(), i("svg", {
+}, ds = ["fill"];
+function rs(e, a, t, l, n, i) {
+  return s(), o("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] = [
-    d("path", {
+  }, [...a[0] || (a[0] = [
+    c("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, rs);
+  ])], 8, ds);
 }
-const x = /* @__PURE__ */ m(is, [["render", ds]]), cs = { class: "mc-status-notification__content" }, us = { class: "mc-status-notification__title" }, ps = { class: "mc-status-notification__message" }, ms = {
+const ee = /* @__PURE__ */ v(cs, [["render", rs]]), us = { class: "mc-status-notification__content" }, ms = { class: "mc-status-notification__title" }, vs = { class: "mc-status-notification__message" }, bs = {
   key: 0,
   class: "mc-status-notification__footer"
-}, _s = /* @__PURE__ */ $({
+}, ps = /* @__PURE__ */ _({
   __name: "MStatusNotification",
   props: {
     title: {},
@@ -1711,13 +1770,13 @@ const x = /* @__PURE__ */ m(is, [["render", ds]]), cs = { class: "mc-status-noti
     closable: { type: Boolean }
   },
   emits: ["close"],
-  setup(r, { emit: e }) {
-    const a = r, t = v(() => ({
-      [`mc-status-notification--${a.status}`]: a.status && a.status != "info"
-    })), n = v(() => {
-      switch (a.status) {
+  setup(e, { emit: a }) {
+    const t = e, l = b(() => ({
+      [`mc-status-notification--${t.status}`]: t.status && t.status != "info"
+    })), n = b(() => {
+      switch (t.status) {
         case "success":
-          return x;
+          return ee;
         case "warning":
           return Y;
         case "error":
@@ -1726,44 +1785,47 @@ const x = /* @__PURE__ */ m(is, [["render", ds]]), cs = { class: "mc-status-noti
         default:
           return X;
       }
-    }), s = e;
-    return (l, p) => (o(), i("section", {
-      class: g(["mc-status-notification", t.value]),
+    }), i = a;
+    return (d, u) => (s(), o("section", {
+      class: h(["mc-status-notification", l.value]),
       role: "status"
     }, [
-      (o(), B(F(n.value), {
+      (s(), C(D(n.value), {
         class: "mc-status-notification__icon",
         "aria-hidden": "true"
       })),
-      d("div", cs, [
-        d("h2", us, b(l.title), 1),
-        d("p", ps, b(l.description), 1),
-        l.$slots.footer ? (o(), i("div", ms, [
-          k(l.$slots, "footer", {}, void 0, !0)
-        ])) : h("", !0)
+      c("div", us, [
+        c("h2", ms, p(e.title), 1),
+        c("p", vs, p(e.description), 1),
+        d.$slots.footer ? (s(), o("div", bs, [
+          y(d.$slots, "footer", {}, void 0, !0)
+        ])) : f("", !0)
       ]),
-      l.closable ? (o(), B(S, {
+      e.closable ? (s(), C(A, {
         key: 0,
         class: "mc-status-notification-closable__close",
         size: "s",
         ghost: "",
         "aria-label": "Close",
-        onClick: p[0] || (p[0] = (u) => s("close"))
+        onClick: u[0] || (u[0] = (m) => i("close"))
       }, {
-        icon: M(() => [
-          w(W, {
+        icon: B(() => [
+          k(W, {
             class: "mc-button__icon",
             "aria-hidden": "true"
           })
         ]),
         _: 1
-      })) : h("", !0)
+      })) : f("", !0)
     ], 2));
   }
-}), ho = /* @__PURE__ */ m(_s, [["__scopeId", "data-v-2c7c85ad"]]), vs = ["aria-label"], bs = ["aria-selected", "onClick"], fs = {
+}), $l = /* @__PURE__ */ v(ps, [["__scopeId", "data-v-a7c71513"]]), fs = ["aria-label"], _s = ["aria-selected", "onClick"], hs = {
   key: 0,
   class: "mc-tabs__icon"
-}, hs = { class: "mc-tabs__label" }, $s = /* @__PURE__ */ $({
+}, $s = { class: "mc-tabs__label" }, gs = {
+  key: 1,
+  class: "mc-tabs__badge"
+}, ys = /* @__PURE__ */ _({
   __name: "MTabs",
   props: {
     description: {},
@@ -1773,50 +1835,56 @@ const x = /* @__PURE__ */ m(is, [["render", ds]]), cs = { class: "mc-status-noti
     tabs: {}
   },
   emits: ["update:modelValue"],
-  setup(r, { emit: e }) {
-    const a = r, t = v(() => ({
-      "mc-tabs--centered": a.centered
-    })), n = z(a.modelValue), s = (u) => {
-      a.tabs[u].disabled || u !== n.value && (n.value = u, p("update:modelValue", u));
-    }, l = (u) => n.value === u, p = e;
-    return (u, _) => (o(), i("nav", {
-      class: g(["mc-tabs", t.value])
+  setup(e, { emit: a }) {
+    const t = e, l = b(() => ({
+      "mc-tabs--centered": t.centered
+    })), n = M(t.modelValue), i = (m) => {
+      t.tabs[m].disabled || m !== n.value && (n.value = m, u("update:modelValue", m));
+    }, d = (m) => n.value === m, u = a;
+    return (m, g) => (s(), o("nav", {
+      class: h(["mc-tabs", l.value])
     }, [
-      d("ul", {
+      c("ul", {
         role: "tablist",
         class: "mc-tabs__list",
-        "aria-label": u.description
+        "aria-label": e.description
       }, [
-        (o(!0), i(P, null, D(u.tabs, (c, f) => (o(), i("li", {
-          key: `tab-${f}`,
+        (s(!0), o(T, null, S(e.tabs, (r, $) => (s(), o("li", {
+          key: `tab-${$}`,
           role: "presentation",
           class: "mc-tabs__item"
         }, [
-          d("button", {
+          c("button", {
             ref_for: !0,
             ref: "tab",
             role: "tab",
-            class: g(["mc-tabs__tab", {
-              "mc-tabs__tab--selected": l(f),
-              "mc-tabs__tab--disabled": c.disabled
+            class: h(["mc-tabs__tab", {
+              "mc-tabs__tab--selected": d($),
+              "mc-tabs__tab--disabled": r.disabled
             }]),
-            "aria-selected": l(f),
+            "aria-selected": d($),
             type: "button",
-            onClick: (C) => s(f)
+            onClick: (x) => i($)
           }, [
-            c.icon ? (o(), i("span", fs, [
-              (o(), B(F(c.icon)))
-            ])) : h("", !0),
-            d("div", hs, [
-              d("span", null, b(c.label), 1)
-            ])
-          ], 10, bs)
+            r.icon ? (s(), o("span", hs, [
+              (s(), C(D(r.icon)))
+            ])) : f("", !0),
+            c("div", $s, [
+              c("span", null, p(r.label), 1)
+            ]),
+            r.badge ? (s(), o("span", gs, [
+              k(J, {
+                label: r.badge
+              }, null, 8, ["label"])
+            ])) : f("", !0)
+          ], 10, _s)
         ]))), 128))
-      ], 8, vs),
-      u.divider ? (o(), B(Ze, { key: 0 })) : h("", !0)
+      ], 8, fs),
+      e.divider ? (s(), C(Ze, { key: 0 })) : f("", !0)
     ], 2));
   }
-}), $o = /* @__PURE__ */ m($s, [["__scopeId", "data-v-3919f834"]]), gs = ["for"], ys = ["id", "name", "checked", "disabled"], ks = { class: "mc-tag__label" }, ws = ["disabled"], Vs = { class: "mc-tag__label" }, Is = ["disabled"], Bs = { class: "mc-tag__label" }, Cs = { class: "mc-tag__label" }, Ms = { class: "mc-tag__label" }, zs = /* @__PURE__ */ $({
+}), gl = /* @__PURE__ */ v(ys, [["__scopeId", "data-v-05fb9ae0"]]), ks = ["for"], ws = ["id", "name", "checked", "disabled"], Vs = { class: "mc-tag__label" }, Is = ["disabled"], Cs = { class: "mc-tag__label" }, xs = ["disabled"], Bs = { class: "mc-tag__label" }, Ms = { class: "mc-tag__label" }, zs = { class: "mc-tag__label" }, Ls = /* @__PURE__ */ _({
+  inheritAttrs: !1,
   __name: "MTag",
   props: {
     type: { default: "informative" },
@@ -1830,69 +1898,70 @@ const x = /* @__PURE__ */ m(is, [["render", ds]]), cs = { class: "mc-status-noti
     removableLabel: {}
   },
   emits: ["update:modelValue", "remove-tag"],
-  setup(r, { emit: e }) {
-    const a = r, t = v(() => ({
-      [`mc-tag-${a.type}`]: a.type && a.type != "informative",
-      [`mc-tag--${a.size}`]: a.size && a.size != "m"
-    })), n = e;
-    return (s, l) => s.type === "selectable" ? (o(), i("label", {
+  setup(e, { emit: a }) {
+    const t = e, l = b(() => ({
+      [`mc-tag-${t.type}`]: t.type && t.type != "informative",
+      [`mc-tag--${t.size}`]: t.size && t.size != "m"
+    })), n = a;
+    return (i, d) => e.type === "selectable" ? (s(), o("label", {
       key: 0,
-      for: s.id,
-      class: g(["mc-tag", t.value])
+      for: e.id,
+      class: h(["mc-tag", l.value])
     }, [
-      d("input", I({
+      c("input", V({
         type: "checkbox",
         class: "mc-tag__input",
-        id: s.id,
-        name: s.name,
-        checked: s.modelValue,
-        disabled: s.disabled,
-        onChange: l[0] || (l[0] = (p) => n("update:modelValue", p.target.checked))
-      }, s.$attrs), null, 16, ys),
-      d("span", ks, b(s.label), 1)
-    ], 10, gs)) : s.type === "interactive" ? (o(), i("button", I({
+        id: e.id,
+        name: e.name,
+        checked: e.modelValue,
+        disabled: e.disabled,
+        onChange: d[0] || (d[0] = (u) => n("update:modelValue", u.target.checked))
+      }, i.$attrs), null, 16, ws),
+      c("span", Vs, p(e.label), 1)
+    ], 10, ks)) : e.type === "interactive" ? (s(), o("button", V({
       key: 1,
-      class: ["mc-tag", t.value],
+      class: ["mc-tag", l.value],
       type: "button",
-      disabled: s.disabled
-    }, s.$attrs), [
-      d("span", Vs, b(s.label), 1)
-    ], 16, ws)) : s.type === "contextualised" ? (o(), i("button", I({
+      disabled: e.disabled
+    }, i.$attrs), [
+      c("span", Cs, p(e.label), 1)
+    ], 16, Is)) : e.type === "contextualised" ? (s(), o("button", V({
       key: 2,
-      class: ["mc-tag", t.value],
+      class: ["mc-tag", l.value],
       type: "button",
-      disabled: s.disabled
-    }, s.$attrs), [
-      w(Qa, {
+      disabled: e.disabled
+    }, i.$attrs), [
+      k(J, {
         appearance: "inverse",
-        label: s.contextualisedNumber,
-        size: s.size === "l" ? "m" : void 0
+        label: e.contextualisedNumber,
+        size: e.size === "l" ? "m" : void 0
       }, null, 8, ["label", "size"]),
-      d("span", Bs, b(s.label), 1)
-    ], 16, Is)) : s.type === "removable" ? (o(), i("span", I({
+      c("span", Bs, p(e.label), 1)
+    ], 16, xs)) : e.type === "removable" ? (s(), o("span", V({
       key: 3,
-      class: ["mc-tag", t.value]
-    }, s.$attrs), [
-      d("span", Cs, b(s.label), 1),
-      d("button", {
+      class: ["mc-tag", l.value]
+    }, i.$attrs), [
+      c("span", Ms, p(e.label), 1),
+      c("button", {
         class: "mc-tag-removable__remove",
         type: "button",
-        onClick: l[1] || (l[1] = (p) => s.id && n("remove-tag", s.id))
+        onClick: d[1] || (d[1] = (u) => e.id && n("remove-tag", e.id))
       }, [
-        w(A, {
+        k(q, {
           class: "mc-tag-removable__icon",
           "aria-hidden": "true"
         }),
-        l[2] || (l[2] = d("span", { class: "mc-tag-removable__text" }, "removableLabel", -1))
+        d[2] || (d[2] = c("span", { class: "mc-tag-removable__text" }, "removableLabel", -1))
       ])
-    ], 16)) : (o(), i("span", I({
+    ], 16)) : (s(), o("span", V({
       key: 4,
-      class: ["mc-tag", t.value]
-    }, s.$attrs), [
-      d("span", Ms, b(s.label), 1)
+      class: ["mc-tag", l.value]
+    }, i.$attrs), [
+      c("span", zs, p(e.label), 1)
     ], 16));
   }
-}), go = /* @__PURE__ */ m(zs, [["__scopeId", "data-v-a3166010"]]), Ls = ["id", "aria-invalid", "value", "name", "placeholder", "disabled", "minlength", "maxlength", "rows", "readonly"], js = /* @__PURE__ */ $({
+}), yl = /* @__PURE__ */ v(Ls, [["__scopeId", "data-v-ff87c7bd"]]), js = ["id", "aria-invalid", "value", "name", "placeholder", "disabled", "minlength", "maxlength", "rows", "readonly"], Os = /* @__PURE__ */ _({
+  inheritAttrs: !1,
   __name: "MTextArea",
   props: {
     id: {},
@@ -1907,33 +1976,34 @@ const x = /* @__PURE__ */ m(is, [["render", ds]]), cs = { class: "mc-status-noti
     readonly: { type: Boolean }
   },
   emits: ["update:modelValue"],
-  setup(r, { emit: e }) {
-    const a = r, t = v(() => ({
-      "is-invalid": a.isInvalid
-    })), n = e;
-    return (s, l) => (o(), i("textarea", I({
-      id: s.id,
-      class: ["mc-textarea", t.value],
-      "aria-invalid": s.isInvalid,
-      value: s.modelValue,
-      name: s.name,
-      placeholder: s.placeholder,
-      disabled: s.disabled,
-      minlength: s.minLength,
-      maxlength: s.maxLength,
-      rows: s.rows,
-      readonly: s.readonly
-    }, s.$attrs, {
-      onInput: l[0] || (l[0] = (p) => n("update:modelValue", p.target.value))
-    }), null, 16, Ls));
+  setup(e, { emit: a }) {
+    const t = e, l = b(() => ({
+      "is-invalid": t.isInvalid
+    })), n = a;
+    return (i, d) => (s(), o("textarea", V({
+      id: e.id,
+      class: ["mc-textarea", l.value],
+      "aria-invalid": e.isInvalid,
+      value: e.modelValue,
+      name: e.name,
+      placeholder: e.placeholder,
+      disabled: e.disabled,
+      minlength: e.minLength,
+      maxlength: e.maxLength,
+      rows: e.rows,
+      readonly: e.readonly
+    }, i.$attrs, {
+      onInput: d[0] || (d[0] = (u) => n("update:modelValue", u.target.value))
+    }), null, 16, js));
   }
-}), yo = /* @__PURE__ */ m(js, [["__scopeId", "data-v-8184b69c"]]), Os = {
+}), kl = /* @__PURE__ */ v(Os, [["__scopeId", "data-v-92dbf400"]]), Ts = {
   key: 0,
   class: "mc-text-input__icon"
-}, Ts = ["id", "value", "type", "name", "placeholder", "disabled", "aria-invalid", "readonly"], Ss = {
+}, Ss = ["id", "value", "type", "name", "placeholder", "disabled", "aria-invalid", "readonly"], As = {
   key: 1,
   class: "mc-controls-options"
-}, Ps = /* @__PURE__ */ $({
+}, Ps = /* @__PURE__ */ _({
+  inheritAttrs: !1,
   __name: "MTextInput",
   props: {
     id: {},
@@ -1949,51 +2019,51 @@ const x = /* @__PURE__ */ m(is, [["render", ds]]), cs = { class: "mc-status-noti
     clearLabel: { default: "clear content" }
   },
   emits: ["update:modelValue"],
-  setup(r, { emit: e }) {
-    const a = r, t = v(() => ({
-      [`mc-text-input--${a.size}`]: a.size && a.size != "m",
-      "is-invalid": a.isInvalid
+  setup(e, { emit: a }) {
+    const t = e, l = b(() => ({
+      [`mc-text-input--${t.size}`]: t.size && t.size != "m",
+      "is-invalid": t.isInvalid
     })), n = () => {
-      s("update:modelValue", "");
-    }, s = e;
-    return (l, p) => (o(), i("div", {
-      class: g(["mc-text-input", t.value])
+      i("update:modelValue", "");
+    }, i = a;
+    return (d, u) => (s(), o("div", {
+      class: h(["mc-text-input", l.value])
     }, [
-      l.$slots.icon ? (o(), i("span", Os, [
-        k(l.$slots, "icon", {}, void 0, !0)
-      ])) : h("", !0),
-      d("input", I({
-        id: l.id,
+      d.$slots.icon ? (s(), o("span", Ts, [
+        y(d.$slots, "icon", {}, void 0, !0)
+      ])) : f("", !0),
+      c("input", V({
+        id: e.id,
         class: "mc-text-input__control",
-        value: l.modelValue,
-        type: l.inputType,
-        name: l.name,
-        placeholder: l.placeholder,
-        disabled: l.disabled,
-        "aria-invalid": l.isInvalid,
-        readonly: l.readonly
-      }, l.$attrs, {
-        onInput: p[0] || (p[0] = (u) => s("update:modelValue", u.target.value))
-      }), null, 16, Ts),
-      l.isClearable && l.modelValue ? (o(), i("div", Ss, [
-        d("button", {
+        value: e.modelValue,
+        type: e.inputType,
+        name: e.name,
+        placeholder: e.placeholder,
+        disabled: e.disabled,
+        "aria-invalid": e.isInvalid,
+        readonly: e.readonly
+      }, d.$attrs, {
+        onInput: u[0] || (u[0] = (m) => i("update:modelValue", m.target.value))
+      }), null, 16, Ss),
+      e.isClearable && e.modelValue ? (s(), o("div", As, [
+        c("button", {
           type: "button",
           class: "mc-controls-options__button",
           onClick: n
         }, [
-          w(A, {
+          k(q, {
             class: "mc-controls-options__icon",
             "aria-hidden": "true"
           }),
-          p[1] || (p[1] = d("span", { class: "mc-controls-options__label" }, "{clearLabel}", -1))
+          u[1] || (u[1] = c("span", { class: "mc-controls-options__label" }, "{clearLabel}", -1))
         ])
-      ])) : h("", !0)
+      ])) : f("", !0)
     ], 2));
   }
-}), ko = /* @__PURE__ */ m(Ps, [["__scopeId", "data-v-d7b75fa8"]]), Ds = { class: "mc-toaster__content" }, qs = { class: "mc-toaster__message" }, Fs = {
+}), wl = /* @__PURE__ */ v(Ps, [["__scopeId", "data-v-8e8fe88e"]]), Ds = { class: "mc-toaster__content" }, qs = { class: "mc-toaster__message" }, Fs = {
   key: 0,
   class: "mc-toaster__action"
-}, As = /* @__PURE__ */ $({
+}, Ns = /* @__PURE__ */ _({
   __name: "MToaster",
   props: {
     open: { type: Boolean },
@@ -2005,15 +2075,15 @@ const x = /* @__PURE__ */ m(is, [["render", ds]]), cs = { class: "mc-status-noti
     timeout: {}
   },
   emits: ["update:open"],
-  setup(r, { emit: e }) {
-    const a = r, t = v(() => ({
-      "is-open": a.open,
-      [`mc-toaster--${a.status}`]: a.status && a.status != "info",
-      [`mc-toaster--${a.position}`]: a.position && a.position != "top"
-    })), n = v(() => {
-      switch (a.status) {
+  setup(e, { emit: a }) {
+    const t = e, l = b(() => ({
+      "is-open": t.open,
+      [`mc-toaster--${t.status}`]: t.status && t.status != "info",
+      [`mc-toaster--${t.position}`]: t.position && t.position != "top"
+    })), n = b(() => {
+      switch (t.status) {
         case "success":
-          return x;
+          return ee;
         case "warning":
           return Y;
         case "error":
@@ -2023,68 +2093,69 @@ const x = /* @__PURE__ */ m(is, [["render", ds]]), cs = { class: "mc-status-noti
           return X;
       }
     });
-    T(
-      () => a.open,
-      (c) => {
-        l("update:open", c);
+    z(
+      () => t.open,
+      (r) => {
+        d("update:open", r);
       }
     );
-    const s = () => {
-      l("update:open", !1);
-    }, l = e, p = z(0);
-    let u = null, _ = null;
-    return se(() => {
-      if (a.timeout)
-        if (a.progress) {
-          const C = 100 / (a.timeout / 100);
-          u = setInterval(() => {
-            p.value += C, p.value >= 100 && (p.value = 100, s(), clearInterval(u));
+    const i = () => {
+      d("update:open", !1);
+    }, d = a, u = M(0);
+    let m = null, g = null;
+    return le(() => {
+      if (t.timeout)
+        if (t.progress) {
+          const x = 100 / (t.timeout / 100);
+          m = setInterval(() => {
+            u.value += x, u.value >= 100 && (u.value = 100, i(), clearInterval(m));
           }, 100);
         } else
-          _ = setTimeout(() => {
-            s();
-          }, a.timeout);
-    }), oe(() => {
-      a.timeout && (u && clearInterval(u), _ && clearTimeout(_));
-    }), (c, f) => (o(), i("section", {
-      class: g(["mc-toaster", t.value]),
+          g = setTimeout(() => {
+            i();
+          }, t.timeout);
+    }), ne(() => {
+      t.timeout && (m && clearInterval(m), g && clearTimeout(g));
+    }), (r, $) => (s(), o("section", {
+      class: h(["mc-toaster", l.value]),
       role: "status"
     }, [
-      (o(), B(F(n.value), {
+      (s(), C(D(n.value), {
         class: "mc-toaster__icon",
         "aria-hidden": "true"
       })),
-      d("div", Ds, [
-        d("p", qs, b(c.description), 1),
-        c.$slots.action ? (o(), i("div", Fs, [
-          k(c.$slots, "action", {}, void 0, !0)
-        ])) : h("", !0)
+      c("div", Ds, [
+        c("p", qs, p(e.description), 1),
+        r.$slots.action ? (s(), o("div", Fs, [
+          y(r.$slots, "action", {}, void 0, !0)
+        ])) : f("", !0)
       ]),
-      c.closable ? (o(), B(S, {
+      e.closable ? (s(), C(A, {
         key: 0,
         class: "mc-toaster__close",
         appearance: "inverse",
         size: "s",
         ghost: "",
         "aria-label": "Close",
-        onClick: s
+        onClick: i
       }, {
-        icon: M(() => [
-          w(W, {
+        icon: B(() => [
+          k(W, {
             class: "mc-button__icon",
             "aria-hidden": "true"
           })
         ]),
         _: 1
-      })) : h("", !0),
-      c.progress ? (o(), B(ft, {
+      })) : f("", !0),
+      e.progress ? (s(), C(Pt, {
         key: 1,
         class: "mc-toaster__indicator",
-        value: p.value
-      }, null, 8, ["value"])) : h("", !0)
+        value: u.value
+      }, null, 8, ["value"])) : f("", !0)
     ], 2));
   }
-}), wo = /* @__PURE__ */ m(As, [["__scopeId", "data-v-8a753ebd"]]), Ns = ["for"], Rs = ["id", "name", "checked", "disabled"], Gs = ["for"], Us = /* @__PURE__ */ $({
+}), Vl = /* @__PURE__ */ v(Ns, [["__scopeId", "data-v-c7799abc"]]), Rs = ["for"], Gs = ["id", "name", "checked", "disabled"], Us = ["for"], Ks = /* @__PURE__ */ _({
+  inheritAttrs: !1,
   __name: "MToggle",
   props: {
     id: {},
@@ -2095,63 +2166,36 @@ const x = /* @__PURE__ */ m(is, [["render", ds]]), cs = { class: "mc-status-noti
     disabled: { type: Boolean }
   },
   emits: ["update:modelValue"],
-  setup(r, { emit: e }) {
-    const a = r, t = v(() => ({
-      [`mc-toggle--${a.size}`]: a.size && a.size != "s"
-    })), n = e;
-    return (s, l) => (o(), i("div", {
-      class: g(["mc-toggle", t.value])
+  setup(e, { emit: a }) {
+    const t = e, l = b(() => ({
+      [`mc-toggle--${t.size}`]: t.size && t.size != "s"
+    })), n = a;
+    return (i, d) => (s(), o("div", {
+      class: h(["mc-toggle", l.value])
     }, [
-      d("label", {
+      c("label", {
         class: "mc-toggle__container",
-        for: s.id
+        for: e.id
       }, [
-        d("input", I({
-          id: s.id,
+        c("input", V({
+          id: e.id,
           type: "checkbox",
           class: "mc-toggle__input",
-          name: s.name,
-          checked: s.modelValue,
-          disabled: s.disabled
-        }, s.$attrs, {
-          onChange: l[0] || (l[0] = (p) => n("update:modelValue", p.target.checked))
-        }), null, 16, Rs),
-        s.label ? (o(), i("span", {
+          name: e.name,
+          checked: e.modelValue,
+          disabled: e.disabled
+        }, i.$attrs, {
+          onChange: d[0] || (d[0] = (u) => n("update:modelValue", u.target.checked))
+        }), null, 16, Gs),
+        e.label ? (s(), o("span", {
           key: 0,
-          for: s.id,
+          for: e.id,
           class: "mc-toggle__label"
-        }, b(s.label), 9, Gs)) : h("", !0)
-      ], 8, Ns)
+        }, p(e.label), 9, Us)) : f("", !0)
+      ], 8, Rs)
     ], 2));
   }
-}), Hs = /* @__PURE__ */ m(Us, [["__scopeId", "data-v-5be734e7"]]), Ks = { class: "tooltip-story-wrapper" }, Es = ["aria-describedby"], Qs = ["id"], Js = /* @__PURE__ */ $({
-  __name: "MTooltip",
-  props: {
-    id: {},
-    text: {},
-    position: { default: "top" },
-    pointer: { type: Boolean, default: !0 }
-  },
-  setup(r) {
-    const e = r, a = v(() => ({
-      [`mc-tooltip--${e.position}`]: e.position,
-      "mc-tooltip--no-pointer": !e.pointer
-    }));
-    return (t, n) => (o(), i("div", Ks, [
-      d("div", {
-        class: g(["mc-tooltip", a.value]),
-        "aria-describedby": t.id
-      }, [
-        k(t.$slots, "default", {}, void 0, !0),
-        d("span", {
-          id: t.id,
-          class: "mc-tooltip__content",
-          role: "tooltip"
-        }, b(t.text), 9, Qs)
-      ], 10, Es)
-    ]));
-  }
-}), Vo = /* @__PURE__ */ m(Js, [["__scopeId", "data-v-f90a7be6"]]), Ws = /* @__PURE__ */ $({
+}), Hs = /* @__PURE__ */ v(Ks, [["__scopeId", "data-v-3f62827d"]]), Es = /* @__PURE__ */ _({
   __name: "MToggleGroup",
   props: {
     name: {},
@@ -2160,80 +2204,107 @@ const x = /* @__PURE__ */ m(is, [["render", ds]]), cs = { class: "mc-status-noti
     inline: { type: Boolean }
   },
   emits: ["update:modelValue"],
-  setup(r, { emit: e }) {
-    const a = r, t = z([]);
-    T(
-      () => a.modelValue,
-      (u) => {
-        t.value = u || [];
+  setup(e, { emit: a }) {
+    const t = e, l = M([]);
+    z(
+      () => t.modelValue,
+      (m) => {
+        l.value = m || [];
       },
       { immediate: !0 }
     );
-    const n = (u, _) => {
-      let c = [...t.value];
-      u && !c.includes(_) ? c.push(_) : c = c.filter((f) => f !== _), p("update:modelValue", c), t.value = c;
-    }, s = v(() => ({
-      "mc-field__container--inline": a.inline
-    })), l = v(() => ({
-      "mc-field__container--inline__item": a.inline
-    })), p = e;
-    return (u, _) => (o(), i("div", {
-      class: g(s.value)
+    const n = (m, g) => {
+      let r = [...l.value];
+      m && !r.includes(g) ? r.push(g) : r = r.filter(($) => $ !== g), u("update:modelValue", r), l.value = r;
+    }, i = b(() => ({
+      "mc-field__container--inline": t.inline
+    })), d = b(() => ({
+      "mc-field__container--inline__item": t.inline
+    })), u = a;
+    return (m, g) => (s(), o("div", {
+      class: h(i.value)
     }, [
-      (o(!0), i(P, null, D(u.options, (c) => (o(), B(Hs, {
-        id: c.id,
-        key: c.id,
-        label: c.label,
-        "is-invalid": c.isInvalid,
-        name: u.name,
-        class: g(l.value),
-        "model-value": u.modelValue ? u.modelValue.includes(c.value) : void 0,
-        disabled: c.disabled,
-        "onUpdate:modelValue": (f) => n(f, c.value)
+      (s(!0), o(T, null, S(e.options, (r) => (s(), C(Hs, {
+        id: r.id,
+        key: r.id,
+        label: r.label,
+        "is-invalid": r.isInvalid,
+        name: e.name,
+        class: h(d.value),
+        "model-value": e.modelValue ? e.modelValue.includes(r.value) : void 0,
+        disabled: r.disabled,
+        "onUpdate:modelValue": ($) => n($, r.value)
       }, null, 8, ["id", "label", "is-invalid", "name", "class", "model-value", "disabled", "onUpdate:modelValue"]))), 128))
     ], 2));
   }
-}), Io = /* @__PURE__ */ m(Ws, [["__scopeId", "data-v-c6b10172"]]);
+}), Il = /* @__PURE__ */ v(Es, [["__scopeId", "data-v-7c4df292"]]), Qs = ["aria-describedby"], Js = ["id"], Ws = /* @__PURE__ */ _({
+  __name: "MTooltip",
+  props: {
+    id: {},
+    text: {},
+    position: { default: "top" },
+    pointer: { type: Boolean, default: !0 }
+  },
+  setup(e) {
+    const a = e, t = b(() => ({
+      [`mc-tooltip--${a.position}`]: a.position,
+      "mc-tooltip--no-pointer": !a.pointer
+    }));
+    return (l, n) => (s(), o("div", {
+      class: h(["mc-tooltip", t.value]),
+      "aria-describedby": e.id
+    }, [
+      y(l.$slots, "default", {}, void 0, !0),
+      c("span", {
+        id: e.id,
+        class: "mc-tooltip__content",
+        role: "tooltip"
+      }, p(e.text), 9, Js)
+    ], 10, Qs));
+  }
+}), Cl = /* @__PURE__ */ v(Ws, [["__scopeId", "data-v-424718c4"]]);
 export {
   Ys as MAvatar,
   Zs as MBreadcrumb,
-  N as MButton,
-  ao as MCallout,
-  Ce as MCheckbox,
-  xs as MCheckboxGroup,
-  eo as MCircularProgressbar,
-  to as MContainer,
-  so as MDatepicker,
+  F as MButton,
+  el as MCallout,
+  Te as MCheckbox,
+  tl as MCheckboxGroup,
+  al as MCircularProgressbar,
+  sl as MContainer,
+  ll as MDatepicker,
   Ze as MDivider,
-  oo as MDrawer,
-  lo as MField,
-  no as MFieldGroup,
-  io as MFlag,
-  S as MIconButton,
-  ft as MLinearProgressbarBuffer,
-  _o as MLinearProgressbarPercentage,
-  ce as MLink,
-  E as MLoader,
-  ro as MLoadingOverlay,
-  co as MModal,
-  Qa as MNumberBadge,
-  J as MOverlay,
-  uo as MPagination,
-  po as MPasswordInput,
-  mo as MPincode,
-  vo as MQuantitySelector,
-  Ut as MRadio,
-  bo as MRadioGroup,
-  Za as MSelect,
-  fo as MStatusBadge,
-  ho as MStatusNotification,
-  $o as MTabs,
-  go as MTag,
-  yo as MTextArea,
-  ko as MTextInput,
-  wo as MToaster,
+  nl as MDrawer,
+  ol as MField,
+  il as MFieldGroup,
+  cl as MFlag,
+  A as MIconButton,
+  Pt as MLinearProgressbarBuffer,
+  dl as MLinearProgressbarPercentage,
+  ue as MLink,
+  H as MLoader,
+  rl as MLoadingOverlay,
+  ul as MModal,
+  J as MNumberBadge,
+  Q as MOverlay,
+  ml as MPagination,
+  vl as MPasswordInput,
+  bl as MPincode,
+  pl as MQuantitySelector,
+  Ra as MRadio,
+  fl as MRadioGroup,
+  _l as MSegmentedControl,
+  na as MSelect,
+  hl as MStatusBadge,
+  Ea as MStatusDot,
+  $l as MStatusNotification,
+  gl as MTabs,
+  yl as MTag,
+  kl as MTextArea,
+  wl as MTextInput,
+  Vl as MToaster,
   Hs as MToggle,
-  Io as MToggleGroup,
-  Vo as MTooltip
+  Il as MToggleGroup,
+  Cl as MTooltip
 };
 //# sourceMappingURL=mozaic-vue.js.map