@mx-cartographer/experiences 7.0.25-alpha-recurring-transactions-css-bug-ram5 → 7.0.25-alpha-recurring-transactions-css-bug-ram6

package/dist/recurringtransactions/index.es.js

@@ -8,27 +8,27 @@ 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 { 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 Fe from "@mui/material/Tabs";
-import { Schedule as je, MonetizationOn as Ke, Cancel as Me, CheckCircle as Le, ChevronLeft as Ye, ChevronRight as Ve, CurrencyExchange as Xe } from "@mxenabled/mx-icons";
-import { Text as g, MerchantLogo as me, InstitutionLogo as Ze, H3 as qe, P as se } from "@mxenabled/mxui";
+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 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 { 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, c as ge, f as he, p as rt } from "../hooks-DkUqN6JE.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";
@@ -36,7 +36,7 @@ import { A as _, W as at } from "../WidgetContainer-CdBs9WOZ.mjs";
 import st from "@mui/material/Button";
 import ce from "@mui/material/Divider";
 import Ie from "@mui/material/List";
-import Ae from "@mui/material/ListItem";
+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,12 +44,12 @@ 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 Ee } from "../Drawer-kEE73B87.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 k from "@mui/material/Box";
-import { S as Ge } from "../StatusBar-BK_uYHAB.mjs";
-import { u as Ne } from "../useScreenSize-B6JyS_Lj.mjs";
+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";
@@ -58,19 +58,19 @@ const q = {
   gridRow: 1,
   gridColumn: 1,
   zIndex: 2
-}, 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(je, { 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(
-  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, ...q }
   }
 ) }), 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, ...r }) => {
-    const { recurring: a } = D(), { selectedAccountGuids: i } = X(), { recurrences: l, setSelectedDay: p } = v(), s = h.useMemo(
-      () => l.filter((d) => i.includes(d.accountGuid)),
-      [i, l]
+  ({ day: t, outsideCurrentMonth: n, ...i }) => {
+    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(
@@ -79,7 +79,7 @@ const q = {
       (d) => d.type !== M.Income && d.status === R.Paid
     ), 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(Y, { children: [
           f && /* @__PURE__ */ e(ye, { isOffset: !0 }),
@@ -96,7 +96,7 @@ const q = {
           }
         },
         children: /* @__PURE__ */ e(
-          it,
+          rt,
           {
             "aria-label": `
           ${x && a.paid}, 
@@ -113,7 +113,7 @@ const q = {
                 }
               }
             },
-            ...r
+            ...i
           }
         )
       }
@@ -141,8 +141,8 @@ const q = {
       ]
     }
   );
-}), we = 58, Oe = T(() => {
-  const t = pe(), { onEvent: n } = Z(), { selectedDay: r, setDateRange: a } = v(), [i, l] = h.useState(
+}), we = 58, ke = T(() => {
+  const t = pe(), { onEvent: n } = Z(), { selectedDay: i, setDateRange: a } = v(), [r, l] = h.useState(
     De(/* @__PURE__ */ new Date()) * H + we
   ), p = (s) => {
     l(De(s) * H + we), a({
@@ -150,7 +150,7 @@ const q = {
       end: B(s)
     }), n(_.RECURRING_TRANSACTIONS_CLICK_CALENDAR_RIGHT);
   }, u = /* @__PURE__ */ e(
-    Qe,
+    et,
     {
       minDate: W(/* @__PURE__ */ new Date()),
       onMonthChange: p,
@@ -181,10 +181,10 @@ const q = {
           fontWeight: 600
         },
         "& .MuiDayCalendar-slideTransition": {
-          minHeight: i
+          minHeight: r
         },
         "&.MuiDateCalendar-root": {
-          minHeight: i + H
+          minHeight: r + H
         },
         "& .MuiButtonBase-root, .MuiDayCalendar-weekDayLabel": {
           height: H,
@@ -196,13 +196,13 @@ const q = {
           fontSize: t.typography.body2.fontSize
         }
       },
-      value: r,
+      value: i,
       views: ["day"]
     }
   );
-  return /* @__PURE__ */ e(c, { justifyContent: "center", children: /* @__PURE__ */ o(et, { dateAdapter: Je, children: [
-    r && u,
-    !r && u,
+  return /* @__PURE__ */ e(c, { justifyContent: "center", children: /* @__PURE__ */ o(tt, { dateAdapter: Qe, children: [
+    i && u,
+    !i && u,
     /* @__PURE__ */ e(xt, {})
   ] }) });
 }), yt = (t) => {
@@ -242,19 +242,19 @@ const q = {
 }, _e = ({
   recurrence: t,
   isMini: n = !1,
-  onRecurrenceClick: r = () => {
+  onRecurrenceClick: i = () => {
   },
   showOrdinal: a = !1
 }) => {
-  const { recurring: i } = D(), { repeatingTransactions: l } = v(), [p, u] = 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, C = t.status === R.Upcoming;
-  let y = i.paid?.toLowerCase();
-  return x ? y = i.missed?.toLowerCase() : C && (y = a ? Se(i, s || {}, !0) : Se(i, s || {}, !1)), //TODO: implement common/components/ListItemRow.tsx
-  /* @__PURE__ */ o(Ae, { disableGutters: !0, disablePadding: !0, children: [
+  let y = r.paid?.toLowerCase();
+  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: () => {
-      u(!0), r(t);
+      u(!0), i(t);
     }, children: [
       /* @__PURE__ */ e(lt, { children: /* @__PURE__ */ e(
         me,
@@ -274,10 +274,10 @@ const q = {
               /* @__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(g, { variant: "caption", children: Ct(t, i) })
+                /* @__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,
@@ -316,12 +316,12 @@ const q = {
       ) })
     ] }),
     /* @__PURE__ */ e(
-      Ee,
+      Ge,
       {
-        ariaLabelClose: i.close_drawer_aria,
+        ariaLabelClose: r.close_drawer_aria,
         isOpen: p,
         onClose: () => u(!1),
-        title: t.type === M.Income ? i.income_details : i.expense_details,
+        title: t.type === M.Income ? r.income_details : r.expense_details,
         children: s && /* @__PURE__ */ e(
           mt,
           {
@@ -336,20 +336,20 @@ const q = {
   ({
     recurrences: t,
     isMini: n = !1,
-    onResetClick: r,
+    onResetClick: i,
     onRecurrenceClick: a,
-    sx: i = {},
+    sx: r = {},
     title: l
   }) => {
     const { recurring: p } = D(), u = h.useMemo(() => ot(t), [t]);
-    return /* @__PURE__ */ o(c, { sx: { gap: 8, mt: 4, ...i }, children: [
+    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(g, { bold: !0, variant: "body1", children: l }),
-            r && /* @__PURE__ */ e(st, { onClick: r, sx: { mt: -12 }, variant: "text", children: p.reset })
+            i && /* @__PURE__ */ e(st, { onClick: i, sx: { mt: -12 }, variant: "text", children: p.reset })
           ]
         }
       ),
@@ -364,7 +364,7 @@ const q = {
         ),
         /* @__PURE__ */ e(ce, { sx: { mx: 24 } })
       ] }, `recurrence-${m}`)) : u.map((s, m) => /* @__PURE__ */ o(h.Fragment, { children: [
-        /* @__PURE__ */ e(Ae, { children: /* @__PURE__ */ e(
+        /* @__PURE__ */ e(Ee, { children: /* @__PURE__ */ e(
           Ie,
           {
             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) }) }),
@@ -384,24 +384,24 @@ const q = {
     ] });
   }
 ), ve = T(
-  ({ expected: t, isExpense: n = !0, missed: r, paid: a, title: i, total: l, upcoming: p }) => {
-    const u = pe(), { isSmallMobile: s } = Ne(), { recurring: m } = D(), f = h.useMemo(() => {
+  ({ 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 r && x.push({ color: u.palette.error.main, percentage: `${r / t}` }), x;
-    }, [a, t, r]);
+      return i && x.push({ color: u.palette.error.main, percentage: `${i / t}` }), x;
+    }, [a, t, i]);
     return /* @__PURE__ */ o(c, { children: [
       /* @__PURE__ */ o(c, { sx: { flexDirection: "row", justifyContent: "space-between", pb: 12 }, children: [
-        /* @__PURE__ */ e(g, { bold: !0, variant: "body1", children: `${i} (${l})` }),
+        /* @__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(Ge, { 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(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() }),
-        r !== void 0 && /* @__PURE__ */ o(Y, { children: [
+        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(r, "0,0.00") }),
+          !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(k, { sx: { bgcolor: "divider", height: 8, ml: 16, mr: 8, width: 8 } }),
@@ -411,7 +411,7 @@ const q = {
     ] });
   }
 ), bt = T(() => {
-  const { recurring: t } = D(), { isDesktop: n, isLargeDesktop: r, isSmallMobile: a } = Ne(), { onEvent: i } = Z(), {
+  const { recurring: t } = D(), { availableWidth: n } = Ae(), { isDesktop: i, isSmallMobile: a } = Oe(n), { onEvent: r } = Z(), {
     currentMonthExpenses: l,
     currentMonthIncome: p,
     dateRange: u,
@@ -427,24 +427,24 @@ const q = {
     upcomingExpenseTotal: Q,
     upcomingIncomeTotal: ee,
     upcomingRecurrences: U
-  } = v(), [$, te] = h.useState(0), I = Ue(u.start, /* @__PURE__ */ new Date()), ne = (b, re) => {
+  } = v(), [$, te] = h.useState(0), I = Fe(u.start, /* @__PURE__ */ new Date()), ne = (b, re) => {
     te(re);
   }, w = (b) => {
-    i(_.RECURRING_TRANSACTIONS_CLICK_UPCOMING, {
+    r(_.RECURRING_TRANSACTIONS_CLICK_UPCOMING, {
       transaction_guid: b.transaction?.guid
     });
   }, F = (b) => {
-    i(_.RECURRING_TRANSACTIONS_CLICK_PAID, {
+    r(_.RECURRING_TRANSACTIONS_CLICK_PAID, {
       transaction_guid: b.transaction?.guid
     });
   }, ie = () => {
-    const b = ze(u.start, 1);
+    const b = Be(u.start, 1);
     G({
       start: W(b),
       end: B(b)
     });
   }, P = () => {
-    const b = Be(u.start, 1);
+    const b = Ue(u.start, 1);
     G({
       start: W(b),
       end: B(b)
@@ -456,28 +456,28 @@ const q = {
       container: !0,
       sx: {
         pt: 16,
-        pl: n || r ? 48 : 24,
-        pr: n ? 24 : 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(qe, { children: O(
+            /* @__PURE__ */ e(Je, { children: O(
               t.header_title,
               A(u.start, E.MONTH_LONG)
             ) }),
-            !n && /* @__PURE__ */ o(c, { direction: "row", gap: 4, children: [
+            !i && /* @__PURE__ */ o(c, { direction: "row", gap: 4, children: [
               /* @__PURE__ */ e(
                 Re,
                 {
                   color: "primary",
                   disabled: I,
                   onClick: P,
-                  children: /* @__PURE__ */ e(Ye, {})
+                  children: /* @__PURE__ */ e(Ve, {})
                 }
               ),
-              /* @__PURE__ */ e(Re, { color: "primary", onClick: ie, children: /* @__PURE__ */ e(Ve, {}) })
+              /* @__PURE__ */ e(Re, { color: "primary", onClick: ie, children: /* @__PURE__ */ e(Xe, {}) })
             ] })
           ] }),
           /* @__PURE__ */ e(
@@ -502,7 +502,7 @@ const q = {
               upcoming: ee
             }
           ),
-          n && /* @__PURE__ */ e(
+          i && /* @__PURE__ */ e(
             z,
             {
               onRecurrenceClick: w,
@@ -510,8 +510,8 @@ const q = {
               title: t.upcoming_activity
             }
           ),
-          !n && /* @__PURE__ */ o(c, { children: [
-            /* @__PURE__ */ o(Fe, { onChange: ne, value: $, variant: "fullWidth", children: [
+          !i && /* @__PURE__ */ o(c, { children: [
+            /* @__PURE__ */ o(je, { onChange: ne, value: $, variant: "fullWidth", children: [
               /* @__PURE__ */ e(
                 Te,
                 {
@@ -541,8 +541,8 @@ const q = {
             )
           ] })
         ] }) }),
-        n && /* @__PURE__ */ e(ae, { sx: { minWidth: 450 }, xs: "auto", children: /* @__PURE__ */ o(c, { gap: 24, children: [
-          /* @__PURE__ */ e(Oe, {}),
+        i && /* @__PURE__ */ e(ae, { sx: { minWidth: 450 }, xs: "auto", children: /* @__PURE__ */ o(c, { gap: 24, children: [
+          /* @__PURE__ */ e(ke, {}),
           /* @__PURE__ */ e(
             z,
             {
@@ -559,18 +559,18 @@ const q = {
     }
   );
 }), wn = T(({ onBackClick: t, sx: n = {} }) => {
-  const { accounts: r } = ge(), { recurring: a } = D(), { isCopyLoaded: i, 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);
+  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(() => {
-    u(r);
-  }, [r]), h.useEffect(() => {
+    u(i);
+  }, [i]), h.useEffect(() => {
     l && (x({
       dateRange: { start: ue(de(), 90), end: le() },
       accounts: p
     }), f({ start: W(/* @__PURE__ */ new Date()), end: B(/* @__PURE__ */ new Date()) }), m().finally());
-  }, [l]), i ? /* @__PURE__ */ o(
+  }, [l]), r ? /* @__PURE__ */ o(
     at,
     {
-      accountOptions: r,
+      accountOptions: i,
       actions: [
         {
           label: a.action_title,
@@ -591,45 +591,45 @@ const q = {
           /* @__PURE__ */ e(oe, { height: 600, variant: "rounded", width: "100%" })
         ] }),
         /* @__PURE__ */ e(
-          Ee,
+          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(K, {});
 }), Rt = T(() => {
-  const { recurring: t } = D(), { availableWidth: n } = rt(), { selectedDay: r, selectedDayRecurrences: a, setSelectedDay: i, upcomingRecurrences: l } = v(), p = n < 750;
+  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(Oe, {}),
+    /* @__PURE__ */ e(ke, {}),
     !p && /* @__PURE__ */ e(ce, { flexItem: !0, orientation: "vertical", sx: { my: 16, ml: 16 } }),
     /* @__PURE__ */ e(
       z,
       {
         isMini: !0,
-        onResetClick: r ? () => i(r) : void 0,
+        onResetClick: i ? () => r(i) : void 0,
         recurrences: a || l.slice(0, 5),
         sx: { width: p ? "100%" : "calc(100% - 336px)", mt: 12 },
-        title: r ? O(
+        title: i ? O(
           t.day_transactions,
-          A(r, E.MONTH_DAY)
+          A(i, E.MONTH_DAY)
         ) : t.upcoming_activity
       }
     )
   ] });
 }), _n = T(
   ({ onPrimaryCtaClick: t, sx: n }) => {
-    const { accounts: r } = ge(), { recurring: a } = D(), { setFilter: i } = he(), { isDataLoaded: l, loadRepeatingTransactions: p } = v(), { isCopyLoaded: u, isInitialized: s, setSelectedAccounts: m, selectedAccountGuids: f } = X();
+    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(r);
+      s && m(i);
     }, [s]), h.useEffect(() => {
-      f.length > 0 && (i({
+      f.length > 0 && (r({
         dateRange: { start: ue(de(), 90), end: le() },
         accounts: f
       }), p().finally());
@@ -649,19 +649,19 @@ const q = {
 ), Tt = ({
   upcomingRecurrences: t,
   maxLogos: n = 3
-}) => /* @__PURE__ */ e(c, { sx: { flexDirection: "row", gap: 4 }, children: t?.slice(0, n).map((r, a) => /* @__PURE__ */ e(
+}) => /* @__PURE__ */ e(c, { sx: { flexDirection: "row", gap: 4 }, children: t?.slice(0, n).map((i, a) => /* @__PURE__ */ e(
   me,
   {
-    categoryGuid: r.categoryGuid || "",
-    merchantGuid: r.merchantGuid || ""
+    categoryGuid: i.categoryGuid || "",
+    merchantGuid: i.merchantGuid || ""
   },
-  `${r.categoryGuid}-${r.merchantGuid}-${a}`
+  `${i.categoryGuid}-${i.merchantGuid}-${a}`
 )) }), Dt = ({
   upcomingRecurrences: t,
   logoSize: n = 32,
-  maxLogos: r = 3
+  maxLogos: i = 3
 }) => {
-  const a = (i) => i * (n / 2);
+  const a = (r) => r * (n / 2);
   return /* @__PURE__ */ e(
     k,
     {
@@ -669,7 +669,7 @@ const q = {
         position: "relative",
         width: 64
       },
-      children: t.map((i, l) => l < r ? /* @__PURE__ */ e(
+      children: t.map((r, l) => l < i ? /* @__PURE__ */ e(
         k,
         {
           sx: {
@@ -683,22 +683,22 @@ const q = {
           children: /* @__PURE__ */ e(
             me,
             {
-              categoryGuid: i.categoryGuid || "",
-              merchantGuid: i.merchantGuid || "",
+              categoryGuid: r.categoryGuid || "",
+              merchantGuid: r.merchantGuid || "",
               size: n
             }
           )
         },
-        `${i.categoryGuid}-${i.merchantGuid}-${l}`
+        `${r.categoryGuid}-${r.merchantGuid}-${l}`
       ) : null)
     }
   );
 }, St = ({
   amount: t,
   bgcolor: n,
-  isLargeScreen: r,
+  isLargeScreen: i,
   isSmallScreen: a,
-  label: i
+  label: r
 }) => /* @__PURE__ */ o(c, { sx: { alignItems: "center", flexDirection: "row", gap: 8 }, children: [
   /* @__PURE__ */ e(
     k,
@@ -712,13 +712,13 @@ const q = {
     }
   ),
   /* @__PURE__ */ o(c, { sx: { alignItems: "center", flexDirection: "row", gap: 2 }, children: [
-    !a && /* @__PURE__ */ e(g, { bold: !0, variant: "caption", children: L(t, t === 0 || !r ? "0,0" : "0,0.00") }),
-    /* @__PURE__ */ e(g, { variant: "caption", children: i })
+    !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(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 })
@@ -726,7 +726,7 @@ const q = {
   ] });
 }), vn = T(
   ({ onCTAClick: t }) => {
-    const [n, r] = h.useState(!1), { onEvent: a } = Z(), i = pe(), { accounts: l } = ge(), [p, { width: u }] = gt(), { isCopyLoaded: s, isInitialized: m, selectedAccountGuids: f, setSelectedAccounts: x } = X(), {
+    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,
@@ -743,7 +743,7 @@ const q = {
       m && (te({
         dateRange: { start: ue(de(), 90), end: le() },
         accounts: f
-      }), ee({ start: W(/* @__PURE__ */ new Date()), end: B(/* @__PURE__ */ new Date()) }), C().finally(), r(!0));
+      }), ee({ start: W(/* @__PURE__ */ new Date()), end: B(/* @__PURE__ */ new Date()) }), C().finally(), i(!0));
     }, [m]), h.useEffect(() => {
       n && a(_.RECURRING_TRANSACTIONS_LOAD_WIDGET, {
         state: y.length > 0 ? "default" : "zeroState"
@@ -751,32 +751,32 @@ const q = {
     }, [n]);
     const w = u <= 288, F = u >= 450, ie = h.useMemo(() => {
       const N = [
-        { color: i.palette.success.main, percentage: `${G / d}` }
+        { color: r.palette.success.main, percentage: `${G / d}` }
       ];
       return S && N.push({
-        color: i.palette.error.main,
+        color: r.palette.error.main,
         percentage: `${S / d}`
       }), N;
     }, [
       G,
       d,
       S,
-      i.palette.success.main,
-      i.palette.error.main
+      r.palette.success.main,
+      r.palette.error.main
     ]), P = h.useMemo(() => L(d, d === 0 ? "0,0" : "0,0.00"), [d]), b = () => {
       a(
         y.length > 0 ? _.RECURRING_TRANSACTIONS_CLICK_GET_STARTED : _.RECURRING_TRANSACTIONS_CLICK_VIEW_ALL
       ), t();
     };
     if (!s || !n || !$) return /* @__PURE__ */ e(K, { height: 100 });
-    const re = 32, ke = y.length > 0, We = () => ke ? w ? /* @__PURE__ */ e(
+    const re = 32, We = y.length > 0, $e = () => We ? w ? /* @__PURE__ */ e(
       Dt,
       {
         logoSize: re,
         maxLogos: 3,
         upcomingRecurrences: y.slice(0, 3)
       }
-    ) : /* @__PURE__ */ e(Tt, { maxLogos: 3, upcomingRecurrences: y.slice(0, 3) }) : /* @__PURE__ */ e(c, { sx: { width: w ? 64 : 104 } }), $e = [
+    ) : /* @__PURE__ */ e(Tt, { maxLogos: 3, upcomingRecurrences: y.slice(0, 3) }) : /* @__PURE__ */ e(c, { sx: { width: w ? 64 : 104 } }), Pe = [
       {
         amount: G,
         bgColor: "success.main",
@@ -844,12 +844,12 @@ const q = {
                     ]
                   }
                 ),
-                We()
+                $e()
               ]
             }
           ),
           /* @__PURE__ */ o(c, { sx: { pt: 12 }, children: [
-            /* @__PURE__ */ e(Ge, { data: ie }),
+            /* @__PURE__ */ e(Ne, { data: ie }),
             /* @__PURE__ */ e(
               c,
               {
@@ -859,7 +859,7 @@ const q = {
                   gap: 16,
                   mt: 4
                 },
-                children: $e.map((N, Pe) => /* @__PURE__ */ e(
+                children: Pe.map((N, He) => /* @__PURE__ */ e(
                   St,
                   {
                     amount: N.amount,
@@ -868,7 +868,7 @@ const q = {
                     isSmallScreen: w,
                     label: N.label
                   },
-                  `recurrence-legend-${Pe}`
+                  `recurrence-legend-${He}`
                 ))
               }
             )
@@ -882,7 +882,7 @@ export {
   On as AddRecurringTransactionDetails,
   An as ManageExpenses,
   kn as ManageIncome,
-  He as RecurringSettings,
+  ze as RecurringSettings,
   vn as RecurringTransactionsMicroWidget,
   _n as RecurringTransactionsMiniWidget,
   Gn as RecurringTransactionsStore,

package/package.json

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