@mx-cartographer/experiences 9.4.58 → 9.4.60

package/dist/transactions/components/shared/TransactionInsightTag.es.js

@@ -0,0 +1,53 @@
+import { postInsightOnTransaction as c } from "../../../common/utils/PostMessage.es.js";
+import p from "../../../insights-v2/components/StatusPill.es.js";
+import { resolveInsightRender as g } from "../../../insights-v2/resolveInsightRender.es.js";
+import { Text as u } from "@mxenabled/mxui";
+import { Lightbulb as d } from "@mxenabled/mx-icons";
+import { jsx as i } from "react/jsx-runtime";
+var o = {
+  bgcolor: "primary.lighter",
+  borderColor: "primary.lighter",
+  textColor: "primary.darker"
+}, v = ({ beat: r, legacyBold: e = !0, legacyColor: a = "action.active", legacyTruncate: s = !0 }) => {
+  const l = g(r), n = (t) => {
+    t.stopPropagation(), t.preventDefault(), c(r.guid);
+  };
+  if (l === "error") return null;
+  if (l === "v2") {
+    const t = r.insights_payload?.pill?.text;
+    return t ? /* @__PURE__ */ i(p, {
+      bgcolor: o.bgcolor,
+      borderColor: o.borderColor,
+      "data-testid": "transaction-insight-pill",
+      icon: /* @__PURE__ */ i(d, {
+        size: 12,
+        sx: { color: o.textColor }
+      }),
+      label: t,
+      labelColor: o.textColor,
+      labelVariant: "caption",
+      onClick: n,
+      sx: {
+        cursor: "pointer",
+        gap: 4,
+        minHeight: 18,
+        px: 8,
+        py: 1
+      }
+    }) : null;
+  }
+  return r.short_title ? /* @__PURE__ */ i(u, {
+    bold: e,
+    color: a,
+    "data-testid": "transaction-insight-caption",
+    onClick: n,
+    truncate: s,
+    variant: "caption",
+    children: r.short_title
+  }) : null;
+};
+export {
+  v as default
+};
+
+//# sourceMappingURL=TransactionInsightTag.es.js.map

