@ironsource/shared-ui 2.2.0-rc.27 → 2.2.0-rc.29

package/Tag.vue_vue_type_style_index_0_scoped_4b92d495_lang.css

@@ -0,0 +1 @@
+@import"https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap";.font-tab-label2[data-v-4b92d495],.font-chart-2[data-v-4b92d495],.font-chart-1[data-v-4b92d495]{font-family:Inter,sans-serif;font-weight:700}.tag-input-sizer[data-v-4b92d495],.tag-input[data-v-4b92d495],.font-chip-label[data-v-4b92d495],.font-table-label[data-v-4b92d495],.font-button[data-v-4b92d495],.font-heading-6[data-v-4b92d495],.font-heading-5[data-v-4b92d495],.font-heading-4[data-v-4b92d495],.font-heading-3[data-v-4b92d495],.font-heading-2[data-v-4b92d495],.font-heading-1[data-v-4b92d495],.font-title[data-v-4b92d495]{font-family:Inter,sans-serif;font-weight:600}.font-tab-label1[data-v-4b92d495],.font-input-label[data-v-4b92d495],.font-overline[data-v-4b92d495],.font-subtitle-2[data-v-4b92d495],.font-subtitle-1[data-v-4b92d495]{font-family:Inter,sans-serif;font-weight:500}.font-caption[data-v-4b92d495],.font-body-2[data-v-4b92d495],.font-body-1[data-v-4b92d495]{font-family:Inter,sans-serif;font-weight:400}.font-title[data-v-4b92d495]{font-size:2.5rem;line-height:3rem;letter-spacing:-.055rem}.font-heading-1[data-v-4b92d495]{font-size:1.5rem;line-height:1.75rem;letter-spacing:-.0285rem}.font-heading-2[data-v-4b92d495]{font-size:1.125rem;line-height:1.75rem;letter-spacing:-.01575rem}.font-heading-3[data-v-4b92d495]{font-size:1rem;line-height:1.5rem;letter-spacing:-.011rem}.font-heading-4[data-v-4b92d495]{font-size:.875rem;line-height:1rem;letter-spacing:unset}.font-heading-5[data-v-4b92d495]{font-size:.8125rem;line-height:16px;letter-spacing:unset}.font-heading-6[data-v-4b92d495]{font-size:.75rem;line-height:.75rem;letter-spacing:0}.font-body-1[data-v-4b92d495]{font-size:.875rem;line-height:1.25rem;letter-spacing:-.00525rem}.font-body-2[data-v-4b92d495]{font-size:.8125rem;line-height:1.25rem;letter-spacing:-.00244rem}.font-subtitle-1[data-v-4b92d495]{font-size:.875rem;line-height:1.25rem;letter-spacing:-.00525rem}.font-subtitle-2[data-v-4b92d495]{font-size:.8125rem;line-height:1.25rem;letter-spacing:-.00244rem}.font-chart-1[data-v-4b92d495]{font-size:1.5rem;line-height:1.5rem;letter-spacing:-.015rem}.font-chart-2[data-v-4b92d495]{font-size:1.25rem;line-height:1.25rem;letter-spacing:-.0125rem}.font-button[data-v-4b92d495]{font-size:.875rem;line-height:1.25rem;letter-spacing:.00875rem}.font-overline[data-v-4b92d495]{font-size:.75rem;line-height:1rem;letter-spacing:.045rem;text-transform:uppercase}.font-caption[data-v-4b92d495]{font-size:.75rem;line-height:1rem}.font-table-label[data-v-4b92d495]{font-size:.8125rem;line-height:1.25rem;letter-spacing:.00813rem}.font-input-label[data-v-4b92d495]{font-size:.8125rem;line-height:1rem;letter-spacing:.00813rem}.font-tab-label1[data-v-4b92d495],.font-tab-label2[data-v-4b92d495]{font-size:.875rem;line-height:1rem}.tag-input-sizer[data-v-4b92d495],.tag-input[data-v-4b92d495],.font-chip-label[data-v-4b92d495]{font-size:.75rem;line-height:1rem}h1[data-v-4b92d495],h2[data-v-4b92d495],h3[data-v-4b92d495],h4[data-v-4b92d495],h5[data-v-4b92d495],h6[data-v-4b92d495]{margin:0}.rounded-tag[data-v-4b92d495]{border-radius:100px}.tag-editing[data-v-4b92d495]{outline:1px solid var(--outline-color)}.unselected-tag-hover-outline[data-v-4b92d495]{background-color:var(--action-hover)}.tag-hover-outline[data-v-4b92d495]{outline:1px solid var(--outline-color);cursor:pointer}.unselected-tag[data-v-4b92d495]{outline:1px solid var(--action-outlined-border)}.tag-disabled[data-v-4b92d495]{background-color:transparent;outline:1px solid var(--action-disabled)}.tag-content[data-v-4b92d495]{display:flex;align-items:center;position:relative;min-width:.625rem;max-width:31.25rem}.tag-icon[data-v-4b92d495]{margin-right:.25rem}.tag-label[data-v-4b92d495]{user-select:none;min-width:.5rem}.tag-label--disabled[data-v-4b92d495]{color:var(--action-disabled)}.tag-label--hidden[data-v-4b92d495]{visibility:hidden}.tag-input[data-v-4b92d495]{position:static;width:auto;background:transparent;min-width:.6rem;padding:0;border:none;max-width:100%;overflow-x:auto;white-space:nowrap}.tag-input[data-v-4b92d495]:focus{outline:none}.tag-input-outline[data-v-4b92d495]::placeholder{color:var(--action-disabled)}.clear-button[data-v-4b92d495]{margin-left:.25rem;color:var(--action-active);cursor:pointer}.clear-button[data-v-4b92d495]:hover{color:var(--text-primary)}.clear-button--invalid[data-v-4b92d495]{color:var(--error-dark)}.clear-button--invalid[data-v-4b92d495]:hover{color:var(--error-darker)}.tag-input-sizer[data-v-4b92d495]{position:absolute;visibility:hidden;height:0;white-space:pre;pointer-events:none;padding:0}.editable-tag[data-v-4b92d495]{cursor:text}.empty-tag[data-v-4b92d495]{background-color:transparent;outline:1px dashed var(--action-outlined-border);color:var(--text-secondary)}.empty-tag[data-v-4b92d495]:hover:not(.tag-disabled){outline:1px dashed var(--action-active)}.tag-max-length-tooltip[data-v-4b92d495]{display:flex;width:15.625rem;padding:.25rem}

