@mx-cartographer/experiences 9.4.19-alpha.al4 → 9.4.20

package/CHANGELOG.md

@@ -1,10 +1,23 @@
-## [9.4.19] - 09-11-2026
+## [9.4.20] - 09-15-2026
 
 - **ADDED** - DataDog RUM for Pulse and MDB
 
-## [9.4.18] - 09-10-2026
+## [9.4.19] - 09-15-2026
 
-- **ADDED** - `offer_guid` and `user_guid` to messaging insight metadata (MEW2-3270)
+- **ADDED** - insights-v2 `ObsolesceBanner` component: presentational banner displaying beat obsolescence states (refresh_available, refreshing, updated, not_refreshable, hidden) with smooth Collapse animation, proper ARIA labels, and state-appropriate icons (Sync/CheckCircle/Cancel) and actions (Update/Dismiss buttons). Exported from insights-v2 with full TypeScript types (`ObsolesceBannerProps`, `ObsolesceBannerState`, `ObsolesceBannerCopy`). Component accepts state + callbacks + copy as props; host owns data logic (WEC-1766)
+- **CHANGED** - `ObsolesceBanner` reuses existing `insights_feed.general` copy keys (`dismiss`, `insight_no_longer_applicable`, `insight_updated`, `new_information_available`, `update`, `updating`) rather than introducing a dedicated copy section — matches the copy already consumed by the legacy `ObsoleteManager` and defined in mrs_content, avoiding duplicate keys and translations. `GeneralInsightsFeedCopy` extended with these keys; `BaseLayout` passes `copy.insights_feed.general` straight through (WEC-1766)
+- **CHANGED** - `BaseLayout` now accepts optional `obsolete` prop (`ObsoleteState` with `state`, `onRefresh`, `onDismiss`) and renders `ObsolesceBanner` above the Card when provided. When state is `not_refreshable` (and the beat is not dismissed) the Card gets a non-interactive semi-transparent overlay to dim its content without letting the banner show through. Follows the same optional-prop pattern as feedback UI; host supplies obsolescence state + callbacks (WEC-1766)
+- **ADDED** - Comprehensive test coverage: 20 `ObsolesceBanner` tests (all 5 states, button interactions, copy variations, state transitions, callback isolation) plus `BaseLayout` obsolete tests (banner render, dimming overlay, click blocking, callbacks) (WEC-1766)
+- **ADDED** - Storybook stories for `ObsolesceBanner`: 5 static state stories plus 1 interactive state-machine story with debug panel and automatic transitions (WEC-1766)
+
+## [9.4.18] - 09-11-2026
+
+- **CHANGED** - insights-v2 feedback UI cleanup: removed verbose comments and section dividers from `BaseLayout`, `FeedbackDialog`, `FeedbackBar`, `HiddenConfirmationCard`, `DismissInsightDialog`, `InsightOptionsMenu`, and `useBeatFeedbackFlow`; code is now self-documenting with brief one-line descriptions only where complexity warrants explanation. Minimal comment philosophy applied throughout (WEC-1766)
+- **CHANGED** - insights-v2 dismiss flow simplified: replaced controlled `dismissState` prop with direct `beat.is_dismissed` observation paired with local `hasClosedConfirmation` state in `useBeatFeedbackFlow`; `cardState` now derived via `useMemo` from these two sources. Eliminates need for parent-managed dismiss state while maintaining clean separation: Pulse owns persistence (`is_dismissed` property), experiences owns transient UI state (confirmation visibility). Survives navigation and handles API failures gracefully (WEC-1766)
+- **CHANGED** - `beatActions` interface extended with MUI-native dialog close reason vocabulary: `onFeedbackDialogClose` now receives `'closeButton' | 'backdropClick' | 'escapeKeyDown'` instead of custom translated values, eliminating unnecessary abstraction layer and improving clarity (WEC-1766)
+- **FIXED** - `BaseLayout` feedback state management: added `setFeedbackRating(null)` to `undoDismiss` handler to clear any pending rating when user undos a dismissal, preventing stale feedback UI state (WEC-1766)
+- **FIXED** - `FeedbackDialog` props made non-optional: `primaryText`, `secondaryText`, and `closeAriaLabel` are now required (previously optional), and `multiline={true}` is now explicit on the TextField. All callers (BaseLayout, stories, tests) updated to provide required props (WEC-1766)
+- **FIXED** - `DismissInsightDialog` spacing restored: `sx` overrides for content padding and header alignment re-added after being accidentally removed during refactor (WEC-1766)
 
 ## [9.4.17] - 09-04-2026
 

package/dist/common/components/dialog/Dialog.d.ts

