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

package/dist/investments/components/Allocation/InvestementAllocationList/index.es.js

@@ -1,126 +0,0 @@
-import { jsxs as e, jsx as o, Fragment as w } from "react/jsx-runtime";
-import S from "react";
-import _ from "@mui/material/Box";
-import D from "@mui/material/Collapse";
-import p from "@mui/material/Divider";
-import h from "@mui/material/List";
-import g from "@mui/material/ListItem";
-import L from "@mui/material/ListItemButton";
-import s from "@mui/material/Stack";
-import j from "@mui/material/ToggleButton";
-import k from "@mui/material/ToggleButtonGroup";
-import { Text as i } from "@mxenabled/mxui";
-import { EmptyStateFooterComponent as A } from "../../EmptyStateFooterComponent/index.es.js";
-import { currencyDisplay as c, percentageDisplay as u } from "../util/createInvestementsAllocationData/index.es.js";
-import { useScreenSize as x } from "../../../../common/hooks/useScreenSize/index.es.js";
-import { useGlobalCopyStore as E } from "../../../../common/context/hooks/index.es.js";
-const U = ({
-  data: d,
-  onSelected: f,
-  selectedId: n,
-  selectedTabs: l,
-  setSelectedTabs: y
-}) => {
-  const b = (r, t) => {
-    t !== null && y(t);
-  }, { isMobile: v } = x(), {
-    investments: { allocation: a }
-  } = E(), C = [
-    { label: a.tabs_label_dollar, value: 0 },
-    { label: a.tabs_label_percent, value: 1 }
-  ], m = !d?.investmentsData.length, { isSmallMobile: B } = x();
-  return /* @__PURE__ */ e(s, { sx: { mt: 15, gap: 12, width: v ? 250 : 412 }, children: [
-    /* @__PURE__ */ o(
-      k,
-      {
-        exclusive: !0,
-        fullWidth: !0,
-        onChange: b,
-        value: m ? -1 : l,
-        children: C.map(({ label: r, value: t }) => /* @__PURE__ */ o(j, { color: "primary", value: t, children: /* @__PURE__ */ o(i, { bold: !0, textTransform: "capitalize", variant: "Body", children: r }) }, r))
-      }
-    ),
-    /* @__PURE__ */ o(h, { sx: { px: 12 }, children: d.investmentsData.map((r) => /* @__PURE__ */ e(S.Fragment, { children: [
-      /* @__PURE__ */ o(
-        g,
-        {
-          disableGutters: !0,
-          disablePadding: !0,
-          sx: {
-            minHeight: 44
-          },
-          children: /* @__PURE__ */ e(
-            L,
-            {
-              "aria-expanded": n === r.guid,
-              onClick: () => f(r.guid),
-              sx: { minHeight: 44, px: 12, py: 0 },
-              children: [
-                /* @__PURE__ */ o(
-                  _,
-                  {
-                    borderRadius: 4,
-                    flexShrink: 0,
-                    height: 8,
-                    sx: { backgroundColor: r.color, mr: 8 },
-                    width: 8
-                  }
-                ),
-                /* @__PURE__ */ e(
-                  s,
-                  {
-                    alignItems: "center",
-                    direction: "row",
-                    justifyContent: "space-between",
-                    width: "100%",
-                    children: [
-                      /* @__PURE__ */ o(i, { bold: n === r.guid, children: r.displayName }),
-                      /* @__PURE__ */ o(i, { bold: n === r.guid, variant: "Body", children: l === 0 ? c(r.value) : u(r.percentage) })
-                    ]
-                  }
-                )
-              ]
-            }
-          )
-        }
-      ),
-      /* @__PURE__ */ o(p, {}),
-      r.holdings && r.holdings.length > 0 && /* @__PURE__ */ o(D, { in: n === r.guid, unmountOnExit: !0, children: /* @__PURE__ */ e(h, { children: [
-        r?.holdings?.map((t) => /* @__PURE__ */ o(
-          g,
-          {
-            sx: {
-              pl: 24,
-              pr: 8,
-              py: 0
-            },
-            children: /* @__PURE__ */ e(s, { direction: "row", justifyContent: "space-between", width: "100%", children: [
-              /* @__PURE__ */ e(i, { children: [
-                t.displayName,
-                " "
-              ] }),
-              /* @__PURE__ */ o(i, { children: l === 0 ? c(t.value) : u(t.percentage) })
-            ] })
-          },
-          t.displayName
-        )),
-        /* @__PURE__ */ o(p, {})
-      ] }) })
-    ] }, r.guid)) }),
-    m ? /* @__PURE__ */ e(w, { children: [
-      /* @__PURE__ */ o(i, { sx: { color: "secondary.main", p: 8, textAlign: "center" }, children: a.empty_data }),
-      /* @__PURE__ */ o(p, { sx: { borderColor: "border.light" } }),
-      /* @__PURE__ */ o(
-        A,
-        {
-          sx: {
-            ".inner-container": { width: B ? "100%" : 364 }
-          }
-        }
-      )
-    ] }) : l === 0 && /* @__PURE__ */ o(i, { bold: !0, sx: { textAlign: "right", pr: 24 }, children: `${a.total_label_text} ${c(d.totalAmount)}` })
-  ] });
-};
-export {
-  U as InvestementAllocationList
-};