package/dist/transactions/components/shared/TransactionInsightTag.es.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TransactionInsightTag.es.js","names":[],"sources":["../../../../src/transactions/components/shared/TransactionInsightTag.tsx"],"sourcesContent":["import type { SyntheticEvent } from 'react'\n\nimport { Lightbulb } from '@mxenabled/mx-icons'\nimport { Text } from '@mxenabled/mxui'\n\nimport { postInsightOnTransaction } from '../../../common/utils/PostMessage'\nimport type { Beat } from '../../../core'\n// Leaf imports on purpose: the `insights-v2` barrel pulls in `mappings/blocks`, whose chart blocks\n// reach back into transactions code (see the circular-import note in `actionBlocksKey.ts`).\nimport StatusPill from '../../../insights-v2/components/StatusPill'\nimport { resolveInsightRender } from '../../../insights-v2/resolveInsightRender'\n\n/** Figma 1941:111883 \"Inline Insight\": `primary.lighter` surface, 12px radius, lightbulb + caption. */\nconst PILL_TOKENS = {\n  bgcolor: 'primary.lighter',\n  borderColor: 'primary.lighter',\n  textColor: 'primary.darker',\n} as const\n\nexport interface TransactionInsightTagProps {\n  /** The beat matched to the row by `associated_transaction_guid`. */\n  beat: Beat\n  /** Caption color for the legacy branch (the two surfaces use different tokens). */\n  legacyColor?: string\n  /** Whether the legacy caption is bold (the list row is, the table cell is). */\n  legacyBold?: boolean\n  /** Truncate the legacy caption (the list row does; the table cell wraps its own column). */\n  legacyTruncate?: boolean\n}\n\n/**\n * The transaction row's insight tag, shared by the list row and the table's amount cell so the two\n * cannot drift (`insights_v2.2.md` §10.1). Three-way branch on the matched beat:\n *\n * - `v2`     → `insights_payload.pill.text` drawn as a `StatusPill`; nothing when the envelope has\n *              no `pill` (the insight tags no row).\n * - `error`  → nothing. A flagged beat with no envelope must never fall back to `short_title`: that\n *              caption is filled from the same V2 copy block and would hide the failure.\n * - `legacy` → `short_title` as the plain caption, exactly as before.\n *\n * On tap both branches post `mx/moneyDashboard/insightOnTransaction` with the beat guid, as today.\n * The caller keeps the `showInsights` gate.\n */\nconst TransactionInsightTag = ({\n  beat,\n  legacyBold = true,\n  legacyColor = 'action.active',\n  legacyTruncate = true,\n}: TransactionInsightTagProps) => {\n  const render = resolveInsightRender(beat)\n\n  const handleClick = (event: SyntheticEvent) => {\n    event.stopPropagation()\n    event.preventDefault()\n    postInsightOnTransaction(beat.guid)\n  }\n\n  if (render === 'error') return null\n\n  if (render === 'v2') {\n    const text = beat.insights_payload?.pill?.text\n    if (!text) return null\n\n    return (\n      <StatusPill\n        bgcolor={PILL_TOKENS.bgcolor}\n        borderColor={PILL_TOKENS.borderColor}\n        data-testid=\"transaction-insight-pill\"\n        icon={<Lightbulb size={12} sx={{ color: PILL_TOKENS.textColor }} />}\n        label={text}\n        labelColor={PILL_TOKENS.textColor}\n        labelVariant=\"caption\"\n        onClick={handleClick}\n        sx={{ cursor: 'pointer', gap: 4, minHeight: 18, px: 8, py: 1 }}\n      />\n    )\n  }\n\n  if (!beat.short_title) return null\n\n  return (\n    <Text\n      bold={legacyBold}\n      color={legacyColor}\n      data-testid=\"transaction-insight-caption\"\n      onClick={handleClick}\n      truncate={legacyTruncate}\n      variant=\"caption\"\n    >\n      {beat.short_title}\n    </Text>\n  )\n}\n\nexport default TransactionInsightTag\n"],"mappings":";;;;;;AAaA,IAAM,IAAc;AAAA,EAClB,SAAS;AAAA,EACT,aAAa;AAAA,EACb,WAAW;AACb,GA0BM,IAAA,CAAyB,EAC7B,MAAA,GACA,YAAA,IAAa,IACb,aAAA,IAAc,iBACd,gBAAA,IAAiB,GAAA,MACe;AAChC,QAAM,IAAS,EAAqB,CAAI,GAElC,IAAA,CAAe,MAA0B;AAC7C,IAAA,EAAM,gBAAgB,GACtB,EAAM,eAAe,GACrB,EAAyB,EAAK,IAAI;AAAA,EACpC;AAEA,MAAI,MAAW,QAAS,QAAO;AAE/B,MAAI,MAAW,MAAM;AACnB,UAAM,IAAO,EAAK,kBAAkB,MAAM;AAC1C,WAAK,IAGH,gBAAA,EAAC,GAAD;AAAA,MACE,SAAS,EAAY;AAAA,MACrB,aAAa,EAAY;AAAA,MACzB,eAAY;AAAA,MACZ,MAAM,gBAAA,EAAC,GAAD;AAAA,QAAW,MAAM;AAAA,QAAI,IAAI,EAAE,OAAO,EAAY,UAAU;AAAA,MAAI,CAAA;AAAA,MAClE,OAAO;AAAA,MACP,YAAY,EAAY;AAAA,MACxB,cAAa;AAAA,MACb,SAAS;AAAA,MACT,IAAI;AAAA,QAAE,QAAQ;AAAA,QAAW,KAAK;AAAA,QAAG,WAAW;AAAA,QAAI,IAAI;AAAA,QAAG,IAAI;AAAA,MAAE;AAAA,IAC9D,CAAA,IAbe;AAAA,EAepB;AAEA,SAAK,EAAK,cAGR,gBAAA,EAAC,GAAD;AAAA,IACE,MAAM;AAAA,IACN,OAAO;AAAA,IACP,eAAY;AAAA,IACZ,SAAS;AAAA,IACT,UAAU;AAAA,IACV,SAAQ;AAAA,IAEP,UAAA,EAAK;AAAA,EACF,CAAA,IAZsB;AAchC"}

package/dist/transactions/components/shared/transactionlist/TransactionRow.es.js

@@ -1,91 +1,82 @@
-import { useGlobalCopyStore as I, useTransactionStore as C } from "../../../../common/context/hooks.es.js";
+import { useGlobalCopyStore as C, useTransactionStore as v } from "../../../../common/context/hooks.es.js";
 import { TransactionType as w } from "../../../../core/types/Transaction.es.js";
 import { formatCurrency as S } from "../../../../core/utils/NumberFormatting.es.js";
