@mx-cartographer/experiences 6.26.18-alpha.mega2 → 6.26.18-alpha.mega3

package/dist/networth/stores/NetWorthStore/index.es.js

@@ -0,0 +1,65 @@
+import { makeAutoObservable as i, runInAction as s } from "mobx";
+import { filterAccounts as l, flattenBalances as h, sortByYearMonthAscending as u, buildChartData as D, getLatestNetWorthData as c, buildGainsLosses as d, buildAssetsLiabilities as b } from "../../utils/NetWorthUtils/index.es.js";
+class A {
+  globalStore;
+  netWorthData = { accounts: [], monthlyAccountBalances: [] };
+  netWorthChartData = [];
+  hoveredData;
+  selectedData;
+  constructor(t) {
+    this.globalStore = t, i(this);
+  }
+  loadNetWorthData = async (t) => {
+    try {
+      const a = this.globalStore.accountStore.members, e = l(t, a), r = await (await Promise.all(
+        e.map((n) => this.globalStore.accountStore.api.getMonthlyAccountBalances(n.guid))
+      )).reduce(h, []).sort(u);
+      s(() => {
+        this.netWorthData = {
+          accounts: e,
+          monthlyAccountBalances: r
+        };
+      });
+    } catch (a) {
+      console.error(`Error occured while loading net worth data: ${a}`);
+    }
+  };
+  loadChartData = async (t) => {
+    try {
+      const { accounts: a, monthlyAccountBalances: e } = this.netWorthData, o = await D(a, e, t), r = c(o);
+      s(() => {
+        this.netWorthChartData = o, this.selectedData = r;
+      });
+    } catch (a) {
+      console.error(`Error occured while loading chart data: ${a}`);
+    }
+  };
+  get gainsLosses() {
+    return d(this.selectedData);
+  }
+  get assetsLiabilities() {
+    const { assets: t, liabilities: a, totalAssets: e, totalLiabilities: o } = b(
+      this.netWorthData.accounts
+    );
+    return {
+      netWorth: c(this.netWorthChartData),
+      assets: t,
+      liabilities: a,
+      totalAssets: e,
+      totalLiabilities: o
+    };
+  }
+  setSelectedData = (t) => {
+    s(() => {
+      this.selectedData = this.netWorthChartData[t];
+    });
+  };
+  setHoveredData = (t) => {
+    s(() => {
+      this.hoveredData = t !== null ? this.netWorthChartData[t] : void 0;
+    });
+  };
+}
+export {
+  A as NetWorthStore
+};

package/dist/networth/utils/NetWorthUtils/index.es.js

