@mx-cartographer/experiences 9.4.15 → 9.4.16

package/CHANGELOG.md

@@ -1,3 +1,8 @@
+## [9.4.16] - 09-03-2026
+
+- **ADDED** - insights-v2 overflow (“…”) menu on the insight card header: new presentational `OverflowMenu` (icon trigger + action list with full aria/keyboard support) and `InsightOptionsMenu`, which owns the item set — helpful / not helpful / hide — from `insights_feed.overflow_menu` copy. The host supplies the action handler via `beatActions.onMenuAction`, delivered through the new `BeatActionsProvider`/`useBeatActions` context; the menu renders only on the full (non-mini) layout when a handler is wired (WEC-1767)
+- **ADDED** - `OverflowMenuCopy` (`insights_feed.overflow_menu`) localization type and copy keys (`aria_label`, `helpful`, `not_helpful`, `hide`) (WEC-1767)
+
 ## [9.4.15] - 09-03-2026
 
 - **ADDED** - Transaction History action block (single-bar): `transaction_history_block` registered in `mappings/blocks.ts`, rendering a `BarChartV2` over the beat's monthly `data_series` above a reused transactions `TransactionList` drilldown. Variant behavior (chart top, bar colors, drawer header, and the per-variant `filterStrategy`) is driven by `drillDownConfig`, covering the Transaction, CategorySpend, MonthlySpend, AccountBalance, and UpcomingBill variants (WEC-1701)

package/dist/core/types/localization/InsightsFeedCopy.d.ts

@@ -48,6 +48,13 @@ export interface MakeTransferCopy {
     increment_aria_label: string;
     decrement_aria_label: string;
 }
