@mx-cartographer/insights-ui 1.16.7-alpha.JB1 → 1.16.7-alpha.JB2

package/dist/components/insights/CustomInsight/CustomInsight.d.ts

@@ -1,3 +1,8 @@
 import { default as React } from 'react';
 import { CommonBeatProps } from '../../../types/CommonBeat';
-export declare const CustomInsight: React.FC<CommonBeatProps>;
+interface CustomInsightProps extends CommonBeatProps {
+    category_guids: string[];
+    merchant_guids: string[];
+}
+export declare const CustomInsight: React.FC<CustomInsightProps>;
+export {};

package/dist/index.es.js

@@ -1,14 +1,14 @@
-import { jsx as A, jsxs as c, Fragment as v } from "react/jsx-runtime";
+import { jsx as A, jsxs as c, Fragment as x } from "react/jsx-runtime";
 import * as s from "react";
 import p, { useState as s2, useRef as H, useLayoutEffect as r2, useMemo as B2, useCallback as h2, useEffect as m2, forwardRef as z } from "react";
-import { BottomSheetTransition as L2, P as Y, Text as D, InstitutionLogo as k, H3 as i2, MerchantLogo as U, CategoryIcon as Z2, createMXTheme as J2, CheckmarkFilledIcon as G2, H2 as q } from "@mxenabled/mxui";
+import { BottomSheetTransition as L2, P as Y, Text as D, InstitutionLogo as k, H3 as i2, MerchantLogo as O, CategoryIcon as Z2, createMXTheme as J2, CheckmarkFilledIcon as G2, H2 as q } from "@mxenabled/mxui";
 import d2 from "@mui/material/Dialog";
 import v2 from "react-confetti";
 import { Icon as d } from "@mxenabled/mx-icons";
 import M from "@mui/material/Box";
 import a from "@mui/material/Stack";
 import { useInView as x2 } from "react-intersection-observer";
-import O from "@mui/material/Card";
+import X from "@mui/material/Card";
 import Y2 from "@mui/material/CardContent";
 import k2 from "@mui/material/CardHeader";
 import K from "@mui/material/IconButton";
@@ -19,7 +19,7 @@ import z2 from "@mui/material/MenuItem";
 import { useTheme as Q, ThemeProvider as Q2 } from "@mui/material/styles";
 import { ResponsiveChartContainer as f2, ChartsReferenceLine as A2, ChartsXAxis as D2, BarPlot as y2 } from "@mui/x-charts";
 import { useChartContainerDimensions as F2 } from "@mui/x-charts/internals";
-import { useSpring as W2, animated as T } from "@react-spring/web";
+import { useSpring as W2, animated as U } from "@react-spring/web";
 import I2 from "@mui/material/Paper";
 import { CardHeader as K2 } from "@mui/material";
 import b from "@mui/material/Button";
