@mozaic-ds/vue 1.0.0-beta.8 → 1.0.0-beta.9

package/dist/mozaic-vue.js

@@ -1,13 +1,13 @@
-import { defineComponent as y, computed as b, createBlock as C, openBlock as l, resolveDynamicComponent as j, normalizeClass as $, withCtx as M, createElementBlock as n, createCommentVNode as h, createElementVNode as i, renderSlot as V, Fragment as z, renderList as L, createVNode as g, createTextVNode as S, toDisplayString as f, normalizeStyle as U, mergeProps as k, ref as B, watch as O, withDirectives as D, vModelDynamic as F, vModelText as G } from "vue";
-const R = {
+import { defineComponent as y, computed as b, createBlock as I, openBlock as l, resolveDynamicComponent as N, normalizeClass as g, withCtx as C, createElementBlock as n, createCommentVNode as h, createElementVNode as r, renderSlot as V, Fragment as O, renderList as S, createVNode as w, createTextVNode as D, toDisplayString as f, normalizeStyle as J, mergeProps as B, ref as L, watch as q, withKeys as A, withDirectives as K, vModelDynamic as X, nextTick as Y, vModelText as Z } from "vue";
+const x = {
   key: 0,
   class: "mc-link__icon",
   "aria-hidden": "true"
-}, A = { class: "mc-link__label" }, H = {
+}, ee = { class: "mc-link__label" }, ae = {
   key: 1,
   class: "mc-link__icon",
   "aria-hidden": "true"
-}, E = /* @__PURE__ */ y({
+}, te = /* @__PURE__ */ y({
   __name: "MLink",
   props: {
     iconPosition: { default: "left" },
@@ -19,71 +19,71 @@ const R = {
     router: { type: Boolean }
   },
   setup(d) {
-    const a = d, s = 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
+    const e = d, a = b(() => ({
+      [`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 (e, o) => (l(), C(j(e.router ? "router-link" : "a"), {
-      class: $(["mc-link", s.value]),
-      href: e.href,
-      target: e.target,
-      to: e.router ? e.href : void 0
+    return (t, o) => (l(), I(N(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(() => [
-        e.$slots.icon && e.iconPosition == "left" ? (l(), n("span", R, [
-          V(e.$slots, "icon", {}, void 0, !0)
+      default: C(() => [
+        t.$slots.icon && t.iconPosition == "left" ? (l(), n("span", x, [
+          V(t.$slots, "icon", {}, void 0, !0)
         ])) : h("", !0),
-        i("span", A, [
-          V(e.$slots, "default", {}, void 0, !0)
+        r("span", ee, [
+          V(t.$slots, "default", {}, void 0, !0)
         ]),
-        e.$slots.icon && e.iconPosition == "right" ? (l(), n("span", H, [
-          V(e.$slots, "icon", {}, void 0, !0)
+        t.$slots.icon && t.iconPosition == "right" ? (l(), n("span", ae, [
+          V(t.$slots, "icon", {}, void 0, !0)
         ])) : h("", !0)
       ]),
       _: 3
     }, 8, ["class", "href", "target", "to"]));
   }
-}), v = (d, a) => {
-  const s = d.__vccOpts || d;
-  for (const [e, o] of a)
-    s[e] = o;
-  return s;
-}, Q = /* @__PURE__ */ v(E, [["__scopeId", "data-v-df607c25"]]), W = { class: "mc-breadcrumb__container" }, J = /* @__PURE__ */ y({
+}), _ = (d, e) => {
+  const a = d.__vccOpts || d;
+  for (const [t, o] of e)
+    a[t] = o;
+  return a;
+}, se = /* @__PURE__ */ _(te, [["__scopeId", "data-v-df607c25"]]), le = { class: "mc-breadcrumb__container" }, oe = /* @__PURE__ */ y({
   __name: "MBreadcrumb",
   props: {
     appearance: {},
     links: {}
   },
   setup(d) {
-    const a = d, s = b(() => ({
-      [`mc-breadcrumb--${a.appearance}`]: a.appearance && a.appearance != "standard"
-    })), e = (o) => {
-      var t;
-      return o === (((t = a.links) == null ? void 0 : t.length) ?? 0) - 1;
+    const e = d, a = b(() => ({
+      [`mc-breadcrumb--${e.appearance}`]: e.appearance && e.appearance != "standard"
+    })), t = (o) => {
+      var s;
+      return o === (((s = e.links) == null ? void 0 : s.length) ?? 0) - 1;
     };
-    return (o, t) => (l(), n("nav", {
-      class: $(["mc-breadcrumb", s.value]),
+    return (o, s) => (l(), n("nav", {
+      class: g(["mc-breadcrumb", a.value]),
       "aria-label": "Breadcrumb"
     }, [
-      i("ul", W, [
-        (l(!0), n(z, null, L(o.links, (c, u) => (l(), n("li", {
+      r("ul", le, [
+        (l(!0), n(O, null, S(o.links, (i, u) => (l(), n("li", {
           class: "mc-breadcrumb__item",
           key: `breadcrumb-${u}`
         }, [
-          g(Q, {
-            href: c.href,
-            router: c.router,
+          w(se, {
+            href: i.href,
+            router: i.router,
             appearance: o.appearance,
             inline: "",
-            class: $({
-              "mc-breadcrumb__current": e(u)
+            class: g({
+              "mc-breadcrumb__current": t(u)
             }),
-            "aria-current": e(u) ? "page" : void 0
+            "aria-current": t(u) ? "page" : void 0
           }, {
-            default: M(() => [
-              S(f(c.label), 1)
+            default: C(() => [
+              D(f(i.label), 1)
             ]),
             _: 2
           }, 1032, ["href", "router", "appearance", "class", "aria-current"])
@@ -91,11 +91,11 @@ const R = {
       ])
     ], 2));
   }
-}), Lt = /* @__PURE__ */ v(J, [["__scopeId", "data-v-09df4905"]]), K = { class: "mc-loader__spinner" }, X = ["viewBox"], Y = ["r"], x = {
+}), _s = /* @__PURE__ */ _(oe, [["__scopeId", "data-v-41249412"]]), ne = { class: "mc-loader__spinner" }, ie = ["viewBox"], de = ["r"], re = {
   key: 0,
   class: "mc-loader__text",
   role: "status"
-}, ee = /* @__PURE__ */ y({
+}, ce = /* @__PURE__ */ y({
   __name: "MLoader",
   props: {
     appearance: { default: "standard" },
@@ -103,71 +103,72 @@ const R = {
     text: {}
   },
   setup(d) {
-    const a = d, s = b(() => ({
-      [`mc-loader--${a.size}`]: a.size && a.size !== "m",
-      [`mc-loader--${a.appearance}`]: a.appearance && a.appearance !== "standard"
-    })), e = b(() => {
-      let t;
-      switch (a.size) {
+    const e = d, a = b(() => ({
+      [`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 = b(() => {
+      let s;
+      switch (e.size) {
         case "s":
-          t = "0 0 24 24";
+          s = "0 0 24 24";
           break;
         case "l":
-          t = "0 0 64 64";
+          s = "0 0 64 64";
           break;
         default:
-          t = "0 0 32 32";
+          s = "0 0 32 32";
       }
-      return t;
+      return s;
     }), o = b(() => {
-      let t;
-      switch (a.size) {
+      let s;
+      switch (e.size) {
         case "s":
-          t = 6;
+          s = 6;
           break;
         case "l":
-          t = 19;
+          s = 19;
           break;
         default:
-          t = 9;
+          s = 9;
       }
-      return t;
+      return s;
     });
-    return (t, c) => (l(), n("div", {
-      class: $(["mc-loader", s.value])
+    return (s, i) => (l(), n("div", {
+      class: g(["mc-loader", a.value])
     }, [
-      i("span", K, [
+      r("span", ne, [
         (l(), n("svg", {
           class: "mc-loader__icon",
           xmlns: "http://www.w3.org/2000/svg",
-          viewBox: e.value,
+          viewBox: t.value,
           "aria-hidden": "true"
         }, [
-          i("circle", {
+          r("circle", {
             class: "mc-loader__path",
             cx: "50%",
             cy: "50%",
             r: o.value
-          }, null, 8, Y)
-        ], 8, X))
+          }, null, 8, de)
+        ], 8, ie))
       ]),
-      t.text ? (l(), n("p", x, f(t.text), 1)) : h("", !0)
+      s.text ? (l(), n("p", re, f(s.text), 1)) : h("", !0)
     ], 2));
   }
-}), ae = /* @__PURE__ */ v(ee, [["__scopeId", "data-v-56c66912"]]), te = ["disabled", "type"], se = {
+}), H = /* @__PURE__ */ _(ce, [["__scopeId", "data-v-998c550b"]]), ue = ["disabled", "type"], pe = {
   key: 0,
   class: "mc-button__icon"
-}, le = {
+}, me = {
   key: 1,
   class: "mc-button__icon",
   style: { position: "absolute" }
-}, ne = {
+}, _e = {
   key: 2,
   class: "mc-button__icon"
-}, oe = {
+}, ve = {
   key: 4,
   class: "mc-button__icon"
-}, ie = /* @__PURE__ */ y({
+}, be = /* @__PURE__ */ y({
   __name: "MButton",
   props: {
     appearance: { default: "standard" },
@@ -180,44 +181,44 @@ const R = {
     isLoading: { type: Boolean }
   },
   setup(d) {
-    const a = d, s = 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"
+    const e = d, a = b(() => ({
+      [`mc-button--${e.appearance}`]: e.appearance && e.appearance != "standard",
+      [`mc-button--${e.size}`]: e.size && e.size != "m",
+      "mc-button--ghost": e.ghost,
+      "mc-button--outlined": e.outlined,
+      "mc-button--icon-only": e.iconPosition == "only"
     }));
-    return (e, o) => (l(), n("button", {
-      class: $(["mc-button", s.value]),
-      disabled: e.disabled,
-      type: e.type
+    return (t, o) => (l(), n("button", {
+      class: g(["mc-button", a.value]),
+      disabled: t.disabled,
+      type: t.type
     }, [
-      e.$slots.icon && e.iconPosition == "left" && !e.isLoading ? (l(), n("span", se, [
-        V(e.$slots, "icon", {}, void 0, !0)
+      t.$slots.icon && t.iconPosition == "left" && !t.isLoading ? (l(), n("span", pe, [
+        V(t.$slots, "icon", {}, void 0, !0)
       ])) : h("", !0),
-      e.isLoading ? (l(), n("span", le, [
-        g(ae, {
+      t.isLoading ? (l(), n("span", me, [
+        w(H, {
           style: { color: "currentColor" },
           size: "s"
         })
       ])) : h("", !0),
-      e.$slots.icon && e.iconPosition == "only" ? (l(), n("span", ne, [
-        V(e.$slots, "icon", {}, void 0, !0)
+      t.$slots.icon && t.iconPosition == "only" ? (l(), n("span", _e, [
+        V(t.$slots, "icon", {}, void 0, !0)
       ])) : (l(), n("span", {
         key: 3,
         class: "mc-button__label",
-        style: U({ visibility: e.isLoading ? "hidden" : "visible" })
+        style: J({ visibility: t.isLoading ? "hidden" : "visible" })
       }, [
-        V(e.$slots, "default", {}, () => [
-          o[0] || (o[0] = S("Button Label"))
+        V(t.$slots, "default", {}, () => [
+          o[0] || (o[0] = D("Button Label"))
         ], !0)
       ], 4)),
-      e.$slots.icon && e.iconPosition == "right" && !e.isLoading ? (l(), n("span", oe, [
-        V(e.$slots, "icon", {}, void 0, !0)
+      t.$slots.icon && t.iconPosition == "right" && !t.isLoading ? (l(), n("span", ve, [
+        V(t.$slots, "icon", {}, void 0, !0)
       ])) : h("", !0)
-    ], 10, te));
+    ], 10, ue));
   }
-}), T = /* @__PURE__ */ v(ie, [["__scopeId", "data-v-f4f43ab6"]]), de = { class: "mc-checkbox" }, re = ["id", "name", "checked", "indeterminate", "disabled", "aria-invalid"], ce = ["for"], ue = /* @__PURE__ */ y({
+}), F = /* @__PURE__ */ _(be, [["__scopeId", "data-v-f4f43ab6"]]), fe = { class: "mc-checkbox" }, he = ["id", "name", "checked", "indeterminate", "disabled", "aria-invalid"], $e = ["for"], ye = /* @__PURE__ */ y({
   __name: "MCheckbox",
   props: {
     id: {},
@@ -229,31 +230,31 @@ const R = {
     disabled: { type: Boolean }
   },
   emits: ["update:modelValue"],
-  setup(d, { emit: a }) {
-    const s = d, e = b(() => ({
-      "is-invalid": s.isInvalid
-    })), o = a;
-    return (t, c) => (l(), n("div", de, [
-      i("input", k({
-        id: t.id,
+  setup(d, { emit: e }) {
+    const a = d, t = b(() => ({
+      "is-invalid": a.isInvalid
+    })), o = e;
+    return (s, i) => (l(), n("div", fe, [
+      r("input", B({
+        id: s.id,
         type: "checkbox",
-        class: ["mc-checkbox__input", e.value],
-        name: t.name,
-        checked: t.modelValue,
-        indeterminate: t.indeterminate,
-        disabled: t.disabled,
-        "aria-invalid": t.isInvalid
-      }, t.$attrs, {
-        onChange: c[0] || (c[0] = (u) => o("update:modelValue", u.target.checked))
-      }), null, 16, re),
-      t.label ? (l(), n("label", {
+        class: ["mc-checkbox__input", t.value],
+        name: s.name,
+        checked: s.modelValue,
+        indeterminate: s.indeterminate,
+        disabled: s.disabled,
+        "aria-invalid": s.isInvalid
+      }, s.$attrs, {
+        onChange: i[0] || (i[0] = (u) => o("update:modelValue", u.target.checked))
+      }), null, 16, he),
+      s.label ? (l(), n("label", {
         key: 0,
-        for: t.id,
+        for: s.id,
         class: "mc-checkbox__label"
-      }, f(t.label), 9, ce)) : h("", !0)
+      }, f(s.label), 9, $e)) : h("", !0)
     ]));
   }
-}), pe = /* @__PURE__ */ v(ue, [["__scopeId", "data-v-37fd0a35"]]), me = /* @__PURE__ */ y({
+}), ge = /* @__PURE__ */ _(ye, [["__scopeId", "data-v-37fd0a35"]]), ke = /* @__PURE__ */ y({
   __name: "MCheckboxGroup",
   props: {
     name: {},
@@ -262,40 +263,40 @@ const R = {
     inline: { type: Boolean }
   },
   emits: ["update:modelValue"],
-  setup(d, { emit: a }) {
-    const s = d, e = B([]);
-    O(
-      () => s.modelValue,
+  setup(d, { emit: e }) {
+    const a = d, t = L([]);
+    q(
+      () => a.modelValue,
       (p) => {
-        e.value = p || [];
+        t.value = p || [];
       },
       { immediate: !0 }
     );
     const o = (p, m) => {
-      let r = [...e.value];
-      p && !r.includes(m) ? r.push(m) : r = r.filter((_) => _ !== m), u("update:modelValue", r), e.value = r;
-    }, t = b(() => ({
-      "mc-field__container--inline": s.inline
-    })), c = b(() => ({
-      "mc-field__container--inline__item": s.inline
-    })), u = a;
+      let c = [...t.value];
+      p && !c.includes(m) ? c.push(m) : c = c.filter((v) => v !== m), u("update:modelValue", c), t.value = c;
+    }, s = b(() => ({
+      "mc-field__container--inline": a.inline
+    })), i = b(() => ({
+      "mc-field__container--inline__item": a.inline
+    })), u = e;
     return (p, m) => (l(), n("div", {
-      class: $(["mc-field__container", t.value])
+      class: g(["mc-field__container", s.value])
     }, [
-      (l(!0), n(z, null, L(p.options, (r) => (l(), C(pe, {
-        id: r.id,
-        key: r.id,
-        label: r.label,
-        "is-invalid": r.isInvalid,
+      (l(!0), n(O, null, S(p.options, (c) => (l(), I(ge, {
+        id: c.id,
+        key: c.id,
+        label: c.label,
+        "is-invalid": c.isInvalid,
         name: p.name,
-        class: $(["mc-field__item", c.value]),
-        "model-value": p.modelValue ? p.modelValue.includes(r.value) : void 0,
-        disabled: r.disabled,
-        "onUpdate:modelValue": (_) => o(_, r.value)
+        class: g(["mc-field__item", i.value]),
+        "model-value": p.modelValue ? p.modelValue.includes(c.value) : void 0,
+        disabled: c.disabled,
+        "onUpdate:modelValue": (v) => o(v, c.value)
       }, null, 8, ["id", "label", "is-invalid", "name", "class", "model-value", "disabled", "onUpdate:modelValue"]))), 128))
     ], 2));
   }
-}), St = /* @__PURE__ */ v(me, [["__scopeId", "data-v-8ee4699f"]]), _e = { class: "mc-divider" }, ve = /* @__PURE__ */ y({
+}), vs = /* @__PURE__ */ _(ke, [["__scopeId", "data-v-8ee4699f"]]), we = { class: "mc-divider" }, Ve = /* @__PURE__ */ y({
   __name: "MDivider",
   props: {
     orientation: { default: "horizontal" },
@@ -303,22 +304,220 @@ const R = {
     size: { default: "s" }
   },
   setup(d) {
-    const a = d, s = b(() => ({
-      [`mc-divider-${a.orientation}`]: a.orientation,
-      [`mc-divider-horizontal--${a.style}`]: a.style && a.style != "primary",
-      [`mc-divider-horizontal--${a.size}`]: a.size && a.size != "s"
+    const e = d, a = b(() => ({
+      [`mc-divider-${e.orientation}`]: e.orientation,
+      [`mc-divider-horizontal--${e.style}`]: e.style && e.style != "primary",
+      [`mc-divider-horizontal--${e.size}`]: e.size && e.size != "s"
     }));
-    return (e, o) => (l(), n("div", _e, [
-      i("div", {
-        class: $(s.value)
+    return (t, o) => (l(), n("div", we, [
+      r("div", {
+        class: g(a.value)
       }, null, 2),
-      V(e.$slots, "default", {}, void 0, !0)
+      V(t.$slots, "default", {}, void 0, !0)
     ]));
   }
-}), be = /* @__PURE__ */ v(ve, [["__scopeId", "data-v-b2b223a3"]]), fe = { class: "mc-field" }, he = ["for"], $e = {
+}), Be = /* @__PURE__ */ _(Ve, [["__scopeId", "data-v-f8e160af"]]), Ie = {
+  name: "ArrowBack24",
+  props: {
+    /**
+     * Icon color
+     */
+    color: {
+      type: String,
+      default: "currentColor"
+    }
+  }
+}, Ce = ["fill"];
+function Me(d, e, a, t, o, s) {
+  return l(), n("svg", {
+    "aria-hidden": "true",
+    fill: a.color,
+    xmlns: "http://www.w3.org/2000/svg",
+    viewBox: "0 0 24 24",
+    width: "24",
+    height: "24"
+  }, e[0] || (e[0] = [
+    r("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, Ce);
+}
+const ze = /* @__PURE__ */ _(Ie, [["render", Me]]), Le = {
+  name: "Cross24",
+  props: {
+    /**
+     * Icon color
+     */
+    color: {
+      type: String,
+      default: "currentColor"
+    }
+  }
+}, Te = ["fill"];
+function je(d, e, a, t, o, s) {
+  return l(), n("svg", {
+    "aria-hidden": "true",
+    fill: a.color,
+    xmlns: "http://www.w3.org/2000/svg",
+    viewBox: "0 0 24 24",
+    width: "24",
+    height: "24"
+  }, e[0] || (e[0] = [
+    r("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, Te);
+}
+const E = /* @__PURE__ */ _(Le, [["render", je]]), Oe = ["disabled", "type"], Se = { class: "mc-button__icon" }, qe = /* @__PURE__ */ y({
+  __name: "MIconButton",
+  props: {
+    appearance: { default: "standard" },
+    size: { default: "m" },
+    disabled: { type: Boolean },
+    ghost: { type: Boolean },
+    outlined: { type: Boolean },
+    type: { default: "button" }
+  },
+  setup(d) {
+    const e = d, a = b(() => ({
+      [`mc-button--${e.appearance}`]: e.appearance && e.appearance != "standard",
+      [`mc-button--${e.size}`]: e.size && e.size != "m",
+      "mc-button--ghost": e.ghost,
+      "mc-button--outlined": e.outlined
+    }));
+    return (t, o) => (l(), n("button", {
+      class: g(["mc-button mc-button--icon-button", a.value]),
+      disabled: t.disabled,
+      type: t.type
+    }, [
+      r("span", Se, [
+        V(t.$slots, "icon", {}, void 0, !0)
+      ])
+    ], 10, Oe));
+  }
+}), P = /* @__PURE__ */ _(qe, [["__scopeId", "data-v-abf78562"]]), Pe = ["aria-labelledby"], De = /* @__PURE__ */ y({
+  __name: "MOverlay",
+  props: {
+    isVisible: { type: Boolean },
+    dialogLabel: {}
+  },
+  setup(d) {
+    return (e, a) => (l(), n("div", {
+      class: g(["mc-overlay", { "is-visible": e.isVisible }])
+    }, [
+      r("div", {
+        role: "dialog",
+        tabindex: "-1",
+        "aria-labelledby": e.dialogLabel
+      }, [
+        V(e.$slots, "default", {}, void 0, !0)
+      ], 8, Pe)
+    ], 2));
+  }
+}), Q = /* @__PURE__ */ _(De, [["__scopeId", "data-v-db90fdb3"]]), Fe = ["aria-modal", "aria-hidden"], Ne = {
+  class: "mc-drawer__dialog",
+  role: "document"
+}, Ae = { class: "mc-drawer__header" }, Re = {
+  class: "mc-drawer__title",
+  id: "drawerTitle"
+}, Ge = { class: "mc-drawer__body" }, Ue = {
+  class: "mc-drawer__content",
+  tabindex: "0"
+}, Ke = {
+  key: 0,
+  class: "mc-drawer__content__title"
+}, He = {
+  key: 0,
+  class: "mc-drawer__footer"
+}, Ee = /* @__PURE__ */ y({
+  __name: "MDrawer",
+  props: {
+    open: { type: Boolean },
+    position: {},
+    extended: { type: Boolean },
+    back: { type: Boolean },
+    title: {},
+    contentTitle: {}
+  },
+  emits: ["update:open", "back"],
+  setup(d, { emit: e }) {
+    const a = d, t = b(() => ({
+      "is-open": a.open,
+      "mc-drawer--extend": a.extended,
+      [`mc-drawer--${a.position}`]: a.position && a.position != "right"
+    }));
+    q(
+      () => a.open,
+      (i) => {
+        s("update:open", i);
+      }
+    );
+    const o = () => {
+      s("update:open", !1);
+    }, s = e;
+    return (i, u) => (l(), I(Q, {
+      "is-visible": i.open,
+      dialogLabel: "drawerTitle"
+    }, {
+      default: C(() => [
+        r("section", B({
+          class: ["mc-drawer", t.value],
+          role: "dialog",
+          "aria-labelledby": "drawerTitle",
+          "aria-modal": i.open ? "true" : "false",
+          tabindex: "-1",
+          "aria-hidden": !i.open
+        }, i.$attrs, {
+          onKeydown: A(o, ["esc"])
+        }), [
+          r("div", Ne, [
+            r("div", Ae, [
+              i.back ? (l(), I(P, {
+                key: 0,
+                class: "mc-drawer__back",
+                "aria-label": "Back",
+                ghost: "",
+                onClick: u[0] || (u[0] = (p) => s("back"))
+              }, {
+                icon: C(() => [
+                  w(ze, { "aria-hidden": "true" })
+                ]),
+                _: 1
+              })) : h("", !0),
+              r("h2", Re, f(i.title), 1),
+              w(P, {
+                class: "mc-drawer__close",
+                "aria-label": "Close",
+                ghost: "",
+                onClick: o
+              }, {
+                icon: C(() => [
+                  w(E, { "aria-hidden": "true" })
+                ]),
+                _: 1
+              })
+            ]),
+            r("div", Ge, [
+              r("div", Ue, [
+                i.contentTitle ? (l(), n("h2", Ke, f(i.contentTitle), 1)) : h("", !0),
+                V(i.$slots, "default", {}, void 0, !0)
+              ])
+            ]),
+            i.$slots.footer ? (l(), n("div", He, [
+              V(i.$slots, "footer", {}, void 0, !0)
+            ])) : h("", !0)
+          ])
+        ], 16, Fe)
+      ]),
+      _: 3
+    }, 8, ["is-visible"]));
+  }
+}), bs = /* @__PURE__ */ _(Ee, [["__scopeId", "data-v-673a796c"]]), Qe = { class: "mc-field" }, We = ["for"], Je = {
   key: 0,
   class: "mc-field__requirement"
-}, ye = ["id"], ge = { class: "mc-field__content" }, ke = ["id"], Ve = /* @__PURE__ */ y({
+}, Xe = ["id"], Ye = { class: "mc-field__content" }, Ze = ["id"], xe = /* @__PURE__ */ y({
   __name: "MField",
   props: {
     id: {},
@@ -332,40 +531,40 @@ const R = {
     message: {}
   },
   setup(d) {
-    const a = d, s = b(() => ({
-      "is-valid": a.isValid,
-      "is-invalid": a.isInvalid
+    const e = d, a = b(() => ({
+      "is-valid": e.isValid,
+      "is-invalid": e.isInvalid
     }));
-    return (e, o) => (l(), n("div", fe, [
-      i("label", {
+    return (t, o) => (l(), n("div", Qe, [
+      r("label", {
         class: "mc-field__label",
-        for: e.id
+        for: t.id
       }, [
-        S(f(e.label) + " ", 1),
-        e.requirementText ? (l(), n("span", $e, "(" + f(e.requirementText) + ")", 1)) : h("", !0)
-      ], 8, he),
-      e.helpId && e.helpText ? (l(), n("span", {
+        D(f(t.label) + " ", 1),
+        t.requirementText ? (l(), n("span", Je, "(" + f(t.requirementText) + ")", 1)) : h("", !0)
+      ], 8, We),
+      t.helpId && t.helpText ? (l(), n("span", {
         key: 0,
-        id: e.helpId,
+        id: t.helpId,
         class: "mc-field__help"
-      }, f(e.helpText), 9, ye)) : h("", !0),
-      i("div", ge, [
-        V(e.$slots, "default", {}, void 0, !0)
+      }, f(t.helpText), 9, Xe)) : h("", !0),
+      r("div", Ye, [
+        V(t.$slots, "default", {}, void 0, !0)
       ]),
-      (e.isValid || e.isInvalid) && e.message ? (l(), n("span", {
+      (t.isValid || t.isInvalid) && t.message ? (l(), n("span", {
         key: 1,
-        class: $(["mc-field__validation-message", s.value]),
-        id: e.messageId
-      }, f(e.message), 11, ke)) : h("", !0)
+        class: g(["mc-field__validation-message", a.value]),
+        id: t.messageId
+      }, f(t.message), 11, Ze)) : h("", !0)
     ]));
   }
-}), Ot = /* @__PURE__ */ v(Ve, [["__scopeId", "data-v-ead078c4"]]), Ce = { class: "mc-field--group" }, we = ["for"], Ie = {
+}), fs = /* @__PURE__ */ _(xe, [["__scopeId", "data-v-ead078c4"]]), ea = { class: "mc-field--group" }, aa = ["for"], ta = {
   key: 0,
   class: "mc-field__requirement"
-}, Be = {
+}, sa = {
   key: 0,
   class: "mc-field__help"
-}, Me = { class: "mc-field__content" }, ze = /* @__PURE__ */ y({
+}, la = { class: "mc-field__content" }, oa = /* @__PURE__ */ y({
   __name: "MFieldGroup",
   props: {
     id: {},
@@ -377,56 +576,136 @@ const R = {
     message: {}
   },
   setup(d) {
-    const a = d, s = b(() => ({
-      "is-valid": a.isValid,
-      "is-invalid": a.isInvalid
+    const e = d, a = b(() => ({
+      "is-valid": e.isValid,
+      "is-invalid": e.isInvalid
     }));
-    return (e, o) => (l(), n("fieldset", Ce, [
-      i("legend", {
+    return (t, o) => (l(), n("fieldset", ea, [
+      r("legend", {
         class: "mc-field__legend",
-        for: e.id
+        for: t.id
       }, [
-        S(f(e.legend) + " ", 1),
-        e.requirementText ? (l(), n("span", Ie, "(" + f(e.requirementText) + ")", 1)) : h("", !0)
-      ], 8, we),
-      e.helpText ? (l(), n("span", Be, f(e.helpText), 1)) : h("", !0),
-      i("div", Me, [
-        V(e.$slots, "default", {}, void 0, !0)
+        D(f(t.legend) + " ", 1),
+        t.requirementText ? (l(), n("span", ta, "(" + f(t.requirementText) + ")", 1)) : h("", !0)
+      ], 8, aa),
+      t.helpText ? (l(), n("span", sa, f(t.helpText), 1)) : h("", !0),
+      r("div", la, [
+        V(t.$slots, "default", {}, void 0, !0)
       ]),
-      (e.isValid || e.isInvalid) && e.message ? (l(), n("span", {
+      (t.isValid || t.isInvalid) && t.message ? (l(), n("span", {
         key: 1,
-        class: $(["mc-field__validation-message", s.value])
-      }, f(e.message), 3)) : h("", !0)
+        class: g(["mc-field__validation-message", a.value])
+      }, f(t.message), 3)) : h("", !0)
     ]));
   }
-}), Tt = /* @__PURE__ */ v(ze, [["__scopeId", "data-v-fc0c08dc"]]), Le = ["disabled", "type"], Se = { class: "mc-button__icon" }, Oe = /* @__PURE__ */ y({
-  __name: "MIconButton",
+}), hs = /* @__PURE__ */ _(oa, [["__scopeId", "data-v-fc0c08dc"]]), na = ["aria-label"], ia = /* @__PURE__ */ y({
+  __name: "MLoadingOverlay",
   props: {
-    appearance: { default: "standard" },
-    size: { default: "m" },
-    disabled: { type: Boolean },
-    ghost: { type: Boolean },
-    outlined: { type: Boolean },
-    type: { default: "button" }
+    isVisible: { type: Boolean },
+    text: {}
   },
   setup(d) {
-    const a = d, s = 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 (e, o) => (l(), n("button", {
-      class: $(["mc-button mc-button--icon-button", s.value]),
-      disabled: e.disabled,
-      type: e.type
+    return (e, a) => (l(), n("div", {
+      class: g(["mc-loading-loader", { "is-visible": e.isVisible }])
     }, [
-      i("span", Se, [
-        V(e.$slots, "icon", {}, void 0, !0)
-      ])
-    ], 10, Le));
+      r("div", B({
+        role: "dialog",
+        tabindex: "-1",
+        "aria-label": e.text
+      }, e.$attrs), [
+        w(H, {
+          size: "l",
+          appearance: "inverse",
+          text: e.text
+        }, null, 8, ["text"])
+      ], 16, na)
+    ], 2));
+  }
+}), $s = /* @__PURE__ */ _(ia, [["__scopeId", "data-v-eae6b1f2"]]), da = ["aria-modal", "aria-hidden"], ra = {
+  class: "mc-modal__dialog",
+  role: "document"
+}, ca = { class: "mc-modal__header" }, ua = {
+  key: 0,
+  class: "mc-modal__icon"
+}, pa = {
+  class: "mc-modal__title",
+  id: "modalTitle"
+}, ma = { class: "mc-modal__body" }, _a = {
+  key: 0,
+  class: "mc-modal__footer"
+}, va = { class: "mc-modal__link" }, ba = /* @__PURE__ */ y({
+  __name: "MModal",
+  props: {
+    open: { type: Boolean },
+    title: {},
+    description: {},
+    closable: { type: Boolean, default: !0 }
+  },
+  emits: ["update:open"],
+  setup(d, { emit: e }) {
+    const a = d, t = b(() => ({
+      "is-open": a.open
+    }));
+    q(
+      () => a.open,
+      (i) => {
+        s("update:open", i);
+      }
+    );
+    const o = () => {
+      s("update:open", !1);
+    }, s = e;
+    return (i, u) => (l(), I(Q, {
+      "is-visible": i.open,
+      dialogLabel: "modalTitle"
+    }, {
+      default: C(() => [
+        r("section", B({
+          class: ["mc-modal", t.value],
+          role: "dialog",
+          "aria-labelledby": "modalTitle",
+          "aria-modal": i.open ? "true" : "false",
+          tabindex: "-1",
+          "aria-hidden": !i.open
+        }, i.$attrs, {
+          onKeydown: A(o, ["esc"])
+        }), [
+          r("div", ra, [
+            r("header", ca, [
+              i.$slots.icon ? (l(), n("span", ua, [
+                V(i.$slots, "icon", {}, void 0, !0)
+              ])) : h("", !0),
+              r("h2", pa, f(i.title), 1),
+              i.closable ? (l(), I(P, {
+                key: 1,
+                class: "mc-modal__close",
+                "aria-label": "Close",
+                ghost: "",
+                onClick: o
+              }, {
+                icon: C(() => [
+                  w(E, { "aria-hidden": "true" })
+                ]),
+                _: 1
+              })) : h("", !0)
+            ]),
+            r("main", ma, [
+              r("p", null, f(i.description), 1),
+              V(i.$slots, "default", {}, void 0, !0)
+            ]),
+            i.$slots.footer ? (l(), n("footer", _a, [
+              r("span", va, [
+                V(i.$slots, "link", {}, void 0, !0)
+              ]),
+              V(i.$slots, "footer", {}, void 0, !0)
+            ])) : h("", !0)
+          ])
+        ], 16, da)
+      ]),
+      _: 3
+    }, 8, ["is-visible"]));
   }
-}), P = /* @__PURE__ */ v(Oe, [["__scopeId", "data-v-abf78562"]]), Te = /* @__PURE__ */ y({
+}), ys = /* @__PURE__ */ _(ba, [["__scopeId", "data-v-20ce36b2"]]), fa = /* @__PURE__ */ y({
   __name: "MNumberBadge",
   props: {
     label: {},
@@ -434,38 +713,19 @@ const R = {
     size: { default: "s" }
   },
   setup(d) {
-    const a = d, s = b(() => ({
-      [`mc-number-badge--${a.appearance}`]: a.appearance && a.appearance != "standard",
-      [`mc-number-badge--${a.size}`]: a.size && a.size != "s"
+    const e = d, a = b(() => ({
+      [`mc-number-badge--${e.appearance}`]: e.appearance && e.appearance != "standard",
+      [`mc-number-badge--${e.size}`]: e.size && e.size != "s"
     }));
-    return (e, o) => (l(), n("span", {
-      class: $(["mc-number-badge", s.value])
-    }, f(e.label), 3));
-  }
-}), je = /* @__PURE__ */ v(Te, [["__scopeId", "data-v-7e6acb92"]]), qe = ["aria-labelledby"], Pe = /* @__PURE__ */ y({
-  __name: "MOverlay",
-  props: {
-    isVisible: { type: Boolean },
-    dialogLabel: {}
-  },
-  setup(d) {
-    return (a, s) => (l(), n("div", {
-      class: $(["mc-overlay", { "is-visible": a.isVisible }])
-    }, [
-      i("div", {
-        role: "dialog",
-        tabindex: "-1",
-        "aria-labelledby": a.dialogLabel
-      }, [
-        V(a.$slots, "default", {}, void 0, !0)
-      ], 8, qe)
-    ], 2));
+    return (t, o) => (l(), n("span", {
+      class: g(["mc-number-badge", a.value])
+    }, f(t.label), 3));
   }
-}), jt = /* @__PURE__ */ v(Pe, [["__scopeId", "data-v-db90fdb3"]]), Ze = ["id", "name", "value", "disabled"], Ne = {
+}), ha = /* @__PURE__ */ _(fa, [["__scopeId", "data-v-7e6acb92"]]), $a = ["id", "name", "value", "disabled"], ya = {
   key: 0,
   value: "",
   disabled: ""
-}, De = ["value", "disabled"], Ue = /* @__PURE__ */ y({
+}, ga = ["value", "disabled"], ka = /* @__PURE__ */ y({
   __name: "MSelect",
   props: {
     id: {},
@@ -479,31 +739,31 @@ const R = {
     readonly: { type: Boolean }
   },
   emits: ["update:modelValue"],
-  setup(d, { emit: a }) {
-    const s = d, e = b(() => ({
-      [`mc-select--${s.size}`]: s.size && s.size != "m",
-      "mc-select--readonly": s.readonly,
-      "is-invalid": s.isInvalid
-    })), o = a;
-    return (t, c) => (l(), n("select", k({
-      id: t.id,
-      class: ["mc-select", e.value],
-      name: t.name,
-      value: t.modelValue,
-      disabled: t.disabled
-    }, t.$attrs, {
-      onChange: c[0] || (c[0] = (u) => o("update:modelValue", u.target.value))
+  setup(d, { emit: e }) {
+    const a = d, t = b(() => ({
+      [`mc-select--${a.size}`]: a.size && a.size != "m",
+      "mc-select--readonly": a.readonly,
+      "is-invalid": a.isInvalid
+    })), o = e;
+    return (s, i) => (l(), n("select", B({
+      id: s.id,
+      class: ["mc-select", t.value],
+      name: s.name,
+      value: s.modelValue,
+      disabled: s.disabled
+    }, s.$attrs, {
+      onChange: i[0] || (i[0] = (u) => o("update:modelValue", u.target.value))
     }), [
-      t.placeholder ? (l(), n("option", Ne, " -- " + f(t.placeholder) + " -- ", 1)) : h("", !0),
-      (l(!0), n(z, null, L(t.options, (u, p) => (l(), n("option", k({
+      s.placeholder ? (l(), n("option", ya, " -- " + f(s.placeholder) + " -- ", 1)) : h("", !0),
+      (l(!0), n(O, null, S(s.options, (u, p) => (l(), n("option", B({
         key: p,
         value: u.value
       }, { ref_for: !0 }, u.attributes, {
         disabled: u.disabled
-      }), f(u.text), 17, De))), 128))
-    ], 16, Ze));
+      }), f(u.text), 17, ga))), 128))
+    ], 16, $a));
   }
-}), Fe = /* @__PURE__ */ v(Ue, [["__scopeId", "data-v-68c735e4"]]), Ge = {
+}), wa = /* @__PURE__ */ _(ka, [["__scopeId", "data-v-68c735e4"]]), Va = {
   name: "ChevronLeft24",
   props: {
     /**
@@ -514,30 +774,23 @@ const R = {
       default: "currentColor"
     }
   }
-}, Re = {
-  xmlns: "http://www.w3.org/2000/svg",
-  viewBox: "0 0 24 24"
-};
-function Ae(d, a, s, e, o, t) {
-  return l(), n("svg", Re, a[0] || (a[0] = [
-    i("g", { "clip-path": "url(#a)" }, [
-      i("path", {
-        "fill-rule": "evenodd",
-        d: "M15.207 6.293a1 1 0 0 1 0 1.414L10.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 0Z"
-      })
-    ], -1),
-    i("defs", null, [
-      i("clipPath", { id: "a" }, [
-        i("rect", {
-          width: "24",
-          height: "24",
-          fill: "#fff"
-        })
-      ])
-    ], -1)
-  ]));
+}, Ba = ["fill"];
+function Ia(d, e, a, t, o, s) {
+  return l(), n("svg", {
+    "aria-hidden": "true",
+    fill: a.color,
+    xmlns: "http://www.w3.org/2000/svg",
+    viewBox: "0 0 24 24",
+    width: "24",
+    height: "24"
+  }, e[0] || (e[0] = [
+    r("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, Ba);
 }
-const Z = /* @__PURE__ */ v(Ge, [["render", Ae]]), He = {
+const G = /* @__PURE__ */ _(Va, [["render", Ia]]), Ca = {
   name: "ChevronRight24",
   props: {
     /**
@@ -548,41 +801,34 @@ const Z = /* @__PURE__ */ v(Ge, [["render", Ae]]), He = {
       default: "currentColor"
     }
   }
-}, Ee = {
-  xmlns: "http://www.w3.org/2000/svg",
-  viewBox: "0 0 24 24"
-};
-function Qe(d, a, s, e, o, t) {
-  return l(), n("svg", Ee, a[0] || (a[0] = [
-    i("g", { "clip-path": "url(#a)" }, [
-      i("path", {
-        "fill-rule": "evenodd",
-        d: "M8.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.414L13.086 12 8.793 7.707a1 1 0 0 1 0-1.414Z"
-      })
-    ], -1),
-    i("defs", null, [
-      i("clipPath", { id: "a" }, [
-        i("rect", {
-          width: "24",
-          height: "24",
-          fill: "#fff"
-        })
-      ])
-    ], -1)
-  ]));
+}, Ma = ["fill"];
+function za(d, e, a, t, o, s) {
+  return l(), n("svg", {
+    "aria-hidden": "true",
+    fill: a.color,
+    xmlns: "http://www.w3.org/2000/svg",
+    viewBox: "0 0 24 24",
+    width: "24",
+    height: "24"
+  }, e[0] || (e[0] = [
+    r("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, Ma);
 }
-const N = /* @__PURE__ */ v(He, [["render", Qe]]), We = {
+const U = /* @__PURE__ */ _(Ca, [["render", za]]), La = {
   class: "mc-pagination",
   role: "navigation",
   "aria-label": "pagination"
-}, Je = {
+}, Ta = {
   key: 2,
   class: "mc-pagination__field"
-}, Ke = {
+}, ja = {
   key: 3,
   class: "mc-pagination__label",
   "aria-current": "page"
-}, Xe = /* @__PURE__ */ y({
+}, Oa = /* @__PURE__ */ y({
   __name: "MPagination",
   props: {
     id: {},
@@ -592,91 +838,93 @@ const N = /* @__PURE__ */ v(He, [["render", Qe]]), We = {
     selectLabel: {}
   },
   emits: ["update:modelValue"],
-  setup(d, { emit: a }) {
-    const s = d, e = a, o = B(s.modelValue);
-    O(o, (r) => {
-      r !== s.modelValue && e("update:modelValue", r);
+  setup(d, { emit: e }) {
+    const a = d, t = e, o = L(a.modelValue);
+    q(o, (c) => {
+      c !== a.modelValue && t("update:modelValue", c);
     });
-    const t = b(
-      () => s.options.findIndex((r) => r.value === o.value)
-    ), c = b(() => t.value === 0), u = b(() => t.value === s.options.length - 1), p = () => {
-      const r = s.options.findIndex(
-        (_) => _.value === o.value
+    const s = b(
+      () => a.options.findIndex((c) => c.value === o.value)
+    ), i = b(() => s.value === 0), u = b(
+      () => s.value === a.options.length - 1
+    ), p = () => {
+      const c = a.options.findIndex(
+        (v) => v.value === o.value
       );
-      r > 0 && (o.value = s.options[r - 1].value, e("update:modelValue", s.options[r - 1].value));
+      c > 0 && (o.value = a.options[c - 1].value, t("update:modelValue", a.options[c - 1].value));
     }, m = () => {
-      const r = s.options.findIndex(
-        (_) => _.value === o.value
+      const c = a.options.findIndex(
+        (v) => v.value === o.value
       );
-      r < s.options.length - 1 && (o.value = s.options[r + 1].value, e("update:modelValue", s.options[r + 1].value));
+      c < a.options.length - 1 && (o.value = a.options[c + 1].value, t("update:modelValue", a.options[c + 1].value));
     };
-    return (r, _) => {
-      var I;
-      return l(), n("nav", We, [
-        r.compact ? (l(), C(P, {
+    return (c, v) => {
+      var z;
+      return l(), n("nav", La, [
+        c.compact ? (l(), I(P, {
           key: 1,
           outlined: "",
           "aria-label": "Previous page",
-          disabled: c.value,
+          disabled: i.value,
           onClick: p
         }, {
-          icon: M(() => [
-            g(Z)
+          icon: C(() => [
+            w(G)
           ]),
           _: 1
-        }, 8, ["disabled"])) : (l(), C(T, {
+        }, 8, ["disabled"])) : (l(), I(F, {
           key: 0,
           "icon-position": "only",
           "aria-label": "Previous page",
-          disabled: c.value,
+          disabled: i.value,
           onClick: p
         }, {
-          icon: M(() => [
-            g(Z)
+          icon: C(() => [
+            w(G)
           ]),
           _: 1
         }, 8, ["disabled"])),
-        r.compact ? h("", !0) : (l(), n("div", Je, [
-          g(Fe, {
+        c.compact ? h("", !0) : (l(), n("div", Ta, [
+          w(wa, {
             class: "mc-pagination__select",
-            id: r.id,
+            id: c.id,
             modelValue: o.value,
             "onUpdate:modelValue": [
-              _[0] || (_[0] = (w) => o.value = w),
-              _[1] || (_[1] = (w) => e("update:modelValue", Number(w)))
+              v[0] || (v[0] = ($) => o.value = $),
+              v[1] || (v[1] = ($) => t("update:modelValue", Number($)))
             ],
-            options: r.options,
-            "aria-label": r.selectLabel
+            options: c.options,
+            "aria-label": c.selectLabel
           }, null, 8, ["id", "modelValue", "options", "aria-label"])
         ])),
-        r.compact ? (l(), n("span", Ke, f((I = r.options.find((w) => w.value === o.value)) == null ? void 0 : I.text), 1)) : h("", !0),
-        r.compact ? (l(), C(P, {
+        c.compact ? (l(), n("span", ja, f((z = c.options.find(($) => $.value === o.value)) == null ? void 0 : z.text), 1)) : h("", !0),
+        c.compact ? (l(), I(P, {
           key: 5,
           outlined: "",
           "aria-label": "Next page",
           disabled: u.value,
           onClick: m
         }, {
-          icon: M(() => [
-            g(N)
+          icon: C(() => [
+            w(U)
           ]),
           _: 1
-        }, 8, ["disabled"])) : (l(), C(T, {
+        }, 8, ["disabled"])) : (l(), I(F, {
           key: 4,
           "icon-position": "only",
           "aria-label": "Next page",
           disabled: u.value,
           onClick: m
         }, {
-          icon: M(() => [
-            g(N)
+          icon: C(() => [
+            w(U)
           ]),
           _: 1
         }, 8, ["disabled"]))
       ]);
     };
   }
-}), qt = /* @__PURE__ */ v(Xe, [["__scopeId", "data-v-f959ec90"]]), Ye = {
+}), gs = /* @__PURE__ */ _(Oa, [["__scopeId", "data-v-3b9257ac"]]), Sa = {
   name: "CrossCircleFilled24",
   props: {
     /**
@@ -687,22 +935,26 @@ const N = /* @__PURE__ */ v(He, [["render", Qe]]), We = {
       default: "currentColor"
     }
   }
-}, xe = {
-  xmlns: "http://www.w3.org/2000/svg",
-  viewBox: "0 0 24 24"
-};
-function ea(d, a, s, e, o, t) {
-  return l(), n("svg", xe, a[0] || (a[0] = [
-    i("path", {
+}, qa = ["fill"];
+function Pa(d, e, a, t, o, s) {
+  return l(), n("svg", {
+    "aria-hidden": "true",
+    fill: a.color,
+    xmlns: "http://www.w3.org/2000/svg",
+    viewBox: "0 0 24 24",
+    width: "24",
+    height: "24"
+  }, e[0] || (e[0] = [
+    r("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 2ZM8.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.414Z"
+      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, qa);
 }
-const q = /* @__PURE__ */ v(Ye, [["render", ea]]), aa = ["id", "type", "name", "placeholder", "disabled", "aria-invalid", "readonly"], ta = {
+const R = /* @__PURE__ */ _(Sa, [["render", Pa]]), Da = ["id", "type", "name", "placeholder", "disabled", "aria-invalid", "readonly"], Fa = {
   key: 0,
   class: "mc-controls-options"
-}, sa = { class: "mc-controls-options__label" }, la = /* @__PURE__ */ y({
+}, Na = { class: "mc-controls-options__label" }, Aa = /* @__PURE__ */ y({
   __name: "MPasswordInput",
   props: {
     id: {},
@@ -717,61 +969,133 @@ const q = /* @__PURE__ */ v(Ye, [["render", ea]]), aa = ["id", "type", "name", "
     buttonLabel: { default: () => ({ show: "Show", hide: "Hide" }) }
   },
   emits: ["update:modelValue"],
-  setup(d, { emit: a }) {
-    const s = d, e = b(() => ({
-      "is-invalid": s.isInvalid
-    })), o = B(s.modelValue), t = B(!1), c = () => {
-      o.value = "", r("update:modelValue", "");
+  setup(d, { emit: e }) {
+    const a = d, t = b(() => ({
+      "is-invalid": a.isInvalid
+    })), o = L(a.modelValue), s = L(!1), i = () => {
+      o.value = "", c("update:modelValue", "");
     }, u = () => {
-      t.value = !t.value;
-    }, p = b(() => t.value ? "text" : "password"), m = b(() => t.value ? "true" : "false"), r = a;
-    return (_, I) => (l(), n("div", {
-      class: $(["mc-password-input mc-text-input", e.value])
+      s.value = !s.value;
+    }, p = b(() => s.value ? "text" : "password"), m = b(() => s.value ? "true" : "false"), c = e;
+    return (v, z) => (l(), n("div", {
+      class: g(["mc-password-input mc-text-input", t.value])
     }, [
-      D(i("input", k({
+      K(r("input", B({
         class: "mc-password-input__control mc-text-input__control",
-        "onUpdate:modelValue": I[0] || (I[0] = (w) => o.value = w),
-        id: _.id,
+        "onUpdate:modelValue": z[0] || (z[0] = ($) => o.value = $),
+        id: v.id,
         type: p.value,
-        name: _.name,
-        placeholder: _.placeholder,
-        disabled: _.disabled,
-        "aria-invalid": _.isInvalid,
-        readonly: _.readonly
-      }, _.$attrs, {
-        onInput: I[1] || (I[1] = (w) => r("update:modelValue", w.target.value))
-      }), null, 16, aa), [
-        [F, o.value]
+        name: v.name,
+        placeholder: v.placeholder,
+        disabled: v.disabled,
+        "aria-invalid": v.isInvalid,
+        readonly: v.readonly
+      }, v.$attrs, {
+        onInput: z[1] || (z[1] = ($) => c("update:modelValue", $.target.value))
+      }), null, 16, Da), [
+        [X, o.value]
       ]),
-      _.isClearable && o.value ? (l(), n("div", ta, [
-        i("button", {
+      v.isClearable && o.value ? (l(), n("div", Fa, [
+        r("button", {
           class: "mc-controls-options__button",
-          onClick: c
+          onClick: i
         }, [
-          g(q, {
+          w(R, {
             class: "mc-controls-options__icon",
             "aria-hidden": "true"
           }),
-          i("span", sa, f(_.clearLabel), 1)
+          r("span", Na, f(v.clearLabel), 1)
         ])
       ])) : h("", !0),
-      g(T, {
+      w(F, {
         ref: "button",
         role: "switch",
         "aria-checked": m.value,
-        disabled: _.disabled,
+        disabled: v.disabled,
         onClick: u,
         size: "s",
         ghost: ""
       }, {
-        default: M(() => [
-          S(f(t.value ? _.buttonLabel.hide : _.buttonLabel.show), 1)
+        default: C(() => [
+          D(f(s.value ? v.buttonLabel.hide : v.buttonLabel.show), 1)
         ]),
         _: 1
       }, 8, ["aria-checked", "disabled"])
     ], 2));
   }
-}), Pt = /* @__PURE__ */ v(la, [["__scopeId", "data-v-a5164b59"]]), na = {
+}), ks = /* @__PURE__ */ _(Aa, [["__scopeId", "data-v-167f10e2"]]), Ra = ["id", "name", "disabled", "readonly", "value", "onInput", "onKeydown"], Ga = /* @__PURE__ */ y({
+  __name: "MPincode",
+  props: {
+    id: {},
+    length: { default: 6 },
+    name: {},
+    modelValue: {},
+    isInvalid: { type: Boolean },
+    disabled: { type: Boolean },
+    readonly: { type: Boolean }
+  },
+  emits: ["update:modelValue"],
+  setup(d, { emit: e }) {
+    const a = d, t = b(() => ({
+      "is-invalid": a.isInvalid
+    })), o = e, s = L(Array(a.length).fill("")), i = L([]), u = ($, k) => {
+      i.value[k] = $;
+    };
+    q(
+      () => a.modelValue,
+      ($) => {
+        const k = String($ ?? "");
+        s.value = Array.from({ length: a.length }, (T, M) => k[M] ?? "");
+      },
+      { immediate: !0 }
+    );
+    const p = ($) => {
+      Y(() => {
+        var k;
+        return (k = i.value[$]) == null ? void 0 : k.focus();
+      });
+    }, m = ($, k) => {
+      const T = $.target.value.replace(/\D/g, "");
+      T ? (s.value[k] = T[0], o("update:modelValue", s.value.join("")), k + 1 < a.length && p(k + 1)) : (s.value[k] = "", o("update:modelValue", s.value.join("")));
+    }, c = ($, k) => {
+      $.key === "ArrowLeft" && k > 0 ? p(k - 1) : $.key === "ArrowRight" && k < a.length - 1 ? p(k + 1) : $.key === "Backspace" && v($, k);
+    }, v = ($, k) => {
+      s.value[k] === "" && k > 0 && (s.value[k - 1] = "", o("update:modelValue", s.value.join("")), p(k - 1));
+    }, z = ($) => {
+      var M;
+      $.preventDefault();
+      const T = (((M = $.clipboardData) == null ? void 0 : M.getData("text")) ?? "").replace(/\D/g, "").slice(0, a.length).split("");
+      s.value = Array.from({ length: a.length }, (j, W) => T[W] ?? ""), o("update:modelValue", s.value.join("")), p(Math.min(T.length, a.length - 1));
+    };
+    return ($, k) => (l(), n("div", {
+      class: g(["mc-pincode-input", t.value]),
+      onPaste: z
+    }, [
+      (l(!0), n(O, null, S(s.value, (T, M) => (l(), n("input", B({
+        key: M,
+        id: `pincodeItem${M}`,
+        ref_for: !0,
+        ref: (j) => u(j, M),
+        type: "text",
+        inputmode: "numeric",
+        maxlength: "1",
+        pattern: "\\d*",
+        autocomplete: "one-time-code",
+        name: $.name || `pincode-${$.id}`,
+        class: "mc-pincode-input__control",
+        disabled: $.disabled,
+        readonly: $.readonly,
+        value: T
+      }, { ref_for: !0 }, $.$attrs, {
+        onInput: (j) => m(j, M),
+        onKeydown: [
+          A((j) => v(j, M), ["backspace"]),
+          (j) => c(j, M)
+        ]
+      }), null, 16, Ra))), 128))
+    ], 34));
+  }
+}), ws = /* @__PURE__ */ _(Ga, [["__scopeId", "data-v-1bcac0ce"]]), Ua = {
   name: "More24",
   props: {
     /**
@@ -782,30 +1106,23 @@ const q = /* @__PURE__ */ v(Ye, [["render", ea]]), aa = ["id", "type", "name", "
       default: "currentColor"
     }
   }
-}, oa = {
-  xmlns: "http://www.w3.org/2000/svg",
-  viewBox: "0 0 24 24"
-};
-function ia(d, a, s, e, o, t) {
-  return l(), n("svg", oa, a[0] || (a[0] = [
-    i("g", { "clip-path": "url(#a)" }, [
-      i("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-6V5Z"
-      })
-    ], -1),
-    i("defs", null, [
-      i("clipPath", { id: "a" }, [
-        i("rect", {
-          width: "24",
-          height: "24",
-          fill: "#fff"
-        })
-      ])
-    ], -1)
-  ]));
+}, Ka = ["fill"];
+function Ha(d, e, a, t, o, s) {
+  return l(), n("svg", {
+    "aria-hidden": "true",
+    fill: a.color,
+    xmlns: "http://www.w3.org/2000/svg",
+    viewBox: "0 0 24 24",
+    width: "24",
+    height: "24"
+  }, e[0] || (e[0] = [
+    r("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, Ka);
 }
-const da = /* @__PURE__ */ v(na, [["render", ia]]), ra = {
+const Ea = /* @__PURE__ */ _(Ua, [["render", Ha]]), Qa = {
   name: "Less24",
   props: {
     /**
@@ -816,30 +1133,23 @@ const da = /* @__PURE__ */ v(na, [["render", ia]]), ra = {
       default: "currentColor"
     }
   }
-}, ca = {
-  xmlns: "http://www.w3.org/2000/svg",
-  viewBox: "0 0 24 24"
-};
-function ua(d, a, s, e, o, t) {
-  return l(), n("svg", ca, a[0] || (a[0] = [
-    i("g", { "clip-path": "url(#a)" }, [
-      i("path", {
-        "fill-rule": "evenodd",
-        d: "M6 12a1 1 0 0 1 1-1h10a1 1 0 1 1 0 2H7a1 1 0 0 1-1-1Z"
-      })
-    ], -1),
-    i("defs", null, [
-      i("clipPath", { id: "a" }, [
-        i("rect", {
-          width: "24",
-          height: "24",
-          fill: "#fff"
-        })
-      ])
-    ], -1)
-  ]));
+}, Wa = ["fill"];
+function Ja(d, e, a, t, o, s) {
+  return l(), n("svg", {
+    "aria-hidden": "true",
+    fill: a.color,
+    xmlns: "http://www.w3.org/2000/svg",
+    viewBox: "0 0 24 24",
+    width: "24",
+    height: "24"
+  }, e[0] || (e[0] = [
+    r("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, Wa);
 }
-const pa = /* @__PURE__ */ v(ra, [["render", ua]]), ma = ["id", "name", "disabled", "min", "max", "step", "readonly", "aria-invalid", "aria-valuemin", "aria-valuemax", "aria-valuenow"], _a = ["aria-controls", "disabled"], va = { class: "mc-quantity-selector__icon" }, ba = { class: "mc-quantity-selector__label" }, fa = ["aria-controls", "disabled"], ha = { class: "mc-quantity-selector__icon" }, $a = { class: "mc-quantity-selector__label" }, ya = /* @__PURE__ */ y({
+const Xa = /* @__PURE__ */ _(Qa, [["render", Ja]]), Ya = ["id", "name", "disabled", "min", "max", "step", "readonly", "aria-invalid", "aria-valuemin", "aria-valuemax", "aria-valuenow"], Za = ["aria-controls", "disabled"], xa = { class: "mc-quantity-selector__icon" }, et = { class: "mc-quantity-selector__label" }, at = ["aria-controls", "disabled"], tt = { class: "mc-quantity-selector__icon" }, st = { class: "mc-quantity-selector__label" }, lt = /* @__PURE__ */ y({
   __name: "MQuantitySelector",
   props: {
     id: {},
@@ -856,27 +1166,27 @@ const pa = /* @__PURE__ */ v(ra, [["render", ua]]), ma = ["id", "name", "disable
     decrementLabel: { default: "Decrement" }
   },
   emits: ["update:modelValue"],
-  setup(d, { emit: a }) {
-    const s = d, e = B(s.modelValue);
-    O(e, (m) => {
-      m !== s.modelValue && p("update:modelValue", m);
+  setup(d, { emit: e }) {
+    const a = d, t = L(a.modelValue);
+    q(t, (m) => {
+      m !== a.modelValue && p("update:modelValue", m);
     });
     const o = b(() => ({
-      [`mc-quantity-selector--${s.size}`]: s.size && s.size != "m",
-      "is-invalid": s.isInvalid
-    })), t = () => {
-      e.value + s.step <= s.max ? e.value += s.step : e.value = s.max;
-    }, c = () => {
-      e.value - s.step > s.min ? e.value -= s.step : e.value = s.min;
+      [`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;
+    }, i = () => {
+      t.value - a.step > a.min ? t.value -= a.step : t.value = a.min;
     }, u = (m) => {
-      e.value = m, e.value > s.max && (e.value = s.max), e.value <= s.min && (e.value = s.min), p("update:modelValue", e.value);
-    }, p = a;
-    return (m, r) => (l(), n("div", {
-      class: $(["mc-quantity-selector", o.value])
+      t.value = m, t.value > a.max && (t.value = a.max), t.value <= a.min && (t.value = a.min), p("update:modelValue", t.value);
+    }, p = e;
+    return (m, c) => (l(), n("div", {
+      class: g(["mc-quantity-selector", o.value])
     }, [
-      D(i("input", k({
+      K(r("input", B({
         id: m.id,
-        "onUpdate:modelValue": r[0] || (r[0] = (_) => e.value = _),
+        "onUpdate:modelValue": c[0] || (c[0] = (v) => t.value = v),
         class: "mc-quantity-selector__control",
         type: "number",
         name: m.name,
@@ -888,11 +1198,11 @@ const pa = /* @__PURE__ */ v(ra, [["render", ua]]), ma = ["id", "name", "disable
         "aria-invalid": m.isInvalid,
         "aria-valuemin": m.min,
         "aria-valuemax": m.max,
-        "aria-valuenow": e.value
+        "aria-valuenow": t.value
       }, m.$attrs, {
-        onChange: r[1] || (r[1] = (_) => u(Number(_.target.value)))
-      }), null, 16, ma), [
-        [G, e.value]
+        onChange: c[1] || (c[1] = (v) => u(Number(v.target.value)))
+      }), null, 16, Ya), [
+        [Z, t.value]
       ]),
       m.readonly ? h("", !0) : (l(), n("button", {
         key: 0,
@@ -900,31 +1210,31 @@ const pa = /* @__PURE__ */ v(ra, [["render", ua]]), ma = ["id", "name", "disable
         "aria-controls": m.id,
         class: "mc-quantity-selector__button mc-quantity-selector__button--increase",
         tabindex: "-1",
-        disabled: m.disabled || e.value === m.max,
-        onClick: t
+        disabled: m.disabled || t.value === m.max,
+        onClick: s
       }, [
-        i("span", va, [
-          g(da)
+        r("span", xa, [
+          w(Ea)
         ]),
-        i("span", ba, f(m.incrementlabel), 1)
-      ], 8, _a)),
+        r("span", et, f(m.incrementlabel), 1)
+      ], 8, Za)),
       m.readonly ? h("", !0) : (l(), n("button", {
         key: 1,
         type: "button",
         "aria-controls": m.id,
         class: "mc-quantity-selector__button mc-quantity-selector__button--decrease",
         tabindex: "-1",
-        disabled: m.disabled || e.value === m.min,
-        onClick: c
+        disabled: m.disabled || t.value === m.min,
+        onClick: i
       }, [
-        i("span", ha, [
-          g(pa)
+        r("span", tt, [
+          w(Xa)
         ]),
-        i("span", $a, f(m.decrementLabel), 1)
-      ], 8, fa))
+        r("span", st, f(m.decrementLabel), 1)
+      ], 8, at))
     ], 2));
   }
-}), Zt = /* @__PURE__ */ v(ya, [["__scopeId", "data-v-a732650a"]]), ga = { class: "mc-radio" }, ka = ["id", "name", "checked", "disabled", "aria-invalid"], Va = ["for"], Ca = /* @__PURE__ */ y({
+}), Vs = /* @__PURE__ */ _(lt, [["__scopeId", "data-v-a732650a"]]), ot = { class: "mc-radio" }, nt = ["id", "name", "checked", "disabled", "aria-invalid"], it = ["for"], dt = /* @__PURE__ */ y({
   __name: "MRadio",
   props: {
     id: {},
@@ -935,30 +1245,30 @@ const pa = /* @__PURE__ */ v(ra, [["render", ua]]), ma = ["id", "name", "disable
     disabled: { type: Boolean }
   },
   emits: ["update:modelValue"],
-  setup(d, { emit: a }) {
-    const s = d, e = b(() => ({
-      "is-invalid": s.isInvalid
-    })), o = a;
-    return (t, c) => (l(), n("div", ga, [
-      i("input", k({
-        id: t.id,
+  setup(d, { emit: e }) {
+    const a = d, t = b(() => ({
+      "is-invalid": a.isInvalid
+    })), o = e;
+    return (s, i) => (l(), n("div", ot, [
+      r("input", B({
+        id: s.id,
         type: "radio",
-        class: ["mc-radio__input", e.value],
-        name: t.name,
-        checked: t.modelValue,
-        disabled: t.disabled,
-        "aria-invalid": t.isInvalid
-      }, t.$attrs, {
-        onChange: c[0] || (c[0] = (u) => o("update:modelValue", u.target.checked))
-      }), null, 16, ka),
-      t.label ? (l(), n("label", {
+        class: ["mc-radio__input", t.value],
+        name: s.name,
+        checked: s.modelValue,
+        disabled: s.disabled,
+        "aria-invalid": s.isInvalid
+      }, s.$attrs, {
+        onChange: i[0] || (i[0] = (u) => o("update:modelValue", u.target.checked))
+      }), null, 16, nt),
+      s.label ? (l(), n("label", {
         key: 0,
-        for: t.id,
+        for: s.id,
         class: "mc-radio__label"
-      }, f(t.label), 9, Va)) : h("", !0)
+      }, f(s.label), 9, it)) : h("", !0)
     ]));
   }
-}), wa = /* @__PURE__ */ v(Ca, [["__scopeId", "data-v-da78938c"]]), Ia = /* @__PURE__ */ y({
+}), rt = /* @__PURE__ */ _(dt, [["__scopeId", "data-v-da78938c"]]), ct = /* @__PURE__ */ y({
   __name: "MRadioGroup",
   props: {
     name: {},
@@ -968,61 +1278,61 @@ const pa = /* @__PURE__ */ v(ra, [["render", ua]]), ma = ["id", "name", "disable
     inline: { type: Boolean }
   },
   emits: ["update:modelValue"],
-  setup(d, { emit: a }) {
-    const s = d, e = b(() => ({
-      "mc-field__container--inline": s.inline
+  setup(d, { emit: e }) {
+    const a = d, t = b(() => ({
+      "mc-field__container--inline": a.inline
     })), o = b(() => ({
-      "mc-field__container--inline__item": s.inline
-    })), t = a;
-    return (c, u) => (l(), n("div", {
-      class: $(["mc-field__container", e.value])
+      "mc-field__container--inline__item": a.inline
+    })), s = e;
+    return (i, u) => (l(), n("div", {
+      class: g(["mc-field__container", t.value])
     }, [
-      (l(!0), n(z, null, L(c.options, (p) => (l(), C(wa, {
+      (l(!0), n(O, null, S(i.options, (p) => (l(), I(rt, {
         id: p.id,
         key: p.id,
         label: p.label,
-        "is-invalid": c.isInvalid,
-        name: c.name,
-        class: $(["mc-field__item", o.value]),
-        "model-value": c.modelValue === p.value,
+        "is-invalid": i.isInvalid,
+        name: i.name,
+        class: g(["mc-field__item", o.value]),
+        "model-value": i.modelValue === p.value,
         disabled: p.disabled,
-        "onUpdate:modelValue": (m) => m ? t("update:modelValue", p.value) : null
+        "onUpdate:modelValue": (m) => m ? s("update:modelValue", p.value) : null
       }, null, 8, ["id", "label", "is-invalid", "name", "class", "model-value", "disabled", "onUpdate:modelValue"]))), 128))
     ], 2));
   }
-}), Nt = /* @__PURE__ */ v(Ia, [["__scopeId", "data-v-d2f5e103"]]), Ba = /* @__PURE__ */ y({
+}), Bs = /* @__PURE__ */ _(ct, [["__scopeId", "data-v-d2f5e103"]]), ut = /* @__PURE__ */ y({
   __name: "MStatusDot",
   props: {
     status: { default: "info" },
     size: {}
   },
   setup(d) {
-    const a = d, s = b(() => ({
-      [`mc-status-dot--${a.status}`]: a.status && a.status != "info",
-      [`mc-status-dot--${a.size}`]: a.size && a.size != "m"
+    const e = d, a = b(() => ({
+      [`mc-status-dot--${e.status}`]: e.status && e.status != "info",
+      [`mc-status-dot--${e.size}`]: e.size && e.size != "m"
     }));
-    return (e, o) => (l(), n("span", {
-      class: $(["mc-status-dot", s.value])
+    return (t, o) => (l(), n("span", {
+      class: g(["mc-status-dot", a.value])
     }, null, 2));
   }
-}), Ma = /* @__PURE__ */ v(Ba, [["__scopeId", "data-v-417b563f"]]), za = { class: "mc-status-badge__label" }, La = /* @__PURE__ */ y({
+}), pt = /* @__PURE__ */ _(ut, [["__scopeId", "data-v-417b563f"]]), mt = { class: "mc-status-badge__label" }, _t = /* @__PURE__ */ y({
   __name: "MStatusBadge",
   props: {
     label: {},
     status: { default: "info" }
   },
   setup(d) {
-    const a = d, s = b(() => ({
-      [`mc-status-badge--${a.status}`]: a.status && a.status != "info"
+    const e = d, a = b(() => ({
+      [`mc-status-badge--${e.status}`]: e.status && e.status != "info"
     }));
-    return (e, o) => (l(), n("div", {
-      class: $(["mc-status-badge", s.value])
+    return (t, o) => (l(), n("div", {
+      class: g(["mc-status-badge", a.value])
     }, [
-      g(Ma, { status: e.status }, null, 8, ["status"]),
-      i("span", za, f(e.label), 1)
+      w(pt, { status: t.status }, null, 8, ["status"]),
+      r("span", mt, f(t.label), 1)
     ], 2));
   }
-}), Dt = /* @__PURE__ */ v(La, [["__scopeId", "data-v-3e437a03"]]), Sa = {
+}), Is = /* @__PURE__ */ _(_t, [["__scopeId", "data-v-3e437a03"]]), vt = {
   name: "Cross20",
   props: {
     /**
@@ -1033,31 +1343,24 @@ const pa = /* @__PURE__ */ v(ra, [["render", ua]]), ma = ["id", "name", "disable
       default: "currentColor"
     }
   }
-}, Oa = {
-  xmlns: "http://www.w3.org/2000/svg",
-  viewBox: "0 0 20 20"
-};
-function Ta(d, a, s, e, o, t) {
-  return l(), n("svg", Oa, a[0] || (a[0] = [
-    i("g", { "clip-path": "url(#a)" }, [
-      i("path", {
-        "fill-rule": "evenodd",
-        d: "M16.364 4.697a.75.75 0 1 0-1.061-1.06L10 8.938 4.697 3.636a.75.75 0 0 0-1.06 1.06L8.938 10l-5.303 5.303a.75.75 0 0 0 1.061 1.06L10 11.06l5.303 5.303a.75.75 0 0 0 1.06-1.06L11.062 10l5.303-5.303Z"
-      })
-    ], -1),
-    i("defs", null, [
-      i("clipPath", { id: "a" }, [
-        i("rect", {
-          width: "20",
-          height: "20",
-          fill: "#fff"
-        })
-      ])
-    ], -1)
-  ]));
+}, bt = ["fill"];
+function ft(d, e, a, t, o, s) {
+  return l(), n("svg", {
+    "aria-hidden": "true",
+    fill: a.color,
+    xmlns: "http://www.w3.org/2000/svg",
+    viewBox: "0 0 20 20",
+    width: "20",
+    height: "20"
+  }, e[0] || (e[0] = [
+    r("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, bt);
 }
-const ja = /* @__PURE__ */ v(Sa, [["render", Ta]]), qa = {
-  name: "InfoCircle32",
+const ht = /* @__PURE__ */ _(vt, [["render", ft]]), $t = {
+  name: "InfoCircleFilled32",
   props: {
     /**
      * Icon color
@@ -1067,20 +1370,24 @@ const ja = /* @__PURE__ */ v(Sa, [["render", Ta]]), qa = {
       default: "currentColor"
     }
   }
-}, Pa = {
-  xmlns: "http://www.w3.org/2000/svg",
-  viewBox: "0 0 32 32"
-};
-function Za(d, a, s, e, o, t) {
-  return l(), n("svg", Pa, a[0] || (a[0] = [
-    i("path", {
+}, yt = ["fill"];
+function gt(d, e, a, t, o, s) {
+  return l(), n("svg", {
+    "aria-hidden": "true",
+    fill: a.color,
+    xmlns: "http://www.w3.org/2000/svg",
+    viewBox: "0 0 32 32",
+    width: "32",
+    height: "32"
+  }, e[0] || (e[0] = [
+    r("path", {
       "fill-rule": "evenodd",
-      d: "M16 5C9.925 5 5 9.925 5 16s4.925 11 11 11 11-4.925 11-11S22.075 5 16 5ZM3 16C3 8.82 8.82 3 16 3s13 5.82 13 13-5.82 13-13 13S3 23.18 3 16Zm13-2.333a1 1 0 0 1 1 1v6.666a1 1 0 1 1-2 0v-6.666a1 1 0 0 1 1-1ZM16 12a1.333 1.333 0 1 0 0-2.667A1.333 1.333 0 0 0 16 12Z"
+      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, yt);
 }
-const Na = /* @__PURE__ */ v(qa, [["render", Za]]), Da = {
-  name: "WarningCircle32",
+const kt = /* @__PURE__ */ _($t, [["render", gt]]), wt = {
+  name: "WarningCircleFilled32",
   props: {
     /**
      * Icon color
@@ -1090,20 +1397,24 @@ const Na = /* @__PURE__ */ v(qa, [["render", Za]]), Da = {
       default: "currentColor"
     }
   }
-}, Ua = {
-  xmlns: "http://www.w3.org/2000/svg",
-  viewBox: "0 0 32 32"
-};
-function Fa(d, a, s, e, o, t) {
-  return l(), n("svg", Ua, a[0] || (a[0] = [
-    i("path", {
+}, Vt = ["fill"];
+function Bt(d, e, a, t, o, s) {
+  return l(), n("svg", {
+    "aria-hidden": "true",
+    fill: a.color,
+    xmlns: "http://www.w3.org/2000/svg",
+    viewBox: "0 0 32 32",
+    width: "32",
+    height: "32"
+  }, e[0] || (e[0] = [
+    r("path", {
       "fill-rule": "evenodd",
-      d: "M16 5C9.925 5 5 9.925 5 16s4.925 11 11 11 11-4.925 11-11S22.075 5 16 5ZM3 16C3 8.82 8.82 3 16 3s13 5.82 13 13-5.82 13-13 13S3 23.18 3 16Zm13-6.333a1 1 0 0 1 1 1v6.666a1 1 0 1 1-2 0v-6.666a1 1 0 0 1 1-1Zm0 13A1.333 1.333 0 1 0 16 20a1.333 1.333 0 0 0 0 2.667Z"
+      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, Vt);
 }
-const Ga = /* @__PURE__ */ v(Da, [["render", Fa]]), Ra = {
-  name: "CrossCircle32",
+const It = /* @__PURE__ */ _(wt, [["render", Bt]]), Ct = {
+  name: "CrossCircleFilled32",
   props: {
     /**
      * Icon color
@@ -1113,20 +1424,24 @@ const Ga = /* @__PURE__ */ v(Da, [["render", Fa]]), Ra = {
       default: "currentColor"
     }
   }
-}, Aa = {
-  xmlns: "http://www.w3.org/2000/svg",
-  viewBox: "0 0 32 32"
-};
-function Ha(d, a, s, e, o, t) {
-  return l(), n("svg", Aa, a[0] || (a[0] = [
-    i("path", {
+}, Mt = ["fill"];
+function zt(d, e, a, t, o, s) {
+  return l(), n("svg", {
+    "aria-hidden": "true",
+    fill: a.color,
+    xmlns: "http://www.w3.org/2000/svg",
+    viewBox: "0 0 32 32",
+    width: "32",
+    height: "32"
+  }, e[0] || (e[0] = [
+    r("path", {
       "fill-rule": "evenodd",
-      d: "M5 16C5 9.925 9.925 5 16 5s11 4.925 11 11-4.925 11-11 11S5 22.075 5 16ZM16 3C8.82 3 3 8.82 3 16s5.82 13 13 13 13-5.82 13-13S23.18 3 16 3Zm-3.293 8.293a1 1 0 0 0-1.414 1.414L14.586 16l-3.293 3.293a1 1 0 0 0 1.414 1.414L16 17.414l3.293 3.293a1 1 0 0 0 1.414-1.414L17.414 16l3.293-3.293a1 1 0 0 0-1.414-1.414L16 14.586l-3.293-3.293Z"
+      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, Mt);
 }
-const Ea = /* @__PURE__ */ v(Ra, [["render", Ha]]), Qa = {
-  name: "CheckCircle32",
+const Lt = /* @__PURE__ */ _(Ct, [["render", zt]]), Tt = {
+  name: "CheckCircleFilled32",
   props: {
     /**
      * Icon color
@@ -1136,22 +1451,26 @@ const Ea = /* @__PURE__ */ v(Ra, [["render", Ha]]), Qa = {
       default: "currentColor"
     }
   }
-}, Wa = {
-  xmlns: "http://www.w3.org/2000/svg",
-  viewBox: "0 0 32 32"
-};
-function Ja(d, a, s, e, o, t) {
-  return l(), n("svg", Wa, a[0] || (a[0] = [
-    i("path", {
+}, jt = ["fill"];
+function Ot(d, e, a, t, o, s) {
+  return l(), n("svg", {
+    "aria-hidden": "true",
+    fill: a.color,
+    xmlns: "http://www.w3.org/2000/svg",
+    viewBox: "0 0 32 32",
+    width: "32",
+    height: "32"
+  }, e[0] || (e[0] = [
+    r("path", {
       "fill-rule": "evenodd",
-      d: "M5 16C5 9.925 9.925 5 16 5s11 4.925 11 11-4.925 11-11 11S5 22.075 5 16ZM16 3C8.82 3 3 8.82 3 16s5.82 13 13 13 13-5.82 13-13S23.18 3 16 3Zm6.707 10.374a1 1 0 0 0-1.414-1.414l-6.626 6.626-3.293-3.293a1 1 0 0 0-1.414 1.414l4 4a1 1 0 0 0 1.414 0l7.333-7.333Z"
+      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, jt);
 }
-const Ka = /* @__PURE__ */ v(Qa, [["render", Ja]]), Xa = { class: "mc-status-notification__content" }, Ya = { class: "mc-status-notification__title" }, xa = { class: "mc-status-notification__message" }, et = {
+const St = /* @__PURE__ */ _(Tt, [["render", Ot]]), qt = { class: "mc-status-notification__content" }, Pt = { class: "mc-status-notification__title" }, Dt = { class: "mc-status-notification__message" }, Ft = {
   key: 0,
   class: "mc-status-notification__footer"
-}, at = /* @__PURE__ */ y({
+}, Nt = /* @__PURE__ */ y({
   __name: "MStatusNotification",
   props: {
     title: {},
@@ -1160,54 +1479,54 @@ const Ka = /* @__PURE__ */ v(Qa, [["render", Ja]]), Xa = { class: "mc-status-not
     closable: { type: Boolean }
   },
   emits: ["close"],
-  setup(d, { emit: a }) {
-    const s = d, e = b(() => ({
-      [`mc-status-notification--${s.status}`]: s.status && s.status != "info"
+  setup(d, { emit: e }) {
+    const a = d, t = b(() => ({
+      [`mc-status-notification--${a.status}`]: a.status && a.status != "info"
     })), o = b(() => {
-      switch (s.status) {
+      switch (a.status) {
         case "success":
-          return Ka;
+          return St;
         case "warning":
-          return Ga;
+          return It;
         case "error":
-          return Ea;
+          return Lt;
         case "info":
         default:
-          return Na;
+          return kt;
       }
-    }), t = a;
-    return (c, u) => (l(), n("section", {
-      class: $(["mc-status-notification", e.value]),
+    }), s = e;
+    return (i, u) => (l(), n("section", {
+      class: g(["mc-status-notification", t.value]),
       role: "status"
     }, [
-      (l(), C(j(o.value), {
+      (l(), I(N(o.value), {
         class: "mc-status-notification__icon",
         "aria-hidden": "true"
       })),
-      i("div", Xa, [
-        i("h2", Ya, f(c.title), 1),
-        i("p", xa, f(c.description), 1),
-        c.$slots.footer ? (l(), n("div", et, [
-          V(c.$slots, "footer", {}, void 0, !0)
+      r("div", qt, [
+        r("h2", Pt, f(i.title), 1),
+        r("p", Dt, f(i.description), 1),
+        i.$slots.footer ? (l(), n("div", Ft, [
+          V(i.$slots, "footer", {}, void 0, !0)
         ])) : h("", !0)
       ]),
-      c.closable ? (l(), n("button", {
+      i.closable ? (l(), n("button", {
         key: 0,
         class: "mc-status-notification-closable__close",
-        onClick: u[0] || (u[0] = (p) => t("close"))
+        onClick: u[0] || (u[0] = (p) => s("close"))
       }, [
-        g(ja, {
+        w(ht, {
           class: "mc-status-notification-closable__icon",
           "aria-hidden": "true"
         }),
-        u[1] || (u[1] = i("span", { class: "mc-status-notification-closable__text" }, "Close", -1))
+        u[1] || (u[1] = r("span", { class: "mc-status-notification-closable__text" }, "Close", -1))
       ])) : h("", !0)
     ], 2));
   }
-}), Ut = /* @__PURE__ */ v(at, [["__scopeId", "data-v-d6e3be16"]]), tt = ["aria-label"], st = ["aria-selected", "onClick"], lt = {
+}), Cs = /* @__PURE__ */ _(Nt, [["__scopeId", "data-v-457733a1"]]), At = ["aria-label"], Rt = ["aria-selected", "onClick"], Gt = {
   key: 0,
   class: "mc-tabs__icon"
-}, nt = { class: "mc-tabs__label" }, ot = /* @__PURE__ */ y({
+}, Ut = { class: "mc-tabs__label" }, Kt = /* @__PURE__ */ y({
   __name: "MTabs",
   props: {
     description: {},
@@ -1217,50 +1536,50 @@ const Ka = /* @__PURE__ */ v(Qa, [["render", Ja]]), Xa = { class: "mc-status-not
     tabs: {}
   },
   emits: ["update:modelValue"],
-  setup(d, { emit: a }) {
-    const s = d, e = b(() => ({
-      "mc-tabs--centered": s.centered
-    })), o = B(s.modelValue), t = (p) => {
-      s.tabs[p].disabled || p !== o.value && (o.value = p, u("update:modelValue", p));
-    }, c = (p) => o.value === p, u = a;
+  setup(d, { emit: e }) {
+    const a = d, t = b(() => ({
+      "mc-tabs--centered": a.centered
+    })), o = L(a.modelValue), s = (p) => {
+      a.tabs[p].disabled || p !== o.value && (o.value = p, u("update:modelValue", p));
+    }, i = (p) => o.value === p, u = e;
     return (p, m) => (l(), n("nav", {
-      class: $(["mc-tabs", e.value])
+      class: g(["mc-tabs", t.value])
     }, [
-      i("ul", {
+      r("ul", {
         role: "tablist",
         class: "mc-tabs__list",
         "aria-label": p.description
       }, [
-        (l(!0), n(z, null, L(p.tabs, (r, _) => (l(), n("li", {
-          key: `tab-${_}`,
+        (l(!0), n(O, null, S(p.tabs, (c, v) => (l(), n("li", {
+          key: `tab-${v}`,
           role: "presentation",
           class: "mc-tabs__item"
         }, [
-          i("button", {
+          r("button", {
             ref_for: !0,
             ref: "tab",
             role: "tab",
-            class: $(["mc-tabs__tab", {
-              "mc-tabs__tab--selected": c(_),
-              "mc-tabs__tab--disabled": r.disabled
+            class: g(["mc-tabs__tab", {
+              "mc-tabs__tab--selected": i(v),
+              "mc-tabs__tab--disabled": c.disabled
             }]),
-            "aria-selected": c(_),
+            "aria-selected": i(v),
             type: "button",
-            onClick: (I) => t(_)
+            onClick: (z) => s(v)
           }, [
-            r.icon ? (l(), n("span", lt, [
-              (l(), C(j(r.icon)))
+            c.icon ? (l(), n("span", Gt, [
+              (l(), I(N(c.icon)))
             ])) : h("", !0),
-            i("div", nt, [
-              i("span", null, f(r.label), 1)
+            r("div", Ut, [
+              r("span", null, f(c.label), 1)
             ])
-          ], 10, st)
+          ], 10, Rt)
         ]))), 128))
-      ], 8, tt),
-      p.divider ? (l(), C(be, { key: 0 })) : h("", !0)
+      ], 8, At),
+      p.divider ? (l(), I(Be, { key: 0 })) : h("", !0)
     ], 2));
   }
-}), Ft = /* @__PURE__ */ v(ot, [["__scopeId", "data-v-fcad128f"]]), it = ["for"], dt = ["id", "name", "checked", "disabled"], rt = { class: "mc-tag__label" }, ct = ["disabled"], ut = { class: "mc-tag__label" }, pt = ["disabled"], mt = { class: "mc-tag__label" }, _t = { class: "mc-tag__label" }, vt = { class: "mc-tag__label" }, bt = /* @__PURE__ */ y({
+}), Ms = /* @__PURE__ */ _(Kt, [["__scopeId", "data-v-3919f834"]]), Ht = ["for"], Et = ["id", "name", "checked", "disabled"], Qt = { class: "mc-tag__label" }, Wt = ["disabled"], Jt = { class: "mc-tag__label" }, Xt = ["disabled"], Yt = { class: "mc-tag__label" }, Zt = { class: "mc-tag__label" }, xt = { class: "mc-tag__label" }, es = /* @__PURE__ */ y({
   __name: "MTag",
   props: {
     type: { default: "informative" },
@@ -1274,69 +1593,69 @@ const Ka = /* @__PURE__ */ v(Qa, [["render", Ja]]), Xa = { class: "mc-status-not
     removableLabel: {}
   },
   emits: ["update:modelValue", "remove-tag"],
-  setup(d, { emit: a }) {
-    const s = d, e = b(() => ({
-      [`mc-tag-${s.type}`]: s.type && s.type != "informative",
-      [`mc-tag--${s.size}`]: s.size && s.size != "m"
-    })), o = a;
-    return (t, c) => t.type === "selectable" ? (l(), n("label", {
+  setup(d, { emit: e }) {
+    const a = d, t = b(() => ({
+      [`mc-tag-${a.type}`]: a.type && a.type != "informative",
+      [`mc-tag--${a.size}`]: a.size && a.size != "m"
+    })), o = e;
+    return (s, i) => s.type === "selectable" ? (l(), n("label", {
       key: 0,
-      for: t.id,
-      class: $(["mc-tag", e.value])
+      for: s.id,
+      class: g(["mc-tag", t.value])
     }, [
-      i("input", k({
+      r("input", B({
         type: "checkbox",
         class: "mc-tag__input",
-        id: t.id,
-        name: t.name,
-        checked: t.modelValue,
-        disabled: t.disabled,
-        onChange: c[0] || (c[0] = (u) => o("update:modelValue", u.target.checked))
-      }, t.$attrs), null, 16, dt),
-      i("span", rt, f(t.label), 1)
-    ], 10, it)) : t.type === "interactive" ? (l(), n("button", k({
+        id: s.id,
+        name: s.name,
+        checked: s.modelValue,
+        disabled: s.disabled,
+        onChange: i[0] || (i[0] = (u) => o("update:modelValue", u.target.checked))
+      }, s.$attrs), null, 16, Et),
+      r("span", Qt, f(s.label), 1)
+    ], 10, Ht)) : s.type === "interactive" ? (l(), n("button", B({
       key: 1,
-      class: ["mc-tag", e.value],
+      class: ["mc-tag", t.value],
       type: "button",
-      disabled: t.disabled
-    }, t.$attrs), [
-      i("span", ut, f(t.label), 1)
-    ], 16, ct)) : t.type === "contextualised" ? (l(), n("button", k({
+      disabled: s.disabled
+    }, s.$attrs), [
+      r("span", Jt, f(s.label), 1)
+    ], 16, Wt)) : s.type === "contextualised" ? (l(), n("button", B({
       key: 2,
-      class: ["mc-tag", e.value],
+      class: ["mc-tag", t.value],
       type: "button",
-      disabled: t.disabled
-    }, t.$attrs), [
-      g(je, {
+      disabled: s.disabled
+    }, s.$attrs), [
+      w(ha, {
         appearance: "inverse",
-        label: t.contextualisedNumber,
-        size: t.size === "l" ? "m" : void 0
+        label: s.contextualisedNumber,
+        size: s.size === "l" ? "m" : void 0
       }, null, 8, ["label", "size"]),
-      i("span", mt, f(t.label), 1)
-    ], 16, pt)) : t.type === "removable" ? (l(), n("span", k({
+      r("span", Yt, f(s.label), 1)
+    ], 16, Xt)) : s.type === "removable" ? (l(), n("span", B({
       key: 3,
-      class: ["mc-tag", e.value]
-    }, t.$attrs), [
-      i("span", _t, f(t.label), 1),
-      i("button", {
+      class: ["mc-tag", t.value]
+    }, s.$attrs), [
+      r("span", Zt, f(s.label), 1),
+      r("button", {
         class: "mc-tag-removable__remove",
         type: "button",
-        onClick: c[1] || (c[1] = (u) => t.id && o("remove-tag", t.id))
+        onClick: i[1] || (i[1] = (u) => s.id && o("remove-tag", s.id))
       }, [
-        g(q, {
+        w(R, {
           class: "mc-tag-removable__icon",
           "aria-hidden": "true"
         }),
-        c[2] || (c[2] = i("span", { class: "mc-tag-removable__text" }, "removableLabel", -1))
+        i[2] || (i[2] = r("span", { class: "mc-tag-removable__text" }, "removableLabel", -1))
       ])
-    ], 16)) : (l(), n("span", k({
+    ], 16)) : (l(), n("span", B({
       key: 4,
-      class: ["mc-tag", e.value]
-    }, t.$attrs), [
-      i("span", vt, f(t.label), 1)
+      class: ["mc-tag", t.value]
+    }, s.$attrs), [
+      r("span", xt, f(s.label), 1)
     ], 16));
   }
-}), Gt = /* @__PURE__ */ v(bt, [["__scopeId", "data-v-6a66ee2d"]]), ft = ["id", "aria-invalid", "value", "name", "placeholder", "disabled", "minlength", "maxlength", "rows", "readonly"], ht = /* @__PURE__ */ y({
+}), zs = /* @__PURE__ */ _(es, [["__scopeId", "data-v-a3166010"]]), as = ["id", "aria-invalid", "value", "name", "placeholder", "disabled", "minlength", "maxlength", "rows", "readonly"], ts = /* @__PURE__ */ y({
   __name: "MTextArea",
   props: {
     id: {},
@@ -1351,33 +1670,33 @@ const Ka = /* @__PURE__ */ v(Qa, [["render", Ja]]), Xa = { class: "mc-status-not
     readonly: { type: Boolean }
   },
   emits: ["update:modelValue"],
-  setup(d, { emit: a }) {
-    const s = d, e = b(() => ({
-      "is-invalid": s.isInvalid
-    })), o = a;
-    return (t, c) => (l(), n("textarea", k({
-      id: t.id,
-      class: ["mc-textarea", e.value],
-      "aria-invalid": t.isInvalid,
-      value: t.modelValue,
-      name: t.name,
-      placeholder: t.placeholder,
-      disabled: t.disabled,
-      minlength: t.minLength,
-      maxlength: t.maxLength,
-      rows: t.rows,
-      readonly: t.readonly
-    }, t.$attrs, {
-      onInput: c[0] || (c[0] = (u) => o("update:modelValue", u.target.value))
-    }), null, 16, ft));
+  setup(d, { emit: e }) {
+    const a = d, t = b(() => ({
+      "is-invalid": a.isInvalid
+    })), o = e;
+    return (s, i) => (l(), n("textarea", B({
+      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: i[0] || (i[0] = (u) => o("update:modelValue", u.target.value))
+    }), null, 16, as));
   }
-}), Rt = /* @__PURE__ */ v(ht, [["__scopeId", "data-v-8184b69c"]]), $t = {
+}), Ls = /* @__PURE__ */ _(ts, [["__scopeId", "data-v-8184b69c"]]), ss = {
   key: 0,
   class: "mc-text-input__icon"
-}, yt = ["id", "value", "type", "name", "placeholder", "disabled", "aria-invalid", "readonly"], gt = {
+}, ls = ["id", "value", "type", "name", "placeholder", "disabled", "aria-invalid", "readonly"], os = {
   key: 1,
   class: "mc-controls-options"
-}, kt = /* @__PURE__ */ y({
+}, ns = /* @__PURE__ */ y({
   __name: "MTextInput",
   props: {
     id: {},
@@ -1393,20 +1712,20 @@ const Ka = /* @__PURE__ */ v(Qa, [["render", Ja]]), Xa = { class: "mc-status-not
     clearLabel: { default: "clear content" }
   },
   emits: ["update:modelValue"],
-  setup(d, { emit: a }) {
-    const s = d, e = b(() => ({
-      [`mc-text-input--${s.size}`]: s.size && s.size != "m",
-      "is-invalid": s.isInvalid
-    })), o = B(s.modelValue), t = () => {
-      o.value = "", c("update:modelValue", "");
-    }, c = a;
+  setup(d, { emit: e }) {
+    const a = d, t = b(() => ({
+      [`mc-text-input--${a.size}`]: a.size && a.size != "m",
+      "is-invalid": a.isInvalid
+    })), o = L(a.modelValue), s = () => {
+      o.value = "", i("update:modelValue", "");
+    }, i = e;
     return (u, p) => (l(), n("div", {
-      class: $(["mc-text-input", e.value])
+      class: g(["mc-text-input", t.value])
     }, [
-      u.$slots.icon ? (l(), n("span", $t, [
+      u.$slots.icon ? (l(), n("span", ss, [
         V(u.$slots, "icon", {}, void 0, !0)
       ])) : h("", !0),
-      i("input", k({
+      r("input", B({
         id: u.id,
         class: "mc-text-input__control",
         value: o.value,
@@ -1417,24 +1736,24 @@ const Ka = /* @__PURE__ */ v(Qa, [["render", Ja]]), Xa = { class: "mc-status-not
         "aria-invalid": u.isInvalid,
         readonly: u.readonly
       }, u.$attrs, {
-        onInput: p[0] || (p[0] = (m) => c("update:modelValue", m.target.value))
-      }), null, 16, yt),
-      u.isClearable && o.value ? (l(), n("div", gt, [
-        i("button", {
+        onInput: p[0] || (p[0] = (m) => i("update:modelValue", m.target.value))
+      }), null, 16, ls),
+      u.isClearable && o.value ? (l(), n("div", os, [
+        r("button", {
           type: "button",
           class: "mc-controls-options__button",
-          onClick: t
+          onClick: s
         }, [
-          g(q, {
+          w(R, {
             class: "mc-controls-options__icon",
             "aria-hidden": "true"
           }),
-          p[1] || (p[1] = i("span", { class: "mc-controls-options__label" }, "{clearLabel}", -1))
+          p[1] || (p[1] = r("span", { class: "mc-controls-options__label" }, "{clearLabel}", -1))
         ])
       ])) : h("", !0)
     ], 2));
   }
-}), At = /* @__PURE__ */ v(kt, [["__scopeId", "data-v-38f67338"]]), Vt = ["for"], Ct = ["id", "name", "checked", "disabled"], wt = ["for"], It = /* @__PURE__ */ y({
+}), Ts = /* @__PURE__ */ _(ns, [["__scopeId", "data-v-38f67338"]]), is = ["for"], ds = ["id", "name", "checked", "disabled"], rs = ["for"], cs = /* @__PURE__ */ y({
   __name: "MToggle",
   props: {
     id: {},
@@ -1445,36 +1764,36 @@ const Ka = /* @__PURE__ */ v(Qa, [["render", Ja]]), Xa = { class: "mc-status-not
     disabled: { type: Boolean }
   },
   emits: ["update:modelValue"],
-  setup(d, { emit: a }) {
-    const s = d, e = b(() => ({
-      [`mc-toggle--${s.size}`]: s.size && s.size != "s"
-    })), o = a;
-    return (t, c) => (l(), n("div", {
-      class: $(["mc-toggle", e.value])
+  setup(d, { emit: e }) {
+    const a = d, t = b(() => ({
+      [`mc-toggle--${a.size}`]: a.size && a.size != "s"
+    })), o = e;
+    return (s, i) => (l(), n("div", {
+      class: g(["mc-toggle", t.value])
     }, [
-      i("label", {
+      r("label", {
         class: "mc-toggle__container",
-        for: t.id
+        for: s.id
       }, [
-        i("input", k({
-          id: t.id,
+        r("input", B({
+          id: s.id,
           type: "checkbox",
           class: "mc-toggle__input",
-          name: t.name,
-          checked: t.modelValue,
-          disabled: t.disabled
-        }, t.$attrs, {
-          onChange: c[0] || (c[0] = (u) => o("update:modelValue", u.target.checked))
-        }), null, 16, Ct),
-        t.label ? (l(), n("span", {
+          name: s.name,
+          checked: s.modelValue,
+          disabled: s.disabled
+        }, s.$attrs, {
+          onChange: i[0] || (i[0] = (u) => o("update:modelValue", u.target.checked))
+        }), null, 16, ds),
+        s.label ? (l(), n("span", {
           key: 0,
-          for: t.id,
+          for: s.id,
           class: "mc-toggle__label"
-        }, f(t.label), 9, wt)) : h("", !0)
-      ], 8, Vt)
+        }, f(s.label), 9, rs)) : h("", !0)
+      ], 8, is)
     ], 2));
   }
-}), Bt = /* @__PURE__ */ v(It, [["__scopeId", "data-v-5be734e7"]]), Mt = /* @__PURE__ */ y({
+}), us = /* @__PURE__ */ _(cs, [["__scopeId", "data-v-5be734e7"]]), ps = /* @__PURE__ */ y({
   __name: "MToggleGroup",
   props: {
     name: {},
@@ -1483,66 +1802,70 @@ const Ka = /* @__PURE__ */ v(Qa, [["render", Ja]]), Xa = { class: "mc-status-not
     inline: { type: Boolean }
   },
   emits: ["update:modelValue"],
-  setup(d, { emit: a }) {
-    const s = d, e = B([]);
-    O(
-      () => s.modelValue,
+  setup(d, { emit: e }) {
+    const a = d, t = L([]);
+    q(
+      () => a.modelValue,
       (p) => {
-        e.value = p || [];
+        t.value = p || [];
       },
       { immediate: !0 }
     );
     const o = (p, m) => {
-      let r = [...e.value];
-      p && !r.includes(m) ? r.push(m) : r = r.filter((_) => _ !== m), u("update:modelValue", r), e.value = r;
-    }, t = b(() => ({
-      "mc-field__container--inline": s.inline
-    })), c = b(() => ({
-      "mc-field__container--inline__item": s.inline
-    })), u = a;
+      let c = [...t.value];
+      p && !c.includes(m) ? c.push(m) : c = c.filter((v) => v !== m), u("update:modelValue", c), t.value = c;
+    }, s = b(() => ({
+      "mc-field__container--inline": a.inline
+    })), i = b(() => ({
+      "mc-field__container--inline__item": a.inline
+    })), u = e;
     return (p, m) => (l(), n("div", {
-      class: $(t.value)
+      class: g(s.value)
     }, [
-      (l(!0), n(z, null, L(p.options, (r) => (l(), C(Bt, {
-        id: r.id,
-        key: r.id,
-        label: r.label,
-        "is-invalid": r.isInvalid,
+      (l(!0), n(O, null, S(p.options, (c) => (l(), I(us, {
+        id: c.id,
+        key: c.id,
+        label: c.label,
+        "is-invalid": c.isInvalid,
         name: p.name,
-        class: $(c.value),
-        "model-value": p.modelValue ? p.modelValue.includes(r.value) : void 0,
-        disabled: r.disabled,
-        "onUpdate:modelValue": (_) => o(_, r.value)
+        class: g(i.value),
+        "model-value": p.modelValue ? p.modelValue.includes(c.value) : void 0,
+        disabled: c.disabled,
+        "onUpdate:modelValue": (v) => o(v, c.value)
       }, null, 8, ["id", "label", "is-invalid", "name", "class", "model-value", "disabled", "onUpdate:modelValue"]))), 128))
     ], 2));
   }
-}), Ht = /* @__PURE__ */ v(Mt, [["__scopeId", "data-v-c6b10172"]]);
+}), js = /* @__PURE__ */ _(ps, [["__scopeId", "data-v-c6b10172"]]);
 export {
-  Lt as MBreadcrumb,
-  T as MButton,
-  pe as MCheckbox,
-  St as MCheckboxGroup,
-  be as MDivider,
-  Ot as MField,
-  Tt as MFieldGroup,
+  _s as MBreadcrumb,
+  F as MButton,
+  ge as MCheckbox,
+  vs as MCheckboxGroup,
+  Be as MDivider,
+  bs as MDrawer,
+  fs as MField,
+  hs as MFieldGroup,
   P as MIconButton,
-  Q as MLink,
-  ae as MLoader,
-  je as MNumberBadge,
-  jt as MOverlay,
-  qt as MPagination,
-  Pt as MPasswordInput,
-  Zt as MQuantitySelector,
-  wa as MRadio,
-  Nt as MRadioGroup,
-  Fe as MSelect,
-  Dt as MStatusBadge,
-  Ut as MStatusNotification,
-  Ft as MTabs,
-  Gt as MTag,
-  Rt as MTextArea,
-  At as MTextInput,
-  Bt as MToggle,
-  Ht as MToggleGroup
+  se as MLink,
+  H as MLoader,
+  $s as MLoadingOverlay,
+  ys as MModal,
+  ha as MNumberBadge,
+  Q as MOverlay,
+  gs as MPagination,
+  ks as MPasswordInput,
+  ws as MPincode,
+  Vs as MQuantitySelector,
+  rt as MRadio,
+  Bs as MRadioGroup,
+  wa as MSelect,
+  Is as MStatusBadge,
+  Cs as MStatusNotification,
+  Ms as MTabs,
+  zs as MTag,
+  Ls as MTextArea,
+  Ts as MTextInput,
+  us as MToggle,
+  js as MToggleGroup
 };
 //# sourceMappingURL=mozaic-vue.js.map