@mx-cartographer/experiences 8.0.0-alpha.sms2 → 9.0.0-alpha.mega1

package/dist/spending/index.es.js

@@ -1,38 +1,39 @@
-import { jsxs as s, jsx as t } from "react/jsx-runtime";
-import i from "react";
-import { observer as w } from "mobx-react-lite";
-import { startOfMonth as nt } from "date-fns/startOfMonth";
+import { jsxs as c, jsx as t } from "react/jsx-runtime";
+import l from "react";
+import { observer as A } from "mobx-react-lite";
+import { startOfMonth as at } from "date-fns/startOfMonth";
 import { endOfMonth as ot } from "date-fns/endOfMonth";
 import v from "@mui/material/Box";
 import b from "@mui/material/Stack";
-import k from "@mui/material/Tab";
-import at from "@mui/material/Tabs";
-import mt from "@mui/material/styles/useTheme";
-import { g as it, a as rt, S as B, b as Y } from "../SpendingLegend-CZzDb-7d.mjs";
-import { Text as C, Icon as ht } from "@mxenabled/mxui";
+import N from "@mui/material/Tab";
+import it from "@mui/material/Tabs";
+import yt from "@mui/material/styles/useTheme";
+import { g as rt, a as st, S as k, b as Y } from "../SpendingLegend-BxefXiQd.mjs";
+import { Text as T, Icon as _t } from "@mxenabled/mxui";
 import { f as R } from "../NumberFormatting-DjTD0t3W.mjs";
-import { u as L, m as W, d as st, b as P, a as F, h as ct, g as ft, n as bt } from "../hooks-C41HAxM5.mjs";
-import { L as lt } from "../Loader-BSWSYqvn.mjs";
-import { M as _t } from "../MiniWidgetContainer-D7MkHG15.mjs";
+import { u as I, m as E, d as lt, b as z, a as V, h as ct, g as bt } from "../hooks-fY_n74f7.mjs";
+import { L as dt } from "../Loader-BSWSYqvn.mjs";
+import { M as Ct } from "../MiniWidgetContainer-DKn7ndO6.mjs";
+import { u as gt } from "../useWidgetLoadTimer-CrUzxN-P.mjs";
 import { startOfToday as q } from "date-fns/startOfToday";
-import yt from "@mui/material/Button";
-import { useTheme as Ct } from "@mui/material";
-import { e as St } from "../exportTransactionsToCSV-BFpuIAXW.mjs";
-import { T as Tt, a as Mt } from "../TransactionDetails-Duv1X9ec.mjs";
-import Dt from "@mui/material/Collapse";
-import z from "@mui/material/Divider";
+import St from "@mui/material/Button";
+import { useTheme as Tt } from "@mui/material";
+import { e as Mt } from "../exportTransactionsToCSV-BU1jTY0Q.mjs";
+import { T as Dt, a as xt } from "../TransactionDetails-CPwv9xtZ.mjs";
+import wt from "@mui/material/Collapse";
+import F from "@mui/material/Divider";
 import J from "@mui/material/List";
 import Q from "@mui/material/ListItem";
