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

package/dist/common/components/accountfilter/AccountFilter/index.es.js

@@ -1,93 +0,0 @@
-import { jsxs as g, jsx as e } from "react/jsx-runtime";
-import a from "react";
-import A from "@mui/material/Button";
-import { Icon as f } from "@mxenabled/mxui";
-import E from "@mui/material/Tooltip";
-import _ from "@mui/material/Box";
-import j from "@mui/material/IconButton";
-import { AccountFilterOptions as z } from "../AccountFilterOptions/index.es.js";
-import { setupMappedSelectedOptions as s } from "../../../utils/AccountFilter/index.es.js";
-import { useScreenSize as I } from "../../../hooks/useScreenSize/index.es.js";
-const w = ({
-  accounts: i,
-  copy: r,
-  onFilterClick: d,
-  onConnectAccountClick: C = () => {
-  },
-  selectedAccountGuids: l,
-  showAccountNumbers: h,
-  sx: x = {},
-  variant: k = "outlined"
-}) => {
-  const { isDesktop: F } = I(), [O, p] = a.useState(null), [o, n] = a.useState(
-    s(i, l)
-  );
-  a.useEffect(() => {
-    n(s(i, l));
-  }, [i, l]);
-  const m = (t) => {
-    p(t.currentTarget);
-  }, c = () => {
-    p(null);
-  };
-  return /* @__PURE__ */ g(_, { className: "mx-cmn-account-filter", m: 4, sx: { ...x }, children: [
-    F ? /* @__PURE__ */ e(
-      A,
-      {
-        "aria-controls": "filter_accounts",
-        "aria-haspopup": !0,
-        "aria-label": r.title,
-        onClick: m,
-        startIcon: /* @__PURE__ */ e(f, { name: "filter_alt", size: 24 }),
-        sx: { p: 8, whiteSpace: "nowrap", minWidth: "max-content" },
-        variant: k,
-        children: r.accountFilterOptionsCopy.filterButton
-      }
-    ) : /* @__PURE__ */ e(E, { id: "filter-accounts", placement: "bottom", title: r.title, children: /* @__PURE__ */ e(
-      j,
-      {
-        "aria-controls": "filter_accounts",
-        "aria-describedby": "filter-accounts",
-        "aria-haspopup": !0,
-        "aria-label": r.title,
-        color: "primary",
-        onClick: m,
-        sx: { p: 8 },
-        children: /* @__PURE__ */ e(f, { name: "filter_alt", size: 24 })
-      }
-    ) }),
-    /* @__PURE__ */ e(
-      z,
-      {
-        accountFilterButtonEl: O,
-        accounts: i,
-        copy: r.accountFilterOptionsCopy,
-        handleClose: c,
-        onAccountClick: (t) => {
-          n({ ...o, [t.guid]: !o[t.guid] });
-        },
-        onAccountGroupClick: (t, S, b) => {
-          const u = { ...o };
-          S[t].forEach((B) => {
-            u[B.guid] = !b;
-          }), n(u);
-        },
-        onCancelClick: () => {
-          n(s(i, l)), c();
-        },
-        onConnectAccountClick: () => {
-          c(), C();
-        },
-        onFilterClick: () => {
-          d(Object.keys(o).filter((t) => o[t])), c();
-        },
-        selectedOptions: o,
-        setSelectedOptions: n,
-        showAccountNumbers: h
-      }
-    )
-  ] });
-}, H = w;
-export {
-  H as default
-};

package/dist/common/components/accountfilter/AccountFilterOptions/index.es.js

