@mx-cartographer/experiences 7.0.26 → 7.0.27-alpha-recurring-transactions-css-bug-ram7

package/CHANGELOG.md

@@ -1,3 +1,7 @@
+## [7.0.27] - 09-26-2025
+
+- **FIXED** - Recurring Transactions padding too much on both sides in mobile devices - css bug fixed
+
 ## [7.0.26] - 09-26-2025
 
 - **FIXED** - Cashflow and Recurring Transactions Manage Icon fix

package/dist/recurringtransactions/index.es.js

@@ -1,42 +1,42 @@
-import { jsx as e, jsxs as o, Fragment as K } from "react/jsx-runtime";
+import { jsx as e, jsxs as o, Fragment as Y } from "react/jsx-runtime";
 import h from "react";
 import { observer as T } from "mobx-react-lite";
-import { endOfMonth as z } from "date-fns/endOfMonth";
-import { endOfToday as ce } from "date-fns/endOfToday";
-import { startOfMonth as k } from "date-fns/startOfMonth";
-import { startOfToday as le } from "date-fns/startOfToday";
-import { subDays as de } from "date-fns/subDays";
-import re from "@mui/material/Skeleton";
+import { endOfMonth as B } from "date-fns/endOfMonth";
+import { endOfToday as le } from "date-fns/endOfToday";
+import { startOfMonth as W } from "date-fns/startOfMonth";
+import { startOfToday as de } from "date-fns/startOfToday";
+import { subDays as ue } from "date-fns/subDays";
+import oe from "@mui/material/Skeleton";
 import c from "@mui/material/Stack";
-import { R as He } from "../RecurringSettings-Dj29piAQ.mjs";
+import { R as ze } from "../RecurringSettings-Dj29piAQ.mjs";
 import { M as An } from "../RecurringSettings-Dj29piAQ.mjs";
-import { addMonths as ze } from "date-fns/addMonths";
-import { subMonths as Be } from "date-fns/subMonths";
-import { isBefore as Ue } from "date-fns/isBefore";
-import oe from "@mui/material/Unstable_Grid2";
-import be from "@mui/material/IconButton";
-import Re from "@mui/material/Tab";
-import Fe from "@mui/material/Tabs";
-import { Schedule as je, MonetizationOn as Ke, Cancel as ve, CheckCircle as Me, ChevronLeft as Ye, ChevronRight as Ve, CurrencyExchange as Xe } from "@mxenabled/mx-icons";
-import { Text as p, MerchantLogo as ue, InstitutionLogo as Ze, H3 as qe, P as ae } from "@mxenabled/mxui";
-import { getWeeksInMonth as Te } from "date-fns/getWeeksInMonth";
-import me from "@mui/material/styles/useTheme";
-import { AdapterDateFns as Je } from "@mui/x-date-pickers/AdapterDateFnsV3";
-import { DateCalendar as Qe } from "@mui/x-date-pickers/DateCalendar";
-import { LocalizationProvider as et } from "@mui/x-date-pickers/LocalizationProvider";
-import { isSameDay as tt } from "date-fns/isSameDay";
-import nt from "@mui/material/Badge";
-import { PickersDay as it } from "@mui/x-date-pickers/PickersDay";
-import { I as Y } from "../IconBacking-B9oC6uL2.mjs";
-import { u as D, a as V, h as v, e as X, c as pe, f as ge, p as rt } from "../hooks-DkUqN6JE.mjs";
-import { c as M, a as R, g as De, f as ot } from "../RepeatingTransaction-BW4J-jeJ.mjs";
-import { T as P } from "../RecurringTransactionsStore-D62XJtdL.mjs";
+import { addMonths as Be } from "date-fns/addMonths";
+import { subMonths as Ue } from "date-fns/subMonths";
+import { isBefore as Fe } from "date-fns/isBefore";
+import ae from "@mui/material/Unstable_Grid2";
+import Re from "@mui/material/IconButton";
+import Te from "@mui/material/Tab";
+import je from "@mui/material/Tabs";
+import { Schedule as Ke, MonetizationOn as Ye, Cancel as Me, CheckCircle as Le, ChevronLeft as Ve, ChevronRight as Xe, CurrencyExchange as Ze } from "@mxenabled/mx-icons";
+import { Text as g, MerchantLogo as me, InstitutionLogo as qe, H3 as Je, P as se } from "@mxenabled/mxui";
+import { getWeeksInMonth as De } from "date-fns/getWeeksInMonth";
+import pe from "@mui/material/styles/useTheme";
+import { AdapterDateFns as Qe } from "@mui/x-date-pickers/AdapterDateFnsV3";
+import { DateCalendar as et } from "@mui/x-date-pickers/DateCalendar";
+import { LocalizationProvider as tt } from "@mui/x-date-pickers/LocalizationProvider";
+import { isSameDay as nt } from "date-fns/isSameDay";
+import it from "@mui/material/Badge";
+import { PickersDay as rt } from "@mui/x-date-pickers/PickersDay";
+import { I as V } from "../IconBacking-B9oC6uL2.mjs";
+import { u as D, a as X, h as v, e as Z, p as Ae, c as ge, f as he } from "../hooks-DkUqN6JE.mjs";
+import { c as M, a as R, g as Se, f as ot } from "../RepeatingTransaction-BW4J-jeJ.mjs";
+import { T as H } from "../RecurringTransactionsStore-D62XJtdL.mjs";
 import { R as Gn } from "../RecurringTransactionsStore-D62XJtdL.mjs";
 import { A as w, W as at } from "../WidgetContainer-CdBs9WOZ.mjs";
 import st from "@mui/material/Button";
-import se from "@mui/material/Divider";
-import Se from "@mui/material/List";
-import Le from "@mui/material/ListItem";
+import ce from "@mui/material/Divider";
+import Ie from "@mui/material/List";
+import Ee from "@mui/material/ListItem";
 import ct from "@mui/material/ListSubheader";
 import lt from "@mui/material/ListItemAvatar";
 import dt from "@mui/material/ListItemButton";
@@ -44,48 +44,48 @@ import ut from "@mui/material/ListItemText";
 import { b as mt } from "../ManageIncome-DbsiKUoO.mjs";
 import { c as On, M as kn, S as Wn } from "../ManageIncome-DbsiKUoO.mjs";
 import { f as L } from "../NumberFormatting-CtWHhyBX.mjs";
-import { D as Ae } from "../Drawer-kEE73B87.mjs";
-import { b as N } from "../Localization-2MODESHW.mjs";
+import { D as Ge } from "../Drawer-kEE73B87.mjs";
+import { b as O } from "../Localization-2MODESHW.mjs";
 import { f as A, D as E } from "../Dialog-CWW597AF.mjs";
-import O from "@mui/material/Box";
-import { S as Ee } from "../StatusBar-BK_uYHAB.mjs";
-import { u as Ge } from "../useScreenSize-B6JyS_Lj.mjs";
-import { L as j } from "../Loader-DUaFpDGv.mjs";
+import k from "@mui/material/Box";
+import { S as Ne } from "../StatusBar-BK_uYHAB.mjs";
+import { u as Oe } from "../useScreenSize-B6JyS_Lj.mjs";
+import { L as K } from "../Loader-DUaFpDGv.mjs";
 import { M as pt } from "../MiniWidgetContainer-CTyjmE1h.mjs";
 import { u as gt } from "../useDimensions-27p2evRx.mjs";
 import { M as ht } from "../MicroWidgetContainer-Dxz8uBN9.mjs";
