@mx-cartographer/experiences 8.0.15-alpha-view-history-testing → 8.0.16

package/CHANGELOG.md

@@ -1,4 +1,8 @@
-## [8.0.15] - 04-10-2026
+## [8.0.16] - 04-13-2026
+
+- **ADDED** - Replenish Savings | DrillDown card
+
+## [8.0.15] - 04-13-2026
 
 - **UPDATED** - Added `Embedded Card in Transaction Details` and the View History functionality | Transaction History Drilldown drawer
 

package/dist/{EmbeddedCard-yQXb1_JB.mjs → EmbeddedCard-xngm4vLT.mjs}

@@ -1,9 +1,9 @@
 import { jsxs as a, jsx as e } from "react/jsx-runtime";
-import _, { useMemo as X, useState as K, useEffect as q } from "react";
+import w, { useMemo as X, useState as K, useEffect as q } from "react";
 import A from "@mui/material/Box";
 import Y from "@mui/material/Button";
 import c from "@mui/material/Stack";
-import { Icon as E, P as N, H3 as J, Text as b, MerchantLogo as P, H2 as tt } from "@mxenabled/mxui";
+import { Icon as E, P as N, H3 as J, Text as f, MerchantLogo as P, H2 as tt } from "@mxenabled/mxui";
 import { Receipt as et, Icon as rt } from "@mxenabled/mx-icons";
 import { L as nt, O as it, e as ot } from "./exportTransactionsToCSV-DgdB3TBt.mjs";
 import { observer as O } from "mobx-react-lite";
@@ -12,9 +12,9 @@ import st from "@mui/material/Divider";
 import lt from "@mui/material/List";
 import { G as ct, h as W, u as H, g as dt, b as ht } from "./hooks-BxkfR-Ff.mjs";
 import mt from "@mui/material/ListItemAvatar";
-import ut from "@mui/material/ListItemText";
+import pt from "@mui/material/ListItemText";
 import { useTheme as z } from "@mui/material/styles";
-import { a as pt } from "./Transaction-C3Pg9TKf.mjs";
+import { a as ut } from "./Transaction-C3Pg9TKf.mjs";
 import { f as B } from "./NumberFormatting-QCaNwbjv.mjs";
 import { fromUnixTime as R } from "date-fns/fromUnixTime";
 import { isSameDay as Z } from "date-fns/isSameDay";
@@ -23,13 +23,13 @@ import { h as xt } from "./DateUtil-wcYTmDRD.mjs";
 import { L as Q } from "./Loader-D3rjKx72.mjs";
 import { A as bt } from "./Analytics-0Xm_BjHU.mjs";
 import yt from "@mui/material/Tab";