package/dist/investments/components/Allocation/InvestmentsAllocationChart/index.es.js

@@ -1,67 +0,0 @@
-import { jsx as e, jsxs as c } from "react/jsx-runtime";
-import m from "react";
-import r from "@mui/material/Stack";
-import L from "@mui/material/styles/useTheme";
-import { Text as p, H1 as j } from "@mxenabled/mxui";
-import { Icon as I } from "@mxenabled/mx-icons";
-import { currencyDisplay as u, percentageDisplay as M } from "../util/createInvestementsAllocationData/index.es.js";
-import b from "../../../../common/components/charts/Donut/index.es.js";
-import { useGlobalCopyStore as w } from "../../../../common/context/hooks/index.es.js";
-const V = ({
-  data: t,
-  hoveredId: g,
-  isPercentage: h,
-  onMouseEnter: f,
-  onMouseLeave: y,
-  onSelected: d,
-  selectedId: o,
-  size: i = 150,
-  totalLabel: x
-}) => {
-  const s = L(), l = s.palette.mode === "dark", n = m.useMemo(
-    () => o ? t.investmentsData.find(({ guid: G }) => G === o) : void 0,
-    [o]
-  ), {
-    investments: { allocation: D }
-  } = w(), C = m.useMemo(() => t.donutData.length > 0 ? t.donutData : [{ id: "0", color: s.palette.border.light, value: 100 }], [t, s]), v = l ? "#0AC295" : "#09A57F", _ = l ? "grey.300" : "grey.700", k = () => n ? D.pie_chart_centered_click_for_details : h ? M(t.totalGainLossPercentage) : u(t.totalGainLoss), a = t.totalGainLoss >= 0 ? v : _;
-  return /* @__PURE__ */ e(
-    b,
-    {
-      data: C,
-      hoveredId: g,
-      onClick: d,
-      onMouseEnter: f,
-      onMouseLeave: y,
-      selectedId: o,
-      size: i,
-      children: /* @__PURE__ */ e(r, { alignItems: "center", height: "100%", justifyContent: "center", width: "100%", children: /* @__PURE__ */ e(r, { alignItems: "center", justifyContent: "center", minHeight: i, minWidth: i, children: /* @__PURE__ */ c(r, { alignItems: "center", sx: { gap: { xs: 4, xl: 8 }, mb: { xs: 4, xl: 8 } }, children: [
-        /* @__PURE__ */ e(p, { color: "text.secondary", noWrap: !0, children: n?.displayName ?? x }),
-        /* @__PURE__ */ e(j, { color: "text.primary", children: u(n?.value ?? t.totalMarketValue) }),
-        /* @__PURE__ */ c(r, { sx: { alignItems: "center", flexDirection: "row", gap: 4 }, children: [
-          !n && /* @__PURE__ */ e(
-            I,
-            {
-              name: t.totalGainLoss >= 0 ? "trending_up" : "trending_down",
-              size: 20,
-              sx: { color: a }
-            }
-          ),
-          /* @__PURE__ */ e(
-            p,
-            {
-              sx: {
-                color: a,
-                fontWeight: 700
-              },
-              variant: "Small",
-              children: k()
-            }
-          )
-        ] })
-      ] }) }) })
-    }
-  );
-};
-export {
-  V as InvestementsAllocationChart
-};

