@mx-cartographer/experiences 9.5.3 → 9.6.0-alpha-ram1-connect-widget-testing

package/CHANGELOG.md

@@ -1,3 +1,16 @@
+## [9.5.5] - 10-12-2026
+
+- **ADDED** - Three Insights V2 CTA action blocks, registered in `actionBlocksKey`/`blocks`: `feedback_modal_block` (`FeedbackModalActionBlock`) renders a survey dialog with a success/error `StatusSnackbar` on top of the action drawer; `connection_detail_block` (`ConnectionDetailActionBlock`) shows the connection-details education drilldown (`ConnectionDetailDrillDown`); and `connect_widget_block` (`ConnectWidgetActionBlock`) boots MX's Connect widget (web-widget-sdk iframe) inside the drawer. Added `feedback_modal` and `connection_details` copy under `insights_feed`, exported the new `FeedbackModal`, `StatusSnackbar`, and `ConnectionDetailDrillDown` components, and added tests and stories (WEC-1879)
+- **FIXED** - A CTA pointing at a 'modal' action block (`feedback_modal_block`, `survey_modal_block`) no longer also opens an empty action Drawer behind/under its dialog; `ActionBlockEntry` gains a `presentation?: 'drawer' | 'modal'` field and `ActionBlockLayer` skips the Drawer wrapper entirely for `'modal'` entries (WEC-1879)
+- **ADDED** - Storybook stories for `FeedbackModalActionBlock`, `ConnectionDetailActionBlock`, `ConnectWidgetActionBlock`, and `SurveyModalActionBlock`, each rendered through `BaseLayout` with a CTA that opens the real action-block registry path (WEC-1879)
+
+## [9.5.4] - 10-09-2026
+
+- **ADDED** - `amount_input_modal_block`, the first modal action block: edits one whole-dollar setting in a dialog, picked by the CTA variant. `low_balance_threshold` (Low Account Balance "Edit Alert Settings") saves the threshold on the account's low-balance alert profile; `safety_net` (Savings Opportunity V2 "Set Reminder" / "Adjust Reminder") saves the safety net on the user insight profile. Saves run through `useCtaHandler`. Copy under `insights_feed.amount_input_modal`; mock beats, stories and `docs/action-blocks/amount-input-modal-block.md`.
+- **ADDED** - `ActionBlockEntry.presentation: 'modal'`: `ActionBlockLayer` renders such a block without the drawer, and only while it is open for its beat.
+- **ADDED** - Optional `CurrencyDialog` props `subtitle`, `errorText` and `isPrimaryDisabled`; `content` now accepts a node. Its helper text (validation or save error) is now announced with `role="alert"`. Existing callers are otherwise unchanged.
+- **CHANGED** - `hasDrawerBlock` moved to `insights-v2/mappings/hasDrawerBlock.ts` (still re-exported from `mappings/blocks`) so action blocks can import `ctaActions` without an import cycle.
+
 ## [9.5.3] - 10-09-2026
 
 - **CHANGED** - Repeating-transaction create flows show Sherlock-ineligible rows disabled instead of hiding them; `SelectTransaction` drives `TransactionList`'s new `isRowDisabled` prop instead of `filter` (MEW-4143)

package/dist/common/components/ConnectDrawer.es.js

