@mx-cartographer/experiences 9.4.19-alpha.al3 → 9.4.19

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;

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

@@ -1,34 +1,45 @@
-import S from "../../common/components/dialog/Dialog.es.js";
-import { useState as c } from "react";
-import y from "@mui/material/Stack";
-import { Text as D } from "@mxenabled/mxui";
-import { jsx as e, jsxs as d } from "react/jsx-runtime";
-import M from "@mui/material/FormControlLabel";
-import F from "@mui/material/TextField";
-import R from "@mui/material/Radio";
-import k from "@mui/material/FormControl";
-import I from "@mui/material/RadioGroup";
-var P = 250, W = ({ isOpen: p, onClose: g, onSubmit: b, title: i, options: r, characterLimit: f = P, characterLimitLabel: n, secondaryText: h, primaryText: x, closeAriaLabel: v }) => {
-  const [t, m] = c(""), [l, s] = c("");
-  if (r.length === 0) return null;
-  const a = t === r[r.length - 1], C = !t || a && !l.trim(), u = () => {
-    m(""), s("");
+import P from "../../common/components/dialog/Dialog.es.js";
+import { useEffect as w, useRef as p, useState as b } from "react";
+import _ from "@mui/material/Stack";
+import { Text as j } from "@mxenabled/mxui";
+import { jsx as o, jsxs as g } from "react/jsx-runtime";
+import z from "@mui/material/FormControlLabel";
+import E from "@mui/material/TextField";
+import L from "@mui/material/Radio";
+import G from "@mui/material/FormControl";
+import H from "@mui/material/RadioGroup";
+var K = 250, O = ({ isOpen: l, onClose: h, onSubmit: x, title: c, options: r, characterLimit: v = K, characterLimitLabel: u, secondaryText: C, primaryText: S, closeAriaLabel: y, onBackClick: k, onTextInputFocus: F }) => {
+  const [t, m] = b(""), [a, d] = b(""), i = p(!1), n = p(!1);
+  if (w(() => {
+    l && (i.current = !1, n.current = !1);
+  }, [l]), r.length === 0) return null;
+  const s = t === r[r.length - 1], R = !t || s && !a.trim(), f = () => {
+    m(""), d("");
+  }, D = (e) => {
+    if (e === "backdropClick" || e === "escapeKeyDown") return e;
+    if (!n.current) return "closeButton";
+  }, M = (e, B) => {
+    const I = D(B);
+    f(), h(I);
+  }, T = () => {
+    n.current = !0, k?.();
+  }, A = () => {
+    i.current || (i.current = !0, F?.());
   };
-  return /* @__PURE__ */ d(S, {
+  return /* @__PURE__ */ g(P, {
     copy: {
-      title: i,
-      close_aria: v
-    },
-    disablePrimaryButton: C,
-    isOpen: p,
-    onClose: () => {
-      u(), g();
+      title: c,
+      close_aria: y
     },
+    disablePrimaryButton: R,
+    isOpen: l,
+    onClose: M,
     onPrimaryAction: () => {
-      b(t, a ? l.trim() : void 0), u();
+      n.current = !0, x(t, s ? a.trim() : void 0), f();
     },
-    primaryText: x,
-    secondaryText: h,
+    onSecondaryAction: T,
+    primaryText: S,
+    secondaryText: C,
     sx: {
       "& .MuiDialogContent-root": { py: 0 },
       "& .MuiDialog-paperScrollPaper": { bgcolor: "background.paper" },
@@ -47,46 +58,47 @@ var P = 250, W = ({ isOpen: p, onClose: g, onSubmit: b, title: i, options: r, ch
         }
       }
     },
-    children: [/* @__PURE__ */ e(k, { children: /* @__PURE__ */ e(I, {
-      "aria-label": i,
+    children: [/* @__PURE__ */ o(G, { children: /* @__PURE__ */ o(H, {
+      "aria-label": c,
       name: "feedback-radio-group",
-      onChange: (o) => m(o.target.value),
+      onChange: (e) => m(e.target.value),
       value: t,
-      children: r.map((o) => /* @__PURE__ */ e(M, {
-        control: /* @__PURE__ */ e(R, { sx: { "& .MuiSvgIcon-root": { fontSize: 22 } } }),
-        label: o,
+      children: r.map((e) => /* @__PURE__ */ o(z, {
+        control: /* @__PURE__ */ o(L, { sx: { "& .MuiSvgIcon-root": { fontSize: 22 } } }),
+        label: e,
         sx: { "& .MuiFormControlLabel-label": {
           color: "text.primary",
           fontSize: 15
         } },
-        value: o
-      }, o))
-    }) }), a && /* @__PURE__ */ d(y, {
+        value: e
+      }, e))
+    }) }), s && /* @__PURE__ */ g(_, {
       sx: {
         gap: 3,
         mt: 4
       },
-      children: [/* @__PURE__ */ e(F, {
+      children: [/* @__PURE__ */ o(E, {
         autoFocus: !0,
         maxRows: 4,
         minRows: 4,
         multiline: !0,
-        onChange: (o) => s(o.target.value),
-        slotProps: { htmlInput: { maxLength: f } },
-        value: l
-      }), n && /* @__PURE__ */ e(D, {
+        onChange: (e) => d(e.target.value),
+        onFocus: A,
+        slotProps: { htmlInput: { maxLength: v } },
+        value: a
+      }), u && /* @__PURE__ */ o(j, {
         sx: {
           color: "text.secondary",
           fontWeight: 400
         },
         variant: "subtitle2",
-        children: n
+        children: u
       })]
     })]
   });
 };
 export {
-  W as default
+  O as default
 };
 
 //# sourceMappingURL=FeedbackDialog.es.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"FeedbackDialog.es.js","names":[],"sources":["../../../src/insights-v2/components/FeedbackDialog.tsx"],"sourcesContent":["import { useState } from 'react'\n\nimport FormControl from '@mui/material/FormControl'\nimport FormControlLabel from '@mui/material/FormControlLabel'\nimport Radio from '@mui/material/Radio'\nimport RadioGroup from '@mui/material/RadioGroup'\nimport Stack from '@mui/material/Stack'\nimport TextField from '@mui/material/TextField'\n\nimport { Text } from '@mxenabled/mxui'\n\nimport { Dialog } from '../../common'\n\nconst CHARACTER_LIMIT = 250\n\nexport interface FeedbackDialogProps {\n  /** Dialog title. */\n  title: string\n  /** Available feedback reasons. The last option reveals the detail field. */\n  options: string[]\n  /** Max characters for the detail text field (enforced on the input). */\n  characterLimit?: number\n  /** Localized helper text shown under the detail field (e.g. \"250 Character Limit\"). */\n  characterLimitLabel?: string\n  /** Whether the dialog is open. */\n  isOpen: boolean\n  /** Invoked on primary action (Submit); parent owns analytics + dispatch. */\n  onSubmit: (option: string, detail?: string) => void\n  /** Invoked on close (X, Cancel, or Submit); parent clears dialog state. */\n  onClose: () => void\n  /** Button text for secondary (Back/Cancel) action. */\n  secondaryText: string\n  /** Button text for primary (Submit) action. */\n  primaryText: string\n  /** ARIA label for close button. */\n  closeAriaLabel: string\n}\n\n/**\n * Generic feedback survey dialog for collecting reasons and optional detail.\n * Presentational — the parent owns all copy, option definitions, and callback logic.\n *\n * This component can be used by any feature that needs to ask users for feedback.\n * Examples: rating an insight, dismissing a notification, rating a recommendation.\n *\n * The dialog is a single-select radio list of reasons; selecting the last option\n * (\"Other\") reveals a multiline text field. Submit is disabled until a valid\n * answer exists.\n *\n * Figma: 287:20484 (options only) / 287:20566 (with text field).\n */\nconst FeedbackDialog = ({\n  isOpen,\n  onClose,\n  onSubmit,\n  title,\n  options,\n  characterLimit = CHARACTER_LIMIT,\n  characterLimitLabel,\n  secondaryText,\n  primaryText,\n  closeAriaLabel,\n}: FeedbackDialogProps) => {\n  const [selected, setSelected] = useState('')\n  const [detail, setDetail] = useState('')\n\n  if (options.length === 0) return null\n\n  const isOther = selected === options[options.length - 1]\n  const isSubmitDisabled = !selected || (isOther && !detail.trim())\n\n  const reset = () => {\n    setSelected('')\n    setDetail('')\n  }\n\n  const handleClose = () => {\n    reset()\n    onClose()\n  }\n\n  const handleSubmit = () => {\n    onSubmit(selected, isOther ? detail.trim() : undefined)\n    reset()\n  }\n\n  return (\n    <Dialog\n      copy={{ title, close_aria: closeAriaLabel }}\n      disablePrimaryButton={isSubmitDisabled}\n      isOpen={isOpen}\n      onClose={handleClose}\n      onPrimaryAction={handleSubmit}\n      primaryText={primaryText}\n      secondaryText={secondaryText}\n      sx={{\n        // Radio section has no vertical padding per Figma; keep horizontal.\n        '& .MuiDialogContent-root': { py: 0 },\n        // White surface, overriding the shared Dialog's default grey\n        // (background.default) for this dialog only — the shared component is untouched.\n        '& .MuiDialog-paperScrollPaper': { bgcolor: 'background.paper' },\n        // Paper receives focus on open; hide the browser's default outline\n        // while keeping focus for keyboard / screen-reader accessibility.\n        '& .MuiDialog-paper': {\n          outline: 'none',\n          '&:focus-visible': { outline: '2px solid', outlineColor: 'primary.main' },\n        },\n        // The shared Dialog footer defaults the secondary (Back) button to\n        // variant=\"outlined\"; Figma shows it as a plain text button.\n        '& .MuiButton-outlined': {\n          border: 'none',\n          '&:hover': { bgcolor: 'transparent', border: 'none' },\n        },\n      }}\n    >\n      <FormControl>\n        <RadioGroup\n          aria-label={title}\n          name=\"feedback-radio-group\"\n          onChange={(e) => setSelected(e.target.value)}\n          value={selected}\n        >\n          {options.map((option) => (\n            <FormControlLabel\n              control={<Radio sx={{ '& .MuiSvgIcon-root': { fontSize: 22 } }} />}\n              key={option}\n              label={option}\n              sx={{\n                '& .MuiFormControlLabel-label': {\n                  color: 'text.primary',\n                  fontSize: 15,\n                },\n              }}\n              value={option}\n            />\n          ))}\n        </RadioGroup>\n      </FormControl>\n\n      {isOther && (\n        <Stack sx={{ gap: 3, mt: 4 }}>\n          <TextField\n            autoFocus\n            maxRows={4}\n            minRows={4}\n            multiline={true}\n            onChange={(e) => setDetail(e.target.value)}\n            slotProps={{ htmlInput: { maxLength: characterLimit } }}\n            value={detail}\n          />\n          {characterLimitLabel && (\n            <Text sx={{ color: 'text.secondary', fontWeight: 400 }} variant=\"subtitle2\">\n              {characterLimitLabel}\n            </Text>\n          )}\n        </Stack>\n      )}\n    </Dialog>\n  )\n}\n\nexport default FeedbackDialog\n"],"mappings":";;;;;;;;;;AAaA,IAAM,IAAkB,KAsClB,IAAA,CAAkB,EACtB,QAAA,GACA,SAAA,GACA,UAAA,GACA,OAAA,GACA,SAAA,GACA,gBAAA,IAAiB,GACjB,qBAAA,GACA,eAAA,GACA,aAAA,GACA,gBAAA,EAAA,MACyB;AACzB,QAAM,CAAC,GAAU,CAAA,IAAe,EAAS,EAAE,GACrC,CAAC,GAAQ,CAAA,IAAa,EAAS,EAAE;AAEvC,MAAI,EAAQ,WAAW,EAAG,QAAO;AAEjC,QAAM,IAAU,MAAa,EAAQ,EAAQ,SAAS,CAAA,GAChD,IAAmB,CAAC,KAAa,KAAW,CAAC,EAAO,KAAK,GAEzD,IAAA,MAAc;AAClB,IAAA,EAAY,EAAE,GACd,EAAU,EAAE;AAAA,EACd;AAYA,SACE,gBAAA,EAAC,GAAD;AAAA,IACE,MAAM;AAAA,MAAE,OAAA;AAAA,MAAO,YAAY;AAAA,IAAe;AAAA,IAC1C,sBAAsB;AAAA,IACd,QAAA;AAAA,IACR,SAfE,MAAoB;AACxB,MAAA,EAAM,GACN,EAAQ;AAAA,IACV;AAAA,IAaI,iBAXE,MAAqB;AACzB,MAAA,EAAS,GAAU,IAAU,EAAO,KAAK,IAAI,MAAS,GACtD,EAAM;AAAA,IACR;AAAA,IASiB,aAAA;AAAA,IACE,eAAA;AAAA,IACf,IAAI;AAAA,MAEF,4BAA4B,EAAE,IAAI,EAAE;AAAA,MAGpC,iCAAiC,EAAE,SAAS,mBAAmB;AAAA,MAG/D,sBAAsB;AAAA,QACpB,SAAS;AAAA,QACT,mBAAmB;AAAA,UAAE,SAAS;AAAA,UAAa,cAAc;AAAA,QAAe;AAAA,MAC1E;AAAA,MAGA,yBAAyB;AAAA,QACvB,QAAQ;AAAA,QACR,WAAW;AAAA,UAAE,SAAS;AAAA,UAAe,QAAQ;AAAA,QAAO;AAAA,MACtD;AAAA,IACF;AAAA,IA1BF,UAAA,CA4BE,gBAAA,EAAC,GAAD,EAAA,UACE,gBAAA,EAAC,GAAD;AAAA,MACE,cAAY;AAAA,MACZ,MAAK;AAAA,MACL,UAAA,CAAW,MAAM,EAAY,EAAE,OAAO,KAAK;AAAA,MAC3C,OAAO;AAAA,MAEN,UAAA,EAAQ,IAAA,CAAK,MACZ,gBAAA,EAAC,GAAD;AAAA,QACE,SAAS,gBAAA,EAAC,GAAD,EAAO,IAAI,EAAE,sBAAsB,EAAE,UAAU,GAAG,EAAE,EAAI,CAAA;AAAA,QAEjE,OAAO;AAAA,QACP,IAAI,EACF,gCAAgC;AAAA,UAC9B,OAAO;AAAA,UACP,UAAU;AAAA,QACZ,EACF;AAAA,QACA,OAAO;AAAA,MACR,GATM,CASN,CACF;AAAA,IACS,CAAA,EACD,CAAA,GAEZ,KACC,gBAAA,EAAC,GAAD;AAAA,MAAO,IAAI;AAAA,QAAE,KAAK;AAAA,QAAG,IAAI;AAAA,MAAE;AAAA,MAA3B,UAAA,CACE,gBAAA,EAAC,GAAD;AAAA,QACE,WAAA;AAAA,QACA,SAAS;AAAA,QACT,SAAS;AAAA,QACT,WAAW;AAAA,QACX,UAAA,CAAW,MAAM,EAAU,EAAE,OAAO,KAAK;AAAA,QACzC,WAAW,EAAE,WAAW,EAAE,WAAW,EAAe,EAAE;AAAA,QACtD,OAAO;AAAA,MACR,CAAA,GACA,KACC,gBAAA,EAAC,GAAD;AAAA,QAAM,IAAI;AAAA,UAAE,OAAO;AAAA,UAAkB,YAAY;AAAA,QAAI;AAAA,QAAG,SAAQ;AAAA,QAC7D,UAAA;AAAA,MACG,CAAA,CAEH;AAAA,IAEH,CAAA,CAAA;AAAA;AAEZ"}
+{"version":3,"file":"FeedbackDialog.es.js","names":[],"sources":["../../../src/insights-v2/components/FeedbackDialog.tsx"],"sourcesContent":["import { useEffect, useRef, useState } from 'react'\n\nimport FormControl from '@mui/material/FormControl'\nimport FormControlLabel from '@mui/material/FormControlLabel'\nimport Radio from '@mui/material/Radio'\nimport RadioGroup from '@mui/material/RadioGroup'\nimport Stack from '@mui/material/Stack'\nimport TextField from '@mui/material/TextField'\n\nimport { Text } from '@mxenabled/mxui'\n\nimport { Dialog } from '../../common'\n\nconst CHARACTER_LIMIT = 250\n\nexport type FeedbackDialogCloseReason = 'closeButton' | 'backdropClick' | 'escapeKeyDown'\n\nexport interface FeedbackDialogProps {\n  title: string\n  options: string[]\n  characterLimit?: number\n  characterLimitLabel?: string\n  isOpen: boolean\n  onSubmit: (option: string, detail?: string) => void\n  /** Called on every close; `reason` is set for user-initiated closes (X/backdrop/escape), undefined on submit/back. */\n  onClose: (reason?: FeedbackDialogCloseReason) => void\n  onBackClick?: () => void\n  onTextInputFocus?: () => void\n  secondaryText: string\n  primaryText: string\n  closeAriaLabel: string\n}\n\n/** Generic feedback survey dialog. Last option shows detail text field. */\nconst FeedbackDialog = ({\n  isOpen,\n  onClose,\n  onSubmit,\n  title,\n  options,\n  characterLimit = CHARACTER_LIMIT,\n  characterLimitLabel,\n  secondaryText,\n  primaryText,\n  closeAriaLabel,\n  onBackClick,\n  onTextInputFocus,\n}: FeedbackDialogProps) => {\n  const [selected, setSelected] = useState('')\n  const [detail, setDetail] = useState('')\n  const hasTrackedFocus = useRef(false)\n  const skipCloseAnalytics = useRef(false)\n\n  useEffect(() => {\n    if (isOpen) {\n      hasTrackedFocus.current = false\n      skipCloseAnalytics.current = false\n    }\n  }, [isOpen])\n\n  if (options.length === 0) return null\n\n  const isOther = selected === options[options.length - 1]\n  const isSubmitDisabled = !selected || (isOther && !detail.trim())\n\n  const reset = () => {\n    setSelected('')\n    setDetail('')\n  }\n\n  const resolveCloseReason = (reason?: string): FeedbackDialogCloseReason | undefined => {\n    if (reason === 'backdropClick' || reason === 'escapeKeyDown') return reason\n    if (!skipCloseAnalytics.current) return 'closeButton'\n    return undefined\n  }\n\n  const handleClose = (_event?: unknown, reason?: string) => {\n    const closeReason = resolveCloseReason(reason)\n    reset()\n    onClose(closeReason)\n  }\n\n  const handleBack = () => {\n    skipCloseAnalytics.current = true\n    onBackClick?.()\n  }\n\n  const handleTextFocus = () => {\n    if (!hasTrackedFocus.current) {\n      hasTrackedFocus.current = true\n      onTextInputFocus?.()\n    }\n  }\n\n  const handleSubmit = () => {\n    skipCloseAnalytics.current = true\n    onSubmit(selected, isOther ? detail.trim() : undefined)\n    reset()\n  }\n\n  return (\n    <Dialog\n      copy={{ title, close_aria: closeAriaLabel }}\n      disablePrimaryButton={isSubmitDisabled}\n      isOpen={isOpen}\n      onClose={handleClose}\n      onPrimaryAction={handleSubmit}\n      onSecondaryAction={handleBack}\n      primaryText={primaryText}\n      secondaryText={secondaryText}\n      sx={{\n        '& .MuiDialogContent-root': { py: 0 },\n        '& .MuiDialog-paperScrollPaper': { bgcolor: 'background.paper' },\n        '& .MuiDialog-paper': {\n          outline: 'none',\n          '&:focus-visible': { outline: '2px solid', outlineColor: 'primary.main' },\n        },\n        '& .MuiButton-outlined': {\n          border: 'none',\n          '&:hover': { bgcolor: 'transparent', border: 'none' },\n        },\n      }}\n    >\n      <FormControl>\n        <RadioGroup\n          aria-label={title}\n          name=\"feedback-radio-group\"\n          onChange={(e) => setSelected(e.target.value)}\n          value={selected}\n        >\n          {options.map((option) => (\n            <FormControlLabel\n              control={<Radio sx={{ '& .MuiSvgIcon-root': { fontSize: 22 } }} />}\n              key={option}\n              label={option}\n              sx={{\n                '& .MuiFormControlLabel-label': {\n                  color: 'text.primary',\n                  fontSize: 15,\n                },\n              }}\n              value={option}\n            />\n          ))}\n        </RadioGroup>\n      </FormControl>\n\n      {isOther && (\n        <Stack sx={{ gap: 3, mt: 4 }}>\n          <TextField\n            autoFocus\n            maxRows={4}\n            minRows={4}\n            multiline={true}\n            onChange={(e) => setDetail(e.target.value)}\n            onFocus={handleTextFocus}\n            slotProps={{ htmlInput: { maxLength: characterLimit } }}\n            value={detail}\n          />\n          {characterLimitLabel && (\n            <Text sx={{ color: 'text.secondary', fontWeight: 400 }} variant=\"subtitle2\">\n              {characterLimitLabel}\n            </Text>\n          )}\n        </Stack>\n      )}\n    </Dialog>\n  )\n}\n\nexport default FeedbackDialog\n"],"mappings":";;;;;;;;;;AAaA,IAAM,IAAkB,KAqBlB,IAAA,CAAkB,EACtB,QAAA,GACA,SAAA,GACA,UAAA,GACA,OAAA,GACA,SAAA,GACA,gBAAA,IAAiB,GACjB,qBAAA,GACA,eAAA,GACA,aAAA,GACA,gBAAA,GACA,aAAA,GACA,kBAAA,EAAA,MACyB;AACzB,QAAM,CAAC,GAAU,CAAA,IAAe,EAAS,EAAE,GACrC,CAAC,GAAQ,CAAA,IAAa,EAAS,EAAE,GACjC,IAAkB,EAAO,EAAK,GAC9B,IAAqB,EAAO,EAAK;AASvC,MAPA,EAAA,MAAgB;AACd,IAAI,MACF,EAAgB,UAAU,IAC1B,EAAmB,UAAU;AAAA,EAEjC,GAAG,CAAC,CAAM,CAAC,GAEP,EAAQ,WAAW,EAAG,QAAO;AAEjC,QAAM,IAAU,MAAa,EAAQ,EAAQ,SAAS,CAAA,GAChD,IAAmB,CAAC,KAAa,KAAW,CAAC,EAAO,KAAK,GAEzD,IAAA,MAAc;AAClB,IAAA,EAAY,EAAE,GACd,EAAU,EAAE;AAAA,EACd,GAEM,IAAA,CAAsB,MAA2D;AACrF,QAAI,MAAW,mBAAmB,MAAW,gBAAiB,QAAO;AACrE,QAAI,CAAC,EAAmB,QAAS,QAAO;AAAA,EAE1C,GAEM,IAAA,CAAe,GAAkB,MAAoB;AACzD,UAAM,IAAc,EAAmB,CAAM;AAC7C,IAAA,EAAM,GACN,EAAQ,CAAW;AAAA,EACrB,GAEM,IAAA,MAAmB;AACvB,IAAA,EAAmB,UAAU,IAC7B,IAAc;AAAA,EAChB,GAEM,IAAA,MAAwB;AAC5B,IAAK,EAAgB,YACnB,EAAgB,UAAU,IAC1B,IAAmB;AAAA,EAEvB;AAQA,SACE,gBAAA,EAAC,GAAD;AAAA,IACE,MAAM;AAAA,MAAE,OAAA;AAAA,MAAO,YAAY;AAAA,IAAe;AAAA,IAC1C,sBAAsB;AAAA,IACd,QAAA;AAAA,IACR,SAAS;AAAA,IACT,iBAZE,MAAqB;AACzB,MAAA,EAAmB,UAAU,IAC7B,EAAS,GAAU,IAAU,EAAO,KAAK,IAAI,MAAS,GACtD,EAAM;AAAA,IACR;AAAA,IASI,mBAAmB;AAAA,IACN,aAAA;AAAA,IACE,eAAA;AAAA,IACf,IAAI;AAAA,MACF,4BAA4B,EAAE,IAAI,EAAE;AAAA,MACpC,iCAAiC,EAAE,SAAS,mBAAmB;AAAA,MAC/D,sBAAsB;AAAA,QACpB,SAAS;AAAA,QACT,mBAAmB;AAAA,UAAE,SAAS;AAAA,UAAa,cAAc;AAAA,QAAe;AAAA,MAC1E;AAAA,MACA,yBAAyB;AAAA,QACvB,QAAQ;AAAA,QACR,WAAW;AAAA,UAAE,SAAS;AAAA,UAAe,QAAQ;AAAA,QAAO;AAAA,MACtD;AAAA,IACF;AAAA,IApBF,UAAA,CAsBE,gBAAA,EAAC,GAAD,EAAA,UACE,gBAAA,EAAC,GAAD;AAAA,MACE,cAAY;AAAA,MACZ,MAAK;AAAA,MACL,UAAA,CAAW,MAAM,EAAY,EAAE,OAAO,KAAK;AAAA,MAC3C,OAAO;AAAA,MAEN,UAAA,EAAQ,IAAA,CAAK,MACZ,gBAAA,EAAC,GAAD;AAAA,QACE,SAAS,gBAAA,EAAC,GAAD,EAAO,IAAI,EAAE,sBAAsB,EAAE,UAAU,GAAG,EAAE,EAAI,CAAA;AAAA,QAEjE,OAAO;AAAA,QACP,IAAI,EACF,gCAAgC;AAAA,UAC9B,OAAO;AAAA,UACP,UAAU;AAAA,QACZ,EACF;AAAA,QACA,OAAO;AAAA,MACR,GATM,CASN,CACF;AAAA,IACS,CAAA,EACD,CAAA,GAEZ,KACC,gBAAA,EAAC,GAAD;AAAA,MAAO,IAAI;AAAA,QAAE,KAAK;AAAA,QAAG,IAAI;AAAA,MAAE;AAAA,MAA3B,UAAA,CACE,gBAAA,EAAC,GAAD;AAAA,QACE,WAAA;AAAA,QACA,SAAS;AAAA,QACT,SAAS;AAAA,QACT,WAAW;AAAA,QACX,UAAA,CAAW,MAAM,EAAU,EAAE,OAAO,KAAK;AAAA,QACzC,SAAS;AAAA,QACT,WAAW,EAAE,WAAW,EAAE,WAAW,EAAe,EAAE;AAAA,QACtD,OAAO;AAAA,MACR,CAAA,GACA,KACC,gBAAA,EAAC,GAAD;AAAA,QAAM,IAAI;AAAA,UAAE,OAAO;AAAA,UAAkB,YAAY;AAAA,QAAI;AAAA,QAAG,SAAQ;AAAA,QAC7D,UAAA;AAAA,MACG,CAAA,CAEH;AAAA,IAEH,CAAA,CAAA;AAAA;AAEZ"}

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

@@ -3,17 +3,7 @@ export interface HiddenConfirmationCardProps {
     onUndo: () => void;
     onLeaveFeedback: () => void;
 }
-/**
- * Inline card that replaces a beat once it has been hidden, prompting the user
- * to undo or leave feedback. Presentational — the host owns visibility and
- * wires the callbacks. Copy comes from `insights_feed.hidden_confirmation`.
- *
- * The close IconButton is absolutely positioned in the top-right corner (top: 4
- * + a 40px button centers its icon on the title line), and the action row is
- * indented under the text column.
- *
- * Figma: 287:20383 — "Template | Hidden Card".
- */
+/** Inline confirmation card shown after hiding an insight. */
 export declare const HiddenConfirmationCard: (({ onClose, onUndo, onLeaveFeedback }: HiddenConfirmationCardProps) => import("react/jsx-runtime").JSX.Element | null) & {
     displayName: string;
 };

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

@@ -1 +1 @@
-{"version":3,"file":"HiddenConfirmationCard.es.js","names":[],"sources":["../../../src/insights-v2/components/HiddenConfirmationCard.tsx"],"sourcesContent":["import Box from '@mui/material/Box'\nimport Button from '@mui/material/Button'\nimport Card from '@mui/material/Card'\nimport IconButton from '@mui/material/IconButton'\nimport Stack from '@mui/material/Stack'\n\nimport { observer } from 'mobx-react-lite'\n\nimport { Close, VisibilityOff } from '@mxenabled/mx-icons'\nimport { P, Text } from '@mxenabled/mxui'\n\nimport { useGlobalCopyStore } from '../../common'\n\nexport interface HiddenConfirmationCardProps {\n  onClose: () => void\n  onUndo: () => void\n  onLeaveFeedback: () => void\n}\n\n/**\n * Inline card that replaces a beat once it has been hidden, prompting the user\n * to undo or leave feedback. Presentational — the host owns visibility and\n * wires the callbacks. Copy comes from `insights_feed.hidden_confirmation`.\n *\n * The close IconButton is absolutely positioned in the top-right corner (top: 4\n * + a 40px button centers its icon on the title line), and the action row is\n * indented under the text column.\n *\n * Figma: 287:20383 — \"Template | Hidden Card\".\n */\nexport const HiddenConfirmationCard = observer(\n  ({ onClose, onUndo, onLeaveFeedback }: HiddenConfirmationCardProps) => {\n    const copy = useGlobalCopyStore().insights_feed?.hidden_confirmation\n\n    if (!copy) return null\n\n    return (\n      <Card\n        elevation={1}\n        sx={{\n          position: 'relative',\n          bgcolor: 'action.disabledBackground',\n          borderRadius: 2,\n          pt: 16,\n          px: 16,\n          pb: 8,\n        }}\n      >\n        <IconButton\n          aria-label={copy.close_aria}\n          onClick={onClose}\n          sx={{ minHeight: 40, minWidth: 40, position: 'absolute', right: 4, top: 4 }}\n        >\n          <Close size={20} sx={{ color: 'text.secondary' }} />\n        </IconButton>\n\n        <Stack sx={{ gap: 6 }}>\n          {/* Icon + title/description */}\n          <Stack sx={{ flexDirection: 'row', gap: 12 }}>\n            <Box\n              sx={{\n                flexShrink: 0,\n                width: 32,\n                height: 32,\n                borderRadius: 1,\n                bgcolor: 'grey.300',\n                display: 'flex',\n                alignItems: 'center',\n                justifyContent: 'center',\n              }}\n            >\n              <VisibilityOff size={20} sx={{ color: 'text.secondary' }} />\n            </Box>\n\n            <Stack sx={{ gap: 6 }}>\n              <P aria-live=\"assertive\" bold sx={{ lineHeight: '16px' }} variant=\"body1\">\n                {copy.title}\n              </P>\n\n              <P\n                sx={{ color: 'text.primary', fontSize: 13, lineHeight: '20px' }}\n                variant=\"subtitle2\"\n              >\n                {copy.description}\n              </P>\n            </Stack>\n          </Stack>\n\n          {/* Actions — indented under the text column via pl: 36 (avatar 32 + gap\n              12), so the first label sits flush under the title/description.\n              Gap 4 between buttons per Figma. */}\n          <Stack\n            sx={{\n              alignItems: 'center',\n              flexDirection: 'row',\n              gap: 4,\n              height: 28,\n              pb: 6,\n              pl: 36,\n            }}\n          >\n            <Button onClick={onUndo} size=\"small\" sx={{ minWidth: 0, px: 8 }} variant=\"text\">\n              <Text bold variant=\"body2\">\n                {copy.undo}\n              </Text>\n            </Button>\n            <Button\n              onClick={onLeaveFeedback}\n              size=\"small\"\n              sx={{ minWidth: 0, px: 8 }}\n              variant=\"text\"\n            >\n              <Text bold sx={{ color: 'text.secondary' }} variant=\"body2\">\n                {copy.leave_feedback}\n              </Text>\n            </Button>\n          </Stack>\n        </Stack>\n      </Card>\n    )\n  },\n)\n\nexport default HiddenConfirmationCard\n"],"mappings":"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"}
+{"version":3,"file":"HiddenConfirmationCard.es.js","names":[],"sources":["../../../src/insights-v2/components/HiddenConfirmationCard.tsx"],"sourcesContent":["import Box from '@mui/material/Box'\nimport Button from '@mui/material/Button'\nimport Card from '@mui/material/Card'\nimport IconButton from '@mui/material/IconButton'\nimport Stack from '@mui/material/Stack'\n\nimport { observer } from 'mobx-react-lite'\n\nimport { Close, VisibilityOff } from '@mxenabled/mx-icons'\nimport { P, Text } from '@mxenabled/mxui'\n\nimport { useGlobalCopyStore } from '../../common'\n\nexport interface HiddenConfirmationCardProps {\n  onClose: () => void\n  onUndo: () => void\n  onLeaveFeedback: () => void\n}\n\n/** Inline confirmation card shown after hiding an insight. */\nexport const HiddenConfirmationCard = observer(\n  ({ onClose, onUndo, onLeaveFeedback }: HiddenConfirmationCardProps) => {\n    const copy = useGlobalCopyStore().insights_feed?.hidden_confirmation\n\n    if (!copy) return null\n\n    return (\n      <Card\n        elevation={1}\n        sx={{\n          position: 'relative',\n          bgcolor: 'action.disabledBackground',\n          borderRadius: 2,\n          pt: 16,\n          px: 16,\n          pb: 8,\n        }}\n      >\n        <IconButton\n          aria-label={copy.close_aria}\n          onClick={onClose}\n          sx={{ minHeight: 40, minWidth: 40, position: 'absolute', right: 4, top: 4 }}\n        >\n          <Close size={20} sx={{ color: 'text.secondary' }} />\n        </IconButton>\n\n        <Stack sx={{ gap: 6 }}>\n          <Stack sx={{ flexDirection: 'row', gap: 12 }}>\n            <Box\n              sx={{\n                flexShrink: 0,\n                width: 32,\n                height: 32,\n                borderRadius: 1,\n                bgcolor: 'grey.300',\n                display: 'flex',\n                alignItems: 'center',\n                justifyContent: 'center',\n              }}\n            >\n              <VisibilityOff size={20} sx={{ color: 'text.secondary' }} />\n            </Box>\n\n            <Stack sx={{ gap: 6 }}>\n              <P aria-live=\"assertive\" bold sx={{ lineHeight: '16px' }} variant=\"body1\">\n                {copy.title}\n              </P>\n\n              <P\n                sx={{ color: 'text.primary', fontSize: 13, lineHeight: '20px' }}\n                variant=\"subtitle2\"\n              >\n                {copy.description}\n              </P>\n            </Stack>\n          </Stack>\n\n          <Stack\n            sx={{\n              alignItems: 'center',\n              flexDirection: 'row',\n              gap: 4,\n              height: 28,\n              pb: 6,\n              pl: 36,\n            }}\n          >\n            <Button onClick={onUndo} size=\"small\" sx={{ minWidth: 0, px: 8 }} variant=\"text\">\n              <Text bold variant=\"body2\">\n                {copy.undo}\n              </Text>\n            </Button>\n            <Button\n              onClick={onLeaveFeedback}\n              size=\"small\"\n              sx={{ minWidth: 0, px: 8 }}\n              variant=\"text\"\n            >\n              <Text bold sx={{ color: 'text.secondary' }} variant=\"body2\">\n                {copy.leave_feedback}\n              </Text>\n            </Button>\n          </Stack>\n        </Stack>\n      </Card>\n    )\n  },\n)\n\nexport default HiddenConfirmationCard\n"],"mappings":"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"}

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

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

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

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

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

@@ -0,0 +1,26 @@
+import { default as React } from 'react';
+export type ObsolesceBannerState = 'refresh_available' | 'refreshing' | 'updated' | 'not_refreshable' | 'hidden';
+export interface ObsolesceBannerCopy {
+    new_information_available: string;
+    updating: string;
+    update: string;
+    insight_updated: string;
+    insight_no_longer_applicable: string;
+    dismiss: string;
+}
+export interface ObsolesceBannerProps {
+    state: ObsolesceBannerState;
+    onRefresh: () => void;
+    onDismiss: () => void;
+    copy: ObsolesceBannerCopy;
+}
+/**
+ * Presentational obsolescence banner. State transitions are announced to
+ * screen readers by the host via a global aria-live region (Pulse's
+ * useObsoleteManager dispatches updateAriaLive on each transition, matching
+ * the legacy ObsoleteManager). A component-level aria-live is intentionally
+ * omitted: it would double-announce in Pulse and, because the banner unmounts
+ * via <Collapse unmountOnExit>, would be a less reliable live region than a
+ * persistent global one.
+ */
+export declare const ObsolesceBanner: React.FC<ObsolesceBannerProps>;

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

@@ -0,0 +1,119 @@
+import { useRef as C } from "react";
+import { Text as l } from "@mxenabled/mxui";
+import { Cancel as k, CheckCircle as v, Sync as _ } from "@mxenabled/mx-icons";
+import { jsx as t, jsxs as c } from "react/jsx-runtime";
+import { useTheme as B } from "@mui/material/styles";
+import { Box as d, Button as u, Collapse as R, Stack as I } from "@mui/material";
+var S = 50, p = {
+  fontSize: 11,
+  minWidth: "auto",
+  padding: "4px 8px",
+  textTransform: "none",
+  "&:hover": {
+    backgroundColor: "transparent",
+    textDecoration: "underline"
+  }
+}, H = ({ state: o, onRefresh: f, onDismiss: g, copy: r }) => {
+  const e = B(), m = o === "refresh_available", i = o === "refreshing", b = o === "updated", x = o === "not_refreshable", h = o !== "hidden", a = m || i ? {
+    backgroundColor: e.palette.success?.lighter,
+    iconColor: e.palette.success?.dark,
+    textColor: e.palette.success?.dark,
+    icon: /* @__PURE__ */ t(_, { sx: { ...i && {
+      animation: "spin 1.6s linear infinite",
+      "@keyframes spin": {
+        "0%": { transform: "rotate(0deg)" },
+        "100%": { transform: "rotate(360deg)" }
+      }
+    } } }),
+    message: i ? r.updating : r.new_information_available,
+    button: /* @__PURE__ */ t(u, {
+      onClick: f,
+      disabled: i,
+      variant: "text",
+      size: "small",
+      "aria-label": r.update,
+      sx: {
+        ...p,
+        color: i ? e.palette.text?.secondary : e.palette.success?.dark
+      },
+      children: /* @__PURE__ */ t(l, {
+        bold: !0,
+        variant: "body2",
+        children: r.update
+      })
+    })
+  } : b ? {
+    backgroundColor: e.palette.success?.lighter,
+    iconColor: e.palette.success?.dark,
+    textColor: e.palette.success?.dark,
+    icon: /* @__PURE__ */ t(v, {}),
+    message: r.insight_updated,
+    button: null
+  } : x ? {
+    backgroundColor: e.palette.neutral?.light,
+    iconColor: e.palette.neutral?.dark,
+    textColor: e.palette.neutral?.dark,
+    icon: /* @__PURE__ */ t(k, { filled: !0 }),
+    message: r.insight_no_longer_applicable,
+    button: /* @__PURE__ */ t(u, {
+      onClick: g,
+      variant: "text",
+      size: "small",
+      "aria-label": r.dismiss,
+      sx: {
+        ...p,
+        color: e.palette.neutral?.dark
+      },
+      children: /* @__PURE__ */ t(l, {
+        bold: !0,
+        variant: "body2",
+        children: r.dismiss
+      })
+    })
+  } : null, s = C(a);
+  a && (s.current = a);
+  const n = a ?? s.current;
+  return n ? /* @__PURE__ */ t(R, {
+    in: h,
+    unmountOnExit: !0,
+    children: /* @__PURE__ */ c(d, {
+      sx: {
+        alignItems: "center",
+        backgroundColor: n.backgroundColor,
+        borderRadius: "8px",
+        display: "flex",
+        height: S,
+        justifyContent: "space-between",
+        pb: 14,
+        position: "relative",
+        pt: 8,
+        px: 12,
+        top: 10
+      },
+      children: [/* @__PURE__ */ c(I, {
+        sx: {
+          alignItems: "center",
+          flexDirection: "row",
+          gap: 4
+        },
+        children: [/* @__PURE__ */ t(d, {
+          sx: {
+            color: n.iconColor,
+            display: "flex",
+            alignItems: "center"
+          },
+          children: n.icon
+        }), /* @__PURE__ */ t(l, {
+          variant: "subtitle2",
+          sx: { color: n.textColor },
+          children: n.message
+        })]
+      }), n.button]
+    })
+  }) : null;
+};
+export {
+  H as ObsolesceBanner
+};
+
+//# sourceMappingURL=ObsolesceBanner.es.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ObsolesceBanner.es.js","names":[],"sources":["../../../src/insights-v2/components/ObsolesceBanner.tsx"],"sourcesContent":["import React, { useRef } from 'react'\nimport { Box, Button, Collapse, Stack } from '@mui/material'\nimport { useTheme } from '@mui/material/styles'\nimport { Cancel, CheckCircle, Sync } from '@mxenabled/mx-icons'\nimport { Text } from '@mxenabled/mxui'\n\nexport type ObsolesceBannerState =\n  | 'refresh_available'\n  | 'refreshing'\n  | 'updated'\n  | 'not_refreshable'\n  | 'hidden'\n\nexport interface ObsolesceBannerCopy {\n  new_information_available: string\n  updating: string\n  update: string\n  insight_updated: string\n  insight_no_longer_applicable: string\n  dismiss: string\n}\n\nexport interface ObsolesceBannerProps {\n  state: ObsolesceBannerState\n  onRefresh: () => void\n  onDismiss: () => void\n  copy: ObsolesceBannerCopy\n}\n\nconst BANNER_HEIGHT = 50\n\nconst bannerButtonSx = {\n  fontSize: 11,\n  minWidth: 'auto',\n  padding: '4px 8px',\n  textTransform: 'none',\n  '&:hover': {\n    backgroundColor: 'transparent',\n    textDecoration: 'underline',\n  },\n} as const\n\n/**\n * Presentational obsolescence banner. State transitions are announced to\n * screen readers by the host via a global aria-live region (Pulse's\n * useObsoleteManager dispatches updateAriaLive on each transition, matching\n * the legacy ObsoleteManager). A component-level aria-live is intentionally\n * omitted: it would double-announce in Pulse and, because the banner unmounts\n * via <Collapse unmountOnExit>, would be a less reliable live region than a\n * persistent global one.\n */\nexport const ObsolesceBanner: React.FC<ObsolesceBannerProps> = ({\n  state,\n  onRefresh,\n  onDismiss,\n  copy,\n}) => {\n  const theme = useTheme()\n\n  const isRefreshAvailable = state === 'refresh_available'\n  const isRefreshing = state === 'refreshing'\n  const isUpdated = state === 'updated'\n  const isNotRefreshable = state === 'not_refreshable'\n  const isVisible = state !== 'hidden'\n\n  const getBannerConfig = () => {\n    if (isRefreshAvailable || isRefreshing) {\n      return {\n        backgroundColor: theme.palette.success?.lighter,\n        iconColor: theme.palette.success?.dark,\n        textColor: theme.palette.success?.dark,\n        icon: (\n          <Sync\n            sx={{\n              ...(isRefreshing && {\n                animation: 'spin 1.6s linear infinite',\n                '@keyframes spin': {\n                  '0%': { transform: 'rotate(0deg)' },\n                  '100%': { transform: 'rotate(360deg)' },\n                },\n              }),\n            }}\n          />\n        ),\n        message: isRefreshing ? copy.updating : copy.new_information_available,\n        button: (\n          <Button\n            onClick={onRefresh}\n            disabled={isRefreshing}\n            variant=\"text\"\n            size=\"small\"\n            aria-label={copy.update}\n            sx={{\n              ...bannerButtonSx,\n              color: isRefreshing ? theme.palette.text?.secondary : theme.palette.success?.dark,\n            }}\n          >\n            <Text bold={true} variant=\"body2\">\n              {copy.update}\n            </Text>\n          </Button>\n        ),\n      }\n    }\n\n    if (isUpdated) {\n      return {\n        backgroundColor: theme.palette.success?.lighter,\n        iconColor: theme.palette.success?.dark,\n        textColor: theme.palette.success?.dark,\n        icon: <CheckCircle />,\n        message: copy.insight_updated,\n        button: null,\n      }\n    }\n\n    if (isNotRefreshable) {\n      return {\n        backgroundColor: theme.palette.neutral?.light,\n        iconColor: theme.palette.neutral?.dark,\n        textColor: theme.palette.neutral?.dark,\n        icon: <Cancel filled={true} />,\n        message: copy.insight_no_longer_applicable,\n        button: (\n          <Button\n            onClick={onDismiss}\n            variant=\"text\"\n            size=\"small\"\n            aria-label={copy.dismiss}\n            sx={{\n              ...bannerButtonSx,\n              color: theme.palette.neutral?.dark,\n            }}\n          >\n            <Text bold={true} variant=\"body2\">\n              {copy.dismiss}\n            </Text>\n          </Button>\n        ),\n      }\n    }\n\n    return null\n  }\n\n  const config = getBannerConfig()\n\n  // Keep the last visible config so the banner can animate out on 'hidden'\n  // instead of unmounting instantly (Collapse needs content while in={false}).\n  const lastConfig = useRef(config)\n  if (config) lastConfig.current = config\n  const renderedConfig = config ?? lastConfig.current\n\n  if (!renderedConfig) {\n    return null\n  }\n\n  return (\n    <Collapse in={isVisible} unmountOnExit>\n      <Box\n        sx={{\n          alignItems: 'center',\n          backgroundColor: renderedConfig.backgroundColor,\n          borderRadius: '8px',\n          display: 'flex',\n          height: BANNER_HEIGHT,\n          justifyContent: 'space-between',\n          pb: 14,\n          position: 'relative',\n          pt: 8,\n          px: 12,\n          top: 10,\n        }}\n      >\n        <Stack sx={{ alignItems: 'center', flexDirection: 'row', gap: 4 }}>\n          <Box\n            sx={{\n              color: renderedConfig.iconColor,\n              display: 'flex',\n              alignItems: 'center',\n            }}\n          >\n            {renderedConfig.icon}\n          </Box>\n          <Text\n            variant=\"subtitle2\"\n            sx={{\n              color: renderedConfig.textColor,\n            }}\n          >\n            {renderedConfig.message}\n          </Text>\n        </Stack>\n        {renderedConfig.button}\n      </Box>\n    </Collapse>\n  )\n}\n"],"mappings":"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"}

package/dist/insights-v2/hooks/useBeatFeedbackFlow.d.ts

@@ -1,23 +1,12 @@
 import { Beat } from '../../core';
 import { BeatActions, InsightRating } from '../beatActions';
 import { DismissType } from '../components/DismissInsightDialog';
-/** Which flow opened the survey dialog (null = closed): a rating or the hide flow. */
+import { FeedbackDialogCloseReason } from '../components/FeedbackDialog';
 export type FeedbackVariant = InsightRating | 'hide';
-/**
- * What the card slot shows:
- * - `visible`    the original beat card
- * - `confirming` the hidden-confirmation card (grace period after a hide)
- * - `dismissed`  nothing (beat stays hidden; the host removes it on refresh)
- */
 export type CardState = 'visible' | 'confirming' | 'dismissed';
 /**
- * Owns the post-action UI state machine for a beat card: the feedback bar shown
- * after a rating, the "hide this insight" dismiss dialog, the hidden-confirmation
- * card, and the shared feedback survey dialog.
- *
- * Experiences owns this UI; the host only receives callbacks (rate / dismiss /
- * undo / submit-feedback) via `beatActions`. Keeping the machine here leaves
- * BaseLayout as pure layout.
+ * Manages feedback and dismiss UI state for a beat card.
+ * Handles feedback bar, dismiss dialog, confirmation card, and survey dialogs.
  */
 export declare const useBeatFeedbackFlow: (beat: Beat, beatActions: BeatActions) => {
     cardState: CardState;
@@ -35,10 +24,14 @@ export declare const useBeatFeedbackFlow: (beat: Beat, beatActions: BeatActions)
     wrappedActions: BeatActions;
     openRatingSurvey: () => void;
     openHideSurvey: () => void;
-    closeSurvey: () => void;
+    closeSurvey: (reason?: FeedbackDialogCloseReason) => void;
     submitSurvey: (option: string, detail?: string) => void;
     confirmDismiss: (type: DismissType) => void;
     undoDismiss: () => void;
     collapseConfirmation: () => void;
     closeDismissDialog: () => void;
+    feedbackDialogCallbacks: {
+        onBackClick: (() => void) | undefined;
+        onTextInputFocus: (() => void) | undefined;
+    };
 };

package/dist/insights-v2/hooks/useBeatFeedbackFlow.es.js

@@ -1,8 +1,12 @@
-import { useGlobalCopyStore as S } from "../../common/context/hooks.es.js";
-import { useMemo as y, useState as u } from "react";
-var x = (r, o) => {
-  const a = S(), [c, n] = u(null), [i, t] = u(null), [f, d] = u(!1), [p, l] = u("visible"), h = (() => {
-    const e = a.insights_feed?.feedback, s = a.insights_feed?.hide_feedback, m = {
+import { useGlobalCopyStore as b } from "../../common/context/hooks.es.js";
+import { useEffect as g, useMemo as p, useState as u } from "react";
+var w = (n, o) => {
+  const d = b(), [r, l] = u(null), [i, t] = u(null), [h, a] = u(!1), [f, c] = u(!1);
+  g(() => {
+    n.is_dismissed || c(!1);
+  }, [n.is_dismissed]);
+  const k = p(() => n.is_dismissed && f ? "dismissed" : n.is_dismissed ? "confirming" : "visible", [n.is_dismissed, f]), v = (() => {
+    const e = d.insights_feed?.feedback, s = d.insights_feed?.hide_feedback, m = {
       characterLimitLabel: (i === "hide" ? s : e)?.character_limit,
       closeAriaLabel: (i === "hide" ? s : e)?.close_aria ?? "Close",
       submitText: (i === "hide" ? s : e)?.submit ?? "Submit",
@@ -13,61 +17,67 @@ var x = (r, o) => {
       options: Object.values(s.options),
       ...m
     };
-    const v = Object.values(i === "not_helpful" ? e?.not_helpful_options ?? {} : e?.helpful_options ?? {});
+    const _ = Object.values(i === "not_helpful" ? e?.not_helpful_options ?? {} : e?.helpful_options ?? {});
     return {
       title: e?.tell_us_more_title ?? "Tell us more",
-      options: v,
+      options: _,
       ...m
     };
-  })(), b = y(() => {
+  })(), S = p(() => {
     const e = o.onMenuAction;
     return e ? {
       ...o,
       onMenuAction: {
         ...e,
         onAction: (s) => {
-          s === "helpful" || s === "not_helpful" ? n(s) : s === "hide" && d(!0), e.onAction(s);
+          s === "helpful" || s === "not_helpful" ? l(s) : s === "hide" && a(!0), e.onAction(s);
         }
       }
     } : o;
   }, [o]);
   return {
-    cardState: p,
-    isDismissOpen: f,
+    cardState: k,
+    isDismissOpen: h,
     isSurveyOpen: i !== null,
-    isFeedbackBarShown: c !== null,
-    survey: h,
-    wrappedActions: b,
+    isFeedbackBarShown: r !== null,
+    survey: v,
+    wrappedActions: S,
     openRatingSurvey: () => {
-      c && t(c);
+      r && t(r);
     },
     openHideSurvey: () => t("hide"),
-    closeSurvey: () => {
-      i !== "hide" && n(null), t(null);
+    closeSurvey: (e) => {
+      e && o.onFeedbackDialogClose?.(e), i !== "hide" && l(null), t(null);
     },
     submitSurvey: (e, s) => {
       i && (o.onSubmitFeedback?.({
-        beatGuid: r.guid,
+        beatGuid: n.guid,
         source: i,
         option: e,
         detail: s
-      }), t(null), i === "hide" ? l("dismissed") : n(null));
+      }), t(null), i === "hide" ? c(!0) : l(null));
     },
     confirmDismiss: (e) => {
       o.onDismissInsight?.({
-        beatGuid: r.guid,
+        beatGuid: n.guid,
         type: e
-      }), l("confirming");
+      });
     },
     undoDismiss: () => {
-      o.onUndoDismiss?.({ beatGuid: r.guid }), n(null), l("visible");
+      o.onUndoDismiss?.({ beatGuid: n.guid }), l(null);
     },
-    collapseConfirmation: () => l("dismissed"),
-    closeDismissDialog: () => d(!1)
+    collapseConfirmation: () => {
+      c(!0);
+    },
+    closeDismissDialog: () => a(!1),
+    feedbackDialogCallbacks: {
+      onBackClick: o.onFeedbackDialogBack,
+      onTextInputFocus: o.onFeedbackTextFocus
+    }
   };
 };
 export {
-  x as useBeatFeedbackFlow
+  w as useBeatFeedbackFlow
 };
 
 //# sourceMappingURL=useBeatFeedbackFlow.es.js.map