@mx-cartographer/experiences 9.2.4-alpha.al2 → 9.3.0-alpha.bb1

package/dist/common/components/calendar/Header/index.es.js

@@ -0,0 +1,42 @@
+import { DATE_FORMATS_INTL as l, formatDate as o } from "../../../../core/constants/DateFormats/index.es.js";
+import "react";
+import { H2 as c } from "@mxenabled/mxui";
+import { css as d } from "@mxenabled/cssinjs";
+import a from "@mui/material/Button";
+import { ChevronLeft as s, ChevronRight as h } from "@mxenabled/mx-icons";
+import { jsx as e, jsxs as t } from "react/jsx-runtime";
+var b = ({ copy: r, date: i, onNextClick: n, onPreviousClick: m }) => /* @__PURE__ */ t("div", {
+  className: `mx-cmn-calendar-header ${f()}`,
+  children: [/* @__PURE__ */ e(c, {
+    className: "mx-cmn-calendar-header-title",
+    variant: "h3",
+    children: o(i, l.MONTH_YEAR)
+  }), /* @__PURE__ */ t("div", {
+    className: "mx-cmn-calendar-header-button-container",
+    children: [/* @__PURE__ */ e(a, {
+      "aria-label": r.prevAria,
+      onClick: m,
+      children: /* @__PURE__ */ e(s, { size: 24 })
+    }), /* @__PURE__ */ e(a, {
+      "aria-label": r.nextAria,
+      onClick: n,
+      children: /* @__PURE__ */ e(h, { size: 24 })
+    })]
+  })]
+}), f = () => d({
+  alignItems: "center",
+  display: "flex",
+  marginBottom: 16,
+  marginRight: -16,
+  paddingLeft: 8,
+  "& .mx-cmn-calendar-header-title": { flexGrow: 1 },
+  "& .mx-cmn-calendar-header-button-container": {
+    display: "flex",
+    gap: 4
+  }
+});
+export {
+  b as default
+};
+
+//# sourceMappingURL=index.es.js.map

package/dist/common/components/calendar/Header/index.es.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.es.js","names":[],"sources":["../../../../../src/common/components/calendar/Header.tsx"],"sourcesContent":["import React from 'react'\nimport { css } from '@mxenabled/cssinjs'\n\nimport { ChevronLeft, ChevronRight } from '@mxenabled/mx-icons'\n\nimport Button from '@mui/material/Button'\n\nimport { H2 } from '@mxenabled/mxui'\n\nimport { DATE_FORMATS_INTL, formatDate } from '../../../core/constants'\n\nimport type { CalendarCopy } from './Calendar'\n\ninterface HeaderProps {\n  copy: CalendarCopy\n  date: Date\n  onNextClick: () => void\n  onPreviousClick: () => void\n}\n\nconst Header: React.FC<HeaderProps> = ({ copy, date, onNextClick, onPreviousClick }) => {\n  const styles = getStyles()\n\n  return (\n    <div className={`mx-cmn-calendar-header ${styles}`}>\n      <H2 className=\"mx-cmn-calendar-header-title\" variant=\"h3\">\n        {formatDate(date, DATE_FORMATS_INTL.MONTH_YEAR)}\n      </H2>\n      <div className=\"mx-cmn-calendar-header-button-container\">\n        <Button aria-label={copy.prevAria} onClick={onPreviousClick}>\n          <ChevronLeft size={24} />\n        </Button>\n        <Button aria-label={copy.nextAria} onClick={onNextClick}>\n          <ChevronRight size={24} />\n        </Button>\n      </div>\n    </div>\n  )\n}\n\nconst getStyles = () =>\n  css({\n    alignItems: 'center',\n    display: 'flex',\n    marginBottom: 16,\n    marginRight: -16,\n    paddingLeft: 8,\n    '& .mx-cmn-calendar-header-title': {\n      flexGrow: 1,\n    },\n    '& .mx-cmn-calendar-header-button-container': {\n      display: 'flex',\n      gap: 4,\n    },\n  })\n\nexport default Header\n"],"mappings":";;;;;;;AAoBA,IAAM,IAAA,CAAiC,EAAE,MAAA,GAAM,MAAA,GAAM,aAAA,GAAa,iBAAA,EAAA,MAI9D,gBAAA,EAAC,OAAD;AAAA,EAAK,WAAW,0BAHH,EAG6B,CAAA;AAAA,YAA1C,CACE,gBAAA,EAAC,GAAD;AAAA,IAAI,WAAU;AAAA,IAA+B,SAAQ;AAAA,cAClD,EAAW,GAAM,EAAkB,UAAU;AAAA,EAC5C,CAAA,GACJ,gBAAA,EAAC,OAAD;AAAA,IAAK,WAAU;AAAA,cAAf,CACE,gBAAA,EAAC,GAAD;AAAA,MAAQ,cAAY,EAAK;AAAA,MAAU,SAAS;AAAA,gBAC1C,gBAAA,EAAC,GAAD,EAAa,MAAM,GAAK,CAAA;AAAA,IAClB,CAAA,GACR,gBAAA,EAAC,GAAD;AAAA,MAAQ,cAAY,EAAK;AAAA,MAAU,SAAS;AAAA,gBAC1C,gBAAA,EAAC,GAAD,EAAc,MAAM,GAAK,CAAA;AAAA,IACnB,CAAA,CACL;AAAA,IACF;IAIH,IAAA,MACJ,EAAI;AAAA,EACF,YAAY;AAAA,EACZ,SAAS;AAAA,EACT,cAAc;AAAA,EACd,aAAa;AAAA,EACb,aAAa;AAAA,EACb,mCAAmC,EACjC,UAAU,EACZ;AAAA,EACA,8CAA8C;AAAA,IAC5C,SAAS;AAAA,IACT,KAAK;AAAA,EACP;AACF,CAAC"}

package/dist/common/components/charts/Donut/index.es.js

