@m4l/widgets 0.0.3-beta-add-widget-serieschart.0 → 0.0.3

package/charts/SeriesChart/SeriesChart.d.ts

@@ -5,6 +5,6 @@ import { SeriesChartProps } from './types';
  * @param _size - Component size (reserved for future use)
  * @returns SeriesChart component
  */
-export declare function SeriesChart({ values, size: _size }: SeriesChartProps): import("@emotion/react/jsx-runtime").JSX.Element;
+export declare function SeriesChart({ values, scrollable }: SeriesChartProps): import("@emotion/react/jsx-runtime").JSX.Element;
 export default SeriesChart;
 //# sourceMappingURL=SeriesChart.d.ts.map

package/charts/SeriesChart/SeriesChart.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SeriesChart.d.ts","sourceRoot":"","sources":["../../../../../../packages/widgets/src/charts/SeriesChart/SeriesChart.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,KAAK,gBAAgB,EAAE,MAAM,SAAS,CAAC;AAShD;;;;;GAKG;AACH,wBAAgB,WAAW,CAAC,EAAE,MAAM,EAAE,IAAI,EAAE,KAAK,EAAE,EAAE,gBAAgB,oDAsBpE;AAED,eAAe,WAAW,CAAC"}
+{"version":3,"file":"SeriesChart.d.ts","sourceRoot":"","sources":["../../../../../../packages/widgets/src/charts/SeriesChart/SeriesChart.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,KAAK,gBAAgB,EAAE,MAAM,SAAS,CAAC;AAShD;;;;;GAKG;AACH,wBAAgB,WAAW,CAAC,EAAE,MAAM,EAAE,UAAkB,EAAE,EAAE,gBAAgB,oDAsB3E;AAED,eAAe,WAAW,CAAC"}

package/charts/SeriesChart/SeriesChart.js

@@ -1,17 +1,17 @@
 import { jsx as e } from "@emotion/react/jsx-runtime";
 import s from "echarts-for-react";
-import { useRef as m, useMemo as a } from "react";
-import { SeriesChartRootStyled as f, ChartContainerStyled as h } from "./slots/SeriesChartSlots.js";
-import { useChartResize as p } from "./hooks/useChartResize.js";
+import { useRef as f, useMemo as a } from "react";
+import { SeriesChartRootStyled as h, ChartContainerStyled as p } from "./slots/SeriesChartSlots.js";
+import { useChartResize as u } from "./hooks/useChartResize.js";
 import { useTheme as c } from "@mui/material";
-import { generateOptions as l } from "./helpers/options.js";
-function x({ values: t, size: u }) {
-  const r = m(null), o = c(), i = a(() => l(t, o), [t, o]), n = p(r);
-  return /* @__PURE__ */ e(f, { children: /* @__PURE__ */ e(h, { ref: n, children: /* @__PURE__ */ e(
+import { generateOptions as d } from "./helpers/options.js";
+function z({ values: t, scrollable: r = !1 }) {
+  const o = f(null), i = c(), n = a(() => d(t, i, r), [t, i, r]), m = u(o);
+  return /* @__PURE__ */ e(h, { children: /* @__PURE__ */ e(p, { ref: m, children: /* @__PURE__ */ e(
     s,
     {
-      ref: r,
-      option: i,
+      ref: o,
+      option: n,
       style: { height: "100%", width: "100%" },
       notMerge: !0,
       lazyUpdate: !0
@@ -19,6 +19,6 @@ function x({ values: t, size: u }) {
   ) }) });
 }
 export {
-  x as SeriesChart,
-  x as default
+  z as SeriesChart,
+  z as default
 };

package/charts/SeriesChart/helpers/options.d.ts

@@ -3,5 +3,5 @@ import { SeriesChartProps } from '../types';
 /**
  * Builds ECharts option config for the series chart from data and theme.
  */
-export declare function generateOptions(values: SeriesChartProps['values'], theme: Theme): any;
+export declare function generateOptions(values: SeriesChartProps['values'], theme: Theme, scrollable: boolean): any;
 //# sourceMappingURL=options.d.ts.map

package/charts/SeriesChart/helpers/options.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"options.d.ts","sourceRoot":"","sources":["../../../../../../../packages/widgets/src/charts/SeriesChart/helpers/options.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,sBAAsB,CAAC;AAClD,OAAO,EAAE,gBAAgB,EAAE,MAAM,UAAU,CAAC;AAK5C;;GAEG;AACH,wBAAgB,eAAe,CAAC,MAAM,EAAE,gBAAgB,CAAC,QAAQ,CAAC,EAAE,KAAK,EAAE,KAAK,GAAG,GAAG,CA8OrF"}
+{"version":3,"file":"options.d.ts","sourceRoot":"","sources":["../../../../../../../packages/widgets/src/charts/SeriesChart/helpers/options.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,sBAAsB,CAAC;AAClD,OAAO,EAAE,gBAAgB,EAAE,MAAM,UAAU,CAAC;AAK5C;;GAEG;AACH,wBAAgB,eAAe,CAAC,MAAM,EAAE,gBAAgB,CAAC,QAAQ,CAAC,EAAE,KAAK,EAAE,KAAK,EAAE,UAAU,EAAE,OAAO,GAAG,GAAG,CA4O1G"}

package/charts/SeriesChart/helpers/options.js

@@ -1,8 +1,15 @@
-import { getColorHexFromVar as c, getColorHexFromToken as l } from "../../../tools/color.js";
-import * as b from "echarts";
-import { remapTooltipFormatter as h } from "./tooltipFormatter.js";
-function C(o, a) {
-  const i = c(a.vars?.palette?.text?.primary ?? "#323b3b"), e = c(a.vars?.palette?.text?.disabled ?? "#aaadb1"), s = c(a.vars?.palette?.background?.default ?? "#FFFFFF"), p = c(a.vars?.palette?.text?.contrastText ?? "#FFFFFF"), f = c(a.vars?.palette?.background?.neutral ?? "#F1F5F9"), y = m(o.values[0]);
+import { getColorHexFromVar as i, getColorHexFromToken as n } from "../../../tools/color.js";
+import * as f from "echarts";
+import { remapTooltipFormatter as y } from "./tooltipFormatter.js";
+function m(o, r, d) {
+  const e = {
+    textPrimaryColor: i(r.vars?.palette?.text?.primary),
+    textDisabledColor: i(r.vars?.palette?.text?.disabled),
+    themeBackgroundColor: i(r.vars?.palette?.background?.default),
+    contrastTextColor: i(r.vars?.palette?.text?.contrastText),
+    backgroundNeutralColor: i(r.vars?.palette?.background?.neutral),
+    contrastDefaultColor: i(r.vars?.palette?.background?.contrastDefault)
+  }, c = g(o.values[0]);
   return {
     baseOption: {
       /**
@@ -15,25 +22,25 @@ function C(o, a) {
         shadowColor: "transparent",
         borderWidth: 0,
         textStyle: {
-          color: p,
+          color: e.contrastTextColor,
           fontFamily: "Inter",
           fontSize: 13,
           fontWeight: 700
         },
-        formatter: (t) => h(t, o),
+        formatter: (t) => y(t, o, e),
         axisPointer: {
           type: "cross",
           lineStyle: {
-            color: e,
+            color: e.textDisabledColor,
             type: "solid"
           },
           crossStyle: {
-            color: e,
+            color: e.textDisabledColor,
             type: "solid"
           },
           label: {
-            backgroundColor: f,
-            color: i,
+            backgroundColor: e.backgroundNeutralColor,
+            color: e.textPrimaryColor,
             fontFamily: "Inter",
             fontSize: 13,
             fontWeight: 400,
@@ -44,21 +51,16 @@ function C(o, a) {
       /**
        * Data zoom configuration.
        */
-      dataZoom: [
-        // {
-        //   type: 'slider',
-        //   show: true,
-        //   realtime: true,
-        //   start: 0,
-        //   end: Math.max(1, Math.round(100 * 3 / values.values.length)),
-        //   height: 15,
-        //   bottom: 5,
-        //   xAxisIndex: [0, 1],
-        //   borderColor: 'transparent',
-        //   // backgroundColor: themeContrastColor,
-        //   // fillerColor: 'rgba(39, 176, 37, 0.2)',
-        //   showDetail: false,
-        // },
+      dataZoom: d ? [
+        {
+          type: "slider",
+          show: !0,
+          realtime: !0,
+          start: 0,
+          end: Math.max(1, Math.round(300 / o.values.length)),
+          height: 15,
+          bottom: 5
+        },
         {
           type: "inside",
           realtime: !0,
@@ -66,7 +68,7 @@ function C(o, a) {
           end: 70,
           xAxisIndex: [0, 1]
         }
-      ],
+      ] : [{ show: !1 }],
       /**
        * Legend configuration.
        */
@@ -81,17 +83,17 @@ function C(o, a) {
         itemHeight: 11,
         textStyle: {
           fontSize: 12,
-          color: i
+          color: e.textPrimaryColor
         },
         data: o.series.map((t) => t.title)
       },
       /**
        * X-axis configuration.
        */
-      xAxis: o.xAxis.map((t, r) => ({
+      xAxis: o.xAxis.map((t, a) => ({
         type: "category",
-        data: o.values.map((n) => n[t.field]),
-        offset: r > 1 ? (r - 1) * 20 : 0,
+        data: o.values.map((l) => l[t.field]),
+        offset: a > 1 ? (a - 1) * 20 : 0,
         axisLine: { show: !1 },
         axisTick: { show: !1 },
         axisLabel: {
@@ -101,32 +103,32 @@ function C(o, a) {
           fontSize: 11,
           fontWeight: 500,
           hideOverlap: !0,
-          color: i
+          color: e.textPrimaryColor
         }
       })),
       /**
        * Y-axis configuration.
        */
-      yAxis: o.yAxis.map((t, r) => {
-        const n = o.series.find((d) => d.yAxisId === t.id), x = y[n?.field || ""] || "", g = l(n?.pallet_color || "", "contained", "backgroundColorTone");
+      yAxis: o.yAxis.map((t, a) => {
+        const l = o.series.find((s) => s.yAxisId === t.id), p = c[l?.field || ""] || "", x = n(l?.pallet_color || "", "contained", "backgroundColorTone");
         return {
           type: "value",
-          name: t.title + " (" + x + ")",
-          position: r === 0 ? "left" : "right",
-          offset: r > 1 ? (r - 1) * 70 : 0,
+          name: t.title + " (" + p + ")",
+          position: a === 0 ? "left" : "right",
+          offset: a > 1 ? (a - 1) * 70 : 0,
           alignTicks: !0,
           splitLine: {
             show: !0,
             lineStyle: {
               type: "dashed",
-              color: e,
+              color: e.textDisabledColor,
               opacity: 0.3,
               width: 1,
               dashOffset: 0
             }
           },
           nameTextStyle: {
-            color: e,
+            color: e.textDisabledColor,
             fontFamily: "Inter",
             fontSize: "12px",
             fontWeight: 500
@@ -134,18 +136,18 @@ function C(o, a) {
           nameRotate: 90,
           nameLocation: "middle",
           axisLabel: {
-            color: i,
+            color: e.textPrimaryColor,
             fontFamily: "Jura",
             fontSize: "13px",
             fontWeight: 700,
             overflow: "break",
             ellipsis: "...",
             width: 30,
-            formatter: (d) => `${d}`
+            formatter: (s) => `${s}`
           },
           axisLine: {
             show: !0,
-            lineStyle: { color: g, width: 0.5, opacity: 1 }
+            lineStyle: { color: x, width: 0.5, opacity: 1 }
           }
         };
       }),
@@ -163,16 +165,16 @@ function C(o, a) {
        * Series configuration.
        */
       series: o.series.map((t) => {
-        const r = o.yAxis.findIndex((n) => n.id === t.yAxisId);
+        const a = o.yAxis.findIndex((l) => l.id === t.yAxisId);
         return {
           name: t.title,
           type: t.type,
-          yAxisIndex: r !== -1 ? r : 0,
+          yAxisIndex: a !== -1 ? a : 0,
           areaStyle: {
-            color: new b.graphic.LinearGradient(0, 0, 0, 1, [
+            color: new f.graphic.LinearGradient(0, 0, 0, 1, [
               {
                 offset: 0,
-                color: l(t?.pallet_color || "", "contained", "backgroundColor")
+                color: n(t?.pallet_color || "", "contained", "backgroundColor")
               },
               {
                 offset: 0.8,
@@ -180,22 +182,22 @@ function C(o, a) {
               }
             ])
           },
-          data: o.values.map((n) => n[t.field].r),
+          data: o.values.map((l) => l[t.field].r),
           ...t.type === "line" && {
             symbol: "circle",
             symbolSize: 10,
             itemStyle: {
               borderWidth: 2,
-              borderColor: l(t.pallet_color, "contained", "backgroundColorTone"),
-              color: s
+              borderColor: n(t.pallet_color, "contained", "backgroundColorTone"),
+              color: e.themeBackgroundColor
             },
             lineStyle: {
               width: 2,
-              color: l(t.pallet_color, "contained", "backgroundColorTone")
+              color: n(t.pallet_color, "contained", "backgroundColorTone")
             },
             emphasis: {
               itemStyle: {
-                color: l(t.pallet_color, "contained", "backgroundColorTone")
+                color: n(t.pallet_color, "contained", "backgroundColorTone")
               }
             }
           },
@@ -206,7 +208,7 @@ function C(o, a) {
             itemStyle: {
               borderRadius: [6, 6, 0, 0]
             },
-            color: l(t.pallet_color, "contained", "backgroundColorTone")
+            color: n(t.pallet_color, "contained", "backgroundColorTone")
           }
         };
       })
@@ -216,12 +218,12 @@ function C(o, a) {
     }
   };
 }
-function m(o) {
-  return Object.keys(o).reduce((a, i) => {
-    const e = o[i];
-    return e && typeof e == "object" && "v" in e && (a[i] = e.v.replace(/[0-9.\s]+/g, "")), a;
+function g(o) {
+  return Object.keys(o).reduce((r, d) => {
+    const e = o[d];
+    return e && typeof e == "object" && "v" in e && (r[d] = e.v.replace(/[0-9.\s]+/g, "")), r;
   }, {});
 }
 export {
-  C as generateOptions
+  m as generateOptions
 };

package/charts/SeriesChart/helpers/tooltipFormatter.d.ts

@@ -2,5 +2,5 @@ import { SeriesChartProps } from '../types';
 /**
  * Formats ECharts tooltip params to HTML for SeriesChart.
  */
-export declare function remapTooltipFormatter(params: any[], values: SeriesChartProps['values']): string;
+export declare function remapTooltipFormatter(params: any[], values: SeriesChartProps['values'], themeColors: any): string;
 //# sourceMappingURL=tooltipFormatter.d.ts.map

package/charts/SeriesChart/helpers/tooltipFormatter.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"tooltipFormatter.d.ts","sourceRoot":"","sources":["../../../../../../../packages/widgets/src/charts/SeriesChart/helpers/tooltipFormatter.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,gBAAgB,EAAE,MAAM,UAAU,CAAC;AAE5C;;GAEG;AACH,wBAAgB,qBAAqB,CAAC,MAAM,EAAE,GAAG,EAAE,EAAE,MAAM,EAAE,gBAAgB,CAAC,QAAQ,CAAC,UA+FtF"}
+{"version":3,"file":"tooltipFormatter.d.ts","sourceRoot":"","sources":["../../../../../../../packages/widgets/src/charts/SeriesChart/helpers/tooltipFormatter.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,gBAAgB,EAAE,MAAM,UAAU,CAAC;AAE5C;;GAEG;AACH,wBAAgB,qBAAqB,CAAC,MAAM,EAAE,GAAG,EAAE,EAAE,MAAM,EAAE,gBAAgB,CAAC,QAAQ,CAAC,EAAE,WAAW,EAAE,GAAG,UA+FxG"}

package/charts/SeriesChart/helpers/tooltipFormatter.js

@@ -1,5 +1,5 @@
-function c(r, a) {
-  let t = `
+function d(a, s, t) {
+  let r = `
     <div style="
       display: flex;
       padding: var(--theme-vars-size-baseSpacings-sp3, 12px);
@@ -7,12 +7,12 @@ function c(r, a) {
       justify-content: center;
       align-items: center;
       border-radius: var(--size-borderRadius-r3, 12px);
-      background: color-mix(in srgb, var(--theme-vars-palette-background-contrastDefault, #323B3B) 90%, transparent);
+      background: color-mix(in srgb, ${t.contrastDefaultColor} 90%, transparent);
       box-shadow: 0 4px 8px -5px var(--customShadowsColors-sh3, rgba(95, 108, 125, 0.16)), 0 8px 30px -1px var(--customShadowsColors-sh2, rgba(109, 124, 146, 0.12));
       gap: var(--theme-vars-size-baseSpacings-sp2, 8px);
     ">
       <h3 style="
-        color: var(--theme-vars-palette-text-contrastText, #FFF);
+        color: ${t.contrastTextColor};
         font-family: var(--typographyInter-font-family, Inter);
         font-size: var(--typoghaphy-size-Inter-paragraph, 13px);
         font-style: normal;
@@ -21,7 +21,7 @@ function c(r, a) {
         letter-spacing: var(--typographyInter-letter-spacing-dens, 0.8px);
         align-self: stretch;
       ">
-        ${r[0].name}
+        ${a[0].name}
       </h3>
       <div style="
           display: flex;
@@ -32,29 +32,29 @@ function c(r, a) {
           align-self: stretch;
         ">
   `;
-  return r.forEach((e) => {
-    const n = a.values[e.dataIndex][a.series[e.seriesIndex].field].v, o = e.color, s = e.borderColor, i = `
+  return a.forEach((e) => {
+    const o = s.values[e.dataIndex][s.series[e.seriesIndex].field].v, i = e.color, n = e.borderColor, l = `
       <div style="
         width: 11px;
         height: 0;
         stroke-width: 3px;
-        stroke: ${s};
+        stroke: ${n};
         display: flex;
         justify-content: center;
         align-items: center;
       ">
         <svg width="14" height="3" viewBox="0 0 14 3" fill="none" xmlns="http://www.w3.org/2000/svg">
-          <path d="M1.5 1.5H12.5" stroke="${s}" stroke-width="3" stroke-linecap="round"/>
+          <path d="M1.5 1.5H12.5" stroke="${n}" stroke-width="3" stroke-linecap="round"/>
         </svg>
-      </div>`, l = `
+      </div>`, p = `
       <span style="
         width: 11px;
         height: 11px;
         border-radius: 5px;
-        background: ${o};
+        background: ${i};
       ">
-      </span>`, p = e.seriesType === "line" ? i : l;
-    t += `
+      </span>`, c = e.seriesType === "line" ? l : p;
+    r += `
       <div style="
         display: flex;
         height: var(--theme-vars-size-device-size-action, 24px);
@@ -63,23 +63,23 @@ function c(r, a) {
         gap: 8px;
         border-radius: 6px;
       ">
-        ${p}
+        ${c}
         <span style="
-          color: var(--theme-vars-palette-text-contrastText, #FFF);
+          color: ${t.contrastTextColor};
           font-family: var(--typographyInter-font-family, Inter);
           font-size: var(--typoghaphy-size-Inter-body, 11px);
           font-style: normal;
           font-weight: 500;
           line-height: normal;
           letter-spacing: var(--typographyInter-letter-spacing-normal, 0.5px);
-        "><b>${n}</b></span>
+        "><b>${o}</b></span>
       </div>
     `;
-  }), t += `
+  }), r += `
       </div>
     </div>
-  `, t;
+  `, r;
 }
 export {
-  c as remapTooltipFormatter
+  d as remapTooltipFormatter
 };

package/charts/SeriesChart/types.d.ts

@@ -1,4 +1,3 @@
-import { Sizes } from '@m4l/styles';
 import { SeriesChartSlots } from './slots/SeriesChartEnum';
 import { SERIES_KEY_COMPONENT } from './constants';
 import { M4LOverridesStyleRules } from '@m4l/components';
@@ -47,11 +46,10 @@ export interface SeriesChartValueItem {
 export interface SeriesChartProps {
     /** Chart values (name, formatted value, numeric value, color). */
     values: SeriesChartValueItem;
-    /** Component size. */
-    size?: Extract<Sizes, 'small' | 'medium'>;
+    /** Chart scrollable option. */
+    scrollable?: boolean;
 }
 export type SeriesChartOwnerState = {
-    size?: SeriesChartProps['size'];
     color?: string;
 };
 export type SeriesChartSlotsType = keyof typeof SeriesChartSlots;

package/charts/SeriesChart/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../../../packages/widgets/src/charts/SeriesChart/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,MAAM,aAAa,CAAC;AACpC,OAAO,EAAE,gBAAgB,EAAE,MAAM,yBAAyB,CAAC;AAC3D,OAAO,EAAE,oBAAoB,EAAE,MAAM,aAAa,CAAC;AACnD,OAAO,EAAE,sBAAsB,EAAE,MAAM,iBAAiB,CAAC;AACzD,OAAO,EAAE,KAAK,EAAE,MAAM,sBAAsB,CAAC;AAE7C;;GAEG;AAEH,MAAM,WAAW,oBAAoB;IACnC;;OAEG;IACH,KAAK,EAAE;QACL,KAAK,EAAE,MAAM,CAAC;QACd,KAAK,EAAE,MAAM,CAAC;KACf,EAAE,CAAC;IACJ;;OAEG;IACH,KAAK,EAAE;QACL,EAAE,EAAE,MAAM,CAAC;QACX,KAAK,EAAE,MAAM,CAAC;KACf,EAAE,CAAC;IACJ;;OAEG;IACH,MAAM,EAAE;QACN,IAAI,EAAE,MAAM,CAAC;QACb,YAAY,EAAE,MAAM,CAAC;QACrB,KAAK,EAAE,MAAM,CAAC;QACd,KAAK,EAAE,MAAM,CAAC;QACd,OAAO,EAAE,MAAM,CAAC;KACjB,EAAE,CAAC;IACJ;;OAEG;IACH,MAAM,EAAE;QACN,CAAC,GAAG,EAAE,MAAM,GAAG;YACb,CAAC,EAAE,MAAM,CAAC;YACV,CAAC,EAAE,MAAM,CAAC;SACX,GAAG,MAAM,CAAC;KACZ,EAAE,CAAC;CACL;AAED;;GAEG;AACH,MAAM,WAAW,gBAAgB;IAC/B,kEAAkE;IAClE,MAAM,EAAE,oBAAoB,CAAC;IAC7B,sBAAsB;IACtB,IAAI,CAAC,EAAE,OAAO,CAAC,KAAK,EAAE,OAAO,GAAG,QAAQ,CAAC,CAAC;CAC3C;AAED,MAAM,MAAM,qBAAqB,GAAG;IAClC,IAAI,CAAC,EAAE,gBAAgB,CAAC,MAAM,CAAC,CAAC;IAChC,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,CAAC;AACF,MAAM,MAAM,oBAAoB,GAAG,MAAM,OAAO,gBAAgB,CAAC;AACjE,MAAM,MAAM,iBAAiB,GAAG,sBAAsB,CAAC,oBAAoB,EAAE,OAAO,oBAAoB,EAAE,KAAK,CAAC,CAAC"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../../../packages/widgets/src/charts/SeriesChart/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,gBAAgB,EAAE,MAAM,yBAAyB,CAAC;AAC3D,OAAO,EAAE,oBAAoB,EAAE,MAAM,aAAa,CAAC;AACnD,OAAO,EAAE,sBAAsB,EAAE,MAAM,iBAAiB,CAAC;AACzD,OAAO,EAAE,KAAK,EAAE,MAAM,sBAAsB,CAAC;AAE7C;;GAEG;AAEH,MAAM,WAAW,oBAAoB;IACnC;;OAEG;IACH,KAAK,EAAE;QACL,KAAK,EAAE,MAAM,CAAC;QACd,KAAK,EAAE,MAAM,CAAC;KACf,EAAE,CAAC;IACJ;;OAEG;IACH,KAAK,EAAE;QACL,EAAE,EAAE,MAAM,CAAC;QACX,KAAK,EAAE,MAAM,CAAC;KACf,EAAE,CAAC;IACJ;;OAEG;IACH,MAAM,EAAE;QACN,IAAI,EAAE,MAAM,CAAC;QACb,YAAY,EAAE,MAAM,CAAC;QACrB,KAAK,EAAE,MAAM,CAAC;QACd,KAAK,EAAE,MAAM,CAAC;QACd,OAAO,EAAE,MAAM,CAAC;KACjB,EAAE,CAAC;IACJ;;OAEG;IACH,MAAM,EAAE;QACN,CAAC,GAAG,EAAE,MAAM,GAAG;YACb,CAAC,EAAE,MAAM,CAAC;YACV,CAAC,EAAE,MAAM,CAAC;SACX,GAAG,MAAM,CAAC;KACZ,EAAE,CAAC;CACL;AAED;;GAEG;AACH,MAAM,WAAW,gBAAgB;IAC/B,kEAAkE;IAClE,MAAM,EAAE,oBAAoB,CAAC;IAC7B,+BAA+B;IAC/B,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB;AAED,MAAM,MAAM,qBAAqB,GAAG;IAClC,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,CAAC;AACF,MAAM,MAAM,oBAAoB,GAAG,MAAM,OAAO,gBAAgB,CAAC;AACjE,MAAM,MAAM,iBAAiB,GAAG,sBAAsB,CAAC,oBAAoB,EAAE,OAAO,oBAAoB,EAAE,KAAK,CAAC,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@m4l/widgets",
-  "version": "0.0.3-beta-add-widget-serieschart.0",
+  "version": "0.0.3",
   "publishConfig": {
     "access": "public"
   },

package/tools/color.d.ts

@@ -1,8 +1,9 @@
 import { ChipColor } from '@m4l/styles';
 /**
  * Resolves a CSS variable or hexadecimal color string to a hexadecimal color value.
+ * Returns a fallback when color is undefined (e.g. theme vars missing in tests).
  */
-export declare function getColorHexFromVar(color: string): string;
+export declare function getColorHexFromVar(color: string | undefined): string;
 /**
  * Resolves a color token or hex string to a usable color value.
  */

package/tools/color.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"color.d.ts","sourceRoot":"","sources":["../../../../../packages/widgets/src/tools/color.ts"],"names":[],"mappings":"AAAA,OAAO,EAAgC,SAAS,EAAE,MAAM,aAAa,CAAC;AAEtE;;GAEG;AACH,wBAAgB,kBAAkB,CAAC,KAAK,EAAE,MAAM,UAO/C;AAID;;GAEG;AACH,wBAAgB,oBAAoB,CAClC,KAAK,EAAE,MAAM,EACb,SAAS,GAAE,WAAW,GAAG,UAAwB,EACjD,QAAQ,GAAE,MAAM,SAAiC,UAUlD"}
+{"version":3,"file":"color.d.ts","sourceRoot":"","sources":["../../../../../packages/widgets/src/tools/color.ts"],"names":[],"mappings":"AAAA,OAAO,EAAgC,SAAS,EAAE,MAAM,aAAa,CAAC;AAEtE;;;GAGG;AACH,wBAAgB,kBAAkB,CAAC,KAAK,EAAE,MAAM,GAAG,SAAS,GAAG,MAAM,CAYpE;AAID;;GAEG;AACH,wBAAgB,oBAAoB,CAClC,KAAK,EAAE,MAAM,EACb,SAAS,GAAE,WAAW,GAAG,UAAwB,EACjD,QAAQ,GAAE,MAAM,SAAiC,UAUlD"}

package/tools/color.js

@@ -1,17 +1,17 @@
-import { BASE_TAG_OBJECT_COLORS_LIGHT as o } from "@m4l/styles";
-function m(e) {
-  return e.includes("#") ? e : (e = e.replace("var(", ""), e = e.replace(")", ""), getComputedStyle(document.documentElement).getPropertyValue(e).trim());
+import { BASE_TAG_OBJECT_COLORS_LIGHT as i } from "@m4l/styles";
+function o(e) {
+  return e === null || typeof e != "string" ? r : e.includes("#") ? e : (e = e.replace("var(", ""), e = e.replace(")", ""), getComputedStyle(document.documentElement).getPropertyValue(e).trim() || r);
 }
-const t = "#9ca3af";
+const r = "#9ca3af";
 function a(e, n = "contained", u = "backgroundColorTone") {
   if (e.includes("#"))
     return e;
   if (!e?.trim())
-    return t;
-  const r = o[e];
-  return r ? r[n][u] : t;
+    return r;
+  const t = i[e];
+  return t ? t[n][u] : r;
 }
 export {
   a as getColorHexFromToken,
-  m as getColorHexFromVar
+  o as getColorHexFromVar
 };