@mozaic-ds/vue 1.0.0-rc.2 → 2.1.0

package/dist/mozaic-vue.js

@@ -0,0 +1,1943 @@
+import { defineComponent as $, computed as b, createBlock as B, openBlock as l, resolveDynamicComponent as A, normalizeClass as g, withCtx as C, createElementBlock as n, createCommentVNode as h, createElementVNode as r, renderSlot as V, Fragment as O, renderList as S, createVNode as w, createTextVNode as P, toDisplayString as f, normalizeStyle as J, mergeProps as I, ref as z, watch as q, withKeys as R, withDirectives as H, vModelDynamic as X, nextTick as Y, vModelText as Z } from "vue";
+const x = {
+  key: 0,
+  class: "mc-link__icon",
+  "aria-hidden": "true"
+}, ee = { class: "mc-link__label" }, ae = {
+  key: 1,
+  class: "mc-link__icon",
+  "aria-hidden": "true"
+}, te = /* @__PURE__ */ $({
+  __name: "MLink",
+  props: {
+    iconPosition: { default: "left" },
+    appearance: { default: "standard" },
+    size: { default: "s" },
+    href: { default: void 0 },
+    target: { default: void 0 },
+    inline: { type: Boolean },
+    router: { type: Boolean }
+  },
+  setup(d) {
+    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 (t, o) => (l(), B(A(t.router ? "router-link" : "a"), {
+      class: g(["mc-link", a.value]),
+      href: t.href,
+      target: t.target,
+      to: t.router ? t.href : void 0
+    }, {
+      default: C(() => [
+        t.$slots.icon && t.iconPosition == "left" ? (l(), n("span", x, [
+          V(t.$slots, "icon", {}, void 0, !0)
+        ])) : h("", !0),
+        r("span", ee, [
+          V(t.$slots, "default", {}, void 0, !0)
+        ]),
+        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"]));
+  }
+}), _ = (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__ */ $({
+  __name: "MBreadcrumb",
+  props: {
+    appearance: {},
+    links: {}
+  },
+  setup(d) {
+    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, s) => (l(), n("nav", {
+      class: g(["mc-breadcrumb", a.value]),
+      "aria-label": "Breadcrumb"
+    }, [
+      r("ul", le, [
+        (l(!0), n(O, null, S(o.links, (i, c) => (l(), n("li", {
+          class: "mc-breadcrumb__item",
+          key: `breadcrumb-${c}`
+        }, [
+          w(se, {
+            href: i.href,
+            router: i.router,
+            appearance: o.appearance,
+            inline: "",
+            class: g({
+              "mc-breadcrumb__current": t(c)
+            }),
+            "aria-current": t(c) ? "page" : void 0
+          }, {
+            default: C(() => [
+              P(f(i.label), 1)
+            ]),
+            _: 2
+          }, 1032, ["href", "router", "appearance", "class", "aria-current"])
+        ]))), 128))
+      ])
+    ], 2));
+  }
+}), ys = /* @__PURE__ */ _(oe, [["__scopeId", "data-v-41249412"]]), ne = { class: "mc-loader__spinner" }, ie = ["viewBox"], de = ["r"], re = {
+  key: 0,
+  class: "mc-loader__text",
+  role: "status"
+}, ce = /* @__PURE__ */ $({
+  __name: "MLoader",
+  props: {
+    appearance: { default: "standard" },
+    size: { default: "m" },
+    text: {}
+  },
+  setup(d) {
+    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":
+          s = "0 0 24 24";
+          break;
+        case "l":
+          s = "0 0 64 64";
+          break;
+        default:
+          s = "0 0 32 32";
+      }
+      return s;
+    }), o = b(() => {
+      let s;
+      switch (e.size) {
+        case "s":
+          s = 6;
+          break;
+        case "l":
+          s = 19;
+          break;
+        default:
+          s = 9;
+      }
+      return s;
+    });
+    return (s, i) => (l(), n("div", {
+      class: g(["mc-loader", a.value])
+    }, [
+      r("span", ne, [
+        (l(), n("svg", {
+          class: "mc-loader__icon",
+          xmlns: "http://www.w3.org/2000/svg",
+          viewBox: t.value,
+          "aria-hidden": "true"
+        }, [
+          r("circle", {
+            class: "mc-loader__path",
+            cx: "50%",
+            cy: "50%",
+            r: o.value
+          }, null, 8, de)
+        ], 8, ie))
+      ]),
+      s.text ? (l(), n("p", re, f(s.text), 1)) : h("", !0)
+    ], 2));
+  }
+}), K = /* @__PURE__ */ _(ce, [["__scopeId", "data-v-998c550b"]]), ue = ["disabled", "type"], pe = {
+  key: 0,
+  class: "mc-button__icon"
+}, me = {
+  key: 1,
+  class: "mc-button__icon",
+  style: { position: "absolute" }
+}, _e = {
+  key: 2,
+  class: "mc-button__icon"
+}, ve = {
+  key: 4,
+  class: "mc-button__icon"
+}, be = /* @__PURE__ */ $({
+  __name: "MButton",
+  props: {
+    appearance: { default: "standard" },
+    size: { default: "m" },
+    disabled: { type: Boolean },
+    ghost: { type: Boolean },
+    outlined: { type: Boolean },
+    iconPosition: {},
+    type: { default: "button" },
+    isLoading: { type: Boolean }
+  },
+  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,
+      "mc-button--icon-only": e.iconPosition == "only"
+    }));
+    return (t, o) => (l(), n("button", {
+      class: g(["mc-button", a.value]),
+      disabled: t.disabled,
+      type: t.type
+    }, [
+      t.$slots.icon && t.iconPosition == "left" && !t.isLoading ? (l(), n("span", pe, [
+        V(t.$slots, "icon", {}, void 0, !0)
+      ])) : h("", !0),
+      t.isLoading ? (l(), n("span", me, [
+        w(K, {
+          style: { color: "currentColor" },
+          size: "s"
+        })
+      ])) : h("", !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: J({ visibility: t.isLoading ? "hidden" : "visible" })
+      }, [
+        V(t.$slots, "default", {}, () => [
+          o[0] || (o[0] = P("Button Label"))
+        ], !0)
+      ], 4)),
+      t.$slots.icon && t.iconPosition == "right" && !t.isLoading ? (l(), n("span", ve, [
+        V(t.$slots, "icon", {}, void 0, !0)
+      ])) : h("", !0)
+    ], 10, ue));
+  }
+}), N = /* @__PURE__ */ _(be, [["__scopeId", "data-v-f4f43ab6"]]), fe = { class: "mc-checkbox" }, he = ["id", "name", "checked", "indeterminate", "disabled", "aria-invalid"], $e = ["for"], ye = /* @__PURE__ */ $({
+  __name: "MCheckbox",
+  props: {
+    id: {},
+    name: {},
+    label: {},
+    modelValue: { type: Boolean },
+    indeterminate: { type: Boolean },
+    isInvalid: { type: Boolean },
+    disabled: { type: Boolean }
+  },
+  emits: ["update:modelValue"],
+  setup(d, { emit: e }) {
+    const a = d, t = b(() => ({
+      "is-invalid": a.isInvalid
+    })), o = e;
+    return (s, i) => (l(), n("div", fe, [
+      r("input", I({
+        id: s.id,
+        type: "checkbox",
+        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] = (c) => o("update:modelValue", c.target.checked))
+      }), null, 16, he),
+      s.label ? (l(), n("label", {
+        key: 0,
+        for: s.id,
+        class: "mc-checkbox__label"
+      }, f(s.label), 9, $e)) : h("", !0)
+    ]));
+  }
+}), ge = /* @__PURE__ */ _(ye, [["__scopeId", "data-v-37fd0a35"]]), ke = /* @__PURE__ */ $({
+  __name: "MCheckboxGroup",
+  props: {
+    name: {},
+    modelValue: {},
+    options: {},
+    inline: { type: Boolean }
+  },
+  emits: ["update:modelValue"],
+  setup(d, { emit: e }) {
+    const a = d, t = z([]);
+    q(
+      () => a.modelValue,
+      (p) => {
+        t.value = p || [];
+      },
+      { immediate: !0 }
+    );
+    const o = (p, m) => {
+      let u = [...t.value];
+      p && !u.includes(m) ? u.push(m) : u = u.filter((v) => v !== m), c("update:modelValue", u), t.value = u;
+    }, s = b(() => ({
+      "mc-field__container--inline": a.inline
+    })), i = b(() => ({
+      "mc-field__container--inline__item": a.inline
+    })), c = e;
+    return (p, m) => (l(), n("div", {
+      class: g(["mc-field__container", s.value])
+    }, [
+      (l(!0), n(O, null, S(p.options, (u) => (l(), B(ge, {
+        id: u.id,
+        key: u.id,
+        label: u.label,
+        "is-invalid": u.isInvalid,
+        name: p.name,
+        class: g(["mc-field__item", i.value]),
+        "model-value": p.modelValue ? p.modelValue.includes(u.value) : void 0,
+        disabled: u.disabled,
+        "onUpdate:modelValue": (v) => o(v, u.value)
+      }, null, 8, ["id", "label", "is-invalid", "name", "class", "model-value", "disabled", "onUpdate:modelValue"]))), 128))
+    ], 2));
+  }
+}), gs = /* @__PURE__ */ _(ke, [["__scopeId", "data-v-8ee4699f"]]), we = {
+  name: "CrossCircleFilled24",
+  props: {
+    /**
+     * Icon color
+     */
+    color: {
+      type: String,
+      default: "currentColor"
+    }
+  }
+}, Ve = ["fill"];
+function Ie(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 2M8.293 8.293a1 1 0 0 1 1.414 0L12 10.586l2.293-2.293a1 1 0 1 1 1.414 1.414L13.414 12l2.293 2.293a1 1 0 0 1-1.414 1.414L12 13.414l-2.293 2.293a1 1 0 0 1-1.414-1.414L10.586 12 8.293 9.707a1 1 0 0 1 0-1.414"
+    }, null, -1)
+  ]), 8, Ve);
+}
+const F = /* @__PURE__ */ _(we, [["render", Ie]]), Be = ["id", "value", "name", "disabled", "aria-invalid", "readonly"], Ce = {
+  key: 0,
+  class: "mc-datepicker__controls-options mc-controls-options"
+}, Me = { class: "mc-controls-options__label" }, ze = /* @__PURE__ */ $({
+  __name: "MDatepicker",
+  props: {
+    id: {},
+    name: {},
+    modelValue: {},
+    isInvalid: { type: Boolean },
+    disabled: { type: Boolean },
+    size: { default: "m" },
+    readonly: { type: Boolean },
+    isClearable: { type: Boolean },
+    clearLabel: { default: "clear content" }
+  },
+  emits: ["update:modelValue"],
+  setup(d, { emit: e }) {
+    const a = d, t = b(() => ({
+      [`mc-text-input--${a.size} mc-datepicker--${a.size}`]: a.size && a.size != "m",
+      "is-invalid": a.isInvalid
+    })), o = z(a.modelValue), s = () => {
+      o.value = "", i("update:modelValue", "");
+    }, i = e;
+    return (c, p) => (l(), n("div", {
+      class: g(["mc-datepicker mc-text-input", t.value])
+    }, [
+      r("input", I({
+        id: c.id,
+        class: "mc-datepicker__control mc-text-input__control",
+        value: o.value,
+        type: "date",
+        name: c.name,
+        disabled: c.disabled,
+        "aria-invalid": c.isInvalid,
+        readonly: c.readonly
+      }, c.$attrs, {
+        onInput: p[0] || (p[0] = (m) => i("update:modelValue", m.target.value))
+      }), null, 16, Be),
+      c.isClearable && o.value ? (l(), n("div", Ce, [
+        r("button", {
+          type: "button",
+          class: "mc-controls-options__button",
+          onClick: s
+        }, [
+          w(F, {
+            class: "mc-controls-options__icon",
+            "aria-hidden": "true"
+          }),
+          r("span", Me, f(c.clearLabel), 1)
+        ])
+      ])) : h("", !0)
+    ], 2));
+  }
+}), ks = /* @__PURE__ */ _(ze, [["__scopeId", "data-v-0c5cddc2"]]), Le = { class: "mc-divider" }, Te = /* @__PURE__ */ $({
+  __name: "MDivider",
+  props: {
+    orientation: { default: "horizontal" },
+    style: { default: "primary" },
+    size: { default: "s" }
+  },
+  setup(d) {
+    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 (t, o) => (l(), n("div", Le, [
+      r("div", {
+        class: g(a.value)
+      }, null, 2),
+      V(t.$slots, "default", {}, void 0, !0)
+    ]));
+  }
+}), je = /* @__PURE__ */ _(Te, [["__scopeId", "data-v-f8e160af"]]), Oe = {
+  name: "ArrowBack24",
+  props: {
+    /**
+     * Icon color
+     */
+    color: {
+      type: String,
+      default: "currentColor"
+    }
+  }
+}, Se = ["fill"];
+function qe(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, Se);
+}
+const De = /* @__PURE__ */ _(Oe, [["render", qe]]), Pe = {
+  name: "Cross24",
+  props: {
+    /**
+     * Icon color
+     */
+    color: {
+      type: String,
+      default: "currentColor"
+    }
+  }
+}, Fe = ["fill"];
+function Ne(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, Fe);
+}
+const E = /* @__PURE__ */ _(Pe, [["render", Ne]]), Ae = ["disabled", "type"], Re = { class: "mc-button__icon" }, Ge = /* @__PURE__ */ $({
+  __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", Re, [
+        V(t.$slots, "icon", {}, void 0, !0)
+      ])
+    ], 10, Ae));
+  }
+}), D = /* @__PURE__ */ _(Ge, [["__scopeId", "data-v-abf78562"]]), Ue = ["aria-labelledby"], He = /* @__PURE__ */ $({
+  __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, Ue)
+    ], 2));
+  }
+}), Q = /* @__PURE__ */ _(He, [["__scopeId", "data-v-db90fdb3"]]), Ke = ["aria-modal", "aria-hidden"], Ee = {
+  class: "mc-drawer__dialog",
+  role: "document"
+}, Qe = { class: "mc-drawer__header" }, We = {
+  class: "mc-drawer__title",
+  id: "drawerTitle"
+}, Je = { class: "mc-drawer__body" }, Xe = {
+  class: "mc-drawer__content",
+  tabindex: "0"
+}, Ye = {
+  key: 0,
+  class: "mc-drawer__content__title"
+}, Ze = {
+  key: 0,
+  class: "mc-drawer__footer"
+}, xe = /* @__PURE__ */ $({
+  __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, c) => (l(), B(Q, {
+      "is-visible": i.open,
+      dialogLabel: "drawerTitle"
+    }, {
+      default: C(() => [
+        r("section", I({
+          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: R(o, ["esc"])
+        }), [
+          r("div", Ee, [
+            r("div", Qe, [
+              i.back ? (l(), B(D, {
+                key: 0,
+                class: "mc-drawer__back",
+                "aria-label": "Back",
+                ghost: "",
+                onClick: c[0] || (c[0] = (p) => s("back"))
+              }, {
+                icon: C(() => [
+                  w(De, { "aria-hidden": "true" })
+                ]),
+                _: 1
+              })) : h("", !0),
+              r("h2", We, f(i.title), 1),
+              w(D, {
+                class: "mc-drawer__close",
+                "aria-label": "Close",
+                ghost: "",
+                onClick: o
+              }, {
+                icon: C(() => [
+                  w(E, { "aria-hidden": "true" })
+                ]),
+                _: 1
+              })
+            ]),
+            r("div", Je, [
+              r("div", Xe, [
+                i.contentTitle ? (l(), n("h2", Ye, f(i.contentTitle), 1)) : h("", !0),
+                V(i.$slots, "default", {}, void 0, !0)
+              ])
+            ]),
+            i.$slots.footer ? (l(), n("div", Ze, [
+              V(i.$slots, "footer", {}, void 0, !0)
+            ])) : h("", !0)
+          ])
+        ], 16, Ke)
+      ]),
+      _: 3
+    }, 8, ["is-visible"]));
+  }
+}), ws = /* @__PURE__ */ _(xe, [["__scopeId", "data-v-673a796c"]]), ea = { class: "mc-field" }, aa = ["for"], ta = {
+  key: 0,
+  class: "mc-field__requirement"
+}, sa = ["id"], la = { class: "mc-field__content" }, oa = ["id"], na = /* @__PURE__ */ $({
+  __name: "MField",
+  props: {
+    id: {},
+    label: {},
+    requirementText: {},
+    helpText: {},
+    helpId: {},
+    isValid: { type: Boolean },
+    isInvalid: { type: Boolean },
+    messageId: {},
+    message: {}
+  },
+  setup(d) {
+    const e = d, a = b(() => ({
+      "is-valid": e.isValid,
+      "is-invalid": e.isInvalid
+    }));
+    return (t, o) => (l(), n("div", ea, [
+      r("label", {
+        class: "mc-field__label",
+        for: t.id
+      }, [
+        P(f(t.label) + " ", 1),
+        t.requirementText ? (l(), n("span", ta, "(" + f(t.requirementText) + ")", 1)) : h("", !0)
+      ], 8, aa),
+      t.helpId && t.helpText ? (l(), n("span", {
+        key: 0,
+        id: t.helpId,
+        class: "mc-field__help"
+      }, f(t.helpText), 9, sa)) : h("", !0),
+      r("div", la, [
+        V(t.$slots, "default", {}, void 0, !0)
+      ]),
+      (t.isValid || t.isInvalid) && t.message ? (l(), n("span", {
+        key: 1,
+        class: g(["mc-field__validation-message", a.value]),
+        id: t.messageId
+      }, f(t.message), 11, oa)) : h("", !0)
+    ]));
+  }
+}), Vs = /* @__PURE__ */ _(na, [["__scopeId", "data-v-ead078c4"]]), ia = { class: "mc-field--group" }, da = ["for"], ra = {
+  key: 0,
+  class: "mc-field__requirement"
+}, ca = {
+  key: 0,
+  class: "mc-field__help"
+}, ua = { class: "mc-field__content" }, pa = /* @__PURE__ */ $({
+  __name: "MFieldGroup",
+  props: {
+    id: {},
+    legend: {},
+    requirementText: {},
+    helpText: {},
+    isValid: { type: Boolean },
+    isInvalid: { type: Boolean },
+    message: {}
+  },
+  setup(d) {
+    const e = d, a = b(() => ({
+      "is-valid": e.isValid,
+      "is-invalid": e.isInvalid
+    }));
+    return (t, o) => (l(), n("fieldset", ia, [
+      r("legend", {
+        class: "mc-field__legend",
+        for: t.id
+      }, [
+        P(f(t.legend) + " ", 1),
+        t.requirementText ? (l(), n("span", ra, "(" + f(t.requirementText) + ")", 1)) : h("", !0)
+      ], 8, da),
+      t.helpText ? (l(), n("span", ca, f(t.helpText), 1)) : h("", !0),
+      r("div", ua, [
+        V(t.$slots, "default", {}, void 0, !0)
+      ]),
+      (t.isValid || t.isInvalid) && t.message ? (l(), n("span", {
+        key: 1,
+        class: g(["mc-field__validation-message", a.value])
+      }, f(t.message), 3)) : h("", !0)
+    ]));
+  }
+}), Is = /* @__PURE__ */ _(pa, [["__scopeId", "data-v-fc0c08dc"]]), ma = { class: "mc-flag__label" }, _a = /* @__PURE__ */ $({
+  __name: "MFlag",
+  props: {
+    label: {},
+    appearance: {}
+  },
+  setup(d) {
+    const e = d, a = b(() => ({
+      [`mc-flag--${e.appearance}`]: e.appearance && e.appearance != "standard"
+    }));
+    return (t, o) => (l(), n("div", {
+      class: g(["mc-flag", a.value])
+    }, [
+      r("span", ma, f(t.label), 1)
+    ], 2));
+  }
+}), Bs = /* @__PURE__ */ _(_a, [["__scopeId", "data-v-9245f79e"]]), va = ["aria-label"], ba = /* @__PURE__ */ $({
+  __name: "MLoadingOverlay",
+  props: {
+    isVisible: { type: Boolean },
+    text: {}
+  },
+  setup(d) {
+    return (e, a) => (l(), n("div", {
+      class: g(["mc-loading-loader", { "is-visible": e.isVisible }])
+    }, [
+      r("div", I({
+        role: "dialog",
+        tabindex: "-1",
+        "aria-label": e.text
+      }, e.$attrs), [
+        w(K, {
+          size: "l",
+          appearance: "inverse",
+          text: e.text
+        }, null, 8, ["text"])
+      ], 16, va)
+    ], 2));
+  }
+}), Cs = /* @__PURE__ */ _(ba, [["__scopeId", "data-v-eae6b1f2"]]), fa = ["aria-modal", "aria-hidden"], ha = {
+  class: "mc-modal__dialog",
+  role: "document"
+}, $a = { class: "mc-modal__header" }, ya = {
+  key: 0,
+  class: "mc-modal__icon"
+}, ga = {
+  class: "mc-modal__title",
+  id: "modalTitle"
+}, ka = { class: "mc-modal__body" }, wa = {
+  key: 0,
+  class: "mc-modal__footer"
+}, Va = { class: "mc-modal__link" }, Ia = /* @__PURE__ */ $({
+  __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, c) => (l(), B(Q, {
+      "is-visible": i.open,
+      dialogLabel: "modalTitle"
+    }, {
+      default: C(() => [
+        r("section", I({
+          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: R(o, ["esc"])
+        }), [
+          r("div", ha, [
+            r("header", $a, [
+              i.$slots.icon ? (l(), n("span", ya, [
+                V(i.$slots, "icon", {}, void 0, !0)
+              ])) : h("", !0),
+              r("h2", ga, f(i.title), 1),
+              i.closable ? (l(), B(D, {
+                key: 1,
+                class: "mc-modal__close",
+                "aria-label": "Close",
+                ghost: "",
+                onClick: o
+              }, {
+                icon: C(() => [
+                  w(E, { "aria-hidden": "true" })
+                ]),
+                _: 1
+              })) : h("", !0)
+            ]),
+            r("main", ka, [
+              r("p", null, f(i.description), 1),
+              V(i.$slots, "default", {}, void 0, !0)
+            ]),
+            i.$slots.footer ? (l(), n("footer", wa, [
+              r("span", Va, [
+                V(i.$slots, "link", {}, void 0, !0)
+              ]),
+              V(i.$slots, "footer", {}, void 0, !0)
+            ])) : h("", !0)
+          ])
+        ], 16, fa)
+      ]),
+      _: 3
+    }, 8, ["is-visible"]));
+  }
+}), Ms = /* @__PURE__ */ _(Ia, [["__scopeId", "data-v-20ce36b2"]]), Ba = /* @__PURE__ */ $({
+  __name: "MNumberBadge",
+  props: {
+    label: {},
+    appearance: { default: "standard" },
+    size: { default: "s" }
+  },
+  setup(d) {
+    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 (t, o) => (l(), n("span", {
+      class: g(["mc-number-badge", a.value])
+    }, f(t.label), 3));
+  }
+}), Ca = /* @__PURE__ */ _(Ba, [["__scopeId", "data-v-7e6acb92"]]), Ma = ["id", "name", "value", "disabled"], za = {
+  key: 0,
+  value: "",
+  disabled: ""
+}, La = ["value", "disabled"], Ta = /* @__PURE__ */ $({
+  __name: "MSelect",
+  props: {
+    id: {},
+    name: {},
+    options: {},
+    modelValue: {},
+    placeholder: {},
+    isInvalid: { type: Boolean },
+    disabled: { type: Boolean },
+    size: { default: "m" },
+    readonly: { type: Boolean }
+  },
+  emits: ["update:modelValue"],
+  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", I({
+      id: s.id,
+      class: ["mc-select", t.value],
+      name: s.name,
+      value: s.modelValue,
+      disabled: s.disabled
+    }, s.$attrs, {
+      onChange: i[0] || (i[0] = (c) => o("update:modelValue", c.target.value))
+    }), [
+      s.placeholder ? (l(), n("option", za, " -- " + f(s.placeholder) + " -- ", 1)) : h("", !0),
+      (l(!0), n(O, null, S(s.options, (c, p) => (l(), n("option", I({
+        key: p,
+        value: c.value
+      }, { ref_for: !0 }, c.attributes, {
+        disabled: c.disabled
+      }), f(c.text), 17, La))), 128))
+    ], 16, Ma));
+  }
+}), ja = /* @__PURE__ */ _(Ta, [["__scopeId", "data-v-68c735e4"]]), Oa = {
+  name: "ChevronLeft24",
+  props: {
+    /**
+     * Icon color
+     */
+    color: {
+      type: String,
+      default: "currentColor"
+    }
+  }
+}, Sa = ["fill"];
+function qa(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, Sa);
+}
+const G = /* @__PURE__ */ _(Oa, [["render", qa]]), Da = {
+  name: "ChevronRight24",
+  props: {
+    /**
+     * Icon color
+     */
+    color: {
+      type: String,
+      default: "currentColor"
+    }
+  }
+}, Pa = ["fill"];
+function Fa(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, Pa);
+}
+const U = /* @__PURE__ */ _(Da, [["render", Fa]]), Na = {
+  class: "mc-pagination",
+  role: "navigation",
+  "aria-label": "pagination"
+}, Aa = {
+  key: 2,
+  class: "mc-pagination__field"
+}, Ra = {
+  key: 3,
+  class: "mc-pagination__label",
+  "aria-current": "page"
+}, Ga = /* @__PURE__ */ $({
+  __name: "MPagination",
+  props: {
+    id: {},
+    modelValue: {},
+    compact: { type: Boolean },
+    options: {},
+    selectLabel: {}
+  },
+  emits: ["update:modelValue"],
+  setup(d, { emit: e }) {
+    const a = d, t = e, o = z(a.modelValue);
+    q(o, (u) => {
+      u !== a.modelValue && t("update:modelValue", u);
+    });
+    const s = b(
+      () => a.options.findIndex((u) => u.value === o.value)
+    ), i = b(() => s.value === 0), c = b(
+      () => s.value === a.options.length - 1
+    ), p = () => {
+      const u = a.options.findIndex(
+        (v) => v.value === o.value
+      );
+      u > 0 && (o.value = a.options[u - 1].value, t("update:modelValue", a.options[u - 1].value));
+    }, m = () => {
+      const u = a.options.findIndex(
+        (v) => v.value === o.value
+      );
+      u < a.options.length - 1 && (o.value = a.options[u + 1].value, t("update:modelValue", a.options[u + 1].value));
+    };
+    return (u, v) => {
+      var L;
+      return l(), n("nav", Na, [
+        u.compact ? (l(), B(D, {
+          key: 1,
+          outlined: "",
+          "aria-label": "Previous page",
+          disabled: i.value,
+          onClick: p
+        }, {
+          icon: C(() => [
+            w(G)
+          ]),
+          _: 1
+        }, 8, ["disabled"])) : (l(), B(N, {
+          key: 0,
+          "icon-position": "only",
+          "aria-label": "Previous page",
+          disabled: i.value,
+          onClick: p
+        }, {
+          icon: C(() => [
+            w(G)
+          ]),
+          _: 1
+        }, 8, ["disabled"])),
+        u.compact ? h("", !0) : (l(), n("div", Aa, [
+          w(ja, {
+            class: "mc-pagination__select",
+            id: u.id,
+            modelValue: o.value,
+            "onUpdate:modelValue": [
+              v[0] || (v[0] = (y) => o.value = y),
+              v[1] || (v[1] = (y) => t("update:modelValue", Number(y)))
+            ],
+            options: u.options,
+            "aria-label": u.selectLabel
+          }, null, 8, ["id", "modelValue", "options", "aria-label"])
+        ])),
+        u.compact ? (l(), n("span", Ra, f((L = u.options.find((y) => y.value === o.value)) == null ? void 0 : L.text), 1)) : h("", !0),
+        u.compact ? (l(), B(D, {
+          key: 5,
+          outlined: "",
+          "aria-label": "Next page",
+          disabled: c.value,
+          onClick: m
+        }, {
+          icon: C(() => [
+            w(U)
+          ]),
+          _: 1
+        }, 8, ["disabled"])) : (l(), B(N, {
+          key: 4,
+          "icon-position": "only",
+          "aria-label": "Next page",
+          disabled: c.value,
+          onClick: m
+        }, {
+          icon: C(() => [
+            w(U)
+          ]),
+          _: 1
+        }, 8, ["disabled"]))
+      ]);
+    };
+  }
+}), zs = /* @__PURE__ */ _(Ga, [["__scopeId", "data-v-3b9257ac"]]), Ua = ["id", "type", "name", "placeholder", "disabled", "aria-invalid", "readonly"], Ha = {
+  key: 0,
+  class: "mc-controls-options"
+}, Ka = { class: "mc-controls-options__label" }, Ea = /* @__PURE__ */ $({
+  __name: "MPasswordInput",
+  props: {
+    id: {},
+    name: {},
+    modelValue: {},
+    placeholder: {},
+    isInvalid: { type: Boolean },
+    disabled: { type: Boolean },
+    readonly: { type: Boolean },
+    isClearable: { type: Boolean },
+    clearLabel: { default: "Clear content" },
+    buttonLabel: { default: () => ({ show: "Show", hide: "Hide" }) }
+  },
+  emits: ["update:modelValue"],
+  setup(d, { emit: e }) {
+    const a = d, t = b(() => ({
+      "is-invalid": a.isInvalid
+    })), o = z(a.modelValue), s = z(!1), i = () => {
+      o.value = "", u("update:modelValue", "");
+    }, c = () => {
+      s.value = !s.value;
+    }, p = b(() => s.value ? "text" : "password"), m = b(() => s.value ? "true" : "false"), u = e;
+    return (v, L) => (l(), n("div", {
+      class: g(["mc-password-input mc-text-input", t.value])
+    }, [
+      H(r("input", I({
+        class: "mc-password-input__control mc-text-input__control",
+        "onUpdate:modelValue": L[0] || (L[0] = (y) => o.value = y),
+        id: v.id,
+        type: p.value,
+        name: v.name,
+        placeholder: v.placeholder,
+        disabled: v.disabled,
+        "aria-invalid": v.isInvalid,
+        readonly: v.readonly
+      }, v.$attrs, {
+        onInput: L[1] || (L[1] = (y) => u("update:modelValue", y.target.value))
+      }), null, 16, Ua), [
+        [X, o.value]
+      ]),
+      v.isClearable && o.value ? (l(), n("div", Ha, [
+        r("button", {
+          class: "mc-controls-options__button",
+          onClick: i
+        }, [
+          w(F, {
+            class: "mc-controls-options__icon",
+            "aria-hidden": "true"
+          }),
+          r("span", Ka, f(v.clearLabel), 1)
+        ])
+      ])) : h("", !0),
+      w(N, {
+        ref: "button",
+        role: "switch",
+        "aria-checked": m.value,
+        disabled: v.disabled,
+        onClick: c,
+        size: "s",
+        ghost: ""
+      }, {
+        default: C(() => [
+          P(f(s.value ? v.buttonLabel.hide : v.buttonLabel.show), 1)
+        ]),
+        _: 1
+      }, 8, ["aria-checked", "disabled"])
+    ], 2));
+  }
+}), Ls = /* @__PURE__ */ _(Ea, [["__scopeId", "data-v-167f10e2"]]), Qa = ["id", "name", "disabled", "readonly", "value", "onInput", "onKeydown"], Wa = /* @__PURE__ */ $({
+  __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 = z(Array(a.length).fill("")), i = z([]), c = (y, k) => {
+      i.value[k] = y;
+    };
+    q(
+      () => a.modelValue,
+      (y) => {
+        const k = String(y ?? "");
+        s.value = Array.from({ length: a.length }, (T, M) => k[M] ?? "");
+      },
+      { immediate: !0 }
+    );
+    const p = (y) => {
+      Y(() => {
+        var k;
+        return (k = i.value[y]) == null ? void 0 : k.focus();
+      });
+    }, m = (y, k) => {
+      const T = y.target.value.replace(/\D/g, "");
+      T ? (s.value[k] = T[0], o("update:modelValue", s.value.join("")), k + 1 < a.length && p(k + 1)) : (s.value[k] = "", o("update:modelValue", s.value.join("")));
+    }, u = (y, k) => {
+      y.key === "ArrowLeft" && k > 0 ? p(k - 1) : y.key === "ArrowRight" && k < a.length - 1 ? p(k + 1) : y.key === "Backspace" && v(y, k);
+    }, v = (y, k) => {
+      s.value[k] === "" && k > 0 && (s.value[k - 1] = "", o("update:modelValue", s.value.join("")), p(k - 1));
+    }, L = (y) => {
+      var M;
+      y.preventDefault();
+      const T = (((M = y.clipboardData) == null ? void 0 : M.getData("text")) ?? "").replace(/\D/g, "").slice(0, a.length).split("");
+      s.value = Array.from({ length: a.length }, (j, W) => T[W] ?? ""), o("update:modelValue", s.value.join("")), p(Math.min(T.length, a.length - 1));
+    };
+    return (y, k) => (l(), n("div", {
+      class: g(["mc-pincode-input", t.value]),
+      onPaste: L
+    }, [
+      (l(!0), n(O, null, S(s.value, (T, M) => (l(), n("input", I({
+        key: M,
+        id: `pincodeItem${M}`,
+        ref_for: !0,
+        ref: (j) => c(j, M),
+        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,
+        value: T
+      }, { ref_for: !0 }, y.$attrs, {
+        onInput: (j) => m(j, M),
+        onKeydown: [
+          R((j) => v(j, M), ["backspace"]),
+          (j) => u(j, M)
+        ]
+      }), null, 16, Qa))), 128))
+    ], 34));
+  }
+}), Ts = /* @__PURE__ */ _(Wa, [["__scopeId", "data-v-b2202545"]]), Ja = {
+  name: "More24",
+  props: {
+    /**
+     * Icon color
+     */
+    color: {
+      type: String,
+      default: "currentColor"
+    }
+  }
+}, Xa = ["fill"];
+function Ya(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, Xa);
+}
+const Za = /* @__PURE__ */ _(Ja, [["render", Ya]]), xa = {
+  name: "Less24",
+  props: {
+    /**
+     * Icon color
+     */
+    color: {
+      type: String,
+      default: "currentColor"
+    }
+  }
+}, et = ["fill"];
+function at(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, et);
+}
+const tt = /* @__PURE__ */ _(xa, [["render", at]]), st = ["id", "name", "disabled", "min", "max", "step", "readonly", "aria-invalid", "aria-valuemin", "aria-valuemax", "aria-valuenow"], lt = ["aria-controls", "disabled"], ot = { class: "mc-quantity-selector__icon" }, nt = { class: "mc-quantity-selector__label" }, it = ["aria-controls", "disabled"], dt = { class: "mc-quantity-selector__icon" }, rt = { class: "mc-quantity-selector__label" }, ct = /* @__PURE__ */ $({
+  __name: "MQuantitySelector",
+  props: {
+    id: {},
+    name: { default: "quantity-selector-input" },
+    modelValue: { default: 1 },
+    isInvalid: { type: Boolean },
+    disabled: { type: Boolean },
+    size: { default: "m" },
+    min: { default: 1 },
+    max: { default: 100 },
+    step: { default: 1 },
+    readonly: { type: Boolean },
+    incrementlabel: { default: "Increment" },
+    decrementLabel: { default: "Decrement" }
+  },
+  emits: ["update:modelValue"],
+  setup(d, { emit: e }) {
+    const a = d, t = z(a.modelValue);
+    q(t, (m) => {
+      m !== a.modelValue && p("update:modelValue", m);
+    });
+    const o = b(() => ({
+      [`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;
+    }, c = (m) => {
+      t.value = m, t.value > a.max && (t.value = a.max), t.value <= a.min && (t.value = a.min), p("update:modelValue", t.value);
+    }, p = e;
+    return (m, u) => (l(), n("div", {
+      class: g(["mc-quantity-selector", o.value])
+    }, [
+      H(r("input", I({
+        id: m.id,
+        "onUpdate:modelValue": u[0] || (u[0] = (v) => t.value = v),
+        class: "mc-quantity-selector__control",
+        type: "number",
+        name: m.name,
+        disabled: m.disabled,
+        min: m.min,
+        max: m.max,
+        step: m.step,
+        readonly: m.readonly,
+        "aria-invalid": m.isInvalid,
+        "aria-valuemin": m.min,
+        "aria-valuemax": m.max,
+        "aria-valuenow": t.value
+      }, m.$attrs, {
+        onChange: u[1] || (u[1] = (v) => c(Number(v.target.value)))
+      }), null, 16, st), [
+        [Z, t.value]
+      ]),
+      m.readonly ? h("", !0) : (l(), n("button", {
+        key: 0,
+        type: "button",
+        "aria-controls": m.id,
+        class: "mc-quantity-selector__button mc-quantity-selector__button--increase",
+        tabindex: "-1",
+        disabled: m.disabled || t.value === m.max,
+        onClick: s
+      }, [
+        r("span", ot, [
+          w(Za)
+        ]),
+        r("span", nt, f(m.incrementlabel), 1)
+      ], 8, lt)),
+      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 || t.value === m.min,
+        onClick: i
+      }, [
+        r("span", dt, [
+          w(tt)
+        ]),
+        r("span", rt, f(m.decrementLabel), 1)
+      ], 8, it))
+    ], 2));
+  }
+}), js = /* @__PURE__ */ _(ct, [["__scopeId", "data-v-a732650a"]]), ut = { class: "mc-radio" }, pt = ["id", "name", "checked", "disabled", "aria-invalid"], mt = ["for"], _t = /* @__PURE__ */ $({
+  __name: "MRadio",
+  props: {
+    id: {},
+    name: {},
+    label: {},
+    modelValue: { type: Boolean },
+    isInvalid: { type: Boolean },
+    disabled: { type: Boolean }
+  },
+  emits: ["update:modelValue"],
+  setup(d, { emit: e }) {
+    const a = d, t = b(() => ({
+      "is-invalid": a.isInvalid
+    })), o = e;
+    return (s, i) => (l(), n("div", ut, [
+      r("input", I({
+        id: s.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: i[0] || (i[0] = (c) => o("update:modelValue", c.target.checked))
+      }), null, 16, pt),
+      s.label ? (l(), n("label", {
+        key: 0,
+        for: s.id,
+        class: "mc-radio__label"
+      }, f(s.label), 9, mt)) : h("", !0)
+    ]));
+  }
+}), vt = /* @__PURE__ */ _(_t, [["__scopeId", "data-v-da78938c"]]), bt = /* @__PURE__ */ $({
+  __name: "MRadioGroup",
+  props: {
+    name: {},
+    modelValue: {},
+    options: {},
+    isInvalid: { type: Boolean },
+    inline: { type: Boolean }
+  },
+  emits: ["update:modelValue"],
+  setup(d, { emit: e }) {
+    const a = d, t = b(() => ({
+      "mc-field__container--inline": a.inline
+    })), o = b(() => ({
+      "mc-field__container--inline__item": a.inline
+    })), s = e;
+    return (i, c) => (l(), n("div", {
+      class: g(["mc-field__container", t.value])
+    }, [
+      (l(!0), n(O, null, S(i.options, (p) => (l(), B(vt, {
+        id: p.id,
+        key: p.id,
+        label: p.label,
+        "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 ? s("update:modelValue", p.value) : null
+      }, null, 8, ["id", "label", "is-invalid", "name", "class", "model-value", "disabled", "onUpdate:modelValue"]))), 128))
+    ], 2));
+  }
+}), Os = /* @__PURE__ */ _(bt, [["__scopeId", "data-v-d2f5e103"]]), ft = /* @__PURE__ */ $({
+  __name: "MStatusDot",
+  props: {
+    status: { default: "info" },
+    size: {}
+  },
+  setup(d) {
+    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 (t, o) => (l(), n("span", {
+      class: g(["mc-status-dot", a.value])
+    }, null, 2));
+  }
+}), ht = /* @__PURE__ */ _(ft, [["__scopeId", "data-v-417b563f"]]), $t = { class: "mc-status-badge__label" }, yt = /* @__PURE__ */ $({
+  __name: "MStatusBadge",
+  props: {
+    label: {},
+    status: { default: "info" }
+  },
+  setup(d) {
+    const e = d, a = b(() => ({
+      [`mc-status-badge--${e.status}`]: e.status && e.status != "info"
+    }));
+    return (t, o) => (l(), n("div", {
+      class: g(["mc-status-badge", a.value])
+    }, [
+      w(ht, { status: t.status }, null, 8, ["status"]),
+      r("span", $t, f(t.label), 1)
+    ], 2));
+  }
+}), Ss = /* @__PURE__ */ _(yt, [["__scopeId", "data-v-3e437a03"]]), gt = {
+  name: "Cross20",
+  props: {
+    /**
+     * Icon color
+     */
+    color: {
+      type: String,
+      default: "currentColor"
+    }
+  }
+}, kt = ["fill"];
+function wt(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, kt);
+}
+const Vt = /* @__PURE__ */ _(gt, [["render", wt]]), It = {
+  name: "InfoCircleFilled32",
+  props: {
+    /**
+     * Icon color
+     */
+    color: {
+      type: String,
+      default: "currentColor"
+    }
+  }
+}, Bt = ["fill"];
+function Ct(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 3C8.82 3 3 8.82 3 16s5.82 13 13 13 13-5.82 13-13S23.18 3 16 3m0 9a1.333 1.333 0 1 0 0-2.667A1.333 1.333 0 0 0 16 12m1 2.667a1 1 0 1 0-2 0v6.666a1 1 0 1 0 2 0z"
+    }, null, -1)
+  ]), 8, Bt);
+}
+const Mt = /* @__PURE__ */ _(It, [["render", Ct]]), zt = {
+  name: "WarningCircleFilled32",
+  props: {
+    /**
+     * Icon color
+     */
+    color: {
+      type: String,
+      default: "currentColor"
+    }
+  }
+}, Lt = ["fill"];
+function Tt(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 3C8.82 3 3 8.82 3 16s5.82 13 13 13 13-5.82 13-13S23.18 3 16 3m1 7.667a1 1 0 1 0-2 0v6.666a1 1 0 1 0 2 0zm-1 12A1.333 1.333 0 1 0 16 20a1.333 1.333 0 0 0 0 2.667"
+    }, null, -1)
+  ]), 8, Lt);
+}
+const jt = /* @__PURE__ */ _(zt, [["render", Tt]]), Ot = {
+  name: "CrossCircleFilled32",
+  props: {
+    /**
+     * Icon color
+     */
+    color: {
+      type: String,
+      default: "currentColor"
+    }
+  }
+}, St = ["fill"];
+function qt(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 3C8.82 3 3 8.82 3 16s5.82 13 13 13 13-5.82 13-13S23.18 3 16 3m-4.707 8.293a1 1 0 0 1 1.414 0L16 14.586l3.293-3.293a1 1 0 0 1 1.414 1.414L17.414 16l3.293 3.293a1 1 0 0 1-1.414 1.414L16 17.414l-3.293 3.293a1 1 0 0 1-1.414-1.414L14.586 16l-3.293-3.293a1 1 0 0 1 0-1.414"
+    }, null, -1)
+  ]), 8, St);
+}
+const Dt = /* @__PURE__ */ _(Ot, [["render", qt]]), Pt = {
+  name: "CheckCircleFilled32",
+  props: {
+    /**
+     * Icon color
+     */
+    color: {
+      type: String,
+      default: "currentColor"
+    }
+  }
+}, Ft = ["fill"];
+function Nt(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 3C8.82 3 3 8.82 3 16s5.82 13 13 13 13-5.82 13-13S23.18 3 16 3m6.707 8.96a1 1 0 0 1 0 1.414l-7.333 7.333a1 1 0 0 1-1.414 0l-4-4a1 1 0 1 1 1.414-1.414l3.293 3.293 6.626-6.626a1 1 0 0 1 1.414 0"
+    }, null, -1)
+  ]), 8, Ft);
+}
+const At = /* @__PURE__ */ _(Pt, [["render", Nt]]), Rt = { class: "mc-status-notification__content" }, Gt = { class: "mc-status-notification__title" }, Ut = { class: "mc-status-notification__message" }, Ht = {
+  key: 0,
+  class: "mc-status-notification__footer"
+}, Kt = /* @__PURE__ */ $({
+  __name: "MStatusNotification",
+  props: {
+    title: {},
+    description: {},
+    status: { default: "info" },
+    closable: { type: Boolean }
+  },
+  emits: ["close"],
+  setup(d, { emit: e }) {
+    const a = d, t = b(() => ({
+      [`mc-status-notification--${a.status}`]: a.status && a.status != "info"
+    })), o = b(() => {
+      switch (a.status) {
+        case "success":
+          return At;
+        case "warning":
+          return jt;
+        case "error":
+          return Dt;
+        case "info":
+        default:
+          return Mt;
+      }
+    }), s = e;
+    return (i, c) => (l(), n("section", {
+      class: g(["mc-status-notification", t.value]),
+      role: "status"
+    }, [
+      (l(), B(A(o.value), {
+        class: "mc-status-notification__icon",
+        "aria-hidden": "true"
+      })),
+      r("div", Rt, [
+        r("h2", Gt, f(i.title), 1),
+        r("p", Ut, f(i.description), 1),
+        i.$slots.footer ? (l(), n("div", Ht, [
+          V(i.$slots, "footer", {}, void 0, !0)
+        ])) : h("", !0)
+      ]),
+      i.closable ? (l(), n("button", {
+        key: 0,
+        class: "mc-status-notification-closable__close",
+        onClick: c[0] || (c[0] = (p) => s("close"))
+      }, [
+        w(Vt, {
+          class: "mc-status-notification-closable__icon",
+          "aria-hidden": "true"
+        }),
+        c[1] || (c[1] = r("span", { class: "mc-status-notification-closable__text" }, "Close", -1))
+      ])) : h("", !0)
+    ], 2));
+  }
+}), qs = /* @__PURE__ */ _(Kt, [["__scopeId", "data-v-457733a1"]]), Et = ["aria-label"], Qt = ["aria-selected", "onClick"], Wt = {
+  key: 0,
+  class: "mc-tabs__icon"
+}, Jt = { class: "mc-tabs__label" }, Xt = /* @__PURE__ */ $({
+  __name: "MTabs",
+  props: {
+    description: {},
+    divider: { type: Boolean, default: !0 },
+    centered: { type: Boolean },
+    modelValue: { default: 0 },
+    tabs: {}
+  },
+  emits: ["update:modelValue"],
+  setup(d, { emit: e }) {
+    const a = d, t = b(() => ({
+      "mc-tabs--centered": a.centered
+    })), o = z(a.modelValue), s = (p) => {
+      a.tabs[p].disabled || p !== o.value && (o.value = p, c("update:modelValue", p));
+    }, i = (p) => o.value === p, c = e;
+    return (p, m) => (l(), n("nav", {
+      class: g(["mc-tabs", t.value])
+    }, [
+      r("ul", {
+        role: "tablist",
+        class: "mc-tabs__list",
+        "aria-label": p.description
+      }, [
+        (l(!0), n(O, null, S(p.tabs, (u, v) => (l(), n("li", {
+          key: `tab-${v}`,
+          role: "presentation",
+          class: "mc-tabs__item"
+        }, [
+          r("button", {
+            ref_for: !0,
+            ref: "tab",
+            role: "tab",
+            class: g(["mc-tabs__tab", {
+              "mc-tabs__tab--selected": i(v),
+              "mc-tabs__tab--disabled": u.disabled
+            }]),
+            "aria-selected": i(v),
+            type: "button",
+            onClick: (L) => s(v)
+          }, [
+            u.icon ? (l(), n("span", Wt, [
+              (l(), B(A(u.icon)))
+            ])) : h("", !0),
+            r("div", Jt, [
+              r("span", null, f(u.label), 1)
+            ])
+          ], 10, Qt)
+        ]))), 128))
+      ], 8, Et),
+      p.divider ? (l(), B(je, { key: 0 })) : h("", !0)
+    ], 2));
+  }
+}), Ds = /* @__PURE__ */ _(Xt, [["__scopeId", "data-v-3919f834"]]), Yt = ["for"], Zt = ["id", "name", "checked", "disabled"], xt = { class: "mc-tag__label" }, es = ["disabled"], as = { class: "mc-tag__label" }, ts = ["disabled"], ss = { class: "mc-tag__label" }, ls = { class: "mc-tag__label" }, os = { class: "mc-tag__label" }, ns = /* @__PURE__ */ $({
+  __name: "MTag",
+  props: {
+    type: { default: "informative" },
+    size: {},
+    id: {},
+    name: {},
+    label: {},
+    modelValue: { type: Boolean },
+    disabled: { type: Boolean },
+    contextualisedNumber: { default: 99 },
+    removableLabel: {}
+  },
+  emits: ["update:modelValue", "remove-tag"],
+  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: s.id,
+      class: g(["mc-tag", t.value])
+    }, [
+      r("input", I({
+        type: "checkbox",
+        class: "mc-tag__input",
+        id: s.id,
+        name: s.name,
+        checked: s.modelValue,
+        disabled: s.disabled,
+        onChange: i[0] || (i[0] = (c) => o("update:modelValue", c.target.checked))
+      }, s.$attrs), null, 16, Zt),
+      r("span", xt, f(s.label), 1)
+    ], 10, Yt)) : s.type === "interactive" ? (l(), n("button", I({
+      key: 1,
+      class: ["mc-tag", t.value],
+      type: "button",
+      disabled: s.disabled
+    }, s.$attrs), [
+      r("span", as, f(s.label), 1)
+    ], 16, es)) : s.type === "contextualised" ? (l(), n("button", I({
+      key: 2,
+      class: ["mc-tag", t.value],
+      type: "button",
+      disabled: s.disabled
+    }, s.$attrs), [
+      w(Ca, {
+        appearance: "inverse",
+        label: s.contextualisedNumber,
+        size: s.size === "l" ? "m" : void 0
+      }, null, 8, ["label", "size"]),
+      r("span", ss, f(s.label), 1)
+    ], 16, ts)) : s.type === "removable" ? (l(), n("span", I({
+      key: 3,
+      class: ["mc-tag", t.value]
+    }, s.$attrs), [
+      r("span", ls, f(s.label), 1),
+      r("button", {
+        class: "mc-tag-removable__remove",
+        type: "button",
+        onClick: i[1] || (i[1] = (c) => s.id && o("remove-tag", s.id))
+      }, [
+        w(F, {
+          class: "mc-tag-removable__icon",
+          "aria-hidden": "true"
+        }),
+        i[2] || (i[2] = r("span", { class: "mc-tag-removable__text" }, "removableLabel", -1))
+      ])
+    ], 16)) : (l(), n("span", I({
+      key: 4,
+      class: ["mc-tag", t.value]
+    }, s.$attrs), [
+      r("span", os, f(s.label), 1)
+    ], 16));
+  }
+}), Ps = /* @__PURE__ */ _(ns, [["__scopeId", "data-v-a3166010"]]), is = ["id", "aria-invalid", "value", "name", "placeholder", "disabled", "minlength", "maxlength", "rows", "readonly"], ds = /* @__PURE__ */ $({
+  __name: "MTextArea",
+  props: {
+    id: {},
+    name: {},
+    modelValue: {},
+    placeholder: {},
+    isInvalid: { type: Boolean },
+    disabled: { type: Boolean },
+    rows: { default: 2 },
+    minLength: {},
+    maxLength: {},
+    readonly: { type: Boolean }
+  },
+  emits: ["update:modelValue"],
+  setup(d, { emit: e }) {
+    const a = d, t = b(() => ({
+      "is-invalid": a.isInvalid
+    })), o = e;
+    return (s, i) => (l(), n("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: i[0] || (i[0] = (c) => o("update:modelValue", c.target.value))
+    }), null, 16, is));
+  }
+}), Fs = /* @__PURE__ */ _(ds, [["__scopeId", "data-v-8184b69c"]]), rs = {
+  key: 0,
+  class: "mc-text-input__icon"
+}, cs = ["id", "value", "type", "name", "placeholder", "disabled", "aria-invalid", "readonly"], us = {
+  key: 1,
+  class: "mc-controls-options"
+}, ps = /* @__PURE__ */ $({
+  __name: "MTextInput",
+  props: {
+    id: {},
+    name: {},
+    modelValue: {},
+    placeholder: {},
+    inputType: { default: "text" },
+    isInvalid: { type: Boolean },
+    disabled: { type: Boolean },
+    size: { default: "m" },
+    readonly: { type: Boolean },
+    isClearable: { type: Boolean },
+    clearLabel: { default: "clear content" }
+  },
+  emits: ["update:modelValue"],
+  setup(d, { emit: e }) {
+    const a = d, t = b(() => ({
+      [`mc-text-input--${a.size}`]: a.size && a.size != "m",
+      "is-invalid": a.isInvalid
+    })), o = z(a.modelValue), s = () => {
+      o.value = "", i("update:modelValue", "");
+    }, i = e;
+    return (c, p) => (l(), n("div", {
+      class: g(["mc-text-input", t.value])
+    }, [
+      c.$slots.icon ? (l(), n("span", rs, [
+        V(c.$slots, "icon", {}, void 0, !0)
+      ])) : h("", !0),
+      r("input", I({
+        id: c.id,
+        class: "mc-text-input__control",
+        value: o.value,
+        type: c.inputType,
+        name: c.name,
+        placeholder: c.placeholder,
+        disabled: c.disabled,
+        "aria-invalid": c.isInvalid,
+        readonly: c.readonly
+      }, c.$attrs, {
+        onInput: p[0] || (p[0] = (m) => i("update:modelValue", m.target.value))
+      }), null, 16, cs),
+      c.isClearable && o.value ? (l(), n("div", us, [
+        r("button", {
+          type: "button",
+          class: "mc-controls-options__button",
+          onClick: s
+        }, [
+          w(F, {
+            class: "mc-controls-options__icon",
+            "aria-hidden": "true"
+          }),
+          p[1] || (p[1] = r("span", { class: "mc-controls-options__label" }, "{clearLabel}", -1))
+        ])
+      ])) : h("", !0)
+    ], 2));
+  }
+}), Ns = /* @__PURE__ */ _(ps, [["__scopeId", "data-v-38f67338"]]), ms = ["for"], _s = ["id", "name", "checked", "disabled"], vs = ["for"], bs = /* @__PURE__ */ $({
+  __name: "MToggle",
+  props: {
+    id: {},
+    name: {},
+    label: {},
+    modelValue: { type: Boolean },
+    size: { default: "s" },
+    disabled: { type: Boolean }
+  },
+  emits: ["update:modelValue"],
+  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])
+    }, [
+      r("label", {
+        class: "mc-toggle__container",
+        for: s.id
+      }, [
+        r("input", I({
+          id: s.id,
+          type: "checkbox",
+          class: "mc-toggle__input",
+          name: s.name,
+          checked: s.modelValue,
+          disabled: s.disabled
+        }, s.$attrs, {
+          onChange: i[0] || (i[0] = (c) => o("update:modelValue", c.target.checked))
+        }), null, 16, _s),
+        s.label ? (l(), n("span", {
+          key: 0,
+          for: s.id,
+          class: "mc-toggle__label"
+        }, f(s.label), 9, vs)) : h("", !0)
+      ], 8, ms)
+    ], 2));
+  }
+}), fs = /* @__PURE__ */ _(bs, [["__scopeId", "data-v-5be734e7"]]), hs = /* @__PURE__ */ $({
+  __name: "MToggleGroup",
+  props: {
+    name: {},
+    modelValue: {},
+    options: {},
+    inline: { type: Boolean }
+  },
+  emits: ["update:modelValue"],
+  setup(d, { emit: e }) {
+    const a = d, t = z([]);
+    q(
+      () => a.modelValue,
+      (p) => {
+        t.value = p || [];
+      },
+      { immediate: !0 }
+    );
+    const o = (p, m) => {
+      let u = [...t.value];
+      p && !u.includes(m) ? u.push(m) : u = u.filter((v) => v !== m), c("update:modelValue", u), t.value = u;
+    }, s = b(() => ({
+      "mc-field__container--inline": a.inline
+    })), i = b(() => ({
+      "mc-field__container--inline__item": a.inline
+    })), c = e;
+    return (p, m) => (l(), n("div", {
+      class: g(s.value)
+    }, [
+      (l(!0), n(O, null, S(p.options, (u) => (l(), B(fs, {
+        id: u.id,
+        key: u.id,
+        label: u.label,
+        "is-invalid": u.isInvalid,
+        name: p.name,
+        class: g(i.value),
+        "model-value": p.modelValue ? p.modelValue.includes(u.value) : void 0,
+        disabled: u.disabled,
+        "onUpdate:modelValue": (v) => o(v, u.value)
+      }, null, 8, ["id", "label", "is-invalid", "name", "class", "model-value", "disabled", "onUpdate:modelValue"]))), 128))
+    ], 2));
+  }
+}), As = /* @__PURE__ */ _(hs, [["__scopeId", "data-v-c6b10172"]]);
+export {
+  ys as MBreadcrumb,
+  N as MButton,
+  ge as MCheckbox,
+  gs as MCheckboxGroup,
+  ks as MDatepicker,
+  je as MDivider,
+  ws as MDrawer,
+  Vs as MField,
+  Is as MFieldGroup,
+  Bs as MFlag,
+  D as MIconButton,
+  se as MLink,
+  K as MLoader,
+  Cs as MLoadingOverlay,
+  Ms as MModal,
+  Ca as MNumberBadge,
+  Q as MOverlay,
+  zs as MPagination,
+  Ls as MPasswordInput,
+  Ts as MPincode,
+  js as MQuantitySelector,
+  vt as MRadio,
+  Os as MRadioGroup,
+  ja as MSelect,
+  Ss as MStatusBadge,
+  qs as MStatusNotification,
+  Ds as MTabs,
+  Ps as MTag,
+  Fs as MTextArea,
+  Ns as MTextInput,
+  fs as MToggle,
+  As as MToggleGroup
+};
+//# sourceMappingURL=mozaic-vue.js.map