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

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

@@ -0,0 +1,77 @@
+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 { 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;
+  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, {
+    sx: { mb: 16 },
+    children: [
+      /* @__PURE__ */ i(C, { children: [
+        /* @__PURE__ */ r(_, {
+          isMini: d,
+          subtitle: m,
+          title: o.title
+        }),
+        a && /* @__PURE__ */ r(a, {
+          beatGuid: o.guid,
+          payload: t
+        }),
+        /* @__PURE__ */ i(n, {
+          sx: {
+            gap: 6,
+            pb: 16,
+            pl: 12,
+            pr: 16,
+            pt: 12
+          },
+          children: [/* @__PURE__ */ r("div", {
+            dangerouslySetInnerHTML: { __html: o.html_description },
+            style: { paddingLeft: 4 }
+          }), o?.in_description_cta && /* @__PURE__ */ r(e, {
+            endIcon: /* @__PURE__ */ r(k, {}),
+            onClick: () => {
+            },
+            sx: {
+              height: 24,
+              p: 4,
+              width: "max-content"
+            },
+            children: o.in_description_cta
+          })]
+        }),
+        !d && c?.label && /* @__PURE__ */ i(n, {
+          sx: {
+            gap: 8,
+            pb: 16,
+            px: 16
+          },
+          children: [/* @__PURE__ */ r(e, {
+            onClick: () => l(o.guid, "primaryCta"),
+            variant: "outlined",
+            children: c.label
+          }), s?.label && /* @__PURE__ */ r(e, {
+            color: "secondary",
+            onClick: () => l(o.guid, "secondaryCta"),
+            children: s.label
+          })]
+        })
+      ] }),
+      /* @__PURE__ */ r(x, { beat: o }),
+      t.footer && /* @__PURE__ */ r(y, { footer: t.footer })
+    ]
+  });
+};
+export {
+  A as default
+};
+
+//# sourceMappingURL=BaseLayout.es.js.map

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

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

package/dist/insights-v2/components/ComponentBlocks/DepositLogo.d.ts

@@ -0,0 +1,22 @@
+interface DepositLogoProps {
+    /** Category guid, required alongside `merchantGuid` for the merchant logo lookup. */
+    categoryGuid?: string;
+    /** Fallback mx-icons ligature glyph for the generic tile when no guid is present. */
+    iconName?: string;
+    /** Institution guid — renders an `InstitutionLogo` when present and no merchant guid. */
+    institutionGuid?: string;
+    /** Institution display name, used as the logo's alt text. */
+    institutionName?: string;
+    /** Merchant guid — renders a `MerchantLogo` when present (highest priority). */
+    merchantGuid?: string;
+    /** Merchant display name, used as the logo's alt text. */
+    merchantName?: string;
+}
+/**
+ * Logo shown in a deposit callout. Mirrors the spec's per-variant sourcing: a real
+ * merchant logo when a `merchantGuid` is sent (Payroll, Merchant Credit, Payroll Advance),
+ * an institution logo for institution-sourced deposits (Check, Large Deposit), and a themed
+ * generic tile otherwise (Government, Tax).
+ */
+export declare const DepositLogo: ({ categoryGuid, iconName, institutionGuid, institutionName, merchantGuid, merchantName, }: DepositLogoProps) => import("react/jsx-runtime").JSX.Element;
+export default DepositLogo;

package/dist/insights-v2/components/ComponentBlocks/DepositLogo.es.js

@@ -0,0 +1,33 @@
+import c from "@mui/material/Stack";
+import { InstitutionLogo as m, MerchantLogo as f } from "@mxenabled/mxui";
+import { Icon as g } from "@mxenabled/mx-icons";
+import { jsx as o } from "react/jsx-runtime";
+var s = 48, l = ({ iconName: t }) => /* @__PURE__ */ o(c, {
+  sx: {
+    alignItems: "center",
+    bgcolor: "success.main",
+    height: "100%",
+    justifyContent: "center",
+    width: "100%"
+  },
+  children: /* @__PURE__ */ o(g, {
+    name: t,
+    size: 24,
+    sx: { color: "success.contrastText" }
+  })
+}), h = ({ categoryGuid: t, iconName: i = "payments", institutionGuid: e, institutionName: a, merchantGuid: r, merchantName: n }) => r ? /* @__PURE__ */ o(f, {
+  alt: n ?? "",
+  categoryGuid: t ?? "",
+  merchantGuid: r,
+  size: s
+}) : e ? /* @__PURE__ */ o(m, {
+  alt: a ?? "",
+  institutionGuid: e,
+  size: s
+}) : /* @__PURE__ */ o(l, { iconName: i });
+export {
+  h as DepositLogo,
+  h as default
+};
+
+//# sourceMappingURL=DepositLogo.es.js.map

