@mozaic-ds/vue 1.0.0-beta.4 → 1.0.0-beta.5

package/dist/mozaic-vue.js

@@ -1,5 +1,5 @@
-import { defineComponent as f, computed as m, createElementBlock as n, openBlock as l, normalizeClass as y, toDisplayString as h, createElementVNode as r, createCommentVNode as v, renderSlot as $, createVNode as V, normalizeStyle as L, createTextVNode as I, mergeProps as g, ref as B, watch as C, Fragment as M, renderList as z, createBlock as w, resolveDynamicComponent as O, withCtx as T, withDirectives as j, vModelText as q } from "vue";
-const S = /* @__PURE__ */ f({
+import { defineComponent as y, computed as v, createElementBlock as n, openBlock as l, normalizeClass as $, toDisplayString as f, createBlock as w, resolveDynamicComponent as j, withCtx as S, createCommentVNode as h, createElementVNode as d, renderSlot as g, Fragment as B, renderList as C, createVNode as V, createTextVNode as M, normalizeStyle as Z, mergeProps as k, ref as I, watch as O, withDirectives as T, vModelDynamic as P, vModelText as G } from "vue";
+const U = /* @__PURE__ */ y({
   __name: "MBadge",
   props: {
     label: {},
@@ -7,24 +7,111 @@ const S = /* @__PURE__ */ f({
     size: { default: "s" }
   },
   setup(o) {
-    const a = o, t = m(() => ({
+    const a = o, t = v(() => ({
       [`mc-badge--${a.appearance}`]: a.appearance && a.appearance != "standard",
       [`mc-badge--${a.size}`]: a.size && a.size != "s"
     }));
     return (e, i) => (l(), n("span", {
-      class: y(["mc-badge", t.value])
-    }, h(e.label), 3));
+      class: $(["mc-badge", t.value])
+    }, f(e.label), 3));
   }
 }), _ = (o, a) => {
   const t = o.__vccOpts || o;
   for (const [e, i] of a)
     t[e] = i;
   return t;
-}, ma = /* @__PURE__ */ _(S, [["__scopeId", "data-v-b427cc61"]]), P = { class: "mc-loader__spinner" }, F = ["viewBox"], D = ["r"], G = {
+}, Xa = /* @__PURE__ */ _(U, [["__scopeId", "data-v-b427cc61"]]), D = {
+  key: 0,
+  class: "mc-link__icon",
+  "aria-hidden": "true"
+}, F = { class: "mc-link__label" }, N = {
+  key: 1,
+  class: "mc-link__icon",
+  "aria-hidden": "true"
+}, R = /* @__PURE__ */ y({
+  __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(o) {
+    const a = o, t = v(() => ({
+      [`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
+    }));
+    return (e, i) => (l(), w(j(e.router ? "router-link" : "a"), {
+      class: $(["mc-link", t.value]),
+      href: e.href,
+      target: e.target,
+      to: e.router ? e.href : void 0
+    }, {
+      default: S(() => [
+        e.$slots.icon && e.iconPosition == "left" ? (l(), n("span", D, [
+          g(e.$slots, "icon", {}, void 0, !0)
+        ])) : h("", !0),
+        d("span", F, [
+          g(e.$slots, "default", {}, void 0, !0)
+        ]),
+        e.$slots.icon && e.iconPosition == "right" ? (l(), n("span", N, [
+          g(e.$slots, "icon", {}, void 0, !0)
+        ])) : h("", !0)
+      ]),
+      _: 3
+    }, 8, ["class", "href", "target", "to"]));
+  }
+}), A = /* @__PURE__ */ _(R, [["__scopeId", "data-v-ad3d954f"]]), H = { class: "mc-breadcrumb__container" }, E = /* @__PURE__ */ y({
+  __name: "MBreadcrumb",
+  props: {
+    appearance: {},
+    links: {}
+  },
+  setup(o) {
+    const a = o, t = v(() => ({
+      [`mc-breadcrumb--${a.appearance}`]: a.appearance && a.appearance != "standard"
+    })), e = (i) => {
+      var s;
+      return i === (((s = a.links) == null ? void 0 : s.length) ?? 0) - 1;
+    };
+    return (i, s) => (l(), n("nav", {
+      class: $(["mc-breadcrumb", t.value]),
+      "aria-label": "Breadcrumb"
+    }, [
+      d("ul", H, [
+        (l(!0), n(B, null, C(i.links, (u, r) => (l(), n("li", {
+          class: "mc-breadcrumb__item",
+          key: `breadcrumb-${r}`
+        }, [
+          V(A, {
+            href: u.href,
+            router: u.router,
+            appearance: i.appearance,
+            inline: "",
+            class: $({
+              "mc-breadcrumb__current": e(r)
+            }),
+            "aria-current": e(r) ? "page" : void 0
+          }, {
+            default: S(() => [
+              M(f(u.label), 1)
+            ]),
+            _: 2
+          }, 1032, ["href", "router", "appearance", "class", "aria-current"])
+        ]))), 128))
+      ])
+    ], 2));
+  }
+}), Ya = /* @__PURE__ */ _(E, [["__scopeId", "data-v-09df4905"]]), Q = { class: "mc-loader__spinner" }, W = ["viewBox"], J = ["r"], K = {
   key: 0,
   class: "mc-loader__text",
   role: "status"
-}, R = /* @__PURE__ */ f({
+}, X = /* @__PURE__ */ y({
   __name: "MLoader",
   props: {
     appearance: { default: "standard" },
@@ -32,10 +119,10 @@ const S = /* @__PURE__ */ f({
     text: {}
   },
   setup(o) {
-    const a = o, t = m(() => ({
+    const a = o, t = v(() => ({
       [`mc-loader--${a.size}`]: a.size && a.size !== "m",
       [`mc-loader--${a.appearance}`]: a.appearance && a.appearance !== "standard"
-    })), e = m(() => {
+    })), e = v(() => {
       let s;
       switch (a.size) {
         case "s":
@@ -48,7 +135,7 @@ const S = /* @__PURE__ */ f({
           s = "0 0 32 32";
       }
       return s;
-    }), i = m(() => {
+    }), i = v(() => {
       let s;
       switch (a.size) {
         case "s":
@@ -63,40 +150,40 @@ const S = /* @__PURE__ */ f({
       return s;
     });
     return (s, u) => (l(), n("div", {
-      class: y(["mc-loader", t.value])
+      class: $(["mc-loader", t.value])
     }, [
-      r("span", P, [
+      d("span", Q, [
         (l(), n("svg", {
           class: "mc-loader__icon",
           xmlns: "http://www.w3.org/2000/svg",
           viewBox: e.value,
           "aria-hidden": "true"
         }, [
-          r("circle", {
+          d("circle", {
             class: "mc-loader__path",
             cx: "50%",
             cy: "50%",
             r: i.value
-          }, null, 8, D)
-        ], 8, F))
+          }, null, 8, J)
+        ], 8, W))
       ]),
-      s.text ? (l(), n("p", G, h(s.text), 1)) : v("", !0)
+      s.text ? (l(), n("p", K, f(s.text), 1)) : h("", !0)
     ], 2));
   }
-}), N = /* @__PURE__ */ _(R, [["__scopeId", "data-v-56c66912"]]), U = ["disabled", "type"], Z = {
+}), Y = /* @__PURE__ */ _(X, [["__scopeId", "data-v-56c66912"]]), x = ["disabled", "type"], ee = {
   key: 0,
   class: "mc-button__icon"
-}, A = {
+}, ae = {
   key: 1,
   class: "mc-button__icon",
   style: { position: "absolute" }
-}, E = {
+}, se = {
   key: 2,
   class: "mc-button__icon"
-}, H = {
+}, te = {
   key: 4,
   class: "mc-button__icon"
-}, Q = /* @__PURE__ */ f({
+}, le = /* @__PURE__ */ y({
   __name: "MButton",
   props: {
     appearance: { default: "standard" },
@@ -109,7 +196,7 @@ const S = /* @__PURE__ */ f({
     isLoading: { type: Boolean }
   },
   setup(o) {
-    const a = o, t = m(() => ({
+    const a = o, t = v(() => ({
       [`mc-button--${a.appearance}`]: a.appearance && a.appearance != "standard",
       [`mc-button--${a.size}`]: a.size && a.size != "m",
       "mc-button--ghost": a.ghost,
@@ -117,36 +204,36 @@ const S = /* @__PURE__ */ f({
       "mc-button--icon-only": a.iconPosition == "only"
     }));
     return (e, i) => (l(), n("button", {
-      class: y(["mc-button", t.value]),
+      class: $(["mc-button", t.value]),
       disabled: e.disabled,
       type: e.type
     }, [
-      e.$slots.icon && e.iconPosition == "left" && !e.isLoading ? (l(), n("span", Z, [
-        $(e.$slots, "icon", {}, void 0, !0)
-      ])) : v("", !0),
-      e.isLoading ? (l(), n("span", A, [
-        V(N, {
+      e.$slots.icon && e.iconPosition == "left" && !e.isLoading ? (l(), n("span", ee, [
+        g(e.$slots, "icon", {}, void 0, !0)
+      ])) : h("", !0),
+      e.isLoading ? (l(), n("span", ae, [
+        V(Y, {
           style: { color: "currentColor" },
           size: "s"
         })
-      ])) : v("", !0),
-      e.$slots.icon && e.iconPosition == "only" ? (l(), n("span", E, [
-        $(e.$slots, "icon", {}, void 0, !0)
+      ])) : h("", !0),
+      e.$slots.icon && e.iconPosition == "only" ? (l(), n("span", se, [
+        g(e.$slots, "icon", {}, void 0, !0)
       ])) : (l(), n("span", {
         key: 3,
         class: "mc-button__label",
-        style: L({ visibility: e.isLoading ? "hidden" : "visible" })
+        style: Z({ visibility: e.isLoading ? "hidden" : "visible" })
       }, [
-        $(e.$slots, "default", {}, () => [
-          i[0] || (i[0] = I("Button Label"))
+        g(e.$slots, "default", {}, () => [
+          i[0] || (i[0] = M("Button Label"))
         ], !0)
       ], 4)),
-      e.$slots.icon && e.iconPosition == "right" && !e.isLoading ? (l(), n("span", H, [
-        $(e.$slots, "icon", {}, void 0, !0)
-      ])) : v("", !0)
-    ], 10, U));
+      e.$slots.icon && e.iconPosition == "right" && !e.isLoading ? (l(), n("span", te, [
+        g(e.$slots, "icon", {}, void 0, !0)
+      ])) : h("", !0)
+    ], 10, x));
   }
-}), _a = /* @__PURE__ */ _(Q, [["__scopeId", "data-v-f4f43ab6"]]), J = { class: "mc-checkbox" }, K = ["id", "name", "checked", "indeterminate", "disabled", "aria-invalid"], W = ["for"], X = /* @__PURE__ */ f({
+}), ne = /* @__PURE__ */ _(le, [["__scopeId", "data-v-f4f43ab6"]]), oe = { class: "mc-checkbox" }, ie = ["id", "name", "checked", "indeterminate", "disabled", "aria-invalid"], de = ["for"], re = /* @__PURE__ */ y({
   __name: "MCheckbox",
   props: {
     id: {},
@@ -159,11 +246,11 @@ const S = /* @__PURE__ */ f({
   },
   emits: ["update:modelValue"],
   setup(o, { emit: a }) {
-    const t = o, e = m(() => ({
+    const t = o, e = v(() => ({
       "is-invalid": t.isInvalid
     })), i = a;
-    return (s, u) => (l(), n("div", J, [
-      r("input", g({
+    return (s, u) => (l(), n("div", oe, [
+      d("input", k({
         id: s.id,
         type: "checkbox",
         class: ["mc-checkbox__input", e.value],
@@ -173,16 +260,16 @@ const S = /* @__PURE__ */ f({
         disabled: s.disabled,
         "aria-invalid": s.isInvalid
       }, s.$attrs, {
-        onChange: u[0] || (u[0] = (c) => i("update:modelValue", c.target.checked))
-      }), null, 16, K),
+        onChange: u[0] || (u[0] = (r) => i("update:modelValue", r.target.checked))
+      }), null, 16, ie),
       s.label ? (l(), n("label", {
         key: 0,
         for: s.id,
         class: "mc-checkbox__label"
-      }, h(s.label), 9, W)) : v("", !0)
+      }, f(s.label), 9, de)) : h("", !0)
     ]));
   }
-}), Y = /* @__PURE__ */ _(X, [["__scopeId", "data-v-37fd0a35"]]), x = /* @__PURE__ */ f({
+}), ce = /* @__PURE__ */ _(re, [["__scopeId", "data-v-37fd0a35"]]), ue = /* @__PURE__ */ y({
   __name: "MCheckboxGroup",
   props: {
     name: {},
@@ -192,42 +279,42 @@ const S = /* @__PURE__ */ f({
   },
   emits: ["update:modelValue"],
   setup(o, { emit: a }) {
-    const t = o, e = B([]);
-    C(
+    const t = o, e = I([]);
+    O(
       () => t.modelValue,
       (p) => {
         e.value = p || [];
       },
       { immediate: !0 }
     );
-    const i = (p, d) => {
-      let b = [...e.value];
-      p && !b.includes(d) ? b.push(d) : b = b.filter((k) => k !== d), c("update:modelValue", b), e.value = b;
-    }, s = m(() => ({
+    const i = (p, c) => {
+      let m = [...e.value];
+      p && !m.includes(c) ? m.push(c) : m = m.filter((b) => b !== c), r("update:modelValue", m), e.value = m;
+    }, s = v(() => ({
       "mc-field__container--inline": t.inline
-    })), u = m(() => ({
+    })), u = v(() => ({
       "mc-field__container--inline__item": t.inline
-    })), c = a;
-    return (p, d) => (l(), n("div", {
-      class: y(["mc-field__container", s.value])
+    })), r = a;
+    return (p, c) => (l(), n("div", {
+      class: $(["mc-field__container", s.value])
     }, [
-      (l(!0), n(M, null, z(p.options, (b) => (l(), w(Y, {
-        id: b.id,
-        key: b.id,
-        label: b.label,
-        "is-invalid": b.isInvalid,
+      (l(!0), n(B, null, C(p.options, (m) => (l(), w(ce, {
+        id: m.id,
+        key: m.id,
+        label: m.label,
+        "is-invalid": m.isInvalid,
         name: p.name,
-        class: y(["mc-field__item", u.value]),
-        "model-value": p.modelValue ? p.modelValue.includes(b.value) : void 0,
-        disabled: b.disabled,
-        "onUpdate:modelValue": (k) => i(k, b.value)
+        class: $(["mc-field__item", u.value]),
+        "model-value": p.modelValue ? p.modelValue.includes(m.value) : void 0,
+        disabled: m.disabled,
+        "onUpdate:modelValue": (b) => i(b, m.value)
       }, null, 8, ["id", "label", "is-invalid", "name", "class", "model-value", "disabled", "onUpdate:modelValue"]))), 128))
     ], 2));
   }
-}), va = /* @__PURE__ */ _(x, [["__scopeId", "data-v-51af53d0"]]), ee = { class: "mc-field" }, ae = ["for"], se = {
+}), xa = /* @__PURE__ */ _(ue, [["__scopeId", "data-v-8ee4699f"]]), pe = { class: "mc-field" }, me = ["for"], _e = {
   key: 0,
   class: "mc-field__requirement"
-}, te = ["id"], le = { class: "mc-field__content" }, ne = ["id"], oe = /* @__PURE__ */ f({
+}, ve = ["id"], be = { class: "mc-field__content" }, fe = ["id"], he = /* @__PURE__ */ y({
   __name: "MField",
   props: {
     id: {},
@@ -241,40 +328,40 @@ const S = /* @__PURE__ */ f({
     message: {}
   },
   setup(o) {
-    const a = o, t = m(() => ({
+    const a = o, t = v(() => ({
       "is-valid": a.isValid,
       "is-invalid": a.isInvalid
     }));
-    return (e, i) => (l(), n("div", ee, [
-      r("label", {
+    return (e, i) => (l(), n("div", pe, [
+      d("label", {
         class: "mc-field__label",
         for: e.id
       }, [
-        I(h(e.label) + " ", 1),
-        e.requirementText ? (l(), n("span", se, "(" + h(e.requirementText) + ")", 1)) : v("", !0)
-      ], 8, ae),
+        M(f(e.label) + " ", 1),
+        e.requirementText ? (l(), n("span", _e, "(" + f(e.requirementText) + ")", 1)) : h("", !0)
+      ], 8, me),
       e.helpId && e.helpText ? (l(), n("span", {
         key: 0,
         id: e.helpId,
         class: "mc-field__help"
-      }, h(e.helpText), 9, te)) : v("", !0),
-      r("div", le, [
-        $(e.$slots, "default", {}, void 0, !0)
+      }, f(e.helpText), 9, ve)) : h("", !0),
+      d("div", be, [
+        g(e.$slots, "default", {}, void 0, !0)
       ]),
       (e.isValid || e.isInvalid) && e.message ? (l(), n("span", {
         key: 1,
-        class: y(["mc-field__validation-message", t.value]),
+        class: $(["mc-field__validation-message", t.value]),
         id: e.messageId
-      }, h(e.message), 11, ne)) : v("", !0)
+      }, f(e.message), 11, fe)) : h("", !0)
     ]));
   }
-}), ba = /* @__PURE__ */ _(oe, [["__scopeId", "data-v-ead078c4"]]), ie = { class: "mc-field--group" }, de = ["for"], re = {
+}), es = /* @__PURE__ */ _(he, [["__scopeId", "data-v-ead078c4"]]), $e = { class: "mc-field--group" }, ye = ["for"], ge = {
   key: 0,
   class: "mc-field__requirement"
-}, ce = {
+}, Ve = {
   key: 0,
   class: "mc-field__help"
-}, ue = { class: "mc-field__content" }, pe = /* @__PURE__ */ f({
+}, ke = { class: "mc-field__content" }, Ie = /* @__PURE__ */ y({
   __name: "MFieldGroup",
   props: {
     id: {},
@@ -286,29 +373,29 @@ const S = /* @__PURE__ */ f({
     message: {}
   },
   setup(o) {
-    const a = o, t = m(() => ({
+    const a = o, t = v(() => ({
       "is-valid": a.isValid,
       "is-invalid": a.isInvalid
     }));
-    return (e, i) => (l(), n("fieldset", ie, [
-      r("legend", {
+    return (e, i) => (l(), n("fieldset", $e, [
+      d("legend", {
         class: "mc-field__legend",
         for: e.id
       }, [
-        I(h(e.legend) + " ", 1),
-        e.requirementText ? (l(), n("span", re, "(" + h(e.requirementText) + ")", 1)) : v("", !0)
-      ], 8, de),
-      e.helpText ? (l(), n("span", ce, h(e.helpText), 1)) : v("", !0),
-      r("div", ue, [
-        $(e.$slots, "default", {}, void 0, !0)
+        M(f(e.legend) + " ", 1),
+        e.requirementText ? (l(), n("span", ge, "(" + f(e.requirementText) + ")", 1)) : h("", !0)
+      ], 8, ye),
+      e.helpText ? (l(), n("span", Ve, f(e.helpText), 1)) : h("", !0),
+      d("div", ke, [
+        g(e.$slots, "default", {}, void 0, !0)
       ]),
       (e.isValid || e.isInvalid) && e.message ? (l(), n("span", {
         key: 1,
-        class: y(["mc-field__validation-message", t.value])
-      }, h(e.message), 3)) : v("", !0)
+        class: $(["mc-field__validation-message", t.value])
+      }, f(e.message), 3)) : h("", !0)
     ]));
   }
-}), fa = /* @__PURE__ */ _(pe, [["__scopeId", "data-v-fc0c08dc"]]), me = ["disabled", "type"], _e = { class: "mc-button__icon" }, ve = /* @__PURE__ */ f({
+}), as = /* @__PURE__ */ _(Ie, [["__scopeId", "data-v-fc0c08dc"]]), we = ["disabled", "type"], Be = { class: "mc-button__icon" }, Ce = /* @__PURE__ */ y({
   __name: "MIconButton",
   props: {
     appearance: { default: "standard" },
@@ -319,69 +406,23 @@ const S = /* @__PURE__ */ f({
     type: { default: "button" }
   },
   setup(o) {
-    const a = o, t = m(() => ({
+    const a = o, t = v(() => ({
       [`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, i) => (l(), n("button", {
-      class: y(["mc-button mc-button--icon-button", t.value]),
+      class: $(["mc-button mc-button--icon-button", t.value]),
       disabled: e.disabled,
       type: e.type
     }, [
-      r("span", _e, [
-        $(e.$slots, "icon", {}, void 0, !0)
+      d("span", Be, [
+        g(e.$slots, "icon", {}, void 0, !0)
       ])
-    ], 10, me));
-  }
-}), ha = /* @__PURE__ */ _(ve, [["__scopeId", "data-v-abf78562"]]), be = {
-  key: 0,
-  class: "mc-link__icon",
-  "aria-hidden": "true"
-}, fe = { class: "mc-link__label" }, he = {
-  key: 1,
-  class: "mc-link__icon",
-  "aria-hidden": "true"
-}, ye = /* @__PURE__ */ f({
-  __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(o) {
-    const a = o, t = m(() => ({
-      [`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
-    }));
-    return (e, i) => (l(), w(O(e.router ? "router-link" : "a"), {
-      class: y(["mc-link", t.value]),
-      href: e.href,
-      target: e.target,
-      to: e.router ? e.href : void 0
-    }, {
-      default: T(() => [
-        e.$slots.icon && e.iconPosition == "left" ? (l(), n("span", be, [
-          $(e.$slots, "icon", {}, void 0, !0)
-        ])) : v("", !0),
-        r("span", fe, [
-          $(e.$slots, "default", {}, void 0, !0)
-        ]),
-        e.$slots.icon && e.iconPosition == "right" ? (l(), n("span", he, [
-          $(e.$slots, "icon", {}, void 0, !0)
-        ])) : v("", !0)
-      ]),
-      _: 3
-    }, 8, ["class", "href", "target", "to"]));
+    ], 10, we));
   }
-}), ya = /* @__PURE__ */ _(ye, [["__scopeId", "data-v-ad3d954f"]]), $e = ["aria-labelledby"], ge = /* @__PURE__ */ f({
+}), ss = /* @__PURE__ */ _(Ce, [["__scopeId", "data-v-abf78562"]]), Me = ["aria-labelledby"], ze = /* @__PURE__ */ y({
   __name: "MOverlay",
   props: {
     isVisible: { type: Boolean },
@@ -389,18 +430,113 @@ const S = /* @__PURE__ */ f({
   },
   setup(o) {
     return (a, t) => (l(), n("div", {
-      class: y(["mc-overlay", { "is-visible": a.isVisible }])
+      class: $(["mc-overlay", { "is-visible": a.isVisible }])
     }, [
-      r("div", {
+      d("div", {
         role: "dialog",
         tabindex: "-1",
         "aria-labelledby": a.dialogLabel
       }, [
-        $(a.$slots, "default", {}, void 0, !0)
-      ], 8, $e)
+        g(a.$slots, "default", {}, void 0, !0)
+      ], 8, Me)
+    ], 2));
+  }
+}), ts = /* @__PURE__ */ _(ze, [["__scopeId", "data-v-db90fdb3"]]), Le = {
+  name: "CrossCircleFilled24",
+  props: {
+    /**
+     * Icon color
+     */
+    color: {
+      type: String,
+      default: "currentColor"
+    }
+  }
+}, Se = {
+  xmlns: "http://www.w3.org/2000/svg",
+  viewBox: "0 0 24 24"
+};
+function Oe(o, a, t, e, i, s) {
+  return l(), n("svg", Se, a[0] || (a[0] = [
+    d("path", {
+      "fill-rule": "evenodd",
+      d: "M12 2C6.477 2 2 6.477 2 12s4.477 10 10 10 10-4.477 10-10S17.523 2 12 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"
+    }, null, -1)
+  ]));
+}
+const q = /* @__PURE__ */ _(Le, [["render", Oe]]), je = ["id", "type", "name", "placeholder", "disabled", "aria-invalid", "readonly"], Te = {
+  key: 0,
+  class: "mc-controls-options"
+}, qe = { class: "mc-controls-options__label" }, Ze = /* @__PURE__ */ y({
+  __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(o, { emit: a }) {
+    const t = o, e = v(() => ({
+      "is-invalid": t.isInvalid
+    })), i = I(t.modelValue), s = I(!1), u = () => {
+      i.value = "", m("update:modelValue", "");
+    }, r = () => {
+      s.value = !s.value;
+    }, p = v(() => s.value ? "text" : "password"), c = v(() => s.value ? "true" : "false"), m = a;
+    return (b, z) => (l(), n("div", {
+      class: $(["mc-password-input mc-text-input", e.value])
+    }, [
+      T(d("input", k({
+        class: "mc-password-input__control mc-text-input__control",
+        "onUpdate:modelValue": z[0] || (z[0] = (L) => i.value = L),
+        id: b.id,
+        type: p.value,
+        name: b.name,
+        placeholder: b.placeholder,
+        disabled: b.disabled,
+        "aria-invalid": b.isInvalid,
+        readonly: b.readonly
+      }, b.$attrs, {
+        onInput: z[1] || (z[1] = (L) => m("update:modelValue", L.target.value))
+      }), null, 16, je), [
+        [P, i.value]
+      ]),
+      b.isClearable && i.value ? (l(), n("div", Te, [
+        d("button", {
+          class: "mc-controls-options__button",
+          onClick: u
+        }, [
+          V(q, {
+            class: "mc-controls-options__icon",
+            "aria-hidden": "true"
+          }),
+          d("span", qe, f(b.clearLabel), 1)
+        ])
+      ])) : h("", !0),
+      V(ne, {
+        ref: "button",
+        role: "switch",
+        "aria-checked": c.value,
+        disabled: b.disabled,
+        onClick: r,
+        size: "s",
+        ghost: ""
+      }, {
+        default: S(() => [
+          M(f(s.value ? b.buttonLabel.hide : b.buttonLabel.show), 1)
+        ]),
+        _: 1
+      }, 8, ["aria-checked", "disabled"])
     ], 2));
   }
-}), $a = /* @__PURE__ */ _(ge, [["__scopeId", "data-v-db90fdb3"]]), ke = {
+}), ls = /* @__PURE__ */ _(Ze, [["__scopeId", "data-v-a5164b59"]]), Pe = {
   name: "More24",
   props: {
     /**
@@ -411,21 +547,21 @@ const S = /* @__PURE__ */ f({
       default: "currentColor"
     }
   }
-}, Ve = {
+}, Ge = {
   xmlns: "http://www.w3.org/2000/svg",
   viewBox: "0 0 24 24"
 };
-function Ie(o, a, t, e, i, s) {
-  return l(), n("svg", Ve, a[0] || (a[0] = [
-    r("g", { "clip-path": "url(#a)" }, [
-      r("path", {
+function Ue(o, a, t, e, i, s) {
+  return l(), n("svg", Ge, a[0] || (a[0] = [
+    d("g", { "clip-path": "url(#a)" }, [
+      d("path", {
         "fill-rule": "evenodd",
         d: "M13 5a1 1 0 1 0-2 0v6H5a1 1 0 1 0 0 2h6v6a1 1 0 1 0 2 0v-6h6a1 1 0 1 0 0-2h-6V5Z"
       })
     ], -1),
-    r("defs", null, [
-      r("clipPath", { id: "a" }, [
-        r("rect", {
+    d("defs", null, [
+      d("clipPath", { id: "a" }, [
+        d("rect", {
           width: "24",
           height: "24",
           fill: "#fff"
@@ -434,7 +570,7 @@ function Ie(o, a, t, e, i, s) {
     ], -1)
   ]));
 }
-const Be = /* @__PURE__ */ _(ke, [["render", Ie]]), Me = {
+const De = /* @__PURE__ */ _(Pe, [["render", Ue]]), Fe = {
   name: "Less24",
   props: {
     /**
@@ -445,21 +581,21 @@ const Be = /* @__PURE__ */ _(ke, [["render", Ie]]), Me = {
       default: "currentColor"
     }
   }
-}, ze = {
+}, Ne = {
   xmlns: "http://www.w3.org/2000/svg",
   viewBox: "0 0 24 24"
 };
-function we(o, a, t, e, i, s) {
-  return l(), n("svg", ze, a[0] || (a[0] = [
-    r("g", { "clip-path": "url(#a)" }, [
-      r("path", {
+function Re(o, a, t, e, i, s) {
+  return l(), n("svg", Ne, a[0] || (a[0] = [
+    d("g", { "clip-path": "url(#a)" }, [
+      d("path", {
         "fill-rule": "evenodd",
         d: "M6 12a1 1 0 0 1 1-1h10a1 1 0 1 1 0 2H7a1 1 0 0 1-1-1Z"
       })
     ], -1),
-    r("defs", null, [
-      r("clipPath", { id: "a" }, [
-        r("rect", {
+    d("defs", null, [
+      d("clipPath", { id: "a" }, [
+        d("rect", {
           width: "24",
           height: "24",
           fill: "#fff"
@@ -468,7 +604,7 @@ function we(o, a, t, e, i, s) {
     ], -1)
   ]));
 }
-const Ce = /* @__PURE__ */ _(Me, [["render", we]]), Le = ["id", "name", "disabled", "min", "max", "step", "readonly", "aria-invalid", "aria-valuemin", "aria-valuemax", "aria-valuenow"], Oe = ["aria-controls", "disabled"], Te = { class: "mc-quantity-selector__icon" }, je = { class: "mc-quantity-selector__label" }, qe = ["aria-controls", "disabled"], Se = { class: "mc-quantity-selector__icon" }, Pe = { class: "mc-quantity-selector__label" }, Fe = /* @__PURE__ */ f({
+const Ae = /* @__PURE__ */ _(Fe, [["render", Re]]), He = ["id", "name", "disabled", "min", "max", "step", "readonly", "aria-invalid", "aria-valuemin", "aria-valuemax", "aria-valuenow"], Ee = ["aria-controls", "disabled"], Qe = { class: "mc-quantity-selector__icon" }, We = { class: "mc-quantity-selector__label" }, Je = ["aria-controls", "disabled"], Ke = { class: "mc-quantity-selector__icon" }, Xe = { class: "mc-quantity-selector__label" }, Ye = /* @__PURE__ */ y({
   __name: "MQuantitySelector",
   props: {
     id: {},
@@ -486,74 +622,74 @@ const Ce = /* @__PURE__ */ _(Me, [["render", we]]), Le = ["id", "name", "disable
   },
   emits: ["update:modelValue"],
   setup(o, { emit: a }) {
-    const t = o, e = B(t.modelValue);
-    C(e, (d) => {
-      d !== t.modelValue && p("update:modelValue", d);
+    const t = o, e = I(t.modelValue);
+    O(e, (c) => {
+      c !== t.modelValue && p("update:modelValue", c);
     });
-    const i = m(() => ({
+    const i = v(() => ({
       [`mc-quantity-selector--${t.size}`]: t.size && t.size != "m",
       "is-invalid": t.isInvalid
     })), s = () => {
       e.value + t.step <= t.max ? e.value += t.step : e.value = t.max;
     }, u = () => {
       e.value - t.step > t.min ? e.value -= t.step : e.value = t.min;
-    }, c = (d) => {
-      e.value = d, e.value > t.max && (e.value = t.max), e.value <= t.min && (e.value = t.min), p("update:modelValue", e.value);
+    }, r = (c) => {
+      e.value = c, e.value > t.max && (e.value = t.max), e.value <= t.min && (e.value = t.min), p("update:modelValue", e.value);
     }, p = a;
-    return (d, b) => (l(), n("div", {
-      class: y(["mc-quantity-selector", i.value])
+    return (c, m) => (l(), n("div", {
+      class: $(["mc-quantity-selector", i.value])
     }, [
-      j(r("input", g({
-        id: d.id,
-        "onUpdate:modelValue": b[0] || (b[0] = (k) => e.value = k),
+      T(d("input", k({
+        id: c.id,
+        "onUpdate:modelValue": m[0] || (m[0] = (b) => e.value = b),
         class: "mc-quantity-selector__control",
         type: "number",
-        name: d.name,
-        disabled: d.disabled,
-        min: d.min,
-        max: d.max,
-        step: d.step,
-        readonly: d.readonly,
-        "aria-invalid": d.isInvalid,
-        "aria-valuemin": d.min,
-        "aria-valuemax": d.max,
+        name: c.name,
+        disabled: c.disabled,
+        min: c.min,
+        max: c.max,
+        step: c.step,
+        readonly: c.readonly,
+        "aria-invalid": c.isInvalid,
+        "aria-valuemin": c.min,
+        "aria-valuemax": c.max,
         "aria-valuenow": e.value
-      }, d.$attrs, {
-        onChange: b[1] || (b[1] = (k) => c(Number(k.target.value)))
-      }), null, 16, Le), [
-        [q, e.value]
+      }, c.$attrs, {
+        onChange: m[1] || (m[1] = (b) => r(Number(b.target.value)))
+      }), null, 16, He), [
+        [G, e.value]
       ]),
-      d.readonly ? v("", !0) : (l(), n("button", {
+      c.readonly ? h("", !0) : (l(), n("button", {
         key: 0,
         type: "button",
-        "aria-controls": d.id,
+        "aria-controls": c.id,
         class: "mc-quantity-selector__button mc-quantity-selector__button--increase",
         tabindex: "-1",
-        disabled: d.disabled || e.value === d.max,
+        disabled: c.disabled || e.value === c.max,
         onClick: s
       }, [
-        r("span", Te, [
-          V(Be)
+        d("span", Qe, [
+          V(De)
         ]),
-        r("span", je, h(d.incrementlabel), 1)
-      ], 8, Oe)),
-      d.readonly ? v("", !0) : (l(), n("button", {
+        d("span", We, f(c.incrementlabel), 1)
+      ], 8, Ee)),
+      c.readonly ? h("", !0) : (l(), n("button", {
         key: 1,
         type: "button",
-        "aria-controls": d.id,
+        "aria-controls": c.id,
         class: "mc-quantity-selector__button mc-quantity-selector__button--decrease",
         tabindex: "-1",
-        disabled: d.disabled || e.value === d.min,
+        disabled: c.disabled || e.value === c.min,
         onClick: u
       }, [
-        r("span", Se, [
-          V(Ce)
+        d("span", Ke, [
+          V(Ae)
         ]),
-        r("span", Pe, h(d.decrementLabel), 1)
-      ], 8, qe))
+        d("span", Xe, f(c.decrementLabel), 1)
+      ], 8, Je))
     ], 2));
   }
-}), ga = /* @__PURE__ */ _(Fe, [["__scopeId", "data-v-a732650a"]]), De = { class: "mc-radio" }, Ge = ["id", "name", "checked", "disabled", "aria-invalid"], Re = ["for"], Ne = /* @__PURE__ */ f({
+}), ns = /* @__PURE__ */ _(Ye, [["__scopeId", "data-v-a732650a"]]), xe = { class: "mc-radio" }, ea = ["id", "name", "checked", "disabled", "aria-invalid"], aa = ["for"], sa = /* @__PURE__ */ y({
   __name: "MRadio",
   props: {
     id: {},
@@ -565,11 +701,11 @@ const Ce = /* @__PURE__ */ _(Me, [["render", we]]), Le = ["id", "name", "disable
   },
   emits: ["update:modelValue"],
   setup(o, { emit: a }) {
-    const t = o, e = m(() => ({
+    const t = o, e = v(() => ({
       "is-invalid": t.isInvalid
     })), i = a;
-    return (s, u) => (l(), n("div", De, [
-      r("input", g({
+    return (s, u) => (l(), n("div", xe, [
+      d("input", k({
         id: s.id,
         type: "radio",
         class: ["mc-radio__input", e.value],
@@ -578,16 +714,16 @@ const Ce = /* @__PURE__ */ _(Me, [["render", we]]), Le = ["id", "name", "disable
         disabled: s.disabled,
         "aria-invalid": s.isInvalid
       }, s.$attrs, {
-        onChange: u[0] || (u[0] = (c) => i("update:modelValue", c.target.checked))
-      }), null, 16, Ge),
+        onChange: u[0] || (u[0] = (r) => i("update:modelValue", r.target.checked))
+      }), null, 16, ea),
       s.label ? (l(), n("label", {
         key: 0,
         for: s.id,
         class: "mc-radio__label"
-      }, h(s.label), 9, Re)) : v("", !0)
+      }, f(s.label), 9, aa)) : h("", !0)
     ]));
   }
-}), Ue = /* @__PURE__ */ _(Ne, [["__scopeId", "data-v-da78938c"]]), Ze = /* @__PURE__ */ f({
+}), ta = /* @__PURE__ */ _(sa, [["__scopeId", "data-v-da78938c"]]), la = /* @__PURE__ */ y({
   __name: "MRadioGroup",
   props: {
     name: {},
@@ -598,32 +734,32 @@ const Ce = /* @__PURE__ */ _(Me, [["render", we]]), Le = ["id", "name", "disable
   },
   emits: ["update:modelValue"],
   setup(o, { emit: a }) {
-    const t = o, e = m(() => ({
+    const t = o, e = v(() => ({
       "mc-field__container--inline": t.inline
-    })), i = m(() => ({
+    })), i = v(() => ({
       "mc-field__container--inline__item": t.inline
     })), s = a;
-    return (u, c) => (l(), n("div", {
-      class: y(["mc-field__container", e.value])
+    return (u, r) => (l(), n("div", {
+      class: $(["mc-field__container", e.value])
     }, [
-      (l(!0), n(M, null, z(u.options, (p) => (l(), w(Ue, {
+      (l(!0), n(B, null, C(u.options, (p) => (l(), w(ta, {
         id: p.id,
         key: p.id,
         label: p.label,
         "is-invalid": u.isInvalid,
         name: u.name,
-        class: y(["mc-field__item", i.value]),
+        class: $(["mc-field__item", i.value]),
         "model-value": u.modelValue === p.value,
         disabled: p.disabled,
-        "onUpdate:modelValue": (d) => d ? s("update:modelValue", p.value) : null
+        "onUpdate:modelValue": (c) => c ? s("update:modelValue", p.value) : null
       }, null, 8, ["id", "label", "is-invalid", "name", "class", "model-value", "disabled", "onUpdate:modelValue"]))), 128))
     ], 2));
   }
-}), ka = /* @__PURE__ */ _(Ze, [["__scopeId", "data-v-d2f5e103"]]), Ae = ["id", "name", "value", "disabled"], Ee = {
+}), os = /* @__PURE__ */ _(la, [["__scopeId", "data-v-d2f5e103"]]), na = ["id", "name", "value", "disabled"], oa = {
   key: 0,
   value: "",
   disabled: ""
-}, He = ["value", "disabled"], Qe = /* @__PURE__ */ f({
+}, ia = ["value", "disabled"], da = /* @__PURE__ */ y({
   __name: "MSelect",
   props: {
     id: {},
@@ -638,61 +774,245 @@ const Ce = /* @__PURE__ */ _(Me, [["render", we]]), Le = ["id", "name", "disable
   },
   emits: ["update:modelValue"],
   setup(o, { emit: a }) {
-    const t = o, e = m(() => ({
+    const t = o, e = v(() => ({
       [`mc-select--${t.size}`]: t.size && t.size != "m",
       "mc-select--readonly": t.readonly,
       "is-invalid": t.isInvalid
     })), i = a;
-    return (s, u) => (l(), n("select", g({
+    return (s, u) => (l(), n("select", k({
       id: s.id,
       class: ["mc-select", e.value],
       name: s.name,
       value: s.modelValue,
       disabled: s.disabled
     }, s.$attrs, {
-      onChange: u[0] || (u[0] = (c) => i("update:modelValue", c.target.value))
+      onChange: u[0] || (u[0] = (r) => i("update:modelValue", r.target.value))
     }), [
-      s.placeholder ? (l(), n("option", Ee, " -- " + h(s.placeholder) + " -- ", 1)) : v("", !0),
-      (l(!0), n(M, null, z(s.options, (c, p) => (l(), n("option", g({
+      s.placeholder ? (l(), n("option", oa, " -- " + f(s.placeholder) + " -- ", 1)) : h("", !0),
+      (l(!0), n(B, null, C(s.options, (r, p) => (l(), n("option", k({
         key: p,
-        value: c.value,
+        value: r.value,
         ref_for: !0
-      }, c.attributes, {
-        disabled: c.disabled
-      }), h(c.text), 17, He))), 128))
-    ], 16, Ae));
+      }, r.attributes, {
+        disabled: r.disabled
+      }), f(r.text), 17, ia))), 128))
+    ], 16, na));
   }
-}), Va = /* @__PURE__ */ _(Qe, [["__scopeId", "data-v-68c735e4"]]), Je = /* @__PURE__ */ f({
+}), is = /* @__PURE__ */ _(da, [["__scopeId", "data-v-68c735e4"]]), ra = /* @__PURE__ */ y({
   __name: "MStatusDot",
   props: {
-    appearance: { default: "info" }
+    status: { default: "info" },
+    size: {}
   },
   setup(o) {
-    const a = o, t = m(() => ({
-      [`mc-status-dot--${a.appearance}`]: a.appearance && a.appearance != "info"
+    const a = o, t = v(() => ({
+      [`mc-status-dot--${a.status}`]: a.status && a.status != "info",
+      [`mc-status-dot--${a.size}`]: a.size && a.size != "m"
     }));
     return (e, i) => (l(), n("span", {
-      class: y(["mc-status-dot", t.value])
+      class: $(["mc-status-dot", t.value])
     }, null, 2));
   }
-}), Ke = /* @__PURE__ */ _(Je, [["__scopeId", "data-v-1d06a91e"]]), We = { class: "mc-status-badge__label" }, Xe = /* @__PURE__ */ f({
+}), ca = /* @__PURE__ */ _(ra, [["__scopeId", "data-v-417b563f"]]), ua = { class: "mc-status-badge__label" }, pa = /* @__PURE__ */ y({
   __name: "MStatusBadge",
   props: {
     label: {},
-    appearance: { default: "info" }
+    status: { default: "info" }
   },
   setup(o) {
-    const a = o, t = m(() => ({
-      [`mc-status-badge--${a.appearance}`]: a.appearance && a.appearance != "info"
+    const a = o, t = v(() => ({
+      [`mc-status-badge--${a.status}`]: a.status && a.status != "info"
     }));
     return (e, i) => (l(), n("div", {
-      class: y(["mc-status-badge", t.value])
+      class: $(["mc-status-badge", t.value])
     }, [
-      V(Ke, { appearance: e.appearance }, null, 8, ["appearance"]),
-      r("span", We, h(e.label), 1)
+      V(ca, { status: e.status }, null, 8, ["status"]),
+      d("span", ua, f(e.label), 1)
     ], 2));
   }
-}), Ia = /* @__PURE__ */ _(Xe, [["__scopeId", "data-v-95fd9bb1"]]), Ye = ["id", "aria-invalid", "value", "name", "placeholder", "disabled", "minlength", "maxlength", "rows", "readonly"], xe = /* @__PURE__ */ f({
+}), ds = /* @__PURE__ */ _(pa, [["__scopeId", "data-v-3e437a03"]]), ma = {
+  name: "Cross20",
+  props: {
+    /**
+     * Icon color
+     */
+    color: {
+      type: String,
+      default: "currentColor"
+    }
+  }
+}, _a = {
+  xmlns: "http://www.w3.org/2000/svg",
+  viewBox: "0 0 20 20"
+};
+function va(o, a, t, e, i, s) {
+  return l(), n("svg", _a, a[0] || (a[0] = [
+    d("g", { "clip-path": "url(#a)" }, [
+      d("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),
+    d("defs", null, [
+      d("clipPath", { id: "a" }, [
+        d("rect", {
+          width: "20",
+          height: "20",
+          fill: "#fff"
+        })
+      ])
+    ], -1)
+  ]));
+}
+const ba = /* @__PURE__ */ _(ma, [["render", va]]), fa = {
+  name: "InfoCircle32",
+  props: {
+    /**
+     * Icon color
+     */
+    color: {
+      type: String,
+      default: "currentColor"
+    }
+  }
+}, ha = {
+  xmlns: "http://www.w3.org/2000/svg",
+  viewBox: "0 0 32 32"
+};
+function $a(o, a, t, e, i, s) {
+  return l(), n("svg", ha, a[0] || (a[0] = [
+    d("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"
+    }, null, -1)
+  ]));
+}
+const ya = /* @__PURE__ */ _(fa, [["render", $a]]), ga = {
+  name: "WarningCircle32",
+  props: {
+    /**
+     * Icon color
+     */
+    color: {
+      type: String,
+      default: "currentColor"
+    }
+  }
+}, Va = {
+  xmlns: "http://www.w3.org/2000/svg",
+  viewBox: "0 0 32 32"
+};
+function ka(o, a, t, e, i, s) {
+  return l(), n("svg", Va, a[0] || (a[0] = [
+    d("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"
+    }, null, -1)
+  ]));
+}
+const Ia = /* @__PURE__ */ _(ga, [["render", ka]]), wa = {
+  name: "CrossCircle32",
+  props: {
+    /**
+     * Icon color
+     */
+    color: {
+      type: String,
+      default: "currentColor"
+    }
+  }
+}, Ba = {
+  xmlns: "http://www.w3.org/2000/svg",
+  viewBox: "0 0 32 32"
+};
+function Ca(o, a, t, e, i, s) {
+  return l(), n("svg", Ba, a[0] || (a[0] = [
+    d("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"
+    }, null, -1)
+  ]));
+}
+const Ma = /* @__PURE__ */ _(wa, [["render", Ca]]), za = {
+  name: "CheckCircle32",
+  props: {
+    /**
+     * Icon color
+     */
+    color: {
+      type: String,
+      default: "currentColor"
+    }
+  }
+}, La = {
+  xmlns: "http://www.w3.org/2000/svg",
+  viewBox: "0 0 32 32"
+};
+function Sa(o, a, t, e, i, s) {
+  return l(), n("svg", La, a[0] || (a[0] = [
+    d("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"
+    }, null, -1)
+  ]));
+}
+const Oa = /* @__PURE__ */ _(za, [["render", Sa]]), ja = { class: "mc-status-notification__content" }, Ta = { class: "mc-status-notification__title" }, qa = { class: "mc-status-notification__message" }, Za = {
+  key: 0,
+  class: "mc-status-notification__footer"
+}, Pa = /* @__PURE__ */ y({
+  __name: "MStatusNotification",
+  props: {
+    title: {},
+    description: {},
+    status: { default: "info" },
+    closable: { type: Boolean }
+  },
+  emits: ["close"],
+  setup(o, { emit: a }) {
+    const t = o, e = v(() => ({
+      [`mc-status-notification--${t.status}`]: t.status && t.status != "info"
+    })), i = v(() => {
+      switch (t.status) {
+        case "success":
+          return Oa;
+        case "warning":
+          return Ia;
+        case "error":
+          return Ma;
+        case "info":
+        default:
+          return ya;
+      }
+    }), s = a;
+    return (u, r) => (l(), n("section", {
+      class: $(["mc-status-notification", e.value]),
+      role: "status"
+    }, [
+      (l(), w(j(i.value), {
+        class: "mc-status-notification__icon",
+        "aria-hidden": "true"
+      })),
+      d("div", ja, [
+        d("h2", Ta, f(u.title), 1),
+        d("p", qa, f(u.description), 1),
+        u.$slots.footer ? (l(), n("div", Za, [
+          g(u.$slots, "footer", {}, void 0, !0)
+        ])) : h("", !0)
+      ]),
+      u.closable ? (l(), n("button", {
+        key: 0,
+        class: "mc-status-notification-closable__close",
+        onClick: r[0] || (r[0] = (p) => s("close"))
+      }, [
+        V(ba, {
+          class: "mc-status-notification-closable__icon",
+          "aria-hidden": "true"
+        }),
+        r[1] || (r[1] = d("span", { class: "mc-status-notification-closable__text" }, "Close", -1))
+      ])) : h("", !0)
+    ], 2));
+  }
+}), rs = /* @__PURE__ */ _(Pa, [["__scopeId", "data-v-d6e3be16"]]), Ga = ["id", "aria-invalid", "value", "name", "placeholder", "disabled", "minlength", "maxlength", "rows", "readonly"], Ua = /* @__PURE__ */ y({
   __name: "MTextArea",
   props: {
     id: {},
@@ -708,10 +1028,10 @@ const Ce = /* @__PURE__ */ _(Me, [["render", we]]), Le = ["id", "name", "disable
   },
   emits: ["update:modelValue"],
   setup(o, { emit: a }) {
-    const t = o, e = m(() => ({
+    const t = o, e = v(() => ({
       "is-invalid": t.isInvalid
     })), i = a;
-    return (s, u) => (l(), n("textarea", g({
+    return (s, u) => (l(), n("textarea", k({
       id: s.id,
       class: ["mc-textarea", e.value],
       "aria-invalid": s.isInvalid,
@@ -724,39 +1044,16 @@ const Ce = /* @__PURE__ */ _(Me, [["render", we]]), Le = ["id", "name", "disable
       rows: s.rows,
       readonly: s.readonly
     }, s.$attrs, {
-      onInput: u[0] || (u[0] = (c) => i("update:modelValue", c.target.value))
-    }), null, 16, Ye));
-  }
-}), Ba = /* @__PURE__ */ _(xe, [["__scopeId", "data-v-8184b69c"]]), ea = {
-  name: "CrossCircleFilled24",
-  props: {
-    /**
-     * Icon color
-     */
-    color: {
-      type: String,
-      default: "currentColor"
-    }
+      onInput: u[0] || (u[0] = (r) => i("update:modelValue", r.target.value))
+    }), null, 16, Ga));
   }
-}, aa = {
-  xmlns: "http://www.w3.org/2000/svg",
-  viewBox: "0 0 24 24"
-};
-function sa(o, a, t, e, i, s) {
-  return l(), n("svg", aa, a[0] || (a[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"
-    }, null, -1)
-  ]));
-}
-const ta = /* @__PURE__ */ _(ea, [["render", sa]]), la = {
+}), cs = /* @__PURE__ */ _(Ua, [["__scopeId", "data-v-8184b69c"]]), Da = {
   key: 0,
   class: "mc-text-input__icon"
-}, na = ["id", "value", "type", "name", "placeholder", "disabled", "aria-invalid", "readonly"], oa = {
+}, Fa = ["id", "value", "type", "name", "placeholder", "disabled", "aria-invalid", "readonly"], Na = {
   key: 1,
   class: "mc-controls-options"
-}, ia = /* @__PURE__ */ f({
+}, Ra = /* @__PURE__ */ y({
   __name: "MTextInput",
   props: {
     id: {},
@@ -773,47 +1070,47 @@ const ta = /* @__PURE__ */ _(ea, [["render", sa]]), la = {
   },
   emits: ["update:modelValue"],
   setup(o, { emit: a }) {
-    const t = o, e = m(() => ({
+    const t = o, e = v(() => ({
       [`mc-text-input--${t.size}`]: t.size && t.size != "m",
       "is-invalid": t.isInvalid
-    })), i = B(t.modelValue), s = () => {
+    })), i = I(t.modelValue), s = () => {
       i.value = "", u("update:modelValue", "");
     }, u = a;
-    return (c, p) => (l(), n("div", {
-      class: y(["mc-text-input", e.value])
+    return (r, p) => (l(), n("div", {
+      class: $(["mc-text-input", e.value])
     }, [
-      c.$slots.icon ? (l(), n("span", la, [
-        $(c.$slots, "icon", {}, void 0, !0)
-      ])) : v("", !0),
-      r("input", g({
-        id: c.id,
+      r.$slots.icon ? (l(), n("span", Da, [
+        g(r.$slots, "icon", {}, void 0, !0)
+      ])) : h("", !0),
+      d("input", k({
+        id: r.id,
         class: "mc-text-input__control",
         value: i.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] = (d) => u("update:modelValue", d.target.value))
-      }), null, 16, na),
-      c.isClearable && i.value ? (l(), n("div", oa, [
-        r("button", {
+        type: r.inputType,
+        name: r.name,
+        placeholder: r.placeholder,
+        disabled: r.disabled,
+        "aria-invalid": r.isInvalid,
+        readonly: r.readonly
+      }, r.$attrs, {
+        onInput: p[0] || (p[0] = (c) => u("update:modelValue", c.target.value))
+      }), null, 16, Fa),
+      r.isClearable && i.value ? (l(), n("div", Na, [
+        d("button", {
           type: "button",
           class: "mc-controls-options__button",
           onClick: s
         }, [
-          V(ta, {
+          V(q, {
             class: "mc-controls-options__icon",
             "aria-hidden": "true"
           }),
-          p[1] || (p[1] = r("span", { class: "mc-controls-options__label" }, "{clearLabel}", -1))
+          p[1] || (p[1] = d("span", { class: "mc-controls-options__label" }, "{clearLabel}", -1))
         ])
-      ])) : v("", !0)
+      ])) : h("", !0)
     ], 2));
   }
-}), Ma = /* @__PURE__ */ _(ia, [["__scopeId", "data-v-38f67338"]]), da = ["for"], ra = ["id", "name", "checked", "disabled"], ca = ["for"], ua = /* @__PURE__ */ f({
+}), us = /* @__PURE__ */ _(Ra, [["__scopeId", "data-v-38f67338"]]), Aa = ["for"], Ha = ["id", "name", "checked", "disabled"], Ea = ["for"], Qa = /* @__PURE__ */ y({
   __name: "MToggle",
   props: {
     id: {},
@@ -825,17 +1122,17 @@ const ta = /* @__PURE__ */ _(ea, [["render", sa]]), la = {
   },
   emits: ["update:modelValue"],
   setup(o, { emit: a }) {
-    const t = o, e = m(() => ({
+    const t = o, e = v(() => ({
       [`mc-toggle--${t.size}`]: t.size && t.size != "s"
     })), i = a;
     return (s, u) => (l(), n("div", {
-      class: y(["mc-toggle", e.value])
+      class: $(["mc-toggle", e.value])
     }, [
-      r("label", {
+      d("label", {
         class: "mc-toggle__container",
         for: s.id
       }, [
-        r("input", g({
+        d("input", k({
           id: s.id,
           type: "checkbox",
           class: "mc-toggle__input",
@@ -843,35 +1140,81 @@ const ta = /* @__PURE__ */ _(ea, [["render", sa]]), la = {
           checked: s.modelValue,
           disabled: s.disabled
         }, s.$attrs, {
-          onChange: u[0] || (u[0] = (c) => i("update:modelValue", c.target.checked))
-        }), null, 16, ra),
+          onChange: u[0] || (u[0] = (r) => i("update:modelValue", r.target.checked))
+        }), null, 16, Ha),
         s.label ? (l(), n("span", {
           key: 0,
           for: s.id,
           class: "mc-toggle__label"
-        }, h(s.label), 9, ca)) : v("", !0)
-      ], 8, da)
+        }, f(s.label), 9, Ea)) : h("", !0)
+      ], 8, Aa)
+    ], 2));
+  }
+}), Wa = /* @__PURE__ */ _(Qa, [["__scopeId", "data-v-5be734e7"]]), Ja = /* @__PURE__ */ y({
+  __name: "MToggleGroup",
+  props: {
+    name: {},
+    modelValue: {},
+    options: {},
+    inline: { type: Boolean }
+  },
+  emits: ["update:modelValue"],
+  setup(o, { emit: a }) {
+    const t = o, e = I([]);
+    O(
+      () => t.modelValue,
+      (p) => {
+        e.value = p || [];
+      },
+      { immediate: !0 }
+    );
+    const i = (p, c) => {
+      let m = [...e.value];
+      p && !m.includes(c) ? m.push(c) : m = m.filter((b) => b !== c), r("update:modelValue", m), e.value = m;
+    }, s = v(() => ({
+      "mc-field__container--inline": t.inline
+    })), u = v(() => ({
+      "mc-field__container--inline__item": t.inline
+    })), r = a;
+    return (p, c) => (l(), n("div", {
+      class: $(s.value)
+    }, [
+      (l(!0), n(B, null, C(p.options, (m) => (l(), w(Wa, {
+        id: m.id,
+        key: m.id,
+        label: m.label,
+        "is-invalid": m.isInvalid,
+        name: p.name,
+        class: $(u.value),
+        "model-value": p.modelValue ? p.modelValue.includes(m.value) : void 0,
+        disabled: m.disabled,
+        "onUpdate:modelValue": (b) => i(b, m.value)
+      }, null, 8, ["id", "label", "is-invalid", "name", "class", "model-value", "disabled", "onUpdate:modelValue"]))), 128))
     ], 2));
   }
-}), za = /* @__PURE__ */ _(ua, [["__scopeId", "data-v-5be734e7"]]);
+}), ps = /* @__PURE__ */ _(Ja, [["__scopeId", "data-v-c6b10172"]]);
 export {
-  ma as MBadge,
-  _a as MButton,
-  Y as MCheckbox,
-  va as MCheckboxGroup,
-  ba as MField,
-  fa as MFieldGroup,
-  ha as MIconButton,
-  ya as MLink,
-  N as MLoader,
-  $a as MOverlay,
-  ga as MQuantitySelector,
-  Ue as MRadio,
-  ka as MRadioGroup,
-  Va as MSelect,
-  Ia as MStatusBadge,
-  Ba as MTextArea,
-  Ma as MTextInput,
-  za as MToggle
+  Xa as MBadge,
+  Ya as MBreadcrumb,
+  ne as MButton,
+  ce as MCheckbox,
+  xa as MCheckboxGroup,
+  es as MField,
+  as as MFieldGroup,
+  ss as MIconButton,
+  A as MLink,
+  Y as MLoader,
+  ts as MOverlay,
+  ls as MPasswordInput,
+  ns as MQuantitySelector,
+  ta as MRadio,
+  os as MRadioGroup,
+  is as MSelect,
+  ds as MStatusBadge,
+  rs as MStatusNotification,
+  cs as MTextArea,
+  us as MTextInput,
+  Wa as MToggle,
+  ps as MToggleGroup
 };
 //# sourceMappingURL=mozaic-vue.js.map