@mx-cartographer/experiences 8.0.0-alpha.bb4 → 8.0.0-alpha.sms2

package/dist/{LineChart-C1PxNf7P.mjs → LineChart-bc1D9xBE.mjs}

@@ -1,19 +1,19 @@
-import { jsxs as a, Fragment as $, jsx as t } from "react/jsx-runtime";
-import X from "@mui/material/Box";
+import { jsxs as a, Fragment as B, jsx as t } from "react/jsx-runtime";
+import F from "@mui/material/Box";
 import { useTheme as Y } from "@mui/material/styles";
 import { ResponsiveChartContainer as fe, ChartsReferenceLine as xe, AreaPlot as ye, LinePlot as ge, MarkPlot as pe, BarPlot as be, ChartsXAxis as ke, ChartsYAxis as Me, ChartsAxisHighlight as Ce } from "@mui/x-charts";
-import { f as p, c as F } from "./NumberFormatting-DjTD0t3W.mjs";
+import { f as p, c as O } from "./NumberFormatting-DjTD0t3W.mjs";
 import we from "@mui/material/useMediaQuery";
 import { observer as Le } from "mobx-react-lite";
-import W from "@mui/material/Stack";
+import P from "@mui/material/Stack";
 import { Text as l } from "@mxenabled/mxui";
