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

package/dist/recurringtransactions/index.es.js

@@ -1,5 +1,5 @@
 import { jsx as e, jsxs as o, Fragment as Y } from "react/jsx-runtime";
-import h from "react";
+import g from "react";
 import { observer as T } from "mobx-react-lite";
 import { endOfMonth as B } from "date-fns/endOfMonth";
 import { endOfToday as le } from "date-fns/endOfToday";
@@ -14,12 +14,12 @@ 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 Te from "@mui/material/IconButton";
+import De 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 { Schedule as Ke, MonetizationOn as Ye, Cancel as Le, CheckCircle as Ae, ChevronLeft as Ve, ChevronRight as Xe, CurrencyExchange as Ze } from "@mxenabled/mx-icons";
+import { Text as h, MerchantLogo as me, InstitutionLogo as qe, H3 as Je, P as se } from "@mxenabled/mxui";
+import { getWeeksInMonth as Se } 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";
@@ -28,15 +28,15 @@ 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 { u as D, a as X, h as v, e as Z, p as Ee, c as he, f as ge } from "../hooks-DkUqN6JE.mjs";
+import { c as M, a as R, g as Ie, 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 ce from "@mui/material/Divider";
-import Ie from "@mui/material/List";
-import Ee from "@mui/material/ListItem";
+import _e from "@mui/material/List";
+import Ge from "@mui/material/ListItem";
 import ct from "@mui/material/ListSubheader";
 import lt from "@mui/material/ListItemAvatar";
 import dt from "@mui/material/ListItemButton";
@@ -44,29 +44,29 @@ 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 Ge } from "../Drawer-kEE73B87.mjs";
+import { D as Ne } 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 Ne } from "../StatusBar-BK_uYHAB.mjs";
-import { u as Oe } from "../useScreenSize-B6JyS_Lj.mjs";
+import { S as Oe } from "../StatusBar-BK_uYHAB.mjs";
+import { u as fe } 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";
+import { u as ht } from "../useDimensions-27p2evRx.mjs";
+import { M as gt } from "../MicroWidgetContainer-Dxz8uBN9.mjs";
 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(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(
+}, J = (t) => t ? { margin: "0 0 -6px -4px" } : void 0, xe = ({ 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 } }) }), ye = ({ 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(
+) }), Ce = ({ isOffset: t = !1, size: n = 16 }) => /* @__PURE__ */ e(V, { size: n, sx: { ...J(t) }, children: /* @__PURE__ */ e(Le, { color: "error", filled: !0, sx: { fontSize: n, ...q } }) }), be = ({ isOffset: t = !1, size: n = 16 }) => /* @__PURE__ */ e(V, { size: n, sx: { ...J(t) }, children: /* @__PURE__ */ e(Ae, { color: "success", filled: !0, sx: { fontSize: n, ...q } }) }), ft = T(
   ({ day: t, outsideCurrentMonth: n, ...i }) => {
-    const { recurring: a } = D(), { selectedAccountGuids: r } = X(), { recurrences: l, setSelectedDay: p } = v(), s = h.useMemo(
+    const { recurring: a } = D(), { selectedAccountGuids: r } = X(), { recurrences: l, setSelectedDay: p } = v(), s = g.useMemo(
       () => l.filter((d) => r.includes(d.accountGuid)),
       [r, l]
     ).filter(
@@ -82,10 +82,10 @@ const q = {
       it,
       {
         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 })
+          f && /* @__PURE__ */ e(Ce, { isOffset: !0 }),
+          x && /* @__PURE__ */ e(be, { isOffset: !0 }),
+          m && /* @__PURE__ */ e(xe, { isOffset: !0 }),
+          C && /* @__PURE__ */ e(ye, { isOffset: !0 })
         ] }),
         overlap: "circular",
         sx: {
@@ -121,7 +121,7 @@ const q = {
   }
 ), j = ({ icon: t, label: n }) => /* @__PURE__ */ o(c, { alignItems: "center", flexDirection: "row", sx: { gap: 6 }, children: [
   /* @__PURE__ */ e(t, {}),
-  /* @__PURE__ */ e(g, { variant: "XSmall", children: n })
+  /* @__PURE__ */ e(h, { variant: "XSmall", children: n })
 ] }), xt = T(() => {
   const { recurring: t } = D();
   return /* @__PURE__ */ o(
@@ -134,18 +134,18 @@ const q = {
       justifyContent: "center",
       mt: 12,
       children: [
-        /* @__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 })
+        /* @__PURE__ */ e(j, { icon: xe, label: t.expense }),
+        /* @__PURE__ */ e(j, { icon: ye, label: t.income }),
+        /* @__PURE__ */ e(j, { icon: Ce, label: t.missed }),
+        /* @__PURE__ */ e(j, { icon: be, label: t.paid })
       ]
     }
   );
-}), _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
+}), we = 58, ke = T(() => {
+  const t = pe(), { onEvent: n } = Z(), { selectedDay: i, setDateRange: a } = v(), [r, l] = g.useState(
+    Se(/* @__PURE__ */ new Date()) * H + we
   ), p = (s) => {
-    l(De(s) * H + _e), a({
+    l(Se(s) * H + we), a({
       start: W(s),
       end: B(s)
     }), n(w.RECURRING_TRANSACTIONS_CLICK_CALENDAR_RIGHT);
@@ -207,14 +207,14 @@ const q = {
   ] }) });
 }), yt = (t) => {
   if (t.type === M.Income)
-    return /* @__PURE__ */ e(xe, {});
+    return /* @__PURE__ */ e(ye, {});
   switch (t.status) {
     case R.Missed:
-      return /* @__PURE__ */ e(ye, {});
-    case R.Paid:
       return /* @__PURE__ */ e(Ce, {});
+    case R.Paid:
+      return /* @__PURE__ */ e(be, {});
     default:
-      return /* @__PURE__ */ e(fe, {});
+      return /* @__PURE__ */ e(xe, {});
   }
 }, Ct = (t, n) => {
   switch (t.status) {
@@ -239,20 +239,20 @@ const q = {
     default:
       return n.unknown;
   }
-}, we = ({
+}, ve = ({
   recurrence: t,
   isMini: n = !1,
   onRecurrenceClick: i = () => {
   },
   showOrdinal: a = !1
 }) => {
-  const { recurring: r } = D(), { repeatingTransactions: l } = v(), [p, u] = h.useState(!1), s = h.useMemo(
+  const { recurring: r } = D(), { repeatingTransactions: l } = v(), [p, u] = g.useState(!1), s = g.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 = 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: [
+  return x ? y = r.missed?.toLowerCase() : C && (y = a ? Ie(r, s || {}, !0) : Ie(r, s || {}, !1)), //TODO: implement common/components/ListItemRow.tsx
+  /* @__PURE__ */ o(Ge, { disableGutters: !0, disablePadding: !0, children: [
     /* @__PURE__ */ o(dt, { onClick: () => {
       u(!0), i(t);
     }, children: [
@@ -271,10 +271,10 @@ const q = {
           sx: { justifyContent: "space-between", textOverflow: "ellipsis", textWrap: "nowrap" },
           children: [
             /* @__PURE__ */ o(c, { direction: "column", width: "50%", children: [
-              /* @__PURE__ */ e(g, { bold: !0, variant: "body1", children: t.name }),
+              /* @__PURE__ */ e(h, { 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, r) })
+                /* @__PURE__ */ e(h, { variant: "caption", children: Ct(t, r) })
               ] }) : /* @__PURE__ */ o(Y, { children: [
                 t.institutionGuid && /* @__PURE__ */ e(
                   qe,
@@ -284,11 +284,11 @@ const q = {
                     size: 12
                   }
                 ),
-                /* @__PURE__ */ e(g, { sx: { maxWidth: 250 }, variant: "caption", children: t.institutionName })
+                /* @__PURE__ */ e(h, { sx: { maxWidth: 250 }, variant: "caption", children: t.institutionName })
               ] }) })
             ] }),
             /* @__PURE__ */ o(c, { alignItems: "flex-end", width: "100%", children: [
-              /* @__PURE__ */ o(g, { bold: !0, color: m ? "success.main" : "text.primary", variant: "body1", children: [
+              /* @__PURE__ */ o(h, { bold: !0, color: m ? "success.main" : "text.primary", variant: "body1", children: [
                 m ? "+" : "",
                 L(t.amount, "0,0.00")
               ] }),
@@ -304,9 +304,9 @@ const q = {
                     width: "100%"
                   },
                   children: [
-                    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 })
+                    f && /* @__PURE__ */ e(Ae, { color: "success", filled: !0, size: 12 }),
+                    x && /* @__PURE__ */ e(Le, { color: "error", filled: !0, size: 12 }),
+                    /* @__PURE__ */ e(h, { bold: !0, color: "text.secondary", variant: "caption", children: y })
                   ]
                 }
               )
@@ -316,7 +316,7 @@ const q = {
       ) })
     ] }),
     /* @__PURE__ */ e(
-      Ge,
+      Ne,
       {
         ariaLabelClose: r.close_drawer_aria,
         isOpen: p,
@@ -341,21 +341,21 @@ const q = {
     sx: r = {},
     title: l
   }) => {
-    const { recurring: p } = D(), u = h.useMemo(() => ot(t), [t]);
+    const { recurring: p } = D(), u = g.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(g, { bold: !0, variant: "body1", children: l }),
+            /* @__PURE__ */ e(h, { 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(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: [
+      t.length === 0 ? /* @__PURE__ */ e(h, { fontStyle: "italic", sx: { py: 24, textAlign: "center" }, children: p.no_activities }) : /* @__PURE__ */ e(_e, { children: n ? t.map((s, m) => /* @__PURE__ */ o(g.Fragment, { children: [
         /* @__PURE__ */ e(
-          we,
+          ve,
           {
             isMini: n,
             onRecurrenceClick: a,
@@ -363,14 +363,14 @@ const q = {
           }
         ),
         /* @__PURE__ */ e(ce, { sx: { mx: 24 } })
-      ] }, `recurrence-${m}`)) : u.map((s, m) => /* @__PURE__ */ o(h.Fragment, { children: [
-        /* @__PURE__ */ e(Ee, { children: /* @__PURE__ */ e(
-          Ie,
+      ] }, `recurrence-${m}`)) : u.map((s, m) => /* @__PURE__ */ o(g.Fragment, { children: [
+        /* @__PURE__ */ e(Ge, { children: /* @__PURE__ */ e(
+          _e,
           {
-            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) }) }),
+            subheader: /* @__PURE__ */ e(ct, { sx: { bgcolor: "background.paper", ml: 8, pb: 4, pt: 12 }, children: /* @__PURE__ */ e(h, { 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(
-              we,
+            children: s.recurrences.map((f, x) => /* @__PURE__ */ e(g.Fragment, { children: /* @__PURE__ */ e(
+              ve,
               {
                 isMini: n,
                 onRecurrenceClick: a,
@@ -383,35 +383,35 @@ const q = {
       ] }, `recurrence-${m}`)) })
     ] });
   }
-), ve = T(
+), Me = 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 u = pe(), { isSmallMobile: s } = fe(), { recurring: m } = D(), f = g.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, { children: [
       /* @__PURE__ */ o(c, { sx: { flexDirection: "row", justifyContent: "space-between", pb: 12 }, children: [
-        /* @__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(h, { bold: !0, variant: "body1", children: `${r} (${l})` }),
+        /* @__PURE__ */ e(h, { bold: !0, color: n ? "text.primary" : "success.main", variant: "body1", children: `${n ? "-" : "+"}${L(t, "0,0.00")}` })
       ] }),
-      /* @__PURE__ */ e(Ne, { data: f, height: 12 }),
+      /* @__PURE__ */ e(Oe, { 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() }),
+        !s && /* @__PURE__ */ e(h, { bold: !0, variant: "body2", children: L(a, "0,0.00") }),
+        /* @__PURE__ */ e(h, { 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() })
+          !s && /* @__PURE__ */ e(h, { bold: !0, variant: "body2", children: L(i, "0,0.00") }),
+          /* @__PURE__ */ e(h, { variant: "caption", children: m.missed?.toLowerCase() })
         ] }),
         /* @__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 })
+        !s && /* @__PURE__ */ e(h, { bold: !0, variant: "body2", children: L(p, "0,0.00") }),
+        /* @__PURE__ */ e(h, { variant: "caption", children: m.upcoming })
       ] })
     ] });
   }
 ), bt = T(() => {
-  const { recurring: t } = D(), { availableWidth: n } = Ae(), { isDesktop: i, isSmallMobile: a } = Oe(n), { onEvent: r } = Z(), {
+  const { recurring: t } = D(), { availableWidth: n } = Ee(), { isDesktop: i, isSmallMobile: a } = fe(n), { onEvent: r } = Z(), {
     currentMonthExpenses: l,
     currentMonthIncome: p,
     dateRange: u,
@@ -427,7 +427,7 @@ const q = {
     upcomingExpenseTotal: Q,
     upcomingIncomeTotal: ee,
     upcomingRecurrences: U
-  } = v(), [$, te] = h.useState(0), I = Fe(u.start, /* @__PURE__ */ new Date()), ne = (b, re) => {
+  } = v(), [$, te] = g.useState(0), I = Fe(u.start, /* @__PURE__ */ new Date()), ne = (b, re) => {
     te(re);
   }, _ = (b) => {
     r(w.RECURRING_TRANSACTIONS_CLICK_UPCOMING, {
@@ -456,9 +456,7 @@ const q = {
       container: !0,
       sx: {
         pt: 16,
-        pl: i ? 48 : 24,
-        pr: i ? 24 : 16,
-        spacing: 24
+        px: i ? 48 : 24
       },
       children: [
         /* @__PURE__ */ e(ae, { md: !0, sm: 12, width: "100%", children: /* @__PURE__ */ o(c, { sx: { gap: 16 }, children: [
@@ -469,7 +467,7 @@ const q = {
             ) }),
             !i && /* @__PURE__ */ o(c, { direction: "row", gap: 4, children: [
               /* @__PURE__ */ e(
-                Re,
+                Te,
                 {
                   color: "primary",
                   disabled: I,
@@ -477,11 +475,11 @@ const q = {
                   children: /* @__PURE__ */ e(Ve, {})
                 }
               ),
-              /* @__PURE__ */ e(Re, { color: "primary", onClick: ie, children: /* @__PURE__ */ e(Xe, {}) })
+              /* @__PURE__ */ e(Te, { color: "primary", onClick: ie, children: /* @__PURE__ */ e(Xe, {}) })
             ] })
           ] }),
           /* @__PURE__ */ e(
-            ve,
+            Me,
             {
               expected: s,
               missed: f,
@@ -492,7 +490,7 @@ const q = {
             }
           ),
           /* @__PURE__ */ e(
-            ve,
+            Me,
             {
               expected: m,
               isExpense: !1,
@@ -513,15 +511,15 @@ const q = {
           !i && /* @__PURE__ */ o(c, { children: [
             /* @__PURE__ */ o(je, { onChange: ne, value: $, variant: "fullWidth", children: [
               /* @__PURE__ */ e(
-                Te,
+                De,
                 {
-                  label: /* @__PURE__ */ e(g, { bold: !0, sx: { textTransform: "none" }, variant: "body1", children: a ? t.upcoming : t.upcoming_activity })
+                  label: /* @__PURE__ */ e(h, { bold: !0, sx: { textTransform: "none" }, variant: "body1", children: a ? t.upcoming : t.upcoming_activity })
                 }
               ),
               /* @__PURE__ */ e(
-                Te,
+                De,
                 {
-                  label: /* @__PURE__ */ e(g, { bold: !0, sx: { textTransform: "none" }, variant: "body1", children: a ? t.past : t.past_transactions })
+                  label: /* @__PURE__ */ e(h, { bold: !0, sx: { textTransform: "none" }, variant: "body1", children: a ? t.past : t.past_transactions })
                 }
               )
             ] }),
@@ -559,15 +557,17 @@ const q = {
     }
   );
 }), _n = T(({ onBackClick: t, sx: n = {} }) => {
-  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(() => {
+  const { accounts: i } = he(), { recurring: a } = D(), { isCopyLoaded: r, isInitialized: l, selectedAccountGuids: p, setSelectedAccounts: u } = X(), { isDataLoaded: s, loadRepeatingTransactions: m, setDateRange: f } = v(), { setFilter: x } = ge(), { onEvent: C } = Z(), [y, d] = g.useState(!1);
+  if (g.useEffect(() => {
     u(i);
-  }, [i]), h.useEffect(() => {
+  }, [i]), g.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]), r ? /* @__PURE__ */ o(
+  }, [l]), !r) return /* @__PURE__ */ e(K, {});
+  const { isMobile: S } = fe();
+  return /* @__PURE__ */ o(
     at,
     {
       accountOptions: i,
@@ -580,6 +580,7 @@ const q = {
           }
         }
       ],
+      hasDivider: S,
       onAccountsFilterClick: () => C(w.RECURRING_TRANSACTIONS_CLICK_FILTER),
       onBackClick: t,
       sx: n,
@@ -591,7 +592,7 @@ const q = {
           /* @__PURE__ */ e(oe, { height: 600, variant: "rounded", width: "100%" })
         ] }),
         /* @__PURE__ */ e(
-          Ge,
+          Ne,
           {
             ariaLabelClose: a.close_drawer_aria,
             isOpen: y,
@@ -603,9 +604,9 @@ const q = {
         )
       ]
     }
-  ) : /* @__PURE__ */ e(K, {});
+  );
 }), Rt = T(() => {
-  const { recurring: t } = D(), { availableWidth: n } = Ae(), { selectedDay: i, selectedDayRecurrences: a, setSelectedDay: r, upcomingRecurrences: l } = v(), p = n < 750;
+  const { recurring: t } = D(), { availableWidth: n } = Ee(), { 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 } }),
@@ -625,10 +626,10 @@ const q = {
   ] });
 }), wn = T(
   ({ onPrimaryCtaClick: t, sx: n }) => {
-    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(() => {
+    const { accounts: i } = he(), { recurring: a } = D(), { setFilter: r } = ge(), { isDataLoaded: l, loadRepeatingTransactions: p } = v(), { isCopyLoaded: u, isInitialized: s, setSelectedAccounts: m, selectedAccountGuids: f } = X();
+    return g.useEffect(() => {
       s && m(i);
-    }, [s]), h.useEffect(() => {
+    }, [s]), g.useEffect(() => {
       f.length > 0 && (r({
         dateRange: { start: ue(de(), 90), end: le() },
         accounts: f
@@ -712,8 +713,8 @@ 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 || !i ? "0,0" : "0,0.00") }),
-    /* @__PURE__ */ e(g, { variant: "caption", children: r })
+    !a && /* @__PURE__ */ e(h, { bold: !0, variant: "caption", children: L(t, t === 0 || !i ? "0,0" : "0,0.00") }),
+    /* @__PURE__ */ e(h, { variant: "caption", children: r })
   ] })
 ] }), It = T(() => {
   const { recurring: t } = D();
@@ -726,7 +727,7 @@ const q = {
   ] });
 }), vn = T(
   ({ onCTAClick: t }) => {
-    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(), {
+    const [n, i] = g.useState(!1), { onEvent: a } = Z(), r = pe(), { accounts: l } = he(), [p, { width: u }] = ht(), { isCopyLoaded: s, isInitialized: m, selectedAccountGuids: f, setSelectedAccounts: x } = X(), {
       loadRepeatingTransactions: C,
       upcomingRecurrences: y,
       expenseTotal: d,
@@ -736,20 +737,20 @@ const q = {
       setDateRange: ee,
       upcomingExpenseTotal: U,
       isDataLoaded: $
-    } = v(), { setFilter: te } = he(), { recurring: I, budgets: ne } = D();
-    h.useEffect(() => {
+    } = v(), { setFilter: te } = ge(), { recurring: I, budgets: ne } = D();
+    g.useEffect(() => {
       x(l);
-    }, [l]), h.useEffect(() => {
+    }, [l]), g.useEffect(() => {
       m && (te({
         dateRange: { start: ue(de(), 90), end: le() },
         accounts: f
       }), ee({ start: W(/* @__PURE__ */ new Date()), end: B(/* @__PURE__ */ new Date()) }), C().finally(), i(!0));
-    }, [m]), h.useEffect(() => {
+    }, [m]), g.useEffect(() => {
       n && a(w.RECURRING_TRANSACTIONS_LOAD_WIDGET, {
         state: y.length > 0 ? "default" : "zeroState"
       });
     }, [n]);
-    const _ = u <= 288, F = u >= 450, ie = h.useMemo(() => {
+    const _ = u <= 288, F = u >= 450, ie = g.useMemo(() => {
       const N = [
         { color: r.palette.success.main, percentage: `${G / d}` }
       ];
@@ -763,7 +764,7 @@ const q = {
       S,
       r.palette.success.main,
       r.palette.error.main
-    ]), P = h.useMemo(() => L(d, d === 0 ? "0,0" : "0,0.00"), [d]), b = () => {
+    ]), P = g.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();
@@ -792,15 +793,15 @@ const q = {
         bgColor: "border.light",
         label: I.upcoming
       }
-    ], be = !Q?.length;
+    ], Re = !Q?.length;
     return /* @__PURE__ */ e(
-      ht,
+      gt,
       {
         className: "mx-recurring-transaction-microwidget",
-        ctaLabel: be ? ne.get_started_cta : I.primary_cta,
+        ctaLabel: Re ? ne.get_started_cta : I.primary_cta,
         onCTAClick: b,
         title: I.recurring_expenses,
-        children: be ? /* @__PURE__ */ e(It, {}) : /* @__PURE__ */ o(Y, { children: [
+        children: Re ? /* @__PURE__ */ e(It, {}) : /* @__PURE__ */ o(Y, { children: [
           /* @__PURE__ */ o(
             c,
             {
@@ -824,7 +825,7 @@ const q = {
                     ],
                     children: [
                       /* @__PURE__ */ e(
-                        g,
+                        h,
                         {
                           sx: { width: "100%" },
                           variant: P.length >= 10 && _ ? "H3" : "H2",
@@ -849,7 +850,7 @@ const q = {
             }
           ),
           /* @__PURE__ */ o(c, { sx: { pt: 12 }, children: [
-            /* @__PURE__ */ e(Ne, { data: ie }),
+            /* @__PURE__ */ e(Oe, { data: ie }),
             /* @__PURE__ */ e(
               c,
               {

package/package.json

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