@mx-cartographer/experiences 9.3.8-alpha.al1 → 9.4.0

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

@@ -0,0 +1,104 @@
+import { getLogoElevation as R } from "./logoShadow.es.js";
+import S from "./LogoTile.es.js";
+import n from "@mui/material/Stack";
+import { jsx as o, jsxs as y } from "react/jsx-runtime";
+import s from "@mui/material/Box";
+import E from "@mui/material/Badge";
+var A = (r) => `Rank ${r}`, l = [
+  "flex-start",
+  "center",
+  "flex-end"
+], G = 20, g = [
+  10,
+  25,
+  43
+], _ = 122, a = {
+  x: 10,
+  y: 8
+}, T = { "& .MuiBadge-badge": {
+  bgcolor: "common.black",
+  border: "1px solid",
+  borderColor: "common.white",
+  borderRadius: "999px",
+  boxShadow: (r) => R(r),
+  color: "common.white",
+  fontSize: (r) => r.typography.body2.fontSize,
+  fontWeight: (r) => r.typography.fontWeightRegular,
+  height: 24,
+  minWidth: 24,
+  padding: 0,
+  transform: `translate(-${a.x}px, -${a.y}px)`
+} }, O = ({ background: r, footer: d, logoSize: i = 72, logos: c, ranked: e = !1, rankLabel: x = A, stagger: h = !0, sx: m }) => {
+  const f = h ? (l.length - 1) * G : 0, b = e ? _ : i + f, v = e ? 16 : 32;
+  return /* @__PURE__ */ o(n, {
+    sx: {
+      pt: 8,
+      px: 16,
+      width: "100%",
+      ...m
+    },
+    children: /* @__PURE__ */ y(n, {
+      sx: {
+        alignItems: "center",
+        background: r ?? void 0,
+        bgcolor: r ? void 0 : "background.paper",
+        borderRadius: "8px",
+        gap: 12,
+        py: 16,
+        width: "100%"
+      },
+      children: [/* @__PURE__ */ o(n, {
+        sx: {
+          alignItems: "flex-start",
+          flexDirection: "row",
+          justifyContent: "space-between",
+          height: b,
+          px: v,
+          width: "100%"
+        },
+        children: c.map((u, t) => {
+          const p = /* @__PURE__ */ o(S, {
+            borderColor: "divider",
+            shadow: "elevation",
+            size: i,
+            children: u
+          }), w = e ? {
+            boxSizing: "border-box",
+            mt: g[t % g.length],
+            pl: a.x,
+            width: i + a.x + 2
+          } : { alignSelf: h ? l[t % l.length] : "center" };
+          return /* @__PURE__ */ o(s, {
+            sx: w,
+            children: e ? /* @__PURE__ */ o(E, {
+              anchorOrigin: {
+                horizontal: "left",
+                vertical: "top"
+              },
+              "aria-label": x(t + 1),
+              role: "img",
+              badgeContent: /* @__PURE__ */ o("span", {
+                "aria-hidden": !0,
+                children: t + 1
+              }),
+              overlap: "rectangular",
+              sx: T,
+              children: p
+            }) : p
+          }, t);
+        })
+      }), d && /* @__PURE__ */ o(s, {
+        sx: {
+          px: 16,
+          width: "100%"
+        },
+        children: d
+      })]
+    })
+  });
+};
+export {
+  O as default
+};
+
+//# sourceMappingURL=LogoClusterCard.es.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"LogoClusterCard.es.js","names":[],"sources":["../../../src/insights-v2/components/LogoClusterCard.tsx"],"sourcesContent":["import type { ReactNode } from 'react'\n\nimport Badge from '@mui/material/Badge'\nimport Box from '@mui/material/Box'\nimport Stack from '@mui/material/Stack'\nimport type { SxProps, Theme } from '@mui/material/styles'\n\nimport LogoTile from './LogoTile'\nimport { getLogoElevation } from './logoShadow'\n\ninterface LogoClusterCardProps {\n  /** Brand/merchant logo visuals, rendered as a row of tiles. */\n  logos: ReactNode[]\n  /** Tile size in px. */\n  logoSize?: number\n  /** Card surface color/background token or CSS background string. */\n  background?: string\n  /**\n   * Stagger the tiles diagonally (Figma cycles each tile's vertical alignment\n   * top -> center -> bottom). When false, all tiles are vertically centered.\n   * Default true.\n   */\n  stagger?: boolean\n  /**\n   * Overlay a 1-based rank badge on the top-left of each tile (Figma: Monthly\n   * Top Merchant Spending V3). Default false.\n   */\n  ranked?: boolean\n  /**\n   * Accessible label for each rank badge, given the 1-based rank. Lets the\n   * consumer pass localized copy (e.g. from the copy store) and control word\n   * order. Defaults to `Rank {n}` — callers in a localized context must supply a\n   * copy-store-derived function, or they will ship the English default.\n   */\n  rankLabel?: (rank: number) => string\n  /**\n   * Optional element rendered below the logo row (e.g. a `<StatusPill>`).\n   * Figma: a status stacked beneath the logos on the slot.\n   */\n  footer?: ReactNode\n  sx?: SxProps\n}\n\n// Default accessible label for a rank badge. Hoisted to a stable reference so\n// it isn't re-created each render (consumers override via the `rankLabel` prop,\n// e.g. with localized copy).\nconst defaultRankLabel = (rank: number) => `Rank ${rank}`\n\n// Non-ranked (MSA V2): tiles cascade via counter-axis alignment in a 112 zone\n// (tops 0/20/40).\nconst STAGGER_ALIGN = ['flex-start', 'center', 'flex-end'] as const\nconst STAGGER_STEP = 20\n// Ranked (Top Merchant V3): exact Figma logo top-offsets within the 122 `Logos`\n// content zone (logo2 bottom leaves ~7px). Not a uniform step, so use the\n// measured values rather than alignSelf.\nconst RANK_TILE_OFFSETS = [10, 25, 43] as const\nconst RANK_ROW_HEIGHT = 122\n// Figma: the rank badge overhangs the logo's top-left by 10px left / 8px up.\n// The row reserves the left overhang once (so the first badge stays inside the\n// card edge); the badge itself is offset by it via the MUI transform below.\nconst RANK_BADGE_OVERHANG = { x: 10, y: 8 } as const\n\n// Figma rank badge on MUI `Badge`: a 24px pure-black disc, 1px white border,\n// white `body2` number, soft elevation shadow. MUI centers the badge on the\n// logo's corner (`translate(-50%,-50%)`); override the transform so its top-left\n// lands exactly 10px left / 8px above the logo (Figma's overhang).\nconst rankBadgeSx: SxProps<Theme> = {\n  '& .MuiBadge-badge': {\n    // Intentional: `common.black`/`common.white` are mode-INDEPENDENT in\n    // createMXTheme (unlike `text.primary`/`primary.contrastText`, which flip\n    // per theme). A white-on-black disc plus the white border below keeps the\n    // badge legible in BOTH light and dark mode — this is the dark-mode FIX, not\n    // a bug. Do not \"theme-aware\"-ify these colors; it would break the Figma\n    // look in light mode for no gain (the number sits on the always-black disc,\n    // never on the surface).\n    bgcolor: 'common.black',\n    border: '1px solid',\n    borderColor: 'common.white',\n    borderRadius: '999px',\n    boxShadow: (theme: Theme) => getLogoElevation(theme),\n    color: 'common.white',\n    // Figma number is `typography/body2` (13px / regular), not MUI's badge\n    // default (12px / medium).\n    fontSize: (theme: Theme) => theme.typography.body2.fontSize,\n    fontWeight: (theme: Theme) => theme.typography.fontWeightRegular,\n    height: 24,\n    minWidth: 24,\n    padding: 0,\n    transform: `translate(-${RANK_BADGE_OVERHANG.x}px, -${RANK_BADGE_OVERHANG.y}px)`,\n  },\n}\n\n/**\n * A row of rounded brand/logo tiles on a card surface, diagonally staggered\n * (top -> center -> bottom). Figma: Monthly Subscription Aggregate V2.\n */\nconst LogoClusterCard = ({\n  background,\n  footer,\n  logoSize = 72,\n  logos,\n  ranked = false,\n  rankLabel = defaultRankLabel,\n  stagger = true,\n  sx,\n}: LogoClusterCardProps) => {\n  // Non-ranked cascades via alignSelf in a `logoSize + span` zone. Ranked uses\n  // the exact Figma offsets in the 122 zone (its cascade isn't a uniform step).\n  const staggerSpan = stagger ? (STAGGER_ALIGN.length - 1) * STAGGER_STEP : 0\n  const rowHeight = ranked ? RANK_ROW_HEIGHT : logoSize + staggerSpan\n  // Figma `Logos` frame side padding: 32 for MSA V2, 16 for the ranked cluster.\n  const rowPaddingX = ranked ? 16 : 32\n\n  return (\n    <Stack sx={{ pt: 8, px: 16, width: '100%', ...sx }}>\n      <Stack\n        sx={{\n          alignItems: 'center',\n          background: background ?? undefined,\n          bgcolor: background ? undefined : 'background.paper',\n          borderRadius: '8px',\n          gap: 12,\n          // Card (Figma `Wrapper`) has no horizontal padding of its own — the\n          // logo row carries its side padding (`rowPaddingX`); only vertical.\n          py: 16,\n          width: '100%',\n        }}\n      >\n        <Stack\n          sx={{\n            alignItems: 'flex-start',\n            flexDirection: 'row',\n            // Both variants use Figma's SPACE_BETWEEN (fills the row). Ranked\n            // items reserve the badge overhang (below), so this yields Figma's\n            // 26/18 side insets and ~14px visible gaps; MSA yields ~3px gaps.\n            justifyContent: 'space-between',\n            height: rowHeight,\n            px: rowPaddingX,\n            width: '100%',\n          }}\n        >\n          {logos.map((logo, index) => {\n            const tile = (\n              <LogoTile borderColor=\"divider\" shadow=\"elevation\" size={logoSize}>\n                {logo}\n              </LogoTile>\n            )\n            // Ranked: offset each tile to its exact Figma top and size the item\n            // to Figma's badge-inclusive box (72 logo + 10 left overhang + 2\n            // right = 84), with the logo pushed right by the overhang. Then\n            // SPACE_BETWEEN reproduces the 26/18 side insets and 14px gaps.\n            // Non-ranked: cascade via alignSelf in the stagger zone.\n            const positionSx = ranked\n              ? {\n                  boxSizing: 'border-box' as const,\n                  mt: RANK_TILE_OFFSETS[index % RANK_TILE_OFFSETS.length],\n                  pl: RANK_BADGE_OVERHANG.x,\n                  width: logoSize + RANK_BADGE_OVERHANG.x + 2,\n                }\n              : { alignSelf: stagger ? STAGGER_ALIGN[index % STAGGER_ALIGN.length] : 'center' }\n\n            return (\n              // Index key is fine: the caller-supplied list is static.\n              <Box\n                // eslint-disable-next-line react/no-array-index-key\n                key={index}\n                sx={positionSx}\n              >\n                {ranked ? (\n                  <Badge\n                    anchorOrigin={{ horizontal: 'left', vertical: 'top' }}\n                    aria-label={rankLabel(index + 1)}\n                    // `role=\"img\"` gives the root span a role that supports an\n                    // accessible name, so aria-label is surfaced to AT (a bare\n                    // generic span's aria-label is not announced).\n                    role=\"img\"\n                    // Hide the visible number from AT so the badge is announced\n                    // once via aria-label (\"Rank 1\"), not twice (\"Rank 1 … 1\").\n                    badgeContent={<span aria-hidden={true}>{index + 1}</span>}\n                    overlap=\"rectangular\"\n                    sx={rankBadgeSx}\n                  >\n                    {tile}\n                  </Badge>\n                ) : (\n                  tile\n                )}\n              </Box>\n            )\n          })}\n        </Stack>\n        {footer && <Box sx={{ px: 16, width: '100%' }}>{footer}</Box>}\n      </Stack>\n    </Stack>\n  )\n}\n\nexport default LogoClusterCard\n"],"mappings":";;;;;;AA8CA,IAAM,IAAA,CAAoB,MAAiB,QAAQ,CAAA,IAI7C,IAAgB;AAAA,EAAC;AAAA,EAAc;AAAA,EAAU;AAAU,GACnD,IAAe,IAIf,IAAoB;AAAA,EAAC;AAAA,EAAI;AAAA,EAAI;AAAE,GAC/B,IAAkB,KAIlB,IAAsB;AAAA,EAAE,GAAG;AAAA,EAAI,GAAG;AAAE,GAMpC,IAA8B,EAClC,qBAAqB;AAAA,EAQnB,SAAS;AAAA,EACT,QAAQ;AAAA,EACR,aAAa;AAAA,EACb,cAAc;AAAA,EACd,WAAA,CAAY,MAAiB,EAAiB,CAAK;AAAA,EACnD,OAAO;AAAA,EAGP,UAAA,CAAW,MAAiB,EAAM,WAAW,MAAM;AAAA,EACnD,YAAA,CAAa,MAAiB,EAAM,WAAW;AAAA,EAC/C,QAAQ;AAAA,EACR,UAAU;AAAA,EACV,SAAS;AAAA,EACT,WAAW,cAAc,EAAoB,CAAA,QAAS,EAAoB,CAAA;AAC5E,EACF,GAMM,IAAA,CAAmB,EACvB,YAAA,GACA,QAAA,GACA,UAAA,IAAW,IACX,OAAA,GACA,QAAA,IAAS,IACT,WAAA,IAAY,GACZ,SAAA,IAAU,IACV,IAAA,EAAA,MAC0B;AAG1B,QAAM,IAAc,KAAW,EAAc,SAAS,KAAK,IAAe,GACpE,IAAY,IAAS,IAAkB,IAAW,GAElD,IAAc,IAAS,KAAK;AAElC,SACE,gBAAA,EAAC,GAAD;AAAA,IAAO,IAAI;AAAA,MAAE,IAAI;AAAA,MAAG,IAAI;AAAA,MAAI,OAAO;AAAA,MAAQ,GAAG;AAAA,IAAG;AAAA,IAC/C,UAAA,gBAAA,EAAC,GAAD;AAAA,MACE,IAAI;AAAA,QACF,YAAY;AAAA,QACZ,YAAY,KAAc;AAAA,QAC1B,SAAS,IAAa,SAAY;AAAA,QAClC,cAAc;AAAA,QACd,KAAK;AAAA,QAGL,IAAI;AAAA,QACJ,OAAO;AAAA,MACT;AAAA,MAXF,UAAA,CAaE,gBAAA,EAAC,GAAD;AAAA,QACE,IAAI;AAAA,UACF,YAAY;AAAA,UACZ,eAAe;AAAA,UAIf,gBAAgB;AAAA,UAChB,QAAQ;AAAA,UACR,IAAI;AAAA,UACJ,OAAO;AAAA,QACT;AAAA,QAEC,UAAA,EAAM,IAAA,CAAK,GAAM,MAAU;AAC1B,gBAAM,IACJ,gBAAA,EAAC,GAAD;AAAA,YAAU,aAAY;AAAA,YAAU,QAAO;AAAA,YAAY,MAAM;AAAA,YACtD,UAAA;AAAA,UACO,CAAA,GAON,IAAa,IACf;AAAA,YACE,WAAW;AAAA,YACX,IAAI,EAAkB,IAAQ,EAAkB,MAAA;AAAA,YAChD,IAAI,EAAoB;AAAA,YACxB,OAAO,IAAW,EAAoB,IAAI;AAAA,UAC5C,IACA,EAAE,WAAW,IAAU,EAAc,IAAQ,EAAc,MAAA,IAAU,SAAS;AAElF,iBAEE,gBAAA,EAAC,GAAD;AAAA,YAGE,IAAI;AAAA,YAEH,UAAA,IACC,gBAAA,EAAC,GAAD;AAAA,cACE,cAAc;AAAA,gBAAE,YAAY;AAAA,gBAAQ,UAAU;AAAA,cAAM;AAAA,cACpD,cAAY,EAAU,IAAQ,CAAC;AAAA,cAI/B,MAAK;AAAA,cAGL,cAAc,gBAAA,EAAC,QAAD;AAAA,gBAAM,eAAa;AAAA,gBAAO,UAAA,IAAQ;AAAA,cAAQ,CAAA;AAAA,cACxD,SAAQ;AAAA,cACR,IAAI;AAAA,cAEH,UAAA;AAAA,YACI,CAAA,IAEP;AAAA,UAEC,GAtBE,CAsBF;AAAA,QAET,CAAC;AAAA,MACI,CAAA,GACN,KAAU,gBAAA,EAAC,GAAD;AAAA,QAAK,IAAI;AAAA,UAAE,IAAI;AAAA,UAAI,OAAO;AAAA,QAAO;AAAA,QAAI,UAAA;AAAA,MAAY,CAAA,CACvD;AAAA;EACF,CAAA;AAEX"}

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