@@ -0,0 +1,95 @@
+import { format as b } from "date-fns/format";
+import { fromUnixTime as y } from "date-fns/fromUnixTime";
+import { startOfMonth as _ } from "date-fns/startOfMonth";
+import { subMonths as A } from "date-fns/subMonths";
+import { isAccountLiability as h } from "../../../accounts/utils/Accounts/index.es.js";
+import { AccountIconVariants as M, AccountIcon as T, AccountTypeName as N } from "../../../common/types/Account/index.es.js";
+const f = 13, W = (e, s) => e.filter((n) => {
+  const { is_closed: a, is_deleted: i, is_hidden: t, is_manual: o } = n;
+  return a || i || t ? !1 : o || !n.guid ? !0 : s.some((c) => e.some((g) => c.guid === g.member_guid));
+}), G = (e, s) => [...e, ...s], R = (e) => {
+  if (e && e.length > 0)
+    return e[e.length - 1];
+}, U = (e, s) => e.year_month - s.year_month, L = () => Array.from({ length: f }, (e, s) => Math.floor(_(A(/* @__PURE__ */ new Date(), s)).getTime() / 1e3)).sort(), j = (e, s, n) => !e.length || !s.length ? [] : L().reduceRight((i, t) => {
+  const o = s.filter(
+    ({ year_month: r }) => r === parseInt(b(y(t), "yyyyMM"))
+  ), c = e.map((r) => {
+    const l = o.find((u) => u.account_guid === r.guid), m = {
+      change: 0,
+      guid: r.guid,
+      name: r.name,
+      type: r.account_type,
+      balance: 0
+    };
+    if (!l && i.length === 0 && !r.balance) return m;
+    if (!l && i.length === 0)
+      return {
+        ...m,
+        value: h(r) ? -(r.balance ?? 0) : r.balance ?? 0
+      };
+    if (!l) {
+      const u = i[0].accounts.find((p) => p.guid === r.guid);
+      return u || m;
+    }
+    return {
+      change: l.transaction_total,
+      guid: r.guid,
+      name: r.name,
+      type: r.account_type,
+      value: l.balance
+    };
+  }), { y: g, change: d } = c.reduce(
+    (r, l) => ({
+      y: r.y + (l.value || 0),
+      change: r.change + (l.change || 0)
+    }),
+    { y: 0, change: 0 }
+  );
+  return [
+    {
+      accounts: c,
+      x: t,
+      y: g,
+      change: d
+    },
+    ...i
+  ];
+}, []).slice(f - n), w = (e) => {
+  const s = [], n = [];
+  let a = 0, i = 0;
+  return e?.accounts.forEach((t) => {
+    t.change > 0 && (s.push({ accountName: t.name, gain: t.change }), a += t.change), t.change < 0 && (n.push({ accountName: t.name, loss: t.change }), i += t.change);
+  }), { netWorth: e, gains: s, losses: n, totalGains: a, totalLosses: i };
+}, x = (e) => {
+  const s = [], n = [];
+  let a = 0, i = 0;
+  return e.forEach((t) => {
+    if (h(t)) {
+      const o = t.balance ?? 0;
+      n.push({ accountName: t.name, accountType: t.account_type, balance: o }), i += o;
+    } else {
+      const o = t.balance ?? 0;
+      s.push({ accountName: t.name, accountType: t.account_type, balance: o }), a += o;
+    }
+  }), { assets: s, liabilities: n, totalAssets: a, totalLiabilities: i };
+}, z = (e) => {
+  const s = e.reduce((n, a) => {
+    const i = a.accountType;
+    return n[i] || (n[i] = []), n[i].push(a), n;
+  }, {});
+  return Object.entries(s).map(([n, a]) => ({
+    icon: M[+n] || T[+n],
+    name: N[+n],
+    accounts: a
+  }));
+};
+export {
+  x as buildAssetsLiabilities,
+  j as buildChartData,
+  w as buildGainsLosses,
+  W as filterAccounts,
+  G as flattenBalances,
+  R as getLatestNetWorthData,
+  z as groupAccounts,
+  U as sortByYearMonthAscending
+};

package/dist/notifications/components/DateRow/index.es.js

@@ -0,0 +1,8 @@
+import { jsx as t } from "react/jsx-runtime";
+import o from "@mui/material/Box";
+import { Text as e } from "@mxenabled/mxui";
+import { fromUnixToDayOfWeekAndDate as m } from "../../../common/utils/DateUtil/index.es.js";
+const l = ({ date: r }) => /* @__PURE__ */ t(o, { sx: { display: "flex", justifyContent: "center", mt: 12, py: 8 }, children: /* @__PURE__ */ t(e, { bold: !0, variant: "Small", children: m(r) }) });
+export {
+  l as default
+};

package/dist/notifications/components/NotificationBadge/index.es.js