@@ -1,222 +0,0 @@
-import { jsx as e, jsxs as s } from "react/jsx-runtime";
-import { useMemo as P } from "react";
-import d from "@mui/material/Button";
-import g from "@mui/material/FormControlLabel";
-import x from "@mui/material/List";
-import m from "@mui/material/ListItem";
-import I from "@mui/material/ListItemButton";
-import $ from "@mui/material/ListSubheader";
-import y from "@mui/material/ListItemText";
-import F from "@mui/material/Popover";
-import A from "@mui/material/Stack";
-import C from "@mui/material/Checkbox";
-import { AccountsIcon as W, P as S } from "@mxenabled/mxui";
-import { setupMappedAccounts as D } from "../../../utils/AccountFilter/index.es.js";
-import { useGlobalCopyStore as H } from "../../../context/hooks/index.es.js";
-import { buildDynamicCopy as k } from "../../../utils/Localization/index.es.js";
-const R = ({
-  accounts: a,
-  accountFilterButtonEl: u,
-  copy: o,
-  onAccountClick: v,
-  onAccountGroupClick: w,
-  onCancelClick: z,
-  onConnectAccountClick: L,
-  onFilterClick: B,
-  selectedOptions: r,
-  setSelectedOptions: j,
-  handleClose: h,
-  showAccountNumbers: G
-}) => {
-  const { connect: O } = H(), c = P(
-    () => D(a, O.connection_statuses[12]),
-    [a]
-  ), p = a.length < 1, M = !!u, n = Object.values(r).every((t) => !!t);
-  return /* @__PURE__ */ e(
-    F,
-    {
-      anchorEl: u,
-      anchorOrigin: {
-        vertical: "bottom",
-        horizontal: "left"
-      },
-      onClose: h,
-      open: M,
-      sx: { maxHeight: 400, maxWidth: p ? "100%" : 300 },
-      transformOrigin: {
-        vertical: "top",
-        horizontal: "left"
-      },
-      children: p ? /* @__PURE__ */ s(
-        A,
-        {
-          sx: {
-            alignItems: "center",
-            flexDirection: "column",
-            padding: 16,
-            textAlign: "center",
-            width: 320,
-            maxWidth: "100%"
-          },
-          children: [
-            /* @__PURE__ */ e(W, { size: 32 }),
-            /* @__PURE__ */ e(S, { bold: !0, mt: 12, children: o.zeroStateTitle }),
-            /* @__PURE__ */ e(S, { mt: 12, children: o.zeroStateDescription }),
-            /* @__PURE__ */ e(d, { onClick: L, children: o.zeroStateButton })
-          ]
-        }
-      ) : /* @__PURE__ */ s("form", { onSubmit: h, children: [
-        /* @__PURE__ */ s(
-          x,
-          {
-            className: "mx-cmn-account-options",
-            dense: !0,
-            id: "filter_accounts",
-            sx: {
-              overflow: "auto",
-              maxHeight: 300,
-              minWidth: 268,
-              "& .MuiFormControlLabel-root": {
-                m: 4,
-                borderRadius: 1,
-                width: "100%",
-                "&:hover": {
-                  bgcolor: "background.default"
-                },
-                "&:focus-within": {
-                  outline: "2px solid rgba(82, 138, 224, 0.8)",
-                  outlineOffset: "2px"
-                },
-                "& .MuiFormControlLabel-label": {
-                  fontSize: 13
-                }
-              }
-            },
-            children: [
-              /* @__PURE__ */ e(m, { disableGutters: !0, disablePadding: !0, children: /* @__PURE__ */ e(
-                g,
-                {
-                  control: /* @__PURE__ */ e(
-                    C,
-                    {
-                      checked: n,
-                      "data-ui-test": `checked-${n}`,
-                      disableRipple: !0,
-                      onChange: () => {
-                        const t = {};
-                        Object.keys(r).forEach((l) => {
-                          t[l] = !n;
-                        }), j(t);
-                      },
-                      size: "small",
-                      sx: {
-                        "&.Mui-focusVisible": {
-                          outline: "none",
-                          boxShadow: "none"
-                        }
-                      }
-                    }
-                  ),
-                  label: n ? o.unselectAllAccounts : o.selectAllAccounts
-                }
-              ) }),
-              Object.keys(c).map((t) => {
-                const l = c[t], b = l.every(
-                  (i) => r[i.guid]
-                );
-                return /* @__PURE__ */ e(m, { disableGutters: !0, disablePadding: !0, children: /* @__PURE__ */ e(
-                  x,
-                  {
-                    "aria-label": k(o.accountTypeAccounts, t),
-                    className: "mx-cmn-account-options-group",
-                    dense: !0,
-                    subheader: /* @__PURE__ */ e($, { disableGutters: !0, children: /* @__PURE__ */ e(
-                      I,
-                      {
-                        "aria-label": k(o.toggleAccountTypeAccounts, t),
-                        "aria-pressed": b,
-                        disableGutters: !0,
-                        onClick: () => w(
-                          t,
-                          c,
-                          b
-                        ),
-                        sx: {
-                          paddingLeft: 12,
-                          minHeight: 40,
-                          justifyContent: "left"
-                        },
-                        children: /* @__PURE__ */ e(
-                          y,
-                          {
-                            primary: t,
-                            primaryTypographyProps: { variant: "XSmall", fontWeight: "bold" }
-                          }
-                        )
-                      }
-                    ) }),
-                    sx: { overflow: "auto", width: "100%" },
-                    children: l.map((i) => {
-                      const f = r[i.guid], N = `${i.name}${G && i.accountNumber ? ` *${i.accountNumber.slice(-4)}` : ""}`;
-                      return /* @__PURE__ */ e(
-                        m,
-                        {
-                          className: "mx-cmn-account-options-container",
-                          disableGutters: !0,
-                          disablePadding: !0,
-                          children: /* @__PURE__ */ e(
-                            g,
-                            {
-                              control: /* @__PURE__ */ e(
-                                C,
-                                {
-                                  checked: f,
-                                  "data-ui-test": `checked-${f}`,
-                                  disableRipple: !0,
-                                  id: i.guid,
-                                  onChange: () => {
-                                    v(i);
-                                  },
-                                  size: "small",
-                                  sx: {
-                                    "&.Mui-focusVisible": {
-                                      outline: "none",
-                                      boxShadow: "none"
-                                    }
-                                  }
-                                }
-                              ),
-                              label: N
-                            }
-                          )
-                        },
-                        i.guid
-                      );
-                    })
-                  }
-                ) }, t);
-              })
-            ]
-          }
-        ),
-        /* @__PURE__ */ s(A, { direction: "row", justifyContent: "flex-end", padding: 12, spacing: 16, width: "100%", children: [
-          /* @__PURE__ */ e(d, { onClick: z, variant: "outlined", children: o.cancelButton }),
-          /* @__PURE__ */ e(
-            d,
-            {
-              "aria-label": o.filterButtonAria,
-              color: "primary",
-              onClick: B,
-              variant: "contained",
-              children: o.filterButton
-            }
-          )
-        ] })
-      ] })
-    }
-  );
-};
-R.displayName = "AccountFilterOptions";
-export {
-  R as AccountFilterOptions
-};