package/dist/investments/components/Allocation/index.es.js

@@ -1,67 +0,0 @@
-import { jsxs as b, jsx as m } from "react/jsx-runtime";
-import s from "react";
-import x from "@mui/material/Stack";
-import A from "@mui/material/useMediaQuery";
-import { observer as I } from "mobx-react-lite";
-import { InvestementAllocationList as g } from "../allocation/InvestementAllocationList/index.es.js";
-import { InvestementsAllocationChart as h } from "../allocation/InvestmentsAllocationChart/index.es.js";
-import { createInvestmentsAllocationData as y } from "../allocation/util/createInvestementsAllocationData/index.es.js";
-import { useGlobalUiStore as H, useHoldingStore as M, useAccountStore as j, useGlobalCopyStore as w } from "../../../common/context/hooks/index.es.js";
-import { useScreenSize as C } from "../../../common/hooks/useScreenSize/index.es.js";
-const D = () => {
-  const [n, d] = s.useState(0), [t, c] = s.useState(""), [u, o] = s.useState(""), i = (e) => {
-    t !== e ? c(e) : (c(""), o(""));
-  }, { selectedAccountGuids: f } = H(), { visibleHoldings: p } = M(), { visibleInvestmentAccounts: S } = j(), {
-    investments: { allocation: r }
-  } = w(), l = y(
-    S.filter(({ guid: e }) => f.includes(e)),
-    r,
-    p
-  ), { isMobile: v } = C(), a = A("(max-width:768px)");
-  return /* @__PURE__ */ b(
-    x,
-    {
-      alignItems: a ? "center" : "flex-start",
-      direction: a ? "column" : "row",
-      gap: { xs: 16, md: 64, xl: 100 },
-      sx: {
-        justifyContent: "center",
-        mt: 50,
-        width: "100%"
-      },
-      children: [
-        /* @__PURE__ */ m(
-          h,
-          {
-            data: l,
-            hoveredId: u,
-            isPercentage: n === 1,
-            onMouseEnter: (e) => {
-              t === e ? o("") : t || o(e);
-            },
-            onMouseLeave: () => {
-              o("");
-            },
-            onSelected: i,
-            selectedId: t,
-            size: v ? 280 : 400,
-            totalLabel: r.pie_chart_centered_text
-          }
-        ),
-        /* @__PURE__ */ m(
-          g,
-          {
-            data: l,
-            onSelected: i,
-            selectedId: t,
-            selectedTabs: n,
-            setSelectedTabs: d
-          }
-        )
-      ]
-    }
-  );
-}, U = I(D);
-export {
-  U as default
-};

package/dist/investments/components/Allocation/util/createInvestementsAllocationData/index.es.js

