@mx-cartographer/experiences 9.4.16 → 9.4.17

package/CHANGELOG.md

@@ -1,3 +1,10 @@
+## [9.4.17] - 09-04-2026
+
+- **ADDED** - insights-v2 feedback UI screens (WEC-1781): `FeedbackDialog` (generic feedback survey with radio options + optional detail field), `DismissInsightDialog` (dismiss beat with Once/Always choices + confirmation), `FeedbackBar` (compact inline helpful/not-helpful reactions), `HiddenConfirmationCard` (visual confirmation of hidden insight). All presentational, data-agnostic; parent owns copy, options, and callback logic. Wired to `beatActions` context for parent handler dispatch (WEC-1781)
+- **ADDED** - Copy types: `DismissInsightCopy`, `FeedbackCopy`, `FeedbackBarCopy`, `HiddenConfirmationCopy`, `HideFeedbackCopy` (WEC-1781)
+- **CHANGED** - `BaseLayout` now manages feedback/dismiss/hidden dialog states and passes callbacks to the appropriate feedback components (WEC-1781)
+- **CHANGED** - Dialog utility accepts `contentSx`/`headerSx` and merges caller `sx` instead of overwriting it, to support feedback/dismiss flows (WEC-1781)
+
 ## [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)

package/dist/common/components/dialog/Dialog.es.js

@@ -1,58 +1,58 @@
-import { useScreenSize as D } from "../../hooks/useScreenSize.es.js";
+import { useScreenSize as P } from "../../hooks/useScreenSize.es.js";
 import "react";
