@mx-cartographer/experiences 9.6.13 → 9.6.14

package/dist/insights-v2/actionBlocks/TransactionHistoryBlock/TransactionHistoryBlock.es.js

@@ -1,73 +1,75 @@
-import { useGlobalCopyStore as W, useGlobalUiStore as X, useInsightsV2Store as Y } from "../../../common/context/hooks.es.js";
-import { formatCurrency as Z } from "../../../core/utils/NumberFormatting.es.js";
-import tt from "../../../common/components/drawer/Drawer.es.js";
-import et from "../../../common/components/Loader.es.js";
-import { BarChartV2 as at } from "../../components/chartblocks/BarchartV2.es.js";
-import { EmptyBarChart as ot } from "../../components/chartblocks/EmptyBarChart.es.js";
-import { TransactionDrillDown as nt } from "./TransactionDrillDown.es.js";
-import { useTransactionHistory as rt } from "./useTransactionHistory.es.js";
-import { getDefaultSelection as it, getDrillDownConfig as st, getFlattenedDataSeries as lt, toStoreFilter as ct } from "./utils.es.js";
-import { getDynamicCtaBasedOnTriggers as dt } from "../util.es.js";
-import { TransactionDetailsBlock as mt } from "../TransactionDetailsBlock/TransactionDetailsBlock.es.js";
-import { useLayoutEffect as gt, useState as u } from "react";
-import { observer as pt } from "mobx-react-lite";
-import { Fragment as ut, jsx as n, jsxs as ht } from "react/jsx-runtime";
-import { useTheme as bt } from "@mui/material/styles";
-var jt = pt(({ beat: a }) => {
-  const h = bt(), { instanceSlotData: e, beatTransactions: l, spendCategoryGuids: b, allAccountGuids: f, categoryName: v, displayedDateRange: g, transactionStore: x } = rt(a), { actionDrawer: y, setActionContext: C } = Y(), { common: B, insights_feed: c } = W(), { isCopyLoaded: F } = X(), [I, T] = u(!1), [G, A] = u(!1), { insights_payload: o } = a, j = dt(y, o?.primary_cta, o?.secondary_cta, o?.in_description_cta)?.variant, { top: r, filterMode: d, header: k, colors: w, filterStrategy: H, tipSection: S } = st(j ?? ""), { dataSeries: m, chartData: i, comparisonBars: O } = lt({
+import { useGlobalCopyStore as X, useGlobalUiStore as Z, useInsightsV2Store as tt } from "../../../common/context/hooks.es.js";
+import { formatCurrency as et } from "../../../core/utils/NumberFormatting.es.js";
+import at from "../../../common/components/drawer/Drawer.es.js";
+import ot from "../../../common/components/Loader.es.js";
+import { BarChartV2 as nt } from "../../components/chartblocks/BarchartV2.es.js";
+import { EmptyBarChart as rt } from "../../components/chartblocks/EmptyBarChart.es.js";
+import { ANALYTICS_EVENTS_CONFIG as A } from "../../analytics/analyticsEventsConfig.es.js";
+import { useAnalyticsEvent as it } from "../../analytics/useAnalyticsEvent.es.js";
+import { TransactionDrillDown as st } from "./TransactionDrillDown.es.js";
+import { useTransactionHistory as lt } from "./useTransactionHistory.es.js";
+import { getDefaultSelection as ct, getDrillDownConfig as mt, getFlattenedDataSeries as dt, toStoreFilter as pt } from "./utils.es.js";
+import { getDynamicCtaBasedOnTriggers as gt } from "../util.es.js";
+import { TransactionDetailsBlock as ut } from "../TransactionDetailsBlock/TransactionDetailsBlock.es.js";
+import { useLayoutEffect as ft, useState as u } from "react";
+import { observer as ht } from "mobx-react-lite";
+import { Fragment as yt, jsx as n, jsxs as bt } from "react/jsx-runtime";
+import { useTheme as Ct } from "@mui/material/styles";
+var kt = ht(({ beat: a }) => {
+  const f = Ct(), { instanceSlotData: e, beatTransactions: l, spendCategoryGuids: h, allAccountGuids: y, categoryName: x, displayedDateRange: p, transactionStore: B } = lt(a), { actionDrawer: b, setActionContext: C } = tt(), { common: E, insights_feed: c } = X(), { isCopyLoaded: I } = Z(), [F, T] = u(!1), [G, H] = u(!1), _ = it(), { insights_payload: o } = a, O = gt(b, o?.primary_cta, o?.secondary_cta, o?.in_description_cta)?.variant, { top: r, filterMode: m, header: R, colors: j, filterStrategy: k, tipSection: S } = mt(O ?? ""), { dataSeries: d, chartData: i, comparisonBars: w } = dt({
     data: e?.data_series,
     ariaLabel: e?.ariaLabel ?? "",
     top: r,
     beatTransactions: l,
     payload: e
-  }), { chartBarIndex: E, subTabIndex: K } = it({
+  }), { chartBarIndex: K, subTabIndex: N } = ct({
     chartTabCount: i.length,
-    comparisonTabCount: O.length,
-    actionDrawer: y,
+    comparisonTabCount: w.length,
+    actionDrawer: b,
     beatGuid: a.guid
-  }), [s, _] = u(E), D = (t) => H({
+  }), [s, D] = u(K), L = (t) => k({
     beat: a,
     beatTransactions: l,
-    dataSeries: m,
+    dataSeries: d,
     selectedIndex: t,
-    subIndex: K,
-    isLastTab: t === m.length - 1,
+    subIndex: N,
+    isLastTab: t === d.length - 1,
     instanceSlotData: e,
-    spendCategoryGuids: b,
-    displayedDateRange: g
-  }), V = l.map((t) => t.guid).join(","), R = b.join(","), M = f.join(","), N = r === "list" || m.length > 0, L = () => {
-    d !== "store" || !N || x.setFilter(ct(D(s), {
-      allAccountGuids: f,
-      displayedDateRange: g
+    spendCategoryGuids: h,
+    displayedDateRange: p
+  }), V = l.map((t) => t.guid).join(","), M = h.join(","), P = y.join(","), U = r === "list" || d.length > 0, v = () => {
+    m !== "store" || !U || B.setFilter(pt(L(s), {
+      allAccountGuids: y,
+      displayedDateRange: p
     }));
   };
-  gt(() => {
-    L();
+  ft(() => {
+    v();
   }, [
     a.guid,
     s,
-    d,
-    m.length,
+    m,
+    d.length,
     e,
-    g,
-    R,
+    p,
     M,
+    P,
     V,
     r
   ]);
-  const p = k?.({
+  const g = R?.({
     title: o?.title,
     subHeader: o?.sub_title,
-    categoryName: v,
+    categoryName: x,
     selectedDate: i[s]?.date ?? void 0
-  }), P = w(h, e?.category_guid);
-  if (!F) return /* @__PURE__ */ n(et, {});
-  const U = [c.general.monthly_amount, c.general.trend], [$, q] = e?.legends?.length ? e.legends.map((t) => t.label) : U, z = d === "local" ? (t) => D(t).custom ?? (() => !0) : void 0, J = d === "local" ? l : void 0, Q = r === "singleBar" || r === "upcomingBill" ? i.length ? /* @__PURE__ */ n(at, {
+  }), W = j(f, e?.category_guid);
+  if (!I) return /* @__PURE__ */ n(ot, {});
+  const Y = [c.general.monthly_amount, c.general.trend], [$, q] = e?.legends?.length ? e.legends.map((t) => t.label) : Y, z = m === "local" ? (t) => L(t).custom ?? (() => !0) : void 0, J = m === "local" ? l : void 0, Q = r === "singleBar" || r === "upcomingBill" ? i.length ? /* @__PURE__ */ n(nt, {
     amounts: {
       average: e?.average_amount,
-      formattedAverage: Z(e?.average_amount ?? 0, "0,0.00")
+      formattedAverage: et(e?.average_amount ?? 0, "0,0.00")
     },
-    color: P[0] ?? h.palette.primary.main,
+    color: W[0] ?? f.palette.primary.main,
     data: i,
     legendPosition: "top",
     heightOverride: 142,
@@ -78,40 +80,44 @@ var jt = pt(({ beat: a }) => {
       right: 24
     },
     monthlyAmountLabel: $,
-    onBarClick: _,
+    onBarClick: (t) => {
+      _(A.DRAWER_CHART_BAR_CLICKED), D(t);
+    },
     selectedTabIndex: s,
     trendAmountLabel: q
-  }) : /* @__PURE__ */ n(ot, {}) : null;
-  return /* @__PURE__ */ ht(ut, { children: [/* @__PURE__ */ n(nt, {
+  }) : /* @__PURE__ */ n(rt, {}) : null;
+  return /* @__PURE__ */ bt(yt, { children: [/* @__PURE__ */ n(st, {
     ariaLabel: e?.ariaLabel,
     baseTransactions: J,
-    heading: p?.heading,
-    icon: p?.icon,
-    onSelectionChange: _,
+    heading: g?.heading,
+    icon: g?.icon,
+    onSelectionChange: (t) => {
+      _(A.TAB_SELECTED), D(t);
+    },
     selectedIndex: s,
-    subHeadingText: p?.subHeadingText,
+    subHeadingText: g?.subHeadingText,
     tabs: i.map((t) => ({
       ariaLabel: t.ariaLabel,
       label: t.label
     })),
     top: Q,
-    ...S && { tipSection: !G && S(A, c, o?.sub_title?.text) },
+    ...S && { tipSection: !G && S(H, c, o?.sub_title?.text) },
     transactionFilter: z,
     onEachRowClick: (t) => {
       C({ transaction_guid: t }), T(!0);
     }
-  }), /* @__PURE__ */ n(tt, {
-    ariaLabelClose: B.close_aria,
-    isOpen: I,
+  }), /* @__PURE__ */ n(at, {
+    ariaLabelClose: E.close_aria,
+    isOpen: F,
     onClose: () => {
-      T(!1), C({ transaction_guid: void 0 }), L();
+      T(!1), C({ transaction_guid: void 0 }), v();
     },
     title: c.general.transaction_details_title,
-    children: /* @__PURE__ */ n(mt, { beat: a })
+    children: /* @__PURE__ */ n(ut, { beat: a })
   })] });
 });
 export {
-  jt as TransactionHistoryBlock
+  kt as TransactionHistoryBlock
 };
 
 //# sourceMappingURL=TransactionHistoryBlock.es.js.map

package/dist/insights-v2/actionBlocks/TransactionHistoryBlock/TransactionHistoryBlock.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"TransactionHistoryBlock.es.js","names":[],"sources":["../../../../src/insights-v2/actionBlocks/TransactionHistoryBlock/TransactionHistoryBlock.tsx"],"sourcesContent":["import { useLayoutEffect, useState } from 'react'\n\nimport { useTheme } from '@mui/material/styles'\nimport { observer } from 'mobx-react-lite'\n\nimport type { Beat, DataSeries, Transaction } from '../../../core'\nimport { formatCurrency } from '../../../core/utils/NumberFormatting'\nimport { BarChartV2 } from '../../components/chartblocks/BarchartV2'\nimport { EmptyBarChart } from '../../components/chartblocks/EmptyBarChart'\n\nimport { TransactionDrillDown } from './TransactionDrillDown'\nimport { useTransactionHistory } from './useTransactionHistory'\nimport {\n  getDefaultSelection,\n  getDrillDownConfig,\n  getFlattenedDataSeries,\n  toStoreFilter,\n} from './utils'\nimport {\n  Drawer,\n  useInsightsV2Store,\n  useGlobalCopyStore,\n  useGlobalUiStore,\n  Loader,\n} from '../../../common'\nimport { TransactionDetailsBlock } from '../TransactionDetailsBlock'\nimport { getDynamicCtaBasedOnTriggers } from '../util'\n\ninterface TransactionHistoryProp {\n  beat: Beat\n}\n\nexport const TransactionHistoryBlock = observer(({ beat }: TransactionHistoryProp) => {\n  const theme = useTheme()\n  const {\n    instanceSlotData,\n    beatTransactions,\n    spendCategoryGuids,\n    allAccountGuids,\n    categoryName,\n    displayedDateRange,\n    transactionStore,\n  } = useTransactionHistory(beat)\n\n  const { actionDrawer, setActionContext } = useInsightsV2Store()\n\n  const { common: commonCopy, insights_feed: insightsCopy } = useGlobalCopyStore()\n\n  const { isCopyLoaded } = useGlobalUiStore()\n\n  const [isTransactionDetailsOpen, setIsTransactionDetailsOpen] = useState(false)\n\n  const [closeTipSection, setCloseTipSection] = useState(false)\n\n  const { insights_payload } = beat\n\n  const dynamicCtaVariant = getDynamicCtaBasedOnTriggers(\n    actionDrawer,\n    insights_payload?.primary_cta,\n    insights_payload?.secondary_cta,\n    insights_payload?.in_description_cta,\n  )?.variant\n\n  const { top, filterMode, header, colors, filterStrategy, tipSection } = getDrillDownConfig(\n    dynamicCtaVariant ?? '',\n  )\n\n  const { dataSeries, chartData, comparisonBars } = getFlattenedDataSeries({\n    data: instanceSlotData?.data_series as DataSeries,\n    ariaLabel: instanceSlotData?.ariaLabel ?? '',\n    top,\n    beatTransactions,\n    payload: instanceSlotData,\n  })\n\n  const { chartBarIndex, subTabIndex } = getDefaultSelection({\n    chartTabCount: chartData.length,\n    comparisonTabCount: comparisonBars.length,\n    actionDrawer,\n    beatGuid: beat.guid,\n  })\n\n  const [selectedIndex, setSelectedIndex] = useState(chartBarIndex)\n\n  const resolveFilter = (index: number) =>\n    filterStrategy({\n      beat,\n      beatTransactions,\n      dataSeries,\n      selectedIndex: index,\n      subIndex: subTabIndex,\n      isLastTab: index === dataSeries.length - 1,\n      instanceSlotData,\n      spendCategoryGuids,\n      displayedDateRange,\n    })\n\n  // Apply the current selection's filter. Store variants route through the store filter; local\n  // (upcomingBill) variants filter beatTransactions directly and only backfill the cache when the\n  // Stable primitive keys for the collections below: beatTransactions/spendCategoryGuids/\n  // allAccountGuids are recomputed (new array identity) every render, so depending on them directly\n  // re-fires the effect each render (REVIEW.md MEW-3732). Key on content instead.\n  const beatTransactionGuidsKey = beatTransactions.map((transaction) => transaction.guid).join(',')\n  const spendCategoryGuidsKey = spendCategoryGuids.join(',')\n  const allAccountGuidsKey = allAccountGuids.join(',')\n\n  // Re-applies the current selection's filter to the shared transactionStore. Called both by the\n  // effect below (on selection change) and when the nested TransactionDetailsBlock drawer closes:\n  // AddMerchantBudgetAction (opened from within that drawer) overwrites transactionStore.filter\n  // with a merchant_guid-only filter while its own drawer is open, and never restores it — leaving\n  // the row list stuck showing only that one merchant's transactions after backing all the way out.\n  // Re-running this on close re-derives the filter fresh instead of relying on whatever the nested\n  // drawers left behind.\n  // A `list` drawer has no bars: it filters once from the beat alone.\n  const canApplyFilter = top === 'list' || dataSeries.length > 0\n  const applyCurrentSelectionFilter = () => {\n    if (filterMode !== 'store' || !canApplyFilter) return\n    transactionStore.setFilter(\n      toStoreFilter(resolveFilter(selectedIndex), { allAccountGuids, displayedDateRange }),\n    )\n  }\n\n  // store variants route the selection through the shared store filter; local (upcomingBill) variants\n  // filter beatTransactions directly, so there's nothing to push to the store for them.\n  useLayoutEffect(() => {\n    applyCurrentSelectionFilter()\n  }, [\n    beat.guid,\n    selectedIndex,\n    filterMode,\n    dataSeries.length,\n    instanceSlotData,\n    displayedDateRange,\n    spendCategoryGuidsKey,\n    allAccountGuidsKey,\n    beatTransactionGuidsKey,\n    top,\n  ])\n\n  const headerContent = header?.({\n    title: insights_payload?.title,\n    subHeader: insights_payload?.sub_title,\n    categoryName,\n    selectedDate: chartData[selectedIndex]?.date ?? undefined,\n  })\n\n  const barColors = colors(theme, instanceSlotData?.category_guid)\n\n  if (!isCopyLoaded) return <Loader />\n\n  // TODO: Temporary fallback while the backend doesn't always send `legends` on every beat/variant.\n  // Remove this once the backend guarantees `legends` on the payload.\n  const legendFallbackLabels = [insightsCopy.general.monthly_amount, insightsCopy.general.trend]\n\n  const [monthlyAmountLabel, trendAmountLabel] = instanceSlotData?.legends?.length\n    ? instanceSlotData.legends.map((legend) => legend.label)\n    : legendFallbackLabels\n\n  const transactionFilter =\n    filterMode === 'local'\n      ? (index: number) => resolveFilter(index).custom ?? (() => true)\n      : undefined\n\n  const baseTransactions: Transaction[] | undefined =\n    filterMode === 'local' ? beatTransactions : undefined\n\n  const isBarTop = top === 'singleBar' || top === 'upcomingBill'\n  const chartTop = !isBarTop ? null : chartData.length ? (\n    <BarChartV2\n      amounts={{\n        average: instanceSlotData?.average_amount,\n        formattedAverage: formatCurrency(instanceSlotData?.average_amount ?? 0, '0,0.00'),\n      }}\n      color={barColors[0] ?? theme.palette.primary.main}\n      data={chartData}\n      legendPosition=\"top\"\n      heightOverride={142}\n      margin={{\n        bottom: 8,\n        top: 24,\n        left: 24,\n        right: 24,\n      }}\n      monthlyAmountLabel={monthlyAmountLabel}\n      onBarClick={setSelectedIndex}\n      selectedTabIndex={selectedIndex}\n      trendAmountLabel={trendAmountLabel}\n    />\n  ) : (\n    <EmptyBarChart />\n  )\n\n  return (\n    <>\n      <TransactionDrillDown\n        ariaLabel={instanceSlotData?.ariaLabel}\n        baseTransactions={baseTransactions}\n        heading={headerContent?.heading}\n        icon={headerContent?.icon}\n        onSelectionChange={setSelectedIndex}\n        selectedIndex={selectedIndex}\n        subHeadingText={headerContent?.subHeadingText}\n        tabs={chartData.map((bar) => ({\n          ariaLabel: bar.ariaLabel,\n          label: bar.label,\n        }))}\n        top={chartTop}\n        {...(tipSection && {\n          tipSection:\n            !closeTipSection &&\n            tipSection(setCloseTipSection, insightsCopy, insights_payload?.sub_title?.text),\n        })}\n        transactionFilter={transactionFilter}\n        onEachRowClick={(guid) => {\n          setActionContext({ transaction_guid: guid })\n          setIsTransactionDetailsOpen(true)\n        }}\n      />\n      <Drawer\n        ariaLabelClose={commonCopy.close_aria}\n        isOpen={isTransactionDetailsOpen}\n        onClose={() => {\n          setIsTransactionDetailsOpen(false)\n          // Clear only the key this nested drawer owns — setActionContext merges, so an\n          // explicit `{}` would be a no-op and leave transaction_guid stuck in the shared\n          // context, and the outer drawer's own context (e.g. chartBarIndex) must survive.\n          setActionContext({ transaction_guid: undefined })\n          // Re-apply this block's own filter: a further-nested AddMerchantBudgetAction drawer may\n          // have overwritten transactionStore.filter (merchant_guid-only) without restoring it.\n          applyCurrentSelectionFilter()\n        }}\n        title={insightsCopy.general.transaction_details_title}\n      >\n        <TransactionDetailsBlock beat={beat} />\n      </Drawer>\n    </>\n  )\n})\n"],"mappings":"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"}
+{"version":3,"file":"TransactionHistoryBlock.es.js","names":[],"sources":["../../../../src/insights-v2/actionBlocks/TransactionHistoryBlock/TransactionHistoryBlock.tsx"],"sourcesContent":["import { useLayoutEffect, useState } from 'react'\n\nimport { useTheme } from '@mui/material/styles'\nimport { observer } from 'mobx-react-lite'\n\nimport type { Beat, DataSeries, Transaction } from '../../../core'\nimport { formatCurrency } from '../../../core/utils/NumberFormatting'\nimport { ANALYTICS_EVENTS_CONFIG, useAnalyticsEvent } from '../../analytics'\nimport { BarChartV2 } from '../../components/chartblocks/BarchartV2'\nimport { EmptyBarChart } from '../../components/chartblocks/EmptyBarChart'\n\nimport { TransactionDrillDown } from './TransactionDrillDown'\nimport { useTransactionHistory } from './useTransactionHistory'\nimport {\n  getDefaultSelection,\n  getDrillDownConfig,\n  getFlattenedDataSeries,\n  toStoreFilter,\n} from './utils'\nimport {\n  Drawer,\n  useInsightsV2Store,\n  useGlobalCopyStore,\n  useGlobalUiStore,\n  Loader,\n} from '../../../common'\nimport { TransactionDetailsBlock } from '../TransactionDetailsBlock'\nimport { getDynamicCtaBasedOnTriggers } from '../util'\n\ninterface TransactionHistoryProp {\n  beat: Beat\n}\n\nexport const TransactionHistoryBlock = observer(({ beat }: TransactionHistoryProp) => {\n  const theme = useTheme()\n  const {\n    instanceSlotData,\n    beatTransactions,\n    spendCategoryGuids,\n    allAccountGuids,\n    categoryName,\n    displayedDateRange,\n    transactionStore,\n  } = useTransactionHistory(beat)\n\n  const { actionDrawer, setActionContext } = useInsightsV2Store()\n\n  const { common: commonCopy, insights_feed: insightsCopy } = useGlobalCopyStore()\n\n  const { isCopyLoaded } = useGlobalUiStore()\n\n  const [isTransactionDetailsOpen, setIsTransactionDetailsOpen] = useState(false)\n\n  const [closeTipSection, setCloseTipSection] = useState(false)\n\n  const fireAnalyticsEvent = useAnalyticsEvent()\n\n  const { insights_payload } = beat\n\n  const dynamicCtaVariant = getDynamicCtaBasedOnTriggers(\n    actionDrawer,\n    insights_payload?.primary_cta,\n    insights_payload?.secondary_cta,\n    insights_payload?.in_description_cta,\n  )?.variant\n\n  const { top, filterMode, header, colors, filterStrategy, tipSection } = getDrillDownConfig(\n    dynamicCtaVariant ?? '',\n  )\n\n  const { dataSeries, chartData, comparisonBars } = getFlattenedDataSeries({\n    data: instanceSlotData?.data_series as DataSeries,\n    ariaLabel: instanceSlotData?.ariaLabel ?? '',\n    top,\n    beatTransactions,\n    payload: instanceSlotData,\n  })\n\n  const { chartBarIndex, subTabIndex } = getDefaultSelection({\n    chartTabCount: chartData.length,\n    comparisonTabCount: comparisonBars.length,\n    actionDrawer,\n    beatGuid: beat.guid,\n  })\n\n  const [selectedIndex, setSelectedIndex] = useState(chartBarIndex)\n\n  const resolveFilter = (index: number) =>\n    filterStrategy({\n      beat,\n      beatTransactions,\n      dataSeries,\n      selectedIndex: index,\n      subIndex: subTabIndex,\n      isLastTab: index === dataSeries.length - 1,\n      instanceSlotData,\n      spendCategoryGuids,\n      displayedDateRange,\n    })\n\n  // Apply the current selection's filter. Store variants route through the store filter; local\n  // (upcomingBill) variants filter beatTransactions directly and only backfill the cache when the\n  // Stable primitive keys for the collections below: beatTransactions/spendCategoryGuids/\n  // allAccountGuids are recomputed (new array identity) every render, so depending on them directly\n  // re-fires the effect each render (REVIEW.md MEW-3732). Key on content instead.\n  const beatTransactionGuidsKey = beatTransactions.map((transaction) => transaction.guid).join(',')\n  const spendCategoryGuidsKey = spendCategoryGuids.join(',')\n  const allAccountGuidsKey = allAccountGuids.join(',')\n\n  // Re-applies the current selection's filter to the shared transactionStore. Called both by the\n  // effect below (on selection change) and when the nested TransactionDetailsBlock drawer closes:\n  // AddMerchantBudgetAction (opened from within that drawer) overwrites transactionStore.filter\n  // with a merchant_guid-only filter while its own drawer is open, and never restores it — leaving\n  // the row list stuck showing only that one merchant's transactions after backing all the way out.\n  // Re-running this on close re-derives the filter fresh instead of relying on whatever the nested\n  // drawers left behind.\n  // A `list` drawer has no bars: it filters once from the beat alone.\n  const canApplyFilter = top === 'list' || dataSeries.length > 0\n  const applyCurrentSelectionFilter = () => {\n    if (filterMode !== 'store' || !canApplyFilter) return\n    transactionStore.setFilter(\n      toStoreFilter(resolveFilter(selectedIndex), { allAccountGuids, displayedDateRange }),\n    )\n  }\n\n  // store variants route the selection through the shared store filter; local (upcomingBill) variants\n  // filter beatTransactions directly, so there's nothing to push to the store for them.\n  useLayoutEffect(() => {\n    applyCurrentSelectionFilter()\n  }, [\n    beat.guid,\n    selectedIndex,\n    filterMode,\n    dataSeries.length,\n    instanceSlotData,\n    displayedDateRange,\n    spendCategoryGuidsKey,\n    allAccountGuidsKey,\n    beatTransactionGuidsKey,\n    top,\n  ])\n\n  const headerContent = header?.({\n    title: insights_payload?.title,\n    subHeader: insights_payload?.sub_title,\n    categoryName,\n    selectedDate: chartData[selectedIndex]?.date ?? undefined,\n  })\n\n  const barColors = colors(theme, instanceSlotData?.category_guid)\n\n  if (!isCopyLoaded) return <Loader />\n\n  // TODO: Temporary fallback while the backend doesn't always send `legends` on every beat/variant.\n  // Remove this once the backend guarantees `legends` on the payload.\n  const legendFallbackLabels = [insightsCopy.general.monthly_amount, insightsCopy.general.trend]\n\n  const [monthlyAmountLabel, trendAmountLabel] = instanceSlotData?.legends?.length\n    ? instanceSlotData.legends.map((legend) => legend.label)\n    : legendFallbackLabels\n\n  const transactionFilter =\n    filterMode === 'local'\n      ? (index: number) => resolveFilter(index).custom ?? (() => true)\n      : undefined\n\n  const baseTransactions: Transaction[] | undefined =\n    filterMode === 'local' ? beatTransactions : undefined\n\n  const isBarTop = top === 'singleBar' || top === 'upcomingBill'\n  const chartTop = !isBarTop ? null : chartData.length ? (\n    <BarChartV2\n      amounts={{\n        average: instanceSlotData?.average_amount,\n        formattedAverage: formatCurrency(instanceSlotData?.average_amount ?? 0, '0,0.00'),\n      }}\n      color={barColors[0] ?? theme.palette.primary.main}\n      data={chartData}\n      legendPosition=\"top\"\n      heightOverride={142}\n      margin={{\n        bottom: 8,\n        top: 24,\n        left: 24,\n        right: 24,\n      }}\n      monthlyAmountLabel={monthlyAmountLabel}\n      onBarClick={(index) => {\n        fireAnalyticsEvent(ANALYTICS_EVENTS_CONFIG.DRAWER_CHART_BAR_CLICKED)\n        setSelectedIndex(index)\n      }}\n      selectedTabIndex={selectedIndex}\n      trendAmountLabel={trendAmountLabel}\n    />\n  ) : (\n    <EmptyBarChart />\n  )\n\n  return (\n    <>\n      <TransactionDrillDown\n        ariaLabel={instanceSlotData?.ariaLabel}\n        baseTransactions={baseTransactions}\n        heading={headerContent?.heading}\n        icon={headerContent?.icon}\n        onSelectionChange={(index) => {\n          // MUI Tabs only fires onChange on real user selection, not on mount.\n          fireAnalyticsEvent(ANALYTICS_EVENTS_CONFIG.TAB_SELECTED)\n          setSelectedIndex(index)\n        }}\n        selectedIndex={selectedIndex}\n        subHeadingText={headerContent?.subHeadingText}\n        tabs={chartData.map((bar) => ({\n          ariaLabel: bar.ariaLabel,\n          label: bar.label,\n        }))}\n        top={chartTop}\n        {...(tipSection && {\n          tipSection:\n            !closeTipSection &&\n            tipSection(setCloseTipSection, insightsCopy, insights_payload?.sub_title?.text),\n        })}\n        transactionFilter={transactionFilter}\n        onEachRowClick={(guid) => {\n          setActionContext({ transaction_guid: guid })\n          setIsTransactionDetailsOpen(true)\n        }}\n      />\n      <Drawer\n        ariaLabelClose={commonCopy.close_aria}\n        isOpen={isTransactionDetailsOpen}\n        onClose={() => {\n          setIsTransactionDetailsOpen(false)\n          // Clear only the key this nested drawer owns — setActionContext merges, so an\n          // explicit `{}` would be a no-op and leave transaction_guid stuck in the shared\n          // context, and the outer drawer's own context (e.g. chartBarIndex) must survive.\n          setActionContext({ transaction_guid: undefined })\n          // Re-apply this block's own filter: a further-nested AddMerchantBudgetAction drawer may\n          // have overwritten transactionStore.filter (merchant_guid-only) without restoring it.\n          applyCurrentSelectionFilter()\n        }}\n        title={insightsCopy.general.transaction_details_title}\n      >\n        <TransactionDetailsBlock beat={beat} />\n      </Drawer>\n    </>\n  )\n})\n"],"mappings":"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"}

package/dist/insights-v2/analytics/analyticsEventsConfig.d.ts

@@ -0,0 +1,67 @@
+import { Beat } from '../../core';
+export declare const sentenceCaseTemplate: (template?: string | null) => string;
+type Resolvable = string | ((beat: Beat) => string);
+export interface AnalyticsEventConfigEntry {
+    category?: Resolvable;
+    action?: Resolvable;
+    postHog?: {
+        eventName: string;
+        properties?: (beat: Beat) => Record<string, unknown>;
+    };
+}
+export declare const ANALYTICS_EVENTS_CONFIG: {
+    readonly PRIMARY_ACTION_SELECTED: {
+        readonly category: "Beat Interaction";
+        readonly action: "Primary Action Selected";
+    };
+    readonly SECONDARY_ACTION_SELECTED: {
+        readonly category: "Beat Interaction";
+        readonly action: "Secondary Action Selected";
+    };
+    readonly FIRST_TIME_PRIMARY_ACTION_SELECTED: {
+        readonly category: "Beat Interaction";
+        readonly action: "First Time Primary Action Selected";
+    };
+    readonly CHART_BAR_CLICKED: {
+        readonly category: "Beat Chart";
+        readonly action: (beat: Beat) => string;
+    };
+    readonly DRAWER_CHART_BAR_CLICKED: {
+        readonly category: "Drawer Chart";
+        readonly action: (beat: Beat) => string;
+    };
+    readonly TAB_SELECTED: {
+        readonly category: "Drawer Chart";
+        readonly action: (beat: Beat) => string;
+    };
+    readonly EDIT_INSIGHT_THRESHOLD_SAVE: {
+        readonly category: "User Configurable Settings";
+        readonly action: "Edit Insight Threshold Save";
+    };
+    readonly EDIT_INSIGHT_THRESHOLD_CANCELED: {
+        readonly category: "User Configurable Settings";
+        readonly action: "Edit Insight Threshold Canceled";
+    };
+    readonly EDIT_INSIGHT_THRESHOLD_INPUT_SELECTED: {
+        readonly category: "User Configurable Settings";
+        readonly action: "Edit Insight Threshold Input Selected";
+    };
+    readonly EDIT_SAFETY_NET_SAVE: {
+        readonly category: "Safety Net";
+        readonly action: "Edit Safety Net";
+    };
+    readonly EDIT_SAFETY_NET_CANCEL: {
+        readonly category: "Safety Net";
+        readonly action: (beat: Beat) => string;
+    };
+    readonly OPENED_CONNECT_DRAWER: {
+        readonly postHog: {
+            readonly eventName: "opened_connect_drawer";
+            readonly properties: (beat: Beat) => {
+                beat_guid: string;
+                template: string;
+            };
+        };
+    };
+};
+export {};

package/dist/insights-v2/analytics/analyticsEventsConfig.es.js

@@ -0,0 +1,59 @@
+var t = (e) => e?.replace(/([A-Z]+)/g, " $1")?.replace(/^ /, "") ?? "", a = {
+  PRIMARY_ACTION_SELECTED: {
+    category: "Beat Interaction",
+    action: "Primary Action Selected"
+  },
+  SECONDARY_ACTION_SELECTED: {
+    category: "Beat Interaction",
+    action: "Secondary Action Selected"
+  },
+  FIRST_TIME_PRIMARY_ACTION_SELECTED: {
+    category: "Beat Interaction",
+    action: "First Time Primary Action Selected"
+  },
+  CHART_BAR_CLICKED: {
+    category: "Beat Chart",
+    action: (e) => `${t(e.template)} - Bar Clicked`
+  },
+  DRAWER_CHART_BAR_CLICKED: {
+    category: "Drawer Chart",
+    action: (e) => `${t(e.template)} - Bar Clicked`
+  },
+  TAB_SELECTED: {
+    category: "Drawer Chart",
+    action: (e) => `${t(e.template)} - Month Tab Selected`
+  },
+  EDIT_INSIGHT_THRESHOLD_SAVE: {
+    category: "User Configurable Settings",
+    action: "Edit Insight Threshold Save"
+  },
+  EDIT_INSIGHT_THRESHOLD_CANCELED: {
+    category: "User Configurable Settings",
+    action: "Edit Insight Threshold Canceled"
+  },
+  EDIT_INSIGHT_THRESHOLD_INPUT_SELECTED: {
+    category: "User Configurable Settings",
+    action: "Edit Insight Threshold Input Selected"
+  },
+  EDIT_SAFETY_NET_SAVE: {
+    category: "Safety Net",
+    action: "Edit Safety Net"
+  },
+  EDIT_SAFETY_NET_CANCEL: {
+    category: "Safety Net",
+    action: (e) => `${t(e.template)} = Edit Safety Net - Cancel`
+  },
+  OPENED_CONNECT_DRAWER: { postHog: {
+    eventName: "opened_connect_drawer",
+    properties: (e) => ({
+      beat_guid: e.guid,
+      template: e.template
+    })
+  } }
+};
+export {
+  a as ANALYTICS_EVENTS_CONFIG,
+  t as sentenceCaseTemplate
+};
+
+//# sourceMappingURL=analyticsEventsConfig.es.js.map

package/dist/insights-v2/analytics/analyticsEventsConfig.es.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"analyticsEventsConfig.es.js","names":[],"sources":["../../../src/insights-v2/analytics/analyticsEventsConfig.ts"],"sourcesContent":["import type { Beat } from '../../core'\n\n// PascalCase template to label, ported from Pulse.\nexport const sentenceCaseTemplate = (template?: string | null): string =>\n  template?.replace(/([A-Z]+)/g, ' $1')?.replace(/^ /, '') ?? ''\n\n// Fixed or beat-computed value.\ntype Resolvable = string | ((beat: Beat) => string)\n\n// Source of truth for insights-v2 analytics events. Mirrors Pulse's strings.\n// Entry has a Firefly half (action/category) and/or a postHog half.\nexport interface AnalyticsEventConfigEntry {\n  category?: Resolvable\n  action?: Resolvable\n  postHog?: {\n    eventName: string\n    properties?: (beat: Beat) => Record<string, unknown>\n  }\n}\n\nexport const ANALYTICS_EVENTS_CONFIG = {\n  // Primary/secondary CTA click, fired via sendCtaAnalytics.\n  PRIMARY_ACTION_SELECTED: {\n    category: 'Beat Interaction',\n    action: 'Primary Action Selected',\n  },\n  SECONDARY_ACTION_SELECTED: {\n    category: 'Beat Interaction',\n    action: 'Secondary Action Selected',\n  },\n  // Fires once, gated on !beat.cta_clicked_at.\n  FIRST_TIME_PRIMARY_ACTION_SELECTED: {\n    category: 'Beat Interaction',\n    action: 'First Time Primary Action Selected',\n  },\n\n  // Bar click on the card's inline chart.\n  CHART_BAR_CLICKED: {\n    category: 'Beat Chart',\n    action: (beat) => `${sentenceCaseTemplate(beat.template)} - Bar Clicked`,\n  },\n  // Bar click inside the drill-down drawer.\n  DRAWER_CHART_BAR_CLICKED: {\n    category: 'Drawer Chart',\n    action: (beat) => `${sentenceCaseTemplate(beat.template)} - Bar Clicked`,\n  },\n  // Month/tab change inside the drill-down drawer.\n  TAB_SELECTED: {\n    category: 'Drawer Chart',\n    action: (beat) => `${sentenceCaseTemplate(beat.template)} - Month Tab Selected`,\n  },\n\n  // LowAccountBalance threshold dialog.\n  EDIT_INSIGHT_THRESHOLD_SAVE: {\n    category: 'User Configurable Settings',\n    action: 'Edit Insight Threshold Save',\n  },\n  EDIT_INSIGHT_THRESHOLD_CANCELED: {\n    category: 'User Configurable Settings',\n    action: 'Edit Insight Threshold Canceled',\n  },\n  EDIT_INSIGHT_THRESHOLD_INPUT_SELECTED: {\n    category: 'User Configurable Settings',\n    action: 'Edit Insight Threshold Input Selected',\n  },\n\n  // SavingsOpportunityV2 safety-net dialog.\n  EDIT_SAFETY_NET_SAVE: {\n    category: 'Safety Net',\n    action: 'Edit Safety Net',\n  },\n  // Ported verbatim from Pulse (uses '=' not '-').\n  EDIT_SAFETY_NET_CANCEL: {\n    category: 'Safety Net',\n    action: (beat) => `${sentenceCaseTemplate(beat.template)} = Edit Safety Net - Cancel`,\n  },\n\n  // Connect drawer opened. PostHog-only.\n  OPENED_CONNECT_DRAWER: {\n    postHog: {\n      eventName: 'opened_connect_drawer',\n      properties: (beat) => ({ beat_guid: beat.guid, template: beat.template }),\n    },\n  },\n} as const satisfies Record<string, AnalyticsEventConfigEntry>\n"],"mappings":"AAGA,IAAa,IAAA,CAAwB,MACnC,GAAU,QAAQ,aAAa,KAAK,GAAG,QAAQ,MAAM,EAAE,KAAK,IAgBjD,IAA0B;AAAA,EAErC,yBAAyB;AAAA,IACvB,UAAU;AAAA,IACV,QAAQ;AAAA,EACV;AAAA,EACA,2BAA2B;AAAA,IACzB,UAAU;AAAA,IACV,QAAQ;AAAA,EACV;AAAA,EAEA,oCAAoC;AAAA,IAClC,UAAU;AAAA,IACV,QAAQ;AAAA,EACV;AAAA,EAGA,mBAAmB;AAAA,IACjB,UAAU;AAAA,IACV,QAAA,CAAS,MAAS,GAAG,EAAqB,EAAK,QAAQ,CAAA;AAAA,EACzD;AAAA,EAEA,0BAA0B;AAAA,IACxB,UAAU;AAAA,IACV,QAAA,CAAS,MAAS,GAAG,EAAqB,EAAK,QAAQ,CAAA;AAAA,EACzD;AAAA,EAEA,cAAc;AAAA,IACZ,UAAU;AAAA,IACV,QAAA,CAAS,MAAS,GAAG,EAAqB,EAAK,QAAQ,CAAA;AAAA,EACzD;AAAA,EAGA,6BAA6B;AAAA,IAC3B,UAAU;AAAA,IACV,QAAQ;AAAA,EACV;AAAA,EACA,iCAAiC;AAAA,IAC/B,UAAU;AAAA,IACV,QAAQ;AAAA,EACV;AAAA,EACA,uCAAuC;AAAA,IACrC,UAAU;AAAA,IACV,QAAQ;AAAA,EACV;AAAA,EAGA,sBAAsB;AAAA,IACpB,UAAU;AAAA,IACV,QAAQ;AAAA,EACV;AAAA,EAEA,wBAAwB;AAAA,IACtB,UAAU;AAAA,IACV,QAAA,CAAS,MAAS,GAAG,EAAqB,EAAK,QAAQ,CAAA;AAAA,EACzD;AAAA,EAGA,uBAAuB,EACrB,SAAS;AAAA,IACP,WAAW;AAAA,IACX,YAAA,CAAa,OAAU;AAAA,MAAE,WAAW,EAAK;AAAA,MAAM,UAAU,EAAK;AAAA,IAAS;AAAA,EACzE,EACF;AACF"}

package/dist/insights-v2/analytics/index.d.ts

@@ -0,0 +1,3 @@
+export { ANALYTICS_EVENTS_CONFIG, sentenceCaseTemplate, type AnalyticsEventConfigEntry, } from './analyticsEventsConfig';
+export { resolveAnalyticsEvent } from './resolveAnalyticsEvent';
+export { useAnalyticsEvent, type FireAnalyticsEvent } from './useAnalyticsEvent';

package/dist/insights-v2/analytics/resolveAnalyticsEvent.d.ts

@@ -0,0 +1,5 @@
+import { AnalyticsEventPayload } from '../beatActions';
+import { Beat } from '../../core';
+import { sentenceCaseTemplate, AnalyticsEventConfigEntry } from './analyticsEventsConfig';
+export { sentenceCaseTemplate };
+export declare const resolveAnalyticsEvent: (config: AnalyticsEventConfigEntry, beat: Beat) => AnalyticsEventPayload;

package/dist/insights-v2/analytics/resolveAnalyticsEvent.es.js

@@ -0,0 +1,19 @@
+import { sentenceCaseTemplate as s } from "./analyticsEventsConfig.es.js";
+var p = (e, t) => typeof e == "function" ? e(t) : e, a = (e, t) => {
+  const o = p(e.action, t), r = p(e.category, t);
+  return {
+    ...o && { action: o },
+    ...r && { category: r },
+    ...(o || r) && { label: s(t.template) },
+    ...e.postHog && { postHog: {
+      eventName: e.postHog.eventName,
+      properties: e.postHog.properties?.(t) ?? {}
+    } }
+  };
+};
+export {
+  a as resolveAnalyticsEvent,
+  s as sentenceCaseTemplate
+};
+
+//# sourceMappingURL=resolveAnalyticsEvent.es.js.map

package/dist/insights-v2/analytics/resolveAnalyticsEvent.es.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"resolveAnalyticsEvent.es.js","names":[],"sources":["../../../src/insights-v2/analytics/resolveAnalyticsEvent.ts"],"sourcesContent":["import type { AnalyticsEventPayload } from '../beatActions'\nimport type { Beat } from '../../core'\nimport { sentenceCaseTemplate, type AnalyticsEventConfigEntry } from './analyticsEventsConfig'\n\nexport { sentenceCaseTemplate }\n\nconst resolve = (\n  value: string | ((beat: Beat) => string) | undefined,\n  beat: Beat,\n): string | undefined => (typeof value === 'function' ? value(beat) : value)\n\n// Resolves a catalogue entry (e.g. ANALYTICS_EVENTS_CONFIG.PRIMARY_ACTION_SELECTED) + beat into\n// a final analytics payload. Takes the entry directly, not a lookup key: the call site already\n// has the entry via property access, so there is nothing to look up and nothing to mistype.\nexport const resolveAnalyticsEvent = (\n  config: AnalyticsEventConfigEntry,\n  beat: Beat,\n): AnalyticsEventPayload => {\n  const action = resolve(config.action, beat)\n  const category = resolve(config.category, beat)\n\n  return {\n    ...(action && { action }),\n    ...(category && { category }),\n    ...((action || category) && { label: sentenceCaseTemplate(beat.template) }),\n    ...(config.postHog && {\n      postHog: {\n        eventName: config.postHog.eventName,\n        properties: config.postHog.properties?.(beat) ?? {},\n      },\n    }),\n  }\n}\n"],"mappings":";AAMA,IAAM,IAAA,CACJ,GACA,MACwB,OAAO,KAAU,aAAa,EAAM,CAAI,IAAI,GAKzD,IAAA,CACX,GACA,MAC0B;AAC1B,QAAM,IAAS,EAAQ,EAAO,QAAQ,CAAI,GACpC,IAAW,EAAQ,EAAO,UAAU,CAAI;AAE9C,SAAO;AAAA,IACL,GAAI,KAAU,EAAE,QAAA,EAAO;AAAA,IACvB,GAAI,KAAY,EAAE,UAAA,EAAS;AAAA,IAC3B,IAAK,KAAU,MAAa,EAAE,OAAO,EAAqB,EAAK,QAAQ,EAAE;AAAA,IACzE,GAAI,EAAO,WAAW,EACpB,SAAS;AAAA,MACP,WAAW,EAAO,QAAQ;AAAA,MAC1B,YAAY,EAAO,QAAQ,aAAa,CAAI,KAAK,CAAC;AAAA,IACpD,EACF;AAAA,EACF;AACF"}

package/dist/insights-v2/analytics/useAnalyticsEvent.d.ts

@@ -0,0 +1,3 @@
+import { AnalyticsEventConfigEntry } from './analyticsEventsConfig';
+export type FireAnalyticsEvent = (event: AnalyticsEventConfigEntry) => void;
+export declare const useAnalyticsEvent: () => FireAnalyticsEvent;

package/dist/insights-v2/analytics/useAnalyticsEvent.es.js

@@ -0,0 +1,20 @@
+import { useGlobalStore as e } from "../../common/context/hooks.es.js";
+import { useBeatActions as a } from "../beatActions.es.js";
+import { sendCtaAnalytics as i } from "../ctaActions/runCtaAction.es.js";
+import { useCallback as c } from "react";
+var p = () => {
+  const t = a(), o = e();
+  return c((n) => {
+    const { beat: s, ...r } = t;
+    !s || !r.onAnalyticsEvent || i({
+      beat: s,
+      stores: o,
+      hostActions: r
+    }, n);
+  }, [t, o]);
+};
+export {
+  p as useAnalyticsEvent
+};
+
+//# sourceMappingURL=useAnalyticsEvent.es.js.map

package/dist/insights-v2/analytics/useAnalyticsEvent.es.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useAnalyticsEvent.es.js","names":[],"sources":["../../../src/insights-v2/analytics/useAnalyticsEvent.ts"],"sourcesContent":["import { useCallback } from 'react'\n\nimport { useGlobalStore } from '../../common'\nimport { useBeatActions } from '../beatActions'\nimport { sendCtaAnalytics } from '../ctaActions'\nimport type { AnalyticsEventConfigEntry } from './analyticsEventsConfig'\n\n// Call-site API: fireAnalyticsEvent(ANALYTICS_EVENTS_CONFIG.SOME_KEY).\nexport type FireAnalyticsEvent = (event: AnalyticsEventConfigEntry) => void\n\n// sendCtaAnalytics for React components; reads ctx from context, no-ops if unset.\n// Stable across renders (given a stable context value from BaseLayout's memoized\n// BeatActionsProvider) so effects that list it as a dependency (e.g.\n// ConnectWidgetActionBlock's open-fire effect) don't re-run every render. Depend on the\n// context object itself here, not a `{ beat, ...hostActions }` rest-spread of it: the\n// spread allocates a new object every render regardless of the context value's own\n// identity, which would re-break the memoization one layer down.\nexport const useAnalyticsEvent = (): FireAnalyticsEvent => {\n  const actions = useBeatActions()\n  const stores = useGlobalStore()\n\n  return useCallback(\n    (event: AnalyticsEventConfigEntry) => {\n      const { beat, ...hostActions } = actions\n\n      if (!beat || !hostActions.onAnalyticsEvent) return\n\n      sendCtaAnalytics({ beat, stores, hostActions }, event)\n    },\n    [actions, stores],\n  )\n}\n"],"mappings":";;;;AAiBA,IAAa,IAAA,MAA8C;AACzD,QAAM,IAAU,EAAe,GACzB,IAAS,EAAe;AAE9B,SAAO,EAAA,CACJ,MAAqC;AACpC,UAAM,EAAE,MAAA,GAAM,GAAG,EAAA,IAAgB;AAEjC,IAAI,CAAC,KAAQ,CAAC,EAAY,oBAE1B,EAAiB;AAAA,MAAE,MAAA;AAAA,MAAM,QAAA;AAAA,MAAQ,aAAA;AAAA,IAAY,GAAG,CAAK;AAAA,EACvD,GACA,CAAC,GAAS,CAAM,CAClB;AACF"}

package/dist/insights-v2/beatActions.d.ts

@@ -1,4 +1,5 @@
 import { ReactNode } from 'react';
+import { Beat } from '../core';
 import { DismissType } from './components/DismissInsightDialog';
 import { FeedbackDialogCloseReason } from './components/FeedbackDialog';
 export type InsightMenuAction = 'helpful' | 'not_helpful' | 'hide';
@@ -21,11 +22,16 @@ export interface DismissParams {
     beatGuid: string;
     type: DismissType;
 }
-/**
- * A CTA side effect the host must perform because experiences cannot (beat-owned endpoints,
- * spending plan items, third-party SDKs). `name` is agreed between the ctaActions table and
- * the host; see insights-v2/ctaActions/README.md for the list.
- */
+export interface AnalyticsEventPayload {
+    action?: string;
+    category?: string;
+    label?: string;
+    postHog?: {
+        eventName: string;
+        properties?: Record<string, unknown>;
+    };
+}
+/** A host-side CTA effect. See ctaActions/README.md. */
 export interface CtaActionParams {
     beatGuid: string;
     name: string;
@@ -43,17 +49,16 @@ export interface BeatActions {
     onFeedbackDialogClose?: (reason: FeedbackDialogCloseReason) => void;
     onFeedbackDialogBack?: () => void;
     onFeedbackTextFocus?: () => void;
-    /**
-     * Opens the host's contact-support flow for a `contact_support_block` CTA. insights-v2 cannot
-     * import the help module (hosts that don't ship it stub the import), so the host supplies it:
-     * the experiences Help widget wires `RequestSupport`; pulse wires its own. When absent, the CTA
-     * renders disabled (see `isContactSupportCtaDisabled`).
-     */
+    onAnalyticsEvent?: (payload: AnalyticsEventPayload) => void;
     onContactSupport?: () => void;
     onCtaAction?: (params: CtaActionParams) => Promise<void> | void;
 }
+interface BeatActionsContextValue extends BeatActions {
+    beat?: Beat;
+}
 export declare const BeatActionsProvider: ({ value, children, }: {
-    value: BeatActions;
+    value: BeatActionsContextValue;
     children: ReactNode;
 }) => import("react/jsx-runtime").JSX.Element;
-export declare const useBeatActions: () => BeatActions;
+export declare const useBeatActions: () => BeatActionsContextValue;
+export {};

package/dist/insights-v2/beatActions.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"beatActions.es.js","names":[],"sources":["../../src/insights-v2/beatActions.tsx"],"sourcesContent":["import { createContext, useContext, type ReactNode } from 'react'\n\nimport type { DismissType } from './components/DismissInsightDialog'\nimport type { FeedbackDialogCloseReason } from './components/FeedbackDialog'\n\nexport type InsightMenuAction = 'helpful' | 'not_helpful' | 'hide'\nexport type InsightRating = 'helpful' | 'not_helpful'\n\nexport interface MenuActionHandlers {\n  onAction: (action: InsightMenuAction) => void\n  onOpen?: () => void\n  disabled?: boolean\n}\n\nexport interface UpdateParams {\n  beatGuid: string\n}\n\nexport interface FeedbackParams {\n  beatGuid: string\n  source: InsightRating | 'hide' | 'cta'\n  option: string\n  detail?: string\n}\n\nexport interface DismissParams {\n  beatGuid: string\n  type: DismissType\n}\n\n/**\n * A CTA side effect the host must perform because experiences cannot (beat-owned endpoints,\n * spending plan items, third-party SDKs). `name` is agreed between the ctaActions table and\n * the host; see insights-v2/ctaActions/README.md for the list.\n */\nexport interface CtaActionParams {\n  beatGuid: string\n  name: string\n  params?: Record<string, unknown>\n}\n\n/** Host callbacks for a beat card. */\nexport interface BeatActions {\n  onMenuAction?: MenuActionHandlers\n  onUpdate?: (params: UpdateParams) => void\n  onSubmitFeedback?: (params: FeedbackParams) => void | Promise<void>\n  onDismissInsight?: (params: DismissParams) => void\n  onUndoDismiss?: (params: { beatGuid: string }) => void\n  onFeedbackDialogClose?: (reason: FeedbackDialogCloseReason) => void\n  onFeedbackDialogBack?: () => void\n  onFeedbackTextFocus?: () => void\n  /**\n   * Opens the host's contact-support flow for a `contact_support_block` CTA. insights-v2 cannot\n   * import the help module (hosts that don't ship it stub the import), so the host supplies it:\n   * the experiences Help widget wires `RequestSupport`; pulse wires its own. When absent, the CTA\n   * renders disabled (see `isContactSupportCtaDisabled`).\n   */\n  onContactSupport?: () => void\n  onCtaAction?: (params: CtaActionParams) => Promise<void> | void\n}\n\nconst BeatActionsContext = createContext<BeatActions>({})\n\nexport const BeatActionsProvider = ({\n  value,\n  children,\n}: {\n  value: BeatActions\n  children: ReactNode\n}) => <BeatActionsContext.Provider value={value}>{children}</BeatActionsContext.Provider>\n\nexport const useBeatActions = () => useContext(BeatActionsContext)\n"],"mappings":";;AA6DA,IAAM,IAAqB,EAA2B,CAAC,CAAC,GAE3C,IAAA,CAAuB,EAClC,OAAA,GACA,UAAA,EAAA,MAII,gBAAA,EAAC,EAAmB,UAApB;AAAA,EAAoC,OAAA;AAAA,EAAQ,UAAA;AAAsC,CAAA,GAE3E,IAAA,MAAuB,EAAW,CAAkB"}
+{"version":3,"file":"beatActions.es.js","names":[],"sources":["../../src/insights-v2/beatActions.tsx"],"sourcesContent":["import { createContext, useContext, type ReactNode } from 'react'\n\nimport type { Beat } from '../core'\nimport type { DismissType } from './components/DismissInsightDialog'\nimport type { FeedbackDialogCloseReason } from './components/FeedbackDialog'\n\nexport type InsightMenuAction = 'helpful' | 'not_helpful' | 'hide'\nexport type InsightRating = 'helpful' | 'not_helpful'\n\nexport interface MenuActionHandlers {\n  onAction: (action: InsightMenuAction) => void\n  onOpen?: () => void\n  disabled?: boolean\n}\n\nexport interface UpdateParams {\n  beatGuid: string\n}\n\nexport interface FeedbackParams {\n  beatGuid: string\n  source: InsightRating | 'hide' | 'cta'\n  option: string\n  detail?: string\n}\n\nexport interface DismissParams {\n  beatGuid: string\n  type: DismissType\n}\n\n// Raw analytics payload for the host.\nexport interface AnalyticsEventPayload {\n  action?: string\n  category?: string\n  label?: string\n  postHog?: {\n    eventName: string\n    properties?: Record<string, unknown>\n  }\n}\n/** A host-side CTA effect. See ctaActions/README.md. */\nexport interface CtaActionParams {\n  beatGuid: string\n  name: string\n  params?: Record<string, unknown>\n}\n\n/** Host callbacks for a beat card. */\nexport interface BeatActions {\n  onMenuAction?: MenuActionHandlers\n  onUpdate?: (params: UpdateParams) => void\n  onSubmitFeedback?: (params: FeedbackParams) => void | Promise<void>\n  onDismissInsight?: (params: DismissParams) => void\n  onUndoDismiss?: (params: { beatGuid: string }) => void\n  onFeedbackDialogClose?: (reason: FeedbackDialogCloseReason) => void\n  onFeedbackDialogBack?: () => void\n  onFeedbackTextFocus?: () => void\n  // Raw analytics callback; use useAnalyticsEvent() instead.\n  onAnalyticsEvent?: (payload: AnalyticsEventPayload) => void\n  // Host's contact-support flow for a contact_support_block CTA.\n  onContactSupport?: () => void\n  onCtaAction?: (params: CtaActionParams) => Promise<void> | void\n}\n\n// BeatActions plus beat, for useAnalyticsEvent().\ninterface BeatActionsContextValue extends BeatActions {\n  beat?: Beat\n}\n\nconst BeatActionsContext = createContext<BeatActionsContextValue>({})\n\nexport const BeatActionsProvider = ({\n  value,\n  children,\n}: {\n  value: BeatActionsContextValue\n  children: ReactNode\n}) => <BeatActionsContext.Provider value={value}>{children}</BeatActionsContext.Provider>\n\nexport const useBeatActions = () => useContext(BeatActionsContext)\n"],"mappings":";;AAsEA,IAAM,IAAqB,EAAuC,CAAC,CAAC,GAEvD,IAAA,CAAuB,EAClC,OAAA,GACA,UAAA,EAAA,MAII,gBAAA,EAAC,EAAmB,UAApB;AAAA,EAAoC,OAAA;AAAA,EAAQ,UAAA;AAAsC,CAAA,GAE3E,IAAA,MAAuB,EAAW,CAAkB"}

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

@@ -1,26 +1,28 @@
-import { useGlobalCopyStore as B, useGlobalUiStore as A, useInsightsV2Store as L } from "../../../../common/context/hooks.es.js";
+import { useGlobalCopyStore as B, useGlobalUiStore as I, useInsightsV2Store as L } from "../../../../common/context/hooks.es.js";
 import { formatCurrency as S } from "../../../../core/utils/NumberFormatting.es.js";
-import I from "../../../../common/components/Loader.es.js";
-import { actionBlocksKey as T } from "../../../mappings/actionBlocksKey.es.js";
-import { BarChartV2 as k } from "../../../components/chartblocks/BarchartV2.es.js";
-import { EmptyBarChart as v } from "../../../components/chartblocks/EmptyBarChart.es.js";
-import { barChartVariant as x, buildChartData as D, buildDataSeries as O } from "./utils.es.js";
-import N from "react";
-import { observer as R } from "mobx-react-lite";
+import T from "../../../../common/components/Loader.es.js";
+import { actionBlocksKey as v } from "../../../mappings/actionBlocksKey.es.js";
+import { BarChartV2 as E } from "../../../components/chartblocks/BarchartV2.es.js";
+import { EmptyBarChart as N } from "../../../components/chartblocks/EmptyBarChart.es.js";
+import { ANALYTICS_EVENTS_CONFIG as k } from "../../../analytics/analyticsEventsConfig.es.js";
+import { useAnalyticsEvent as x } from "../../../analytics/useAnalyticsEvent.es.js";
+import { barChartVariant as D, buildChartData as O, buildDataSeries as R } from "./utils.es.js";
+import V from "react";
+import { observer as G } from "mobx-react-lite";
 import { jsx as e } from "react/jsx-runtime";
-import { useTheme as V } from "@mui/material/styles";
-var J = R(({ payload: m, beatGuid: i = "" }) => {
-  const l = V(), { openActionDrawer: c } = L(), { insights_feed: o } = B(), { isCopyLoaded: f } = A(), { instance_slot: p, instance_slot_data: a, widget_type: d } = m, { data_series: h, ariaLabel: g = "", average_amount: n = 0, legends: s = [] } = a, t = D(O(h), g), [u] = N.useState(t.length - 1), { color: b } = x(p, a, l);
-  if (!f) return /* @__PURE__ */ e(I, {});
-  const C = [o.general.monthly_amount, o.general.trend], [_, y] = s.length ? s.map((r) => r.label) : C;
-  return t.length ? /* @__PURE__ */ e(k, {
+import { useTheme as K } from "@mui/material/styles";
+var X = G(({ payload: i, beatGuid: m = "" }) => {
+  const l = K(), { openActionDrawer: c } = L(), { insights_feed: o } = B(), { isCopyLoaded: f } = I(), { instance_slot: p, instance_slot_data: a, widget_type: d } = i, { data_series: h, ariaLabel: u = "", average_amount: n = 0, legends: s = [] } = a, t = O(R(h), u), [g] = V.useState(t.length - 1), { color: C } = D(p, a, l), b = x();
+  if (!f) return /* @__PURE__ */ e(T, {});
+  const _ = [o.general.monthly_amount, o.general.trend], [A, y] = s.length ? s.map((r) => r.label) : _;
+  return t.length ? /* @__PURE__ */ e(E, {
     amounts: {
       average: n,
       formattedAverage: S(n, "0,0")
     },
-    color: b,
+    color: C,
     data: t,
-    monthlyAmountLabel: _,
+    monthlyAmountLabel: A,
     margin: {
       bottom: 8,
       left: 16,
@@ -29,21 +31,21 @@ var J = R(({ payload: m, beatGuid: i = "" }) => {
     },
     onBarClick: (r) => {
       if (d !== "full") return !1;
-      c({
-        guid: i,
+      b(k.CHART_BAR_CLICKED), c({
+        guid: m,
         trigger: "chartBar",
         context: {
           chartBarIndex: r,
-          block: T.TRANSCATION_HISTORY_ACTION_BLOCK
+          block: v.TRANSCATION_HISTORY_ACTION_BLOCK
         }
       });
     },
-    selectedTabIndex: u,
+    selectedTabIndex: g,
     trendAmountLabel: y
-  }) : /* @__PURE__ */ e(v, {});
+  }) : /* @__PURE__ */ e(N, {});
 });
 export {
-  J as BarchartBlock
+  X 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 {\n  formatCurrency,\n  Loader,\n  useGlobalCopyStore,\n  useGlobalUiStore,\n  useInsightsV2Store,\n} from '../../../../common'\nimport type { DataSeries, DrilldownPayload } from '../../../../core'\nimport type { BarChartBlockData } from '../../../../core/types/InsightsInstanceSlotData'\n\nimport { BarChartV2 } from '../../../components/chartblocks/BarchartV2'\nimport { EmptyBarChart } from '../../../components/chartblocks/EmptyBarChart'\n\nimport type { BlockProps } from '../../types'\n\nimport { barChartVariant, buildChartData, buildDataSeries } from './utils'\nimport { actionBlocksKey } from '../../../mappings/actionBlocksKey'\n\nexport const BarchartBlock = observer(\n  ({ payload, beatGuid = '' }: BlockProps<BarChartBlockData>) => {\n    const theme = useTheme()\n    const { openActionDrawer } = useInsightsV2Store()\n    const { insights_feed: insightsFeedCopy } = useGlobalCopyStore()\n    const { isCopyLoaded } = useGlobalUiStore()\n    const { instance_slot, instance_slot_data, widget_type } = payload\n    const { data_series, ariaLabel = '', average_amount = 0, legends = [] } = instance_slot_data\n    const chartData = buildChartData(buildDataSeries(data_series as DataSeries), ariaLabel)\n    const [selectedTabIndex] = React.useState(chartData.length - 1)\n    const { color } = barChartVariant(instance_slot, instance_slot_data, theme)\n\n    if (!isCopyLoaded) {\n      return <Loader />\n    }\n\n    // TODO: Temporary fallback while the backend doesn't always send `legends` on every beat/variant.\n    // Remove this once the backend guarantees `legends` on the payload.\n    const fallbackLabels = [insightsFeedCopy.general.monthly_amount, insightsFeedCopy.general.trend]\n\n    const [monthlyAmountLabel, trendAmountLabel] = legends.length\n      ? legends.map((legend) => legend.label)\n      : fallbackLabels\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={monthlyAmountLabel}\n        margin={{\n          bottom: 8,\n          left: 16,\n          right: 16,\n          top: 16,\n        }}\n        onBarClick={(index) => {\n          if (widget_type !== 'full') return false\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={trendAmountLabel}\n      />\n    ) : (\n      <EmptyBarChart />\n    )\n  },\n)\n"],"mappings":";;;;;;;;;;;AAsBA,IAAa,IAAgB,EAAA,CAC1B,EAAE,SAAA,GAAS,UAAA,IAAW,GAAA,MAAwC;AAC7D,QAAM,IAAQ,EAAS,GACjB,EAAE,kBAAA,EAAA,IAAqB,EAAmB,GAC1C,EAAE,eAAe,EAAA,IAAqB,EAAmB,GACzD,EAAE,cAAA,EAAA,IAAiB,EAAiB,GACpC,EAAE,eAAA,GAAe,oBAAA,GAAoB,aAAA,EAAA,IAAgB,GACrD,EAAE,aAAA,GAAa,WAAA,IAAY,IAAI,gBAAA,IAAiB,GAAG,SAAA,IAAU,CAAC,EAAA,IAAM,GACpE,IAAY,EAAe,EAAgB,CAAyB,GAAG,CAAS,GAChF,CAAC,CAAA,IAAoB,EAAM,SAAS,EAAU,SAAS,CAAC,GACxD,EAAE,OAAA,EAAA,IAAU,EAAgB,GAAe,GAAoB,CAAK;AAE1E,MAAI,CAAC,EACH,QAAO,gBAAA,EAAC,GAAD,CAAS,CAAA;AAKlB,QAAM,IAAiB,CAAC,EAAiB,QAAQ,gBAAgB,EAAiB,QAAQ,KAAK,GAEzF,CAAC,GAAoB,CAAA,IAAoB,EAAQ,SACnD,EAAQ,IAAA,CAAK,MAAW,EAAO,KAAK,IACpC;AAEJ,SAAO,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,IACc,oBAAA;AAAA,IACpB,QAAQ;AAAA,MACN,QAAQ;AAAA,MACR,MAAM;AAAA,MACN,OAAO;AAAA,MACP,KAAK;AAAA,IACP;AAAA,IACA,YAAA,CAAa,MAAU;AACrB,UAAI,MAAgB,OAAQ,QAAO;AAEnC,MAAA,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,IACA,kBAAA;AAAA,EACnB,CAAA,IAED,gBAAA,EAAC,GAAD,CAAgB,CAAA;AAEpB,CACF"}
+{"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 {\n  formatCurrency,\n  Loader,\n  useGlobalCopyStore,\n  useGlobalUiStore,\n  useInsightsV2Store,\n} from '../../../../common'\nimport type { DataSeries, DrilldownPayload } 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'\nimport type { BlockProps } from '../../types'\n\nimport { barChartVariant, buildChartData, buildDataSeries } from './utils'\nimport { actionBlocksKey } from '../../../mappings/actionBlocksKey'\n\nexport const BarchartBlock = observer(\n  ({ payload, beatGuid = '' }: BlockProps<BarChartBlockData>) => {\n    const theme = useTheme()\n    const { openActionDrawer } = useInsightsV2Store()\n    const { insights_feed: insightsFeedCopy } = useGlobalCopyStore()\n    const { isCopyLoaded } = useGlobalUiStore()\n    const { instance_slot, instance_slot_data, widget_type } = payload\n    const { data_series, ariaLabel = '', average_amount = 0, legends = [] } = instance_slot_data\n    const chartData = buildChartData(buildDataSeries(data_series as DataSeries), ariaLabel)\n    const [selectedTabIndex] = React.useState(chartData.length - 1)\n    const { color } = barChartVariant(instance_slot, instance_slot_data, theme)\n    const fireAnalyticsEvent = useAnalyticsEvent()\n\n    if (!isCopyLoaded) {\n      return <Loader />\n    }\n\n    // TODO: Temporary fallback while the backend doesn't always send `legends` on every beat/variant.\n    // Remove this once the backend guarantees `legends` on the payload.\n    const fallbackLabels = [insightsFeedCopy.general.monthly_amount, insightsFeedCopy.general.trend]\n\n    const [monthlyAmountLabel, trendAmountLabel] = legends.length\n      ? legends.map((legend) => legend.label)\n      : fallbackLabels\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={monthlyAmountLabel}\n        margin={{\n          bottom: 8,\n          left: 16,\n          right: 16,\n          top: 16,\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={trendAmountLabel}\n      />\n    ) : (\n      <EmptyBarChart />\n    )\n  },\n)\n"],"mappings":";;;;;;;;;;;;;AAuBA,IAAa,IAAgB,EAAA,CAC1B,EAAE,SAAA,GAAS,UAAA,IAAW,GAAA,MAAwC;AAC7D,QAAM,IAAQ,EAAS,GACjB,EAAE,kBAAA,EAAA,IAAqB,EAAmB,GAC1C,EAAE,eAAe,EAAA,IAAqB,EAAmB,GACzD,EAAE,cAAA,EAAA,IAAiB,EAAiB,GACpC,EAAE,eAAA,GAAe,oBAAA,GAAoB,aAAA,EAAA,IAAgB,GACrD,EAAE,aAAA,GAAa,WAAA,IAAY,IAAI,gBAAA,IAAiB,GAAG,SAAA,IAAU,CAAC,EAAA,IAAM,GACpE,IAAY,EAAe,EAAgB,CAAyB,GAAG,CAAS,GAChF,CAAC,CAAA,IAAoB,EAAM,SAAS,EAAU,SAAS,CAAC,GACxD,EAAE,OAAA,EAAA,IAAU,EAAgB,GAAe,GAAoB,CAAK,GACpE,IAAqB,EAAkB;AAE7C,MAAI,CAAC,EACH,QAAO,gBAAA,EAAC,GAAD,CAAS,CAAA;AAKlB,QAAM,IAAiB,CAAC,EAAiB,QAAQ,gBAAgB,EAAiB,QAAQ,KAAK,GAEzF,CAAC,GAAoB,CAAA,IAAoB,EAAQ,SACnD,EAAQ,IAAA,CAAK,MAAW,EAAO,KAAK,IACpC;AAEJ,SAAO,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,IACc,oBAAA;AAAA,IACpB,QAAQ;AAAA,MACN,QAAQ;AAAA,MACR,MAAM;AAAA,MACN,OAAO;AAAA,MACP,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,IACA,kBAAA;AAAA,EACnB,CAAA,IAED,gBAAA,EAAC,GAAD,CAAgB,CAAA;AAEpB,CACF"}