@mx-cartographer/insights-ui 1.8.8 → 1.8.9

package/dist/index.es.js

@@ -2,7 +2,7 @@ import { jsx as t, jsxs as d, Fragment as H } from "react/jsx-runtime";
 import * as e from "react";
 import g, { useState as X, useRef as W, useLayoutEffect as ne, useMemo as N, useCallback as me, useEffect as oe, forwardRef as b } 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";
@@ -256,8 +256,8 @@ const Ue = ({
   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 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__ */ t(
     w,
@@ -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(H, { children: [
     /* @__PURE__ */ t(
@@ -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__ */ t(z, { sx: { minWidth: "32px !important" }, children: u }),
+        children: r.map(({ icon: y, key: S, text: v }, J) => /* @__PURE__ */ d(Me, { onClick: () => E(J, S), sx: { padding: 12 }, children: [
+          /* @__PURE__ */ t(z, { sx: { minWidth: "32px !important" }, children: y }),
           /* @__PURE__ */ t(
             T,
             {
@@ -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");
+          const v = y / 2, J = h.current.querySelector("text");
           J && J.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,7 +515,7 @@ 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(
@@ -543,10 +543,10 @@ const Ue = ({
     /* @__PURE__ */ t(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,
+        width: y,
         xAxis: J.xAxis,
         children: [
           i?.average && /* @__PURE__ */ t(
@@ -668,7 +668,7 @@ const Ue = ({
   rightLowerText: h,
   rightUpperText: c
 }) => {
-  const m = a ? te : ie, E = W(null), { height: y, width: u } = Q(E);
+  const m = a ? te : ie, E = W(null), { height: u, width: y } = Q(E);
   return /* @__PURE__ */ d(
     p,
     {
@@ -682,7 +682,7 @@ const Ue = ({
       }),
       width: "100%",
       children: [
-        /* @__PURE__ */ t(P, { height: y, shouldRun: l.shouldRun, width: u }),
+        /* @__PURE__ */ t(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__ */ t(
     "div",
@@ -946,10 +946,10 @@ const Ue = ({
     if (n.current) {
       const s = n.current, h = s.parentElement;
       if (h) {
-        const m = Array.from(h.children).reduce((v, J) => J !== s ? v + J.clientHeight : v, 0), y = h.clientHeight - m, u = parseInt(
+        const m = Array.from(h.children).reduce((v, J) => J !== s ? v + J.clientHeight : v, 0), u = h.clientHeight - m, y = parseInt(
           window.getComputedStyle(s).lineHeight,
           10
-        ), S = Math.floor(y / u);
+        ), S = Math.floor(u / y);
         S !== r && o(S);
       }
     }
@@ -1029,9 +1029,9 @@ const Ue = ({
   header: c,
   isError: m = !1,
   isLoading: E = !1,
-  isMini: y = !1
+  isMini: u = !1
 }) => /* @__PURE__ */ d(H, { children: [
-  /* @__PURE__ */ t(ht, { ...c, isMini: y, title: r.html_title }),
+  /* @__PURE__ */ t(ht, { ...c, isMini: u, title: r.html_title }),
   m ? /* @__PURE__ */ t(st, { erroredText: s }) : /* @__PURE__ */ d(H, { children: [
     /* @__PURE__ */ t(
       Et,
@@ -1041,11 +1041,11 @@ const Ue = ({
         beat: r,
         hasFooterButton: !!o,
         isLoading: E,
-        isMini: y,
+        isMini: u,
         children: E ? /* @__PURE__ */ t(dt, { altLoadingText: i }) : n
       }
     ),
-    !y && o,
+    !u && o,
     h
   ] })
 ] }), w1 = ({
@@ -1162,7 +1162,7 @@ const Ue = ({
     },
     children: l.dismissed_at ? o : r
   }
-), yt = (i, l) => /* @__PURE__ */ e.createElement("svg", { width: 295, height: 142, viewBox: "0 0 295 142", fill: "none", xmlns: "http://www.w3.org/2000/svg", ref: l, ...i }, /* @__PURE__ */ e.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__ */ e.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__ */ e.createElement("rect", { x: 0.5, y: 39.5, width: 294, height: 63, fill: "white", stroke: "#EEF1F6" }), /* @__PURE__ */ e.createElement("rect", { x: 16, y: 55, width: 32, height: 32, rx: 2, fill: "#EEF1F6" }), /* @__PURE__ */ e.createElement("rect", { x: 16, y: 15, width: 80, height: 8, rx: 2, fill: "#EEF1F6" }), /* @__PURE__ */ e.createElement("rect", { x: 16, y: 118, width: 80, height: 8, rx: 2, fill: "#E4E8EE" }), /* @__PURE__ */ e.createElement("rect", { x: 226, y: 118, width: 56, height: 8, rx: 2, fill: "#E4E8EE" }), /* @__PURE__ */ e.createElement("rect", { x: 64, y: 60, width: 80, height: 8, rx: 2, fill: "#EEF1F6" }), /* @__PURE__ */ e.createElement("rect", { x: 232, y: 60, width: 47, height: 8, rx: 2, fill: "#EEF1F6" }), /* @__PURE__ */ e.createElement("rect", { x: 64, y: 76, width: 60, height: 4, rx: 2, fill: "#EEF1F6" })), ut = b(yt), kt = {
+), ut = (i, l) => /* @__PURE__ */ e.createElement("svg", { width: 295, height: 142, viewBox: "0 0 295 142", fill: "none", xmlns: "http://www.w3.org/2000/svg", ref: l, ...i }, /* @__PURE__ */ e.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__ */ e.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__ */ e.createElement("rect", { x: 0.5, y: 39.5, width: 294, height: 63, fill: "white", stroke: "#EEF1F6" }), /* @__PURE__ */ e.createElement("rect", { x: 16, y: 55, width: 32, height: 32, rx: 2, fill: "#EEF1F6" }), /* @__PURE__ */ e.createElement("rect", { x: 16, y: 15, width: 80, height: 8, rx: 2, fill: "#EEF1F6" }), /* @__PURE__ */ e.createElement("rect", { x: 16, y: 118, width: 80, height: 8, rx: 2, fill: "#E4E8EE" }), /* @__PURE__ */ e.createElement("rect", { x: 226, y: 118, width: 56, height: 8, rx: 2, fill: "#E4E8EE" }), /* @__PURE__ */ e.createElement("rect", { x: 64, y: 60, width: 80, height: 8, rx: 2, fill: "#EEF1F6" }), /* @__PURE__ */ e.createElement("rect", { x: 232, y: 60, width: 47, height: 8, rx: 2, fill: "#EEF1F6" }), /* @__PURE__ */ e.createElement("rect", { x: 64, y: 76, width: 60, height: 4, rx: 2, fill: "#EEF1F6" })), yt = b(ut), kt = {
   padding: 8,
   marginTop: 8,
   marginBottom: 12
@@ -1173,7 +1173,7 @@ const Ue = ({
       flexDirection: "row",
       justifyContent: "center"
     },
-    children: /* @__PURE__ */ t(R, { divProps: { style: kt }, image: ut })
+    children: /* @__PURE__ */ t(R, { divProps: { style: kt }, image: yt })
   }
 ), v1 = ({
   headerText: i,
@@ -1351,8 +1351,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,
@@ -1587,98 +1587,106 @@ const R1 = ({
 }, I1 = ({
   copy: i,
   sendResponseAnalytics: l
-}) => /* @__PURE__ */ t(f, { height: "100%", justifyContent: "space-between", children: /* @__PURE__ */ d(p, { height: "100%", overflow: "auto", children: [
-  /* @__PURE__ */ d(p, { children: [
-    /* @__PURE__ */ t(ae, { sx: { p: "16px 24px 8px 24px", whiteSpace: "wrap" }, children: i.header_text }),
-    /* @__PURE__ */ d(f, { sx: { gap: 12, px: 24 }, children: [
-      /* @__PURE__ */ t(k, { color: "textSecondary", fontSize: 13, children: i.upper_description }),
-      /* @__PURE__ */ t($, { children: i.upper_list_array.map((r, o) => /* @__PURE__ */ d(
-        ee,
-        {
-          sx: {
-            alignItems: "flex-start",
-            alignSelf: "stretch",
-            gap: 8,
-            mb: 12,
-            minHeight: "unset"
+}) => /* @__PURE__ */ t(
+  f,
+  {
+    height: "100%",
+    justifyContent: "space-between",
+    sx: (r) => ({ background: r.palette.background.paper }),
+    children: /* @__PURE__ */ d(p, { height: "100%", overflow: "auto", children: [
+      /* @__PURE__ */ d(p, { children: [
+        /* @__PURE__ */ t(ae, { sx: { p: "16px 24px 8px 24px", whiteSpace: "wrap" }, children: i.header_text }),
+        /* @__PURE__ */ d(f, { sx: { gap: 12, px: 24 }, children: [
+          /* @__PURE__ */ t(k, { color: "textSecondary", fontSize: 13, children: i.upper_description }),
+          /* @__PURE__ */ t($, { children: i.upper_list_array.map((r, o) => /* @__PURE__ */ d(
+            ee,
+            {
+              sx: {
+                alignItems: "flex-start",
+                alignSelf: "stretch",
+                gap: 8,
+                mb: 12,
+                minHeight: "unset"
+              },
+              children: [
+                /* @__PURE__ */ t(z, { children: /* @__PURE__ */ t(C, { color: "success", name: "check_circle", size: 16, sx: { lineHeight: 1.2 } }) }),
+                /* @__PURE__ */ t(
+                  T,
+                  {
+                    disableTypography: !0,
+                    secondary: r,
+                    sx: (n) => ({ color: n.palette.text.secondary, fontSize: 13 })
+                  }
+                )
+              ]
+            },
+            `list-item-${o}`
+          )) })
+        ] })
+      ] }),
+      /* @__PURE__ */ d(p, { children: [
+        /* @__PURE__ */ t(M, { bold: !0, fontSize: 15, sx: { p: "16px 24px 8px 24px" }, children: i.lower_header_text }),
+        /* @__PURE__ */ t(k, { color: "textSecondary", fontSize: 13, sx: { mb: 16, mx: 24 }, children: i.lower_description }),
+        /* @__PURE__ */ t($, { sx: { p: "16px 24px" }, children: i.lower_list_array.map((r, o) => /* @__PURE__ */ d(
+          ee,
+          {
+            sx: (n) => ({
+              alignItems: "flex-start",
+              alignSelf: "stretch",
+              background: n.palette.background.paper,
+              border: `1px solid ${n.palette.border.light}`,
+              borderRadius: "8px",
+              boxShadow: 1,
+              gap: 12,
+              mb: 24,
+              p: 16
+            }),
+            children: [
+              /* @__PURE__ */ t(z, { children: /* @__PURE__ */ t(C, { name: r.icon_name, size: 24 }) }),
+              /* @__PURE__ */ t(
+                T,
+                {
+                  primary: r.title,
+                  secondary: r.content,
+                  sx: (n) => ({
+                    "& > p": {
+                      color: n.palette.text.secondary,
+                      fontSize: 13,
+                      fontWeight: "400",
+                      lineHeight: "20px"
+                    }
+                  })
+                }
+              )
+            ]
           },
-          children: [
-            /* @__PURE__ */ t(z, { children: /* @__PURE__ */ t(C, { color: "success", name: "check_circle", size: 16, sx: { lineHeight: 1.2 } }) }),
-            /* @__PURE__ */ t(
-              T,
-              {
-                disableTypography: !0,
-                secondary: r,
-                sx: (n) => ({ color: n.palette.text.secondary, fontSize: 13 })
-              }
-            )
-          ]
-        },
-        `list-item-${o}`
-      )) })
-    ] })
-  ] }),
-  /* @__PURE__ */ d(p, { children: [
-    /* @__PURE__ */ t(M, { bold: !0, fontSize: 15, sx: { p: "16px 24px 8px 24px" }, children: i.lower_header_text }),
-    /* @__PURE__ */ t(k, { color: "textSecondary", fontSize: 13, sx: { mb: 16, mx: 24 }, children: i.lower_description }),
-    /* @__PURE__ */ t($, { sx: { p: "16px 24px" }, children: i.lower_list_array.map((r, o) => /* @__PURE__ */ d(
-      ee,
-      {
-        sx: (n) => ({
-          alignItems: "flex-start",
-          alignSelf: "stretch",
-          background: n.palette.background.paper,
-          border: `1px solid ${n.palette.border.light}`,
-          borderRadius: "8px",
-          boxShadow: 1,
-          gap: 12,
-          mb: 24,
-          p: 16
-        }),
-        children: [
-          /* @__PURE__ */ t(z, { children: /* @__PURE__ */ t(C, { name: r.icon_name, size: 24 }) }),
+          `lower-list-${o}`
+        )) })
+      ] }),
+      /* @__PURE__ */ d(f, { sx: { alignItems: "center", justifyContent: "center", pb: 16 }, children: [
+        /* @__PURE__ */ t(M, { bold: !0, sx: { p: "16px 24px 8px 24px" }, children: i.footer_title }),
+        /* @__PURE__ */ d(p, { sx: { display: "flex", gap: 24, p: "12px 24px" }, children: [
           /* @__PURE__ */ t(
-            T,
+            K,
             {
-              primary: r.title,
-              secondary: r.content,
-              sx: (n) => ({
-                "& > p": {
-                  color: n.palette.text.secondary,
-                  fontSize: 13,
-                  fontWeight: "400",
-                  lineHeight: "20px"
-                }
-              })
+              "aria-label": i.aria_label_thumbs_down,
+              onClick: () => l("no"),
+              children: /* @__PURE__ */ t(C, { color: "secondary", name: "thumb_down", size: 24 })
+            }
+          ),
+          /* @__PURE__ */ t(
+            K,
+            {
+              "aria-label": i.aria_label_thumbs_up,
+              onClick: () => l("yes"),
+              children: /* @__PURE__ */ t(C, { color: "secondary", name: "thumb_up", size: 24 })
             }
           )
-        ]
-      },
-      `lower-list-${o}`
-    )) })
-  ] }),
-  /* @__PURE__ */ d(f, { sx: { alignItems: "center", justifyContent: "center", pb: 16 }, children: [
-    /* @__PURE__ */ t(M, { bold: !0, sx: { p: "16px 24px 8px 24px" }, children: i.footer_title }),
-    /* @__PURE__ */ d(p, { sx: { display: "flex", gap: 24, p: "12px 24px" }, children: [
-      /* @__PURE__ */ t(
-        K,
-        {
-          "aria-label": i.aria_label_thumbs_down,
-          onClick: () => l("no"),
-          children: /* @__PURE__ */ t(C, { color: "secondary", name: "thumb_down", size: 24 })
-        }
-      ),
-      /* @__PURE__ */ t(
-        K,
-        {
-          "aria-label": i.aria_label_thumbs_up,
-          onClick: () => l("yes"),
-          children: /* @__PURE__ */ t(C, { color: "secondary", name: "thumb_up", size: 24 })
-        }
-      )
+        ] })
+      ] })
     ] })
-  ] })
-] }) }), V1 = ({
+  }
+), V1 = ({
   account_1_alt_text: i,
   account_2_alt_text: l,
   account_guid_1: r,
@@ -1717,7 +1725,7 @@ const R1 = ({
   title: h,
   totalSavedText: c
 }) => {
-  const m = ye(r ? "dark" : "light");
+  const m = ue(r ? "dark" : "light");
   return /* @__PURE__ */ t(Se, { theme: m, children: /* @__PURE__ */ t(p, { className: "mx-insights-mefr-body", "data-ui-test": "mefr-body", sx: { mb: 16 }, children: /* @__PURE__ */ d(Pe, { title: h, children: [
     /* @__PURE__ */ t(
       Xe,
@@ -1917,8 +1925,8 @@ const R1 = ({
   leftLowerText: c,
   leftUpperText: m,
   rightLowerText: E,
-  rightUpperText: y,
-  sourceAccountGuid: u
+  rightUpperText: u,
+  sourceAccountGuid: y
 }) => /* @__PURE__ */ t(g.Fragment, { children: s ? /* @__PURE__ */ t(
   he,
   {
@@ -1930,7 +1938,7 @@ const R1 = ({
     leftLowerText: c,
     leftUpperText: m,
     rightLowerText: E,
-    rightUpperText: y
+    rightUpperText: u
   }
 ) : /* @__PURE__ */ t(
   Lt,
@@ -1938,7 +1946,7 @@ const R1 = ({
     destinationAccountGuid: r,
     externalAccountName: o,
     heldAccountName: n,
-    sourceAccountGuid: u
+    sourceAccountGuid: y
   }
 ) }), bt = (i, l) => /* @__PURE__ */ e.createElement("svg", { width: 288, height: 156, viewBox: "0 0 288 156", fill: "none", xmlns: "http://www.w3.org/2000/svg", ref: l, ...i }, /* @__PURE__ */ e.createElement("rect", { width: 288, height: 156 }), /* @__PURE__ */ e.createElement("line", { x1: 16, y1: 119.5, x2: 272, y2: 119.5, stroke: "#A8B1BD" }), /* @__PURE__ */ e.createElement("path", { d: "M242 18C242 16.8954 242.895 16 244 16H262C263.105 16 264 16.8954 264 18V119H242V18Z", fill: "#CDD3DD" }), /* @__PURE__ */ e.createElement("path", { d: "M198 37C198 35.8954 198.895 35 200 35H218C219.105 35 220 35.8954 220 37V119H198V37Z", fill: "#E4E8EE" }), /* @__PURE__ */ e.createElement("path", { d: "M154 54C154 52.8954 154.895 52 156 52H174C175.105 52 176 52.8954 176 54V119H154V54Z", fill: "#E4E8EE" }), /* @__PURE__ */ e.createElement("path", { d: "M110 77C110 75.8954 110.895 75 112 75H130C131.105 75 132 75.8954 132 77V119H110V77Z", fill: "#E4E8EE" }), /* @__PURE__ */ e.createElement("path", { d: "M66 61C66 59.8954 66.8954 59 68 59H86C87.1046 59 88 59.8954 88 61V119H66V61Z", fill: "#E4E8EE" }), /* @__PURE__ */ e.createElement("path", { d: "M22 72C22 70.8954 22.8954 70 24 70H42C43.1046 70 44 70.8954 44 72V119H22V72Z", fill: "#E4E8EE" }), /* @__PURE__ */ e.createElement("rect", { x: 23, y: 130, width: 20, height: 6, rx: 3, fill: "#E4E8EE" }), /* @__PURE__ */ e.createElement("rect", { x: 67, y: 130, width: 20, height: 6, rx: 3, fill: "#E4E8EE" }), /* @__PURE__ */ e.createElement("rect", { x: 111, y: 130, width: 20, height: 6, rx: 3, fill: "#E4E8EE" }), /* @__PURE__ */ e.createElement("rect", { x: 155, y: 130, width: 20, height: 6, rx: 3, fill: "#E4E8EE" }), /* @__PURE__ */ e.createElement("rect", { x: 199, y: 130, width: 20, height: 6, rx: 3, fill: "#E4E8EE" }), /* @__PURE__ */ e.createElement("rect", { x: 243, y: 130, width: 20, height: 6, rx: 3, fill: "#CDD3DD" })), ce = b(bt), F1 = ({
   amounts: i,
@@ -1998,7 +2006,7 @@ const R1 = ({
       }),
       children: [
         /* @__PURE__ */ t(
-          ue,
+          ye,
           {
             alt: o,
             categoryGuid: i.primary_transaction?.top_level_category_guid || "",
@@ -2119,7 +2127,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 = g.useRef(null), { height: u, width: y } = Q(E);
   return /* @__PURE__ */ t(
     I,
     {
@@ -2135,7 +2143,7 @@ const R1 = ({
           width: "100%",
           children: [
             /* @__PURE__ */ t("img", { alt: h, src: m, width: 138 }),
-            a?.length >= 4 && /* @__PURE__ */ t(P, { height: y, shouldRun: !0, width: u }),
+            a?.length >= 4 && /* @__PURE__ */ t(P, { height: u, shouldRun: !0, width: y }),
             /* @__PURE__ */ t(Tt, { daysOfTheWeek: c, noSpendDays: s })
           ]
         }