-import { DialogFooter as y, DialogHeader as P } from "@mxenabled/mxui";
-import { jsx as i, jsxs as S } from "react/jsx-runtime";
-import A from "@mui/material/Dialog";
-import M from "@mui/material/DialogContent";
-var z = ({ className: l, copy: o, disablePrimaryButton: t = !1, isOpen: m = !1, onClose: a, onPrimaryAction: n, primaryColor: c = "primary", primaryText: s = "Confirm", onSecondaryAction: e, secondaryColor: p = "primary", secondaryText: d = "Cancel", children: f, ...g }) => {
-  const r = o?.title ?? "", u = o?.close_aria ?? "Close", { isSmallMobile: h } = D(), b = () => {
-    n?.(), a();
-  }, x = () => {
-    e && e(), a();
+import { DialogFooter as S, DialogHeader as A } from "@mxenabled/mxui";
+import { jsx as a, jsxs as M } from "react/jsx-runtime";
+import v from "@mui/material/Dialog";
+import j from "@mui/material/DialogContent";
+var N = ({ className: t, copy: o, disablePrimaryButton: s = !1, isOpen: n = !1, onClose: r, onPrimaryAction: c, primaryColor: m = "primary", primaryText: p = "Confirm", onSecondaryAction: e, secondaryColor: d = "primary", secondaryText: f = "Cancel", children: g, ...u }) => {
+  const { sx: l, ...x } = u, i = o?.title ?? "", h = o?.close_aria ?? "Close", { isSmallMobile: b } = P(), D = () => {
+    c?.(), r();
+  }, y = () => {
+    e && e(), r();
   };
-  return /* @__PURE__ */ i("div", {
-    className: `mx-cmn-dialog ${l}`,
-    children: /* @__PURE__ */ S(A, {
-      "aria-label": r,
+  return /* @__PURE__ */ a("div", {
+    className: `mx-cmn-dialog ${t}`,
+    children: /* @__PURE__ */ M(v, {
+      "aria-label": i,
       "aria-labelledby": void 0,
       maxWidth: "xs",
-      onClose: a,
-      open: m,
-      slotProps: { paper: { "aria-label": r } },
-      sx: {
+      onClose: r,
+      open: n,
+      slotProps: { paper: { "aria-label": i } },
+      sx: [{
         "& .MuiDialog-paperScrollPaper": { backgroundColor: "background.default" },
-        ...h && { "& .MuiDialog-paper": { minWidth: "100%" } },
+        ...b && { "& .MuiDialog-paper": { minWidth: "100%" } },
         height: "100%"
-      },
-      ...g,
+      }, ...l ? [l] : []],
+      ...x,
       children: [
-        /* @__PURE__ */ i(P, {
+        /* @__PURE__ */ a(A, {
           copy: {
-            title: r,
-            close_aria: u
+            title: i,
+            close_aria: h
           },
-          onClose: a,
+          onClose: r,
           truncate: !0
         }),
-        /* @__PURE__ */ i(M, {
+        /* @__PURE__ */ a(j, {
           sx: { lineHeight: 1.5 },
-          children: f
+          children: g
         }),
-        /* @__PURE__ */ i(y, {
-          isPrimaryDisabled: t,
-          onPrimaryAction: b,
-          onSecondaryAction: x,
-          primaryColor: c,
-          primaryText: s,
-          secondaryColor: p,
-          secondaryText: d
+        /* @__PURE__ */ a(S, {
+          isPrimaryDisabled: s,
+          onPrimaryAction: D,
+          onSecondaryAction: y,
+          primaryColor: m,
+          primaryText: p,
+          secondaryColor: d,
+          secondaryText: f
         })
       ]
     })
   });
 };
 export {
-  z as default
+  N as default
 };
 
 //# sourceMappingURL=Dialog.es.js.map

package/dist/common/components/dialog/Dialog.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"Dialog.es.js","names":[],"sources":["../../../../src/common/components/dialog/Dialog.tsx"],"sourcesContent":["import React from 'react'\n\nimport MuiDialog from '@mui/material/Dialog'\nimport { DialogProps as MuiDialogProps } from '@mui/material/Dialog'\nimport DialogContent from '@mui/material/DialogContent'\n\nimport { DialogFooter, DialogHeader } from '@mxenabled/mxui'\nimport { useScreenSize } from '../../hooks'\n\nexport type CopyObject = {\n  close_aria?: string\n  title: string\n}\n\nexport interface DialogProps extends Omit<MuiDialogProps, 'open'> {\n  className?: string\n  copy: CopyObject\n  disablePrimaryButton?: boolean\n  isOpen: boolean\n  onClose: () => void\n  onPrimaryAction?: () => void\n  onSecondaryAction?: () => void\n  primaryColor?: 'primary' | 'inherit' | 'secondary' | 'success' | 'error' | 'info' | 'warning'\n  primaryText?: string\n  secondaryColor?: 'primary' | 'inherit' | 'secondary' | 'success' | 'error' | 'info' | 'warning'\n  secondaryText?: string\n}\n\nconst Dialog: React.FC<React.PropsWithChildren<DialogProps>> = ({\n  className,\n  copy,\n  disablePrimaryButton = false,\n  isOpen = false,\n  onClose,\n  onPrimaryAction,\n  primaryColor = 'primary',\n  primaryText = 'Confirm',\n  onSecondaryAction,\n  secondaryColor = 'primary',\n  secondaryText = 'Cancel',\n  children,\n  ...rest\n}) => {\n  const title = copy?.title ?? ''\n  const closeAria = copy?.close_aria ?? 'Close'\n\n  const { isSmallMobile } = useScreenSize()\n\n  const handlePrimaryAction = () => {\n    onPrimaryAction?.()\n    onClose()\n  }\n\n  const handleSecondaryAction = () => {\n    if (onSecondaryAction) {\n      onSecondaryAction()\n    }\n    onClose()\n  }\n\n  return (\n    <div className={`mx-cmn-dialog ${className}`}>\n      <MuiDialog\n        aria-label={title}\n        aria-labelledby={undefined}\n        maxWidth=\"xs\"\n        onClose={onClose}\n        open={isOpen}\n        slotProps={{\n          paper: { 'aria-label': title },\n        }}\n        sx={{\n          '& .MuiDialog-paperScrollPaper': {\n            backgroundColor: 'background.default',\n          },\n          ...(isSmallMobile && { '& .MuiDialog-paper': { minWidth: '100%' } }),\n          height: '100%',\n        }}\n        {...rest}\n      >\n        <DialogHeader copy={{ title, close_aria: closeAria }} onClose={onClose} truncate={true} />\n\n        <DialogContent sx={{ lineHeight: 1.5 }}>{children}</DialogContent>\n\n        <DialogFooter\n          isPrimaryDisabled={disablePrimaryButton}\n          onPrimaryAction={handlePrimaryAction}\n          onSecondaryAction={handleSecondaryAction}\n          primaryColor={primaryColor}\n          primaryText={primaryText}\n          secondaryColor={secondaryColor}\n          secondaryText={secondaryText}\n        />\n      </MuiDialog>\n    </div>\n  )\n}\n\nexport default Dialog\n"],"mappings":";;;;;;AA4BA,IAAM,IAAA,CAA0D,EAC9D,WAAA,GACA,MAAA,GACA,sBAAA,IAAuB,IACvB,QAAA,IAAS,IACT,SAAA,GACA,iBAAA,GACA,cAAA,IAAe,WACf,aAAA,IAAc,WACd,mBAAA,GACA,gBAAA,IAAiB,WACjB,eAAA,IAAgB,UAChB,UAAA,GACA,GAAG,EAAA,MACC;AACJ,QAAM,IAAQ,GAAM,SAAS,IACvB,IAAY,GAAM,cAAc,SAEhC,EAAE,eAAA,EAAA,IAAkB,EAAc,GAElC,IAAA,MAA4B;AAChC,IAAA,IAAkB,GAClB,EAAQ;AAAA,EACV,GAEM,IAAA,MAA8B;AAClC,IAAI,KACF,EAAkB,GAEpB,EAAQ;AAAA,EACV;AAEA,SACE,gBAAA,EAAC,OAAD;AAAA,IAAK,WAAW,iBAAiB,CAAA;AAAA,IAC/B,UAAA,gBAAA,EAAC,GAAD;AAAA,MACE,cAAY;AAAA,MACZ,mBAAiB;AAAA,MACjB,UAAS;AAAA,MACA,SAAA;AAAA,MACT,MAAM;AAAA,MACN,WAAW,EACT,OAAO,EAAE,cAAc,EAAM,EAC/B;AAAA,MACA,IAAI;AAAA,QACF,iCAAiC,EAC/B,iBAAiB,qBACnB;AAAA,QACA,GAAI,KAAiB,EAAE,sBAAsB,EAAE,UAAU,OAAO,EAAE;AAAA,QAClE,QAAQ;AAAA,MACV;AAAA,MACA,GAAI;AAAA,MAhBN,UAAA;AAAA,QAkBE,gBAAA,EAAC,GAAD;AAAA,UAAc,MAAM;AAAA,YAAE,OAAA;AAAA,YAAO,YAAY;AAAA,UAAU;AAAA,UAAY,SAAA;AAAA,UAAS,UAAU;AAAA,QAAO,CAAA;AAAA,QAEzF,gBAAA,EAAC,GAAD;AAAA,UAAe,IAAI,EAAE,YAAY,IAAI;AAAA,UAAI,UAAA;AAAA,QAAwB,CAAA;AAAA,QAEjE,gBAAA,EAAC,GAAD;AAAA,UACE,mBAAmB;AAAA,UACnB,iBAAiB;AAAA,UACjB,mBAAmB;AAAA,UACL,cAAA;AAAA,UACD,aAAA;AAAA,UACG,gBAAA;AAAA,UACD,eAAA;AAAA,QAChB,CAAA;AAAA,MACQ;AAAA;EACR,CAAA;AAET"}
+{"version":3,"file":"Dialog.es.js","names":[],"sources":["../../../../src/common/components/dialog/Dialog.tsx"],"sourcesContent":["import React from 'react'\n\nimport MuiDialog from '@mui/material/Dialog'\nimport { DialogProps as MuiDialogProps } from '@mui/material/Dialog'\nimport DialogContent from '@mui/material/DialogContent'\nimport type { SxProps } from '@mui/material/styles'\n\nimport { DialogFooter, DialogHeader } from '@mxenabled/mxui'\nimport { useScreenSize } from '../../hooks'\n\nexport type CopyObject = {\n  close_aria?: string\n  title: string\n}\n\nexport interface DialogProps extends Omit<MuiDialogProps, 'open'> {\n  className?: string\n  copy: CopyObject\n  disablePrimaryButton?: boolean\n  isOpen: boolean\n  onClose: () => void\n  onPrimaryAction?: () => void\n  onSecondaryAction?: () => void\n  primaryColor?: 'primary' | 'inherit' | 'secondary' | 'success' | 'error' | 'info' | 'warning'\n  primaryText?: string\n  secondaryColor?: 'primary' | 'inherit' | 'secondary' | 'success' | 'error' | 'info' | 'warning'\n  secondaryText?: string\n}\n\nconst Dialog: React.FC<React.PropsWithChildren<DialogProps>> = ({\n  className,\n  copy,\n  disablePrimaryButton = false,\n  isOpen = false,\n  onClose,\n  onPrimaryAction,\n  primaryColor = 'primary',\n  primaryText = 'Confirm',\n  onSecondaryAction,\n  secondaryColor = 'primary',\n  secondaryText = 'Cancel',\n  children,\n  ...rest\n}) => {\n  // Extract sx from rest to merge with Dialog's own styles instead of overwriting\n  const { sx: restSx, ...restProps } = rest\n  const title = copy?.title ?? ''\n  const closeAria = copy?.close_aria ?? 'Close'\n\n  const { isSmallMobile } = useScreenSize()\n\n  const handlePrimaryAction = () => {\n    onPrimaryAction?.()\n    onClose()\n  }\n\n  const handleSecondaryAction = () => {\n    if (onSecondaryAction) {\n      onSecondaryAction()\n    }\n    onClose()\n  }\n\n  return (\n    <div className={`mx-cmn-dialog ${className}`}>\n      <MuiDialog\n        aria-label={title}\n        aria-labelledby={undefined}\n        maxWidth=\"xs\"\n        onClose={onClose}\n        open={isOpen}\n        slotProps={{\n          paper: { 'aria-label': title },\n        }}\n        sx={\n          [\n            {\n              '& .MuiDialog-paperScrollPaper': { backgroundColor: 'background.default' },\n              ...(isSmallMobile && { '& .MuiDialog-paper': { minWidth: '100%' } }),\n              height: '100%',\n            },\n            ...(restSx ? [restSx] : []),\n          ] as SxProps\n        }\n        {...restProps}\n      >\n        <DialogHeader copy={{ title, close_aria: closeAria }} onClose={onClose} truncate={true} />\n\n        <DialogContent sx={{ lineHeight: 1.5 }}>{children}</DialogContent>\n\n        <DialogFooter\n          isPrimaryDisabled={disablePrimaryButton}\n          onPrimaryAction={handlePrimaryAction}\n          onSecondaryAction={handleSecondaryAction}\n          primaryColor={primaryColor}\n          primaryText={primaryText}\n          secondaryColor={secondaryColor}\n          secondaryText={secondaryText}\n        />\n      </MuiDialog>\n    </div>\n  )\n}\n\nexport default Dialog\n"],"mappings":";;;;;;AA6BA,IAAM,IAAA,CAA0D,EAC9D,WAAA,GACA,MAAA,GACA,sBAAA,IAAuB,IACvB,QAAA,IAAS,IACT,SAAA,GACA,iBAAA,GACA,cAAA,IAAe,WACf,aAAA,IAAc,WACd,mBAAA,GACA,gBAAA,IAAiB,WACjB,eAAA,IAAgB,UAChB,UAAA,GACA,GAAG,EAAA,MACC;AAEJ,QAAM,EAAE,IAAI,GAAQ,GAAG,EAAA,IAAc,GAC/B,IAAQ,GAAM,SAAS,IACvB,IAAY,GAAM,cAAc,SAEhC,EAAE,eAAA,EAAA,IAAkB,EAAc,GAElC,IAAA,MAA4B;AAChC,IAAA,IAAkB,GAClB,EAAQ;AAAA,EACV,GAEM,IAAA,MAA8B;AAClC,IAAI,KACF,EAAkB,GAEpB,EAAQ;AAAA,EACV;AAEA,SACE,gBAAA,EAAC,OAAD;AAAA,IAAK,WAAW,iBAAiB,CAAA;AAAA,IAC/B,UAAA,gBAAA,EAAC,GAAD;AAAA,MACE,cAAY;AAAA,MACZ,mBAAiB;AAAA,MACjB,UAAS;AAAA,MACA,SAAA;AAAA,MACT,MAAM;AAAA,MACN,WAAW,EACT,OAAO,EAAE,cAAc,EAAM,EAC/B;AAAA,MACA,IACE,CACE;AAAA,QACE,iCAAiC,EAAE,iBAAiB,qBAAqB;AAAA,QACzE,GAAI,KAAiB,EAAE,sBAAsB,EAAE,UAAU,OAAO,EAAE;AAAA,QAClE,QAAQ;AAAA,MACV,GACA,GAAI,IAAS,CAAC,CAAM,IAAI,CAAC,CAC3B;AAAA,MAEF,GAAI;AAAA,MAnBN,UAAA;AAAA,QAqBE,gBAAA,EAAC,GAAD;AAAA,UAAc,MAAM;AAAA,YAAE,OAAA;AAAA,YAAO,YAAY;AAAA,UAAU;AAAA,UAAY,SAAA;AAAA,UAAS,UAAU;AAAA,QAAO,CAAA;AAAA,QAEzF,gBAAA,EAAC,GAAD;AAAA,UAAe,IAAI,EAAE,YAAY,IAAI;AAAA,UAAI,UAAA;AAAA,QAAwB,CAAA;AAAA,QAEjE,gBAAA,EAAC,GAAD;AAAA,UACE,mBAAmB;AAAA,UACnB,iBAAiB;AAAA,UACjB,mBAAmB;AAAA,UACL,cAAA;AAAA,UACD,aAAA;AAAA,UACG,gBAAA;AAAA,UACD,eAAA;AAAA,QAChB,CAAA;AAAA,MACQ;AAAA;EACR,CAAA;AAET"}

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

@@ -1,3 +1,7 @@
+/** Numeric-keyed string map (e.g. {"0": "…", "1": "…"}); use Object.values() to list. */
+interface DynamicKeyValue {
+    [key: string]: string;
+}
 interface GeneralInsightsFeedCopy {
     decreased_text: string;
     embedded_description: string;
@@ -55,6 +59,19 @@ export interface OverflowMenuCopy {
     not_helpful: string;
     hide: string;
 }
+export interface DismissInsightOptionCopy {
+    headline: string;
+    description: string;
+}
+export interface DismissInsightCopy {
+    title: string;
+    description: string;
+    once: DismissInsightOptionCopy;
+    always: DismissInsightOptionCopy;
+    cancel: string;
+    confirm: string;
+    close_aria: string;
+}
 export interface TransactionHistoryBlock {
     category_spend_drawer_title: string;
     monthly_spend_comparison_drawer_title: string;
@@ -67,11 +84,53 @@ export interface TransactionHistoryBlock {
     non_essential_category_summary_drawer_title: string;
     monthly_deposit_summary_drawer_title: string;
 }
+export interface HiddenConfirmationCopy {
+    title: string;
+    description: string;
+    undo: string;
+    leave_feedback: string;
+    close_aria: string;
+}
+export interface HideFeedbackCopy {
+    title: string;
+    options: DynamicKeyValue;
+    character_limit: string;
+    back: string;
+    submit: string;
+    close_aria: string;
+}
+export interface FeedbackBarCopy {
+    /** Confirmation shown after feedback is submitted. */
+    feedback_sent: string;
+    /** Label + accessible name for the follow-up survey action. */
+    tell_us_more: string;
+}
+export interface FeedbackCopy {
+    /** Title used by the follow-up survey (helpful / not-helpful flow). */
+    tell_us_more_title: string;
+    /** Reasons shown when the insight was rated helpful. */
+    helpful_options: DynamicKeyValue;
+    /** Reasons shown when the insight was rated not helpful. */
+    not_helpful_options: DynamicKeyValue;
+    /** Helper text under the detail field (e.g. "250 Character Limit"). */
+    character_limit: string;
+    /** Secondary (Back) button label. */
+    back: string;
+    /** Primary (Submit) button label. */
+    submit: string;
+    /** ARIA label for the close button. */
+    close_aria: string;
+}
 export interface InsightsFeedCopy {
     general: GeneralInsightsFeedCopy;
     settings_menu: SettingsMenuCopy;
     make_transfer: MakeTransferCopy;
     overflow_menu: OverflowMenuCopy;
     transaction_history_block: TransactionHistoryBlock;
+    hidden_confirmation: HiddenConfirmationCopy;
+    hide_feedback: HideFeedbackCopy;
+    feedback: FeedbackCopy;
+    feedback_bar: FeedbackBarCopy;
+    dismiss: DismissInsightCopy;
 }
 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, OverflowMenuCopy } from './InsightsFeedCopy';
+export type { InsightsFeedCopy, MakeTransferCopy, OverflowMenuCopy, DismissInsightCopy, DismissInsightOptionCopy, HiddenConfirmationCopy, HideFeedbackCopy, FeedbackCopy, FeedbackBarCopy, } from './InsightsFeedCopy';
 export type { InvestmentsCopy } from './InvestmentsCopy';
 export type { MicroInsightsCopy } from './MicroInsightsCopy';
 export type { NetWorthCopy } from './NetWorthCopy';

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

@@ -1,6 +1,9 @@
 import { ReactNode } from 'react';
+import { DismissType } from './components/DismissInsightDialog';
 /** Overflow-menu action keys emitted to the host. */
 export type InsightMenuAction = 'helpful' | 'not_helpful' | 'hide';
+/** How the user rated the insight (drives the feedback survey's options). */
+export type InsightRating = 'helpful' | 'not_helpful';
 export interface MenuActionHandlers {
     /** Invoked with the chosen overflow-menu action key. */
     onAction: (action: InsightMenuAction) => void;
@@ -12,6 +15,20 @@ export interface MenuActionHandlers {
 export interface UpdateParams {
     beatGuid: string;
 }
+export interface FeedbackParams {
+    beatGuid: string;
+    /** What prompted the survey — a rating (helpful/not-helpful) or a hide. */
+    source: InsightRating | 'hide';
+    /** The chosen reason option. */
+    option: string;
+    /** Free-text detail, present only when "Other" was chosen. */
+    detail?: string;
+}
+export interface DismissParams {
+    beatGuid: string;
+    /** Whether the user chose to hide once or always. */
+    type: DismissType;
+}
 /**
  * Host callbacks for a beat card, grouped under one prop and delivered via
  * context so any descendant (header menu, blocks, variants) can reach the
@@ -21,6 +38,14 @@ export interface UpdateParams {
 export interface BeatActions {
     onMenuAction?: MenuActionHandlers;
     onUpdate?: (params: UpdateParams) => void;
+    /** Receives the completed feedback survey (helpful / not-helpful / hide). */
+    onSubmitFeedback?: (params: FeedbackParams) => void;
+    /** Performs the actual hide once the user confirms in the dismiss dialog. */
+    onDismissInsight?: (params: DismissParams) => void;
+    /** Reverses a hide when the user taps "Undo" on the confirmation card. */
+    onUndoDismiss?: (params: {
+        beatGuid: string;
+    }) => void;
 }
 export declare const BeatActionsProvider: ({ value, children, }: {
     value: BeatActions;

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\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"}
+{"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'\n\n/** Overflow-menu action keys emitted to the host. */\nexport type InsightMenuAction = 'helpful' | 'not_helpful' | 'hide'\n\n/** How the user rated the insight (drives the feedback survey's options). */\nexport type InsightRating = 'helpful' | 'not_helpful'\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\nexport interface FeedbackParams {\n  beatGuid: string\n  /** What prompted the survey — a rating (helpful/not-helpful) or a hide. */\n  source: InsightRating | 'hide'\n  /** The chosen reason option. */\n  option: string\n  /** Free-text detail, present only when \"Other\" was chosen. */\n  detail?: string\n}\n\nexport interface DismissParams {\n  beatGuid: string\n  /** Whether the user chose to hide once or always. */\n  type: DismissType\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  /** Receives the completed feedback survey (helpful / not-helpful / hide). */\n  onSubmitFeedback?: (params: FeedbackParams) => void\n  /** Performs the actual hide once the user confirms in the dismiss dialog. */\n  onDismissInsight?: (params: DismissParams) => void\n  /** Reverses a hide when the user taps \"Undo\" on the confirmation card. */\n  onUndoDismiss?: (params: { beatGuid: string }) => 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":";;AAyDA,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

@@ -6,5 +6,7 @@ interface BaseLayoutProps {
      *  via context, so blocks/variants can reach them without prop drilling. */
     beatActions?: BeatActions;
 }
-declare const BaseLayout: ({ beat, beatActions }: BaseLayoutProps) => import("react/jsx-runtime").JSX.Element | null;
+declare const BaseLayout: (({ beat, beatActions }: BaseLayoutProps) => import("react/jsx-runtime").JSX.Element | null) & {
+    displayName: string;
+};
 export default BaseLayout;

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

@@ -1,34 +1,44 @@
-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 { useInsightsV2Store as v } from "../../common/context/hooks.es.js";
+import { blocks as b } from "../mappings/blocks.es.js";
+import g from "./Footer.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 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, {
+import C from "./Header.es.js";
+import { FeedbackBar as _ } from "./FeedbackBar.es.js";
+import S from "./FeedbackDialog.es.js";
+import { DismissInsightDialog as x } from "./DismissInsightDialog.es.js";
+import { HiddenConfirmationCard as L } from "./HiddenConfirmationCard.es.js";
+import { ActionBlockLayer as D } from "../actionBlocks/ActionBlockLayer.es.js";
+import { useBeatFeedbackFlow as B } from "../hooks/useBeatFeedbackFlow.es.js";
+import { observer as w } from "mobx-react-lite";
+import a from "@mui/material/Stack";
+import l from "@mui/material/Button";
+import { ChevronRight as T } from "@mxenabled/mx-icons";
+import { jsx as i, jsxs as t } from "react/jsx-runtime";
+import A from "@mui/material/Card";
+var F = {}, W = w(({ beat: r, beatActions: p = F }) => {
+  const { openCtaDrawer: c } = v(), o = B(r, p), e = r.insights_payload;
+  if (!e || o.cardState === "dismissed") return null;
+  const { instance_slot: u, primary_cta: s, secondary_cta: n, subtitle: f, widget_type: y } = e, { block: h } = u, m = b[h], d = y === "mini";
+  return /* @__PURE__ */ i(k, {
+    value: o.wrappedActions,
+    children: /* @__PURE__ */ t(a, {
       sx: { mb: 16 },
       children: [
-        /* @__PURE__ */ t(B, { children: [
-          /* @__PURE__ */ o(x, {
+        o.cardState === "confirming" ? /* @__PURE__ */ i(L, {
+          onClose: o.collapseConfirmation,
+          onLeaveFeedback: o.openHideSurvey,
+          onUndo: o.undoDismiss
+        }) : /* @__PURE__ */ t(A, { children: [
+          /* @__PURE__ */ i(C, {
             isMini: d,
-            subtitle: h,
+            subtitle: f,
             title: r.title
           }),
-          s && /* @__PURE__ */ o(s, {
+          m && /* @__PURE__ */ i(m, {
             beatGuid: r.guid,
-            payload: i
+            payload: e
           }),
-          /* @__PURE__ */ t(l, {
+          /* @__PURE__ */ t(a, {
             sx: {
               gap: 6,
               pb: 16,
@@ -36,11 +46,11 @@ var b = {}, D = ({ beat: r, beatActions: p = b }) => {
               pr: 16,
               pt: 12
             },
-            children: [/* @__PURE__ */ o("div", {
+            children: [/* @__PURE__ */ i("div", {
               dangerouslySetInnerHTML: { __html: r.html_description },
               style: { paddingLeft: 4 }
-            }), r?.in_description_cta && /* @__PURE__ */ o(c, {
-              endIcon: /* @__PURE__ */ o(v, {}),
+            }), r?.in_description_cta && /* @__PURE__ */ i(l, {
+              endIcon: /* @__PURE__ */ i(T, {}),
               onClick: () => {
               },
               sx: {
@@ -51,31 +61,51 @@ var b = {}, D = ({ beat: r, beatActions: p = b }) => {
               children: r.in_description_cta
             })]
           }),
-          !d && n?.label && /* @__PURE__ */ t(l, {
+          !d && s?.label && /* @__PURE__ */ t(a, {
             sx: {
               gap: 8,
               pb: 16,
               px: 16
             },
-            children: [/* @__PURE__ */ o(c, {
-              onClick: () => n.block && a(r.guid, "primaryCta"),
+            children: [/* @__PURE__ */ i(l, {
+              onClick: () => s.block && c(r.guid, "primaryCta"),
               variant: "outlined",
-              children: n.label
-            }), e?.label && /* @__PURE__ */ o(c, {
+              children: s.label
+            }), n?.label && /* @__PURE__ */ i(l, {
               color: "secondary",
-              onClick: () => e.block && a(r.guid, "secondaryCta"),
-              children: e.label
+              onClick: () => n.block && c(r.guid, "secondaryCta"),
+              children: n.label
             })]
+          }),
+          /* @__PURE__ */ i(_, {
+            onTellUsMore: o.openRatingSurvey,
+            show: o.isFeedbackBarShown
           })
         ] }),
-        /* @__PURE__ */ o(C, { beat: r }),
-        i.footer && /* @__PURE__ */ o(y, { footer: i.footer })
+        /* @__PURE__ */ i(D, { beat: r }),
+        /* @__PURE__ */ i(x, {
+          isOpen: o.isDismissOpen,
+          onClose: o.closeDismissDialog,
+          onDismiss: o.confirmDismiss
+        }),
+        o.isSurveyOpen && /* @__PURE__ */ i(S, {
+          characterLimitLabel: o.survey.characterLimitLabel,
+          closeAriaLabel: o.survey.closeAriaLabel,
+          isOpen: !0,
+          onClose: o.closeSurvey,
+          onSubmit: o.submitSurvey,
+          options: o.survey.options,
+          primaryText: o.survey.submitText,
+          secondaryText: o.survey.backText,
+          title: o.survey.title
+        }),
+        o.cardState === "visible" && e.footer && /* @__PURE__ */ i(g, { footer: e.footer })
       ]
     })
   });
-};
+});
 export {
-  D as default
+  W 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 { 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"}
+{"version":3,"file":"BaseLayout.es.js","names":[],"sources":["../../../src/insights-v2/components/BaseLayout.tsx"],"sourcesContent":["import { observer } from 'mobx-react-lite'\n\nimport 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 FeedbackBar from './FeedbackBar'\nimport FeedbackDialog from './FeedbackDialog'\nimport DismissInsightDialog from './DismissInsightDialog'\nimport HiddenConfirmationCard from './HiddenConfirmationCard'\nimport { useInsightsV2Store } from '../../common'\nimport type { Beat } from '../../core'\nimport { BeatActionsProvider, type BeatActions } from '../beatActions'\nimport { ActionBlockLayer } from '../actionBlocks/ActionBlockLayer'\nimport { useBeatFeedbackFlow } from '../hooks/useBeatFeedbackFlow'\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 = observer(({ beat, beatActions = NO_BEAT_ACTIONS }: BaseLayoutProps) => {\n  const { openCtaDrawer } = useInsightsV2Store()\n\n  // All post-action UI (feedback bar, dismiss dialog, hidden card, survey) lives\n  // in this hook so BaseLayout stays focused on layout.\n  const flow = useBeatFeedbackFlow(beat, beatActions)\n\n  const insights_payload = beat.insights_payload\n\n  if (!insights_payload) {\n    return null\n  }\n\n  // Confirmation dismissed (via close or after leaving feedback): render nothing.\n  // The beat stays hidden — the host drops it on the next feed refresh.\n  if (flow.cardState === 'dismissed') {\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={flow.wrappedActions}>\n      <Stack sx={{ mb: 16 }}>\n        {flow.cardState === 'confirming' ? (\n          // Once hidden, the card is replaced by a confirmation prompt. Undo\n          // reverses the hide; Close collapses the prompt (beat stays hidden);\n          // Leave Feedback opens the hide survey.\n          <HiddenConfirmationCard\n            onClose={flow.collapseConfirmation}\n            onLeaveFeedback={flow.openHideSurvey}\n            onUndo={flow.undoDismiss}\n          />\n        ) : (\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\n            {/* Feedback bar — shown below the action buttons once the insight is\n                rated; \"Tell us more\" opens the survey dialog. Kept mounted so the\n                Grow transition can play out when the rating clears. */}\n            <FeedbackBar onTellUsMore={flow.openRatingSurvey} show={flow.isFeedbackBarShown} />\n          </Card>\n        )}\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        {/* Hide confirmation dialog — pick once / always, then confirm. */}\n        <DismissInsightDialog\n          isOpen={flow.isDismissOpen}\n          onClose={flow.closeDismissDialog}\n          onDismiss={flow.confirmDismiss}\n        />\n\n        {/* Survey dialog — opened from the feedback bar (rating) or the hidden\n            card's \"Leave Feedback\" (hide). FeedbackDialog is generic; the flow\n            hook resolves the copy for the active variant.\n            Conditionally mounted (unlike DismissInsightDialog, which toggles\n            isOpen): its title + options are variant-driven and closing clears\n            the variant, so keeping it mounted would flip the content to the\n            default variant mid close-transition. Mounting per-open trades the\n            fade-out for correct content. */}\n        {flow.isSurveyOpen && (\n          <FeedbackDialog\n            characterLimitLabel={flow.survey.characterLimitLabel}\n            closeAriaLabel={flow.survey.closeAriaLabel}\n            isOpen={true}\n            onClose={flow.closeSurvey}\n            onSubmit={flow.submitSurvey}\n            options={flow.survey.options}\n            primaryText={flow.survey.submitText}\n            secondaryText={flow.survey.backText}\n            title={flow.survey.title}\n          />\n        )}\n\n        {/* Footer */}\n        {flow.cardState === 'visible' && insights_payload.footer && (\n          <Footer footer={insights_payload.footer} />\n        )}\n      </Stack>\n    </BeatActionsProvider>\n  )\n})\n\nexport default BaseLayout\n"],"mappings":"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"}

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

@@ -0,0 +1,18 @@
+/** How the user chose to hide the insight. */
+export type DismissType = 'once' | 'always';
+export interface DismissInsightDialogProps {
+    isOpen: boolean;
+    onClose: () => void;
+    /** Emits the chosen dismiss type on confirm; the host performs the actual hide. */
+    onDismiss: (type: DismissType) => void;
+}
+/**
+ * Confirmation dialog for hiding an insight: pick "Hide Once" vs "Always Hide",
+ * then Confirm. Presentational — it owns only the local radio selection; the host
+ * controls `isOpen` and performs the hide via `onDismiss`. Built on the shared
+ * `Dialog` shell, which closes itself after either footer action.
+ */
+export declare const DismissInsightDialog: (({ isOpen, onClose, onDismiss }: DismissInsightDialogProps) => import("react/jsx-runtime").JSX.Element | null) & {
+    displayName: string;
+};
+export default DismissInsightDialog;

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

@@ -0,0 +1,109 @@
+import { useGlobalCopyStore as m } from "../../common/context/hooks.es.js";
+import u from "../../common/components/dialog/Dialog.es.js";
+import { useEffect as b, useState as f } from "react";
+import { observer as x } from "mobx-react-lite";
+import a from "@mui/material/Stack";
+import { Text as l } from "@mxenabled/mxui";
+import { jsx as r, jsxs as s } from "react/jsx-runtime";
+import g from "@mui/material/FormControlLabel";
+import h from "@mui/material/Radio";
+import y from "@mui/material/RadioGroup";
+var R = x(({ isOpen: i, onClose: d, onDismiss: c }) => {
+  const o = m().insights_feed?.dismiss, [t, n] = f("once");
+  return b(() => {
+    i && n("once");
+  }, [i]), o ? /* @__PURE__ */ r(u, {
+    copy: {
+      title: o.title,
+      close_aria: o.close_aria
+    },
+    isOpen: i,
+    onClose: d,
+    onPrimaryAction: () => c(t),
+    primaryText: o.confirm,
+    secondaryText: o.cancel,
+    sx: {
+      "& .MuiDialogContent-root": { py: 0 },
+      "& .MuiDialog-paperScrollPaper > div:first-child": {
+        pt: 24,
+        pb: 8
+      },
+      "& .MuiDialog-paperScrollPaper > div:first-child .MuiIconButton-root": { my: -10 },
+      "& .MuiDialog-paperScrollPaper": {
+        bgcolor: "background.paper",
+        border: "1px solid",
+        borderColor: "divider",
+        boxShadow: "none"
+      },
+      "&:focus-visible": {
+        outline: "2px solid",
+        outlineColor: "primary.main"
+      },
+      "& .MuiDialog-paper:focus-visible": {
+        outline: "2px solid",
+        outlineColor: "primary.main"
+      },
+      "& .MuiButton-outlined": {
+        border: "none",
+        "&:hover": {
+          bgcolor: "transparent",
+          border: "none"
+        }
+      }
+    },
+    children: /* @__PURE__ */ s(a, {
+      sx: { gap: 24 },
+      children: [/* @__PURE__ */ r(l, {
+        variant: "subtitle1",
+        children: o.description
+      }), /* @__PURE__ */ r(y, {
+        "aria-label": o.title,
+        name: "dismiss-type",
+        onChange: (e) => n(e.target.value),
+        sx: {
+          m: 0,
+          p: 0
+        },
+        value: t,
+        children: /* @__PURE__ */ r(a, {
+          sx: { gap: 16 },
+          children: ["once", "always"].map((e) => /* @__PURE__ */ r(g, {
+            value: e,
+            control: /* @__PURE__ */ r(h, { inputProps: { "aria-label": o[e].headline } }),
+            labelPlacement: "start",
+            label: /* @__PURE__ */ s(a, {
+              sx: {
+                gap: 4,
+                flexGrow: 1
+              },
+              children: [/* @__PURE__ */ r(l, {
+                bold: !0,
+                variant: "body1",
+                children: o[e].headline
+              }), /* @__PURE__ */ r(l, {
+                variant: "subtitle2",
+                children: o[e].description
+              })]
+            }),
+            sx: {
+              alignItems: "center",
+              borderRadius: "8px",
+              justifyContent: "space-between",
+              m: 0,
+              minHeight: 72,
+              px: 16,
+              py: 0,
+              boxShadow: (p) => t === e ? `inset 0 0 0 2px ${p.palette.primary.main}` : `inset 0 0 0 1px ${p.palette.divider}`
+            }
+          }, e))
+        })
+      })]
+    })
+  }) : null;
+});
+export {
+  R as DismissInsightDialog,
+  R as default
+};
+
+//# sourceMappingURL=DismissInsightDialog.es.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"DismissInsightDialog.es.js","names":[],"sources":["../../../src/insights-v2/components/DismissInsightDialog.tsx"],"sourcesContent":["import { useEffect, useState } from 'react'\n\nimport FormControlLabel from '@mui/material/FormControlLabel'\nimport Radio from '@mui/material/Radio'\nimport RadioGroup from '@mui/material/RadioGroup'\nimport Stack from '@mui/material/Stack'\n\nimport { observer } from 'mobx-react-lite'\n\nimport { Text } from '@mxenabled/mxui'\n\nimport { Dialog, useGlobalCopyStore } from '../../common'\n\n/** How the user chose to hide the insight. */\nexport type DismissType = 'once' | 'always'\n\nexport interface DismissInsightDialogProps {\n  isOpen: boolean\n  onClose: () => void\n  /** Emits the chosen dismiss type on confirm; the host performs the actual hide. */\n  onDismiss: (type: DismissType) => void\n}\n\n/**\n * Confirmation dialog for hiding an insight: pick \"Hide Once\" vs \"Always Hide\",\n * then Confirm. Presentational — it owns only the local radio selection; the host\n * controls `isOpen` and performs the hide via `onDismiss`. Built on the shared\n * `Dialog` shell, which closes itself after either footer action.\n */\nexport const DismissInsightDialog = observer(\n  ({ isOpen, onClose, onDismiss }: DismissInsightDialogProps) => {\n    const copy = useGlobalCopyStore().insights_feed?.dismiss\n    const [selected, setSelected] = useState<DismissType>('once')\n\n    // Reset to the safer default when the dialog opens.\n    useEffect(() => {\n      if (isOpen) setSelected('once')\n    }, [isOpen])\n\n    if (!copy) return null\n\n    return (\n      <Dialog\n        copy={{ title: copy.title, close_aria: copy.close_aria }}\n        isOpen={isOpen}\n        onClose={onClose}\n        onPrimaryAction={() => onDismiss(selected)}\n        primaryText={copy.confirm}\n        secondaryText={copy.cancel}\n        // Figma design: white surface, 1px divider border, no elevation shadow, no\n        // focus outline. The bgcolor overrides the shared Dialog's default grey\n        // (background.default) for this dialog only — the shared component is untouched.\n        sx={{\n          // DialogContent: remove only vertical padding (keep horizontal)\n          '& .MuiDialogContent-root': { py: 0 },\n          // Figma header is 56px (pt 24 / title 24 / pb 8). Override DialogHeader's default py:14.\n          '& .MuiDialog-paperScrollPaper > div:first-child': { pt: 24, pb: 8 },\n          '& .MuiDialog-paperScrollPaper > div:first-child .MuiIconButton-root': { my: -10 },\n          '& .MuiDialog-paperScrollPaper': {\n            bgcolor: 'background.paper',\n            border: '1px solid',\n            borderColor: 'divider',\n            boxShadow: 'none',\n          },\n          '&:focus-visible': {\n            outline: '2px solid',\n            outlineColor: 'primary.main',\n          },\n          '& .MuiDialog-paper:focus-visible': {\n            outline: '2px solid',\n            outlineColor: 'primary.main',\n          },\n          // Figma shows Cancel as a plain text button; the shared DialogFooter\n          // defaults the secondary action to variant=\"outlined\".\n          '& .MuiButton-outlined': {\n            border: 'none',\n            '&:hover': { bgcolor: 'transparent', border: 'none' },\n          },\n        }}\n      >\n        <Stack sx={{ gap: 24 }}>\n          <Text variant=\"subtitle1\">{copy.description}</Text>\n\n          <RadioGroup\n            aria-label={copy.title}\n            name=\"dismiss-type\"\n            onChange={(e) => setSelected(e.target.value as DismissType)}\n            sx={{ m: 0, p: 0 }}\n            value={selected}\n          >\n            <Stack sx={{ gap: 16 }}>\n              {(['once', 'always'] as const).map((k) => (\n                <FormControlLabel\n                  key={k}\n                  value={k}\n                  control={<Radio inputProps={{ 'aria-label': copy[k].headline }} />}\n                  labelPlacement=\"start\"\n                  label={\n                    <Stack sx={{ gap: 4, flexGrow: 1 }}>\n                      <Text bold={true} variant=\"body1\">\n                        {copy[k].headline}\n                      </Text>\n                      <Text variant=\"subtitle2\">{copy[k].description}</Text>\n                    </Stack>\n                  }\n                  sx={{\n                    alignItems: 'center',\n                    borderRadius: '8px',\n                    justifyContent: 'space-between',\n                    m: 0,\n                    minHeight: 72,\n                    px: 16,\n                    py: 0,\n                    // inset shadow instead of border → the 1px→2px selected change adds no layout shift\n                    boxShadow: (theme) =>\n                      selected === k\n                        ? `inset 0 0 0 2px ${theme.palette.primary.main}`\n                        : `inset 0 0 0 1px ${theme.palette.divider}`,\n                  }}\n                />\n              ))}\n            </Stack>\n          </RadioGroup>\n        </Stack>\n      </Dialog>\n    )\n  },\n)\n\nexport default DismissInsightDialog\n"],"mappings":"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"}