@mx-cartographer/experiences 7.12.17 → 7.13.0

package/dist/{LineChart-B1qbKR8q.mjs → LineChart-DBSlRSEm.mjs}

@@ -1,22 +1,22 @@
-import { jsxs as i, jsx as e, Fragment as E } from "react/jsx-runtime";
-import _ from "@mui/material/Box";
-import { useTheme as j } from "@mui/material/styles";
-import { BarPlot as gt } from "@mui/x-charts/BarChart";
-import { ChartContainer as yt } from "@mui/x-charts/ChartContainer";
+import { jsxs as i, jsx as e, Fragment as I } from "react/jsx-runtime";
+import U from "@mui/material/Box";
+import { useTheme as N } from "@mui/material/styles";
+import { BarPlot as yt } from "@mui/x-charts/BarChart";
+import { ChartContainer as gt } from "@mui/x-charts/ChartContainer";
 import { ChartsAxisHighlight as pt } from "@mui/x-charts/ChartsAxisHighlight";
 import { ChartsReferenceLine as Lt } from "@mui/x-charts/ChartsReferenceLine";
-import { useAxesTooltip as kt, ChartsTooltipContainer as bt } from "@mui/x-charts/ChartsTooltip";
+import { useAxesTooltip as bt, ChartsTooltipContainer as kt } from "@mui/x-charts/ChartsTooltip";
 import { ChartsXAxis as Mt } from "@mui/x-charts/ChartsXAxis";
 import { ChartsYAxis as wt } from "@mui/x-charts/ChartsYAxis";
-import { AreaPlot as St, LinePlot as Ct, MarkPlot as vt } from "@mui/x-charts/LineChart";
+import { AreaPlot as Ct, LinePlot as vt, MarkPlot as St } from "@mui/x-charts/LineChart";
 import { f as p, c as O } from "./NumberFormatting-QCaNwbjv.mjs";
 import { observer as At } from "mobx-react-lite";
-import W from "@mui/material/Stack";
+import z from "@mui/material/Stack";
 import { Text as s } from "@mxenabled/mxui";
 import { u as Dt } from "./hooks-BxkfR-Ff.mjs";
 import Tt from "@mui/material/useMediaQuery";
