@mx-cartographer/experiences 9.0.15-alpha.al2 → 9.0.15-alpha.al4

package/CHANGELOG.md

@@ -1,3 +1,7 @@
+## [9.0.15-alpha] - 06-25-2026
+
+- **ADDED** - recurring transactions a11y improvements
+
 ## [9.0.15] - 06-15-2026
 
 - **FIXED** - Critical Vulnerabilities fix

package/dist/{AccountDetailsDrawer-DhBGzsRl.mjs → AccountDetailsDrawer-CZPeLsCq.mjs}

@@ -50,8 +50,8 @@ import $t from "@mui/material/AlertTitle";
 import Vt from "@mui/material/Link";
 import Wt from "@mui/material/Paper";
 import { endOfToday as zt, subDays as Yt, startOfToday as Gt } from "date-fns";
-import { T as Ht } from "./EmbeddedCard-CsIrZL3g.mjs";
-import { T as jt } from "./TransactionDetails-BRu5HpG8.mjs";
+import { T as Ht } from "./EmbeddedCard-DH8vQ3qN.mjs";
+import { T as jt } from "./TransactionDetails-roZ5xLq8.mjs";
 const Kt = (t, o) => {
   const n = tt.includes(o) ? mt(t) : [], a = et.includes(o) ? pt(t) : [], c = nt.includes(o) ? ht(t) : [];
   return [n, a, c].filter((l) => l.length > 0);

package/dist/{EmbeddedCard-CsIrZL3g.mjs → EmbeddedCard-DH8vQ3qN.mjs}

@@ -1,5 +1,5 @@
-import { jsxs as s, jsx as e } from "react/jsx-runtime";
-import I, { useMemo as X, useState as P, useEffect as q } from "react";
+import { jsxs as a, jsx as e } from "react/jsx-runtime";
+import x, { useMemo as X, useState as P, useEffect as q } from "react";
 import L from "@mui/material/Box";
 import Y from "@mui/material/Button";
 import l from "@mui/material/Stack";
@@ -15,7 +15,7 @@ import ht from "@mui/material/ListItemAvatar";
 import Ct from "@mui/material/ListItemText";
 import { useTheme as M } from "@mui/material/styles";
 import { f as H } from "./NumberFormatting--XMeeBfr.mjs";
-import { L as _t } from "./ListItemWrapper-Bw5FDCJ8.mjs";
+import { L as _t } from "./ListItemWrapper-DRse79Iu.mjs";
 import { fromUnixTime as v } from "date-fns/fromUnixTime";
 import { isSameDay as F } from "date-fns/isSameDay";
 import { f as ut, D as pt } from "./DateFormats-HudZ3Bjs.mjs";
@@ -29,7 +29,7 @@ import { D as It } from "./Drawer-DsnW2o0v.mjs";
 import { ChartContainer as xt, ChartsReferenceLine as U, ChartsXAxis as St, BarPlot as Ot } from "@mui/x-charts";
 import Dt from "@mui/material/Card";
 const K = () => {
-  if (!I.useContext(lt))
+  if (!x.useContext(lt))
     throw new Error("useTransactionsUiStore() must be used within the GlobalDataContext");
   return G().uiStore;
 }, bt = {
@@ -98,32 +98,33 @@ function fe(t) {
     type: "mx/pulse/client_configured_cta"
   });
 }
