@mx-cartographer/experiences 9.4.58 → 9.4.60

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

@@ -1,27 +1,30 @@
-import { useAppConfig as A, useGlobalCopyStore as I, useInsightsV2Store as E } from "../../common/context/hooks.es.js";
+import { useAppConfig as M, useGlobalCopyStore as N, useInsightsV2Store as R } from "../../common/context/hooks.es.js";
 import { sendBeatCta as H } from "../../common/utils/PostMessage.es.js";
-import { blocks as M, hasDrawerBlock as G } from "../mappings/blocks.es.js";
-import R from "./Footer.es.js";
-import { BeatActionsProvider as j } from "../beatActions.es.js";
-import z from "./Header.es.js";
-import { FeedbackBar as N } from "./FeedbackBar.es.js";
-import P from "./FeedbackDialog.es.js";
-import { DismissInsightDialog as U } from "./DismissInsightDialog.es.js";
-import { HiddenConfirmationCard as V } from "./HiddenConfirmationCard.es.js";
-import { ErrorCard as W } from "./ErrorCard.es.js";
-import { LoadingCard as X } from "./LoadingCard.es.js";
-import { ObsolesceBanner as Y } from "./ObsolesceBanner.es.js";
-import { ActionBlockLayer as q } from "../actionBlocks/ActionBlockLayer.es.js";
-import { useBeatFeedbackFlow as J } from "../hooks/useBeatFeedbackFlow.es.js";
-import { observer as K } from "mobx-react-lite";
-import m from "@mui/material/Stack";
-import { P as Q } from "@mxenabled/mxui";
-import p from "@mui/material/Button";
-import { ChevronRight as Z } from "@mxenabled/mx-icons";
-import { Fragment as $, jsx as o, jsxs as t } from "react/jsx-runtime";
-import ee from "@mui/material/Box";
-import oe from "@mui/material/Card";
-var ie = {}, re = {
+import { BeatActionsProvider as P } from "../beatActions.es.js";
+import { isContactSupportCtaDisabled as G } from "../actionBlocks/ContactSupportActionBlock.es.js";
+import { logoFromRef as U } from "./shared/EntityLogo.es.js";
+import { actionBlocksKey as j } from "../mappings/actionBlocksKey.es.js";
+import { blocks as z, hasDrawerBlock as K } from "../mappings/blocks.es.js";
+import V from "./Footer.es.js";
+import W from "./Header.es.js";
+import { FeedbackBar as X } from "./FeedbackBar.es.js";
+import Y from "./FeedbackDialog.es.js";
+import { DismissInsightDialog as q } from "./DismissInsightDialog.es.js";
+import { HiddenConfirmationCard as J } from "./HiddenConfirmationCard.es.js";
+import { ErrorCard as Q } from "./ErrorCard.es.js";
+import { LoadingCard as Z } from "./LoadingCard.es.js";
+import { ObsolesceBanner as $ } from "./ObsolesceBanner.es.js";
+import { ActionBlockLayer as oo } from "../actionBlocks/ActionBlockLayer.es.js";
+import { useBeatFeedbackFlow as eo } from "../hooks/useBeatFeedbackFlow.es.js";
+import { observer as io } from "mobx-react-lite";
+import u from "@mui/material/Stack";
+import { P as to, Text as ro } from "@mxenabled/mxui";
+import b from "@mui/material/Button";
+import { ChevronRight as so } from "@mxenabled/mx-icons";
+import { Fragment as no, jsx as e, jsxs as n } from "react/jsx-runtime";
+import ao from "@mui/material/Box";
+import lo from "@mui/material/Card";
+var co = {}, mo = {
   position: "absolute",
   top: 0,
   left: 0,
@@ -30,61 +33,71 @@ var ie = {}, re = {
   backgroundColor: "background.default",
   opacity: 0.7,
   zIndex: 1
-}, De = K(({ beat: i, beatActions: h = ie, obsolete: s, isLoading: y = !1, isError: g = !1 }) => {
-  const { openCtaDrawer: C } = E(), k = I(), { is_mobile_webview: v, clientConfig: _ } = A(), e = J(i, h);
-  if (g) return /* @__PURE__ */ o(W, {});
-  const r = i.insights_payload;
-  if (!r || e.cardState === "dismissed") return null;
-  const { instance_slot: x, primary_cta: n, secondary_cta: a, sub_title: S, title: w, widget_type: B, guid: d, user_guid: D, dismissed_at: L } = r, { block: O } = x, u = (T, F) => {
-    G(T) ? C(d, F) : H(i, {
-      isMobileWebview: v,
-      webviewScheme: _?.master?.ui_message_webview_url_scheme,
-      userGuid: D
-    });
-  }, f = M[O], b = B === "mini", l = k.insights_feed?.general, c = s?.state === "not_refreshable" && !L && !!l;
-  return /* @__PURE__ */ o(j, {
-    value: e.wrappedActions,
-    children: /* @__PURE__ */ t(m, {
+}, po = {
+  alignItems: "center",
+  alignSelf: "flex-start",
+  display: "flex",
+  fontWeight: 600,
+  height: 44,
+  px: 2,
+  textTransform: "none"
+}, Po = io(({ beat: t, beatActions: c = co, obsolete: m, isLoading: y = !1, isError: _ = !1 }) => {
+  const { openCtaDrawer: v } = R(), x = N(), { is_mobile_webview: k, clientConfig: S, config: T } = M(), o = eo(t, c);
+  if (_) return /* @__PURE__ */ e(Q, {});
+  const i = t.insights_payload;
+  if (!i || o.cardState === "dismissed") return null;
+  const { instance_slot: w, primary_cta: r, secondary_cta: a, sub_title: B, title: D, widget_type: O, guid: C, user_guid: L, dismissed_at: I } = i, { block: F } = w, A = B ?? (i.subtitle ? {
+    logo: U(i.logo),
+    text: i.subtitle
+  } : void 0), l = (s) => G(s, T, c.onContactSupport), g = (s, E) => {
+    l(s) || (s === j.CONTACT_SUPPORT_ACTION_BLOCK ? c.onContactSupport?.() : K(s) ? v(C, E) : H(t, {
+      isMobileWebview: k,
+      webviewScheme: S?.master?.ui_message_webview_url_scheme,
+      userGuid: L
+    }));
+  }, h = z[F], p = O === "mini", d = x.insights_feed?.general, f = m?.state === "not_refreshable" && !I && !!d;
+  return /* @__PURE__ */ e(P, {
+    value: o.wrappedActions,
+    children: /* @__PURE__ */ n(u, {
       sx: { mb: 16 },
       children: [
-        e.cardState === "confirming" ? /* @__PURE__ */ o(V, {
-          onClose: e.collapseConfirmation,
-          onLeaveFeedback: e.openHideSurvey,
-          onUndo: e.undoDismiss
-        }) : /* @__PURE__ */ t($, { children: [s && l && /* @__PURE__ */ o(Y, {
-          ...s,
-          copy: l
-        }), /* @__PURE__ */ t(oe, {
-          inert: c,
-          sx: { ...c && {
+        o.cardState === "confirming" ? /* @__PURE__ */ e(J, {
+          onClose: o.collapseConfirmation,
+          onLeaveFeedback: o.openHideSurvey,
+          onUndo: o.undoDismiss
+        }) : /* @__PURE__ */ n(no, { children: [m && d && /* @__PURE__ */ e($, {
+          ...m,
+          copy: d
+        }), /* @__PURE__ */ n(lo, {
+          inert: f,
+          sx: { ...f && {
             position: "relative",
             zIndex: 2,
             pointerEvents: "none"
           } },
           children: [
-            c && /* @__PURE__ */ o(ee, { sx: re }),
-            /* @__PURE__ */ o(z, {
-              isMini: b,
-              subtitle: S,
-              title: w ?? ""
+            f && /* @__PURE__ */ e(ao, { sx: mo }),
+            /* @__PURE__ */ e(W, {
+              isMini: p,
+              subtitle: A,
+              title: D ?? ""
             }),
-            y ? /* @__PURE__ */ o(X, {}) : f && /* @__PURE__ */ o(f, {
-              beatGuid: d,
-              payload: r
+            y ? /* @__PURE__ */ e(Z, {}) : h && /* @__PURE__ */ e(h, {
+              beatGuid: C,
+              payload: i
             }),
-            /* @__PURE__ */ t(m, {
+            /* @__PURE__ */ n(u, {
               sx: {
                 gap: 6,
                 pb: 16,
-                pl: 12,
-                pr: 16,
-                pt: 12
+                pt: 12,
+                px: 16
               },
-              children: [/* @__PURE__ */ o(Q, {
-                dangerouslySetInnerHTML: { __html: r.description.html_text },
+              children: [/* @__PURE__ */ e(to, {
+                dangerouslySetInnerHTML: { __html: i.description.html_text },
                 variant: "subtitle2"
-              }), i?.in_description_cta && /* @__PURE__ */ o(p, {
-                endIcon: /* @__PURE__ */ o(Z, {}),
+              }), t?.in_description_cta && /* @__PURE__ */ e(b, {
+                endIcon: /* @__PURE__ */ e(so, {}),
                 onClick: () => {
                 },
                 sx: {
@@ -92,57 +105,65 @@ var ie = {}, re = {
                   p: 4,
                   width: "max-content"
                 },
-                children: i.in_description_cta
+                children: t.in_description_cta
               })]
             }),
-            !b && n?.label && /* @__PURE__ */ t(m, {
+            r?.label && /* @__PURE__ */ n(u, {
               sx: {
                 gap: 8,
                 pb: 16,
                 px: 16
               },
-              children: [/* @__PURE__ */ o(p, {
-                onClick: () => u(n.block, "primaryCta"),
+              children: [p ? /* @__PURE__ */ e(ro, {
+                color: "primary.main",
+                sx: po,
+                variant: "button",
+                children: r.label
+              }) : /* @__PURE__ */ e(b, {
+                "aria-disabled": l(r.block),
+                onClick: () => g(r.block, "primaryCta"),
+                sx: { ...l(r.block) && { color: "text.disabled" } },
                 variant: "outlined",
-                children: n.label
-              }), a?.label && /* @__PURE__ */ o(p, {
+                children: r.label
+              }), !p && a?.label && /* @__PURE__ */ e(b, {
+                "aria-disabled": l(a.block),
                 color: "secondary",
-                onClick: () => u(a.block, "secondaryCta"),
+                onClick: () => g(a.block, "secondaryCta"),
                 children: a.label
               })]
             }),
-            /* @__PURE__ */ o(N, {
-              onTellUsMore: e.openRatingSurvey,
-              show: e.isFeedbackBarShown
+            /* @__PURE__ */ e(X, {
+              onTellUsMore: o.openRatingSurvey,
+              show: o.isFeedbackBarShown
             })
           ]
         })] }),
-        /* @__PURE__ */ o(q, { beat: i }),
-        /* @__PURE__ */ o(U, {
-          isOpen: e.isDismissOpen,
-          onClose: e.closeDismissDialog,
-          onDismiss: e.confirmDismiss
+        /* @__PURE__ */ e(oo, { beat: t }),
+        /* @__PURE__ */ e(q, {
+          isOpen: o.isDismissOpen,
+          onClose: o.closeDismissDialog,
+          onDismiss: o.confirmDismiss
         }),
-        e.isSurveyOpen && /* @__PURE__ */ o(P, {
-          characterLimitLabel: e.survey.characterLimitLabel,
-          closeAriaLabel: e.survey.closeAriaLabel,
+        o.isSurveyOpen && /* @__PURE__ */ e(Y, {
+          characterLimitLabel: o.survey.characterLimitLabel,
+          closeAriaLabel: o.survey.closeAriaLabel,
           isOpen: !0,
-          onBackClick: e.feedbackDialogCallbacks.onBackClick,
-          onClose: e.closeSurvey,
-          onSubmit: e.submitSurvey,
-          onTextInputFocus: e.feedbackDialogCallbacks.onTextInputFocus,
-          options: e.survey.options,
-          primaryText: e.survey.submitText,
-          secondaryText: e.survey.backText,
-          title: e.survey.title
+          onBackClick: o.feedbackDialogCallbacks.onBackClick,
+          onClose: o.closeSurvey,
+          onSubmit: o.submitSurvey,
+          onTextInputFocus: o.feedbackDialogCallbacks.onTextInputFocus,
+          options: o.survey.options,
+          primaryText: o.survey.submitText,
+          secondaryText: o.survey.backText,
+          title: o.survey.title
         }),
-        e.cardState === "visible" && r.footer && /* @__PURE__ */ o(R, { footer: r.footer })
+        o.cardState === "visible" && i.footer && /* @__PURE__ */ e(V, { footer: i.footer })
       ]
     })
   });
 });
 export {
-  De as default
+  Po as default
 };
 
 //# sourceMappingURL=BaseLayout.es.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"BaseLayout.es.js","names":[],"sources":["../../../src/insights-v2/components/BaseLayout.tsx"],"sourcesContent":["import { observer } from 'mobx-react-lite'\n\nimport Box from '@mui/material/Box'\nimport Button from '@mui/material/Button'\nimport Card from '@mui/material/Card'\nimport Stack from '@mui/material/Stack'\n\nimport { ChevronRight } from '@mxenabled/mx-icons'\nimport { P } from '@mxenabled/mxui'\n\nimport { blocks, hasDrawerBlock } from '../mappings/blocks'\n\nimport Footer from './Footer'\nimport Header from './Header'\nimport FeedbackBar from './FeedbackBar'\nimport FeedbackDialog from './FeedbackDialog'\nimport DismissInsightDialog from './DismissInsightDialog'\nimport HiddenConfirmationCard from './HiddenConfirmationCard'\nimport ErrorCard from './ErrorCard'\nimport LoadingCard from './LoadingCard'\nimport { ObsolesceBanner, type ObsolesceBannerState } from './ObsolesceBanner'\nimport { useAppConfig, useGlobalCopyStore, useInsightsV2Store } from '../../common'\nimport { sendBeatCta } from '../../common/utils/PostMessage'\nimport type { Beat } from '../../core'\nimport { BeatActionsProvider, type BeatActions } from '../beatActions'\nimport { ActionBlockLayer } from '../actionBlocks/ActionBlockLayer'\nimport { useBeatFeedbackFlow } from '../hooks/useBeatFeedbackFlow'\n\nexport interface ObsoleteState {\n  state: ObsolesceBannerState\n  onRefresh: () => void\n  onDismiss: () => void\n}\n\ninterface BaseLayoutProps {\n  beat: Beat\n  beatActions?: BeatActions\n  obsolete?: ObsoleteState\n  /** Swap only the block slot for a LoadingCard (e.g. while a sampled beat loads). */\n  isLoading?: boolean\n  /** Replace the entire card with an ErrorCard (e.g. when the sample fails to load). */\n  isError?: boolean\n}\n\nconst NO_BEAT_ACTIONS: BeatActions = {}\n\nconst OBSOLETE_OVERLAY_SX = {\n  position: 'absolute',\n  top: 0,\n  left: 0,\n  width: '100%',\n  height: '100%',\n  backgroundColor: 'background.default',\n  opacity: 0.7,\n  zIndex: 1,\n} as const\n\nconst BaseLayout = observer(\n  ({\n    beat,\n    beatActions = NO_BEAT_ACTIONS,\n    obsolete,\n    isLoading = false,\n    isError = false,\n  }: BaseLayoutProps) => {\n    const { openCtaDrawer } = useInsightsV2Store()\n    const copy = useGlobalCopyStore()\n    const { is_mobile_webview, clientConfig } = useAppConfig()\n    const flow = useBeatFeedbackFlow(beat, beatActions)\n\n    // Error replaces the entire card; loading only swaps the block slot (below).\n    if (isError) return <ErrorCard />\n\n    const insights_payload = beat.insights_payload\n\n    if (!insights_payload) return null\n    if (flow.cardState === 'dismissed') return null\n\n    const {\n      instance_slot,\n      primary_cta,\n      secondary_cta,\n      sub_title,\n      title,\n      widget_type,\n      guid,\n      user_guid,\n      dismissed_at,\n    } = insights_payload\n    const { block } = instance_slot\n\n    // A CTA with a real drilldown `block` opens a drawer; otherwise it notifies\n    // the host app via a beat/cta post message (the \"Make a Transfer\" CTA on the\n    // Save an extra $100 beat). Mirrors Pulse's SaveAnExtra100Dollars beat.\n    const handleCtaClick = (\n      ctaBlock: string | null | undefined,\n      source: 'primaryCta' | 'secondaryCta',\n    ) => {\n      if (hasDrawerBlock(ctaBlock)) {\n        openCtaDrawer(guid, source)\n      } else {\n        sendBeatCta(beat, {\n          isMobileWebview: is_mobile_webview,\n          webviewScheme: clientConfig?.master?.ui_message_webview_url_scheme,\n          userGuid: user_guid,\n        })\n      }\n    }\n\n    const Block = blocks[block as keyof typeof blocks]\n\n    const isMini = widget_type === 'mini'\n    const obsoleteCopy = copy.insights_feed?.general\n    const isObsoleteDimmed =\n      obsolete?.state === 'not_refreshable' && !dismissed_at && !!obsoleteCopy\n\n    return (\n      <BeatActionsProvider value={flow.wrappedActions}>\n        <Stack sx={{ mb: 16 }}>\n          {flow.cardState === 'confirming' ? (\n            <HiddenConfirmationCard\n              onClose={flow.collapseConfirmation}\n              onLeaveFeedback={flow.openHideSurvey}\n              onUndo={flow.undoDismiss}\n            />\n          ) : (\n            <>\n              {obsolete && obsoleteCopy && <ObsolesceBanner {...obsolete} copy={obsoleteCopy} />}\n              <Card\n                inert={isObsoleteDimmed}\n                sx={{\n                  ...(isObsoleteDimmed && {\n                    position: 'relative',\n                    zIndex: 2,\n                    pointerEvents: 'none',\n                  }),\n                }}\n              >\n                {isObsoleteDimmed && <Box sx={OBSOLETE_OVERLAY_SX} />}\n                <Header isMini={isMini} subtitle={sub_title} title={title ?? ''} />\n                {isLoading ? (\n                  <LoadingCard />\n                ) : (\n                  Block && <Block beatGuid={guid} payload={insights_payload} />\n                )}\n\n                <Stack sx={{ gap: 6, pb: 16, pl: 12, pr: 16, pt: 12 }}>\n                  <P\n                    dangerouslySetInnerHTML={{\n                      __html: insights_payload.description.html_text,\n                    }}\n                    variant=\"subtitle2\"\n                  />\n                  {/* TODO: Migrate to insights_payload.in_description_cta once backend provides it */}\n                  {beat?.in_description_cta && (\n                    <Button\n                      endIcon={<ChevronRight />}\n                      onClick={() => {}}\n                      sx={{ height: 24, p: 4, width: 'max-content' }}\n                    >\n                      {beat.in_description_cta}\n                    </Button>\n                  )}\n                </Stack>\n\n                {!isMini && primary_cta?.label && (\n                  <Stack sx={{ gap: 8, pb: 16, px: 16 }}>\n                    <Button\n                      onClick={() => handleCtaClick(primary_cta.block, 'primaryCta')}\n                      variant=\"outlined\"\n                    >\n                      {primary_cta.label}\n                    </Button>\n                    {secondary_cta?.label && (\n                      <Button\n                        color=\"secondary\"\n                        onClick={() => handleCtaClick(secondary_cta.block, 'secondaryCta')}\n                      >\n                        {secondary_cta.label}\n                      </Button>\n                    )}\n                  </Stack>\n                )}\n\n                <FeedbackBar onTellUsMore={flow.openRatingSurvey} show={flow.isFeedbackBarShown} />\n              </Card>\n            </>\n          )}\n\n          <ActionBlockLayer beat={beat} />\n\n          <DismissInsightDialog\n            isOpen={flow.isDismissOpen}\n            onClose={flow.closeDismissDialog}\n            onDismiss={flow.confirmDismiss}\n          />\n\n          {flow.isSurveyOpen && (\n            <FeedbackDialog\n              characterLimitLabel={flow.survey.characterLimitLabel}\n              closeAriaLabel={flow.survey.closeAriaLabel}\n              isOpen={true}\n              onBackClick={flow.feedbackDialogCallbacks.onBackClick}\n              onClose={flow.closeSurvey}\n              onSubmit={flow.submitSurvey}\n              onTextInputFocus={flow.feedbackDialogCallbacks.onTextInputFocus}\n              options={flow.survey.options}\n              primaryText={flow.survey.submitText}\n              secondaryText={flow.survey.backText}\n              title={flow.survey.title}\n            />\n          )}\n\n          {flow.cardState === 'visible' && insights_payload.footer && (\n            <Footer footer={insights_payload.footer} />\n          )}\n        </Stack>\n      </BeatActionsProvider>\n    )\n  },\n)\n\nexport default BaseLayout\n"],"mappings":"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"}
+{"version":3,"file":"BaseLayout.es.js","names":[],"sources":["../../../src/insights-v2/components/BaseLayout.tsx"],"sourcesContent":["import { observer } from 'mobx-react-lite'\n\nimport Box from '@mui/material/Box'\nimport Button from '@mui/material/Button'\nimport Card from '@mui/material/Card'\nimport Stack from '@mui/material/Stack'\n\nimport { ChevronRight } from '@mxenabled/mx-icons'\nimport { P, Text } from '@mxenabled/mxui'\n\nimport { blocks, hasDrawerBlock } from '../mappings/blocks'\nimport { actionBlocksKey } from '../mappings/actionBlocksKey'\nimport { isContactSupportCtaDisabled } from '../actionBlocks/ContactSupportActionBlock'\nimport { logoFromRef } from './shared/EntityLogo'\n\nimport Footer from './Footer'\nimport Header from './Header'\nimport FeedbackBar from './FeedbackBar'\nimport FeedbackDialog from './FeedbackDialog'\nimport DismissInsightDialog from './DismissInsightDialog'\nimport HiddenConfirmationCard from './HiddenConfirmationCard'\nimport ErrorCard from './ErrorCard'\nimport LoadingCard from './LoadingCard'\nimport { ObsolesceBanner, type ObsolesceBannerState } from './ObsolesceBanner'\nimport { useAppConfig, useGlobalCopyStore, useInsightsV2Store } from '../../common'\nimport { sendBeatCta } from '../../common/utils/PostMessage'\nimport type { Beat } from '../../core'\nimport { BeatActionsProvider, type BeatActions } from '../beatActions'\nimport { ActionBlockLayer } from '../actionBlocks/ActionBlockLayer'\nimport { useBeatFeedbackFlow } from '../hooks/useBeatFeedbackFlow'\n\nexport interface ObsoleteState {\n  state: ObsolesceBannerState\n  onRefresh: () => void\n  onDismiss: () => void\n}\n\ninterface BaseLayoutProps {\n  beat: Beat\n  beatActions?: BeatActions\n  obsolete?: ObsoleteState\n  /** Swap only the block slot for a LoadingCard (e.g. while a sampled beat loads). */\n  isLoading?: boolean\n  /** Replace the entire card with an ErrorCard (e.g. when the sample fails to load). */\n  isError?: boolean\n}\n\nconst NO_BEAT_ACTIONS: BeatActions = {}\n\nconst OBSOLETE_OVERLAY_SX = {\n  position: 'absolute',\n  top: 0,\n  left: 0,\n  width: '100%',\n  height: '100%',\n  backgroundColor: 'background.default',\n  opacity: 0.7,\n  zIndex: 1,\n} as const\n\n// Figma (Mini | Large Transaction): a left-aligned link under the description. The 2px padding plus\n// the CTA row's 16 lines the label up with the description's 18. The label is not a Button, so it\n// carries the theme's MuiButton look itself: semi-bold, no uppercase (typography.button uppercases),\n// and the medium Button's 44px height with the text centred.\nconst MINI_CTA_SX = {\n  alignItems: 'center',\n  alignSelf: 'flex-start',\n  display: 'flex',\n  fontWeight: 600,\n  height: 44,\n  px: 2,\n  textTransform: 'none',\n} as const\n\nconst BaseLayout = observer(\n  ({\n    beat,\n    beatActions = NO_BEAT_ACTIONS,\n    obsolete,\n    isLoading = false,\n    isError = false,\n  }: BaseLayoutProps) => {\n    const { openCtaDrawer } = useInsightsV2Store()\n    const copy = useGlobalCopyStore()\n    const { is_mobile_webview, clientConfig, config } = useAppConfig()\n    const flow = useBeatFeedbackFlow(beat, beatActions)\n\n    // Error replaces the entire card; loading only swaps the block slot (below).\n    if (isError) return <ErrorCard />\n\n    const insights_payload = beat.insights_payload\n\n    if (!insights_payload) return null\n    if (flow.cardState === 'dismissed') return null\n\n    const {\n      instance_slot,\n      primary_cta,\n      secondary_cta,\n      sub_title,\n      title,\n      widget_type,\n      guid,\n      user_guid,\n      dismissed_at,\n    } = insights_payload\n    const { block } = instance_slot\n\n    // V1 sends `sub_title: { text, logo }`. The V2 envelope flattens it to a `subtitle` string\n    // with the logo promoted to a payload-level `LogoRef` (an entity guid or a status icon), so\n    // rebuild the shape `Header`/`SubHeader` already render. `sub_title` wins when a beat sends both.\n    const subtitle =\n      sub_title ??\n      (insights_payload.subtitle\n        ? {\n            logo: logoFromRef(insights_payload.logo),\n            text: insights_payload.subtitle,\n          }\n        : undefined)\n\n    // A CTA with a real drilldown `block` opens a drawer; otherwise it notifies\n    // the host app via a beat/cta post message (the \"Make a Transfer\" CTA on the\n    // Save an extra $100 beat). Mirrors Pulse's SaveAnExtra100Dollars beat.\n    //\n    // `contact_support_block` is the exception: it is the help module's flow, which insights-v2\n    // cannot import (hosts that don't ship the Help widget stub the import), so the host injects it\n    // as `beatActions.onContactSupport` and the CTA calls it directly — never a drawer. Without a\n    // handler, or with `enable_support_requests` off, the CTA renders disabled and does nothing.\n    const isCtaDisabled = (ctaBlock: string | null | undefined) =>\n      isContactSupportCtaDisabled(ctaBlock, config, beatActions.onContactSupport)\n\n    const handleCtaClick = (\n      ctaBlock: string | null | undefined,\n      source: 'primaryCta' | 'secondaryCta',\n    ) => {\n      if (isCtaDisabled(ctaBlock)) return\n\n      if (ctaBlock === actionBlocksKey.CONTACT_SUPPORT_ACTION_BLOCK) {\n        beatActions.onContactSupport?.()\n      } else if (hasDrawerBlock(ctaBlock)) {\n        openCtaDrawer(guid, source)\n      } else {\n        sendBeatCta(beat, {\n          isMobileWebview: is_mobile_webview,\n          webviewScheme: clientConfig?.master?.ui_message_webview_url_scheme,\n          userGuid: user_guid,\n        })\n      }\n    }\n\n    const Block = blocks[block as keyof typeof blocks]\n\n    const isMini = widget_type === 'mini'\n    const obsoleteCopy = copy.insights_feed?.general\n    const isObsoleteDimmed =\n      obsolete?.state === 'not_refreshable' && !dismissed_at && !!obsoleteCopy\n\n    return (\n      <BeatActionsProvider value={flow.wrappedActions}>\n        <Stack sx={{ mb: 16 }}>\n          {flow.cardState === 'confirming' ? (\n            <HiddenConfirmationCard\n              onClose={flow.collapseConfirmation}\n              onLeaveFeedback={flow.openHideSurvey}\n              onUndo={flow.undoDismiss}\n            />\n          ) : (\n            <>\n              {obsolete && obsoleteCopy && <ObsolesceBanner {...obsolete} copy={obsoleteCopy} />}\n              <Card\n                inert={isObsoleteDimmed}\n                sx={{\n                  ...(isObsoleteDimmed && {\n                    position: 'relative',\n                    zIndex: 2,\n                    pointerEvents: 'none',\n                  }),\n                }}\n              >\n                {isObsoleteDimmed && <Box sx={OBSOLETE_OVERLAY_SX} />}\n                <Header isMini={isMini} subtitle={subtitle} title={title ?? ''} />\n                {isLoading ? (\n                  <LoadingCard />\n                ) : (\n                  Block && <Block beatGuid={guid} payload={insights_payload} />\n                )}\n\n                <Stack sx={{ gap: 6, pb: 16, pt: 12, px: 16 }}>\n                  <P\n                    dangerouslySetInnerHTML={{\n                      __html: insights_payload.description.html_text,\n                    }}\n                    variant=\"subtitle2\"\n                  />\n                  {/* TODO: Migrate to insights_payload.in_description_cta once backend provides it */}\n                  {beat?.in_description_cta && (\n                    <Button\n                      endIcon={<ChevronRight />}\n                      onClick={() => {}}\n                      sx={{ height: 24, p: 4, width: 'max-content' }}\n                    >\n                      {beat.in_description_cta}\n                    </Button>\n                  )}\n                </Stack>\n\n                {primary_cta?.label && (\n                  <Stack sx={{ gap: 8, pb: 16, px: 16 }}>\n                    {isMini ? (\n                      // Mini is a tap target, as in V1: the card, not this label, is the control. The label\n                      // is deliberately not a button, so a tap on it reaches the host's card handler (Pulse\n                      // posts `carousel/cta`, the same redirect a V1 mini card sends) instead of opening\n                      // the action drawer the full card's CTA opens.\n                      <Text color=\"primary.main\" sx={MINI_CTA_SX} variant=\"button\">\n                        {primary_cta.label}\n                      </Text>\n                    ) : (\n                      <Button\n                        aria-disabled={isCtaDisabled(primary_cta.block)}\n                        onClick={() => handleCtaClick(primary_cta.block, 'primaryCta')}\n                        sx={{\n                          ...(isCtaDisabled(primary_cta.block) && { color: 'text.disabled' }),\n                        }}\n                        variant=\"outlined\"\n                      >\n                        {primary_cta.label}\n                      </Button>\n                    )}\n                    {/* Mini has room for one CTA. */}\n                    {!isMini && secondary_cta?.label && (\n                      <Button\n                        aria-disabled={isCtaDisabled(secondary_cta.block)}\n                        color=\"secondary\"\n                        onClick={() => handleCtaClick(secondary_cta.block, 'secondaryCta')}\n                      >\n                        {secondary_cta.label}\n                      </Button>\n                    )}\n                  </Stack>\n                )}\n\n                <FeedbackBar onTellUsMore={flow.openRatingSurvey} show={flow.isFeedbackBarShown} />\n              </Card>\n            </>\n          )}\n\n          <ActionBlockLayer beat={beat} />\n\n          <DismissInsightDialog\n            isOpen={flow.isDismissOpen}\n            onClose={flow.closeDismissDialog}\n            onDismiss={flow.confirmDismiss}\n          />\n\n          {flow.isSurveyOpen && (\n            <FeedbackDialog\n              characterLimitLabel={flow.survey.characterLimitLabel}\n              closeAriaLabel={flow.survey.closeAriaLabel}\n              isOpen={true}\n              onBackClick={flow.feedbackDialogCallbacks.onBackClick}\n              onClose={flow.closeSurvey}\n              onSubmit={flow.submitSurvey}\n              onTextInputFocus={flow.feedbackDialogCallbacks.onTextInputFocus}\n              options={flow.survey.options}\n              primaryText={flow.survey.submitText}\n              secondaryText={flow.survey.backText}\n              title={flow.survey.title}\n            />\n          )}\n\n          {flow.cardState === 'visible' && insights_payload.footer && (\n            <Footer footer={insights_payload.footer} />\n          )}\n        </Stack>\n      </BeatActionsProvider>\n    )\n  },\n)\n\nexport default BaseLayout\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AA+CA,IAAM,KAA+B,CAAC,GAEhC,KAAsB;AAAA,EAC1B,UAAU;AAAA,EACV,KAAK;AAAA,EACL,MAAM;AAAA,EACN,OAAO;AAAA,EACP,QAAQ;AAAA,EACR,iBAAiB;AAAA,EACjB,SAAS;AAAA,EACT,QAAQ;AACV,GAMM,KAAc;AAAA,EAClB,YAAY;AAAA,EACZ,WAAW;AAAA,EACX,SAAS;AAAA,EACT,YAAY;AAAA,EACZ,QAAQ;AAAA,EACR,IAAI;AAAA,EACJ,eAAe;AACjB,GAEM,KAAa,GAAA,CAChB,EACC,MAAA,GACA,aAAA,IAAc,IACd,UAAA,GACA,WAAA,IAAY,IACZ,SAAA,IAAU,GAAA,MACW;AACrB,QAAM,EAAE,eAAA,EAAA,IAAkB,EAAmB,GACvC,IAAO,EAAmB,GAC1B,EAAE,mBAAA,GAAmB,cAAA,GAAc,QAAA,EAAA,IAAW,EAAa,GAC3D,IAAO,GAAoB,GAAM,CAAW;AAGlD,MAAI,EAAS,QAAO,gBAAA,EAAC,GAAD,CAAY,CAAA;AAEhC,QAAM,IAAmB,EAAK;AAG9B,MADI,CAAC,KACD,EAAK,cAAc,YAAa,QAAO;AAE3C,QAAM,EACJ,eAAA,GACA,aAAA,GACA,eAAA,GACA,WAAA,GACA,OAAA,GACA,aAAA,GACA,MAAA,GACA,WAAA,GACA,cAAA,EAAA,IACE,GACE,EAAE,OAAA,EAAA,IAAU,GAKZ,IACJ,MACC,EAAiB,WACd;AAAA,IACE,MAAM,EAAY,EAAiB,IAAI;AAAA,IACvC,MAAM,EAAiB;AAAA,EACzB,IACA,SAUA,IAAA,CAAiB,MACrB,EAA4B,GAAU,GAAQ,EAAY,gBAAgB,GAEtE,IAAA,CACJ,GACA,MACG;AACH,IAAI,EAAc,CAAQ,MAEtB,MAAa,EAAgB,+BAC/B,EAAY,mBAAmB,IACtB,EAAe,CAAQ,IAChC,EAAc,GAAM,CAAM,IAE1B,EAAY,GAAM;AAAA,MAChB,iBAAiB;AAAA,MACjB,eAAe,GAAc,QAAQ;AAAA,MACrC,UAAU;AAAA,IACZ,CAAC;AAAA,EAEL,GAEM,IAAQ,EAAO,CAAA,GAEf,IAAS,MAAgB,QACzB,IAAe,EAAK,eAAe,SACnC,IACJ,GAAU,UAAU,qBAAqB,CAAC,KAAgB,CAAC,CAAC;AAE9D,SACE,gBAAA,EAAC,GAAD;AAAA,IAAqB,OAAO,EAAK;AAAA,IAC/B,UAAA,gBAAA,EAAC,GAAD;AAAA,MAAO,IAAI,EAAE,IAAI,GAAG;AAAA,MAApB,UAAA;AAAA,QACG,EAAK,cAAc,eAClB,gBAAA,EAAC,GAAD;AAAA,UACE,SAAS,EAAK;AAAA,UACd,iBAAiB,EAAK;AAAA,UACtB,QAAQ,EAAK;AAAA,QACd,CAAA,IAED,gBAAA,EAAA,IAAA,EAAA,UAAA,CACG,KAAY,KAAgB,gBAAA,EAAC,GAAD;AAAA,UAAiB,GAAI;AAAA,UAAU,MAAM;AAAA,QAAe,CAAA,GACjF,gBAAA,EAAC,IAAD;AAAA,UACE,OAAO;AAAA,UACP,IAAI,EACF,GAAI,KAAoB;AAAA,YACtB,UAAU;AAAA,YACV,QAAQ;AAAA,YACR,eAAe;AAAA,UACjB,EACF;AAAA,UARF,UAAA;AAAA,YAUG,KAAoB,gBAAA,EAAC,IAAD,EAAK,IAAI,GAAsB,CAAA;AAAA,YACpD,gBAAA,EAAC,GAAD;AAAA,cAAgB,QAAA;AAAA,cAAkB,UAAA;AAAA,cAAU,OAAO,KAAS;AAAA,YAAK,CAAA;AAAA,YAChE,IACC,gBAAA,EAAC,GAAD,CAAc,CAAA,IAEd,KAAS,gBAAA,EAAC,GAAD;AAAA,cAAO,UAAU;AAAA,cAAM,SAAS;AAAA,YAAmB,CAAA;AAAA,YAG9D,gBAAA,EAAC,GAAD;AAAA,cAAO,IAAI;AAAA,gBAAE,KAAK;AAAA,gBAAG,IAAI;AAAA,gBAAI,IAAI;AAAA,gBAAI,IAAI;AAAA,cAAG;AAAA,cAA5C,UAAA,CACE,gBAAA,EAAC,IAAD;AAAA,gBACE,yBAAyB,EACvB,QAAQ,EAAiB,YAAY,UACvC;AAAA,gBACA,SAAQ;AAAA,cACT,CAAA,GAEA,GAAM,sBACL,gBAAA,EAAC,GAAD;AAAA,gBACE,SAAS,gBAAA,EAAC,IAAD,CAAe,CAAA;AAAA,gBACxB,SAAA,MAAe;AAAA,gBAAC;AAAA,gBAChB,IAAI;AAAA,kBAAE,QAAQ;AAAA,kBAAI,GAAG;AAAA,kBAAG,OAAO;AAAA,gBAAc;AAAA,gBAE5C,UAAA,EAAK;AAAA,cACA,CAAA,CAEL;AAAA;YAEN,GAAa,SACZ,gBAAA,EAAC,GAAD;AAAA,cAAO,IAAI;AAAA,gBAAE,KAAK;AAAA,gBAAG,IAAI;AAAA,gBAAI,IAAI;AAAA,cAAG;AAAA,cAApC,UAAA,CACG,IAKC,gBAAA,EAAC,IAAD;AAAA,gBAAM,OAAM;AAAA,gBAAe,IAAI;AAAA,gBAAa,SAAQ;AAAA,gBACjD,UAAA,EAAY;AAAA,cACT,CAAA,IAEN,gBAAA,EAAC,GAAD;AAAA,gBACE,iBAAe,EAAc,EAAY,KAAK;AAAA,gBAC9C,SAAA,MAAe,EAAe,EAAY,OAAO,YAAY;AAAA,gBAC7D,IAAI,EACF,GAAI,EAAc,EAAY,KAAK,KAAK,EAAE,OAAO,gBAAgB,EACnE;AAAA,gBACA,SAAQ;AAAA,gBAEP,UAAA,EAAY;AAAA,cACP,CAAA,GAGT,CAAC,KAAU,GAAe,SACzB,gBAAA,EAAC,GAAD;AAAA,gBACE,iBAAe,EAAc,EAAc,KAAK;AAAA,gBAChD,OAAM;AAAA,gBACN,SAAA,MAAe,EAAe,EAAc,OAAO,cAAc;AAAA,gBAEhE,UAAA,EAAc;AAAA,cACT,CAAA,CAEL;AAAA;YAGT,gBAAA,EAAC,GAAD;AAAA,cAAa,cAAc,EAAK;AAAA,cAAkB,MAAM,EAAK;AAAA,YAAqB,CAAA;AAAA,UAC9E;AAAA,QACN,CAAA,CAAA,EAAA,CAAA;AAAA,QAGJ,gBAAA,EAAC,IAAD,EAAwB,MAAA,EAAO,CAAA;AAAA,QAE/B,gBAAA,EAAC,GAAD;AAAA,UACE,QAAQ,EAAK;AAAA,UACb,SAAS,EAAK;AAAA,UACd,WAAW,EAAK;AAAA,QACjB,CAAA;AAAA,QAEA,EAAK,gBACJ,gBAAA,EAAC,GAAD;AAAA,UACE,qBAAqB,EAAK,OAAO;AAAA,UACjC,gBAAgB,EAAK,OAAO;AAAA,UAC5B,QAAQ;AAAA,UACR,aAAa,EAAK,wBAAwB;AAAA,UAC1C,SAAS,EAAK;AAAA,UACd,UAAU,EAAK;AAAA,UACf,kBAAkB,EAAK,wBAAwB;AAAA,UAC/C,SAAS,EAAK,OAAO;AAAA,UACrB,aAAa,EAAK,OAAO;AAAA,UACzB,eAAe,EAAK,OAAO;AAAA,UAC3B,OAAO,EAAK,OAAO;AAAA,QACpB,CAAA;AAAA,QAGF,EAAK,cAAc,aAAa,EAAiB,UAChD,gBAAA,EAAC,GAAD,EAAQ,QAAQ,EAAiB,OAAS,CAAA;AAAA,MAEvC;AAAA;EACY,CAAA;AAEzB,CACF"}

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

@@ -0,0 +1,31 @@
+import { InsightsPayload, PrimaryCTA } from '../../core';
+export interface CompactInsightCardProps {
+    /** A `micro` or `embedded` envelope. */
+    payload: InsightsPayload;
+    /**
+     * Makes the whole card the tap target. What a tap does is the host's decision (post to the
+     * host app, open a drawer, …); the card never opens anything itself. Omit for a static card.
+     */
+    onTap?: () => void;
+    /** Receives the primary CTA when tapped. The card does not resolve the CTA's block itself. */
+    onCtaClick?: (cta: PrimaryCTA) => void;
+    /**
+     * Renders the CTA disabled — label shown, `aria-disabled`, not tappable — for a host that cannot
+     * honour it (e.g. `contact_support_block` when the client's `enable_support_requests` is off).
+     */
+    isCtaDisabled?: boolean;
+}
+/**
+ * The one compact renderer the micro and embedded envelopes share (`insights_v2.2.md` §8.3).
+ *
+ * Figma 1941:111897 (Embedded | Large Transaction): a title row with the overflow slot, the HTML
+ * description with the primary CTA under it, and on the right the first slot row's logo in a
+ * `<BadgedTile>`. Under ditto's `embedded` variant the tile takes a status badge; micro sends no
+ * variant and draws the logo alone. The card lays out from the envelope alone and never reads
+ * `widget_type`.
+ *
+ * The icon falls back to the neutral insight glyph **here**, not in `LogoFromGuid`, when the slot
+ * has no row. The `pill` on the same envelope is the transaction row's, not the card's.
+ */
+declare const CompactInsightCard: ({ isCtaDisabled, onCtaClick, onTap, payload, }: CompactInsightCardProps) => import("react/jsx-runtime").JSX.Element;
+export default CompactInsightCard;

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

@@ -0,0 +1,129 @@
+import { createVariantBlock as b } from "../blocks/createVariantBlock.es.js";
+import c from "./BadgedTile.es.js";
+import { InsightOptionsMenu as y } from "./InsightOptionsMenu.es.js";
+import k from "./LogoFromGuid.es.js";
+import I from "./StatusBadge.es.js";
+import l from "@mui/material/Stack";
+import { P as v, Text as w } from "@mxenabled/mxui";
+import C from "@mui/material/Button";
+import { Icon as S } from "@mxenabled/mx-icons";
+import { jsx as t, jsxs as n } from "react/jsx-runtime";
+import d from "@mui/material/Box";
+import _ from "@mui/material/Card";
+var e = 44, m = ({ logo: r }) => r ? /* @__PURE__ */ t(k, {
+  logo: r,
+  size: e
+}) : /* @__PURE__ */ t(d, {
+  "data-testid": "compact-insight-card-fallback-icon",
+  sx: {
+    alignItems: "center",
+    bgcolor: "primary.lighter",
+    display: "flex",
+    height: e,
+    justifyContent: "center",
+    width: e
+  },
+  children: /* @__PURE__ */ t(S, {
+    color: "primary",
+    fill: !0,
+    name: "lightbulb",
+    size: 24
+  })
+}), z = ({ logo: r }) => /* @__PURE__ */ t(c, {
+  center: /* @__PURE__ */ t(m, { logo: r }),
+  size: e,
+  sx: { flexShrink: 0 }
+}), B = ({ logo: r }) => /* @__PURE__ */ t(c, {
+  center: /* @__PURE__ */ t(m, { logo: r }),
+  size: e,
+  sx: { flexShrink: 0 },
+  topRight: /* @__PURE__ */ t(I, { tone: "warning" })
+}), P = b({
+  variants: { embedded: B },
+  fallback: z,
+  name: "InsightVisual"
+}), V = (r) => r.stopPropagation(), T = ({ isCtaDisabled: r = !1, onCtaClick: p, onTap: a, payload: f }) => {
+  const { description: g, instance_slot: s, primary_cta: o, title: h } = f, x = s.data_series?.[0]?.logo, u = (i) => {
+    i.stopPropagation(), !(r || !o) && p?.(o);
+  };
+  return /* @__PURE__ */ n(_, {
+    "data-testid": "compact-insight-card",
+    ...a ? {
+      onClick: a,
+      onKeyDown: (i) => {
+        i.target === i.currentTarget && (i.key === "Enter" || i.key === " ") && (i.preventDefault(), a?.());
+      },
+      role: "button",
+      tabIndex: 0
+    } : {},
+    sx: {
+      minWidth: 288,
+      pb: 12,
+      pl: 8,
+      pr: 16,
+      pt: 8,
+      ...a && { cursor: "pointer" }
+    },
+    children: [/* @__PURE__ */ n(l, {
+      sx: {
+        alignItems: "center",
+        flexDirection: "row",
+        gap: 8,
+        justifyContent: "space-between",
+        pl: 8,
+        pt: 4
+      },
+      children: [/* @__PURE__ */ t(w, {
+        bold: !0,
+        variant: "body1",
+        children: h ?? ""
+      }), /* @__PURE__ */ t(d, {
+        onClick: V,
+        sx: { display: "flex" },
+        children: /* @__PURE__ */ t(y, {})
+      })]
+    }), /* @__PURE__ */ n(l, {
+      sx: {
+        flexDirection: "row",
+        gap: 16,
+        pl: 8,
+        pt: 4
+      },
+      children: [/* @__PURE__ */ n(l, {
+        sx: {
+          flex: 1,
+          gap: 8,
+          minWidth: 0
+        },
+        children: [/* @__PURE__ */ t(v, {
+          dangerouslySetInnerHTML: { __html: g.html_text },
+          "data-testid": "compact-insight-card-description",
+          variant: "subtitle2"
+        }), o?.label && /* @__PURE__ */ t(C, {
+          "aria-disabled": r,
+          onClick: u,
+          size: "small",
+          sx: {
+            alignSelf: "flex-start",
+            ml: -8,
+            px: 8,
+            ...r && {
+              color: "text.disabled",
+              cursor: "default"
+            }
+          },
+          variant: "text",
+          children: o.label
+        })]
+      }), /* @__PURE__ */ t(P, {
+        logo: x,
+        variant: s.variant
+      })]
+    })]
+  });
+};
+export {
+  T as default
+};
+
+//# sourceMappingURL=CompactInsightCard.es.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"CompactInsightCard.es.js","names":[],"sources":["../../../src/insights-v2/components/CompactInsightCard.tsx"],"sourcesContent":["import type { KeyboardEvent, MouseEvent } from 'react'\n\nimport Box from '@mui/material/Box'\nimport Button from '@mui/material/Button'\nimport Card from '@mui/material/Card'\nimport Stack from '@mui/material/Stack'\n\nimport { Icon } from '@mxenabled/mx-icons'\nimport { P, Text } from '@mxenabled/mxui'\n\nimport type { InsightsPayload, LogoRef, PrimaryCTA } from '../../core'\nimport { createVariantBlock } from '../blocks/createVariantBlock'\nimport BadgedTile from './BadgedTile'\nimport InsightOptionsMenu from './InsightOptionsMenu'\nimport LogoFromGuid from './LogoFromGuid'\nimport StatusBadge from './StatusBadge'\n\n/** Figma 1941:111897: the tile the logo fills is 44px (rows are 32, the notification row 33). */\nconst ICON_SIZE = 44\n\ninterface InsightVisualProps {\n  /** The first slot row's logo, when the envelope carries a row. */\n  logo?: LogoRef | null\n}\n\n/** The row's logo, or the neutral insight glyph when the slot has no row. */\nconst LogoOrFallback = ({ logo }: InsightVisualProps) =>\n  logo ? (\n    <LogoFromGuid logo={logo} size={ICON_SIZE} />\n  ) : (\n    <Box\n      data-testid=\"compact-insight-card-fallback-icon\"\n      sx={{\n        alignItems: 'center',\n        bgcolor: 'primary.lighter',\n        display: 'flex',\n        height: ICON_SIZE,\n        justifyContent: 'center',\n        width: ICON_SIZE,\n      }}\n    >\n      <Icon color=\"primary\" fill={true} name=\"lightbulb\" size={24} />\n    </Box>\n  )\n\n/** Micro, and any variant not registered below: the logo alone. */\nconst PlainVisual = ({ logo }: InsightVisualProps) => (\n  <BadgedTile center={<LogoOrFallback logo={logo} />} size={ICON_SIZE} sx={{ flexShrink: 0 }} />\n)\n\n/** ditto `embedded`: the logo badged with a status glyph (Figma 1941:111897). */\nconst EmbeddedVisual = ({ logo }: InsightVisualProps) => (\n  <BadgedTile\n    center={<LogoOrFallback logo={logo} />}\n    size={ICON_SIZE}\n    sx={{ flexShrink: 0 }}\n    topRight={<StatusBadge tone=\"warning\" />}\n  />\n)\n\n/**\n * The card's right-hand visual, one component per ditto layout variant.\n *\n * A variant names a rendering *shape*, not an insight — `with_header` already serves both Large\n * Transaction and Fee Detected — so an insight wanting the badged logo reuses `embedded`. Only a\n * genuinely different visual registers a new entry, and existing ones are never touched.\n */\nconst InsightVisual = createVariantBlock<InsightVisualProps>({\n  variants: { embedded: EmbeddedVisual },\n  fallback: PlainVisual,\n  name: 'InsightVisual',\n})\n\nexport interface CompactInsightCardProps {\n  /** A `micro` or `embedded` envelope. */\n  payload: InsightsPayload\n  /**\n   * Makes the whole card the tap target. What a tap does is the host's decision (post to the\n   * host app, open a drawer, …); the card never opens anything itself. Omit for a static card.\n   */\n  onTap?: () => void\n  /** Receives the primary CTA when tapped. The card does not resolve the CTA's block itself. */\n  onCtaClick?: (cta: PrimaryCTA) => void\n  /**\n   * Renders the CTA disabled — label shown, `aria-disabled`, not tappable — for a host that cannot\n   * honour it (e.g. `contact_support_block` when the client's `enable_support_requests` is off).\n   */\n  isCtaDisabled?: boolean\n}\n\nconst stopPropagation = (event: MouseEvent) => event.stopPropagation()\n\n/**\n * The one compact renderer the micro and embedded envelopes share (`insights_v2.2.md` §8.3).\n *\n * Figma 1941:111897 (Embedded | Large Transaction): a title row with the overflow slot, the HTML\n * description with the primary CTA under it, and on the right the first slot row's logo in a\n * `<BadgedTile>`. Under ditto's `embedded` variant the tile takes a status badge; micro sends no\n * variant and draws the logo alone. The card lays out from the envelope alone and never reads\n * `widget_type`.\n *\n * The icon falls back to the neutral insight glyph **here**, not in `LogoFromGuid`, when the slot\n * has no row. The `pill` on the same envelope is the transaction row's, not the card's.\n */\nconst CompactInsightCard = ({\n  isCtaDisabled = false,\n  onCtaClick,\n  onTap,\n  payload,\n}: CompactInsightCardProps) => {\n  const { description, instance_slot, primary_cta, title } = payload\n  const rowLogo = instance_slot.data_series?.[0]?.logo\n\n  const handleCtaClick = (event: MouseEvent<HTMLButtonElement>) => {\n    event.stopPropagation()\n    if (isCtaDisabled || !primary_cta) return\n    onCtaClick?.(primary_cta)\n  }\n\n  const handleKeyDown = (event: KeyboardEvent<HTMLDivElement>) => {\n    // Only the card itself: Enter on the CTA button is the button's own click.\n    if (event.target !== event.currentTarget) return\n    if (event.key === 'Enter' || event.key === ' ') {\n      event.preventDefault()\n      onTap?.()\n    }\n  }\n\n  const interactiveProps = onTap\n    ? { onClick: onTap, onKeyDown: handleKeyDown, role: 'button', tabIndex: 0 }\n    : {}\n\n  return (\n    <Card\n      data-testid=\"compact-insight-card\"\n      {...interactiveProps}\n      sx={{ minWidth: 288, pb: 12, pl: 8, pr: 16, pt: 8, ...(onTap && { cursor: 'pointer' }) }}\n    >\n      <Stack\n        sx={{\n          alignItems: 'center',\n          flexDirection: 'row',\n          gap: 8,\n          justifyContent: 'space-between',\n          pl: 8,\n          pt: 4,\n        }}\n      >\n        <Text bold={true} variant=\"body1\">\n          {title ?? ''}\n        </Text>\n        {/* The menu renders only when the host wired `onMenuAction` (BeatActionsProvider). */}\n        <Box onClick={stopPropagation} sx={{ display: 'flex' }}>\n          <InsightOptionsMenu />\n        </Box>\n      </Stack>\n\n      <Stack sx={{ flexDirection: 'row', gap: 16, pl: 8, pt: 4 }}>\n        <Stack sx={{ flex: 1, gap: 8, minWidth: 0 }}>\n          {/* `html_text` is rendered server-side by mrs_content from the ditto copy template (bold\n              amount / merchant), not user-authored input; painted the same way `BaseLayout` paints\n              the full card's description. */}\n          <P\n            dangerouslySetInnerHTML={{ __html: description.html_text }}\n            data-testid=\"compact-insight-card-description\"\n            variant=\"subtitle2\"\n          />\n          {primary_cta?.label && (\n            <Button\n              aria-disabled={isCtaDisabled}\n              onClick={handleCtaClick}\n              size=\"small\"\n              sx={{\n                alignSelf: 'flex-start',\n                // Figma 1941:111897 lines the CTA label up with the description's left edge. The\n                // column already pads 8, so the button's own 8 is pulled back out — padding kept so\n                // the tap target does not shrink.\n                ml: -8,\n                px: 8,\n                ...(isCtaDisabled && { color: 'text.disabled', cursor: 'default' }),\n              }}\n              variant=\"text\"\n            >\n              {primary_cta.label}\n            </Button>\n          )}\n        </Stack>\n\n        <InsightVisual logo={rowLogo} variant={instance_slot.variant} />\n      </Stack>\n    </Card>\n  )\n}\n\nexport default CompactInsightCard\n"],"mappings":";;;;;;;;;;;;AAkBA,IAAM,IAAY,IAQZ,IAAA,CAAkB,EAAE,MAAA,EAAA,MACxB,IACE,gBAAA,EAAC,GAAD;AAAA,EAAoB,MAAA;AAAA,EAAM,MAAM;AAAY,CAAA,IAE5C,gBAAA,EAAC,GAAD;AAAA,EACE,eAAY;AAAA,EACZ,IAAI;AAAA,IACF,YAAY;AAAA,IACZ,SAAS;AAAA,IACT,SAAS;AAAA,IACT,QAAQ;AAAA,IACR,gBAAgB;AAAA,IAChB,OAAO;AAAA,EACT;AAAA,EAEA,UAAA,gBAAA,EAAC,GAAD;AAAA,IAAM,OAAM;AAAA,IAAU,MAAM;AAAA,IAAM,MAAK;AAAA,IAAY,MAAM;AAAA,EAAK,CAAA;AAC3D,CAAA,GAIH,IAAA,CAAe,EAAE,MAAA,EAAA,MACrB,gBAAA,EAAC,GAAD;AAAA,EAAY,QAAQ,gBAAA,EAAC,GAAD,EAAsB,MAAA,EAAO,CAAA;AAAA,EAAG,MAAM;AAAA,EAAW,IAAI,EAAE,YAAY,EAAE;AAAI,CAAA,GAIzF,IAAA,CAAkB,EAAE,MAAA,EAAA,MACxB,gBAAA,EAAC,GAAD;AAAA,EACE,QAAQ,gBAAA,EAAC,GAAD,EAAsB,MAAA,EAAO,CAAA;AAAA,EACrC,MAAM;AAAA,EACN,IAAI,EAAE,YAAY,EAAE;AAAA,EACpB,UAAU,gBAAA,EAAC,GAAD,EAAa,MAAK,UAAW,CAAA;AACxC,CAAA,GAUG,IAAgB,EAAuC;AAAA,EAC3D,UAAU,EAAE,UAAU,EAAe;AAAA,EACrC,UAAU;AAAA,EACV,MAAM;AACR,CAAC,GAmBK,IAAA,CAAmB,MAAsB,EAAM,gBAAgB,GAc/D,IAAA,CAAsB,EAC1B,eAAA,IAAgB,IAChB,YAAA,GACA,OAAA,GACA,SAAA,EAAA,MAC6B;AAC7B,QAAM,EAAE,aAAA,GAAa,eAAA,GAAe,aAAA,GAAa,OAAA,EAAA,IAAU,GACrD,IAAU,EAAc,cAAc,CAAA,GAAI,MAE1C,IAAA,CAAkB,MAAyC;AAE/D,IADA,EAAM,gBAAgB,GAClB,EAAA,KAAiB,CAAC,MACtB,IAAa,CAAW;AAAA,EAC1B;AAeA,SACE,gBAAA,EAAC,GAAD;AAAA,IACE,eAAY;AAAA,IACZ,GAPqB,IACrB;AAAA,MAAE,SAAS;AAAA,MAAO,WAVhB,CAAiB,MAAyC;AAE9D,QAAI,EAAM,WAAW,EAAM,kBACvB,EAAM,QAAQ,WAAW,EAAM,QAAQ,SACzC,EAAM,eAAe,GACrB,IAAQ;AAAA,MAEZ;AAAA,MAGgD,MAAM;AAAA,MAAU,UAAU;AAAA,IAAE,IACxE,CAAC;AAAA,IAMD,IAAI;AAAA,MAAE,UAAU;AAAA,MAAK,IAAI;AAAA,MAAI,IAAI;AAAA,MAAG,IAAI;AAAA,MAAI,IAAI;AAAA,MAAG,GAAI,KAAS,EAAE,QAAQ,UAAU;AAAA,IAAG;AAAA,IAHzF,UAAA,CAKE,gBAAA,EAAC,GAAD;AAAA,MACE,IAAI;AAAA,QACF,YAAY;AAAA,QACZ,eAAe;AAAA,QACf,KAAK;AAAA,QACL,gBAAgB;AAAA,QAChB,IAAI;AAAA,QACJ,IAAI;AAAA,MACN;AAAA,MARF,UAAA,CAUE,gBAAA,EAAC,GAAD;AAAA,QAAM,MAAM;AAAA,QAAM,SAAQ;AAAA,QACvB,UAAA,KAAS;AAAA,MACN,CAAA,GAEN,gBAAA,EAAC,GAAD;AAAA,QAAK,SAAS;AAAA,QAAiB,IAAI,EAAE,SAAS,OAAO;AAAA,QACnD,UAAA,gBAAA,EAAC,GAAD,CAAqB,CAAA;AAAA,MAClB,CAAA,CACA;AAAA,IAEP,CAAA,GAAA,gBAAA,EAAC,GAAD;AAAA,MAAO,IAAI;AAAA,QAAE,eAAe;AAAA,QAAO,KAAK;AAAA,QAAI,IAAI;AAAA,QAAG,IAAI;AAAA,MAAE;AAAA,MAAzD,UAAA,CACE,gBAAA,EAAC,GAAD;AAAA,QAAO,IAAI;AAAA,UAAE,MAAM;AAAA,UAAG,KAAK;AAAA,UAAG,UAAU;AAAA,QAAE;AAAA,QAA1C,UAAA,CAIE,gBAAA,EAAC,GAAD;AAAA,UACE,yBAAyB,EAAE,QAAQ,EAAY,UAAU;AAAA,UACzD,eAAY;AAAA,UACZ,SAAQ;AAAA,QACT,CAAA,GACA,GAAa,SACZ,gBAAA,EAAC,GAAD;AAAA,UACE,iBAAe;AAAA,UACf,SAAS;AAAA,UACT,MAAK;AAAA,UACL,IAAI;AAAA,YACF,WAAW;AAAA,YAIX,IAAI;AAAA,YACJ,IAAI;AAAA,YACJ,GAAI,KAAiB;AAAA,cAAE,OAAO;AAAA,cAAiB,QAAQ;AAAA,YAAU;AAAA,UACnE;AAAA,UACA,SAAQ;AAAA,UAEP,UAAA,EAAY;AAAA,QACP,CAAA,CAEL;AAAA,MAEP,CAAA,GAAA,gBAAA,EAAC,GAAD;AAAA,QAAe,MAAM;AAAA,QAAS,SAAS,EAAc;AAAA,MAAU,CAAA,CAC1D;AAAA,IACH,CAAA,CAAA;AAAA;AAEV"}

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

@@ -1,7 +1,4 @@
-interface FooterData {
-    account: string;
-    date: string;
-}
+import { Footer as FooterData } from '../../core';
 interface FooterProps {
     footer: FooterData;
 }

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

@@ -1,25 +1,34 @@
-import o from "@mui/material/Stack";
-import { Text as t } from "@mxenabled/mxui";
-import { jsx as e, jsxs as n } from "react/jsx-runtime";
-var s = ({ footer: r }) => /* @__PURE__ */ n(o, {
-  sx: {
-    flexDirection: "row",
-    justifyContent: "space-between",
-    px: 16,
-    py: 8
-  },
-  children: [/* @__PURE__ */ e(t, {
-    color: "secondary",
-    variant: "tiny",
-    children: r.date
-  }), /* @__PURE__ */ e(t, {
-    color: "secondary",
-    variant: "tiny",
-    children: r.account
-  })]
-});
+import { DATE_FORMATS_INTL as a, formatDate as i } from "../../core/constants/DateFormats.es.js";
+import { fromUnixUTC as c } from "../../core/utils/DateUtil.es.js";
+import m from "@mui/material/Stack";
+import { Text as e } from "@mxenabled/mxui";
+import { jsx as o, jsxs as s } from "react/jsx-runtime";
+var f = (r) => {
+  if (typeof r != "number" || Number.isNaN(r)) return "";
+  const t = c(r);
+  return Number.isNaN(t.getTime()) ? "" : i(t, a.FULL_MONTH_DAY_YEAR);
+}, T = ({ footer: r }) => {
+  const t = r.date ?? f(r.timestamp), n = r.account ?? "";
+  return /* @__PURE__ */ s(m, {
+    sx: {
+      flexDirection: "row",
+      justifyContent: "space-between",
+      px: 16,
+      py: 8
+    },
+    children: [/* @__PURE__ */ o(e, {
+      color: "text.secondary",
+      variant: "tiny",
+      children: t
+    }), /* @__PURE__ */ o(e, {
+      color: "text.secondary",
+      variant: "tiny",
+      children: n
+    })]
+  });
+};
 export {
-  s as default
+  T as default
 };
 
 //# sourceMappingURL=Footer.es.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"Footer.es.js","names":[],"sources":["../../../src/insights-v2/components/Footer.tsx"],"sourcesContent":["import Stack from '@mui/material/Stack'\n\nimport { Text } from '@mxenabled/mxui'\n\ninterface FooterData {\n  account: string\n  date: string\n}\n\ninterface FooterProps {\n  footer: FooterData\n}\n\nconst Footer = ({ footer }: FooterProps) => {\n  return (\n    <Stack sx={{ flexDirection: 'row', justifyContent: 'space-between', px: 16, py: 8 }}>\n      <Text color=\"secondary\" variant=\"tiny\">\n        {footer.date}\n      </Text>\n      <Text color=\"secondary\" variant=\"tiny\">\n        {footer.account}\n      </Text>\n    </Stack>\n  )\n}\n\nexport default Footer\n"],"mappings":";;;AAaA,IAAM,IAAA,CAAU,EAAE,QAAA,EAAA,MAEd,gBAAA,EAAC,GAAD;AAAA,EAAO,IAAI;AAAA,IAAE,eAAe;AAAA,IAAO,gBAAgB;AAAA,IAAiB,IAAI;AAAA,IAAI,IAAI;AAAA,EAAE;AAAA,EAAlF,UAAA,CACE,gBAAA,EAAC,GAAD;AAAA,IAAM,OAAM;AAAA,IAAY,SAAQ;AAAA,IAC7B,UAAA,EAAO;AAAA,EACJ,CAAA,GACN,gBAAA,EAAC,GAAD;AAAA,IAAM,OAAM;AAAA,IAAY,SAAQ;AAAA,IAC7B,UAAA,EAAO;AAAA,EACJ,CAAA,CACD"}
+{"version":3,"file":"Footer.es.js","names":[],"sources":["../../../src/insights-v2/components/Footer.tsx"],"sourcesContent":["import Stack from '@mui/material/Stack'\n\nimport { Text } from '@mxenabled/mxui'\n\nimport { DATE_FORMATS_INTL, formatDate } from '../../core/constants'\nimport type { Footer as FooterData } from '../../core'\nimport { fromUnixUTC } from '../../core/utils/DateUtil'\n\ninterface FooterProps {\n  footer: FooterData\n}\n\n/**\n * V1 beats send a pre-formatted `date` string; the V2 envelope (LargeTransactionV2 onward) sends\n * the date as unix seconds instead (`date` -> `timestamp`). Both render, because the footer is\n * shared by every insight and V1 beats are still live.\n *\n * `account` is spelled the same on both. The backend resolves plurality into that one field (one\n * account -> its name, several -> a localized `N Accounts`), so there is no separate `accounts`.\n */\nconst formatTimestamp = (timestamp?: number) => {\n  if (typeof timestamp !== 'number' || Number.isNaN(timestamp)) return ''\n  const parsed = fromUnixUTC(timestamp)\n  if (Number.isNaN(parsed.getTime())) return ''\n  return formatDate(parsed, DATE_FORMATS_INTL.FULL_MONTH_DAY_YEAR)\n}\n\nconst Footer = ({ footer }: FooterProps) => {\n  const date = footer.date ?? formatTimestamp(footer.timestamp)\n  const account = footer.account ?? ''\n\n  return (\n    <Stack sx={{ flexDirection: 'row', justifyContent: 'space-between', px: 16, py: 8 }}>\n      <Text color=\"text.secondary\" variant=\"tiny\">\n        {date}\n      </Text>\n      <Text color=\"text.secondary\" variant=\"tiny\">\n        {account}\n      </Text>\n    </Stack>\n  )\n}\n\nexport default Footer\n"],"mappings":";;;;;AAoBA,IAAM,IAAA,CAAmB,MAAuB;AAC9C,MAAI,OAAO,KAAc,YAAY,OAAO,MAAM,CAAS,EAAG,QAAO;AACrE,QAAM,IAAS,EAAY,CAAS;AACpC,SAAI,OAAO,MAAM,EAAO,QAAQ,CAAC,IAAU,KACpC,EAAW,GAAQ,EAAkB,mBAAmB;AACjE,GAEM,IAAA,CAAU,EAAE,QAAA,EAAA,MAA0B;AAC1C,QAAM,IAAO,EAAO,QAAQ,EAAgB,EAAO,SAAS,GACtD,IAAU,EAAO,WAAW;AAElC,SACE,gBAAA,EAAC,GAAD;AAAA,IAAO,IAAI;AAAA,MAAE,eAAe;AAAA,MAAO,gBAAgB;AAAA,MAAiB,IAAI;AAAA,MAAI,IAAI;AAAA,IAAE;AAAA,IAAlF,UAAA,CACE,gBAAA,EAAC,GAAD;AAAA,MAAM,OAAM;AAAA,MAAiB,SAAQ;AAAA,MAClC,UAAA;AAAA,IACG,CAAA,GACN,gBAAA,EAAC,GAAD;AAAA,MAAM,OAAM;AAAA,MAAiB,SAAQ;AAAA,MAClC,UAAA;AAAA,IACG,CAAA,CACD;AAAA;AAEX"}

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

@@ -1,12 +1,12 @@
-import m from "./SubHeader.es.js";
 import { useBeatActions as s } from "../beatActions.es.js";
-import { InsightOptionsMenu as a } from "./InsightOptionsMenu.es.js";
-import t from "@mui/material/Stack";
-import { H3 as c } from "@mxenabled/mxui";
+import { InsightOptionsMenu as m } from "./InsightOptionsMenu.es.js";
+import a from "./SubHeader.es.js";
+import e from "@mui/material/Stack";
+import { H3 as f } from "@mxenabled/mxui";
 import { jsx as r, jsxs as o } from "react/jsx-runtime";
-var g = ({ isMini: n, subtitle: e, title: i }) => {
+var g = ({ isMini: n, subtitle: t, title: i }) => {
   const { onMenuAction: p } = s();
-  return /* @__PURE__ */ o(t, {
+  return /* @__PURE__ */ o(e, {
     sx: {
       gap: 4,
       pb: 12,
@@ -14,14 +14,14 @@ var g = ({ isMini: n, subtitle: e, title: i }) => {
       pr: 16,
       pt: 16
     },
-    children: [/* @__PURE__ */ o(t, {
+    children: [/* @__PURE__ */ o(e, {
       sx: {
-        alignItems: "center",
+        alignItems: "flex-start",
         flexDirection: "row",
         justifyContent: "space-between"
       },
-      children: [/* @__PURE__ */ r(c, { children: i }), !n && p && /* @__PURE__ */ r(a, {})]
-    }), e && /* @__PURE__ */ r(m, { subtitle: e })]
+      children: [/* @__PURE__ */ r(f, { children: i }), !n && p && /* @__PURE__ */ r(m, {})]
+    }), t && /* @__PURE__ */ r(a, { subtitle: t })]
   });
 };
 export {