@mx-cartographer/experiences 9.0.0-alpha.al1 → 9.0.0-alpha.al2

package/dist/debts/index.es.js

@@ -1,7 +1,7 @@
 import { jsx as e, jsxs as s, Fragment as $ } from "react/jsx-runtime";
-import f from "react";
+import x from "react";
 import { observer as D } from "mobx-react-lite";
-import x from "@mui/material/Stack";
+import f from "@mui/material/Stack";
 import { useTheme as Y, Card as Ce, Stack as _, Box as W } from "@mui/material";
 import { Text as l, P as ve, H3 as Le, InstitutionLogo as $e, Icon as ae } from "@mxenabled/mxui";
 import { intervalToDuration as Oe, formatDuration as He } from "date-fns";
@@ -9,7 +9,7 @@ import { addMonths as ue } from "date-fns/addMonths";
 import { fromUnixTime as be } from "date-fns/fromUnixTime";
 import { getUnixTime as _e } from "date-fns/getUnixTime";
 import { a as N, M as We, I as Ge } from "../DebtsStore-BZqNLaqd.mjs";
-import { D as oo } from "../DebtsStore-BZqNLaqd.mjs";
+import { D as nn } from "../DebtsStore-BZqNLaqd.mjs";
 import { f as P, a as je } from "../NumberFormatting-QCaNwbjv.mjs";
 import { f as J, D as Q } from "../DateFormats-BMpMrZpW.mjs";
 import { G as ze, v as ee, u as C, k as V, g as B, d as te, a as Ye, b as Ve } from "../hooks-BxkfR-Ff.mjs";
@@ -28,9 +28,9 @@ import ye from "@mui/material/Tab";
 import et from "@mui/material/Tabs";
 import De from "@mui/material/List";
 import G from "@mui/material/Divider";
-import { M as tt, I as rt, O as ot } from "../OriginalBalanceAction-DjpvVVFz.mjs";
-import nt from "@mui/material/TextField";
-import { L as oe } from "../ListItemAction-4KB7P75M.mjs";
+import { M as tt, I as rt, O as nt } from "../OriginalBalanceAction-DjpvVVFz.mjs";
+import ot from "@mui/material/TextField";
+import { L as ne } from "../ListItemAction-4KB7P75M.mjs";
 import { C as se } from "../CurrencyInput-DuMktPu3.mjs";
 import fe from "@mui/material/Alert";
 import xe from "@mui/material/AlertTitle";
@@ -49,17 +49,17 @@ import { u as ht } from "../useWidgetLoadTimer-DgN1bTyu.mjs";
 import { L as mt } from "../Loader-D3rjKx72.mjs";
 import { W as ut } from "../WidgetContainer-BOehD4AH.mjs";
 import { E as bt } from "../EmptyState-DHAkGsjk.mjs";