package/dist/common/components/addaccounts/AddAccounts/index.es.js

@@ -1,43 +0,0 @@
-import { jsx as o } from "react/jsx-runtime";
-import { observer as i } from "mobx-react-lite";
-import n from "@mui/material/Box";
-import d from "@mui/material/Button";
-import e from "@mui/material/IconButton";
-import m from "@mui/material/Tooltip";
-import s from "@mui/material/useMediaQuery";
-import { Icon as r } from "@mxenabled/mxui";
-import { useGlobalCopyStore as p } from "../../../context/hooks/index.es.js";
-const u = ({ handleConnectClick: t }) => {
-  const { common: a } = p(), c = s("(max-width: 700px)");
-  return /* @__PURE__ */ o(n, { my: 4, children: c ? /* @__PURE__ */ o(m, { id: "add-accounts", placement: "bottom", title: a.add_accounts, children: /* @__PURE__ */ o(
-    e,
-    {
-      "aria-controls": "add_accounts",
-      "aria-describedby": "add-accounts",
-      "aria-haspopup": !0,
-      "aria-label": a.add_accounts,
-      color: "primary",
-      onClick: t,
-      children: /* @__PURE__ */ o(r, { name: "add", size: 24 })
-    }
-  ) }) : /* @__PURE__ */ o(
-    d,
-    {
-      "aria-controls": "add_accounts",
-      "aria-haspopup": !0,
-      "aria-label": a.add_accounts,
-      onClick: t,
-      startIcon: /* @__PURE__ */ o(r, { name: "add", size: 24 }),
-      sx: {
-        p: 12,
-        whiteSpace: "nowrap",
-        minWidth: "max-content"
-      },
-      variant: "text",
-      children: a.add_accounts
-    }
-  ) });
-}, B = i(u);
-export {
-  B as default
-};