-import { u as ve } from "./hooks-C41HAxM5.mjs";
-import { useTheme as Se, Stack as M, Box as H } from "@mui/material";
+import { u as Se } from "./hooks-C41HAxM5.mjs";
+import { useTheme as ve, Stack as M, Box as X } from "@mui/material";
 import { ChartsTooltip as Te } from "@mui/x-charts/ChartsTooltip";
 const De = (e) => {
-  const r = Y(), s = e.showLabel, o = e.style, b = o?.markLabelStyles, x = Number(e.x), m = Number(e.y), h = e.handlers?.onMarkClick, u = e.handlers?.onMouseEnter, c = e.handlers?.onMouseLeave, i = we(r.breakpoints.up("sm")), f = e.valueFormatterString ? p(e.yData[e.dataIndex], e.valueFormatterString) : String(e.yData[e.dataIndex]), d = i ? r.typography.body2?.fontSize : r.typography.caption?.fontSize, T = 30, D = 24, A = x - T / 2, I = m - 30;
-  return /* @__PURE__ */ a($, { children: [
-    s && /* @__PURE__ */ a($, { children: [
+  const r = Y(), s = e.showLabel, o = e.style, b = o?.markLabelStyles, x = Number(e.x), u = Number(e.y), h = e.handlers?.onMarkClick, m = e.handlers?.onMouseEnter, c = e.handlers?.onMouseLeave, i = we(r.breakpoints.up("sm")), f = e.valueFormatterString ? p(e.yData[e.dataIndex], e.valueFormatterString) : String(e.yData[e.dataIndex]), d = i ? r.typography.Small?.fontSize : r.typography.XSmall?.fontSize, T = 30, D = 24, A = x - T / 2, I = u - 30;
+  return /* @__PURE__ */ a(B, { children: [
+    s && /* @__PURE__ */ a(B, { children: [
       e.labelBackgroundColor && /* @__PURE__ */ t(
         "rect",
         {
@@ -37,7 +37,7 @@ const De = (e) => {
           },
           textAnchor: "middle",
           x,
-          y: m - 28 + D / 2,
+          y: u - 28 + D / 2,
           children: f
         }
       )
@@ -48,11 +48,11 @@ const De = (e) => {
         cursor: h ? "pointer" : "unset",
         d: "M4.514,0A4.514,4.514,0,1,1,-4.514,0A4.514,4.514,0,1,1,4.514,0",
         height: "20px",
-        onClick: (j) => {
-          h?.(j, e.dataIndex);
+        onClick: ($) => {
+          h?.($, e.dataIndex);
         },
         onMouseEnter: () => {
-          u?.(e.dataIndex);
+          m?.(e.dataIndex);
         },
         onMouseLeave: () => {
           c?.();
@@ -69,7 +69,7 @@ const De = (e) => {
       }
     )
   ] });
-}, Ae = (e) => /* @__PURE__ */ a($, { children: [
+}, Ae = (e) => /* @__PURE__ */ a(B, { 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",
@@ -90,8 +90,8 @@ const De = (e) => {
   label: e,
   customLegendVariant: r
 }) => {
-  const s = r || "body2";
-  return typeof e == "string" ? /* @__PURE__ */ t(l, { variant: s, children: e }) : typeof e == "object" && e.amount !== void 0 && e.label ? /* @__PURE__ */ a($, { children: [
+  const s = r || "Small";
+  return typeof e == "string" ? /* @__PURE__ */ t(l, { variant: s, children: e }) : typeof e == "object" && e.amount !== void 0 && e.label ? /* @__PURE__ */ a(B, { children: [
     /* @__PURE__ */ t(l, { variant: s, children: e.label }),
     /* @__PURE__ */ t(l, { bold: !0, sx: { marginLeft: 8 }, variant: s, children: p(e.amount, "0,0") })
   ] }) : null;
@@ -102,20 +102,20 @@ const De = (e) => {
   labels: o = [],
   series: b,
   style: x,
-  title: m,
+  title: u,
   valueFormatterString: h
 }) => {
-  const { common: u } = ve(), c = r || "body2";
-  return /* @__PURE__ */ a(W, { style: { flexDirection: "row", gap: 24, ...x }, children: [
+  const { common: m } = Se(), c = r || "Small";
+  return /* @__PURE__ */ a(P, { style: { flexDirection: "row", gap: 24, ...x }, children: [
     b.map((i, f) => {
       const d = o[f];
       return d ? /* @__PURE__ */ a(
-        W,
+        P,
         {
           style: { alignItems: "center", flexDirection: "row", flexWrap: "wrap" },
           children: [
             /* @__PURE__ */ t(
-              X,
+              F,
               {
                 sx: {
                   width: 10,
@@ -132,31 +132,31 @@ const De = (e) => {
         f
       ) : null;
     }),
-    e && /* @__PURE__ */ a(W, { sx: { alignItems: "center", flexDirection: "row" }, children: [
+    e && /* @__PURE__ */ a(P, { sx: { alignItems: "center", flexDirection: "row" }, children: [
       /* @__PURE__ */ t(l, { bold: !0, sx: { marginRight: 8 }, variant: c, children: "– –" }),
       /* @__PURE__ */ a(l, { variant: c, children: [
-        m || u.average,
+        u || m.average,
         "  "
       ] }),
       /* @__PURE__ */ t(l, { bold: !0, variant: c, children: h ? p(e, h) : e })
     ] })
   ] });
-}, $e = Le(Re);
-function je({
+}, Be = Le(Re);
+function $e({
   customLabels: e,
   labels: r = [],
   valueFormatterString: s = "0,0"
 }) {
-  const o = Se();
+  const o = ve();
   return /* @__PURE__ */ t(
     Te,
     {
       showCrosshair: !0,
       slots: {
         axisContent: (b) => {
-          const { axisValue: x, dataIndex: m, series: h } = b, u = m ?? 0;
+          const { axisValue: x, dataIndex: u, series: h } = b, m = u ?? 0;
           if (e) {
-            const c = e[u]?.[0]?.header || String(x);
+            const c = e[m]?.[0]?.header || String(x);
             return /* @__PURE__ */ a(
               M,
               {
@@ -184,12 +184,12 @@ function je({
                         marginTop: 4
                       },
                       children: [
-                        /* @__PURE__ */ t(l, { variant: "h3", children: c }),
-                        /* @__PURE__ */ t(l, { bold: !0, variant: "h3", children: p(h[0]?.data[u], s) })
+                        /* @__PURE__ */ t(l, { variant: "H3", children: c }),
+                        /* @__PURE__ */ t(l, { bold: !0, variant: "H3", children: p(h[0]?.data[m], s) })
                       ]
                     }
                   ),
-                  e[u]?.some((i) => (typeof i == "string" ? 0 : i.amount) !== 0) ? e[u]?.map((i) => {
+                  e[m]?.some((i) => (typeof i == "string" ? 0 : i.amount) !== 0) ? e[m]?.map((i) => {
                     const f = typeof i == "string" ? i : i.label, d = typeof i == "string" ? 0 : i.amount;
                     return d === 0 ? null : /* @__PURE__ */ a(
                       M,
@@ -215,7 +215,7 @@ function je({
                               },
                               children: [
                                 /* @__PURE__ */ t(
-                                  H,
+                                  X,
                                   {
                                     sx: {
                                       width: "12px",
@@ -225,16 +225,16 @@ function je({
                                     }
                                   }
                                 ),
-                                /* @__PURE__ */ t(l, { variant: "body1", children: f })
+                                /* @__PURE__ */ t(l, { variant: "Body", children: f })
                               ]
                             }
                           ),
-                          /* @__PURE__ */ t(l, { bold: !0, variant: "body1", children: p(Math.abs(d), s) })
+                          /* @__PURE__ */ t(l, { bold: !0, variant: "Body", children: p(Math.abs(d), s) })
                         ]
                       },
                       f
                     );
-                  }) : /* @__PURE__ */ t(l, { variant: "body1", children: "No data" })
+                  }) : /* @__PURE__ */ t(l, { variant: "Body", children: "No data" })
                 ]
               }
             );
@@ -254,7 +254,7 @@ function je({
                 py: 12
               },
               children: [
-                /* @__PURE__ */ t(l, { variant: "h3", children: String(x) }),
+                /* @__PURE__ */ t(l, { variant: "H3", children: String(x) }),
                 h.map((c, i) => /* @__PURE__ */ a(
                   M,
                   {
@@ -269,7 +269,7 @@ function je({
                     children: [
                       /* @__PURE__ */ a(M, { sx: { flexDirection: "row", alignItems: "center", gap: 8 }, children: [
                         /* @__PURE__ */ t(
-                          H,
+                          X,
                           {
                             sx: {
                               width: "12px",
@@ -279,9 +279,9 @@ function je({
                             }
                           }
                         ),
-                        /* @__PURE__ */ t(l, { variant: "body1", children: typeof r[i] == "string" ? r[i] : r[i]?.label })
+                        /* @__PURE__ */ t(l, { variant: "Body", children: typeof r[i] == "string" ? r[i] : r[i]?.label })
                       ] }),
-                      /* @__PURE__ */ t(l, { bold: !0, variant: "body1", children: p(c.data[u], s) })
+                      /* @__PURE__ */ t(l, { bold: !0, variant: "Body", children: p(c.data[m], s) })
                     ]
                   },
                   c.id
@@ -302,9 +302,9 @@ const Qe = ({
   chartFor: o,
   chartXaxisSx: b,
   chartYaxisSx: x,
-  colors: m,
+  colors: u,
   curveType: h = "linear",
-  customLegendVariant: u,
+  customLegendVariant: m,
   customLegendSx: c,
   customLegendBoxSx: i,
   customTooltipLabels: f,
@@ -313,19 +313,19 @@ const Qe = ({
   isGraphClippingXAxis: D = !1,
   labels: A,
   labelBackgroundColor: I,
-  labelFontColor: j,
+  labelFontColor: $,
   labelFontSize: q,
   margin: Q,
   markHandlers: U,
   markStyles: V,
   minRange: J,
   maxRange: K,
-  onItemClick: z,
-  peerAverage: B,
+  onItemClick: j,
+  peerAverage: W,
   showArea: E = !1,
-  showAverage: G = !1,
+  showAverage: H = !1,
   showAxisHighlight: Z = !1,
-  showBars: N = !1,
+  showBars: z = !1,
   showLegend: _ = !1,
   showMark: ee = !0,
   showMarkLabel: te = !1,
@@ -340,16 +340,16 @@ const Qe = ({
   width: ce,
   xAxisScaleType: de
 }) => {
-  const y = Y(), he = d.flat().map((n) => n.x), C = d.flat().map((n) => n.y), O = B || Math.round(C.reduce((n, S) => S + n, 0) / C.length), w = Math.floor(Math.min(...C) / 100) * 100, L = Math.ceil(Math.max(...C) / 100) * 100, P = d.map((n, S) => ({
-    type: N ? "bar" : "line",
+  const y = Y(), he = d.flat().map((n) => n.x), C = d.flat().map((n) => n.y), G = W || Math.round(C.reduce((n, v) => v + n, 0) / C.length), w = Math.floor(Math.min(...C) / 100) * 100, L = Math.ceil(Math.max(...C) / 100) * 100, N = d.map((n, v) => ({
+    type: z ? "bar" : "line",
     curve: h,
-    color: N ? y.palette.chart?.chart6 : m[S] ?? y.palette.primary.main,
+    color: z ? y.palette.chart?.chart6 : u[v] ?? y.palette.primary.main,
     data: n.map((g) => g.y),
     area: E,
     baseline: s,
     showMark: !0,
     valueFormatter: (g) => k ? p(g || 0, k) : String(g)
-  })), ue = {
+  })), me = {
     ...{
       top: 60,
       right: 35,
@@ -358,19 +358,19 @@ const Qe = ({
     },
     ...Q
   };
-  let v = J ?? w, R = K ?? L;
+  let S = J ?? w, R = K ?? L;
   if (o === "networthChart") {
-    const n = L - w, S = n < L * 0.05 ? 0.25 : 0.2, g = Math.max(n * S, L * 0.015);
-    v = w - g < 0 ? w : w - g, R = L + g;
+    const n = L - w, v = n < L * 0.05 ? 0.25 : 0.2, g = Math.max(n * v, L * 0.015);
+    S = w - g < 0 ? w : w - g, R = L + g;
   }
-  const me = () => {
+  const ue = () => {
     if (o === "creditOverTime")
-      return F(v, 850, 5);
+      return O(S, 850, 5);
     if (o === "networthChart")
-      return F(v, R, 5);
+      return O(S, R, 5);
   };
   return /* @__PURE__ */ a(
-    X,
+    F,
     {
       sx: {
         position: "relative",
@@ -392,8 +392,8 @@ const Qe = ({
           fe,
           {
             height: T,
-            margin: ue,
-            series: P,
+            margin: me,
+            series: N,
             sx: {
               "& .MuiBarLabel-root": {
                 fontSize: 10,
@@ -403,33 +403,33 @@ const Qe = ({
                 opacity: 0.15
               },
               "& .MuiChartsAxis-tickLabel > tspan": {
-                fontFamily: y.typography.body2.fontFamily
+                fontFamily: y.typography.Small.fontFamily
               },
               "& .MuiLineChart-markLabel": {
-                fontFamily: y.typography.body2.fontFamily
+                fontFamily: y.typography.Small.fontFamily
               }
             },
             width: ce,
-            xAxis: [{ data: he, scaleType: de || (N ? "band" : "point") }],
+            xAxis: [{ data: he, scaleType: de || (z ? "band" : "point") }],
             yAxis: [
               {
-                tickInterval: me(),
-                min: D ? -22 : v,
+                tickInterval: ue(),
+                min: D ? -22 : S,
                 max: R || 100,
-                colorMap: E && P.length < 2 ? {
+                colorMap: E && N.length < 2 ? {
                   type: "continuous",
-                  min: v,
+                  min: S,
                   max: R,
                   color: [
                     y.palette.background.paper,
-                    m[0] ?? y.palette.primary.main
+                    u[0] ?? y.palette.primary.main
                   ]
                 } : void 0,
                 valueFormatter: (n) => k ? p(n, k) : String(n)
               }
             ],
             children: [
-              G && /* @__PURE__ */ t(
+              H && /* @__PURE__ */ t(
                 xe,
                 {
                   lineStyle: {
@@ -437,13 +437,13 @@ const Qe = ({
                     strokeDasharray: "10, 8",
                     strokeWidth: 2
                   },
-                  y: O
+                  y: G
                 }
               ),
               /* @__PURE__ */ t(
                 ye,
                 {
-                  onItemClick: z,
+                  onItemClick: j,
                   ...e && {
                     slots: {
                       area: (n) => /* @__PURE__ */ a("g", { children: [
@@ -460,7 +460,7 @@ const Qe = ({
               /* @__PURE__ */ t(
                 ge,
                 {
-                  onItemClick: z,
+                  onItemClick: j,
                   slots: {
                     line: (n) => /* @__PURE__ */ t(
                       Ae,
@@ -475,14 +475,14 @@ const Qe = ({
               /* @__PURE__ */ t(
                 pe,
                 {
-                  onItemClick: z,
+                  onItemClick: j,
                   slots: se ? {
                     mark: (n) => /* @__PURE__ */ t(
                       De,
                       {
                         handlers: U,
                         labelBackgroundColor: I,
-                        labelFontColor: j,
+                        labelFontColor: $,
                         labelFontSize: q,
                         showLabel: te,
                         showMark: ee || n.dataIndex === d[0].length - 1,
@@ -544,7 +544,7 @@ const Qe = ({
               ),
               Z && /* @__PURE__ */ t(Ce, { x: "line" }),
               ne && /* @__PURE__ */ t(
-                je,
+                $e,
                 {
                   customLabels: f,
                   labels: A,
@@ -555,13 +555,13 @@ const Qe = ({
           }
         ),
         _ && /* @__PURE__ */ t(
-          $e,
+          Be,
           {
-            average: G ? O : void 0,
+            average: H ? G : void 0,
             customLegendBoxSx: i,
-            customLegendVariant: u,
+            customLegendVariant: m,
             labels: A,
-            series: P,
+            series: N,
             style: {
               position: "absolute",
               top: 16,

package/dist/Loader-BSWSYqvn.mjs

@@ -0,0 +1,24 @@
+import { jsxs as s, jsx as o } from "react/jsx-runtime";
+import c from "@mui/material/CircularProgress";
+import a from "@mui/material/Stack";
+import { useTokens as i, Text as m } from "@mxenabled/mxui";
+const f = ({ height: e = 250, label: r = "", size: t = 32 }) => {
+  const n = i();
+  return /* @__PURE__ */ s(
+    a,
+    {
+      alignItems: "center",
+      gap: n.Spacing.XLarge,
+      height: e,
+      justifyContent: "center",
+      sx: { backgroundColor: "background.paper" },
+      children: [
+        /* @__PURE__ */ o(c, { size: t }),
+        r && /* @__PURE__ */ o(m, { children: r })
+      ]
+    }
+  );
+};
+export {
+  f as L
+};