package/dist/insights-v2/components/ComponentBlocks/DepositLogo.es.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DepositLogo.es.js","names":[],"sources":["../../../../src/insights-v2/components/ComponentBlocks/DepositLogo.tsx"],"sourcesContent":["import Stack from '@mui/material/Stack'\n\nimport { InstitutionLogo, MerchantLogo } from '@mxenabled/mxui'\nimport { Icon } from '@mxenabled/mx-icons'\n\ninterface DepositLogoProps {\n  /** Category guid, required alongside `merchantGuid` for the merchant logo lookup. */\n  categoryGuid?: string\n  /** Fallback mx-icons ligature glyph for the generic tile when no guid is present. */\n  iconName?: string\n  /** Institution guid — renders an `InstitutionLogo` when present and no merchant guid. */\n  institutionGuid?: string\n  /** Institution display name, used as the logo's alt text. */\n  institutionName?: string\n  /** Merchant guid — renders a `MerchantLogo` when present (highest priority). */\n  merchantGuid?: string\n  /** Merchant display name, used as the logo's alt text. */\n  merchantName?: string\n}\n\nconst SIZE = 48\n\n/**\n * Square themed tile standing in for a merchant/institution logo when no guid is sent.\n * Drawn with theme colors so it stays correct in dark mode.\n */\nconst DepositLogoTile = ({ iconName }: { iconName: string }) => (\n  <Stack\n    sx={{\n      alignItems: 'center',\n      bgcolor: 'success.main',\n      height: '100%',\n      justifyContent: 'center',\n      width: '100%',\n    }}\n  >\n    <Icon name={iconName} size={24} sx={{ color: 'success.contrastText' }} />\n  </Stack>\n)\n\n/**\n * Logo shown in a deposit callout. Mirrors the spec's per-variant sourcing: a real\n * merchant logo when a `merchantGuid` is sent (Payroll, Merchant Credit, Payroll Advance),\n * an institution logo for institution-sourced deposits (Check, Large Deposit), and a themed\n * generic tile otherwise (Government, Tax).\n */\nexport const DepositLogo = ({\n  categoryGuid,\n  iconName = 'payments',\n  institutionGuid,\n  institutionName,\n  merchantGuid,\n  merchantName,\n}: DepositLogoProps) => {\n  if (merchantGuid) {\n    return (\n      <MerchantLogo\n        alt={merchantName ?? ''}\n        categoryGuid={categoryGuid ?? ''}\n        merchantGuid={merchantGuid}\n        size={SIZE}\n      />\n    )\n  }\n\n  if (institutionGuid) {\n    return (\n      <InstitutionLogo alt={institutionName ?? ''} institutionGuid={institutionGuid} size={SIZE} />\n    )\n  }\n\n  return <DepositLogoTile iconName={iconName} />\n}\n\nexport default DepositLogo\n"],"mappings":";;;;AAoBA,IAAM,IAAO,IAMP,IAAA,CAAmB,EAAE,UAAA,EAAA,MACzB,gBAAA,EAAC,GAAD;AAAA,EACE,IAAI;AAAA,IACF,YAAY;AAAA,IACZ,SAAS;AAAA,IACT,QAAQ;AAAA,IACR,gBAAgB;AAAA,IAChB,OAAO;AAAA,EACT;AAAA,EAEA,UAAA,gBAAA,EAAC,GAAD;AAAA,IAAM,MAAM;AAAA,IAAU,MAAM;AAAA,IAAI,IAAI,EAAE,OAAO,uBAAuB;AAAA,EAAI,CAAA;AACnE,CAAA,GASI,IAAA,CAAe,EAC1B,cAAA,GACA,UAAA,IAAW,YACX,iBAAA,GACA,iBAAA,GACA,cAAA,GACA,cAAA,EAAA,MAEI,IAEA,gBAAA,EAAC,GAAD;AAAA,EACE,KAAK,KAAgB;AAAA,EACrB,cAAc,KAAgB;AAAA,EAChB,cAAA;AAAA,EACd,MAAM;AACP,CAAA,IAID,IAEA,gBAAA,EAAC,GAAD;AAAA,EAAiB,KAAK,KAAmB;AAAA,EAAqB,iBAAA;AAAA,EAAiB,MAAM;AAAO,CAAA,IAIzF,gBAAA,EAAC,GAAD,EAA2B,UAAA,EAAW,CAAA"}

package/dist/insights-v2/components/ComponentBlocks/StatusIndicator.d.ts

@@ -0,0 +1,14 @@
+import { SxProps } from '@mui/material/styles';
+interface StatusIndicatorProps {
+    amount: string | React.ReactNode;
+    borderRadius?: string;
+    completeColor?: string;
+    icon: React.ReactNode;
+    label: string | React.ReactNode;
+    leftLabel?: string;
+    percentComplete?: number;
+    rightLabel?: string;
+    sx?: SxProps;
+}
+declare const StatusIndicator: ({ amount, borderRadius, completeColor, icon, label, leftLabel, percentComplete, rightLabel, sx, }: StatusIndicatorProps) => import("react/jsx-runtime").JSX.Element;
+export default StatusIndicator;

package/dist/insights-v2/components/ComponentBlocks/StatusIndicator.es.js

@@ -0,0 +1,65 @@
+import r from "@mui/material/Stack";
+import { H2 as f, P as g, Text as c } from "@mxenabled/mxui";
+import { jsx as e, jsxs as t } from "react/jsx-runtime";
+import s from "@mui/material/Box";
+var I = ({ amount: i, borderRadius: o = "2px", completeColor: a = "success.main", icon: l, label: n, leftLabel: x, percentComplete: d = 0, rightLabel: p, sx: h }) => /* @__PURE__ */ t(r, {
+  className: "details-container",
+  sx: {
+    px: 16,
+    py: 8,
+    width: "100%",
+    gap: 16,
+    ...h
+  },
+  children: [/* @__PURE__ */ t(r, {
+    sx: {
+      alignItems: "center",
+      flexDirection: "row",
+      gap: 12
+    },
+    children: [/* @__PURE__ */ e(s, { children: l }), /* @__PURE__ */ t(r, { children: [typeof n == "string" ? /* @__PURE__ */ e(g, {
+      dangerouslySetInnerHTML: { __html: n },
+      variant: "body2"
+    }) : n, typeof i == "string" ? /* @__PURE__ */ e(f, { children: i }) : i] })]
+  }), /* @__PURE__ */ t(r, {
+    sx: { gap: 4 },
+    children: [/* @__PURE__ */ e(r, {
+      sx: {
+        bgcolor: "divider",
+        borderRadius: o,
+        flexDirection: "row",
+        height: 16,
+        width: "100%"
+      },
+      children: /* @__PURE__ */ e(s, { sx: {
+        alignItems: "center",
+        display: "flex",
+        py: 2,
+        px: 12,
+        bgcolor: a,
+        borderRadius: o,
+        height: 16,
+        width: `${d}%`
+      } })
+    }), /* @__PURE__ */ t(r, {
+      sx: {
+        flexDirection: "row",
+        justifyContent: "space-between"
+      },
+      children: [/* @__PURE__ */ e(c, {
+        sx: { color: "text.secondary" },
+        variant: "caption",
+        children: x
+      }), /* @__PURE__ */ e(c, {
+        sx: { color: "text.secondary" },
+        variant: "caption",
+        children: p
+      })]
+    })]
+  })]
+});
+export {
+  I as default
+};
+
+//# sourceMappingURL=StatusIndicator.es.js.map

