@mx-cartographer/experiences 7.0.58-alpha.mm3 → 7.0.58-alpha.mm5

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (2) hide show
  1. package/dist/trends/index.es.js +332 -332
  2. package/package.json +1 -1
package/dist/trends/index.es.js CHANGED
@@ -1,52 +1,52 @@
1
1
  import { jsx as e, jsxs as C, Fragment as qe } from "react/jsx-runtime";
2
2
  import i from "react";
3
3
  import { observer as v } from "mobx-react-lite";
4
- import { Icon as ie, Text as Q, CategoryIcon as fe, P as X, H3 as Le, ChevronRightIcon as Je } from "@mxenabled/mxui";
4
+ import { Icon as ae, Text as Q, CategoryIcon as fe, P as X, H3 as xe, ChevronRightIcon as Je } from "@mxenabled/mxui";
5
5
  import W from "@mui/material/Box";
6
- import b from "@mui/material/Stack";
7
- import ge from "@mui/material/Button";
8
- import { addSeconds as xe } from "date-fns/addSeconds";
6
+ import _ from "@mui/material/Stack";
7
+ import me from "@mui/material/Button";
8
+ import { addSeconds as ve } from "date-fns/addSeconds";
9
9
  import { differenceInCalendarMonths as pe } from "date-fns/differenceInCalendarMonths";
10
- import { a as et, g as tt, S as nt, L as ve } from "../TrendsStore-BKBnNQba.mjs";
10
+ import { a as et, g as tt, S as nt, L as Me } from "../TrendsStore-BKBnNQba.mjs";
11
11
  import { T as mo } from "../TrendsStore-BKBnNQba.mjs";
12
- import { i as ot, c as st, d as rt, e as at, f as it, h as ct, b as Me, g as Ae, j as we } from "../SpendingData-D5vsfYKo.mjs";
12
+ import { i as ot, c as st, d as rt, e as at, f as it, h as ct, b as Ae, g as Re, j as De } from "../SpendingData-D5vsfYKo.mjs";
13
13
  import lt from "@mui/material/ToggleButton";
14
14
  import dt from "@mui/material/ToggleButtonGroup";
15
- import { u as R, m as K, g as k, b as ee, h as ce, d as le, v as te, f as Te, p as ht, a as Re } from "../hooks-CE2TKk4a.mjs";
15
+ import { u as R, m as K, g as k, b as ee, h as ie, d as ce, v as te, f as Te, p as ht, a as ut } from "../hooks-CE2TKk4a.mjs";
16
16
  import { u as $ } from "../useScreenSize-B6JyS_Lj.mjs";
17
- import { f as q, D as B } from "../Dialog-CWW597AF.mjs";
18
- import { DataGridPro as ut } from "@mui/x-data-grid-pro";
17
+ import { f as q, D as z } from "../Dialog-CWW597AF.mjs";
18
+ import { DataGridPro as gt } from "@mui/x-data-grid-pro";
19
19
  import { C as mt } from "../CurrencyText-YUhH2caW.mjs";
20
20
  import { c as ke } from "../Category-CevNQ03n.mjs";
21
- import { b as gt } from "../Localization-2MODESHW.mjs";
22
- import { H as De } from "../HeaderCell-DjuifqHJ.mjs";
23
- import { T as A, b as pt } from "../ViewMoreMicroCard-BAz2NyEO.mjs";
21
+ import { b as pt } from "../Localization-2MODESHW.mjs";
22
+ import { H as Ie } from "../HeaderCell-DjuifqHJ.mjs";
23
+ import { T as A, b as Ct } from "../ViewMoreMicroCard-BAz2NyEO.mjs";
24
24
  import { A as y, W as Ne } from "../WidgetContainer-B8MRJ5Y1.mjs";
25
25
  import { a as He, T as We } from "../TransactionDetails-DAp_CPCP.mjs";
26
26
  import { D as Ce } from "../Drawer-kEE73B87.mjs";
27
27
  import { L as J } from "../Loader-DUaFpDGv.mjs";
28
28
  import { useTheme as Oe } from "@mui/material/styles";
29
29
  import { L as ye } from "../LineChart-B2Y7zwMu.mjs";
30
- import { M as Ct } from "../MiniWidgetContainer-DTQdRK-3.mjs";
31
- import { subMonths as ft } from "date-fns";
32
- import { TrendingUp as Tt, TrendingDown as yt, MultilineChart as _t, ExpandLess as bt, ExpandMore as St } from "@mxenabled/mx-icons";
33
- import { a as wt, f as Z } from "../NumberFormatting-CtWHhyBX.mjs";
34
- import { M as Dt } from "../MicroWidgetContainer-C4QQHfD7.mjs";
35
- import It from "@mui/material/Collapse";
36
- import Et from "@mui/material/List";
37
- import Lt from "@mui/material/ListItem";
38
- import xt from "@mui/material/ListItemButton";
39
- import vt from "@mui/material/ListItemIcon";
40
- import Mt from "@mui/material/ListItemText";
30
+ import { M as ft } from "../MiniWidgetContainer-DTQdRK-3.mjs";
31
+ import { subMonths as Tt } from "date-fns";
32
+ import { TrendingUp as yt, TrendingDown as _t, MultilineChart as bt, ExpandLess as St, ExpandMore as wt } from "@mxenabled/mx-icons";
33
+ import { a as Dt, f as Z } from "../NumberFormatting-CtWHhyBX.mjs";
34
+ import { M as It } from "../MicroWidgetContainer-C4QQHfD7.mjs";
35
+ import Et from "@mui/material/Collapse";
36
+ import Lt from "@mui/material/List";
37
+ import xt from "@mui/material/ListItem";
38
+ import vt from "@mui/material/ListItemButton";
39
+ import Mt from "@mui/material/ListItemIcon";
40
+ import At from "@mui/material/ListItemText";
41
41
  import Ve from "@mui/material/styles/useTheme";
