@mx-cartographer/experiences 9.7.96 → 9.7.98

package/CHANGELOG.md

@@ -1,3 +1,13 @@
+## [9.7.98] - 11-04-2026
+
+- **FIXED** - Celebrate Credit Card Payoff card spacing matches Figma (WEC-2170)
+- **FIXED** - Insight card titles stay on one line and end with an ellipsis when too long (WEC-2170)
+
+## [9.7.97] - 11-03-2026
+
+- **ADDED** - HSA Deposit beat on Insights 2.0: the `with_header_footer` transaction card whose CTA opens Transaction Details for one deposit and the Transaction List for several (WEC-2214)
+- **FIXED** - `BaseLayout` no longer throws on a `null` primary or secondary CTA (WEC-2214)
+
 ## [9.7.96] - 11-03-2026
 
 - **FIXED** - Monthly Spend legend drops amount (MEW2-3428)

package/dist/insights-v2/blocks/ComponentBlocks/AccountBlock/AccountBlock.es.js

@@ -30,7 +30,7 @@ var vo = ({ payload: g }) => {
           flexShrink: 0,
           height: 32,
           position: "relative",
-          width: 44
+          width: 48
         },
         children: /* @__PURE__ */ o(E, {
           "aria-hidden": !0,

package/dist/insights-v2/blocks/ComponentBlocks/AccountBlock/AccountBlock.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"AccountBlock.es.js","names":[],"sources":["../../../../../src/insights-v2/blocks/ComponentBlocks/AccountBlock/AccountBlock.tsx"],"sourcesContent":["import Box from '@mui/material/Box'\nimport Stack from '@mui/material/Stack'\nimport { useRef } from 'react'\nimport { useTheme } from '@mui/material/styles'\n\nimport { Text } from '@mxenabled/mxui'\nimport { Icon } from '@mxenabled/mx-icons'\n\nimport { slot, type InsightsPayload, type LogoRef } from '../../../../core'\nimport { formatCurrency } from '../../../../core/utils/NumberFormatting'\nimport LogoFromGuid from '../../../components/LogoFromGuid'\nimport { Confetti } from '../../../components/shared/Confetti'\nimport { ReactComponent as PaidOffCardGraphic } from '../../../components/shared/images/PaidOffCard.svg'\nimport { ReactComponent as SavingsGraphic } from '../../../components/shared/images/SavingsAccountDeposit.svg'\nimport { statusIconName } from '../../../components/statusIcon'\nimport { useContainerDimensions } from '../../../hooks/useContainerDimensions'\n\nimport { resolveVariantConfig } from '../../resolveVariantConfig'\nimport { DetailedAccountBlock, isDetailedAccountVariant } from '../DetailedAccountBlock'\n\nimport { HeaderComponent } from './HeaderComponent'\nimport { IconComponent } from './IconComponent'\nimport { getLayoutConfig } from './layout'\n\nconst AccountBlock = ({ payload }: { payload: InsightsPayload; beatGuid?: string }) => {\n  const theme = useTheme()\n  const containerRef = useRef<HTMLDivElement>(null)\n  const { height, width } = useContainerDimensions(containerRef)\n  const { instance_slot } = payload\n  const { variant, institution_guid, institution_name, icon_name, merchant_name } = instance_slot\n\n  if (isDetailedAccountVariant(variant)) return <DetailedAccountBlock payload={payload} />\n\n  // V2 variants fill `instance_slot.data` (ditto's account_block slots) and it is then the whole\n  // truth: a slot it leaves empty, or sends with the wrong kind, draws nothing rather than falling\n  // back to the stale flat field it supersedes. Beats not yet migrated send no `data` and keep the\n  // flat fields.\n  const { data } = instance_slot\n  const v2 = data !== undefined\n  const dataAmount = slot<unknown>(data, 'amount')\n  const amount = v2\n    ? typeof dataAmount === 'number' && Number.isFinite(dataAmount)\n      ? dataAmount\n      : undefined\n    : instance_slot.amount\n  // One V2 slot feeds the line under the amount on both tiles. V1 called it `sub_text` on the\n  // standard tile and `label` on the confetti tile, so each keeps its own flat field.\n  const dataSubText = slot<unknown>(data, 'sub_text')\n  const v2SubText = typeof dataSubText === 'string' ? dataSubText : undefined\n  const sub_text = v2 ? v2SubText : instance_slot.sub_text\n  const label = v2 ? v2SubText : instance_slot.label\n  const dataHeaderText = slot<unknown>(data, 'header_text')\n  const header_text = v2\n    ? typeof dataHeaderText === 'string'\n      ? dataHeaderText\n      : undefined\n    : instance_slot.header_text\n  const logo = slot<LogoRef>(data, 'logo')\n  const layoutConfig = resolveVariantConfig(\n    getLayoutConfig(theme),\n    variant,\n    'default',\n    'AccountBlock',\n  )\n\n  // Confetti-backed celebration variants (deposits, payoff, savings) — a success-tinted card\n  // on a gradient + confetti wash. Everything variant-specific is flat on `layoutConfig`.\n  if (layoutConfig?.isConfetti) {\n    const confettiIcon = statusIconName(logo?.guid)\n    const graphics: Record<string, React.ReactNode> = {\n      paidOffCard: (\n        // SVG is 58x46 but the card sits at (0,14) with the check badge overflowing top-right.\n        // Box it to the card's real 44x32 footprint and shift the SVG up so it aligns with the text.\n        <Box sx={{ flexShrink: 0, height: 32, position: 'relative', width: 44 }}>\n          <PaidOffCardGraphic\n            aria-hidden={true}\n            role=\"presentation\"\n            style={{ left: 0, position: 'absolute', top: -14 }}\n          />\n        </Box>\n      ),\n      savings: <SavingsGraphic aria-hidden={true} height={55} role=\"presentation\" width={55} />,\n      logo: (\n        <Box\n          sx={{\n            borderRadius: '4px',\n            flexShrink: 0,\n            height: 48,\n            overflow: 'hidden',\n            width: 48,\n          }}\n        >\n          {/* An ICO- icon keeps the tile's look: an outlined glyph in success.contrastText on\n              the success.main square. It is drawn with Icon, as IconComponent does, because\n              LogoFromGuid fills every ICO- glyph. Any other guid renders via LogoFromGuid. */}\n          {confettiIcon ? (\n            <Stack\n              data-icon={confettiIcon}\n              sx={{\n                alignItems: 'center',\n                bgcolor: 'success.main',\n                height: '100%',\n                justifyContent: 'center',\n                width: '100%',\n              }}\n            >\n              <Icon\n                aria-hidden={true}\n                name={confettiIcon}\n                size={layoutConfig.logo_icon_size ?? 24}\n                sx={{ color: 'success.contrastText' }}\n              />\n            </Stack>\n          ) : logo?.guid ? (\n            <LogoFromGuid logo={logo} size={48} />\n          ) : null}\n        </Box>\n      ),\n    }\n    const graphic = graphics[layoutConfig.graphic ?? 'logo']\n\n    // Deposit cards show the payer name — a merchant when we have one, otherwise the institution.\n    // V2 sends it resolved as `data.secondary_text`; the flat fields remain the fallback.\n    const dataSecondaryText = slot<unknown>(data, 'secondary_text')\n    const payer =\n      (typeof dataSecondaryText === 'string' && dataSecondaryText) ||\n      (merchant_name ?? institution_name)\n    const secondaryText = layoutConfig.secondarySource === 'merchant' ? payer : label\n    const secondary = secondaryText ? (\n      <Text color={layoutConfig.secondaryColor} variant={layoutConfig.secondaryVariant}>\n        {secondaryText}\n      </Text>\n    ) : null\n    // No figure for a missing amount: `formatCurrency` would print a confident `$0.00`.\n    const amountText =\n      amount != null ? (\n        <Text bold={true} color=\"success.dark\" variant={layoutConfig.amountVariant}>\n          {`${layoutConfig.amountPrefix ?? ''}${formatCurrency(amount, '0,0.00')}`}\n        </Text>\n      ) : null\n\n    return (\n      <Box\n        ref={containerRef}\n        sx={{\n          backgroundImage: layoutConfig.gradient,\n          bgcolor: 'background.paper',\n          overflow: 'hidden',\n          position: 'relative',\n          p: 16,\n          width: '100%',\n        }}\n      >\n        <Box\n          sx={{\n            inset: 0,\n            pointerEvents: 'none',\n            position: 'absolute',\n            zIndex: 1,\n          }}\n        >\n          <Confetti height={height} shouldRun={height > 0 && width > 0} width={width} />\n        </Box>\n\n        <Stack\n          sx={{\n            borderRadius: '8px',\n            ...(layoutConfig.cardShadow && { boxShadow: theme.shadows[1] }),\n            overflow: 'hidden',\n            position: 'relative',\n            width: '100%',\n            zIndex: 2,\n          }}\n        >\n          {layoutConfig.categoryStrip && header_text && (\n            <Box sx={{ bgcolor: 'success.main', px: 12, py: 4 }}>\n              <Text color=\"success.contrastText\" variant=\"caption\">\n                {header_text}\n              </Text>\n            </Box>\n          )}\n\n          <Stack\n            sx={{\n              alignItems: 'center',\n              bgcolor: 'success.lighter',\n              border: '1px solid',\n              borderColor: 'success.main',\n              borderRadius: '8px',\n              // With a strip above, the body's top corners tuck under it (no double border line).\n              ...(layoutConfig.categoryStrip && {\n                borderTopLeftRadius: 0,\n                borderTopRightRadius: 0,\n                borderTop: 0,\n              }),\n              flexDirection: 'row',\n              ...layoutConfig.rowSx,\n            }}\n          >\n            <Box sx={{ display: 'flex', flexShrink: 0 }}>{graphic}</Box>\n\n            <Stack sx={{ flex: '1 0 0', minWidth: 0 }}>\n              {layoutConfig.secondaryPosition === 'above' && secondary}\n              {amountText}\n              {layoutConfig.secondaryPosition === 'below' && secondary}\n            </Stack>\n          </Stack>\n        </Stack>\n      </Box>\n    )\n  }\n\n  return (\n    <Stack\n      sx={{\n        background: layoutConfig.background,\n        p: 16,\n      }}\n    >\n      <Stack\n        sx={{\n          borderRadius: '8px',\n          boxShadow: theme.shadows[1],\n          width: '100%',\n        }}\n      >\n        {header_text && <HeaderComponent headerText={header_text} />}\n        <Stack\n          sx={{\n            alignItems: 'center',\n            bgcolor: 'background.paper',\n            borderRadius: '8px',\n            gap: 16,\n            // Figma's standard tile: 16px on every side, 80px tall in the 112px slot.\n            p: 16,\n            width: '100%',\n            ...(header_text && {\n              borderTopLeftRadius: '0',\n              borderTopRightRadius: '0',\n            }),\n            ...((institution_guid || icon_name || logo?.guid) && {\n              flexDirection: 'row',\n            }),\n          }}\n        >\n          <IconComponent logo={logo} slot={instance_slot} variant={variant} />\n\n          <Stack>\n            {amount != null && <Text variant=\"h2\">{formatCurrency(amount, '0,0.00')}</Text>}\n            <Stack sx={{ gap: 8, flexDirection: 'row', alignItems: 'center' }}>\n              {layoutConfig.sub_logo && (\n                <Icon color=\"warning\" fill={true} name={layoutConfig.sub_logo} size={20} />\n              )}\n              {sub_text && (\n                <Text color=\"text.secondary\" variant=\"caption\">\n                  {sub_text}\n                </Text>\n              )}\n            </Stack>\n          </Stack>\n        </Stack>\n      </Stack>\n    </Stack>\n  )\n}\n\nexport default AccountBlock\n"],"mappings":"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"}
+{"version":3,"file":"AccountBlock.es.js","names":[],"sources":["../../../../../src/insights-v2/blocks/ComponentBlocks/AccountBlock/AccountBlock.tsx"],"sourcesContent":["import Box from '@mui/material/Box'\nimport Stack from '@mui/material/Stack'\nimport { useRef } from 'react'\nimport { useTheme } from '@mui/material/styles'\n\nimport { Text } from '@mxenabled/mxui'\nimport { Icon } from '@mxenabled/mx-icons'\n\nimport { slot, type InsightsPayload, type LogoRef } from '../../../../core'\nimport { formatCurrency } from '../../../../core/utils/NumberFormatting'\nimport LogoFromGuid from '../../../components/LogoFromGuid'\nimport { Confetti } from '../../../components/shared/Confetti'\nimport { ReactComponent as PaidOffCardGraphic } from '../../../components/shared/images/PaidOffCard.svg'\nimport { ReactComponent as SavingsGraphic } from '../../../components/shared/images/SavingsAccountDeposit.svg'\nimport { statusIconName } from '../../../components/statusIcon'\nimport { useContainerDimensions } from '../../../hooks/useContainerDimensions'\n\nimport { resolveVariantConfig } from '../../resolveVariantConfig'\nimport { DetailedAccountBlock, isDetailedAccountVariant } from '../DetailedAccountBlock'\n\nimport { HeaderComponent } from './HeaderComponent'\nimport { IconComponent } from './IconComponent'\nimport { getLayoutConfig } from './layout'\n\nconst AccountBlock = ({ payload }: { payload: InsightsPayload; beatGuid?: string }) => {\n  const theme = useTheme()\n  const containerRef = useRef<HTMLDivElement>(null)\n  const { height, width } = useContainerDimensions(containerRef)\n  const { instance_slot } = payload\n  const { variant, institution_guid, institution_name, icon_name, merchant_name } = instance_slot\n\n  if (isDetailedAccountVariant(variant)) return <DetailedAccountBlock payload={payload} />\n\n  // V2 variants fill `instance_slot.data` (ditto's account_block slots) and it is then the whole\n  // truth: a slot it leaves empty, or sends with the wrong kind, draws nothing rather than falling\n  // back to the stale flat field it supersedes. Beats not yet migrated send no `data` and keep the\n  // flat fields.\n  const { data } = instance_slot\n  const v2 = data !== undefined\n  const dataAmount = slot<unknown>(data, 'amount')\n  const amount = v2\n    ? typeof dataAmount === 'number' && Number.isFinite(dataAmount)\n      ? dataAmount\n      : undefined\n    : instance_slot.amount\n  // One V2 slot feeds the line under the amount on both tiles. V1 called it `sub_text` on the\n  // standard tile and `label` on the confetti tile, so each keeps its own flat field.\n  const dataSubText = slot<unknown>(data, 'sub_text')\n  const v2SubText = typeof dataSubText === 'string' ? dataSubText : undefined\n  const sub_text = v2 ? v2SubText : instance_slot.sub_text\n  const label = v2 ? v2SubText : instance_slot.label\n  const dataHeaderText = slot<unknown>(data, 'header_text')\n  const header_text = v2\n    ? typeof dataHeaderText === 'string'\n      ? dataHeaderText\n      : undefined\n    : instance_slot.header_text\n  const logo = slot<LogoRef>(data, 'logo')\n  const layoutConfig = resolveVariantConfig(\n    getLayoutConfig(theme),\n    variant,\n    'default',\n    'AccountBlock',\n  )\n\n  // Confetti-backed celebration variants (deposits, payoff, savings) — a success-tinted card\n  // on a gradient + confetti wash. Everything variant-specific is flat on `layoutConfig`.\n  if (layoutConfig?.isConfetti) {\n    const confettiIcon = statusIconName(logo?.guid)\n    const graphics: Record<string, React.ReactNode> = {\n      paidOffCard: (\n        // SVG is 58x46 but the card sits at (0,14) with the check badge overflowing top-right.\n        // Box it to Figma's 48px graphic frame (the card is 44x32) and shift the SVG up so it aligns\n        // with the text.\n        <Box sx={{ flexShrink: 0, height: 32, position: 'relative', width: 48 }}>\n          <PaidOffCardGraphic\n            aria-hidden={true}\n            role=\"presentation\"\n            style={{ left: 0, position: 'absolute', top: -14 }}\n          />\n        </Box>\n      ),\n      savings: <SavingsGraphic aria-hidden={true} height={55} role=\"presentation\" width={55} />,\n      logo: (\n        <Box\n          sx={{\n            borderRadius: '4px',\n            flexShrink: 0,\n            height: 48,\n            overflow: 'hidden',\n            width: 48,\n          }}\n        >\n          {/* An ICO- icon keeps the tile's look: an outlined glyph in success.contrastText on\n              the success.main square. It is drawn with Icon, as IconComponent does, because\n              LogoFromGuid fills every ICO- glyph. Any other guid renders via LogoFromGuid. */}\n          {confettiIcon ? (\n            <Stack\n              data-icon={confettiIcon}\n              sx={{\n                alignItems: 'center',\n                bgcolor: 'success.main',\n                height: '100%',\n                justifyContent: 'center',\n                width: '100%',\n              }}\n            >\n              <Icon\n                aria-hidden={true}\n                name={confettiIcon}\n                size={layoutConfig.logo_icon_size ?? 24}\n                sx={{ color: 'success.contrastText' }}\n              />\n            </Stack>\n          ) : logo?.guid ? (\n            <LogoFromGuid logo={logo} size={48} />\n          ) : null}\n        </Box>\n      ),\n    }\n    const graphic = graphics[layoutConfig.graphic ?? 'logo']\n\n    // Deposit cards show the payer name — a merchant when we have one, otherwise the institution.\n    // V2 sends it resolved as `data.secondary_text`; the flat fields remain the fallback.\n    const dataSecondaryText = slot<unknown>(data, 'secondary_text')\n    const payer =\n      (typeof dataSecondaryText === 'string' && dataSecondaryText) ||\n      (merchant_name ?? institution_name)\n    const secondaryText = layoutConfig.secondarySource === 'merchant' ? payer : label\n    const secondary = secondaryText ? (\n      <Text color={layoutConfig.secondaryColor} variant={layoutConfig.secondaryVariant}>\n        {secondaryText}\n      </Text>\n    ) : null\n    // No figure for a missing amount: `formatCurrency` would print a confident `$0.00`.\n    const amountText =\n      amount != null ? (\n        <Text bold={true} color=\"success.dark\" variant={layoutConfig.amountVariant}>\n          {`${layoutConfig.amountPrefix ?? ''}${formatCurrency(amount, '0,0.00')}`}\n        </Text>\n      ) : null\n\n    return (\n      <Box\n        ref={containerRef}\n        sx={{\n          backgroundImage: layoutConfig.gradient,\n          bgcolor: 'background.paper',\n          overflow: 'hidden',\n          position: 'relative',\n          p: 16,\n          width: '100%',\n        }}\n      >\n        <Box\n          sx={{\n            inset: 0,\n            pointerEvents: 'none',\n            position: 'absolute',\n            zIndex: 1,\n          }}\n        >\n          <Confetti height={height} shouldRun={height > 0 && width > 0} width={width} />\n        </Box>\n\n        <Stack\n          sx={{\n            borderRadius: '8px',\n            ...(layoutConfig.cardShadow && { boxShadow: theme.shadows[1] }),\n            overflow: 'hidden',\n            position: 'relative',\n            width: '100%',\n            zIndex: 2,\n          }}\n        >\n          {layoutConfig.categoryStrip && header_text && (\n            <Box sx={{ bgcolor: 'success.main', px: 12, py: 4 }}>\n              <Text color=\"success.contrastText\" variant=\"caption\">\n                {header_text}\n              </Text>\n            </Box>\n          )}\n\n          <Stack\n            sx={{\n              alignItems: 'center',\n              bgcolor: 'success.lighter',\n              border: '1px solid',\n              borderColor: 'success.main',\n              borderRadius: '8px',\n              // With a strip above, the body's top corners tuck under it (no double border line).\n              ...(layoutConfig.categoryStrip && {\n                borderTopLeftRadius: 0,\n                borderTopRightRadius: 0,\n                borderTop: 0,\n              }),\n              flexDirection: 'row',\n              ...layoutConfig.rowSx,\n            }}\n          >\n            <Box sx={{ display: 'flex', flexShrink: 0 }}>{graphic}</Box>\n\n            <Stack sx={{ flex: '1 0 0', minWidth: 0 }}>\n              {layoutConfig.secondaryPosition === 'above' && secondary}\n              {amountText}\n              {layoutConfig.secondaryPosition === 'below' && secondary}\n            </Stack>\n          </Stack>\n        </Stack>\n      </Box>\n    )\n  }\n\n  return (\n    <Stack\n      sx={{\n        background: layoutConfig.background,\n        p: 16,\n      }}\n    >\n      <Stack\n        sx={{\n          borderRadius: '8px',\n          boxShadow: theme.shadows[1],\n          width: '100%',\n        }}\n      >\n        {header_text && <HeaderComponent headerText={header_text} />}\n        <Stack\n          sx={{\n            alignItems: 'center',\n            bgcolor: 'background.paper',\n            borderRadius: '8px',\n            gap: 16,\n            // Figma's standard tile: 16px on every side, 80px tall in the 112px slot.\n            p: 16,\n            width: '100%',\n            ...(header_text && {\n              borderTopLeftRadius: '0',\n              borderTopRightRadius: '0',\n            }),\n            ...((institution_guid || icon_name || logo?.guid) && {\n              flexDirection: 'row',\n            }),\n          }}\n        >\n          <IconComponent logo={logo} slot={instance_slot} variant={variant} />\n\n          <Stack>\n            {amount != null && <Text variant=\"h2\">{formatCurrency(amount, '0,0.00')}</Text>}\n            <Stack sx={{ gap: 8, flexDirection: 'row', alignItems: 'center' }}>\n              {layoutConfig.sub_logo && (\n                <Icon color=\"warning\" fill={true} name={layoutConfig.sub_logo} size={20} />\n              )}\n              {sub_text && (\n                <Text color=\"text.secondary\" variant=\"caption\">\n                  {sub_text}\n                </Text>\n              )}\n            </Stack>\n          </Stack>\n        </Stack>\n      </Stack>\n    </Stack>\n  )\n}\n\nexport default AccountBlock\n"],"mappings":"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"}

package/dist/insights-v2/blocks/ComponentBlocks/AccountBlock/layout.es.js

@@ -60,7 +60,7 @@ var e = { background: t }, s = (o) => ({
     graphic: "paidOffCard",
     amountVariant: "h2",
     rowSx: {
-      gap: 24,
+      gap: 16,
       px: 24,
       py: 16
     },

package/dist/insights-v2/blocks/ComponentBlocks/AccountBlock/layout.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"layout.es.js","names":[],"sources":["../../../../../src/insights-v2/blocks/ComponentBlocks/AccountBlock/layout.ts"],"sourcesContent":["import { alpha, type SxProps, type Theme } from '@mui/material/styles'\n\nimport {\n  CELEBRATION_GRADIENT,\n  ERROR_WASH_GRADIENT,\n  WARM_LIME_ACCENT_GRADIENT,\n} from '../../../components/celebrationGradients'\n\nexport interface BlockLayoutConfig {\n  background?: string\n  logo_color?: string\n  logo_bGcolor?: string\n  logo_border_color?: string\n  /** Corner radius of the icon tile (`icon_name` or an `ICO-` logo). Defaults to 6px. */\n  logo_border_radius?: string\n  /** Glyph size in px for an `ICO-` logo: on the confetti tile (default 24) and on the standard\n   * icon tile (default `TILE_ICON_SIZE`). */\n  logo_icon_size?: number\n  /** mx-icons glyph shown before `sub_text` (e.g. a warning icon on overdraft_warning). */\n  sub_logo?: string\n  /** mx-icons glyph badged on the logo's corner (e.g. `error` on Low Account Balance's V2 tile). */\n  badge?: string\n  /** When true, AccountBlock renders the confetti-backed celebration card using the fields below. */\n  isConfetti?: boolean\n  /** Gradient wash layered over `background.paper` for the confetti card. */\n  gradient?: string\n  /** Which illustration sits left of the text. `logo` is the data-driven merchant/institution logo. */\n  graphic?: 'paidOffCard' | 'savings' | 'logo'\n  /** Amount typography variant — `h2` for milestones, `h3` for deposits. */\n  amountVariant?: 'h2' | 'h3'\n  /** Prefix prepended to the formatted amount, e.g. `+` for deposits. */\n  amountPrefix?: string\n  /** Render the colored category strip (`header_text`) at the top of the card. */\n  categoryStrip?: boolean\n  /** Raise the strip and body together with elevation/1. */\n  cardShadow?: boolean\n  /** Layout overrides for the graphic+text row (padding, gap). */\n  rowSx?: SxProps\n  /** Which payload field feeds the secondary line beside the amount. */\n  secondarySource?: 'merchant' | 'label'\n  /** Whether the secondary line sits above or below the amount. */\n  secondaryPosition?: 'above' | 'below'\n  /** Typography variant for the secondary line. */\n  secondaryVariant?: 'body2' | 'caption'\n  /** Theme color path for the secondary line. */\n  secondaryColor?: string\n}\n\n/** Glyph size in px on the standard icon tile (IconComponent). */\nexport const TILE_ICON_SIZE = 30\n\n// Low Account Balance's red tile, shared by its legacy (`low_balance_alert`) and V2 (`low_balance`)\n// variant names.\nconst LOW_BALANCE_TILE: BlockLayoutConfig = {\n  background: ERROR_WASH_GRADIENT,\n}\n\nexport const getLayoutConfig = (theme: Theme): Record<string, BlockLayoutConfig> => {\n  return {\n    overdraft_warning: {\n      background: theme.palette.warning.light,\n      sub_logo: 'error',\n    },\n    low_balance_alert: LOW_BALANCE_TILE,\n    // V2 name for the same tile: content from `instance_slot.data`, the logo badged with `badge`.\n    low_balance: { ...LOW_BALANCE_TILE, badge: 'error' },\n    // Shared on/off-track status pair — used by Monthly Obligations Status and\n    // Payday Cash Left Over Status (identical designs, different copy).\n    status_off_track: {\n      logo_color: 'background.paper',\n      logo_bGcolor: 'error.main',\n      // Figma 9936:39145: the money icon's tile has 4px corners.\n      logo_border_radius: '4px',\n      // Figma draws the money glyph at 24px in both status tiles (9936:39156).\n      logo_icon_size: 24,\n      background: ERROR_WASH_GRADIENT,\n    },\n    interest_charges_summary: {\n      logo_color: 'text.primary',\n      logo_bGcolor: alpha(theme.palette.categories?.feesCharges || '', 0.25),\n      logo_border_color: 'categories.feesCharges',\n      background:\n        'linear-gradient(256.82deg, rgba(227, 39, 39, 0.2) 1.86%, rgba(255, 123, 0, 0.2) 101.54%)',\n    },\n    // Shared deposit-celebration card — used by both the standard deposit and the emergency-fund\n    // deposit beats (identical design, different copy), so one design-named variant serves both.\n    deposit_received: {\n      isConfetti: true,\n      gradient: WARM_LIME_ACCENT_GRADIENT,\n      graphic: 'logo',\n      amountVariant: 'h3',\n      amountPrefix: '+',\n      categoryStrip: true,\n      cardShadow: true,\n      rowSx: { gap: 12, p: 12 },\n      secondarySource: 'merchant',\n      secondaryPosition: 'below',\n      secondaryVariant: 'body2',\n      secondaryColor: 'text.primary',\n    },\n    status_on_track: {\n      isConfetti: true,\n      gradient: WARM_LIME_ACCENT_GRADIENT,\n      graphic: 'logo',\n      amountVariant: 'h2',\n      rowSx: { gap: 16, p: 16 },\n      secondarySource: 'label',\n      secondaryPosition: 'below',\n      secondaryVariant: 'caption',\n      secondaryColor: 'text.secondary',\n    },\n    payoff_celebration: {\n      isConfetti: true,\n      gradient: CELEBRATION_GRADIENT,\n      graphic: 'paidOffCard',\n      amountVariant: 'h2',\n      rowSx: { gap: 24, px: 24, py: 16 },\n      secondarySource: 'label',\n      secondaryPosition: 'below',\n      secondaryVariant: 'caption',\n      secondaryColor: 'text.secondary',\n    },\n    savings_deposit: {\n      isConfetti: true,\n      gradient: CELEBRATION_GRADIENT,\n      graphic: 'savings',\n      amountVariant: 'h2',\n      rowSx: { gap: 16, p: 16 },\n      secondarySource: 'label',\n      secondaryPosition: 'above',\n      secondaryVariant: 'body2',\n      secondaryColor: 'text.primary',\n    },\n    // Neutral fallback for an unknown/unmatched variant: renders the plain standard card (no\n    // confetti, no special background). `resolveVariantConfig` warns before falling back here.\n    default: {},\n  }\n}\n"],"mappings":";;AAqDA,IAAM,IAAsC,EAC1C,YAAY,EACd,GAEa,IAAA,CAAmB,OACvB;AAAA,EACL,mBAAmB;AAAA,IACjB,YAAY,EAAM,QAAQ,QAAQ;AAAA,IAClC,UAAU;AAAA,EACZ;AAAA,EACA,mBAAmB;AAAA,EAEnB,aAAa;AAAA,IAAE,GAAG;AAAA,IAAkB,OAAO;AAAA,EAAQ;AAAA,EAGnD,kBAAkB;AAAA,IAChB,YAAY;AAAA,IACZ,cAAc;AAAA,IAEd,oBAAoB;AAAA,IAEpB,gBAAgB;AAAA,IAChB,YAAY;AAAA,EACd;AAAA,EACA,0BAA0B;AAAA,IACxB,YAAY;AAAA,IACZ,cAAc,EAAM,EAAM,QAAQ,YAAY,eAAe,IAAI,IAAI;AAAA,IACrE,mBAAmB;AAAA,IACnB,YACE;AAAA,EACJ;AAAA,EAGA,kBAAkB;AAAA,IAChB,YAAY;AAAA,IACZ,UAAU;AAAA,IACV,SAAS;AAAA,IACT,eAAe;AAAA,IACf,cAAc;AAAA,IACd,eAAe;AAAA,IACf,YAAY;AAAA,IACZ,OAAO;AAAA,MAAE,KAAK;AAAA,MAAI,GAAG;AAAA,IAAG;AAAA,IACxB,iBAAiB;AAAA,IACjB,mBAAmB;AAAA,IACnB,kBAAkB;AAAA,IAClB,gBAAgB;AAAA,EAClB;AAAA,EACA,iBAAiB;AAAA,IACf,YAAY;AAAA,IACZ,UAAU;AAAA,IACV,SAAS;AAAA,IACT,eAAe;AAAA,IACf,OAAO;AAAA,MAAE,KAAK;AAAA,MAAI,GAAG;AAAA,IAAG;AAAA,IACxB,iBAAiB;AAAA,IACjB,mBAAmB;AAAA,IACnB,kBAAkB;AAAA,IAClB,gBAAgB;AAAA,EAClB;AAAA,EACA,oBAAoB;AAAA,IAClB,YAAY;AAAA,IACZ,UAAU;AAAA,IACV,SAAS;AAAA,IACT,eAAe;AAAA,IACf,OAAO;AAAA,MAAE,KAAK;AAAA,MAAI,IAAI;AAAA,MAAI,IAAI;AAAA,IAAG;AAAA,IACjC,iBAAiB;AAAA,IACjB,mBAAmB;AAAA,IACnB,kBAAkB;AAAA,IAClB,gBAAgB;AAAA,EAClB;AAAA,EACA,iBAAiB;AAAA,IACf,YAAY;AAAA,IACZ,UAAU;AAAA,IACV,SAAS;AAAA,IACT,eAAe;AAAA,IACf,OAAO;AAAA,MAAE,KAAK;AAAA,MAAI,GAAG;AAAA,IAAG;AAAA,IACxB,iBAAiB;AAAA,IACjB,mBAAmB;AAAA,IACnB,kBAAkB;AAAA,IAClB,gBAAgB;AAAA,EAClB;AAAA,EAGA,SAAS,CAAC;AACZ"}
+{"version":3,"file":"layout.es.js","names":[],"sources":["../../../../../src/insights-v2/blocks/ComponentBlocks/AccountBlock/layout.ts"],"sourcesContent":["import { alpha, type SxProps, type Theme } from '@mui/material/styles'\n\nimport {\n  CELEBRATION_GRADIENT,\n  ERROR_WASH_GRADIENT,\n  WARM_LIME_ACCENT_GRADIENT,\n} from '../../../components/celebrationGradients'\n\nexport interface BlockLayoutConfig {\n  background?: string\n  logo_color?: string\n  logo_bGcolor?: string\n  logo_border_color?: string\n  /** Corner radius of the icon tile (`icon_name` or an `ICO-` logo). Defaults to 6px. */\n  logo_border_radius?: string\n  /** Glyph size in px for an `ICO-` logo: on the confetti tile (default 24) and on the standard\n   * icon tile (default `TILE_ICON_SIZE`). */\n  logo_icon_size?: number\n  /** mx-icons glyph shown before `sub_text` (e.g. a warning icon on overdraft_warning). */\n  sub_logo?: string\n  /** mx-icons glyph badged on the logo's corner (e.g. `error` on Low Account Balance's V2 tile). */\n  badge?: string\n  /** When true, AccountBlock renders the confetti-backed celebration card using the fields below. */\n  isConfetti?: boolean\n  /** Gradient wash layered over `background.paper` for the confetti card. */\n  gradient?: string\n  /** Which illustration sits left of the text. `logo` is the data-driven merchant/institution logo. */\n  graphic?: 'paidOffCard' | 'savings' | 'logo'\n  /** Amount typography variant — `h2` for milestones, `h3` for deposits. */\n  amountVariant?: 'h2' | 'h3'\n  /** Prefix prepended to the formatted amount, e.g. `+` for deposits. */\n  amountPrefix?: string\n  /** Render the colored category strip (`header_text`) at the top of the card. */\n  categoryStrip?: boolean\n  /** Raise the strip and body together with elevation/1. */\n  cardShadow?: boolean\n  /** Layout overrides for the graphic+text row (padding, gap). */\n  rowSx?: SxProps\n  /** Which payload field feeds the secondary line beside the amount. */\n  secondarySource?: 'merchant' | 'label'\n  /** Whether the secondary line sits above or below the amount. */\n  secondaryPosition?: 'above' | 'below'\n  /** Typography variant for the secondary line. */\n  secondaryVariant?: 'body2' | 'caption'\n  /** Theme color path for the secondary line. */\n  secondaryColor?: string\n}\n\n/** Glyph size in px on the standard icon tile (IconComponent). */\nexport const TILE_ICON_SIZE = 30\n\n// Low Account Balance's red tile, shared by its legacy (`low_balance_alert`) and V2 (`low_balance`)\n// variant names.\nconst LOW_BALANCE_TILE: BlockLayoutConfig = {\n  background: ERROR_WASH_GRADIENT,\n}\n\nexport const getLayoutConfig = (theme: Theme): Record<string, BlockLayoutConfig> => {\n  return {\n    overdraft_warning: {\n      background: theme.palette.warning.light,\n      sub_logo: 'error',\n    },\n    low_balance_alert: LOW_BALANCE_TILE,\n    // V2 name for the same tile: content from `instance_slot.data`, the logo badged with `badge`.\n    low_balance: { ...LOW_BALANCE_TILE, badge: 'error' },\n    // Shared on/off-track status pair — used by Monthly Obligations Status and\n    // Payday Cash Left Over Status (identical designs, different copy).\n    status_off_track: {\n      logo_color: 'background.paper',\n      logo_bGcolor: 'error.main',\n      // Figma 9936:39145: the money icon's tile has 4px corners.\n      logo_border_radius: '4px',\n      // Figma draws the money glyph at 24px in both status tiles (9936:39156).\n      logo_icon_size: 24,\n      background: ERROR_WASH_GRADIENT,\n    },\n    interest_charges_summary: {\n      logo_color: 'text.primary',\n      logo_bGcolor: alpha(theme.palette.categories?.feesCharges || '', 0.25),\n      logo_border_color: 'categories.feesCharges',\n      background:\n        'linear-gradient(256.82deg, rgba(227, 39, 39, 0.2) 1.86%, rgba(255, 123, 0, 0.2) 101.54%)',\n    },\n    // Shared deposit-celebration card — used by both the standard deposit and the emergency-fund\n    // deposit beats (identical design, different copy), so one design-named variant serves both.\n    deposit_received: {\n      isConfetti: true,\n      gradient: WARM_LIME_ACCENT_GRADIENT,\n      graphic: 'logo',\n      amountVariant: 'h3',\n      amountPrefix: '+',\n      categoryStrip: true,\n      cardShadow: true,\n      rowSx: { gap: 12, p: 12 },\n      secondarySource: 'merchant',\n      secondaryPosition: 'below',\n      secondaryVariant: 'body2',\n      secondaryColor: 'text.primary',\n    },\n    status_on_track: {\n      isConfetti: true,\n      gradient: WARM_LIME_ACCENT_GRADIENT,\n      graphic: 'logo',\n      amountVariant: 'h2',\n      rowSx: { gap: 16, p: 16 },\n      secondarySource: 'label',\n      secondaryPosition: 'below',\n      secondaryVariant: 'caption',\n      secondaryColor: 'text.secondary',\n    },\n    payoff_celebration: {\n      isConfetti: true,\n      gradient: CELEBRATION_GRADIENT,\n      graphic: 'paidOffCard',\n      amountVariant: 'h2',\n      rowSx: { gap: 16, px: 24, py: 16 },\n      secondarySource: 'label',\n      secondaryPosition: 'below',\n      secondaryVariant: 'caption',\n      secondaryColor: 'text.secondary',\n    },\n    savings_deposit: {\n      isConfetti: true,\n      gradient: CELEBRATION_GRADIENT,\n      graphic: 'savings',\n      amountVariant: 'h2',\n      rowSx: { gap: 16, p: 16 },\n      secondarySource: 'label',\n      secondaryPosition: 'above',\n      secondaryVariant: 'body2',\n      secondaryColor: 'text.primary',\n    },\n    // Neutral fallback for an unknown/unmatched variant: renders the plain standard card (no\n    // confetti, no special background). `resolveVariantConfig` warns before falling back here.\n    default: {},\n  }\n}\n"],"mappings":";;AAqDA,IAAM,IAAsC,EAC1C,YAAY,EACd,GAEa,IAAA,CAAmB,OACvB;AAAA,EACL,mBAAmB;AAAA,IACjB,YAAY,EAAM,QAAQ,QAAQ;AAAA,IAClC,UAAU;AAAA,EACZ;AAAA,EACA,mBAAmB;AAAA,EAEnB,aAAa;AAAA,IAAE,GAAG;AAAA,IAAkB,OAAO;AAAA,EAAQ;AAAA,EAGnD,kBAAkB;AAAA,IAChB,YAAY;AAAA,IACZ,cAAc;AAAA,IAEd,oBAAoB;AAAA,IAEpB,gBAAgB;AAAA,IAChB,YAAY;AAAA,EACd;AAAA,EACA,0BAA0B;AAAA,IACxB,YAAY;AAAA,IACZ,cAAc,EAAM,EAAM,QAAQ,YAAY,eAAe,IAAI,IAAI;AAAA,IACrE,mBAAmB;AAAA,IACnB,YACE;AAAA,EACJ;AAAA,EAGA,kBAAkB;AAAA,IAChB,YAAY;AAAA,IACZ,UAAU;AAAA,IACV,SAAS;AAAA,IACT,eAAe;AAAA,IACf,cAAc;AAAA,IACd,eAAe;AAAA,IACf,YAAY;AAAA,IACZ,OAAO;AAAA,MAAE,KAAK;AAAA,MAAI,GAAG;AAAA,IAAG;AAAA,IACxB,iBAAiB;AAAA,IACjB,mBAAmB;AAAA,IACnB,kBAAkB;AAAA,IAClB,gBAAgB;AAAA,EAClB;AAAA,EACA,iBAAiB;AAAA,IACf,YAAY;AAAA,IACZ,UAAU;AAAA,IACV,SAAS;AAAA,IACT,eAAe;AAAA,IACf,OAAO;AAAA,MAAE,KAAK;AAAA,MAAI,GAAG;AAAA,IAAG;AAAA,IACxB,iBAAiB;AAAA,IACjB,mBAAmB;AAAA,IACnB,kBAAkB;AAAA,IAClB,gBAAgB;AAAA,EAClB;AAAA,EACA,oBAAoB;AAAA,IAClB,YAAY;AAAA,IACZ,UAAU;AAAA,IACV,SAAS;AAAA,IACT,eAAe;AAAA,IACf,OAAO;AAAA,MAAE,KAAK;AAAA,MAAI,IAAI;AAAA,MAAI,IAAI;AAAA,IAAG;AAAA,IACjC,iBAAiB;AAAA,IACjB,mBAAmB;AAAA,IACnB,kBAAkB;AAAA,IAClB,gBAAgB;AAAA,EAClB;AAAA,EACA,iBAAiB;AAAA,IACf,YAAY;AAAA,IACZ,UAAU;AAAA,IACV,SAAS;AAAA,IACT,eAAe;AAAA,IACf,OAAO;AAAA,MAAE,KAAK;AAAA,MAAI,GAAG;AAAA,IAAG;AAAA,IACxB,iBAAiB;AAAA,IACjB,mBAAmB;AAAA,IACnB,kBAAkB;AAAA,IAClB,gBAAgB;AAAA,EAClB;AAAA,EAGA,SAAS,CAAC;AACZ"}

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

@@ -14,15 +14,15 @@ import { blocks as bo } from "../mappings/blocks.es.js";
 import { ActionBlockLayer as _o } from "../actionBlocks/ActionBlockLayer.es.js";
 import ko from "./Footer.es.js";
 import yo from "./Header.es.js";
-import { FeedbackBar as xo } from "./FeedbackBar.es.js";
-import { DismissInsightDialog as vo } from "./DismissInsightDialog.es.js";
+import { FeedbackBar as vo } from "./FeedbackBar.es.js";
+import { DismissInsightDialog as xo } from "./DismissInsightDialog.es.js";
 import { HiddenConfirmationCard as So } from "./HiddenConfirmationCard.es.js";
 import { LoadingCard as To } from "./LoadingCard.es.js";
 import { ObsolesceBanner as Lo } from "./ObsolesceBanner.es.js";
 import { useBeatFeedbackFlow as wo } from "../hooks/useBeatFeedbackFlow.es.js";
 import { useMemo as Ao } from "react";
 import { observer as Bo } from "mobx-react-lite";
-import v from "@mui/material/Stack";
+import x from "@mui/material/Stack";
 import { P as Do } from "@mxenabled/mxui";
 import f from "@mui/material/Button";
 import { ChevronRight as I } from "@mxenabled/mx-icons";
@@ -66,7 +66,7 @@ var Eo = {}, Ho = {
   py: 12,
   "&.Mui-disabled": { color: "text.disabled" }
 }, Ci = Bo(({ beat: t, beatActions: l = Eo, obsolete: g, isLoading: F = !1, isError: E = !1 }) => {
-  const H = eo(), P = ro(), { config: M } = to(), o = wo(t, l), b = no(), { runCta: N, primary: _, secondary: T, linkPresentation: R } = uo(t, l, t.insights_payload?.primary_cta, t.insights_payload?.secondary_cta, t.insights_payload?.in_description_cta), c = t.insights_payload?.widget_type === "mini", W = Ao(() => ({
+  const H = eo(), P = ro(), { config: M } = to(), o = wo(t, l), b = no(), { runCta: N, primary: _, secondary: T, linkPresentation: R } = uo(t, l, t.insights_payload?.primary_cta ?? void 0, t.insights_payload?.secondary_cta ?? void 0, t.insights_payload?.in_description_cta ?? void 0), c = t.insights_payload?.widget_type === "mini", W = Ao(() => ({
     ...o.wrappedActions,
     beat: t
   }), [o.wrappedActions, t]);
@@ -106,10 +106,10 @@ var Eo = {}, Ho = {
       template: t.template,
       handler: "cardClick"
     })));
-  }, y = H.insights_feed?.general, x = g?.state === "not_refreshable" && !V && !!y;
+  }, y = H.insights_feed?.general, v = g?.state === "not_refreshable" && !V && !!y;
   return /* @__PURE__ */ i(ao, {
     value: W,
-    children: /* @__PURE__ */ C(v, {
+    children: /* @__PURE__ */ C(x, {
       sx: { mb: 16 },
       children: [
         o.cardState === "confirming" ? /* @__PURE__ */ i(So, {
@@ -120,14 +120,14 @@ var Eo = {}, Ho = {
           ...g,
           copy: y
         }), /* @__PURE__ */ C(Fo, {
-          inert: x,
-          sx: { ...x && {
+          inert: v,
+          sx: { ...v && {
             position: "relative",
             zIndex: 2,
             pointerEvents: "none"
           } },
           children: [
-            x && /* @__PURE__ */ i(Io, { sx: Ho }),
+            v && /* @__PURE__ */ i(Io, { sx: Ho }),
             /* @__PURE__ */ i(yo, {
               isMini: c,
               subtitle: K,
@@ -137,7 +137,7 @@ var Eo = {}, Ho = {
               beatGuid: L,
               payload: e
             }),
-            /* @__PURE__ */ C(v, {
+            /* @__PURE__ */ C(x, {
               sx: {
                 gap: 6,
                 pb: 16,
@@ -173,7 +173,7 @@ var Eo = {}, Ho = {
                 })
               ]
             }),
-            Z && /* @__PURE__ */ C(v, {
+            Z && /* @__PURE__ */ C(x, {
               sx: {
                 gap: 8,
                 pb: 16,
@@ -208,14 +208,14 @@ var Eo = {}, Ho = {
                 })
               ]
             }),
-            /* @__PURE__ */ i(xo, {
+            /* @__PURE__ */ i(vo, {
               onTellUsMore: o.openRatingSurvey,
               show: o.isFeedbackBarShown
             })
           ]
         })] }),
         /* @__PURE__ */ i(_o, { beat: t }),
-        /* @__PURE__ */ i(vo, {
+        /* @__PURE__ */ i(xo, {
           isOpen: o.isDismissOpen,
           onClose: o.closeDismissDialog,
           onDismiss: o.confirmDismiss

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 { type MouseEvent, useMemo } from 'react'\n\nimport { 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 } 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, useGlobalStore, useInsightsV2Store } from '../../common'\nimport { sendClientConfiguredCta } from '../../common/utils/PostMessage'\nimport type { Beat, PrimaryCTA, SecondaryCTA } from '../../core'\nimport { BeatActionsProvider, type BeatActions } from '../beatActions'\nimport { ActionBlockLayer } from '../actionBlocks/ActionBlockLayer'\nimport { HOST_ACTIONS, reportCtaClick, useBeatCtaActions } from '../ctaActions'\nimport { CtaStatus } from './CtaStatus'\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  // Above every block's own z-index (hero card 1, AccountBlock 2), or that section shows through.\n  zIndex: 3,\n} as const\n\n// Figma's 24px text link: 13/16 semibold, 16px line plus 4px above and below, its text starting at the\n// card's 16px inset. A minimum height, not the theme's fixed 44px Button height, so a long or translated\n// label wraps instead of overflowing; MUI's 64px minimum width and centring are undone for the same inset.\n// The in-description links use it as is, with the Button's 20px chevron, so they are 28px tall, as in\n// Figma's Low Account Balance full card (node 438:27877); the 24px is the mini CTA's, which has no icon.\nconst TEXT_LINK_SX = {\n  alignSelf: 'flex-start',\n  fontSize: 13,\n  fontWeight: 600,\n  height: 'auto',\n  justifyContent: 'flex-start',\n  lineHeight: '16px',\n  minHeight: 24,\n  minWidth: 0,\n  px: 0,\n  py: 4,\n  textAlign: 'left',\n} as const\n\n// Mini CTA label, which fits Pulse's 312px mini slide as a text link.\nconst MINI_CTA_SX = {\n  ...TEXT_LINK_SX,\n  alignItems: 'center',\n  display: 'flex',\n  textTransform: 'none',\n} as const\n\n// Full card's secondary CTA (e.g. Fee Detected's Contact Support): a quiet text button, 13/16\n// semibold in text.secondary, at least 40px tall with 12/16 padding, as in Figma. `color=\"inherit\"` keeps\n// hover, ripple and focus off the primary palette. An unavailable CTA (contact_support_block with no host\n// handler) is dimmed at the call site, as the primary CTA is, because it is only aria-disabled and so\n// never matches `.Mui-disabled`.\nconst SECONDARY_CTA_SX = {\n  color: 'text.secondary',\n  fontSize: 13,\n  fontWeight: 600,\n  height: 'auto',\n  lineHeight: '16px',\n  minHeight: 40,\n  px: 16,\n  py: 12,\n  '&.Mui-disabled': { color: 'text.disabled' },\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 copy = useGlobalCopyStore()\n    const insightsV2Store = useInsightsV2Store()\n    const { config } = useAppConfig()\n    const flow = useBeatFeedbackFlow(beat, beatActions)\n\n    const stores = useGlobalStore()\n    const {\n      runCta: handleCtaClick,\n      primary: primaryCtaState,\n      secondary: secondaryCtaState,\n      linkPresentation,\n    } = useBeatCtaActions(\n      beat,\n      beatActions,\n      beat.insights_payload?.primary_cta,\n      beat.insights_payload?.secondary_cta,\n      beat.insights_payload?.in_description_cta,\n    )\n\n    // Guard: payload may not be loaded yet (isLoading/isError states).\n    const isMini = beat.insights_payload?.widget_type === 'mini'\n\n    // Memoized: an inline object here would change identity every render, making every\n    // useAnalyticsEvent() consumer's callback (and its effect deps) unstable too.\n    const beatActionsValue = useMemo(\n      () => ({ ...flow.wrappedActions, beat }),\n      [flow.wrappedActions, beat],\n    )\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 { instance_slot, primary_cta, secondary_cta, sub_title, title, guid, dismissed_at } =\n      insights_payload\n    const { block } = instance_slot\n\n    // Rebuild V1 subtitle shape; sub_title wins if present.\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    // CTAs run via ctaActions; contact_support_block bypasses it.\n    const isCtaDisabled = (ctaBlock: string | null | undefined) =>\n      isContactSupportCtaDisabled(ctaBlock, config, beatActions.onContactSupport)\n\n    const onCtaClick = async (slot: 'primary' | 'secondary', cta: PrimaryCTA | SecondaryCTA) => {\n      if (isCtaDisabled(cta.block)) return\n\n      if (cta.block === actionBlocksKey.CONTACT_SUPPORT_ACTION_BLOCK) {\n        // Bypasses the runner, but still reports the press like any other CTA: the generic\n        // press event, and (on a first primary press) FIRST_TIME_PRIMARY_ACTION_SELECTED +\n        // cta_clicked_at.\n        reportCtaClick({ beat, stores, hostActions: beatActions, slot })\n        beatActions.onContactSupport?.()\n        return\n      }\n\n      await handleCtaClick(slot, cta)\n    }\n\n    const Block = blocks[block as keyof typeof blocks]\n\n    const inDescriptionCta = insights_payload.in_description_cta\n    // Full card: the envelope's link opens the drawer its block names. A link with no block (mini's\n    // \"Make a Transfer\") is the card's action, drawn as the mini label below, never a dead link.\n    const envelopeLink =\n      !isMini && inDescriptionCta?.label && inDescriptionCta.block ? inDescriptionCta : undefined\n    // The card's action label: the primary CTA's, else a block-less envelope link's (ditto ≥ 1.4.3\n    // sends mini's action as in_description_cta). `||`, not `??`: the copy may send the primary label\n    // as \"\" rather than omit it, and an empty string must fall through. It is a button only on a full\n    // card with a primary CTA; otherwise a label, so a tap reaches the host's card handler.\n    const ctaLabel =\n      primary_cta?.label || (envelopeLink ? undefined : inDescriptionCta?.label) || undefined\n    const isCtaButton = !isMini && !!primary_cta?.label\n    const clientConfiguredLabel = beat.in_description_cta || beat.html_in_description_cta\n    const onClientConfiguredLinkClick = () => {\n      const { is_mobile_webview, clientConfig } = stores.appDataStore.appConfig\n\n      sendClientConfiguredCta(beat.template, {\n        isMobileWebview: is_mobile_webview,\n        webviewScheme: clientConfig?.master?.ui_message_webview_url_scheme,\n        userGuid: insights_payload.user_guid ?? beat.user_guid,\n      })\n    }\n    // The primary step's presenter may draw a status or nothing instead of the button (full card only).\n    const primaryPresentation = isCtaButton ? primaryCtaState.presentation : undefined\n    const hidesAllCtas = primaryPresentation?.kind === 'hidden' && !!primaryPresentation.hideAll\n    const showSecondaryCta = !isMini && !!secondary_cta?.label && !hidesAllCtas\n    // Mini: the card's action (in_description_cta) mirrors the full card's state, as a label only.\n    // Answered → the status's action word (Undo) and its answered title; hidden → no label. The tap\n    // stays the host's (it opens the insight with its block), so nothing runs from mini itself.\n    const miniPresentation = isMini ? linkPresentation : undefined\n    const miniStatus = miniPresentation?.kind === 'status' ? miniPresentation : undefined\n    const actionLabel = miniPresentation ? miniStatus?.action?.label : ctaLabel\n    const cardTitle = miniPresentation?.title || title || ''\n    const showActionLink = !!actionLabel && !isCtaButton\n    const showCtaRow = (isCtaButton && primaryPresentation?.kind !== 'hidden') || showSecondaryCta\n    const handleMiniActionClick = (event: MouseEvent) => {\n      const { onCtaAction } = beatActions\n      if (!onCtaAction) return\n      event.stopPropagation()\n      Promise.resolve()\n        .then(() => onCtaAction({ beatGuid: beat.guid, name: HOST_ACTIONS.cardClick }))\n        .catch((error) =>\n          stores.captureException(error, {\n            store: 'BaseLayout',\n            template: beat.template,\n            handler: 'cardClick',\n          }),\n        )\n    }\n    const obsoleteCopy = copy.insights_feed?.general\n    const isObsoleteDimmed =\n      obsolete?.state === 'not_refreshable' && !dismissed_at && !!obsoleteCopy\n\n    return (\n      <BeatActionsProvider value={beatActionsValue}>\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={cardTitle} />\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                    sx={{ fontWeight: 'fontWeightRegular' }}\n                    variant=\"subtitle2\"\n                  />\n                  {/* V2: the envelope's link opens the action block it names. */}\n                  {envelopeLink && (\n                    <Button\n                      endIcon={<ChevronRight />}\n                      onClick={() =>\n                        insightsV2Store.openActionDrawer({ guid, trigger: 'inDescriptionCta' })\n                      }\n                      sx={TEXT_LINK_SX}\n                    >\n                      {envelopeLink.label}\n                    </Button>\n                  )}\n                  {/* The card's action with no primary CTA button, never a drawer: mini hands its tap to\n                      the host (`cardClick`); a full card's block-less link bubbles to the host's card handler. */}\n                  {showActionLink && (\n                    <Button\n                      onClick={isMini ? handleMiniActionClick : undefined}\n                      sx={MINI_CTA_SX}\n                      variant=\"text\"\n                    >\n                      {actionLabel}\n                    </Button>\n                  )}\n                  {/* Custom-copy link when the envelope sends none; legacy mini shows it too, so no mini guard. */}\n                  {!inDescriptionCta?.label && clientConfiguredLabel && (\n                    <Button\n                      endIcon={<ChevronRight />}\n                      onClick={onClientConfiguredLinkClick}\n                      sx={TEXT_LINK_SX}\n                    >\n                      {clientConfiguredLabel}\n                    </Button>\n                  )}\n                </Stack>\n\n                {showCtaRow && (\n                  <Stack sx={{ gap: 8, pb: 16, px: 16 }}>\n                    {isCtaButton && primary_cta && primaryPresentation?.kind === 'status' && (\n                      <CtaStatus\n                        action={primaryPresentation.action}\n                        sx={primaryPresentation.sx}\n                        icon={primaryPresentation.icon}\n                        label={primaryPresentation.label}\n                        tone={primaryPresentation.tone}\n                      />\n                    )}\n                    {isCtaButton && primary_cta && !primaryPresentation && (\n                      <Button\n                        aria-disabled={isCtaDisabled(primary_cta.block) || primaryCtaState.disabled}\n                        disabled={primaryCtaState.disabled}\n                        onClick={() => onCtaClick('primary', primary_cta)}\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                    {showSecondaryCta && secondary_cta && (\n                      <Button\n                        aria-disabled={\n                          isCtaDisabled(secondary_cta.block) || secondaryCtaState.disabled\n                        }\n                        color=\"inherit\"\n                        disabled={secondaryCtaState.disabled}\n                        onClick={() => onCtaClick('secondary', secondary_cta)}\n                        sx={{\n                          ...SECONDARY_CTA_SX,\n                          ...(isCtaDisabled(secondary_cta.block) && { color: 'text.disabled' }),\n                        }}\n                      >\n                        {secondary_cta.label}\n                      </Button>\n                    )}\n                  </Stack>\n                )}\n\n                <FeedbackBar onTellUsMore={flow.openRatingSurvey} show={flow.isFeedbackBarShown} />\n              </Card>\n            </>\n          )}\n\n          <ActionBlockLayer beat={beat} />\n\n          <DismissInsightDialog\n            isOpen={flow.isDismissOpen}\n            onClose={flow.closeDismissDialog}\n            onDismiss={flow.confirmDismiss}\n          />\n\n          {flow.isSurveyOpen && (\n            <FeedbackDialog\n              characterLimitLabel={flow.survey.characterLimitLabel}\n              closeAriaLabel={flow.survey.closeAriaLabel}\n              isOpen={true}\n              onBackClick={flow.feedbackDialogCallbacks.onBackClick}\n              onClose={flow.closeSurvey}\n              onSubmit={flow.submitSurvey}\n              onTextInputFocus={flow.feedbackDialogCallbacks.onTextInputFocus}\n              options={flow.survey.options}\n              primaryText={flow.survey.submitText}\n              secondaryText={flow.survey.backText}\n              title={flow.survey.title}\n            />\n          )}\n\n          {flow.cardState === 'visible' && insights_payload.footer && (\n            <Footer footer={insights_payload.footer} />\n          )}\n        </Stack>\n      </BeatActionsProvider>\n    )\n  },\n)\n\nexport default BaseLayout\n"],"mappings":"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"}
+{"version":3,"file":"BaseLayout.es.js","names":[],"sources":["../../../src/insights-v2/components/BaseLayout.tsx"],"sourcesContent":["import { type MouseEvent, useMemo } from 'react'\n\nimport { 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 } 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, useGlobalStore, useInsightsV2Store } from '../../common'\nimport { sendClientConfiguredCta } from '../../common/utils/PostMessage'\nimport type { Beat, PrimaryCTA, SecondaryCTA } from '../../core'\nimport { BeatActionsProvider, type BeatActions } from '../beatActions'\nimport { ActionBlockLayer } from '../actionBlocks/ActionBlockLayer'\nimport { HOST_ACTIONS, reportCtaClick, useBeatCtaActions } from '../ctaActions'\nimport { CtaStatus } from './CtaStatus'\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  // Above every block's own z-index (hero card 1, AccountBlock 2), or that section shows through.\n  zIndex: 3,\n} as const\n\n// Figma's 24px text link: 13/16 semibold, 16px line plus 4px above and below, its text starting at the\n// card's 16px inset. A minimum height, not the theme's fixed 44px Button height, so a long or translated\n// label wraps instead of overflowing; MUI's 64px minimum width and centring are undone for the same inset.\n// The in-description links use it as is, with the Button's 20px chevron, so they are 28px tall, as in\n// Figma's Low Account Balance full card (node 438:27877); the 24px is the mini CTA's, which has no icon.\nconst TEXT_LINK_SX = {\n  alignSelf: 'flex-start',\n  fontSize: 13,\n  fontWeight: 600,\n  height: 'auto',\n  justifyContent: 'flex-start',\n  lineHeight: '16px',\n  minHeight: 24,\n  minWidth: 0,\n  px: 0,\n  py: 4,\n  textAlign: 'left',\n} as const\n\n// Mini CTA label, which fits Pulse's 312px mini slide as a text link.\nconst MINI_CTA_SX = {\n  ...TEXT_LINK_SX,\n  alignItems: 'center',\n  display: 'flex',\n  textTransform: 'none',\n} as const\n\n// Full card's secondary CTA (e.g. Fee Detected's Contact Support): a quiet text button, 13/16\n// semibold in text.secondary, at least 40px tall with 12/16 padding, as in Figma. `color=\"inherit\"` keeps\n// hover, ripple and focus off the primary palette. An unavailable CTA (contact_support_block with no host\n// handler) is dimmed at the call site, as the primary CTA is, because it is only aria-disabled and so\n// never matches `.Mui-disabled`.\nconst SECONDARY_CTA_SX = {\n  color: 'text.secondary',\n  fontSize: 13,\n  fontWeight: 600,\n  height: 'auto',\n  lineHeight: '16px',\n  minHeight: 40,\n  px: 16,\n  py: 12,\n  '&.Mui-disabled': { color: 'text.disabled' },\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 copy = useGlobalCopyStore()\n    const insightsV2Store = useInsightsV2Store()\n    const { config } = useAppConfig()\n    const flow = useBeatFeedbackFlow(beat, beatActions)\n\n    const stores = useGlobalStore()\n    const {\n      runCta: handleCtaClick,\n      primary: primaryCtaState,\n      secondary: secondaryCtaState,\n      linkPresentation,\n    } = useBeatCtaActions(\n      beat,\n      beatActions,\n      beat.insights_payload?.primary_cta ?? undefined,\n      beat.insights_payload?.secondary_cta ?? undefined,\n      beat.insights_payload?.in_description_cta ?? undefined,\n    )\n\n    // Guard: payload may not be loaded yet (isLoading/isError states).\n    const isMini = beat.insights_payload?.widget_type === 'mini'\n\n    // Memoized: an inline object here would change identity every render, making every\n    // useAnalyticsEvent() consumer's callback (and its effect deps) unstable too.\n    const beatActionsValue = useMemo(\n      () => ({ ...flow.wrappedActions, beat }),\n      [flow.wrappedActions, beat],\n    )\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 { instance_slot, primary_cta, secondary_cta, sub_title, title, guid, dismissed_at } =\n      insights_payload\n    const { block } = instance_slot\n\n    // Rebuild V1 subtitle shape; sub_title wins if present.\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    // CTAs run via ctaActions; contact_support_block bypasses it.\n    const isCtaDisabled = (ctaBlock: string | null | undefined) =>\n      isContactSupportCtaDisabled(ctaBlock, config, beatActions.onContactSupport)\n\n    const onCtaClick = async (slot: 'primary' | 'secondary', cta: PrimaryCTA | SecondaryCTA) => {\n      if (isCtaDisabled(cta.block)) return\n\n      if (cta.block === actionBlocksKey.CONTACT_SUPPORT_ACTION_BLOCK) {\n        // Bypasses the runner, but still reports the press like any other CTA: the generic\n        // press event, and (on a first primary press) FIRST_TIME_PRIMARY_ACTION_SELECTED +\n        // cta_clicked_at.\n        reportCtaClick({ beat, stores, hostActions: beatActions, slot })\n        beatActions.onContactSupport?.()\n        return\n      }\n\n      await handleCtaClick(slot, cta)\n    }\n\n    const Block = blocks[block as keyof typeof blocks]\n\n    const inDescriptionCta = insights_payload.in_description_cta\n    // Full card: the envelope's link opens the drawer its block names. A link with no block (mini's\n    // \"Make a Transfer\") is the card's action, drawn as the mini label below, never a dead link.\n    const envelopeLink =\n      !isMini && inDescriptionCta?.label && inDescriptionCta.block ? inDescriptionCta : undefined\n    // The card's action label: the primary CTA's, else a block-less envelope link's (ditto ≥ 1.4.3\n    // sends mini's action as in_description_cta). `||`, not `??`: the copy may send the primary label\n    // as \"\" rather than omit it, and an empty string must fall through. It is a button only on a full\n    // card with a primary CTA; otherwise a label, so a tap reaches the host's card handler.\n    const ctaLabel =\n      primary_cta?.label || (envelopeLink ? undefined : inDescriptionCta?.label) || undefined\n    const isCtaButton = !isMini && !!primary_cta?.label\n    const clientConfiguredLabel = beat.in_description_cta || beat.html_in_description_cta\n    const onClientConfiguredLinkClick = () => {\n      const { is_mobile_webview, clientConfig } = stores.appDataStore.appConfig\n\n      sendClientConfiguredCta(beat.template, {\n        isMobileWebview: is_mobile_webview,\n        webviewScheme: clientConfig?.master?.ui_message_webview_url_scheme,\n        userGuid: insights_payload.user_guid ?? beat.user_guid,\n      })\n    }\n    // The primary step's presenter may draw a status or nothing instead of the button (full card only).\n    const primaryPresentation = isCtaButton ? primaryCtaState.presentation : undefined\n    const hidesAllCtas = primaryPresentation?.kind === 'hidden' && !!primaryPresentation.hideAll\n    const showSecondaryCta = !isMini && !!secondary_cta?.label && !hidesAllCtas\n    // Mini: the card's action (in_description_cta) mirrors the full card's state, as a label only.\n    // Answered → the status's action word (Undo) and its answered title; hidden → no label. The tap\n    // stays the host's (it opens the insight with its block), so nothing runs from mini itself.\n    const miniPresentation = isMini ? linkPresentation : undefined\n    const miniStatus = miniPresentation?.kind === 'status' ? miniPresentation : undefined\n    const actionLabel = miniPresentation ? miniStatus?.action?.label : ctaLabel\n    const cardTitle = miniPresentation?.title || title || ''\n    const showActionLink = !!actionLabel && !isCtaButton\n    const showCtaRow = (isCtaButton && primaryPresentation?.kind !== 'hidden') || showSecondaryCta\n    const handleMiniActionClick = (event: MouseEvent) => {\n      const { onCtaAction } = beatActions\n      if (!onCtaAction) return\n      event.stopPropagation()\n      Promise.resolve()\n        .then(() => onCtaAction({ beatGuid: beat.guid, name: HOST_ACTIONS.cardClick }))\n        .catch((error) =>\n          stores.captureException(error, {\n            store: 'BaseLayout',\n            template: beat.template,\n            handler: 'cardClick',\n          }),\n        )\n    }\n    const obsoleteCopy = copy.insights_feed?.general\n    const isObsoleteDimmed =\n      obsolete?.state === 'not_refreshable' && !dismissed_at && !!obsoleteCopy\n\n    return (\n      <BeatActionsProvider value={beatActionsValue}>\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={cardTitle} />\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                    sx={{ fontWeight: 'fontWeightRegular' }}\n                    variant=\"subtitle2\"\n                  />\n                  {/* V2: the envelope's link opens the action block it names. */}\n                  {envelopeLink && (\n                    <Button\n                      endIcon={<ChevronRight />}\n                      onClick={() =>\n                        insightsV2Store.openActionDrawer({ guid, trigger: 'inDescriptionCta' })\n                      }\n                      sx={TEXT_LINK_SX}\n                    >\n                      {envelopeLink.label}\n                    </Button>\n                  )}\n                  {/* The card's action with no primary CTA button, never a drawer: mini hands its tap to\n                      the host (`cardClick`); a full card's block-less link bubbles to the host's card handler. */}\n                  {showActionLink && (\n                    <Button\n                      onClick={isMini ? handleMiniActionClick : undefined}\n                      sx={MINI_CTA_SX}\n                      variant=\"text\"\n                    >\n                      {actionLabel}\n                    </Button>\n                  )}\n                  {/* Custom-copy link when the envelope sends none; legacy mini shows it too, so no mini guard. */}\n                  {!inDescriptionCta?.label && clientConfiguredLabel && (\n                    <Button\n                      endIcon={<ChevronRight />}\n                      onClick={onClientConfiguredLinkClick}\n                      sx={TEXT_LINK_SX}\n                    >\n                      {clientConfiguredLabel}\n                    </Button>\n                  )}\n                </Stack>\n\n                {showCtaRow && (\n                  <Stack sx={{ gap: 8, pb: 16, px: 16 }}>\n                    {isCtaButton && primary_cta && primaryPresentation?.kind === 'status' && (\n                      <CtaStatus\n                        action={primaryPresentation.action}\n                        sx={primaryPresentation.sx}\n                        icon={primaryPresentation.icon}\n                        label={primaryPresentation.label}\n                        tone={primaryPresentation.tone}\n                      />\n                    )}\n                    {isCtaButton && primary_cta && !primaryPresentation && (\n                      <Button\n                        aria-disabled={isCtaDisabled(primary_cta.block) || primaryCtaState.disabled}\n                        disabled={primaryCtaState.disabled}\n                        onClick={() => onCtaClick('primary', primary_cta)}\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                    {showSecondaryCta && secondary_cta && (\n                      <Button\n                        aria-disabled={\n                          isCtaDisabled(secondary_cta.block) || secondaryCtaState.disabled\n                        }\n                        color=\"inherit\"\n                        disabled={secondaryCtaState.disabled}\n                        onClick={() => onCtaClick('secondary', secondary_cta)}\n                        sx={{\n                          ...SECONDARY_CTA_SX,\n                          ...(isCtaDisabled(secondary_cta.block) && { color: 'text.disabled' }),\n                        }}\n                      >\n                        {secondary_cta.label}\n                      </Button>\n                    )}\n                  </Stack>\n                )}\n\n                <FeedbackBar onTellUsMore={flow.openRatingSurvey} show={flow.isFeedbackBarShown} />\n              </Card>\n            </>\n          )}\n\n          <ActionBlockLayer beat={beat} />\n\n          <DismissInsightDialog\n            isOpen={flow.isDismissOpen}\n            onClose={flow.closeDismissDialog}\n            onDismiss={flow.confirmDismiss}\n          />\n\n          {flow.isSurveyOpen && (\n            <FeedbackDialog\n              characterLimitLabel={flow.survey.characterLimitLabel}\n              closeAriaLabel={flow.survey.closeAriaLabel}\n              isOpen={true}\n              onBackClick={flow.feedbackDialogCallbacks.onBackClick}\n              onClose={flow.closeSurvey}\n              onSubmit={flow.submitSurvey}\n              onTextInputFocus={flow.feedbackDialogCallbacks.onTextInputFocus}\n              options={flow.survey.options}\n              primaryText={flow.survey.submitText}\n              secondaryText={flow.survey.backText}\n              title={flow.survey.title}\n            />\n          )}\n\n          {flow.cardState === 'visible' && insights_payload.footer && (\n            <Footer footer={insights_payload.footer} />\n          )}\n        </Stack>\n      </BeatActionsProvider>\n    )\n  },\n)\n\nexport default BaseLayout\n"],"mappings":"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"}

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

@@ -2,7 +2,7 @@ import { useBeatActions as s } from "../beatActions.es.js";
 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 { H3 as c } from "@mxenabled/mxui";
 import { jsx as r, jsxs as o } from "react/jsx-runtime";
 var g = ({ isMini: n, subtitle: t, title: i }) => {
   const { onMenuAction: p } = s();
@@ -20,7 +20,10 @@ var g = ({ isMini: n, subtitle: t, title: i }) => {
         flexDirection: "row",
         justifyContent: "space-between"
       },
-      children: [/* @__PURE__ */ r(f, { children: i }), !n && p && /* @__PURE__ */ r(m, {})]
+      children: [/* @__PURE__ */ r(c, {
+        truncate: !0,
+        children: i
+      }), !n && p && /* @__PURE__ */ r(m, {})]
     }), t && /* @__PURE__ */ r(a, { subtitle: t })]
   });
 };

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

@@ -1 +1 @@
-{"version":3,"file":"Header.es.js","names":[],"sources":["../../../src/insights-v2/components/Header.tsx"],"sourcesContent":["import Stack from '@mui/material/Stack'\n\nimport { H3 } from '@mxenabled/mxui'\n\nimport SubHeader from './SubHeader'\nimport InsightOptionsMenu from './InsightOptionsMenu'\nimport { useBeatActions } from '../beatActions'\nimport type { Subtitle } from '../../core'\n\ninterface HeaderProps {\n  isMini: boolean\n  subtitle?: Subtitle\n  title: string\n}\n\nconst Header = ({ isMini, subtitle, title }: HeaderProps) => {\n  // The overflow menu appears only when the host wired a menu handler and this\n  // isn't the compact/mini layout. Handlers are delivered via context.\n  const { onMenuAction } = useBeatActions()\n\n  return (\n    <Stack sx={{ gap: 4, pb: 12, pl: 16, pr: 16, pt: 16 }}>\n      <Stack\n        sx={{ alignItems: 'flex-start', flexDirection: 'row', justifyContent: 'space-between' }}\n      >\n        <H3>{title}</H3>\n        {!isMini && onMenuAction && <InsightOptionsMenu />}\n      </Stack>\n\n      {/* Sub Header */}\n      {subtitle && <SubHeader subtitle={subtitle} />}\n    </Stack>\n  )\n}\n\nexport default Header\n"],"mappings":";;;;;;AAeA,IAAM,IAAA,CAAU,EAAE,QAAA,GAAQ,UAAA,GAAU,OAAA,EAAA,MAAyB;AAG3D,QAAM,EAAE,cAAA,EAAA,IAAiB,EAAe;AAExC,SACE,gBAAA,EAAC,GAAD;AAAA,IAAO,IAAI;AAAA,MAAE,KAAK;AAAA,MAAG,IAAI;AAAA,MAAI,IAAI;AAAA,MAAI,IAAI;AAAA,MAAI,IAAI;AAAA,IAAG;AAAA,IAApD,UAAA,CACE,gBAAA,EAAC,GAAD;AAAA,MACE,IAAI;AAAA,QAAE,YAAY;AAAA,QAAc,eAAe;AAAA,QAAO,gBAAgB;AAAA,MAAgB;AAAA,MADxF,UAAA,CAGE,gBAAA,EAAC,GAAD,EAAA,UAAK,EAAU,CAAA,GACd,CAAC,KAAU,KAAgB,gBAAA,EAAC,GAAD,CAAqB,CAAA,CAC5C;AAAA,IAGN,CAAA,GAAA,KAAY,gBAAA,EAAC,GAAD,EAAqB,UAAA,EAAW,CAAA,CACxC;AAAA;AAEX"}
+{"version":3,"file":"Header.es.js","names":[],"sources":["../../../src/insights-v2/components/Header.tsx"],"sourcesContent":["import Stack from '@mui/material/Stack'\n\nimport { H3 } from '@mxenabled/mxui'\n\nimport SubHeader from './SubHeader'\nimport InsightOptionsMenu from './InsightOptionsMenu'\nimport { useBeatActions } from '../beatActions'\nimport type { Subtitle } from '../../core'\n\ninterface HeaderProps {\n  isMini: boolean\n  subtitle?: Subtitle\n  title: string\n}\n\nconst Header = ({ isMini, subtitle, title }: HeaderProps) => {\n  // The overflow menu appears only when the host wired a menu handler and this\n  // isn't the compact/mini layout. Handlers are delivered via context.\n  const { onMenuAction } = useBeatActions()\n\n  return (\n    <Stack sx={{ gap: 4, pb: 12, pl: 16, pr: 16, pt: 16 }}>\n      <Stack\n        sx={{ alignItems: 'flex-start', flexDirection: 'row', justifyContent: 'space-between' }}\n      >\n        <H3 truncate={true}>{title}</H3>\n        {!isMini && onMenuAction && <InsightOptionsMenu />}\n      </Stack>\n\n      {/* Sub Header */}\n      {subtitle && <SubHeader subtitle={subtitle} />}\n    </Stack>\n  )\n}\n\nexport default Header\n"],"mappings":";;;;;;AAeA,IAAM,IAAA,CAAU,EAAE,QAAA,GAAQ,UAAA,GAAU,OAAA,EAAA,MAAyB;AAG3D,QAAM,EAAE,cAAA,EAAA,IAAiB,EAAe;AAExC,SACE,gBAAA,EAAC,GAAD;AAAA,IAAO,IAAI;AAAA,MAAE,KAAK;AAAA,MAAG,IAAI;AAAA,MAAI,IAAI;AAAA,MAAI,IAAI;AAAA,MAAI,IAAI;AAAA,IAAG;AAAA,IAApD,UAAA,CACE,gBAAA,EAAC,GAAD;AAAA,MACE,IAAI;AAAA,QAAE,YAAY;AAAA,QAAc,eAAe;AAAA,QAAO,gBAAgB;AAAA,MAAgB;AAAA,MADxF,UAAA,CAGE,gBAAA,EAAC,GAAD;AAAA,QAAI,UAAU;AAAA,QAAO,UAAA;AAAA,MAAU,CAAA,GAC9B,CAAC,KAAU,KAAgB,gBAAA,EAAC,GAAD,CAAqB,CAAA,CAC5C;AAAA,IAGN,CAAA,GAAA,KAAY,gBAAA,EAAC,GAAD,EAAqB,UAAA,EAAW,CAAA,CACxC;AAAA;AAEX"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mx-cartographer/experiences",
-  "version": "9.7.96",
+  "version": "9.7.98",
   "description": "Library containing experience widgets",
   "author": "MX",
   "license": "MIT",