package/components/tag/Tag.vue.d.ts

@@ -11,9 +11,11 @@ declare const _default: import("vue").DefineComponent<__VLS_WithDefaults<__VLS_T
     variant?: ChipVariant;
     placeholder?: string;
     iconName?: string;
+    iconType?: 'regular' | 'fill';
     editable?: boolean;
     selectable?: boolean;
     maxLength?: number;
+    maxLengthTooltip?: string;
 }>, {
     isInvalid: boolean;
     label: string;
@@ -28,6 +30,8 @@ declare const _default: import("vue").DefineComponent<__VLS_WithDefaults<__VLS_T
     editable: boolean;
     selectable: boolean;
     maxLength: any;
+    iconType: string;
+    maxLengthTooltip: string;
 }>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     "update:label": (value: string) => void;
     remove: () => void;
@@ -44,9 +48,11 @@ declare const _default: import("vue").DefineComponent<__VLS_WithDefaults<__VLS_T
     variant?: ChipVariant;
     placeholder?: string;
     iconName?: string;
+    iconType?: 'regular' | 'fill';
     editable?: boolean;
     selectable?: boolean;
     maxLength?: number;
+    maxLengthTooltip?: string;
 }>, {
     isInvalid: boolean;
     label: string;
@@ -61,6 +67,8 @@ declare const _default: import("vue").DefineComponent<__VLS_WithDefaults<__VLS_T
     editable: boolean;
     selectable: boolean;
     maxLength: any;
+    iconType: string;
+    maxLengthTooltip: string;
 }>>> & {
     onRemove?: () => any;
     "onUpdate:label"?: (value: string) => any;
@@ -76,9 +84,11 @@ declare const _default: import("vue").DefineComponent<__VLS_WithDefaults<__VLS_T
     rounded: boolean;
     maxLength: number;
     placeholder: string;
+    iconType: 'regular' | 'fill';
     editable: boolean;
     isInvalid: boolean;
     selectable: boolean;
+    maxLengthTooltip: string;
 }>;
 export default _default;
 type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;

package/components/tag/Tag.vue.js

@@ -1,7 +1,7 @@
 import o from "./Tag.vue2.js";
 /* empty css          */import _ from "../../_virtual/_plugin-vue_export-helper.js";
-// import "../../Tag.vue_vue_type_style_index_0_scoped_18d036b6_lang.css"; //*');
-const p = /* @__PURE__ */ _(o, [["__scopeId", "data-v-18d036b6"]]);
+// import "../../Tag.vue_vue_type_style_index_0_scoped_4b92d495_lang.css"; //*');
+const p = /* @__PURE__ */ _(o, [["__scopeId", "data-v-4b92d495"]]);
 export {
   p as default
 };