@@ -0,0 +1,31 @@
+import { ReactNode } from 'react';
+import { SxProps } from '@mui/material/styles';
+interface LogoTileProps {
+    /** Logo/brand visual (arbitrary children). */
+    children: ReactNode;
+    /** Square size in px. */
+    size?: number;
+    /** Surface color token. */
+    bgcolor?: string;
+    /** Border color token. */
+    borderColor?: string;
+    /**
+     * Drop-shadow: `'offset'`/`true` = hard bottom-right (merchant, P2P);
+     * `'elevation'` = soft `0 2px 8px`; `false` (default) = none.
+     */
+    shadow?: boolean | 'offset' | 'elevation';
+    /**
+     * Reserve layout space for the offset shadow (margin = shadow offset) so a
+     * sibling flex `gap` clears it. Default true; ignored unless shadow is offset.
+     */
+    reserveShadowSpace?: boolean;
+    sx?: SxProps;
+}
+/**
+ * The shared rounded brand/logo tile primitive (MerchantHighlightCard,
+ * P2PLogoStack, LogoClusterCard): fixed square, 1px border, optional shadow.
+ * Named `LogoTile` (not `MerchantLogo`) to avoid colliding with MXUI's
+ * `MerchantLogo` export.
+ */
+declare const LogoTile: ({ bgcolor, borderColor, children, reserveShadowSpace, shadow, size, sx, }: LogoTileProps) => import("react/jsx-runtime").JSX.Element;
+export default LogoTile;

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

