@mx-cartographer/experiences 7.0.6 → 7.0.7

package/CHANGELOG.md

@@ -1,10 +1,15 @@
+## [7.0.7] - 09-18-2025
+
+- **FIXED** - Trends Widget table to show positive income values
+- **FIXED** - Trends Widget table to fill the width of its container
+
 ## [7.0.6] - 09-18-2025
 
 - **UPDATED** - Replace `@mui/icons-material` with `@mxenabled/mx-icons`
 
 ## [7.0.5] - 09-17-2025
 
-- **FIXED** -  Layout issue with income/expenses actions in standalone widgets
+- **FIXED** - Layout issue with income/expenses actions in standalone widgets
 
 ## [7.0.4] - 09-17-2025
 
@@ -12,8 +17,8 @@
 
 ## [7.0.3] - 09-12-2025
 
-- **UPDATED** - `Recurring Setting` | design change in `ManageExpenses` and `ManageIncome`. 
-- **ADDED** - `Recurring Setting` | Zero state added for `ManageExpenses` and `ManageIncome`. 
+- **UPDATED** - `Recurring Setting` | design change in `ManageExpenses` and `ManageIncome`.
+- **ADDED** - `Recurring Setting` | Zero state added for `ManageExpenses` and `ManageIncome`.
 
 ## [7.0.2] - 09-17-2025
 

package/dist/trends/index.es.js

@@ -1,58 +1,58 @@
-import { jsx as e, jsxs as T } from "react/jsx-runtime";
+import { jsx as e, jsxs as T, Fragment as Ge } from "react/jsx-runtime";
 import i from "react";
 import { observer as M } from "mobx-react-lite";
-import { Icon as te, Text as Z, CategoryIcon as fe, P as U, H3 as we, ChevronRightIcon as Ge } from "@mxenabled/mxui";
-import G from "@mui/material/Box";
+import { Icon as te, Text as Z, CategoryIcon as fe, P as U, H3 as we, ChevronRightIcon as Be } from "@mxenabled/mxui";
+import O from "@mui/material/Box";
 import b from "@mui/material/Stack";
 import ge from "@mui/material/Button";
 import { addSeconds as De } from "date-fns/addSeconds";
 import { differenceInCalendarMonths as pe } from "date-fns/differenceInCalendarMonths";
-import { a as Be, g as ze, S as Fe, L as Ie, u as Pe } from "../TrendsStore-DR8etTL2.mjs";
-import { T as Xn } from "../TrendsStore-DR8etTL2.mjs";
-import { i as Ke, c as $e, d as je, e as Ye, f as Ue, h as Xe, b as Ee, g as Le, j as ye } from "../SpendingData-D5vsfYKo.mjs";
-import Ze from "@mui/material/ToggleButton";
-import Qe from "@mui/material/ToggleButtonGroup";
-import { u as k, l as F, e as N, a as P, f as ne, c as oe, v as J, m as xe, p as qe } from "../hooks-02T565vf.mjs";
+import { a as ze, g as Fe, S as Pe, L as Ie, u as Ke } from "../TrendsStore-DR8etTL2.mjs";
+import { T as Zn } from "../TrendsStore-DR8etTL2.mjs";
+import { i as $e, c as je, d as Ye, e as Ue, f as Xe, h as Ze, b as Ee, g as Le, j as ye } from "../SpendingData-D5vsfYKo.mjs";
+import Qe from "@mui/material/ToggleButton";
+import qe from "@mui/material/ToggleButtonGroup";
+import { u as k, l as F, e as N, a as P, f as ne, c as oe, v as J, m as xe, p as Je } from "../hooks-02T565vf.mjs";
 import { u as K } from "../useScreenSize-B6JyS_Lj.mjs";
 import { f as Q, D as z } from "../Dialog-CWW597AF.mjs";
-import { DataGridPro as Je } from "@mui/x-data-grid-pro";
-import { C as et } from "../CurrencyText-YUhH2caW.mjs";
+import { DataGridPro as et } from "@mui/x-data-grid-pro";
+import { C as tt } from "../CurrencyText-YUhH2caW.mjs";
 import { c as ve } from "../Category-CevNQ03n.mjs";
-import { b as tt } from "../Localization-2MODESHW.mjs";
+import { b as nt } from "../Localization-2MODESHW.mjs";
 import { H as _e } from "../HeaderCell-DjuifqHJ.mjs";
-import { T as R, b as nt } from "../ViewMoreMicroCard-BZI5VMNW.mjs";
+import { T as R, b as ot } from "../ViewMoreMicroCard-BZI5VMNW.mjs";
 import { A as _, W as Me } from "../WidgetContainer-BG-fdDOf.mjs";
 import { a as Ae, T as Re } from "../TransactionDetails-BSfXqkpH.mjs";
 import { D as Ce } from "../Drawer-kEE73B87.mjs";
 import { L as q } from "../Loader-Dp1P2gNw.mjs";
 import { useTheme as ke } from "@mui/material/styles";
 import { L as Te } from "../LineChart-CYiUS-px.mjs";
-import { M as ot } from "../MiniWidgetContainer-DqKQNubH.mjs";
-import { subMonths as st } from "date-fns";
-import { TrendingUp as rt, TrendingDown as at, MultilineChart as it, ExpandLess as ct, ExpandMore as lt } from "@mxenabled/mx-icons";
-import { a as dt, f as X } from "../NumberFormatting-CtWHhyBX.mjs";
-import { M as ht } from "../MicroWidgetContainer-DmYiksbT.mjs";
-import ut from "@mui/material/Collapse";
-import mt from "@mui/material/List";
-import gt from "@mui/material/ListItem";
-import pt from "@mui/material/ListItemButton";
-import Ct from "@mui/material/ListItemIcon";
-import ft from "@mui/material/ListItemText";
+import { M as st } from "../MiniWidgetContainer-DqKQNubH.mjs";
+import { subMonths as rt } from "date-fns";
+import { TrendingUp as at, TrendingDown as it, MultilineChart as ct, ExpandLess as lt, ExpandMore as dt } from "@mxenabled/mx-icons";
+import { a as ht, f as X } from "../NumberFormatting-CtWHhyBX.mjs";
+import { M as ut } from "../MicroWidgetContainer-DmYiksbT.mjs";
+import mt from "@mui/material/Collapse";
+import gt from "@mui/material/List";
+import pt from "@mui/material/ListItem";
+import Ct from "@mui/material/ListItemButton";
+import ft from "@mui/material/ListItemIcon";
+import Tt from "@mui/material/ListItemText";
 import He from "@mui/material/styles/useTheme";