package/dist/insights-v2/components/ComponentBlocks/StatusIndicator.es.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"StatusIndicator.es.js","names":[],"sources":["../../../../src/insights-v2/components/ComponentBlocks/StatusIndicator.tsx"],"sourcesContent":["import { H2, P, Text } from '@mxenabled/mxui'\n\nimport Box from '@mui/material/Box'\nimport Stack from '@mui/material/Stack'\nimport type { SxProps } from '@mui/material/styles'\n\ninterface StatusIndicatorProps {\n  amount: string | React.ReactNode\n  borderRadius?: string\n  completeColor?: string\n  icon: React.ReactNode\n  label: string | React.ReactNode\n  leftLabel?: string\n  percentComplete?: number\n  rightLabel?: string\n  sx?: SxProps\n}\n\nconst StatusIndicator = ({\n  amount,\n  borderRadius = '2px',\n  completeColor = 'success.main',\n  icon,\n  label,\n  leftLabel,\n  percentComplete = 0,\n  rightLabel,\n  sx,\n}: StatusIndicatorProps) => {\n  return (\n    <Stack className=\"details-container\" sx={{ px: 16, py: 8, width: '100%', gap: 16, ...sx }}>\n      <Stack sx={{ alignItems: 'center', flexDirection: 'row', gap: 12 }}>\n        <Box>{icon}</Box>\n        <Stack>\n          {typeof label === 'string' ? (\n            <P dangerouslySetInnerHTML={{ __html: label }} variant={'body2'} />\n          ) : (\n            label\n          )}\n          {typeof amount === 'string' ? <H2>{amount}</H2> : amount}\n        </Stack>\n      </Stack>\n      <Stack sx={{ gap: 4 }}>\n        <Stack\n          sx={{\n            bgcolor: 'divider',\n            borderRadius,\n            flexDirection: 'row',\n            height: 16,\n            width: '100%',\n          }}\n        >\n          <Box\n            sx={{\n              alignItems: 'center',\n              display: 'flex',\n              py: 2,\n              px: 12,\n              bgcolor: completeColor,\n              borderRadius,\n              height: 16,\n              width: `${percentComplete}%`,\n            }}\n          />\n        </Stack>\n\n        <Stack sx={{ flexDirection: 'row', justifyContent: 'space-between' }}>\n          <Text sx={{ color: 'text.secondary' }} variant=\"caption\">\n            {leftLabel}\n          </Text>\n          <Text sx={{ color: 'text.secondary' }} variant=\"caption\">\n            {rightLabel}\n          </Text>\n        </Stack>\n      </Stack>\n    </Stack>\n  )\n}\n\nexport default StatusIndicator\n"],"mappings":";;;;AAkBA,IAAM,IAAA,CAAmB,EACvB,QAAA,GACA,cAAA,IAAe,OACf,eAAA,IAAgB,gBAChB,MAAA,GACA,OAAA,GACA,WAAA,GACA,iBAAA,IAAkB,GAClB,YAAA,GACA,IAAA,EAAA,MAGE,gBAAA,EAAC,GAAD;AAAA,EAAO,WAAU;AAAA,EAAoB,IAAI;AAAA,IAAE,IAAI;AAAA,IAAI,IAAI;AAAA,IAAG,OAAO;AAAA,IAAQ,KAAK;AAAA,IAAI,GAAG;AAAA,EAAG;AAAA,EAAxF,UAAA,CACE,gBAAA,EAAC,GAAD;AAAA,IAAO,IAAI;AAAA,MAAE,YAAY;AAAA,MAAU,eAAe;AAAA,MAAO,KAAK;AAAA,IAAG;AAAA,IAAjE,UAAA,CACE,gBAAA,EAAC,GAAD,EAAA,UAAM,EAAU,CAAA,GAChB,gBAAA,EAAC,GAAD,EAAA,UAAA,CACG,OAAO,KAAU,WAChB,gBAAA,EAAC,GAAD;AAAA,MAAG,yBAAyB,EAAE,QAAQ,EAAM;AAAA,MAAG,SAAS;AAAA,IAAU,CAAA,IAElE,GAED,OAAO,KAAW,WAAW,gBAAA,EAAC,GAAD,EAAA,UAAK,EAAW,CAAA,IAAI,CAC7C,EAAA,CAAA,CACF;AAAA,EACP,CAAA,GAAA,gBAAA,EAAC,GAAD;AAAA,IAAO,IAAI,EAAE,KAAK,EAAE;AAAA,IAApB,UAAA,CACE,gBAAA,EAAC,GAAD;AAAA,MACE,IAAI;AAAA,QACF,SAAS;AAAA,QACT,cAAA;AAAA,QACA,eAAe;AAAA,QACf,QAAQ;AAAA,QACR,OAAO;AAAA,MACT;AAAA,MAEA,UAAA,gBAAA,EAAC,GAAD,EACE,IAAI;AAAA,QACF,YAAY;AAAA,QACZ,SAAS;AAAA,QACT,IAAI;AAAA,QACJ,IAAI;AAAA,QACJ,SAAS;AAAA,QACT,cAAA;AAAA,QACA,QAAQ;AAAA,QACR,OAAO,GAAG,CAAA;AAAA,MACZ,EACD,CAAA;AAAA,IACI,CAAA,GAEP,gBAAA,EAAC,GAAD;AAAA,MAAO,IAAI;AAAA,QAAE,eAAe;AAAA,QAAO,gBAAgB;AAAA,MAAgB;AAAA,MAAnE,UAAA,CACE,gBAAA,EAAC,GAAD;AAAA,QAAM,IAAI,EAAE,OAAO,iBAAiB;AAAA,QAAG,SAAQ;AAAA,QAC5C,UAAA;AAAA,MACG,CAAA,GACN,gBAAA,EAAC,GAAD;AAAA,QAAM,IAAI,EAAE,OAAO,iBAAiB;AAAA,QAAG,SAAQ;AAAA,QAC5C,UAAA;AAAA,MACG,CAAA,CACD;AAAA,IACF,CAAA,CAAA;AAAA,EACF,CAAA,CAAA"}

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

