@mx-cartographer/experiences 8.0.0-alpha.bb4 → 8.0.0-alpha.mega1

package/dist/networth/index.es.js

@@ -1,55 +1,57 @@
-import { jsx as t, jsxs as r, Fragment as v } from "react/jsx-runtime";
-import { fromUnixTime as bt } from "date-fns/fromUnixTime";
-import { observer as w } from "mobx-react-lite";
-import { useTheme as A } from "@mui/material/styles";
-import { L as _t } from "../LineChart-C1PxNf7P.mjs";
-import { u as Z } from "../useScreenSize-B5afALev.mjs";
-import { q as wt, u as T, d as J, g as Q, b as P, r as tt, n as St } from "../hooks-C41HAxM5.mjs";
-import { f as Wt, a as vt } from "../Dialog-CDV0kKxj.mjs";
+import { jsx as e, jsxs as r, Fragment as v } from "react/jsx-runtime";
+import { fromUnixTime as we } from "date-fns/fromUnixTime";
+import { observer as _ } from "mobx-react-lite";
+import { useTheme as z } from "@mui/material/styles";
+import { L as _e } from "../LineChart-KpPw1phO.mjs";
+import { u as J } from "../useScreenSize-B6JyS_Lj.mjs";
+import { p as be, u as I, d as Q, g as P, b as ee, q as te } from "../hooks-ZMp65DFz.mjs";
+import { f as We, a as ve } from "../Dialog-BPTr3qHE.mjs";
 import W from "@mui/material/Divider";
-import z from "@mui/material/List";
+import B from "@mui/material/List";
 import k from "@mui/material/ListSubheader";
 import h from "@mui/material/Stack";
-import { Text as d, Icon as H, H1 as It, P as Tt } from "@mxenabled/mxui";
-import m from "react";
+import { Text as m, Icon as H, H1 as Te, P as Ie } from "@mxenabled/mxui";
+import d from "react";
 import D from "@mui/material/ListItem";
-import et from "@mui/material/ListItemButton";
-import _ from "@mui/material/ListItemText";
-import { i as nt } from "../DateUtil-CDPZw_-m.mjs";
+import ne from "@mui/material/ListItemButton";
+import w from "@mui/material/ListItemText";
+import { i as oe } from "../DateUtil-CBdcsyuk.mjs";
 import { C as y } from "../CurrencyText-Dr0EZ7bp.mjs";
-import { Button as Lt, Stack as Nt } from "@mui/material";
-import { format as Et, fromUnixTime as kt, differenceInMonths as Dt } from "date-fns";
-import { g as U } from "../NetWorthStore-Bti6u-d9.mjs";
-import { N as ze } from "../NetWorthStore-Bti6u-d9.mjs";
-import { Icon as ot } from "@mxenabled/mx-icons";
+import { Button as Le, Stack as Ne } from "@mui/material";
+import { format as Ee, fromUnixTime as ke, differenceInMonths as De } from "date-fns";
+import { g as U } from "../NetWorthStore-rC0q7P7t.mjs";
+import { N as Rt } from "../NetWorthStore-rC0q7P7t.mjs";
+import { Icon as re } from "@mxenabled/mx-icons";
 import { f as V } from "../NumberFormatting-DjTD0t3W.mjs";
