@ironsource/shared-ui 2.2.0-test.7 → 2.2.0-test.9

package/Tag.vue_vue_type_style_index_0_scoped_043adaf5_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-043adaf5],.font-chart-2[data-v-043adaf5],.font-chart-1[data-v-043adaf5]{font-family:Inter,sans-serif;font-weight:700}.tag-input-sizer[data-v-043adaf5],.tag-input[data-v-043adaf5],.font-chip-label[data-v-043adaf5],.font-table-label[data-v-043adaf5],.font-button[data-v-043adaf5],.font-heading-6[data-v-043adaf5],.font-heading-5[data-v-043adaf5],.font-heading-4[data-v-043adaf5],.font-heading-3[data-v-043adaf5],.font-heading-2[data-v-043adaf5],.font-heading-1[data-v-043adaf5],.font-title[data-v-043adaf5]{font-family:Inter,sans-serif;font-weight:600}.font-tab-label1[data-v-043adaf5],.font-input-label[data-v-043adaf5],.font-overline[data-v-043adaf5],.font-subtitle-2[data-v-043adaf5],.font-subtitle-1[data-v-043adaf5]{font-family:Inter,sans-serif;font-weight:500}.font-caption[data-v-043adaf5],.font-body-2[data-v-043adaf5],.font-body-1[data-v-043adaf5]{font-family:Inter,sans-serif;font-weight:400}.font-title[data-v-043adaf5]{font-size:2.5rem;line-height:3rem;letter-spacing:-.055rem}.font-heading-1[data-v-043adaf5]{font-size:1.5rem;line-height:1.75rem;letter-spacing:-.0285rem}.font-heading-2[data-v-043adaf5]{font-size:1.125rem;line-height:1.75rem;letter-spacing:-.01575rem}.font-heading-3[data-v-043adaf5]{font-size:1rem;line-height:1.5rem;letter-spacing:-.011rem}.font-heading-4[data-v-043adaf5]{font-size:.875rem;line-height:1rem;letter-spacing:unset}.font-heading-5[data-v-043adaf5]{font-size:.8125rem;line-height:16px;letter-spacing:unset}.font-heading-6[data-v-043adaf5]{font-size:.75rem;line-height:.75rem;letter-spacing:0}.font-body-1[data-v-043adaf5]{font-size:.875rem;line-height:1.25rem;letter-spacing:-.00525rem}.font-body-2[data-v-043adaf5]{font-size:.8125rem;line-height:1.25rem;letter-spacing:-.00244rem}.font-subtitle-1[data-v-043adaf5]{font-size:.875rem;line-height:1.25rem;letter-spacing:-.00525rem}.font-subtitle-2[data-v-043adaf5]{font-size:.8125rem;line-height:1.25rem;letter-spacing:-.00244rem}.font-chart-1[data-v-043adaf5]{font-size:1.5rem;line-height:1.5rem;letter-spacing:-.015rem}.font-chart-2[data-v-043adaf5]{font-size:1.25rem;line-height:1.25rem;letter-spacing:-.0125rem}.font-button[data-v-043adaf5]{font-size:.875rem;line-height:1.25rem;letter-spacing:.00875rem}.font-overline[data-v-043adaf5]{font-size:.75rem;line-height:1rem;letter-spacing:.045rem;text-transform:uppercase}.font-caption[data-v-043adaf5]{font-size:.75rem;line-height:1rem}.font-table-label[data-v-043adaf5]{font-size:.8125rem;line-height:1.25rem;letter-spacing:.00813rem}.font-input-label[data-v-043adaf5]{font-size:.8125rem;line-height:1rem;letter-spacing:.00813rem}.font-tab-label1[data-v-043adaf5],.font-tab-label2[data-v-043adaf5]{font-size:.875rem;line-height:1rem}.tag-input-sizer[data-v-043adaf5],.tag-input[data-v-043adaf5],.font-chip-label[data-v-043adaf5]{font-size:.75rem;line-height:1rem}h1[data-v-043adaf5],h2[data-v-043adaf5],h3[data-v-043adaf5],h4[data-v-043adaf5],h5[data-v-043adaf5],h6[data-v-043adaf5]{margin:0}.tag-container[data-v-043adaf5]{position:relative;width:200px}.rounded-tag[data-v-043adaf5]{border-radius:100px}.tag-editing[data-v-043adaf5]{outline:1px solid var(--outline-color)}.unselected-tag-hover-outline[data-v-043adaf5]{background-color:var(--action-hover)}.tag-hover-outline[data-v-043adaf5]{outline:1px solid var(--outline-color);cursor:pointer}.unselected-tag[data-v-043adaf5]{outline:1px solid var(--action-outlined-border)}.tag-disabled[data-v-043adaf5]{background-color:transparent;outline:1px solid var(--action-disabled)}.tag-content[data-v-043adaf5]{display:flex;align-items:center;position:relative;min-width:.625rem;max-width:31.25rem}.tag-icon[data-v-043adaf5]{margin-right:.25rem}.tag-label[data-v-043adaf5]{user-select:none;min-width:.5rem}.tag-label--disabled[data-v-043adaf5]{color:var(--action-disabled)}.tag-label--hidden[data-v-043adaf5]{visibility:hidden}.tag-input[data-v-043adaf5]{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-043adaf5]:focus{outline:none}.tag-input-outline[data-v-043adaf5]::placeholder{color:var(--action-disabled)}.clear-button[data-v-043adaf5]{margin-left:.25rem;color:var(--action-active);cursor:pointer}.clear-button[data-v-043adaf5]:hover{color:var(--text-primary)}.clear-button--invalid[data-v-043adaf5]{color:var(--error-dark)}.clear-button--invalid[data-v-043adaf5]:hover{color:var(--error-darker)}.tag-input-sizer[data-v-043adaf5]{position:absolute;visibility:hidden;height:0;white-space:pre;pointer-events:none;padding:0}.editable-tag[data-v-043adaf5]{cursor:text}.empty-tag[data-v-043adaf5]{background-color:transparent;outline:1px dashed var(--action-outlined-border);color:var(--text-secondary)}.empty-tag[data-v-043adaf5]:hover{outline:1px dashed var(--action-active)}.tag-max-length-tooltip[data-v-043adaf5]{display:flex;width:250px;padding:.25rem}

