@mx-cartographer/experiences 9.6.10 → 9.6.12

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 type { InsightsPayload } from '../../../../core'\nimport { formatCurrency } from '../../../../core/utils/NumberFormatting'\nimport { DepositLogo } from '../../../components/ComponentBlocks/DepositLogo'\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 { useContainerDimensions } from '../../../hooks/useContainerDimensions'\n\nimport { resolveVariantConfig } from '../../resolveVariantConfig'\n\nimport { HeaderComponent } from './HeaderComponent'\nimport { IconComponent } from './IconComponent'\nimport { getLayoutConfig } from './layout'\n\n/** Default generic-tile icon per deposit variant, used when no merchant/institution logo. */\nconst depositIcons: Record<string, string> = {\n  deposit_received: 'payments',\n  status_on_track: 'monetization_on',\n}\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 {\n    variant,\n    amount,\n    sub_text,\n    header_text,\n    institution_guid,\n    institution_name,\n    icon_name,\n    label,\n    merchant_guid,\n    merchant_name,\n    category_guid,\n  } = instance_slot\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 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          <DepositLogo\n            categoryGuid={category_guid}\n            iconName={depositIcons[variant as keyof typeof depositIcons] ?? 'payments'}\n            institutionGuid={institution_guid}\n            institutionName={institution_name}\n            merchantGuid={merchant_guid}\n            merchantName={merchant_name}\n          />\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    const secondaryText =\n      layoutConfig.secondarySource === 'merchant' ? (merchant_name ?? institution_name) : label\n    const secondary = secondaryText ? (\n      <Text color={layoutConfig.secondaryColor} variant={layoutConfig.secondaryVariant}>\n        {secondaryText}\n      </Text>\n    ) : null\n    const amountText = (\n      <Text bold={true} color=\"success.dark\" variant={layoutConfig.amountVariant}>\n        {`${layoutConfig.amountPrefix ?? ''}${formatCurrency(amount, '0,0.00')}`}\n      </Text>\n    )\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            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        p: 16,\n        ...layoutConfig,\n      }}\n    >\n      {header_text && <HeaderComponent headerText={header_text} />}\n      <Stack\n        sx={{\n          alignItems: 'center',\n          bgcolor: 'background.paper',\n          borderRadius: '8px',\n          ...(header_text && {\n            borderTopLeftRadius: '0',\n            borderTopRightRadius: '0',\n          }),\n          gap: 16,\n          p: 16,\n          width: '100%',\n          ...((institution_guid || icon_name) && {\n            flexDirection: 'row',\n          }),\n        }}\n      >\n        <IconComponent slot={instance_slot} variant={variant} />\n\n        <Stack>\n          <Text variant=\"h1\">{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            <Text variant=\"body2\">{sub_text}</Text>\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 { DepositLogo } from '../../../components/ComponentBlocks/DepositLogo'\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 { useContainerDimensions } from '../../../hooks/useContainerDimensions'\n\nimport { resolveVariantConfig } from '../../resolveVariantConfig'\n\nimport { HeaderComponent } from './HeaderComponent'\nimport { IconComponent } from './IconComponent'\nimport { getLayoutConfig } from './layout'\n\n/** Default generic-tile icon per deposit variant, used when no merchant/institution logo. */\nconst depositIcons: Record<string, string> = {\n  deposit_received: 'payments',\n  status_on_track: 'monetization_on',\n}\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 {\n    variant,\n    header_text,\n    institution_guid,\n    institution_name,\n    icon_name,\n    label,\n    merchant_guid,\n    merchant_name,\n    category_guid,\n  } = instance_slot\n  // V2 variants fill `instance_slot.data` (ditto's account_block slots); the rest still send the\n  // flat legacy fields, so each value falls back to its flat field.\n  const { data } = instance_slot\n  const amount = slot<number>(data, 'amount') ?? instance_slot.amount\n  const sub_text = slot<string>(data, 'sub_text') ?? instance_slot.sub_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 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          <DepositLogo\n            categoryGuid={category_guid}\n            iconName={depositIcons[variant as keyof typeof depositIcons] ?? 'payments'}\n            institutionGuid={institution_guid}\n            institutionName={institution_name}\n            merchantGuid={merchant_guid}\n            merchantName={merchant_name}\n          />\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    const secondaryText =\n      layoutConfig.secondarySource === 'merchant' ? (merchant_name ?? institution_name) : label\n    const secondary = secondaryText ? (\n      <Text color={layoutConfig.secondaryColor} variant={layoutConfig.secondaryVariant}>\n        {secondaryText}\n      </Text>\n    ) : null\n    const amountText = (\n      <Text bold={true} color=\"success.dark\" variant={layoutConfig.amountVariant}>\n        {`${layoutConfig.amountPrefix ?? ''}${formatCurrency(amount, '0,0.00')}`}\n      </Text>\n    )\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            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        p: 16,\n        ...layoutConfig,\n      }}\n    >\n      {header_text && <HeaderComponent headerText={header_text} />}\n      <Stack\n        sx={{\n          alignItems: 'center',\n          bgcolor: 'background.paper',\n          borderRadius: '8px',\n          ...(header_text && {\n            borderTopLeftRadius: '0',\n            borderTopRightRadius: '0',\n          }),\n          gap: 16,\n          p: 16,\n          width: '100%',\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=\"h1\">{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 && <Text variant=\"body2\">{sub_text}</Text>}\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/IconComponent.d.ts

@@ -1,7 +1,9 @@
-import { InstanceSlot } from '../../../../core';
+import { InstanceSlot, LogoRef } from '../../../../core';
 interface IconComponentProps {
     slot: InstanceSlot;
     variant?: string | null;
+    /** V2: the slot's logo object (`instance_slot.data.logo`), badged with the layout's `badge`. */
+    logo?: LogoRef;
 }
-export declare const IconComponent: ({ slot, variant }: IconComponentProps) => import("react/jsx-runtime").JSX.Element | null;
+export declare const IconComponent: ({ slot, variant, logo }: IconComponentProps) => import("react/jsx-runtime").JSX.Element | null;
 export {};

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

@@ -1,31 +1,62 @@
-import c from "../../../../common/components/IconBacking.es.js";
+import l from "../../../../common/components/IconBacking.es.js";
+import a from "../../../components/LogoFromGuid.es.js";
 import { resolveVariantConfig as m } from "../../resolveVariantConfig.es.js";
-import { getLayoutConfig as s } from "./layout.es.js";
-import { InstitutionLogo as u } from "@mxenabled/mxui";
-import { Icon as t } from "@mxenabled/mx-icons";
-import { jsx as r, jsxs as a } from "react/jsx-runtime";
-import { useTheme as d } from "@mui/material/styles";
-import { Stack as e } from "@mui/material";
-var C = ({ slot: o, variant: n }) => {
-  const l = d(), i = m(s(l), n, "default", "AccountBlock");
-  return o.institution_guid ? /* @__PURE__ */ a(e, {
+import { getLayoutConfig as u } from "./layout.es.js";
+import { InstitutionLogo as g } from "@mxenabled/mxui";
+import { Icon as e } from "@mxenabled/mx-icons";
+import { jsx as o, jsxs as s } from "react/jsx-runtime";
+import { useTheme as f } from "@mui/material/styles";
+import { Stack as t } from "@mui/material";
+var k = ({ slot: i, variant: c, logo: n }) => {
+  const d = f(), r = m(u(d), c, "default", "AccountBlock");
+  return /^INS-[A-Za-z0-9-]+$/.test(n?.guid ?? "") ? /* @__PURE__ */ s(t, {
     sx: {
       alignItems: "center",
       flexDirection: "row",
       position: "relative"
     },
-    children: [/* @__PURE__ */ r(u, {
-      alt: `${o.institution_name}`,
-      institutionGuid: `${o.institution_guid}`,
+    children: [/* @__PURE__ */ o(a, {
+      logo: n,
       size: 48
-    }), /* @__PURE__ */ r(c, {
+    }), r.badge && /* @__PURE__ */ o(l, {
       size: 20,
       sx: {
         position: "absolute",
         right: -8,
         top: -8
       },
-      children: /* @__PURE__ */ r(t, {
+      children: /* @__PURE__ */ o(e, {
+        "aria-hidden": !0,
+        color: "error",
+        "data-testid": "account-block-error-badge",
+        fill: !0,
+        name: r.badge,
+        size: 20,
+        sx: {
+          gridColumn: 1,
+          gridRow: 1,
+          zIndex: 2
+        }
+      })
+    })]
+  }) : i.institution_guid ? /* @__PURE__ */ s(t, {
+    sx: {
+      alignItems: "center",
+      flexDirection: "row",
+      position: "relative"
+    },
+    children: [/* @__PURE__ */ o(g, {
+      alt: `${i.institution_name}`,
+      institutionGuid: `${i.institution_guid}`,
+      size: 48
+    }), /* @__PURE__ */ o(l, {
+      size: 20,
+      sx: {
+        position: "absolute",
+        right: -8,
+        top: -8
+      },
+      children: /* @__PURE__ */ o(e, {
         color: "error",
         fill: !0,
         name: "error",
@@ -37,29 +68,29 @@ var C = ({ slot: o, variant: n }) => {
         }
       })
     })]
-  }) : o.icon_name ? /* @__PURE__ */ r(e, {
+  }) : i.icon_name ? /* @__PURE__ */ o(t, {
     sx: {
       alignItems: "center",
-      bgcolor: i.logo_bGcolor,
+      bgcolor: r.logo_bGcolor,
       borderRadius: "6px",
       height: 48,
       justifyContent: "center",
       width: 48,
-      ...i.logo_border_color && {
-        borderColor: i.logo_border_color,
+      ...r.logo_border_color && {
+        borderColor: r.logo_border_color,
         borderStyle: "solid",
         borderWidth: 1.5
       }
     },
-    children: /* @__PURE__ */ r(t, {
-      name: o.icon_name,
+    children: /* @__PURE__ */ o(e, {
+      name: i.icon_name,
       size: 24,
-      sx: { color: i.logo_color }
+      sx: { color: r.logo_color }
     })
   }) : null;
 };
 export {
-  C as IconComponent
+  k as IconComponent
 };
 
 //# sourceMappingURL=IconComponent.es.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"IconComponent.es.js","names":[],"sources":["../../../../../src/insights-v2/blocks/ComponentBlocks/AccountBlock/IconComponent.tsx"],"sourcesContent":["import { Stack } from '@mui/material'\nimport { Icon } from '@mxenabled/mx-icons'\nimport { InstitutionLogo } from '@mxenabled/mxui'\nimport { IconBacking } from '../../../../common'\nimport { resolveVariantConfig } from '../../resolveVariantConfig'\nimport { getLayoutConfig } from './layout'\nimport { useTheme } from '@mui/material/styles'\nimport type { InstanceSlot } from '../../../../core'\n\ninterface IconComponentProps {\n  slot: InstanceSlot\n  variant?: string | null\n}\n\nexport const IconComponent = ({ slot, variant }: IconComponentProps) => {\n  const theme = useTheme()\n  const layoutConfig = resolveVariantConfig(\n    getLayoutConfig(theme),\n    variant,\n    'default',\n    'AccountBlock',\n  )\n\n  if (slot.institution_guid) {\n    return (\n      <Stack sx={{ alignItems: 'center', flexDirection: 'row', position: 'relative' }}>\n        <InstitutionLogo\n          alt={`${slot.institution_name}`}\n          institutionGuid={`${slot.institution_guid}`}\n          size={48}\n        />\n        <IconBacking size={20} sx={{ position: 'absolute', right: -8, top: -8 }}>\n          <Icon\n            color=\"error\"\n            fill={true}\n            name=\"error\"\n            size={20}\n            sx={{ gridColumn: 1, gridRow: 1, zIndex: 2 }}\n          />\n        </IconBacking>\n      </Stack>\n    )\n  }\n\n  if (slot.icon_name) {\n    return (\n      <Stack\n        sx={{\n          alignItems: 'center',\n          bgcolor: layoutConfig.logo_bGcolor,\n          borderRadius: '6px',\n          height: 48,\n          justifyContent: 'center',\n          width: 48,\n          ...(layoutConfig.logo_border_color && {\n            borderColor: layoutConfig.logo_border_color,\n            borderStyle: 'solid',\n            borderWidth: 1.5,\n          }),\n        }}\n      >\n        <Icon\n          name={slot.icon_name}\n          size={24}\n          sx={{\n            color: layoutConfig.logo_color,\n          }}\n        />\n      </Stack>\n    )\n  }\n\n  return null\n}\n"],"mappings":";;;;;;;;AAcA,IAAa,IAAA,CAAiB,EAAE,MAAA,GAAM,SAAA,EAAA,MAAkC;AACtE,QAAM,IAAQ,EAAS,GACjB,IAAe,EACnB,EAAgB,CAAK,GACrB,GACA,WACA,cACF;AAEA,SAAI,EAAK,mBAEL,gBAAA,EAAC,GAAD;AAAA,IAAO,IAAI;AAAA,MAAE,YAAY;AAAA,MAAU,eAAe;AAAA,MAAO,UAAU;AAAA,IAAW;AAAA,IAA9E,UAAA,CACE,gBAAA,EAAC,GAAD;AAAA,MACE,KAAK,GAAG,EAAK,gBAAA;AAAA,MACb,iBAAiB,GAAG,EAAK,gBAAA;AAAA,MACzB,MAAM;AAAA,IACP,CAAA,GACD,gBAAA,EAAC,GAAD;AAAA,MAAa,MAAM;AAAA,MAAI,IAAI;AAAA,QAAE,UAAU;AAAA,QAAY,OAAO;AAAA,QAAI,KAAK;AAAA,MAAG;AAAA,MACpE,UAAA,gBAAA,EAAC,GAAD;AAAA,QACE,OAAM;AAAA,QACN,MAAM;AAAA,QACN,MAAK;AAAA,QACL,MAAM;AAAA,QACN,IAAI;AAAA,UAAE,YAAY;AAAA,UAAG,SAAS;AAAA,UAAG,QAAQ;AAAA,QAAE;AAAA,MAC5C,CAAA;AAAA,IACU,CAAA,CACR;AAAA,OAIP,EAAK,YAEL,gBAAA,EAAC,GAAD;AAAA,IACE,IAAI;AAAA,MACF,YAAY;AAAA,MACZ,SAAS,EAAa;AAAA,MACtB,cAAc;AAAA,MACd,QAAQ;AAAA,MACR,gBAAgB;AAAA,MAChB,OAAO;AAAA,MACP,GAAI,EAAa,qBAAqB;AAAA,QACpC,aAAa,EAAa;AAAA,QAC1B,aAAa;AAAA,QACb,aAAa;AAAA,MACf;AAAA,IACF;AAAA,IAEA,UAAA,gBAAA,EAAC,GAAD;AAAA,MACE,MAAM,EAAK;AAAA,MACX,MAAM;AAAA,MACN,IAAI,EACF,OAAO,EAAa,WACtB;AAAA,IACD,CAAA;AAAA,EACI,CAAA,IAIJ;AACT"}
+{"version":3,"file":"IconComponent.es.js","names":[],"sources":["../../../../../src/insights-v2/blocks/ComponentBlocks/AccountBlock/IconComponent.tsx"],"sourcesContent":["import { Stack } from '@mui/material'\nimport { Icon } from '@mxenabled/mx-icons'\nimport { InstitutionLogo } from '@mxenabled/mxui'\nimport { IconBacking } from '../../../../common'\nimport { resolveVariantConfig } from '../../resolveVariantConfig'\nimport { getLayoutConfig } from './layout'\nimport { useTheme } from '@mui/material/styles'\nimport type { InstanceSlot, LogoRef } from '../../../../core'\nimport LogoFromGuid from '../../../components/LogoFromGuid'\n\ninterface IconComponentProps {\n  slot: InstanceSlot\n  variant?: string | null\n  /** V2: the slot's logo object (`instance_slot.data.logo`), badged with the layout's `badge`. */\n  logo?: LogoRef\n}\n\nexport const IconComponent = ({ slot, variant, logo }: IconComponentProps) => {\n  const theme = useTheme()\n  const layoutConfig = resolveVariantConfig(\n    getLayoutConfig(theme),\n    variant,\n    'default',\n    'AccountBlock',\n  )\n\n  // V2 slot logo: an institution guid only; anything else falls through to the legacy fields.\n  if (/^INS-[A-Za-z0-9-]+$/.test(logo?.guid ?? '')) {\n    return (\n      <Stack sx={{ alignItems: 'center', flexDirection: 'row', position: 'relative' }}>\n        <LogoFromGuid logo={logo} size={48} />\n        {layoutConfig.badge && (\n          <IconBacking size={20} sx={{ position: 'absolute', right: -8, top: -8 }}>\n            <Icon\n              aria-hidden={true}\n              color=\"error\"\n              data-testid=\"account-block-error-badge\"\n              fill={true}\n              name={layoutConfig.badge}\n              size={20}\n              sx={{ gridColumn: 1, gridRow: 1, zIndex: 2 }}\n            />\n          </IconBacking>\n        )}\n      </Stack>\n    )\n  }\n\n  if (slot.institution_guid) {\n    return (\n      <Stack sx={{ alignItems: 'center', flexDirection: 'row', position: 'relative' }}>\n        <InstitutionLogo\n          alt={`${slot.institution_name}`}\n          institutionGuid={`${slot.institution_guid}`}\n          size={48}\n        />\n        <IconBacking size={20} sx={{ position: 'absolute', right: -8, top: -8 }}>\n          <Icon\n            color=\"error\"\n            fill={true}\n            name=\"error\"\n            size={20}\n            sx={{ gridColumn: 1, gridRow: 1, zIndex: 2 }}\n          />\n        </IconBacking>\n      </Stack>\n    )\n  }\n\n  if (slot.icon_name) {\n    return (\n      <Stack\n        sx={{\n          alignItems: 'center',\n          bgcolor: layoutConfig.logo_bGcolor,\n          borderRadius: '6px',\n          height: 48,\n          justifyContent: 'center',\n          width: 48,\n          ...(layoutConfig.logo_border_color && {\n            borderColor: layoutConfig.logo_border_color,\n            borderStyle: 'solid',\n            borderWidth: 1.5,\n          }),\n        }}\n      >\n        <Icon\n          name={slot.icon_name}\n          size={24}\n          sx={{\n            color: layoutConfig.logo_color,\n          }}\n        />\n      </Stack>\n    )\n  }\n\n  return null\n}\n"],"mappings":";;;;;;;;;AAiBA,IAAa,IAAA,CAAiB,EAAE,MAAA,GAAM,SAAA,GAAS,MAAA,EAAA,MAA+B;AAC5E,QAAM,IAAQ,EAAS,GACjB,IAAe,EACnB,EAAgB,CAAK,GACrB,GACA,WACA,cACF;AAGA,SAAI,sBAAsB,KAAK,GAAM,QAAQ,EAAE,IAE3C,gBAAA,EAAC,GAAD;AAAA,IAAO,IAAI;AAAA,MAAE,YAAY;AAAA,MAAU,eAAe;AAAA,MAAO,UAAU;AAAA,IAAW;AAAA,IAA9E,UAAA,CACE,gBAAA,EAAC,GAAD;AAAA,MAAoB,MAAA;AAAA,MAAM,MAAM;AAAA,IAAK,CAAA,GACpC,EAAa,SACZ,gBAAA,EAAC,GAAD;AAAA,MAAa,MAAM;AAAA,MAAI,IAAI;AAAA,QAAE,UAAU;AAAA,QAAY,OAAO;AAAA,QAAI,KAAK;AAAA,MAAG;AAAA,MACpE,UAAA,gBAAA,EAAC,GAAD;AAAA,QACE,eAAa;AAAA,QACb,OAAM;AAAA,QACN,eAAY;AAAA,QACZ,MAAM;AAAA,QACN,MAAM,EAAa;AAAA,QACnB,MAAM;AAAA,QACN,IAAI;AAAA,UAAE,YAAY;AAAA,UAAG,SAAS;AAAA,UAAG,QAAQ;AAAA,QAAE;AAAA,MAC5C,CAAA;AAAA,IACU,CAAA,CAEV;AAAA,OAIP,EAAK,mBAEL,gBAAA,EAAC,GAAD;AAAA,IAAO,IAAI;AAAA,MAAE,YAAY;AAAA,MAAU,eAAe;AAAA,MAAO,UAAU;AAAA,IAAW;AAAA,IAA9E,UAAA,CACE,gBAAA,EAAC,GAAD;AAAA,MACE,KAAK,GAAG,EAAK,gBAAA;AAAA,MACb,iBAAiB,GAAG,EAAK,gBAAA;AAAA,MACzB,MAAM;AAAA,IACP,CAAA,GACD,gBAAA,EAAC,GAAD;AAAA,MAAa,MAAM;AAAA,MAAI,IAAI;AAAA,QAAE,UAAU;AAAA,QAAY,OAAO;AAAA,QAAI,KAAK;AAAA,MAAG;AAAA,MACpE,UAAA,gBAAA,EAAC,GAAD;AAAA,QACE,OAAM;AAAA,QACN,MAAM;AAAA,QACN,MAAK;AAAA,QACL,MAAM;AAAA,QACN,IAAI;AAAA,UAAE,YAAY;AAAA,UAAG,SAAS;AAAA,UAAG,QAAQ;AAAA,QAAE;AAAA,MAC5C,CAAA;AAAA,IACU,CAAA,CACR;AAAA,OAIP,EAAK,YAEL,gBAAA,EAAC,GAAD;AAAA,IACE,IAAI;AAAA,MACF,YAAY;AAAA,MACZ,SAAS,EAAa;AAAA,MACtB,cAAc;AAAA,MACd,QAAQ;AAAA,MACR,gBAAgB;AAAA,MAChB,OAAO;AAAA,MACP,GAAI,EAAa,qBAAqB;AAAA,QACpC,aAAa,EAAa;AAAA,QAC1B,aAAa;AAAA,QACb,aAAa;AAAA,MACf;AAAA,IACF;AAAA,IAEA,UAAA,gBAAA,EAAC,GAAD;AAAA,MACE,MAAM,EAAK;AAAA,MACX,MAAM;AAAA,MACN,IAAI,EACF,OAAO,EAAa,WACtB;AAAA,IACD,CAAA;AAAA,EACI,CAAA,IAIJ;AACT"}

package/dist/insights-v2/blocks/ComponentBlocks/AccountBlock/layout.d.ts

@@ -6,6 +6,8 @@ export interface BlockLayoutConfig {
     logo_border_color?: string;
     /** mx-icons glyph shown before `sub_text` (e.g. a warning icon on overdraft_warning). */
     sub_logo?: string;
+    /** mx-icons glyph badged on the logo's corner (e.g. `error` on Low Account Balance's V2 tile). */
+    badge?: string;
     /** When true, AccountBlock renders the confetti-backed celebration card using the fields below. */
     isConfetti?: boolean;
     /** Gradient wash layered over `background.paper` for the confetti card. */

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

@@ -1,11 +1,15 @@
-import { CELEBRATION_GRADIENT as o, WARM_LIME_ACCENT_GRADIENT as a } from "../../../components/celebrationGradients.es.js";
-import { alpha as e } from "@mui/material/styles";
-var i = (r) => ({
+import { CELEBRATION_GRADIENT as a, WARM_LIME_ACCENT_GRADIENT as o } from "../../../components/celebrationGradients.es.js";
+import { alpha as t } from "@mui/material/styles";
+var e = { background: "linear-gradient(256.82deg, rgba(255, 47, 40, 0.2) 1.86%, rgba(255, 0, 72, 0.2) 101.54%)" }, g = (r) => ({
   overdraft_warning: {
     background: r.palette.warning.light,
     sub_logo: "error"
   },
-  low_balance_alert: { background: "linear-gradient(256.82deg, rgba(255, 47, 40, 0.2) 1.86%, rgba(255, 0, 72, 0.2) 101.54%)" },
+  low_balance_alert: e,
+  low_balance: {
+    ...e,
+    badge: "error"
+  },
   status_off_track: {
     logo_color: "background.paper",
     logo_bGcolor: "error.main",
@@ -13,13 +17,13 @@ var i = (r) => ({
   },
   interest_charges_summary: {
     logo_color: "text.primary",
-    logo_bGcolor: e(r.palette.categories?.feesCharges || "", 0.25),
+    logo_bGcolor: t(r.palette.categories?.feesCharges || "", 0.25),
     logo_border_color: "categories.feesCharges",
     background: "linear-gradient(256.82deg, rgba(227, 39, 39, 0.2) 1.86%, rgba(255, 123, 0, 0.2) 101.54%)"
   },
   deposit_received: {
     isConfetti: !0,
-    gradient: a,
+    gradient: o,
     graphic: "logo",
     amountVariant: "h3",
     amountPrefix: "+",
@@ -35,7 +39,7 @@ var i = (r) => ({
   },
   status_on_track: {
     isConfetti: !0,
-    gradient: a,
+    gradient: o,
     graphic: "logo",
     amountVariant: "h2",
     rowSx: {
@@ -49,7 +53,7 @@ var i = (r) => ({
   },
   payoff_celebration: {
     isConfetti: !0,
-    gradient: o,
+    gradient: a,
     graphic: "paidOffCard",
     amountVariant: "h2",
     rowSx: {
@@ -64,7 +68,7 @@ var i = (r) => ({
   },
   savings_deposit: {
     isConfetti: !0,
-    gradient: o,
+    gradient: a,
     graphic: "savings",
     amountVariant: "h2",
     rowSx: {
@@ -79,7 +83,7 @@ var i = (r) => ({
   default: {}
 });
 export {
-  i as getLayoutConfig
+  g as getLayoutConfig
 };
 
 //# sourceMappingURL=layout.es.js.map

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  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  /** mx-icons glyph shown before `sub_text` (e.g. a warning icon on overdraft_warning). */\n  sub_logo?: 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  /** 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\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: {\n      background:\n        'linear-gradient(256.82deg, rgba(255, 47, 40, 0.2) 1.86%, rgba(255, 0, 72, 0.2) 101.54%)',\n    },\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      background:\n        'linear-gradient(256.82deg, rgba(255, 47, 40, 0.2) 1.86%, rgba(255, 0, 72, 0.2) 101.54%)',\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      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":";;AAsCA,IAAa,IAAA,CAAmB,OACvB;AAAA,EACL,mBAAmB;AAAA,IACjB,YAAY,EAAM,QAAQ,QAAQ;AAAA,IAClC,UAAU;AAAA,EACZ;AAAA,EACA,mBAAmB,EACjB,YACE,0FACJ;AAAA,EAGA,kBAAkB;AAAA,IAChB,YAAY;AAAA,IACZ,cAAc;AAAA,IACd,YACE;AAAA,EACJ;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,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  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  /** 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  /** 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// 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:\n    'linear-gradient(256.82deg, rgba(255, 47, 40, 0.2) 1.86%, rgba(255, 0, 72, 0.2) 101.54%)',\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      background:\n        'linear-gradient(256.82deg, rgba(255, 47, 40, 0.2) 1.86%, rgba(255, 0, 72, 0.2) 101.54%)',\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      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":";;AA0CA,IAAM,IAAsC,EAC1C,YACE,0FACJ,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,IACd,YACE;AAAA,EACJ;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,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

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