package/dist/common/components/barchart/Bar/index.es.js

@@ -1,79 +0,0 @@
-import { jsxs as f, jsx as t } from "react/jsx-runtime";
-import { keyframes as y, css as b } from "@mxenabled/cssinjs";
-import { useTokens as g, Text as $ } from "@mxenabled/mxui";
-const w = ({
-  ariaLabel: a,
-  color: m,
-  height: i,
-  index: n,
-  label: e,
-  onClick: r,
-  selectedIndex: s,
-  value: o
-}) => {
-  const l = g(), x = h(l, m, i), u = (d) => {
-    r && (d.key === " " || d.key === "Enter") && r(n);
-  }, p = s === void 0 || s === n ? "primary" : "secondary", c = () => /* @__PURE__ */ t(
-    $,
-    {
-      "aria-hidden": !0,
-      bold: s === n,
-      className: "mx-cmn-bar-text",
-      color: p,
-      component: "div",
-      variant: "Small",
-      children: e
-    }
-  );
-  return /* @__PURE__ */ f("div", { className: `mx-cmn-bar-container ${x} ${o < 0 ? "mx-cmn-negative" : ""}`, children: [
-    o >= 0 && /* @__PURE__ */ t(c, {}),
-    /* @__PURE__ */ t(
-      "div",
-      {
-        "aria-label": a,
-        className: `mx-cmn-bar ${r ? "mx-cmn-clickable" : ""} ${o < 0 ? "mx-cmn-bar-negative" : ""}`,
-        onClick: r ? () => r?.(n) : void 0,
-        onKeyDown: u,
-        role: a ? "button" : void 0,
-        tabIndex: a ? 0 : void 0
-      }
-    ),
-    o < 0 && /* @__PURE__ */ t(c, {})
-  ] });
-}, h = (a, m, i) => {
-  const n = `expandBar-${Math.round(i)}`, e = y(n, { from: { height: 0 }, to: { height: i } });
-  return b({
-    display: "flex",
-    flexDirection: "column",
-    justifyContent: "flex-end",
-    height: "100%",
-    "&.mx-cmn-negative": {
-      justifyContent: "flex-start"
-    },
-    "& .mx-cmn-bar": {
-      animationDelay: ".5s",
-      animationDuration: "1s",
-      animationFillMode: "forwards",
-      animationName: e,
-      animationTimingFunction: a.Easing.Default,
-      backgroundColor: m,
-      borderRadius: `${a.BorderRadius.Medium}px ${a.BorderRadius.Medium}px 0 0`,
-      maxHeight: i
-    },
-    "& .mx-cmn-bar-negative": {
-      borderRadius: `0 0 ${a.BorderRadius.Medium}px ${a.BorderRadius.Medium}px`,
-      marginTop: -a.Spacing.XTiny
-    },
-    "& .mx-cmn-bar-text": {
-      display: "flex",
-      justifyContent: "center",
-      marginBottom: a.Spacing.Tiny,
-      marginTop: a.Spacing.Tiny,
-      whiteSpace: "nowrap",
-      width: "100%"
-    }
-  });
-};
-export {
-  w as default
-};

package/dist/common/components/barchart/BarChart/index.es.js