@@ -0,0 +1,26 @@
+import { jsx as t } from "react/jsx-runtime";
+import { observer as a } from "mobx-react-lite";
+import { InstitutionLogo as g, CategoryIcon as l } from "@mxenabled/mxui";
+import { useAccountStore as y, useBudgetsStore as m, useGlobalCopyStore as f } from "../../../common/context/hooks/index.es.js";
+const b = ({ notification: i }) => {
+  const { accounts: s } = y(), { budgets: u } = m(), { accounts: d } = f(), o = s.find((e) => e.guid === i.entity_guid), r = u.find((e) => e.guid === i.entity_guid), c = i.entity_guid.includes("GOL"), n = {
+    badge: {
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "center",
+      borderRadius: 4,
+      marginRight: 12
+    }
+  };
+  return o || c ? /* @__PURE__ */ t("div", { style: n.badge, children: /* @__PURE__ */ t(
+    g,
+    {
+      alt: o?.institutionName || d.institution_logo_alt,
+      institutionGuid: o?.institution_guid ?? "",
+      size: 33
+    }
+  ) }) : /* @__PURE__ */ t("div", { style: n.badge, children: /* @__PURE__ */ t(l, { categoryGuid: r?.category_guid, size: 36 }) });
+}, h = a(b);
+export {
+  h as default
+};

package/dist/notifications/components/NotificationCard/index.es.js

@@ -0,0 +1,42 @@
+import { jsxs as n, jsx as r } from "react/jsx-runtime";
+import { useTheme as l, Card as i } from "@mui/material";
+import { Text as s } from "@mxenabled/mxui";
+import c from "../NotificationBadge/index.es.js";
+import { useNotificationStore as m } from "../../../common/context/hooks/index.es.js";
+const k = ({ notification: e, onClick: o }) => {
+  const { updateNotification: d } = m(), t = l(), a = {
+    card: {
+      alignItems: "center",
+      cursor: "pointer",
+      display: "flex",
+      marginBottom: 12,
+      paddingX: 24,
+      paddingY: 12,
+      "&:focus": {
+        backgroundColor: t.palette.background.default
+      },
+      "&:hover": {
+        backgroundColor: t.palette.background.default
+      }
+    },
+    dot: {
+      backgroundColor: t.palette.primary.main,
+      borderRadius: "100%",
+      flex: "0 0 auto",
+      marginLeft: -8,
+      marginRight: 8,
+      height: 8,
+      width: 8
+    }
+  };
+  return /* @__PURE__ */ n(i, { onClick: () => {
+    o(e), d({ ...e, has_been_viewed: !0 }).finally();
+  }, sx: a.card, children: [
+    e.has_been_viewed ? null : /* @__PURE__ */ r("div", { "data-testid": "new-message-dot", style: a.dot }),
+    /* @__PURE__ */ r(c, { notification: e }),
+    /* @__PURE__ */ r(s, { bold: !e.has_been_viewed, truncate: !1, variant: "Small", children: e.content })
+  ] });
+};
+export {
+  k as default
+};

package/dist/notifications/components/NotificationDrawer/index.es.js

@@ -0,0 +1,67 @@
+import { jsx as t, jsxs as s, Fragment as g } from "react/jsx-runtime";
+import _ from "react";
+import { observer as u } from "mobx-react-lite";
+import d from "@mui/material/IconButton";
+import { Settings as h } from "@mxenabled/mx-icons";
+import { NotificationSettings as S } from "../../../settings/components/notifications/NotificationSettings/index.es.js";
+import C from "../NotificationList/index.es.js";
+import { useAppConfig as b, useGlobalCopyStore as w, useGlobalUiStore as y } from "../../../common/context/hooks/index.es.js";
+import L from "../../../common/components/Loader/index.es.js";
+import n from "../../../common/components/drawer/Drawer/index.es.js";
+const F = u(
+  ({ notificationTypes: r, isOpen: a, onClose: l, onNotificationClick: c }) => {
+    const { config: f } = b(), { notifications: o, settings: e } = w(), { isCopyLoaded: p } = y(), [m, i] = _.useState(!1);
+    return p ? /* @__PURE__ */ s(g, { children: [
+      /* @__PURE__ */ s(
+        n,
+        {
+          ariaLabelClose: o.close_notifications,
+          isOpen: a,
+          onClose: l,
+          title: o.notifications_title,
+          children: [
+            /* @__PURE__ */ t(
+              d,
+              {
+                "aria-label": e.open_notification_settings_btn_aria,
+                onClick: () => i(!0),
+                sx: {
+                  position: "absolute",
+                  right: 8,
+                  top: 8
+                },
+                children: /* @__PURE__ */ t(h, { size: 24 })
+              }
+            ),
+            /* @__PURE__ */ t(
+              C,
+              {
+                onClick: c,
+                onManageNotifications: () => i(!0)
+              }
+            )
+          ]
+        }
+      ),
+      /* @__PURE__ */ t(
+        n,
+        {
+          ariaLabelClose: o.close_notification_settings,
+          isOpen: m,
+          onClose: () => i(!1),
+          title: e.notification_settings_title,
+          children: /* @__PURE__ */ t(
+            S,
+            {
+              notificationTypes: r,
+              showPersonalDetails: !f.display_user_profile_in_settings
+            }
+          )
+        }
+      )
+    ] }) : /* @__PURE__ */ t(L, {});
+  }
+);
+export {
+  F as NotificationDrawer
+};