-const _t = (o, n = 0, t = 0) => {
+const _t = (n, o = 0, t = 0) => {
   if (t === 0) return 0;
-  const r = n / (We * Ge);
+  const r = o / (We * Ge);
   return Math.ceil(
-    r === 0 ? o / t : -Math.log(1 - r * o / t) / Math.log(1 + r)
+    r === 0 ? n / t : -Math.log(1 - r * n / t) / Math.log(1 + r)
   );
-}, yt = (o, n, t, r, a) => {
+}, yt = (n, o, t, r, a) => {
   const i = [];
   if (t === 0) {
-    for (let c = 0; c < o; c++) {
-      const p = n - r * (c + 1), h = n - r * c, u = p >= 0 ? r : h;
+    for (let c = 0; c < n; c++) {
+      const p = o - r * (c + 1), h = o - r * c, u = p >= 0 ? r : h;
       i.push({
         balance: p >= 0 ? p : 0,
         interest: t,
@@ -78,8 +78,8 @@ const _t = (o, n = 0, t = 0) => {
     return i;
   }
   const d = t / 1200;
-  for (let c = 0; c < o; c++) {
-    const p = _e(ue(be(a), c + 1)), h = Math.pow(1 + d, c), u = n * h - r * ((h - 1) / d), w = Math.pow(1 + d, c + 1), b = n * w - r * ((w - 1) / d), I = r + Math.min(b, 0), M = u * d;
+  for (let c = 0; c < n; c++) {
+    const p = _e(ue(be(a), c + 1)), h = Math.pow(1 + d, c), u = o * h - r * ((h - 1) / d), w = Math.pow(1 + d, c + 1), b = o * w - r * ((w - 1) / d), I = r + Math.min(b, 0), M = u * d;
     i.push({
       balance: Math.max(0, b),
       interest: M,
@@ -89,25 +89,25 @@ const _t = (o, n = 0, t = 0) => {
     });
   }
   return i;
-}, ft = (o) => (o[o.length - 1] || {}).timestamp, xt = (o) => {
-  const { monthly_payment: n, interest_rate: t, balance: r, payment_due_date: a } = o, i = _t(r, t ?? 0, n ?? 0), d = yt(
+}, ft = (n) => (n[n.length - 1] || {}).timestamp, xt = (n) => {
+  const { monthly_payment: o, interest_rate: t, balance: r, payment_due_date: a } = n, i = _t(r, t ?? 0, o ?? 0), d = yt(
     i,
     r,
     t ?? 0,
-    n ?? 0,
+    o ?? 0,
     a
   ), c = ft(d);
   return {
-    ...o,
+    ...n,
     minimumFinalPayment: c,
     minimumPayments: d
   };
-}, Ae = (o, n) => {
-  const [t, r] = o.reduce(
+}, Ae = (n, o) => {
+  const [t, r] = n.reduce(
     ([a, i], d) => (d.is_paid_off || d.is_impossible ? i.push({ ...d, minimumPayments: [] }) : a.push(xt(d)), [a, i]),
     [[], []]
   );
-  switch (n) {
+  switch (o) {
     case N.FASTEST_PAYOFF_FIRST:
       t.sort((a, i) => (a.minimumFinalPayment ?? 0) - (i.minimumFinalPayment ?? 0));
       break;
@@ -123,13 +123,13 @@ const _t = (o, n = 0, t = 0) => {
     default:
       t.sort((a, i) => a.balance - i.balance);
   }
-  o.splice(0, o.length, ...t, ...r);
+  n.splice(0, n.length, ...t, ...r);
 };
-function gt(o, n, t = 0) {
-  const r = o.map((u) => ({ ...u })).filter(
+function gt(n, o, t = 0) {
+  const r = n.map((u) => ({ ...u })).filter(
     (u) => u.interest_rate !== void 0 && u.monthly_payment !== void 0 && !u.is_paid_off
   );
-  Ae(r, n);
+  Ae(r, o);
   let a = 0, i = 0;
   const d = /* @__PURE__ */ new Date(), c = /* @__PURE__ */ new Date();
   for (; r.some((u) => u.balance >= 0.01 && !u.is_impossible); ) {
@@ -156,14 +156,14 @@ function gt(o, n, t = 0) {
   };
 }
 const L = () => {
-  if (!f.useContext(ze))
+  if (!x.useContext(ze))
     throw new Error("useCateUiStore() must be used within the GlobalDataContext");
   return ee().uiStore;
-}, wt = ({ debts: o, onClickCta: n, sx: t }) => {
-  const r = Y(), { isMobile: a } = re(), { debts: i } = C(), { selectedDebtPriority: d } = L(), { monthlyCashFlowProfile: c } = V(), { payoffDate: p, payoffSavings: h, payoffDuration: u } = f.useMemo(() => {
+}, wt = ({ debts: n, onClickCta: o, sx: t }) => {
+  const r = Y(), { isMobile: a } = re(), { debts: i } = C(), { selectedDebtPriority: d } = L(), { monthlyCashFlowProfile: c } = V(), { payoffDate: p, payoffSavings: h, payoffDuration: u } = x.useMemo(() => {
     const w = c?.extra_payment ?? 0;
-    return gt(o, d, w);
-  }, [o, d, c]);
+    return gt(n, d, w);
+  }, [n, d, c]);
   return /* @__PURE__ */ e(
     Ce,
     {
@@ -202,7 +202,7 @@ const L = () => {
           {
             bold: !0,
             color: r.palette.primary.main,
-            onClick: n,
+            onClick: o,
             sx: { cursor: "pointer" },
             variant: "body2",
             children: i.snowball_card_cta
@@ -211,14 +211,14 @@ const L = () => {
       ] })
     }
   );
-}, Ct = D(wt), vt = ({ isOpen: o, onClose: n }) => {
-  const t = Y(), { debts: r } = C(), [a, i] = f.useState(!1);
+}, Ct = D(wt), vt = ({ isOpen: n, onClose: o }) => {
+  const t = Y(), { debts: r } = C(), [a, i] = x.useState(!1);
   return /* @__PURE__ */ e(
     ie,
     {
       ariaLabelClose: "",
-      isOpen: o,
-      onClose: n,
+      isOpen: n,
+      onClose: o,
       title: r.snowball_drawer_title,
       children: /* @__PURE__ */ s(_, { bgcolor: t.palette.background.default, height: "100%", children: [
         /* @__PURE__ */ s(_, { alignItems: "center", px: 24, py: 24, children: [
@@ -573,17 +573,17 @@ const L = () => {
     }
   );
 }, Dt = D(vt), St = "#FF7B08";
-function Tt(o, n) {
-  const [t, r, a] = o.replace(/^#/, "").match(/.{1,2}/g).map((d) => parseInt(d, 16)), i = [
-    Math.max(0, Math.min(255, Math.round(t * n))),
-    Math.max(0, Math.min(255, Math.round(r * n))),
-    Math.max(0, Math.min(255, Math.round(a * n)))
+function Tt(n, o) {
+  const [t, r, a] = n.replace(/^#/, "").match(/.{1,2}/g).map((d) => parseInt(d, 16)), i = [
+    Math.max(0, Math.min(255, Math.round(t * o))),
+    Math.max(0, Math.min(255, Math.round(r * o))),
+    Math.max(0, Math.min(255, Math.round(a * o)))
   ];
   return `rgb(${i[0]}, ${i[1]}, ${i[2]})`;
 }
 const Ee = ({
-  sx: o,
-  height: n = 500,
+  sx: n,
+  height: o = 500,
   width: t,
   debts: r,
   hoveredDebtGuid: a,
@@ -655,7 +655,7 @@ const Ee = ({
         {
           axisHighlight: { x: "none" },
           disableLineItemHighlight: !0,
-          height: n,
+          height: o,
           hideLegend: !0,
           margin: { bottom: 24, left: 32, right: 72, top: 48 },
           onAreaClick: (m, g) => {
@@ -696,7 +696,7 @@ const Ee = ({
             "& .MuiChartsAxis-tickLabel > tspan": {
               fontFamily: c.typography.body2.fontFamily
             },
-            ...o
+            ...n
           },
           width: t,
           xAxis: [
@@ -722,7 +722,7 @@ const Ee = ({
     }
   );
 }, At = () => {
-  const o = Y(), { debts: n } = C(), { selectedDebtChartData: t } = L();
+  const n = Y(), { debts: o } = C(), { selectedDebtChartData: t } = L();
   return /* @__PURE__ */ s($, { children: [
     /* @__PURE__ */ s(
       qe,
@@ -733,7 +733,7 @@ const Ee = ({
           }
         },
         children: [
-          /* @__PURE__ */ e(Ze, { sx: { pb: 0 }, title: /* @__PURE__ */ e(Le, { sx: { pb: 4 }, children: n.details_chart_title }) }),
+          /* @__PURE__ */ e(Ze, { sx: { pb: 0 }, title: /* @__PURE__ */ e(Le, { sx: { pb: 4 }, children: o.details_chart_title }) }),
           /* @__PURE__ */ e(Xe, { sx: { p: 0 }, children: /* @__PURE__ */ e(Ee, { debts: [t], height: 250 }) })
         ]
       }
@@ -741,51 +741,51 @@ const Ee = ({
     /* @__PURE__ */ e(
       l,
       {
-        color: o.palette.text.secondary,
+        color: n.palette.text.secondary,
         sx: { whiteSpace: "normal", textAlign: "center", px: 8, py: 12 },
         variant: "body2",
-        children: n.details_chart_description
+        children: o.details_chart_description
       }
     )
   ] });
 }, Et = D(At), It = () => {
-  const o = Y(), { onEvent: n } = B(), { debts: t } = C(), { selectedDebtChartData: r, showCompleted: a, showError: i } = L();
-  return f.useEffect(() => n(A.DEBT_SCHEDULE_VIEW), []), /* @__PURE__ */ e(De, { children: i || a ? /* @__PURE__ */ e(
+  const n = Y(), { onEvent: o } = B(), { debts: t } = C(), { selectedDebtChartData: r, showCompleted: a, showError: i } = L();
+  return x.useEffect(() => o(A.DEBT_SCHEDULE_VIEW), []), /* @__PURE__ */ e(De, { children: i || a ? /* @__PURE__ */ e(
     l,
     {
-      color: o.palette.secondary.main,
+      color: n.palette.secondary.main,
       component: "div",
       sx: { p: 32, textAlign: "center", whiteSpace: "normal" },
       variant: "body2",
       children: i ? t.schedule_error_message : t.schedule_complete_message
     }
   ) : /* @__PURE__ */ s($, { children: [
-    /* @__PURE__ */ s(x, { flexDirection: "row", justifyContent: "space-between", sx: { pt: 12, px: 24, pb: 8 }, children: [
+    /* @__PURE__ */ s(f, { flexDirection: "row", justifyContent: "space-between", sx: { pt: 12, px: 24, pb: 8 }, children: [
       /* @__PURE__ */ e(l, { bold: !0, variant: "caption", children: t.schedule_month_heading }),
       /* @__PURE__ */ e(l, { bold: !0, variant: "caption", children: t.schedule_amount_heading })
     ] }),
-    r.dataset.slice(1).map(({ x: d, y: c, payment: p }) => /* @__PURE__ */ e(x, { bgcolor: o.palette.background.paper, children: /* @__PURE__ */ e(x, { alignItems: "center", flexDirection: "row", pl: 24, children: /* @__PURE__ */ s(
-      x,
+    r.dataset.slice(1).map(({ x: d, y: c, payment: p }) => /* @__PURE__ */ e(f, { bgcolor: n.palette.background.paper, children: /* @__PURE__ */ e(f, { alignItems: "center", flexDirection: "row", pl: 24, children: /* @__PURE__ */ s(
+      f,
       {
         sx: {
-          borderBottom: `1px solid ${o.palette.divider}`,
+          borderBottom: `1px solid ${n.palette.divider}`,
           flexDirection: "row",
           flexGrow: 1,
           py: 14,
           pr: 24
         },
         children: [
-          /* @__PURE__ */ s(x, { flexGrow: 1, children: [
+          /* @__PURE__ */ s(f, { flexGrow: 1, children: [
             /* @__PURE__ */ e(l, { bold: !0, variant: "body1", children: J(d, Q.MONTH_YEAR) }),
-            /* @__PURE__ */ e(l, { color: o.palette.secondary.main, variant: "caption", children: t.schedule_month_label })
+            /* @__PURE__ */ e(l, { color: n.palette.secondary.main, variant: "caption", children: t.schedule_month_label })
           ] }),
-          /* @__PURE__ */ s(x, { children: [
+          /* @__PURE__ */ s(f, { children: [
             /* @__PURE__ */ e(l, { bold: !0, variant: "body1", children: P(c, "0,0.00") }),
             /* @__PURE__ */ e(
               l,
               {
                 bold: !0,
-                color: o.palette.success.main,
+                color: n.palette.success.main,
                 textAlign: "end",
                 variant: "tiny",
                 children: `+${P(p, "0,0")}`
@@ -795,8 +795,8 @@ const Ee = ({
         ]
       }
     ) }) }, String(d))),
-    /* @__PURE__ */ e(x, { bgcolor: "background.paper", children: /* @__PURE__ */ s(
-      x,
+    /* @__PURE__ */ e(f, { bgcolor: "background.paper", children: /* @__PURE__ */ s(
+      f,
       {
         sx: {
           alignItems: "center",
@@ -812,26 +812,26 @@ const Ee = ({
       }
     ) })
   ] }) });
-}, Mt = D(It), kt = D(({ debt: o }) => {
-  const { debts: n } = C(), { updateAccount: t } = te(), { onEvent: r } = B(), [a, i] = f.useState(o.interest_rate ?? 0), d = a < 0, c = async () => {
-    await t({ ...o.account, interest_rate: a }), o.interest_rate = a, r(A.DEBTS_SAVE_RATE_ACTION, { account_guid: o.guid });
+}, Mt = D(It), kt = D(({ debt: n }) => {
+  const { debts: o } = C(), { updateAccount: t } = te(), { onEvent: r } = B(), [a, i] = x.useState(n.interest_rate ?? 0), d = a < 0, c = async () => {
+    await t({ ...n.account, interest_rate: a }), n.interest_rate = a, r(A.DEBTS_SAVE_RATE_ACTION, { account_guid: n.guid });
   }, p = () => {
     setTimeout(() => {
-      i(o.interest_rate ?? 0);
+      i(n.interest_rate ?? 0);
     }, 250);
   };
   return /* @__PURE__ */ e(
-    oe,
+    ne,
     {
       isSaveDisabled: d,
-      label: `${n.details_interest_rate} (%)`,
+      label: `${o.details_interest_rate} (%)`,
       onCancel: p,
       onSave: c,
-      primaryText: n.details_interest_rate,
-      secondaryText: je(Number(o.interest_rate) / 100),
-      zeroStateText: o.interest_rate ? void 0 : n.add_interest_rate,
+      primaryText: o.details_interest_rate,
+      secondaryText: je(Number(n.interest_rate) / 100),
+      zeroStateText: n.interest_rate ? void 0 : o.add_interest_rate,
       children: /* @__PURE__ */ e(
-        nt,
+        ot,
         {
           error: d,
           fullWidth: !0,
@@ -842,24 +842,24 @@ const Ee = ({
       )
     }
   );
-}), Nt = D(({ debt: o }) => {
-  const { debts: n } = C(), { updateAccount: t } = te(), { onEvent: r } = B(), [a, i] = f.useState(o.monthly_payment ?? 0), d = a < 0 || a > 9999999999e-2, c = async () => {
-    await t({ ...o.account, minimum_payment: a }), o.monthly_payment = a, r(A.DEBTS_SAVE_PAYMENT_ACTION, { account_guid: o.guid });
+}), Nt = D(({ debt: n }) => {
+  const { debts: o } = C(), { updateAccount: t } = te(), { onEvent: r } = B(), [a, i] = x.useState(n.monthly_payment ?? 0), d = a < 0 || a > 9999999999e-2, c = async () => {
+    await t({ ...n.account, minimum_payment: a }), n.monthly_payment = a, r(A.DEBTS_SAVE_PAYMENT_ACTION, { account_guid: n.guid });
   }, p = () => {
     setTimeout(() => {
-      i(o.monthly_payment ?? 0);
+      i(n.monthly_payment ?? 0);
     }, 250);
   };
   return /* @__PURE__ */ e(
-    oe,
+    ne,
     {
       isSaveDisabled: d,
-      label: n.details_monthly_payment,
+      label: o.details_monthly_payment,
       onCancel: p,
       onSave: c,
-      primaryText: n.details_monthly_payment,
-      secondaryText: P(o.monthly_payment, "0,0"),
-      zeroStateText: o.monthly_payment ? void 0 : n.add_monthly_payment,
+      primaryText: o.details_monthly_payment,
+      secondaryText: P(n.monthly_payment, "0,0"),
+      zeroStateText: n.monthly_payment ? void 0 : o.add_monthly_payment,
       children: /* @__PURE__ */ e(
         se,
         {
@@ -874,24 +874,24 @@ const Ee = ({
       )
     }
   );
-}), Pt = D(({ debt: o }) => {
-  const { debts: n } = C(), { updateAccount: t } = te(), { onEvent: r } = B(), [a, i] = f.useState(o.original_balance ?? 0), d = a < 0 || a > 9999999999e-2, c = async () => {
-    await t({ ...o.account, original_balance: a }), o.original_balance = a, r(A.DEBTS_SAVE_BALANCE_ACTION, { account_guid: o.guid });
+}), Pt = D(({ debt: n }) => {
+  const { debts: o } = C(), { updateAccount: t } = te(), { onEvent: r } = B(), [a, i] = x.useState(n.original_balance ?? 0), d = a < 0 || a > 9999999999e-2, c = async () => {
+    await t({ ...n.account, original_balance: a }), n.original_balance = a, r(A.DEBTS_SAVE_BALANCE_ACTION, { account_guid: n.guid });
   }, p = () => {
     setTimeout(() => {
-      i(o.original_balance ?? 0);
+      i(n.original_balance ?? 0);
     }, 250);
   };
   return /* @__PURE__ */ e(
-    oe,
+    ne,
     {
       isSaveDisabled: d,
-      label: n.details_original_balance,
+      label: o.details_original_balance,
       onCancel: p,
       onSave: c,
-      primaryText: n.details_original_balance,
-      secondaryText: P(o.original_balance, "0,0"),
-      zeroStateText: o.original_balance ? void 0 : n.add_original_balance,
+      primaryText: o.details_original_balance,
+      secondaryText: P(n.original_balance, "0,0"),
+      zeroStateText: n.original_balance ? void 0 : o.add_original_balance,
       children: /* @__PURE__ */ e(
         se,
         {
@@ -907,31 +907,31 @@ const Ee = ({
     }
   );
 }), Rt = () => {
-  const { onEvent: o } = B(), { selectedDebtChartData: n } = L();
-  return f.useEffect(() => o(A.DEBT_DETAILS_VIEW), []), /* @__PURE__ */ s(x, { bgcolor: "background.paper", children: [
-    n?.goal && /* @__PURE__ */ s($, { children: [
-      /* @__PURE__ */ e(tt, { goal: n.goal }),
+  const { onEvent: n } = B(), { selectedDebtChartData: o } = L();
+  return x.useEffect(() => n(A.DEBT_DETAILS_VIEW), []), /* @__PURE__ */ s(f, { bgcolor: "background.paper", children: [
+    o?.goal && /* @__PURE__ */ s($, { children: [
+      /* @__PURE__ */ e(tt, { goal: o.goal }),
       /* @__PURE__ */ e(G, {}),
-      /* @__PURE__ */ e(rt, { goal: n.goal }),
+      /* @__PURE__ */ e(rt, { goal: o.goal }),
       /* @__PURE__ */ e(G, {}),
-      /* @__PURE__ */ e(ot, { goal: n.goal }),
+      /* @__PURE__ */ e(nt, { goal: o.goal }),
       /* @__PURE__ */ e(G, {})
     ] }),
-    !n?.goal && n?.account && /* @__PURE__ */ s($, { children: [
-      /* @__PURE__ */ e(Nt, { debt: n }),
+    !o?.goal && o?.account && /* @__PURE__ */ s($, { children: [
+      /* @__PURE__ */ e(Nt, { debt: o }),
       /* @__PURE__ */ e(G, {}),
-      /* @__PURE__ */ e(kt, { debt: n }),
+      /* @__PURE__ */ e(kt, { debt: o }),
       /* @__PURE__ */ e(G, {}),
-      /* @__PURE__ */ e(Pt, { debt: n }),
+      /* @__PURE__ */ e(Pt, { debt: o }),
       /* @__PURE__ */ e(G, {})
     ] })
   ] });
-}, Bt = D(Rt), Ft = ({ setTabValue: o, sx: n }) => {
+}, Bt = D(Rt), Ft = ({ setTabValue: n, sx: o }) => {
   const { debts: t } = C(), { showError: r, showCompleted: a } = L();
-  return f.useEffect(() => {
-    r && o(1);
-  }, [r]), !r && !a ? /* @__PURE__ */ e($, {}) : /* @__PURE__ */ s(x, { gap: 16, children: [
-    /* @__PURE__ */ e(ge, { sx: { my: 16, mx: 24, ...n }, children: /* @__PURE__ */ s(
+  return x.useEffect(() => {
+    r && n(1);
+  }, [r]), !r && !a ? /* @__PURE__ */ e($, {}) : /* @__PURE__ */ s(f, { gap: 16, children: [
+    /* @__PURE__ */ e(ge, { sx: { my: 16, mx: 24, ...o }, children: /* @__PURE__ */ s(
       fe,
       {
         icon: r ? /* @__PURE__ */ e(at, { filled: !0 }) : /* @__PURE__ */ e(Se, { color: "success", filled: !0 }),
@@ -952,7 +952,7 @@ const Ee = ({
         ]
       }
     ) }),
-    r && /* @__PURE__ */ e(ge, { sx: { mb: 16, mt: 100, mx: 24, ...n }, children: /* @__PURE__ */ s(
+    r && /* @__PURE__ */ e(ge, { sx: { mb: 16, mt: 100, mx: 24, ...o }, children: /* @__PURE__ */ s(
       fe,
       {
         icon: /* @__PURE__ */ e($, {}),
@@ -972,13 +972,13 @@ const Ee = ({
     ) })
   ] });
 }, Lt = D(Ft), $t = () => {
-  const { debts: o } = C(), { showError: n, showCompleted: t } = L(), [r, a] = f.useState(0);
+  const { debts: n } = C(), { showError: o, showCompleted: t } = L(), [r, a] = x.useState(0);
   return /* @__PURE__ */ s($, { children: [
-    (n || t) && /* @__PURE__ */ e(Lt, { setTabValue: a, sx: { mt: -24 } }),
+    (o || t) && /* @__PURE__ */ e(Lt, { setTabValue: a, sx: { mt: -24 } }),
     /* @__PURE__ */ s(
       et,
       {
-        "aria-label": o.details_tabs_aria_label,
+        "aria-label": n.details_tabs_aria_label,
         centered: !0,
         onChange: (i, d) => a(d),
         textColor: "primary",
@@ -990,7 +990,7 @@ const Ee = ({
             {
               "aria-controls": "debt-schedule-tabpanel-0",
               id: "debt-schedule-tab-0",
-              label: o.schedule_tab_label
+              label: n.schedule_tab_label
             }
           ),
           /* @__PURE__ */ e(
@@ -998,7 +998,7 @@ const Ee = ({
             {
               "aria-controls": "debt-details-tabpanel-1",
               id: "debt-details-tab-1",
-              label: o.details_tab_label
+              label: n.details_tab_label
             }
           )
         ]
@@ -1007,41 +1007,41 @@ const Ee = ({
     /* @__PURE__ */ e(we, { index: 0, name: "debt-schedule", value: r, children: /* @__PURE__ */ e(Mt, {}) }),
     /* @__PURE__ */ e(we, { index: 1, name: "debt-details", value: r, children: /* @__PURE__ */ e(Bt, {}) })
   ] });
-}, Ot = D($t), Ht = ({ isOpen: o, onClose: n }) => {
+}, Ot = D($t), Ht = ({ isOpen: n, onClose: o }) => {
   const { debts: t } = C(), { showError: r, showCompleted: a } = L(), i = r || a ? /* @__PURE__ */ e($, {}) : /* @__PURE__ */ e(Et, {});
   return /* @__PURE__ */ e(
     ie,
     {
       ariaLabelClose: t.details_close_aria,
-      isOpen: o,
-      onClose: n,
+      isOpen: n,
+      onClose: o,
       title: t.details_title,
-      children: /* @__PURE__ */ s(x, { bgcolor: "background.default", children: [
+      children: /* @__PURE__ */ s(f, { bgcolor: "background.default", children: [
         /* @__PURE__ */ e(Ke, { customDetailsChart: i }),
         /* @__PURE__ */ e(Ot, {})
       ] })
     }
   );
 }, Wt = D(() => {
-  const { debts: o } = C(), { monthlyCashFlowProfile: n, updateMonthlyCashFlowProfile: t } = V(), { onEvent: r } = B(), [a, i] = f.useState(n?.extra_payment ?? 0), d = a < 0 || a > 9999999999e-2, c = async () => {
-    n && (await t({ ...n, extra_payment: a }), n.extra_payment = a, r(A.DEBTS_SAVE_PAYDOWN_ACTION, {
-      user_guid: n?.user_guid
+  const { debts: n } = C(), { monthlyCashFlowProfile: o, updateMonthlyCashFlowProfile: t } = V(), { onEvent: r } = B(), [a, i] = x.useState(o?.extra_payment ?? 0), d = a < 0 || a > 9999999999e-2, c = async () => {
+    o && (await t({ ...o, extra_payment: a }), o.extra_payment = a, r(A.DEBTS_SAVE_PAYDOWN_ACTION, {
+      user_guid: o?.user_guid
     }));
   }, p = () => {
     setTimeout(() => {
-      i(n?.extra_payment ?? 0);
+      i(o?.extra_payment ?? 0);
     }, 250);
   };
   return /* @__PURE__ */ e(
-    oe,
+    ne,
     {
       isSaveDisabled: d,
-      label: o.paydown_drawer_extra_payment,
+      label: n.paydown_drawer_extra_payment,
       onCancel: p,
       onSave: c,
-      primaryText: o.paydown_drawer_extra_payment,
-      secondaryText: P(n?.extra_payment, "0,0"),
-      zeroStateText: n?.extra_payment ? void 0 : o.add_extra_payment,
+      primaryText: n.paydown_drawer_extra_payment,
+      secondaryText: P(o?.extra_payment, "0,0"),
+      zeroStateText: o?.extra_payment ? void 0 : n.add_extra_payment,
       children: /* @__PURE__ */ e(
         se,
         {
@@ -1057,57 +1057,57 @@ const Ee = ({
     }
   );
 }), Gt = () => {
-  const { debts: o } = C(), { totalMonthlyPayments: n } = ee(), { monthlyCashFlowProfile: t } = V(), r = n + Number(t?.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: [
-        /* @__PURE__ */ e(l, { variant: "body1", children: o.paydown_drawer_mimimum_label }),
-        /* @__PURE__ */ e(ve, { bold: !0, variant: "h1", children: P(n, "0,0") }),
-        /* @__PURE__ */ e(l, { textAlign: "center", truncate: !1, variant: "body2", width: 208, children: o.paydown_drawer_minimum_info })
+  const { debts: n } = C(), { totalMonthlyPayments: o } = ee(), { monthlyCashFlowProfile: t } = V(), r = o + Number(t?.extra_payment);
+  return /* @__PURE__ */ s(f, { sx: { backgroundColor: "background.default", height: "100%" }, children: [
+    /* @__PURE__ */ s(f, { p: 24, children: [
+      /* @__PURE__ */ s(f, { alignItems: "center", gap: 4, mb: 24, children: [
+        /* @__PURE__ */ e(l, { variant: "body1", children: n.paydown_drawer_mimimum_label }),
+        /* @__PURE__ */ e(ve, { bold: !0, variant: "h1", children: P(o, "0,0") }),
+        /* @__PURE__ */ e(l, { textAlign: "center", truncate: !1, variant: "body2", width: 208, children: n.paydown_drawer_minimum_info })
       ] }),
-      /* @__PURE__ */ s(x, { children: [
-        /* @__PURE__ */ e(l, { variant: "h3", children: o.paydown_drawer_subtitle }),
-        /* @__PURE__ */ e(l, { truncate: !1, variant: "subtitle2", children: o.paydown_drawer_description })
+      /* @__PURE__ */ s(f, { 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(x, { sx: { backgroundColor: "background.paper" }, children: /* @__PURE__ */ e(Wt, {}) }),
-    /* @__PURE__ */ e(x, { flexDirection: "row-reverse", px: 24, py: 12, children: /* @__PURE__ */ s(x, { gap: 4, children: [
-      /* @__PURE__ */ e(l, { variant: "body2", children: o.paydown_drawer_total_payment }),
+    /* @__PURE__ */ e(f, { sx: { backgroundColor: "background.paper" }, children: /* @__PURE__ */ e(Wt, {}) }),
+    /* @__PURE__ */ e(f, { flexDirection: "row-reverse", px: 24, py: 12, children: /* @__PURE__ */ s(f, { gap: 4, children: [
+      /* @__PURE__ */ e(l, { variant: "body2", children: n.paydown_drawer_total_payment }),
       /* @__PURE__ */ e(l, { bold: !0, textAlign: "right", variant: "body1", children: P(r, "0,0") })
     ] }) })
   ] });
-}, jt = D(Gt), zt = ({ isOpen: o, onClose: n }) => {
+}, jt = D(Gt), zt = ({ isOpen: n, onClose: o }) => {
   const { debts: t } = C();
   return /* @__PURE__ */ e(
     ie,
     {
       ariaLabelClose: t.paydown_drawer_close_aria,
-      isOpen: o,
-      onClose: n,
+      isOpen: n,
+      onClose: o,
       title: t.paydown_drawer_title,
       children: /* @__PURE__ */ e(jt, {})
     }
   );
 };
-function Yt(o, n) {
+function Yt(n, o) {
   const t = (r) => {
     if (typeof r == "number") return r;
     if (r === "!" || r === "✓") return 1 / 0;
     throw new Error("Unsupported value");
   };
-  return t(o) - t(n);
+  return t(n) - t(o);
 }
-function Vt(o) {
-  return o.is_paid_off ? "✓" : o.priority === void 0 || o.is_impossible ? "!" : o.priority;
+function Vt(n) {
+  return n.is_paid_off ? "✓" : n.priority === void 0 || n.is_impossible ? "!" : n.priority;
 }
-const Kt = (o) => {
-  const n = {
+const Kt = (n) => {
+  const o = {
     text: "#121417",
     background: "#FFB252"
   };
-  return o === "!" && (n.text = "#FFFFFF", n.background = "#DF320C"), o === "✓" && (n.text = "#FFFFFF", n.background = "#09A57F"), n;
-}, Ut = (o) => {
-  const n = String(o.formattedValue), t = Kt(n);
+  return n === "!" && (o.text = "#FFFFFF", o.background = "#DF320C"), n === "✓" && (o.text = "#FFFFFF", o.background = "#09A57F"), o;
+}, Ut = (n) => {
+  const o = String(n.formattedValue), t = Kt(o);
   return /* @__PURE__ */ e(
     le,
     {
@@ -1122,32 +1122,32 @@ const Kt = (o) => {
         backgroundColor: t.background,
         marginLeft: "10px"
       },
-      children: /* @__PURE__ */ e(l, { color: t.text, fontWeight: 700, variant: "body2", children: n })
+      children: /* @__PURE__ */ e(l, { color: t.text, fontWeight: 700, variant: "body2", children: o })
     }
   );
-}, qt = (o) => {
-  const n = o.row.account, t = lt[n.account_type];
-  return /* @__PURE__ */ s(x, { alignItems: "center", flexDirection: "row", children: [
+}, qt = (n) => {
+  const o = n.row.account, t = lt[o.account_type];
+  return /* @__PURE__ */ s(f, { alignItems: "center", flexDirection: "row", children: [
     /* @__PURE__ */ e(
       $e,
       {
-        alt: `${n.institutionName}`,
-        institutionGuid: n.institution_guid || ""
+        alt: `${o.institutionName}`,
+        institutionGuid: o.institution_guid || ""
       }
     ),
-    /* @__PURE__ */ s(x, { ml: 12, children: [
-      /* @__PURE__ */ e(l, { variant: "body2", children: n.name }),
+    /* @__PURE__ */ s(f, { ml: 12, children: [
+      /* @__PURE__ */ e(l, { variant: "body2", children: o.name }),
       /* @__PURE__ */ e(l, { variant: "caption", children: t })
     ] })
   ] });
 }, Xt = ({
-  sx: o = {},
-  debts: n,
+  sx: n = {},
+  debts: o,
   hoveredDebtGuid: t,
   onHoverRow: r,
   onClickRow: a
 }) => {
-  const i = Y(), { onEvent: d } = B(), { isMobile: c } = re(), { debts: p, common: h } = C(), [u, w] = f.useState([
+  const i = Y(), { onEvent: d } = B(), { isMobile: c } = re(), { debts: p, common: h } = C(), [u, w] = x.useState([
     { field: "priority", sort: "asc" }
   ]), b = [
     {
@@ -1242,12 +1242,12 @@ const Kt = (o) => {
       headerAlign: "right",
       width: 20
     }
-  ], M = f.useMemo(() => n.map((y, m) => ({
+  ], M = x.useMemo(() => o.map((y, m) => ({
     ...y,
     id: m,
     priority: Vt(y)
-  })), [n]), k = (y) => {
-    const T = y.target.closest("[data-id]")?.getAttribute("data-id"), R = n[Number(T)];
+  })), [o]), k = (y) => {
+    const T = y.target.closest("[data-id]")?.getAttribute("data-id"), R = o[Number(T)];
     r?.(R?.guid ?? "");
   }, v = (y) => {
     c || k(y);
@@ -1264,7 +1264,7 @@ const Kt = (o) => {
         overflowX: "auto",
         overflowY: "visible",
         boxShadow: "none",
-        ...o
+        ...n
       },
       children: /* @__PURE__ */ e(
         it,
@@ -1304,8 +1304,8 @@ const Kt = (o) => {
     }
   );
 }, Zt = ({
-  buttonText: o,
-  disabled: n,
+  buttonText: n,
+  disabled: o,
   isOpen: t,
   onClick: r
 }) => {
@@ -1317,11 +1317,11 @@ const Kt = (o) => {
       "aria-describedby": "prioritize-debts",
       "aria-haspopup": !0,
       "aria-label": "prioritize-debts",
-      disabled: n,
+      disabled: o,
       onClick: r,
       startIcon: /* @__PURE__ */ e(ae, { name: i }),
       sx: { justifyContent: "start" },
-      children: o
+      children: n
     }
   ) : /* @__PURE__ */ e(
     st,
@@ -1330,13 +1330,13 @@ const Kt = (o) => {
       "aria-describedby": "prioritize-debts",
       "aria-haspopup": !0,
       "aria-label": "prioritize-debts",
-      disabled: n,
+      disabled: o,
       onClick: r,
       children: /* @__PURE__ */ e(ae, { name: i })
     }
   );
-}, Jt = D(({ buttonEl: o, onClose: n }) => {
-  const { onEvent: t } = B(), { debts: r } = C(), { selectedDebtPriority: a, setSelectedDebtPriority: i } = L(), d = !!o, c = [
+}, Jt = D(({ buttonEl: n, onClose: o }) => {
+  const { onEvent: t } = B(), { debts: r } = C(), { selectedDebtPriority: a, setSelectedDebtPriority: i } = L(), d = !!n, c = [
     {
       priority: N.FASTEST_PAYOFF_FIRST,
       text: r.priority_sort_fastest_payoff
@@ -1359,13 +1359,13 @@ const Kt = (o) => {
   return /* @__PURE__ */ e(
     dt,
     {
-      anchorEl: o,
+      anchorEl: n,
       anchorOrigin: {
         vertical: "bottom",
         horizontal: "left"
       },
       id: "prioritize-debts",
-      onClose: n,
+      onClose: o,
       open: d,
       transformOrigin: {
         vertical: "top",
@@ -1398,12 +1398,12 @@ const Kt = (o) => {
       )) })
     }
   );
-}), Qt = D(({ disabled: o }) => {
-  const { onEvent: n } = B(), { debts: t } = C(), { selectedDebtPriority: r } = L(), [a, i] = f.useState(null), d = (u) => {
-    i(u.currentTarget), n(A.DEBTS_CLICK_PRIORITIZE);
+}), Qt = D(({ disabled: n }) => {
+  const { onEvent: o } = B(), { debts: t } = C(), { selectedDebtPriority: r } = L(), [a, i] = x.useState(null), d = (u) => {
+    i(u.currentTarget), o(A.DEBTS_CLICK_PRIORITIZE);
   }, c = () => {
     i(null);
-  }, p = !!a, h = f.useMemo(() => ({
+  }, p = !!a, h = x.useMemo(() => ({
     [N.FASTEST_PAYOFF_FIRST]: t.priority_sort_fastest_payoff,
     [N.HIGHEST_INTEREST]: t.priority_sort_highest_interest,
     [N.HIGHEST_BALANCE]: t.priority_sort_highest_balance,
@@ -1414,16 +1414,16 @@ const Kt = (o) => {
       Zt,
       {
         buttonText: h,
-        disabled: o,
+        disabled: n,
         isOpen: p,
         onClick: d
       }
     ),
     /* @__PURE__ */ e(Jt, { buttonEl: a, onClose: c })
   ] });
-}), er = (o, n, t = 0) => {
-  const r = o.map((p) => ({ ...p }));
-  Ae(r, n);
+}), er = (n, o, t = 0) => {
+  const r = n.map((p) => ({ ...p }));
+  Ae(r, o);
   const a = /* @__PURE__ */ new Date(), i = [];
   let d = 0, c = 1;
   for (const p of r)
@@ -1458,27 +1458,27 @@ const Kt = (o) => {
   }), i.forEach((p) => {
     p.priority = !p.is_paid_off && !p.is_impossible ? c++ : void 0;
   }), i;
-}, tr = (o, n, t) => ({
-  description: n ? o.empty_state_description : o.empty_state_description_no_aggregation,
-  header: n ? o.empty_state_header : o.empty_state_header_no_aggregation,
-  onClickHandler: n ? t : void 0,
-  primaryButton: n ? o.connect_accounts : void 0
-}), rr = D(({ disabled: o, onClick: n }) => {
+}, tr = (n, o, t) => ({
+  description: o ? n.empty_state_description : n.empty_state_description_no_aggregation,
+  header: o ? n.empty_state_header : n.empty_state_header_no_aggregation,
+  onClickHandler: o ? t : void 0,
+  primaryButton: o ? n.connect_accounts : void 0
+}), rr = D(({ disabled: n, onClick: o }) => {
   const { debts: t } = C(), { totalMonthlyPayments: r } = ee(), { monthlyCashFlowProfile: a } = V(), i = r + Number(a?.extra_payment), d = t.paydown_button_long;
-  return /* @__PURE__ */ e(
+  return /* @__PURE__ */ e(f, { alignItems: "center", sx: { flex: 1, flexShrink: 0 }, children: /* @__PURE__ */ e(
     Te,
     {
       "aria-controls": "extra-paydown",
       "aria-describedby": "extra-paydown",
       "aria-haspopup": !0,
       "aria-label": "extra-paydown",
-      disabled: o,
-      onClick: n,
+      disabled: n,
+      onClick: o,
       sx: { justifyContent: "start" },
       children: E(d, P(i, "0,0"))
     }
-  );
-}), or = ({ onBackClick: o, onMenuClick: n, sx: t }) => {
+  ) });
+}), nr = ({ onBackClick: n, onMenuClick: o, sx: t }) => {
   const { isDesktop: r, isMobile: a } = re(), { connect: i, debts: d } = C(), { onEvent: c } = B(), {
     config: { show_connections_widget_in_master: p }
   } = Ye(), { isInitialized: h } = Ve(), { setSelectedAccount: u } = Ue(), { selectedDebtPriority: w, setSelectedDebtChartData: b } = L(), {
@@ -1486,22 +1486,22 @@ const Kt = (o) => {
     loadAccountData: M,
     detailedAccounts: k,
     visibleDebtAccounts: v
-  } = te(), { isAllGoalDataLoaded: S, loadGoalData: O, monthlyCashFlowProfile: y } = V(), { debts: m } = ee(), [g, T] = f.useState(!1), [R, F] = f.useState(!1), [K, ce] = f.useState(!1), [U, Ie] = f.useState(""), [Me, de] = f.useState(!1);
+  } = te(), { isAllGoalDataLoaded: S, loadGoalData: O, monthlyCashFlowProfile: y } = V(), { debts: m } = ee(), [g, T] = x.useState(!1), [R, F] = x.useState(!1), [K, ce] = x.useState(!1), [U, Ie] = x.useState(""), [Me, de] = x.useState(!1);
   ht({
     widgetName: "DebtsWidget",
     isLoaded: S
   });
-  const q = f.useMemo(() => {
+  const q = x.useMemo(() => {
     const H = y?.extra_payment ?? 0;
     return er(m, w, H);
   }, [m, w, y]);
-  f.useEffect(() => {
+  x.useEffect(() => {
     I || M().finally(), c(A.DEBTS_VIEW);
-  }, []), f.useEffect(() => {
+  }, []), x.useEffect(() => {
     h && O().finally();
   }, [h]);
   const pe = (H) => Ie(H), he = () => {
-    const H = v.find((ne) => ne.guid === U), me = q.find((ne) => ne.guid === U);
+    const H = v.find((oe) => oe.guid === U), me = q.find((oe) => oe.guid === U);
     H && u(H), me && b(me), T(!0);
   }, ke = () => c(A.DEBTS_CLICK_FILTER), Ne = () => {
     ce(!0), c(A.DEBTS_CLICK_SNOWBALL_CTA);
@@ -1528,13 +1528,13 @@ const Kt = (o) => {
       ],
       hasDivider: !0,
       onAccountsFilterClick: ke,
-      onBackClick: o,
-      onMenuClick: n,
+      onBackClick: n,
+      onMenuClick: o,
       slotComponent: /* @__PURE__ */ e(rr, { disabled: X, onClick: Pe }, "extra-paydown"),
       sx: t,
       title: d.title,
       children: [
-        /* @__PURE__ */ s(x, { sx: { pt: 48, px: r ? "48px" : "24px" }, children: [
+        /* @__PURE__ */ s(f, { sx: { pt: 48, px: r ? "48px" : "24px" }, children: [
           X && /* @__PURE__ */ e(
             bt,
             {
@@ -1548,7 +1548,7 @@ const Kt = (o) => {
           ),
           !X && /* @__PURE__ */ s($, { children: [
             /* @__PURE__ */ s(
-              x,
+              f,
               {
                 sx: {
                   alignItems: a ? "flex-start" : "flex-end",
@@ -1578,7 +1578,7 @@ const Kt = (o) => {
                 ]
               }
             ),
-            /* @__PURE__ */ e(x, { sx: { mx: a ? "-24px" : 0 }, children: /* @__PURE__ */ e(
+            /* @__PURE__ */ e(f, { sx: { mx: a ? "-24px" : 0 }, children: /* @__PURE__ */ e(
               Xt,
               {
                 debts: q,
@@ -1609,10 +1609,10 @@ const Kt = (o) => {
       ]
     }
   );
-}, eo = D(or);
+}, en = D(nr);
 export {
   Ee as DebtsChart,
-  oo as DebtsStore,
+  nn as DebtsStore,
   Xt as DebtsTable,
-  eo as DebtsWidget
+  en as DebtsWidget
 };

package/package.json

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