@mx-cartographer/experiences 7.6.10 → 7.6.12

package/CHANGELOG.md

@@ -1,3 +1,11 @@
+## [7.6.12] - 01-16-2026
+
+- **UPDATED** - Focus style for goal status cards
+
+## [7.6.11] - 01-16-2026
+
+- **UPDATED** - Fixes for `Finstrong` onboarding and sticky footer
+
 ## [7.6.10] - 01-16-2026
 
 - **UPDATED** - `Finstrong` KeyIndicators Line Graph Style

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 ke, e as Me,
 import { y as bi, F as fi } from "../FinstrongStore-bEn_im_e.mjs";
 import * as nt from "d3";
 import { observer as w } from "mobx-react-lite";
-import { u as x, b as U, a as Ne, o as ee, z as L, p as An, d as Ce, m as je, f as Tn, j as Ke, h as On, i as Rn } from "../hooks-ZMp65DFz.mjs";
+import { u as x, b as U, a as Ne, o as ee, z as L, p as Tn, d as Ce, m as je, f as An, 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";
@@ -55,7 +55,7 @@ import { startOfToday as rt } from "date-fns/startOfToday";
 import { subDays as no } from "date-fns/subDays";
 import { c as oo, d as at, S as ro, i as ao } from "../ManageIncome-1FRPmZFq.mjs";
 import { LocalizationProvider as io, DatePicker as so, StaticDatePicker as co } from "@mui/x-date-pickers";
-import { AdapterDateFns as At } from "@mui/x-date-pickers/AdapterDateFnsV3";
+import { AdapterDateFns as Tt } from "@mui/x-date-pickers/AdapterDateFnsV3";
 import { R as lo } from "../RecurringSettings-z0XUW9qx.mjs";
 import { LocalizationProvider as po } from "@mui/x-date-pickers/LocalizationProvider";
 import { format as _o } from "date-fns/format";
@@ -126,7 +126,7 @@ const Mo = ({
       }
     ) })
   ] });