@@ -0,0 +1,34 @@
+import { LOGO_SHADOW_OFFSET as r, getLogoElevation as s, getLogoShadow as x } from "./logoShadow.es.js";
+import { jsx as d } from "react/jsx-runtime";
+import m from "@mui/material/Box";
+var b = ({ bgcolor: i = "background.paper", borderColor: n = "common.white", children: a, reserveShadowSpace: f = !0, shadow: o = !1, size: e = 64, sx: l }) => {
+  const t = o === !0 || o === "offset";
+  return /* @__PURE__ */ d(m, {
+    sx: {
+      alignItems: "center",
+      bgcolor: i,
+      borderRadius: "8px",
+      display: "flex",
+      flexShrink: 0,
+      height: e,
+      justifyContent: "center",
+      overflow: "hidden",
+      width: e,
+      border: "1px solid",
+      borderColor: n,
+      ...t && { boxShadow: x },
+      ...o === "elevation" && { boxShadow: s },
+      ...t && f && {
+        mr: `${r.x}px`,
+        mb: `${r.y}px`
+      },
+      ...l
+    },
+    children: a
+  });
+};
+export {
+  b as default
+};
+
+//# sourceMappingURL=LogoTile.es.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"LogoTile.es.js","names":[],"sources":["../../../src/insights-v2/components/LogoTile.tsx"],"sourcesContent":["import type { ReactNode } from 'react'\n\nimport Box from '@mui/material/Box'\nimport type { SxProps } from '@mui/material/styles'\n\nimport { getLogoElevation, getLogoShadow, LOGO_SHADOW_OFFSET } from './logoShadow'\n\ninterface LogoTileProps {\n  /** Logo/brand visual (arbitrary children). */\n  children: ReactNode\n  /** Square size in px. */\n  size?: number\n  /** Surface color token. */\n  bgcolor?: string\n  /** Border color token. */\n  borderColor?: string\n  /**\n   * Drop-shadow: `'offset'`/`true` = hard bottom-right (merchant, P2P);\n   * `'elevation'` = soft `0 2px 8px`; `false` (default) = none.\n   */\n  shadow?: boolean | 'offset' | 'elevation'\n  /**\n   * Reserve layout space for the offset shadow (margin = shadow offset) so a\n   * sibling flex `gap` clears it. Default true; ignored unless shadow is offset.\n   */\n  reserveShadowSpace?: boolean\n  sx?: SxProps\n}\n\n/**\n * The shared rounded brand/logo tile primitive (MerchantHighlightCard,\n * P2PLogoStack, LogoClusterCard): fixed square, 1px border, optional shadow.\n * Named `LogoTile` (not `MerchantLogo`) to avoid colliding with MXUI's\n * `MerchantLogo` export.\n */\nconst LogoTile = ({\n  bgcolor = 'background.paper',\n  borderColor = 'common.white',\n  children,\n  reserveShadowSpace = true,\n  shadow = false,\n  size = 64,\n  sx,\n}: LogoTileProps) => {\n  const isOffset = shadow === true || shadow === 'offset'\n  const isElevation = shadow === 'elevation'\n\n  return (\n    <Box\n      sx={{\n        alignItems: 'center',\n        bgcolor,\n        borderRadius: '8px',\n        display: 'flex',\n        flexShrink: 0,\n        height: size,\n        justifyContent: 'center',\n        overflow: 'hidden',\n        width: size,\n        border: '1px solid',\n        borderColor,\n        ...(isOffset && { boxShadow: getLogoShadow }),\n        ...(isElevation && { boxShadow: getLogoElevation }),\n        // The offset box-shadow paints outside the box; reserve its footprint so\n        // a flex gap starts from the shadow's outer edge, not the tile border.\n        // (The soft elevation shadow is symmetric and needs no reservation.)\n        ...(isOffset &&\n          reserveShadowSpace && {\n            mr: `${LOGO_SHADOW_OFFSET.x}px`,\n            mb: `${LOGO_SHADOW_OFFSET.y}px`,\n          }),\n        ...sx,\n      }}\n    >\n      {children}\n    </Box>\n  )\n}\n\nexport default LogoTile\n"],"mappings":";;;AAmCA,IAAM,IAAA,CAAY,EAChB,SAAA,IAAU,oBACV,aAAA,IAAc,gBACd,UAAA,GACA,oBAAA,IAAqB,IACrB,QAAA,IAAS,IACT,MAAA,IAAO,IACP,IAAA,EAAA,MACmB;AACnB,QAAM,IAAW,MAAW,MAAQ,MAAW;AAG/C,SACE,gBAAA,EAAC,GAAD;AAAA,IACE,IAAI;AAAA,MACF,YAAY;AAAA,MACZ,SAAA;AAAA,MACA,cAAc;AAAA,MACd,SAAS;AAAA,MACT,YAAY;AAAA,MACZ,QAAQ;AAAA,MACR,gBAAgB;AAAA,MAChB,UAAU;AAAA,MACV,OAAO;AAAA,MACP,QAAQ;AAAA,MACR,aAAA;AAAA,MACA,GAAI,KAAY,EAAE,WAAW,EAAc;AAAA,MAC3C,GAjBc,MAAW,eAiBN,EAAE,WAAW,EAAiB;AAAA,MAIjD,GAAI,KACF,KAAsB;AAAA,QACpB,IAAI,GAAG,EAAmB,CAAA;AAAA,QAC1B,IAAI,GAAG,EAAmB,CAAA;AAAA,MAC5B;AAAA,MACF,GAAG;AAAA,IACL;AAAA,IAEC,UAAA;AAAA,EACE,CAAA;AAET"}

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