package/TagsFieldChip.vue_vue_type_style_index_0_scoped_d186b7ef_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-d186b7ef],.font-chart-2[data-v-d186b7ef],.font-chart-1[data-v-d186b7ef]{font-family:Inter,sans-serif;font-weight:700}.chip-input[data-v-d186b7ef],.font-chip-label[data-v-d186b7ef],.font-table-label[data-v-d186b7ef],.font-button[data-v-d186b7ef],.font-heading-6[data-v-d186b7ef],.font-heading-5[data-v-d186b7ef],.font-heading-4[data-v-d186b7ef],.font-heading-3[data-v-d186b7ef],.font-heading-2[data-v-d186b7ef],.font-heading-1[data-v-d186b7ef],.font-title[data-v-d186b7ef]{font-family:Inter,sans-serif;font-weight:600}.font-tab-label1[data-v-d186b7ef],.font-input-label[data-v-d186b7ef],.font-overline[data-v-d186b7ef],.font-subtitle-2[data-v-d186b7ef],.font-subtitle-1[data-v-d186b7ef]{font-family:Inter,sans-serif;font-weight:500}.font-caption[data-v-d186b7ef],.font-body-2[data-v-d186b7ef],.font-body-1[data-v-d186b7ef]{font-family:Inter,sans-serif;font-weight:400}.font-title[data-v-d186b7ef]{font-size:2.5rem;line-height:3rem;letter-spacing:-.055rem}.font-heading-1[data-v-d186b7ef]{font-size:1.5rem;line-height:1.75rem;letter-spacing:-.0285rem}.font-heading-2[data-v-d186b7ef]{font-size:1.125rem;line-height:1.75rem;letter-spacing:-.01575rem}.font-heading-3[data-v-d186b7ef]{font-size:1rem;line-height:1.5rem;letter-spacing:-.011rem}.font-heading-4[data-v-d186b7ef]{font-size:.875rem;line-height:1rem;letter-spacing:unset}.font-heading-5[data-v-d186b7ef]{font-size:.8125rem;line-height:16px;letter-spacing:unset}.font-heading-6[data-v-d186b7ef]{font-size:.75rem;line-height:.75rem;letter-spacing:0}.font-body-1[data-v-d186b7ef]{font-size:.875rem;line-height:1.25rem;letter-spacing:-.00525rem}.font-body-2[data-v-d186b7ef]{font-size:.8125rem;line-height:1.25rem;letter-spacing:-.00244rem}.font-subtitle-1[data-v-d186b7ef]{font-size:.875rem;line-height:1.25rem;letter-spacing:-.00525rem}.font-subtitle-2[data-v-d186b7ef]{font-size:.8125rem;line-height:1.25rem;letter-spacing:-.00244rem}.font-chart-1[data-v-d186b7ef]{font-size:1.5rem;line-height:1.5rem;letter-spacing:-.015rem}.font-chart-2[data-v-d186b7ef]{font-size:1.25rem;line-height:1.25rem;letter-spacing:-.0125rem}.font-button[data-v-d186b7ef]{font-size:.875rem;line-height:1.25rem;letter-spacing:.00875rem}.font-overline[data-v-d186b7ef]{font-size:.75rem;line-height:1rem;letter-spacing:.045rem;text-transform:uppercase}.font-caption[data-v-d186b7ef]{font-size:.75rem;line-height:1rem}.font-table-label[data-v-d186b7ef]{font-size:.8125rem;line-height:1.25rem;letter-spacing:.00813rem}.font-input-label[data-v-d186b7ef]{font-size:.8125rem;line-height:1rem;letter-spacing:.00813rem}.font-tab-label1[data-v-d186b7ef],.font-tab-label2[data-v-d186b7ef]{font-size:.875rem;line-height:1rem}.chip-input[data-v-d186b7ef],.font-chip-label[data-v-d186b7ef]{font-size:.75rem;line-height:1rem}h1[data-v-d186b7ef],h2[data-v-d186b7ef],h3[data-v-d186b7ef],h4[data-v-d186b7ef],h5[data-v-d186b7ef],h6[data-v-d186b7ef]{margin:0}.tags-field-chip[data-v-d186b7ef]{--outline-color: var(--default-outlined-border);border-radius:100px}.tags-field-chip--invalid[data-v-d186b7ef]{--outline-color: var(--error-outlined-border)}.tags-field-chip--editing[data-v-d186b7ef]{outline:1px solid var(--outline-color)}.chip-content[data-v-d186b7ef]{display:flex;position:relative}.chip-label[data-v-d186b7ef]{min-width:.5rem}.chip-label--hidden[data-v-d186b7ef]{visibility:hidden}.chip-input[data-v-d186b7ef]{position:absolute;left:0;top:-.5px;width:100%;height:100%;background:transparent;color:var(--text-primary);line-height:normal;min-width:.5rem;padding:0;border:none}.chip-input[data-v-d186b7ef]:focus{outline:none}.clear-button[data-v-d186b7ef]{margin-left:.25rem;color:var(--action-active);cursor:pointer}.clear-button[data-v-d186b7ef]:hover{color:var(--text-primary)}.clear-button--invalid[data-v-d186b7ef]{color:var(--error-dark)}.clear-button--invalid[data-v-d186b7ef]:hover{color:var(--error-darker)}

package/components/dateRange/common/DateRange.common.js

