@mx-cartographer/experiences 7.6.1 → 7.6.3

package/CHANGELOG.md

@@ -1,8 +1,16 @@
-## [7.6.1] - 01-14-2025
+## [7.6.3] - 01-15-2026
+
+- **FIXED** - Finstrong | Mobile key Indicators Styling Issues
+
+## [7.6.2] - 01-14-2026
+
+- **UPDATED** - Hover, axes, titles, descriptions, role for Account Details charts
+
+## [7.6.1] - 01-14-2026
 
 - **UPDATED** - Improved ADA support for `Goals` reorder
 
-## [7.6.0] - 01-14-2025
+## [7.6.0] - 01-14-2026
 
 - **UPDATED** - Migrated MUI X-Charts from v7 to v8
 

package/dist/{AccountDetailsContent-ZWkttor7.mjs → AccountDetailsContent-D4oOgcoI.mjs}

@@ -11,7 +11,7 @@ import I from "@mui/material/Divider";
 import v from "@mui/material/ListItem";
 import N from "@mui/material/ListItemButton";
 import w from "@mui/material/ListItemText";
-import { u as D } from "./AccountDetailsHeader-B21Y8_ED.mjs";
+import { u as D } from "./AccountDetailsHeader-D8wbZdBk.mjs";
 import { d as z, u as E, g as O, h as X } from "./hooks-ZMp65DFz.mjs";
 import { A as at } from "./AccountListItem-Dikzsimi.mjs";
 import { A as M } from "./WidgetContainer-DyotIGdv.mjs";

package/dist/AccountDetailsHeader-D8wbZdBk.mjs

@@ -0,0 +1,95 @@
+import { jsx as t, jsxs as a } from "react/jsx-runtime";
+import { observer as f } from "mobx-react-lite";
+import s from "@mui/material/Stack";
+import { H3 as T, InstitutionLogo as x, Text as l, H2 as D } from "@mxenabled/mxui";
+import p from "react";
+import { G as N, d as C, m as P, f as G, u as O } from "./hooks-ZMp65DFz.mjs";
+import { g as R } from "./AccountFields-D9Jil_7P.mjs";
+import { A as r } from "./ConnectDrawer-cXpqSnbj.mjs";
+import w from "@mui/material/Card";
+import v from "@mui/material/CardContent";
+import L from "@mui/material/CardHeader";
+import { L as H } from "./Loader-DUaFpDGv.mjs";
+import { I as M, P as U, S as Y } from "./Account-CQ5cFk24.mjs";
+import { u as j } from "./useAccountDisplayName-DSUFGGaF.mjs";
+import { f as z } from "./NumberFormatting-DjTD0t3W.mjs";
+const _ = () => {
+  if (!p.useContext(N))
+    throw new Error("useCategoryUiStore() must be used within the GlobalDataContext");
+  return C().uiStore;
+}, B = (i, e) => {
+  const c = [r.LOAN, r.MORTGAGE, r.PROPERTY].includes(
+    i
+  ), n = [
+    r.CREDIT_CARD,
+    r.LINE_OF_CREDIT,
+    r.PREPAID,
+    r.CHECKING_LINE_OF_CREDIT
+  ].includes(i);
+  return c ? { title: e.label_payments, description: e.chart_title_payments } : n ? { title: e.label_payments_spend, description: e.chart_title_payments_spend } : { title: e.label_income_spend, description: e.chart_title_income_spend };
+}, k = ({
+  sx: i,
+  ChartComponent: e,
+  header: c
+}) => {
+  const { loadMonthlyCategoryTotals: n } = P(), { isInitialized: o } = G(), { selectedAccount: d } = _(), [u, m] = p.useState(!1);
+  return p.useEffect(() => {
+    o && n([d]).finally(() => {
+      m(!0);
+    });
+  }, [o, d]), !o || !u ? /* @__PURE__ */ t(H, {}) : /* @__PURE__ */ a(
+    w,
+    {
+      sx: {
+        "& .MuiCardContent-root:last-child": {
+          pb: 0
+        },
+        ...i
+      },
+      children: [
+        /* @__PURE__ */ t(L, { sx: { pb: 0 }, title: /* @__PURE__ */ t(T, { sx: { pb: 4 }, children: c }) }),
+        /* @__PURE__ */ t(v, { sx: { p: 0 }, children: e ? /* @__PURE__ */ t(e, {}) : null })
+      ]
+    }
+  );
+}, F = f(k), V = ({
+  customDetailsChart: i,
+  ChartComponent: e
+}) => {
+  const { institutions: c } = C(), { selectedAccount: n } = _(), { accounts: o } = O(), { firstSubtitle: d, firstValue: u, hasAvailableBalance: m, secondSubtitle: h, secondValue: b } = R(n, o), A = c.find(
+    (I) => I.guid === n?.institution_guid
+  ), S = [
+    ...M,
+    ...U,
+    ...Y
+  ].includes(n.account_type), g = j(n), { title: y, description: E } = B(n.account_type, o);
+  return /* @__PURE__ */ a(s, { bgcolor: "background.default", p: 24, children: [
+    /* @__PURE__ */ a(s, { gap: 12, children: [
+      /* @__PURE__ */ t(
+        x,
+        {
+          alt: o.institution_logo_alt,
+          institutionGuid: n.institution_guid || "",
+          size: 64
+        }
+      ),
+      /* @__PURE__ */ t(l, { variant: "Small", children: A?.name })
+    ] }),
+    /* @__PURE__ */ a(s, { gap: 8, mb: 24, mt: 4, children: [
+      /* @__PURE__ */ t(D, { children: g }),
+      /* @__PURE__ */ a(s, { direction: "row", justifyContent: "space-between", children: [
+        /* @__PURE__ */ t(l, { bold: m, variant: "Body", children: d }),
+        /* @__PURE__ */ t(l, { bold: !0, variant: "Body", children: z(u, "0,0.00") })
+      ] }),
+      /* @__PURE__ */ a(s, { direction: "row", justifyContent: "space-between", children: [
+        /* @__PURE__ */ t(l, { variant: "Small", children: h }),
+        /* @__PURE__ */ t(l, { variant: "Small", children: b })
+      ] })
+    ] }),
+    S && /* @__PURE__ */ t(s, { "aria-label": E, role: "img", children: i || /* @__PURE__ */ t(F, { ChartComponent: e, header: y }) })
+  ] });
+}, at = f(V);
+export {
+  at as A,
+  _ as u
+};

