@mozaic-ds/vue 2.1.0 → 2.2.0

package/dist/mozaic-vue.js

@@ -1,4 +1,4 @@
-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";
+import { defineComponent as $, computed as v, createBlock as B, openBlock as l, resolveDynamicComponent as A, normalizeClass as g, withCtx as C, createElementBlock as n, createCommentVNode as h, createElementVNode as r, renderSlot as V, Fragment as O, renderList as S, createVNode as w, createTextVNode as P, toDisplayString as f, normalizeStyle as J, mergeProps as I, ref as z, watch as q, withKeys as R, withDirectives as H, vModelDynamic as X, nextTick as Y, vModelText as Z } from "vue";
 const x = {
   key: 0,
   class: "mc-link__icon",
@@ -19,7 +19,7 @@ const x = {
     router: { type: Boolean }
   },
   setup(d) {
-    const e = d, a = b(() => ({
+    const e = d, a = v(() => ({
       [`mc-link--${e.appearance}`]: e.appearance && e.appearance != "standard",
       [`mc-link--${e.size}`]: e.size && e.size != "s",
       "mc-link--inline": e.inline,
@@ -57,7 +57,7 @@ const x = {
     links: {}
   },
   setup(d) {
-    const e = d, a = b(() => ({
+    const e = d, a = v(() => ({
       [`mc-breadcrumb--${e.appearance}`]: e.appearance && e.appearance != "standard"
     })), t = (o) => {
       var s;
@@ -91,7 +91,7 @@ const x = {
       ])
     ], 2));
   }
-}), ys = /* @__PURE__ */ _(oe, [["__scopeId", "data-v-41249412"]]), ne = { class: "mc-loader__spinner" }, ie = ["viewBox"], de = ["r"], re = {
+}), Vs = /* @__PURE__ */ _(oe, [["__scopeId", "data-v-41249412"]]), ne = { class: "mc-loader__spinner" }, ie = ["viewBox"], de = ["r"], re = {
   key: 0,
   class: "mc-loader__text",
   role: "status"
@@ -103,11 +103,11 @@ const x = {
     text: {}
   },
   setup(d) {
-    const e = d, a = b(() => ({
+    const e = d, a = v(() => ({
       [`mc-loader--${e.size}`]: e.size && e.size !== "m",
       [`mc-loader--${e.appearance}`]: e.appearance && e.appearance !== "standard",
       "mc-loader--text-visible": e.text
-    })), t = b(() => {
+    })), t = v(() => {
       let s;
       switch (e.size) {
         case "s":
@@ -120,7 +120,7 @@ const x = {
           s = "0 0 32 32";
       }
       return s;
-    }), o = b(() => {
+    }), o = v(() => {
       let s;
       switch (e.size) {
         case "s":
@@ -181,7 +181,7 @@ const x = {
     isLoading: { type: Boolean }
   },
   setup(d) {
-    const e = d, a = b(() => ({
+    const e = d, a = v(() => ({
       [`mc-button--${e.appearance}`]: e.appearance && e.appearance != "standard",
       [`mc-button--${e.size}`]: e.size && e.size != "m",
       "mc-button--ghost": e.ghost,
@@ -231,7 +231,7 @@ const x = {
   },
   emits: ["update:modelValue"],
   setup(d, { emit: e }) {
-    const a = d, t = b(() => ({
+    const a = d, t = v(() => ({
       "is-invalid": a.isInvalid
     })), o = e;
     return (s, i) => (l(), n("div", fe, [
@@ -274,10 +274,10 @@ const x = {
     );
     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(() => ({
+      p && !u.includes(m) ? u.push(m) : u = u.filter((b) => b !== m), c("update:modelValue", u), t.value = u;
+    }, s = v(() => ({
       "mc-field__container--inline": a.inline
-    })), i = b(() => ({
+    })), i = v(() => ({
       "mc-field__container--inline__item": a.inline
     })), c = e;
     return (p, m) => (l(), n("div", {
@@ -292,11 +292,11 @@ const x = {
         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)
+        "onUpdate:modelValue": (b) => o(b, 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 = {
+}), Is = /* @__PURE__ */ _(ke, [["__scopeId", "data-v-8ee4699f"]]), we = {
   name: "CrossCircleFilled24",
   props: {
     /**
@@ -341,7 +341,7 @@ const F = /* @__PURE__ */ _(we, [["render", Ie]]), Be = ["id", "value", "name",
   },
   emits: ["update:modelValue"],
   setup(d, { emit: e }) {
-    const a = d, t = b(() => ({
+    const a = d, t = v(() => ({
       [`mc-text-input--${a.size} mc-datepicker--${a.size}`]: a.size && a.size != "m",
       "is-invalid": a.isInvalid
     })), o = z(a.modelValue), s = () => {
@@ -377,7 +377,7 @@ const F = /* @__PURE__ */ _(we, [["render", Ie]]), Be = ["id", "value", "name",
       ])) : h("", !0)
     ], 2));
   }
-}), ks = /* @__PURE__ */ _(ze, [["__scopeId", "data-v-0c5cddc2"]]), Le = { class: "mc-divider" }, Te = /* @__PURE__ */ $({
+}), Bs = /* @__PURE__ */ _(ze, [["__scopeId", "data-v-0c5cddc2"]]), Le = { class: "mc-divider" }, Te = /* @__PURE__ */ $({
   __name: "MDivider",
   props: {
     orientation: { default: "horizontal" },
@@ -385,7 +385,7 @@ const F = /* @__PURE__ */ _(we, [["render", Ie]]), Be = ["id", "value", "name",
     size: { default: "s" }
   },
   setup(d) {
-    const e = d, a = b(() => ({
+    const e = d, a = v(() => ({
       [`mc-divider-${e.orientation}`]: e.orientation,
       [`mc-divider-horizontal--${e.style}`]: e.style && e.style != "primary",
       [`mc-divider-horizontal--${e.size}`]: e.size && e.size != "s"
@@ -462,7 +462,7 @@ const E = /* @__PURE__ */ _(Pe, [["render", Ne]]), Ae = ["disabled", "type"], Re
     type: { default: "button" }
   },
   setup(d) {
-    const e = d, a = b(() => ({
+    const e = d, a = v(() => ({
       [`mc-button--${e.appearance}`]: e.appearance && e.appearance != "standard",
       [`mc-button--${e.size}`]: e.size && e.size != "m",
       "mc-button--ghost": e.ghost,
@@ -524,7 +524,7 @@ const E = /* @__PURE__ */ _(Pe, [["render", Ne]]), Ae = ["disabled", "type"], Re
   },
   emits: ["update:open", "back"],
   setup(d, { emit: e }) {
-    const a = d, t = b(() => ({
+    const a = d, t = v(() => ({
       "is-open": a.open,
       "mc-drawer--extend": a.extended,
       [`mc-drawer--${a.position}`]: a.position && a.position != "right"
@@ -595,7 +595,7 @@ const E = /* @__PURE__ */ _(Pe, [["render", Ne]]), Ae = ["disabled", "type"], Re
       _: 3
     }, 8, ["is-visible"]));
   }
-}), ws = /* @__PURE__ */ _(xe, [["__scopeId", "data-v-673a796c"]]), ea = { class: "mc-field" }, aa = ["for"], ta = {
+}), Cs = /* @__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__ */ $({
@@ -612,7 +612,7 @@ const E = /* @__PURE__ */ _(Pe, [["render", Ne]]), Ae = ["disabled", "type"], Re
     message: {}
   },
   setup(d) {
-    const e = d, a = b(() => ({
+    const e = d, a = v(() => ({
       "is-valid": e.isValid,
       "is-invalid": e.isInvalid
     }));
@@ -639,7 +639,7 @@ const E = /* @__PURE__ */ _(Pe, [["render", Ne]]), Ae = ["disabled", "type"], Re
       }, f(t.message), 11, oa)) : h("", !0)
     ]));
   }
-}), Vs = /* @__PURE__ */ _(na, [["__scopeId", "data-v-ead078c4"]]), ia = { class: "mc-field--group" }, da = ["for"], ra = {
+}), Ms = /* @__PURE__ */ _(na, [["__scopeId", "data-v-ead078c4"]]), ia = { class: "mc-field--group" }, da = ["for"], ra = {
   key: 0,
   class: "mc-field__requirement"
 }, ca = {
@@ -657,7 +657,7 @@ const E = /* @__PURE__ */ _(Pe, [["render", Ne]]), Ae = ["disabled", "type"], Re
     message: {}
   },
   setup(d) {
-    const e = d, a = b(() => ({
+    const e = d, a = v(() => ({
       "is-valid": e.isValid,
       "is-invalid": e.isInvalid
     }));
@@ -679,14 +679,14 @@ const E = /* @__PURE__ */ _(Pe, [["render", Ne]]), Ae = ["disabled", "type"], Re
       }, f(t.message), 3)) : h("", !0)
     ]));
   }
-}), Is = /* @__PURE__ */ _(pa, [["__scopeId", "data-v-fc0c08dc"]]), ma = { class: "mc-flag__label" }, _a = /* @__PURE__ */ $({
+}), zs = /* @__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(() => ({
+    const e = d, a = v(() => ({
       [`mc-flag--${e.appearance}`]: e.appearance && e.appearance != "standard"
     }));
     return (t, o) => (l(), n("div", {
@@ -695,7 +695,7 @@ const E = /* @__PURE__ */ _(Pe, [["render", Ne]]), Ae = ["disabled", "type"], Re
       r("span", ma, f(t.label), 1)
     ], 2));
   }
-}), Bs = /* @__PURE__ */ _(_a, [["__scopeId", "data-v-9245f79e"]]), va = ["aria-label"], ba = /* @__PURE__ */ $({
+}), Ls = /* @__PURE__ */ _(_a, [["__scopeId", "data-v-9245f79e"]]), va = ["aria-label"], ba = /* @__PURE__ */ $({
   __name: "MLoadingOverlay",
   props: {
     isVisible: { type: Boolean },
@@ -718,7 +718,7 @@ const E = /* @__PURE__ */ _(Pe, [["render", Ne]]), Ae = ["disabled", "type"], Re
       ], 16, va)
     ], 2));
   }
-}), Cs = /* @__PURE__ */ _(ba, [["__scopeId", "data-v-eae6b1f2"]]), fa = ["aria-modal", "aria-hidden"], ha = {
+}), Ts = /* @__PURE__ */ _(ba, [["__scopeId", "data-v-eae6b1f2"]]), fa = ["aria-modal", "aria-hidden"], ha = {
   class: "mc-modal__dialog",
   role: "document"
 }, $a = { class: "mc-modal__header" }, ya = {
@@ -740,7 +740,7 @@ const E = /* @__PURE__ */ _(Pe, [["render", Ne]]), Ae = ["disabled", "type"], Re
   },
   emits: ["update:open"],
   setup(d, { emit: e }) {
-    const a = d, t = b(() => ({
+    const a = d, t = v(() => ({
       "is-open": a.open
     }));
     q(
@@ -802,7 +802,7 @@ const E = /* @__PURE__ */ _(Pe, [["render", Ne]]), Ae = ["disabled", "type"], Re
       _: 3
     }, 8, ["is-visible"]));
   }
-}), Ms = /* @__PURE__ */ _(Ia, [["__scopeId", "data-v-20ce36b2"]]), Ba = /* @__PURE__ */ $({
+}), js = /* @__PURE__ */ _(Ia, [["__scopeId", "data-v-20ce36b2"]]), Ba = /* @__PURE__ */ $({
   __name: "MNumberBadge",
   props: {
     label: {},
@@ -810,7 +810,7 @@ const E = /* @__PURE__ */ _(Pe, [["render", Ne]]), Ae = ["disabled", "type"], Re
     size: { default: "s" }
   },
   setup(d) {
-    const e = d, a = b(() => ({
+    const e = d, a = v(() => ({
       [`mc-number-badge--${e.appearance}`]: e.appearance && e.appearance != "standard",
       [`mc-number-badge--${e.size}`]: e.size && e.size != "s"
     }));
@@ -837,7 +837,7 @@ const E = /* @__PURE__ */ _(Pe, [["render", Ne]]), Ae = ["disabled", "type"], Re
   },
   emits: ["update:modelValue"],
   setup(d, { emit: e }) {
-    const a = d, t = b(() => ({
+    const a = d, t = v(() => ({
       [`mc-select--${a.size}`]: a.size && a.size != "m",
       "mc-select--readonly": a.readonly,
       "is-invalid": a.isInvalid
@@ -940,22 +940,22 @@ const U = /* @__PURE__ */ _(Da, [["render", Fa]]), Na = {
     q(o, (u) => {
       u !== a.modelValue && t("update:modelValue", u);
     });
-    const s = b(
+    const s = v(
       () => a.options.findIndex((u) => u.value === o.value)
-    ), i = b(() => s.value === 0), c = b(
+    ), i = v(() => s.value === 0), c = v(
       () => s.value === a.options.length - 1
     ), p = () => {
       const u = a.options.findIndex(
-        (v) => v.value === o.value
+        (b) => b.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
+        (b) => b.value === o.value
       );
       u < a.options.length - 1 && (o.value = a.options[u + 1].value, t("update:modelValue", a.options[u + 1].value));
     };
-    return (u, v) => {
+    return (u, b) => {
       var L;
       return l(), n("nav", Na, [
         u.compact ? (l(), B(D, {
@@ -987,8 +987,8 @@ const U = /* @__PURE__ */ _(Da, [["render", Fa]]), Na = {
             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)))
+              b[0] || (b[0] = (y) => o.value = y),
+              b[1] || (b[1] = (y) => t("update:modelValue", Number(y)))
             ],
             options: u.options,
             "aria-label": u.selectLabel
@@ -1021,7 +1021,7 @@ const U = /* @__PURE__ */ _(Da, [["render", Fa]]), Na = {
       ]);
     };
   }
-}), zs = /* @__PURE__ */ _(Ga, [["__scopeId", "data-v-3b9257ac"]]), Ua = ["id", "type", "name", "placeholder", "disabled", "aria-invalid", "readonly"], Ha = {
+}), Os = /* @__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__ */ $({
@@ -1040,32 +1040,32 @@ const U = /* @__PURE__ */ _(Da, [["render", Fa]]), Na = {
   },
   emits: ["update:modelValue"],
   setup(d, { emit: e }) {
-    const a = d, t = b(() => ({
+    const a = d, t = v(() => ({
       "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", {
+    }, p = v(() => s.value ? "text" : "password"), m = v(() => s.value ? "true" : "false"), u = e;
+    return (b, L) => (l(), n("div", {
       class: g(["mc-password-input mc-text-input", t.value])
     }, [
       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,
+        id: b.id,
         type: p.value,
-        name: v.name,
-        placeholder: v.placeholder,
-        disabled: v.disabled,
-        "aria-invalid": v.isInvalid,
-        readonly: v.readonly
-      }, v.$attrs, {
+        name: b.name,
+        placeholder: b.placeholder,
+        disabled: b.disabled,
+        "aria-invalid": b.isInvalid,
+        readonly: b.readonly
+      }, b.$attrs, {
         onInput: L[1] || (L[1] = (y) => u("update:modelValue", y.target.value))
       }), null, 16, Ua), [
         [X, o.value]
       ]),
-      v.isClearable && o.value ? (l(), n("div", Ha, [
+      b.isClearable && o.value ? (l(), n("div", Ha, [
         r("button", {
           class: "mc-controls-options__button",
           onClick: i
@@ -1074,26 +1074,26 @@ const U = /* @__PURE__ */ _(Da, [["render", Fa]]), Na = {
             class: "mc-controls-options__icon",
             "aria-hidden": "true"
           }),
-          r("span", Ka, f(v.clearLabel), 1)
+          r("span", Ka, f(b.clearLabel), 1)
         ])
       ])) : h("", !0),
       w(N, {
         ref: "button",
         role: "switch",
         "aria-checked": m.value,
-        disabled: v.disabled,
+        disabled: b.disabled,
         onClick: c,
         size: "s",
         ghost: ""
       }, {
         default: C(() => [
-          P(f(s.value ? v.buttonLabel.hide : v.buttonLabel.show), 1)
+          P(f(s.value ? b.buttonLabel.hide : b.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__ */ $({
+}), Ss = /* @__PURE__ */ _(Ea, [["__scopeId", "data-v-167f10e2"]]), Qa = ["id", "name", "disabled", "readonly", "value", "onInput", "onKeydown"], Wa = /* @__PURE__ */ $({
   __name: "MPincode",
   props: {
     id: {},
@@ -1106,7 +1106,7 @@ const U = /* @__PURE__ */ _(Da, [["render", Fa]]), Na = {
   },
   emits: ["update:modelValue"],
   setup(d, { emit: e }) {
-    const a = d, t = b(() => ({
+    const a = d, t = v(() => ({
       "is-invalid": a.isInvalid
     })), o = e, s = z(Array(a.length).fill("")), i = z([]), c = (y, k) => {
       i.value[k] = y;
@@ -1128,8 +1128,8 @@ const U = /* @__PURE__ */ _(Da, [["render", Fa]]), Na = {
       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) => {
+      y.key === "ArrowLeft" && k > 0 ? p(k - 1) : y.key === "ArrowRight" && k < a.length - 1 ? p(k + 1) : y.key === "Backspace" && b(y, k);
+    }, b = (y, k) => {
       s.value[k] === "" && k > 0 && (s.value[k - 1] = "", o("update:modelValue", s.value.join("")), p(k - 1));
     }, L = (y) => {
       var M;
@@ -1159,13 +1159,13 @@ const U = /* @__PURE__ */ _(Da, [["render", Fa]]), Na = {
       }, { ref_for: !0 }, y.$attrs, {
         onInput: (j) => m(j, M),
         onKeydown: [
-          R((j) => v(j, M), ["backspace"]),
+          R((j) => b(j, M), ["backspace"]),
           (j) => u(j, M)
         ]
       }), null, 16, Qa))), 128))
     ], 34));
   }
-}), Ts = /* @__PURE__ */ _(Wa, [["__scopeId", "data-v-b2202545"]]), Ja = {
+}), qs = /* @__PURE__ */ _(Wa, [["__scopeId", "data-v-b2202545"]]), Ja = {
   name: "More24",
   props: {
     /**
@@ -1241,7 +1241,7 @@ const tt = /* @__PURE__ */ _(xa, [["render", at]]), st = ["id", "name", "disable
     q(t, (m) => {
       m !== a.modelValue && p("update:modelValue", m);
     });
-    const o = b(() => ({
+    const o = v(() => ({
       [`mc-quantity-selector--${a.size}`]: a.size && a.size != "m",
       "is-invalid": a.isInvalid
     })), s = () => {
@@ -1256,7 +1256,7 @@ const tt = /* @__PURE__ */ _(xa, [["render", at]]), st = ["id", "name", "disable
     }, [
       H(r("input", I({
         id: m.id,
-        "onUpdate:modelValue": u[0] || (u[0] = (v) => t.value = v),
+        "onUpdate:modelValue": u[0] || (u[0] = (b) => t.value = b),
         class: "mc-quantity-selector__control",
         type: "number",
         name: m.name,
@@ -1270,7 +1270,7 @@ const tt = /* @__PURE__ */ _(xa, [["render", at]]), st = ["id", "name", "disable
         "aria-valuemax": m.max,
         "aria-valuenow": t.value
       }, m.$attrs, {
-        onChange: u[1] || (u[1] = (v) => c(Number(v.target.value)))
+        onChange: u[1] || (u[1] = (b) => c(Number(b.target.value)))
       }), null, 16, st), [
         [Z, t.value]
       ]),
@@ -1304,7 +1304,7 @@ const tt = /* @__PURE__ */ _(xa, [["render", at]]), st = ["id", "name", "disable
       ], 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__ */ $({
+}), Ds = /* @__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: {},
@@ -1316,7 +1316,7 @@ const tt = /* @__PURE__ */ _(xa, [["render", at]]), st = ["id", "name", "disable
   },
   emits: ["update:modelValue"],
   setup(d, { emit: e }) {
-    const a = d, t = b(() => ({
+    const a = d, t = v(() => ({
       "is-invalid": a.isInvalid
     })), o = e;
     return (s, i) => (l(), n("div", ut, [
@@ -1349,9 +1349,9 @@ const tt = /* @__PURE__ */ _(xa, [["render", at]]), st = ["id", "name", "disable
   },
   emits: ["update:modelValue"],
   setup(d, { emit: e }) {
-    const a = d, t = b(() => ({
+    const a = d, t = v(() => ({
       "mc-field__container--inline": a.inline
-    })), o = b(() => ({
+    })), o = v(() => ({
       "mc-field__container--inline__item": a.inline
     })), s = e;
     return (i, c) => (l(), n("div", {
@@ -1370,14 +1370,14 @@ const tt = /* @__PURE__ */ _(xa, [["render", at]]), st = ["id", "name", "disable
       }, null, 8, ["id", "label", "is-invalid", "name", "class", "model-value", "disabled", "onUpdate:modelValue"]))), 128))
     ], 2));
   }
-}), Os = /* @__PURE__ */ _(bt, [["__scopeId", "data-v-d2f5e103"]]), ft = /* @__PURE__ */ $({
+}), Ps = /* @__PURE__ */ _(bt, [["__scopeId", "data-v-d2f5e103"]]), ft = /* @__PURE__ */ $({
   __name: "MStatusDot",
   props: {
     status: { default: "info" },
     size: {}
   },
   setup(d) {
-    const e = d, a = b(() => ({
+    const e = d, a = v(() => ({
       [`mc-status-dot--${e.status}`]: e.status && e.status != "info",
       [`mc-status-dot--${e.size}`]: e.size && e.size != "m"
     }));
@@ -1392,7 +1392,7 @@ const tt = /* @__PURE__ */ _(xa, [["render", at]]), st = ["id", "name", "disable
     status: { default: "info" }
   },
   setup(d) {
-    const e = d, a = b(() => ({
+    const e = d, a = v(() => ({
       [`mc-status-badge--${e.status}`]: e.status && e.status != "info"
     }));
     return (t, o) => (l(), n("div", {
@@ -1402,7 +1402,7 @@ const tt = /* @__PURE__ */ _(xa, [["render", at]]), st = ["id", "name", "disable
       r("span", $t, f(t.label), 1)
     ], 2));
   }
-}), Ss = /* @__PURE__ */ _(yt, [["__scopeId", "data-v-3e437a03"]]), gt = {
+}), Fs = /* @__PURE__ */ _(yt, [["__scopeId", "data-v-3e437a03"]]), gt = {
   name: "Cross20",
   props: {
     /**
@@ -1550,9 +1550,9 @@ const At = /* @__PURE__ */ _(Pt, [["render", Nt]]), Rt = { class: "mc-status-not
   },
   emits: ["close"],
   setup(d, { emit: e }) {
-    const a = d, t = b(() => ({
+    const a = d, t = v(() => ({
       [`mc-status-notification--${a.status}`]: a.status && a.status != "info"
-    })), o = b(() => {
+    })), o = v(() => {
       switch (a.status) {
         case "success":
           return At;
@@ -1593,7 +1593,7 @@ const At = /* @__PURE__ */ _(Pt, [["render", Nt]]), Rt = { class: "mc-status-not
       ])) : h("", !0)
     ], 2));
   }
-}), qs = /* @__PURE__ */ _(Kt, [["__scopeId", "data-v-457733a1"]]), Et = ["aria-label"], Qt = ["aria-selected", "onClick"], Wt = {
+}), Ns = /* @__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__ */ $({
@@ -1607,7 +1607,7 @@ const At = /* @__PURE__ */ _(Pt, [["render", Nt]]), Rt = { class: "mc-status-not
   },
   emits: ["update:modelValue"],
   setup(d, { emit: e }) {
-    const a = d, t = b(() => ({
+    const a = d, t = v(() => ({
       "mc-tabs--centered": a.centered
     })), o = z(a.modelValue), s = (p) => {
       a.tabs[p].disabled || p !== o.value && (o.value = p, c("update:modelValue", p));
@@ -1620,8 +1620,8 @@ const At = /* @__PURE__ */ _(Pt, [["render", Nt]]), Rt = { class: "mc-status-not
         class: "mc-tabs__list",
         "aria-label": p.description
       }, [
-        (l(!0), n(O, null, S(p.tabs, (u, v) => (l(), n("li", {
-          key: `tab-${v}`,
+        (l(!0), n(O, null, S(p.tabs, (u, b) => (l(), n("li", {
+          key: `tab-${b}`,
           role: "presentation",
           class: "mc-tabs__item"
         }, [
@@ -1630,12 +1630,12 @@ const At = /* @__PURE__ */ _(Pt, [["render", Nt]]), Rt = { class: "mc-status-not
             ref: "tab",
             role: "tab",
             class: g(["mc-tabs__tab", {
-              "mc-tabs__tab--selected": i(v),
+              "mc-tabs__tab--selected": i(b),
               "mc-tabs__tab--disabled": u.disabled
             }]),
-            "aria-selected": i(v),
+            "aria-selected": i(b),
             type: "button",
-            onClick: (L) => s(v)
+            onClick: (L) => s(b)
           }, [
             u.icon ? (l(), n("span", Wt, [
               (l(), B(A(u.icon)))
@@ -1649,7 +1649,7 @@ const At = /* @__PURE__ */ _(Pt, [["render", Nt]]), Rt = { class: "mc-status-not
       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__ */ $({
+}), As = /* @__PURE__ */ _(Xt, [["__scopeId", "data-v-3919f834"]]), Yt = ["for"], Zt = ["id", "name", "checked", "disabled"], xt = { class: "mc-tag__label" }, es = ["disabled"], as = { class: "mc-tag__label" }, ts = ["disabled"], ss = { class: "mc-tag__label" }, ls = { class: "mc-tag__label" }, os = { class: "mc-tag__label" }, ns = /* @__PURE__ */ $({
   __name: "MTag",
   props: {
     type: { default: "informative" },
@@ -1664,7 +1664,7 @@ const At = /* @__PURE__ */ _(Pt, [["render", Nt]]), Rt = { class: "mc-status-not
   },
   emits: ["update:modelValue", "remove-tag"],
   setup(d, { emit: e }) {
-    const a = d, t = b(() => ({
+    const a = d, t = v(() => ({
       [`mc-tag-${a.type}`]: a.type && a.type != "informative",
       [`mc-tag--${a.size}`]: a.size && a.size != "m"
     })), o = e;
@@ -1725,7 +1725,7 @@ const At = /* @__PURE__ */ _(Pt, [["render", Nt]]), Rt = { class: "mc-status-not
       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__ */ $({
+}), Rs = /* @__PURE__ */ _(ns, [["__scopeId", "data-v-a3166010"]]), is = ["id", "aria-invalid", "value", "name", "placeholder", "disabled", "minlength", "maxlength", "rows", "readonly"], ds = /* @__PURE__ */ $({
   __name: "MTextArea",
   props: {
     id: {},
@@ -1741,7 +1741,7 @@ const At = /* @__PURE__ */ _(Pt, [["render", Nt]]), Rt = { class: "mc-status-not
   },
   emits: ["update:modelValue"],
   setup(d, { emit: e }) {
-    const a = d, t = b(() => ({
+    const a = d, t = v(() => ({
       "is-invalid": a.isInvalid
     })), o = e;
     return (s, i) => (l(), n("textarea", I({
@@ -1760,7 +1760,7 @@ const At = /* @__PURE__ */ _(Pt, [["render", Nt]]), Rt = { class: "mc-status-not
       onInput: i[0] || (i[0] = (c) => o("update:modelValue", c.target.value))
     }), null, 16, is));
   }
-}), Fs = /* @__PURE__ */ _(ds, [["__scopeId", "data-v-8184b69c"]]), rs = {
+}), Gs = /* @__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 = {
@@ -1783,7 +1783,7 @@ const At = /* @__PURE__ */ _(Pt, [["render", Nt]]), Rt = { class: "mc-status-not
   },
   emits: ["update:modelValue"],
   setup(d, { emit: e }) {
-    const a = d, t = b(() => ({
+    const a = d, t = v(() => ({
       [`mc-text-input--${a.size}`]: a.size && a.size != "m",
       "is-invalid": a.isInvalid
     })), o = z(a.modelValue), s = () => {
@@ -1823,7 +1823,7 @@ const At = /* @__PURE__ */ _(Pt, [["render", Nt]]), Rt = { class: "mc-status-not
       ])) : h("", !0)
     ], 2));
   }
-}), Ns = /* @__PURE__ */ _(ps, [["__scopeId", "data-v-38f67338"]]), ms = ["for"], _s = ["id", "name", "checked", "disabled"], vs = ["for"], bs = /* @__PURE__ */ $({
+}), Us = /* @__PURE__ */ _(ps, [["__scopeId", "data-v-38f67338"]]), ms = ["for"], _s = ["id", "name", "checked", "disabled"], vs = ["for"], bs = /* @__PURE__ */ $({
   __name: "MToggle",
   props: {
     id: {},
@@ -1835,7 +1835,7 @@ const At = /* @__PURE__ */ _(Pt, [["render", Nt]]), Rt = { class: "mc-status-not
   },
   emits: ["update:modelValue"],
   setup(d, { emit: e }) {
-    const a = d, t = b(() => ({
+    const a = d, t = v(() => ({
       [`mc-toggle--${a.size}`]: a.size && a.size != "s"
     })), o = e;
     return (s, i) => (l(), n("div", {
@@ -1863,7 +1863,34 @@ const At = /* @__PURE__ */ _(Pt, [["render", Nt]]), Rt = { class: "mc-status-not
       ], 8, ms)
     ], 2));
   }
-}), fs = /* @__PURE__ */ _(bs, [["__scopeId", "data-v-5be734e7"]]), hs = /* @__PURE__ */ $({
+}), fs = /* @__PURE__ */ _(bs, [["__scopeId", "data-v-5be734e7"]]), hs = { class: "tooltip-story-wrapper" }, $s = ["aria-describedby"], ys = ["id"], gs = /* @__PURE__ */ $({
+  __name: "MTooltip",
+  props: {
+    id: {},
+    text: {},
+    position: { default: "top" },
+    pointer: { type: Boolean, default: !0 }
+  },
+  setup(d) {
+    const e = d, a = v(() => ({
+      [`mc-tooltip--${e.position}`]: e.position,
+      "mc-tooltip--no-pointer": !e.pointer
+    }));
+    return (t, o) => (l(), n("div", hs, [
+      r("div", {
+        class: g(["mc-tooltip", a.value]),
+        "aria-describedby": t.id
+      }, [
+        V(t.$slots, "default", {}, void 0, !0),
+        r("span", {
+          id: t.id,
+          class: "mc-tooltip__content",
+          role: "tooltip"
+        }, f(t.text), 9, ys)
+      ], 10, $s)
+    ]));
+  }
+}), Hs = /* @__PURE__ */ _(gs, [["__scopeId", "data-v-fbbb2707"]]), ks = /* @__PURE__ */ $({
   __name: "MToggleGroup",
   props: {
     name: {},
@@ -1883,10 +1910,10 @@ const At = /* @__PURE__ */ _(Pt, [["render", Nt]]), Rt = { class: "mc-status-not
     );
     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(() => ({
+      p && !u.includes(m) ? u.push(m) : u = u.filter((b) => b !== m), c("update:modelValue", u), t.value = u;
+    }, s = v(() => ({
       "mc-field__container--inline": a.inline
-    })), i = b(() => ({
+    })), i = v(() => ({
       "mc-field__container--inline__item": a.inline
     })), c = e;
     return (p, m) => (l(), n("div", {
@@ -1901,43 +1928,44 @@ const At = /* @__PURE__ */ _(Pt, [["render", Nt]]), Rt = { class: "mc-status-not
         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)
+        "onUpdate:modelValue": (b) => o(b, u.value)
       }, null, 8, ["id", "label", "is-invalid", "name", "class", "model-value", "disabled", "onUpdate:modelValue"]))), 128))
     ], 2));
   }
-}), As = /* @__PURE__ */ _(hs, [["__scopeId", "data-v-c6b10172"]]);
+}), Ks = /* @__PURE__ */ _(ks, [["__scopeId", "data-v-c6b10172"]]);
 export {
-  ys as MBreadcrumb,
+  Vs as MBreadcrumb,
   N as MButton,
   ge as MCheckbox,
-  gs as MCheckboxGroup,
-  ks as MDatepicker,
+  Is as MCheckboxGroup,
+  Bs as MDatepicker,
   je as MDivider,
-  ws as MDrawer,
-  Vs as MField,
-  Is as MFieldGroup,
-  Bs as MFlag,
+  Cs as MDrawer,
+  Ms as MField,
+  zs as MFieldGroup,
+  Ls as MFlag,
   D as MIconButton,
   se as MLink,
   K as MLoader,
-  Cs as MLoadingOverlay,
-  Ms as MModal,
+  Ts as MLoadingOverlay,
+  js as MModal,
   Ca as MNumberBadge,
   Q as MOverlay,
-  zs as MPagination,
-  Ls as MPasswordInput,
-  Ts as MPincode,
-  js as MQuantitySelector,
+  Os as MPagination,
+  Ss as MPasswordInput,
+  qs as MPincode,
+  Ds as MQuantitySelector,
   vt as MRadio,
-  Os as MRadioGroup,
+  Ps 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 MStatusBadge,
+  Ns as MStatusNotification,
+  As as MTabs,
+  Rs as MTag,
+  Gs as MTextArea,
+  Us as MTextInput,
   fs as MToggle,
-  As as MToggleGroup
+  Ks as MToggleGroup,
+  Hs as MTooltip
 };
 //# sourceMappingURL=mozaic-vue.js.map