package/components/tag/Tag.vue2.js

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

package/components/tag/index.d.ts

@@ -45,6 +45,10 @@ declare const TagTypes: () => import("vue").DefineComponent<{
         type: import("vue").PropType<boolean>;
         required: true;
     };
+    iconType: {
+        type: import("vue").PropType<"fill" | "regular">;
+        default: string;
+    };
     editable: {
         type: import("vue").PropType<boolean>;
         default: boolean;
@@ -57,6 +61,10 @@ declare const TagTypes: () => import("vue").DefineComponent<{
         type: import("vue").PropType<boolean>;
         default: boolean;
     };
+    maxLengthTooltip: {
+        type: import("vue").PropType<string>;
+        default: string;
+    };
 }, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     "update:label": (value: string) => void;
     remove: () => void;
@@ -107,6 +115,10 @@ declare const TagTypes: () => import("vue").DefineComponent<{
         type: import("vue").PropType<boolean>;
         required: true;
     };
+    iconType: {
+        type: import("vue").PropType<"fill" | "regular">;
+        default: string;
+    };
     editable: {
         type: import("vue").PropType<boolean>;
         default: boolean;
@@ -119,6 +131,10 @@ declare const TagTypes: () => import("vue").DefineComponent<{
         type: import("vue").PropType<boolean>;
         default: boolean;
     };
+    maxLengthTooltip: {
+        type: import("vue").PropType<string>;
+        default: string;
+    };
 }>> & {
     onRemove?: () => any;
     "onUpdate:label"?: (value: string) => any;
@@ -134,8 +150,10 @@ declare const TagTypes: () => import("vue").DefineComponent<{
     rounded: boolean;
     maxLength: number;
     placeholder: string;
+    iconType: "fill" | "regular";
     editable: boolean;
     isInvalid: boolean;
     selectable: boolean;
+    maxLengthTooltip: string;
 }>[];
 export { Tag, TagTypes };

package/index.js

@@ -1,4 +1,4 @@
-import './AppIcon.vue_vue_type_style_index_0_scoped_56ba337c_lang.css';
+import './IncludeExclude.vue_vue_type_style_index_0_scoped_cc2adbf5_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-rc.27",
+  "version": "2.2.0-rc.29",
   "engines": {
     "npm": ">=7.0.0",
     "node": ">=16.0.0"
@@ -239,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": {
     "*": {
@@ -494,6 +495,9 @@
       ],
       "composables/useDateService": [
         "./composables/useDateService.d.ts"
+      ],
+      "tag": [
+        "./components/tag/index.d.ts"
       ]
     }
   },

package/Tag.vue_vue_type_style_index_0_scoped_18d036b6_lang.css

