@mx-cartographer/insights-ui 1.16.11-alpha.lonniem.2 → 1.16.11-alpha.lonniem.4

package/dist/index.es.js

@@ -1,17 +1,17 @@
 import { jsx as e, jsxs as d, Fragment as V } from "react/jsx-runtime";
 import * as i from "react";
-import v, { useState as oe, useRef as U, useLayoutEffect as se, useMemo as me, useCallback as He, forwardRef as Y, useEffect as xe } from "react";
-import { BottomSheetTransition as Le, P as S, Text as w, MerchantLogo as j, InstitutionLogo as G, H3 as ae, CategoryIcon as Ce, createMXTheme as Re, CheckmarkFilledIcon as Ie, H2 as ee } from "@mxenabled/mxui";
+import Z, { useState as oe, useRef as T, useLayoutEffect as se, useMemo as me, useCallback as He, forwardRef as Y, useEffect as xe } from "react";
+import { BottomSheetTransition as Le, P as S, Text as M, MerchantLogo as U, InstitutionLogo as G, H3 as ae, CategoryIcon as Ce, createMXTheme as Re, CheckmarkFilledIcon as Ie, H2 as ee } from "@mxenabled/mxui";
 import ge from "@mui/material/Dialog";
 import Ve from "react-confetti";
 import { Icon as g } from "@mxenabled/mx-icons";
 import u from "@mui/material/Box";
 import p from "@mui/material/Stack";
 import { useInView as Ge } from "react-intersection-observer";
-import X from "@mui/material/Card";
+import j from "@mui/material/Card";
 import Se from "@mui/material/CardContent";
 import Oe from "@mui/material/CardHeader";
-import D from "@mui/material/IconButton";
+import z from "@mui/material/IconButton";
 import ie from "@mui/material/ListItemIcon";
 import re from "@mui/material/ListItemText";
 import Ye from "@mui/material/Menu";
@@ -22,7 +22,7 @@ import { useChartContainerDimensions as ve } from "@mui/x-charts/internals";
 import { animated as I, to as q, useSpring as We } from "@react-spring/web";
 import ze from "@mui/material/Paper";
 import { CardHeader as De } from "@mui/material";
-import T from "@mui/material/Button";
+import D from "@mui/material/Button";
 import Ze from "@mui/material/DialogTitle";
 import Te from "@mui/material/FormControl";
 import Ue from "@mui/material/FormControlLabel";