-import _t from "@mui/material/Tabs";
-import wt from "@mui/material/IconButton";
+import wt from "@mui/material/Tabs";
+import _t from "@mui/material/IconButton";
 import { ChartContainer as Ct, ChartsReferenceLine as j, ChartsXAxis as vt, BarPlot as Tt } from "@mui/x-charts";
 import { D as Dt } from "./Drawer-Bbe4AMB1.mjs";
 import St from "@mui/material/Card";
 const It = ({ message: t, tipAriaLabel: n, onDismiss: r, onAction: i, sx: o }) => {
-  const l = i || r, d = i ? "chevron_right" : "close";
+  const l = i || r, h = i ? "chevron_right" : "close";
   return /* @__PURE__ */ a(
     c,
     {
@@ -47,16 +47,18 @@ const It = ({ message: t, tipAriaLabel: n, onDismiss: r, onAction: i, sx: o }) =
         ...o
       },
       children: [
-        /* @__PURE__ */ e(E, { color: "info", fill: !0, name: "lightbulb", size: 24 }),
-        /* @__PURE__ */ e(N, { color: "primary.dark", fontWeight: 400, noWrap: !1, variant: "subtitle2", children: t }),
+        /* @__PURE__ */ a(c, { sx: { flexDirection: "row", gap: 4 }, children: [
+          /* @__PURE__ */ e(E, { color: "info", fill: !0, name: "lightbulb", size: 24 }),
+          /* @__PURE__ */ e(N, { color: "primary.dark", fontWeight: 400, noWrap: !1, variant: "subtitle2", children: t })
+        ] }),
         l && /* @__PURE__ */ e(
-          wt,
+          _t,
           {
             "aria-label": n,
             onClick: l,
             size: "small",
             sx: { minHeight: 0, minWidth: 0, p: 0 },
-            children: /* @__PURE__ */ e(E, { color: "primary", fill: !0, name: d, size: 20 })
+            children: /* @__PURE__ */ e(E, { color: "primary", fill: !0, name: h, size: 20 })
           }
         )
       ]
@@ -69,20 +71,20 @@ const It = ({ message: t, tipAriaLabel: n, onDismiss: r, onAction: i, sx: o }) =
   children: i,
   data: o,
   defaultSelectedIndex: l,
-  icon: d,
-  onTabChange: f,
+  icon: h,
+  onTabChange: g,
   tipSection: m
 }) => {
-  const { heading: h, subHeading: p } = n, g = X(
+  const { heading: d, subHeading: u } = n, x = X(
     () => l ?? (o.length ? o.length - 1 : 0),
     [l, o.length]
-  ), [y, u] = K(g), S = (v, T) => {
-    f?.(T), u(T);
+  ), [y, p] = K(x), S = (v, T) => {
+    g?.(T), p(T);
   }, I = (v) => {
-    u(v);
+    p(v);
   };
   return /* @__PURE__ */ a(A, { sx: { bgcolor: "background.paper", width: "100%" }, children: [
-    /* @__PURE__ */ e(_t, { "aria-label": t, onChange: S, value: y, variant: "fullWidth", children: o.map((v, T) => /* @__PURE__ */ e(
+    /* @__PURE__ */ e(wt, { "aria-label": t, onChange: S, value: y, variant: "fullWidth", children: o.map((v, T) => /* @__PURE__ */ e(
       yt,
       {
         id: `transaction-details-tab-${T}`,
@@ -91,11 +93,11 @@ const It = ({ message: t, tipAriaLabel: n, onDismiss: r, onAction: i, sx: o }) =
       },
       `${v.label}-${T}`
     )) }),
-    /* @__PURE__ */ e(c, { sx: { pt: 16, px: 24 }, children: (h || p) && /* @__PURE__ */ a(c, { sx: { gap: 4 }, children: [
-      h && /* @__PURE__ */ e(J, { children: h }),
-      p && /* @__PURE__ */ a(c, { sx: { alignItems: "center", flexDirection: "row", gap: 8 }, children: [
-        d,
-        /* @__PURE__ */ e(b, { textTransform: "uppercase", variant: "body2", children: p.description })
+    /* @__PURE__ */ e(c, { sx: { pt: 16, px: 24 }, children: (d || u) && /* @__PURE__ */ a(c, { sx: { gap: 4 }, children: [
+      d && /* @__PURE__ */ e(J, { children: d }),
+      u && /* @__PURE__ */ a(c, { sx: { alignItems: "center", flexDirection: "row", gap: 8 }, children: [
+        h,
+        /* @__PURE__ */ e(f, { textTransform: "uppercase", variant: "body2", children: u.description })
       ] })
     ] }) }),
     r?.(y, I),
@@ -103,7 +105,7 @@ const It = ({ message: t, tipAriaLabel: n, onDismiss: r, onAction: i, sx: o }) =
     i?.(y)
   ] });
 }, V = () => {
-  if (!_.useContext(ct))
+  if (!w.useContext(ct))
     throw new Error("useTransactionsUiStore() must be used within the GlobalDataContext");
   return W().uiStore;
 };
@@ -122,7 +124,7 @@ function $t(t) {
   });
 }
 const Et = ({ transaction: t, onClick: n }) => {
-  const i = z().palette.mode === "dark", { associatedBeats: o } = W(), { expandedSplits: l } = V(), { transactions: d } = H(), { showInsights: f } = V(), m = t.transaction_type === pt.CREDIT, h = _.useMemo(() => o.find((p) => p.associated_transaction_guid === t.guid), [o, t]);
+  const i = z().palette.mode === "dark", { associatedBeats: o } = W(), { expandedSplits: l } = V(), { transactions: h } = H(), { showInsights: g } = V(), m = t.transaction_type === ut.CREDIT, d = w.useMemo(() => o.find((u) => u.associated_transaction_guid === t.guid), [o, t]);
   return (
     //TODO: implement common/components/ListItemRow.tsx
     /* @__PURE__ */ a(
@@ -131,7 +133,7 @@ const Et = ({ transaction: t, onClick: n }) => {
         clickEventName: it.ON_TRANSACTION_LIST_ITEM_CLICK,
         onClick: n ? () => n(t.guid) : void 0,
         children: [
-          /* @__PURE__ */ e(mt, { children: t.parent_guid && l.includes(t.parent_guid) ? /* @__PURE__ */ e(_.Fragment, {}) : /* @__PURE__ */ e(
+          /* @__PURE__ */ e(mt, { children: t.parent_guid && l.includes(t.parent_guid) ? /* @__PURE__ */ e(w.Fragment, {}) : /* @__PURE__ */ e(
             P,
             {
               categoryGuid: t.top_level_category_guid || "",
@@ -139,7 +141,7 @@ const Et = ({ transaction: t, onClick: n }) => {
             }
           ) }),
           /* @__PURE__ */ e(
-            ut,
+            pt,
             {
               disableTypography: !0,
               secondary: /* @__PURE__ */ a(c, { direction: "row", justifyContent: "space-between", children: [
@@ -155,28 +157,28 @@ const Et = ({ transaction: t, onClick: n }) => {
                   ),
                   t.is_hidden && /* @__PURE__ */ e(E, { name: "visibility_off", size: 16 }),
                   t.has_been_split && /* @__PURE__ */ e(E, { name: "call_split", size: 16 }),
-                  /* @__PURE__ */ e(b, { variant: "caption", children: t.has_been_split ? d.split_transaction_category_label : t.category })
+                  /* @__PURE__ */ e(f, { variant: "caption", children: t.has_been_split ? h.split_transaction_category_label : t.category })
                 ] }),
-                h && f && /* @__PURE__ */ e(
-                  b,
+                d && g && /* @__PURE__ */ e(
+                  f,
                   {
                     bold: !0,
                     color: "action.active",
-                    onClick: (p) => {
-                      p.stopPropagation(), p.preventDefault(), $t(h.guid);
+                    onClick: (u) => {
+                      u.stopPropagation(), u.preventDefault(), $t(d.guid);
                     },
                     variant: "caption",
-                    children: h.short_title
+                    children: d.short_title
                   }
                 )
               ] }),
               children: /* @__PURE__ */ a(c, { direction: "row", justifyContent: "space-between", sx: { gap: 8 }, children: [
-                /* @__PURE__ */ a(b, { bold: !0, variant: "body1", children: [
-                  t.is_hidden && d.hide_trnx_cancel_hidden_note,
+                /* @__PURE__ */ a(f, { bold: !0, variant: "body1", children: [
+                  t.is_hidden && h.hide_trnx_cancel_hidden_note,
                   t.payee || t.description || t.feed_description
                 ] }),
                 /* @__PURE__ */ a(
-                  b,
+                  f,
                   {
                     bold: !0,
                     color: m ? "success.main" : "text.primary",
@@ -198,12 +200,12 @@ const Et = ({ transaction: t, onClick: n }) => {
 }, Mt = O(Et), Rt = ({
   bgcolor: t = "background.default",
   children: n
-}) => /* @__PURE__ */ e(A, { display: "inline-block", sx: { bgcolor: t, py: 6, width: "100%" }, children: /* @__PURE__ */ e(b, { bold: !0, sx: { pl: 24 }, variant: "caption", children: n }) }), Wt = ({ showIcon: t = !0, showSubtitle: n = !0 }) => {
+}) => /* @__PURE__ */ e(A, { display: "inline-block", sx: { bgcolor: t, py: 6, width: "100%" }, children: /* @__PURE__ */ e(f, { bold: !0, sx: { pl: 24 }, variant: "caption", children: n }) }), Wt = ({ showIcon: t = !0, showSubtitle: n = !0 }) => {
   const { transactions: r } = H();
   return /* @__PURE__ */ a(c, { alignItems: "center", gap: 12, height: "auto", mb: 24, mt: 24, children: [
     t && /* @__PURE__ */ e(et, { color: "action", sx: { fontSize: 32 } }),
-    /* @__PURE__ */ e(b, { bold: !0, color: "text.secondary", variant: "body2", children: r.zero_state_no_transactions }),
-    n && /* @__PURE__ */ e(b, { color: "text.secondary", variant: "caption", children: r.zero_state_there_are_no_transactions })
+    /* @__PURE__ */ e(f, { bold: !0, color: "text.secondary", variant: "body2", children: r.zero_state_no_transactions }),
+    n && /* @__PURE__ */ e(f, { color: "text.secondary", variant: "caption", children: r.zero_state_there_are_no_transactions })
   ] });
 }, zt = O(Wt), G = (t, n) => {
   const r = R(n[t].date), i = R(n[t - 1]?.date);
@@ -229,32 +231,32 @@ const Et = ({ transaction: t, onClick: n }) => {
   loader: i = /* @__PURE__ */ e(Q, { label: "Loading", size: 40 }),
   onClick: o,
   showInsights: l = !1,
-  showLoader: d = !1,
-  showHiddenTransactions: f = !1,
+  showLoader: h = !1,
+  showHiddenTransactions: g = !1,
   transaction: m,
-  width: h = "100%",
-  zeroState: p = /* @__PURE__ */ e(zt, {})
+  width: d = "100%",
+  zeroState: u = /* @__PURE__ */ e(zt, {})
 }) => {
-  const { isLoading: g, sortedTransactions: y } = W(), u = _.useMemo(() => {
-    const x = n ? y.filter(n) : y, w = m ?? x;
-    return f ? w : w.filter((s) => !s.is_hidden);
-  }, [y, f, m]), { clearExpandedSplits: S, setShowInsights: I, toggleSplit: v } = V(), { onEvent: T } = dt(), M = (x) => {
-    const w = u.find((s) => s.guid === x);
-    if (w?.has_been_split) {
-      v(w.guid);
+  const { isLoading: x, sortedTransactions: y } = W(), p = w.useMemo(() => {
+    const b = n ? y.filter(n) : y, _ = m ?? b;
+    return g ? _ : _.filter((s) => !s.is_hidden);
+  }, [y, g, m]), { clearExpandedSplits: S, setShowInsights: I, toggleSplit: v } = V(), { onEvent: T } = dt(), M = (b) => {
+    const _ = p.find((s) => s.guid === b);
+    if (_?.has_been_split) {
+      v(_.guid);
       return;
     }
     T(bt.ACCOUNT_DETAILS_CLICK_TRANSACTION, {
-      account_guid: w?.account_guid,
-      transaction_guid: x
-    }), o?.(x);
-  }, L = _.useRef(null), k = at({
-    count: u.length,
+      account_guid: _?.account_guid,
+      transaction_guid: b
+    }), o?.(b);
+  }, L = w.useRef(null), k = at({
+    count: p.length,
     getScrollElement: () => L.current,
-    estimateSize: (x) => U + (G(x, u) ? F : 0),
+    estimateSize: (b) => U + (G(b, p) ? F : 0),
     overscan: 5
   });
-  return _.useEffect(() => k.measure(), [u]), _.useEffect(() => I(l), [l]), _.useEffect(() => () => S(), []), /* @__PURE__ */ e(lt, { component: "div", role: "list", sx: { width: h }, children: /* @__PURE__ */ e(A, { height: r, overflow: "auto", ref: L, role: "presentation", width: h, children: /* @__PURE__ */ a(
+  return w.useEffect(() => k.measure(), [p]), w.useEffect(() => I(l), [l]), w.useEffect(() => () => S(), []), /* @__PURE__ */ e(lt, { component: "div", role: "list", sx: { width: d }, children: /* @__PURE__ */ e(A, { height: r, overflow: "auto", ref: L, role: "presentation", width: d, children: /* @__PURE__ */ a(
     A,
     {
       height: (
@@ -265,10 +267,10 @@ const Et = ({ transaction: t, onClick: n }) => {
       role: "presentation",
       width: "100%",
       children: [
-        (g || d) && i,
-        !g && !d && k.getVirtualItems().length === 0 && p,
-        !g && !d && k.getVirtualItems().length > 0 && k.getVirtualItems().map((x) => {
-          const w = u[x.index], s = G(x.index, u), C = Bt(x.index, u), D = U + (s ? F : 0);
+        (x || h) && i,
+        !x && !h && k.getVirtualItems().length === 0 && u,
+        !x && !h && k.getVirtualItems().length > 0 && k.getVirtualItems().map((b) => {
+          const _ = p[b.index], s = G(b.index, p), C = Bt(b.index, p), D = U + (s ? F : 0);
           return /* @__PURE__ */ a(
             A,
             {
@@ -276,23 +278,23 @@ const Et = ({ transaction: t, onClick: n }) => {
               sx: {
                 height: D,
                 position: "absolute",
-                transform: `translateY(${x.start}px)`,
+                transform: `translateY(${b.start}px)`,
                 width: "100%",
                 bgcolor: "background.paper"
               },
               children: [
-                s && /* @__PURE__ */ e(Rt, { bgcolor: t, children: xt(w.date) }),
+                s && /* @__PURE__ */ e(Rt, { bgcolor: t, children: xt(_.date) }),
                 /* @__PURE__ */ e(
                   Mt,
                   {
                     ...o && { onClick: M },
-                    transaction: w
+                    transaction: _
                   }
                 ),
                 /* @__PURE__ */ e(st, { sx: { ml: C ? 68 : 0 } })
               ]
             },
-            w.guid
+            _.guid
           );
         })
       ]
@@ -319,7 +321,7 @@ const Et = ({ transaction: t, onClick: n }) => {
   trendAmount: o,
   trendAmountLabel: l
 }) => {
-  const d = z();
+  const h = z();
   return /* @__PURE__ */ a(
     c,
     {
@@ -346,7 +348,7 @@ const Et = ({ transaction: t, onClick: n }) => {
               children: /* @__PURE__ */ e("rect", { fill: t, height: "12", rx: "2", width: "12" })
             }
           ),
-          /* @__PURE__ */ a(b, { id: "chartLegendLabel", variant: "caption", children: [
+          /* @__PURE__ */ a(f, { id: "chartLegendLabel", variant: "caption", children: [
             i,
             ": ",
             r
@@ -362,10 +364,10 @@ const Et = ({ transaction: t, onClick: n }) => {
               height: "12",
               role: "figure",
               width: "12",
-              children: /* @__PURE__ */ e("rect", { fill: d.palette.chart.chart7, height: "12", rx: "2", width: "12" })
+              children: /* @__PURE__ */ e("rect", { fill: h.palette.chart.chart7, height: "12", rx: "2", width: "12" })
             }
           ),
-          /* @__PURE__ */ a(b, { id: "chartLegendLabel", variant: "caption", children: [
+          /* @__PURE__ */ a(f, { id: "chartLegendLabel", variant: "caption", children: [
             l,
             ": ",
             o
@@ -385,29 +387,29 @@ const Et = ({ transaction: t, onClick: n }) => {
   removeSelectedTabColorChange: i,
   selectedTabIndex: o,
   style: l,
-  ...d
+  ...h
 }) => {
-  const f = z(), { ariaLabel: m, formattedAmount: h } = n[r], p = o === r ? "bold" : 400, g = l.x ?? 0, y = l.y ?? 0, u = l.width ?? 0, S = l.height ?? 0;
+  const g = z(), { ariaLabel: m, formattedAmount: d } = n[r], u = o === r ? "bold" : 400, x = l.x ?? 0, y = l.y ?? 0, p = l.width ?? 0, S = l.height ?? 0;
   return /* @__PURE__ */ a("g", { "aria-label": m, children: [
     /* @__PURE__ */ e(
       "path",
       {
-        ...d,
-        d: jt(u, S),
+        ...h,
+        d: jt(p, S),
         fill: t[r],
-        transform: `translate(${g}, ${y})`
+        transform: `translate(${x}, ${y})`
       }
     ),
     /* @__PURE__ */ e(
       "text",
       {
-        fill: f.palette.text.primary,
+        fill: g.palette.text.primary,
         fontSize: 11,
-        fontWeight: i ? "bold" : p,
+        fontWeight: i ? "bold" : u,
         textAnchor: "middle",
-        x: g + u / 2,
+        x: x + p / 2,
         y: y - 8,
-        children: h
+        children: d
       }
     )
   ] });
@@ -423,13 +425,13 @@ const Et = ({ transaction: t, onClick: n }) => {
     top: 20
   },
   onBarClick: l,
-  legendPosition: d = "bottom",
-  monthlyAmountLabel: f,
+  legendPosition: h = "bottom",
+  monthlyAmountLabel: g,
   removeSelectedTabColorChange: m,
-  selectedTabIndex: h,
-  trendAmountLabel: p
+  selectedTabIndex: d,
+  trendAmountLabel: u
 }) => {
-  const g = _.useRef(null), { height: y, width: u } = Ot(g), S = z(), I = _.useMemo(() => {
+  const x = w.useRef(null), { height: y, width: p } = Ot(x), S = z(), I = w.useMemo(() => {
     const s = r.map(({ value: $ }) => $), C = Math.min(...s), D = Math.max(...s);
     return {
       series: [
@@ -453,33 +455,33 @@ const Et = ({ transaction: t, onClick: n }) => {
         }
       ]
     };
-  }, [r]), v = _.useMemo(() => {
+  }, [r]), v = w.useMemo(() => {
     const s = `${n}80`;
-    return m ? r.map(() => n) : h == null ? [...new Array(r.length - 1).fill(s), n] : r.map((C, D) => D === h ? n : s);
-  }, [n, r, h]), T = _.useMemo(
-    () => r[h ?? r.length - 1],
-    [r, h]
+    return m ? r.map(() => n) : d == null ? [...new Array(r.length - 1).fill(s), n] : r.map((C, D) => D === d ? n : s);
+  }, [n, r, d]), T = w.useMemo(
+    () => r[d ?? r.length - 1],
+    [r, d]
   ), L = r.reduce((s, C) => Math.min(s, C.value), 1 / 0) < 0, k = /* @__PURE__ */ e(
     Ht,
     {
       color: n,
       legendStyle: { pl: o.left },
       monthlyAmount: T.formattedAmount,
-      monthlyAmountLabel: f,
+      monthlyAmountLabel: g,
       trendAmount: t?.formattedAverage,
-      trendAmountLabel: p
+      trendAmountLabel: u
     }
-  ), x = f || p, w = (s, { dataIndex: C }) => l?.(C);
+  ), b = g || u, _ = (s, { dataIndex: C }) => l?.(C);
   return /* @__PURE__ */ a(c, { sx: { alignItems: "center", width: "100%" }, children: [
-    x && d === "top" && k,
+    b && h === "top" && k,
     /* @__PURE__ */ e(
       A,
       {
-        ref: g,
+        ref: x,
         sx: {
           height: i || 122,
-          mb: d === "top" ? 0 : 4,
-          mt: d === "top" ? 4 : 0,
+          mb: h === "top" ? 0 : 4,
+          mt: h === "top" ? 4 : 0,
           touchAction: "pan-y",
           width: "100%",
           "& svg": {
@@ -501,7 +503,7 @@ const Et = ({ transaction: t, onClick: n }) => {
               top: o.top || 45
             },
             series: I.series,
-            width: u,
+            width: p,
             xAxis: I.xAxis,
             yAxis: [{ width: 0 }],
             children: [
@@ -535,7 +537,7 @@ const Et = ({ transaction: t, onClick: n }) => {
                   slots: {
                     // eslint-disable-next-line @typescript-eslint/no-unused-vars
                     axisTickLabel: ({ text: s, ownerState: C, ...D }) => {
-                      const $ = r[h ?? r.length - 1]?.label;
+                      const $ = r[d ?? r.length - 1]?.label;
                       return /* @__PURE__ */ e(
                         "text",
                         {
@@ -568,7 +570,7 @@ const Et = ({ transaction: t, onClick: n }) => {
               /* @__PURE__ */ e(
                 Tt,
                 {
-                  onItemClick: w,
+                  onItemClick: _,
                   slots: {
                     bar: (s) => {
                       const { ownerState: C, ...D } = s;
@@ -580,7 +582,7 @@ const Et = ({ transaction: t, onClick: n }) => {
                           data: r,
                           dataIndex: C.dataIndex,
                           removeSelectedTabColorChange: m,
-                          selectedTabIndex: h ?? r.length - 1,
+                          selectedTabIndex: d ?? r.length - 1,
                           style: {
                             height: s.height,
                             x: s.x,
@@ -598,7 +600,7 @@ const Et = ({ transaction: t, onClick: n }) => {
         )
       }
     ),
-    x && d === "bottom" && k
+    b && h === "bottom" && k
   ] });
 }, Ft = ({
   ariaLabel: t,
@@ -607,15 +609,15 @@ const Et = ({ transaction: t, onClick: n }) => {
   data: i,
   defaultSelectedIndex: o = 0,
   icon: l,
-  isOpen: d = !1,
-  onClose: f,
+  isOpen: h = !1,
+  onClose: g,
   onTabChange: m,
-  tipSection: h,
-  title: p,
-  transactionListProps: g = {}
+  tipSection: d,
+  title: u,
+  transactionListProps: x = {}
 }) => {
-  const { common: y, transactions: u } = H(), { isCopyLoaded: S } = ht(), { sortedTransactionsWithSplits: I, tags: v } = W();
-  return S ? /* @__PURE__ */ e(Dt, { ariaLabelClose: y.close_aria, isOpen: d, onClose: f, title: p, children: /* @__PURE__ */ e(
+  const { common: y, transactions: p } = H(), { isCopyLoaded: S } = ht(), { sortedTransactionsWithSplits: I, tags: v } = W();
+  return S ? /* @__PURE__ */ e(Dt, { ariaLabelClose: y.close_aria, isOpen: h, onClose: g, title: u, children: /* @__PURE__ */ e(
     Lt,
     {
       ariaLabel: t,
@@ -634,8 +636,8 @@ const Et = ({ transaction: t, onClick: n }) => {
       defaultSelectedIndex: o,
       icon: l,
       onTabChange: m,
-      tipSection: h,
-      children: () => /* @__PURE__ */ a(_.Fragment, { children: [
+      tipSection: d,
+      children: () => /* @__PURE__ */ a(w.Fragment, { children: [
         /* @__PURE__ */ a(
           c,
           {
@@ -651,43 +653,44 @@ const Et = ({ transaction: t, onClick: n }) => {
               px: 24
             },
             children: [
-              /* @__PURE__ */ e(b, { bold: !0, variant: "body1", children: u.transactions_title }),
-              (g?.transaction || I.length > 0) && /* @__PURE__ */ e(
+              /* @__PURE__ */ e(f, { bold: !0, variant: "body1", children: p.transactions_title }),
+              (x?.transaction || I.length > 0) && /* @__PURE__ */ e(
                 Y,
                 {
                   onClick: () => {
                     ot(
-                      g?.transaction || I,
+                      x?.transaction || I,
                       v
                     );
                   },
                   startIcon: /* @__PURE__ */ e(rt, { name: "ios_share" }),
                   sx: { height: 28 },
-                  children: /* @__PURE__ */ e(b, { bold: !0, variant: "body2", children: u.export_csv_btn })
+                  children: /* @__PURE__ */ e(f, { bold: !0, variant: "body2", children: p.export_csv_btn })
                 }
               )
             ]
           }
         ),
-        /* @__PURE__ */ e(Nt, { ...g })
+        /* @__PURE__ */ e(Nt, { ...x })
       ] })
     }
   ) }) : /* @__PURE__ */ e(Q, {});
 }, De = Ft, Kt = ({
   amount: t,
   borderRadius: n = "2px",
-  completeColor: r = "success.main",
-  icon: i,
-  label: o,
-  leftLabel: l,
-  percentComplete: d = 0,
-  rightLabel: f,
-  sx: m
-}) => /* @__PURE__ */ e(c, { sx: { p: 24, width: "100%", ...m }, children: /* @__PURE__ */ a(c, { className: "details-container", sx: { gap: 16 }, children: [
+  count: r,
+  completeColor: i = "success.main",
+  icon: o,
+  label: l,
+  leftLabel: h,
+  percentComplete: g = 0,
+  rightLabel: m,
+  sx: d
+}) => /* @__PURE__ */ a(c, { className: "details-container", sx: { p: 24, width: "100%", gap: 16, ...d }, children: [
   /* @__PURE__ */ a(c, { sx: { alignItems: "center", flexDirection: "row", gap: 12 }, children: [
-    /* @__PURE__ */ e(A, { children: i }),
+    /* @__PURE__ */ e(A, { children: o }),
     /* @__PURE__ */ a(c, { children: [
-      /* @__PURE__ */ e(N, { variant: "body2", children: o }),
+      typeof r == "string" ? /* @__PURE__ */ e(N, { variant: "body2", children: l }) : r,
       typeof t == "string" ? /* @__PURE__ */ e(tt, { children: t }) : t
     ] })
   ] }),
@@ -699,28 +702,33 @@ const Et = ({ transaction: t, onClick: n }) => {
           bgcolor: "divider",
           borderRadius: n,
           flexDirection: "row",
-          height: 16,
+          height: r ? 20 : 16,
           width: "100%"
         },
         children: /* @__PURE__ */ e(
           A,
           {
             sx: {
-              bgcolor: r,
+              alignItems: "center",
+              display: "flex",
+              py: 2,
+              px: 12,
+              bgcolor: i,
               borderRadius: n,
-              height: 16,
-              width: `${d}%`
-            }
+              height: r ? 20 : 16,
+              width: `${g}%`
+            },
+            children: /* @__PURE__ */ e(f, { sx: { color: "primary.dark" }, variant: "caption", children: r })
           }
         )
       }
     ),
-    /* @__PURE__ */ a(c, { sx: { flexDirection: "row", justifyContent: "space-between" }, children: [
-      /* @__PURE__ */ e(b, { variant: "body2", children: l }),
-      /* @__PURE__ */ e(b, { variant: "body2", children: f })
+    !r && /* @__PURE__ */ a(c, { sx: { flexDirection: "row", justifyContent: "space-between" }, children: [
+      /* @__PURE__ */ e(f, { variant: "body2", children: h }),
+      /* @__PURE__ */ e(f, { variant: "body2", children: m })
     ] })
   ] })
-] }) }), Se = Kt, Ie = ({
+] }), Se = Kt, Ie = ({
   title: t,
   description: n,
   callToAction: r,
@@ -738,7 +746,7 @@ const Et = ({ transaction: t, onClick: n }) => {
         pt: 4,
         pl: 8
       },
-      children: /* @__PURE__ */ e(b, { bold: !0, variant: "body1", children: t })
+      children: /* @__PURE__ */ e(f, { bold: !0, variant: "body1", children: t })
     }
   ),
   /* @__PURE__ */ a(

package/dist/{ManageIncome-soXohjI4.mjs → ManageIncome-CvfRTf-j.mjs}

@@ -17,8 +17,8 @@ import { endOfMonth as ue } from "date-fns/endOfMonth";
 import { parseISO as me } from "date-fns/parseISO";
 import J from "@mui/material/Button";
 import { Delete as pe, Add as ye, ReceiptLong as he } from "@mxenabled/mx-icons";
-import { T as V, u as fe, S as ge, a as Ce } from "./EmbeddedCard-yQXb1_JB.mjs";
-import { T as be } from "./TransactionDetails-UyBJ8fVg.mjs";
+import { T as V, u as fe, S as ge, a as Ce } from "./EmbeddedCard-xngm4vLT.mjs";
+import { T as be } from "./TransactionDetails-KklNHa-s.mjs";
 import { addYears as j } from "date-fns/addYears";
 import { getDayOfYear as xe } from "date-fns/getDayOfYear";
 import { setDayOfYear as Se } from "date-fns/setDayOfYear";

package/dist/{RecurringSettings-rn4NvTVz.mjs → RecurringSettings-DJIUgK5A.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-soXohjI4.mjs";
+import { R as C, A as S, a as E, M as v } from "./ManageIncome-CvfRTf-j.mjs";
 import { u as _, i as A, g as f } from "./hooks-BxkfR-Ff.mjs";
 import { R as y, F as N } from "./RepeatingTransaction-DF4vJn_v.mjs";
 import { A as m } from "./Analytics-0Xm_BjHU.mjs";

package/dist/{TransactionDetails-UyBJ8fVg.mjs → TransactionDetails-KklNHa-s.mjs}

@@ -30,7 +30,7 @@ import Q from "@mui/material/ListItemAvatar";
 import z from "@mui/material/ListItemText";
 import { f as Le, D as we } from "./DateFormats-BMpMrZpW.mjs";
 import { BarChart as ot } from "@mui/x-charts";
-import { b as it, T as st, u as oe, c as lt, d as ct, E as dt, C as ut } from "./EmbeddedCard-yQXb1_JB.mjs";
+import { b as it, T as st, u as oe, c as lt, d as ct, E as dt, C as ut } from "./EmbeddedCard-xngm4vLT.mjs";
 import X from "@mui/material/ListItemButton";
 import Z from "@mui/material/ListItemIcon";
 import { a as $e } from "./CategorySelectorDrawer-Dc9Widy9.mjs";

package/dist/accounts/index.es.js

@@ -55,8 +55,8 @@ import e3 from "@mui/material/AlertTitle";
 import t3 from "@mui/material/Link";
 import n3 from "@mui/material/Paper";
 import { subDays as o3, startOfToday as i3, endOfToday as c3 } from "date-fns";
-import { T as a3 } from "../EmbeddedCard-yQXb1_JB.mjs";
-import { T as s3 } from "../TransactionDetails-UyBJ8fVg.mjs";
+import { T as a3 } from "../EmbeddedCard-xngm4vLT.mjs";
+import { T as s3 } from "../TransactionDetails-KklNHa-s.mjs";
 import { T as r1 } from "../TabContentContainer-j01JYR_7.mjs";
 import { f as d1 } from "../NumberFormatting-QCaNwbjv.mjs";
 import { C as l3 } from "../ConnectionsDrawer-IA7vnv1J.mjs";

package/dist/budgets/index.es.js

@@ -36,8 +36,8 @@ import { A as G } from "../Analytics-0Xm_BjHU.mjs";
 import Ee from "@mui/material/Tab";
 import et from "@mui/material/Tabs";
 import { e as tt } from "../exportTransactionsToCSV-DgdB3TBt.mjs";
-import { T as Ae } from "../EmbeddedCard-yQXb1_JB.mjs";
-import { T as ot, c as nt } from "../TransactionDetails-UyBJ8fVg.mjs";
+import { T as Ae } from "../EmbeddedCard-xngm4vLT.mjs";
+import { T as ot, c as nt } from "../TransactionDetails-KklNHa-s.mjs";
 import ve from "@mui/material/Card";
 import Te from "@mui/material/CardContent";
 import { S as Be } from "../StatusBar-BK_uYHAB.mjs";
@@ -46,7 +46,7 @@ import { u as at, b as rt } from "../CategorySelectorDrawer-Dc9Widy9.mjs";
 import je from "@mui/material/CardHeader";
 import { subDays as st } from "date-fns/subDays";
 import it from "@mui/material/IconButton";
-import { M as ct } from "../ManageIncome-soXohjI4.mjs";
+import { M as ct } from "../ManageIncome-CvfRTf-j.mjs";
 import { u as ze } from "../useWidgetLoadTimer-DgN1bTyu.mjs";
 import { W as lt } from "../WidgetContainer-D-pbSa7L.mjs";
 import { u as dt, g as ut, C as mt } from "../BudgetUtil-CLhRnCoX.mjs";

package/dist/cashflow/index.es.js

@@ -18,7 +18,7 @@ import { b as $ } from "../Localization-CPkpIwIx.mjs";
 import { M as Je } from "../MiniWidgetContainer-Bhkv-hpz.mjs";
 import { E as Ze } from "../EmptyState-DHAkGsjk.mjs";
 import { u as Fe } from "../useWidgetLoadTimer-DgN1bTyu.mjs";
-import { R as et } from "../RecurringSettings-rn4NvTVz.mjs";
+import { R as et } from "../RecurringSettings-DJIUgK5A.mjs";
 import tt from "@mui/material/Tabs";
 import Ce from "@mui/material/Tab";
 import { getUnixTime as z } from "date-fns/getUnixTime";
@@ -36,7 +36,7 @@ import { alpha as it, keyframes as at } from "@mui/material/styles";
 import { DataGridPro as rt } from "@mui/x-data-grid-pro";
 import { T as we } from "../TabContentContainer-j01JYR_7.mjs";
 import G from "@mui/material/Button";
-import { M as st, S as ct, i as lt, d as Se, c as dt } from "../ManageIncome-soXohjI4.mjs";
+import { M as st, S as ct, i as lt, d as Se, c as dt } from "../ManageIncome-CvfRTf-j.mjs";
 import { D as Ge } from "../Drawer-Bbe4AMB1.mjs";
 import { subDays as Me } from "date-fns/subDays";
 import { endOfToday as mt } from "date-fns/endOfToday";
@@ -46,7 +46,7 @@ import { A as K } from "../Account-BiB1F8lL.mjs";
 import { formatISO as pt } from "date-fns/formatISO";
 import { fromUnixTime as De } from "date-fns/fromUnixTime";
 import { startOfMonth as ht } from "date-fns/startOfMonth";
-import { S as ft, a as gt } from "../EmbeddedCard-yQXb1_JB.mjs";
+import { S as ft, a as gt } from "../EmbeddedCard-xngm4vLT.mjs";
 import { c as ve } from "../RecurringTransactions-BbZ6MQsX.mjs";
 import { h as bt } from "../DateUtil-wcYTmDRD.mjs";
 import { F as xt, R as Ae } from "../RepeatingTransaction-DF4vJn_v.mjs";

package/dist/finstrong/index.es.js

@@ -41,7 +41,7 @@ import { S as it, c as zn } from "../RecurringTransactions-BbZ6MQsX.mjs";
 import { A as He } from "../Account-BiB1F8lL.mjs";
 import { S as Gn } from "../StatusBar-BK_uYHAB.mjs";
 import { h as Mt } from "../DateUtil-wcYTmDRD.mjs";
-import { T as Hn, s as Nn, h as jn, S as Kn, a as Vn } from "../EmbeddedCard-yQXb1_JB.mjs";
+import { T as Hn, s as Nn, h as jn, S as Kn, a as Vn } from "../EmbeddedCard-xngm4vLT.mjs";
 import { f as Yn, D as Xn } from "../DateFormats-BMpMrZpW.mjs";
 import { T as de } from "../TabContentContainer-j01JYR_7.mjs";
 import qn from "@mui/material/useMediaQuery";
@@ -56,11 +56,11 @@ import { formatISO as oo } from "date-fns/formatISO";
 import { fromUnixTime as ro } from "date-fns/fromUnixTime";
 import { startOfToday as st } from "date-fns/startOfToday";
 import { subDays as ao } from "date-fns/subDays";
-import { c as io, d as ct, S as so, i as co } from "../ManageIncome-soXohjI4.mjs";
+import { c as io, d as ct, S as so, i as co } from "../ManageIncome-CvfRTf-j.mjs";
 import { LocalizationProvider as lo, DatePicker as po, StaticDatePicker as _o } from "@mui/x-date-pickers";
 import { AdapterDateFns as Tt } from "@mui/x-date-pickers/AdapterDateFnsV3";
 import { F as At, R as Ot } from "../RepeatingTransaction-DF4vJn_v.mjs";
-import { R as uo } from "../RecurringSettings-rn4NvTVz.mjs";
+import { R as uo } from "../RecurringSettings-DJIUgK5A.mjs";
 import { LocalizationProvider as ho } from "@mui/x-date-pickers/LocalizationProvider";
 import { format as mo } from "date-fns/format";
 import go from "@mui/lab/Timeline";

package/dist/insights/components/shared/StatusIndicator.d.ts

@@ -3,12 +3,13 @@ interface StatusIndicatorProps {
     amount: string | React.ReactNode;
     borderRadius?: string;
     completeColor?: string;
+    count?: string;
     icon: React.ReactNode;
-    label: string;
+    label: string | React.ReactNode;
     leftLabel?: string;
     percentComplete?: number;
     rightLabel?: string;
     sx?: SxProps;
 }
-declare const StatusIndicator: ({ amount, borderRadius, completeColor, icon, label, leftLabel, percentComplete, rightLabel, sx, }: StatusIndicatorProps) => import("react/jsx-runtime").JSX.Element;
+declare const StatusIndicator: ({ amount, borderRadius, count, completeColor, icon, label, leftLabel, percentComplete, rightLabel, sx, }: StatusIndicatorProps) => import("react/jsx-runtime").JSX.Element;
 export default StatusIndicator;

package/dist/insights/index.es.js

@@ -1,6 +1,6 @@
 import { B as $6 } from "../BeatStore-C6CAT-ce.mjs";
-import { e as T, B as Y1, b as Q1 } from "../EmbeddedCard-yQXb1_JB.mjs";
-import { f as t5, C as r5, E as i5 } from "../EmbeddedCard-yQXb1_JB.mjs";
+import { e as T, B as Y1, b as Q1 } from "../EmbeddedCard-xngm4vLT.mjs";
+import { f as t5, C as r5, E as i5 } from "../EmbeddedCard-xngm4vLT.mjs";
 import { jsx as t, jsxs as s, Fragment as O } from "react/jsx-runtime";
 import * as e from "react";
 import Z, { forwardRef as H, useRef as c1, useEffect as X1, useState as _, useLayoutEffect as D1 } from "react";

package/dist/recurringtransactions/index.es.js

@@ -6,8 +6,8 @@ import { endOfToday as J } from "date-fns/endOfToday";
 import { startOfMonth as k } from "date-fns/startOfMonth";
 import { startOfToday as Q } from "date-fns/startOfToday";
 import { subDays as ee } from "date-fns/subDays";
-import { R as _e } from "../RecurringSettings-rn4NvTVz.mjs";
-import { M as Yn } from "../RecurringSettings-rn4NvTVz.mjs";
+import { R as _e } from "../RecurringSettings-DJIUgK5A.mjs";
+import { M as Yn } from "../RecurringSettings-DJIUgK5A.mjs";
 import { addMonths as He } from "date-fns/addMonths";
 import { subMonths as $e } from "date-fns/subMonths";
 import { isBefore as Be } from "date-fns/isBefore";
@@ -48,8 +48,8 @@ import { g as ye, d as dt } from "../RecurringTransactions-BbZ6MQsX.mjs";
 import ut from "@mui/material/ListItemAvatar";
 import mt from "@mui/material/ListItemButton";
 import pt from "@mui/material/ListItemText";
-import { b as gt } from "../ManageIncome-soXohjI4.mjs";
-import { c as qn, M as Zn, S as Xn } from "../ManageIncome-soXohjI4.mjs";
+import { b as gt } from "../ManageIncome-CvfRTf-j.mjs";
+import { c as qn, M as Zn, S as Xn } from "../ManageIncome-CvfRTf-j.mjs";
 import { f as E } from "../NumberFormatting-QCaNwbjv.mjs";
 import { D as ie } from "../Drawer-Bbe4AMB1.mjs";
 import O from "@mui/material/Box";

package/dist/spending/index.es.js

@@ -19,8 +19,8 @@ import { startOfToday as q } from "date-fns/startOfToday";
 import St from "@mui/material/Button";
 import { useTheme as Tt } from "@mui/material";
 import { e as Mt } from "../exportTransactionsToCSV-DgdB3TBt.mjs";
-import { T as Dt } from "../EmbeddedCard-yQXb1_JB.mjs";
-import { T as xt } from "../TransactionDetails-UyBJ8fVg.mjs";
+import { T as Dt } from "../EmbeddedCard-xngm4vLT.mjs";
+import { T as xt } from "../TransactionDetails-KklNHa-s.mjs";
 import vt from "@mui/material/Collapse";
 import wt from "@mui/material/Divider";
 import J from "@mui/material/List";

package/dist/transactions/index.es.js

@@ -1,12 +1,12 @@
 import { T as wa } from "../TransactionApi-Ck5Ua-7F.mjs";
-import { C as Me, D as Re, M as Be, a as He, T as Pe } from "../TransactionDetails-UyBJ8fVg.mjs";
-import { B as Da, b as Ia } from "../TransactionDetails-UyBJ8fVg.mjs";
+import { C as Me, D as Re, M as Be, a as He, T as Pe } from "../TransactionDetails-KklNHa-s.mjs";
+import { B as Da, b as Ia } from "../TransactionDetails-KklNHa-s.mjs";
 import { e as $e } from "../exportTransactionsToCSV-DgdB3TBt.mjs";
 import { O as Na } from "../exportTransactionsToCSV-DgdB3TBt.mjs";
 import { S as Z, D as Ve } from "../TransactionStore-BUsgGRL1.mjs";
 import { T as Oa } from "../TransactionStore-BUsgGRL1.mjs";
-import { u as B, T as We } from "../EmbeddedCard-yQXb1_JB.mjs";
-import { a as La } from "../EmbeddedCard-yQXb1_JB.mjs";
+import { u as B, T as We } from "../EmbeddedCard-xngm4vLT.mjs";
+import { a as La } from "../EmbeddedCard-xngm4vLT.mjs";
 import { E as Ra } from "../ExportCsvAction-CHCmCCqf.mjs";
 import { jsxs as _, jsx as e } from "react/jsx-runtime";
 import m from "react";

package/dist/trends/index.es.js

@@ -35,8 +35,8 @@ import { useGridApiContext as jt, useGridRootProps as Ut, DataGridPro as Xt } fr
 import Zt from "@mui/material/Badge";
 import Qt from "@mui/material/IconButton";
 import { A as v } from "../Analytics-0Xm_BjHU.mjs";
-import { T as ct } from "../EmbeddedCard-yQXb1_JB.mjs";
-import { T as dt } from "../TransactionDetails-UyBJ8fVg.mjs";
+import { T as ct } from "../EmbeddedCard-xngm4vLT.mjs";
+import { T as dt } from "../TransactionDetails-KklNHa-s.mjs";
 import { D as Pe } from "../Drawer-Bbe4AMB1.mjs";
 import { u as Ie } from "../useWidgetLoadTimer-DgN1bTyu.mjs";
 import { L as Le } from "../Loader-D3rjKx72.mjs";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mx-cartographer/experiences",
-  "version": "8.0.15-alpha-view-history-testing",
+  "version": "8.0.16",
   "description": "Library containing experience widgets",
   "author": "MX",
   "license": "MIT",