-import { L as R } from "../Loader-Ckqi9Rx6.mjs";
-import { M as At } from "../MicroWidgetContainer-BGpNl5ZS.mjs";
-import { A as S, W as Mt } from "../WidgetContainer-CDh9fjpR.mjs";
-import rt from "@mui/material/Box";
-import { C as Ot } from "../ConnectionsDrawer-Dsc04-4Z.mjs";
-import Ht from "@mui/material/Collapse";
-import X from "@mui/material/ListItemIcon";
-import { D as Y } from "../Drawer-BF40nbsH.mjs";
-import { E as zt } from "../EmptyState-DoxNUae-.mjs";
-const Rt = ({
-  chartData: e,
-  hoveredData: l,
+import { u as ie } from "../useWidgetLoadTimer-hIOioiKx.mjs";
+import { A as b, W as Me } from "../WidgetContainer-CoFDmQRE.mjs";
+import { L as O } from "../Loader-DUaFpDGv.mjs";
+import { M as Ae } from "../MicroWidgetContainer-r6mtxRer.mjs";
+import ae from "@mui/material/Box";
+import { C as He } from "../ConnectionsDrawer-VmuVFHbL.mjs";
+import Be from "@mui/material/Collapse";
+import Y from "@mui/material/ListItemIcon";
+import se from "@mui/material/styles/useTheme";
+import { E as Oe } from "../EmptyState-DoxNUae-.mjs";
+import { D as q } from "../Drawer-By9V-B5L.mjs";
+const ze = ({
+  chartData: t,
+  hoveredData: s,
   onDataClick: i,
   onMouseEnter: n,
-  onMouseLeave: a,
+  onMouseLeave: c,
   selectedData: o
 }) => {
-  const { isMobile: s } = Z(), { availableWidth: c } = wt(), u = A(), C = c - 320, x = e.map((f) => ({
-    x: Wt(bt(f.x), vt.MONTH_SHORT),
+  const { isMobile: a } = J(), { availableWidth: l } = be(), u = z(), C = l - 320, x = t.map((f) => ({
+    x: We(we(f.x), ve.MONTH_SHORT),
     y: f.y
-  })), g = o ? { index: e.findIndex((f) => f.x === o.x) } : void 0, b = l ? { index: e.findIndex((f) => f.x === l.x) } : void 0, p = (f) => ({
+  })), g = o ? { index: t.findIndex((f) => f.x === o.x) } : void 0, S = s ? { index: t.findIndex((f) => f.x === s.x) } : void 0, p = (f) => ({
     fill: f === g?.index ? u.palette.success.main : "",
-    filter: f === b?.index ? `drop-shadow(0px 0px 10px ${u.palette.success.main})` : "none",
+    filter: f === S?.index ? `drop-shadow(0px 0px 10px ${u.palette.success.main})` : "none",
     stroke: u.palette.success.main
   });
-  return /* @__PURE__ */ t(
-    _t,
+  return /* @__PURE__ */ e(
+    _e,
     {
       baseline: "min",
       chartFor: "networthChart",
@@ -59,51 +61,51 @@ const Rt = ({
       datasets: [x],
       height: 350,
       labels: [],
-      margin: { right: 20, left: 100 },
-      markHandlers: { onMarkClick: i, onMouseEnter: n, onMouseLeave: a },
+      margin: { right: 20, left: 40 },
+      markHandlers: { onMarkClick: i, onMouseEnter: n, onMouseLeave: c },
       markStyles: p,
       showArea: !0,
       useCustomMark: !0,
       valueFormatterString: "0.0[0]a",
-      width: s ? 320 : C
+      width: a ? 320 : C
     }
   );
-}, jt = w(Rt), Gt = ({
-  item: e,
-  getStyles: l,
+}, Re = _(ze), je = ({
+  item: t,
+  getStyles: s,
   isHovered: i = !1,
   isSelected: n = !1,
-  onItemClick: a,
+  onItemClick: c,
   onMouseEnter: o,
-  onMouseLeave: s
+  onMouseLeave: a
 }) => {
-  const [c, u] = m.useState({
+  const [l, u] = d.useState({
     color: ""
   });
-  return m.useEffect(() => {
-    u(l(e));
-  }, [i, n]), /* @__PURE__ */ r(m.Fragment, { children: [
-    /* @__PURE__ */ t(
+  return d.useEffect(() => {
+    u(s(t));
+  }, [i, n]), /* @__PURE__ */ r(d.Fragment, { children: [
+    /* @__PURE__ */ e(
       D,
       {
         sx: {
-          ...c,
+          ...l,
           minHeight: 44,
-          "&:hover": { color: n ? "inherit" : c.color }
+          "&:hover": { color: n ? "inherit" : l.color }
         },
-        children: /* @__PURE__ */ t(
-          et,
+        children: /* @__PURE__ */ e(
+          ne,
           {
-            onClick: (C) => a?.(C, e.x),
-            onMouseEnter: () => o(e.x),
-            onMouseLeave: () => s(),
+            onClick: (C) => c?.(C, t.x),
+            onMouseEnter: () => o(t.x),
+            onMouseLeave: () => a(),
             sx: { minHeight: 20, padding: 12 },
-            children: /* @__PURE__ */ t(
-              _,
+            children: /* @__PURE__ */ e(
+              w,
               {
                 primary: /* @__PURE__ */ r(h, { direction: "row", justifyContent: "space-between", sx: { fontWeight: 400 }, children: [
-                  /* @__PURE__ */ t(d, { variant: "body1", children: nt(e.x) }),
-                  /* @__PURE__ */ t(y, { amount: e.y, sx: { color: "inherit" }, variant: "body1" })
+                  /* @__PURE__ */ e(m, { variant: "Body", children: oe(t.x) }),
+                  /* @__PURE__ */ e(y, { amount: t.y, sx: { color: "inherit" }, variant: "Body" })
                 ] })
               }
             )
@@ -111,188 +113,191 @@ const Rt = ({
         )
       }
     ),
-    /* @__PURE__ */ t(W, {})
-  ] }, e.x);
-}, $t = w(Gt), Bt = ({
-  chartData: e,
-  hoveredData: l,
+    /* @__PURE__ */ e(W, {})
+  ] }, t.x);
+}, $e = _(je), Ge = ({
+  chartData: t,
+  hoveredData: s,
   onDataClick: i,
   onButtonClick: n,
-  onMouseEnter: a,
+  onMouseEnter: c,
   onMouseLeave: o,
-  selectedData: s
+  selectedData: a
 }) => {
-  const { net_worth: c } = T(), u = A(), C = (x) => {
-    const g = x.x === l?.x, b = x.x === s?.x, p = {
+  const { net_worth: l } = I(), u = z(), C = (x) => {
+    const g = x.x === s?.x, S = x.x === a?.x, p = {
       backgroundColor: "inherit",
       borderBottom: "inherit",
       color: "inherit"
     };
-    return g && (p.color = b ? "inherit" : p.color, p.backgroundColor = u.palette.action.hover), b && (p.backgroundColor = u.palette.primary.main, p.borderBottom = u.palette.neutral.light, p.color = u.palette.common.white), p;
+    return g && (p.color = S ? "inherit" : p.color, p.backgroundColor = u.palette.action.hover), S && (p.backgroundColor = u.palette.primary.main, p.borderBottom = u.palette.border.light, p.color = u.palette.common.white), p;
   };
   return /* @__PURE__ */ r(h, { direction: "column", sx: { width: 320 }, children: [
-    /* @__PURE__ */ r(z, { children: [
-      /* @__PURE__ */ t(k, { sx: { backgroundColor: "transparent", mb: 8, mt: 12, px: 12 }, children: /* @__PURE__ */ t(d, { bold: !0, component: "h2", variant: "body1", children: c.monthly_totals }) }),
-      /* @__PURE__ */ t(W, {}),
-      e.map((x, g) => /* @__PURE__ */ t(
-        $t,
+    /* @__PURE__ */ r(B, { children: [
+      /* @__PURE__ */ e(k, { sx: { backgroundColor: "transparent", mb: 8, mt: 12, px: 12 }, children: /* @__PURE__ */ e(m, { bold: !0, component: "h2", variant: "Body", children: l.monthly_totals }) }),
+      /* @__PURE__ */ e(W, {}),
+      t.map((x, g) => /* @__PURE__ */ e(
+        $e,
         {
           getStyles: C,
-          isHovered: x.x === l?.x,
-          isSelected: x.x === s?.x,
+          isHovered: x.x === s?.x,
+          isSelected: x.x === a?.x,
           item: x,
-          onItemClick: (b) => i(b, g),
-          onMouseEnter: () => a(g),
+          onItemClick: (S) => i(S, g),
+          onMouseEnter: () => c(g),
           onMouseLeave: () => o()
         },
         x.x
       ))
     ] }),
-    /* @__PURE__ */ t(
-      Lt,
+    /* @__PURE__ */ e(
+      Le,
       {
         onClick: () => n(),
         sx: { alignSelf: "center", marginTop: 16, width: "fit-content" },
         variant: "outlined",
-        children: c.view_assets_and_liabilities
+        children: l.view_assets_and_liabilities
       }
     )
   ] });
-}, Ft = w(Bt), Kt = ({
-  currencyLabel: e,
-  currencyVariant: l = "body2",
+}, Xe = _(Ge), Fe = ({
+  currencyLabel: t,
+  currencyVariant: s = "Small",
   iconSize: i,
   netWorth: n,
-  theme: a
+  theme: c
 }) => {
-  let o = a.palette.secondary.main, s = a.palette.secondary.main, c = "trending_flat";
-  return n.change < 0 ? c = "trending_down" : n.change > 0 && (o = a.palette.success.main, s = a.palette.success.main, c = "trending_up"), /* @__PURE__ */ r(Nt, { alignItems: "center", direction: "row", spacing: 4, children: [
-    /* @__PURE__ */ t(
+  let o = c.palette.secondary.main, a = c.palette.secondary.main, l = "trending_flat";
+  return n.change < 0 ? l = "trending_down" : n.change > 0 && (o = c.palette.success.main, a = c.palette.success.main, l = "trending_up"), /* @__PURE__ */ r(Ne, { alignItems: "center", direction: "row", spacing: 4, children: [
+    /* @__PURE__ */ e(
       H,
       {
-        name: c,
+        name: l,
         size: i,
         sx: {
           color: o
         }
       }
     ),
-    /* @__PURE__ */ t(y, { amount: n.change, color: s, variant: l }),
-    /* @__PURE__ */ t(d, { variant: "body2", children: e })
+    /* @__PURE__ */ e(y, { amount: n.change, color: a, variant: s }),
+    /* @__PURE__ */ e(m, { variant: "Small", children: t })
   ] });
-}, j = w(Kt), Ut = ({ hoveredData: e, selectedData: l }) => {
-  const { net_worth: i } = T(), n = A(), a = e || l, o = Et(kt(a.x), "MMMM");
+}, R = _(Fe), Ke = ({ hoveredData: t, selectedData: s }) => {
+  const { net_worth: i } = I(), n = z(), c = t || s, o = Ee(ke(c.x), "MMMM");
   return /* @__PURE__ */ r(h, { alignItems: "center", direction: "column", m: 24, children: [
-    /* @__PURE__ */ t(d, { color: n.palette.secondary.main, variant: "body2", children: `${o} ${i.net_worth}` }),
-    /* @__PURE__ */ t(y, { amount: a.y, variant: "h2" }),
-    /* @__PURE__ */ t(j, { currencyLabel: i.this_month, netWorth: a, theme: n })
+    /* @__PURE__ */ e(m, { color: n.palette.secondary.main, variant: "Small", children: `${o} ${i.net_worth}` }),
+    /* @__PURE__ */ e(y, { amount: c.y, variant: "H2" }),
+    /* @__PURE__ */ e(R, { currencyLabel: i.this_month, netWorth: c, theme: n })
   ] });
-}, Vt = w(Ut), Xt = ({ amount: e, copy: l, trendValue: i }) => {
+}, Ue = _(Ke), Ve = ({ amount: t, copy: s, trendValue: i }) => {
   const n = i > 0, o = i === 0 ? "trending_flat" : n ? "trending_up" : "trending_down";
   return /* @__PURE__ */ r(h, { sx: { flexDirection: "row", justifyContent: "space-between" }, children: [
-    /* @__PURE__ */ t(It, { children: V(e, "0,0") }),
-    e !== 0 && /* @__PURE__ */ r(h, { sx: { color: n ? "success.main" : "text.secondary" }, children: [
+    /* @__PURE__ */ e(Te, { children: V(t, "0,0") }),
+    t !== 0 && /* @__PURE__ */ r(h, { sx: { color: n ? "success.main" : "text.secondary" }, children: [
       /* @__PURE__ */ r(h, { sx: { flexDirection: "row", gap: 8 }, children: [
-        /* @__PURE__ */ t(ot, { name: o, size: 20 }),
-        /* @__PURE__ */ t(d, { sx: { fontWeight: 600, textAlign: "right" }, variant: "body1", children: V(i, "0,0.00") })
+        /* @__PURE__ */ e(re, { name: o, size: 20 }),
+        /* @__PURE__ */ e(m, { sx: { fontWeight: 600, textAlign: "right" }, variant: "body1", children: V(i, "0,0.00") })
       ] }),
-      /* @__PURE__ */ t(d, { sx: { display: "block", textAlign: "right" }, variant: "caption", children: l.this_month })
+      /* @__PURE__ */ e(m, { sx: { display: "block", textAlign: "right" }, variant: "caption", children: s.this_month })
     ] })
   ] });
-}, Yt = ({ copy: e }) => /* @__PURE__ */ r(h, { sx: { flexDirection: "row", gap: 12 }, children: [
-  /* @__PURE__ */ t(ot, { name: "elevation", size: 32, sx: { color: "text.primary" } }),
+}, Ye = ({ copy: t }) => /* @__PURE__ */ r(h, { sx: { flexDirection: "row", gap: 12 }, children: [
+  /* @__PURE__ */ e(re, { name: "elevation", size: 32, sx: { color: "text.primary" } }),
   /* @__PURE__ */ r(h, { children: [
-    /* @__PURE__ */ t(d, { sx: { display: "block", fontWeight: 600 }, variant: "body1", children: e.empty_widget_header }),
-    /* @__PURE__ */ t(Tt, { sx: { color: "text.secondary" }, variant: "body2", children: e.zero_state_description })
+    /* @__PURE__ */ e(m, { sx: { display: "block", fontWeight: 600 }, variant: "body1", children: t.empty_widget_header }),
+    /* @__PURE__ */ e(Ie, { sx: { color: "text.secondary" }, variant: "body2", children: t.zero_state_description })
   ] })
-] }), Ae = w(({ onCTAClick: e }) => {
-  const [l, i] = m.useState(!1), { visibleAccounts: n } = J(), { onEvent: a } = Q(), { net_worth: o, common: s } = T(), { isInitialized: c, selectedAccounts: u, setSelectedAccounts: C } = P(), { loadChartData: x, loadNetWorthData: g, netWorthData: b, selectedData: p } = tt(), f = async () => {
+] }), Ht = _(({ onCTAClick: t }) => {
+  const [s, i] = d.useState(!1), { visibleAccounts: n } = Q(), { onEvent: c } = P(), { net_worth: o, common: a } = I(), { isInitialized: l, selectedAccounts: u, setSelectedAccounts: C } = ee(), { loadChartData: x, loadNetWorthData: g, netWorthData: S, selectedData: p } = te(), f = async () => {
     await g(u), await x(1), i(!0);
   };
-  if (m.useEffect(() => C(n), [n]), m.useEffect(() => {
-    c && f().finally(), a(S.NET_WORTH_LOAD_WIDGET, {
+  if (ie({
+    widgetName: "NetWorthMicroWidget",
+    isLoaded: s
+  }), d.useEffect(() => C(n), [n]), d.useEffect(() => {
+    l && f().finally(), c(b.NET_WORTH_LOAD_WIDGET, {
       state: n?.length ? "default" : "zeroState"
     });
-  }, [c]), !l) return /* @__PURE__ */ t(R, { height: 100 });
+  }, [l]), !s) return /* @__PURE__ */ e(O, { height: 100 });
   const L = () => {
-    a(
-      n.length ? S.NET_WORTH_CLICK_VIEW_DETAILS : S.NET_WORTH_CLICK_GET_STARTED
-    ), e();
+    c(
+      n.length ? b.NET_WORTH_CLICK_VIEW_DETAILS : b.NET_WORTH_CLICK_GET_STARTED
+    ), t();
   };
-  return /* @__PURE__ */ t(
-    At,
+  return /* @__PURE__ */ e(
+    Ae,
     {
       className: "mx-networth-microwidget",
-      ctaLabel: s.see_details,
+      ctaLabel: a.see_details,
       onCTAClick: L,
       title: o.net_worth,
-      children: b.accounts.length ? /* @__PURE__ */ t(
-        Xt,
+      children: S.accounts.length ? /* @__PURE__ */ e(
+        Ve,
         {
           amount: p?.y,
           copy: o,
           trendValue: p?.change
         }
-      ) : /* @__PURE__ */ t(Yt, { copy: o })
+      ) : /* @__PURE__ */ e(Ye, { copy: o })
     }
   );
-}), qt = ({ accounts: e, name: l, icon: i }) => {
-  const [n, a] = m.useState(!1);
+}), qe = ({ accounts: t, name: s, icon: i }) => {
+  const [n, c] = d.useState(!1);
   return /* @__PURE__ */ r(v, { children: [
-    /* @__PURE__ */ t(D, { sx: (o) => ({ backgroundColor: o.palette.background.paper }), children: /* @__PURE__ */ r(et, { onClick: () => a(!n), children: [
-      i && /* @__PURE__ */ t(X, { children: /* @__PURE__ */ t(H, { name: i, size: 24, sx: { mr: 12 } }) }),
-      /* @__PURE__ */ t(
-        _,
+    /* @__PURE__ */ e(D, { sx: (o) => ({ backgroundColor: o.palette.background.paper }), children: /* @__PURE__ */ r(ne, { onClick: () => c(!n), children: [
+      i && /* @__PURE__ */ e(Y, { children: /* @__PURE__ */ e(H, { name: i, size: 24, sx: { mr: 12 } }) }),
+      /* @__PURE__ */ e(
+        w,
         {
-          primary: /* @__PURE__ */ t(d, { sx: { fontWeight: 700 }, variant: "body1", children: l })
+          primary: /* @__PURE__ */ e(m, { sx: { fontWeight: 700 }, variant: "Body", children: s })
         }
       ),
-      /* @__PURE__ */ t(X, { children: n ? /* @__PURE__ */ t(H, { name: "expand_less", size: 24 }) : /* @__PURE__ */ t(H, { name: "expand_more", size: 24 }) })
+      /* @__PURE__ */ e(Y, { children: n ? /* @__PURE__ */ e(H, { name: "expand_less", size: 24 }) : /* @__PURE__ */ e(H, { name: "expand_more", size: 24 }) })
     ] }) }),
-    /* @__PURE__ */ t(W, {}),
-    /* @__PURE__ */ t(Ht, { in: n, timeout: "auto", unmountOnExit: !0, children: e.map((o, s) => /* @__PURE__ */ r(z, { children: [
-      /* @__PURE__ */ t(D, { sx: () => ({ py: 14 }), children: /* @__PURE__ */ t(
-        _,
+    /* @__PURE__ */ e(W, {}),
+    /* @__PURE__ */ e(Be, { in: n, timeout: "auto", unmountOnExit: !0, children: t.map((o, a) => /* @__PURE__ */ r(B, { children: [
+      /* @__PURE__ */ e(D, { sx: () => ({ py: 14 }), children: /* @__PURE__ */ e(
+        w,
         {
           primary: /* @__PURE__ */ r(h, { direction: "row", justifyContent: "space-between", sx: { fontWeight: 400 }, children: [
-            /* @__PURE__ */ t(
-              d,
+            /* @__PURE__ */ e(
+              m,
               {
                 sx: {
                   marginRight: 10
                 },
-                variant: "body1",
+                variant: "Body",
                 children: o.accountName
               }
             ),
-            /* @__PURE__ */ t(
+            /* @__PURE__ */ e(
               y,
               {
                 amount: o.balance,
                 sx: {
                   flexShrink: 0
                 },
-                variant: "body2"
+                variant: "Small"
               }
             )
           ] }),
           sx: { pl: 72, pr: 16 }
         }
       ) }),
-      s < e.length - 1 ? /* @__PURE__ */ t(W, { variant: "inset" }) : /* @__PURE__ */ t(W, {})
+      a < t.length - 1 ? /* @__PURE__ */ e(W, { variant: "inset" }) : /* @__PURE__ */ e(W, {})
     ] }, o.accountName)) })
   ] });
-}, q = ({ groupedAccounts: e }) => /* @__PURE__ */ t(v, { children: e.map(({ accounts: l, icon: i, name: n }) => /* @__PURE__ */ t(qt, { accounts: l, icon: i, name: n }, n)) }), Zt = ({
-  netWorth: e,
-  assets: l,
+}, Z = ({ groupedAccounts: t }) => /* @__PURE__ */ e(v, { children: t.map(({ accounts: s, icon: i, name: n }) => /* @__PURE__ */ e(qe, { accounts: s, icon: i, name: n }, n)) }), Ze = ({
+  netWorth: t,
+  assets: s,
   liabilities: i,
   totalAssets: n,
-  totalLiabilities: a
+  totalLiabilities: c
 }) => {
-  const { net_worth: o } = T(), s = A();
+  const { net_worth: o } = I(), a = se();
   return /* @__PURE__ */ r(v, { children: [
     /* @__PURE__ */ r(
-      rt,
+      ae,
       {
         sx: {
           alignItems: "center",
@@ -303,128 +308,121 @@ const Rt = ({
           marginBottom: 8
         },
         children: [
-          /* @__PURE__ */ t(d, { variant: "body1", children: o.current_net_worth }),
-          /* @__PURE__ */ t(y, { amount: e?.y ?? 0, variant: "h1" }),
-          e && /* @__PURE__ */ t(
-            j,
+          /* @__PURE__ */ e(m, { variant: "Body", children: o.current_net_worth }),
+          /* @__PURE__ */ e(y, { amount: t?.y ?? 0, variant: "H1" }),
+          t && /* @__PURE__ */ e(
+            R,
             {
               currencyLabel: o.this_month,
               iconSize: 20,
-              netWorth: e,
-              theme: s
+              netWorth: t,
+              theme: a
             }
           )
         ]
       }
     ),
-    /* @__PURE__ */ r(z, { children: [
-      /* @__PURE__ */ t(k, { sx: { mb: 8, mt: 12, mx: 8 }, children: /* @__PURE__ */ t(
-        _,
+    /* @__PURE__ */ r(B, { children: [
+      /* @__PURE__ */ e(k, { sx: { mb: 8, mt: 12, mx: 8 }, children: /* @__PURE__ */ e(
+        w,
         {
           primary: /* @__PURE__ */ r(h, { direction: "row", justifyContent: "space-between", children: [
-            /* @__PURE__ */ t(d, { sx: { fontWeight: 700 }, variant: "caption", children: o.assets }),
-            /* @__PURE__ */ t(y, { amount: n, sx: { fontWeight: 400 }, variant: "caption" })
+            /* @__PURE__ */ e(m, { sx: { fontWeight: 700 }, variant: "XSmall", children: o.assets }),
+            /* @__PURE__ */ e(y, { amount: n, sx: { fontWeight: 400 }, variant: "XSmall" })
           ] })
         }
       ) }),
-      /* @__PURE__ */ t(q, { groupedAccounts: U(l) }),
-      /* @__PURE__ */ t(k, { sx: { mb: 8, mt: 12, mx: 8 }, children: /* @__PURE__ */ t(
-        _,
+      /* @__PURE__ */ e(Z, { groupedAccounts: U(s) }),
+      /* @__PURE__ */ e(k, { sx: { mb: 8, mt: 12, mx: 8 }, children: /* @__PURE__ */ e(
+        w,
         {
           primary: /* @__PURE__ */ r(h, { direction: "row", justifyContent: "space-between", children: [
-            /* @__PURE__ */ t(d, { sx: { fontWeight: 700 }, variant: "caption", children: o.liabilities }),
-            /* @__PURE__ */ t(
-              y,
-              {
-                amount: a,
-                sx: { fontWeight: 400 },
-                variant: "caption"
-              }
-            )
+            /* @__PURE__ */ e(m, { sx: { fontWeight: 700 }, variant: "XSmall", children: o.liabilities }),
+            /* @__PURE__ */ e(y, { amount: c, sx: { fontWeight: 400 }, variant: "XSmall" })
           ] })
         }
       ) }),
-      /* @__PURE__ */ t(q, { groupedAccounts: U(i) })
+      /* @__PURE__ */ e(Z, { groupedAccounts: U(i) })
     ] })
   ] });
-}, Jt = w(Zt), Qt = ({
-  netWorth: e,
-  gains: l,
+}, Je = _(Ze), Qe = ({
+  netWorth: t,
+  gains: s,
   losses: i,
   totalGains: n,
-  totalLosses: a
+  totalLosses: c
 }) => {
-  const { net_worth: o } = T(), s = A();
+  const { net_worth: o } = I(), a = se();
   return /* @__PURE__ */ r(v, { children: [
     /* @__PURE__ */ r(h, { alignItems: "center", justifyContent: "space-between", mb: 8, pt: 24, children: [
-      /* @__PURE__ */ t(d, { variant: "body2", children: nt(e?.x) }),
-      /* @__PURE__ */ t(d, { variant: "body1", children: o.total_change }),
-      e && /* @__PURE__ */ t(j, { currencyVariant: "h1", iconSize: 32, netWorth: e, theme: s })
+      /* @__PURE__ */ e(m, { variant: "Small", children: oe(t?.x) }),
+      /* @__PURE__ */ e(m, { variant: "Body", children: o.total_change }),
+      t && /* @__PURE__ */ e(R, { currencyVariant: "H1", iconSize: 32, netWorth: t, theme: a })
     ] }),
-    /* @__PURE__ */ r(z, { children: [
-      /* @__PURE__ */ t(k, { sx: { mb: 8, mt: 12, mx: 8 }, children: /* @__PURE__ */ t(
-        _,
+    /* @__PURE__ */ r(B, { children: [
+      /* @__PURE__ */ e(k, { sx: { mb: 8, mt: 12, mx: 8 }, children: /* @__PURE__ */ e(
+        w,
         {
           primary: /* @__PURE__ */ r(h, { direction: "row", justifyContent: "space-between", children: [
-            /* @__PURE__ */ t(d, { sx: { fontWeight: 700 }, variant: "caption", children: o.gains }),
-            /* @__PURE__ */ t(y, { amount: n, sx: { fontWeight: 400 }, variant: "caption" })
+            /* @__PURE__ */ e(m, { sx: { fontWeight: 700 }, variant: "XSmall", children: o.gains }),
+            /* @__PURE__ */ e(y, { amount: n, sx: { fontWeight: 400 }, variant: "XSmall" })
           ] })
         }
       ) }),
-      l?.map((c) => /* @__PURE__ */ r(m.Fragment, { children: [
-        /* @__PURE__ */ t(D, { sx: { backgroundColor: s.palette.background.paper, py: 14 }, children: /* @__PURE__ */ t(
-          _,
+      s?.map((l) => /* @__PURE__ */ r(d.Fragment, { children: [
+        /* @__PURE__ */ e(D, { sx: { backgroundColor: a.palette.background.paper, py: 14 }, children: /* @__PURE__ */ e(
+          w,
           {
             primary: /* @__PURE__ */ r(h, { direction: "row", justifyContent: "space-between", children: [
-              /* @__PURE__ */ t(d, { sx: { mr: 10 }, variant: "body1", children: c.accountName }),
-              /* @__PURE__ */ t(
+              /* @__PURE__ */ e(m, { sx: { mr: 10 }, variant: "Body", children: l.accountName }),
+              /* @__PURE__ */ e(
                 y,
                 {
-                  amount: c.gain,
-                  sx: { color: s.palette.success.main, flexShrink: 0, fontWeight: 700 },
-                  variant: "body1"
+                  amount: l.gain,
+                  sx: { color: a.palette.success.main, flexShrink: 0, fontWeight: 700 },
+                  variant: "Body"
                 }
               )
             ] }),
             sx: { px: 16 }
           }
         ) }),
-        /* @__PURE__ */ t(W, {})
-      ] }, c.accountName)),
-      /* @__PURE__ */ t(k, { sx: { mb: 8, mt: 12, mx: 8 }, children: /* @__PURE__ */ t(
-        _,
+        /* @__PURE__ */ e(W, {})
+      ] }, l.accountName)),
+      /* @__PURE__ */ e(k, { sx: { mb: 8, mt: 12, mx: 8 }, children: /* @__PURE__ */ e(
+        w,
         {
           primary: /* @__PURE__ */ r(h, { direction: "row", justifyContent: "space-between", children: [
-            /* @__PURE__ */ t(d, { sx: { fontWeight: 700 }, variant: "caption", children: o.losses }),
-            /* @__PURE__ */ t(y, { amount: a, sx: { fontWeight: 400 }, variant: "caption" })
+            /* @__PURE__ */ e(m, { sx: { fontWeight: 700 }, variant: "XSmall", children: o.losses }),
+            /* @__PURE__ */ e(y, { amount: c, sx: { fontWeight: 400 }, variant: "XSmall" })
           ] })
         }
       ) }),
-      i?.map((c) => /* @__PURE__ */ r(v, { children: [
-        /* @__PURE__ */ t(
+      i?.map((l) => /* @__PURE__ */ r(v, { children: [
+        /* @__PURE__ */ e(
           D,
           {
-            sx: { backgroundColor: s.palette.background.paper, py: 14 },
-            children: /* @__PURE__ */ t(
-              _,
+            sx: { backgroundColor: a.palette.background.paper, py: 14 },
+            children: /* @__PURE__ */ e(
+              w,
               {
                 primary: /* @__PURE__ */ r(h, { direction: "row", justifyContent: "space-between", children: [
-                  /* @__PURE__ */ t(
-                    d,
+                  /* @__PURE__ */ e(
+                    m,
                     {
                       sx: {
                         mr: 10
                       },
-                      variant: "body1",
-                      children: c.accountName
+                      variant: "Body",
+                      children: l.accountName
                     }
                   ),
-                  /* @__PURE__ */ t(
+                  /* @__PURE__ */ e(
                     y,
                     {
-                      amount: c.loss,
+                      amount: l.loss,
                       sx: { flexShrink: 0, fontWeight: 700 },
-                      variant: "body1"
+                      variant: "Body"
                     }
                   )
                 ] }),
@@ -432,69 +430,70 @@ const Rt = ({
               }
             )
           },
-          c.accountName
+          l.accountName
         ),
-        /* @__PURE__ */ t(W, {})
+        /* @__PURE__ */ e(W, {})
       ] }))
     ] })
   ] });
-}, Pt = w(Qt), Me = w(({ onBackClick: e }) => {
-  const { isCopyLoaded: l, isInitialized: i, selectedAccounts: n, setSelectedAccounts: a } = P(), { accounts: o, net_worth: s } = T(), { visibleAccounts: c } = J(), {
+}, Pe = _(Qe), Bt = _(({ onBackClick: t }) => {
+  const { isCopyLoaded: s, isInitialized: i, selectedAccounts: n, setSelectedAccounts: c } = ee(), { accounts: o, net_worth: a } = I(), { visibleAccounts: l } = Q(), {
     assetsLiabilities: u,
     gainsLosses: C,
     hoveredData: x,
     loadChartData: g,
-    loadNetWorthData: b,
+    loadNetWorthData: S,
     netWorthChartData: p,
     selectedData: f,
     setHoveredData: L,
-    setSelectedData: it
-  } = tt(), { isMobile: N } = Z(), { onEvent: E } = Q(), { onLoad: st } = St(), [at, ct] = m.useState(!1), [M, lt] = m.useState(6), [dt, G] = m.useState(!1), [mt, $] = m.useState(!1), [ht, B] = m.useState(!1), ut = async () => {
-    await b(n), await g(M), ct(!0);
+    setSelectedData: ce
+  } = te(), { isMobile: N } = J(), { onEvent: E } = P(), [j, le] = d.useState(!1), [M, me] = d.useState(6), [de, $] = d.useState(!1), [he, G] = d.useState(!1), [ue, X] = d.useState(!1), pe = async () => {
+    await S(n), await g(M), le(!0);
   };
-  m.useEffect(() => {
-    E(S.NET_WORTH_VIEW);
-  }, []), m.useEffect(() => {
-    a(c);
-  }, [c]), m.useEffect(() => {
-    i && ut().finally(() => {
-      st?.("NetWorthWidget");
-    });
-  }, [i, n]), m.useEffect(() => {
-    E(S.NET_WORTH_WIDGET_CLICK_TIMEFRAME, { time_period: M + "M" }), g(M).finally();
+  ie({
+    widgetName: "NetWorthWidget",
+    isLoaded: j
+  }), d.useEffect(() => {
+    E(b.NET_WORTH_VIEW);
+  }, []), d.useEffect(() => {
+    c(l);
+  }, [l]), d.useEffect(() => {
+    i && pe().finally();
+  }, [i, n]), d.useEffect(() => {
+    E(b.NET_WORTH_WIDGET_CLICK_TIMEFRAME, { time_period: M + "M" }), g(M).finally();
   }, [M]);
-  const pt = (I, O) => {
-    it(O), I.currentTarget instanceof HTMLDivElement && G(!0);
-  }, ft = (I) => {
-    L(I);
-  }, xt = () => {
+  const fe = (T, A) => {
+    ce(A), T.currentTarget instanceof HTMLDivElement && $(!0);
+  }, xe = (T) => {
+    L(T);
+  }, ge = () => {
     L(null);
-  }, gt = () => {
-    E(S.NET_WORTH_WIDGET_CLICK_ASSETS_LIABILITIES), $(!0);
-  }, yt = async (I) => {
-    const O = I[0], K = I[1];
-    O && K && lt(Dt(K, O));
+  }, ye = () => {
+    E(b.NET_WORTH_WIDGET_CLICK_ASSETS_LIABILITIES), G(!0);
+  }, Ce = async (T) => {
+    const A = T[0], K = T[1];
+    A && K && me(De(K, A));
   }, F = {
     chartData: p,
     hoveredData: x,
-    onButtonClick: gt,
-    onDataClick: pt,
-    onMouseEnter: ft,
-    onMouseLeave: xt,
+    onButtonClick: ye,
+    onDataClick: fe,
+    onMouseEnter: xe,
+    onMouseLeave: ge,
     selectedData: f
-  }, Ct = () => {
-    B(!0), E(S.ACCOUNTS_CLICK_CONNECT);
+  }, Se = () => {
+    X(!0), E(b.ACCOUNTS_CLICK_CONNECT);
   };
-  return l ? /* @__PURE__ */ t(
-    Mt,
+  return s ? /* @__PURE__ */ e(
+    Me,
     {
-      accountOptions: c,
+      accountOptions: l,
       calendarActions: {
-        onRangeChanged: yt
+        onRangeChanged: Ce
       },
       dateRangeVariant: N ? "timeframetabs" : "timeframebuttons",
-      onAccountsFilterClick: () => E(S.NET_WORTH_WIDGET_CLICK_FILTER),
-      onBackClick: e,
+      onAccountsFilterClick: () => E(b.NET_WORTH_WIDGET_CLICK_FILTER),
+      onBackClick: t,
       showDividerAboveDateSelector: !1,
       sx: {
         p: N ? 0 : 48,
@@ -509,10 +508,10 @@ const Rt = ({
           width: "100%"
         }
       },
-      title: s.net_worth,
-      children: at ? /* @__PURE__ */ r(v, { children: [
+      title: a.net_worth,
+      children: j ? /* @__PURE__ */ r(v, { children: [
         p.length ? /* @__PURE__ */ r(v, { children: [
-          f && /* @__PURE__ */ t(Vt, { hoveredData: x, selectedData: f }),
+          f && /* @__PURE__ */ e(Ue, { hoveredData: x, selectedData: f }),
           /* @__PURE__ */ r(
             h,
             {
@@ -520,19 +519,19 @@ const Rt = ({
               direction: N ? "column" : "row",
               spacing: N ? 0 : 48,
               children: [
-                /* @__PURE__ */ t(jt, { ...F }),
-                /* @__PURE__ */ t(Ft, { ...F })
+                /* @__PURE__ */ e(Re, { ...F }),
+                /* @__PURE__ */ e(Xe, { ...F })
               ]
             }
           )
-        ] }) : /* @__PURE__ */ t(rt, { sx: { justifyItems: "center" }, children: /* @__PURE__ */ t(
-          zt,
+        ] }) : /* @__PURE__ */ e(ae, { sx: { justifyItems: "center" }, children: /* @__PURE__ */ e(
+          Oe,
           {
-            header: s.empty_widget_header,
+            header: a.empty_widget_header,
             icon: "elevation",
-            onClick: Ct,
-            primaryButton: s.empty_widget_button,
-            subText: s.empty_widget_description,
+            onClick: Se,
+            primaryButton: a.empty_widget_button,
+            subText: a.empty_widget_description,
             sx: {
               width: { sm: 432 },
               ".buttons-footer": {
@@ -541,47 +540,47 @@ const Rt = ({
             }
           }
         ) }),
-        /* @__PURE__ */ t(
-          Ot,
+        /* @__PURE__ */ e(
+          He,
           {
-            onClose: () => B(!1),
-            showConnectionsWidget: ht,
+            onClose: () => X(!1),
+            showConnectionsWidget: ue,
             title: o.manage_connections
           }
         ),
-        /* @__PURE__ */ t(
-          Y,
+        /* @__PURE__ */ e(
+          q,
           {
             ariaLabelClose: "Close",
-            isOpen: dt,
-            onClose: () => G(!1),
+            isOpen: de,
+            onClose: () => $(!1),
             shouldShowHeaderBorders: !1,
             shouldShowHeaderShadow: !0,
-            title: s.gains_and_losses,
-            children: C && /* @__PURE__ */ t(Pt, { ...C })
+            title: a.gains_and_losses,
+            children: C && /* @__PURE__ */ e(Pe, { ...C })
           }
         ),
-        /* @__PURE__ */ t(
-          Y,
+        /* @__PURE__ */ e(
+          q,
           {
             ariaLabelClose: "Close",
-            isOpen: mt,
-            onClose: () => $(!1),
+            isOpen: he,
+            onClose: () => G(!1),
             shouldShowHeaderBorders: !1,
             shouldShowHeaderShadow: !0,
-            title: s.assets_and_liabilities,
-            children: u && /* @__PURE__ */ t(Jt, { ...u })
+            title: a.assets_and_liabilities,
+            children: u && /* @__PURE__ */ e(Je, { ...u })
           }
         )
-      ] }) : /* @__PURE__ */ t(R, {})
+      ] }) : /* @__PURE__ */ e(O, {})
     }
-  ) : /* @__PURE__ */ t(R, {});
+  ) : /* @__PURE__ */ e(O, {});
 });
 export {
-  jt as NetWorthChart,
-  Ft as NetWorthList,
-  Ae as NetWorthMicroWidget,
-  ze as NetWorthStore,
-  Vt as NetWorthSummary,
-  Me as NetWorthWidget
+  Re as NetWorthChart,
+  Xe as NetWorthList,
+  Ht as NetWorthMicroWidget,
+  Rt as NetWorthStore,
+  Ue as NetWorthSummary,
+  Bt as NetWorthWidget
 };