@mx-cartographer/experiences 9.4.7 → 9.4.8

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

@@ -2,17 +2,17 @@ import { useInsightsV2Store as u } from "../../common/context/hooks.es.js";
 import { blocks as g } from "../mappings/blocks.es.js";
 import y from "./Footer.es.js";
 import _ from "./Header.es.js";
-import { ActionBlockLayer as x } from "../blocks/ComponentBlocks/ActionBlock/ActionBlockLayer.es.js";
-import n from "@mui/material/Stack";
-import e from "@mui/material/Button";
-import { ChevronRight as k } from "@mxenabled/mx-icons";
+import { ActionBlockLayer as k } from "../actionBlocks/ActionBlockLayer.es.js";
+import l from "@mui/material/Stack";
+import c from "@mui/material/Button";
+import { ChevronRight as x } from "@mxenabled/mx-icons";
 import { jsx as r, jsxs as i } from "react/jsx-runtime";
 import C from "@mui/material/Card";
 var A = ({ beat: o }) => {
-  const { openCtaDrawer: l } = u(), t = o.insights_payload;
+  const { openCtaDrawer: s } = u(), t = o.insights_payload;
   if (!t) return null;
-  const { instance_slot: p, primary_cta: c, secondary_cta: s, subtitle: m, widget_type: h } = t, { block: f } = p, a = g[f], d = h === "mini";
-  return /* @__PURE__ */ i(n, {
+  const { instance_slot: p, primary_cta: n, secondary_cta: e, subtitle: m, widget_type: h } = t, { block: f } = p, a = g[f], d = h === "mini";
+  return /* @__PURE__ */ i(l, {
     sx: { mb: 16 },
     children: [
       /* @__PURE__ */ i(C, { children: [
@@ -25,7 +25,7 @@ var A = ({ beat: o }) => {
           beatGuid: o.guid,
           payload: t
         }),
-        /* @__PURE__ */ i(n, {
+        /* @__PURE__ */ i(l, {
           sx: {
             gap: 6,
             pb: 16,
@@ -36,8 +36,8 @@ var A = ({ beat: o }) => {
           children: [/* @__PURE__ */ r("div", {
             dangerouslySetInnerHTML: { __html: o.html_description },
             style: { paddingLeft: 4 }
-          }), o?.in_description_cta && /* @__PURE__ */ r(e, {
-            endIcon: /* @__PURE__ */ r(k, {}),
+          }), o?.in_description_cta && /* @__PURE__ */ r(c, {
+            endIcon: /* @__PURE__ */ r(x, {}),
             onClick: () => {
             },
             sx: {
@@ -48,24 +48,24 @@ var A = ({ beat: o }) => {
             children: o.in_description_cta
           })]
         }),
-        !d && c?.label && /* @__PURE__ */ i(n, {
+        !d && n?.label && /* @__PURE__ */ i(l, {
           sx: {
             gap: 8,
             pb: 16,
             px: 16
           },
-          children: [/* @__PURE__ */ r(e, {
-            onClick: () => l(o.guid, "primaryCta"),
+          children: [/* @__PURE__ */ r(c, {
+            onClick: () => n.block && s(o.guid, "primaryCta"),
             variant: "outlined",
-            children: c.label
-          }), s?.label && /* @__PURE__ */ r(e, {
+            children: n.label
+          }), e?.label && /* @__PURE__ */ r(c, {
             color: "secondary",
-            onClick: () => l(o.guid, "secondaryCta"),
-            children: s.label
+            onClick: () => e.block && s(o.guid, "secondaryCta"),
+            children: e.label
           })]
         })
       ] }),
-      /* @__PURE__ */ r(x, { beat: o }),
+      /* @__PURE__ */ r(k, { beat: o }),
       t.footer && /* @__PURE__ */ r(y, { footer: t.footer })
     ]
   });

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 Button from '@mui/material/Button'\nimport Card from '@mui/material/Card'\nimport Stack from '@mui/material/Stack'\n\nimport { ChevronRight } from '@mxenabled/mx-icons'\n\nimport { blocks } from '../mappings/blocks'\n\nimport Footer from './Footer'\nimport Header from './Header'\nimport { useInsightsV2Store } from '../../common'\nimport type { Beat } from '../../core'\nimport { ActionBlockLayer } from '../blocks/ComponentBlocks/ActionBlock/ActionBlockLayer'\n\ninterface BaseLayoutProps {\n  beat: Beat\n}\n\nconst BaseLayout = ({ beat }: BaseLayoutProps) => {\n  const { openCtaDrawer } = useInsightsV2Store()\n\n  const insights_payload = beat.insights_payload\n\n  if (!insights_payload) {\n    return null\n  }\n\n  const { instance_slot, primary_cta, secondary_cta, subtitle, widget_type } = insights_payload\n  const { block } = instance_slot\n\n  const Block = blocks[block as keyof typeof blocks]\n\n  const isMini = widget_type === 'mini'\n\n  return (\n    <Stack sx={{ mb: 16 }}>\n      <Card>\n        {/* Header */}\n        <Header isMini={isMini} subtitle={subtitle} title={beat.title} />\n\n        {/* Instance Slot */}\n        {Block && <Block beatGuid={beat.guid} payload={insights_payload} />}\n\n        {/* Body */}\n        <Stack sx={{ gap: 6, pb: 16, pl: 12, pr: 16, pt: 12 }}>\n          <div\n            dangerouslySetInnerHTML={{\n              __html: beat.html_description as string,\n            }}\n            style={{ paddingLeft: 4 }}\n          />\n          {beat?.in_description_cta && (\n            <Button\n              endIcon={<ChevronRight />}\n              onClick={() => {}}\n              sx={{ height: 24, p: 4, width: 'max-content' }}\n            >\n              {beat.in_description_cta}\n            </Button>\n          )}\n        </Stack>\n\n        {/* CTA */}\n        {!isMini && primary_cta?.label && (\n          <Stack sx={{ gap: 8, pb: 16, px: 16 }}>\n            <Button onClick={() => openCtaDrawer(beat.guid, 'primaryCta')} variant=\"outlined\">\n              {primary_cta.label}\n            </Button>\n            {secondary_cta?.label && (\n              <Button color=\"secondary\" onClick={() => openCtaDrawer(beat.guid, 'secondaryCta')}>\n                {secondary_cta.label}\n              </Button>\n            )}\n          </Stack>\n        )}\n      </Card>\n\n      {/* Always mounted: the drawer's slide in/out animation only plays when\n          MUI sees isOpen CHANGE on a mounted Drawer — conditionally mounting\n          it here made it snap open and vanish on close. */}\n      <ActionBlockLayer beat={beat} />\n\n      {/* Footer */}\n      {insights_payload.footer && <Footer footer={insights_payload.footer} />}\n    </Stack>\n  )\n}\n\nexport default BaseLayout\n"],"mappings":";;;;;;;;;;AAkBA,IAAM,IAAA,CAAc,EAAE,MAAA,EAAA,MAA4B;AAChD,QAAM,EAAE,eAAA,EAAA,IAAkB,EAAmB,GAEvC,IAAmB,EAAK;AAE9B,MAAI,CAAC,EACH,QAAO;AAGT,QAAM,EAAE,eAAA,GAAe,aAAA,GAAa,eAAA,GAAe,UAAA,GAAU,aAAA,EAAA,IAAgB,GACvE,EAAE,OAAA,EAAA,IAAU,GAEZ,IAAQ,EAAO,CAAA,GAEf,IAAS,MAAgB;AAE/B,SACE,gBAAA,EAAC,GAAD;AAAA,IAAO,IAAI,EAAE,IAAI,GAAG;AAAA,IAApB,UAAA;AAAA,MACE,gBAAA,EAAC,GAAD,EAAA,UAAA;AAAA,QAEE,gBAAA,EAAC,GAAD;AAAA,UAAgB,QAAA;AAAA,UAAkB,UAAA;AAAA,UAAU,OAAO,EAAK;AAAA,QAAQ,CAAA;AAAA,QAG/D,KAAS,gBAAA,EAAC,GAAD;AAAA,UAAO,UAAU,EAAK;AAAA,UAAM,SAAS;AAAA,QAAmB,CAAA;AAAA,QAGlE,gBAAA,EAAC,GAAD;AAAA,UAAO,IAAI;AAAA,YAAE,KAAK;AAAA,YAAG,IAAI;AAAA,YAAI,IAAI;AAAA,YAAI,IAAI;AAAA,YAAI,IAAI;AAAA,UAAG;AAAA,UAApD,UAAA,CACE,gBAAA,EAAC,OAAD;AAAA,YACE,yBAAyB,EACvB,QAAQ,EAAK,iBACf;AAAA,YACA,OAAO,EAAE,aAAa,EAAE;AAAA,UACzB,CAAA,GACA,GAAM,sBACL,gBAAA,EAAC,GAAD;AAAA,YACE,SAAS,gBAAA,EAAC,GAAD,CAAe,CAAA;AAAA,YACxB,SAAA,MAAe;AAAA,YAAC;AAAA,YAChB,IAAI;AAAA,cAAE,QAAQ;AAAA,cAAI,GAAG;AAAA,cAAG,OAAO;AAAA,YAAc;AAAA,YAE5C,UAAA,EAAK;AAAA,UACA,CAAA,CAEL;AAAA;QAGN,CAAC,KAAU,GAAa,SACvB,gBAAA,EAAC,GAAD;AAAA,UAAO,IAAI;AAAA,YAAE,KAAK;AAAA,YAAG,IAAI;AAAA,YAAI,IAAI;AAAA,UAAG;AAAA,UAApC,UAAA,CACE,gBAAA,EAAC,GAAD;AAAA,YAAQ,SAAA,MAAe,EAAc,EAAK,MAAM,YAAY;AAAA,YAAG,SAAQ;AAAA,YACpE,UAAA,EAAY;AAAA,UACP,CAAA,GACP,GAAe,SACd,gBAAA,EAAC,GAAD;AAAA,YAAQ,OAAM;AAAA,YAAY,SAAA,MAAe,EAAc,EAAK,MAAM,cAAc;AAAA,YAC7E,UAAA,EAAc;AAAA,UACT,CAAA,CAEL;AAAA;MAEL,EAAA,CAAA;AAAA,MAKN,gBAAA,EAAC,GAAD,EAAwB,MAAA,EAAO,CAAA;AAAA,MAG9B,EAAiB,UAAU,gBAAA,EAAC,GAAD,EAAQ,QAAQ,EAAiB,OAAS,CAAA;AAAA,IACjE;AAAA;AAEX"}
+{"version":3,"file":"BaseLayout.es.js","names":[],"sources":["../../../src/insights-v2/components/BaseLayout.tsx"],"sourcesContent":["import Button from '@mui/material/Button'\nimport Card from '@mui/material/Card'\nimport Stack from '@mui/material/Stack'\n\nimport { ChevronRight } from '@mxenabled/mx-icons'\n\nimport { blocks } from '../mappings/blocks'\n\nimport Footer from './Footer'\nimport Header from './Header'\nimport { useInsightsV2Store } from '../../common'\nimport type { Beat } from '../../core'\nimport { ActionBlockLayer } from '../actionBlocks/ActionBlockLayer'\n\ninterface BaseLayoutProps {\n  beat: Beat\n}\n\nconst BaseLayout = ({ beat }: BaseLayoutProps) => {\n  const { openCtaDrawer } = useInsightsV2Store()\n\n  const insights_payload = beat.insights_payload\n\n  if (!insights_payload) {\n    return null\n  }\n\n  const { instance_slot, primary_cta, secondary_cta, subtitle, widget_type } = insights_payload\n  const { block } = instance_slot\n\n  const Block = blocks[block as keyof typeof blocks]\n\n  const isMini = widget_type === 'mini'\n\n  return (\n    <Stack sx={{ mb: 16 }}>\n      <Card>\n        {/* Header */}\n        <Header isMini={isMini} subtitle={subtitle} title={beat.title} />\n\n        {/* Instance Slot */}\n        {Block && <Block beatGuid={beat.guid} payload={insights_payload} />}\n\n        {/* Body */}\n        <Stack sx={{ gap: 6, pb: 16, pl: 12, pr: 16, pt: 12 }}>\n          <div\n            dangerouslySetInnerHTML={{\n              __html: beat.html_description as string,\n            }}\n            style={{ paddingLeft: 4 }}\n          />\n          {beat?.in_description_cta && (\n            <Button\n              endIcon={<ChevronRight />}\n              onClick={() => {}}\n              sx={{ height: 24, p: 4, width: 'max-content' }}\n            >\n              {beat.in_description_cta}\n            </Button>\n          )}\n        </Stack>\n\n        {/* CTA. A CTA without a real `block` doesn't open a drawer (it may trigger\n            a postMessage etc.) — restrict the drawer to CTAs that carry a block. */}\n        {!isMini && primary_cta?.label && (\n          <Stack sx={{ gap: 8, pb: 16, px: 16 }}>\n            <Button\n              onClick={() => primary_cta.block && openCtaDrawer(beat.guid, 'primaryCta')}\n              variant=\"outlined\"\n            >\n              {primary_cta.label}\n            </Button>\n            {secondary_cta?.label && (\n              <Button\n                color=\"secondary\"\n                onClick={() => secondary_cta.block && openCtaDrawer(beat.guid, 'secondaryCta')}\n              >\n                {secondary_cta.label}\n              </Button>\n            )}\n          </Stack>\n        )}\n      </Card>\n\n      {/* Always mounted: the drawer's slide in/out animation only plays when\n          MUI sees isOpen CHANGE on a mounted Drawer — conditionally mounting\n          it here made it snap open and vanish on close. */}\n      <ActionBlockLayer beat={beat} />\n\n      {/* Footer */}\n      {insights_payload.footer && <Footer footer={insights_payload.footer} />}\n    </Stack>\n  )\n}\n\nexport default BaseLayout\n"],"mappings":";;;;;;;;;;AAkBA,IAAM,IAAA,CAAc,EAAE,MAAA,EAAA,MAA4B;AAChD,QAAM,EAAE,eAAA,EAAA,IAAkB,EAAmB,GAEvC,IAAmB,EAAK;AAE9B,MAAI,CAAC,EACH,QAAO;AAGT,QAAM,EAAE,eAAA,GAAe,aAAA,GAAa,eAAA,GAAe,UAAA,GAAU,aAAA,EAAA,IAAgB,GACvE,EAAE,OAAA,EAAA,IAAU,GAEZ,IAAQ,EAAO,CAAA,GAEf,IAAS,MAAgB;AAE/B,SACE,gBAAA,EAAC,GAAD;AAAA,IAAO,IAAI,EAAE,IAAI,GAAG;AAAA,IAApB,UAAA;AAAA,MACE,gBAAA,EAAC,GAAD,EAAA,UAAA;AAAA,QAEE,gBAAA,EAAC,GAAD;AAAA,UAAgB,QAAA;AAAA,UAAkB,UAAA;AAAA,UAAU,OAAO,EAAK;AAAA,QAAQ,CAAA;AAAA,QAG/D,KAAS,gBAAA,EAAC,GAAD;AAAA,UAAO,UAAU,EAAK;AAAA,UAAM,SAAS;AAAA,QAAmB,CAAA;AAAA,QAGlE,gBAAA,EAAC,GAAD;AAAA,UAAO,IAAI;AAAA,YAAE,KAAK;AAAA,YAAG,IAAI;AAAA,YAAI,IAAI;AAAA,YAAI,IAAI;AAAA,YAAI,IAAI;AAAA,UAAG;AAAA,UAApD,UAAA,CACE,gBAAA,EAAC,OAAD;AAAA,YACE,yBAAyB,EACvB,QAAQ,EAAK,iBACf;AAAA,YACA,OAAO,EAAE,aAAa,EAAE;AAAA,UACzB,CAAA,GACA,GAAM,sBACL,gBAAA,EAAC,GAAD;AAAA,YACE,SAAS,gBAAA,EAAC,GAAD,CAAe,CAAA;AAAA,YACxB,SAAA,MAAe;AAAA,YAAC;AAAA,YAChB,IAAI;AAAA,cAAE,QAAQ;AAAA,cAAI,GAAG;AAAA,cAAG,OAAO;AAAA,YAAc;AAAA,YAE5C,UAAA,EAAK;AAAA,UACA,CAAA,CAEL;AAAA;QAIN,CAAC,KAAU,GAAa,SACvB,gBAAA,EAAC,GAAD;AAAA,UAAO,IAAI;AAAA,YAAE,KAAK;AAAA,YAAG,IAAI;AAAA,YAAI,IAAI;AAAA,UAAG;AAAA,UAApC,UAAA,CACE,gBAAA,EAAC,GAAD;AAAA,YACE,SAAA,MAAe,EAAY,SAAS,EAAc,EAAK,MAAM,YAAY;AAAA,YACzE,SAAQ;AAAA,YAEP,UAAA,EAAY;AAAA,UACP,CAAA,GACP,GAAe,SACd,gBAAA,EAAC,GAAD;AAAA,YACE,OAAM;AAAA,YACN,SAAA,MAAe,EAAc,SAAS,EAAc,EAAK,MAAM,cAAc;AAAA,YAE5E,UAAA,EAAc;AAAA,UACT,CAAA,CAEL;AAAA;MAEL,EAAA,CAAA;AAAA,MAKN,gBAAA,EAAC,GAAD,EAAwB,MAAA,EAAO,CAAA;AAAA,MAG9B,EAAiB,UAAU,gBAAA,EAAC,GAAD,EAAQ,QAAQ,EAAiB,OAAS,CAAA;AAAA,IACjE;AAAA;AAEX"}

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

@@ -1,27 +1,9 @@
 import { SxProps, Theme } from '@mui/material/styles';
 interface SaveAnExtraCardProps {
-    /** Subtitle label in the green header (e.g. "Save an extra"). */
-    title: string;
-    /** Large amount in the green header (e.g. "$100.00"). */
-    amount: string;
-    /** Small caption under the header amount (e.g. "to help your funds grow"). */
-    description: string;
-    /** Large amount in the white footer (e.g. "$3,320.00"). */
-    footerAmount: string;
-    /** Small caption under the footer amount (e.g. "After payday & projected expenses"). */
-    footerDescription: string;
-    /** Header surface color token. Default `success.main` (green). */
+    primaryText?: string[];
+    secondaryText?: string[];
     bgcolor?: string;
     sx?: SxProps<Theme>;
 }
-/**
- * Save an Extra content: a green header ("Save an extra" / amount / caption)
- * over a white footer (projected amount / caption), wrapped in a rounded,
- * green-outlined card. Mirrors the v1 `SaveAnExtra100` structure with
- * theme-aware tokens so it flips correctly in dark mode.
- *
- * Figma: Save an Extra $100 Content (Full variant). Scope is the Content
- * section only.
- */
-declare const SaveAnExtraCard: ({ title, amount, description, footerAmount, footerDescription, bgcolor, sx, }: SaveAnExtraCardProps) => import("react/jsx-runtime").JSX.Element;
+declare const SaveAnExtraCard: ({ primaryText, secondaryText, bgcolor, sx, }: SaveAnExtraCardProps) => import("react/jsx-runtime").JSX.Element;
 export default SaveAnExtraCard;

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

@@ -1,57 +1,65 @@
-import { getLogoElevation as x } from "./logoShadow.es.js";
+import { formatCurrency as i } from "../../core/utils/NumberFormatting.es.js";
+import { getLogoElevation as h } from "./logoShadow.es.js";
 import { Text as r } from "@mxenabled/mxui";
-import { jsx as e, jsxs as o } from "react/jsx-runtime";
+import { jsx as o, jsxs as e } from "react/jsx-runtime";
 import t from "@mui/material/Box";
-var u = ({ title: i, amount: n, description: a, footerAmount: c, footerDescription: s, bgcolor: d = "success.main", sx: l }) => /* @__PURE__ */ o(t, {
-  sx: {
-    border: "1px solid",
-    borderColor: "success.main",
-    borderRadius: 2,
-    boxShadow: x,
-    overflow: "hidden",
-    ...l
-  },
-  children: [/* @__PURE__ */ o(t, {
+var C = ({ primaryText: n = [], secondaryText: a = [], bgcolor: c = "success.main", sx: l }) => {
+  const [d, s, p] = n, [m, x] = a;
+  return /* @__PURE__ */ e(t, {
     sx: {
-      bgcolor: d,
-      color: "success.contrastText",
-      p: 16,
-      pt: 12,
-      textAlign: "center"
+      border: "1px solid",
+      borderColor: "success.main",
+      borderRadius: 2,
+      boxShadow: h,
+      overflow: "hidden",
+      ...l
     },
-    children: [
-      /* @__PURE__ */ e(r, {
-        variant: "subtitle1",
-        children: i
-      }),
-      /* @__PURE__ */ e(r, {
-        variant: "h1",
-        children: n
-      }),
-      /* @__PURE__ */ e(r, {
+    children: [/* @__PURE__ */ e(t, {
+      sx: {
+        bgcolor: c,
+        color: "success.contrastText",
+        p: 16,
+        pt: 12,
+        textAlign: "center"
+      },
+      children: [
+        /* @__PURE__ */ o(r, {
+          color: "inherit",
+          variant: "subtitle1",
+          children: d
+        }),
+        /* @__PURE__ */ o(r, {
+          bold: !0,
+          color: "inherit",
+          variant: "h1",
+          children: i(Number(s ?? "0"), "0,0.00")
+        }),
+        /* @__PURE__ */ o(r, {
+          color: "inherit",
+          variant: "caption",
+          children: p
+        })
+      ]
+    }), /* @__PURE__ */ e(t, {
+      sx: {
+        bgcolor: "background.paper",
+        px: 16,
+        py: 12,
+        textAlign: "center"
+      },
+      children: [/* @__PURE__ */ o(r, {
+        variant: "h3",
+        children: i(Number(m ?? "0"), "0,0.00")
+      }), /* @__PURE__ */ o(r, {
+        color: "text.secondary",
         variant: "caption",
-        children: a
-      })
-    ]
-  }), /* @__PURE__ */ o(t, {
-    sx: {
-      bgcolor: "background.paper",
-      px: 16,
-      py: 12,
-      textAlign: "center"
-    },
-    children: [/* @__PURE__ */ e(r, {
-      variant: "h3",
-      children: c
-    }), /* @__PURE__ */ e(r, {
-      color: "text.secondary",
-      variant: "caption",
-      children: s
+        children: x
+      })]
     })]
-  })]
-});
+  });
+};
 export {
-  u as default
+  C as default
 };
 
 //# sourceMappingURL=SaveAnExtraCard.es.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"SaveAnExtraCard.es.js","names":[],"sources":["../../../src/insights-v2/components/SaveAnExtraCard.tsx"],"sourcesContent":["import Box from '@mui/material/Box'\nimport type { SxProps, Theme } from '@mui/material/styles'\n\nimport { Text } from '@mxenabled/mxui'\n\nimport { getLogoElevation } from './logoShadow'\n\ninterface SaveAnExtraCardProps {\n  /** Subtitle label in the green header (e.g. \"Save an extra\"). */\n  title: string\n  /** Large amount in the green header (e.g. \"$100.00\"). */\n  amount: string\n  /** Small caption under the header amount (e.g. \"to help your funds grow\"). */\n  description: string\n  /** Large amount in the white footer (e.g. \"$3,320.00\"). */\n  footerAmount: string\n  /** Small caption under the footer amount (e.g. \"After payday & projected expenses\"). */\n  footerDescription: string\n  /** Header surface color token. Default `success.main` (green). */\n  bgcolor?: string\n  sx?: SxProps<Theme>\n}\n\n/**\n * Save an Extra content: a green header (\"Save an extra\" / amount / caption)\n * over a white footer (projected amount / caption), wrapped in a rounded,\n * green-outlined card. Mirrors the v1 `SaveAnExtra100` structure with\n * theme-aware tokens so it flips correctly in dark mode.\n *\n * Figma: Save an Extra $100 Content (Full variant). Scope is the Content\n * section only.\n */\nconst SaveAnExtraCard = ({\n  title,\n  amount,\n  description,\n  footerAmount,\n  footerDescription,\n  bgcolor = 'success.main',\n  sx,\n}: SaveAnExtraCardProps) => {\n  return (\n    <Box\n      sx={{\n        border: '1px solid',\n        borderColor: 'success.main',\n        borderRadius: 2,\n        boxShadow: getLogoElevation,\n        overflow: 'hidden',\n        ...sx,\n      }}\n    >\n      {/* Green header */}\n      <Box\n        sx={{\n          bgcolor,\n          color: 'success.contrastText',\n          p: 16,\n          pt: 12,\n          textAlign: 'center',\n        }}\n      >\n        <Text variant=\"subtitle1\">{title}</Text>\n        <Text variant=\"h1\">{amount}</Text>\n        <Text variant=\"caption\">{description}</Text>\n      </Box>\n\n      {/* White footer with projected amount */}\n      <Box sx={{ bgcolor: 'background.paper', px: 16, py: 12, textAlign: 'center' }}>\n        <Text variant=\"h3\">{footerAmount}</Text>\n        <Text color=\"text.secondary\" variant=\"caption\">\n          {footerDescription}\n        </Text>\n      </Box>\n    </Box>\n  )\n}\n\nexport default SaveAnExtraCard\n"],"mappings":";;;;AAgCA,IAAM,IAAA,CAAmB,EACvB,OAAA,GACA,QAAA,GACA,aAAA,GACA,cAAA,GACA,mBAAA,GACA,SAAA,IAAU,gBACV,IAAA,EAAA,MAGE,gBAAA,EAAC,GAAD;AAAA,EACE,IAAI;AAAA,IACF,QAAQ;AAAA,IACR,aAAa;AAAA,IACb,cAAc;AAAA,IACd,WAAW;AAAA,IACX,UAAU;AAAA,IACV,GAAG;AAAA,EACL;AAAA,EARF,UAAA,CAWE,gBAAA,EAAC,GAAD;AAAA,IACE,IAAI;AAAA,MACF,SAAA;AAAA,MACA,OAAO;AAAA,MACP,GAAG;AAAA,MACH,IAAI;AAAA,MACJ,WAAW;AAAA,IACb;AAAA,IAPF,UAAA;AAAA,MASE,gBAAA,EAAC,GAAD;AAAA,QAAM,SAAQ;AAAA,QAAa,UAAA;AAAA,MAAY,CAAA;AAAA,MACvC,gBAAA,EAAC,GAAD;AAAA,QAAM,SAAQ;AAAA,QAAM,UAAA;AAAA,MAAa,CAAA;AAAA,MACjC,gBAAA,EAAC,GAAD;AAAA,QAAM,SAAQ;AAAA,QAAW,UAAA;AAAA,MAAkB,CAAA;AAAA,IACxC;AAAA,EAGL,CAAA,GAAA,gBAAA,EAAC,GAAD;AAAA,IAAK,IAAI;AAAA,MAAE,SAAS;AAAA,MAAoB,IAAI;AAAA,MAAI,IAAI;AAAA,MAAI,WAAW;AAAA,IAAS;AAAA,IAA5E,UAAA,CACE,gBAAA,EAAC,GAAD;AAAA,MAAM,SAAQ;AAAA,MAAM,UAAA;AAAA,IAAmB,CAAA,GACvC,gBAAA,EAAC,GAAD;AAAA,MAAM,OAAM;AAAA,MAAiB,SAAQ;AAAA,MAClC,UAAA;AAAA,IACG,CAAA,CACH;AAAA,EACF,CAAA,CAAA"}
+{"version":3,"file":"SaveAnExtraCard.es.js","names":[],"sources":["../../../src/insights-v2/components/SaveAnExtraCard.tsx"],"sourcesContent":["import Box from '@mui/material/Box'\nimport type { SxProps, Theme } from '@mui/material/styles'\n\nimport { Text } from '@mxenabled/mxui'\n\nimport { formatCurrency } from '../../core/utils/NumberFormatting'\n\nimport { getLogoElevation } from './logoShadow'\n\ninterface SaveAnExtraCardProps {\n  primaryText?: string[]\n  secondaryText?: string[]\n  bgcolor?: string\n  sx?: SxProps<Theme>\n}\n\nconst SaveAnExtraCard = ({\n  primaryText = [],\n  secondaryText = [],\n  bgcolor = 'success.main',\n  sx,\n}: SaveAnExtraCardProps) => {\n  const [leadIn, amount, trailingCopy] = primaryText\n  const [projected, projectedCaption] = secondaryText\n\n  return (\n    <Box\n      sx={{\n        border: '1px solid',\n        borderColor: 'success.main',\n        borderRadius: 2,\n        boxShadow: getLogoElevation,\n        overflow: 'hidden',\n        ...sx,\n      }}\n    >\n      {/* Green header */}\n      <Box\n        sx={{\n          bgcolor,\n          color: 'success.contrastText',\n          p: 16,\n          pt: 12,\n          textAlign: 'center',\n        }}\n      >\n        <Text color=\"inherit\" variant=\"subtitle1\">\n          {leadIn}\n        </Text>\n        <Text bold={true} color=\"inherit\" variant=\"h1\">\n          {formatCurrency(Number(amount ?? '0'), '0,0.00')}\n        </Text>\n        <Text color=\"inherit\" variant=\"caption\">\n          {trailingCopy}\n        </Text>\n      </Box>\n\n      {/* White footer with projected amount */}\n      <Box sx={{ bgcolor: 'background.paper', px: 16, py: 12, textAlign: 'center' }}>\n        <Text variant=\"h3\">{formatCurrency(Number(projected ?? '0'), '0,0.00')}</Text>\n        <Text color=\"text.secondary\" variant=\"caption\">\n          {projectedCaption}\n        </Text>\n      </Box>\n    </Box>\n  )\n}\n\nexport default SaveAnExtraCard\n"],"mappings":";;;;;AAgBA,IAAM,IAAA,CAAmB,EACvB,aAAA,IAAc,CAAC,GACf,eAAA,IAAgB,CAAC,GACjB,SAAA,IAAU,gBACV,IAAA,EAAA,MAC0B;AAC1B,QAAM,CAAC,GAAQ,GAAQ,CAAA,IAAgB,GACjC,CAAC,GAAW,CAAA,IAAoB;AAEtC,SACE,gBAAA,EAAC,GAAD;AAAA,IACE,IAAI;AAAA,MACF,QAAQ;AAAA,MACR,aAAa;AAAA,MACb,cAAc;AAAA,MACd,WAAW;AAAA,MACX,UAAU;AAAA,MACV,GAAG;AAAA,IACL;AAAA,IARF,UAAA,CAWE,gBAAA,EAAC,GAAD;AAAA,MACE,IAAI;AAAA,QACF,SAAA;AAAA,QACA,OAAO;AAAA,QACP,GAAG;AAAA,QACH,IAAI;AAAA,QACJ,WAAW;AAAA,MACb;AAAA,MAPF,UAAA;AAAA,QASE,gBAAA,EAAC,GAAD;AAAA,UAAM,OAAM;AAAA,UAAU,SAAQ;AAAA,UAC3B,UAAA;AAAA,QACG,CAAA;AAAA,QACN,gBAAA,EAAC,GAAD;AAAA,UAAM,MAAM;AAAA,UAAM,OAAM;AAAA,UAAU,SAAQ;AAAA,UACvC,UAAA,EAAe,OAAO,KAAU,GAAG,GAAG,QAAQ;AAAA,QAC3C,CAAA;AAAA,QACN,gBAAA,EAAC,GAAD;AAAA,UAAM,OAAM;AAAA,UAAU,SAAQ;AAAA,UAC3B,UAAA;AAAA,QACG,CAAA;AAAA,MACH;AAAA,IAGL,CAAA,GAAA,gBAAA,EAAC,GAAD;AAAA,MAAK,IAAI;AAAA,QAAE,SAAS;AAAA,QAAoB,IAAI;AAAA,QAAI,IAAI;AAAA,QAAI,WAAW;AAAA,MAAS;AAAA,MAA5E,UAAA,CACE,gBAAA,EAAC,GAAD;AAAA,QAAM,SAAQ;AAAA,QAAM,UAAA,EAAe,OAAO,KAAa,GAAG,GAAG,QAAQ;AAAA,MAAQ,CAAA,GAC7E,gBAAA,EAAC,GAAD;AAAA,QAAM,OAAM;AAAA,QAAiB,SAAQ;AAAA,QAClC,UAAA;AAAA,MACG,CAAA,CACH;AAAA,IACF,CAAA,CAAA;AAAA;AAET"}

package/dist/insights-v2/components/chartblocks/ThemedSVGImage.es.js

@@ -13,16 +13,16 @@ var h = 200, v = 130, b = (r) => r || null, c = (r, o) => {
     }
   });
 }, E = ({ divProps: r, image: o, isMini: n = !1 }) => {
-  const e = d(), t = u(null), l = {
-    100: e.palette.primary.lighter,
-    200: e.palette.primary.light,
-    300: e.palette.primary.main,
-    400: e.palette.primary.dark,
-    500: e.palette.primary.darker
-  };
+  const e = d(), t = u(null);
   return y(() => {
     if (!t.current) return;
-    const a = t.current, m = a.querySelectorAll(".Overlay");
+    const l = t.current, a = {
+      100: e.palette.primary.lighter,
+      200: e.palette.primary.light,
+      300: e.palette.primary.main,
+      400: e.palette.primary.dark,
+      500: e.palette.primary.darker
+    }, m = l.querySelectorAll(".Overlay");
     [
       "brand100",
       "brand200",
@@ -30,10 +30,10 @@ var h = 200, v = 130, b = (r) => r || null, c = (r, o) => {
       "brand400",
       "brand500"
     ].forEach((i) => {
-      const f = a.querySelectorAll(`.${i}`), p = i.replace("brand", "");
-      c(f, l[p]);
-    }), c(m, l[300]);
-  }, [l]), /* @__PURE__ */ s("div", {
+      const f = l.querySelectorAll(`.${i}`), p = i.replace("brand", "");
+      c(f, a[p]);
+    }), c(m, a[300]);
+  }, [e]), /* @__PURE__ */ s("div", {
     style: {
       maxWidth: n ? v : h,
       width: "100%"

package/dist/insights-v2/components/chartblocks/ThemedSVGImage.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"ThemedSVGImage.es.js","names":[],"sources":["../../../../src/insights-v2/components/chartblocks/ThemedSVGImage.tsx"],"sourcesContent":["/* eslint-disable react/jsx-pascal-case */\n\nimport { useEffect, useRef } from 'react'\n\nimport { useTheme } from '@mui/material/styles'\nimport type { ThemedSVGImageProps } from '../../../core'\n\nconst MAX_SVG_WIDTH = 200\nconst MINI_SVG_WIDTH = 130\n\n// Utility function to get an SVG element from a DOM node\nconst getSVGElement = (element: Element | null): SVGElement | null => {\n  return element ? (element as SVGElement) : null\n}\n\n// Utility function to apply color to SVG elements\nconst applyColorToSVG = (elements: NodeListOf<Element>, color: string) => {\n  elements.forEach((element) => {\n    const svgElement = getSVGElement(element)\n    if (svgElement) {\n      const strokeAttr = svgElement.getAttribute('stroke')\n      const fillAttr = svgElement.getAttribute('fill')\n\n      if (strokeAttr && strokeAttr !== 'white') {\n        svgElement.style.setProperty('stroke', color)\n      }\n\n      if (fillAttr) {\n        const fillColor = fillAttr === 'white' ? 'white' : color\n        svgElement.style.setProperty('fill', fillColor)\n      }\n    }\n  })\n}\n\nexport const ThemedSVGImage = ({ divProps, image: SVG, isMini = false }: ThemedSVGImageProps) => {\n  const theme = useTheme()\n  const containerRef = useRef<SVGSVGElement | null>(null)\n\n  const colors = {\n    '100': (theme as any).palette.primary.lighter,\n    '200': theme.palette.primary.light,\n    '300': theme.palette.primary.main,\n    '400': theme.palette.primary.dark,\n    '500': (theme as any).palette.primary.darker,\n  }\n\n  // If the client does not have a color scheme aka widget brand color, set the colors to the primary kyper token colors\n  // Apply color scheme to SVG elements when component mounts or colors change\n  useEffect(() => {\n    if (!containerRef.current) return\n\n    const container = containerRef.current\n\n    const overlayElements = container.querySelectorAll('.Overlay')\n    const brandElements = ['brand100', 'brand200', 'brand300', 'brand400', 'brand500']\n\n    brandElements.forEach((className) => {\n      const elements = container.querySelectorAll(`.${className}`)\n      const colorKey = className.replace('brand', '') as keyof typeof colors\n      applyColorToSVG(elements, colors[colorKey])\n    })\n\n    // Apply the color for overlays separately (using the 300 color scheme)\n    applyColorToSVG(overlayElements, colors['300'])\n  }, [colors])\n\n  return (\n    <div\n      style={{\n        maxWidth: isMini ? MINI_SVG_WIDTH : MAX_SVG_WIDTH,\n        width: '100%',\n      }}\n      {...divProps}\n    >\n      <SVG ref={containerRef} />\n    </div>\n  )\n}\n"],"mappings":";;;AAOA,IAAM,IAAgB,KAChB,IAAiB,KAGjB,IAAA,CAAiB,MACd,KAAoC,MAIvC,IAAA,CAAmB,GAA+B,MAAkB;AACxE,EAAA,EAAS,QAAA,CAAS,MAAY;AAC5B,UAAM,IAAa,EAAc,CAAO;AACxC,QAAI,GAAY;AACd,YAAM,IAAa,EAAW,aAAa,QAAQ,GAC7C,IAAW,EAAW,aAAa,MAAM;AAM/C,UAJI,KAAc,MAAe,WAC/B,EAAW,MAAM,YAAY,UAAU,CAAK,GAG1C,GAAU;AACZ,cAAM,IAAY,MAAa,UAAU,UAAU;AACnD,QAAA,EAAW,MAAM,YAAY,QAAQ,CAAS;AAAA,MAChD;AAAA,IACF;AAAA,EACF,CAAC;AACH,GAEa,IAAA,CAAkB,EAAE,UAAA,GAAU,OAAO,GAAK,QAAA,IAAS,GAAA,MAAiC;AAC/F,QAAM,IAAQ,EAAS,GACjB,IAAe,EAA6B,IAAI,GAEhD,IAAS;AAAA,IACb,KAAQ,EAAc,QAAQ,QAAQ;AAAA,IACtC,KAAO,EAAM,QAAQ,QAAQ;AAAA,IAC7B,KAAO,EAAM,QAAQ,QAAQ;AAAA,IAC7B,KAAO,EAAM,QAAQ,QAAQ;AAAA,IAC7B,KAAQ,EAAc,QAAQ,QAAQ;AAAA,EACxC;AAIA,SAAA,EAAA,MAAgB;AACd,QAAI,CAAC,EAAa,QAAS;AAE3B,UAAM,IAAY,EAAa,SAEzB,IAAkB,EAAU,iBAAiB,UAAU;AAG7D;AAAA,MAFuB;AAAA,MAAY;AAAA,MAAY;AAAA,MAAY;AAAA,MAAY;AAAA,IAEvE,EAAc,QAAA,CAAS,MAAc;AACnC,YAAM,IAAW,EAAU,iBAAiB,IAAI,CAAA,EAAW,GACrD,IAAW,EAAU,QAAQ,SAAS,EAAE;AAC9C,MAAA,EAAgB,GAAU,EAAO,CAAA,CAAS;AAAA,IAC5C,CAAC,GAGD,EAAgB,GAAiB,EAAO,GAAA,CAAM;AAAA,EAChD,GAAG,CAAC,CAAM,CAAC,GAGT,gBAAA,EAAC,OAAD;AAAA,IACE,OAAO;AAAA,MACL,UAAU,IAAS,IAAiB;AAAA,MACpC,OAAO;AAAA,IACT;AAAA,IACA,GAAI;AAAA,IAEJ,UAAA,gBAAA,EAAC,GAAD,EAAK,KAAK,EAAe,CAAA;AAAA,EACtB,CAAA;AAET"}
+{"version":3,"file":"ThemedSVGImage.es.js","names":[],"sources":["../../../../src/insights-v2/components/chartblocks/ThemedSVGImage.tsx"],"sourcesContent":["/* eslint-disable react/jsx-pascal-case */\n\nimport { useEffect, useRef } from 'react'\n\nimport { useTheme } from '@mui/material/styles'\nimport type { ThemedSVGImageProps } from '../../../core'\n\nconst MAX_SVG_WIDTH = 200\nconst MINI_SVG_WIDTH = 130\n\n// Utility function to get an SVG element from a DOM node\nconst getSVGElement = (element: Element | null): SVGElement | null => {\n  return element ? (element as SVGElement) : null\n}\n\n// Utility function to apply color to SVG elements\nconst applyColorToSVG = (elements: NodeListOf<Element>, color: string) => {\n  elements.forEach((element) => {\n    const svgElement = getSVGElement(element)\n    if (svgElement) {\n      const strokeAttr = svgElement.getAttribute('stroke')\n      const fillAttr = svgElement.getAttribute('fill')\n\n      if (strokeAttr && strokeAttr !== 'white') {\n        svgElement.style.setProperty('stroke', color)\n      }\n\n      if (fillAttr) {\n        const fillColor = fillAttr === 'white' ? 'white' : color\n        svgElement.style.setProperty('fill', fillColor)\n      }\n    }\n  })\n}\n\nexport const ThemedSVGImage = ({ divProps, image: SVG, isMini = false }: ThemedSVGImageProps) => {\n  const theme = useTheme()\n  const containerRef = useRef<SVGSVGElement | null>(null)\n\n  // If the client does not have a color scheme aka widget brand color, set the colors to the primary kyper token colors\n  // Apply color scheme to SVG elements when the component mounts or the theme changes.\n  // `colors` is derived inside the effect so it isn't a new reference every render.\n  useEffect(() => {\n    if (!containerRef.current) return\n\n    const container = containerRef.current\n\n    const colors = {\n      '100': (theme as any).palette.primary.lighter,\n      '200': theme.palette.primary.light,\n      '300': theme.palette.primary.main,\n      '400': theme.palette.primary.dark,\n      '500': (theme as any).palette.primary.darker,\n    }\n\n    const overlayElements = container.querySelectorAll('.Overlay')\n    const brandElements = ['brand100', 'brand200', 'brand300', 'brand400', 'brand500']\n\n    brandElements.forEach((className) => {\n      const elements = container.querySelectorAll(`.${className}`)\n      const colorKey = className.replace('brand', '') as keyof typeof colors\n      applyColorToSVG(elements, colors[colorKey])\n    })\n\n    // Apply the color for overlays separately (using the 300 color scheme)\n    applyColorToSVG(overlayElements, colors['300'])\n  }, [theme])\n\n  return (\n    <div\n      style={{\n        maxWidth: isMini ? MINI_SVG_WIDTH : MAX_SVG_WIDTH,\n        width: '100%',\n      }}\n      {...divProps}\n    >\n      <SVG ref={containerRef} />\n    </div>\n  )\n}\n"],"mappings":";;;AAOA,IAAM,IAAgB,KAChB,IAAiB,KAGjB,IAAA,CAAiB,MACd,KAAoC,MAIvC,IAAA,CAAmB,GAA+B,MAAkB;AACxE,EAAA,EAAS,QAAA,CAAS,MAAY;AAC5B,UAAM,IAAa,EAAc,CAAO;AACxC,QAAI,GAAY;AACd,YAAM,IAAa,EAAW,aAAa,QAAQ,GAC7C,IAAW,EAAW,aAAa,MAAM;AAM/C,UAJI,KAAc,MAAe,WAC/B,EAAW,MAAM,YAAY,UAAU,CAAK,GAG1C,GAAU;AACZ,cAAM,IAAY,MAAa,UAAU,UAAU;AACnD,QAAA,EAAW,MAAM,YAAY,QAAQ,CAAS;AAAA,MAChD;AAAA,IACF;AAAA,EACF,CAAC;AACH,GAEa,IAAA,CAAkB,EAAE,UAAA,GAAU,OAAO,GAAK,QAAA,IAAS,GAAA,MAAiC;AAC/F,QAAM,IAAQ,EAAS,GACjB,IAAe,EAA6B,IAAI;AAKtD,SAAA,EAAA,MAAgB;AACd,QAAI,CAAC,EAAa,QAAS;AAE3B,UAAM,IAAY,EAAa,SAEzB,IAAS;AAAA,MACb,KAAQ,EAAc,QAAQ,QAAQ;AAAA,MACtC,KAAO,EAAM,QAAQ,QAAQ;AAAA,MAC7B,KAAO,EAAM,QAAQ,QAAQ;AAAA,MAC7B,KAAO,EAAM,QAAQ,QAAQ;AAAA,MAC7B,KAAQ,EAAc,QAAQ,QAAQ;AAAA,IACxC,GAEM,IAAkB,EAAU,iBAAiB,UAAU;AAG7D;AAAA,MAFuB;AAAA,MAAY;AAAA,MAAY;AAAA,MAAY;AAAA,MAAY;AAAA,IAEvE,EAAc,QAAA,CAAS,MAAc;AACnC,YAAM,IAAW,EAAU,iBAAiB,IAAI,CAAA,EAAW,GACrD,IAAW,EAAU,QAAQ,SAAS,EAAE;AAC9C,MAAA,EAAgB,GAAU,EAAO,CAAA,CAAS;AAAA,IAC5C,CAAC,GAGD,EAAgB,GAAiB,EAAO,GAAA,CAAM;AAAA,EAChD,GAAG,CAAC,CAAK,CAAC,GAGR,gBAAA,EAAC,OAAD;AAAA,IACE,OAAO;AAAA,MACL,UAAU,IAAS,IAAiB;AAAA,MACpC,OAAO;AAAA,IACT;AAAA,IACA,GAAI;AAAA,IAEJ,UAAA,gBAAA,EAAC,GAAD,EAAK,KAAK,EAAe,CAAA;AAAA,EACtB,CAAA;AAET"}

package/dist/insights-v2/index.es.js

@@ -1,57 +1,59 @@
-import { BAR_CHART_VARIANTS as o, barChartVariant as t, buildChartData as m, buildDataSeries as i } from "./blocks/ChartBlocks/BarchartBlock/utils.es.js";
+import { BAR_CHART_VARIANTS as o, barChartVariant as t, buildChartData as m, buildDataSeries as a } from "./blocks/ChartBlocks/BarchartBlock/utils.es.js";
 import { BarchartBlock as p } from "./blocks/ChartBlocks/BarchartBlock/BarchartBlock.es.js";
 import { DoubleBarChartBlock as e } from "./blocks/ChartBlocks/DoubleBarChartBlock/DoubleBarChartBlock.es.js";
-import c from "./blocks/ChartBlocks/DonutChartBlock/DonutChartBlock.es.js";
+import l from "./blocks/ChartBlocks/DonutChartBlock/DonutChartBlock.es.js";
 import s from "./blocks/ChartBlocks/DoubleProgressBarBlock/DoubleProgressBarBlock.es.js";
 import g from "./blocks/ComponentBlocks/AccountBlock/AccountBlock.es.js";
-import { BudgetBlock as B } from "./blocks/ComponentBlocks/BudgetBlock/BudgetBlock.es.js";
-import S from "./components/InsightTransactionRow.es.js";
-import k from "./components/TransactionListCard.es.js";
-import { CategoryTransactionsBlock as T } from "./blocks/ComponentBlocks/TransactionBlock/TransactionBlock.es.js";
-import { SVGImageBlock as D } from "./blocks/ImageBlocks/SVGImageBlock/SVGImageBlock.es.js";
-import P from "./components/AccountHeroCard.es.js";
-import H from "./components/AmountPill.es.js";
-import v from "./components/DesignateEmergencySavingsCard.es.js";
-import V from "./components/BaseLayout.es.js";
-import E from "./components/StatusMessageCard.es.js";
-import _ from "./components/LogoTile.es.js";
-import G from "./components/LogoClusterCard.es.js";
-import O from "./components/MerchantHighlightCard.es.js";
-import j from "./components/P2PLogoStack.es.js";
-import z from "./components/SaveAnExtraCard.es.js";
-import J from "./components/SavingsOpportunityCard.es.js";
-import Q from "./components/StatusPill.es.js";
-import X from "./components/SubscriptionHeroCard.es.js";
-import Z from "./components/TransferLogoCard.es.js";
-import rr from "./components/UpcomingBillCard.es.js";
+import { BudgetBlock as u } from "./blocks/ComponentBlocks/BudgetBlock/BudgetBlock.es.js";
+import S from "./components/SaveAnExtraCard.es.js";
+import h from "./blocks/ComponentBlocks/SaveExtraBlock/SaveExtraBlock.es.js";
+import T from "./components/InsightTransactionRow.es.js";
+import D from "./components/TransactionListCard.es.js";
+import { CategoryTransactionsBlock as P } from "./blocks/ComponentBlocks/TransactionBlock/TransactionBlock.es.js";
+import { SVGImageBlock as y } from "./blocks/ImageBlocks/SVGImageBlock/SVGImageBlock.es.js";
+import R from "./components/AccountHeroCard.es.js";
+import E from "./components/AmountPill.es.js";
+import V from "./components/DesignateEmergencySavingsCard.es.js";
+import _ from "./components/BaseLayout.es.js";
+import G from "./components/StatusMessageCard.es.js";
+import O from "./components/LogoTile.es.js";
+import j from "./components/LogoClusterCard.es.js";
+import z from "./components/MerchantHighlightCard.es.js";
+import J from "./components/P2PLogoStack.es.js";
+import Q from "./components/SavingsOpportunityCard.es.js";
+import X from "./components/StatusPill.es.js";
+import Z from "./components/SubscriptionHeroCard.es.js";
+import rr from "./components/TransferLogoCard.es.js";
+import tr from "./components/UpcomingBillCard.es.js";
 export {
   g as AccountBlock,
-  P as AccountHeroCard,
-  H as AmountPill,
+  R as AccountHeroCard,
+  E as AmountPill,
   o as BAR_CHART_VARIANTS,
   p as BarchartBlock,
-  V as BaseLayout,
-  B as BudgetBlock,
-  T as CategoryTransactionsBlock,
-  v as DesignateEmergencySavingsCard,
-  c as DonutChartBlock,
+  _ as BaseLayout,
+  u as BudgetBlock,
+  P as CategoryTransactionsBlock,
+  V as DesignateEmergencySavingsCard,
+  l as DonutChartBlock,
   e as DoubleBarChartBlock,
   s as DoubleProgressBarBlock,
-  S as InsightTransactionRow,
-  G as LogoClusterCard,
-  _ as LogoTile,
-  O as MerchantHighlightCard,
-  j as P2PLogoStack,
-  D as SVGImageBlock,
-  z as SaveAnExtraCard,
-  J as SavingsOpportunityCard,
-  E as StatusMessageCard,
-  Q as StatusPill,
-  X as SubscriptionHeroCard,
-  k as TransactionListCard,
-  Z as TransferLogoCard,
-  rr as UpcomingBillCard,
+  T as InsightTransactionRow,
+  j as LogoClusterCard,
+  O as LogoTile,
+  z as MerchantHighlightCard,
+  J as P2PLogoStack,
+  y as SVGImageBlock,
+  S as SaveAnExtraCard,
+  h as SaveExtraBlock,
+  Q as SavingsOpportunityCard,
+  G as StatusMessageCard,
+  X as StatusPill,
+  Z as SubscriptionHeroCard,
+  D as TransactionListCard,
+  rr as TransferLogoCard,
+  tr as UpcomingBillCard,
   t as barChartVariant,
   m as buildChartData,
-  i as buildDataSeries
+  a as buildDataSeries
 };

package/dist/insights-v2/mappings/blocks.d.ts

@@ -1,11 +1,12 @@
-import { Beat, InsightsPayload } from '../../core';
+import { Beat, GlobalCopy, InsightsPayload } from '../../core';
 export interface ActionBlockProps {
     beat: Beat;
 }
+export declare const hasDrawerBlock: (block?: string | null) => boolean;
 export interface ActionBlockEntry {
     Component: React.ComponentType<ActionBlockProps>;
     usePrepare: (props: ActionBlockProps) => void;
-    title: string;
+    title?: (variant: string | null | undefined, copy: GlobalCopy) => string;
 }
 export declare const actionBlocks: Record<string, ActionBlockEntry>;
 export declare const blocks: Record<string, React.ComponentType<{

package/dist/insights-v2/mappings/blocks.es.js

@@ -1,34 +1,53 @@
-import { BarchartBlock as o } from "../blocks/ChartBlocks/BarchartBlock/BarchartBlock.es.js";
-import { DoubleBarChartBlock as r } from "../blocks/ChartBlocks/DoubleBarChartBlock/DoubleBarChartBlock.es.js";
-import t from "../blocks/ChartBlocks/DonutChartBlock/DonutChartBlock.es.js";
-import c from "../blocks/ChartBlocks/DoubleProgressBarBlock/DoubleProgressBarBlock.es.js";
-import l from "../blocks/ComponentBlocks/AccountBlock/AccountBlock.es.js";
-import { BudgetBlock as m } from "../blocks/ComponentBlocks/BudgetBlock/BudgetBlock.es.js";
-import { CategoryTransactionsBlock as a } from "../blocks/ComponentBlocks/TransactionBlock/TransactionBlock.es.js";
-import B from "../blocks/ImageBlocks/ImageBlock.es.js";
-import { SVGImageBlock as e } from "../blocks/ImageBlocks/SVGImageBlock/SVGImageBlock.es.js";
-import i from "../blocks/ChartBlocks/StepChartBlock/StepChartBlock.es.js";
-import { PlaceholderActionBlock as k } from "../blocks/ComponentBlocks/ActionBlock/PlaceholderActionBlock.es.js";
-var p = (n) => {
-}, v = { PlaceholderActionBlock: {
-  Component: k,
-  usePrepare: p,
-  title: "Action Block Layer Drilldown"
-} }, y = {
-  AccountBlock: l,
-  BarChartBlock: o,
-  BudgetBlock: m,
-  CategoryTransactionsBlock: a,
-  DonutChartBlock: t,
-  DoubleBarChartBlock: r,
-  DoubleProgressBarBlock: c,
-  ImageBlock: B,
-  StepChartBlock: i,
-  SVGImageBlock: e
+import { BarchartBlock as e } from "../blocks/ChartBlocks/BarchartBlock/BarchartBlock.es.js";
+import { DoubleBarChartBlock as a } from "../blocks/ChartBlocks/DoubleBarChartBlock/DoubleBarChartBlock.es.js";
+import m from "../blocks/ChartBlocks/DonutChartBlock/DonutChartBlock.es.js";
+import l from "../blocks/ChartBlocks/DoubleProgressBarBlock/DoubleProgressBarBlock.es.js";
+import c from "../blocks/ComponentBlocks/AccountBlock/AccountBlock.es.js";
+import { BudgetBlock as i } from "../blocks/ComponentBlocks/BudgetBlock/BudgetBlock.es.js";
+import n from "../blocks/ComponentBlocks/SaveExtraBlock/SaveExtraBlock.es.js";
+import { CategoryTransactionsBlock as B } from "../blocks/ComponentBlocks/TransactionBlock/TransactionBlock.es.js";
+import k from "../blocks/ImageBlocks/ImageBlock.es.js";
+import { SVGImageBlock as p } from "../blocks/ImageBlocks/SVGImageBlock/SVGImageBlock.es.js";
+import f from "../blocks/ChartBlocks/StepChartBlock/StepChartBlock.es.js";
+import { PlaceholderActionBlock as s } from "../actionBlocks/PlaceholderActionBlock.es.js";
+import { getMakeTransferDrawerTitle as u } from "../actionBlocks/MakeTransferActionBlock/layout.es.js";
+import { MakeTransferActionBlockLayer as h } from "../actionBlocks/MakeTransferActionBlock/MakeTransferActionBlockLayer.es.js";
+var t = (o) => {
+}, C = /* @__PURE__ */ new Set([
+  "",
+  "null",
+  "undefined"
+]), E = (o) => {
+  const r = o?.trim().toLowerCase();
+  return !!r && !C.has(r);
+}, I = {
+  PlaceholderActionBlock: {
+    Component: s,
+    usePrepare: t,
+    title: () => "Action Block Layer Drilldown"
+  },
+  make_transfer: {
+    Component: h,
+    usePrepare: t,
+    title: u
+  }
+}, M = {
+  AccountBlock: c,
+  BarChartBlock: e,
+  BudgetBlock: i,
+  CategoryTransactionsBlock: B,
+  DonutChartBlock: m,
+  DoubleBarChartBlock: a,
+  DoubleProgressBarBlock: l,
+  ImageBlock: k,
+  save_extra_block: n,
+  StepChartBlock: f,
+  SVGImageBlock: p
 };
 export {
-  v as actionBlocks,
-  y as blocks
+  I as actionBlocks,
+  M as blocks,
+  E as hasDrawerBlock
 };
 
 //# sourceMappingURL=blocks.es.js.map

package/dist/insights-v2/mappings/blocks.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"blocks.es.js","names":[],"sources":["../../../src/insights-v2/mappings/blocks.ts"],"sourcesContent":["import {\n  AccountBlock,\n  BarchartBlock,\n  BudgetBlock,\n  CategoryTransactionsBlock,\n  DonutChartBlock,\n  DoubleBarChartBlock,\n  DoubleProgressBarBlock,\n  SVGImageBlock,\n} from '../blocks'\nimport StepChartBlock from '../blocks/ChartBlocks/StepChartBlock'\nimport ImageBlock from '../blocks/ImageBlocks/ImageBlock'\n\nimport type { Beat, InsightsPayload } from '../../core'\nimport { PlaceholderActionBlock } from '../blocks/ComponentBlocks/ActionBlock/PlaceholderActionBlock'\n\n// Drilldown indexes are not passed down: action blocks read them from\n// InsightsV2Store (useInsightsV2Store().actionDrawer).\nexport interface ActionBlockProps {\n  beat: Beat\n}\n\nconst noop = (_: ActionBlockProps) => {}\nexport interface ActionBlockEntry {\n  Component: React.ComponentType<ActionBlockProps>\n  usePrepare: (props: ActionBlockProps) => void // required; default to noop in each entry\n  title: string\n}\n\n// Registry of drawer drilldowns, keyed by the `block` name the backend sends\n// on a beat's CTA. To add one: create a component taking ActionBlockProps,\n// read the clicked indexes from useInsightsV2Store().actionDrawer, and\n// register it here. Add\n// `usePrepare` when the block needs to load data before rendering.\nexport const actionBlocks = {\n  PlaceholderActionBlock: {\n    Component: PlaceholderActionBlock,\n    usePrepare: noop,\n    title: 'Action Block Layer Drilldown',\n  },\n} as Record<string, ActionBlockEntry>\n\nexport const blocks = {\n  AccountBlock: AccountBlock,\n  BarChartBlock: BarchartBlock,\n  BudgetBlock: BudgetBlock,\n  CategoryTransactionsBlock: CategoryTransactionsBlock,\n  DonutChartBlock: DonutChartBlock,\n  DoubleBarChartBlock: DoubleBarChartBlock,\n  DoubleProgressBarBlock: DoubleProgressBarBlock,\n  ImageBlock: ImageBlock,\n  StepChartBlock: StepChartBlock,\n  SVGImageBlock: SVGImageBlock,\n} as Record<string, React.ComponentType<{ payload: InsightsPayload; beatGuid?: string }>>\n"],"mappings":";;;;;;;;;;;AAsBA,IAAM,IAAA,CAAQ,MAAwB;AAAC,GAY1B,IAAe,EAC1B,wBAAwB;AAAA,EACtB,WAAW;AAAA,EACX,YAAY;AAAA,EACZ,OAAO;AACT,EACF,GAEa,IAAS;AAAA,EACN,cAAA;AAAA,EACd,eAAe;AAAA,EACF,aAAA;AAAA,EACc,2BAAA;AAAA,EACV,iBAAA;AAAA,EACI,qBAAA;AAAA,EACG,wBAAA;AAAA,EACZ,YAAA;AAAA,EACI,gBAAA;AAAA,EACD,eAAA;AACjB"}
+{"version":3,"file":"blocks.es.js","names":[],"sources":["../../../src/insights-v2/mappings/blocks.ts"],"sourcesContent":["import {\n  AccountBlock,\n  BarchartBlock,\n  BudgetBlock,\n  CategoryTransactionsBlock,\n  DonutChartBlock,\n  DoubleBarChartBlock,\n  DoubleProgressBarBlock,\n  SaveExtraBlock,\n  SVGImageBlock,\n} from '../blocks'\nimport StepChartBlock from '../blocks/ChartBlocks/StepChartBlock'\nimport ImageBlock from '../blocks/ImageBlocks/ImageBlock'\n\nimport type { Beat, GlobalCopy, InsightsPayload } from '../../core'\nimport { PlaceholderActionBlock } from '../actionBlocks/PlaceholderActionBlock'\nimport { MakeTransferActionBlockLayer } from '../actionBlocks/MakeTransferActionBlock/MakeTransferActionBlockLayer'\nimport { getMakeTransferDrawerTitle } from '../actionBlocks/MakeTransferActionBlock/layout'\n\n// Drilldown indexes are not passed down: action blocks read them from\n// InsightsV2Store (useInsightsV2Store().actionDrawer).\nexport interface ActionBlockProps {\n  beat: Beat\n}\n\nconst noop = (_: ActionBlockProps) => {}\n\n// A CTA opens a drawer only when it carries a real `block`. The backend may send\n// an empty/absent block (or the literal strings \"null\"/\"undefined\") for CTAs\n// that trigger something else (e.g. a postMessage) instead of a drilldown.\nconst NON_BLOCK_VALUES = new Set(['', 'null', 'undefined'])\nexport const hasDrawerBlock = (block?: string | null): boolean => {\n  const normalized = block?.trim().toLowerCase()\n  return !!normalized && !NON_BLOCK_VALUES.has(normalized)\n}\n\nexport interface ActionBlockEntry {\n  Component: React.ComponentType<ActionBlockProps>\n  usePrepare: (props: ActionBlockProps) => void // required; default to noop in each entry\n  // Resolves the drawer title from the clicked CTA's variant + copy (e.g.\n  // MakeTransfer reads its variant title from layout.ts). Falls back to the CTA label.\n  title?: (variant: string | null | undefined, copy: GlobalCopy) => string\n}\n\n// Registry of drawer drilldowns, keyed by the `block` name the backend sends\n// on a beat's CTA. To add one: create a component taking ActionBlockProps,\n// read the clicked indexes from useInsightsV2Store().actionDrawer, and\n// register it here. Add\n// `usePrepare` when the block needs to load data before rendering.\nexport const actionBlocks = {\n  PlaceholderActionBlock: {\n    Component: PlaceholderActionBlock,\n    usePrepare: noop,\n    title: () => 'Action Block Layer Drilldown',\n  },\n  make_transfer: {\n    Component: MakeTransferActionBlockLayer,\n    usePrepare: noop,\n    title: getMakeTransferDrawerTitle,\n  },\n} as Record<string, ActionBlockEntry>\n\nexport const blocks = {\n  AccountBlock: AccountBlock,\n  BarChartBlock: BarchartBlock,\n  BudgetBlock: BudgetBlock,\n  CategoryTransactionsBlock: CategoryTransactionsBlock,\n  DonutChartBlock: DonutChartBlock,\n  DoubleBarChartBlock: DoubleBarChartBlock,\n  DoubleProgressBarBlock: DoubleProgressBarBlock,\n  ImageBlock: ImageBlock,\n  save_extra_block: SaveExtraBlock,\n  StepChartBlock: StepChartBlock,\n  SVGImageBlock: SVGImageBlock,\n} as Record<string, React.ComponentType<{ payload: InsightsPayload; beatGuid?: string }>>\n"],"mappings":";;;;;;;;;;;;;;AAyBA,IAAM,IAAA,CAAQ,MAAwB;AAAC,GAKjC,IAAmB,oBAAI,IAAI;AAAA,EAAC;AAAA,EAAI;AAAA,EAAQ;AAAW,CAAC,GAC7C,IAAA,CAAkB,MAAmC;AAChE,QAAM,IAAa,GAAO,KAAK,EAAE,YAAY;AAC7C,SAAO,CAAC,CAAC,KAAc,CAAC,EAAiB,IAAI,CAAU;AACzD,GAea,IAAe;AAAA,EAC1B,wBAAwB;AAAA,IACtB,WAAW;AAAA,IACX,YAAY;AAAA,IACZ,OAAA,MAAa;AAAA,EACf;AAAA,EACA,eAAe;AAAA,IACb,WAAW;AAAA,IACX,YAAY;AAAA,IACZ,OAAO;AAAA,EACT;AACF,GAEa,IAAS;AAAA,EACN,cAAA;AAAA,EACd,eAAe;AAAA,EACF,aAAA;AAAA,EACc,2BAAA;AAAA,EACV,iBAAA;AAAA,EACI,qBAAA;AAAA,EACG,wBAAA;AAAA,EACZ,YAAA;AAAA,EACZ,kBAAkB;AAAA,EACF,gBAAA;AAAA,EACD,eAAA;AACjB"}

package/package.json

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

package/dist/insights-v2/blocks/ComponentBlocks/ActionBlock/ActionBlockLayer.es.js

@@ -1,41 +0,0 @@
-import { useGlobalCopyStore as d, useGlobalUiStore as f, useInsightsV2Store as C } from "../../../../common/context/hooks.es.js";
-import m from "../../../../common/components/drawer/Drawer.es.js";
-import y from "../../../../common/components/Loader.es.js";
-import { actionBlocks as g } from "../../../mappings/blocks.es.js";
-import { observer as h } from "mobx-react-lite";
-import _ from "@mui/material/Stack";
-import { Text as k } from "@mxenabled/mxui";
-import { jsx as o } from "react/jsx-runtime";
-var B = ({ actionBlock: c, ...r }) => {
-  const { Component: e, usePrepare: t } = c;
-  return t(r), /* @__PURE__ */ o(e, { ...r });
-}, v = h(function({ beat: r }) {
-  const { common: e } = d(), { isCopyLoaded: t } = f(), { actionDrawer: n, closeActionDrawer: s } = C(), i = n.isDrawerOpen && n.guid === r.guid;
-  if (!t) return i ? /* @__PURE__ */ o(y, {}) : null;
-  if (!r.insights_payload) return null;
-  const { primary_cta: p, secondary_cta: u } = r.insights_payload, l = n.trigger === "secondaryCta" ? u : p, a = g[l?.block];
-  return a ? /* @__PURE__ */ o(m, {
-    ariaLabelClose: e.close_aria,
-    isOpen: i,
-    onClose: s,
-    title: a.title,
-    children: /* @__PURE__ */ o(B, {
-      actionBlock: a,
-      beat: r
-    }, l?.block)
-  }) : /* @__PURE__ */ o(m, {
-    ariaLabelClose: e.close_aria,
-    isOpen: i,
-    onClose: s,
-    title: e.error_heading,
-    children: /* @__PURE__ */ o(_, {
-      sx: { p: 24 },
-      children: /* @__PURE__ */ o(k, { children: e.error_message })
-    })
-  });
-});
-export {
-  v as ActionBlockLayer
-};
-
-//# sourceMappingURL=ActionBlockLayer.es.js.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"ActionBlockLayer.es.js","names":[],"sources":["../../../../../src/insights-v2/blocks/ComponentBlocks/ActionBlock/ActionBlockLayer.tsx"],"sourcesContent":["import Stack from '@mui/material/Stack'\n\nimport { Text } from '@mxenabled/mxui'\nimport { observer } from 'mobx-react-lite'\n\nimport {\n  Drawer,\n  Loader,\n  useGlobalCopyStore,\n  useGlobalUiStore,\n  useInsightsV2Store,\n} from '../../../../common'\nimport { type Beat } from '../../../../core'\nimport {\n  actionBlocks,\n  type ActionBlockEntry,\n  type ActionBlockProps,\n} from '../../../mappings/blocks'\n\ninterface ActionBlockLayerProps {\n  beat: Beat\n}\n\n/**\n * Renders a registered action block. Callers MUST key this per block name — a\n * block with `usePrepare` and one without run a different number of hooks, so\n * reusing the same fiber across a block switch violates the rules of hooks.\n */\nconst ActionBlockRunner = ({\n  actionBlock,\n  ...blockProps\n}: ActionBlockProps & { actionBlock: ActionBlockEntry }) => {\n  const { Component, usePrepare } = actionBlock\n\n  usePrepare(blockProps)\n\n  return <Component {...blockProps} />\n}\n\n// `observer` is required: this reads `isCopyLoaded` off GlobalUiStore and the\n// action drawer off InsightsV2Store. Without it the component never re-renders\n// and stays stuck on <Loader /> forever.\nexport const ActionBlockLayer = observer(function ActionBlockLayer({\n  beat,\n}: ActionBlockLayerProps) {\n  const { common: commonCopy } = useGlobalCopyStore()\n  const { isCopyLoaded } = useGlobalUiStore()\n  const { actionDrawer, closeActionDrawer } = useInsightsV2Store()\n\n  // Every card in the feed renders its own layer against the shared store, so\n  // this card's drawer only opens when its beat is the one that triggered it.\n  const isCurrentBeatOpen = actionDrawer.isDrawerOpen && actionDrawer.guid === beat.guid\n\n  if (!isCopyLoaded) return isCurrentBeatOpen ? <Loader /> : null\n\n  // Mirrors BaseLayout's guard — the layer is exported, so callers are not\n  // guaranteed to have narrowed this already.\n  if (!beat.insights_payload) return null\n\n  const { primary_cta, secondary_cta } = beat.insights_payload\n\n  const currentCta = actionDrawer.trigger === 'secondaryCta' ? secondary_cta : primary_cta\n  const actionBlock = actionBlocks[currentCta?.block as keyof typeof actionBlocks]\n\n  if (!actionBlock) {\n    return (\n      <Drawer\n        ariaLabelClose={commonCopy.close_aria}\n        isOpen={isCurrentBeatOpen}\n        onClose={closeActionDrawer}\n        title={commonCopy.error_heading}\n      >\n        <Stack sx={{ p: 24 }}>\n          <Text>{commonCopy.error_message}</Text>\n        </Stack>\n      </Drawer>\n    )\n  }\n\n  return (\n    <Drawer\n      ariaLabelClose={commonCopy.close_aria}\n      isOpen={isCurrentBeatOpen}\n      onClose={closeActionDrawer}\n      title={actionBlock.title}\n    >\n      <ActionBlockRunner actionBlock={actionBlock} beat={beat} key={currentCta?.block} />\n    </Drawer>\n  )\n})\n"],"mappings":";;;;;;;;AA4BA,IAAM,IAAA,CAAqB,EACzB,aAAA,GACA,GAAG,EAAA,MACuD;AAC1D,QAAM,EAAE,WAAA,GAAW,YAAA,EAAA,IAAe;AAElC,SAAA,EAAW,CAAU,GAEd,gBAAA,EAAC,GAAD,EAAW,GAAI,EAAa,CAAA;AACrC,GAKa,IAAmB,EAAS,SAA0B,EACjE,MAAA,EAAA,GACwB;AACxB,QAAM,EAAE,QAAQ,EAAA,IAAe,EAAmB,GAC5C,EAAE,cAAA,EAAA,IAAiB,EAAiB,GACpC,EAAE,cAAA,GAAc,mBAAA,EAAA,IAAsB,EAAmB,GAIzD,IAAoB,EAAa,gBAAgB,EAAa,SAAS,EAAK;AAElF,MAAI,CAAC,EAAc,QAAO,IAAoB,gBAAA,EAAC,GAAD,CAAS,CAAA,IAAI;AAI3D,MAAI,CAAC,EAAK,iBAAkB,QAAO;AAEnC,QAAM,EAAE,aAAA,GAAa,eAAA,EAAA,IAAkB,EAAK,kBAEtC,IAAa,EAAa,YAAY,iBAAiB,IAAgB,GACvE,IAAc,EAAa,GAAY,KAAA;AAE7C,SAAK,IAgBH,gBAAA,EAAC,GAAD;AAAA,IACE,gBAAgB,EAAW;AAAA,IAC3B,QAAQ;AAAA,IACR,SAAS;AAAA,IACT,OAAO,EAAY;AAAA,IAEnB,UAAA,gBAAA,EAAC,GAAD;AAAA,MAAgC,aAAA;AAAA,MAAmB,MAAA;AAAA,IAA+B,GAApB,GAAY,KAAQ;AAAA,EAC5E,CAAA,IArBN,gBAAA,EAAC,GAAD;AAAA,IACE,gBAAgB,EAAW;AAAA,IAC3B,QAAQ;AAAA,IACR,SAAS;AAAA,IACT,OAAO,EAAW;AAAA,IAElB,UAAA,gBAAA,EAAC,GAAD;AAAA,MAAO,IAAI,EAAE,GAAG,GAAG;AAAA,MACjB,UAAA,gBAAA,EAAC,GAAD,EAAA,UAAO,EAAW,cAAoB,CAAA;AAAA,IACjC,CAAA;AAAA,EACD,CAAA;AAcd,CAAC"}