@@ -0,0 +1,33 @@
+import { ReactNode } from 'react';
+import { SxProps, Theme } from '@mui/material/styles';
+export interface DesignateEmergencySavingsOption {
+    value: string;
+    label: string;
+}
+interface DesignateEmergencySavingsCardProps {
+    /** Floating label on the select field. Default "Emergency savings account". */
+    selectLabel?: string;
+    /** Text shown in the empty (no-selection) state. Default "Select". */
+    placeholder?: string;
+    /** Selectable accounts. Empty by default (the placeholder-only state). */
+    options?: DesignateEmergencySavingsOption[];
+    /** Selected account value. Default "" (no selection). */
+    value?: string;
+    /** Selection change handler. */
+    onChange?: (value: string) => void;
+    /** Illustration graphic. Defaults to the emergency-savings illustration. */
+    graphic?: ReactNode;
+    sx?: SxProps<Theme>;
+}
+/**
+ * Designate Emergency Savings Account content: an illustration (piggy bank under
+ * an umbrella) above an "Emergency savings account" select showing the empty
+ * "Select" state.
+ *
+ * Uses the repo's standard MUI `Select` (FormControl + InputLabel + MenuItem)
+ * with the `ExpandMore` chevron, matching existing selects like AccountDetailEdit.
+ * Figma: Designate Emergency Savings Account Content (Full variant). Scope is the
+ * Content section only.
+ */
+declare const DesignateEmergencySavingsCard: ({ graphic, onChange, options, placeholder, selectLabel, value, sx, }: DesignateEmergencySavingsCardProps) => import("react/jsx-runtime").JSX.Element;
+export default DesignateEmergencySavingsCard;

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

