@ironsource/shared-ui 2.1.12-test.49 → 2.1.12-test.52

package/Chart.vue_vue_type_style_index_0_scoped_e8f25a03_lang.css

@@ -0,0 +1 @@
+.chart-container[data-v-e8f25a03]{border:1px solid var(--common-divider);background:var(--background-paper);display:flex;border-radius:0 0 6px 6px;width:100%}.chart-planes[data-v-e8f25a03]{width:100%;height:100%;overflow-y:auto}.chart-planes.with-legend[data-v-e8f25a03]{width:calc(100% - 221px)}.chart-planes .extra-chart-plane[data-v-e8f25a03]{border-top:1px solid var(--common-divider)}.chart-sidebar[data-v-e8f25a03]{border-left:1px solid var(--common-divider)}

package/TooltipHeader.vue_vue_type_style_index_0_scoped_5160f12d_lang.css

@@ -0,0 +1 @@
+.tooltip-title-wrapper[data-v-5160f12d]{display:flex;flex-direction:column;color:var(--text-primary);margin-bottom:var(--spacing-100)}.tooltip-title-wrapper .main-title[data-v-5160f12d]{display:flex;align-items:center;gap:.25rem}.tooltip-title-wrapper .title-text[data-v-5160f12d]{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.tooltip-title-wrapper .title-image[data-v-5160f12d]{width:20px;height:20px;border-radius:4px}.tooltip-title-wrapper .tooltip-sub-title[data-v-5160f12d]{color:var(--text-secondary)}.tooltip-title-wrapper .platform-icon[data-v-5160f12d]{color:var(--action-active)}

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

@@ -1,4 +1,4 @@
-import { ChartDataSet, ChartParsingConfig, ChartType, ColorVariant, DateInterval, TooltipOrder, TrendDirection, ValueFormat } from './types';
+import { ChartDataSet, ChartParsingConfig, ChartType, DateInterval, TooltipOrder, TrendDirection, ValueFormat } from './types';
 import { TotalType } from '@/utils/totals';
 declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
     dataSets: ChartDataSet[];
@@ -48,7 +48,6 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     fullHeightBottomSpacing?: number;
     withSettingsHeader?: boolean;
     extraCharts?: Record<string, unknown>[];
-    colorVariant?: ColorVariant;
 }>, {
     chartType: ChartType;
     dataSets: () => any[];
@@ -90,7 +89,6 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     fullHeightBottomSpacing: number;
     withSettingsHeader: boolean;
     extraCharts: () => any[];
-    colorVariant: string;
 }>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     "update:chartType": (chartType: ChartType) => void;
     "update:visibleIds": (visibleIds: unknown[]) => void;
@@ -143,7 +141,6 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     fullHeightBottomSpacing?: number;
     withSettingsHeader?: boolean;
     extraCharts?: Record<string, unknown>[];