@@ -1,134 +0,0 @@
-import { formatPercentage as L, formatCurrency as v } from "../../../../../common/utils/NumberFormatting/index.es.js";
-const y = {
-  allocations_cash: "#AEDCCC",
-  allocations_convertible: "#80CAD0",
-  allocations_foreign_bond: "#51B9D4",
-  allocations_foreign_stock: "#3DA0C9",
-  allocations_other: "#3583B8",
-  allocations_preferred: "#2D66A7",
-  allocations_unknown: "#161D6A",
-  allocations_us_bond: "#254995",
-  allocations_us_stock: "#1E2D84"
-}, C = [
-  {
-    name: "allocations_cash"
-  },
-  {
-    name: "allocations_convertible"
-  },
-  {
-    name: "allocations_foreign_bond"
-  },
-  {
-    name: "allocations_foreign_stock"
-  },
-  {
-    name: "allocations_other"
-  },
-  {
-    name: "allocations_preferred"
-  },
-  {
-    name: "allocations_us_bond"
-  },
-  {
-    name: "allocations_us_stock"
-  },
-  {
-    name: "allocations_unknown"
-  }
-], h = (t, l, r) => {
-  const c = l, e = r;
-  return t >= Math.min(c, e) && t < Math.max(c, e);
-}, V = (t, l, r) => {
-  const c = [
-    ...new Set(t.map((i) => i.name.toLowerCase()))
-  ];
-  let e;
-  return c.map((i) => {
-    const m = t.reduce((o, u) => {
-      const d = u.name;
-      return d.toLowerCase() === i ? (e = d, b(u) * u[l] / 100 + o) : o;
-    }, 0);
-    return {
-      displayName: e,
-      name: e,
-      value: m,
-      percentage: m / r
-    };
-  });
-}, b = (t) => t.calculated_market_value ? t.calculated_market_value : t.market_value, w = (t, l, r) => {
-  const c = Object.values(l.allocations_list), e = [];
-  let p = 0;
-  const i = t.map(({ guid: a }) => a), m = r.filter(({ account_guid: a }) => i.includes(a)).map((a) => ({
-    ...a,
-    name: a.symbol || a.description,
-    gainLoss: a.cost_basis || a.cost_basis === 0 ? b(a) - a.cost_basis : 0
-  })), { cashBalance: o, totalAccountBalance: u } = t.reduce(
-    (a, n) => ({
-      cashBalance: a.cashBalance + (n.cash_balance || 0),
-      totalAccountBalance: a.totalAccountBalance + (n.balance || 0)
-    }),
-    { cashBalance: 0, totalAccountBalance: 0 }
-  ), { marketValue: d, totalGainLoss: A } = m.reduce(
-    (a, n) => ({
-      marketValue: a.marketValue + b(n),
-      totalGainLoss: a.totalGainLoss + n.gainLoss
-    }),
-    { marketValue: 0, totalGainLoss: 0 }
-  ), g = d + o;
-  C.forEach((a, n) => {
-    const f = m.filter(
-      (_) => !!_[a.name]
-    );
-    let s = f.reduce(
-      (_, k) => _ + b(k) * k[a.name] / 100,
-      0
-    );
-    const D = V(
-      f,
-      a.name,
-      s
-    );
-    if (a.name === "allocations_cash" && o > 0) {
-      s += o;
-      const _ = {
-        displayName: l.cash_balance_display_name,
-        name: "allocations_name",
-        value: o,
-        percentage: o / g
-      };
-      D.push(_);
-    }
-    s > 0 && (e.push({
-      name: a.name,
-      displayName: c[n],
-      guid: `${a.name}-${n}`,
-      holdings: D,
-      percentage: s / g,
-      value: s,
-      color: y[a.name]
-    }), p += s);
-  });
-  const B = e.map(
-    ({ displayName: a, guid: n, color: f, value: s }) => ({
-      id: n,
-      color: f,
-      label: a,
-      value: s / p * 100
-    })
-  );
-  return {
-    investmentsData: e,
-    donutData: B,
-    totalAmount: p,
-    totalGainLoss: A,
-    totalMarketValue: g,
-    totalGainLossPercentage: A / u
-  };
-}, T = (t) => t < 1e-3 ? "< 0.1%" : L(t), E = (t) => t === 0 ? v(t, "0,0.00") : h(t, -0.01, 0.01) ? "< $0.01" : v(t, "0,0.00");
-export {
-  w as createInvestmentsAllocationData,
-  E as currencyDisplay,
-  T as percentageDisplay
-};

package/dist/investments/components/Analysis/index.es.js