@@ -0,0 +1,78 @@
+import { ThemedSVGImage as u } from "./chartblocks/ThemedSVGImage.es.js";
+import { ReactComponent as h } from "./shared/images/DesignateEmergencySavings.es.js";
+import { useId as f } from "react";
+import x from "@mui/material/Stack";
+import { ExpandMore as v } from "@mxenabled/mx-icons";
+import { jsx as e, jsxs as t } from "react/jsx-runtime";
+import a from "@mui/material/Box";
+import l from "@mui/material/MenuItem";
+import g from "@mui/material/FormControl";
+import S from "@mui/material/InputLabel";
+import y from "@mui/material/Select";
+var I = /* @__PURE__ */ e(u, {
+  divProps: {
+    "aria-hidden": !0,
+    style: {
+      display: "block",
+      width: "100%"
+    }
+  },
+  image: h
+}), b = [], C = () => /* @__PURE__ */ e(v, {
+  size: 24,
+  sx: {
+    pointerEvents: "none",
+    position: "absolute",
+    right: 12,
+    top: "calc(50% - 12px)"
+  }
+}), D = ({ graphic: n = I, onChange: m, options: p = b, placeholder: d = "Select", selectLabel: o = "Emergency savings account", value: s = "", sx: c }) => {
+  const i = f();
+  return /* @__PURE__ */ t(x, {
+    sx: c,
+    children: [/* @__PURE__ */ e(a, {
+      sx: { width: "100%" },
+      children: n
+    }), /* @__PURE__ */ e(a, {
+      sx: {
+        pb: 12,
+        pt: 24,
+        px: 16
+      },
+      children: /* @__PURE__ */ t(g, {
+        fullWidth: !0,
+        children: [/* @__PURE__ */ e(S, {
+          id: i,
+          shrink: !0,
+          sx: { color: "text.secondary" },
+          children: o
+        }), /* @__PURE__ */ t(y, {
+          displayEmpty: !0,
+          IconComponent: C,
+          label: o,
+          labelId: i,
+          onChange: (r) => m?.(r.target.value),
+          sx: { "& .MuiSelect-select": {
+            color: "text.primary",
+            fontSize: 15,
+            lineHeight: "20px"
+          } },
+          value: s,
+          children: [/* @__PURE__ */ e(l, {
+            disabled: !0,
+            value: "",
+            children: d
+          }), p.map((r) => /* @__PURE__ */ e(l, {
+            value: r.value,
+            children: r.label
+          }, r.value))]
+        })]
+      })
+    })]
+  });
+};
+export {
+  D as default
+};
+
+//# sourceMappingURL=DesignateEmergencySavingsCard.es.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"DesignateEmergencySavingsCard.es.js","names":[],"sources":["../../../src/insights-v2/components/DesignateEmergencySavingsCard.tsx"],"sourcesContent":["import { type ReactNode, useId } from 'react'\n\nimport Box from '@mui/material/Box'\nimport FormControl from '@mui/material/FormControl'\nimport InputLabel from '@mui/material/InputLabel'\nimport MenuItem from '@mui/material/MenuItem'\nimport Select, { type SelectChangeEvent } from '@mui/material/Select'\nimport Stack from '@mui/material/Stack'\nimport type { SxProps, Theme } from '@mui/material/styles'\n\nimport { ExpandMore } from '@mxenabled/mx-icons'\n\nimport { ThemedSVGImage } from './chartblocks/ThemedSVGImage'\nimport { ReactComponent as EmergencySavingsGraphic } from './shared/images/DesignateEmergencySavings.svg'\n\n// Hoisted so the default `graphic` prop keeps a stable reference across renders.\n// Wrapped with ThemedSVGImage to apply theme colors to SVG elements with brand class names.\n// Marked as decorative (aria-hidden) since the text/label conveys the meaning.\nconst DEFAULT_GRAPHIC = (\n  <ThemedSVGImage\n    divProps={{ 'aria-hidden': true, style: { display: 'block', width: '100%' } }}\n    image={EmergencySavingsGraphic}\n  />\n)\n\nexport interface DesignateEmergencySavingsOption {\n  value: string\n  label: string\n}\n\nconst EMPTY_OPTIONS: DesignateEmergencySavingsOption[] = []\n\n// Hoisted to keep a stable reference (the Select re-renders otherwise).\n//\n// mx-icons `ExpandMore` forwards `sx` but drops the `className` MUI hands its\n// `IconComponent` — so it never receives the `.MuiSelect-icon` positioning\n// class. We position it ourselves to match Figma: the chevron's right edge sits\n// 12px from the field's right border, vertically centered.\nconst SelectChevron = () => (\n  <ExpandMore\n    size={24}\n    sx={{ pointerEvents: 'none', position: 'absolute', right: 12, top: 'calc(50% - 12px)' }}\n  />\n)\n\ninterface DesignateEmergencySavingsCardProps {\n  /** Floating label on the select field. Default \"Emergency savings account\". */\n  selectLabel?: string\n  /** Text shown in the empty (no-selection) state. Default \"Select\". */\n  placeholder?: string\n  /** Selectable accounts. Empty by default (the placeholder-only state). */\n  options?: DesignateEmergencySavingsOption[]\n  /** Selected account value. Default \"\" (no selection). */\n  value?: string\n  /** Selection change handler. */\n  onChange?: (value: string) => void\n  /** Illustration graphic. Defaults to the emergency-savings illustration. */\n  graphic?: ReactNode\n  sx?: SxProps<Theme>\n}\n\n/**\n * Designate Emergency Savings Account content: an illustration (piggy bank under\n * an umbrella) above an \"Emergency savings account\" select showing the empty\n * \"Select\" state.\n *\n * Uses the repo's standard MUI `Select` (FormControl + InputLabel + MenuItem)\n * with the `ExpandMore` chevron, matching existing selects like AccountDetailEdit.\n * Figma: Designate Emergency Savings Account Content (Full variant). Scope is the\n * Content section only.\n */\nconst DesignateEmergencySavingsCard = ({\n  graphic = DEFAULT_GRAPHIC,\n  onChange,\n  options = EMPTY_OPTIONS,\n  placeholder = 'Select',\n  selectLabel = 'Emergency savings account',\n  value = '',\n  sx,\n}: DesignateEmergencySavingsCardProps) => {\n  const labelId = useId()\n  return (\n    <Stack sx={sx}>\n      {/* Illustration */}\n      <Box sx={{ width: '100%' }}>{graphic}</Box>\n\n      {/* Emergency savings account select */}\n      <Box sx={{ pb: 12, pt: 24, px: 16 }}>\n        <FormControl fullWidth={true}>\n          {/* Figma label: typography/body2, text/secondary. */}\n          <InputLabel id={labelId} shrink={true} sx={{ color: 'text.secondary' }}>\n            {selectLabel}\n          </InputLabel>\n          <Select\n            displayEmpty={true}\n            IconComponent={SelectChevron}\n            label={selectLabel}\n            labelId={labelId}\n            onChange={(event: SelectChangeEvent) => onChange?.(event.target.value)}\n            // Figma value: typography/body1 (15/20), text/primary.\n            sx={{\n              '& .MuiSelect-select': {\n                color: 'text.primary',\n                fontSize: 15,\n                lineHeight: '20px',\n              },\n            }}\n            value={value}\n          >\n            <MenuItem disabled={true} value=\"\">\n              {placeholder}\n            </MenuItem>\n            {options.map((option) => (\n              <MenuItem key={option.value} value={option.value}>\n                {option.label}\n              </MenuItem>\n            ))}\n          </Select>\n        </FormControl>\n      </Box>\n    </Stack>\n  )\n}\n\nexport default DesignateEmergencySavingsCard\n"],"mappings":";;;;;;;;;;;AAkBA,IAAM,IACJ,gBAAA,EAAC,GAAD;AAAA,EACE,UAAU;AAAA,IAAE,eAAe;AAAA,IAAM,OAAO;AAAA,MAAE,SAAS;AAAA,MAAS,OAAO;AAAA,IAAO;AAAA,EAAE;AAAA,EAC5E,OAAO;AACR,CAAA,GAQG,IAAmD,CAAC,GAQpD,IAAA,MACJ,gBAAA,EAAC,GAAD;AAAA,EACE,MAAM;AAAA,EACN,IAAI;AAAA,IAAE,eAAe;AAAA,IAAQ,UAAU;AAAA,IAAY,OAAO;AAAA,IAAI,KAAK;AAAA,EAAmB;AACvF,CAAA,GA6BG,IAAA,CAAiC,EACrC,SAAA,IAAU,GACV,UAAA,GACA,SAAA,IAAU,GACV,aAAA,IAAc,UACd,aAAA,IAAc,6BACd,OAAA,IAAQ,IACR,IAAA,EAAA,MACwC;AACxC,QAAM,IAAU,EAAM;AACtB,SACE,gBAAA,EAAC,GAAD;AAAA,IAAW,IAAA;AAAA,IAAX,UAAA,CAEE,gBAAA,EAAC,GAAD;AAAA,MAAK,IAAI,EAAE,OAAO,OAAO;AAAA,MAAI,UAAA;AAAA,IAAa,CAAA,GAG1C,gBAAA,EAAC,GAAD;AAAA,MAAK,IAAI;AAAA,QAAE,IAAI;AAAA,QAAI,IAAI;AAAA,QAAI,IAAI;AAAA,MAAG;AAAA,MAChC,UAAA,gBAAA,EAAC,GAAD;AAAA,QAAa,WAAW;AAAA,QAAxB,UAAA,CAEE,gBAAA,EAAC,GAAD;AAAA,UAAY,IAAI;AAAA,UAAS,QAAQ;AAAA,UAAM,IAAI,EAAE,OAAO,iBAAiB;AAAA,UAClE,UAAA;AAAA,QACS,CAAA,GACZ,gBAAA,EAAC,GAAD;AAAA,UACE,cAAc;AAAA,UACd,eAAe;AAAA,UACf,OAAO;AAAA,UACE,SAAA;AAAA,UACT,UAAA,CAAW,MAA6B,IAAW,EAAM,OAAO,KAAK;AAAA,UAErE,IAAI,EACF,uBAAuB;AAAA,YACrB,OAAO;AAAA,YACP,UAAU;AAAA,YACV,YAAY;AAAA,UACd,EACF;AAAA,UACO,OAAA;AAAA,UAdT,UAAA,CAgBE,gBAAA,EAAC,GAAD;AAAA,YAAU,UAAU;AAAA,YAAM,OAAM;AAAA,YAC7B,UAAA;AAAA,UACO,CAAA,GACT,EAAQ,IAAA,CAAK,MACZ,gBAAA,EAAC,GAAD;AAAA,YAA6B,OAAO,EAAO;AAAA,YACxC,UAAA,EAAO;AAAA,UACA,GAFK,EAAO,KAEZ,CACX,CACK;AAAA,QACG,CAAA,CAAA;AAAA;IACV,CAAA,CACA;AAAA;AAEX"}

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