@@ -0,0 +1,82 @@
+import R from "react";
+import { jsx as e, jsxs as c } from "react/jsx-runtime";
+import { darken as D, lighten as b, useTheme as m } from "@mui/material/styles";
+import u from "@mui/material/Box";
+import { arc as x, interpolateString as I, selectAll as S } from "d3";
+var E = 100, B = 140, N = 10, K = ({ data: h, hoveredId: p, onClick: a, onMouseEnter: l, onMouseLeave: i, selectedId: s, size: r = 300, children: f }) => {
+  const d = m();
+  let t = 0;
+  const g = (o, n) => {
+    (o.key === "Enter" || o.key === " ") && (o.preventDefault(), a?.(n));
+  }, y = (o) => {
+    l?.(o);
+  }, k = (o) => {
+    i?.(o);
+  };
+  return R.useEffect(() => {
+    S(".arc-outer").transition("roll").duration(500).attrTween("transform", () => I("rotate(0)", "rotate(360)"));
+  }, []), /* @__PURE__ */ c(u, {
+    height: r,
+    position: "relative",
+    width: r,
+    children: [/* @__PURE__ */ e(u, {
+      height: "100%",
+      width: "100%",
+      children: f
+    }), /* @__PURE__ */ c("svg", {
+      height: r,
+      style: {
+        position: "absolute",
+        top: 0,
+        left: 0,
+        touchAction: "manipulation"
+      },
+      viewBox: "-150 -150 300 300",
+      width: r,
+      children: [/* @__PURE__ */ e("style", { children: `
+            .arc-outer:focus,
+            .arc-outer:focus-visible {
+              stroke: ${d.palette.primary.main};
+              stroke-width: 3;
+              stroke-opacity: 0.8;
+            }
+          ` }), /* @__PURE__ */ e("g", { children: h.map((o) => {
+        const n = t;
+        t = t + 2 * Math.PI * (o.value / 100);
+        const v = t, w = x().cornerRadius(4)({
+          innerRadius: E,
+          outerRadius: B + (o.id === s || o.id === p ? N : 0),
+          startAngle: n,
+          endAngle: v,
+          padAngle: 0.025
+        });
+        return /* @__PURE__ */ e("path", {
+          "aria-label": o.label || `Segment ${o.id}`,
+          "aria-pressed": o.id === s,
+          className: "arc-outer",
+          d: w,
+          fill: o.color,
+          onBlur: () => k(o.id),
+          onClick: () => a?.(o.id),
+          onFocus: () => y(o.id),
+          onKeyDown: (A) => g(A, o.id),
+          onMouseEnter: () => l?.(o.id),
+          onMouseLeave: () => i?.(o.id),
+          role: "button",
+          stroke: d.palette.mode === "light" ? D(o.color, 0.3) : b(o.color, 0.3),
+          strokeWidth: 2,
+          style: {
+            cursor: "pointer",
+            outline: "none"
+          },
+          tabIndex: 0
+        }, o.id);
+      }) })]
+    })]
+  });
+};
+export {
+  K as default
+};
+
+//# sourceMappingURL=index.es.js.map

package/dist/common/components/charts/Donut/index.es.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.es.js","names":[],"sources":["../../../../../src/common/components/charts/Donut.tsx"],"sourcesContent":["import React from 'react'\nimport { arc, selectAll, interpolateString } from 'd3'\n\nimport Box from '@mui/material/Box'\nimport { darken, lighten, useTheme } from '@mui/material/styles'\n\nconst INNER_RADIUS = 100\nconst OUT_RADIUS = 140\nconst SELECTION_RADIUS = 10\n\nexport interface DonutData {\n  id: string\n  label?: string\n  color: string\n  value: number\n}\n\nexport interface DonutProps {\n  data: DonutData[]\n  hoveredId?: string\n  onClick?: (id: string) => void\n  onMouseEnter?: (id: string) => void\n  onMouseLeave?: (id: string) => void\n  selectedId?: string\n  size?: number\n}\n\nconst Donut: React.FC<React.PropsWithChildren<DonutProps>> = ({\n  data,\n  hoveredId,\n  onClick,\n  onMouseEnter,\n  onMouseLeave,\n  selectedId,\n  size = 300,\n  children,\n}) => {\n  const theme = useTheme()\n  let offset = 0\n\n  const handleKeyDown = (event: React.KeyboardEvent, id: string) => {\n    if (event.key === 'Enter' || event.key === ' ') {\n      event.preventDefault()\n      onClick?.(id)\n    }\n  }\n\n  const handleFocus = (id: string) => {\n    onMouseEnter?.(id)\n  }\n\n  const handleBlur = (id: string) => {\n    onMouseLeave?.(id)\n  }\n\n  React.useEffect(() => {\n    selectAll('.arc-outer')\n      .transition('roll')\n      .duration(500)\n      .attrTween('transform', () => interpolateString('rotate(0)', 'rotate(360)'))\n  }, [])\n\n  return (\n    <Box height={size} position=\"relative\" width={size}>\n      <Box height=\"100%\" width=\"100%\">\n        {children}\n      </Box>\n      <svg\n        height={size}\n        style={{ position: 'absolute', top: 0, left: 0, touchAction: 'manipulation' }}\n        viewBox={`-150 -150 300 300`}\n        width={size}\n      >\n        <style>\n          {`\n            .arc-outer:focus,\n            .arc-outer:focus-visible {\n              stroke: ${theme.palette.primary.main};\n              stroke-width: 3;\n              stroke-opacity: 0.8;\n            }\n          `}\n        </style>\n        <g>\n          {data.map((item) => {\n            const startAngle = offset\n            offset = offset + 2 * Math.PI * (item.value / 100)\n            const endAngle = offset\n\n            const segment = arc().cornerRadius(4)({\n              innerRadius: INNER_RADIUS,\n              outerRadius:\n                OUT_RADIUS +\n                (item.id === selectedId || item.id === hoveredId ? SELECTION_RADIUS : 0),\n              startAngle,\n              endAngle,\n              padAngle: 0.025,\n            }) as string\n\n            return (\n              <path\n                aria-label={item.label || `Segment ${item.id}`}\n                aria-pressed={item.id === selectedId}\n                className=\"arc-outer\"\n                d={segment}\n                fill={item.color}\n                key={item.id}\n                onBlur={() => handleBlur(item.id)}\n                onClick={() => onClick?.(item.id)}\n                onFocus={() => handleFocus(item.id)}\n                onKeyDown={(e) => handleKeyDown(e, item.id)}\n                onMouseEnter={() => onMouseEnter?.(item.id)}\n                onMouseLeave={() => onMouseLeave?.(item.id)}\n                role=\"button\"\n                stroke={\n                  theme.palette.mode === 'light'\n                    ? darken(item.color, 0.3)\n                    : lighten(item.color, 0.3)\n                }\n                strokeWidth={2}\n                style={{\n                  cursor: 'pointer',\n                  outline: 'none',\n                }}\n                tabIndex={0}\n              />\n            )\n          })}\n        </g>\n      </svg>\n    </Box>\n  )\n}\n\nexport default Donut\n"],"mappings":";;;;;AAMA,IAAM,IAAe,KACf,IAAa,KACb,IAAmB,IAmBnB,IAAA,CAAwD,EAC5D,MAAA,GACA,WAAA,GACA,SAAA,GACA,cAAA,GACA,cAAA,GACA,YAAA,GACA,MAAA,IAAO,KACP,UAAA,EAAA,MACI;AACJ,QAAM,IAAQ,EAAS;AACvB,MAAI,IAAS;AAEb,QAAM,IAAA,CAAiB,GAA4B,MAAe;AAChE,KAAI,EAAM,QAAQ,WAAW,EAAM,QAAQ,SACzC,EAAM,eAAe,GACrB,IAAU,CAAE;AAAA,EAEhB,GAEM,IAAA,CAAe,MAAe;AAClC,IAAA,IAAe,CAAE;AAAA,EACnB,GAEM,IAAA,CAAc,MAAe;AACjC,IAAA,IAAe,CAAE;AAAA,EACnB;AAEA,SAAA,EAAM,UAAA,MAAgB;AACpB,IAAA,EAAU,YAAY,EACnB,WAAW,MAAM,EACjB,SAAS,GAAG,EACZ,UAAU,aAAA,MAAmB,EAAkB,aAAa,aAAa,CAAC;AAAA,EAC/E,GAAG,CAAC,CAAC,GAGH,gBAAA,EAAC,GAAD;AAAA,IAAK,QAAQ;AAAA,IAAM,UAAS;AAAA,IAAW,OAAO;AAAA,cAA9C,CACE,gBAAA,EAAC,GAAD;AAAA,MAAK,QAAO;AAAA,MAAO,OAAM;AAAA,MACtB,UAAA;AAAA,IACE,CAAA,GACL,gBAAA,EAAC,OAAD;AAAA,MACE,QAAQ;AAAA,MACR,OAAO;AAAA,QAAE,UAAU;AAAA,QAAY,KAAK;AAAA,QAAG,MAAM;AAAA,QAAG,aAAa;AAAA,MAAe;AAAA,MAC5E,SAAS;AAAA,MACT,OAAO;AAAA,gBAJT,CAME,gBAAA,EAAC,SAAD,EAAA,UACG;AAAA;AAAA;AAAA,wBAGa,EAAM,QAAQ,QAAQ,IAAA;AAAA;AAAA;AAAA;AAAA,YAK/B,CAAA,GACP,gBAAA,EAAC,KAAD,EAAA,UACG,EAAK,IAAA,CAAK,MAAS;AAClB,cAAM,IAAa;AACnB,QAAA,IAAS,IAAS,IAAI,KAAK,MAAM,EAAK,QAAQ;AAC9C,cAAM,IAAW,GAEX,IAAU,EAAI,EAAE,aAAa,CAAC,EAAE;AAAA,UACpC,aAAa;AAAA,UACb,aACE,KACC,EAAK,OAAO,KAAc,EAAK,OAAO,IAAY,IAAmB;AAAA,UACxE,YAAA;AAAA,UACA,UAAA;AAAA,UACA,UAAU;AAAA,QACZ,CAAC;AAED,eACE,gBAAA,EAAC,QAAD;AAAA,UACE,cAAY,EAAK,SAAS,WAAW,EAAK,EAAA;AAAA,UAC1C,gBAAc,EAAK,OAAO;AAAA,UAC1B,WAAU;AAAA,UACV,GAAG;AAAA,UACH,MAAM,EAAK;AAAA,UAEX,QAAA,MAAc,EAAW,EAAK,EAAE;AAAA,UAChC,SAAA,MAAe,IAAU,EAAK,EAAE;AAAA,UAChC,SAAA,MAAe,EAAY,EAAK,EAAE;AAAA,UAClC,WAAA,CAAY,MAAM,EAAc,GAAG,EAAK,EAAE;AAAA,UAC1C,cAAA,MAAoB,IAAe,EAAK,EAAE;AAAA,UAC1C,cAAA,MAAoB,IAAe,EAAK,EAAE;AAAA,UAC1C,MAAK;AAAA,UACL,QACE,EAAM,QAAQ,SAAS,UACnB,EAAO,EAAK,OAAO,GAAG,IACtB,EAAQ,EAAK,OAAO,GAAG;AAAA,UAE7B,aAAa;AAAA,UACb,OAAO;AAAA,YACL,QAAQ;AAAA,YACR,SAAS;AAAA,UACX;AAAA,UACA,UAAU;AAAA,QACX,GAnBM,EAAK,EAmBX;AAAA,MAEL,CAAC,EACA,CAAA,CACA;AAAA,MACF;AAAA;AAET"}

