@ironsource/shared-ui 2.1.12-test.80 → 2.1.12-test.82

package/components/chart/index.d.ts

@@ -23,12 +23,12 @@ declare const ChartTypes: () => ({
             yAxisFormat: import("./types").ValueFormat;
             valueSuffix: string;
             valuePrefix: string;
-            dataSets: import("./types").ChartDataSet[];
             trendTooltip: any;
             subheader: string;
             subheaderTooltip: any;
             trendValue: string | number;
             trendDirection: TrendDirection;
+            dataSets: import("./types").ChartDataSet[];
             tickCount: number;
             truncateTickLabels: boolean;
             keepSubheaderVisible: boolean;
@@ -118,11 +118,6 @@ declare const ChartTypes: () => ({
                 type: import("vue").PropType<string>;
                 default: string;
             };
-            dataSets: {
-                type: import("vue").PropType<import("./types").ChartDataSet[]>;
-                required: true;
-                default: () => any[];
-            };
             trendTooltip: {
                 type: import("vue").PropType<{
                     header?: string;
@@ -150,6 +145,11 @@ declare const ChartTypes: () => ({
                 type: import("vue").PropType<TrendDirection>;
                 default: TrendDirection;
             };
+            dataSets: {
+                type: import("vue").PropType<import("./types").ChartDataSet[]>;
+                required: true;
+                default: () => any[];
+            };
             tickCount: {
                 type: import("vue").PropType<number>;
                 default: number;
@@ -214,7 +214,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" | "dataSets" | "trendTooltip" | "subheader" | "subheaderTooltip" | "trendValue" | "trendDirection" | "tickCount" | "truncateTickLabels" | "keepSubheaderVisible" | "empty" | "noDataIcon" | "noDataTitle" | "noDataSubtitle" | "withAnimation" | "tooltipTotalType" | "tooltipTotalCalcFn" | "tooltipOrder" | "fullHeight" | "fullHeightBottomSpacing" | "withSettingsHeader" | "extraCharts">;
+        } & 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" | "dataSets" | "tickCount" | "truncateTickLabels" | "keepSubheaderVisible" | "empty" | "noDataIcon" | "noDataTitle" | "noDataSubtitle" | "withAnimation" | "tooltipTotalType" | "tooltipTotalCalcFn" | "tooltipOrder" | "fullHeight" | "fullHeightBottomSpacing" | "withSettingsHeader" | "extraCharts">;
         $attrs: {
             [x: string]: unknown;
         };
@@ -302,11 +302,6 @@ declare const ChartTypes: () => ({
                 type: import("vue").PropType<string>;
                 default: string;
             };
-            dataSets: {
-                type: import("vue").PropType<import("./types").ChartDataSet[]>;
-                required: true;
-                default: () => any[];
-            };
             trendTooltip: {
                 type: import("vue").PropType<{
                     header?: string;
@@ -334,6 +329,11 @@ declare const ChartTypes: () => ({
                 type: import("vue").PropType<TrendDirection>;
                 default: TrendDirection;
             };
+            dataSets: {
+                type: import("vue").PropType<import("./types").ChartDataSet[]>;
+                required: true;
+                default: () => any[];
+            };
             tickCount: {
                 type: import("vue").PropType<number>;
                 default: number;
@@ -421,12 +421,12 @@ declare const ChartTypes: () => ({
             yAxisFormat: import("./types").ValueFormat;
             valueSuffix: string;
             valuePrefix: string;
-            dataSets: import("./types").ChartDataSet[];
             trendTooltip: any;
             subheader: string;
             subheaderTooltip: any;
             trendValue: string | number;
             trendDirection: TrendDirection;
+            dataSets: import("./types").ChartDataSet[];
             tickCount: number;
             truncateTickLabels: boolean;
             keepSubheaderVisible: boolean;
@@ -536,11 +536,6 @@ declare const ChartTypes: () => ({
             type: import("vue").PropType<string>;
             default: string;
         };
-        dataSets: {
-            type: import("vue").PropType<import("./types").ChartDataSet[]>;
-            required: true;
-            default: () => any[];
-        };
         trendTooltip: {
             type: import("vue").PropType<{
                 header?: string;
@@ -568,6 +563,11 @@ declare const ChartTypes: () => ({
             type: import("vue").PropType<TrendDirection>;
             default: TrendDirection;
         };
+        dataSets: {
+            type: import("vue").PropType<import("./types").ChartDataSet[]>;
+            required: true;
+            default: () => any[];
+        };
         tickCount: {
             type: import("vue").PropType<number>;
             default: number;
@@ -710,11 +710,6 @@ declare const ChartTypes: () => ({
         type: import("vue").PropType<string>;
         default: string;
     };
-    dataSets: {
-        type: import("vue").PropType<import("./types").ChartDataSet[]>;
-        required: true;
-        default: () => any[];
-    };
     trendTooltip: {
         type: import("vue").PropType<{
             header?: string;
@@ -742,6 +737,11 @@ declare const ChartTypes: () => ({
         type: import("vue").PropType<TrendDirection>;
         default: TrendDirection;
     };
+    dataSets: {
+        type: import("vue").PropType<import("./types").ChartDataSet[]>;
+        required: true;
+        default: () => any[];
+    };
     tickCount: {
         type: import("vue").PropType<number>;
         default: number;
@@ -829,12 +829,12 @@ declare const ChartTypes: () => ({
     yAxisFormat: import("./types").ValueFormat;
     valueSuffix: string;
     valuePrefix: string;
-    dataSets: import("./types").ChartDataSet[];
     trendTooltip: any;
     subheader: string;
     subheaderTooltip: any;
     trendValue: string | number;
     trendDirection: TrendDirection;
+    dataSets: import("./types").ChartDataSet[];
     tickCount: number;
     truncateTickLabels: boolean;
     keepSubheaderVisible: boolean;

package/components/chart/utils/utils.d.ts

@@ -1,4 +1,3 @@
 import { PrepareTicksLabelArgs, ValueFormat } from '@/components/chart/types';
-export declare const calcStepSize: (min: number, max: number, tickCount: number) => number;
 export declare const formatValue: (value: number | string | Date, valueFormat: ValueFormat, formatLowDigits?: boolean) => string;
 export declare const prepareTickLabel: ({ label, format, availableSpace, truncate, }: PrepareTicksLabelArgs) => string | string[];

package/components/chart/utils/utils.js

@@ -1,27 +1,21 @@
-import { format as m } from "date-fns";
-import { TICK_LABEL_FONT as c } from "../consts.js";
-import { nFormatter as p } from "../../../utils/formatNumbers.js";
-import { truncateTextToFit as d } from "../../../utils/text.js";
-import { REGEX_LINEBREAK as i } from "../../../consts/regex.js";
-const g = (r, t, e) => {
-  if (e === 0)
-    return 0;
-  const n = Math.max(t - r, 1), f = n / e, o = n > 1 ? f * 0.4 : 0;
-  return (n + o) / e;
-}, E = (r, t, e = !1) => t === "day" ? m(new Date(r), "EEEE") : t === "number" ? p(r, e) : t === "date" ? m(new Date(r), "MMM dd") : t === "dateLong" ? m(new Date(r), "MMM dd, yyyy") : String(r), w = ({
+import { format as e } from "date-fns";
+import { TICK_LABEL_FONT as p } from "../consts.js";
+import { nFormatter as E } from "../../../utils/formatNumbers.js";
+import { truncateTextToFit as a } from "../../../utils/text.js";
+import { REGEX_LINEBREAK as m } from "../../../consts/regex.js";
+const c = (r, t, n = !1) => t === "day" ? e(new Date(r), "EEEE") : t === "number" ? E(r, n) : t === "date" ? e(new Date(r), "MMM dd") : t === "dateLong" ? e(new Date(r), "MMM dd, yyyy") : String(r), w = ({
   label: r,
   format: t,
-  availableSpace: e,
-  truncate: n = !1
+  availableSpace: n,
+  truncate: i = !1
 }) => {
-  const f = i.test(r), o = (a) => {
-    const s = E(a, t);
-    return n && e > 0 ? d(s, c, e) : s;
+  const s = m.test(r), o = (d) => {
+    const f = c(d, t);
+    return i && n > 0 ? a(f, p, n) : f;
   };
-  return f ? r.split(i).map(o) : o(r);
+  return s ? r.split(m).map(o) : o(r);
 };
 export {
-  g as calcStepSize,
-  E as formatValue,
+  c as formatValue,
   w as prepareTickLabel
 };

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

@@ -1,7 +1,7 @@
 import o from "./OptionV4.vue2.js";
-/* empty css               */import e from "../../../_virtual/_plugin-vue_export-helper.js";
-// import "../../../OptionV4.vue_vue_type_style_index_0_scoped_a8de6151_lang.css"; //*');
-const s = /* @__PURE__ */ e(o, [["__scopeId", "data-v-a8de6151"]]);
+/* empty css               */import _ from "../../../_virtual/_plugin-vue_export-helper.js";
+// import "../../../OptionV4.vue_vue_type_style_index_0_scoped_9560a062_lang.css"; //*');
+const s = /* @__PURE__ */ _(o, [["__scopeId", "data-v-9560a062"]]);
 export {
   s as default
 };

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

@@ -1,4 +1,4 @@
- import "../../../OptionV4.vue_vue_type_style_index_0_scoped_a8de6151_lang.css"; import { defineComponent as A, ref as w, watch as F, computed as L, openBlock as o, createBlock as f, unref as n, createSlots as N, withCtx as s, createElementVNode as c, normalizeClass as v, createCommentVNode as i, createElementBlock as l, renderSlot as u, createVNode as a, toDisplayString as r, createTextVNode as g, withModifiers as C, Fragment as j, renderList as R } from "vue";
+ import "../../../OptionV4.vue_vue_type_style_index_0_scoped_9560a062_lang.css"; import { defineComponent as A, ref as w, watch as F, computed as L, openBlock as o, createBlock as f, unref as n, createSlots as N, withCtx as d, createElementVNode as c, normalizeClass as v, createCommentVNode as i, createElementBlock as l, renderSlot as r, createVNode as a, toDisplayString as u, createTextVNode as g, withModifiers as C, Fragment as j, renderList as R } from "vue";
 import "../../typography/Heading.vue.js";
 import D from "../../typography/Text.vue.js";
 import q from "../../checkbox/v4/CheckboxV4.vue.js";
@@ -67,24 +67,24 @@ const U = { class: "multiline-tooltip" }, W = {
   },
   emits: ["toggleTreeCollapse"],
   setup(e, { emit: $ }) {
-    const d = e, { selected: K, id: B, onClick: z, api: x } = H(d), M = (t) => {
-      d.stopOptionClickEventPropagation && t.stopPropagation(), d.disabled ? I() : z(t);
+    const s = e, { selected: K, id: B, onClick: z, api: h } = H(s), M = (t) => {
+      s.stopOptionClickEventPropagation && t.stopPropagation(), s.disabled ? I() : z(t);
     }, p = w(null), b = w(!1), E = (t) => {
-      d.disabled && (t.stopPropagation(), I());
+      s.disabled && (t.stopPropagation(), I());
     };
-    F([() => d.treeChildShown, p], async () => {
+    F([() => s.treeChildShown, p], async () => {
       await Q(100), b.value = p.value && J(p.value);
     });
-    const P = (t) => t && typeof t == "object" && "optionTooltipText" in t ? (Array.isArray(t.optionTooltipText), t.optionTooltipText) : b.value ? t[d.nameKey] : "", h = L(() => P(d.option)), S = (t) => t && typeof t == "object" && "optionTooltipTestId" in t ? t.optionTooltipTestId : null, V = () => {
-      $("toggleTreeCollapse", d.option);
+    const P = (t) => t && typeof t == "object" && "optionTooltipText" in t ? (Array.isArray(t.optionTooltipText), t.optionTooltipText) : b.value ? t[s.nameKey] : "", x = L(() => P(s.option)), S = (t) => t && typeof t == "object" && "optionTooltipTestId" in t ? t.optionTooltipTestId : null, V = () => {
+      $("toggleTreeCollapse", s.option);
     };
     return (t, k) => (o(), f(n(O), {
-      text: n(h),
+      text: n(x),
       "test-id": S(e.option),
       placement: e.toolTipPlacement,
       class: "tooltip-option"
     }, N({
-      default: s(() => [
+      default: d(() => [
         c("div", {
           ref: "el",
           class: v(["item-container", {
@@ -111,7 +111,7 @@ const U = { class: "multiline-tooltip" }, W = {
               onClick: k[0] || (k[0] = (y) => M(y))
             }, null, 8, ["id", "is-checked", "is-indeterminate"])) : i("", !0),
             !e.option?.conditionalOptions && (t.$slots.image || e.imageKey) ? (o(), l("div", W, [
-              u(t.$slots, "image", {}, () => [
+              r(t.$slots, "image", {}, () => [
                 e.imageKey ? (o(), l("img", {
                   key: 0,
                   src: e.option[e.imageKey]
@@ -119,7 +119,7 @@ const U = { class: "multiline-tooltip" }, W = {
               ], !0)
             ])) : i("", !0),
             !e.option?.conditionalOptions && (t.$slots.flag || e.optionFlagKey) ? (o(), l("div", Y, [
-              u(t.$slots, "flag", {}, () => [
+              r(t.$slots, "flag", {}, () => [
                 e.optionFlagKey ? (o(), f(n(G), {
                   key: 0,
                   "country-code": e.option[e.optionFlagKey]
@@ -127,12 +127,13 @@ const U = { class: "multiline-tooltip" }, W = {
               ], !0)
             ])) : i("", !0),
             !e.option?.conditionalOptions && (t.$slots["icon-start"] || e.iconKey) ? (o(), l("div", Z, [
-              u(t.$slots, "icon-start", {}, () => [
+              r(t.$slots, "icon-start", {}, () => [
                 a(n(m), {
                   type: e.iconType,
                   name: e.option[e.iconKey],
+                  color: e.option.disabled ? "var(--text-disabled)" : null,
                   size: e.iconType === "regular" ? "20px" : "16px"
-                }, null, 8, ["type", "name", "size"])
+                }, null, 8, ["type", "name", "color", "size"])
               ], !0)
             ])) : i("", !0),
             c("div", {
@@ -144,8 +145,8 @@ const U = { class: "multiline-tooltip" }, W = {
                 class: "option-text",
                 variant: "body2"
               }, {
-                default: s(() => [
-                  u(t.$slots, "default", {}, () => [
+                default: d(() => [
+                  r(t.$slots, "default", {}, () => [
                     c("div", {
                       class: v(`option-content-${e.optionTwoLinesVariant} option-content`)
                     }, [
@@ -154,8 +155,8 @@ const U = { class: "multiline-tooltip" }, W = {
                           variant: "body2",
                           class: "conditional-option-label"
                         }, {
-                          default: s(() => [
-                            g(r(e.option.conditionalName) + ": ", 1)
+                          default: d(() => [
+                            g(u(e.option.conditionalName) + ": ", 1)
                           ]),
                           _: 1
                         }),
@@ -163,12 +164,12 @@ const U = { class: "multiline-tooltip" }, W = {
                           variant: "h5",
                           class: "conditional-option-value"
                         }, {
-                          default: s(() => [
-                            g('"' + r(e.option[e.nameKey]) + '"', 1)
+                          default: d(() => [
+                            g('"' + u(e.option[e.nameKey]) + '"', 1)
                           ]),
                           _: 1
                         })
-                      ])) : (o(), l("div", _, r(e.option[e.nameKey]), 1)),
+                      ])) : (o(), l("div", _, u(e.option[e.nameKey]), 1)),
                       e.endTextIconKey && e.option[e.endTextIconKey] ? (o(), l("span", te, [
                         a(n(m), {
                           type: "regular",
@@ -178,8 +179,8 @@ const U = { class: "multiline-tooltip" }, W = {
                       ])) : i("", !0),
                       e.optionTwoLinesKey ? (o(), l("div", ne, [
                         a(n(T), { variant: "caption" }, {
-                          default: s(() => [
-                            g(r(e.option[e.optionTwoLinesKey]), 1)
+                          default: d(() => [
+                            g(u(e.option[e.optionTwoLinesKey]), 1)
                           ]),
                           _: 1
                         })
@@ -194,14 +195,14 @@ const U = { class: "multiline-tooltip" }, W = {
                 class: "subtitle",
                 size: "xs"
               }, {
-                default: s(() => [
-                  g(r(e.subtitle), 1)
+                default: d(() => [
+                  g(u(e.subtitle), 1)
                 ]),
                 _: 1
               })) : i("", !0)
             ], 512),
             t.$slots["icon-end"] || e.endIconKey && e.option[e.endIconKey] ? (o(), l("div", oe, [
-              u(t.$slots, "icon-end", {}, () => [
+              r(t.$slots, "icon-end", {}, () => [
                 a(n(m), {
                   type: e.endIconType || "regular",
                   name: e.option[e.endIconKey],
@@ -214,7 +215,7 @@ const U = { class: "multiline-tooltip" }, W = {
                 text: e.option[e.warningKey],
                 placement: "top"
               }, {
-                default: s(() => [
+                default: d(() => [
                   a(n(m), {
                     class: "option-warning__icon",
                     name: "warning-circle",
@@ -224,7 +225,7 @@ const U = { class: "multiline-tooltip" }, W = {
                 _: 1
               }, 8, ["text"])
             ])) : i("", !0),
-            t.$slots["option-end"] ? u(t.$slots, "option-end", {
+            t.$slots["option-end"] ? r(t.$slots, "option-end", {
               key: 6,
               option: e.option
             }, void 0, !0) : i("", !0),
@@ -240,10 +241,10 @@ const U = { class: "multiline-tooltip" }, W = {
               }, null, 8, ["class"])
             ], 8, le)) : i("", !0)
           ], 2),
-          n(x).clearable && n(K) ? (o(), l("div", ae, [
+          n(h).clearable && n(K) ? (o(), l("div", ae, [
             c("button", {
               class: "clear-button",
-              onClick: k[1] || (k[1] = C((y) => n(x).clearSelection(), ["prevent", "stop"]))
+              onClick: k[1] || (k[1] = C((y) => n(h).clearSelection(), ["prevent", "stop"]))
             }, [
               a(n(m), {
                 name: "close",
@@ -256,16 +257,16 @@ const U = { class: "multiline-tooltip" }, W = {
       ]),
       _: 2
     }, [
-      Array.isArray(n(h)) ? {
+      Array.isArray(n(x)) ? {
         name: "tooltip",
-        fn: s(() => [
+        fn: d(() => [
           c("div", U, [
-            (o(!0), l(j, null, R(n(h), (y) => (o(), f(n(T), {
+            (o(!0), l(j, null, R(n(x), (y) => (o(), f(n(T), {
               key: y,
               variant: "body2"
             }, {
-              default: s(() => [
-                g(r(y), 1)
+              default: d(() => [
+                g(u(y), 1)
               ]),
               _: 2
             }, 1024))), 128))

package/components/switch/v4/SwitchV4.vue.d.ts

@@ -1,13 +1,18 @@
+import { TooltipPositions } from '@/components/tooltip/common/Tooltip.types';
 declare const _default: import("vue").DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
     options: unknown[];
     modelValue: unknown;
     variant: 'primary' | 'default';
     testId?: string;
     iconKey?: string;
+    tooltipTextKey?: string;
+    tooltipPlacement?: TooltipPositions;
 }>, {
     testId: string;
     variant: string;
     iconKey: string;
+    tooltipTextKey: string;
+    tooltipPlacement: string;
 }>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     "update:modelValue": (...args: any[]) => void;
 }, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
@@ -16,16 +21,22 @@ declare const _default: import("vue").DefineComponent<__VLS_WithDefaults<__VLS_T
     variant: 'primary' | 'default';
     testId?: string;
     iconKey?: string;
+    tooltipTextKey?: string;
+    tooltipPlacement?: TooltipPositions;
 }>, {
     testId: string;
     variant: string;
     iconKey: string;
+    tooltipTextKey: string;
+    tooltipPlacement: string;
 }>>> & {
     "onUpdate:modelValue"?: (...args: any[]) => any;
 }, {
     testId: string;
     variant: 'primary' | 'default';
+    tooltipPlacement: TooltipPositions;
     iconKey: string;
+    tooltipTextKey: string;
 }>;
 export default _default;
 type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;

package/components/switch/v4/SwitchV4.vue.js

@@ -1,7 +1,7 @@
 import o from "./SwitchV4.vue2.js";
 /* empty css               */import _ from "../../../_virtual/_plugin-vue_export-helper.js";
-// import "../../../SwitchV4.vue_vue_type_style_index_0_scoped_fa120cf6_lang.css"; //*');
-const s = /* @__PURE__ */ _(o, [["__scopeId", "data-v-fa120cf6"]]);
+// import "../../../SwitchV4.vue_vue_type_style_index_0_scoped_cd6621a7_lang.css"; //*');
+const s = /* @__PURE__ */ _(o, [["__scopeId", "data-v-cd6621a7"]]);
 export {
   s as default
 };

package/components/switch/v4/SwitchV4.vue2.js

@@ -1,46 +1,59 @@
- import "../../../SwitchV4.vue_vue_type_style_index_0_scoped_fa120cf6_lang.css"; import { defineComponent as k, ref as h, onMounted as I, openBlock as l, createElementBlock as r, normalizeClass as u, unref as i, Fragment as V, renderList as $, createBlock as B } from "vue";
-import { useVModel as C } from "@vueuse/core";
+ import "../../../SwitchV4.vue_vue_type_style_index_0_scoped_cd6621a7_lang.css"; import { defineComponent as T, ref as h, onMounted as k, openBlock as c, createElementBlock as r, normalizeClass as m, unref as a, Fragment as x, renderList as V, createBlock as w, withCtx as y, createVNode as C } from "vue";
+import { useVModel as I } from "@vueuse/core";
+import { SwitchTestIdModifiers as u } from "../../../testids/index.js";
 import "../../button/v4/ButtonV4.vue.js";
-import w from "../../button/v4/IconButtonV4.vue.js";
+import $ from "../../button/v4/IconButtonV4.vue.js";
 import "../../button/v4/ButtonGroup.vue.js";
 import "../../button/v4/ToggleButtonGroupAB.vue.js";
-import { SwitchTestIdModifiers as m } from "../../../testids/index.js";
-const y = ["data-testid"], g = /* @__PURE__ */ k({
+import B from "../../tooltip/v4/TooltipV4.vue.js";
+const K = ["data-testid"], A = /* @__PURE__ */ T({
   __name: "SwitchV4",
   props: {
     options: null,
     modelValue: null,
     variant: { default: "default" },
     testId: { default: "" },
-    iconKey: { default: "icon" }
+    iconKey: { default: "icon" },
+    tooltipTextKey: { default: "tooltipText" },
+    tooltipPlacement: { default: "top" }
   },
   emits: ["update:modelValue"],
   setup(t, { emit: f }) {
-    const a = t, n = h(), v = C(a, "modelValue", f), c = (e) => n.value === e;
-    I(() => {
-      n.value = a.options.findIndex(
-        (e) => e === a.modelValue
+    const i = t, n = h(), p = I(i, "modelValue", f), d = (e) => n.value === e;
+    k(() => {
+      n.value = i.options.findIndex(
+        (e) => e === i.modelValue
       );
     });
-    const p = (e, s) => {
-      n.value = s, v.value = e;
+    const v = (e, s) => {
+      n.value = s, p.value = e;
     };
-    return (e, s) => (l(), r("div", {
-      class: u(["switch", [`switch--variant-${t.variant}`]]),
-      "data-testid": `${t.testId}-${i(m).WRAPPER}`
+    return (e, s) => (c(), r("div", {
+      class: m(["switch", [`switch--variant-${t.variant}`]]),
+      "data-testid": `${t.testId}-${a(u).WRAPPER}`
     }, [
-      (l(!0), r(V, null, $(t.options, (d, o) => (l(), B(i(w), {
-        key: o,
-        class: u(["option", { "option--selected": c(o) }]),
-        "icon-name": d[t.iconKey],
-        size: "small",
-        color: c(o) ? t.variant : "default",
-        "data-testid": `${t.testId}-${i(m).BUTTON}`,
-        onClick: (M) => p(d, o)
-      }, null, 8, ["class", "icon-name", "color", "data-testid", "onClick"]))), 128))
-    ], 10, y));
+      (c(!0), r(x, null, V(t.options, (o, l) => (c(), w(a(B), {
+        key: l,
+        text: o[t.tooltipTextKey],
+        disabled: !o[t.tooltipTextKey],
+        placement: t.tooltipPlacement,
+        class: "option-wrapper"
+      }, {
+        default: y(() => [
+          C(a($), {
+            class: m(["option", { "option--selected": d(l) }]),
+            "icon-name": o[t.iconKey],
+            size: "small",
+            color: d(l) ? t.variant : "default",
+            "data-testid": `${t.testId}-${a(u).BUTTON}`,
+            onClick: (P) => v(o, l)
+          }, null, 8, ["class", "icon-name", "color", "data-testid", "onClick"])
+        ]),
+        _: 2
+      }, 1032, ["text", "disabled", "placement"]))), 128))
+    ], 10, K));
   }
 });
 export {
-  g as default
+  A as default
 };

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

@@ -8,6 +8,10 @@ declare const SwitchTypes: () => import("vue").DefineComponent<{
         required: true;
         default: string;
     };
+    tooltipPlacement: {
+        type: import("vue").PropType<"top" | "auto" | "auto-start" | "auto-end" | "top-start" | "top-end" | "right" | "right-start" | "right-end" | "bottom" | "bottom-start" | "bottom-end" | "left" | "left-start" | "left-end">;
+        default: string;
+    };
     modelValue: {
         type: import("vue").PropType<unknown>;
         required: true;
@@ -20,6 +24,10 @@ declare const SwitchTypes: () => import("vue").DefineComponent<{
         type: import("vue").PropType<string>;
         default: string;
     };
+    tooltipTextKey: {
+        type: import("vue").PropType<string>;
+        default: string;
+    };
 }, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     "update:modelValue": (...args: any[]) => void;
 }, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
@@ -32,6 +40,10 @@ declare const SwitchTypes: () => import("vue").DefineComponent<{
         required: true;
         default: string;
     };
+    tooltipPlacement: {
+        type: import("vue").PropType<"top" | "auto" | "auto-start" | "auto-end" | "top-start" | "top-end" | "right" | "right-start" | "right-end" | "bottom" | "bottom-start" | "bottom-end" | "left" | "left-start" | "left-end">;
+        default: string;
+    };
     modelValue: {
         type: import("vue").PropType<unknown>;
         required: true;
@@ -44,12 +56,18 @@ declare const SwitchTypes: () => import("vue").DefineComponent<{
         type: import("vue").PropType<string>;
         default: string;
     };
+    tooltipTextKey: {
+        type: import("vue").PropType<string>;
+        default: string;
+    };
 }>> & {
     "onUpdate:modelValue"?: (...args: any[]) => any;
 }, {
     testId: string;
     variant: "default" | "primary";
+    tooltipPlacement: "top" | "auto" | "auto-start" | "auto-end" | "top-start" | "top-end" | "right" | "right-start" | "right-end" | "bottom" | "bottom-start" | "bottom-end" | "left" | "left-start" | "left-end";
     iconKey: string;
+    tooltipTextKey: string;
 }>[];
 export { default as Switch } from './SwitchV4.vue';
 export { SwitchTypes };

package/components/table/v4/DataGrid.vue.js

@@ -1,7 +1,7 @@
 import o from "./DataGrid.vue2.js";
-/* empty css               */import e from "../../../_virtual/_plugin-vue_export-helper.js";
-// import "../../../DataGrid.vue_vue_type_style_index_0_scoped_5b72e35a_lang.css"; //*');
-const s = /* @__PURE__ */ e(o, [["__scopeId", "data-v-5b72e35a"]]);
+/* empty css               */import _ from "../../../_virtual/_plugin-vue_export-helper.js";
+// import "../../../DataGrid.vue_vue_type_style_index_0_scoped_0963bb3c_lang.css"; //*');
+const a = /* @__PURE__ */ _(o, [["__scopeId", "data-v-0963bb3c"]]);
 export {
-  s as default
+  a as default
 };

package/components/table/v4/DataGrid.vue2.js

@@ -1,4 +1,4 @@
- import "../../../DataGrid.vue_vue_type_style_index_0_scoped_5b72e35a_lang.css"; import { defineComponent as he, useCssVars as ye, unref as t, useSlots as fe, computed as g, openBlock as i, createElementBlock as o, createElementVNode as f, normalizeStyle as v, normalizeClass as u, renderSlot as c, createVNode as h, withCtx as $, createTextVNode as R, toDisplayString as P, createCommentVNode as n, isRef as Se, Fragment as T, renderList as x, mergeProps as L, createBlock as D } from "vue";
+ import "../../../DataGrid.vue_vue_type_style_index_0_scoped_0963bb3c_lang.css"; import { defineComponent as he, useCssVars as ye, unref as t, useSlots as fe, computed as g, openBlock as i, createElementBlock as o, createElementVNode as f, normalizeStyle as v, normalizeClass as u, renderSlot as c, createVNode as h, withCtx as $, createTextVNode as R, toDisplayString as P, createCommentVNode as n, isRef as Se, Fragment as T, renderList as x, mergeProps as L, createBlock as D } from "vue";
 import p from "../../typography/v4/Typography.vue.js";
 import ke from "../../skeleton/v4/SkeletonV4.vue.js";
 import ge from "../../emptyState/v4/EmptyStateV4.vue.js";
@@ -67,9 +67,9 @@ const we = ["data-testid"], Ee = ["data-testid"], He = ["data-testid"], Be = ["d
   setup(l, { expose: m, emit: k }) {
     const a = l;
     ye((s) => ({
-      "6eb1b581": l.zIndexBase,
-      "4420f996": t(ee),
-      "3030c624": t(K)
+      "63c838b5": l.zIndexBase,
+      "8cc8612e": t(ee),
+      ec9ca7bc: t(K)
     }));
     const b = fe(), Q = (s) => a.rowCustomClassKey && a.rows[s] ? a.rows[s][a.rowCustomClassKey] : "", {
       list: w,