-const yt = ({ transaction: t, onClick: r }) => {
-  const i = M().palette.mode === "dark", { associatedBeats: o } = G(), { expandedSplits: c } = K(), { transactions: T } = z(), { showInsights: g } = K(), C = t.transaction_type === it.CREDIT, d = I.useMemo(() => o.find((a) => a.associated_transaction_guid === t.guid), [o, t]), p = (a, u) => {
-    const A = [];
-    return a.is_flagged && A.push(
+const yt = ({ transaction: t, onClick: r, component: n }) => {
+  const o = M().palette.mode === "dark", { associatedBeats: s } = G(), { expandedSplits: d } = K(), { transactions: g } = z(), { showInsights: u } = K(), T = t.transaction_type === it.CREDIT, _ = x.useMemo(() => s.find((c) => c.associated_transaction_guid === t.guid), [s, t]), p = (c, A) => {
+    const f = [];
+    return c.is_flagged && f.push(
       /* @__PURE__ */ e(
         k,
         {
           fill: !0,
           name: "flag",
           size: 16,
-          sx: { color: u ? "primary.main" : "warning.dark" }
+          sx: { color: A ? "primary.main" : "warning.dark" }
         },
         "flag"
       )
-    ), a.is_hidden && A.push(/* @__PURE__ */ e(k, { name: "visibility_off", size: 16 }, "hidden")), a.has_been_split && A.push(/* @__PURE__ */ e(k, { name: "call_split", size: 16 }, "split")), A;
-  }, _ = (a, u) => a.is_hidden ? u.is_excluded : a.has_been_split ? u.split_transaction_category_label : a.category || "";
+    ), c.is_hidden && f.push(/* @__PURE__ */ e(k, { name: "visibility_off", size: 16 }, "hidden")), c.has_been_split && f.push(/* @__PURE__ */ e(k, { name: "call_split", size: 16 }, "split")), f;
+  }, C = (c, A) => c.is_hidden ? A.is_excluded : c.has_been_split ? A.split_transaction_category_label : c.category || "";
   return (
     //TODO: implement common/components/ListItemRow.tsx
-    /* @__PURE__ */ s(
+    /* @__PURE__ */ a(
       _t,
       {
         clickEventName: bt.ON_TRANSACTION_LIST_ITEM_CLICK,
+        ...n && { component: n },
         onClick: r ? () => r(t.guid) : void 0,
         sx: t.is_hidden ? { backgroundColor: "grey.50", color: "text.secondary" } : void 0,
         children: [
-          /* @__PURE__ */ e(ht, { children: t.parent_guid && c.includes(t.parent_guid) ? /* @__PURE__ */ e(I.Fragment, {}) : /* @__PURE__ */ e(
+          /* @__PURE__ */ e(ht, { children: t.parent_guid && d.includes(t.parent_guid) ? /* @__PURE__ */ e(x.Fragment, {}) : /* @__PURE__ */ e(
             J,
             {
               categoryGuid: t.top_level_category_guid || "",
@@ -134,36 +135,36 @@ const yt = ({ transaction: t, onClick: r }) => {
             Ct,
             {
               disableTypography: !0,
-              secondary: /* @__PURE__ */ s(l, { direction: "row", justifyContent: "space-between", children: [
-                /* @__PURE__ */ s(l, { alignItems: "center", direction: "row", gap: 4, children: [
-                  p(t, i),
-                  /* @__PURE__ */ e(m, { truncate: !0, variant: "caption", children: _(t, T) })
+              secondary: /* @__PURE__ */ a(l, { direction: "row", justifyContent: "space-between", children: [
+                /* @__PURE__ */ a(l, { alignItems: "center", direction: "row", gap: 4, children: [
+                  p(t, o),
+                  /* @__PURE__ */ e(m, { truncate: !0, variant: "caption", children: C(t, g) })
                 ] }),
-                d && g && /* @__PURE__ */ e(
+                _ && u && /* @__PURE__ */ e(
                   m,
                   {
                     bold: !0,
                     color: "action.active",
-                    onClick: (a) => {
-                      a.stopPropagation(), a.preventDefault(), Lt(d.guid);
+                    onClick: (c) => {
+                      c.stopPropagation(), c.preventDefault(), Lt(_.guid);
                     },
                     truncate: !0,
                     variant: "caption",
-                    children: d.short_title
+                    children: _.short_title
                   }
                 )
               ] }),
-              children: /* @__PURE__ */ s(l, { direction: "row", justifyContent: "space-between", sx: { gap: 8 }, children: [
+              children: /* @__PURE__ */ a(l, { direction: "row", justifyContent: "space-between", sx: { gap: 8 }, children: [
                 /* @__PURE__ */ e(m, { bold: !0, truncate: !0, variant: "body1", children: t.payee || t.description || t.feed_description }),
-                /* @__PURE__ */ s(
+                /* @__PURE__ */ a(
                   m,
                   {
                     bold: !0,
-                    color: C ? "success.main" : "text.primary",
+                    color: T ? "success.main" : "text.primary",
                     sx: { flexShrink: 0 },
                     variant: "body1",
                     children: [
-                      C ? "+" : "",
+                      T ? "+" : "",
                       H(t.amount, "0,0.00")
                     ]
                   }
@@ -180,7 +181,7 @@ const yt = ({ transaction: t, onClick: r }) => {
   children: r
 }) => /* @__PURE__ */ e(L, { display: "inline-block", sx: { bgcolor: t, py: 6, width: "100%" }, children: /* @__PURE__ */ e(m, { bold: !0, sx: { pl: 24 }, variant: "caption", children: r }) }), kt = ({ showIcon: t = !0, showSubtitle: r = !0 }) => {
   const { transactions: n } = z();
-  return /* @__PURE__ */ s(l, { alignItems: "center", gap: 12, height: "auto", mb: 24, mt: 24, children: [
+  return /* @__PURE__ */ a(l, { alignItems: "center", gap: 12, height: "auto", mb: 24, mt: 24, children: [
     t && /* @__PURE__ */ e(nt, { color: "action", sx: { fontSize: 32 } }),
     /* @__PURE__ */ e(m, { bold: !0, color: "text.secondary", variant: "body2", children: n.zero_state_no_transactions }),
     r && /* @__PURE__ */ e(m, { color: "text.secondary", variant: "caption", children: n.zero_state_there_are_no_transactions })
@@ -208,78 +209,79 @@ const yt = ({ transaction: t, onClick: r }) => {
   height: n = "calc(100dvh - 36px)",
   loader: i = /* @__PURE__ */ e(Z, { label: "Loading", size: 40 }),
   onClick: o,
-  showInsights: c = !1,
-  showLoader: T = !1,
+  showInsights: s = !1,
+  showLoader: d = !1,
   transaction: g,
-  width: C = "100%",
-  zeroState: d = /* @__PURE__ */ e(vt, {})
+  width: u = "100%",
+  zeroState: T = /* @__PURE__ */ e(vt, {})
 }) => {
-  const { isLoading: p, sortedTransactions: _ } = G(), a = I.useMemo(() => {
-    const N = r ? _.filter(r) : _;
+  const { isLoading: _, sortedTransactions: p } = G(), C = x.useMemo(() => {
+    const N = r ? p.filter(r) : p;
     return g ?? N;
-  }, [_, g]), { clearExpandedSplits: u, setShowInsights: A, toggleSplit: b } = K(), { onEvent: S } = dt(), O = (N) => {
-    const D = a.find((y) => y.guid === N);
-    if (D?.has_been_split) {
-      b(D.guid);
+  }, [p, g]), { clearExpandedSplits: c, setShowInsights: A, toggleSplit: f } = K(), { onEvent: O } = dt(), D = (N) => {
+    const b = C.find((y) => y.guid === N);
+    if (b?.has_been_split) {
+      f(b.guid);
       return;
     }
-    S(gt.ACCOUNT_DETAILS_CLICK_TRANSACTION, {
-      account_guid: D?.account_guid,
+    O(gt.ACCOUNT_DETAILS_CLICK_TRANSACTION, {
+      account_guid: b?.account_guid,
       transaction_guid: N
     }), o?.(N);
-  }, w = I.useRef(null), f = at({
-    count: a.length,
+  }, w = x.useRef(null), I = at({
+    count: C.length,
     getScrollElement: () => w.current,
-    estimateSize: (N) => B + (W(N, a) ? j : 0),
+    estimateSize: (N) => B + (W(N, C) ? j : 0),
     overscan: 5
   });
-  return I.useEffect(() => f.measure(), [a]), I.useEffect(() => A(c), [c]), I.useEffect(() => () => u(), []), /* @__PURE__ */ e(ct, { component: "div", role: "list", sx: { width: C }, children: /* @__PURE__ */ e(L, { height: n, overflow: "auto", ref: w, role: "presentation", width: C, children: /* @__PURE__ */ s(
+  return x.useEffect(() => I.measure(), [C]), x.useEffect(() => A(s), [s]), x.useEffect(() => () => c(), []), /* @__PURE__ */ e(ct, { component: "div", role: "list", sx: { width: u }, children: /* @__PURE__ */ e(L, { height: n, overflow: "auto", ref: w, role: "presentation", width: u, children: /* @__PURE__ */ a(
     L,
     {
       height: (
         // set the height to auto when there are no transactions so the zero state isn't set to 0
-        f.getVirtualItems().length === 0 ? "auto" : f.getTotalSize()
+        I.getVirtualItems().length === 0 ? "auto" : I.getTotalSize()
       ),
       position: "relative",
       role: "presentation",
       width: "100%",
       children: [
-        (p || T) && i,
-        !p && !T && f.getVirtualItems().length === 0 && d,
-        !p && !T && f.getVirtualItems().length > 0 && f.getVirtualItems().map((N) => {
-          const D = a[N.index], y = W(N.index, a), h = Gt(N.index, a), x = B + (y ? j : 0);
-          return /* @__PURE__ */ s(
+        (_ || d) && i,
+        !_ && !d && I.getVirtualItems().length === 0 && T,
+        !_ && !d && I.getVirtualItems().length > 0 && I.getVirtualItems().map((N) => {
+          const b = C[N.index], y = W(N.index, C), h = Gt(N.index, C), S = B + (y ? j : 0);
+          return /* @__PURE__ */ a(
             L,
             {
               role: "listitem",
               sx: {
-                height: x,
+                height: S,
                 position: "absolute",
                 transform: `translateY(${N.start}px)`,
                 width: "100%",
                 bgcolor: "background.paper"
               },
               children: [
-                y && /* @__PURE__ */ e(Rt, { bgcolor: t, children: mt(D.date) }),
+                y && /* @__PURE__ */ e(Rt, { bgcolor: t, children: mt(b.date) }),
                 /* @__PURE__ */ e(
                   wt,
                   {
-                    ...o && { onClick: O },
-                    transaction: D
+                    component: "div",
+                    ...o && { onClick: D },
+                    transaction: b
                   }
                 ),
                 /* @__PURE__ */ e(st, { sx: { ml: h ? 68 : 0 } })
               ]
             },
-            D.guid
+            b.guid
           );
         })
       ]
     }
   ) }) });
 }, Ht = V(Mt), Kt = ({ message: t, tipAriaLabel: r, onDismiss: n, onAction: i, sx: o }) => {
-  const c = i || n, T = i ? "chevron_right" : "close";
-  return /* @__PURE__ */ s(
+  const s = i || n, d = i ? "chevron_right" : "close";
+  return /* @__PURE__ */ a(
     l,
     {
       sx: {
@@ -296,18 +298,18 @@ const yt = ({ transaction: t, onClick: r }) => {
         ...o
       },
       children: [
-        /* @__PURE__ */ s(l, { sx: { flexDirection: "row", gap: 4 }, children: [
+        /* @__PURE__ */ a(l, { sx: { flexDirection: "row", gap: 4 }, children: [
           /* @__PURE__ */ e(k, { color: "info", fill: !0, name: "lightbulb", size: 24 }),
           /* @__PURE__ */ e($, { color: "primary.dark", fontWeight: 400, noWrap: !1, variant: "subtitle2", children: t })
         ] }),
-        c && /* @__PURE__ */ e(
+        s && /* @__PURE__ */ e(
           ft,
           {
             "aria-label": r,
-            onClick: c,
+            onClick: s,
             size: "small",
             sx: { minHeight: 0, minWidth: 0, p: 0 },
-            children: /* @__PURE__ */ e(k, { color: "primary", fill: !0, name: T, size: 20 })
+            children: /* @__PURE__ */ e(k, { color: "primary", fill: !0, name: d, size: 20 })
           }
         )
       ]
@@ -319,47 +321,47 @@ const yt = ({ transaction: t, onClick: r }) => {
   chart: n,
   children: i,
   data: o,
-  defaultSelectedIndex: c,
-  icon: T,
+  defaultSelectedIndex: s,
+  icon: d,
   onTabChange: g,
-  tipSection: C
+  tipSection: u
 }) => {
-  const { heading: d, subHeading: p } = r, _ = X(
-    () => c ?? (o.length ? o.length - 1 : 0),
-    [c, o.length]
-  ), [a, u] = P(_), A = (S, O) => {
-    g?.(O), u(O);
-  }, b = (S) => {
-    u(S);
+  const { heading: T, subHeading: _ } = r, p = X(
+    () => s ?? (o.length ? o.length - 1 : 0),
+    [s, o.length]
+  ), [C, c] = P(p), A = (O, D) => {
+    g?.(D), c(D);
+  }, f = (O) => {
+    c(O);
   };
-  return /* @__PURE__ */ s(L, { sx: { bgcolor: "background.paper", width: "100%" }, children: [
-    /* @__PURE__ */ e(Nt, { "aria-label": t, onChange: A, value: a, variant: "fullWidth", children: o.map((S, O) => /* @__PURE__ */ e(
+  return /* @__PURE__ */ a(L, { sx: { bgcolor: "background.paper", width: "100%" }, children: [
+    /* @__PURE__ */ e(Nt, { "aria-label": t, onChange: A, value: C, variant: "fullWidth", children: o.map((O, D) => /* @__PURE__ */ e(
       At,
       {
-        id: `transaction-details-tab-${O}`,
-        label: S.label,
+        id: `transaction-details-tab-${D}`,
+        label: O.label,
         sx: { minWidth: "auto", px: 0 }
       },
-      `${S.label}-${O}`
+      `${O.label}-${D}`
     )) }),
-    /* @__PURE__ */ e(l, { sx: { pt: 16, px: 24 }, children: (d || p) && /* @__PURE__ */ s(l, { sx: { gap: 4 }, children: [
-      d && /* @__PURE__ */ e(tt, { children: d }),
-      p && /* @__PURE__ */ s(l, { sx: { alignItems: "center", flexDirection: "row", gap: 8 }, children: [
-        T,
-        /* @__PURE__ */ e(m, { textTransform: "uppercase", variant: "body2", children: p.description })
+    /* @__PURE__ */ e(l, { sx: { pt: 16, px: 24 }, children: (T || _) && /* @__PURE__ */ a(l, { sx: { gap: 4 }, children: [
+      T && /* @__PURE__ */ e(tt, { children: T }),
+      _ && /* @__PURE__ */ a(l, { sx: { alignItems: "center", flexDirection: "row", gap: 8 }, children: [
+        d,
+        /* @__PURE__ */ e(m, { textTransform: "uppercase", variant: "body2", children: _.description })
       ] })
     ] }) }),
-    n?.(a, b),
-    C && /* @__PURE__ */ e(Kt, { ...C }),
-    i?.(a)
+    n?.(C, f),
+    u && /* @__PURE__ */ e(Kt, { ...u }),
+    i?.(C)
   ] });
 }, Vt = (t) => {
   const [r, n] = P({ width: 0, height: 0 });
   return q(() => {
     const i = () => {
       if (t.current) {
-        const { offsetWidth: o, offsetHeight: c } = t.current;
-        n({ width: o, height: c });
+        const { offsetWidth: o, offsetHeight: s } = t.current;
+        n({ width: o, height: s });
       }
     };
     return i(), window.addEventListener("resize", i), () => {
@@ -372,10 +374,10 @@ const yt = ({ transaction: t, onClick: r }) => {
   monthlyAmount: n,
   monthlyAmountLabel: i,
   trendAmount: o,
-  trendAmountLabel: c
+  trendAmountLabel: s
 }) => {
-  const T = M();
-  return /* @__PURE__ */ s(
+  const d = M();
+  return /* @__PURE__ */ a(
     l,
     {
       sx: {
@@ -388,7 +390,7 @@ const yt = ({ transaction: t, onClick: r }) => {
         ...r
       },
       children: [
-        i && /* @__PURE__ */ s(l, { sx: { alignItems: "center", flexDirection: "row", gap: 8 }, children: [
+        i && /* @__PURE__ */ a(l, { sx: { alignItems: "center", flexDirection: "row", gap: 8 }, children: [
           /* @__PURE__ */ e(
             "svg",
             {
@@ -401,13 +403,13 @@ const yt = ({ transaction: t, onClick: r }) => {
               children: /* @__PURE__ */ e("rect", { fill: t, height: "12", rx: "2", width: "12" })
             }
           ),
-          /* @__PURE__ */ s(m, { id: "chartLegendLabel", variant: "caption", children: [
+          /* @__PURE__ */ a(m, { id: "chartLegendLabel", variant: "caption", children: [
             i,
             ": ",
             n
           ] })
         ] }),
-        c && /* @__PURE__ */ s(l, { sx: { alignItems: "center", flexDirection: "row", gap: 8 }, children: [
+        s && /* @__PURE__ */ a(l, { sx: { alignItems: "center", flexDirection: "row", gap: 8 }, children: [
           /* @__PURE__ */ e(
             "svg",
             {
@@ -417,11 +419,11 @@ const yt = ({ transaction: t, onClick: r }) => {
               height: "12",
               role: "figure",
               width: "12",
-              children: /* @__PURE__ */ e("rect", { fill: T.palette.chart.chart7, height: "12", rx: "2", width: "12" })
+              children: /* @__PURE__ */ e("rect", { fill: d.palette.chart.chart7, height: "12", rx: "2", width: "12" })
             }
           ),
-          /* @__PURE__ */ s(m, { id: "chartLegendLabel", variant: "caption", children: [
-            c,
+          /* @__PURE__ */ a(m, { id: "chartLegendLabel", variant: "caption", children: [
+            s,
             ": ",
             o
           ] })
@@ -439,18 +441,18 @@ const yt = ({ transaction: t, onClick: r }) => {
   dataIndex: n,
   removeSelectedTabColorChange: i,
   selectedTabIndex: o,
-  style: c,
-  ...T
+  style: s,
+  ...d
 }) => {
-  const g = M(), { ariaLabel: C, formattedAmount: d } = r[n], p = o === n ? "bold" : 400, _ = c.x ?? 0, a = c.y ?? 0, u = c.width ?? 0, A = c.height ?? 0;
-  return /* @__PURE__ */ s("g", { "aria-label": C, children: [
+  const g = M(), { ariaLabel: u, formattedAmount: T } = r[n], _ = o === n ? "bold" : 400, p = s.x ?? 0, C = s.y ?? 0, c = s.width ?? 0, A = s.height ?? 0;
+  return /* @__PURE__ */ a("g", { "aria-label": u, children: [
     /* @__PURE__ */ e(
       "path",
       {
-        ...T,
-        d: Ut(u, A),
+        ...d,
+        d: Ut(c, A),
         fill: t[n],
-        transform: `translate(${_}, ${a})`
+        transform: `translate(${p}, ${C})`
       }
     ),
     /* @__PURE__ */ e(
@@ -458,11 +460,11 @@ const yt = ({ transaction: t, onClick: r }) => {
       {
         fill: g.palette.text.primary,
         fontSize: 11,
-        fontWeight: i ? "bold" : p,
+        fontWeight: i ? "bold" : _,
         textAnchor: "middle",
-        x: _ + u / 2,
-        y: a - 8,
-        children: d
+        x: p + c / 2,
+        y: C - 8,
+        children: T
       }
     )
   ] });
@@ -477,15 +479,15 @@ const yt = ({ transaction: t, onClick: r }) => {
     right: 40,
     top: 20
   },
-  onBarClick: c,
-  legendPosition: T = "bottom",
+  onBarClick: s,
+  legendPosition: d = "bottom",
   monthlyAmountLabel: g,
-  removeSelectedTabColorChange: C,
-  selectedTabIndex: d,
-  trendAmountLabel: p
+  removeSelectedTabColorChange: u,
+  selectedTabIndex: T,
+  trendAmountLabel: _
 }) => {
-  const _ = I.useRef(null), { height: a, width: u } = Vt(_), A = M(), b = I.useMemo(() => {
-    const h = n.map(({ value: R }) => R), x = Math.min(...h), E = Math.max(...h);
+  const p = x.useRef(null), { height: C, width: c } = Vt(p), A = M(), f = x.useMemo(() => {
+    const h = n.map(({ value: R }) => R), S = Math.min(...h), E = Math.max(...h);
     return {
       series: [
         {
@@ -503,38 +505,38 @@ const yt = ({ transaction: t, onClick: r }) => {
       yAxis: [
         {
           scaleType: "linear",
-          min: x < 0 ? x * 1.2 : 0,
+          min: S < 0 ? S * 1.2 : 0,
           max: E > 0 ? E : 0
         }
       ]
     };
-  }, [n]), S = I.useMemo(() => {
+  }, [n]), O = x.useMemo(() => {
     const h = `${r}80`;
-    return C ? n.map(() => r) : d == null ? [...new Array(n.length - 1).fill(h), r] : n.map((x, E) => E === d ? r : h);
-  }, [r, n, d]), O = I.useMemo(
-    () => n[d ?? n.length - 1],
-    [n, d]
-  ), f = n.reduce((h, x) => Math.min(h, x.value), 1 / 0) < 0, N = /* @__PURE__ */ e(
+    return u ? n.map(() => r) : T == null ? [...new Array(n.length - 1).fill(h), r] : n.map((S, E) => E === T ? r : h);
+  }, [r, n, T]), D = x.useMemo(
+    () => n[T ?? n.length - 1],
+    [n, T]
+  ), I = n.reduce((h, S) => Math.min(h, S.value), 1 / 0) < 0, N = /* @__PURE__ */ e(
     zt,
     {
       color: r,
       legendStyle: { pl: o.left },
-      monthlyAmount: O.formattedAmount,
+      monthlyAmount: D.formattedAmount,
       monthlyAmountLabel: g,
       trendAmount: t?.formattedAverage,
-      trendAmountLabel: p
+      trendAmountLabel: _
     }
-  ), D = g || p, y = (h, { dataIndex: x }) => c?.(x);
-  return /* @__PURE__ */ s(l, { sx: { alignItems: "center", width: "100%" }, children: [
-    D && T === "top" && N,
+  ), b = g || _, y = (h, { dataIndex: S }) => s?.(S);
+  return /* @__PURE__ */ a(l, { sx: { alignItems: "center", width: "100%" }, children: [
+    b && d === "top" && N,
     /* @__PURE__ */ e(
       L,
       {
-        ref: _,
+        ref: p,
         sx: {
           height: i || 122,
-          mb: T === "top" ? 0 : 4,
-          mt: T === "top" ? 4 : 0,
+          mb: d === "top" ? 0 : 4,
+          mt: d === "top" ? 4 : 0,
           touchAction: "pan-y",
           width: "100%",
           "& svg": {
@@ -545,19 +547,19 @@ const yt = ({ transaction: t, onClick: r }) => {
             touchAction: "pan-y"
           }
         },
-        children: /* @__PURE__ */ s(
+        children: /* @__PURE__ */ a(
           xt,
           {
-            height: a,
+            height: C,
             margin: {
               bottom: o.bottom,
               left: o.left,
               right: o.right,
               top: o.top || 45
             },
-            series: b.series,
-            width: u,
-            xAxis: b.xAxis,
+            series: f.series,
+            width: c,
+            xAxis: f.xAxis,
             yAxis: [{ width: 0 }],
             children: [
               t?.average && /* @__PURE__ */ e(
@@ -573,7 +575,7 @@ const yt = ({ transaction: t, onClick: r }) => {
                   y: t?.average
                 }
               ),
-              f && /* @__PURE__ */ e(
+              I && /* @__PURE__ */ e(
                 U,
                 {
                   labelAlign: "middle",
@@ -588,15 +590,15 @@ const yt = ({ transaction: t, onClick: r }) => {
                 {
                   slots: {
                     // eslint-disable-next-line @typescript-eslint/no-unused-vars
-                    axisTickLabel: ({ text: h, ownerState: x, ...E }) => {
-                      const R = n[d ?? n.length - 1]?.label;
+                    axisTickLabel: ({ text: h, ownerState: S, ...E }) => {
+                      const R = n[T ?? n.length - 1]?.label;
                       return /* @__PURE__ */ e(
                         "text",
                         {
                           ...E,
                           style: {
                             ...E.style,
-                            fontWeight: !C && R === h ? "bold" : 400
+                            fontWeight: !u && R === h ? "bold" : 400
                           },
                           children: h
                         }
@@ -605,13 +607,13 @@ const yt = ({ transaction: t, onClick: r }) => {
                   },
                   sx: (h) => ({
                     "& .MuiChartsAxis-line": {
-                      stroke: f ? "none" : h.palette.text?.primary
+                      stroke: I ? "none" : h.palette.text?.primary
                     },
                     "& .MuiChartsAxis-tickContainer:first-of-type .MuiChartsAxis-tick": {
                       display: "none"
                     },
                     "& .MuiChartsAxis-tickLabel": {
-                      transform: f ? "translateY(15px)" : {}
+                      transform: I ? "translateY(15px)" : {}
                     }
                   }),
                   tickLabelStyle: {
@@ -625,16 +627,16 @@ const yt = ({ transaction: t, onClick: r }) => {
                   onItemClick: y,
                   slots: {
                     bar: (h) => {
-                      const { ownerState: x, ...E } = h;
+                      const { ownerState: S, ...E } = h;
                       return /* @__PURE__ */ e(
                         Wt,
                         {
                           ...E,
-                          colorRange: S,
+                          colorRange: O,
                           data: n,
-                          dataIndex: x.dataIndex,
-                          removeSelectedTabColorChange: C,
-                          selectedTabIndex: d ?? n.length - 1,
+                          dataIndex: S.dataIndex,
+                          removeSelectedTabColorChange: u,
+                          selectedTabIndex: T ?? n.length - 1,
                           style: {
                             height: h.height,
                             x: h.x,
@@ -652,7 +654,7 @@ const yt = ({ transaction: t, onClick: r }) => {
         )
       }
     ),
-    D && T === "bottom" && N
+    b && d === "bottom" && N
   ] });
 }, Se = ({
   ariaLabel: t,
@@ -660,37 +662,37 @@ const yt = ({ transaction: t, onClick: r }) => {
   beat: n,
   data: i,
   defaultSelectedIndex: o = 0,
-  icon: c,
-  isOpen: T = !1,
+  icon: s,
+  isOpen: d = !1,
   onClose: g,
-  onTabChange: C,
-  tipSection: d,
-  title: p,
-  transactionListProps: _ = {}
+  onTabChange: u,
+  tipSection: T,
+  title: _,
+  transactionListProps: p = {}
 }) => {
-  const { common: a, transactions: u } = z(), { isCopyLoaded: A } = Tt(), { sortedTransactionsWithSplits: b, tags: S } = G();
-  return A ? /* @__PURE__ */ e(It, { ariaLabelClose: a.close_aria, isOpen: T, onClose: g, title: p, children: /* @__PURE__ */ e(
+  const { common: C, transactions: c } = z(), { isCopyLoaded: A } = Tt(), { sortedTransactionsWithSplits: f, tags: O } = G();
+  return A ? /* @__PURE__ */ e(It, { ariaLabelClose: C.close_aria, isOpen: d, onClose: g, title: _, children: /* @__PURE__ */ e(
     $t,
     {
       ariaLabel: t,
       beat: n,
-      chart: (O, w) => /* @__PURE__ */ e(L, { sx: { pt: 16 }, children: /* @__PURE__ */ e(
+      chart: (D, w) => /* @__PURE__ */ e(L, { sx: { pt: 16 }, children: /* @__PURE__ */ e(
         Bt,
         {
           ...r,
-          onBarClick: (f) => {
-            w(f), r.onBarClick?.(f);
+          onBarClick: (I) => {
+            w(I), r.onBarClick?.(I);
           },
-          selectedTabIndex: O
+          selectedTabIndex: D
         }
       ) }),
       data: i,
       defaultSelectedIndex: o,
-      icon: c,
-      onTabChange: C,
-      tipSection: d,
-      children: () => /* @__PURE__ */ s(I.Fragment, { children: [
-        /* @__PURE__ */ s(
+      icon: s,
+      onTabChange: u,
+      tipSection: T,
+      children: () => /* @__PURE__ */ a(x.Fragment, { children: [
+        /* @__PURE__ */ a(
           l,
           {
             sx: {
@@ -705,25 +707,25 @@ const yt = ({ transaction: t, onClick: r }) => {
               px: 24
             },
             children: [
-              /* @__PURE__ */ e(m, { bold: !0, variant: "body1", children: u.transactions_title }),
-              (_?.transaction || b.length > 0) && /* @__PURE__ */ e(
+              /* @__PURE__ */ e(m, { bold: !0, variant: "body1", children: c.transactions_title }),
+              (p?.transaction || f.length > 0) && /* @__PURE__ */ e(
                 Y,
                 {
                   onClick: () => {
                     ot(
-                      _?.transaction || b,
-                      S
+                      p?.transaction || f,
+                      O
                     );
                   },
                   startIcon: /* @__PURE__ */ e(rt, { name: "ios_share" }),
                   sx: { height: 28 },
-                  children: /* @__PURE__ */ e(m, { bold: !0, variant: "body2", children: u.export_csv_btn })
+                  children: /* @__PURE__ */ e(m, { bold: !0, variant: "body2", children: c.export_csv_btn })
                 }
               )
             ]
           }
         ),
-        /* @__PURE__ */ e(Ht, { ..._ })
+        /* @__PURE__ */ e(Ht, { ...p })
       ] })
     }
   ) }) : /* @__PURE__ */ e(Z, {});
@@ -733,20 +735,20 @@ const yt = ({ transaction: t, onClick: r }) => {
   count: n,
   completeColor: i = "success.main",
   icon: o,
-  label: c,
-  leftLabel: T,
+  label: s,
+  leftLabel: d,
   percentComplete: g = 0,
-  rightLabel: C,
-  sx: d
-}) => /* @__PURE__ */ s(l, { className: "details-container", sx: { p: 24, width: "100%", gap: 16, ...d }, children: [
-  /* @__PURE__ */ s(l, { sx: { alignItems: "center", flexDirection: "row", gap: 12 }, children: [
+  rightLabel: u,
+  sx: T
+}) => /* @__PURE__ */ a(l, { className: "details-container", sx: { p: 24, width: "100%", gap: 16, ...T }, children: [
+  /* @__PURE__ */ a(l, { sx: { alignItems: "center", flexDirection: "row", gap: 12 }, children: [
     /* @__PURE__ */ e(L, { children: o }),
-    /* @__PURE__ */ s(l, { children: [
-      typeof c == "string" ? /* @__PURE__ */ e($, { dangerouslySetInnerHTML: { __html: c }, variant: "body2" }) : c,
+    /* @__PURE__ */ a(l, { children: [
+      typeof s == "string" ? /* @__PURE__ */ e($, { dangerouslySetInnerHTML: { __html: s }, variant: "body2" }) : s,
       typeof t == "string" ? /* @__PURE__ */ e(et, { children: t }) : t
     ] })
   ] }),
-  /* @__PURE__ */ s(l, { sx: { gap: 4 }, children: [
+  /* @__PURE__ */ a(l, { sx: { gap: 4 }, children: [
     /* @__PURE__ */ e(
       l,
       {
@@ -775,9 +777,9 @@ const yt = ({ transaction: t, onClick: r }) => {
         )
       }
     ),
-    !n && /* @__PURE__ */ s(l, { sx: { flexDirection: "row", justifyContent: "space-between" }, children: [
-      /* @__PURE__ */ e(m, { variant: "body2", children: T }),
-      /* @__PURE__ */ e(m, { variant: "body2", children: C })
+    !n && /* @__PURE__ */ a(l, { sx: { flexDirection: "row", justifyContent: "space-between" }, children: [
+      /* @__PURE__ */ e(m, { variant: "body2", children: d }),
+      /* @__PURE__ */ e(m, { variant: "body2", children: u })
     ] })
   ] })
 ] }), De = ({
@@ -787,7 +789,7 @@ const yt = ({ transaction: t, onClick: r }) => {
   instanceSlot: i = void 0,
   onCtaClick: o = () => {
   }
-}) => /* @__PURE__ */ s(Dt, { sx: { pt: 8, pr: 16, pb: 12, pl: 8, borderRadius: "8px" }, children: [
+}) => /* @__PURE__ */ a(Dt, { sx: { pt: 8, pr: 16, pb: 12, pl: 8, borderRadius: "8px" }, children: [
   /* @__PURE__ */ e(
     l,
     {
@@ -801,7 +803,7 @@ const yt = ({ transaction: t, onClick: r }) => {
       children: /* @__PURE__ */ e(m, { bold: !0, variant: "body1", children: t })
     }
   ),
-  /* @__PURE__ */ s(
+  /* @__PURE__ */ a(
     l,
     {
       sx: {
@@ -811,7 +813,7 @@ const yt = ({ transaction: t, onClick: r }) => {
         justifyContent: "space-between"
       },
       children: [
-        /* @__PURE__ */ s(l, { children: [
+        /* @__PURE__ */ a(l, { children: [
           /* @__PURE__ */ e(l, { sx: { pt: 2, pl: 8, pb: 8 }, children: /* @__PURE__ */ e($, { sx: { fontWeight: 400 }, variant: "subtitle2", children: r }) }),
           /* @__PURE__ */ e(l, { sx: { alignItems: "flex-start" }, children: /* @__PURE__ */ e(
             Y,

package/dist/{ExportCsvAction-DPffdVf-.mjs → ExportCsvAction-C9KWH3Az.mjs}

@@ -2,7 +2,7 @@ import { jsx as o } from "react/jsx-runtime";
 import { observer as c } from "mobx-react-lite";
 import { Icon as i } from "@mxenabled/mxui";
 import { e as p } from "./TransactionUtils-BphBJBbU.mjs";
-import { O as m } from "./EmbeddedCard-CsIrZL3g.mjs";
+import { O as m } from "./EmbeddedCard-DH8vQ3qN.mjs";
 import { f as x, g as _, u as C } from "./hooks-97sNJ_lf.mjs";
 import { R as l } from "./ResponsiveButton-CC9F_Ezk.mjs";
 const v = ({ filter: t }) => {

package/dist/ListItemWrapper-DRse79Iu.mjs

@@ -0,0 +1,43 @@
+import { jsx as s } from "react/jsx-runtime";
+import o from "@mui/material/ListItem";
+import l from "@mui/material/ListItemButton";
+import { f } from "./hooks-97sNJ_lf.mjs";
+const g = ({
+  children: t,
+  clickEventName: e,
+  component: r,
+  onClick: a,
+  sx: i = {}
+}) => {
+  const { onEvent: p } = f();
+  return a ? /* @__PURE__ */ s(
+    o,
+    {
+      className: "list-wrapper",
+      ...r && { component: r },
+      sx: { bgcolor: "background.paper", ...i },
+      children: /* @__PURE__ */ s(
+        l,
+        {
+          onClick: () => {
+            e && p(e), a();
+          },
+          children: t
+        }
+      )
+    }
+  ) : /* @__PURE__ */ s(
+    o,
+    {
+      className: "list-wrapper",
+      ...r && { component: r },
+      disableGutters: !1,
+      disablePadding: !1,
+      sx: { bgcolor: "background.paper", ...i },
+      children: t
+    }
+  );
+};
+export {
+  g as L
+};

package/dist/{ManageIncome-DucNK5Pr.mjs → ManageIncome-Dcsnnz86.mjs}

@@ -17,12 +17,12 @@ import { startOfToday as U } from "date-fns/startOfToday";
 import { endOfMonth as We } from "date-fns/endOfMonth";
 import fe from "@mui/material/Button";
 import { CheckCircle as Ke, Cancel as qe, Icon as je, ChevronRight as He, Delete as Qe, Add as $e, ReceiptLong as Xe } from "@mxenabled/mx-icons";
-import { T as Ze } from "./TransactionDetails-BRu5HpG8.mjs";
-import { a as Je } from "./AccountDetailsDrawer-DhBGzsRl.mjs";
+import { T as Ze } from "./TransactionDetails-roZ5xLq8.mjs";
+import { a as Je } from "./AccountDetailsDrawer-CZPeLsCq.mjs";
 import { u as Ve } from "./AccountDetailsHeader-BvbCUQSS.mjs";
 import { C as ee } from "./Category-DEKZGLYe.mjs";
 import { T as ge } from "./TransactionUtils-BphBJBbU.mjs";
-import { u as Ce, T as et, S as tt, a as nt } from "./EmbeddedCard-CsIrZL3g.mjs";
+import { u as Ce, T as et, S as tt, a as nt } from "./EmbeddedCard-DH8vQ3qN.mjs";
 import { u as x, h as Y, g as re, f as K, a as at, c as ot, C as rt } from "./hooks-97sNJ_lf.mjs";
 import { S as it } from "./SearchBox-Cpgu_gdO.mjs";
 import { D as z } from "./Drawer-DsnW2o0v.mjs";
@@ -40,7 +40,7 @@ import { getUnixTime as mt } from "date-fns/getUnixTime";
 import _t from "@mui/material/IconButton";
 import pt from "@mui/material/Menu";
 import ht from "@mui/material/MenuItem";
-import { L as yt } from "./ListItemWrapper-Bw5FDCJ8.mjs";
+import { L as yt } from "./ListItemWrapper-DRse79Iu.mjs";
 import { f as Se, D as xe } from "./DateFormats-HudZ3Bjs.mjs";
 import ft from "@mui/material/Card";
 import gt from "@mui/material/CardActionArea";
@@ -713,7 +713,7 @@ const Q = (n) => n.top_level_category_guid !== ee.INCOME && n.transaction_type =
     return /* @__PURE__ */ l(p, { bgcolor: n, gap: 24, height: "100%", children: [
       /* @__PURE__ */ l(p, { children: [
         /* @__PURE__ */ e(tt, { bgcolor: n, children: kt(d.date) }),
-        /* @__PURE__ */ e(nt, { transaction: d })
+        /* @__PURE__ */ e(nt, { component: "div", transaction: d })
       ] }),
       /* @__PURE__ */ l(j, { children: [
         /* @__PURE__ */ e(y, { bold: !0, sx: { mx: 24 }, variant: "body1", children: h.payment_schedule }),

package/dist/{RecurringSettings-D9P4-Yr1.mjs → RecurringSettings-D8hBbXV_.mjs}

@@ -7,7 +7,7 @@ import R from "@mui/material/Tabs";
 import d from "@mui/material/Divider";
 import b from "@mui/material/List";
 import T from "@mui/material/Stack";
-import { R as C, A as S, a as E, M as v } from "./ManageIncome-DucNK5Pr.mjs";
+import { R as C, A as S, a as E, M as v } from "./ManageIncome-Dcsnnz86.mjs";
 import { u as _, h as A, f } from "./hooks-97sNJ_lf.mjs";
 import { R as y, F as N } from "./RecurringTransactionsUtil-CHWmqvW5.mjs";
 import { A as m } from "./Analytics-WeZYytR0.mjs";

package/dist/{TransactionDetails-BRu5HpG8.mjs → TransactionDetails-roZ5xLq8.mjs}

@@ -22,7 +22,7 @@ import Xe from "@mui/material/FormGroup";
 import ue from "@mui/material/IconButton";
 import $e from "@mui/material/TextField";
 import { u as Ae } from "./useAriaLive-MkYebyUR.mjs";
-import { b as Ze, T as Je, u as ne, O as f, c as et, d as tt, E as at, C as nt } from "./EmbeddedCard-CsIrZL3g.mjs";
+import { b as Ze, T as Je, u as ne, O as f, c as et, d as tt, E as at, C as nt } from "./EmbeddedCard-DH8vQ3qN.mjs";
 import { u as E, g as M, o as rt, c as ot, l as we, f as G, a as it, C as st } from "./hooks-97sNJ_lf.mjs";
 import { A as j } from "./Analytics-WeZYytR0.mjs";
 import lt from "@mui/material/ToggleButton";

package/dist/accounts/index.es.js

@@ -12,8 +12,8 @@ import Z from "@mui/system/Stack";
 import { f as U } from "../NumberFormatting--XMeeBfr.mjs";
 import { u as X, g as e1 } from "../AccountDetailsHeader-BvbCUQSS.mjs";
 import { A as K1, a as z1, b as $1 } from "../AccountDetailsHeader-BvbCUQSS.mjs";
-import { A as E, a as t1 } from "../AccountDetailsDrawer-DhBGzsRl.mjs";
-import { b as q1, u as J1 } from "../AccountDetailsDrawer-DhBGzsRl.mjs";
+import { A as E, a as t1 } from "../AccountDetailsDrawer-CZPeLsCq.mjs";
+import { b as q1, u as J1 } from "../AccountDetailsDrawer-CZPeLsCq.mjs";
 import { i as z, u as R, a as x, c as N, f as $ } from "../hooks-97sNJ_lf.mjs";
 import { A } from "../Analytics-WeZYytR0.mjs";
 import { C as l1 } from "../ConnectionsDrawer-CZU9ku-k.mjs";

package/dist/budgets/index.es.js

@@ -35,8 +35,8 @@ import { A as P } from "../Analytics-WeZYytR0.mjs";
 import Ee from "@mui/material/Tab";
 import Qe from "@mui/material/Tabs";
 import { e as et, g as we } from "../TransactionUtils-BphBJBbU.mjs";
-import { T as ve } from "../EmbeddedCard-CsIrZL3g.mjs";
-import { T as tt, c as ot } from "../TransactionDetails-BRu5HpG8.mjs";
+import { T as ve } from "../EmbeddedCard-DH8vQ3qN.mjs";
+import { T as tt, c as ot } from "../TransactionDetails-roZ5xLq8.mjs";
 import Te from "@mui/material/Card";
 import De from "@mui/material/CardContent";
 import { S as Se } from "../StatusBar-CPfSXe80.mjs";
@@ -45,7 +45,7 @@ import { u as nt, C as at } from "../CategorySelectorDrawer-NJsFsKP1.mjs";
 import Pe from "@mui/material/CardHeader";
 import { subDays as rt } from "date-fns/subDays";
 import st from "@mui/material/IconButton";
-import { M as it } from "../ManageIncome-DucNK5Pr.mjs";
+import { M as it } from "../ManageIncome-Dcsnnz86.mjs";
 import { u as je } from "../useWidgetLoadTimer-B0tB-yzL.mjs";
 import { W as ct } from "../WidgetContainer-DJnp6t6c.mjs";
 import { g as lt, a as dt } from "../BudgetUtil-Bg2AQJpQ.mjs";

package/dist/cashflow/index.es.js

@@ -17,13 +17,13 @@ import { I as pe } from "../InformationTooltip-4su8bn1e.mjs";
 import { u as Oe } from "../useWidgetLoadTimer-B0tB-yzL.mjs";
 import { M as Ze } from "../MiniWidgetContainer-Bmv_WeUd.mjs";
 import { E as et } from "../EmptyState-CJUDc3kD.mjs";
-import { R as tt } from "../RecurringSettings-D9P4-Yr1.mjs";
+import { R as tt } from "../RecurringSettings-D8hBbXV_.mjs";
 import nt from "@mui/material/Tabs";
 import ye from "@mui/material/Tab";
 import { getUnixTime as le } from "date-fns/getUnixTime";
 import Q from "@mui/material/List";
 import ee from "@mui/material/ListItem";
-import { A as ot } from "../AccountDetailsDrawer-DhBGzsRl.mjs";
+import { A as ot } from "../AccountDetailsDrawer-CZPeLsCq.mjs";
 import { f as U, D as Y } from "../DateFormats-HudZ3Bjs.mjs";
 import it from "@mui/material/ListSubheader";
 import { f as J } from "../NumberFormatting--XMeeBfr.mjs";
@@ -34,7 +34,7 @@ import { addDays as _e } from "date-fns/addDays";
 import { DataGridPro as at } from "@mui/x-data-grid-pro";
 import { T as Ce } from "../TabContentContainer-B0eYJP5p.mjs";
 import W from "@mui/material/Button";
-import { M as rt, S as st, i as ct, b as we, c as lt } from "../ManageIncome-DucNK5Pr.mjs";
+import { M as rt, S as st, i as ct, b as we, c as lt } from "../ManageIncome-Dcsnnz86.mjs";
 import { D as He } from "../Drawer-DsnW2o0v.mjs";
 import { subDays as We } from "date-fns/subDays";
 import { endOfToday as dt } from "date-fns/endOfToday";
@@ -44,7 +44,7 @@ import { A as Se } from "../Analytics-WeZYytR0.mjs";
 import { formatISO as ut } from "date-fns/formatISO";
 import { fromUnixTime as De } from "date-fns/fromUnixTime";
 import { startOfMonth as pt } from "date-fns/startOfMonth";
-import { S as ht, a as ft } from "../EmbeddedCard-CsIrZL3g.mjs";
+import { S as ht, a as ft } from "../EmbeddedCard-DH8vQ3qN.mjs";
 import { F as gt, R as Ie, d as ve } from "../RecurringTransactionsUtil-CHWmqvW5.mjs";
 import { k as bt } from "../DateUtil-CzBmbjmA.mjs";
 const q = () => {

package/dist/common/components/ListItemWrapper.d.ts

@@ -1,7 +1,8 @@
-import { default as React } from 'react';
+import { default as React, ElementType } from 'react';
 import { SxProps } from '@mui/material/styles';
 interface ListItemWrapperProps {
     clickEventName?: string;
+    component?: ElementType;
     onClick?: () => void;
     sx?: SxProps;
 }

package/dist/common/index.es.js

@@ -32,7 +32,7 @@ import { G as oe } from "../GlobalAccountFilter-BhzR5Vb1.mjs";
 import { G as ae, m as se, n as ne, W as ie, c as ue, i as le, o as me, p as de, l as ce, q as fe, r as pe, f as ye, s as ge, u as xe, e as Ee, a as he, k as Se, t as Ce, v as _e, w as ve, b as ke, x as be, y as Oe, z as De, h as Te, A as Ie, g as Ae, B as Me, C as Pe, D as we } from "../hooks-97sNJ_lf.mjs";
 import { L as Le } from "../ListItemAction-BqUCLj_w.mjs";
 import { L as Ue } from "../ListItemRow-kH1rn8Xu.mjs";
-import { L as Be } from "../ListItemWrapper-Bw5FDCJ8.mjs";
+import { L as Be } from "../ListItemWrapper-DRse79Iu.mjs";
 import { S as qe } from "../SearchBox-Cpgu_gdO.mjs";
 import { S as Fe, T as $e } from "../Sizes-DISGrlUg.mjs";
 import { T as Qe, a as je } from "../ToggleListItem-Dl1lXNwj.mjs";

package/dist/finstrong/index.es.js

@@ -49,7 +49,7 @@ import { S as dt } from "../Select-CSpkK5cR.mjs";
 import { c as je } from "../Account-DR7Plrqy.mjs";
 import { S as zn } from "../StatusBar-CPfSXe80.mjs";
 import { k as Dt } from "../DateUtil-CzBmbjmA.mjs";
-import { T as Hn, s as Kn, h as Vn, S as jn, a as Yn } from "../EmbeddedCard-CsIrZL3g.mjs";
+import { T as Hn, s as Kn, h as Vn, S as jn, a as Yn } from "../EmbeddedCard-DH8vQ3qN.mjs";
 import { T as ge } from "../TabContentContainer-B0eYJP5p.mjs";
 import Xn from "@mui/material/useMediaQuery";
 import { BarPlot as Un } from "@mui/x-charts/BarChart";
@@ -62,11 +62,11 @@ import { g as Jn, S as eo, b as to } from "../SpendingLegend-CxvNOg3c.mjs";
 import { formatISO as no } from "date-fns/formatISO";
 import { fromUnixTime as oo } from "date-fns/fromUnixTime";
 import { subDays as ro } from "date-fns/subDays";
-import { c as ao, b as pt, S as io, i as so } from "../ManageIncome-DucNK5Pr.mjs";
+import { c as ao, b as pt, S as io, i as so } from "../ManageIncome-Dcsnnz86.mjs";
 import { F as Tt, d as co, R as Ot } from "../RecurringTransactionsUtil-CHWmqvW5.mjs";
 import { LocalizationProvider as lo, DatePicker as po, StaticDatePicker as uo } from "@mui/x-date-pickers";
 import { AdapterDateFns as Rt } from "@mui/x-date-pickers/AdapterDateFnsV3";
-import { R as _o } from "../RecurringSettings-D9P4-Yr1.mjs";
+import { R as _o } from "../RecurringSettings-D8hBbXV_.mjs";
 import { LocalizationProvider as mo } from "@mui/x-date-pickers/LocalizationProvider";
 import ho from "@mui/lab/Timeline";
 import go, { timelineItemClasses as yo } from "@mui/lab/TimelineItem";
@@ -2805,7 +2805,7 @@ const tr = ({ total: t }) => {
         return u.push(
           /* @__PURE__ */ s(m.Fragment, { children: [
             v && /* @__PURE__ */ e(jn, { children: Dt(h.date) }),
-            /* @__PURE__ */ e(Yn, { transaction: h }),
+            /* @__PURE__ */ e(Yn, { component: "div", transaction: h }),
             /* @__PURE__ */ e(ae, { sx: { ml: x ? 44 : 0 } })
           ] }, h.guid)
         ), u;

package/dist/insights/index.es.js

@@ -1,8 +1,8 @@
 import { jsx as t, jsxs as c, Fragment as N } from "react/jsx-runtime";
 import { BottomSheetTransition as r2, Text as E, MerchantLogo as Q, InstitutionLogo as F, P as J, H3 as h1, H2 as c1, Icon as k1, CategoryIcon as g1, createMXTheme as i2 } from "@mxenabled/mxui";
 import C from "@mui/material/Stack";
-import { e as K, p as n2, B as z1, b as l2 } from "../EmbeddedCard-CsIrZL3g.mjs";
-import { f as d5, C as C5, E as m5 } from "../EmbeddedCard-CsIrZL3g.mjs";
+import { e as K, p as n2, B as z1, b as l2 } from "../EmbeddedCard-DH8vQ3qN.mjs";
+import { f as d5, C as C5, E as m5 } from "../EmbeddedCard-DH8vQ3qN.mjs";
 import { CardHeader as a2, Stack as v, Button as A1, Card as j1, Box as L1, ToggleButtonGroup as o2, TextField as s2, Grow as c2, Alert as h2, useTheme as d2, useMediaQuery as H1, AppBar as C2, Toolbar as m2, IconButton as u1, List as p2, ListItem as E2, Divider as u2 } from "@mui/material";
 import { useTheme as f2, styled as x2, Stack as f1 } from "@mui/system";
 import { Link as y2, Icon as S, CheckCircle as W1, ChevronRight as M2 } from "@mxenabled/mx-icons";

package/dist/recurringtransactions/index.es.js

@@ -8,8 +8,8 @@ import { startOfToday as Q } from "date-fns/startOfToday";
 import { subDays as ee } from "date-fns/subDays";
 import Be from "@mui/material/Alert";
 import Fe from "@mui/material/Snackbar";
-import { R as De } from "../RecurringSettings-D9P4-Yr1.mjs";
-import { M as Jn } from "../RecurringSettings-D9P4-Yr1.mjs";
+import { R as De } from "../RecurringSettings-D8hBbXV_.mjs";
+import { M as Jn } from "../RecurringSettings-D8hBbXV_.mjs";
 import { addMonths as Ue } from "date-fns/addMonths";
 import { subMonths as Ye } from "date-fns/subMonths";
 import { isBefore as je } from "date-fns/isBefore";
@@ -52,8 +52,8 @@ import { f as L } from "../NumberFormatting--XMeeBfr.mjs";
 import N from "@mui/material/Box";
 import { u as ve } from "../useScreenSize-mWpmnh5w.mjs";
 import { S as Le } from "../StatusBar-CPfSXe80.mjs";
-import { d as Ct } from "../ManageIncome-DucNK5Pr.mjs";
-import { c as er, M as tr, S as nr } from "../ManageIncome-DucNK5Pr.mjs";
+import { d as Ct } from "../ManageIncome-Dcsnnz86.mjs";
+import { c as er, M as tr, S as nr } from "../ManageIncome-Dcsnnz86.mjs";
 import { D as ie } from "../Drawer-DsnW2o0v.mjs";
 import { S as Ae } from "../SkeletonLoader-BaNboJjD.mjs";
 import { u as oe } from "../useWidgetLoadTimer-B0tB-yzL.mjs";

package/dist/spending/index.es.js

@@ -19,8 +19,8 @@ import { startOfToday as J } from "date-fns/startOfToday";
 import St from "@mui/material/Button";
 import { useTheme as Tt } from "@mui/material";
 import { e as Mt } from "../TransactionUtils-BphBJBbU.mjs";
-import { T as Dt } from "../EmbeddedCard-CsIrZL3g.mjs";
-import { T as xt } from "../TransactionDetails-BRu5HpG8.mjs";
+import { T as Dt } from "../EmbeddedCard-DH8vQ3qN.mjs";
+import { T as xt } from "../TransactionDetails-roZ5xLq8.mjs";
 import vt from "@mui/material/Collapse";
 import wt from "@mui/material/Divider";
 import Q from "@mui/material/List";

package/dist/transactions/components/shared/transactionlist/TransactionRow.d.ts

@@ -1,6 +1,7 @@
 import { default as React } from 'react';
 import { Transaction } from '../../../../core';
 interface TransactionRowProps {
+    component?: React.ElementType;
     onClick?: (guid: string) => void;
     transaction: Transaction;
 }

package/dist/transactions/index.es.js

@@ -1,8 +1,8 @@
-import { C as Be, D as He, M as Pe, a as We, T as $e } from "../TransactionDetails-BRu5HpG8.mjs";
-import { B as xa, b as Aa } from "../TransactionDetails-BRu5HpG8.mjs";
-import { u as B, T as Ge } from "../EmbeddedCard-CsIrZL3g.mjs";
-import { a as Sa } from "../EmbeddedCard-CsIrZL3g.mjs";
-import { E as va } from "../ExportCsvAction-DPffdVf-.mjs";
+import { C as Be, D as He, M as Pe, a as We, T as $e } from "../TransactionDetails-roZ5xLq8.mjs";
+import { B as xa, b as Aa } from "../TransactionDetails-roZ5xLq8.mjs";
+import { u as B, T as Ge } from "../EmbeddedCard-DH8vQ3qN.mjs";
+import { a as Sa } from "../EmbeddedCard-DH8vQ3qN.mjs";
+import { E as va } from "../ExportCsvAction-C9KWH3Az.mjs";
 import { jsxs as m, jsx as e } from "react/jsx-runtime";
 import u from "react";
 import { observer as D } from "mobx-react-lite";

package/dist/trends/index.es.js

@@ -34,8 +34,8 @@ import { useGridApiContext as Yt, useGridRootProps as jt, DataGridPro as Ut } fr
 import Xt from "@mui/material/Badge";
 import Zt from "@mui/material/IconButton";
 import { A as w } from "../Analytics-WeZYytR0.mjs";
-import { T as ct } from "../EmbeddedCard-CsIrZL3g.mjs";
-import { T as dt } from "../TransactionDetails-BRu5HpG8.mjs";
+import { T as ct } from "../EmbeddedCard-DH8vQ3qN.mjs";
+import { T as dt } from "../TransactionDetails-roZ5xLq8.mjs";
 import { D as Pe } from "../Drawer-DsnW2o0v.mjs";
 import { u as Ie } from "../useWidgetLoadTimer-B0tB-yzL.mjs";
 import { L as Le } from "../Loader-CxeBwuPG.mjs";
@@ -55,7 +55,7 @@ import { g as Oe } from "../TransactionUtils-BphBJBbU.mjs";
 import { L as uo } from "../ListItemRow-kH1rn8Xu.mjs";
 import { Stack as mo } from "@mui/material";
 import ho from "@mui/material/ListItemAvatar";
-import { E as go } from "../ExportCsvAction-DPffdVf-.mjs";
+import { E as go } from "../ExportCsvAction-C9KWH3Az.mjs";
 import { u as po } from "../useInsightsEnabled-D5Sdm0TJ.mjs";
 import { E as fo } from "../EmptyState-CJUDc3kD.mjs";
 import { C as yo } from "../ConnectDrawer-CW4LA3H3.mjs";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mx-cartographer/experiences",
-  "version": "9.0.15-alpha.al2",
+  "version": "9.0.15-alpha.al4",
   "description": "Library containing experience widgets",
   "author": "MX",
   "license": "MIT",

package/dist/ListItemWrapper-Bw5FDCJ8.mjs

@@ -1,33 +0,0 @@
-import { jsx as r } from "react/jsx-runtime";
-import a from "@mui/material/ListItem";
-import i from "@mui/material/ListItemButton";
-import { f as m } from "./hooks-97sNJ_lf.mjs";
-const b = ({
-  children: s,
-  clickEventName: t,
-  onClick: e,
-  sx: o = {}
-}) => {
-  const { onEvent: p } = m();
-  return e ? /* @__PURE__ */ r(a, { className: "list-wrapper", sx: { bgcolor: "background.paper", ...o }, children: /* @__PURE__ */ r(
-    i,
-    {
-      onClick: () => {
-        t && p(t), e();
-      },
-      children: s
-    }
-  ) }) : /* @__PURE__ */ r(
-    a,
-    {
-      className: "list-wrapper",
-      disableGutters: !1,
-      disablePadding: !1,
-      sx: { bgcolor: "background.paper", ...o },
-      children: s
-    }
-  );
-};
-export {
-  b as L
-};