package/dist/common/components/charts/LineChart/CustomLegend/index.es.js

@@ -0,0 +1,95 @@
+import { useGlobalCopyStore as y } from "../../../../context/hooks/index.es.js";
+import { formatCurrency as s } from "../../../../../core/utils/NumberFormatting/index.es.js";
+import { MARKER_SHAPE_PATHS as v, getMarkerShape as b } from "../utils/markerShapes/index.es.js";
+import { observer as w } from "mobx-react-lite";
+import d from "@mui/material/Stack";
+import { Text as e } from "@mxenabled/mxui";
+import { Fragment as C, jsx as o, jsxs as i } from "react/jsx-runtime";
+import k from "@mui/material/Box";
+var A = ({ label: r, customLegendVariant: n }) => {
+  const t = n || "body2";
+  return typeof r == "string" ? /* @__PURE__ */ o(e, {
+    variant: t,
+    children: r
+  }) : typeof r == "object" && r.amount !== void 0 && r.label ? /* @__PURE__ */ i(C, { children: [/* @__PURE__ */ o(e, {
+    variant: t,
+    children: r.label
+  }), /* @__PURE__ */ o(e, {
+    bold: !0,
+    sx: { marginLeft: 8 },
+    variant: t,
+    children: s(r.amount, "0,0")
+  })] }) : null;
+}, R = ({ average: r, customLegendVariant: n, customLegendBoxSx: t, labels: p = [], series: u, style: g, title: h, valueFormatterString: a }) => {
+  const { common: x } = y(), l = n || "body2";
+  return /* @__PURE__ */ i(d, {
+    style: {
+      flexDirection: "row",
+      gap: 24,
+      ...g
+    },
+    children: [u.map((m, c) => {
+      const f = p[c];
+      return f ? /* @__PURE__ */ i(d, {
+        style: {
+          alignItems: "center",
+          flexDirection: "row",
+          flexWrap: "wrap"
+        },
+        children: [t !== void 0 ? /* @__PURE__ */ o(k, { sx: {
+          width: 10,
+          height: 10,
+          backgroundColor: m.color,
+          marginRight: 8,
+          ...t
+        } }) : /* @__PURE__ */ o("svg", {
+          "aria-hidden": "true",
+          height: 14,
+          style: {
+            marginRight: 8,
+            flexShrink: 0
+          },
+          viewBox: "-6 -6 12 12",
+          width: 14,
+          children: /* @__PURE__ */ o("path", {
+            d: v[b(c)],
+            fill: m.color,
+            stroke: m.color,
+            strokeWidth: 1
+          })
+        }), /* @__PURE__ */ o(A, {
+          customLegendVariant: n,
+          label: f
+        })]
+      }, c) : null;
+    }), r !== void 0 && /* @__PURE__ */ i(d, {
+      sx: {
+        alignItems: "center",
+        flexDirection: "row"
+      },
+      children: [
+        /* @__PURE__ */ o(e, {
+          bold: !0,
+          sx: { marginRight: 8 },
+          variant: l,
+          children: "– –"
+        }),
+        /* @__PURE__ */ i(e, {
+          variant: l,
+          children: [h || x.average, "  "]
+        }),
+        /* @__PURE__ */ o(e, {
+          bold: !0,
+          variant: l,
+          children: a ? s(r, a) : r
+        })
+      ]
+    })]
+  });
+}, M = w(R);
+export {
+  A as CustomLegendLabel,
+  M as default
+};
+
+//# sourceMappingURL=index.es.js.map