@@ -1,53 +1,26 @@
-import { useAccountStore as _, useConnectStore as b, useGlobalCopyStore as g } from "../context/hooks.es.js";
-import x from "./drawer/Drawer.es.js";
-import { CONNECT_WIDGET_ID as a, MemberConnectionStatus as c } from "../constants/Connect.es.js";
-import i from "./ConnectStatus.es.js";
-import r from "react";
-import { observer as L } from "mobx-react-lite";
-import { jsx as n, jsxs as D } from "react/jsx-runtime";
-import { useTheme as v } from "@mui/material/styles";
-import { ConnectWidget as w } from "@mxenabled/web-widget-sdk";
-var y = ({ loadWidgetProps: l, onClose: u, showConnectWidget: o, title: m }) => {
-  let s;
-  const { refreshAccounts: f } = _(), { loadWidget: d } = b(), { connect: p } = g(), [C, e] = r.useState(!1), [h, t] = r.useState(!1), { palette: { mode: S } } = v();
-  return r.useEffect(() => (o ? (e(!0), d({
-    mode: S,
-    ...l
-  }).then((E) => {
-    s = new w({
-      container: `#${a}`,
-      style: {
-        border: "none",
-        height: "calc(100% - 62px)",
-        maxWidth: "450px",
-        position: "absolute",
-        width: "100%"
-      },
-      url: E.url,
-      onSsoUrlLoadError: () => {
-        e(!1), t(!0);
-      },
-      onLoad: () => {
-        e(!1), t(!1);
-      }
-    });
-  })) : (e(!1), t(!1)), () => {
-    s?.unmount();
-  }), [o]), /* @__PURE__ */ n(x, {
-    ariaLabelClose: p.close_manage_connection_aria,
+import { useAccountStore as i, useGlobalCopyStore as m } from "../context/hooks.es.js";
+import s from "./drawer/Drawer.es.js";
+import l from "./ConnectWidgetPanel.es.js";
+import "react";
+import { observer as f } from "mobx-react-lite";
+import { jsx as r } from "react/jsx-runtime";
+var p = ({ loadWidgetProps: e, onClose: t, showConnectWidget: o, title: n }) => {
+  const { refreshAccounts: a } = i(), { connect: c } = m();
+  return /* @__PURE__ */ r(s, {
+    ariaLabelClose: c.close_manage_connection_aria,
     isOpen: o,
     onClose: () => {
-      u(), f();
+      t(), a();
     },
-    title: m,
-    children: /* @__PURE__ */ D("div", {
-      id: a,
-      children: [h && /* @__PURE__ */ n(i, { status: c.Error }), C && /* @__PURE__ */ n(i, { status: c.Loading })]
+    title: n,
+    children: /* @__PURE__ */ r(l, {
+      isActive: o,
+      loadWidgetProps: e
     })
   });
-}, M = L(y);
+}, D = f(p);
 export {
-  M as default
+  D as default
 };
 
 //# sourceMappingURL=ConnectDrawer.es.js.map

package/dist/common/components/ConnectDrawer.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"ConnectDrawer.es.js","names":[],"sources":["../../../src/common/components/ConnectDrawer.tsx"],"sourcesContent":["import React from 'react'\nimport { observer } from 'mobx-react-lite'\nimport { useTheme } from '@mui/material/styles'\nimport { ConnectWidget } from '@mxenabled/web-widget-sdk'\n\nimport ConnectStatus from './ConnectStatus'\nimport { Drawer, useAccountStore, useGlobalCopyStore } from '../../common'\nimport { MemberConnectionStatus } from '../constants/Connect'\nimport { CONNECT_WIDGET_ID } from '../constants/Connect'\nimport { useConnectStore } from '../context/hooks'\n\ninterface ConnectDrawerProps {\n  loadWidgetProps?: object\n  onClose: () => void\n  showConnectWidget: boolean\n  title: string\n}\n\nconst ConnectDrawer: React.FC<ConnectDrawerProps> = ({\n  loadWidgetProps,\n  onClose,\n  showConnectWidget,\n  title,\n}) => {\n  let connectWidget: ConnectWidget\n\n  const { refreshAccounts } = useAccountStore()\n  const { loadWidget } = useConnectStore()\n  const { connect: connectCopy } = useGlobalCopyStore()\n  const [isLoading, setIsLoading] = React.useState(false)\n  const [hasError, setHasError] = React.useState(false)\n  const {\n    palette: { mode },\n  } = useTheme()\n\n  React.useEffect(() => {\n    if (showConnectWidget) {\n      setIsLoading(true)\n      loadWidget({ mode: mode, ...loadWidgetProps }).then((res) => {\n        connectWidget = new ConnectWidget({\n          container: `#${CONNECT_WIDGET_ID}`,\n          style: {\n            border: 'none',\n            height: 'calc(100% - 62px)',\n            maxWidth: '450px',\n            position: 'absolute',\n            width: '100%',\n          },\n          url: res.url,\n          onSsoUrlLoadError: () => {\n            setIsLoading(false)\n            setHasError(true)\n          },\n          onLoad: () => {\n            setIsLoading(false)\n            setHasError(false)\n          },\n        })\n      })\n    } else {\n      setIsLoading(false)\n      setHasError(false)\n    }\n\n    return () => {\n      connectWidget?.unmount()\n    }\n  }, [showConnectWidget])\n\n  return (\n    <Drawer\n      ariaLabelClose={connectCopy.close_manage_connection_aria}\n      isOpen={showConnectWidget}\n      onClose={() => {\n        onClose()\n        refreshAccounts()\n      }}\n      title={title}\n    >\n      <div id={CONNECT_WIDGET_ID}>\n        {hasError && <ConnectStatus status={MemberConnectionStatus.Error} />}\n        {isLoading && <ConnectStatus status={MemberConnectionStatus.Loading} />}\n      </div>\n    </Drawer>\n  )\n}\n\nexport default observer(ConnectDrawer)\n"],"mappings":";;;;;;;;;AAkBA,IAAM,IAAA,CAA+C,EACnD,iBAAA,GACA,SAAA,GACA,mBAAA,GACA,OAAA,EAAA,MACI;AACJ,MAAI;AAEJ,QAAM,EAAE,iBAAA,EAAA,IAAoB,EAAgB,GACtC,EAAE,YAAA,EAAA,IAAe,EAAgB,GACjC,EAAE,SAAS,EAAA,IAAgB,EAAmB,GAC9C,CAAC,GAAW,CAAA,IAAgB,EAAM,SAAS,EAAK,GAChD,CAAC,GAAU,CAAA,IAAe,EAAM,SAAS,EAAK,GAC9C,EACJ,SAAS,EAAE,MAAA,EAAA,EAAA,IACT,EAAS;AAEb,SAAA,EAAM,UAAA,OACA,KACF,EAAa,EAAI,GACjB,EAAW;AAAA,IAAQ,MAAA;AAAA,IAAM,GAAG;AAAA,EAAgB,CAAC,EAAE,KAAA,CAAM,MAAQ;AAC3D,IAAA,IAAgB,IAAI,EAAc;AAAA,MAChC,WAAW,IAAI,CAAA;AAAA,MACf,OAAO;AAAA,QACL,QAAQ;AAAA,QACR,QAAQ;AAAA,QACR,UAAU;AAAA,QACV,UAAU;AAAA,QACV,OAAO;AAAA,MACT;AAAA,MACA,KAAK,EAAI;AAAA,MACT,mBAAA,MAAyB;AACvB,QAAA,EAAa,EAAK,GAClB,EAAY,EAAI;AAAA,MAClB;AAAA,MACA,QAAA,MAAc;AACZ,QAAA,EAAa,EAAK,GAClB,EAAY,EAAK;AAAA,MACnB;AAAA,IACF,CAAC;AAAA,EACH,CAAC,MAED,EAAa,EAAK,GAClB,EAAY,EAAK,IAGnB,MAAa;AACX,IAAA,GAAe,QAAQ;AAAA,EACzB,IACC,CAAC,CAAiB,CAAC,GAGpB,gBAAA,EAAC,GAAD;AAAA,IACE,gBAAgB,EAAY;AAAA,IAC5B,QAAQ;AAAA,IACR,SAAA,MAAe;AACb,MAAA,EAAQ,GACR,EAAgB;AAAA,IAClB;AAAA,IACO,OAAA;AAAA,IAEP,UAAA,gBAAA,EAAC,OAAD;AAAA,MAAK,IAAI;AAAA,MAAT,UAAA,CACG,KAAY,gBAAA,EAAC,GAAD,EAAe,QAAQ,EAAuB,MAAQ,CAAA,GAClE,KAAa,gBAAA,EAAC,GAAD,EAAe,QAAQ,EAAuB,QAAU,CAAA,CACnE;AAAA;EACC,CAAA;AAEZ,GAEA,IAAe,EAAS,CAAa"}
+{"version":3,"file":"ConnectDrawer.es.js","names":[],"sources":["../../../src/common/components/ConnectDrawer.tsx"],"sourcesContent":["import React from 'react'\nimport { observer } from 'mobx-react-lite'\n\nimport ConnectWidgetPanel from './ConnectWidgetPanel'\nimport { Drawer, useAccountStore, useGlobalCopyStore } from '../../common'\n\ninterface ConnectDrawerProps {\n  loadWidgetProps?: object\n  onClose: () => void\n  showConnectWidget: boolean\n  title: string\n}\n\n/**\n * Drawer wrapper around `ConnectWidgetPanel` (SSO url via ConnectStore, the\n * iframe-based `@mxenabled/web-widget-sdk` ConnectWidget, loading/error\n * statuses) with an account refresh on close. Unchanged behaviour for its\n * existing callers; `ConnectWidgetActionBlock` renders `ConnectWidgetPanel`\n * directly instead, since `ActionBlockLayer` already supplies its own Drawer.\n */\nconst ConnectDrawer: React.FC<ConnectDrawerProps> = ({\n  loadWidgetProps,\n  onClose,\n  showConnectWidget,\n  title,\n}) => {\n  const { refreshAccounts } = useAccountStore()\n  const { connect: connectCopy } = useGlobalCopyStore()\n\n  return (\n    <Drawer\n      ariaLabelClose={connectCopy.close_manage_connection_aria}\n      isOpen={showConnectWidget}\n      onClose={() => {\n        onClose()\n        refreshAccounts()\n      }}\n      title={title}\n    >\n      <ConnectWidgetPanel isActive={showConnectWidget} loadWidgetProps={loadWidgetProps} />\n    </Drawer>\n  )\n}\n\nexport default observer(ConnectDrawer)\n"],"mappings":";;;;;;AAoBA,IAAM,IAAA,CAA+C,EACnD,iBAAA,GACA,SAAA,GACA,mBAAA,GACA,OAAA,EAAA,MACI;AACJ,QAAM,EAAE,iBAAA,EAAA,IAAoB,EAAgB,GACtC,EAAE,SAAS,EAAA,IAAgB,EAAmB;AAEpD,SACE,gBAAA,EAAC,GAAD;AAAA,IACE,gBAAgB,EAAY;AAAA,IAC5B,QAAQ;AAAA,IACR,SAAA,MAAe;AACb,MAAA,EAAQ,GACR,EAAgB;AAAA,IAClB;AAAA,IACO,OAAA;AAAA,IAEP,UAAA,gBAAA,EAAC,GAAD;AAAA,MAAoB,UAAU;AAAA,MAAoC,iBAAA;AAAA,IAAkB,CAAA;AAAA,EAC9E,CAAA;AAEZ,GAEA,IAAe,EAAS,CAAa"}

package/dist/common/components/ConnectWidgetPanel.d.ts

@@ -0,0 +1,8 @@
+import { default as React } from 'react';
+export interface ConnectWidgetPanelProps {
+    loadWidgetProps?: object;
+    /** Mounts/unmounts the underlying iframe-based ConnectWidget. */
+    isActive: boolean;
+}
+declare const _default: React.FunctionComponent<ConnectWidgetPanelProps>;
+export default _default;

package/dist/common/components/ConnectWidgetPanel.es.js

@@ -0,0 +1,44 @@
+import { useConnectStore as g } from "../context/hooks.es.js";
+import { CONNECT_WIDGET_ID as s, MemberConnectionStatus as a } from "../constants/Connect.es.js";
+import i from "./ConnectStatus.es.js";
+import o from "react";
+import { observer as h } from "mobx-react-lite";
+import { jsx as l, jsxs as C } from "react/jsx-runtime";
+import { useTheme as E } from "@mui/material/styles";
+import { ConnectWidget as W } from "@mxenabled/web-widget-sdk";
+var x = ({ isActive: r, loadWidgetProps: d }) => {
+  let n;
+  const { loadWidget: f } = g(), [m, e] = o.useState(!1), [u, t] = o.useState(!1), { palette: { mode: c } } = E();
+  return o.useEffect(() => (r ? (e(!0), f({
+    mode: c,
+    ...d
+  }).then((p) => {
+    n = new W({
+      container: `#${s}`,
+      style: {
+        border: "none",
+        height: "calc(100% - 62px)",
+        maxWidth: "450px",
+        position: "absolute",
+        width: "100%"
+      },
+      url: p.url,
+      onSsoUrlLoadError: () => {
+        e(!1), t(!0);
+      },
+      onLoad: () => {
+        e(!1), t(!1);
+      }
+    });
+  })) : (e(!1), t(!1)), () => {
+    n?.unmount();
+  }), [r]), /* @__PURE__ */ C("div", {
+    id: s,
+    children: [u && /* @__PURE__ */ l(i, { status: a.Error }), m && /* @__PURE__ */ l(i, { status: a.Loading })]
+  });
+}, w = h(x);
+export {
+  w as default
+};
+
+//# sourceMappingURL=ConnectWidgetPanel.es.js.map

package/dist/common/components/ConnectWidgetPanel.es.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ConnectWidgetPanel.es.js","names":[],"sources":["../../../src/common/components/ConnectWidgetPanel.tsx"],"sourcesContent":["import React from 'react'\nimport { observer } from 'mobx-react-lite'\nimport { useTheme } from '@mui/material/styles'\nimport { ConnectWidget } from '@mxenabled/web-widget-sdk'\n\nimport ConnectStatus from './ConnectStatus'\nimport { CONNECT_WIDGET_ID, MemberConnectionStatus } from '../constants/Connect'\nimport { useConnectStore } from '../context/hooks'\n\nexport interface ConnectWidgetPanelProps {\n  loadWidgetProps?: object\n  /** Mounts/unmounts the underlying iframe-based ConnectWidget. */\n  isActive: boolean\n}\n\n/**\n * The Connect widget itself (SSO url via ConnectStore, the iframe-based\n * `@mxenabled/web-widget-sdk` ConnectWidget, loading/error statuses) with no\n * `Drawer` of its own — content-only, so a caller can put it inside any\n * container (a `Drawer`, as `ConnectDrawer` does, or directly inside another\n * drawer's content slot, as `ConnectWidgetActionBlock` does).\n *\n * Extracted from `ConnectDrawer` so `ConnectWidgetActionBlock` can render just\n * the widget without nesting a second `Drawer` inside `ActionBlockLayer`'s.\n */\nconst ConnectWidgetPanel: React.FC<ConnectWidgetPanelProps> = ({ isActive, loadWidgetProps }) => {\n  let connectWidget: ConnectWidget\n\n  const { loadWidget } = useConnectStore()\n  const [isLoading, setIsLoading] = React.useState(false)\n  const [hasError, setHasError] = React.useState(false)\n  const {\n    palette: { mode },\n  } = useTheme()\n\n  React.useEffect(() => {\n    if (isActive) {\n      setIsLoading(true)\n      loadWidget({ mode: mode, ...loadWidgetProps }).then((res) => {\n        connectWidget = new ConnectWidget({\n          container: `#${CONNECT_WIDGET_ID}`,\n          style: {\n            border: 'none',\n            height: 'calc(100% - 62px)',\n            maxWidth: '450px',\n            position: 'absolute',\n            width: '100%',\n          },\n          url: res.url,\n          onSsoUrlLoadError: () => {\n            setIsLoading(false)\n            setHasError(true)\n          },\n          onLoad: () => {\n            setIsLoading(false)\n            setHasError(false)\n          },\n        })\n      })\n    } else {\n      setIsLoading(false)\n      setHasError(false)\n    }\n\n    return () => {\n      connectWidget?.unmount()\n    }\n  }, [isActive])\n\n  return (\n    <div id={CONNECT_WIDGET_ID}>\n      {hasError && <ConnectStatus status={MemberConnectionStatus.Error} />}\n      {isLoading && <ConnectStatus status={MemberConnectionStatus.Loading} />}\n    </div>\n  )\n}\n\nexport default observer(ConnectWidgetPanel)\n"],"mappings":";;;;;;;;AAyBA,IAAM,IAAA,CAAyD,EAAE,UAAA,GAAU,iBAAA,EAAA,MAAsB;AAC/F,MAAI;AAEJ,QAAM,EAAE,YAAA,EAAA,IAAe,EAAgB,GACjC,CAAC,GAAW,CAAA,IAAgB,EAAM,SAAS,EAAK,GAChD,CAAC,GAAU,CAAA,IAAe,EAAM,SAAS,EAAK,GAC9C,EACJ,SAAS,EAAE,MAAA,EAAA,EAAA,IACT,EAAS;AAEb,SAAA,EAAM,UAAA,OACA,KACF,EAAa,EAAI,GACjB,EAAW;AAAA,IAAQ,MAAA;AAAA,IAAM,GAAG;AAAA,EAAgB,CAAC,EAAE,KAAA,CAAM,MAAQ;AAC3D,IAAA,IAAgB,IAAI,EAAc;AAAA,MAChC,WAAW,IAAI,CAAA;AAAA,MACf,OAAO;AAAA,QACL,QAAQ;AAAA,QACR,QAAQ;AAAA,QACR,UAAU;AAAA,QACV,UAAU;AAAA,QACV,OAAO;AAAA,MACT;AAAA,MACA,KAAK,EAAI;AAAA,MACT,mBAAA,MAAyB;AACvB,QAAA,EAAa,EAAK,GAClB,EAAY,EAAI;AAAA,MAClB;AAAA,MACA,QAAA,MAAc;AACZ,QAAA,EAAa,EAAK,GAClB,EAAY,EAAK;AAAA,MACnB;AAAA,IACF,CAAC;AAAA,EACH,CAAC,MAED,EAAa,EAAK,GAClB,EAAY,EAAK,IAGnB,MAAa;AACX,IAAA,GAAe,QAAQ;AAAA,EACzB,IACC,CAAC,CAAQ,CAAC,GAGX,gBAAA,EAAC,OAAD;AAAA,IAAK,IAAI;AAAA,IAAT,UAAA,CACG,KAAY,gBAAA,EAAC,GAAD,EAAe,QAAQ,EAAuB,MAAQ,CAAA,GAClE,KAAa,gBAAA,EAAC,GAAD,EAAe,QAAQ,EAAuB,QAAU,CAAA,CACnE;AAAA;AAET,GAEA,IAAe,EAAS,CAAkB"}

package/dist/common/components/CurrencyDialog.d.ts

@@ -1,10 +1,16 @@
+import { ReactNode } from 'react';
 import { ButtonProps } from '@mui/material/Button';
 interface CurrencyDialogProps {
     closeAriaLabel: string;
-    content?: string;
+    /** Body copy; a node so callers can emphasise part of it (e.g. a bold account name). */
+    content?: ReactNode;
+    /** Validation or save error, shown under the input and marking it invalid. */
+    errorText?: string;
     inputLabel?: string;
     inputValue?: string;
     isOpen: boolean;
+    /** Disables the primary button on top of the built-in input check (e.g. while saving). */
+    isPrimaryDisabled?: boolean;
     handleInputChange?: (value: string) => void;
     handleModalClose: () => void;
     handlePrimaryAction: () => void;
@@ -13,7 +19,9 @@ interface CurrencyDialogProps {
     primaryText: string;
     secondaryColor?: ButtonProps['color'];
     secondaryText?: string;
+    /** A line under the title, e.g. the account a setting applies to. */
+    subtitle?: ReactNode;
     title: string;
 }
-declare const CurrencyDialog: ({ closeAriaLabel, content, inputLabel, inputValue, isOpen, handleInputChange, handleModalClose, handlePrimaryAction, handleSecondaryAction, primaryColor, primaryText, secondaryColor, secondaryText, title, }: CurrencyDialogProps) => import("react/jsx-runtime").JSX.Element;
+declare const CurrencyDialog: ({ closeAriaLabel, content, errorText, inputLabel, inputValue, isOpen, isPrimaryDisabled, handleInputChange, handleModalClose, handlePrimaryAction, handleSecondaryAction, primaryColor, primaryText, secondaryColor, secondaryText, subtitle, title, }: CurrencyDialogProps) => import("react/jsx-runtime").JSX.Element;
 export default CurrencyDialog;

package/dist/common/components/CurrencyDialog.es.js

@@ -1,34 +1,34 @@
-import { useScreenSize as v } from "../hooks/useScreenSize.es.js";
-import p from "@mui/material/Stack";
-import { H3 as I, P as y } from "@mxenabled/mxui";
-import c from "@mui/material/Button";
-import { Icon as S } from "@mxenabled/mx-icons";
-import { jsx as o, jsxs as e } from "react/jsx-runtime";
-import j from "@mui/material/Dialog";
-import k from "@mui/material/DialogContent";
-import M from "@mui/material/IconButton";
-import $ from "@mui/material/DialogActions";
-import F from "@mui/material/InputAdornment";
-import w from "@mui/material/TextField";
-var O = ({ closeAriaLabel: d, content: f, inputLabel: t, inputValue: i, isOpen: h, handleInputChange: u, handleModalClose: n, handlePrimaryAction: a, handleSecondaryAction: g, primaryColor: x = "primary", primaryText: m, secondaryColor: b = "primary", secondaryText: l, title: s }) => {
-  const C = i !== "" && i !== "0" && !isNaN(parseFloat(i ?? "0")), { isSmallMobile: D } = v();
-  return /* @__PURE__ */ o(j, {
-    "aria-label": s,
+import { useScreenSize as k } from "../hooks/useScreenSize.es.js";
+import n from "@mui/material/Stack";
+import { H3 as S, P as j } from "@mxenabled/mxui";
+import f from "@mui/material/Button";
+import { Icon as M } from "@mxenabled/mx-icons";
+import { jsx as o, jsxs as t } from "react/jsx-runtime";
+import $ from "@mui/material/Dialog";
+import B from "@mui/material/DialogContent";
+import F from "@mui/material/IconButton";
+import H from "@mui/material/DialogActions";
+import w from "@mui/material/InputAdornment";
+import A from "@mui/material/TextField";
+var U = ({ closeAriaLabel: h, content: g, errorText: a, inputLabel: r, inputValue: i, isOpen: u, isPrimaryDisabled: x = !1, handleInputChange: b, handleModalClose: m, handlePrimaryAction: s, handleSecondaryAction: C, primaryColor: D = "primary", primaryText: p, secondaryColor: v = "primary", secondaryText: l, subtitle: y, title: c }) => {
+  const d = x || (r ? !(i !== "" && i !== "0" && !isNaN(parseFloat(i ?? "0"))) : !1), { isSmallMobile: I } = k();
+  return /* @__PURE__ */ o($, {
+    "aria-label": c,
     "aria-labelledby": "modal-title",
     maxWidth: "xs",
-    onClose: n,
-    open: h,
+    onClose: m,
+    open: u,
     role: "dialog",
     sx: {
       "& .MuiDialogContent-root": { p: 0 },
-      ...D && { "& .MuiDialog-paper": { minWidth: "100%" } }
+      ...I && { "& .MuiDialog-paper": { minWidth: "100%" } }
     },
-    children: /* @__PURE__ */ o(k, { children: /* @__PURE__ */ e("form", {
-      onSubmit: (r) => {
-        r.preventDefault(), a();
+    children: /* @__PURE__ */ o(B, { children: /* @__PURE__ */ t("form", {
+      onSubmit: (e) => {
+        e.preventDefault(), d || s();
       },
       children: [
-        /* @__PURE__ */ e(p, {
+        /* @__PURE__ */ t(n, {
           sx: {
             alignItems: "center",
             flexDirection: "row",
@@ -39,46 +39,52 @@ var O = ({ closeAriaLabel: d, content: f, inputLabel: t, inputValue: i, isOpen:
             pr: 16,
             pt: 24
           },
-          children: [/* @__PURE__ */ o(I, {
-            id: "modal-title",
-            children: s
-          }), /* @__PURE__ */ o(M, {
-            "aria-label": d,
-            onClick: n,
+          children: [/* @__PURE__ */ t(n, {
+            sx: { gap: 4 },
+            children: [/* @__PURE__ */ o(S, {
+              id: "modal-title",
+              children: c
+            }), y]
+          }), /* @__PURE__ */ o(F, {
+            "aria-label": h,
+            onClick: m,
             sx: {
               minHeight: 24,
               position: "absolute",
               right: 8,
               top: 18
             },
-            children: /* @__PURE__ */ o(S, {
+            children: /* @__PURE__ */ o(M, {
               name: "close",
               sx: { color: "action.active" }
             })
           })]
         }),
-        /* @__PURE__ */ e(p, {
+        /* @__PURE__ */ t(n, {
           sx: {
             gap: 24,
             px: 24
           },
-          children: [/* @__PURE__ */ o(y, {
+          children: [/* @__PURE__ */ o(j, {
             variant: "subtitle1",
-            children: f
-          }), t && /* @__PURE__ */ o(w, {
+            children: g
+          }), r && /* @__PURE__ */ o(A, {
             autoFocus: !0,
+            error: !!a,
+            helperText: a,
             inputMode: "decimal",
-            label: t,
-            onChange: ({ target: { value: r } }) => {
-              /^\d*\.?\d*$/.test(r) && u?.(r);
+            label: r,
+            onChange: ({ target: { value: e } }) => {
+              /^\d*\.?\d*$/.test(e) && b?.(e);
             },
             slotProps: {
-              input: { startAdornment: /* @__PURE__ */ o(F, {
+              input: { startAdornment: /* @__PURE__ */ o(w, {
                 position: "start",
                 children: "$"
               }) },
+              formHelperText: { role: "alert" },
               htmlInput: {
-                "aria-label": t,
+                "aria-label": r,
                 noValidate: !0,
                 pattern: "[0-9]*\\.?[0-9]*"
               }
@@ -87,25 +93,25 @@ var O = ({ closeAriaLabel: d, content: f, inputLabel: t, inputValue: i, isOpen:
             value: i
           })]
         }),
-        /* @__PURE__ */ e($, {
+        /* @__PURE__ */ t(H, {
           sx: {
             justifyContent: "flex-end",
             gap: 16,
             p: 24,
             ">:not(style)~:not(style)": { ml: 0 }
           },
-          children: [l && /* @__PURE__ */ o(c, {
+          children: [l && /* @__PURE__ */ o(f, {
             "aria-label": l,
-            color: b,
-            onClick: g,
+            color: v,
+            onClick: C,
             children: l
-          }), /* @__PURE__ */ o(c, {
-            "aria-label": m,
-            color: x,
-            disabled: t ? !C : !1,
-            onClick: a,
+          }), /* @__PURE__ */ o(f, {
+            "aria-label": p,
+            color: D,
+            disabled: d,
+            onClick: s,
             variant: "contained",
-            children: m
+            children: p
           })]
         })
       ]
@@ -113,7 +119,7 @@ var O = ({ closeAriaLabel: d, content: f, inputLabel: t, inputValue: i, isOpen:
   });
 };
 export {
-  O as default
+  U as default
 };
 
 //# sourceMappingURL=CurrencyDialog.es.js.map

package/dist/common/components/CurrencyDialog.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"CurrencyDialog.es.js","names":[],"sources":["../../../src/common/components/CurrencyDialog.tsx"],"sourcesContent":["import { Icon } from '@mxenabled/mx-icons'\nimport { H3, P } from '@mxenabled/mxui'\n\nimport Button, { type ButtonProps } from '@mui/material/Button'\nimport Dialog from '@mui/material/Dialog'\nimport DialogActions from '@mui/material/DialogActions'\nimport DialogContent from '@mui/material/DialogContent'\nimport IconButton from '@mui/material/IconButton'\nimport InputAdornment from '@mui/material/InputAdornment'\nimport Stack from '@mui/material/Stack'\nimport TextField from '@mui/material/TextField'\n\nimport { useScreenSize } from '../hooks'\n\ninterface CurrencyDialogProps {\n  closeAriaLabel: string\n  content?: string\n  inputLabel?: string\n  inputValue?: string\n  isOpen: boolean\n  handleInputChange?: (value: string) => void\n  handleModalClose: () => void\n  handlePrimaryAction: () => void\n  handleSecondaryAction?: () => void\n  primaryColor?: ButtonProps['color']\n  primaryText: string\n  secondaryColor?: ButtonProps['color']\n  secondaryText?: string\n  title: string\n}\n\n// Created for V2 of BudgetDetailsDrawer.\n// The previous design will be replaced once the new design is finalized.\n// Also needs to be updated to use the mxui library\n// with the updated Dialog components.\n\nconst CurrencyDialog = ({\n  closeAriaLabel,\n  content,\n  inputLabel,\n  inputValue,\n  isOpen,\n  handleInputChange,\n  handleModalClose,\n  handlePrimaryAction,\n  handleSecondaryAction,\n  primaryColor = 'primary',\n  primaryText,\n  secondaryColor = 'primary',\n  secondaryText,\n  title,\n}: CurrencyDialogProps) => {\n  const numericValue = parseFloat(inputValue ?? '0')\n  const isValid = inputValue !== '' && inputValue !== '0' && !isNaN(numericValue)\n\n  const { isSmallMobile } = useScreenSize()\n\n  return (\n    <Dialog\n      aria-label={title}\n      aria-labelledby=\"modal-title\"\n      maxWidth=\"xs\"\n      onClose={handleModalClose}\n      open={isOpen}\n      role=\"dialog\"\n      sx={{\n        '& .MuiDialogContent-root': { p: 0 },\n        ...(isSmallMobile && { '& .MuiDialog-paper': { minWidth: '100%' } }),\n      }}\n    >\n      <DialogContent>\n        <form\n          onSubmit={(e) => {\n            e.preventDefault()\n            handlePrimaryAction()\n          }}\n        >\n          <Stack\n            sx={{\n              alignItems: 'center',\n              flexDirection: 'row',\n              justifyContent: 'space-between',\n              pb: 12,\n              pl: 24,\n              position: 'relative',\n              pr: 16,\n              pt: 24,\n            }}\n          >\n            <H3 id=\"modal-title\">{title}</H3>\n            <IconButton\n              aria-label={closeAriaLabel}\n              onClick={handleModalClose}\n              sx={{ minHeight: 24, position: 'absolute', right: 8, top: 18 }}\n            >\n              <Icon name=\"close\" sx={{ color: 'action.active' }} />\n            </IconButton>\n          </Stack>\n          <Stack sx={{ gap: 24, px: 24 }}>\n            <P variant=\"subtitle1\">{content}</P>\n            {inputLabel && (\n              <TextField\n                autoFocus={true}\n                inputMode=\"decimal\"\n                label={inputLabel}\n                onChange={({ target: { value } }) => {\n                  if (!/^\\d*\\.?\\d*$/.test(value)) return\n\n                  handleInputChange?.(value)\n                }}\n                slotProps={{\n                  input: {\n                    startAdornment: <InputAdornment position=\"start\">$</InputAdornment>,\n                  },\n                  htmlInput: {\n                    'aria-label': inputLabel,\n                    noValidate: true,\n                    pattern: '[0-9]*\\\\.?[0-9]*',\n                  },\n                }}\n                type=\"text\"\n                value={inputValue}\n              />\n            )}\n          </Stack>\n          <DialogActions\n            sx={{\n              justifyContent: 'flex-end',\n              gap: 16,\n              p: 24,\n              '>:not(style)~:not(style)': { ml: 0 },\n            }}\n          >\n            {secondaryText && (\n              <Button\n                aria-label={secondaryText}\n                color={secondaryColor}\n                onClick={handleSecondaryAction}\n              >\n                {secondaryText}\n              </Button>\n            )}\n            <Button\n              aria-label={primaryText}\n              color={primaryColor}\n              disabled={inputLabel ? !isValid : false}\n              onClick={handlePrimaryAction}\n              variant=\"contained\"\n            >\n              {primaryText}\n            </Button>\n          </DialogActions>\n        </form>\n      </DialogContent>\n    </Dialog>\n  )\n}\n\nexport default CurrencyDialog\n"],"mappings":"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"}
+{"version":3,"file":"CurrencyDialog.es.js","names":[],"sources":["../../../src/common/components/CurrencyDialog.tsx"],"sourcesContent":["import type { ReactNode } from 'react'\n\nimport { Icon } from '@mxenabled/mx-icons'\nimport { H3, P } from '@mxenabled/mxui'\n\nimport Button, { type ButtonProps } from '@mui/material/Button'\nimport Dialog from '@mui/material/Dialog'\nimport DialogActions from '@mui/material/DialogActions'\nimport DialogContent from '@mui/material/DialogContent'\nimport IconButton from '@mui/material/IconButton'\nimport InputAdornment from '@mui/material/InputAdornment'\nimport Stack from '@mui/material/Stack'\nimport TextField from '@mui/material/TextField'\n\nimport { useScreenSize } from '../hooks'\n\ninterface CurrencyDialogProps {\n  closeAriaLabel: string\n  /** Body copy; a node so callers can emphasise part of it (e.g. a bold account name). */\n  content?: ReactNode\n  /** Validation or save error, shown under the input and marking it invalid. */\n  errorText?: string\n  inputLabel?: string\n  inputValue?: string\n  isOpen: boolean\n  /** Disables the primary button on top of the built-in input check (e.g. while saving). */\n  isPrimaryDisabled?: boolean\n  handleInputChange?: (value: string) => void\n  handleModalClose: () => void\n  handlePrimaryAction: () => void\n  handleSecondaryAction?: () => void\n  primaryColor?: ButtonProps['color']\n  primaryText: string\n  secondaryColor?: ButtonProps['color']\n  secondaryText?: string\n  /** A line under the title, e.g. the account a setting applies to. */\n  subtitle?: ReactNode\n  title: string\n}\n\n// Created for V2 of BudgetDetailsDrawer.\n// The previous design will be replaced once the new design is finalized.\n// Also needs to be updated to use the mxui library\n// with the updated Dialog components.\n\nconst CurrencyDialog = ({\n  closeAriaLabel,\n  content,\n  errorText,\n  inputLabel,\n  inputValue,\n  isOpen,\n  isPrimaryDisabled = false,\n  handleInputChange,\n  handleModalClose,\n  handlePrimaryAction,\n  handleSecondaryAction,\n  primaryColor = 'primary',\n  primaryText,\n  secondaryColor = 'primary',\n  secondaryText,\n  subtitle,\n  title,\n}: CurrencyDialogProps) => {\n  const numericValue = parseFloat(inputValue ?? '0')\n  const isValid = inputValue !== '' && inputValue !== '0' && !isNaN(numericValue)\n  // One rule for the button and for Enter: the form's submit must not bypass a disabled button.\n  const isPrimaryBlocked = isPrimaryDisabled || (inputLabel ? !isValid : false)\n\n  const { isSmallMobile } = useScreenSize()\n\n  return (\n    <Dialog\n      aria-label={title}\n      aria-labelledby=\"modal-title\"\n      maxWidth=\"xs\"\n      onClose={handleModalClose}\n      open={isOpen}\n      role=\"dialog\"\n      sx={{\n        '& .MuiDialogContent-root': { p: 0 },\n        ...(isSmallMobile && { '& .MuiDialog-paper': { minWidth: '100%' } }),\n      }}\n    >\n      <DialogContent>\n        <form\n          onSubmit={(e) => {\n            e.preventDefault()\n            if (!isPrimaryBlocked) handlePrimaryAction()\n          }}\n        >\n          <Stack\n            sx={{\n              alignItems: 'center',\n              flexDirection: 'row',\n              justifyContent: 'space-between',\n              pb: 12,\n              pl: 24,\n              position: 'relative',\n              pr: 16,\n              pt: 24,\n            }}\n          >\n            <Stack sx={{ gap: 4 }}>\n              <H3 id=\"modal-title\">{title}</H3>\n              {subtitle}\n            </Stack>\n            <IconButton\n              aria-label={closeAriaLabel}\n              onClick={handleModalClose}\n              sx={{ minHeight: 24, position: 'absolute', right: 8, top: 18 }}\n            >\n              <Icon name=\"close\" sx={{ color: 'action.active' }} />\n            </IconButton>\n          </Stack>\n          <Stack sx={{ gap: 24, px: 24 }}>\n            <P variant=\"subtitle1\">{content}</P>\n            {inputLabel && (\n              <TextField\n                autoFocus={true}\n                error={!!errorText}\n                helperText={errorText}\n                inputMode=\"decimal\"\n                label={inputLabel}\n                onChange={({ target: { value } }) => {\n                  if (!/^\\d*\\.?\\d*$/.test(value)) return\n\n                  handleInputChange?.(value)\n                }}\n                slotProps={{\n                  input: {\n                    startAdornment: <InputAdornment position=\"start\">$</InputAdornment>,\n                  },\n                  // Announce errors: focus is usually on the primary button when one appears.\n                  formHelperText: { role: 'alert' },\n                  htmlInput: {\n                    'aria-label': inputLabel,\n                    noValidate: true,\n                    pattern: '[0-9]*\\\\.?[0-9]*',\n                  },\n                }}\n                type=\"text\"\n                value={inputValue}\n              />\n            )}\n          </Stack>\n          <DialogActions\n            sx={{\n              justifyContent: 'flex-end',\n              gap: 16,\n              p: 24,\n              '>:not(style)~:not(style)': { ml: 0 },\n            }}\n          >\n            {secondaryText && (\n              <Button\n                aria-label={secondaryText}\n                color={secondaryColor}\n                onClick={handleSecondaryAction}\n              >\n                {secondaryText}\n              </Button>\n            )}\n            <Button\n              aria-label={primaryText}\n              color={primaryColor}\n              disabled={isPrimaryBlocked}\n              onClick={handlePrimaryAction}\n              variant=\"contained\"\n            >\n              {primaryText}\n            </Button>\n          </DialogActions>\n        </form>\n      </DialogContent>\n    </Dialog>\n  )\n}\n\nexport default CurrencyDialog\n"],"mappings":";;;;;;;;;;;;AA6CA,IAAM,IAAA,CAAkB,EACtB,gBAAA,GACA,SAAA,GACA,WAAA,GACA,YAAA,GACA,YAAA,GACA,QAAA,GACA,mBAAA,IAAoB,IACpB,mBAAA,GACA,kBAAA,GACA,qBAAA,GACA,uBAAA,GACA,cAAA,IAAe,WACf,aAAA,GACA,gBAAA,IAAiB,WACjB,eAAA,GACA,UAAA,GACA,OAAA,EAAA,MACyB;AAIzB,QAAM,IAAmB,MAAsB,IAAa,EAF5C,MAAe,MAAM,MAAe,OAAO,CAAC,MADvC,WAAW,KAAc,GACoB,CAAY,KAEP,KAEjE,EAAE,eAAA,EAAA,IAAkB,EAAc;AAExC,SACE,gBAAA,EAAC,GAAD;AAAA,IACE,cAAY;AAAA,IACZ,mBAAgB;AAAA,IAChB,UAAS;AAAA,IACT,SAAS;AAAA,IACT,MAAM;AAAA,IACN,MAAK;AAAA,IACL,IAAI;AAAA,MACF,4BAA4B,EAAE,GAAG,EAAE;AAAA,MACnC,GAAI,KAAiB,EAAE,sBAAsB,EAAE,UAAU,OAAO,EAAE;AAAA,IACpE;AAAA,IAEA,UAAA,gBAAA,EAAC,GAAD,EAAA,UACE,gBAAA,EAAC,QAAD;AAAA,MACE,UAAA,CAAW,MAAM;AACf,UAAE,eAAe,GACZ,KAAkB,EAAoB;AAAA,MAC7C;AAAA,MAJF,UAAA;AAAA,QAME,gBAAA,EAAC,GAAD;AAAA,UACE,IAAI;AAAA,YACF,YAAY;AAAA,YACZ,eAAe;AAAA,YACf,gBAAgB;AAAA,YAChB,IAAI;AAAA,YACJ,IAAI;AAAA,YACJ,UAAU;AAAA,YACV,IAAI;AAAA,YACJ,IAAI;AAAA,UACN;AAAA,UAVF,UAAA,CAYE,gBAAA,EAAC,GAAD;AAAA,YAAO,IAAI,EAAE,KAAK,EAAE;AAAA,YAApB,UAAA,CACE,gBAAA,EAAC,GAAD;AAAA,cAAI,IAAG;AAAA,cAAe,UAAA;AAAA,YAAU,CAAA,GAC/B,CACI;AAAA,UACP,CAAA,GAAA,gBAAA,EAAC,GAAD;AAAA,YACE,cAAY;AAAA,YACZ,SAAS;AAAA,YACT,IAAI;AAAA,cAAE,WAAW;AAAA,cAAI,UAAU;AAAA,cAAY,OAAO;AAAA,cAAG,KAAK;AAAA,YAAG;AAAA,YAE7D,UAAA,gBAAA,EAAC,GAAD;AAAA,cAAM,MAAK;AAAA,cAAQ,IAAI,EAAE,OAAO,gBAAgB;AAAA,YAAI,CAAA;AAAA,UAC1C,CAAA,CACP;AAAA;QACP,gBAAA,EAAC,GAAD;AAAA,UAAO,IAAI;AAAA,YAAE,KAAK;AAAA,YAAI,IAAI;AAAA,UAAG;AAAA,UAA7B,UAAA,CACE,gBAAA,EAAC,GAAD;AAAA,YAAG,SAAQ;AAAA,YAAa,UAAA;AAAA,UAAW,CAAA,GAClC,KACC,gBAAA,EAAC,GAAD;AAAA,YACE,WAAW;AAAA,YACX,OAAO,CAAC,CAAC;AAAA,YACT,YAAY;AAAA,YACZ,WAAU;AAAA,YACV,OAAO;AAAA,YACP,UAAA,CAAW,EAAE,QAAQ,EAAE,OAAA,EAAA,EAAA,MAAc;AACnC,cAAK,cAAc,KAAK,CAAK,KAE7B,IAAoB,CAAK;AAAA,YAC3B;AAAA,YACA,WAAW;AAAA,cACT,OAAO,EACL,gBAAgB,gBAAA,EAAC,GAAD;AAAA,gBAAgB,UAAS;AAAA,gBAAQ,UAAA;AAAA,cAAiB,CAAA,EACpE;AAAA,cAEA,gBAAgB,EAAE,MAAM,QAAQ;AAAA,cAChC,WAAW;AAAA,gBACT,cAAc;AAAA,gBACd,YAAY;AAAA,gBACZ,SAAS;AAAA,cACX;AAAA,YACF;AAAA,YACA,MAAK;AAAA,YACL,OAAO;AAAA,UACR,CAAA,CAEE;AAAA;QACP,gBAAA,EAAC,GAAD;AAAA,UACE,IAAI;AAAA,YACF,gBAAgB;AAAA,YAChB,KAAK;AAAA,YACL,GAAG;AAAA,YACH,4BAA4B,EAAE,IAAI,EAAE;AAAA,UACtC;AAAA,UANF,UAAA,CAQG,KACC,gBAAA,EAAC,GAAD;AAAA,YACE,cAAY;AAAA,YACZ,OAAO;AAAA,YACP,SAAS;AAAA,YAER,UAAA;AAAA,UACK,CAAA,GAEV,gBAAA,EAAC,GAAD;AAAA,YACE,cAAY;AAAA,YACZ,OAAO;AAAA,YACP,UAAU;AAAA,YACV,SAAS;AAAA,YACT,SAAQ;AAAA,YAEP,UAAA;AAAA,UACK,CAAA,CACK;AAAA;MACX;AAAA,IACO,CAAA,EAAA,CAAA;AAAA,EACT,CAAA;AAEZ"}

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

@@ -9,6 +9,8 @@ export interface DialogProps extends Omit<MuiDialogProps, OwnedMuiProps> {
     className?: string;
     copy: CopyObject;
     disablePrimaryButton?: boolean;
+    /** Render the footer action buttons. Default true; content-only dialogs (e.g. the insights survey modal) pass false. */
+    showActions?: boolean;
     isOpen: boolean;
     onClose: (event?: unknown, reason?: string) => void;
     onPrimaryAction?: () => void;

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

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

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

@@ -1 +1 @@
-{"version":3,"file":"Dialog.es.js","names":[],"sources":["../../../../src/common/components/dialog/Dialog.tsx"],"sourcesContent":["import React from 'react'\n\nimport MuiDialog from '@mui/material/Dialog'\nimport { DialogProps as MuiDialogProps } from '@mui/material/Dialog'\nimport DialogContent from '@mui/material/DialogContent'\nimport type { SxProps } from '@mui/material/styles'\n\nimport { DialogFooter, DialogHeader } from '@mxenabled/mxui'\nimport { useScreenSize } from '../../hooks'\nimport { useFocusReturn } from '../../hooks/useFocusReturn'\n\nexport type CopyObject = {\n  close_aria?: string\n  title: string\n}\n\ntype OwnedMuiProps =\n  | 'disableRestoreFocus'\n  | 'onFocus'\n  | 'open'\n  | 'slotProps'\n  | 'slots'\n  | 'TransitionComponent'\n  | 'TransitionProps'\n\nexport interface DialogProps extends Omit<MuiDialogProps, OwnedMuiProps> {\n  className?: string\n  copy: CopyObject\n  disablePrimaryButton?: boolean\n  isOpen: boolean\n  onClose: (event?: unknown, reason?: string) => void\n  onPrimaryAction?: () => void\n  onSecondaryAction?: () => void\n  primaryColor?: 'primary' | 'inherit' | 'secondary' | 'success' | 'error' | 'info' | 'warning'\n  primaryText?: string\n  /** Where focus goes on close. Takes precedence over the element that opened the dialog. */\n  returnFocusTo?: React.RefObject<HTMLElement | null>\n  secondaryColor?: 'primary' | 'inherit' | 'secondary' | 'success' | 'error' | 'info' | 'warning'\n  secondaryText?: string\n}\n\nconst Dialog: React.FC<React.PropsWithChildren<DialogProps>> = ({\n  className,\n  copy,\n  disablePrimaryButton = false,\n  isOpen = false,\n  onClose,\n  onPrimaryAction,\n  primaryColor = 'primary',\n  primaryText = 'Confirm',\n  returnFocusTo,\n  onSecondaryAction,\n  secondaryColor = 'primary',\n  secondaryText = 'Cancel',\n  children,\n  ...rest\n}) => {\n  // Extract sx from rest to merge with Dialog's own styles instead of overwriting\n  const { sx: restSx, ...restProps } = rest\n  const title = copy?.title ?? ''\n  const closeAria = copy?.close_aria ?? 'Close'\n\n  // Label the dialog *by* its visible heading (WAI-ARIA APG) instead of a duplicate\n  // aria-label, so screen readers announce the title once rather than name + heading.\n  const titleId = React.useId()\n\n  const { isSmallMobile } = useScreenSize()\n\n  const { onExited, onFocus, rootRef } = useFocusReturn(isOpen, returnFocusTo)\n\n  const handlePrimaryAction = () => {\n    onPrimaryAction?.()\n    onClose()\n  }\n\n  const handleSecondaryAction = () => {\n    if (onSecondaryAction) {\n      onSecondaryAction()\n    }\n    onClose()\n  }\n\n  return (\n    <div className={`mx-cmn-dialog ${className}`}>\n      <MuiDialog\n        aria-labelledby={titleId}\n        maxWidth=\"xs\"\n        onClose={onClose}\n        open={isOpen}\n        sx={\n          [\n            {\n              '& .MuiDialog-paperScrollPaper': { backgroundColor: 'background.default' },\n              ...(isSmallMobile && { '& .MuiDialog-paper': { minWidth: '100%' } }),\n              height: '100%',\n            },\n            ...(restSx ? [restSx] : []),\n          ] as SxProps\n        }\n        {...restProps}\n        disableRestoreFocus={true}\n        onFocus={onFocus}\n        ref={rootRef}\n        slotProps={{ transition: { onExited } }}\n      >\n        <DialogHeader\n          ariaHidden={true}\n          copy={{ title, close_aria: closeAria }}\n          id={titleId}\n          onClose={onClose}\n          truncate={true}\n        />\n\n        <DialogContent sx={{ lineHeight: 1.5 }}>{children}</DialogContent>\n\n        <DialogFooter\n          isPrimaryDisabled={disablePrimaryButton}\n          onPrimaryAction={handlePrimaryAction}\n          onSecondaryAction={handleSecondaryAction}\n          primaryColor={primaryColor}\n          primaryText={primaryText}\n          secondaryColor={secondaryColor}\n          secondaryText={secondaryText}\n        />\n      </MuiDialog>\n    </div>\n  )\n}\n\nexport default Dialog\n"],"mappings":";;;;;;;AAyCA,IAAM,IAAA,CAA0D,EAC9D,WAAA,GACA,MAAA,GACA,sBAAA,IAAuB,IACvB,QAAA,IAAS,IACT,SAAA,GACA,iBAAA,GACA,cAAA,IAAe,WACf,aAAA,IAAc,WACd,eAAA,GACA,mBAAA,GACA,gBAAA,IAAiB,WACjB,eAAA,IAAgB,UAChB,UAAA,GACA,GAAG,EAAA,MACC;AAEJ,QAAM,EAAE,IAAI,GAAQ,GAAG,EAAA,IAAc,GAC/B,IAAQ,GAAM,SAAS,IACvB,IAAY,GAAM,cAAc,SAIhC,IAAU,EAAM,MAAM,GAEtB,EAAE,eAAA,EAAA,IAAkB,EAAc,GAElC,EAAE,UAAA,GAAU,SAAA,GAAS,SAAA,EAAA,IAAY,EAAe,GAAQ,CAAa,GAErE,IAAA,MAA4B;AAChC,IAAA,IAAkB,GAClB,EAAQ;AAAA,EACV,GAEM,IAAA,MAA8B;AAClC,IAAI,KACF,EAAkB,GAEpB,EAAQ;AAAA,EACV;AAEA,SACE,gBAAA,EAAC,OAAD;AAAA,IAAK,WAAW,iBAAiB,CAAA;AAAA,IAC/B,UAAA,gBAAA,EAAC,GAAD;AAAA,MACE,mBAAiB;AAAA,MACjB,UAAS;AAAA,MACA,SAAA;AAAA,MACT,MAAM;AAAA,MACN,IACE,CACE;AAAA,QACE,iCAAiC,EAAE,iBAAiB,qBAAqB;AAAA,QACzE,GAAI,KAAiB,EAAE,sBAAsB,EAAE,UAAU,OAAO,EAAE;AAAA,QAClE,QAAQ;AAAA,MACV,GACA,GAAI,IAAS,CAAC,CAAM,IAAI,CAAC,CAC3B;AAAA,MAEF,GAAI;AAAA,MACJ,qBAAqB;AAAA,MACZ,SAAA;AAAA,MACT,KAAK;AAAA,MACL,WAAW,EAAE,YAAY,EAAE,UAAA,EAAS,EAAE;AAAA,MAnBxC,UAAA;AAAA,QAqBE,gBAAA,EAAC,GAAD;AAAA,UACE,YAAY;AAAA,UACZ,MAAM;AAAA,YAAE,OAAA;AAAA,YAAO,YAAY;AAAA,UAAU;AAAA,UACrC,IAAI;AAAA,UACK,SAAA;AAAA,UACT,UAAU;AAAA,QACX,CAAA;AAAA,QAED,gBAAA,EAAC,GAAD;AAAA,UAAe,IAAI,EAAE,YAAY,IAAI;AAAA,UAAI,UAAA;AAAA,QAAwB,CAAA;AAAA,QAEjE,gBAAA,EAAC,GAAD;AAAA,UACE,mBAAmB;AAAA,UACnB,iBAAiB;AAAA,UACjB,mBAAmB;AAAA,UACL,cAAA;AAAA,UACD,aAAA;AAAA,UACG,gBAAA;AAAA,UACD,eAAA;AAAA,QAChB,CAAA;AAAA,MACQ;AAAA;EACR,CAAA;AAET"}
+{"version":3,"file":"Dialog.es.js","names":[],"sources":["../../../../src/common/components/dialog/Dialog.tsx"],"sourcesContent":["import React from 'react'\n\nimport MuiDialog from '@mui/material/Dialog'\nimport { DialogProps as MuiDialogProps } from '@mui/material/Dialog'\nimport DialogContent from '@mui/material/DialogContent'\nimport type { SxProps } from '@mui/material/styles'\n\nimport { DialogFooter, DialogHeader } from '@mxenabled/mxui'\nimport { useScreenSize } from '../../hooks'\nimport { useFocusReturn } from '../../hooks/useFocusReturn'\n\nexport type CopyObject = {\n  close_aria?: string\n  title: string\n}\n\ntype OwnedMuiProps =\n  | 'disableRestoreFocus'\n  | 'onFocus'\n  | 'open'\n  | 'slotProps'\n  | 'slots'\n  | 'TransitionComponent'\n  | 'TransitionProps'\n\nexport interface DialogProps extends Omit<MuiDialogProps, OwnedMuiProps> {\n  className?: string\n  copy: CopyObject\n  disablePrimaryButton?: boolean\n  /** Render the footer action buttons. Default true; content-only dialogs (e.g. the insights survey modal) pass false. */\n  showActions?: boolean\n  isOpen: boolean\n  onClose: (event?: unknown, reason?: string) => void\n  onPrimaryAction?: () => void\n  onSecondaryAction?: () => void\n  primaryColor?: 'primary' | 'inherit' | 'secondary' | 'success' | 'error' | 'info' | 'warning'\n  primaryText?: string\n  /** Where focus goes on close. Takes precedence over the element that opened the dialog. */\n  returnFocusTo?: React.RefObject<HTMLElement | null>\n  secondaryColor?: 'primary' | 'inherit' | 'secondary' | 'success' | 'error' | 'info' | 'warning'\n  secondaryText?: string\n}\n\nconst Dialog: React.FC<React.PropsWithChildren<DialogProps>> = ({\n  className,\n  copy,\n  disablePrimaryButton = false,\n  showActions = true,\n  isOpen = false,\n  onClose,\n  onPrimaryAction,\n  primaryColor = 'primary',\n  primaryText = 'Confirm',\n  returnFocusTo,\n  onSecondaryAction,\n  secondaryColor = 'primary',\n  secondaryText = 'Cancel',\n  children,\n  ...rest\n}) => {\n  // Extract sx from rest to merge with Dialog's own styles instead of overwriting\n  const { sx: restSx, ...restProps } = rest\n  const title = copy?.title ?? ''\n  const closeAria = copy?.close_aria ?? 'Close'\n\n  // Label the dialog *by* its visible heading (WAI-ARIA APG) instead of a duplicate\n  // aria-label, so screen readers announce the title once rather than name + heading.\n  const titleId = React.useId()\n\n  const { isSmallMobile } = useScreenSize()\n\n  const { onExited, onFocus, rootRef } = useFocusReturn(isOpen, returnFocusTo)\n\n  const handlePrimaryAction = () => {\n    onPrimaryAction?.()\n    onClose()\n  }\n\n  const handleSecondaryAction = () => {\n    if (onSecondaryAction) {\n      onSecondaryAction()\n    }\n    onClose()\n  }\n\n  return (\n    <div className={`mx-cmn-dialog ${className}`}>\n      <MuiDialog\n        aria-labelledby={titleId}\n        maxWidth=\"xs\"\n        onClose={onClose}\n        open={isOpen}\n        sx={\n          [\n            {\n              '& .MuiDialog-paperScrollPaper': { backgroundColor: 'background.default' },\n              ...(isSmallMobile && { '& .MuiDialog-paper': { minWidth: '100%' } }),\n              height: '100%',\n            },\n            ...(restSx ? [restSx] : []),\n          ] as SxProps\n        }\n        {...restProps}\n        disableRestoreFocus={true}\n        onFocus={onFocus}\n        ref={rootRef}\n        slotProps={{ transition: { onExited } }}\n      >\n        <DialogHeader\n          ariaHidden={true}\n          copy={{ title, close_aria: closeAria }}\n          id={titleId}\n          onClose={onClose}\n          truncate={true}\n        />\n\n        <DialogContent sx={{ lineHeight: 1.5 }}>{children}</DialogContent>\n\n        {showActions && (\n          <DialogFooter\n            isPrimaryDisabled={disablePrimaryButton}\n            onPrimaryAction={handlePrimaryAction}\n            onSecondaryAction={handleSecondaryAction}\n            primaryColor={primaryColor}\n            primaryText={primaryText}\n            secondaryColor={secondaryColor}\n            secondaryText={secondaryText}\n          />\n        )}\n      </MuiDialog>\n    </div>\n  )\n}\n\nexport default Dialog\n"],"mappings":";;;;;;;AA2CA,IAAM,IAAA,CAA0D,EAC9D,WAAA,GACA,MAAA,GACA,sBAAA,IAAuB,IACvB,aAAA,IAAc,IACd,QAAA,IAAS,IACT,SAAA,GACA,iBAAA,GACA,cAAA,IAAe,WACf,aAAA,IAAc,WACd,eAAA,GACA,mBAAA,GACA,gBAAA,IAAiB,WACjB,eAAA,IAAgB,UAChB,UAAA,GACA,GAAG,EAAA,MACC;AAEJ,QAAM,EAAE,IAAI,GAAQ,GAAG,EAAA,IAAc,GAC/B,IAAQ,GAAM,SAAS,IACvB,IAAY,GAAM,cAAc,SAIhC,IAAU,EAAM,MAAM,GAEtB,EAAE,eAAA,EAAA,IAAkB,EAAc,GAElC,EAAE,UAAA,GAAU,SAAA,GAAS,SAAA,EAAA,IAAY,EAAe,GAAQ,CAAa,GAErE,IAAA,MAA4B;AAChC,IAAA,IAAkB,GAClB,EAAQ;AAAA,EACV,GAEM,IAAA,MAA8B;AAClC,IAAI,KACF,EAAkB,GAEpB,EAAQ;AAAA,EACV;AAEA,SACE,gBAAA,EAAC,OAAD;AAAA,IAAK,WAAW,iBAAiB,CAAA;AAAA,IAC/B,UAAA,gBAAA,EAAC,GAAD;AAAA,MACE,mBAAiB;AAAA,MACjB,UAAS;AAAA,MACA,SAAA;AAAA,MACT,MAAM;AAAA,MACN,IACE,CACE;AAAA,QACE,iCAAiC,EAAE,iBAAiB,qBAAqB;AAAA,QACzE,GAAI,KAAiB,EAAE,sBAAsB,EAAE,UAAU,OAAO,EAAE;AAAA,QAClE,QAAQ;AAAA,MACV,GACA,GAAI,IAAS,CAAC,CAAM,IAAI,CAAC,CAC3B;AAAA,MAEF,GAAI;AAAA,MACJ,qBAAqB;AAAA,MACZ,SAAA;AAAA,MACT,KAAK;AAAA,MACL,WAAW,EAAE,YAAY,EAAE,UAAA,EAAS,EAAE;AAAA,MAnBxC,UAAA;AAAA,QAqBE,gBAAA,EAAC,GAAD;AAAA,UACE,YAAY;AAAA,UACZ,MAAM;AAAA,YAAE,OAAA;AAAA,YAAO,YAAY;AAAA,UAAU;AAAA,UACrC,IAAI;AAAA,UACK,SAAA;AAAA,UACT,UAAU;AAAA,QACX,CAAA;AAAA,QAED,gBAAA,EAAC,GAAD;AAAA,UAAe,IAAI,EAAE,YAAY,IAAI;AAAA,UAAI,UAAA;AAAA,QAAwB,CAAA;AAAA,QAEhE,KACC,gBAAA,EAAC,GAAD;AAAA,UACE,mBAAmB;AAAA,UACnB,iBAAiB;AAAA,UACjB,mBAAmB;AAAA,UACL,cAAA;AAAA,UACD,aAAA;AAAA,UACG,gBAAA;AAAA,UACD,eAAA;AAAA,QAChB,CAAA;AAAA,MAEM;AAAA;EACR,CAAA;AAET"}

package/dist/common/components/index.d.ts

@@ -10,6 +10,7 @@ export { default as MicroWidgetContainer } from './MicroWidgetContainer';
 export { default as MiniWidgetContainer } from './MiniWidgetContainer';
 export { WidgetContainer } from './WidgetContainer';
 export { default as ConnectDrawer } from './ConnectDrawer';
+export { default as ConnectWidgetPanel, type ConnectWidgetPanelProps } from './ConnectWidgetPanel';
 export { default as CurrencyDialog } from './CurrencyDialog';
 export { default as CurrencyInput } from './CurrencyInput';
 export { default as Loader } from './Loader';