@@ -1,169 +0,0 @@
-import { jsxs as a, jsx as e } from "react/jsx-runtime";
-import T from "react";
-import { observer as A } from "mobx-react-lite";
-import r from "@mui/material/Stack";
-import { useTheme as M } from "@mui/material/styles";
-import B from "@mui/material/useMediaQuery";
-import { P as L, Text as l } from "@mxenabled/mxui";
-import { AnalysisType as g } from "../../constants/index/index.es.js";
-import O from "../AnalysisDetails/index.es.js";
-import V from "../InfoToolTip/index.es.js";
-import { useGlobalCopyStore as q, useHoldingStore as H } from "../../../common/context/hooks/index.es.js";
-import { useScreenSize as z } from "../../../common/hooks/useScreenSize/index.es.js";
-const F = () => {
-  const {
-    investments: { analysis: t }
-  } = q(), { analysisChartData: v, analysisDetails: D, analysisType: n, setAnalysisType: S } = H(), R = B("(min-width:320px) and (max-width:375px)"), { isMobile: o } = z(), j = M().palette.mode === "dark", { cellDimension: p, columns: k, rows: C, textVariant: c } = T.useMemo(() => {
-    const i = n === g.Stocks, s = Object.values(i ? t.stock_column_labels : t.bond_column_labels), y = Object.values(i ? t.stock_row_labels : t.bond_row_labels);
-    return { cellDimension: o ? 72 : 100, columns: s, rows: y, textVariant: o ? "XSmall" : "Body" };
-  }, [t, o, n]);
-  return /* @__PURE__ */ a(
-    r,
-    {
-      sx: {
-        flexDirection: { md: "row" },
-        gap: o ? 48 : 64,
-        justifyContent: "center",
-        pt: 48,
-        px: 16
-      },
-      children: [
-        /* @__PURE__ */ a(
-          r,
-          {
-            sx: {
-              alignItems: "center",
-              flexDirection: "row",
-              justifyContent: "center",
-              pr: { lg: 72 }
-            },
-            children: [
-              /* @__PURE__ */ a(
-                r,
-                {
-                  sx: {
-                    alignItems: "center",
-                    bottom: o ? 10 : 24,
-                    gap: o ? 0 : 24,
-                    position: "relative",
-                    transform: "rotate(-180deg)",
-                    writingMode: "vertical-rl"
-                  },
-                  children: [
-                    /* @__PURE__ */ e(L, { bold: !0, color: "secondary.main", variant: c, children: n === g.Stocks ? t.market_capitalization : t.credit_quality }),
-                    /* @__PURE__ */ e(
-                      r,
-                      {
-                        sx: {
-                          flexDirection: "row",
-                          height: o ? 224 : 308,
-                          justifyContent: "space-around"
-                        },
-                        children: k.map((i) => /* @__PURE__ */ e(
-                          l,
-                          {
-                            sx: {
-                              color: "secondary.main",
-                              pl: 12,
-                              pr: o ? 4 : 0
-                            },
-                            variant: c,
-                            children: i
-                          },
-                          i
-                        ))
-                      }
-                    )
-                  ]
-                }
-              ),
-              /* @__PURE__ */ a(r, { sx: { gap: 4 }, children: [
-                /* @__PURE__ */ a(
-                  r,
-                  {
-                    sx: {
-                      alignSelf: R ? "start" : "center",
-                      flexDirection: "row",
-                      gap: 8,
-                      pb: 12
-                    },
-                    children: [
-                      /* @__PURE__ */ e(l, { bold: !0, children: t.invest_analysis }),
-                      /* @__PURE__ */ e(
-                        V,
-                        {
-                          tooltip_info_body: t.tooltip_info_body,
-                          tooltip_info_title: t.tooltip_info_title
-                        }
-                      )
-                    ]
-                  }
-                ),
-                v.map((i, s, y) => /* @__PURE__ */ e(r, { sx: { flexDirection: "row", gap: 4 }, children: i.map((u, m) => {
-                  const b = s === 0, x = s === y.length - 1, _ = m === 0, w = m === i.length - 1, d = Number(u.replace("%", "")) >= 25;
-                  let h = "grey.200", f = "grey.900";
-                  return j ? (h = d ? "grey.200" : "grey.700", f = d ? "grey.900" : "common.white") : (h = d ? "grey.700" : "grey.200", f = d ? "common.white" : "grey.900"), /* @__PURE__ */ e(
-                    r,
-                    {
-                      sx: {
-                        ...{
-                          borderBottomLeftRadius: x && _ ? 4 : 0,
-                          borderBottomRightRadius: x && w ? 4 : 0,
-                          borderTopLeftRadius: b && _ ? 4 : 0,
-                          borderTopRightRadius: b && w ? 4 : 0
-                        },
-                        alignItems: "center",
-                        bgcolor: h,
-                        height: p,
-                        justifyContent: "center",
-                        width: p
-                      },
-                      children: /* @__PURE__ */ e(
-                        l,
-                        {
-                          sx: {
-                            color: f,
-                            fontWeight: o ? 600 : 700
-                          },
-                          variant: o ? "Body" : "H3",
-                          children: u
-                        }
-                      )
-                    },
-                    m
-                  );
-                }) }, s)),
-                /* @__PURE__ */ e(r, { sx: { alignSelf: "center", flexDirection: "row", pt: 12 }, children: C.map((i) => /* @__PURE__ */ e(r, { sx: { alignItems: "center", width: p }, children: /* @__PURE__ */ e(l, { color: "secondary.main", variant: c, children: i }) }, i)) }),
-                /* @__PURE__ */ e(
-                  l,
-                  {
-                    bold: !0,
-                    sx: { color: "secondary.main", pt: o ? 4 : 24, textAlign: "center" },
-                    variant: c,
-                    children: n === g.Stocks ? t.valuation : t.duration
-                  }
-                )
-              ] })
-            ]
-          }
-        ),
-        /* @__PURE__ */ e(
-          O,
-          {
-            analysisDetails: D,
-            analysisType: n,
-            copy: {
-              empty_data: t.empty_data,
-              equities: t.equities,
-              bonds: t.bonds
-            },
-            setAnalysisType: S
-          }
-        )
-      ]
-    }
-  );
-}, tt = A(F);
-export {
-  tt as default
-};