-import { isTransferTransaction as k } from "../../../../core/utils/TransactionUtils.es.js";
-import { ListItemWrapper as N } from "../../../../common/components/ListItemWrapper.es.js";
+import { isTransferTransaction as N } from "../../../../core/utils/TransactionUtils.es.js";
+import { ListItemWrapper as k } from "../../../../common/components/ListItemWrapper.es.js";
 import { useTransactionsUiStore as f } from "../../../context/hooks.es.js";
 import { ON_CLICK_EVENTS as L } from "../../../constants/OnClickEvents.es.js";
-import { postInsightOnTransaction as E } from "../../../../common/utils/PostMessage.es.js";
+import E from "../TransactionInsightTag.es.js";
 import _ from "react";
 import { observer as R } from "mobx-react-lite";
-import d from "@mui/material/Stack";
-import { Icon as c, MerchantLogo as j, Text as n } from "@mxenabled/mxui";
-import { jsx as t, jsxs as i } from "react/jsx-runtime";
+import n from "@mui/material/Stack";
+import { Icon as a, MerchantLogo as j, Text as d } from "@mxenabled/mxui";
+import { jsx as r, jsxs as t } from "react/jsx-runtime";
 import { useTheme as M } from "@mui/material/styles";
-import O from "@mui/material/ListItemAvatar";
-import z from "@mui/material/ListItemText";
-var A = ({ transaction: e, onClick: m, component: p }) => {
-  const g = M().palette.mode === "dark", { associatedBeats: l } = C(), { expandedSplits: h } = f(), { transactions: y } = I(), { showInsights: T } = f(), u = e.transaction_type === w.CREDIT, b = k(e) && !!e.institutionName, a = _.useMemo(() => l.find((r) => r.associated_transaction_guid === e.guid), [l, e]), v = (r, o) => {
+import z from "@mui/material/ListItemAvatar";
+import A from "@mui/material/ListItemText";
+var G = ({ transaction: e, onClick: m, component: c }) => {
+  const g = M().palette.mode === "dark", { associatedBeats: p } = v(), { expandedSplits: h } = f(), { transactions: T } = C(), { showInsights: y } = f(), l = e.transaction_type === w.CREDIT, b = N(e) && !!e.institutionName, u = _.useMemo(() => p.find((i) => i.associated_transaction_guid === e.guid), [p, e]), x = (i, o) => {
     const s = [];
-    return r.is_flagged && s.push(/* @__PURE__ */ t(c, {
+    return i.is_flagged && s.push(/* @__PURE__ */ r(a, {
       fill: !0,
       name: "flag",
       size: 16,
       sx: { color: o ? "primary.main" : "warning.dark" }
-    }, "flag")), r.is_hidden && s.push(/* @__PURE__ */ t(c, {
+    }, "flag")), i.is_hidden && s.push(/* @__PURE__ */ r(a, {
       name: "visibility_off",
       size: 16
-    }, "hidden")), r.has_been_split && s.push(/* @__PURE__ */ t(c, {
+    }, "hidden")), i.has_been_split && s.push(/* @__PURE__ */ r(a, {
       name: "call_split",
       size: 16
     }, "split")), s;
-  }, x = (r, o) => r.is_hidden ? o.is_excluded : r.has_been_split ? o.split_transaction_category_label : r.category || "";
-  return /* @__PURE__ */ i(N, {
+  }, I = (i, o) => i.is_hidden ? o.is_excluded : i.has_been_split ? o.split_transaction_category_label : i.category || "";
+  return /* @__PURE__ */ t(k, {
     clickEventName: L.ON_TRANSACTION_LIST_ITEM_CLICK,
-    ...p && { component: p },
+    ...c && { component: c },
     onClick: m ? () => m(e.guid) : void 0,
     sx: e.is_hidden ? {
       backgroundColor: "grey.50",
       color: "text.secondary"
     } : void 0,
-    children: [/* @__PURE__ */ t(O, { children: e.parent_guid && h.includes(e.parent_guid) ? /* @__PURE__ */ t(_.Fragment, {}) : /* @__PURE__ */ t(j, {
+    children: [/* @__PURE__ */ r(z, { children: e.parent_guid && h.includes(e.parent_guid) ? /* @__PURE__ */ r(_.Fragment, {}) : /* @__PURE__ */ r(j, {
       categoryGuid: e.top_level_category_guid || "",
       merchantGuid: e.merchant_guid || ""
-    }) }), /* @__PURE__ */ t(z, {
+    }) }), /* @__PURE__ */ r(A, {
       disableTypography: !0,
-      secondary: /* @__PURE__ */ i(d, {
+      secondary: /* @__PURE__ */ t(n, {
         direction: "row",
         justifyContent: "space-between",
-        children: [/* @__PURE__ */ i(d, {
+        children: [/* @__PURE__ */ t(n, {
           alignItems: "center",
           direction: "row",
           gap: 4,
-          children: [v(e, g), /* @__PURE__ */ t(n, {
+          children: [x(e, g), /* @__PURE__ */ r(d, {
             truncate: !0,
             variant: "caption",
-            children: x(e, y)
+            children: I(e, T)
           })]
-        }), a && T && /* @__PURE__ */ t(n, {
-          bold: !0,
-          color: "action.active",
-          onClick: (r) => {
-            r.stopPropagation(), r.preventDefault(), E(a.guid);
-          },
-          truncate: !0,
-          variant: "caption",
-          children: a.short_title
-        })]
+        }), u && y && /* @__PURE__ */ r(E, { beat: u })]
       }),
-      children: /* @__PURE__ */ i(d, {
+      children: /* @__PURE__ */ t(n, {
         direction: "row",
         justifyContent: "space-between",
         sx: { gap: 8 },
-        children: [/* @__PURE__ */ t(n, {
+        children: [/* @__PURE__ */ r(d, {
           bold: !0,
           truncate: !0,
           variant: "body1",
           children: b ? e.institutionName : e.payee || e.description || e.feed_description
-        }), /* @__PURE__ */ i(n, {
+        }), /* @__PURE__ */ t(d, {
           bold: !0,
-          color: u ? "success.main" : "text.primary",
+          color: l ? "success.main" : "text.primary",
           sx: { flexShrink: 0 },
           variant: "body1",
-          children: [u ? "+" : "", S(e.amount, "0,0.00")]
+          children: [l ? "+" : "", S(e.amount, "0,0.00")]
         })]
       })
     })]
   });
-}, $ = R(A);
+}, $ = R(G);
 export {
   $ as default
 };

package/dist/transactions/components/shared/transactionlist/TransactionRow.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"TransactionRow.es.js","names":[],"sources":["../../../../../src/transactions/components/shared/transactionlist/TransactionRow.tsx"],"sourcesContent":["import React from 'react'\nimport { observer } from 'mobx-react-lite'\n\nimport ListItemAvatar from '@mui/material/ListItemAvatar'\nimport ListItemText from '@mui/material/ListItemText'\nimport Stack from '@mui/material/Stack'\nimport { useTheme } from '@mui/material/styles'\n\nimport { Icon, MerchantLogo, Text } from '@mxenabled/mxui'\n\nimport { ListItemWrapper, useGlobalCopyStore, useTransactionStore } from '../../../../common'\nimport { Transaction, TransactionType } from '../../../../core'\nimport { isTransferTransaction } from '../../../../core/utils/TransactionUtils'\n\nimport { postInsightOnTransaction } from '../../../../common/utils/PostMessage'\n\nimport { ON_CLICK_EVENTS } from '../../../constants/OnClickEvents'\nimport { useTransactionsUiStore } from '../../../context/hooks'\nimport { formatCurrency } from '../../../../core/utils/NumberFormatting'\n\ninterface TransactionRowProps {\n  component?: React.ElementType\n  onClick?: (guid: string) => void\n  transaction: Transaction\n}\n\nconst TransactionRow: React.FC<TransactionRowProps> = ({ transaction, onClick, component }) => {\n  const theme = useTheme()\n  const isDarkMode = theme.palette.mode === 'dark'\n\n  const { associatedBeats } = useTransactionStore()\n  const { expandedSplits } = useTransactionsUiStore()\n  const { transactions: copy } = useGlobalCopyStore()\n  const { showInsights } = useTransactionsUiStore()\n\n  const isCredit = transaction.transaction_type === TransactionType.CREDIT\n\n  const showInstitution = isTransferTransaction(transaction) && Boolean(transaction.institutionName)\n\n  const beat = React.useMemo(() => {\n    return associatedBeats.find((beat) => beat.associated_transaction_guid === transaction.guid)\n  }, [associatedBeats, transaction])\n\n  const getTransactionStatusIcons = (\n    transaction: Transaction,\n    isDarkMode: boolean,\n  ): React.ReactNode[] => {\n    const icons: React.ReactNode[] = []\n\n    if (transaction.is_flagged) {\n      icons.push(\n        <Icon\n          fill={true}\n          key=\"flag\"\n          name=\"flag\"\n          size={16}\n          sx={{ color: isDarkMode ? 'primary.main' : 'warning.dark' }}\n        />,\n      )\n    }\n\n    if (transaction.is_hidden) {\n      icons.push(<Icon key=\"hidden\" name=\"visibility_off\" size={16} />)\n    }\n\n    if (transaction.has_been_split) {\n      icons.push(<Icon key=\"split\" name=\"call_split\" size={16} />)\n    }\n\n    return icons\n  }\n\n  const getTransactionCategoryText = (transaction: Transaction, copy: any): string => {\n    if (transaction.is_hidden) {\n      return copy.is_excluded\n    }\n\n    if (transaction.has_been_split) {\n      return copy.split_transaction_category_label\n    }\n\n    return transaction.category || ''\n  }\n\n  return (\n    //TODO: implement common/components/ListItemRow.tsx\n    <ListItemWrapper\n      clickEventName={ON_CLICK_EVENTS.ON_TRANSACTION_LIST_ITEM_CLICK}\n      {...(component && { component })}\n      onClick={onClick ? () => onClick(transaction.guid) : undefined}\n      sx={\n        transaction.is_hidden ? { backgroundColor: 'grey.50', color: 'text.secondary' } : undefined\n      }\n    >\n      <ListItemAvatar>\n        {transaction.parent_guid && expandedSplits.includes(transaction.parent_guid) ? (\n          <React.Fragment />\n        ) : (\n          <MerchantLogo\n            categoryGuid={transaction.top_level_category_guid || ''}\n            merchantGuid={transaction.merchant_guid || ''}\n          />\n        )}\n      </ListItemAvatar>\n      <ListItemText\n        disableTypography={true}\n        secondary={\n          <Stack direction=\"row\" justifyContent=\"space-between\">\n            <Stack alignItems=\"center\" direction=\"row\" gap={4}>\n              {getTransactionStatusIcons(transaction, isDarkMode)}\n              <Text truncate={true} variant=\"caption\">\n                {getTransactionCategoryText(transaction, copy)}\n              </Text>\n            </Stack>\n            {beat && showInsights && (\n              <Text\n                bold={true}\n                color=\"action.active\"\n                onClick={(e) => {\n                  e.stopPropagation()\n                  e.preventDefault()\n\n                  postInsightOnTransaction(beat.guid)\n                }}\n                truncate={true}\n                variant=\"caption\"\n              >\n                {beat.short_title}\n              </Text>\n            )}\n          </Stack>\n        }\n      >\n        <Stack direction=\"row\" justifyContent=\"space-between\" sx={{ gap: 8 }}>\n          <Text bold={true} truncate={true} variant=\"body1\">\n            {showInstitution\n              ? transaction.institutionName\n              : transaction.payee || transaction.description || transaction.feed_description}\n          </Text>\n          <Text\n            bold={true}\n            color={isCredit ? 'success.main' : 'text.primary'}\n            sx={{ flexShrink: 0 }}\n            variant=\"body1\"\n          >\n            {isCredit ? '+' : ''}\n            {formatCurrency(transaction.amount, '0,0.00')}\n          </Text>\n        </Stack>\n      </ListItemText>\n    </ListItemWrapper>\n  )\n}\n\nexport default observer(TransactionRow)\n"],"mappings":"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"}
+{"version":3,"file":"TransactionRow.es.js","names":[],"sources":["../../../../../src/transactions/components/shared/transactionlist/TransactionRow.tsx"],"sourcesContent":["import React from 'react'\nimport { observer } from 'mobx-react-lite'\n\nimport ListItemAvatar from '@mui/material/ListItemAvatar'\nimport ListItemText from '@mui/material/ListItemText'\nimport Stack from '@mui/material/Stack'\nimport { useTheme } from '@mui/material/styles'\n\nimport { Icon, MerchantLogo, Text } from '@mxenabled/mxui'\n\nimport { ListItemWrapper, useGlobalCopyStore, useTransactionStore } from '../../../../common'\nimport { Transaction, TransactionType } from '../../../../core'\nimport { isTransferTransaction } from '../../../../core/utils/TransactionUtils'\n\nimport TransactionInsightTag from '../TransactionInsightTag'\n\nimport { ON_CLICK_EVENTS } from '../../../constants/OnClickEvents'\nimport { useTransactionsUiStore } from '../../../context/hooks'\nimport { formatCurrency } from '../../../../core/utils/NumberFormatting'\n\ninterface TransactionRowProps {\n  component?: React.ElementType\n  onClick?: (guid: string) => void\n  transaction: Transaction\n}\n\nconst TransactionRow: React.FC<TransactionRowProps> = ({ transaction, onClick, component }) => {\n  const theme = useTheme()\n  const isDarkMode = theme.palette.mode === 'dark'\n\n  const { associatedBeats } = useTransactionStore()\n  const { expandedSplits } = useTransactionsUiStore()\n  const { transactions: copy } = useGlobalCopyStore()\n  const { showInsights } = useTransactionsUiStore()\n\n  const isCredit = transaction.transaction_type === TransactionType.CREDIT\n\n  const showInstitution = isTransferTransaction(transaction) && Boolean(transaction.institutionName)\n\n  const beat = React.useMemo(() => {\n    return associatedBeats.find((beat) => beat.associated_transaction_guid === transaction.guid)\n  }, [associatedBeats, transaction])\n\n  const getTransactionStatusIcons = (\n    transaction: Transaction,\n    isDarkMode: boolean,\n  ): React.ReactNode[] => {\n    const icons: React.ReactNode[] = []\n\n    if (transaction.is_flagged) {\n      icons.push(\n        <Icon\n          fill={true}\n          key=\"flag\"\n          name=\"flag\"\n          size={16}\n          sx={{ color: isDarkMode ? 'primary.main' : 'warning.dark' }}\n        />,\n      )\n    }\n\n    if (transaction.is_hidden) {\n      icons.push(<Icon key=\"hidden\" name=\"visibility_off\" size={16} />)\n    }\n\n    if (transaction.has_been_split) {\n      icons.push(<Icon key=\"split\" name=\"call_split\" size={16} />)\n    }\n\n    return icons\n  }\n\n  const getTransactionCategoryText = (transaction: Transaction, copy: any): string => {\n    if (transaction.is_hidden) {\n      return copy.is_excluded\n    }\n\n    if (transaction.has_been_split) {\n      return copy.split_transaction_category_label\n    }\n\n    return transaction.category || ''\n  }\n\n  return (\n    //TODO: implement common/components/ListItemRow.tsx\n    <ListItemWrapper\n      clickEventName={ON_CLICK_EVENTS.ON_TRANSACTION_LIST_ITEM_CLICK}\n      {...(component && { component })}\n      onClick={onClick ? () => onClick(transaction.guid) : undefined}\n      sx={\n        transaction.is_hidden ? { backgroundColor: 'grey.50', color: 'text.secondary' } : undefined\n      }\n    >\n      <ListItemAvatar>\n        {transaction.parent_guid && expandedSplits.includes(transaction.parent_guid) ? (\n          <React.Fragment />\n        ) : (\n          <MerchantLogo\n            categoryGuid={transaction.top_level_category_guid || ''}\n            merchantGuid={transaction.merchant_guid || ''}\n          />\n        )}\n      </ListItemAvatar>\n      <ListItemText\n        disableTypography={true}\n        secondary={\n          <Stack direction=\"row\" justifyContent=\"space-between\">\n            <Stack alignItems=\"center\" direction=\"row\" gap={4}>\n              {getTransactionStatusIcons(transaction, isDarkMode)}\n              <Text truncate={true} variant=\"caption\">\n                {getTransactionCategoryText(transaction, copy)}\n              </Text>\n            </Stack>\n            {beat && showInsights && <TransactionInsightTag beat={beat} />}\n          </Stack>\n        }\n      >\n        <Stack direction=\"row\" justifyContent=\"space-between\" sx={{ gap: 8 }}>\n          <Text bold={true} truncate={true} variant=\"body1\">\n            {showInstitution\n              ? transaction.institutionName\n              : transaction.payee || transaction.description || transaction.feed_description}\n          </Text>\n          <Text\n            bold={true}\n            color={isCredit ? 'success.main' : 'text.primary'}\n            sx={{ flexShrink: 0 }}\n            variant=\"body1\"\n          >\n            {isCredit ? '+' : ''}\n            {formatCurrency(transaction.amount, '0,0.00')}\n          </Text>\n        </Stack>\n      </ListItemText>\n    </ListItemWrapper>\n  )\n}\n\nexport default observer(TransactionRow)\n"],"mappings":"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"}

package/dist/transactions/components/shared/transactiontable/cells/AmountCell.es.js

@@ -1,25 +1,25 @@
-import { useTransactionStore as d } from "../../../../../common/context/hooks.es.js";
-import { TransactionType as l } from "../../../../../core/types/Transaction.es.js";
-import { formatCurrency as f } from "../../../../../core/utils/NumberFormatting.es.js";
-import { useTransactionsUiStore as p } from "../../../../context/hooks.es.js";
+import { useTransactionStore as m } from "../../../../../common/context/hooks.es.js";
+import { TransactionType as d } from "../../../../../core/types/Transaction.es.js";
+import { formatCurrency as l } from "../../../../../core/utils/NumberFormatting.es.js";
+import { useTransactionsUiStore as f } from "../../../../context/hooks.es.js";
+import p from "../../TransactionInsightTag.es.js";
 import u from "@mui/material/Stack";
-import { Text as i } from "@mxenabled/mxui";
-import { jsx as x, jsxs as n } from "react/jsx-runtime";
+import { Text as g } from "@mxenabled/mxui";
+import { jsx as T, jsxs as a } from "react/jsx-runtime";
 var _ = (t) => {
-  const { associatedBeats: a } = d(), { showInsights: e } = p(), { amount: s, transaction_type: c } = t.row, r = a.find((m) => m.associated_transaction_guid === t.row.guid), o = c === l.CREDIT;
-  return /* @__PURE__ */ n(u, {
+  const { associatedBeats: n } = m(), { showInsights: i } = f(), { amount: s, transaction_type: e } = t.row, r = n.find((c) => c.associated_transaction_guid === t.row.guid), o = e === d.CREDIT;
+  return /* @__PURE__ */ a(u, {
     alignItems: "flex-end",
     tabIndex: t.tabIndex,
-    children: [/* @__PURE__ */ n(i, {
+    children: [/* @__PURE__ */ a(g, {
       bold: o,
       color: o ? "success.main" : "text.primary",
       variant: "body2",
-      children: [o ? "+" : "", f(s, "0,0.00")]
-    }), r && e && /* @__PURE__ */ x(i, {
-      bold: !0,
-      color: "primary.light",
-      variant: "caption",
-      children: r.short_title
+      children: [o ? "+" : "", l(s, "0,0.00")]
+    }), r && i && /* @__PURE__ */ T(p, {
+      beat: r,
+      legacyColor: "primary.light",
+      legacyTruncate: !1
     })]
   });
 };

package/dist/transactions/components/shared/transactiontable/cells/AmountCell.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"AmountCell.es.js","names":[],"sources":["../../../../../../src/transactions/components/shared/transactiontable/cells/AmountCell.tsx"],"sourcesContent":["import Stack from '@mui/material/Stack'\n\nimport { GridCellParams } from '@mui/x-data-grid'\n\nimport { Text } from '@mxenabled/mxui'\n\nimport { useTransactionStore } from '../../../../../common'\nimport { TransactionType } from '../../../../../core'\n\nimport { useTransactionsUiStore } from '../../../../context/hooks'\nimport { formatCurrency } from '../../../../../core/utils/NumberFormatting'\n\nconst AmountCell = (params: GridCellParams) => {\n  const { associatedBeats } = useTransactionStore()\n  const { showInsights } = useTransactionsUiStore()\n\n  const { amount, transaction_type } = params.row\n  const beat = associatedBeats.find((beat) => beat.associated_transaction_guid === params.row.guid)\n\n  const isCredit = transaction_type === TransactionType.CREDIT\n\n  return (\n    <Stack alignItems=\"flex-end\" tabIndex={params.tabIndex}>\n      <Text bold={isCredit} color={isCredit ? 'success.main' : 'text.primary'} variant=\"body2\">\n        {isCredit ? '+' : ''}\n        {formatCurrency(amount, '0,0.00')}\n      </Text>\n      {beat && showInsights && (\n        <Text bold={true} color=\"primary.light\" variant=\"caption\">\n          {beat.short_title}\n        </Text>\n      )}\n    </Stack>\n  )\n}\n\nexport default AmountCell\n"],"mappings":";;;;;;;AAYA,IAAM,IAAA,CAAc,MAA2B;AAC7C,QAAM,EAAE,iBAAA,EAAA,IAAoB,EAAoB,GAC1C,EAAE,cAAA,EAAA,IAAiB,EAAuB,GAE1C,EAAE,QAAA,GAAQ,kBAAA,EAAA,IAAqB,EAAO,KACtC,IAAO,EAAgB,KAAA,CAAM,MAAS,EAAK,gCAAgC,EAAO,IAAI,IAAI,GAE1F,IAAW,MAAqB,EAAgB;AAEtD,SACE,gBAAA,EAAC,GAAD;AAAA,IAAO,YAAW;AAAA,IAAW,UAAU,EAAO;AAAA,IAA9C,UAAA,CACE,gBAAA,EAAC,GAAD;AAAA,MAAM,MAAM;AAAA,MAAU,OAAO,IAAW,iBAAiB;AAAA,MAAgB,SAAQ;AAAA,MAAjF,UAAA,CACG,IAAW,MAAM,IACjB,EAAe,GAAQ,QAAQ,CAC5B;AAAA,IACL,CAAA,GAAA,KAAQ,KACP,gBAAA,EAAC,GAAD;AAAA,MAAM,MAAM;AAAA,MAAM,OAAM;AAAA,MAAgB,SAAQ;AAAA,MAC7C,UAAA,EAAK;AAAA,IACF,CAAA,CAEH;AAAA;AAEX"}
+{"version":3,"file":"AmountCell.es.js","names":[],"sources":["../../../../../../src/transactions/components/shared/transactiontable/cells/AmountCell.tsx"],"sourcesContent":["import Stack from '@mui/material/Stack'\n\nimport { GridCellParams } from '@mui/x-data-grid'\n\nimport { Text } from '@mxenabled/mxui'\n\nimport { useTransactionStore } from '../../../../../common'\nimport { TransactionType } from '../../../../../core'\n\nimport { useTransactionsUiStore } from '../../../../context/hooks'\nimport { formatCurrency } from '../../../../../core/utils/NumberFormatting'\nimport TransactionInsightTag from '../../TransactionInsightTag'\n\nconst AmountCell = (params: GridCellParams) => {\n  const { associatedBeats } = useTransactionStore()\n  const { showInsights } = useTransactionsUiStore()\n\n  const { amount, transaction_type } = params.row\n  const beat = associatedBeats.find((beat) => beat.associated_transaction_guid === params.row.guid)\n\n  const isCredit = transaction_type === TransactionType.CREDIT\n\n  return (\n    <Stack alignItems=\"flex-end\" tabIndex={params.tabIndex}>\n      <Text bold={isCredit} color={isCredit ? 'success.main' : 'text.primary'} variant=\"body2\">\n        {isCredit ? '+' : ''}\n        {formatCurrency(amount, '0,0.00')}\n      </Text>\n      {beat && showInsights && (\n        <TransactionInsightTag beat={beat} legacyColor=\"primary.light\" legacyTruncate={false} />\n      )}\n    </Stack>\n  )\n}\n\nexport default AmountCell\n"],"mappings":";;;;;;;;AAaA,IAAM,IAAA,CAAc,MAA2B;AAC7C,QAAM,EAAE,iBAAA,EAAA,IAAoB,EAAoB,GAC1C,EAAE,cAAA,EAAA,IAAiB,EAAuB,GAE1C,EAAE,QAAA,GAAQ,kBAAA,EAAA,IAAqB,EAAO,KACtC,IAAO,EAAgB,KAAA,CAAM,MAAS,EAAK,gCAAgC,EAAO,IAAI,IAAI,GAE1F,IAAW,MAAqB,EAAgB;AAEtD,SACE,gBAAA,EAAC,GAAD;AAAA,IAAO,YAAW;AAAA,IAAW,UAAU,EAAO;AAAA,IAA9C,UAAA,CACE,gBAAA,EAAC,GAAD;AAAA,MAAM,MAAM;AAAA,MAAU,OAAO,IAAW,iBAAiB;AAAA,MAAgB,SAAQ;AAAA,MAAjF,UAAA,CACG,IAAW,MAAM,IACjB,EAAe,GAAQ,QAAQ,CAC5B;AAAA,IACL,CAAA,GAAA,KAAQ,KACP,gBAAA,EAAC,GAAD;AAAA,MAA6B,MAAA;AAAA,MAAM,aAAY;AAAA,MAAgB,gBAAgB;AAAA,IAAQ,CAAA,CAEpF;AAAA;AAEX"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mx-cartographer/experiences",
-  "version": "9.4.58",
+  "version": "9.4.60",
   "description": "Library containing experience widgets",
   "author": "MX",
   "license": "MIT",