@ironsource/shared-ui 2.2.0-test.22 → 2.2.0-test.24

package/components/tag/Tag.vue2.js

@@ -1,10 +1,10 @@
- import "../../Tag.vue_vue_type_style_index_0_scoped_78f19cb0_lang.css"; import { defineComponent as J, ref as s, computed as d, watch as S, nextTick as N, openBlock as f, createBlock as C, unref as l, withCtx as m, createElementVNode as E, createVNode as w, createTextVNode as V, toDisplayString as T, normalizeClass as p, normalizeStyle as R, withModifiers as b, createCommentVNode as $, withDirectives as O, createElementBlock as H, isRef as Q, withKeys as K, vModelText as X, vShow as Z } from "vue";
-import D from "../typography/v4/Typography.vue.js";
-import W from "../icon/v4/IconV4.vue.js";
+ import "../../Tag.vue_vue_type_style_index_0_scoped_7c9f1b76_lang.css"; import { defineComponent as Y, ref as c, computed as d, watch as I, nextTick as R, openBlock as m, createBlock as M, unref as t, withCtx as b, createVNode as z, createTextVNode as P, toDisplayString as S, normalizeClass as h, normalizeStyle as $, withModifiers as g, createElementVNode as Z, createCommentVNode as H, withDirectives as K, createElementBlock as O, isRef as _, withKeys as D, vModelText as ee, vShow as ae } from "vue";
+import W from "../typography/v4/Typography.vue.js";
+import F from "../icon/v4/IconV4.vue.js";
 import "../icon/v4/IconFlag.vue.js";
