@mx-cartographer/experiences 6.26.18-alpha.mega4 → 6.26.18-alpha.sms1

package/dist/trends/index.es.js

@@ -1,1103 +0,0 @@
-import { jsx as e, jsxs as y } from "react/jsx-runtime";
-import m from "react";
-import { observer as E } from "mobx-react-lite";
-import { Icon as X, Text as W, CategoryIcon as me, P as U, H3 as we, ChevronRightIcon as Ve, MerchantLogo as ze } from "@mxenabled/mxui";
-import O from "@mui/material/Box";
-import f from "@mui/material/Stack";
-import ge from "@mui/material/Button";
-import { addSeconds as xe } from "date-fns/addSeconds";
-import { differenceInCalendarMonths as De } from "date-fns/differenceInCalendarMonths";
-import { a as be, C as Le } from "../Category-5S6uwuXz.mjs";
-import { c as Pe, i as $e, d as je, e as Ke, b as ve, g as Ie, f as Te } from "../SpendingData-ByFCw95X.mjs";
-import Ye from "@mui/material/ToggleButton";
-import Ue from "@mui/material/ToggleButtonGroup";
-import { u as A, k as P, g as q, a as $, n as pe, c as se, w as j, l as Ee, p as Xe, j as Ze } from "../hooks-ClhFlg78.mjs";
-import { u as F } from "../useScreenSize-B6JyS_Lj.mjs";
-import { f as Z, D as G } from "../Dialog-CWW597AF.mjs";
-import { DataGridPro as Qe } from "@mui/x-data-grid-pro";
-import { C as qe } from "../CurrencyText-YUhH2caW.mjs";
-import { b as Je } from "../Localization-2MODESHW.mjs";
-import { H as _e } from "../HeaderCell-DjuifqHJ.mjs";
-import { A as D, W as Me } from "../WidgetContainer-CmGNZW0M.mjs";
-import { a as et, T as tt, S as nt } from "../TransactionDetails-B5qfs9Zh.mjs";
-import { D as Ae } from "../Drawer-kEE73B87.mjs";
-import { S as ot, u as st } from "../TrendsStore-Borh98aN.mjs";
-import { T as to } from "../TrendsStore-Borh98aN.mjs";
-import { L as Q } from "../Loader-Dp1P2gNw.mjs";
-import { useTheme as ye } from "@mui/material/styles";
-import { L as fe } from "../LineChart-CQWu5KoO.mjs";
-import { M as rt } from "../MiniWidgetContainer-BcNPxZt2.mjs";
-import { subMonths as at, format as it, fromUnixTime as ct } from "date-fns";
-import { TrendingUp as lt, TrendingDown as dt, MultilineChart as ut, ExpandLess as gt, ExpandMore as ht } from "@mxenabled/mx-icons";
-import { a as mt, f as z } from "../NumberFormatting-CtWHhyBX.mjs";
-import { M as pt } from "../MicroWidgetContainer-DaLW43tE.mjs";
-import yt from "@mui/material/Collapse";
-import ke from "@mui/material/Divider";
-import Re from "@mui/material/List";
-import He from "@mui/material/ListItem";
-import Ne from "@mui/material/ListItemButton";
-import he from "@mui/material/ListItemIcon";
-import We from "@mui/material/ListItemText";
-import ft from "@mui/material/styles/useTheme";
-import { useTheme as Ct, Stack as bt } from "@mui/material";
-import { b as Tt } from "../ViewMoreMicroCard-CAPFNz-J.mjs";
-import _t from "@mui/material/Link";
-import { b as St } from "../CategoryUtil-DRyruNgi.mjs";
-import { E as wt } from "../EmptyState-Dcb-o2tl.mjs";
-const xt = (t) => be[t] ?? be.default, Dt = (t) => Le[t];
-function Lt(t, s) {
-  const n = [], o = new Date(t);
-  for (; o <= s; ) {
-    const r = o.getFullYear(), i = String(o.getMonth() + 1).padStart(2, "0");
-    n.push(+`${r}${i}`), o.setMonth(o.getMonth() + 1);
-  }
-  return n;
-}
-const vt = (t) => t.reduce((n, o) => {
-  const r = {
-    top_level_category_guid: o.top_level_category_guid,
-    category_guid: o.category_guid,
-    amount: o.total,
-    year_month: o.year_month
-  }, { top_level_category_guid: i, category_guid: a } = r;
-  return n[a] || (n[a] = []), n[a].push(r), i !== a && (n[i] || (n[i] = []), n[i].push(r)), n;
-}, {}), It = (t, s, n) => {
-  const o = vt(t), r = Lt(s, n);
-  return Object.entries(o).map(([a, c]) => {
-    const u = c[0].top_level_category_guid, p = r.map((l) => {
-      const d = c.filter((h) => h.year_month === l).reduce((h, C) => h + Math.abs(C.amount), 0), b = Number(String(l).slice(0, 4)), g = Number(String(l).slice(4));
-      return { x: new Date(b, g - 1), y: d };
-    }).sort((l, d) => l.x.getTime() - d.x.getTime());
-    return {
-      top_level_category_guid: u,
-      category_guid: a,
-      category_name: Dt(a),
-      category_color: xt(u),
-      dataset: p
-    };
-  });
-}, Et = (t, s) => {
-  const n = typeof t == "string" ? parseFloat(t.replace(/[^0-9.-]+/g, "")) : t, o = typeof s == "string" ? parseFloat(s.replace(/[^0-9.-]+/g, "")) : s;
-  return (n || 0) - (o || 0);
-}, Oe = ({ selectedTab: t, onTabChange: s }) => /* @__PURE__ */ e(
-  Ue,
-  {
-    exclusive: !0,
-    onChange: s,
-    orientation: "horizontal",
-    value: t,
-    children: ["Chart", "Table"].map((n) => /* @__PURE__ */ e(Ye, { color: "primary", sx: { width: 56 }, value: n, children: n === "Chart" ? /* @__PURE__ */ e(X, { name: "table_chart_view" }) : /* @__PURE__ */ e(X, { name: "format_list_bulleted" }) }, n))
-  }
-), Be = ({ selectedDateRange: t, selectedCategoryGuid: s }) => {
-  const { trends: n } = A(), { isMobile: o, isDesktop: r } = F(), { getCategoryName: i } = P(), a = m.useMemo(() => {
-    const c = Z(
-      t.start,
-      o ? G.MONTH_SHORT_YEAR : G.MONTH_YEAR
-    ), u = Z(
-      t.end,
-      o ? G.MONTH_SHORT_YEAR : G.MONTH_YEAR
-    );
-    return `${c} - ${u}`;
-  }, [t, o]);
-  return /* @__PURE__ */ y(O, { sx: { mr: 10, minWidth: "60%" }, children: [
-    /* @__PURE__ */ e(
-      W,
-      {
-        display: "block",
-        fontWeight: 700,
-        sx: {
-          whiteSpace: "normal",
-          overflow: "visible",
-          textOverflow: "unset"
-        },
-        variant: r ? "H3" : "Body",
-        children: i(s) || n.sub_title
-      }
-    ),
-    /* @__PURE__ */ e(W, { variant: r ? "Body" : "Small", children: a })
-  ] });
-}, Mt = (t) => {
-  const s = t.row[t.field];
-  return /* @__PURE__ */ e(f, { alignItems: "flex-end", tabIndex: t.tabIndex, children: /* @__PURE__ */ e(qe, { amount: s, variant: "Small" }) });
-}, At = ({ categoryGuid: t, topLevelCategoryGuid: s }) => {
-  const { categories: n } = A(), o = Le[t];
-  return /* @__PURE__ */ y(f, { alignItems: "center", direction: "row", justifyContent: "center", children: [
-    /* @__PURE__ */ e(
-      O,
-      {
-        "aria-label": Je(n.category_icon_label_aria, o),
-        role: "img",
-        children: /* @__PURE__ */ e(me, { categoryGuid: s })
-      }
-    ),
-    /* @__PURE__ */ e(W, { sx: { ml: 12, pb: 6 }, variant: "Small", children: o })
-  ] });
-}, kt = (t) => /* @__PURE__ */ e(f, { alignItems: "center", direction: "row", height: "100%", width: "100%", children: /* @__PURE__ */ e(
-  At,
-  {
-    categoryGuid: t.row.category,
-    topLevelCategoryGuid: t.row.top_level_category_guid
-  }
-) }), Rt = (t, s) => {
-  const n = [], o = new Date(t);
-  for (; o <= s; ) {
-    const r = Z(o, G.MONTH);
-    n.push(r), o.setMonth(o.getMonth() + 1);
-  }
-  return n;
-}, Ge = ({
-  monthlyCategoryTotals: t,
-  selectedDateRange: s,
-  selectedCategory: n,
-  onClickRow: o,
-  height: r = "100dvh",
-  sx: i = {}
-}) => {
-  const { onEvent: a } = q(), c = Z(/* @__PURE__ */ new Date(), G.MONTH_SHORT), [u, p] = m.useState([
-    { field: c, sort: "desc" }
-  ]), l = m.useMemo(() => Rt(s.start, s.end), [s]), d = [
-    {
-      field: "category",
-      headerName: "Category",
-      minWidth: 175,
-      renderHeader: _e,
-      renderCell: kt,
-      sortable: !0,
-      type: "string"
-    },
-    ...l.map(
-      (g) => ({
-        field: g,
-        headerName: g,
-        minWidth: 75,
-        renderHeader: _e,
-        renderCell: Mt,
-        align: "right",
-        headerAlign: "right",
-        sortable: !0,
-        hideSortIcons: !1,
-        type: "number",
-        sortComparator: Et
-      })
-    )
-  ], b = m.useMemo(() => {
-    const T = (n ? t.filter(
-      (h) => h.category_guid === n || h.top_level_category_guid === n
-    ) : t).reduce(
-      (h, C) => {
-        const { category_guid: S, top_level_category_guid: x, month: L, total: H, year: M } = C, w = n ? S : x;
-        h[w] || (h[w] = {
-          id: w,
-          category: w,
-          category_guid: S,
-          top_level_category_guid: x
-        });
-        const v = Z(new Date(M, L - 1), G.MONTH_SHORT);
-        return h[w][v] || (h[w][v] = 0), h[w][v] = h[w][v] + H, h;
-      },
-      {}
-    );
-    return Object.values(T);
-  }, [t, n]);
-  return /* @__PURE__ */ e(O, { sx: { height: r, width: "100%", overflowX: "auto", boxShadow: "none", ...i }, children: /* @__PURE__ */ e(
-    Qe,
-    {
-      columns: d,
-      disableColumnFilter: !0,
-      disableColumnMenu: !0,
-      hideFooter: !0,
-      initialState: { sorting: { sortModel: u } },
-      onRowClick: (g) => {
-        o?.(g.row.category), a(D.TRENDS_CLICK_TABLE_ROW);
-      },
-      onSortModelChange: (g) => {
-        p(g), a(D.TRENDS_CLICK_TABLE_SORT);
-      },
-      rows: b,
-      slotProps: { baseIconButton: { color: "secondary", sx: { ml: 8 } } },
-      sortModel: u,
-      sortingOrder: ["asc", "desc"]
-    }
-  ) });
-}, Ht = {
-  title: "Transaction List"
-}, Nt = ({
-  categoryGuid: t,
-  dateRange: s,
-  isOpen: n,
-  onClose: o
-}) => {
-  const { onEvent: r } = q(), { selectedAccountGuids: i } = $(), { common: a } = A(), { setFilter: c, sortedTransactions: u } = pe(), [p, l] = m.useState(""), d = m.useMemo(
-    () => u.find((g) => g.guid === p),
-    [p, u]
-  );
-  m.useEffect(() => {
-    c({
-      accounts: i,
-      dateRange: s,
-      custom: (g) => t === "" || t === g.category_guid || t === g.top_level_category_guid,
-      showSplits: !!t
-    });
-  }, [i, t, s]), m.useEffect(() => r(D.TRENDS_VIEW_TRANSACTIONS), []);
-  const b = () => {
-    l(""), o();
-  };
-  return /* @__PURE__ */ y(
-    Ae,
-    {
-      ariaLabelClose: a.close_aria,
-      isOpen: n,
-      onClose: b,
-      title: Ht.title,
-      children: [
-        d && /* @__PURE__ */ e(et, { transaction: d }),
-        !d && /* @__PURE__ */ e(tt, { onClick: l })
-      ]
-    }
-  );
-}, Wt = E(Nt), Ot = ({ onBackClick: t, sx: s }) => {
-  const { onEvent: n } = q(), { isDesktop: o, isTablet: r, isMobile: i } = F(), { visibleAccounts: a } = se(), { loadMonthlyCategoryTotals: c, monthlyCategoryTotals: u, getCategoryName: p } = P(), { sortedTransactions: l } = pe(), { selectedDateRange: d, setSelectedDateRange: b } = j(), { isCopyLoaded: g, isInitialized: T, selectedAccounts: h, setSelectedAccounts: C } = $(), { trends: S } = A(), [x, L] = m.useState(!1), [H, M] = m.useState(!1), [w, v] = m.useState("Chart"), [k, K] = m.useState(""), [V, re] = m.useState(window.innerHeight), ee = V - (i ? 315 : 345);
-  m.useEffect(() => {
-    const _ = () => re(window.innerHeight);
-    return window.addEventListener("resize", _), () => window.removeEventListener("resize", _);
-  }, []), m.useEffect(() => {
-    C(a);
-  }, [a]), m.useEffect(() => {
-    T && c(
-      h,
-      d.start,
-      d.end
-    ).finally(() => {
-      L(!0);
-    });
-  }, [T, h, d]);
-  const te = m.useMemo(() => {
-    if (!x) return { stackedDatasets: [], unstackedDatasets: [] };
-    const _ = It(
-      u,
-      d.start,
-      d.end
-    ), N = k.length ? _.filter(
-      (B) => B.top_level_category_guid === k || B.category_guid === k
-    ) : Pe(_);
-    return {
-      stackedDatasets: N.filter($e),
-      unstackedDatasets: N.filter(je)
-    };
-  }, [u, k, d]), ne = (_, N) => {
-    v(N ?? w), n(D.TRENDS_CLICK_TOGGLE);
-  }, oe = (_) => {
-    const N = xe(_?.[0], 1), B = _?.[1], I = De(B, N);
-    b({ start: N, end: B }), n(D.TRENDS_CLICK_DATE, {
-      time_period: I + "M"
-    });
-  }, ae = () => {
-    n(D.TRENDS_CLICK_FILTER);
-  }, ie = (_) => {
-    K(_);
-  }, ce = (_) => {
-    K(_), n(D.TRENDS_CLICK_LEGEND, { category: p(_) });
-  }, le = (_) => {
-    n(D.TRENDS_HOVER_LEGEND, { category: p(_) });
-  }, de = (_) => {
-    n(D.TRENDS_HOVER_AREA, { category: _ });
-  }, ue = (_) => {
-    n(D.TRENDS_HOVER_POINT, { category: _ });
-  };
-  return !g || !T || !x ? /* @__PURE__ */ e(Q, {}) : /* @__PURE__ */ y(
-    Me,
-    {
-      accountOptions: a,
-      calendarActions: { onRangeChanged: oe },
-      dateRange: d,
-      dateRangeVariant: "timeframebuttons",
-      onAccountsFilterClick: ae,
-      onBackClick: t,
-      sx: s,
-      title: S.title,
-      children: [
-        /* @__PURE__ */ y(
-          f,
-          {
-            sx: {
-              // eslint-disable-next-line no-nested-ternary
-              px: o ? 48 : r ? 24 : 12
-            },
-            children: [
-              /* @__PURE__ */ y(
-                f,
-                {
-                  flexDirection: "row",
-                  justifyContent: "space-between",
-                  sx: { pb: i ? 12 : 24, pt: i ? 24 : 48 },
-                  children: [
-                    /* @__PURE__ */ e(
-                      Be,
-                      {
-                        selectedCategoryGuid: k,
-                        selectedDateRange: d
-                      }
-                    ),
-                    /* @__PURE__ */ e(Oe, { onTabChange: ne, selectedTab: w })
-                  ]
-                }
-              ),
-              /* @__PURE__ */ y(f, { alignItems: "center", flexDirection: "row", width: "100%", children: [
-                /* @__PURE__ */ e(O, { flexGrow: 1, children: k && /* @__PURE__ */ y(ge, { onClick: () => K(""), sx: { p: 0, pr: 5 }, children: [
-                  /* @__PURE__ */ e(X, { name: "arrow_back" }),
-                  S.all_categories
-                ] }) }),
-                /* @__PURE__ */ e(ge, { onClick: () => M(!0), sx: { px: 5 }, children: `${S.view_transactions} (${l.length})` })
-              ] }),
-              /* @__PURE__ */ y(O, { children: [
-                w === "Chart" && /* @__PURE__ */ e(
-                  ot,
-                  {
-                    availableHeight: ee,
-                    onClickLegend: ce,
-                    onHoverArea: de,
-                    onHoverLegend: le,
-                    onHoverPoint: ue,
-                    stackedDatasets: te.stackedDatasets,
-                    unstackedDatasets: te.unstackedDatasets
-                  }
-                ),
-                w === "Table" && /* @__PURE__ */ e(
-                  Ge,
-                  {
-                    monthlyCategoryTotals: u,
-                    onClickRow: ie,
-                    selectedCategory: k,
-                    selectedDateRange: d
-                  }
-                )
-              ] })
-            ]
-          }
-        ),
-        /* @__PURE__ */ e(
-          Wt,
-          {
-            categoryGuid: k,
-            dateRange: d,
-            isOpen: H,
-            onClose: () => M(!1)
-          }
-        )
-      ]
-    }
-  );
-}, Xn = E(Ot), Bt = () => {
-  const t = ye(), { monthlyCategoryTotals: s } = P(), { trends: n } = A(), o = Ke(s);
-  return /* @__PURE__ */ e(
-    fe,
-    {
-      baseline: "min",
-      colors: [t.palette.primary.main],
-      datasets: [o],
-      height: 300,
-      labels: [n.spending_label],
-      showArea: !0,
-      showAverage: !0,
-      showLegend: !0,
-      showMarkLabel: !0,
-      useCustomMark: !0,
-      valueFormatterString: "0,0"
-    }
-  );
-}, Gt = E(Bt), Ft = ({ onPrimaryCtaClick: t, sx: s }) => {
-  const { visibleAccounts: n } = se(), { loadMonthlyCategoryTotals: o, monthlyTotalsLoaded: r } = P(), { isInitialized: i } = Ee(), { trends: a } = A(), { isCopyLoaded: c, selectedAccounts: u, setSelectedAccounts: p } = $();
-  return m.useEffect(() => {
-    p(n);
-  }, [n]), m.useEffect(() => {
-    i && o(u).finally();
-  }, [i, u]), !c || !i ? /* @__PURE__ */ e(Q, {}) : /* @__PURE__ */ e(
-    rt,
-    {
-      onPrimaryCtaClick: t,
-      primaryCtaLabel: a.primary_cta,
-      subTitle: a.sub_title,
-      sx: s,
-      title: a.mini_title,
-      children: r ? /* @__PURE__ */ e(Gt, {}) : /* @__PURE__ */ e(Q, {})
-    }
-  );
-}, Zn = E(Ft), Vt = 70, Se = ({
-  title: t,
-  totalAmount: s,
-  transactionType: n,
-  percentage: o,
-  secondaryLabel: r,
-  shouldDisplayPercentage: i
-}) => {
-  const { availableWidth: a } = Xe(), c = m.useRef(null), u = m.useRef(null), p = mt(Number(Math.abs(o)), {
-    style: "percent",
-    minimumIntegerDigits: 1
-  }), l = a === 288 && z(s, "0,0.00").length > 10 ? z(s, "0,0") : z(s, "0,0.00"), d = n === "spending" ? o > 0 : o >= 0, b = n === "spending" ? "error.main" : "success.main", g = n === "spending" ? "success.main" : "text.secondary", T = c?.current, h = u?.current, C = T && h ? T.scrollWidth > h.clientWidth - Vt : !1;
-  return /* @__PURE__ */ y(
-    f,
-    {
-      sx: {
-        border: 1,
-        borderColor: "divider",
-        borderRadius: "4px",
-        flex: 1,
-        minWidth: 0,
-        px: 12,
-        py: 8
-      },
-      children: [
-        /* @__PURE__ */ y(
-          f,
-          {
-            sx: {
-              alignItems: "center",
-              flexDirection: "row",
-              justifyContent: "space-between"
-            },
-            children: [
-              /* @__PURE__ */ e(U, { color: "text.secondary", variant: "caption", children: t }),
-              i && /* @__PURE__ */ y(f, { sx: { alignItems: "center", flexDirection: "row", gap: 4 }, children: [
-                d ? /* @__PURE__ */ e(lt, { size: 20, sx: { color: b } }) : /* @__PURE__ */ e(dt, { size: 20, sx: { color: g } }),
-                /* @__PURE__ */ e(
-                  U,
-                  {
-                    sx: {
-                      color: d ? b : g,
-                      fontWeight: 600
-                    },
-                    variant: "body2",
-                    children: p
-                  }
-                )
-              ] })
-            ]
-          }
-        ),
-        /* @__PURE__ */ y(
-          f,
-          {
-            ref: u,
-            sx: {
-              alignItems: "center",
-              flexDirection: "row",
-              justifyContent: "space-between"
-            },
-            children: [
-              /* @__PURE__ */ e(
-                O,
-                {
-                  ref: c,
-                  sx: { overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" },
-                  children: /* @__PURE__ */ e(we, { children: l })
-                }
-              ),
-              i && a >= 450 && !C && /* @__PURE__ */ e(
-                U,
-                {
-                  color: d ? b : g,
-                  variant: "caption",
-                  children: r
-                }
-              )
-            ]
-          }
-        )
-      ]
-    }
-  );
-}, zt = E(() => {
-  const { trends: t } = A();
-  return /* @__PURE__ */ y(f, { sx: { alignItems: "start", flexDirection: "row", gap: 12 }, children: [
-    /* @__PURE__ */ e(ut, { size: 32 }),
-    /* @__PURE__ */ y(f, { children: [
-      /* @__PURE__ */ e(U, { fontWeight: 600, variant: "body1", children: t.zero_state_content_header }),
-      /* @__PURE__ */ e(U, { color: "text.secondary", variant: "subtitle2", children: t.zero_state_content_description })
-    ] })
-  ] });
-}), Qn = E(({ onCtaClick: t }) => {
-  const { visibleAccounts: s } = se(), { onEvent: n } = q(), { monthlyCategoryTotals: o, loadMonthlyCategoryTotals: r, monthlyTotalsLoaded: i } = P(), a = {
-    start: at(/* @__PURE__ */ new Date(), 1),
-    end: /* @__PURE__ */ new Date()
-  }, { trends: c } = A(), { selectedAccounts: u, setSelectedAccounts: p, isInitialized: l } = $();
-  m.useEffect(() => {
-    p(s);
-  }, [s]), m.useEffect(() => {
-    l && r(u, a.start).then(() => {
-      n(D.TRENDS_LOAD_WIDGET, {
-        state: s?.length ? "default" : "zeroState"
-      });
-    });
-  }, [l, u]);
-  const { spendingData: d, incomeData: b } = m.useMemo(
-    () => ({
-      spendingData: ve(o, a),
-      incomeData: Ie(o, a)
-    }),
-    [o, a]
-  ), [g, T] = d, [h, C] = b, S = Te(T.y, g.y), x = Te(C.y, h.y), L = l && !s?.length, H = () => {
-    n(
-      L ? D.TRENDS_CLICK_GET_STARTED : D.TRENDS_CLICK_VIEW_MORE
-    ), t();
-  };
-  return !i || !l ? /* @__PURE__ */ e(Q, {}) : /* @__PURE__ */ e(
-    pt,
-    {
-      className: "mx-trends-microwidget",
-      ctaLabel: c.micro_primary_cta_label,
-      onCTAClick: H,
-      subHeader: L ? void 0 : c.micro_subheader,
-      title: c.title,
-      children: L ? /* @__PURE__ */ e(zt, {}) : /* @__PURE__ */ y(
-        f,
-        {
-          sx: {
-            alignItems: "stretch",
-            flexDirection: "row",
-            gap: 12
-          },
-          children: [
-            /* @__PURE__ */ e(
-              Se,
-              {
-                percentage: S,
-                secondaryLabel: c.micro_secondary_label,
-                shouldDisplayPercentage: T.y !== 0 && g.y !== 0,
-                title: c.spending_label,
-                totalAmount: T.y,
-                transactionType: "spending"
-              }
-            ),
-            /* @__PURE__ */ e(
-              Se,
-              {
-                percentage: x,
-                secondaryLabel: c.micro_secondary_label,
-                shouldDisplayPercentage: C.y !== 0 && h.y !== 0,
-                title: c.income_label,
-                totalAmount: C.y,
-                transactionType: "income"
-              }
-            )
-          ]
-        }
-      )
-    }
-  );
-}), Pt = E(
-  ({ isExpanded: t, onClick: s }) => {
-    const n = ft();
-    return /* @__PURE__ */ e(He, { sx: { bgcolor: "background.paper" }, children: /* @__PURE__ */ e(Ne, { onClick: s, sx: { justifyContent: "center" }, children: /* @__PURE__ */ y(
-      f,
-      {
-        sx: { color: n.palette.primary.main, flexDirection: "row", alignItems: "center" },
-        children: [
-          /* @__PURE__ */ e(We, { children: /* @__PURE__ */ e(W, { bold: !0, variant: "body2", children: t ? "View less" : "View more" }) }),
-          /* @__PURE__ */ e(he, { sx: { color: n.palette.primary.main }, children: t ? /* @__PURE__ */ e(gt, {}) : /* @__PURE__ */ e(
-            ht,
-            {
-              sx: {
-                transition: "transform 0.3s ease-in-out",
-                transform: t ? "rotate(180deg)" : "rotate(0deg)"
-              }
-            }
-          ) })
-        ]
-      }
-    ) }) });
-  }
-), Ce = ({
-  onClick: t,
-  leftIcon: s,
-  rightIcon: n,
-  title: o,
-  subtitle: r,
-  rightContent: i,
-  titleBold: a = !0,
-  rightContentBold: c = !0
-}) => {
-  const u = /* @__PURE__ */ y(m.Fragment, { children: [
-    s && /* @__PURE__ */ e(he, { sx: { ml: 0 }, children: s }),
-    /* @__PURE__ */ e(We, { children: /* @__PURE__ */ y(
-      f,
-      {
-        sx: {
-          alignItems: "center",
-          flexDirection: "row",
-          marginLeft: 12
-        },
-        children: [
-          /* @__PURE__ */ y(f, { sx: { flex: 1, minWidth: 0 }, children: [
-            /* @__PURE__ */ e(W, { bold: a, variant: "body1", children: o }),
-            r && /* @__PURE__ */ e(W, { variant: "caption", children: r })
-          ] }),
-          /* @__PURE__ */ y(f, { sx: { flexDirection: "row", alignItems: "center", gap: 1 }, children: [
-            i && /* @__PURE__ */ e(W, { bold: c, display: "flex", variant: "body1", children: i }),
-            n && /* @__PURE__ */ e(he, { children: n })
-          ] })
-        ]
-      }
-    ) })
-  ] });
-  return /* @__PURE__ */ e(He, { sx: { bgcolor: "background.paper" }, children: t ? /* @__PURE__ */ e(
-    Ne,
-    {
-      onClick: t,
-      sx: {
-        py: 14
-      },
-      children: u
-    }
-  ) : /* @__PURE__ */ e(
-    f,
-    {
-      sx: {
-        py: 14,
-        px: 24,
-        width: "100%",
-        flexDirection: "row",
-        alignItems: "center"
-      },
-      children: u
-    }
-  ) });
-}, $t = E(
-  ({ onClick: t, name: s, amount: n, guid: o, transactions: r }) => {
-    const { trends: i } = A(), a = r?.length || 0, c = `${a} ${a === 1 ? i.transaction : i.transactions}`;
-    return /* @__PURE__ */ e(
-      Ce,
-      {
-        leftIcon: o ? /* @__PURE__ */ e(me, { categoryGuid: o }) : void 0,
-        onClick: t,
-        rightContent: z(n, "0,0.00"),
-        rightIcon: t ? /* @__PURE__ */ e(Ve, {}) : void 0,
-        subtitle: c,
-        title: s
-      }
-    );
-  }
-), jt = E(
-  ({ availableHeight: t = 0, onListItemClick: s, transactions: n }) => {
-    const { visibleListItems: o, collapsedListItems: r, setVisibleListLength: i } = j(), { isLargeDesktop: a, isDesktop: c } = F(), { trends: u } = A(), [p, l] = m.useState(!1), d = c || a;
-    m.useEffect(() => {
-      const h = Math.floor(t / 64) - 1, C = o.length + r.length;
-      h !== o.length && (i(d ? Math.max(h, 5) : 5), l(h >= C));
-    }, [t]);
-    const b = (h) => n.filter((C) => C.category_guid === h), g = ({ guid: h, name: C, amount: S }, x, L) => {
-      const H = o.length + (p ? r.length : 0), w = (L === r ? o.length + x : x) === H - 1, v = b(h), k = {
-        guid: h,
-        name: C,
-        amount: S,
-        transactions: v
-      };
-      return /* @__PURE__ */ y(m.Fragment, { children: [
-        /* @__PURE__ */ e(
-          $t,
-          {
-            amount: S,
-            guid: h,
-            name: C,
-            onClick: v.length > 0 ? () => s(k) : void 0,
-            transactions: v
-          }
-        ),
-        /* @__PURE__ */ e(ke, { sx: { ml: w ? 24 : 68 } })
-      ] }, h);
-    }, T = () => {
-      l(!p);
-    };
-    return /* @__PURE__ */ e(f, { sx: { bgColor: "background.paper", width: "100%" }, children: /* @__PURE__ */ y(Re, { children: [
-      /* @__PURE__ */ e(f, { sx: { pb: 4, pt: 16, px: 16 }, children: /* @__PURE__ */ e(we, { children: u.categories }) }),
-      o.map((h, C) => g(h, C, o)),
-      /* @__PURE__ */ e(
-        yt,
-        {
-          in: p,
-          sx: { "&.MuiCollapse-root .MuiListItemButton-root": { paddingLeft: 24 } },
-          children: r.map(
-            (h, C) => g(h, C, r)
-          )
-        }
-      ),
-      r.length > 0 && /* @__PURE__ */ e(Pt, { isExpanded: p, onClick: T })
-    ] }) });
-  }
-), Kt = [
-  "BillAmountNotStandard",
-  "CategorySpendingV2",
-  "CostOfLivingToIncome",
-  "DebtPaymentReminderV2",
-  "DiscoveredAccounts",
-  "DuplicatePaymentV2",
-  "FeeDetected",
-  "GreenGasPurchasesSummary",
-  "LargeTransaction",
-  "LowAccountBalance",
-  "MonthlyDebtToIncomeComparisonV2",
-  "MonthlyDepositSummaryV2",
-  "MonthlyNonEssentialCategorySummaryV2",
-  "MonthlySavingsToIncomeComparison",
-  "MonthlySpendToIncomeComparisonV2",
-  "MonthlySubscriptionAggregateV2",
-  "MonthlyTopMerchantSpendingV3",
-  "MonthlyObligationsStatus",
-  "QuarterlySummary",
-  "SaveAnExtra100Dollars",
-  "SaveEnoughToLiveOn",
-  "SavingsOpportunityV2",
-  "SubscriptionDetected",
-  "SubscriptionPriceIncrease",
-  "SetUpDirectDeposit",
-  "SwitchDirectDeposit",
-  "UnexpectedSubscriptionPayment",
-  "UpcomingBill",
-  "UpcomingSubscription",
-  "WeekendSpendingSummaryV2",
-  "WeeklyNewMerchantsV2",
-  "WeeklyNoSpendDays",
-  "WeeklySmallPurchasesSummary"
-], Yt = ({ onInsightCardClick: t }) => {
-  const s = Ct(), { isMobile: n, isDesktop: o, isLargeDesktop: r } = F(), { beatStore: i, endpoint: a, sessionToken: c } = Ee(), { isInitialized: u } = $(), { sortedCategoriesList: p } = j(), [l, d] = m.useState(!1), b = s.palette.mode === "dark", g = o || r, T = g || n ? 1 : 2;
-  m.useEffect(() => {
-    u && i.loadBeats().finally(() => d(!0));
-  }, [u]);
-  const h = m.useMemo(() => {
-    if (!l) return [];
-    const H = p.map((M) => M.guid);
-    return i.getFilteredBeats({ categoryGuids: H, templates: Kt });
-  }, [l, p]), C = () => null, S = g ? 200 : 170, x = g ? 170 : 124, L = h.length > 0 ? S : x;
-  return /* @__PURE__ */ e(bt, { sx: { height: L }, children: /* @__PURE__ */ e(
-    Tt,
-    {
-      areBeatsLoading: i.isLoading,
-      beats: h,
-      endpoint: a,
-      logOutUser: C,
-      onCardClick: t,
-      showBorder: !0,
-      showCTAColocatedWithText: !1,
-      showCarouselControls: !0,
-      showHeader: g,
-      showIcon: !0,
-      showWithMargin: !1,
-      token: c,
-      useDarkMode: b,
-      userHasFullInsightFeedBeats: !1,
-      variant: "outlined",
-      visibleCardsCount: T
-    }
-  ) });
-}, Ut = E(Yt), Xt = E(({ transactions: t }) => {
-  const { is_mobile_webview: s } = Ze(), { trends: n, transactions: o } = A(), { isDesktop: r } = F(), i = ` ${t.length === 1 ? n.transaction : n.transactions} (${t.length})`, a = (() => {
-    const p = /* @__PURE__ */ new Map();
-    return t.forEach((l) => {
-      p.has(l.date) || p.set(l.date, []), p.get(l.date).push(l);
-    }), Array.from(p.entries()).sort(([l], [d]) => d - l).map(([l, d]) => ({ timestamp: l, transactions: d }));
-  })(), c = () => {
-  }, u = t.length > 0 && !s && r;
-  return /* @__PURE__ */ y(f, { sx: { width: "100%" }, children: [
-    /* @__PURE__ */ y(
-      f,
-      {
-        sx: {
-          alignItems: "flex-start",
-          alignSelf: "stretch",
-          flexDirection: "row",
-          justifyContent: "space-between",
-          pb: 12,
-          pt: 16,
-          px: 24
-        },
-        children: [
-          /* @__PURE__ */ e(W, { bold: !0, variant: "body1", children: i }),
-          /* @__PURE__ */ e(f, { sx: { alignItems: "center", gap: 16 }, children: u && /* @__PURE__ */ y(
-            _t,
-            {
-              onClick: c,
-              sx: { display: "flex", alignItems: "end", gap: 8 },
-              variant: "body2",
-              children: [
-                /* @__PURE__ */ e(X, { name: "ios_share" }),
-                o.export_csv_btn
-              ]
-            }
-          ) })
-        ]
-      }
-    ),
-    /* @__PURE__ */ e(Re, { children: a.map(({ timestamp: p, transactions: l }) => /* @__PURE__ */ y(m.Fragment, { children: [
-      /* @__PURE__ */ e(nt, { children: it(ct(p), "EEEE, MMMM dd") }),
-      l.map((d, b) => {
-        const g = b === l.length - 1;
-        return /* @__PURE__ */ y(m.Fragment, { children: [
-          /* @__PURE__ */ e(
-            Ce,
-            {
-              leftIcon: /* @__PURE__ */ e(
-                ze,
-                {
-                  categoryGuid: d.guid,
-                  merchantGuid: d.merchant_guid ?? ""
-                }
-              ),
-              rightContent: z(d.amount, "0,0.00"),
-              subtitle: d.category,
-              title: d.description
-            }
-          ),
-          /* @__PURE__ */ e(ke, { sx: { ml: g ? 0 : 68 } })
-        ] }, d.guid);
-      })
-    ] }, p)) })
-  ] });
-}), Zt = E(() => {
-  const { categoryDetailsChartData: t, selectedCategoryData: s } = j(), n = s?.chartLabel ? s.chartLabel : "", o = s?.color;
-  return /* @__PURE__ */ e(f, { sx: { pt: 12, width: "100%" }, children: /* @__PURE__ */ e(
-    fe,
-    {
-      baseline: "min",
-      colors: [o],
-      curveType: "bump",
-      datasets: t,
-      height: 265,
-      labels: [n],
-      markStyles: () => ({
-        stroke: o
-      }),
-      showArea: !0,
-      showAverage: !0,
-      showLegend: !0,
-      showXAxis: !0,
-      showXAxisTicks: !0,
-      showYAxis: !0,
-      showYAxisTicks: !0,
-      useCustomMark: !0,
-      valueFormatterString: "0,0"
-    }
-  ) });
-}), Qt = E(({ onClose: t }) => {
-  const { trends: s } = A(), { selectedCategoryData: n, selectedDateRangeMonthRange: o } = j();
-  if (!n)
-    return null;
-  const { guid: r, name: i, amount: a, transactions: c } = n, u = n.name === "Income" ? s.category_income : s.category_spending, p = () => {
-    t?.();
-  };
-  return /* @__PURE__ */ e(
-    Ae,
-    {
-      ariaLabelClose: s.close_category_details,
-      isOpen: !0,
-      onClose: p,
-      shouldShowHeaderShadow: !0,
-      title: u,
-      children: /* @__PURE__ */ y(f, { sx: { alignItems: "center", pt: 16 }, children: [
-        /* @__PURE__ */ e(
-          Ce,
-          {
-            leftIcon: /* @__PURE__ */ e(me, { categoryGuid: r }),
-            rightContent: z(a, "0,0.00"),
-            subtitle: o,
-            title: i
-          }
-        ),
-        /* @__PURE__ */ e(Zt, {}),
-        c && /* @__PURE__ */ e(Xt, { transactions: c })
-      ] })
-    }
-  );
-}), qt = (t, s) => {
-  const n = Ie(t, s), o = ve(t, s);
-  return [n, o].filter((r) => r.length > 0);
-}, Jt = (t, s) => {
-  const [n, o] = t, r = n, i = o ?? n, a = [];
-  if (r) {
-    const c = r.reduce((u, p) => u + p.y, 0);
-    a.push({ label: s.income_label, amount: c });
-  }
-  if (i) {
-    const c = i.reduce((u, p) => u + p.y, 0);
-    a.push({ label: s.spending_label, amount: c });
-  }
-  return a;
-}, en = ({
-  availableHeight: t = 0,
-  minHeight: s = 500,
-  selectedDateRange: n,
-  totals: o
-}) => {
-  const r = ye(), { trends: i } = A(), { isSmallMobile: a, isMobile: c, isSmallTablet: u, isTablet: p } = F(), l = [r.palette.chart?.chart1, r.palette.chart?.chart2], d = qt(o, n), b = Jt(d, i), [g, T] = m.useState(0), h = 458, C = 195, S = 56, x = c || a ? C : u || p ? h : g;
-  return m.useEffect(() => {
-    const L = Math.max(t - S, s);
-    T(L);
-  }, [t]), /* @__PURE__ */ e(
-    fe,
-    {
-      baseline: "min",
-      colors: l,
-      curveType: "bump",
-      datasets: d,
-      height: x,
-      labels: b,
-      showArea: !0,
-      showAxisHighlight: !0,
-      showLegend: !0,
-      showTooltip: !0,
-      showXAxis: !0,
-      showXAxisTicks: !0,
-      showYAxis: !0,
-      showYAxisTicks: !0,
-      valueFormatterString: "0,0"
-    }
-  );
-}, tn = E(en), nn = ({ onBackClick: t, onInsightCardClick: s, sx: n }) => {
-  const { onEvent: o } = q(), r = ye(), { isLargeDesktop: i, isDesktop: a, isMobile: c } = F(), { visibleAccounts: u } = se(), { loadMonthlyCategoryTotals: p, monthlyCategoryTotals: l } = P(), { setFilter: d, sortedTransactions: b } = pe(), { selectedDateRange: g, setSelectedCategoryData: T, setSelectedDateRange: h } = j(), {
-    isCopyLoaded: C,
-    isInitialized: S,
-    selectedAccounts: x,
-    selectedAccountGuids: L,
-    setSelectedAccounts: H
-  } = $(), { trends: M } = A(), w = st(), v = a || i, [k, K] = m.useState(!1), [V, re] = m.useState("Chart"), [J, ee] = m.useState(""), [te, ne] = m.useState(!1), [oe, ae] = m.useState(window.innerHeight), ie = oe - 208, ce = oe - (w ? 494 : 266);
-  m.useEffect(() => {
-    const I = () => ae(window.innerHeight);
-    return window.addEventListener("resize", I), () => window.removeEventListener("resize", I);
-  }, []), m.useEffect(() => {
-    H(u);
-  }, [u]), m.useEffect(() => {
-    S && p(
-      x,
-      g.start,
-      g.end
-    ).finally(() => {
-      K(!0);
-    });
-  }, [S, x, g]), m.useEffect(() => {
-    if (l.length !== 0) {
-      const I = {
-        accounts: L,
-        dateRange: { start: g.start, end: g.end }
-      };
-      d({
-        ...I,
-        custom: (R) => !!l.find(
-          (Y) => Y.top_level_category_guid === R.top_level_category_guid || Y.category_guid === R.category_guid
-        )
-      });
-    }
-  }, [l]);
-  const le = (I) => {
-    const R = I;
-    R.color = St(R.guid, r), R.chartLabel = I.name === "Income" ? M.monthly_income : M.monthly_spending, T(R), ne(!0);
-  }, de = () => {
-    T(null), ne(!1);
-  }, ue = (I, R) => {
-    re(R ?? V), o(D.TRENDS_CLICK_TOGGLE);
-  }, _ = (I) => {
-    const R = xe(I?.[0], 1), Y = I?.[1], Fe = De(Y, R);
-    h({ start: R, end: Y }), o(D.TRENDS_CLICK_DATE, {
-      time_period: Fe + "M"
-    });
-  }, N = () => {
-    o(D.TRENDS_CLICK_FILTER);
-  }, B = (I) => {
-    ee(I);
-  };
-  return !C || !S || !k ? /* @__PURE__ */ e(Q, {}) : l.length === 0 ? /* @__PURE__ */ e(
-    wt,
-    {
-      header: "",
-      icon: "",
-      onClick: () => {
-      },
-      primaryButton: M.empty_state_primary,
-      subText: M.empty_state_sub_text
-    }
-  ) : /* @__PURE__ */ y(
-    Me,
-    {
-      accountOptions: u,
-      calendarActions: { onRangeChanged: _ },
-      dateRange: g,
-      dateRangeVariant: c ? "timeframetabs" : "timeframebuttons",
-      onAccountsFilterClick: N,
-      onBackClick: t,
-      sx: n,
-      title: M.title,
-      children: [
-        /* @__PURE__ */ y(
-          f,
-          {
-            sx: {
-              px: c ? 0 : 48
-            },
-            children: [
-              /* @__PURE__ */ y(
-                f,
-                {
-                  flexDirection: "row",
-                  justifyContent: "space-between",
-                  sx: { pb: c ? 12 : 24, pt: c ? 24 : 48 },
-                  children: [
-                    /* @__PURE__ */ e(
-                      Be,
-                      {
-                        selectedCategoryGuid: J,
-                        selectedDateRange: g
-                      }
-                    ),
-                    /* @__PURE__ */ e(Oe, { onTabChange: ue, selectedTab: V })
-                  ]
-                }
-              ),
-              /* @__PURE__ */ e(f, { alignItems: "center", flexDirection: "row", width: "100%", children: /* @__PURE__ */ e(O, { flexGrow: 1, children: J && /* @__PURE__ */ y(ge, { onClick: () => ee(""), sx: { p: 0, pr: 5 }, children: [
-                /* @__PURE__ */ e(X, { name: "arrow_back" }),
-                M.all_categories
-              ] }) }) }),
-              /* @__PURE__ */ y(f, { flexDirection: v ? "row" : "column", gap: v ? 48 : 16, children: [
-                /* @__PURE__ */ y(O, { sx: { width: v ? "68%" : "100%" }, children: [
-                  V === "Chart" && /* @__PURE__ */ e(
-                    tn,
-                    {
-                      availableHeight: ie,
-                      minHeight: 450,
-                      selectedDateRange: g,
-                      totals: l
-                    }
-                  ),
-                  V === "Table" && /* @__PURE__ */ e(
-                    Ge,
-                    {
-                      height: "unset",
-                      monthlyCategoryTotals: l,
-                      onClickRow: B,
-                      selectedCategory: J,
-                      selectedDateRange: g
-                    }
-                  )
-                ] }),
-                /* @__PURE__ */ y(f, { gap: 16, sx: { width: v ? "32%" : "100%" }, children: [
-                  w && /* @__PURE__ */ e(Ut, { onInsightCardClick: s }),
-                  /* @__PURE__ */ e(
-                    jt,
-                    {
-                      availableHeight: ce,
-                      onListItemClick: le,
-                      transactions: b
-                    }
-                  )
-                ] })
-              ] })
-            ]
-          }
-        ),
-        te && /* @__PURE__ */ e(Qt, { onClose: de })
-      ]
-    }
-  );
-}, qn = E(nn);
-export {
-  Xn as TrendsFullWidget,
-  Qn as TrendsMicroWidget,
-  Zn as TrendsMiniWidget,
-  to as TrendsStore,
-  qn as TrendsWidget
-};