package/dist/notifications/components/NotificationList/index.es.js

@@ -0,0 +1,36 @@
+import { jsxs as a, Fragment as h, jsx as t } from "react/jsx-runtime";
+import { useEffect as x } from "react";
+import { observer as N } from "mobx-react-lite";
+import m from "@mui/material/Box";
+import b from "@mui/material/Divider";
+import y from "@mui/material/List";
+import { shouldShowDate as C } from "../../utils/NotificationUtils/index.es.js";
+import L from "../DateRow/index.es.js";
+import g from "../NotificationCard/index.es.js";
+import { NotificationEmptyState as v } from "../NotificationsEmptyState/index.es.js";
+import { useNotificationStore as S, useGlobalCopyStore as w, useGlobalUiStore as D } from "../../../common/context/hooks/index.es.js";
+import k from "../../../common/components/Loader/index.es.js";
+const _ = ({ onClick: n, onManageNotifications: l }) => {
+  const { isLoading: i, loadNotifications: d, recentNotifications: r, markAllAsViewed: f } = S(), { notifications: c } = w(), { isCopyLoaded: e } = D(), p = (o) => {
+    n?.(o);
+  };
+  return x(() => (d().finally(), () => {
+    f().finally();
+  }), []), /* @__PURE__ */ a(h, { children: [
+    (!e || i) && /* @__PURE__ */ t(k, { label: c?.loading, size: 40 }),
+    e && !i && r.length === 0 && /* @__PURE__ */ t(v, { onManageNotifications: l }),
+    /* @__PURE__ */ t(y, { sx: { p: 16 }, children: e && !i && r.slice().sort((o, s) => s.delivered_at - o.delivered_at).map((o, s) => {
+      const u = C(s, r);
+      return /* @__PURE__ */ a(m, { sx: { mb: 12 }, children: [
+        u && /* @__PURE__ */ a(m, { sx: { mb: 12 }, children: [
+          /* @__PURE__ */ t(L, { date: o.delivered_at }),
+          /* @__PURE__ */ t(b, {})
+        ] }),
+        /* @__PURE__ */ t(g, { notification: o, onClick: p })
+      ] }, o.guid);
+    }) })
+  ] });
+}, H = N(_);
+export {
+  H as default
+};

package/dist/notifications/components/NotificationsEmptyState/index.es.js