-}, Tt = ({
+}, At = ({
   arcRadius: t = 100,
   healthScore: o,
   size: n = "L",
@@ -141,7 +141,7 @@ const Mo = ({
   footerRightContent: h,
   isFinacialStrengthGraph: y = !1
 }) => {
-  const S = G(), v = -Math.PI / 1.35, f = Math.PI / 1.35, D = f - v, C = D / (i - s), g = (o - s) * C, b = v + g + 0.02, R = n !== "SM" ? 0.1 : 0.12, B = t, Y = t * (1 - R), T = B * 2, $ = T / 2, z = T / 2, he = (Y + B) / 2, we = o !== 25 && o !== 50 && o !== 75 && o !== 100 ? 0 : 0.12, [Q, X] = bn(he, b, we), ue = o / 25, H = {
+  const S = G(), v = -Math.PI / 1.35, f = Math.PI / 1.35, D = f - v, C = D / (i - s), g = (o - s) * C, b = v + g + 0.02, R = n !== "SM" ? 0.1 : 0.12, B = t, Y = t * (1 - R), A = B * 2, $ = A / 2, z = A / 2, he = (Y + B) / 2, we = o !== 25 && o !== 50 && o !== 75 && o !== 100 ? 0 : 0.12, [Q, X] = bn(he, b, we), ue = o / 25, H = {
     L: { markerSize: 12, healthScoreFontSize: 64 },
     M: { markerSize: 8, healthScoreFontSize: 48 },
     SM: { markerSize: 3, healthScoreFontSize: 14 }
@@ -156,8 +156,8 @@ const Mo = ({
     p,
     {
       sx: {
-        width: T,
-        height: n === "SM" ? T - 7 : T,
+        width: A,
+        height: n === "SM" ? A - 7 : A,
         position: "relative",
         alignSelf: "center",
         overflow: "visible"
@@ -166,7 +166,7 @@ const Mo = ({
         /* @__PURE__ */ e(
           nn,
           {
-            height: n === "SM" ? T - 7 : T,
+            height: n === "SM" ? A - 7 : A,
             hideLegend: !0,
             margin: me,
             series: [
@@ -206,7 +206,7 @@ const Mo = ({
                 stroke: "none"
               }
             },
-            width: T
+            width: A
           }
         ),
         o >= s && o <= i && /* @__PURE__ */ e(
@@ -349,7 +349,7 @@ const Mo = ({
       { id: 4, label: "Group D", value: 25 }
     ], { finstrong: l } = x(), c = He(n, l);
     return /* @__PURE__ */ e(
-      Tt,
+      At,
       {
         arcRadius: t,
         dialScoreData: i,
@@ -410,7 +410,7 @@ const Mo = ({
       _.credit_score_status
     );
     return /* @__PURE__ */ e(
-      Tt,
+      At,
       {
         arcRadius: t,
         dialScoreData: d,
@@ -501,7 +501,7 @@ const Mo = ({
   ) : null;
 };
 var _e = /* @__PURE__ */ ((t) => (t.SpendLessThanYouMake = "spendLessThanYouMake", t.PayBillsOnTime = "payBillsOnTime", t.SaveEnoughToLiveOn = "saveEnoughToLiveOn", t.MaintainEmergencySavings = "maintainEmergencySavings", t.HaveManageableDebt = "haveManageableDebt", t.HaveAGoodCreditScore = "haveAGoodCreditScore", t))(_e || {});
-const Io = "https://content.moneydesktop.com/storage/MD_Assets/serenity/loading_animation_final.gif", Ao = ({ isOpen: t, onClose: o }) => {
+const Io = "https://content.moneydesktop.com/storage/MD_Assets/serenity/loading_animation_final.gif", To = ({ isOpen: t, onClose: o }) => {
   const { common: n, finstrong: r } = x(), { isMobile: s } = Ye(), { updateUser: i, user: l } = ee(), [c, d] = m.useState(l.credit_score || 0), _ = !isNaN(c), u = () => {
     o(), setTimeout(() => d(l.credit_score || 0), 300);
   }, h = () => {
@@ -547,7 +547,7 @@ const Io = "https://content.moneydesktop.com/storage/MD_Assets/serenity/loading_
       )
     }
   );
-}, Rt = w(Ao), To = ({ chartFor: t }) => {
+}, Rt = w(To), Ao = ({ chartFor: t }) => {
   const o = G(), n = o.palette.mode === "dark", { monthlySummaries: r } = L(), { user: s } = ee(), { finstrong: i } = x(), [l, { width: c }] = St(), d = {
     savingsOverTime: {
       icon: /* @__PURE__ */ e(lt, { size: 48, sx: { marginBottom: 8 } }),
@@ -635,8 +635,8 @@ const Io = "https://content.moneydesktop.com/storage/MD_Assets/serenity/loading_
     /* @__PURE__ */ e(M, { fontWeight: 600, variant: "body1", children: d.title }),
     /* @__PURE__ */ e(M, { align: "center", variant: "subtitle1", children: d.description })
   ] }) });
-}, qe = w(To), Oo = () => {
-  const { healthScoreChangeReports: t } = L(), { finstrong: o } = x(), { user: n } = ee(), { availableWidth: r } = An(), { isSmallMobile: s } = Ye(r), [i, l] = m.useState(!1), c = t.at(-1);
+}, qe = w(Ao), Oo = () => {
+  const { healthScoreChangeReports: t } = L(), { finstrong: o } = x(), { user: n } = ee(), { availableWidth: r } = Tn(), { isSmallMobile: s } = Ye(r), [i, l] = m.useState(!1), c = t.at(-1);
   return /* @__PURE__ */ a(k, { children: [
     /* @__PURE__ */ a(p, { sx: { gap: 28 }, children: [
       /* @__PURE__ */ e(
@@ -1641,7 +1641,7 @@ const $o = ({ total: t }) => {
       }
     )
   ] });
-}, Te = (t, o = 1e3) => {
+}, Ae = (t, o = 1e3) => {
   const n = Math.abs(t) >= o ? "0.[0]a" : "0";
   return W(t, n);
 }, Pt = ({
@@ -1661,14 +1661,14 @@ const $o = ({ total: t }) => {
         spending_vs_income: {
           main: g.standard_spend,
           comparison: g.income,
-          formattedMain: Te(g.standard_spend),
-          formattedComparison: Te(g.income)
+          formattedMain: Ae(g.standard_spend),
+          formattedComparison: Ae(g.income)
         },
         debt_payment_vs_income: {
           main: g.income,
           comparison: g.debt_spend,
-          formattedMain: Te(g.income),
-          formattedComparison: Te(g.debt_spend)
+          formattedMain: Ae(g.income),
+          formattedComparison: Ae(g.debt_spend)
         }
       };
       return {
@@ -2000,7 +2000,7 @@ const $o = ({ total: t }) => {
     }
   );
 }, ur = w(hr), mr = () => {
-  const { accounts: t } = Ce(), { categories: o, dateRangeCategoryTotals: n, loadDateRangeCategoryTotals: r } = je(), { monthlySummaries: s, handleFinstrongWidgetPrimaryCtaClick: i } = L(), { appDataStore: l } = Tn(), { finstrong: c, goals: d, spending: _ } = x(), u = G(), [h, y] = m.useState("");
+  const { accounts: t } = Ce(), { categories: o, dateRangeCategoryTotals: n, loadDateRangeCategoryTotals: r } = je(), { monthlySummaries: s, handleFinstrongWidgetPrimaryCtaClick: i } = L(), { appDataStore: l } = An(), { finstrong: c, goals: d, spending: _ } = x(), u = G(), [h, y] = m.useState("");
   m.useEffect(() => {
     r(
       t,
@@ -2501,7 +2501,7 @@ const $o = ({ total: t }) => {
       }
     ) })
   ] }) : /* @__PURE__ */ e(te, {});
-}, Ir = w(Dr), Ar = ({
+}, Ir = w(Dr), Tr = ({
   firstDay: t,
   frequency: o,
   secondDay: n,
@@ -2549,11 +2549,11 @@ const $o = ({ total: t }) => {
       }
     ) })
   ] });
-}, Tr = w(Ar), Or = ({ selectedDate: t, setSelectedDate: o }) => {
+}, Ar = w(Tr), Or = ({ selectedDate: t, setSelectedDate: o }) => {
   const { finstrong: n } = x(), r = G(), s = (i) => {
     o(Math.floor(new Date(i).getTime() / 1e3));
   };
-  return /* @__PURE__ */ e(k, { sx: { p: 24 }, children: /* @__PURE__ */ e(io, { dateAdapter: At, children: /* @__PURE__ */ e(
+  return /* @__PURE__ */ e(k, { sx: { p: 24 }, children: /* @__PURE__ */ e(io, { dateAdapter: Tt, children: /* @__PURE__ */ e(
     so,
     {
       disableFuture: !0,
@@ -2635,12 +2635,12 @@ const $o = ({ total: t }) => {
 }, Pr = ({ isOpen: t, onClose: o }) => {
   const { visibleAccounts: n } = Ce(), { calculateHealthScore: r } = L(), { finstrong: s } = x(), { setSelectedAccounts: i } = U(), { addRepeatingTransaction: l, setDateRange: c } = Ke(), { filter: d, setFilter: _, transactions: u } = On(), { user: h, userProfile: y, updateUser: S, updateUserProfile: v } = ee(), [f, D] = m.useState(h.credit_score || 0), [C, g] = m.useState(
     it
-  ), [b, R] = m.useState(1), [B, Y] = m.useState(wt.EveryMonth), [T, $] = m.useState([]), [z, he] = m.useState(!1), [we, Q] = m.useState(!1), [X, ue] = m.useState(h.birthday), [H, me] = m.useState(15), [N, ie] = m.useState("");
+  ), [b, R] = m.useState(1), [B, Y] = m.useState(wt.EveryMonth), [A, $] = m.useState([]), [z, he] = m.useState(!1), [we, Q] = m.useState(!1), [X, ue] = m.useState(h.birthday), [H, me] = m.useState(15), [N, ie] = m.useState("");
   m.useEffect(() => {
     c({ start: Dt(rt()), end: It(rt()) });
   }, []), m.useEffect(() => {
     _({
-      accounts: n.map((A) => A.guid),
+      accounts: n.map((T) => T.guid),
       dateRange: {
         start: no(/* @__PURE__ */ new Date(), 90),
         end: /* @__PURE__ */ new Date()
@@ -2649,7 +2649,7 @@ const $o = ({ total: t }) => {
     }), i(n);
   }, [n]);
   const ge = m.useMemo(
-    () => u.find((A) => A.guid === N),
+    () => u.find((T) => T.guid === N),
     [N, u]
   ), ne = m.useMemo(() => ({
     [O.ConnectAccounts]: !0,
@@ -2657,13 +2657,13 @@ const $o = ({ total: t }) => {
     [O.Birthday]: !!h.birthday || !!X,
     [O.CreditScore]: !!h.credit_score || !!f
   })[C.step], [f, C, X, N, h]), q = n.length > 0, $t = m.useMemo(() => {
-    const { step: A } = C;
+    const { step: T } = C;
     let F = 0;
-    return A >= O.MonthlyIncome && q && F++, A >= O.Birthday && T.length && F++, A >= O.CreditScore && (h.birthday || h.credit_score) && F++, F;
-  }, [C.step, q, T.length, h.birthday, h.credit_score]), zt = (A) => {
+    return T >= O.MonthlyIncome && q && F++, T >= O.Birthday && A.length && F++, T >= O.CreditScore && (h.birthday || h.credit_score) && F++, F;
+  }, [C.step, q, A.length, h.birthday, h.credit_score]), zt = (T) => {
     _({
       ...d,
-      custom: (F) => A ? ao(F, A) : at(F)
+      custom: (F) => T ? ao(F, T) : at(F)
     });
   }, Et = {
     [O.ConnectAccounts]: {
@@ -2674,17 +2674,17 @@ const $o = ({ total: t }) => {
     },
     [O.MonthlyIncome]: {
       detail: /* @__PURE__ */ e(
-        Tr,
+        Ar,
         {
           firstDay: b,
           frequency: B,
-          incomeTransactions: T,
+          incomeTransactions: A,
           secondDay: H,
-          setCurrentStep: (A) => {
-            g(A), $((F) => {
+          setCurrentStep: (T) => {
+            g(T), $((F) => {
               if (F.some((se) => se.guid === N)) return F.filter((se) => se.guid !== N);
-              const Ae = u.find((se) => se.guid === N);
-              return Ae ? [...F, { ...Ae, firstDay: b, frequency: B, secondDay: H }] : F;
+              const Te = u.find((se) => se.guid === N);
+              return Te ? [...F, { ...Te, firstDay: b, frequency: B, secondDay: H }] : F;
             });
           },
           setFirstDay: R,
@@ -2698,8 +2698,8 @@ const $o = ({ total: t }) => {
         ro,
         {
           onSearch: zt,
-          onSelected: (A) => {
-            g({ step: O.MonthlyIncome, type: "detail" }), ie(A);
+          onSelected: (T) => {
+            g({ step: O.MonthlyIncome, type: "detail" }), ie(T);
           }
         }
       ),
@@ -2722,7 +2722,7 @@ const $o = ({ total: t }) => {
   }, Ue = () => {
     g(it), he(!1), ie(""), o();
   }, Qe = async () => {
-    he(!0), await jt(T), await r(), await v({ ...y, has_completed_finstrong_onboarding: !0 }), Ue();
+    he(!0), await jt(A), await r(), await v({ ...y, has_completed_finstrong_onboarding: !0 }), Ue();
   }, Gt = () => {
     if (C.step === O.CreditScore) {
       Qe();
@@ -2730,8 +2730,8 @@ const $o = ({ total: t }) => {
     }
     g({ step: C.step + 1, type: "main" });
   }, Ht = () => {
-    const { step: A } = C, F = A + 1;
-    switch (A) {
+    const { step: T } = C, F = T + 1;
+    switch (T) {
       case O.Birthday:
         X && X !== h.birthday && S({ ...h, birthday: X });
         break;
@@ -2739,7 +2739,7 @@ const $o = ({ total: t }) => {
         f && f !== h.credit_score && S({ ...h, credit_score: f }), Qe();
         return;
       case O.MonthlyIncome:
-        N && T.findIndex(({ guid: be }) => be === N) === -1 && $((be) => [
+        N && A.findIndex(({ guid: be }) => be === N) === -1 && $((be) => [
           ...be,
           { ...ge, firstDay: b, frequency: B, secondDay: H }
         ]);
@@ -2753,21 +2753,21 @@ const $o = ({ total: t }) => {
     }
     F in O && g({ step: F, type: "main" });
   }, Nt = () => {
-    const { step: A, type: F } = C;
+    const { step: T, type: F } = C;
     if (F === "detail") {
-      g({ step: A, type: "main" });
+      g({ step: T, type: "main" });
       return;
     }
-    if (A === O.Birthday && T.length) {
-      g({ step: A - 1, type: "detail" });
+    if (T === O.Birthday && A.length) {
+      g({ step: T - 1, type: "detail" });
       return;
     }
-    A > O.ConnectAccounts && g({ step: A - 1, type: "main" });
-  }, jt = async (A) => {
-    for (const F of A) {
+    T > O.ConnectAccounts && g({ step: T - 1, type: "main" });
+  }, jt = async (T) => {
+    for (const F of T) {
       const {
         account_guid: be,
-        amount: Ae,
+        amount: Te,
         date: se,
         description: Xt,
         feed_description: Yt,
@@ -2779,7 +2779,7 @@ const $o = ({ total: t }) => {
         transaction_type: Jt
       } = F, en = zn(Ze, to(se)), tn = {
         account_guid: be,
-        amount: Ae,
+        amount: Te,
         created_by: 0,
         description: Zt || Xt || Yt,
         merchant_guid: Qt,
@@ -2801,7 +2801,7 @@ const $o = ({ total: t }) => {
     /* @__PURE__ */ e(
       re,
       {
-        footerStyles: { px: 24, py: 16 },
+        footerStyles: { borderTop: 1, borderColor: "divider", px: 24, py: 16 },
         hasSecondaryAction: !Ie,
         isOpen: t,
         isPrimaryDisabled: !ne,
@@ -2855,7 +2855,9 @@ const $o = ({ total: t }) => {
       {
         sx: {
           alignItems: "center",
+          bgcolor: "background.default",
           gap: 48,
+          height: "calc(100dvh - 116px)",
           pb: 24,
           pt: 72,
           px: 16
@@ -2881,6 +2883,7 @@ const $o = ({ total: t }) => {
   return /* @__PURE__ */ e(
     re,
     {
+      footerStyles: { borderTop: 1, borderColor: "divider", px: 24, py: 16 },
       isOpen: t,
       onClose: o,
       onPrimaryAction: () => {
@@ -2888,7 +2891,7 @@ const $o = ({ total: t }) => {
       },
       onSecondaryAction: o,
       title: n.date_of_birth,
-      children: /* @__PURE__ */ e(p, { sx: { bgcolor: "background.default", height: "100%" }, children: /* @__PURE__ */ e(po, { dateAdapter: At, children: /* @__PURE__ */ e(
+      children: /* @__PURE__ */ e(p, { sx: { bgcolor: "background.default", height: "100%" }, children: /* @__PURE__ */ e(po, { dateAdapter: Tt, children: /* @__PURE__ */ e(
         co,
         {
           disableFuture: !0,
@@ -3447,12 +3450,12 @@ const $o = ({ total: t }) => {
     loadMonthlySummaries: v,
     loadPeerScore: f,
     peerScore: D
-  } = _, { finstrong: C, connect: g } = x(), { isCopyLoaded: b, isInitialized: R } = U(), { loadRepeatingTransactions: B } = Ke(), { isSmallMobile: Y } = Ye(), T = G(), { userProfile: $ } = ee(), [z, he] = m.useState(!1), [we, Q] = m.useState(!1), [X, ue] = m.useState(!1), [H, me] = m.useState(!1);
+  } = _, { finstrong: C, connect: g } = x(), { isCopyLoaded: b, isInitialized: R } = U(), { loadRepeatingTransactions: B } = Ke(), { isSmallMobile: Y } = Ye(), A = G(), { userProfile: $ } = ee(), [z, he] = m.useState(!1), [we, Q] = m.useState(!1), [X, ue] = m.useState(!1), [H, me] = m.useState(!1);
   if (wo({
     widgetName: "FinstrongWidget",
     isLoaded: z
   }), m.useEffect(() => {
-    c(T);
+    c(A);
   }, []), m.useEffect(() => {
     n && (_.handleFinstrongWidgetPrimaryCtaClick = n);
   }, [n, _]), m.useEffect(() => {
@@ -3525,9 +3528,9 @@ const $o = ({ total: t }) => {
                 ge ? /* @__PURE__ */ e(
                   Ve,
                   {
-                    axisColor: T.palette.divider,
+                    axisColor: A.palette.divider,
                     baseline: "min",
-                    colors: [T.palette.primary.main],
+                    colors: [A.palette.primary.main],
                     curveType: "natural",
                     customLegendBoxSx: { borderRadius: "2px" },
                     customLegendSx: { left: 0 },
@@ -3535,9 +3538,9 @@ const $o = ({ total: t }) => {
                     datasets: [u],
                     height: 300,
                     isGraphClippingXAxis: !0,
-                    labelBackgroundColor: T.palette.border.dark,
-                    labelFontColor: T.palette.common.white,
-                    labelFontSize: typeof T.typography.XSmall?.fontSize == "string" ? parseFloat(T.typography.XSmall.fontSize) : T.typography.XSmall?.fontSize,
+                    labelBackgroundColor: A.palette.border.dark,
+                    labelFontColor: A.palette.common.white,
+                    labelFontSize: typeof A.typography.XSmall?.fontSize == "string" ? parseFloat(A.typography.XSmall.fontSize) : A.typography.XSmall?.fontSize,
                     labels: [C.key_indicators_label],
                     margin: { right: 12, left: -37 },
                     peerAverage: ie,
@@ -3577,7 +3580,7 @@ const $o = ({ total: t }) => {
 }, mi = w(Qr);
 export {
   Do as CreditScoreGraph,
-  Tt as DialScoreCard,
+  At as DialScoreCard,
   Ot as FinancialStrengthGraph,
   bi as FinstrongApi,
   fi as FinstrongStore,

package/dist/goals/index.es.js

@@ -24,18 +24,18 @@ import { S as Qe } from "../StatusBar-BK_uYHAB.mjs";
 import E from "@mui/material/Divider";
 import B from "@mui/material/List";
 import { L as ee } from "../ListItemAction-CU42h39I.mjs";
-import { C as ke } from "../CurrencyInput-itK0R3wV.mjs";
+import { C as we } from "../CurrencyInput-itK0R3wV.mjs";
 import { fromUnixTime as Q } from "date-fns/fromUnixTime";
-import k from "@mui/material/ListItem";
+import w from "@mui/material/ListItem";
 import M from "@mui/material/ListItemButton";
-import w from "@mui/material/ListItemText";
+import k from "@mui/material/ListItemText";
 import { DataGridPro as et } from "@mui/x-data-grid-pro";
 import { u as tt, A as U, W as nt } from "../WidgetContainer-COyiIVSd.mjs";
 import { D as Y } from "../Drawer-DV4NTsFg.mjs";
 import { b as L } from "../Localization-2MODESHW.mjs";
 import { f as ae, D as re, a as ot } from "../Dialog-B4PI-_bL.mjs";
 import V from "@mui/material/ListItemAvatar";
-import { g as we, A as fe } from "../ConnectDrawer-CPvaP8lk.mjs";
+import { g as ke, A as fe } from "../ConnectDrawer-CPvaP8lk.mjs";
 import at from "@mui/material/Collapse";
 import rt from "@mui/material/ListItemIcon";
 import it from "@mui/material/Checkbox";
@@ -79,26 +79,38 @@ const Ct = (t, n) => n ? x(t, t < 1e3 ? "0" : "0.00a").replace(
       }
     ];
     let y = /* @__PURE__ */ e(Re, {});
-    return t.track_type === m.DEBT_TRACK ? y = /* @__PURE__ */ e(Ee, {}) : t.track_type === m.RETIREMENT_TRACK && (y = /* @__PURE__ */ e(ve, {})), /* @__PURE__ */ e(Te, { elevation: 2, children: /* @__PURE__ */ r(Ce, { disabled: !s, onClick: s, children: [
-      /* @__PURE__ */ e(
-        Xe,
-        {
-          avatar: /* @__PURE__ */ e(oe, { sx: { bgcolor: g, color: i, height: 48, width: 48 }, variant: "rounded", children: y }),
-          subheader: /* @__PURE__ */ e(T, { variant: n || _ ? "H3" : "H2", children: `${x(t.current_amount, _ ? "0,0" : "0,0.00")} / ${Ct(
-            d,
-            _
-          )}` }),
-          title: /* @__PURE__ */ e(_e, { color: "text.secondary", fontWeight: 400, variant: "Body", children: t.name })
-        }
-      ),
-      /* @__PURE__ */ e(Se, { sx: { pt: 0 }, children: /* @__PURE__ */ r(b, { gap: 6, children: [
-        /* @__PURE__ */ e(Qe, { data: h, height: 24 }),
-        /* @__PURE__ */ r(b, { alignItems: "center", direction: "row", justifyContent: "space-between", children: [
-          /* @__PURE__ */ e(T, { color: "text.secondary", variant: "XSmall", children: c }),
-          t.projected_to_complete_at && /* @__PURE__ */ e(T, { color: "text.secondary", variant: "XSmall", children: o })
+    return t.track_type === m.DEBT_TRACK ? y = /* @__PURE__ */ e(Ee, {}) : t.track_type === m.RETIREMENT_TRACK && (y = /* @__PURE__ */ e(ve, {})), /* @__PURE__ */ e(
+      Te,
+      {
+        elevation: 2,
+        sx: {
+          "&:focus-within": {
+            outline: "2px solid",
+            outlineColor: "primary.main"
+          }
+        },
+        children: /* @__PURE__ */ r(Ce, { disabled: !s, onClick: s, children: [
+          /* @__PURE__ */ e(
+            Xe,
+            {
+              avatar: /* @__PURE__ */ e(oe, { sx: { bgcolor: g, color: i, height: 48, width: 48 }, variant: "rounded", children: y }),
+              subheader: /* @__PURE__ */ e(T, { variant: n || _ ? "H3" : "H2", children: `${x(t.current_amount, _ ? "0,0" : "0,0.00")} / ${Ct(
+                d,
+                _
+              )}` }),
+              title: /* @__PURE__ */ e(_e, { color: "text.secondary", fontWeight: 400, variant: "Body", children: t.name })
+            }
+          ),
+          /* @__PURE__ */ e(Se, { sx: { pt: 0 }, children: /* @__PURE__ */ r(b, { gap: 6, children: [
+            /* @__PURE__ */ e(Qe, { data: h, height: 24 }),
+            /* @__PURE__ */ r(b, { alignItems: "center", direction: "row", justifyContent: "space-between", children: [
+              /* @__PURE__ */ e(T, { color: "text.secondary", variant: "XSmall", children: c }),
+              t.projected_to_complete_at && /* @__PURE__ */ e(T, { color: "text.secondary", variant: "XSmall", children: o })
+            ] })
+          ] }) })
         ] })
-      ] }) })
-    ] }) });
+      }
+    );
   }
 ), St = K(({ trackType: t }) => {
   const { goals: n } = R(), { setAlert: s, monthlyCashFlowProfile: l, updateMonthlyCashFlowProfile: p } = G(), a = A.useMemo(() => {
@@ -120,7 +132,7 @@ const Ct = (t, n) => n ? x(t, t < 1e3 ? "0" : "0.00a").replace(
       primaryText: n.contribution_label,
       secondaryText: x(a, "0,0.00"),
       children: /* @__PURE__ */ e(
-        ke,
+        we,
         {
           amount: _,
           autoFocus: !0,
@@ -189,7 +201,7 @@ const Ct = (t, n) => n ? x(t, t < 1e3 ? "0" : "0.00a").replace(
     await l(u), p(n.alert_goals_reordered), i(!1);
   };
   return /* @__PURE__ */ r(b, { children: [
-    /* @__PURE__ */ e(k, { children: /* @__PURE__ */ e(M, { onClick: () => i(!0), children: /* @__PURE__ */ e(w, { children: /* @__PURE__ */ r(
+    /* @__PURE__ */ e(w, { children: /* @__PURE__ */ e(M, { onClick: () => i(!0), children: /* @__PURE__ */ e(k, { children: /* @__PURE__ */ r(
       b,
       {
         alignItems: "center",
@@ -241,7 +253,7 @@ const Ct = (t, n) => n ? x(t, t < 1e3 ? "0" : "0.00a").replace(
   ] });
 }, Et = ({ goal: t, index: n }) => {
   const { goals: s } = R(), { percentage: l } = ue(s, t), p = t.goal_type === me.KEEP_BALANCE_BELOW || t.has_been_spent ? s.goal_completed : L(s.goal_percentage_reached, `${l * 100}`);
-  return /* @__PURE__ */ e(k, { children: /* @__PURE__ */ r(M, { children: [
+  return /* @__PURE__ */ e(w, { children: /* @__PURE__ */ r(M, { children: [
     t.track_type !== m.RETIREMENT_TRACK && /* @__PURE__ */ e(
       V,
       {
@@ -254,7 +266,7 @@ const Ct = (t, n) => n ? x(t, t < 1e3 ? "0" : "0.00a").replace(
         children: /* @__PURE__ */ e(oe, { sx: { bgcolor: "text.primary", height: "16px", width: "16px" }, children: /* @__PURE__ */ e(T, { bold: !0, variant: "XSmall", children: n + 1 }) })
       }
     ),
-    /* @__PURE__ */ e(w, { primaryTypographyProps: { variant: "Body" }, children: /* @__PURE__ */ r(b, { alignItems: "center", direction: "row", justifyContent: "space-between", children: [
+    /* @__PURE__ */ e(k, { primaryTypographyProps: { variant: "Body" }, children: /* @__PURE__ */ r(b, { alignItems: "center", direction: "row", justifyContent: "space-between", children: [
       /* @__PURE__ */ r(b, { children: [
         /* @__PURE__ */ e(T, { bold: !0, variant: "Body", children: t.name }),
         /* @__PURE__ */ e(T, { variant: "XSmall", children: t.is_complete ? p : L(
@@ -270,9 +282,9 @@ const Ct = (t, n) => n ? x(t, t < 1e3 ? "0" : "0.00a").replace(
   ] }) });
 }, vt = ({ goal: t }) => {
   const { goals: n } = R();
-  return /* @__PURE__ */ e(k, { children: /* @__PURE__ */ r(M, { children: [
+  return /* @__PURE__ */ e(w, { children: /* @__PURE__ */ r(M, { children: [
     /* @__PURE__ */ e(V, { sx: { alignItems: "center", display: "flex", justifyContent: "center" }, children: /* @__PURE__ */ e(Ye, { color: "success", filled: !0, size: 20 }) }),
-    /* @__PURE__ */ e(w, { primaryTypographyProps: { variant: "Body" }, children: /* @__PURE__ */ r(b, { alignItems: "center", direction: "row", justifyContent: "space-between", children: [
+    /* @__PURE__ */ e(k, { primaryTypographyProps: { variant: "Body" }, children: /* @__PURE__ */ r(b, { alignItems: "center", direction: "row", justifyContent: "space-between", children: [
       /* @__PURE__ */ r(b, { children: [
         /* @__PURE__ */ e(T, { bold: !0, variant: "Body", children: t.name }),
         /* @__PURE__ */ e(T, { variant: "XSmall", children: L(
@@ -413,7 +425,7 @@ const Ct = (t, n) => n ? x(t, t < 1e3 ? "0" : "0.00a").replace(
 }), Gt = ({ goalType: t, onClick: n }) => {
   const { goals: s } = R(), { bgcolor: l, icon: p, label: a, description: _, subTypes: g, type: i } = t, [u, c] = A.useState(!1), o = g.length > 0;
   return /* @__PURE__ */ e(b, { children: /* @__PURE__ */ r(B, { sx: { bgcolor: "background.paper" }, children: [
-    /* @__PURE__ */ e(k, { children: /* @__PURE__ */ r(
+    /* @__PURE__ */ e(w, { children: /* @__PURE__ */ r(
       M,
       {
         onClick: o ? () => c(!u) : () => n(
@@ -423,17 +435,17 @@ const Ct = (t, n) => n ? x(t, t < 1e3 ? "0" : "0.00a").replace(
         ),
         children: [
           /* @__PURE__ */ e(V, { children: /* @__PURE__ */ e(oe, { sx: { bgcolor: l }, variant: "rounded", children: /* @__PURE__ */ e(ye, { name: p, sx: { color: "grey.900" } }) }) }),
-          /* @__PURE__ */ e(w, { primary: a, secondary: _, sx: { mr: 24 } }),
+          /* @__PURE__ */ e(k, { primary: a, secondary: _, sx: { mr: 24 } }),
           !o && /* @__PURE__ */ e(O, {}),
           o && (u ? /* @__PURE__ */ e(Ze, {}) : /* @__PURE__ */ e(qe, {}))
         ]
       }
     ) }),
     /* @__PURE__ */ e(E, { variant: "inset" }),
-    o && /* @__PURE__ */ e(at, { in: u, children: /* @__PURE__ */ e(B, { sx: { bgcolor: "background.default" }, children: g.map((d, h) => /* @__PURE__ */ e(k, { sx: { pl: 48 }, children: /* @__PURE__ */ r(M, { onClick: () => n(d.label, d.metaType, i), children: [
+    o && /* @__PURE__ */ e(at, { in: u, children: /* @__PURE__ */ e(B, { sx: { bgcolor: "background.default" }, children: g.map((d, h) => /* @__PURE__ */ e(w, { sx: { pl: 48 }, children: /* @__PURE__ */ r(M, { onClick: () => n(d.label, d.metaType, i), children: [
       /* @__PURE__ */ e(rt, { sx: { mr: 8 }, children: /* @__PURE__ */ e(ye, { name: d.icon }) }),
       /* @__PURE__ */ e(
-        w,
+        k,
         {
           primary: d.label,
           primaryTypographyProps: { variant: "Body" }
@@ -466,7 +478,7 @@ const Ct = (t, n) => n ? x(t, t < 1e3 ? "0" : "0.00a").replace(
         /* @__PURE__ */ r(B, { sx: { bgcolor: "background.white" }, children: [
           /* @__PURE__ */ e(E, { variant: "fullWidth" }),
           t.map((o, d) => /* @__PURE__ */ r(A.Fragment, { children: [
-            /* @__PURE__ */ e(k, { children: /* @__PURE__ */ r(M, { onClick: () => c(o), children: [
+            /* @__PURE__ */ e(w, { children: /* @__PURE__ */ r(M, { onClick: () => c(o), children: [
               /* @__PURE__ */ e(V, { children: /* @__PURE__ */ e(
                 ne,
                 {
@@ -475,9 +487,9 @@ const Ct = (t, n) => n ? x(t, t < 1e3 ? "0" : "0.00a").replace(
                 }
               ) }),
               /* @__PURE__ */ e(
-                w,
+                k,
                 {
-                  primary: we(o, {
+                  primary: ke(o, {
                     allowNickname: g?.show_account_nicknames_in_master
                   }),
                   secondary: x(o.balance || 0, "0,0.00")
@@ -522,7 +534,7 @@ const Ct = (t, n) => n ? x(t, t < 1e3 ? "0" : "0.00a").replace(
         interest_rate: y.interest_rate || 0,
         meta_type: f,
         monthly_payment: y.minimum_payment || 0,
-        name: we(y, {
+        name: ke(y, {
           allowNickname: _?.show_account_nicknames_in_master
         }),
         track_type: m.DEBT_TRACK
@@ -545,7 +557,7 @@ const Ct = (t, n) => n ? x(t, t < 1e3 ? "0" : "0.00a").replace(
   ] });
 }, Oe = ({ account: t }) => {
   const n = st(t);
-  return /* @__PURE__ */ r(k, { sx: { bgcolor: "background.paper", p: 24 }, children: [
+  return /* @__PURE__ */ r(w, { sx: { bgcolor: "background.paper", p: 24 }, children: [
     /* @__PURE__ */ e(V, { children: /* @__PURE__ */ e(
       ne,
       {
@@ -554,7 +566,7 @@ const Ct = (t, n) => n ? x(t, t < 1e3 ? "0" : "0.00a").replace(
       }
     ) }),
     /* @__PURE__ */ e(
-      w,
+      k,
       {
         primary: n,
         secondary: x(t.balance || 0, "0,0.00")
@@ -582,7 +594,7 @@ const Ct = (t, n) => n ? x(t, t < 1e3 ? "0" : "0.00a").replace(
       secondaryText: x(t.amount, "0,0"),
       zeroStateText: g && t.amount === 0 ? n.add_amount : void 0,
       children: /* @__PURE__ */ e(
-        ke,
+        we,
         {
           amount: a,
           autoFocus: !0,
@@ -595,14 +607,14 @@ const Ct = (t, n) => n ? x(t, t < 1e3 ? "0" : "0.00a").replace(
       )
     }
   );
-}), kt = ({ goal: t }) => {
+}), wt = ({ goal: t }) => {
   const { visibleCheckingAccounts: n, visibleSavingsAccounts: s } = j(), { accounts: l, goals: p } = R(), { setAlert: a, setSelectedGoal: _, updateGoal: g } = G(), i = !t.guid, [u, c] = A.useState(!1), o = async ({ balance: d, guid: h }) => {
     const y = { ...t, account_guid: h, current_amount: d || 0 };
     i ? _(y) : (await g(y), a(p.alert_account_changed)), c(!1);
   };
   return /* @__PURE__ */ r(b, { children: [
-    i && !t.account_guid ? /* @__PURE__ */ e(k, { disableGutters: !0, disablePadding: !0, sx: { bgcolor: "background.paper" }, children: /* @__PURE__ */ r(M, { onClick: () => c(!0), children: [
-      /* @__PURE__ */ e(w, { children: /* @__PURE__ */ r(b, { alignItems: "center", color: "primary.main", direction: "row", gap: 8, children: [
+    i && !t.account_guid ? /* @__PURE__ */ e(w, { disableGutters: !0, disablePadding: !0, sx: { bgcolor: "background.paper" }, children: /* @__PURE__ */ r(M, { onClick: () => c(!0), children: [
+      /* @__PURE__ */ e(k, { children: /* @__PURE__ */ r(b, { alignItems: "center", color: "primary.main", direction: "row", gap: 8, children: [
         /* @__PURE__ */ e(xe, { filled: !0 }),
         p.details_add_account
       ] }) }),
@@ -621,7 +633,7 @@ const Ct = (t, n) => n ? x(t, t < 1e3 ? "0" : "0.00a").replace(
     ] }),
     /* @__PURE__ */ e(Y, { isOpen: u, onClose: () => c(!1), title: p.details_change_account, children: /* @__PURE__ */ r(b, { children: [
       n.length > 0 && /* @__PURE__ */ e(T, { bold: !0, sx: { mb: 4, ml: 24, mt: 12 }, variant: "XSmall", children: l.account_types[1] }),
-      /* @__PURE__ */ e(B, { sx: { bgcolor: "background.paper" }, children: n.map((d) => /* @__PURE__ */ e(k, { children: /* @__PURE__ */ r(M, { onClick: () => o(d), children: [
+      /* @__PURE__ */ e(B, { sx: { bgcolor: "background.paper" }, children: n.map((d) => /* @__PURE__ */ e(w, { children: /* @__PURE__ */ r(M, { onClick: () => o(d), children: [
         /* @__PURE__ */ e(V, { children: /* @__PURE__ */ e(
           ne,
           {
@@ -630,7 +642,7 @@ const Ct = (t, n) => n ? x(t, t < 1e3 ? "0" : "0.00a").replace(
           }
         ) }),
         /* @__PURE__ */ e(
-          w,
+          k,
           {
             primary: d?.name || d?.feed_name,
             secondary: x(d?.balance || 0, "0,0.00")
@@ -639,7 +651,7 @@ const Ct = (t, n) => n ? x(t, t < 1e3 ? "0" : "0.00a").replace(
         /* @__PURE__ */ e(O, {})
       ] }) }, d.guid)) }),
       s.length > 0 && /* @__PURE__ */ e(T, { bold: !0, sx: { mb: 4, ml: 24, mt: 12 }, variant: "XSmall", children: l.account_types[2] }),
-      /* @__PURE__ */ e(B, { sx: { bgcolor: "background.paper" }, children: s.map((d) => /* @__PURE__ */ e(k, { children: /* @__PURE__ */ r(M, { onClick: () => o(d), children: [
+      /* @__PURE__ */ e(B, { sx: { bgcolor: "background.paper" }, children: s.map((d) => /* @__PURE__ */ e(w, { children: /* @__PURE__ */ r(M, { onClick: () => o(d), children: [
         /* @__PURE__ */ e(V, { children: /* @__PURE__ */ e(
           ne,
           {
@@ -648,7 +660,7 @@ const Ct = (t, n) => n ? x(t, t < 1e3 ? "0" : "0.00a").replace(
           }
         ) }),
         /* @__PURE__ */ e(
-          w,
+          k,
           {
             primary: d?.name || d?.feed_name,
             secondary: x(d?.balance || 0, "0,0.00")
@@ -666,7 +678,7 @@ const Ct = (t, n) => n ? x(t, t < 1e3 ? "0" : "0.00a").replace(
       )
     ] }) })
   ] });
-}, wt = K(({ goal: t }) => {
+}, kt = K(({ goal: t }) => {
   const { goals: n } = R(), { setAlert: s, setSelectedGoal: l, updateGoal: p } = G(), [a, _] = A.useState(t.name), g = !t.guid, i = t.track_type === m.SAVINGS_TRACK && t.has_been_spent || t.track_type !== m.SAVINGS_TRACK && t.is_complete, u = async () => {
     const o = { ...t, name: a };
     t.name = a, g ? l(o) : (await p(o), s(n.alert_goal_updated_name));
@@ -790,8 +802,8 @@ const Ct = (t, n) => n ? x(t, t < 1e3 ? "0" : "0.00a").replace(
       /* @__PURE__ */ e(Oe, { account: S }),
       /* @__PURE__ */ e(E, {})
     ] }, S.guid)),
-    /* @__PURE__ */ e(k, { disableGutters: !0, disablePadding: !0, sx: { bgcolor: "background.paper" }, children: /* @__PURE__ */ r(M, { onClick: () => o(!0), children: [
-      /* @__PURE__ */ e(w, { children: /* @__PURE__ */ r(b, { alignItems: "center", color: "primary.main", direction: "row", gap: 8, children: [
+    /* @__PURE__ */ e(w, { disableGutters: !0, disablePadding: !0, sx: { bgcolor: "background.paper" }, children: /* @__PURE__ */ r(M, { onClick: () => o(!0), children: [
+      /* @__PURE__ */ e(k, { children: /* @__PURE__ */ r(b, { alignItems: "center", color: "primary.main", direction: "row", gap: 8, children: [
         /* @__PURE__ */ e(xe, { filled: !0 }),
         n.details_add_account
       ] }) }),
@@ -821,7 +833,7 @@ const Ct = (t, n) => n ? x(t, t < 1e3 ? "0" : "0.00a").replace(
       /* @__PURE__ */ e(T, { color: "text.secondary", sx: { mb: 4, mt: 24 }, variant: "XSmall", children: n.details_title })
     ] }),
     /* @__PURE__ */ r(B, { sx: { bgcolor: "background.paper" }, children: [
-      /* @__PURE__ */ e(wt, { goal: t }),
+      /* @__PURE__ */ e(kt, { goal: t }),
       /* @__PURE__ */ e(E, { sx: { ml: 24 } }),
       (p === m.SAVINGS_TRACK || p === m.RETIREMENT_TRACK) && /* @__PURE__ */ r(X, { children: [
         /* @__PURE__ */ e(Nt, { goal: t }),
@@ -851,7 +863,7 @@ const Ct = (t, n) => n ? x(t, t < 1e3 ? "0" : "0.00a").replace(
       /* @__PURE__ */ e(Mt, { goal: t }),
       /* @__PURE__ */ e(E, {})
     ] }),
-    t.track_type === m.SAVINGS_TRACK && !t.is_complete && /* @__PURE__ */ e(kt, { goal: t })
+    t.track_type === m.SAVINGS_TRACK && !t.is_complete && /* @__PURE__ */ e(wt, { goal: t })
   ] });
 }), Bt = K(({ onClose: t }) => {
   const { visibleRetirementAccounts: n } = j(), { goals: s, common: l } = R(), {

package/package.json

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