@mx-cartographer/experiences 7.0.53-alpha.mega3 → 7.0.53-alpha.mega4

package/CHANGELOG.md

@@ -1,9 +1,13 @@
-## [7.0.52] - 10-11-2025
+## [7.0.53] - 10-15-2025
 
 - **FIXED** - Resolved `BubbleChart` overflow issue on compact devices
 - **FIXED** - Made `BubbleChart` responsive to screen size changes
 - **FIXED** - Prevented full re-render of bubble budgets when adding a new budget
 
+## [7.0.52] - 10-09-2025
+
+- **FIXED** - `Debt Widget` | Snowball method payment math fix
+
 ## [7.0.51] - 10-09-2025
 
 - **ADDED** - Add style font name to the client config

package/dist/budgets/index.es.js

@@ -387,11 +387,10 @@ const xt = ({
     const d = r.current;
     if (!d) return;
     const f = d.nodes(), _ = a > 0 && a < 450 || t > 0 && t < 300, p = yt(f, m, _, t, a);
-    d.nodes(p), pt(d, t, a), o([...p]);
-  }, [t, a, m]), l.useLayoutEffect(() => {
-    const d = r.current;
-    d && (i && !c.current ? (gt(d), c.current = !0) : !i && c.current && (c.current = !1));
-  }, [i, n.length]), /* @__PURE__ */ e("svg", { height: t, style: { overflow: "visible" }, width: Math.abs(a), children: n.map((d) => /* @__PURE__ */ e(Bt, { bubble: d, isDraggable: i, onClick: s }, d.guid)) });
+    d.nodes(p), pt(d, t, a), i && setTimeout(() => {
+      gt(d);
+    }, 0), o([...p]);
+  }, [t, a, i, m]), /* @__PURE__ */ e("svg", { height: t, style: { overflow: "visible" }, width: Math.abs(a), children: n.map((d) => /* @__PURE__ */ e(Bt, { bubble: d, isDraggable: i, onClick: s }, d.guid)) });
 }, vt = I(xt), At = ({
   isMiniWidget: t = !1,
   onConnectAccountsClick: a,

package/dist/debts/index.es.js

@@ -1,19 +1,19 @@
-import { jsx as e, jsxs as s, Fragment as L } from "react/jsx-runtime";
+import { jsx as e, jsxs as s, Fragment as $ } from "react/jsx-runtime";
 import x from "react";
-import { observer as S } from "mobx-react-lite";
+import { observer as D } from "mobx-react-lite";
 import g from "@mui/material/Stack";
-import { useTheme as j, Card as be, Stack as _, Box as O } from "@mui/material";
+import { useTheme as X, Card as be, Stack as y, Box as G } from "@mui/material";
 import { Text as l, H3 as ve, InstitutionLogo as De, Icon as ee } from "@mxenabled/mxui";
 import { intervalToDuration as Te, formatDuration as Ae } from "date-fns";
 import { addMonths as le } from "date-fns/addMonths";
 import { fromUnixTime as se } from "date-fns/fromUnixTime";
 import { getUnixTime as ce } from "date-fns/getUnixTime";
-import { D as M, M as Ee, I as Ie } from "../DebtsStore-nxnF_bZi.mjs";
+import { D as B, M as Ee, I as Ie } from "../DebtsStore-nxnF_bZi.mjs";
 import { a as Fr } from "../DebtsStore-nxnF_bZi.mjs";
-import { f as P, a as Be } from "../NumberFormatting-CtWHhyBX.mjs";
+import { f as M, a as Be } from "../NumberFormatting-CtWHhyBX.mjs";
 import { f as K, D as U } from "../Dialog-CWW597AF.mjs";
-import { G as Me, x as q, u as C, l as z, g as k, d as Z, b as Pe } from "../hooks-CE2TKk4a.mjs";
-import { u as X } from "../useScreenSize-B6JyS_Lj.mjs";
+import { G as Me, x as q, u as C, l as V, g as k, d as Z, b as Pe } from "../hooks-CE2TKk4a.mjs";
+import { u as Y } from "../useScreenSize-B6JyS_Lj.mjs";
 import { D as te } from "../Drawer-kEE73B87.mjs";
 import { b as A } from "../Localization-2MODESHW.mjs";
 import { A as ke, u as Ne } from "../AccountDetailsHeader-eh13XhXN.mjs";
@@ -27,7 +27,7 @@ import { A as T, W as Oe } from "../WidgetContainer-hsbxZmZB.mjs";
 import de from "@mui/material/Tab";
 import We from "@mui/material/Tabs";
 import _e from "@mui/material/List";
-import W from "@mui/material/Divider";
+import j from "@mui/material/Divider";
 import { M as Ge, I as je, O as ze } from "../OriginalBalanceAction-CEuIYsc_.mjs";
 import Xe from "@mui/material/TextField";
 import { L as J } from "../ListItemAction-DSrYDGAP.mjs";
@@ -38,7 +38,7 @@ import he from "@mui/material/Paper";
 import { Error as Ve, CheckCircle as ye } from "@mxenabled/mx-icons";
 import { T as ue } from "../TabContentContainer-j01JYR_7.mjs";
 import { DataGridPro as Ye } from "@mui/x-data-grid-pro";
-import { H as G } from "../HeaderCell-DjuifqHJ.mjs";
+import { H as z } from "../HeaderCell-DjuifqHJ.mjs";
 import { f as Ke } from "../ConnectDrawer-SHjB2fpB.mjs";
 import fe from "@mui/material/Button";
 import Ue from "@mui/material/IconButton";
@@ -55,12 +55,12 @@ const Qe = (a, n = 0, r = 0) => {
   const i = [];
   if (r === 0) {
     for (let d = 0; d < a; d++) {
-      const c = n - t * (d + 1), h = n - t * d, m = c >= 0 ? t : h;
+      const c = n - t * (d + 1), m = n - t * d, b = c >= 0 ? t : m;
       i.push({
         balance: c >= 0 ? c : 0,
         interest: r,
-        payment: m,
-        principal: m,
+        payment: b,
+        principal: b,
         timestamp: ce(
           le(
             se(o),
@@ -75,12 +75,12 @@ const Qe = (a, n = 0, r = 0) => {
   }
   const p = r / 1200;
   for (let d = 0; d < a; d++) {
-    const c = ce(le(se(o), d + 1)), h = Math.pow(1 + p, d), m = n * h - t * ((h - 1) / p), y = Math.pow(1 + p, d + 1), f = n * y - t * ((y - 1) / p), v = t + Math.min(f, 0), E = m * p;
+    const c = ce(le(se(o), d + 1)), m = Math.pow(1 + p, d), b = n * m - t * ((m - 1) / p), f = Math.pow(1 + p, d + 1), u = n * f - t * ((f - 1) / p), S = t + Math.min(u, 0), P = b * p;
     i.push({
-      balance: Math.max(0, f),
-      interest: E,
-      payment: v,
-      principal: v - E,
+      balance: Math.max(0, u),
+      interest: P,
+      payment: S,
+      principal: S - P,
       timestamp: c
     });
   }
@@ -104,16 +104,16 @@ const Qe = (a, n = 0, r = 0) => {
     [[], []]
   );
   switch (n) {
-    case M.FASTEST_PAYOFF_FIRST:
+    case B.FASTEST_PAYOFF_FIRST:
       r.sort((o, i) => (o.minimumFinalPayment ?? 0) - (i.minimumFinalPayment ?? 0));
       break;
-    case M.HIGHEST_INTEREST:
+    case B.HIGHEST_INTEREST:
       r.sort((o, i) => (i.interest_rate ?? 0) - (o.interest_rate ?? 0));
       break;
-    case M.LOWEST_BALANCE:
+    case B.LOWEST_BALANCE:
       r.sort((o, i) => o.balance - i.balance);
       break;
-    case M.HIGHEST_BALANCE:
+    case B.HIGHEST_BALANCE:
       r.sort((o, i) => i.balance - o.balance);
       break;
     default:
@@ -122,33 +122,33 @@ const Qe = (a, n = 0, r = 0) => {
   a.splice(0, a.length, ...r, ...t);
 };
 function at(a, n, r = 0) {
-  const t = a.map((m) => ({ ...m })).filter(
-    (m) => m.interest_rate !== void 0 && m.monthly_payment !== void 0 && !m.is_paid_off
+  const t = a.map((b) => ({ ...b })).filter(
+    (b) => b.interest_rate !== void 0 && b.monthly_payment !== void 0 && !b.is_paid_off
   );
   xe(t, n);
   let o = 0, i = 0;
   const p = /* @__PURE__ */ new Date(), d = /* @__PURE__ */ new Date();
-  for (; t.some((m) => m.balance >= 0.01 && !m.is_impossible); ) {
-    let m = !1;
-    for (const [y, f] of t.entries()) {
-      if (f.balance <= 0.01 || f.is_impossible) continue;
-      const E = (f.interest_rate ?? 0) / 100 / 12, D = f.balance * E;
-      let u = f.monthly_payment ?? 0;
-      y === 0 && r && (u += r), f.balance += D;
-      const I = Math.min(f.balance, u + i);
-      if (I <= D) {
-        f.is_impossible = !0;
+  for (; t.some((b) => b.balance >= 0.01 && !b.is_impossible); ) {
+    let b = !1;
+    for (const [f, u] of t.entries()) {
+      if (u.balance <= 0.01 || u.is_impossible) continue;
+      const P = (u.interest_rate ?? 0) / 100 / 12, E = u.balance * P;
+      let _ = u.monthly_payment ?? 0;
+      f === 0 && r && (_ += r), u.balance += E;
+      const v = Math.min(u.balance, _ + i);
+      if (v <= E) {
+        u.is_impossible = !0;
         continue;
       }
-      f.balance -= I, f.balance = f.balance < 0.01 ? 0 : f.balance, o += D, f.balance <= 0 && (i += u), I > 0 && (m = !0);
+      u.balance -= v, u.balance = u.balance < 0.01 ? 0 : u.balance, o += E, u.balance <= 0 && (i += _), v > 0 && (b = !0);
     }
-    m && d.setMonth(d.getMonth() + 1);
+    b && d.setMonth(d.getMonth() + 1);
   }
-  const c = t.some((m) => m.is_impossible && m.balance > 0), h = Te({ start: p, end: d });
+  const c = t.some((b) => b.is_impossible && b.balance > 0), m = Te({ start: p, end: d });
   return {
-    payoffSavings: c ? "N/A" : P(o, "0,0.00"),
+    payoffSavings: c ? "N/A" : M(o, "0,0.00"),
     payoffDate: c ? "Never" : K(d, U.MONTH_YEAR),
-    payoffDuration: c ? "Stagnant" : Ae(h, { format: ["years", "months"] }) || "0 months"
+    payoffDuration: c ? "Stagnant" : Ae(m, { format: ["years", "months"] }) || "0 months"
   };
 }
 const R = () => {
@@ -156,9 +156,9 @@ const R = () => {
     throw new Error("useCateUiStore() must be used within the GlobalDataContext");
   return q().uiStore;
 }, nt = ({ debts: a, onClickCta: n, sx: r }) => {
-  const t = j(), { isMobile: o } = X(), { debts: i } = C(), { selectedDebtPriority: p } = R(), { monthlyCashFlowProfile: d } = z(), { payoffDate: c, payoffSavings: h, payoffDuration: m } = x.useMemo(() => {
-    const y = d?.extra_payment ?? 0;
-    return at(a, p, y);
+  const t = X(), { isMobile: o } = Y(), { debts: i } = C(), { selectedDebtPriority: p } = R(), { monthlyCashFlowProfile: d } = V(), { payoffDate: c, payoffSavings: m, payoffDuration: b } = x.useMemo(() => {
+    const f = d?.extra_payment ?? 0;
+    return at(a, p, f);
   }, [a, p, d]);
   return /* @__PURE__ */ e(
     be,
@@ -169,9 +169,9 @@ const R = () => {
         minWidth: "186px",
         ...r
       },
-      children: /* @__PURE__ */ s(_, { sx: { gap: "12px", p: "16px" }, children: [
+      children: /* @__PURE__ */ s(y, { sx: { gap: "12px", p: "16px" }, children: [
         /* @__PURE__ */ s(
-          _,
+          y,
           {
             gap: o ? "4px" : "0",
             sx: {
@@ -185,12 +185,12 @@ const R = () => {
             ]
           }
         ),
-        /* @__PURE__ */ s(_, { gap: o ? "4px" : "0", children: [
-          /* @__PURE__ */ e(l, { bold: !0, variant: "Small", children: h }),
+        /* @__PURE__ */ s(y, { gap: o ? "4px" : "0", children: [
+          /* @__PURE__ */ e(l, { bold: !0, variant: "Small", children: m }),
           /* @__PURE__ */ e(l, { sx: { whiteSpace: "normal" }, variant: "XSmall", children: i.snowball_card_amount_description })
         ] }),
-        /* @__PURE__ */ s(_, { gap: o ? "4px" : "0", children: [
-          /* @__PURE__ */ e(l, { bold: !0, variant: "Small", children: m }),
+        /* @__PURE__ */ s(y, { gap: o ? "4px" : "0", children: [
+          /* @__PURE__ */ e(l, { bold: !0, variant: "Small", children: b }),
           /* @__PURE__ */ e(l, { variant: "XSmall", children: i.snowball_card_duration_description })
         ] }),
         /* @__PURE__ */ e(
@@ -207,8 +207,8 @@ const R = () => {
       ] })
     }
   );
-}, ot = S(nt), it = ({ isOpen: a, onClose: n }) => {
-  const r = j(), { debts: t } = C(), [o, i] = x.useState(!1);
+}, ot = D(nt), it = ({ isOpen: a, onClose: n }) => {
+  const r = X(), { debts: t } = C(), [o, i] = x.useState(!1);
   return /* @__PURE__ */ e(
     te,
     {
@@ -216,9 +216,9 @@ const R = () => {
       isOpen: a,
       onClose: n,
       title: t.snowball_drawer_title,
-      children: /* @__PURE__ */ s(_, { bgcolor: r.palette.background.default, height: "100%", children: [
-        /* @__PURE__ */ s(_, { alignItems: "center", px: 24, py: 24, children: [
-          /* @__PURE__ */ s(_, { alignItems: "center", pb: 24, children: [
+      children: /* @__PURE__ */ s(y, { bgcolor: r.palette.background.default, height: "100%", children: [
+        /* @__PURE__ */ s(y, { alignItems: "center", px: 24, py: 24, children: [
+          /* @__PURE__ */ s(y, { alignItems: "center", pb: 24, children: [
             /* @__PURE__ */ e(l, { mb: 12, variant: "H3", children: t.snowball_drawer_subtitle }),
             /* @__PURE__ */ e(l, { color: r.palette.secondary.main, variant: "Small", children: t.snowball_drawer_amount_description }),
             /* @__PURE__ */ e(l, { variant: "H1", children: t.snowball_drawer_savings }),
@@ -249,7 +249,7 @@ const R = () => {
             )
           ] })
         ] }),
-        /* @__PURE__ */ s(_, { children: [
+        /* @__PURE__ */ s(y, { children: [
           /* @__PURE__ */ e(
             l,
             {
@@ -260,14 +260,14 @@ const R = () => {
               children: t.snowball_drawer_disclaimer
             }
           ),
-          /* @__PURE__ */ s(_, { flexDirection: "row", justifyContent: "space-between", sx: { pt: 12, px: 24, pb: 8 }, children: [
+          /* @__PURE__ */ s(y, { flexDirection: "row", justifyContent: "space-between", sx: { pt: 12, px: 24, pb: 8 }, children: [
             /* @__PURE__ */ e(l, { bold: !0, variant: "XSmall", children: A(t.snowball_drawer_month_header, 1) }),
             /* @__PURE__ */ e(l, { bold: !0, variant: "XSmall", children: t.snowball_drawer_payment_header })
           ] }),
-          /* @__PURE__ */ s(_, { bgcolor: r.palette.background.paper, mb: 24, children: [
-            /* @__PURE__ */ s(_, { alignItems: "center", flexDirection: "row", pl: 24, children: [
+          /* @__PURE__ */ s(y, { bgcolor: r.palette.background.paper, mb: 24, children: [
+            /* @__PURE__ */ s(y, { alignItems: "center", flexDirection: "row", pl: 24, children: [
               /* @__PURE__ */ e(
-                O,
+                G,
                 {
                   sx: {
                     display: "flex",
@@ -283,7 +283,7 @@ const R = () => {
                 }
               ),
               /* @__PURE__ */ s(
-                _,
+                y,
                 {
                   sx: {
                     borderBottom: `1px solid ${r.palette.border.light}`,
@@ -293,7 +293,7 @@ const R = () => {
                     pr: 24
                   },
                   children: [
-                    /* @__PURE__ */ s(_, { flexGrow: 1, children: [
+                    /* @__PURE__ */ s(y, { flexGrow: 1, children: [
                       /* @__PURE__ */ e(l, { variant: "Body", children: A(t.snowball_drawer_debt_label, "A") }),
                       /* @__PURE__ */ s(l, { color: r.palette.secondary.main, variant: "XSmall", children: [
                         A(
@@ -304,7 +304,7 @@ const R = () => {
                         t.snowball_drawer_rollover_explainer_pt2
                       ] })
                     ] }),
-                    /* @__PURE__ */ s(_, { children: [
+                    /* @__PURE__ */ s(y, { children: [
                       /* @__PURE__ */ e(l, { variant: "Body", children: "$100.00" }),
                       /* @__PURE__ */ e(
                         l,
@@ -321,9 +321,9 @@ const R = () => {
                 }
               )
             ] }),
-            /* @__PURE__ */ s(_, { alignItems: "center", flexDirection: "row", pl: 24, children: [
+            /* @__PURE__ */ s(y, { alignItems: "center", flexDirection: "row", pl: 24, children: [
               /* @__PURE__ */ e(
-                O,
+                G,
                 {
                   sx: {
                     width: 20,
@@ -335,7 +335,7 @@ const R = () => {
                 }
               ),
               /* @__PURE__ */ s(
-                _,
+                y,
                 {
                   sx: {
                     borderBottom: `1px solid ${r.palette.border.light}`,
@@ -351,9 +351,9 @@ const R = () => {
                 }
               )
             ] }),
-            /* @__PURE__ */ s(_, { alignItems: "center", flexDirection: "row", pl: 24, py: 14, children: [
+            /* @__PURE__ */ s(y, { alignItems: "center", flexDirection: "row", pl: 24, py: 14, children: [
               /* @__PURE__ */ e(
-                O,
+                G,
                 {
                   sx: {
                     width: 20,
@@ -364,13 +364,13 @@ const R = () => {
                   }
                 }
               ),
-              /* @__PURE__ */ s(_, { flexDirection: "row", flexGrow: 1, pr: 24, children: [
+              /* @__PURE__ */ s(y, { flexDirection: "row", flexGrow: 1, pr: 24, children: [
                 /* @__PURE__ */ e(l, { flexGrow: 1, variant: "Body", children: A(t.snowball_drawer_debt_label, "C") }),
                 /* @__PURE__ */ e(l, { variant: "Body", children: "$1,000.00" })
               ] })
             ] }),
             /* @__PURE__ */ s(
-              _,
+              y,
               {
                 sx: {
                   py: 8,
@@ -387,14 +387,14 @@ const R = () => {
               }
             )
           ] }),
-          /* @__PURE__ */ s(_, { flexDirection: "row", justifyContent: "space-between", sx: { pt: 12, px: 24, pb: 8 }, children: [
+          /* @__PURE__ */ s(y, { flexDirection: "row", justifyContent: "space-between", sx: { pt: 12, px: 24, pb: 8 }, children: [
             /* @__PURE__ */ e(l, { bold: !0, variant: "XSmall", children: A(t.snowball_drawer_month_header, 2) }),
             /* @__PURE__ */ e(l, { bold: !0, variant: "XSmall", children: t.snowball_drawer_payment_header })
           ] }),
-          /* @__PURE__ */ s(_, { bgcolor: r.palette.background.paper, mb: 24, children: [
-            /* @__PURE__ */ s(_, { alignItems: "center", flexDirection: "row", pl: 24, children: [
+          /* @__PURE__ */ s(y, { bgcolor: r.palette.background.paper, mb: 24, children: [
+            /* @__PURE__ */ s(y, { alignItems: "center", flexDirection: "row", pl: 24, children: [
               /* @__PURE__ */ e(
-                O,
+                G,
                 {
                   sx: {
                     display: "flex",
@@ -410,7 +410,7 @@ const R = () => {
                 }
               ),
               /* @__PURE__ */ s(
-                _,
+                y,
                 {
                   sx: {
                     borderBottom: `1px solid ${r.palette.border.light}`,
@@ -420,7 +420,7 @@ const R = () => {
                     pr: 24
                   },
                   children: [
-                    /* @__PURE__ */ s(_, { flexGrow: 1, children: [
+                    /* @__PURE__ */ s(y, { flexGrow: 1, children: [
                       /* @__PURE__ */ e(l, { variant: "Body", children: A(t.snowball_drawer_debt_label, "B") }),
                       /* @__PURE__ */ s(l, { color: r.palette.secondary.main, variant: "XSmall", children: [
                         A(
@@ -431,7 +431,7 @@ const R = () => {
                         t.snowball_drawer_rollover_explainer_pt2
                       ] })
                     ] }),
-                    /* @__PURE__ */ s(_, { children: [
+                    /* @__PURE__ */ s(y, { children: [
                       /* @__PURE__ */ e(l, { variant: "Body", children: "$500.00" }),
                       /* @__PURE__ */ e(
                         l,
@@ -448,9 +448,9 @@ const R = () => {
                 }
               )
             ] }),
-            /* @__PURE__ */ s(_, { alignItems: "center", flexDirection: "row", pl: 24, children: [
+            /* @__PURE__ */ s(y, { alignItems: "center", flexDirection: "row", pl: 24, children: [
               /* @__PURE__ */ e(
-                O,
+                G,
                 {
                   sx: {
                     width: 20,
@@ -462,7 +462,7 @@ const R = () => {
                 }
               ),
               /* @__PURE__ */ s(
-                _,
+                y,
                 {
                   sx: {
                     flexDirection: "row",
@@ -478,7 +478,7 @@ const R = () => {
               )
             ] }),
             /* @__PURE__ */ s(
-              _,
+              y,
               {
                 sx: {
                   py: 8,
@@ -495,14 +495,14 @@ const R = () => {
               }
             )
           ] }),
-          /* @__PURE__ */ s(_, { flexDirection: "row", justifyContent: "space-between", sx: { pt: 12, px: 24, pb: 8 }, children: [
+          /* @__PURE__ */ s(y, { flexDirection: "row", justifyContent: "space-between", sx: { pt: 12, px: 24, pb: 8 }, children: [
             /* @__PURE__ */ e(l, { bold: !0, variant: "XSmall", children: A(t.snowball_drawer_month_header, 3) }),
             /* @__PURE__ */ e(l, { bold: !0, variant: "XSmall", children: t.snowball_drawer_payment_header })
           ] }),
-          /* @__PURE__ */ s(_, { bgcolor: r.palette.background.paper, mb: 24, children: [
-            /* @__PURE__ */ s(_, { alignItems: "center", flexDirection: "row", pl: 24, children: [
+          /* @__PURE__ */ s(y, { bgcolor: r.palette.background.paper, mb: 24, children: [
+            /* @__PURE__ */ s(y, { alignItems: "center", flexDirection: "row", pl: 24, children: [
               /* @__PURE__ */ e(
-                O,
+                G,
                 {
                   sx: {
                     display: "flex",
@@ -518,7 +518,7 @@ const R = () => {
                 }
               ),
               /* @__PURE__ */ s(
-                _,
+                y,
                 {
                   sx: {
                     alignItems: "center",
@@ -528,8 +528,8 @@ const R = () => {
                     pr: 24
                   },
                   children: [
-                    /* @__PURE__ */ e(_, { flexGrow: 1, children: /* @__PURE__ */ e(l, { variant: "Body", children: A(t.snowball_drawer_debt_label, "C") }) }),
-                    /* @__PURE__ */ s(_, { children: [
+                    /* @__PURE__ */ e(y, { flexGrow: 1, children: /* @__PURE__ */ e(l, { variant: "Body", children: A(t.snowball_drawer_debt_label, "C") }) }),
+                    /* @__PURE__ */ s(y, { children: [
                       /* @__PURE__ */ e(l, { variant: "Body", children: "$1,500.00" }),
                       /* @__PURE__ */ e(
                         l,
@@ -547,7 +547,7 @@ const R = () => {
               )
             ] }),
             /* @__PURE__ */ s(
-              _,
+              y,
               {
                 sx: {
                   py: 8,
@@ -568,7 +568,7 @@ const R = () => {
       ] })
     }
   );
-}, lt = S(it), st = "#FF7B08";
+}, lt = D(it), st = "#FF7B08";
 function ct(a, n) {
   const [r, t, o] = a.replace(/^#/, "").match(/.{1,2}/g).map((p) => parseInt(p, 16)), i = [
     Math.max(0, Math.min(255, Math.round(r * n))),
@@ -586,31 +586,31 @@ const ge = ({
   onClickArea: i,
   onHoverArea: p
 }) => {
-  const d = He(), { onEvent: c } = k(), h = t.filter((b) => !b.is_impossible), m = [
+  const d = He(), { onEvent: c } = k(), m = t.filter((h) => !h.is_impossible), b = [
     ...new Set(
-      h.flatMap((b) => b.dataset.map((w) => new Date(w.x).getTime()))
+      m.flatMap((h) => h.dataset.map((w) => new Date(w.x).getTime()))
     )
-  ].sort((b, w) => b - w).map((b) => new Date(b)), y = h.map((b) => {
-    const w = new Map(b.dataset.map((F) => [new Date(F.x).getTime(), F.y]));
-    let B = w.get(m[0].getTime()) ?? 0;
-    const N = m.map((F) => {
-      const $ = w.get(F.getTime()) ?? B;
-      return B = $, { x: F, y: $ };
+  ].sort((h, w) => h - w).map((h) => new Date(h)), f = m.map((h) => {
+    const w = new Map(h.dataset.map((F) => [new Date(F.x).getTime(), F.y]));
+    let I = w.get(b[0].getTime()) ?? 0;
+    const N = b.map((F) => {
+      const O = w.get(F.getTime()) ?? I;
+      return I = O, { x: F, y: O };
     });
-    return { ...b, dataset: N };
-  }), f = y.reduce(
-    (b, w) => b + (w.dataset[0]?.y ?? 0),
+    return { ...h, dataset: N };
+  }), u = f.reduce(
+    (h, w) => h + (w.dataset[0]?.y ?? 0),
     0
-  ), v = m.map((b, w) => {
-    const B = w / (m.length - 1), N = f * (1 - B);
-    return { x: b, y: N };
-  }), E = Math.ceil(f / 100) * 100, D = m, u = y.map((b, w) => {
-    const B = 1 - w / y.length * 0.5, N = ct(st, B);
+  ), S = b.map((h, w) => {
+    const I = w / (b.length - 1), N = u * (1 - I);
+    return { x: h, y: N };
+  }), P = Math.ceil(u / 100) * 100, E = b, _ = f.map((h, w) => {
+    const I = 1 - w / f.length * 0.5, N = ct(st, I);
     return {
       id: `debt-${w}`,
-      guid: b.guid,
-      label: b.name,
-      data: b.dataset.map((F) => F.y),
+      guid: h.guid,
+      label: h.name,
+      data: h.dataset.map((F) => F.y),
       color: N,
       curve: "linear",
       type: "line",
@@ -619,10 +619,10 @@ const ge = ({
       showMark: !1
     };
   });
-  u.push({
+  _.push({
     id: "payoff-line",
     label: "Payoff Line",
-    data: v.map((b) => b.y),
+    data: S.map((h) => h.y),
     color: d.palette.grey[700],
     curve: "linear",
     type: "line",
@@ -630,7 +630,7 @@ const ge = ({
     showMark: !1,
     disableHighlight: !0
   });
-  const I = (b) => u.findIndex((w) => w?.guid === b);
+  const v = (h) => _.findIndex((w) => w?.guid === h);
   return /* @__PURE__ */ e(
     re,
     {
@@ -652,16 +652,16 @@ const ge = ({
           axisHighlight: { x: "none" },
           disableLineItemHighlight: !0,
           height: n,
-          onAreaClick: (b, w) => {
+          onAreaClick: (h, w) => {
             i?.();
-            const B = u.find((N) => N.id === w.seriesId);
-            c(T.DEBTS_CLICK_CHART_AREA, { account_guid: B?.guid });
+            const I = _.find((N) => N.id === w.seriesId);
+            c(T.DEBTS_CLICK_CHART_AREA, { account_guid: I?.guid });
           },
-          onHighlightChange: (b) => {
-            const w = u.find((B) => B.id === b?.seriesId)?.guid;
+          onHighlightChange: (h) => {
+            const w = _.find((I) => I.id === h?.seriesId)?.guid;
             p?.(w ?? "");
           },
-          series: u,
+          series: _,
           skipAnimation: !0,
           slotProps: {
             legend: {
@@ -685,10 +685,10 @@ const ge = ({
               strokeDasharray: "10 5",
               strokeWidth: 1
             },
-            [`& .MuiLineElement-series-debt-${I(o ?? "0")}`]: {
+            [`& .MuiLineElement-series-debt-${v(o ?? "0")}`]: {
               opacity: 1
             },
-            [`& .MuiAreaElement-series-debt-${I(o ?? "0")}`]: {
+            [`& .MuiAreaElement-series-debt-${v(o ?? "0")}`]: {
               opacity: 1
             },
             "& .MuiChartsAxis-tickLabel > tspan": {
@@ -700,19 +700,19 @@ const ge = ({
           width: r,
           xAxis: [
             {
-              data: D,
+              data: E,
               scaleType: "time",
-              min: m[0],
+              min: b[0],
               disableTicks: !0,
-              valueFormatter: (b) => K(b, U.MONTH_SHORT_YEAR)
+              valueFormatter: (h) => K(h, U.MONTH_SHORT_YEAR)
             }
           ],
           yAxis: [
             {
               min: 0,
-              max: E,
+              max: P,
               disableTicks: !0,
-              valueFormatter: (b) => P(b, "0a")
+              valueFormatter: (h) => M(h, "0a")
             }
           ]
         }
@@ -720,8 +720,8 @@ const ge = ({
     }
   );
 }, dt = () => {
-  const a = j(), { debts: n } = C(), { selectedDebtChartData: r } = R();
-  return /* @__PURE__ */ s(L, { children: [
+  const a = X(), { debts: n } = C(), { selectedDebtChartData: r } = R();
+  return /* @__PURE__ */ s($, { children: [
     /* @__PURE__ */ s(
       Fe,
       {
@@ -746,8 +746,8 @@ const ge = ({
       }
     )
   ] });
-}, pt = S(dt), mt = () => {
-  const a = j(), { onEvent: n } = k(), { debts: r } = C(), { selectedDebtChartData: t, showCompleted: o, showError: i } = R();
+}, pt = D(dt), mt = () => {
+  const a = X(), { onEvent: n } = k(), { debts: r } = C(), { selectedDebtChartData: t, showCompleted: o, showError: i } = R();
   return x.useEffect(() => n(T.DEBT_SCHEDULE_VIEW), []), /* @__PURE__ */ e(_e, { children: i || o ? /* @__PURE__ */ e(
     l,
     {
@@ -757,7 +757,7 @@ const ge = ({
       variant: "Small",
       children: i ? r.schedule_error_message : r.schedule_complete_message
     }
-  ) : /* @__PURE__ */ s(L, { children: [
+  ) : /* @__PURE__ */ s($, { children: [
     /* @__PURE__ */ s(g, { flexDirection: "row", justifyContent: "space-between", sx: { pt: 12, px: 24, pb: 8 }, children: [
       /* @__PURE__ */ e(l, { bold: !0, variant: "XSmall", children: r.schedule_month_heading }),
       /* @__PURE__ */ e(l, { bold: !0, variant: "XSmall", children: r.schedule_amount_heading })
@@ -778,7 +778,7 @@ const ge = ({
             /* @__PURE__ */ e(l, { color: a.palette.secondary.main, variant: "XSmall", children: r.schedule_month_label })
           ] }),
           /* @__PURE__ */ s(g, { children: [
-            /* @__PURE__ */ e(l, { bold: !0, variant: "Body", children: P(d, "0,0.00") }),
+            /* @__PURE__ */ e(l, { bold: !0, variant: "Body", children: M(d, "0,0.00") }),
             /* @__PURE__ */ e(
               l,
               {
@@ -786,7 +786,7 @@ const ge = ({
                 color: a.palette.success.main,
                 textAlign: "end",
                 variant: "Tiny",
-                children: `+${P(c, "0,0")}`
+                children: `+${M(c, "0,0")}`
               }
             )
           ] })
@@ -810,7 +810,7 @@ const ge = ({
       }
     ) })
   ] }) });
-}, ht = S(mt), ut = S(({ debt: a }) => {
+}, ht = D(mt), ut = D(({ debt: a }) => {
   const { debts: n } = C(), { updateAccount: r } = Z(), { onEvent: t } = k(), [o, i] = x.useState(a.interest_rate ?? 0), p = o < 0, d = async () => {
     await r({ ...a.account, interest_rate: o }), a.interest_rate = o, t(T.DEBTS_SAVE_RATE_ACTION, { account_guid: a.guid });
   }, c = () => {
@@ -833,14 +833,14 @@ const ge = ({
         {
           error: p,
           fullWidth: !0,
-          onChange: (h) => i(isNaN(parseFloat(h.target.value)) ? 0 : parseFloat(h.target.value)),
+          onChange: (m) => i(isNaN(parseFloat(m.target.value)) ? 0 : parseFloat(m.target.value)),
           type: "number",
           value: o
         }
       )
     }
   );
-}), bt = S(({ debt: a }) => {
+}), bt = D(({ debt: a }) => {
   const { debts: n } = C(), { updateAccount: r } = Z(), { onEvent: t } = k(), [o, i] = x.useState(a.monthly_payment ?? 0), p = o < 0 || o > 9999999999e-2, d = async () => {
     await r({ ...a.account, minimum_payment: o }), a.monthly_payment = o, t(T.DEBTS_SAVE_PAYMENT_ACTION, { account_guid: a.guid });
   }, c = () => {
@@ -856,7 +856,7 @@ const ge = ({
       onCancel: c,
       onSave: d,
       primaryText: n.details_monthly_payment,
-      secondaryText: P(a.monthly_payment, "0,0"),
+      secondaryText: M(a.monthly_payment, "0,0"),
       zeroStateText: a.monthly_payment ? void 0 : n.add_monthly_payment,
       children: /* @__PURE__ */ e(
         ae,
@@ -866,13 +866,13 @@ const ge = ({
           error: p,
           fullWidth: !0,
           minAmount: 0,
-          setAmount: (h) => i(isNaN(Number(h)) ? o : Number(h)),
+          setAmount: (m) => i(isNaN(Number(m)) ? o : Number(m)),
           sx: { ".MuiTypography-Body": { p: 0 } }
         }
       )
     }
   );
-}), _t = S(({ debt: a }) => {
+}), _t = D(({ debt: a }) => {
   const { debts: n } = C(), { updateAccount: r } = Z(), { onEvent: t } = k(), [o, i] = x.useState(a.original_balance ?? 0), p = o < 0 || o > 9999999999e-2, d = async () => {
     await r({ ...a.account, original_balance: o }), a.original_balance = o, t(T.DEBTS_SAVE_BALANCE_ACTION, { account_guid: a.guid });
   }, c = () => {
@@ -888,7 +888,7 @@ const ge = ({
       onCancel: c,
       onSave: d,
       primaryText: n.details_original_balance,
-      secondaryText: P(a.original_balance, "0,0"),
+      secondaryText: M(a.original_balance, "0,0"),
       zeroStateText: a.original_balance ? void 0 : n.add_original_balance,
       children: /* @__PURE__ */ e(
         ae,
@@ -898,7 +898,7 @@ const ge = ({
           error: p,
           fullWidth: !0,
           minAmount: 0,
-          setAmount: (h) => i(isNaN(Number(h)) ? o : Number(h)),
+          setAmount: (m) => i(isNaN(Number(m)) ? o : Number(m)),
           sx: { ".MuiTypography-Body": { p: 0 } }
         }
       )
@@ -907,28 +907,28 @@ const ge = ({
 }), yt = () => {
   const { onEvent: a } = k(), { selectedDebtChartData: n } = R();
   return x.useEffect(() => a(T.DEBT_DETAILS_VIEW), []), /* @__PURE__ */ s(g, { bgcolor: "background.paper", children: [
-    n?.goal && /* @__PURE__ */ s(L, { children: [
+    n?.goal && /* @__PURE__ */ s($, { children: [
       /* @__PURE__ */ e(Ge, { goal: n.goal }),
-      /* @__PURE__ */ e(W, {}),
+      /* @__PURE__ */ e(j, {}),
       /* @__PURE__ */ e(je, { goal: n.goal }),
-      /* @__PURE__ */ e(W, {}),
+      /* @__PURE__ */ e(j, {}),
       /* @__PURE__ */ e(ze, { goal: n.goal }),
-      /* @__PURE__ */ e(W, {})
+      /* @__PURE__ */ e(j, {})
     ] }),
-    !n?.goal && n?.account && /* @__PURE__ */ s(L, { children: [
+    !n?.goal && n?.account && /* @__PURE__ */ s($, { children: [
       /* @__PURE__ */ e(bt, { debt: n }),
-      /* @__PURE__ */ e(W, {}),
+      /* @__PURE__ */ e(j, {}),
       /* @__PURE__ */ e(ut, { debt: n }),
-      /* @__PURE__ */ e(W, {}),
+      /* @__PURE__ */ e(j, {}),
       /* @__PURE__ */ e(_t, { debt: n }),
-      /* @__PURE__ */ e(W, {})
+      /* @__PURE__ */ e(j, {})
     ] })
   ] });
-}, ft = S(yt), xt = ({ setTabValue: a, sx: n }) => {
+}, ft = D(yt), xt = ({ setTabValue: a, sx: n }) => {
   const { debts: r } = C(), { showError: t, showCompleted: o } = R();
   return x.useEffect(() => {
     t && a(1);
-  }, [t]), !t && !o ? /* @__PURE__ */ e(L, {}) : /* @__PURE__ */ s(g, { gap: 16, children: [
+  }, [t]), !t && !o ? /* @__PURE__ */ e($, {}) : /* @__PURE__ */ s(g, { gap: 16, children: [
     /* @__PURE__ */ e(he, { sx: { my: 16, mx: 24, ...n }, children: /* @__PURE__ */ s(
       pe,
       {
@@ -953,7 +953,7 @@ const ge = ({
     t && /* @__PURE__ */ e(he, { sx: { mb: 16, mt: 100, mx: 24, ...n }, children: /* @__PURE__ */ s(
       pe,
       {
-        icon: /* @__PURE__ */ e(L, {}),
+        icon: /* @__PURE__ */ e($, {}),
         severity: "error",
         sx: {
           borderRadius: 2,
@@ -969,9 +969,9 @@ const ge = ({
       }
     ) })
   ] });
-}, gt = S(xt), wt = () => {
+}, gt = D(xt), wt = () => {
   const { debts: a } = C(), { showError: n, showCompleted: r } = R(), [t, o] = x.useState(0);
-  return /* @__PURE__ */ s(L, { children: [
+  return /* @__PURE__ */ s($, { children: [
     (n || r) && /* @__PURE__ */ e(gt, { setTabValue: o, sx: { mt: -24 } }),
     /* @__PURE__ */ s(
       We,
@@ -1005,8 +1005,8 @@ const ge = ({
     /* @__PURE__ */ e(ue, { index: 0, name: "debt-schedule", value: t, children: /* @__PURE__ */ e(ht, {}) }),
     /* @__PURE__ */ e(ue, { index: 1, name: "debt-details", value: t, children: /* @__PURE__ */ e(ft, {}) })
   ] });
-}, Ct = S(wt), St = ({ isOpen: a, onClose: n }) => {
-  const { debts: r } = C(), { showError: t, showCompleted: o } = R(), i = t || o ? /* @__PURE__ */ e(L, {}) : /* @__PURE__ */ e(pt, {});
+}, Ct = D(wt), St = ({ isOpen: a, onClose: n }) => {
+  const { debts: r } = C(), { showError: t, showCompleted: o } = R(), i = t || o ? /* @__PURE__ */ e($, {}) : /* @__PURE__ */ e(pt, {});
   return /* @__PURE__ */ e(
     te,
     {
@@ -1020,8 +1020,8 @@ const ge = ({
       ] })
     }
   );
-}, vt = S(() => {
-  const { debts: a } = C(), { monthlyCashFlowProfile: n, updateMonthlyCashFlowProfile: r } = z(), { onEvent: t } = k(), [o, i] = x.useState(n?.extra_payment ?? 0), p = o < 0 || o > 9999999999e-2, d = async () => {
+}, vt = D(() => {
+  const { debts: a } = C(), { monthlyCashFlowProfile: n, updateMonthlyCashFlowProfile: r } = V(), { onEvent: t } = k(), [o, i] = x.useState(n?.extra_payment ?? 0), p = o < 0 || o > 9999999999e-2, d = async () => {
     n && (await r({ ...n, extra_payment: o }), n.extra_payment = o, t(T.DEBTS_SAVE_PAYDOWN_ACTION, {
       user_guid: n?.user_guid
     }));
@@ -1038,7 +1038,7 @@ const ge = ({
       onCancel: c,
       onSave: d,
       primaryText: a.paydown_drawer_extra_payment,
-      secondaryText: P(n?.extra_payment, "0,0"),
+      secondaryText: M(n?.extra_payment, "0,0"),
       zeroStateText: n?.extra_payment ? void 0 : a.add_extra_payment,
       children: /* @__PURE__ */ e(
         ae,
@@ -1048,19 +1048,19 @@ const ge = ({
           error: p,
           fullWidth: !0,
           minAmount: 0,
-          setAmount: (h) => i(isNaN(Number(h)) ? o : Number(h)),
+          setAmount: (m) => i(isNaN(Number(m)) ? o : Number(m)),
           sx: { ".MuiTypography-Body": { p: 0 } }
         }
       )
     }
   );
 }), Dt = () => {
-  const { debts: a } = C(), { totalMonthlyPayments: n } = q(), { monthlyCashFlowProfile: r } = z(), t = n + Number(r?.extra_payment);
+  const { debts: a } = C(), { totalMonthlyPayments: n } = q(), { monthlyCashFlowProfile: r } = V(), t = n + Number(r?.extra_payment);
   return /* @__PURE__ */ s(g, { sx: { backgroundColor: "background.default", height: "100%" }, children: [
     /* @__PURE__ */ s(g, { p: 24, children: [
       /* @__PURE__ */ s(g, { alignItems: "center", gap: 4, mb: 24, children: [
         /* @__PURE__ */ e(l, { variant: "Body", children: a.paydown_drawer_mimimum_label }),
-        /* @__PURE__ */ e(l, { bold: !0, variant: "H1", children: P(n, "0,0") }),
+        /* @__PURE__ */ e(l, { bold: !0, variant: "H1", children: M(n, "0,0") }),
         /* @__PURE__ */ e(l, { textAlign: "center", truncate: !1, variant: "Small", width: 208, children: a.paydown_drawer_minimum_info })
       ] }),
       /* @__PURE__ */ s(g, { children: [
@@ -1071,10 +1071,10 @@ const ge = ({
     /* @__PURE__ */ e(g, { sx: { backgroundColor: "background.paper" }, children: /* @__PURE__ */ e(vt, {}) }),
     /* @__PURE__ */ e(g, { flexDirection: "row-reverse", px: 24, py: 12, children: /* @__PURE__ */ s(g, { gap: 4, children: [
       /* @__PURE__ */ e(l, { variant: "Small", children: a.paydown_drawer_total_payment }),
-      /* @__PURE__ */ e(l, { bold: !0, textAlign: "right", variant: "Body", children: P(t, "0,0") })
+      /* @__PURE__ */ e(l, { bold: !0, textAlign: "right", variant: "Body", children: M(t, "0,0") })
     ] }) })
   ] });
-}, Tt = S(Dt), At = ({ isOpen: a, onClose: n }) => {
+}, Tt = D(Dt), At = ({ isOpen: a, onClose: n }) => {
   const { debts: r } = C();
   return /* @__PURE__ */ e(
     te,
@@ -1145,13 +1145,13 @@ const Bt = (a) => {
   onHoverRow: t,
   onClickRow: o
 }) => {
-  const i = j(), { onEvent: p } = k(), { isMobile: d } = X(), { debts: c } = C(), [h, m] = x.useState([
+  const i = X(), { onEvent: p } = k(), { isMobile: d } = Y(), { debts: c } = C(), [m, b] = x.useState([
     { field: "priority", sort: "asc" }
-  ]), y = [
+  ]), f = [
     {
       field: "priority",
       headerName: c.table_column_priority,
-      renderHeader: G,
+      renderHeader: z,
       renderCell: Mt,
       sortComparator: Et,
       sortable: !0,
@@ -1165,7 +1165,7 @@ const Bt = (a) => {
     {
       field: "account",
       headerName: c.table_column_account,
-      renderHeader: G,
+      renderHeader: z,
       renderCell: Pt,
       sortable: !1,
       type: "custom",
@@ -1177,8 +1177,8 @@ const Bt = (a) => {
     {
       field: "balance",
       headerName: c.table_column_balance,
-      renderHeader: G,
-      renderCell: (u) => /* @__PURE__ */ e(l, { color: i.palette.text.primary, variant: "Small", children: P(u.value, "0,0") }),
+      renderHeader: z,
+      renderCell: (_) => /* @__PURE__ */ e(l, { color: i.palette.text.primary, variant: "Small", children: M(_.value, "0,0") }),
       sortable: !0,
       hideSortIcons: d,
       type: "number",
@@ -1190,8 +1190,8 @@ const Bt = (a) => {
     {
       field: "interest_rate",
       headerName: c.table_column_interest_rate,
-      renderHeader: G,
-      renderCell: (u) => /* @__PURE__ */ e(l, { color: i.palette.text.primary, variant: "Small", children: isNaN(u.value) ? "---" : `${Number(u.value).toFixed(2)}%` }),
+      renderHeader: z,
+      renderCell: (_) => /* @__PURE__ */ e(l, { color: i.palette.text.primary, variant: "Small", children: isNaN(_.value) ? "---" : `${Number(_.value).toFixed(2)}%` }),
       sortable: !0,
       hideSortIcons: d,
       type: "number",
@@ -1203,8 +1203,8 @@ const Bt = (a) => {
     {
       field: "projected_payoff_date",
       headerName: c.table_column_payoff_date,
-      renderHeader: G,
-      renderCell: (u) => /* @__PURE__ */ e(l, { color: i.palette.text.primary, variant: "Small", children: u.value ? K(u.value, U.MONTH_SHORT_YEAR) : "---" }),
+      renderHeader: z,
+      renderCell: (_) => /* @__PURE__ */ e(l, { color: i.palette.text.primary, variant: "Small", children: _.value ? K(_.value, U.MONTH_SHORT_YEAR) : "---" }),
       sortable: !0,
       hideSortIcons: d,
       type: "number",
@@ -1216,8 +1216,8 @@ const Bt = (a) => {
     {
       field: "monthly_payment",
       headerName: c.table_column_amount_due,
-      renderHeader: G,
-      renderCell: (u) => /* @__PURE__ */ e(l, { color: i.palette.text.primary, variant: "Small", children: typeof u.value == "number" ? P(u.value, "0,0") : "---" }),
+      renderHeader: z,
+      renderCell: (_) => /* @__PURE__ */ e(l, { color: i.palette.text.primary, variant: "Small", children: typeof _.value == "number" ? M(_.value, "0,0") : "---" }),
       sortable: !0,
       hideSortIcons: d,
       type: "number",
@@ -1226,8 +1226,8 @@ const Bt = (a) => {
       minWidth: 122,
       flex: 0.6
     }
-  ], f = [
-    ...y.slice(0, 3),
+  ], u = [
+    ...f.slice(0, 3),
     {
       field: "chevron",
       headerName: "",
@@ -1240,14 +1240,14 @@ const Bt = (a) => {
       headerAlign: "right",
       width: 20
     }
-  ], v = x.useMemo(() => n.map((u, I) => ({
-    ...u,
-    id: I,
-    priority: It(u)
-  })), [n]), E = (u) => {
-    const Y = u.target.closest("[data-id]")?.getAttribute("data-id"), b = n[Number(Y)];
-    t?.(b?.guid ?? "");
-  }, D = (u) => v.find((I) => I.guid === u)?.id;
+  ], S = x.useMemo(() => n.map((_, v) => ({
+    ..._,
+    id: v,
+    priority: It(_)
+  })), [n]), P = (_) => {
+    const L = _.target.closest("[data-id]")?.getAttribute("data-id"), h = n[Number(L)];
+    t?.(h?.guid ?? "");
+  }, E = (_) => S.find((v) => v.guid === _)?.id;
   return /* @__PURE__ */ e(
     re,
     {
@@ -1262,29 +1262,29 @@ const Bt = (a) => {
       children: /* @__PURE__ */ e(
         Ye,
         {
-          columns: d ? f : y,
+          columns: d ? u : f,
           disableColumnFilter: !0,
           disableColumnMenu: !0,
           hideFooter: !0,
-          initialState: { sorting: { sortModel: h } },
-          onRowClick: (u) => {
-            o(), p(T.DEBTS_CLICK_TABLE_ROW, { account_guid: u.row.guid });
+          initialState: { sorting: { sortModel: m } },
+          onRowClick: (_) => {
+            o(), p(T.DEBTS_CLICK_TABLE_ROW, { account_guid: _.row.guid });
           },
-          onSortModelChange: (u) => {
-            m(u), p(T.DEBTS_CLICK_TABLE_SORT);
+          onSortModelChange: (_) => {
+            b(_), p(T.DEBTS_CLICK_TABLE_SORT);
           },
-          rows: v,
+          rows: S,
           slotProps: {
             baseIconButton: { color: "secondary", sx: { ml: 8 } },
             row: {
-              onMouseEnter: E,
+              onMouseEnter: P,
               onMouseLeave: () => t?.("")
             }
           },
-          sortModel: h,
+          sortModel: m,
           sortingOrder: ["asc", "desc"],
           sx: {
-            [`& .MuiDataGrid-row[data-id="${D(r)}"]`]: {
+            [`& .MuiDataGrid-row[data-id="${E(r)}"]`]: {
               backgroundColor: i.palette.mode === "light" ? "#f8f9fb" : "#1f2329",
               filter: "brightness(98%)"
             }
@@ -1294,7 +1294,7 @@ const Bt = (a) => {
     }
   );
 }, Nt = ({ buttonText: a, isOpen: n, onClick: r }) => {
-  const { isDesktop: t, isTablet: o } = X(), i = n ? "unfold_less" : "unfold_more";
+  const { isDesktop: t, isTablet: o } = Y(), i = n ? "unfold_less" : "unfold_more";
   return t || o ? /* @__PURE__ */ e(
     fe,
     {
@@ -1318,26 +1318,26 @@ const Bt = (a) => {
       children: /* @__PURE__ */ e(ee, { name: i })
     }
   );
-}, Ft = S(({ buttonEl: a, onClose: n }) => {
+}, Ft = D(({ buttonEl: a, onClose: n }) => {
   const { onEvent: r } = k(), { debts: t } = C(), { selectedDebtPriority: o, setSelectedDebtPriority: i } = R(), p = !!a, d = [
     {
-      priority: M.FASTEST_PAYOFF_FIRST,
+      priority: B.FASTEST_PAYOFF_FIRST,
       text: t.priority_sort_fastest_payoff
     },
     {
-      priority: M.HIGHEST_INTEREST,
+      priority: B.HIGHEST_INTEREST,
       text: t.priority_sort_highest_interest
     },
     {
-      priority: M.LOWEST_BALANCE,
+      priority: B.LOWEST_BALANCE,
       text: t.priority_sort_lowest_balance
     },
     {
-      priority: M.HIGHEST_BALANCE,
+      priority: B.HIGHEST_BALANCE,
       text: t.priority_sort_highest_balance
     }
-  ], c = (h) => {
-    i(h), r(T.DEBTS_CLICK_PRIORITY, { debts_priority: h });
+  ], c = (m) => {
+    i(m), r(T.DEBTS_CLICK_PRIORITY, { debts_priority: m });
   };
   return /* @__PURE__ */ e(
     Ze,
@@ -1354,13 +1354,13 @@ const Bt = (a) => {
         vertical: "top",
         horizontal: "left"
       },
-      children: /* @__PURE__ */ e(_e, { children: d.map(({ priority: h, text: m }) => /* @__PURE__ */ s(
+      children: /* @__PURE__ */ e(_e, { children: d.map(({ priority: m, text: b }) => /* @__PURE__ */ s(
         qe,
         {
-          onClick: () => c(h),
+          onClick: () => c(m),
           sx: {
-            bgcolor: o === h ? "primary.main" : void 0,
-            color: o === h ? "#fff" : void 0,
+            bgcolor: o === m ? "primary.main" : void 0,
+            color: o === m ? "#fff" : void 0,
             justifyContent: "space-between",
             minHeight: 44,
             minWidth: 268,
@@ -1373,26 +1373,26 @@ const Bt = (a) => {
             }
           },
           children: [
-            /* @__PURE__ */ e(l, { color: "inherit", variant: "Small", children: m }),
-            o === h && /* @__PURE__ */ e(ye, { color: "inherit", filled: !0, fontSize: "small" })
+            /* @__PURE__ */ e(l, { color: "inherit", variant: "Small", children: b }),
+            o === m && /* @__PURE__ */ e(ye, { color: "inherit", filled: !0, fontSize: "small" })
           ]
         },
-        h
+        m
       )) })
     }
   );
-}), Rt = S(() => {
-  const { onEvent: a } = k(), { debts: n } = C(), { selectedDebtPriority: r } = R(), [t, o] = x.useState(null), i = (h) => {
-    o(h.currentTarget), a(T.DEBTS_CLICK_PRIORITIZE);
+}), Rt = D(() => {
+  const { onEvent: a } = k(), { debts: n } = C(), { selectedDebtPriority: r } = R(), [t, o] = x.useState(null), i = (m) => {
+    o(m.currentTarget), a(T.DEBTS_CLICK_PRIORITIZE);
   }, p = () => {
     o(null);
   }, d = !!t, c = x.useMemo(() => ({
-    [M.FASTEST_PAYOFF_FIRST]: n.priority_sort_fastest_payoff,
-    [M.HIGHEST_INTEREST]: n.priority_sort_highest_interest,
-    [M.HIGHEST_BALANCE]: n.priority_sort_highest_balance,
-    [M.LOWEST_BALANCE]: n.priority_sort_lowest_balance
+    [B.FASTEST_PAYOFF_FIRST]: n.priority_sort_fastest_payoff,
+    [B.HIGHEST_INTEREST]: n.priority_sort_highest_interest,
+    [B.HIGHEST_BALANCE]: n.priority_sort_highest_balance,
+    [B.LOWEST_BALANCE]: n.priority_sort_lowest_balance
   })[r] ?? n.priority_sort_lowest_balance, [r]);
-  return /* @__PURE__ */ s(_, { children: [
+  return /* @__PURE__ */ s(y, { children: [
     /* @__PURE__ */ e(Nt, { buttonText: c, isOpen: d, onClick: i }),
     /* @__PURE__ */ e(Ft, { buttonEl: t, onClose: p })
   ] });
@@ -1408,33 +1408,33 @@ const Bt = (a) => {
       dataset: [{ x: new Date(o), y: c.balance }]
     });
   for (; t.some((c) => c.balance >= 0.01 && !c.is_impossible); ) {
-    let c = !1;
-    for (const [h, m] of t.entries()) {
-      if (m.balance <= 0.01) continue;
-      const y = i[h].dataset, v = (m.interest_rate ?? 0) / 100 / 12, E = m.balance * v;
-      let D = m.monthly_payment ?? 0;
-      h === 0 && (D += r), m.balance += E;
-      const u = Math.min(m.balance, D + p);
-      if (u <= E) {
-        m.is_impossible = !0, i[h].is_impossible = !0, i[h].priority = void 0, y.push({ x: new Date(o), y: m.balance });
+    let c = !1, m = !1, b = !1;
+    for (const [f, u] of t.entries()) {
+      if (u.balance <= 0.01) continue;
+      const S = i[f].dataset, E = (u.interest_rate ?? 0) / 100 / 12, _ = u.balance * E, v = u.monthly_payment ?? 0;
+      let H = v, L = 0;
+      !b && r > 0 && (H += r, b = !0), !m && p > 0 && (L = p, m = !0), u.balance += _;
+      const h = Math.min(u.balance, H + L);
+      if (h <= _) {
+        u.is_impossible = !0, i[f].is_impossible = !0, i[f].priority = void 0, S.push({ x: new Date(o), y: u.balance });
         continue;
       }
-      m.balance -= u, m.balance = m.balance < 0.01 ? 0 : m.balance, y.push({
+      u.balance -= h, u.balance = u.balance < 0.01 ? 0 : u.balance, S.push({
         x: new Date(o),
-        y: Math.max(0, m.balance),
-        payment: u,
-        extra: p
-      }), m.balance <= 0 && (p += D, i[h].projected_payoff_date = new Date(o)), u > 0 && (c = !0);
+        y: Math.max(0, u.balance),
+        payment: h,
+        extra: L
+      }), u.balance <= 0 && (p += v, i[f].projected_payoff_date = new Date(o)), h > 0 && (c = !0);
     }
     c && o.setMonth(o.getMonth() + 1);
   }
   return i.forEach((c) => {
-    (c.interest_rate === void 0 || c.interest_rate === void 0) && (c.projected_payoff_date = void 0);
+    (c.interest_rate === void 0 || c.monthly_payment === void 0) && (c.projected_payoff_date = void 0);
   }), i.forEach((c) => {
     c.priority = !c.is_paid_off && !c.is_impossible ? d++ : void 0;
   }), i;
-}, $t = S(({ onClick: a }) => {
-  const { debts: n } = C(), { isDesktop: r } = X(), { totalMonthlyPayments: t } = q(), { monthlyCashFlowProfile: o } = z(), i = t + Number(o?.extra_payment), p = r ? n.paydown_button_long : n.paydown_button_short;
+}, $t = D(({ onClick: a }) => {
+  const { debts: n } = C(), { isDesktop: r } = Y(), { totalMonthlyPayments: t } = q(), { monthlyCashFlowProfile: o } = V(), i = t + Number(o?.extra_payment), p = r ? n.paydown_button_long : n.paydown_button_short;
   return /* @__PURE__ */ e(
     fe,
     {
@@ -1444,33 +1444,33 @@ const Bt = (a) => {
       "aria-label": "extra-paydown",
       onClick: a,
       sx: { justifyContent: "start", minWidth: 100, mx: 4 },
-      children: A(p, P(i, "0,0"))
+      children: A(p, M(i, "0,0"))
     }
   );
 }), Ht = ({ onBackClick: a, sx: n }) => {
-  const [r, t] = x.useState(!1), [o, i] = x.useState(!1), [p, d] = x.useState(!1), [c, h] = x.useState(""), { isDesktop: m, isMobile: y } = X(), { debts: f } = C(), { onEvent: v } = k(), { isCopyLoaded: E, isInitialized: D, setSelectedAccounts: u } = Pe(), { setSelectedAccount: I } = Ne(), { selectedDebtPriority: V, setSelectedDebtChartData: Y } = R(), { visibleDebtAccounts: b } = Z(), { goalsLoaded: w, loadGoals: B, monthlyCashFlowProfile: N } = z(), { debts: F } = q(), $ = x.useMemo(() => {
-    const H = N?.extra_payment ?? 0;
-    return Lt(F, V, H);
-  }, [F, V, N]);
+  const [r, t] = x.useState(!1), [o, i] = x.useState(!1), [p, d] = x.useState(!1), [c, m] = x.useState(""), { isDesktop: b, isMobile: f } = Y(), { debts: u } = C(), { onEvent: S } = k(), { isCopyLoaded: P, isInitialized: E, setSelectedAccounts: _ } = Pe(), { setSelectedAccount: v } = Ne(), { selectedDebtPriority: H, setSelectedDebtChartData: L } = R(), { visibleDebtAccounts: h } = Z(), { goalsLoaded: w, loadGoals: I, monthlyCashFlowProfile: N } = V(), { debts: F } = q(), O = x.useMemo(() => {
+    const W = N?.extra_payment ?? 0;
+    return Lt(F, H, W);
+  }, [F, H, N]);
   x.useEffect(() => {
-    u(b), v(T.DEBTS_VIEW);
+    _(h), S(T.DEBTS_VIEW);
   }, []), x.useEffect(() => {
-    u(b);
-  }, [b]), x.useEffect(() => {
-    D && B().finally();
-  }, [D]);
-  const ne = (H) => h(H), oe = () => {
-    const H = b.find((Q) => Q.guid === c), ie = $.find((Q) => Q.guid === c);
-    H && I(H), ie && Y(ie), t(!0);
-  }, we = () => v(T.DEBTS_CLICK_FILTER), Ce = () => {
-    d(!0), v(T.DEBTS_CLICK_SNOWBALL_CTA);
+    _(h);
+  }, [h]), x.useEffect(() => {
+    E && I().finally();
+  }, [E]);
+  const ne = (W) => m(W), oe = () => {
+    const W = h.find((Q) => Q.guid === c), ie = O.find((Q) => Q.guid === c);
+    W && v(W), ie && L(ie), t(!0);
+  }, we = () => S(T.DEBTS_CLICK_FILTER), Ce = () => {
+    d(!0), S(T.DEBTS_CLICK_SNOWBALL_CTA);
   }, Se = () => {
-    i(!0), v(T.DEBTS_CLICK_PAYDOWN);
+    i(!0), S(T.DEBTS_CLICK_PAYDOWN);
   };
-  return !w || !E || !D ? /* @__PURE__ */ e(Je, {}) : /* @__PURE__ */ s(
+  return !w || !P || !E ? /* @__PURE__ */ e(Je, {}) : /* @__PURE__ */ s(
     Oe,
     {
-      accountOptions: b,
+      accountOptions: h,
       actions: [
         /* @__PURE__ */ e(Rt, {}, "prioritize-debts"),
         /* @__PURE__ */ e($t, { onClick: Se }, "extra-paydown")
@@ -1478,44 +1478,44 @@ const Bt = (a) => {
       onAccountsFilterClick: we,
       onBackClick: a,
       sx: n,
-      title: f.title,
+      title: u.title,
       children: [
-        /* @__PURE__ */ s(g, { sx: { px: m ? "48px" : "24px" }, children: [
+        /* @__PURE__ */ s(g, { sx: { px: b ? "48px" : "24px" }, children: [
           /* @__PURE__ */ s(
             g,
             {
               sx: {
-                alignItems: y ? "flex-start" : "flex-end",
-                flexDirection: y ? "column" : "row",
-                mx: y ? "-12px" : 0
+                alignItems: f ? "flex-start" : "flex-end",
+                flexDirection: f ? "column" : "row",
+                mx: f ? "-12px" : 0
               },
               children: [
                 /* @__PURE__ */ e(
                   ge,
                   {
-                    debts: $,
-                    height: y ? 250 : void 0,
+                    debts: O,
+                    height: f ? 250 : void 0,
                     hoveredDebtGuid: c,
                     onClickArea: oe,
                     onHoverArea: ne,
-                    sx: { mr: y ? "4px" : "-48px" }
+                    sx: { mr: f ? "4px" : "-48px" }
                   }
                 ),
                 /* @__PURE__ */ e(
                   ot,
                   {
-                    debts: $,
+                    debts: O,
                     onClickCta: Ce,
-                    sx: { mb: y ? "0px" : "64px" }
+                    sx: { mb: f ? "0px" : "64px" }
                   }
                 )
               ]
             }
           ),
-          /* @__PURE__ */ e(g, { sx: { mx: y ? "-24px" : 0 }, children: /* @__PURE__ */ e(
+          /* @__PURE__ */ e(g, { sx: { mx: f ? "-24px" : 0 }, children: /* @__PURE__ */ e(
             kt,
             {
-              debts: $,
+              debts: O,
               hoveredDebtGuid: c,
               onClickRow: oe,
               onHoverRow: ne
@@ -1534,7 +1534,7 @@ const Bt = (a) => {
       ]
     }
   );
-}, Pr = S(Ht);
+}, Pr = D(Ht);
 export {
   ge as DebtsChart,
   Fr as DebtsStore,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mx-cartographer/experiences",
-  "version": "7.0.53-alpha.mega3",
+  "version": "7.0.53-alpha.mega4",
   "description": "Library containing experience widgets",
   "author": "MX",
   "license": "MIT",