-import { Stack as b, Box as Rt } from "@mui/material";
-const z = {
+import { Stack as k, Box as Rt } from "@mui/material";
+const B = {
   circle: "M4.514,0A4.514,4.514,0,1,1,-4.514,0A4.514,4.514,0,1,1,4.514,0",
   square: "M-4,-4L4,-4L4,4L-4,4Z",
   wye: "M0.6,0.6L0.6,4.5L-0.6,4.5L-0.6,0.6L-4,2.6L-3.4,1.5L-0.6,-0.1L-3.4,-1.5L-4,-2.6L-0.6,-0.6L-0.6,-4.5L0.6,-4.5L0.6,-0.6L4,-2.6L3.4,-1.5L0.6,-0.1L3.4,1.5L4,2.6L0.6,0.6Z",
@@ -24,7 +24,7 @@ const z = {
   cross: "M-1.5,-5L1.5,-5L1.5,-1.5L5,-1.5L5,1.5L1.5,1.5L1.5,5L-1.5,5L-1.5,1.5L-5,1.5L-5,-1.5L-1.5,-1.5Z",
   triangle: "M0,-5L4.33,3.5L-4.33,3.5Z",
   diamond: "M0,-5.5L3.9,0L0,5.5L-3.9,0Z"
-}, X = [
+}, _ = [
   "circle",
   "square",
   "wye",
@@ -33,19 +33,19 @@ const z = {
   "triangle",
   "diamond"
 ];
-function N(t) {
-  return X[t % X.length];
+function Z(t) {
+  return _[t % _.length];
 }
-const Bt = ({
+const Pt = ({
   label: t,
   customLegendVariant: r
 }) => {
-  const l = r || "Small";
-  return typeof t == "string" ? /* @__PURE__ */ e(s, { variant: l, children: t }) : typeof t == "object" && t.amount !== void 0 && t.label ? /* @__PURE__ */ i(E, { children: [
+  const l = r || "body2";
+  return typeof t == "string" ? /* @__PURE__ */ e(s, { variant: l, children: t }) : typeof t == "object" && t.amount !== void 0 && t.label ? /* @__PURE__ */ i(I, { children: [
     /* @__PURE__ */ e(s, { variant: l, children: t.label }),
     /* @__PURE__ */ e(s, { bold: !0, sx: { marginLeft: 8 }, variant: l, children: p(t.amount, "0,0") })
   ] }) : null;
-}, Pt = ({
+}, Et = ({
   average: t,
   customLegendVariant: r,
   customLegendBoxSx: l,
@@ -55,17 +55,17 @@ const Bt = ({
   title: h,
   valueFormatterString: f
 }) => {
-  const { common: m } = Dt(), c = r || "Small";
-  return /* @__PURE__ */ i(W, { style: { flexDirection: "row", gap: 24, ...x }, children: [
+  const { common: m } = Dt(), c = r || "body2";
+  return /* @__PURE__ */ i(z, { style: { flexDirection: "row", gap: 24, ...x }, children: [
     L.map((a, u) => {
       const d = o[u];
       return d ? /* @__PURE__ */ i(
-        W,
+        z,
         {
           style: { alignItems: "center", flexDirection: "row", flexWrap: "wrap" },
           children: [
             l !== void 0 ? /* @__PURE__ */ e(
-              _,
+              U,
               {
                 sx: {
                   width: 10,
@@ -86,7 +86,7 @@ const Bt = ({
                 children: /* @__PURE__ */ e(
                   "path",
                   {
-                    d: z[N(u)],
+                    d: B[Z(u)],
                     fill: a.color,
                     stroke: a.color,
                     strokeWidth: 1
@@ -94,13 +94,13 @@ const Bt = ({
                 )
               }
             ),
-            /* @__PURE__ */ e(Bt, { customLegendVariant: r, label: d })
+            /* @__PURE__ */ e(Pt, { customLegendVariant: r, label: d })
           ]
         },
         u
       ) : null;
     }),
-    t !== void 0 && /* @__PURE__ */ i(W, { sx: { alignItems: "center", flexDirection: "row" }, children: [
+    t !== void 0 && /* @__PURE__ */ i(z, { sx: { alignItems: "center", flexDirection: "row" }, children: [
       /* @__PURE__ */ e(s, { bold: !0, sx: { marginRight: 8 }, variant: c, children: "– –" }),
       /* @__PURE__ */ i(s, { variant: c, children: [
         h || m.average,
@@ -109,7 +109,7 @@ const Bt = ({
       /* @__PURE__ */ e(s, { bold: !0, variant: c, children: f ? p(t, f) : t })
     ] })
   ] });
-}, Et = At(Pt), It = (t) => /* @__PURE__ */ i(E, { children: [
+}, It = At(Et), $t = (t) => /* @__PURE__ */ i(I, { children: [
   /* @__PURE__ */ e("clipPath", { id: t.id, children: /* @__PURE__ */ e("rect", { height: t.height, width: t.width, x: "0", y: "0" }) }),
   /* @__PURE__ */ e("g", { children: /* @__PURE__ */ e(
     "path",
@@ -126,10 +126,10 @@ const Bt = ({
       }
     }
   ) })
-] }), $t = (t) => {
-  const r = j(), l = t.showLabel, o = t.style, L = o?.markLabelStyles, x = Number(t.x), h = Number(t.y), f = t.handlers?.onMarkClick, m = t.handlers?.onMouseEnter, c = t.handlers?.onMouseLeave, a = Tt(r.breakpoints.up("sm")), u = t.valueFormatterString ? p(t.yData[t.dataIndex], t.valueFormatterString) : String(t.yData[t.dataIndex]), d = a ? r.typography.Small?.fontSize : r.typography.XSmall?.fontSize, A = 30, D = 24, T = x - A / 2, R = h - 30;
-  return /* @__PURE__ */ i(E, { children: [
-    l && /* @__PURE__ */ i(E, { children: [
+] }), Wt = (t) => {
+  const r = N(), l = t.showLabel, o = t.style, L = o?.markLabelStyles, x = Number(t.x), h = Number(t.y), f = t.handlers?.onMarkClick, m = t.handlers?.onMouseEnter, c = t.handlers?.onMouseLeave, a = Tt(r.breakpoints.up("sm")), u = t.valueFormatterString ? p(t.yData[t.dataIndex], t.valueFormatterString) : String(t.yData[t.dataIndex]), d = a ? r.typography.body2?.fontSize : r.typography.caption?.fontSize, A = 30, D = 24, T = x - A / 2, R = h - 30;
+  return /* @__PURE__ */ i(I, { children: [
+    l && /* @__PURE__ */ i(I, { children: [
       t.labelBackgroundColor && /* @__PURE__ */ e(
         "rect",
         {
@@ -162,10 +162,10 @@ const Bt = ({
       "path",
       {
         cursor: f ? "pointer" : "unset",
-        d: z[t.shape ?? "circle"],
+        d: B[t.shape ?? "circle"],
         height: "20px",
-        onClick: (I) => {
-          f?.(I, t.dataIndex);
+        onClick: ($) => {
+          f?.($, t.dataIndex);
         },
         onMouseEnter: () => {
           m?.(t.dataIndex);
@@ -186,19 +186,19 @@ const Bt = ({
     )
   ] });
 };
-function Ht({
+function jt({
   customLabels: t,
   labels: r = [],
   series: l,
   valueFormatterString: o = "0,0"
 }) {
-  const L = kt(), x = j(), h = L?.[0];
+  const L = bt(), x = N(), h = L?.[0];
   if (!h) return null;
   const { axisValue: f, dataIndex: m = 0 } = h;
   if (t) {
     const c = t[m]?.[0]?.header || String(f);
     return /* @__PURE__ */ i(
-      b,
+      k,
       {
         sx: {
           backgroundColor: x.palette.background.paper,
@@ -213,7 +213,7 @@ function Ht({
         },
         children: [
           /* @__PURE__ */ i(
-            b,
+            k,
             {
               sx: {
                 flexDirection: "row",
@@ -224,15 +224,15 @@ function Ht({
                 marginTop: 4
               },
               children: [
-                /* @__PURE__ */ e(s, { variant: "H3", children: c }),
-                /* @__PURE__ */ e(s, { bold: !0, variant: "H3", children: p(l[0]?.data[m], o) })
+                /* @__PURE__ */ e(s, { variant: "h3", children: c }),
+                /* @__PURE__ */ e(s, { bold: !0, variant: "h3", children: p(l[0]?.data[m], o) })
               ]
             }
           ),
           t[m]?.some((a) => (typeof a == "string" ? 0 : a.amount) !== 0) ? t[m]?.map((a) => {
             const u = typeof a == "string" ? a : a.label, d = typeof a == "string" ? 0 : a.amount;
             return d === 0 ? null : /* @__PURE__ */ i(
-              b,
+              k,
               {
                 sx: {
                   flexDirection: "row",
@@ -244,7 +244,7 @@ function Ht({
                 },
                 children: [
                   /* @__PURE__ */ i(
-                    b,
+                    k,
                     {
                       sx: {
                         flexDirection: "row",
@@ -265,22 +265,22 @@ function Ht({
                             }
                           }
                         ),
-                        /* @__PURE__ */ e(s, { variant: "Body", children: u })
+                        /* @__PURE__ */ e(s, { variant: "body1", children: u })
                       ]
                     }
                   ),
-                  /* @__PURE__ */ e(s, { bold: !0, variant: "Body", children: p(Math.abs(d), o) })
+                  /* @__PURE__ */ e(s, { bold: !0, variant: "body1", children: p(Math.abs(d), o) })
                 ]
               },
               u
             );
-          }) : /* @__PURE__ */ e(s, { variant: "Body", children: "No data" })
+          }) : /* @__PURE__ */ e(s, { variant: "body1", children: "No data" })
         ]
       }
     );
   }
   return /* @__PURE__ */ i(
-    b,
+    k,
     {
       sx: {
         backgroundColor: x.palette.background.paper,
@@ -294,9 +294,9 @@ function Ht({
         py: 12
       },
       children: [
-        /* @__PURE__ */ e(s, { variant: "H3", children: String(f) }),
+        /* @__PURE__ */ e(s, { variant: "h3", children: String(f) }),
         l.map((c, a) => /* @__PURE__ */ i(
-          b,
+          k,
           {
             sx: {
               flexDirection: "row",
@@ -307,11 +307,11 @@ function Ht({
               marginTop: 4
             },
             children: [
-              /* @__PURE__ */ i(b, { sx: { flexDirection: "row", alignItems: "center", gap: 8 }, children: [
-                /* @__PURE__ */ e("svg", { "aria-hidden": "true", height: 12, viewBox: "-6 -6 12 12", width: 12, children: /* @__PURE__ */ e("path", { d: z[N(a)], fill: c.color }) }),
-                /* @__PURE__ */ e(s, { variant: "Body", children: typeof r[a] == "string" ? r[a] : r[a]?.label })
+              /* @__PURE__ */ i(k, { sx: { flexDirection: "row", alignItems: "center", gap: 8 }, children: [
+                /* @__PURE__ */ e("svg", { "aria-hidden": "true", height: 12, viewBox: "-6 -6 12 12", width: 12, children: /* @__PURE__ */ e("path", { d: B[Z(a)], fill: c.color }) }),
+                /* @__PURE__ */ e(s, { variant: "body1", children: typeof r[a] == "string" ? r[a] : r[a]?.label })
               ] }),
-              /* @__PURE__ */ e(s, { bold: !0, variant: "Body", children: p(c.data[m], o) })
+              /* @__PURE__ */ e(s, { bold: !0, variant: "body1", children: p(c.data[m], o) })
             ]
           },
           c.id
@@ -338,19 +338,19 @@ const ne = ({
   isGraphClippingXAxis: D = !1,
   labels: T,
   labelBackgroundColor: R,
-  labelFontColor: I,
-  labelFontSize: U,
+  labelFontColor: $,
+  labelFontSize: X,
   margin: Y,
   markHandlers: K,
   markStyles: Q,
   minRange: V,
   maxRange: J,
-  onItemClick: $,
-  peerAverage: Z,
+  onItemClick: W,
+  peerAverage: H,
   showArea: G = !1,
   showAverage: q = !1,
   showAxisHighlight: tt = !1,
-  showBars: H = !1,
+  showBars: j = !1,
   showLegend: et = !1,
   showMark: nt = !0,
   showMarkLabel: rt = !1,
@@ -361,20 +361,20 @@ const ne = ({
   showYAxisTicks: st = !1,
   title: ct,
   useCustomMark: dt = !1,
-  valueFormatterString: k,
+  valueFormatterString: b,
   width: ht,
   xAxisScaleType: mt
 }) => {
-  const g = j(), ut = d.flat().map((n) => n.x), w = d.flat().map((n) => n.y), F = Z || Math.round(w.reduce((n, M) => M + n, 0) / w.length), S = Math.floor(Math.min(...w) / 100) * 100, C = Math.ceil(Math.max(...w) / 100) * 100, B = d.map((n, M) => ({
-    type: H ? "bar" : "line",
+  const y = N(), ut = d.flat().map((n) => n.x), w = d.flat().map((n) => n.y), F = H || Math.round(w.reduce((n, M) => M + n, 0) / w.length), C = Math.floor(Math.min(...w) / 100) * 100, v = Math.ceil(Math.max(...w) / 100) * 100, P = d.map((n, M) => ({
+    type: j ? "bar" : "line",
     curve: f,
-    color: H ? g.palette.chart?.chart6 : h[M] ?? g.palette.primary.main,
-    data: n.map((y) => y.y),
+    color: j ? y.palette.chart?.chart6 : h[M] ?? y.palette.primary.main,
+    data: n.map((g) => g.y),
     area: G,
     baseline: l,
     showMark: !0,
-    shape: N(M),
-    valueFormatter: (y) => k ? p(y || 0, k) : String(y)
+    shape: Z(M),
+    valueFormatter: (g) => b ? p(g || 0, b) : String(g)
   })), ft = {
     ...{
       top: 60,
@@ -384,19 +384,19 @@ const ne = ({
     },
     ...Y
   };
-  let v = V ?? S, P = J ?? C;
+  let S = V ?? C, E = J ?? v;
   if (o === "networthChart") {
-    const n = C - S, M = n < C * 0.05 ? 0.25 : 0.2, y = Math.max(n * M, C * 0.015);
-    v = S - y < 0 ? S : S - y, P = C + y;
+    const n = v - C, M = n < v * 0.05 ? 0.25 : 0.2, g = Math.max(n * M, v * 0.015);
+    S = C - g < 0 ? C : C - g, E = v + g;
   }
   const xt = () => {
     if (o === "creditOverTime")
-      return O(v, 850, 5);
+      return O(S, 850, 5);
     if (o === "networthChart")
-      return O(v, P, 5);
+      return O(S, E, 5);
   };
   return /* @__PURE__ */ i(
-    _,
+    U,
     {
       sx: {
         position: "relative",
@@ -415,11 +415,11 @@ const ne = ({
       },
       children: [
         /* @__PURE__ */ i(
-          yt,
+          gt,
           {
             height: A,
             margin: ft,
-            series: B,
+            series: P,
             sx: {
               "& .MuiBarLabel-root": {
                 fontSize: 10,
@@ -429,29 +429,29 @@ const ne = ({
                 opacity: 0.15
               },
               "& .MuiChartsAxis-tickLabel > tspan": {
-                fontFamily: g.typography.Small.fontFamily
+                fontFamily: y.typography.body2.fontFamily
               },
               "& .MuiLineChart-markLabel": {
-                fontFamily: g.typography.Small.fontFamily
+                fontFamily: y.typography.body2.fontFamily
               }
             },
             width: ht,
-            xAxis: [{ data: ut, scaleType: mt || (H ? "band" : "point") }],
+            xAxis: [{ data: ut, scaleType: mt || (j ? "band" : "point") }],
             yAxis: [
               {
                 tickInterval: xt(),
-                min: D ? -22 : v,
-                max: P || 100,
-                colorMap: G && B.length < 2 ? {
+                min: D ? -22 : S,
+                max: E || 100,
+                colorMap: G && P.length < 2 ? {
                   type: "continuous",
-                  min: v,
-                  max: P,
+                  min: S,
+                  max: E,
                   color: [
-                    g.palette.background.paper,
-                    h[0] ?? g.palette.primary.main
+                    y.palette.background.paper,
+                    h[0] ?? y.palette.primary.main
                   ]
                 } : void 0,
-                valueFormatter: (n) => k ? p(n, k) : String(n),
+                valueFormatter: (n) => b ? p(n, b) : String(n),
                 width: 62
               }
             ],
@@ -460,7 +460,7 @@ const ne = ({
                 Lt,
                 {
                   lineStyle: {
-                    stroke: R ? g.palette.neutral.main : g.palette.neutral.dark,
+                    stroke: R ? y.palette.neutral.main : y.palette.neutral.dark,
                     strokeDasharray: "10, 8",
                     strokeWidth: 2
                   },
@@ -468,9 +468,9 @@ const ne = ({
                 }
               ),
               /* @__PURE__ */ e(
-                St,
+                Ct,
                 {
-                  onItemClick: $,
+                  onItemClick: W,
                   ...t && {
                     slots: {
                       area: (n) => /* @__PURE__ */ i("g", { children: [
@@ -485,36 +485,36 @@ const ne = ({
                 }
               ),
               /* @__PURE__ */ e(
-                Ct,
+                vt,
                 {
-                  onItemClick: $,
+                  onItemClick: W,
                   slots: {
                     line: (n) => /* @__PURE__ */ e(
-                      It,
+                      $t,
                       {
                         ...n,
-                        lineColor: t ?? n.ownerState.color ?? g.palette.primary.main
+                        lineColor: t ?? n.ownerState.color ?? y.palette.primary.main
                       }
                     )
                   }
                 }
               ),
               /* @__PURE__ */ e(
-                vt,
+                St,
                 {
-                  onItemClick: $,
+                  onItemClick: W,
                   slots: dt ? {
                     mark: (n) => /* @__PURE__ */ e(
-                      $t,
+                      Wt,
                       {
                         handlers: K,
                         labelBackgroundColor: R,
-                        labelFontColor: I,
-                        labelFontSize: U,
+                        labelFontColor: $,
+                        labelFontSize: X,
                         showLabel: rt,
                         showMark: nt || n.dataIndex === d[0].length - 1,
                         style: Q?.(n.dataIndex) ?? {},
-                        valueFormatterString: k,
+                        valueFormatterString: b,
                         yData: w,
                         ...n
                       }
@@ -523,7 +523,7 @@ const ne = ({
                 }
               ),
               /* @__PURE__ */ e(
-                gt,
+                yt,
                 {
                   barLabel: (n) => Number(n.value) > 0 ? `$${n.value}` : null,
                   borderRadius: 10
@@ -570,26 +570,26 @@ const ne = ({
                 }
               ),
               tt && /* @__PURE__ */ e(pt, { x: "line" }),
-              at && /* @__PURE__ */ e(bt, { trigger: "axis", children: /* @__PURE__ */ e(
-                Ht,
+              at && /* @__PURE__ */ e(kt, { trigger: "axis", children: /* @__PURE__ */ e(
+                jt,
                 {
                   customLabels: u,
                   labels: T,
-                  series: B,
-                  valueFormatterString: k
+                  series: P,
+                  valueFormatterString: b
                 }
               ) })
             ]
           }
         ),
         et && /* @__PURE__ */ e(
-          Et,
+          It,
           {
             average: q ? F : void 0,
             customLegendBoxSx: a,
             customLegendVariant: m,
             labels: T,
-            series: B,
+            series: P,
             style: {
               position: "absolute",
               top: 16,
@@ -597,7 +597,7 @@ const ne = ({
               ...c
             },
             title: ct,
-            valueFormatterString: k
+            valueFormatterString: b
           }
         )
       ]