@mx-cartographer/experiences 9.1.0-alpha.bb1 → 9.1.1

package/dist/EmbeddedCard-DH8vQ3qN.mjs

@@ -0,0 +1,859 @@
+import { jsxs as a, jsx as e } from "react/jsx-runtime";
+import x, { 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, g as G, u as z, f as dt, a as Tt } from "./hooks-97sNJ_lf.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-DRse79Iu.mjs";
+import { fromUnixTime as v } from "date-fns/fromUnixTime";
+import { isSameDay as F } from "date-fns/isSameDay";
+import { f as ut, D as pt } from "./DateFormats-HudZ3Bjs.mjs";
+import { k as mt } from "./DateUtil-CzBmbjmA.mjs";
+import { L as Z } from "./Loader-CxeBwuPG.mjs";
+import { A as gt } from "./Analytics-WeZYytR0.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-DsnW2o0v.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 (!x.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, component: n }) => {
+  const o = M().palette.mode === "dark", { associatedBeats: s } = G(), { expandedSplits: d } = K(), { transactions: g } = z(), { showInsights: u } = K(), T = t.transaction_type === it.CREDIT, _ = x.useMemo(() => s.find((c) => c.associated_transaction_guid === t.guid), [s, t]), p = (c, A) => {
+    const f = [];
+    return c.is_flagged && f.push(
+      /* @__PURE__ */ e(
+        k,
+        {
+          fill: !0,
+          name: "flag",
+          size: 16,
+          sx: { color: A ? "primary.main" : "warning.dark" }
+        },
+        "flag"
+      )
+    ), c.is_hidden && f.push(/* @__PURE__ */ e(k, { name: "visibility_off", size: 16 }, "hidden")), c.has_been_split && f.push(/* @__PURE__ */ e(k, { name: "call_split", size: 16 }, "split")), f;
+  }, C = (c, A) => c.is_hidden ? A.is_excluded : c.has_been_split ? A.split_transaction_category_label : c.category || "";
+  return (
+    //TODO: implement common/components/ListItemRow.tsx
+    /* @__PURE__ */ a(
+      _t,
+      {
+        clickEventName: bt.ON_TRANSACTION_LIST_ITEM_CLICK,
+        ...n && { component: n },
+        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 && d.includes(t.parent_guid) ? /* @__PURE__ */ e(x.Fragment, {}) : /* @__PURE__ */ e(
+            J,
+            {
+              categoryGuid: t.top_level_category_guid || "",
+              merchantGuid: t.merchant_guid || ""
+            }
+          ) }),
+          /* @__PURE__ */ e(
+            Ct,
+            {
+              disableTypography: !0,
+              secondary: /* @__PURE__ */ a(l, { direction: "row", justifyContent: "space-between", children: [
+                /* @__PURE__ */ a(l, { alignItems: "center", direction: "row", gap: 4, children: [
+                  p(t, o),
+                  /* @__PURE__ */ e(m, { truncate: !0, variant: "caption", children: C(t, g) })
+                ] }),
+                _ && u && /* @__PURE__ */ e(
+                  m,
+                  {
+                    bold: !0,
+                    color: "action.active",
+                    onClick: (c) => {
+                      c.stopPropagation(), c.preventDefault(), Lt(_.guid);
+                    },
+                    truncate: !0,
+                    variant: "caption",
+                    children: _.short_title
+                  }
+                )
+              ] }),
+              children: /* @__PURE__ */ a(l, { direction: "row", justifyContent: "space-between", sx: { gap: 8 }, children: [
+                /* @__PURE__ */ e(m, { bold: !0, truncate: !0, variant: "body1", children: t.payee || t.description || t.feed_description }),
+                /* @__PURE__ */ a(
+                  m,
+                  {
+                    bold: !0,
+                    color: T ? "success.main" : "text.primary",
+                    sx: { flexShrink: 0 },
+                    variant: "body1",
+                    children: [
+                      T ? "+" : "",
+                      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__ */ a(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 = ut(i.date, pt.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: s = !1,
+  showLoader: d = !1,
+  transaction: g,
+  width: u = "100%",
+  zeroState: T = /* @__PURE__ */ e(vt, {})
+}) => {
+  const { isLoading: _, sortedTransactions: p } = G(), C = x.useMemo(() => {
+    const N = r ? p.filter(r) : p;
+    return g ?? N;
+  }, [p, g]), { clearExpandedSplits: c, setShowInsights: A, toggleSplit: f } = K(), { onEvent: O } = dt(), D = (N) => {
+    const b = C.find((y) => y.guid === N);
+    if (b?.has_been_split) {
+      f(b.guid);
+      return;
+    }
+    O(gt.ACCOUNT_DETAILS_CLICK_TRANSACTION, {
+      account_guid: b?.account_guid,
+      transaction_guid: N
+    }), o?.(N);
+  }, w = x.useRef(null), I = at({
+    count: C.length,
+    getScrollElement: () => w.current,
+    estimateSize: (N) => B + (W(N, C) ? j : 0),
+    overscan: 5
+  });
+  return x.useEffect(() => I.measure(), [C]), x.useEffect(() => A(s), [s]), x.useEffect(() => () => c(), []), /* @__PURE__ */ e(ct, { component: "div", role: "list", sx: { width: u }, children: /* @__PURE__ */ e(L, { height: n, overflow: "auto", ref: w, role: "presentation", width: u, children: /* @__PURE__ */ a(
+    L,
+    {
+      height: (
+        // set the height to auto when there are no transactions so the zero state isn't set to 0
+        I.getVirtualItems().length === 0 ? "auto" : I.getTotalSize()
+      ),
+      position: "relative",
+      role: "presentation",
+      width: "100%",
+      children: [
+        (_ || d) && i,
+        !_ && !d && I.getVirtualItems().length === 0 && T,
+        !_ && !d && I.getVirtualItems().length > 0 && I.getVirtualItems().map((N) => {
+          const b = C[N.index], y = W(N.index, C), h = Gt(N.index, C), S = B + (y ? j : 0);
+          return /* @__PURE__ */ a(
+            L,
+            {
+              role: "listitem",
+              sx: {
+                height: S,
+                position: "absolute",
+                transform: `translateY(${N.start}px)`,
+                width: "100%",
+                bgcolor: "background.paper"
+              },
+              children: [
+                y && /* @__PURE__ */ e(Rt, { bgcolor: t, children: mt(b.date) }),
+                /* @__PURE__ */ e(
+                  wt,
+                  {
+                    component: "div",
+                    ...o && { onClick: D },
+                    transaction: b
+                  }
+                ),
+                /* @__PURE__ */ e(st, { sx: { ml: h ? 68 : 0 } })
+              ]
+            },
+            b.guid
+          );
+        })
+      ]
+    }
+  ) }) });
+}, Ht = V(Mt), Kt = ({ message: t, tipAriaLabel: r, onDismiss: n, onAction: i, sx: o }) => {
+  const s = i || n, d = i ? "chevron_right" : "close";
+  return /* @__PURE__ */ a(
+    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__ */ a(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 })
+        ] }),
+        s && /* @__PURE__ */ e(
+          ft,
+          {
+            "aria-label": r,
+            onClick: s,
+            size: "small",
+            sx: { minHeight: 0, minWidth: 0, p: 0 },
+            children: /* @__PURE__ */ e(k, { color: "primary", fill: !0, name: d, size: 20 })
+          }
+        )
+      ]
+    }
+  );
+}, $t = ({
+  ariaLabel: t,
+  beat: r,
+  chart: n,
+  children: i,
+  data: o,
+  defaultSelectedIndex: s,
+  icon: d,
+  onTabChange: g,
+  tipSection: u
+}) => {
+  const { heading: T, subHeading: _ } = r, p = X(
+    () => s ?? (o.length ? o.length - 1 : 0),
+    [s, o.length]
+  ), [C, c] = P(p), A = (O, D) => {
+    g?.(D), c(D);
+  }, f = (O) => {
+    c(O);
+  };
+  return /* @__PURE__ */ a(L, { sx: { bgcolor: "background.paper", width: "100%" }, children: [
+    /* @__PURE__ */ e(Nt, { "aria-label": t, onChange: A, value: C, variant: "fullWidth", children: o.map((O, D) => /* @__PURE__ */ e(
+      At,
+      {
+        id: `transaction-details-tab-${D}`,
+        label: O.label,
+        sx: { minWidth: "auto", px: 0 }
+      },
+      `${O.label}-${D}`
+    )) }),
+    /* @__PURE__ */ e(l, { sx: { pt: 16, px: 24 }, children: (T || _) && /* @__PURE__ */ a(l, { sx: { gap: 4 }, children: [
+      T && /* @__PURE__ */ e(tt, { children: T }),
+      _ && /* @__PURE__ */ a(l, { sx: { alignItems: "center", flexDirection: "row", gap: 8 }, children: [
+        d,
+        /* @__PURE__ */ e(m, { textTransform: "uppercase", variant: "body2", children: _.description })
+      ] })
+    ] }) }),
+    n?.(C, f),
+    u && /* @__PURE__ */ e(Kt, { ...u }),
+    i?.(C)
+  ] });
+}, Vt = (t) => {
+  const [r, n] = P({ width: 0, height: 0 });
+  return q(() => {
+    const i = () => {
+      if (t.current) {
+        const { offsetWidth: o, offsetHeight: s } = t.current;
+        n({ width: o, height: s });
+      }
+    };
+    return i(), window.addEventListener("resize", i), () => {
+      window.removeEventListener("resize", i);
+    };
+  }, [t]), r;
+}, zt = ({
+  color: t,
+  legendStyle: r = {},
+  monthlyAmount: n,
+  monthlyAmountLabel: i,
+  trendAmount: o,
+  trendAmountLabel: s
+}) => {
+  const d = M();
+  return /* @__PURE__ */ a(
+    l,
+    {
+      sx: {
+        alignItems: "center",
+        flexDirection: "row",
+        gap: 24,
+        justifyContent: "flex-start",
+        py: 4,
+        width: "100%",
+        ...r
+      },
+      children: [
+        i && /* @__PURE__ */ a(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__ */ a(m, { id: "chartLegendLabel", variant: "caption", children: [
+            i,
+            ": ",
+            n
+          ] })
+        ] }),
+        s && /* @__PURE__ */ a(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: d.palette.chart.chart7, height: "12", rx: "2", width: "12" })
+            }
+          ),
+          /* @__PURE__ */ a(m, { id: "chartLegendLabel", variant: "caption", children: [
+            s,
+            ": ",
+            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: s,
+  ...d
+}) => {
+  const g = M(), { ariaLabel: u, formattedAmount: T } = r[n], _ = o === n ? "bold" : 400, p = s.x ?? 0, C = s.y ?? 0, c = s.width ?? 0, A = s.height ?? 0;
+  return /* @__PURE__ */ a("g", { "aria-label": u, children: [
+    /* @__PURE__ */ e(
+      "path",
+      {
+        ...d,
+        d: Ut(c, A),
+        fill: t[n],
+        transform: `translate(${p}, ${C})`
+      }
+    ),
+    /* @__PURE__ */ e(
+      "text",
+      {
+        fill: g.palette.text.primary,
+        fontSize: 11,
+        fontWeight: i ? "bold" : _,
+        textAnchor: "middle",
+        x: p + c / 2,
+        y: C - 8,
+        children: T
+      }
+    )
+  ] });
+}, Bt = ({
+  amounts: t,
+  color: r,
+  data: n,
+  heightOverride: i,
+  margin: o = {
+    bottom: 30,
+    left: 40,
+    right: 40,
+    top: 20
+  },
+  onBarClick: s,
+  legendPosition: d = "bottom",
+  monthlyAmountLabel: g,
+  removeSelectedTabColorChange: u,
+  selectedTabIndex: T,
+  trendAmountLabel: _
+}) => {
+  const p = x.useRef(null), { height: C, width: c } = Vt(p), A = M(), f = x.useMemo(() => {
+    const h = n.map(({ value: R }) => R), S = 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: S < 0 ? S * 1.2 : 0,
+          max: E > 0 ? E : 0
+        }
+      ]
+    };
+  }, [n]), O = x.useMemo(() => {
+    const h = `${r}80`;
+    return u ? n.map(() => r) : T == null ? [...new Array(n.length - 1).fill(h), r] : n.map((S, E) => E === T ? r : h);
+  }, [r, n, T]), D = x.useMemo(
+    () => n[T ?? n.length - 1],
+    [n, T]
+  ), I = n.reduce((h, S) => Math.min(h, S.value), 1 / 0) < 0, N = /* @__PURE__ */ e(
+    zt,
+    {
+      color: r,
+      legendStyle: { pl: o.left },
+      monthlyAmount: D.formattedAmount,
+      monthlyAmountLabel: g,
+      trendAmount: t?.formattedAverage,
+      trendAmountLabel: _
+    }
+  ), b = g || _, y = (h, { dataIndex: S }) => s?.(S);
+  return /* @__PURE__ */ a(l, { sx: { alignItems: "center", width: "100%" }, children: [
+    b && d === "top" && N,
+    /* @__PURE__ */ e(
+      L,
+      {
+        ref: p,
+        sx: {
+          height: i || 122,
+          mb: d === "top" ? 0 : 4,
+          mt: d === "top" ? 4 : 0,
+          touchAction: "pan-y",
+          width: "100%",
+          "& svg": {
+            touchAction: "pan-y",
+            userSelect: "none"
+          },
+          "& .recharts-wrapper": {
+            touchAction: "pan-y"
+          }
+        },
+        children: /* @__PURE__ */ a(
+          xt,
+          {
+            height: C,
+            margin: {
+              bottom: o.bottom,
+              left: o.left,
+              right: o.right,
+              top: o.top || 45
+            },
+            series: f.series,
+            width: c,
+            xAxis: f.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
+                }
+              ),
+              I && /* @__PURE__ */ e(
+                U,
+                {
+                  labelAlign: "middle",
+                  lineStyle: {
+                    stroke: A.palette.chart.chart7
+                  },
+                  y: 0
+                }
+              ),
+              /* @__PURE__ */ e(
+                St,
+                {
+                  slots: {
+                    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+                    axisTickLabel: ({ text: h, ownerState: S, ...E }) => {
+                      const R = n[T ?? n.length - 1]?.label;
+                      return /* @__PURE__ */ e(
+                        "text",
+                        {
+                          ...E,
+                          style: {
+                            ...E.style,
+                            fontWeight: !u && R === h ? "bold" : 400
+                          },
+                          children: h
+                        }
+                      );
+                    }
+                  },
+                  sx: (h) => ({
+                    "& .MuiChartsAxis-line": {
+                      stroke: I ? "none" : h.palette.text?.primary
+                    },
+                    "& .MuiChartsAxis-tickContainer:first-of-type .MuiChartsAxis-tick": {
+                      display: "none"
+                    },
+                    "& .MuiChartsAxis-tickLabel": {
+                      transform: I ? "translateY(15px)" : {}
+                    }
+                  }),
+                  tickLabelStyle: {
+                    fontSize: 11
+                  }
+                }
+              ),
+              /* @__PURE__ */ e(
+                Ot,
+                {
+                  onItemClick: y,
+                  slots: {
+                    bar: (h) => {
+                      const { ownerState: S, ...E } = h;
+                      return /* @__PURE__ */ e(
+                        Wt,
+                        {
+                          ...E,
+                          colorRange: O,
+                          data: n,
+                          dataIndex: S.dataIndex,
+                          removeSelectedTabColorChange: u,
+                          selectedTabIndex: T ?? n.length - 1,
+                          style: {
+                            height: h.height,
+                            x: h.x,
+                            y: h.y,
+                            width: h.width
+                          }
+                        }
+                      );
+                    }
+                  }
+                }
+              )
+            ]
+          }
+        )
+      }
+    ),
+    b && d === "bottom" && N
+  ] });
+}, Se = ({
+  ariaLabel: t,
+  barChartProps: r,
+  beat: n,
+  data: i,
+  defaultSelectedIndex: o = 0,
+  icon: s,
+  isOpen: d = !1,
+  onClose: g,
+  onTabChange: u,
+  tipSection: T,
+  title: _,
+  transactionListProps: p = {}
+}) => {
+  const { common: C, transactions: c } = z(), { isCopyLoaded: A } = Tt(), { sortedTransactionsWithSplits: f, tags: O } = G();
+  return A ? /* @__PURE__ */ e(It, { ariaLabelClose: C.close_aria, isOpen: d, onClose: g, title: _, children: /* @__PURE__ */ e(
+    $t,
+    {
+      ariaLabel: t,
+      beat: n,
+      chart: (D, w) => /* @__PURE__ */ e(L, { sx: { pt: 16 }, children: /* @__PURE__ */ e(
+        Bt,
+        {
+          ...r,
+          onBarClick: (I) => {
+            w(I), r.onBarClick?.(I);
+          },
+          selectedTabIndex: D
+        }
+      ) }),
+      data: i,
+      defaultSelectedIndex: o,
+      icon: s,
+      onTabChange: u,
+      tipSection: T,
+      children: () => /* @__PURE__ */ a(x.Fragment, { children: [
+        /* @__PURE__ */ a(
+          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: c.transactions_title }),
+              (p?.transaction || f.length > 0) && /* @__PURE__ */ e(
+                Y,
+                {
+                  onClick: () => {
+                    ot(
+                      p?.transaction || f,
+                      O
+                    );
+                  },
+                  startIcon: /* @__PURE__ */ e(rt, { name: "ios_share" }),
+                  sx: { height: 28 },
+                  children: /* @__PURE__ */ e(m, { bold: !0, variant: "body2", children: c.export_csv_btn })
+                }
+              )
+            ]
+          }
+        ),
+        /* @__PURE__ */ e(Ht, { ...p })
+      ] })
+    }
+  ) }) : /* @__PURE__ */ e(Z, {});
+}, Oe = ({
+  amount: t,
+  borderRadius: r = "2px",
+  count: n,
+  completeColor: i = "success.main",
+  icon: o,
+  label: s,
+  leftLabel: d,
+  percentComplete: g = 0,
+  rightLabel: u,
+  sx: T
+}) => /* @__PURE__ */ a(l, { className: "details-container", sx: { p: 24, width: "100%", gap: 16, ...T }, children: [
+  /* @__PURE__ */ a(l, { sx: { alignItems: "center", flexDirection: "row", gap: 12 }, children: [
+    /* @__PURE__ */ e(L, { children: o }),
+    /* @__PURE__ */ a(l, { children: [
+      typeof s == "string" ? /* @__PURE__ */ e($, { dangerouslySetInnerHTML: { __html: s }, variant: "body2" }) : s,
+      typeof t == "string" ? /* @__PURE__ */ e(et, { children: t }) : t
+    ] })
+  ] }),
+  /* @__PURE__ */ a(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__ */ a(l, { sx: { flexDirection: "row", justifyContent: "space-between" }, children: [
+      /* @__PURE__ */ e(m, { variant: "body2", children: d }),
+      /* @__PURE__ */ e(m, { variant: "body2", children: u })
+    ] })
+  ] })
+] }), De = ({
+  title: t,
+  description: r,
+  callToAction: n,
+  instanceSlot: i = void 0,
+  onCtaClick: o = () => {
+  }
+}) => /* @__PURE__ */ a(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__ */ a(
+    l,
+    {
+      sx: {
+        gap: 16,
+        alignItems: "center",
+        flexDirection: "row",
+        justifyContent: "space-between"
+      },
+      children: [
+        /* @__PURE__ */ a(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
+};
+//# sourceMappingURL=EmbeddedCard-DH8vQ3qN.mjs.map