@mx-cartographer/experiences 8.1.12 → 8.2.0

package/dist/EmbeddedCard-BNl3quCs.mjs

@@ -0,0 +1,856 @@
+import { jsxs as s, jsx as e } from "react/jsx-runtime";
+import I, { useMemo as X, useState as P, useEffect as q } from "react";
+import L from "@mui/material/Box";
+import Y from "@mui/material/Button";
+import l from "@mui/material/Stack";
+import { MerchantLogo as J, Text as m, Icon as k, P as $, H3 as tt, H2 as et } from "@mxenabled/mxui";
+import { Receipt as nt, Icon as rt } from "@mxenabled/mx-icons";
+import { T as it, e as ot } from "./TransactionUtils-BphBJBbU.mjs";
+import { observer as V } from "mobx-react-lite";
+import { useVirtualizer as at } from "@tanstack/react-virtual";
+import st from "@mui/material/Divider";
+import ct from "@mui/material/List";
+import { G as lt, h as G, u as z, g as dt, b as Tt } from "./hooks-BaO_gOI6.mjs";
+import ht from "@mui/material/ListItemAvatar";
+import Ct from "@mui/material/ListItemText";
+import { useTheme as M } from "@mui/material/styles";
+import { f as H } from "./NumberFormatting--XMeeBfr.mjs";
+import { L as _t } from "./ListItemWrapper-B5r-YQQ_.mjs";
+import { fromUnixTime as v } from "date-fns/fromUnixTime";
+import { isSameDay as F } from "date-fns/isSameDay";
+import { f as pt, D as ut } from "./DateFormats-HudZ3Bjs.mjs";
+import { i as mt } from "./DateUtil-Bhq59ZVg.mjs";
+import { L as Z } from "./Loader-CxeBwuPG.mjs";
+import { A as gt } from "./Analytics-CzGzz_sE.mjs";
+import At from "@mui/material/Tab";
+import Nt from "@mui/material/Tabs";
+import ft from "@mui/material/IconButton";
+import { D as It } from "./Drawer-XPaLYjiO.mjs";
+import { ChartContainer as xt, ChartsReferenceLine as U, ChartsXAxis as St, BarPlot as Ot } from "@mui/x-charts";
+import Dt from "@mui/material/Card";
+const K = () => {
+  if (!I.useContext(lt))
+    throw new Error("useTransactionsUiStore() must be used within the GlobalDataContext");
+  return G().uiStore;
+}, bt = {
+  ON_TRANSACTION_CATEGORY_CLICK: "onTransactionCategoryClick",
+  ON_TRANSACTION_CATEGORY_CHANGED: "onTransactionCategoryChanged",
+  ON_TRANSACTION_MANUAL_ADD_CLICK: "onTransactionManualAddClick",
+  ON_TRANSACTION_MANUAL_ADD_ADDED: "onTransactionManualAddAdded",
+  ON_TRANSACTION_DATE_CHANGED: "onTransactionDateChanged",
+  ON_TRANSACTION_DATE_CLICK: "onTransactionDateClick",
+  ON_TRANSACTION_DELETE_CANCEL: "onTransactionDeleteCancel",
+  ON_TRANSACTION_DELETE_CLICK: "onTransactionDeleteClick",
+  ON_TRANSACTION_DELETE_DELETED: "onTransactionDeleted",
+  ON_TRANSACTION_DELETE_LOGO_CANCEL: "onTransactionDeleteLogoCancel",
+  ON_TRANSACTION_DELETE_LOGO_CLICK: "onTransactionDeleteLogoClick",
+  ON_TRANSACTION_DELETE_LOGO_DELETED: "onTransactionDeletedLogo",
+  ON_TRANSACTION_DESCRIPTION_EDIT_CLICK: "onTransactionDescriptionEditClick",
+  ON_TRANSACTION_DESCRIPTION_SAVE_CLICK: "onTransactionDescriptionSaveClick",
+  ON_TRANSACTION_EXPORT_CSV_CLICK: "onTransactionExportCsvClick",
+  ON_TRANSACTION_HIDDEN: "onTransactionHidden",
+  ON_TRANSACTION_HIDE_CLICK: "onTransactionHideClick",
+  ON_TRANSACTION_HIDE_CANCEL_CLICK: "onTransactionHideCancelClick",
+  ON_TRANSACTION_LIST_ITEM_CLICK: "onTransactionListItemClick",
+  ON_TRANSACTION_MEMO_CHANGED: "onTransactionMemoChanged",
+  ON_TRANSACTION_MEMO_CLICK: "onTransactionMemoClick",
+  ON_TRANSACTION_SPLIT_ADD_CLICK: "onTransactionSplitAddClick",
+  ON_TRANSACTION_SPLIT_CANCEL_CLICK: "onTransactionSplitCancelClick",
+  ON_TRANSACTION_SPLIT_CATEGORY_CLICK: "onTransactionSplitCategoryClick",
+  ON_TRANSACTION_SPLIT_CLICK: "onTransactionSplitClick",
+  ON_TRANSACTION_SPLIT_DELETE_CLICK: "onTransactionSplitDeleteClick",
+  ON_TRANSACTION_SPLIT_SAVE_CLICK: "onTransactionSplitSaveClick",
+  ON_TRANSACTION_TAGS_CHANGED: "onTransactionTagsChanged",
+  ON_TRANSACTION_TAGS_CLICK: "onTransactionTagsClick",
+  ON_TRANSACTION_TAGS_TAG_ADD_CANCEL_CLICK: "onTransactionTagsTagAddCancelClick",
+  ON_TRANSACTION_TAGS_TAG_ADD_CLICK: "onTransactionTagsTagAddClick",
+  ON_TRANSACTION_TAGS_TAG_ADDED: "onTransactionTagsTagAdded",
+  ON_TRANSACTION_TAGS_TAG_DELETE_CLICK: "onTransactionTagsTagDeleteClick",
+  ON_TRANSACTION_TAGS_TAG_DELETE_CANCEL_CLICK: "onTransactionTagsTagDeleteCancelClick",
+  ON_TRANSACTION_TAGS_TAG_DELETED: "onTransactionTagsTagDeleted",
+  ON_TRANSACTION_TAGS_TAG_EDIT_CLICK: "onTransactionTagsTagEditClick",
+  ON_TRANSACTION_TAGS_TAG_EDIT_SAVED: "onTransactionTagsTagEditSavedClick",
+  ON_TRANSACTION_TOGGLE_FLAG_CLICK: "onTransactionToggleFlagClick",
+  ON_TRANSACTION_UNHIDDEN: "onTransactionUnHidden",
+  ON_TRANSACTION_UNHIDE_CLICK: "onTransactionUnHideClick",
+  ON_TRANSACTION_UNHIDE_CANCEL_CLICK: "onTransactionUnHideCancelClick",
+  ON_TRANSACTION_UNSPLIT: "onTransactionUnsplit",
+  ON_TRANSACTION_UNSPLIT_CANCEL: "onTransactionUnsplitCancel"
+};
+function Et() {
+  return window.opener && window.opener.location ? window.opener.location.toString() : document.referrer;
+}
+function Q(t) {
+  const r = Et().replace(/([^:]+:\/\/[^\/]+).*/, "$1"), n = window.parent || window.opener || !1;
+  return n && n.postMessage && r ? (n.postMessage(t, r), !0) : !1;
+}
+function Lt(t) {
+  return Q({
+    metadata: { beat_guid: t },
+    mx: !0,
+    type: "mx/moneyDashboard/insightOnTransaction"
+  });
+}
+function fe(t) {
+  return Q({
+    metadata: { template: t },
+    mx: !0,
+    type: "mx/pulse/client_configured_cta"
+  });
+}
+const yt = ({ transaction: t, onClick: r }) => {
+  const i = M().palette.mode === "dark", { associatedBeats: o } = G(), { expandedSplits: c } = K(), { transactions: T } = z(), { showInsights: g } = K(), C = t.transaction_type === it.CREDIT, d = I.useMemo(() => o.find((a) => a.associated_transaction_guid === t.guid), [o, t]), u = (a, p) => {
+    const A = [];
+    return a.is_flagged && A.push(
+      /* @__PURE__ */ e(
+        k,
+        {
+          fill: !0,
+          name: "flag",
+          size: 16,
+          sx: { color: p ? "primary.main" : "warning.dark" }
+        },
+        "flag"
+      )
+    ), a.is_hidden && A.push(/* @__PURE__ */ e(k, { name: "visibility_off", size: 16 }, "hidden")), a.has_been_split && A.push(/* @__PURE__ */ e(k, { name: "call_split", size: 16 }, "split")), A;
+  }, _ = (a, p) => a.is_hidden ? p.is_excluded : a.has_been_split ? p.split_transaction_category_label : a.category || "";
+  return (
+    //TODO: implement common/components/ListItemRow.tsx
+    /* @__PURE__ */ s(
+      _t,
+      {
+        clickEventName: bt.ON_TRANSACTION_LIST_ITEM_CLICK,
+        onClick: r ? () => r(t.guid) : void 0,
+        sx: t.is_hidden ? { backgroundColor: "grey.50", color: "text.secondary" } : void 0,
+        children: [
+          /* @__PURE__ */ e(ht, { children: t.parent_guid && c.includes(t.parent_guid) ? /* @__PURE__ */ e(I.Fragment, {}) : /* @__PURE__ */ e(
+            J,
+            {
+              categoryGuid: t.top_level_category_guid || "",
+              merchantGuid: t.merchant_guid || ""
+            }
+          ) }),
+          /* @__PURE__ */ e(
+            Ct,
+            {
+              disableTypography: !0,
+              secondary: /* @__PURE__ */ s(l, { direction: "row", justifyContent: "space-between", children: [
+                /* @__PURE__ */ s(l, { alignItems: "center", direction: "row", gap: 4, children: [
+                  u(t, i),
+                  /* @__PURE__ */ e(m, { variant: "caption", children: _(t, T) })
+                ] }),
+                d && g && /* @__PURE__ */ e(
+                  m,
+                  {
+                    bold: !0,
+                    color: "action.active",
+                    onClick: (a) => {
+                      a.stopPropagation(), a.preventDefault(), Lt(d.guid);
+                    },
+                    variant: "caption",
+                    children: d.short_title
+                  }
+                )
+              ] }),
+              children: /* @__PURE__ */ s(l, { direction: "row", justifyContent: "space-between", sx: { gap: 8 }, children: [
+                /* @__PURE__ */ e(m, { bold: !0, variant: "body1", children: t.payee || t.description || t.feed_description }),
+                /* @__PURE__ */ s(
+                  m,
+                  {
+                    bold: !0,
+                    color: C ? "success.main" : "text.primary",
+                    sx: { flexShrink: 0 },
+                    variant: "body1",
+                    children: [
+                      C ? "+" : "",
+                      H(t.amount, "0,0.00")
+                    ]
+                  }
+                )
+              ] })
+            }
+          )
+        ]
+      }
+    )
+  );
+}, wt = V(yt), Rt = ({
+  bgcolor: t = "background.default",
+  children: r
+}) => /* @__PURE__ */ e(L, { display: "inline-block", sx: { bgcolor: t, py: 6, width: "100%" }, children: /* @__PURE__ */ e(m, { bold: !0, sx: { pl: 24 }, variant: "caption", children: r }) }), kt = ({ showIcon: t = !0, showSubtitle: r = !0 }) => {
+  const { transactions: n } = z();
+  return /* @__PURE__ */ s(l, { alignItems: "center", gap: 12, height: "auto", mb: 24, mt: 24, children: [
+    t && /* @__PURE__ */ e(nt, { color: "action", sx: { fontSize: 32 } }),
+    /* @__PURE__ */ e(m, { bold: !0, color: "text.secondary", variant: "body2", children: n.zero_state_no_transactions }),
+    r && /* @__PURE__ */ e(m, { color: "text.secondary", variant: "caption", children: n.zero_state_there_are_no_transactions })
+  ] });
+}, vt = V(kt), W = (t, r) => {
+  const n = v(r[t].date), i = v(r[t - 1]?.date);
+  return !F(n, i);
+}, Gt = (t, r) => {
+  const n = v(r[t].date), i = v(r[t + 1]?.date);
+  return F(n, i);
+}, Ie = (t) => t?.data ? t.data.map((r) => Object.fromEntries((t.names || []).map((n, i) => [n, r[i]]))) : [], xe = (t, r = "") => t.map((i) => {
+  const o = pt(i.date, ut.MONTH_SHORT);
+  return {
+    ariaLabel: `
+        ${o},
+        ${H(i.amount, "0.00")},
+        ${r}`,
+    label: o,
+    value: i.amount,
+    formattedAmount: H(i.amount, "0,0")
+  };
+}), B = 65, j = 32, Mt = ({
+  bgcolor: t,
+  filter: r,
+  height: n = "calc(100dvh - 36px)",
+  loader: i = /* @__PURE__ */ e(Z, { label: "Loading", size: 40 }),
+  onClick: o,
+  showInsights: c = !1,
+  showLoader: T = !1,
+  transaction: g,
+  width: C = "100%",
+  zeroState: d = /* @__PURE__ */ e(vt, {})
+}) => {
+  const { isLoading: u, sortedTransactions: _ } = G(), a = I.useMemo(() => {
+    const N = r ? _.filter(r) : _;
+    return g ?? N;
+  }, [_, g]), { clearExpandedSplits: p, setShowInsights: A, toggleSplit: b } = K(), { onEvent: S } = dt(), O = (N) => {
+    const D = a.find((y) => y.guid === N);
+    if (D?.has_been_split) {
+      b(D.guid);
+      return;
+    }
+    S(gt.ACCOUNT_DETAILS_CLICK_TRANSACTION, {
+      account_guid: D?.account_guid,
+      transaction_guid: N
+    }), o?.(N);
+  }, w = I.useRef(null), f = at({
+    count: a.length,
+    getScrollElement: () => w.current,
+    estimateSize: (N) => B + (W(N, a) ? j : 0),
+    overscan: 5
+  });
+  return I.useEffect(() => f.measure(), [a]), I.useEffect(() => A(c), [c]), I.useEffect(() => () => p(), []), /* @__PURE__ */ e(ct, { component: "div", role: "list", sx: { width: C }, children: /* @__PURE__ */ e(L, { height: n, overflow: "auto", ref: w, role: "presentation", width: C, children: /* @__PURE__ */ s(
+    L,
+    {
+      height: (
+        // set the height to auto when there are no transactions so the zero state isn't set to 0
+        f.getVirtualItems().length === 0 ? "auto" : f.getTotalSize()
+      ),
+      position: "relative",
+      role: "presentation",
+      width: "100%",
+      children: [
+        (u || T) && i,
+        !u && !T && f.getVirtualItems().length === 0 && d,
+        !u && !T && f.getVirtualItems().length > 0 && f.getVirtualItems().map((N) => {
+          const D = a[N.index], y = W(N.index, a), h = Gt(N.index, a), x = B + (y ? j : 0);
+          return /* @__PURE__ */ s(
+            L,
+            {
+              role: "listitem",
+              sx: {
+                height: x,
+                position: "absolute",
+                transform: `translateY(${N.start}px)`,
+                width: "100%",
+                bgcolor: "background.paper"
+              },
+              children: [
+                y && /* @__PURE__ */ e(Rt, { bgcolor: t, children: mt(D.date) }),
+                /* @__PURE__ */ e(
+                  wt,
+                  {
+                    ...o && { onClick: O },
+                    transaction: D
+                  }
+                ),
+                /* @__PURE__ */ e(st, { sx: { ml: h ? 68 : 0 } })
+              ]
+            },
+            D.guid
+          );
+        })
+      ]
+    }
+  ) }) });
+}, Ht = V(Mt), Kt = ({ message: t, tipAriaLabel: r, onDismiss: n, onAction: i, sx: o }) => {
+  const c = i || n, T = i ? "chevron_right" : "close";
+  return /* @__PURE__ */ s(
+    l,
+    {
+      sx: {
+        backgroundColor: "primary.lighter",
+        borderRadius: "8px",
+        mb: 24,
+        mt: 12,
+        p: 12,
+        mx: 24,
+        alignItems: "flex-start",
+        justifyContent: "space-between",
+        flexDirection: "row",
+        gap: 8,
+        ...o
+      },
+      children: [
+        /* @__PURE__ */ s(l, { sx: { flexDirection: "row", gap: 4 }, children: [
+          /* @__PURE__ */ e(k, { color: "info", fill: !0, name: "lightbulb", size: 24 }),
+          /* @__PURE__ */ e($, { color: "primary.dark", fontWeight: 400, noWrap: !1, variant: "subtitle2", children: t })
+        ] }),
+        c && /* @__PURE__ */ e(
+          ft,
+          {
+            "aria-label": r,
+            onClick: c,
+            size: "small",
+            sx: { minHeight: 0, minWidth: 0, p: 0 },
+            children: /* @__PURE__ */ e(k, { color: "primary", fill: !0, name: T, size: 20 })
+          }
+        )
+      ]
+    }
+  );
+}, $t = ({
+  ariaLabel: t,
+  beat: r,
+  chart: n,
+  children: i,
+  data: o,
+  defaultSelectedIndex: c,
+  icon: T,
+  onTabChange: g,
+  tipSection: C
+}) => {
+  const { heading: d, subHeading: u } = r, _ = X(
+    () => c ?? (o.length ? o.length - 1 : 0),
+    [c, o.length]
+  ), [a, p] = P(_), A = (S, O) => {
+    g?.(O), p(O);
+  }, b = (S) => {
+    p(S);
+  };
+  return /* @__PURE__ */ s(L, { sx: { bgcolor: "background.paper", width: "100%" }, children: [
+    /* @__PURE__ */ e(Nt, { "aria-label": t, onChange: A, value: a, variant: "fullWidth", children: o.map((S, O) => /* @__PURE__ */ e(
+      At,
+      {
+        id: `transaction-details-tab-${O}`,
+        label: S.label,
+        sx: { minWidth: "auto", px: 0 }
+      },
+      `${S.label}-${O}`
+    )) }),
+    /* @__PURE__ */ e(l, { sx: { pt: 16, px: 24 }, children: (d || u) && /* @__PURE__ */ s(l, { sx: { gap: 4 }, children: [
+      d && /* @__PURE__ */ e(tt, { children: d }),
+      u && /* @__PURE__ */ s(l, { sx: { alignItems: "center", flexDirection: "row", gap: 8 }, children: [
+        T,
+        /* @__PURE__ */ e(m, { textTransform: "uppercase", variant: "body2", children: u.description })
+      ] })
+    ] }) }),
+    n?.(a, b),
+    C && /* @__PURE__ */ e(Kt, { ...C }),
+    i?.(a)
+  ] });
+}, Vt = (t) => {
+  const [r, n] = P({ width: 0, height: 0 });
+  return q(() => {
+    const i = () => {
+      if (t.current) {
+        const { offsetWidth: o, offsetHeight: c } = t.current;
+        n({ width: o, height: c });
+      }
+    };
+    return i(), window.addEventListener("resize", i), () => {
+      window.removeEventListener("resize", i);
+    };
+  }, [t]), r;
+}, zt = ({
+  color: t,
+  legendStyle: r = {},
+  monthlyAmount: n,
+  monthlyAmountLabel: i,
+  trendAmount: o,
+  trendAmountLabel: c
+}) => {
+  const T = M();
+  return /* @__PURE__ */ s(
+    l,
+    {
+      sx: {
+        alignItems: "center",
+        flexDirection: "row",
+        gap: 24,
+        justifyContent: "flex-start",
+        py: 4,
+        width: "100%",
+        ...r
+      },
+      children: [
+        i && /* @__PURE__ */ s(l, { sx: { alignItems: "center", flexDirection: "row", gap: 8 }, children: [
+          /* @__PURE__ */ e(
+            "svg",
+            {
+              "aria-hidden": "true",
+              "aria-labelledby": "chartLegendLabel",
+              fill: "none",
+              height: "12",
+              role: "figure",
+              width: "12",
+              children: /* @__PURE__ */ e("rect", { fill: t, height: "12", rx: "2", width: "12" })
+            }
+          ),
+          /* @__PURE__ */ s(m, { id: "chartLegendLabel", variant: "caption", children: [
+            i,
+            ": ",
+            n
+          ] })
+        ] }),
+        c && /* @__PURE__ */ s(l, { sx: { alignItems: "center", flexDirection: "row", gap: 8 }, children: [
+          /* @__PURE__ */ e(
+            "svg",
+            {
+              "aria-hidden": "true",
+              "aria-labelledby": "chartLegendLabel",
+              fill: "none",
+              height: "12",
+              role: "figure",
+              width: "12",
+              children: /* @__PURE__ */ e("rect", { fill: T.palette.chart.chart7, height: "12", rx: "2", width: "12" })
+            }
+          ),
+          /* @__PURE__ */ s(m, { id: "chartLegendLabel", variant: "caption", children: [
+            c,
+            ": ",
+            o
+          ] })
+        ] })
+      ]
+    }
+  );
+}, Ut = (t, r) => {
+  if (t <= 0 || r <= 0) return "";
+  const n = Math.min(4, t / 2, r / 2);
+  return `M${n},0 L${t - n},0 Q${t},0 ${t},${n} L${t},${r} L0,${r} L0,${n} Q0,0 ${n},0 Z`;
+}, Wt = ({
+  colorRange: t,
+  data: r,
+  dataIndex: n,
+  removeSelectedTabColorChange: i,
+  selectedTabIndex: o,
+  style: c,
+  ...T
+}) => {
+  const g = M(), { ariaLabel: C, formattedAmount: d } = r[n], u = o === n ? "bold" : 400, _ = c.x ?? 0, a = c.y ?? 0, p = c.width ?? 0, A = c.height ?? 0;
+  return /* @__PURE__ */ s("g", { "aria-label": C, children: [
+    /* @__PURE__ */ e(
+      "path",
+      {
+        ...T,
+        d: Ut(p, A),
+        fill: t[n],
+        transform: `translate(${_}, ${a})`
+      }
+    ),
+    /* @__PURE__ */ e(
+      "text",
+      {
+        fill: g.palette.text.primary,
+        fontSize: 11,
+        fontWeight: i ? "bold" : u,
+        textAnchor: "middle",
+        x: _ + p / 2,
+        y: a - 8,
+        children: d
+      }
+    )
+  ] });
+}, Bt = ({
+  amounts: t,
+  color: r,
+  data: n,
+  heightOverride: i,
+  margin: o = {
+    bottom: 30,
+    left: 40,
+    right: 40,
+    top: 20
+  },
+  onBarClick: c,
+  legendPosition: T = "bottom",
+  monthlyAmountLabel: g,
+  removeSelectedTabColorChange: C,
+  selectedTabIndex: d,
+  trendAmountLabel: u
+}) => {
+  const _ = I.useRef(null), { height: a, width: p } = Vt(_), A = M(), b = I.useMemo(() => {
+    const h = n.map(({ value: R }) => R), x = Math.min(...h), E = Math.max(...h);
+    return {
+      series: [
+        {
+          data: h,
+          type: "bar"
+        }
+      ],
+      xAxis: [
+        {
+          data: n.map(({ label: R }) => R),
+          scaleType: "band",
+          categoryGapRatio: 0.45
+        }
+      ],
+      yAxis: [
+        {
+          scaleType: "linear",
+          min: x < 0 ? x * 1.2 : 0,
+          max: E > 0 ? E : 0
+        }
+      ]
+    };
+  }, [n]), S = I.useMemo(() => {
+    const h = `${r}80`;
+    return C ? n.map(() => r) : d == null ? [...new Array(n.length - 1).fill(h), r] : n.map((x, E) => E === d ? r : h);
+  }, [r, n, d]), O = I.useMemo(
+    () => n[d ?? n.length - 1],
+    [n, d]
+  ), f = n.reduce((h, x) => Math.min(h, x.value), 1 / 0) < 0, N = /* @__PURE__ */ e(
+    zt,
+    {
+      color: r,
+      legendStyle: { pl: o.left },
+      monthlyAmount: O.formattedAmount,
+      monthlyAmountLabel: g,
+      trendAmount: t?.formattedAverage,
+      trendAmountLabel: u
+    }
+  ), D = g || u, y = (h, { dataIndex: x }) => c?.(x);
+  return /* @__PURE__ */ s(l, { sx: { alignItems: "center", width: "100%" }, children: [
+    D && T === "top" && N,
+    /* @__PURE__ */ e(
+      L,
+      {
+        ref: _,
+        sx: {
+          height: i || 122,
+          mb: T === "top" ? 0 : 4,
+          mt: T === "top" ? 4 : 0,
+          touchAction: "pan-y",
+          width: "100%",
+          "& svg": {
+            touchAction: "pan-y",
+            userSelect: "none"
+          },
+          "& .recharts-wrapper": {
+            touchAction: "pan-y"
+          }
+        },
+        children: /* @__PURE__ */ s(
+          xt,
+          {
+            height: a,
+            margin: {
+              bottom: o.bottom,
+              left: o.left,
+              right: o.right,
+              top: o.top || 45
+            },
+            series: b.series,
+            width: p,
+            xAxis: b.xAxis,
+            yAxis: [{ width: 0 }],
+            children: [
+              t?.average && /* @__PURE__ */ e(
+                U,
+                {
+                  labelAlign: "middle",
+                  lineStyle: {
+                    stroke: A.palette.chart.chart7,
+                    strokeDasharray: "4",
+                    strokeLinecap: "round",
+                    strokeWidth: 1
+                  },
+                  y: t?.average
+                }
+              ),
+              f && /* @__PURE__ */ e(
+                U,
+                {
+                  labelAlign: "middle",
+                  lineStyle: {
+                    stroke: A.palette.chart.chart7
+                  },
+                  y: 0
+                }
+              ),
+              /* @__PURE__ */ e(
+                St,
+                {
+                  position: "bottom",
+                  slots: {
+                    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+                    axisTickLabel: ({ text: h, ownerState: x, ...E }) => {
+                      const R = n[d ?? n.length - 1]?.label;
+                      return /* @__PURE__ */ e(
+                        "text",
+                        {
+                          ...E,
+                          style: {
+                            ...E.style,
+                            fontWeight: !C && R === h ? "bold" : 400
+                          },
+                          children: h
+                        }
+                      );
+                    }
+                  },
+                  sx: (h) => ({
+                    "& .MuiChartsAxis-line": {
+                      stroke: f ? "none" : h.palette.text?.primary
+                    },
+                    "& .MuiChartsAxis-tickContainer:first-of-type .MuiChartsAxis-tick": {
+                      display: "none"
+                    },
+                    "& .MuiChartsAxis-tickLabel": {
+                      transform: f ? "translateY(15px)" : {}
+                    }
+                  }),
+                  tickLabelStyle: {
+                    fontSize: 11
+                  }
+                }
+              ),
+              /* @__PURE__ */ e(
+                Ot,
+                {
+                  onItemClick: y,
+                  slots: {
+                    bar: (h) => {
+                      const { ownerState: x, ...E } = h;
+                      return /* @__PURE__ */ e(
+                        Wt,
+                        {
+                          ...E,
+                          colorRange: S,
+                          data: n,
+                          dataIndex: x.dataIndex,
+                          removeSelectedTabColorChange: C,
+                          selectedTabIndex: d ?? n.length - 1,
+                          style: {
+                            height: h.height,
+                            x: h.x,
+                            y: h.y,
+                            width: h.width
+                          }
+                        }
+                      );
+                    }
+                  }
+                }
+              )
+            ]
+          }
+        )
+      }
+    ),
+    D && T === "bottom" && N
+  ] });
+}, Se = ({
+  ariaLabel: t,
+  barChartProps: r,
+  beat: n,
+  data: i,
+  defaultSelectedIndex: o = 0,
+  icon: c,
+  isOpen: T = !1,
+  onClose: g,
+  onTabChange: C,
+  tipSection: d,
+  title: u,
+  transactionListProps: _ = {}
+}) => {
+  const { common: a, transactions: p } = z(), { isCopyLoaded: A } = Tt(), { sortedTransactionsWithSplits: b, tags: S } = G();
+  return A ? /* @__PURE__ */ e(It, { ariaLabelClose: a.close_aria, isOpen: T, onClose: g, title: u, children: /* @__PURE__ */ e(
+    $t,
+    {
+      ariaLabel: t,
+      beat: n,
+      chart: (O, w) => /* @__PURE__ */ e(L, { sx: { pt: 16 }, children: /* @__PURE__ */ e(
+        Bt,
+        {
+          ...r,
+          onBarClick: (f) => {
+            w(f), r.onBarClick?.(f);
+          },
+          selectedTabIndex: O
+        }
+      ) }),
+      data: i,
+      defaultSelectedIndex: o,
+      icon: c,
+      onTabChange: C,
+      tipSection: d,
+      children: () => /* @__PURE__ */ s(I.Fragment, { children: [
+        /* @__PURE__ */ s(
+          l,
+          {
+            sx: {
+              alignItems: "center",
+              borderBottomColor: "divider",
+              borderBottomStyle: "solid",
+              borderBottomWidth: 1,
+              flexDirection: "row",
+              justifyContent: "space-between",
+              pb: 4,
+              pt: 16,
+              px: 24
+            },
+            children: [
+              /* @__PURE__ */ e(m, { bold: !0, variant: "body1", children: p.transactions_title }),
+              (_?.transaction || b.length > 0) && /* @__PURE__ */ e(
+                Y,
+                {
+                  onClick: () => {
+                    ot(
+                      _?.transaction || b,
+                      S
+                    );
+                  },
+                  startIcon: /* @__PURE__ */ e(rt, { name: "ios_share" }),
+                  sx: { height: 28 },
+                  children: /* @__PURE__ */ e(m, { bold: !0, variant: "body2", children: p.export_csv_btn })
+                }
+              )
+            ]
+          }
+        ),
+        /* @__PURE__ */ e(Ht, { ..._ })
+      ] })
+    }
+  ) }) : /* @__PURE__ */ e(Z, {});
+}, Oe = ({
+  amount: t,
+  borderRadius: r = "2px",
+  count: n,
+  completeColor: i = "success.main",
+  icon: o,
+  label: c,
+  leftLabel: T,
+  percentComplete: g = 0,
+  rightLabel: C,
+  sx: d
+}) => /* @__PURE__ */ s(l, { className: "details-container", sx: { p: 24, width: "100%", gap: 16, ...d }, children: [
+  /* @__PURE__ */ s(l, { sx: { alignItems: "center", flexDirection: "row", gap: 12 }, children: [
+    /* @__PURE__ */ e(L, { children: o }),
+    /* @__PURE__ */ s(l, { children: [
+      typeof c == "string" ? /* @__PURE__ */ e($, { dangerouslySetInnerHTML: { __html: c }, variant: "body2" }) : c,
+      typeof t == "string" ? /* @__PURE__ */ e(et, { children: t }) : t
+    ] })
+  ] }),
+  /* @__PURE__ */ s(l, { sx: { gap: 4 }, children: [
+    /* @__PURE__ */ e(
+      l,
+      {
+        sx: {
+          bgcolor: "divider",
+          borderRadius: r,
+          flexDirection: "row",
+          height: n ? 20 : 16,
+          width: "100%"
+        },
+        children: /* @__PURE__ */ e(
+          L,
+          {
+            sx: {
+              alignItems: "center",
+              display: "flex",
+              py: 2,
+              px: 12,
+              bgcolor: i,
+              borderRadius: r,
+              height: n ? 20 : 16,
+              width: `${g}%`
+            },
+            children: /* @__PURE__ */ e(m, { sx: { color: "primary.dark" }, variant: "caption", children: n })
+          }
+        )
+      }
+    ),
+    !n && /* @__PURE__ */ s(l, { sx: { flexDirection: "row", justifyContent: "space-between" }, children: [
+      /* @__PURE__ */ e(m, { variant: "body2", children: T }),
+      /* @__PURE__ */ e(m, { variant: "body2", children: C })
+    ] })
+  ] })
+] }), De = ({
+  title: t,
+  description: r,
+  callToAction: n,
+  instanceSlot: i = void 0,
+  onCtaClick: o = () => {
+  }
+}) => /* @__PURE__ */ s(Dt, { sx: { pt: 8, pr: 16, pb: 12, pl: 8, borderRadius: "8px" }, children: [
+  /* @__PURE__ */ e(
+    l,
+    {
+      sx: {
+        flexDirection: "row",
+        alignItems: "center",
+        justifyContent: "space-between",
+        pt: 4,
+        pl: 8
+      },
+      children: /* @__PURE__ */ e(m, { bold: !0, variant: "body1", children: t })
+    }
+  ),
+  /* @__PURE__ */ s(
+    l,
+    {
+      sx: {
+        gap: 16,
+        alignItems: "center",
+        flexDirection: "row",
+        justifyContent: "space-between"
+      },
+      children: [
+        /* @__PURE__ */ s(l, { children: [
+          /* @__PURE__ */ e(l, { sx: { pt: 2, pl: 8, pb: 8 }, children: /* @__PURE__ */ e($, { sx: { fontWeight: 400 }, variant: "subtitle2", children: r }) }),
+          /* @__PURE__ */ e(l, { sx: { alignItems: "flex-start" }, children: /* @__PURE__ */ e(
+            Y,
+            {
+              onClick: o,
+              sx: {
+                p: 0,
+                height: 24,
+                px: 8,
+                py: 8,
+                fontWeight: 600,
+                fontSize: 13,
+                lineHeight: "16px"
+              },
+              variant: "text",
+              children: n
+            }
+          ) })
+        ] }),
+        i
+      ]
+    }
+  )
+] });
+export {
+  Bt as B,
+  Se as C,
+  De as E,
+  bt as O,
+  Rt as S,
+  Ht as T,
+  wt as a,
+  Oe as b,
+  Ie as c,
+  xe as d,
+  Vt as e,
+  $t as f,
+  Gt as h,
+  fe as p,
+  W as s,
+  K as u
+};