@mx-cartographer/insights-ui 1.7.9-alpha.mega10 → 1.7.9-alpha.mega12

package/dist/index.es.js

@@ -1,8 +1,8 @@
 import { jsx as t, jsxs as h, Fragment as S } from "react/jsx-runtime";
 import * as e from "react";
-import v, { useState as j, useRef as G, useLayoutEffect as ie, useMemo as N, useCallback as he, useEffect as re, forwardRef as V } from "react";
+import v, { useState as B, useRef as G, useLayoutEffect as ie, useMemo as N, useCallback as he, useEffect as re, forwardRef as V } from "react";
 import me from "@mui/material/Dialog";
-import { BottomSheetTransition as pe, Icon as y, P as g, Text as b, InstitutionLogo as R, H3 as le, Drawer as ue, createMXTheme as Ee, MerchantLogo as fe, CategoryIcon as ge } from "@kyper/mui";
+import { BottomSheetTransition as pe, Icon as y, P as x, Text as b, InstitutionLogo as R, H3 as le, Drawer as ue, createMXTheme as Ee, MerchantLogo as fe, CategoryIcon as ge } from "@kyper/mui";
 import xe from "react-confetti";
 import u from "@mui/material/Box";
 import A from "@mui/material/Card";
@@ -33,7 +33,7 @@ import Te from "@mui/icons-material/ArrowBack";
 import Pe from "@mui/material/Divider";
 import U from "@mui/material/List";
 import Q from "@mui/material/ListItem";
