mediacube-ui-v2 0.0.342 → 0.0.344

package/dist/ai-catalog/index.json

@@ -1,6 +1,6 @@
 {
   "catalogSchemaVersion": 2,
-  "libraryVersion": "0.0.342",
+  "libraryVersion": "0.0.344",
   "packageName": "mediacube-ui-v2",
   "pathHash": "9b6f3b8016b22ac7",
   "componentCount": 76,

package/dist/components/elements/McFieldSelect/McFieldSelect.vue2.js

@@ -1,29 +1,29 @@
-import { defineComponent as qe, defineAsyncComponent as W, useSlots as He, inject as je, ref as p, computed as i, onBeforeUnmount as Ie, watch as K, openBlock as s, createElementBlock as F, normalizeStyle as Ye, normalizeClass as se, createElementVNode as T, renderSlot as O, createBlock as u, unref as a, withCtx as r, createTextVNode as E, toDisplayString as f, createCommentVNode as _, createVNode as S, mergeProps as Ge, createSlots as J, nextTick as ce } from "vue";
-import Ue from "vue-multiselect";
-import { Directions as ue } from "../../../enums/ui/Directions2.js";
-import { useFieldErrors as Xe } from "../../../composables/useFieldErrors2.js";
-import { SelectGroupKeys as w, SelectListDirections as Ke } from "../../../enums/Select2.js";
-import { PreviewSizes as de } from "../../../enums/Preview2.js";
-import { TitleVariations as me } from "../../../enums/Title2.js";
-import { TooltipPositions as Je } from "../../../enums/Tooltip2.js";
-import { Weights as Q } from "../../../enums/ui/Weights2.js";
-import { ChipSize as Qe } from "../../../enums/Chip2.js";
-import { useTheme as Ze } from "../../../composables/useTheme2.js";
-import { useThrottleFn as et } from "@vueuse/core";
+import { defineComponent as Ie, defineAsyncComponent as q, useSlots as Ye, inject as Ge, ref as d, computed as i, onBeforeUnmount as Ue, watch as J, openBlock as s, createElementBlock as O, normalizeStyle as Xe, normalizeClass as de, createElementVNode as T, renderSlot as $, createBlock as u, unref as a, withCtx as r, createTextVNode as E, toDisplayString as f, createCommentVNode as _, createVNode as S, mergeProps as Ke, createSlots as Q, nextTick as me } from "vue";
+import Je from "vue-multiselect";
+import { Directions as pe } from "../../../enums/ui/Directions2.js";
+import { useFieldErrors as Qe } from "../../../composables/useFieldErrors2.js";
+import { SelectGroupKeys as w, SelectListDirections as Ze } from "../../../enums/Select2.js";
+import { PreviewSizes as fe } from "../../../enums/Preview2.js";
+import { TitleVariations as ve } from "../../../enums/Title2.js";
+import { TooltipPositions as et } from "../../../enums/Tooltip2.js";
+import { Weights as Z } from "../../../enums/ui/Weights2.js";
+import { ChipSize as tt } from "../../../enums/Chip2.js";
+import { useTheme as lt } from "../../../composables/useTheme2.js";
+import { useThrottleFn as ot } from "@vueuse/core";
 import h from "../McTitle/McTitle.vue2.js";
 import '../../../assets/components/elements/McSvgIcon/index.css';import '../../../assets/components/elements/McTitle/index.css';/* empty css                    */
-import q from "../McSvgIcon/McSvgIcon.vue2.js";
+import j from "../McSvgIcon/McSvgIcon.vue2.js";
 /* empty css                      */
-const tt = ["dir"], lt = { class: "mc-field-select__header" }, ot = { class: "mc-field-select__main" }, nt = {
+const nt = ["dir"], at = { class: "mc-field-select__header" }, rt = { class: "mc-field-select__main" }, it = {
   key: 1,
   class: "mc-field-select__single-label"
-}, at = {
+}, st = {
   key: 0,
   class: "mc-field-select__prepend"
-}, rt = {
+}, ct = {
   key: 0,
   class: "mc-field-select__footer"
-}, it = { key: 1 }, Ct = /* @__PURE__ */ qe({
+}, ut = { key: 1 }, Vt = /* @__PURE__ */ Ie({
   __name: "McFieldSelect",
   props: {
     /**
@@ -250,7 +250,7 @@ const tt = ["dir"], lt = { class: "mc-field-select__header" }, ot = { class: "mc
     },
     dir: {
       type: String,
-      default: ue.Ltr
+      default: pe.Ltr
     },
     /**
      * На какое после смотреть что бы считать его заголовком строки
@@ -268,11 +268,11 @@ const tt = ["dir"], lt = { class: "mc-field-select__header" }, ot = { class: "mc
     }
   },
   emits: ["original-input", "tag", "search-change", "update:modelValue", "handle-open", "handle-close"],
-  setup(k, { emit: pe }) {
-    const H = W(() => import("../McAvatar/McAvatar.vue.js")), fe = W(() => import("../McTooltip/McTooltip.vue.js")), Z = W(() => import("../../patterns/McPreview/McPreview.vue.js")), ve = W(() => import("../McChip/McChip.vue.js")), C = pe, ge = He(), ee = je("dsOptions", {}), e = k, d = Ze("select"), y = Xe(e.errors), j = p(null), x = p(null), I = p(null), $ = p([]), g = p(null), A = p(), L = p(!1), z = p(null), Y = p(null), N = p(null), B = i(() => e.options.some(
+  setup(k, { emit: ge }) {
+    const H = q(() => import("../McAvatar/McAvatar.vue.js")), he = q(() => import("../McTooltip/McTooltip.vue.js")), ee = q(() => import("../../patterns/McPreview/McPreview.vue.js")), ye = q(() => import("../McChip/McChip.vue.js")), C = ge, be = Ye(), te = Ge("dsOptions", {}), e = k, m = lt("select"), y = Qe(e.errors), L = d(null), x = d(null), I = d(null), A = d([]), g = d(null), z = d(), F = d(!1), N = d(null), Y = d(null), P = d(null), B = i(() => e.options.some(
       (t) => Object.prototype.hasOwnProperty.call(t, w.Label) && Object.prototype.hasOwnProperty.call(t, w.Values) && //@ts-ignore
       Array.isArray(t[w.Values])
-    )), te = i(() => !!e.title), le = i(() => e.avatar || e.icon), V = i(() => e.multiple), he = i(() => V.value ? !!(e.modelValue || [])?.length : !!e.modelValue), ye = i(() => e.noResultsText ?? ee.componentTranslations?.select?.noResultsText), be = i(() => e.emptyList ?? ee.componentTranslations?.select?.emptyList), _e = i(() => ({
+    )), le = i(() => !!e.title), oe = i(() => e.avatar || e.icon), V = i(() => e.multiple), _e = i(() => V.value ? !!(e.modelValue || [])?.length : !!e.modelValue), Se = i(() => e.noResultsText ?? te.componentTranslations?.select?.noResultsText), we = i(() => e.emptyList ?? te.componentTranslations?.select?.emptyList), ke = i(() => ({
       label: e.titleField,
       trackBy: e.valueField,
       loading: e.loading,
@@ -297,37 +297,37 @@ const tt = ["dir"], lt = { class: "mc-field-select__header" }, ot = { class: "mc
     })), R = i(() => {
       if (B.value) return e.options;
       const t = /* @__PURE__ */ new Set();
-      return [...e.options, ...$.value].filter((l) => {
+      return [...e.options, ...A.value].filter((l) => {
         const n = l[e.valueField];
         return t.has(String(n)) ? !1 : (t.add(String(n)), !0);
       });
-    }), Se = i(() => B.value ? R.value.map((t) => t[w.Values]).flat() : R.value), we = i(() => new Map(Se.value.map((t) => [String(t[e.valueField]), t]))), ke = i(() => e.dir === ue.Rtl), Ce = i(() => ({
+    }), ne = i(() => B.value ? R.value.map((t) => t[w.Values]).flat() : R.value), Ce = i(() => new Map(ne.value.map((t) => [String(t[e.valueField]), t]))), xe = i(() => e.dir === pe.Rtl), Be = i(() => ({
       "mc-field-select": !0,
       "mc-field-select--error": !!y.errorText.value,
       "mc-field-select--disabled": e.disabled,
       [`mc-field-select--bg-${e.backgroundColor}`]: !!e.backgroundColor,
-      "mc-field-select--is-empty-options-list": Ve.value || e.loading,
-      "mc-field-select--with-preview": e.optionWithPreview && he.value,
+      "mc-field-select--is-empty-options-list": Ee.value || e.loading,
+      "mc-field-select--with-preview": e.optionWithPreview && _e.value,
       "mc-field-select--max-height": !!e.maxHeight,
-      "mc-field-select--rtl": ke.value,
-      "mc-field-select--hide-arrow": !!ge.arrow
-    })), xe = i(() => `${e.title}${e.required ? " *" : ""}`), Be = i(() => {
+      "mc-field-select--rtl": xe.value,
+      "mc-field-select--hide-arrow": !!be.arrow
+    })), Ve = i(() => `${e.title}${e.required ? " *" : ""}`), Te = i(() => {
       const t = ["gray", "dark-gray", "black"], o = ["white"];
-      let l = "gray", n = e.backgroundColor, c = e.backgroundColor, m = "black";
-      return (!e.backgroundColor || o.includes(e.backgroundColor)) && (n = d.component.color), t.includes(e.backgroundColor) && (m = "white", l = "white", n = "black"), e.disabled && !e.backgroundColor && (c = "hover-gray"), {
+      let l = "gray", n = e.backgroundColor, c = e.backgroundColor, p = "black";
+      return (!e.backgroundColor || o.includes(e.backgroundColor)) && (n = m.component.color), t.includes(e.backgroundColor) && (p = "white", l = "white", n = "black"), e.disabled && !e.backgroundColor && (c = "hover-gray"), {
         "--mc-field-select-max-height": e.maxHeight,
-        "--mc-field-select-bg-color": c && d.colors[c],
-        "--mc-field-select-color": d.colors[d.component.color],
-        "--mc-field-select-selected-color": d.colors[d.component.selected],
-        "--mc-field-select-border-color": n && d.colors[n],
-        "--mc-field-select-label-color": d.colors[m],
-        "--mc-field-select-placeholder-color": d.colors[l]
+        "--mc-field-select-bg-color": c && m.colors[c],
+        "--mc-field-select-color": m.colors[m.component.color],
+        "--mc-field-select-selected-color": m.colors[m.component.selected],
+        "--mc-field-select-border-color": n && m.colors[n],
+        "--mc-field-select-label-color": m.colors[p],
+        "--mc-field-select-placeholder-color": m.colors[l]
       };
-    }), Ve = i(() => e.hideSelected && !j.value || !e.options.length ? e.multiple ? B.value ? !1 : Array.isArray(e.modelValue) && e.options.length === e.modelValue.length : !!e.modelValue && R.value?.length === 1 && !j.value : e.options.length === 0 ? !e.options.length : !1), P = i({
+    }), Ee = i(() => e.hideSelected && !L.value || !e.options.length ? e.multiple ? B.value ? !1 : Array.isArray(e.modelValue) && e.options.length === e.modelValue.length : !!e.modelValue && R.value?.length === 1 && !L.value : e.options.length === 0 ? !e.options.length : !1), M = i({
       get() {
         let t = V.value ? e.modelValue || [] : [e.modelValue].filter(Boolean);
         t = t.map((l) => {
-          const n = we.value.get(String(l));
+          const n = Ce.value.get(String(l));
           return {
             [e.titleField]: n?.[e.titleField] || l,
             [e.valueField]: n?.[e.valueField] || l,
@@ -344,25 +344,25 @@ const tt = ["dir"], lt = { class: "mc-field-select__header" }, ot = { class: "mc
         let o = V.value ? Array.isArray(t) ? t : [] : [t];
         o = o.filter(Boolean).map((n) => n[e.valueField]);
         const [l] = o;
-        $e(t), Oe(V.value ? o : l);
+        Ae(t), $e(V.value ? o : l);
       }
-    }), oe = (t = e.options) => {
-      const o = /* @__PURE__ */ new Set(), l = B.value ? t.flatMap((c) => c[w.Values] ?? []) : t, n = [...$.value, ...l];
-      $.value = n.filter((c) => {
-        const m = c[e.valueField];
-        if (o.has(String(m))) return !1;
-        const b = e.modelValue?.constructor === Array ? e.modelValue.map((U) => String(U)).includes(String(c[e.valueField])) : String(c[e.valueField]) === String(e.modelValue);
-        return b && o.add(String(m)), b;
+    }), ae = (t = e.options) => {
+      const o = /* @__PURE__ */ new Set(), l = B.value ? t.flatMap((c) => c[w.Values] ?? []) : t, n = [...A.value, ...l];
+      A.value = n.filter((c) => {
+        const p = c[e.valueField];
+        if (o.has(String(p))) return !1;
+        const b = e.modelValue?.constructor === Array ? e.modelValue.map((X) => String(X)).includes(String(c[e.valueField])) : String(c[e.valueField]) === String(e.modelValue);
+        return b && o.add(String(p)), b;
       });
-    }, ne = (t) => {
+    }, re = (t) => {
       if (!t || t.nodeType !== Node.ELEMENT_NODE || t === document.documentElement)
         return document.documentElement;
       const { overflow: o, overflowY: l } = getComputedStyle(t);
-      if (["auto", "scroll"].some((m) => [o, l].includes(m)))
+      if (["auto", "scroll"].some((p) => [o, l].includes(p)))
         return t;
       const c = t.parentNode;
-      return !c || c.nodeType !== Node.ELEMENT_NODE ? document.documentElement : ne(c);
-    }, Te = (t) => {
+      return !c || c.nodeType !== Node.ELEMENT_NODE ? document.documentElement : re(c);
+    }, Le = (t) => {
       if (!t) return null;
       let o = t.parentElement;
       for (; o && o !== document.body; ) {
@@ -371,7 +371,7 @@ const tt = ["dir"], lt = { class: "mc-field-select__header" }, ot = { class: "mc
         o = o.parentElement;
       }
       return null;
-    }, ae = i(() => ["iPhone", "iPad"].some((t) => navigator?.platform?.includes(t)) && window.visualViewport?.offsetTop || 0), M = et(() => {
+    }, ie = i(() => ["iPhone", "iPad"].some((t) => navigator?.platform?.includes(t)) && window.visualViewport?.offsetTop || 0), D = ot(() => {
       if (!g.value || !x.value) return;
       const {
         top: t = 0,
@@ -379,131 +379,139 @@ const tt = ["dir"], lt = { class: "mc-field-select__header" }, ot = { class: "mc
         height: l = 0,
         width: n = 0,
         left: c = 0
-      } = I.value?.getBoundingClientRect() || {}, m = g.value.getBoundingClientRect(), b = x.value;
+      } = I.value?.getBoundingClientRect() || {}, p = g.value.getBoundingClientRect(), b = x.value;
       if (!b) return;
-      const U = t - m.top, Re = o - m.bottom;
-      if (U >= -l && Re < l) {
-        const v = b.$refs.list, D = Te(v), Pe = D ? D.left : 0, ie = D ? D.top : 0;
-        v.style.width = `${n}px`, v.style.position = "fixed", v.style.left = `${c - Pe}px`;
-        const Me = I.value?.querySelector(".mc-field-select__header")?.offsetHeight, De = 8;
-        let X = e.openDirection;
-        switch (X === Ke.Auto && (X = b?.isAbove ? "top" : "bottom"), X) {
+      const X = t - p.top, De = o - p.bottom;
+      if (X >= -l && De < l) {
+        const v = b.$refs.list, W = Le(v), We = W ? W.left : 0, ue = W ? W.top : 0;
+        v.style.width = `${n}px`, v.style.position = "fixed", v.style.left = `${c - We}px`;
+        const qe = I.value?.querySelector(".mc-field-select__header")?.offsetHeight, je = 8;
+        let K = e.openDirection;
+        switch (K === Ze.Auto && (K = b?.isAbove ? "top" : "bottom"), K) {
           case "top": {
-            const We = t + (te.value ? Me + De : 0) + ae.value - v.getBoundingClientRect().height - 8;
-            v.style.top = `${We - ie}px`, v.style.bottom = "auto";
+            const He = t + (le.value ? qe + je : 0) + ie.value - v.getBoundingClientRect().height - 8;
+            v.style.top = `${He - ue}px`, v.style.bottom = "auto";
             break;
           }
           case "bottom":
-            v.style.bottom = "auto", v.style.top = `${t + ae.value + l - ie}px`;
+            v.style.bottom = "auto", v.style.top = `${t + ie.value + l - ue}px`;
             break;
         }
       } else if (!/Android/i.test(navigator.userAgent))
         return b.deactivate();
-    }, 16), Ee = () => {
-      G(), g.value = ne(x.value.$el) || document.documentElement, g.value.addEventListener("scroll", M), A.value?.disconnect(), A.value = new ResizeObserver(M), A.value.observe(g.value);
-    }, Le = (t) => {
+    }, 16), Fe = () => {
+      G(), g.value = re(x.value.$el) || document.documentElement, g.value.addEventListener("scroll", D), z.value?.disconnect(), z.value = new ResizeObserver(D), z.value.observe(g.value);
+    }, se = (t) => {
       const o = { [e.titleField]: t, [e.valueField]: t };
-      $.value.push(o), P.value = V.value ? [...P.value, o] : o, C("tag", t);
-    }, Fe = (t) => {
-      j.value = t, C("search-change", t);
+      A.value.push(o), M.value = V.value ? [...M.value, o] : o, C("tag", t);
     }, Oe = (t) => {
-      y.toggleErrorVisible(), C("update:modelValue", t);
+      L.value = t, C("search-change", t);
     }, $e = (t) => {
+      y.toggleErrorVisible(), C("update:modelValue", t);
+    }, Ae = (t) => {
       C("original-input", t);
-    }, Ae = () => {
+    }, ze = () => {
       const t = x.value;
       if (!t?.$refs?.list) return;
       const o = t.$refs.list;
-      if (o.parentNode?.nodeName === "BODY" || N.value?.contains(o)) return;
-      z.value = o.parentElement, Y.value = o.nextSibling;
+      if (o.parentNode?.nodeName === "BODY" || P.value?.contains(o)) return;
+      N.value = o.parentElement, Y.value = o.nextSibling;
       const l = document.createElement("div");
       l.className = "mc-field-select mc-field-select--list-portal";
       const n = document.createElement("div");
-      n.className = "multiselect", n.appendChild(o), l.appendChild(n), document.body.appendChild(l), N.value = l, L.value = !0, ce(M);
-    }, re = () => {
-      if (!L.value || !z.value) return;
-      const o = x.value?.$refs?.list, l = N.value;
-      o && l?.contains(o) && z.value.insertBefore(o, Y.value), l?.remove(), L.value = !1, z.value = null, Y.value = null, N.value = null;
-    }, ze = () => {
-      C("handle-open"), e.renderAbsoluteList && (Ee(), ce(Ae));
-    }, G = () => {
-      A.value?.disconnect(), g.value && (g.value.removeEventListener("scroll", M), g.value = null);
+      n.className = "multiselect", n.appendChild(o), l.appendChild(n), document.body.appendChild(l), P.value = l, F.value = !0, me(D);
+    }, ce = () => {
+      if (!F.value || !N.value) return;
+      const o = x.value?.$refs?.list, l = P.value;
+      o && l?.contains(o) && N.value.insertBefore(o, Y.value), l?.remove(), F.value = !1, N.value = null, Y.value = null, P.value = null;
     }, Ne = () => {
-      L.value && re(), G(), C("handle-close");
+      C("handle-open"), e.renderAbsoluteList && (Fe(), me(ze));
+    }, G = () => {
+      z.value?.disconnect(), g.value && (g.value.removeEventListener("scroll", D), g.value = null);
+    }, U = d(!1), Pe = () => {
+      U.value = !0;
+    }, Re = () => {
+      U.value ? U.value = !1 : e.taggable && Me(), F.value && ce(), G(), C("handle-close");
+    }, Me = () => {
+      const t = L.value?.trim();
+      !t || ne.value.some(
+        (l) => String(l[e.titleField]).toLowerCase() === t.toLowerCase()
+      ) || (se(t), L.value = "");
     };
-    return Ie(() => {
-      L.value && re(), G();
-    }), K(
+    return Ue(() => {
+      F.value && ce(), G();
+    }), J(
       () => e.options,
       (t) => {
-        oe(t);
+        ae(t);
       },
       { immediate: !0 }
-    ), K(
+    ), J(
       () => e.modelValue,
       () => {
-        oe();
+        ae();
       },
       { immediate: !0, deep: !0 }
-    ), K(
+    ), J(
       () => e.errors,
       (t) => {
         y.setError(t);
       }
-    ), (t, o) => (s(), F("div", {
+    ), (t, o) => (s(), O("div", {
       ref_key: "field_select_wrapper_ref",
       ref: I,
       dir: k.dir,
-      class: se(Ce.value),
-      style: Ye(Be.value)
+      class: de(Be.value),
+      style: Xe(Te.value)
     }, [
-      T("div", lt, [
-        O(t.$slots, "header", {}, () => [
-          te.value ? (s(), u(h, {
+      T("div", at, [
+        $(t.$slots, "header", {}, () => [
+          le.value ? (s(), u(h, {
             key: 0,
             "max-width": "100%",
-            weight: a(Q).Medium
+            weight: a(Z).Medium
           }, {
             default: r(() => [
-              E(f(xe.value), 1)
+              E(f(Ve.value), 1)
             ]),
             _: 1
           }, 8, ["weight"])) : _("", !0)
         ])
       ]),
-      T("div", ot, [
-        S(a(Ue), Ge({
+      T("div", rt, [
+        S(a(Je), Ke({
           ref_key: "field_select_ref",
           ref: x,
-          modelValue: P.value,
-          "onUpdate:modelValue": o[0] || (o[0] = (l) => P.value = l)
-        }, _e.value, {
-          onTag: Le,
-          onSearchChange: Fe,
-          onOpen: ze,
-          onClose: Ne
-        }), J({
+          modelValue: M.value,
+          "onUpdate:modelValue": o[0] || (o[0] = (l) => M.value = l)
+        }, ke.value, {
+          onTag: se,
+          onSelect: Pe,
+          onSearchChange: Oe,
+          onOpen: Ne,
+          onClose: Re
+        }), Q({
           singleLabel: r(({ option: l }) => [
-            e.optionWithPreview ? (s(), u(a(Z), {
+            e.optionWithPreview ? (s(), u(a(ee), {
               key: 0,
               class: "option__desc",
-              size: a(de).L
-            }, J({
+              size: a(fe).L
+            }, Q({
               top: r(() => [
                 S(h, {
-                  weight: a(Q).SemiBold,
+                  weight: a(Z).SemiBold,
                   "html-data": l[e.titleField]
                 }, null, 8, ["weight", "html-data"])
               ]),
               right: r(() => [
-                O(t.$slots, "arrow")
+                $(t.$slots, "arrow")
               ]),
               _: 2
             }, [
               l.icon || l.avatar ? {
                 name: "left",
                 fn: r(() => [
-                  l.icon ? (s(), u(q, {
+                  l.icon ? (s(), u(j, {
                     key: 0,
                     name: l.icon,
                     color: l.iconColor || "main",
@@ -532,43 +540,43 @@ const tt = ["dir"], lt = { class: "mc-field-select__header" }, ot = { class: "mc
                 ]),
                 key: "1"
               } : void 0
-            ]), 1032, ["size"])) : (s(), F("div", nt, [
-              le.value ? (s(), F("div", at, [
+            ]), 1032, ["size"])) : (s(), O("div", it, [
+              oe.value ? (s(), O("div", st, [
                 k.avatar ? (s(), u(a(H), {
                   key: 0,
                   src: k.avatar
-                }, null, 8, ["src"])) : (s(), u(q, {
+                }, null, 8, ["src"])) : (s(), u(j, {
                   key: 1,
                   color: l.iconColor || "main",
                   name: e.icon
                 }, null, 8, ["color", "name"]))
               ])) : _("", !0),
               T("div", {
-                class: se(["mc-field-select__label-text", le.value ? "mc-field-select__label-text--indent-left" : ""])
+                class: de(["mc-field-select__label-text", oe.value ? "mc-field-select__label-text--indent-left" : ""])
               }, f(l ? l[e.titleField] : k.placeholder), 3)
             ]))
           ]),
           noResult: r(() => [
-            O(t.$slots, "noResult", {}, () => [
-              T("span", null, f(ye.value), 1)
+            $(t.$slots, "noResult", {}, () => [
+              T("span", null, f(Se.value), 1)
             ])
           ]),
           noOptions: r(() => [
-            O(t.$slots, "noOptions", {}, () => [
-              T("span", null, f(be.value), 1)
+            $(t.$slots, "noOptions", {}, () => [
+              T("span", null, f(we.value), 1)
             ])
           ]),
           tag: r((l) => [
-            S(a(ve), {
-              size: a(Qe).Xs,
+            S(a(ye), {
+              size: a(tt).Xs,
               class: "multiselect__tag",
-              variation: `${a(d).component.selected}-invert`,
+              variation: `${a(m).component.selected}-invert`,
               "text-color": "black",
               closable: !l?.option?.hasOwnProperty("is_closable") || l?.option?.is_closable,
               onClose: (n) => l.remove(l.option)
             }, {
               button: r(() => [
-                S(q, {
+                S(j, {
                   size: "250",
                   name: "cancel"
                 })
@@ -593,14 +601,14 @@ const tt = ["dir"], lt = { class: "mc-field-select__header" }, ot = { class: "mc
                 ]),
                 _: 2
               }, 1024)) : _("", !0),
-              e.optionWithPreview ? (s(), u(a(Z), {
+              e.optionWithPreview ? (s(), u(a(ee), {
                 key: 1,
                 class: "option__desc",
-                size: a(de).L
-              }, J({
+                size: a(fe).L
+              }, Q({
                 top: r(() => [
                   S(h, {
-                    weight: a(Q).SemiBold,
+                    weight: a(Z).SemiBold,
                     "html-data": l[e.titleField]
                   }, null, 8, ["weight", "html-data"])
                 ]),
@@ -609,7 +617,7 @@ const tt = ["dir"], lt = { class: "mc-field-select__header" }, ot = { class: "mc
                 l.icon || l.avatar ? {
                   name: "left",
                   fn: r(() => [
-                    l.icon ? (s(), u(q, {
+                    l.icon ? (s(), u(j, {
                       key: 0,
                       name: l.icon,
                       color: l.iconColor || "main",
@@ -635,12 +643,12 @@ const tt = ["dir"], lt = { class: "mc-field-select__header" }, ot = { class: "mc
                   ]),
                   key: "1"
                 } : void 0
-              ]), 1032, ["size"])) : (s(), u(a(fe), {
+              ]), 1032, ["size"])) : (s(), u(a(he), {
                 key: 2,
                 class: "mc-field-select__options-tooltip-target",
                 "max-width": "m",
                 color: "black",
-                placement: a(Je).Top,
+                placement: a(et).Top,
                 content: l[e.titleField]
               }, {
                 default: r(() => [
@@ -653,23 +661,24 @@ const tt = ["dir"], lt = { class: "mc-field-select__header" }, ot = { class: "mc
           } : void 0
         ]), 1040, ["modelValue"])
       ]),
-      a(y).errorText.value || e.helpText || t.$slots.footer ? (s(), F("div", rt, [
+      a(y).errorText.value || e.helpText || t.$slots.footer ? (s(), O("div", ct, [
         a(y).errorText.value ? (s(), u(h, {
           key: 0,
           "tag-name": "div",
           color: "red",
-          variation: a(me).Overline,
+          variation: a(ve).Overline,
           "max-width": "100%",
           "html-data": a(y).errorText.value
         }, null, 8, ["variation", "html-data"])) : _("", !0),
-        a(y).errorText.value ? (s(), F("br", it)) : _("", !0),
-        O(t.$slots, "footer", {}, () => [
+        a(y).errorText.value ? (s(), O("br", ut)) : _("", !0),
+        $(t.$slots, "footer", {}, () => [
           e.helpText ? (s(), u(h, {
             key: 0,
             "tag-name": "div",
-            variation: a(me).Overline,
+            variation: a(ve).Overline,
             color: "gray",
-            "max-width": "100%"
+            "max-width": "100%",
+            "pre-line": ""
           }, {
             default: r(() => [
               E(f(e.helpText), 1)
@@ -678,9 +687,9 @@ const tt = ["dir"], lt = { class: "mc-field-select__header" }, ot = { class: "mc
           }, 8, ["variation"])) : _("", !0)
         ])
       ])) : _("", !0)
-    ], 14, tt));
+    ], 14, nt));
   }
 });
 export {
-  Ct as default
+  Vt as default
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "mediacube-ui-v2",
-  "version": "0.0.342",
+  "version": "0.0.344",
   "license": "MIT",
   "description": "Design system for Mediacube services",
   "sideEffects": [