-import xt from "@mui/material/ListItemButton";
-import { u as vt } from "../useScreenSize-B6JyS_Lj.mjs";
-import { D as Z } from "../Drawer-Dqe5EqvA.mjs";
-import { b as x } from "../Category-Ccoew_sA.mjs";
-import { A as tt, W as wt } from "../WidgetContainer-B1Jzb4XA.mjs";
-const G = ({ amount: n, label: d }) => /* @__PURE__ */ s(b, { direction: "column", children: [
-  /* @__PURE__ */ t(C, { bold: !0, sx: { textTransform: "none" }, variant: "Body", children: d }),
-  /* @__PURE__ */ t(C, { variant: "XSmall", children: R(n, "0,0") })
-] }), Lt = () => {
-  const n = mt(), { goals: d, spending: o } = L(), { categories: r, dateRangeCategoryTotals: a } = W(), c = i.useMemo(
+import Z from "@mui/material/ListItemButton";
+import { u as Lt } from "../useScreenSize-B6JyS_Lj.mjs";
+import { D as tt } from "../Drawer-Bet2ZPJo.mjs";
+import { b as L } from "../Category-Ccoew_sA.mjs";
+import { A as et, W as vt } from "../WidgetContainer-mzejMmz2.mjs";
+const O = ({ amount: n, label: d, variant: a = "full" }) => /* @__PURE__ */ c(b, { direction: "column", children: [
+  /* @__PURE__ */ t(T, { bold: !0, sx: { textTransform: "none" }, variant: "Body", children: d }),
+  /* @__PURE__ */ t(T, { variant: "XSmall", children: R(n, a === "mini" ? "0,0" : "0,0.00") })
+] }), At = () => {
+  const n = yt(), { goals: d, spending: a } = I(), { categories: o, dateRangeCategoryTotals: i } = E(), g = l.useMemo(
     () => [
       n.palette.chartMono.chartMono5,
       n.palette.chartMono.chartMono4,
@@ -42,54 +43,56 @@ const G = ({ amount: n, label: d }) => /* @__PURE__ */ s(b, { direction: "column
       n.palette.chartMono.chartMono6
     ],
     [n]
-  ), [e, l] = i.useState(""), [g, _] = i.useState(0), m = i.useMemo(
-    () => it(r, d, n, a),
-    [r, a]
-  ), p = i.useMemo(
-    () => rt(r, a, c),
-    [r, a, c]
-  ), A = (y, T) => {
-    _(T), l("");
-  }, f = (y) => {
-    l(e === y ? "" : y);
+  ), [e, r] = l.useState(""), [p, _] = l.useState(0), u = l.useMemo(
+    () => rt(o, d, n, i),
+    [o, i]
+  ), m = l.useMemo(
+    () => st(o, i, g),
+    [o, i, g]
+  ), M = (f, D) => {
+    _(D), r("");
+  }, y = (f) => {
+    r(e === f ? "" : f);
   };
-  return /* @__PURE__ */ s(v, { width: "100%", children: [
-    /* @__PURE__ */ s(
-      at,
+  return /* @__PURE__ */ c(v, { width: "100%", children: [
+    /* @__PURE__ */ c(
+      it,
       {
-        "aria-label": o.mini_title,
-        onChange: A,
-        value: g,
+        "aria-label": a.mini_title,
+        onChange: M,
+        value: p,
         variant: "fullWidth",
         children: [
           /* @__PURE__ */ t(
-            k,
+            N,
             {
               "aria-controls": "spending-tabpanel",
               id: "spending-tab",
               label: /* @__PURE__ */ t(
-                G,
+                O,
                 {
-                  amount: m.totalAmount,
-                  label: o.spend_tab_title
+                  amount: u.totalAmount,
+                  label: a.spend_tab_title,
+                  variant: "mini"
                 }
               ),
-              tabIndex: g === 0 ? 0 : -1
+              tabIndex: p === 0 ? 0 : -1
             }
           ),
           /* @__PURE__ */ t(
-            k,
+            N,
             {
               "aria-controls": "income-tabpanel",
               id: "income-tab",
               label: /* @__PURE__ */ t(
-                G,
+                O,
                 {
-                  amount: p.totalAmount,
-                  label: o.income_tab_title
+                  amount: m.totalAmount,
+                  label: a.income_tab_title,
+                  variant: "mini"
                 }
               ),
-              tabIndex: g === 1 ? 0 : -1
+              tabIndex: p === 1 ? 0 : -1
             }
           )
         ]
@@ -99,20 +102,20 @@ const G = ({ amount: n, label: d }) => /* @__PURE__ */ s(b, { direction: "column
       v,
       {
         "aria-labelledby": "spending-tab",
-        hidden: g !== 0,
+        hidden: p !== 0,
         id: "spending-tabpanel",
         role: "tabpanel",
-        children: /* @__PURE__ */ s(b, { direction: "row", gap: 16, justifyContent: "center", p: 24, children: [
+        children: /* @__PURE__ */ c(b, { direction: "row", gap: 16, justifyContent: "center", p: 24, children: [
           /* @__PURE__ */ t(
-            B,
+            k,
             {
-              data: m,
-              onSelected: f,
+              data: u,
+              onSelected: y,
               selectedId: e,
-              totalLabel: o.total_spending
+              totalLabel: a.total_spending
             }
           ),
-          /* @__PURE__ */ t(Y, { data: m, onSelected: f, selectedId: e })
+          /* @__PURE__ */ t(Y, { data: u, onSelected: y, selectedId: e })
         ] })
       }
     ),
@@ -120,59 +123,60 @@ const G = ({ amount: n, label: d }) => /* @__PURE__ */ s(b, { direction: "column
       v,
       {
         "aria-labelledby": "income-tab",
-        hidden: g !== 1,
+        hidden: p !== 1,
         id: "income-tabpanel",
         role: "tabpanel",
-        children: /* @__PURE__ */ s(b, { direction: "row", gap: 16, justifyContent: "center", p: 24, children: [
+        children: /* @__PURE__ */ c(b, { direction: "row", gap: 16, justifyContent: "center", p: 24, children: [
           /* @__PURE__ */ t(
-            B,
+            k,
             {
-              data: p,
+              data: m,
               isIncome: !0,
-              onSelected: f,
+              onSelected: y,
               selectedId: e,
-              totalLabel: o.total_income
+              totalLabel: a.total_income
             }
           ),
-          /* @__PURE__ */ t(Y, { data: p, onSelected: f, selectedId: e })
+          /* @__PURE__ */ t(Y, { data: m, onSelected: y, selectedId: e })
         ] })
       }
     )
   ] });
-}, At = w(Lt), It = ({ onPrimaryCtaClick: n, sx: d = {} }) => {
-  const { isAccountDataLoaded: o, loadAccountData: r, visibleAccounts: a } = st(), { categoriesLoaded: c, loadCategories: e, loadDateRangeCategoryTotals: l } = W(), { spending: g } = L(), { isInitialized: _, selectedAccounts: m, setSelectedAccounts: p } = P();
-  return i.useEffect(() => {
-    o || r().finally(), c || e().finally();
-  }, []), i.useEffect(() => {
-    p(a);
-  }, [a]), i.useEffect(() => {
-    l(
-      m,
-      nt(/* @__PURE__ */ new Date()),
+}, It = A(At), Et = ({ onPrimaryCtaClick: n, sx: d = {} }) => {
+  const { isAccountDataLoaded: a, loadAccountData: o } = lt(), { dateRangeTotalsLoaded: i, categoriesLoaded: g, loadCategories: e, loadDateRangeCategoryTotals: r } = E(), { spending: p } = I(), { isInitialized: _, selectedAccounts: u } = z();
+  return gt({
+    widgetName: "SpendingMiniWidget",
+    isLoaded: i
+  }), l.useEffect(() => {
+    a || o().finally(), g || e().finally();
+  }, []), l.useEffect(() => {
+    r(
+      u,
+      at(/* @__PURE__ */ new Date()),
       ot(/* @__PURE__ */ new Date())
     ).finally();
-  }, [m]), _ ? /* @__PURE__ */ t(
-    _t,
+  }, [u]), _ ? /* @__PURE__ */ t(
+    Ct,
     {
       className: "mx-exp-spending-miniwidget",
       onPrimaryCtaClick: n,
-      primaryCtaLabel: g.primary_cta,
+      primaryCtaLabel: p.primary_cta,
       sx: { height: "100%", ...d },
-      title: g.mini_title,
-      children: /* @__PURE__ */ t(At, {})
+      title: p.mini_title,
+      children: /* @__PURE__ */ t(It, {})
     }
-  ) : /* @__PURE__ */ t(lt, {});
-}, me = w(It), Et = ({
+  ) : /* @__PURE__ */ t(dt, {});
+}, fe = A(Et), Wt = ({
   data: n,
   onSelected: d,
-  selectedId: o = "",
-  title: r
+  selectedId: a = "",
+  title: o
 }) => {
-  const { spending: a } = L(), c = n.categoryData.find((e) => e.guid === o);
-  return /* @__PURE__ */ s(b, { direction: "column", justifyContent: "center", maxWidth: 400, minWidth: 275, width: "100%", children: [
-    /* @__PURE__ */ t(C, { bold: !0, sx: { py: 12 }, children: `${r} ${a.by_category}` }),
-    /* @__PURE__ */ t(z, { "aria-hidden": "true" }),
-    /* @__PURE__ */ t(J, { children: n.categoryData.map((e) => /* @__PURE__ */ s(i.Fragment, { children: [
+  const { spending: i } = I(), g = n.categoryData.find((e) => e.guid === a);
+  return /* @__PURE__ */ c(b, { direction: "column", justifyContent: "center", maxWidth: 400, minWidth: 275, width: "100%", children: [
+    /* @__PURE__ */ t(T, { bold: !0, id: "spending-list-title", sx: { py: 12 }, variant: "h3", children: `${o} ${i.by_category}` }),
+    /* @__PURE__ */ t(F, { "aria-hidden": "true" }),
+    /* @__PURE__ */ t(J, { "aria-labelledby": "spending-list-title", children: n.categoryData.map((e) => /* @__PURE__ */ c(l.Fragment, { children: [
       /* @__PURE__ */ t(
         Q,
         {
@@ -181,10 +185,11 @@ const G = ({ amount: n, label: d }) => /* @__PURE__ */ s(b, { direction: "column
           sx: {
             minHeight: 44
           },
-          children: /* @__PURE__ */ s(
-            xt,
+          children: /* @__PURE__ */ c(
+            Z,
             {
-              "aria-expanded": c?.guid === e.guid,
+              "aria-expanded": g?.guid === e.guid,
+              id: `spending-list-category-${e.guid}`,
               onClick: () => d(e.guid),
               sx: { minHeight: 44, px: 8, py: 0 },
               children: [
@@ -198,7 +203,7 @@ const G = ({ amount: n, label: d }) => /* @__PURE__ */ s(b, { direction: "column
                     width: 8
                   }
                 ),
-                /* @__PURE__ */ s(
+                /* @__PURE__ */ c(
                   b,
                   {
                     alignItems: "center",
@@ -206,8 +211,8 @@ const G = ({ amount: n, label: d }) => /* @__PURE__ */ s(b, { direction: "column
                     justifyContent: "space-between",
                     width: "100%",
                     children: [
-                      /* @__PURE__ */ t(C, { bold: o === e.guid, children: e.name }),
-                      /* @__PURE__ */ t(C, { bold: o === e.guid, variant: "Body", children: R(e.amount, "0,0") })
+                      /* @__PURE__ */ t(T, { bold: a === e.guid, children: e.name }),
+                      /* @__PURE__ */ t(T, { bold: a === e.guid, variant: "Body", children: R(e.amount, "0,0.00") })
                     ]
                   }
                 )
@@ -216,40 +221,47 @@ const G = ({ amount: n, label: d }) => /* @__PURE__ */ s(b, { direction: "column
           )
         }
       ),
-      /* @__PURE__ */ t(z, {}),
-      e.categoryTotals && e.categoryTotals.length > 0 && /* @__PURE__ */ t(Dt, { in: c?.guid === e.guid, unmountOnExit: !0, children: /* @__PURE__ */ s(J, { children: [
-        c?.categoryTotals?.map((l) => /* @__PURE__ */ t(
+      /* @__PURE__ */ t(F, {}),
+      e.categoryTotals && e.categoryTotals.length > 0 && /* @__PURE__ */ t(wt, { in: g?.guid === e.guid, unmountOnExit: !0, children: /* @__PURE__ */ c(J, { children: [
+        g?.categoryTotals?.map((r) => /* @__PURE__ */ t(
           Q,
           {
             sx: {
-              pl: 24,
-              pr: 8,
+              pl: 12,
               py: 0
             },
-            children: /* @__PURE__ */ s(b, { direction: "row", justifyContent: "space-between", width: "100%", children: [
-              /* @__PURE__ */ s(C, { children: [
-                l.name,
-                " "
-              ] }),
-              /* @__PURE__ */ t(C, { children: R(l.amount, "0,0") })
-            ] })
+            children: /* @__PURE__ */ t(
+              Z,
+              {
+                id: `spending-list-subcategory-${r.guid}`,
+                onClick: () => d(r.guid, !0),
+                sx: { minHeight: 44, px: 8, py: 0 },
+                children: /* @__PURE__ */ c(b, { direction: "row", justifyContent: "space-between", width: "100%", children: [
+                  /* @__PURE__ */ c(T, { children: [
+                    r.name,
+                    " "
+                  ] }),
+                  /* @__PURE__ */ t(T, { children: R(r.amount, "0,0.00") })
+                ] })
+              }
+            )
           },
-          l.guid
+          r.guid
         )),
-        /* @__PURE__ */ t(z, {})
+        /* @__PURE__ */ t(F, {})
       ] }) })
     ] }, e.guid)) }),
-    /* @__PURE__ */ t(C, { bold: !0, sx: { mt: 12, pr: 8, textAlign: "right" }, children: `${a.total}: ${R(n.totalAmount, "0,0")}` })
+    /* @__PURE__ */ t(T, { bold: !0, sx: { mt: 12, pr: 8, textAlign: "right" }, children: `${i.total}: ${R(n.totalAmount, "0,0.00")}` })
   ] });
-}, Wt = w(Et), Nt = ({
+}, Rt = A(Wt), Nt = ({
   data: n,
   onSelected: d,
-  onViewTransactions: o,
-  selectedId: r,
-  title: a
+  onViewTransactions: a,
+  selectedId: o,
+  title: i
 }) => {
-  const { isDesktop: c, isMobile: e } = vt(), { isLoadingCategoryTotals: l } = W(), { spending: g } = L();
-  return /* @__PURE__ */ s(
+  const { isDesktop: g, isMobile: e } = Lt(), { dateRangeTotalsLoading: r } = E(), { spending: p } = I();
+  return /* @__PURE__ */ c(
     b,
     {
       alignItems: e ? "center" : "flex-start",
@@ -259,8 +271,8 @@ const G = ({ amount: n, label: d }) => /* @__PURE__ */ s(b, { direction: "column
       pt: 50,
       px: 8,
       children: [
-        l && /* @__PURE__ */ t(
-          B,
+        r && /* @__PURE__ */ t(
+          k,
           {
             data: {
               categoryData: [],
@@ -270,103 +282,114 @@ const G = ({ amount: n, label: d }) => /* @__PURE__ */ s(b, { direction: "column
             onSelected: () => {
             },
             selectedId: "",
-            size: c ? 400 : 300,
+            size: g ? 400 : 300,
             totalLabel: "Loading ...",
             variant: "full"
           }
         ),
-        !l && /* @__PURE__ */ t(
-          B,
+        !r && /* @__PURE__ */ t(
+          k,
           {
             data: n,
-            onSelected: d,
-            onViewTransactions: o,
-            selectedId: r,
-            size: c ? 400 : 300,
-            totalLabel: g.total_amount,
+            onSelected: (m) => {
+              d(m), setTimeout(() => document.getElementById(`spending-list-category-${m}`)?.focus(), 0);
+            },
+            onViewTransactions: a,
+            selectedId: o,
+            size: g ? 400 : 300,
+            totalLabel: p.total_amount,
             variant: "full"
           }
         ),
-        /* @__PURE__ */ t(Wt, { data: n, onSelected: d, selectedId: r, title: a })
+        /* @__PURE__ */ t(Rt, { data: n, onSelected: d, selectedId: o, title: i })
       ]
     }
   );
-}, et = w(Nt), Ot = (n) => [
+}, nt = A(Nt), kt = (n) => [
   n.palette.chartMono.chartMono5,
   n.palette.chartMono.chartMono4,
   n.palette.chartMono.chartMono3,
   n.palette.chartMono.chartMono2,
   n.palette.chartMono.chartMono1,
   n.palette.chartMono.chartMono6
-], Rt = () => {
-  const n = Ct(), { is_mobile_webview: d } = F(), { clientConfig: o } = F(), { categories: r, dateRangeCategoryTotals: a } = W(), {
-    goals: c,
+], Ot = () => {
+  const n = Tt(), { is_mobile_webview: d } = V(), { clientConfig: a } = V(), { categories: o, dateRangeCategoryTotals: i } = E(), {
+    goals: g,
     spending: e,
-    transactions: l
-  } = L(), { displayedDateRange: g, selectedAccountGuids: _ } = P(), {
-    setFilter: m,
-    sortedTransactions: p,
-    sortedTransactionsWithSplits: A,
-    tags: f
-  } = ct(), y = o?.master?.deep_link_params?.account_guids, T = o?.master?.deep_link_params?.view, [M, N] = i.useState(""), [D, S] = i.useState(T === "income" ? 1 : 0), [O, I] = i.useState(""), [dt, H] = i.useState(!1), j = i.useMemo(
-    () => it(r, c, n, a),
-    [r, a]
-  ), K = i.useMemo(
-    () => rt(r, a, Ot(n)),
-    [r, a]
-  ), $ = i.useMemo(
-    () => p.find((u) => u.guid === O),
-    [O, p]
-  ), gt = (u, E) => {
-    S(E), N("");
-  }, U = (u) => {
-    N(M === u || u === "0" ? "" : u);
-  }, X = (u) => {
-    const E = {
-      accounts: y || _,
-      dateRange: g
+    transactions: r
+  } = I(), { displayedDateRange: p, selectedAccountGuids: _ } = z(), {
+    setFilter: u,
+    sortedTransactions: m,
+    sortedTransactionsWithSplits: M,
+    tags: y
+  } = ct(), f = a?.master?.deep_link_params?.account_guids, D = a?.master?.deep_link_params?.view, [x, C] = l.useState(""), [w, W] = l.useState(D === "income" ? 1 : 0), [H, P] = l.useState(""), [pt, $] = l.useState(!1), B = l.useMemo(
+    () => rt(o, g, n, i),
+    [o, i]
+  ), K = l.useMemo(
+    () => st(o, i, kt(n)),
+    [o, i]
+  ), G = l.useMemo(
+    () => m.find((s) => s.guid === H),
+    [H, m]
+  ), ut = (s, S) => {
+    W(S), C("");
+  }, U = (s, S = !1) => {
+    S ? mt(s) : C(x === s || s === "0" ? "" : s);
+  }, mt = (s) => {
+    u({
+      ...{
+        accounts: f || _,
+        dateRange: p
+      },
+      custom: (h) => x === "other" ? h.top_level_category_guid === s : h.category_guid === s,
+      showSplits: !0
+    }), $(!0);
+  }, X = (s) => {
+    const S = {
+      accounts: f || _,
+      dateRange: p
     };
-    if (D === 0)
-      if (u === "other") {
-        const h = j.categoryData.find((V) => V.guid === "other");
-        m({
-          ...E,
-          custom: (V) => !!h?.categoryTotals?.find((ut) => ut.guid === V.top_level_category_guid)
+    if (w === 0)
+      if (s === "other") {
+        const h = B.categoryData.find((j) => j.guid === "other");
+        u({
+          ...S,
+          custom: (j) => !!h?.categoryTotals?.find((ft) => ft.guid === j.top_level_category_guid)
         });
       } else
-        m({
-          ...E,
-          custom: (h) => u ? h.top_level_category_guid === u : h.top_level_category_guid !== x.INCOME && h.category_guid !== x.INCOME && h.top_level_category_guid !== x.INVESTMENTS && h.top_level_category_guid !== x.TRANSFER,
-          showSplits: !!u
+        u({
+          ...S,
+          custom: (h) => s ? h.top_level_category_guid === s : h.top_level_category_guid !== L.INCOME && h.category_guid !== L.INCOME && h.top_level_category_guid !== L.INVESTMENTS && h.top_level_category_guid !== L.TRANSFER,
+          showSplits: !!s
         });
     else
-      m({
-        ...E,
-        custom: (h) => u ? h.category_guid === u : h.category_guid === x.INCOME || h.top_level_category_guid === x.INCOME
+      u({
+        ...S,
+        custom: (h) => s ? h.category_guid === s : h.category_guid === L.INCOME || h.top_level_category_guid === L.INCOME
       });
-    H(!0);
-  }, pt = () => {
-    St(A, f);
+    $(!0);
+  }, ht = () => {
+    Mt(M, y);
   };
-  return /* @__PURE__ */ s(v, { children: [
-    /* @__PURE__ */ s(at, { onChange: gt, value: D, variant: "fullWidth", children: [
+  return /* @__PURE__ */ c(v, { children: [
+    /* @__PURE__ */ c(it, { onChange: ut, value: w, variant: "fullWidth", children: [
       /* @__PURE__ */ t(
-        k,
+        N,
         {
           label: /* @__PURE__ */ t(
-            G,
+            O,
             {
-              amount: j.totalAmount,
+              amount: B.totalAmount,
               label: e.spend_tab_title
             }
           )
         }
       ),
       /* @__PURE__ */ t(
-        k,
+        N,
         {
           label: /* @__PURE__ */ t(
-            G,
+            O,
             {
               amount: K.totalAmount,
               label: e.income_tab_title
@@ -375,96 +398,88 @@ const G = ({ amount: n, label: d }) => /* @__PURE__ */ s(b, { direction: "column
         }
       )
     ] }),
-    D === 0 && /* @__PURE__ */ t(
-      et,
+    w === 0 && /* @__PURE__ */ t(
+      nt,
       {
-        data: j,
+        data: B,
         onSelected: U,
         onViewTransactions: X,
-        selectedId: M,
+        selectedId: x,
         title: e.spend_tab_title
       }
     ),
-    D === 1 && /* @__PURE__ */ t(
-      et,
+    w === 1 && /* @__PURE__ */ t(
+      nt,
       {
         data: K,
         onSelected: U,
         onViewTransactions: X,
-        selectedId: M,
+        selectedId: x,
         title: e.income_tab_title
       }
     ),
     /* @__PURE__ */ t(
-      Z,
+      tt,
       {
         ariaLabelClose: e.close_drawer_aria,
-        isOpen: dt,
-        onClose: () => H(!1),
+        isOpen: pt,
+        onClose: () => $(!1),
         title: e.transactions_drawer_title,
-        children: /* @__PURE__ */ s(b, { children: [
-          !d && p.length > 0 && /* @__PURE__ */ t(b, { direction: "row", justifyContent: "right", mb: -24, mr: 8, mt: 8, zIndex: 1, children: /* @__PURE__ */ t(
-            yt,
+        children: /* @__PURE__ */ c(b, { children: [
+          !d && m.length > 0 && /* @__PURE__ */ t(b, { direction: "row", justifyContent: "right", mb: -24, mr: 8, mt: 8, zIndex: 1, children: /* @__PURE__ */ t(
+            St,
             {
-              onClick: pt,
-              startIcon: /* @__PURE__ */ t(ht, { name: "ios_share" }),
+              onClick: ht,
+              startIcon: /* @__PURE__ */ t(_t, { name: "ios_share" }),
               variant: "text",
-              children: l.export_csv_btn
+              children: r.export_csv_btn
             }
           ) }),
-          /* @__PURE__ */ t(Tt, { onClick: I })
+          /* @__PURE__ */ t(Dt, { onClick: P })
         ] })
       }
     ),
     /* @__PURE__ */ t(
-      Z,
+      tt,
       {
         ariaLabelClose: e.close_drawer_aria,
-        isOpen: !!$,
-        onClose: () => I(""),
+        isOpen: !!G,
+        onClose: () => P(""),
         title: e.transaction_details_drawer_title,
-        children: $ && /* @__PURE__ */ t(Mt, { transaction: $ })
+        children: G && /* @__PURE__ */ t(xt, { transaction: G })
       }
     )
   ] });
-}, kt = w(Rt), Bt = ({ onBackClick: n, sx: d = {} }) => {
-  const { visibleAccounts: o, isAccountDataLoaded: r, loadAccountData: a } = st(), { categoriesLoaded: c, loadCategories: e, loadDateRangeCategoryTotals: l } = W(), { isTransactionDataLoaded: g, loadTransactionData: _ } = ct(), { spending: m } = L(), {
-    displayedDateRange: p,
-    isInitialized: A,
-    setDisplayedDate: f,
-    setSelectedAccounts: y,
-    selectedAccounts: T
-  } = P(), { onEvent: M } = ft(), { onLoad: N } = bt(), { clientConfig: D } = F(), S = D?.master?.deep_link_params?.date_range;
-  i.useEffect(() => {
-    S && Array.isArray(S) && S.length === 2 ? f(S[0], S[1]) : f(nt(q()), ot(q())), r || a().finally(), c || e().finally(), g || _().finally(), M(tt.SPENDING_VIEW);
-  }, []), i.useEffect(() => {
-    y(o);
-  }, [o]), i.useEffect(() => {
-    l(
-      T,
-      p.start,
-      p.end
-    ).finally(() => {
-      N?.("SpendingWidget");
-    });
-  }, [p, T]);
-  const O = (I) => {
-    f(I[0], I[1]);
+}, $t = A(Ot), Bt = ({ onBackClick: n, sx: d = {} }) => {
+  const { isAccountDataLoaded: a, loadAccountData: o } = lt(), { categoriesLoaded: i, dateRangeTotalsLoaded: g, loadCategories: e, loadDateRangeCategoryTotals: r } = E(), { isTransactionDataLoaded: p, loadTransactionData: _ } = ct(), { spending: u } = I(), { displayedDateRange: m, isInitialized: M, setDisplayedDate: y, selectedAccounts: f } = z(), { onEvent: D } = bt(), { clientConfig: x } = V(), C = x?.master?.deep_link_params?.date_range;
+  gt({
+    widgetName: "SpendingWidget",
+    isLoaded: g
+  }), l.useEffect(() => {
+    C && Array.isArray(C) && C.length === 2 ? y(C[0], C[1]) : y(at(q()), ot(q())), a || o().finally(), i || e().finally(), p || _().finally(), D(et.SPENDING_VIEW);
+  }, []), l.useEffect(() => {
+    M && r(
+      f,
+      m.start,
+      m.end
+    ).finally();
+  }, [m, M, f]);
+  const w = (W) => {
+    y(W[0], W[1]);
   };
-  return A ? /* @__PURE__ */ t(
-    wt,
+  return M ? /* @__PURE__ */ t(
+    vt,
     {
-      accountOptions: o,
-      calendarActions: { onRangeChanged: O },
-      onAccountsFilterClick: () => M(tt.SPENDING_CLICK_FILTER),
+      calendarActions: { onRangeChanged: w },
+      onAccountsFilterClick: () => D(et.SPENDING_CLICK_FILTER),
       onBackClick: n,
       sx: d,
-      title: m.title,
-      children: /* @__PURE__ */ t(v, { height: "calc(100dvh - 150px)", overflow: "scroll", width: "100%", children: /* @__PURE__ */ t(kt, {}) })
+      title: u.title,
+      children: /* @__PURE__ */ t(v, { width: "100%", children: /* @__PURE__ */ t($t, {}) })
     }
-  ) : /* @__PURE__ */ t(lt, {});
-}, he = w(Bt);
+  ) : /* @__PURE__ */ t(dt, {});
+}, ye = A(Bt);
 export {
-  me as SpendingMiniWidget,
-  he as SpendingWidget
+  fe as SpendingMiniWidget,
+  ye as SpendingWidget
 };