@@ -44,8 +44,8 @@ const Be = ({
   showBackground: a = !1,
   width: c = 450
 }) => {
-  const [h, m] = v.useState(!1);
-  return v.useEffect(() => {
+  const [h, m] = Z.useState(!1);
+  return Z.useEffect(() => {
     m(!!t);
   }, [t]), /* @__PURE__ */ e(
     ge,
@@ -112,10 +112,10 @@ const Be = ({
   percent: n,
   height: l = 12
 }) => {
-  const [s, o] = Ge({ triggerOnce: !0 }), [a, c] = v.useState("0%"), h = n > 100 ? 100 : n;
-  return v.useEffect(() => {
+  const [s, o] = Ge({ triggerOnce: !0 }), [a, c] = Z.useState("0%"), h = n > 100 ? 100 : n;
+  return Z.useEffect(() => {
     o && c(`${h}%`);
-  }, [o, h]), /* @__PURE__ */ e(v.Fragment, { children: /* @__PURE__ */ d(
+  }, [o, h]), /* @__PURE__ */ e(Z.Fragment, { children: /* @__PURE__ */ d(
     u,
     {
       ref: s,
@@ -220,7 +220,7 @@ const Be = ({
         }
       ),
       /* @__PURE__ */ e(
-        X,
+        j,
         {
           className: "mx-insights-gradient-box-card",
           sx: {
@@ -240,18 +240,18 @@ const Be = ({
   subHeader: o,
   height: a
 }) => {
-  const [c, h] = v.useState(null), m = () => {
-    const E = document.getElementsByClassName("mx-mini-insight-card")[0].clientHeight, y = document.getElementsByClassName("mx-mini-insight-card-header")[0].clientHeight + document.getElementsByClassName("mx-mini-insight-card-content-body")[0].clientHeight, x = E - y - 24;
-    h(Math.floor(x / 20));
+  const [c, h] = Z.useState(null), m = () => {
+    const E = document.getElementsByClassName("mx-mini-insight-card")[0].clientHeight, y = document.getElementsByClassName("mx-mini-insight-card-header")[0].clientHeight + document.getElementsByClassName("mx-mini-insight-card-content-body")[0].clientHeight, k = E - y - 24;
+    h(Math.floor(k / 20));
   };
-  return v.useEffect(() => (m(), window.addEventListener("resize", m), () => window.removeEventListener("resize", m)), []), /* @__PURE__ */ e(
-    X,
+  return Z.useEffect(() => (m(), window.addEventListener("resize", m), () => window.removeEventListener("resize", m)), []), /* @__PURE__ */ e(
+    j,
     {
       ref: s,
       "aria-labelledby": t.guid,
       className: "mx-mini-insight-card",
       sx: { height: a, pb: 24, pt: 0, px: 0 },
-      children: t.dismissed_at ? n : /* @__PURE__ */ d(v.Fragment, { children: [
+      children: t.dismissed_at ? n : /* @__PURE__ */ d(Z.Fragment, { children: [
         /* @__PURE__ */ e(
           Oe,
           {
@@ -311,17 +311,17 @@ const Be = ({
   tabIndex: o = 0,
   ...a
 }) => {
-  const [c, h] = oe(null), m = () => h(null), E = (x, C) => {
-    m(), l(x, C);
+  const [c, h] = oe(null), m = () => h(null), E = (k, x) => {
+    m(), l(k, x);
   };
   return /* @__PURE__ */ d(V, { children: [
     /* @__PURE__ */ e(
-      D,
+      z,
       {
         "aria-hidden": t,
         "aria-label": r,
-        onClick: (x) => {
-          h(x.currentTarget), s();
+        onClick: (k) => {
+          h(k.currentTarget), s();
         },
         sx: { position: "relative !important", bottom: 6 },
         tabIndex: o,
@@ -349,8 +349,8 @@ const Be = ({
         onClose: m,
         open: !!c,
         transformOrigin: { horizontal: "right", vertical: "top" },
-        children: n.map(({ icon: x, key: C, text: J }, f) => /* @__PURE__ */ d(Fe, { onClick: () => E(f, C), sx: { p: 12 }, children: [
-          /* @__PURE__ */ e(ie, { sx: { minWidth: "32px !important" }, children: x }),
+        children: n.map(({ icon: k, key: x, text: J }, v) => /* @__PURE__ */ d(Fe, { onClick: () => E(v, x), sx: { p: 12 }, children: [
+          /* @__PURE__ */ e(ie, { sx: { minWidth: "32px !important" }, children: k }),
           /* @__PURE__ */ e(
             re,
             {
@@ -362,7 +362,7 @@ const Be = ({
               }
             }
           )
-        ] }, C))
+        ] }, x))
       }
     )
   ] });
@@ -397,7 +397,7 @@ const Be = ({
             children: /* @__PURE__ */ e("rect", { fill: r, height: "6", rx: "2", width: "6", x: "0.4375" })
           }
         ),
-        /* @__PURE__ */ e(w, { id: "chartLegendLabel", sx: { fontSize: 11, fontWeight: 400 }, variant: "XSmall", children: l })
+        /* @__PURE__ */ e(M, { id: "chartLegendLabel", sx: { fontSize: 11, fontWeight: 400 }, variant: "XSmall", children: l })
       ] }),
       t && n && /* @__PURE__ */ d(p, { alignItems: "center", flexDirection: "row", gap: 8, children: [
         /* @__PURE__ */ e(
@@ -421,7 +421,7 @@ const Be = ({
             ))
           }
         ),
-        /* @__PURE__ */ d(w, { sx: { fontSize: 11, fontWeight: 400, ml: 0 }, variant: "XSmall", children: [
+        /* @__PURE__ */ d(M, { sx: { fontSize: 11, fontWeight: 400, ml: 0 }, variant: "XSmall", children: [
           n,
           ": ",
           t
@@ -438,18 +438,18 @@ const Be = ({
   style: o,
   ...a
 }) => {
-  const c = F(), h = U(null);
+  const c = F(), h = T(null);
   se(() => {
     const f = new ResizeObserver(() => {
       window.requestAnimationFrame(() => {
         if (h.current) {
-          const { width: k, height: A } = h.current.getBoundingClientRect();
-          if (A === 0) {
-            const $ = h.current;
-            $.style.height = "1px", $.style.transform = `translate3d(${o.x?.get()}px, ${Number(o.y?.get()) - 1}px, 0px)`;
+          const { width: C, height: W } = h.current.getBoundingClientRect();
+          if (W === 0) {
+            const w = h.current;
+            w.style.height = "1px", w.style.transform = `translate3d(${o.x?.get()}px, ${Number(o.y?.get()) - 1}px, 0px)`;
           }
-          const W = k / 2, z = h.current.querySelector("text");
-          z && z.setAttribute("transform", `translate(${W}, -10)`);
+          const P = C / 2, $ = h.current.querySelector("text");
+          $ && $.setAttribute("transform", `translate(${P}, -10)`);
         }
       });
     });
@@ -457,7 +457,7 @@ const Be = ({
       h.current && f.unobserve(h.current);
     };
   }, []);
-  const { ariaLabel: m, category: E, categoryGuid: y, formattedAmount: x, imageSize: C, merchantGuid: J } = r[n];
+  const { ariaLabel: m, category: E, categoryGuid: y, formattedAmount: k, imageSize: x, merchantGuid: J } = r[n], v = s === n ? "bold" : 400;
   return /* @__PURE__ */ d("g", { "aria-label": m, children: [
     /* @__PURE__ */ e(
       I.rect,
@@ -472,33 +472,33 @@ const Be = ({
     (J || y) && /* @__PURE__ */ e(
       I.foreignObject,
       {
-        height: C || 32,
-        width: C || 32,
+        height: x || 32,
+        width: x || 32,
         x: o.x && o.width ? q(
           [o.x, o.width],
-          (f, k) => Number(f ?? 0) + Number(k ?? 0) / 2 - (C || 32) / 2
+          (f, C) => Number(f ?? 0) + Number(C ?? 0) / 2 - (x || 32) / 2
         ) : 0,
         y: o.y && o.height ? q(
           [o.y, o.height],
-          (f, k) => Number(f ?? 0) + Number(k ?? 0) / 2 - (C || 32) / 2
+          (f, C) => Number(f ?? 0) + Number(C ?? 0) / 2 - (x || 32) / 2
         ) : 0,
         children: /* @__PURE__ */ e(
           I.div,
           {
             style: {
-              width: C || 32,
-              height: C || 32,
+              width: x || 32,
+              height: x || 32,
               display: "flex",
               alignItems: "center",
               justifyContent: "center"
             },
             children: /* @__PURE__ */ e(
-              j,
+              U,
               {
                 alt: E,
                 categoryGuid: y || "",
                 merchantGuid: J || "",
-                size: C || 32
+                size: x || 32
               }
             )
           }
@@ -510,11 +510,11 @@ const Be = ({
       {
         fill: c.palette.text.primary,
         fontSize: 11,
-        fontWeight: s === n && !l ? "bold" : 400,
+        fontWeight: l ? "bold" : v,
         textAnchor: "middle",
-        x: o.x && o.width ? q([o.x, o.width], (f, k) => Number(f ?? 0) + Number(k ?? 0) / 2) : 0,
+        x: o.x && o.width ? q([o.x, o.width], (f, C) => Number(f ?? 0) + Number(C ?? 0) / 2) : 0,
         y: o.y ? o.y.to((f) => f - (E ? 26 : 14)) : 0,
-        children: x
+        children: k
       }
     ),
     E && /* @__PURE__ */ e(
@@ -524,7 +524,7 @@ const Be = ({
         fontSize: 9,
         fontWeight: s === n && !l ? "bold" : 400,
         textAnchor: "middle",
-        x: o.x && o.width ? q([o.x, o.width], (f, k) => Number(f ?? 0) + Number(k ?? 0) / 2) : 0,
+        x: o.x && o.width ? q([o.x, o.width], (f, C) => Number(f ?? 0) + Number(C ?? 0) / 2) : 0,
         y: o.y ? o.y.to((f) => f - 14) : 0,
         children: E
       }
@@ -548,18 +548,18 @@ const Be = ({
   removeSelectedTabColorChange: m,
   onBarClick: E
 }) => {
-  const y = F(), { containerRef: x, height: C, width: J } = ve(), k = n.reduce((M, H) => Math.min(M, H.value), 1 / 0) < 0, A = me(() => {
-    const M = `${r}80`;
-    return m ? n.map(() => M) : h === void 0 ? [...new Array(n.length - 1).fill(M), r] : n.map((H, L) => L === h ? r : M);
+  const y = F(), { containerRef: k, height: x, width: J } = ve(), f = n.reduce((w, H) => Math.min(w, H.value), 1 / 0) < 0, C = me(() => {
+    const w = `${r}80`;
+    return m ? n.map(() => r) : h === void 0 ? [...new Array(n.length - 1).fill(w), r] : n.map((H, L) => L === h ? r : w);
   }, [r, n, h]), W = He(
-    (M, { dataIndex: H }) => E && E(H),
+    (w, { dataIndex: H }) => E && E(H),
     [E]
-  ), z = me(() => {
-    const M = n.map(({ value: R }) => R), H = Math.min(...M), L = Math.max(...M);
+  ), P = me(() => {
+    const w = n.map(({ value: R }) => R), H = Math.min(...w), L = Math.max(...w);
     return {
       series: [
         {
-          data: M,
+          data: w,
           type: "bar"
         }
       ],
@@ -585,21 +585,21 @@ const Be = ({
     /* @__PURE__ */ e(
       u,
       {
-        ref: x,
+        ref: k,
         sx: { height: s || (l ? 120 : 172), width: "100%", mb: 8 },
         children: /* @__PURE__ */ d(
           we,
           {
-            height: C,
+            height: x,
             margin: {
               top: 45,
               right: o.right,
               bottom: o.bottom,
               left: o.left
             },
-            series: z.series,
+            series: P.series,
             width: J,
-            xAxis: z.xAxis,
+            xAxis: P.xAxis,
             children: [
               t?.average && // show average line if available
               /* @__PURE__ */ e(
@@ -615,7 +615,7 @@ const Be = ({
                   y: t?.average
                 }
               ),
-              k && // show lowest value line if negative values are allowed and if the lowest value is negative
+              f && // show lowest value line if negative values are allowed and if the lowest value is negative
               /* @__PURE__ */ e(
                 ne,
                 {
@@ -633,7 +633,7 @@ const Be = ({
                   position: "bottom",
                   slots: {
                     // eslint-disable-next-line @typescript-eslint/no-unused-vars
-                    axisTickLabel: ({ text: M, ownerState: H, ...L }) => {
+                    axisTickLabel: ({ text: w, ownerState: H, ...L }) => {
                       const R = n[h ?? n.length - 1]?.label;
                       return /* @__PURE__ */ e(
                         "text",
@@ -641,23 +641,23 @@ const Be = ({
                           ...L,
                           style: {
                             ...L.style,
-                            fontWeight: !m && R === M ? "bold" : 400
+                            fontWeight: !m && R === w ? "bold" : 400
                           },
-                          children: M
+                          children: w
                         }
                       );
                     }
                   },
-                  sx: (M) => ({
+                  sx: (w) => ({
                     ".MuiChartsAxis-line": {
-                      stroke: k ? "none" : M.palette.border?.dark
+                      stroke: f ? "none" : w.palette.border?.dark
                       // If there is a negative value hide this line and use the reference line
                     },
                     "MuiChartsAxis-root-MuiChartsXAxis-root": {
                       transform: "translate(0, 150)"
                     },
                     ".MuiChartsAxis-tickLabel": {
-                      transform: k ? "translateY(15px)" : {}
+                      transform: f ? "translateY(15px)" : {}
                       // Add padding to move labels further down. Must use an empty transform to prevent errors
                     }
                   }),
@@ -671,13 +671,13 @@ const Be = ({
                 {
                   onItemClick: W,
                   slots: {
-                    bar: (M) => {
-                      const { ownerState: H, style: L, ...R } = M;
+                    bar: (w) => {
+                      const { ownerState: H, style: L, ...R } = w;
                       return /* @__PURE__ */ e(
                         rt,
                         {
                           ...R,
-                          colorRange: A,
+                          colorRange: C,
                           data: n,
                           dataIndex: H.dataIndex,
                           removeSelectedTabColorChange: m,
@@ -712,15 +712,15 @@ const Be = ({
   style: l,
   ...s
 }) => {
-  const o = F(), a = U(null), { width: c } = We({
+  const o = F(), a = T(null), { width: c } = We({
     width: l.width
   });
   se(() => {
     const J = new ResizeObserver(() => {
       window.requestAnimationFrame(() => {
         if (a.current) {
-          const { width: f } = a.current.getBoundingClientRect(), k = f / 2, A = a.current.querySelector("text");
-          A && A.setAttribute("transform", `translate(${k}, -8)`);
+          const { width: v } = a.current.getBoundingClientRect(), f = v / 2, C = a.current.querySelector("text");
+          C && C.setAttribute("transform", `translate(${f}, -8)`);
         }
       });
     });
@@ -728,8 +728,8 @@ const Be = ({
       a.current && J.unobserve(a.current);
     };
   }, []);
-  const { ariaLabelComparison: h, ariaLabelMain: m, formattedComparison: E, formattedMain: y } = r[n.index], x = n.type === 0 ? m : h, C = n.type === 0 ? y : E;
-  return /* @__PURE__ */ d("g", { "aria-label": x, children: [
+  const { ariaLabelComparison: h, ariaLabelMain: m, formattedComparison: E, formattedMain: y } = r[n.index], k = n.type === 0 ? m : h, x = n.type === 0 ? y : E;
+  return /* @__PURE__ */ d("g", { "aria-label": k, children: [
     /* @__PURE__ */ e(I.rect, { ...s, ref: a, fill: t, rx: 2, style: l }),
     /* @__PURE__ */ e(
       I.text,
@@ -741,7 +741,7 @@ const Be = ({
         transform: c.to((J) => `translate(${J / 2}, -8)`),
         x: l.x,
         y: l.y,
-        children: C
+        children: x
       }
     )
   ] });
@@ -776,7 +776,7 @@ const Be = ({
             children: /* @__PURE__ */ e("rect", { fill: s, height: "6", rx: "2", width: "6", x: "0.4375" })
           }
         ),
-        /* @__PURE__ */ e(w, { id: "legendMain", sx: { fontSize: 11, fontWeight: 400 }, variant: "XSmall", children: n })
+        /* @__PURE__ */ e(M, { id: "legendMain", sx: { fontSize: 11, fontWeight: 400 }, variant: "XSmall", children: n })
       ] }),
       r && /* @__PURE__ */ d(p, { alignItems: "center", flexDirection: "row", gap: 8, children: [
         /* @__PURE__ */ e(
@@ -791,7 +791,7 @@ const Be = ({
             children: /* @__PURE__ */ e("rect", { fill: t, height: "6", rx: "2", width: "6", x: "0.4375" })
           }
         ),
-        /* @__PURE__ */ e(w, { id: "legendComparison", sx: { fontSize: 11, fontWeight: 400 }, variant: "XSmall", children: r })
+        /* @__PURE__ */ e(M, { id: "legendComparison", sx: { fontSize: 11, fontWeight: 400 }, variant: "XSmall", children: r })
       ] })
     ]
   }
@@ -812,9 +812,9 @@ const Be = ({
   },
   onBarClick: m
 }) => {
-  const E = F(), { containerRef: y, height: x, width: C } = ve(), J = ({ dataIndex: f, seriesId: k }) => {
-    const A = k.toString().split("-").pop();
-    m?.(f * 2 + Number(A));
+  const E = F(), { containerRef: y, height: k, width: x } = ve(), J = ({ dataIndex: v, seriesId: f }) => {
+    const C = f.toString().split("-").pop();
+    m?.(v * 2 + Number(C));
   };
   return /* @__PURE__ */ d(p, { alignItems: "center", sx: { mb: o ? 16 : 24, width: "100%" }, children: [
     /* @__PURE__ */ e(u, { ref: y, sx: { height: o ? 120 : 172, width: "100%", mb: 8 }, children: /* @__PURE__ */ d(
@@ -822,13 +822,13 @@ const Be = ({
       {
         colors: l,
         dataset: s,
-        height: x,
+        height: k,
         margin: h,
         series: [
           { dataKey: "main", type: "bar" },
           { dataKey: "comparison", type: "bar" }
         ],
-        width: C,
+        width: x,
         xAxis: [{ barGapRatio: r, categoryGapRatio: n, dataKey: "label", scaleType: "band" }],
         children: [
           t?.average && /* @__PURE__ */ e(
@@ -849,9 +849,9 @@ const Be = ({
             {
               disableTicks: !0,
               position: "bottom",
-              sx: (f) => ({
+              sx: (v) => ({
                 ".MuiChartsAxis-line": {
-                  stroke: f.palette.border?.darker
+                  stroke: v.palette.border?.darker
                 }
               }),
               tickLabelStyle: {
@@ -864,21 +864,21 @@ const Be = ({
           /* @__PURE__ */ e(
             Je,
             {
-              onItemClick: (f, { dataIndex: k, seriesId: A }) => J({ dataIndex: k, seriesId: A.toString() }),
+              onItemClick: (v, { dataIndex: f, seriesId: C }) => J({ dataIndex: f, seriesId: C.toString() }),
               slots: {
-                bar: (f) => {
-                  const { ownerState: k, style: A, ...W } = f;
+                bar: (v) => {
+                  const { ownerState: f, style: C, ...W } = v;
                   return /* @__PURE__ */ e(
                     nt,
                     {
                       ...W,
-                      color: k.color,
+                      color: f.color,
                       data: s,
                       series: {
-                        index: k.dataIndex,
-                        type: Number(k.id.toString().split("-").pop())
+                        index: f.dataIndex,
+                        type: Number(f.id.toString().split("-").pop())
                       },
-                      style: A
+                      style: C
                     }
                   );
                 }
@@ -911,7 +911,7 @@ const Be = ({
     }
   });
 }, K = ({ divProps: t, image: r, isMini: n = !1 }) => {
-  const l = F(), s = U(null), o = {
+  const l = F(), s = T(null), o = {
     100: l.palette.primary.lighter,
     200: l.palette.primary.light,
     300: l.palette.primary.main,
@@ -937,7 +937,7 @@ const Be = ({
     }
   );
 };
-function P() {
+function X() {
   return /* @__PURE__ */ e(K, { divProps: { style: {} }, image: st });
 }
 const de = (t) => {
@@ -969,7 +969,7 @@ const de = (t) => {
   rightLowerText: c,
   rightUpperText: h
 }) => {
-  const m = o ? ye : fe, E = U(null), { height: y, width: x } = de(E);
+  const m = o ? ye : fe, E = T(null), { height: y, width: k } = de(E);
   return /* @__PURE__ */ d(
     u,
     {
@@ -980,9 +980,9 @@ const de = (t) => {
       sx: { bgcolor: "grey.200", p: 16 },
       width: "100%",
       children: [
-        /* @__PURE__ */ e(ce, { height: y, shouldRun: r.shouldRun, width: x }),
+        /* @__PURE__ */ e(ce, { height: y, shouldRun: r.shouldRun, width: k }),
         /* @__PURE__ */ d(
-          X,
+          j,
           {
             elevation: 1,
             sx: {
@@ -1029,7 +1029,7 @@ const de = (t) => {
   textSX: c
 }) => /* @__PURE__ */ d(V, { children: [
   s && /* @__PURE__ */ e(g, { color: r, fill: n, name: s, size: o, sx: l }),
-  /* @__PURE__ */ e(w, { bold: t, sx: c, children: a })
+  /* @__PURE__ */ e(M, { bold: t, sx: c, children: a })
 ] }), N = 48, mt = ({ account: t, headerString: r }) => /* @__PURE__ */ d(V, { children: [
   /* @__PURE__ */ e(
     ze,
@@ -1198,14 +1198,14 @@ const de = (t) => {
     )
   }
 ), wt = ({ content: t, isLoading: r, sx: n }) => {
-  const [l, s] = oe(0), o = U(null), a = () => {
+  const [l, s] = oe(0), o = T(null), a = () => {
     if (o.current) {
       const c = o.current, h = c.parentElement;
       if (h) {
-        const E = Array.from(h.children).reduce((f, k) => k !== c ? f + k.clientHeight : f, 0), x = h.clientHeight - E, C = parseInt(
+        const E = Array.from(h.children).reduce((v, f) => f !== c ? v + f.clientHeight : v, 0), k = h.clientHeight - E, x = parseInt(
           window.getComputedStyle(c).lineHeight,
           10
-        ), J = Math.floor(x / C);
+        ), J = Math.floor(k / x);
         J !== l && s(J);
       }
     }
@@ -1267,7 +1267,7 @@ const de = (t) => {
     /* @__PURE__ */ e(p, { sx: { alignItems: "center", ...h && c && { mx: -16 } }, children: n }),
     l === "bottom" && y(),
     t && /* @__PURE__ */ e(
-      w,
+      M,
       {
         sx: {
           color: "text.secondary",
@@ -1280,7 +1280,7 @@ const de = (t) => {
       }
     )
   ] });
-}, b = ({
+}, A = ({
   altLoadingText: t,
   asteriskText: r,
   beat: n,
@@ -1365,14 +1365,14 @@ const de = (t) => {
             variant: "ParagraphSmall"
           }
         ),
-        a && l && /* @__PURE__ */ d(T, { fullWidth: !0, onClick: l, sx: { mb: c }, children: [
+        a && l && /* @__PURE__ */ d(D, { fullWidth: !0, onClick: l, sx: { mb: c }, children: [
           a,
           /* @__PURE__ */ e(g, { name: "chevron_right" })
         ] })
       ]
     }
   );
-}, Z = ({
+}, b = ({
   beat: t,
   disabled: r = !1,
   hide: n = !1,
@@ -1382,7 +1382,7 @@ const de = (t) => {
   variant: a = !s && "text",
   ...c
 }) => n ? null : /* @__PURE__ */ e(
-  T,
+  D,
   {
     disabled: r,
     fullWidth: !0,
@@ -1423,7 +1423,7 @@ const de = (t) => {
 }) => /* @__PURE__ */ d(Ze, { fontSize: 18, id: "alert-dialog-title", children: [
   t,
   /* @__PURE__ */ e(
-    D,
+    z,
     {
       "aria-label": s ? r.ratingExist : r.ratingDoesntExist,
       "data-ui-test": "feedback-close-button",
@@ -1465,7 +1465,7 @@ const de = (t) => {
       },
       children: [
         /* @__PURE__ */ e(
-          T,
+          D,
           {
             className: "mx-insights-beat-feedback-submit-button",
             "data-ui-test": "submit-button",
@@ -1484,7 +1484,7 @@ const de = (t) => {
           }
         ),
         /* @__PURE__ */ e(
-          T,
+          D,
           {
             className: "mx-insights-beat-feedback-no-thanks-button",
             "data-ui-test": "no-thanks-button",
@@ -1621,7 +1621,7 @@ const de = (t) => {
   legendLabelMain: a,
   onBarClick: c,
   ...h
-}) => /* @__PURE__ */ e(b, { ...h, beat: r, button: /* @__PURE__ */ e(Z, { ...n, beat: r }), children: s.length > 0 ? /* @__PURE__ */ e(
+}) => /* @__PURE__ */ e(A, { ...h, beat: r, button: /* @__PURE__ */ e(b, { ...n, beat: r }), children: s.length > 0 ? /* @__PURE__ */ e(
   _,
   {
     amounts: t,
@@ -1647,13 +1647,13 @@ const Pi = ({
   selectedTabIndex: h,
   ...m
 }) => /* @__PURE__ */ e(
-  b,
+  A,
   {
     ...m,
     beat: r,
     button: s.length ? /* @__PURE__ */ d(p, { spacing: 10, sx: { pt: 8 }, children: [
       /* @__PURE__ */ e(
-        Z,
+        b,
         {
           ...n,
           beat: r,
@@ -1661,7 +1661,7 @@ const Pi = ({
         }
       ),
       /* @__PURE__ */ e(
-        Z,
+        b,
         {
           ...n,
           beat: r,
@@ -1688,7 +1688,7 @@ const Pi = ({
         onBarClick: c,
         selectedTabIndex: h
       }
-    ) : /* @__PURE__ */ e(P, {})
+    ) : /* @__PURE__ */ e(X, {})
   }
 ), qi = ({
   beat: t,
@@ -1701,13 +1701,13 @@ const Pi = ({
 }) => {
   const { primary_transaction: c, primary_category_guid: h } = t;
   if (!c) return null;
-  const m = c.top_level_category_guid || c.category_guid || h || "", E = c.merchant_guid || "", y = m || h, x = s ? "linear-gradient(#19B07B, #006642)" : "linear-gradient(#D9FDEA, #8DF1CE)";
+  const m = c.top_level_category_guid || c.category_guid || h || "", E = c.merchant_guid || "", y = m || h, k = s ? "linear-gradient(#19B07B, #006642)" : "linear-gradient(#D9FDEA, #8DF1CE)";
   return /* @__PURE__ */ e(
-    b,
+    A,
     {
       ...a,
       beat: t,
-      button: /* @__PURE__ */ e(u, { sx: { pb: 16, px: 16 }, children: /* @__PURE__ */ e(Z, { ...r, beat: t }) }),
+      button: /* @__PURE__ */ e(u, { sx: { pb: 16, px: 16 }, children: /* @__PURE__ */ e(b, { ...r, beat: t }) }),
       contentProps: {
         hasFullWidthImage: !0,
         sx: { px: 0 }
@@ -1716,9 +1716,9 @@ const Pi = ({
         ...a.header,
         hasFullWidthImage: !0
       },
-      children: /* @__PURE__ */ e(u, { sx: { background: x, p: 16, width: "100%" }, children: /* @__PURE__ */ e(X, { sx: { bgcolor: s ? "grey.800" : "common.white", p: 16 }, children: /* @__PURE__ */ d(p, { sx: { alignItems: "center", gap: 12 }, children: [
+      children: /* @__PURE__ */ e(u, { sx: { background: k, p: 16, width: "100%" }, children: /* @__PURE__ */ e(j, { sx: { bgcolor: s ? "grey.800" : "common.white", p: 16 }, children: /* @__PURE__ */ d(p, { sx: { alignItems: "center", gap: 12 }, children: [
         /* @__PURE__ */ e(
-          j,
+          U,
           {
             alt: c.description,
             categoryGuid: m,
@@ -1728,7 +1728,7 @@ const Pi = ({
         ),
         /* @__PURE__ */ d(p, { sx: { alignItems: "center", gap: 4 }, children: [
           /* @__PURE__ */ e(ae, { color: "success.main", children: l }),
-          /* @__PURE__ */ e(w, { bold: !0, sx: { fontSize: 13, lineHeight: "16px" }, children: o }),
+          /* @__PURE__ */ e(M, { bold: !0, sx: { fontSize: 13, lineHeight: "16px" }, children: o }),
           /* @__PURE__ */ d(p, { sx: { alignItems: "center", flexDirection: "row", gap: 4 }, children: [
             y && /* @__PURE__ */ e(
               Ce,
@@ -1740,7 +1740,7 @@ const Pi = ({
                 variant: "transparent"
               }
             ),
-            /* @__PURE__ */ e(w, { color: "text.secondary", sx: { fontSize: 11, lineHeight: "16px" }, children: n })
+            /* @__PURE__ */ e(M, { color: "text.secondary", sx: { fontSize: 11, lineHeight: "16px" }, children: n })
           ] })
         ] })
       ] }) }) })
@@ -1766,7 +1766,7 @@ const Pi = ({
   account_2_alt_text: l,
   isSuccess: s
 }) => {
-  const o = v.useRef(null), { height: a, width: c } = de(o);
+  const o = Z.useRef(null), { height: a, width: c } = de(o);
   return /* @__PURE__ */ e(
     u,
     {
@@ -1934,7 +1934,7 @@ const Pi = ({
         ] })
       ] }),
       /* @__PURE__ */ d(u, { children: [
-        /* @__PURE__ */ e(w, { bold: !0, fontSize: 15, sx: { p: "16px 24px 8px 24px" }, children: t.shared_info_header_text }),
+        /* @__PURE__ */ e(M, { bold: !0, fontSize: 15, sx: { p: "16px 24px 8px 24px" }, children: t.shared_info_header_text }),
         /* @__PURE__ */ e(S, { color: "textSecondary", fontSize: 13, sx: { mb: 16, mx: 24 }, children: t.shared_info_description }),
         /* @__PURE__ */ e(Ee, { sx: { p: "16px 24px" }, children: t.shared_info_list_array.map((n, l) => /* @__PURE__ */ d(
           ue,
@@ -1974,10 +1974,10 @@ const Pi = ({
         )) })
       ] }),
       /* @__PURE__ */ d(p, { sx: { alignItems: "center", justifyContent: "center", pb: 16 }, children: [
-        /* @__PURE__ */ e(w, { bold: !0, sx: { p: "16px 24px 8px 24px" }, children: t.footer_title }),
+        /* @__PURE__ */ e(M, { bold: !0, sx: { p: "16px 24px 8px 24px" }, children: t.footer_title }),
         /* @__PURE__ */ d(u, { sx: { display: "flex", gap: 24, p: "12px 24px" }, children: [
           /* @__PURE__ */ e(
-            D,
+            z,
             {
               "aria-label": t.aria_label_thumbs_down,
               onClick: () => r("no"),
@@ -1985,7 +1985,7 @@ const Pi = ({
             }
           ),
           /* @__PURE__ */ e(
-            D,
+            z,
             {
               "aria-label": t.aria_label_thumbs_up,
               onClick: () => r("yes"),
@@ -2023,7 +2023,7 @@ const Pi = ({
     marginBottom: 16,
     width: r ? "30%" : "50%"
   }, o = t ? { ...s, width: r ? "50%" : "70%" } : s;
-  return /* @__PURE__ */ e(b, { ...n, isMini: r, children: /* @__PURE__ */ e(K, { divProps: { style: o }, image: l }) });
+  return /* @__PURE__ */ e(A, { ...n, isMini: r, children: /* @__PURE__ */ e(K, { divProps: { style: o }, image: l }) });
 }, _i = ({
   altLoadingText: t,
   beat: r,
@@ -2031,13 +2031,13 @@ const Pi = ({
   header: l,
   isMini: s
 }) => /* @__PURE__ */ e(
-  b,
+  A,
   {
     altLoadingText: t,
     beat: r,
     button: /* @__PURE__ */ d(p, { spacing: 10, children: [
       /* @__PURE__ */ e(
-        Z,
+        b,
         {
           beat: r,
           ...n,
@@ -2045,7 +2045,7 @@ const Pi = ({
         }
       ),
       r.supporting_action && /* @__PURE__ */ e(
-        Z,
+        b,
         {
           ...n,
           beat: r,
@@ -2075,10 +2075,10 @@ const Pi = ({
   onBarClick: a,
   ...c
 }) => /* @__PURE__ */ e(
-  b,
+  A,
   {
     beat: t,
-    button: l.length ? /* @__PURE__ */ e(p, { children: /* @__PURE__ */ e(Z, { ...r, beat: t }) }) : null,
+    button: l.length ? /* @__PURE__ */ e(p, { children: /* @__PURE__ */ e(b, { ...r, beat: t }) }) : null,
     ...c,
     children: l.length ? /* @__PURE__ */ e(
       he,
@@ -2096,7 +2096,7 @@ const Pi = ({
         },
         onBarClick: a
       }
-    ) : /* @__PURE__ */ e(P, {})
+    ) : /* @__PURE__ */ e(X, {})
   }
 ), e1 = ({
   goalCompletionDate: t = "",
@@ -2151,7 +2151,7 @@ const Pi = ({
     children: [
       /* @__PURE__ */ e(g, { color: "secondary", fill: !0, name: "bid_landscape", sx: { mr: 4 } }),
       /* @__PURE__ */ e(
-        w,
+        M,
         {
           dangerouslySetInnerHTML: { __html: t },
           "data-ui-test": "mefr-contributed-text",
@@ -2173,7 +2173,7 @@ const Pi = ({
     children: [
       /* @__PURE__ */ e(g, { name: "calendar_month", sx: { mr: 4 } }),
       /* @__PURE__ */ e(
-        w,
+        M,
         {
           dangerouslySetInnerHTML: { __html: t },
           "data-ui-test": "mefr-projected-text",
@@ -2198,7 +2198,7 @@ const Pi = ({
     children: [
       /* @__PURE__ */ e(g, { name: "paid", sx: { mr: 4 } }),
       /* @__PURE__ */ e(
-        w,
+        M,
         {
           className: "mx-insights-mefr-saved-text",
           dangerouslySetInnerHTML: { __html: r },
@@ -2218,10 +2218,10 @@ const Pi = ({
   onBarClick: a,
   ...c
 }) => /* @__PURE__ */ e(
-  b,
+  A,
   {
     beat: t,
-    button: l.length ? /* @__PURE__ */ e(p, { children: /* @__PURE__ */ e(Z, { ...r, beat: t }) }) : null,
+    button: l.length ? /* @__PURE__ */ e(p, { children: /* @__PURE__ */ e(b, { ...r, beat: t }) }) : null,
     ...c,
     children: l.length ? /* @__PURE__ */ e(
       he,
@@ -2239,7 +2239,7 @@ const Pi = ({
         },
         onBarClick: a
       }
-    ) : /* @__PURE__ */ e(P, {})
+    ) : /* @__PURE__ */ e(X, {})
   }
 ), i1 = ({
   amounts: t,
@@ -2251,7 +2251,7 @@ const Pi = ({
   legendLabelMain: a,
   onBarClick: c,
   ...h
-}) => /* @__PURE__ */ e(b, { ...h, beat: r, button: /* @__PURE__ */ e(Z, { ...n, beat: r }), children: s.length > 0 ? /* @__PURE__ */ e(
+}) => /* @__PURE__ */ e(A, { ...h, beat: r, button: /* @__PURE__ */ e(b, { ...n, beat: r }), children: s.length > 0 ? /* @__PURE__ */ e(
   _,
   {
     amounts: t,
@@ -2273,11 +2273,11 @@ const Pi = ({
   onBarClick: a,
   ...c
 }) => /* @__PURE__ */ e(
-  b,
+  A,
   {
     ...c,
     beat: t,
-    button: l.length ? /* @__PURE__ */ e(p, { spacing: 10, sx: { pt: 8 }, children: /* @__PURE__ */ e(Z, { ...r, beat: t }) }) : null,
+    button: l.length ? /* @__PURE__ */ e(p, { spacing: 10, sx: { pt: 8 }, children: /* @__PURE__ */ e(b, { ...r, beat: t }) }) : null,
     children: l.length ? /* @__PURE__ */ e(
       he,
       {
@@ -2294,7 +2294,7 @@ const Pi = ({
         },
         onBarClick: a
       }
-    ) : /* @__PURE__ */ e(P, {})
+    ) : /* @__PURE__ */ e(X, {})
   }
 ), n1 = ({
   beat: t,
@@ -2302,11 +2302,11 @@ const Pi = ({
   transactions: n,
   ...l
 }) => /* @__PURE__ */ e(
-  b,
+  A,
   {
     ...l,
     beat: t,
-    button: t.call_to_action && /* @__PURE__ */ e(Z, { ...r, beat: t }),
+    button: t.call_to_action && /* @__PURE__ */ e(b, { ...r, beat: t }),
     children: n.length > 1 ? /* @__PURE__ */ e(
       Kt,
       {
@@ -2365,7 +2365,7 @@ const Pi = ({
                     position: "absolute"
                   },
                   children: /* @__PURE__ */ e(
-                    j,
+                    U,
                     {
                       alt: a.feedDescription,
                       categoryGuid: a.categoryGuid || "",
@@ -2418,7 +2418,7 @@ const Pi = ({
     },
     children: [
       /* @__PURE__ */ e(
-        j,
+        U,
         {
           alt: n,
           categoryGuid: r || "",
@@ -2427,14 +2427,14 @@ const Pi = ({
         }
       ),
       /* @__PURE__ */ e(
-        w,
+        M,
         {
           bold: !0,
           sx: { fontSize: 18, overflow: "hidden", textOverflow: "ellipsis", maxWidth: 255 },
           children: l
         }
       ),
-      /* @__PURE__ */ e(w, { color: "secondary", fontSize: "small", children: t })
+      /* @__PURE__ */ e(M, { color: "secondary", fontSize: "small", children: t })
     ]
   }
 ), l1 = ({
@@ -2448,12 +2448,12 @@ const Pi = ({
   selectedTabIndex: c,
   ...h
 }) => /* @__PURE__ */ e(
-  b,
+  A,
   {
     ...h,
     beat: r,
     button: s.length ? /* @__PURE__ */ e(p, { spacing: 10, sx: { pt: 8 }, children: /* @__PURE__ */ e(
-      Z,
+      b,
       {
         ...n,
         beat: r,
@@ -2477,7 +2477,7 @@ const Pi = ({
         onBarClick: a,
         selectedTabIndex: c
       }
-    ) : /* @__PURE__ */ e(P, {})
+    ) : /* @__PURE__ */ e(X, {})
   }
 ), o1 = ({
   account: t,
@@ -2578,8 +2578,8 @@ const Pi = ({
   leftUpperText: m,
   rightLowerText: E,
   rightUpperText: y,
-  sourceAccountGuid: x
-}) => /* @__PURE__ */ e(v.Fragment, { children: a ? /* @__PURE__ */ e(
+  sourceAccountGuid: k
+}) => /* @__PURE__ */ e(Z.Fragment, { children: a ? /* @__PURE__ */ e(
   be,
   {
     account: t,
@@ -2598,7 +2598,7 @@ const Pi = ({
     destinationAccountGuid: n,
     externalAccountName: l,
     heldAccountName: s,
-    sourceAccountGuid: x
+    sourceAccountGuid: k
   }
 ) }), Dt = ({
   beat: t,
@@ -2628,7 +2628,7 @@ const Pi = ({
     }
   };
   return /* @__PURE__ */ e(p, { sx: a.boxContainer, children: /* @__PURE__ */ d(
-    X,
+    j,
     {
       sx: {
         ...a.card,
@@ -2636,7 +2636,7 @@ const Pi = ({
       },
       children: [
         /* @__PURE__ */ e(
-          j,
+          U,
           {
             alt: l,
             categoryGuid: t.primary_transaction?.top_level_category_guid || "",
@@ -2685,11 +2685,11 @@ const Pi = ({
   isMini: o,
   ...a
 }) => /* @__PURE__ */ e(
-  b,
+  A,
   {
     ...a,
     beat: t,
-    button: /* @__PURE__ */ e(u, { sx: { pt: 8, px: 16 }, children: /* @__PURE__ */ e(Z, { ...r, beat: t }) }),
+    button: /* @__PURE__ */ e(u, { sx: { pt: 8, px: 16 }, children: /* @__PURE__ */ e(b, { ...r, beat: t }) }),
     contentProps: {
       hasFullWidthImage: !0
     },
@@ -2727,7 +2727,7 @@ const Pi = ({
         const o = t[l];
         return /* @__PURE__ */ d(le, { alignItems: "center", spacing: 3, children: [
           /* @__PURE__ */ e(
-            w,
+            M,
             {
               sx: {
                 color: o ? "success.main" : "text.secondary",
@@ -2749,10 +2749,10 @@ const Pi = ({
   displayData: l,
   ...s
 }) => {
-  const { no_spend_days: o } = t.payload, { noSpendDays: a, dollarBillAltText: c, daysOfTheWeek: h } = l, m = $t[o.length || 0], E = v.useRef(null), { height: y, width: x } = de(E);
-  return /* @__PURE__ */ e(b, { ...s, beat: t, button: /* @__PURE__ */ e(Z, { ...r, beat: t }), children: n ? /* @__PURE__ */ e(At, {}) : /* @__PURE__ */ d(le, { ref: E, alignItems: "center", justifyContent: "center", width: "100%", children: [
+  const { no_spend_days: o } = t.payload, { noSpendDays: a, dollarBillAltText: c, daysOfTheWeek: h } = l, m = $t[o.length || 0], E = Z.useRef(null), { height: y, width: k } = de(E);
+  return /* @__PURE__ */ e(A, { ...s, beat: t, button: /* @__PURE__ */ e(b, { ...r, beat: t }), children: n ? /* @__PURE__ */ e(At, {}) : /* @__PURE__ */ d(le, { ref: E, alignItems: "center", justifyContent: "center", width: "100%", children: [
     /* @__PURE__ */ e("img", { alt: c, src: m, width: 138 }),
-    o?.length >= 4 && /* @__PURE__ */ e(ce, { height: y, shouldRun: !0, width: x }),
+    o?.length >= 4 && /* @__PURE__ */ e(ce, { height: y, shouldRun: !0, width: k }),
     /* @__PURE__ */ e(Tt, { daysOfTheWeek: h, noSpendDays: a })
   ] }) });
 }, ei = ({
@@ -2764,7 +2764,7 @@ const Pi = ({
 }) => /* @__PURE__ */ d(ge, { fullScreen: !0, onClose: l, open: n, ...s, children: [
   /* @__PURE__ */ e(Ze, { children: r.title }),
   /* @__PURE__ */ e(
-    D,
+    z,
     {
       "aria-label": r.close_dialog_aria,
       onClick: l,
@@ -2817,8 +2817,8 @@ const Pi = ({
   isLoading: s,
   ...o
 }) => {
-  const [a, c] = v.useState(t.were_working_on_it), [h, m] = v.useState(0);
-  return v.useEffect(() => {
+  const [a, c] = Z.useState(t.were_working_on_it), [h, m] = Z.useState(0);
+  return Z.useEffect(() => {
     if (h <= 2) {
       const E = [t.were_working_on_it, t.were_getting_closer, t.almost_there], y = setTimeout(() => {
         m(h + 1), c(E[h]);
@@ -2875,8 +2875,8 @@ const Pi = ({
       s && /* @__PURE__ */ d(V, { children: [
         /* @__PURE__ */ e(ee, { children: t.connecting }),
         /* @__PURE__ */ e(u, { sx: { my: 24, width: "50%" }, children: /* @__PURE__ */ e(Ne, { "aria-label": t.loading }) }),
-        /* @__PURE__ */ e(w, { bold: !0, variant: "Body", children: t.syncing_your_information }),
-        /* @__PURE__ */ e(w, { sx: { mt: 8 }, variant: "Small", children: a })
+        /* @__PURE__ */ e(M, { bold: !0, variant: "Body", children: t.syncing_your_information }),
+        /* @__PURE__ */ e(M, { sx: { mt: 8 }, variant: "Small", children: a })
       ] }),
       l && /* @__PURE__ */ d(p, { sx: { gap: 24, px: 24, pb: 24 }, children: [
         /* @__PURE__ */ d(p, { children: [
@@ -2896,7 +2896,7 @@ const Pi = ({
             }
           )
         ] }),
-        /* @__PURE__ */ e(T, { onClick: o.onClose, sx: { mx: "auto" }, variant: "contained", children: t.error_button_text })
+        /* @__PURE__ */ e(D, { onClick: o.onClose, sx: { mx: "auto" }, variant: "contained", children: t.error_button_text })
       ] })
     ] })
   ] });
@@ -2904,7 +2904,7 @@ const Pi = ({
 export {
   ke as AccountBox,
   _ as BarChart,
-  b as BeatCard,
+  A as BeatCard,
   ji as BeatFeedbackText,
   Xi as BillAmountNotStandard,
   Yi as BottomSheet,
@@ -2923,14 +2923,14 @@ export {
   Ni as DiscoveredAccountsLearnMoreDrawerContent,
   Qi as DiscoveredAccountsMiniInsight,
   he as DoubleBarChart,
-  P as EmptyBarChart,
+  X as EmptyBarChart,
   Bi as FederalBankHoliday,
   Di as FeedbackButtons,
   Ti as FeedbackDescription,
   zi as FeedbackHeader,
   Ui as FeedbackOptions,
   mt as FullFeedBodyHeader,
-  Z as InsightButton,
+  b as InsightButton,
   Ot as LastMonthsContributionSection,
   Et as LeftBox,
   At as LinedCardZeroState,