@@ -1,70 +0,0 @@
-import { jsxs as l, jsx as o } from "react/jsx-runtime";
-import A from "react";
-import { css as T } from "@mxenabled/cssinjs";
-import { useTokens as k } from "@mxenabled/mxui";
-import w from "../Legend/index.es.js";
-import L from "../BarColumn/index.es.js";
-import { valueReducer as N, sumReducer as E, rangeReducer as F, getSectionHeight as C, getAverageLineHeight as q } from "../Util/index.es.js";
-const z = ({
-  average: t,
-  barWidth: y = "8%",
-  color: r,
-  data: u,
-  height: g,
-  legendLabelAverage: B,
-  legendLabelMain: H,
-  onBarClick: $,
-  selectedIndex: n,
-  valueFormatter: M = (c) => `${c}`
-}) => {
-  const c = k(), R = D(c), a = u.reduce(N, []), S = t !== void 0 ? t : a.reduce(E, 0) / a.length, h = Math.max(...a), p = Math.min(...a), v = a.reduce(F, 0), f = h >= 0, d = p < 0, i = C(f, d, g), m = C(d, f, g), b = q(S, h, p, i || m), j = (e) => n === void 0 || e === n ? r : `${r}80`, x = () => /* @__PURE__ */ o(
-    L,
-    {
-      averageLineHeight: b,
-      bottomHeight: m,
-      color: "",
-      range: v,
-      topHeight: i,
-      value: 0,
-      width: void 0
-    }
-  );
-  return /* @__PURE__ */ l("div", { className: `mx-cmn-bar-chart ${R}`, children: [
-    /* @__PURE__ */ l("div", { className: "mx-cmn-chart-container", children: [
-      /* @__PURE__ */ o(x, {}),
-      u.map((e, s) => /* @__PURE__ */ l(A.Fragment, { children: [
-        /* @__PURE__ */ o(
-          L,
-          {
-            ariaLabel: e.ariaLabel,
-            averageLineHeight: b,
-            bottomHeight: m,
-            color: j(s),
-            index: s,
-            onClick: $,
-            range: v,
-            selectedIndex: n,
-            topHeight: i,
-            value: e.value,
-            valueLabel: M(e.value),
-            width: y,
-            xAxisLabel: e.label
-          }
-        ),
-        /* @__PURE__ */ o(x, {})
-      ] }, `column-${s}`))
-    ] }),
-    /* @__PURE__ */ o(w, { color: r, labelAverage: B, labelMain: H })
-  ] });
-}, D = (t) => T({
-  "& .mx-cmn-chart-container": {
-    alignItems: "flex-end",
-    display: "flex",
-    justifyContent: "space-evenly",
-    marginTop: t.Spacing.Large,
-    marginBottom: t.Spacing.Medium
-  }
-}), V = z;
-export {
-  V as default
-};

package/dist/common/components/barchart/BarColumn/index.es.js

@@ -1,86 +0,0 @@
-import { jsxs as v, jsx as m } from "react/jsx-runtime";
-import { css as B } from "@mxenabled/cssinjs";
-import { useTokens as T, Text as N } from "@mxenabled/mxui";
-import p from "../Bar/index.es.js";
-const w = ({
-  ariaLabel: r,
-  averageLineHeight: t,
-  bottomHeight: l,
-  color: n,
-  index: a = -1,
-  onClick: o,
-  range: s,
-  selectedIndex: c,
-  topHeight: e,
-  value: i,
-  valueLabel: h = "",
-  width: g,
-  xAxisLabel: d = ""
-}) => {
-  const x = T(), b = u(x, g), y = i / s * e, S = Math.abs(i) / s * l, f = c === void 0 || c === a ? "primary" : "secondary";
-  return /* @__PURE__ */ v("div", { className: `mx-cmn-barchart-bar-column ${b}`, children: [
-    /* @__PURE__ */ m("div", { style: { height: e }, children: i >= 0 && /* @__PURE__ */ m(
-      p,
-      {
-        ariaLabel: r,
-        color: n,
-        height: y,
-        index: a,
-        label: h,
-        onClick: o,
-        selectedIndex: c,
-        value: i
-      }
-    ) }),
-    /* @__PURE__ */ m("div", { className: "mx-cmn-zero-line" }),
-    t !== 0 && /* @__PURE__ */ m("div", { className: "mx-cmn-chart-average", style: { bottom: t } }),
-    /* @__PURE__ */ m("div", { style: { height: l }, children: i < 0 && /* @__PURE__ */ m(
-      p,
-      {
-        ariaLabel: r,
-        color: n,
-        height: S,
-        index: a,
-        label: h,
-        onClick: o,
-        value: i
-      }
-    ) }),
-    /* @__PURE__ */ m(
-      "div",
-      {
-        className: `mx-cmn-bar-label ${o ? "mx-cmn-clickable" : ""}`,
-        onClick: o ? () => o(a) : void 0,
-        children: /* @__PURE__ */ m(N, { bold: c === a, color: f, variant: "Small", children: d })
-      }
-    )
-  ] });
-}, u = (r, t) => B({
-  display: "flex",
-  flexDirection: "column",
-  flexGrow: t === void 0 ? 1 : 0,
-  width: t,
-  "& .mx-cmn-chart-average": {
-    borderTop: `${r.Spacing.XTiny}px dotted ${r.Color.Neutral500}`,
-    position: "relative",
-    marginRight: r.Spacing.XTiny
-  },
-  "& .mx-cmn-zero-line": {
-    borderBottom: "1px solid text.primary",
-    width: "100%"
-  },
-  "& .mx-cmn-bar-label": {
-    minHeight: r.Spacing.Medium,
-    maxHeight: r.Spacing.Medium,
-    marginBottom: r.Spacing.XSmall,
-    marginTop: r.Spacing.XSmall,
-    textAlign: "center",
-    width: "100%"
-  },
-  "& .mx-cmn-clickable": {
-    cursor: "pointer"
-  }
-});
-export {
-  w as default
-};

