@ironsource/shared-ui 2.2.0-rc.0 → 2.2.0-rc.10

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/index.d.ts

@@ -27,6 +27,7 @@ declare const ChartTypes: () => ({
             trendTooltip: any;
             subheader: string;
             subheaderTooltip: any;
+            headerTooltip: string;
             trendValue: string | number;
             trendDirection: TrendDirection;
             noteText: string;
@@ -146,6 +147,10 @@ declare const ChartTypes: () => ({
                 }>;
                 default: any;
             };
+            headerTooltip: {
+                type: import("vue").PropType<string>;
+                default: any;
+            };
             trendValue: {
                 type: import("vue").PropType<string | number>;
                 default: any;
@@ -239,7 +244,7 @@ declare const ChartTypes: () => ({
             "onUpdate:visibleIds"?: (visibleIds: unknown[]) => any;
             "onUpdate:sortSelected"?: (sortOption: unknown) => any;
             "onUpdate:chartType"?: (chartType: ChartType) => any;
-        } & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, "header" | "testId" | "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" | "indicateIncompleteData" | "tooltipExcludeTotalItem" | "fullHeight" | "fullHeightBottomSpacing" | "withSettingsHeader" | "extraCharts" | "colorVariant">;
+        } & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, "header" | "testId" | "loading" | "visibleIds" | "minVisible" | "maxVisible" | "maxLimitTooltipText" | "sortSelected" | "sortOptions" | "sortOptionNameKey" | "chartType" | "hideLegend" | "xAxisFormat" | "xAxisDateInterval" | "totalsChart" | "parsing" | "yAxisFormat" | "valueSuffix" | "valuePrefix" | "trendTooltip" | "subheader" | "subheaderTooltip" | "headerTooltip" | "trendValue" | "trendDirection" | "noteText" | "dataSets" | "tickCount" | "truncateTickLabels" | "keepSubheaderVisible" | "empty" | "noDataIcon" | "noDataTitle" | "noDataSubtitle" | "withAnimation" | "tooltipTotalType" | "tooltipTotalCalcFn" | "tooltipOrder" | "indicateIncompleteData" | "tooltipExcludeTotalItem" | "fullHeight" | "fullHeightBottomSpacing" | "withSettingsHeader" | "extraCharts" | "colorVariant">;
         $attrs: {
             [x: string]: unknown;
         };
@@ -350,6 +355,10 @@ declare const ChartTypes: () => ({
                 }>;
                 default: any;
             };
+            headerTooltip: {
+                type: import("vue").PropType<string>;
+                default: any;
+            };
             trendValue: {
                 type: import("vue").PropType<string | number>;
                 default: any;
@@ -470,6 +479,7 @@ declare const ChartTypes: () => ({
             trendTooltip: any;
             subheader: string;
             subheaderTooltip: any;
+            headerTooltip: string;
             trendValue: string | number;
             trendDirection: TrendDirection;
             noteText: string;
@@ -609,6 +619,10 @@ declare const ChartTypes: () => ({
             }>;
             default: any;
         };
+        headerTooltip: {
+            type: import("vue").PropType<string>;
+            default: any;
+        };
         trendValue: {
             type: import("vue").PropType<string | number>;
             default: any;
@@ -803,6 +817,10 @@ declare const ChartTypes: () => ({
         }>;
         default: any;
     };
+    headerTooltip: {
+        type: import("vue").PropType<string>;
+        default: any;
+    };
     trendValue: {
         type: import("vue").PropType<string | number>;
         default: any;
@@ -923,6 +941,7 @@ declare const ChartTypes: () => ({
     trendTooltip: any;
     subheader: string;
     subheaderTooltip: any;
+    headerTooltip: string;
     trendValue: string | number;
     trendDirection: TrendDirection;
     noteText: string;

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_88525d86_lang.css"; //*');
+const c = /* @__PURE__ */ e(o, [["__scopeId", "data-v-88525d86"]]);
 export {
-  t as default
+  c 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_88525d86_lang.css"; import { defineComponent as V, openBlock as l, createElementBlock as $, mergeProps as i, unref as e, createElementVNode as r, createBlock as a, createCommentVNode as n, normalizeClass as I, withCtx as S, 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-88525d86"), t = t(), v(), t), H = ["for"], K = { class: "checkboxes" }, M = ["id", "disabled", "checked", ".indeterminate"], W = /* @__PURE__ */ z(() => /* @__PURE__ */ r("span", { class: "checkbox__inner" }, null, -1)), j = { class: "states" }, Z = /* @__PURE__ */ V({
   __name: "CheckboxV4",
   props: {
     isChecked: { type: Boolean },
@@ -21,91 +18,75 @@ 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(), $("label", i({
+      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", i({ ...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),
+        W,
+        r("span", j, [
+          e(y) ? (l(), a(N, i({
+            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(), a(P, {
+            key: 1,
+            color: t.color,
+            class: I(["icon indeterminate", { disabled: t.disabled }])
+          }, null, 8, ["color", "class"])) : n("", !0),
+          e(E) && !e(u) ? (l(), a(L, {
+            key: 2,
+            class: I(["icon unchecked", { disabled: t.disabled }]),
+            disabled: t.disabled
+          }, null, 8, ["class", "disabled"])) : n("", !0)
         ])
       ]),
-      t.label || k.$slots.default ? (o(), n(e(v), a({
+      t.label || m.$slots.default ? (l(), a(e(D), i({
         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: S(() => [
+          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
 };

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

@@ -1,10 +1,10 @@
-import { defineComponent as o, openBlock as r, createElementBlock as l, createElementVNode as t, unref as n } from "vue";
+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("line", {
+}, s = ["fill"], a = ["stroke"], d = /* @__PURE__ */ t("line", {
   x1: "4.75",
   y1: "8.25",
   x2: "11.25",
@@ -18,14 +18,14 @@ const c = {
     color: { default: null }
   },
   setup(e) {
-    return (a, m) => (r(), l("svg", c, [
+    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",
@@ -33,9 +33,9 @@ const c = {
         width: "15",
         height: "15",
         rx: "3.5",
-        stroke: e.color ? n(i)(e.color) : "#0880EA"
-      }, null, 8, d),
-      h
+        stroke: e.color ? l(i)(e.color) : "var(--primary-dark)"
+      }, null, 8, a),
+      d
     ]));
   }
 });

package/components/checkbox/v4/icons/UncheckedState.vue.d.ts

@@ -1,2 +1,29 @@
-declare const _default: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{}>>, {}>;
+declare const _default: import("vue").DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
+    disabled?: boolean;
+}>, {
+    disabled: boolean;
+}>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
+    disabled?: boolean;
+}>, {
+    disabled: boolean;
+}>>>, {
+    disabled: boolean;
+}>;
 export default _default;
+type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
+type __VLS_TypePropsToRuntimeProps<T> = {
+    [K in keyof T]-?: {} extends Pick<T, K> ? {
+        type: import('vue').PropType<__VLS_NonUndefinedable<T[K]>>;
+    } : {
+        type: import('vue').PropType<T[K]>;
+        required: true;
+    };
+};
+type __VLS_WithDefaults<P, D> = {
+    [K in keyof Pick<P, keyof P>]: K extends keyof D ? __VLS_Prettify<P[K] & {
+        default: D[K];
+    }> : P[K];
+};
+type __VLS_Prettify<T> = {
+    [K in keyof T]: T[K];
+} & {};

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

@@ -1,32 +1,34 @@
-import { openBlock as e, createElementBlock as o, createElementVNode as t } from "vue";
-import c from "../../../../_virtual/_plugin-vue_export-helper.js";
-const r = {}, n = {
+import { defineComponent as o, openBlock as n, createElementBlock as l, createElementVNode as e } from "vue";
+const r = {
   viewBox: "0 0 16 16",
   fill: "none",
   xmlns: "http://www.w3.org/2000/svg"
-}, l = /* @__PURE__ */ t("rect", {
-  x: "0.5",
-  y: "0.5",
-  width: "15",
-  height: "15",
-  rx: "3.5",
-  fill: "black",
-  "fill-opacity": "0.05"
-}, null, -1), s = /* @__PURE__ */ t("rect", {
+}, c = ["fill"], s = /* @__PURE__ */ e("rect", {
   x: "0.5",
   y: "0.5",
   width: "15",
   height: "15",
   rx: "3.5",
   stroke: "currentColor"
-}, null, -1), i = [
-  l,
-  s
-];
-function _(h, d) {
-  return e(), o("svg", n, i);
-}
-const x = /* @__PURE__ */ c(r, [["render", _]]);
+}, null, -1), h = /* @__PURE__ */ o({
+  __name: "UncheckedState",
+  props: {
+    disabled: { type: Boolean, default: !1 }
+  },
+  setup(t) {
+    return (a, i) => (n(), l("svg", r, [
+      e("rect", {
+        x: "0.5",
+        y: "0.5",
+        width: "15",
+        height: "15",
+        rx: "3.5",
+        fill: t.disabled ? "var(--action-disabled-background)" : "var(--background-inset)"
+      }, null, 8, c),
+      s
+    ]));
+  }
+});
 export {
-  x as default
+  h as default
 };

package/components/checkbox/v4/icons/UncheckedState.vue2.js

@@ -0,0 +1,4 @@
+import f from "./UncheckedState.vue.js";
+export {
+  f as default
+};

package/components/chip/v4/ChipV4.vue.js

@@ -1,7 +1,7 @@
 import o from "./ChipV4.vue2.js";
-/* empty css             */import e from "../../../_virtual/_plugin-vue_export-helper.js";
-// import "../../../ChipV4.vue_vue_type_style_index_0_scoped_a4d3a12e_lang.css"; //*');
-const t = /* @__PURE__ */ e(o, [["__scopeId", "data-v-a4d3a12e"]]);
+/* empty css             */import _ from "../../../_virtual/_plugin-vue_export-helper.js";
+// import "../../../ChipV4.vue_vue_type_style_index_0_scoped_a221c649_lang.css"; //*');
+const t = /* @__PURE__ */ _(o, [["__scopeId", "data-v-a221c649"]]);
 export {
   t as default
 };

package/components/chip/v4/ChipV4.vue2.js

@@ -1,4 +1,4 @@
- import "../../../ChipV4.vue_vue_type_style_index_0_scoped_a4d3a12e_lang.css"; import { defineComponent as i, openBlock as o, createElementBlock as d, mergeProps as s, unref as t, renderSlot as c, createVNode as f, withCtx as n, createTextVNode as p, toDisplayString as u } from "vue";
+ import "../../../ChipV4.vue_vue_type_style_index_0_scoped_a221c649_lang.css"; import { defineComponent as i, openBlock as o, createElementBlock as d, mergeProps as s, unref as t, renderSlot as c, createVNode as f, withCtx as n, createTextVNode as p, toDisplayString as u } from "vue";
 import { ChipTestIdModifiers as a } from "../../../testids/index.js";
 import { useTestIdAttrs as m } from "../../../utils/testIds.js";
 import h from "../../typography/v4/Typography.vue.js";