package/dist/investments/components/AnalysisDetails/index.es.js

@@ -1,81 +0,0 @@
-import { jsxs as n, jsx as t, Fragment as f } from "react/jsx-runtime";
-import u from "react";
-import h from "@mui/material/Divider";
-import g from "@mui/material/List";
-import x from "@mui/material/ListItem";
-import y from "@mui/material/ListItemText";
-import b from "@mui/material/Stack";
-import S from "@mui/material/ToggleButton";
-import T from "@mui/material/ToggleButtonGroup";
-import { Text as l } from "@mxenabled/mxui";
-import { AnalysisType as s } from "../../constants/index/index.es.js";
-import { formatKey as v } from "../../util/InvestmentUtil/index.es.js";
-import { EmptyStateFooterComponent as I } from "../EmptyStateFooterComponent/index.es.js";
-import { useScreenSize as L } from "../../../common/hooks/useScreenSize/index.es.js";
-import { formatCurrency as M } from "../../../common/utils/NumberFormatting/index.es.js";
-const P = ({
-  analysisDetails: e,
-  analysisType: p,
-  copy: i,
-  setAnalysisType: d
-}) => {
-  const { isSmallMobile: a } = L(), m = u.useMemo(() => Object.keys(e).filter((r) => e[r] >= 1).map((r) => ({
-    key: r,
-    value: M(e[r], "0,0"),
-    formattedKey: v(r)
-  })), [e]), c = [
-    { label: i.equities, value: s.Stocks },
-    { label: i.bonds, value: s.Bonds }
-  ];
-  return /* @__PURE__ */ n(b, { sx: { gap: 12, width: { md: 412 } }, children: [
-    /* @__PURE__ */ t(
-      T,
-      {
-        color: "primary",
-        exclusive: !0,
-        onChange: (r, o) => o && d(o),
-        sx: {
-          width: "100%",
-          "& .MuiToggleButton-root": {
-            color: "secondary.main",
-            fontWeight: 600,
-            textTransform: "capitalize"
-          }
-        },
-        value: m.length ? p : -1,
-        children: c.map(({ label: r, value: o }) => /* @__PURE__ */ t(S, { sx: { width: "100%" }, value: o, children: r }, o))
-      }
-    ),
-    m.length ? /* @__PURE__ */ t(
-      g,
-      {
-        sx: {
-          "& .MuiListItemSecondaryAction-root": { pr: 12 },
-          "& .MuiListItem-divider": { borderColor: "border.light" },
-          "& .MuiListItem-root": { minHeight: 44, px: 12 }
-        },
-        children: m.map(({ value: r, formattedKey: o }) => /* @__PURE__ */ t(x, { divider: !0, secondaryAction: /* @__PURE__ */ t(l, { children: r }), children: /* @__PURE__ */ t(
-          y,
-          {
-            primary: o,
-            primaryTypographyProps: { fontStyle: "normal" }
-          }
-        ) }, o))
-      }
-    ) : /* @__PURE__ */ n(f, { children: [
-      /* @__PURE__ */ t(l, { sx: { color: "secondary.main", p: 8, textAlign: "center" }, children: i.empty_data }),
-      /* @__PURE__ */ t(h, { sx: { borderColor: "border.light" } }),
-      /* @__PURE__ */ t(
-        I,
-        {
-          sx: {
-            ".inner-container": { width: a ? "100%" : 364 }
-          }
-        }
-      )
-    ] })
-  ] });
-};
-export {
-  P as default
-};