42
- import At from "@mui/material/Divider";
43
- import { useTheme as Rt, Stack as kt } from "@mui/material";
44
- import Nt from "@mui/material/Paper";
45
- import { b as Ht } from "../CategoryUtil-BR3H5i6n.mjs";
46
- import { E as Wt } from "../ExportCsvAction-CBJAfyAw.mjs";
47
- import { u as Ot } from "../useInsightsEnabled-DSnpkUq0.mjs";
48
- import { E as Vt } from "../EmptyState-w2yYDuKG.mjs";
49
- import { k as Gt } from "../ConnectDrawer-DJA_S-rX.mjs";
42
+ import Rt from "@mui/material/Divider";
43
+ import { useTheme as kt, Stack as Nt } from "@mui/material";
44
+ import Ht from "@mui/material/Paper";
45
+ import { b as Wt } from "../CategoryUtil-BR3H5i6n.mjs";
46
+ import { E as Ot } from "../ExportCsvAction-CBJAfyAw.mjs";
47
+ import { u as Vt } from "../useInsightsEnabled-DSnpkUq0.mjs";
48
+ import { E as Gt } from "../EmptyState-w2yYDuKG.mjs";
49
+ import { k as Bt } from "../ConnectDrawer-DJA_S-rX.mjs";
50
50
  const Ge = ({ selectedTab: t, onTabChange: o }) => /* @__PURE__ */ e(
51
51
  dt,
52
52
  {
@@ -54,18 +54,18 @@ const Ge = ({ selectedTab: t, onTabChange: o }) => /* @__PURE__ */ e(
54
54
  onChange: o,
55
55
  orientation: "horizontal",
56
56
  value: t,
57
- children: ["Chart", "Table"].map((n) => /* @__PURE__ */ e(lt, { color: "primary", sx: { width: 56 }, value: n, children: n === "Chart" ? /* @__PURE__ */ e(ie, { name: "table_chart_view" }) : /* @__PURE__ */ e(ie, { name: "format_list_bulleted" }) }, n))
57
+ children: ["Chart", "Table"].map((n) => /* @__PURE__ */ e(lt, { color: "primary", sx: { width: 56 }, value: n, children: n === "Chart" ? /* @__PURE__ */ e(ae, { name: "table_chart_view" }) : /* @__PURE__ */ e(ae, { name: "format_list_bulleted" }) }, n))
58
58
  }
59
59
  ), Be = ({ selectedDateRange: t, selectedCategoryGuid: o }) => {
60
- const { trends: n } = R(), { isMobile: s, isDesktop: a } = $(), { getCategoryName: d } = K(), h = i.useMemo(() => {
61
- const l = q(
60
+ const { trends: n } = R(), { isMobile: s, isDesktop: a } = $(), { getCategoryName: h } = K(), u = i.useMemo(() => {
61
+ const d = q(
62
62
  t.start,
63
- s ? B.MONTH_SHORT_YEAR : B.MONTH_YEAR
64
- ), c = q(
63
+ s ? z.MONTH_SHORT_YEAR : z.MONTH_YEAR
64
+ ), l = q(
65
65
  t.end,
66
- s ? B.MONTH_SHORT_YEAR : B.MONTH_YEAR
66
+ s ? z.MONTH_SHORT_YEAR : z.MONTH_YEAR
67
67
  );
68
- return `${l} - ${c}`;
68
+ return `${d} - ${l}`;
69
69
  }, [t, s]);
70
70
  return /* @__PURE__ */ C(W, { sx: { mr: 10, minWidth: "60%" }, children: [
71
71
  /* @__PURE__ */ e(
@@ -79,37 +79,37 @@ const Ge = ({ selectedTab: t, onTabChange: o }) => /* @__PURE__ */ e(
79
79
  textOverflow: "unset"
80
80
  },
81
81
  variant: a ? "H3" : "Body",
82
- children: d(o) || n.sub_title
82
+ children: h(o) || n.sub_title
83
83
  }
84
84
  ),
85
- /* @__PURE__ */ e(Q, { variant: a ? "Body" : "Small", children: h })
85
+ /* @__PURE__ */ e(Q, { variant: a ? "Body" : "Small", children: u })
86
86
  ] });
87
- }, Bt = (t) => {
87
+ }, zt = (t) => {
88
88
  const o = t.row[t.field];
89
- return /* @__PURE__ */ e(b, { alignItems: "flex-end", tabIndex: t.tabIndex, children: /* @__PURE__ */ e(mt, { amount: o, variant: "Small" }) });
90
- }, zt = ({ categoryGuid: t, topLevelCategoryGuid: o }) => {
89
+ return /* @__PURE__ */ e(_, { alignItems: "flex-end", tabIndex: t.tabIndex, children: /* @__PURE__ */ e(mt, { amount: o, variant: "Small" }) });
90
+ }, Pt = ({ categoryGuid: t, topLevelCategoryGuid: o }) => {
91
91
  const { categories: n } = R(), s = n.default_categories[t]?.replace(/&/g, "&") ?? ke[t];
92
- return /* @__PURE__ */ C(b, { alignItems: "center", direction: "row", justifyContent: "center", children: [
92
+ return /* @__PURE__ */ C(_, { alignItems: "center", direction: "row", justifyContent: "center", children: [
93
93
  /* @__PURE__ */ e(
94
94
  W,
95
95
  {
96
- "aria-label": gt(n.category_icon_label_aria, s),
96
+ "aria-label": pt(n.category_icon_label_aria, s),
97
97
  role: "img",
98
98
  children: /* @__PURE__ */ e(fe, { categoryGuid: o })
99
99
  }
100
100
  ),
101
101
  /* @__PURE__ */ e(Q, { sx: { ml: 12, pb: 6 }, variant: "Small", children: s })
102
102
  ] });
103
- }, Ft = (t) => /* @__PURE__ */ e(b, { alignItems: "center", direction: "row", height: "100%", width: "100%", children: /* @__PURE__ */ e(
104
- zt,
103
+ }, Ft = (t) => /* @__PURE__ */ e(_, { alignItems: "center", direction: "row", height: "100%", width: "100%", children: /* @__PURE__ */ e(
104
+ Pt,
105
105
  {
106
106
  categoryGuid: t.row.category,
107
107
  topLevelCategoryGuid: t.row.top_level_category_guid
108
108
  }
109
- ) }), Pt = (t, o) => {
109
+ ) }), Kt = (t, o) => {
110
110
  const n = [], s = new Date(t);
111
111
  for (; s <= o; ) {
112
- const a = q(s, B.MONTH);
112
+ const a = q(s, z.MONTH);
113
113
  n.push(a), s.setMonth(s.getMonth() + 1);
114
114
  }
115
115
  return n;
@@ -119,17 +119,17 @@ const Ge = ({ selectedTab: t, onTabChange: o }) => /* @__PURE__ */ e(
119
119
  selectedCategory: n,
120
120
  onClickRow: s,
121
121
  height: a = "100dvh",
122
- sx: d = {}
122
+ sx: h = {}
123
123
  }) => {
124
- const { onEvent: h } = k(), l = q(/* @__PURE__ */ new Date(), B.MONTH_SHORT), [c, g] = i.useState([
125
- { field: l, sort: "desc" }
126
- ]), f = i.useMemo(() => Pt(o.start, o.end), [o]), u = [
124
+ const { onEvent: u } = k(), d = q(/* @__PURE__ */ new Date(), z.MONTH_SHORT), [l, m] = i.useState([
125
+ { field: d, sort: "desc" }
126
+ ]), f = i.useMemo(() => Kt(o.start, o.end), [o]), c = [
127
127
  {
128
128
  field: "category",
129
129
  flex: 1,
130
130
  headerName: "Category",
131
131
  minWidth: 175,
132
- renderHeader: De,
132
+ renderHeader: Ie,
133
133
  renderCell: Ft,
134
134
  sortable: !0,
135
135
  type: "string"
@@ -140,8 +140,8 @@ const Ge = ({ selectedTab: t, onTabChange: o }) => /* @__PURE__ */ e(
140
140
  flex: 1,
141
141
  headerName: r,
142
142
  minWidth: 100,
143
- renderHeader: De,
144
- renderCell: Bt,
143
+ renderHeader: Ie,
144
+ renderCell: zt,
145
145
  align: "right",
146
146
  headerAlign: "right",
147
147
  sortable: !0,
@@ -150,10 +150,10 @@ const Ge = ({ selectedTab: t, onTabChange: o }) => /* @__PURE__ */ e(
150
150
  sortComparator: et
151
151
  })
152
152
  )
153
- ], T = i.useMemo(() => {
153
+ ], b = i.useMemo(() => {
154
154
  const r = t.filter(
155
155
  (p) => !ot(p) && !st(p)
156
- ), _ = (n ? r.filter(
156
+ ), T = (n ? r.filter(
157
157
  (p) => p.category_guid === n || p.top_level_category_guid === n
158
158
  ) : r).reduce(
159
159
  (p, D) => {
@@ -164,127 +164,127 @@ const Ge = ({ selectedTab: t, onTabChange: o }) => /* @__PURE__ */ e(
164
164
  category_guid: w,
165
165
  top_level_category_guid: I
166
166
  });
167
- const L = q(new Date(O, N - 1), B.MONTH_SHORT);
167
+ const L = q(new Date(O, N - 1), z.MONTH_SHORT);
168
168
  return p[M][L] || (p[M][L] = 0), p[M][L] = p[M][L] + Math.abs(E), p;
169
169
  },
170
170
  {}
171
171
  );
172
- return Object.values(_);
172
+ return Object.values(T);
173
173
  }, [t, n]);
174
- return /* @__PURE__ */ e(W, { sx: { height: a, width: "100%", overflowX: "auto", boxShadow: "none", ...d }, children: /* @__PURE__ */ e(
175
- ut,
174
+ return /* @__PURE__ */ e(W, { sx: { height: a, width: "100%", overflowX: "auto", boxShadow: "none", ...h }, children: /* @__PURE__ */ e(
175
+ gt,
176
176
  {
177
- columns: u,
177
+ columns: c,
178
178
  disableColumnFilter: !0,
179
179
  disableColumnMenu: !0,
180
180
  hideFooter: !0,
181
- initialState: { sorting: { sortModel: c } },
181
+ initialState: { sorting: { sortModel: l } },
182
182
  onRowClick: (r) => {
183
- s?.(r.row.category), h(y.TRENDS_CLICK_LIST_ITEM, {
183
+ s?.(r.row.category), u(y.TRENDS_CLICK_LIST_ITEM, {
184
184
  ...A,
185
185
  listItem: ke[r.row.category]
186
186
  });
187
187
  },
188
188
  onSortModelChange: (r) => {
189
- g(r), h(y.TRENDS_CLICK_TABLE_SORT, A);
189
+ m(r), u(y.TRENDS_CLICK_TABLE_SORT, A);
190
190
  },
191
- rows: T,
191
+ rows: b,
192
192
  slotProps: { baseIconButton: { color: "secondary", sx: { ml: 8 } } },
193
- sortModel: c,
193
+ sortModel: l,
194
194
  sortingOrder: ["asc", "desc"]
195
195
  }
196
196
  ) });
197
- }, Kt = {
197
+ }, $t = {
198
198
  title: "Transaction List"
199
- }, $t = ({
199
+ }, jt = ({
200
200
  categoryGuid: t,
201
201
  dateRange: o,
202
202
  isOpen: n,
203
203
  onClose: s
204
204
  }) => {
205
- const { onEvent: a } = k(), { selectedAccountGuids: d } = ee(), { common: h } = R(), { setFilter: l, sortedTransactions: c } = ce(), [g, f] = i.useState(""), u = i.useMemo(
206
- () => c.find((r) => r.guid === g),
207
- [g, c]
205
+ const { onEvent: a } = k(), { selectedAccountGuids: h } = ee(), { common: u } = R(), { setFilter: d, sortedTransactions: l } = ie(), [m, f] = i.useState(""), c = i.useMemo(
206
+ () => l.find((r) => r.guid === m),
207
+ [m, l]
208
208
  );
209
209
  i.useEffect(() => {
210
- l({
211
- accounts: d,
210
+ d({
211
+ accounts: h,
212
212
  dateRange: o,
213
213
  custom: (r) => t === "" || t === r.category_guid || t === r.top_level_category_guid,
214
214
  showSplits: !!t
215
215
  });
216
- }, [d, t, o]), i.useEffect(() => a(y.TRENDS_VIEW_TRANSACTIONS), []);
217
- const T = () => {
216
+ }, [h, t, o]), i.useEffect(() => a(y.TRENDS_VIEW_TRANSACTIONS), []);
217
+ const b = () => {
218
218
  f(""), s();
219
219
  };
220
220
  return /* @__PURE__ */ C(
221
221
  Ce,
222
222
  {
223
- ariaLabelClose: h.close_aria,
223
+ ariaLabelClose: u.close_aria,
224
224
  isOpen: n,
225
- onClose: T,
226
- title: Kt.title,
225
+ onClose: b,
226
+ title: $t.title,
227
227
  children: [
228
- u && /* @__PURE__ */ e(He, { transaction: u }),
229
- !u && /* @__PURE__ */ e(We, { onClick: f })
228
+ c && /* @__PURE__ */ e(He, { transaction: c }),
229
+ !c && /* @__PURE__ */ e(We, { onClick: f })
230
230
  ]
231
231
  }
232
232
  );
233
- }, jt = v($t), Yt = ({ onBackClick: t, sx: o }) => {
234
- const { onEvent: n } = k(), { isDesktop: s, isTablet: a, isMobile: d } = $(), { visibleAccounts: h } = le(), { loadMonthlyCategoryTotals: l, monthlyCategoryTotals: c, getCategoryName: g } = K(), { sortedTransactions: f } = ce(), { selectedDateRange: u, setSelectedDateRange: T } = te(), { isCopyLoaded: r, isInitialized: m, selectedAccounts: _, setSelectedAccounts: p } = ee(), { trends: D } = R(), [w, I] = i.useState(!1), [N, E] = i.useState(!1), [O, M] = i.useState("Chart"), [L, z] = i.useState(""), [F, de] = i.useState(window.innerHeight), j = F - (d ? 315 : 345);
233
+ }, Yt = v(jt), Ut = ({ onBackClick: t, sx: o }) => {
234
+ const { onEvent: n } = k(), { isDesktop: s, isTablet: a, isMobile: h } = $(), { visibleAccounts: u } = ce(), { loadMonthlyCategoryTotals: d, monthlyCategoryTotals: l, getCategoryName: m } = K(), { sortedTransactions: f } = ie(), { selectedDateRange: c, setSelectedDateRange: b } = te(), { isCopyLoaded: r, isInitialized: g, selectedAccounts: T, setSelectedAccounts: p } = ee(), { trends: D } = R(), [w, I] = i.useState(!1), [N, E] = i.useState(!1), [O, M] = i.useState("Chart"), [L, P] = i.useState(""), [G, le] = i.useState(window.innerHeight), j = G - (h ? 315 : 345);
235
235
  i.useEffect(() => {
236
- const S = () => de(window.innerHeight);
236
+ const S = () => le(window.innerHeight);
237
237
  return window.addEventListener("resize", S), () => window.removeEventListener("resize", S);
238
238
  }, []), i.useEffect(() => {
239
- p(h);
240
- }, [h]), i.useEffect(() => {
241
- m && l(
242
- _,
243
- u.start,
244
- u.end
239
+ p(u);
240
+ }, [u]), i.useEffect(() => {
241
+ g && d(
242
+ T,
243
+ c.start,
244
+ c.end
245
245
  ).finally(() => {
246
246
  I(!0);
247
247
  });
248
- }, [m, _, u]);
248
+ }, [g, T, c]);
249
249
  const ne = i.useMemo(() => {
250
250
  if (!w) return { stackedDatasets: [], unstackedDatasets: [] };
251
251
  const S = tt(
252
- c,
253
- u.start,
254
- u.end
252
+ l,
253
+ c.start,
254
+ c.end
255
255
  ), H = L.length ? S.filter(
256
- (G) => G.top_level_category_guid === L || G.category_guid === L
256
+ (B) => B.top_level_category_guid === L || B.category_guid === L
257
257
  ) : rt(S);
258
258
  return {
259
259
  stackedDatasets: H.filter(at),
260
260
  unstackedDatasets: H.filter(it)
261
261
  };
262
- }, [c, L, u]), P = (S, H) => {
262
+ }, [l, L, c]), F = (S, H) => {
263
263
  M(H ?? O), n(y.TRENDS_CLICK_TOGGLE_VIEW);
264
- }, he = (S) => {
265
- const H = xe(S?.[0], 1), G = S?.[1], ae = pe(G, H);
266
- T({ start: H, end: G }), n(y.TRENDS_CLICK_TIME_WINDOW, {
267
- time_period: ae + "M"
264
+ }, de = (S) => {
265
+ const H = ve(S?.[0], 1), B = S?.[1], ge = pe(B, H);
266
+ b({ start: H, end: B }), n(y.TRENDS_CLICK_TIME_WINDOW, {
267
+ time_period: ge + "M"
268
268
  });
269
269
  }, Y = () => {
270
270
  n(y.TRENDS_CLICK_FILTER);
271
271
  }, oe = (S) => {
272
- z(S);
273
- }, ue = (S) => {
274
- z(S), n(y.TRENDS_CLICK_LEGEND, { category: g(S) });
272
+ P(S);
273
+ }, he = (S) => {
274
+ P(S), n(y.TRENDS_CLICK_LEGEND, { category: m(S) });
275
275
  }, se = (S) => {
276
- n(y.TRENDS_HOVER_LEGEND, { category: g(S) });
276
+ n(y.TRENDS_HOVER_LEGEND, { category: m(S) });
277
277
  }, re = (S) => {
278
278
  n(y.TRENDS_HOVER_AREA, { category: S });
279
- }, me = (S) => {
279
+ }, ue = (S) => {
280
280
  n(y.TRENDS_HOVER_POINT, { category: S });
281
281
  };
282
- return !r || !m || !w ? /* @__PURE__ */ e(J, {}) : /* @__PURE__ */ C(
282
+ return !r || !g || !w ? /* @__PURE__ */ e(J, {}) : /* @__PURE__ */ C(
283
283
  Ne,
284
284
  {
285
- accountOptions: h,
286
- calendarActions: { onRangeChanged: he },
287
- dateRange: u,
285
+ accountOptions: u,
286
+ calendarActions: { onRangeChanged: de },
287
+ dateRange: c,
288
288
  dateRangeVariant: "timeframebuttons",
289
289
  onAccountsFilterClick: Y,
290
290
  onBackClick: t,
@@ -292,7 +292,7 @@ const Ge = ({ selectedTab: t, onTabChange: o }) => /* @__PURE__ */ e(
292
292
  title: D.title,
293
293
  children: [
294
294
  /* @__PURE__ */ C(
295
- b,
295
+ _,
296
296
  {
297
297
  sx: {
298
298
  // eslint-disable-next-line no-nested-ternary
@@ -300,39 +300,39 @@ const Ge = ({ selectedTab: t, onTabChange: o }) => /* @__PURE__ */ e(
300
300
  },
301
301
  children: [
302
302
  /* @__PURE__ */ C(
303
- b,
303
+ _,
304
304
  {
305
305
  flexDirection: "row",
306
306
  justifyContent: "space-between",
307
- sx: { pb: d ? 12 : 24, pt: d ? 24 : 48 },
307
+ sx: { pb: h ? 12 : 24, pt: h ? 24 : 48 },
308
308
  children: [
309
309
  /* @__PURE__ */ e(
310
310
  Be,
311
311
  {
312
312
  selectedCategoryGuid: L,
313
- selectedDateRange: u
313
+ selectedDateRange: c
314
314
  }
315
315
  ),
316
- /* @__PURE__ */ e(Ge, { onTabChange: P, selectedTab: O })
316
+ /* @__PURE__ */ e(Ge, { onTabChange: F, selectedTab: O })
317
317
  ]
318
318
  }
319
319
  ),
320
- /* @__PURE__ */ C(b, { alignItems: "center", flexDirection: "row", width: "100%", children: [
321
- /* @__PURE__ */ e(W, { flexGrow: 1, children: L && /* @__PURE__ */ C(ge, { onClick: () => z(""), sx: { p: 0, pr: 5 }, children: [
322
- /* @__PURE__ */ e(ie, { name: "arrow_back" }),
320
+ /* @__PURE__ */ C(_, { alignItems: "center", flexDirection: "row", width: "100%", children: [
321
+ /* @__PURE__ */ e(W, { flexGrow: 1, children: L && /* @__PURE__ */ C(me, { onClick: () => P(""), sx: { p: 0, pr: 5 }, children: [
322
+ /* @__PURE__ */ e(ae, { name: "arrow_back" }),
323
323
  D.all_categories
324
324
  ] }) }),
325
- /* @__PURE__ */ e(ge, { onClick: () => E(!0), sx: { px: 5 }, children: `${D.view_transactions} (${f.length})` })
325
+ /* @__PURE__ */ e(me, { onClick: () => E(!0), sx: { px: 5 }, children: `${D.view_transactions} (${f.length})` })
326
326
  ] }),
327
327
  /* @__PURE__ */ C(W, { children: [
328
328
  O === "Chart" && /* @__PURE__ */ e(
329
329
  nt,
330
330
  {
331
331
  availableHeight: j,
332
- onClickLegend: ue,
332
+ onClickLegend: he,
333
333
  onHoverArea: re,
334
334
  onHoverLegend: se,
335
- onHoverPoint: me,
335
+ onHoverPoint: ue,
336
336
  stackedDatasets: ne.stackedDatasets,
337
337
  unstackedDatasets: ne.unstackedDatasets
338
338
  }
@@ -340,10 +340,10 @@ const Ge = ({ selectedTab: t, onTabChange: o }) => /* @__PURE__ */ e(
340
340
  O === "Table" && /* @__PURE__ */ e(
341
341
  ze,
342
342
  {
343
- monthlyCategoryTotals: c,
343
+ monthlyCategoryTotals: l,
344
344
  onClickRow: oe,
345
345
  selectedCategory: L,
346
- selectedDateRange: u
346
+ selectedDateRange: c
347
347
  }
348
348
  )
349
349
  ] })
@@ -351,10 +351,10 @@ const Ge = ({ selectedTab: t, onTabChange: o }) => /* @__PURE__ */ e(
351
351
  }
352
352
  ),
353
353
  /* @__PURE__ */ e(
354
- jt,
354
+ Yt,
355
355
  {
356
356
  categoryGuid: L,
357
- dateRange: u,
357
+ dateRange: c,
358
358
  isOpen: N,
359
359
  onClose: () => E(!1)
360
360
  }
@@ -362,7 +362,7 @@ const Ge = ({ selectedTab: t, onTabChange: o }) => /* @__PURE__ */ e(
362
362
  ]
363
363
  }
364
364
  );
365
- }, ao = v(Yt), Ut = () => {
365
+ }, io = v(Ut), Xt = () => {
366
366
  const t = Oe(), { monthlyCategoryTotals: o } = K(), { trends: n } = R(), s = ct(o);
367
367
  return /* @__PURE__ */ e(
368
368
  ye,
@@ -380,37 +380,37 @@ const Ge = ({ selectedTab: t, onTabChange: o }) => /* @__PURE__ */ e(
380
380
  valueFormatterString: "0,0"
381
381
  }
382
382
  );
383
- }, Xt = v(Ut), Zt = ({ onPrimaryCtaClick: t, sx: o }) => {
384
- const { visibleAccounts: n } = le(), { loadMonthlyCategoryTotals: s, monthlyTotalsLoaded: a } = K(), { isInitialized: d } = Te(), { trends: h } = R(), { isCopyLoaded: l, selectedAccounts: c, setSelectedAccounts: g } = ee();
383
+ }, Zt = v(Xt), Qt = ({ onPrimaryCtaClick: t, sx: o }) => {
384
+ const { visibleAccounts: n } = ce(), { loadMonthlyCategoryTotals: s, monthlyTotalsLoaded: a } = K(), { isInitialized: h } = Te(), { trends: u } = R(), { isCopyLoaded: d, selectedAccounts: l, setSelectedAccounts: m } = ee();
385
385
  return i.useEffect(() => {
386
- g(n);
386
+ m(n);
387
387
  }, [n]), i.useEffect(() => {
388
- d && s(c).finally();
389
- }, [d, c]), !l || !d ? /* @__PURE__ */ e(J, {}) : /* @__PURE__ */ e(
390
- Ct,
388
+ h && s(l).finally();
389
+ }, [h, l]), !d || !h ? /* @__PURE__ */ e(J, {}) : /* @__PURE__ */ e(
390
+ ft,
391
391
  {
392
392
  onPrimaryCtaClick: t,
393
- primaryCtaLabel: h.primary_cta,
394
- subTitle: h.sub_title,
393
+ primaryCtaLabel: u.primary_cta,
394
+ subTitle: u.sub_title,
395
395
  sx: o,
396
- title: h.mini_title,
397
- children: a ? /* @__PURE__ */ e(Xt, {}) : /* @__PURE__ */ e(J, {})
396
+ title: u.mini_title,
397
+ children: a ? /* @__PURE__ */ e(Zt, {}) : /* @__PURE__ */ e(J, {})
398
398
  }
399
399
  );
400
- }, io = v(Zt), Qt = 70, Ie = ({
400
+ }, co = v(Qt), qt = 70, Ee = ({
401
401
  title: t,
402
402
  totalAmount: o,
403
403
  transactionType: n,
404
404
  percentage: s,
405
405
  secondaryLabel: a,
406
- shouldDisplayPercentage: d
406
+ shouldDisplayPercentage: h
407
407
  }) => {
408
- const { availableWidth: h } = ht(), l = i.useRef(null), c = i.useRef(null), g = wt(Number(Math.abs(s)), {
408
+ const { availableWidth: u } = ht(), d = i.useRef(null), l = i.useRef(null), m = Dt(Number(Math.abs(s)), {
409
409
  style: "percent",
410
410
  minimumIntegerDigits: 1
411
- }), f = h === 288 && Z(o, "0,0.00").length > 10 ? Z(o, "0,0") : Z(o, "0,0.00"), u = n === "spending" ? s > 0 : s >= 0, T = n === "spending" ? "error.main" : "success.main", r = n === "spending" ? "success.main" : "text.secondary", m = l?.current, _ = c?.current, p = m && _ ? m.scrollWidth > _.clientWidth - Qt : !1;
411
+ }), f = u === 288 && Z(o, "0,0.00").length > 10 ? Z(o, "0,0") : Z(o, "0,0.00"), c = n === "spending" ? s > 0 : s >= 0, b = n === "spending" ? "error.main" : "success.main", r = n === "spending" ? "success.main" : "text.secondary", g = d?.current, T = l?.current, p = g && T ? g.scrollWidth > T.clientWidth - qt : !1;
412
412
  return /* @__PURE__ */ C(
413
- b,
413
+ _,
414
414
  {
415
415
  sx: {
416
416
  border: 1,
@@ -423,7 +423,7 @@ const Ge = ({ selectedTab: t, onTabChange: o }) => /* @__PURE__ */ e(
423
423
  },
424
424
  children: [
425
425
  /* @__PURE__ */ C(
426
- b,
426
+ _,
427
427
  {
428
428
  sx: {
429
429
  alignItems: "center",
@@ -432,17 +432,17 @@ const Ge = ({ selectedTab: t, onTabChange: o }) => /* @__PURE__ */ e(
432
432
  },
433
433
  children: [
434
434
  /* @__PURE__ */ e(X, { color: "text.secondary", variant: "caption", children: t }),
435
- d && /* @__PURE__ */ C(b, { sx: { alignItems: "center", flexDirection: "row", gap: 4 }, children: [
436
- u ? /* @__PURE__ */ e(Tt, { size: 20, sx: { color: T } }) : /* @__PURE__ */ e(yt, { size: 20, sx: { color: r } }),
435
+ h && /* @__PURE__ */ C(_, { sx: { alignItems: "center", flexDirection: "row", gap: 4 }, children: [
436
+ c ? /* @__PURE__ */ e(yt, { size: 20, sx: { color: b } }) : /* @__PURE__ */ e(_t, { size: 20, sx: { color: r } }),
437
437
  /* @__PURE__ */ e(
438
438
  X,
439
439
  {
440
440
  sx: {
441
- color: u ? T : r,
441
+ color: c ? b : r,
442
442
  fontWeight: 600
443
443
  },
444
444
  variant: "body2",
445
- children: g
445
+ children: m
446
446
  }
447
447
  )
448
448
  ] })
@@ -450,9 +450,9 @@ const Ge = ({ selectedTab: t, onTabChange: o }) => /* @__PURE__ */ e(
450
450
  }
451
451
  ),
452
452
  /* @__PURE__ */ C(
453
- b,
453
+ _,
454
454
  {
455
- ref: c,
455
+ ref: l,
456
456
  sx: {
457
457
  alignItems: "center",
458
458
  flexDirection: "row",
@@ -462,15 +462,15 @@ const Ge = ({ selectedTab: t, onTabChange: o }) => /* @__PURE__ */ e(
462
462
  /* @__PURE__ */ e(
463
463
  W,
464
464
  {
465
- ref: l,
465
+ ref: d,
466
466
  sx: { overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" },
467
- children: /* @__PURE__ */ e(Le, { children: f })
467
+ children: /* @__PURE__ */ e(xe, { children: f })
468
468
  }
469
469
  ),
470
- d && h >= 450 && !p && /* @__PURE__ */ e(
470
+ h && u >= 450 && !p && /* @__PURE__ */ e(
471
471
  X,
472
472
  {
473
- color: u ? T : r,
473
+ color: c ? b : r,
474
474
  variant: "caption",
475
475
  children: a
476
476
  }
@@ -481,50 +481,50 @@ const Ge = ({ selectedTab: t, onTabChange: o }) => /* @__PURE__ */ e(
481
481
  ]
482
482
  }
483
483
  );
484
- }, qt = v(() => {
484
+ }, Jt = v(() => {
485
485
  const { trends: t } = R();
486
- return /* @__PURE__ */ C(b, { sx: { alignItems: "start", flexDirection: "row", gap: 12 }, children: [
487
- /* @__PURE__ */ e(_t, { size: 32 }),
488
- /* @__PURE__ */ C(b, { children: [
486
+ return /* @__PURE__ */ C(_, { sx: { alignItems: "start", flexDirection: "row", gap: 12 }, children: [
487
+ /* @__PURE__ */ e(bt, { size: 32 }),
488
+ /* @__PURE__ */ C(_, { children: [
489
489
  /* @__PURE__ */ e(X, { fontWeight: 600, variant: "body1", children: t.zero_state_content_header }),
490
490
  /* @__PURE__ */ e(X, { color: "text.secondary", variant: "subtitle2", children: t.zero_state_content_description })
491
491
  ] })
492
492
  ] });
493
- }), co = v(({ onCtaClick: t }) => {
494
- const { visibleAccounts: o } = le(), { onEvent: n } = k(), { monthlyCategoryTotals: s, loadMonthlyCategoryTotals: a, monthlyTotalsLoaded: d } = K(), h = {
495
- start: ft(/* @__PURE__ */ new Date(), 1),
493
+ }), lo = v(({ onCtaClick: t }) => {
494
+ const { visibleAccounts: o } = ce(), { onEvent: n } = k(), { monthlyCategoryTotals: s, loadMonthlyCategoryTotals: a, monthlyTotalsLoaded: h } = K(), u = {
495
+ start: Tt(/* @__PURE__ */ new Date(), 1),
496
496
  end: /* @__PURE__ */ new Date()
497
- }, { trends: l } = R(), { selectedAccounts: c, setSelectedAccounts: g, isInitialized: f } = ee();
497
+ }, { trends: d } = R(), { selectedAccounts: l, setSelectedAccounts: m, isInitialized: f } = ee();
498
498
  i.useEffect(() => {
499
- g(o);
499
+ m(o);
500
500
  }, [o]), i.useEffect(() => {
501
- f && a(c, h.start).then(() => {
501
+ f && a(l, u.start).then(() => {
502
502
  n(y.TRENDS_LOAD_WIDGET, {
503
503
  state: o?.length ? "default" : "zeroState"
504
504
  });
505
505
  });
506
- }, [f, c]);
507
- const { spendingData: u, incomeData: T } = i.useMemo(
506
+ }, [f, l]);
507
+ const { spendingData: c, incomeData: b } = i.useMemo(
508
508
  () => ({
509
- spendingData: Me(s, h),
510
- incomeData: Ae(s, h)
509
+ spendingData: Ae(s, u),
510
+ incomeData: Re(s, u)
511
511
  }),
512
- [s, h]
513
- ), [r, m] = u, [_, p] = T, D = we(m.y, r.y), w = we(p.y, _.y), I = f && !o?.length, N = () => {
512
+ [s, u]
513
+ ), [r, g] = c, [T, p] = b, D = De(g.y, r.y), w = De(p.y, T.y), I = f && !o?.length, N = () => {
514
514
  n(
515
515
  I ? y.TRENDS_CLICK_GET_STARTED : y.TRENDS_CLICK_VIEW_MORE
516
516
  ), t();
517
517
  };
518
- return !d || !f ? /* @__PURE__ */ e(J, {}) : /* @__PURE__ */ e(
519
- Dt,
518
+ return !h || !f ? /* @__PURE__ */ e(J, {}) : /* @__PURE__ */ e(
519
+ It,
520
520
  {
521
521
  className: "mx-trends-microwidget",
522
- ctaLabel: l.micro_primary_cta_label,
522
+ ctaLabel: d.micro_primary_cta_label,
523
523
  onCTAClick: N,
524
- subHeader: I ? void 0 : l.micro_subheader,
525
- title: l.title,
526
- children: I ? /* @__PURE__ */ e(qt, {}) : /* @__PURE__ */ C(
527
- b,
524
+ subHeader: I ? void 0 : d.micro_subheader,
525
+ title: d.title,
526
+ children: I ? /* @__PURE__ */ e(Jt, {}) : /* @__PURE__ */ C(
527
+ _,
528
528
  {
529
529
  sx: {
530
530
  alignItems: "stretch",
@@ -533,23 +533,23 @@ const Ge = ({ selectedTab: t, onTabChange: o }) => /* @__PURE__ */ e(
533
533
  },
534
534
  children: [
535
535
  /* @__PURE__ */ e(
536
- Ie,
536
+ Ee,
537
537
  {
538
538
  percentage: D,
539
- secondaryLabel: l.micro_secondary_label,
540
- shouldDisplayPercentage: m.y !== 0 && r.y !== 0,
541
- title: l.spending_label,
542
- totalAmount: m.y,
539
+ secondaryLabel: d.micro_secondary_label,
540
+ shouldDisplayPercentage: g.y !== 0 && r.y !== 0,
541
+ title: d.spending_label,
542
+ totalAmount: g.y,
543
543
  transactionType: "spending"
544
544
  }
545
545
  ),
546
546
  /* @__PURE__ */ e(
547
- Ie,
547
+ Ee,
548
548
  {
549
549
  percentage: w,
550
- secondaryLabel: l.micro_secondary_label,
551
- shouldDisplayPercentage: p.y !== 0 && _.y !== 0,
552
- title: l.income_label,
550
+ secondaryLabel: d.micro_secondary_label,
551
+ shouldDisplayPercentage: p.y !== 0 && T.y !== 0,
552
+ title: d.income_label,
553
553
  totalAmount: p.y,
554
554
  transactionType: "income"
555
555
  }
@@ -559,17 +559,17 @@ const Ge = ({ selectedTab: t, onTabChange: o }) => /* @__PURE__ */ e(
559
559
  )
560
560
  }
561
561
  );
562
- }), Jt = v(
562
+ }), en = v(
563
563
  ({ isExpanded: t, onClick: o }) => {
564
564
  const n = Ve();
565
- return /* @__PURE__ */ e(Lt, { sx: { bgcolor: "background.paper" }, children: /* @__PURE__ */ e(xt, { onClick: o, sx: { justifyContent: "center" }, children: /* @__PURE__ */ C(
566
- b,
565
+ return /* @__PURE__ */ e(xt, { sx: { bgcolor: "background.paper" }, children: /* @__PURE__ */ e(vt, { onClick: o, sx: { justifyContent: "center" }, children: /* @__PURE__ */ C(
566
+ _,
567
567
  {
568
568
  sx: { color: n.palette.primary.main, flexDirection: "row", alignItems: "center" },
569
569
  children: [
570
- /* @__PURE__ */ e(Mt, { children: /* @__PURE__ */ e(Q, { bold: !0, variant: "body2", children: t ? "View less" : "View more" }) }),
571
- /* @__PURE__ */ e(vt, { sx: { color: n.palette.primary.main }, children: t ? /* @__PURE__ */ e(bt, {}) : /* @__PURE__ */ e(
572
- St,
570
+ /* @__PURE__ */ e(At, { children: /* @__PURE__ */ e(Q, { bold: !0, variant: "body2", children: t ? "View less" : "View more" }) }),
571
+ /* @__PURE__ */ e(Mt, { sx: { color: n.palette.primary.main }, children: t ? /* @__PURE__ */ e(St, {}) : /* @__PURE__ */ e(
572
+ wt,
573
573
  {
574
574
  sx: {
575
575
  transition: "transform 0.3s ease-in-out",
@@ -581,115 +581,115 @@ const Ge = ({ selectedTab: t, onTabChange: o }) => /* @__PURE__ */ e(
581
581
  }
582
582
  ) }) });
583
583
  }
584
- ), Ee = v(
584
+ ), Le = v(
585
585
  ({
586
586
  totalAmount: t,
587
587
  guid: o,
588
588
  name: n,
589
589
  transactions: s,
590
590
  onClick: a,
591
- isLastItem: d = !1,
592
- showDivider: h = !0
591
+ isLastItem: h = !1,
592
+ showDivider: u = !0
593
593
  }) => {
594
- const { trends: l } = R(), { onEvent: c } = k(), g = `${s.length} ${s.length === 1 ? l.transaction : l.transactions}`, f = () => {
595
- a?.(), c(y.TRENDS_CLICK_LIST_ITEM, {
594
+ const { trends: d } = R(), { onEvent: l } = k(), m = `${s.length} ${s.length === 1 ? d.transaction : d.transactions}`, f = () => {
595
+ a?.(), l(y.TRENDS_CLICK_LIST_ITEM, {
596
596
  ...A,
597
597
  listItem: n
598
598
  });
599
599
  };
600
600
  return /* @__PURE__ */ C(i.Fragment, { children: [
601
601
  /* @__PURE__ */ e(
602
- ve,
602
+ Me,
603
603
  {
604
604
  leftIcon: o ? /* @__PURE__ */ e(fe, { categoryGuid: o }) : void 0,
605
605
  onClick: f,
606
606
  rightContent: Z(Math.abs(t), "0,0.00"),
607
607
  rightIcon: a ? /* @__PURE__ */ e(Je, {}) : void 0,
608
- subtitle: g,
608
+ subtitle: m,
609
609
  title: n
610
610
  }
611
611
  ),
612
- h && /* @__PURE__ */ e(At, { sx: { ml: d ? 24 : 68 } })
612
+ u && /* @__PURE__ */ e(Rt, { sx: { ml: h ? 24 : 68 } })
613
613
  ] }, o);
614
614
  }
615
- ), en = v(
615
+ ), tn = v(
616
616
  ({ availableHeight: t = 0, onCategoryClick: o }) => {
617
- const { collapsedCategories: n, visibleCategories: s, setVisibleListLength: a } = te(), { isLargeDesktop: d, isDesktop: h } = $(), { trends: l } = R(), { onEvent: c } = k(), [g, f] = i.useState(!1), u = h || d;
617
+ const { collapsedCategories: n, visibleCategories: s, setVisibleListLength: a } = te(), { isLargeDesktop: h, isDesktop: u } = $(), { trends: d } = R(), { onEvent: l } = k(), [m, f] = i.useState(!1), c = u || h;
618
618
  i.useEffect(() => {
619
- const m = Math.floor(t / 64) - 1, _ = s.length + n.length;
620
- m !== s.length && (a(u ? Math.max(m, 5) : 5), f(m >= _));
619
+ const g = Math.floor(t / 64) - 1, T = s.length + n.length;
620
+ g !== s.length && (a(c ? Math.max(g, 5) : 5), f(g >= T));
621
621
  }, [t]);
622
- const T = () => {
623
- f(!g), c(y.TRENDS_CLICK_VIEW_MORE, {
622
+ const b = () => {
623
+ f(!m), l(y.TRENDS_CLICK_VIEW_MORE, {
624
624
  ...A
625
625
  });
626
- }, r = s.length + (g ? n.length : 0);
627
- return /* @__PURE__ */ e(b, { sx: { bgColor: "background.paper", width: "100%" }, children: /* @__PURE__ */ C(Et, { children: [
628
- /* @__PURE__ */ e(b, { sx: { pb: 4, pt: 16, px: 16 }, children: /* @__PURE__ */ e(Le, { children: l.categories }) }),
629
- s.map((m, _) => /* @__PURE__ */ e(
630
- Ee,
626
+ }, r = s.length + (m ? n.length : 0);
627
+ return /* @__PURE__ */ e(_, { sx: { bgColor: "background.paper", width: "100%" }, children: /* @__PURE__ */ C(Lt, { children: [
628
+ /* @__PURE__ */ e(_, { sx: { pb: 4, pt: 16, px: 16 }, children: /* @__PURE__ */ e(xe, { children: d.categories }) }),
629
+ s.map((g, T) => /* @__PURE__ */ e(
630
+ Le,
631
631
  {
632
- ...m,
633
- isLastItem: _ === r - 1,
634
- onClick: m.transactions.length > 0 ? () => o(m) : void 0,
632
+ ...g,
633
+ isLastItem: T === r - 1,
634
+ onClick: g.transactions.length > 0 ? () => o(g) : void 0,
635
635
  showDivider: !0
636
636
  },
637
- m.guid
637
+ g.guid
638
638
  )),
639
639
  /* @__PURE__ */ e(
640
- It,
640
+ Et,
641
641
  {
642
- in: g,
642
+ in: m,
643
643
  sx: { "&.MuiCollapse-root .MuiListItemButton-root": { paddingLeft: 24 } },
644
- children: n.map((m, _) => {
645
- const p = s.length + _;
644
+ children: n.map((g, T) => {
645
+ const p = s.length + T;
646
646
  return /* @__PURE__ */ e(
647
- Ee,
647
+ Le,
648
648
  {
649
- ...m,
649
+ ...g,
650
650
  isLastItem: p === r - 1,
651
- onClick: m.transactions.length > 0 ? () => o(m) : void 0,
651
+ onClick: g.transactions.length > 0 ? () => o(g) : void 0,
652
652
  showDivider: !0
653
653
  },
654
- m.guid
654
+ g.guid
655
655
  );
656
656
  })
657
657
  }
658
658
  ),
659
- n.length > 0 && /* @__PURE__ */ e(Jt, { isExpanded: g, onClick: T })
659
+ n.length > 0 && /* @__PURE__ */ e(en, { isExpanded: m, onClick: b })
660
660
  ] }) });
661
661
  }
662
- ), tn = ({ beats: t, onInsightCardClick: o }) => {
663
- const n = Rt(), { onEvent: s } = k(), { is_mobile_webview: a } = Re(), { isMobile: d, isDesktop: h, isLargeDesktop: l } = $(), { beatStore: c, endpoint: g, sessionToken: f } = Te(), u = n.palette.mode === "dark", T = h || l, r = T || d ? 1 : 2, m = () => null, _ = (I) => {
662
+ ), nn = ({ beats: t, onInsightCardClick: o }) => {
663
+ const n = kt(), { onEvent: s } = k(), { isMobile: a, isDesktop: h, isLargeDesktop: u } = $(), { beatStore: d, endpoint: l, sessionToken: m } = Te(), f = n.palette.mode === "dark", c = h || u, b = c || a ? 1 : 2, r = () => null, g = (I) => {
664
664
  o?.(I), s(y.TRENDS_CLICK_INSIGHT, A);
665
- }, p = T ? 200 : 170, D = T ? 170 : 124, w = t.length > 0 ? p : D;
666
- return /* @__PURE__ */ e(kt, { sx: { height: w }, children: /* @__PURE__ */ e(
667
- pt,
665
+ }, T = c ? 200 : 170, p = c ? 170 : 124, D = c ? 56 : 0, w = t.length > 0 ? T + D : p;
666
+ return /* @__PURE__ */ e(Nt, { sx: { height: w }, children: /* @__PURE__ */ e(
667
+ Ct,
668
668
  {
669
- areBeatsLoading: c.isLoading,
669
+ areBeatsLoading: d.isLoading,
670
670
  beats: t,
671
- endpoint: g,
672
- heightOverrides: T && a ? p : void 0,
673
- logOutUser: m,
674
- onCardClick: _,
671
+ endpoint: l,
672
+ heightOverrides: c && t.length > 0 ? T : void 0,
673
+ logOutUser: r,
674
+ onCardClick: g,
675
675
  showBorder: !0,
676
676
  showCTAColocatedWithText: !1,
677
677
  showCarouselControls: !0,
678
- showHeader: T,
678
+ showHeader: c,
679
679
  showIcon: !0,
680
680
  showWithMargin: !1,
681
- token: f,
682
- useDarkMode: u,
681
+ token: m,
682
+ useDarkMode: f,
683
683
  userHasFullInsightFeedBeats: !1,
684
684
  variant: "outlined",
685
- visibleCardsCount: r
685
+ visibleCardsCount: b
686
686
  }
687
687
  ) });
688
- }, nn = v(tn), on = v(({ chartLabel: t, chartColor: o }) => {
688
+ }, on = v(nn), sn = v(({ chartLabel: t, chartColor: o }) => {
689
689
  const { onEvent: n } = k(), {
690
690
  categoryDetailsChartData: { monthlyAmounts: s, tooltipLabels: a }
691
691
  } = te();
692
- return /* @__PURE__ */ e(b, { sx: { pt: 12, width: "100%" }, children: /* @__PURE__ */ e(
692
+ return /* @__PURE__ */ e(_, { sx: { pt: 12, width: "100%" }, children: /* @__PURE__ */ e(
693
693
  ye,
694
694
  {
695
695
  baseline: "min",
@@ -718,13 +718,13 @@ const Ge = ({ selectedTab: t, onTabChange: o }) => /* @__PURE__ */ e(
718
718
  valueFormatterString: "0,0"
719
719
  }
720
720
  ) });
721
- }), sn = v(({ onClose: t }) => {
722
- const o = Ve(), { onEvent: n } = k(), { common: s, trends: a } = R(), { selectedCategoryData: d, selectedDateRangeMonthRange: h } = te(), { sortedTransactions: l } = ce(), [c, g] = i.useState(null);
723
- if (!d)
721
+ }), rn = v(({ onClose: t }) => {
722
+ const o = Ve(), { onEvent: n } = k(), { common: s, trends: a } = R(), { selectedCategoryData: h, selectedDateRangeMonthRange: u } = te(), { sortedTransactions: d } = ie(), [l, m] = i.useState(null);
723
+ if (!h)
724
724
  return null;
725
- const { guid: f, name: u, is_income: T, totalAmount: r } = d, m = T ? a.category_income : a.category_spending, _ = Ht(f, o), p = T ? a.income_label : a.spending_label, D = ` ${d.transactions.length === 1 ? a.transaction : a.transactions} (${d.transactions.length})`, w = i.useMemo(
726
- () => l.find((E) => E.guid === c),
727
- [c, l]
725
+ const { guid: f, name: c, is_income: b, totalAmount: r } = h, g = b ? a.category_income : a.category_spending, T = Wt(f, o), p = b ? a.income_label : a.spending_label, D = ` ${h.transactions.length === 1 ? a.transaction : a.transactions} (${h.transactions.length})`, w = i.useMemo(
726
+ () => d.find((E) => E.guid === l),
727
+ [l, d]
728
728
  ), I = (E) => E.category_guid === f || E.top_level_category_guid === f, N = () => {
729
729
  t?.(), n(y.TRENDS_CLICK_BACK, A);
730
730
  };
@@ -735,23 +735,23 @@ const Ge = ({ selectedTab: t, onTabChange: o }) => /* @__PURE__ */ e(
735
735
  isOpen: !0,
736
736
  onClose: N,
737
737
  shouldShowHeaderShadow: !0,
738
- title: m,
738
+ title: g,
739
739
  children: [
740
- /* @__PURE__ */ C(b, { sx: { alignItems: "center", height: "100%" }, children: [
741
- /* @__PURE__ */ C(Nt, { sx: { borderRadius: 0, pb: 4, pt: 16, width: "100%" }, children: [
740
+ /* @__PURE__ */ C(_, { sx: { alignItems: "center", height: "100%" }, children: [
741
+ /* @__PURE__ */ C(Ht, { sx: { borderRadius: 0, pb: 4, pt: 16, width: "100%" }, children: [
742
742
  /* @__PURE__ */ e(
743
- ve,
743
+ Me,
744
744
  {
745
745
  leftIcon: /* @__PURE__ */ e(fe, { categoryGuid: f }),
746
746
  rightContent: Z(Math.abs(r), "0,0.00"),
747
- subtitle: h,
748
- title: u
747
+ subtitle: u,
748
+ title: c
749
749
  }
750
750
  ),
751
- /* @__PURE__ */ e(on, { chartColor: _, chartLabel: p }),
752
- /* @__PURE__ */ C(b, { alignItems: "center", direction: "row", justifyContent: "space-between", sx: { mx: 24 }, children: [
751
+ /* @__PURE__ */ e(sn, { chartColor: T, chartLabel: p }),
752
+ /* @__PURE__ */ C(_, { alignItems: "center", direction: "row", justifyContent: "space-between", sx: { mx: 24 }, children: [
753
753
  /* @__PURE__ */ e(Q, { bold: !0, variant: "body1", children: D }),
754
- /* @__PURE__ */ e(Wt, { filter: I })
754
+ /* @__PURE__ */ e(Ot, { filter: I })
755
755
  ] })
756
756
  ] }),
757
757
  /* @__PURE__ */ e(
@@ -760,7 +760,7 @@ const Ge = ({ selectedTab: t, onTabChange: o }) => /* @__PURE__ */ e(
760
760
  bgcolor: "transparent",
761
761
  filter: I,
762
762
  height: "calc(100vh - 475px)",
763
- onClick: g
763
+ onClick: m
764
764
  }
765
765
  )
766
766
  ] }),
@@ -769,7 +769,7 @@ const Ge = ({ selectedTab: t, onTabChange: o }) => /* @__PURE__ */ e(
769
769
  {
770
770
  ariaLabelClose: s.close_aria,
771
771
  isOpen: !!w,
772
- onClose: () => g(""),
772
+ onClose: () => m(""),
773
773
  title: a.transaction,
774
774
  children: w && /* @__PURE__ */ e(He, { transaction: w })
775
775
  }
@@ -777,41 +777,41 @@ const Ge = ({ selectedTab: t, onTabChange: o }) => /* @__PURE__ */ e(
777
777
  ]
778
778
  }
779
779
  );
780
- }), rn = (t, o) => {
781
- const n = Ae(t, o), s = Me(t, o);
780
+ }), an = (t, o) => {
781
+ const n = Re(t, o), s = Ae(t, o);
782
782
  return [n, s].filter((a) => a.length > 0);
783
- }, an = (t, o) => {
784
- const [n, s] = t, a = n, d = s ?? n, h = [];
783
+ }, cn = (t, o) => {
784
+ const [n, s] = t, a = n, h = s ?? n, u = [];
785
785
  if (a) {
786
- const l = a.reduce((c, g) => c + g.y, 0);
787
- h.push({ label: o.income_label, amount: l });
786
+ const d = a.reduce((l, m) => l + m.y, 0);
787
+ u.push({ label: o.income_label, amount: d });
788
788
  }
789
- if (d) {
790
- const l = d.reduce((c, g) => c + g.y, 0);
791
- h.push({ label: o.spending_label, amount: l });
789
+ if (h) {
790
+ const d = h.reduce((l, m) => l + m.y, 0);
791
+ u.push({ label: o.spending_label, amount: d });
792
792
  }
793
- return h;
794
- }, cn = ({
793
+ return u;
794
+ }, ln = ({
795
795
  availableHeight: t = 0,
796
796
  minHeight: o = 500,
797
797
  selectedDateRange: n,
798
798
  totals: s
799
799
  }) => {
800
- const a = Oe(), { onEvent: d } = k(), { trends: h } = R(), { isSmallMobile: l, isMobile: c, isSmallTablet: g, isTablet: f } = $(), u = [a.palette.chart?.chart1, a.palette.chart?.chart2], T = rn(s, n), r = an(T, h), [m, _] = i.useState(0), p = 458, D = 195, w = 56, I = c || l ? D : g || f ? p : m;
800
+ const a = Oe(), { onEvent: h } = k(), { trends: u } = R(), { isSmallMobile: d, isMobile: l, isSmallTablet: m, isTablet: f } = $(), c = [a.palette.chart?.chart1, a.palette.chart?.chart2], b = an(s, n), r = cn(b, u), [g, T] = i.useState(0), p = 458, D = 195, w = 56, I = l || d ? D : m || f ? p : g;
801
801
  return i.useEffect(() => {
802
802
  const E = Math.max(t - w, o);
803
- _(E);
803
+ T(E);
804
804
  }, [t]), /* @__PURE__ */ e(
805
805
  ye,
806
806
  {
807
807
  baseline: "min",
808
- colors: u,
808
+ colors: c,
809
809
  curveType: "bump",
810
- datasets: T,
810
+ datasets: b,
811
811
  height: I,
812
812
  labels: r,
813
813
  onItemClick: () => {
814
- d(y.TRENDS_CLICK_CHART, A);
814
+ h(y.TRENDS_CLICK_CHART, A);
815
815
  },
816
816
  showArea: !0,
817
817
  showAxisHighlight: !0,
@@ -824,7 +824,7 @@ const Ge = ({ selectedTab: t, onTabChange: o }) => /* @__PURE__ */ e(
824
824
  valueFormatterString: "0.0a"
825
825
  }
826
826
  );
827
- }, ln = v(cn), dn = [
827
+ }, dn = v(ln), hn = [
828
828
  "BillAmountNotStandard",
829
829
  "CategorySpendingV2",
830
830
  "CostOfLivingToIncome",
@@ -858,28 +858,28 @@ const Ge = ({ selectedTab: t, onTabChange: o }) => /* @__PURE__ */ e(
858
858
  "WeeklyNewMerchantsV2",
859
859
  "WeeklyNoSpendDays",
860
860
  "WeeklySmallPurchasesSummary"
861
- ], hn = ({ onBackClick: t, onInsightCardClick: o, sx: n }) => {
862
- const { onEvent: s } = k(), { config: a } = Re(), { isLargeDesktop: d, isDesktop: h, isMobile: l } = $(), { visibleAccounts: c } = le(), { loadDateRangeCategoryTotals: g, loadMonthlyCategoryTotals: f, monthlyCategoryTotals: u } = K(), { setFilter: T } = ce(), { selectedDateRange: r, setSelectedCategoryData: m, setSelectedDateRange: _ } = te(), {
861
+ ], un = ({ onBackClick: t, onInsightCardClick: o, sx: n }) => {
862
+ const { onEvent: s } = k(), { config: a } = ut(), { isLargeDesktop: h, isDesktop: u, isMobile: d } = $(), { visibleAccounts: l } = ce(), { loadDateRangeCategoryTotals: m, loadMonthlyCategoryTotals: f, monthlyCategoryTotals: c } = K(), { setFilter: b } = ie(), { selectedDateRange: r, setSelectedCategoryData: g, setSelectedDateRange: T } = te(), {
863
863
  isCopyLoaded: p,
864
864
  isInitialized: D,
865
865
  selectedAccounts: w,
866
866
  selectedAccountGuids: I,
867
867
  setSelectedAccounts: N
868
- } = ee(), { trends: E, connect: O } = R(), { beatStore: M } = Te(), z = Ot() && a.show_insights_widget_in_master, F = h || d, [de, _e] = i.useState(!1), [j, ne] = i.useState(!1), [P, he] = i.useState("Chart"), [Y, oe] = i.useState(""), [ue, se] = i.useState(!1), [re, me] = i.useState(window.innerHeight), S = re - 208, H = re - (z ? 494 : 266), [G, ae] = i.useState(!1), Fe = a.show_connections_widget_in_master ? "buttons" : "no-buttons", be = i.useMemo(
869
- () => c && c.length === 0 || u.length === 0,
870
- [c, u]
868
+ } = ee(), { trends: E, connect: O } = R(), { beatStore: M } = Te(), P = Vt() && a.show_insights_widget_in_master, G = u || h, [le, _e] = i.useState(!1), [j, ne] = i.useState(!1), [F, de] = i.useState("Chart"), [Y, oe] = i.useState(""), [he, se] = i.useState(!1), [re, ue] = i.useState(window.innerHeight), S = G ? 56 : 0, H = re - 208, B = re - (P ? 550 + S : 266), [ge, be] = i.useState(!1), Pe = a.show_connections_widget_in_master ? "buttons" : "no-buttons", Se = i.useMemo(
869
+ () => l && l.length === 0 || c.length === 0,
870
+ [l, c]
871
871
  );
872
872
  i.useEffect(() => {
873
873
  D && M.loadBeats().finally(() => ne(!0));
874
874
  }, [D]);
875
- const Se = i.useMemo(() => j ? M.getFilteredBeats({ templates: dn }) : [], [j]);
875
+ const we = i.useMemo(() => j ? M.getFilteredBeats({ templates: hn }) : [], [j]);
876
876
  i.useEffect(() => {
877
- const x = () => me(window.innerHeight);
877
+ const x = () => ue(window.innerHeight);
878
878
  return window.addEventListener("resize", x), () => window.removeEventListener("resize", x);
879
879
  }, []), i.useEffect(() => {
880
- N(c);
881
- }, [c]), i.useEffect(() => {
882
- D && g(w, r.start, r.end).then(() => {
880
+ N(l);
881
+ }, [l]), i.useEffect(() => {
882
+ D && m(w, r.start, r.end).then(() => {
883
883
  f(
884
884
  w,
885
885
  r.start,
@@ -892,33 +892,33 @@ const Ge = ({ selectedTab: t, onTabChange: o }) => /* @__PURE__ */ e(
892
892
  });
893
893
  });
894
894
  }, [D, w, r]), i.useEffect(() => {
895
- if (u.length !== 0) {
895
+ if (c.length !== 0) {
896
896
  const x = {
897
897
  accounts: I,
898
898
  dateRange: { start: r.start, end: r.end }
899
899
  };
900
- T({
900
+ b({
901
901
  ...x,
902
- custom: (V) => !!u.find(
902
+ custom: (V) => !!c.find(
903
903
  (U) => U.top_level_category_guid === V.top_level_category_guid || U.category_guid === V.category_guid
904
904
  )
905
905
  });
906
906
  }
907
- }, [u]);
908
- const Pe = (x) => {
909
- m(x), se(!0);
907
+ }, [c]);
908
+ const Fe = (x) => {
909
+ g(x), se(!0);
910
910
  }, Ke = () => {
911
- m(null), se(!1);
911
+ g(null), se(!1);
912
912
  }, $e = () => {
913
- ae(!0), s(y.TRENDS_CLICK_CONNECT_ACCOUNTS);
913
+ be(!0), s(y.TRENDS_CLICK_CONNECT_ACCOUNTS);
914
914
  }, je = (x, V) => {
915
- he(V ?? P), s(y.TRENDS_CLICK_TOGGLE_VIEW, {
915
+ de(V ?? F), s(y.TRENDS_CLICK_TOGGLE_VIEW, {
916
916
  ...A,
917
917
  toggleView: V
918
918
  });
919
919
  }, Ye = (x) => {
920
- const V = xe(x?.[0], 1), U = x?.[1], Qe = pe(U, V);
921
- _({ start: V, end: U }), s(y.TRENDS_CLICK_TIME_WINDOW, {
920
+ const V = ve(x?.[0], 1), U = x?.[1], Qe = pe(U, V);
921
+ T({ start: V, end: U }), s(y.TRENDS_CLICK_TIME_WINDOW, {
922
922
  ...A,
923
923
  time_period: Qe + "M"
924
924
  });
@@ -932,43 +932,43 @@ const Ge = ({ selectedTab: t, onTabChange: o }) => /* @__PURE__ */ e(
932
932
  }, Ze = () => {
933
933
  oe(""), s(y.TRENDS_CLICK_ALL_CATEGORIES, A);
934
934
  };
935
- return !p || !de ? /* @__PURE__ */ e(J, {}) : /* @__PURE__ */ C(
935
+ return !p || !le ? /* @__PURE__ */ e(J, {}) : /* @__PURE__ */ C(
936
936
  Ne,
937
937
  {
938
- accountOptions: c,
938
+ accountOptions: l,
939
939
  calendarActions: { onRangeChanged: Ye },
940
940
  dateRange: r,
941
- dateRangeVariant: l ? "timeframetabs" : "timeframebuttons",
941
+ dateRangeVariant: d ? "timeframetabs" : "timeframebuttons",
942
942
  onAccountsFilterClick: Ue,
943
943
  onBackClick: t,
944
944
  sx: n,
945
945
  title: E.title,
946
946
  children: [
947
- be && /* @__PURE__ */ e(
948
- Vt,
947
+ Se && /* @__PURE__ */ e(
948
+ Gt,
949
949
  {
950
950
  header: E.zero_state_content_header,
951
951
  icon: "",
952
952
  onClick: $e,
953
953
  primaryButton: E.empty_state_primary,
954
954
  subText: E.empty_state_sub_text,
955
- sx: { height: S },
956
- variant: Fe
955
+ sx: { height: H },
956
+ variant: Pe
957
957
  }
958
958
  ),
959
- !be && /* @__PURE__ */ C(
960
- b,
959
+ !Se && /* @__PURE__ */ C(
960
+ _,
961
961
  {
962
962
  sx: {
963
- px: l ? 0 : 48
963
+ px: d ? 0 : 48
964
964
  },
965
965
  children: [
966
966
  /* @__PURE__ */ C(
967
- b,
967
+ _,
968
968
  {
969
969
  flexDirection: "row",
970
970
  justifyContent: "space-between",
971
- sx: { pb: l ? 12 : 24, pt: l ? 24 : 48 },
971
+ sx: { pb: d ? 12 : 24, pt: d ? 24 : 48 },
972
972
  children: [
973
973
  /* @__PURE__ */ e(
974
974
  Be,
@@ -977,73 +977,73 @@ const Ge = ({ selectedTab: t, onTabChange: o }) => /* @__PURE__ */ e(
977
977
  selectedDateRange: r
978
978
  }
979
979
  ),
980
- /* @__PURE__ */ e(Ge, { onTabChange: je, selectedTab: P })
980
+ /* @__PURE__ */ e(Ge, { onTabChange: je, selectedTab: F })
981
981
  ]
982
982
  }
983
983
  ),
984
- /* @__PURE__ */ e(b, { alignItems: "center", flexDirection: "row", width: "100%", children: /* @__PURE__ */ e(W, { flexGrow: 1, children: Y && /* @__PURE__ */ C(ge, { onClick: Ze, sx: { p: 0, pr: 5 }, children: [
985
- /* @__PURE__ */ e(ie, { name: "arrow_back" }),
984
+ /* @__PURE__ */ e(_, { alignItems: "center", flexDirection: "row", width: "100%", children: /* @__PURE__ */ e(W, { flexGrow: 1, children: Y && /* @__PURE__ */ C(me, { onClick: Ze, sx: { p: 0, pr: 5 }, children: [
985
+ /* @__PURE__ */ e(ae, { name: "arrow_back" }),
986
986
  E.all_categories
987
987
  ] }) }) }),
988
- /* @__PURE__ */ C(b, { flexDirection: F ? "row" : "column", gap: F ? 48 : 16, children: [
989
- P === "Chart" && /* @__PURE__ */ C(qe, { children: [
990
- /* @__PURE__ */ e(W, { sx: { width: F ? "68%" : "100%" }, children: /* @__PURE__ */ e(
991
- ln,
988
+ /* @__PURE__ */ C(_, { flexDirection: G ? "row" : "column", gap: G ? 48 : 16, children: [
989
+ F === "Chart" && /* @__PURE__ */ C(qe, { children: [
990
+ /* @__PURE__ */ e(W, { sx: { width: G ? "68%" : "100%" }, children: /* @__PURE__ */ e(
991
+ dn,
992
992
  {
993
- availableHeight: S,
993
+ availableHeight: H,
994
994
  minHeight: 450,
995
995
  selectedDateRange: r,
996
- totals: u
996
+ totals: c
997
997
  }
998
998
  ) }),
999
- /* @__PURE__ */ C(b, { gap: 16, sx: { width: F ? "32%" : "100%" }, children: [
1000
- z && j && Se.length > 0 && /* @__PURE__ */ e(
1001
- nn,
999
+ /* @__PURE__ */ C(_, { gap: 16, sx: { width: G ? "32%" : "100%" }, children: [
1000
+ P && j && we.length > 0 && /* @__PURE__ */ e(
1001
+ on,
1002
1002
  {
1003
- beats: Se,
1003
+ beats: we,
1004
1004
  onInsightCardClick: o
1005
1005
  }
1006
1006
  ),
1007
1007
  /* @__PURE__ */ e(
1008
- en,
1008
+ tn,
1009
1009
  {
1010
- availableHeight: H,
1011
- onCategoryClick: Pe
1010
+ availableHeight: B,
1011
+ onCategoryClick: Fe
1012
1012
  }
1013
1013
  )
1014
1014
  ] })
1015
1015
  ] }),
1016
- P === "Table" && /* @__PURE__ */ e(W, { sx: { width: "100%" }, children: /* @__PURE__ */ e(
1016
+ F === "Table" && /* @__PURE__ */ e(W, { sx: { width: "100%" }, children: /* @__PURE__ */ e(
1017
1017
  ze,
1018
1018
  {
1019
1019
  height: "unset",
1020
- monthlyCategoryTotals: u,
1020
+ monthlyCategoryTotals: c,
1021
1021
  onClickRow: Xe,
1022
1022
  selectedCategory: Y,
1023
1023
  selectedDateRange: r
1024
1024
  }
1025
1025
  ) })
1026
1026
  ] }),
1027
- ue && /* @__PURE__ */ e(sn, { onClose: Ke })
1027
+ he && /* @__PURE__ */ e(rn, { onClose: Ke })
1028
1028
  ]
1029
1029
  }
1030
1030
  ),
1031
1031
  /* @__PURE__ */ e(
1032
- Gt,
1032
+ Bt,
1033
1033
  {
1034
- onClose: () => ae(!1),
1035
- showConnectWidget: G,
1034
+ onClose: () => be(!1),
1035
+ showConnectWidget: ge,
1036
1036
  title: O.mini_title
1037
1037
  }
1038
1038
  )
1039
1039
  ]
1040
1040
  }
1041
1041
  );
1042
- }, lo = v(hn);
1042
+ }, ho = v(un);
1043
1043
  export {
1044
- ao as TrendsFullWidget,
1045
- co as TrendsMicroWidget,
1046
- io as TrendsMiniWidget,
1044
+ io as TrendsFullWidget,
1045
+ lo as TrendsMicroWidget,
1046
+ co as TrendsMiniWidget,
1047
1047
  mo as TrendsStore,
1048
- lo as TrendsWidget
1048
+ ho as TrendsWidget
1049
1049
  };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@mx-cartographer/experiences",
3
- "version": "7.0.58-alpha.mm3",
3
+ "version": "7.0.58-alpha.mm5",
4
4
  "description": "Library containing experience widgets",
5
5
  "author": "MX",
6
6
  "license": "MIT",