@@ -0,0 +1,34 @@
+import { ReactNode } from 'react';
+import { SxProps } from '@mui/material/styles';
+interface MerchantHighlightCardProps {
+    /** Brand/merchant logo visual (rendered inside a `LogoTile`). */
+    logo: ReactNode;
+    /** Merchant/payee name. */
+    name: ReactNode;
+    /** Optional label above the name (e.g. "{Date}"). */
+    eyebrow?: ReactNode;
+    /** Amount. Rendered as a dark pill when `amountVariant='pill'`, else plain. */
+    amount?: ReactNode;
+    /** How to render the amount. */
+    amountVariant?: 'pill' | 'text';
+    /** Typography variant for the name. Defaults to `h2` for `pill`, else `h3`. */
+    nameVariant?: 'h2' | 'h3';
+    /** Trailing element beneath the name (e.g. a `<StatusPill>`); replaces `amount`. */
+    trailing?: ReactNode;
+    /** Card surface color token. */
+    bgcolor?: string;
+    /** CSS background (e.g. a gradient) for the card surface; overrides `bgcolor`. */
+    background?: string;
+    /** Card border color token (e.g. New Merchant's tinted card). */
+    borderColor?: string;
+    /** Render the logo's drop-shadow. Default true; false for MSA V2's Visual. */
+    logoShadow?: boolean;
+    sx?: SxProps;
+}
+/**
+ * A merchant/brand highlight card: a `LogoTile` beside a text column (optional
+ * eyebrow, name, amount/trailing). Shared by Peer-to-Peer Categorization, New
+ * Merchant, and Monthly Subscription Aggregate V2's Visual state.
+ */
+declare const MerchantHighlightCard: ({ amount, amountVariant, background, bgcolor, borderColor, eyebrow, logo, logoShadow, name, nameVariant, trailing, sx, }: MerchantHighlightCardProps) => import("react/jsx-runtime").JSX.Element;
+export default MerchantHighlightCard;

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

