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

package/dist/cashflow/index.es.js

@@ -2,52 +2,53 @@ import { jsxs as o, Fragment as U, jsx as e } from "react/jsx-runtime";
 import f, { useState as J } from "react";
 import { observer as T } from "mobx-react-lite";
 import { addMonths as Pe } from "date-fns/addMonths";
-import { startOfToday as H } from "date-fns/startOfToday";
+import { startOfToday as W } from "date-fns/startOfToday";
 import D from "@mui/material/Box";
 import v from "@mui/material/Divider";
 import s from "@mui/material/Stack";
-import { useTheme as se, alpha as qe, keyframes as Ye } from "@mui/material/styles";
-import { Text as h, P as N, Icon as j, InstitutionLogo as xe, H1 as de, H2 as Qe } from "@mxenabled/mxui";
-import { G as Ve, v as me, u as k, q as ce, d as Le, b as q, j as P, g as ke, n as Xe, a as Ke, h as Ne, p as Je } from "../hooks-C41HAxM5.mjs";
+import se from "@mui/material/styles/useTheme";
+import { Text as h, P as N, Icon as j, InstitutionLogo as xe, H1 as de, H2 as qe } from "@mxenabled/mxui";
+import { G as Xe, v as me, u as k, q as ce, d as Le, b as q, j as P, g as ke, n as Ye, a as Qe, h as Ne, p as Ve } from "../hooks-C41HAxM5.mjs";
 import { C as L } from "../CurrencyText-Dr0EZ7bp.mjs";
-import { u as ue } from "../useScreenSize-B5afALev.mjs";
-import { L as te } from "../Loader-Ckqi9Rx6.mjs";
-import { I as he } from "../CashflowStore-CA190BPF.mjs";
-import { C as jn } from "../CashflowStore-CA190BPF.mjs";
+import { u as ue } from "../useScreenSize-B6JyS_Lj.mjs";
+import { L as te } from "../Loader-BSWSYqvn.mjs";
+import { I as he } from "../CashflowStore-naOtJcwo.mjs";
+import { C as zn } from "../CashflowStore-naOtJcwo.mjs";
 import { b as $ } from "../Localization-2MODESHW.mjs";
-import { M as Ze } from "../MiniWidgetContainer-CKzf_Ira.mjs";
-import { E as et } from "../EmptyState-DoxNUae-.mjs";
-import { R as tt } from "../RecurringSettings-DAncu--R.mjs";
-import nt from "@mui/material/Tabs";
+import { M as Ke } from "../MiniWidgetContainer-D7MkHG15.mjs";
+import { E as Je } from "../EmptyState-DoxNUae-.mjs";
+import { R as Ze } from "../RecurringSettings-RfZ8Wuhh.mjs";
+import et from "@mui/material/Tabs";
 import ye from "@mui/material/Tab";
 import { getUnixTime as B } from "date-fns/getUnixTime";
 import ee from "@mui/material/List";
 import ne from "@mui/material/ListItem";
-import { A as ot } from "../AccountListItem-wgmlex-_.mjs";
-import { f as Y, a as Q } from "../Dialog-CDV0kKxj.mjs";
-import at from "@mui/material/ListSubheader";
+import { A as tt } from "../AccountListItem-DxmAs98Z.mjs";
+import { f as X, a as Y } from "../Dialog-CDV0kKxj.mjs";
+import nt from "@mui/material/ListSubheader";
 import { f as Z } from "../NumberFormatting-DjTD0t3W.mjs";
 import { isAfter as Oe } from "date-fns/isAfter";
-import { isBefore as Fe } from "date-fns/isBefore";
-import { isToday as We } from "date-fns/isToday";
+import { isBefore as He } from "date-fns/isBefore";
+import { isToday as Fe } from "date-fns/isToday";
 import { addDays as Ce } from "date-fns/addDays";
+import { alpha as ot, keyframes as at } from "@mui/material/styles";
 import { DataGridPro as it } from "@mui/x-data-grid-pro";
-import { T as _e } from "../TabContentContainer-CnMXkVqr.mjs";
+import { T as Se } from "../TabContentContainer-CnMXkVqr.mjs";
 import G from "@mui/material/Button";
-import { M as rt, S as st, i as ct, d as we, c as lt } from "../ManageIncome-8EsStyIQ.mjs";
-import { D as He } from "../Drawer-BF40nbsH.mjs";
+import { M as rt, S as st, i as ct, d as _e, c as lt } from "../ManageIncome-D_qVX5dN.mjs";
+import { D as We } from "../Drawer-Dqe5EqvA.mjs";
 import { subDays as Me } from "date-fns/subDays";
 import { endOfToday as dt } from "date-fns/endOfToday";
-import { W as mt, A as Se } from "../WidgetContainer-CDh9fjpR.mjs";
+import { W as mt, A as we } from "../WidgetContainer-B1Jzb4XA.mjs";
 import { formatISO as ut } from "date-fns/formatISO";
 import { fromUnixTime as Ie } from "date-fns/fromUnixTime";
 import { startOfMonth as ht } from "date-fns/startOfMonth";
-import { S as pt, c as ft } from "../TransactionDetails-Bn0qY5Hw.mjs";
-import { F as gt, R as De, e as ve } from "../RecurringTransactions-CxcSL1dY.mjs";
+import { S as pt, c as ft } from "../TransactionDetails-Duv1X9ec.mjs";
+import { F as gt, R as De, e as ve } from "../RecurringTransactions-Bhx56aA3.mjs";
 import { h as bt } from "../DateUtil-CDPZw_-m.mjs";
 import { F as xt, A as z } from "../Fetch-DecPFeGU.mjs";
