@mx-cartographer/experiences 9.6.0 → 9.6.2

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

@@ -3,6 +3,8 @@ export interface FeedbackDialogProps {
     title: string;
     options: string[];
     characterLimit?: number;
+    /** Optional paragraph rendered between the title and the options (Figma feedback survey). */
+    description?: string;
     characterLimitLabel?: string;
     isOpen: boolean;
     onSubmit: (option: string, detail?: string) => void;
@@ -15,5 +17,5 @@ export interface FeedbackDialogProps {
     closeAriaLabel: string;
 }
 /** 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;
+declare const FeedbackDialog: ({ isOpen, onClose, onSubmit, title, options, characterLimit, description, 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,45 +1,45 @@
-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: s, 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 c = t === r[r.length - 1], R = !t || c && !a.trim(), f = () => {
-    m(""), d("");
-  }, D = (e) => {
+import _ from "../../common/components/dialog/Dialog.es.js";
+import { useEffect as j, useRef as b, useState as h } from "react";
+import z from "@mui/material/Stack";
+import { Text as g } from "@mxenabled/mxui";
+import { jsx as o, jsxs as x } from "react/jsx-runtime";
+import E from "@mui/material/FormControlLabel";
+import L from "@mui/material/TextField";
+import G from "@mui/material/Radio";
+import H from "@mui/material/FormControl";
+import K from "@mui/material/RadioGroup";
+var W = 250, ee = ({ isOpen: a, onClose: v, onSubmit: C, title: s, options: r, characterLimit: y = W, description: u, characterLimitLabel: m, secondaryText: S, primaryText: k, closeAriaLabel: F, onBackClick: R, onTextInputFocus: D }) => {
+  const [t, d] = h(""), [l, f] = h(""), i = b(!1), n = b(!1);
+  if (j(() => {
+    a && (i.current = !1, n.current = !1);
+  }, [a]), r.length === 0) return null;
+  const c = t === r[r.length - 1], M = !t || c && !l.trim(), p = () => {
+    d(""), f("");
+  }, T = (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?.());
+  }, A = (e, P) => {
+    const w = T(P);
+    p(), v(w);
+  }, B = () => {
+    n.current = !0, R?.();
+  }, I = () => {
+    i.current || (i.current = !0, D?.());
   };
-  return /* @__PURE__ */ g(P, {
+  return /* @__PURE__ */ x(_, {
     copy: {
       title: s,
-      close_aria: y
+      close_aria: F
     },
-    disablePrimaryButton: R,
-    isOpen: l,
-    onClose: M,
+    disablePrimaryButton: M,
+    isOpen: a,
+    onClose: A,
     onPrimaryAction: () => {
-      n.current = !0, x(t, c ? a.trim() : void 0), f();
+      n.current = !0, C(t, c ? l.trim() : void 0), p();
     },
-    onSecondaryAction: T,
-    primaryText: S,
-    secondaryText: C,
+    onSecondaryAction: B,
+    primaryText: k,
+    secondaryText: S,
     sx: {
       "& .MuiDialogContent-root": { py: 0 },
       "& .MuiDialog-paperScrollPaper": { bgcolor: "background.paper" },
@@ -58,50 +58,58 @@ var K = 250, O = ({ isOpen: l, onClose: h, onSubmit: x, title: s, options: r, ch
         }
       }
     },
-    children: [/* @__PURE__ */ o(G, { children: /* @__PURE__ */ o(H, {
-      "aria-label": s,
-      name: "feedback-radio-group",
-      onChange: (e) => m(e.target.value),
-      value: t,
-      children: r.map((e) => /* @__PURE__ */ o(z, {
-        control: /* @__PURE__ */ o(L, { sx: { "& .MuiSvgIcon-root": {
-          fontSize: 22,
-          color: "action.active"
-        } } }),
-        label: e,
-        sx: { "& .MuiFormControlLabel-label": {
-          color: "text.primary",
-          fontSize: 15
-        } },
-        value: e
-      }, e))
-    }) }), c && /* @__PURE__ */ g(_, {
-      sx: {
-        gap: 3,
-        mt: 4
-      },
-      children: [/* @__PURE__ */ o(E, {
-        autoFocus: !0,
-        maxRows: 4,
-        minRows: 4,
-        multiline: !0,
+    children: [
+      u && /* @__PURE__ */ o(g, {
+        sx: { mb: 8 },
+        variant: "body1",
+        children: u
+      }),
+      /* @__PURE__ */ o(H, { children: /* @__PURE__ */ o(K, {
+        "aria-label": s,
+        name: "feedback-radio-group",
         onChange: (e) => d(e.target.value),
-        onFocus: A,
-        slotProps: { htmlInput: { maxLength: v } },
-        value: a
-      }), u && /* @__PURE__ */ o(j, {
+        value: t,
+        children: r.map((e) => /* @__PURE__ */ o(E, {
+          control: /* @__PURE__ */ o(G, { sx: { "& .MuiSvgIcon-root": {
+            fontSize: 22,
+            color: "action.active"
+          } } }),
+          label: e,
+          sx: { "& .MuiFormControlLabel-label": {
+            color: "text.primary",
+            fontSize: 15
+          } },
+          value: e
+        }, e))
+      }) }),
+      c && /* @__PURE__ */ x(z, {
         sx: {
-          color: "text.secondary",
-          fontWeight: 400
+          gap: 3,
+          mt: 4
         },
-        variant: "subtitle2",
-        children: u
-      })]
-    })]
+        children: [/* @__PURE__ */ o(L, {
+          autoFocus: !0,
+          maxRows: 4,
+          minRows: 4,
+          multiline: !0,
+          onChange: (e) => f(e.target.value),
+          onFocus: I,
+          slotProps: { htmlInput: { maxLength: y } },
+          value: l
+        }), m && /* @__PURE__ */ o(g, {
+          sx: {
+            color: "text.secondary",
+            fontWeight: 400
+          },
+          variant: "subtitle2",
+          children: m
+        })]
+      })
+    ]
   });
 };
 export {
-  O as default
+  ee 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 { 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': {\n            outline: '2px solid',\n            outlineColor: 'primary.main',\n          },\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={\n                <Radio\n                  sx={{\n                    '& .MuiSvgIcon-root': {\n                      fontSize: 22,\n                      color: 'action.active',\n                    },\n                  }}\n                />\n              }\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,UACjB,SAAS;AAAA,UACT,cAAc;AAAA,QAChB;AAAA,MACF;AAAA,MACA,yBAAyB;AAAA,QACvB,QAAQ;AAAA,QACR,WAAW;AAAA,UAAE,SAAS;AAAA,UAAe,QAAQ;AAAA,QAAO;AAAA,MACtD;AAAA,IACF;AAAA,IAvBF,UAAA,CAyBE,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,SACE,gBAAA,EAAC,GAAD,EACE,IAAI,EACF,sBAAsB;AAAA,UACpB,UAAU;AAAA,UACV,OAAO;AAAA,QACT,EACF,EACD,CAAA;AAAA,QAGH,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"}
+{"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  /** Optional paragraph rendered between the title and the options (Figma feedback survey). */\n  description?: string\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  description,\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': {\n            outline: '2px solid',\n            outlineColor: 'primary.main',\n          },\n        },\n        '& .MuiButton-outlined': {\n          border: 'none',\n          '&:hover': { bgcolor: 'transparent', border: 'none' },\n        },\n      }}\n    >\n      {description && (\n        <Text sx={{ mb: 8 }} variant=\"body1\">\n          {description}\n        </Text>\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={\n                <Radio\n                  sx={{\n                    '& .MuiSvgIcon-root': {\n                      fontSize: 22,\n                      color: 'action.active',\n                    },\n                  }}\n                />\n              }\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":"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"}

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

@@ -0,0 +1,60 @@
+import { FeedbackDialogCloseReason } from './FeedbackDialog';
+/** Localized strings the modal renders — resolved by the caller (see FeedbackModalActionBlock). */
+export interface FeedbackModalContent {
+    /** Dialog title, e.g. "Can you tell us why?". */
+    title: string;
+    /** Optional paragraph under the title, e.g. "We'd love to hear why…". */
+    description?: string;
+    /** Survey reasons; the last option reveals the free-text detail field. */
+    options: string[];
+    /** Primary (Submit) button label. */
+    submitText: string;
+    /** Secondary (No thanks) button label. */
+    cancelText: string;
+    /** ARIA label for the dialog close button. */
+    closeAriaLabel: string;
+    /** Helper text under the detail field, e.g. "250 character limit". */
+    characterLimitLabel?: string;
+    /** Success snackbar message, e.g. "Your feedback has been submitted.". */
+    successMessage: string;
+    /** Error snackbar message, e.g. "Your feedback could not be submitted.". */
+    errorMessage: string;
+    /** Error snackbar action label, e.g. "Try Again". */
+    tryAgainText: string;
+    /** ARIA label for the snackbar close button. */
+    toastCloseAriaLabel: string;
+}
+interface FeedbackModalProps {
+    isOpen: boolean;
+    copy: FeedbackModalContent;
+    /**
+     * Fired when the survey is submitted. May return a promise: a rejection
+     * switches to the error snackbar (Figma `1941:167637`), whose Try Again
+     * action re-submits the same selection. Sync/resolved submissions show the
+     * success snackbar.
+     */
+    onSubmit: (option: string, detail?: string) => void | Promise<void>;
+    /**
+     * Fired when the whole flow ends: the dialog is dismissed without submitting
+     * (reason set), or either snackbar is closed / auto-hides (no reason).
+     */
+    onClose: (reason?: FeedbackDialogCloseReason) => void;
+    /**
+     * When provided, the secondary button acts as "Back" — it fires this instead
+     * of ending the flow via `onClose` (e.g. SurveyModal returning to its survey
+     * step). When absent, the secondary ("No thanks") ends the flow as before.
+     */
+    onBack?: () => void;
+}
+/**
+ * The CTA feedback drilldown (Figma `1941:192803`): a "Can you tell us why?"
+ * survey dialog followed by a success snackbar (Figma `1941:167636`) — or an
+ * error snackbar with a Try Again action (Figma `1941:167637`) when the
+ * submission fails.
+ *
+ * Purely presentational — copy arrives resolved via `FeedbackModalContent`;
+ * the `feedback_modal_block` action block wires it to the copy store, the beat
+ * actions, and the action-drawer session.
+ */
+declare const FeedbackModal: ({ copy, isOpen, onBack, onClose, onSubmit }: FeedbackModalProps) => import("react/jsx-runtime").JSX.Element;
+export default FeedbackModal;

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

@@ -0,0 +1,61 @@
+import g from "./shared/StatusSnackbar.es.js";
+import k from "./FeedbackDialog.es.js";
+import { useEffect as L, useRef as u, useState as T } from "react";
+import { Fragment as A, jsx as b, jsxs as S } from "react/jsx-runtime";
+var D = ({ copy: e, isOpen: a, onBack: l, onClose: m, onSubmit: d }) => {
+  const [t, i] = T("survey"), n = u(!1), s = u(null);
+  L(() => {
+    a && (i("survey"), n.current = !1, s.current = null);
+  }, [a]);
+  const f = async (r, c) => {
+    n.current = !0, s.current = {
+      option: r,
+      detail: c
+    };
+    try {
+      await d(r, c), i("success");
+    } catch {
+      i("error");
+    }
+  }, h = () => {
+    s.current && f(s.current.option, s.current.detail);
+  }, o = u(!1), v = l ? () => {
+    o.current = !0, l();
+  } : void 0, x = (r) => {
+    if (!n.current) {
+      if (o.current) {
+        o.current = !1;
+        return;
+      }
+      m(r);
+    }
+  };
+  return /* @__PURE__ */ S(A, { children: [/* @__PURE__ */ b(k, {
+    characterLimitLabel: e.characterLimitLabel,
+    closeAriaLabel: e.closeAriaLabel,
+    description: e.description,
+    isOpen: a && t === "survey" && !n.current,
+    onBackClick: v,
+    onClose: x,
+    onSubmit: (r, c) => {
+      f(r, c);
+    },
+    options: e.options,
+    primaryText: e.submitText,
+    secondaryText: e.cancelText,
+    title: e.title
+  }), /* @__PURE__ */ b(g, {
+    actionText: t === "error" ? e.tryAgainText : void 0,
+    closeAriaLabel: e.toastCloseAriaLabel,
+    message: t === "error" ? e.errorMessage : e.successMessage,
+    onActionClick: h,
+    onClose: () => m(),
+    open: a && t !== "survey",
+    severity: t === "error" ? "error" : "success"
+  })] });
+};
+export {
+  D as default
+};
+
+//# sourceMappingURL=FeedbackModal.es.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"FeedbackModal.es.js","names":[],"sources":["../../../src/insights-v2/components/FeedbackModal.tsx"],"sourcesContent":["import { useEffect, useRef, useState } from 'react'\n\nimport StatusSnackbar from './shared/StatusSnackbar'\n\nimport FeedbackDialog, { type FeedbackDialogCloseReason } from './FeedbackDialog'\n\n/** Localized strings the modal renders — resolved by the caller (see FeedbackModalActionBlock). */\nexport interface FeedbackModalContent {\n  /** Dialog title, e.g. \"Can you tell us why?\". */\n  title: string\n  /** Optional paragraph under the title, e.g. \"We'd love to hear why…\". */\n  description?: string\n  /** Survey reasons; the last option reveals the free-text detail field. */\n  options: string[]\n  /** Primary (Submit) button label. */\n  submitText: string\n  /** Secondary (No thanks) button label. */\n  cancelText: string\n  /** ARIA label for the dialog close button. */\n  closeAriaLabel: string\n  /** Helper text under the detail field, e.g. \"250 character limit\". */\n  characterLimitLabel?: string\n  /** Success snackbar message, e.g. \"Your feedback has been submitted.\". */\n  successMessage: string\n  /** Error snackbar message, e.g. \"Your feedback could not be submitted.\". */\n  errorMessage: string\n  /** Error snackbar action label, e.g. \"Try Again\". */\n  tryAgainText: string\n  /** ARIA label for the snackbar close button. */\n  toastCloseAriaLabel: string\n}\n\ninterface FeedbackModalProps {\n  isOpen: boolean\n  copy: FeedbackModalContent\n  /**\n   * Fired when the survey is submitted. May return a promise: a rejection\n   * switches to the error snackbar (Figma `1941:167637`), whose Try Again\n   * action re-submits the same selection. Sync/resolved submissions show the\n   * success snackbar.\n   */\n  onSubmit: (option: string, detail?: string) => void | Promise<void>\n  /**\n   * Fired when the whole flow ends: the dialog is dismissed without submitting\n   * (reason set), or either snackbar is closed / auto-hides (no reason).\n   */\n  onClose: (reason?: FeedbackDialogCloseReason) => void\n  /**\n   * When provided, the secondary button acts as \"Back\" — it fires this instead\n   * of ending the flow via `onClose` (e.g. SurveyModal returning to its survey\n   * step). When absent, the secondary (\"No thanks\") ends the flow as before.\n   */\n  onBack?: () => void\n}\n\ntype Phase = 'survey' | 'success' | 'error'\n\n/**\n * The CTA feedback drilldown (Figma `1941:192803`): a \"Can you tell us why?\"\n * survey dialog followed by a success snackbar (Figma `1941:167636`) — or an\n * error snackbar with a Try Again action (Figma `1941:167637`) when the\n * submission fails.\n *\n * Purely presentational — copy arrives resolved via `FeedbackModalContent`;\n * the `feedback_modal_block` action block wires it to the copy store, the beat\n * actions, and the action-drawer session.\n */\nconst FeedbackModal = ({ copy, isOpen, onBack, onClose, onSubmit }: FeedbackModalProps) => {\n  const [phase, setPhase] = useState<Phase>('survey')\n  // Ref, not state: the shared Dialog fires `onClose()` synchronously right\n  // after `onPrimaryAction()`, before the state update lands. Without the ref\n  // that close would end the whole flow and the snackbar could never show.\n  const hasSubmitted = useRef(false)\n  // Kept for the error snackbar's Try Again, which re-submits the selection.\n  const lastSubmission = useRef<{ option: string; detail?: string } | null>(null)\n\n  // A new flow session starts from the survey, not a stale snackbar.\n  useEffect(() => {\n    if (isOpen) {\n      setPhase('survey')\n      hasSubmitted.current = false\n      lastSubmission.current = null\n    }\n  }, [isOpen])\n\n  const submit = async (option: string, detail?: string) => {\n    hasSubmitted.current = true\n    lastSubmission.current = { option, detail }\n    try {\n      await onSubmit(option, detail)\n      setPhase('success')\n    } catch {\n      setPhase('error')\n    }\n  }\n\n  const retry = () => {\n    if (lastSubmission.current) {\n      void submit(lastSubmission.current.option, lastSubmission.current.detail)\n    }\n  }\n\n  // Ref for the same reason as hasSubmitted: the back-click's trailing Dialog\n  // close fires synchronously, before any state lands.\n  const backTaken = useRef(false)\n\n  const handleBack = onBack\n    ? () => {\n        backTaken.current = true\n        onBack()\n      }\n    : undefined\n\n  // Only user-initiated closes (X / backdrop / escape / No thanks) end the\n  // flow — the post-submit close hands over to the snackbar, and a back-click's\n  // trailing close belongs to the caller's back navigation.\n  const handleDialogClose = (reason?: FeedbackDialogCloseReason) => {\n    if (hasSubmitted.current) return\n    if (backTaken.current) {\n      backTaken.current = false\n      return\n    }\n    onClose(reason)\n  }\n\n  return (\n    <>\n      <FeedbackDialog\n        characterLimitLabel={copy.characterLimitLabel}\n        closeAriaLabel={copy.closeAriaLabel}\n        description={copy.description}\n        isOpen={isOpen && phase === 'survey' && !hasSubmitted.current}\n        onBackClick={handleBack}\n        onClose={handleDialogClose}\n        onSubmit={(option, detail) => void submit(option, detail)}\n        options={copy.options}\n        primaryText={copy.submitText}\n        secondaryText={copy.cancelText}\n        title={copy.title}\n      />\n      <StatusSnackbar\n        actionText={phase === 'error' ? copy.tryAgainText : undefined}\n        closeAriaLabel={copy.toastCloseAriaLabel}\n        message={phase === 'error' ? copy.errorMessage : copy.successMessage}\n        onActionClick={retry}\n        onClose={() => onClose()}\n        open={isOpen && phase !== 'survey'}\n        severity={phase === 'error' ? 'error' : 'success'}\n      />\n    </>\n  )\n}\n\nexport default FeedbackModal\n"],"mappings":";;;;AAmEA,IAAM,IAAA,CAAiB,EAAE,MAAA,GAAM,QAAA,GAAQ,QAAA,GAAQ,SAAA,GAAS,UAAA,EAAA,MAAmC;AACzF,QAAM,CAAC,GAAO,CAAA,IAAY,EAAgB,QAAQ,GAI5C,IAAe,EAAO,EAAK,GAE3B,IAAiB,EAAmD,IAAI;AAG9E,EAAA,EAAA,MAAgB;AACd,IAAI,MACF,EAAS,QAAQ,GACjB,EAAa,UAAU,IACvB,EAAe,UAAU;AAAA,EAE7B,GAAG,CAAC,CAAM,CAAC;AAEX,QAAM,IAAS,OAAO,GAAgB,MAAoB;AACxD,IAAA,EAAa,UAAU,IACvB,EAAe,UAAU;AAAA,MAAE,QAAA;AAAA,MAAQ,QAAA;AAAA,IAAO;AAC1C,QAAI;AACF,YAAM,EAAS,GAAQ,CAAM,GAC7B,EAAS,SAAS;AAAA,IACpB,QAAQ;AACN,MAAA,EAAS,OAAO;AAAA,IAClB;AAAA,EACF,GAEM,IAAA,MAAc;AAClB,IAAI,EAAe,WACjB,EAAY,EAAe,QAAQ,QAAQ,EAAe,QAAQ,MAAM;AAAA,EAE5E,GAIM,IAAY,EAAO,EAAK,GAExB,IAAa,IAAA,MACT;AACJ,IAAA,EAAU,UAAU,IACpB,EAAO;AAAA,EACT,IACA,QAKE,IAAA,CAAqB,MAAuC;AAChE,QAAI,CAAA,EAAa,SACjB;AAAA,UAAI,EAAU,SAAS;AACrB,QAAA,EAAU,UAAU;AACpB;AAAA,MACF;AACA,MAAA,EAAQ,CAAM;AAAA;AAAA,EAChB;AAEA,SACE,gBAAA,EAAA,GAAA,EAAA,UAAA,CACE,gBAAA,EAAC,GAAD;AAAA,IACE,qBAAqB,EAAK;AAAA,IAC1B,gBAAgB,EAAK;AAAA,IACrB,aAAa,EAAK;AAAA,IAClB,QAAQ,KAAU,MAAU,YAAY,CAAC,EAAa;AAAA,IACtD,aAAa;AAAA,IACb,SAAS;AAAA,IACT,UAAA,CAAW,GAAQ,MAAA;AAAW,MAAK,EAAO,GAAQ,CAAM;AAAA;AAAA,IACxD,SAAS,EAAK;AAAA,IACd,aAAa,EAAK;AAAA,IAClB,eAAe,EAAK;AAAA,IACpB,OAAO,EAAK;AAAA,EACb,CAAA,GACD,gBAAA,EAAC,GAAD;AAAA,IACE,YAAY,MAAU,UAAU,EAAK,eAAe;AAAA,IACpD,gBAAgB,EAAK;AAAA,IACrB,SAAS,MAAU,UAAU,EAAK,eAAe,EAAK;AAAA,IACtD,eAAe;AAAA,IACf,SAAA,MAAe,EAAQ;AAAA,IACvB,MAAM,KAAU,MAAU;AAAA,IAC1B,UAAU,MAAU,UAAU,UAAU;AAAA,EACzC,CAAA,CACD,EAAA,CAAA;AAEN"}

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

@@ -0,0 +1,65 @@
+/** One survey row (Figma `<UtilityRow>`). Rows act immediately on click. */
+export interface SurveyModalOption {
+    /** Overline above the row label, e.g. "Yes," / "No,". */
+    overline: string;
+    /** Row label, e.g. "This looks correct." */
+    label: string;
+    /**
+     * Row behavior + glyph: `positive` (green check_circle) submits the label
+     * right away; `negative` (red cancel) opens the reasons dialog.
+     */
+    tone: 'positive' | 'negative';
+}
+/** Localized strings the modal renders — resolved by the caller (see SurveyModalActionBlock). */
+export interface SurveyModalContent {
+    /** Survey dialog title, e.g. "Does this look right?". */
+    title: string;
+    options: SurveyModalOption[];
+    /** Reasons dialog primary (Submit) button label. */
+    submitText: string;
+    /** ARIA label for the dialog close buttons. */
+    closeAriaLabel: string;
+    /** Reasons dialog title (negative path), e.g. "This looks wrong". */
+    reasonsTitle: string;
+    /** Reasons dialog options; the last one reveals the detail text field. */
+    reasonOptions: string[];
+    /** Reasons dialog secondary (Back) label. */
+    backText: string;
+    /** Helper text under the reasons detail field. */
+    characterLimitLabel?: string;
+    /** Success snackbar message (Figma 1941:212643). */
+    successMessage: string;
+    /** Error snackbar message (Figma 1941:212644). */
+    errorMessage: string;
+    /** Error snackbar retry label, e.g. "Try Again". */
+    tryAgainText: string;
+    /** ARIA label for the snackbar close button. */
+    toastCloseAriaLabel: string;
+}
+interface SurveyModalProps {
+    isOpen: boolean;
+    copy: SurveyModalContent;
+    /**
+     * Fired when an answer is submitted — the positive row's label, or a
+     * reasons-dialog selection (with optional detail). May return a promise: a
+     * rejection switches to the error snackbar, whose Try Again re-submits.
+     */
+    onSubmit: (option: string, detail?: string) => void | Promise<void>;
+    /** Fired when the whole flow ends (dialogs dismissed or a snackbar closed). */
+    onClose: () => void;
+}
+/**
+ * The confirmation survey drilldown (Figma `1941:212640`, Upcoming
+ * Subscriptions "Does this look right?"):
+ *
+ * - the POSITIVE row submits immediately and shows the success snackbar
+ *   (`1941:212643`) — or the error snackbar with Try Again (`1941:212644`);
+ * - the NEGATIVE row opens the reasons dialog (`1941:212642`, a FeedbackDialog:
+ *   radios + Back/Submit), whose submission feeds the same snackbars.
+ *
+ * Purely presentational — copy arrives resolved via `SurveyModalContent`; the
+ * `survey_modal_block` action block wires it to the copy store, the beat
+ * actions, and the action-drawer session.
+ */
+declare const SurveyModal: ({ copy, isOpen, onClose, onSubmit }: SurveyModalProps) => import("react/jsx-runtime").JSX.Element;
+export default SurveyModal;

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

@@ -0,0 +1,138 @@
+import T from "../../common/components/dialog/Dialog.es.js";
+import C from "./shared/StatusSnackbar.es.js";
+import L from "./FeedbackModal.es.js";
+import { useEffect as k, useRef as d, useState as M } from "react";
+import m from "@mui/material/Stack";
+import { Text as h } from "@mxenabled/mxui";
+import { Icon as b } from "@mxenabled/mx-icons";
+import { Fragment as p, jsx as t, jsxs as l } from "react/jsx-runtime";
+import y from "@mui/material/Divider";
+import S from "@mui/material/ButtonBase";
+var w = {
+  positive: {
+    color: "success.main",
+    name: "check_circle"
+  },
+  negative: {
+    color: "error.main",
+    name: "cancel"
+  }
+}, W = ({ copy: e, isOpen: a, onClose: c, onSubmit: f }) => {
+  const [s, o] = M("survey"), u = d(!1), n = d(null);
+  k(() => {
+    a && (o("survey"), u.current = !1, n.current = null);
+  }, [a]);
+  const x = async (r, i) => {
+    u.current = !0, n.current = {
+      option: r,
+      detail: i
+    };
+    try {
+      await f(r, i), o("success");
+    } catch {
+      o("error");
+    }
+  }, g = () => {
+    n.current && x(n.current.option, n.current.detail);
+  }, v = (r) => {
+    r.tone === "positive" ? x(r.label) : o("reasons");
+  }, A = () => {
+    u.current || c();
+  };
+  return /* @__PURE__ */ l(p, { children: [
+    /* @__PURE__ */ t(T, {
+      copy: {
+        title: e.title,
+        close_aria: e.closeAriaLabel
+      },
+      isOpen: a && s === "survey",
+      onClose: A,
+      showActions: !1,
+      sx: {
+        "& .MuiDialogContent-root": { py: 0 },
+        "& .MuiButton-outlined": {
+          border: "none",
+          "&:hover": {
+            bgcolor: "transparent",
+            border: "none"
+          }
+        }
+      },
+      children: /* @__PURE__ */ t(m, { children: e.options.map((r) => {
+        const i = w[r.tone];
+        return /* @__PURE__ */ l(m, { children: [/* @__PURE__ */ t(y, {}), /* @__PURE__ */ l(S, {
+          onClick: () => v(r),
+          sx: {
+            alignItems: "center",
+            display: "flex",
+            gap: 12,
+            justifyContent: "flex-start",
+            px: 4,
+            py: 14,
+            textAlign: "left",
+            width: "100%"
+          },
+          children: [
+            /* @__PURE__ */ t(b, {
+              name: i.name,
+              size: 24,
+              sx: { color: i.color }
+            }),
+            /* @__PURE__ */ l(m, {
+              sx: {
+                flex: 1,
+                minWidth: 0
+              },
+              children: [/* @__PURE__ */ t(h, {
+                color: "text.primary",
+                variant: "caption",
+                children: r.overline
+              }), /* @__PURE__ */ t(h, {
+                sx: { fontWeight: 600 },
+                variant: "body1",
+                children: r.label
+              })]
+            }),
+            /* @__PURE__ */ t(b, {
+              name: "chevron_right",
+              size: 20,
+              sx: { color: "text.primary" }
+            })
+          ]
+        })] }, r.label);
+      }) })
+    }),
+    /* @__PURE__ */ t(L, {
+      copy: {
+        title: e.reasonsTitle,
+        options: e.reasonOptions,
+        submitText: e.submitText,
+        cancelText: e.backText,
+        closeAriaLabel: e.closeAriaLabel,
+        characterLimitLabel: e.characterLimitLabel,
+        successMessage: e.successMessage,
+        errorMessage: e.errorMessage,
+        tryAgainText: e.tryAgainText,
+        toastCloseAriaLabel: e.toastCloseAriaLabel
+      },
+      isOpen: a && s === "reasons",
+      onBack: () => o("survey"),
+      onClose: () => c(),
+      onSubmit: f
+    }),
+    /* @__PURE__ */ t(C, {
+      actionText: s === "error" ? e.tryAgainText : void 0,
+      closeAriaLabel: e.toastCloseAriaLabel,
+      message: s === "error" ? e.errorMessage : e.successMessage,
+      onActionClick: g,
+      onClose: () => c(),
+      open: a && (s === "success" || s === "error"),
+      severity: s === "error" ? "error" : "success"
+    })
+  ] });
+};
+export {
+  W as default
+};
+
+//# sourceMappingURL=SurveyModal.es.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"SurveyModal.es.js","names":[],"sources":["../../../src/insights-v2/components/SurveyModal.tsx"],"sourcesContent":["import { useEffect, useRef, useState } from 'react'\n\nimport ButtonBase from '@mui/material/ButtonBase'\nimport Divider from '@mui/material/Divider'\nimport Stack from '@mui/material/Stack'\n\nimport { Icon } from '@mxenabled/mx-icons'\nimport { Text } from '@mxenabled/mxui'\n\nimport { Dialog } from '../../common'\n\nimport FeedbackModal from './FeedbackModal'\nimport StatusSnackbar from './shared/StatusSnackbar'\n\n/** One survey row (Figma `<UtilityRow>`). Rows act immediately on click. */\nexport interface SurveyModalOption {\n  /** Overline above the row label, e.g. \"Yes,\" / \"No,\". */\n  overline: string\n  /** Row label, e.g. \"This looks correct.\" */\n  label: string\n  /**\n   * Row behavior + glyph: `positive` (green check_circle) submits the label\n   * right away; `negative` (red cancel) opens the reasons dialog.\n   */\n  tone: 'positive' | 'negative'\n}\n\n/** Localized strings the modal renders — resolved by the caller (see SurveyModalActionBlock). */\nexport interface SurveyModalContent {\n  /** Survey dialog title, e.g. \"Does this look right?\". */\n  title: string\n  options: SurveyModalOption[]\n  /** Reasons dialog primary (Submit) button label. */\n  submitText: string\n  /** ARIA label for the dialog close buttons. */\n  closeAriaLabel: string\n  /** Reasons dialog title (negative path), e.g. \"This looks wrong\". */\n  reasonsTitle: string\n  /** Reasons dialog options; the last one reveals the detail text field. */\n  reasonOptions: string[]\n  /** Reasons dialog secondary (Back) label. */\n  backText: string\n  /** Helper text under the reasons detail field. */\n  characterLimitLabel?: string\n  /** Success snackbar message (Figma 1941:212643). */\n  successMessage: string\n  /** Error snackbar message (Figma 1941:212644). */\n  errorMessage: string\n  /** Error snackbar retry label, e.g. \"Try Again\". */\n  tryAgainText: string\n  /** ARIA label for the snackbar close button. */\n  toastCloseAriaLabel: string\n}\n\ninterface SurveyModalProps {\n  isOpen: boolean\n  copy: SurveyModalContent\n  /**\n   * Fired when an answer is submitted — the positive row's label, or a\n   * reasons-dialog selection (with optional detail). May return a promise: a\n   * rejection switches to the error snackbar, whose Try Again re-submits.\n   */\n  onSubmit: (option: string, detail?: string) => void | Promise<void>\n  /** Fired when the whole flow ends (dialogs dismissed or a snackbar closed). */\n  onClose: () => void\n}\n\ntype Phase = 'survey' | 'reasons' | 'success' | 'error'\n\nconst TONE_ICON: Record<SurveyModalOption['tone'], { color: string; name: string }> = {\n  positive: { color: 'success.main', name: 'check_circle' },\n  negative: { color: 'error.main', name: 'cancel' },\n}\n\n/**\n * The confirmation survey drilldown (Figma `1941:212640`, Upcoming\n * Subscriptions \"Does this look right?\"):\n *\n * - the POSITIVE row submits immediately and shows the success snackbar\n *   (`1941:212643`) — or the error snackbar with Try Again (`1941:212644`);\n * - the NEGATIVE row opens the reasons dialog (`1941:212642`, a FeedbackDialog:\n *   radios + Back/Submit), whose submission feeds the same snackbars.\n *\n * Purely presentational — copy arrives resolved via `SurveyModalContent`; the\n * `survey_modal_block` action block wires it to the copy store, the beat\n * actions, and the action-drawer session.\n */\nconst SurveyModal = ({ copy, isOpen, onClose, onSubmit }: SurveyModalProps) => {\n  const [phase, setPhase] = useState<Phase>('survey')\n  // Guards the survey Dialog's trailing `onClose` after a row acted — the row\n  // click hands over to the snackbar / reasons dialog, not a flow end.\n  const actionTaken = useRef(false)\n  // Kept for the error snackbar's Try Again, which re-submits the selection.\n  const lastSubmission = useRef<{ option: string; detail?: string } | null>(null)\n\n  // A fresh session starts from the survey.\n  useEffect(() => {\n    if (isOpen) {\n      setPhase('survey')\n      actionTaken.current = false\n      lastSubmission.current = null\n    }\n  }, [isOpen])\n\n  const submit = async (option: string, detail?: string) => {\n    actionTaken.current = true\n    lastSubmission.current = { option, detail }\n    try {\n      await onSubmit(option, detail)\n      setPhase('success')\n    } catch {\n      setPhase('error')\n    }\n  }\n\n  const retry = () => {\n    if (lastSubmission.current) {\n      void submit(lastSubmission.current.option, lastSubmission.current.detail)\n    }\n  }\n\n  const handleRowClick = (option: SurveyModalOption) => {\n    if (option.tone === 'positive') {\n      void submit(option.label)\n    } else {\n      setPhase('reasons')\n    }\n  }\n\n  const handleSurveyClose = () => {\n    if (actionTaken.current) return\n    onClose()\n  }\n\n  return (\n    <>\n      <Dialog\n        copy={{ title: copy.title, close_aria: copy.closeAriaLabel }}\n        isOpen={isOpen && phase === 'survey'}\n        onClose={handleSurveyClose}\n        // Figma 1941:212640: the DialogActions row is hidden — the utility\n        // rows are the only actions; the flow closes via X or a row.\n        showActions={false}\n        sx={{\n          '& .MuiDialogContent-root': { py: 0 },\n          '& .MuiButton-outlined': {\n            border: 'none',\n            '&:hover': { bgcolor: 'transparent', border: 'none' },\n          },\n        }}\n      >\n        <Stack>\n          {copy.options.map((option) => {\n            const icon = TONE_ICON[option.tone]\n\n            return (\n              <Stack key={option.label}>\n                <Divider />\n                <ButtonBase\n                  onClick={() => handleRowClick(option)}\n                  sx={{\n                    alignItems: 'center',\n                    display: 'flex',\n                    gap: 12,\n                    justifyContent: 'flex-start',\n                    px: 4,\n                    py: 14,\n                    textAlign: 'left',\n                    width: '100%',\n                  }}\n                >\n                  <Icon name={icon.name} size={24} sx={{ color: icon.color }} />\n                  <Stack sx={{ flex: 1, minWidth: 0 }}>\n                    <Text color=\"text.primary\" variant=\"caption\">\n                      {option.overline}\n                    </Text>\n                    <Text sx={{ fontWeight: 600 }} variant=\"body1\">\n                      {option.label}\n                    </Text>\n                  </Stack>\n                  <Icon name=\"chevron_right\" size={20} sx={{ color: 'text.primary' }} />\n                </ButtonBase>\n              </Stack>\n            )\n          })}\n        </Stack>\n      </Dialog>\n\n      {/* Negative path: the whole FeedbackModal — reasons dialog + its own\n          success/error snackbars with Try Again. Back returns to the survey;\n          its onClose fires only when the sub-flow truly ends. */}\n      <FeedbackModal\n        copy={{\n          title: copy.reasonsTitle,\n          options: copy.reasonOptions,\n          submitText: copy.submitText,\n          cancelText: copy.backText,\n          closeAriaLabel: copy.closeAriaLabel,\n          characterLimitLabel: copy.characterLimitLabel,\n          successMessage: copy.successMessage,\n          errorMessage: copy.errorMessage,\n          tryAgainText: copy.tryAgainText,\n          toastCloseAriaLabel: copy.toastCloseAriaLabel,\n        }}\n        isOpen={isOpen && phase === 'reasons'}\n        onBack={() => setPhase('survey')}\n        onClose={() => onClose()}\n        onSubmit={onSubmit}\n      />\n\n      <StatusSnackbar\n        actionText={phase === 'error' ? copy.tryAgainText : undefined}\n        closeAriaLabel={copy.toastCloseAriaLabel}\n        message={phase === 'error' ? copy.errorMessage : copy.successMessage}\n        onActionClick={retry}\n        onClose={() => onClose()}\n        open={isOpen && (phase === 'success' || phase === 'error')}\n        severity={phase === 'error' ? 'error' : 'success'}\n      />\n    </>\n  )\n}\n\nexport default SurveyModal\n"],"mappings":"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"}

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

@@ -1,12 +1,13 @@
+import { Theme } from '@mui/material/styles';
 /**
- * Decorative celebration washes used behind confetti-backed "complete"/milestone states.
- * Shared so both the block layer (`AccountBlock`) and the presentational
- * components/stories reference one source instead of re-declaring the string.
+ * Decorative slot washes shared by the block layouts and the presentational components, so
+ * one source holds each gradient. The 20%–25% washes layer over `background.paper` via
+ * `backgroundImage`; `DISCOVERED_ACCOUNTS_GRADIENT` is opaque and stands alone.
  *
- * - WARM_LIME_ACCENT_GRADIENT: 20%-opacity warm→lime wash; layer over `background.paper`
- *   for a tinted background. Used for merchant categorization and deposit celebration states.
- * - CELEBRATION_GRADIENT: 20%-opacity warm→pink wash; layer over `background.paper`.
- * - DISCOVERED_ACCOUNTS_GRADIENT: Fully opaque (100% opacity); use as the sole background.
+ * - WARM_LIME_ACCENT_GRADIENT: merchant categorization and deposit celebration states.
+ * - CELEBRATION_GRADIENT / ACCOUNT_CONNECTED_GRADIENT: balance milestones, account connected.
+ * - WARNING_WASH_GRADIENT: a flagged charge (Unexpected Subscription Payment).
+ * - getPrimaryWashGradient(theme): pending connect / detected subscription, from the palette.
  */
 /**
  * Warm → lime accent wash at 20% opacity. Used as a tinted background behind
@@ -23,3 +24,14 @@ export declare const DISCOVERED_ACCOUNTS_GRADIENT = "linear-gradient(200.73deg,
  * `background` shorthand — a 20% gradient over transparency renders wrong.
  */
 export declare const ACCOUNT_CONNECTED_GRADIENT = "linear-gradient(257deg, rgba(255, 224, 153, 0.2) 1.86%, rgba(255, 129, 230, 0.2) 101.54%)";
+/**
+ * Orange → red-orange wash at 25% opacity behind a flagged charge (Unexpected Subscription
+ * Payment). Figma "Warning Gradient 1": a bespoke two-stop blend with no palette token, so it
+ * stays a literal like the other washes here rather than being derived from `palette.warning`.
+ */
+export declare const WARNING_WASH_GRADIENT = "linear-gradient(201deg, rgba(255, 170, 0, 0.25) 1.86%, rgba(255, 68, 0, 0.25) 101.54%)";
+/**
+ * Blue slot wash behind a pending connect / detected-subscription row: `primary.light` →
+ * `primary.main` at 75% over paper, built from the live palette so it follows the theme.
+ */
+export declare const getPrimaryWashGradient: ({ palette }: Theme) => string;