@mx-cartographer/experiences 8.0.19 → 8.0.21

package/dist/spending/index.es.js

@@ -1,17 +1,17 @@
 import { jsxs as p, jsx as t } from "react/jsx-runtime";
 import l from "react";
-import { observer as L } from "mobx-react-lite";
+import { observer as I } from "mobx-react-lite";
 import { startOfMonth as ot } from "date-fns/startOfMonth";
 import { endOfMonth as at } from "date-fns/endOfMonth";
-import w from "@mui/material/Box";
-import C from "@mui/material/Stack";
-import N from "@mui/material/Tab";
+import L from "@mui/material/Box";
+import y from "@mui/material/Stack";
+import $ from "@mui/material/Tab";
 import it from "@mui/material/Tabs";
 import _t from "@mui/material/styles/useTheme";
-import { g as rt, a as st, S as $, b as Y } from "../SpendingLegend-BCnXkPCD.mjs";
+import { g as rt, a as st, S as O, b as Y } from "../SpendingLegend-CypdabwS.mjs";
 import { Text as T, Icon as bt } from "@mxenabled/mxui";
-import { f as R } from "../NumberFormatting-QCaNwbjv.mjs";
-import { u as I, l as A, d as lt, b as V, a as F, h as ct, g as yt } from "../hooks-BxkfR-Ff.mjs";
+import { f as N } from "../NumberFormatting-QCaNwbjv.mjs";
+import { u as A, l as W, d as lt, b as z, a as V, h as ct, g as yt } from "../hooks-BxkfR-Ff.mjs";
 import { u as dt } from "../useWidgetLoadTimer-DgN1bTyu.mjs";
 import { L as gt } from "../Loader-D3rjKx72.mjs";
 import { M as Ct } from "../MiniWidgetContainer-Bhkv-hpz.mjs";
@@ -19,24 +19,24 @@ import { startOfToday as q } from "date-fns/startOfToday";
 import St from "@mui/material/Button";
 import { useTheme as Tt } from "@mui/material";
 import { e as Mt } from "../exportTransactionsToCSV-DgdB3TBt.mjs";
-import { T as Dt } from "../EmbeddedCard-xngm4vLT.mjs";
-import { T as xt } from "../TransactionDetails-KklNHa-s.mjs";
+import { T as Dt } from "../EmbeddedCard-D0Pgpiuq.mjs";
+import { T as xt } from "../TransactionDetails-D57Cfnwh.mjs";
 import vt from "@mui/material/Collapse";
 import wt from "@mui/material/Divider";
 import J from "@mui/material/List";
 import Q from "@mui/material/ListItem";
 import X from "@mui/material/ListItemButton";
-import { u as Lt } from "../useScreenSize-B6JyS_Lj.mjs";
+import { u as Lt } from "../useScreenSize-CUcpY7aJ.mjs";
 import { D as Z } from "../Drawer-Bbe4AMB1.mjs";
-import { b as v } from "../Category-CevNQ03n.mjs";
+import { b as w } from "../Category-CevNQ03n.mjs";
 import { parseISO as tt } from "date-fns/parseISO";
 import { A as et } from "../Analytics-0Xm_BjHU.mjs";
