@ironsource/shared-ui 2.2.0-test.2 → 2.2.0-test.20

package/components/table-cells/v4/index.d.ts

@@ -6,10 +6,10 @@ declare const EditableTypes: () => ({
         $props: Partial<{
             type: "input" | "dropdown";
             cell: string;
+            isLoading: boolean;
             withIcons: boolean;
             saveOnClickOutside: boolean;
             validateFunction: (value: unknown) => string | boolean;
-            isLoading: boolean;
             displayValue: (option: unknown) => unknown;
         }> & Omit<Readonly<import("vue").ExtractPropTypes<{
             type: {
@@ -21,6 +21,10 @@ declare const EditableTypes: () => ({
                 type: import("vue").PropType<string>;
                 default: string;
             };
+            isLoading: {
+                type: import("vue").PropType<boolean>;
+                default: boolean;
+            };
             withIcons: {
                 type: import("vue").PropType<boolean>;
                 default: boolean;
@@ -33,10 +37,6 @@ declare const EditableTypes: () => ({
                 type: import("vue").PropType<(value: unknown) => string | boolean>;
                 default: () => false;
             };
-            isLoading: {
-                type: import("vue").PropType<boolean>;
-                default: boolean;
-            };
             rowIndex: {
                 type: import("vue").PropType<number>;
                 required: true;
@@ -49,7 +49,7 @@ declare const EditableTypes: () => ({
                 type: import("vue").PropType<(option: unknown) => unknown>;
                 default: (cell: unknown) => unknown;
             };
-        }>> & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, "type" | "cell" | "withIcons" | "saveOnClickOutside" | "validateFunction" | "isLoading" | "displayValue">;
+        }>> & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, "type" | "cell" | "isLoading" | "withIcons" | "saveOnClickOutside" | "validateFunction" | "displayValue">;
         $attrs: {
             [x: string]: unknown;
         };
@@ -73,6 +73,10 @@ declare const EditableTypes: () => ({
                 type: import("vue").PropType<string>;
                 default: string;
             };
+            isLoading: {
+                type: import("vue").PropType<boolean>;
+                default: boolean;
+            };
             withIcons: {
                 type: import("vue").PropType<boolean>;
                 default: boolean;
@@ -85,10 +89,6 @@ declare const EditableTypes: () => ({
                 type: import("vue").PropType<(value: unknown) => string | boolean>;
                 default: () => false;
             };
-            isLoading: {
-                type: import("vue").PropType<boolean>;
-                default: boolean;
-            };
             rowIndex: {
                 type: import("vue").PropType<number>;
                 required: true;
@@ -104,10 +104,10 @@ declare const EditableTypes: () => ({
         }>>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, {
             type: "input" | "dropdown";
             cell: string;
+            isLoading: boolean;
             withIcons: boolean;
             saveOnClickOutside: boolean;
             validateFunction: (value: unknown) => string | boolean;
-            isLoading: boolean;
             displayValue: (option: unknown) => unknown;
         }, {}, string> & {
             beforeCreate?: (() => void) | (() => void)[];
@@ -139,6 +139,10 @@ declare const EditableTypes: () => ({
             type: import("vue").PropType<string>;
             default: string;
         };
+        isLoading: {
+            type: import("vue").PropType<boolean>;
+            default: boolean;
+        };
         withIcons: {
             type: import("vue").PropType<boolean>;
             default: boolean;
@@ -151,10 +155,6 @@ declare const EditableTypes: () => ({
             type: import("vue").PropType<(value: unknown) => string | boolean>;
             default: () => false;
         };
-        isLoading: {
-            type: import("vue").PropType<boolean>;
-            default: boolean;
-        };
         rowIndex: {
             type: import("vue").PropType<number>;
             required: true;
@@ -181,6 +181,10 @@ declare const EditableTypes: () => ({
         type: import("vue").PropType<string>;
         default: string;
     };
+    isLoading: {
+        type: import("vue").PropType<boolean>;
+        default: boolean;
+    };
     withIcons: {
         type: import("vue").PropType<boolean>;
         default: boolean;
@@ -193,10 +197,6 @@ declare const EditableTypes: () => ({
         type: import("vue").PropType<(value: unknown) => string | boolean>;
         default: () => false;
     };
-    isLoading: {
-        type: import("vue").PropType<boolean>;
-        default: boolean;
-    };
     rowIndex: {
         type: import("vue").PropType<number>;
         required: true;
@@ -212,10 +212,10 @@ declare const EditableTypes: () => ({
 }>>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, {
     type: "input" | "dropdown";
     cell: string;
+    isLoading: boolean;
     withIcons: boolean;
     saveOnClickOutside: boolean;
     validateFunction: (value: unknown) => string | boolean;
-    isLoading: boolean;
     displayValue: (option: unknown) => unknown;
 }, {}, string> & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps & (new () => {
     $slots: {

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

@@ -0,0 +1,112 @@
+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;
+    iconType?: 'regular' | 'fill';
+    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;
+    iconType: string;
+    maxLengthTooltip: string;
+}>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:label": (value: string) => void;
+    remove: () => void;
+    stopEditing: () => void;
+    "update:isSelected": (value: boolean) => 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;
+    iconType?: 'regular' | 'fill';
+    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;
+    iconType: string;
+    maxLengthTooltip: string;
+}>>> & {
+    onRemove?: () => any;
+    "onUpdate:label"?: (value: string) => any;
+    onStopEditing?: () => any;
+    "onUpdate:isSelected"?: (value: boolean) => any;
+}, {
+    label: string;
+    testId: string;
+    variant: ChipVariant;
+    disabled: boolean;
+    color: ChipColor;
+    size: ChipSize;
+    iconName: string;
+    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;
+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_78f19cb0_lang.css"; //*');
+const c = /* @__PURE__ */ _(o, [["__scopeId", "data-v-78f19cb0"]]);
+export {
+  c as default
+};

package/components/tag/Tag.vue2.js

@@ -0,0 +1,221 @@
+ 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 "../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: "" },
+    iconType: { default: "regular" },
+    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", "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({
+      get: () => e.label,
+      set: (n) => {
+        v("update:label", n);
+      }
+    }), 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");
+    };
+    S(
+      () => [o.value, e.placeholder, r.value],
+      async () => {
+        await N(), r.value && y.value ? h.value = y.value.offsetWidth + "px" : h.value = void 0;
+      },
+      { immediate: !0 }
+    ), S(
+      () => e.editable,
+      () => {
+        e.editable && (i.value = !0);
+      }
+    );
+    const B = {
+      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)"
+    }, L = {
+      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 k.value ? j[n] : L[n];
+    }), A = 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(() => {
+      if (e.editable && e.variant !== "outlined" || !e.selectable) {
+        const n = r.value ? B[e.color] : "var(--primary-main-50-p)";
+        return {
+          "--outline-color": e.isInvalid ? B.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 (n, t) => (f(), C(l(ee), {
+      placement: "top",
+      text: a.maxLengthTooltip,
+      "is-open": l(I),
+      disabled: !l(I),
+      distance: 10,
+      skidding: 10
+    }, {
+      content: m(() => [
+        E("div", ae, [
+          w(l(D), { variant: "body2" }, {
+            default: m(() => [
+              V(T(a.maxLengthTooltip), 1)
+            ]),
+            _: 1
+          })
+        ])
+      ]),
+      trigger: m(() => [
+        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" && !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(z),
+            "unselected-tag": !i.value && a.selectable && a.label && !u.value,
+            "editable-tag": a.editable && !a.disabled
+          }),
+          label: l(o),
+          "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: b(U, ["stop"])
+        }, {
+          default: m(() => [
+            E("div", le, [
+              a.iconName ? (f(), 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((f(), H("input", {
+                key: 2,
+                ref_key: "inputRef",
+                ref: M,
+                "onUpdate:modelValue": t[0] || (t[0] = (c) => Q(o) ? o.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(b(x, ["prevent"]), ["enter"]),
+                  K(b(x, ["prevent"]), ["esc"])
+                ]
+              }, null, 46, te)), [
+                [
+                  X,
+                  l(o),
+                  void 0,
+                  { trim: !0 }
+                ]
+              ]) : (f(), C(l(D), {
+                key: 1,
+                variant: "chipLabel",
+                class: p(["tag-label", {
+                  "tag-label--placeholder": !l(o) && a.placeholder,
+                  "tag-label--disabled": a.disabled
+                }])
+              }, {
+                default: m(() => [
+                  V(T(l(o) || a.placeholder), 1)
+                ]),
+                _: 1
+              }, 8, ["class"])),
+              r.value ? (f(), H("span", {
+                key: 3,
+                ref_key: "sizerRef",
+                ref: y,
+                class: "tag-input-sizer"
+              }, T(l(o) || 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] = b(() => {
+              }, ["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]
+            ])
+          ]),
+          _: 1
+        }, 8, ["class", "label", "test-id", "color", "size", "variant", "disabled", "style", "onClick"])
+      ]),
+      _: 1
+    }, 8, ["text", "is-open", "disabled"]));
+  }
+});
+export {
+  se as default
+};

package/components/tag/index.d.ts

@@ -0,0 +1,161 @@
+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;
+    };
+    iconType: {
+        type: import("vue").PropType<"fill" | "regular">;
+        default: string;
+    };
+    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;
+    "update:isSelected": (value: boolean) => 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;
+    };
+    iconType: {
+        type: import("vue").PropType<"fill" | "regular">;
+        default: string;
+    };
+    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;
+    "onUpdate:isSelected"?: (value: boolean) => 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;
+    iconType: "fill" | "regular";
+    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/index.d.ts

@@ -1,5 +1,44 @@
 import TagsField from './TagsField.vue';
-declare const TagsFieldTypes: () => import("vue").DefineComponent<{
+import TagsFieldChip from './TagsFieldChip.vue';
+declare const TagsFieldTypes: () => (import("vue").DefineComponent<{
+    label: {
+        type: import("vue").PropType<string>;
+        required: true;
+        default: string;
+    };
+    testId: {
+        type: import("vue").PropType<string>;
+        default: string;
+    };
+    isInvalid: {
+        type: import("vue").PropType<boolean>;
+        default: boolean;
+    };
+}, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:label": (value: string) => void;
+    remove: () => 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;
+    };
+    isInvalid: {
+        type: import("vue").PropType<boolean>;
+        default: boolean;
+    };
+}>> & {
+    onRemove?: () => any;
+    "onUpdate:label"?: (value: string) => any;
+}, {
+    label: string;
+    testId: string;
+    isInvalid: boolean;
+}> | import("vue").DefineComponent<{
     testId: {
         type: import("vue").PropType<string>;
         default: string;
@@ -71,5 +110,5 @@ declare const TagsFieldTypes: () => import("vue").DefineComponent<{
     feedbackText: string;
     feedbackVariant: "success" | "warning" | "error";
     showFeedbackTextIcon: boolean;
-}>[];
-export { TagsField, TagsFieldTypes };
+}>)[];
+export { TagsField, TagsFieldChip, TagsFieldTypes };