@@ -150,7 +150,7 @@ const pe = (o, y) => {
       const l = C.value.find(
         (h) => h.id === e.preset
       );
-      i.value = l.id, t = !0;
+      i.value = l?.id, t = !!l;
     }
     const a = {
       from: new Date(e.from),

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

@@ -0,0 +1,105 @@
+import { ChipSize, ChipColor, ChipVariant } from '../chip/v4/Chip.types';
+declare const _default: import("vue").DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
+    label: string;
+    isSelected: boolean;
+    isInvalid?: boolean;
+    testId?: string;
+    size?: ChipSize;
+    rounded?: boolean;
+    disabled?: boolean;
+    color?: ChipColor;
+    variant?: ChipVariant;
+    placeholder?: string;
+    iconName?: string;
+    editable?: boolean;
+    selectable?: boolean;
+    maxLength?: number;
+    maxLengthTooltip?: string;
+}>, {
+    isInvalid: boolean;
+    label: string;
+    testId: string;
+    size: string;
+    rounded: boolean;
+    disabled: boolean;
+    color: string;
+    variant: string;
+    placeholder: string;
+    iconName: string;
+    editable: boolean;
+    selectable: boolean;
+    maxLength: any;
+    maxLengthTooltip: string;
+}>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:label": (value: string) => void;
+    remove: () => void;
+    stopEditing: () => void;
+}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
+    label: string;
+    isSelected: boolean;
+    isInvalid?: boolean;
+    testId?: string;
+    size?: ChipSize;
+    rounded?: boolean;
+    disabled?: boolean;
+    color?: ChipColor;
+    variant?: ChipVariant;
+    placeholder?: string;
+    iconName?: string;
+    editable?: boolean;
+    selectable?: boolean;
+    maxLength?: number;
+    maxLengthTooltip?: string;
+}>, {
+    isInvalid: boolean;
+    label: string;
+    testId: string;
+    size: string;
+    rounded: boolean;
+    disabled: boolean;
+    color: string;
+    variant: string;
+    placeholder: string;
+    iconName: string;
+    editable: boolean;
+    selectable: boolean;
+    maxLength: any;
+    maxLengthTooltip: string;
+}>>> & {
+    onRemove?: () => any;
+    "onUpdate:label"?: (value: string) => any;
+    onStopEditing?: () => any;
+}, {
+    label: string;
+    testId: string;
+    variant: ChipVariant;
+    disabled: boolean;
+    color: ChipColor;
+    size: ChipSize;
+    iconName: string;
+    rounded: boolean;
+    maxLength: number;
+    placeholder: string;
+    editable: boolean;
+    isInvalid: boolean;
+    selectable: boolean;
+    maxLengthTooltip: string;
+}>;
+export default _default;
+type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
+type __VLS_TypePropsToRuntimeProps<T> = {
+    [K in keyof T]-?: {} extends Pick<T, K> ? {
+        type: import('vue').PropType<__VLS_NonUndefinedable<T[K]>>;
+    } : {
+        type: import('vue').PropType<T[K]>;
+        required: true;
+    };
+};
+type __VLS_WithDefaults<P, D> = {
+    [K in keyof Pick<P, keyof P>]: K extends keyof D ? __VLS_Prettify<P[K] & {
+        default: D[K];
+    }> : P[K];
+};
+type __VLS_Prettify<T> = {
+    [K in keyof T]: T[K];
+} & {};

package/components/tag/Tag.vue.js

@@ -0,0 +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_043adaf5_lang.css"; //*');
+const t = /* @__PURE__ */ _(o, [["__scopeId", "data-v-043adaf5"]]);
+export {
+  t as default
+};

package/components/tag/Tag.vue2.js

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

package/components/tag/index.d.ts

@@ -0,0 +1,150 @@
+import Tag from './Tag.vue';
+declare const TagTypes: () => import("vue").DefineComponent<{
+    label: {
+        type: import("vue").PropType<string>;
+        required: true;
+        default: string;
+    };
+    testId: {
+        type: import("vue").PropType<string>;
+        default: string;
+    };
+    variant: {
+        type: import("vue").PropType<"filled" | "outlined">;
+        default: string;
+    };
+    disabled: {
+        type: import("vue").PropType<boolean>;
+        default: boolean;
+    };
+    color: {
+        type: import("vue").PropType<"dark" | "default" | "primary" | "info" | "success" | "warning" | "error">;
+        default: string;
+    };
+    size: {
+        type: import("vue").PropType<"small" | "medium">;
+        default: string;
+    };
+    iconName: {
+        type: import("vue").PropType<string>;
+        default: string;
+    };
+    rounded: {
+        type: import("vue").PropType<boolean>;
+        default: boolean;
+    };
+    maxLength: {
+        type: import("vue").PropType<number>;
+        default: any;
+    };
+    placeholder: {
+        type: import("vue").PropType<string>;
+        default: string;
+    };
+    isSelected: {
+        type: import("vue").PropType<boolean>;
+        required: true;
+    };
+    editable: {
+        type: import("vue").PropType<boolean>;
+        default: boolean;
+    };
+    isInvalid: {
+        type: import("vue").PropType<boolean>;
+        default: boolean;
+    };
+    selectable: {
+        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;
+    stopEditing: () => void;
+}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    label: {
+        type: import("vue").PropType<string>;
+        required: true;
+        default: string;
+    };
+    testId: {
+        type: import("vue").PropType<string>;
+        default: string;
+    };
+    variant: {
+        type: import("vue").PropType<"filled" | "outlined">;
+        default: string;
+    };
+    disabled: {
+        type: import("vue").PropType<boolean>;
+        default: boolean;
+    };
+    color: {
+        type: import("vue").PropType<"dark" | "default" | "primary" | "info" | "success" | "warning" | "error">;
+        default: string;
+    };
+    size: {
+        type: import("vue").PropType<"small" | "medium">;
+        default: string;
+    };
+    iconName: {
+        type: import("vue").PropType<string>;
+        default: string;
+    };
+    rounded: {
+        type: import("vue").PropType<boolean>;
+        default: boolean;
+    };
+    maxLength: {
+        type: import("vue").PropType<number>;
+        default: any;
+    };
+    placeholder: {
+        type: import("vue").PropType<string>;
+        default: string;
+    };
+    isSelected: {
+        type: import("vue").PropType<boolean>;
+        required: true;
+    };
+    editable: {
+        type: import("vue").PropType<boolean>;
+        default: boolean;
+    };
+    isInvalid: {
+        type: import("vue").PropType<boolean>;
+        default: boolean;
+    };
+    selectable: {
+        type: import("vue").PropType<boolean>;
+        default: boolean;
+    };
+    maxLengthTooltip: {
+        type: import("vue").PropType<string>;
+        default: string;
+    };
+}>> & {
+    onRemove?: () => any;
+    "onUpdate:label"?: (value: string) => any;
+    onStopEditing?: () => any;
+}, {
+    label: string;
+    testId: string;
+    variant: "filled" | "outlined";
+    disabled: boolean;
+    color: "dark" | "default" | "primary" | "info" | "success" | "warning" | "error";
+    size: "small" | "medium";
+    iconName: string;
+    rounded: boolean;
+    maxLength: number;
+    placeholder: string;
+    editable: boolean;
+    isInvalid: boolean;
+    selectable: boolean;
+    maxLengthTooltip: string;
+}>[];
+export { Tag, TagTypes };

package/components/tag/index.js

@@ -0,0 +1,6 @@
+import o from "./Tag.vue.js";
+const r = () => [o];
+export {
+  o as Tag,
+  r as TagTypes
+};