@@ -0,0 +1,9 @@
+interface FooterData {
+    account: string;
+    date: string;
+}
+interface FooterProps {
+    footer: FooterData;
+}
+declare const Footer: ({ footer }: FooterProps) => import("react/jsx-runtime").JSX.Element;
+export default Footer;

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

@@ -0,0 +1,25 @@
+import o from "@mui/material/Stack";
+import { Text as t } from "@mxenabled/mxui";
+import { jsx as e, jsxs as n } from "react/jsx-runtime";
+var s = ({ footer: r }) => /* @__PURE__ */ n(o, {
+  sx: {
+    flexDirection: "row",
+    justifyContent: "space-between",
+    px: 16,
+    py: 8
+  },
+  children: [/* @__PURE__ */ e(t, {
+    color: "secondary",
+    variant: "tiny",
+    children: r.date
+  }), /* @__PURE__ */ e(t, {
+    color: "secondary",
+    variant: "tiny",
+    children: r.account
+  })]
+});
+export {
+  s as default
+};
+
+//# sourceMappingURL=Footer.es.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Footer.es.js","names":[],"sources":["../../../src/insights-v2/components/Footer.tsx"],"sourcesContent":["import Stack from '@mui/material/Stack'\n\nimport { Text } from '@mxenabled/mxui'\n\ninterface FooterData {\n  account: string\n  date: string\n}\n\ninterface FooterProps {\n  footer: FooterData\n}\n\nconst Footer = ({ footer }: FooterProps) => {\n  return (\n    <Stack sx={{ flexDirection: 'row', justifyContent: 'space-between', px: 16, py: 8 }}>\n      <Text color=\"secondary\" variant=\"tiny\">\n        {footer.date}\n      </Text>\n      <Text color=\"secondary\" variant=\"tiny\">\n        {footer.account}\n      </Text>\n    </Stack>\n  )\n}\n\nexport default Footer\n"],"mappings":";;;AAaA,IAAM,IAAA,CAAU,EAAE,QAAA,EAAA,MAEd,gBAAA,EAAC,GAAD;AAAA,EAAO,IAAI;AAAA,IAAE,eAAe;AAAA,IAAO,gBAAgB;AAAA,IAAiB,IAAI;AAAA,IAAI,IAAI;AAAA,EAAE;AAAA,EAAlF,UAAA,CACE,gBAAA,EAAC,GAAD;AAAA,IAAM,OAAM;AAAA,IAAY,SAAQ;AAAA,IAC7B,UAAA,EAAO;AAAA,EACJ,CAAA,GACN,gBAAA,EAAC,GAAD;AAAA,IAAM,OAAM;AAAA,IAAY,SAAQ;AAAA,IAC7B,UAAA,EAAO;AAAA,EACJ,CAAA,CACD"}

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

@@ -0,0 +1,8 @@
+import { Subtitle } from '../../core';
+interface HeaderProps {
+    isMini: boolean;
+    subtitle?: Subtitle;
+    title: string;
+}
+declare const Header: ({ isMini, subtitle, title }: HeaderProps) => import("react/jsx-runtime").JSX.Element;
+export default Header;

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