-import { W as It } from "../WidgetContainer-D-pbSa7L.mjs";
-const O = ({ amount: n, label: d, variant: o = "full" }) => /* @__PURE__ */ p(C, { direction: "column", children: [
+import { W as It } from "../WidgetContainer-DYKMArWw.mjs";
+const k = ({ amount: n, label: d, variant: o = "full" }) => /* @__PURE__ */ p(y, { direction: "column", children: [
   /* @__PURE__ */ t(T, { bold: !0, sx: { textTransform: "none" }, variant: "body1", children: d }),
-  /* @__PURE__ */ t(T, { variant: "caption", children: R(n, o === "mini" ? "0,0" : "0,0.00") })
+  /* @__PURE__ */ t(T, { variant: "caption", children: N(n, o === "mini" ? "0,0" : "0,0.00") })
 ] }), At = () => {
-  const n = _t(), { goals: d, spending: o } = I(), { categories: a, dateRangeCategoryTotals: i } = A(), g = l.useMemo(
+  const n = _t(), { goals: d, spending: o } = A(), { categories: a, dateRangeCategoryTotals: i } = W(), g = l.useMemo(
     () => [
       n.palette.chartMono.chartMono5,
       n.palette.chartMono.chartMono4,
@@ -49,15 +49,15 @@ const O = ({ amount: n, label: d, variant: o = "full" }) => /* @__PURE__ */ p(C,
   ), [e, r] = l.useState(""), [c, b] = l.useState(0), u = l.useMemo(
     () => rt(a, d, n, i),
     [a, i]
-  ), m = l.useMemo(
+  ), h = l.useMemo(
     () => st(a, i, g),
     [a, i, g]
-  ), M = (f, D) => {
-    b(D), r("");
-  }, y = (f) => {
+  ), M = (f, x) => {
+    b(x), r("");
+  }, _ = (f) => {
     r(e === f ? "" : f);
   };
-  return /* @__PURE__ */ p(w, { width: "100%", children: [
+  return /* @__PURE__ */ p(L, { width: "100%", children: [
     /* @__PURE__ */ p(
       it,
       {
@@ -67,12 +67,12 @@ const O = ({ amount: n, label: d, variant: o = "full" }) => /* @__PURE__ */ p(C,
         variant: "fullWidth",
         children: [
           /* @__PURE__ */ t(
-            N,
+            $,
             {
               "aria-controls": "spending-tabpanel",
               id: "spending-tab",
               label: /* @__PURE__ */ t(
-                O,
+                k,
                 {
                   amount: u.totalAmount,
                   label: o.spend_tab_title,
@@ -83,14 +83,14 @@ const O = ({ amount: n, label: d, variant: o = "full" }) => /* @__PURE__ */ p(C,
             }
           ),
           /* @__PURE__ */ t(
-            N,
+            $,
             {
               "aria-controls": "income-tabpanel",
               id: "income-tab",
               label: /* @__PURE__ */ t(
-                O,
+                k,
                 {
-                  amount: m.totalAmount,
+                  amount: h.totalAmount,
                   label: o.income_tab_title,
                   variant: "mini"
                 }
@@ -102,51 +102,51 @@ const O = ({ amount: n, label: d, variant: o = "full" }) => /* @__PURE__ */ p(C,
       }
     ),
     /* @__PURE__ */ t(
-      w,
+      L,
       {
         "aria-labelledby": "spending-tab",
         hidden: c !== 0,
         id: "spending-tabpanel",
         role: "tabpanel",
-        children: /* @__PURE__ */ p(C, { direction: "row", gap: 16, justifyContent: "center", p: 24, children: [
+        children: /* @__PURE__ */ p(y, { direction: "row", gap: 16, justifyContent: "center", p: 24, children: [
           /* @__PURE__ */ t(
-            $,
+            O,
             {
               data: u,
-              onSelected: y,
+              onSelected: _,
               selectedId: e,
               totalLabel: o.total_spending
             }
           ),
-          /* @__PURE__ */ t(Y, { data: u, onSelected: y, selectedId: e })
+          /* @__PURE__ */ t(Y, { data: u, onSelected: _, selectedId: e })
         ] })
       }
     ),
     /* @__PURE__ */ t(
-      w,
+      L,
       {
         "aria-labelledby": "income-tab",
         hidden: c !== 1,
         id: "income-tabpanel",
         role: "tabpanel",
-        children: /* @__PURE__ */ p(C, { direction: "row", gap: 16, justifyContent: "center", p: 24, children: [
+        children: /* @__PURE__ */ p(y, { direction: "row", gap: 16, justifyContent: "center", p: 24, children: [
           /* @__PURE__ */ t(
-            $,
+            O,
             {
-              data: m,
+              data: h,
               isIncome: !0,
-              onSelected: y,
+              onSelected: _,
               selectedId: e,
               totalLabel: o.total_income
             }
           ),
-          /* @__PURE__ */ t(Y, { data: m, onSelected: y, selectedId: e })
+          /* @__PURE__ */ t(Y, { data: h, onSelected: _, selectedId: e })
         ] })
       }
     )
   ] });
-}, Et = L(At), Wt = ({ onPrimaryCtaClick: n, sx: d = {} }) => {
-  const { isAccountDataLoaded: o, loadAccountData: a } = lt(), { dateRangeTotalsLoaded: i, categoriesLoaded: g, loadCategories: e, loadDateRangeCategoryTotals: r } = A(), { spending: c } = I(), { isInitialized: b, selectedAccounts: u } = V();
+}, Et = I(At), Wt = ({ onPrimaryCtaClick: n, sx: d = {} }) => {
+  const { isAccountDataLoaded: o, loadAccountData: a } = lt(), { dateRangeTotalsLoaded: i, categoriesLoaded: g, loadCategories: e, loadDateRangeCategoryTotals: r } = W(), { spending: c } = A(), { isInitialized: b, selectedAccounts: u } = z();
   return dt({
     widgetName: "SpendingMiniWidget",
     isLoaded: i
@@ -170,14 +170,14 @@ const O = ({ amount: n, label: d, variant: o = "full" }) => /* @__PURE__ */ p(C,
       children: /* @__PURE__ */ t(Et, {})
     }
   ) : /* @__PURE__ */ t(gt, {});
-}, Ce = L(Wt), Rt = ({
+}, Ce = I(Wt), Rt = ({
   data: n,
   onSelected: d,
   selectedId: o = "",
   title: a
 }) => {
-  const { spending: i } = I(), g = n.categoryData.find((e) => e.guid === o);
-  return /* @__PURE__ */ p(C, { direction: "column", justifyContent: "center", maxWidth: 400, minWidth: 275, width: "100%", children: [
+  const { spending: i } = A(), g = n.categoryData.find((e) => e.guid === o);
+  return /* @__PURE__ */ p(y, { 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: `${a} ${i.by_category}` }),
     /* @__PURE__ */ t(wt, { "aria-hidden": "true" }),
     /* @__PURE__ */ t(J, { "aria-labelledby": "spending-list-title", children: n.categoryData.map((e) => /* @__PURE__ */ p(l.Fragment, { children: [
@@ -200,7 +200,7 @@ const O = ({ amount: n, label: d, variant: o = "full" }) => /* @__PURE__ */ p(C,
               sx: { minHeight: 44, px: 8, py: 0 },
               children: [
                 /* @__PURE__ */ t(
-                  w,
+                  L,
                   {
                     "aria-hidden": "true",
                     borderRadius: 4,
@@ -212,7 +212,7 @@ const O = ({ amount: n, label: d, variant: o = "full" }) => /* @__PURE__ */ p(C,
                   }
                 ),
                 /* @__PURE__ */ p(
-                  C,
+                  y,
                   {
                     alignItems: "center",
                     direction: "row",
@@ -220,7 +220,7 @@ const O = ({ amount: n, label: d, variant: o = "full" }) => /* @__PURE__ */ p(C,
                     width: "100%",
                     children: [
                       /* @__PURE__ */ t(T, { bold: o === e.guid, children: e.name }),
-                      /* @__PURE__ */ t(T, { bold: o === e.guid, variant: "body1", children: R(e.amount, "0,0.00") })
+                      /* @__PURE__ */ t(T, { bold: o === e.guid, variant: "body1", children: N(e.amount, "0,0.00") })
                     ]
                   }
                 )
@@ -242,12 +242,12 @@ const O = ({ amount: n, label: d, variant: o = "full" }) => /* @__PURE__ */ p(C,
               id: `spending-list-subcategory-${r.guid}`,
               onClick: () => d(r.guid, !0),
               sx: { minHeight: 44, px: 8, py: 0 },
-              children: /* @__PURE__ */ p(C, { direction: "row", justifyContent: "space-between", width: "100%", children: [
+              children: /* @__PURE__ */ p(y, { direction: "row", justifyContent: "space-between", width: "100%", children: [
                 /* @__PURE__ */ p(T, { children: [
                   r.name,
                   " "
                 ] }),
-                /* @__PURE__ */ t(T, { children: R(r.amount, "0,0.00") })
+                /* @__PURE__ */ t(T, { children: N(r.amount, "0,0.00") })
               ] })
             }
           )
@@ -255,18 +255,18 @@ const O = ({ amount: n, label: d, variant: o = "full" }) => /* @__PURE__ */ p(C,
         r.guid
       )) }) })
     ] }, e.guid)) }),
-    /* @__PURE__ */ t(T, { bold: !0, sx: { mt: 12, pr: 8, textAlign: "right" }, children: `${i.total}: ${R(n.totalAmount, "0,0.00")}` })
+    /* @__PURE__ */ t(T, { bold: !0, sx: { mt: 12, pr: 8, textAlign: "right" }, children: `${i.total}: ${N(n.totalAmount, "0,0.00")}` })
   ] });
-}, Nt = L(Rt), $t = ({
+}, Nt = I(Rt), $t = ({
   data: n,
   onSelected: d,
   onViewTransactions: o,
   selectedId: a,
   title: i
 }) => {
-  const { isDesktop: g, isMobile: e } = Lt(), { dateRangeTotalsLoading: r } = A(), { spending: c } = I();
+  const { isDesktop: g, isMobile: e } = Lt(), { dateRangeTotalsLoading: r } = W(), { spending: c } = A();
   return /* @__PURE__ */ p(
-    C,
+    y,
     {
       alignItems: e ? "center" : "flex-start",
       direction: e ? "column" : "row",
@@ -276,7 +276,7 @@ const O = ({ amount: n, label: d, variant: o = "full" }) => /* @__PURE__ */ p(C,
       px: 8,
       children: [
         r && /* @__PURE__ */ t(
-          $,
+          O,
           {
             data: {
               categoryData: [],
@@ -292,11 +292,11 @@ const O = ({ amount: n, label: d, variant: o = "full" }) => /* @__PURE__ */ p(C,
           }
         ),
         !r && /* @__PURE__ */ t(
-          $,
+          O,
           {
             data: n,
-            onSelected: (m) => {
-              d(m), setTimeout(() => document.getElementById(`spending-list-category-${m}`)?.focus(), 0);
+            onSelected: (h) => {
+              d(h), setTimeout(() => document.getElementById(`spending-list-category-${h}`)?.focus(), 0);
             },
             onViewTransactions: o,
             selectedId: a,
@@ -309,7 +309,7 @@ const O = ({ amount: n, label: d, variant: o = "full" }) => /* @__PURE__ */ p(C,
       ]
     }
   );
-}, nt = L($t), Ot = (n) => [
+}, nt = I($t), Ot = (n) => [
   n.palette.chartMono.chartMono5,
   n.palette.chartMono.chartMono4,
   n.palette.chartMono.chartMono3,
@@ -317,83 +317,83 @@ const O = ({ amount: n, label: d, variant: o = "full" }) => /* @__PURE__ */ p(C,
   n.palette.chartMono.chartMono1,
   n.palette.chartMono.chartMono6
 ], kt = () => {
-  const n = Tt(), { is_mobile_webview: d } = F(), { clientConfig: o } = F(), { categories: a, dateRangeCategoryTotals: i } = A(), {
+  const n = Tt(), { is_mobile_webview: d } = V(), { clientConfig: o } = V(), { categories: a, dateRangeCategoryTotals: i } = W(), {
     goals: g,
     spending: e,
     transactions: r
-  } = I(), { displayedDateRange: c, selectedAccountGuids: b } = V(), {
+  } = A(), { displayedDateRange: c, selectedAccountGuids: b } = z(), {
     setFilter: u,
-    sortedTransactions: m,
+    sortedTransactions: h,
     sortedTransactionsWithSplits: M,
-    tags: y
-  } = ct(), f = o?.master?.deep_link_params?.account_guids, D = o?.master?.deep_link_params?.view, [x, E] = l.useState(""), [_, W] = l.useState(D === "income" ? 1 : 0), [z, H] = l.useState(""), [pt, k] = l.useState(!1), B = l.useMemo(
+    tags: _
+  } = ct(), f = o?.master?.deep_link_params?.account_guids, x = o?.master?.deep_link_params?.view, [D, R] = l.useState(""), [v, C] = l.useState(x === "income" ? 1 : 0), [E, H] = l.useState(""), [pt, B] = l.useState(!1), G = l.useMemo(
     () => rt(a, g, n, i),
     [a, i]
   ), P = l.useMemo(
     () => st(a, i, Ot(n)),
     [a, i]
-  ), G = l.useMemo(
-    () => m.find((s) => s.guid === z),
-    [z, m]
+  ), j = l.useMemo(
+    () => h.find((s) => s.guid === E),
+    [E, h]
   ), ut = (s, S) => {
-    W(S), E("");
+    C(S), R("");
   }, K = (s, S = !1) => {
-    S ? mt(s) : E(x === s || s === "0" ? "" : s);
+    S ? mt(s) : R(D === s || s === "0" ? "" : s);
   }, mt = (s) => {
     u({
       ...{
         accounts: f || b,
         dateRange: c
       },
-      custom: (h) => x === "other" ? h.top_level_category_guid === s : h.category_guid === s,
+      custom: (m) => D === "other" ? m.top_level_category_guid === s : m.category_guid === s,
       showSplits: !0
-    }), k(!0);
+    }), B(!0);
   }, U = (s) => {
     const S = {
       accounts: f || b,
       dateRange: c
     };
-    if (_ === 0)
+    if (v === 0)
       if (s === "other") {
-        const h = B.categoryData.find((j) => j.guid === "other");
+        const m = G.categoryData.find((F) => F.guid === "other");
         u({
           ...S,
-          custom: (j) => !!h?.categoryTotals?.find((ft) => ft.guid === j.top_level_category_guid)
+          custom: (F) => !!m?.categoryTotals?.find((ft) => ft.guid === F.top_level_category_guid)
         });
       } else
         u({
           ...S,
-          custom: (h) => s ? h.top_level_category_guid === s : h.top_level_category_guid !== v.INCOME && h.category_guid !== v.INCOME && h.top_level_category_guid !== v.INVESTMENTS && h.top_level_category_guid !== v.TRANSFER,
+          custom: (m) => s ? m.top_level_category_guid === s : m.top_level_category_guid !== w.INCOME && m.category_guid !== w.INCOME && m.top_level_category_guid !== w.INVESTMENTS && m.top_level_category_guid !== w.TRANSFER,
           showSplits: !!s
         });
     else
       u({
         ...S,
-        custom: (h) => s ? h.category_guid === s : h.category_guid === v.INCOME || h.top_level_category_guid === v.INCOME
+        custom: (m) => s ? m.category_guid === s : m.category_guid === w.INCOME || m.top_level_category_guid === w.INCOME
       });
-    k(!0);
+    B(!0);
   }, ht = () => {
-    Mt(M, y);
+    Mt(M, _);
   };
-  return /* @__PURE__ */ p(w, { children: [
-    /* @__PURE__ */ p(it, { onChange: ut, value: _, variant: "fullWidth", children: [
+  return /* @__PURE__ */ p(L, { children: [
+    /* @__PURE__ */ p(it, { onChange: ut, value: v, variant: "fullWidth", children: [
       /* @__PURE__ */ t(
-        N,
+        $,
         {
           label: /* @__PURE__ */ t(
-            O,
+            k,
             {
-              amount: B.totalAmount,
+              amount: G.totalAmount,
               label: e.spend_tab_title
             }
           )
         }
       ),
       /* @__PURE__ */ t(
-        N,
+        $,
         {
           label: /* @__PURE__ */ t(
-            O,
+            k,
             {
               amount: P.totalAmount,
               label: e.income_tab_title
@@ -402,23 +402,23 @@ const O = ({ amount: n, label: d, variant: o = "full" }) => /* @__PURE__ */ p(C,
         }
       )
     ] }),
-    _ === 0 && /* @__PURE__ */ t(
+    v === 0 && /* @__PURE__ */ t(
       nt,
       {
-        data: B,
+        data: G,
         onSelected: K,
         onViewTransactions: U,
-        selectedId: x,
+        selectedId: D,
         title: e.spend_tab_title
       }
     ),
-    _ === 1 && /* @__PURE__ */ t(
+    v === 1 && /* @__PURE__ */ t(
       nt,
       {
         data: P,
         onSelected: K,
         onViewTransactions: U,
-        selectedId: x,
+        selectedId: D,
         title: e.income_tab_title
       }
     ),
@@ -427,10 +427,10 @@ const O = ({ amount: n, label: d, variant: o = "full" }) => /* @__PURE__ */ p(C,
       {
         ariaLabelClose: e.close_drawer_aria,
         isOpen: pt,
-        onClose: () => k(!1),
+        onClose: () => B(!1),
         title: e.transactions_drawer_title,
-        children: /* @__PURE__ */ p(C, { children: [
-          !d && m.length > 0 && /* @__PURE__ */ t(C, { direction: "row", justifyContent: "right", mb: -24, mr: 8, mt: 8, zIndex: 1, children: /* @__PURE__ */ t(
+        children: /* @__PURE__ */ p(y, { children: [
+          !d && h.length > 0 && /* @__PURE__ */ t(y, { direction: "row", justifyContent: "right", mb: -24, mr: 8, mt: 8, zIndex: 1, children: /* @__PURE__ */ t(
             St,
             {
               onClick: ht,
@@ -447,43 +447,44 @@ const O = ({ amount: n, label: d, variant: o = "full" }) => /* @__PURE__ */ p(C,
       Z,
       {
         ariaLabelClose: e.close_drawer_aria,
-        isOpen: !!G,
+        isOpen: !!j,
         onClose: () => H(""),
         title: e.transaction_details_drawer_title,
-        children: G && /* @__PURE__ */ t(xt, { transaction: G })
+        children: j && /* @__PURE__ */ t(xt, { transaction: j })
       }
     )
   ] });
-}, Bt = L(kt), Gt = ({ onBackClick: n, sx: d = {} }) => {
-  const { isAccountDataLoaded: o, loadAccountData: a } = lt(), { categoriesLoaded: i, dateRangeTotalsLoaded: g, loadCategories: e, loadDateRangeCategoryTotals: r } = A(), { isTransactionDataLoaded: c, loadTransactionData: b } = ct(), { spending: u } = I(), { displayedDateRange: m, isInitialized: M, setDisplayedDate: y, selectedAccounts: f } = V(), { onEvent: D } = yt(), { clientConfig: x } = F();
+}, Bt = I(kt), Gt = ({ onBackClick: n, onMenuClick: d, sx: o = {} }) => {
+  const { isAccountDataLoaded: a, loadAccountData: i } = lt(), { categoriesLoaded: g, dateRangeTotalsLoaded: e, loadCategories: r, loadDateRangeCategoryTotals: c } = W(), { isTransactionDataLoaded: b, loadTransactionData: u } = ct(), { spending: h } = A(), { displayedDateRange: M, isInitialized: _, setDisplayedDate: f, selectedAccounts: x } = z(), { onEvent: D } = yt(), { clientConfig: R } = V();
   dt({
     widgetName: "SpendingWidget",
-    isLoaded: g
+    isLoaded: e
   }), l.useEffect(() => {
-    const _ = x?.master?.deep_link_params, W = _?.date_range ? [tt(_.date_range.from), tt(_.date_range.to)] : [ot(q()), at(q())];
-    y(W[0], W[1]), o || a().finally(), i || e().finally(), c || b().finally(), D(et.SPENDING_VIEW);
+    const C = R?.master?.deep_link_params, E = C?.date_range ? [tt(C.date_range.from), tt(C.date_range.to)] : [ot(q()), at(q())];
+    f(E[0], E[1]), a || i().finally(), g || r().finally(), b || u().finally(), D(et.SPENDING_VIEW);
   }, []), l.useEffect(() => {
-    M && r(
-      f,
-      m.start,
-      m.end
+    _ && c(
+      x,
+      M.start,
+      M.end
     ).finally();
-  }, [m, M, f]);
-  const E = (_) => {
-    y(_[0], _[1]);
+  }, [M, _, x]);
+  const v = (C) => {
+    f(C[0], C[1]);
   };
-  return M ? /* @__PURE__ */ t(
+  return _ ? /* @__PURE__ */ t(
     It,
     {
-      calendarActions: { onRangeChanged: E },
+      calendarActions: { onRangeChanged: v },
       onAccountsFilterClick: () => D(et.SPENDING_CLICK_FILTER),
       onBackClick: n,
-      sx: d,
-      title: u.title,
-      children: /* @__PURE__ */ t(w, { width: "100%", children: /* @__PURE__ */ t(Bt, {}) })
+      onMenuClick: d,
+      sx: o,
+      title: h.title,
+      children: /* @__PURE__ */ t(L, { width: "100%", children: /* @__PURE__ */ t(Bt, {}) })
     }
   ) : /* @__PURE__ */ t(gt, {});
-}, Se = L(Gt);
+}, Se = I(Gt);
 export {
   Ce as SpendingMiniWidget,
   Se as SpendingWidget