@mx-cartographer/experiences 8.1.5 → 8.1.6

package/dist/TransactionDetails-Bpp1FDUI.mjs

@@ -0,0 +1,1721 @@
+import { jsx as e, jsxs as m } from "react/jsx-runtime";
+import l, { useMemo as ke } from "react";
+import { observer as w } from "mobx-react-lite";
+import ze from "@mui/material/Alert";
+import W from "@mui/material/Box";
+import Te from "@mui/material/Divider";
+import be from "@mui/material/List";
+import he from "@mui/material/Paper";
+import Ve from "@mui/material/Snackbar";
+import L from "@mui/material/Stack";
+import { useTheme as H, alpha as Ae } from "@mui/material/styles";
+import { P as ee, Text as A, H2 as We, MerchantLogo as Ce, Toast as Ye, CategoryIcon as Oe, CategoryIconVariants as Ge, TextField as Le, Icon as ye } from "@mxenabled/mxui";
+import { endOfMonth as Be } from "date-fns/endOfMonth";
+import { getUnixTime as Ie } from "date-fns/getUnixTime";
+import { isBefore as je } from "date-fns/isBefore";
+import { startOfMonth as De } from "date-fns/startOfMonth";
+import { l as qe, d as Qe, C as Xe, c as Ze, i as Je } from "./BudgetUtil-DalEN9--.mjs";
+import me from "@mui/material/Button";
+import et from "@mui/material/FormGroup";
+import ue from "@mui/material/IconButton";
+import $e from "@mui/material/TextField";
+import { u as xe } from "./useAriaLive-MkYebyUR.mjs";
+import { O as C } from "./exportTransactionsToCSV-B2Lp7AMl.mjs";
+import { u as O, h as R, m as tt, d as at, l as we, g as G, b as rt, o as nt } from "./hooks-HwStH7q_.mjs";
+import { A as Y } from "./Analytics-CzGzz_sE.mjs";
+import ot from "@mui/material/ToggleButton";
+import { ChevronRight as Ke, Icon as P, Delete as fe, Cancel as Se, Search as it, Edit as st, Flag as lt } from "@mxenabled/mx-icons";
+import { fromUnixTime as ve } from "date-fns/fromUnixTime";
+import j from "@mui/material/Avatar";
+import U from "@mui/material/ListItem";
+import q from "@mui/material/ListItemAvatar";
+import z from "@mui/material/ListItemText";
+import { f as Me, D as Re } from "./DateFormats-CaOj_4eI.mjs";
+import { BarChart as ct } from "@mui/x-charts";
+import { b as dt, T as ut, u as re, c as mt, d as _t, E as pt, C as gt } from "./EmbeddedCard-BqVpA1Jn.mjs";
+import { L as ht } from "./Loader-CxeBwuPG.mjs";
+import { f as V } from "./NumberFormatting-CyrvFgfd.mjs";
+import { b as E } from "./Localization-CkQ49EKr.mjs";
+import Q from "@mui/material/ListItemButton";
+import X from "@mui/material/ListItemIcon";
+import { b as Fe } from "./CategorySelectorDrawer-DjeHNx71.mjs";
+import { D as ae } from "./Dialog-iLlBR8TG.mjs";
+import { D as _e } from "./Drawer-XPaLYjiO.mjs";
+import yt from "@mui/material/styles/useTheme";
+import Pe from "@mui/material/InputAdornment";
+import Tt from "@mui/material/Checkbox";
+import { j as bt } from "./DateUtil-D0TO0DaZ.mjs";
+import Ne from "@mui/material/Grid";
+import { C as Ct } from "./CurrencyInput-CSJ3zMgE.mjs";
+import ft from "@mui/material/Switch";
+var de = /* @__PURE__ */ ((t) => (t[t.Category = 0] = "Category", t[t.Date = 1] = "Date", t[t.Memo = 2] = "Memo", t[t.Tags = 3] = "Tags", t))(de || {}), ie = /* @__PURE__ */ ((t) => (t[t.MerchantBudget = 0] = "MerchantBudget", t[t.SplitTransaction = 1] = "SplitTransaction", t[t.HideTransaction = 2] = "HideTransaction", t[t.MerchantLogo = 3] = "MerchantLogo", t))(ie || {});
+const St = [
+  0,
+  1,
+  2,
+  3
+  /* Tags */
+], xt = [
+  1,
+  2,
+  3
+  /* MerchantLogo */
+], At = ({
+  startDate: t,
+  onViewHistory: r,
+  totalTransaction: s,
+  amount: a,
+  spentPercentage: n,
+  remainingAmount: o,
+  iconColor: i,
+  icon: _
+}) => {
+  const { budgets: c } = O();
+  return /* @__PURE__ */ e(l.Fragment, { children: /* @__PURE__ */ m(
+    W,
+    {
+      sx: {
+        bgcolor: "background.paper",
+        borderBottomColor: "divider",
+        borderBottomStyle: "solid",
+        borderBottomWidth: 1
+      },
+      children: [
+        /* @__PURE__ */ m(
+          L,
+          {
+            sx: {
+              alignItems: "center",
+              flexDirection: "row",
+              gap: 12,
+              justifyContent: "space-between",
+              pt: 16,
+              px: 24
+            },
+            children: [
+              /* @__PURE__ */ e(ee, { bold: !0, variant: "subtitle1", children: bt(t) }),
+              r && /* @__PURE__ */ e(me, { endIcon: /* @__PURE__ */ e(Ke, {}), onClick: r, sx: { height: 28 }, children: /* @__PURE__ */ e(A, { bold: !0, variant: "body2", children: c.spending_history }) })
+            ]
+          }
+        ),
+        /* @__PURE__ */ e(
+          dt,
+          {
+            amount: /* @__PURE__ */ m(L, { sx: { alignItems: "baseline", flexDirection: "row", gap: 4 }, children: [
+              /* @__PURE__ */ e(We, { children: V(s, "0,0.00") }),
+              /* @__PURE__ */ e(ee, { color: "text.secondary", variant: "body2", children: "/" }),
+              /* @__PURE__ */ e(ee, { color: "text.secondary", variant: "body2", children: V(a, "0,0.00") })
+            ] }),
+            completeColor: `${i}.main`,
+            icon: _,
+            label: c.spent_label,
+            leftLabel: E(c.percent_spent, n.toFixed()),
+            percentComplete: n,
+            rightLabel: E(
+              c.balance_left,
+              V(o, "0,0.00")
+            ),
+            sx: {
+              pb: 24,
+              pt: 16,
+              px: 24
+            }
+          }
+        )
+      ]
+    }
+  ) });
+}, Nt = ({
+  merchantBudget: t,
+  transaction: r,
+  onClose: s,
+  isOpen: a,
+  setCurrencyDialogAction: n,
+  renderingToast: o
+}) => {
+  const { budgets: i, common: _ } = O(), { sortedTransactions: c } = R(), d = l.useMemo(() => c.reduce((h, I) => I.parent_guid ? h : h + I.amount, 0), [c]), { remainingAmount: u, spentPercentage: p, iconColor: g } = qe(
+    d,
+    t.amount ?? 0
+  );
+  return /* @__PURE__ */ m(
+    _e,
+    {
+      ariaLabelClose: _.close_aria,
+      footerStyles: {
+        px: 24,
+        py: 16
+      },
+      isOpen: a,
+      onClose: s,
+      onPrimaryAction: () => n(Ee.EDIT),
+      onSecondaryAction: () => {
+        n(Ee.DELETE);
+      },
+      primaryText: i.details_edit_button,
+      secondaryColor: "error",
+      secondaryText: i.details_delete_button,
+      sx: {
+        "& .list-wrapper": {
+          pr: 24
+        }
+      },
+      title: E(i.details_type_title, t.merchant_name),
+      children: [
+        /* @__PURE__ */ e(
+          At,
+          {
+            amount: t.amount,
+            icon: /* @__PURE__ */ e(
+              Ce,
+              {
+                categoryGuid: r.top_level_category_guid || "",
+                merchantGuid: r.merchant_guid || ""
+              }
+            ),
+            iconColor: g,
+            remainingAmount: u,
+            spentPercentage: p,
+            startDate: r.date,
+            totalTransaction: d
+          }
+        ),
+        /* @__PURE__ */ e(ut, {}),
+        o?.()
+      ]
+    }
+  );
+}, It = w(Nt);
+var Ee = /* @__PURE__ */ ((t) => (t.CREATE = "create", t.EDIT = "edit", t.DELETE = "delete", t))(Ee || {});
+const Dt = w(({ transaction: t }) => {
+  const [r, s] = l.useState(null), [a, n] = l.useState(""), [o, i] = l.useState(!1), _ = l.useRef(!1), [c, d] = l.useState(null), u = H(), {
+    addMerchantBudget: p,
+    updateMerchantBudget: g,
+    deleteMerchantBudget: h,
+    getMerchantBudgetByMerchantGuid: I,
+    alert: M,
+    setAlert: B
+  } = tt(), { setFilter: k } = R(), { accounts: f } = at(), x = u.palette.mode === "dark" ? "grey.800" : "grey.100", { budgets: y, common: Z } = O(), { announce: se, ariaLive: le } = xe(), [te, $] = l.useState(!1), b = t?.merchant_guid ? I(t.merchant_guid) : void 0, K = () => {
+    d(r), s(null), n("");
+  }, ne = () => {
+    b ? $(!0) : s(
+      "create"
+      /* CREATE */
+    );
+  }, F = {
+    create: {
+      content: E(
+        y.create_budget_content,
+        /* @__PURE__ */ e("strong", { children: t.description }),
+        `${V(t.amount, "0,0.00")}`
+      ),
+      title: y.dialog_create_budget_title,
+      primaryButtonText: y.dialog_primary_button_text,
+      errorAlertMessage: E(
+        y.alert_merchant_budget_not_created,
+        t.description
+      ),
+      errorRetryAction: () => s(
+        "create"
+        /* CREATE */
+      ),
+      successAlertMessage: E(
+        y.alert_budget_created,
+        t.description
+      ),
+      apiTrigger: async () => await p(t.merchant_guid, Number(a))
+    },
+    edit: {
+      content: E(
+        y.edit_budget_content,
+        /* @__PURE__ */ e("strong", { children: t.description })
+      ),
+      title: y.details_edit_title,
+      primaryButtonText: y.add_save_button,
+      errorAlertMessage: E(
+        y.error_alert_edit_merchant_budget,
+        t.description
+      ),
+      errorRetryAction: () => s(
+        "edit"
+        /* EDIT */
+      ),
+      successAlertMessage: E(
+        y.success_alert_edit_merchant_budget,
+        t.description
+      ),
+      apiTrigger: async () => await g({
+        ...b,
+        amount: Number(a)
+      })
+    },
+    delete: {
+      content: E(
+        y.delete_description,
+        /* @__PURE__ */ e("strong", { children: t.description })
+      ),
+      title: y.delete_title,
+      primaryButtonText: y.details_delete_button,
+      errorAlertMessage: E(
+        y.error_alert_delete_merchant_budget,
+        t.description
+      ),
+      errorRetryAction: () => s(
+        "delete"
+        /* DELETE */
+      ),
+      successAlertMessage: E(
+        y.success_alert_delete_merchant_budget,
+        t.description
+      ),
+      apiTrigger: async () => await h(b.guid)
+    }
+  }, oe = async () => {
+    if (_.current) return;
+    _.current = !0;
+    const { apiTrigger: v, successAlertMessage: S, errorAlertMessage: T } = F[r], { isSuccess: D } = await v(), J = D ? S : T;
+    K(), i(!D), B(J), se(J), D && r === "delete" && $(!1), _.current = !1;
+  };
+  l.useEffect(() => {
+    const v = {
+      start: De(new Date(t.date * 1e3)),
+      end: Be(new Date(t.date * 1e3))
+    };
+    te && k({
+      accounts: f.map((S) => S.guid),
+      custom: te ? (S) => S.merchant_guid === t.merchant_guid : (S) => S.guid === t.guid,
+      dateRange: v
+    });
+  }, [te, t, f]);
+  const N = () => /* @__PURE__ */ e(
+    Ye,
+    {
+      actionText: y.autogenerate_budgets_error_primary_button,
+      autoHideDuration: 3500,
+      closeAriaLabel: Z.close_aria,
+      handleClose: () => B(""),
+      message: M,
+      onActionClick: F[c]?.errorRetryAction,
+      open: !!M,
+      severity: o ? "error" : "success",
+      showAction: o,
+      showClose: !0
+    }
+  );
+  return /* @__PURE__ */ m(l.Fragment, { children: [
+    le,
+    /* @__PURE__ */ e(U, { disableGutters: !0, disablePadding: !0, children: /* @__PURE__ */ m(Q, { onClick: ne, children: [
+      /* @__PURE__ */ e(q, { children: /* @__PURE__ */ e(j, { sx: { bgcolor: x }, variant: "rounded", children: /* @__PURE__ */ e(P, { name: "bubble_chart", sx: { color: "text.primary" } }) }) }),
+      /* @__PURE__ */ e(
+        z,
+        {
+          primary: y.add_merchant_budget_primary_text,
+          primaryTypographyProps: { variant: "caption" },
+          secondary: /* @__PURE__ */ e(A, { bold: !0, sx: { color: "text.primary" }, variant: "body1", children: b ? `${V(b.amount, "0,0.00")} / ${Z.month_text}` : y.add_merchant_budget_secondary_text })
+        }
+      ),
+      /* @__PURE__ */ e(X, { children: /* @__PURE__ */ e(P, { name: "chevron_right", sx: { color: "text.primary" } }) })
+    ] }) }),
+    !!b && /* @__PURE__ */ e(
+      It,
+      {
+        isOpen: te,
+        merchantBudget: b,
+        onClose: () => $(!1),
+        renderingToast: () => M && N(),
+        setCurrencyDialogAction: (v) => {
+          v === "edit" && n(b?.amount.toString() || ""), s(v);
+        },
+        transaction: t
+      }
+    ),
+    r && /* @__PURE__ */ e(
+      Qe,
+      {
+        closeAriaLabel: Z.close_aria,
+        content: F[r].content,
+        handleInputChange: n,
+        handleModalClose: K,
+        handlePrimaryAction: oe,
+        handleSecondaryAction: K,
+        inputLabel: r !== "delete" ? Z.amount_text : "",
+        inputValue: a,
+        isOpen: !!r,
+        primaryText: F[r].primaryButtonText,
+        secondaryText: Z.cancel_button,
+        title: F[r].title
+      }
+    ),
+    !!M && N()
+  ] });
+}), vt = ({ transaction: t }) => {
+  const { addOrUpdateTransactionRule: r, updateTransaction: s } = R(), { categories: a } = we(), { onEvent: n } = G(), { setShouldDisableDrawerScroll: o, updateManualTransaction: i } = re(), { transactions: _ } = O(), c = H(), [d, u] = l.useState(!1), [p, g] = l.useState(""), h = async (f) => {
+    await s({ ...t, category_guid: p }), f && await r(p, t), g(""), n(Y.TRANSACTION_DETAILS_CLICK_CATEGORY, {
+      transaction_guid: t.guid
+    });
+  }, I = (f) => {
+    if (t.is_manual && !t.guid) {
+      const x = a.find((y) => y.guid === f);
+      i({
+        ...t,
+        category: x?.name,
+        category_guid: f,
+        top_level_category_guid: x?.parent_guid || f
+      });
+    } else
+      g(f);
+    M();
+  }, M = () => {
+    u(!1), o(!1);
+  }, B = l.useMemo(
+    () => a.find((f) => f.guid === p),
+    [p]
+  ), k = c.palette.mode === "dark" ? "grey.800" : "grey.100";
+  return /* @__PURE__ */ m(U, { disableGutters: !0, disablePadding: !0, children: [
+    /* @__PURE__ */ m(
+      Q,
+      {
+        onClick: () => {
+          n(C.ON_TRANSACTION_CATEGORY_CLICK), u(!0);
+        },
+        children: [
+          /* @__PURE__ */ e(q, { children: /* @__PURE__ */ e(j, { sx: { bgcolor: k }, variant: "rounded", children: /* @__PURE__ */ e(
+            Oe,
+            {
+              categoryGuid: t.top_level_category_guid,
+              size: 24,
+              sx: { color: "text.primary" },
+              variant: Ge.Transparent
+            }
+          ) }) }),
+          /* @__PURE__ */ e(
+            z,
+            {
+              primary: _.category_title,
+              primaryTypographyProps: { variant: "caption" },
+              secondary: /* @__PURE__ */ e(A, { bold: !0, sx: { color: "text.primary" }, variant: "body1", children: t.category ?? _.actions_select_a_category })
+            }
+          ),
+          /* @__PURE__ */ e(X, { children: /* @__PURE__ */ e(P, { name: "chevron_right", sx: { color: "text.primary" } }) })
+        ]
+      }
+    ),
+    /* @__PURE__ */ e(
+      Fe,
+      {
+        initialSelected: t.category_guid,
+        onClose: M,
+        onSelect: I,
+        showDrawer: d,
+        title: _.actions_select_a_category
+      }
+    ),
+    /* @__PURE__ */ e(
+      ae,
+      {
+        copy: {
+          title: E(
+            _.actions_apply_to_all_transaction_types,
+            t.description
+          )
+        },
+        isOpen: !!p,
+        onClose: () => g(""),
+        onPrimaryAction: () => h(!0),
+        onSecondaryAction: () => h(!1),
+        primaryText: _.actions_apply_to_all,
+        secondaryText: _.actions_this_time_only,
+        children: /* @__PURE__ */ e(ee, { variant: "subtitle1", children: E(
+          _.actions_all_past_and_future,
+          t.description,
+          B?.name
+        ) })
+      }
+    )
+  ] });
+}, Et = ({ transaction: t }) => {
+  const { onEvent: r } = G(), { updateTransaction: s } = R(), { updateManualTransaction: a } = re(), { common: n, transactions: o } = O(), i = H(), [_, c] = l.useState(!1), [d, u] = l.useState(t.date), p = (I) => {
+    u(Ie(I));
+  }, g = async () => {
+    if (t.is_manual && !t.guid) {
+      a({ ...t, date: d }), c(!1);
+      return;
+    }
+    await s({ ...t, date: d }), r(Y.TRANSACTION_DETAILS_CLICK_DATE, { transaction_guid: t.guid }), c(!1);
+  }, h = i.palette.mode === "dark" ? "grey.800" : "grey.100";
+  return /* @__PURE__ */ m(U, { className: "mx-txn-date-action", disableGutters: !0, disablePadding: !0, children: [
+    /* @__PURE__ */ m(
+      Q,
+      {
+        onClick: () => {
+          r(C.ON_TRANSACTION_DATE_CLICK), c(!0);
+        },
+        children: [
+          /* @__PURE__ */ e(q, { children: /* @__PURE__ */ e(j, { sx: { bgcolor: h }, variant: "rounded", children: /* @__PURE__ */ e(P, { name: "calendar_month", sx: { color: "text.primary" } }) }) }),
+          /* @__PURE__ */ e(
+            z,
+            {
+              primary: o.date_title,
+              primaryTypographyProps: { variant: "caption" },
+              secondary: /* @__PURE__ */ e(A, { bold: !0, sx: { color: "text.primary" }, variant: "body1", children: Me(ve(t.date), Re.YEAR_MONTH_DAY) })
+            }
+          ),
+          /* @__PURE__ */ e(X, { children: /* @__PURE__ */ e(P, { name: "chevron_right", sx: { color: "text.primary" } }) })
+        ]
+      }
+    ),
+    /* @__PURE__ */ e(
+      _e,
+      {
+        ariaLabelClose: n.close_aria,
+        isOpen: _,
+        onClose: () => c(!1),
+        onPrimaryAction: g,
+        primaryText: n.save_button,
+        secondaryText: n.cancel_button,
+        title: o.date_edit_title,
+        children: /* @__PURE__ */ e(L, { alignItems: "center", mt: 40, children: /* @__PURE__ */ e(
+          Xe,
+          {
+            beginDate: ve(d),
+            copy: {
+              nextAria: o.date_next_aria,
+              prevAria: o.date_prev_aria,
+              today: n.date_range_picker.today
+            },
+            onDateSelected: p,
+            selectionType: Ze.Single
+          }
+        ) })
+      }
+    )
+  ] });
+}, Ot = ({ transaction: t }) => {
+  const { onEvent: r } = G(), { removeTransaction: s } = R(), { setShouldDisableDrawerScroll: a } = re(), { common: n, transactions: o } = O(), [i, _] = l.useState(!1), c = async () => {
+    await s(t.guid), r(C.ON_TRANSACTION_DELETE_DELETED);
+  };
+  return /* @__PURE__ */ m(W, { className: "mx-txn-delete", children: [
+    t && /* @__PURE__ */ e(U, { disableGutters: !0, disablePadding: !0, children: /* @__PURE__ */ m(
+      Q,
+      {
+        onClick: () => {
+          r(C.ON_TRANSACTION_DELETE_CLICK), a(!0), _(!0);
+        },
+        children: [
+          /* @__PURE__ */ e(q, { children: /* @__PURE__ */ e(j, { variant: "rounded", children: /* @__PURE__ */ e(fe, { color: "secondary", fontSize: "small" }) }) }),
+          /* @__PURE__ */ e(
+            z,
+            {
+              primary: o.manual_transaction_delete_title,
+              secondary: o.manual_transaction_delete_subtitle
+            }
+          ),
+          /* @__PURE__ */ e(X, { children: /* @__PURE__ */ e(fe, {}) })
+        ]
+      }
+    ) }),
+    /* @__PURE__ */ e(
+      ae,
+      {
+        copy: { title: o.manual_transaction_delete_title },
+        isOpen: i,
+        onClose: () => {
+          a(!1), _(!1);
+        },
+        onPrimaryAction: c,
+        onSecondaryAction: () => r(C.ON_TRANSACTION_DELETE_CANCEL),
+        primaryText: n.delete_button,
+        secondaryText: n.cancel_button,
+        children: /* @__PURE__ */ e(A, { sx: { whiteSpace: "normal" }, variant: "subtitle1", children: o.manual_transaction_delete_description })
+      }
+    )
+  ] });
+}, Lt = w(Ot), wt = ({ transaction: t }) => {
+  const { onEvent: r } = G(), { updateTransaction: s } = R(), { setShouldDisableDrawerScroll: a } = re(), { common: n, transactions: o } = O(), i = H(), [_, c] = l.useState(!1), d = async () => {
+    await s({ ...t, merchant_guid: "" }), r(Y.TRANSACTION_DETAILS_CLICK_DELETE_LOGO, {
+      transaction_guid: t.guid
+    });
+  }, u = i.palette.mode === "dark" ? "grey.800" : "grey.100";
+  return /* @__PURE__ */ e(l.Fragment, { children: t && /* @__PURE__ */ m(U, { className: "mx-txn-delete-logo", disableGutters: !0, disablePadding: !0, children: [
+    /* @__PURE__ */ m(
+      Q,
+      {
+        onClick: () => {
+          r(C.ON_TRANSACTION_DELETE_LOGO_CLICK), c(!0);
+        },
+        children: [
+          /* @__PURE__ */ e(q, { children: /* @__PURE__ */ e(j, { sx: { bgcolor: u }, variant: "rounded", children: /* @__PURE__ */ e(P, { name: "delete", sx: { color: "text.primary" } }) }) }),
+          /* @__PURE__ */ e(z, { primary: o.merchant_logo_title, secondary: o.merchant_logo_desc }),
+          /* @__PURE__ */ e(X, { children: /* @__PURE__ */ e(P, { name: "chevron_right", sx: { color: "text.primary" } }) })
+        ]
+      }
+    ),
+    /* @__PURE__ */ m(
+      ae,
+      {
+        copy: { title: o.merchant_logo_modal_title },
+        isOpen: _,
+        onClose: () => {
+          a(!1), c(!1);
+        },
+        onPrimaryAction: d,
+        onSecondaryAction: () => r(C.ON_TRANSACTION_DELETE_LOGO_CANCEL),
+        primaryText: n.delete_button,
+        secondaryText: n.cancel_button,
+        title: o.merchant_logo_modal_title,
+        children: [
+          /* @__PURE__ */ e(A, { sx: { whiteSpace: "normal" }, variant: "subtitle1", children: o.merchant_logo_modal_desc }),
+          /* @__PURE__ */ e(A, { bold: !0, sx: { whiteSpace: "normal" }, variant: "subtitle1", children: ` ${o.merchant_logo_modal_desc_bold}` })
+        ]
+      }
+    )
+  ] }) });
+}, Mt = w(wt), Rt = ({ transaction: t }) => {
+  const { onEvent: r } = G(), { setAlert: s, updateTransaction: a } = R(), { setShouldDisableDrawerScroll: n } = re(), { common: o, transactions: i } = O(), _ = H(), [c, d] = l.useState(!1), u = t.is_hidden, p = async () => {
+    try {
+      await a({ ...t, is_hidden: !t.is_hidden }), r(
+        u ? C.ON_TRANSACTION_UNHIDDEN : C.ON_TRANSACTION_HIDDEN
+      ), s(u ? i.transaction_included : i.transaction_excluded);
+    } catch {
+      s(u ? i.transaction_not_included : i.transaction_not_excluded);
+    }
+  }, g = _.palette.mode === "dark" ? "grey.800" : "grey.100";
+  return /* @__PURE__ */ e(l.Fragment, { children: t && /* @__PURE__ */ m(U, { className: "mx-txn-hide-transaction", disableGutters: !0, disablePadding: !0, children: [
+    /* @__PURE__ */ m(
+      Q,
+      {
+        "aria-checked": u,
+        "aria-labelledby": "hide-transaction-text",
+        onClick: () => {
+          r(
+            u ? C.ON_TRANSACTION_UNHIDE_CLICK : C.ON_TRANSACTION_HIDE_CLICK
+          ), r(
+            u ? "transaction_details_click_unhide_transaction" : "transaction_details_click_hide_transaction",
+            {
+              transaction_guid: t.guid
+            }
+          ), d(!0);
+        },
+        role: "switch",
+        children: [
+          /* @__PURE__ */ e(q, { children: /* @__PURE__ */ e(j, { sx: { bgcolor: g }, variant: "rounded", children: u ? /* @__PURE__ */ e(P, { name: "visibility_off", sx: { color: "text.primary" } }) : /* @__PURE__ */ e(P, { name: "visibility", sx: { color: "text.primary" } }) }) }),
+          /* @__PURE__ */ e(
+            z,
+            {
+              id: "hide-transaction-text",
+              primary: i.exclude_transaction,
+              secondary: i.excluding_transaction
+            }
+          ),
+          /* @__PURE__ */ e(X, { "aria-hidden": "true", children: /* @__PURE__ */ e(
+            ft,
+            {
+              checked: u,
+              inputProps: { tabIndex: -1 },
+              sx: { pointerEvents: "none" },
+              tabIndex: -1
+            }
+          ) })
+        ]
+      }
+    ),
+    /* @__PURE__ */ e(
+      ae,
+      {
+        copy: {
+          title: u ? i.include_transaction : i.exclude_transaction
+        },
+        isOpen: c,
+        onClose: () => {
+          n(!1), d(!1);
+        },
+        onPrimaryAction: p,
+        onSecondaryAction: () => r(
+          u ? C.ON_TRANSACTION_UNHIDE_CANCEL_CLICK : C.ON_TRANSACTION_HIDE_CANCEL_CLICK
+        ),
+        primaryText: u ? i.include : i.exclude,
+        secondaryText: o.cancel_button,
+        children: /* @__PURE__ */ e(A, { truncate: !1, variant: "subtitle1", children: u ? i.including_transaction : i.excluding_transaction })
+      }
+    )
+  ] }) });
+}, kt = w(Rt), He = ({ transaction: t }) => {
+  const { amount: r, description: s, isIncome: a, merchant_guid: n, payee: o, top_level_category_guid: i } = t;
+  return /* @__PURE__ */ m(L, { className: "mx-txn-amount-header", direction: "row", gap: 12, px: 16, py: 24, children: [
+    /* @__PURE__ */ e(
+      Ce,
+      {
+        categoryGuid: i || "",
+        merchantGuid: n || "",
+        size: 64
+      }
+    ),
+    /* @__PURE__ */ m(L, { overflow: "hidden'", children: [
+      /* @__PURE__ */ e(A, { bold: !0, mb: 4, truncate: !0, variant: "body1", children: s || o }),
+      /* @__PURE__ */ m(ee, { color: a ? "success.main" : "text.primary", truncate: !0, variant: "h1", children: [
+        a ? "+" : "",
+        V(r, "0,0.00")
+      ] })
+    ] })
+  ] });
+}, Pt = ({ transaction: t }) => {
+  const { onEvent: r } = G(), { updateTransaction: s } = R(), { updateManualTransaction: a } = re(), { common: n, transactions: o } = O(), i = H(), [_, c] = l.useState(!1), [d, u] = l.useState("");
+  l.useEffect(() => {
+    _ && u(t.memo ? t.memo : "");
+  }, [_]);
+  const p = async () => {
+    if (t.is_manual && !t.guid) {
+      a({ ...t, memo: d }), c(!1);
+      return;
+    }
+    await s({ ...t, memo: d }), r(Y.TRANSACTION_DETAILS_CLICK_MEMO, { transaction_guid: t.guid }), c(!1);
+  }, g = i.palette.mode === "dark" ? "grey.800" : "grey.100";
+  return /* @__PURE__ */ m(U, { className: "mx-txn-memo-action", disableGutters: !0, disablePadding: !0, children: [
+    /* @__PURE__ */ m(
+      Q,
+      {
+        onClick: () => {
+          r(C.ON_TRANSACTION_MEMO_CLICK), c(!0);
+        },
+        children: [
+          /* @__PURE__ */ e(q, { children: /* @__PURE__ */ e(j, { sx: { bgcolor: g }, variant: "rounded", children: /* @__PURE__ */ e(P, { name: "article", sx: { color: "text.primary" } }) }) }),
+          /* @__PURE__ */ e(
+            z,
+            {
+              primary: o.memo_title,
+              primaryTypographyProps: { variant: "caption" },
+              secondary: /* @__PURE__ */ e(
+                A,
+                {
+                  bold: !0,
+                  sx: { overflowWrap: "break-word", whiteSpace: "wrap", color: "text.primary" },
+                  variant: "body1",
+                  children: t.memo ? t.memo : o.memo_desc
+                }
+              )
+            }
+          ),
+          /* @__PURE__ */ e(X, { children: /* @__PURE__ */ e(P, { name: "chevron_right", sx: { color: "text.primary" } }) })
+        ]
+      }
+    ),
+    /* @__PURE__ */ m(
+      _e,
+      {
+        ariaLabelClose: n.close_aria,
+        isOpen: _,
+        onClose: () => c(!1),
+        onPrimaryAction: p,
+        title: o.memo_title,
+        children: [
+          /* @__PURE__ */ e(He, { transaction: t }),
+          /* @__PURE__ */ e(
+            $e,
+            {
+              "aria-label": o.memo_desc_aria,
+              focused: !0,
+              multiline: !0,
+              name: "memo",
+              onChange: (h) => u(h.target.value),
+              placeholder: o.memo_desc,
+              rows: 4,
+              sx: { mx: 16, width: "calc(100% - 32px)" },
+              value: d
+            }
+          )
+        ]
+      }
+    )
+  ] });
+}, Gt = w(Pt), Bt = ({
+  index: t,
+  onDeleteRow: r,
+  onCategoryChanged: s,
+  onUpdateAmount: a,
+  split: n
+}) => {
+  const { onEvent: o } = G(), { transactions: i } = O(), [_, c] = l.useState(`${n.amount}`), [d, u] = l.useState(!1), p = t === 0, g = (h) => {
+    isNaN(Number(h)) || (c(h), a(t, Number(h)));
+  };
+  return /* @__PURE__ */ m(W, { bgcolor: "background.paper", className: "mx-txn-split-manager-row", pb: 4, px: 8, children: [
+    /* @__PURE__ */ m(Ne, { alignItems: p ? "center" : "start", container: !0, children: [
+      /* @__PURE__ */ e(Ne, { item: !0, xs: 7, children: /* @__PURE__ */ m(L, { alignItems: "start", children: [
+        /* @__PURE__ */ e(
+          me,
+          {
+            endIcon: /* @__PURE__ */ e(Ke, {}),
+            onClick: () => u(!0),
+            startIcon: /* @__PURE__ */ e(Oe, { categoryGuid: n.top_level_category_guid }),
+            sx: { px: 12, py: 8 },
+            children: n.category
+          }
+        ),
+        /* @__PURE__ */ e(W, { children: !n.category_guid && /* @__PURE__ */ m(L, { color: "error.main", direction: "row", gap: 8, p: 12, children: [
+          /* @__PURE__ */ e("span", { "aria-label": "error", role: "img", children: /* @__PURE__ */ e(Se, { sx: { fontSize: 15 } }) }),
+          /* @__PURE__ */ e(A, { variant: "body2", children: i.split_transaction_errors_select_category })
+        ] }) })
+      ] }) }),
+      /* @__PURE__ */ e(Ne, { item: !0, xs: 5, children: p ? /* @__PURE__ */ e("div", { className: "mx-txn-split-manager-row-top-container", children: /* @__PURE__ */ e(A, { children: V(n.amount, "0,0.00") }) }) : /* @__PURE__ */ m(L, { alignItems: "start", children: [
+        /* @__PURE__ */ m(L, { alignItems: "start", direction: "row", gap: 8, children: [
+          /* @__PURE__ */ e(
+            Ct,
+            {
+              amount: _,
+              ariaLabel: i.split_transaction_edit_split_amount,
+              label: i.split_transaction_edit_split_amount,
+              minAmount: 0.01,
+              name: "split-amount-input",
+              setAmount: g,
+              sx: {
+                ".MuiOutlinedInput-input": { p: 12 }
+              },
+              type: "number"
+            }
+          ),
+          /* @__PURE__ */ e(
+            ue,
+            {
+              "aria-label": i.split_transaction_delete_split_btn,
+              color: "secondary",
+              onClick: () => {
+                o(C.ON_TRANSACTION_SPLIT_DELETE_CLICK), r(t);
+              },
+              sx: { w: 44, h: 44 },
+              children: /* @__PURE__ */ e(fe, {})
+            }
+          )
+        ] }),
+        !_ && /* @__PURE__ */ m(L, { color: "error.main", direction: "row", gap: 8, py: 12, children: [
+          /* @__PURE__ */ e("span", { "aria-label": "error", role: "img", children: /* @__PURE__ */ e(Se, { sx: { fontSize: 15 } }) }),
+          /* @__PURE__ */ e(A, { variant: "body2", children: i.split_transaction_errors_enter_an_amount })
+        ] })
+      ] }) })
+    ] }),
+    /* @__PURE__ */ e(
+      Fe,
+      {
+        initialSelected: n.category_guid,
+        onClose: () => u(!1),
+        onSelect: (h) => {
+          s(t, h), u(!1);
+        },
+        showDrawer: d,
+        title: i.actions_select_a_category
+      }
+    )
+  ] });
+}, $t = w(Bt), Kt = ({
+  onAddSplit: t,
+  onCategoryChanged: r,
+  onDeleteSplit: s,
+  onUpdateAmount: a,
+  splits: n,
+  transaction: o
+}) => {
+  const { transactions: i } = O(), { onEvent: _ } = G(), [c, d] = l.useState(""), { announce: u, ariaLive: p } = xe();
+  return l.useEffect(() => {
+    if (n.length <= 1)
+      d(i.split_transaction_errors_min_splits), u(i.split_transaction_errors_min_splits);
+    else if (n[0].amount < 0) {
+      const g = E(
+        i.split_transaction_errors_totals_must_equal_amount,
+        V(o.amount, "0,0.00")
+      );
+      d(g), u(g);
+    } else
+      d(""), u("");
+  }, [n]), /* @__PURE__ */ m(W, { className: "mx-txn-split-manager", children: [
+    p,
+    n.map((g, h) => /* @__PURE__ */ e(
+      $t,
+      {
+        index: h,
+        onCategoryChanged: r,
+        onDeleteRow: s,
+        onUpdateAmount: a,
+        split: g
+      },
+      h
+    )),
+    c && /* @__PURE__ */ m(L, { bgcolor: "background.paper", color: "error.main", direction: "row", gap: 8, p: 16, children: [
+      /* @__PURE__ */ e("span", { "aria-label": "error", role: "img", children: /* @__PURE__ */ e(Se, { sx: { fontSize: 15 } }) }),
+      /* @__PURE__ */ e(A, { variant: "body2", children: c })
+    ] }),
+    /* @__PURE__ */ e(W, { p: 16, children: /* @__PURE__ */ e(
+      me,
+      {
+        "aria-label": i.split_transaction_add_split_btn,
+        onClick: () => {
+          _(C.ON_TRANSACTION_SPLIT_ADD_CLICK), t();
+        },
+        children: i.split_transaction_add_split_btn
+      }
+    ) })
+  ] });
+}, Ft = w(Kt), Ht = ({ transaction: t }) => {
+  const { onEvent: r } = G(), { announce: s, ariaLive: a } = xe(), { splitTransaction: n, unSplitTransaction: o } = R(), { common: i, transactions: _ } = O(), { setShouldDisableDrawerScroll: c } = re(), { categories: d } = we(), u = H(), p = {
+    ...t,
+    amount: t.amount - 1,
+    guid: "",
+    has_been_split: !1,
+    parent_guid: t.guid
+  }, g = {
+    ...t,
+    amount: 1,
+    category_guid: void 0,
+    category: _.split_transaction_select_category_btn,
+    guid: "",
+    has_been_split: !1,
+    parent_guid: t.guid,
+    top_level_category_guid: void 0
+  }, [h, I] = l.useState(!1), [M, B] = l.useState(!1), [k, f] = l.useState(!1), [x, y] = l.useState([]), Z = () => {
+    const N = [...x];
+    N.push({ ...g }), N[0].amount -= 1, y(N), s(
+      E(
+        _.split_transaction_add_split_announcement,
+        N.length
+      )
+    );
+  }, se = (N) => {
+    if (N > 0) {
+      const v = x[N], S = [...x];
+      S.splice(N, 1), S[0].amount += v.amount, y(S), s(
+        E(_.split_transaction_delete_split_announcement, N + 1)
+      );
+    }
+  }, le = (N, v) => {
+    const S = [...x];
+    S[N].amount = v, S[0].amount = t.amount - S.reduce(
+      (T, D, J) => T + (J !== 0 ? D.amount : 0),
+      0
+    ), y(S);
+  }, te = (N, v) => {
+    const S = [...x], T = d.find((D) => D.guid === v);
+    T && (S[N] = {
+      ...S[N],
+      category_guid: v,
+      category: T.name,
+      top_level_category_guid: T.parent_guid || v
+    }, y(S), s(
+      E(
+        _.split_transaction_select_category_announcement,
+        T.name,
+        N + 1
+      )
+    ));
+  }, $ = () => {
+    if (t.parent_guid || t.has_been_split) {
+      B(!0);
+      return;
+    }
+    y([{ ...p }, { ...g }]), r(Y.TRANSACTION_DETAILS_CLICK_SPLIT, {
+      transaction_guid: t.guid
+    }), I(!0);
+  }, b = async () => {
+    if (!k) {
+      f(!0);
+      try {
+        r(C.ON_TRANSACTION_SPLIT_SAVE_CLICK), await n({ ...t, has_been_split: !0 }, x), I(!1);
+      } finally {
+        f(!1);
+      }
+    }
+  }, K = async () => {
+    k || (r(C.ON_TRANSACTION_SPLIT_CANCEL_CLICK), y([{ ...p }, { ...g }]), f(!1), I(!1));
+  }, ne = async () => {
+    r(Y.TRANSACTION_DETAILS_CLICK_UNSPLIT, {
+      transaction_guid: t.guid
+    });
+    const N = t.parent_guid ?? t.guid;
+    await o(N);
+  }, F = l.useMemo(() => {
+    const N = x.some((S) => !S.category_guid), v = x.some((S) => S.amount <= 0);
+    return N || v;
+  }, [x]), oe = u.palette.mode === "dark" ? "grey.800" : "grey.100";
+  return /* @__PURE__ */ e(l.Fragment, { children: t && /* @__PURE__ */ m(U, { disableGutters: !0, disablePadding: !0, children: [
+    /* @__PURE__ */ m(Q, { onClick: $, children: [
+      /* @__PURE__ */ e(q, { children: /* @__PURE__ */ e(j, { sx: { bgcolor: oe }, variant: "rounded", children: /* @__PURE__ */ e(P, { name: "call_split", sx: { color: "text.primary" } }) }) }),
+      /* @__PURE__ */ e(
+        z,
+        {
+          primary: t.has_been_split || t.parent_guid ? _.split_transaction_unsplit_title : _.split_transaction_title,
+          secondary: t.has_been_split || t.parent_guid ? _.split_transaction_unsplit_subtitle : _.split_transaction_desc
+        }
+      ),
+      /* @__PURE__ */ e(X, { children: t.has_been_split || t.parent_guid ? /* @__PURE__ */ e(P, { name: "delete" }) : /* @__PURE__ */ e(P, { name: "chevron_right", sx: { color: "text.primary" } }) })
+    ] }),
+    /* @__PURE__ */ m(
+      _e,
+      {
+        ariaLabelClose: i.close_aria,
+        isOpen: h,
+        isPrimaryDisabled: F || k,
+        onClose: K,
+        onPrimaryAction: b,
+        primaryText: i.save_button,
+        secondaryText: i.cancel_button,
+        title: _.split_transaction_title,
+        children: [
+          a,
+          /* @__PURE__ */ e(He, { transaction: t }),
+          /* @__PURE__ */ e(
+            Ft,
+            {
+              onAddSplit: Z,
+              onCategoryChanged: te,
+              onDeleteSplit: se,
+              onUpdateAmount: le,
+              splits: x,
+              transaction: t
+            }
+          )
+        ]
+      }
+    ),
+    /* @__PURE__ */ e(
+      ae,
+      {
+        copy: { title: _.split_transaction_unsplit_title },
+        isOpen: M,
+        onClose: () => {
+          c(!1), B(!1);
+        },
+        onPrimaryAction: ne,
+        onSecondaryAction: () => {
+          r(C.ON_TRANSACTION_UNSPLIT_CANCEL);
+        },
+        primaryText: i.delete_button,
+        secondaryText: i.cancel_button,
+        children: /* @__PURE__ */ e(ee, { variant: "subtitle1", children: E(
+          _.split_transaction_unsplit_description,
+          t.description
+        ) })
+      }
+    )
+  ] }) });
+}, Ut = w(Ht), zt = () => {
+  const t = yt(), { onEvent: r } = G(), { addTag: s } = R(), { transactions: a } = O(), [n, o] = l.useState(!1), [i, _] = l.useState(""), [c, d] = l.useState(""), u = l.useRef(null);
+  l.useEffect(() => {
+    n && u?.current?.focus();
+  }, [n]);
+  const p = () => {
+    r(
+      n ? C.ON_TRANSACTION_TAGS_TAG_ADD_CANCEL_CLICK : C.ON_TRANSACTION_TAGS_TAG_ADD_CLICK
+    ), n || _(""), o(!n);
+  }, g = async () => {
+    r(C.ON_TRANSACTION_TAGS_TAG_ADDED), await s(i), o(!1);
+  };
+  return l.useEffect(() => {
+    d(i.length > 40 ? a.tags_error_name_must_be_40_chars : "");
+  }, [i]), /* @__PURE__ */ m(W, { className: "mx-txn-tag-manager-header", children: [
+    /* @__PURE__ */ m(
+      L,
+      {
+        alignItems: "center",
+        bgcolor: t.palette.background.default,
+        direction: "row",
+        justifyContent: "space-between",
+        px: 24,
+        py: 16,
+        children: [
+          /* @__PURE__ */ e(A, { bold: !0, children: a.tags_your_tags }),
+          /* @__PURE__ */ e(
+            me,
+            {
+              "aria-expanded": n,
+              "aria-label": a.tags_add_tag_btn_aria,
+              onClick: p,
+              children: a.tags_add_tag_btn
+            }
+          )
+        ]
+      }
+    ),
+    /* @__PURE__ */ m(
+      ae,
+      {
+        copy: { title: a.tags_add_tag_btn },
+        isOpen: n,
+        onClose: () => o(!1),
+        onPrimaryAction: g,
+        onSecondaryAction: () => o(!1),
+        children: [
+          /* @__PURE__ */ e(
+            Le,
+            {
+              "aria-label": a.tags_placeholder,
+              name: "add-tag",
+              onChange: (h) => _(h.target.value),
+              placeholder: a.tags_placeholder,
+              sx: { width: "100%" },
+              value: i
+            }
+          ),
+          /* @__PURE__ */ e(ee, { id: "add-tag-error", sx: { color: "error.main" }, variant: "subtitle2", children: c })
+        ]
+      }
+    )
+  ] });
+}, Vt = w(zt), Wt = ({ onSearchValueChanged: t, searchValue: r }) => {
+  const { common: s, transactions: a } = O(), n = /* @__PURE__ */ e(
+    ue,
+    {
+      "aria-label": a.tags_cancel_search || "Search",
+      onClick: () => t(""),
+      children: /* @__PURE__ */ e(Se, {})
+    }
+  );
+  return /* @__PURE__ */ e(W, { className: "mx-txn-tag-manager-search", px: 24, py: 16, children: /* @__PURE__ */ e(
+    Le,
+    {
+      InputProps: {
+        startAdornment: /* @__PURE__ */ e(Pe, { position: "start", children: /* @__PURE__ */ e(it, { color: "disabled" }) }),
+        endAdornment: /* @__PURE__ */ e(Pe, { position: "end", sx: { padding: 0 }, children: r ? n : null })
+      },
+      "aria-label": s.search_aria,
+      name: "search",
+      onChange: (o) => t(o.target.value),
+      placeholder: s.search_placeholder,
+      sx: { bgcolor: "background.paper", width: "100%" },
+      value: r
+    }
+  ) });
+}, Yt = w(Wt), jt = ({ onTagChecked: t, selectedTags: r, tag: s }) => {
+  const { onEvent: a } = G(), { removeTag: n, updateTag: o } = R(), { common: i, transactions: _ } = O(), [c, d] = l.useState(!1), [u, p] = l.useState(!1), [g, h] = l.useState(""), [I, M] = l.useState(""), B = async () => {
+    a(C.ON_TRANSACTION_TAGS_TAG_EDIT_SAVED), s && await o({ ...s, name: g }), d(!1);
+  }, k = async () => {
+    a(C.ON_TRANSACTION_TAGS_TAG_DELETED), await n(s.guid), p(!1);
+  };
+  l.useEffect(() => {
+    M(g.length > 40 ? _.tags_error_name_must_be_40_chars : "");
+  }, [g]);
+  const f = () => {
+    a(C.ON_TRANSACTION_TAGS_TAG_EDIT_CLICK), h(s.name), d(!0);
+  }, x = () => {
+    a(C.ON_TRANSACTION_TAGS_TAG_DELETE_CLICK), p(!0);
+  };
+  return /* @__PURE__ */ m(
+    U,
+    {
+      className: "mx-txn-transaction-manager-row",
+      disableGutters: !0,
+      disablePadding: !0,
+      secondaryAction: !s.is_default_tag && /* @__PURE__ */ m(L, { direction: "row", children: [
+        /* @__PURE__ */ e(
+          ue,
+          {
+            "aria-label": `Edit ${s.name} tag`,
+            color: "secondary",
+            onClick: f,
+            children: /* @__PURE__ */ e(st, { color: "secondary" })
+          }
+        ),
+        /* @__PURE__ */ e(
+          ue,
+          {
+            "aria-label": `Delete ${s.name} tag`,
+            color: "secondary",
+            onClick: x,
+            children: /* @__PURE__ */ e(fe, { color: "secondary" })
+          }
+        )
+      ] }),
+      children: [
+        /* @__PURE__ */ m(
+          Q,
+          {
+            "aria-checked": r.includes(s.guid),
+            onClick: () => t(s.guid),
+            role: "checkbox",
+            children: [
+              /* @__PURE__ */ e(X, { sx: { ml: 0 }, children: /* @__PURE__ */ e(
+                Tt,
+                {
+                  "aria-hidden": !0,
+                  checked: r.includes(s.guid),
+                  edge: "start",
+                  tabIndex: -1
+                }
+              ) }),
+              /* @__PURE__ */ e(z, { children: s.name })
+            ]
+          }
+        ),
+        /* @__PURE__ */ m(
+          ae,
+          {
+            copy: { title: "Update tag name" },
+            isOpen: c,
+            onClose: () => d(!1),
+            onPrimaryAction: B,
+            onSecondaryAction: () => d(!1),
+            children: [
+              /* @__PURE__ */ e(
+                Le,
+                {
+                  "aria-describedby": I ? "update-tag-error" : void 0,
+                  "aria-label": _.tags_update_the_tag_name,
+                  name: "update-tag",
+                  onChange: (y) => h(y.target.value),
+                  placeholder: "Tag name",
+                  sx: { width: "100%" },
+                  value: g
+                }
+              ),
+              /* @__PURE__ */ e(ee, { id: "update-tag-error", sx: { color: "error.main" }, variant: "subtitle2", children: I })
+            ]
+          }
+        ),
+        /* @__PURE__ */ e(
+          ae,
+          {
+            copy: { title: _.tags_delete_title },
+            isOpen: u,
+            onClose: () => p(!1),
+            onPrimaryAction: k,
+            onSecondaryAction: () => a(C.ON_TRANSACTION_TAGS_TAG_DELETE_CANCEL_CLICK),
+            primaryText: i.delete_button,
+            secondaryText: i.cancel_button,
+            children: /* @__PURE__ */ e(A, { truncate: !1, children: _.tags_deleting_this_tag_will_remove_it })
+          }
+        )
+      ]
+    }
+  );
+}, qt = w(jt), Qt = ({ selectedTags: t, onTagChecked: r }) => {
+  const { tags: s } = R(), [a, n] = l.useState(""), o = s.filter(
+    (i) => i.name.toLowerCase().includes(a.toLowerCase())
+  );
+  return /* @__PURE__ */ m("div", { className: "mx-txn-tag-manager", children: [
+    /* @__PURE__ */ e(
+      Yt,
+      {
+        onSearchValueChanged: (i) => n(i),
+        searchValue: a
+      }
+    ),
+    /* @__PURE__ */ e(Vt, {}),
+    /* @__PURE__ */ e(he, { sx: { boxShadow: "none" }, children: /* @__PURE__ */ e(be, { children: o.map((i) => /* @__PURE__ */ m(l.Fragment, { children: [
+      /* @__PURE__ */ e(qt, { onTagChecked: r, selectedTags: t, tag: i }),
+      /* @__PURE__ */ e(Te, { sx: { ml: 24 } })
+    ] }, i.guid)) }) })
+  ] });
+}, Xt = w(Qt), Zt = ({ transaction: t }) => {
+  const { onEvent: r } = G(), { tags: s, updateTaggings: a, updateTransaction: n } = R(), { common: o, transactions: i } = O(), { updateManualTransaction: _ } = re(), c = H(), [d, u] = l.useState(!1), [p, g] = l.useState(t.tags);
+  l.useEffect(() => {
+    g(t.tags);
+  }, [d, t]);
+  const h = (k) => {
+    const f = [...p], x = p.indexOf(k);
+    x >= 0 ? f.splice(x, 1) : f.push(k), g(f);
+  }, I = async () => {
+    if (t.is_manual && !t.guid) {
+      _({ ...t, tags: p }), u(!1);
+      return;
+    }
+    await a(p, t.guid), await n({ ...t, tags: p }), r(Y.TRANSACTION_DETAILS_CLICK_TAGS, { transaction_guid: t.guid }), u(!1);
+  }, M = l.useMemo(
+    () => t.tags.map(
+      (k, f, x) => `${s.find((y) => y.guid === k)?.name}${f < x.length - 1 ? " / " : ""}`
+    ),
+    [s, t]
+  ), B = c.palette.mode === "dark" ? "grey.800" : "grey.100";
+  return /* @__PURE__ */ m(U, { disableGutters: !0, disablePadding: !0, children: [
+    /* @__PURE__ */ m(
+      Q,
+      {
+        onClick: () => {
+          r(C.ON_TRANSACTION_TAGS_CLICK), u(!0);
+        },
+        children: [
+          /* @__PURE__ */ e(q, { children: /* @__PURE__ */ e(j, { sx: { bgcolor: B }, variant: "rounded", children: /* @__PURE__ */ e(P, { name: "local_offer", sx: { color: "text.primary" } }) }) }),
+          /* @__PURE__ */ e(
+            z,
+            {
+              primary: i.tags_title,
+              primaryTypographyProps: { variant: "caption" },
+              secondary: /* @__PURE__ */ e(A, { bold: !0, sx: { color: "text.primary" }, variant: "body1", children: t.tags?.length > 0 ? M : i.tags_desc })
+            }
+          ),
+          /* @__PURE__ */ e(X, { children: /* @__PURE__ */ e(P, { name: "chevron_right", sx: { color: "text.primary" } }) })
+        ]
+      }
+    ),
+    /* @__PURE__ */ e(
+      _e,
+      {
+        ariaLabelClose: o.close_aria,
+        isOpen: d,
+        onClose: () => u(!1),
+        onPrimaryAction: I,
+        primaryText: o.save_button,
+        secondaryText: o.cancel_button,
+        title: i.tags_title,
+        children: /* @__PURE__ */ e(Xt, { onTagChecked: h, selectedTags: p })
+      }
+    )
+  ] });
+}, Jt = w(Zt), ea = ({ transaction: t, viewOnly: r = !1 }) => {
+  const { updateTransaction: s } = R(), { common: a, transactions: n } = O(), { onEvent: o } = G(), { announce: i, ariaLive: _ } = xe(), [c, d] = l.useState(!1), [u, p] = l.useState(""), g = l.useRef(null);
+  l.useEffect(() => {
+    c && (p(t.description), g?.current?.focus());
+  }, [c]);
+  const h = () => {
+    d(!0), o(C.ON_TRANSACTION_DESCRIPTION_EDIT_CLICK), setTimeout(() => document.getElementById("transaction-description-input")?.focus(), 0);
+  }, I = async () => {
+    o(Y.TRANSACTION_DETAILS_CLICK_DESCRIPTION, {
+      transaction_guid: t.guid
+    }), await s({ ...t, description: u }), d(!1), i(`${n.payee_title}: ${u}`), setTimeout(() => document.getElementById("transaction-description-edit-button")?.focus(), 0);
+  };
+  return /* @__PURE__ */ m(W, { className: "mx-txn-transaction-description", children: [
+    _,
+    c ? /* @__PURE__ */ m(et, { row: !0, children: [
+      /* @__PURE__ */ e(
+        $e,
+        {
+          "aria-label": n.payee_title,
+          id: "transaction-description-input",
+          inputProps: { maxLength: 140 },
+          label: n.payee_title,
+          name: n.payee_title,
+          onChange: (M) => p(M.target.value),
+          ref: g,
+          sx: {
+            backgroundColor: "background.paper",
+            ".MuiOutlinedInput-root": { borderTopRightRadius: 0, borderBottomRightRadius: 0 },
+            ".MuiOutlinedInput-input": { p: 11 },
+            width: 250
+          },
+          value: u
+        }
+      ),
+      /* @__PURE__ */ e(
+        me,
+        {
+          disabled: !u,
+          onClick: I,
+          sx: {
+            borderTopLeftRadius: 0,
+            borderBottomLeftRadius: 0
+          },
+          variant: "outlined",
+          children: a.save_button
+        }
+      )
+    ] }) : /* @__PURE__ */ m(L, { alignItems: "center", direction: "row", gap: 4, sx: { minHeight: 44 }, children: [
+      /* @__PURE__ */ e(A, { bold: !0, children: t.description }),
+      !r && /* @__PURE__ */ e(
+        ue,
+        {
+          "aria-label": n.payee_edit,
+          id: "transaction-description-edit-button",
+          onClick: h,
+          sx: { color: "action.active" },
+          children: /* @__PURE__ */ e(ye, { name: "create", size: 22 })
+        }
+      )
+    ] })
+  ] });
+}, ta = w(ea), aa = ({ transaction: t }) => {
+  const { updateTransaction: r } = R(), { transactions: s } = O(), { onEvent: a } = G(), n = H(), o = n.palette.mode === "dark", i = async () => {
+    a(Y.TRANSACTION_DETAILS_CLICK_FLAG, { transaction_guid: t.guid }), await r({ ...t, is_flagged: !t.is_flagged });
+  };
+  return /* @__PURE__ */ e("div", { className: "mx-txn-transaction-flag", children: /* @__PURE__ */ e(
+    ot,
+    {
+      "aria-label": s.flag_btn_aria,
+      "aria-pressed": t.is_flagged,
+      color: o ? "primary" : "warning",
+      onClick: i,
+      selected: t.is_flagged,
+      sx: {
+        borderRadius: 6,
+        color: o ? "common.white" : "secondary.main",
+        "&.Mui-selected": {
+          color: o ? "primary.main" : "common.white",
+          backgroundColor: o ? Ae(n.palette.primary.main, 0.25) : "warning.dark",
+          ":hover": {
+            color: o ? "primary.main" : "common.white",
+            backgroundColor: o ? Ae(n.palette.primary.main, 0.2) : "warning.main"
+          }
+        },
+        ":hover": {
+          color: o ? "common.white" : "warning.contrastText",
+          backgroundColor: o ? Ae(n.palette.primary.main, 0.2) : "warning.light"
+        }
+      },
+      value: "flagged",
+      children: /* @__PURE__ */ e(lt, { color: "inherit" })
+    }
+  ) });
+}, ra = w(aa), ge = (t, r, s, a = !0, n = "inset") => a ? /* @__PURE__ */ m(l.Fragment, { children: [
+  /* @__PURE__ */ m(U, { disableGutters: !0, disablePadding: !0, children: [
+    /* @__PURE__ */ e(q, { children: /* @__PURE__ */ e(j, { sx: { bgcolor: "neutral.light" }, variant: "rounded", children: t }) }),
+    /* @__PURE__ */ e(
+      z,
+      {
+        primary: r,
+        primaryTypographyProps: { variant: "caption" },
+        secondary: s
+      }
+    )
+  ] }),
+  /* @__PURE__ */ e(Te, { variant: n })
+] }) : null, na = ({ transaction: t }) => {
+  const { transactions: r } = O(), { tags: s } = R(), a = l.useMemo(() => {
+    const n = new Map(s.map((o) => [o.guid, o.name]));
+    return t.tags.map((o) => n.get(o)).filter(Boolean).join(" / ");
+  }, [s, t.tags]);
+  return /* @__PURE__ */ m(be, { sx: { "& .MuiListItem-root": { px: 24, py: 12 } }, children: [
+    ge(
+      /* @__PURE__ */ e(
+        Oe,
+        {
+          categoryGuid: t.top_level_category_guid,
+          size: 24,
+          sx: { color: "text.primary" },
+          variant: Ge.Transparent
+        }
+      ),
+      r.category_title,
+      /* @__PURE__ */ e(A, { bold: !0, variant: "body1", children: t.category ?? r.actions_select_a_category })
+    ),
+    ge(
+      /* @__PURE__ */ e(ye, { name: "calendar_month", sx: { color: "text.primary" } }),
+      r.date_title,
+      /* @__PURE__ */ e(A, { bold: !0, variant: "body1", children: Me(ve(t.date), Re.YEAR_MONTH_DAY) })
+    ),
+    ge(
+      /* @__PURE__ */ e(ye, { name: "article", sx: { color: "text.primary" } }),
+      r.memo_title,
+      /* @__PURE__ */ e(A, { bold: !0, sx: { overflowWrap: "break-word", whiteSpace: "wrap" }, variant: "body1", children: t.memo ?? r.memo_desc }),
+      !!t.memo,
+      t.tags?.length > 0 ? "inset" : "fullWidth"
+    ),
+    ge(
+      /* @__PURE__ */ e(ye, { name: "local_offer", sx: { color: "text.primary" } }),
+      r.tags_title,
+      /* @__PURE__ */ e(A, { bold: !0, variant: "body1", children: t.tags?.length ? a : r.tags_desc }),
+      !!t.tags?.length,
+      "fullWidth"
+    )
+  ] });
+}, oa = w(na), ia = ({
+  data: t,
+  color: r,
+  width: s = 85,
+  height: a = 65
+}) => {
+  const n = H(), o = {
+    series: [
+      {
+        data: t.map(({ value: c }) => c),
+        type: "bar"
+      }
+    ],
+    xAxis: [
+      {
+        data: t.map(({ label: c }) => c),
+        scaleType: "band",
+        categoryGapRatio: 0.3
+      }
+    ]
+  }, i = t.map(
+    (c, d) => d === t.length - 1 ? r(n) : `${r(n)}80`
+  ), _ = (c, d) => {
+    if (c <= 0 || d <= 0) return "";
+    const u = Math.min(6, c / 2, d / 2);
+    return `M${u},0 L${c - u},0 Q${c},0 ${c},${u} L${c},${d} L0,${d} L0,${u} Q0,0 ${u},0 Z`;
+  };
+  return /* @__PURE__ */ e(
+    L,
+    {
+      sx: {
+        width: s,
+        height: a
+      },
+      children: /* @__PURE__ */ e(
+        ct,
+        {
+          axisHighlight: {
+            x: "none",
+            y: "none"
+          },
+          height: a,
+          margin: {
+            bottom: -10,
+            left: 0,
+            right: 0,
+            top: 10
+          },
+          series: o.series,
+          slots: {
+            bar: ({ ownerState: c, ...d }) => {
+              const { ariaLabel: u } = t[c.dataIndex];
+              return /* @__PURE__ */ e("g", { "aria-label": u, children: /* @__PURE__ */ e(
+                "path",
+                {
+                  d: _(d.width, d.height),
+                  fill: i[c.dataIndex],
+                  transform: `translate(${d.x}, ${d.y})`
+                }
+              ) });
+            },
+            axisTickLabel: ({ text: c, ...d }) => {
+              const u = t[t.length - 1]?.label;
+              return /* @__PURE__ */ e(
+                "text",
+                {
+                  ...d,
+                  style: {
+                    ...d.style,
+                    fontSize: 6.75,
+                    lineHeight: "9px",
+                    fontWeight: u === c ? "bold" : 400
+                  },
+                  children: c
+                }
+              );
+            }
+          },
+          sx: {
+            "& .MuiChartsAxis-bottom .MuiChartsAxis-tickContainer:first-of-type .MuiChartsAxis-tick": {
+              display: "none"
+            }
+          },
+          width: s,
+          xAxis: o.xAxis,
+          yAxis: [{ width: 0, position: "none" }]
+        }
+      )
+    }
+  );
+}, sa = {
+  BILL_AMOUNT_NOT_STANDARD: "BillAmountNotStandard"
+}, la = (t, r) => {
+  if (r)
+    switch (r.template) {
+      case sa.BILL_AMOUNT_NOT_STANDARD: {
+        const s = r.data_series ? mt(r.data_series) : [], a = _t(s, r.payload?.merchant_name);
+        return {
+          instanceSlot: /* @__PURE__ */ e(
+            ia,
+            {
+              color: (n) => n.palette.categories.billsUtilities,
+              data: a.slice(-3)
+            }
+          ),
+          dataSeries: s,
+          chartData: a,
+          callToAction: t.view_history
+        };
+      }
+      default:
+        return null;
+    }
+  return null;
+}, ca = ({
+  bottomActions: t = xt,
+  canFlagTransaction: r = !0,
+  topActions: s = St,
+  transaction: a
+}) => {
+  const { onEvent: n } = G(), { isCopyLoaded: o } = rt(), { userFeatures: i } = nt(), { accounts: _, common: c, insights_feed: d } = O(), { detailedCategories: u } = we(), {
+    alert: p,
+    associatedBeats: g,
+    detailedTransactions: h,
+    cachedStartDate: I,
+    loadEmbeddedInstanceTransactions: M,
+    setAlert: B
+  } = R(), [k, f] = l.useState(!1), [x, y] = l.useState(!1), [Z, se] = l.useState(!1), le = H(), te = a?.number && a.number.length > 4, $ = l.useMemo(() => g.find((T) => T.associated_transaction_guid === a.guid), [g, a]), b = la(c, $), [K, ne] = l.useState(
+    b ? b.dataSeries.length - 1 : 0
+  );
+  l.useEffect(
+    () => n(Y.TRANSACTION_DETAILS_VIEW, { transaction_guid: a.guid }),
+    []
+  ), l.useEffect(() => {
+    if (!b || b.dataSeries.length === 0) return;
+    const { date: T } = b.dataSeries[K], D = De(T);
+    je(D, I) && (y(!0), M(D).finally(() => {
+      y(!1);
+    }));
+  }, [K, b, I]);
+  const F = t.includes(ie.MerchantBudget) && !a?.merchant_guid ? t.filter((T) => T !== ie.MerchantBudget) : t, oe = ke(() => {
+    if (b) {
+      const T = u.find(
+        (Ue) => Ue.guid === a.top_level_category_guid
+      ), D = $?.payload?.average_amount ?? 0, J = a.amount;
+      let pe = d.general.increased_text;
+      J - D < 0 && (pe = d.general.decreased_text);
+      const ce = D === 0 ? 0 : Math.round(Math.abs(J - D) / D * 100);
+      return { category: T, percentageAmount: ce, changetype: pe };
+    }
+    return null;
+  }, [b, u]), N = ke(() => {
+    if (!b?.dataSeries?.length)
+      return [];
+    const { guid: T, date: D } = b.dataSeries[K], J = De(D), pe = Be(D);
+    return h.filter((ce) => ce.date >= Ie(J) && ce.date <= Ie(pe) && ce.guid === T);
+  }, [K, b, h, x]);
+  if (!o)
+    return /* @__PURE__ */ e(ht, {});
+  const v = Je(i, "MX_TXN_DETAILS_VIEW_ONLY"), S = le.palette.mode === "dark" ? "grey.800" : "grey.100";
+  return /* @__PURE__ */ m(W, { className: "mx-txn-transaction-details", width: "100%", children: [
+    a && /* @__PURE__ */ m(L, { children: [
+      /* @__PURE__ */ m(L, { gap: 12, p: 24, children: [
+        /* @__PURE__ */ e(he, { elevation: 2, sx: { width: 64 }, children: /* @__PURE__ */ e(
+          Ce,
+          {
+            categoryGuid: a.top_level_category_guid || "",
+            merchantGuid: a.merchant_guid || "",
+            size: 64
+          }
+        ) }),
+        /* @__PURE__ */ e(ta, { transaction: a, viewOnly: v }),
+        /* @__PURE__ */ m(L, { direction: "row", justifyContent: "space-between", sx: { minHeight: 44 }, children: [
+          /* @__PURE__ */ m(ee, { color: a.isIncome ? "success.main" : "text.primary", variant: "h1", children: [
+            a.isIncome ? "+" : "",
+            V(a.amount, "0,0.00")
+          ] }),
+          !v && r && /* @__PURE__ */ e(ra, { transaction: a })
+        ] }),
+        b?.instanceSlot && /* @__PURE__ */ e(
+          pt,
+          {
+            callToAction: b.callToAction,
+            description: E(
+              d.general.embedded_description,
+              oe.changetype,
+              /* @__PURE__ */ e("strong", { children: oe.percentageAmount })
+            ),
+            instanceSlot: b.instanceSlot,
+            onCtaClick: () => {
+              f(!0);
+            },
+            title: $.html_micro_title
+          }
+        ),
+        /* @__PURE__ */ m(L, { sx: { bgcolor: S, borderRadius: "4px", gap: 4, p: 8 }, children: [
+          /* @__PURE__ */ e(A, { bold: !0, children: `${a.account}
+                ${te ? a.number : "•".repeat(4).concat(a.number ?? "")}` }),
+          /* @__PURE__ */ e(A, { bold: !0, variant: "tiny", children: a.feed_description })
+        ] })
+      ] }),
+      /* @__PURE__ */ e(he, { square: !0, sx: { boxShadow: "none" }, children: v ? /* @__PURE__ */ e(oa, { transaction: a }) : /* @__PURE__ */ e(be, { children: s.map((T, D) => /* @__PURE__ */ m(l.Fragment, { children: [
+        T === de.Category && /* @__PURE__ */ e(vt, { transaction: a }),
+        T === de.Date && /* @__PURE__ */ e(Et, { transaction: a }),
+        T === de.Memo && /* @__PURE__ */ e(Gt, { transaction: a }),
+        T === de.Tags && /* @__PURE__ */ e(Jt, { transaction: a }),
+        /* @__PURE__ */ e(
+          Te,
+          {
+            component: "li",
+            variant: D < s.length - 1 ? "inset" : "fullWidth"
+          }
+        )
+      ] }, T)) }) }),
+      !v && F.length > 0 && /* @__PURE__ */ m(l.Fragment, { children: [
+        /* @__PURE__ */ e(A, { bold: !0, mb: 8, ml: 26, mt: 16, variant: "body1", children: _.actions }),
+        /* @__PURE__ */ e(he, { square: !0, sx: { boxShadow: "none" }, children: /* @__PURE__ */ m(be, { children: [
+          F.map((T, D) => /* @__PURE__ */ m(l.Fragment, { children: [
+            T === ie.MerchantBudget && /* @__PURE__ */ e(Dt, { transaction: a }),
+            T === ie.SplitTransaction && /* @__PURE__ */ e(Ut, { transaction: a }),
+            T === ie.HideTransaction && /* @__PURE__ */ e(kt, { transaction: a }),
+            T === ie.MerchantLogo && /* @__PURE__ */ e(Mt, { transaction: a }),
+            /* @__PURE__ */ e(
+              Te,
+              {
+                component: "li",
+                variant: D < F.length - 1 ? "inset" : "fullWidth"
+              }
+            )
+          ] }, T)),
+          a.is_manual && !a.parent_guid && !a.has_been_split && /* @__PURE__ */ e(Lt, { transaction: a })
+        ] }) })
+      ] })
+    ] }),
+    $ && b && /* @__PURE__ */ e(
+      gt,
+      {
+        ariaLabel: Me(
+          b?.dataSeries[K]?.date,
+          Re.MONTH
+        ),
+        barChartProps: {
+          amounts: {
+            average: $.payload.average_amount,
+            formattedAverage: V($.payload.average_amount, "0,0")
+          },
+          color: oe.category?.color || "",
+          data: b.chartData,
+          margin: { bottom: 10, left: 24, right: 24, top: 20 },
+          monthlyAmountLabel: d.general.monthly_amount,
+          onBarClick: (T) => {
+            ne(T);
+          },
+          trendAmountLabel: d.general.trend,
+          legendPosition: "top"
+        },
+        beat: {
+          heading: $.html_title,
+          subHeading: {
+            category_guid: a.category_guid ?? "",
+            merchant_guid: a.merchant_guid ?? "",
+            description: a.description ?? ""
+          }
+        },
+        data: b.chartData,
+        defaultSelectedIndex: K,
+        icon: /* @__PURE__ */ e(
+          Ce,
+          {
+            alt: a.description ?? "",
+            categoryGuid: a.category_guid ?? "",
+            merchantGuid: a.merchant_guid ?? "",
+            size: 16
+          }
+        ),
+        isOpen: k,
+        onClose: () => {
+          f(!1), ne(b.dataSeries.length - 1);
+        },
+        onTabChange: (T) => {
+          ne(T);
+        },
+        tipSection: Z ? void 0 : {
+          message: E(
+            d.general.tip_section_message,
+            /* @__PURE__ */ e("strong", { children: d.general.tip_section_title }),
+            /* @__PURE__ */ e("strong", { children: $.primary_transaction?.description })
+          ),
+          onDismiss: () => se(!0)
+        },
+        title: d.general.transaction_history_title,
+        transactionListProps: {
+          showLoader: x,
+          showInsights: !0,
+          transaction: N
+        }
+      }
+    ),
+    /* @__PURE__ */ e(
+      Ve,
+      {
+        anchorOrigin: { vertical: "bottom", horizontal: "right" },
+        autoHideDuration: 3500,
+        onClose: () => B(""),
+        open: !!p,
+        children: /* @__PURE__ */ e(ze, { closeText: "", onClose: () => B(""), severity: "success", variant: "filled", children: p })
+      }
+    )
+  ] });
+}, ir = w(ca);
+export {
+  ie as B,
+  vt as C,
+  Et as D,
+  Gt as M,
+  ir as T,
+  Jt as a,
+  de as b,
+  At as c
+};