package/dist/accounts/components/detailsdrawer/Accounts/AccountDetailsChart.d.ts

@@ -2,6 +2,7 @@ import { default as React } from 'react';
 import { MiniWidgetProps } from '../../../../common';
 interface AccountDetailsChartProps extends MiniWidgetProps {
     ChartComponent?: React.ComponentType;
+    header?: string;
 }
 declare const _default: React.FunctionComponent<AccountDetailsChartProps>;
 export default _default;

package/dist/accounts/index.es.js

@@ -1,28 +1,28 @@
-import { jsx as e, jsxs as r, Fragment as J } from "react/jsx-runtime";
+import { jsx as e, jsxs as r, Fragment as q } from "react/jsx-runtime";
 import h from "react";
 import { observer as v } from "mobx-react-lite";
 import E from "@mui/material/Box";
-import y from "@mui/material/Divider";
+import x from "@mui/material/Divider";
 import F from "@mui/material/List";
 import O from "@mui/material/ListSubheader";
 import Z from "@mui/system/Stack";
 import { Text as g } from "@mxenabled/mxui";
-import { useTheme as Q } from "@mui/material/styles";
-import { u as U, A as X } from "../AccountDetailsHeader-B21Y8_ED.mjs";
+import { useTheme as J } from "@mui/material/styles";
+import { u as U, A as Q } from "../AccountDetailsHeader-D8wbZdBk.mjs";
 import { L as e1 } from "../LineChart-BF4QA-Lx.mjs";
 import { g as t1, a as n1, b as l1 } from "../SpendingData-zOn0cwrq.mjs";
 import { m as i1, u as M, b as S, d as W, g as P, a as o1 } from "../hooks-ZMp65DFz.mjs";
 import { A as I, l as G, m as C1 } from "../ConnectDrawer-cXpqSnbj.mjs";
 import { F as C3, M as d3 } from "../ConnectDrawer-cXpqSnbj.mjs";
-import { I as $, P as j, S as Y } from "../Account-CQ5cFk24.mjs";
+import { I as $, P as Y, S as j } from "../Account-CQ5cFk24.mjs";
 import { a as d1 } from "../AccountFields-D9Jil_7P.mjs";
 import { g as s3, b as a3 } from "../AccountFields-D9Jil_7P.mjs";
 import { A as N } from "../AccountListItem-Dikzsimi.mjs";
-import { A as c1 } from "../AccountDetailsContent-ZWkttor7.mjs";
-import { u as L3 } from "../AccountDetailsContent-ZWkttor7.mjs";
+import { A as c1 } from "../AccountDetailsContent-D4oOgcoI.mjs";
+import { u as L3 } from "../AccountDetailsContent-D4oOgcoI.mjs";
 import { f as D } from "../NumberFormatting-DjTD0t3W.mjs";
 import { D as s1 } from "../Drawer-HUhV0NVP.mjs";
-import { A as x, W as a1 } from "../WidgetContainer-DyotIGdv.mjs";
+import { A as y, W as a1 } from "../WidgetContainer-DyotIGdv.mjs";
 import { C as r1 } from "../ConnectionsDrawer-CecygbxT.mjs";
 import { u as K } from "../useScreenSize-B6JyS_Lj.mjs";
 import { u as B } from "../useWidgetLoadTimer-hIOioiKx.mjs";
