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

package/components/appHeader/AppHeader.vue2.js

@@ -1,4 +1,4 @@
- import "../../AppHeader.vue_vue_type_style_index_0_scoped_538ccdc6_lang.css"; import { defineComponent as h, computed as o, openBlock as m, createElementBlock as p, normalizeClass as C, createElementVNode as n, mergeProps as r, unref as e, createVNode as i, withCtx as b, createTextVNode as v, toDisplayString as z, createCommentVNode as A } from "vue";
+ import "../../AppHeader.vue_vue_type_style_index_0_scoped_9202b5db_lang.css"; import { defineComponent as h, computed as o, openBlock as m, createElementBlock as p, normalizeClass as C, createElementVNode as n, mergeProps as r, unref as e, createVNode as i, withCtx as b, createTextVNode as v, toDisplayString as z, createCommentVNode as A } from "vue";
 import c from "../icon/v4/IconV4.vue.js";
 import "../icon/v4/IconFlag.vue.js";
 import T from "../typography/v4/Typography.vue.js";
@@ -17,11 +17,11 @@ const w = { class: "image-container" }, k = ["src", "alt"], B = ["data-platform"
     showAbIcon: { type: Boolean, default: !1 }
   },
   emits: ["copyToClipboard"],
-  setup(t, { emit: f }) {
-    const a = t, y = o(
+  setup(t, { emit: y }) {
+    const a = t, f = o(
       () => a.platform ? a.platform.toLowerCase() : ""
     ), u = o(
-      () => a.type === "normal" ? "24px" : "20px"
+      () => a.type === "normal" ? "24px" : "16px"
     ), x = o(
       () => a.type === "small" ? "18px" : null
     ), I = o(
@@ -37,12 +37,12 @@ const w = { class: "image-container" }, k = ["src", "alt"], B = ["data-platform"
         }, null, 8, k)
       ]),
       n("div", r({
-        class: "icon-container",
+        class: ["icon-container", `icon-container--${t.type}`],
         "data-platform": t.platform
       }, e(s)[e(l).APP_PLATFORM]), [
         i(e(c), {
           type: "branded",
-          name: e(y),
+          name: e(f),
           size: e(u)
         }, null, 8, ["name", "size"])
       ], 16, B),
@@ -65,7 +65,7 @@ const w = { class: "image-container" }, k = ["src", "alt"], B = ["data-platform"
           "icon-size": e(x),
           "tooltip-header": "Copy app key",
           "tooltip-text": t.appKey,
-          onCopy: d[0] || (d[0] = (V) => f("copyToClipboard"))
+          onCopy: d[0] || (d[0] = (V) => y("copyToClipboard"))
         }, null, 8, ["text", "hide-text-value", "test-id", "icon-size", "tooltip-text"])
       ]),
       t.showAbIcon ? (m(), p("div", r({

package/components/button/v4/ToggleButtonGroupAB.vue.js

@@ -1,7 +1,7 @@
 import o from "./ToggleButtonGroupAB.vue2.js";
 /* empty css                          */import t from "../../../_virtual/_plugin-vue_export-helper.js";
-// import "../../../ToggleButtonGroupAB.vue_vue_type_style_index_0_scoped_2076b5ab_lang.css"; //*');
-const s = /* @__PURE__ */ t(o, [["__scopeId", "data-v-2076b5ab"]]);
+// import "../../../ToggleButtonGroupAB.vue_vue_type_style_index_0_scoped_0fc9ddf5_lang.css"; //*');
+const s = /* @__PURE__ */ t(o, [["__scopeId", "data-v-0fc9ddf5"]]);
 export {
   s as default
 };

package/components/button/v4/ToggleButtonGroupAB.vue2.js

@@ -1,4 +1,4 @@
- import "../../../ToggleButtonGroupAB.vue_vue_type_style_index_0_scoped_2076b5ab_lang.css"; import { defineComponent as b, ref as u, computed as A, openBlock as f, createElementBlock as C, createVNode as n, mergeProps as s, unref as e, withCtx as t, createTextVNode as B, createBlock as y, createElementVNode as N, renderSlot as w, createCommentVNode as O } from "vue";
+ import "../../../ToggleButtonGroupAB.vue_vue_type_style_index_0_scoped_0fc9ddf5_lang.css"; import { defineComponent as b, ref as u, computed as A, openBlock as f, createElementBlock as C, createVNode as n, mergeProps as s, unref as e, withCtx as t, createTextVNode as B, createBlock as y, createElementVNode as N, renderSlot as w, createCommentVNode as O } from "vue";
 import c from "./ButtonV4.vue.js";
 import { useVModel as R } from "@vueuse/core";
 import x from "../../icon/v4/IconV4.vue.js";

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/components/checkbox/v4/CheckboxV4.vue.js

@@ -1,7 +1,7 @@
 import o from "./CheckboxV4.vue2.js";
 /* empty css                 */import e from "../../../_virtual/_plugin-vue_export-helper.js";
-// import "../../../CheckboxV4.vue_vue_type_style_index_0_scoped_af4ae3c3_lang.css"; //*');
-const t = /* @__PURE__ */ e(o, [["__scopeId", "data-v-af4ae3c3"]]);
+// import "../../../CheckboxV4.vue_vue_type_style_index_0_scoped_bbfd249c_lang.css"; //*');
+const t = /* @__PURE__ */ e(o, [["__scopeId", "data-v-bbfd249c"]]);
 export {
   t as default
 };

package/components/checkbox/v4/CheckboxV4.vue2.js

@@ -1,15 +1,12 @@
- import "../../../CheckboxV4.vue_vue_type_style_index_0_scoped_af4ae3c3_lang.css"; import { defineComponent as D, openBlock as o, createElementBlock as f, mergeProps as a, unref as e, createElementVNode as u, Fragment as B, createBlock as n, createCommentVNode as c, withCtx as V, renderSlot as $, createTextVNode as F, toDisplayString as g, pushScopeId as A, popScopeId as T } from "vue";
-import v from "../../typography/v4/Typography.vue.js";
+ import "../../../CheckboxV4.vue_vue_type_style_index_0_scoped_bbfd249c_lang.css"; import { defineComponent as S, openBlock as l, createElementBlock as V, mergeProps as a, unref as e, createElementVNode as r, createBlock as i, createCommentVNode as n, normalizeClass as I, withCtx as $, renderSlot as A, createTextVNode as F, toDisplayString as T, pushScopeId as g, popScopeId as v } from "vue";
+import D from "../../typography/v4/Typography.vue.js";
 import L from "./icons/UncheckedState.vue.js";
 import N from "./icons/CheckedState.vue.js";
 import P from "./icons/IndeterminateState.vue.js";
-import w from "./icons/UncheckedDisabledState.vue.js";
-import H from "./icons/CheckedDisabledState.vue.js";
-import K from "./icons/IndeterminateDisabledState.vue.js";
-import { CheckboxTestIdModifiers as i } from "../../../testids/index.js";
-import { checkboxCommon as R } from "../common/Checkbox.common.js";
-import { useTestIdAttrs as U } from "../../../utils/testIds.js";
-const M = (t) => (A("data-v-af4ae3c3"), t = t(), T(), t), W = ["for"], j = { class: "checkboxes" }, q = ["id", "disabled", "checked", ".indeterminate"], z = /* @__PURE__ */ M(() => /* @__PURE__ */ u("span", { class: "checkbox__inner" }, null, -1)), G = { class: "states" }, le = /* @__PURE__ */ D({
+import { CheckboxTestIdModifiers as d } from "../../../testids/index.js";
+import { checkboxCommon as w } from "../common/Checkbox.common.js";
+import { useTestIdAttrs as R } from "../../../utils/testIds.js";
+const z = (t) => (g("data-v-bbfd249c"), t = t(), v(), t), H = ["for"], K = { class: "checkboxes" }, M = ["id", "disabled", "checked", ".indeterminate"], U = /* @__PURE__ */ z(() => /* @__PURE__ */ r("span", { class: "checkbox__inner" }, null, -1)), W = { class: "states" }, Z = /* @__PURE__ */ S({
   __name: "CheckboxV4",
   props: {
     isChecked: { type: Boolean },
@@ -21,91 +18,74 @@ const M = (t) => (A("data-v-af4ae3c3"), t = t(), T(), t), W = ["for"], j = { cla
   },
   emits: ["update:isChecked", "click"],
   setup(t, { emit: b }) {
-    const h = t, {
-      id: p,
-      checkbox: E,
-      isFocusVisible: S,
-      handleFocus: y,
-      handleBlur: C,
-      indeterminate: d,
-      checked: m,
-      unchecked: I,
-      updateValue: x
-    } = R(h, b), r = U(h.testId, i);
-    return (k, l) => (o(), f("label", a({
-      for: e(p),
+    const k = t, {
+      id: f,
+      checkbox: x,
+      isFocusVisible: B,
+      handleFocus: h,
+      handleBlur: p,
+      indeterminate: u,
+      checked: y,
+      unchecked: E,
+      updateValue: C
+    } = w(k, b), c = R(k.testId, d);
+    return (m, o) => (l(), V("label", a({
+      for: e(f),
       class: [{
-        "focus-visible": e(S),
+        "focus-visible": e(B),
         disabled: t.disabled
       }, "checkbox"]
-    }, e(r)[e(i).WRAPPER]), [
-      u("span", j, [
-        u("input", a({ ...k.$attrs, ...e(r)[e(i).FIELD] }, {
-          id: e(p),
-          ref: e(E),
+    }, e(c)[e(d).WRAPPER]), [
+      r("span", K, [
+        r("input", a({ ...m.$attrs, ...e(c)[e(d).FIELD] }, {
+          id: e(f),
+          ref: e(x),
           disabled: t.disabled,
-          checked: e(m),
+          checked: e(y),
           class: "input",
-          ".indeterminate": e(d),
+          ".indeterminate": e(u),
           type: "checkbox",
-          onBlur: l[0] || (l[0] = //@ts-ignore
-          (...s) => e(C) && e(C)(...s)),
-          onFocus: l[1] || (l[1] = //@ts-ignore
-          (...s) => e(y) && e(y)(...s)),
-          onClick: l[2] || (l[2] = (s) => b("click", s)),
-          onInput: l[3] || (l[3] = //@ts-ignore
-          (...s) => e(x) && e(x)(...s))
-        }), null, 16, q),
-        z,
-        u("span", G, [
-          t.disabled ? c("", !0) : (o(), f(B, { key: 0 }, [
-            e(m) ? (o(), n(N, a({
-              key: 0,
-              class: "icon checked",
-              color: t.color
-            }, e(r)[e(i).CHECKED]), null, 16, ["color"])) : c("", !0),
-            e(d) ? (o(), n(P, {
-              key: 1,
-              color: t.color,
-              class: "icon indeterminate"
-            }, null, 8, ["color"])) : c("", !0),
-            e(I) && !e(d) ? (o(), n(L, {
-              key: 2,
-              class: "icon unchecked"
-            })) : c("", !0)
-          ], 64)),
-          t.disabled ? (o(), f(B, { key: 1 }, [
-            e(m) ? (o(), n(H, a({
-              key: 0,
-              color: t.color,
-              class: "icon checked"
-            }, e(r)[e(i).CHECKED]), null, 16, ["color"])) : c("", !0),
-            e(d) ? (o(), n(K, {
-              key: 1,
-              class: "icon indeterminate"
-            })) : c("", !0),
-            e(I) && !e(d) ? (o(), n(w, {
-              key: 2,
-              class: "icon unchecked"
-            })) : c("", !0)
-          ], 64)) : c("", !0)
+          onBlur: o[0] || (o[0] = //@ts-ignore
+          (...s) => e(p) && e(p)(...s)),
+          onFocus: o[1] || (o[1] = //@ts-ignore
+          (...s) => e(h) && e(h)(...s)),
+          onClick: o[2] || (o[2] = (s) => b("click", s)),
+          onInput: o[3] || (o[3] = //@ts-ignore
+          (...s) => e(C) && e(C)(...s))
+        }), null, 16, M),
+        U,
+        r("span", W, [
+          e(y) ? (l(), i(N, a({
+            key: 0,
+            class: ["icon checked", { disabled: t.disabled }],
+            color: t.color
+          }, e(c)[e(d).CHECKED]), null, 16, ["class", "color"])) : n("", !0),
+          e(u) ? (l(), i(P, {
+            key: 1,
+            color: t.color,
+            class: I(["icon indeterminate", { disabled: t.disabled }])
+          }, null, 8, ["color", "class"])) : n("", !0),
+          e(E) && !e(u) ? (l(), i(L, {
+            key: 2,
+            class: I(["icon unchecked", { disabled: t.disabled }])
+          }, null, 8, ["class"])) : n("", !0)
         ])
       ]),
-      t.label || k.$slots.default ? (o(), n(e(v), a({
+      t.label || m.$slots.default ? (l(), i(e(D), a({
         key: 0,
         variant: "body2",
         class: "checkbox-label"
-      }, e(r)[e(i).LABEL]), {
-        default: V(() => [
-          $(k.$slots, "default", {}, () => [
-            F(g(t.label), 1)
+      }, e(c)[e(d).LABEL]), {
+        default: $(() => [
+          A(m.$slots, "default", {}, () => [
+            F(T(t.label), 1)
           ], !0)
         ]),
         _: 3
-      }, 16)) : c("", !0)
-    ], 16, W));
+      }, 16)) : n("", !0)
+    ], 16, H));
   }
 });
 export {
-  le as default
+  Z as default
 };

package/components/checkbox/v4/icons/CheckedState.vue.js

@@ -1,29 +1,29 @@
-import { defineComponent as o, openBlock as r, createElementBlock as l, createElementVNode as t, unref as n } from "vue";
-import { darkerColor as c } from "../../../../utils/color.js";
-const i = {
+import { defineComponent as o, openBlock as r, createElementBlock as n, createElementVNode as t, unref as l } from "vue";
+import { darkerColor as i } from "../../../../utils/color.js";
+const c = {
   xmlns: "http://www.w3.org/2000/svg",
   viewBox: "0 0 16 16",
   fill: "none"
-}, s = ["fill"], d = ["stroke"], h = /* @__PURE__ */ t("path", {
+}, s = ["fill"], a = ["stroke"], d = /* @__PURE__ */ t("path", {
   d: "M12.125 5.375L6.875 10.625L4.25 8",
   stroke: "white",
   "stroke-width": "1.5",
   "stroke-linecap": "round",
   "stroke-linejoin": "round"
-}, null, -1), m = /* @__PURE__ */ o({
+}, null, -1), f = /* @__PURE__ */ o({
   __name: "CheckedState",
   props: {
     color: { default: null }
   },
   setup(e) {
-    return (a, u) => (r(), l("svg", i, [
+    return (h, m) => (r(), n("svg", c, [
       t("rect", {
         x: "0.5",
         y: "0.5",
         width: "15",
         height: "15",
         rx: "3.5",
-        fill: e.color || "#0091FF"
+        fill: e.color || "var(--primary-main)"
       }, null, 8, s),
       t("rect", {
         x: "0.5",
@@ -31,12 +31,12 @@ const i = {
         width: "15",
         height: "15",
         rx: "3.5",
-        stroke: e.color ? n(c)(e.color) : "#0880EA"
-      }, null, 8, d),
-      h
+        stroke: e.color ? l(i)(e.color) : "var(--primary-dark)"
+      }, null, 8, a),
+      d
     ]));
   }
 });
 export {
-  m as default
+  f as default
 };