package/dist/common/components/charts/LineChart/CustomLegend/index.es.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.es.js","names":[],"sources":["../../../../../../src/common/components/charts/linechart/CustomLegend.tsx"],"sourcesContent":["import { observer } from 'mobx-react-lite'\n\nimport Box from '@mui/material/Box'\nimport Stack from '@mui/material/Stack'\nimport { type SxProps } from '@mui/material/styles'\nimport { Text } from '@mxenabled/mxui'\n\nimport { useGlobalCopyStore } from '../../../../common'\nimport { LineChartLabel } from '../LineChart'\nimport { getMarkerShape, MARKER_SHAPE_PATHS } from './utils/markerShapes'\nimport { formatCurrency } from '../../../../core/utils/NumberFormatting'\n\nexport const CustomLegendLabel = ({\n  label,\n  customLegendVariant,\n}: {\n  label: LineChartLabel\n  customLegendVariant?: string\n}) => {\n  const variant = (customLegendVariant as any) || 'body2'\n\n  if (typeof label === 'string') {\n    return <Text variant={variant}>{label}</Text>\n  }\n  if (typeof label === 'object' && label.amount !== undefined && label.label) {\n    return (\n      <>\n        <Text variant={variant}>{label.label}</Text>\n        <Text bold={true} sx={{ marginLeft: 8 }} variant={variant}>\n          {formatCurrency(label.amount, '0,0')}\n        </Text>\n      </>\n    )\n  }\n  return null\n}\n\nconst CustomLegend = ({\n  average,\n  customLegendVariant,\n  customLegendBoxSx,\n  labels = [],\n  series,\n  style,\n  title,\n  valueFormatterString,\n}: {\n  average?: number\n  customLegendVariant?: string\n  customLegendBoxSx?: SxProps\n  labels?: LineChartLabel[]\n  series: any[]\n  title?: string\n  style: any\n  valueFormatterString?: string\n}) => {\n  const { common: commonCopy } = useGlobalCopyStore()\n  const variant = (customLegendVariant as any) || 'body2'\n\n  return (\n    <Stack style={{ flexDirection: 'row', gap: 24, ...style }}>\n      {series.map((s, index) => {\n        const label = labels[index]\n        // Skip series without a label\n        return label ? (\n          <Stack\n            key={index}\n            style={{ alignItems: 'center', flexDirection: 'row', flexWrap: 'wrap' }}\n          >\n            {customLegendBoxSx !== undefined ? (\n              <Box\n                sx={{\n                  width: 10,\n                  height: 10,\n                  backgroundColor: s.color,\n                  marginRight: 8,\n                  ...customLegendBoxSx,\n                }}\n              />\n            ) : (\n              <svg\n                aria-hidden=\"true\"\n                height={14}\n                style={{ marginRight: 8, flexShrink: 0 }}\n                viewBox=\"-6 -6 12 12\"\n                width={14}\n              >\n                <path\n                  d={MARKER_SHAPE_PATHS[getMarkerShape(index)]}\n                  fill={s.color}\n                  stroke={s.color}\n                  strokeWidth={1}\n                />\n              </svg>\n            )}\n            <CustomLegendLabel customLegendVariant={customLegendVariant} label={label} />\n          </Stack>\n        ) : null\n      })}\n      {average !== undefined && (\n        <Stack sx={{ alignItems: 'center', flexDirection: 'row' }}>\n          <Text bold={true} sx={{ marginRight: 8 }} variant={variant}>\n            – –\n          </Text>\n          <Text variant={variant}>{title ? title : commonCopy.average}&nbsp;&nbsp;</Text>\n          <Text bold={true} variant={variant}>\n            {valueFormatterString ? formatCurrency(average, valueFormatterString) : average}\n          </Text>\n        </Stack>\n      )}\n    </Stack>\n  )\n}\n\nexport default observer(CustomLegend)\n"],"mappings":";;;;;;;;AAYA,IAAa,IAAA,CAAqB,EAChC,OAAA,GACA,qBAAA,EAAA,MAII;AACJ,QAAM,IAAW,KAA+B;AAEhD,SAAI,OAAO,KAAU,WACZ,gBAAA,EAAC,GAAD;AAAA,IAAe,SAAA;AAAA,cAAU;AAAA,EAAY,CAAA,IAE1C,OAAO,KAAU,YAAY,EAAM,WAAW,UAAa,EAAM,QAEjE,gBAAA,EAAA,GAAA,EAAA,UAAA,CACE,gBAAA,EAAC,GAAD;AAAA,IAAe,SAAA;AAAA,cAAU,EAAM;AAAA,EAAY,CAAA,GAC3C,gBAAA,EAAC,GAAD;AAAA,IAAM,MAAM;AAAA,IAAM,IAAI,EAAE,YAAY,EAAE;AAAA,IAAY,SAAA;AAAA,cAC/C,EAAe,EAAM,QAAQ,KAAK;AAAA,EAC/B,CAAA,CACN,EAAA,CAAA,IAGC;AACT,GAEM,IAAA,CAAgB,EACpB,SAAA,GACA,qBAAA,GACA,mBAAA,GACA,QAAA,IAAS,CAAC,GACV,QAAA,GACA,OAAA,GACA,OAAA,GACA,sBAAA,EAAA,MAUI;AACJ,QAAM,EAAE,QAAQ,EAAA,IAAe,EAAmB,GAC5C,IAAW,KAA+B;AAEhD,SACE,gBAAA,EAAC,GAAD;AAAA,IAAO,OAAO;AAAA,MAAE,eAAe;AAAA,MAAO,KAAK;AAAA,MAAI,GAAG;AAAA,IAAM;AAAA,cAAxD,CACG,EAAO,IAAA,CAAK,GAAG,MAAU;AACxB,YAAM,IAAQ,EAAO,CAAA;AAErB,aAAO,IACL,gBAAA,EAAC,GAAD;AAAA,QAEE,OAAO;AAAA,UAAE,YAAY;AAAA,UAAU,eAAe;AAAA,UAAO,UAAU;AAAA,QAAO;AAAA,kBAFxE,CAIG,MAAsB,SACrB,gBAAA,EAAC,GAAD,EACE,IAAI;AAAA,UACF,OAAO;AAAA,UACP,QAAQ;AAAA,UACR,iBAAiB,EAAE;AAAA,UACnB,aAAa;AAAA,UACb,GAAG;AAAA,QACL,EACD,CAAA,IAED,gBAAA,EAAC,OAAD;AAAA,UACE,eAAY;AAAA,UACZ,QAAQ;AAAA,UACR,OAAO;AAAA,YAAE,aAAa;AAAA,YAAG,YAAY;AAAA,UAAE;AAAA,UACvC,SAAQ;AAAA,UACR,OAAO;AAAA,oBAEP,gBAAA,EAAC,QAAD;AAAA,YACE,GAAG,EAAmB,EAAe,CAAK,CAAA;AAAA,YAC1C,MAAM,EAAE;AAAA,YACR,QAAQ,EAAE;AAAA,YACV,aAAa;AAAA,UACd,CAAA;AAAA,QACE,CAAA,GAEP,gBAAA,EAAC,GAAD;AAAA,UAAwC,qBAAA;AAAA,UAA4B,OAAA;AAAA,QAAQ,CAAA,CACvE;AAAA,SA9BA,CA8BA,IACL;AAAA,IACN,CAAC,GACA,MAAY,UACX,gBAAA,EAAC,GAAD;AAAA,MAAO,IAAI;AAAA,QAAE,YAAY;AAAA,QAAU,eAAe;AAAA,MAAM;AAAA,gBAAxD;AAAA,QACE,gBAAA,EAAC,GAAD;AAAA,UAAM,MAAM;AAAA,UAAM,IAAI,EAAE,aAAa,EAAE;AAAA,UAAY,SAAA;AAAA,oBAAS;AAAA,QAEtD,CAAA;AAAA,QACN,gBAAA,EAAC,GAAD;AAAA,UAAe,SAAA;AAAA,oBAAf,CAAyB,KAAgB,EAAW,SAAQ,IAAkB;AAAA;QAC9E,gBAAA,EAAC,GAAD;AAAA,UAAM,MAAM;AAAA,UAAe,SAAA;AAAA,oBACxB,IAAuB,EAAe,GAAS,CAAoB,IAAI;AAAA,QACpE,CAAA;AAAA,MACD;AAAA,MAEJ;AAAA;AAEX,GAEA,IAAe,EAAS,CAAY"}

package/dist/common/components/charts/LineChart/CustomLine/index.es.js

@@ -0,0 +1,27 @@
+import "react";
+import { Fragment as i, jsx as t, jsxs as n } from "react/jsx-runtime";
+var d = (e) => /* @__PURE__ */ n(i, { children: [/* @__PURE__ */ t("clipPath", {
+  id: e.id,
+  children: /* @__PURE__ */ t("rect", {
+    height: e.height,
+    width: e.width,
+    x: "0",
+    y: "0"
+  })
+}), /* @__PURE__ */ t("g", { children: /* @__PURE__ */ t("path", {
+  cursor: "unset",
+  d: e.d,
+  style: {
+    strokeWidth: 2,
+    strokeLinejoin: "round",
+    fill: "none",
+    stroke: e.lineColor ? e.lineColor : e.stroke,
+    transition: "opacity 0.2s ease-in, stroke 0.2s ease-in",
+    opacity: 1
+  }
+}) })] });
+export {
+  d as CustomLine
+};
+
+//# sourceMappingURL=index.es.js.map

package/dist/common/components/charts/LineChart/CustomLine/index.es.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.es.js","names":[],"sources":["../../../../../../src/common/components/charts/linechart/CustomLine.tsx"],"sourcesContent":["import React from 'react'\n\nimport type { AnimatedLineProps } from '@mui/x-charts'\n\ninterface CustomLineProps extends AnimatedLineProps {\n  lineColor?: string\n}\n\nexport const CustomLine: React.FC<CustomLineProps> = (props) => {\n  return (\n    <>\n      <clipPath id={props.id}>\n        <rect height={props.height} width={props.width} x=\"0\" y=\"0\" />\n      </clipPath>\n      <g>\n        <path\n          cursor=\"unset\"\n          d={props.d}\n          style={{\n            strokeWidth: 2,\n            strokeLinejoin: 'round',\n            fill: 'none',\n            stroke: props.lineColor ? props.lineColor : props.stroke,\n            transition: 'opacity 0.2s ease-in, stroke 0.2s ease-in',\n            opacity: 1,\n          }}\n        />\n      </g>\n    </>\n  )\n}\n"],"mappings":";;AAQA,IAAa,IAAA,CAAyC,MAElD,gBAAA,EAAA,GAAA,EAAA,UAAA,CACE,gBAAA,EAAC,YAAD;AAAA,EAAU,IAAI,EAAM;AAAA,YAClB,gBAAA,EAAC,QAAD;AAAA,IAAM,QAAQ,EAAM;AAAA,IAAQ,OAAO,EAAM;AAAA,IAAO,GAAE;AAAA,IAAI,GAAE;AAAA,EAAK,CAAA;AACrD,CAAA,GACV,gBAAA,EAAC,KAAD,EAAA,UACE,gBAAA,EAAC,QAAD;AAAA,EACE,QAAO;AAAA,EACP,GAAG,EAAM;AAAA,EACT,OAAO;AAAA,IACL,aAAa;AAAA,IACb,gBAAgB;AAAA,IAChB,MAAM;AAAA,IACN,QAAQ,EAAM,YAAY,EAAM,YAAY,EAAM;AAAA,IAClD,YAAY;AAAA,IACZ,SAAS;AAAA,EACX;AACD,CAAA,EACA,CAAA,CACH,EAAA,CAAA"}

package/dist/common/components/charts/LineChart/CustomMark/index.es.js

@@ -0,0 +1,56 @@
+import { formatCurrency as M } from "../../../../../core/utils/NumberFormatting/index.es.js";
+import { MARKER_SHAPE_PATHS as C } from "../utils/markerShapes/index.es.js";
+import "react";
+import { Fragment as m, jsx as n, jsxs as d } from "react/jsx-runtime";
+import { useTheme as L } from "@mui/material/styles";
+import F from "@mui/material/useMediaQuery";
+var $ = (e) => {
+  const a = L(), s = e.showLabel, t = e.style, h = t?.markLabelStyles, l = Number(e.x), r = Number(e.y), o = e.handlers?.onMarkClick, u = e.handlers?.onMouseEnter, x = e.handlers?.onMouseLeave, y = F(a.breakpoints.up("sm")), f = e.valueFormatterString ? M(e.yData[e.dataIndex], e.valueFormatterString) : String(e.yData[e.dataIndex]), b = y ? a.typography.body2?.fontSize : a.typography.caption?.fontSize, i = 30, c = 24, k = l - i / 2, S = r - 30;
+  return /* @__PURE__ */ d(m, { children: [s && /* @__PURE__ */ d(m, { children: [e.labelBackgroundColor && /* @__PURE__ */ n("rect", {
+    fill: e.labelBackgroundColor,
+    height: c,
+    rx: "3",
+    width: i,
+    x: k,
+    y: S
+  }), /* @__PURE__ */ n("text", {
+    className: "MuiLineChart-markLabel",
+    dominantBaseline: "middle",
+    fill: e.labelFontColor ? e.labelFontColor : a.palette.text.primary,
+    style: {
+      fontSize: e.labelFontSize ? e.labelFontSize : b,
+      ...h
+    },
+    textAnchor: "middle",
+    x: l,
+    y: r - 28 + c / 2,
+    children: f
+  })] }), e.showMark && /* @__PURE__ */ n("path", {
+    cursor: o ? "pointer" : "unset",
+    d: C[e.shape ?? "circle"],
+    height: "20px",
+    onClick: (g) => {
+      o?.(g, e.dataIndex);
+    },
+    onMouseEnter: () => {
+      u?.(e.dataIndex);
+    },
+    onMouseLeave: () => {
+      x?.();
+    },
+    style: {
+      fill: t?.fill ? t.fill : a.palette.background.paper,
+      stroke: t?.stroke ? t.stroke : a.palette.primary.main,
+      strokeWidth: 2,
+      transform: `translate(${e.x}px, ${e.y}px)`,
+      transformOrigin: `${e.x}px, ${e.y}px`,
+      filter: t?.filter ? t.filter : "none"
+    },
+    width: "20px"
+  })] });
+};
+export {
+  $ as CustomMark
+};
+
+//# sourceMappingURL=index.es.js.map

package/dist/common/components/charts/LineChart/CustomMark/index.es.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.es.js","names":[],"sources":["../../../../../../src/common/components/charts/linechart/CustomMark.tsx"],"sourcesContent":["import React from 'react'\n\nimport { useTheme } from '@mui/material/styles'\nimport useMediaQuery from '@mui/material/useMediaQuery'\n\nimport type { MarkElementProps } from '@mui/x-charts'\n\nimport { MARKER_SHAPE_PATHS } from './utils/markerShapes'\nimport { formatCurrency } from '../../../../core/utils/NumberFormatting'\n\nexport type MarkHandlers = {\n  onMarkClick?: (event: React.MouseEvent<SVGPathElement, MouseEvent>, dataIndex: number) => void\n  onMouseEnter?: (dataIndex: number) => void\n  onMouseLeave?: () => void\n}\n\ninterface CustomMarkProps extends MarkElementProps {\n  handlers?: MarkHandlers\n  showLabel: boolean\n  showMark?: boolean\n  yData: number[]\n  style?: React.CSSProperties & {\n    markLabelStyles?: React.CSSProperties\n  }\n  labelBackgroundColor?: string\n  labelFontColor?: string\n  labelFontSize?: number\n  valueFormatterString?: string\n}\n\nexport const CustomMark: React.FC<CustomMarkProps> = (props) => {\n  const theme = useTheme()\n  const showLabel = props.showLabel\n  const styles = props.style\n  const markLabelStyles = styles?.markLabelStyles\n  const xNumber = Number(props.x)\n  const yNumber = Number(props.y)\n\n  const handleMarkClick = props.handlers?.onMarkClick\n  const handleMouseEnter = props.handlers?.onMouseEnter\n  const handleMouseLeave = props.handlers?.onMouseLeave\n\n  const isSmallScreenUp = useMediaQuery(theme.breakpoints.up('sm'))\n\n  // Calculate text dimensions for proper background sizing\n  const formattedValue = props.valueFormatterString\n    ? formatCurrency(props.yData[props.dataIndex], props.valueFormatterString)\n    : String(props.yData[props.dataIndex])\n  const fontSize = isSmallScreenUp\n    ? theme.typography.body2?.fontSize\n    : theme.typography.caption?.fontSize\n  const rectWidth = 30\n  const rectHeight = 24\n\n  // Center the rectangle around the text\n  const rectX = xNumber - rectWidth / 2\n  const rectY = yNumber - 30\n  return (\n    <>\n      {showLabel && (\n        <>\n          {props.labelBackgroundColor && (\n            <rect\n              fill={props.labelBackgroundColor}\n              height={rectHeight}\n              rx=\"3\"\n              width={rectWidth}\n              x={rectX}\n              y={rectY}\n            />\n          )}\n\n          <text\n            className=\"MuiLineChart-markLabel\"\n            dominantBaseline=\"middle\"\n            fill={props.labelFontColor ? props.labelFontColor : theme.palette.text.primary}\n            style={{\n              fontSize: props.labelFontSize ? props.labelFontSize : fontSize,\n              ...markLabelStyles,\n            }}\n            textAnchor=\"middle\"\n            x={xNumber}\n            y={yNumber - 28 + rectHeight / 2}\n          >\n            {formattedValue}\n          </text>\n        </>\n      )}\n      {props.showMark && (\n        <path\n          cursor={handleMarkClick ? 'pointer' : 'unset'}\n          d={MARKER_SHAPE_PATHS[props.shape ?? 'circle']}\n          height=\"20px\"\n          onClick={(event) => {\n            handleMarkClick?.(event, props.dataIndex)\n          }}\n          onMouseEnter={() => {\n            handleMouseEnter?.(props.dataIndex)\n          }}\n          onMouseLeave={() => {\n            handleMouseLeave?.()\n          }}\n          style={{\n            fill: styles?.fill ? styles.fill : theme.palette.background.paper,\n            stroke: styles?.stroke ? styles.stroke : theme.palette.primary.main,\n            strokeWidth: 2,\n            transform: `translate(${props.x}px, ${props.y}px)`,\n            transformOrigin: `${props.x}px, ${props.y}px`,\n            filter: styles?.filter ? styles.filter : 'none',\n          }}\n          width=\"20px\"\n        />\n      )}\n    </>\n  )\n}\n"],"mappings":";;;;;;AA8BA,IAAa,IAAA,CAAyC,MAAU;AAC9D,QAAM,IAAQ,EAAS,GACjB,IAAY,EAAM,WAClB,IAAS,EAAM,OACf,IAAkB,GAAQ,iBAC1B,IAAU,OAAO,EAAM,CAAC,GACxB,IAAU,OAAO,EAAM,CAAC,GAExB,IAAkB,EAAM,UAAU,aAClC,IAAmB,EAAM,UAAU,cACnC,IAAmB,EAAM,UAAU,cAEnC,IAAkB,EAAc,EAAM,YAAY,GAAG,IAAI,CAAC,GAG1D,IAAiB,EAAM,uBACzB,EAAe,EAAM,MAAM,EAAM,SAAA,GAAY,EAAM,oBAAoB,IACvE,OAAO,EAAM,MAAM,EAAM,SAAA,CAAU,GACjC,IAAW,IACb,EAAM,WAAW,OAAO,WACxB,EAAM,WAAW,SAAS,UACxB,IAAY,IACZ,IAAa,IAGb,IAAQ,IAAU,IAAY,GAC9B,IAAQ,IAAU;AACxB,SACE,gBAAA,EAAA,GAAA,EAAA,UAAA,CACG,KACC,gBAAA,EAAA,GAAA,EAAA,UAAA,CACG,EAAM,wBACL,gBAAA,EAAC,QAAD;AAAA,IACE,MAAM,EAAM;AAAA,IACZ,QAAQ;AAAA,IACR,IAAG;AAAA,IACH,OAAO;AAAA,IACP,GAAG;AAAA,IACH,GAAG;AAAA,EACJ,CAAA,GAGH,gBAAA,EAAC,QAAD;AAAA,IACE,WAAU;AAAA,IACV,kBAAiB;AAAA,IACjB,MAAM,EAAM,iBAAiB,EAAM,iBAAiB,EAAM,QAAQ,KAAK;AAAA,IACvE,OAAO;AAAA,MACL,UAAU,EAAM,gBAAgB,EAAM,gBAAgB;AAAA,MACtD,GAAG;AAAA,IACL;AAAA,IACA,YAAW;AAAA,IACX,GAAG;AAAA,IACH,GAAG,IAAU,KAAK,IAAa;AAAA,cAE9B;AAAA,EACG,CAAA,CACN,EAAA,CAAA,GAEH,EAAM,YACL,gBAAA,EAAC,QAAD;AAAA,IACE,QAAQ,IAAkB,YAAY;AAAA,IACtC,GAAG,EAAmB,EAAM,SAAS,QAAA;AAAA,IACrC,QAAO;AAAA,IACP,SAAA,CAAU,MAAU;AAClB,MAAA,IAAkB,GAAO,EAAM,SAAS;AAAA,IAC1C;AAAA,IACA,cAAA,MAAoB;AAClB,MAAA,IAAmB,EAAM,SAAS;AAAA,IACpC;AAAA,IACA,cAAA,MAAoB;AAClB,MAAA,IAAmB;AAAA,IACrB;AAAA,IACA,OAAO;AAAA,MACL,MAAM,GAAQ,OAAO,EAAO,OAAO,EAAM,QAAQ,WAAW;AAAA,MAC5D,QAAQ,GAAQ,SAAS,EAAO,SAAS,EAAM,QAAQ,QAAQ;AAAA,MAC/D,aAAa;AAAA,MACb,WAAW,aAAa,EAAM,CAAA,OAAQ,EAAM,CAAA;AAAA,MAC5C,iBAAiB,GAAG,EAAM,CAAA,OAAQ,EAAM,CAAA;AAAA,MACxC,QAAQ,GAAQ,SAAS,EAAO,SAAS;AAAA,IAC3C;AAAA,IACA,OAAM;AAAA,EACP,CAAA,CAEH,EAAA,CAAA;AAEN"}

package/dist/common/components/charts/LineChart/CustomTooltip/index.es.js

@@ -0,0 +1,138 @@
+import { formatCurrency as h } from "../../../../../core/utils/NumberFormatting/index.es.js";
+import { MARKER_SHAPE_PATHS as w, getMarkerShape as y } from "../utils/markerShapes/index.es.js";
+import { Text as e } from "@mxenabled/mxui";
+import { jsx as t, jsxs as i } from "react/jsx-runtime";
+import { useTheme as D } from "@mui/material/styles";
+import { Box as S, Stack as n } from "@mui/material";
+import { useAxesTooltip as T } from "@mui/x-charts/ChartsTooltip";
+function B({ customLabels: p, isCurrency: m = !0, labels: c = [], series: d, valueFormatterString: l = "0,0" }) {
+  const b = T(), x = D(), g = b?.[0];
+  if (!g) return null;
+  const { axisValue: f, dataIndex: o = 0 } = g;
+  if (p) {
+    const a = p[o]?.[0]?.header || String(f);
+    return /* @__PURE__ */ i(n, {
+      sx: {
+        backgroundColor: x.palette.background.paper,
+        boxShadow: "0 2px 8px 0 rgba(0, 0, 0, 0.12)",
+        flexDirection: "column",
+        alignItems: "flex-start",
+        borderRadius: "4px",
+        width: 250,
+        gap: 8,
+        px: 16,
+        py: 12
+      },
+      children: [/* @__PURE__ */ i(n, {
+        sx: {
+          flexDirection: "row",
+          justifyContent: "space-between",
+          alignItems: "center",
+          alignSelf: "stretch",
+          gap: 8,
+          marginTop: 4
+        },
+        children: [/* @__PURE__ */ t(e, {
+          variant: "h3",
+          children: a
+        }), /* @__PURE__ */ t(e, {
+          bold: !0,
+          variant: "h3",
+          children: h(d[0]?.data[o], l)
+        })]
+      }), p[o]?.some((r) => (typeof r == "string" ? 0 : r.amount) !== 0) ? p[o]?.map((r) => {
+        const s = typeof r == "string" ? r : r.label, u = typeof r == "string" ? 0 : r.amount;
+        return u === 0 ? null : /* @__PURE__ */ i(n, {
+          sx: {
+            flexDirection: "row",
+            justifyContent: "space-between",
+            alignItems: "center",
+            alignSelf: "stretch",
+            gap: 8,
+            marginTop: 4
+          },
+          children: [/* @__PURE__ */ i(n, {
+            sx: {
+              flexDirection: "row",
+              alignItems: "center",
+              gap: 8,
+              flex: 1,
+              minWidth: 0
+            },
+            children: [/* @__PURE__ */ t(S, { sx: {
+              width: "12px",
+              height: "12px",
+              backgroundColor: d[0]?.color,
+              borderRadius: "4px"
+            } }), /* @__PURE__ */ t(e, {
+              variant: "body1",
+              children: s
+            })]
+          }), /* @__PURE__ */ t(e, {
+            bold: !0,
+            variant: "body1",
+            children: h(Math.abs(u), l)
+          })]
+        }, s);
+      }) : /* @__PURE__ */ t(e, {
+        variant: "body1",
+        children: "No data"
+      })]
+    });
+  }
+  return /* @__PURE__ */ i(n, {
+    sx: {
+      backgroundColor: x.palette.background.paper,
+      boxShadow: "0 2px 8px 0 rgba(0, 0, 0, 0.12)",
+      flexDirection: "column",
+      alignItems: "flex-start",
+      borderRadius: "4px",
+      width: 225,
+      gap: 8,
+      px: 16,
+      py: 12
+    },
+    children: [/* @__PURE__ */ t(e, {
+      variant: "h3",
+      children: String(f)
+    }), d.map((a, r) => /* @__PURE__ */ i(n, {
+      sx: {
+        flexDirection: "row",
+        justifyContent: "space-between",
+        alignItems: "center",
+        alignSelf: "stretch",
+        gap: 8,
+        marginTop: 4
+      },
+      children: [/* @__PURE__ */ i(n, {
+        sx: {
+          flexDirection: "row",
+          alignItems: "center",
+          gap: 8
+        },
+        children: [/* @__PURE__ */ t("svg", {
+          "aria-hidden": "true",
+          height: 12,
+          viewBox: "-6 -6 12 12",
+          width: 12,
+          children: /* @__PURE__ */ t("path", {
+            d: w[y(r)],
+            fill: a.color
+          })
+        }), /* @__PURE__ */ t(e, {
+          variant: "body1",
+          children: typeof c[r] == "string" ? c[r] : c[r]?.label
+        })]
+      }), /* @__PURE__ */ t(e, {
+        bold: !0,
+        variant: "body1",
+        children: m ? h(a.data[o], l) : a.data[o]
+      })]
+    }, `${a.id}-${r}`))]
+  });
+}
+export {
+  B as CustomTooltip
+};
+
+//# sourceMappingURL=index.es.js.map

package/dist/common/components/charts/LineChart/CustomTooltip/index.es.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.es.js","names":[],"sources":["../../../../../../src/common/components/charts/linechart/CustomTooltip.tsx"],"sourcesContent":["import { Box, Stack } from '@mui/material'\nimport { useTheme } from '@mui/material/styles'\n\nimport { useAxesTooltip } from '@mui/x-charts/ChartsTooltip'\n\nimport { Text } from '@mxenabled/mxui'\n\nimport { LineChartLabel, TooltipLabel } from '../LineChart'\nimport { getMarkerShape, MARKER_SHAPE_PATHS } from './utils/markerShapes'\nimport { formatCurrency } from '../../../../core/utils/NumberFormatting'\n\ninterface CustomTooltipProps {\n  customLabels?: TooltipLabel[][]\n  isCurrency?: boolean\n  labels?: LineChartLabel[]\n  series: Array<{ id?: string; data: number[]; color?: string }>\n  valueFormatterString?: string\n}\n\nexport function CustomTooltip({\n  customLabels,\n  isCurrency = true,\n  labels = [],\n  series,\n  valueFormatterString = '0,0',\n}: CustomTooltipProps) {\n  const tooltipData = useAxesTooltip()\n  const theme = useTheme()\n\n  const firstAxisData = tooltipData?.[0]\n\n  if (!firstAxisData) return null\n\n  const { axisValue, dataIndex = 0 } = firstAxisData\n\n  if (customLabels) {\n    const headerText = customLabels[dataIndex]?.[0]?.header || String(axisValue)\n\n    return (\n      <Stack\n        sx={{\n          backgroundColor: theme.palette.background.paper,\n          boxShadow: '0 2px 8px 0 rgba(0, 0, 0, 0.12)',\n          flexDirection: 'column',\n          alignItems: 'flex-start',\n          borderRadius: '4px',\n          width: 250,\n          gap: 8,\n          px: 16,\n          py: 12,\n        }}\n      >\n        <Stack\n          sx={{\n            flexDirection: 'row',\n            justifyContent: 'space-between',\n            alignItems: 'center',\n            alignSelf: 'stretch',\n            gap: 8,\n            marginTop: 4,\n          }}\n        >\n          <Text variant=\"h3\">{headerText}</Text>\n          <Text bold={true} variant=\"h3\">\n            {formatCurrency(series[0]?.data[dataIndex] as number, valueFormatterString)}\n          </Text>\n        </Stack>\n        {customLabels[dataIndex]?.some((labelItem) => {\n          const amount = typeof labelItem === 'string' ? 0 : labelItem.amount\n          return amount !== 0\n        }) ? (\n          customLabels[dataIndex]?.map((labelItem) => {\n            const label = typeof labelItem === 'string' ? labelItem : labelItem.label\n            const amount = typeof labelItem === 'string' ? 0 : labelItem.amount\n\n            if (amount === 0) return null\n            return (\n              <Stack\n                key={label}\n                sx={{\n                  flexDirection: 'row',\n                  justifyContent: 'space-between',\n                  alignItems: 'center',\n                  alignSelf: 'stretch',\n                  gap: 8,\n                  marginTop: 4,\n                }}\n              >\n                <Stack\n                  sx={{\n                    flexDirection: 'row',\n                    alignItems: 'center',\n                    gap: 8,\n                    flex: 1,\n                    minWidth: 0,\n                  }}\n                >\n                  <Box\n                    sx={{\n                      width: '12px',\n                      height: '12px',\n                      backgroundColor: series[0]?.color,\n                      borderRadius: '4px',\n                    }}\n                  />\n                  <Text variant=\"body1\">{label}</Text>\n                </Stack>\n                <Text bold={true} variant=\"body1\">\n                  {formatCurrency(Math.abs(amount), valueFormatterString)}\n                </Text>\n              </Stack>\n            )\n          })\n        ) : (\n          <Text variant=\"body1\">No data</Text> //TODO: localize\n        )}\n      </Stack>\n    )\n  }\n  return (\n    <Stack\n      sx={{\n        backgroundColor: theme.palette.background.paper,\n        boxShadow: '0 2px 8px 0 rgba(0, 0, 0, 0.12)',\n        flexDirection: 'column',\n        alignItems: 'flex-start',\n        borderRadius: '4px',\n        width: 225,\n        gap: 8,\n        px: 16,\n        py: 12,\n      }}\n    >\n      <Text variant=\"h3\">{String(axisValue)}</Text>\n      {series.map((s, sIndex) => (\n        <Stack\n          key={`${s.id}-${sIndex}`}\n          sx={{\n            flexDirection: 'row',\n            justifyContent: 'space-between',\n            alignItems: 'center',\n            alignSelf: 'stretch',\n            gap: 8,\n            marginTop: 4,\n          }}\n        >\n          <Stack sx={{ flexDirection: 'row', alignItems: 'center', gap: 8 }}>\n            <svg aria-hidden=\"true\" height={12} viewBox=\"-6 -6 12 12\" width={12}>\n              <path d={MARKER_SHAPE_PATHS[getMarkerShape(sIndex)]} fill={s.color} />\n            </svg>\n            <Text variant=\"body1\">\n              {typeof labels[sIndex] === 'string' ? labels[sIndex] : labels[sIndex]?.label}\n            </Text>\n          </Stack>\n          <Text bold={true} variant=\"body1\">\n            {isCurrency\n              ? formatCurrency(s.data[dataIndex] as number, valueFormatterString)\n              : s.data[dataIndex]}\n          </Text>\n        </Stack>\n      ))}\n    </Stack>\n  )\n}\n"],"mappings":"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"}