@mx-cartographer/insights-ui 1.16.7-alpha.JB3 → 1.16.7-alpha.JB4

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

@@ -1,8 +1,7 @@
 import { default as React } from 'react';
 import { CommonBeatProps } from '../../../types/CommonBeat';
 interface CustomInsightProps extends CommonBeatProps {
-    category_guids: string[];
-    merchant_guids: string[];
+    children: React.ReactNode;
 }
 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 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 O, 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 U, 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 X from "@mui/material/Card";
+import O 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 U } from "@react-spring/web";
+import { useSpring as W2, animated as T } 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(
-        X,
+        O,
         {
           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(
-    X,
+    O,
     {
       ref: l,
       "aria-labelledby": e.guid,
@@ -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(
-      U.rect,
+      T.rect,
       {
         ...B,
         ref: C,
@@ -471,7 +471,7 @@ const U2 = ({
       }
     ),
     /* @__PURE__ */ A(
-      U.text,
+      T.text,
       {
         fill: g.palette.text.primary,
         fontSize: 11,
@@ -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(U.rect, { ...l, ref: g, fill: e, rx: 2, style: t }),
+    /* @__PURE__ */ A(T.rect, { ...l, ref: g, fill: e, rx: 2, style: t }),
     /* @__PURE__ */ A(
-      U.text,
+      T.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(
-          X,
+          O,
           {
             elevation: 1,
             sx: {
@@ -925,14 +925,14 @@ const U2 = ({
 }) => /* @__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 })
-] }), N = 48, i0 = ({ account: e, headerString: r }) => /* @__PURE__ */ c(x, { children: [
+] }), S = 48, i0 = ({ account: e, headerString: r }) => /* @__PURE__ */ c(x, { children: [
   /* @__PURE__ */ A(
     I2,
     {
       elevation: 1,
       sx: (i) => ({
-        height: N,
-        width: N,
+        height: S,
+        width: S,
         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: N,
+          height: S,
           institutionGuid: e.guid || "",
-          width: N
+          width: S
         }
       )
     }
@@ -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 S() {
+function X() {
   return /* @__PURE__ */ A(I, { divProps: { style: {} }, image: u0 });
 }
 const A1 = ({
@@ -1624,21 +1624,12 @@ const A1 = ({
         onBarClick: C,
         selectedTabIndex: n
       }
-    ) : /* @__PURE__ */ A(S, {})
+    ) : /* @__PURE__ */ A(X, {})
   }
 ), e1 = ({
-  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 = ({
+  children: e,
+  ...r
+}) => /* @__PURE__ */ A(h, { ...r, children: e }), s1 = ({
   beat: e,
   buttonProps: r,
   category: i,
@@ -1664,9 +1655,9 @@ const A1 = ({
         ...g.header,
         hasFullWidthImage: !0
       },
-      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: [
+      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: [
         /* @__PURE__ */ A(
-          O,
+          U,
           {
             alt: C.description,
             categoryGuid: w,
@@ -1694,7 +1685,7 @@ const A1 = ({
       ] }) }) })
     }
   );
-}, P = ({ sx: e }) => /* @__PURE__ */ A(
+}, N = ({ sx: e }) => /* @__PURE__ */ A(
   d,
   {
     fill: !0,
@@ -1771,8 +1762,8 @@ const A1 = ({
                             width: 64
                           }
                         ),
-                        /* @__PURE__ */ A(P, { sx: { marginLeft: 11 } }),
-                        /* @__PURE__ */ A(P, { sx: { marginLeft: 4 } }),
+                        /* @__PURE__ */ A(N, { sx: { marginLeft: 11 } }),
+                        /* @__PURE__ */ A(N, { sx: { marginLeft: 4 } }),
                         l ? /* @__PURE__ */ A(
                           d,
                           {
@@ -1802,8 +1793,8 @@ const A1 = ({
                             }
                           }
                         ),
-                        /* @__PURE__ */ A(P, { sx: { marginRight: 4 } }),
-                        /* @__PURE__ */ A(P, { sx: { marginRight: 11 } }),
+                        /* @__PURE__ */ A(N, { sx: { marginRight: 4 } }),
+                        /* @__PURE__ */ A(N, { sx: { marginRight: 11 } }),
                         /* @__PURE__ */ A(
                           k,
                           {
@@ -2063,7 +2054,7 @@ const A1 = ({
         },
         onBarClick: g
       }
-    ) : /* @__PURE__ */ A(S, {})
+    ) : /* @__PURE__ */ A(X, {})
   }
 ), B1 = ({
   goalCompletionDate: e = "",
@@ -2206,7 +2197,7 @@ const A1 = ({
         },
         onBarClick: g
       }
-    ) : /* @__PURE__ */ A(S, {})
+    ) : /* @__PURE__ */ A(X, {})
   }
 ), c1 = ({
   amounts: e,
@@ -2261,7 +2252,7 @@ const A1 = ({
         },
         onBarClick: g
       }
-    ) : /* @__PURE__ */ A(S, {})
+    ) : /* @__PURE__ */ A(X, {})
   }
 ), w1 = ({
   beat: e,
@@ -2332,7 +2323,7 @@ const A1 = ({
                     position: "absolute"
                   },
                   children: /* @__PURE__ */ A(
-                    O,
+                    U,
                     {
                       alt: g.feedDescription,
                       categoryGuid: g.categoryGuid || "",
@@ -2385,7 +2376,7 @@ const A1 = ({
     },
     children: [
       /* @__PURE__ */ A(
-        O,
+        U,
         {
           alt: i,
           categoryGuid: r || "",
@@ -2444,7 +2435,7 @@ const A1 = ({
         onBarClick: g,
         selectedTabIndex: C
       }
-    ) : /* @__PURE__ */ A(S, {})
+    ) : /* @__PURE__ */ A(X, {})
   }
 ), a1 = ({
   account: e,
@@ -2595,7 +2586,7 @@ const A1 = ({
     }
   };
   return /* @__PURE__ */ A(a, { sx: g.boxContainer, children: /* @__PURE__ */ c(
-    X,
+    O,
     {
       sx: {
         ...g.card,
@@ -2603,7 +2594,7 @@ const A1 = ({
       },
       children: [
         /* @__PURE__ */ A(
-          O,
+          U,
           {
             alt: t,
             categoryGuid: e.primary_transaction?.top_level_category_guid || "",
@@ -2763,7 +2754,7 @@ const A1 = ({
     },
     children: e
   }
-), 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(
+), 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(
   M,
   {
     sx: {
@@ -2805,8 +2796,8 @@ const A1 = ({
             style: { borderRadius: "8px" }
           }
         ),
-        /* @__PURE__ */ A(T, {}),
-        /* @__PURE__ */ A(T, {}),
+        /* @__PURE__ */ A(P, {}),
+        /* @__PURE__ */ A(P, {}),
         t ? /* @__PURE__ */ A(d, { color: "error", fill: !0, name: "error", size: 32 }) : /* @__PURE__ */ A(
           d,
           {
@@ -2816,8 +2807,8 @@ const A1 = ({
             sx: { color: "text.secondary" }
           }
         ),
-        /* @__PURE__ */ A(T, {}),
-        /* @__PURE__ */ A(T, {}),
+        /* @__PURE__ */ A(P, {}),
+        /* @__PURE__ */ A(P, {}),
         /* @__PURE__ */ A(
           M,
           {