@@ -0,0 +1,41 @@
+import p from "./SubHeader.es.js";
+import o from "@mui/material/Stack";
+import { H3 as a } from "@mxenabled/mxui";
+import { MoreHoriz as m } from "@mxenabled/mx-icons";
+import { jsx as r, jsxs as t } from "react/jsx-runtime";
+import s from "@mui/material/IconButton";
+var H = ({ isMini: i, subtitle: e, title: n }) => /* @__PURE__ */ t(o, {
+  sx: {
+    gap: 4,
+    pb: 12,
+    pl: 16,
+    pr: 16,
+    pt: 16
+  },
+  children: [/* @__PURE__ */ t(o, {
+    sx: {
+      alignItems: "center",
+      flexDirection: "row",
+      justifyContent: "space-between"
+    },
+    children: [/* @__PURE__ */ r(a, { children: n }), !i && /* @__PURE__ */ r(s, {
+      "aria-label": "More Options",
+      onClick: () => {
+      },
+      sx: {
+        minHeight: 24,
+        p: 0,
+        minWidth: 24
+      },
+      children: /* @__PURE__ */ r(m, {
+        size: 24,
+        sx: { color: "neutral.dark" }
+      })
+    })]
+  }), e && /* @__PURE__ */ r(p, { subtitle: e })]
+});
+export {
+  H as default
+};
+
+//# sourceMappingURL=Header.es.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Header.es.js","names":[],"sources":["../../../src/insights-v2/components/Header.tsx"],"sourcesContent":["import IconButton from '@mui/material/IconButton'\nimport Stack from '@mui/material/Stack'\n\nimport { H3 } from '@mxenabled/mxui'\nimport { MoreHoriz } from '@mxenabled/mx-icons'\n\nimport SubHeader from './SubHeader'\nimport type { Subtitle } from '../../core'\n\ninterface HeaderProps {\n  isMini: boolean\n  subtitle?: Subtitle\n  title: string\n}\n\nconst Header = ({ isMini, subtitle, title }: HeaderProps) => {\n  const handleMoreOptions = () => {}\n\n  return (\n    <Stack sx={{ gap: 4, pb: 12, pl: 16, pr: 16, pt: 16 }}>\n      <Stack sx={{ alignItems: 'center', flexDirection: 'row', justifyContent: 'space-between' }}>\n        <H3>{title}</H3>\n        {!isMini && (\n          <IconButton\n            aria-label=\"More Options\" // TODO: Localize\n            onClick={handleMoreOptions}\n            sx={{ minHeight: 24, p: 0, minWidth: 24 }}\n          >\n            <MoreHoriz size={24} sx={{ color: 'neutral.dark' }} />\n          </IconButton>\n        )}\n      </Stack>\n\n      {/* Sub Header */}\n      {subtitle && <SubHeader subtitle={subtitle} />}\n    </Stack>\n  )\n}\n\nexport default Header\n"],"mappings":";;;;;;AAeA,IAAM,IAAA,CAAU,EAAE,QAAA,GAAQ,UAAA,GAAU,OAAA,EAAA,MAIhC,gBAAA,EAAC,GAAD;AAAA,EAAO,IAAI;AAAA,IAAE,KAAK;AAAA,IAAG,IAAI;AAAA,IAAI,IAAI;AAAA,IAAI,IAAI;AAAA,IAAI,IAAI;AAAA,EAAG;AAAA,EAApD,UAAA,CACE,gBAAA,EAAC,GAAD;AAAA,IAAO,IAAI;AAAA,MAAE,YAAY;AAAA,MAAU,eAAe;AAAA,MAAO,gBAAgB;AAAA,IAAgB;AAAA,IAAzF,UAAA,CACE,gBAAA,EAAC,GAAD,EAAA,UAAK,EAAU,CAAA,GACd,CAAC,KACA,gBAAA,EAAC,GAAD;AAAA,MACE,cAAW;AAAA,MACX,SATJ,MAA0B;AAAA,MAAC;AAAA,MAUvB,IAAI;AAAA,QAAE,WAAW;AAAA,QAAI,GAAG;AAAA,QAAG,UAAU;AAAA,MAAG;AAAA,MAExC,UAAA,gBAAA,EAAC,GAAD;AAAA,QAAW,MAAM;AAAA,QAAI,IAAI,EAAE,OAAO,eAAe;AAAA,MAAI,CAAA;AAAA,IAC3C,CAAA,CAET;AAAA,EAGN,CAAA,GAAA,KAAY,gBAAA,EAAC,GAAD,EAAqB,UAAA,EAAW,CAAA,CACxC"}

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

@@ -0,0 +1,23 @@
+import { ReactNode } from 'react';
+import { SxProps } from '@mui/material/styles';
+export interface InsightTransactionRowProps {
+    /** Leading visual: merchant/institution logo, category icon, or date badge. */
+    leading?: ReactNode;
+    /** Primary line (e.g. merchant, payee, transaction name). */
+    title: ReactNode;
+    /** Secondary line beneath the title (e.g. category). */
+    subtitle: ReactNode;
+    /** Trailing amount, pre-formatted by the caller. */
+    amount: ReactNode;
+    /** Theme token for the amount text (e.g. 'success.main' for credits). */
+    amountColor?: string;
+    sx?: SxProps;
+}
+/**
+ * A single transaction/list row for the insights-v2 transaction-list family:
+ * leading visual + title/subtitle on the left, amount on the right. Named
+ * `InsightTransactionRow` to avoid colliding with the transactions widget's
+ * public `TransactionRow` export.
+ */
+declare const InsightTransactionRow: ({ amount, amountColor, leading, subtitle, title, sx, }: InsightTransactionRowProps) => import("react/jsx-runtime").JSX.Element;
+export default InsightTransactionRow;

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

