@ironsource/shared-ui 2.2.0-test.90 → 2.2.0-test.91

package/components/chart/ChartPlane.vue2.js

@@ -1,29 +1,31 @@
- import "../../ChartPlane.vue_vue_type_style_index_0_scoped_6de5cddb_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 ue, openBlock as p, createElementBlock as S, createVNode as ce, 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";
-import { DEFAULT_TICK_COUNT as Pe, TOTALS_HELPER_KEY as F, LINE_DASH_STYLE as Ne, BASE_COLOR_KEY as M, CHART_PADDING as He, POINT_BORDER_COLOR as we, TICK_LABEL_COLOR as Y, TICK_LABEL_FONT as K, TICKS_EXTRA_PADDING as Ve, GRID_LINE_COLOR as U, HEADER_HEIGHT as Fe, COMPACT_HEADER_HEIGHT as Me, HOVER_AREA_TRANSPARENCY as Ye, HOVER_TRANSPARENCY as y, CHART_ITEM_TRANSPARENCY as Ke, INCOMPLETE_DATA_BAR_TRANSPARENCY as Ue, STACKED_LINE_TRANSPARENCY as Ge } from "./consts.js";
-import { ChartType as d, DateInterval as _e, TooltipOrder as G, TrendDirection as $e } from "./types.js";
+ import "../../ChartPlane.vue_vue_type_style_index_0_scoped_1fcb0465_lang.css"; import { defineComponent as se, useCssVars as de, unref as n, computed as i, ref as E, onMounted as ue, watch as y, nextTick as M, openBlock as p, createElementBlock as L, createVNode as ce, isRef as fe, createSlots as pe, withCtx as he, renderSlot as me, createCommentVNode as D, createElementVNode as I, normalizeStyle as ve, createBlock as R, mergeProps as Te } from "vue";
+import { Chart as Y, ArcElement as ye, LineElement as Ce, BarElement as ge, PointElement as be, LineController as xe, BarController as Ae, PieController as ke, ScatterController as Se, CategoryScale as Ee, LinearScale as Le, Filler as De, Tooltip as Ie } from "chart.js";
+import { HoverVerticalLine as Re } from "./plugins/HoverVerticalLine.js";
+import { prepareTickLabel as Be, formatValue as Pe } from "./utils/utils.js";
+import { DEFAULT_TICK_COUNT as He, TOTALS_HELPER_KEY as K, LINE_DASH_STYLE as Ne, BASE_COLOR_KEY as U, CHART_PADDING as we, TICK_LABEL_FONT as G, TICKS_EXTRA_PADDING as Oe, HEADER_HEIGHT as Ve, COMPACT_HEADER_HEIGHT as Fe, HOVER_AREA_TRANSPARENCY as Me, HOVER_TRANSPARENCY as C, CHART_ITEM_TRANSPARENCY as Ye, INCOMPLETE_DATA_BAR_TRANSPARENCY as Ke, STACKED_LINE_TRANSPARENCY as Ue } from "./consts.js";
+import { ChartType as d, DateInterval as Ge, TooltipOrder as $, TrendDirection as $e } from "./types.js";
 import { useTooltipPosition as ze } from "./composables/useTooltipPosition.js";
-import We from "./ChartTooltip.vue.js";
+import { useChartThemeColors as We } from "./composables/useChartThemeColors.js";
+import { useThemeStore as Ze } from "../ThemeWrapper/ThemeStrore.js";
+import Xe from "./ChartTooltip.vue.js";
 import { hexColorToRgba as h } from "../../utils/color.js";