@@ -32,24 +32,24 @@ import { M as z } from "../MiniWidgetContainer-98-hKFqm.mjs";
 import u1 from "@mui/material/Stack";
 import { A as h3, a as H3 } from "../AccountStore-CMEXKMhd.mjs";
 const h1 = (o, C) => {
-  const l = $.includes(C) ? t1(o) : [], t = j.includes(C) ? n1(o) : [], L = Y.includes(C) ? l1(o) : [];
+  const l = $.includes(C) ? t1(o) : [], t = Y.includes(C) ? n1(o) : [], L = j.includes(C) ? l1(o) : [];
   return [l, t, L].filter((i) => i.length > 0);
 }, H1 = (o, C, l) => {
   const [t, L] = o, i = t, d = L ?? t, s = [];
   if (i && d && $.includes(C)) {
     const c = i[i.length - 1].y;
     s.push({ label: l.income_label, amount: c });
-  } else if (j.includes(C)) {
+  } else if (Y.includes(C)) {
     const c = i[i.length - 1].y;
     s.push({ label: l.payments_label, amount: c });
   }
-  if (d && Y.includes(C)) {
+  if (d && j.includes(C)) {
     const c = d[d.length - 1].y;
     s.push({ label: l.spending_label, amount: c });
   }
   return s;
 }, p1 = () => {
-  const o = Q(), { selectedAccount: C } = U(), { monthlyCategoryTotals: l } = i1(), { trends: t } = M(), L = [o.palette.chart?.chart1, o.palette.chart?.chart2], i = h1(l, C.account_type), d = H1(i, C.account_type, t), s = [I.LOAN, I.MORTGAGE].includes(C.account_type);
+  const o = J(), { selectedAccount: C } = U(), { monthlyCategoryTotals: l } = i1(), { trends: t } = M(), L = [o.palette.chart?.chart1, o.palette.chart?.chart2], i = h1(l, C.account_type), d = H1(i, C.account_type, t), s = [I.LOAN, I.MORTGAGE].includes(C.account_type);
   return /* @__PURE__ */ e("div", { "data-testid": "TrendsChart", children: /* @__PURE__ */ e(
     e1,
     {
@@ -58,8 +58,14 @@ const h1 = (o, C) => {
       height: 185,
       labels: d,
       showAverage: s,
+      showAxisHighlight: !0,
       showBars: s,
       showLegend: !0,
+      showTooltip: !0,
+      showXAxis: !0,
+      showXAxisTicks: !0,
+      showYAxis: !0,
+      showYAxisTicks: !0,
       valueFormatterString: "0,0"
     }
   ) });
@@ -81,13 +87,13 @@ const h1 = (o, C) => {
       n && i(n);
     }
   }, [H, o]);
-  const _ = (n) => {
-    C(n.guid), s(x.ACCOUNTS_CLICK_ACCOUNT, {
+  const A = (n) => {
+    C(n.guid), s(y.ACCOUNTS_CLICK_ACCOUNT, {
       account_guid: n.guid,
       account_type: n.account_type
     });
   }, V = (n) => {
-    const a = n === "hidden" ? p : m, k = n === "hidden" ? R : b, u = n === "hidden" ? l.account_hidden : l.account_closed;
+    const a = n === "hidden" ? p : m, T = n === "hidden" ? R : b, u = n === "hidden" ? l.account_hidden : l.account_closed;
     return /* @__PURE__ */ e(E, { children: /* @__PURE__ */ e(
       F,
       {
@@ -100,31 +106,31 @@ const h1 = (o, C) => {
             sx: { justifyContent: "space-between", color: "grey.700" },
             children: [
               /* @__PURE__ */ e(g, { bold: !0, variant: "Body", children: u }),
-              /* @__PURE__ */ e(g, { bold: !0, variant: "Body", children: D(k, "0,0.00") })
+              /* @__PURE__ */ e(g, { bold: !0, variant: "Body", children: D(T, "0,0.00") })
             ]
           }
         ) }),
-        children: /* @__PURE__ */ e(Z, { children: a.map((f, A, q) => {
-          const T = A === q.length - 1;
+        children: /* @__PURE__ */ e(Z, { children: a.map((f, _, X) => {
+          const k = _ === X.length - 1;
           return /* @__PURE__ */ r(h.Fragment, { children: [
             /* @__PURE__ */ e(
               N,
               {
                 account: f,
-                onRowClick: () => _(f),
+                onRowClick: () => A(f),
                 shouldShowConnectionStatus: !0
               }
             ),
             n === "hidden" ? /* @__PURE__ */ e(
-              y,
+              x,
               {
                 sx: {
-                  mb: T ? 24 : 4,
-                  ml: T ? 24 : 68
+                  mb: k ? 24 : 4,
+                  ml: k ? 24 : 68
                 }
               }
-            ) : !T && /* @__PURE__ */ e(
-              y,
+            ) : !k && /* @__PURE__ */ e(
+              x,
               {
                 sx: {
                   mb: 4,
@@ -141,7 +147,7 @@ const h1 = (o, C) => {
     c.map((n) => {
       const a = t.filter(
         (u) => u.account_type === n && !u.is_closed && !u.is_hidden
-      ), k = a.reduce(
+      ), T = a.reduce(
         (u, f) => (f.balance || 0) + u,
         0
       );
@@ -157,27 +163,27 @@ const h1 = (o, C) => {
               sx: { display: "flex", justifyContent: "space-between" },
               children: [
                 /* @__PURE__ */ e(g, { bold: !0, variant: "Body", children: l.account_types[n] }),
-                /* @__PURE__ */ e(g, { bold: !0, variant: "Body", children: D(k, "0,0.00") })
+                /* @__PURE__ */ e(g, { bold: !0, variant: "Body", children: D(T, "0,0.00") })
               ]
             }
           ) }),
           children: /* @__PURE__ */ e(Z, { children: a.map((u) => {
-            const f = t.indexOf(u) === t.length - 1, A = a.indexOf(u) === a.length - 1;
+            const f = t.indexOf(u) === t.length - 1, _ = a.indexOf(u) === a.length - 1;
             return /* @__PURE__ */ r(h.Fragment, { children: [
               /* @__PURE__ */ e(
                 N,
                 {
                   account: u,
-                  onRowClick: () => _(u),
+                  onRowClick: () => A(u),
                   shouldShowConnectionStatus: !0
                 }
               ),
               (!f || m.length > 0 || p.length > 0) && /* @__PURE__ */ e(
-                y,
+                x,
                 {
                   sx: {
-                    mb: A ? 24 : 4,
-                    ml: A ? 24 : 68
+                    mb: _ ? 24 : 4,
+                    ml: _ ? 24 : 68
                   }
                 }
               )
@@ -197,14 +203,14 @@ const h1 = (o, C) => {
         onClose: () => C(""),
         title: l.account_details,
         children: [
-          /* @__PURE__ */ e(X, { ChartComponent: m1 }),
+          /* @__PURE__ */ e(Q, { ChartComponent: m1 }),
           /* @__PURE__ */ e(c1, {})
         ]
       }
     )
   ] });
 }, V1 = v(f1), g1 = ({ onBackClick: o, sx: C = {} }) => {
-  const [l, t] = h.useState(!1), [L, i] = h.useState(!1), { config: d } = o1(), { accounts: s } = W(), { accounts: c, connect: H } = M(), { isCopyLoaded: p, isInitialized: m, setSelectedAccounts: R, selectedAccountGuids: b } = S(), { isDesktop: _ } = K(), { onEvent: V } = P();
+  const [l, t] = h.useState(!1), [L, i] = h.useState(!1), { config: d } = o1(), { accounts: s } = W(), { accounts: c, connect: H } = M(), { isCopyLoaded: p, isInitialized: m, setSelectedAccounts: R, selectedAccountGuids: b } = S(), { isDesktop: A } = K(), { onEvent: V } = P();
   B({
     widgetName: "AccountsWidget",
     isLoaded: m && p
@@ -212,9 +218,9 @@ const h1 = (o, C) => {
     R(s);
   }, [s]);
   const n = () => {
-    t(!0), V(x.ACCOUNTS_CLICK_CONNECT);
+    t(!0), V(y.ACCOUNTS_CLICK_CONNECT);
   }, a = () => {
-    i(!0), V(x.ACCOUNTS_CLICK_CONNECT);
+    i(!0), V(y.ACCOUNTS_CLICK_CONNECT);
   };
   return p ? /* @__PURE__ */ e(
     a1,
@@ -228,12 +234,12 @@ const h1 = (o, C) => {
           onClick: a
         }
       ] : [],
-      onAccountsFilterClick: () => V(x.ACCOUNTS_CLICK_FILTER),
+      onAccountsFilterClick: () => V(y.ACCOUNTS_CLICK_FILTER),
       onBackClick: o,
       sx: C,
       title: c.title,
-      children: m ? /* @__PURE__ */ r(J, { children: [
-        /* @__PURE__ */ r(E, { sx: { px: _ ? 24 : 12 }, children: [
+      children: m ? /* @__PURE__ */ r(q, { children: [
+        /* @__PURE__ */ r(E, { sx: { px: A ? 24 : 12 }, children: [
           b.length < 1 && /* @__PURE__ */ e(g, { display: "flex", justifyContent: "center", my: 24, children: c.no_accounts }),
           /* @__PURE__ */ e(V1, {})
         ] }),
@@ -289,7 +295,7 @@ const h1 = (o, C) => {
                 shouldShowConnectionStatus: !0
               }
             ),
-            !R && /* @__PURE__ */ e(y, { "aria-hidden": "true", variant: "inset" })
+            !R && /* @__PURE__ */ e(x, { "aria-hidden": "true", variant: "inset" })
           ] }, `account-item${m}`);
         })
       ] }) : /* @__PURE__ */ e(w, {})
@@ -751,7 +757,7 @@ const h1 = (o, C) => {
       }
     )
   ] });
-}, w1 = v(R1), _1 = ({
+}, w1 = v(R1), A1 = ({
   onPrimaryCtaClick: o = () => {
   },
   sx: C
@@ -783,11 +789,11 @@ const h1 = (o, C) => {
       ]
     }
   ) : /* @__PURE__ */ e(w, {});
-}, l3 = v(_1);
+}, l3 = v(A1);
 export {
   h3 as AccountApi,
   c1 as AccountDetailsContent,
-  X as AccountDetailsHeader,
+  Q as AccountDetailsHeader,
   H3 as AccountStore,
   n3 as AccountsMiniWidget,
   t3 as AccountsWidget,

package/dist/accounts/utils/AccountDetails.d.ts

@@ -0,0 +1,5 @@
+import { AccountType, AccountsCopy } from '../../common';
+export declare const getChartLabels: (accountType: AccountType, copy: AccountsCopy) => {
+    title: string;
+    description: string;
+};

package/dist/common/types/localization/AccountsCopy.d.ts

@@ -45,6 +45,9 @@ export interface AccountsCopy {
     apy: string;
     available_balance: string;
     available_credit: string;
+    chart_title_income_spend: string;
+    chart_title_payments: string;
+    chart_title_payments_spend: string;
     close_aria: string;
     close_account_details_aria: string;
     close_drawer: string;
@@ -73,6 +76,9 @@ export interface AccountsCopy {
     interest_rate: string;
     is_closed: string;
     is_hidden: string;
+    label_income_spend: string;
+    label_payments: string;
+    label_payments_spend: string;
     manage: string;
     manage_connection: string;
     manage_connections: string;

package/dist/debts/index.es.js

@@ -16,7 +16,7 @@ import { G as Me, w as q, u as S, l as V, g as F, d as Z, b as Pe } from "../hoo
 import { u as Y } from "../useScreenSize-B6JyS_Lj.mjs";
 import { D as te } from "../Drawer-HUhV0NVP.mjs";
 import { b as E } from "../Localization-2MODESHW.mjs";
-import { A as ke, u as Ne } from "../AccountDetailsHeader-B21Y8_ED.mjs";
+import { A as ke, u as Ne } from "../AccountDetailsHeader-D8wbZdBk.mjs";
 import Fe from "@mui/material/Card";
 import Re from "@mui/material/CardContent";
 import Le from "@mui/material/CardHeader";

package/dist/finstrong/index.es.js

@@ -9,7 +9,7 @@ import { g as gn, a as yn, r as Je, b as bn, c as He, d as ht, C as we, e as ke,
 import { y as bi, F as fi } from "../FinstrongStore-DzK8bMoz.mjs";
 import * as nt from "d3";
 import { observer as v } from "mobx-react-lite";
-import { u as S, b as q, a as Ne, o as ee, z as F, p as An, d as Se, m as je, f as Tn, j as Ke, h as On, i as Rn } from "../hooks-ZMp65DFz.mjs";
+import { u as S, b as U, a as Ne, o as ee, z as F, p as An, d as Se, m as je, f as Tn, j as Ke, h as On, i as Rn } from "../hooks-ZMp65DFz.mjs";
 import { L as te } from "../Loader-DUaFpDGv.mjs";
 import m from "react";
 import P from "@mui/material/Button";
@@ -122,7 +122,7 @@ const Mo = ({
         x2: i - c * 0.8 * Math.cos(Math.PI / 1.35),
         y1: l + c * 0.8 * Math.sin(Math.PI / 1.35),
         y2: l - c * 0.8 * Math.sin(Math.PI / 1.35),
-        children: w.map((B, U) => /* @__PURE__ */ e("stop", { offset: B.offset, stopColor: B.color }, U))
+        children: w.map((B, Y) => /* @__PURE__ */ e("stop", { offset: B.offset, stopColor: B.color }, Y))
       }
     ) })
   ] });
@@ -141,7 +141,7 @@ const Mo = ({
   footerRightContent: u,
   isFinacialStrengthGraph: y = !1
 }) => {
-  const f = G(), w = -Math.PI / 1.35, x = Math.PI / 1.35, D = x - w, C = D / (i - s), g = (o - s) * C, b = w + g + 0.02, L = n !== "SM" ? 0.1 : 0.12, B = t, U = t * (1 - L), T = B * 2, $ = T / 2, z = T / 2, pe = (U + B) / 2, ve = o !== 25 && o !== 50 && o !== 75 && o !== 100 ? 0 : 0.12, [Q, X] = bn(pe, b, ve), _e = o / 25, H = {
+  const f = G(), w = -Math.PI / 1.35, x = Math.PI / 1.35, D = x - w, C = D / (i - s), g = (o - s) * C, b = w + g + 0.02, L = n !== "SM" ? 0.1 : 0.12, B = t, Y = t * (1 - L), T = B * 2, $ = T / 2, z = T / 2, pe = (Y + B) / 2, ve = o !== 25 && o !== 50 && o !== 75 && o !== 100 ? 0 : 0.12, [Q, X] = bn(pe, b, ve), _e = o / 25, H = {
     L: { markerSize: 12, healthScoreFontSize: 64 },
     M: { markerSize: 8, healthScoreFontSize: 48 },
     SM: { markerSize: 3, healthScoreFontSize: 14 }
@@ -172,7 +172,7 @@ const Mo = ({
             series: [
               {
                 data: r,
-                innerRadius: U,
+                innerRadius: Y,
                 outerRadius: B,
                 startAngle: Math.round(Je(w)),
                 // Use Math.degrees to convert
@@ -182,17 +182,17 @@ const Mo = ({
             ],
             skipAnimation: !0,
             slots: {
-              pieArc: (Y) => /* @__PURE__ */ e(
+              pieArc: (q) => /* @__PURE__ */ e(
                 Mo,
                 {
-                  arcColor: Y.color,
+                  arcColor: q.color,
                   arcRadius: t,
                   arcStartAngle: w,
                   centerX: $,
                   centerY: z,
-                  dataIndex: Y.dataIndex,
+                  dataIndex: q.dataIndex,
                   dialScoreData: r,
-                  innerArcRadius: U,
+                  innerArcRadius: Y,
                   isFinacialStrengthGraph: y,
                   outterArcRadius: B,
                   progressEndAngle: b,
@@ -402,7 +402,7 @@ const Mo = ({
         value: 12,
         color: c ? we.EXCEPTIONAL : ke.EXCEPTIONAL
       }
-    ], { finstrong: d } = S(), { isCopyLoaded: h } = q();
+    ], { finstrong: d } = S(), { isCopyLoaded: h } = U();
     if (!h) return /* @__PURE__ */ e(te, {});
     const { status: u, color: y = "none" } = ht(
       n,
@@ -701,7 +701,7 @@ const Io = "https://content.moneydesktop.com/storage/MD_Assets/serenity/loading_
   title: h,
   drawerType: u
 }) => {
-  const { finstrong: y } = S(), { isCopyLoaded: f } = q();
+  const { finstrong: y } = S(), { isCopyLoaded: f } = U();
   return f ? /* @__PURE__ */ e(oe, { isOpen: l, onClose: _, title: i || y.key_indicators, children: /* @__PURE__ */ a(p, { sx: { backgroundColor: "background.default", height: "100%" }, children: [
     (h || s) && /* @__PURE__ */ a(
       p,
@@ -748,7 +748,7 @@ const Io = "https://content.moneydesktop.com/storage/MD_Assets/serenity/loading_
   shouldShowBalance: o = !0,
   loadAccounts: n
 }) => {
-  const { config: r } = Ne(), { accounts: s } = S(), { selectedAccounts: i } = q(), l = m.useCallback(
+  const { config: r } = Ne(), { accounts: s } = S(), { selectedAccounts: i } = U(), l = m.useCallback(
     (_) => {
       t?.(_);
     },
@@ -799,7 +799,7 @@ const Io = "https://content.moneydesktop.com/storage/MD_Assets/serenity/loading_
     );
   }) }) : null;
 }, Lt = v(Po), Wo = ({ loadAccounts: t, loadMoreLabel: o }) => {
-  const n = G(), { config: r } = Ne(), { connect: s, finstrong: i } = S(), { accounts: l } = S(), { selectedAccounts: c } = q(), [_, d] = m.useState(!1), [h, u] = m.useState(!1), y = m.useMemo(
+  const n = G(), { config: r } = Ne(), { connect: s, finstrong: i } = S(), { accounts: l } = S(), { selectedAccounts: c } = U(), [_, d] = m.useState(!1), [h, u] = m.useState(!1), y = m.useMemo(
     () => c.filter(
       (x) => t ? t.includes(x.account_type) : !0
     ),
@@ -2478,7 +2478,7 @@ const $o = ({ total: t }) => {
     /* @__PURE__ */ e(ce, { index: 2, name: "borrow-details", value: t, children: /* @__PURE__ */ e(wr, {}) })
   ] });
 }, Mr = v(kr), Dr = ({ onClick: t }) => {
-  const { finstrong: o } = S(), { isCopyLoaded: n } = q();
+  const { finstrong: o } = S(), { isCopyLoaded: n } = U();
   return n ? /* @__PURE__ */ a(p, { sx: { alignItems: "center", gap: 12, pt: 12, pb: 32 }, children: [
     /* @__PURE__ */ e(pt, { size: 48 }),
     /* @__PURE__ */ a(p, { sx: { alignItems: "center", gap: 4, textAlign: "center" }, children: [
@@ -2634,9 +2634,9 @@ const $o = ({ total: t }) => {
   step: O.ConnectAccounts,
   type: "main"
 }, Pr = ({ isOpen: t, onClose: o }) => {
-  const { visibleAccounts: n } = Se(), { calculateHealthScore: r } = F(), { finstrong: s } = S(), { setSelectedAccounts: i } = q(), { addRepeatingTransaction: l, setDateRange: c } = Ke(), { filter: _, setFilter: d, transactions: h } = On(), { user: u, userProfile: y, updateUser: f, updateUserProfile: w } = ee(), [x, D] = m.useState(u.credit_score || 0), [C, g] = m.useState(
+  const { visibleAccounts: n } = Se(), { calculateHealthScore: r } = F(), { finstrong: s } = S(), { setSelectedAccounts: i } = U(), { addRepeatingTransaction: l, setDateRange: c } = Ke(), { filter: _, setFilter: d, transactions: h } = On(), { user: u, userProfile: y, updateUser: f, updateUserProfile: w } = ee(), [x, D] = m.useState(u.credit_score || 0), [C, g] = m.useState(
     it
-  ), [b, L] = m.useState(1), [B, U] = m.useState(wt.EveryMonth), [T, $] = m.useState([]), [z, pe] = m.useState(!1), [ve, Q] = m.useState(!1), [X, _e] = m.useState(u.birthday), [H, he] = m.useState(15), [N, ae] = m.useState("");
+  ), [b, L] = m.useState(1), [B, Y] = m.useState(wt.EveryMonth), [T, $] = m.useState([]), [z, pe] = m.useState(!1), [ve, Q] = m.useState(!1), [X, _e] = m.useState(u.birthday), [H, he] = m.useState(15), [N, ae] = m.useState("");
   m.useEffect(() => {
     c({ start: Dt(rt()), end: It(rt()) });
   }, []), m.useEffect(() => {
@@ -2657,19 +2657,19 @@ const $o = ({ total: t }) => {
     [O.MonthlyIncome]: !!N,
     [O.Birthday]: !!u.birthday || !!X,
     [O.CreditScore]: !!u.credit_score || !!x
-  })[C.step], [x, C, X, N, u]), Y = n.length > 0, $t = m.useMemo(() => {
+  })[C.step], [x, C, X, N, u]), q = n.length > 0, $t = m.useMemo(() => {
     const { step: A } = C;
     let R = 0;
-    return A >= O.MonthlyIncome && Y && R++, A >= O.Birthday && T.length && R++, A >= O.CreditScore && (u.birthday || u.credit_score) && R++, R;
-  }, [C.step, Y, T.length, u.birthday, u.credit_score]), zt = (A) => {
+    return A >= O.MonthlyIncome && q && R++, A >= O.Birthday && T.length && R++, A >= O.CreditScore && (u.birthday || u.credit_score) && R++, R;
+  }, [C.step, q, T.length, u.birthday, u.credit_score]), zt = (A) => {
     d({
       ..._,
       custom: (R) => A ? ao(R, A) : at(R)
     });
   }, Et = {
     [O.ConnectAccounts]: {
-      main: Y ? /* @__PURE__ */ e(Lt, { shouldShowBalance: !1 }) : null,
-      mainActionContent: Y ? s.onboarding_next : s.onboarding_add_accounts,
+      main: q ? /* @__PURE__ */ e(Lt, { shouldShowBalance: !1 }) : null,
+      mainActionContent: q ? s.onboarding_next : s.onboarding_add_accounts,
       primaryText: s.connect_your_accounts,
       secondaryText: s.onboarding_connect_your_accounts_secondary
     },
@@ -2689,7 +2689,7 @@ const $o = ({ total: t }) => {
             });
           },
           setFirstDay: L,
-          setFrequency: U,
+          setFrequency: Y,
           setSecondDay: he,
           transaction: De
         }
@@ -2746,7 +2746,7 @@ const $o = ({ total: t }) => {
         ]);
         break;
       case O.ConnectAccounts:
-        if (!Y) {
+        if (!q) {
           Q(!0);
           return;
         }
@@ -2796,8 +2796,8 @@ const $o = ({ total: t }) => {
     }
   }, me = Et[C.step], Ie = C.step === O.ConnectAccounts, Kt = {
     fullWidth: !0,
-    ...Ie && !Y && { startIcon: /* @__PURE__ */ e(_t, {}) }
-  }, Vt = !Ie || Ie && !Y;
+    ...Ie && !q && { startIcon: /* @__PURE__ */ e(_t, {}) }
+  }, Vt = !Ie || Ie && !q;
   return /* @__PURE__ */ a(m.Fragment, { children: [
     /* @__PURE__ */ e(
       oe,
@@ -3131,7 +3131,7 @@ const $o = ({ total: t }) => {
     ) })
   ] });
 }, jr = v(Nr), Kr = ({ isOpen: t, onClose: o }) => {
-  const n = G(), { finstrong: r } = S(), { isCopyLoaded: s, isInitialized: i } = q(), { augmentedChartData: l, healthScore: c, healthScoreChangeReports: _, peerScore: d } = F();
+  const n = G(), { finstrong: r } = S(), { isCopyLoaded: s, isInitialized: i } = U(), { augmentedChartData: l, healthScore: c, healthScoreChangeReports: _, peerScore: d } = F();
   if (!s || !i) return /* @__PURE__ */ e(te, {});
   const h = He(c.health_score || 0, r), u = _.slice().reverse();
   return /* @__PURE__ */ e(
@@ -3252,7 +3252,7 @@ const $o = ({ total: t }) => {
     ] })
   ] });
 }, Yr = ({ isOpen: t, onClose: o }) => {
-  const { finstrong: n } = S(), { isCopyLoaded: r } = q();
+  const { finstrong: n } = S(), { isCopyLoaded: r } = U();
   return r ? /* @__PURE__ */ e(oe, { isOpen: t, onClose: o, title: n.score_rubric, children: /* @__PURE__ */ a(p, { sx: { bgcolor: "background.default", gap: 36, height: "100%", p: 24 }, children: [
     /* @__PURE__ */ a(p, { sx: { gap: 20 }, children: [
       /* @__PURE__ */ a(p, { sx: { gap: 8 }, children: [
@@ -3332,7 +3332,7 @@ const $o = ({ total: t }) => {
     ] })
   ] }) }) : /* @__PURE__ */ e(te, {});
 }, qr = v(Yr), Ur = v(() => {
-  const [t, o] = m.useState(!1), n = G(), [r, { width: s }] = St(), { finstrong: i } = S(), { isCopyLoaded: l, isInitialized: c } = q(), { healthScore: _, healthScoreChange: d } = F(), h = n.palette.mode === "dark", u = He(_?.health_score, i);
+  const [t, o] = m.useState(!1), n = G(), [r, { width: s }] = St(), { finstrong: i } = S(), { isCopyLoaded: l, isInitialized: c } = U(), { healthScore: _, healthScoreChange: d } = F(), h = n.palette.mode === "dark", u = He(_?.health_score, i);
   return !l || !c ? /* @__PURE__ */ e(te, {}) : /* @__PURE__ */ a(V, { ref: r, sx: { p: 16, display: "flex", flexDirection: "column", gap: 8 }, children: [
     /* @__PURE__ */ e(
       vo,
@@ -3440,7 +3440,7 @@ const $o = ({ total: t }) => {
     loadMonthlySummaries: w,
     loadPeerScore: x,
     peerScore: D
-  } = d, { finstrong: C, connect: g } = S(), { isCopyLoaded: b, isInitialized: L } = q(), { loadRepeatingTransactions: B } = Ke(), { isMobile: U } = Ye(), T = G(), { userProfile: $ } = ee(), [z, pe] = m.useState(!1), [ve, Q] = m.useState(!1), [X, _e] = m.useState(!1), [H, he] = m.useState(!1);
+  } = d, { finstrong: C, connect: g } = S(), { isCopyLoaded: b, isInitialized: L } = U(), { loadRepeatingTransactions: B } = Ke(), { isSmallMobile: Y } = Ye(), T = G(), { userProfile: $ } = ee(), [z, pe] = m.useState(!1), [ve, Q] = m.useState(!1), [X, _e] = m.useState(!1), [H, he] = m.useState(!1);
   if (wo({
     widgetName: "FinstrongWidget",
     isLoaded: z
@@ -3479,8 +3479,8 @@ const $o = ({ total: t }) => {
               flexDirection: { md: "row" },
               gap: 24,
               justifyContent: "center",
-              pt: U ? 24 : 16,
-              px: 24
+              pt: Y ? 16 : 24,
+              px: Y ? 16 : 48
             },
             children: [
               /* @__PURE__ */ a(p, { sx: { gap: 24, width: { md: 432 }, height: "100%" }, children: [
@@ -3494,22 +3494,27 @@ const $o = ({ total: t }) => {
                   }
                 )
               ] }),
-              /* @__PURE__ */ e(p, { sx: { maxWidth: 848, minWidth: 288, width: { md: 720 } }, children: /* @__PURE__ */ a(V, { sx: { height: "100%", p: 16 }, children: [
-                /* @__PURE__ */ a(p, { direction: "row", sx: { alignItems: "center", justifyContent: "space-between" }, children: [
-                  /* @__PURE__ */ e(K, { children: C.key_indicators }),
-                  /* @__PURE__ */ e(
-                    P,
-                    {
-                      endIcon: /* @__PURE__ */ e(J, {}),
-                      onClick: () => _e(!0),
-                      sx: {
-                        fontSize: 13
-                      },
-                      variant: "text",
-                      children: C.whats_changed
-                    }
-                  )
-                ] }),
+              /* @__PURE__ */ e(p, { children: /* @__PURE__ */ a(V, { sx: { height: "100%", p: 16 }, children: [
+                /* @__PURE__ */ a(
+                  p,
+                  {
+                    direction: "row",
+                    sx: { alignItems: "center", gap: 12, justifyContent: "space-between" },
+                    children: [
+                      /* @__PURE__ */ e(K, { children: C.key_indicators }),
+                      /* @__PURE__ */ e(
+                        P,
+                        {
+                          endIcon: /* @__PURE__ */ e(J, {}),
+                          onClick: () => _e(!0),
+                          size: "small",
+                          variant: "text",
+                          children: /* @__PURE__ */ e(I, { bold: !0, sx: { flexShrink: 0 }, variant: "body2", children: C.whats_changed })
+                        }
+                      )
+                    ]
+                  }
+                ),
                 h.length ? /* @__PURE__ */ e(
                   Ve,
                   {

package/dist/goals/index.es.js

@@ -39,8 +39,8 @@ import { g as we, A as ye } from "../ConnectDrawer-cXpqSnbj.mjs";
 import at from "@mui/material/Collapse";
 import rt from "@mui/material/ListItemIcon";
 import it from "@mui/material/Checkbox";
-import { u as st, A as lt } from "../AccountDetailsHeader-B21Y8_ED.mjs";
-import { A as ct } from "../AccountDetailsContent-ZWkttor7.mjs";
+import { u as st, A as lt } from "../AccountDetailsHeader-D8wbZdBk.mjs";
+import { A as ct } from "../AccountDetailsContent-D4oOgcoI.mjs";
 import { u as dt } from "../useAccountDisplayName-DSUFGGaF.mjs";
 import De from "@mui/material/TextField";
 import { M as mt, I as ut, O as _t } from "../OriginalBalanceAction-BCSXD8XS.mjs";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mx-cartographer/experiences",
-  "version": "7.6.1",
+  "version": "7.6.3",
   "description": "Library containing experience widgets",
   "author": "MX",
   "license": "MIT",

package/dist/AccountDetailsHeader-B21Y8_ED.mjs

@@ -1,87 +0,0 @@
-import { jsx as t, jsxs as i } from "react/jsx-runtime";
-import { observer as m } from "mobx-react-lite";
-import e from "@mui/material/Stack";
-import { H3 as _, InstitutionLogo as x, Text as a, H2 as T } from "@mxenabled/mxui";
-import d from "react";
-import { G as N, d as f, m as D, f as w, u as E } from "./hooks-ZMp65DFz.mjs";
-import { g as I } from "./AccountFields-D9Jil_7P.mjs";
-import G from "@mui/material/Card";
-import v from "@mui/material/CardContent";
-import O from "@mui/material/CardHeader";
-import { L as H } from "./Loader-DUaFpDGv.mjs";
-import { f as M, a as P } from "./Dialog-BlnUNqVo.mjs";
-import { I as L, P as U, S as j } from "./Account-CQ5cFk24.mjs";
-import { u as z } from "./useAccountDisplayName-DSUFGGaF.mjs";
-import { f as B } from "./NumberFormatting-DjTD0t3W.mjs";
-const p = () => {
-  if (!d.useContext(N))
-    throw new Error("useCategoryUiStore() must be used within the GlobalDataContext");
-  return f().uiStore;
-}, Y = ({ sx: n, ChartComponent: s }) => {
-  const { loadMonthlyCategoryTotals: c } = D(), { isInitialized: o } = w(), { selectedAccount: r } = p(), [l, u] = d.useState(!1);
-  return d.useEffect(() => {
-    o && c([r]).finally(() => {
-      u(!0);
-    });
-  }, [o, r]), !o || !l ? /* @__PURE__ */ t(H, {}) : /* @__PURE__ */ i(
-    G,
-    {
-      sx: {
-        "& .MuiCardContent-root:last-child": {
-          pb: 0
-        },
-        ...n
-      },
-      children: [
-        /* @__PURE__ */ t(
-          O,
-          {
-            sx: { pb: 0 },
-            title: /* @__PURE__ */ t(_, { sx: { pb: 4 }, children: M(/* @__PURE__ */ new Date(), P.MONTH_LONG) })
-          }
-        ),
-        /* @__PURE__ */ t(v, { sx: { p: 0 }, children: s ? /* @__PURE__ */ t(s, {}) : null })
-      ]
-    }
-  );
-}, k = m(Y), R = ({
-  customDetailsChart: n,
-  ChartComponent: s
-}) => {
-  const { institutions: c } = f(), { selectedAccount: o } = p(), { accounts: r } = E(), { firstSubtitle: l, firstValue: u, hasAvailableBalance: C, secondSubtitle: h, secondValue: S } = I(o, r), b = c.find(
-    (y) => y.guid === o?.institution_guid
-  ), A = [
-    ...L,
-    ...U,
-    ...j
-  ].includes(o.account_type), g = z(o);
-  return /* @__PURE__ */ i(e, { bgcolor: "background.default", p: 24, children: [
-    /* @__PURE__ */ i(e, { gap: 12, children: [
-      /* @__PURE__ */ t(
-        x,
-        {
-          alt: r.institution_logo_alt,
-          institutionGuid: o.institution_guid || "",
-          size: 64
-        }
-      ),
-      /* @__PURE__ */ t(a, { variant: "Small", children: b?.name })
-    ] }),
-    /* @__PURE__ */ i(e, { gap: 8, mb: 24, mt: 4, children: [
-      /* @__PURE__ */ t(T, { children: g }),
-      /* @__PURE__ */ i(e, { direction: "row", justifyContent: "space-between", children: [
-        /* @__PURE__ */ t(a, { bold: C, variant: "Body", children: l }),
-        /* @__PURE__ */ t(a, { bold: !0, variant: "Body", children: B(u, "0,0.00") })
-      ] }),
-      /* @__PURE__ */ i(e, { direction: "row", justifyContent: "space-between", children: [
-        /* @__PURE__ */ t(a, { variant: "Small", children: h }),
-        /* @__PURE__ */ t(a, { variant: "Small", children: S })
-      ] })
-    ] }),
-    A && /* @__PURE__ */ t(e, { children: n || /* @__PURE__ */ t(k, { ChartComponent: s }) })
-  ] });
-}, rt = m(R);
-export {
-  rt as A,
-  p as u
-};