-    colorVariant?: ColorVariant;
 }>, {
     chartType: ChartType;
     dataSets: () => any[];
@@ -185,7 +182,6 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     fullHeightBottomSpacing: number;
     withSettingsHeader: boolean;
     extraCharts: () => any[];
-    colorVariant: string;
 }>>> & {
     "onUpdate:visibleIds"?: (visibleIds: unknown[]) => any;
     "onUpdate:sortSelected"?: (sortOption: unknown) => any;
@@ -231,7 +227,6 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     fullHeightBottomSpacing: number;
     withSettingsHeader: boolean;
     extraCharts: Record<string, unknown>[];
-    colorVariant: ColorVariant;
 }>, {
     "before-chart-type"?(_: {}): any;
     metric?(_: {}): any;

package/components/chart/Chart.vue.js

@@ -1,7 +1,7 @@
 import o from "./Chart.vue2.js";
-/* empty css            */import _ from "../../_virtual/_plugin-vue_export-helper.js";
-// import "../../Chart.vue_vue_type_style_index_0_scoped_fa533a3d_lang.css"; //*');
-const s = /* @__PURE__ */ _(o, [["__scopeId", "data-v-fa533a3d"]]);
+/* empty css            */import e from "../../_virtual/_plugin-vue_export-helper.js";
+// import "../../Chart.vue_vue_type_style_index_0_scoped_e8f25a03_lang.css"; //*');
+const a = /* @__PURE__ */ e(o, [["__scopeId", "data-v-e8f25a03"]]);
 export {
-  s as default
+  a as default
 };

package/components/chart/Chart.vue2.js

@@ -1,8 +1,8 @@
- import "../../Chart.vue_vue_type_style_index_0_scoped_fa533a3d_lang.css"; import { defineComponent as U, ref as O, computed as n, openBlock as s, createElementBlock as m, Fragment as C, createBlock as I, unref as i, isRef as b, withCtx as d, renderSlot as u, createCommentVNode as D, createElementVNode as k, mergeProps as g, normalizeClass as E, createVNode as L, createSlots as N, renderList as M } from "vue";
-import { useVModel as V } from "@vueuse/core";
+ import "../../Chart.vue_vue_type_style_index_0_scoped_e8f25a03_lang.css"; import { defineComponent as U, ref as O, computed as n, openBlock as s, createElementBlock as m, Fragment as C, createBlock as I, unref as i, isRef as b, withCtx as d, renderSlot as u, createCommentVNode as D, createElementVNode as k, mergeProps as g, normalizeClass as E, createVNode as L, createSlots as N, renderList as M } from "vue";
+import { useVModel as A } from "@vueuse/core";
 import $ from "./ChartLegend.vue.js";
 import K from "./SettingsHeader.vue.js";
-import A from "./ChartPlane.vue.js";
+import B from "./ChartPlane.vue.js";
 import { useColorsMap as z } from "./composables/useColorsMap.js";
 import { DEFAULT_TICK_COUNT as R, DEFAULT_MIN_VISIBLE as X, DEFAULT_MAX_VISIBLE as Y } from "./consts.js";
 import { ChartType as j, DateInterval as q, TooltipOrder as G, TrendDirection as J } from "./types.js";
@@ -53,12 +53,11 @@ const _ = {
     fullHeight: { type: Boolean, default: !1 },
     fullHeightBottomSpacing: { default: 50 },
     withSettingsHeader: { type: Boolean, default: !0 },
-    extraCharts: { default: () => [] },
-    colorVariant: { default: "default" }
+    extraCharts: { default: () => [] }
   },
   emits: ["update:chartType", "update:visibleIds", "update:sortSelected"],
   setup(a, { emit: p }) {
-    const e = a, r = V(e, "chartType", p), c = V(e, "sortSelected", p), f = O(null), y = n(() => ({
+    const e = a, r = A(e, "chartType", p), c = A(e, "sortSelected", p), h = O(null), y = n(() => ({
       dataSets: e.dataSets,
       visibleIds: e.visibleIds,
       parsing: e.parsing,
@@ -85,22 +84,21 @@ const _ = {
       totalsChart: e.totalsChart,
       subheaderTooltip: e.subheaderTooltip,
       keepSubheaderVisible: e.keepSubheaderVisible,
-      colorsMap: h.value,
+      colorsMap: f.value,
       tooltipTotalType: e.tooltipTotalType,
       tooltipTotalCalcFn: e.tooltipTotalCalcFn,
       tooltipOrder: e.tooltipOrder,
-      highlightedId: f.value,
+      highlightedId: h.value,
       valueSuffix: e.valueSuffix,
       valuePrefix: e.valuePrefix
-    })), B = n(() => e.dataSets), T = n(() => e.visibleIds), v = n(() => e.extraCharts.length), x = n(() => 1 + v.value), F = (t) => t === v.value - 1, { colorsMap: h } = z({
-      dataSets: B,
-      visibleIds: T,
-      variant: e.colorVariant
+    })), V = n(() => e.dataSets), T = n(() => e.visibleIds), v = n(() => e.extraCharts.length), x = n(() => 1 + v.value), F = (t) => t === v.value - 1, { colorsMap: f } = z({
+      dataSets: V,
+      visibleIds: T
     }), w = n(() => e.dataSets.map((t) => ({
       id: t.id,
       label: t.label,
       caption: t.caption || null,
-      color: h.value[t.id] || null,
+      color: f.value[t.id] || null,
       icon: t.icon || null,
       iconType: t.iconType || "branded"
     }))), { containerProps: H, eachPlaneHeight: P } = Q({
@@ -130,7 +128,7 @@ const _ = {
         k("section", {
           class: E(["chart-planes", [{ "with-legend": !a.hideLegend }]])
         }, [
-          L(A, g({
+          L(B, g({
             "chart-type": i(r),
             "onUpdate:chart-type": o[1] || (o[1] = (l) => b(r) ? r.value = l : null)
           }, i(y)), N({ _: 2 }, [
@@ -142,12 +140,12 @@ const _ = {
               key: "0"
             } : void 0
           ]), 1040, ["chart-type"]),
-          (s(!0), m(C, null, M(a.extraCharts, (l, S) => (s(), I(A, g({
+          (s(!0), m(C, null, M(a.extraCharts, (l, S) => (s(), I(B, g({
             key: S,
             class: "extra-chart-plane"
           }, { ...i(y), ...l }, {
             "chart-type": i(r),
-            "colors-map": i(h),
+            "colors-map": i(f),
             "type-switcher": !1,
             "tooltip-respects-top-edge": !F(S)
           }), null, 16, ["chart-type", "colors-map", "tooltip-respects-top-edge"]))), 128))
@@ -156,8 +154,8 @@ const _ = {
           L($, {
             "sort-selected": i(c),
             "onUpdate:sort-selected": o[2] || (o[2] = (l) => b(c) ? c.value = l : null),
-            "highlighted-id": f.value,
-            "onUpdate:highlighted-id": o[3] || (o[3] = (l) => f.value = l),
+            "highlighted-id": h.value,
+            "onUpdate:highlighted-id": o[3] || (o[3] = (l) => h.value = l),
             items: i(w),
             "visible-ids": i(T),
             "max-limit-tooltip-text": a.maxLimitTooltipText,

package/components/chart/ChartStoryArgs.d.ts

@@ -176,9 +176,4 @@ export declare const chartStoryArgs: {
         };
         options: TooltipOrder[];
     };
-    colorVariant: {
-        description: string;
-        control: string;
-        options: string[];
-    };
 };

package/components/chart/TooltipHeader.vue.js

@@ -1,7 +1,7 @@
 import o from "./TooltipHeader.vue2.js";
 /* empty css                    */import e from "../../_virtual/_plugin-vue_export-helper.js";
-// import "../../TooltipHeader.vue_vue_type_style_index_0_scoped_3b15c693_lang.css"; //*');
-const s = /* @__PURE__ */ e(o, [["__scopeId", "data-v-3b15c693"]]);
+// import "../../TooltipHeader.vue_vue_type_style_index_0_scoped_5160f12d_lang.css"; //*');
+const s = /* @__PURE__ */ e(o, [["__scopeId", "data-v-5160f12d"]]);
 export {
   s as default
 };

package/components/chart/TooltipHeader.vue2.js

@@ -1,12 +1,13 @@
- import "../../TooltipHeader.vue_vue_type_style_index_0_scoped_3b15c693_lang.css"; import { defineComponent as v, computed as m, openBlock as n, createElementBlock as f, createElementVNode as A, unref as t, createCommentVNode as s, createBlock as u, createVNode as D, withCtx as d, createTextVNode as x, toDisplayString as p } from "vue";
+ import "../../TooltipHeader.vue_vue_type_style_index_0_scoped_5160f12d_lang.css"; import { defineComponent as v, computed as u, openBlock as i, createElementBlock as f, createElementVNode as A, unref as t, createCommentVNode as s, createBlock as m, createVNode as D, withCtx as d, createTextVNode as x, toDisplayString as p } from "vue";
+import { getUTCDate as T } from "../../utils/date.js";
 import { formatValue as r } from "./utils/utils.js";
 import y from "../typography/v4/Typography.vue.js";
 import { DateInterval as c } from "./types.js";
-import T from "../icon/v4/IconV4.vue.js";
-import k from "../icon/v4/IconFlag.vue.js";
-import { startOfWeek as C, endOfWeek as F, startOfMonth as I, endOfMonth as O } from "date-fns";
-import { LONG_DATE_FORMAT as i } from "./consts.js";
-const E = { class: "tooltip-title-wrapper" }, N = { class: "main-title" }, L = ["src"], P = /* @__PURE__ */ v({
+import k from "../icon/v4/IconV4.vue.js";
+import C from "../icon/v4/IconFlag.vue.js";
+import { startOfWeek as F, endOfWeek as I, startOfMonth as O, endOfMonth as E } from "date-fns";
+import { LONG_DATE_FORMAT as n } from "./consts.js";
+const N = { class: "tooltip-title-wrapper" }, L = { class: "main-title" }, M = ["src"], S = /* @__PURE__ */ v({
   __name: "TooltipHeader",
   props: {
     title: { default: "" },
@@ -16,25 +17,25 @@ const E = { class: "tooltip-title-wrapper" }, N = { class: "main-title" }, L = [
     totalsChart: { type: Boolean, default: !1 }
   },
   setup(a) {
-    const e = a, o = m(() => e.dataPoints.length ? e.dataPoints[0].dataset : null), h = m(() => e.totalsChart ? o.value?.label || e.title : e.xAxisFormat === "date" ? g(new Date(e.title)) : r(e.title, e.xAxisFormat)), g = (l) => e.xAxisDateInterval === c.WEEKLY ? `
-      ${r(C(l), i)} -
-      ${r(F(l), i)}
+    const e = a, o = u(() => e.dataPoints.length ? e.dataPoints[0].dataset : null), h = u(() => e.totalsChart ? o.value?.label || e.title : e.xAxisFormat === "date" ? g(T(e.title)) : r(e.title, e.xAxisFormat)), g = (l) => e.xAxisDateInterval === c.WEEKLY ? `
+      ${r(F(l), n)} -
+      ${r(I(l), n)}
     ` : e.xAxisDateInterval === c.MONTHLY ? `
-      ${r(I(l), i)} -
-      ${r(O(l), i)}
-    ` : r(l, i);
-    return (l, M) => (n(), f("div", E, [
-      A("div", N, [
-        a.totalsChart && t(o)?.image ? (n(), f("img", {
+      ${r(O(l), n)} -
+      ${r(E(l), n)}
+    ` : r(l, n);
+    return (l, V) => (i(), f("div", N, [
+      A("div", L, [
+        a.totalsChart && t(o)?.image ? (i(), f("img", {
           key: 0,
           class: "title-image",
           src: t(o)?.image
-        }, null, 8, L)) : s("", !0),
-        a.totalsChart && t(o)?.countryFlag ? (n(), u(t(k), {
+        }, null, 8, M)) : s("", !0),
+        a.totalsChart && t(o)?.countryFlag ? (i(), m(t(C), {
           key: 1,
           "country-code": t(o).countryFlag
         }, null, 8, ["country-code"])) : s("", !0),
-        a.totalsChart && t(o)?.icon ? (n(), u(t(T), {
+        a.totalsChart && t(o)?.icon ? (i(), m(t(k), {
           key: 2,
           class: "platform-icon",
           type: t(o)?.iconType,
@@ -51,7 +52,7 @@ const E = { class: "tooltip-title-wrapper" }, N = { class: "main-title" }, L = [
           _: 1
         })
       ]),
-      a.xAxisFormat === "date" && a.xAxisDateInterval !== t(c).WEEKLY && a.xAxisDateInterval !== t(c).MONTHLY ? (n(), u(t(y), {
+      a.xAxisFormat === "date" && a.xAxisDateInterval !== t(c).WEEKLY && a.xAxisDateInterval !== t(c).MONTHLY ? (i(), m(t(y), {
         key: 0,
         class: "tooltip-sub-title",
         variant: "caption"
@@ -65,5 +66,5 @@ const E = { class: "tooltip-title-wrapper" }, N = { class: "main-title" }, L = [
   }
 });
 export {
-  P as default
+  S as default
 };

package/components/chart/colorPalette.d.ts

@@ -1,5 +1,4 @@
 import { HexColor } from '@/components/chart/types';
 export declare const DEFAULT_CHART_COLOR: HexColor;
-export declare const DEFAULT_COLOR_PALETTE: HexColor[];
-export declare const MEDIATION_COLOR_PALETTE: HexColor[];
+export declare const COLOR_PALETTE: HexColor[];
 export declare const RESERVED_COLORS_MAP: Record<string, HexColor>;

package/components/chart/colorPalette.js

@@ -1,5 +1,5 @@
-import { NETWORK_UNITY_ADS as T, BIDDING_PREFIX as F, NETWORK_AD_MOB as _, NETWORK_IRON_SOURCE as E, NETWORK_MINTEGRAL as D, NETWORK_APPLOVIN as C, NETWORK_FACEBOOK_META as B, NETWORK_LIFTOFF as A, NETWORK_PANGLE as O, NETWORK_INMOBI as $, NETWORK_DT_EXCHANGE as R } from "./consts.js";
-const I = "#c9c9c9", L = [
+import { NETWORK_UNITY_ADS as _, BIDDING_PREFIX as F, NETWORK_AD_MOB as N, NETWORK_IRON_SOURCE as E, NETWORK_MINTEGRAL as T, NETWORK_APPLOVIN as A, NETWORK_FACEBOOK_META as $, NETWORK_LIFTOFF as O, NETWORK_PANGLE as C, NETWORK_INMOBI as R, NETWORK_DT_EXCHANGE as B } from "./consts.js";
+const I = "#c9c9c9", K = [
   "#80BCFE",
   "#9999FF",
   "#5883E4",
@@ -10,59 +10,45 @@ const I = "#c9c9c9", L = [
   "#673AFF",
   "#CA80DC",
   "#FEBBB2"
-], t = [
-  "#487BEC",
-  "#FFC670",
-  "#80CBC4",
-  "#FF7557",
-  "#7856FF",
-  "#FEBBB2",
-  "#DA88EE",
-  "#0D7EA0",
-  "#01AB01",
-  "#B3596E"
-], K = {
+], t = {
   Total: "#646464",
   // AB tests
   A: "#FFC134",
   B: "#4F4FF5",
   // Countries
-  US: "#80BCFE",
-  CN: "#FF1200",
-  GB: "#89009B",
-  DE: "#FBE32D",
-  JP: "#B60028",
-  AU: "#E57D00",
-  FR: "#ACC62C",
-  RU: "#FF70AA",
+  US: "#272EC4",
+  CN: "#F52E1E",
+  GB: "#0082FF",
+  DE: "#FFD600",
+  JP: "#BA0029",
+  AU: "#009BCB",
+  FR: "#34A853",
   // Ad formats
-  Rewarded: "#80BCFE",
-  Interstitial: "#B60028",
-  Banner: "#E57D00",
-  Native: "#ACC62C",
-  Offerwall: "#9999FF",
+  Rewarded: "#0082FF",
+  Interstitial: "#009BCB",
+  Banner: "#9668FF",
+  Native: "#FF35A2",
   // Ad sources
-  [`${T} ${F}`]: "#80BCFE",
-  [`${_} ${F}`]: "#ACC62C",
-  [`${E} ${F}`]: "#9999FF",
-  [`${E}`]: "#CCCCFF",
-  [`${D} ${F}`]: "#E57D00",
-  [`${C} ${F}`]: "#00CCD7",
-  [`${C}`]: "#80E5EB",
-  [`${B} ${F}`]: "#89009B",
-  [`${B}`]: "#B866C3",
-  [`${A} ${F}`]: "#FF70AA",
-  [`${A}`]: "#FFB1DB",
-  [`${O} ${F}`]: "#FF1200",
-  [`${O}`]: "#FF8880",
-  [`${$} ${F}`]: "#FBE32D",
-  [`${$}`]: "#FDF196",
-  [`${R} ${F}`]: "#B60028",
-  [`${R}`]: "#DB8093"
+  [`${_} ${F}`]: "#9668FF",
+  [`${N} ${F}`]: "#34A853",
+  [`${E} ${F}`]: "#272EC4",
+  [`${E}`]: "#5C63E7",
+  [`${T} ${F}`]: "#00D8B2",
+  [`${A} ${F}`]: "#009BCB",
+  [`${A}`]: "#80CDE5",
+  [`${$} ${F}`]: "#0082FF",
+  [`${$}`]: "#52AAFF",
+  [`${O} ${F}`]: "#FF35A2",
+  [`${O}`]: "#FF9AD1",
+  [`${C} ${F}`]: "#F52E1E",
+  [`${C}`]: "#FA9F97",
+  [`${R} ${F}`]: "#FFD600",
+  [`${R}`]: "#FFEC8A",
+  [`${B} ${F}`]: "#BA0029",
+  [`${B}`]: "#DD8094"
 };
 export {
+  K as COLOR_PALETTE,
   I as DEFAULT_CHART_COLOR,
-  L as DEFAULT_COLOR_PALETTE,
-  t as MEDIATION_COLOR_PALETTE,
-  K as RESERVED_COLORS_MAP
+  t as RESERVED_COLORS_MAP
 };

package/components/chart/composables/useColorsMap.d.ts

@@ -1,12 +1,10 @@
 import { Ref } from 'vue';
 import { ChartDataSet } from '@/components/chart';
-import { ColorVariant } from '@/components/chart/types';
 type UseColorsMapArgs = {
     dataSets: Ref<ChartDataSet[]>;
     visibleIds: Ref<unknown[]>;
-    variant?: ColorVariant;
 };
-export declare const useColorsMap: ({ dataSets, visibleIds, variant, }: UseColorsMapArgs) => {
+export declare const useColorsMap: ({ dataSets, visibleIds }: UseColorsMapArgs) => {
     colorsMap: Ref<Record<string, `#${string}`>>;
 };
 export {};

package/components/chart/composables/useColorsMap.js

@@ -1,48 +1,46 @@
-import { computed as r, ref as n, watch as p } from "vue";
-import { RESERVED_COLORS_MAP as c, MEDIATION_COLOR_PALETTE as R, DEFAULT_COLOR_PALETTE as T, DEFAULT_CHART_COLOR as L } from "../colorPalette.js";
-const A = ({
-  dataSets: i,
-  visibleIds: u,
-  variant: v
-}) => {
-  const s = r(
-    () => i.value.filter(
-      (o) => u.value.includes(o.id)
+import { computed as n, ref as r, watch as E } from "vue";
+import { RESERVED_COLORS_MAP as c, COLOR_PALETTE as O, DEFAULT_CHART_COLOR as R } from "../colorPalette.js";
+const T = ({ dataSets: u, visibleIds: i }) => {
+  const a = n(
+    () => u.value.filter(
+      (o) => i.value.includes(o.id)
     )
-  ), t = n({
+  ), l = r({
     ...c
     // destructuring is important to avoid mutating the reserved colors object
-  }), a = n([]), d = r(() => (v === "mediation" ? R : T).filter((e) => !a.value.includes(e))), f = () => {
-    s.value.forEach((o) => {
+  }), s = r([]), v = n(
+    () => O.filter((o) => !s.value.includes(o))
+  ), d = () => {
+    a.value.forEach((o) => {
       const e = String(o.id);
-      if (!t.value[e]) {
-        const l = o.color || d.value[0] || L;
-        E(e, l);
+      if (!l.value[e]) {
+        const t = o.color || v.value[0] || R;
+        C(e, t);
       }
     });
-  }, C = () => {
-    Object.keys(t.value).forEach((o) => {
-      const e = s.value.find((m) => String(m.id) === o), l = !!c[o];
-      !e && !l && O(o);
+  }, f = () => {
+    Object.keys(l.value).forEach((o) => {
+      const e = a.value.find((m) => String(m.id) === o), t = !!c[o];
+      !e && !t && p(o);
     });
-  }, E = (o, e) => {
-    t.value[String(o)] = e, a.value.push(e);
-  }, O = (o) => {
-    const e = t.value[o];
-    delete t.value[o];
-    const l = a.value.indexOf(e);
-    l > -1 && a.value.splice(l, 1);
+  }, C = (o, e) => {
+    l.value[String(o)] = e, s.value.push(e);
+  }, p = (o) => {
+    const e = l.value[o];
+    delete l.value[o];
+    const t = s.value.indexOf(e);
+    t > -1 && s.value.splice(t, 1);
   };
-  return p(
-    s,
+  return E(
+    a,
     () => {
-      C(), f();
+      f(), d();
     },
     { immediate: !0 }
   ), {
-    colorsMap: t
+    colorsMap: l
   };
 };
 export {
-  A as useColorsMap
+  T as useColorsMap
 };

package/components/chart/index.d.ts

@@ -45,7 +45,6 @@ declare const ChartTypes: () => ({
             fullHeightBottomSpacing: number;
             withSettingsHeader: boolean;
             extraCharts: Record<string, unknown>[];
-            colorVariant: import("./types").ColorVariant;
         }> & Omit<Readonly<import("vue").ExtractPropTypes<{
             header: {
                 type: import("vue").PropType<string>;
@@ -216,15 +215,11 @@ declare const ChartTypes: () => ({
                 type: import("vue").PropType<Record<string, unknown>[]>;
                 default: () => any[];
             };
-            colorVariant: {
-                type: import("vue").PropType<import("./types").ColorVariant>;
-                default: string;
-            };
         }>> & {
             "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" | "fullHeight" | "fullHeightBottomSpacing" | "withSettingsHeader" | "extraCharts" | "colorVariant">;
+        } & 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" | "fullHeight" | "fullHeightBottomSpacing" | "withSettingsHeader" | "extraCharts">;
         $attrs: {
             [x: string]: unknown;
         };
@@ -408,10 +403,6 @@ declare const ChartTypes: () => ({
                 type: import("vue").PropType<Record<string, unknown>[]>;
                 default: () => any[];
             };
-            colorVariant: {
-                type: import("vue").PropType<import("./types").ColorVariant>;
-                default: string;
-            };
         }>> & {
             "onUpdate:visibleIds"?: (visibleIds: unknown[]) => any;
             "onUpdate:sortSelected"?: (sortOption: unknown) => any;
@@ -461,7 +452,6 @@ declare const ChartTypes: () => ({
             fullHeightBottomSpacing: number;
             withSettingsHeader: boolean;
             extraCharts: Record<string, unknown>[];
-            colorVariant: import("./types").ColorVariant;
         }, {}, string> & {
             beforeCreate?: (() => void) | (() => void)[];
             created?: (() => void) | (() => void)[];
@@ -652,10 +642,6 @@ declare const ChartTypes: () => ({
             type: import("vue").PropType<Record<string, unknown>[]>;
             default: () => any[];
         };
-        colorVariant: {
-            type: import("vue").PropType<import("./types").ColorVariant>;
-            default: string;
-        };
     }>> & {
         "onUpdate:visibleIds"?: (visibleIds: unknown[]) => any;
         "onUpdate:sortSelected"?: (sortOption: unknown) => any;
@@ -834,10 +820,6 @@ declare const ChartTypes: () => ({
         type: import("vue").PropType<Record<string, unknown>[]>;
         default: () => any[];
     };
-    colorVariant: {
-        type: import("vue").PropType<import("./types").ColorVariant>;
-        default: string;
-    };
 }>> & {
     "onUpdate:visibleIds"?: (visibleIds: unknown[]) => any;
     "onUpdate:sortSelected"?: (sortOption: unknown) => any;
@@ -887,7 +869,6 @@ declare const ChartTypes: () => ({
     fullHeightBottomSpacing: number;
     withSettingsHeader: boolean;
     extraCharts: Record<string, unknown>[];
-    colorVariant: import("./types").ColorVariant;
 }, {}, string> & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps & (new () => {
     $slots: {
         "before-chart-type"?(_: {}): any;

package/components/chart/types.d.ts

@@ -86,4 +86,3 @@ export declare enum TrendDirection {
     DOWN = "down",
     NEUTRAL = "right"
 }
-export type ColorVariant = 'default' | 'mediation';

package/components/chart/utils/utils.js

@@ -1,21 +1,22 @@
+import { getUTCDate as n } from "../../../utils/date.js";
 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 = ({
+import { TICK_LABEL_FONT as E } from "../consts.js";
+import { nFormatter as c } from "../../../utils/formatNumbers.js";
+import { truncateTextToFit as T } from "../../../utils/text.js";
+import { REGEX_LINEBREAK as i } from "../../../consts/regex.js";
+const u = (r, t, o = !1) => t === "day" ? e(n(r), "EEEE") : t === "number" ? c(r, o) : t === "date" ? e(n(r), "MMM dd") : t === "dateLong" ? e(n(r), "MMM dd, yyyy") : String(r), _ = ({
   label: r,
   format: t,
-  availableSpace: n,
-  truncate: i = !1
+  availableSpace: o,
+  truncate: s = !1
 }) => {
-  const s = m.test(r), o = (d) => {
-    const f = c(d, t);
-    return i && n > 0 ? a(f, p, n) : f;
+  const p = i.test(r), f = (d) => {
+    const m = u(d, t);
+    return s && o > 0 ? T(m, E, o) : m;
   };
-  return s ? r.split(m).map(o) : o(r);
+  return p ? r.split(i).map(f) : f(r);
 };
 export {
-  c as formatValue,
-  w as prepareTickLabel
+  u as formatValue,
+  _ as prepareTickLabel
 };

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

@@ -3,13 +3,13 @@ import { useToggle as fe } from "../../../composables/useToggle.js";
 import { ref as r, computed as b, onMounted as de, onBeforeMount as ce, onUnmounted as ve, watch as Q } from "vue";
 import { min as me, addDays as ge, format as X } from "date-fns";
 import { presetsList as he, formatError as De, mandatoryValuesError as Me, navigatePrev as Z, navigateNext as V } from "./consts.common.js";
-import m from "./DateServices.common.js";
+import d from "./DateServices.common.js";
 const pe = (o, y) => {
-  const N = r(null), d = r({ started: !1, date: null }), x = r(!1), _ = 2, S = r({ from: null, to: null }), u = r({}), g = r([]), k = r(null), i = r({}), p = r({}), C = r(!1), w = r(null), s = r(null), j = r("left"), P = r(null), O = r(null), E = r([]), K = r(null), [D] = fe({ initialValue: !1 }), q = r(null);
+  const N = r(null), c = r({ started: !1, date: null }), x = r(!1), _ = 2, T = r({ from: null, to: null }), u = r({}), g = r([]), k = r(null), i = r({}), p = r({}), E = r(!1), w = r(null), s = r(null), j = r("left"), P = r(null), O = r(null), C = r([]), K = r(null), [D] = fe({ initialValue: !1 }), q = r(null);
   ie(q, () => {
     D.value = !1;
   });
-  const L = (e, t) => {
+  const U = (e, t) => {
     const a = {
       weeks: [],
       days: {},
@@ -17,20 +17,20 @@ const pe = (o, y) => {
       year: t
     };
     let n, l;
-    const c = new Date(t, e, 1).getDay();
-    let v = 1;
-    const f = /* @__PURE__ */ new Date();
+    const v = new Date(t, e, 1).getDay();
+    let m = 1;
+    const f = d.getCurrentTimeUTC();
     f.setHours(0, 0, 0, 0);
-    const ue = m.daysInMonth(e, t);
+    const ue = d.daysInMonth(e, t);
     for (let I = 0; I < 6; I++) {
       l = [];
       for (let H = 0; H < 7; H++)
-        n = {}, I === 0 && c > 0 && H < c && (n.value = 0), v > ue && (n.value = 0), !n.value && n.value !== 0 && (n.value = v, v += 1, a.days[n.value] = n, n.date = new Date(t, e, n.value), f < n.date ? n.isFuture = !0 : n.date.getTime() === f.getTime() && (n.isToday = !0, o.includeToday || (n.disabled = !0))), l.push(n);
+        n = {}, I === 0 && v > 0 && H < v && (n.value = 0), m > ue && (n.value = 0), !n.value && n.value !== 0 && (n.value = m, m += 1, a.days[n.value] = n, n.date = new Date(t, e, n.value), f < n.date ? n.isFuture = !0 : n.date.getTime() === f.getTime() && (n.isToday = !0, o.includeToday || (n.disabled = !0))), l.push(n);
       a.weeks.push(l);
     }
     return a;
-  }, T = () => {
-    let e = m.getCurrentTimeUTC();
+  }, S = () => {
+    let e = d.getCurrentTimeUTC();
     if (s.value && s.value.toEnd ? e = s.value.toEnd : o.range && o.range.to && (e = o.range.to), !u.value[`${e.getFullYear().toString()}_${e.getMonth().toString()}`]) {
       u.value = {}, g.value = [];
       for (let t = 0; t < _; t++) {
@@ -38,7 +38,7 @@ const pe = (o, y) => {
         a.setDate(1), a.setMonth(e.getMonth() - t);
         const n = `${a.getFullYear().toString()}_${a.getMonth().toString()}`;
         u.value[n] = {
-          parsedMonth: L(
+          parsedMonth: U(
             a.getMonth(),
             a.getFullYear()
           ),
@@ -49,28 +49,28 @@ const pe = (o, y) => {
   }, z = (e, t) => {
     w.value = e;
     let a = e;
-    e === "date" && (a = o.datePresetList), E.value = he[a], t && (s.value = {
+    e === "date" && (a = o.datePresetList), C.value = he[a], t && (s.value = {
       fromStart: null,
       fromEnd: null,
       toStart: null,
       toEnd: null
-    }, S.value.from = "", S.value.to = "", d.value = { started: !1, date: null }, i.value = "custom"), y("rangeTypeChanged", w.value);
+    }, T.value.from = "", T.value.to = "", c.value = { started: !1, date: null }, i.value = "custom"), y("rangeTypeChanged", w.value);
   }, ee = (e) => {
-    i.value = e.id, M(k.value[e.id].dates()), T();
+    i.value = e.id, M(k.value[e.id].dates()), S();
   }, M = (e, t = !1) => {
     let a = e;
-    return !e.from && !e.to && e.preset ? a = k.value[e.preset]?.dates() : (!e || !e.from && !e.to) && (a = k.value[E.value[0]]), o.maxDaysInRange && (K.value = t ? ge(a.from, o.maxDaysInRange) : null), C.value = !1, !a.from || !a.to || !(a.from instanceof Date) || !(a.to instanceof Date) ? (O.value = De, C.value = !0, !1) : a.from > a.to ? (O.value = `"From" date can't be bigger than "To" date`, C.value = !0, !1) : (s.value = R(a), S.value.from = X(
+    return !e.from && !e.to && e.preset ? a = k.value[e.preset]?.dates() : (!e || !e.from && !e.to) && (a = k.value[C.value[0]]), o.maxDaysInRange && (K.value = t ? ge(a.from, o.maxDaysInRange) : null), E.value = !1, !a.from || !a.to || !(a.from instanceof Date) || !(a.to instanceof Date) ? (O.value = De, E.value = !0, !1) : a.from > a.to ? (O.value = `"From" date can't be bigger than "To" date`, E.value = !0, !1) : (s.value = R(a), T.value.from = X(
       s.value.fromStart,
       o.dateFormat
-    ), S.value.to = X(s.value.toEnd, o.dateFormat), !0);
+    ), T.value.to = X(s.value.toEnd, o.dateFormat), !0);
   }, F = () => {
-    i.value === "custom" ? P.value = m.getDateRangeString(s.value) : P.value = J.value, y("currentDateChanged", P.value);
+    i.value === "custom" ? P.value = d.getDateRangeString(s.value) : P.value = J.value, y("currentDateChanged", P.value);
   }, te = () => {
     if (s.value.fromStart == null || s.value.toEnd == null) {
-      C.value = !0, O.value = Me;
+      E.value = !0, O.value = Me;
       return;
     }
-    const e = m.getCurrentTimeUTC();
+    const e = d.getCurrentTimeUTC();
     s.value.toEnd > e && (s.value.toEnd = e), F(), p.value = i.value, y("rangeChanged", {
       from: s.value.fromStart,
       to: s.value.toEnd,
@@ -79,29 +79,29 @@ const pe = (o, y) => {
   }, ae = (e, t) => e ? Z : t ? V : null, ne = (e) => {
     let t = null, a = null;
     const n = _ - 1;
-    let l = "", h = null, c = null;
+    let l = "", h = null, v = null;
     switch (e) {
       case V:
-        Object.keys(u.value).forEach((v) => {
-          const f = u.value[v];
+        Object.keys(u.value).forEach((m) => {
+          const f = u.value[m];
           f.order === 0 && (h = f), f.order === n ? (g.value.splice(
-            g.value.indexOf(v),
+            g.value.indexOf(m),
             1
-          ), delete u.value[v]) : f.order += 1;
+          ), delete u.value[m]) : f.order += 1;
         }), t = h.parsedMonth.month + 1, a = h.parsedMonth.year, t > 11 && (t = 0, a += 1), l = `${a.toString()}_${t.toString()}`, u.value[l] = {
-          parsedMonth: L(t, a),
+          parsedMonth: U(t, a),
           order: 0
         }, g.value.push(l);
         break;
       case Z:
-        Object.keys(u.value).forEach((v) => {
-          const f = u.value[v];
-          f.order === n && (c = f), f.order === 0 ? (g.value.splice(
-            g.value.indexOf(v),
+        Object.keys(u.value).forEach((m) => {
+          const f = u.value[m];
+          f.order === n && (v = f), f.order === 0 ? (g.value.splice(
+            g.value.indexOf(m),
             1
-          ), delete u.value[v]) : f.order -= 1;
-        }), t = c.parsedMonth.month - 1, a = c.parsedMonth.year, t < 0 && (t = 11, a -= 1), l = `${a.toString()}_${t.toString()}`, u.value[l] = {
-          parsedMonth: L(t, a),
+          ), delete u.value[m]) : f.order -= 1;
+        }), t = v.parsedMonth.month - 1, a = v.parsedMonth.year, t < 0 && (t = 11, a -= 1), l = `${a.toString()}_${t.toString()}`, u.value[l] = {
+          parsedMonth: U(t, a),
           order: n
         }, g.value.unshift(l);
         break;
@@ -111,10 +111,10 @@ const pe = (o, y) => {
     switch (w.value) {
       case "week":
         t = {
-          fromStart: m.getFirstDayOfWeek(e.from),
-          fromEnd: m.getLastDayOfWeek(e.from),
-          toStart: m.getFirstDayOfWeek(e.to),
-          toEnd: m.getLastDayOfWeek(e.to)
+          fromStart: d.getFirstDayOfWeek(e.from),
+          fromEnd: d.getLastDayOfWeek(e.from),
+          toStart: d.getFirstDayOfWeek(e.to),
+          toEnd: d.getLastDayOfWeek(e.to)
         };
         break;
       case "month":
@@ -124,13 +124,13 @@ const pe = (o, y) => {
             e.from.getMonth(),
             1
           ),
-          fromEnd: m.getLastDayOfMonth(e.from),
+          fromEnd: d.getLastDayOfMonth(e.from),
           toStart: new Date(
             e.to.getFullYear(),
             e.to.getMonth(),
             1
           ),
-          toEnd: m.getLastDayOfMonth(e.to)
+          toEnd: d.getLastDayOfMonth(e.to)
         };
         break;
       case "date":
@@ -144,10 +144,10 @@ const pe = (o, y) => {
         break;
     }
     return t;
-  }, U = (e, t) => e.getUTCFullYear() === t.getUTCFullYear() && e.getUTCMonth() === t.getUTCMonth() && e.getUTCDate() === t.getUTCDate(), $ = (e) => {
+  }, L = (e, t) => e.getUTCFullYear() === t.getUTCFullYear() && e.getUTCMonth() === t.getUTCMonth() && e.getUTCDate() === t.getUTCDate(), $ = (e) => {
     let t = !1;
     if (!e.from && !e.to && e.preset) {
-      const l = E.value.find(
+      const l = C.value.find(
         (h) => h.id === e.preset
       );
       i.value = l.id, t = !0;
@@ -157,15 +157,15 @@ const pe = (o, y) => {
       to: new Date(e.to)
     };
     a.from.setHours(0, 0, 0, 0), a.to.setHours(0, 0, 0, 0);
-    const n = E.value.map((l) => l.id);
+    const n = C.value.map((l) => l.id);
     if (Object.keys(k.value).forEach((l) => {
       const h = k.value[l];
       if (l !== "custom" && !t && n.indexOf(l) !== -1) {
-        const c = h.dates();
-        c.from.setHours(0, 0, 0, 0), c.to.setHours(0, 0, 0, 0), U(c.from, a.from) && U(c.to, a.to) && (i.value = l, t = !0);
+        const v = h.dates();
+        v.from.setHours(0, 0, 0, 0), v.to.setHours(0, 0, 0, 0), L(v.from, a.from) && L(v.to, a.to) && (i.value = l, t = !0);
       }
     }), t) {
-      const l = E.value.find(
+      const l = C.value.find(
         (h) => h.id === i.value
       );
       y("dateRangePresetNameChanged", l.name);
@@ -173,24 +173,24 @@ const pe = (o, y) => {
       y("dateRangePresetNameChanged", null), i.value = "custom";
     p.value = i.value;
   }, A = (e, t, a) => {
-    if (!d.value.started)
-      i.value = "custom", d.value.started = !0, d.value.date = new Date(a, t, e.value), M(
-        { from: d.value.date, to: d.value.date },
+    if (!c.value.started)
+      i.value = "custom", c.value.started = !0, c.value.date = new Date(a, t, e.value), M(
+        { from: c.value.date, to: c.value.date },
         !0
       );
     else {
-      const n = new Date(a, t, e.value), l = d.value.date;
-      d.value.started = !1, d.value.date = null, n < l ? A(e, t, a) : M({ from: l, to: n });
+      const n = new Date(a, t, e.value), l = c.value.date;
+      c.value.started = !1, c.value.date = null, n < l ? A(e, t, a) : M({ from: l, to: n });
     }
   }, B = () => {
     const e = N.value.offsetLeft;
     return window.innerWidth - e > 930 ? "left" : "right";
   }, W = (e = !0) => {
-    D.value = !D.value, D.value ? (j.value = B(), M(o.range), T(), y("opened")) : (M(o.range), T(), i.value = p.value, e && y("dismissed"));
+    D.value = !D.value, D.value ? (j.value = B(), M(o.range), S(), y("opened")) : (M(o.range), S(), i.value = p.value, e && y("dismissed"));
   }, G = () => {
     D.value && W();
   }, le = () => {
-    k.value = m.getPresetsFunctions(o.includeToday), k.value.custom = {
+    k.value = d.getPresetsFunctions(o.includeToday), k.value.custom = {
       dates: () => o.range
     };
   }, oe = b(() => (g.value || []).reduce((e, t) => {
@@ -199,7 +199,7 @@ const pe = (o, y) => {
     ).length;
     return e && !n;
   }, !0)), Y = () => {
-    o.range && (x.value = !0, z(o.initialType || o.types[0]), le(), $(o.range), M(o.range), T(), F());
+    o.range && (x.value = !0, z(o.initialType || o.types[0]), le(), $(o.range), M(o.range), S(), F());
   };
   de(() => {
     Y();
@@ -216,10 +216,10 @@ const pe = (o, y) => {
       e && e !== t && (x.value ? ($(e), M(e), F()) : Y());
     }
   ), Q(D, (e) => {
-    e || (d.value.started = !1);
+    e || (c.value.started = !1);
   });
   const J = b(() => {
-    const e = E.value.find(
+    const e = C.value.find(
       (t) => t.id === i.value
     );
     return e ? e.name : "";
@@ -233,21 +233,21 @@ const pe = (o, y) => {
     getMaxAllowedDate: se,
     selectedPresetName: J,
     selectedPreset: i,
-    displayError: C,
+    displayError: E,
     rangeType: w,
     selectedRange: s,
     placement: j,
     currentDate: P,
     error: O,
-    presets: E,
+    presets: C,
     isOpen: D,
     popup: q,
-    selectionStart: d,
+    selectionStart: c,
     initialized: x,
-    textDates: S,
+    textDates: T,
     currentMonths: u,
     displayedMonthsKeys: g,
-    initMonths: T,
+    initMonths: S,
     changeType: z,
     presetChanged: ee,
     initRange: M,
@@ -256,7 +256,7 @@ const pe = (o, y) => {
     getNavigation: ae,
     navigationCallback: ne,
     getSelectedRangeByType: R,
-    compareDates: U,
+    compareDates: L,
     determinePreset: $,
     selectionChanged: A,
     checkPlacement: B,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ironsource/shared-ui",
-  "version": "2.1.12-test.49",
+  "version": "2.1.12-test.52",
   "engines": {
     "npm": ">=7.0.0",
     "node": ">=16.0.0"

package/utils/date.d.ts

@@ -0,0 +1 @@
+export declare const getUTCDate: (date: Date | string | number) => Date;

package/utils/date.js

@@ -0,0 +1,9 @@
+const n = (e) => {
+  const t = typeof e == "string" || typeof e == "number" ? new Date(e) : e;
+  return new Date(
+    t.valueOf() + t.getTimezoneOffset() * 60 * 1e3
+  );
+};
+export {
+  n as getUTCDate
+};

package/Chart.vue_vue_type_style_index_0_scoped_fa533a3d_lang.css

@@ -1 +0,0 @@
-.chart-container[data-v-fa533a3d]{border:1px solid var(--common-divider);background:var(--background-paper);display:flex;border-radius:0 0 6px 6px;width:100%}.chart-planes[data-v-fa533a3d]{width:100%;height:100%;overflow-y:auto}.chart-planes.with-legend[data-v-fa533a3d]{width:calc(100% - 221px)}.chart-planes .extra-chart-plane[data-v-fa533a3d]{border-top:1px solid var(--common-divider)}.chart-sidebar[data-v-fa533a3d]{border-left:1px solid var(--common-divider)}

package/TooltipHeader.vue_vue_type_style_index_0_scoped_3b15c693_lang.css

@@ -1 +0,0 @@
-.tooltip-title-wrapper[data-v-3b15c693]{display:flex;flex-direction:column;color:var(--text-primary);margin-bottom:var(--spacing-100)}.tooltip-title-wrapper .main-title[data-v-3b15c693]{display:flex;align-items:center;gap:.25rem}.tooltip-title-wrapper .title-text[data-v-3b15c693]{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.tooltip-title-wrapper .title-image[data-v-3b15c693]{width:20px;height:20px;border-radius:4px}.tooltip-title-wrapper .tooltip-sub-title[data-v-3b15c693]{color:var(--text-secondary)}.tooltip-title-wrapper .platform-icon[data-v-3b15c693]{color:var(--action-active)}