-import _ from "../chip/v4/ChipV4.vue.js";
-import ee from "../popover/v4/PopoverV4.vue.js";
-const ae = { class: "tag-max-length-tooltip" }, le = { class: "tag-content" }, te = ["placeholder", "maxlength", "onKeyup"], se = /* @__PURE__ */ J({
+import te from "../chip/v4/ChipV4.vue.js";
+import le from "../tooltip/v4/TooltipV4.vue.js";
+const re = { class: "tag-content" }, ie = ["placeholder", "maxlength", "onKeyup"], ce = /* @__PURE__ */ Y({
   __name: "Tag",
   props: {
     label: { default: "" },
@@ -22,38 +22,66 @@ const ae = { class: "tag-max-length-tooltip" }, le = { class: "tag-content" }, t
     editable: { type: Boolean, default: !1 },
     selectable: { type: Boolean, default: !0 },
     maxLength: { default: void 0 },
-    maxLengthTooltip: { default: "You have reached the maximum number of characters" }
+    maxLengthTooltip: { default: "Character limit reached" },
+    validationPattern: { default: "" },
+    validationErrorText: { default: "Invalid format" }
   },
-  emits: ["update:label", "remove", "stopEditing", "update:isSelected"],
-  setup(a, { emit: v }) {
-    const e = a, r = s(!1), y = s(null), h = s(void 0), k = s(!1), u = s(!1), i = s(e.isSelected || e.editable), z = d(() => !e.label && !r.value && e.placeholder), I = d(() => (console.log(
-      "isTooltipOpen",
-      e.maxLength && o.value.length >= e.maxLength && r.value
-    ), e.maxLength && o.value.length >= e.maxLength && r.value)), g = d(() => e.disabled || !e.selectable || r.value ? "outlined" : u.value ? "filled" : !i.value && !e.editable ? "outlined" : e.variant), F = d(() => e.disabled ? "default" : e.isInvalid ? "error" : i.value || !i.value && e.editable || !e.selectable ? e.color : "default"), o = d({
+  emits: ["update:label", "remove", "stopEditing", "update:isSelected", "validationError", "validationSuccess"],
+  setup(a, { emit: u }) {
+    const e = a, r = c(!1), k = c(null), x = c(void 0), T = c(!1), s = c(!1), o = c(e.isSelected || e.editable), y = d(() => {
+      if (!e.validationPattern || !l.value)
+        return !0;
+      try {
+        return new RegExp(e.validationPattern).test(l.value);
+      } catch {
+        return !0;
+      }
+    }), v = d(() => !y.value && r.value && l.value), B = d(() => !e.label && !r.value && e.placeholder), w = d(() => e.maxLength && l.value.length >= e.maxLength && r.value), p = d(() => e.disabled || !e.selectable || r.value ? "outlined" : s.value ? "filled" : !o.value && !e.editable ? "outlined" : e.variant), U = d(() => e.disabled ? "default" : e.isInvalid || v.value ? "error" : o.value || !o.value && e.editable || !e.selectable ? e.color : "default"), l = d({
       get: () => e.label,
       set: (n) => {
-        v("update:label", n);
+        u("update:label", n);
+      }
+    });
+    I(
+      () => [l.value, r.value],
+      () => {
+        e.validationPattern && r.value && l.value && (y.value ? u("validationSuccess") : u("validationError", e.validationErrorText));
+      }
+    );
+    const L = c(null), C = () => L.value?.focus(), j = () => {
+      u("remove");
+    }, q = async () => {
+      e.disabled || !e.selectable || (e.editable ? (r.value = !0, await R(), C()) : (o.value = !o.value, u("update:isSelected", o.value)));
+    }, A = () => {
+      if (e.validationPattern && l.value && !y.value) {
+        setTimeout(() => {
+          C();
+        }, 0);
+        return;
+      }
+      E();
+    }, E = () => {
+      if (e.validationPattern && l.value && !y.value) {
+        setTimeout(() => {
+          C();
+        }, 0);
+        return;
       }
-    }), M = s(null), P = () => M.value?.focus(), U = async () => {
-      e.disabled || !e.selectable || (e.editable ? (r.value = !0, await N(), P()) : (i.value = !i.value, v("update:isSelected", i.value)));
-    }, Y = () => {
-      v("stopEditing"), x();
-    }, x = () => {
-      r.value = !1, !o.value && !e.placeholder && v("remove");
+      r.value = !1, !l.value && !e.placeholder && u("remove"), u("stopEditing");
     };
-    S(
-      () => [o.value, e.placeholder, r.value],
+    I(
+      () => [l.value, e.placeholder, r.value],
       async () => {
-        await N(), r.value && y.value ? h.value = y.value.offsetWidth + "px" : h.value = void 0;
+        await R(), r.value && k.value ? x.value = k.value.offsetWidth + "px" : x.value = void 0;
       },
       { immediate: !0 }
-    ), S(
+    ), I(
       () => e.editable,
       () => {
-        e.editable && (i.value = !0);
+        e.editable && (o.value = !0);
       }
     );
-    const B = {
+    const V = {
       default: "var(--default-outlined-border)",
       primary: "var(--primary-main)",
       info: "var(--info-dark)",
@@ -61,7 +89,7 @@ const ae = { class: "tag-max-length-tooltip" }, le = { class: "tag-content" }, t
       warning: "var(--warning-main)",
       success: "var(--success-main)",
       dark: "var(--common-divider)"
-    }, L = {
+    }, N = {
       default: "var(--action-active)",
       primary: "var(--primary-dark)",
       info: "var(--info-dark)",
@@ -69,7 +97,7 @@ const ae = { class: "tag-max-length-tooltip" }, le = { class: "tag-content" }, t
       warning: "var(--warning-dark)",
       success: "var(--success-dark)",
       dark: "var(--common-divider)"
-    }, j = {
+    }, G = {
       default: "var(--action-active)",
       primary: "var(--primary-darker)",
       info: "var(--info-darker)",
@@ -77,145 +105,145 @@ const ae = { class: "tag-max-length-tooltip" }, le = { class: "tag-content" }, t
       warning: "var(--warning-darker)",
       success: "var(--success-darker)",
       dark: "var(--common-divider)"
-    }, q = d(() => {
+    }, J = d(() => {
       if (e.disabled)
         return "var(--action-disabled)";
       const n = e.isInvalid ? "error" : e.color;
-      return k.value ? j[n] : L[n];
-    }), A = d(() => {
+      return T.value ? G[n] : N[n];
+    }), Q = d(() => {
       if (e.disabled)
         return "var(--action-disabled)";
       const n = e.isInvalid ? "error" : e.color;
-      return i.value || !e.selectable ? L[n] : "var(--action-active)";
-    }), G = d(() => {
+      return o.value || !e.selectable ? N[n] : "var(--action-active)";
+    }), X = d(() => {
       if (e.editable && e.variant !== "outlined" || !e.selectable) {
-        const n = r.value ? B[e.color] : "var(--primary-main-50-p)";
+        const n = r.value ? V[e.color] : "var(--primary-main-50-p)";
         return {
-          "--outline-color": e.isInvalid ? B.error : n
+          "--outline-color": e.isInvalid ? V.error : n
         };
       }
-      return u.value && e.variant !== "outlined" && e.color === "primary" && !e.editable ? {
-        "--outline-color": i.value ? "var(--primary-main-50-p)" : "var(--action-active)"
+      return s.value && e.variant !== "outlined" && e.color === "primary" && !e.editable ? {
+        "--outline-color": o.value ? "var(--primary-main-50-p)" : "var(--action-active)"
       } : {};
     });
-    return (n, t) => (f(), C(l(ee), {
+    return (n, i) => (m(), M(t(le), {
       placement: "top",
-      text: a.maxLengthTooltip,
-      "is-open": l(I),
-      disabled: !l(I),
+      text: t(v) ? a.validationErrorText : a.maxLengthTooltip,
+      "is-open": t(w) || t(v),
+      shown: t(w) || t(v).length > 0,
+      disabled: !t(w) && !t(v),
+      trigger: "click",
       distance: 10,
       skidding: 10
     }, {
-      content: m(() => [
-        E("div", ae, [
-          w(l(D), { variant: "body2" }, {
-            default: m(() => [
-              V(T(a.maxLengthTooltip), 1)
-            ]),
-            _: 1
-          })
-        ])
+      tooltip: b(() => [
+        z(t(W), { variant: "body2" }, {
+          default: b(() => [
+            P(S(t(v) ? a.validationErrorText : a.maxLengthTooltip), 1)
+          ]),
+          _: 1
+        })
       ]),
-      trigger: m(() => [
-        w(l(_), {
-          class: p({
+      default: b(() => [
+        z(t(te), {
+          class: h({
             "rounded-tag": a.rounded,
-            "tag-editing": r.value && l(g) !== "outlined",
+            "tag-editing": r.value && t(p) !== "outlined",
             // outlined chips have an outline
-            "tag-hover-outline": a.label && u.value && l(g) !== "outlined",
+            "tag-hover-outline": a.label && s.value && t(p) !== "outlined",
             // outlined chips have an outline
-            "unselected-tag-hover-outline": a.label && u.value && l(g) !== "outlined" && !i.value && !a.editable,
+            "unselected-tag-hover-outline": a.label && s.value && t(p) !== "outlined" && !o.value && !a.editable,
             // for unselected tags that are not editable, we want to show a hover outline
             "tag-disabled": a.disabled,
-            "empty-tag": l(z),
-            "unselected-tag": !i.value && a.selectable && a.label && !u.value,
+            "empty-tag": t(B),
+            "unselected-tag": !o.value && a.selectable && a.label && !s.value,
             "editable-tag": a.editable && !a.disabled
           }),
-          label: l(o),
+          label: t(l),
           "test-id": a.testId,
-          color: l(F),
+          color: t(U),
           size: a.size,
-          variant: l(g),
+          variant: t(p),
           disabled: a.disabled,
-          style: R(l(G)),
-          onMouseover: t[5] || (t[5] = (c) => u.value = !0),
-          onMouseleave: t[6] || (t[6] = (c) => u.value = !1),
-          onClick: b(U, ["stop"])
+          style: $(t(X)),
+          onMouseover: i[4] || (i[4] = (f) => s.value = !0),
+          onMouseleave: i[5] || (i[5] = (f) => s.value = !1),
+          onClick: g(q, ["stop"])
         }, {
-          default: m(() => [
-            E("div", le, [
-              a.iconName ? (f(), C(l(W), {
+          default: b(() => [
+            Z("div", re, [
+              a.iconName ? (m(), M(t(F), {
                 key: 0,
                 name: a.iconName,
                 size: "16px",
-                color: l(A),
+                color: t(Q),
                 class: "tag-icon",
                 type: a.iconType
-              }, null, 8, ["name", "color", "type"])) : $("", !0),
-              r.value ? O((f(), H("input", {
+              }, null, 8, ["name", "color", "type"])) : H("", !0),
+              r.value ? K((m(), O("input", {
                 key: 2,
                 ref_key: "inputRef",
-                ref: M,
-                "onUpdate:modelValue": t[0] || (t[0] = (c) => Q(o) ? o.value = c : null),
+                ref: L,
+                "onUpdate:modelValue": i[0] || (i[0] = (f) => _(l) ? l.value = f : null),
                 placeholder: a.placeholder,
-                class: p(["tag-input", { "tag-input-outline": a.variant === "outlined" }]),
+                class: h(["tag-input", { "tag-input-outline": a.variant === "outlined" }]),
                 spellcheck: "false",
-                style: R({ width: h.value }),
+                style: $({ width: x.value }),
                 maxlength: a.maxLength,
-                onBlur: Y,
+                onBlur: A,
                 onKeyup: [
-                  K(b(x, ["prevent"]), ["enter"]),
-                  K(b(x, ["prevent"]), ["esc"])
+                  D(g(E, ["prevent"]), ["enter"]),
+                  D(g(E, ["prevent"]), ["esc"])
                 ]
-              }, null, 46, te)), [
+              }, null, 46, ie)), [
                 [
-                  X,
-                  l(o),
+                  ee,
+                  t(l),
                   void 0,
                   { trim: !0 }
                 ]
-              ]) : (f(), C(l(D), {
+              ]) : (m(), M(t(W), {
                 key: 1,
                 variant: "chipLabel",
-                class: p(["tag-label", {
-                  "tag-label--placeholder": !l(o) && a.placeholder,
+                class: h(["tag-label", {
+                  "tag-label--placeholder": !t(l) && a.placeholder,
                   "tag-label--disabled": a.disabled
                 }])
               }, {
-                default: m(() => [
-                  V(T(l(o) || a.placeholder), 1)
+                default: b(() => [
+                  P(S(t(l) || a.placeholder), 1)
                 ]),
                 _: 1
               }, 8, ["class"])),
-              r.value ? (f(), H("span", {
+              r.value ? (m(), O("span", {
                 key: 3,
                 ref_key: "sizerRef",
-                ref: y,
+                ref: k,
                 class: "tag-input-sizer"
-              }, T(l(o) || a.placeholder || ""), 513)) : $("", !0)
+              }, S(t(l) || a.placeholder || ""), 513)) : H("", !0)
             ]),
-            O(w(l(W), {
-              class: p(["clear-button", { "clear-button--invalid": a.isInvalid }]),
+            K(z(t(F), {
+              class: h(["clear-button", { "clear-button--invalid": a.isInvalid || t(v) }]),
               name: "x-circle",
               size: "16px",
               type: "fill",
-              color: l(q),
-              onMousedown: t[1] || (t[1] = b(() => {
+              color: t(J),
+              onMousedown: i[1] || (i[1] = g(() => {
               }, ["prevent"])),
-              onMouseover: t[2] || (t[2] = (c) => k.value = !0),
-              onMouseleave: t[3] || (t[3] = (c) => k.value = !1),
-              onClick: t[4] || (t[4] = b((c) => v("remove"), ["stop"]))
-            }, null, 8, ["class", "color"]), [
-              [Z, a.editable && !l(z) && a.selectable]
+              onMouseover: i[2] || (i[2] = (f) => T.value = !0),
+              onMouseleave: i[3] || (i[3] = (f) => T.value = !1),
+              onClick: g(j, ["stop"])
+            }, null, 8, ["class", "color", "onClick"]), [
+              [ae, a.editable && a.selectable && (r.value || !t(B))]
             ])
           ]),
           _: 1
         }, 8, ["class", "label", "test-id", "color", "size", "variant", "disabled", "style", "onClick"])
       ]),
       _: 1
-    }, 8, ["text", "is-open", "disabled"]));
+    }, 8, ["text", "is-open", "shown", "disabled"]));
   }
 });
 export {
-  se as default
+  ce as default
 };

package/components/tag/index.d.ts

@@ -65,11 +65,21 @@ declare const TagTypes: () => import("vue").DefineComponent<{
         type: import("vue").PropType<string>;
         default: string;
     };
+    validationPattern: {
+        type: import("vue").PropType<string>;
+        default: string;
+    };
+    validationErrorText: {
+        type: import("vue").PropType<string>;
+        default: string;
+    };
 }, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     "update:label": (value: string) => void;
     remove: () => void;
     stopEditing: () => void;
     "update:isSelected": (value: boolean) => void;
+    validationError: (value: string) => void;
+    validationSuccess: () => void;
 }, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
     label: {
         type: import("vue").PropType<string>;
@@ -136,11 +146,21 @@ declare const TagTypes: () => import("vue").DefineComponent<{
         type: import("vue").PropType<string>;
         default: string;
     };
+    validationPattern: {
+        type: import("vue").PropType<string>;
+        default: string;
+    };
+    validationErrorText: {
+        type: import("vue").PropType<string>;
+        default: string;
+    };
 }>> & {
     onRemove?: () => any;
     "onUpdate:label"?: (value: string) => any;
     onStopEditing?: () => any;
     "onUpdate:isSelected"?: (value: boolean) => any;
+    onValidationError?: (value: string) => any;
+    onValidationSuccess?: () => any;
 }, {
     label: string;
     testId: string;
@@ -157,5 +177,7 @@ declare const TagTypes: () => import("vue").DefineComponent<{
     isInvalid: boolean;
     selectable: boolean;
     maxLengthTooltip: string;
+    validationPattern: string;
+    validationErrorText: string;
 }>[];
 export { Tag, TagTypes };

package/index.d.ts

@@ -29,6 +29,10 @@ declare const _default: {
             $data: {};
             $props: Partial<{
                 testId: string;
+                delay: number | {
+                    show: number;
+                    hide: number;
+                };
                 placement: import("floating-vue").Placement;
                 disabled: boolean;
                 distance: number;
@@ -43,6 +47,13 @@ declare const _default: {
                     type: import("vue").PropType<string>;
                     default: string;
                 };
+                delay: {
+                    type: import("vue").PropType<number | {
+                        show: number;
+                        hide: number;
+                    }>;
+                    default: number;
+                };
                 placement: {
                     type: import("vue").PropType<import("floating-vue").Placement>;
                     default: string;
@@ -81,7 +92,7 @@ declare const _default: {
                 };
             }>> & {
                 onIsOpen?: (value: boolean) => any;
-            } & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, "testId" | "placement" | "disabled" | "distance" | "container" | "autoHide" | "popperClass" | "isOpen" | "trigger" | "skidding">;
+            } & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, "testId" | "delay" | "placement" | "disabled" | "distance" | "container" | "autoHide" | "popperClass" | "isOpen" | "trigger" | "skidding">;
             $attrs: {
                 [x: string]: unknown;
             };
@@ -100,6 +111,13 @@ declare const _default: {
                     type: import("vue").PropType<string>;
                     default: string;
                 };
+                delay: {
+                    type: import("vue").PropType<number | {
+                        show: number;
+                        hide: number;
+                    }>;
+                    default: number;
+                };
                 placement: {
                     type: import("vue").PropType<import("floating-vue").Placement>;
                     default: string;
@@ -144,6 +162,10 @@ declare const _default: {
                 isOpen: (value: boolean) => void;
             }, string, {
                 testId: string;
+                delay: number | {
+                    show: number;
+                    hide: number;
+                };
                 placement: import("floating-vue").Placement;
                 disabled: boolean;
                 distance: number;
@@ -178,6 +200,13 @@ declare const _default: {
                 type: import("vue").PropType<string>;
                 default: string;
             };
+            delay: {
+                type: import("vue").PropType<number | {
+                    show: number;
+                    hide: number;
+                }>;
+                default: number;
+            };
             placement: {
                 type: import("vue").PropType<import("floating-vue").Placement>;
                 default: string;
@@ -227,6 +256,13 @@ declare const _default: {
             type: import("vue").PropType<string>;
             default: string;
         };
+        delay: {
+            type: import("vue").PropType<number | {
+                show: number;
+                hide: number;
+            }>;
+            default: number;
+        };
         placement: {
             type: import("vue").PropType<import("floating-vue").Placement>;
             default: string;
@@ -271,6 +307,10 @@ declare const _default: {
         isOpen: (value: boolean) => void;
     }, string, {
         testId: string;
+        delay: number | {
+            show: number;
+            hide: number;
+        };
         placement: import("floating-vue").Placement;
         disabled: boolean;
         distance: number;
@@ -292,6 +332,10 @@ declare const _default: {
             $data: {};
             $props: Partial<{
                 testId: string;
+                delay: number | {
+                    show: number;
+                    hide: number;
+                };
                 placement: import("floating-vue").Placement;
                 disabled: boolean;
                 distance: number;
@@ -306,6 +350,13 @@ declare const _default: {
                     type: import("vue").PropType<string>;
                     default: string;
                 };
+                delay: {
+                    type: import("vue").PropType<number | {
+                        show: number;
+                        hide: number;
+                    }>;
+                    default: number;
+                };
                 placement: {
                     type: import("vue").PropType<import("floating-vue").Placement>;
                     default: string;
@@ -344,7 +395,7 @@ declare const _default: {
                 };
             }>> & {
                 onIsOpen?: (value: boolean) => any;
-            } & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, "testId" | "placement" | "disabled" | "distance" | "container" | "autoHide" | "popperClass" | "isOpen" | "trigger" | "skidding">;
+            } & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, "testId" | "delay" | "placement" | "disabled" | "distance" | "container" | "autoHide" | "popperClass" | "isOpen" | "trigger" | "skidding">;
             $attrs: {
                 [x: string]: unknown;
             };
@@ -363,6 +414,13 @@ declare const _default: {
                     type: import("vue").PropType<string>;
                     default: string;
                 };
+                delay: {
+                    type: import("vue").PropType<number | {
+                        show: number;
+                        hide: number;
+                    }>;
+                    default: number;
+                };
                 placement: {
                     type: import("vue").PropType<import("floating-vue").Placement>;
                     default: string;
@@ -407,6 +465,10 @@ declare const _default: {
                 isOpen: (value: boolean) => void;
             }, string, {
                 testId: string;
+                delay: number | {
+                    show: number;
+                    hide: number;
+                };
                 placement: import("floating-vue").Placement;
                 disabled: boolean;
                 distance: number;
@@ -441,6 +503,13 @@ declare const _default: {
                 type: import("vue").PropType<string>;
                 default: string;
             };
+            delay: {
+                type: import("vue").PropType<number | {
+                    show: number;
+                    hide: number;
+                }>;
+                default: number;
+            };
             placement: {
                 type: import("vue").PropType<import("floating-vue").Placement>;
                 default: string;
@@ -490,6 +559,13 @@ declare const _default: {
             type: import("vue").PropType<string>;
             default: string;
         };
+        delay: {
+            type: import("vue").PropType<number | {
+                show: number;
+                hide: number;
+            }>;
+            default: number;
+        };
         placement: {
             type: import("vue").PropType<import("floating-vue").Placement>;
             default: string;
@@ -534,6 +610,10 @@ declare const _default: {
         isOpen: (value: boolean) => void;
     }, string, {
         testId: string;
+        delay: number | {
+            show: number;
+            hide: number;
+        };
         placement: import("floating-vue").Placement;
         disabled: boolean;
         distance: number;

package/index.js

@@ -1,4 +1,4 @@
-import './MenuItem.vue_vue_type_style_index_0_scoped_67e53b85_lang.css';
+import './MultiBar.vue_vue_type_style_index_0_scoped_c4395fb6_lang.css';
 import { AppTriggerTypes as eo } from "./components/appTrigger/index.js";
 import { AutocompleteDropdownTypes as mo } from "./components/autocompleteDropdown/index.js";
 import { MenuItemTypes as ao } from "./components/menuItem/index.js";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ironsource/shared-ui",
-  "version": "2.2.0-test.22",
+  "version": "2.2.0-test.24",
   "engines": {
     "npm": ">=7.0.0",
     "node": ">=16.0.0"
@@ -47,7 +47,8 @@
     "upload:visual": "aws s3 cp ./visual-tests s3://mobile-shared-ui-platform/visual-tests/$FOLDER  --recursive  --exclude '.gitkeep' ",
     "release": "commit-and-tag-version",
     "pw:ci": "cd e2e/playwright && BASE_URL=http://localhost:6006/ npx playwright test --reporter=list --shard=${{ matrix.shardIndex }}/${{ matrix.shardTotal }}",
-    "test-storybook-pw": "concurrently 'npm run storybook:dist:pw --silent' 'npx wait-on http://localhost:6006 && npm run pw:ci'  --kill-others --success first"
+    "test-storybook-pw": "concurrently 'npm run storybook:dist:pw --silent' 'npx wait-on http://localhost:6006 && npm run pw:ci'  --kill-others --success first",
+    "migrate-colors": "node scripts/migrate-colors.mjs"
   },
   "dependencies": {
     "@phosphor-icons/vue": "^2.1.6",
@@ -227,6 +228,7 @@
     "./banner": "./components/banner/Banner.vue.js",
     "./alert": "./components/alert/index.js",
     "./link": "./components/link/index.js",
+    "./helpText": "./components/helpText/index.js",
     "./multibar": "./components/multibar/index.js",
     "./typography": "./components/typography/v4/index.js",
     "./themeWrapper": "./components/ThemeWrapper/index.js",
@@ -237,7 +239,8 @@
     "./sortableList": "./components/sortableList/index.js",
     "./composables/useFormValidation": "./composables/useFormValidation.js",
     "./composables/useDateService": "./composables/useDateService.js",
-    "./utils/": "./utils/index.ts"
+    "./utils/": "./utils/index.ts",
+    "./tag": "./components/tag/index.js"
   },
   "typesVersions": {
     "*": {
@@ -454,6 +457,9 @@
       "link": [
         "./components/link/index.d.ts"
       ],
+      "helpText": [
+        "./components/helpText/index.d.ts"
+      ],
       "multibar": [
         "./components/multibar/index.d.ts"
       ],
@@ -489,6 +495,9 @@
       ],
       "composables/useDateService": [
         "./composables/useDateService.d.ts"
+      ],
+      "tag": [
+        "./components/tag/index.d.ts"
       ]
     }
   },

package/Chart.vue_vue_type_style_index_0_scoped_3e022c94_lang.css

@@ -1 +0,0 @@
-.chart-container[data-v-3e022c94]{border:1px solid var(--common-divider);background:var(--background-paper);display:flex;border-radius:0 0 6px 6px;width:100%;overflow:hidden}.chart-planes[data-v-3e022c94]{width:100%;height:100%;overflow-y:auto}.chart-planes.with-legend[data-v-3e022c94]{width:calc(100% - 221px)}.chart-planes .extra-chart-plane[data-v-3e022c94]{border-top:1px solid var(--common-divider)}.chart-sidebar[data-v-3e022c94]{border-left:1px solid var(--common-divider)}

package/FormCard.vue_vue_type_style_index_0_scoped_86feae7b_lang.css

@@ -1 +0,0 @@
-.form-card[data-v-86feae7b]{border-radius:var(--border-radius-sm);border:1px solid var(--common-divider);background:var(--background-paper)}.card-header[data-v-86feae7b]{display:flex;flex-direction:row;align-items:center;min-height:var(--spacing-600);border-radius:calc(var(--border-radius-sm) - 1px) calc(var(--border-radius-sm) - 1px) 0 0;color:var(--text-primary);background:var(--background-paper-elevation-0);padding:0 var(--spacing-300);border-bottom:1px solid var(--common-divider)}.card-header .skeleton-header[data-v-86feae7b]{width:220px;height:20px}.card-content[data-v-86feae7b]{padding:var(--spacing-350) var(--spacing-500)}.card-content--no-padding[data-v-86feae7b]{padding:0}.form-actions[data-v-86feae7b]{display:flex;flex-direction:row;justify-content:flex-end;align-items:center;min-height:var(--spacing-700)}.form-action[data-v-86feae7b]{margin-left:var(--spacing-100)}.content-skeleton-container[data-v-86feae7b]{display:flex;flex-direction:column}.content-skeleton-container .skeleton-long[data-v-86feae7b]{margin-bottom:24px;width:100%;max-width:896px;height:16px}.content-skeleton-container .skeleton-short[data-v-86feae7b]{margin-bottom:24px;width:100%;max-width:436px;height:16px}