-import Ze from "./ChartHeader.vue.js";
-import { useMemoize as Xe, useVModel as je } from "@vueuse/core";
-import qe from "../emptyState/v4/EmptyStateV4.vue.js";
-import Je from "./ChartLoader.vue.js";
-import { DEFAULT_CHART_COLOR as Qe } from "./colorPalette.js";
-import { TotalType as _, calculateTotal as et } from "../../utils/totals.js";
-import { isNullOrUndefined as tt } from "../../utils/utils.js";
-import { storeOriginalDatasetColors as at, restoreOriginalDatasetColors as ot } from "./utils/highlightUtils.js";
-import { useTestIdAttrs as lt } from "../../utils/testIds.js";
-import { ChartTestIdModifiers as $ } from "../../testids/index.js";
-const rt = { class: "chart-plane-container" }, it = {
+import je from "./ChartHeader.vue.js";
+import { useMemoize as qe, useVModel as Je } from "@vueuse/core";
+import Qe from "../emptyState/v4/EmptyStateV4.vue.js";
+import _e from "./ChartLoader.vue.js";
+import { DEFAULT_CHART_COLOR as et } from "./colorPalette.js";
+import { TotalType as z, calculateTotal as tt } from "../../utils/totals.js";
+import { isNullOrUndefined as at } from "../../utils/utils.js";
+import { storeOriginalDatasetColors as ot, restoreOriginalDatasetColors as lt } from "./utils/highlightUtils.js";
+import { useTestIdAttrs as rt } from "../../utils/testIds.js";
+import { ChartTestIdModifiers as W } from "../../testids/index.js";
+const it = { class: "chart-plane-container" }, nt = {
   key: 0,
   class: "header-wrapper"
-}, nt = {
+}, st = {
   key: 1,
   class: "chart-plane"
-}, st = { class: "chart" }, Rt = /* @__PURE__ */ ne({
+}, dt = { class: "chart" }, Bt = /* @__PURE__ */ se({
   __name: "ChartPlane",
   props: {
     dataSets: { default: () => [] },
@@ -33,8 +35,8 @@ const rt = { class: "chart-plane-container" }, it = {
     parsing: { default: void 0 },
     xAxisFormat: { default: "string" },
     yAxisFormat: { default: "number" },
-    xAxisDateInterval: { default: _e.DAILY },
-    tickCount: { default: Pe },
+    xAxisDateInterval: { default: Ge.DAILY },
+    tickCount: { default: He },
     truncateTickLabels: { type: Boolean, default: !1 },
     header: { default: "" },
     headerTooltip: { default: null },
@@ -52,9 +54,9 @@ const rt = { class: "chart-plane-container" }, it = {
     compactHeader: { type: Boolean, default: !1 },
     noteText: { default: "" },
     tooltipRespectsTopEdge: { type: Boolean, default: !0 },
-    tooltipTotalType: { default: _.Total },
-    tooltipTotalCalcFn: { type: Function, default: et },
-    tooltipOrder: { default: G.Legend },
+    tooltipTotalType: { default: z.Total },
+    tooltipTotalCalcFn: { type: Function, default: tt },
+    tooltipOrder: { default: $.Legend },
     trendValue: { default: null },
     trendDirection: { default: $e.UP },
     trendTooltip: { default: null },
@@ -67,14 +69,14 @@ const rt = { class: "chart-plane-container" }, it = {
     testId: { default: "" }
   },
   emits: ["update:chartType"],
-  setup(o, { emit: z }) {
+  setup(o, { emit: Z }) {
     const e = o;
-    se((t) => ({
-      f01f0522: n(oe),
-      "77889a5a": o.height
+    de((t) => ({
+      "88f7e4ae": n(le),
+      ccb5f6d8: o.height
     }));
-    const W = Xe(Be);
-    V.register(
+    const X = qe(Be);
+    Y.register(
       ye,
       Ce,
       ge,
@@ -82,65 +84,67 @@ const rt = { class: "chart-plane-container" }, it = {
       xe,
       Ae,
       ke,
-      Ee,
       Se,
+      Ee,
       Le,
-      Re,
+      De,
       Ie,
-      De
+      Re
     );
-    const C = je(e, "chartType", z), Z = i(
+    const g = Je(e, "chartType", Z), j = i(
       () => e.withAnimation ? "" : "none"
-    ), T = E(null);
+    ), m = E(null), v = We(m), { theme: q } = Ze();
     let s = null;
-    const D = i(() => e.empty || e.dataSets.length === 0), c = i(() => !e.loading && !D.value), g = () => {
-      T.value && (s && s.destroy(), s = new V(T.value, P.value));
-    }, X = () => {
-      s && (s.data.datasets = O.value, s.options = P.value.options, s.update(Z.value));
+    const B = i(() => e.empty || e.dataSets.length === 0), c = i(() => !e.loading && !B.value), b = () => {
+      m.value && (s && s.destroy(), s = new Y(m.value, w.value));
+    }, P = () => {
+      s && (s.data.datasets = N.value, s.options = w.value.options, s.update(j.value));
     };
-    de(g), v(() => e.chartType, g), v(c, async (t) => {
-      t && (await ue(), g());
-    }), v(
+    ue(b), y(() => e.chartType, b), y(c, async (t) => {
+      t && (await M(), b());
+    }), y(
       [
         () => e.visibleIds,
         () => e.dataSets,
         () => e.valuePrefix,
         () => e.valueSuffix
       ],
-      X
-    );
-    const f = i(() => e.totalsChart), b = i(
+      P
+    ), y(q, async () => {
+      await M(), P();
+    });
+    const f = i(() => e.totalsChart), x = i(
       () => e.chartType === d.StackedLine || e.chartType === d.StackedBar || f.value
-    ), x = i(
+    ), A = i(
       () => e.chartType === d.Line || e.chartType === d.StackedLine
-    ), j = i(() => f.value && !e.parsing.xAxisKey ? { ...e.parsing, xAxisKey: F } : e.parsing), q = i(() => f.value ? e.dataSets.map((t) => ({
+    ), J = i(() => f.value && !e.parsing.xAxisKey ? { ...e.parsing, xAxisKey: K } : e.parsing), Q = i(() => f.value ? e.dataSets.map((t) => ({
       ...t,
       data: t.data.map((r) => ({
         ...r,
-        [F]: t.label
+        [K]: t.label
       }))
-    })) : e.dataSets), A = i(
-      () => q.value.filter((t) => e.visibleIds.includes(t.id))
-    ), J = (t) => e.colorsMap[t] || Qe, B = i(
-      () => A.value.length && A.value.every(
+    })) : e.dataSets), k = i(
+      () => Q.value.filter((t) => e.visibleIds.includes(t.id))
+    ), _ = (t) => e.colorsMap[t] || et, H = i(
+      () => k.value.length && k.value.every(
         (t) => t.data.length === 1
       )
-    ), Q = (t) => (r) => {
+    ), ee = (t) => (r) => {
       const a = r.chart.data.labels.length - 1;
-      let l = Ke;
-      return e.chartType === d.Bar && e.indicateIncompleteData && r.index === a ? l = Ue : e.chartType === d.StackedLine && (l = Ge), h(t, l);
-    }, O = i(() => A.value.map((t, r) => {
-      const a = J(t.id), l = b.value ? r !== 0 ? "-1" : "start" : void 0, m = e.indicateIncompleteData ? {
-        borderDash: (w) => {
-          if (w.p1DataIndex === w.chart.data.labels.length - 1)
+      let l = Ye;
+      return e.chartType === d.Bar && e.indicateIncompleteData && r.index === a ? l = Ke : e.chartType === d.StackedLine && (l = Ue), h(t, l);
+    }, N = i(() => k.value.map((t, r) => {
+      const a = _(t.id), l = x.value ? r !== 0 ? "-1" : "start" : void 0, T = e.indicateIncompleteData ? {
+        borderDash: (F) => {
+          if (F.p1DataIndex === F.chart.data.labels.length - 1)
             return Ne;
         }
-      } : void 0, k = Q(a);
+      } : void 0, S = ee(a);
       return {
         ...t,
         fill: l,
-        segment: m,
-        backgroundColor: k,
+        segment: T,
+        backgroundColor: S,
         borderColor: a,
         pointBackgroundColor: a,
         pointHoverBorderColor: a,
@@ -149,22 +153,22 @@ const rt = { class: "chart-plane-container" }, it = {
         // draw a bit outside the chart area
         icon: t.icon || null,
         iconType: t.iconType || "branded",
-        [M]: a
+        [U]: a
         // store base color for later use
       };
-    })), ee = i(
-      () => e.tooltipTotalType === _.Total ? "Total" : "Mean"
-    ), te = (t) => t.filter(
+    })), te = i(
+      () => e.tooltipTotalType === z.Total ? "Total" : "Mean"
+    ), ae = (t) => t.filter(
       (r) => !r.dataset.isTotal
-    ), P = i(() => ({
+    ), w = i(() => ({
       type: e.chartType == d.Bar || e.chartType === d.StackedBar ? "bar" : "line",
       // Chart Data
       data: {
-        datasets: O.value
+        datasets: N.value
       },
       // Chart Options
       options: {
-        parsing: j.value,
+        parsing: J.value,
         interaction: {
           intersect: !1,
           mode: f.value ? "point" : "index",
@@ -174,7 +178,7 @@ const rt = { class: "chart-plane-container" }, it = {
         plugins: {
           legend: { display: !1 },
           title: { display: !1 },
-          hoverVerticalLine: x.value,
+          hoverVerticalLine: A.value,
           // tooltip
           tooltip: {
             enabled: !1,
@@ -184,15 +188,15 @@ const rt = { class: "chart-plane-container" }, it = {
             },
             callbacks: {
               footer: (t) => {
-                const a = (e.tooltipExcludeTotalItem && t.length > 1 ? te(t) : t).map((m) => m.parsed.y || 0), l = e.tooltipTotalCalcFn(
+                const a = (e.tooltipExcludeTotalItem && t.length > 1 ? ae(t) : t).map((T) => T.parsed.y || 0), l = e.tooltipTotalCalcFn(
                   a,
                   e.tooltipTotalType
                 );
-                return [ee.value, String(l)];
+                return [te.value, String(l)];
               }
             },
             itemSort: (t, r) => {
-              if (e.tooltipOrder === G.YAxis) {
+              if (e.tooltipOrder === $.YAxis) {
                 const a = t.parsed.y || 0, l = r.parsed.y || 0;
                 return a === l ? 0 : a > l ? -1 : 1;
               }
@@ -204,7 +208,7 @@ const rt = { class: "chart-plane-container" }, it = {
         responsive: !0,
         maintainAspectRatio: !1,
         layout: {
-          padding: He
+          padding: we
         },
         // basic styles
         elements: {
@@ -213,12 +217,12 @@ const rt = { class: "chart-plane-container" }, it = {
             tension: 0
           },
           point: {
-            radius: B.value ? 3 : 1,
+            radius: H.value ? 3 : 1,
             hitRadius: 8,
             borderWidth: 0,
             hoverRadius: 4,
             hoverBorderWidth: 2,
-            pointHoverBackgroundColor: we
+            pointHoverBackgroundColor: v.value.pointBorderColor
           },
           bar: {
             borderRadius: 4
@@ -228,31 +232,31 @@ const rt = { class: "chart-plane-container" }, it = {
           // Horizontal Axis (X)
           x: {
             beginAtZero: !0,
-            offset: !x.value || B.value,
+            offset: !A.value || H.value,
             border: { display: !1 },
-            stacked: b.value,
+            stacked: x.value,
             // stack on top of each other
             // ticks
             ticks: {
-              color: Y,
-              font: K,
+              color: v.value.tickLabelColor,
+              font: G,
               padding: 4,
               maxRotation: 0,
               autoSkip: !e.truncateTickLabels,
               autoSkipPadding: 8,
               callback: function(t, r, a) {
-                const l = this.getLabelForValue(t), m = x.value && !f.value ? a.length - 1 : a.length, k = this.chart.scales?.x?.width / m - Ve;
-                return W({
+                const l = this.getLabelForValue(t), T = A.value && !f.value ? a.length - 1 : a.length, S = this.chart.scales?.x?.width / T - Oe;
+                return X({
                   label: l,
                   format: e.xAxisFormat,
-                  availableSpace: k,
+                  availableSpace: S,
                   truncate: e.truncateTickLabels
                 });
               }
             },
             // grid lines
             grid: {
-              color: U,
+              color: v.value.gridLineColor,
               drawOnChartArea: !1,
               drawTicks: !0,
               drawBorder: !1,
@@ -264,61 +268,61 @@ const rt = { class: "chart-plane-container" }, it = {
             beginAtZero: !0,
             border: { display: !1 },
             // hide left borderline
-            stacked: b.value,
+            stacked: x.value,
             // stack on top of each other
             // ticks
             ticks: {
-              color: Y,
-              font: K,
+              color: v.value.tickLabelColor,
+              font: G,
               count: e.tickCount + 1,
               padding: 8,
               min: 0,
-              callback: (t) => e.valuePrefix + Oe(t, e.yAxisFormat, { formatLowDigits: !0 }) + e.valueSuffix
+              callback: (t) => e.valuePrefix + Pe(t, e.yAxisFormat, { formatLowDigits: !0 }) + e.valueSuffix
             },
             // grid lines
             grid: {
-              color: U,
+              color: v.value.gridLineColor,
               drawOnChartArea: !0,
               drawTicks: !1
             }
           }
         }
       }
-    })), N = E(null), u = E(null), { position: H } = ze(
-      T,
-      N,
+    })), O = E(null), u = E(null), { position: V } = ze(
+      m,
+      O,
       u,
       e.tooltipRespectsTopEdge
-    ), ae = i(() => ({
-      left: `${H.value.left}px`,
-      top: `${H.value.top}px`,
+    ), oe = i(() => ({
+      left: `${V.value.left}px`,
+      top: `${V.value.top}px`,
       opacity: u.value?.opacity || 0
-    })), oe = i(
-      () => (e.compactHeader ? Me : Fe) + "px"
+    })), le = i(
+      () => (e.compactHeader ? Fe : Ve) + "px"
     );
-    v(
+    y(
       () => e.highlightedId,
       (t) => {
-        s && (tt(t) ? re() : le(t), s.update());
+        s && (at(t) ? ie() : re(t), s.update());
       }
     );
-    const le = (t) => {
+    const re = (t) => {
       (s?.data.datasets || []).forEach((a) => {
-        at(a);
-        const l = a[M];
+        ot(a);
+        const l = a[U];
         a.id === t ? e.chartType === d.StackedLine && (a.backgroundColor = h(
           l,
-          Ye
-        )) : (a.backgroundColor = h(l, y), a.borderColor = h(l, y), a.pointBackgroundColor = h(l, y), a.pointHoverBorderColor = h(l, y));
+          Me
+        )) : (a.backgroundColor = h(l, C), a.borderColor = h(l, C), a.pointBackgroundColor = h(l, C), a.pointHoverBorderColor = h(l, C));
       });
-    }, re = () => {
-      (s?.data.datasets || []).forEach(ot);
-    }, ie = lt(e.testId, $);
-    return (t, r) => (p(), S("div", rt, [
-      n(c) || o.keepSubheaderVisible ? (p(), S("div", it, [
-        ce(Ze, {
-          "chart-type": n(C),
-          "onUpdate:chart-type": r[0] || (r[0] = (a) => fe(C) ? C.value = a : null),
+    }, ie = () => {
+      (s?.data.datasets || []).forEach(lt);
+    }, ne = rt(e.testId, W);
+    return (t, r) => (p(), L("div", it, [
+      n(c) || o.keepSubheaderVisible ? (p(), L("div", nt, [
+        ce(je, {
+          "chart-type": n(g),
+          "onUpdate:chart-type": r[0] || (r[0] = (a) => fe(g) ? g.value = a : null),
           "type-switcher": n(c) ? o.typeSwitcher : !1,
           header: n(c) ? o.header : null,
           subheader: o.subheader,
@@ -339,21 +343,21 @@ const rt = { class: "chart-plane-container" }, it = {
             key: "0"
           } : void 0
         ]), 1032, ["chart-type", "type-switcher", "header", "subheader", "subheader-tooltip", "header-tooltip", "trend-tooltip", "compact", "trend-value", "trend-direction", "note-text", "test-id"])
-      ])) : L("", !0),
-      n(c) ? (p(), S("section", nt, [
-        R("div", st, [
-          R("canvas", {
+      ])) : D("", !0),
+      n(c) ? (p(), L("section", st, [
+        I("div", dt, [
+          I("canvas", {
             ref_key: "chartRef",
-            ref: T,
+            ref: m,
             class: "chart__canvas"
           }, null, 512),
-          R("div", {
+          I("div", {
             ref_key: "tooltipRef",
-            ref: N,
+            ref: O,
             class: "chart__tooltip",
-            style: Te(n(ae))
+            style: ve(n(oe))
           }, [
-            u.value ? (p(), I(We, {
+            u.value ? (p(), R(Xe, {
               key: 0,
               "totals-chart": n(f),
               title: String(u.value.title),
@@ -366,13 +370,13 @@ const rt = { class: "chart-plane-container" }, it = {
               "value-suffix": o.valueSuffix,
               "value-prefix": o.valuePrefix,
               "test-id": o.testId
-            }, null, 8, ["totals-chart", "title", "data-points", "x-axis-format", "y-axis-format", "x-axis-date-interval", "total-label", "total-value", "value-suffix", "value-prefix", "test-id"])) : L("", !0)
+            }, null, 8, ["totals-chart", "title", "data-points", "x-axis-format", "y-axis-format", "x-axis-date-interval", "total-label", "total-value", "value-suffix", "value-prefix", "test-id"])) : D("", !0)
           ], 4)
         ])
-      ])) : o.loading ? (p(), I(Je, ve({
+      ])) : o.loading ? (p(), R(_e, Te({
         key: 2,
         class: "chart-loading"
-      }, n(ie)[n($).LOADER]), null, 16)) : n(D) ? (p(), I(n(qe), {
+      }, n(ne)[n(W).LOADER]), null, 16)) : n(B) ? (p(), R(n(Qe), {
         key: 3,
         class: "chart-empty",
         variant: null,
@@ -380,10 +384,10 @@ const rt = { class: "chart-plane-container" }, it = {
         subtitle: o.noDataSubtitle,
         "icon-name": o.noDataIcon,
         "test-id": o.testId
-      }, null, 8, ["title", "subtitle", "icon-name", "test-id"])) : L("", !0)
+      }, null, 8, ["title", "subtitle", "icon-name", "test-id"])) : D("", !0)
     ]));
   }
 });
 export {
-  Rt as default
+  Bt as default
 };

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

@@ -0,0 +1,6 @@
+import { Ref } from 'vue';
+export declare const useChartThemeColors: (elRef: Ref<HTMLElement | null>) => import("vue").ComputedRef<{
+    gridLineColor: string;
+    tickLabelColor: string;
+    pointBorderColor: string;
+}>;

package/components/chart/composables/useChartThemeColors.js

@@ -0,0 +1,21 @@
+import { computed as i } from "vue";
+import { useThemeStore as c } from "../../ThemeWrapper/ThemeStrore.js";
+const r = {
+  grid: "#E4E4E4",
+  tick: "#646464",
+  point: "#fcfcfc"
+}, n = (t, o, e) => !t || typeof getComputedStyle > "u" ? e : getComputedStyle(t).getPropertyValue(o).trim() || e, p = (t) => {
+  const { theme: o } = c();
+  return i(() => {
+    o.value;
+    const e = t.value;
+    return {
+      gridLineColor: n(e, "--common-divider", r.grid),
+      tickLabelColor: n(e, "--text-secondary", r.tick),
+      pointBorderColor: n(e, "--background-paper", r.point)
+    };
+  });
+};
+export {
+  p as useChartThemeColors
+};

package/components/chart/consts.d.ts

@@ -1,7 +1,4 @@
 import { DropdownTypeOption, Font, ValueFormat } from './types';
-export declare const POINT_BORDER_COLOR = "#fcfcfc";
-export declare const GRID_LINE_COLOR = "#E4E4E4";
-export declare const TICK_LABEL_COLOR = "#646464";
 export declare const TICK_LABEL_FONT: Font;
 export declare const DEFAULT_TICK_COUNT = 4;
 export declare const DEFAULT_MIN_VISIBLE = 1;

package/components/chart/consts.js

@@ -1,51 +1,48 @@
 import { ChartType as _ } from "./types.js";
-const T = "#fcfcfc", t = "#E4E4E4", n = "#646464", A = {
+const T = {
   size: 12,
   weight: 400,
   family: "Inter"
-}, o = 4, R = 1, N = 5, O = [
+}, A = 4, t = 1, n = 5, o = [
   { id: _.Line, name: "Line" },
   { id: _.StackedLine, name: "Stack" },
   { id: _.Bar, name: "Bar" }
-], c = 76, L = 43, s = 312, I = 211, C = "__TOTALS_HELPER_KEY__", D = "___BASE_COLOR__", e = "Bidding", P = "ironSource", S = "UnityAds", i = "Meta", H = "Google", K = "Mintegral", B = "AppLovin", M = "InMobi", a = "DT Exchange", G = "Pangle", r = "Liftoff Monetize", F = 10, W = 70, Y = 10, f = 70, d = 40, g = [4, 4], U = {
+], N = 76, R = 43, O = 312, c = 211, s = "__TOTALS_HELPER_KEY__", I = "___BASE_COLOR__", L = "Bidding", e = "ironSource", C = "UnityAds", D = "Meta", P = "Google", S = "Mintegral", i = "AppLovin", H = "InMobi", K = "DT Exchange", M = "Pangle", a = "Liftoff Monetize", B = 10, G = 70, r = 10, F = 70, W = 40, Y = [4, 4], d = {
   left: 18,
   right: 18,
   top: 18,
   bottom: 11
-}, m = 6, p = "dateLong";
+}, g = 6, U = "dateLong";
 export {
-  D as BASE_COLOR_KEY,
-  e as BIDDING_PREFIX,
-  f as CHART_ITEM_TRANSPARENCY,
-  U as CHART_PADDING,
-  L as COMPACT_HEADER_HEIGHT,
-  s as DEFAULT_CHART_PLANE_HEIGHT,
-  N as DEFAULT_MAX_VISIBLE,
-  R as DEFAULT_MIN_VISIBLE,
-  o as DEFAULT_TICK_COUNT,
-  O as DROPDOWN_TYPE_OPTIONS,
-  t as GRID_LINE_COLOR,
-  c as HEADER_HEIGHT,
-  W as HOVER_AREA_TRANSPARENCY,
-  F as HOVER_TRANSPARENCY,
-  d as INCOMPLETE_DATA_BAR_TRANSPARENCY,
-  g as LINE_DASH_STYLE,
-  p as LONG_DATE_FORMAT,
-  I as MIN_PLANE_HEIGHT,
-  H as NETWORK_AD_MOB,
-  B as NETWORK_APPLOVIN,
-  a as NETWORK_DT_EXCHANGE,
-  i as NETWORK_FACEBOOK_META,
-  M as NETWORK_INMOBI,
-  P as NETWORK_IRON_SOURCE,
-  r as NETWORK_LIFTOFF,
-  K as NETWORK_MINTEGRAL,
-  G as NETWORK_PANGLE,
-  S as NETWORK_UNITY_ADS,
-  T as POINT_BORDER_COLOR,
-  Y as STACKED_LINE_TRANSPARENCY,
-  m as TICKS_EXTRA_PADDING,
-  n as TICK_LABEL_COLOR,
-  A as TICK_LABEL_FONT,
-  C as TOTALS_HELPER_KEY
+  I as BASE_COLOR_KEY,
+  L as BIDDING_PREFIX,
+  F as CHART_ITEM_TRANSPARENCY,
+  d as CHART_PADDING,
+  R as COMPACT_HEADER_HEIGHT,
+  O as DEFAULT_CHART_PLANE_HEIGHT,
+  n as DEFAULT_MAX_VISIBLE,
+  t as DEFAULT_MIN_VISIBLE,
+  A as DEFAULT_TICK_COUNT,
+  o as DROPDOWN_TYPE_OPTIONS,
+  N as HEADER_HEIGHT,
+  G as HOVER_AREA_TRANSPARENCY,
+  B as HOVER_TRANSPARENCY,
+  W as INCOMPLETE_DATA_BAR_TRANSPARENCY,
+  Y as LINE_DASH_STYLE,
+  U as LONG_DATE_FORMAT,
+  c as MIN_PLANE_HEIGHT,
+  P as NETWORK_AD_MOB,
+  i as NETWORK_APPLOVIN,
+  K as NETWORK_DT_EXCHANGE,
+  D as NETWORK_FACEBOOK_META,
+  H as NETWORK_INMOBI,
+  e as NETWORK_IRON_SOURCE,
+  a as NETWORK_LIFTOFF,
+  S as NETWORK_MINTEGRAL,
+  M as NETWORK_PANGLE,
+  C as NETWORK_UNITY_ADS,
+  r as STACKED_LINE_TRANSPARENCY,
+  g as TICKS_EXTRA_PADDING,
+  T as TICK_LABEL_FONT,
+  s as TOTALS_HELPER_KEY
 };

package/components/chart/plugins/HoverVerticalLine.js

@@ -1,12 +1,14 @@
-const i = {
+const c = {
   id: "hoverVerticalLine",
   beforeDraw: (t) => {
     if (t.getActiveElements().length) {
       const o = t.getActiveElements()[0], n = t.chartArea, e = t.ctx;
-      e.save(), e.beginPath(), e.moveTo(o.element.x, n.top), e.lineTo(o.element.x, n.bottom), e.lineWidth = 1, e.strokeStyle = "rgba(0,0,0, 0.1)", e.stroke(), e.restore();
+      e.save(), e.beginPath(), e.moveTo(o.element.x, n.top), e.lineTo(o.element.x, n.bottom), e.lineWidth = 1;
+      const i = t.ctx.canvas, r = typeof getComputedStyle < "u" && getComputedStyle(i).getPropertyValue("--common-divider").trim() || "rgba(0,0,0,0.1)";
+      e.strokeStyle = r, e.stroke(), e.restore();
     }
   }
 };
 export {
-  i as HoverVerticalLine
+  c as HoverVerticalLine
 };

package/components/checkbox/v3/Checkbox.vue.js

@@ -1,7 +1,7 @@
 import o from "./Checkbox.vue2.js";
 /* empty css               */import e from "../../../_virtual/_plugin-vue_export-helper.js";
-// import "../../../Checkbox.vue_vue_type_style_index_0_scoped_58dedb90_lang.css"; //*');
-const c = /* @__PURE__ */ e(o, [["__scopeId", "data-v-58dedb90"]]);
+// import "../../../Checkbox.vue_vue_type_style_index_0_scoped_d6d0f9ef_lang.css"; //*');
+const c = /* @__PURE__ */ e(o, [["__scopeId", "data-v-d6d0f9ef"]]);
 export {
   c as default
 };

package/components/checkbox/v3/Checkbox.vue2.js

@@ -1,4 +1,4 @@
- import "../../../Checkbox.vue_vue_type_style_index_0_scoped_58dedb90_lang.css"; import { defineComponent as z, openBlock as i, createElementBlock as B, unref as e, normalizeClass as E, createElementVNode as r, mergeProps as V, createVNode as S, withCtx as p, createBlock as s, createCommentVNode as c, renderSlot as F, createTextVNode as N, toDisplayString as g, pushScopeId as D, popScopeId as L } from "vue";
+ import "../../../Checkbox.vue_vue_type_style_index_0_scoped_d6d0f9ef_lang.css"; import { defineComponent as z, openBlock as i, createElementBlock as B, unref as e, normalizeClass as E, createElementVNode as r, mergeProps as V, createVNode as S, withCtx as p, createBlock as s, createCommentVNode as c, renderSlot as F, createTextVNode as N, toDisplayString as g, pushScopeId as D, popScopeId as L } from "vue";
 import "../../typography/Heading.vue.js";
 import P from "../../typography/Text.vue.js";
 import T from "../../icon/v3/Icon.vue.js";
@@ -7,7 +7,7 @@ import w from "./icons/checked.vue.js";
 import A from "./icons/indeterminate.vue.js";
 import { CheckboxTestIdModifiers as a } from "../../../testids/index.js";
 import { checkboxCommon as R } from "../common/Checkbox.common.js";
-const H = (t) => (D("data-v-58dedb90"), t = t(), L(), t), K = ["for", "data-testid"], M = { class: "checkboxes" }, U = ["id", "disabled", "checked", ".indeterminate", "data-testid"], W = /* @__PURE__ */ H(() => /* @__PURE__ */ r("span", { class: "checkbox__inner" }, null, -1)), _ = /* @__PURE__ */ z({
+const H = (t) => (D("data-v-d6d0f9ef"), t = t(), L(), t), K = ["for", "data-testid"], M = { class: "checkboxes" }, U = ["id", "disabled", "checked", ".indeterminate", "data-testid"], W = /* @__PURE__ */ H(() => /* @__PURE__ */ r("span", { class: "checkbox__inner" }, null, -1)), _ = /* @__PURE__ */ z({
   __name: "Checkbox",
   props: {
     isChecked: { type: Boolean },