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

package/dist/merchants/index.es.js

@@ -1,6 +1,79 @@
-import { default as e } from "./components/MerchantLookup/index.es.js";
-import { MerchantStore as a } from "./stores/MerchantStore/index.es.js";
+import { jsx as e, jsxs as r } from "react/jsx-runtime";
+import s from "react";
+import { observer as y } from "mobx-react-lite";
+import { useVirtualizer as _ } from "@tanstack/react-virtual";
+import m from "@mui/material/Box";
+import I from "@mui/material/Divider";
+import z from "@mui/material/List";
+import E from "@mui/material/ListItem";
+import G from "@mui/material/ListItemAvatar";
+import T from "@mui/material/ListItemButton";
+import k from "@mui/material/ListItemText";
+import A from "@mui/material/Paper";
+import d from "@mui/material/Stack";
+import { MerchantLogo as V, Text as R } from "@mxenabled/mxui";
+import { b as v, u as w, a as C } from "../hooks-ClhFlg78.mjs";
+import { L as p } from "../Loader-Dp1P2gNw.mjs";
+import { S as N } from "../SearchBox-B2_zLv8-.mjs";
+import { M as ne } from "../MerchantStore-DVH-QOf0.mjs";
+const B = /^[ a-zA-ZÀ-ÿ0-9]+$/, H = 50, u = 65, P = ({
+  height: f = "calc(100dvh - 120px)",
+  onSelect: g
+}) => {
+  const { isLoading: l, merchants: o, loadMerchants: c } = v(), { common: a } = w(), { isCopyLoaded: L } = C(), [x, S] = s.useState("");
+  s.useEffect(() => {
+    c().finally();
+  }, [c]);
+  const b = (t) => {
+    g(t);
+  }, M = async (t) => {
+    (!t || B.test(t)) && t.length <= H && (S(t), await c(t));
+  }, h = s.useRef(null), i = _({
+    count: o.length,
+    getScrollElement: () => h.current,
+    estimateSize: () => u,
+    overscan: 5
+  });
+  return s.useEffect(() => i.measure(), [o]), L ? /* @__PURE__ */ r(d, { className: "mx-mrt-lookup", children: [
+    /* @__PURE__ */ e(
+      N,
+      {
+        ariaLabel: a.search_aria,
+        cancelAriaLabel: a.cancel_search_aria,
+        onChange: M,
+        placeholder: a.search_placeholder,
+        searchValue: x
+      }
+    ),
+    /* @__PURE__ */ e(A, { sx: { boxShadow: "none" }, children: /* @__PURE__ */ e(z, { children: /* @__PURE__ */ r(m, { height: f, overflow: "auto", ref: h, children: [
+      /* @__PURE__ */ r(m, { height: i.getTotalSize(), position: "relative", children: [
+        l && /* @__PURE__ */ e(p, { label: "Loading...", size: 32 }),
+        !l && i.getVirtualItems().length > 0 && i.getVirtualItems().map((t) => {
+          const n = o[t.index];
+          return /* @__PURE__ */ r(
+            m,
+            {
+              height: u,
+              position: "absolute",
+              sx: { transform: `translateY(${t.start}px)` },
+              width: "100%",
+              children: [
+                /* @__PURE__ */ e(E, { disableGutters: !0, disablePadding: !0, children: /* @__PURE__ */ r(T, { onClick: () => b(n.guid), children: [
+                  /* @__PURE__ */ e(G, { children: /* @__PURE__ */ e(V, { categoryGuid: "", merchantGuid: n.guid }) }),
+                  /* @__PURE__ */ e(k, { primary: n.name })
+                ] }) }),
+                /* @__PURE__ */ e(I, { sx: { ml: 24 } })
+              ]
+            },
+            n.guid
+          );
+        })
+      ] }),
+      !o.length && /* @__PURE__ */ e(d, { alignItems: "center", my: 24, children: /* @__PURE__ */ e(R, { bold: !0, color: "secondary", variant: "Small", children: a.search_zero_state }) })
+    ] }) }) })
+  ] }) : /* @__PURE__ */ e(p, {});
+}, oe = y(P);
 export {
-  e as MerchantLookup,
-  a as MerchantStore
+  oe as MerchantLookup,
+  ne as MerchantStore
 };