@@ -0,0 +1,52 @@
+import t from "@mui/material/Stack";
+import { Text as e } from "@mxenabled/mxui";
+import { jsx as r, jsxs as i } from "react/jsx-runtime";
+import d from "@mui/material/Box";
+var p = ({ amount: n, amountColor: a = "text.primary", leading: o, subtitle: l, title: x, sx: c }) => /* @__PURE__ */ i(t, {
+  sx: {
+    alignItems: "flex-start",
+    flexDirection: "row",
+    gap: 16,
+    px: 16,
+    py: 14,
+    width: "100%",
+    ...c
+  },
+  children: [/* @__PURE__ */ i(t, {
+    sx: {
+      alignItems: "center",
+      flexDirection: "row",
+      flexGrow: 1,
+      gap: 12,
+      minWidth: 0
+    },
+    children: [o && /* @__PURE__ */ r(d, {
+      sx: { flexShrink: 0 },
+      children: o
+    }), /* @__PURE__ */ i(t, {
+      sx: { minWidth: 0 },
+      children: [/* @__PURE__ */ r(e, {
+        bold: !0,
+        truncate: !0,
+        variant: "body1",
+        children: x
+      }), /* @__PURE__ */ r(e, {
+        color: "text.secondary",
+        truncate: !0,
+        variant: "caption",
+        children: l
+      })]
+    })]
+  }), /* @__PURE__ */ r(e, {
+    bold: !0,
+    color: a,
+    sx: { flexShrink: 0 },
+    variant: "body1",
+    children: n
+  })]
+});
+export {
+  p as default
+};
+
+//# sourceMappingURL=InsightTransactionRow.es.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"InsightTransactionRow.es.js","names":[],"sources":["../../../src/insights-v2/components/InsightTransactionRow.tsx"],"sourcesContent":["import type { ReactNode } from 'react'\n\nimport Box from '@mui/material/Box'\nimport Stack from '@mui/material/Stack'\nimport type { SxProps } from '@mui/material/styles'\n\nimport { Text } from '@mxenabled/mxui'\n\nexport interface InsightTransactionRowProps {\n  /** Leading visual: merchant/institution logo, category icon, or date badge. */\n  leading?: ReactNode\n  /** Primary line (e.g. merchant, payee, transaction name). */\n  title: ReactNode\n  /** Secondary line beneath the title (e.g. category). */\n  subtitle: ReactNode\n  /** Trailing amount, pre-formatted by the caller. */\n  amount: ReactNode\n  /** Theme token for the amount text (e.g. 'success.main' for credits). */\n  amountColor?: string\n  sx?: SxProps\n}\n\n/**\n * A single transaction/list row for the insights-v2 transaction-list family:\n * leading visual + title/subtitle on the left, amount on the right. Named\n * `InsightTransactionRow` to avoid colliding with the transactions widget's\n * public `TransactionRow` export.\n */\nconst InsightTransactionRow = ({\n  amount,\n  amountColor = 'text.primary',\n  leading,\n  subtitle,\n  title,\n  sx,\n}: InsightTransactionRowProps) => (\n  <Stack\n    sx={{\n      // The amount shares the title's top line while the subtitle sits below, so\n      // the row is top-aligned and the inner left group is centered.\n      alignItems: 'flex-start',\n      flexDirection: 'row',\n      gap: 16,\n      px: 16,\n      py: 14,\n      width: '100%',\n      ...sx,\n    }}\n  >\n    <Stack sx={{ alignItems: 'center', flexDirection: 'row', flexGrow: 1, gap: 12, minWidth: 0 }}>\n      {leading && <Box sx={{ flexShrink: 0 }}>{leading}</Box>}\n      <Stack sx={{ minWidth: 0 }}>\n        <Text bold={true} truncate={true} variant=\"body1\">\n          {title}\n        </Text>\n        <Text color=\"text.secondary\" truncate={true} variant=\"caption\">\n          {subtitle}\n        </Text>\n      </Stack>\n    </Stack>\n    <Text bold={true} color={amountColor} sx={{ flexShrink: 0 }} variant=\"body1\">\n      {amount}\n    </Text>\n  </Stack>\n)\n\nexport default InsightTransactionRow\n"],"mappings":";;;;AA4BA,IAAM,IAAA,CAAyB,EAC7B,QAAA,GACA,aAAA,IAAc,gBACd,SAAA,GACA,UAAA,GACA,OAAA,GACA,IAAA,EAAA,MAEA,gBAAA,EAAC,GAAD;AAAA,EACE,IAAI;AAAA,IAGF,YAAY;AAAA,IACZ,eAAe;AAAA,IACf,KAAK;AAAA,IACL,IAAI;AAAA,IACJ,IAAI;AAAA,IACJ,OAAO;AAAA,IACP,GAAG;AAAA,EACL;AAAA,EAXF,UAAA,CAaE,gBAAA,EAAC,GAAD;AAAA,IAAO,IAAI;AAAA,MAAE,YAAY;AAAA,MAAU,eAAe;AAAA,MAAO,UAAU;AAAA,MAAG,KAAK;AAAA,MAAI,UAAU;AAAA,IAAE;AAAA,IAA3F,UAAA,CACG,KAAW,gBAAA,EAAC,GAAD;AAAA,MAAK,IAAI,EAAE,YAAY,EAAE;AAAA,MAAI,UAAA;AAAA,IAAa,CAAA,GACtD,gBAAA,EAAC,GAAD;AAAA,MAAO,IAAI,EAAE,UAAU,EAAE;AAAA,MAAzB,UAAA,CACE,gBAAA,EAAC,GAAD;AAAA,QAAM,MAAM;AAAA,QAAM,UAAU;AAAA,QAAM,SAAQ;AAAA,QACvC,UAAA;AAAA,MACG,CAAA,GACN,gBAAA,EAAC,GAAD;AAAA,QAAM,OAAM;AAAA,QAAiB,UAAU;AAAA,QAAM,SAAQ;AAAA,QAClD,UAAA;AAAA,MACG,CAAA,CACD;AAAA,IACF,CAAA,CAAA;AAAA,EACP,CAAA,GAAA,gBAAA,EAAC,GAAD;AAAA,IAAM,MAAM;AAAA,IAAM,OAAO;AAAA,IAAa,IAAI,EAAE,YAAY,EAAE;AAAA,IAAG,SAAQ;AAAA,IAClE,UAAA;AAAA,EACG,CAAA,CACD"}

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

@@ -0,0 +1,40 @@
+import { ReactNode } from 'react';
+import { SxProps } from '@mui/material/styles';
+interface LogoClusterCardProps {
+    /** Brand/merchant logo visuals, rendered as a row of tiles. */
+    logos: ReactNode[];
+    /** Tile size in px. */
+    logoSize?: number;
+    /** Card surface color/background token or CSS background string. */
+    background?: string;
+    /**
+     * Stagger the tiles diagonally (Figma cycles each tile's vertical alignment
+     * top -> center -> bottom). When false, all tiles are vertically centered.
+     * Default true.
+     */
+    stagger?: boolean;
+    /**
+     * Overlay a 1-based rank badge on the top-left of each tile (Figma: Monthly
+     * Top Merchant Spending V3). Default false.
+     */
+    ranked?: boolean;
+    /**
+     * Accessible label for each rank badge, given the 1-based rank. Lets the
+     * consumer pass localized copy (e.g. from the copy store) and control word
+     * order. Defaults to `Rank {n}` — callers in a localized context must supply a
+     * copy-store-derived function, or they will ship the English default.
+     */
+    rankLabel?: (rank: number) => string;
+    /**
+     * Optional element rendered below the logo row (e.g. a `<StatusPill>`).
+     * Figma: a status stacked beneath the logos on the slot.
+     */
+    footer?: ReactNode;
+    sx?: SxProps;
+}
+/**
+ * A row of rounded brand/logo tiles on a card surface, diagonally staggered
+ * (top -> center -> bottom). Figma: Monthly Subscription Aggregate V2.
+ */
+declare const LogoClusterCard: ({ background, footer, logoSize, logos, ranked, rankLabel, stagger, sx, }: LogoClusterCardProps) => import("react/jsx-runtime").JSX.Element;
+export default LogoClusterCard;