@ironsource/shared-ui 2.1.12-rc.50 → 2.1.12-rc.51

package/components/chart/LegendSorting.vue.d.ts

@@ -2,19 +2,24 @@ declare const _default: import("vue").DefineComponent<__VLS_WithDefaults<__VLS_T
     selected: unknown;
     options: unknown[];
     optionNameKey: string;
+    testId?: string;
 }>, {
     options: () => any[];
+    testId: string;
 }>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     "update:selected": (option: unknown) => void;
 }, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
     selected: unknown;
     options: unknown[];
     optionNameKey: string;
+    testId?: string;
 }>, {
     options: () => any[];
+    testId: string;
 }>>> & {
     "onUpdate:selected"?: (option: unknown) => any;
 }, {
+    testId: string;
     options: unknown[];
 }>;
 export default _default;

package/components/chart/LegendSorting.vue.js

@@ -1,4 +1,4 @@
-import { defineComponent as l, openBlock as m, createElementBlock as s, createVNode as r, unref as n, isRef as d, withCtx as a, mergeProps as c } from "vue";
+import { defineComponent as l, openBlock as s, createElementBlock as m, createVNode as r, unref as n, isRef as d, withCtx as a, mergeProps as c } from "vue";
 import u from "../dropdown/v4/DropdownV4.vue.js";
 import "../dropdown/v4/DefaultDropdownTrigger.vue.js";
 import f from "../dropdown/v4/IconButtonDropdownTrigger.vue.js";