package/dist/microinsights/index.es.js

@@ -1,28 +1,16 @@
-import { AppStore as e } from "./stores/AppStore/index.es.js";
-import { InsightsMicroWidgetDataProvider as a } from "./context/InsightsMicroWidgetDataProvider/index.es.js";
-import { BeatCard as d } from "./components/beatCard/BeatCard/index.es.js";
-import { default as s } from "./components/microBeatCarousel/MicroBeatCarousel/index.es.js";
-import { MicroInsightCard as m } from "./components/microInsightCard/MicroInsightCard/index.es.js";
-import { default as l } from "./components/carouselheader/CarouselHeader/index.es.js";
-import { default as C } from "./components/insightsmicrowidget/InsightsMicroWidget/index.es.js";
-import { default as u } from "./components/noRelevantInsightsCard/NoRelevantInsightsCard/index.es.js";
-import { default as M } from "./components/viewMoreMicroCard/ViewMoreMicroCard/index.es.js";
-import { default as h } from "./components/zeroStateCard/ZeroStateCard/index.es.js";
-import { ChartFilledIcon as v } from "./components/beaticons/ChartFilledIcon/index.es.js";
-import { MonthlySpendComparisonIcon as W } from "./components/beaticons/MonthlySpendComparisonIcon/index.es.js";
-import { ZeroStateIcon as w } from "./components/beaticons/ZeroStateIcon/index.es.js";
+import { A as s, B as e, C as o, c as t, b as i, I as d, M as n, a as C, d as c, N as I, V as M, Z as g, e as h } from "../ViewMoreMicroCard-CAPFNz-J.mjs";
 export {
-  e as AppStore,
-  d as BeatCard,
-  l as CarouselHeader,
-  v as ChartFilledIcon,
-  C as InsightsMicroWidget,
-  a as InsightsMicroWidgetDataProvider,
-  s as MicroBeatCarousel,
-  m as MicroInsightCard,
-  W as MonthlySpendComparisonIcon,
-  u as NoRelevantInsightsCard,
+  s as AppStore,
+  e as BeatCard,
+  o as CarouselHeader,
+  t as ChartFilledIcon,
+  i as InsightsMicroWidget,
+  d as InsightsMicroWidgetDataProvider,
+  n as MicroBeatCarousel,
+  C as MicroInsightCard,
+  c as MonthlySpendComparisonIcon,
+  I as NoRelevantInsightsCard,
   M as ViewMoreMicroCard,
-  h as ZeroStateCard,
-  w as ZeroStateIcon
+  g as ZeroStateCard,
+  h as ZeroStateIcon
 };

package/dist/networth/index.es.js

