@mx-cartographer/insights-ui 1.8.13-aplha.JB4 → 1.8.13-aplha.JB6

package/dist/index.es.js

@@ -1,8 +1,8 @@
 import { jsx as e, jsxs as d, Fragment as b } from "react/jsx-runtime";
 import * as t from "react";
-import g, { useState as X, useRef as z, useLayoutEffect as ne, useMemo as N, useCallback as me, useEffect as oe, forwardRef as R } from "react";
+import J, { useState as X, useRef as z, useLayoutEffect as ne, useMemo as N, useCallback as me, useEffect as oe, forwardRef as R } from "react";
 import Ee from "@mui/material/Dialog";
-import { BottomSheetTransition as pe, Icon as C, P as k, Text as M, InstitutionLogo as Y, H3 as ae, createMXTheme as ye, MerchantLogo as ue, CategoryIcon as ke, CheckmarkFilledIcon as fe } from "@kyper/mui";
+import { BottomSheetTransition as pe, Icon as C, P as k, Text as M, InstitutionLogo as Y, H3 as ae, createMXTheme as ue, MerchantLogo as ye, CategoryIcon as ke, CheckmarkFilledIcon as fe } from "@kyper/mui";
 import Ce from "react-confetti";
 import p from "@mui/material/Box";
 import w from "@mui/material/Card";