package/components/tagsField/TagsFieldChip.vue.d.ts

@@ -1,28 +1,11 @@
-import { ChipSize, ChipColor, ChipVariant } from '../chip/v4/Chip.types';
 declare const _default: import("vue").DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
     label: string;
     isInvalid?: boolean;
     testId?: string;
-    size?: ChipSize;
-    rounded?: boolean;
-    disabled?: boolean;
-    removable?: boolean;
-    color?: ChipColor;
-    iconColor?: string;
-    variant?: ChipVariant;
-    placeholder?: string;
 }>, {
     isInvalid: boolean;
     label: string;
     testId: string;
-    size: string;
-    rounded: boolean;
-    disabled: boolean;
-    removable: boolean;
-    color: string;
-    iconColor: string;
-    variant: string;
-    placeholder: string;
 }>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     "update:label": (value: string) => void;
     remove: () => void;
@@ -30,41 +13,17 @@ declare const _default: import("vue").DefineComponent<__VLS_WithDefaults<__VLS_T
     label: string;
     isInvalid?: boolean;
     testId?: string;
-    size?: ChipSize;
-    rounded?: boolean;
-    disabled?: boolean;
-    removable?: boolean;
-    color?: ChipColor;
-    iconColor?: string;
-    variant?: ChipVariant;
-    placeholder?: string;
 }>, {
     isInvalid: boolean;
     label: string;
     testId: string;
-    size: string;
-    rounded: boolean;
-    disabled: boolean;
-    removable: boolean;
-    color: string;
-    iconColor: string;
-    variant: string;
-    placeholder: string;
 }>>> & {
     onRemove?: () => any;
     "onUpdate:label"?: (value: string) => any;
 }, {
     label: string;
     testId: string;
-    variant: ChipVariant;
-    disabled: boolean;
-    color: ChipColor;
-    size: ChipSize;
-    rounded: boolean;
-    placeholder: string;
     isInvalid: boolean;
-    removable: boolean;
-    iconColor: string;
 }>;
 export default _default;
 type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;

package/components/tagsField/TagsFieldChip.vue.js

@@ -1,7 +1,7 @@
-import o from "./TagsFieldChip.vue2.js";
-/* empty css                    */import e from "../../_virtual/_plugin-vue_export-helper.js";
-// import "../../TagsFieldChip.vue_vue_type_style_index_0_scoped_a5f2dd8b_lang.css"; //*');
-const p = /* @__PURE__ */ e(o, [["__scopeId", "data-v-a5f2dd8b"]]);
+import e from "./TagsFieldChip.vue2.js";
+/* empty css                    */import o from "../../_virtual/_plugin-vue_export-helper.js";
+// import "../../TagsFieldChip.vue_vue_type_style_index_0_scoped_d186b7ef_lang.css"; //*');
+const t = /* @__PURE__ */ o(e, [["__scopeId", "data-v-d186b7ef"]]);
 export {
-  p as default
+  t as default
 };

package/components/tagsField/TagsFieldChip.vue2.js

@@ -1,123 +1,81 @@
- import "../../TagsFieldChip.vue_vue_type_style_index_0_scoped_a5f2dd8b_lang.css"; import { defineComponent as V, ref as r, computed as b, watch as M, nextTick as k, openBlock as n, createBlock as g, unref as a, normalizeClass as d, normalizeStyle as C, withModifiers as u, withCtx as w, createElementVNode as N, createTextVNode as S, toDisplayString as z, withDirectives as x, createElementBlock as I, isRef as K, withKeys as B, vModelText as D, createCommentVNode as W, createVNode as F, vShow as L } from "vue";
-import O from "../typography/v4/Typography.vue.js";
-import U from "../icon/v4/IconV4.vue.js";
+ import "../../TagsFieldChip.vue_vue_type_style_index_0_scoped_d186b7ef_lang.css"; import { defineComponent as k, ref as p, computed as x, openBlock as C, createBlock as I, unref as t, normalizeClass as c, withModifiers as s, withCtx as f, createElementVNode as v, createVNode as m, createTextVNode as w, toDisplayString as T, withDirectives as B, isRef as E, withKeys as h, vShow as V, vModelText as K, nextTick as N } from "vue";
+import R from "../typography/v4/Typography.vue.js";
+import z from "../icon/v4/IconV4.vue.js";
 import "../icon/v4/IconFlag.vue.js";