package/dist/common/components/barchart/Legend/index.es.js

@@ -1,45 +0,0 @@
-import { jsxs as i, jsx as m } from "react/jsx-runtime";
-import { css as n } from "@mxenabled/cssinjs";
-import { useTokens as o, Text as r } from "@mxenabled/mxui";
-const p = ({ color: a, labelAverage: l, labelMain: e }) => {
-  const t = o(), c = d(t, a);
-  return /* @__PURE__ */ i("div", { className: `mx-cmn-bar-chart-legend ${c}`, children: [
-    /* @__PURE__ */ m("div", { "aria-label": e, className: "mx-cmn-color-square", role: "img" }),
-    /* @__PURE__ */ m(r, { variant: "XSmall", children: e }),
-    /* @__PURE__ */ i("div", { "aria-label": l, className: "mx-cmn-triple-dot", role: "img", children: [
-      /* @__PURE__ */ m("div", { className: "mx-cmn-dot" }),
-      /* @__PURE__ */ m("div", { className: "mx-cmn-dot" }),
-      /* @__PURE__ */ m("div", { className: "mx-cmn-dot" })
-    ] }),
-    /* @__PURE__ */ m(r, { variant: "XSmall", children: l })
-  ] });
-}, d = (a, l) => n({
-  alignItems: "center",
-  display: "flex",
-  gap: a.Spacing.XSmall,
-  justifyContent: "flex-end",
-  marginRight: a.Spacing.XLarge,
-  paddingBottom: a.Spacing.XSmall,
-  width: "100%",
-  "& .mx-cmn-color-square": {
-    backgroundColor: l,
-    height: 6,
-    width: 6
-  },
-  "& .mx-cmn-triple-dot": {
-    display: "flex",
-    gap: 1
-  },
-  "& .mx-cmn-dot": {
-    backgroundColor: a.Color.Neutral500,
-    height: 3,
-    width: 3,
-    borderRadius: 1.5
-  },
-  "& > .kyper-text": {
-    marginRight: a.Spacing.XSmall
-  }
-});
-export {
-  p as default
-};

package/dist/common/components/barchart/Util/index.es.js

@@ -1,11 +0,0 @@
-const s = (e, t) => e + t, c = (e, t) => Math.abs(t) > e ? Math.abs(t) : e, o = (e, t) => [...e, t.value], g = (e, t, n) => {
-  const r = e && t ? n / 2 : n;
-  return e ? r : 0;
-}, u = (e, t, n, r) => e / (t < 0 ? -n : t) * r || 0;
-export {
-  u as getAverageLineHeight,
-  g as getSectionHeight,
-  c as rangeReducer,
-  s as sumReducer,
-  o as valueReducer
-};