@@ -1 +0,0 @@
-@import"https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap";.font-tab-label2[data-v-18d036b6],.font-chart-2[data-v-18d036b6],.font-chart-1[data-v-18d036b6]{font-family:Inter,sans-serif;font-weight:700}.tag-input-sizer[data-v-18d036b6],.tag-input[data-v-18d036b6],.font-chip-label[data-v-18d036b6],.font-table-label[data-v-18d036b6],.font-button[data-v-18d036b6],.font-heading-6[data-v-18d036b6],.font-heading-5[data-v-18d036b6],.font-heading-4[data-v-18d036b6],.font-heading-3[data-v-18d036b6],.font-heading-2[data-v-18d036b6],.font-heading-1[data-v-18d036b6],.font-title[data-v-18d036b6]{font-family:Inter,sans-serif;font-weight:600}.font-tab-label1[data-v-18d036b6],.font-input-label[data-v-18d036b6],.font-overline[data-v-18d036b6],.font-subtitle-2[data-v-18d036b6],.font-subtitle-1[data-v-18d036b6]{font-family:Inter,sans-serif;font-weight:500}.font-caption[data-v-18d036b6],.font-body-2[data-v-18d036b6],.font-body-1[data-v-18d036b6]{font-family:Inter,sans-serif;font-weight:400}.font-title[data-v-18d036b6]{font-size:2.5rem;line-height:3rem;letter-spacing:-.055rem}.font-heading-1[data-v-18d036b6]{font-size:1.5rem;line-height:1.75rem;letter-spacing:-.0285rem}.font-heading-2[data-v-18d036b6]{font-size:1.125rem;line-height:1.75rem;letter-spacing:-.01575rem}.font-heading-3[data-v-18d036b6]{font-size:1rem;line-height:1.5rem;letter-spacing:-.011rem}.font-heading-4[data-v-18d036b6]{font-size:.875rem;line-height:1rem;letter-spacing:unset}.font-heading-5[data-v-18d036b6]{font-size:.8125rem;line-height:16px;letter-spacing:unset}.font-heading-6[data-v-18d036b6]{font-size:.75rem;line-height:.75rem;letter-spacing:0}.font-body-1[data-v-18d036b6]{font-size:.875rem;line-height:1.25rem;letter-spacing:-.00525rem}.font-body-2[data-v-18d036b6]{font-size:.8125rem;line-height:1.25rem;letter-spacing:-.00244rem}.font-subtitle-1[data-v-18d036b6]{font-size:.875rem;line-height:1.25rem;letter-spacing:-.00525rem}.font-subtitle-2[data-v-18d036b6]{font-size:.8125rem;line-height:1.25rem;letter-spacing:-.00244rem}.font-chart-1[data-v-18d036b6]{font-size:1.5rem;line-height:1.5rem;letter-spacing:-.015rem}.font-chart-2[data-v-18d036b6]{font-size:1.25rem;line-height:1.25rem;letter-spacing:-.0125rem}.font-button[data-v-18d036b6]{font-size:.875rem;line-height:1.25rem;letter-spacing:.00875rem}.font-overline[data-v-18d036b6]{font-size:.75rem;line-height:1rem;letter-spacing:.045rem;text-transform:uppercase}.font-caption[data-v-18d036b6]{font-size:.75rem;line-height:1rem}.font-table-label[data-v-18d036b6]{font-size:.8125rem;line-height:1.25rem;letter-spacing:.00813rem}.font-input-label[data-v-18d036b6]{font-size:.8125rem;line-height:1rem;letter-spacing:.00813rem}.font-tab-label1[data-v-18d036b6],.font-tab-label2[data-v-18d036b6]{font-size:.875rem;line-height:1rem}.tag-input-sizer[data-v-18d036b6],.tag-input[data-v-18d036b6],.font-chip-label[data-v-18d036b6]{font-size:.75rem;line-height:1rem}h1[data-v-18d036b6],h2[data-v-18d036b6],h3[data-v-18d036b6],h4[data-v-18d036b6],h5[data-v-18d036b6],h6[data-v-18d036b6]{margin:0}.rounded-tag[data-v-18d036b6]{border-radius:100px}.tag-editing[data-v-18d036b6]{outline:1px solid var(--outline-color)}.unselected-tag-hover-outline[data-v-18d036b6]{background-color:var(--action-hover)}.tag-hover-outline[data-v-18d036b6]{outline:1px solid var(--outline-color);cursor:pointer}.empty-tag[data-v-18d036b6]{background-color:transparent;outline:1px dashed var(--action-outlined-border);color:var(--text-secondary)}.empty-tag[data-v-18d036b6]:hover{outline:1px dashed var(--action-active)}.unselected-tag[data-v-18d036b6]{outline:1px solid var(--action-outlined-border)}.tag-disabled[data-v-18d036b6]{background-color:transparent;outline:1px solid var(--action-disabled)}.tag-content[data-v-18d036b6]{display:flex;align-items:center;position:relative;min-width:.625rem;max-width:31.25rem}.tag-icon[data-v-18d036b6]{margin-right:.25rem}.tag-label[data-v-18d036b6]{user-select:none;min-width:.5rem}.tag-label--disabled[data-v-18d036b6]{color:var(--action-disabled)}.tag-label--hidden[data-v-18d036b6]{visibility:hidden}.tag-input[data-v-18d036b6]{position:static;width:auto;background:transparent;min-width:.6rem;padding:0;border:none;max-width:100%;overflow-x:auto;white-space:nowrap}.tag-input[data-v-18d036b6]:focus{outline:none}.tag-input-outline[data-v-18d036b6]::placeholder{color:var(--action-disabled)}.clear-button[data-v-18d036b6]{margin-left:.25rem;color:var(--action-active);cursor:pointer}.clear-button[data-v-18d036b6]:hover{color:var(--text-primary)}.clear-button--invalid[data-v-18d036b6]{color:var(--error-dark)}.clear-button--invalid[data-v-18d036b6]:hover{color:var(--error-darker)}.tag-input-sizer[data-v-18d036b6]{position:absolute;visibility:hidden;height:0;white-space:pre;pointer-events:none;padding:0}