@@ -41,8 +41,8 @@ const Ue = ({
   showBackground: s = !1,
   width: h = 450
 }) => {
-  const [c, m] = g.useState(!1);
-  return g.useEffect(() => {
+  const [c, m] = J.useState(!1);
+  return J.useEffect(() => {
     m(!!i);
   }, [i]), /* @__PURE__ */ e(
     Ee,
@@ -109,10 +109,10 @@ const Ue = ({
   percent: r,
   height: o = 12
 }) => {
-  const [n, a] = xe({ triggerOnce: !0 }), [s, h] = g.useState("0%"), c = r > 100 ? 100 : r;
-  return g.useEffect(() => {
+  const [n, a] = xe({ triggerOnce: !0 }), [s, h] = J.useState("0%"), c = r > 100 ? 100 : r;
+  return J.useEffect(() => {
     a && h(`${c}%`);
-  }, [a, c]), /* @__PURE__ */ e(g.Fragment, { children: /* @__PURE__ */ d(
+  }, [a, c]), /* @__PURE__ */ e(J.Fragment, { children: /* @__PURE__ */ d(
     w,
     {
       "data-ui-test": "progress-bar",
@@ -255,18 +255,18 @@ const Ue = ({
   subHeader: a,
   height: s
 }) => {
-  const [h, c] = g.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, u = E - y - 24;
-    c(Math.floor(u / 20));
+  const [h, c] = J.useState(null), m = () => {
+    const E = 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, y = E - u - 24;
+    c(Math.floor(y / 20));
   };
-  return g.useEffect(() => (m(), window.addEventListener("resize", m), () => window.removeEventListener("resize", m)), []), /* @__PURE__ */ e(
+  return J.useEffect(() => (m(), window.addEventListener("resize", m), () => window.removeEventListener("resize", m)), []), /* @__PURE__ */ e(
     w,
     {
       "aria-labelledby": i.guid,
       className: "mx-mini-insight-card",
       ref: n,
       sx: { height: s, pb: 24, pt: 0, px: 0 },
-      children: i.dismissed_at ? r : /* @__PURE__ */ d(g.Fragment, { children: [
+      children: i.dismissed_at ? r : /* @__PURE__ */ d(J.Fragment, { children: [
         /* @__PURE__ */ e(
           ge,
           {
@@ -326,8 +326,8 @@ const Ue = ({
   tabIndex: a = 0,
   ...s
 }) => {
-  const [h, c] = X(null), m = () => c(null), E = (u, S) => {
-    m(), o(u, S);
+  const [h, c] = X(null), m = () => c(null), E = (y, S) => {
+    m(), o(y, S);
   };
   return /* @__PURE__ */ d(b, { children: [
     /* @__PURE__ */ e(
@@ -335,8 +335,8 @@ const Ue = ({
       {
         "aria-hidden": i,
         "aria-label": l,
-        onClick: (u) => {
-          c(u.currentTarget), n();
+        onClick: (y) => {
+          c(y.currentTarget), n();
         },
         sx: { position: "relative !important", bottom: 6 },
         tabIndex: a,
@@ -364,8 +364,8 @@ const Ue = ({
         onClose: m,
         open: !!h,
         transformOrigin: { horizontal: "right", vertical: "top" },
-        children: r.map(({ icon: u, key: S, text: v }, J) => /* @__PURE__ */ d(Me, { onClick: () => E(J, S), sx: { padding: 12 }, children: [
-          /* @__PURE__ */ e(T, { sx: { minWidth: "32px !important" }, children: u }),
+        children: r.map(({ icon: y, key: S, text: v }, g) => /* @__PURE__ */ d(Me, { onClick: () => E(g, S), sx: { padding: 12 }, children: [
+          /* @__PURE__ */ e(T, { sx: { minWidth: "32px !important" }, children: y }),
           /* @__PURE__ */ e(
             D,
             {
@@ -456,21 +456,21 @@ const Ue = ({
     width: n.width
   });
   ne(() => {
-    const y = new ResizeObserver(() => {
+    const u = new ResizeObserver(() => {
       window.requestAnimationFrame(() => {
         if (h.current) {
-          const { width: u, height: S } = h.current.getBoundingClientRect();
+          const { width: y, height: S } = h.current.getBoundingClientRect();
           if (S === 0) {
             const x = h.current;
             x.style.height = "1px", x.style.transform = `translate3d(${n.x?.get()}px, ${Number(n.y?.get()) - 1}px, 0px)`;
           }
-          const v = u / 2, J = h.current.querySelector("text");
-          J && J.setAttribute("transform", `translate(${v}, -8)`);
+          const v = y / 2, g = h.current.querySelector("text");
+          g && g.setAttribute("transform", `translate(${v}, -8)`);
         }
       });
     });
-    return h.current && y.observe(h.current), () => {
-      h.current && y.unobserve(h.current);
+    return h.current && u.observe(h.current), () => {
+      h.current && u.unobserve(h.current);
     };
   }, []);
   const { ariaLabel: m, formattedAmount: E } = l[r];
@@ -515,13 +515,13 @@ const Ue = ({
   selectedTabIndex: h,
   onBarClick: c
 }) => {
-  const m = Z(), { containerRef: E, height: y, width: u } = He(), S = N(() => {
+  const m = Z(), { containerRef: E, height: u, width: y } = He(), S = N(() => {
     const x = `${l}80`;
     return h === void 0 ? [...new Array(r.length - 1).fill(x), l] : r.map((A, V) => V === h ? l : x);
   }, [l, r, h]), v = me(
     (x, { dataIndex: A }) => c && c(A),
     [c]
-  ), J = N(
+  ), g = N(
     () => ({
       series: [
         {
@@ -543,11 +543,11 @@ const Ue = ({
     /* @__PURE__ */ e(p, { ref: E, sx: { height: o ? 120 : 172, width: "100%", mb: 8 }, children: /* @__PURE__ */ d(
       we,
       {
-        height: y,
+        height: u,
         margin: n,
-        series: J.series,
-        width: u,
-        xAxis: J.xAxis,
+        series: g.series,
+        width: y,
+        xAxis: g.xAxis,
         children: [
           i?.average && /* @__PURE__ */ e(
             Ze,
@@ -668,7 +668,7 @@ const Ue = ({
   rightLowerText: h,
   rightUpperText: c
 }) => {
-  const m = a ? te : ie, E = z(null), { height: y, width: u } = Q(E);
+  const m = a ? te : ie, E = z(null), { height: u, width: y } = Q(E);
   return /* @__PURE__ */ d(
     p,
     {
@@ -682,7 +682,7 @@ const Ue = ({
       }),
       width: "100%",
       children: [
-        /* @__PURE__ */ e(P, { height: y, shouldRun: l.shouldRun, width: u }),
+        /* @__PURE__ */ e(P, { height: u, shouldRun: l.shouldRun, width: y }),
         /* @__PURE__ */ d(
           w,
           {
@@ -874,8 +874,8 @@ const Ue = ({
     if (!n.current) return;
     const s = n.current, h = s.querySelectorAll(".Overlay");
     ["brand100", "brand200", "brand300", "brand400", "brand500"].forEach((m) => {
-      const E = s.querySelectorAll(`.${m}`), y = m.replace("brand", "");
-      le(E, a[y]);
+      const E = s.querySelectorAll(`.${m}`), u = m.replace("brand", "");
+      le(E, a[u]);
     }), le(h, a[300]);
   }, [a]), /* @__PURE__ */ e(
     "div",
@@ -953,10 +953,12 @@ const Ue = ({
         console.log("parentHeight"), console.log(c);
         const m = Array.from(h.children);
         console.log("parentChildren"), console.log(m);
-        const E = m.reduce((v, J) => J !== s ? v + J.clientHeight : v, 0), y = c - E, u = parseInt(
+        const E = m.reduce((v, g) => g !== s ? (console.log(g), console.log(g.clientHeight), v + g.clientHeight) : v, 0);
+        console.log("nonDescriptionChildrenHeight"), console.log(E);
+        const u = c - E, y = parseInt(
           window.getComputedStyle(s).lineHeight,
           10
-        ), S = Math.floor(y / u);
+        ), S = Math.floor(u / y);
         S !== r && o(S);
       }
     }
@@ -1036,9 +1038,9 @@ const Ue = ({
   header: c,
   isError: m = !1,
   isLoading: E = !1,
-  isMini: y = !1
+  isMini: u = !1
 }) => /* @__PURE__ */ d(b, { children: [
-  /* @__PURE__ */ e(ht, { ...c, isMini: y, title: r.html_title }),
+  /* @__PURE__ */ e(ht, { ...c, isMini: u, title: r.html_title }),
   m ? /* @__PURE__ */ e(st, { erroredText: s }) : /* @__PURE__ */ d(b, { children: [
     /* @__PURE__ */ e(
       Et,
@@ -1048,11 +1050,11 @@ const Ue = ({
         beat: r,
         hasFooterButton: !!o,
         isLoading: E,
-        isMini: y,
+        isMini: u,
         children: E ? /* @__PURE__ */ e(dt, { altLoadingText: i }) : n
       }
     ),
-    !y && o,
+    !u && o,
     h
   ] })
 ] }), w1 = ({
@@ -1150,7 +1152,7 @@ const Ue = ({
 }) => /* @__PURE__ */ e(
   ({ elementTag: h, children: c, ...m }) => {
     const E = h;
-    return g.createElement(E, m, c);
+    return J.createElement(E, m, c);
   },
   {
     "aria-hidden": i,
@@ -1169,7 +1171,7 @@ const Ue = ({
     },
     children: l.dismissed_at ? o : r
   }
-), yt = (i, l) => /* @__PURE__ */ t.createElement("svg", { width: 295, height: 142, viewBox: "0 0 295 142", fill: "none", xmlns: "http://www.w3.org/2000/svg", ref: l, ...i }, /* @__PURE__ */ t.createElement("path", { d: "M0.5 4C0.5 2.067 2.067 0.5 4 0.5H291C292.933 0.5 294.5 2.067 294.5 4V39.5H0.5V4Z", stroke: "#EEF1F6" }), /* @__PURE__ */ t.createElement("path", { d: "M0.5 102.5H294.5V138C294.5 139.933 292.933 141.5 291 141.5H4.00001C2.06701 141.5 0.5 139.933 0.5 138V102.5Z", fill: "#F8F9FB", stroke: "#EEF1F6" }), /* @__PURE__ */ t.createElement("rect", { x: 0.5, y: 39.5, width: 294, height: 63, fill: "white", stroke: "#EEF1F6" }), /* @__PURE__ */ t.createElement("rect", { x: 16, y: 55, width: 32, height: 32, rx: 2, fill: "#EEF1F6" }), /* @__PURE__ */ t.createElement("rect", { x: 16, y: 15, width: 80, height: 8, rx: 2, fill: "#EEF1F6" }), /* @__PURE__ */ t.createElement("rect", { x: 16, y: 118, width: 80, height: 8, rx: 2, fill: "#E4E8EE" }), /* @__PURE__ */ t.createElement("rect", { x: 226, y: 118, width: 56, height: 8, rx: 2, fill: "#E4E8EE" }), /* @__PURE__ */ t.createElement("rect", { x: 64, y: 60, width: 80, height: 8, rx: 2, fill: "#EEF1F6" }), /* @__PURE__ */ t.createElement("rect", { x: 232, y: 60, width: 47, height: 8, rx: 2, fill: "#EEF1F6" }), /* @__PURE__ */ t.createElement("rect", { x: 64, y: 76, width: 60, height: 4, rx: 2, fill: "#EEF1F6" })), ut = R(yt), kt = {
+), ut = (i, l) => /* @__PURE__ */ t.createElement("svg", { width: 295, height: 142, viewBox: "0 0 295 142", fill: "none", xmlns: "http://www.w3.org/2000/svg", ref: l, ...i }, /* @__PURE__ */ t.createElement("path", { d: "M0.5 4C0.5 2.067 2.067 0.5 4 0.5H291C292.933 0.5 294.5 2.067 294.5 4V39.5H0.5V4Z", stroke: "#EEF1F6" }), /* @__PURE__ */ t.createElement("path", { d: "M0.5 102.5H294.5V138C294.5 139.933 292.933 141.5 291 141.5H4.00001C2.06701 141.5 0.5 139.933 0.5 138V102.5Z", fill: "#F8F9FB", stroke: "#EEF1F6" }), /* @__PURE__ */ t.createElement("rect", { x: 0.5, y: 39.5, width: 294, height: 63, fill: "white", stroke: "#EEF1F6" }), /* @__PURE__ */ t.createElement("rect", { x: 16, y: 55, width: 32, height: 32, rx: 2, fill: "#EEF1F6" }), /* @__PURE__ */ t.createElement("rect", { x: 16, y: 15, width: 80, height: 8, rx: 2, fill: "#EEF1F6" }), /* @__PURE__ */ t.createElement("rect", { x: 16, y: 118, width: 80, height: 8, rx: 2, fill: "#E4E8EE" }), /* @__PURE__ */ t.createElement("rect", { x: 226, y: 118, width: 56, height: 8, rx: 2, fill: "#E4E8EE" }), /* @__PURE__ */ t.createElement("rect", { x: 64, y: 60, width: 80, height: 8, rx: 2, fill: "#EEF1F6" }), /* @__PURE__ */ t.createElement("rect", { x: 232, y: 60, width: 47, height: 8, rx: 2, fill: "#EEF1F6" }), /* @__PURE__ */ t.createElement("rect", { x: 64, y: 76, width: 60, height: 4, rx: 2, fill: "#EEF1F6" })), yt = R(ut), kt = {
   padding: 8,
   marginTop: 8,
   marginBottom: 12
@@ -1180,7 +1182,7 @@ const Ue = ({
       flexDirection: "row",
       justifyContent: "center"
     },
-    children: /* @__PURE__ */ e(I, { divProps: { style: kt }, image: ut })
+    children: /* @__PURE__ */ e(I, { divProps: { style: kt }, image: yt })
   }
 ), v1 = ({
   headerText: i,
@@ -1358,8 +1360,8 @@ const Ue = ({
             maxRows: 4,
             minRows: 4,
             name: "Feedback",
-            onChange: (y) => {
-              h(y.target.value), c(y.target.value);
+            onChange: (u) => {
+              h(u.target.value), c(u.target.value);
             },
             onClick: () => s(),
             placeholder: o,
@@ -1464,7 +1466,7 @@ const R1 = ({
   account_2_alt_text: o,
   isSuccess: n
 }) => {
-  const a = g.useRef(null), { height: s, width: h } = Q(a);
+  const a = J.useRef(null), { height: s, width: h } = Q(a);
   return /* @__PURE__ */ e(
     p,
     {
@@ -1732,7 +1734,7 @@ const R1 = ({
   title: h,
   totalSavedText: c
 }) => {
-  const m = ye(r ? "dark" : "light");
+  const m = ue(r ? "dark" : "light");
   return /* @__PURE__ */ e(Se, { theme: m, children: /* @__PURE__ */ e(p, { className: "mx-insights-mefr-body", "data-ui-test": "mefr-body", sx: { mb: 16 }, children: /* @__PURE__ */ d(Pe, { title: h, children: [
     /* @__PURE__ */ e(
       Xe,
@@ -1932,9 +1934,9 @@ const R1 = ({
   leftLowerText: c,
   leftUpperText: m,
   rightLowerText: E,
-  rightUpperText: y,
-  sourceAccountGuid: u
-}) => /* @__PURE__ */ e(g.Fragment, { children: s ? /* @__PURE__ */ e(
+  rightUpperText: u,
+  sourceAccountGuid: y
+}) => /* @__PURE__ */ e(J.Fragment, { children: s ? /* @__PURE__ */ e(
   he,
   {
     account: i,
@@ -1945,7 +1947,7 @@ const R1 = ({
     leftLowerText: c,
     leftUpperText: m,
     rightLowerText: E,
-    rightUpperText: y
+    rightUpperText: u
   }
 ) : /* @__PURE__ */ e(
   Lt,
@@ -1953,7 +1955,7 @@ const R1 = ({
     destinationAccountGuid: r,
     externalAccountName: o,
     heldAccountName: n,
-    sourceAccountGuid: u
+    sourceAccountGuid: y
   }
 ) }), bt = (i, l) => /* @__PURE__ */ t.createElement("svg", { width: 288, height: 156, viewBox: "0 0 288 156", fill: "none", xmlns: "http://www.w3.org/2000/svg", ref: l, ...i }, /* @__PURE__ */ t.createElement("rect", { width: 288, height: 156 }), /* @__PURE__ */ t.createElement("line", { x1: 16, y1: 119.5, x2: 272, y2: 119.5, stroke: "#A8B1BD" }), /* @__PURE__ */ t.createElement("path", { d: "M242 18C242 16.8954 242.895 16 244 16H262C263.105 16 264 16.8954 264 18V119H242V18Z", fill: "#CDD3DD" }), /* @__PURE__ */ t.createElement("path", { d: "M198 37C198 35.8954 198.895 35 200 35H218C219.105 35 220 35.8954 220 37V119H198V37Z", fill: "#E4E8EE" }), /* @__PURE__ */ t.createElement("path", { d: "M154 54C154 52.8954 154.895 52 156 52H174C175.105 52 176 52.8954 176 54V119H154V54Z", fill: "#E4E8EE" }), /* @__PURE__ */ t.createElement("path", { d: "M110 77C110 75.8954 110.895 75 112 75H130C131.105 75 132 75.8954 132 77V119H110V77Z", fill: "#E4E8EE" }), /* @__PURE__ */ t.createElement("path", { d: "M66 61C66 59.8954 66.8954 59 68 59H86C87.1046 59 88 59.8954 88 61V119H66V61Z", fill: "#E4E8EE" }), /* @__PURE__ */ t.createElement("path", { d: "M22 72C22 70.8954 22.8954 70 24 70H42C43.1046 70 44 70.8954 44 72V119H22V72Z", fill: "#E4E8EE" }), /* @__PURE__ */ t.createElement("rect", { x: 23, y: 130, width: 20, height: 6, rx: 3, fill: "#E4E8EE" }), /* @__PURE__ */ t.createElement("rect", { x: 67, y: 130, width: 20, height: 6, rx: 3, fill: "#E4E8EE" }), /* @__PURE__ */ t.createElement("rect", { x: 111, y: 130, width: 20, height: 6, rx: 3, fill: "#E4E8EE" }), /* @__PURE__ */ t.createElement("rect", { x: 155, y: 130, width: 20, height: 6, rx: 3, fill: "#E4E8EE" }), /* @__PURE__ */ t.createElement("rect", { x: 199, y: 130, width: 20, height: 6, rx: 3, fill: "#E4E8EE" }), /* @__PURE__ */ t.createElement("rect", { x: 243, y: 130, width: 20, height: 6, rx: 3, fill: "#CDD3DD" })), ce = R(bt), F1 = ({
   amounts: i,
@@ -2013,7 +2015,7 @@ const R1 = ({
       }),
       children: [
         /* @__PURE__ */ e(
-          ue,
+          ye,
           {
             alt: o,
             categoryGuid: i.primary_transaction?.top_level_category_guid || "",
@@ -2134,7 +2136,7 @@ const R1 = ({
   displayData: o,
   ...n
 }) => {
-  const { no_spend_days: a } = i.payload, { noSpendDays: s, dollarBillAltText: h, daysOfTheWeek: c } = o, m = zt[a.length || 0], E = g.useRef(null), { height: y, width: u } = Q(E);
+  const { no_spend_days: a } = i.payload, { noSpendDays: s, dollarBillAltText: h, daysOfTheWeek: c } = o, m = zt[a.length || 0], E = J.useRef(null), { height: u, width: y } = Q(E);
   return /* @__PURE__ */ e(
     L,
     {
@@ -2150,7 +2152,7 @@ const R1 = ({
           width: "100%",
           children: [
             /* @__PURE__ */ e("img", { alt: h, src: m, width: 138 }),
-            a?.length >= 4 && /* @__PURE__ */ e(P, { height: y, shouldRun: !0, width: u }),
+            a?.length >= 4 && /* @__PURE__ */ e(P, { height: u, shouldRun: !0, width: y }),
             /* @__PURE__ */ e(Tt, { daysOfTheWeek: c, noSpendDays: s })
           ]
         }
@@ -2200,7 +2202,7 @@ const R1 = ({
     ),
     header: n ? void 0 : o,
     isMini: n,
-    children: /* @__PURE__ */ e(p, { mb: 16, ml: -16, mr: -16, children: /* @__PURE__ */ e(
+    children: /* @__PURE__ */ e(p, { height: n ? 200 : "auto", mb: 16, ml: -16, mr: -16, children: /* @__PURE__ */ e(
       "img",
       {
         alt: l.description,