@@ -0,0 +1,64 @@
+import v from "./AmountPill.es.js";
+import w from "./LogoTile.es.js";
+import i from "@mui/material/Stack";
+import { Text as l } from "@mxenabled/mxui";
+import { jsx as r, jsxs as c } from "react/jsx-runtime";
+var A = ({ amount: t, amountVariant: o = "text", background: n, bgcolor: h = "grey.200", borderColor: d, eyebrow: a, logo: p, logoShadow: s = !0, name: x, nameVariant: m, trailing: u, sx: f }) => {
+  const g = m ?? (o === "pill" ? "h2" : "h3");
+  let e = u;
+  return e == null && t != null && (e = o === "pill" ? /* @__PURE__ */ r(v, { children: t }) : /* @__PURE__ */ r(l, {
+    color: "text.secondary",
+    variant: "body1",
+    children: t
+  })), /* @__PURE__ */ r(i, {
+    sx: {
+      px: 16,
+      width: "100%",
+      ...f
+    },
+    children: /* @__PURE__ */ c(i, {
+      sx: {
+        alignItems: "center",
+        ...n ? { background: n } : { bgcolor: h },
+        ...d && {
+          border: "1px solid",
+          borderColor: d
+        },
+        borderRadius: "8px",
+        flexDirection: "row",
+        gap: 16,
+        p: 16,
+        width: "100%"
+      },
+      children: [/* @__PURE__ */ r(w, {
+        shadow: s,
+        children: p
+      }), /* @__PURE__ */ c(i, {
+        sx: {
+          gap: 2,
+          minWidth: 0
+        },
+        children: [
+          a && /* @__PURE__ */ r(l, {
+            color: "text.secondary",
+            truncate: !0,
+            variant: "caption",
+            children: a
+          }),
+          /* @__PURE__ */ r(l, {
+            bold: !0,
+            truncate: !0,
+            variant: g,
+            children: x
+          }),
+          e
+        ]
+      })]
+    })
+  });
+};
+export {
+  A as default
+};
+
+//# sourceMappingURL=MerchantHighlightCard.es.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"MerchantHighlightCard.es.js","names":[],"sources":["../../../src/insights-v2/components/MerchantHighlightCard.tsx"],"sourcesContent":["import type { ReactNode } from 'react'\n\nimport Stack from '@mui/material/Stack'\nimport type { SxProps } from '@mui/material/styles'\n\nimport { Text } from '@mxenabled/mxui'\n\nimport AmountPill from './AmountPill'\nimport LogoTile from './LogoTile'\n\ninterface MerchantHighlightCardProps {\n  /** Brand/merchant logo visual (rendered inside a `LogoTile`). */\n  logo: ReactNode\n  /** Merchant/payee name. */\n  name: ReactNode\n  /** Optional label above the name (e.g. \"{Date}\"). */\n  eyebrow?: ReactNode\n  /** Amount. Rendered as a dark pill when `amountVariant='pill'`, else plain. */\n  amount?: ReactNode\n  /** How to render the amount. */\n  amountVariant?: 'pill' | 'text'\n  /** Typography variant for the name. Defaults to `h2` for `pill`, else `h3`. */\n  nameVariant?: 'h2' | 'h3'\n  /** Trailing element beneath the name (e.g. a `<StatusPill>`); replaces `amount`. */\n  trailing?: ReactNode\n  /** Card surface color token. */\n  bgcolor?: string\n  /** CSS background (e.g. a gradient) for the card surface; overrides `bgcolor`. */\n  background?: string\n  /** Card border color token (e.g. New Merchant's tinted card). */\n  borderColor?: string\n  /** Render the logo's drop-shadow. Default true; false for MSA V2's Visual. */\n  logoShadow?: boolean\n  sx?: SxProps\n}\n\n/**\n * A merchant/brand highlight card: a `LogoTile` beside a text column (optional\n * eyebrow, name, amount/trailing). Shared by Peer-to-Peer Categorization, New\n * Merchant, and Monthly Subscription Aggregate V2's Visual state.\n */\nconst MerchantHighlightCard = ({\n  amount,\n  amountVariant = 'text',\n  background,\n  bgcolor = 'grey.200',\n  borderColor,\n  eyebrow,\n  logo,\n  logoShadow = true,\n  name,\n  nameVariant,\n  trailing,\n  sx,\n}: MerchantHighlightCardProps) => {\n  const resolvedNameVariant = nameVariant ?? (amountVariant === 'pill' ? 'h2' : 'h3')\n\n  // `trailing` (e.g. a StatusPill) takes the amount's slot when provided;\n  // otherwise render the amount as a dark pill or plain text.\n  let amountNode: ReactNode = trailing\n  if (amountNode == null && amount != null) {\n    amountNode =\n      amountVariant === 'pill' ? (\n        <AmountPill>{amount}</AmountPill>\n      ) : (\n        <Text color=\"text.secondary\" variant=\"body1\">\n          {amount}\n        </Text>\n      )\n  }\n\n  return (\n    <Stack sx={{ px: 16, width: '100%', ...sx }}>\n      <Stack\n        sx={{\n          alignItems: 'center',\n          ...(background ? { background } : { bgcolor }),\n          ...(borderColor && { border: '1px solid', borderColor }),\n          borderRadius: '8px',\n          flexDirection: 'row',\n          gap: 16,\n          p: 16,\n          width: '100%',\n        }}\n      >\n        <LogoTile shadow={logoShadow}>{logo}</LogoTile>\n        <Stack sx={{ gap: 2, minWidth: 0 }}>\n          {eyebrow && (\n            <Text color=\"text.secondary\" truncate={true} variant=\"caption\">\n              {eyebrow}\n            </Text>\n          )}\n          <Text bold={true} truncate={true} variant={resolvedNameVariant}>\n            {name}\n          </Text>\n          {amountNode}\n        </Stack>\n      </Stack>\n    </Stack>\n  )\n}\n\nexport default MerchantHighlightCard\n"],"mappings":";;;;;AAyCA,IAAM,IAAA,CAAyB,EAC7B,QAAA,GACA,eAAA,IAAgB,QAChB,YAAA,GACA,SAAA,IAAU,YACV,aAAA,GACA,SAAA,GACA,MAAA,GACA,YAAA,IAAa,IACb,MAAA,GACA,aAAA,GACA,UAAA,GACA,IAAA,EAAA,MACgC;AAChC,QAAM,IAAsB,MAAgB,MAAkB,SAAS,OAAO;AAI9E,MAAI,IAAwB;AAC5B,SAAI,KAAc,QAAQ,KAAU,SAClC,IACE,MAAkB,SAChB,gBAAA,EAAC,GAAD,EAAA,UAAa,EAAmB,CAAA,IAEhC,gBAAA,EAAC,GAAD;AAAA,IAAM,OAAM;AAAA,IAAiB,SAAQ;AAAA,IAClC,UAAA;AAAA,EACG,CAAA,IAKV,gBAAA,EAAC,GAAD;AAAA,IAAO,IAAI;AAAA,MAAE,IAAI;AAAA,MAAI,OAAO;AAAA,MAAQ,GAAG;AAAA,IAAG;AAAA,IACxC,UAAA,gBAAA,EAAC,GAAD;AAAA,MACE,IAAI;AAAA,QACF,YAAY;AAAA,QACZ,GAAI,IAAa,EAAE,YAAA,EAAW,IAAI,EAAE,SAAA,EAAQ;AAAA,QAC5C,GAAI,KAAe;AAAA,UAAE,QAAQ;AAAA,UAAa,aAAA;AAAA,QAAY;AAAA,QACtD,cAAc;AAAA,QACd,eAAe;AAAA,QACf,KAAK;AAAA,QACL,GAAG;AAAA,QACH,OAAO;AAAA,MACT;AAAA,MAVF,UAAA,CAYE,gBAAA,EAAC,GAAD;AAAA,QAAU,QAAQ;AAAA,QAAa,UAAA;AAAA,MAAe,CAAA,GAC9C,gBAAA,EAAC,GAAD;AAAA,QAAO,IAAI;AAAA,UAAE,KAAK;AAAA,UAAG,UAAU;AAAA,QAAE;AAAA,QAAjC,UAAA;AAAA,UACG,KACC,gBAAA,EAAC,GAAD;AAAA,YAAM,OAAM;AAAA,YAAiB,UAAU;AAAA,YAAM,SAAQ;AAAA,YAClD,UAAA;AAAA,UACG,CAAA;AAAA,UAER,gBAAA,EAAC,GAAD;AAAA,YAAM,MAAM;AAAA,YAAM,UAAU;AAAA,YAAM,SAAS;AAAA,YACxC,UAAA;AAAA,UACG,CAAA;AAAA,UACL;AAAA,QACI;AAAA,MACF,CAAA,CAAA;AAAA;EACF,CAAA;AAEX"}

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

@@ -0,0 +1,32 @@
+import { ReactNode } from 'react';
+import { SxProps } from '@mui/material/styles';
+interface P2PLogoStackProps {
+    /** Brand/merchant logo visuals (rendered as shadowed, cascading tiles). */
+    logos: ReactNode[];
+    /**
+     * Total number of merchants. When it exceeds the rendered logos, the last
+     * tile becomes a "+N" more indicator. Defaults to `logos.length`.
+     */
+    total?: number;
+    /** Logo tile size in px (Figma: 64). */
+    size?: number;
+    /**
+     * Fixed height of the cascading row in px (Figma `Logos` frame: 106). Gives
+     * the staircase `mt` offsets room without collapsing.
+     */
+    rowHeight?: number;
+    /**
+     * Optional status element rendered below the logos (Figma: the full-width
+     * "Categorized" `<StatusPill>` in P2P's categorized state). Pass a
+     * `<StatusPill sx={{ alignSelf: 'stretch', justifyContent: 'center' }} />`.
+     */
+    status?: ReactNode;
+    sx?: SxProps;
+}
+/**
+ * A cascading row of shadowed brand tiles with an optional "+N" overflow tile
+ * (Peer-to-Peer Categorization). Layout math ported locally from v1
+ * `shared/P2P/P2PMultipleCategorization`.
+ */
+declare const P2PLogoStack: ({ logos, rowHeight, size, status, total, sx, }: P2PLogoStackProps) => import("react/jsx-runtime").JSX.Element;
+export default P2PLogoStack;

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