@@ -15,28 +15,30 @@ const y = { class: "legend-sorting" }, L = /* @__PURE__ */ l({
   props: {
     selected: null,
     options: { default: () => [] },
-    optionNameKey: null
+    optionNameKey: null,
+    testId: { default: "" }
   },
   emits: ["update:selected"],
-  setup(o, { emit: p }) {
-    const t = g(o, "selected", p);
-    return (v, i) => (m(), s("div", y, [
+  setup(e, { emit: p }) {
+    const o = g(e, "selected", p);
+    return (v, i) => (s(), m("div", y, [
       r(n(u), {
-        selected: n(t),
-        "onUpdate:selected": i[0] || (i[0] = (e) => d(t) ? t.value = e : null),
-        "display-value": (e) => e[o.optionNameKey],
-        options: o.options,
-        "option-name-key": o.optionNameKey,
-        placement: "bottom-end"
+        selected: n(o),
+        "onUpdate:selected": i[0] || (i[0] = (t) => d(o) ? o.value = t : null),
+        "display-value": (t) => t[e.optionNameKey],
+        options: e.options,
+        "option-name-key": e.optionNameKey,
+        placement: "bottom-end",
+        "test-id": e.testId
       }, {
-        "dropdown-trigger": a(({ buttonTriggerProps: e }) => [
-          r(n(f), c(e, {
+        "dropdown-trigger": a(({ buttonTriggerProps: t }) => [
+          r(n(f), c(t, {
             "icon-name": "funnel-simple",
             "icon-type": "regular"
           }), null, 16)
         ]),
         _: 1
-      }, 8, ["selected", "display-value", "options", "option-name-key"])
+      }, 8, ["selected", "display-value", "options", "option-name-key", "test-id"])
     ]));
   }
 });

package/components/chart/SettingsHeader.vue.d.ts

@@ -1,15 +1,23 @@
 import { ChartType } from './types';
-declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__VLS_TypePropsToRuntimeProps<{
+declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
     chartType: ChartType;
     hideLegend: boolean;
+    testId?: string;
+}>, {
+    testId: string;
 }>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     "update:chartType": (type: ChartType) => void;
-}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<__VLS_TypePropsToRuntimeProps<{
+}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
     chartType: ChartType;
     hideLegend: boolean;
+    testId?: string;
+}>, {
+    testId: string;
 }>>> & {
     "onUpdate:chartType"?: (type: ChartType) => any;
-}, {}>, {
+}, {
+    testId: string;
+}>, {
     "before-chart-type"?(_: {}): any;
     metric?(_: {}): any;
     breakdowns?(_: {}): any;
@@ -24,6 +32,14 @@ type __VLS_TypePropsToRuntimeProps<T> = {
         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];
+} & {};
 type __VLS_WithTemplateSlots<T, S> = T & {
     new (): {
         $slots: S;

package/components/chart/SettingsHeader.vue.js

@@ -1,7 +1,7 @@
 import e from "./SettingsHeader.vue2.js";
 /* empty css                     */import o from "../../_virtual/_plugin-vue_export-helper.js";
-// import "../../SettingsHeader.vue_vue_type_style_index_0_scoped_01f78cd7_lang.css"; //*');
-const c = /* @__PURE__ */ o(e, [["__scopeId", "data-v-01f78cd7"]]);
+// import "../../SettingsHeader.vue_vue_type_style_index_0_scoped_a869d327_lang.css"; //*');
+const a = /* @__PURE__ */ o(e, [["__scopeId", "data-v-a869d327"]]);
 export {
-  c as default
+  a as default
 };

package/components/chart/SettingsHeader.vue2.js

@@ -1,66 +1,73 @@
- import "../../SettingsHeader.vue_vue_type_style_index_0_scoped_01f78cd7_lang.css"; import { defineComponent as h, computed as g, openBlock as y, createElementBlock as f, createElementVNode as r, normalizeClass as l, renderSlot as i, createVNode as p, unref as t, isRef as v, withCtx as T, mergeProps as b } from "vue";
-import w from "../dropdown/v4/DropdownV4.vue.js";
+ import "../../SettingsHeader.vue_vue_type_style_index_0_scoped_a869d327_lang.css"; import { defineComponent as y, computed as T, openBlock as v, createElementBlock as I, mergeProps as m, unref as t, createElementVNode as s, normalizeClass as c, renderSlot as i, createVNode as u, isRef as b, withCtx as w } from "vue";
+import N from "../dropdown/v4/DropdownV4.vue.js";
 import "../dropdown/v4/DefaultDropdownTrigger.vue.js";
 import "../dropdown/v4/IconButtonDropdownTrigger.vue.js";
 import "../dropdown/v4/ChipDropdownTrigger.vue.js";
 import "../dropdown/v4/AppDropdownTrigger.vue.js";
-import k from "../dropdown/v4/ButtonDropdownTrigger.vue.js";
+import O from "../dropdown/v4/ButtonDropdownTrigger.vue.js";
 import "../dropdown/v4/ButtonFilterDropdownTrigger.vue.js";
 import "../dropdown/v4/TreeDropdown.vue.js";
 import "../dropdown/v4/OptionV4.vue.js";
 import "../dropdown/v4/ConditionalDropdown.vue.js";
-import { DROPDOWN_TYPE_OPTIONS as c } from "./consts.js";
-const B = { class: "settings-header-container" }, C = { class: "chart-type-selection" }, H = /* @__PURE__ */ h({
+import { DROPDOWN_TYPE_OPTIONS as f } from "./consts.js";
+import { useTestIdAttrs as k } from "../../utils/testIds.js";
+import { ChartSettingsHeaderTestIdModifiers as n } from "../../testids/index.js";
+const C = { class: "chart-type-selection" }, M = /* @__PURE__ */ y({
   __name: "SettingsHeader",
   props: {
     chartType: null,
-    hideLegend: { type: Boolean }
+    hideLegend: { type: Boolean },
+    testId: { default: "" }
   },
   emits: ["update:chartType"],
-  setup(s, { emit: m }) {
-    const u = s, o = g({
+  setup(r, { emit: h }) {
+    const a = r, o = T({
       get() {
-        return c.find(({ id: e }) => e === u.chartType);
+        return f.find(({ id: e }) => e === a.chartType);
       },
       set(e) {
-        m("update:chartType", e.id);
+        h("update:chartType", e.id);
       }
-    }), d = (e) => `Chart: ${e.name}`;
-    return (e, a) => (y(), f("div", B, [
-      r("div", {
-        class: l(["settings", { "settings-spacer": !s.hideLegend }])
+    }), l = (e) => `Chart: ${e.name}`, g = k(
+      a.testId,
+      n
+    );
+    return (e, p) => (v(), I("div", m({ class: "settings-header-container" }, t(g)[t(n).CONTAINER]), [
+      s("div", {
+        class: c(["settings", { "settings-spacer": !r.hideLegend }])
       }, [
         i(e.$slots, "before-chart-type", {}, void 0, !0),
-        r("div", C, [
-          p(t(w), {
+        s("div", C, [
+          u(t(N), {
             selected: t(o),
-            "onUpdate:selected": a[0] || (a[0] = (n) => v(o) ? o.value = n : null),
-            options: t(c),
+            "onUpdate:selected": p[0] || (p[0] = (d) => b(o) ? o.value = d : null),
+            options: t(f),
             "option-name-key": "name",
-            "display-value": d,
+            "display-value": l,
             placeholder: "Select chart type",
-            size: "small"
+            size: "small",
+            "test-id": `${r.testId}-${t(n).TYPE_DROPDOWN}`
           }, {
-            "dropdown-trigger": T(({ buttonTriggerProps: n }) => [
-              p(t(k), b(n, {
-                label: d(t(o))
+            "dropdown-trigger": w(({ buttonTriggerProps: d }) => [
+              u(t(O), m(d, {
+                label: l(t(o))
               }), null, 16, ["label"])
             ]),
             _: 1
-          }, 8, ["selected", "options"])
+          }, 8, ["selected", "options", "test-id"])
         ]),
-        r("div", null, [
+        s("div", null, [
           i(e.$slots, "metric", {}, void 0, !0)
         ])
       ], 2),
-      r("div", {
-        class: l(["breakdowns", { "breakdowns-border": !s.hideLegend }])
+      s("div", {
+        class: c(["breakdowns", { "breakdowns-border": !r.hideLegend }])
       }, [
         i(e.$slots, "breakdowns", {}, void 0, !0)
       ], 2)
-    ]));
+    ], 16));
   }
 });
 export {
-  H as default
+  M as default
 };

package/components/chart/index.d.ts

@@ -6,6 +6,7 @@ declare const ChartTypes: () => ({
         $data: {};
         $props: Partial<{
             header: string;
+            testId: string;
             loading: boolean;
             visibleIds: unknown[];
             minVisible: number;
@@ -53,6 +54,10 @@ declare const ChartTypes: () => ({
                 type: import("vue").PropType<string>;
                 default: string;
             };
+            testId: {
+                type: import("vue").PropType<string>;
+                default: string;
+            };
             loading: {
                 type: import("vue").PropType<boolean>;
                 default: boolean;
@@ -234,7 +239,7 @@ declare const ChartTypes: () => ({
             "onUpdate:visibleIds"?: (visibleIds: unknown[]) => any;
             "onUpdate:sortSelected"?: (sortOption: unknown) => any;
             "onUpdate:chartType"?: (chartType: ChartType) => any;
-        } & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, "header" | "loading" | "visibleIds" | "minVisible" | "maxVisible" | "maxLimitTooltipText" | "sortSelected" | "sortOptions" | "sortOptionNameKey" | "chartType" | "hideLegend" | "xAxisFormat" | "xAxisDateInterval" | "totalsChart" | "parsing" | "yAxisFormat" | "valueSuffix" | "valuePrefix" | "trendTooltip" | "subheader" | "subheaderTooltip" | "trendValue" | "trendDirection" | "noteText" | "dataSets" | "tickCount" | "truncateTickLabels" | "keepSubheaderVisible" | "empty" | "noDataIcon" | "noDataTitle" | "noDataSubtitle" | "withAnimation" | "tooltipTotalType" | "tooltipTotalCalcFn" | "tooltipOrder" | "indicateIncompleteData" | "tooltipExcludeTotalItem" | "fullHeight" | "fullHeightBottomSpacing" | "withSettingsHeader" | "extraCharts" | "colorVariant">;
+        } & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, "header" | "testId" | "loading" | "visibleIds" | "minVisible" | "maxVisible" | "maxLimitTooltipText" | "sortSelected" | "sortOptions" | "sortOptionNameKey" | "chartType" | "hideLegend" | "xAxisFormat" | "xAxisDateInterval" | "totalsChart" | "parsing" | "yAxisFormat" | "valueSuffix" | "valuePrefix" | "trendTooltip" | "subheader" | "subheaderTooltip" | "trendValue" | "trendDirection" | "noteText" | "dataSets" | "tickCount" | "truncateTickLabels" | "keepSubheaderVisible" | "empty" | "noDataIcon" | "noDataTitle" | "noDataSubtitle" | "withAnimation" | "tooltipTotalType" | "tooltipTotalCalcFn" | "tooltipOrder" | "indicateIncompleteData" | "tooltipExcludeTotalItem" | "fullHeight" | "fullHeightBottomSpacing" | "withSettingsHeader" | "extraCharts" | "colorVariant">;
         $attrs: {
             [x: string]: unknown;
         };
@@ -253,6 +258,10 @@ declare const ChartTypes: () => ({
                 type: import("vue").PropType<string>;
                 default: string;
             };
+            testId: {
+                type: import("vue").PropType<string>;
+                default: string;
+            };
             loading: {
                 type: import("vue").PropType<boolean>;
                 default: boolean;
@@ -440,6 +449,7 @@ declare const ChartTypes: () => ({
             "update:sortSelected": (sortOption: unknown) => void;
         }, string, {
             header: string;
+            testId: string;
             loading: boolean;
             visibleIds: unknown[];
             minVisible: number;
@@ -507,6 +517,10 @@ declare const ChartTypes: () => ({
             type: import("vue").PropType<string>;
             default: string;
         };
+        testId: {
+            type: import("vue").PropType<string>;
+            default: string;
+        };
         loading: {
             type: import("vue").PropType<boolean>;
             default: boolean;
@@ -697,6 +711,10 @@ declare const ChartTypes: () => ({
         type: import("vue").PropType<string>;
         default: string;
     };
+    testId: {
+        type: import("vue").PropType<string>;
+        default: string;
+    };
     loading: {
         type: import("vue").PropType<boolean>;
         default: boolean;
@@ -884,6 +902,7 @@ declare const ChartTypes: () => ({
     "update:sortSelected": (sortOption: unknown) => void;
 }, string, {
     header: string;
+    testId: string;
     loading: boolean;
     visibleIds: unknown[];
     minVisible: number;

package/components/columnConfigurator/index.d.ts

@@ -69,4 +69,5 @@ declare const ColumnConfiguratorTypes: () => import("vue").DefineComponent<{
     columnsConfig: import("./ColumnConfigurator.types").ColumnConfigSection[];
     childSelection: Record<string, string | number>;
 }>[];
+export type { ColumnConfigSection } from './ColumnConfigurator.types';
 export { ColumnConfigurator, ColumnConfiguratorTypes };

package/components/dropdown/v4/DropdownV4.vue.d.ts

@@ -368,6 +368,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
             disabled: boolean;
             label: any;
             onClick: () => void;
+            testId: string;
         };
         defaultTriggerProps: {
             placeholder: string;

package/components/dropdown/v4/DropdownV4.vue.js

@@ -1,8 +1,8 @@
 import o from "./DropdownV4.vue2.js";
-/* empty css                 *//* empty css                 */import e from "../../../_virtual/_plugin-vue_export-helper.js";
-// import "../../../DropdownV4.vue_vue_type_style_index_0_scoped_f9907ea0_lang.css"; //*');
+/* empty css                 *//* empty css                 */import _ from "../../../_virtual/_plugin-vue_export-helper.js";
+// import "../../../DropdownV4.vue_vue_type_style_index_0_scoped_2d66b7b6_lang.css"; //*');
 // import "../../../DropdownV4.vue_vue_type_style_index_1_lang.css";  //');
-const r = /* @__PURE__ */ e(o, [["__scopeId", "data-v-f9907ea0"]]);
+const r = /* @__PURE__ */ _(o, [["__scopeId", "data-v-2d66b7b6"]]);
 export {
   r as default
 };

package/components/dropdown/v4/DropdownV4.vue2.js

@@ -1,4 +1,4 @@
- import "../../../DropdownV4.vue_vue_type_style_index_0_scoped_f9907ea0_lang.css";  import "../../../DropdownV4.vue_vue_type_style_index_1_lang.css";  import { defineComponent as ke, computed as B, watch as Te, toRaw as v, openBlock as a, createElementBlock as r, mergeProps as m, unref as t, renderSlot as u, createElementVNode as f, createVNode as d, withCtx as c, Transition as we, normalizeClass as x, normalizeStyle as be, createTextVNode as T, createCommentVNode as s, isRef as Ie, toDisplayString as q, withModifiers as j, Fragment as ve, renderList as Se, createSlots as Ce, createBlock as F, resolveDynamicComponent as Ke } from "vue";
+ import "../../../DropdownV4.vue_vue_type_style_index_0_scoped_2d66b7b6_lang.css";  import "../../../DropdownV4.vue_vue_type_style_index_1_lang.css";  import { defineComponent as ke, computed as B, watch as Te, toRaw as v, openBlock as a, createElementBlock as r, mergeProps as m, unref as t, renderSlot as u, createElementVNode as f, createVNode as d, withCtx as c, Transition as we, normalizeClass as x, normalizeStyle as be, createTextVNode as T, createCommentVNode as s, isRef as Ie, toDisplayString as q, withModifiers as j, Fragment as ve, renderList as Se, createSlots as Ce, createBlock as F, resolveDynamicComponent as Ke } from "vue";
 import N from "../../button/v4/ButtonV4.vue.js";
 import "../../button/v4/IconButtonV4.vue.js";
 import "../../button/v4/ButtonGroup.vue.js";
@@ -461,7 +461,8 @@ const $e = ["tabindex"], Me = { style: { width: "100%" } }, Re = { key: 0 }, ze
                     open: t(y),
                     disabled: e.disabled,
                     label: t(le) || e.placeholder,
-                    onClick: () => t(S)()
+                    onClick: () => t(S)(),
+                    testId: e.testId
                   },
                   defaultTriggerProps: {
                     placeholder: e.placeholder,

package/components/dropdown/v4/index.d.ts

@@ -3206,6 +3206,7 @@ declare const DropdownTypes: () => (({
                 disabled: boolean;
                 label: any;
                 onClick: () => void;
+                testId: string;
             };
             defaultTriggerProps: {
                 placeholder: string;

package/components/emptyState/v4/EmptyStateV4.vue.d.ts

@@ -6,6 +6,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     iconName?: string;
     iconType?: "fill" | "bold" | "regular" | "branded" | "ad-unit" | "ab-test" | "ad-networks" | "ad-networks/flat" | "content-rate";
     iconSize?: string;
+    testId?: string;
 }>, {
     title: string;
     subtitle: any;
@@ -14,6 +15,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     iconName: any;
     iconType: string;
     iconSize: string;
+    testId: string;
 }>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     click: () => void;
 }, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
@@ -24,6 +26,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     iconName?: string;
     iconType?: "fill" | "bold" | "regular" | "branded" | "ad-unit" | "ab-test" | "ad-networks" | "ad-networks/flat" | "content-rate";
     iconSize?: string;
+    testId?: string;
 }>, {
     title: string;
     subtitle: any;
@@ -32,10 +35,12 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     iconName: any;
     iconType: string;
     iconSize: string;
+    testId: string;
 }>>> & {
     onClick?: () => any;
 }, {
     title: string;
+    testId: string;
     variant: "error" | "settings" | "no-access" | "no-results" | "no-data" | "files";
     iconName: string;
     iconSize: string;

package/components/emptyState/v4/EmptyStateV4.vue.js

@@ -1,7 +1,7 @@
 import t from "./EmptyStateV4.vue2.js";
 /* empty css                   */import o from "../../../_virtual/_plugin-vue_export-helper.js";
-// import "../../../EmptyStateV4.vue_vue_type_style_index_0_scoped_18728498_lang.css"; //*');
-const s = /* @__PURE__ */ o(t, [["__scopeId", "data-v-18728498"]]);
+// import "../../../EmptyStateV4.vue_vue_type_style_index_0_scoped_76757f22_lang.css"; //*');
+const s = /* @__PURE__ */ o(t, [["__scopeId", "data-v-76757f22"]]);
 export {
   s as default
 };

package/components/emptyState/v4/EmptyStateV4.vue2.js

@@ -1,14 +1,16 @@
- import "../../../EmptyStateV4.vue_vue_type_style_index_0_scoped_18728498_lang.css"; import p from "../../../_virtual/dynamic-import-helper.js";
-import { defineComponent as v, computed as y, defineAsyncComponent as b, openBlock as e, createElementBlock as k, createBlock as i, unref as n, createCommentVNode as a, createElementVNode as N, renderSlot as s, withCtx as c, createTextVNode as r, toDisplayString as l } from "vue";
-import I from "../../button/v4/ButtonV4.vue.js";
+ import "../../../EmptyStateV4.vue_vue_type_style_index_0_scoped_76757f22_lang.css"; import I from "../../../_virtual/dynamic-import-helper.js";
+import { defineComponent as T, computed as N, defineAsyncComponent as b, openBlock as o, createElementBlock as k, mergeProps as s, unref as e, createBlock as n, createCommentVNode as a, createElementVNode as C, renderSlot as p, withCtx as m, createTextVNode as l, toDisplayString as u } from "vue";
+import E from "../../button/v4/ButtonV4.vue.js";
 import "../../button/v4/IconButtonV4.vue.js";
 import "../../button/v4/ButtonGroup.vue.js";
 import "../../button/v4/ToggleButtonGroupAB.vue.js";
-import u from "../../typography/v4/Typography.vue.js";
-import { capitalizeFirstLetter as C, snakeCaseToCamelCase as T } from "../../../utils/string.js";
-import S from "../../icon/v4/IconV4.vue.js";
+import y from "../../typography/v4/Typography.vue.js";
+import { capitalizeFirstLetter as S, snakeCaseToCamelCase as g } from "../../../utils/string.js";
+import x from "../../icon/v4/IconV4.vue.js";
 import "../../icon/v4/IconFlag.vue.js";
-const g = { class: "empty-state" }, x = { class: "title-wrapper" }, j = /* @__PURE__ */ v({
+import { useTestIdAttrs as z } from "../../../utils/testIds.js";
+import { EmptyStateTestIdModifiers as r } from "../../../testids/index.js";
+const A = { class: "title-wrapper" }, P = /* @__PURE__ */ T({
   __name: "EmptyStateV4",
   props: {
     title: { default: "No data to display" },
@@ -17,67 +19,68 @@ const g = { class: "empty-state" }, x = { class: "title-wrapper" }, j = /* @__PU
     buttonText: { default: void 0 },
     iconName: { default: null },
     iconType: { default: "regular" },
-    iconSize: { default: "48px" }
+    iconSize: { default: "48px" },
+    testId: { default: "" }
   },
   emits: ["click"],
   setup(t) {
-    const d = t, f = y(() => {
-      const o = C(T(d.variant));
-      return b(() => p(/* @__PURE__ */ Object.assign({ "./icons/IconError.vue": () => import("./icons/IconError.vue.js"), "./icons/IconFiles.vue": () => import("./icons/IconFiles.vue.js"), "./icons/IconNoAccess.vue": () => import("./icons/IconNoAccess.vue.js"), "./icons/IconNoData.vue": () => import("./icons/IconNoData.vue.js"), "./icons/IconNoResults.vue": () => import("./icons/IconNoResults.vue.js"), "./icons/IconSettings.vue": () => import("./icons/IconSettings.vue.js") }), `./icons/Icon${o}.vue`));
-    });
-    return (o, m) => (e(), k("div", g, [
-      t.variant && !t.iconName ? (e(), i(n(f), {
+    const d = t, v = N(() => {
+      const i = S(g(d.variant));
+      return b(() => I(/* @__PURE__ */ Object.assign({ "./icons/IconError.vue": () => import("./icons/IconError.vue.js"), "./icons/IconFiles.vue": () => import("./icons/IconFiles.vue.js"), "./icons/IconNoAccess.vue": () => import("./icons/IconNoAccess.vue.js"), "./icons/IconNoData.vue": () => import("./icons/IconNoData.vue.js"), "./icons/IconNoResults.vue": () => import("./icons/IconNoResults.vue.js"), "./icons/IconSettings.vue": () => import("./icons/IconSettings.vue.js") }), `./icons/Icon${i}.vue`));
+    }), c = z(d.testId, r);
+    return (i, f) => (o(), k("div", s({ class: "empty-state" }, e(c)[e(r).CONTAINER]), [
+      t.variant && !t.iconName ? (o(), n(e(v), {
         key: 0,
         class: "empty-variant-icon"
       })) : a("", !0),
-      t.iconName ? (e(), i(n(S), {
+      t.iconName ? (o(), n(e(x), {
         key: 1,
         class: "custom-empty-icon",
         name: t.iconName,
         size: t.iconSize,
         type: t.iconType
       }, null, 8, ["name", "size", "type"])) : a("", !0),
-      N("div", x, [
-        s(o.$slots, "content", {}, () => [
-          t.title ? (e(), i(n(u), {
+      C("div", A, [
+        p(i.$slots, "content", {}, () => [
+          t.title ? (o(), n(e(y), s({
             key: 0,
             variant: "h4",
             class: "title"
-          }, {
-            default: c(() => [
-              r(l(t.title), 1)
+          }, e(c)[e(r).TITLE]), {
+            default: m(() => [
+              l(u(t.title), 1)
             ]),
             _: 1
-          })) : a("", !0),
-          t.subtitle ? (e(), i(n(u), {
+          }, 16)) : a("", !0),
+          t.subtitle ? (o(), n(e(y), s({
             key: 1,
             variant: "body1",
             class: "subtitle"
-          }, {
-            default: c(() => [
-              r(l(t.subtitle), 1)
+          }, e(c)[e(r).SUBTITLE]), {
+            default: m(() => [
+              l(u(t.subtitle), 1)
             ]),
             _: 1
-          })) : a("", !0)
+          }, 16)) : a("", !0)
         ], !0)
       ]),
-      s(o.$slots, "button", {}, () => [
-        t.buttonText ? (e(), i(n(I), {
+      p(i.$slots, "button", {}, () => [
+        t.buttonText ? (o(), n(e(E), {
           key: 0,
           variant: "outlined",
           color: "default",
           class: "button",
-          onClick: m[0] || (m[0] = (z) => o.$emit("click"))
+          onClick: f[0] || (f[0] = (B) => i.$emit("click"))
         }, {
-          default: c(() => [
-            r(l(t.buttonText), 1)
+          default: m(() => [
+            l(u(t.buttonText), 1)
           ]),
           _: 1
         })) : a("", !0)
       ], !0)
-    ]));
+    ], 16));
   }
 });
 export {
-  j as default
+  P as default
 };

package/components/emptyState/v4/index.d.ts

@@ -5,6 +5,7 @@ declare const EmptyStateTypes: () => ({
         $data: {};
         $props: Partial<{
             title: string;
+            testId: string;
             variant: "error" | "settings" | "no-access" | "no-results" | "no-data" | "files";
             iconName: string;
             iconSize: string;
@@ -16,6 +17,10 @@ declare const EmptyStateTypes: () => ({
                 type: import("vue").PropType<string>;
                 default: string;
             };
+            testId: {
+                type: import("vue").PropType<string>;
+                default: string;
+            };
             variant: {
                 type: import("vue").PropType<"error" | "settings" | "no-access" | "no-results" | "no-data" | "files">;
                 default: string;
@@ -42,7 +47,7 @@ declare const EmptyStateTypes: () => ({
             };
         }>> & {
             onClick?: () => any;
-        } & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, "title" | "variant" | "iconName" | "iconSize" | "subtitle" | "iconType" | "buttonText">;
+        } & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, "title" | "testId" | "variant" | "iconName" | "iconSize" | "subtitle" | "iconType" | "buttonText">;
         $attrs: {
             [x: string]: unknown;
         };
@@ -61,6 +66,10 @@ declare const EmptyStateTypes: () => ({
                 type: import("vue").PropType<string>;
                 default: string;
             };
+            testId: {
+                type: import("vue").PropType<string>;
+                default: string;
+            };
             variant: {
                 type: import("vue").PropType<"error" | "settings" | "no-access" | "no-results" | "no-data" | "files">;
                 default: string;
@@ -91,6 +100,7 @@ declare const EmptyStateTypes: () => ({
             click: () => void;
         }, string, {
             title: string;
+            testId: string;
             variant: "error" | "settings" | "no-access" | "no-results" | "no-data" | "files";
             iconName: string;
             iconSize: string;
@@ -122,6 +132,10 @@ declare const EmptyStateTypes: () => ({
             type: import("vue").PropType<string>;
             default: string;
         };
+        testId: {
+            type: import("vue").PropType<string>;
+            default: string;
+        };
         variant: {
             type: import("vue").PropType<"error" | "settings" | "no-access" | "no-results" | "no-data" | "files">;
             default: string;
@@ -157,6 +171,10 @@ declare const EmptyStateTypes: () => ({
         type: import("vue").PropType<string>;
         default: string;
     };
+    testId: {
+        type: import("vue").PropType<string>;
+        default: string;
+    };
     variant: {
         type: import("vue").PropType<"error" | "settings" | "no-access" | "no-results" | "no-data" | "files">;
         default: string;
@@ -187,6 +205,7 @@ declare const EmptyStateTypes: () => ({
     click: () => void;
 }, string, {
     title: string;
+    testId: string;
     variant: "error" | "settings" | "no-access" | "no-results" | "no-data" | "files";
     iconName: string;
     iconSize: string;