@mx-cartographer/experiences 7.0.28-alpha.mega1 → 7.0.28

package/dist/debts/index.es.js

@@ -1,7 +1,7 @@
 import { jsx as e, jsxs as s, Fragment as L } from "react/jsx-runtime";
-import g from "react";
+import x from "react";
 import { observer as S } from "mobx-react-lite";
-import x from "@mui/material/Stack";
+import g from "@mui/material/Stack";
 import { useTheme as j, Card as be, Stack as _, Box as O } from "@mui/material";
 import { Text as l, H3 as De, InstitutionLogo as ve, Icon as ee } from "@mxenabled/mxui";
 import { intervalToDuration as Te, formatDuration as Ae } from "date-fns";
@@ -45,27 +45,27 @@ import Ue from "@mui/material/IconButton";
 import qe from "@mui/material/ListItem";
 import Ze from "@mui/material/Popover";
 import { L as Je } from "../Loader-DUaFpDGv.mjs";
-const Qe = (a, o = 0, r = 0) => {
-  if (r === 0) return 0;
-  const t = o / (Ee * Ie);
+const Qe = (a, o = 0, n = 0) => {
+  if (n === 0) return 0;
+  const r = o / (Ee * Ie);
   return Math.ceil(
-    t === 0 ? a / r : -Math.log(1 - t * a / r) / Math.log(1 + t)
+    r === 0 ? a / n : -Math.log(1 - r * a / n) / Math.log(1 + r)
   );
-}, et = (a, o, r, t, n) => {
+}, et = (a, o, n, r, t) => {
   const i = [];
-  if (r === 0) {
-    for (let d = 0; d < a; d++) {
-      const c = o - t * (d + 1), h = o - t * d, m = c >= 0 ? t : h;
+  if (n === 0) {
+    for (let p = 0; p < a; p++) {
+      const d = o - r * (p + 1), h = o - r * p, m = d >= 0 ? r : h;
       i.push({
-        balance: c >= 0 ? c : 0,
-        interest: r,
+        balance: d >= 0 ? d : 0,
+        interest: n,
         payment: m,
         principal: m,
         timestamp: ce(
           le(
-            se(n),
+            se(t),
             // convert seconds → Date
-            d + 1
+            p + 1
             // add (index + 1) months
           )
         )
@@ -73,123 +73,123 @@ const Qe = (a, o = 0, r = 0) => {
     }
     return i;
   }
-  const p = r / 1200;
-  for (let d = 0; d < a; d++) {
-    const c = ce(le(se(n), d + 1)), h = Math.pow(1 + p, d), m = o * h - t * ((h - 1) / p), y = Math.pow(1 + p, d + 1), f = o * y - t * ((y - 1) / p), D = t + Math.min(f, 0), E = m * p;
+  const c = n / 1200;
+  for (let p = 0; p < a; p++) {
+    const d = ce(le(se(t), p + 1)), h = Math.pow(1 + c, p), m = o * h - r * ((h - 1) / c), y = Math.pow(1 + c, p + 1), f = o * y - r * ((y - 1) / c), D = r + Math.min(f, 0), E = m * c;
     i.push({
       balance: Math.max(0, f),
       interest: E,
       payment: D,
       principal: D - E,
-      timestamp: c
+      timestamp: d
     });
   }
   return i;
 }, tt = (a) => (a[a.length - 1] || {}).timestamp, rt = (a) => {
-  const { monthly_payment: o, interest_rate: r, balance: t, payment_due_date: n } = a, i = Qe(t, r ?? 0, o ?? 0), p = et(
+  const { monthly_payment: o, interest_rate: n, balance: r, payment_due_date: t } = a, i = Qe(r, n ?? 0, o ?? 0), c = et(
     i,
-    t,
-    r ?? 0,
+    r,
+    n ?? 0,
     o ?? 0,
-    n
-  ), d = tt(p);
+    t
+  ), p = tt(c);
   return {
     ...a,
-    minimumFinalPayment: d,
-    minimumPayments: p
+    minimumFinalPayment: p,
+    minimumPayments: c
   };
-}, ge = (a, o) => {
-  const [r, t] = a.reduce(
-    ([n, i], p) => (p.is_paid_off || p.is_impossible ? i.push({ ...p, minimumPayments: [] }) : n.push(rt(p)), [n, i]),
+}, xe = (a, o) => {
+  const [n, r] = a.reduce(
+    ([t, i], c) => (c.is_paid_off || c.is_impossible ? i.push({ ...c, minimumPayments: [] }) : t.push(rt(c)), [t, i]),
     [[], []]
   );
   switch (o) {
     case M.FASTEST_PAYOFF_FIRST:
-      r.sort((n, i) => (n.minimumFinalPayment ?? 0) - (i.minimumFinalPayment ?? 0));
+      n.sort((t, i) => (t.minimumFinalPayment ?? 0) - (i.minimumFinalPayment ?? 0));
       break;
     case M.HIGHEST_INTEREST:
-      r.sort((n, i) => (i.interest_rate ?? 0) - (n.interest_rate ?? 0));
+      n.sort((t, i) => (i.interest_rate ?? 0) - (t.interest_rate ?? 0));
       break;
     case M.LOWEST_BALANCE:
-      r.sort((n, i) => n.balance - i.balance);
+      n.sort((t, i) => t.balance - i.balance);
       break;
     case M.HIGHEST_BALANCE:
-      r.sort((n, i) => i.balance - n.balance);
+      n.sort((t, i) => i.balance - t.balance);
       break;
     default:
-      r.sort((n, i) => n.balance - i.balance);
+      n.sort((t, i) => t.balance - i.balance);
   }
-  a.splice(0, a.length, ...r, ...t);
+  a.splice(0, a.length, ...n, ...r);
 };
-function at(a, o, r = 0) {
-  const t = a.map((m) => ({ ...m })).filter(
+function at(a, o, n = 0) {
+  const r = a.map((m) => ({ ...m })).filter(
     (m) => m.interest_rate !== void 0 && m.monthly_payment !== void 0 && !m.is_paid_off
   );
-  ge(t, o);
-  let n = 0, i = 0;
-  const p = /* @__PURE__ */ new Date(), d = /* @__PURE__ */ new Date();
-  for (; t.some((m) => m.balance >= 0.01 && !m.is_impossible); ) {
+  xe(r, o);
+  let t = 0, i = 0;
+  const c = /* @__PURE__ */ new Date(), p = /* @__PURE__ */ new Date();
+  for (; r.some((m) => m.balance >= 0.01 && !m.is_impossible); ) {
     let m = !1;
-    for (const [y, f] of t.entries()) {
+    for (const [y, f] of r.entries()) {
       if (f.balance <= 0.01 || f.is_impossible) continue;
       const E = (f.interest_rate ?? 0) / 100 / 12, v = f.balance * E;
       let u = f.monthly_payment ?? 0;
-      y === 0 && r && (u += r), f.balance += v;
+      y === 0 && n && (u += n), f.balance += v;
       const I = Math.min(f.balance, u + i);
       if (I <= v) {
         f.is_impossible = !0;
         continue;
       }
-      f.balance -= I, f.balance = f.balance < 0.01 ? 0 : f.balance, n += v, f.balance <= 0 && (i += u), I > 0 && (m = !0);
+      f.balance -= I, f.balance = f.balance < 0.01 ? 0 : f.balance, t += v, f.balance <= 0 && (i += u), I > 0 && (m = !0);
     }
-    m && d.setMonth(d.getMonth() + 1);
+    m && p.setMonth(p.getMonth() + 1);
   }
-  const c = t.some((m) => m.is_impossible && m.balance > 0), h = Te({ start: p, end: d });
+  const d = r.some((m) => m.is_impossible && m.balance > 0), h = Te({ start: c, end: p });
   return {
-    payoffSavings: c ? "N/A" : P(n, "0,0.00"),
-    payoffDate: c ? "Never" : K(d, U.MONTH_YEAR),
-    payoffDuration: c ? "Stagnant" : Ae(h, { format: ["years", "months"] }) || "0 months"
+    payoffSavings: d ? "N/A" : P(t, "0,0.00"),
+    payoffDate: d ? "Never" : K(p, U.MONTH_YEAR),
+    payoffDuration: d ? "Stagnant" : Ae(h, { format: ["years", "months"] }) || "0 months"
   };
 }
 const R = () => {
-  if (!g.useContext(Me))
+  if (!x.useContext(Me))
     throw new Error("useCateUiStore() must be used within the GlobalDataContext");
   return q().uiStore;
-}, ot = ({ debts: a, onClickCta: o, sx: r }) => {
-  const t = j(), { isMobile: n } = X(), { debts: i } = C(), { selectedDebtPriority: p } = R(), { monthlyCashFlowProfile: d } = z(), { payoffDate: c, payoffSavings: h, payoffDuration: m } = g.useMemo(() => {
-    const y = d?.extra_payment ?? 0;
-    return at(a, p, y);
-  }, [a, p, d]);
+}, ot = ({ debts: a, onClickCta: o, sx: n }) => {
+  const r = j(), { isMobile: t } = X(), { debts: i } = C(), { selectedDebtPriority: c } = R(), { monthlyCashFlowProfile: p } = z(), { payoffDate: d, payoffSavings: h, payoffDuration: m } = x.useMemo(() => {
+    const y = p?.extra_payment ?? 0;
+    return at(a, c, y);
+  }, [a, c, p]);
   return /* @__PURE__ */ e(
     be,
     {
       sx: {
-        boxShadow: t.shadows[2],
-        width: n ? "100%" : "186px",
+        boxShadow: r.shadows[2],
+        width: t ? "100%" : "186px",
         minWidth: "186px",
-        ...r
+        ...n
       },
       children: /* @__PURE__ */ s(_, { sx: { gap: "12px", p: "16px" }, children: [
         /* @__PURE__ */ s(
           _,
           {
-            gap: n ? "4px" : "0",
+            gap: t ? "4px" : "0",
             sx: {
               borderBottom: "1px solid",
-              borderBottomColor: t.palette.grey[300],
+              borderBottomColor: r.palette.grey[300],
               pb: "8px"
             },
             children: [
               /* @__PURE__ */ e(l, { variant: "XSmall", children: i.snowball_card_date_description }),
-              /* @__PURE__ */ e(l, { bold: !0, color: t.palette.primary.main, variant: "Small", children: c })
+              /* @__PURE__ */ e(l, { bold: !0, color: r.palette.primary.main, variant: "Small", children: d })
             ]
           }
         ),
-        /* @__PURE__ */ s(_, { gap: n ? "4px" : "0", children: [
+        /* @__PURE__ */ s(_, { gap: t ? "4px" : "0", children: [
           /* @__PURE__ */ e(l, { bold: !0, variant: "Small", children: h }),
           /* @__PURE__ */ e(l, { sx: { whiteSpace: "normal" }, variant: "XSmall", children: i.snowball_card_amount_description })
         ] }),
-        /* @__PURE__ */ s(_, { gap: n ? "4px" : "0", children: [
+        /* @__PURE__ */ s(_, { gap: t ? "4px" : "0", children: [
           /* @__PURE__ */ e(l, { bold: !0, variant: "Small", children: m }),
           /* @__PURE__ */ e(l, { variant: "XSmall", children: i.snowball_card_duration_description })
         ] }),
@@ -197,7 +197,7 @@ const R = () => {
           l,
           {
             bold: !0,
-            color: t.palette.primary.main,
+            color: r.palette.primary.main,
             onClick: o,
             sx: { cursor: "pointer" },
             variant: "Small",
@@ -207,14 +207,15 @@ const R = () => {
       ] })
     }
   );
-}, nt = S(ot), it = ({ isOpen: a, onClose: o }) => {
-  const r = j(), { debts: t } = C(), [n, i] = g.useState(!1);
+}, nt = S(ot), it = ({ isOpen: a, onClose: o, sx: n }) => {
+  const r = j(), { debts: t } = C(), [i, c] = x.useState(!1);
   return /* @__PURE__ */ e(
     te,
     {
       ariaLabelClose: "",
       isOpen: a,
       onClose: o,
+      sx: { ...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: [
@@ -231,7 +232,7 @@ const R = () => {
               {
                 color: r.palette.secondary.main,
                 mb: 8,
-                sx: { whiteSpace: n ? "normal" : "nowrap" },
+                sx: { whiteSpace: i ? "normal" : "nowrap" },
                 variant: "ParagraphSmall",
                 children: t.snowball_drawer_answer
               }
@@ -241,10 +242,10 @@ const R = () => {
               {
                 bold: !0,
                 color: r.palette.primary.main,
-                onClick: () => i(!n),
+                onClick: () => c(!i),
                 sx: { cursor: "pointer" },
                 variant: "Small",
-                children: n ? t.snowball_drawer_less : t.snowball_drawer_more
+                children: i ? t.snowball_drawer_less : t.snowball_drawer_more
               }
             )
           ] })
@@ -570,23 +571,23 @@ const R = () => {
   );
 }, lt = S(it), st = "#FF7B08";
 function ct(a, o) {
-  const [r, t, n] = a.replace(/^#/, "").match(/.{1,2}/g).map((p) => parseInt(p, 16)), i = [
+  const [n, r, t] = a.replace(/^#/, "").match(/.{1,2}/g).map((c) => parseInt(c, 16)), i = [
+    Math.max(0, Math.min(255, Math.round(n * o))),
     Math.max(0, Math.min(255, Math.round(r * o))),
-    Math.max(0, Math.min(255, Math.round(t * o))),
-    Math.max(0, Math.min(255, Math.round(n * o)))
+    Math.max(0, Math.min(255, Math.round(t * o)))
   ];
   return `rgb(${i[0]}, ${i[1]}, ${i[2]})`;
 }
-const xe = ({
+const ge = ({
   sx: a,
   height: o = 500,
-  width: r,
-  debts: t,
-  hoveredDebtGuid: n,
+  width: n,
+  debts: r,
+  hoveredDebtGuid: t,
   onClickArea: i,
-  onHoverArea: p
+  onHoverArea: c
 }) => {
-  const d = He(), { onEvent: c } = k(), h = t.filter((b) => !b.is_impossible), m = [
+  const p = He(), { onEvent: d } = k(), h = r.filter((b) => !b.is_impossible), m = [
     ...new Set(
       h.flatMap((b) => b.dataset.map((w) => new Date(w.x).getTime()))
     )
@@ -623,7 +624,7 @@ const xe = ({
     id: "payoff-line",
     label: "Payoff Line",
     data: D.map((b) => b.y),
-    color: d.palette.grey[700],
+    color: p.palette.grey[700],
     curve: "linear",
     type: "line",
     stack: void 0,
@@ -655,11 +656,11 @@ const xe = ({
           onAreaClick: (b, w) => {
             i?.();
             const B = u.find((F) => F.id === w.seriesId);
-            c(T.DEBTS_CLICK_CHART_AREA, { account_guid: B?.guid });
+            d(T.DEBTS_CLICK_CHART_AREA, { account_guid: B?.guid });
           },
           onHighlightChange: (b) => {
             const w = u.find((B) => B.id === b?.seriesId)?.guid;
-            p?.(w ?? "");
+            c?.(w ?? "");
           },
           series: u,
           skipAnimation: !0,
@@ -685,16 +686,16 @@ const xe = ({
               strokeDasharray: "10 5",
               strokeWidth: 1
             },
-            [`& .MuiLineElement-series-debt-${I(n ?? "0")}`]: {
+            [`& .MuiLineElement-series-debt-${I(t ?? "0")}`]: {
               opacity: 1
             },
-            [`& .MuiAreaElement-series-debt-${I(n ?? "0")}`]: {
+            [`& .MuiAreaElement-series-debt-${I(t ?? "0")}`]: {
               opacity: 1
             },
             ...a
           },
           tooltip: { trigger: "none" },
-          width: r,
+          width: n,
           xAxis: [
             {
               data: v,
@@ -717,7 +718,7 @@ const xe = ({
     }
   );
 }, dt = () => {
-  const a = j(), { debts: o } = C(), { selectedDebtChartData: r } = R();
+  const a = j(), { debts: o } = C(), { selectedDebtChartData: n } = R();
   return /* @__PURE__ */ s(L, { children: [
     /* @__PURE__ */ s(
       Ne,
@@ -729,7 +730,7 @@ const xe = ({
         },
         children: [
           /* @__PURE__ */ e(Le, { sx: { pb: 0 }, title: /* @__PURE__ */ e(De, { sx: { pb: 4 }, children: o.details_chart_title }) }),
-          /* @__PURE__ */ e(Re, { sx: { p: 0 }, children: /* @__PURE__ */ e(xe, { debts: [r], height: 250 }) })
+          /* @__PURE__ */ e(Re, { sx: { p: 0 }, children: /* @__PURE__ */ e(ge, { debts: [n], height: 250 }) })
         ]
       }
     ),
@@ -744,23 +745,23 @@ const xe = ({
     )
   ] });
 }, pt = S(dt), mt = () => {
-  const a = j(), { onEvent: o } = k(), { debts: r } = C(), { selectedDebtChartData: t, showCompleted: n, showError: i } = R();
-  return g.useEffect(() => o(T.DEBT_SCHEDULE_VIEW), []), /* @__PURE__ */ e(_e, { children: i || n ? /* @__PURE__ */ e(
+  const a = j(), { onEvent: o } = k(), { debts: n } = C(), { selectedDebtChartData: r, showCompleted: t, showError: i } = R();
+  return x.useEffect(() => o(T.DEBT_SCHEDULE_VIEW), []), /* @__PURE__ */ e(_e, { children: i || t ? /* @__PURE__ */ e(
     l,
     {
       color: a.palette.secondary.main,
       component: "div",
       sx: { p: 32, textAlign: "center", whiteSpace: "normal" },
       variant: "Small",
-      children: i ? r.schedule_error_message : r.schedule_complete_message
+      children: i ? n.schedule_error_message : n.schedule_complete_message
     }
   ) : /* @__PURE__ */ s(L, { children: [
-    /* @__PURE__ */ s(x, { 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 })
+    /* @__PURE__ */ s(g, { flexDirection: "row", justifyContent: "space-between", sx: { pt: 12, px: 24, pb: 8 }, children: [
+      /* @__PURE__ */ e(l, { bold: !0, variant: "XSmall", children: n.schedule_month_heading }),
+      /* @__PURE__ */ e(l, { bold: !0, variant: "XSmall", children: n.schedule_amount_heading })
     ] }),
-    t.dataset.slice(1).map(({ x: p, y: d, payment: c }) => /* @__PURE__ */ e(x, { bgcolor: a.palette.background.paper, children: /* @__PURE__ */ e(x, { alignItems: "center", flexDirection: "row", pl: 24, children: /* @__PURE__ */ s(
-      x,
+    r.dataset.slice(1).map(({ x: c, y: p, payment: d }) => /* @__PURE__ */ e(g, { bgcolor: a.palette.background.paper, children: /* @__PURE__ */ e(g, { alignItems: "center", flexDirection: "row", pl: 24, children: /* @__PURE__ */ s(
+      g,
       {
         sx: {
           borderBottom: `1px solid ${a.palette.border.light}`,
@@ -770,12 +771,12 @@ const xe = ({
           pr: 24
         },
         children: [
-          /* @__PURE__ */ s(x, { flexGrow: 1, children: [
-            /* @__PURE__ */ e(l, { bold: !0, variant: "Body", children: K(p, U.MONTH_YEAR) }),
-            /* @__PURE__ */ e(l, { color: a.palette.secondary.main, variant: "XSmall", children: r.schedule_month_label })
+          /* @__PURE__ */ s(g, { flexGrow: 1, children: [
+            /* @__PURE__ */ e(l, { bold: !0, variant: "Body", children: K(c, U.MONTH_YEAR) }),
+            /* @__PURE__ */ e(l, { color: a.palette.secondary.main, variant: "XSmall", children: n.schedule_month_label })
           ] }),
-          /* @__PURE__ */ s(x, { children: [
-            /* @__PURE__ */ e(l, { bold: !0, variant: "Body", children: P(d, "0,0.00") }),
+          /* @__PURE__ */ s(g, { children: [
+            /* @__PURE__ */ e(l, { bold: !0, variant: "Body", children: P(p, "0,0.00") }),
             /* @__PURE__ */ e(
               l,
               {
@@ -783,15 +784,15 @@ const xe = ({
                 color: a.palette.success.main,
                 textAlign: "end",
                 variant: "Tiny",
-                children: `+${P(c, "0,0")}`
+                children: `+${P(d, "0,0")}`
               }
             )
           ] })
         ]
       }
-    ) }) }, String(p))),
-    /* @__PURE__ */ e(x, { bgcolor: "background.paper", children: /* @__PURE__ */ s(
-      x,
+    ) }) }, String(c))),
+    /* @__PURE__ */ e(g, { bgcolor: "background.paper", children: /* @__PURE__ */ s(
+      g,
       {
         sx: {
           alignItems: "center",
@@ -801,16 +802,16 @@ const xe = ({
           px: 24
         },
         children: [
-          /* @__PURE__ */ e(l, { flexGrow: 1, variant: "Body", children: r.schedule_payoff_label }),
+          /* @__PURE__ */ e(l, { flexGrow: 1, variant: "Body", children: n.schedule_payoff_label }),
           /* @__PURE__ */ e(l, { variant: "Body", children: "-" })
         ]
       }
     ) })
   ] }) });
 }, ht = S(mt), ut = S(({ debt: a }) => {
-  const { debts: o } = C(), { updateAccount: r } = Z(), { onEvent: t } = k(), [n, i] = g.useState(a.interest_rate ?? 0), p = n < 0, d = async () => {
-    await r({ ...a.account, interest_rate: n }), a.interest_rate = n, t(T.DEBTS_SAVE_RATE_ACTION, { account_guid: a.guid });
-  }, c = () => {
+  const { debts: o } = C(), { updateAccount: n } = Z(), { onEvent: r } = k(), [t, i] = x.useState(a.interest_rate ?? 0), c = t < 0, p = async () => {
+    await n({ ...a.account, interest_rate: t }), a.interest_rate = t, r(T.DEBTS_SAVE_RATE_ACTION, { account_guid: a.guid });
+  }, d = () => {
     setTimeout(() => {
       i(a.interest_rate ?? 0);
     }, 250);
@@ -818,29 +819,29 @@ const xe = ({
   return /* @__PURE__ */ e(
     J,
     {
-      isSaveDisabled: p,
+      isSaveDisabled: c,
       label: `${o.details_interest_rate} (%)`,
-      onCancel: c,
-      onSave: d,
+      onCancel: d,
+      onSave: p,
       primaryText: o.details_interest_rate,
       secondaryText: Be(Number(a.interest_rate) / 100),
       zeroStateText: a.interest_rate ? void 0 : o.add_interest_rate,
       children: /* @__PURE__ */ e(
         Xe,
         {
-          error: p,
+          error: c,
           fullWidth: !0,
           onChange: (h) => i(isNaN(parseFloat(h.target.value)) ? 0 : parseFloat(h.target.value)),
           type: "number",
-          value: n
+          value: t
         }
       )
     }
   );
 }), bt = S(({ debt: a }) => {
-  const { debts: o } = C(), { updateAccount: r } = Z(), { onEvent: t } = k(), [n, i] = g.useState(a.monthly_payment ?? 0), p = n < 0 || n > 9999999999e-2, d = async () => {
-    await r({ ...a.account, minimum_payment: n }), a.monthly_payment = n, t(T.DEBTS_SAVE_PAYMENT_ACTION, { account_guid: a.guid });
-  }, c = () => {
+  const { debts: o } = C(), { updateAccount: n } = Z(), { onEvent: r } = k(), [t, i] = x.useState(a.monthly_payment ?? 0), c = t < 0 || t > 9999999999e-2, p = async () => {
+    await n({ ...a.account, minimum_payment: t }), a.monthly_payment = t, r(T.DEBTS_SAVE_PAYMENT_ACTION, { account_guid: a.guid });
+  }, d = () => {
     setTimeout(() => {
       i(a.monthly_payment ?? 0);
     }, 250);
@@ -848,31 +849,31 @@ const xe = ({
   return /* @__PURE__ */ e(
     J,
     {
-      isSaveDisabled: p,
+      isSaveDisabled: c,
       label: o.details_monthly_payment,
-      onCancel: c,
-      onSave: d,
+      onCancel: d,
+      onSave: p,
       primaryText: o.details_monthly_payment,
       secondaryText: P(a.monthly_payment, "0,0"),
       zeroStateText: a.monthly_payment ? void 0 : o.add_monthly_payment,
       children: /* @__PURE__ */ e(
         ae,
         {
-          amount: n,
+          amount: t,
           autoFocus: !0,
-          error: p,
+          error: c,
           fullWidth: !0,
           minAmount: 0,
-          setAmount: (h) => i(isNaN(Number(h)) ? n : Number(h)),
+          setAmount: (h) => i(isNaN(Number(h)) ? t : Number(h)),
           sx: { ".MuiTypography-Body": { p: 0 } }
         }
       )
     }
   );
 }), _t = S(({ debt: a }) => {
-  const { debts: o } = C(), { updateAccount: r } = Z(), { onEvent: t } = k(), [n, i] = g.useState(a.original_balance ?? 0), p = n < 0 || n > 9999999999e-2, d = async () => {
-    await r({ ...a.account, original_balance: n }), a.original_balance = n, t(T.DEBTS_SAVE_BALANCE_ACTION, { account_guid: a.guid });
-  }, c = () => {
+  const { debts: o } = C(), { updateAccount: n } = Z(), { onEvent: r } = k(), [t, i] = x.useState(a.original_balance ?? 0), c = t < 0 || t > 9999999999e-2, p = async () => {
+    await n({ ...a.account, original_balance: t }), a.original_balance = t, r(T.DEBTS_SAVE_BALANCE_ACTION, { account_guid: a.guid });
+  }, d = () => {
     setTimeout(() => {
       i(a.original_balance ?? 0);
     }, 250);
@@ -880,22 +881,22 @@ const xe = ({
   return /* @__PURE__ */ e(
     J,
     {
-      isSaveDisabled: p,
+      isSaveDisabled: c,
       label: o.details_original_balance,
-      onCancel: c,
-      onSave: d,
+      onCancel: d,
+      onSave: p,
       primaryText: o.details_original_balance,
       secondaryText: P(a.original_balance, "0,0"),
       zeroStateText: a.original_balance ? void 0 : o.add_original_balance,
       children: /* @__PURE__ */ e(
         ae,
         {
-          amount: n,
+          amount: t,
           autoFocus: !0,
-          error: p,
+          error: c,
           fullWidth: !0,
           minAmount: 0,
-          setAmount: (h) => i(isNaN(Number(h)) ? n : Number(h)),
+          setAmount: (h) => i(isNaN(Number(h)) ? t : Number(h)),
           sx: { ".MuiTypography-Body": { p: 0 } }
         }
       )
@@ -903,7 +904,7 @@ const xe = ({
   );
 }), yt = () => {
   const { onEvent: a } = k(), { selectedDebtChartData: o } = R();
-  return g.useEffect(() => a(T.DEBT_DETAILS_VIEW), []), /* @__PURE__ */ s(x, { bgcolor: "background.paper", children: [
+  return x.useEffect(() => a(T.DEBT_DETAILS_VIEW), []), /* @__PURE__ */ s(g, { bgcolor: "background.paper", children: [
     o?.goal && /* @__PURE__ */ s(L, { children: [
       /* @__PURE__ */ e(Ge, { goal: o.goal }),
       /* @__PURE__ */ e(W, {}),
@@ -921,33 +922,33 @@ const xe = ({
       /* @__PURE__ */ e(W, {})
     ] })
   ] });
-}, ft = S(yt), gt = ({ setTabValue: a, sx: o }) => {
-  const { debts: r } = C(), { showError: t, showCompleted: n } = R();
-  return g.useEffect(() => {
-    t && a(1);
-  }, [t]), !t && !n ? /* @__PURE__ */ e(L, {}) : /* @__PURE__ */ s(x, { gap: 16, children: [
+}, ft = S(yt), xt = ({ setTabValue: a, sx: o }) => {
+  const { debts: n } = C(), { showError: r, showCompleted: t } = R();
+  return x.useEffect(() => {
+    r && a(1);
+  }, [r]), !r && !t ? /* @__PURE__ */ e(L, {}) : /* @__PURE__ */ s(g, { gap: 16, children: [
     /* @__PURE__ */ e(he, { sx: { my: 16, mx: 24, ...o }, children: /* @__PURE__ */ s(
       pe,
       {
-        icon: t ? /* @__PURE__ */ e(Ve, { filled: !0 }) : /* @__PURE__ */ e(ye, { color: "success", filled: !0 }),
+        icon: r ? /* @__PURE__ */ e(Ve, { filled: !0 }) : /* @__PURE__ */ e(ye, { color: "success", filled: !0 }),
         severity: "error",
         sx: {
           alignItems: "start",
           borderLeft: 5,
           borderRadius: 1,
-          borderColor: t ? "error.main" : "success.main",
+          borderColor: r ? "error.main" : "success.main",
           color: "text.primary",
           "&.MuiPaper-root": {
             backgroundColor: "background.paper"
           }
         },
         children: [
-          /* @__PURE__ */ e(me, { sx: { fontWeight: 600, marginTop: 2 }, variant: "Body", children: t ? r.status_error_title : r.status_complete_title }),
-          /* @__PURE__ */ e(l, { component: "p", sx: { whiteSpace: "wrap" }, variant: "ParagraphSmall", children: t ? r.status_error_description : r.status_complete_description })
+          /* @__PURE__ */ e(me, { sx: { fontWeight: 600, marginTop: 2 }, variant: "Body", children: r ? n.status_error_title : n.status_complete_title }),
+          /* @__PURE__ */ e(l, { component: "p", sx: { whiteSpace: "wrap" }, variant: "ParagraphSmall", children: r ? n.status_error_description : n.status_complete_description })
         ]
       }
     ) }),
-    t && /* @__PURE__ */ e(he, { sx: { mb: 16, mt: 100, mx: 24, ...o }, children: /* @__PURE__ */ s(
+    r && /* @__PURE__ */ e(he, { sx: { mb: 16, mt: 100, mx: 24, ...o }, children: /* @__PURE__ */ s(
       pe,
       {
         icon: /* @__PURE__ */ e(L, {}),
@@ -960,24 +961,24 @@ const xe = ({
           }
         },
         children: [
-          /* @__PURE__ */ e(me, { sx: { fontWeight: 600, marginTop: 2 }, variant: "Body", children: r.status_info_title }),
-          /* @__PURE__ */ e(l, { component: "p", sx: { whiteSpace: "wrap" }, variant: "ParagraphSmall", children: r.status_info_description })
+          /* @__PURE__ */ e(me, { sx: { fontWeight: 600, marginTop: 2 }, variant: "Body", children: n.status_info_title }),
+          /* @__PURE__ */ e(l, { component: "p", sx: { whiteSpace: "wrap" }, variant: "ParagraphSmall", children: n.status_info_description })
         ]
       }
     ) })
   ] });
-}, xt = S(gt), wt = () => {
-  const { debts: a } = C(), { showError: o, showCompleted: r } = R(), [t, n] = g.useState(0);
+}, gt = S(xt), wt = () => {
+  const { debts: a } = C(), { showError: o, showCompleted: n } = R(), [r, t] = x.useState(0);
   return /* @__PURE__ */ s(L, { children: [
-    (o || r) && /* @__PURE__ */ e(xt, { setTabValue: n, sx: { mt: -24 } }),
+    (o || n) && /* @__PURE__ */ e(gt, { setTabValue: t, sx: { mt: -24 } }),
     /* @__PURE__ */ s(
       We,
       {
         "aria-label": a.details_tabs_aria_label,
         centered: !0,
-        onChange: (i, p) => n(p),
+        onChange: (i, c) => t(c),
         textColor: "primary",
-        value: t,
+        value: r,
         variant: "fullWidth",
         children: [
           /* @__PURE__ */ e(
@@ -999,30 +1000,31 @@ const xe = ({
         ]
       }
     ),
-    /* @__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, {}) })
+    /* @__PURE__ */ e(ue, { index: 0, name: "debt-schedule", value: r, children: /* @__PURE__ */ e(ht, {}) }),
+    /* @__PURE__ */ e(ue, { index: 1, name: "debt-details", value: r, children: /* @__PURE__ */ e(ft, {}) })
   ] });
-}, Ct = S(wt), St = ({ isOpen: a, onClose: o }) => {
-  const { debts: r } = C(), { showError: t, showCompleted: n } = R(), i = t || n ? /* @__PURE__ */ e(L, {}) : /* @__PURE__ */ e(pt, {});
+}, Ct = S(wt), St = ({ isOpen: a, onClose: o, sx: n }) => {
+  const { debts: r } = C(), { showError: t, showCompleted: i } = R(), c = t || i ? /* @__PURE__ */ e(L, {}) : /* @__PURE__ */ e(pt, {});
   return /* @__PURE__ */ e(
     te,
     {
       ariaLabelClose: r.details_close_aria,
       isOpen: a,
       onClose: o,
+      sx: { ...n },
       title: r.details_title,
-      children: /* @__PURE__ */ s(x, { bgcolor: "background.default", children: [
-        /* @__PURE__ */ e(ke, { customDetailsChart: i }),
+      children: /* @__PURE__ */ s(g, { bgcolor: "background.default", children: [
+        /* @__PURE__ */ e(ke, { customDetailsChart: c }),
         /* @__PURE__ */ e(Ct, {})
       ] })
     }
   );
 }, Dt = S(() => {
-  const { debts: a } = C(), { monthlyCashFlowProfile: o, updateMonthlyCashFlowProfile: r } = z(), { onEvent: t } = k(), [n, i] = g.useState(o?.extra_payment ?? 0), p = n < 0 || n > 9999999999e-2, d = async () => {
-    o && (await r({ ...o, extra_payment: n }), o.extra_payment = n, t(T.DEBTS_SAVE_PAYDOWN_ACTION, {
+  const { debts: a } = C(), { monthlyCashFlowProfile: o, updateMonthlyCashFlowProfile: n } = z(), { onEvent: r } = k(), [t, i] = x.useState(o?.extra_payment ?? 0), c = t < 0 || t > 9999999999e-2, p = async () => {
+    o && (await n({ ...o, extra_payment: t }), o.extra_payment = t, r(T.DEBTS_SAVE_PAYDOWN_ACTION, {
       user_guid: o?.user_guid
     }));
-  }, c = () => {
+  }, d = () => {
     setTimeout(() => {
       i(o?.extra_payment ?? 0);
     }, 250);
@@ -1030,48 +1032,48 @@ const xe = ({
   return /* @__PURE__ */ e(
     J,
     {
-      isSaveDisabled: p,
+      isSaveDisabled: c,
       label: a.paydown_drawer_extra_payment,
-      onCancel: c,
-      onSave: d,
+      onCancel: d,
+      onSave: p,
       primaryText: a.paydown_drawer_extra_payment,
       secondaryText: P(o?.extra_payment, "0,0"),
       zeroStateText: o?.extra_payment ? void 0 : a.add_extra_payment,
       children: /* @__PURE__ */ e(
         ae,
         {
-          amount: n,
+          amount: t,
           autoFocus: !0,
-          error: p,
+          error: c,
           fullWidth: !0,
           minAmount: 0,
-          setAmount: (h) => i(isNaN(Number(h)) ? n : Number(h)),
+          setAmount: (h) => i(isNaN(Number(h)) ? t : Number(h)),
           sx: { ".MuiTypography-Body": { p: 0 } }
         }
       )
     }
   );
 }), vt = () => {
-  const { debts: a } = C(), { totalMonthlyPayments: o } = q(), { monthlyCashFlowProfile: r } = z(), t = o + Number(r?.extra_payment);
-  return /* @__PURE__ */ s(x, { sx: { backgroundColor: "background.default", height: "100%" }, children: [
-    /* @__PURE__ */ s(x, { p: 24, children: [
-      /* @__PURE__ */ s(x, { alignItems: "center", gap: 4, mb: 24, children: [
+  const { debts: a } = C(), { totalMonthlyPayments: o } = q(), { monthlyCashFlowProfile: n } = z(), r = o + Number(n?.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(o, "0,0") }),
         /* @__PURE__ */ e(l, { textAlign: "center", truncate: !1, variant: "Small", width: 208, children: a.paydown_drawer_minimum_info })
       ] }),
-      /* @__PURE__ */ s(x, { children: [
+      /* @__PURE__ */ s(g, { children: [
         /* @__PURE__ */ e(l, { variant: "H3", children: a.paydown_drawer_subtitle }),
         /* @__PURE__ */ e(l, { truncate: !1, variant: "ParagraphSmall", children: a.paydown_drawer_description })
       ] })
     ] }),
-    /* @__PURE__ */ e(x, { sx: { backgroundColor: "background.paper" }, children: /* @__PURE__ */ e(Dt, {}) }),
-    /* @__PURE__ */ e(x, { flexDirection: "row-reverse", px: 24, py: 12, children: /* @__PURE__ */ s(x, { gap: 4, children: [
+    /* @__PURE__ */ e(g, { sx: { backgroundColor: "background.paper" }, children: /* @__PURE__ */ e(Dt, {}) }),
+    /* @__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: P(r, "0,0") })
     ] }) })
   ] });
-}, Tt = S(vt), At = ({ isOpen: a, onClose: o }) => {
+}, Tt = S(vt), At = ({ isOpen: a, onClose: o, sx: n }) => {
   const { debts: r } = C();
   return /* @__PURE__ */ e(
     te,
@@ -1079,18 +1081,19 @@ const xe = ({
       ariaLabelClose: r.paydown_drawer_close_aria,
       isOpen: a,
       onClose: o,
+      sx: { ...n },
       title: r.paydown_drawer_title,
       children: /* @__PURE__ */ e(Tt, {})
     }
   );
 };
 function Et(a, o) {
-  const r = (t) => {
-    if (typeof t == "number") return t;
-    if (t === "!" || t === "✓") return 1 / 0;
+  const n = (r) => {
+    if (typeof r == "number") return r;
+    if (r === "!" || r === "✓") return 1 / 0;
     throw new Error("Unsupported value");
   };
-  return r(a) - r(o);
+  return n(a) - n(o);
 }
 function It(a) {
   return a.is_paid_off ? "✓" : a.priority === void 0 || a.is_impossible ? "!" : a.priority;
@@ -1102,7 +1105,7 @@ const Bt = (a) => {
   };
   return a === "!" && (o.text = "#FFFFFF", o.background = "#DF320C"), a === "✓" && (o.text = "#FFFFFF", o.background = "#09A57F"), o;
 }, Mt = (a) => {
-  const o = String(a.formattedValue), r = Bt(o);
+  const o = String(a.formattedValue), n = Bt(o);
   return /* @__PURE__ */ e(
     re,
     {
@@ -1114,15 +1117,15 @@ const Bt = (a) => {
         // Adjust the size as needed
         height: 20,
         borderRadius: "50%",
-        backgroundColor: r.background,
+        backgroundColor: n.background,
         marginLeft: "10px"
       },
-      children: /* @__PURE__ */ e(l, { color: r.text, fontWeight: 700, variant: "Small", children: o })
+      children: /* @__PURE__ */ e(l, { color: n.text, fontWeight: 700, variant: "Small", children: o })
     }
   );
 }, Pt = (a) => {
-  const o = a.row.account, r = Ke[o.account_type];
-  return /* @__PURE__ */ s(x, { alignItems: "center", flexDirection: "row", children: [
+  const o = a.row.account, n = Ke[o.account_type];
+  return /* @__PURE__ */ s(g, { alignItems: "center", flexDirection: "row", children: [
     /* @__PURE__ */ e(
       ve,
       {
@@ -1130,24 +1133,24 @@ const Bt = (a) => {
         institutionGuid: o.institution_guid || ""
       }
     ),
-    /* @__PURE__ */ s(x, { ml: 12, children: [
+    /* @__PURE__ */ s(g, { ml: 12, children: [
       /* @__PURE__ */ e(l, { variant: "Small", children: o.name }),
-      /* @__PURE__ */ e(l, { variant: "XSmall", children: r })
+      /* @__PURE__ */ e(l, { variant: "XSmall", children: n })
     ] })
   ] });
 }, kt = ({
   sx: a = {},
   debts: o,
-  hoveredDebtGuid: r,
-  onHoverRow: t,
-  onClickRow: n
+  hoveredDebtGuid: n,
+  onHoverRow: r,
+  onClickRow: t
 }) => {
-  const i = j(), { onEvent: p } = k(), { isMobile: d } = X(), { debts: c } = C(), [h, m] = g.useState([
+  const i = j(), { onEvent: c } = k(), { isMobile: p } = X(), { debts: d } = C(), [h, m] = x.useState([
     { field: "priority", sort: "asc" }
   ]), y = [
     {
       field: "priority",
-      headerName: c.table_column_priority,
+      headerName: d.table_column_priority,
       renderHeader: G,
       renderCell: Mt,
       sortComparator: Et,
@@ -1156,41 +1159,41 @@ const Bt = (a) => {
       type: "custom",
       align: "left",
       headerAlign: "left",
-      minWidth: d ? 67 : 72,
-      flex: d ? 0.2 : 0.4
+      minWidth: p ? 67 : 72,
+      flex: p ? 0.2 : 0.4
     },
     {
       field: "account",
-      headerName: c.table_column_account,
+      headerName: d.table_column_account,
       renderHeader: G,
       renderCell: Pt,
       sortable: !1,
       type: "custom",
       align: "left",
       headerAlign: "left",
-      minWidth: d ? 180 : 225,
+      minWidth: p ? 180 : 225,
       flex: 1
     },
     {
       field: "balance",
-      headerName: c.table_column_balance,
+      headerName: d.table_column_balance,
       renderHeader: G,
       valueFormatter: (u) => P(u, "0,0"),
       sortable: !0,
-      hideSortIcons: d,
+      hideSortIcons: p,
       type: "number",
-      align: d ? "right" : "left",
-      headerAlign: d ? "right" : "left",
-      minWidth: d ? 70 : 122,
-      flex: d ? 0.4 : 0.6
+      align: p ? "right" : "left",
+      headerAlign: p ? "right" : "left",
+      minWidth: p ? 70 : 122,
+      flex: p ? 0.4 : 0.6
     },
     {
       field: "interest_rate",
-      headerName: c.table_column_interest_rate,
+      headerName: d.table_column_interest_rate,
       renderHeader: G,
       valueFormatter: (u) => isNaN(u) ? "---" : `${Number(u).toFixed(2)}%`,
       sortable: !0,
-      hideSortIcons: d,
+      hideSortIcons: p,
       type: "number",
       align: "left",
       headerAlign: "left",
@@ -1199,11 +1202,11 @@ const Bt = (a) => {
     },
     {
       field: "projected_payoff_date",
-      headerName: c.table_column_payoff_date,
+      headerName: d.table_column_payoff_date,
       renderHeader: G,
       valueFormatter: (u) => u ? K(u, U.MONTH_SHORT_YEAR) : "---",
       sortable: !0,
-      hideSortIcons: d,
+      hideSortIcons: p,
       type: "number",
       align: "left",
       headerAlign: "left",
@@ -1212,11 +1215,11 @@ const Bt = (a) => {
     },
     {
       field: "monthly_payment",
-      headerName: c.table_column_amount_due,
+      headerName: d.table_column_amount_due,
       renderHeader: G,
       valueFormatter: (u) => typeof u == "number" ? P(u, "0,0") : "---",
       sortable: !0,
-      hideSortIcons: d,
+      hideSortIcons: p,
       type: "number",
       align: "left",
       headerAlign: "left",
@@ -1237,13 +1240,13 @@ const Bt = (a) => {
       headerAlign: "right",
       width: 20
     }
-  ], D = g.useMemo(() => o.map((u, I) => ({
+  ], D = x.useMemo(() => o.map((u, I) => ({
     ...u,
     id: I,
     priority: It(u)
   })), [o]), E = (u) => {
     const Y = u.target.closest("[data-id]")?.getAttribute("data-id"), b = o[Number(Y)];
-    t?.(b?.guid ?? "");
+    r?.(b?.guid ?? "");
   }, v = (u) => D.find((I) => I.guid === u)?.id;
   return /* @__PURE__ */ e(
     re,
@@ -1259,29 +1262,29 @@ const Bt = (a) => {
       children: /* @__PURE__ */ e(
         Ye,
         {
-          columns: d ? f : y,
+          columns: p ? f : y,
           disableColumnFilter: !0,
           disableColumnMenu: !0,
           hideFooter: !0,
           initialState: { sorting: { sortModel: h } },
           onRowClick: (u) => {
-            n(), p(T.DEBTS_CLICK_TABLE_ROW, { account_guid: u.row.guid });
+            t(), c(T.DEBTS_CLICK_TABLE_ROW, { account_guid: u.row.guid });
           },
           onSortModelChange: (u) => {
-            m(u), p(T.DEBTS_CLICK_TABLE_SORT);
+            m(u), c(T.DEBTS_CLICK_TABLE_SORT);
           },
           rows: D,
           slotProps: {
             baseIconButton: { color: "secondary", sx: { ml: 8 } },
             row: {
               onMouseEnter: E,
-              onMouseLeave: () => t?.("")
+              onMouseLeave: () => r?.("")
             }
           },
           sortModel: h,
           sortingOrder: ["asc", "desc"],
           sx: {
-            [`& .MuiDataGrid-row[data-id="${v(r)}"]`]: {
+            [`& .MuiDataGrid-row[data-id="${v(n)}"]`]: {
               backgroundColor: i.palette.mode === "light" ? "#f8f9fb" : "#1f2329",
               filter: "brightness(98%)"
             }
@@ -1290,16 +1293,16 @@ const Bt = (a) => {
       )
     }
   );
-}, Ft = ({ buttonText: a, isOpen: o, onClick: r }) => {
-  const { isDesktop: t, isTablet: n } = X(), i = o ? "unfold_less" : "unfold_more";
-  return t || n ? /* @__PURE__ */ e(
+}, Ft = ({ buttonText: a, isOpen: o, onClick: n }) => {
+  const { isDesktop: r, isTablet: t } = X(), i = o ? "unfold_less" : "unfold_more";
+  return r || t ? /* @__PURE__ */ e(
     fe,
     {
       "aria-controls": "prioritize-debts",
       "aria-describedby": "prioritize-debts",
       "aria-haspopup": !0,
       "aria-label": "prioritize-debts",
-      onClick: r,
+      onClick: n,
       startIcon: /* @__PURE__ */ e(ee, { name: i }),
       sx: { justifyContent: "start", minWidth: 214, mx: 4 },
       children: a
@@ -1311,30 +1314,30 @@ const Bt = (a) => {
       "aria-describedby": "prioritize-debts",
       "aria-haspopup": !0,
       "aria-label": "prioritize-debts",
-      onClick: r,
+      onClick: n,
       children: /* @__PURE__ */ e(ee, { name: i })
     }
   );
 }, Nt = S(({ buttonEl: a, onClose: o }) => {
-  const { onEvent: r } = k(), { debts: t } = C(), { selectedDebtPriority: n, setSelectedDebtPriority: i } = R(), p = !!a, d = [
+  const { onEvent: n } = k(), { debts: r } = C(), { selectedDebtPriority: t, setSelectedDebtPriority: i } = R(), c = !!a, p = [
     {
       priority: M.FASTEST_PAYOFF_FIRST,
-      text: t.priority_sort_fastest_payoff
+      text: r.priority_sort_fastest_payoff
     },
     {
       priority: M.HIGHEST_INTEREST,
-      text: t.priority_sort_highest_interest
+      text: r.priority_sort_highest_interest
     },
     {
       priority: M.LOWEST_BALANCE,
-      text: t.priority_sort_lowest_balance
+      text: r.priority_sort_lowest_balance
     },
     {
       priority: M.HIGHEST_BALANCE,
-      text: t.priority_sort_highest_balance
+      text: r.priority_sort_highest_balance
     }
-  ], c = (h) => {
-    i(h), r(T.DEBTS_CLICK_PRIORITY, { debts_priority: h });
+  ], d = (h) => {
+    i(h), n(T.DEBTS_CLICK_PRIORITY, { debts_priority: h });
   };
   return /* @__PURE__ */ e(
     Ze,
@@ -1346,18 +1349,18 @@ const Bt = (a) => {
       },
       id: "prioritize-debts",
       onClose: o,
-      open: p,
+      open: c,
       transformOrigin: {
         vertical: "top",
         horizontal: "left"
       },
-      children: /* @__PURE__ */ e(_e, { children: d.map(({ priority: h, text: m }) => /* @__PURE__ */ s(
+      children: /* @__PURE__ */ e(_e, { children: p.map(({ priority: h, text: m }) => /* @__PURE__ */ s(
         qe,
         {
-          onClick: () => c(h),
+          onClick: () => d(h),
           sx: {
-            bgcolor: n === h ? "primary.main" : void 0,
-            color: n === h ? "#fff" : void 0,
+            bgcolor: t === h ? "primary.main" : void 0,
+            color: t === h ? "#fff" : void 0,
             justifyContent: "space-between",
             minHeight: 44,
             minWidth: 268,
@@ -1371,7 +1374,7 @@ const Bt = (a) => {
           },
           children: [
             /* @__PURE__ */ e(l, { color: "inherit", variant: "Small", children: m }),
-            n === h && /* @__PURE__ */ e(ye, { color: "inherit", filled: !0, fontSize: "small" })
+            t === h && /* @__PURE__ */ e(ye, { color: "inherit", filled: !0, fontSize: "small" })
           ]
         },
         h
@@ -1379,59 +1382,59 @@ const Bt = (a) => {
     }
   );
 }), Rt = S(() => {
-  const { onEvent: a } = k(), { debts: o } = C(), { selectedDebtPriority: r } = R(), [t, n] = g.useState(null), i = (h) => {
-    n(h.currentTarget), a(T.DEBTS_CLICK_PRIORITIZE);
-  }, p = () => {
-    n(null);
-  }, d = !!t, c = g.useMemo(() => ({
+  const { onEvent: a } = k(), { debts: o } = C(), { selectedDebtPriority: n } = R(), [r, t] = x.useState(null), i = (h) => {
+    t(h.currentTarget), a(T.DEBTS_CLICK_PRIORITIZE);
+  }, c = () => {
+    t(null);
+  }, p = !!r, d = x.useMemo(() => ({
     [M.FASTEST_PAYOFF_FIRST]: o.priority_sort_fastest_payoff,
     [M.HIGHEST_INTEREST]: o.priority_sort_highest_interest,
     [M.HIGHEST_BALANCE]: o.priority_sort_highest_balance,
     [M.LOWEST_BALANCE]: o.priority_sort_lowest_balance
-  })[r] ?? o.priority_sort_lowest_balance, [r]);
+  })[n] ?? o.priority_sort_lowest_balance, [n]);
   return /* @__PURE__ */ s(_, { children: [
-    /* @__PURE__ */ e(Ft, { buttonText: c, isOpen: d, onClick: i }),
-    /* @__PURE__ */ e(Nt, { buttonEl: t, onClose: p })
+    /* @__PURE__ */ e(Ft, { buttonText: d, isOpen: p, onClick: i }),
+    /* @__PURE__ */ e(Nt, { buttonEl: r, onClose: c })
   ] });
-}), Lt = (a, o, r = 0) => {
-  const t = a.map((c) => ({ ...c }));
-  ge(t, o);
-  const n = /* @__PURE__ */ new Date(), i = [];
-  let p = 0, d = 1;
-  for (const c of t)
+}), Lt = (a, o, n = 0) => {
+  const r = a.map((d) => ({ ...d }));
+  xe(r, o);
+  const t = /* @__PURE__ */ new Date(), i = [];
+  let c = 0, p = 1;
+  for (const d of r)
     i.push({
-      ...c,
+      ...d,
       // Start with the initial balance
-      dataset: [{ x: new Date(n), y: c.balance }]
+      dataset: [{ x: new Date(t), y: d.balance }]
     });
-  for (; t.some((c) => c.balance >= 0.01 && !c.is_impossible); ) {
-    let c = !1;
-    for (const [h, m] of t.entries()) {
+  for (; r.some((d) => d.balance >= 0.01 && !d.is_impossible); ) {
+    let d = !1;
+    for (const [h, m] of r.entries()) {
       if (m.balance <= 0.01) continue;
       const y = i[h].dataset, D = (m.interest_rate ?? 0) / 100 / 12, E = m.balance * D;
       let v = m.monthly_payment ?? 0;
-      h === 0 && (v += r), m.balance += E;
-      const u = Math.min(m.balance, v + p);
+      h === 0 && (v += n), m.balance += E;
+      const u = Math.min(m.balance, v + c);
       if (u <= E) {
-        m.is_impossible = !0, i[h].is_impossible = !0, i[h].priority = void 0, y.push({ x: new Date(n), y: m.balance });
+        m.is_impossible = !0, i[h].is_impossible = !0, i[h].priority = void 0, y.push({ x: new Date(t), y: m.balance });
         continue;
       }
       m.balance -= u, m.balance = m.balance < 0.01 ? 0 : m.balance, y.push({
-        x: new Date(n),
+        x: new Date(t),
         y: Math.max(0, m.balance),
         payment: u,
-        extra: p
-      }), m.balance <= 0 && (p += v, i[h].projected_payoff_date = new Date(n)), u > 0 && (c = !0);
+        extra: c
+      }), m.balance <= 0 && (c += v, i[h].projected_payoff_date = new Date(t)), u > 0 && (d = !0);
     }
-    c && n.setMonth(n.getMonth() + 1);
+    d && t.setMonth(t.getMonth() + 1);
   }
-  return i.forEach((c) => {
-    (c.interest_rate === void 0 || c.interest_rate === void 0) && (c.projected_payoff_date = void 0);
-  }), i.forEach((c) => {
-    c.priority = !c.is_paid_off && !c.is_impossible ? d++ : void 0;
+  return i.forEach((d) => {
+    (d.interest_rate === void 0 || d.interest_rate === void 0) && (d.projected_payoff_date = void 0);
+  }), i.forEach((d) => {
+    d.priority = !d.is_paid_off && !d.is_impossible ? p++ : void 0;
   }), i;
 }, $t = S(({ onClick: a }) => {
-  const { debts: o } = C(), { isDesktop: r } = X(), { totalMonthlyPayments: t } = q(), { monthlyCashFlowProfile: n } = z(), i = t + Number(n?.extra_payment), p = r ? o.paydown_button_long : o.paydown_button_short;
+  const { debts: o } = C(), { isDesktop: n } = X(), { totalMonthlyPayments: r } = q(), { monthlyCashFlowProfile: t } = z(), i = r + Number(t?.extra_payment), c = n ? o.paydown_button_long : o.paydown_button_short;
   return /* @__PURE__ */ e(
     fe,
     {
@@ -1441,26 +1444,26 @@ 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(c, P(i, "0,0"))
     }
   );
 }), Ht = ({ onBackClick: a, sx: o }) => {
-  const [r, t] = g.useState(!1), [n, i] = g.useState(!1), [p, d] = g.useState(!1), [c, h] = g.useState(""), { isDesktop: m, isMobile: y } = X(), { debts: f } = C(), { onEvent: D } = k(), { isCopyLoaded: E, isInitialized: v, setSelectedAccounts: u } = Pe(), { setSelectedAccount: I } = Fe(), { selectedDebtPriority: V, setSelectedDebtChartData: Y } = R(), { visibleDebtAccounts: b } = Z(), { goalsLoaded: w, loadGoals: B, monthlyCashFlowProfile: F } = z(), { debts: N } = q(), $ = g.useMemo(() => {
+  const [n, r] = x.useState(!1), [t, i] = x.useState(!1), [c, p] = x.useState(!1), [d, h] = x.useState(""), { isDesktop: m, isMobile: y } = X(), { debts: f } = C(), { onEvent: D } = k(), { isCopyLoaded: E, isInitialized: v, setSelectedAccounts: u } = Pe(), { setSelectedAccount: I } = Fe(), { selectedDebtPriority: V, setSelectedDebtChartData: Y } = R(), { visibleDebtAccounts: b } = Z(), { goalsLoaded: w, loadGoals: B, monthlyCashFlowProfile: F } = z(), { debts: N } = q(), $ = x.useMemo(() => {
     const H = F?.extra_payment ?? 0;
     return Lt(N, V, H);
   }, [N, V, F]);
-  g.useEffect(() => {
+  x.useEffect(() => {
     u(b), D(T.DEBTS_VIEW);
-  }, []), g.useEffect(() => {
+  }, []), x.useEffect(() => {
     u(b);
-  }, [b]), g.useEffect(() => {
+  }, [b]), x.useEffect(() => {
     v && B().finally();
   }, [v]);
   const oe = (H) => h(H), ne = () => {
-    const H = b.find((Q) => Q.guid === c), ie = $.find((Q) => Q.guid === c);
-    H && I(H), ie && Y(ie), t(!0);
+    const H = b.find((Q) => Q.guid === d), ie = $.find((Q) => Q.guid === d);
+    H && I(H), ie && Y(ie), r(!0);
   }, we = () => D(T.DEBTS_CLICK_FILTER), Ce = () => {
-    d(!0), D(T.DEBTS_CLICK_SNOWBALL_CTA);
+    p(!0), D(T.DEBTS_CLICK_SNOWBALL_CTA);
   }, Se = () => {
     i(!0), D(T.DEBTS_CLICK_PAYDOWN);
   };
@@ -1477,9 +1480,9 @@ const Bt = (a) => {
       sx: o,
       title: f.title,
       children: [
-        /* @__PURE__ */ s(x, { sx: { px: m ? "48px" : "24px" }, children: [
+        /* @__PURE__ */ s(g, { sx: { px: m ? "48px" : "24px" }, children: [
           /* @__PURE__ */ s(
-            x,
+            g,
             {
               sx: {
                 alignItems: y ? "flex-start" : "flex-end",
@@ -1488,11 +1491,11 @@ const Bt = (a) => {
               },
               children: [
                 /* @__PURE__ */ e(
-                  xe,
+                  ge,
                   {
                     debts: $,
                     height: y ? 250 : void 0,
-                    hoveredDebtGuid: c,
+                    hoveredDebtGuid: d,
                     onClickArea: ne,
                     onHoverArea: oe,
                     sx: { mr: y ? "4px" : "-48px" }
@@ -1509,11 +1512,11 @@ const Bt = (a) => {
               ]
             }
           ),
-          /* @__PURE__ */ e(x, { sx: { mx: y ? "-24px" : 0 }, children: /* @__PURE__ */ e(
+          /* @__PURE__ */ e(g, { sx: { mx: y ? "-24px" : 0 }, children: /* @__PURE__ */ e(
             kt,
             {
               debts: $,
-              hoveredDebtGuid: c,
+              hoveredDebtGuid: d,
               onClickRow: ne,
               onHoverRow: oe
             }
@@ -1522,18 +1525,18 @@ const Bt = (a) => {
         /* @__PURE__ */ e(
           lt,
           {
-            isOpen: p,
-            onClose: () => d(!1)
+            isOpen: c,
+            onClose: () => p(!1)
           }
         ),
-        /* @__PURE__ */ e(St, { isOpen: r, onClose: () => t(!1) }),
-        /* @__PURE__ */ e(At, { isOpen: n, onClose: () => i(!1) })
+        /* @__PURE__ */ e(St, { isOpen: n, onClose: () => r(!1) }),
+        /* @__PURE__ */ e(At, { isOpen: t, onClose: () => i(!1) })
       ]
     }
   );
 }, Pr = S(Ht);
 export {
-  xe as DebtsChart,
+  ge as DebtsChart,
   Nr as DebtsStore,
   kt as DebtsTable,
   Pr as DebtsWidget