@@ -0,0 +1,55 @@
+import u from "./LogoTile.es.js";
+import i from "@mui/material/Stack";
+import { Text as w } from "@mxenabled/mxui";
+import { jsx as S, jsxs as c } from "react/jsx-runtime";
+var v = {
+  2: [0, 36],
+  3: [
+    0,
+    18,
+    36
+  ],
+  4: [
+    0,
+    12,
+    24,
+    36
+  ]
+}, j = ({ logos: o, rowHeight: l = 106, size: h = 64, status: m, total: p, sx: f }) => {
+  const n = p ?? o.length, t = n >= 4, r = t ? o.slice(0, 3) : o.slice(0, 4), d = v[t ? 4 : Math.min(Math.max(r.length, 2), 3)], g = t ? r.length + 1 : r.length, s = (a, e, x) => /* @__PURE__ */ S(u, {
+    bgcolor: x,
+    borderColor: "background.paper",
+    reserveShadowSpace: e === g - 1,
+    shadow: !0,
+    size: h,
+    sx: { mt: `${d?.[e] ?? 0}px` },
+    children: a
+  }, e);
+  return /* @__PURE__ */ c(i, {
+    sx: {
+      gap: 12,
+      width: "100%",
+      ...f
+    },
+    children: [/* @__PURE__ */ c(i, {
+      sx: {
+        flexDirection: "row",
+        gap: t ? 8 : 24,
+        height: l,
+        justifyContent: t ? "flex-start" : "center"
+      },
+      children: [r.map((a, e) => s(a, e, "background.paper")), t && s(/* @__PURE__ */ c(w, {
+        "aria-label": `+${n - 3} more`,
+        component: "span",
+        sx: { color: "common.white" },
+        variant: "h3",
+        children: ["+", n - 3]
+      }), 3, "grey.800")]
+    }), m]
+  });
+};
+export {
+  j as default
+};
+
+//# sourceMappingURL=P2PLogoStack.es.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"P2PLogoStack.es.js","names":[],"sources":["../../../src/insights-v2/components/P2PLogoStack.tsx"],"sourcesContent":["import type { ReactNode } from 'react'\n\nimport Stack from '@mui/material/Stack'\nimport type { SxProps } from '@mui/material/styles'\n\nimport { Text } from '@mxenabled/mxui'\n\nimport LogoTile from './LogoTile'\n\ninterface P2PLogoStackProps {\n  /** Brand/merchant logo visuals (rendered as shadowed, cascading tiles). */\n  logos: ReactNode[]\n  /**\n   * Total number of merchants. When it exceeds the rendered logos, the last\n   * tile becomes a \"+N\" more indicator. Defaults to `logos.length`.\n   */\n  total?: number\n  /** Logo tile size in px (Figma: 64). */\n  size?: number\n  /**\n   * Fixed height of the cascading row in px (Figma `Logos` frame: 106). Gives\n   * the staircase `mt` offsets room without collapsing.\n   */\n  rowHeight?: number\n  /**\n   * Optional status element rendered below the logos (Figma: the full-width\n   * \"Categorized\" `<StatusPill>` in P2P's categorized state). Pass a\n   * `<StatusPill sx={{ alignSelf: 'stretch', justifyContent: 'center' }} />`.\n   */\n  status?: ReactNode\n  sx?: SxProps\n}\n\n// Vertical offsets that produce the diagonal cascade, keyed by tile count.\n// Mirrors the shared P2PMultipleCategorization layout.\nconst MT_OFFSETS: Record<number, number[]> = {\n  2: [0, 36],\n  3: [0, 18, 36],\n  4: [0, 12, 24, 36],\n}\n\n/**\n * A cascading row of shadowed brand tiles with an optional \"+N\" overflow tile\n * (Peer-to-Peer Categorization). Layout math ported locally from v1\n * `shared/P2P/P2PMultipleCategorization`.\n */\nconst P2PLogoStack = ({\n  logos,\n  rowHeight = 106,\n  size = 64,\n  status,\n  total,\n  sx,\n}: P2PLogoStackProps) => {\n  const merchantCount = total ?? logos.length\n  // At 4+ merchants Figma shows 3 logos + a \"+N\" overflow tile (so exactly 4\n  // renders as 3 + \"+1\"); below 4, all logos show. Mirrors v1.\n  const hasOverflow = merchantCount >= 4\n  const tiles = hasOverflow ? logos.slice(0, 3) : logos.slice(0, 4)\n  const offsets = MT_OFFSETS[hasOverflow ? 4 : Math.min(Math.max(tiles.length, 2), 3)]\n  // Total tiles actually rendered (logos, or 3 logos + the \"+N\" tile).\n  const tileCount = hasOverflow ? tiles.length + 1 : tiles.length\n\n  // The offset shadow takes no layout space, so interior tiles' shadows fall in\n  // the row `gap`; only the LAST tile reserves its shadow footprint, else it\n  // overlaps the card padding. (Index key is fine: the list is static.)\n  const renderTile = (content: ReactNode, index: number, bgcolor: string) => (\n    <LogoTile\n      // eslint-disable-next-line react/no-array-index-key\n      key={index}\n      bgcolor={bgcolor}\n      borderColor=\"background.paper\"\n      reserveShadowSpace={index === tileCount - 1}\n      shadow={true}\n      size={size}\n      sx={{ mt: `${offsets?.[index] ?? 0}px` }}\n    >\n      {content}\n    </LogoTile>\n  )\n\n  return (\n    <Stack sx={{ gap: 12, width: '100%', ...sx }}>\n      {/* Fixed-height row gives the `mt` staircase room to cascade. */}\n      <Stack\n        sx={{\n          flexDirection: 'row',\n          gap: hasOverflow ? 8 : 24,\n          height: rowHeight,\n          justifyContent: hasOverflow ? 'flex-start' : 'center',\n        }}\n      >\n        {tiles.map((logo, index) => renderTile(logo, index, 'background.paper'))}\n        {hasOverflow &&\n          renderTile(\n            // h3-sized span, not a semantic heading, inside a decorative tile.\n            <Text\n              aria-label={`+${merchantCount - 3} more`}\n              component=\"span\"\n              sx={{ color: 'common.white' }}\n              variant=\"h3\"\n            >\n              +{merchantCount - 3}\n            </Text>,\n            3,\n            'grey.800',\n          )}\n      </Stack>\n      {status}\n    </Stack>\n  )\n}\n\nexport default P2PLogoStack\n"],"mappings":";;;;AAmCA,IAAM,IAAuC;AAAA,EAC3C,GAAG,CAAC,GAAG,EAAE;AAAA,EACT,GAAG;AAAA,IAAC;AAAA,IAAG;AAAA,IAAI;AAAA,EAAE;AAAA,EACb,GAAG;AAAA,IAAC;AAAA,IAAG;AAAA,IAAI;AAAA,IAAI;AAAA,EAAE;AACnB,GAOM,IAAA,CAAgB,EACpB,OAAA,GACA,WAAA,IAAY,KACZ,MAAA,IAAO,IACP,QAAA,GACA,OAAA,GACA,IAAA,EAAA,MACuB;AACvB,QAAM,IAAgB,KAAS,EAAM,QAG/B,IAAc,KAAiB,GAC/B,IAAQ,IAAc,EAAM,MAAM,GAAG,CAAC,IAAI,EAAM,MAAM,GAAG,CAAC,GAC1D,IAAU,EAAW,IAAc,IAAI,KAAK,IAAI,KAAK,IAAI,EAAM,QAAQ,CAAC,GAAG,CAAC,CAAA,GAE5E,IAAY,IAAc,EAAM,SAAS,IAAI,EAAM,QAKnD,IAAA,CAAc,GAAoB,GAAe,MACrD,gBAAA,EAAC,GAAD;AAAA,IAGW,SAAA;AAAA,IACT,aAAY;AAAA,IACZ,oBAAoB,MAAU,IAAY;AAAA,IAC1C,QAAQ;AAAA,IACF,MAAA;AAAA,IACN,IAAI,EAAE,IAAI,GAAG,IAAU,CAAA,KAAU,CAAA,KAAM;AAAA,IAEtC,UAAA;AAAA,EACO,GATH,CASG;AAGZ,SACE,gBAAA,EAAC,GAAD;AAAA,IAAO,IAAI;AAAA,MAAE,KAAK;AAAA,MAAI,OAAO;AAAA,MAAQ,GAAG;AAAA,IAAG;AAAA,IAA3C,UAAA,CAEE,gBAAA,EAAC,GAAD;AAAA,MACE,IAAI;AAAA,QACF,eAAe;AAAA,QACf,KAAK,IAAc,IAAI;AAAA,QACvB,QAAQ;AAAA,QACR,gBAAgB,IAAc,eAAe;AAAA,MAC/C;AAAA,MANF,UAAA,CAQG,EAAM,IAAA,CAAK,GAAM,MAAU,EAAW,GAAM,GAAO,kBAAkB,CAAC,GACtE,KACC,EAEE,gBAAA,EAAC,GAAD;AAAA,QACE,cAAY,IAAI,IAAgB,CAAA;AAAA,QAChC,WAAU;AAAA,QACV,IAAI,EAAE,OAAO,eAAe;AAAA,QAC5B,SAAQ;AAAA,QAJV,UAAA,CAKC,KACG,IAAgB,CACd;AAAA,MACN,CAAA,GAAA,GACA,UACF,CACG;AAAA,IACN,CAAA,GAAA,CACI;AAAA;AAEX"}

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