-const V = () => {
-  if (!f.useContext(Ve))
+const Q = () => {
+  if (!f.useContext(Xe))
     throw new Error("useCashflowUiStore() must be used within the GlobalDataContext");
   return me().uiStore;
 }, yt = ({ remaining: a }) => {
@@ -74,8 +75,8 @@ const V = () => {
     selectedCashAccounts: d,
     setNextIncome: b,
     setSelectedCashAccounts: C,
-    setUpcomingExpenses: w
-  } = V(), { isDataLoaded: O, nextIncomeRecurrence: A, upcomingExpenses: F } = P();
+    setUpcomingExpenses: _
+  } = Q(), { isDataLoaded: O, nextIncomeRecurrence: A, upcomingExpenses: H } = P();
   f.useEffect(() => {
     c(i);
   }, [i]), f.useEffect(() => {
@@ -83,65 +84,65 @@ const V = () => {
       i.filter((I) => u.includes(I.guid))
     );
   }, [i, x]), f.useEffect(() => {
-    A && b(A), w(F);
-  }, [A, F]);
+    A && b(A), _(H);
+  }, [A, H]);
   const p = f.useMemo(
     () => i.filter((I) => u.includes(I.guid)).reduce((I, M) => I + (M?.balance || 0), 0),
-    [u, F]
-  ), S = f.useMemo(
+    [u, H]
+  ), w = f.useMemo(
     () => l.filter((I) => u.includes(I.accountGuid || "")).reduce((I, M) => I + M.amount, 0),
     [u, l]
   ), R = f.useMemo(
-    () => p - S,
-    [p, S]
+    () => p - w,
+    [p, w]
   );
   return O ? /* @__PURE__ */ e(D, { className: "mx-cashflow", pl: 16, pr: 16, pt: 16, children: n > 710 ? /* @__PURE__ */ o(
     s,
     {
-      border: `1px solid ${a.palette.neutral.light}`,
+      border: `1px solid ${a.palette.border.light}`,
       borderRadius: 1,
       direction: "row",
       justifyContent: "space-between",
       px: 24,
       children: [
         /* @__PURE__ */ o(s, { pb: 14, pt: 12, children: [
-          /* @__PURE__ */ e(L, { amount: p, variant: "h2" }),
-          /* @__PURE__ */ e(N, { variant: "caption", whiteSpace: "nowrap", children: $(
+          /* @__PURE__ */ e(L, { amount: p, variant: "H2" }),
+          /* @__PURE__ */ e(N, { variant: "XSmall", whiteSpace: "nowrap", children: $(
             m.total_cash_accounts,
             d.length
           ) })
         ] }),
         /* @__PURE__ */ e(s, { pt: 18, children: /* @__PURE__ */ e(j, { name: "remove" }) }),
         /* @__PURE__ */ o(s, { pb: 14, pt: 12, children: [
-          /* @__PURE__ */ e(L, { amount: S, variant: "h2" }),
-          /* @__PURE__ */ e(N, { variant: "caption", whiteSpace: "nowrap", children: $(m.expenses_due, l.length) })
+          /* @__PURE__ */ e(L, { amount: w, variant: "H2" }),
+          /* @__PURE__ */ e(N, { variant: "XSmall", whiteSpace: "nowrap", children: $(m.expenses_due, l.length) })
         ] }),
         /* @__PURE__ */ e(s, { pt: 18, children: /* @__PURE__ */ e(j, { name: "equal" }) }),
         /* @__PURE__ */ o(s, { pb: 14, pr: 24, pt: 12, children: [
-          /* @__PURE__ */ e(L, { amount: R, variant: "h2" }),
+          /* @__PURE__ */ e(L, { amount: R, variant: "H2" }),
           /* @__PURE__ */ o(s, { alignItems: "center", direction: "row", gap: 8, children: [
-            /* @__PURE__ */ e(N, { variant: "caption", whiteSpace: "nowrap", children: m.available_to_spend }),
+            /* @__PURE__ */ e(N, { variant: "XSmall", whiteSpace: "nowrap", children: m.available_to_spend }),
             /* @__PURE__ */ e(he, { body: m.tooltip_body, title: m.tooltip_title })
           ] })
         ] }),
-        /* @__PURE__ */ e(s, { borderLeft: `1px solid ${a.palette.neutral.light}`, pb: 12, pl: 24, pt: 12, children: /* @__PURE__ */ o(U, { children: [
-          /* @__PURE__ */ e(h, { variant: "h2", children: $(m.days, r) }),
-          /* @__PURE__ */ e(N, { variant: "caption", whiteSpace: "nowrap", children: m.next_paycheck })
+        /* @__PURE__ */ e(s, { borderLeft: `1px solid ${a.palette.border.light}`, pb: 12, pl: 24, pt: 12, children: /* @__PURE__ */ o(U, { children: [
+          /* @__PURE__ */ e(h, { variant: "H2", children: $(m.days, r) }),
+          /* @__PURE__ */ e(N, { variant: "XSmall", whiteSpace: "nowrap", children: m.next_paycheck })
         ] }) })
       ]
     }
-  ) : /* @__PURE__ */ o(s, { border: `1px solid ${a.palette.neutral.light}`, borderRadius: 1, children: [
+  ) : /* @__PURE__ */ o(s, { border: `1px solid ${a.palette.border.light}`, borderRadius: 1, children: [
     /* @__PURE__ */ o(s, { direction: "row", justifyContent: "space-between", p: 16, children: [
-      /* @__PURE__ */ e(h, { variant: "body2", children: $(
+      /* @__PURE__ */ e(h, { variant: "Small", children: $(
         m.total_cash_accounts,
         d.length
       ) }),
-      /* @__PURE__ */ e(L, { amount: g, bold: !0, variant: "caption" })
+      /* @__PURE__ */ e(L, { amount: g, bold: !0, variant: "XSmall" })
     ] }),
     /* @__PURE__ */ e(v, {}),
     /* @__PURE__ */ o(s, { direction: "row", justifyContent: "space-between", p: 16, children: [
-      /* @__PURE__ */ e(h, { variant: "body2", children: $(m.expenses_due, l.length) }),
-      /* @__PURE__ */ e(L, { amount: S, bold: !0, symbol: "-", variant: "caption" })
+      /* @__PURE__ */ e(h, { variant: "Small", children: $(m.expenses_due, l.length) }),
+      /* @__PURE__ */ e(L, { amount: w, bold: !0, symbol: "-", variant: "XSmall" })
     ] }),
     /* @__PURE__ */ e(v, {}),
     /* @__PURE__ */ e(
@@ -160,22 +161,22 @@ const V = () => {
     ),
     /* @__PURE__ */ e(v, {}),
     /* @__PURE__ */ o(s, { direction: "row", justifyContent: "space-between", p: 16, children: [
-      /* @__PURE__ */ e(h, { variant: "body2", children: m.next_paycheck }),
-      /* @__PURE__ */ e(h, { bold: !0, variant: "caption", children: $(m.days, r) })
+      /* @__PURE__ */ e(h, { variant: "Small", children: m.next_paycheck }),
+      /* @__PURE__ */ e(h, { bold: !0, variant: "XSmall", children: $(m.days, r) })
     ] })
   ] }) }) : /* @__PURE__ */ e(te, { height: t ? 210 : 120 });
-}, _t = T(Ct), wt = ({
+}, St = T(Ct), _t = ({
   onPrimaryCtaClick: a,
   onSecondaryCtaClick: n,
   sx: t = {}
 }) => {
   const { cashflow: i } = k(), { isInitialized: g } = q(), { loadRepeatingTransactionData: x, income: u, isDataLoaded: c, setDateRange: m } = P();
   f.useEffect(() => {
-    m({ start: H(), end: Pe(H(), 1) }), c || x().finally();
+    m({ start: W(), end: Pe(W(), 1) }), c || x().finally();
   }, []);
   const r = c && !u.length;
   return g ? /* @__PURE__ */ o(
-    Ze,
+    Ke,
     {
       className: "mx-exp-cashflow-miniwidget",
       onPrimaryCtaClick: a,
@@ -186,7 +187,7 @@ const V = () => {
       children: [
         !c && /* @__PURE__ */ e(te, {}),
         c && (r ? /* @__PURE__ */ e(
-          et,
+          Je,
           {
             header: i.create,
             icon: "local_atm",
@@ -195,11 +196,11 @@ const V = () => {
             primaryButtonStartIcon: "add",
             subText: i.create_description
           }
-        ) : /* @__PURE__ */ e(_t, {}))
+        ) : /* @__PURE__ */ e(St, {}))
       ]
     }
   ) : /* @__PURE__ */ e(te, {});
-}, Fn = T(wt), St = ({ remaining: a }) => /* @__PURE__ */ e(
+}, Fn = T(_t), wt = ({ remaining: a }) => /* @__PURE__ */ e(
   ne,
   {
     sx: {
@@ -219,8 +220,8 @@ var oe = /* @__PURE__ */ ((a) => (a.EXPENSE = "expense", a.INCOME = "income", a)
 const It = ({ recurrence: a }) => /* @__PURE__ */ o(U, { children: [
   /* @__PURE__ */ o(ne, { sx: { display: "flex", alignItems: "center", gap: 16, px: 24, py: 12 }, children: [
     /* @__PURE__ */ o(s, { alignItems: "center", height: 32, width: 32, children: [
-      /* @__PURE__ */ e(h, { bold: !0, sx: { fontSize: 11 }, children: Y(a.expectedDate, Q.MONTH) }),
-      /* @__PURE__ */ e(h, { bold: !0, sx: { fontSize: 11 }, children: Y(a.expectedDate, Q.DAY) })
+      /* @__PURE__ */ e(h, { bold: !0, sx: { fontSize: 11 }, children: X(a.expectedDate, Y.MONTH) }),
+      /* @__PURE__ */ e(h, { bold: !0, sx: { fontSize: 11 }, children: X(a.expectedDate, Y.DAY) })
     ] }),
     /* @__PURE__ */ e(h, { sx: { flexGrow: 1, fontSize: 13 }, children: a.name }),
     /* @__PURE__ */ e(
@@ -237,7 +238,7 @@ const It = ({ recurrence: a }) => /* @__PURE__ */ o(U, { children: [
   const { cashflow: t } = k();
   return /* @__PURE__ */ o(U, { children: [
     /* @__PURE__ */ o(
-      at,
+      nt,
       {
         sx: {
           alignItems: "center",
@@ -259,16 +260,16 @@ const It = ({ recurrence: a }) => /* @__PURE__ */ o(U, { children: [
     ),
     /* @__PURE__ */ e(v, {})
   ] });
-}, Ee = T(Dt), re = (a, n) => (t) => t.accountGuid === a.guid && (We(t.expectedDate) || Oe(t.expectedDate, n.start)) && Fe(t.expectedDate, n.end), vt = () => {
-  const { availableWidth: a } = ce(), { cashflow: n } = k(), { upcomingExpenses: t, upcomingIncome: i } = P(), { dateRange: g, selectedCashAccounts: x } = V();
+}, Ee = T(Dt), re = (a, n) => (t) => t.accountGuid === a.guid && (Fe(t.expectedDate) || Oe(t.expectedDate, n.start)) && He(t.expectedDate, n.end), vt = () => {
+  const { availableWidth: a } = ce(), { cashflow: n } = k(), { upcomingExpenses: t, upcomingIncome: i } = P(), { dateRange: g, selectedCashAccounts: x } = Q();
   return /* @__PURE__ */ o(s, { children: [
     /* @__PURE__ */ o(s, { direction: a < 400 ? "column" : "row", justifyContent: "space-between", children: [
       /* @__PURE__ */ e(h, { bold: !0, sx: { fontSize: 15, mb: 12, whiteSpace: "normal" }, children: n.accounts_breakdown }),
       /* @__PURE__ */ o(h, { bold: !0, sx: { fontSize: 15, mb: 12, whiteSpace: "normal" }, children: [
-        Y(g.start, Q.FULL_MONTH_DAY),
+        X(g.start, Y.FULL_MONTH_DAY),
         " -",
         " ",
-        Y(g.end, Q.FULL_MONTH_DAY)
+        X(g.end, Y.FULL_MONTH_DAY)
       ] })
     ] }),
     /* @__PURE__ */ e(s, { children: x.map((u) => {
@@ -286,13 +287,13 @@ const It = ({ recurrence: a }) => /* @__PURE__ */ o(U, { children: [
         {
           sx: {
             border: "1px solid",
-            borderColor: "neutral.light",
+            borderColor: "border.light",
             mb: 24,
             borderRadius: 1
           },
           children: [
             /* @__PURE__ */ e(
-              ot,
+              tt,
               {
                 account: u,
                 listItemProps: {
@@ -320,7 +321,7 @@ const It = ({ recurrence: a }) => /* @__PURE__ */ o(U, { children: [
               }
             ) }),
             /* @__PURE__ */ e(
-              St,
+              wt,
               {
                 remaining: (u.available_balance || u.balance || 0) + r - l
               }
@@ -332,7 +333,7 @@ const It = ({ recurrence: a }) => /* @__PURE__ */ o(U, { children: [
     }) })
   ] });
 }, At = T(vt), Et = () => {
-  const { availableWidth: a } = ce(), n = se(), { cashflow: t } = k(), { upcomingExpenses: i, upcomingIncome: g } = P(), { dateRange: x, selectedCashAccounts: u } = V(), c = [
+  const { availableWidth: a } = ce(), n = se(), { cashflow: t } = k(), { upcomingExpenses: i, upcomingIncome: g } = P(), { dateRange: x, selectedCashAccounts: u } = Q(), c = [
     {
       field: "account",
       flex: 1.5,
@@ -357,21 +358,21 @@ const It = ({ recurrence: a }) => /* @__PURE__ */ o(U, { children: [
       flex: 1,
       headerName: t.balance,
       type: "number",
-      renderCell: (r) => /* @__PURE__ */ e(h, { color: n.palette.text.primary, variant: "body2", children: Z(r.value, "0,0.00") })
+      renderCell: (r) => /* @__PURE__ */ e(h, { color: n.palette.text.primary, variant: "Small", children: Z(r.value, "0,0.00") })
     },
     {
       field: "income",
       flex: 1,
       headerName: t.projected_income,
       type: "number",
-      renderCell: (r) => /* @__PURE__ */ e(h, { color: n.palette.text.primary, variant: "body2", children: `+${Z(r.value, "0,0.00")}` })
+      renderCell: (r) => /* @__PURE__ */ e(h, { color: n.palette.text.primary, variant: "Small", children: `+${Z(r.value, "0,0.00")}` })
     },
     {
       field: "expenses",
       flex: 1.1,
       headerName: t.projected_expenses,
       type: "number",
-      renderCell: (r) => /* @__PURE__ */ e(h, { color: n.palette.text.primary, variant: "body2", children: `-${Z(r.value, "0,0.00")}` })
+      renderCell: (r) => /* @__PURE__ */ e(h, { color: n.palette.text.primary, variant: "Small", children: `-${Z(r.value, "0,0.00")}` })
     },
     {
       field: "remaining",
@@ -384,7 +385,7 @@ const It = ({ recurrence: a }) => /* @__PURE__ */ o(U, { children: [
           h,
           {
             color: Math.sign(l) === -1 ? n.palette.error.main : n.palette.text.primary,
-            variant: "body2",
+            variant: "Small",
             children: Z(l, "0,0.00")
           }
         );
@@ -392,10 +393,10 @@ const It = ({ recurrence: a }) => /* @__PURE__ */ o(U, { children: [
     }
   ], m = f.useMemo(() => u.map((r) => {
     const l = i.filter(
-      re(r, { start: H(), end: Ce(H(), 30) })
-    ).reduce((C, w) => C + w.amount, 0), d = g.filter(
-      re(r, { start: H(), end: Ce(H(), 30) })
-    ).reduce((C, w) => C + w.amount, 0), b = (r.balance || 0) + d - l;
+      re(r, { start: W(), end: Ce(W(), 30) })
+    ).reduce((C, _) => C + _.amount, 0), d = g.filter(
+      re(r, { start: W(), end: Ce(W(), 30) })
+    ).reduce((C, _) => C + _.amount, 0), b = (r.balance || 0) + d - l;
     return {
       account: r,
       balance: r.balance || 0,
@@ -440,10 +441,10 @@ const It = ({ recurrence: a }) => /* @__PURE__ */ o(U, { children: [
                 )
               ] }),
               /* @__PURE__ */ o(h, { bold: !0, sx: { fontSize: 15, whiteSpace: "normal" }, children: [
-                Y(x.start, Q.FULL_MONTH_DAY),
+                X(x.start, Y.FULL_MONTH_DAY),
                 " -",
                 " ",
-                Y(x.end, Q.FULL_MONTH_DAY)
+                X(x.end, Y.FULL_MONTH_DAY)
               ] })
             ]
           }
@@ -461,12 +462,12 @@ const It = ({ recurrence: a }) => /* @__PURE__ */ o(U, { children: [
             rows: m,
             sx: {
               border: "1px solid",
-              borderColor: "neutral.light",
+              borderColor: "border.light",
               borderRadius: 1,
               "& .MuiDataGrid-columnHeader .MuiIconButton-root": {
                 color: n.palette.primary.main,
                 "&:hover": {
-                  backgroundColor: qe(n.palette.primary.main, 0.1)
+                  backgroundColor: ot(n.palette.primary.main, 0.1)
                 }
               },
               "& .MuiDataGrid-columnHeaderTitle": {
@@ -479,13 +480,13 @@ const It = ({ recurrence: a }) => /* @__PURE__ */ o(U, { children: [
             }
           }
         ) : m.map((r) => {
-          const { name: l, nickname: d, institution_guid: b, account_number: C } = r.account, w = d || l;
+          const { name: l, nickname: d, institution_guid: b, account_number: C } = r.account, _ = d || l;
           return /* @__PURE__ */ e(
             ee,
             {
               sx: {
                 border: "1px solid",
-                borderColor: "neutral.light",
+                borderColor: "border.light",
                 borderRadius: 1,
                 marginBottom: 24
               },
@@ -508,9 +509,9 @@ const It = ({ recurrence: a }) => /* @__PURE__ */ o(U, { children: [
                             size: 16
                           }
                         ),
-                        /* @__PURE__ */ e(h, { variant: "body2", children: `${w} ${C ? `*${C}` : ""}` })
+                        /* @__PURE__ */ e(h, { variant: "Small", children: `${_} ${C ? `*${C}` : ""}` })
                       ] }),
-                      /* @__PURE__ */ e(L, { amount: r.balance, bold: !0, variant: "body2" })
+                      /* @__PURE__ */ e(L, { amount: r.balance, bold: !0, variant: "Small" })
                     ]
                   }
                 ),
@@ -524,8 +525,8 @@ const It = ({ recurrence: a }) => /* @__PURE__ */ o(U, { children: [
                     px: 16,
                     py: 12,
                     children: [
-                      /* @__PURE__ */ e(h, { variant: "body2", children: t.projected_income }),
-                      /* @__PURE__ */ e(L, { amount: r.income, bold: !0, symbol: "+", variant: "body2" })
+                      /* @__PURE__ */ e(h, { variant: "Small", children: t.projected_income }),
+                      /* @__PURE__ */ e(L, { amount: r.income, bold: !0, symbol: "+", variant: "Small" })
                     ]
                   }
                 ),
@@ -539,8 +540,8 @@ const It = ({ recurrence: a }) => /* @__PURE__ */ o(U, { children: [
                     px: 16,
                     py: 12,
                     children: [
-                      /* @__PURE__ */ e(h, { variant: "body2", children: t.projected_expenses }),
-                      /* @__PURE__ */ e(L, { amount: r.expenses, bold: !0, symbol: "-", variant: "body2" })
+                      /* @__PURE__ */ e(h, { variant: "Small", children: t.projected_expenses }),
+                      /* @__PURE__ */ e(L, { amount: r.expenses, bold: !0, symbol: "-", variant: "Small" })
                     ]
                   }
                 ),
@@ -575,7 +576,7 @@ const It = ({ recurrence: a }) => /* @__PURE__ */ o(U, { children: [
     t(i === 0 ? "cash_flow_summary" : "cash_flow_details");
   }, [i]), /* @__PURE__ */ o(D, { children: [
     /* @__PURE__ */ o(
-      nt,
+      et,
       {
         "aria-label": a.cashflow_summary_and_details,
         centered: !0,
@@ -610,8 +611,8 @@ const It = ({ recurrence: a }) => /* @__PURE__ */ o(U, { children: [
       }
     ),
     /* @__PURE__ */ e(D, { sx: { mb: 32 } }),
-    /* @__PURE__ */ e(_e, { index: 0, name: "cashflow", value: i, children: /* @__PURE__ */ e(D, { sx: { m: n ? 48 : 16 }, children: /* @__PURE__ */ e(Tt, {}) }) }),
-    /* @__PURE__ */ e(_e, { index: 1, name: "cashflow", value: i, children: /* @__PURE__ */ e(D, { sx: { m: n ? 48 : 16 }, children: /* @__PURE__ */ e(At, {}) }) })
+    /* @__PURE__ */ e(Se, { index: 0, name: "cashflow", value: i, children: /* @__PURE__ */ e(D, { sx: { m: n ? 48 : 16 }, children: /* @__PURE__ */ e(Tt, {}) }) }),
+    /* @__PURE__ */ e(Se, { index: 1, name: "cashflow", value: i, children: /* @__PURE__ */ e(D, { sx: { m: n ? 48 : 16 }, children: /* @__PURE__ */ e(At, {}) }) })
   ] });
 }, Lt = T(Rt), ie = ({
   amount: a,
@@ -629,31 +630,31 @@ const It = ({ recurrence: a }) => /* @__PURE__ */ o(U, { children: [
     padding: n ? "14px 16px" : 0,
     sx: { borderBottomLeftRadius: 4, borderBottomRightRadius: 4 },
     children: [
-      !n && /* @__PURE__ */ e(L, { amount: a, component: "h2", variant: "h2" }),
+      !n && /* @__PURE__ */ e(L, { amount: a, component: "h2", variant: "H2" }),
       /* @__PURE__ */ o(s, { alignItems: "center", component: "span", direction: "row", gap: 8, mt: 2, children: [
-        /* @__PURE__ */ e(h, { bold: t, variant: "body2", children: i }),
+        /* @__PURE__ */ e(h, { bold: t, variant: "Small", children: i }),
         x
       ] }),
-      n && /* @__PURE__ */ e(L, { amount: a, component: "h2", symbol: g, variant: "body2" })
+      n && /* @__PURE__ */ e(L, { amount: a, component: "h2", symbol: g, variant: "Small" })
     ]
   }
-), Te = (a, n) => (t) => t.accountGuid && a.includes(t.accountGuid) && (We(t.expectedDate) || Oe(t.expectedDate, n.start)) && Fe(t.expectedDate, n.end), kt = () => {
-  const { availableWidth: a } = ce(), { cashflow: n } = k(), { income: t, isDataLoaded: i, upcomingExpenses: g, upcomingIncome: x } = P(), { selectedAccountGuids: u } = q(), { dateRange: c, selectedCashAccounts: m } = V(), [r, l] = f.useState(!1), d = f.useMemo(
+), Te = (a, n) => (t) => t.accountGuid && a.includes(t.accountGuid) && (Fe(t.expectedDate) || Oe(t.expectedDate, n.start)) && He(t.expectedDate, n.end), kt = () => {
+  const { availableWidth: a } = ce(), { cashflow: n } = k(), { income: t, isDataLoaded: i, upcomingExpenses: g, upcomingIncome: x } = P(), { selectedAccountGuids: u } = q(), { dateRange: c, selectedCashAccounts: m } = Q(), [r, l] = f.useState(!1), d = f.useMemo(
     () => g.filter(Te(u, c)),
     [c, u, g]
   ), b = f.useMemo(
     () => x.filter(Te(u, c)),
     [c, u, x]
   ), C = f.useMemo(
-    () => m.reduce((S, R) => S + (R?.balance || 0), 0),
+    () => m.reduce((w, R) => w + (R?.balance || 0), 0),
     [m]
-  ), w = d.reduce((S, R) => S + R.amount, 0), O = b.reduce((S, R) => S + R.amount, 0), A = C - w + O, F = i && t.length > 0, p = a < 725;
+  ), _ = d.reduce((w, R) => w + R.amount, 0), O = b.reduce((w, R) => w + R.amount, 0), A = C - _ + O, H = i && t.length > 0, p = a < 725;
   return /* @__PURE__ */ o(s, { sx: { mx: p ? 16 : 0, my: p ? 24 : 42 }, children: [
     /* @__PURE__ */ o(
       s,
       {
         border: p ? "1px solid" : "none",
-        borderColor: "neutral.light",
+        borderColor: "border.light",
         borderRadius: 2,
         flexDirection: p ? "column" : "row",
         gap: p ? 0 : 24,
@@ -668,7 +669,7 @@ const It = ({ recurrence: a }) => /* @__PURE__ */ o(U, { children: [
             }
           ),
           p && /* @__PURE__ */ e(v, {}),
-          F ? /* @__PURE__ */ o(U, { children: [
+          H ? /* @__PURE__ */ o(U, { children: [
             !p && /* @__PURE__ */ e(h, { sx: { fontSize: 25, lineHeight: 1 }, children: "+" }),
             /* @__PURE__ */ e(
               ie,
@@ -692,7 +693,7 @@ const It = ({ recurrence: a }) => /* @__PURE__ */ o(U, { children: [
           /* @__PURE__ */ e(
             ie,
             {
-              amount: w,
+              amount: _,
               isMobile: p,
               label: $(n.to_be_paid_out, d.length),
               symbol: p ? "-" : void 0
@@ -719,7 +720,7 @@ const It = ({ recurrence: a }) => /* @__PURE__ */ o(U, { children: [
       }
     ),
     /* @__PURE__ */ e(
-      He,
+      We,
       {
         ariaLabelClose: n.close_manage_income_aria,
         isOpen: r,
@@ -737,22 +738,22 @@ const It = ({ recurrence: a }) => /* @__PURE__ */ o(U, { children: [
     setSelectedAccounts: g,
     shouldDisableNextDate: x,
     shouldDisablePrevDate: u
-  } = q(), { onEvent: c } = ke(), { onLoad: m } = Xe(), { clientConfig: r } = Ke(), { visibleCashAccounts: l } = Le(), { setFilter: d } = Ne(), { dateRange: b, setSelectedCashAccounts: C } = V(), { loadRepeatingTransactionData: w, isDataLoaded: O, setDateRange: A } = P(), { cashflow: F, recurring: p } = k(), { isInitialized: S } = q(), I = r?.master?.deep_link_params?.view === "manage_income", [M, ae] = f.useState(I);
+  } = q(), { onEvent: c } = ke(), { onLoad: m } = Ye(), { clientConfig: r } = Qe(), { visibleCashAccounts: l } = Le(), { setFilter: d } = Ne(), { dateRange: b, setSelectedCashAccounts: C } = Q(), { loadRepeatingTransactionData: _, isDataLoaded: O, setDateRange: A } = P(), { cashflow: H, recurring: p } = k(), { isInitialized: w } = q(), I = r?.master?.deep_link_params?.view === "manage_income", [M, ae] = f.useState(I);
   return f.useEffect(() => {
-    A(b), O || w().finally(() => {
+    A(b), O || _().finally(() => {
       m?.("CashflowWidget");
     });
   }, []), f.useEffect(() => {
     g(l);
   }, [l]), f.useEffect(() => {
-    const X = l.map((_) => _.guid), K = t.filter(
-      (_) => i.includes(_.guid) && X.includes(_.guid)
+    const V = l.map((S) => S.guid), K = t.filter(
+      (S) => i.includes(S.guid) && V.includes(S.guid)
     );
     C(K), d({
-      dateRange: { start: Me(H(), 90), end: dt() },
-      accounts: K.map((_) => _.guid)
+      dateRange: { start: Me(W(), 90), end: dt() },
+      accounts: K.map((S) => S.guid)
     });
-  }, [l, t]), S ? /* @__PURE__ */ o(
+  }, [l, t]), w ? /* @__PURE__ */ o(
     mt,
     {
       accountOptions: l,
@@ -761,7 +762,7 @@ const It = ({ recurrence: a }) => /* @__PURE__ */ o(U, { children: [
           label: p.action_title,
           iconName: "credit_card_gear",
           onClick: () => {
-            ae(!0), c(Se.CASH_FLOW_CLICK_SETTINGS);
+            ae(!0), c(we.CASH_FLOW_CLICK_SETTINGS);
           }
         }
       ],
@@ -774,38 +775,38 @@ const It = ({ recurrence: a }) => /* @__PURE__ */ o(U, { children: [
       },
       dateRange: b,
       dateRangeVariant: "readonly",
-      onAccountsFilterClick: () => c(Se.CASH_FLOW_CLICK_FILTER),
+      onAccountsFilterClick: () => c(we.CASH_FLOW_CLICK_FILTER),
       onBackClick: a,
       sx: n,
-      title: F.title,
+      title: H.title,
       children: [
         /* @__PURE__ */ e(Nt, {}),
         /* @__PURE__ */ e(Lt, {}),
         /* @__PURE__ */ e(
-          He,
+          We,
           {
-            ariaLabelClose: F.close_settings_aria,
+            ariaLabelClose: H.close_settings_aria,
             isOpen: M,
             onClose: () => ae(!1),
             shouldShowHeaderBorders: !1,
             title: p.action_title,
-            children: /* @__PURE__ */ e(tt, { defaultSelectedTab: I ? 1 : 0 })
+            children: /* @__PURE__ */ e(Ze, { defaultSelectedTab: I ? 1 : 0 })
           }
         )
       ]
     }
   ) : /* @__PURE__ */ e(te, {});
-}, Wn = T(Ot), Ft = ({ handleNextStep: a }) => {
+}, Wn = T(Ot), Ht = ({ handleNextStep: a }) => {
   const { completeOnboarding: n } = me(), { cashflow: t } = k(), i = se();
   return /* @__PURE__ */ o(s, { children: [
     /* @__PURE__ */ e(de, { pb: 12, children: t.welcome_title }),
     /* @__PURE__ */ e(
-      Qe,
+      qe,
       {
         color: i.palette.primary.light,
         pb: 8,
         sx: { wordBreak: "break-word", whiteSpace: "initial" },
-        variant: "h3",
+        variant: "H3",
         children: t.welcome_sub_title
       }
     ),
@@ -815,7 +816,7 @@ const It = ({ recurrence: a }) => /* @__PURE__ */ o(U, { children: [
         /* @__PURE__ */ e(
           D,
           {
-            bgcolor: i.palette.primary.light,
+            bgcolor: i.palette.primary.lighter,
             borderRadius: 1,
             component: "span",
             height: 44,
@@ -831,7 +832,7 @@ const It = ({ recurrence: a }) => /* @__PURE__ */ o(U, { children: [
         /* @__PURE__ */ e(
           D,
           {
-            bgcolor: i.palette.primary.light,
+            bgcolor: i.palette.primary.lighter,
             borderRadius: 1,
             component: "span",
             height: 44,
@@ -847,7 +848,7 @@ const It = ({ recurrence: a }) => /* @__PURE__ */ o(U, { children: [
         /* @__PURE__ */ e(
           D,
           {
-            bgcolor: i.palette.primary.light,
+            bgcolor: i.palette.primary.lighter,
             borderRadius: 1,
             component: "span",
             height: 44,
@@ -865,17 +866,17 @@ const It = ({ recurrence: a }) => /* @__PURE__ */ o(U, { children: [
       /* @__PURE__ */ e(G, { onClick: n, variant: "outlined", children: t.skip_button })
     ] })
   ] });
-}, Wt = T(Ft), Re = "https://content.moneydesktop.com/storage/MD_Assets/md/cashflow", $e = {
+}, Ft = T(Ht), Re = "https://content.moneydesktop.com/storage/MD_Assets/md/cashflow", $e = {
   CASHFLOW_ONBOARDING: `${Re}/cashflow-onboarding.png`,
   CASHFLOW_LOADING_ANIMATION: `${Re}/loading-animation.gif`
-}, Ht = () => {
+}, Wt = () => {
   const { cashflow: a } = k();
   return /* @__PURE__ */ o(f.Fragment, { children: [
     /* @__PURE__ */ e("div", { children: /* @__PURE__ */ e("img", { alt: "Loading", src: $e.CASHFLOW_LOADING_ANIMATION }) }),
     /* @__PURE__ */ e(de, { pb: 12, children: a.loading_title }),
     /* @__PURE__ */ e(N, { children: a.loading_description })
   ] });
-}, Mt = T(Ht), $t = Ye`
+}, Mt = T(Wt), $t = at`
   from {
     transform: rotate(0deg);
   }
@@ -883,7 +884,7 @@ const It = ({ recurrence: a }) => /* @__PURE__ */ o(U, { children: [
     transform: rotate(360deg);
   }
 `, Gt = () => {
-  const { addRepeatingTransaction: a, repeatingTransactions: n } = P(), { cashflow: t, common: i } = k(), { user: g } = Je(), { completeOnboarding: x } = me(), { isDirty: u } = V(), { isMobile: c } = ue(), { isCopyLoaded: m, setDisplayedDate: r } = q(), { filter: l, setFilter: d, transactions: b } = Ne(), C = se(), [w, O] = J(!0), [A, F] = f.useState(gt.EveryMonth), [p, S] = f.useState(1), [R, I] = f.useState(15), [M, ae] = J(!1), [X, K] = J(1), [_, Ge] = J([]), [fe, le] = J(""), W = f.useMemo(
+  const { addRepeatingTransaction: a, repeatingTransactions: n } = P(), { cashflow: t, common: i } = k(), { user: g } = Ve(), { completeOnboarding: x } = me(), { isDirty: u } = Q(), { isMobile: c } = ue(), { isCopyLoaded: m, setDisplayedDate: r } = q(), { filter: l, setFilter: d, transactions: b } = Ne(), C = se(), [_, O] = J(!0), [A, H] = f.useState(gt.EveryMonth), [p, w] = f.useState(1), [R, I] = f.useState(15), [M, ae] = J(!1), [V, K] = J(1), [S, Ge] = J([]), [fe, le] = J(""), F = f.useMemo(
     () => b.find((y) => y.guid === fe),
     [fe, b]
   ), je = !!n.filter(
@@ -891,14 +892,14 @@ const It = ({ recurrence: a }) => /* @__PURE__ */ o(U, { children: [
   ).length, ge = async () => {
     K(2), r(
       //  Beginning of the month, 90 days before today
-      ht(Me(H(), 90)),
-      H()
-    ), d({ ...l, custom: we }), K(3);
+      ht(Me(W(), 90)),
+      W()
+    ), d({ ...l, custom: _e }), K(3);
   }, ze = async () => {
-    if (!(_.length < 1)) {
+    if (!(S.length < 1)) {
       ae(!0);
-      for (let y = 0; y < _.length; y++) {
-        const E = _[y], be = ve(A, Ie(E.date)), Ue = {
+      for (let y = 0; y < S.length; y++) {
+        const E = S[y], be = ve(A, Ie(E.date)), Ue = {
           account_guid: E.account_guid,
           amount: E.amount,
           created_by: 0,
@@ -917,7 +918,7 @@ const It = ({ recurrence: a }) => /* @__PURE__ */ o(U, { children: [
       }
       await x();
     }
-  }, Be = !W && w || !W && _.length < 1;
+  }, Be = !F && _ || !F && S.length < 1;
   return m ? /* @__PURE__ */ o(
     D,
     {
@@ -932,16 +933,16 @@ const It = ({ recurrence: a }) => /* @__PURE__ */ o(U, { children: [
         py: 24
       },
       children: [
-        X === 1 && /* @__PURE__ */ e(
+        V === 1 && /* @__PURE__ */ e(
           D,
           {
             sx: {
               ...c ? { display: "flex", flexDirection: "column", maxWidth: "100%", padding: "0 16px" } : { maxWidth: 590, ml: "40%", mr: 90 }
             },
-            children: /* @__PURE__ */ e(Wt, { handleNextStep: ge })
+            children: /* @__PURE__ */ e(Ft, { handleNextStep: ge })
           }
         ),
-        X === 2 && /* @__PURE__ */ e(
+        V === 2 && /* @__PURE__ */ e(
           D,
           {
             sx: {
@@ -950,7 +951,7 @@ const It = ({ recurrence: a }) => /* @__PURE__ */ o(U, { children: [
             children: /* @__PURE__ */ e(Mt, {})
           }
         ),
-        X === 3 && /* @__PURE__ */ o(
+        V === 3 && /* @__PURE__ */ o(
           D,
           {
             sx: {
@@ -959,13 +960,13 @@ const It = ({ recurrence: a }) => /* @__PURE__ */ o(U, { children: [
             children: [
               /* @__PURE__ */ e(de, { pb: 12, children: t.add_income_title }),
               /* @__PURE__ */ e(N, { mb: 24, children: t.add_income_description }),
-              _.length > 0 && !W && /* @__PURE__ */ o(U, { children: [
-                /* @__PURE__ */ e(ee, { children: _.map((y, E) => /* @__PURE__ */ o(f.Fragment, { children: [
+              S.length > 0 && !F && /* @__PURE__ */ o(U, { children: [
+                /* @__PURE__ */ e(ee, { children: S.map((y, E) => /* @__PURE__ */ o(f.Fragment, { children: [
                   /* @__PURE__ */ e(pt, { bgcolor: "background.paper", children: bt(
                     B(y.nextDate || y.date)
                   ) }),
                   /* @__PURE__ */ e(ft, { transaction: y }),
-                  E !== _.length - 1 && /* @__PURE__ */ e(v, {})
+                  E !== S.length - 1 && /* @__PURE__ */ e(v, {})
                 ] }, y.guid)) }),
                 /* @__PURE__ */ o(s, { alignItems: "center", direction: "row", children: [
                   /* @__PURE__ */ e(v, { sx: { flexGrow: 1 } }),
@@ -985,7 +986,7 @@ const It = ({ recurrence: a }) => /* @__PURE__ */ o(U, { children: [
                   bgcolor: "background.paper",
                   onSearch: (y) => d({
                     ...l,
-                    custom: (E) => y ? ct(E, y) : we(E)
+                    custom: (E) => y ? ct(E, y) : _e(E)
                   }),
                   onSelected: (y) => {
                     le(y), O(!1);
@@ -993,30 +994,30 @@ const It = ({ recurrence: a }) => /* @__PURE__ */ o(U, { children: [
                 }
               ),
               !je && u && /* @__PURE__ */ e(N, { color: "error", mt: 16, children: t.confirm_error }),
-              W && /* @__PURE__ */ o(U, { children: [
+              F && /* @__PURE__ */ o(U, { children: [
                 /* @__PURE__ */ e(
                   lt,
                   {
                     bgcolor: "background.paper",
                     firstDay: p,
                     frequency: A,
-                    onFirstDayChange: S,
-                    onFrequencyChange: F,
+                    onFirstDayChange: w,
+                    onFrequencyChange: H,
                     onSecondDayChange: I,
                     secondDay: R,
-                    transaction: W
+                    transaction: F
                   }
                 ),
                 /* @__PURE__ */ o(s, { direction: "row", gap: 16, ml: 24, mt: 32, children: [
                   /* @__PURE__ */ e(
                     G,
                     {
-                      "aria-disabled": !W,
+                      "aria-disabled": !F,
                       onClick: () => {
-                        const y = [..._];
+                        const y = [...S];
                         y.push({
-                          ...W,
-                          nextDate: ve(A, Ie(W.date)),
+                          ...F,
+                          nextDate: ve(A, Ie(F.date)),
                           frequency: A
                         }), Ge(y), le("");
                       },
@@ -1036,11 +1037,11 @@ const It = ({ recurrence: a }) => /* @__PURE__ */ o(U, { children: [
                   )
                 ] })
               ] }),
-              _.length > 0 && !W && /* @__PURE__ */ o(s, { direction: "row", gap: 16, ml: 24, mt: 32, children: [
+              S.length > 0 && !F && /* @__PURE__ */ o(s, { direction: "row", gap: 16, ml: 24, mt: 32, children: [
                 /* @__PURE__ */ e(
                   G,
                   {
-                    "aria-disabled": _.length < 1 || M,
+                    "aria-disabled": S.length < 1 || M,
                     onClick: ze,
                     startIcon: M ? /* @__PURE__ */ e(
                       j,
@@ -1063,8 +1064,8 @@ const It = ({ recurrence: a }) => /* @__PURE__ */ o(U, { children: [
       ]
     }
   ) : /* @__PURE__ */ e(te, {});
-}, Hn = T(Gt);
-class Mn {
+}, Mn = T(Gt);
+class $n {
   fetchInstance;
   constructor(n, t, i) {
     this.fetchInstance = new xt(n, t, void 0, i);
@@ -1084,9 +1085,9 @@ class Mn {
   updateCashflowSequence = async (n) => this.fetchInstance.put(`${z.CASHFLOW_SEQUENCES}/${n.guid}`, n).then((t) => t.cashflow_sequence);
 }
 export {
-  Mn as CashflowApi,
+  $n as CashflowApi,
   Fn as CashflowMiniWidget,
-  Hn as CashflowOnboarding,
-  jn as CashflowStore,
+  Mn as CashflowOnboarding,
+  zn as CashflowStore,
   Wn as CashflowWidget
 };