@mx-cartographer/insights-ui 1.4.5-alpha.JB0 → 1.4.5-alpha.JB2

package/dist/index.es.js

@@ -1,6 +1,6 @@
 import { jsx as t, jsxs as c, Fragment as P } from "react/jsx-runtime";
 import { Icon as f, P as E, BottomSheetTransition as X, Text as v, InstitutionLogo as q, H3 as j, Drawer as O, createMXTheme as R } from "@kyper/mui";
-import p from "@mui/material/Box";
+import h from "@mui/material/Box";
 import y from "@mui/material/Card";
 import { useTheme as b, styled as V, ThemeProvider as z } from "@mui/material/styles";
 import * as e from "react";
@@ -51,7 +51,7 @@ const fe = ({
       },
       children: [
         /* @__PURE__ */ t(
-          p,
+          h,
           {
             sx: {
               position: "absolute",
@@ -64,7 +64,7 @@ const fe = ({
           }
         ),
         /* @__PURE__ */ t(
-          p,
+          h,
           {
             sx: {
               position: "absolute",
@@ -88,7 +88,7 @@ const fe = ({
 }) => {
   const n = b();
   return /* @__PURE__ */ c(
-    p,
+    h,
     {
       className: "mx-insights-goal-progress",
       "data-ui-test": "goal-progress",
@@ -138,7 +138,7 @@ const fe = ({
 }) => {
   const r = b();
   return /* @__PURE__ */ c(
-    p,
+    h,
     {
       className: "mx-insights-gradient-box",
       "data-ui-test": "gradient-box",
@@ -157,7 +157,7 @@ const fe = ({
           }
         ) }),
         /* @__PURE__ */ t(
-          p,
+          h,
           {
             className: "mx-insights-gradient-box-card",
             sx: {
@@ -182,9 +182,9 @@ const fe = ({
   showBackground: d = !1,
   width: s = 450
 }) => {
-  const [m, h] = C.useState(!1);
+  const [m, p] = C.useState(!1);
   return C.useEffect(() => {
-    h(!!l);
+    p(!!l);
   }, [l]), /* @__PURE__ */ t(
     te,
     {
@@ -234,25 +234,23 @@ const fe = ({
   rightLowerText: s,
   rightUpperText: m
 }) => {
-  const h = {
-    containerHeight: n ? 140 : 186,
+  const p = {
+    containerHeight: n ? 140 : 206,
     logoSize: n ? 20 : 48,
     card: {
       gap: n ? 8 : 12
     },
     padding: n ? "12px 16px 12px 16px" : "32px 16px 16px 16px"
   };
-  return /* @__PURE__ */ t(
-    p,
+  return /* @__PURE__ */ t(h, { alignItems: "center", display: "flex", height: "206px", justifyContent: "center", width: "100%", children: /* @__PURE__ */ t(
+    h,
     {
-      sx: (u) => ({
-        backgroundColor: u.palette.background.paper,
-        marginBottom: 24,
-        height: h.containerHeight,
-        padding: h.padding,
-        position: "relative",
-        width: "-webkit-calc(100% - 64px)"
-      }),
+      sx: {
+        height: "100%",
+        padding: p.padding,
+        minWidth: 268,
+        width: "100%"
+      },
       children: /* @__PURE__ */ t(B, { children: ({ height: u, width: g }) => /* @__PURE__ */ c(C.Fragment, { children: [
         /* @__PURE__ */ t(
           Y,
@@ -288,9 +286,8 @@ const fe = ({
               display: "flex",
               flexDirection: "column",
               flexWrap: "wrap",
-              gap: h.card.gap,
-              padding: h.padding,
-              top: 24,
+              gap: p.card.gap,
+              padding: p.padding,
               width: g
             }),
             children: [
@@ -310,7 +307,7 @@ const fe = ({
         )
       ] }) })
     }
-  );
+  ) });
 }, S1 = ({
   boldText: l,
   iconColor: i,
@@ -332,14 +329,14 @@ const fe = ({
     children: l
   }
 ), Ae = ({ accountGuid: l }) => /* @__PURE__ */ t(
-  p,
+  h,
   {
     sx: {
       display: "flex",
       justifyContent: "center",
       position: "absolute",
       right: 0,
-      top: 0,
+      top: 48,
       width: "100%",
       zIndex: 10
     },
@@ -388,12 +385,13 @@ const fe = ({
   rightLowerText: r,
   rightUpperText: o
 }) => /* @__PURE__ */ c(
-  p,
+  h,
   {
     sx: {
       display: "flex",
       flexDirection: "row",
       height: 58,
+      gap: 12,
       width: "100%"
     },
     children: [
@@ -409,7 +407,7 @@ const fe = ({
     ]
   }
 ), Me = ({ accountGuid: l, headerString: i }) => /* @__PURE__ */ c(
-  p,
+  h,
   {
     "data-ui-test": "mx-insights-sudd-mini-body-header",
     sx: { display: "flex", flexDirection: "row", gap: 8, justifyContent: "center" },
@@ -477,7 +475,7 @@ const fe = ({
   button: l,
   withFullWidthImage: i
 }) => /* @__PURE__ */ t(
-  p,
+  h,
   {
     className: "mx-insight-buttons",
     "data-ui-test": "beat-button",
@@ -517,8 +515,8 @@ const fe = ({
     if (!r.current) return;
     const o = r.current, n = o.querySelectorAll(".Overlay");
     ["brand100", "brand200", "brand300", "brand400", "brand500"].forEach((s, m) => {
-      const h = o.querySelectorAll(`.${s}`), u = (100 + m).toString();
-      G(h, w[u]);
+      const p = o.querySelectorAll(`.${s}`), u = (100 + m).toString();
+      G(p, w[u]);
     }), G(n, w[300]);
   }, [w]), /* @__PURE__ */ t(
     "div",
@@ -753,7 +751,7 @@ const fe = ({
   const m = b();
   if (a)
     return null;
-  const h = V(M)({
+  const p = V(M)({
     width: "100%",
     color: o ? "#359BCF" : m.palette.secondary.main,
     backgroundColor: m.palette.background.paper,
@@ -767,7 +765,7 @@ const fe = ({
     ...n
   });
   return /* @__PURE__ */ t(
-    h,
+    p,
     {
       "data-ui-test": o ? `primary-cta-${l.template}` : `secondary-cta-${l.template}`,
       disabled: i,
@@ -801,9 +799,9 @@ const fe = ({
   elementTag: o,
   setRefs: n
 }) => /* @__PURE__ */ t(
-  ({ elementTag: s, children: m, ...h }) => {
+  ({ elementTag: s, children: m, ...p }) => {
     const u = s;
-    return C.createElement(u, h, m);
+    return C.createElement(u, p, m);
   },
   {
     "aria-hidden": l,
@@ -862,7 +860,7 @@ const fe = ({
   onClose: o,
   selectedRadio: n
 }) => {
-  const d = b(), { cancelText: s, submitText: m } = l, h = V(M)({
+  const d = b(), { cancelText: s, submitText: m } = l, p = V(M)({
     backgroundColor: "transparent",
     color: d.palette.primary.light,
     fontSize: 15,
@@ -883,7 +881,7 @@ const fe = ({
     width: "100%"
   });
   return /* @__PURE__ */ c(
-    p,
+    h,
     {
       sx: {
         display: "flex",
@@ -903,7 +901,7 @@ const fe = ({
           }
         ),
         /* @__PURE__ */ t(
-          h,
+          p,
           {
             className: "mx-insights-beat-feedback-no-thanks-button",
             "data-ui-test": "no-thanks-button",
@@ -916,7 +914,7 @@ const fe = ({
       ]
     }
   );
-}, z1 = ({ bodyText: l }) => /* @__PURE__ */ t(p, { style: { padding: "8px 24px 8px 0px" }, children: /* @__PURE__ */ t(E, { "data-ui-test": "feedback-description", children: l }) }), F1 = ({
+}, z1 = ({ bodyText: l }) => /* @__PURE__ */ t(h, { style: { padding: "8px 24px 8px 0px" }, children: /* @__PURE__ */ t(E, { "data-ui-test": "feedback-description", children: l }) }), F1 = ({
   feedbackOptions: l,
   groupAriaLabel: i,
   selectedRadio: a,
@@ -929,7 +927,7 @@ const fe = ({
       width: "100%"
     },
     children: /* @__PURE__ */ t(ce, { "aria-label": i, name: "radio-buttons-group", children: l.map((o, n) => /* @__PURE__ */ t(
-      p,
+      h,
       {
         sx: (d) => ({
           p: "24px 0px 23px 0px",
@@ -977,12 +975,12 @@ const fe = ({
   setFeedbackMessage: s,
   validateForm: m
 }) => {
-  const h = he(me)({
+  const p = he(me)({
     height: 93,
     resize: "none"
   }), u = pe();
   return /* @__PURE__ */ c(
-    p,
+    h,
     {
       "aria-label": o,
       sx: {
@@ -991,7 +989,7 @@ const fe = ({
       },
       children: [
         /* @__PURE__ */ t(
-          h,
+          p,
           {
             "aria-label": i,
             "data-ui-test": "feedback-textarea",
@@ -1044,14 +1042,14 @@ const fe = ({
   account2AltText: r,
   success: o
 }) => /* @__PURE__ */ t(
-  p,
+  h,
   {
     sx: {
       height: 128,
       width: "100%"
     },
     children: /* @__PURE__ */ t(B, { children: ({ height: n, width: d }) => /* @__PURE__ */ c(
-      p,
+      h,
       {
         sx: {
           alignItems: "center",
@@ -1085,7 +1083,7 @@ const fe = ({
             }
           ),
           /* @__PURE__ */ c(
-            p,
+            h,
             {
               sx: {
                 justifyContent: "center",
@@ -1167,7 +1165,7 @@ const fe = ({
   noButtonText: d,
   onClose: s,
   sendResponseAnalytics: m,
-  upperDescription: h,
+  upperDescription: p,
   upperList: u,
   yesButtonText: g
 }) => /* @__PURE__ */ t(
@@ -1185,8 +1183,8 @@ const fe = ({
         backgroundColor: "background.paper"
       }
     },
-    children: /* @__PURE__ */ t(A, { height: "100%", justifyContent: "space-between", children: /* @__PURE__ */ c(p, { height: "100%", overflow: "auto", children: [
-      /* @__PURE__ */ t(p, { sx: { p: "16px 24px", width: "100%" }, children: /* @__PURE__ */ t(
+    children: /* @__PURE__ */ t(A, { height: "100%", justifyContent: "space-between", children: /* @__PURE__ */ c(h, { height: "100%", overflow: "auto", children: [
+      /* @__PURE__ */ t(h, { sx: { p: "16px 24px", width: "100%" }, children: /* @__PURE__ */ t(
         F,
         {
           "aria-label": "fake-close",
@@ -1198,10 +1196,10 @@ const fe = ({
         }
       ) }),
       /* @__PURE__ */ t(Ee, {}),
-      /* @__PURE__ */ c(p, { children: [
+      /* @__PURE__ */ c(h, { children: [
         /* @__PURE__ */ t(j, { sx: { p: "16px 24px 8px 24px", whiteSpace: "wrap" }, children: i }),
         /* @__PURE__ */ c(A, { sx: { gap: 12, px: 24 }, children: [
-          /* @__PURE__ */ t(E, { color: "secondary", fontSize: 13, children: h }),
+          /* @__PURE__ */ t(E, { color: "secondary", fontSize: 13, children: p }),
           /* @__PURE__ */ t(K, { children: u.map((x, L) => /* @__PURE__ */ c(
             W,
             {
@@ -1236,7 +1234,7 @@ const fe = ({
           )) })
         ] })
       ] }),
-      /* @__PURE__ */ c(p, { children: [
+      /* @__PURE__ */ c(h, { children: [
         /* @__PURE__ */ t(v, { bold: !0, fontSize: 15, sx: { p: "16px 24px 8px 24px" }, children: o }),
         /* @__PURE__ */ t(E, { color: "secondary", fontSize: 13, sx: { mb: 16, mx: 24 }, children: r }),
         /* @__PURE__ */ t(K, { sx: { p: "16px 24px" }, children: n.map((x, L) => /* @__PURE__ */ c(
@@ -1276,7 +1274,7 @@ const fe = ({
       ] }),
       /* @__PURE__ */ c(A, { sx: { alignItems: "center", display: "flex", justifyContent: "center", pb: 16 }, children: [
         /* @__PURE__ */ t(v, { bold: !0, sx: { p: "16px 24px 8px 24px" }, children: l }),
-        /* @__PURE__ */ c(p, { sx: { display: "flex", gap: 24, p: "12px 24px" }, children: [
+        /* @__PURE__ */ c(h, { sx: { display: "flex", gap: 24, p: "12px 24px" }, children: [
           /* @__PURE__ */ t(M, { color: "secondary", onClick: () => m("no"), sx: { p: 12 }, children: d }),
           /* @__PURE__ */ t(
             M,
@@ -1333,8 +1331,8 @@ const fe = ({
   title: s,
   totalSavedText: m
 }) => {
-  const h = R(a ? "dark" : "light");
-  return /* @__PURE__ */ t(z, { theme: h, children: /* @__PURE__ */ t(p, { className: "mx-insights-mefr-body", "data-ui-test": "mefr-body", sx: { mb: 16 }, children: /* @__PURE__ */ c(xe, { title: s, children: [
+  const p = R(a ? "dark" : "light");
+  return /* @__PURE__ */ t(z, { theme: p, children: /* @__PURE__ */ t(h, { className: "mx-insights-mefr-body", "data-ui-test": "mefr-body", sx: { mb: 16 }, children: /* @__PURE__ */ c(xe, { title: s, children: [
     /* @__PURE__ */ t(
       ge,
       {
@@ -1343,7 +1341,7 @@ const fe = ({
       }
     ),
     /* @__PURE__ */ c(
-      p,
+      h,
       {
         className: "mx-insights-mefr-body-content",
         "data-ui-test": "mefr-body-content",
@@ -1445,7 +1443,7 @@ const fe = ({
   isMini: d,
   headerString: s,
   rightLowerText: m,
-  rightUpperText: h
+  rightUpperText: p
 }) => {
   const u = R(n ? "dark" : "light");
   return /* @__PURE__ */ t(z, { theme: u, children: /* @__PURE__ */ t(
@@ -1459,7 +1457,7 @@ const fe = ({
       leftLowerText: a,
       leftUpperText: r,
       rightLowerText: m,
-      rightUpperText: h
+      rightUpperText: p
     }
   ) });
 }, T = ({ accountGuid: l, accountName: i }) => /* @__PURE__ */ c(
@@ -1472,7 +1470,7 @@ const fe = ({
     },
     children: [
       /* @__PURE__ */ t(
-        p,
+        h,
         {
           className: "mx-insights-sdd-account-image-container",
           sx: { display: "flex", justifyContent: "center", width: "100%" },
@@ -1509,7 +1507,7 @@ const fe = ({
   isComplete: d,
   isDarkMode: s,
   isMini: m,
-  leftLowerText: h,
+  leftLowerText: p,
   leftUpperText: u,
   rightLowerText: g,
   rightUpperText: x,
@@ -1524,7 +1522,7 @@ const fe = ({
       headerString: n,
       isComplete: d,
       isMini: m,
-      leftLowerText: h,
+      leftLowerText: p,
       leftUpperText: u,
       rightLowerText: g,
       rightUpperText: x