@@ -0,0 +1,27 @@
+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). */
+    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;
+export default SaveAnExtraCard;

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

@@ -0,0 +1,57 @@
+import { getLogoElevation as x } from "./logoShadow.es.js";
+import { Text as r } from "@mxenabled/mxui";
+import { jsx as e, jsxs as o } 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, {
+    sx: {
+      bgcolor: d,
+      color: "success.contrastText",
+      p: 16,
+      pt: 12,
+      textAlign: "center"
+    },
+    children: [
+      /* @__PURE__ */ e(r, {
+        variant: "subtitle1",
+        children: i
+      }),
+      /* @__PURE__ */ e(r, {
+        variant: "h1",
+        children: n
+      }),
+      /* @__PURE__ */ e(r, {
+        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
+    })]
+  })]
+});
+export {
+  u as default
+};
+
+//# sourceMappingURL=SaveAnExtraCard.es.js.map

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

@@ -0,0 +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"}

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

@@ -0,0 +1,18 @@
+import { SxProps, Theme } from '@mui/material/styles';
+interface SavingsOpportunityCardProps {
+    amount: string;
+    label: string;
+    /** Whether to render the green gradient slot behind the coupon. Default true. */
+    slot?: boolean;
+    sx?: SxProps<Theme>;
+}
+/**
+ * Savings Opportunity V2 content: a coupon (green wallet tile + perforation +
+ * amount) on a green gradient slot. Ported from the v1 `Coupon` component
+ * (`src/insights/components/shared/Coupon.tsx`) and adapted to the v2 theme.
+ *
+ * Figma: Savings Opportunity V2 Content (Full variant, coupon-style).
+ * Scope is the Content section only.
+ */
+declare const SavingsOpportunityCard: ({ amount, label, slot, sx, }: SavingsOpportunityCardProps) => import("react/jsx-runtime").JSX.Element;
+export default SavingsOpportunityCard;

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