@@ -1,14 +1,542 @@
-import { default as o } from "./components/NetWorthChart/index.es.js";
-import { default as f } from "./components/NetWorthList/index.es.js";
-import { default as m } from "./components/NetWorthSummary/index.es.js";
-import { NetWorthStore as h } from "./stores/NetWorthStore/index.es.js";
-import { NetWorthMicroWidget as x } from "./NetWorthMicroWidget/index.es.js";
-import { NetWorthWidget as d } from "./NetWorthWidget/index.es.js";
+import { jsx as e, jsxs as r, Fragment as v } from "react/jsx-runtime";
+import { format as we } from "date-fns/format";
+import { fromUnixTime as _e } from "date-fns/fromUnixTime";
+import { observer as S } from "mobx-react-lite";
+import { useTheme as z } from "@mui/material/styles";
+import { u as Z } from "../useScreenSize-B6JyS_Lj.mjs";
+import { p as Se, u as T, c as J, g as Q, a as P, q as ee } from "../hooks-ClhFlg78.mjs";
+import { L as be } from "../LineChart-CQWu5KoO.mjs";
+import W from "@mui/material/Divider";
+import H from "@mui/material/List";
+import D from "@mui/material/ListSubheader";
+import h from "@mui/material/Stack";
+import { Text as m, Icon as B, H1 as We, P as ve } from "@mxenabled/mxui";
+import d from "react";
+import k from "@mui/material/ListItem";
+import te from "@mui/material/ListItemButton";
+import _ from "@mui/material/ListItemText";
+import { i as ne } from "../DateUtil-BcuH7ErC.mjs";
+import { C as y } from "../CurrencyText-YUhH2caW.mjs";
+import { Button as Ie, Stack as Te } from "@mui/material";
+import { format as Le, fromUnixTime as Ee, differenceInMonths as Ne } from "date-fns";
+import { g as K } from "../NetWorthStore-DE8CQBMM.mjs";
+import { N as Ht } from "../NetWorthStore-DE8CQBMM.mjs";
+import { Icon as oe } from "@mxenabled/mx-icons";
+import { f as U } from "../NumberFormatting-CtWHhyBX.mjs";
+import { A as b, W as De } from "../WidgetContainer-CmGNZW0M.mjs";
+import { L as O } from "../Loader-Dp1P2gNw.mjs";
+import { M as ke } from "../MicroWidgetContainer-DaLW43tE.mjs";
+import re from "@mui/material/Box";
+import { C as Me } from "../ConnectionsDrawer-BCzpuNsK.mjs";
+import Ae from "@mui/material/Collapse";
+import V from "@mui/material/ListItemIcon";
+import ie from "@mui/material/styles/useTheme";
+import { E as Be } from "../EmptyState-Dcb-o2tl.mjs";
+import { D as Y } from "../Drawer-kEE73B87.mjs";
+const He = ({
+  chartData: t,
+  hoveredData: l,
+  onDataClick: i,
+  onMouseEnter: n,
+  onMouseLeave: a,
+  selectedData: o
+}) => {
+  const { isMobile: s } = Z(), { availableWidth: c } = Se(), u = z(), C = c - 320, x = t.map((f) => ({
+    x: we(_e(f.x), "MMM"),
+    y: f.y
+  })), g = o ? { index: t.findIndex((f) => f.x === o.x) } : void 0, w = l ? { index: t.findIndex((f) => f.x === l.x) } : void 0, p = (f) => ({
+    fill: f === g?.index ? u.palette.success.main : "",
+    filter: f === w?.index ? `drop-shadow(0px 0px 10px ${u.palette.success.main})` : "none",
+    stroke: u.palette.success.main
+  });
+  return /* @__PURE__ */ e(
+    be,
+    {
+      baseline: "min",
+      colors: [u.palette.success.main],
+      datasets: [x],
+      height: 350,
+      labels: [],
+      margin: { right: 20 },
+      markHandlers: { onMarkClick: i, onMouseEnter: n, onMouseLeave: a },
+      markStyles: p,
+      showArea: !0,
+      useCustomMark: !0,
+      valueFormatterString: "0,0a",
+      width: s ? 320 : C
+    }
+  );
+}, Oe = S(He), ze = ({
+  item: t,
+  getStyles: l,
+  isHovered: i = !1,
+  isSelected: n = !1,
+  onItemClick: a,
+  onMouseEnter: o,
+  onMouseLeave: s
+}) => {
+  const [c, u] = d.useState({
+    color: ""
+  });
+  return d.useEffect(() => {
+    u(l(t));
+  }, [i, n]), /* @__PURE__ */ r(d.Fragment, { children: [
+    /* @__PURE__ */ e(
+      k,
+      {
+        sx: {
+          ...c,
+          minHeight: 44,
+          "&:hover": { color: n ? "inherit" : c.color }
+        },
+        children: /* @__PURE__ */ e(
+          te,
+          {
+            onClick: (C) => a?.(C, t.x),
+            onMouseEnter: () => o(t.x),
+            onMouseLeave: () => s(),
+            sx: { minHeight: 20, padding: 12 },
+            children: /* @__PURE__ */ e(
+              _,
+              {
+                primary: /* @__PURE__ */ r(h, { direction: "row", justifyContent: "space-between", sx: { fontWeight: 400 }, children: [
+                  /* @__PURE__ */ e(m, { variant: "Body", children: ne(t.x) }),
+                  /* @__PURE__ */ e(y, { amount: t.y, sx: { color: "inherit" }, variant: "Body" })
+                ] })
+              }
+            )
+          }
+        )
+      }
+    ),
+    /* @__PURE__ */ e(W, {})
+  ] }, t.x);
+}, $e = S(ze), je = ({
+  chartData: t,
+  hoveredData: l,
+  onDataClick: i,
+  onButtonClick: n,
+  onMouseEnter: a,
+  onMouseLeave: o,
+  selectedData: s
+}) => {
+  const { net_worth: c } = T(), u = z(), C = (x) => {
+    const g = x.x === l?.x, w = x.x === s?.x, p = {
+      backgroundColor: "inherit",
+      borderBottom: "inherit",
+      color: "inherit"
+    };
+    return g && (p.color = w ? "inherit" : p.color, p.backgroundColor = u.palette.action.hover), w && (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(H, { children: [
+      /* @__PURE__ */ e(D, { sx: { backgroundColor: "transparent", mb: 8, mt: 12, px: 12 }, children: /* @__PURE__ */ e(m, { bold: !0, component: "h2", variant: "Body", children: c.monthly_totals }) }),
+      /* @__PURE__ */ e(W, {}),
+      t.map((x, g) => /* @__PURE__ */ e(
+        $e,
+        {
+          getStyles: C,
+          isHovered: x.x === l?.x,
+          isSelected: x.x === s?.x,
+          item: x,
+          onItemClick: (w) => i(w, g),
+          onMouseEnter: () => a(g),
+          onMouseLeave: () => o()
+        },
+        x.x
+      ))
+    ] }),
+    /* @__PURE__ */ e(
+      Ie,
+      {
+        onClick: () => n(),
+        sx: { alignSelf: "center", marginTop: 16, width: "fit-content" },
+        variant: "outlined",
+        children: c.view_assets_and_liabilities
+      }
+    )
+  ] });
+}, Re = S(je), Ge = ({
+  currencyLabel: t,
+  currencyVariant: l = "Small",
+  iconSize: i,
+  netWorth: n,
+  theme: a
+}) => {
+  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(Te, { alignItems: "center", direction: "row", spacing: 4, children: [
+    /* @__PURE__ */ e(
+      B,
+      {
+        name: c,
+        size: i,
+        sx: {
+          color: o
+        }
+      }
+    ),
+    /* @__PURE__ */ e(y, { amount: n.change, color: s, variant: l }),
+    /* @__PURE__ */ e(m, { variant: "Small", children: t })
+  ] });
+}, $ = S(Ge), Fe = ({ hoveredData: t, selectedData: l }) => {
+  const { net_worth: i } = T(), n = z(), a = t || l, o = Le(Ee(a.x), "MMMM");
+  return /* @__PURE__ */ r(h, { alignItems: "center", direction: "column", m: 24, children: [
+    /* @__PURE__ */ e(m, { color: n.palette.secondary.main, variant: "Small", children: `${o} ${i.net_worth}` }),
+    /* @__PURE__ */ e(y, { amount: a.y, variant: "H2" }),
+    /* @__PURE__ */ e($, { currencyLabel: i.this_month, netWorth: a, theme: n })
+  ] });
+}, Xe = S(Fe), Ke = ({ amount: t, copy: l, 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__ */ e(We, { children: U(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__ */ e(oe, { name: o, size: 20 }),
+        /* @__PURE__ */ e(m, { sx: { fontWeight: 600, textAlign: "right" }, variant: "body1", children: U(i, "0,0.00") })
+      ] }),
+      /* @__PURE__ */ e(m, { sx: { display: "block", textAlign: "right" }, variant: "caption", children: l.this_month })
+    ] })
+  ] });
+}, Ue = ({ copy: t }) => /* @__PURE__ */ r(h, { sx: { flexDirection: "row", gap: 12 }, children: [
+  /* @__PURE__ */ e(oe, { name: "elevation", size: 32, sx: { color: "text.primary" } }),
+  /* @__PURE__ */ r(h, { children: [
+    /* @__PURE__ */ e(m, { sx: { display: "block", fontWeight: 600 }, variant: "body1", children: t.empty_widget_header }),
+    /* @__PURE__ */ e(ve, { sx: { color: "text.secondary" }, variant: "body2", children: t.zero_state_description })
+  ] })
+] }), kt = S(({ onCTAClick: t }) => {
+  const [l, i] = d.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: w, selectedData: p } = ee(), f = async () => {
+    await g(u), await x(1), i(!0);
+  };
+  if (d.useEffect(() => C(n), [n]), d.useEffect(() => {
+    c && f().finally(), a(b.NET_WORTH_LOAD_WIDGET, {
+      state: n?.length ? "default" : "zeroState"
+    });
+  }, [c]), !l) return /* @__PURE__ */ e(O, { height: 100 });
+  const L = () => {
+    a(
+      n.length ? b.NET_WORTH_CLICK_VIEW_DETAILS : b.NET_WORTH_CLICK_GET_STARTED
+    ), t();
+  };
+  return /* @__PURE__ */ e(
+    ke,
+    {
+      className: "mx-networth-microwidget",
+      ctaLabel: s.see_details,
+      onCTAClick: L,
+      title: o.net_worth,
+      children: w.accounts.length ? /* @__PURE__ */ e(
+        Ke,
+        {
+          amount: p?.y,
+          copy: o,
+          trendValue: p?.change
+        }
+      ) : /* @__PURE__ */ e(Ue, { copy: o })
+    }
+  );
+}), Ve = ({ accounts: t, name: l, icon: i }) => {
+  const [n, a] = d.useState(!1);
+  return /* @__PURE__ */ r(v, { children: [
+    /* @__PURE__ */ e(k, { sx: (o) => ({ backgroundColor: o.palette.background.paper }), children: /* @__PURE__ */ r(te, { onClick: () => a(!n), children: [
+      i && /* @__PURE__ */ e(V, { children: /* @__PURE__ */ e(B, { name: i, size: 24, sx: { mr: 12 } }) }),
+      /* @__PURE__ */ e(
+        _,
+        {
+          primary: /* @__PURE__ */ e(m, { sx: { fontWeight: 700 }, variant: "Body", children: l })
+        }
+      ),
+      /* @__PURE__ */ e(V, { children: n ? /* @__PURE__ */ e(B, { name: "expand_less", size: 24 }) : /* @__PURE__ */ e(B, { name: "expand_more", size: 24 }) })
+    ] }) }),
+    /* @__PURE__ */ e(W, {}),
+    /* @__PURE__ */ e(Ae, { in: n, timeout: "auto", unmountOnExit: !0, children: t.map((o, s) => /* @__PURE__ */ r(H, { children: [
+      /* @__PURE__ */ e(k, { sx: () => ({ py: 14 }), children: /* @__PURE__ */ e(
+        _,
+        {
+          primary: /* @__PURE__ */ r(h, { direction: "row", justifyContent: "space-between", sx: { fontWeight: 400 }, children: [
+            /* @__PURE__ */ e(m, { variant: "Body", children: o.accountName }),
+            /* @__PURE__ */ e(y, { amount: o.balance, variant: "Small" })
+          ] }),
+          sx: { pl: 72, pr: 16 }
+        }
+      ) }),
+      s < t.length - 1 ? /* @__PURE__ */ e(W, { variant: "inset" }) : /* @__PURE__ */ e(W, {})
+    ] }, o.accountName)) })
+  ] });
+}, q = ({ groupedAccounts: t }) => /* @__PURE__ */ e(v, { children: t.map(({ accounts: l, icon: i, name: n }) => /* @__PURE__ */ e(Ve, { accounts: l, icon: i, name: n }, n)) }), Ye = ({
+  netWorth: t,
+  assets: l,
+  liabilities: i,
+  totalAssets: n,
+  totalLiabilities: a
+}) => {
+  const { net_worth: o } = T(), s = ie();
+  return /* @__PURE__ */ r(v, { children: [
+    /* @__PURE__ */ r(
+      re,
+      {
+        sx: {
+          alignItems: "center",
+          display: "flex",
+          flexDirection: "column",
+          justifyContent: "space-between",
+          paddingTop: 24,
+          marginBottom: 8
+        },
+        children: [
+          /* @__PURE__ */ e(m, { variant: "Body", children: o.current_net_worth }),
+          /* @__PURE__ */ e(y, { amount: t?.y ?? 0, variant: "H1" }),
+          t && /* @__PURE__ */ e(
+            $,
+            {
+              currencyLabel: o.this_month,
+              iconSize: 20,
+              netWorth: t,
+              theme: s
+            }
+          )
+        ]
+      }
+    ),
+    /* @__PURE__ */ r(H, { children: [
+      /* @__PURE__ */ e(D, { sx: { mb: 8, mt: 12, mx: 8 }, children: /* @__PURE__ */ e(
+        _,
+        {
+          primary: /* @__PURE__ */ r(h, { direction: "row", justifyContent: "space-between", children: [
+            /* @__PURE__ */ e(m, { sx: { fontWeight: 700 }, variant: "XSmall", children: o.assets }),
+            /* @__PURE__ */ e(y, { amount: n, sx: { fontWeight: 400 }, variant: "XSmall" })
+          ] })
+        }
+      ) }),
+      /* @__PURE__ */ e(q, { groupedAccounts: K(l) }),
+      /* @__PURE__ */ e(D, { sx: { mb: 8, mt: 12, mx: 8 }, children: /* @__PURE__ */ e(
+        _,
+        {
+          primary: /* @__PURE__ */ r(h, { direction: "row", justifyContent: "space-between", children: [
+            /* @__PURE__ */ e(m, { sx: { fontWeight: 700 }, variant: "XSmall", children: o.liabilities }),
+            /* @__PURE__ */ e(y, { amount: a, sx: { fontWeight: 400 }, variant: "XSmall" })
+          ] })
+        }
+      ) }),
+      /* @__PURE__ */ e(q, { groupedAccounts: K(i) })
+    ] })
+  ] });
+}, qe = S(Ye), Ze = ({
+  netWorth: t,
+  gains: l,
+  losses: i,
+  totalGains: n,
+  totalLosses: a
+}) => {
+  const { net_worth: o } = T(), s = ie();
+  return /* @__PURE__ */ r(v, { children: [
+    /* @__PURE__ */ r(h, { alignItems: "center", justifyContent: "space-between", mb: 8, pt: 24, children: [
+      /* @__PURE__ */ e(m, { variant: "Small", children: ne(t?.x) }),
+      /* @__PURE__ */ e(m, { variant: "Body", children: o.total_change }),
+      t && /* @__PURE__ */ e($, { currencyVariant: "H1", iconSize: 32, netWorth: t, theme: s })
+    ] }),
+    /* @__PURE__ */ r(H, { children: [
+      /* @__PURE__ */ e(D, { sx: { mb: 8, mt: 12, mx: 8 }, children: /* @__PURE__ */ e(
+        _,
+        {
+          primary: /* @__PURE__ */ r(h, { direction: "row", justifyContent: "space-between", children: [
+            /* @__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(d.Fragment, { children: [
+        /* @__PURE__ */ e(k, { sx: { backgroundColor: s.palette.background.paper, py: 14 }, children: /* @__PURE__ */ e(
+          _,
+          {
+            primary: /* @__PURE__ */ r(h, { direction: "row", justifyContent: "space-between", sx: { fontWeight: 400 }, children: [
+              /* @__PURE__ */ e(m, { variant: "Body", children: c.accountName }),
+              /* @__PURE__ */ e(
+                y,
+                {
+                  amount: c.gain,
+                  sx: { color: s.palette.success.main, fontWeight: 700 },
+                  variant: "Body"
+                }
+              )
+            ] }),
+            sx: { px: 16 }
+          }
+        ) }),
+        /* @__PURE__ */ e(W, {})
+      ] }, c.accountName)),
+      /* @__PURE__ */ e(D, { sx: { mb: 8, mt: 12, mx: 8 }, children: /* @__PURE__ */ e(
+        _,
+        {
+          primary: /* @__PURE__ */ r(h, { direction: "row", justifyContent: "space-between", children: [
+            /* @__PURE__ */ e(m, { sx: { fontWeight: 700 }, variant: "XSmall", children: o.losses }),
+            /* @__PURE__ */ e(y, { amount: a, sx: { fontWeight: 400 }, variant: "XSmall" })
+          ] })
+        }
+      ) }),
+      i?.map((c) => /* @__PURE__ */ r(v, { children: [
+        /* @__PURE__ */ e(
+          k,
+          {
+            sx: { backgroundColor: s.palette.background.paper, py: 14 },
+            children: /* @__PURE__ */ e(
+              _,
+              {
+                primary: /* @__PURE__ */ r(h, { direction: "row", justifyContent: "space-between", sx: { fontWeight: 400 }, children: [
+                  /* @__PURE__ */ e(m, { variant: "Body", children: c.accountName }),
+                  /* @__PURE__ */ e(y, { amount: c.loss, sx: { fontWeight: 700 }, variant: "Body" })
+                ] }),
+                sx: { px: 16 }
+              }
+            )
+          },
+          c.accountName
+        ),
+        /* @__PURE__ */ e(W, {})
+      ] }))
+    ] })
+  ] });
+}, Je = S(Ze), Mt = S(({ onBackClick: t }) => {
+  const { isCopyLoaded: l, isInitialized: i, selectedAccounts: n, setSelectedAccounts: a } = P(), { accounts: o, net_worth: s } = T(), { visibleAccounts: c } = J(), {
+    assetsLiabilities: u,
+    gainsLosses: C,
+    hoveredData: x,
+    loadChartData: g,
+    loadNetWorthData: w,
+    netWorthChartData: p,
+    selectedData: f,
+    setHoveredData: L,
+    setSelectedData: se
+  } = ee(), { isMobile: E } = Z(), { onEvent: N } = Q(), [ae, ce] = d.useState(!1), [M, le] = d.useState(6), [me, j] = d.useState(!1), [de, R] = d.useState(!1), [he, G] = d.useState(!1), ue = async () => {
+    await w(n), await g(M), ce(!0);
+  };
+  d.useEffect(() => {
+    N(b.NET_WORTH_VIEW);
+  }, []), d.useEffect(() => {
+    a(c);
+  }, [c]), d.useEffect(() => {
+    i && ue().finally();
+  }, [i, n]), d.useEffect(() => {
+    N(b.NET_WORTH_WIDGET_CLICK_TIMEFRAME, { time_period: M + "M" }), g(M).finally();
+  }, [M]);
+  const pe = (I, A) => {
+    se(A), I.currentTarget instanceof HTMLDivElement && j(!0);
+  }, fe = (I) => {
+    L(I);
+  }, xe = () => {
+    L(null);
+  }, ge = () => {
+    N(b.NET_WORTH_WIDGET_CLICK_ASSETS_LIABILITIES), R(!0);
+  }, ye = async (I) => {
+    const A = I[0], X = I[1];
+    A && X && le(Ne(X, A));
+  }, F = {
+    chartData: p,
+    hoveredData: x,
+    onButtonClick: ge,
+    onDataClick: pe,
+    onMouseEnter: fe,
+    onMouseLeave: xe,
+    selectedData: f
+  }, Ce = () => {
+    G(!0), N(b.ACCOUNTS_CLICK_CONNECT);
+  };
+  return l ? /* @__PURE__ */ e(
+    De,
+    {
+      accountOptions: c,
+      calendarActions: {
+        onRangeChanged: ye
+      },
+      dateRangeVariant: E ? "timeframetabs" : "timeframebuttons",
+      onAccountsFilterClick: () => N(b.NET_WORTH_WIDGET_CLICK_FILTER),
+      onBackClick: t,
+      showDividerAboveDateSelector: !1,
+      sx: {
+        p: E ? 0 : 48,
+        "& .MuiCardHeader-root": {
+          px: 16,
+          py: 12
+        },
+        "& .MuiBox-root": {
+          m: 0
+        },
+        "& .MuiTabs-root": {
+          width: "100%"
+        }
+      },
+      title: s.net_worth,
+      children: ae ? /* @__PURE__ */ r(v, { children: [
+        p.length ? /* @__PURE__ */ r(v, { children: [
+          f && /* @__PURE__ */ e(Xe, { hoveredData: x, selectedData: f }),
+          /* @__PURE__ */ r(
+            h,
+            {
+              alignItems: E ? "center" : "flex-start",
+              direction: E ? "column" : "row",
+              spacing: E ? 0 : 48,
+              children: [
+                /* @__PURE__ */ e(Oe, { ...F }),
+                /* @__PURE__ */ e(Re, { ...F })
+              ]
+            }
+          )
+        ] }) : /* @__PURE__ */ e(re, { sx: { justifyItems: "center" }, children: /* @__PURE__ */ e(
+          Be,
+          {
+            header: s.empty_widget_header,
+            icon: "elevation",
+            onClick: Ce,
+            primaryButton: s.empty_widget_button,
+            subText: s.empty_widget_description,
+            sx: {
+              width: { sm: 432 },
+              ".buttons-footer": {
+                width: 167
+              }
+            }
+          }
+        ) }),
+        /* @__PURE__ */ e(
+          Me,
+          {
+            onClose: () => G(!1),
+            showConnectionsWidget: he,
+            title: o.manage_connections
+          }
+        ),
+        /* @__PURE__ */ e(
+          Y,
+          {
+            ariaLabelClose: "Close",
+            isOpen: me,
+            onClose: () => j(!1),
+            shouldShowHeaderBorders: !1,
+            shouldShowHeaderShadow: !0,
+            title: s.gains_and_losses,
+            children: C && /* @__PURE__ */ e(Je, { ...C })
+          }
+        ),
+        /* @__PURE__ */ e(
+          Y,
+          {
+            ariaLabelClose: "Close",
+            isOpen: de,
+            onClose: () => R(!1),
+            shouldShowHeaderBorders: !1,
+            shouldShowHeaderShadow: !0,
+            title: s.assets_and_liabilities,
+            children: u && /* @__PURE__ */ e(qe, { ...u })
+          }
+        )
+      ] }) : /* @__PURE__ */ e(O, {})
+    }
+  ) : /* @__PURE__ */ e(O, {});
+});
 export {
-  o as NetWorthChart,
-  f as NetWorthList,
-  x as NetWorthMicroWidget,
-  h as NetWorthStore,
-  m as NetWorthSummary,
-  d as NetWorthWidget
+  Oe as NetWorthChart,
+  Re as NetWorthList,
+  kt as NetWorthMicroWidget,
+  Ht as NetWorthStore,
+  Xe as NetWorthSummary,
+  Mt as NetWorthWidget
 };