@mx-cartographer/insights-ui 1.7.4-alpha.san1 → 1.7.4

package/dist/index.es.js

@@ -4,7 +4,7 @@ import H, { useState as G, useRef as D, useLayoutEffect as oe, useMemo as P, use
 import se from "@mui/material/Dialog";
 import { BottomSheetTransition as ce, Icon as C, P as f, Text as b, InstitutionLogo as V, H3 as ee, Drawer as he, createMXTheme as me, MerchantLogo as pe, CategoryIcon as ue } from "@kyper/mui";
 import Ee from "react-confetti";
-import u from "@mui/material/Box";
+import E from "@mui/material/Box";
 import A from "@mui/material/Card";
 import { useTheme as w, styled as j, ThemeProvider as fe } from "@mui/material/styles";
 import { useInView as ge } from "react-intersection-observer";
@@ -127,7 +127,7 @@ const Te = ({
       },
       children: [
         /* @__PURE__ */ t(
-          u,
+          E,
           {
             sx: {
               position: "absolute",
@@ -140,7 +140,7 @@ const Te = ({
           }
         ),
         /* @__PURE__ */ t(
-          u,
+          E,
           {
             sx: {
               position: "absolute",
@@ -164,7 +164,7 @@ const Te = ({
 }) => {
   const o = w();
   return /* @__PURE__ */ c(
-    u,
+    E,
     {
       className: "mx-insights-goal-progress",
       "data-ui-test": "goal-progress",
@@ -214,7 +214,7 @@ const Te = ({
 }) => {
   const l = w();
   return /* @__PURE__ */ c(
-    u,
+    E,
     {
       className: "mx-insights-gradient-box",
       "data-ui-test": "gradient-box",
@@ -233,7 +233,7 @@ const Te = ({
           }
         ) }),
         /* @__PURE__ */ t(
-          u,
+          E,
           {
             className: "mx-insights-gradient-box-card",
             sx: {
@@ -258,7 +258,7 @@ const Te = ({
   height: d
 }) => {
   const [s, h] = H.useState(null), m = () => {
-    const p = document.getElementsByClassName("mx-mini-insight-card")[0].clientHeight, E = document.getElementsByClassName("mx-mini-insight-card-header")[0].clientHeight + document.getElementsByClassName("mx-mini-insight-card-content-body")[0].clientHeight, x = p - E - 24;
+    const p = document.getElementsByClassName("mx-mini-insight-card")[0].clientHeight, u = document.getElementsByClassName("mx-mini-insight-card-header")[0].clientHeight + document.getElementsByClassName("mx-mini-insight-card-content-body")[0].clientHeight, x = p - u - 24;
     h(Math.floor(x / 20));
   };
   return H.useEffect(() => (m(), window.addEventListener("resize", m), () => window.removeEventListener("resize", m)), []), /* @__PURE__ */ t(
@@ -290,9 +290,9 @@ const Te = ({
               width: "100%"
             },
             children: [
-              /* @__PURE__ */ t(u, { className: "mx-mini-insight-card-content-body", children: r }),
-              /* @__PURE__ */ t(u, { sx: { p: 24 }, children: /* @__PURE__ */ t(
-                u,
+              /* @__PURE__ */ t(E, { className: "mx-mini-insight-card-content-body", children: r }),
+              /* @__PURE__ */ t(E, { sx: { p: 24 }, children: /* @__PURE__ */ t(
+                E,
                 {
                   className: "test-class",
                   dangerouslySetInnerHTML: { __html: i.html_description },
@@ -355,12 +355,12 @@ const Te = ({
         onClose: d,
         open: !!a,
         transformOrigin: { horizontal: "right", vertical: "top" },
-        children: n.map(({ icon: m, key: p, text: E }, x) => /* @__PURE__ */ c(ye, { onClick: () => s(x, p), sx: { padding: 12 }, children: [
+        children: n.map(({ icon: m, key: p, text: u }, x) => /* @__PURE__ */ c(ye, { onClick: () => s(x, p), sx: { padding: 12 }, children: [
           /* @__PURE__ */ t(F, { sx: { minWidth: "32px !important" }, children: m }),
           /* @__PURE__ */ t(
             K,
             {
-              primary: E,
+              primary: u,
               primaryTypographyProps: {
                 fontWeight: "normal",
                 fontSize: 15,
@@ -414,7 +414,7 @@ const Te = ({
               gap: 2
             },
             children: [...Array(3)].map((o, d) => /* @__PURE__ */ t(
-              u,
+              E,
               {
                 sx: {
                   width: 3,
@@ -448,7 +448,7 @@ const Te = ({
     const p = new ResizeObserver(() => {
       window.requestAnimationFrame(() => {
         if (s.current) {
-          const { width: E } = s.current.getBoundingClientRect(), x = E / 2;
+          const { width: u } = s.current.getBoundingClientRect(), x = u / 2;
           s.current.querySelector("text").setAttribute("transform", `translate(${x}, -8)`);
         }
       });
@@ -488,7 +488,7 @@ const Te = ({
   selectedTabIndex: d,
   onBarClick: s
 }) => {
-  const h = w(), { containerRef: m, height: p, width: E } = we(), x = P(() => {
+  const h = w(), { containerRef: m, height: p, width: u } = we(), x = P(() => {
     const y = `${r}80`;
     return d === void 0 ? [...new Array(n.length - 1).fill(y), r] : n.map((M, S) => S === d ? r : y);
   }, [r, n, d]), v = de(
@@ -513,13 +513,13 @@ const Te = ({
     [n]
   );
   return /* @__PURE__ */ c(g, { alignItems: "center", sx: { mb: 24, width: "100%" }, children: [
-    /* @__PURE__ */ t(u, { ref: m, sx: { height: 130, width: "100%", mb: 8 }, children: /* @__PURE__ */ c(
+    /* @__PURE__ */ t(E, { ref: m, sx: { height: 130, width: "100%", mb: 8 }, children: /* @__PURE__ */ c(
       ve,
       {
         height: p,
         margin: l,
         series: k.series,
-        width: E,
+        width: u,
         xAxis: k.xAxis,
         children: [
           i?.average && /* @__PURE__ */ t(
@@ -641,9 +641,9 @@ const Te = ({
   rightLowerText: s,
   rightUpperText: h
 }) => {
-  const m = o ? O : U, p = D(null), { height: E, width: x } = re(p);
+  const m = o ? O : U, p = D(null), { height: u, width: x } = re(p);
   return /* @__PURE__ */ c(
-    u,
+    E,
     {
       alignItems: "center",
       display: "flex",
@@ -655,7 +655,7 @@ const Te = ({
       }),
       width: "100%",
       children: [
-        /* @__PURE__ */ t(ie, { height: E, shouldRun: r.shouldRun, width: x }),
+        /* @__PURE__ */ t(ie, { height: u, shouldRun: r.shouldRun, width: x }),
         /* @__PURE__ */ c(
           A,
           {
@@ -758,7 +758,7 @@ const Te = ({
     }
   );
 }, _e = ({ account: i, headerString: r }) => /* @__PURE__ */ c(
-  u,
+  E,
   {
     "data-ui-test": "mx-insights-sudd-mini-body-header",
     sx: { display: "flex", flexDirection: "row", gap: 8, justifyContent: "center" },
@@ -847,8 +847,8 @@ const Te = ({
     if (!a.current) return;
     const d = a.current, s = d.querySelectorAll(".Overlay");
     ["brand100", "brand200", "brand300", "brand400", "brand500"].forEach((m) => {
-      const p = d.querySelectorAll(`.${m}`), E = m.replace("brand", "");
-      Q(p, o[E]);
+      const p = d.querySelectorAll(`.${m}`), u = m.replace("brand", "");
+      Q(p, o[u]);
     }), Q(s, o[300]);
   }, [o]), /* @__PURE__ */ t(
     "div",
@@ -919,11 +919,11 @@ const Te = ({
     if (l.current) {
       const o = l.current, d = o.parentElement;
       if (d) {
-        const h = Array.from(d.children).reduce((k, y) => y !== o ? k + y.clientHeight : k, 0), p = d.clientHeight - h, E = parseInt(
+        const h = Array.from(d.children).reduce((k, y) => y !== o ? k + y.clientHeight : k, 0), p = d.clientHeight - h, u = parseInt(
           window.getComputedStyle(o).lineHeight,
           10
         ), v = Math.floor(
-          (p - 20) / E
+          (p - 20) / u
         );
         v !== r && n(v);
       }
@@ -975,7 +975,7 @@ const Te = ({
   );
   return /* @__PURE__ */ c(L, { children: [
     l === "top" && m(),
-    /* @__PURE__ */ t(g, { sx: { alignItems: "center" }, children: n }),
+    /* @__PURE__ */ t(g, { sx: { alignItems: "center", ...s && !d && { mx: -16 } }, children: n }),
     l === "bottom" && m(),
     i && /* @__PURE__ */ t(
       b,
@@ -1003,9 +1003,9 @@ const Te = ({
   header: h,
   isError: m = !1,
   isLoading: p = !1,
-  isMini: E = !1
+  isMini: u = !1
 }) => /* @__PURE__ */ c(L, { children: [
-  /* @__PURE__ */ t(o1, { ...h, isMini: E, title: n.html_title }),
+  /* @__PURE__ */ t(o1, { ...h, isMini: u, title: n.html_title }),
   m ? /* @__PURE__ */ t(a1, { erroredText: d }) : /* @__PURE__ */ c(L, { children: [
     /* @__PURE__ */ t(
       h1,
@@ -1014,11 +1014,11 @@ const Te = ({
         asteriskText: r,
         beat: n,
         hasFooterButton: !!l,
-        isMini: E,
+        isMini: u,
         children: p ? /* @__PURE__ */ t(s1, { altLoadingText: i }) : a
       }
     ),
-    l,
+    !u && l,
     s
   ] })
 ] }), ht = ({
@@ -1209,7 +1209,7 @@ const Te = ({
     width: "100%"
   });
   return /* @__PURE__ */ c(
-    u,
+    E,
     {
       sx: {
         display: "flex",
@@ -1242,7 +1242,7 @@ const Te = ({
       ]
     }
   );
-}, ft = ({ bodyText: i }) => /* @__PURE__ */ t(u, { style: { padding: "8px 24px 8px 0px" }, children: /* @__PURE__ */ t(f, { "data-ui-test": "feedback-description", children: i }) }), gt = ({
+}, ft = ({ bodyText: i }) => /* @__PURE__ */ t(E, { style: { padding: "8px 24px 8px 0px" }, children: /* @__PURE__ */ t(f, { "data-ui-test": "feedback-description", children: i }) }), gt = ({
   feedbackOptions: i,
   groupAriaLabel: r,
   selectedRadio: n,
@@ -1255,7 +1255,7 @@ const Te = ({
       width: "100%"
     },
     children: /* @__PURE__ */ t(We, { "aria-label": r, name: "radio-buttons-group", children: i.map((a, o) => /* @__PURE__ */ t(
-      u,
+      E,
       {
         sx: (d) => ({
           p: "24px 0px 23px 0px",
@@ -1308,7 +1308,7 @@ const Te = ({
     resize: "none"
   }), p = Ie();
   return /* @__PURE__ */ c(
-    u,
+    E,
     {
       "aria-label": a,
       sx: {
@@ -1324,8 +1324,8 @@ const Te = ({
             maxRows: 4,
             minRows: 4,
             name: "Feedback",
-            onChange: (E) => {
-              s(E.target.value), h(E.target.value);
+            onChange: (u) => {
+              s(u.target.value), h(u.target.value);
             },
             onClick: () => d(),
             placeholder: l,
@@ -1372,7 +1372,7 @@ const Te = ({
 }) => {
   const o = H.useRef(null), { height: d, width: s } = re(o);
   return /* @__PURE__ */ t(
-    u,
+    E,
     {
       sx: (h) => ({
         background: h.palette.background.highlight,
@@ -1381,7 +1381,7 @@ const Te = ({
         width: "100%"
       }),
       children: /* @__PURE__ */ c(
-        u,
+        E,
         {
           ref: o,
           sx: {
@@ -1396,7 +1396,7 @@ const Te = ({
           children: [
             /* @__PURE__ */ t(ie, { height: d, shouldRun: a, width: s }),
             /* @__PURE__ */ c(
-              u,
+              E,
               {
                 sx: (h) => ({
                   background: h.palette.background.paper,
@@ -1407,7 +1407,7 @@ const Te = ({
                 }),
                 children: [
                   /* @__PURE__ */ c(
-                    u,
+                    E,
                     {
                       sx: {
                         display: "flex",
@@ -1473,7 +1473,7 @@ const Te = ({
                     }
                   ),
                   /* @__PURE__ */ t(
-                    u,
+                    E,
                     {
                       sx: (h) => ({
                         background: h.palette.background.highlight,
@@ -1524,8 +1524,8 @@ const Te = ({
         backgroundColor: "background.paper"
       }
     },
-    children: /* @__PURE__ */ t(g, { height: "100%", justifyContent: "space-between", children: /* @__PURE__ */ c(u, { height: "100%", overflow: "auto", children: [
-      /* @__PURE__ */ t(u, { sx: { p: "16px 24px", width: "100%" }, children: /* @__PURE__ */ t(
+    children: /* @__PURE__ */ t(g, { height: "100%", justifyContent: "space-between", children: /* @__PURE__ */ c(E, { height: "100%", overflow: "auto", children: [
+      /* @__PURE__ */ t(E, { sx: { p: "16px 24px", width: "100%" }, children: /* @__PURE__ */ t(
         q,
         {
           "aria-label": i,
@@ -1537,11 +1537,11 @@ const Te = ({
         }
       ) }),
       /* @__PURE__ */ t(Ge, {}),
-      /* @__PURE__ */ c(u, { children: [
+      /* @__PURE__ */ c(E, { children: [
         /* @__PURE__ */ t(ee, { sx: { p: "16px 24px 8px 24px", whiteSpace: "wrap" }, children: n }),
         /* @__PURE__ */ c(g, { sx: { gap: 12, px: 24 }, children: [
           /* @__PURE__ */ t(f, { color: "secondary", fontSize: 13, children: m }),
-          /* @__PURE__ */ t(N, { children: p.map((E, x) => /* @__PURE__ */ c(
+          /* @__PURE__ */ t(N, { children: p.map((u, x) => /* @__PURE__ */ c(
             X,
             {
               sx: {
@@ -1565,7 +1565,7 @@ const Te = ({
                   K,
                   {
                     disableTypography: !0,
-                    secondary: E,
+                    secondary: u,
                     sx: (v) => ({ color: v.palette.text.secondary, fontSize: 13 })
                   }
                 )
@@ -1575,10 +1575,10 @@ const Te = ({
           )) })
         ] })
       ] }),
-      /* @__PURE__ */ c(u, { children: [
+      /* @__PURE__ */ c(E, { children: [
         /* @__PURE__ */ t(b, { bold: !0, fontSize: 15, sx: { p: "16px 24px 8px 24px" }, children: o }),
         /* @__PURE__ */ t(f, { color: "secondary", fontSize: 13, sx: { mb: 16, mx: 24 }, children: a }),
-        /* @__PURE__ */ t(N, { sx: { p: "16px 24px" }, children: d.map((E, x) => /* @__PURE__ */ c(
+        /* @__PURE__ */ t(N, { sx: { p: "16px 24px" }, children: d.map((u, x) => /* @__PURE__ */ c(
           X,
           {
             sx: (v) => ({
@@ -1592,12 +1592,12 @@ const Te = ({
               p: 16
             }),
             children: [
-              /* @__PURE__ */ t(F, { children: /* @__PURE__ */ t(C, { name: E.icon_name, size: 24 }) }),
+              /* @__PURE__ */ t(F, { children: /* @__PURE__ */ t(C, { name: u.icon_name, size: 24 }) }),
               /* @__PURE__ */ t(
                 K,
                 {
-                  primary: E.title,
-                  secondary: E.content,
+                  primary: u.title,
+                  secondary: u.content,
                   sx: (v) => ({
                     "& > p": {
                       color: v.palette.text.secondary,
@@ -1615,7 +1615,7 @@ const Te = ({
       ] }),
       /* @__PURE__ */ c(g, { sx: { alignItems: "center", justifyContent: "center", pb: 16 }, children: [
         /* @__PURE__ */ t(b, { bold: !0, sx: { p: "16px 24px 8px 24px" }, children: r }),
-        /* @__PURE__ */ c(u, { sx: { display: "flex", gap: 24, p: "12px 24px" }, children: [
+        /* @__PURE__ */ c(E, { sx: { display: "flex", gap: 24, p: "12px 24px" }, children: [
           /* @__PURE__ */ t(q, { onClick: () => h("no"), children: /* @__PURE__ */ t(C, { "aria-label": "thumbs_down", color: "secondary", name: "thumb_down", size: 24 }) }),
           /* @__PURE__ */ t(q, { onClick: () => h("yes"), children: /* @__PURE__ */ t(C, { "aria-label": "thumbs_up", color: "secondary", name: "Thumb_up", size: 24 }) })
         ] })
@@ -1662,7 +1662,7 @@ const Te = ({
   totalSavedText: h
 }) => {
   const m = me(n ? "dark" : "light");
-  return /* @__PURE__ */ t(fe, { theme: m, children: /* @__PURE__ */ t(u, { className: "mx-insights-mefr-body", "data-ui-test": "mefr-body", sx: { mb: 16 }, children: /* @__PURE__ */ c(je, { title: s, children: [
+  return /* @__PURE__ */ t(fe, { theme: m, children: /* @__PURE__ */ t(E, { className: "mx-insights-mefr-body", "data-ui-test": "mefr-body", sx: { mb: 16 }, children: /* @__PURE__ */ c(je, { title: s, children: [
     /* @__PURE__ */ t(
       Pe,
       {
@@ -1671,7 +1671,7 @@ const Te = ({
       }
     ),
     /* @__PURE__ */ c(
-      u,
+      E,
       {
         className: "mx-insights-mefr-body-content",
         "data-ui-test": "mefr-body-content",
@@ -1796,7 +1796,7 @@ const Te = ({
     },
     children: [
       /* @__PURE__ */ t(
-        u,
+        E,
         {
           className: "mx-insights-sdd-account-image-container",
           sx: { display: "flex", justifyContent: "center", width: "100%" },
@@ -1860,7 +1860,7 @@ const Te = ({
   leftLowerText: h,
   leftUpperText: m,
   rightLowerText: p,
-  rightUpperText: E,
+  rightUpperText: u,
   sourceAccountGuid: x
 }) => /* @__PURE__ */ t(H.Fragment, { children: d ? /* @__PURE__ */ t(
   le,
@@ -1873,7 +1873,7 @@ const Te = ({
     leftLowerText: h,
     leftUpperText: m,
     rightLowerText: p,
-    rightUpperText: E
+    rightUpperText: u
   }
 ) : /* @__PURE__ */ t(
   b1,