@@ -0,0 +1,71 @@
+import { ReactComponent as m } from "./shared/images/SavingsOpportunityLeft.es.js";
+import { ReactComponent as u } from "./shared/images/SavingsOpportunityLeftDark.es.js";
+import { ReactComponent as h } from "./shared/images/SavingsOpportunityPerforation.es.js";
+import t from "@mui/material/Stack";
+import { Text as i } from "@mxenabled/mxui";
+import { jsx as r, jsxs as n } from "react/jsx-runtime";
+import { alpha as o, useTheme as f } from "@mui/material/styles";
+import g from "@mui/material/Box";
+var p = 0.75, j = ({ amount: d, label: c, slot: a = !0, sx: s }) => {
+  const e = f(), l = `linear-gradient(90deg, ${o(e.palette.success.main, p)}, ${o(e.palette.success.light, p)})`;
+  return /* @__PURE__ */ r(g, {
+    sx: {
+      backgroundImage: a ? l : void 0,
+      bgcolor: a ? "background.paper" : "transparent",
+      p: 16,
+      ...s
+    },
+    children: /* @__PURE__ */ n(t, {
+      sx: {
+        flexDirection: "row",
+        justifyContent: "center"
+      },
+      children: [
+        /* @__PURE__ */ r(t, {
+          sx: {
+            bgcolor: "background.paper",
+            borderBottomLeftRadius: "8px",
+            borderTopLeftRadius: "8px",
+            p: 4,
+            pr: 2
+          },
+          children: e.palette.mode === "dark" ? /* @__PURE__ */ r(u, { "aria-hidden": !0 }) : /* @__PURE__ */ r(m, { "aria-hidden": !0 })
+        }),
+        /* @__PURE__ */ r(t, {
+          sx: { svg: {
+            path: {
+              "&:not([stroke])": { fill: e.palette.background.paper },
+              "&[stroke]": { stroke: o(e.palette.divider, 0.24) }
+            },
+            rect: { fill: e.palette.background.paper }
+          } },
+          children: /* @__PURE__ */ r(h, { "aria-hidden": !0 })
+        }),
+        /* @__PURE__ */ n(t, {
+          sx: {
+            bgcolor: "background.paper",
+            borderBottomRightRadius: "12px",
+            borderTopRightRadius: "12px",
+            height: 74,
+            justifyContent: "center",
+            px: 12,
+            width: 216
+          },
+          children: [/* @__PURE__ */ r(i, {
+            color: "text.secondary",
+            variant: "caption",
+            children: c
+          }), /* @__PURE__ */ r(i, {
+            variant: "h1",
+            children: d
+          })]
+        })
+      ]
+    })
+  });
+};
+export {
+  j as default
+};
+
+//# sourceMappingURL=SavingsOpportunityCard.es.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"SavingsOpportunityCard.es.js","names":[],"sources":["../../../src/insights-v2/components/SavingsOpportunityCard.tsx"],"sourcesContent":["import Box from '@mui/material/Box'\nimport Stack from '@mui/material/Stack'\nimport { alpha, type SxProps, type Theme, useTheme } from '@mui/material/styles'\n\nimport { Text } from '@mxenabled/mxui'\n\nimport { ReactComponent as Left } from './shared/images/SavingsOpportunityLeft.svg'\nimport { ReactComponent as LeftDark } from './shared/images/SavingsOpportunityLeftDark.svg'\nimport { ReactComponent as Perforation } from './shared/images/SavingsOpportunityPerforation.svg'\n\n/**\n * Figma slot: a white base layered with a `success.main → success.light` linear\n * gradient at 75% opacity (a green wash left-to-right). Both tokens are\n * theme-aware so the tint flips for dark mode. Matches the \"backgroundImage over\n * bgcolor\" pattern used across the insights-v2 Content components.\n */\nconst SLOT_GRADIENT_OPACITY = 0.75\n\ninterface SavingsOpportunityCardProps {\n  amount: string\n  label: string\n  /** Whether to render the green gradient slot behind the coupon. Default true. */\n  slot?: boolean\n  sx?: SxProps<Theme>\n}\n\n/**\n * Savings Opportunity V2 content: a coupon (green wallet tile + perforation +\n * amount) on a green gradient slot. Ported from the v1 `Coupon` component\n * (`src/insights/components/shared/Coupon.tsx`) and adapted to the v2 theme.\n *\n * Figma: Savings Opportunity V2 Content (Full variant, coupon-style).\n * Scope is the Content section only.\n */\nconst SavingsOpportunityCard = ({\n  amount,\n  label,\n  slot = true,\n  sx,\n}: SavingsOpportunityCardProps) => {\n  const theme = useTheme()\n  const slotBackground = `linear-gradient(90deg, ${alpha(\n    theme.palette.success.main,\n    SLOT_GRADIENT_OPACITY,\n  )}, ${alpha(theme.palette.success.light, SLOT_GRADIENT_OPACITY)})`\n\n  return (\n    <Box\n      sx={{\n        backgroundImage: slot ? slotBackground : undefined,\n        bgcolor: slot ? 'background.paper' : 'transparent',\n        p: 16,\n        ...sx,\n      }}\n    >\n      <Stack sx={{ flexDirection: 'row', justifyContent: 'center' }}>\n        <Stack\n          sx={{\n            bgcolor: 'background.paper',\n            borderBottomLeftRadius: '8px',\n            borderTopLeftRadius: '8px',\n            p: 4,\n            pr: 2,\n          }}\n        >\n          {theme.palette.mode === 'dark' ? (\n            <LeftDark aria-hidden={true} />\n          ) : (\n            <Left aria-hidden={true} />\n          )}\n        </Stack>\n        <Stack\n          sx={{\n            svg: {\n              path: {\n                '&:not([stroke])': {\n                  fill: theme.palette.background.paper,\n                },\n                '&[stroke]': {\n                  stroke: alpha(theme.palette.divider, 0.24),\n                },\n              },\n              rect: {\n                fill: theme.palette.background.paper,\n              },\n            },\n          }}\n        >\n          <Perforation aria-hidden={true} />\n        </Stack>\n        <Stack\n          sx={{\n            bgcolor: 'background.paper',\n            borderBottomRightRadius: '12px',\n            borderTopRightRadius: '12px',\n            height: 74,\n            justifyContent: 'center',\n            px: 12,\n            width: 216,\n          }}\n        >\n          <Text color=\"text.secondary\" variant=\"caption\">\n            {label}\n          </Text>\n          <Text variant=\"h1\">{amount}</Text>\n        </Stack>\n      </Stack>\n    </Box>\n  )\n}\n\nexport default SavingsOpportunityCard\n"],"mappings":";;;;;;;;AAgBA,IAAM,IAAwB,MAkBxB,IAAA,CAA0B,EAC9B,QAAA,GACA,OAAA,GACA,MAAA,IAAO,IACP,IAAA,EAAA,MACiC;AACjC,QAAM,IAAQ,EAAS,GACjB,IAAiB,0BAA0B,EAC/C,EAAM,QAAQ,QAAQ,MACtB,CACF,CAAA,KAAM,EAAM,EAAM,QAAQ,QAAQ,OAAO,CAAqB,CAAA;AAE9D,SACE,gBAAA,EAAC,GAAD;AAAA,IACE,IAAI;AAAA,MACF,iBAAiB,IAAO,IAAiB;AAAA,MACzC,SAAS,IAAO,qBAAqB;AAAA,MACrC,GAAG;AAAA,MACH,GAAG;AAAA,IACL;AAAA,IAEA,UAAA,gBAAA,EAAC,GAAD;AAAA,MAAO,IAAI;AAAA,QAAE,eAAe;AAAA,QAAO,gBAAgB;AAAA,MAAS;AAAA,MAA5D,UAAA;AAAA,QACE,gBAAA,EAAC,GAAD;AAAA,UACE,IAAI;AAAA,YACF,SAAS;AAAA,YACT,wBAAwB;AAAA,YACxB,qBAAqB;AAAA,YACrB,GAAG;AAAA,YACH,IAAI;AAAA,UACN;AAAA,UAEC,UAAA,EAAM,QAAQ,SAAS,SACtB,gBAAA,EAAC,GAAD,EAAU,eAAa,GAAO,CAAA,IAE9B,gBAAA,EAAC,GAAD,EAAM,eAAa,GAAO,CAAA;AAAA,QAEvB,CAAA;AAAA,QACP,gBAAA,EAAC,GAAD;AAAA,UACE,IAAI,EACF,KAAK;AAAA,YACH,MAAM;AAAA,cACJ,mBAAmB,EACjB,MAAM,EAAM,QAAQ,WAAW,MACjC;AAAA,cACA,aAAa,EACX,QAAQ,EAAM,EAAM,QAAQ,SAAS,IAAI,EAC3C;AAAA,YACF;AAAA,YACA,MAAM,EACJ,MAAM,EAAM,QAAQ,WAAW,MACjC;AAAA,UACF,EACF;AAAA,UAEA,UAAA,gBAAA,EAAC,GAAD,EAAa,eAAa,GAAO,CAAA;AAAA,QAC5B,CAAA;AAAA,QACP,gBAAA,EAAC,GAAD;AAAA,UACE,IAAI;AAAA,YACF,SAAS;AAAA,YACT,yBAAyB;AAAA,YACzB,sBAAsB;AAAA,YACtB,QAAQ;AAAA,YACR,gBAAgB;AAAA,YAChB,IAAI;AAAA,YACJ,OAAO;AAAA,UACT;AAAA,UATF,UAAA,CAWE,gBAAA,EAAC,GAAD;AAAA,YAAM,OAAM;AAAA,YAAiB,SAAQ;AAAA,YAClC,UAAA;AAAA,UACG,CAAA,GACN,gBAAA,EAAC,GAAD;AAAA,YAAM,SAAQ;AAAA,YAAM,UAAA;AAAA,UAAa,CAAA,CAC5B;AAAA;MACF;AAAA;EACJ,CAAA;AAET"}

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

@@ -0,0 +1,28 @@
+import { ReactNode } from 'react';
+import { SxProps } from '@mui/material/styles';
+interface StatusMessageCardProps {
+    /** Leading status icon (e.g. a check-circle). */
+    icon: ReactNode;
+    /** Status message. */
+    message: ReactNode;
+    /** Card surface color token. */
+    bgcolor?: string;
+    /** Card border color token. */
+    borderColor?: string;
+    /** Message text color token. */
+    messageColor?: string;
+    sx?: SxProps;
+}
+/**
+ * Single-line status/success message card: a leading icon and a bold message on
+ * a colored, bordered surface.
+ *
+ * Figma: the `All Categorized!` success state of Uncategorized Transactions V2
+ * (`Card / Content / Slot`) — green card (`success.100` bg, `success.main`
+ * border, radius 8), check-circle icon + bold message. Reusable for any
+ * icon + message status/empty state.
+ *
+ * Scope is the Content section only; Header/Description are out of scope.
+ */
+declare const StatusMessageCard: ({ bgcolor, borderColor, icon, message, messageColor, sx, }: StatusMessageCardProps) => import("react/jsx-runtime").JSX.Element;
+export default StatusMessageCard;