@mx-cartographer/experiences 7.0.0 → 7.0.1-alpha.al0

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