-const Be = ({
+const je = ({
   allowScroll: i,
   children: r,
   height: l,
@@ -84,7 +84,7 @@ const Be = ({
       children: r
     }
   );
-}, mt = Be, ae = ({ height: i = 0, width: r = 0, shouldRun: l = !1 }) => /* @__PURE__ */ t(
+}, mt = je, ae = ({ height: i = 0, width: r = 0, shouldRun: l = !1 }) => /* @__PURE__ */ t(
   xe,
   {
     "aria-hidden": !0,
@@ -105,7 +105,7 @@ const Be = ({
     style: { inset: "auto" },
     width: r
   }
-), je = ({
+), Be = ({
   backgroundColor: i,
   color: r,
   percent: l,
@@ -183,7 +183,7 @@ const Be = ({
             children: [
               /* @__PURE__ */ t(y, { color: "success", fill: !0, name: "check_circle", size: 16 }),
               /* @__PURE__ */ t(
-                g,
+                x,
                 {
                   bold: !0,
                   className: "mx-insights-goal-progress",
@@ -196,7 +196,7 @@ const Be = ({
           }
         ),
         /* @__PURE__ */ t(
-          je,
+          Be,
           {
             backgroundColor: i || o.palette.background.highlight,
             color: a || o.palette.primary.main,
@@ -224,7 +224,7 @@ const Be = ({
       },
       children: [
         /* @__PURE__ */ t(A, { sx: { background: "transparent", boxShadow: "none", marginBottom: 16 }, children: l && /* @__PURE__ */ t(
-          g,
+          x,
           {
             className: "mx-insights-gradient-box-title",
             "data-ui-test": "gradient-box-title",
@@ -328,8 +328,8 @@ const Be = ({
   tabIndex: o = 0,
   ...d
 }) => {
-  const [s, c] = j(null), m = () => c(null), p = (f, x) => {
-    m(), n(f, x);
+  const [s, c] = B(null), m = () => c(null), p = (f, g) => {
+    m(), n(f, g);
   };
   return /* @__PURE__ */ h(S, { children: [
     /* @__PURE__ */ t(
@@ -366,7 +366,7 @@ const Be = ({
         onClose: m,
         open: !!s,
         transformOrigin: { horizontal: "right", vertical: "top" },
-        children: l.map(({ icon: f, key: x, text: k }, M) => /* @__PURE__ */ h(Ae, { onClick: () => p(M, x), sx: { padding: 12 }, children: [
+        children: l.map(({ icon: f, key: g, text: k }, M) => /* @__PURE__ */ h(Ae, { onClick: () => p(M, g), sx: { padding: 12 }, children: [
           /* @__PURE__ */ t(J, { sx: { minWidth: "32px !important" }, children: f }),
           /* @__PURE__ */ t(
             T,
@@ -379,7 +379,7 @@ const Be = ({
               }
             }
           )
-        ] }, x))
+        ] }, g))
       }
     )
   ] });
@@ -501,7 +501,7 @@ const Be = ({
   selectedTabIndex: s,
   onBarClick: c
 }) => {
-  const m = w(), { containerRef: p, height: E, width: f } = ke(), x = N(() => {
+  const m = w(), { containerRef: p, height: E, width: f } = ke(), g = N(() => {
     const H = `${r}80`;
     return s === void 0 ? [...new Array(l.length - 1).fill(H), r] : l.map((L, Z) => Z === s ? r : H);
   }, [r, l, s]), k = he(
@@ -592,7 +592,7 @@ const Be = ({
                     Ue,
                     {
                       ...ce,
-                      colorRange: x,
+                      colorRange: g,
                       data: l,
                       dataIndex: L.dataIndex,
                       selectedTabIndex: s || l.length - 1,
@@ -618,7 +618,7 @@ const Be = ({
     )
   ] });
 }, oe = (i) => {
-  const [r, l] = j({ width: 0, height: 0 });
+  const [r, l] = B({ width: 0, height: 0 });
   return re(() => {
     const n = () => {
       if (i.current) {
@@ -662,8 +662,8 @@ const Be = ({
       display: "flex",
       justifyContent: "center",
       ref: p,
-      sx: (x) => ({
-        backgroundColor: x.palette.grey[200],
+      sx: (g) => ({
+        backgroundColor: g.palette.grey[200],
         padding: 16
       }),
       width: "100%",
@@ -673,13 +673,13 @@ const Be = ({
           A,
           {
             elevation: 1,
-            sx: (x) => ({
+            sx: (g) => ({
               display: "flex",
               flexDirection: "column",
               alignItems: "center",
               justifyContent: "center",
               flexWrap: "wrap",
-              backgroundColor: x.palette.background.paper,
+              backgroundColor: g.palette.background.paper,
               borderRadius: "8px",
               overflow: "visible",
               minHeight: 120,
@@ -742,7 +742,7 @@ const Be = ({
       )
     }
   ),
-  /* @__PURE__ */ t(g, { bold: !0, sx: { width: "100%", textAlign: "center" }, children: r })
+  /* @__PURE__ */ t(x, { bold: !0, sx: { width: "100%", textAlign: "center" }, children: r })
 ] }), $e = ({ leftLowerText: i, leftUpperText: r }) => {
   const l = w();
   return /* @__PURE__ */ h(
@@ -758,7 +758,7 @@ const Be = ({
       },
       children: [
         /* @__PURE__ */ t(
-          g,
+          x,
           {
             "data-ui-test": "mx-insights-sudd-left-upper-text",
             sx: { color: l.palette.secondary.light },
@@ -766,7 +766,7 @@ const Be = ({
             children: r
           }
         ),
-        /* @__PURE__ */ t(g, { bold: !0, "data-ui-test": "mx-insights-sudd-left-lower-text", variant: "Small", children: i })
+        /* @__PURE__ */ t(x, { bold: !0, "data-ui-test": "mx-insights-sudd-left-lower-text", variant: "Small", children: i })
       ]
     }
   );
@@ -786,7 +786,7 @@ const Be = ({
           width: 20
         }
       ),
-      /* @__PURE__ */ t(g, { bold: !0, "data-ui-test": "mx-insights-sudd-mini-body-header-text", children: r })
+      /* @__PURE__ */ t(x, { bold: !0, "data-ui-test": "mx-insights-sudd-mini-body-header-text", children: r })
     ]
   }
 ), t1 = ({
@@ -808,7 +808,7 @@ const Be = ({
       },
       children: /* @__PURE__ */ h(C, { alignItems: "center", gap: 2, justifyContent: "center", children: [
         /* @__PURE__ */ t(
-          g,
+          x,
           {
             "data-ui-test": "mx-insights-sudd-right-upper-text",
             sx: {
@@ -819,7 +819,7 @@ const Be = ({
           }
         ),
         /* @__PURE__ */ t(
-          g,
+          x,
           {
             bold: !0,
             "data-ui-test": "mx-insights-sudd-right-lower-text",
@@ -886,7 +886,7 @@ const Be = ({
     },
     children: [
       /* @__PURE__ */ t(q, { divProps: { style: o1 }, image: r1 }),
-      /* @__PURE__ */ t(g, { color: "secondary", sx: { mx: 8, mb: 8 }, variant: "ParagraphSmall", children: i })
+      /* @__PURE__ */ t(x, { color: "secondary", sx: { mx: 8, mb: 8 }, variant: "ParagraphSmall", children: i })
     ]
   }
 ), s1 = ({
@@ -928,17 +928,15 @@ const Be = ({
     )
   }
 ), m1 = ({ content: i, isLoading: r }) => {
-  const [l, n] = j(0), a = G(null), o = () => {
+  const [l, n] = B(0), a = G(null), o = () => {
     if (a.current) {
       const d = a.current, s = d.parentElement;
       if (s) {
-        const m = Array.from(s.children).reduce((M, H) => H !== d ? M + H.clientHeight : M, 0), E = s.clientHeight - m, f = parseInt(
+        const m = Array.from(s.children).reduce((k, M) => M !== d ? k + M.clientHeight : k, 0), E = s.clientHeight - m, f = parseInt(
           window.getComputedStyle(d).lineHeight,
           10
-        ), k = Math.floor(
-          (E - 20) / f
-        );
-        k !== l && n(k);
+        ), g = Math.floor(E / f);
+        g !== l && n(g);
       }
     }
   };
@@ -1072,7 +1070,7 @@ const Be = ({
       },
       children: [
         /* @__PURE__ */ t(
-          g,
+          x,
           {
             dangerouslySetInnerHTML: { __html: a },
             sx: {
@@ -1257,7 +1255,7 @@ const Be = ({
       ]
     }
   );
-}, yt = ({ bodyText: i }) => /* @__PURE__ */ t(u, { style: { padding: "8px 24px 8px 0px" }, children: /* @__PURE__ */ t(g, { "data-ui-test": "feedback-description", children: i }) }), Ht = ({
+}, yt = ({ bodyText: i }) => /* @__PURE__ */ t(u, { style: { padding: "8px 24px 8px 0px" }, children: /* @__PURE__ */ t(x, { "data-ui-test": "feedback-description", children: i }) }), Ht = ({
   feedbackOptions: i,
   groupAriaLabel: r,
   selectedRadio: l,
@@ -1352,7 +1350,7 @@ const Be = ({
           }
         ),
         l && /* @__PURE__ */ t(
-          g,
+          x,
           {
             sx: {
               color: i && p.palette.error.darker,
@@ -1369,7 +1367,7 @@ const Be = ({
 function y1() {
   return /* @__PURE__ */ t(q, { divProps: { style: {} }, image: C1 });
 }
-var B = /* @__PURE__ */ ((i) => (i.Primary = "Primary", i.Secondary = "Secondary", i))(B || {});
+var j = /* @__PURE__ */ ((i) => (i.Primary = "Primary", i.Secondary = "Secondary", i))(j || {});
 const At = ({
   amounts: i,
   beat: r,
@@ -1392,7 +1390,7 @@ const At = ({
         {
           ...l,
           beat: r,
-          onClick: (p) => l?.onClick?.(p, B.Primary)
+          onClick: (p) => l?.onClick?.(p, j.Primary)
         }
       ),
       /* @__PURE__ */ t(
@@ -1400,7 +1398,7 @@ const At = ({
         {
           ...l,
           beat: r,
-          onClick: (p) => l?.onClick?.(p, B.Secondary),
+          onClick: (p) => l?.onClick?.(p, j.Secondary),
           primary: !1
         }
       )
@@ -1615,7 +1613,7 @@ const At = ({
       /* @__PURE__ */ h(u, { children: [
         /* @__PURE__ */ t(le, { sx: { p: "16px 24px 8px 24px", whiteSpace: "wrap" }, children: l }),
         /* @__PURE__ */ h(C, { sx: { gap: 12, px: 24 }, children: [
-          /* @__PURE__ */ t(g, { color: "secondary", fontSize: 13, children: m }),
+          /* @__PURE__ */ t(x, { color: "secondary", fontSize: 13, children: m }),
           /* @__PURE__ */ t(U, { children: p.map((E, f) => /* @__PURE__ */ h(
             Q,
             {
@@ -1641,7 +1639,7 @@ const At = ({
                   {
                     disableTypography: !0,
                     secondary: E,
-                    sx: (x) => ({ color: x.palette.text.secondary, fontSize: 13 })
+                    sx: (g) => ({ color: g.palette.text.secondary, fontSize: 13 })
                   }
                 )
               ]
@@ -1652,14 +1650,14 @@ const At = ({
       ] }),
       /* @__PURE__ */ h(u, { children: [
         /* @__PURE__ */ t(b, { bold: !0, fontSize: 15, sx: { p: "16px 24px 8px 24px" }, children: o }),
-        /* @__PURE__ */ t(g, { color: "secondary", fontSize: 13, sx: { mb: 16, mx: 24 }, children: a }),
+        /* @__PURE__ */ t(x, { color: "secondary", fontSize: 13, sx: { mb: 16, mx: 24 }, children: a }),
         /* @__PURE__ */ t(U, { sx: { p: "16px 24px" }, children: d.map((E, f) => /* @__PURE__ */ h(
           Q,
           {
-            sx: (x) => ({
+            sx: (g) => ({
               alignItems: "flex-start",
               alignSelf: "stretch",
-              border: `1px solid ${x.palette.border.light}`,
+              border: `1px solid ${g.palette.border.light}`,
               borderRadius: "8px",
               boxShadow: "0px 2px 8px 0px rgba(106, 115, 129, 0.12)",
               gap: 12,
@@ -1673,9 +1671,9 @@ const At = ({
                 {
                   primary: E.title,
                   secondary: E.content,
-                  sx: (x) => ({
+                  sx: (g) => ({
                     "& > p": {
-                      color: x.palette.text.secondary,
+                      color: g.palette.text.secondary,
                       fontSize: 13,
                       fontWeight: "400",
                       lineHeight: "20px"
@@ -1888,7 +1886,7 @@ const At = ({
         }
       ),
       /* @__PURE__ */ t(
-        g,
+        x,
         {
           className: "mx-insights-sdd-account-account-name",
           sx: { textAlign: "center" },
@@ -2024,7 +2022,7 @@ const At = ({
           }
         ),
         /* @__PURE__ */ t(
-          g,
+          x,
           {
             bold: !0,
             sx: { color: "success.main", fontSize: 18, fontWeight: 700, mt: 12 },
@@ -2032,7 +2030,7 @@ const At = ({
             children: l
           }
         ),
-        /* @__PURE__ */ t(g, { sx: { fontSize: 13, fontWeight: 400, p: 4 }, variant: "Small", children: i.primary_transaction?.description }),
+        /* @__PURE__ */ t(x, { sx: { fontSize: 13, fontWeight: 400, p: 4 }, variant: "Small", children: i.primary_transaction?.description }),
         /* @__PURE__ */ h(P, { alignItems: "center", direction: "row", children: [
           i.primary_transaction?.top_level_category_guid && /* @__PURE__ */ t(
             ge,
@@ -2044,7 +2042,7 @@ const At = ({
             }
           ),
           /* @__PURE__ */ t(
-            g,
+            x,
             {
               sx: { color: "text.secondary", fontSize: 11, fontWeight: 400, ml: 8 },
               variant: "XSmall",
@@ -2149,7 +2147,7 @@ export {
   L1 as ProjectedCompletionSection,
   Ye as PulseGoalProgress,
   Ne as PulseGraidentBox,
-  je as PulseProgressBar,
+  Be as PulseProgressBar,
   t1 as RightBox,
   kt as SetUpDirectDepositBody,
   ft as Shell,