@@ -0,0 +1,34 @@
+import { jsxs as e, jsx as t } from "react/jsx-runtime";
+import { observer as r } from "mobx-react-lite";
+import { Icon as a } from "@mxenabled/mx-icons";
+import { Text as o } from "@mxenabled/mxui";
+import c from "@mui/material/Button";
+import s from "@mui/material/Stack";
+import { useGlobalCopyStore as m } from "../../../common/context/hooks/index.es.js";
+const y = r(
+  ({ onManageNotifications: n }) => {
+    const { notifications: i } = m();
+    return /* @__PURE__ */ e(s, { sx: { alignItems: "center", height: "95%", justifyContent: "center" }, children: [
+      /* @__PURE__ */ t(a, { name: "notifications", size: 32 }),
+      /* @__PURE__ */ t(o, { sx: { pt: 32 }, variant: "H3", children: i.notification_empty_state.no_new_notifications }),
+      /* @__PURE__ */ t(
+        o,
+        {
+          sx: {
+            maxWidth: 327,
+            pb: 24,
+            pt: 12,
+            textAlign: "center",
+            whiteSpace: "normal"
+          },
+          variant: "subtitle1",
+          children: i.notification_empty_state.notification_description
+        }
+      ),
+      /* @__PURE__ */ t(c, { onClick: n, sx: { p: "12px 16px" }, variant: "outlined", children: i.notification_empty_state.manage_notifications })
+    ] });
+  }
+);
+export {
+  y as NotificationEmptyState
+};

package/dist/notifications/constants/NotificationConstants/index.es.js

@@ -0,0 +1,22 @@
+import { AccountNotificationTypes as e, BudgetNotificationTypes as a } from "../../../common/types/Notification/index.es.js";
+import { ApiEndpoints as t } from "../../../common/constants/ApiEndpoints/index.es.js";
+const r = (n) => {
+  switch (n) {
+    case a.BudgetExceeded:
+    case a.BudgetOffTarget:
+      return t.BUDGETS;
+    case e.DebtPaymentReminder:
+    case e.AccountBalanceLow:
+    case e.AccountDepositLarge:
+      return t.ACCOUNTS;
+    case e.TransactionExpenseLarge:
+    case e.TransactionFeeCharge:
+    case e.InternationalTransaction:
+      return t.TRANSACTIONS;
+    default:
+      return null;
+  }
+};
+export {
+  r as getNotificationDetailRoute
+};

package/dist/notifications/index.es.js

@@ -0,0 +1,12 @@
+import { getNotificationDetailRoute as i } from "./constants/NotificationConstants/index.es.js";
+import { NotificationStore as r } from "./stores/NotificationStore/index.es.js";
+import { default as a } from "./components/NotificationList/index.es.js";
+import { NotificationDrawer as n } from "./components/NotificationDrawer/index.es.js";
+import { filterRecentNotifications as p } from "./utils/NotificationUtils/index.es.js";
+export {
+  n as NotificationDrawer,
+  a as NotificationList,
+  r as NotificationStore,
+  p as filterRecentNotifications,
+  i as getNotificationDetailRoute
+};

package/dist/notifications/stores/NotificationStore/index.es.js

@@ -0,0 +1,37 @@
+import { makeAutoObservable as o, observable as a, runInAction as e } from "mobx";
+import { filterRecentNotifications as n } from "../../utils/NotificationUtils/index.es.js";
+import { NotificationApi as t } from "../../../common/api/NotificationApi/index.es.js";
+class h {
+  globalStore;
+  api = new t("/", "");
+  isLoading = !0;
+  notifications = [];
+  recentNotifications = [];
+  constructor(i) {
+    this.globalStore = i, this.api = new t(i.endpoint, i.sessionToken), o(this, { notifications: a });
+  }
+  // Used in Money Dashboard
+  get newNotifications() {
+    return this.recentNotifications.filter((i) => !i.has_been_viewed);
+  }
+  loadNotifications = async () => {
+    try {
+      this.isLoading = !0;
+      const i = await this.api.getNotifications();
+      e(() => {
+        this.notifications = i, this.recentNotifications = n(i), this.isLoading = !1;
+      });
+    } catch (i) {
+      console.error(`Error occurred while loading notifications: ${i}`);
+    }
+  };
+  markAllAsViewed = async () => {
+    this.notifications.forEach((i) => i.has_been_viewed = !0), await this.api.markAllAsViewed(), await this.loadNotifications();
+  };
+  updateNotification = async (i) => {
+    i.has_been_viewed = !0, await this.api.updateNotification(i);
+  };
+}
+export {
+  h as NotificationStore
+};

