@ironsource/shared-ui 2.2.0-rc.1 → 2.2.0-rc.2

package/ChartPlane.vue_vue_type_style_index_0_scoped_3c887f7e_lang.css

@@ -0,0 +1 @@
+.chart-plane-container[data-v-3c887f7e]{--headerHeight: var(--4efc2842);width:100%;height:var(--60310e6c);position:relative}.header-wrapper[data-v-3c887f7e]{position:absolute;width:100%;height:var(--headerHeight);top:0;z-index:1}.chart-plane[data-v-3c887f7e]{padding-top:var(--headerHeight);height:100%}.chart-empty[data-v-3c887f7e]{background:var(--background-paper)}.chart[data-v-3c887f7e]{width:100%;height:100%;position:relative}.chart__canvas[data-v-3c887f7e]{width:100%;height:100%}.chart__tooltip[data-v-3c887f7e]{position:absolute;pointer-events:none;transition:all .1s ease;min-width:214px;max-width:270px;z-index:1}

package/ChartTooltip.vue_vue_type_style_index_0_scoped_dc7e6298_lang.css

@@ -0,0 +1 @@
+.chart-tooltip[data-v-dc7e6298]{color:var(--text-primary);background:var(--common-white);box-shadow:0 4px 8px -2px #1018281f;border:1px solid var(--common-divider-elevation-0);border-radius:var(--border-radius-md);width:280px;padding:calc(var(--spacing-100) - 1px)}.color-box[data-v-dc7e6298]{min-width:12px;width:12px;height:12px;border-radius:2px;display:inline-block;margin-right:var(--spacing-100)}.color-box+.platform-icon[data-v-dc7e6298]{margin-left:calc(var(--spacing-50) - var(--spacing-100))}.list[data-v-dc7e6298]{list-style:none;margin:0;padding:0}.list__item[data-v-dc7e6298]{display:flex;align-items:center;margin-bottom:var(--spacing-50);color:var(--text-secondary)}.list__item[data-v-dc7e6298]:last-child{margin-bottom:0}.platform-icon[data-v-dc7e6298]{color:var(--action-active);margin-right:var(--spacing-50)}.popover-label-wrapper[data-v-dc7e6298]{display:flex;width:120px;flex-grow:1}.truncated-label[data-v-dc7e6298]{max-width:95%}.tooltip-footer[data-v-dc7e6298]{display:flex;align-items:center;margin-top:var(--spacing-100);color:var(--text-primary)}.flex-grow[data-v-dc7e6298]{flex-grow:1}

package/TooltipHeader.vue_vue_type_style_index_0_scoped_2177211f_lang.css

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

package/components/chart/ChartPlane.vue.js

@@ -1,7 +1,7 @@
 import e from "./ChartPlane.vue2.js";
 /* empty css                 */import o from "../../_virtual/_plugin-vue_export-helper.js";
-// import "../../ChartPlane.vue_vue_type_style_index_0_scoped_a685cf5e_lang.css"; //*');
-const s = /* @__PURE__ */ o(e, [["__scopeId", "data-v-a685cf5e"]]);
+// import "../../ChartPlane.vue_vue_type_style_index_0_scoped_3c887f7e_lang.css"; //*');
+const a = /* @__PURE__ */ o(e, [["__scopeId", "data-v-3c887f7e"]]);
 export {
-  s as default
+  a as default
 };

package/components/chart/ChartPlane.vue2.js

@@ -1,4 +1,4 @@
- import "../../ChartPlane.vue_vue_type_style_index_0_scoped_a685cf5e_lang.css"; import { defineComponent as ne, useCssVars as se, unref as n, computed as i, ref as E, onMounted as de, watch as v, nextTick as ce, openBlock as p, createElementBlock as S, createVNode as ue, isRef as fe, createSlots as pe, withCtx as he, renderSlot as me, createCommentVNode as L, createElementVNode as R, normalizeStyle as Te, createBlock as I, mergeProps as ve } from "vue";
+ import "../../ChartPlane.vue_vue_type_style_index_0_scoped_3c887f7e_lang.css"; import { defineComponent as ne, useCssVars as se, unref as n, computed as i, ref as E, onMounted as de, watch as v, nextTick as ce, openBlock as p, createElementBlock as S, createVNode as ue, isRef as fe, createSlots as pe, withCtx as he, renderSlot as me, createCommentVNode as L, createElementVNode as R, normalizeStyle as Te, createBlock as I, mergeProps as ve } from "vue";
 import { Chart as V, ArcElement as ye, LineElement as Ce, BarElement as ge, PointElement as be, LineController as xe, BarController as Ae, PieController as ke, ScatterController as Ee, CategoryScale as Se, LinearScale as Le, Filler as Re, Tooltip as Ie } from "chart.js";
 import { HoverVerticalLine as De } from "./plugins/HoverVerticalLine.js";
 import { prepareTickLabel as Be, formatValue as Oe } from "./utils/utils.js";
@@ -69,8 +69,8 @@ const rt = { class: "chart-plane-container" }, it = {
   setup(o, { emit: z }) {
     const e = o;
     se((t) => ({
-      "6a964917": n(oe),
-      "322ee3fc": o.height
+      "4efc2842": n(oe),
+      "60310e6c": o.height
     }));
     const W = Xe(Be);
     V.register(
@@ -272,7 +272,7 @@ const rt = { class: "chart-plane-container" }, it = {
               count: e.tickCount + 1,
               padding: 8,
               min: 0,
-              callback: (t) => e.valuePrefix + Oe(t, e.yAxisFormat, !0) + e.valueSuffix
+              callback: (t) => e.valuePrefix + Oe(t, e.yAxisFormat, { formatLowDigits: !0 }) + e.valueSuffix
             },
             // grid lines
             grid: {

package/components/chart/ChartTooltip.vue.js

@@ -1,7 +1,7 @@
 import o from "./ChartTooltip.vue2.js";
 /* empty css                   */import t from "../../_virtual/_plugin-vue_export-helper.js";
-// import "../../ChartTooltip.vue_vue_type_style_index_0_scoped_9623dbbd_lang.css"; //*');
-const s = /* @__PURE__ */ t(o, [["__scopeId", "data-v-9623dbbd"]]);
+// import "../../ChartTooltip.vue_vue_type_style_index_0_scoped_dc7e6298_lang.css"; //*');
+const s = /* @__PURE__ */ t(o, [["__scopeId", "data-v-dc7e6298"]]);
 export {
   s as default
 };

package/components/chart/ChartTooltip.vue2.js

@@ -1,15 +1,15 @@
- import "../../ChartTooltip.vue_vue_type_style_index_0_scoped_9623dbbd_lang.css"; import { defineComponent as v, openBlock as l, createElementBlock as o, mergeProps as h, unref as e, createBlock as f, createCommentVNode as r, Fragment as b, renderList as C, createElementVNode as c, normalizeStyle as k, createVNode as i, withCtx as s, createTextVNode as u, toDisplayString as n } from "vue";
+ import "../../ChartTooltip.vue_vue_type_style_index_0_scoped_dc7e6298_lang.css"; import { defineComponent as v, openBlock as l, createElementBlock as o, mergeProps as h, unref as e, createBlock as f, createCommentVNode as r, Fragment as b, renderList as g, createElementVNode as c, normalizeStyle as C, createVNode as i, withCtx as s, createTextVNode as u, toDisplayString as n } from "vue";
 import d from "../typography/v4/Typography.vue.js";
-import A from "../icon/v4/IconV4.vue.js";
+import k from "../icon/v4/IconV4.vue.js";
 import "../icon/v4/IconFlag.vue.js";
 import { formatValue as m } from "./utils/utils.js";
-import I from "./TooltipHeader.vue.js";
-import { useTestIdAttrs as T } from "../../utils/testIds.js";
+import A from "./TooltipHeader.vue.js";
+import { useTestIdAttrs as I } from "../../utils/testIds.js";
 import { ChartTooltipTestIdModifiers as x } from "../../testids/index.js";
-const g = {
+const T = {
   key: 1,
   class: "list"
-}, p = { class: "popover-label-wrapper" }, V = {
+}, p = { class: "popover-label-wrapper" }, S = {
   key: 2,
   class: "tooltip-footer"
 }, O = /* @__PURE__ */ v({
@@ -28,9 +28,9 @@ const g = {
     testId: { default: "" }
   },
   setup(t) {
-    const y = T(t.testId, x);
-    return (N, S) => (l(), o("div", h({ class: "chart-tooltip" }, e(y)[e(x).CONTAINER]), [
-      t.title ? (l(), f(I, {
+    const y = I(t.testId, x);
+    return (w, F) => (l(), o("div", h({ class: "chart-tooltip" }, e(y)[e(x).CONTAINER]), [
+      t.title ? (l(), f(A, {
         key: 0,
         title: t.title,
         "data-points": t.dataPoints,
@@ -38,18 +38,18 @@ const g = {
         "x-axis-format": t.xAxisFormat,
         "x-axis-date-interval": t.xAxisDateInterval
       }, null, 8, ["title", "data-points", "totals-chart", "x-axis-format", "x-axis-date-interval"])) : r("", !0),
-      t.totalsChart ? r("", !0) : (l(), o("ul", g, [
-        (l(!0), o(b, null, C(t.dataPoints, (a) => (l(), o("li", {
+      t.totalsChart ? r("", !0) : (l(), o("ul", T, [
+        (l(!0), o(b, null, g(t.dataPoints, (a) => (l(), o("li", {
           key: a.datasetIndex,
           class: "list__item"
         }, [
           c("span", {
             class: "color-box",
-            style: k({
+            style: C({
               backgroundColor: String(a.dataset.pointBackgroundColor)
             })
           }, null, 4),
-          a.dataset.icon ? (l(), f(e(A), {
+          a.dataset.icon ? (l(), f(e(k), {
             key: 0,
             class: "platform-icon",
             type: a.dataset.iconType,
@@ -70,13 +70,16 @@ const g = {
           ]),
           i(e(d), { variant: "body2" }, {
             default: s(() => [
-              u(n(t.valuePrefix + e(m)(a.parsed.y, t.yAxisFormat, !0, !1) + t.valueSuffix), 1)
+              u(n(t.valuePrefix + e(m)(a.parsed.y, t.yAxisFormat, {
+                formatLowDigits: !0,
+                withSuffixSpace: !1
+              }) + t.valueSuffix), 1)
             ]),
             _: 2
           }, 1024)
         ]))), 128))
       ])),
-      t.totalValue !== null ? (l(), o("div", V, [
+      t.totalValue !== null ? (l(), o("div", S, [
         i(e(d), {
           variant: "body2",
           class: "flex-grow"
@@ -88,7 +91,7 @@ const g = {
         }),
         i(e(d), { variant: "body2" }, {
           default: s(() => [
-            u(n(t.valuePrefix + e(m)(t.totalValue, t.yAxisFormat, !0) + t.valueSuffix), 1)
+            u(n(t.valuePrefix + e(m)(t.totalValue, t.yAxisFormat, { formatLowDigits: !0 }) + t.valueSuffix), 1)
           ]),
           _: 1
         })

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_da3532aa_lang.css"; //*');
-const p = /* @__PURE__ */ e(o, [["__scopeId", "data-v-da3532aa"]]);
+// import "../../TooltipHeader.vue_vue_type_style_index_0_scoped_2177211f_lang.css"; //*');
+const s = /* @__PURE__ */ e(o, [["__scopeId", "data-v-2177211f"]]);
 export {
-  p as default
+  s as default
 };

package/components/chart/TooltipHeader.vue2.js

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

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

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

package/components/chart/utils/utils.js

@@ -1,27 +1,37 @@
-import { getUTCDate as e } from "../../../utils/date.js";
-import { format as f } from "date-fns";
-import { TICK_LABEL_FONT as d } from "../consts.js";
-import { nFormatter as L, DEFAULT_FALLBACK as T } from "../../../utils/formatNumbers.js";
-import { truncateTextToFit as c } from "../../../utils/text.js";
-import { REGEX_LINEBREAK as s } from "../../../consts/regex.js";
-const u = (r, t, o = !1, n = !0) => t === "day" ? f(e(r), "EEEE") : t === "number" ? L(
-  r,
-  o,
-  T,
-  n
-) : t === "date" ? f(e(r), "MMM dd") : t === "dateLong" ? f(e(r), "MMM dd, yyyy") : String(r), B = ({
-  label: r,
-  format: t,
-  availableSpace: o,
-  truncate: n = !1
+import { getUTCDate as f } from "../../../utils/date.js";
+import { format as m } from "date-fns";
+import { TICK_LABEL_FONT as c } from "../consts.js";
+import { nFormatter as E, DEFAULT_FALLBACK as T } from "../../../utils/formatNumbers.js";
+import { truncateTextToFit as a } from "../../../utils/text.js";
+import { REGEX_LINEBREAK as p } from "../../../consts/regex.js";
+const d = (t, r, e = {
+  formatLowDigits: !1,
+  withSuffixSpace: !0,
+  withUTC: !0
 }) => {
-  const p = s.test(r), m = (E) => {
-    const i = u(E, t);
-    return n && o > 0 ? c(i, d, o) : i;
+  const { formatLowDigits: i, withSuffixSpace: n, withUTC: o } = e;
+  return r === "day" ? m(o ? f(t) : new Date(t), "EEEE") : r === "number" ? E(
+    t,
+    i,
+    T,
+    n
+  ) : r === "date" ? m(o ? f(t) : new Date(t), "MMM dd") : r === "dateLong" ? m(
+    o ? f(t) : new Date(t),
+    "MMM dd, yyyy"
+  ) : String(t);
+}, h = ({
+  label: t,
+  format: r,
+  availableSpace: e,
+  truncate: i = !1
+}) => {
+  const n = p.test(t), o = (L) => {
+    const s = d(L, r);
+    return i && e > 0 ? a(s, c, e) : s;
   };
-  return p ? r.split(s).map(m) : m(r);
+  return n ? t.split(p).map(o) : o(t);
 };
 export {
-  u as formatValue,
-  B as prepareTickLabel
+  d as formatValue,
+  h as prepareTickLabel
 };

package/index.js

@@ -1,4 +1,4 @@
-import './Menu.vue_vue_type_style_index_0_scoped_eb057818_lang.css';
+import './MenuItem.vue_vue_type_style_index_0_scoped_67e53b85_lang.css';
 import { AppTriggerTypes as eo } from "./components/appTrigger/index.js";
 import { AutocompleteDropdownTypes as mo } from "./components/autocompleteDropdown/index.js";
 import { MenuItemTypes as ao } from "./components/menuItem/index.js";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ironsource/shared-ui",
-  "version": "2.2.0-rc.1",
+  "version": "2.2.0-rc.2",
   "engines": {
     "npm": ">=7.0.0",
     "node": ">=16.0.0"

package/ChartPlane.vue_vue_type_style_index_0_scoped_a685cf5e_lang.css

@@ -1 +0,0 @@
-.chart-plane-container[data-v-a685cf5e]{--headerHeight: var(--6a964917);width:100%;height:var(--322ee3fc);position:relative}.header-wrapper[data-v-a685cf5e]{position:absolute;width:100%;height:var(--headerHeight);top:0;z-index:1}.chart-plane[data-v-a685cf5e]{padding-top:var(--headerHeight);height:100%}.chart-empty[data-v-a685cf5e]{background:var(--background-paper)}.chart[data-v-a685cf5e]{width:100%;height:100%;position:relative}.chart__canvas[data-v-a685cf5e]{width:100%;height:100%}.chart__tooltip[data-v-a685cf5e]{position:absolute;pointer-events:none;transition:all .1s ease;min-width:214px;max-width:270px;z-index:1}

package/ChartTooltip.vue_vue_type_style_index_0_scoped_9623dbbd_lang.css

@@ -1 +0,0 @@
-.chart-tooltip[data-v-9623dbbd]{color:var(--text-primary);background:var(--common-white);box-shadow:0 4px 8px -2px #1018281f;border:1px solid var(--common-divider-elevation-0);border-radius:var(--border-radius-md);width:280px;padding:calc(var(--spacing-100) - 1px)}.color-box[data-v-9623dbbd]{min-width:12px;width:12px;height:12px;border-radius:2px;display:inline-block;margin-right:var(--spacing-100)}.color-box+.platform-icon[data-v-9623dbbd]{margin-left:calc(var(--spacing-50) - var(--spacing-100))}.list[data-v-9623dbbd]{list-style:none;margin:0;padding:0}.list__item[data-v-9623dbbd]{display:flex;align-items:center;margin-bottom:var(--spacing-50);color:var(--text-secondary)}.list__item[data-v-9623dbbd]:last-child{margin-bottom:0}.platform-icon[data-v-9623dbbd]{color:var(--action-active);margin-right:var(--spacing-50)}.popover-label-wrapper[data-v-9623dbbd]{display:flex;width:120px;flex-grow:1}.truncated-label[data-v-9623dbbd]{max-width:95%}.tooltip-footer[data-v-9623dbbd]{display:flex;align-items:center;margin-top:var(--spacing-100);color:var(--text-primary)}.flex-grow[data-v-9623dbbd]{flex-grow:1}

package/TooltipHeader.vue_vue_type_style_index_0_scoped_da3532aa_lang.css

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