-import $ from "../chip/v4/ChipV4.vue.js";
-const j = { class: "chip-content" }, q = ["placeholder", "onKeyup"], Q = /* @__PURE__ */ V({
+import D from "../chip/v4/ChipV4.vue.js";
+const M = { class: "chip-content" }, S = ["onKeyup"], j = /* @__PURE__ */ k({
   __name: "TagsFieldChip",
   props: {
     label: { default: "" },
     isInvalid: { type: Boolean, default: !1 },
-    testId: { default: "" },
-    size: { default: "small" },
-    rounded: { type: Boolean, default: !0 },
-    disabled: { type: Boolean, default: !1 },
-    removable: { type: Boolean, default: !0 },
-    color: { default: "default" },
-    iconColor: { default: "var(--action-active)" },
-    variant: { default: "filled" },
-    placeholder: { default: "" }
+    testId: { default: "" }
   },
   emits: ["update:label", "remove"],
-  setup(e, { emit: c }) {
-    const i = e, t = r(!1), l = b({
-      get: () => i.label,
-      set: (h) => {
-        c("update:label", h);
+  setup(l, { emit: n }) {
+    const b = l, i = p(!1), e = x({
+      get: () => b.label,
+      set: (d) => {
+        n("update:label", d);
       }
-    }), m = r(null), E = () => m.value?.focus(), R = async () => {
-      i.disabled || (t.value = !0, await k(), E());
-    }, s = () => {
-      t.value = !1, !l.value && !i.placeholder && c("remove");
-    }, v = r(null), f = r(void 0);
-    M(
-      () => [l.value, i.placeholder, t.value],
-      async () => {
-        await k(), t.value && v.value ? f.value = v.value.offsetWidth + "px" : f.value = void 0;
-      },
-      { immediate: !0 }
-    );
-    const p = {
-      default: "var(--default-outlined-border)",
-      primary: "var(--primary-main)",
-      info: "var(--info-dark)",
-      error: "var(--error-main)",
-      warning: "var(--warning-main)",
-      success: "var(--success-main)",
-      dark: "var(--common-divider)"
-    }, T = b(() => t.value && i.variant !== "outlined" ? {
-      "--outline-color": i.isInvalid ? p.error : p[i.color] || "var(--default-outlined-border)"
-    } : {});
-    return (h, o) => (n(), g(a($), {
-      class: d({
-        "rounded-chip": e.rounded,
-        "tags-field-chip--editing": t.value && e.variant !== "outlined"
-        // outlined chips have an outline
-      }),
-      label: a(l),
-      "test-id": e.testId,
-      color: e.isInvalid ? "error" : e.color,
-      size: e.size,
-      variant: e.variant,
-      disabled: e.disabled,
-      style: C(a(T)),
-      onClick: u(R, ["stop"])
+    }), r = p(null), g = () => r.value?.focus(), y = async () => {
+      i.value = !0, await N(), g();
+    }, o = () => {
+      i.value = !1, e.value || n("remove");
+    };
+    return (d, a) => (C(), I(t(D), {
+      class: c(["tags-field-chip", {
+        "tags-field-chip--editing": i.value,
+        "tags-field-chip--invalid": l.isInvalid
+      }]),
+      label: t(e),
+      "test-id": l.testId,
+      color: l.isInvalid ? "error" : "default",
+      onClick: s(y, ["stop"])
     }, {
-      default: w(() => [
-        N("div", j, [
-          t.value ? x((n(), I("input", {
-            key: 1,
+      default: f(() => [
+        v("div", M, [
+          m(t(R), {
+            variant: "chipLabel",
+            class: c(["chip-label", { "chip-label--hidden": i.value }])
+          }, {
+            default: f(() => [
+              w(T(t(e)), 1)
+            ]),
+            _: 1
+          }, 8, ["class"]),
+          B(v("input", {
             ref_key: "inputRef",
-            ref: m,
-            "onUpdate:modelValue": o[0] || (o[0] = (y) => K(l) ? l.value = y : null),
-            placeholder: e.placeholder,
-            class: d(["chip-input", { "chip-input-outline": e.variant === "outlined" }]),
+            ref: r,
+            "onUpdate:modelValue": a[0] || (a[0] = (u) => E(e) ? e.value = u : null),
+            class: "chip-input",
             spellcheck: "false",
-            style: C({ width: f.value }),
-            onBlur: s,
+            onBlur: o,
             onKeyup: [
-              B(u(s, ["prevent"]), ["enter"]),
-              B(u(s, ["prevent"]), ["esc"])
+              h(s(o, ["prevent"]), ["enter"]),
+              h(s(o, ["prevent"]), ["esc"])
             ]
-          }, null, 46, q)), [
+          }, null, 40, S), [
+            [V, i.value],
             [
-              D,
-              a(l),
+              K,
+              t(e),
               void 0,
               { trim: !0 }
             ]
-          ]) : (n(), g(a(O), {
-            key: 0,
-            variant: "chipLabel",
-            class: d(["chip-label", { "chip-label--placeholder": !a(l) && e.placeholder }])
-          }, {
-            default: w(() => [
-              S(z(a(l) || e.placeholder), 1)
-            ]),
-            _: 1
-          }, 8, ["class"])),
-          t.value ? (n(), I("span", {
-            key: 2,
-            ref_key: "sizerRef",
-            ref: v,
-            class: "chip-input-sizer"
-          }, z(a(l) || e.placeholder || ""), 513)) : W("", !0)
+          ])
         ]),
-        x(F(a(U), {
-          class: d(["clear-button", { "clear-button--invalid": e.isInvalid }]),
+        m(t(z), {
+          class: c(["clear-button", { "clear-button--invalid": l.isInvalid }]),
           name: "x-circle",
           size: "16px",
           type: "fill",
-          color: e.isInvalid ? "var(--error-dark)" : e.iconColor,
-          onClick: o[1] || (o[1] = u((y) => c("remove"), ["stop"]))
-        }, null, 8, ["class", "color"]), [
-          [L, e.removable]
-        ])
+          onClick: a[1] || (a[1] = s((u) => n("remove"), ["stop"]))
+        }, null, 8, ["class"])
       ]),
       _: 1
-    }, 8, ["class", "label", "test-id", "color", "size", "variant", "disabled", "style", "onClick"]));
+    }, 8, ["class", "label", "test-id", "color", "onClick"]));
   }
 });
 export {
-  Q as default
+  j as default
 };

package/components/tagsField/index.d.ts

@@ -10,42 +10,10 @@ declare const TagsFieldTypes: () => (import("vue").DefineComponent<{
         type: import("vue").PropType<string>;
         default: string;
     };
-    variant: {
-        type: import("vue").PropType<"filled" | "outlined">;
-        default: string;
-    };
-    disabled: {
-        type: import("vue").PropType<boolean>;
-        default: boolean;
-    };
-    color: {
-        type: import("vue").PropType<"dark" | "default" | "primary" | "info" | "success" | "warning" | "error">;
-        default: string;
-    };
-    size: {
-        type: import("vue").PropType<"small" | "medium">;
-        default: string;
-    };
-    rounded: {
-        type: import("vue").PropType<boolean>;
-        default: boolean;
-    };
-    placeholder: {
-        type: import("vue").PropType<string>;
-        default: string;
-    };
     isInvalid: {
         type: import("vue").PropType<boolean>;
         default: boolean;
     };
-    removable: {
-        type: import("vue").PropType<boolean>;
-        default: boolean;
-    };
-    iconColor: {
-        type: import("vue").PropType<string>;
-        default: string;
-    };
 }, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     "update:label": (value: string) => void;
     remove: () => void;
@@ -59,57 +27,17 @@ declare const TagsFieldTypes: () => (import("vue").DefineComponent<{
         type: import("vue").PropType<string>;
         default: string;
     };
-    variant: {
-        type: import("vue").PropType<"filled" | "outlined">;
-        default: string;
-    };
-    disabled: {
-        type: import("vue").PropType<boolean>;
-        default: boolean;
-    };
-    color: {
-        type: import("vue").PropType<"dark" | "default" | "primary" | "info" | "success" | "warning" | "error">;
-        default: string;
-    };
-    size: {
-        type: import("vue").PropType<"small" | "medium">;
-        default: string;
-    };
-    rounded: {
-        type: import("vue").PropType<boolean>;
-        default: boolean;
-    };
-    placeholder: {
-        type: import("vue").PropType<string>;
-        default: string;
-    };
     isInvalid: {
         type: import("vue").PropType<boolean>;
         default: boolean;
     };
-    removable: {
-        type: import("vue").PropType<boolean>;
-        default: boolean;
-    };
-    iconColor: {
-        type: import("vue").PropType<string>;
-        default: string;
-    };
 }>> & {
     onRemove?: () => any;
     "onUpdate:label"?: (value: string) => any;
 }, {
     label: string;
     testId: string;
-    variant: "filled" | "outlined";
-    disabled: boolean;
-    color: "dark" | "default" | "primary" | "info" | "success" | "warning" | "error";
-    size: "small" | "medium";
-    rounded: boolean;
-    placeholder: string;
     isInvalid: boolean;
-    removable: boolean;
-    iconColor: string;
 }> | import("vue").DefineComponent<{
     testId: {
         type: import("vue").PropType<string>;

package/index.d.ts

@@ -28587,3 +28587,4 @@ export * from '@/components/chart';
 export * from '@/components/columnPicker';
 export * from '@/components/columnConfigurator';
 export * from '@/components/tagsField';
+export * from '@/components/tag';

package/index.js

@@ -1,4 +1,4 @@
-import './IncludeExcludeOption.vue_vue_type_style_index_0_scoped_91bc7787_lang.css';
+import './AppTrigger.vue_vue_type_style_index_0_scoped_121aac8b_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";
@@ -6,7 +6,7 @@ import { MenuTypes as io } from "./components/menu/index.js";
 import { AppIconTypes as so } from "./components/appIcon/index.js";
 import { FloatingToolbarTypes as lo } from "./components/floatingToolbar/index.js";
 import { IncludeExcludeTypes as $o } from "./components/includeExclude/index.js";
-import { ID_INJECTION_KEY as co, useId as yo } from "./composables/useId.js";
+import { ID_INJECTION_KEY as yo, useId as co } from "./composables/useId.js";
 import { FilterDropdownTypes as Fo } from "./components/filterDropdown/index.js";
 import { TypographyTypes as Co } from "./components/typography/index.js";
 import { TypographyTypesV4 as Eo } from "./components/typography/v4/index.js";
@@ -30,8 +30,8 @@ import * as l from "./components/checkbox/v4/index.js";
 import * as u from "./components/icon/v3/index.js";
 import * as $ from "./components/icon/v4/index.js";
 import * as T from "./components/input/v3/index.js";
-import * as c from "./components/input/v4/index.js";
-import * as y from "./components/tabs/v3/index.js";
+import * as y from "./components/input/v4/index.js";
+import * as c from "./components/tabs/v3/index.js";
 import * as g from "./components/tabs/v4/index.js";
 import * as F from "./components/dialog/v3/index.js";
 import * as I from "./components/dialog/v4/index.js";
@@ -79,41 +79,43 @@ import { ChartTypes as or } from "./components/chart/index.js";
 import { ColumnPickerTypes as er } from "./components/columnPicker/index.js";
 import { ColumnConfiguratorTypes as mr } from "./components/columnConfigurator/index.js";
 import { TagsFieldTypes as ar } from "./components/tagsField/index.js";
-import { default as ir } from "./components/appTrigger/AppTrigger.vue.js";
-import { default as xr } from "./components/autocompleteDropdown/AutocompleteDropdown.vue.js";
-import { default as nr } from "./components/menuItem/MenuItem.vue.js";
-import { default as ur } from "./components/menu/Menu.vue.js";
-import { default as Tr } from "./components/appIcon/AppIcon.vue.js";
-import { default as yr } from "./components/floatingToolbar/FloatingToolbar.vue.js";
-import { default as Fr } from "./components/includeExclude/IncludeExclude.vue.js";
-import { default as Cr } from "./components/includeExclude/IncludeExcludeDragDrop.vue.js";
-import { default as Er } from "./components/includeExclude/IncludeExcludeOption.vue.js";
-import { default as hr } from "./components/includeExclude/IncludeExcludeOptionDraggable.vue.js";
-import { default as Mr } from "./components/includeExclude/IncludeExcludeAppTrigger.vue.js";
-import { default as wr } from "./components/includeExclude/IncludeExcludeAppHeader.vue.js";
-import { default as Hr } from "./components/includeExclude/IncludeExcludeChipFilter.vue.js";
-import { default as Pr } from "./components/filterDropdown/FilterDropdown.vue.js";
-import { default as vr } from "./components/filterDropdown/AddFilterButton.vue.js";
-import { default as Nr } from "./components/typography/Heading.vue.js";
-import { default as Jr } from "./components/typography/Text.vue.js";
-import { default as Rr } from "./components/typography/v4/Typography.vue.js";
-import { default as jr } from "./components/multibar/MultiBar.vue.js";
-import { default as zr } from "./components/layout/FoldableSection.vue.js";
-import { default as Qr } from "./components/forms/FormRow.vue.js";
-import { default as Ur } from "./components/forms/FormCard.vue.js";
-import { default as Xr } from "./components/forms/CardPanel.vue.js";
-import { default as oe } from "./components/forms/FormField.vue.js";
-import { default as ee } from "./components/banner/Banner.vue.js";
-import { default as me } from "./components/alert/Alert.vue.js";
-import { default as ae } from "./components/link/Link.vue.js";
-import { default as ie } from "./components/helpText/HelpText.vue.js";
-import { default as xe } from "./components/autocomplete/Autocomplete.vue.js";
-import { default as ne } from "./components/chart/Chart.vue.js";
-import { ChartType as ue, TooltipOrder as $e, TrendDirection as Te } from "./components/chart/types.js";
-import { default as ye } from "./components/columnPicker/ColumnPicker.vue.js";
-import { default as Fe } from "./components/columnConfigurator/ColumnConfigurator.vue.js";
-import { default as Ce } from "./components/tagsField/TagsField.vue.js";
-import { default as Ee } from "./components/tagsField/TagsFieldChip.vue.js";
+import { TagTypes as ir } from "./components/tag/index.js";
+import { default as xr } from "./components/appTrigger/AppTrigger.vue.js";
+import { default as nr } from "./components/autocompleteDropdown/AutocompleteDropdown.vue.js";
+import { default as ur } from "./components/menuItem/MenuItem.vue.js";
+import { default as Tr } from "./components/menu/Menu.vue.js";
+import { default as cr } from "./components/appIcon/AppIcon.vue.js";
+import { default as Fr } from "./components/floatingToolbar/FloatingToolbar.vue.js";
+import { default as Cr } from "./components/includeExclude/IncludeExclude.vue.js";
+import { default as Er } from "./components/includeExclude/IncludeExcludeDragDrop.vue.js";
+import { default as hr } from "./components/includeExclude/IncludeExcludeOption.vue.js";
+import { default as Mr } from "./components/includeExclude/IncludeExcludeOptionDraggable.vue.js";
+import { default as wr } from "./components/includeExclude/IncludeExcludeAppTrigger.vue.js";
+import { default as Hr } from "./components/includeExclude/IncludeExcludeAppHeader.vue.js";
+import { default as Pr } from "./components/includeExclude/IncludeExcludeChipFilter.vue.js";
+import { default as vr } from "./components/filterDropdown/FilterDropdown.vue.js";
+import { default as Nr } from "./components/filterDropdown/AddFilterButton.vue.js";
+import { default as Jr } from "./components/typography/Heading.vue.js";
+import { default as Rr } from "./components/typography/Text.vue.js";
+import { default as jr } from "./components/typography/v4/Typography.vue.js";
+import { default as zr } from "./components/multibar/MultiBar.vue.js";
+import { default as Qr } from "./components/layout/FoldableSection.vue.js";
+import { default as Ur } from "./components/forms/FormRow.vue.js";
+import { default as Xr } from "./components/forms/FormCard.vue.js";
+import { default as oe } from "./components/forms/CardPanel.vue.js";
+import { default as ee } from "./components/forms/FormField.vue.js";
+import { default as me } from "./components/banner/Banner.vue.js";
+import { default as ae } from "./components/alert/Alert.vue.js";
+import { default as ie } from "./components/link/Link.vue.js";
+import { default as xe } from "./components/helpText/HelpText.vue.js";
+import { default as ne } from "./components/autocomplete/Autocomplete.vue.js";
+import { default as ue } from "./components/chart/Chart.vue.js";
+import { ChartType as Te, TooltipOrder as ye, TrendDirection as ce } from "./components/chart/types.js";
+import { default as Fe } from "./components/columnPicker/ColumnPicker.vue.js";
+import { default as Ce } from "./components/columnConfigurator/ColumnConfigurator.vue.js";
+import { default as Ee } from "./components/tagsField/TagsField.vue.js";
+import { default as he } from "./components/tagsField/TagsFieldChip.vue.js";
+import { default as Me } from "./components/tag/Tag.vue.js";
 const Z = {
   ...e,
   ...t,
@@ -128,10 +130,10 @@ const Z = {
   ...x,
   ...s,
   ...T,
-  ...c,
+  ...y,
   ...u,
   ...$,
-  ...y,
+  ...c,
   ...g,
   ...F,
   ...I,
@@ -170,65 +172,67 @@ const Z = {
   ...X
 };
 export {
-  vr as AddFilterButton,
-  me as Alert,
+  Nr as AddFilterButton,
+  ae as Alert,
   zo as AlertTypes,
-  Tr as AppIcon,
+  cr as AppIcon,
   so as AppIconTypes,
-  ir as AppTrigger,
+  xr as AppTrigger,
   eo as AppTriggerTypes,
-  xe as Autocomplete,
-  xr as AutocompleteDropdown,
+  ne as Autocomplete,
+  nr as AutocompleteDropdown,
   mo as AutocompleteDropdownTypes,
   Xo as AutocompleteTypes,
-  ee as Banner,
+  me as Banner,
   jo as BannerTypes,
-  Xr as CardPanel,
-  ne as Chart,
-  ue as ChartType,
+  oe as CardPanel,
+  ue as Chart,
+  Te as ChartType,
   or as ChartTypes,
-  Fe as ColumnConfigurator,
+  Ce as ColumnConfigurator,
   mr as ColumnConfiguratorTypes,
-  ye as ColumnPicker,
+  Fe as ColumnPicker,
   er as ColumnPickerTypes,
-  Pr as FilterDropdown,
+  vr as FilterDropdown,
   Fo as FilterDropdownTypes,
-  yr as FloatingToolbar,
+  Fr as FloatingToolbar,
   lo as FloatingToolbarTypes,
-  zr as FoldableSection,
+  Qr as FoldableSection,
   Mo as FoldableSectionTypes,
-  Ur as FormCard,
+  Xr as FormCard,
   wo as FormCardTypes,
-  oe as FormField,
+  ee as FormField,
   ko as FormFieldTypes,
-  Qr as FormRow,
-  Nr as Heading,
-  ie as HelpText,
+  Ur as FormRow,
+  Jr as Heading,
+  xe as HelpText,
   Uo as HelpTextTypes,
-  co as ID_INJECTION_KEY,
-  Fr as IncludeExclude,
-  wr as IncludeExcludeAppHeader,
-  Mr as IncludeExcludeAppTrigger,
-  Hr as IncludeExcludeChipFilter,
-  Cr as IncludeExcludeDragDrop,
-  Er as IncludeExcludeOption,
-  hr as IncludeExcludeOptionDraggable,
+  yo as ID_INJECTION_KEY,
+  Cr as IncludeExclude,
+  Hr as IncludeExcludeAppHeader,
+  wr as IncludeExcludeAppTrigger,
+  Pr as IncludeExcludeChipFilter,
+  Er as IncludeExcludeDragDrop,
+  hr as IncludeExcludeOption,
+  Mr as IncludeExcludeOptionDraggable,
   $o as IncludeExcludeTypes,
-  ae as Link,
+  ie as Link,
   Qo as LinkTypes,
-  ur as Menu,
-  nr as MenuItem,
+  Tr as Menu,
+  ur as MenuItem,
   ao as MenuItemTypes,
   io as MenuTypes,
-  jr as MultiBar,
+  zr as MultiBar,
   ho as MultiBarTypes,
-  Ce as TagsField,
-  Ee as TagsFieldChip,
+  Me as Tag,
+  ir as TagTypes,
+  Ee as TagsField,
+  he as TagsFieldChip,
   ar as TagsFieldTypes,
-  Jr as Text,
-  $e as TooltipOrder,
-  Te as TrendDirection,
-  Rr as Typography,
+  Rr as Text,
+  ye as TooltipOrder,
+  ce as TrendDirection,
+  jr as Typography,
   Co as TypographyTypes,
   Eo as TypographyTypesV4,
   Z as default,
@@ -236,7 +240,7 @@ export {
   No as scrollToFirstInvalidElement,
   Ro as useDateService,
   Vo as useFormValidation,
-  yo as useId,
+  co as useId,
   So as useSearch,
   Oo as useToggle,
   Jo as yupValidation

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ironsource/shared-ui",
-  "version": "2.2.0-test.7",
+  "version": "2.2.0-test.9",
   "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/TagsFieldChip.vue_vue_type_style_index_0_scoped_a5f2dd8b_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-a5f2dd8b],.font-chart-2[data-v-a5f2dd8b],.font-chart-1[data-v-a5f2dd8b]{font-family:Inter,sans-serif;font-weight:700}.chip-input-sizer[data-v-a5f2dd8b],.chip-input[data-v-a5f2dd8b],.font-chip-label[data-v-a5f2dd8b],.font-table-label[data-v-a5f2dd8b],.font-button[data-v-a5f2dd8b],.font-heading-6[data-v-a5f2dd8b],.font-heading-5[data-v-a5f2dd8b],.font-heading-4[data-v-a5f2dd8b],.font-heading-3[data-v-a5f2dd8b],.font-heading-2[data-v-a5f2dd8b],.font-heading-1[data-v-a5f2dd8b],.font-title[data-v-a5f2dd8b]{font-family:Inter,sans-serif;font-weight:600}.font-tab-label1[data-v-a5f2dd8b],.font-input-label[data-v-a5f2dd8b],.font-overline[data-v-a5f2dd8b],.font-subtitle-2[data-v-a5f2dd8b],.font-subtitle-1[data-v-a5f2dd8b]{font-family:Inter,sans-serif;font-weight:500}.font-caption[data-v-a5f2dd8b],.font-body-2[data-v-a5f2dd8b],.font-body-1[data-v-a5f2dd8b]{font-family:Inter,sans-serif;font-weight:400}.font-title[data-v-a5f2dd8b]{font-size:2.5rem;line-height:3rem;letter-spacing:-.055rem}.font-heading-1[data-v-a5f2dd8b]{font-size:1.5rem;line-height:1.75rem;letter-spacing:-.0285rem}.font-heading-2[data-v-a5f2dd8b]{font-size:1.125rem;line-height:1.75rem;letter-spacing:-.01575rem}.font-heading-3[data-v-a5f2dd8b]{font-size:1rem;line-height:1.5rem;letter-spacing:-.011rem}.font-heading-4[data-v-a5f2dd8b]{font-size:.875rem;line-height:1rem;letter-spacing:unset}.font-heading-5[data-v-a5f2dd8b]{font-size:.8125rem;line-height:16px;letter-spacing:unset}.font-heading-6[data-v-a5f2dd8b]{font-size:.75rem;line-height:.75rem;letter-spacing:0}.font-body-1[data-v-a5f2dd8b]{font-size:.875rem;line-height:1.25rem;letter-spacing:-.00525rem}.font-body-2[data-v-a5f2dd8b]{font-size:.8125rem;line-height:1.25rem;letter-spacing:-.00244rem}.font-subtitle-1[data-v-a5f2dd8b]{font-size:.875rem;line-height:1.25rem;letter-spacing:-.00525rem}.font-subtitle-2[data-v-a5f2dd8b]{font-size:.8125rem;line-height:1.25rem;letter-spacing:-.00244rem}.font-chart-1[data-v-a5f2dd8b]{font-size:1.5rem;line-height:1.5rem;letter-spacing:-.015rem}.font-chart-2[data-v-a5f2dd8b]{font-size:1.25rem;line-height:1.25rem;letter-spacing:-.0125rem}.font-button[data-v-a5f2dd8b]{font-size:.875rem;line-height:1.25rem;letter-spacing:.00875rem}.font-overline[data-v-a5f2dd8b]{font-size:.75rem;line-height:1rem;letter-spacing:.045rem;text-transform:uppercase}.font-caption[data-v-a5f2dd8b]{font-size:.75rem;line-height:1rem}.font-table-label[data-v-a5f2dd8b]{font-size:.8125rem;line-height:1.25rem;letter-spacing:.00813rem}.font-input-label[data-v-a5f2dd8b]{font-size:.8125rem;line-height:1rem;letter-spacing:.00813rem}.font-tab-label1[data-v-a5f2dd8b],.font-tab-label2[data-v-a5f2dd8b]{font-size:.875rem;line-height:1rem}.chip-input-sizer[data-v-a5f2dd8b],.chip-input[data-v-a5f2dd8b],.font-chip-label[data-v-a5f2dd8b]{font-size:.75rem;line-height:1rem}h1[data-v-a5f2dd8b],h2[data-v-a5f2dd8b],h3[data-v-a5f2dd8b],h4[data-v-a5f2dd8b],h5[data-v-a5f2dd8b],h6[data-v-a5f2dd8b]{margin:0}.rounded-chip[data-v-a5f2dd8b]{border-radius:100px}.tags-field-chip--editing[data-v-a5f2dd8b]{outline:1px solid var(--outline-color)}.chip-content[data-v-a5f2dd8b]{display:flex;align-items:center;position:relative;min-width:.625rem;max-width:31.25rem}.chip-label[data-v-a5f2dd8b]{min-width:.5rem}.chip-label--hidden[data-v-a5f2dd8b]{visibility:hidden}.chip-input[data-v-a5f2dd8b]{position:static;width:auto;background:transparent;min-width:.6rem;padding:0;border:none;max-width:100%;overflow-x:auto;white-space:nowrap}.chip-input[data-v-a5f2dd8b]:focus{outline:none}.chip-input-outline[data-v-a5f2dd8b]::placeholder{color:var(--action-disabled)}.clear-button[data-v-a5f2dd8b]{margin-left:.25rem;color:var(--action-active);cursor:pointer}.clear-button[data-v-a5f2dd8b]:hover{color:var(--text-primary)}.clear-button--invalid[data-v-a5f2dd8b]{color:var(--error-dark)}.clear-button--invalid[data-v-a5f2dd8b]:hover{color:var(--error-darker)}.chip-input-sizer[data-v-a5f2dd8b]{position:absolute;visibility:hidden;height:0;white-space:pre;pointer-events:none;padding:0}