-const Z = {
+const q = {
   gridRow: 1,
   gridColumn: 1,
   zIndex: 2
-}, q = (t) => t ? { margin: "0 0 -6px -4px" } : void 0, he = ({ isOffset: t = !1, size: n = 16 }) => /* @__PURE__ */ e(Y, { size: n, sx: { ...q(t) }, children: /* @__PURE__ */ e(je, { color: "primary", filled: !0, sx: { fontSize: n, ...Z } }) }), fe = ({ isOffset: t = !1, size: n = 16 }) => /* @__PURE__ */ e(Y, { size: n, sx: { ...q(t) }, children: /* @__PURE__ */ e(
-  Ke,
+}, J = (t) => t ? { margin: "0 0 -6px -4px" } : void 0, fe = ({ isOffset: t = !1, size: n = 16 }) => /* @__PURE__ */ e(V, { size: n, sx: { ...J(t) }, children: /* @__PURE__ */ e(Ke, { color: "primary", filled: !0, sx: { fontSize: n, ...q } }) }), xe = ({ isOffset: t = !1, size: n = 16 }) => /* @__PURE__ */ e(V, { size: n, sx: { ...J(t) }, children: /* @__PURE__ */ e(
+  Ye,
   {
     filled: !0,
-    sx: { color: "categories.income", fontSize: n, ...Z }
+    sx: { color: "categories.income", fontSize: n, ...q }
   }
-) }), xe = ({ isOffset: t = !1, size: n = 16 }) => /* @__PURE__ */ e(Y, { size: n, sx: { ...q(t) }, children: /* @__PURE__ */ e(ve, { color: "error", filled: !0, sx: { fontSize: n, ...Z } }) }), ye = ({ isOffset: t = !1, size: n = 16 }) => /* @__PURE__ */ e(Y, { size: n, sx: { ...q(t) }, children: /* @__PURE__ */ e(Me, { color: "success", filled: !0, sx: { fontSize: n, ...Z } }) }), ft = T(
+) }), ye = ({ isOffset: t = !1, size: n = 16 }) => /* @__PURE__ */ e(V, { size: n, sx: { ...J(t) }, children: /* @__PURE__ */ e(Me, { color: "error", filled: !0, sx: { fontSize: n, ...q } }) }), Ce = ({ isOffset: t = !1, size: n = 16 }) => /* @__PURE__ */ e(V, { size: n, sx: { ...J(t) }, children: /* @__PURE__ */ e(Le, { color: "success", filled: !0, sx: { fontSize: n, ...q } }) }), ft = T(
   ({ day: t, outsideCurrentMonth: n, ...i }) => {
-    const { recurring: a } = D(), { selectedAccountGuids: r } = V(), { recurrences: l, setSelectedDay: u } = v(), s = h.useMemo(
+    const { recurring: a } = D(), { selectedAccountGuids: r } = X(), { recurrences: l, setSelectedDay: p } = v(), s = h.useMemo(
       () => l.filter((d) => r.includes(d.accountGuid)),
       [r, l]
     ).filter(
-      (d) => tt(d.occurredOnDate || d.expectedDate, t)
+      (d) => nt(d.occurredOnDate || d.expectedDate, t)
     ), m = s.some(
       (d) => d.type !== M.Income && d.status === R.Upcoming
     ), f = s.some(
       (d) => d.type !== M.Income && d.status === R.Missed
     ), x = s.some(
       (d) => d.type !== M.Income && d.status === R.Paid
-    ), b = s.some((d) => d.type === M.Income), y = (m ? 1 : 0) + (f ? 1 : 0) + (x ? 1 : 0) + (b ? 1 : 0);
+    ), C = s.some((d) => d.type === M.Income), y = (m ? 1 : 0) + (f ? 1 : 0) + (x ? 1 : 0) + (C ? 1 : 0);
     return /* @__PURE__ */ e(
-      nt,
+      it,
       {
-        badgeContent: s.length > 0 && /* @__PURE__ */ o(K, { children: [
-          f && /* @__PURE__ */ e(xe, { isOffset: !0 }),
-          x && /* @__PURE__ */ e(ye, { isOffset: !0 }),
-          m && /* @__PURE__ */ e(he, { isOffset: !0 }),
-          b && /* @__PURE__ */ e(fe, { isOffset: !0 })
+        badgeContent: s.length > 0 && /* @__PURE__ */ o(Y, { children: [
+          f && /* @__PURE__ */ e(ye, { isOffset: !0 }),
+          x && /* @__PURE__ */ e(Ce, { isOffset: !0 }),
+          m && /* @__PURE__ */ e(fe, { isOffset: !0 }),
+          C && /* @__PURE__ */ e(xe, { isOffset: !0 })
         ] }),
         overlap: "circular",
         sx: {
@@ -96,15 +96,15 @@ const Z = {
           }
         },
         children: /* @__PURE__ */ e(
-          it,
+          rt,
           {
             "aria-label": `
           ${x && a.paid}, 
           ${f && a.missed}, 
           ${m && a.upcoming}, 
-          ${b && a.income}`,
+          ${C && a.income}`,
             day: t,
-            onClick: () => u(t),
+            onClick: () => p(t),
             outsideCurrentMonth: n,
             sx: {
               "&.MuiPickersDay-root": {
@@ -119,9 +119,9 @@ const Z = {
       }
     );
   }
-), F = ({ icon: t, label: n }) => /* @__PURE__ */ o(c, { alignItems: "center", flexDirection: "row", sx: { gap: 6 }, children: [
+), j = ({ icon: t, label: n }) => /* @__PURE__ */ o(c, { alignItems: "center", flexDirection: "row", sx: { gap: 6 }, children: [
   /* @__PURE__ */ e(t, {}),
-  /* @__PURE__ */ e(p, { variant: "XSmall", children: n })
+  /* @__PURE__ */ e(g, { variant: "XSmall", children: n })
 ] }), xt = T(() => {
   const { recurring: t } = D();
   return /* @__PURE__ */ o(
@@ -134,26 +134,26 @@ const Z = {
       justifyContent: "center",
       mt: 12,
       children: [
-        /* @__PURE__ */ e(F, { icon: he, label: t.expense }),
-        /* @__PURE__ */ e(F, { icon: fe, label: t.income }),
-        /* @__PURE__ */ e(F, { icon: xe, label: t.missed }),
-        /* @__PURE__ */ e(F, { icon: ye, label: t.paid })
+        /* @__PURE__ */ e(j, { icon: fe, label: t.expense }),
+        /* @__PURE__ */ e(j, { icon: xe, label: t.income }),
+        /* @__PURE__ */ e(j, { icon: ye, label: t.missed }),
+        /* @__PURE__ */ e(j, { icon: Ce, label: t.paid })
       ]
     }
   );
-}), Ie = 58, Ne = T(() => {
-  const t = me(), { onEvent: n } = X(), { selectedDay: i, setDateRange: a } = v(), [r, l] = h.useState(
-    Te(/* @__PURE__ */ new Date()) * P + Ie
-  ), u = (s) => {
-    l(Te(s) * P + Ie), a({
-      start: k(s),
-      end: z(s)
+}), _e = 58, ke = T(() => {
+  const t = pe(), { onEvent: n } = Z(), { selectedDay: i, setDateRange: a } = v(), [r, l] = h.useState(
+    De(/* @__PURE__ */ new Date()) * H + _e
+  ), p = (s) => {
+    l(De(s) * H + _e), a({
+      start: W(s),
+      end: B(s)
     }), n(w.RECURRING_TRANSACTIONS_CLICK_CALENDAR_RIGHT);
-  }, g = /* @__PURE__ */ e(
-    Qe,
+  }, u = /* @__PURE__ */ e(
+    et,
     {
-      minDate: k(/* @__PURE__ */ new Date()),
-      onMonthChange: u,
+      minDate: W(/* @__PURE__ */ new Date()),
+      onMonthChange: p,
       showDaysOutsideCurrentMonth: !0,
       slots: {
         day: ft
@@ -184,11 +184,11 @@ const Z = {
           minHeight: r
         },
         "&.MuiDateCalendar-root": {
-          minHeight: r + P
+          minHeight: r + H
         },
         "& .MuiButtonBase-root, .MuiDayCalendar-weekDayLabel": {
-          height: P,
-          width: P,
+          height: H,
+          width: H,
           margin: 0
         },
         "& .MuiDayCalendar-weekDayLabel": {
@@ -200,26 +200,26 @@ const Z = {
       views: ["day"]
     }
   );
-  return /* @__PURE__ */ e(c, { justifyContent: "center", children: /* @__PURE__ */ o(et, { dateAdapter: Je, children: [
-    i && g,
-    !i && g,
+  return /* @__PURE__ */ e(c, { justifyContent: "center", children: /* @__PURE__ */ o(tt, { dateAdapter: Qe, children: [
+    i && u,
+    !i && u,
     /* @__PURE__ */ e(xt, {})
   ] }) });
 }), yt = (t) => {
   if (t.type === M.Income)
-    return /* @__PURE__ */ e(fe, {});
+    return /* @__PURE__ */ e(xe, {});
   switch (t.status) {
     case R.Missed:
-      return /* @__PURE__ */ e(xe, {});
-    case R.Paid:
       return /* @__PURE__ */ e(ye, {});
+    case R.Paid:
+      return /* @__PURE__ */ e(Ce, {});
     default:
-      return /* @__PURE__ */ e(he, {});
+      return /* @__PURE__ */ e(fe, {});
   }
 }, Ct = (t, n) => {
   switch (t.status) {
     case R.Paid:
-      return t.expectedDate ? N(
+      return t.expectedDate ? O(
         n.paid_on,
         A(
           t.occurredOnDate || t.expectedDate,
@@ -227,37 +227,37 @@ const Z = {
         )
       ) : n.paid;
     case R.Missed:
-      return N(
+      return O(
         n.missed_on,
         A(t.expectedDate, E.MONTH_DAY)
       );
     case R.Upcoming:
-      return N(
+      return O(
         n.upcoming_on,
         A(t.expectedDate, E.MONTH_DAY)
       );
     default:
       return n.unknown;
   }
-}, _e = ({
+}, we = ({
   recurrence: t,
   isMini: n = !1,
   onRecurrenceClick: i = () => {
   },
   showOrdinal: a = !1
 }) => {
-  const { recurring: r } = D(), { repeatingTransactions: l } = v(), [u, g] = h.useState(!1), s = h.useMemo(
+  const { recurring: r } = D(), { repeatingTransactions: l } = v(), [p, u] = h.useState(!1), s = h.useMemo(
     () => l.find((S) => S.guid === t.repeatingTransactionGuid),
     [t, l]
-  ), m = t.type === M.Income, f = t.status === R.Paid, x = t.status === R.Missed, b = t.status === R.Upcoming;
+  ), m = t.type === M.Income, f = t.status === R.Paid, x = t.status === R.Missed, C = t.status === R.Upcoming;
   let y = r.paid?.toLowerCase();
-  return x ? y = r.missed?.toLowerCase() : b && (y = a ? De(r, s || {}, !0) : De(r, s || {}, !1)), //TODO: implement common/components/ListItemRow.tsx
-  /* @__PURE__ */ o(Le, { disableGutters: !0, disablePadding: !0, children: [
+  return x ? y = r.missed?.toLowerCase() : C && (y = a ? Se(r, s || {}, !0) : Se(r, s || {}, !1)), //TODO: implement common/components/ListItemRow.tsx
+  /* @__PURE__ */ o(Ee, { disableGutters: !0, disablePadding: !0, children: [
     /* @__PURE__ */ o(dt, { onClick: () => {
-      g(!0), i(t);
+      u(!0), i(t);
     }, children: [
       /* @__PURE__ */ e(lt, { children: /* @__PURE__ */ e(
-        ue,
+        me,
         {
           categoryGuid: t.categoryGuid,
           merchantGuid: t.merchantGuid
@@ -271,24 +271,24 @@ const Z = {
           sx: { justifyContent: "space-between", textOverflow: "ellipsis", textWrap: "nowrap" },
           children: [
             /* @__PURE__ */ o(c, { direction: "column", width: "50%", children: [
-              /* @__PURE__ */ e(p, { bold: !0, variant: "body1", children: t.name }),
+              /* @__PURE__ */ e(g, { bold: !0, variant: "body1", children: t.name }),
               /* @__PURE__ */ e(c, { alignItems: "center", direction: "row", gap: 6, children: n ? /* @__PURE__ */ o(c, { direction: "row", gap: 4, children: [
                 yt(t),
-                /* @__PURE__ */ e(p, { variant: "caption", children: Ct(t, r) })
-              ] }) : /* @__PURE__ */ o(K, { children: [
+                /* @__PURE__ */ e(g, { variant: "caption", children: Ct(t, r) })
+              ] }) : /* @__PURE__ */ o(Y, { children: [
                 t.institutionGuid && /* @__PURE__ */ e(
-                  Ze,
+                  qe,
                   {
                     alt: t.institutionName,
                     institutionGuid: t.institutionGuid,
                     size: 12
                   }
                 ),
-                /* @__PURE__ */ e(p, { sx: { maxWidth: 250 }, variant: "caption", children: t.institutionName })
+                /* @__PURE__ */ e(g, { sx: { maxWidth: 250 }, variant: "caption", children: t.institutionName })
               ] }) })
             ] }),
             /* @__PURE__ */ o(c, { alignItems: "flex-end", width: "100%", children: [
-              /* @__PURE__ */ o(p, { bold: !0, color: m ? "success.main" : "text.primary", variant: "body1", children: [
+              /* @__PURE__ */ o(g, { bold: !0, color: m ? "success.main" : "text.primary", variant: "body1", children: [
                 m ? "+" : "",
                 L(t.amount, "0,0.00")
               ] }),
@@ -304,9 +304,9 @@ const Z = {
                     width: "100%"
                   },
                   children: [
-                    f && /* @__PURE__ */ e(Me, { color: "success", filled: !0, size: 12 }),
-                    x && /* @__PURE__ */ e(ve, { color: "error", filled: !0, size: 12 }),
-                    /* @__PURE__ */ e(p, { bold: !0, color: "text.secondary", variant: "caption", children: y })
+                    f && /* @__PURE__ */ e(Le, { color: "success", filled: !0, size: 12 }),
+                    x && /* @__PURE__ */ e(Me, { color: "error", filled: !0, size: 12 }),
+                    /* @__PURE__ */ e(g, { bold: !0, color: "text.secondary", variant: "caption", children: y })
                   ]
                 }
               )
@@ -316,23 +316,23 @@ const Z = {
       ) })
     ] }),
     /* @__PURE__ */ e(
-      Ae,
+      Ge,
       {
         ariaLabelClose: r.close_drawer_aria,
-        isOpen: u,
-        onClose: () => g(!1),
+        isOpen: p,
+        onClose: () => u(!1),
         title: t.type === M.Income ? r.income_details : r.expense_details,
         children: s && /* @__PURE__ */ e(
           mt,
           {
-            onDeleted: () => g(!1),
+            onDeleted: () => u(!1),
             recurringTransaction: s
           }
         )
       }
     )
   ] });
-}, H = T(
+}, z = T(
   ({
     recurrences: t,
     isMini: n = !1,
@@ -341,36 +341,36 @@ const Z = {
     sx: r = {},
     title: l
   }) => {
-    const { recurring: u } = D(), g = h.useMemo(() => ot(t), [t]);
+    const { recurring: p } = D(), u = h.useMemo(() => ot(t), [t]);
     return /* @__PURE__ */ o(c, { sx: { gap: 8, mt: 4, ...r }, children: [
       l && /* @__PURE__ */ o(
         c,
         {
           sx: { alignItems: "top", direction: "row", justifyContent: "space-between", px: 24 },
           children: [
-            /* @__PURE__ */ e(p, { bold: !0, variant: "body1", children: l }),
-            i && /* @__PURE__ */ e(st, { onClick: i, sx: { mt: -12 }, variant: "text", children: u.reset })
+            /* @__PURE__ */ e(g, { bold: !0, variant: "body1", children: l }),
+            i && /* @__PURE__ */ e(st, { onClick: i, sx: { mt: -12 }, variant: "text", children: p.reset })
           ]
         }
       ),
-      t.length === 0 ? /* @__PURE__ */ e(p, { fontStyle: "italic", sx: { py: 24, textAlign: "center" }, children: u.no_activities }) : /* @__PURE__ */ e(Se, { children: n ? t.map((s, m) => /* @__PURE__ */ o(h.Fragment, { children: [
+      t.length === 0 ? /* @__PURE__ */ e(g, { fontStyle: "italic", sx: { py: 24, textAlign: "center" }, children: p.no_activities }) : /* @__PURE__ */ e(Ie, { children: n ? t.map((s, m) => /* @__PURE__ */ o(h.Fragment, { children: [
         /* @__PURE__ */ e(
-          _e,
+          we,
           {
             isMini: n,
             onRecurrenceClick: a,
             recurrence: s
           }
         ),
-        /* @__PURE__ */ e(se, { sx: { mx: 24 } })
-      ] }, `recurrence-${m}`)) : g.map((s, m) => /* @__PURE__ */ o(h.Fragment, { children: [
-        /* @__PURE__ */ e(Le, { children: /* @__PURE__ */ e(
-          Se,
+        /* @__PURE__ */ e(ce, { sx: { mx: 24 } })
+      ] }, `recurrence-${m}`)) : u.map((s, m) => /* @__PURE__ */ o(h.Fragment, { children: [
+        /* @__PURE__ */ e(Ee, { children: /* @__PURE__ */ e(
+          Ie,
           {
-            subheader: /* @__PURE__ */ e(ct, { sx: { bgcolor: "background.paper", ml: 8, pb: 4, pt: 12 }, children: /* @__PURE__ */ e(p, { bold: !0, variant: "caption", children: A(s.date, E.DAY_OF_WEEK_MONTH_DAY) }) }),
+            subheader: /* @__PURE__ */ e(ct, { sx: { bgcolor: "background.paper", ml: 8, pb: 4, pt: 12 }, children: /* @__PURE__ */ e(g, { bold: !0, variant: "caption", children: A(s.date, E.DAY_OF_WEEK_MONTH_DAY) }) }),
             sx: { width: "100%" },
             children: s.recurrences.map((f, x) => /* @__PURE__ */ e(h.Fragment, { children: /* @__PURE__ */ e(
-              _e,
+              we,
               {
                 isMini: n,
                 onRecurrenceClick: a,
@@ -379,182 +379,194 @@ const Z = {
             ) }, `day-recurrence-${x}`))
           }
         ) }, s.id),
-        /* @__PURE__ */ e(se, { sx: { mx: 24 } })
+        /* @__PURE__ */ e(ce, { sx: { mx: 24 } })
       ] }, `recurrence-${m}`)) })
     ] });
   }
-), we = T(
-  ({ expected: t, isExpense: n = !0, missed: i, paid: a, title: r, total: l, upcoming: u }) => {
-    const g = me(), { isSmallMobile: s } = Ge(), { recurring: m } = D(), f = h.useMemo(() => {
-      const x = [{ color: g.palette.success.main, percentage: `${a / t}` }];
-      return i && x.push({ color: g.palette.error.main, percentage: `${i / t}` }), x;
+), ve = T(
+  ({ expected: t, isExpense: n = !0, missed: i, paid: a, title: r, total: l, upcoming: p }) => {
+    const u = pe(), { isSmallMobile: s } = Oe(), { recurring: m } = D(), f = h.useMemo(() => {
+      const x = [{ color: u.palette.success.main, percentage: `${a / t}` }];
+      return i && x.push({ color: u.palette.error.main, percentage: `${i / t}` }), x;
     }, [a, t, i]);
-    return /* @__PURE__ */ o(c, { sx: { px: 24 }, children: [
+    return /* @__PURE__ */ o(c, { children: [
       /* @__PURE__ */ o(c, { sx: { flexDirection: "row", justifyContent: "space-between", pb: 12 }, children: [
-        /* @__PURE__ */ e(p, { bold: !0, variant: "body1", children: `${r} (${l})` }),
-        /* @__PURE__ */ e(p, { bold: !0, color: n ? "text.primary" : "success.main", variant: "body1", children: `${n ? "-" : "+"}${L(t, "0,0.00")}` })
+        /* @__PURE__ */ e(g, { bold: !0, variant: "body1", children: `${r} (${l})` }),
+        /* @__PURE__ */ e(g, { bold: !0, color: n ? "text.primary" : "success.main", variant: "body1", children: `${n ? "-" : "+"}${L(t, "0,0.00")}` })
       ] }),
-      /* @__PURE__ */ e(Ee, { data: f, height: 12 }),
+      /* @__PURE__ */ e(Ne, { data: f, height: 12 }),
       /* @__PURE__ */ o(c, { sx: { alignItems: "center", flexDirection: "row", gap: 2, my: 8 }, children: [
-        /* @__PURE__ */ e(O, { sx: { bgcolor: "success.main", height: 8, mr: 8, width: 8 } }),
-        !s && /* @__PURE__ */ e(p, { bold: !0, variant: "body2", children: L(a, "0,0.00") }),
-        /* @__PURE__ */ e(p, { variant: "caption", children: m.paid?.toLowerCase() }),
-        i !== void 0 && /* @__PURE__ */ o(K, { children: [
-          /* @__PURE__ */ e(O, { sx: { bgcolor: "error.main", height: 8, ml: 16, mr: 8, width: 8 } }),
-          !s && /* @__PURE__ */ e(p, { bold: !0, variant: "body2", children: L(i, "0,0.00") }),
-          /* @__PURE__ */ e(p, { variant: "caption", children: m.missed?.toLowerCase() })
+        /* @__PURE__ */ e(k, { sx: { bgcolor: "success.main", height: 8, mr: 8, width: 8 } }),
+        !s && /* @__PURE__ */ e(g, { bold: !0, variant: "body2", children: L(a, "0,0.00") }),
+        /* @__PURE__ */ e(g, { variant: "caption", children: m.paid?.toLowerCase() }),
+        i !== void 0 && /* @__PURE__ */ o(Y, { children: [
+          /* @__PURE__ */ e(k, { sx: { bgcolor: "error.main", height: 8, ml: 16, mr: 8, width: 8 } }),
+          !s && /* @__PURE__ */ e(g, { bold: !0, variant: "body2", children: L(i, "0,0.00") }),
+          /* @__PURE__ */ e(g, { variant: "caption", children: m.missed?.toLowerCase() })
         ] }),
-        /* @__PURE__ */ e(O, { sx: { bgcolor: "divider", height: 8, ml: 16, mr: 8, width: 8 } }),
-        !s && /* @__PURE__ */ e(p, { bold: !0, variant: "body2", children: L(u, "0,0.00") }),
-        /* @__PURE__ */ e(p, { variant: "caption", children: m.upcoming })
+        /* @__PURE__ */ e(k, { sx: { bgcolor: "divider", height: 8, ml: 16, mr: 8, width: 8 } }),
+        !s && /* @__PURE__ */ e(g, { bold: !0, variant: "body2", children: L(p, "0,0.00") }),
+        /* @__PURE__ */ e(g, { variant: "caption", children: m.upcoming })
       ] })
     ] });
   }
 ), bt = T(() => {
-  const { recurring: t } = D(), { isDesktop: n, isSmallMobile: i } = Ge(), { onEvent: a } = X(), {
-    currentMonthExpenses: r,
-    currentMonthIncome: l,
+  const { recurring: t } = D(), { availableWidth: n } = Ae(), { isDesktop: i, isSmallMobile: a } = Oe(n), { onEvent: r } = Z(), {
+    currentMonthExpenses: l,
+    currentMonthIncome: p,
     dateRange: u,
-    expenseTotal: g,
-    incomeTotal: s,
-    missedExpenseTotal: m,
-    pastRecurrences: f,
-    paidExpenseTotal: x,
-    paidIncomeTotal: b,
-    selectedDay: y,
-    selectedDayRecurrences: d,
-    setDateRange: S,
-    upcomingExpenseTotal: W,
-    upcomingIncomeTotal: J,
-    upcomingRecurrences: B
-  } = v(), [$, Q] = h.useState(0), ee = Ue(u.start, /* @__PURE__ */ new Date()), I = (C, ie) => {
-    Q(ie);
-  }, U = (C) => {
-    a(w.RECURRING_TRANSACTIONS_CLICK_UPCOMING, {
-      transaction_guid: C.transaction?.guid
+    expenseTotal: s,
+    incomeTotal: m,
+    missedExpenseTotal: f,
+    pastRecurrences: x,
+    paidExpenseTotal: C,
+    paidIncomeTotal: y,
+    selectedDay: d,
+    selectedDayRecurrences: S,
+    setDateRange: G,
+    upcomingExpenseTotal: Q,
+    upcomingIncomeTotal: ee,
+    upcomingRecurrences: U
+  } = v(), [$, te] = h.useState(0), I = Fe(u.start, /* @__PURE__ */ new Date()), ne = (b, re) => {
+    te(re);
+  }, _ = (b) => {
+    r(w.RECURRING_TRANSACTIONS_CLICK_UPCOMING, {
+      transaction_guid: b.transaction?.guid
     });
-  }, _ = (C) => {
-    a(w.RECURRING_TRANSACTIONS_CLICK_PAID, {
-      transaction_guid: C.transaction?.guid
+  }, F = (b) => {
+    r(w.RECURRING_TRANSACTIONS_CLICK_PAID, {
+      transaction_guid: b.transaction?.guid
     });
-  }, te = () => {
-    const C = ze(u.start, 1);
-    S({
-      start: k(C),
-      end: z(C)
+  }, ie = () => {
+    const b = Be(u.start, 1);
+    G({
+      start: W(b),
+      end: B(b)
     });
-  }, ne = () => {
-    const C = Be(u.start, 1);
-    S({
-      start: k(C),
-      end: z(C)
+  }, P = () => {
+    const b = Ue(u.start, 1);
+    G({
+      start: W(b),
+      end: B(b)
     });
   };
-  return /* @__PURE__ */ o(oe, { container: !0, sx: { pt: 16, px: 24, spacing: 24 }, children: [
-    /* @__PURE__ */ e(oe, { md: !0, sm: 12, width: "100%", children: /* @__PURE__ */ o(c, { sx: { gap: 16 }, children: [
-      /* @__PURE__ */ o(c, { alignItems: "center", direction: "row", justifyContent: "space-between", children: [
-        /* @__PURE__ */ e(qe, { sx: { px: 24 }, children: N(
-          t.header_title,
-          A(u.start, E.MONTH_LONG)
-        ) }),
-        !n && /* @__PURE__ */ o(c, { direction: "row", gap: 4, children: [
+  return /* @__PURE__ */ o(
+    ae,
+    {
+      container: !0,
+      sx: {
+        pt: 16,
+        pl: i ? 48 : 24,
+        pr: i ? 24 : 16,
+        spacing: 24
+      },
+      children: [
+        /* @__PURE__ */ e(ae, { md: !0, sm: 12, width: "100%", children: /* @__PURE__ */ o(c, { sx: { gap: 16 }, children: [
+          /* @__PURE__ */ o(c, { alignItems: "center", direction: "row", justifyContent: "space-between", children: [
+            /* @__PURE__ */ e(Je, { children: O(
+              t.header_title,
+              A(u.start, E.MONTH_LONG)
+            ) }),
+            !i && /* @__PURE__ */ o(c, { direction: "row", gap: 4, children: [
+              /* @__PURE__ */ e(
+                Re,
+                {
+                  color: "primary",
+                  disabled: I,
+                  onClick: P,
+                  children: /* @__PURE__ */ e(Ve, {})
+                }
+              ),
+              /* @__PURE__ */ e(Re, { color: "primary", onClick: ie, children: /* @__PURE__ */ e(Xe, {}) })
+            ] })
+          ] }),
           /* @__PURE__ */ e(
-            be,
+            ve,
             {
-              color: "primary",
-              disabled: ee,
-              onClick: ne,
-              children: /* @__PURE__ */ e(Ye, {})
+              expected: s,
+              missed: f,
+              paid: C,
+              title: t.expenses,
+              total: l.length,
+              upcoming: Q
             }
           ),
-          /* @__PURE__ */ e(be, { color: "primary", onClick: te, children: /* @__PURE__ */ e(Ve, {}) })
-        ] })
-      ] }),
-      /* @__PURE__ */ e(
-        we,
-        {
-          expected: g,
-          missed: m,
-          paid: x,
-          title: t.expenses,
-          total: r.length,
-          upcoming: W
-        }
-      ),
-      /* @__PURE__ */ e(
-        we,
-        {
-          expected: s,
-          isExpense: !1,
-          paid: b,
-          title: t.deposits,
-          total: l.length,
-          upcoming: J
-        }
-      ),
-      n && /* @__PURE__ */ e(
-        H,
-        {
-          onRecurrenceClick: U,
-          recurrences: B,
-          title: t.upcoming_activity
-        }
-      ),
-      !n && /* @__PURE__ */ o(c, { children: [
-        /* @__PURE__ */ o(Fe, { onChange: I, value: $, variant: "fullWidth", children: [
           /* @__PURE__ */ e(
-            Re,
+            ve,
+            {
+              expected: m,
+              isExpense: !1,
+              paid: y,
+              title: t.deposits,
+              total: p.length,
+              upcoming: ee
+            }
+          ),
+          i && /* @__PURE__ */ e(
+            z,
             {
-              label: /* @__PURE__ */ e(p, { bold: !0, sx: { textTransform: "none" }, variant: "body1", children: i ? t.upcoming : t.upcoming_activity })
+              onRecurrenceClick: _,
+              recurrences: U,
+              title: t.upcoming_activity
             }
           ),
+          !i && /* @__PURE__ */ o(c, { children: [
+            /* @__PURE__ */ o(je, { onChange: ne, value: $, variant: "fullWidth", children: [
+              /* @__PURE__ */ e(
+                Te,
+                {
+                  label: /* @__PURE__ */ e(g, { bold: !0, sx: { textTransform: "none" }, variant: "body1", children: a ? t.upcoming : t.upcoming_activity })
+                }
+              ),
+              /* @__PURE__ */ e(
+                Te,
+                {
+                  label: /* @__PURE__ */ e(g, { bold: !0, sx: { textTransform: "none" }, variant: "body1", children: a ? t.past : t.past_transactions })
+                }
+              )
+            ] }),
+            $ === 0 && /* @__PURE__ */ e(
+              z,
+              {
+                onRecurrenceClick: _,
+                recurrences: U
+              }
+            ),
+            $ === 1 && /* @__PURE__ */ e(
+              z,
+              {
+                onRecurrenceClick: F,
+                recurrences: x
+              }
+            )
+          ] })
+        ] }) }),
+        i && /* @__PURE__ */ e(ae, { sx: { minWidth: 450 }, xs: "auto", children: /* @__PURE__ */ o(c, { gap: 24, children: [
+          /* @__PURE__ */ e(ke, {}),
           /* @__PURE__ */ e(
-            Re,
+            z,
             {
-              label: /* @__PURE__ */ e(p, { bold: !0, sx: { textTransform: "none" }, variant: "body1", children: i ? t.past : t.past_transactions })
+              onRecurrenceClick: F,
+              recurrences: S || x,
+              title: d ? O(
+                t.day_transactions,
+                A(d, E.MONTH_DAY)
+              ) : t.past_transactions
             }
           )
-        ] }),
-        $ === 0 && /* @__PURE__ */ e(
-          H,
-          {
-            onRecurrenceClick: U,
-            recurrences: B
-          }
-        ),
-        $ === 1 && /* @__PURE__ */ e(
-          H,
-          {
-            onRecurrenceClick: _,
-            recurrences: f
-          }
-        )
-      ] })
-    ] }) }),
-    n && /* @__PURE__ */ e(oe, { sx: { minWidth: 450 }, xs: "auto", children: /* @__PURE__ */ o(c, { gap: 24, children: [
-      /* @__PURE__ */ e(Ne, {}),
-      /* @__PURE__ */ e(
-        H,
-        {
-          onRecurrenceClick: _,
-          recurrences: d || f,
-          title: y ? N(
-            t.day_transactions,
-            A(y, E.MONTH_DAY)
-          ) : t.past_transactions
-        }
-      )
-    ] }) })
-  ] });
+        ] }) })
+      ]
+    }
+  );
 }), _n = T(({ onBackClick: t, sx: n = {} }) => {
-  const { accounts: i } = pe(), { recurring: a } = D(), { isCopyLoaded: r, isInitialized: l, selectedAccountGuids: u, setSelectedAccounts: g } = V(), { isDataLoaded: s, loadRepeatingTransactions: m, setDateRange: f } = v(), { setFilter: x } = ge(), { onEvent: b } = X(), [y, d] = h.useState(!1);
+  const { accounts: i } = ge(), { recurring: a } = D(), { isCopyLoaded: r, isInitialized: l, selectedAccountGuids: p, setSelectedAccounts: u } = X(), { isDataLoaded: s, loadRepeatingTransactions: m, setDateRange: f } = v(), { setFilter: x } = he(), { onEvent: C } = Z(), [y, d] = h.useState(!1);
   return h.useEffect(() => {
-    g(i);
+    u(i);
   }, [i]), h.useEffect(() => {
     l && (x({
-      dateRange: { start: de(le(), 90), end: ce() },
-      accounts: u
-    }), f({ start: k(/* @__PURE__ */ new Date()), end: z(/* @__PURE__ */ new Date()) }), m().finally());
+      dateRange: { start: ue(de(), 90), end: le() },
+      accounts: p
+    }), f({ start: W(/* @__PURE__ */ new Date()), end: B(/* @__PURE__ */ new Date()) }), m().finally());
   }, [l]), r ? /* @__PURE__ */ o(
     at,
     {
@@ -564,47 +576,47 @@ const Z = {
           label: a.action_title,
           iconName: "credit_card_gear",
           onClick: () => {
-            d(!0), b(w.RECURRING_TRANSACTIONS_CLICK_SETTINGS);
+            d(!0), C(w.RECURRING_TRANSACTIONS_CLICK_SETTINGS);
           }
         }
       ],
-      onAccountsFilterClick: () => b(w.RECURRING_TRANSACTIONS_CLICK_FILTER),
+      onAccountsFilterClick: () => C(w.RECURRING_TRANSACTIONS_CLICK_FILTER),
       onBackClick: t,
       sx: n,
       title: a.title,
       children: [
         l && s ? /* @__PURE__ */ e(bt, {}) : /* @__PURE__ */ o(c, { direction: "column", p: 48, spacing: 24, children: [
-          /* @__PURE__ */ e(re, { height: 100, variant: "rounded", width: "100%" }),
-          /* @__PURE__ */ e(re, { height: 100, variant: "rounded", width: "100%" }),
-          /* @__PURE__ */ e(re, { height: 600, variant: "rounded", width: "100%" })
+          /* @__PURE__ */ e(oe, { height: 100, variant: "rounded", width: "100%" }),
+          /* @__PURE__ */ e(oe, { height: 100, variant: "rounded", width: "100%" }),
+          /* @__PURE__ */ e(oe, { height: 600, variant: "rounded", width: "100%" })
         ] }),
         /* @__PURE__ */ e(
-          Ae,
+          Ge,
           {
             ariaLabelClose: a.close_drawer_aria,
             isOpen: y,
             onClose: () => d(!1),
             shouldShowHeaderBorders: !1,
             title: a.action_title,
-            children: /* @__PURE__ */ e(He, {})
+            children: /* @__PURE__ */ e(ze, {})
           }
         )
       ]
     }
-  ) : /* @__PURE__ */ e(j, {});
+  ) : /* @__PURE__ */ e(K, {});
 }), Rt = T(() => {
-  const { recurring: t } = D(), { availableWidth: n } = rt(), { selectedDay: i, selectedDayRecurrences: a, setSelectedDay: r, upcomingRecurrences: l } = v(), u = n < 750;
-  return /* @__PURE__ */ o(c, { flexDirection: u ? "column" : "row", width: "100%", children: [
-    /* @__PURE__ */ e(Ne, {}),
-    !u && /* @__PURE__ */ e(se, { flexItem: !0, orientation: "vertical", sx: { my: 16, ml: 16 } }),
+  const { recurring: t } = D(), { availableWidth: n } = Ae(), { selectedDay: i, selectedDayRecurrences: a, setSelectedDay: r, upcomingRecurrences: l } = v(), p = n < 750;
+  return /* @__PURE__ */ o(c, { flexDirection: p ? "column" : "row", width: "100%", children: [
+    /* @__PURE__ */ e(ke, {}),
+    !p && /* @__PURE__ */ e(ce, { flexItem: !0, orientation: "vertical", sx: { my: 16, ml: 16 } }),
     /* @__PURE__ */ e(
-      H,
+      z,
       {
         isMini: !0,
         onResetClick: i ? () => r(i) : void 0,
         recurrences: a || l.slice(0, 5),
-        sx: { width: u ? "100%" : "calc(100% - 336px)", mt: 12 },
-        title: i ? N(
+        sx: { width: p ? "100%" : "calc(100% - 336px)", mt: 12 },
+        title: i ? O(
           t.day_transactions,
           A(i, E.MONTH_DAY)
         ) : t.upcoming_activity
@@ -613,15 +625,15 @@ const Z = {
   ] });
 }), wn = T(
   ({ onPrimaryCtaClick: t, sx: n }) => {
-    const { accounts: i } = pe(), { recurring: a } = D(), { setFilter: r } = ge(), { isDataLoaded: l, loadRepeatingTransactions: u } = v(), { isCopyLoaded: g, isInitialized: s, setSelectedAccounts: m, selectedAccountGuids: f } = V();
+    const { accounts: i } = ge(), { recurring: a } = D(), { setFilter: r } = he(), { isDataLoaded: l, loadRepeatingTransactions: p } = v(), { isCopyLoaded: u, isInitialized: s, setSelectedAccounts: m, selectedAccountGuids: f } = X();
     return h.useEffect(() => {
       s && m(i);
     }, [s]), h.useEffect(() => {
       f.length > 0 && (r({
-        dateRange: { start: de(le(), 90), end: ce() },
+        dateRange: { start: ue(de(), 90), end: le() },
         accounts: f
-      }), u().finally());
-    }, [f]), !g || !s ? /* @__PURE__ */ e(j, {}) : /* @__PURE__ */ e(
+      }), p().finally());
+    }, [f]), !u || !s ? /* @__PURE__ */ e(K, {}) : /* @__PURE__ */ e(
       pt,
       {
         className: "mx-exp-recurring-transactions-miniwidget",
@@ -630,7 +642,7 @@ const Z = {
         subTitle: a.sub_title,
         sx: n,
         title: a.mini_title,
-        children: l ? /* @__PURE__ */ e(Rt, {}) : /* @__PURE__ */ e(j, {})
+        children: l ? /* @__PURE__ */ e(Rt, {}) : /* @__PURE__ */ e(K, {})
       }
     );
   }
@@ -638,7 +650,7 @@ const Z = {
   upcomingRecurrences: t,
   maxLogos: n = 3
 }) => /* @__PURE__ */ e(c, { sx: { flexDirection: "row", gap: 4 }, children: t?.slice(0, n).map((i, a) => /* @__PURE__ */ e(
-  ue,
+  me,
   {
     categoryGuid: i.categoryGuid || "",
     merchantGuid: i.merchantGuid || ""
@@ -651,14 +663,14 @@ const Z = {
 }) => {
   const a = (r) => r * (n / 2);
   return /* @__PURE__ */ e(
-    O,
+    k,
     {
       sx: {
         position: "relative",
         width: 64
       },
       children: t.map((r, l) => l < i ? /* @__PURE__ */ e(
-        O,
+        k,
         {
           sx: {
             borderRadius: "4px",
@@ -669,7 +681,7 @@ const Z = {
             position: "absolute"
           },
           children: /* @__PURE__ */ e(
-            ue,
+            me,
             {
               categoryGuid: r.categoryGuid || "",
               merchantGuid: r.merchantGuid || "",
@@ -689,7 +701,7 @@ const Z = {
   label: r
 }) => /* @__PURE__ */ o(c, { sx: { alignItems: "center", flexDirection: "row", gap: 8 }, children: [
   /* @__PURE__ */ e(
-    O,
+    k,
     {
       sx: {
         borderRadius: "2px",
@@ -700,73 +712,73 @@ const Z = {
     }
   ),
   /* @__PURE__ */ o(c, { sx: { alignItems: "center", flexDirection: "row", gap: 2 }, children: [
-    !a && /* @__PURE__ */ e(p, { bold: !0, variant: "caption", children: L(t, t === 0 || !i ? "0,0" : "0,0.00") }),
-    /* @__PURE__ */ e(p, { variant: "caption", children: r })
+    !a && /* @__PURE__ */ e(g, { bold: !0, variant: "caption", children: L(t, t === 0 || !i ? "0,0" : "0,0.00") }),
+    /* @__PURE__ */ e(g, { variant: "caption", children: r })
   ] })
 ] }), It = T(() => {
   const { recurring: t } = D();
   return /* @__PURE__ */ o(c, { sx: { alignItems: "start", flexDirection: "row", gap: 12 }, children: [
-    /* @__PURE__ */ e(Xe, { size: 32 }),
+    /* @__PURE__ */ e(Ze, { size: 32 }),
     /* @__PURE__ */ o(c, { children: [
-      /* @__PURE__ */ e(ae, { fontWeight: 600, variant: "body1", children: t.zero_state_content_header }),
-      /* @__PURE__ */ e(ae, { color: "text.secondary", variant: "subtitle2", children: t.zero_state_content_description })
+      /* @__PURE__ */ e(se, { fontWeight: 600, variant: "body1", children: t.zero_state_content_header }),
+      /* @__PURE__ */ e(se, { color: "text.secondary", variant: "subtitle2", children: t.zero_state_content_description })
     ] })
   ] });
 }), vn = T(
   ({ onCTAClick: t }) => {
-    const [n, i] = h.useState(!1), { onEvent: a } = X(), r = me(), { accounts: l } = pe(), [u, { width: g }] = gt(), { isCopyLoaded: s, isInitialized: m, selectedAccountGuids: f, setSelectedAccounts: x } = V(), {
-      loadRepeatingTransactions: b,
+    const [n, i] = h.useState(!1), { onEvent: a } = Z(), r = pe(), { accounts: l } = ge(), [p, { width: u }] = gt(), { isCopyLoaded: s, isInitialized: m, selectedAccountGuids: f, setSelectedAccounts: x } = X(), {
+      loadRepeatingTransactions: C,
       upcomingRecurrences: y,
       expenseTotal: d,
       missedExpenseTotal: S,
-      paidExpenseTotal: W,
-      repeatingTransactions: J,
-      setDateRange: B,
-      upcomingExpenseTotal: $,
-      isDataLoaded: Q
-    } = v(), { setFilter: ee } = ge(), { recurring: I, budgets: U } = D();
+      paidExpenseTotal: G,
+      repeatingTransactions: Q,
+      setDateRange: ee,
+      upcomingExpenseTotal: U,
+      isDataLoaded: $
+    } = v(), { setFilter: te } = he(), { recurring: I, budgets: ne } = D();
     h.useEffect(() => {
       x(l);
     }, [l]), h.useEffect(() => {
-      m && (ee({
-        dateRange: { start: de(le(), 90), end: ce() },
+      m && (te({
+        dateRange: { start: ue(de(), 90), end: le() },
         accounts: f
-      }), B({ start: k(/* @__PURE__ */ new Date()), end: z(/* @__PURE__ */ new Date()) }), b().finally(), i(!0));
+      }), ee({ start: W(/* @__PURE__ */ new Date()), end: B(/* @__PURE__ */ new Date()) }), C().finally(), i(!0));
     }, [m]), h.useEffect(() => {
       n && a(w.RECURRING_TRANSACTIONS_LOAD_WIDGET, {
         state: y.length > 0 ? "default" : "zeroState"
       });
     }, [n]);
-    const _ = g <= 288, te = g >= 450, ne = h.useMemo(() => {
-      const G = [
-        { color: r.palette.success.main, percentage: `${W / d}` }
+    const _ = u <= 288, F = u >= 450, ie = h.useMemo(() => {
+      const N = [
+        { color: r.palette.success.main, percentage: `${G / d}` }
       ];
-      return S && G.push({
+      return S && N.push({
         color: r.palette.error.main,
         percentage: `${S / d}`
-      }), G;
+      }), N;
     }, [
-      W,
+      G,
       d,
       S,
       r.palette.success.main,
       r.palette.error.main
-    ]), C = h.useMemo(() => L(d, d === 0 ? "0,0" : "0,0.00"), [d]), ie = () => {
+    ]), P = h.useMemo(() => L(d, d === 0 ? "0,0" : "0,0.00"), [d]), b = () => {
       a(
         y.length > 0 ? w.RECURRING_TRANSACTIONS_CLICK_GET_STARTED : w.RECURRING_TRANSACTIONS_CLICK_VIEW_ALL
       ), t();
     };
-    if (!s || !n || !Q) return /* @__PURE__ */ e(j, { height: 100 });
-    const Oe = 32, ke = y.length > 0, We = () => ke ? _ ? /* @__PURE__ */ e(
+    if (!s || !n || !$) return /* @__PURE__ */ e(K, { height: 100 });
+    const re = 32, We = y.length > 0, $e = () => We ? _ ? /* @__PURE__ */ e(
       Dt,
       {
-        logoSize: Oe,
+        logoSize: re,
         maxLogos: 3,
         upcomingRecurrences: y.slice(0, 3)
       }
-    ) : /* @__PURE__ */ e(Tt, { maxLogos: 3, upcomingRecurrences: y.slice(0, 3) }) : /* @__PURE__ */ e(c, { sx: { width: _ ? 64 : 104 } }), $e = [
+    ) : /* @__PURE__ */ e(Tt, { maxLogos: 3, upcomingRecurrences: y.slice(0, 3) }) : /* @__PURE__ */ e(c, { sx: { width: _ ? 64 : 104 } }), Pe = [
       {
-        amount: W,
+        amount: G,
         bgColor: "success.main",
         label: I.paid
       },
@@ -776,23 +788,23 @@ const Z = {
         label: I.missed
       },
       {
-        amount: $,
+        amount: U,
         bgColor: "border.light",
         label: I.upcoming
       }
-    ], Ce = !J?.length;
+    ], be = !Q?.length;
     return /* @__PURE__ */ e(
       ht,
       {
         className: "mx-recurring-transaction-microwidget",
-        ctaLabel: Ce ? U.get_started_cta : I.primary_cta,
-        onCTAClick: ie,
+        ctaLabel: be ? ne.get_started_cta : I.primary_cta,
+        onCTAClick: b,
         title: I.recurring_expenses,
-        children: Ce ? /* @__PURE__ */ e(It, {}) : /* @__PURE__ */ o(K, { children: [
+        children: be ? /* @__PURE__ */ e(It, {}) : /* @__PURE__ */ o(Y, { children: [
           /* @__PURE__ */ o(
             c,
             {
-              ref: u,
+              ref: p,
               sx: {
                 flexDirection: "row",
                 justifyContent: "space-between"
@@ -802,7 +814,7 @@ const Z = {
                   c,
                   {
                     sx: [
-                      C.length >= 10 && _ ? { flexDirection: "column" } : { flexDirection: "row", gap: 2 },
+                      P.length >= 10 && _ ? { flexDirection: "column" } : { flexDirection: "row", gap: 2 },
                       {
                         alignItems: "baseline",
                         overflow: "hidden",
@@ -812,15 +824,15 @@ const Z = {
                     ],
                     children: [
                       /* @__PURE__ */ e(
-                        p,
+                        g,
                         {
                           sx: { width: "100%" },
-                          variant: C.length >= 10 && _ ? "H3" : "H2",
-                          children: C
+                          variant: P.length >= 10 && _ ? "H3" : "H2",
+                          children: P
                         }
                       ),
                       /* @__PURE__ */ e(
-                        ae,
+                        se,
                         {
                           sx: {
                             pr: 12
@@ -832,12 +844,12 @@ const Z = {
                     ]
                   }
                 ),
-                We()
+                $e()
               ]
             }
           ),
           /* @__PURE__ */ o(c, { sx: { pt: 12 }, children: [
-            /* @__PURE__ */ e(Ee, { data: ne }),
+            /* @__PURE__ */ e(Ne, { data: ie }),
             /* @__PURE__ */ e(
               c,
               {
@@ -847,16 +859,16 @@ const Z = {
                   gap: 16,
                   mt: 4
                 },
-                children: $e.map((G, Pe) => /* @__PURE__ */ e(
+                children: Pe.map((N, He) => /* @__PURE__ */ e(
                   St,
                   {
-                    amount: G.amount,
-                    bgcolor: G.bgColor,
-                    isLargeScreen: te,
+                    amount: N.amount,
+                    bgcolor: N.bgColor,
+                    isLargeScreen: F,
                     isSmallScreen: _,
-                    label: G.label
+                    label: N.label
                   },
-                  `recurrence-legend-${Pe}`
+                  `recurrence-legend-${He}`
                 ))
               }
             )
@@ -870,7 +882,7 @@ export {
   On as AddRecurringTransactionDetails,
   An as ManageExpenses,
   kn as ManageIncome,
-  He as RecurringSettings,
+  ze as RecurringSettings,
   vn as RecurringTransactionsMicroWidget,
   wn as RecurringTransactionsMiniWidget,
   Gn as RecurringTransactionsStore,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mx-cartographer/experiences",
-  "version": "7.0.26",
+  "version": "7.0.27-alpha-recurring-transactions-css-bug-ram7",
   "description": "Library containing experience widgets",
   "author": "MX",
   "license": "MIT",