@mx-cartographer/experiences 9.7.94 → 9.7.96

package/CHANGELOG.md

@@ -1,3 +1,11 @@
+## [9.7.96] - 11-03-2026
+
+- **FIXED** - Monthly Spend legend drops amount (MEW2-3428)
+
+## [9.7.95] - 11-03-2026
+
+- **FIXED** - 20px Transaction Details category icon (MEW2-3427)
+
 ## [9.7.94] - 11-03-2026
 
 - **ADDED** - Weekend Spending Summary beat on Insights 2.0 (MEW2-3422): the `transaction_block` `spending_summary` variant (header, rows and footer with the header text in `primary.main`, via a `headerColor` on the layout config and `TransactionListCard`) whose "View Transactions" CTA opens the Transaction List drawer as a plain list. Fixture, story, contract test and block doc

package/dist/insights/components/shared/Charts/BarChart/ChartLegendV2.es.js

@@ -1,10 +1,10 @@
-import i from "@mui/material/Stack";
-import { Text as l } from "@mxenabled/mxui";
-import { jsx as r, jsxs as e } from "react/jsx-runtime";
-import { useTheme as g } from "@mui/material/styles";
-var m = ({ color: n, legendStyle: h = {}, monthlyAmount: c, monthlyAmountLabel: t, trendAmount: d, trendAmountLabel: a }) => {
-  const o = g();
-  return /* @__PURE__ */ e(i, {
+import t from "@mui/material/Stack";
+import { Text as h } from "@mxenabled/mxui";
+import { jsx as e, jsxs as r } from "react/jsx-runtime";
+import { useTheme as o } from "@mui/material/styles";
+var w = ({ color: n, legendStyle: c = {}, monthlyAmount: a, monthlyAmountLabel: i, trendAmount: d, trendAmountLabel: l }) => {
+  const g = o();
+  return /* @__PURE__ */ r(t, {
     sx: {
       alignItems: "center",
       flexDirection: "row",
@@ -12,60 +12,56 @@ var m = ({ color: n, legendStyle: h = {}, monthlyAmount: c, monthlyAmountLabel:
       justifyContent: "flex-start",
       py: 4,
       width: "100%",
-      ...h
+      ...c
     },
-    children: [t && /* @__PURE__ */ e(i, {
+    children: [i && /* @__PURE__ */ r(t, {
       sx: {
         alignItems: "center",
         flexDirection: "row",
         gap: 8
       },
-      children: [/* @__PURE__ */ r("svg", {
+      children: [/* @__PURE__ */ e("svg", {
         "aria-hidden": "true",
         "aria-labelledby": "chartLegendLabel",
         fill: "none",
         height: "12",
         role: "figure",
         width: "12",
-        children: /* @__PURE__ */ r("rect", {
+        children: /* @__PURE__ */ e("rect", {
           fill: n,
           height: "12",
           rx: "2",
           width: "12"
         })
-      }), /* @__PURE__ */ e(l, {
+      }), /* @__PURE__ */ e(h, {
         id: "chartLegendLabel",
         variant: "caption",
-        children: [
-          t,
-          ": ",
-          c
-        ]
+        children: a ? `${i}: ${a}` : i
       })]
-    }), a && /* @__PURE__ */ e(i, {
+    }), l && /* @__PURE__ */ r(t, {
       sx: {
         alignItems: "center",
         flexDirection: "row",
         gap: 8
       },
-      children: [/* @__PURE__ */ r("svg", {
+      children: [/* @__PURE__ */ e("svg", {
         "aria-hidden": "true",
         "aria-labelledby": "chartLegendLabel",
         fill: "none",
         height: "12",
         role: "figure",
         width: "12",
-        children: /* @__PURE__ */ r("rect", {
-          fill: o.palette.chart.chart7,
+        children: /* @__PURE__ */ e("rect", {
+          fill: g.palette.chart.chart7,
           height: "12",
           rx: "2",
           width: "12"
         })
-      }), /* @__PURE__ */ e(l, {
+      }), /* @__PURE__ */ r(h, {
         id: "chartLegendLabel",
         variant: "caption",
         children: [
-          a,
+          l,
           ": ",
           d
         ]
@@ -74,7 +70,7 @@ var m = ({ color: n, legendStyle: h = {}, monthlyAmount: c, monthlyAmountLabel:
   });
 };
 export {
-  m as LegendV2
+  w as LegendV2
 };
 
 //# sourceMappingURL=ChartLegendV2.es.js.map

package/dist/insights/components/shared/Charts/BarChart/ChartLegendV2.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"ChartLegendV2.es.js","names":[],"sources":["../../../../../../src/insights/components/shared/Charts/BarChart/ChartLegendV2.tsx"],"sourcesContent":["import { Text } from '@mxenabled/mxui'\n\nimport Stack from '@mui/material/Stack'\nimport { useTheme } from '@mui/material/styles'\nimport { type SxProps } from '@mui/material/styles'\n\nexport interface LegendV2Props {\n  color: string\n  legendStyle?: SxProps\n  monthlyAmount?: string\n  monthlyAmountLabel?: string\n  trendAmount?: string\n  trendAmountLabel?: string\n}\n\nexport const LegendV2 = ({\n  color,\n  legendStyle = {},\n  monthlyAmount,\n  monthlyAmountLabel,\n  trendAmount,\n  trendAmountLabel,\n}: LegendV2Props) => {\n  const theme = useTheme()\n\n  return (\n    <Stack\n      sx={{\n        alignItems: 'center',\n        flexDirection: 'row',\n        gap: 24,\n        justifyContent: 'flex-start',\n        py: 4,\n        width: '100%',\n        ...legendStyle,\n      }}\n    >\n      {monthlyAmountLabel && (\n        <Stack sx={{ alignItems: 'center', flexDirection: 'row', gap: 8 }}>\n          <svg\n            aria-hidden=\"true\"\n            aria-labelledby=\"chartLegendLabel\"\n            fill=\"none\"\n            height=\"12\"\n            role=\"figure\"\n            width=\"12\"\n          >\n            <rect fill={color} height=\"12\" rx=\"2\" width=\"12\" />\n          </svg>\n          <Text id=\"chartLegendLabel\" variant=\"caption\">\n            {monthlyAmountLabel}: {monthlyAmount}\n          </Text>\n        </Stack>\n      )}\n\n      {trendAmountLabel && (\n        <Stack sx={{ alignItems: 'center', flexDirection: 'row', gap: 8 }}>\n          <svg\n            aria-hidden=\"true\"\n            aria-labelledby=\"chartLegendLabel\"\n            fill=\"none\"\n            height=\"12\"\n            role=\"figure\"\n            width=\"12\"\n          >\n            <rect fill={theme.palette.chart.chart7} height=\"12\" rx=\"2\" width=\"12\" />\n          </svg>\n          <Text id=\"chartLegendLabel\" variant=\"caption\">\n            {trendAmountLabel}: {trendAmount}\n          </Text>\n        </Stack>\n      )}\n    </Stack>\n  )\n}\n"],"mappings":";;;;AAeA,IAAa,IAAA,CAAY,EACvB,OAAA,GACA,aAAA,IAAc,CAAC,GACf,eAAA,GACA,oBAAA,GACA,aAAA,GACA,kBAAA,EAAA,MACmB;AACnB,QAAM,IAAQ,EAAS;AAEvB,SACE,gBAAA,EAAC,GAAD;AAAA,IACE,IAAI;AAAA,MACF,YAAY;AAAA,MACZ,eAAe;AAAA,MACf,KAAK;AAAA,MACL,gBAAgB;AAAA,MAChB,IAAI;AAAA,MACJ,OAAO;AAAA,MACP,GAAG;AAAA,IACL;AAAA,IATF,UAAA,CAWG,KACC,gBAAA,EAAC,GAAD;AAAA,MAAO,IAAI;AAAA,QAAE,YAAY;AAAA,QAAU,eAAe;AAAA,QAAO,KAAK;AAAA,MAAE;AAAA,MAAhE,UAAA,CACE,gBAAA,EAAC,OAAD;AAAA,QACE,eAAY;AAAA,QACZ,mBAAgB;AAAA,QAChB,MAAK;AAAA,QACL,QAAO;AAAA,QACP,MAAK;AAAA,QACL,OAAM;AAAA,QAEN,UAAA,gBAAA,EAAC,QAAD;AAAA,UAAM,MAAM;AAAA,UAAO,QAAO;AAAA,UAAK,IAAG;AAAA,UAAI,OAAM;AAAA,QAAM,CAAA;AAAA,MAC/C,CAAA,GACL,gBAAA,EAAC,GAAD;AAAA,QAAM,IAAG;AAAA,QAAmB,SAAQ;AAAA,QAApC,UAAA;AAAA,UACG;AAAA,UAAmB;AAAA,UAAG;AAAA,QACnB;AAAA,MACD,CAAA,CAAA;AAAA,IAGR,CAAA,GAAA,KACC,gBAAA,EAAC,GAAD;AAAA,MAAO,IAAI;AAAA,QAAE,YAAY;AAAA,QAAU,eAAe;AAAA,QAAO,KAAK;AAAA,MAAE;AAAA,MAAhE,UAAA,CACE,gBAAA,EAAC,OAAD;AAAA,QACE,eAAY;AAAA,QACZ,mBAAgB;AAAA,QAChB,MAAK;AAAA,QACL,QAAO;AAAA,QACP,MAAK;AAAA,QACL,OAAM;AAAA,QAEN,UAAA,gBAAA,EAAC,QAAD;AAAA,UAAM,MAAM,EAAM,QAAQ,MAAM;AAAA,UAAQ,QAAO;AAAA,UAAK,IAAG;AAAA,UAAI,OAAM;AAAA,QAAM,CAAA;AAAA,MACpE,CAAA,GACL,gBAAA,EAAC,GAAD;AAAA,QAAM,IAAG;AAAA,QAAmB,SAAQ;AAAA,QAApC,UAAA;AAAA,UACG;AAAA,UAAiB;AAAA,UAAG;AAAA,QACjB;AAAA,MACD,CAAA,CAAA;AAAA,IAEJ,CAAA,CAAA;AAAA;AAEX"}
+{"version":3,"file":"ChartLegendV2.es.js","names":[],"sources":["../../../../../../src/insights/components/shared/Charts/BarChart/ChartLegendV2.tsx"],"sourcesContent":["import { Text } from '@mxenabled/mxui'\n\nimport Stack from '@mui/material/Stack'\nimport { useTheme } from '@mui/material/styles'\nimport { type SxProps } from '@mui/material/styles'\n\nexport interface LegendV2Props {\n  color: string\n  legendStyle?: SxProps\n  monthlyAmount?: string\n  monthlyAmountLabel?: string\n  trendAmount?: string\n  trendAmountLabel?: string\n}\n\nexport const LegendV2 = ({\n  color,\n  legendStyle = {},\n  monthlyAmount,\n  monthlyAmountLabel,\n  trendAmount,\n  trendAmountLabel,\n}: LegendV2Props) => {\n  const theme = useTheme()\n\n  return (\n    <Stack\n      sx={{\n        alignItems: 'center',\n        flexDirection: 'row',\n        gap: 24,\n        justifyContent: 'flex-start',\n        py: 4,\n        width: '100%',\n        ...legendStyle,\n      }}\n    >\n      {monthlyAmountLabel && (\n        <Stack sx={{ alignItems: 'center', flexDirection: 'row', gap: 8 }}>\n          <svg\n            aria-hidden=\"true\"\n            aria-labelledby=\"chartLegendLabel\"\n            fill=\"none\"\n            height=\"12\"\n            role=\"figure\"\n            width=\"12\"\n          >\n            <rect fill={color} height=\"12\" rx=\"2\" width=\"12\" />\n          </svg>\n          <Text id=\"chartLegendLabel\" variant=\"caption\">\n            {monthlyAmount ? `${monthlyAmountLabel}: ${monthlyAmount}` : monthlyAmountLabel}\n          </Text>\n        </Stack>\n      )}\n\n      {trendAmountLabel && (\n        <Stack sx={{ alignItems: 'center', flexDirection: 'row', gap: 8 }}>\n          <svg\n            aria-hidden=\"true\"\n            aria-labelledby=\"chartLegendLabel\"\n            fill=\"none\"\n            height=\"12\"\n            role=\"figure\"\n            width=\"12\"\n          >\n            <rect fill={theme.palette.chart.chart7} height=\"12\" rx=\"2\" width=\"12\" />\n          </svg>\n          <Text id=\"chartLegendLabel\" variant=\"caption\">\n            {trendAmountLabel}: {trendAmount}\n          </Text>\n        </Stack>\n      )}\n    </Stack>\n  )\n}\n"],"mappings":";;;;AAeA,IAAa,IAAA,CAAY,EACvB,OAAA,GACA,aAAA,IAAc,CAAC,GACf,eAAA,GACA,oBAAA,GACA,aAAA,GACA,kBAAA,EAAA,MACmB;AACnB,QAAM,IAAQ,EAAS;AAEvB,SACE,gBAAA,EAAC,GAAD;AAAA,IACE,IAAI;AAAA,MACF,YAAY;AAAA,MACZ,eAAe;AAAA,MACf,KAAK;AAAA,MACL,gBAAgB;AAAA,MAChB,IAAI;AAAA,MACJ,OAAO;AAAA,MACP,GAAG;AAAA,IACL;AAAA,IATF,UAAA,CAWG,KACC,gBAAA,EAAC,GAAD;AAAA,MAAO,IAAI;AAAA,QAAE,YAAY;AAAA,QAAU,eAAe;AAAA,QAAO,KAAK;AAAA,MAAE;AAAA,MAAhE,UAAA,CACE,gBAAA,EAAC,OAAD;AAAA,QACE,eAAY;AAAA,QACZ,mBAAgB;AAAA,QAChB,MAAK;AAAA,QACL,QAAO;AAAA,QACP,MAAK;AAAA,QACL,OAAM;AAAA,QAEN,UAAA,gBAAA,EAAC,QAAD;AAAA,UAAM,MAAM;AAAA,UAAO,QAAO;AAAA,UAAK,IAAG;AAAA,UAAI,OAAM;AAAA,QAAM,CAAA;AAAA,MAC/C,CAAA,GACL,gBAAA,EAAC,GAAD;AAAA,QAAM,IAAG;AAAA,QAAmB,SAAQ;AAAA,QACjC,UAAA,IAAgB,GAAG,CAAA,KAAuB,CAAA,KAAkB;AAAA,MACzD,CAAA,CACD;AAAA,IAGR,CAAA,GAAA,KACC,gBAAA,EAAC,GAAD;AAAA,MAAO,IAAI;AAAA,QAAE,YAAY;AAAA,QAAU,eAAe;AAAA,QAAO,KAAK;AAAA,MAAE;AAAA,MAAhE,UAAA,CACE,gBAAA,EAAC,OAAD;AAAA,QACE,eAAY;AAAA,QACZ,mBAAgB;AAAA,QAChB,MAAK;AAAA,QACL,QAAO;AAAA,QACP,MAAK;AAAA,QACL,OAAM;AAAA,QAEN,UAAA,gBAAA,EAAC,QAAD;AAAA,UAAM,MAAM,EAAM,QAAQ,MAAM;AAAA,UAAQ,QAAO;AAAA,UAAK,IAAG;AAAA,UAAI,OAAM;AAAA,QAAM,CAAA;AAAA,MACpE,CAAA,GACL,gBAAA,EAAC,GAAD;AAAA,QAAM,IAAG;AAAA,QAAmB,SAAQ;AAAA,QAApC,UAAA;AAAA,UACG;AAAA,UAAiB;AAAA,UAAG;AAAA,QACjB;AAAA,MACD,CAAA,CAAA;AAAA,IAEJ,CAAA,CAAA;AAAA;AAEX"}

package/dist/insights/types/Charts/BarChart.d.ts

@@ -38,6 +38,7 @@ export interface BarChartV2Props {
     onBarClick?: (index: number) => void;
     removeSelectedTabColorChange?: boolean;
     selectedTabIndex?: number;
+    showMonthlyAmount?: boolean;
     trendAmountLabel?: string;
 }
 export interface DataSet {

package/dist/insights-v2/blocks/ChartBlocks/BarchartBlock/BarchartBlock.es.js

@@ -1,49 +1,50 @@
-import { useGlobalUiStore as _, useInsightsV2Store as b } from "../../../../common/context/hooks.es.js";
-import { formatCurrency as B } from "../../../../core/utils/NumberFormatting.es.js";
-import y from "../../../../common/components/Loader.es.js";
-import { BAR_ARIA_LABEL as I, barChartVariant as L, buildChartData as T, buildDataSeries as S } from "./utils.es.js";
-import { BarChartV2 as v } from "../../../components/chartblocks/BarchartV2.es.js";
-import { EmptyBarChart as E } from "../../../components/chartblocks/EmptyBarChart.es.js";
-import { ANALYTICS_EVENTS_CONFIG as R } from "../../../analytics/analyticsEventsConfig.es.js";
-import { useAnalyticsEvent as N } from "../../../analytics/useAnalyticsEvent.es.js";
-import { actionBlocksKey as x } from "../../../mappings/actionBlocksKey.es.js";
-import D from "react";
-import { observer as O } from "mobx-react-lite";
+import { useGlobalUiStore as b, useInsightsV2Store as B } from "../../../../common/context/hooks.es.js";
+import { formatCurrency as y } from "../../../../core/utils/NumberFormatting.es.js";
+import I from "../../../../common/components/Loader.es.js";
+import { BAR_ARIA_LABEL as L, barChartVariant as T, buildChartData as S, buildDataSeries as v } from "./utils.es.js";
+import { BarChartV2 as E } from "../../../components/chartblocks/BarchartV2.es.js";
+import { EmptyBarChart as R } from "../../../components/chartblocks/EmptyBarChart.es.js";
+import { ANALYTICS_EVENTS_CONFIG as N } from "../../../analytics/analyticsEventsConfig.es.js";
+import { useAnalyticsEvent as x } from "../../../analytics/useAnalyticsEvent.es.js";
+import { actionBlocksKey as D } from "../../../mappings/actionBlocksKey.es.js";
+import O from "react";
+import { observer as k } from "mobx-react-lite";
 import { jsx as r } from "react/jsx-runtime";
-import { useTheme as k } from "@mui/material/styles";
-var P = O(({ payload: a, beatGuid: n = "" }) => {
-  const m = k(), { openActionDrawer: i } = b(), { isCopyLoaded: s } = _(), { instance_slot: o, widget_type: c } = a, { series: l, category_guid: f, average_amount: e = 0, additional_data: d = [] } = o.data ?? {}, [p, u] = d, t = T(S(l), I), [A] = D.useState(t.length - 1), { color: h } = L(o, f, m), C = N();
-  return s ? t.length ? /* @__PURE__ */ r(v, {
+import { useTheme as V } from "@mui/material/styles";
+var Q = k(({ payload: a, beatGuid: n = "" }) => {
+  const m = V(), { openActionDrawer: i } = B(), { isCopyLoaded: s } = b(), { instance_slot: o, widget_type: c } = a, { series: l, category_guid: f, average_amount: e = 0, additional_data: u = [] } = o.data ?? {}, [d, p] = u, t = S(v(l), L), [A] = O.useState(t.length - 1), { color: h, showMonthlyAmount: C } = T(o, f, m), g = x();
+  return s ? t.length ? /* @__PURE__ */ r(E, {
     amounts: {
       average: e,
-      formattedAverage: B(e, "0,0")
+      formattedAverage: y(e, "0,0")
     },
     color: h,
     data: t,
-    monthlyAmountLabel: p?.label ?? "",
+    monthlyAmountLabel: d?.label ?? "",
     margin: {
       bottom: 8,
       left: 16,
       right: 16,
       top: 24
     },
-    onBarClick: (g) => {
+    onBarClick: (_) => {
       if (c !== "full") return !1;
-      C(R.CHART_BAR_CLICKED), i({
+      g(N.CHART_BAR_CLICKED), i({
         guid: n,
         trigger: "chartBar",
         context: {
-          chartBarIndex: g,
-          block: x.TRANSCATION_HISTORY_ACTION_BLOCK
+          chartBarIndex: _,
+          block: D.TRANSCATION_HISTORY_ACTION_BLOCK
         }
       });
     },
     selectedTabIndex: A,
-    trendAmountLabel: u?.label ?? ""
-  }) : /* @__PURE__ */ r(E, {}) : /* @__PURE__ */ r(y, {});
+    showMonthlyAmount: C,
+    trendAmountLabel: p?.label ?? ""
+  }) : /* @__PURE__ */ r(R, {}) : /* @__PURE__ */ r(I, {});
 });
 export {
-  P as BarchartBlock
+  Q as BarchartBlock
 };
 
 //# sourceMappingURL=BarchartBlock.es.js.map

package/dist/insights-v2/blocks/ChartBlocks/BarchartBlock/BarchartBlock.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"BarchartBlock.es.js","names":[],"sources":["../../../../../src/insights-v2/blocks/ChartBlocks/BarchartBlock/BarchartBlock.tsx"],"sourcesContent":["import React from 'react'\nimport { useTheme } from '@mui/material/styles'\nimport { observer } from 'mobx-react-lite'\n\nimport { formatCurrency, Loader, useGlobalUiStore, useInsightsV2Store } from '../../../../common'\nimport type { DrilldownPayload, InsightsPayload } from '../../../../core'\nimport type { BarChartBlockData } from '../../../../core/types/InsightsInstanceSlotData'\n\nimport { BarChartV2 } from '../../../components/chartblocks/BarchartV2'\nimport { EmptyBarChart } from '../../../components/chartblocks/EmptyBarChart'\n\nimport { ANALYTICS_EVENTS_CONFIG, useAnalyticsEvent } from '../../../analytics'\n\nimport { BAR_ARIA_LABEL, barChartVariant, buildChartData, buildDataSeries } from './utils'\nimport { actionBlocksKey } from '../../../mappings/actionBlocksKey'\n\ninterface BarchartBlockProps {\n  payload: InsightsPayload\n  beatGuid?: string\n}\n\nexport const BarchartBlock = observer(({ payload, beatGuid = '' }: BarchartBlockProps) => {\n  const theme = useTheme()\n  const { openActionDrawer } = useInsightsV2Store()\n  const { isCopyLoaded } = useGlobalUiStore()\n  const { instance_slot, widget_type } = payload\n  const {\n    series,\n    category_guid,\n    average_amount = 0,\n    additional_data = [],\n  } = (instance_slot.data ?? {}) as BarChartBlockData\n  const [monthlyAmount, trend] = additional_data\n  const chartData = buildChartData(buildDataSeries(series), BAR_ARIA_LABEL)\n  const [selectedTabIndex] = React.useState(chartData.length - 1)\n  const { color } = barChartVariant(instance_slot, category_guid, theme)\n  const fireAnalyticsEvent = useAnalyticsEvent()\n\n  if (!isCopyLoaded) {\n    return <Loader />\n  }\n\n  return chartData.length ? (\n    <BarChartV2\n      amounts={{\n        average: average_amount,\n        formattedAverage: formatCurrency(average_amount, '0,0'),\n      }}\n      color={color}\n      data={chartData}\n      monthlyAmountLabel={monthlyAmount?.label ?? ''}\n      margin={{\n        bottom: 8,\n        left: 16,\n        right: 16,\n        // Room for the tallest bar's value label, drawn 8px above the bar and about 14px tall.\n        top: 24,\n      }}\n      onBarClick={(index) => {\n        if (widget_type !== 'full') return false\n\n        fireAnalyticsEvent(ANALYTICS_EVENTS_CONFIG.CHART_BAR_CLICKED)\n\n        openActionDrawer({\n          guid: beatGuid,\n          trigger: 'chartBar',\n          context: {\n            chartBarIndex: index,\n            block: actionBlocksKey.TRANSCATION_HISTORY_ACTION_BLOCK,\n          } satisfies DrilldownPayload,\n        })\n      }}\n      selectedTabIndex={selectedTabIndex}\n      trendAmountLabel={trend?.label ?? ''}\n    />\n  ) : (\n    <EmptyBarChart />\n  )\n})\n"],"mappings":";;;;;;;;;;;;;AAqBA,IAAa,IAAgB,EAAA,CAAU,EAAE,SAAA,GAAS,UAAA,IAAW,GAAA,MAA6B;AACxF,QAAM,IAAQ,EAAS,GACjB,EAAE,kBAAA,EAAA,IAAqB,EAAmB,GAC1C,EAAE,cAAA,EAAA,IAAiB,EAAiB,GACpC,EAAE,eAAA,GAAe,aAAA,EAAA,IAAgB,GACjC,EACJ,QAAA,GACA,eAAA,GACA,gBAAA,IAAiB,GACjB,iBAAA,IAAkB,CAAC,EAAA,IAChB,EAAc,QAAQ,CAAC,GACtB,CAAC,GAAe,CAAA,IAAS,GACzB,IAAY,EAAe,EAAgB,CAAM,GAAG,CAAc,GAClE,CAAC,CAAA,IAAoB,EAAM,SAAS,EAAU,SAAS,CAAC,GACxD,EAAE,OAAA,EAAA,IAAU,EAAgB,GAAe,GAAe,CAAK,GAC/D,IAAqB,EAAkB;AAE7C,SAAK,IAIE,EAAU,SACf,gBAAA,EAAC,GAAD;AAAA,IACE,SAAS;AAAA,MACP,SAAS;AAAA,MACT,kBAAkB,EAAe,GAAgB,KAAK;AAAA,IACxD;AAAA,IACO,OAAA;AAAA,IACP,MAAM;AAAA,IACN,oBAAoB,GAAe,SAAS;AAAA,IAC5C,QAAQ;AAAA,MACN,QAAQ;AAAA,MACR,MAAM;AAAA,MACN,OAAO;AAAA,MAEP,KAAK;AAAA,IACP;AAAA,IACA,YAAA,CAAa,MAAU;AACrB,UAAI,MAAgB,OAAQ,QAAO;AAEnC,MAAA,EAAmB,EAAwB,iBAAiB,GAE5D,EAAiB;AAAA,QACf,MAAM;AAAA,QACN,SAAS;AAAA,QACT,SAAS;AAAA,UACP,eAAe;AAAA,UACf,OAAO,EAAgB;AAAA,QACzB;AAAA,MACF,CAAC;AAAA,IACH;AAAA,IACkB,kBAAA;AAAA,IAClB,kBAAkB,GAAO,SAAS;AAAA,EACnC,CAAA,IAED,gBAAA,EAAC,GAAD,CAAgB,CAAA,IArCT,gBAAA,EAAC,GAAD,CAAS,CAAA;AAuCpB,CAAC"}
+{"version":3,"file":"BarchartBlock.es.js","names":[],"sources":["../../../../../src/insights-v2/blocks/ChartBlocks/BarchartBlock/BarchartBlock.tsx"],"sourcesContent":["import React from 'react'\nimport { useTheme } from '@mui/material/styles'\nimport { observer } from 'mobx-react-lite'\n\nimport { formatCurrency, Loader, useGlobalUiStore, useInsightsV2Store } from '../../../../common'\nimport type { DrilldownPayload, InsightsPayload } from '../../../../core'\nimport type { BarChartBlockData } from '../../../../core/types/InsightsInstanceSlotData'\n\nimport { BarChartV2 } from '../../../components/chartblocks/BarchartV2'\nimport { EmptyBarChart } from '../../../components/chartblocks/EmptyBarChart'\n\nimport { ANALYTICS_EVENTS_CONFIG, useAnalyticsEvent } from '../../../analytics'\n\nimport { BAR_ARIA_LABEL, barChartVariant, buildChartData, buildDataSeries } from './utils'\nimport { actionBlocksKey } from '../../../mappings/actionBlocksKey'\n\ninterface BarchartBlockProps {\n  payload: InsightsPayload\n  beatGuid?: string\n}\n\nexport const BarchartBlock = observer(({ payload, beatGuid = '' }: BarchartBlockProps) => {\n  const theme = useTheme()\n  const { openActionDrawer } = useInsightsV2Store()\n  const { isCopyLoaded } = useGlobalUiStore()\n  const { instance_slot, widget_type } = payload\n  const {\n    series,\n    category_guid,\n    average_amount = 0,\n    additional_data = [],\n  } = (instance_slot.data ?? {}) as BarChartBlockData\n  const [monthlyAmount, trend] = additional_data\n  const chartData = buildChartData(buildDataSeries(series), BAR_ARIA_LABEL)\n  const [selectedTabIndex] = React.useState(chartData.length - 1)\n  const { color, showMonthlyAmount } = barChartVariant(instance_slot, category_guid, theme)\n  const fireAnalyticsEvent = useAnalyticsEvent()\n\n  if (!isCopyLoaded) {\n    return <Loader />\n  }\n\n  return chartData.length ? (\n    <BarChartV2\n      amounts={{\n        average: average_amount,\n        formattedAverage: formatCurrency(average_amount, '0,0'),\n      }}\n      color={color}\n      data={chartData}\n      monthlyAmountLabel={monthlyAmount?.label ?? ''}\n      margin={{\n        bottom: 8,\n        left: 16,\n        right: 16,\n        // Room for the tallest bar's value label, drawn 8px above the bar and about 14px tall.\n        top: 24,\n      }}\n      onBarClick={(index) => {\n        if (widget_type !== 'full') return false\n\n        fireAnalyticsEvent(ANALYTICS_EVENTS_CONFIG.CHART_BAR_CLICKED)\n\n        openActionDrawer({\n          guid: beatGuid,\n          trigger: 'chartBar',\n          context: {\n            chartBarIndex: index,\n            block: actionBlocksKey.TRANSCATION_HISTORY_ACTION_BLOCK,\n          } satisfies DrilldownPayload,\n        })\n      }}\n      selectedTabIndex={selectedTabIndex}\n      showMonthlyAmount={showMonthlyAmount}\n      trendAmountLabel={trend?.label ?? ''}\n    />\n  ) : (\n    <EmptyBarChart />\n  )\n})\n"],"mappings":";;;;;;;;;;;;;AAqBA,IAAa,IAAgB,EAAA,CAAU,EAAE,SAAA,GAAS,UAAA,IAAW,GAAA,MAA6B;AACxF,QAAM,IAAQ,EAAS,GACjB,EAAE,kBAAA,EAAA,IAAqB,EAAmB,GAC1C,EAAE,cAAA,EAAA,IAAiB,EAAiB,GACpC,EAAE,eAAA,GAAe,aAAA,EAAA,IAAgB,GACjC,EACJ,QAAA,GACA,eAAA,GACA,gBAAA,IAAiB,GACjB,iBAAA,IAAkB,CAAC,EAAA,IAChB,EAAc,QAAQ,CAAC,GACtB,CAAC,GAAe,CAAA,IAAS,GACzB,IAAY,EAAe,EAAgB,CAAM,GAAG,CAAc,GAClE,CAAC,CAAA,IAAoB,EAAM,SAAS,EAAU,SAAS,CAAC,GACxD,EAAE,OAAA,GAAO,mBAAA,EAAA,IAAsB,EAAgB,GAAe,GAAe,CAAK,GAClF,IAAqB,EAAkB;AAE7C,SAAK,IAIE,EAAU,SACf,gBAAA,EAAC,GAAD;AAAA,IACE,SAAS;AAAA,MACP,SAAS;AAAA,MACT,kBAAkB,EAAe,GAAgB,KAAK;AAAA,IACxD;AAAA,IACO,OAAA;AAAA,IACP,MAAM;AAAA,IACN,oBAAoB,GAAe,SAAS;AAAA,IAC5C,QAAQ;AAAA,MACN,QAAQ;AAAA,MACR,MAAM;AAAA,MACN,OAAO;AAAA,MAEP,KAAK;AAAA,IACP;AAAA,IACA,YAAA,CAAa,MAAU;AACrB,UAAI,MAAgB,OAAQ,QAAO;AAEnC,MAAA,EAAmB,EAAwB,iBAAiB,GAE5D,EAAiB;AAAA,QACf,MAAM;AAAA,QACN,SAAS;AAAA,QACT,SAAS;AAAA,UACP,eAAe;AAAA,UACf,OAAO,EAAgB;AAAA,QACzB;AAAA,MACF,CAAC;AAAA,IACH;AAAA,IACkB,kBAAA;AAAA,IACC,mBAAA;AAAA,IACnB,kBAAkB,GAAO,SAAS;AAAA,EACnC,CAAA,IAED,gBAAA,EAAC,GAAD,CAAgB,CAAA,IAtCT,gBAAA,EAAC,GAAD,CAAS,CAAA;AAwCpB,CAAC"}

package/dist/insights-v2/blocks/ChartBlocks/BarchartBlock/layout.d.ts

@@ -5,5 +5,6 @@ export declare const getLayoutConfig: (theme: Theme) => {
     };
     monthly_spend_comparison: {
         color: string | undefined;
+        showMonthlyAmount: boolean;
     };
 };

package/dist/insights-v2/blocks/ChartBlocks/BarchartBlock/layout.es.js

@@ -1,9 +1,12 @@
-var o = (a) => ({
-  account_balance: { color: a.palette.success.main },
-  monthly_spend_comparison: { color: a.palette.chart.chart2 }
+var t = (o) => ({
+  account_balance: { color: o.palette.success.main },
+  monthly_spend_comparison: {
+    color: o.palette.chart.chart2,
+    showMonthlyAmount: !1
+  }
 });
 export {
-  o as getLayoutConfig
+  t as getLayoutConfig
 };
 
 //# sourceMappingURL=layout.es.js.map

package/dist/insights-v2/blocks/ChartBlocks/BarchartBlock/layout.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"layout.es.js","names":[],"sources":["../../../../../src/insights-v2/blocks/ChartBlocks/BarchartBlock/layout.ts"],"sourcesContent":["import { type Theme } from '@mui/material/styles'\nexport const getLayoutConfig = (theme: Theme) => {\n  return {\n    account_balance: {\n      color: theme.palette.success.main,\n    },\n    monthly_spend_comparison: {\n      color: theme.palette.chart.chart2,\n    },\n  }\n}\n"],"mappings":"AACA,IAAa,IAAA,CAAmB,OACvB;AAAA,EACL,iBAAiB,EACf,OAAO,EAAM,QAAQ,QAAQ,KAC/B;AAAA,EACA,0BAA0B,EACxB,OAAO,EAAM,QAAQ,MAAM,OAC7B;AACF"}
+{"version":3,"file":"layout.es.js","names":[],"sources":["../../../../../src/insights-v2/blocks/ChartBlocks/BarchartBlock/layout.ts"],"sourcesContent":["import { type Theme } from '@mui/material/styles'\nexport const getLayoutConfig = (theme: Theme) => {\n  return {\n    account_balance: {\n      color: theme.palette.success.main,\n    },\n    monthly_spend_comparison: {\n      color: theme.palette.chart.chart2,\n      // Figma labels the selected bar's legend without its amount.\n      showMonthlyAmount: false,\n    },\n  }\n}\n"],"mappings":"AACA,IAAa,IAAA,CAAmB,OACvB;AAAA,EACL,iBAAiB,EACf,OAAO,EAAM,QAAQ,QAAQ,KAC/B;AAAA,EACA,0BAA0B;AAAA,IACxB,OAAO,EAAM,QAAQ,MAAM;AAAA,IAE3B,mBAAmB;AAAA,EACrB;AACF"}

package/dist/insights-v2/blocks/ChartBlocks/BarchartBlock/utils.d.ts

@@ -27,4 +27,5 @@ export declare const buildChartData: (dataSeries: ChartDataSeriesItem[], ariaLab
 }[];
 export declare const barChartVariant: (instanceSlot: InstanceSlot, categoryGuid: string | undefined, theme: Theme) => {
     color: string;
+    showMonthlyAmount: boolean;
 };

package/dist/insights-v2/blocks/ChartBlocks/BarchartBlock/utils.es.js

@@ -1,37 +1,45 @@
-import { buildDynamicCopy as i } from "../../../../core/utils/Localization.es.js";
-import { DATE_FORMATS_INTL as u, formatDate as _ } from "../../../../core/constants/DateFormats.es.js";
+import { buildDynamicCopy as u } from "../../../../core/utils/Localization.es.js";
+import { DATE_FORMATS_INTL as i, formatDate as l } from "../../../../core/constants/DateFormats.es.js";
 import { formatCurrency as m } from "../../../../core/utils/NumberFormatting.es.js";
 import { getCategoryColor as A } from "../../../../core/utils/CategoryUtil.es.js";
-import { getLayoutConfig as C } from "./layout.es.js";
-import { parseISO as l } from "date-fns/parseISO";
-var p = {
+import { getLayoutConfig as _ } from "./layout.es.js";
+import { parseISO as C } from "date-fns/parseISO";
+var c = {
   CATEGORY_COLOR: "category_color",
   ACCOUNT_BALANCE: "account_balance",
   MONTHLY_SPEND_COMPARISON: "monthly_spend_comparison"
-}, d = "_1{month}: _2{amount}", L = (a) => a ? a.data ? a.data.map((o) => {
-  const e = {};
-  return a.names?.map((r, t) => {
-    e[r] = o[t];
-  }), e;
-}) : [] : [], b = (a, o, e = u.MONTH_SHORT) => [...a].sort((r, t) => !r.date || !t.date ? 0 : new Date(r.date).getTime() - new Date(t.date).getTime()).map((r) => {
-  const t = r.date ? _(l(r.date), e) : r.label ?? "", n = r.amount ?? 0;
+}, R = "_1{month}: _2{amount}", d = (o) => o ? o.data ? o.data.map((e) => {
+  const a = {};
+  return o.names?.map((r, t) => {
+    a[r] = e[t];
+  }), a;
+}) : [] : [], L = (o, e, a = i.MONTH_SHORT) => [...o].sort((r, t) => !r.date || !t.date ? 0 : new Date(r.date).getTime() - new Date(t.date).getTime()).map((r) => {
+  const t = r.date ? l(C(r.date), a) : r.label ?? "", n = r.amount ?? 0;
   return {
-    ariaLabel: i(o, t, m(n, "0.00")),
+    ariaLabel: u(e, t, m(n, "0.00")),
     date: r.date ?? null,
     label: t,
     value: n,
     formattedAmount: m(n, "0,0")
   };
-}), y = (a, o, e) => {
-  const { variant: r } = a, t = C(e);
-  return r === p.CATEGORY_COLOR && o ? { color: A(o, e) } : { color: t[r]?.color ?? e.palette.primary.main };
+}), h = (o, e, a) => {
+  const { variant: r } = o, t = _(a);
+  if (r === c.CATEGORY_COLOR && e) return {
+    color: A(e, a),
+    showMonthlyAmount: !0
+  };
+  const n = t[r];
+  return {
+    color: n?.color ?? a.palette.primary.main,
+    showMonthlyAmount: n?.showMonthlyAmount ?? !0
+  };
 };
 export {
-  d as BAR_ARIA_LABEL,
-  p as BAR_CHART_VARIANTS,
-  y as barChartVariant,
-  b as buildChartData,
-  L as buildDataSeries
+  R as BAR_ARIA_LABEL,
+  c as BAR_CHART_VARIANTS,
+  h as barChartVariant,
+  L as buildChartData,
+  d as buildDataSeries
 };
 
 //# sourceMappingURL=utils.es.js.map

package/dist/insights-v2/blocks/ChartBlocks/BarchartBlock/utils.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"utils.es.js","names":[],"sources":["../../../../../src/insights-v2/blocks/ChartBlocks/BarchartBlock/utils.ts"],"sourcesContent":["import { type Theme } from '@mui/material/styles'\n\nimport { parseISO } from 'date-fns/parseISO'\n\nimport { getCategoryColor } from '../../../../core/utils/CategoryUtil'\nimport { buildDynamicCopy } from '../../../../core/utils/Localization'\nimport { formatCurrency } from '../../../../core/utils/NumberFormatting'\nimport { DATE_FORMATS_INTL, formatDate } from '../../../../core/constants'\nimport type { DataSeries, InstanceSlot } from '../../../../core'\nimport { getLayoutConfig } from './layout'\n\nexport const BAR_CHART_VARIANTS = {\n  CATEGORY_COLOR: 'category_color',\n  ACCOUNT_BALANCE: 'account_balance',\n  MONTHLY_SPEND_COMPARISON: 'monthly_spend_comparison',\n}\n\nexport interface ChartDataSeriesItem {\n  date?: string\n  amount?: number\n  guid?: string\n  label?: string\n  aggregated_guids?: string[]\n  localized_label?: string\n  category_guid?: string\n}\n\n/** Per-bar aria label, built in the frontend: \"{month}: {amount}\" (buildDynamicCopy placeholders). */\nexport const BAR_ARIA_LABEL = '_1{month}: _2{amount}'\n\nexport const buildDataSeries = (data: DataSeries | undefined): ChartDataSeriesItem[] => {\n  if (!data) {\n    return []\n  }\n\n  if (data.data) {\n    return data.data.map((d) => {\n      const item: any = {}\n\n      data.names?.map((name, index) => {\n        item[name] = d[index]\n      })\n      return item\n    })\n  } else {\n    return []\n  }\n}\n\nexport const buildChartData = (\n  dataSeries: ChartDataSeriesItem[],\n  ariaLabel: string,\n  dateFormat: Parameters<typeof formatDate>[1] = DATE_FORMATS_INTL.MONTH_SHORT,\n) => {\n  const data = [...dataSeries]\n    .sort((a, b) => {\n      if (!a.date || !b.date) return 0\n\n      return new Date(a.date).getTime() - new Date(b.date).getTime()\n    })\n    .map((total) => {\n      const label = total.date ? formatDate(parseISO(total.date), dateFormat) : (total.label ?? '')\n      const amount = total.amount ?? 0\n\n      return {\n        ariaLabel: buildDynamicCopy(ariaLabel, label, formatCurrency(amount, '0.00')) as string,\n        date: total.date ?? null,\n        label,\n        value: amount,\n        formattedAmount: formatCurrency(amount, '0,0'),\n      }\n    })\n\n  return data\n}\n\nexport const barChartVariant = (\n  instanceSlot: InstanceSlot,\n  categoryGuid: string | undefined,\n  theme: Theme,\n) => {\n  const { variant } = instanceSlot\n  const barChartLayout = getLayoutConfig(theme)\n  if (variant === BAR_CHART_VARIANTS.CATEGORY_COLOR && categoryGuid) {\n    return { color: getCategoryColor(categoryGuid, theme) }\n  }\n  return {\n    color:\n      barChartLayout[variant as keyof typeof barChartLayout]?.color ?? theme.palette.primary.main,\n  }\n}\n"],"mappings":";;;;;;AAWA,IAAa,IAAqB;AAAA,EAChC,gBAAgB;AAAA,EAChB,iBAAiB;AAAA,EACjB,0BAA0B;AAC5B,GAaa,IAAiB,yBAEjB,IAAA,CAAmB,MACzB,IAID,EAAK,OACA,EAAK,KAAK,IAAA,CAAK,MAAM;AAC1B,QAAM,IAAY,CAAC;AAEnB,SAAA,EAAK,OAAO,IAAA,CAAK,GAAM,MAAU;AAC/B,IAAA,EAAK,CAAA,IAAQ,EAAE,CAAA;AAAA,EACjB,CAAC,GACM;AACT,CAAC,IAEM,CAAC,IAbD,CAAC,GAiBC,IAAA,CACX,GACA,GACA,IAA+C,EAAkB,gBAEpD,CAAC,GAAG,CAAU,EACxB,KAAA,CAAM,GAAG,MACJ,CAAC,EAAE,QAAQ,CAAC,EAAE,OAAa,IAExB,IAAI,KAAK,EAAE,IAAI,EAAE,QAAQ,IAAI,IAAI,KAAK,EAAE,IAAI,EAAE,QAAQ,CAC9D,EACA,IAAA,CAAK,MAAU;AACd,QAAM,IAAQ,EAAM,OAAO,EAAW,EAAS,EAAM,IAAI,GAAG,CAAU,IAAK,EAAM,SAAS,IACpF,IAAS,EAAM,UAAU;AAE/B,SAAO;AAAA,IACL,WAAW,EAAiB,GAAW,GAAO,EAAe,GAAQ,MAAM,CAAC;AAAA,IAC5E,MAAM,EAAM,QAAQ;AAAA,IACpB,OAAA;AAAA,IACA,OAAO;AAAA,IACP,iBAAiB,EAAe,GAAQ,KAAK;AAAA,EAC/C;AACF,CAEK,GAGI,IAAA,CACX,GACA,GACA,MACG;AACH,QAAM,EAAE,SAAA,EAAA,IAAY,GACd,IAAiB,EAAgB,CAAK;AAC5C,SAAI,MAAY,EAAmB,kBAAkB,IAC5C,EAAE,OAAO,EAAiB,GAAc,CAAK,EAAE,IAEjD,EACL,OACE,EAAe,CAAA,GAAyC,SAAS,EAAM,QAAQ,QAAQ,KAC3F;AACF"}
+{"version":3,"file":"utils.es.js","names":[],"sources":["../../../../../src/insights-v2/blocks/ChartBlocks/BarchartBlock/utils.ts"],"sourcesContent":["import { type Theme } from '@mui/material/styles'\n\nimport { parseISO } from 'date-fns/parseISO'\n\nimport { getCategoryColor } from '../../../../core/utils/CategoryUtil'\nimport { buildDynamicCopy } from '../../../../core/utils/Localization'\nimport { formatCurrency } from '../../../../core/utils/NumberFormatting'\nimport { DATE_FORMATS_INTL, formatDate } from '../../../../core/constants'\nimport type { DataSeries, InstanceSlot } from '../../../../core'\nimport { getLayoutConfig } from './layout'\n\nexport const BAR_CHART_VARIANTS = {\n  CATEGORY_COLOR: 'category_color',\n  ACCOUNT_BALANCE: 'account_balance',\n  MONTHLY_SPEND_COMPARISON: 'monthly_spend_comparison',\n}\n\nexport interface ChartDataSeriesItem {\n  date?: string\n  amount?: number\n  guid?: string\n  label?: string\n  aggregated_guids?: string[]\n  localized_label?: string\n  category_guid?: string\n}\n\n/** Per-bar aria label, built in the frontend: \"{month}: {amount}\" (buildDynamicCopy placeholders). */\nexport const BAR_ARIA_LABEL = '_1{month}: _2{amount}'\n\nexport const buildDataSeries = (data: DataSeries | undefined): ChartDataSeriesItem[] => {\n  if (!data) {\n    return []\n  }\n\n  if (data.data) {\n    return data.data.map((d) => {\n      const item: any = {}\n\n      data.names?.map((name, index) => {\n        item[name] = d[index]\n      })\n      return item\n    })\n  } else {\n    return []\n  }\n}\n\nexport const buildChartData = (\n  dataSeries: ChartDataSeriesItem[],\n  ariaLabel: string,\n  dateFormat: Parameters<typeof formatDate>[1] = DATE_FORMATS_INTL.MONTH_SHORT,\n) => {\n  const data = [...dataSeries]\n    .sort((a, b) => {\n      if (!a.date || !b.date) return 0\n\n      return new Date(a.date).getTime() - new Date(b.date).getTime()\n    })\n    .map((total) => {\n      const label = total.date ? formatDate(parseISO(total.date), dateFormat) : (total.label ?? '')\n      const amount = total.amount ?? 0\n\n      return {\n        ariaLabel: buildDynamicCopy(ariaLabel, label, formatCurrency(amount, '0.00')) as string,\n        date: total.date ?? null,\n        label,\n        value: amount,\n        formattedAmount: formatCurrency(amount, '0,0'),\n      }\n    })\n\n  return data\n}\n\nexport const barChartVariant = (\n  instanceSlot: InstanceSlot,\n  categoryGuid: string | undefined,\n  theme: Theme,\n) => {\n  const { variant } = instanceSlot\n  const barChartLayout = getLayoutConfig(theme)\n  if (variant === BAR_CHART_VARIANTS.CATEGORY_COLOR && categoryGuid) {\n    return { color: getCategoryColor(categoryGuid, theme), showMonthlyAmount: true }\n  }\n  const layout: { color?: string; showMonthlyAmount?: boolean } | undefined =\n    barChartLayout[variant as keyof typeof barChartLayout]\n  return {\n    color: layout?.color ?? theme.palette.primary.main,\n    showMonthlyAmount: layout?.showMonthlyAmount ?? true,\n  }\n}\n"],"mappings":";;;;;;AAWA,IAAa,IAAqB;AAAA,EAChC,gBAAgB;AAAA,EAChB,iBAAiB;AAAA,EACjB,0BAA0B;AAC5B,GAaa,IAAiB,yBAEjB,IAAA,CAAmB,MACzB,IAID,EAAK,OACA,EAAK,KAAK,IAAA,CAAK,MAAM;AAC1B,QAAM,IAAY,CAAC;AAEnB,SAAA,EAAK,OAAO,IAAA,CAAK,GAAM,MAAU;AAC/B,IAAA,EAAK,CAAA,IAAQ,EAAE,CAAA;AAAA,EACjB,CAAC,GACM;AACT,CAAC,IAEM,CAAC,IAbD,CAAC,GAiBC,IAAA,CACX,GACA,GACA,IAA+C,EAAkB,gBAEpD,CAAC,GAAG,CAAU,EACxB,KAAA,CAAM,GAAG,MACJ,CAAC,EAAE,QAAQ,CAAC,EAAE,OAAa,IAExB,IAAI,KAAK,EAAE,IAAI,EAAE,QAAQ,IAAI,IAAI,KAAK,EAAE,IAAI,EAAE,QAAQ,CAC9D,EACA,IAAA,CAAK,MAAU;AACd,QAAM,IAAQ,EAAM,OAAO,EAAW,EAAS,EAAM,IAAI,GAAG,CAAU,IAAK,EAAM,SAAS,IACpF,IAAS,EAAM,UAAU;AAE/B,SAAO;AAAA,IACL,WAAW,EAAiB,GAAW,GAAO,EAAe,GAAQ,MAAM,CAAC;AAAA,IAC5E,MAAM,EAAM,QAAQ;AAAA,IACpB,OAAA;AAAA,IACA,OAAO;AAAA,IACP,iBAAiB,EAAe,GAAQ,KAAK;AAAA,EAC/C;AACF,CAEK,GAGI,IAAA,CACX,GACA,GACA,MACG;AACH,QAAM,EAAE,SAAA,EAAA,IAAY,GACd,IAAiB,EAAgB,CAAK;AAC5C,MAAI,MAAY,EAAmB,kBAAkB,EACnD,QAAO;AAAA,IAAE,OAAO,EAAiB,GAAc,CAAK;AAAA,IAAG,mBAAmB;AAAA,EAAK;AAEjF,QAAM,IACJ,EAAe,CAAA;AACjB,SAAO;AAAA,IACL,OAAO,GAAQ,SAAS,EAAM,QAAQ,QAAQ;AAAA,IAC9C,mBAAmB,GAAQ,qBAAqB;AAAA,EAClD;AACF"}

package/dist/insights-v2/components/chartblocks/BarchartV2.d.ts

@@ -1,2 +1,2 @@
 import { BarChartV2Props } from '../../../insights/types/Charts/BarChart';
-export declare const BarChartV2: ({ amounts, color, data, heightOverride, margin, onBarClick, legendPosition, monthlyAmountLabel, removeSelectedTabColorChange, selectedTabIndex, trendAmountLabel, }: BarChartV2Props) => import("react/jsx-runtime").JSX.Element;
+export declare const BarChartV2: ({ amounts, color, data, heightOverride, margin, onBarClick, legendPosition, monthlyAmountLabel, removeSelectedTabColorChange, selectedTabIndex, showMonthlyAmount, trendAmountLabel, }: BarChartV2Props) => import("react/jsx-runtime").JSX.Element;

package/dist/insights-v2/components/chartblocks/BarchartV2.es.js

@@ -1,19 +1,19 @@
-import { useContainerDimensions as V } from "../../../insights/hooks/useContainerDimensions.es.js";
-import { LegendV2 as D } from "../../../insights/components/shared/Charts/BarChart/ChartLegendV2.es.js";
-import { CustomBarPlotV2 as _ } from "../../../insights/components/shared/Charts/BarChart/CustomBarPlotV2.es.js";
+import { useContainerDimensions as D } from "../../../insights/hooks/useContainerDimensions.es.js";
+import { LegendV2 as _ } from "../../../insights/components/shared/Charts/BarChart/ChartLegendV2.es.js";
+import { CustomBarPlotV2 as j } from "../../../insights/components/shared/Charts/BarChart/CustomBarPlotV2.es.js";
 import m from "react";
-import j from "@mui/material/Stack";
+import W from "@mui/material/Stack";
 import { jsx as n, jsxs as M } from "react/jsx-runtime";
-import { useTheme as W } from "@mui/material/styles";
-import z from "@mui/material/Box";
-import { BarPlot as G, ChartContainer as N, ChartsReferenceLine as b, ChartsXAxis as X } from "@mui/x-charts";
-var Q = ({ amounts: c, color: s, data: e, heightOverride: p, margin: l = {
+import { useTheme as z } from "@mui/material/styles";
+import G from "@mui/material/Box";
+import { BarPlot as N, ChartContainer as X, ChartsReferenceLine as b, ChartsXAxis as Y } from "@mui/x-charts";
+var U = ({ amounts: c, color: s, data: e, heightOverride: p, margin: l = {
   bottom: 30,
   left: 16,
   right: 16,
   top: 20
-}, onBarClick: S, legendPosition: h = "bottom", monthlyAmountLabel: x, removeSelectedTabColorChange: u, selectedTabIndex: o, trendAmountLabel: y }) => {
-  const g = m.useRef(null), { height: d, width: R } = V(g), A = W(), k = m.useMemo(() => {
+}, onBarClick: d, legendPosition: h = "bottom", monthlyAmountLabel: x, removeSelectedTabColorChange: u, selectedTabIndex: o, showMonthlyAmount: S = !0, trendAmountLabel: y }) => {
+  const g = m.useRef(null), { height: v, width: R } = D(g), A = z(), k = m.useMemo(() => {
     const t = e.map(({ value: a }) => a), r = Math.min(...t), i = Math.max(...t);
     return {
       series: [{
@@ -31,29 +31,29 @@ var Q = ({ amounts: c, color: s, data: e, heightOverride: p, margin: l = {
         max: i > 0 ? i : 0
       }]
     };
-  }, [e]), v = m.useMemo(() => {
+  }, [e]), B = m.useMemo(() => {
     const t = `${s}80`;
     return u ? e.map(() => s) : o == null ? [...new Array(e.length - 1).fill(t), s] : e.map((r, i) => i === o ? s : t);
   }, [
     s,
     e,
     o
-  ]), B = m.useMemo(() => e[o ?? e.length - 1], [e, o]), f = e.reduce((t, r) => Math.min(t, r.value), 1 / 0) < 0, C = /* @__PURE__ */ n(D, {
+  ]), L = m.useMemo(() => e[o ?? e.length - 1], [e, o]), f = e.reduce((t, r) => Math.min(t, r.value), 1 / 0) < 0, C = /* @__PURE__ */ n(_, {
     color: s,
     legendStyle: { pl: l.left },
-    monthlyAmount: B.formattedAmount,
+    monthlyAmount: S ? L.formattedAmount : void 0,
     monthlyAmountLabel: x,
     trendAmount: c?.formattedAverage,
     trendAmountLabel: y
-  }), w = x || y, L = (t, { dataIndex: r }) => S?.(r);
-  return /* @__PURE__ */ M(j, {
+  }), w = x || y, V = (t, { dataIndex: r }) => d?.(r);
+  return /* @__PURE__ */ M(W, {
     sx: {
       alignItems: "center",
       width: "100%"
     },
     children: [
       w && h === "top" && C,
-      /* @__PURE__ */ n(z, {
+      /* @__PURE__ */ n(G, {
         ref: g,
         sx: {
           height: p || 122,
@@ -66,8 +66,8 @@ var Q = ({ amounts: c, color: s, data: e, heightOverride: p, margin: l = {
             userSelect: "none"
           }
         },
-        children: /* @__PURE__ */ M(N, {
-          height: d,
+        children: /* @__PURE__ */ M(X, {
+          height: v,
           margin: {
             bottom: l.bottom,
             left: l.left,
@@ -94,7 +94,7 @@ var Q = ({ amounts: c, color: s, data: e, heightOverride: p, margin: l = {
               lineStyle: { stroke: A.palette.chart.chart7 },
               y: 0
             }),
-            /* @__PURE__ */ n(X, {
+            /* @__PURE__ */ n(Y, {
               slots: { axisTickLabel: ({ text: t, ownerState: r, ...i }) => {
                 const a = e[o ?? e.length - 1]?.label;
                 return /* @__PURE__ */ n("text", {
@@ -113,13 +113,13 @@ var Q = ({ amounts: c, color: s, data: e, heightOverride: p, margin: l = {
               }),
               tickLabelStyle: { fontSize: 11 }
             }),
-            /* @__PURE__ */ n(G, {
-              onItemClick: L,
+            /* @__PURE__ */ n(N, {
+              onItemClick: V,
               slots: { bar: (t) => {
                 const { ownerState: r, ...i } = t;
-                return /* @__PURE__ */ n(_, {
+                return /* @__PURE__ */ n(j, {
                   ...i,
-                  colorRange: v,
+                  colorRange: B,
                   data: e,
                   dataIndex: r.dataIndex,
                   removeSelectedTabColorChange: u,
@@ -141,7 +141,7 @@ var Q = ({ amounts: c, color: s, data: e, heightOverride: p, margin: l = {
   });
 };
 export {
-  Q as BarChartV2
+  U as BarChartV2
 };
 
 //# sourceMappingURL=BarchartV2.es.js.map

package/dist/insights-v2/components/chartblocks/BarchartV2.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"BarchartV2.es.js","names":[],"sources":["../../../../src/insights-v2/components/chartblocks/BarchartV2.tsx"],"sourcesContent":["import React from 'react'\n\nimport Box from '@mui/material/Box'\nimport Stack from '@mui/material/Stack'\nimport { type Theme, useTheme } from '@mui/material/styles'\nimport {\n  BarPlot,\n  type BarSeriesType,\n  ChartContainer as ResponsiveChartContainer,\n  ChartsReferenceLine,\n  ChartsXAxis,\n} from '@mui/x-charts'\n\nimport { useContainerDimensions } from '../../../insights/hooks/useContainerDimensions'\nimport type { BarChartV2Props } from '../../../insights/types/Charts/BarChart'\nimport { LegendV2 } from '../../../insights/components/shared/Charts/BarChart/ChartLegendV2'\nimport { CustomBarPlotV2 } from '../../../insights/components/shared/Charts/BarChart/CustomBarPlotV2'\n\nexport const BarChartV2 = ({\n  amounts,\n  color,\n  data,\n  heightOverride,\n  margin = {\n    bottom: 30,\n    left: 16,\n    right: 16,\n    top: 20,\n  },\n  onBarClick,\n  legendPosition = 'bottom',\n  monthlyAmountLabel,\n  removeSelectedTabColorChange,\n  selectedTabIndex,\n  trendAmountLabel,\n}: BarChartV2Props) => {\n  const containerRef = React.useRef<HTMLDivElement>(null)\n  const { height, width } = useContainerDimensions(containerRef)\n  const theme = useTheme()\n\n  const chartData = React.useMemo(() => {\n    const values = data.map(({ value }) => value)\n    const minValue = Math.min(...values)\n    const maxValue = Math.max(...values)\n\n    return {\n      series: [\n        {\n          data: values,\n          type: 'bar',\n        },\n      ] as BarSeriesType[],\n      xAxis: [\n        {\n          data: data.map(({ label }) => label),\n          scaleType: 'band' as const,\n          categoryGapRatio: 0.45,\n        },\n      ],\n      yAxis: [\n        {\n          scaleType: 'linear' as const,\n          min: minValue < 0 ? minValue * 1.2 : 0,\n          max: maxValue > 0 ? maxValue : 0,\n        },\n      ],\n    }\n  }, [data])\n\n  const colorRange = React.useMemo(() => {\n    const defaultColor = `${color}80`\n    if (removeSelectedTabColorChange) return data.map(() => color)\n\n    if (selectedTabIndex == null) {\n      return [...new Array(data.length - 1).fill(defaultColor), color]\n    }\n    return data.map((_, index) => (index === selectedTabIndex ? color : defaultColor))\n  }, [color, data, selectedTabIndex])\n\n  const selectedData = React.useMemo(\n    () => data[selectedTabIndex ?? data.length - 1],\n    [data, selectedTabIndex],\n  )\n\n  const lowestValue = data.reduce((min, item) => Math.min(min, item.value), Infinity)\n  const isNegative = lowestValue < 0\n\n  const legendComponent = (\n    <LegendV2\n      color={color}\n      legendStyle={{ pl: margin.left }}\n      monthlyAmount={selectedData.formattedAmount}\n      monthlyAmountLabel={monthlyAmountLabel}\n      trendAmount={amounts?.formattedAverage}\n      trendAmountLabel={trendAmountLabel}\n    />\n  )\n\n  const shouldShowLegend = monthlyAmountLabel || trendAmountLabel\n\n  const handleBarClick = (\n    _: React.MouseEvent<SVGElement, MouseEvent>,\n    { dataIndex }: { dataIndex: number },\n  ) => onBarClick?.(dataIndex)\n\n  return (\n    <Stack sx={{ alignItems: 'center', width: '100%' }}>\n      {shouldShowLegend && legendPosition === 'top' && legendComponent}\n      <Box\n        ref={containerRef}\n        sx={{\n          height: heightOverride ? heightOverride : 122,\n          mb: legendPosition === 'top' ? 0 : 4,\n          mt: legendPosition === 'top' ? 4 : 0,\n          touchAction: 'pan-y',\n          width: '100%',\n          '& svg': {\n            touchAction: 'pan-y',\n            userSelect: 'none',\n          },\n        }}\n      >\n        <ResponsiveChartContainer\n          height={height}\n          margin={{\n            bottom: margin.bottom,\n            left: margin.left,\n            right: margin.right,\n            top: margin.top || 45,\n          }}\n          series={chartData.series}\n          width={width}\n          xAxis={chartData.xAxis}\n          yAxis={[{ width: 0 }]}\n        >\n          {amounts?.average && (\n            <ChartsReferenceLine\n              labelAlign=\"middle\"\n              lineStyle={{\n                stroke: theme.palette.chart.chart7,\n                strokeDasharray: '4',\n                strokeLinecap: 'round',\n                strokeWidth: 1,\n              }}\n              y={amounts?.average}\n            />\n          )}\n\n          {isNegative && (\n            <ChartsReferenceLine\n              labelAlign=\"middle\"\n              lineStyle={{\n                stroke: theme.palette.chart.chart7,\n              }}\n              y={0}\n            />\n          )}\n\n          <ChartsXAxis\n            slots={{\n              // eslint-disable-next-line @typescript-eslint/no-unused-vars\n              axisTickLabel: ({ text, ownerState: _, ...restProps }) => {\n                const label = data[selectedTabIndex ?? data.length - 1]?.label\n                return (\n                  <text\n                    {...restProps}\n                    style={\n                      {\n                        ...restProps.style,\n                        fontWeight: !removeSelectedTabColorChange && label === text ? 'bold' : 400,\n                      } as React.CSSProperties\n                    }\n                  >\n                    {text}\n                  </text>\n                )\n              },\n            }}\n            sx={(theme) => ({\n              '& .MuiChartsAxis-line': {\n                stroke: !isNegative ? (theme as Theme).palette.text?.primary : 'none',\n              },\n              '& .MuiChartsAxis-tickContainer:first-of-type .MuiChartsAxis-tick': {\n                display: 'none',\n              },\n              '& .MuiChartsAxis-tickLabel': {\n                transform: isNegative ? 'translateY(15px)' : {},\n              },\n            })}\n            tickLabelStyle={{\n              fontSize: 11,\n            }}\n          />\n          <BarPlot\n            onItemClick={handleBarClick}\n            slots={{\n              bar: (props) => {\n                const { ownerState, ...defaultProps } = props\n                return (\n                  <CustomBarPlotV2\n                    {...defaultProps}\n                    colorRange={colorRange}\n                    data={data}\n                    dataIndex={ownerState.dataIndex}\n                    removeSelectedTabColorChange={removeSelectedTabColorChange}\n                    selectedTabIndex={selectedTabIndex ?? data.length - 1}\n                    style={{\n                      height: props.height,\n                      x: props.x,\n                      y: props.y,\n                      width: props.width,\n                    }}\n                  />\n                )\n              },\n            }}\n          />\n        </ResponsiveChartContainer>\n      </Box>\n      {shouldShowLegend && legendPosition === 'bottom' && legendComponent}\n    </Stack>\n  )\n}\n"],"mappings":"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"}
+{"version":3,"file":"BarchartV2.es.js","names":[],"sources":["../../../../src/insights-v2/components/chartblocks/BarchartV2.tsx"],"sourcesContent":["import React from 'react'\n\nimport Box from '@mui/material/Box'\nimport Stack from '@mui/material/Stack'\nimport { type Theme, useTheme } from '@mui/material/styles'\nimport {\n  BarPlot,\n  type BarSeriesType,\n  ChartContainer as ResponsiveChartContainer,\n  ChartsReferenceLine,\n  ChartsXAxis,\n} from '@mui/x-charts'\n\nimport { useContainerDimensions } from '../../../insights/hooks/useContainerDimensions'\nimport type { BarChartV2Props } from '../../../insights/types/Charts/BarChart'\nimport { LegendV2 } from '../../../insights/components/shared/Charts/BarChart/ChartLegendV2'\nimport { CustomBarPlotV2 } from '../../../insights/components/shared/Charts/BarChart/CustomBarPlotV2'\n\nexport const BarChartV2 = ({\n  amounts,\n  color,\n  data,\n  heightOverride,\n  margin = {\n    bottom: 30,\n    left: 16,\n    right: 16,\n    top: 20,\n  },\n  onBarClick,\n  legendPosition = 'bottom',\n  monthlyAmountLabel,\n  removeSelectedTabColorChange,\n  selectedTabIndex,\n  showMonthlyAmount = true,\n  trendAmountLabel,\n}: BarChartV2Props) => {\n  const containerRef = React.useRef<HTMLDivElement>(null)\n  const { height, width } = useContainerDimensions(containerRef)\n  const theme = useTheme()\n\n  const chartData = React.useMemo(() => {\n    const values = data.map(({ value }) => value)\n    const minValue = Math.min(...values)\n    const maxValue = Math.max(...values)\n\n    return {\n      series: [\n        {\n          data: values,\n          type: 'bar',\n        },\n      ] as BarSeriesType[],\n      xAxis: [\n        {\n          data: data.map(({ label }) => label),\n          scaleType: 'band' as const,\n          categoryGapRatio: 0.45,\n        },\n      ],\n      yAxis: [\n        {\n          scaleType: 'linear' as const,\n          min: minValue < 0 ? minValue * 1.2 : 0,\n          max: maxValue > 0 ? maxValue : 0,\n        },\n      ],\n    }\n  }, [data])\n\n  const colorRange = React.useMemo(() => {\n    const defaultColor = `${color}80`\n    if (removeSelectedTabColorChange) return data.map(() => color)\n\n    if (selectedTabIndex == null) {\n      return [...new Array(data.length - 1).fill(defaultColor), color]\n    }\n    return data.map((_, index) => (index === selectedTabIndex ? color : defaultColor))\n  }, [color, data, selectedTabIndex])\n\n  const selectedData = React.useMemo(\n    () => data[selectedTabIndex ?? data.length - 1],\n    [data, selectedTabIndex],\n  )\n\n  const lowestValue = data.reduce((min, item) => Math.min(min, item.value), Infinity)\n  const isNegative = lowestValue < 0\n\n  const legendComponent = (\n    <LegendV2\n      color={color}\n      legendStyle={{ pl: margin.left }}\n      monthlyAmount={showMonthlyAmount ? selectedData.formattedAmount : undefined}\n      monthlyAmountLabel={monthlyAmountLabel}\n      trendAmount={amounts?.formattedAverage}\n      trendAmountLabel={trendAmountLabel}\n    />\n  )\n\n  const shouldShowLegend = monthlyAmountLabel || trendAmountLabel\n\n  const handleBarClick = (\n    _: React.MouseEvent<SVGElement, MouseEvent>,\n    { dataIndex }: { dataIndex: number },\n  ) => onBarClick?.(dataIndex)\n\n  return (\n    <Stack sx={{ alignItems: 'center', width: '100%' }}>\n      {shouldShowLegend && legendPosition === 'top' && legendComponent}\n      <Box\n        ref={containerRef}\n        sx={{\n          height: heightOverride ? heightOverride : 122,\n          mb: legendPosition === 'top' ? 0 : 4,\n          mt: legendPosition === 'top' ? 4 : 0,\n          touchAction: 'pan-y',\n          width: '100%',\n          '& svg': {\n            touchAction: 'pan-y',\n            userSelect: 'none',\n          },\n        }}\n      >\n        <ResponsiveChartContainer\n          height={height}\n          margin={{\n            bottom: margin.bottom,\n            left: margin.left,\n            right: margin.right,\n            top: margin.top || 45,\n          }}\n          series={chartData.series}\n          width={width}\n          xAxis={chartData.xAxis}\n          yAxis={[{ width: 0 }]}\n        >\n          {amounts?.average && (\n            <ChartsReferenceLine\n              labelAlign=\"middle\"\n              lineStyle={{\n                stroke: theme.palette.chart.chart7,\n                strokeDasharray: '4',\n                strokeLinecap: 'round',\n                strokeWidth: 1,\n              }}\n              y={amounts?.average}\n            />\n          )}\n\n          {isNegative && (\n            <ChartsReferenceLine\n              labelAlign=\"middle\"\n              lineStyle={{\n                stroke: theme.palette.chart.chart7,\n              }}\n              y={0}\n            />\n          )}\n\n          <ChartsXAxis\n            slots={{\n              // eslint-disable-next-line @typescript-eslint/no-unused-vars\n              axisTickLabel: ({ text, ownerState: _, ...restProps }) => {\n                const label = data[selectedTabIndex ?? data.length - 1]?.label\n                return (\n                  <text\n                    {...restProps}\n                    style={\n                      {\n                        ...restProps.style,\n                        fontWeight: !removeSelectedTabColorChange && label === text ? 'bold' : 400,\n                      } as React.CSSProperties\n                    }\n                  >\n                    {text}\n                  </text>\n                )\n              },\n            }}\n            sx={(theme) => ({\n              '& .MuiChartsAxis-line': {\n                stroke: !isNegative ? (theme as Theme).palette.text?.primary : 'none',\n              },\n              '& .MuiChartsAxis-tickContainer:first-of-type .MuiChartsAxis-tick': {\n                display: 'none',\n              },\n              '& .MuiChartsAxis-tickLabel': {\n                transform: isNegative ? 'translateY(15px)' : {},\n              },\n            })}\n            tickLabelStyle={{\n              fontSize: 11,\n            }}\n          />\n          <BarPlot\n            onItemClick={handleBarClick}\n            slots={{\n              bar: (props) => {\n                const { ownerState, ...defaultProps } = props\n                return (\n                  <CustomBarPlotV2\n                    {...defaultProps}\n                    colorRange={colorRange}\n                    data={data}\n                    dataIndex={ownerState.dataIndex}\n                    removeSelectedTabColorChange={removeSelectedTabColorChange}\n                    selectedTabIndex={selectedTabIndex ?? data.length - 1}\n                    style={{\n                      height: props.height,\n                      x: props.x,\n                      y: props.y,\n                      width: props.width,\n                    }}\n                  />\n                )\n              },\n            }}\n          />\n        </ResponsiveChartContainer>\n      </Box>\n      {shouldShowLegend && legendPosition === 'bottom' && legendComponent}\n    </Stack>\n  )\n}\n"],"mappings":"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"}

package/dist/transactions/components/shared/transactiondetails/actions/CategoryAction.es.js

@@ -1,4 +1,4 @@
-import { buildDynamicCopy as _ } from "../../../../../core/utils/Localization.es.js";
+import { buildDynamicCopy as u } from "../../../../../core/utils/Localization.es.js";
 import { useCategoryStore as b, useEvent as L, useGlobalCopyStore as E, useTransactionStore as N } from "../../../../../common/context/hooks.es.js";
 import O from "../../../../../common/components/dialog/Dialog.es.js";
 import { ANALYTICS_EVENTS as R } from "../../../../../common/constants/Analytics.es.js";
@@ -24,12 +24,12 @@ var de = ({ transaction: e }) => {
     }), o && await g(a, e), n(""), c(R.TRANSACTION_DETAILS_CLICK_CATEGORY, { transaction_guid: e.guid });
   }, I = (o) => {
     if (e.is_manual && !e.guid) {
-      const u = s.find((v) => v.guid === o);
+      const _ = s.find((v) => v.guid === o);
       T({
         ...e,
-        category: u?.name,
+        category: _?.name,
         category_guid: o,
-        top_level_category_guid: u?.parent_guid || o
+        top_level_category_guid: _?.parent_guid || o
       });
     } else n(o);
     p();
@@ -51,7 +51,8 @@ var de = ({ transaction: e }) => {
             variant: "rounded",
             children: /* @__PURE__ */ t(P, {
               categoryGuid: e.top_level_category_guid,
-              size: 24,
+              icon_ratio: 1,
+              size: 20,
               sx: { color: "text.primary" },
               variant: K.Transparent
             })
@@ -84,7 +85,7 @@ var de = ({ transaction: e }) => {
         title: r.actions_select_a_category
       }),
       /* @__PURE__ */ t(O, {
-        copy: { title: _(r.actions_apply_to_all_transaction_types, e.description) },
+        copy: { title: u(r.actions_apply_to_all_transaction_types, e.description) },
         isOpen: !!a,
         onClose: () => n(""),
         onPrimaryAction: () => d(!0),
@@ -94,7 +95,7 @@ var de = ({ transaction: e }) => {
         secondaryText: r.actions_this_time_only,
         children: /* @__PURE__ */ t(V, {
           variant: "subtitle1",
-          children: _(r.actions_all_past_and_future, e.description, x?.name)
+          children: u(r.actions_all_past_and_future, e.description, x?.name)
         })
       })
     ]

package/dist/transactions/components/shared/transactiondetails/actions/CategoryAction.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"CategoryAction.es.js","names":[],"sources":["../../../../../../src/transactions/components/shared/transactiondetails/actions/CategoryAction.tsx"],"sourcesContent":["import React from 'react'\n\nimport Avatar from '@mui/material/Avatar'\nimport ListItem from '@mui/material/ListItem'\nimport ListItemAvatar from '@mui/material/ListItemAvatar'\nimport ListItemButton from '@mui/material/ListItemButton'\nimport ListItemIcon from '@mui/material/ListItemIcon'\nimport ListItemText from '@mui/material/ListItemText'\nimport { useTheme } from '@mui/material/styles'\n\nimport { CategoryIcon, CategoryIconVariants, P, Text } from '@mxenabled/mxui'\nimport { Icon } from '@mxenabled/mx-icons'\nimport { CategorySelectorDrawer } from '../../../../../categories'\n\nimport {\n  ANALYTICS_EVENTS,\n  Dialog,\n  useCategoryStore,\n  useGlobalCopyStore,\n} from '../../../../../common'\nimport type { Transaction } from '../../../../../core'\n\nimport { ON_CLICK_EVENTS } from '../../../../constants/OnClickEvents'\nimport { useTransactionsUiStore } from '../../../../context/hooks'\nimport { useEvent, useTransactionStore } from '../../../../../common'\nimport { buildDynamicCopy } from '../../../../../core/utils/Localization'\n\ninterface CategoryActionProps {\n  transaction: Transaction\n}\n\nconst CategoryAction: React.FC<CategoryActionProps> = ({ transaction }) => {\n  const { addOrUpdateTransactionRule, updateTransaction } = useTransactionStore()\n  const { categories } = useCategoryStore()\n  const { onEvent } = useEvent()\n  const { setShouldDisableDrawerScroll, updateManualTransaction } = useTransactionsUiStore()\n  const { transactions: copy } = useGlobalCopyStore()\n\n  const theme = useTheme()\n\n  const categoryRowRef = React.useRef<HTMLDivElement>(null)\n  const [open, setOpen] = React.useState(false)\n  const [selectedGuid, setSelectedGuid] = React.useState('')\n\n  const handleCategoryChange = async (applyToAll: boolean) => {\n    await updateTransaction({ ...transaction, category_guid: selectedGuid })\n    if (applyToAll) {\n      await addOrUpdateTransactionRule(selectedGuid, transaction)\n    }\n    setSelectedGuid('')\n    onEvent(ANALYTICS_EVENTS.TRANSACTION_DETAILS_CLICK_CATEGORY, {\n      transaction_guid: transaction.guid,\n    })\n  }\n\n  const handleSelected = (guid: string) => {\n    if (transaction.is_manual && !transaction.guid) {\n      const category = categories.find((c) => c.guid === guid)\n      updateManualTransaction({\n        ...transaction,\n        category: category?.name,\n        category_guid: guid,\n        top_level_category_guid: category?.parent_guid || guid,\n      })\n    } else {\n      setSelectedGuid(guid)\n    }\n\n    handleCloseDrawer()\n  }\n\n  const handleCloseDrawer = () => {\n    setOpen(false)\n    setShouldDisableDrawerScroll(false)\n  }\n\n  const category = React.useMemo(\n    () => categories.find((item) => item.guid === selectedGuid),\n    [selectedGuid],\n  )\n\n  const bgColor = theme.palette.mode === 'dark' ? 'grey.800' : 'grey.100'\n\n  return (\n    <ListItem disableGutters={true} disablePadding={true}>\n      <ListItemButton\n        ref={categoryRowRef}\n        onClick={() => {\n          onEvent(ON_CLICK_EVENTS.ON_TRANSACTION_CATEGORY_CLICK)\n          setOpen(true)\n        }}\n      >\n        <ListItemAvatar>\n          <Avatar sx={{ bgcolor: bgColor }} variant=\"rounded\">\n            <CategoryIcon\n              categoryGuid={transaction.top_level_category_guid}\n              size={24}\n              sx={{ color: 'text.primary' }}\n              variant={CategoryIconVariants.Transparent}\n            />\n          </Avatar>\n        </ListItemAvatar>\n        <ListItemText\n          primary={copy.category_title}\n          secondary={\n            <Text bold={true} sx={{ color: 'text.primary' }} variant=\"body1\">\n              {transaction.category ?? copy.actions_select_a_category}\n            </Text>\n          }\n          slotProps={{ primary: { variant: 'caption', fontSize: 11, fontWeight: 'normal' } }}\n        />\n        <ListItemIcon>\n          <Icon name=\"chevron_right\" sx={{ color: 'text.primary' }} />\n        </ListItemIcon>\n      </ListItemButton>\n\n      <CategorySelectorDrawer\n        initialSelected={transaction.category_guid}\n        onClose={handleCloseDrawer}\n        onSelect={handleSelected}\n        showDrawer={open}\n        title={copy.actions_select_a_category}\n      />\n\n      <Dialog\n        copy={{\n          title: buildDynamicCopy(\n            copy.actions_apply_to_all_transaction_types,\n            transaction.description,\n          ) as string,\n        }}\n        isOpen={Boolean(selectedGuid)}\n        onClose={() => setSelectedGuid('')}\n        onPrimaryAction={() => handleCategoryChange(true)}\n        onSecondaryAction={() => handleCategoryChange(false)}\n        primaryText={copy.actions_apply_to_all}\n        returnFocusTo={categoryRowRef}\n        secondaryText={copy.actions_this_time_only}\n      >\n        <P variant=\"subtitle1\">\n          {\n            buildDynamicCopy(\n              copy.actions_all_past_and_future,\n              transaction.description,\n              category?.name,\n            ) as string\n          }\n        </P>\n      </Dialog>\n    </ListItem>\n  )\n}\n\nexport default CategoryAction\n"],"mappings":"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"}
+{"version":3,"file":"CategoryAction.es.js","names":[],"sources":["../../../../../../src/transactions/components/shared/transactiondetails/actions/CategoryAction.tsx"],"sourcesContent":["import React from 'react'\n\nimport Avatar from '@mui/material/Avatar'\nimport ListItem from '@mui/material/ListItem'\nimport ListItemAvatar from '@mui/material/ListItemAvatar'\nimport ListItemButton from '@mui/material/ListItemButton'\nimport ListItemIcon from '@mui/material/ListItemIcon'\nimport ListItemText from '@mui/material/ListItemText'\nimport { useTheme } from '@mui/material/styles'\n\nimport { CategoryIcon, CategoryIconVariants, P, Text } from '@mxenabled/mxui'\nimport { Icon } from '@mxenabled/mx-icons'\nimport { CategorySelectorDrawer } from '../../../../../categories'\n\nimport {\n  ANALYTICS_EVENTS,\n  Dialog,\n  useCategoryStore,\n  useGlobalCopyStore,\n} from '../../../../../common'\nimport type { Transaction } from '../../../../../core'\n\nimport { ON_CLICK_EVENTS } from '../../../../constants/OnClickEvents'\nimport { useTransactionsUiStore } from '../../../../context/hooks'\nimport { useEvent, useTransactionStore } from '../../../../../common'\nimport { buildDynamicCopy } from '../../../../../core/utils/Localization'\n\ninterface CategoryActionProps {\n  transaction: Transaction\n}\n\nconst CategoryAction: React.FC<CategoryActionProps> = ({ transaction }) => {\n  const { addOrUpdateTransactionRule, updateTransaction } = useTransactionStore()\n  const { categories } = useCategoryStore()\n  const { onEvent } = useEvent()\n  const { setShouldDisableDrawerScroll, updateManualTransaction } = useTransactionsUiStore()\n  const { transactions: copy } = useGlobalCopyStore()\n\n  const theme = useTheme()\n\n  const categoryRowRef = React.useRef<HTMLDivElement>(null)\n  const [open, setOpen] = React.useState(false)\n  const [selectedGuid, setSelectedGuid] = React.useState('')\n\n  const handleCategoryChange = async (applyToAll: boolean) => {\n    await updateTransaction({ ...transaction, category_guid: selectedGuid })\n    if (applyToAll) {\n      await addOrUpdateTransactionRule(selectedGuid, transaction)\n    }\n    setSelectedGuid('')\n    onEvent(ANALYTICS_EVENTS.TRANSACTION_DETAILS_CLICK_CATEGORY, {\n      transaction_guid: transaction.guid,\n    })\n  }\n\n  const handleSelected = (guid: string) => {\n    if (transaction.is_manual && !transaction.guid) {\n      const category = categories.find((c) => c.guid === guid)\n      updateManualTransaction({\n        ...transaction,\n        category: category?.name,\n        category_guid: guid,\n        top_level_category_guid: category?.parent_guid || guid,\n      })\n    } else {\n      setSelectedGuid(guid)\n    }\n\n    handleCloseDrawer()\n  }\n\n  const handleCloseDrawer = () => {\n    setOpen(false)\n    setShouldDisableDrawerScroll(false)\n  }\n\n  const category = React.useMemo(\n    () => categories.find((item) => item.guid === selectedGuid),\n    [selectedGuid],\n  )\n\n  const bgColor = theme.palette.mode === 'dark' ? 'grey.800' : 'grey.100'\n\n  return (\n    <ListItem disableGutters={true} disablePadding={true}>\n      <ListItemButton\n        ref={categoryRowRef}\n        onClick={() => {\n          onEvent(ON_CLICK_EVENTS.ON_TRANSACTION_CATEGORY_CLICK)\n          setOpen(true)\n        }}\n      >\n        <ListItemAvatar>\n          <Avatar sx={{ bgcolor: bgColor }} variant=\"rounded\">\n            <CategoryIcon\n              categoryGuid={transaction.top_level_category_guid}\n              icon_ratio={1}\n              size={20}\n              sx={{ color: 'text.primary' }}\n              variant={CategoryIconVariants.Transparent}\n            />\n          </Avatar>\n        </ListItemAvatar>\n        <ListItemText\n          primary={copy.category_title}\n          secondary={\n            <Text bold={true} sx={{ color: 'text.primary' }} variant=\"body1\">\n              {transaction.category ?? copy.actions_select_a_category}\n            </Text>\n          }\n          slotProps={{ primary: { variant: 'caption', fontSize: 11, fontWeight: 'normal' } }}\n        />\n        <ListItemIcon>\n          <Icon name=\"chevron_right\" sx={{ color: 'text.primary' }} />\n        </ListItemIcon>\n      </ListItemButton>\n\n      <CategorySelectorDrawer\n        initialSelected={transaction.category_guid}\n        onClose={handleCloseDrawer}\n        onSelect={handleSelected}\n        showDrawer={open}\n        title={copy.actions_select_a_category}\n      />\n\n      <Dialog\n        copy={{\n          title: buildDynamicCopy(\n            copy.actions_apply_to_all_transaction_types,\n            transaction.description,\n          ) as string,\n        }}\n        isOpen={Boolean(selectedGuid)}\n        onClose={() => setSelectedGuid('')}\n        onPrimaryAction={() => handleCategoryChange(true)}\n        onSecondaryAction={() => handleCategoryChange(false)}\n        primaryText={copy.actions_apply_to_all}\n        returnFocusTo={categoryRowRef}\n        secondaryText={copy.actions_this_time_only}\n      >\n        <P variant=\"subtitle1\">\n          {\n            buildDynamicCopy(\n              copy.actions_all_past_and_future,\n              transaction.description,\n              category?.name,\n            ) as string\n          }\n        </P>\n      </Dialog>\n    </ListItem>\n  )\n}\n\nexport default CategoryAction\n"],"mappings":"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"}

package/package.json

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