@@ -220,7 +220,7 @@ const U2 = ({
         }
       ),
       /* @__PURE__ */ A(
-        O,
+        X,
         {
           className: "mx-insights-gradient-box-card",
           sx: {
@@ -245,7 +245,7 @@ const U2 = ({
     n(Math.floor(Z / 20));
   };
   return p.useEffect(() => (w(), window.addEventListener("resize", w), () => window.removeEventListener("resize", w)), []), /* @__PURE__ */ A(
-    O,
+    X,
     {
       ref: l,
       "aria-labelledby": e.guid,
@@ -314,7 +314,7 @@ const U2 = ({
   const [C, n] = s2(null), w = () => n(null), o = (Z, L) => {
     w(), t(Z, L);
   };
-  return /* @__PURE__ */ c(v, { children: [
+  return /* @__PURE__ */ c(x, { children: [
     /* @__PURE__ */ A(
       K,
       {
@@ -461,7 +461,7 @@ const U2 = ({
   const { ariaLabel: w, formattedAmount: o, value: m } = r[i];
   return /* @__PURE__ */ c("g", { "aria-label": w, children: [
     /* @__PURE__ */ A(
-      T.rect,
+      U.rect,
       {
         ...B,
         ref: C,
@@ -471,7 +471,7 @@ const U2 = ({
       }
     ),
     /* @__PURE__ */ A(
-      T.text,
+      U.text,
       {
         fill: g.palette.text.primary,
         fontSize: 11,
@@ -507,7 +507,7 @@ const U2 = ({
     (f, { dataIndex: J }) => n && n(J),
     [n]
   ), V = B2(() => {
-    const f = i.map(({ value: x }) => x), J = Math.min(...f), G = Math.max(...f);
+    const f = i.map(({ value: v }) => v), J = Math.min(...f), G = Math.max(...f);
     return {
       series: [
         {
@@ -517,7 +517,7 @@ const U2 = ({
       ],
       xAxis: [
         {
-          data: i.map(({ label: x }) => x),
+          data: i.map(({ label: v }) => v),
           scaleType: "band",
           categoryGapRatio: 0.45
         }
@@ -576,12 +576,12 @@ const U2 = ({
               slots: {
                 // eslint-disable-next-line @typescript-eslint/no-unused-vars
                 axisTickLabel: ({ text: f, ownerState: J, ...G }) => {
-                  const x = i[C ?? i.length - 1]?.label;
+                  const v = i[C ?? i.length - 1]?.label;
                   return /* @__PURE__ */ A(
                     "text",
                     {
                       ...G,
-                      style: { ...G.style, fontWeight: x === f ? "bold" : 400 },
+                      style: { ...G.style, fontWeight: v === f ? "bold" : 400 },
                       children: f
                     }
                   );
@@ -611,11 +611,11 @@ const U2 = ({
               onItemClick: W,
               slots: {
                 bar: (f) => {
-                  const { ownerState: J, style: G, ...x } = f;
+                  const { ownerState: J, style: G, ...v } = f;
                   return /* @__PURE__ */ A(
                     A0,
                     {
-                      ...x,
+                      ...v,
                       colorRange: F,
                       data: i,
                       dataIndex: J.dataIndex,
@@ -666,9 +666,9 @@ const U2 = ({
   }, []);
   const { ariaLabelComparison: n, ariaLabelMain: w, formattedComparison: o, formattedMain: m } = r[i.index], Z = i.type === 0 ? w : n, L = i.type === 0 ? m : o;
   return /* @__PURE__ */ c("g", { "aria-label": Z, children: [
-    /* @__PURE__ */ A(T.rect, { ...l, ref: g, fill: e, rx: 2, style: t }),
+    /* @__PURE__ */ A(U.rect, { ...l, ref: g, fill: e, rx: 2, style: t }),
     /* @__PURE__ */ A(
-      T.text,
+      U.text,
       {
         fill: B.palette.text.secondary,
         fontSize: 11,
@@ -877,7 +877,7 @@ const U2 = ({
       children: [
         /* @__PURE__ */ A(t2, { height: m, shouldRun: r.shouldRun, width: Z }),
         /* @__PURE__ */ c(
-          O,
+          X,
           {
             elevation: 1,
             sx: {
@@ -922,17 +922,17 @@ const U2 = ({
   size: B,
   subHeaderString: g,
   textSX: C
-}) => /* @__PURE__ */ c(v, { children: [
+}) => /* @__PURE__ */ c(x, { children: [
   l && /* @__PURE__ */ A(d, { color: r, fill: i, name: l, size: B, sx: t }),
   /* @__PURE__ */ A(D, { bold: e, sx: C, children: g })
-] }), S = 48, i0 = ({ account: e, headerString: r }) => /* @__PURE__ */ c(v, { children: [
+] }), N = 48, i0 = ({ account: e, headerString: r }) => /* @__PURE__ */ c(x, { children: [
   /* @__PURE__ */ A(
     I2,
     {
       elevation: 1,
       sx: (i) => ({
-        height: S,
-        width: S,
+        height: N,
+        width: N,
         borderRadius: "6px",
         outline: `1.2px solid ${i.palette.border?.lighter}`,
         marginTop: -22,
@@ -942,9 +942,9 @@ const U2 = ({
         k,
         {
           alt: e.logo_alt_text,
-          height: S,
+          height: N,
           institutionGuid: e.guid || "",
-          width: S
+          width: N
         }
       )
     }
@@ -1194,7 +1194,7 @@ const U2 = ({
       sx: o
     }
   );
-  return /* @__PURE__ */ c(v, { children: [
+  return /* @__PURE__ */ c(x, { children: [
     t === "top" && m(),
     /* @__PURE__ */ A(a, { sx: { alignItems: "center", ...n && C && { mx: -16 } }, children: i }),
     t === "bottom" && m(),
@@ -1225,9 +1225,9 @@ const U2 = ({
   isError: w = !1,
   isLoading: o = !1,
   isMini: m = !1
-}) => /* @__PURE__ */ c(v, { children: [
+}) => /* @__PURE__ */ c(x, { children: [
   /* @__PURE__ */ A(o0, { ...n, isMini: m, title: i.html_title }),
-  w ? /* @__PURE__ */ A(a0, { erroredText: g }) : /* @__PURE__ */ c(v, { children: [
+  w ? /* @__PURE__ */ A(a0, { erroredText: g }) : /* @__PURE__ */ c(x, { children: [
     /* @__PURE__ */ A(
       Y0,
       {
@@ -1568,7 +1568,7 @@ const U2 = ({
 ) : /* @__PURE__ */ A(I, { image: u2 }) });
 var E = /* @__PURE__ */ ((e) => (e.Primary = "Primary", e.Secondary = "Secondary", e))(E || {});
 const p0 = (e, r) => /* @__PURE__ */ s.createElement("svg", { width: 288, height: 156, viewBox: "0 0 288 156", fill: "none", xmlns: "http://www.w3.org/2000/svg", ref: r, ...e }, /* @__PURE__ */ s.createElement("rect", { width: 288, height: 156 }), /* @__PURE__ */ s.createElement("line", { x1: 16, y1: 119.5, x2: 272, y2: 119.5, stroke: "#A8B1BD" }), /* @__PURE__ */ s.createElement("path", { d: "M242 18C242 16.8954 242.895 16 244 16H262C263.105 16 264 16.8954 264 18V119H242V18Z", fill: "#CDD3DD" }), /* @__PURE__ */ s.createElement("path", { d: "M198 37C198 35.8954 198.895 35 200 35H218C219.105 35 220 35.8954 220 37V119H198V37Z", fill: "#E4E8EE" }), /* @__PURE__ */ s.createElement("path", { d: "M154 54C154 52.8954 154.895 52 156 52H174C175.105 52 176 52.8954 176 54V119H154V54Z", fill: "#E4E8EE" }), /* @__PURE__ */ s.createElement("path", { d: "M110 77C110 75.8954 110.895 75 112 75H130C131.105 75 132 75.8954 132 77V119H110V77Z", fill: "#E4E8EE" }), /* @__PURE__ */ s.createElement("path", { d: "M66 61C66 59.8954 66.8954 59 68 59H86C87.1046 59 88 59.8954 88 61V119H66V61Z", fill: "#E4E8EE" }), /* @__PURE__ */ s.createElement("path", { d: "M22 72C22 70.8954 22.8954 70 24 70H42C43.1046 70 44 70.8954 44 72V119H22V72Z", fill: "#E4E8EE" }), /* @__PURE__ */ s.createElement("rect", { x: 23, y: 130, width: 20, height: 6, rx: 3, fill: "#E4E8EE" }), /* @__PURE__ */ s.createElement("rect", { x: 67, y: 130, width: 20, height: 6, rx: 3, fill: "#E4E8EE" }), /* @__PURE__ */ s.createElement("rect", { x: 111, y: 130, width: 20, height: 6, rx: 3, fill: "#E4E8EE" }), /* @__PURE__ */ s.createElement("rect", { x: 155, y: 130, width: 20, height: 6, rx: 3, fill: "#E4E8EE" }), /* @__PURE__ */ s.createElement("rect", { x: 199, y: 130, width: 20, height: 6, rx: 3, fill: "#E4E8EE" }), /* @__PURE__ */ s.createElement("rect", { x: 243, y: 130, width: 20, height: 6, rx: 3, fill: "#CDD3DD" })), u0 = z(p0);
-function X() {
+function S() {
   return /* @__PURE__ */ A(I, { divProps: { style: {} }, image: u0 });
 }
 const A1 = ({
@@ -1624,11 +1624,21 @@ const A1 = ({
         onBarClick: C,
         selectedTabIndex: n
       }
-    ) : /* @__PURE__ */ A(X, {})
+    ) : /* @__PURE__ */ A(S, {})
   }
 ), e1 = ({
-  ...e
-}) => /* @__PURE__ */ A(h, { ...e, children: /* @__PURE__ */ A(v, {}) }), s1 = ({
+  category_guids: e,
+  merchant_guids: r,
+  ...i
+}) => /* @__PURE__ */ A(h, { ...i, children: /* @__PURE__ */ A(M, { style: { alignItems: "center", display: "flex", justifyContent: "center" }, children: /* @__PURE__ */ A(
+  O,
+  {
+    alt: "alt name",
+    categoryGuid: e[0],
+    merchantGuid: r[0],
+    size: 32
+  }
+) }) }), s1 = ({
   beat: e,
   buttonProps: r,
   category: i,
@@ -1654,9 +1664,9 @@ const A1 = ({
         ...g.header,
         hasFullWidthImage: !0
       },
-      children: /* @__PURE__ */ A(M, { sx: { background: Z, p: 16, width: "100%" }, children: /* @__PURE__ */ A(O, { sx: { bgcolor: l ? "grey.800" : "common.white", p: 16 }, children: /* @__PURE__ */ c(a, { sx: { alignItems: "center", gap: 12 }, children: [
+      children: /* @__PURE__ */ A(M, { sx: { background: Z, p: 16, width: "100%" }, children: /* @__PURE__ */ A(X, { sx: { bgcolor: l ? "grey.800" : "common.white", p: 16 }, children: /* @__PURE__ */ c(a, { sx: { alignItems: "center", gap: 12 }, children: [
         /* @__PURE__ */ A(
-          U,
+          O,
           {
             alt: C.description,
             categoryGuid: w,
@@ -1684,7 +1694,7 @@ const A1 = ({
       ] }) }) })
     }
   );
-}, N = ({ sx: e }) => /* @__PURE__ */ A(
+}, P = ({ sx: e }) => /* @__PURE__ */ A(
   d,
   {
     fill: !0,
@@ -1761,8 +1771,8 @@ const A1 = ({
                             width: 64
                           }
                         ),
-                        /* @__PURE__ */ A(N, { sx: { marginLeft: 11 } }),
-                        /* @__PURE__ */ A(N, { sx: { marginLeft: 4 } }),
+                        /* @__PURE__ */ A(P, { sx: { marginLeft: 11 } }),
+                        /* @__PURE__ */ A(P, { sx: { marginLeft: 4 } }),
                         l ? /* @__PURE__ */ A(
                           d,
                           {
@@ -1792,8 +1802,8 @@ const A1 = ({
                             }
                           }
                         ),
-                        /* @__PURE__ */ A(N, { sx: { marginRight: 4 } }),
-                        /* @__PURE__ */ A(N, { sx: { marginRight: 11 } }),
+                        /* @__PURE__ */ A(P, { sx: { marginRight: 4 } }),
+                        /* @__PURE__ */ A(P, { sx: { marginRight: 11 } }),
                         /* @__PURE__ */ A(
                           k,
                           {
@@ -2053,7 +2063,7 @@ const A1 = ({
         },
         onBarClick: g
       }
-    ) : /* @__PURE__ */ A(X, {})
+    ) : /* @__PURE__ */ A(S, {})
   }
 ), B1 = ({
   goalCompletionDate: e = "",
@@ -2196,7 +2206,7 @@ const A1 = ({
         },
         onBarClick: g
       }
-    ) : /* @__PURE__ */ A(X, {})
+    ) : /* @__PURE__ */ A(S, {})
   }
 ), c1 = ({
   amounts: e,
@@ -2251,7 +2261,7 @@ const A1 = ({
         },
         onBarClick: g
       }
-    ) : /* @__PURE__ */ A(X, {})
+    ) : /* @__PURE__ */ A(S, {})
   }
 ), w1 = ({
   beat: e,
@@ -2322,7 +2332,7 @@ const A1 = ({
                     position: "absolute"
                   },
                   children: /* @__PURE__ */ A(
-                    U,
+                    O,
                     {
                       alt: g.feedDescription,
                       categoryGuid: g.categoryGuid || "",
@@ -2375,7 +2385,7 @@ const A1 = ({
     },
     children: [
       /* @__PURE__ */ A(
-        U,
+        O,
         {
           alt: i,
           categoryGuid: r || "",
@@ -2434,7 +2444,7 @@ const A1 = ({
         onBarClick: g,
         selectedTabIndex: C
       }
-    ) : /* @__PURE__ */ A(X, {})
+    ) : /* @__PURE__ */ A(S, {})
   }
 ), a1 = ({
   account: e,
@@ -2585,7 +2595,7 @@ const A1 = ({
     }
   };
   return /* @__PURE__ */ A(a, { sx: g.boxContainer, children: /* @__PURE__ */ c(
-    O,
+    X,
     {
       sx: {
         ...g.card,
@@ -2593,7 +2603,7 @@ const A1 = ({
       },
       children: [
         /* @__PURE__ */ A(
-          U,
+          O,
           {
             alt: t,
             categoryGuid: e.primary_transaction?.top_level_category_guid || "",
@@ -2753,7 +2763,7 @@ const A1 = ({
     },
     children: e
   }
-), P = () => /* @__PURE__ */ A("svg", { fill: "none", height: "4", viewBox: "0 0 3 4", width: "3", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ A("circle", { cx: "1.75", cy: "1.9502", fill: "#666666", r: "1.25" }) }), B3 = () => /* @__PURE__ */ A(
+), T = () => /* @__PURE__ */ A("svg", { fill: "none", height: "4", viewBox: "0 0 3 4", width: "3", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ A("circle", { cx: "1.75", cy: "1.9502", fill: "#666666", r: "1.25" }) }), B3 = () => /* @__PURE__ */ A(
   M,
   {
     sx: {
@@ -2795,8 +2805,8 @@ const A1 = ({
             style: { borderRadius: "8px" }
           }
         ),
-        /* @__PURE__ */ A(P, {}),
-        /* @__PURE__ */ A(P, {}),
+        /* @__PURE__ */ A(T, {}),
+        /* @__PURE__ */ A(T, {}),
         t ? /* @__PURE__ */ A(d, { color: "error", fill: !0, name: "error", size: 32 }) : /* @__PURE__ */ A(
           d,
           {
@@ -2806,8 +2816,8 @@ const A1 = ({
             sx: { color: "text.secondary" }
           }
         ),
-        /* @__PURE__ */ A(P, {}),
-        /* @__PURE__ */ A(P, {}),
+        /* @__PURE__ */ A(T, {}),
+        /* @__PURE__ */ A(T, {}),
         /* @__PURE__ */ A(
           M,
           {
@@ -2829,7 +2839,7 @@ const A1 = ({
     ] }) }) }) }),
     /* @__PURE__ */ c(a, { sx: { alignItems: "center", justifyContent: "center" }, children: [
       i && !t && /* @__PURE__ */ A(q, { sx: { textAlign: "center", whiteSpace: "wrap" }, children: e.your_direct_deposit_has_been_updated_successfully }),
-      l && /* @__PURE__ */ c(v, { children: [
+      l && /* @__PURE__ */ c(x, { children: [
         /* @__PURE__ */ A(q, { children: e.connecting }),
         /* @__PURE__ */ A(M, { sx: { my: 24, width: "50%" }, children: /* @__PURE__ */ A(P2, { "aria-label": e.loading }) }),
         /* @__PURE__ */ A(D, { bold: !0, variant: "Body", children: e.syncing_your_information }),