@mx-cartographer/experiences 8.0.0-alpha.bb4 → 8.0.0-alpha.mega1

package/dist/debts/index.es.js

@@ -1,69 +1,70 @@
-import { jsx as e, jsxs as s, Fragment as O } from "react/jsx-runtime";
-import g from "react";
-import { observer as S } from "mobx-react-lite";
+import { jsx as e, jsxs as s, Fragment as H } from "react/jsx-runtime";
+import x from "react";
+import { observer as D } from "mobx-react-lite";
 import w from "@mui/material/Stack";
-import { useTheme as V, Card as _e, Stack as _, Box as W } from "@mui/material";
-import { Text as l, H3 as Se, InstitutionLogo as Te, Icon as te } from "@mxenabled/mxui";
-import { intervalToDuration as Ae, formatDuration as Ee } from "date-fns";
-import { addMonths as se } from "date-fns/addMonths";
-import { fromUnixTime as ce } from "date-fns/fromUnixTime";
-import { getUnixTime as de } from "date-fns/getUnixTime";
-import { a as P, M as Ie, I as Me } from "../DebtsStore-pL63fmdT.mjs";
-import { D as Lr } from "../DebtsStore-pL63fmdT.mjs";
-import { f as q, a as X } from "../Dialog-CDV0kKxj.mjs";
-import { f as N, a as ke } from "../NumberFormatting-DjTD0t3W.mjs";
-import { G as Pe, x as Z, u as v, l as Y, g as B, d as J, n as Ne, b as Fe } from "../hooks-C41HAxM5.mjs";
-import { u as K } from "../useScreenSize-B5afALev.mjs";
-import { D as re } from "../Drawer-BF40nbsH.mjs";
-import { b as I } from "../Localization-2MODESHW.mjs";
-import { A as Be, u as Re } from "../AccountDetailsHeader-DRjFuyJT.mjs";
-import Le from "@mui/material/Card";
-import $e from "@mui/material/CardContent";
-import Oe from "@mui/material/CardHeader";
-import { LineChart as He } from "@mui/x-charts";
-import ne from "@mui/material/Box";
-import { useTheme as We } from "@mui/material/styles";
-import { A as T, W as Ge } from "../WidgetContainer-CDh9fjpR.mjs";
-import pe from "@mui/material/Tab";
-import je from "@mui/material/Tabs";
-import ye from "@mui/material/List";
-import G from "@mui/material/Divider";
-import { M as ze, I as Ve, O as Ye } from "../OriginalBalanceAction-2Y_3U_mg.mjs";
-import Ke from "@mui/material/TextField";
-import { L as Q } from "../ListItemAction-BNCWQAN_.mjs";
-import { C as oe } from "../CurrencyInput-D1cjbdCI.mjs";
-import he from "@mui/material/Alert";
-import ue from "@mui/material/AlertTitle";
-import me from "@mui/material/Paper";
-import { Error as Ue, CheckCircle as fe } from "@mxenabled/mx-icons";
-import { T as be } from "../TabContentContainer-CnMXkVqr.mjs";
-import { DataGridPro as qe } from "@mui/x-data-grid-pro";
-import { H as j } from "../HeaderCell-P8w6CmfO.mjs";
-import { h as Xe } from "../ConnectDrawer-DVp54lUH.mjs";
-import xe from "@mui/material/Button";
-import Ze from "@mui/material/IconButton";
-import Je from "@mui/material/ListItem";
-import Qe from "@mui/material/Popover";
-import { L as et } from "../Loader-Ckqi9Rx6.mjs";
-const tt = (n, o = 0, r = 0) => {
+import { useTheme as X, Card as be, Stack as _, 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 P, M as Ee, I as Ie } from "../DebtsStore-Bq-aPy-5.mjs";
+import { a as Lr } from "../DebtsStore-Bq-aPy-5.mjs";
+import { f as k, a as Be } from "../NumberFormatting-DjTD0t3W.mjs";
+import { f as K, a as U } from "../Dialog-BPTr3qHE.mjs";
+import { G as Me, w as q, u as S, l as V, g as F, d as Z, b as Pe } from "../hooks-ZMp65DFz.mjs";
+import { u as Y } from "../useScreenSize-B6JyS_Lj.mjs";
+import { D as te } from "../Drawer-By9V-B5L.mjs";
+import { b as E } from "../Localization-2MODESHW.mjs";
+import { A as ke, u as Ne } from "../AccountDetailsHeader-BkG3MNYo.mjs";
+import Fe from "@mui/material/Card";
+import Re from "@mui/material/CardContent";
+import Le from "@mui/material/CardHeader";
+import re from "@mui/material/Box";
+import { useTheme as $e } from "@mui/material/styles";
+import { LineChart as He } from "@mui/x-charts/LineChart";
+import { A as T, W as Oe } from "../WidgetContainer-CoFDmQRE.mjs";
+import de from "@mui/material/Tab";
+import We from "@mui/material/Tabs";
+import _e from "@mui/material/List";
+import j from "@mui/material/Divider";
+import { M as Ge, I as je, O as ze } from "../OriginalBalanceAction-C6jdS4ws.mjs";
+import Xe from "@mui/material/TextField";
+import { L as J } from "../ListItemAction-BxTkF6Tz.mjs";
+import { C as ae } from "../CurrencyInput-itK0R3wV.mjs";
+import pe from "@mui/material/Alert";
+import me from "@mui/material/AlertTitle";
+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 z } from "../HeaderCell-DjuifqHJ.mjs";
+import { f as Ke } from "../ConnectDrawer-BkvlItWx.mjs";
+import fe from "@mui/material/Button";
+import Ue from "@mui/material/IconButton";
+import qe from "@mui/material/ListItem";
+import Ze from "@mui/material/Popover";
+import { u as Je } from "../useWidgetLoadTimer-hIOioiKx.mjs";
+import { L as Qe } from "../Loader-DUaFpDGv.mjs";
+const et = (a, o = 0, r = 0) => {
   if (r === 0) return 0;
-  const t = o / (Ie * Me);
+  const t = o / (Ee * Ie);
   return Math.ceil(
-    t === 0 ? n / r : -Math.log(1 - t * n / r) / Math.log(1 + t)
+    t === 0 ? a / r : -Math.log(1 - t * a / r) / Math.log(1 + t)
   );
-}, rt = (n, o, r, t, a) => {
+}, tt = (a, o, r, t, n) => {
   const i = [];
   if (r === 0) {
-    for (let c = 0; c < n; c++) {
-      const d = o - t * (c + 1), h = o - t * c, m = d >= 0 ? t : h;
+    for (let c = 0; c < a; c++) {
+      const d = o - t * (c + 1), m = o - t * c, b = d >= 0 ? t : m;
       i.push({
         balance: d >= 0 ? d : 0,
         interest: r,
-        payment: m,
-        principal: m,
-        timestamp: de(
-          se(
-            ce(a),
+        payment: b,
+        principal: b,
+        timestamp: ce(
+          le(
+            se(n),
             // convert seconds → Date
             c + 1
             // add (index + 1) months
@@ -74,98 +75,98 @@ const tt = (n, o = 0, r = 0) => {
     return i;
   }
   const p = r / 1200;
-  for (let c = 0; c < n; c++) {
-    const d = de(se(ce(a), c + 1)), h = Math.pow(1 + p, c), m = o * h - t * ((h - 1) / p), x = Math.pow(1 + p, c + 1), u = o * x - t * ((x - 1) / p), D = t + Math.min(u, 0), M = m * p;
+  for (let c = 0; c < a; c++) {
+    const d = ce(le(se(n), c + 1)), m = Math.pow(1 + p, c), b = o * m - t * ((m - 1) / p), f = Math.pow(1 + p, c + 1), u = o * f - t * ((f - 1) / p), v = t + Math.min(u, 0), M = b * p;
     i.push({
       balance: Math.max(0, u),
       interest: M,
-      payment: D,
-      principal: D - M,
+      payment: v,
+      principal: v - M,
       timestamp: d
     });
   }
   return i;
-}, nt = (n) => (n[n.length - 1] || {}).timestamp, ot = (n) => {
-  const { monthly_payment: o, interest_rate: r, balance: t, payment_due_date: a } = n, i = tt(t, r ?? 0, o ?? 0), p = rt(
+}, rt = (a) => (a[a.length - 1] || {}).timestamp, at = (a) => {
+  const { monthly_payment: o, interest_rate: r, balance: t, payment_due_date: n } = a, i = et(t, r ?? 0, o ?? 0), p = tt(
     i,
     t,
     r ?? 0,
     o ?? 0,
-    a
-  ), c = nt(p);
+    n
+  ), c = rt(p);
   return {
-    ...n,
+    ...a,
     minimumFinalPayment: c,
     minimumPayments: p
   };
-}, ge = (n, o) => {
-  const [r, t] = n.reduce(
-    ([a, i], p) => (p.is_paid_off || p.is_impossible ? i.push({ ...p, minimumPayments: [] }) : a.push(ot(p)), [a, i]),
+}, ge = (a, o) => {
+  const [r, t] = a.reduce(
+    ([n, i], p) => (p.is_paid_off || p.is_impossible ? i.push({ ...p, minimumPayments: [] }) : n.push(at(p)), [n, i]),
     [[], []]
   );
   switch (o) {
     case P.FASTEST_PAYOFF_FIRST:
-      r.sort((a, i) => (a.minimumFinalPayment ?? 0) - (i.minimumFinalPayment ?? 0));
+      r.sort((n, i) => (n.minimumFinalPayment ?? 0) - (i.minimumFinalPayment ?? 0));
       break;
     case P.HIGHEST_INTEREST:
-      r.sort((a, i) => (i.interest_rate ?? 0) - (a.interest_rate ?? 0));
+      r.sort((n, i) => (i.interest_rate ?? 0) - (n.interest_rate ?? 0));
       break;
     case P.LOWEST_BALANCE:
-      r.sort((a, i) => a.balance - i.balance);
+      r.sort((n, i) => n.balance - i.balance);
       break;
     case P.HIGHEST_BALANCE:
-      r.sort((a, i) => i.balance - a.balance);
+      r.sort((n, i) => i.balance - n.balance);
       break;
     default:
-      r.sort((a, i) => a.balance - i.balance);
+      r.sort((n, i) => n.balance - i.balance);
   }
-  n.splice(0, n.length, ...r, ...t);
+  a.splice(0, a.length, ...r, ...t);
 };
-function at(n, o, r = 0) {
-  const t = n.map((m) => ({ ...m })).filter(
-    (m) => m.interest_rate !== void 0 && m.monthly_payment !== void 0 && !m.is_paid_off
+function ot(a, o, r = 0) {
+  const t = a.map((b) => ({ ...b })).filter(
+    (b) => b.interest_rate !== void 0 && b.monthly_payment !== void 0 && !b.is_paid_off
   );
   ge(t, o);
-  let a = 0, i = 0;
+  let n = 0, i = 0;
   const p = /* @__PURE__ */ new Date(), c = /* @__PURE__ */ new Date();
-  for (; t.some((m) => m.balance >= 0.01 && !m.is_impossible); ) {
-    let m = !1;
-    for (const [x, u] of t.entries()) {
+  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 M = (u.interest_rate ?? 0) / 100 / 12, F = u.balance * M;
+      const M = (u.interest_rate ?? 0) / 100 / 12, I = u.balance * M;
       let C = u.monthly_payment ?? 0;
-      x === 0 && r && (C += r), u.balance += F;
-      const A = Math.min(u.balance, C + i);
-      if (A <= F) {
+      f === 0 && r && (C += r), u.balance += I;
+      const B = Math.min(u.balance, C + i);
+      if (B <= I) {
         u.is_impossible = !0;
         continue;
       }
-      u.balance -= A, u.balance = u.balance < 0.01 ? 0 : u.balance, a += F, u.balance <= 0 && (i += C), A > 0 && (m = !0);
+      u.balance -= B, u.balance = u.balance < 0.01 ? 0 : u.balance, n += I, u.balance <= 0 && (i += C), B > 0 && (b = !0);
     }
-    m && c.setMonth(c.getMonth() + 1);
+    b && c.setMonth(c.getMonth() + 1);
   }
-  const d = t.some((m) => m.is_impossible && m.balance > 0), h = Ae({ start: p, end: c });
+  const d = t.some((b) => b.is_impossible && b.balance > 0), m = Te({ start: p, end: c });
   return {
-    payoffSavings: d ? "N/A" : N(a, "0,0.00"),
-    payoffDate: d ? "Never" : q(c, X.MONTH_YEAR),
-    payoffDuration: d ? "Stagnant" : Ee(h, { format: ["years", "months"] }) || "0 months"
+    payoffSavings: d ? "N/A" : k(n, "0,0.00"),
+    payoffDate: d ? "Never" : K(c, U.MONTH_YEAR),
+    payoffDuration: d ? "Stagnant" : Ae(m, { format: ["years", "months"] }) || "0 months"
   };
 }
-const L = () => {
-  if (!g.useContext(Pe))
+const $ = () => {
+  if (!x.useContext(Me))
     throw new Error("useCateUiStore() must be used within the GlobalDataContext");
-  return Z().uiStore;
-}, it = ({ debts: n, onClickCta: o, sx: r }) => {
-  const t = V(), { isMobile: a } = K(), { debts: i } = v(), { selectedDebtPriority: p } = L(), { monthlyCashFlowProfile: c } = Y(), { payoffDate: d, payoffSavings: h, payoffDuration: m } = g.useMemo(() => {
-    const x = c?.extra_payment ?? 0;
-    return at(n, p, x);
-  }, [n, p, c]);
+  return q().uiStore;
+}, nt = ({ debts: a, onClickCta: o, sx: r }) => {
+  const t = X(), { isMobile: n } = Y(), { debts: i } = S(), { selectedDebtPriority: p } = $(), { monthlyCashFlowProfile: c } = V(), { payoffDate: d, payoffSavings: m, payoffDuration: b } = x.useMemo(() => {
+    const f = c?.extra_payment ?? 0;
+    return ot(a, p, f);
+  }, [a, p, c]);
   return /* @__PURE__ */ e(
-    _e,
+    be,
     {
       sx: {
         boxShadow: t.shadows[2],
-        width: a ? "100%" : "186px",
+        width: n ? "100%" : "186px",
         minWidth: "186px",
         ...r
       },
@@ -173,25 +174,25 @@ const L = () => {
         /* @__PURE__ */ s(
           _,
           {
-            gap: a ? "4px" : "0",
+            gap: n ? "4px" : "0",
             sx: {
               borderBottom: "1px solid",
               borderBottomColor: t.palette.grey[300],
               pb: "8px"
             },
             children: [
-              /* @__PURE__ */ e(l, { variant: "caption", children: i.snowball_card_date_description }),
-              /* @__PURE__ */ e(l, { bold: !0, color: t.palette.primary.main, variant: "body2", children: d })
+              /* @__PURE__ */ e(l, { variant: "XSmall", children: i.snowball_card_date_description }),
+              /* @__PURE__ */ e(l, { bold: !0, color: t.palette.primary.main, variant: "Small", children: d })
             ]
           }
         ),
-        /* @__PURE__ */ s(_, { gap: a ? "4px" : "0", children: [
-          /* @__PURE__ */ e(l, { bold: !0, variant: "body2", children: h }),
-          /* @__PURE__ */ e(l, { sx: { whiteSpace: "normal" }, variant: "caption", children: i.snowball_card_amount_description })
+        /* @__PURE__ */ s(_, { gap: n ? "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: a ? "4px" : "0", children: [
-          /* @__PURE__ */ e(l, { bold: !0, variant: "body2", children: m }),
-          /* @__PURE__ */ e(l, { variant: "caption", children: i.snowball_card_duration_description })
+        /* @__PURE__ */ s(_, { gap: n ? "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(
           l,
@@ -200,39 +201,39 @@ const L = () => {
             color: t.palette.primary.main,
             onClick: o,
             sx: { cursor: "pointer" },
-            variant: "body2",
+            variant: "Small",
             children: i.snowball_card_cta
           }
         )
       ] })
     }
   );
-}, lt = S(it), st = ({ isOpen: n, onClose: o }) => {
-  const r = V(), { debts: t } = v(), [a, i] = g.useState(!1);
+}, it = D(nt), lt = ({ isOpen: a, onClose: o }) => {
+  const r = X(), { debts: t } = S(), [n, i] = x.useState(!1);
   return /* @__PURE__ */ e(
-    re,
+    te,
     {
       ariaLabelClose: "",
-      isOpen: n,
+      isOpen: a,
       onClose: o,
       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: [
-            /* @__PURE__ */ e(l, { mb: 12, variant: "h3", children: t.snowball_drawer_subtitle }),
-            /* @__PURE__ */ e(l, { color: r.palette.secondary.main, variant: "body2", children: t.snowball_drawer_amount_description }),
-            /* @__PURE__ */ e(l, { variant: "h1", children: t.snowball_drawer_savings }),
-            /* @__PURE__ */ e(l, { color: r.palette.secondary.main, variant: "body2", children: t.snowball_drawer_duration_description })
+            /* @__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 }),
+            /* @__PURE__ */ e(l, { color: r.palette.secondary.main, variant: "Small", children: t.snowball_drawer_duration_description })
           ] }),
-          /* @__PURE__ */ s(_e, { sx: { display: "grid", py: 16, px: 24 }, children: [
-            /* @__PURE__ */ e(l, { mb: 4, variant: "h3", children: t.snowball_drawer_question }),
+          /* @__PURE__ */ s(be, { sx: { display: "grid", py: 16, px: 24 }, children: [
+            /* @__PURE__ */ e(l, { mb: 4, variant: "H3", children: t.snowball_drawer_question }),
             /* @__PURE__ */ e(
               l,
               {
                 color: r.palette.secondary.main,
                 mb: 8,
-                sx: { whiteSpace: a ? "normal" : "nowrap" },
-                variant: "subtitle2",
+                sx: { whiteSpace: n ? "normal" : "nowrap" },
+                variant: "ParagraphSmall",
                 children: t.snowball_drawer_answer
               }
             ),
@@ -241,10 +242,10 @@ const L = () => {
               {
                 bold: !0,
                 color: r.palette.primary.main,
-                onClick: () => i(!a),
+                onClick: () => i(!n),
                 sx: { cursor: "pointer" },
-                variant: "body2",
-                children: a ? t.snowball_drawer_less : t.snowball_drawer_more
+                variant: "Small",
+                children: n ? t.snowball_drawer_less : t.snowball_drawer_more
               }
             )
           ] })
@@ -256,18 +257,18 @@ const L = () => {
               color: r.palette.secondary.main,
               px: 24,
               sx: { textAlign: "center", whiteSpace: "normal" },
-              variant: "body2",
+              variant: "Small",
               children: t.snowball_drawer_disclaimer
             }
           ),
           /* @__PURE__ */ s(_, { flexDirection: "row", justifyContent: "space-between", sx: { pt: 12, px: 24, pb: 8 }, children: [
-            /* @__PURE__ */ e(l, { bold: !0, variant: "caption", children: I(t.snowball_drawer_month_header, 1) }),
-            /* @__PURE__ */ e(l, { bold: !0, variant: "caption", children: t.snowball_drawer_payment_header })
+            /* @__PURE__ */ e(l, { bold: !0, variant: "XSmall", children: E(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__ */ e(
-                W,
+                G,
                 {
                   sx: {
                     display: "flex",
@@ -279,14 +280,14 @@ const L = () => {
                     backgroundColor: r.palette.success.main,
                     marginRight: 12
                   },
-                  children: /* @__PURE__ */ e(l, { color: "white", fontWeight: 700, variant: "body2", children: "✓" })
+                  children: /* @__PURE__ */ e(l, { color: "white", fontWeight: 700, variant: "Small", children: "✓" })
                 }
               ),
               /* @__PURE__ */ s(
                 _,
                 {
                   sx: {
-                    borderBottom: `1px solid ${r.palette.neutral.light}`,
+                    borderBottom: `1px solid ${r.palette.border.light}`,
                     flexDirection: "row",
                     flexGrow: 1,
                     py: 14,
@@ -294,25 +295,25 @@ const L = () => {
                   },
                   children: [
                     /* @__PURE__ */ s(_, { flexGrow: 1, children: [
-                      /* @__PURE__ */ e(l, { variant: "body1", children: I(t.snowball_drawer_debt_label, "A") }),
-                      /* @__PURE__ */ s(l, { color: r.palette.secondary.main, variant: "caption", children: [
-                        I(
+                      /* @__PURE__ */ e(l, { variant: "Body", children: E(t.snowball_drawer_debt_label, "A") }),
+                      /* @__PURE__ */ s(l, { color: r.palette.secondary.main, variant: "XSmall", children: [
+                        E(
                           t.snowball_drawer_rollover_explainer_pt1,
                           "$100"
                         ),
-                        /* @__PURE__ */ e("strong", { children: I(t.snowball_drawer_debt_label, "B") }),
+                        /* @__PURE__ */ e("strong", { children: E(t.snowball_drawer_debt_label, "B") }),
                         t.snowball_drawer_rollover_explainer_pt2
                       ] })
                     ] }),
                     /* @__PURE__ */ s(_, { children: [
-                      /* @__PURE__ */ e(l, { variant: "body1", children: "$100.00" }),
+                      /* @__PURE__ */ e(l, { variant: "Body", children: "$100.00" }),
                       /* @__PURE__ */ e(
                         l,
                         {
                           bold: !0,
                           color: r.palette.success.main,
                           textAlign: "end",
-                          variant: "tiny",
+                          variant: "Tiny",
                           children: t.snowball_drawer_paid_label
                         }
                       )
@@ -323,14 +324,14 @@ const L = () => {
             ] }),
             /* @__PURE__ */ s(_, { alignItems: "center", flexDirection: "row", pl: 24, children: [
               /* @__PURE__ */ e(
-                W,
+                G,
                 {
                   sx: {
                     width: 20,
                     height: 20,
                     marginRight: 12,
                     borderRadius: "50%",
-                    border: `3px solid ${r.palette.neutral.dark}`
+                    border: `3px solid ${r.palette.border.darker}`
                   }
                 }
               ),
@@ -338,35 +339,35 @@ const L = () => {
                 _,
                 {
                   sx: {
-                    borderBottom: `1px solid ${r.palette.neutral.light}`,
+                    borderBottom: `1px solid ${r.palette.border.light}`,
                     flexDirection: "row",
                     flexGrow: 1,
                     py: 14,
                     pr: 24
                   },
                   children: [
-                    /* @__PURE__ */ e(l, { flexGrow: 1, variant: "body1", children: I(t.snowball_drawer_debt_label, "B") }),
-                    /* @__PURE__ */ e(l, { variant: "body1", children: "$400.00" })
+                    /* @__PURE__ */ e(l, { flexGrow: 1, variant: "Body", children: E(t.snowball_drawer_debt_label, "B") }),
+                    /* @__PURE__ */ e(l, { variant: "Body", children: "$400.00" })
                   ]
                 }
               )
             ] }),
             /* @__PURE__ */ s(_, { alignItems: "center", flexDirection: "row", pl: 24, py: 14, children: [
               /* @__PURE__ */ e(
-                W,
+                G,
                 {
                   sx: {
                     width: 20,
                     height: 20,
                     marginRight: 12,
                     borderRadius: "50%",
-                    border: `3px solid ${r.palette.neutral.dark}`
+                    border: `3px solid ${r.palette.border.darker}`
                   }
                 }
               ),
               /* @__PURE__ */ s(_, { flexDirection: "row", flexGrow: 1, pr: 24, children: [
-                /* @__PURE__ */ e(l, { flexGrow: 1, variant: "body1", children: I(t.snowball_drawer_debt_label, "C") }),
-                /* @__PURE__ */ e(l, { variant: "body1", children: "$1,000.00" })
+                /* @__PURE__ */ e(l, { flexGrow: 1, variant: "Body", children: E(t.snowball_drawer_debt_label, "C") }),
+                /* @__PURE__ */ e(l, { variant: "Body", children: "$1,000.00" })
               ] })
             ] }),
             /* @__PURE__ */ s(
@@ -377,24 +378,24 @@ const L = () => {
                   px: 24,
                   flexDirection: "row",
                   justifyContent: "space-between",
-                  borderTop: `1px solid ${r.palette.neutral.light}`,
-                  borderBottom: `1px solid ${r.palette.neutral.light}`
+                  borderTop: `1px solid ${r.palette.border.light}`,
+                  borderBottom: `1px solid ${r.palette.border.light}`
                 },
                 children: [
-                  /* @__PURE__ */ e(l, { bold: !0, variant: "body1", children: t.snowball_drawer_total_label }),
-                  /* @__PURE__ */ e(l, { bold: !0, variant: "body1", children: "$1,500.00" })
+                  /* @__PURE__ */ e(l, { bold: !0, variant: "Body", children: t.snowball_drawer_total_label }),
+                  /* @__PURE__ */ e(l, { bold: !0, variant: "Body", children: "$1,500.00" })
                 ]
               }
             )
           ] }),
           /* @__PURE__ */ s(_, { flexDirection: "row", justifyContent: "space-between", sx: { pt: 12, px: 24, pb: 8 }, children: [
-            /* @__PURE__ */ e(l, { bold: !0, variant: "caption", children: I(t.snowball_drawer_month_header, 2) }),
-            /* @__PURE__ */ e(l, { bold: !0, variant: "caption", children: t.snowball_drawer_payment_header })
+            /* @__PURE__ */ e(l, { bold: !0, variant: "XSmall", children: E(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__ */ e(
-                W,
+                G,
                 {
                   sx: {
                     display: "flex",
@@ -406,14 +407,14 @@ const L = () => {
                     backgroundColor: r.palette.success.main,
                     marginRight: 12
                   },
-                  children: /* @__PURE__ */ e(l, { color: "white", fontWeight: 700, variant: "body2", children: "✓" })
+                  children: /* @__PURE__ */ e(l, { color: "white", fontWeight: 700, variant: "Small", children: "✓" })
                 }
               ),
               /* @__PURE__ */ s(
                 _,
                 {
                   sx: {
-                    borderBottom: `1px solid ${r.palette.neutral.light}`,
+                    borderBottom: `1px solid ${r.palette.border.light}`,
                     flexDirection: "row",
                     flexGrow: 1,
                     py: 14,
@@ -421,25 +422,25 @@ const L = () => {
                   },
                   children: [
                     /* @__PURE__ */ s(_, { flexGrow: 1, children: [
-                      /* @__PURE__ */ e(l, { variant: "body1", children: I(t.snowball_drawer_debt_label, "B") }),
-                      /* @__PURE__ */ s(l, { color: r.palette.secondary.main, variant: "caption", children: [
-                        I(
+                      /* @__PURE__ */ e(l, { variant: "Body", children: E(t.snowball_drawer_debt_label, "B") }),
+                      /* @__PURE__ */ s(l, { color: r.palette.secondary.main, variant: "XSmall", children: [
+                        E(
                           t.snowball_drawer_rollover_explainer_pt1,
                           "$500"
                         ),
-                        /* @__PURE__ */ e("strong", { children: I(t.snowball_drawer_debt_label, "C") }),
+                        /* @__PURE__ */ e("strong", { children: E(t.snowball_drawer_debt_label, "C") }),
                         t.snowball_drawer_rollover_explainer_pt2
                       ] })
                     ] }),
                     /* @__PURE__ */ s(_, { children: [
-                      /* @__PURE__ */ e(l, { variant: "body1", children: "$500.00" }),
+                      /* @__PURE__ */ e(l, { variant: "Body", children: "$500.00" }),
                       /* @__PURE__ */ e(
                         l,
                         {
                           bold: !0,
                           color: r.palette.success.main,
                           textAlign: "end",
-                          variant: "tiny",
+                          variant: "Tiny",
                           children: t.snowball_drawer_paid_label
                         }
                       )
@@ -450,14 +451,14 @@ const L = () => {
             ] }),
             /* @__PURE__ */ s(_, { alignItems: "center", flexDirection: "row", pl: 24, children: [
               /* @__PURE__ */ e(
-                W,
+                G,
                 {
                   sx: {
                     width: 20,
                     height: 20,
                     marginRight: 12,
                     borderRadius: "50%",
-                    border: `3px solid ${r.palette.neutral.dark}`
+                    border: `3px solid ${r.palette.border.darker}`
                   }
                 }
               ),
@@ -471,8 +472,8 @@ const L = () => {
                     pr: 24
                   },
                   children: [
-                    /* @__PURE__ */ e(l, { flexGrow: 1, variant: "body1", children: I(t.snowball_drawer_debt_label, "C") }),
-                    /* @__PURE__ */ e(l, { variant: "body1", children: "$1,000.00" })
+                    /* @__PURE__ */ e(l, { flexGrow: 1, variant: "Body", children: E(t.snowball_drawer_debt_label, "C") }),
+                    /* @__PURE__ */ e(l, { variant: "Body", children: "$1,000.00" })
                   ]
                 }
               )
@@ -485,24 +486,24 @@ const L = () => {
                   px: 24,
                   flexDirection: "row",
                   justifyContent: "space-between",
-                  borderTop: `1px solid ${r.palette.neutral.light}`,
-                  borderBottom: `1px solid ${r.palette.neutral.light}`
+                  borderTop: `1px solid ${r.palette.border.light}`,
+                  borderBottom: `1px solid ${r.palette.border.light}`
                 },
                 children: [
-                  /* @__PURE__ */ e(l, { bold: !0, variant: "body1", children: t.snowball_drawer_total_label }),
-                  /* @__PURE__ */ e(l, { bold: !0, variant: "body1", children: "$1,500.00" })
+                  /* @__PURE__ */ e(l, { bold: !0, variant: "Body", children: t.snowball_drawer_total_label }),
+                  /* @__PURE__ */ e(l, { bold: !0, variant: "Body", children: "$1,500.00" })
                 ]
               }
             )
           ] }),
           /* @__PURE__ */ s(_, { flexDirection: "row", justifyContent: "space-between", sx: { pt: 12, px: 24, pb: 8 }, children: [
-            /* @__PURE__ */ e(l, { bold: !0, variant: "caption", children: I(t.snowball_drawer_month_header, 3) }),
-            /* @__PURE__ */ e(l, { bold: !0, variant: "caption", children: t.snowball_drawer_payment_header })
+            /* @__PURE__ */ e(l, { bold: !0, variant: "XSmall", children: E(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__ */ e(
-                W,
+                G,
                 {
                   sx: {
                     display: "flex",
@@ -514,7 +515,7 @@ const L = () => {
                     backgroundColor: r.palette.success.main,
                     marginRight: 12
                   },
-                  children: /* @__PURE__ */ e(l, { color: "white", fontWeight: 700, variant: "body2", children: "✓" })
+                  children: /* @__PURE__ */ e(l, { color: "white", fontWeight: 700, variant: "Small", children: "✓" })
                 }
               ),
               /* @__PURE__ */ s(
@@ -528,16 +529,16 @@ const L = () => {
                     pr: 24
                   },
                   children: [
-                    /* @__PURE__ */ e(_, { flexGrow: 1, children: /* @__PURE__ */ e(l, { variant: "body1", children: I(t.snowball_drawer_debt_label, "C") }) }),
+                    /* @__PURE__ */ e(_, { flexGrow: 1, children: /* @__PURE__ */ e(l, { variant: "Body", children: E(t.snowball_drawer_debt_label, "C") }) }),
                     /* @__PURE__ */ s(_, { children: [
-                      /* @__PURE__ */ e(l, { variant: "body1", children: "$1,500.00" }),
+                      /* @__PURE__ */ e(l, { variant: "Body", children: "$1,500.00" }),
                       /* @__PURE__ */ e(
                         l,
                         {
                           bold: !0,
                           color: r.palette.success.main,
                           textAlign: "end",
-                          variant: "tiny",
+                          variant: "Tiny",
                           children: t.snowball_drawer_paid_label
                         }
                       )
@@ -554,12 +555,12 @@ const L = () => {
                   px: 24,
                   flexDirection: "row",
                   justifyContent: "space-between",
-                  borderTop: `1px solid ${r.palette.neutral.light}`,
-                  borderBottom: `1px solid ${r.palette.neutral.light}`
+                  borderTop: `1px solid ${r.palette.border.light}`,
+                  borderBottom: `1px solid ${r.palette.border.light}`
                 },
                 children: [
-                  /* @__PURE__ */ e(l, { bold: !0, variant: "body1", children: t.snowball_drawer_total_label }),
-                  /* @__PURE__ */ e(l, { bold: !0, variant: "body1", children: "$1,500.00" })
+                  /* @__PURE__ */ e(l, { bold: !0, variant: "Body", children: t.snowball_drawer_total_label }),
+                  /* @__PURE__ */ e(l, { bold: !0, variant: "Body", children: "$1,500.00" })
                 ]
               }
             )
@@ -568,50 +569,50 @@ const L = () => {
       ] })
     }
   );
-}, ct = S(st), dt = "#FF7B08";
-function pt(n, o) {
-  const [r, t, a] = n.replace(/^#/, "").match(/.{1,2}/g).map((p) => parseInt(p, 16)), i = [
+}, st = D(lt), ct = "#FF7B08";
+function dt(a, o) {
+  const [r, t, n] = a.replace(/^#/, "").match(/.{1,2}/g).map((p) => parseInt(p, 16)), i = [
     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(a * o)))
+    Math.max(0, Math.min(255, Math.round(n * o)))
   ];
   return `rgb(${i[0]}, ${i[1]}, ${i[2]})`;
 }
-const we = ({
-  sx: n,
+const xe = ({
+  sx: a,
   height: o = 500,
   width: r,
   debts: t,
-  hoveredDebtGuid: a,
+  hoveredDebtGuid: n,
   onClickArea: i,
   onHoverArea: p
 }) => {
-  const c = We(), { onEvent: d } = B(), h = t.filter((b) => !b.is_impossible), m = [
+  const c = $e(), { onEvent: d } = F(), m = t.filter((h) => !h.is_impossible), b = [
     ...new Set(
-      h.flatMap((b) => b.dataset.map((f) => new Date(f.x).getTime()))
+      m.flatMap((h) => h.dataset.map((g) => new Date(g.x).getTime()))
     )
-  ].sort((b, f) => b - f).map((b) => new Date(b)), x = h.map((b) => {
-    const f = new Map(b.dataset.map((R) => [new Date(R.x).getTime(), R.y]));
-    let E = f.get(m[0].getTime()) ?? 0;
-    const $ = m.map((R) => {
-      const z = f.get(R.getTime()) ?? E;
-      return E = z, { x: R, y: z };
+  ].sort((h, g) => h - g).map((h) => new Date(h)), f = m.map((h) => {
+    const g = new Map(h.dataset.map((L) => [new Date(L.x).getTime(), L.y]));
+    let A = g.get(b[0].getTime()) ?? 0;
+    const R = b.map((L) => {
+      const O = g.get(L.getTime()) ?? A;
+      return A = O, { x: L, y: O };
     });
-    return { ...b, dataset: $ };
-  }), u = x.reduce(
-    (b, f) => b + (f.dataset[0]?.y ?? 0),
+    return { ...h, dataset: R };
+  }), u = f.reduce(
+    (h, g) => h + (g.dataset[0]?.y ?? 0),
     0
-  ), D = m.map((b, f) => {
-    const E = f / (m.length - 1), $ = u * (1 - E);
-    return { x: b, y: $ };
-  }), M = Math.ceil(u / 100) * 100, F = m, C = x.map((b, f) => {
-    const E = 1 - f / x.length * 0.5, $ = pt(dt, E);
+  ), v = b.map((h, g) => {
+    const A = g / (b.length - 1), R = u * (1 - A);
+    return { x: h, y: R };
+  }), M = Math.ceil(u / 100) * 100, I = b, C = f.map((h, g) => {
+    const A = 1 - g / f.length * 0.5, R = dt(ct, A);
     return {
-      id: `debt-${f}`,
-      guid: b.guid,
-      label: b.name,
-      data: b.dataset.map((R) => R.y),
-      color: $,
+      id: `debt-${g}`,
+      guid: h.guid,
+      label: h.name,
+      data: h.dataset.map((L) => L.y),
+      color: R,
       curve: "linear",
       type: "line",
       area: !0,
@@ -622,7 +623,7 @@ const we = ({
   C.push({
     id: "payoff-line",
     label: "Payoff Line",
-    data: D.map((b) => b.y),
+    data: v.map((h) => h.y),
     color: c.palette.grey[700],
     curve: "linear",
     type: "line",
@@ -630,9 +631,9 @@ const we = ({
     showMark: !1,
     disableHighlight: !0
   });
-  const A = (b) => C.findIndex((f) => f?.guid === b);
+  const B = (h) => C.findIndex((g) => g?.guid === h);
   return /* @__PURE__ */ e(
-    ne,
+    re,
     {
       sx: {
         width: "100%",
@@ -652,22 +653,20 @@ const we = ({
           axisHighlight: { x: "none" },
           disableLineItemHighlight: !0,
           height: o,
-          onAreaClick: (b, f) => {
+          hideLegend: !0,
+          margin: { bottom: 24, left: 32, right: 72, top: 48 },
+          onAreaClick: (h, g) => {
             i?.();
-            const E = C.find(($) => $.id === f.seriesId);
-            d(T.DEBTS_CLICK_CHART_AREA, { account_guid: E?.guid });
+            const A = C.find((R) => R.id === g.seriesId);
+            d(T.DEBTS_CLICK_CHART_AREA, { account_guid: A?.guid });
           },
-          onHighlightChange: (b) => {
-            const f = C.find((E) => E.id === b?.seriesId)?.guid;
-            p?.(f ?? "");
+          onHighlightChange: (h) => {
+            const g = C.find((A) => A.id === h?.seriesId)?.guid;
+            p?.(g ?? "");
           },
           series: C,
           skipAnimation: !0,
-          slotProps: {
-            legend: {
-              hidden: !0
-            }
-          },
+          slotProps: { tooltip: { trigger: "none" } },
           sx: {
             p: 4,
             "& .MuiBarLabel-root": {
@@ -685,26 +684,26 @@ const we = ({
               strokeDasharray: "10 5",
               strokeWidth: 1
             },
-            [`& .MuiLineElement-series-debt-${A(a ?? "0")}`]: {
+            [`& .MuiLineElement-series-debt-${B(n ?? "0")}`]: {
               opacity: 1
             },
-            [`& .MuiAreaElement-series-debt-${A(a ?? "0")}`]: {
+            [`& .MuiAreaElement-series-debt-${B(n ?? "0")}`]: {
               opacity: 1
             },
             "& .MuiChartsAxis-tickLabel > tspan": {
-              fontFamily: c.typography.body2.fontFamily
+              fontFamily: c.typography.Small.fontFamily
             },
-            ...n
+            ...a
           },
-          tooltip: { trigger: "none" },
           width: r,
           xAxis: [
             {
-              data: F,
-              scaleType: "time",
-              min: m[0],
+              data: I,
               disableTicks: !0,
-              valueFormatter: (b) => q(b, X.MONTH_SHORT_YEAR)
+              min: b[0],
+              scaleType: "time",
+              tickLabelMinGap: 24,
+              valueFormatter: (h) => K(h, U.MONTH_SHORT_YEAR)
             }
           ],
           yAxis: [
@@ -712,18 +711,18 @@ const we = ({
               min: 0,
               max: M,
               disableTicks: !0,
-              valueFormatter: (b) => N(b, "0a")
+              valueFormatter: (h) => k(h, "0a")
             }
           ]
         }
       )
     }
   );
-}, ht = () => {
-  const n = V(), { debts: o } = v(), { selectedDebtChartData: r } = L();
-  return /* @__PURE__ */ s(O, { children: [
+}, pt = () => {
+  const a = X(), { debts: o } = S(), { selectedDebtChartData: r } = $();
+  return /* @__PURE__ */ s(H, { children: [
     /* @__PURE__ */ s(
-      Le,
+      Fe,
       {
         sx: {
           "& .MuiCardContent-root:last-child": {
@@ -731,42 +730,42 @@ const we = ({
           }
         },
         children: [
-          /* @__PURE__ */ e(Oe, { sx: { pb: 0 }, title: /* @__PURE__ */ e(Se, { sx: { pb: 4 }, children: o.details_chart_title }) }),
-          /* @__PURE__ */ e($e, { sx: { p: 0 }, children: /* @__PURE__ */ e(we, { debts: [r], height: 250 }) })
+          /* @__PURE__ */ e(Le, { sx: { pb: 0 }, title: /* @__PURE__ */ e(ve, { sx: { pb: 4 }, children: o.details_chart_title }) }),
+          /* @__PURE__ */ e(Re, { sx: { p: 0 }, children: /* @__PURE__ */ e(xe, { debts: [r], height: 250 }) })
         ]
       }
     ),
     /* @__PURE__ */ e(
       l,
       {
-        color: n.palette.text.secondary,
+        color: a.palette.text.secondary,
         sx: { whiteSpace: "normal", textAlign: "center", px: 8, py: 12 },
-        variant: "body2",
+        variant: "Small",
         children: o.details_chart_description
       }
     )
   ] });
-}, ut = S(ht), mt = () => {
-  const n = V(), { onEvent: o } = B(), { debts: r } = v(), { selectedDebtChartData: t, showCompleted: a, showError: i } = L();
-  return g.useEffect(() => o(T.DEBT_SCHEDULE_VIEW), []), /* @__PURE__ */ e(ye, { children: i || a ? /* @__PURE__ */ e(
+}, mt = D(pt), ht = () => {
+  const a = X(), { onEvent: o } = F(), { debts: r } = S(), { selectedDebtChartData: t, showCompleted: n, showError: i } = $();
+  return x.useEffect(() => o(T.DEBT_SCHEDULE_VIEW), []), /* @__PURE__ */ e(_e, { children: i || n ? /* @__PURE__ */ e(
     l,
     {
-      color: n.palette.secondary.main,
+      color: a.palette.secondary.main,
       component: "div",
       sx: { p: 32, textAlign: "center", whiteSpace: "normal" },
-      variant: "body2",
+      variant: "Small",
       children: i ? r.schedule_error_message : r.schedule_complete_message
     }
-  ) : /* @__PURE__ */ s(O, { children: [
+  ) : /* @__PURE__ */ s(H, { children: [
     /* @__PURE__ */ s(w, { flexDirection: "row", justifyContent: "space-between", sx: { pt: 12, px: 24, pb: 8 }, children: [
-      /* @__PURE__ */ e(l, { bold: !0, variant: "caption", children: r.schedule_month_heading }),
-      /* @__PURE__ */ e(l, { bold: !0, variant: "caption", children: r.schedule_amount_heading })
+      /* @__PURE__ */ e(l, { bold: !0, variant: "XSmall", children: r.schedule_month_heading }),
+      /* @__PURE__ */ e(l, { bold: !0, variant: "XSmall", children: r.schedule_amount_heading })
     ] }),
-    t.dataset.slice(1).map(({ x: p, y: c, payment: d }) => /* @__PURE__ */ e(w, { bgcolor: n.palette.background.paper, children: /* @__PURE__ */ e(w, { alignItems: "center", flexDirection: "row", pl: 24, children: /* @__PURE__ */ s(
+    t.dataset.slice(1).map(({ x: p, y: c, payment: d }) => /* @__PURE__ */ e(w, { bgcolor: a.palette.background.paper, children: /* @__PURE__ */ e(w, { alignItems: "center", flexDirection: "row", pl: 24, children: /* @__PURE__ */ s(
       w,
       {
         sx: {
-          borderBottom: `1px solid ${n.palette.neutral.light}`,
+          borderBottom: `1px solid ${a.palette.border.light}`,
           flexDirection: "row",
           flexGrow: 1,
           py: 14,
@@ -774,19 +773,19 @@ const we = ({
         },
         children: [
           /* @__PURE__ */ s(w, { flexGrow: 1, children: [
-            /* @__PURE__ */ e(l, { bold: !0, variant: "body1", children: q(p, X.MONTH_YEAR) }),
-            /* @__PURE__ */ e(l, { color: n.palette.secondary.main, variant: "caption", children: r.schedule_month_label })
+            /* @__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(w, { children: [
-            /* @__PURE__ */ e(l, { bold: !0, variant: "body1", children: N(c, "0,0.00") }),
+            /* @__PURE__ */ e(l, { bold: !0, variant: "Body", children: k(c, "0,0.00") }),
             /* @__PURE__ */ e(
               l,
               {
                 bold: !0,
-                color: n.palette.success.main,
+                color: a.palette.success.main,
                 textAlign: "end",
-                variant: "tiny",
-                children: `+${N(d, "0,0")}`
+                variant: "Tiny",
+                children: `+${k(d, "0,0")}`
               }
             )
           ] })
@@ -804,135 +803,135 @@ const we = ({
           px: 24
         },
         children: [
-          /* @__PURE__ */ e(l, { flexGrow: 1, variant: "body1", children: r.schedule_payoff_label }),
-          /* @__PURE__ */ e(l, { variant: "body1", children: "-" })
+          /* @__PURE__ */ e(l, { flexGrow: 1, variant: "Body", children: r.schedule_payoff_label }),
+          /* @__PURE__ */ e(l, { variant: "Body", children: "-" })
         ]
       }
     ) })
   ] }) });
-}, bt = S(mt), _t = S(({ debt: n }) => {
-  const { debts: o } = v(), { updateAccount: r } = J(), { onEvent: t } = B(), [a, i] = g.useState(n.interest_rate ?? 0), p = a < 0, c = async () => {
-    await r({ ...n.account, interest_rate: a }), n.interest_rate = a, t(T.DEBTS_SAVE_RATE_ACTION, { account_guid: n.guid });
+}, ut = D(ht), bt = D(({ debt: a }) => {
+  const { debts: o } = S(), { updateAccount: r } = Z(), { onEvent: t } = F(), [n, i] = x.useState(a.interest_rate ?? 0), p = n < 0, c = async () => {
+    await r({ ...a.account, interest_rate: n }), a.interest_rate = n, t(T.DEBTS_SAVE_RATE_ACTION, { account_guid: a.guid });
   }, d = () => {
     setTimeout(() => {
-      i(n.interest_rate ?? 0);
+      i(a.interest_rate ?? 0);
     }, 250);
   };
   return /* @__PURE__ */ e(
-    Q,
+    J,
     {
       isSaveDisabled: p,
       label: `${o.details_interest_rate} (%)`,
       onCancel: d,
       onSave: c,
       primaryText: o.details_interest_rate,
-      secondaryText: ke(Number(n.interest_rate) / 100),
-      zeroStateText: n.interest_rate ? void 0 : o.add_interest_rate,
+      secondaryText: Be(Number(a.interest_rate) / 100),
+      zeroStateText: a.interest_rate ? void 0 : o.add_interest_rate,
       children: /* @__PURE__ */ e(
-        Ke,
+        Xe,
         {
           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: a
+          value: n
         }
       )
     }
   );
-}), yt = S(({ debt: n }) => {
-  const { debts: o } = v(), { updateAccount: r } = J(), { onEvent: t } = B(), [a, i] = g.useState(n.monthly_payment ?? 0), p = a < 0 || a > 9999999999e-2, c = async () => {
-    await r({ ...n.account, minimum_payment: a }), n.monthly_payment = a, t(T.DEBTS_SAVE_PAYMENT_ACTION, { account_guid: n.guid });
+}), _t = D(({ debt: a }) => {
+  const { debts: o } = S(), { updateAccount: r } = Z(), { onEvent: t } = F(), [n, i] = x.useState(a.monthly_payment ?? 0), p = n < 0 || n > 9999999999e-2, c = async () => {
+    await r({ ...a.account, minimum_payment: n }), a.monthly_payment = n, t(T.DEBTS_SAVE_PAYMENT_ACTION, { account_guid: a.guid });
   }, d = () => {
     setTimeout(() => {
-      i(n.monthly_payment ?? 0);
+      i(a.monthly_payment ?? 0);
     }, 250);
   };
   return /* @__PURE__ */ e(
-    Q,
+    J,
     {
       isSaveDisabled: p,
       label: o.details_monthly_payment,
       onCancel: d,
       onSave: c,
       primaryText: o.details_monthly_payment,
-      secondaryText: N(n.monthly_payment, "0,0"),
-      zeroStateText: n.monthly_payment ? void 0 : o.add_monthly_payment,
+      secondaryText: k(a.monthly_payment, "0,0"),
+      zeroStateText: a.monthly_payment ? void 0 : o.add_monthly_payment,
       children: /* @__PURE__ */ e(
-        oe,
+        ae,
         {
-          amount: a,
+          amount: n,
           autoFocus: !0,
           error: p,
           fullWidth: !0,
           minAmount: 0,
-          setAmount: (h) => i(isNaN(Number(h)) ? a : Number(h)),
-          sx: { ".MuiTypography-body1": { p: 0 } }
+          setAmount: (m) => i(isNaN(Number(m)) ? n : Number(m)),
+          sx: { ".MuiTypography-Body": { p: 0 } }
         }
       )
     }
   );
-}), ft = S(({ debt: n }) => {
-  const { debts: o } = v(), { updateAccount: r } = J(), { onEvent: t } = B(), [a, i] = g.useState(n.original_balance ?? 0), p = a < 0 || a > 9999999999e-2, c = async () => {
-    await r({ ...n.account, original_balance: a }), n.original_balance = a, t(T.DEBTS_SAVE_BALANCE_ACTION, { account_guid: n.guid });
+}), yt = D(({ debt: a }) => {
+  const { debts: o } = S(), { updateAccount: r } = Z(), { onEvent: t } = F(), [n, i] = x.useState(a.original_balance ?? 0), p = n < 0 || n > 9999999999e-2, c = async () => {
+    await r({ ...a.account, original_balance: n }), a.original_balance = n, t(T.DEBTS_SAVE_BALANCE_ACTION, { account_guid: a.guid });
   }, d = () => {
     setTimeout(() => {
-      i(n.original_balance ?? 0);
+      i(a.original_balance ?? 0);
     }, 250);
   };
   return /* @__PURE__ */ e(
-    Q,
+    J,
     {
       isSaveDisabled: p,
       label: o.details_original_balance,
       onCancel: d,
       onSave: c,
       primaryText: o.details_original_balance,
-      secondaryText: N(n.original_balance, "0,0"),
-      zeroStateText: n.original_balance ? void 0 : o.add_original_balance,
+      secondaryText: k(a.original_balance, "0,0"),
+      zeroStateText: a.original_balance ? void 0 : o.add_original_balance,
       children: /* @__PURE__ */ e(
-        oe,
+        ae,
         {
-          amount: a,
+          amount: n,
           autoFocus: !0,
           error: p,
           fullWidth: !0,
           minAmount: 0,
-          setAmount: (h) => i(isNaN(Number(h)) ? a : Number(h)),
-          sx: { ".MuiTypography-body1": { p: 0 } }
+          setAmount: (m) => i(isNaN(Number(m)) ? n : Number(m)),
+          sx: { ".MuiTypography-Body": { p: 0 } }
         }
       )
     }
   );
-}), xt = () => {
-  const { onEvent: n } = B(), { selectedDebtChartData: o } = L();
-  return g.useEffect(() => n(T.DEBT_DETAILS_VIEW), []), /* @__PURE__ */ s(w, { bgcolor: "background.paper", children: [
-    o?.goal && /* @__PURE__ */ s(O, { children: [
+}), ft = () => {
+  const { onEvent: a } = F(), { selectedDebtChartData: o } = $();
+  return x.useEffect(() => a(T.DEBT_DETAILS_VIEW), []), /* @__PURE__ */ s(w, { bgcolor: "background.paper", children: [
+    o?.goal && /* @__PURE__ */ s(H, { children: [
+      /* @__PURE__ */ e(Ge, { goal: o.goal }),
+      /* @__PURE__ */ e(j, {}),
+      /* @__PURE__ */ e(je, { goal: o.goal }),
+      /* @__PURE__ */ e(j, {}),
       /* @__PURE__ */ e(ze, { goal: o.goal }),
-      /* @__PURE__ */ e(G, {}),
-      /* @__PURE__ */ e(Ve, { goal: o.goal }),
-      /* @__PURE__ */ e(G, {}),
-      /* @__PURE__ */ e(Ye, { goal: o.goal }),
-      /* @__PURE__ */ e(G, {})
+      /* @__PURE__ */ e(j, {})
     ] }),
-    !o?.goal && o?.account && /* @__PURE__ */ s(O, { children: [
-      /* @__PURE__ */ e(yt, { debt: o }),
-      /* @__PURE__ */ e(G, {}),
+    !o?.goal && o?.account && /* @__PURE__ */ s(H, { children: [
       /* @__PURE__ */ e(_t, { debt: o }),
-      /* @__PURE__ */ e(G, {}),
-      /* @__PURE__ */ e(ft, { debt: o }),
-      /* @__PURE__ */ e(G, {})
+      /* @__PURE__ */ e(j, {}),
+      /* @__PURE__ */ e(bt, { debt: o }),
+      /* @__PURE__ */ e(j, {}),
+      /* @__PURE__ */ e(yt, { debt: o }),
+      /* @__PURE__ */ e(j, {})
     ] })
   ] });
-}, gt = S(xt), wt = ({ setTabValue: n, sx: o }) => {
-  const { debts: r } = v(), { showError: t, showCompleted: a } = L();
-  return g.useEffect(() => {
-    t && n(1);
-  }, [t]), !t && !a ? /* @__PURE__ */ e(O, {}) : /* @__PURE__ */ s(w, { gap: 16, children: [
-    /* @__PURE__ */ e(me, { sx: { my: 16, mx: 24, ...o }, children: /* @__PURE__ */ s(
-      he,
+}, gt = D(ft), xt = ({ setTabValue: a, sx: o }) => {
+  const { debts: r } = S(), { showError: t, showCompleted: n } = $();
+  return x.useEffect(() => {
+    t && a(1);
+  }, [t]), !t && !n ? /* @__PURE__ */ e(H, {}) : /* @__PURE__ */ s(w, { gap: 16, children: [
+    /* @__PURE__ */ e(he, { sx: { my: 16, mx: 24, ...o }, children: /* @__PURE__ */ s(
+      pe,
       {
-        icon: t ? /* @__PURE__ */ e(Ue, { filled: !0 }) : /* @__PURE__ */ e(fe, { color: "success", filled: !0 }),
+        icon: t ? /* @__PURE__ */ e(Ve, { filled: !0 }) : /* @__PURE__ */ e(ye, { color: "success", filled: !0 }),
         severity: "error",
         sx: {
           alignItems: "start",
@@ -945,15 +944,15 @@ const we = ({
           }
         },
         children: [
-          /* @__PURE__ */ e(ue, { sx: { fontWeight: 600, marginTop: 2 }, variant: "body1", children: t ? r.status_error_title : r.status_complete_title }),
-          /* @__PURE__ */ e(l, { component: "p", sx: { whiteSpace: "wrap" }, variant: "subtitle2", children: t ? r.status_error_description : r.status_complete_description })
+          /* @__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 })
         ]
       }
     ) }),
-    t && /* @__PURE__ */ e(me, { sx: { mb: 16, mt: 100, mx: 24, ...o }, children: /* @__PURE__ */ s(
-      he,
+    t && /* @__PURE__ */ e(he, { sx: { mb: 16, mt: 100, mx: 24, ...o }, children: /* @__PURE__ */ s(
+      pe,
       {
-        icon: /* @__PURE__ */ e(O, {}),
+        icon: /* @__PURE__ */ e(H, {}),
         severity: "error",
         sx: {
           borderRadius: 2,
@@ -963,66 +962,66 @@ const we = ({
           }
         },
         children: [
-          /* @__PURE__ */ e(ue, { sx: { fontWeight: 600, marginTop: 2 }, variant: "body1", children: r.status_info_title }),
-          /* @__PURE__ */ e(l, { component: "p", sx: { whiteSpace: "wrap" }, variant: "subtitle2", children: r.status_info_description })
+          /* @__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 })
         ]
       }
     ) })
   ] });
-}, Ct = S(wt), vt = () => {
-  const { debts: n } = v(), { showError: o, showCompleted: r } = L(), [t, a] = g.useState(0);
-  return /* @__PURE__ */ s(O, { children: [
-    (o || r) && /* @__PURE__ */ e(Ct, { setTabValue: a, sx: { mt: -24 } }),
+}, wt = D(xt), Ct = () => {
+  const { debts: a } = S(), { showError: o, showCompleted: r } = $(), [t, n] = x.useState(0);
+  return /* @__PURE__ */ s(H, { children: [
+    (o || r) && /* @__PURE__ */ e(wt, { setTabValue: n, sx: { mt: -24 } }),
     /* @__PURE__ */ s(
-      je,
+      We,
       {
-        "aria-label": n.details_tabs_aria_label,
+        "aria-label": a.details_tabs_aria_label,
         centered: !0,
-        onChange: (i, p) => a(p),
+        onChange: (i, p) => n(p),
         textColor: "primary",
         value: t,
         variant: "fullWidth",
         children: [
           /* @__PURE__ */ e(
-            pe,
+            de,
             {
               "aria-controls": "debt-schedule-tabpanel-0",
               id: "debt-schedule-tab-0",
-              label: n.schedule_tab_label
+              label: a.schedule_tab_label
             }
           ),
           /* @__PURE__ */ e(
-            pe,
+            de,
             {
               "aria-controls": "debt-details-tabpanel-1",
               id: "debt-details-tab-1",
-              label: n.details_tab_label
+              label: a.details_tab_label
             }
           )
         ]
       }
     ),
-    /* @__PURE__ */ e(be, { index: 0, name: "debt-schedule", value: t, children: /* @__PURE__ */ e(bt, {}) }),
-    /* @__PURE__ */ e(be, { index: 1, name: "debt-details", value: t, children: /* @__PURE__ */ e(gt, {}) })
+    /* @__PURE__ */ e(ue, { index: 0, name: "debt-schedule", value: t, children: /* @__PURE__ */ e(ut, {}) }),
+    /* @__PURE__ */ e(ue, { index: 1, name: "debt-details", value: t, children: /* @__PURE__ */ e(gt, {}) })
   ] });
-}, Dt = S(vt), St = ({ isOpen: n, onClose: o }) => {
-  const { debts: r } = v(), { showError: t, showCompleted: a } = L(), i = t || a ? /* @__PURE__ */ e(O, {}) : /* @__PURE__ */ e(ut, {});
+}, St = D(Ct), vt = ({ isOpen: a, onClose: o }) => {
+  const { debts: r } = S(), { showError: t, showCompleted: n } = $(), i = t || n ? /* @__PURE__ */ e(H, {}) : /* @__PURE__ */ e(mt, {});
   return /* @__PURE__ */ e(
-    re,
+    te,
     {
       ariaLabelClose: r.details_close_aria,
-      isOpen: n,
+      isOpen: a,
       onClose: o,
       title: r.details_title,
       children: /* @__PURE__ */ s(w, { bgcolor: "background.default", children: [
-        /* @__PURE__ */ e(Be, { customDetailsChart: i }),
-        /* @__PURE__ */ e(Dt, {})
+        /* @__PURE__ */ e(ke, { customDetailsChart: i }),
+        /* @__PURE__ */ e(St, {})
       ] })
     }
   );
-}, Tt = S(() => {
-  const { debts: n } = v(), { monthlyCashFlowProfile: o, updateMonthlyCashFlowProfile: r } = Y(), { onEvent: t } = B(), [a, i] = g.useState(o?.extra_payment ?? 0), p = a < 0 || a > 9999999999e-2, c = async () => {
-    o && (await r({ ...o, extra_payment: a }), o.extra_payment = a, t(T.DEBTS_SAVE_PAYDOWN_ACTION, {
+}, Dt = D(() => {
+  const { debts: a } = S(), { monthlyCashFlowProfile: o, updateMonthlyCashFlowProfile: r } = V(), { onEvent: t } = F(), [n, i] = x.useState(o?.extra_payment ?? 0), p = n < 0 || n > 9999999999e-2, c = async () => {
+    o && (await r({ ...o, extra_payment: n }), o.extra_payment = n, t(T.DEBTS_SAVE_PAYDOWN_ACTION, {
       user_guid: o?.user_guid
     }));
   }, d = () => {
@@ -1031,83 +1030,83 @@ const we = ({
     }, 250);
   };
   return /* @__PURE__ */ e(
-    Q,
+    J,
     {
       isSaveDisabled: p,
-      label: n.paydown_drawer_extra_payment,
+      label: a.paydown_drawer_extra_payment,
       onCancel: d,
       onSave: c,
-      primaryText: n.paydown_drawer_extra_payment,
-      secondaryText: N(o?.extra_payment, "0,0"),
-      zeroStateText: o?.extra_payment ? void 0 : n.add_extra_payment,
+      primaryText: a.paydown_drawer_extra_payment,
+      secondaryText: k(o?.extra_payment, "0,0"),
+      zeroStateText: o?.extra_payment ? void 0 : a.add_extra_payment,
       children: /* @__PURE__ */ e(
-        oe,
+        ae,
         {
-          amount: a,
+          amount: n,
           autoFocus: !0,
           error: p,
           fullWidth: !0,
           minAmount: 0,
-          setAmount: (h) => i(isNaN(Number(h)) ? a : Number(h)),
-          sx: { ".MuiTypography-body1": { p: 0 } }
+          setAmount: (m) => i(isNaN(Number(m)) ? n : Number(m)),
+          sx: { ".MuiTypography-Body": { p: 0 } }
         }
       )
     }
   );
-}), At = () => {
-  const { debts: n } = v(), { totalMonthlyPayments: o } = Z(), { monthlyCashFlowProfile: r } = Y(), t = o + Number(r?.extra_payment);
+}), Tt = () => {
+  const { debts: a } = S(), { totalMonthlyPayments: o } = q(), { monthlyCashFlowProfile: r } = V(), t = o + Number(r?.extra_payment);
   return /* @__PURE__ */ s(w, { sx: { backgroundColor: "background.default", height: "100%" }, children: [
     /* @__PURE__ */ s(w, { p: 24, children: [
       /* @__PURE__ */ s(w, { alignItems: "center", gap: 4, mb: 24, children: [
-        /* @__PURE__ */ e(l, { variant: "body1", children: n.paydown_drawer_mimimum_label }),
-        /* @__PURE__ */ e(l, { bold: !0, variant: "h1", children: N(o, "0,0") }),
-        /* @__PURE__ */ e(l, { textAlign: "center", truncate: !1, variant: "body2", width: 208, children: n.paydown_drawer_minimum_info })
+        /* @__PURE__ */ e(l, { variant: "Body", children: a.paydown_drawer_mimimum_label }),
+        /* @__PURE__ */ e(l, { bold: !0, variant: "H1", children: k(o, "0,0") }),
+        /* @__PURE__ */ e(l, { textAlign: "center", truncate: !1, variant: "Small", width: 208, children: a.paydown_drawer_minimum_info })
       ] }),
       /* @__PURE__ */ s(w, { children: [
-        /* @__PURE__ */ e(l, { variant: "h3", children: n.paydown_drawer_subtitle }),
-        /* @__PURE__ */ e(l, { truncate: !1, variant: "subtitle2", children: n.paydown_drawer_description })
+        /* @__PURE__ */ e(l, { variant: "H3", children: a.paydown_drawer_subtitle }),
+        /* @__PURE__ */ e(l, { truncate: !1, variant: "ParagraphSmall", children: a.paydown_drawer_description })
       ] })
     ] }),
-    /* @__PURE__ */ e(w, { sx: { backgroundColor: "background.paper" }, children: /* @__PURE__ */ e(Tt, {}) }),
+    /* @__PURE__ */ e(w, { sx: { backgroundColor: "background.paper" }, children: /* @__PURE__ */ e(Dt, {}) }),
     /* @__PURE__ */ e(w, { flexDirection: "row-reverse", px: 24, py: 12, children: /* @__PURE__ */ s(w, { gap: 4, children: [
-      /* @__PURE__ */ e(l, { variant: "body2", children: n.paydown_drawer_total_payment }),
-      /* @__PURE__ */ e(l, { bold: !0, textAlign: "right", variant: "body1", children: N(t, "0,0") })
+      /* @__PURE__ */ e(l, { variant: "Small", children: a.paydown_drawer_total_payment }),
+      /* @__PURE__ */ e(l, { bold: !0, textAlign: "right", variant: "Body", children: k(t, "0,0") })
     ] }) })
   ] });
-}, Et = S(At), It = ({ isOpen: n, onClose: o }) => {
-  const { debts: r } = v();
+}, At = D(Tt), Et = ({ isOpen: a, onClose: o }) => {
+  const { debts: r } = S();
   return /* @__PURE__ */ e(
-    re,
+    te,
     {
       ariaLabelClose: r.paydown_drawer_close_aria,
-      isOpen: n,
+      isOpen: a,
       onClose: o,
       title: r.paydown_drawer_title,
-      children: /* @__PURE__ */ e(Et, {})
+      children: /* @__PURE__ */ e(At, {})
     }
   );
 };
-function Mt(n, o) {
+function It(a, o) {
   const r = (t) => {
     if (typeof t == "number") return t;
     if (t === "!" || t === "✓") return 1 / 0;
     throw new Error("Unsupported value");
   };
-  return r(n) - r(o);
+  return r(a) - r(o);
 }
-function kt(n) {
-  return n.is_paid_off ? "✓" : n.priority === void 0 || n.is_impossible ? "!" : n.priority;
+function Bt(a) {
+  return a.is_paid_off ? "✓" : a.priority === void 0 || a.is_impossible ? "!" : a.priority;
 }
-const Pt = (n) => {
+const Mt = (a) => {
   const o = {
     text: "#121417",
     background: "#FFB252"
   };
-  return n === "!" && (o.text = "#FFFFFF", o.background = "#DF320C"), n === "✓" && (o.text = "#FFFFFF", o.background = "#09A57F"), o;
-}, Nt = (n) => {
-  const o = String(n.formattedValue), r = Pt(o);
+  return a === "!" && (o.text = "#FFFFFF", o.background = "#DF320C"), a === "✓" && (o.text = "#FFFFFF", o.background = "#09A57F"), o;
+}, Pt = (a) => {
+  const o = String(a.formattedValue), r = Mt(o);
   return /* @__PURE__ */ e(
-    ne,
+    re,
     {
       sx: {
         display: "flex",
@@ -1120,40 +1119,40 @@ const Pt = (n) => {
         backgroundColor: r.background,
         marginLeft: "10px"
       },
-      children: /* @__PURE__ */ e(l, { color: r.text, fontWeight: 700, variant: "body2", children: o })
+      children: /* @__PURE__ */ e(l, { color: r.text, fontWeight: 700, variant: "Small", children: o })
     }
   );
-}, Ft = (n) => {
-  const o = n.row.account, r = Xe[o.account_type];
+}, kt = (a) => {
+  const o = a.row.account, r = Ke[o.account_type];
   return /* @__PURE__ */ s(w, { alignItems: "center", flexDirection: "row", children: [
     /* @__PURE__ */ e(
-      Te,
+      De,
       {
         alt: `${o.institutionName}`,
         institutionGuid: o.institution_guid || ""
       }
     ),
     /* @__PURE__ */ s(w, { ml: 12, children: [
-      /* @__PURE__ */ e(l, { variant: "body2", children: o.name }),
-      /* @__PURE__ */ e(l, { variant: "caption", children: r })
+      /* @__PURE__ */ e(l, { variant: "Small", children: o.name }),
+      /* @__PURE__ */ e(l, { variant: "XSmall", children: r })
     ] })
   ] });
-}, Bt = ({
-  sx: n = {},
+}, Nt = ({
+  sx: a = {},
   debts: o,
   hoveredDebtGuid: r,
   onHoverRow: t,
-  onClickRow: a
+  onClickRow: n
 }) => {
-  const i = V(), { onEvent: p } = B(), { isMobile: c } = K(), { debts: d } = v(), [h, m] = g.useState([
+  const i = X(), { onEvent: p } = F(), { isMobile: c } = Y(), { debts: d } = S(), [m, b] = x.useState([
     { field: "priority", sort: "asc" }
-  ]), x = [
+  ]), f = [
     {
       field: "priority",
       headerName: d.table_column_priority,
-      renderHeader: j,
-      renderCell: Nt,
-      sortComparator: Mt,
+      renderHeader: z,
+      renderCell: Pt,
+      sortComparator: It,
       sortable: !0,
       hideSortIcons: !0,
       type: "custom",
@@ -1165,8 +1164,8 @@ const Pt = (n) => {
     {
       field: "account",
       headerName: d.table_column_account,
-      renderHeader: j,
-      renderCell: Ft,
+      renderHeader: z,
+      renderCell: kt,
       sortable: !1,
       type: "custom",
       align: "left",
@@ -1177,8 +1176,8 @@ const Pt = (n) => {
     {
       field: "balance",
       headerName: d.table_column_balance,
-      renderHeader: j,
-      renderCell: (y) => /* @__PURE__ */ e(l, { color: i.palette.text.primary, variant: "body2", children: N(y.value, "0,0") }),
+      renderHeader: z,
+      renderCell: (y) => /* @__PURE__ */ e(l, { color: i.palette.text.primary, variant: "Small", children: k(y.value, "0,0") }),
       sortable: !0,
       hideSortIcons: c,
       type: "number",
@@ -1190,8 +1189,8 @@ const Pt = (n) => {
     {
       field: "interest_rate",
       headerName: d.table_column_interest_rate,
-      renderHeader: j,
-      renderCell: (y) => /* @__PURE__ */ e(l, { color: i.palette.text.primary, variant: "body2", children: isNaN(y.value) ? "---" : `${Number(y.value).toFixed(2)}%` }),
+      renderHeader: z,
+      renderCell: (y) => /* @__PURE__ */ e(l, { color: i.palette.text.primary, variant: "Small", children: isNaN(y.value) ? "---" : `${Number(y.value).toFixed(2)}%` }),
       sortable: !0,
       hideSortIcons: c,
       type: "number",
@@ -1203,8 +1202,8 @@ const Pt = (n) => {
     {
       field: "projected_payoff_date",
       headerName: d.table_column_payoff_date,
-      renderHeader: j,
-      renderCell: (y) => /* @__PURE__ */ e(l, { color: i.palette.text.primary, variant: "body2", children: y.value ? q(y.value, X.MONTH_SHORT_YEAR) : "---" }),
+      renderHeader: z,
+      renderCell: (y) => /* @__PURE__ */ e(l, { color: i.palette.text.primary, variant: "Small", children: y.value ? K(y.value, U.MONTH_SHORT_YEAR) : "---" }),
       sortable: !0,
       hideSortIcons: c,
       type: "number",
@@ -1216,8 +1215,8 @@ const Pt = (n) => {
     {
       field: "monthly_payment",
       headerName: d.table_column_amount_due,
-      renderHeader: j,
-      renderCell: (y) => /* @__PURE__ */ e(l, { color: i.palette.text.primary, variant: "body2", children: typeof y.value == "number" ? N(y.value, "0,0") : "---" }),
+      renderHeader: z,
+      renderCell: (y) => /* @__PURE__ */ e(l, { color: i.palette.text.primary, variant: "Small", children: typeof y.value == "number" ? k(y.value, "0,0") : "---" }),
       sortable: !0,
       hideSortIcons: c,
       type: "number",
@@ -1227,12 +1226,12 @@ const Pt = (n) => {
       flex: 0.6
     }
   ], u = [
-    ...x.slice(0, 3),
+    ...f.slice(0, 3),
     {
       field: "chevron",
       headerName: "",
       renderHeader: void 0,
-      renderCell: () => /* @__PURE__ */ e(te, { name: "chevron_right'" }),
+      renderCell: () => /* @__PURE__ */ e(ee, { name: "chevron_right'" }),
       sortable: !0,
       hideSortIcons: !0,
       type: "custom",
@@ -1240,20 +1239,20 @@ const Pt = (n) => {
       headerAlign: "right",
       width: 20
     }
-  ], D = g.useMemo(() => o.map((y, k) => ({
+  ], v = x.useMemo(() => o.map((y, N) => ({
     ...y,
-    id: k,
-    priority: kt(y)
+    id: N,
+    priority: Bt(y)
   })), [o]), M = (y) => {
-    const f = y.target.closest("[data-id]")?.getAttribute("data-id"), E = o[Number(f)];
-    t?.(E?.guid ?? "");
-  }, F = (y) => {
+    const g = y.target.closest("[data-id]")?.getAttribute("data-id"), A = o[Number(g)];
+    t?.(A?.guid ?? "");
+  }, I = (y) => {
     c || M(y);
   }, C = (y) => {
     c && M(y);
-  }, A = (y) => D.find((k) => k.guid === y)?.id;
+  }, B = (y) => v.find((N) => N.guid === y)?.id;
   return /* @__PURE__ */ e(
-    ne,
+    re,
     {
       sx: {
         height: "100dvh",
@@ -1261,36 +1260,36 @@ const Pt = (n) => {
         mt: "15px",
         overflowX: "auto",
         boxShadow: "none",
-        ...n
+        ...a
       },
       children: /* @__PURE__ */ e(
-        qe,
+        Ye,
         {
-          columns: c ? u : x,
+          columns: c ? u : f,
           disableColumnFilter: !0,
           disableColumnMenu: !0,
           hideFooter: !0,
-          initialState: { sorting: { sortModel: h } },
+          initialState: { sorting: { sortModel: m } },
           onRowClick: (y) => {
-            a(), p(T.DEBTS_CLICK_TABLE_ROW, { account_guid: y.row.guid });
+            n(), p(T.DEBTS_CLICK_TABLE_ROW, { account_guid: y.row.guid });
           },
           onSortModelChange: (y) => {
-            m(y), p(T.DEBTS_CLICK_TABLE_SORT);
+            b(y), p(T.DEBTS_CLICK_TABLE_SORT);
           },
-          rows: D,
+          rows: v,
           slotProps: {
             baseIconButton: { color: "secondary", sx: { ml: 8 } },
             row: {
-              onMouseEnter: F,
+              onMouseEnter: I,
               onMouseLeave: () => !c && t?.(""),
               onTouchStart: C,
               onClick: c ? C : void 0
             }
           },
-          sortModel: h,
+          sortModel: m,
           sortingOrder: ["asc", "desc"],
           sx: {
-            [`& .MuiDataGrid-row[data-id="${A(r)}"]`]: {
+            [`& .MuiDataGrid-row[data-id="${B(r)}"]`]: {
               backgroundColor: i.palette.mode === "light" ? "#f8f9fb" : "#1f2329",
               filter: "brightness(98%)"
             }
@@ -1299,33 +1298,33 @@ const Pt = (n) => {
       )
     }
   );
-}, Rt = ({ buttonText: n, isOpen: o, onClick: r }) => {
-  const { isDesktop: t, isTablet: a } = K(), i = o ? "unfold_less" : "unfold_more";
-  return t || a ? /* @__PURE__ */ e(
-    xe,
+}, Ft = ({ buttonText: a, isOpen: o, onClick: r }) => {
+  const { isDesktop: t, isTablet: n } = Y(), i = o ? "unfold_less" : "unfold_more";
+  return t || n ? /* @__PURE__ */ e(
+    fe,
     {
       "aria-controls": "prioritize-debts",
       "aria-describedby": "prioritize-debts",
       "aria-haspopup": !0,
       "aria-label": "prioritize-debts",
       onClick: r,
-      startIcon: /* @__PURE__ */ e(te, { name: i }),
+      startIcon: /* @__PURE__ */ e(ee, { name: i }),
       sx: { justifyContent: "start", minWidth: 214, mx: 4 },
-      children: n
+      children: a
     }
   ) : /* @__PURE__ */ e(
-    Ze,
+    Ue,
     {
       "aria-controls": "prioritize-debts",
       "aria-describedby": "prioritize-debts",
       "aria-haspopup": !0,
       "aria-label": "prioritize-debts",
       onClick: r,
-      children: /* @__PURE__ */ e(te, { name: i })
+      children: /* @__PURE__ */ e(ee, { name: i })
     }
   );
-}, Lt = S(({ buttonEl: n, onClose: o }) => {
-  const { onEvent: r } = B(), { debts: t } = v(), { selectedDebtPriority: a, setSelectedDebtPriority: i } = L(), p = !!n, c = [
+}, Rt = D(({ buttonEl: a, onClose: o }) => {
+  const { onEvent: r } = F(), { debts: t } = S(), { selectedDebtPriority: n, setSelectedDebtPriority: i } = $(), p = !!a, c = [
     {
       priority: P.FASTEST_PAYOFF_FIRST,
       text: t.priority_sort_fastest_payoff
@@ -1342,13 +1341,13 @@ const Pt = (n) => {
       priority: P.HIGHEST_BALANCE,
       text: t.priority_sort_highest_balance
     }
-  ], d = (h) => {
-    i(h), r(T.DEBTS_CLICK_PRIORITY, { debts_priority: h });
+  ], d = (m) => {
+    i(m), r(T.DEBTS_CLICK_PRIORITY, { debts_priority: m });
   };
   return /* @__PURE__ */ e(
-    Qe,
+    Ze,
     {
-      anchorEl: n,
+      anchorEl: a,
       anchorOrigin: {
         vertical: "bottom",
         horizontal: "left"
@@ -1360,13 +1359,13 @@ const Pt = (n) => {
         vertical: "top",
         horizontal: "left"
       },
-      children: /* @__PURE__ */ e(ye, { children: c.map(({ priority: h, text: m }) => /* @__PURE__ */ s(
-        Je,
+      children: /* @__PURE__ */ e(_e, { children: c.map(({ priority: m, text: b }) => /* @__PURE__ */ s(
+        qe,
         {
-          onClick: () => d(h),
+          onClick: () => d(m),
           sx: {
-            bgcolor: a === h ? "primary.main" : void 0,
-            color: a === h ? "#fff" : void 0,
+            bgcolor: n === m ? "primary.main" : void 0,
+            color: n === m ? "#fff" : void 0,
             justifyContent: "space-between",
             minHeight: 44,
             minWidth: 268,
@@ -1379,173 +1378,176 @@ const Pt = (n) => {
             }
           },
           children: [
-            /* @__PURE__ */ e(l, { color: "inherit", variant: "body2", children: m }),
-            a === h && /* @__PURE__ */ e(fe, { color: "inherit", filled: !0, fontSize: "small" })
+            /* @__PURE__ */ e(l, { color: "inherit", variant: "Small", children: b }),
+            n === m && /* @__PURE__ */ e(ye, { color: "inherit", filled: !0, fontSize: "small" })
           ]
         },
-        h
+        m
       )) })
     }
   );
-}), $t = S(() => {
-  const { onEvent: n } = B(), { debts: o } = v(), { selectedDebtPriority: r } = L(), [t, a] = g.useState(null), i = (h) => {
-    a(h.currentTarget), n(T.DEBTS_CLICK_PRIORITIZE);
+}), Lt = D(() => {
+  const { onEvent: a } = F(), { debts: o } = S(), { selectedDebtPriority: r } = $(), [t, n] = x.useState(null), i = (m) => {
+    n(m.currentTarget), a(T.DEBTS_CLICK_PRIORITIZE);
   }, p = () => {
-    a(null);
-  }, c = !!t, d = g.useMemo(() => ({
+    n(null);
+  }, c = !!t, d = x.useMemo(() => ({
     [P.FASTEST_PAYOFF_FIRST]: o.priority_sort_fastest_payoff,
     [P.HIGHEST_INTEREST]: o.priority_sort_highest_interest,
     [P.HIGHEST_BALANCE]: o.priority_sort_highest_balance,
     [P.LOWEST_BALANCE]: o.priority_sort_lowest_balance
   })[r] ?? o.priority_sort_lowest_balance, [r]);
   return /* @__PURE__ */ s(_, { children: [
-    /* @__PURE__ */ e(Rt, { buttonText: d, isOpen: c, onClick: i }),
-    /* @__PURE__ */ e(Lt, { buttonEl: t, onClose: p })
+    /* @__PURE__ */ e(Ft, { buttonText: d, isOpen: c, onClick: i }),
+    /* @__PURE__ */ e(Rt, { buttonEl: t, onClose: p })
   ] });
-}), Ot = (n, o, r = 0) => {
-  const t = n.map((d) => ({ ...d }));
+}), $t = (a, o, r = 0) => {
+  const t = a.map((d) => ({ ...d }));
   ge(t, o);
-  const a = /* @__PURE__ */ new Date(), i = [];
+  const n = /* @__PURE__ */ new Date(), i = [];
   let p = 0, c = 1;
   for (const d of t)
     i.push({
       ...d,
       // Start with the initial balance
-      dataset: [{ x: new Date(a), y: d.balance }]
+      dataset: [{ x: new Date(n), y: d.balance }]
     });
   for (; t.some((d) => d.balance >= 0.01 && !d.is_impossible); ) {
-    let d = !1, h = !1, m = !1;
-    for (const [x, u] of t.entries()) {
+    let d = !1, m = !1, b = !1;
+    for (const [f, u] of t.entries()) {
       if (u.balance <= 0.01) continue;
-      const D = i[x].dataset, F = (u.interest_rate ?? 0) / 100 / 12, C = u.balance * F, A = u.monthly_payment ?? 0;
-      let y = A, k = 0;
-      !m && r > 0 && (y += r, m = !0), !h && p > 0 && (k = p, h = !0), u.balance += C;
-      const b = Math.min(u.balance, y + k);
-      if (b <= C) {
-        u.is_impossible = !0, i[x].is_impossible = !0, i[x].priority = void 0, D.push({ x: new Date(a), y: u.balance });
+      const v = i[f].dataset, I = (u.interest_rate ?? 0) / 100 / 12, C = u.balance * I, B = u.monthly_payment ?? 0;
+      let y = B, N = 0;
+      !b && r > 0 && (y += r, b = !0), !m && p > 0 && (N = p, m = !0), u.balance += C;
+      const h = Math.min(u.balance, y + N);
+      if (h <= C) {
+        u.is_impossible = !0, i[f].is_impossible = !0, i[f].priority = void 0, v.push({ x: new Date(n), y: u.balance });
         continue;
       }
-      u.balance -= b, u.balance = u.balance < 0.01 ? 0 : u.balance, D.push({
-        x: new Date(a),
+      u.balance -= h, u.balance = u.balance < 0.01 ? 0 : u.balance, v.push({
+        x: new Date(n),
         y: Math.max(0, u.balance),
-        payment: b,
-        extra: k
-      }), u.balance <= 0 && (p += A, i[x].projected_payoff_date = new Date(a)), b > 0 && (d = !0);
+        payment: h,
+        extra: N
+      }), u.balance <= 0 && (p += B, i[f].projected_payoff_date = new Date(n)), h > 0 && (d = !0);
     }
-    d && a.setMonth(a.getMonth() + 1);
+    d && n.setMonth(n.getMonth() + 1);
   }
   return i.forEach((d) => {
     (d.interest_rate === void 0 || d.monthly_payment === void 0) && (d.projected_payoff_date = void 0);
   }), i.forEach((d) => {
     d.priority = !d.is_paid_off && !d.is_impossible ? c++ : void 0;
   }), i;
-}, Ht = S(({ onClick: n }) => {
-  const { debts: o } = v(), { isDesktop: r } = K(), { totalMonthlyPayments: t } = Z(), { monthlyCashFlowProfile: a } = Y(), i = t + Number(a?.extra_payment), p = r ? o.paydown_button_long : o.paydown_button_short;
+}, Ht = D(({ onClick: a }) => {
+  const { debts: o } = S(), { isDesktop: r } = Y(), { totalMonthlyPayments: t } = q(), { monthlyCashFlowProfile: n } = V(), i = t + Number(n?.extra_payment), p = r ? o.paydown_button_long : o.paydown_button_short;
   return /* @__PURE__ */ e(
-    xe,
+    fe,
     {
       "aria-controls": "extra-paydown",
       "aria-describedby": "extra-paydown",
       "aria-haspopup": !0,
       "aria-label": "extra-paydown",
-      onClick: n,
+      onClick: a,
       sx: { justifyContent: "start", minWidth: 100, mx: 4 },
-      children: I(p, N(i, "0,0"))
+      children: E(p, k(i, "0,0"))
     }
   );
-}), Wt = ({ onBackClick: n, sx: o }) => {
-  const [r, t] = g.useState(!1), [a, i] = g.useState(!1), [p, c] = g.useState(!1), [d, h] = g.useState(""), { isDesktop: m, isMobile: x } = K(), { debts: u } = v(), { onEvent: D } = B(), { onLoad: M } = Ne(), { isCopyLoaded: F, isInitialized: C, setSelectedAccounts: A } = Fe(), { setSelectedAccount: y } = Re(), { selectedDebtPriority: k, setSelectedDebtChartData: b } = L(), { visibleDebtAccounts: f } = J(), { goalsLoaded: E, loadGoals: $, monthlyCashFlowProfile: R } = Y(), { debts: z } = Z(), U = g.useMemo(() => {
-    const H = R?.extra_payment ?? 0;
-    return Ot(z, k, H);
-  }, [z, k, R]);
-  g.useEffect(() => {
-    A(f), D(T.DEBTS_VIEW);
-  }, []), g.useEffect(() => {
-    A(f);
-  }, [f]), g.useEffect(() => {
-    C && $().finally(() => {
-      M?.("DebtsWidget");
-    });
-  }, [C]);
-  const ae = (H) => h(H), ie = () => {
-    const H = f.find((ee) => ee.guid === d), le = U.find((ee) => ee.guid === d);
-    H && y(H), le && b(le), t(!0);
-  }, Ce = () => D(T.DEBTS_CLICK_FILTER), ve = () => {
-    c(!0), D(T.DEBTS_CLICK_SNOWBALL_CTA);
-  }, De = () => {
-    i(!0), D(T.DEBTS_CLICK_PAYDOWN);
+}), Ot = ({ onBackClick: a, sx: o }) => {
+  const [r, t] = x.useState(!1), [n, i] = x.useState(!1), [p, c] = x.useState(!1), [d, m] = x.useState(""), { isDesktop: b, isMobile: f } = Y(), { debts: u } = S(), { onEvent: v } = F(), { isCopyLoaded: M, isInitialized: I, setSelectedAccounts: C } = Pe(), { setSelectedAccount: B } = Ne(), { selectedDebtPriority: y, setSelectedDebtChartData: N } = $(), { visibleDebtAccounts: h } = Z(), { goalsLoaded: g, loadGoals: A, monthlyCashFlowProfile: R } = V(), { debts: L } = q();
+  Je({
+    widgetName: "DebtsWidget",
+    isLoaded: g
+  });
+  const O = x.useMemo(() => {
+    const W = R?.extra_payment ?? 0;
+    return $t(L, y, W);
+  }, [L, y, R]);
+  x.useEffect(() => {
+    C(h), v(T.DEBTS_VIEW);
+  }, []), x.useEffect(() => {
+    C(h);
+  }, [h]), x.useEffect(() => {
+    I && A().finally();
+  }, [I]);
+  const oe = (W) => m(W), ne = () => {
+    const W = h.find((Q) => Q.guid === d), ie = O.find((Q) => Q.guid === d);
+    W && B(W), ie && N(ie), t(!0);
+  }, we = () => v(T.DEBTS_CLICK_FILTER), Ce = () => {
+    c(!0), v(T.DEBTS_CLICK_SNOWBALL_CTA);
+  }, Se = () => {
+    i(!0), v(T.DEBTS_CLICK_PAYDOWN);
   };
-  return !E || !F || !C ? /* @__PURE__ */ e(et, {}) : /* @__PURE__ */ s(
-    Ge,
+  return !g || !M || !I ? /* @__PURE__ */ e(Qe, {}) : /* @__PURE__ */ s(
+    Oe,
     {
-      accountOptions: f,
+      accountOptions: h,
       actions: [
-        /* @__PURE__ */ e($t, {}, "prioritize-debts"),
-        /* @__PURE__ */ e(Ht, { onClick: De }, "extra-paydown")
+        /* @__PURE__ */ e(Lt, {}, "prioritize-debts"),
+        /* @__PURE__ */ e(Ht, { onClick: Se }, "extra-paydown")
       ],
-      onAccountsFilterClick: Ce,
-      onBackClick: n,
+      onAccountsFilterClick: we,
+      onBackClick: a,
       sx: o,
       title: u.title,
       children: [
-        /* @__PURE__ */ s(w, { sx: { px: m ? "48px" : "24px" }, children: [
+        /* @__PURE__ */ s(w, { sx: { px: b ? "48px" : "24px" }, children: [
           /* @__PURE__ */ s(
             w,
             {
               sx: {
-                alignItems: x ? "flex-start" : "flex-end",
-                flexDirection: x ? "column" : "row",
-                mx: x ? "-12px" : 0
+                alignItems: f ? "flex-start" : "flex-end",
+                flexDirection: f ? "column" : "row",
+                mx: f ? "-12px" : 0
               },
               children: [
                 /* @__PURE__ */ e(
-                  we,
+                  xe,
                   {
-                    debts: U,
-                    height: x ? 250 : void 0,
+                    debts: O,
+                    height: f ? 250 : void 0,
                     hoveredDebtGuid: d,
-                    onClickArea: ie,
-                    onHoverArea: ae,
-                    sx: { mr: x ? "4px" : "-48px" }
+                    onClickArea: ne,
+                    onHoverArea: oe,
+                    sx: { mr: f ? "4px" : "-48px" }
                   }
                 ),
                 /* @__PURE__ */ e(
-                  lt,
+                  it,
                   {
-                    debts: U,
-                    onClickCta: ve,
-                    sx: { mb: x ? "0px" : "64px" }
+                    debts: O,
+                    onClickCta: Ce,
+                    sx: { mb: f ? "0px" : "64px" }
                   }
                 )
               ]
             }
           ),
-          /* @__PURE__ */ e(w, { sx: { mx: x ? "-24px" : 0 }, children: /* @__PURE__ */ e(
-            Bt,
+          /* @__PURE__ */ e(w, { sx: { mx: f ? "-24px" : 0 }, children: /* @__PURE__ */ e(
+            Nt,
             {
-              debts: U,
+              debts: O,
               hoveredDebtGuid: d,
-              onClickRow: ie,
-              onHoverRow: ae
+              onClickRow: ne,
+              onHoverRow: oe
             }
           ) })
         ] }),
         /* @__PURE__ */ e(
-          ct,
+          st,
           {
             isOpen: p,
             onClose: () => c(!1)
           }
         ),
-        /* @__PURE__ */ e(St, { isOpen: r, onClose: () => t(!1) }),
-        /* @__PURE__ */ e(It, { isOpen: a, onClose: () => i(!1) })
+        /* @__PURE__ */ e(vt, { isOpen: r, onClose: () => t(!1) }),
+        /* @__PURE__ */ e(Et, { isOpen: n, onClose: () => i(!1) })
       ]
     }
   );
-}, Fr = S(Wt);
+}, Nr = D(Ot);
 export {
-  we as DebtsChart,
+  xe as DebtsChart,
   Lr as DebtsStore,
-  Bt as DebtsTable,
-  Fr as DebtsWidget
+  Nt as DebtsTable,
+  Nr as DebtsWidget
 };