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

package/dist/mozaic-vue.js

@@ -0,0 +1,877 @@
+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({
+  __name: "MBadge",
+  props: {
+    label: {},
+    appearance: { default: "standard" },
+    size: { default: "s" }
+  },
+  setup(o) {
+    const a = o, t = m(() => ({
+      [`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));
+  }
+}), _ = (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 = {
+  key: 0,
+  class: "mc-loader__text",
+  role: "status"
+}, R = /* @__PURE__ */ f({
+  __name: "MLoader",
+  props: {
+    appearance: { default: "standard" },
+    size: { default: "m" },
+    text: {}
+  },
+  setup(o) {
+    const a = o, t = m(() => ({
+      [`mc-loader--${a.size}`]: a.size && a.size !== "m",
+      [`mc-loader--${a.appearance}`]: a.appearance && a.appearance !== "standard"
+    })), e = m(() => {
+      let s;
+      switch (a.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;
+    }), i = m(() => {
+      let s;
+      switch (a.size) {
+        case "s":
+          s = 6;
+          break;
+        case "l":
+          s = 19;
+          break;
+        default:
+          s = 9;
+      }
+      return s;
+    });
+    return (s, u) => (l(), n("div", {
+      class: y(["mc-loader", t.value])
+    }, [
+      r("span", P, [
+        (l(), n("svg", {
+          class: "mc-loader__icon",
+          xmlns: "http://www.w3.org/2000/svg",
+          viewBox: e.value,
+          "aria-hidden": "true"
+        }, [
+          r("circle", {
+            class: "mc-loader__path",
+            cx: "50%",
+            cy: "50%",
+            r: i.value
+          }, null, 8, D)
+        ], 8, F))
+      ]),
+      s.text ? (l(), n("p", G, h(s.text), 1)) : v("", !0)
+    ], 2));
+  }
+}), N = /* @__PURE__ */ _(R, [["__scopeId", "data-v-56c66912"]]), U = ["disabled", "type"], Z = {
+  key: 0,
+  class: "mc-button__icon"
+}, A = {
+  key: 1,
+  class: "mc-button__icon",
+  style: { position: "absolute" }
+}, E = {
+  key: 2,
+  class: "mc-button__icon"
+}, H = {
+  key: 4,
+  class: "mc-button__icon"
+}, Q = /* @__PURE__ */ f({
+  __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(o) {
+    const a = o, t = m(() => ({
+      [`mc-button--${a.appearance}`]: a.appearance && a.appearance != "standard",
+      [`mc-button--${a.size}`]: a.size && a.size != "m",
+      "mc-button--ghost": a.ghost,
+      "mc-button--outlined": a.outlined,
+      "mc-button--icon-only": a.iconPosition == "only"
+    }));
+    return (e, i) => (l(), n("button", {
+      class: y(["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, {
+          style: { color: "currentColor" },
+          size: "s"
+        })
+      ])) : v("", !0),
+      e.$slots.icon && e.iconPosition == "only" ? (l(), n("span", E, [
+        $(e.$slots, "icon", {}, void 0, !0)
+      ])) : (l(), n("span", {
+        key: 3,
+        class: "mc-button__label",
+        style: L({ visibility: e.isLoading ? "hidden" : "visible" })
+      }, [
+        $(e.$slots, "default", {}, () => [
+          i[0] || (i[0] = I("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));
+  }
+}), _a = /* @__PURE__ */ _(Q, [["__scopeId", "data-v-f4f43ab6"]]), J = { class: "mc-checkbox" }, K = ["id", "name", "checked", "indeterminate", "disabled", "aria-invalid"], W = ["for"], X = /* @__PURE__ */ f({
+  __name: "MCheckbox",
+  props: {
+    id: {},
+    name: {},
+    label: {},
+    modelValue: { type: Boolean },
+    indeterminate: { type: Boolean },
+    isInvalid: { type: Boolean },
+    disabled: { type: Boolean }
+  },
+  emits: ["update:modelValue"],
+  setup(o, { emit: a }) {
+    const t = o, e = m(() => ({
+      "is-invalid": t.isInvalid
+    })), i = a;
+    return (s, u) => (l(), n("div", J, [
+      r("input", g({
+        id: s.id,
+        type: "checkbox",
+        class: ["mc-checkbox__input", e.value],
+        name: s.name,
+        checked: s.modelValue,
+        indeterminate: s.indeterminate,
+        disabled: s.disabled,
+        "aria-invalid": s.isInvalid
+      }, s.$attrs, {
+        onChange: u[0] || (u[0] = (c) => i("update:modelValue", c.target.checked))
+      }), null, 16, K),
+      s.label ? (l(), n("label", {
+        key: 0,
+        for: s.id,
+        class: "mc-checkbox__label"
+      }, h(s.label), 9, W)) : v("", !0)
+    ]));
+  }
+}), Y = /* @__PURE__ */ _(X, [["__scopeId", "data-v-37fd0a35"]]), x = /* @__PURE__ */ f({
+  __name: "MCheckboxGroup",
+  props: {
+    name: {},
+    modelValue: {},
+    options: {},
+    inline: { type: Boolean }
+  },
+  emits: ["update:modelValue"],
+  setup(o, { emit: a }) {
+    const t = o, e = B([]);
+    C(
+      () => 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(() => ({
+      "mc-field__container--inline": t.inline
+    })), u = m(() => ({
+      "mc-field__container--inline__item": t.inline
+    })), c = a;
+    return (p, d) => (l(), n("div", {
+      class: y(["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,
+        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)
+      }, 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 = {
+  key: 0,
+  class: "mc-field__requirement"
+}, te = ["id"], le = { class: "mc-field__content" }, ne = ["id"], oe = /* @__PURE__ */ f({
+  __name: "MField",
+  props: {
+    id: {},
+    label: {},
+    requirementText: {},
+    helpText: {},
+    helpId: {},
+    isValid: { type: Boolean },
+    isInvalid: { type: Boolean },
+    messageId: {},
+    message: {}
+  },
+  setup(o) {
+    const a = o, t = m(() => ({
+      "is-valid": a.isValid,
+      "is-invalid": a.isInvalid
+    }));
+    return (e, i) => (l(), n("div", ee, [
+      r("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),
+      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)
+      ]),
+      (e.isValid || e.isInvalid) && e.message ? (l(), n("span", {
+        key: 1,
+        class: y(["mc-field__validation-message", t.value]),
+        id: e.messageId
+      }, h(e.message), 11, ne)) : v("", !0)
+    ]));
+  }
+}), ba = /* @__PURE__ */ _(oe, [["__scopeId", "data-v-ead078c4"]]), ie = { class: "mc-field--group" }, de = ["for"], re = {
+  key: 0,
+  class: "mc-field__requirement"
+}, ce = {
+  key: 0,
+  class: "mc-field__help"
+}, ue = { class: "mc-field__content" }, pe = /* @__PURE__ */ f({
+  __name: "MFieldGroup",
+  props: {
+    id: {},
+    legend: {},
+    requirementText: {},
+    helpText: {},
+    isValid: { type: Boolean },
+    isInvalid: { type: Boolean },
+    message: {}
+  },
+  setup(o) {
+    const a = o, t = m(() => ({
+      "is-valid": a.isValid,
+      "is-invalid": a.isInvalid
+    }));
+    return (e, i) => (l(), n("fieldset", ie, [
+      r("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)
+      ]),
+      (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)
+    ]));
+  }
+}), fa = /* @__PURE__ */ _(pe, [["__scopeId", "data-v-fc0c08dc"]]), me = ["disabled", "type"], _e = { class: "mc-button__icon" }, ve = /* @__PURE__ */ f({
+  __name: "MIconButton",
+  props: {
+    appearance: { default: "standard" },
+    size: { default: "m" },
+    disabled: { type: Boolean },
+    ghost: { type: Boolean },
+    outlined: { type: Boolean },
+    type: { default: "button" }
+  },
+  setup(o) {
+    const a = o, t = m(() => ({
+      [`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]),
+      disabled: e.disabled,
+      type: e.type
+    }, [
+      r("span", _e, [
+        $(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"]));
+  }
+}), ya = /* @__PURE__ */ _(ye, [["__scopeId", "data-v-ad3d954f"]]), $e = ["aria-labelledby"], ge = /* @__PURE__ */ f({
+  __name: "MOverlay",
+  props: {
+    isVisible: { type: Boolean },
+    dialogLabel: {}
+  },
+  setup(o) {
+    return (a, t) => (l(), n("div", {
+      class: y(["mc-overlay", { "is-visible": a.isVisible }])
+    }, [
+      r("div", {
+        role: "dialog",
+        tabindex: "-1",
+        "aria-labelledby": a.dialogLabel
+      }, [
+        $(a.$slots, "default", {}, void 0, !0)
+      ], 8, $e)
+    ], 2));
+  }
+}), $a = /* @__PURE__ */ _(ge, [["__scopeId", "data-v-db90fdb3"]]), ke = {
+  name: "More24",
+  props: {
+    /**
+     * Icon color
+     */
+    color: {
+      type: String,
+      default: "currentColor"
+    }
+  }
+}, Ve = {
+  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", {
+        "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", {
+          width: "24",
+          height: "24",
+          fill: "#fff"
+        })
+      ])
+    ], -1)
+  ]));
+}
+const Be = /* @__PURE__ */ _(ke, [["render", Ie]]), Me = {
+  name: "Less24",
+  props: {
+    /**
+     * Icon color
+     */
+    color: {
+      type: String,
+      default: "currentColor"
+    }
+  }
+}, ze = {
+  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", {
+        "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", {
+          width: "24",
+          height: "24",
+          fill: "#fff"
+        })
+      ])
+    ], -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({
+  __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(o, { emit: a }) {
+    const t = o, e = B(t.modelValue);
+    C(e, (d) => {
+      d !== t.modelValue && p("update:modelValue", d);
+    });
+    const i = m(() => ({
+      [`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);
+    }, p = a;
+    return (d, b) => (l(), n("div", {
+      class: y(["mc-quantity-selector", i.value])
+    }, [
+      j(r("input", g({
+        id: d.id,
+        "onUpdate:modelValue": b[0] || (b[0] = (k) => e.value = k),
+        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,
+        "aria-valuenow": e.value
+      }, d.$attrs, {
+        onChange: b[1] || (b[1] = (k) => c(Number(k.target.value)))
+      }), null, 16, Le), [
+        [q, e.value]
+      ]),
+      d.readonly ? v("", !0) : (l(), n("button", {
+        key: 0,
+        type: "button",
+        "aria-controls": d.id,
+        class: "mc-quantity-selector__button mc-quantity-selector__button--increase",
+        tabindex: "-1",
+        disabled: d.disabled || e.value === d.max,
+        onClick: s
+      }, [
+        r("span", Te, [
+          V(Be)
+        ]),
+        r("span", je, h(d.incrementlabel), 1)
+      ], 8, Oe)),
+      d.readonly ? v("", !0) : (l(), n("button", {
+        key: 1,
+        type: "button",
+        "aria-controls": d.id,
+        class: "mc-quantity-selector__button mc-quantity-selector__button--decrease",
+        tabindex: "-1",
+        disabled: d.disabled || e.value === d.min,
+        onClick: u
+      }, [
+        r("span", Se, [
+          V(Ce)
+        ]),
+        r("span", Pe, h(d.decrementLabel), 1)
+      ], 8, qe))
+    ], 2));
+  }
+}), ga = /* @__PURE__ */ _(Fe, [["__scopeId", "data-v-a732650a"]]), De = { class: "mc-radio" }, Ge = ["id", "name", "checked", "disabled", "aria-invalid"], Re = ["for"], Ne = /* @__PURE__ */ f({
+  __name: "MRadio",
+  props: {
+    id: {},
+    name: {},
+    label: {},
+    modelValue: { type: Boolean },
+    isInvalid: { type: Boolean },
+    disabled: { type: Boolean }
+  },
+  emits: ["update:modelValue"],
+  setup(o, { emit: a }) {
+    const t = o, e = m(() => ({
+      "is-invalid": t.isInvalid
+    })), i = a;
+    return (s, u) => (l(), n("div", De, [
+      r("input", g({
+        id: s.id,
+        type: "radio",
+        class: ["mc-radio__input", e.value],
+        name: s.name,
+        checked: s.modelValue,
+        disabled: s.disabled,
+        "aria-invalid": s.isInvalid
+      }, s.$attrs, {
+        onChange: u[0] || (u[0] = (c) => i("update:modelValue", c.target.checked))
+      }), null, 16, Ge),
+      s.label ? (l(), n("label", {
+        key: 0,
+        for: s.id,
+        class: "mc-radio__label"
+      }, h(s.label), 9, Re)) : v("", !0)
+    ]));
+  }
+}), Ue = /* @__PURE__ */ _(Ne, [["__scopeId", "data-v-da78938c"]]), Ze = /* @__PURE__ */ f({
+  __name: "MRadioGroup",
+  props: {
+    name: {},
+    modelValue: {},
+    options: {},
+    isInvalid: { type: Boolean },
+    inline: { type: Boolean }
+  },
+  emits: ["update:modelValue"],
+  setup(o, { emit: a }) {
+    const t = o, e = m(() => ({
+      "mc-field__container--inline": t.inline
+    })), i = m(() => ({
+      "mc-field__container--inline__item": t.inline
+    })), s = a;
+    return (u, c) => (l(), n("div", {
+      class: y(["mc-field__container", e.value])
+    }, [
+      (l(!0), n(M, null, z(u.options, (p) => (l(), w(Ue, {
+        id: p.id,
+        key: p.id,
+        label: p.label,
+        "is-invalid": u.isInvalid,
+        name: u.name,
+        class: y(["mc-field__item", i.value]),
+        "model-value": u.modelValue === p.value,
+        disabled: p.disabled,
+        "onUpdate:modelValue": (d) => d ? 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 = {
+  key: 0,
+  value: "",
+  disabled: ""
+}, He = ["value", "disabled"], Qe = /* @__PURE__ */ f({
+  __name: "MSelect",
+  props: {
+    id: {},
+    name: {},
+    options: {},
+    modelValue: {},
+    placeholder: {},
+    isInvalid: { type: Boolean },
+    disabled: { type: Boolean },
+    size: { default: "m" },
+    readonly: { type: Boolean }
+  },
+  emits: ["update:modelValue"],
+  setup(o, { emit: a }) {
+    const t = o, e = m(() => ({
+      [`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({
+      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))
+    }), [
+      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({
+        key: p,
+        value: c.value,
+        ref_for: !0
+      }, c.attributes, {
+        disabled: c.disabled
+      }), h(c.text), 17, He))), 128))
+    ], 16, Ae));
+  }
+}), Va = /* @__PURE__ */ _(Qe, [["__scopeId", "data-v-68c735e4"]]), Je = /* @__PURE__ */ f({
+  __name: "MStatusDot",
+  props: {
+    appearance: { default: "info" }
+  },
+  setup(o) {
+    const a = o, t = m(() => ({
+      [`mc-status-dot--${a.appearance}`]: a.appearance && a.appearance != "info"
+    }));
+    return (e, i) => (l(), n("span", {
+      class: y(["mc-status-dot", t.value])
+    }, null, 2));
+  }
+}), Ke = /* @__PURE__ */ _(Je, [["__scopeId", "data-v-1d06a91e"]]), We = { class: "mc-status-badge__label" }, Xe = /* @__PURE__ */ f({
+  __name: "MStatusBadge",
+  props: {
+    label: {},
+    appearance: { default: "info" }
+  },
+  setup(o) {
+    const a = o, t = m(() => ({
+      [`mc-status-badge--${a.appearance}`]: a.appearance && a.appearance != "info"
+    }));
+    return (e, i) => (l(), n("div", {
+      class: y(["mc-status-badge", t.value])
+    }, [
+      V(Ke, { appearance: e.appearance }, null, 8, ["appearance"]),
+      r("span", We, h(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({
+  __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(o, { emit: a }) {
+    const t = o, e = m(() => ({
+      "is-invalid": t.isInvalid
+    })), i = a;
+    return (s, u) => (l(), n("textarea", g({
+      id: s.id,
+      class: ["mc-textarea", e.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: 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"
+    }
+  }
+}, 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 = {
+  key: 0,
+  class: "mc-text-input__icon"
+}, na = ["id", "value", "type", "name", "placeholder", "disabled", "aria-invalid", "readonly"], oa = {
+  key: 1,
+  class: "mc-controls-options"
+}, ia = /* @__PURE__ */ f({
+  __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(o, { emit: a }) {
+    const t = o, e = m(() => ({
+      [`mc-text-input--${t.size}`]: t.size && t.size != "m",
+      "is-invalid": t.isInvalid
+    })), i = B(t.modelValue), s = () => {
+      i.value = "", u("update:modelValue", "");
+    }, u = a;
+    return (c, p) => (l(), n("div", {
+      class: y(["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,
+        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: "button",
+          class: "mc-controls-options__button",
+          onClick: s
+        }, [
+          V(ta, {
+            class: "mc-controls-options__icon",
+            "aria-hidden": "true"
+          }),
+          p[1] || (p[1] = r("span", { class: "mc-controls-options__label" }, "{clearLabel}", -1))
+        ])
+      ])) : v("", !0)
+    ], 2));
+  }
+}), Ma = /* @__PURE__ */ _(ia, [["__scopeId", "data-v-38f67338"]]), da = ["for"], ra = ["id", "name", "checked", "disabled"], ca = ["for"], ua = /* @__PURE__ */ f({
+  __name: "MToggle",
+  props: {
+    id: {},
+    name: {},
+    label: {},
+    modelValue: { type: Boolean },
+    size: { default: "s" },
+    disabled: { type: Boolean }
+  },
+  emits: ["update:modelValue"],
+  setup(o, { emit: a }) {
+    const t = o, e = m(() => ({
+      [`mc-toggle--${t.size}`]: t.size && t.size != "s"
+    })), i = a;
+    return (s, u) => (l(), n("div", {
+      class: y(["mc-toggle", e.value])
+    }, [
+      r("label", {
+        class: "mc-toggle__container",
+        for: s.id
+      }, [
+        r("input", g({
+          id: s.id,
+          type: "checkbox",
+          class: "mc-toggle__input",
+          name: s.name,
+          checked: s.modelValue,
+          disabled: s.disabled
+        }, s.$attrs, {
+          onChange: u[0] || (u[0] = (c) => i("update:modelValue", c.target.checked))
+        }), null, 16, ra),
+        s.label ? (l(), n("span", {
+          key: 0,
+          for: s.id,
+          class: "mc-toggle__label"
+        }, h(s.label), 9, ca)) : v("", !0)
+      ], 8, da)
+    ], 2));
+  }
+}), za = /* @__PURE__ */ _(ua, [["__scopeId", "data-v-5be734e7"]]);
+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
+};
+//# sourceMappingURL=mozaic-vue.js.map