@@ -9,7 +9,7 @@ export interface DialogProps extends Omit<MuiDialogProps, 'open'> {
     copy: CopyObject;
     disablePrimaryButton?: boolean;
     isOpen: boolean;
-    onClose: () => void;
+    onClose: (event?: unknown, reason?: string) => void;
     onPrimaryAction?: () => void;
     onSecondaryAction?: () => void;
     primaryColor?: 'primary' | 'inherit' | 'secondary' | 'success' | 'error' | 'info' | 'warning';

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'\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"}
+{"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: (event?: unknown, reason?: string) => 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

@@ -4,13 +4,19 @@ interface DynamicKeyValue {
 }
 interface GeneralInsightsFeedCopy {
     decreased_text: string;
+    dismiss: string;
     embedded_description: string;
     increased_text: string;
+    insight_no_longer_applicable: string;
+    insight_updated: string;
     monthly_amount: string;
+    new_information_available: string;
     tip_section_message: string;
     tip_section_title: string;
     transaction_history_title: string;
     trend: string;
+    update: string;
+    updating: string;
 }
 interface SettingsMenuCopy {
     close: string;

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

@@ -1,15 +1,11 @@
 import { ReactNode } from 'react';
 import { DismissType } from './components/DismissInsightDialog';
-/** Overflow-menu action keys emitted to the host. */
+import { FeedbackDialogCloseReason } from './components/FeedbackDialog';
 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;
-    /** 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 {
@@ -17,39 +13,29 @@ export interface UpdateParams {
 }
 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
- * handler it needs without prop drilling. Each concern is its own typed slot —
- * add new callbacks here as they arise.
- */
+/** Host callbacks for a beat card. */
 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;
+    onFeedbackDialogClose?: (reason: FeedbackDialogCloseReason) => void;
+    onFeedbackDialogBack?: () => void;
+    onFeedbackTextFocus?: () => 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.map

@@ -1 +1 @@
-{"version":3,"file":"beatActions.es.js","names":[],"sources":["../../src/insights-v2/beatActions.tsx"],"sourcesContent":["import { createContext, useContext, type ReactNode } from 'react'\n\nimport type { DismissType } from './components/DismissInsightDialog'\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"}
+{"version":3,"file":"beatActions.es.js","names":[],"sources":["../../src/insights-v2/beatActions.tsx"],"sourcesContent":["import { createContext, useContext, type ReactNode } from 'react'\n\nimport type { DismissType } from './components/DismissInsightDialog'\nimport type { FeedbackDialogCloseReason } from './components/FeedbackDialog'\n\nexport type InsightMenuAction = 'helpful' | 'not_helpful' | 'hide'\nexport type InsightRating = 'helpful' | 'not_helpful'\n\nexport interface MenuActionHandlers {\n  onAction: (action: InsightMenuAction) => void\n  onOpen?: () => void\n  disabled?: boolean\n}\n\nexport interface UpdateParams {\n  beatGuid: string\n}\n\nexport interface FeedbackParams {\n  beatGuid: string\n  source: InsightRating | 'hide'\n  option: string\n  detail?: string\n}\n\nexport interface DismissParams {\n  beatGuid: string\n  type: DismissType\n}\n\n/** Host callbacks for a beat card. */\nexport interface BeatActions {\n  onMenuAction?: MenuActionHandlers\n  onUpdate?: (params: UpdateParams) => void\n  onSubmitFeedback?: (params: FeedbackParams) => void\n  onDismissInsight?: (params: DismissParams) => void\n  onUndoDismiss?: (params: { beatGuid: string }) => void\n  onFeedbackDialogClose?: (reason: FeedbackDialogCloseReason) => void\n  onFeedbackDialogBack?: () => void\n  onFeedbackTextFocus?: () => void\n}\n\nconst BeatActionsContext = createContext<BeatActions>({})\n\nexport const BeatActionsProvider = ({\n  value,\n  children,\n}: {\n  value: BeatActions\n  children: ReactNode\n}) => <BeatActionsContext.Provider value={value}>{children}</BeatActionsContext.Provider>\n\nexport const useBeatActions = () => useContext(BeatActionsContext)\n"],"mappings":";;AA0CA,IAAM,IAAqB,EAA2B,CAAC,CAAC,GAE3C,IAAA,CAAuB,EAClC,OAAA,GACA,UAAA,EAAA,MAII,gBAAA,EAAC,EAAmB,UAApB;AAAA,EAAoC,OAAA;AAAA,EAAQ,UAAA;AAAsC,CAAA,GAE3E,IAAA,MAAuB,EAAW,CAAkB"}

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

@@ -1,12 +1,17 @@
+import { ObsolesceBannerState } from './ObsolesceBanner';
 import { Beat } from '../../core';
 import { BeatActions } from '../beatActions';
+export interface ObsoleteState {
+    state: ObsolesceBannerState;
+    onRefresh: () => void;
+    onDismiss: () => void;
+}
 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;
+    obsolete?: ObsoleteState;
 }
-declare const BaseLayout: (({ beat, beatActions }: BaseLayoutProps) => import("react/jsx-runtime").JSX.Element | null) & {
+declare const BaseLayout: (({ beat, beatActions, obsolete }: BaseLayoutProps) => import("react/jsx-runtime").JSX.Element | null) & {
     displayName: string;
 };
 export default BaseLayout;

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

@@ -1,111 +1,136 @@
-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 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, {
+import { useGlobalCopyStore as C, useInsightsV2Store as x } from "../../common/context/hooks.es.js";
+import { blocks as _ } from "../mappings/blocks.es.js";
+import S from "./Footer.es.js";
+import { BeatActionsProvider as B } from "../beatActions.es.js";
+import D from "./Header.es.js";
+import { FeedbackBar as L } from "./FeedbackBar.es.js";
+import O from "./FeedbackDialog.es.js";
+import { DismissInsightDialog as T } from "./DismissInsightDialog.es.js";
+import { HiddenConfirmationCard as F } from "./HiddenConfirmationCard.es.js";
+import { ObsolesceBanner as w } from "./ObsolesceBanner.es.js";
+import { ActionBlockLayer as I } from "../actionBlocks/ActionBlockLayer.es.js";
+import { useBeatFeedbackFlow as A } from "../hooks/useBeatFeedbackFlow.es.js";
+import { observer as E } from "mobx-react-lite";
+import m from "@mui/material/Stack";
+import d from "@mui/material/Button";
+import { ChevronRight as H } from "@mxenabled/mx-icons";
+import { Fragment as M, jsx as e, jsxs as t } from "react/jsx-runtime";
+import R from "@mui/material/Box";
+import j from "@mui/material/Card";
+var z = {}, G = {
+  position: "absolute",
+  top: 0,
+  left: 0,
+  width: "100%",
+  height: "100%",
+  backgroundColor: "background.default",
+  opacity: 0.7,
+  zIndex: 1
+}, no = E(({ beat: i, beatActions: y = z, obsolete: s }) => {
+  const { openCtaDrawer: p } = x(), h = C(), o = A(i, y), r = i.insights_payload;
+  if (!r || o.cardState === "dismissed") return null;
+  const { instance_slot: b, primary_cta: n, secondary_cta: a, subtitle: g, widget_type: k } = r, { block: v } = b, u = _[v], f = k === "mini", l = h.insights_feed?.general, c = s?.state === "not_refreshable" && !i.dismissed_at && !!l;
+  return /* @__PURE__ */ e(B, {
     value: o.wrappedActions,
-    children: /* @__PURE__ */ t(a, {
+    children: /* @__PURE__ */ t(m, {
       sx: { mb: 16 },
       children: [
-        o.cardState === "confirming" ? /* @__PURE__ */ i(L, {
+        o.cardState === "confirming" ? /* @__PURE__ */ e(F, {
           onClose: o.collapseConfirmation,
           onLeaveFeedback: o.openHideSurvey,
           onUndo: o.undoDismiss
-        }) : /* @__PURE__ */ t(A, { children: [
-          /* @__PURE__ */ i(C, {
-            isMini: d,
-            subtitle: f,
-            title: r.title
-          }),
-          m && /* @__PURE__ */ i(m, {
-            beatGuid: r.guid,
-            payload: e
-          }),
-          /* @__PURE__ */ t(a, {
-            sx: {
-              gap: 6,
-              pb: 16,
-              pl: 12,
-              pr: 16,
-              pt: 12
-            },
-            children: [/* @__PURE__ */ i("div", {
-              dangerouslySetInnerHTML: { __html: r.html_description },
-              style: { paddingLeft: 4 }
-            }), r?.in_description_cta && /* @__PURE__ */ i(l, {
-              endIcon: /* @__PURE__ */ i(T, {}),
-              onClick: () => {
+        }) : /* @__PURE__ */ t(M, { children: [s && l && /* @__PURE__ */ e(w, {
+          ...s,
+          copy: l
+        }), /* @__PURE__ */ t(j, {
+          inert: c,
+          sx: { ...c && {
+            position: "relative",
+            zIndex: 2,
+            pointerEvents: "none"
+          } },
+          children: [
+            c && /* @__PURE__ */ e(R, { sx: G }),
+            /* @__PURE__ */ e(D, {
+              isMini: f,
+              subtitle: g,
+              title: i.title
+            }),
+            u && /* @__PURE__ */ e(u, {
+              beatGuid: i.guid,
+              payload: r
+            }),
+            /* @__PURE__ */ t(m, {
+              sx: {
+                gap: 6,
+                pb: 16,
+                pl: 12,
+                pr: 16,
+                pt: 12
               },
+              children: [/* @__PURE__ */ e("div", {
+                dangerouslySetInnerHTML: { __html: i.html_description },
+                style: { paddingLeft: 4 }
+              }), i?.in_description_cta && /* @__PURE__ */ e(d, {
+                endIcon: /* @__PURE__ */ e(H, {}),
+                onClick: () => {
+                },
+                sx: {
+                  height: 24,
+                  p: 4,
+                  width: "max-content"
+                },
+                children: i.in_description_cta
+              })]
+            }),
+            !f && n?.label && /* @__PURE__ */ t(m, {
               sx: {
-                height: 24,
-                p: 4,
-                width: "max-content"
+                gap: 8,
+                pb: 16,
+                px: 16
               },
-              children: r.in_description_cta
-            })]
-          }),
-          !d && s?.label && /* @__PURE__ */ t(a, {
-            sx: {
-              gap: 8,
-              pb: 16,
-              px: 16
-            },
-            children: [/* @__PURE__ */ i(l, {
-              onClick: () => s.block && c(r.guid, "primaryCta"),
-              variant: "outlined",
-              children: s.label
-            }), n?.label && /* @__PURE__ */ i(l, {
-              color: "secondary",
-              onClick: () => n.block && c(r.guid, "secondaryCta"),
-              children: n.label
-            })]
-          }),
-          /* @__PURE__ */ i(_, {
-            onTellUsMore: o.openRatingSurvey,
-            show: o.isFeedbackBarShown
-          })
-        ] }),
-        /* @__PURE__ */ i(D, { beat: r }),
-        /* @__PURE__ */ i(x, {
+              children: [/* @__PURE__ */ e(d, {
+                onClick: () => n.block && p(i.guid, "primaryCta"),
+                variant: "outlined",
+                children: n.label
+              }), a?.label && /* @__PURE__ */ e(d, {
+                color: "secondary",
+                onClick: () => a.block && p(i.guid, "secondaryCta"),
+                children: a.label
+              })]
+            }),
+            /* @__PURE__ */ e(L, {
+              onTellUsMore: o.openRatingSurvey,
+              show: o.isFeedbackBarShown
+            })
+          ]
+        })] }),
+        /* @__PURE__ */ e(I, { beat: i }),
+        /* @__PURE__ */ e(T, {
           isOpen: o.isDismissOpen,
           onClose: o.closeDismissDialog,
           onDismiss: o.confirmDismiss
         }),
-        o.isSurveyOpen && /* @__PURE__ */ i(S, {
+        o.isSurveyOpen && /* @__PURE__ */ e(O, {
           characterLimitLabel: o.survey.characterLimitLabel,
           closeAriaLabel: o.survey.closeAriaLabel,
           isOpen: !0,
+          onBackClick: o.feedbackDialogCallbacks.onBackClick,
           onClose: o.closeSurvey,
           onSubmit: o.submitSurvey,
+          onTextInputFocus: o.feedbackDialogCallbacks.onTextInputFocus,
           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 })
+        o.cardState === "visible" && r.footer && /* @__PURE__ */ e(S, { footer: r.footer })
       ]
     })
   });
 });
 export {
-  W as default
+  no 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 { 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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"}
+{"version":3,"file":"BaseLayout.es.js","names":[],"sources":["../../../src/insights-v2/components/BaseLayout.tsx"],"sourcesContent":["import { observer } from 'mobx-react-lite'\n\nimport Box from '@mui/material/Box'\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 { ObsolesceBanner, type ObsolesceBannerState } from './ObsolesceBanner'\nimport { useGlobalCopyStore, 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\nexport interface ObsoleteState {\n  state: ObsolesceBannerState\n  onRefresh: () => void\n  onDismiss: () => void\n}\n\ninterface BaseLayoutProps {\n  beat: Beat\n  beatActions?: BeatActions\n  obsolete?: ObsoleteState\n}\n\nconst NO_BEAT_ACTIONS: BeatActions = {}\n\nconst OBSOLETE_OVERLAY_SX = {\n  position: 'absolute',\n  top: 0,\n  left: 0,\n  width: '100%',\n  height: '100%',\n  backgroundColor: 'background.default',\n  opacity: 0.7,\n  zIndex: 1,\n} as const\n\nconst BaseLayout = observer(\n  ({ beat, beatActions = NO_BEAT_ACTIONS, obsolete }: BaseLayoutProps) => {\n    const { openCtaDrawer } = useInsightsV2Store()\n    const copy = useGlobalCopyStore()\n    const flow = useBeatFeedbackFlow(beat, beatActions)\n\n    const insights_payload = beat.insights_payload\n\n    if (!insights_payload) return null\n    if (flow.cardState === 'dismissed') return null\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    const obsoleteCopy = copy.insights_feed?.general\n    const isObsoleteDimmed =\n      obsolete?.state === 'not_refreshable' && !beat.dismissed_at && !!obsoleteCopy\n\n    return (\n      <BeatActionsProvider value={flow.wrappedActions}>\n        <Stack sx={{ mb: 16 }}>\n          {flow.cardState === 'confirming' ? (\n            <HiddenConfirmationCard\n              onClose={flow.collapseConfirmation}\n              onLeaveFeedback={flow.openHideSurvey}\n              onUndo={flow.undoDismiss}\n            />\n          ) : (\n            <>\n              {obsolete && obsoleteCopy && <ObsolesceBanner {...obsolete} copy={obsoleteCopy} />}\n              <Card\n                inert={isObsoleteDimmed}\n                sx={{\n                  ...(isObsoleteDimmed && {\n                    position: 'relative',\n                    zIndex: 2,\n                    pointerEvents: 'none',\n                  }),\n                }}\n              >\n                {isObsoleteDimmed && <Box sx={OBSOLETE_OVERLAY_SX} />}\n                <Header isMini={isMini} subtitle={subtitle} title={beat.title} />\n                {Block && <Block beatGuid={beat.guid} payload={insights_payload} />}\n\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                {!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={() =>\n                          secondary_cta.block && openCtaDrawer(beat.guid, 'secondaryCta')\n                        }\n                      >\n                        {secondary_cta.label}\n                      </Button>\n                    )}\n                  </Stack>\n                )}\n\n                <FeedbackBar onTellUsMore={flow.openRatingSurvey} show={flow.isFeedbackBarShown} />\n              </Card>\n            </>\n          )}\n\n          <ActionBlockLayer beat={beat} />\n\n          <DismissInsightDialog\n            isOpen={flow.isDismissOpen}\n            onClose={flow.closeDismissDialog}\n            onDismiss={flow.confirmDismiss}\n          />\n\n          {flow.isSurveyOpen && (\n            <FeedbackDialog\n              characterLimitLabel={flow.survey.characterLimitLabel}\n              closeAriaLabel={flow.survey.closeAriaLabel}\n              isOpen={true}\n              onBackClick={flow.feedbackDialogCallbacks.onBackClick}\n              onClose={flow.closeSurvey}\n              onSubmit={flow.submitSurvey}\n              onTextInputFocus={flow.feedbackDialogCallbacks.onTextInputFocus}\n              options={flow.survey.options}\n              primaryText={flow.survey.submitText}\n              secondaryText={flow.survey.backText}\n              title={flow.survey.title}\n            />\n          )}\n\n          {flow.cardState === 'visible' && insights_payload.footer && (\n            <Footer footer={insights_payload.footer} />\n          )}\n        </Stack>\n      </BeatActionsProvider>\n    )\n  },\n)\n\nexport default BaseLayout\n"],"mappings":";;;;;;;;;;;;;;;;;;;AAoCA,IAAM,IAA+B,CAAC,GAEhC,IAAsB;AAAA,EAC1B,UAAU;AAAA,EACV,KAAK;AAAA,EACL,MAAM;AAAA,EACN,OAAO;AAAA,EACP,QAAQ;AAAA,EACR,iBAAiB;AAAA,EACjB,SAAS;AAAA,EACT,QAAQ;AACV,GAEM,KAAa,EAAA,CAChB,EAAE,MAAA,GAAM,aAAA,IAAc,GAAiB,UAAA,EAAA,MAAgC;AACtE,QAAM,EAAE,eAAA,EAAA,IAAkB,EAAmB,GACvC,IAAO,EAAmB,GAC1B,IAAO,EAAoB,GAAM,CAAW,GAE5C,IAAmB,EAAK;AAG9B,MADI,CAAC,KACD,EAAK,cAAc,YAAa,QAAO;AAE3C,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,QACzB,IAAe,EAAK,eAAe,SACnC,IACJ,GAAU,UAAU,qBAAqB,CAAC,EAAK,gBAAgB,CAAC,CAAC;AAEnE,SACE,gBAAA,EAAC,GAAD;AAAA,IAAqB,OAAO,EAAK;AAAA,IAC/B,UAAA,gBAAA,EAAC,GAAD;AAAA,MAAO,IAAI,EAAE,IAAI,GAAG;AAAA,MAApB,UAAA;AAAA,QACG,EAAK,cAAc,eAClB,gBAAA,EAAC,GAAD;AAAA,UACE,SAAS,EAAK;AAAA,UACd,iBAAiB,EAAK;AAAA,UACtB,QAAQ,EAAK;AAAA,QACd,CAAA,IAED,gBAAA,EAAA,GAAA,EAAA,UAAA,CACG,KAAY,KAAgB,gBAAA,EAAC,GAAD;AAAA,UAAiB,GAAI;AAAA,UAAU,MAAM;AAAA,QAAe,CAAA,GACjF,gBAAA,EAAC,GAAD;AAAA,UACE,OAAO;AAAA,UACP,IAAI,EACF,GAAI,KAAoB;AAAA,YACtB,UAAU;AAAA,YACV,QAAQ;AAAA,YACR,eAAe;AAAA,UACjB,EACF;AAAA,UARF,UAAA;AAAA,YAUG,KAAoB,gBAAA,EAAC,GAAD,EAAK,IAAI,EAAsB,CAAA;AAAA,YACpD,gBAAA,EAAC,GAAD;AAAA,cAAgB,QAAA;AAAA,cAAkB,UAAA;AAAA,cAAU,OAAO,EAAK;AAAA,YAAQ,CAAA;AAAA,YAC/D,KAAS,gBAAA,EAAC,GAAD;AAAA,cAAO,UAAU,EAAK;AAAA,cAAM,SAAS;AAAA,YAAmB,CAAA;AAAA,YAElE,gBAAA,EAAC,GAAD;AAAA,cAAO,IAAI;AAAA,gBAAE,KAAK;AAAA,gBAAG,IAAI;AAAA,gBAAI,IAAI;AAAA,gBAAI,IAAI;AAAA,gBAAI,IAAI;AAAA,cAAG;AAAA,cAApD,UAAA,CACE,gBAAA,EAAC,OAAD;AAAA,gBACE,yBAAyB,EACvB,QAAQ,EAAK,iBACf;AAAA,gBACA,OAAO,EAAE,aAAa,EAAE;AAAA,cACzB,CAAA,GACA,GAAM,sBACL,gBAAA,EAAC,GAAD;AAAA,gBACE,SAAS,gBAAA,EAAC,GAAD,CAAe,CAAA;AAAA,gBACxB,SAAA,MAAe;AAAA,gBAAC;AAAA,gBAChB,IAAI;AAAA,kBAAE,QAAQ;AAAA,kBAAI,GAAG;AAAA,kBAAG,OAAO;AAAA,gBAAc;AAAA,gBAE5C,UAAA,EAAK;AAAA,cACA,CAAA,CAEL;AAAA;YAEN,CAAC,KAAU,GAAa,SACvB,gBAAA,EAAC,GAAD;AAAA,cAAO,IAAI;AAAA,gBAAE,KAAK;AAAA,gBAAG,IAAI;AAAA,gBAAI,IAAI;AAAA,cAAG;AAAA,cAApC,UAAA,CACE,gBAAA,EAAC,GAAD;AAAA,gBACE,SAAA,MAAe,EAAY,SAAS,EAAc,EAAK,MAAM,YAAY;AAAA,gBACzE,SAAQ;AAAA,gBAEP,UAAA,EAAY;AAAA,cACP,CAAA,GACP,GAAe,SACd,gBAAA,EAAC,GAAD;AAAA,gBACE,OAAM;AAAA,gBACN,SAAA,MACE,EAAc,SAAS,EAAc,EAAK,MAAM,cAAc;AAAA,gBAG/D,UAAA,EAAc;AAAA,cACT,CAAA,CAEL;AAAA;YAGT,gBAAA,EAAC,GAAD;AAAA,cAAa,cAAc,EAAK;AAAA,cAAkB,MAAM,EAAK;AAAA,YAAqB,CAAA;AAAA,UAC9E;AAAA,QACN,CAAA,CAAA,EAAA,CAAA;AAAA,QAGJ,gBAAA,EAAC,GAAD,EAAwB,MAAA,EAAO,CAAA;AAAA,QAE/B,gBAAA,EAAC,GAAD;AAAA,UACE,QAAQ,EAAK;AAAA,UACb,SAAS,EAAK;AAAA,UACd,WAAW,EAAK;AAAA,QACjB,CAAA;AAAA,QAEA,EAAK,gBACJ,gBAAA,EAAC,GAAD;AAAA,UACE,qBAAqB,EAAK,OAAO;AAAA,UACjC,gBAAgB,EAAK,OAAO;AAAA,UAC5B,QAAQ;AAAA,UACR,aAAa,EAAK,wBAAwB;AAAA,UAC1C,SAAS,EAAK;AAAA,UACd,UAAU,EAAK;AAAA,UACf,kBAAkB,EAAK,wBAAwB;AAAA,UAC/C,SAAS,EAAK,OAAO;AAAA,UACrB,aAAa,EAAK,OAAO;AAAA,UACzB,eAAe,EAAK,OAAO;AAAA,UAC3B,OAAO,EAAK,OAAO;AAAA,QACpB,CAAA;AAAA,QAGF,EAAK,cAAc,aAAa,EAAiB,UAChD,gBAAA,EAAC,GAAD,EAAQ,QAAQ,EAAiB,OAAS,CAAA;AAAA,MAEvC;AAAA;EACY,CAAA;AAEzB,CACF"}

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

@@ -1,17 +1,10 @@
-/** 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.
- */
+/** Confirmation dialog for hiding an insight. */
 export declare const DismissInsightDialog: (({ isOpen, onClose, onDismiss }: DismissInsightDialogProps) => import("react/jsx-runtime").JSX.Element | null) & {
     displayName: string;
 };

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

@@ -1 +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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"}
+{"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\nexport type DismissType = 'once' | 'always'\n\nexport interface DismissInsightDialogProps {\n  isOpen: boolean\n  onClose: () => void\n  onDismiss: (type: DismissType) => void\n}\n\n/** Confirmation dialog for hiding an insight. */\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    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        sx={{\n          '& .MuiDialogContent-root': { py: 0 },\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          '& .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                    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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"}

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

@@ -1,19 +1,8 @@
 export interface FeedbackBarProps {
-    /** Controls the Grow transition; the host owns visibility. */
     show: boolean;
-    /** Invoked when the user taps the follow-up survey action. */
     onTellUsMore: () => void;
 }
-/**
- * Confirmation bar shown after a user submits feedback on an insight. A success
- * Alert that grows into view with a "Tell us more?" survey action.
- *
- * Presentational — the host owns `show` and handles the follow-up via
- * `onTellUsMore`. Copy comes from `insights_feed.feedback_bar`.
- *
- * Kept mounted so the Grow transition plays on both enter and exit; the padded
- * wrapper animates with it and `unmountOnExit` reclaims the space once hidden.
- */
+/** Confirmation bar shown after rating an insight. */
 export declare const FeedbackBar: (({ show, onTellUsMore }: FeedbackBarProps) => import("react/jsx-runtime").JSX.Element | null) & {
     displayName: string;
 };

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

@@ -1 +1 @@
-{"version":3,"file":"FeedbackBar.es.js","names":[],"sources":["../../../src/insights-v2/components/FeedbackBar.tsx"],"sourcesContent":["import Alert from '@mui/material/Alert'\nimport Box from '@mui/material/Box'\nimport Button from '@mui/material/Button'\nimport Grow from '@mui/material/Grow'\n\nimport { observer } from 'mobx-react-lite'\n\nimport { CheckCircle } from '@mxenabled/mx-icons'\nimport { Text } from '@mxenabled/mxui'\n\nimport { useGlobalCopyStore } from '../../common'\n\nexport interface FeedbackBarProps {\n  /** Controls the Grow transition; the host owns visibility. */\n  show: boolean\n  /** Invoked when the user taps the follow-up survey action. */\n  onTellUsMore: () => void\n}\n\n/**\n * Confirmation bar shown after a user submits feedback on an insight. A success\n * Alert that grows into view with a \"Tell us more?\" survey action.\n *\n * Presentational — the host owns `show` and handles the follow-up via\n * `onTellUsMore`. Copy comes from `insights_feed.feedback_bar`.\n *\n * Kept mounted so the Grow transition plays on both enter and exit; the padded\n * wrapper animates with it and `unmountOnExit` reclaims the space once hidden.\n */\nexport const FeedbackBar = observer(({ show, onTellUsMore }: FeedbackBarProps) => {\n  const copy = useGlobalCopyStore().insights_feed?.feedback_bar\n\n  if (!copy) return null\n\n  return (\n    <Grow appear in={show} unmountOnExit>\n      <Box sx={{ pb: 16, px: 16 }}>\n        <Alert\n          action={\n            <Button\n              aria-label={copy.tell_us_more}\n              color=\"inherit\"\n              onClick={onTellUsMore}\n              sx={{\n                color: 'common.white',\n                fontWeight: 600,\n                lineHeight: '20px',\n                ':hover': { bgcolor: 'grey.600' },\n              }}\n            >\n              {copy.tell_us_more}\n            </Button>\n          }\n          icon={<CheckCircle filled sx={{ color: 'success.light' }} />}\n          severity=\"success\"\n          sx={{\n            alignItems: 'center',\n            bgcolor: 'grey.700',\n            border: 'none',\n            display: 'flex',\n            height: 56,\n            justifyContent: 'space-between',\n            '& .MuiAlert-action': { height: 44 },\n          }}\n        >\n          <Text aria-live=\"assertive\" color=\"white\" sx={{ lineHeight: '20px' }} truncate={false}>\n            {copy.feedback_sent}\n          </Text>\n        </Alert>\n      </Box>\n    </Grow>\n  )\n})\n\nexport default FeedbackBar\n"],"mappings":";;;;;;;;;AA6BA,IAAa,IAAc,EAAA,CAAU,EAAE,MAAA,GAAM,cAAA,EAAA,MAAqC;AAChF,QAAM,IAAO,EAAmB,EAAE,eAAe;AAEjD,SAAK,IAGH,gBAAA,EAAC,GAAD;AAAA,IAAM,QAAA;AAAA,IAAO,IAAI;AAAA,IAAM,eAAA;AAAA,IACrB,UAAA,gBAAA,EAAC,GAAD;AAAA,MAAK,IAAI;AAAA,QAAE,IAAI;AAAA,QAAI,IAAI;AAAA,MAAG;AAAA,MACxB,UAAA,gBAAA,EAAC,GAAD;AAAA,QACE,QACE,gBAAA,EAAC,GAAD;AAAA,UACE,cAAY,EAAK;AAAA,UACjB,OAAM;AAAA,UACN,SAAS;AAAA,UACT,IAAI;AAAA,YACF,OAAO;AAAA,YACP,YAAY;AAAA,YACZ,YAAY;AAAA,YACZ,UAAU,EAAE,SAAS,WAAW;AAAA,UAClC;AAAA,UAEC,UAAA,EAAK;AAAA,QACA,CAAA;AAAA,QAEV,MAAM,gBAAA,EAAC,GAAD;AAAA,UAAa,QAAA;AAAA,UAAO,IAAI,EAAE,OAAO,gBAAgB;AAAA,QAAI,CAAA;AAAA,QAC3D,UAAS;AAAA,QACT,IAAI;AAAA,UACF,YAAY;AAAA,UACZ,SAAS;AAAA,UACT,QAAQ;AAAA,UACR,SAAS;AAAA,UACT,QAAQ;AAAA,UACR,gBAAgB;AAAA,UAChB,sBAAsB,EAAE,QAAQ,GAAG;AAAA,QACrC;AAAA,QAEA,UAAA,gBAAA,EAAC,GAAD;AAAA,UAAM,aAAU;AAAA,UAAY,OAAM;AAAA,UAAQ,IAAI,EAAE,YAAY,OAAO;AAAA,UAAG,UAAU;AAAA,UAC7E,UAAA,EAAK;AAAA,QACF,CAAA;AAAA,MACD,CAAA;AAAA,IACJ,CAAA;AAAA,EACD,CAAA,IAtCU;AAwCpB,CAAC"}
+{"version":3,"file":"FeedbackBar.es.js","names":[],"sources":["../../../src/insights-v2/components/FeedbackBar.tsx"],"sourcesContent":["import Alert from '@mui/material/Alert'\nimport Box from '@mui/material/Box'\nimport Button from '@mui/material/Button'\nimport Grow from '@mui/material/Grow'\n\nimport { observer } from 'mobx-react-lite'\n\nimport { CheckCircle } from '@mxenabled/mx-icons'\nimport { Text } from '@mxenabled/mxui'\n\nimport { useGlobalCopyStore } from '../../common'\n\nexport interface FeedbackBarProps {\n  show: boolean\n  onTellUsMore: () => void\n}\n\n/** Confirmation bar shown after rating an insight. */\nexport const FeedbackBar = observer(({ show, onTellUsMore }: FeedbackBarProps) => {\n  const copy = useGlobalCopyStore().insights_feed?.feedback_bar\n\n  if (!copy) return null\n\n  return (\n    <Grow appear in={show} unmountOnExit>\n      <Box sx={{ pb: 16, px: 16 }}>\n        <Alert\n          action={\n            <Button\n              aria-label={copy.tell_us_more}\n              color=\"inherit\"\n              onClick={onTellUsMore}\n              sx={{\n                color: 'common.white',\n                fontWeight: 600,\n                lineHeight: '20px',\n                ':hover': { bgcolor: 'grey.600' },\n              }}\n            >\n              {copy.tell_us_more}\n            </Button>\n          }\n          icon={<CheckCircle filled sx={{ color: 'success.light' }} />}\n          severity=\"success\"\n          sx={{\n            alignItems: 'center',\n            bgcolor: 'grey.700',\n            border: 'none',\n            display: 'flex',\n            height: 56,\n            justifyContent: 'space-between',\n            '& .MuiAlert-action': { height: 44 },\n          }}\n        >\n          <Text aria-live=\"assertive\" color=\"white\" sx={{ lineHeight: '20px' }} truncate={false}>\n            {copy.feedback_sent}\n          </Text>\n        </Alert>\n      </Box>\n    </Grow>\n  )\n})\n\nexport default FeedbackBar\n"],"mappings":";;;;;;;;;AAkBA,IAAa,IAAc,EAAA,CAAU,EAAE,MAAA,GAAM,cAAA,EAAA,MAAqC;AAChF,QAAM,IAAO,EAAmB,EAAE,eAAe;AAEjD,SAAK,IAGH,gBAAA,EAAC,GAAD;AAAA,IAAM,QAAA;AAAA,IAAO,IAAI;AAAA,IAAM,eAAA;AAAA,IACrB,UAAA,gBAAA,EAAC,GAAD;AAAA,MAAK,IAAI;AAAA,QAAE,IAAI;AAAA,QAAI,IAAI;AAAA,MAAG;AAAA,MACxB,UAAA,gBAAA,EAAC,GAAD;AAAA,QACE,QACE,gBAAA,EAAC,GAAD;AAAA,UACE,cAAY,EAAK;AAAA,UACjB,OAAM;AAAA,UACN,SAAS;AAAA,UACT,IAAI;AAAA,YACF,OAAO;AAAA,YACP,YAAY;AAAA,YACZ,YAAY;AAAA,YACZ,UAAU,EAAE,SAAS,WAAW;AAAA,UAClC;AAAA,UAEC,UAAA,EAAK;AAAA,QACA,CAAA;AAAA,QAEV,MAAM,gBAAA,EAAC,GAAD;AAAA,UAAa,QAAA;AAAA,UAAO,IAAI,EAAE,OAAO,gBAAgB;AAAA,QAAI,CAAA;AAAA,QAC3D,UAAS;AAAA,QACT,IAAI;AAAA,UACF,YAAY;AAAA,UACZ,SAAS;AAAA,UACT,QAAQ;AAAA,UACR,SAAS;AAAA,UACT,QAAQ;AAAA,UACR,gBAAgB;AAAA,UAChB,sBAAsB,EAAE,QAAQ,GAAG;AAAA,QACrC;AAAA,QAEA,UAAA,gBAAA,EAAC,GAAD;AAAA,UAAM,aAAU;AAAA,UAAY,OAAM;AAAA,UAAQ,IAAI,EAAE,YAAY,OAAO;AAAA,UAAG,UAAU;AAAA,UAC7E,UAAA,EAAK;AAAA,QACF,CAAA;AAAA,MACD,CAAA;AAAA,IACJ,CAAA;AAAA,EACD,CAAA,IAtCU;AAwCpB,CAAC"}

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

@@ -1,37 +1,19 @@
+export type FeedbackDialogCloseReason = 'closeButton' | 'backdropClick' | 'escapeKeyDown';
 export interface FeedbackDialogProps {
-    /** Dialog title. */
     title: string;
-    /** Available feedback reasons. The last option reveals the detail field. */
     options: string[];
-    /** Max characters for the detail text field (enforced on the input). */
     characterLimit?: number;
-    /** Localized helper text shown under the detail field (e.g. "250 Character Limit"). */
     characterLimitLabel?: string;
-    /** Whether the dialog is open. */
     isOpen: boolean;
-    /** Invoked on primary action (Submit); parent owns analytics + dispatch. */
     onSubmit: (option: string, detail?: string) => void;
-    /** Invoked on close (X, Cancel, or Submit); parent clears dialog state. */
-    onClose: () => void;
-    /** Button text for secondary (Back/Cancel) action. */
+    /** Called on every close; `reason` is set for user-initiated closes (X/backdrop/escape), undefined on submit/back. */
+    onClose: (reason?: FeedbackDialogCloseReason) => void;
+    onBackClick?: () => void;
+    onTextInputFocus?: () => void;
     secondaryText: string;
-    /** Button text for primary (Submit) action. */
     primaryText: string;
-    /** ARIA label for close button. */
     closeAriaLabel: string;
 }
-/**
- * Generic feedback survey dialog for collecting reasons and optional detail.
- * Presentational — the parent owns all copy, option definitions, and callback logic.
- *
- * This component can be used by any feature that needs to ask users for feedback.
- * Examples: rating an insight, dismissing a notification, rating a recommendation.
- *
- * The dialog is a single-select radio list of reasons; selecting the last option
- * ("Other") reveals a multiline text field. Submit is disabled until a valid
- * answer exists.
- *
- * Figma: 287:20484 (options only) / 287:20566 (with text field).
- */
-declare const FeedbackDialog: ({ isOpen, onClose, onSubmit, title, options, characterLimit, characterLimitLabel, secondaryText, primaryText, closeAriaLabel, }: FeedbackDialogProps) => import("react/jsx-runtime").JSX.Element | null;
+/** Generic feedback survey dialog. Last option shows detail text field. */
+declare const FeedbackDialog: ({ isOpen, onClose, onSubmit, title, options, characterLimit, characterLimitLabel, secondaryText, primaryText, closeAriaLabel, onBackClick, onTextInputFocus, }: FeedbackDialogProps) => import("react/jsx-runtime").JSX.Element | null;
 export default FeedbackDialog;