-import Tt from "@mui/material/Divider";
-import { useTheme as yt, Stack as _t } from "@mui/material";
-import bt from "@mui/material/Paper";
-import { b as St } from "../CategoryUtil-BR3H5i6n.mjs";
-import { E as wt } from "../ExportCsvAction-dpvaZxbS.mjs";
-import { E as Dt } from "../EmptyState-Dcb-o2tl.mjs";
+import yt from "@mui/material/Divider";
+import { useTheme as _t, Stack as bt } from "@mui/material";
+import St from "@mui/material/Paper";
+import { b as wt } from "../CategoryUtil-BR3H5i6n.mjs";
+import { E as Dt } from "../ExportCsvAction-dpvaZxbS.mjs";
+import { E as It } from "../EmptyState-Dcb-o2tl.mjs";
 const Ne = ({ selectedTab: n, onTabChange: o }) => /* @__PURE__ */ e(
-  Qe,
+  qe,
   {
     exclusive: !0,
     onChange: o,
     orientation: "horizontal",
     value: n,
-    children: ["Chart", "Table"].map((t) => /* @__PURE__ */ e(Ze, { color: "primary", sx: { width: 56 }, value: t, children: t === "Chart" ? /* @__PURE__ */ e(te, { name: "table_chart_view" }) : /* @__PURE__ */ e(te, { name: "format_list_bulleted" }) }, t))
+    children: ["Chart", "Table"].map((t) => /* @__PURE__ */ e(Qe, { color: "primary", sx: { width: 56 }, value: t, children: t === "Chart" ? /* @__PURE__ */ e(te, { name: "table_chart_view" }) : /* @__PURE__ */ e(te, { name: "format_list_bulleted" }) }, t))
   }
 ), We = ({ selectedDateRange: n, selectedCategoryGuid: o }) => {
   const { trends: t } = k(), { isMobile: s, isDesktop: r } = K(), { getCategoryName: d } = F(), a = i.useMemo(() => {
@@ -65,7 +65,7 @@ const Ne = ({ selectedTab: n, onTabChange: o }) => /* @__PURE__ */ e(
     );
     return `${c} - ${h}`;
   }, [n, s]);
-  return /* @__PURE__ */ T(G, { sx: { mr: 10, minWidth: "60%" }, children: [
+  return /* @__PURE__ */ T(O, { sx: { mr: 10, minWidth: "60%" }, children: [
     /* @__PURE__ */ e(
       Z,
       {
@@ -82,29 +82,29 @@ const Ne = ({ selectedTab: n, onTabChange: o }) => /* @__PURE__ */ e(
     ),
     /* @__PURE__ */ e(Z, { variant: r ? "Body" : "Small", children: a })
   ] });
-}, It = (n) => {
+}, Et = (n) => {
   const o = n.row[n.field];
-  return /* @__PURE__ */ e(b, { alignItems: "flex-end", tabIndex: n.tabIndex, children: /* @__PURE__ */ e(et, { amount: o, variant: "Small" }) });
-}, Et = ({ categoryGuid: n, topLevelCategoryGuid: o }) => {
+  return /* @__PURE__ */ e(b, { alignItems: "flex-end", tabIndex: n.tabIndex, children: /* @__PURE__ */ e(tt, { amount: o, variant: "Small" }) });
+}, Lt = ({ categoryGuid: n, topLevelCategoryGuid: o }) => {
   const { categories: t } = k(), s = t.default_categories[n]?.replace(/&/g, "&") ?? ve[n];
   return /* @__PURE__ */ T(b, { alignItems: "center", direction: "row", justifyContent: "center", children: [
     /* @__PURE__ */ e(
-      G,
+      O,
       {
-        "aria-label": tt(t.category_icon_label_aria, s),
+        "aria-label": nt(t.category_icon_label_aria, s),
         role: "img",
         children: /* @__PURE__ */ e(fe, { categoryGuid: o })
       }
     ),
     /* @__PURE__ */ e(Z, { sx: { ml: 12, pb: 6 }, variant: "Small", children: s })
   ] });
-}, Lt = (n) => /* @__PURE__ */ e(b, { alignItems: "center", direction: "row", height: "100%", width: "100%", children: /* @__PURE__ */ e(
-  Et,
+}, xt = (n) => /* @__PURE__ */ e(b, { alignItems: "center", direction: "row", height: "100%", width: "100%", children: /* @__PURE__ */ e(
+  Lt,
   {
     categoryGuid: n.row.category,
     topLevelCategoryGuid: n.row.top_level_category_guid
   }
-) }), xt = (n, o) => {
+) }), vt = (n, o) => {
   const t = [], s = new Date(n);
   for (; s <= o; ) {
     const r = Q(s, z.MONTH);
@@ -121,13 +121,13 @@ const Ne = ({ selectedTab: n, onTabChange: o }) => /* @__PURE__ */ e(
 }) => {
   const { onEvent: a } = N(), c = Q(/* @__PURE__ */ new Date(), z.MONTH_SHORT), [h, m] = i.useState([
     { field: c, sort: "desc" }
-  ]), g = i.useMemo(() => xt(o.start, o.end), [o]), C = [
+  ]), g = i.useMemo(() => vt(o.start, o.end), [o]), C = [
     {
       field: "category",
       headerName: "Category",
       minWidth: 175,
       renderHeader: _e,
-      renderCell: Lt,
+      renderCell: xt,
       sortable: !0,
       type: "string"
     },
@@ -137,18 +137,18 @@ const Ne = ({ selectedTab: n, onTabChange: o }) => /* @__PURE__ */ e(
         headerName: l,
         minWidth: 75,
         renderHeader: _e,
-        renderCell: It,
+        renderCell: Et,
         align: "right",
         headerAlign: "right",
         sortable: !0,
         hideSortIcons: !1,
         type: "number",
-        sortComparator: Be
+        sortComparator: ze
       })
     )
   ], u = i.useMemo(() => {
     const l = n.filter(
-      (f) => !Ke(f) && !$e(f)
+      (f) => !$e(f) && !je(f)
     ), y = (t ? l.filter(
       (f) => f.category_guid === t || f.top_level_category_guid === t
     ) : l).reduce(
@@ -161,14 +161,14 @@ const Ne = ({ selectedTab: n, onTabChange: o }) => /* @__PURE__ */ e(
           top_level_category_guid: I
         });
         const v = Q(new Date(H, x - 1), z.MONTH_SHORT);
-        return f[A][v] || (f[A][v] = 0), f[A][v] = f[A][v] + E, f;
+        return f[A][v] || (f[A][v] = 0), f[A][v] = f[A][v] + Math.abs(E), f;
       },
       {}
     );
     return Object.values(y);
   }, [n, t]);
-  return /* @__PURE__ */ e(G, { sx: { height: r, width: "100%", overflowX: "auto", boxShadow: "none", ...d }, children: /* @__PURE__ */ e(
-    Je,
+  return /* @__PURE__ */ e(O, { sx: { height: r, width: "100%", overflowX: "auto", boxShadow: "none", ...d }, children: /* @__PURE__ */ e(
+    et,
     {
       columns: C,
       disableColumnFilter: !0,
@@ -190,9 +190,9 @@ const Ne = ({ selectedTab: n, onTabChange: o }) => /* @__PURE__ */ e(
       sortingOrder: ["asc", "desc"]
     }
   ) });
-}, vt = {
+}, Mt = {
   title: "Transaction List"
-}, Mt = ({
+}, At = ({
   categoryGuid: n,
   dateRange: o,
   isOpen: t,
@@ -219,15 +219,15 @@ const Ne = ({ selectedTab: n, onTabChange: o }) => /* @__PURE__ */ e(
       ariaLabelClose: a.close_aria,
       isOpen: t,
       onClose: u,
-      title: vt.title,
+      title: Mt.title,
       children: [
         C && /* @__PURE__ */ e(Ae, { transaction: C }),
         !C && /* @__PURE__ */ e(Re, { onClick: g })
       ]
     }
   );
-}, At = M(Mt), Rt = ({ onBackClick: n, sx: o }) => {
-  const { onEvent: t } = N(), { isDesktop: s, isTablet: r, isMobile: d } = K(), { visibleAccounts: a } = oe(), { loadMonthlyCategoryTotals: c, monthlyCategoryTotals: h, getCategoryName: m } = F(), { sortedTransactions: g } = ne(), { selectedDateRange: C, setSelectedDateRange: u } = J(), { isCopyLoaded: l, isInitialized: p, selectedAccounts: y, setSelectedAccounts: f } = P(), { trends: w } = k(), [D, I] = i.useState(!1), [x, E] = i.useState(!1), [H, A] = i.useState("Chart"), [v, W] = i.useState(""), [se, $] = i.useState(window.innerHeight), ae = se - (d ? 315 : 345);
+}, Rt = M(At), kt = ({ onBackClick: n, sx: o }) => {
+  const { onEvent: t } = N(), { isDesktop: s, isTablet: r, isMobile: d } = K(), { visibleAccounts: a } = oe(), { loadMonthlyCategoryTotals: c, monthlyCategoryTotals: h, getCategoryName: m } = F(), { sortedTransactions: g } = ne(), { selectedDateRange: C, setSelectedDateRange: u } = J(), { isCopyLoaded: l, isInitialized: p, selectedAccounts: y, setSelectedAccounts: f } = P(), { trends: w } = k(), [D, I] = i.useState(!1), [x, E] = i.useState(!1), [H, A] = i.useState("Chart"), [v, V] = i.useState(""), [se, $] = i.useState(window.innerHeight), ae = se - (d ? 315 : 345);
   i.useEffect(() => {
     const S = () => $(window.innerHeight);
     return window.addEventListener("resize", S), () => window.removeEventListener("resize", S);
@@ -244,30 +244,30 @@ const Ne = ({ selectedTab: n, onTabChange: o }) => /* @__PURE__ */ e(
   }, [p, y, C]);
   const j = i.useMemo(() => {
     if (!D) return { stackedDatasets: [], unstackedDatasets: [] };
-    const S = ze(
+    const S = Fe(
       h,
       C.start,
       C.end
-    ), O = v.length ? S.filter(
+    ), W = v.length ? S.filter(
       (B) => B.top_level_category_guid === v || B.category_guid === v
-    ) : je(S);
+    ) : Ye(S);
     return {
-      stackedDatasets: O.filter(Ye),
-      unstackedDatasets: O.filter(Ue)
+      stackedDatasets: W.filter(Ue),
+      unstackedDatasets: W.filter(Xe)
     };
-  }, [h, v, C]), ee = (S, O) => {
-    A(O ?? H), t(_.TRENDS_CLICK_TOGGLE_VIEW);
+  }, [h, v, C]), ee = (S, W) => {
+    A(W ?? H), t(_.TRENDS_CLICK_TOGGLE_VIEW);
   }, ie = (S) => {
-    const O = De(S?.[0], 1), B = S?.[1], L = pe(B, O);
-    u({ start: O, end: B }), t(_.TRENDS_CLICK_TIME_WINDOW, {
+    const W = De(S?.[0], 1), B = S?.[1], L = pe(B, W);
+    u({ start: W, end: B }), t(_.TRENDS_CLICK_TIME_WINDOW, {
       time_period: L + "M"
     });
   }, ce = () => {
     t(_.TRENDS_CLICK_FILTER);
   }, le = (S) => {
-    W(S);
+    V(S);
   }, de = (S) => {
-    W(S), t(_.TRENDS_CLICK_LEGEND, { category: m(S) });
+    V(S), t(_.TRENDS_CLICK_LEGEND, { category: m(S) });
   }, he = (S) => {
     t(_.TRENDS_HOVER_LEGEND, { category: m(S) });
   }, ue = (S) => {
@@ -314,15 +314,15 @@ const Ne = ({ selectedTab: n, onTabChange: o }) => /* @__PURE__ */ e(
                 }
               ),
               /* @__PURE__ */ T(b, { alignItems: "center", flexDirection: "row", width: "100%", children: [
-                /* @__PURE__ */ e(G, { flexGrow: 1, children: v && /* @__PURE__ */ T(ge, { onClick: () => W(""), sx: { p: 0, pr: 5 }, children: [
+                /* @__PURE__ */ e(O, { flexGrow: 1, children: v && /* @__PURE__ */ T(ge, { onClick: () => V(""), sx: { p: 0, pr: 5 }, children: [
                   /* @__PURE__ */ e(te, { name: "arrow_back" }),
                   w.all_categories
                 ] }) }),
                 /* @__PURE__ */ e(ge, { onClick: () => E(!0), sx: { px: 5 }, children: `${w.view_transactions} (${g.length})` })
               ] }),
-              /* @__PURE__ */ T(G, { children: [
+              /* @__PURE__ */ T(O, { children: [
                 H === "Chart" && /* @__PURE__ */ e(
-                  Fe,
+                  Pe,
                   {
                     availableHeight: ae,
                     onClickLegend: de,
@@ -347,7 +347,7 @@ const Ne = ({ selectedTab: n, onTabChange: o }) => /* @__PURE__ */ e(
           }
         ),
         /* @__PURE__ */ e(
-          At,
+          Rt,
           {
             categoryGuid: v,
             dateRange: C,
@@ -358,8 +358,8 @@ const Ne = ({ selectedTab: n, onTabChange: o }) => /* @__PURE__ */ e(
       ]
     }
   );
-}, Pn = M(Rt), kt = () => {
-  const n = ke(), { monthlyCategoryTotals: o } = F(), { trends: t } = k(), s = Xe(o);
+}, Kn = M(kt), Ht = () => {
+  const n = ke(), { monthlyCategoryTotals: o } = F(), { trends: t } = k(), s = Ze(o);
   return /* @__PURE__ */ e(
     Te,
     {
@@ -376,24 +376,24 @@ const Ne = ({ selectedTab: n, onTabChange: o }) => /* @__PURE__ */ e(
       valueFormatterString: "0,0"
     }
   );
-}, Ht = M(kt), Nt = ({ onPrimaryCtaClick: n, sx: o }) => {
+}, Nt = M(Ht), Wt = ({ onPrimaryCtaClick: n, sx: o }) => {
   const { visibleAccounts: t } = oe(), { loadMonthlyCategoryTotals: s, monthlyTotalsLoaded: r } = F(), { isInitialized: d } = xe(), { trends: a } = k(), { isCopyLoaded: c, selectedAccounts: h, setSelectedAccounts: m } = P();
   return i.useEffect(() => {
     m(t);
   }, [t]), i.useEffect(() => {
     d && s(h).finally();
   }, [d, h]), !c || !d ? /* @__PURE__ */ e(q, {}) : /* @__PURE__ */ e(
-    ot,
+    st,
     {
       onPrimaryCtaClick: n,
       primaryCtaLabel: a.primary_cta,
       subTitle: a.sub_title,
       sx: o,
       title: a.mini_title,
-      children: r ? /* @__PURE__ */ e(Ht, {}) : /* @__PURE__ */ e(q, {})
+      children: r ? /* @__PURE__ */ e(Nt, {}) : /* @__PURE__ */ e(q, {})
     }
   );
-}, Kn = M(Nt), Wt = 70, be = ({
+}, $n = M(Wt), Ot = 70, be = ({
   title: n,
   totalAmount: o,
   transactionType: t,
@@ -401,10 +401,10 @@ const Ne = ({ selectedTab: n, onTabChange: o }) => /* @__PURE__ */ e(
   secondaryLabel: r,
   shouldDisplayPercentage: d
 }) => {
-  const { availableWidth: a } = qe(), c = i.useRef(null), h = i.useRef(null), m = dt(Number(Math.abs(s)), {
+  const { availableWidth: a } = Je(), c = i.useRef(null), h = i.useRef(null), m = ht(Number(Math.abs(s)), {
     style: "percent",
     minimumIntegerDigits: 1
-  }), g = a === 288 && X(o, "0,0.00").length > 10 ? X(o, "0,0") : X(o, "0,0.00"), C = t === "spending" ? s > 0 : s >= 0, u = t === "spending" ? "error.main" : "success.main", l = t === "spending" ? "success.main" : "text.secondary", p = c?.current, y = h?.current, f = p && y ? p.scrollWidth > y.clientWidth - Wt : !1;
+  }), g = a === 288 && X(o, "0,0.00").length > 10 ? X(o, "0,0") : X(o, "0,0.00"), C = t === "spending" ? s > 0 : s >= 0, u = t === "spending" ? "error.main" : "success.main", l = t === "spending" ? "success.main" : "text.secondary", p = c?.current, y = h?.current, f = p && y ? p.scrollWidth > y.clientWidth - Ot : !1;
   return /* @__PURE__ */ T(
     b,
     {
@@ -429,7 +429,7 @@ const Ne = ({ selectedTab: n, onTabChange: o }) => /* @__PURE__ */ e(
             children: [
               /* @__PURE__ */ e(U, { color: "text.secondary", variant: "caption", children: n }),
               d && /* @__PURE__ */ T(b, { sx: { alignItems: "center", flexDirection: "row", gap: 4 }, children: [
-                C ? /* @__PURE__ */ e(rt, { size: 20, sx: { color: u } }) : /* @__PURE__ */ e(at, { size: 20, sx: { color: l } }),
+                C ? /* @__PURE__ */ e(at, { size: 20, sx: { color: u } }) : /* @__PURE__ */ e(it, { size: 20, sx: { color: l } }),
                 /* @__PURE__ */ e(
                   U,
                   {
@@ -456,7 +456,7 @@ const Ne = ({ selectedTab: n, onTabChange: o }) => /* @__PURE__ */ e(
             },
             children: [
               /* @__PURE__ */ e(
-                G,
+                O,
                 {
                   ref: c,
                   sx: { overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" },
@@ -477,18 +477,18 @@ const Ne = ({ selectedTab: n, onTabChange: o }) => /* @__PURE__ */ e(
       ]
     }
   );
-}, Ot = M(() => {
+}, Vt = M(() => {
   const { trends: n } = k();
   return /* @__PURE__ */ T(b, { sx: { alignItems: "start", flexDirection: "row", gap: 12 }, children: [
-    /* @__PURE__ */ e(it, { size: 32 }),
+    /* @__PURE__ */ e(ct, { size: 32 }),
     /* @__PURE__ */ T(b, { children: [
       /* @__PURE__ */ e(U, { fontWeight: 600, variant: "body1", children: n.zero_state_content_header }),
       /* @__PURE__ */ e(U, { color: "text.secondary", variant: "subtitle2", children: n.zero_state_content_description })
     ] })
   ] });
-}), $n = M(({ onCtaClick: n }) => {
+}), jn = M(({ onCtaClick: n }) => {
   const { visibleAccounts: o } = oe(), { onEvent: t } = N(), { monthlyCategoryTotals: s, loadMonthlyCategoryTotals: r, monthlyTotalsLoaded: d } = F(), a = {
-    start: st(/* @__PURE__ */ new Date(), 1),
+    start: rt(/* @__PURE__ */ new Date(), 1),
     end: /* @__PURE__ */ new Date()
   }, { trends: c } = k(), { selectedAccounts: h, setSelectedAccounts: m, isInitialized: g } = P();
   i.useEffect(() => {
@@ -512,14 +512,14 @@ const Ne = ({ selectedTab: n, onTabChange: o }) => /* @__PURE__ */ e(
     ), n();
   };
   return !d || !g ? /* @__PURE__ */ e(q, {}) : /* @__PURE__ */ e(
-    ht,
+    ut,
     {
       className: "mx-trends-microwidget",
       ctaLabel: c.micro_primary_cta_label,
       onCTAClick: x,
       subHeader: I ? void 0 : c.micro_subheader,
       title: c.title,
-      children: I ? /* @__PURE__ */ e(Ot, {}) : /* @__PURE__ */ T(
+      children: I ? /* @__PURE__ */ e(Vt, {}) : /* @__PURE__ */ T(
         b,
         {
           sx: {
@@ -555,17 +555,17 @@ const Ne = ({ selectedTab: n, onTabChange: o }) => /* @__PURE__ */ e(
       )
     }
   );
-}), Vt = M(
+}), Gt = M(
   ({ isExpanded: n, onClick: o }) => {
     const t = He();
-    return /* @__PURE__ */ e(gt, { sx: { bgcolor: "background.paper" }, children: /* @__PURE__ */ e(pt, { onClick: o, sx: { justifyContent: "center" }, children: /* @__PURE__ */ T(
+    return /* @__PURE__ */ e(pt, { sx: { bgcolor: "background.paper" }, children: /* @__PURE__ */ e(Ct, { onClick: o, sx: { justifyContent: "center" }, children: /* @__PURE__ */ T(
       b,
       {
         sx: { color: t.palette.primary.main, flexDirection: "row", alignItems: "center" },
         children: [
-          /* @__PURE__ */ e(ft, { children: /* @__PURE__ */ e(Z, { bold: !0, variant: "body2", children: n ? "View less" : "View more" }) }),
-          /* @__PURE__ */ e(Ct, { sx: { color: t.palette.primary.main }, children: n ? /* @__PURE__ */ e(ct, {}) : /* @__PURE__ */ e(
-            lt,
+          /* @__PURE__ */ e(Tt, { children: /* @__PURE__ */ e(Z, { bold: !0, variant: "body2", children: n ? "View less" : "View more" }) }),
+          /* @__PURE__ */ e(ft, { sx: { color: t.palette.primary.main }, children: n ? /* @__PURE__ */ e(lt, {}) : /* @__PURE__ */ e(
+            dt,
             {
               sx: {
                 transition: "transform 0.3s ease-in-out",
@@ -600,15 +600,15 @@ const Ne = ({ selectedTab: n, onTabChange: o }) => /* @__PURE__ */ e(
           leftIcon: o ? /* @__PURE__ */ e(fe, { categoryGuid: o }) : void 0,
           onClick: g,
           rightContent: X(Math.abs(n), "0,0.00"),
-          rightIcon: r ? /* @__PURE__ */ e(Ge, {}) : void 0,
+          rightIcon: r ? /* @__PURE__ */ e(Be, {}) : void 0,
           subtitle: m,
           title: t
         }
       ),
-      a && /* @__PURE__ */ e(Tt, { sx: { ml: d ? 24 : 68 } })
+      a && /* @__PURE__ */ e(yt, { sx: { ml: d ? 24 : 68 } })
     ] }, o);
   }
-), Gt = M(
+), Bt = M(
   ({ availableHeight: n = 0, onCategoryClick: o }) => {
     const { collapsedCategories: t, visibleCategories: s, setVisibleListLength: r } = J(), { isLargeDesktop: d, isDesktop: a } = K(), { trends: c } = k(), { onEvent: h } = N(), [m, g] = i.useState(!1), C = a || d;
     i.useEffect(() => {
@@ -620,7 +620,7 @@ const Ne = ({ selectedTab: n, onTabChange: o }) => /* @__PURE__ */ e(
         ...R
       });
     }, l = s.length + (m ? t.length : 0);
-    return /* @__PURE__ */ e(b, { sx: { bgColor: "background.paper", width: "100%" }, children: /* @__PURE__ */ T(mt, { children: [
+    return /* @__PURE__ */ e(b, { sx: { bgColor: "background.paper", width: "100%" }, children: /* @__PURE__ */ T(gt, { children: [
       /* @__PURE__ */ e(b, { sx: { pb: 4, pt: 16, px: 16 }, children: /* @__PURE__ */ e(we, { children: c.categories }) }),
       s.map((p, y) => /* @__PURE__ */ e(
         Se,
@@ -633,7 +633,7 @@ const Ne = ({ selectedTab: n, onTabChange: o }) => /* @__PURE__ */ e(
         p.guid
       )),
       /* @__PURE__ */ e(
-        ut,
+        mt,
         {
           in: m,
           sx: { "&.MuiCollapse-root .MuiListItemButton-root": { paddingLeft: 24 } },
@@ -652,10 +652,10 @@ const Ne = ({ selectedTab: n, onTabChange: o }) => /* @__PURE__ */ e(
           })
         }
       ),
-      t.length > 0 && /* @__PURE__ */ e(Vt, { isExpanded: m, onClick: u })
+      t.length > 0 && /* @__PURE__ */ e(Gt, { isExpanded: m, onClick: u })
     ] }) });
   }
-), Bt = [
+), zt = [
   "BillAmountNotStandard",
   "CategorySpendingV2",
   "CostOfLivingToIncome",
@@ -689,16 +689,16 @@ const Ne = ({ selectedTab: n, onTabChange: o }) => /* @__PURE__ */ e(
   "WeeklyNewMerchantsV2",
   "WeeklyNoSpendDays",
   "WeeklySmallPurchasesSummary"
-], zt = ({ onInsightCardClick: n }) => {
-  const o = yt(), { onEvent: t } = N(), { isMobile: s, isDesktop: r, isLargeDesktop: d } = K(), { beatStore: a, endpoint: c, sessionToken: h } = xe(), { isInitialized: m } = P(), [g, C] = i.useState(!1), u = o.palette.mode === "dark", l = r || d, p = l || s ? 1 : 2;
+], Ft = ({ onInsightCardClick: n }) => {
+  const o = _t(), { onEvent: t } = N(), { isMobile: s, isDesktop: r, isLargeDesktop: d } = K(), { beatStore: a, endpoint: c, sessionToken: h } = xe(), { isInitialized: m } = P(), [g, C] = i.useState(!1), u = o.palette.mode === "dark", l = r || d, p = l || s ? 1 : 2;
   i.useEffect(() => {
     m && a.loadBeats().finally(() => C(!0));
   }, [m]);
-  const y = i.useMemo(() => g ? a.getFilteredBeats({ templates: Bt }) : [], [g]), f = () => null, w = (E) => {
+  const y = i.useMemo(() => g ? a.getFilteredBeats({ templates: zt }) : [], [g]), f = () => null, w = (E) => {
     n?.(E), t(_.TRENDS_CLICK_INSIGHT, R);
   }, D = l ? 200 : 170, I = l ? 170 : 124, x = y.length > 0 ? D : I;
-  return /* @__PURE__ */ e(_t, { sx: { height: x }, children: /* @__PURE__ */ e(
-    nt,
+  return /* @__PURE__ */ e(bt, { sx: { height: x }, children: /* @__PURE__ */ e(
+    ot,
     {
       areBeatsLoading: a.isLoading,
       beats: y,
@@ -718,7 +718,7 @@ const Ne = ({ selectedTab: n, onTabChange: o }) => /* @__PURE__ */ e(
       visibleCardsCount: p
     }
   ) });
-}, Ft = M(zt), Pt = M(({ chartLabel: n, chartColor: o }) => {
+}, Pt = M(Ft), Kt = M(({ chartLabel: n, chartColor: o }) => {
   const { onEvent: t } = N(), {
     categoryDetailsChartData: { monthlyAmounts: s, tooltipLabels: r }
   } = J();
@@ -751,11 +751,11 @@ const Ne = ({ selectedTab: n, onTabChange: o }) => /* @__PURE__ */ e(
       valueFormatterString: "0,0"
     }
   ) });
-}), Kt = M(({ onClose: n }) => {
+}), $t = M(({ onClose: n }) => {
   const o = He(), { onEvent: t } = N(), { common: s, trends: r } = k(), { selectedCategoryData: d, selectedDateRangeMonthRange: a } = J(), { sortedTransactions: c } = ne(), [h, m] = i.useState(null);
   if (!d)
     return null;
-  const { guid: g, name: C, is_income: u, totalAmount: l } = d, p = u ? r.category_income : r.category_spending, y = St(g, o), f = u ? r.income_label : r.spending_label, w = ` ${d.transactions.length === 1 ? r.transaction : r.transactions} (${d.transactions.length})`, D = i.useMemo(
+  const { guid: g, name: C, is_income: u, totalAmount: l } = d, p = u ? r.category_income : r.category_spending, y = wt(g, o), f = u ? r.income_label : r.spending_label, w = ` ${d.transactions.length === 1 ? r.transaction : r.transactions} (${d.transactions.length})`, D = i.useMemo(
     () => c.find((E) => E.guid === h),
     [h, c]
   ), I = (E) => E.category_guid === g || E.top_level_category_guid === g, x = () => {
@@ -771,7 +771,7 @@ const Ne = ({ selectedTab: n, onTabChange: o }) => /* @__PURE__ */ e(
       title: p,
       children: [
         /* @__PURE__ */ T(b, { sx: { alignItems: "center", height: "100%" }, children: [
-          /* @__PURE__ */ T(bt, { sx: { borderRadius: 0, pb: 4, pt: 16, width: "100%" }, children: [
+          /* @__PURE__ */ T(St, { sx: { borderRadius: 0, pb: 4, pt: 16, width: "100%" }, children: [
             /* @__PURE__ */ e(
               Ie,
               {
@@ -781,10 +781,10 @@ const Ne = ({ selectedTab: n, onTabChange: o }) => /* @__PURE__ */ e(
                 title: C
               }
             ),
-            /* @__PURE__ */ e(Pt, { chartColor: y, chartLabel: f }),
+            /* @__PURE__ */ e(Kt, { chartColor: y, chartLabel: f }),
             /* @__PURE__ */ T(b, { alignItems: "center", direction: "row", justifyContent: "space-between", sx: { mx: 24 }, children: [
               /* @__PURE__ */ e(Z, { bold: !0, variant: "body1", children: w }),
-              /* @__PURE__ */ e(wt, { filter: I })
+              /* @__PURE__ */ e(Dt, { filter: I })
             ] })
           ] }),
           /* @__PURE__ */ e(
@@ -809,10 +809,10 @@ const Ne = ({ selectedTab: n, onTabChange: o }) => /* @__PURE__ */ e(
       ]
     }
   );
-}), $t = (n, o) => {
+}), jt = (n, o) => {
   const t = Le(n, o), s = Ee(n, o);
   return [t, s].filter((r) => r.length > 0);
-}, jt = (n, o) => {
+}, Yt = (n, o) => {
   const [t, s] = n, r = t, d = s ?? t, a = [];
   if (r) {
     const c = r.reduce((h, m) => h + m.y, 0);
@@ -823,13 +823,13 @@ const Ne = ({ selectedTab: n, onTabChange: o }) => /* @__PURE__ */ e(
     a.push({ label: o.spending_label, amount: c });
   }
   return a;
-}, Yt = ({
+}, Ut = ({
   availableHeight: n = 0,
   minHeight: o = 500,
   selectedDateRange: t,
   totals: s
 }) => {
-  const r = ke(), { onEvent: d } = N(), { trends: a } = k(), { isSmallMobile: c, isMobile: h, isSmallTablet: m, isTablet: g } = K(), C = [r.palette.chart?.chart1, r.palette.chart?.chart2], u = $t(s, t), l = jt(u, a), [p, y] = i.useState(0), f = 458, w = 195, D = 56, I = h || c ? w : m || g ? f : p;
+  const r = ke(), { onEvent: d } = N(), { trends: a } = k(), { isSmallMobile: c, isMobile: h, isSmallTablet: m, isTablet: g } = K(), C = [r.palette.chart?.chart1, r.palette.chart?.chart2], u = jt(s, t), l = Yt(u, a), [p, y] = i.useState(0), f = 458, w = 195, D = 56, I = h || c ? w : m || g ? f : p;
   return i.useEffect(() => {
     const E = Math.max(n - D, o);
     y(E);
@@ -856,14 +856,14 @@ const Ne = ({ selectedTab: n, onTabChange: o }) => /* @__PURE__ */ e(
       valueFormatterString: "0,0"
     }
   );
-}, Ut = M(Yt), Xt = ({ onBackClick: n, onInsightCardClick: o, sx: t }) => {
+}, Xt = M(Ut), Zt = ({ onBackClick: n, onInsightCardClick: o, sx: t }) => {
   const { onEvent: s } = N(), { isLargeDesktop: r, isDesktop: d, isMobile: a } = K(), { visibleAccounts: c } = oe(), { loadDateRangeCategoryTotals: h, loadMonthlyCategoryTotals: m, monthlyCategoryTotals: g } = F(), { setFilter: C } = ne(), { selectedDateRange: u, setSelectedCategoryData: l, setSelectedDateRange: p } = J(), {
     isCopyLoaded: y,
     isInitialized: f,
     selectedAccounts: w,
     selectedAccountGuids: D,
     setSelectedAccounts: I
-  } = P(), { trends: x } = k(), E = Pe(), H = d || r, [A, v] = i.useState(!1), [W, se] = i.useState("Chart"), [$, re] = i.useState(""), [ae, j] = i.useState(!1), [ee, ie] = i.useState(window.innerHeight), ce = ee - 208, le = ee - (E ? 494 : 266);
+  } = P(), { trends: x } = k(), E = Ke(), H = d || r, [A, v] = i.useState(!1), [V, se] = i.useState("Chart"), [$, re] = i.useState(""), [ae, j] = i.useState(!1), [ee, ie] = i.useState(window.innerHeight), ce = ee - 208, le = ee - (E ? 494 : 266);
   i.useEffect(() => {
     const L = () => ie(window.innerHeight);
     return window.addEventListener("resize", L), () => window.removeEventListener("resize", L);
@@ -890,8 +890,8 @@ const Ne = ({ selectedTab: n, onTabChange: o }) => /* @__PURE__ */ e(
       };
       C({
         ...L,
-        custom: (V) => !!g.find(
-          (Y) => Y.top_level_category_guid === V.top_level_category_guid || Y.category_guid === V.category_guid
+        custom: (G) => !!g.find(
+          (Y) => Y.top_level_category_guid === G.top_level_category_guid || Y.category_guid === G.category_guid
         )
       });
     }
@@ -900,14 +900,14 @@ const Ne = ({ selectedTab: n, onTabChange: o }) => /* @__PURE__ */ e(
     l(L), j(!0);
   }, he = () => {
     l(null), j(!1);
-  }, ue = (L, V) => {
-    se(V ?? W), s(_.TRENDS_CLICK_TOGGLE_VIEW, {
+  }, ue = (L, G) => {
+    se(G ?? V), s(_.TRENDS_CLICK_TOGGLE_VIEW, {
       ...R,
-      toggleView: V
+      toggleView: G
     });
   }, me = (L) => {
-    const V = De(L?.[0], 1), Y = L?.[1], Ve = pe(Y, V);
-    p({ start: V, end: Y }), s(_.TRENDS_CLICK_TIME_WINDOW, {
+    const G = De(L?.[0], 1), Y = L?.[1], Ve = pe(Y, G);
+    p({ start: G, end: Y }), s(_.TRENDS_CLICK_TIME_WINDOW, {
       ...R,
       time_period: Ve + "M"
     });
@@ -916,7 +916,7 @@ const Ne = ({ selectedTab: n, onTabChange: o }) => /* @__PURE__ */ e(
       ...R,
       filterValue: L
     });
-  }, O = (L) => {
+  }, W = (L) => {
     re(L);
   }, B = () => {
     re(""), s(_.TRENDS_CLICK_ALL_CATEGORIES, R);
@@ -954,12 +954,12 @@ const Ne = ({ selectedTab: n, onTabChange: o }) => /* @__PURE__ */ e(
                         selectedDateRange: u
                       }
                     ),
-                    /* @__PURE__ */ e(Ne, { onTabChange: ue, selectedTab: W })
+                    /* @__PURE__ */ e(Ne, { onTabChange: ue, selectedTab: V })
                   ]
                 }
               ),
               A && c.length === 0 && /* @__PURE__ */ e(
-                Dt,
+                It,
                 {
                   header: "",
                   icon: "",
@@ -969,55 +969,55 @@ const Ne = ({ selectedTab: n, onTabChange: o }) => /* @__PURE__ */ e(
                   subText: x.empty_state_sub_text
                 }
               ),
-              /* @__PURE__ */ e(b, { alignItems: "center", flexDirection: "row", width: "100%", children: /* @__PURE__ */ e(G, { flexGrow: 1, children: $ && /* @__PURE__ */ T(ge, { onClick: B, sx: { p: 0, pr: 5 }, children: [
+              /* @__PURE__ */ e(b, { alignItems: "center", flexDirection: "row", width: "100%", children: /* @__PURE__ */ e(O, { flexGrow: 1, children: $ && /* @__PURE__ */ T(ge, { onClick: B, sx: { p: 0, pr: 5 }, children: [
                 /* @__PURE__ */ e(te, { name: "arrow_back" }),
                 x.all_categories
               ] }) }) }),
               /* @__PURE__ */ T(b, { flexDirection: H ? "row" : "column", gap: H ? 48 : 16, children: [
-                /* @__PURE__ */ T(G, { sx: { width: H ? "68%" : "100%" }, children: [
-                  W === "Chart" && /* @__PURE__ */ e(
-                    Ut,
+                V === "Chart" && /* @__PURE__ */ T(Ge, { children: [
+                  /* @__PURE__ */ e(O, { sx: { width: H ? "68%" : "100%" }, children: /* @__PURE__ */ e(
+                    Xt,
                     {
                       availableHeight: ce,
                       minHeight: 450,
                       selectedDateRange: u,
                       totals: g
                     }
-                  ),
-                  W === "Table" && /* @__PURE__ */ e(
-                    Oe,
-                    {
-                      height: "unset",
-                      monthlyCategoryTotals: g,
-                      onClickRow: O,
-                      selectedCategory: $,
-                      selectedDateRange: u
-                    }
-                  )
+                  ) }),
+                  /* @__PURE__ */ T(b, { gap: 16, sx: { width: H ? "32%" : "100%" }, children: [
+                    E && /* @__PURE__ */ e(Pt, { onInsightCardClick: o }),
+                    /* @__PURE__ */ e(
+                      Bt,
+                      {
+                        availableHeight: le,
+                        onCategoryClick: de
+                      }
+                    )
+                  ] })
                 ] }),
-                W === "Chart" && /* @__PURE__ */ T(b, { gap: 16, sx: { width: H ? "32%" : "100%" }, children: [
-                  E && /* @__PURE__ */ e(Ft, { onInsightCardClick: o }),
-                  /* @__PURE__ */ e(
-                    Gt,
-                    {
-                      availableHeight: le,
-                      onCategoryClick: de
-                    }
-                  )
-                ] })
+                V === "Table" && /* @__PURE__ */ e(O, { sx: { width: "100%" }, children: /* @__PURE__ */ e(
+                  Oe,
+                  {
+                    height: "unset",
+                    monthlyCategoryTotals: g,
+                    onClickRow: W,
+                    selectedCategory: $,
+                    selectedDateRange: u
+                  }
+                ) })
               ] })
             ]
           }
         ),
-        ae && /* @__PURE__ */ e(Kt, { onClose: he })
+        ae && /* @__PURE__ */ e($t, { onClose: he })
       ]
     }
   );
-}, jn = M(Xt);
+}, Yn = M(Zt);
 export {
-  Pn as TrendsFullWidget,
-  $n as TrendsMicroWidget,
-  Kn as TrendsMiniWidget,
-  Xn as TrendsStore,
-  jn as TrendsWidget
+  Kn as TrendsFullWidget,
+  jn as TrendsMicroWidget,
+  $n as TrendsMiniWidget,
+  Zn as TrendsStore,
+  Yn as TrendsWidget
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mx-cartographer/experiences",
-  "version": "7.0.6",
+  "version": "7.0.7",
   "description": "Library containing experience widgets",
   "author": "MX",
   "license": "MIT",