+export interface OverflowMenuCopy {
+    /** Accessible label for the "…" trigger button. */
+    aria_label: string;
+    helpful: string;
+    not_helpful: string;
+    hide: string;
+}
 export interface TransactionHistoryBlock {
     category_spend_drawer_title: string;
     monthly_spend_comparison_drawer_title: string;
@@ -64,6 +71,7 @@ export interface InsightsFeedCopy {
     general: GeneralInsightsFeedCopy;
     settings_menu: SettingsMenuCopy;
     make_transfer: MakeTransferCopy;
+    overflow_menu: OverflowMenuCopy;
     transaction_history_block: TransactionHistoryBlock;
 }
 export {};

package/dist/core/types/localization/index.d.ts

@@ -13,7 +13,7 @@ export type { DebtsCopy } from './DebtsCopy';
 export type { FinstrongCopy } from './FinstrongCopy';
 export type { GoalsCopy } from './GoalsCopy';
 export type { HelpCopy, HelpByCategoryList } from './HelpCopy';
-export type { InsightsFeedCopy, MakeTransferCopy } from './InsightsFeedCopy';
+export type { InsightsFeedCopy, MakeTransferCopy, OverflowMenuCopy } from './InsightsFeedCopy';
 export type { InvestmentsCopy } from './InvestmentsCopy';
 export type { MicroInsightsCopy } from './MicroInsightsCopy';
 export type { NetWorthCopy } from './NetWorthCopy';

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

@@ -0,0 +1,30 @@
+import { ReactNode } from 'react';
+/** Overflow-menu action keys emitted to the host. */
+export type InsightMenuAction = 'helpful' | 'not_helpful' | 'hide';
+export interface MenuActionHandlers {
+    /** Invoked with the chosen overflow-menu action key. */
+    onAction: (action: InsightMenuAction) => void;
+    /** Called when the overflow menu opens (e.g. analytics). */
+    onOpen?: () => void;
+    /** Disables the overflow menu trigger (e.g. an obsolete beat). */
+    disabled?: boolean;
+}
+export interface UpdateParams {
+    beatGuid: string;
+}
+/**
+ * Host callbacks for a beat card, grouped under one prop and delivered via
+ * context so any descendant (header menu, blocks, variants) can reach the
+ * handler it needs without prop drilling. Each concern is its own typed slot —
+ * add new callbacks here as they arise.
+ */
+export interface BeatActions {
+    onMenuAction?: MenuActionHandlers;
+    onUpdate?: (params: UpdateParams) => void;
+}
+export declare const BeatActionsProvider: ({ value, children, }: {
+    value: BeatActions;
+    children: ReactNode;
+}) => import("react/jsx-runtime").JSX.Element;
+/** Read the host callbacks for the current beat card. */
+export declare const useBeatActions: () => BeatActions;

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

@@ -0,0 +1,12 @@
+import { createContext as r, useContext as a } from "react";
+import { jsx as i } from "react/jsx-runtime";
+var t = r({}), v = ({ value: e, children: o }) => /* @__PURE__ */ i(t.Provider, {
+  value: e,
+  children: o
+}), x = () => a(t);
+export {
+  v as BeatActionsProvider,
+  x as useBeatActions
+};
+
+//# sourceMappingURL=beatActions.es.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"beatActions.es.js","names":[],"sources":["../../src/insights-v2/beatActions.tsx"],"sourcesContent":["import { createContext, useContext, type ReactNode } from 'react'\n\n/** Overflow-menu action keys emitted to the host. */\nexport type InsightMenuAction = 'helpful' | 'not_helpful' | 'hide'\n\nexport interface MenuActionHandlers {\n  /** Invoked with the chosen overflow-menu action key. */\n  onAction: (action: InsightMenuAction) => void\n  /** Called when the overflow menu opens (e.g. analytics). */\n  onOpen?: () => void\n  /** Disables the overflow menu trigger (e.g. an obsolete beat). */\n  disabled?: boolean\n}\n\nexport interface UpdateParams {\n  beatGuid: string\n  // …extend with whatever the host's updateBeat needs.\n}\n\n/**\n * Host callbacks for a beat card, grouped under one prop and delivered via\n * context so any descendant (header menu, blocks, variants) can reach the\n * handler it needs without prop drilling. Each concern is its own typed slot —\n * add new callbacks here as they arise.\n */\nexport interface BeatActions {\n  onMenuAction?: MenuActionHandlers\n  onUpdate?: (params: UpdateParams) => 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\n/** Read the host callbacks for the current beat card. */\nexport const useBeatActions = () => useContext(BeatActionsContext)\n"],"mappings":";;AA8BA,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,GAG3E,IAAA,MAAuB,EAAW,CAAkB"}

package/dist/insights-v2/components/BaseLayout.d.ts

@@ -1,6 +1,10 @@
 import { Beat } from '../../core';
+import { BeatActions } from '../beatActions';
 interface BaseLayoutProps {
     beat: Beat;
+    /** Host callbacks (menu actions, updateBeat, …) delivered to the card subtree
+     *  via context, so blocks/variants can reach them without prop drilling. */
+    beatActions?: BeatActions;
 }
-declare const BaseLayout: ({ beat }: BaseLayoutProps) => import("react/jsx-runtime").JSX.Element | null;
+declare const BaseLayout: ({ beat, beatActions }: BaseLayoutProps) => import("react/jsx-runtime").JSX.Element | null;
 export default BaseLayout;

package/dist/insights-v2/components/BaseLayout.es.js

@@ -1,77 +1,81 @@
-import { useInsightsV2Store as u } from "../../common/context/hooks.es.js";
+import { useInsightsV2Store as _ } from "../../common/context/hooks.es.js";
 import { blocks as g } from "../mappings/blocks.es.js";
 import y from "./Footer.es.js";
-import _ from "./Header.es.js";
-import { ActionBlockLayer as k } from "../actionBlocks/ActionBlockLayer.es.js";
+import { BeatActionsProvider as k } from "../beatActions.es.js";
+import x from "./Header.es.js";
+import { ActionBlockLayer as C } from "../actionBlocks/ActionBlockLayer.es.js";
 import l from "@mui/material/Stack";
 import c from "@mui/material/Button";
-import { ChevronRight as x } from "@mxenabled/mx-icons";
-import { jsx as r, jsxs as i } from "react/jsx-runtime";
-import C from "@mui/material/Card";
-var A = ({ beat: o }) => {
-  const { openCtaDrawer: s } = u(), t = o.insights_payload;
-  if (!t) return null;
-  const { instance_slot: p, primary_cta: n, secondary_cta: e, subtitle: m, widget_type: h } = t, { block: f } = p, a = g[f], d = h === "mini";
-  return /* @__PURE__ */ i(l, {
-    sx: { mb: 16 },
-    children: [
-      /* @__PURE__ */ i(C, { children: [
-        /* @__PURE__ */ r(_, {
-          isMini: d,
-          subtitle: m,
-          title: o.title
-        }),
-        a && /* @__PURE__ */ r(a, {
-          beatGuid: o.guid,
-          payload: t
-        }),
-        /* @__PURE__ */ i(l, {
-          sx: {
-            gap: 6,
-            pb: 16,
-            pl: 12,
-            pr: 16,
-            pt: 12
-          },
-          children: [/* @__PURE__ */ r("div", {
-            dangerouslySetInnerHTML: { __html: o.html_description },
-            style: { paddingLeft: 4 }
-          }), o?.in_description_cta && /* @__PURE__ */ r(c, {
-            endIcon: /* @__PURE__ */ r(x, {}),
-            onClick: () => {
+import { ChevronRight as v } from "@mxenabled/mx-icons";
+import { jsx as o, jsxs as t } from "react/jsx-runtime";
+import B from "@mui/material/Card";
+var b = {}, D = ({ beat: r, beatActions: p = b }) => {
+  const { openCtaDrawer: a } = _(), i = r.insights_payload;
+  if (!i) return null;
+  const { instance_slot: m, primary_cta: n, secondary_cta: e, subtitle: h, widget_type: f } = i, { block: u } = m, s = g[u], d = f === "mini";
+  return /* @__PURE__ */ o(k, {
+    value: p,
+    children: /* @__PURE__ */ t(l, {
+      sx: { mb: 16 },
+      children: [
+        /* @__PURE__ */ t(B, { children: [
+          /* @__PURE__ */ o(x, {
+            isMini: d,
+            subtitle: h,
+            title: r.title
+          }),
+          s && /* @__PURE__ */ o(s, {
+            beatGuid: r.guid,
+            payload: i
+          }),
+          /* @__PURE__ */ t(l, {
+            sx: {
+              gap: 6,
+              pb: 16,
+              pl: 12,
+              pr: 16,
+              pt: 12
             },
+            children: [/* @__PURE__ */ o("div", {
+              dangerouslySetInnerHTML: { __html: r.html_description },
+              style: { paddingLeft: 4 }
+            }), r?.in_description_cta && /* @__PURE__ */ o(c, {
+              endIcon: /* @__PURE__ */ o(v, {}),
+              onClick: () => {
+              },
+              sx: {
+                height: 24,
+                p: 4,
+                width: "max-content"
+              },
+              children: r.in_description_cta
+            })]
+          }),
+          !d && n?.label && /* @__PURE__ */ t(l, {
             sx: {
-              height: 24,
-              p: 4,
-              width: "max-content"
+              gap: 8,
+              pb: 16,
+              px: 16
             },
-            children: o.in_description_cta
-          })]
-        }),
-        !d && n?.label && /* @__PURE__ */ i(l, {
-          sx: {
-            gap: 8,
-            pb: 16,
-            px: 16
-          },
-          children: [/* @__PURE__ */ r(c, {
-            onClick: () => n.block && s(o.guid, "primaryCta"),
-            variant: "outlined",
-            children: n.label
-          }), e?.label && /* @__PURE__ */ r(c, {
-            color: "secondary",
-            onClick: () => e.block && s(o.guid, "secondaryCta"),
-            children: e.label
-          })]
-        })
-      ] }),
-      /* @__PURE__ */ r(k, { beat: o }),
-      t.footer && /* @__PURE__ */ r(y, { footer: t.footer })
-    ]
+            children: [/* @__PURE__ */ o(c, {
+              onClick: () => n.block && a(r.guid, "primaryCta"),
+              variant: "outlined",
+              children: n.label
+            }), e?.label && /* @__PURE__ */ o(c, {
+              color: "secondary",
+              onClick: () => e.block && a(r.guid, "secondaryCta"),
+              children: e.label
+            })]
+          })
+        ] }),
+        /* @__PURE__ */ o(C, { beat: r }),
+        i.footer && /* @__PURE__ */ o(y, { footer: i.footer })
+      ]
+    })
   });
 };
 export {
-  A as default
+  D as default
 };
 
 //# sourceMappingURL=BaseLayout.es.js.map

package/dist/insights-v2/components/BaseLayout.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"BaseLayout.es.js","names":[],"sources":["../../../src/insights-v2/components/BaseLayout.tsx"],"sourcesContent":["import Button from '@mui/material/Button'\nimport Card from '@mui/material/Card'\nimport Stack from '@mui/material/Stack'\n\nimport { ChevronRight } from '@mxenabled/mx-icons'\n\nimport { blocks } from '../mappings/blocks'\n\nimport Footer from './Footer'\nimport Header from './Header'\nimport { useInsightsV2Store } from '../../common'\nimport type { Beat } from '../../core'\nimport { ActionBlockLayer } from '../actionBlocks/ActionBlockLayer'\n\ninterface BaseLayoutProps {\n  beat: Beat\n}\n\nconst BaseLayout = ({ beat }: BaseLayoutProps) => {\n  const { openCtaDrawer } = useInsightsV2Store()\n\n  const insights_payload = beat.insights_payload\n\n  if (!insights_payload) {\n    return null\n  }\n\n  const { instance_slot, primary_cta, secondary_cta, subtitle, widget_type } = insights_payload\n  const { block } = instance_slot\n\n  const Block = blocks[block as keyof typeof blocks]\n\n  const isMini = widget_type === 'mini'\n\n  return (\n    <Stack sx={{ mb: 16 }}>\n      <Card>\n        {/* Header */}\n        <Header isMini={isMini} subtitle={subtitle} title={beat.title} />\n\n        {/* Instance Slot */}\n        {Block && <Block beatGuid={beat.guid} payload={insights_payload} />}\n\n        {/* Body */}\n        <Stack sx={{ gap: 6, pb: 16, pl: 12, pr: 16, pt: 12 }}>\n          <div\n            dangerouslySetInnerHTML={{\n              __html: beat.html_description as string,\n            }}\n            style={{ paddingLeft: 4 }}\n          />\n          {beat?.in_description_cta && (\n            <Button\n              endIcon={<ChevronRight />}\n              onClick={() => {}}\n              sx={{ height: 24, p: 4, width: 'max-content' }}\n            >\n              {beat.in_description_cta}\n            </Button>\n          )}\n        </Stack>\n\n        {/* CTA. A CTA without a real `block` doesn't open a drawer (it may trigger\n            a postMessage etc.) — restrict the drawer to CTAs that carry a block. */}\n        {!isMini && primary_cta?.label && (\n          <Stack sx={{ gap: 8, pb: 16, px: 16 }}>\n            <Button\n              onClick={() => primary_cta.block && openCtaDrawer(beat.guid, 'primaryCta')}\n              variant=\"outlined\"\n            >\n              {primary_cta.label}\n            </Button>\n            {secondary_cta?.label && (\n              <Button\n                color=\"secondary\"\n                onClick={() => secondary_cta.block && openCtaDrawer(beat.guid, 'secondaryCta')}\n              >\n                {secondary_cta.label}\n              </Button>\n            )}\n          </Stack>\n        )}\n      </Card>\n\n      {/* Always mounted: the drawer's slide in/out animation only plays when\n          MUI sees isOpen CHANGE on a mounted Drawer — conditionally mounting\n          it here made it snap open and vanish on close. */}\n      <ActionBlockLayer beat={beat} />\n\n      {/* Footer */}\n      {insights_payload.footer && <Footer footer={insights_payload.footer} />}\n    </Stack>\n  )\n}\n\nexport default BaseLayout\n"],"mappings":";;;;;;;;;;AAkBA,IAAM,IAAA,CAAc,EAAE,MAAA,EAAA,MAA4B;AAChD,QAAM,EAAE,eAAA,EAAA,IAAkB,EAAmB,GAEvC,IAAmB,EAAK;AAE9B,MAAI,CAAC,EACH,QAAO;AAGT,QAAM,EAAE,eAAA,GAAe,aAAA,GAAa,eAAA,GAAe,UAAA,GAAU,aAAA,EAAA,IAAgB,GACvE,EAAE,OAAA,EAAA,IAAU,GAEZ,IAAQ,EAAO,CAAA,GAEf,IAAS,MAAgB;AAE/B,SACE,gBAAA,EAAC,GAAD;AAAA,IAAO,IAAI,EAAE,IAAI,GAAG;AAAA,IAApB,UAAA;AAAA,MACE,gBAAA,EAAC,GAAD,EAAA,UAAA;AAAA,QAEE,gBAAA,EAAC,GAAD;AAAA,UAAgB,QAAA;AAAA,UAAkB,UAAA;AAAA,UAAU,OAAO,EAAK;AAAA,QAAQ,CAAA;AAAA,QAG/D,KAAS,gBAAA,EAAC,GAAD;AAAA,UAAO,UAAU,EAAK;AAAA,UAAM,SAAS;AAAA,QAAmB,CAAA;AAAA,QAGlE,gBAAA,EAAC,GAAD;AAAA,UAAO,IAAI;AAAA,YAAE,KAAK;AAAA,YAAG,IAAI;AAAA,YAAI,IAAI;AAAA,YAAI,IAAI;AAAA,YAAI,IAAI;AAAA,UAAG;AAAA,UAApD,UAAA,CACE,gBAAA,EAAC,OAAD;AAAA,YACE,yBAAyB,EACvB,QAAQ,EAAK,iBACf;AAAA,YACA,OAAO,EAAE,aAAa,EAAE;AAAA,UACzB,CAAA,GACA,GAAM,sBACL,gBAAA,EAAC,GAAD;AAAA,YACE,SAAS,gBAAA,EAAC,GAAD,CAAe,CAAA;AAAA,YACxB,SAAA,MAAe;AAAA,YAAC;AAAA,YAChB,IAAI;AAAA,cAAE,QAAQ;AAAA,cAAI,GAAG;AAAA,cAAG,OAAO;AAAA,YAAc;AAAA,YAE5C,UAAA,EAAK;AAAA,UACA,CAAA,CAEL;AAAA;QAIN,CAAC,KAAU,GAAa,SACvB,gBAAA,EAAC,GAAD;AAAA,UAAO,IAAI;AAAA,YAAE,KAAK;AAAA,YAAG,IAAI;AAAA,YAAI,IAAI;AAAA,UAAG;AAAA,UAApC,UAAA,CACE,gBAAA,EAAC,GAAD;AAAA,YACE,SAAA,MAAe,EAAY,SAAS,EAAc,EAAK,MAAM,YAAY;AAAA,YACzE,SAAQ;AAAA,YAEP,UAAA,EAAY;AAAA,UACP,CAAA,GACP,GAAe,SACd,gBAAA,EAAC,GAAD;AAAA,YACE,OAAM;AAAA,YACN,SAAA,MAAe,EAAc,SAAS,EAAc,EAAK,MAAM,cAAc;AAAA,YAE5E,UAAA,EAAc;AAAA,UACT,CAAA,CAEL;AAAA;MAEL,EAAA,CAAA;AAAA,MAKN,gBAAA,EAAC,GAAD,EAAwB,MAAA,EAAO,CAAA;AAAA,MAG9B,EAAiB,UAAU,gBAAA,EAAC,GAAD,EAAQ,QAAQ,EAAiB,OAAS,CAAA;AAAA,IACjE;AAAA;AAEX"}
+{"version":3,"file":"BaseLayout.es.js","names":[],"sources":["../../../src/insights-v2/components/BaseLayout.tsx"],"sourcesContent":["import Button from '@mui/material/Button'\nimport Card from '@mui/material/Card'\nimport Stack from '@mui/material/Stack'\n\nimport { ChevronRight } from '@mxenabled/mx-icons'\n\nimport { blocks } from '../mappings/blocks'\n\nimport Footer from './Footer'\nimport Header from './Header'\nimport { useInsightsV2Store } from '../../common'\nimport type { Beat } from '../../core'\nimport { BeatActionsProvider, type BeatActions } from '../beatActions'\nimport { ActionBlockLayer } from '../actionBlocks/ActionBlockLayer'\n\ninterface BaseLayoutProps {\n  beat: Beat\n  /** Host callbacks (menu actions, updateBeat, …) delivered to the card subtree\n   *  via context, so blocks/variants can reach them without prop drilling. */\n  beatActions?: BeatActions\n}\n\n// Stable default so an omitted prop doesn't create a new context value each\n// render (which would re-render every consumer).\nconst NO_BEAT_ACTIONS: BeatActions = {}\n\nconst BaseLayout = ({ beat, beatActions = NO_BEAT_ACTIONS }: BaseLayoutProps) => {\n  const { openCtaDrawer } = useInsightsV2Store()\n\n  const insights_payload = beat.insights_payload\n\n  if (!insights_payload) {\n    return null\n  }\n\n  const { instance_slot, primary_cta, secondary_cta, subtitle, widget_type } = insights_payload\n  const { block } = instance_slot\n\n  const Block = blocks[block as keyof typeof blocks]\n\n  const isMini = widget_type === 'mini'\n\n  return (\n    <BeatActionsProvider value={beatActions}>\n      <Stack sx={{ mb: 16 }}>\n        <Card>\n          {/* Header */}\n          <Header isMini={isMini} subtitle={subtitle} title={beat.title} />\n\n          {/* Instance Slot */}\n          {Block && <Block beatGuid={beat.guid} payload={insights_payload} />}\n\n          {/* Body */}\n          <Stack sx={{ gap: 6, pb: 16, pl: 12, pr: 16, pt: 12 }}>\n            <div\n              dangerouslySetInnerHTML={{\n                __html: beat.html_description as string,\n              }}\n              style={{ paddingLeft: 4 }}\n            />\n            {beat?.in_description_cta && (\n              <Button\n                endIcon={<ChevronRight />}\n                onClick={() => {}}\n                sx={{ height: 24, p: 4, width: 'max-content' }}\n              >\n                {beat.in_description_cta}\n              </Button>\n            )}\n          </Stack>\n\n          {/* CTA. A CTA without a real `block` doesn't open a drawer (it may trigger\n              a postMessage etc.) — restrict the drawer to CTAs that carry a block. */}\n          {!isMini && primary_cta?.label && (\n            <Stack sx={{ gap: 8, pb: 16, px: 16 }}>\n              <Button\n                onClick={() => primary_cta.block && openCtaDrawer(beat.guid, 'primaryCta')}\n                variant=\"outlined\"\n              >\n                {primary_cta.label}\n              </Button>\n              {secondary_cta?.label && (\n                <Button\n                  color=\"secondary\"\n                  onClick={() => secondary_cta.block && openCtaDrawer(beat.guid, 'secondaryCta')}\n                >\n                  {secondary_cta.label}\n                </Button>\n              )}\n            </Stack>\n          )}\n        </Card>\n\n        {/* Always mounted: the drawer's slide in/out animation only plays when\n            MUI sees isOpen CHANGE on a mounted Drawer — conditionally mounting\n            it here made it snap open and vanish on close. */}\n        <ActionBlockLayer beat={beat} />\n\n        {/* Footer */}\n        {insights_payload.footer && <Footer footer={insights_payload.footer} />}\n      </Stack>\n    </BeatActionsProvider>\n  )\n}\n\nexport default BaseLayout\n"],"mappings":";;;;;;;;;;;AAwBA,IAAM,IAA+B,CAAC,GAEhC,IAAA,CAAc,EAAE,MAAA,GAAM,aAAA,IAAc,EAAA,MAAuC;AAC/E,QAAM,EAAE,eAAA,EAAA,IAAkB,EAAmB,GAEvC,IAAmB,EAAK;AAE9B,MAAI,CAAC,EACH,QAAO;AAGT,QAAM,EAAE,eAAA,GAAe,aAAA,GAAa,eAAA,GAAe,UAAA,GAAU,aAAA,EAAA,IAAgB,GACvE,EAAE,OAAA,EAAA,IAAU,GAEZ,IAAQ,EAAO,CAAA,GAEf,IAAS,MAAgB;AAE/B,SACE,gBAAA,EAAC,GAAD;AAAA,IAAqB,OAAO;AAAA,IAC1B,UAAA,gBAAA,EAAC,GAAD;AAAA,MAAO,IAAI,EAAE,IAAI,GAAG;AAAA,MAApB,UAAA;AAAA,QACE,gBAAA,EAAC,GAAD,EAAA,UAAA;AAAA,UAEE,gBAAA,EAAC,GAAD;AAAA,YAAgB,QAAA;AAAA,YAAkB,UAAA;AAAA,YAAU,OAAO,EAAK;AAAA,UAAQ,CAAA;AAAA,UAG/D,KAAS,gBAAA,EAAC,GAAD;AAAA,YAAO,UAAU,EAAK;AAAA,YAAM,SAAS;AAAA,UAAmB,CAAA;AAAA,UAGlE,gBAAA,EAAC,GAAD;AAAA,YAAO,IAAI;AAAA,cAAE,KAAK;AAAA,cAAG,IAAI;AAAA,cAAI,IAAI;AAAA,cAAI,IAAI;AAAA,cAAI,IAAI;AAAA,YAAG;AAAA,YAApD,UAAA,CACE,gBAAA,EAAC,OAAD;AAAA,cACE,yBAAyB,EACvB,QAAQ,EAAK,iBACf;AAAA,cACA,OAAO,EAAE,aAAa,EAAE;AAAA,YACzB,CAAA,GACA,GAAM,sBACL,gBAAA,EAAC,GAAD;AAAA,cACE,SAAS,gBAAA,EAAC,GAAD,CAAe,CAAA;AAAA,cACxB,SAAA,MAAe;AAAA,cAAC;AAAA,cAChB,IAAI;AAAA,gBAAE,QAAQ;AAAA,gBAAI,GAAG;AAAA,gBAAG,OAAO;AAAA,cAAc;AAAA,cAE5C,UAAA,EAAK;AAAA,YACA,CAAA,CAEL;AAAA;UAIN,CAAC,KAAU,GAAa,SACvB,gBAAA,EAAC,GAAD;AAAA,YAAO,IAAI;AAAA,cAAE,KAAK;AAAA,cAAG,IAAI;AAAA,cAAI,IAAI;AAAA,YAAG;AAAA,YAApC,UAAA,CACE,gBAAA,EAAC,GAAD;AAAA,cACE,SAAA,MAAe,EAAY,SAAS,EAAc,EAAK,MAAM,YAAY;AAAA,cACzE,SAAQ;AAAA,cAEP,UAAA,EAAY;AAAA,YACP,CAAA,GACP,GAAe,SACd,gBAAA,EAAC,GAAD;AAAA,cACE,OAAM;AAAA,cACN,SAAA,MAAe,EAAc,SAAS,EAAc,EAAK,MAAM,cAAc;AAAA,cAE5E,UAAA,EAAc;AAAA,YACT,CAAA,CAEL;AAAA;QAEL,EAAA,CAAA;AAAA,QAKN,gBAAA,EAAC,GAAD,EAAwB,MAAA,EAAO,CAAA;AAAA,QAG9B,EAAiB,UAAU,gBAAA,EAAC,GAAD,EAAQ,QAAQ,EAAiB,OAAS,CAAA;AAAA,MACjE;AAAA;EACY,CAAA;AAEzB"}

package/dist/insights-v2/components/Header.es.js

@@ -1,41 +1,31 @@
-import p from "./SubHeader.es.js";
-import o from "@mui/material/Stack";
-import { H3 as a } from "@mxenabled/mxui";
-import { MoreHoriz as m } from "@mxenabled/mx-icons";
-import { jsx as r, jsxs as t } from "react/jsx-runtime";
-import s from "@mui/material/IconButton";
-var H = ({ isMini: i, subtitle: e, title: n }) => /* @__PURE__ */ t(o, {
-  sx: {
-    gap: 4,
-    pb: 12,
-    pl: 16,
-    pr: 16,
-    pt: 16
-  },
-  children: [/* @__PURE__ */ t(o, {
+import m from "./SubHeader.es.js";
+import { useBeatActions as s } from "../beatActions.es.js";
+import { InsightOptionsMenu as a } from "./InsightOptionsMenu.es.js";
+import t from "@mui/material/Stack";
+import { H3 as c } from "@mxenabled/mxui";
+import { jsx as r, jsxs as o } from "react/jsx-runtime";
+var g = ({ isMini: n, subtitle: e, title: i }) => {
+  const { onMenuAction: p } = s();
+  return /* @__PURE__ */ o(t, {
     sx: {
-      alignItems: "center",
-      flexDirection: "row",
-      justifyContent: "space-between"
+      gap: 4,
+      pb: 12,
+      pl: 16,
+      pr: 16,
+      pt: 16
     },
-    children: [/* @__PURE__ */ r(a, { children: n }), !i && /* @__PURE__ */ r(s, {
-      "aria-label": "More Options",
-      onClick: () => {
-      },
+    children: [/* @__PURE__ */ o(t, {
       sx: {
-        minHeight: 24,
-        p: 0,
-        minWidth: 24
+        alignItems: "center",
+        flexDirection: "row",
+        justifyContent: "space-between"
       },
-      children: /* @__PURE__ */ r(m, {
-        size: 24,
-        sx: { color: "neutral.dark" }
-      })
-    })]
-  }), e && /* @__PURE__ */ r(p, { subtitle: e })]
-});
+      children: [/* @__PURE__ */ r(c, { children: i }), !n && p && /* @__PURE__ */ r(a, {})]
+    }), e && /* @__PURE__ */ r(m, { subtitle: e })]
+  });
+};
 export {
-  H as default
+  g as default
 };
 
 //# sourceMappingURL=Header.es.js.map

package/dist/insights-v2/components/Header.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"Header.es.js","names":[],"sources":["../../../src/insights-v2/components/Header.tsx"],"sourcesContent":["import IconButton from '@mui/material/IconButton'\nimport Stack from '@mui/material/Stack'\n\nimport { H3 } from '@mxenabled/mxui'\nimport { MoreHoriz } from '@mxenabled/mx-icons'\n\nimport SubHeader from './SubHeader'\nimport type { Subtitle } from '../../core'\n\ninterface HeaderProps {\n  isMini: boolean\n  subtitle?: Subtitle\n  title: string\n}\n\nconst Header = ({ isMini, subtitle, title }: HeaderProps) => {\n  const handleMoreOptions = () => {}\n\n  return (\n    <Stack sx={{ gap: 4, pb: 12, pl: 16, pr: 16, pt: 16 }}>\n      <Stack sx={{ alignItems: 'center', flexDirection: 'row', justifyContent: 'space-between' }}>\n        <H3>{title}</H3>\n        {!isMini && (\n          <IconButton\n            aria-label=\"More Options\" // TODO: Localize\n            onClick={handleMoreOptions}\n            sx={{ minHeight: 24, p: 0, minWidth: 24 }}\n          >\n            <MoreHoriz size={24} sx={{ color: 'neutral.dark' }} />\n          </IconButton>\n        )}\n      </Stack>\n\n      {/* Sub Header */}\n      {subtitle && <SubHeader subtitle={subtitle} />}\n    </Stack>\n  )\n}\n\nexport default Header\n"],"mappings":";;;;;;AAeA,IAAM,IAAA,CAAU,EAAE,QAAA,GAAQ,UAAA,GAAU,OAAA,EAAA,MAIhC,gBAAA,EAAC,GAAD;AAAA,EAAO,IAAI;AAAA,IAAE,KAAK;AAAA,IAAG,IAAI;AAAA,IAAI,IAAI;AAAA,IAAI,IAAI;AAAA,IAAI,IAAI;AAAA,EAAG;AAAA,EAApD,UAAA,CACE,gBAAA,EAAC,GAAD;AAAA,IAAO,IAAI;AAAA,MAAE,YAAY;AAAA,MAAU,eAAe;AAAA,MAAO,gBAAgB;AAAA,IAAgB;AAAA,IAAzF,UAAA,CACE,gBAAA,EAAC,GAAD,EAAA,UAAK,EAAU,CAAA,GACd,CAAC,KACA,gBAAA,EAAC,GAAD;AAAA,MACE,cAAW;AAAA,MACX,SATJ,MAA0B;AAAA,MAAC;AAAA,MAUvB,IAAI;AAAA,QAAE,WAAW;AAAA,QAAI,GAAG;AAAA,QAAG,UAAU;AAAA,MAAG;AAAA,MAExC,UAAA,gBAAA,EAAC,GAAD;AAAA,QAAW,MAAM;AAAA,QAAI,IAAI,EAAE,OAAO,eAAe;AAAA,MAAI,CAAA;AAAA,IAC3C,CAAA,CAET;AAAA,EAGN,CAAA,GAAA,KAAY,gBAAA,EAAC,GAAD,EAAqB,UAAA,EAAW,CAAA,CACxC"}
+{"version":3,"file":"Header.es.js","names":[],"sources":["../../../src/insights-v2/components/Header.tsx"],"sourcesContent":["import Stack from '@mui/material/Stack'\n\nimport { H3 } from '@mxenabled/mxui'\n\nimport SubHeader from './SubHeader'\nimport InsightOptionsMenu from './InsightOptionsMenu'\nimport { useBeatActions } from '../beatActions'\nimport type { Subtitle } from '../../core'\n\ninterface HeaderProps {\n  isMini: boolean\n  subtitle?: Subtitle\n  title: string\n}\n\nconst Header = ({ isMini, subtitle, title }: HeaderProps) => {\n  // The overflow menu appears only when the host wired a menu handler and this\n  // isn't the compact/mini layout. Handlers are delivered via context.\n  const { onMenuAction } = useBeatActions()\n\n  return (\n    <Stack sx={{ gap: 4, pb: 12, pl: 16, pr: 16, pt: 16 }}>\n      <Stack sx={{ alignItems: 'center', flexDirection: 'row', justifyContent: 'space-between' }}>\n        <H3>{title}</H3>\n        {!isMini && onMenuAction && <InsightOptionsMenu />}\n      </Stack>\n\n      {/* Sub Header */}\n      {subtitle && <SubHeader subtitle={subtitle} />}\n    </Stack>\n  )\n}\n\nexport default Header\n"],"mappings":";;;;;;AAeA,IAAM,IAAA,CAAU,EAAE,QAAA,GAAQ,UAAA,GAAU,OAAA,EAAA,MAAyB;AAG3D,QAAM,EAAE,cAAA,EAAA,IAAiB,EAAe;AAExC,SACE,gBAAA,EAAC,GAAD;AAAA,IAAO,IAAI;AAAA,MAAE,KAAK;AAAA,MAAG,IAAI;AAAA,MAAI,IAAI;AAAA,MAAI,IAAI;AAAA,MAAI,IAAI;AAAA,IAAG;AAAA,IAApD,UAAA,CACE,gBAAA,EAAC,GAAD;AAAA,MAAO,IAAI;AAAA,QAAE,YAAY;AAAA,QAAU,eAAe;AAAA,QAAO,gBAAgB;AAAA,MAAgB;AAAA,MAAzF,UAAA,CACE,gBAAA,EAAC,GAAD,EAAA,UAAK,EAAU,CAAA,GACd,CAAC,KAAU,KAAgB,gBAAA,EAAC,GAAD,CAAqB,CAAA,CAC5C;AAAA,IAGN,CAAA,GAAA,KAAY,gBAAA,EAAC,GAAD,EAAqB,UAAA,EAAW,CAAA,CACxC;AAAA;AAEX"}

package/dist/insights-v2/components/InsightOptionsMenu.d.ts

@@ -0,0 +1,10 @@
+/**
+ * The insight card's "…" overflow menu. This repo owns the item set — order,
+ * icons, and labels (from `insights_feed.overflow_menu` copy) — while the host
+ * supplies the action handler via `beatActions.onMenuAction` (read from
+ * context). Renders nothing without a handler or before copy resolves.
+ */
+export declare const InsightOptionsMenu: (() => import("react/jsx-runtime").JSX.Element | null) & {
+    displayName: string;
+};
+export default InsightOptionsMenu;

package/dist/insights-v2/components/InsightOptionsMenu.es.js

@@ -0,0 +1,54 @@
+import { useGlobalCopyStore as m } from "../../common/context/hooks.es.js";
+import { useBeatActions as a } from "../beatActions.es.js";
+import { OverflowMenu as p } from "./OverflowMenu.es.js";
+import { observer as f } from "mobx-react-lite";
+import { Icon as l } from "@mxenabled/mx-icons";
+import { jsx as o } from "react/jsx-runtime";
+var d = f(() => {
+  const { onMenuAction: n } = a(), e = m().insights_feed?.overflow_menu;
+  if (!n || !e) return null;
+  const { onAction: t, onOpen: i, disabled: r } = n, s = [
+    {
+      key: "helpful",
+      icon: /* @__PURE__ */ o(l, {
+        name: "thumb_up",
+        size: 24,
+        sx: { color: "text.primary" }
+      }),
+      label: e.helpful,
+      onSelect: () => t("helpful")
+    },
+    {
+      key: "not_helpful",
+      icon: /* @__PURE__ */ o(l, {
+        name: "thumb_down",
+        size: 24,
+        sx: { color: "text.primary" }
+      }),
+      label: e.not_helpful,
+      onSelect: () => t("not_helpful")
+    },
+    {
+      key: "hide",
+      icon: /* @__PURE__ */ o(l, {
+        name: "visibility_off",
+        size: 24,
+        sx: { color: "text.primary" }
+      }),
+      label: e.hide,
+      onSelect: () => t("hide")
+    }
+  ];
+  return /* @__PURE__ */ o(p, {
+    ariaLabel: e.aria_label,
+    disabled: r,
+    items: s,
+    onOpen: i
+  });
+});
+export {
+  d as InsightOptionsMenu,
+  d as default
+};
+
+//# sourceMappingURL=InsightOptionsMenu.es.js.map

package/dist/insights-v2/components/InsightOptionsMenu.es.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"InsightOptionsMenu.es.js","names":[],"sources":["../../../src/insights-v2/components/InsightOptionsMenu.tsx"],"sourcesContent":["import { observer } from 'mobx-react-lite'\n\nimport { Icon } from '@mxenabled/mx-icons'\n\nimport { useGlobalCopyStore } from '../../common'\n\nimport { useBeatActions } from '../beatActions'\n\nimport { OverflowMenu, type OverflowMenuItem } from './OverflowMenu'\n\n/**\n * The insight card's \"…\" overflow menu. This repo owns the item set — order,\n * icons, and labels (from `insights_feed.overflow_menu` copy) — while the host\n * supplies the action handler via `beatActions.onMenuAction` (read from\n * context). Renders nothing without a handler or before copy resolves.\n */\nexport const InsightOptionsMenu = observer(() => {\n  const { onMenuAction } = useBeatActions()\n  const copy = useGlobalCopyStore().insights_feed?.overflow_menu\n\n  if (!onMenuAction || !copy) return null\n\n  const { onAction, onOpen, disabled } = onMenuAction\n\n  const items: OverflowMenuItem[] = [\n    {\n      key: 'helpful',\n      icon: <Icon name=\"thumb_up\" size={24} sx={{ color: 'text.primary' }} />,\n      label: copy.helpful,\n      onSelect: () => onAction('helpful'),\n    },\n    {\n      key: 'not_helpful',\n      icon: <Icon name=\"thumb_down\" size={24} sx={{ color: 'text.primary' }} />,\n      label: copy.not_helpful,\n      onSelect: () => onAction('not_helpful'),\n    },\n    {\n      key: 'hide',\n      icon: <Icon name=\"visibility_off\" size={24} sx={{ color: 'text.primary' }} />,\n      label: copy.hide,\n      onSelect: () => onAction('hide'),\n    },\n  ]\n\n  return (\n    <OverflowMenu ariaLabel={copy.aria_label} disabled={disabled} items={items} onOpen={onOpen} />\n  )\n})\n\nexport default InsightOptionsMenu\n"],"mappings":";;;;;;AAgBA,IAAa,IAAqB,EAAA,MAAe;AAC/C,QAAM,EAAE,cAAA,EAAA,IAAiB,EAAe,GAClC,IAAO,EAAmB,EAAE,eAAe;AAEjD,MAAI,CAAC,KAAgB,CAAC,EAAM,QAAO;AAEnC,QAAM,EAAE,UAAA,GAAU,QAAA,GAAQ,UAAA,EAAA,IAAa,GAEjC,IAA4B;AAAA,IAChC;AAAA,MACE,KAAK;AAAA,MACL,MAAM,gBAAA,EAAC,GAAD;AAAA,QAAM,MAAK;AAAA,QAAW,MAAM;AAAA,QAAI,IAAI,EAAE,OAAO,eAAe;AAAA,MAAI,CAAA;AAAA,MACtE,OAAO,EAAK;AAAA,MACZ,UAAA,MAAgB,EAAS,SAAS;AAAA,IACpC;AAAA,IACA;AAAA,MACE,KAAK;AAAA,MACL,MAAM,gBAAA,EAAC,GAAD;AAAA,QAAM,MAAK;AAAA,QAAa,MAAM;AAAA,QAAI,IAAI,EAAE,OAAO,eAAe;AAAA,MAAI,CAAA;AAAA,MACxE,OAAO,EAAK;AAAA,MACZ,UAAA,MAAgB,EAAS,aAAa;AAAA,IACxC;AAAA,IACA;AAAA,MACE,KAAK;AAAA,MACL,MAAM,gBAAA,EAAC,GAAD;AAAA,QAAM,MAAK;AAAA,QAAiB,MAAM;AAAA,QAAI,IAAI,EAAE,OAAO,eAAe;AAAA,MAAI,CAAA;AAAA,MAC5E,OAAO,EAAK;AAAA,MACZ,UAAA,MAAgB,EAAS,MAAM;AAAA,IACjC;AAAA,EACF;AAEA,SACE,gBAAA,EAAC,GAAD;AAAA,IAAc,WAAW,EAAK;AAAA,IAAsB,UAAA;AAAA,IAAiB,OAAA;AAAA,IAAe,QAAA;AAAA,EAAS,CAAA;AAEjG,CAAC"}

package/dist/insights-v2/components/OverflowMenu.d.ts

@@ -0,0 +1,32 @@
+import { ReactNode } from 'react';
+export interface OverflowMenuItem {
+    /** Stable identity for the item (also its React key). */
+    key: string;
+    /** Leading icon node. */
+    icon: ReactNode;
+    /** Visible label. */
+    label: string;
+    /** Invoked when the item is chosen (after the menu closes). */
+    onSelect: () => void;
+    /** Optional per-item disabled state. */
+    disabled?: boolean;
+}
+export interface OverflowMenuProps {
+    /** Items to render, top to bottom. */
+    items: OverflowMenuItem[];
+    /** Accessible label for the trigger button. */
+    ariaLabel: string;
+    /** Called when the menu opens (e.g. to fire analytics). */
+    onOpen?: () => void;
+    /** Disables the trigger entirely (e.g. an obsolete beat). */
+    disabled?: boolean;
+}
+/**
+ * A "…" (MoreHoriz) overflow menu: an icon trigger that opens a list of actions.
+ *
+ * Presentational only — it owns nothing but the open/close anchor state. The item
+ * set and what each item does are supplied by the caller via `items[].onSelect`,
+ * so all data/side-effects (analytics, feedback, hide, …) live outside this file.
+ */
+export declare const OverflowMenu: ({ items, ariaLabel, onOpen, disabled }: OverflowMenuProps) => import("react/jsx-runtime").JSX.Element;
+export default OverflowMenu;

package/dist/insights-v2/components/OverflowMenu.es.js

@@ -0,0 +1,73 @@
+import { useId as v, useState as z } from "react";
+import { MoreHoriz as M } from "@mxenabled/mx-icons";
+import { Fragment as O, jsx as r, jsxs as m } from "react/jsx-runtime";
+import k from "@mui/material/IconButton";
+import C from "@mui/material/ListItemText";
+import L from "@mui/material/ListItemIcon";
+import S from "@mui/material/MenuItem";
+import y from "@mui/material/Menu";
+var P = ({ items: d, ariaLabel: c, onOpen: p, disabled: h = !1 }) => {
+  const [e, n] = z(null), t = !!e, i = v(), a = `${i}-button`, l = `${i}-menu`, u = (o) => {
+    n(o.currentTarget), p?.();
+  }, s = () => n(null), f = (o) => {
+    s(), o();
+  };
+  return /* @__PURE__ */ m(O, { children: [/* @__PURE__ */ r(k, {
+    "aria-controls": t ? l : void 0,
+    "aria-expanded": t || void 0,
+    "aria-haspopup": "true",
+    "aria-label": c,
+    disabled: h,
+    id: a,
+    onClick: u,
+    sx: {
+      minHeight: 24,
+      minWidth: 24,
+      p: 0
+    },
+    children: /* @__PURE__ */ r(M, {
+      size: 24,
+      sx: { color: "neutral.dark" }
+    })
+  }), /* @__PURE__ */ r(y, {
+    MenuListProps: {
+      "aria-labelledby": a,
+      sx: { width: 212 }
+    },
+    anchorEl: e,
+    anchorOrigin: {
+      horizontal: "right",
+      vertical: "top"
+    },
+    disableScrollLock: !0,
+    id: l,
+    onClose: s,
+    open: t,
+    transformOrigin: {
+      horizontal: "right",
+      vertical: "top"
+    },
+    children: d.map(({ key: o, icon: x, label: g, onSelect: b, disabled: I }) => /* @__PURE__ */ m(S, {
+      disabled: I,
+      onClick: () => f(b),
+      sx: { p: 12 },
+      children: [/* @__PURE__ */ r(L, {
+        sx: { minWidth: "32px !important" },
+        children: x
+      }), /* @__PURE__ */ r(C, {
+        primary: g,
+        slotProps: { primary: {
+          fontSize: 15,
+          fontWeight: "normal",
+          lineHeight: "20px"
+        } }
+      })]
+    }, o))
+  })] });
+};
+export {
+  P as OverflowMenu,
+  P as default
+};
+
+//# sourceMappingURL=OverflowMenu.es.js.map

package/dist/insights-v2/components/OverflowMenu.es.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"OverflowMenu.es.js","names":[],"sources":["../../../src/insights-v2/components/OverflowMenu.tsx"],"sourcesContent":["import { useId, useState, type MouseEvent, type ReactNode } from 'react'\n\nimport IconButton from '@mui/material/IconButton'\nimport ListItemIcon from '@mui/material/ListItemIcon'\nimport ListItemText from '@mui/material/ListItemText'\nimport Menu from '@mui/material/Menu'\nimport MenuItem from '@mui/material/MenuItem'\n\nimport { MoreHoriz } from '@mxenabled/mx-icons'\n\nexport interface OverflowMenuItem {\n  /** Stable identity for the item (also its React key). */\n  key: string\n  /** Leading icon node. */\n  icon: ReactNode\n  /** Visible label. */\n  label: string\n  /** Invoked when the item is chosen (after the menu closes). */\n  onSelect: () => void\n  /** Optional per-item disabled state. */\n  disabled?: boolean\n}\n\nexport interface OverflowMenuProps {\n  /** Items to render, top to bottom. */\n  items: OverflowMenuItem[]\n  /** Accessible label for the trigger button. */\n  ariaLabel: string\n  /** Called when the menu opens (e.g. to fire analytics). */\n  onOpen?: () => void\n  /** Disables the trigger entirely (e.g. an obsolete beat). */\n  disabled?: boolean\n}\n\n/**\n * A \"…\" (MoreHoriz) overflow menu: an icon trigger that opens a list of actions.\n *\n * Presentational only — it owns nothing but the open/close anchor state. The item\n * set and what each item does are supplied by the caller via `items[].onSelect`,\n * so all data/side-effects (analytics, feedback, hide, …) live outside this file.\n */\nexport const OverflowMenu = ({ items, ariaLabel, onOpen, disabled = false }: OverflowMenuProps) => {\n  const [anchorEl, setAnchorEl] = useState<HTMLElement | null>(null)\n  const isOpen = Boolean(anchorEl)\n\n  // Unique per instance so multiple menus on a page (one per card) don't share\n  // DOM ids or cross-wire their aria relationships.\n  const baseId = useId()\n  const buttonId = `${baseId}-button`\n  const menuId = `${baseId}-menu`\n\n  const handleOpen = (event: MouseEvent<HTMLButtonElement>) => {\n    setAnchorEl(event.currentTarget)\n    onOpen?.()\n  }\n\n  const handleClose = () => setAnchorEl(null)\n\n  // Close before running the caller's handler so the menu never lingers over a\n  // dialog/drawer the handler may open.\n  const handleSelect = (onSelect: () => void) => {\n    handleClose()\n    onSelect()\n  }\n\n  return (\n    <>\n      <IconButton\n        aria-controls={isOpen ? menuId : undefined}\n        aria-expanded={isOpen || undefined}\n        aria-haspopup=\"true\"\n        aria-label={ariaLabel}\n        disabled={disabled}\n        id={buttonId}\n        onClick={handleOpen}\n        sx={{ minHeight: 24, minWidth: 24, p: 0 }}\n      >\n        <MoreHoriz size={24} sx={{ color: 'neutral.dark' }} />\n      </IconButton>\n      <Menu\n        MenuListProps={{ 'aria-labelledby': buttonId, sx: { width: 212 } }}\n        anchorEl={anchorEl}\n        anchorOrigin={{ horizontal: 'right', vertical: 'top' }}\n        disableScrollLock={true}\n        id={menuId}\n        onClose={handleClose}\n        open={isOpen}\n        transformOrigin={{ horizontal: 'right', vertical: 'top' }}\n      >\n        {items.map(({ key, icon, label, onSelect, disabled: itemDisabled }) => (\n          <MenuItem\n            disabled={itemDisabled}\n            key={key}\n            onClick={() => handleSelect(onSelect)}\n            sx={{ p: 12 }}\n          >\n            <ListItemIcon sx={{ minWidth: '32px !important' }}>{icon}</ListItemIcon>\n            <ListItemText\n              primary={label}\n              slotProps={{ primary: { fontSize: 15, fontWeight: 'normal', lineHeight: '20px' } }}\n            />\n          </MenuItem>\n        ))}\n      </Menu>\n    </>\n  )\n}\n\nexport default OverflowMenu\n"],"mappings":";;;;;;;;AAyCA,IAAa,IAAA,CAAgB,EAAE,OAAA,GAAO,WAAA,GAAW,QAAA,GAAQ,UAAA,IAAW,GAAA,MAA+B;AACjG,QAAM,CAAC,GAAU,CAAA,IAAe,EAA6B,IAAI,GAC3D,IAAS,EAAQ,GAIjB,IAAS,EAAM,GACf,IAAW,GAAG,CAAA,WACd,IAAS,GAAG,CAAA,SAEZ,IAAA,CAAc,MAAyC;AAC3D,IAAA,EAAY,EAAM,aAAa,GAC/B,IAAS;AAAA,EACX,GAEM,IAAA,MAAoB,EAAY,IAAI,GAIpC,IAAA,CAAgB,MAAyB;AAC7C,IAAA,EAAY,GACZ,EAAS;AAAA,EACX;AAEA,SACE,gBAAA,EAAA,GAAA,EAAA,UAAA,CACE,gBAAA,EAAC,GAAD;AAAA,IACE,iBAAe,IAAS,IAAS;AAAA,IACjC,iBAAe,KAAU;AAAA,IACzB,iBAAc;AAAA,IACd,cAAY;AAAA,IACF,UAAA;AAAA,IACV,IAAI;AAAA,IACJ,SAAS;AAAA,IACT,IAAI;AAAA,MAAE,WAAW;AAAA,MAAI,UAAU;AAAA,MAAI,GAAG;AAAA,IAAE;AAAA,IAExC,UAAA,gBAAA,EAAC,GAAD;AAAA,MAAW,MAAM;AAAA,MAAI,IAAI,EAAE,OAAO,eAAe;AAAA,IAAI,CAAA;AAAA,EAC3C,CAAA,GACZ,gBAAA,EAAC,GAAD;AAAA,IACE,eAAe;AAAA,MAAE,mBAAmB;AAAA,MAAU,IAAI,EAAE,OAAO,IAAI;AAAA,IAAE;AAAA,IACvD,UAAA;AAAA,IACV,cAAc;AAAA,MAAE,YAAY;AAAA,MAAS,UAAU;AAAA,IAAM;AAAA,IACrD,mBAAmB;AAAA,IACnB,IAAI;AAAA,IACJ,SAAS;AAAA,IACT,MAAM;AAAA,IACN,iBAAiB;AAAA,MAAE,YAAY;AAAA,MAAS,UAAU;AAAA,IAAM;AAAA,IAEvD,UAAA,EAAM,IAAA,CAAK,EAAE,KAAA,GAAK,MAAA,GAAM,OAAA,GAAO,UAAA,GAAU,UAAU,EAAA,MAClD,gBAAA,EAAC,GAAD;AAAA,MACE,UAAU;AAAA,MAEV,SAAA,MAAe,EAAa,CAAQ;AAAA,MACpC,IAAI,EAAE,GAAG,GAAG;AAAA,MAJd,UAAA,CAME,gBAAA,EAAC,GAAD;AAAA,QAAc,IAAI,EAAE,UAAU,kBAAkB;AAAA,QAAI,UAAA;AAAA,MAAmB,CAAA,GACvE,gBAAA,EAAC,GAAD;AAAA,QACE,SAAS;AAAA,QACT,WAAW,EAAE,SAAS;AAAA,UAAE,UAAU;AAAA,UAAI,YAAY;AAAA,UAAU,YAAY;AAAA,QAAO,EAAE;AAAA,MAClF,CAAA,CACO;AAAA,IATH,GAAA,CASG,CACX;AAAA,EACG,CAAA,CACN,EAAA,CAAA;AAEN"}

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

@@ -7,6 +7,9 @@ export { default as StatusMessageCard } from './components/StatusMessageCard';
 export { default as TransactionListCard, type FooterRow } from './components/TransactionListCard';
 export { default as InsightTransactionRow, type InsightTransactionRowProps, } from './components/InsightTransactionRow';
 export { default as LogoClusterCard } from './components/LogoClusterCard';
+export { default as OverflowMenu, type OverflowMenuItem, type OverflowMenuProps, } from './components/OverflowMenu';
+export { default as InsightOptionsMenu } from './components/InsightOptionsMenu';
+export { useBeatActions, type BeatActions, type MenuActionHandlers, type UpdateParams, type InsightMenuAction, } from './beatActions';
 export { default as LogoTile } from './components/LogoTile';
 export { default as MerchantHighlightCard } from './components/MerchantHighlightCard';
 export { default as P2PLogoStack } from './components/P2PLogoStack';

package/dist/insights-v2/index.es.js

@@ -1,63 +1,69 @@
-import { BAR_CHART_VARIANTS as o, barChartVariant as t, buildChartData as m, buildDataSeries as i } from "./blocks/ChartBlocks/BarchartBlock/utils.es.js";
+import { BAR_CHART_VARIANTS as r, barChartVariant as t, buildChartData as m, buildDataSeries as i } from "./blocks/ChartBlocks/BarchartBlock/utils.es.js";
 import { BarchartBlock as p } from "./blocks/ChartBlocks/BarchartBlock/BarchartBlock.es.js";
-import { DoubleBarChartBlock as c } from "./blocks/ChartBlocks/DoubleBarChartBlock/DoubleBarChartBlock.es.js";
-import l from "./blocks/ChartBlocks/StepChartBlock/StepChartBlock.es.js";
+import { DoubleBarChartBlock as e } from "./blocks/ChartBlocks/DoubleBarChartBlock/DoubleBarChartBlock.es.js";
+import n from "./blocks/ChartBlocks/StepChartBlock/StepChartBlock.es.js";
 import s from "./blocks/ChartBlocks/DonutChartBlock/DonutChartBlock.es.js";
 import B from "./blocks/ChartBlocks/DoubleProgressBarBlock/DoubleProgressBarBlock.es.js";
-import u from "./blocks/ComponentBlocks/AccountBlock/AccountBlock.es.js";
+import g from "./blocks/ComponentBlocks/AccountBlock/AccountBlock.es.js";
 import S from "./components/TransferLogoCard.es.js";
-import h from "./blocks/ComponentBlocks/AccountSwitchBlock/AccountSwitchBlock.es.js";
+import k from "./blocks/ComponentBlocks/AccountSwitchBlock/AccountSwitchBlock.es.js";
 import { BudgetBlock as T } from "./blocks/ComponentBlocks/BudgetBlock/BudgetBlock.es.js";
 import D from "./components/SaveAnExtraCard.es.js";
-import P from "./blocks/ComponentBlocks/SaveExtraBlock/SaveExtraBlock.es.js";
+import v from "./blocks/ComponentBlocks/SaveExtraBlock/SaveExtraBlock.es.js";
 import y from "./components/InsightTransactionRow.es.js";
-import R from "./components/TransactionListCard.es.js";
-import { CategoryTransactionsBlock as E } from "./blocks/ComponentBlocks/TransactionBlock/TransactionBlock.es.js";
-import { SVGImageBlock as V } from "./blocks/ImageBlocks/SVGImageBlock/SVGImageBlock.es.js";
-import M from "./components/AccountHeroCard.es.js";
-import G from "./components/AmountPill.es.js";
-import O from "./components/DesignateEmergencySavingsCard.es.js";
-import j from "./components/BaseLayout.es.js";
-import z from "./components/StatusMessageCard.es.js";
-import J from "./components/LogoTile.es.js";
-import Q from "./components/LogoClusterCard.es.js";
-import X from "./components/MerchantHighlightCard.es.js";
-import Z from "./components/P2PLogoStack.es.js";
-import rr from "./components/SavingsOpportunityCard.es.js";
-import tr from "./components/StatusPill.es.js";
-import ir from "./components/SubscriptionHeroCard.es.js";
-import pr from "./components/UpcomingBillCard.es.js";
+import I from "./components/TransactionListCard.es.js";
+import { CategoryTransactionsBlock as R } from "./blocks/ComponentBlocks/TransactionBlock/TransactionBlock.es.js";
+import { SVGImageBlock as x } from "./blocks/ImageBlocks/SVGImageBlock/SVGImageBlock.es.js";
+import O from "./components/AccountHeroCard.es.js";
+import _ from "./components/AmountPill.es.js";
+import N from "./components/DesignateEmergencySavingsCard.es.js";
+import { useBeatActions as j } from "./beatActions.es.js";
+import { OverflowMenu as z } from "./components/OverflowMenu.es.js";
+import { InsightOptionsMenu as J } from "./components/InsightOptionsMenu.es.js";
+import Q from "./components/BaseLayout.es.js";
+import X from "./components/StatusMessageCard.es.js";
+import Z from "./components/LogoTile.es.js";
+import oo from "./components/LogoClusterCard.es.js";
+import to from "./components/MerchantHighlightCard.es.js";
+import io from "./components/P2PLogoStack.es.js";
+import po from "./components/SavingsOpportunityCard.es.js";
+import eo from "./components/StatusPill.es.js";
+import no from "./components/SubscriptionHeroCard.es.js";
+import so from "./components/UpcomingBillCard.es.js";
 export {
-  u as AccountBlock,
-  M as AccountHeroCard,
-  h as AccountSwitchBlock,
-  G as AmountPill,
-  o as BAR_CHART_VARIANTS,
+  g as AccountBlock,
+  O as AccountHeroCard,
+  k as AccountSwitchBlock,
+  _ as AmountPill,
+  r as BAR_CHART_VARIANTS,
   p as BarchartBlock,
-  j as BaseLayout,
+  Q as BaseLayout,
   T as BudgetBlock,
-  E as CategoryTransactionsBlock,
-  O as DesignateEmergencySavingsCard,
+  R as CategoryTransactionsBlock,
+  N as DesignateEmergencySavingsCard,
   s as DonutChartBlock,
-  c as DoubleBarChartBlock,
+  e as DoubleBarChartBlock,
   B as DoubleProgressBarBlock,
+  J as InsightOptionsMenu,
   y as InsightTransactionRow,
-  Q as LogoClusterCard,
-  J as LogoTile,
-  X as MerchantHighlightCard,
-  Z as P2PLogoStack,
-  V as SVGImageBlock,
+  oo as LogoClusterCard,
+  Z as LogoTile,
+  to as MerchantHighlightCard,
+  z as OverflowMenu,
+  io as P2PLogoStack,
+  x as SVGImageBlock,
   D as SaveAnExtraCard,
-  P as SaveExtraBlock,
-  rr as SavingsOpportunityCard,
-  z as StatusMessageCard,
-  tr as StatusPill,
-  l as StepChartBlock,
-  ir as SubscriptionHeroCard,
-  R as TransactionListCard,
+  v as SaveExtraBlock,
+  po as SavingsOpportunityCard,
+  X as StatusMessageCard,
+  eo as StatusPill,
+  n as StepChartBlock,
+  no as SubscriptionHeroCard,
+  I as TransactionListCard,
   S as TransferLogoCard,
-  pr as UpcomingBillCard,
+  so as UpcomingBillCard,
   t as barChartVariant,
   m as buildChartData,
-  i as buildDataSeries
+  i as buildDataSeries,
+  j as useBeatActions
 };

package/package.json

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