package/dist/notifications/utils/NotificationUtils/index.es.js

@@ -0,0 +1,16 @@
+import { fromUnixTime as n, isSameDay as a } from "date-fns";
+const S = (e, t) => {
+  const r = n(t[e].delivered_at), o = n(t[e - 1]?.delivered_at);
+  return !a(r, o);
+};
+function s(e) {
+  const r = Math.floor(Date.now() / 1e3);
+  return e.filter((o) => {
+    const i = o.delivered_at;
+    return r - i <= 604800;
+  });
+}
+export {
+  s as filterRecentNotifications,
+  S as shouldShowDate
+};

package/dist/recurringtransactions/RecurringTransactionsMicroWidget/index.es.js

@@ -0,0 +1,179 @@
+import { jsx as e, jsxs as l, Fragment as F } from "react/jsx-runtime";
+import n from "react";
+import { observer as $ } from "mobx-react-lite";
+import { endOfMonth as H } from "date-fns/endOfMonth";
+import { endOfToday as K } from "date-fns/endOfToday";
+import { startOfMonth as V } from "date-fns/startOfMonth";
+import { startOfToday as Z } from "date-fns/startOfToday";
+import { subDays as B } from "date-fns/subDays";
+import a from "@mui/material/Stack";
+import P from "@mui/material/styles/useTheme";
+import { Text as X, P as Y } from "@mxenabled/mxui";
+import { useDimensions as q } from "../../common/hooks/useDimensions/index.es.js";
+import { MerchantLogosRow as J } from "../components/micro/MerchantLogosRow/index.es.js";
+import { OverlappingMerchantLogos as Q } from "../components/micro/OverlappingMerchantLogos/index.es.js";
+import { RecurrenceLegend as ee } from "../components/micro/RecurrenceLegend/index.es.js";
+import { ZeroStateMicroWidget as te } from "../ZeroStateMicroWidget/index.es.js";
+import re from "../../common/components/MicroWidgetContainer/index.es.js";
+import { useEvent as oe, useAccountStore as ne, useGlobalUiStore as se, useRecurringTransactionsStore as ie, useTransactionStore as ae, useGlobalCopyStore as ce } from "../../common/context/hooks/index.es.js";
+import { ANALYTICS_EVENTS as g } from "../../common/constants/Analytics/index.es.js";
+import { formatCurrency as me } from "../../common/utils/NumberFormatting/index.es.js";
+import le from "../../common/components/Loader/index.es.js";
+import pe from "../../common/components/charts/StatusBar/index.es.js";
+const ve = $(
+  ({ onCTAClick: C }) => {
+    const [p, R] = n.useState(!1), { onEvent: f } = oe(), c = P(), { accounts: h } = ne(), [b, { width: S }] = q(), { isCopyLoaded: L, isInitialized: T, selectedAccountGuids: E, setSelectedAccounts: I } = se(), {
+      loadRepeatingTransactions: w,
+      upcomingRecurrences: s,
+      expenseTotal: t,
+      missedExpenseTotal: m,
+      paidExpenseTotal: u,
+      repeatingTransactions: A,
+      setDateRange: _,
+      upcomingExpenseTotal: D,
+      isDataLoaded: N
+    } = ie(), { setFilter: y } = ae(), { recurring: r, budgets: O } = ce();
+    n.useEffect(() => {
+      I(h);
+    }, [h]), n.useEffect(() => {
+      T && (y({
+        dateRange: { start: B(Z(), 90), end: K() },
+        accounts: E
+      }), _({ start: V(/* @__PURE__ */ new Date()), end: H(/* @__PURE__ */ new Date()) }), w().finally(), R(!0));
+    }, [T]), n.useEffect(() => {
+      p && f(g.RECURRING_TRANSACTIONS_LOAD_WIDGET, {
+        state: s.length > 0 ? "default" : "zeroState"
+      });
+    }, [p]);
+    const i = S <= 288, M = S >= 450, v = n.useMemo(() => {
+      const o = [
+        { color: c.palette.success.main, percentage: `${u / t}` }
+      ];
+      return m && o.push({
+        color: c.palette.error.main,
+        percentage: `${m / t}`
+      }), o;
+    }, [
+      u,
+      t,
+      m,
+      c.palette.success.main,
+      c.palette.error.main
+    ]), d = n.useMemo(() => me(t, t === 0 ? "0,0" : "0,0.00"), [t]), G = () => {
+      f(
+        s.length > 0 ? g.RECURRING_TRANSACTIONS_CLICK_GET_STARTED : g.RECURRING_TRANSACTIONS_CLICK_VIEW_ALL
+      ), C();
+    };
+    if (!L || !p || !N) return /* @__PURE__ */ e(le, { height: 100 });
+    const W = 32, z = s.length > 0, U = () => z ? i ? /* @__PURE__ */ e(
+      Q,
+      {
+        logoSize: W,
+        maxLogos: 3,
+        upcomingRecurrences: s.slice(0, 3)
+      }
+    ) : /* @__PURE__ */ e(J, { maxLogos: 3, upcomingRecurrences: s.slice(0, 3) }) : /* @__PURE__ */ e(a, { sx: { width: i ? 64 : 104 } }), j = [
+      {
+        amount: u,
+        bgColor: "success.main",
+        label: r.paid
+      },
+      {
+        amount: m,
+        bgColor: "error.main",
+        label: r.missed
+      },
+      {
+        amount: D,
+        bgColor: "border.light",
+        label: r.upcoming
+      }
+    ], x = !A?.length;
+    return /* @__PURE__ */ e(
+      re,
+      {
+        className: "mx-recurring-transaction-microwidget",
+        ctaLabel: x ? O.get_started_cta : r.primary_cta,
+        onCTAClick: G,
+        title: r.recurring_expenses,
+        children: x ? /* @__PURE__ */ e(te, {}) : /* @__PURE__ */ l(F, { children: [
+          /* @__PURE__ */ l(
+            a,
+            {
+              ref: b,
+              sx: {
+                flexDirection: "row",
+                justifyContent: "space-between"
+              },
+              children: [
+                /* @__PURE__ */ l(
+                  a,
+                  {
+                    sx: [
+                      d.length >= 10 && i ? { flexDirection: "column" } : { flexDirection: "row", gap: 2 },
+                      {
+                        alignItems: "baseline",
+                        overflow: "hidden",
+                        textOverflow: "ellipsis",
+                        whiteSpace: "nowrap"
+                      }
+                    ],
+                    children: [
+                      /* @__PURE__ */ e(
+                        X,
+                        {
+                          sx: { width: "100%" },
+                          variant: d.length >= 10 && i ? "H3" : "H2",
+                          children: d
+                        }
+                      ),
+                      /* @__PURE__ */ e(
+                        Y,
+                        {
+                          sx: {
+                            pr: 12
+                          },
+                          variant: "XSmall",
+                          children: r.expected
+                        }
+                      )
+                    ]
+                  }
+                ),
+                U()
+              ]
+            }
+          ),
+          /* @__PURE__ */ l(a, { sx: { pt: 12 }, children: [
+            /* @__PURE__ */ e(pe, { data: v }),
+            /* @__PURE__ */ e(
+              a,
+              {
+                sx: {
+                  alignItems: "center",
+                  flexDirection: "row",
+                  gap: 16,
+                  mt: 4
+                },
+                children: j.map((o, k) => /* @__PURE__ */ e(
+                  ee,
+                  {
+                    amount: o.amount,
+                    bgcolor: o.bgColor,
+                    isLargeScreen: M,
+                    isSmallScreen: i,
+                    label: o.label
+                  },
+                  `recurrence-legend-${k}`
+                ))
+              }
+            )
+          ] })
+        ] })
+      }
+    );
+  }
+);
+export {
+  ve as RecurringTransactionsMicroWidget
+};