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

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

@@ -0,0 +1,45 @@
+import { STATUS_SUCCESS_TOKENS as r } from "./statusTokens.es.js";
+import o from "@mui/material/Stack";
+import { Text as p } from "@mxenabled/mxui";
+import { jsx as e, jsxs as a } from "react/jsx-runtime";
+var f = ({ bgcolor: t = r.bgcolor, borderColor: i = r.borderColor, icon: d, message: l, messageColor: s = r.textColor, sx: x }) => /* @__PURE__ */ e(o, {
+  sx: {
+    px: 16,
+    py: 16,
+    width: "100%",
+    ...x
+  },
+  children: /* @__PURE__ */ a(o, {
+    role: "status",
+    sx: {
+      alignItems: "center",
+      bgcolor: t,
+      border: "1px solid",
+      borderColor: i,
+      borderRadius: "8px",
+      flexDirection: "row",
+      gap: 4,
+      px: 16,
+      py: 14,
+      width: "100%"
+    },
+    children: [/* @__PURE__ */ e(o, {
+      sx: {
+        flexShrink: 0,
+        px: 4,
+        py: 6
+      },
+      children: d
+    }), /* @__PURE__ */ e(p, {
+      bold: !0,
+      color: s,
+      variant: "body1",
+      children: l
+    })]
+  })
+});
+export {
+  f as default
+};
+
+//# sourceMappingURL=StatusMessageCard.es.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"StatusMessageCard.es.js","names":[],"sources":["../../../src/insights-v2/components/StatusMessageCard.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 { STATUS_SUCCESS_TOKENS } from './statusTokens'\n\ninterface StatusMessageCardProps {\n  /** Leading status icon (e.g. a check-circle). */\n  icon: ReactNode\n  /** Status message. */\n  message: ReactNode\n  /** Card surface color token. */\n  bgcolor?: string\n  /** Card border color token. */\n  borderColor?: string\n  /** Message text color token. */\n  messageColor?: string\n  sx?: SxProps\n}\n\n/**\n * Single-line status/success message card: a leading icon and a bold message on\n * a colored, bordered surface.\n *\n * Figma: the `All Categorized!` success state of Uncategorized Transactions V2\n * (`Card / Content / Slot`) — green card (`success.100` bg, `success.main`\n * border, radius 8), check-circle icon + bold message. Reusable for any\n * icon + message status/empty state.\n *\n * Scope is the Content section only; Header/Description are out of scope.\n */\nconst StatusMessageCard = ({\n  bgcolor = STATUS_SUCCESS_TOKENS.bgcolor,\n  borderColor = STATUS_SUCCESS_TOKENS.borderColor,\n  icon,\n  message,\n  messageColor = STATUS_SUCCESS_TOKENS.textColor,\n  sx,\n}: StatusMessageCardProps) => (\n  <Stack sx={{ px: 16, py: 16, width: '100%', ...sx }}>\n    <Stack\n      role=\"status\"\n      sx={{\n        alignItems: 'center',\n        bgcolor,\n        border: '1px solid',\n        borderColor,\n        borderRadius: '8px',\n        flexDirection: 'row',\n        gap: 4,\n        px: 16,\n        py: 14,\n        width: '100%',\n      }}\n    >\n      <Stack sx={{ flexShrink: 0, px: 4, py: 6 }}>{icon}</Stack>\n      <Text bold={true} color={messageColor} variant=\"body1\">\n        {message}\n      </Text>\n    </Stack>\n  </Stack>\n)\n\nexport default StatusMessageCard\n"],"mappings":";;;;AAkCA,IAAM,IAAA,CAAqB,EACzB,SAAA,IAAU,EAAsB,SAChC,aAAA,IAAc,EAAsB,aACpC,MAAA,GACA,SAAA,GACA,cAAA,IAAe,EAAsB,WACrC,IAAA,EAAA,MAEA,gBAAA,EAAC,GAAD;AAAA,EAAO,IAAI;AAAA,IAAE,IAAI;AAAA,IAAI,IAAI;AAAA,IAAI,OAAO;AAAA,IAAQ,GAAG;AAAA,EAAG;AAAA,EAChD,UAAA,gBAAA,EAAC,GAAD;AAAA,IACE,MAAK;AAAA,IACL,IAAI;AAAA,MACF,YAAY;AAAA,MACZ,SAAA;AAAA,MACA,QAAQ;AAAA,MACR,aAAA;AAAA,MACA,cAAc;AAAA,MACd,eAAe;AAAA,MACf,KAAK;AAAA,MACL,IAAI;AAAA,MACJ,IAAI;AAAA,MACJ,OAAO;AAAA,IACT;AAAA,IAbF,UAAA,CAeE,gBAAA,EAAC,GAAD;AAAA,MAAO,IAAI;AAAA,QAAE,YAAY;AAAA,QAAG,IAAI;AAAA,QAAG,IAAI;AAAA,MAAE;AAAA,MAAI,UAAA;AAAA,IAAY,CAAA,GACzD,gBAAA,EAAC,GAAD;AAAA,MAAM,MAAM;AAAA,MAAM,OAAO;AAAA,MAAc,SAAQ;AAAA,MAC5C,UAAA;AAAA,IACG,CAAA,CACD;AAAA;AACF,CAAA"}

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

@@ -0,0 +1,26 @@
+import { ReactNode } from 'react';
+import { SxProps } from '@mui/material/styles';
+interface StatusPillProps {
+    /** Pill label. */
+    label: ReactNode;
+    /** Optional leading icon (e.g. a check-circle). */
+    icon?: ReactNode;
+    /** Pill background color token. */
+    bgcolor?: string;
+    /** Pill border color token. */
+    borderColor?: string;
+    /** Label color token. */
+    labelColor?: string;
+    sx?: SxProps;
+}
+/**
+ * A small rounded status pill: optional icon + label on a tinted, bordered
+ * surface.
+ *
+ * Figma: the "Categorized" pill in Peer-to-Peer Categorization (`success.100`
+ * bg, `success.main` border, radius 999, 24px tall, check icon + `success.darker`
+ * `typography/subtitle2` label — regular weight, NOT bold). Reusable for any
+ * inline status.
+ */
+declare const StatusPill: ({ bgcolor, borderColor, icon, label, labelColor, sx, }: StatusPillProps) => import("react/jsx-runtime").JSX.Element;
+export default StatusPill;

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

@@ -0,0 +1,30 @@
+import { STATUS_SUCCESS_TOKENS as r } from "./statusTokens.es.js";
+import s from "@mui/material/Stack";
+import { Text as m } from "@mxenabled/mxui";
+import { jsx as x, jsxs as p } from "react/jsx-runtime";
+var c = ({ bgcolor: o = r.bgcolor, borderColor: t = r.borderColor, icon: e, label: i, labelColor: l = r.textColor, sx: a }) => /* @__PURE__ */ p(s, {
+  sx: {
+    alignItems: "center",
+    alignSelf: "flex-start",
+    bgcolor: o,
+    border: "1px solid",
+    borderColor: t,
+    borderRadius: 999,
+    flexDirection: "row",
+    gap: 6,
+    minHeight: 24,
+    px: 16,
+    py: 2,
+    ...a
+  },
+  children: [e, /* @__PURE__ */ x(m, {
+    color: l,
+    variant: "subtitle2",
+    children: i
+  })]
+});
+export {
+  c as default
+};
+
+//# sourceMappingURL=StatusPill.es.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"StatusPill.es.js","names":[],"sources":["../../../src/insights-v2/components/StatusPill.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 { STATUS_SUCCESS_TOKENS } from './statusTokens'\n\ninterface StatusPillProps {\n  /** Pill label. */\n  label: ReactNode\n  /** Optional leading icon (e.g. a check-circle). */\n  icon?: ReactNode\n  /** Pill background color token. */\n  bgcolor?: string\n  /** Pill border color token. */\n  borderColor?: string\n  /** Label color token. */\n  labelColor?: string\n  sx?: SxProps\n}\n\n/**\n * A small rounded status pill: optional icon + label on a tinted, bordered\n * surface.\n *\n * Figma: the \"Categorized\" pill in Peer-to-Peer Categorization (`success.100`\n * bg, `success.main` border, radius 999, 24px tall, check icon + `success.darker`\n * `typography/subtitle2` label — regular weight, NOT bold). Reusable for any\n * inline status.\n */\nconst StatusPill = ({\n  bgcolor = STATUS_SUCCESS_TOKENS.bgcolor,\n  borderColor = STATUS_SUCCESS_TOKENS.borderColor,\n  icon,\n  label,\n  labelColor = STATUS_SUCCESS_TOKENS.textColor,\n  sx,\n}: StatusPillProps) => (\n  <Stack\n    sx={{\n      alignItems: 'center',\n      alignSelf: 'flex-start',\n      bgcolor,\n      border: '1px solid',\n      borderColor,\n      borderRadius: 999,\n      flexDirection: 'row',\n      gap: 6,\n      minHeight: 24,\n      px: 16,\n      py: 2,\n      ...sx,\n    }}\n  >\n    {icon}\n    <Text color={labelColor} variant=\"subtitle2\">\n      {label}\n    </Text>\n  </Stack>\n)\n\nexport default StatusPill\n"],"mappings":";;;;AAgCA,IAAM,IAAA,CAAc,EAClB,SAAA,IAAU,EAAsB,SAChC,aAAA,IAAc,EAAsB,aACpC,MAAA,GACA,OAAA,GACA,YAAA,IAAa,EAAsB,WACnC,IAAA,EAAA,MAEA,gBAAA,EAAC,GAAD;AAAA,EACE,IAAI;AAAA,IACF,YAAY;AAAA,IACZ,WAAW;AAAA,IACX,SAAA;AAAA,IACA,QAAQ;AAAA,IACR,aAAA;AAAA,IACA,cAAc;AAAA,IACd,eAAe;AAAA,IACf,KAAK;AAAA,IACL,WAAW;AAAA,IACX,IAAI;AAAA,IACJ,IAAI;AAAA,IACJ,GAAG;AAAA,EACL;AAAA,EAdF,UAAA,CAgBG,GACD,gBAAA,EAAC,GAAD;AAAA,IAAM,OAAO;AAAA,IAAY,SAAQ;AAAA,IAC9B,UAAA;AAAA,EACG,CAAA,CACD"}

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

@@ -0,0 +1,6 @@
+import { Subtitle } from '../../core';
+interface SubHeaderProps {
+    subtitle: Subtitle;
+}
+declare const SubHeader: ({ subtitle }: SubHeaderProps) => import("react/jsx-runtime").JSX.Element;
+export default SubHeader;

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

@@ -0,0 +1,40 @@
+import n from "@mui/material/Stack";
+import { CategoryIcon as a, InstitutionLogo as u, MerchantLogo as o, Text as c } from "@mxenabled/mxui";
+import { Icon as s } from "@mxenabled/mx-icons";
+import { jsx as r, jsxs as d } from "react/jsx-runtime";
+var m = (t) => t ? t.logo_name ? /* @__PURE__ */ r(s, {
+  name: t.logo_name,
+  size: 16,
+  sx: { color: t.logo_color }
+}) : t.institution_guid ? /* @__PURE__ */ r(u, {
+  alt: t.institution_name,
+  institutionGuid: t.institution_guid,
+  size: 16
+}) : t.merchant_guid ? /* @__PURE__ */ r(o, {
+  alt: t.merchant_name,
+  categoryGuid: t.category_guid,
+  merchantGuid: t.merchant_guid,
+  size: 16
+}) : t.category_guid ? /* @__PURE__ */ r(a, {
+  categoryGuid: t.category_guid,
+  size: 16
+}) : null : null, y = ({ subtitle: t }) => {
+  const { logo: e, text: i } = t;
+  return /* @__PURE__ */ d(n, {
+    sx: {
+      alignItems: "center",
+      flexDirection: "row",
+      gap: 8
+    },
+    children: [m(e), /* @__PURE__ */ r(c, {
+      color: "text.secondary",
+      variant: "body2",
+      children: i
+    })]
+  });
+};
+export {
+  y as default
+};
+
+//# sourceMappingURL=SubHeader.es.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"SubHeader.es.js","names":[],"sources":["../../../src/insights-v2/components/SubHeader.tsx"],"sourcesContent":["import Stack from '@mui/material/Stack'\n\nimport { CategoryIcon, InstitutionLogo, MerchantLogo, Text } from '@mxenabled/mxui'\nimport { Icon } from '@mxenabled/mx-icons'\nimport type { Logo, Subtitle } from '../../core'\n\ninterface SubHeaderProps {\n  subtitle: Subtitle\n}\n\nconst renderLogo = (logo: Logo | undefined) => {\n  if (!logo) return null\n\n  if (logo.logo_name) {\n    return <Icon name={logo.logo_name} size={16} sx={{ color: logo.logo_color }} />\n  }\n\n  if (logo.institution_guid) {\n    return (\n      <InstitutionLogo\n        alt={logo.institution_name as string}\n        institutionGuid={logo.institution_guid}\n        size={16}\n      />\n    )\n  }\n\n  if (logo.merchant_guid) {\n    return (\n      <MerchantLogo\n        alt={logo.merchant_name as string}\n        categoryGuid={logo.category_guid as string}\n        merchantGuid={logo.merchant_guid}\n        size={16}\n      />\n    )\n  }\n\n  if (logo.category_guid) {\n    return <CategoryIcon categoryGuid={logo.category_guid} size={16} />\n  }\n\n  return null\n}\n\nconst SubHeader = ({ subtitle }: SubHeaderProps) => {\n  const { logo, text } = subtitle\n\n  return (\n    <Stack sx={{ alignItems: 'center', flexDirection: 'row', gap: 8 }}>\n      {renderLogo(logo)}\n      <Text color=\"text.secondary\" variant=\"body2\">\n        {text}\n      </Text>\n    </Stack>\n  )\n}\n\nexport default SubHeader\n"],"mappings":";;;;AAUA,IAAM,IAAA,CAAc,MACb,IAED,EAAK,YACA,gBAAA,EAAC,GAAD;AAAA,EAAM,MAAM,EAAK;AAAA,EAAW,MAAM;AAAA,EAAI,IAAI,EAAE,OAAO,EAAK,WAAW;AAAI,CAAA,IAG5E,EAAK,mBAEL,gBAAA,EAAC,GAAD;AAAA,EACE,KAAK,EAAK;AAAA,EACV,iBAAiB,EAAK;AAAA,EACtB,MAAM;AACP,CAAA,IAID,EAAK,gBAEL,gBAAA,EAAC,GAAD;AAAA,EACE,KAAK,EAAK;AAAA,EACV,cAAc,EAAK;AAAA,EACnB,cAAc,EAAK;AAAA,EACnB,MAAM;AACP,CAAA,IAID,EAAK,gBACA,gBAAA,EAAC,GAAD;AAAA,EAAc,cAAc,EAAK;AAAA,EAAe,MAAM;AAAK,CAAA,IAG7D,OA/BW,MAkCd,IAAA,CAAa,EAAE,UAAA,EAAA,MAA+B;AAClD,QAAM,EAAE,MAAA,GAAM,MAAA,EAAA,IAAS;AAEvB,SACE,gBAAA,EAAC,GAAD;AAAA,IAAO,IAAI;AAAA,MAAE,YAAY;AAAA,MAAU,eAAe;AAAA,MAAO,KAAK;AAAA,IAAE;AAAA,IAAhE,UAAA,CACG,EAAW,CAAI,GAChB,gBAAA,EAAC,GAAD;AAAA,MAAM,OAAM;AAAA,MAAiB,SAAQ;AAAA,MAClC,UAAA;AAAA,IACG,CAAA,CACD;AAAA;AAEX"}

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

@@ -0,0 +1,27 @@
+import { ReactNode } from 'react';
+import { SxProps } from '@mui/material/styles';
+interface SubscriptionHeroCardProps {
+    /** Central hero brand/merchant logo. */
+    logo: ReactNode;
+    /** Subscription/merchant name. */
+    name: ReactNode;
+    /** Price, e.g. "$16.06 / month". Rendered as a dark pill. */
+    price: ReactNode;
+    /** Optional decorative backdrop (e.g. scattered faded logos) behind the hero. */
+    backdrop?: ReactNode;
+    /** Card surface color/background token. */
+    bgcolor?: string;
+    sx?: SxProps;
+}
+/**
+ * A hero subscription card: a centered brand logo, name, and price pill over an
+ * optional decorative backdrop.
+ *
+ * Figma: Upcoming Subscription Content (`Card / Content / Slot`) — padding 24,
+ * `background.default` surface, a 64px hero `<Logo>`, name (`h2`) and a dark
+ * price pill, with faded scattered logos behind.
+ *
+ * Scope is the Content section only; Header/Description are out of scope.
+ */
+declare const SubscriptionHeroCard: ({ backdrop, bgcolor, logo, name, price, sx, }: SubscriptionHeroCardProps) => import("react/jsx-runtime").JSX.Element;
+export default SubscriptionHeroCard;

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

@@ -0,0 +1,63 @@
+import x from "./AmountPill.es.js";
+import e from "@mui/material/Stack";
+import { Text as p } from "@mxenabled/mxui";
+import { jsx as i, jsxs as r } from "react/jsx-runtime";
+import t from "@mui/material/Box";
+var g = ({ backdrop: o, bgcolor: n = "background.default", logo: l, name: d, price: s, sx: a }) => /* @__PURE__ */ i(e, {
+  sx: {
+    px: 16,
+    width: "100%",
+    ...a
+  },
+  children: /* @__PURE__ */ r(t, {
+    sx: {
+      bgcolor: n,
+      borderRadius: "8px",
+      overflow: "hidden",
+      position: "relative",
+      width: "100%"
+    },
+    children: [o && /* @__PURE__ */ i(t, {
+      "aria-hidden": !0,
+      sx: {
+        inset: 0,
+        position: "absolute"
+      },
+      children: o
+    }), /* @__PURE__ */ r(e, {
+      sx: {
+        alignItems: "center",
+        gap: 12,
+        position: "relative",
+        px: 24,
+        py: 24
+      },
+      children: [/* @__PURE__ */ i(t, {
+        sx: {
+          display: "flex",
+          flexShrink: 0
+        },
+        children: l
+      }), /* @__PURE__ */ r(e, {
+        sx: {
+          alignItems: "center",
+          gap: 2
+        },
+        children: [/* @__PURE__ */ i(p, {
+          bold: !0,
+          variant: "h2",
+          children: d
+        }), /* @__PURE__ */ i(x, {
+          px: 10,
+          sx: { alignSelf: "center" },
+          children: s
+        })]
+      })]
+    })]
+  })
+});
+export {
+  g as default
+};
+
+//# sourceMappingURL=SubscriptionHeroCard.es.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"SubscriptionHeroCard.es.js","names":[],"sources":["../../../src/insights-v2/components/SubscriptionHeroCard.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\nimport AmountPill from './AmountPill'\n\ninterface SubscriptionHeroCardProps {\n  /** Central hero brand/merchant logo. */\n  logo: ReactNode\n  /** Subscription/merchant name. */\n  name: ReactNode\n  /** Price, e.g. \"$16.06 / month\". Rendered as a dark pill. */\n  price: ReactNode\n  /** Optional decorative backdrop (e.g. scattered faded logos) behind the hero. */\n  backdrop?: ReactNode\n  /** Card surface color/background token. */\n  bgcolor?: string\n  sx?: SxProps\n}\n\n/**\n * A hero subscription card: a centered brand logo, name, and price pill over an\n * optional decorative backdrop.\n *\n * Figma: Upcoming Subscription Content (`Card / Content / Slot`) — padding 24,\n * `background.default` surface, a 64px hero `<Logo>`, name (`h2`) and a dark\n * price pill, with faded scattered logos behind.\n *\n * Scope is the Content section only; Header/Description are out of scope.\n */\nconst SubscriptionHeroCard = ({\n  backdrop,\n  bgcolor = 'background.default',\n  logo,\n  name,\n  price,\n  sx,\n}: SubscriptionHeroCardProps) => (\n  <Stack sx={{ px: 16, width: '100%', ...sx }}>\n    <Box\n      sx={{\n        bgcolor,\n        borderRadius: '8px',\n        overflow: 'hidden',\n        position: 'relative',\n        width: '100%',\n      }}\n    >\n      {backdrop && (\n        <Box aria-hidden={true} sx={{ inset: 0, position: 'absolute' }}>\n          {backdrop}\n        </Box>\n      )}\n      <Stack sx={{ alignItems: 'center', gap: 12, position: 'relative', px: 24, py: 24 }}>\n        <Box sx={{ display: 'flex', flexShrink: 0 }}>{logo}</Box>\n        <Stack sx={{ alignItems: 'center', gap: 2 }}>\n          <Text bold={true} variant=\"h2\">\n            {name}\n          </Text>\n          <AmountPill px={10} sx={{ alignSelf: 'center' }}>\n            {price}\n          </AmountPill>\n        </Stack>\n      </Stack>\n    </Box>\n  </Stack>\n)\n\nexport default SubscriptionHeroCard\n"],"mappings":";;;;;AAkCA,IAAM,IAAA,CAAwB,EAC5B,UAAA,GACA,SAAA,IAAU,sBACV,MAAA,GACA,MAAA,GACA,OAAA,GACA,IAAA,EAAA,MAEA,gBAAA,EAAC,GAAD;AAAA,EAAO,IAAI;AAAA,IAAE,IAAI;AAAA,IAAI,OAAO;AAAA,IAAQ,GAAG;AAAA,EAAG;AAAA,EACxC,UAAA,gBAAA,EAAC,GAAD;AAAA,IACE,IAAI;AAAA,MACF,SAAA;AAAA,MACA,cAAc;AAAA,MACd,UAAU;AAAA,MACV,UAAU;AAAA,MACV,OAAO;AAAA,IACT;AAAA,IAPF,UAAA,CASG,KACC,gBAAA,EAAC,GAAD;AAAA,MAAK,eAAa;AAAA,MAAM,IAAI;AAAA,QAAE,OAAO;AAAA,QAAG,UAAU;AAAA,MAAW;AAAA,MAC1D,UAAA;AAAA,IACE,CAAA,GAEP,gBAAA,EAAC,GAAD;AAAA,MAAO,IAAI;AAAA,QAAE,YAAY;AAAA,QAAU,KAAK;AAAA,QAAI,UAAU;AAAA,QAAY,IAAI;AAAA,QAAI,IAAI;AAAA,MAAG;AAAA,MAAjF,UAAA,CACE,gBAAA,EAAC,GAAD;AAAA,QAAK,IAAI;AAAA,UAAE,SAAS;AAAA,UAAQ,YAAY;AAAA,QAAE;AAAA,QAAI,UAAA;AAAA,MAAU,CAAA,GACxD,gBAAA,EAAC,GAAD;AAAA,QAAO,IAAI;AAAA,UAAE,YAAY;AAAA,UAAU,KAAK;AAAA,QAAE;AAAA,QAA1C,UAAA,CACE,gBAAA,EAAC,GAAD;AAAA,UAAM,MAAM;AAAA,UAAM,SAAQ;AAAA,UACvB,UAAA;AAAA,QACG,CAAA,GACN,gBAAA,EAAC,GAAD;AAAA,UAAY,IAAI;AAAA,UAAI,IAAI,EAAE,WAAW,SAAS;AAAA,UAC3C,UAAA;AAAA,QACS,CAAA,CACP;AAAA,MACF,CAAA,CAAA;AAAA,IACJ,CAAA,CAAA;AAAA;AACA,CAAA"}

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

@@ -0,0 +1,45 @@
+import { ReactNode } from 'react';
+import { SxProps } from '@mui/material/styles';
+import { InsightTransactionRowProps } from './InsightTransactionRow';
+export interface FooterRow {
+    label: ReactNode;
+    amount: ReactNode;
+    amountColor?: string;
+}
+type TransactionListCardVariant = 'default' | 'primary';
+interface TransactionListCardProps {
+    /** Optional header label above the rows (e.g. "{Date}", "3 transactions"). */
+    header?: ReactNode;
+    /** One or more transaction rows. */
+    rows: InsightTransactionRowProps[];
+    /** Optional summary/total row rendered beneath a divider. */
+    footer?: FooterRow;
+    /**
+     * Card style:
+     * - `default` — grey utility header, hairline border, radius 4.
+     * - `primary` — filled `primary.main` header with white text and a matching
+     *   border, radius 8 (Figma "Multi" variant).
+     *
+     * In both cases the header is borderless; the border wraps the content block
+     * below it.
+     */
+    variant?: TransactionListCardVariant;
+    /**
+     * Optional background applied to the Slot behind the card. Must be a valid CSS
+     * background string (gradient or color in CSS format); MUI theme tokens are
+     * not resolved here (this is the CSS `background` shorthand, not `bgcolor`), so
+     * use a CSS color literal instead. When set, the inner card renders borderless
+     * on a white surface inside the padded Slot (Figma HSA Deposit).
+     */
+    background?: string;
+    sx?: SxProps;
+}
+/**
+ * List card composing an optional header label, one or more
+ * `InsightTransactionRow`s (divided), and an optional footer/total row.
+ * `variant` supplies the Figma design defaults for the two card styles.
+ *
+ * Scope is the Content section only; Header/Description are out of scope.
+ */
+declare const TransactionListCard: ({ background, footer, header, rows, variant, sx, }: TransactionListCardProps) => import("react/jsx-runtime").JSX.Element | null;
+export default TransactionListCard;

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

@@ -0,0 +1,118 @@
+import C from "./InsightTransactionRow.es.js";
+import { Fragment as R } from "react";
+import t from "@mui/material/Stack";
+import { Text as h } from "@mxenabled/mxui";
+import { Fragment as x, jsx as r, jsxs as d } from "react/jsx-runtime";
+import v from "@mui/material/Box";
+import p from "@mui/material/Divider";
+var w = (n) => n === "primary" ? {
+  radius: "8px",
+  borderColor: "primary.main",
+  headerBg: "primary.main",
+  headerColor: "primary.contrastText",
+  headerBold: !1,
+  headerInsideBorder: !1,
+  headerSx: {
+    minHeight: 24,
+    px: 12,
+    py: 4
+  }
+} : {
+  radius: "4px",
+  borderColor: "divider",
+  headerBg: "background.default",
+  headerColor: "text.secondary",
+  headerBold: !0,
+  headerInsideBorder: !0,
+  headerSx: {
+    minHeight: 40,
+    px: 16,
+    py: 2
+  }
+}, H = ({ background: n, footer: l, header: a, rows: m, variant: g = "default", sx: b }) => {
+  if (m.length === 0) return null;
+  const e = w(g), i = !!n, o = i ? "8px" : e.radius, s = !!a && !i && e.headerInsideBorder, c = a ? /* @__PURE__ */ r(t, {
+    sx: {
+      bgcolor: e.headerBg,
+      justifyContent: "center",
+      ...e.headerSx
+    },
+    children: /* @__PURE__ */ r(h, {
+      bold: e.headerBold,
+      color: e.headerColor,
+      variant: "caption",
+      children: a
+    })
+  }) : null, f = l ? /* @__PURE__ */ d(x, { children: [/* @__PURE__ */ r(p, {}), /* @__PURE__ */ d(t, {
+    sx: {
+      alignItems: "center",
+      bgcolor: i ? "background.paper" : "background.default",
+      flexDirection: "row",
+      justifyContent: "space-between",
+      minHeight: 40,
+      px: 16,
+      py: 2
+    },
+    children: [/* @__PURE__ */ r(h, {
+      color: "text.secondary",
+      variant: "caption",
+      children: l.label
+    }), /* @__PURE__ */ r(h, {
+      bold: !0,
+      color: l.amountColor ?? "text.primary",
+      variant: "body2",
+      children: l.amount
+    })]
+  })] }) : null, B = /* @__PURE__ */ r(t, {
+    role: "list",
+    sx: { width: "100%" },
+    children: m.map((y, u) => /* @__PURE__ */ d(R, { children: [u > 0 && /* @__PURE__ */ r(p, { role: "presentation" }), /* @__PURE__ */ r(v, {
+      role: "listitem",
+      children: /* @__PURE__ */ r(C, { ...y })
+    })] }, u))
+  });
+  return /* @__PURE__ */ d(t, {
+    sx: {
+      ...i ? {
+        background: n,
+        p: 16
+      } : {
+        pt: 8,
+        px: 16
+      },
+      width: "100%",
+      ...b
+    },
+    children: [!s && c && /* @__PURE__ */ r(t, {
+      sx: {
+        borderTopLeftRadius: o,
+        borderTopRightRadius: o,
+        overflow: "hidden"
+      },
+      children: c
+    }), /* @__PURE__ */ d(t, {
+      sx: {
+        ...i ? { bgcolor: "background.paper" } : {
+          border: "1px solid",
+          borderColor: e.borderColor
+        },
+        borderBottomLeftRadius: o,
+        borderBottomRightRadius: o,
+        borderTopLeftRadius: s || !a ? o : 0,
+        borderTopRightRadius: s || !a ? o : 0,
+        overflow: "hidden",
+        width: "100%"
+      },
+      children: [
+        s && /* @__PURE__ */ d(x, { children: [c, /* @__PURE__ */ r(p, {})] }),
+        B,
+        f
+      ]
+    })]
+  });
+};
+export {
+  H as default
+};
+
+//# sourceMappingURL=TransactionListCard.es.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"TransactionListCard.es.js","names":[],"sources":["../../../src/insights-v2/components/TransactionListCard.tsx"],"sourcesContent":["import { Fragment, type ReactNode } from 'react'\n\nimport Box from '@mui/material/Box'\nimport Divider from '@mui/material/Divider'\nimport Stack from '@mui/material/Stack'\nimport type { SxProps } from '@mui/material/styles'\n\nimport { Text } from '@mxenabled/mxui'\n\nimport InsightTransactionRow, { type InsightTransactionRowProps } from './InsightTransactionRow'\n\nexport interface FooterRow {\n  label: ReactNode\n  amount: ReactNode\n  amountColor?: string\n}\n\ntype TransactionListCardVariant = 'default' | 'primary'\n\ninterface TransactionListCardProps {\n  /** Optional header label above the rows (e.g. \"{Date}\", \"3 transactions\"). */\n  header?: ReactNode\n  /** One or more transaction rows. */\n  rows: InsightTransactionRowProps[]\n  /** Optional summary/total row rendered beneath a divider. */\n  footer?: FooterRow\n  /**\n   * Card style:\n   * - `default` — grey utility header, hairline border, radius 4.\n   * - `primary` — filled `primary.main` header with white text and a matching\n   *   border, radius 8 (Figma \"Multi\" variant).\n   *\n   * In both cases the header is borderless; the border wraps the content block\n   * below it.\n   */\n  variant?: TransactionListCardVariant\n  /**\n   * Optional background applied to the Slot behind the card. Must be a valid CSS\n   * background string (gradient or color in CSS format); MUI theme tokens are\n   * not resolved here (this is the CSS `background` shorthand, not `bgcolor`), so\n   * use a CSS color literal instead. When set, the inner card renders borderless\n   * on a white surface inside the padded Slot (Figma HSA Deposit).\n   */\n  background?: string\n  sx?: SxProps\n}\n\nconst getVariantStyles = (variant: TransactionListCardVariant) => {\n  switch (variant) {\n    case 'primary':\n      // Borderless filled header on top of the bordered rows block.\n      return {\n        radius: '8px',\n        borderColor: 'primary.main',\n        headerBg: 'primary.main',\n        headerColor: 'primary.contrastText',\n        headerBold: false,\n        headerInsideBorder: false,\n        headerSx: { minHeight: 24, px: 12, py: 4 } as const,\n      }\n    default:\n      // A single border wraps the card; the grey header sits inside it.\n      return {\n        radius: '4px',\n        borderColor: 'divider',\n        headerBg: 'background.default',\n        headerColor: 'text.secondary',\n        headerBold: true,\n        headerInsideBorder: true,\n        headerSx: { minHeight: 40, px: 16, py: 2 } as const,\n      }\n  }\n}\n\n/**\n * List card composing an optional header label, one or more\n * `InsightTransactionRow`s (divided), and an optional footer/total row.\n * `variant` supplies the Figma design defaults for the two card styles.\n *\n * Scope is the Content section only; Header/Description are out of scope.\n */\nconst TransactionListCard = ({\n  background,\n  footer,\n  header,\n  rows,\n  variant = 'default',\n  sx,\n}: TransactionListCardProps) => {\n  // rows usually comes from mapped API data, so an empty array is reachable and\n  // would render a broken border shell; render nothing instead.\n  if (rows.length === 0) return null\n\n  const styles = getVariantStyles(variant)\n  const hasBackground = Boolean(background)\n  const radius = hasBackground ? '8px' : styles.radius\n  // The header sits inside the border only for the bordered `default` variant;\n  // for `primary`/backgrounded cards it sits above a separately-bordered body.\n  const headerInsideBorder = Boolean(header) && !hasBackground && styles.headerInsideBorder\n\n  const headerBlock = header ? (\n    <Stack sx={{ bgcolor: styles.headerBg, justifyContent: 'center', ...styles.headerSx }}>\n      <Text bold={styles.headerBold} color={styles.headerColor} variant=\"caption\">\n        {header}\n      </Text>\n    </Stack>\n  ) : null\n\n  const footerBlock = footer ? (\n    <>\n      <Divider />\n      <Stack\n        sx={{\n          alignItems: 'center',\n          bgcolor: hasBackground ? 'background.paper' : 'background.default',\n          flexDirection: 'row',\n          justifyContent: 'space-between',\n          minHeight: 40,\n          px: 16,\n          py: 2,\n        }}\n      >\n        <Text color=\"text.secondary\" variant=\"caption\">\n          {footer.label}\n        </Text>\n        <Text bold={true} color={footer.amountColor ?? 'text.primary'} variant=\"body2\">\n          {footer.amount}\n        </Text>\n      </Stack>\n    </>\n  ) : null\n\n  const rowsBlock = (\n    <Stack role=\"list\" sx={{ width: '100%' }}>\n      {rows.map((row, index) => (\n        // Static, caller-ordered list that may contain identical rows, so the\n        // array index is the correct key (a content-based key would collide).\n        // eslint-disable-next-line react/no-array-index-key\n        <Fragment key={index}>\n          {index > 0 && <Divider role=\"presentation\" />}\n          <Box role=\"listitem\">\n            <InsightTransactionRow {...row} />\n          </Box>\n        </Fragment>\n      ))}\n    </Stack>\n  )\n\n  return (\n    <Stack\n      sx={{\n        ...(hasBackground ? { background, p: 16 } : { pt: 8, px: 16 }),\n        width: '100%',\n        ...sx,\n      }}\n    >\n      {/* Header above the border for `primary`/backgrounded cards; top-rounded. */}\n      {!headerInsideBorder && headerBlock && (\n        <Stack\n          sx={{\n            borderTopLeftRadius: radius,\n            borderTopRightRadius: radius,\n            overflow: 'hidden',\n          }}\n        >\n          {headerBlock}\n        </Stack>\n      )}\n\n      <Stack\n        sx={{\n          ...(hasBackground\n            ? { bgcolor: 'background.paper' }\n            : { border: '1px solid', borderColor: styles.borderColor }),\n          borderBottomLeftRadius: radius,\n          borderBottomRightRadius: radius,\n          borderTopLeftRadius: headerInsideBorder || !header ? radius : 0,\n          borderTopRightRadius: headerInsideBorder || !header ? radius : 0,\n          overflow: 'hidden',\n          width: '100%',\n        }}\n      >\n        {/* Header inside the border for the `default` table variant. */}\n        {headerInsideBorder && (\n          <>\n            {headerBlock}\n            <Divider />\n          </>\n        )}\n        {rowsBlock}\n        {footerBlock}\n      </Stack>\n    </Stack>\n  )\n}\n\nexport default TransactionListCard\n"],"mappings":"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"}

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

@@ -0,0 +1,44 @@
+import { ReactNode } from 'react';
+import { SxProps } from '@mui/material/styles';
+interface TransferLogoCardProps {
+    /** Source institution logo (left). */
+    from: ReactNode;
+    /** Destination institution logo (right). */
+    to: ReactNode;
+    /** Logo tile size in px (Figma: 64). */
+    size?: number;
+    /** Arrow icon rendered in the center badge. Defaults to a right arrow. */
+    icon?: ReactNode;
+    /**
+     * Enlarge the inner connector dots (6px vs 4px), matching the Discovered
+     * Accounts insight for cross-insight consistency. Default true.
+     */
+    hasBigDots?: boolean;
+    /** Center badge background color token. Default `neutral.darker` (dark circle
+     * for Switch DD default; set to `success.main` for Discovered Accounts success). */
+    badgeBgColor?: string;
+    /** Slot surface color token. Default `primary.lighter` (Figma's tinted slot,
+     * theme-aware: light-blue in light mode, navy in dark). */
+    bgcolor?: string;
+    /**
+     * Optional background image (e.g., celebration gradient) for success states.
+     * Layered over the `bgcolor` via `backgroundImage` (not `background` shorthand).
+     */
+    backgroundImage?: string;
+    /**
+     * Show a confetti animation filling the slot (for success/celebration states).
+     * Requires `useContainerDimensions` to measure the slot. Default false.
+     */
+    showConfetti?: boolean;
+    sx?: SxProps;
+}
+/**
+ * A from → to account transfer visual: two institution logos on a rounded track
+ * with a central arrow badge and connector dots between them.
+ *
+ * Figma: Switch Direct Deposit (default) Content. Structure ported from v1
+ * `insights/components/shared/ConnectionCard` (grid-overlaid track + row).
+ * Scope is the Content section only.
+ */
+declare const TransferLogoCard: ({ badgeBgColor, bgcolor, backgroundImage, from, hasBigDots, icon, showConfetti, size, to, sx, }: TransferLogoCardProps) => import("react/jsx-runtime").JSX.Element;
+export default TransferLogoCard;

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

@@ -0,0 +1,121 @@
+import { useContainerDimensions as g } from "../hooks/useContainerDimensions.es.js";
+import { Confetti as w } from "./shared/Confetti.es.js";
+import { useRef as v } from "react";
+import d from "@mui/material/Stack";
+import { Icon as I } from "@mxenabled/mx-icons";
+import { jsx as r, jsxs as n } from "react/jsx-runtime";
+import t from "@mui/material/Box";
+import R from "@mui/material/Card";
+var C = 240, b = 40, y = 204, T = /* @__PURE__ */ r(I, {
+  "aria-hidden": !0,
+  name: "arrow_forward",
+  size: 20,
+  sx: { color: "neutral.lighter" }
+}), a = ({ size: e = 4 }) => /* @__PURE__ */ r(t, { sx: {
+  bgcolor: "neutral.darker",
+  borderRadius: "4px",
+  height: e,
+  width: e
+} }), D = () => {
+  const e = v(null), { height: i, width: o } = g(e);
+  return /* @__PURE__ */ r(t, {
+    "aria-hidden": !0,
+    ref: e,
+    sx: {
+      inset: 0,
+      position: "absolute",
+      zIndex: 0
+    },
+    children: /* @__PURE__ */ r(w, {
+      height: i,
+      shouldRun: i > 0,
+      width: o
+    })
+  });
+}, K = ({ badgeBgColor: e = "neutral.darker", bgcolor: i = "primary.lighter", backgroundImage: o, from: c, hasBigDots: f = !0, icon: x = T, showConfetti: m = !1, size: s = 64, to: p, sx: u }) => {
+  const l = f ? 6 : 4, h = {
+    borderRadius: "4px",
+    flexShrink: 0,
+    height: s,
+    overflow: "hidden",
+    width: s
+  };
+  return /* @__PURE__ */ n(t, {
+    sx: {
+      bgcolor: i,
+      ...o && { backgroundImage: o },
+      p: 16,
+      position: "relative",
+      width: "100%",
+      ...u
+    },
+    children: [m && /* @__PURE__ */ r(D, {}), /* @__PURE__ */ r(R, {
+      sx: {
+        position: "relative",
+        py: 16,
+        zIndex: 1
+      },
+      children: /* @__PURE__ */ n(t, {
+        sx: {
+          display: "grid",
+          placeItems: "center"
+        },
+        children: [/* @__PURE__ */ r(t, { sx: {
+          bgcolor: "neutral.lighter",
+          borderRadius: "24px",
+          gridArea: "1 / 1",
+          height: b,
+          width: C
+        } }), /* @__PURE__ */ n(d, {
+          sx: {
+            alignItems: "center",
+            flexDirection: "row",
+            gridArea: "1 / 1",
+            height: s,
+            justifyContent: "space-between",
+            width: y
+          },
+          children: [
+            /* @__PURE__ */ r(t, {
+              sx: h,
+              children: c
+            }),
+            /* @__PURE__ */ n(d, {
+              sx: {
+                alignItems: "center",
+                flexDirection: "row",
+                gap: 4
+              },
+              children: [
+                /* @__PURE__ */ r(a, {}),
+                /* @__PURE__ */ r(a, { size: l }),
+                /* @__PURE__ */ r(d, {
+                  sx: {
+                    alignItems: "center",
+                    bgcolor: e,
+                    borderRadius: "50%",
+                    height: 28,
+                    justifyContent: "center",
+                    width: 28
+                  },
+                  children: x
+                }),
+                /* @__PURE__ */ r(a, { size: l }),
+                /* @__PURE__ */ r(a, {})
+              ]
+            }),
+            /* @__PURE__ */ r(t, {
+              sx: h,
+              children: p
+            })
+          ]
+        })]
+      })
+    })]
+  });
+};
+export {
+  K as default
+};
+
+//# sourceMappingURL=TransferLogoCard.es.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"TransferLogoCard.es.js","names":[],"sources":["../../../src/insights-v2/components/TransferLogoCard.tsx"],"sourcesContent":["import type { ReactNode } from 'react'\nimport { useRef } from 'react'\n\nimport Box from '@mui/material/Box'\nimport Card from '@mui/material/Card'\nimport Stack from '@mui/material/Stack'\nimport type { SxProps } from '@mui/material/styles'\n\nimport { Icon } from '@mxenabled/mx-icons'\n\nimport { Confetti } from './shared/Confetti'\nimport { useContainerDimensions } from '../hooks/useContainerDimensions'\n\n// Figma track/row footprints (mirrors v1 `shared/ConnectionCard`): a 240×40\n// rounded track centered behind a 204×64 row of logos + center badge.\nconst TRACK_WIDTH = 240\nconst TRACK_HEIGHT = 40\nconst ROW_WIDTH = 204\n\ninterface TransferLogoCardProps {\n  /** Source institution logo (left). */\n  from: ReactNode\n  /** Destination institution logo (right). */\n  to: ReactNode\n  /** Logo tile size in px (Figma: 64). */\n  size?: number\n  /** Arrow icon rendered in the center badge. Defaults to a right arrow. */\n  icon?: ReactNode\n  /**\n   * Enlarge the inner connector dots (6px vs 4px), matching the Discovered\n   * Accounts insight for cross-insight consistency. Default true.\n   */\n  hasBigDots?: boolean\n  /** Center badge background color token. Default `neutral.darker` (dark circle\n   * for Switch DD default; set to `success.main` for Discovered Accounts success). */\n  badgeBgColor?: string\n  /** Slot surface color token. Default `primary.lighter` (Figma's tinted slot,\n   * theme-aware: light-blue in light mode, navy in dark). */\n  bgcolor?: string\n  /**\n   * Optional background image (e.g., celebration gradient) for success states.\n   * Layered over the `bgcolor` via `backgroundImage` (not `background` shorthand).\n   */\n  backgroundImage?: string\n  /**\n   * Show a confetti animation filling the slot (for success/celebration states).\n   * Requires `useContainerDimensions` to measure the slot. Default false.\n   */\n  showConfetti?: boolean\n  sx?: SxProps\n}\n\n// Default center-badge glyph. Hoisted to a stable reference so it isn't\n// re-created each render (`neutral.lighter` is the theme-aware inverse of the\n// badge fill: light glyph on dark badge, and vice-versa in dark).\nconst defaultTransferIcon = (\n  <Icon aria-hidden={true} name=\"arrow_forward\" size={20} sx={{ color: 'neutral.lighter' }} />\n)\n\n// Connector dot: a small rounded square that reads as a dot at this size\n// (matches v1 `ConnectionCard`'s `Dot`). `neutral.darker` is theme-aware. The\n// inner pair is larger (`bigDots`, as Discovered Accounts uses) than the outer.\nconst Dot = ({ size = 4 }: { size?: number }) => (\n  <Box sx={{ bgcolor: 'neutral.darker', borderRadius: '4px', height: size, width: size }} />\n)\n\n/**\n * Confetti overlay for the success state. Measures the container and fires the\n * burst once dimensions arrive. Scoped to this component so the resize listener\n * only mounts when confetti is shown.\n */\nconst ConfettiOverlay = () => {\n  const overlayRef = useRef<HTMLDivElement>(null)\n  const { height, width } = useContainerDimensions(overlayRef)\n  return (\n    <Box aria-hidden={true} ref={overlayRef} sx={{ inset: 0, position: 'absolute', zIndex: 0 }}>\n      <Confetti height={height} shouldRun={height > 0} width={width} />\n    </Box>\n  )\n}\n\n/**\n * A from → to account transfer visual: two institution logos on a rounded track\n * with a central arrow badge and connector dots between them.\n *\n * Figma: Switch Direct Deposit (default) Content. Structure ported from v1\n * `insights/components/shared/ConnectionCard` (grid-overlaid track + row).\n * Scope is the Content section only.\n */\nconst TransferLogoCard = ({\n  badgeBgColor = 'neutral.darker',\n  bgcolor = 'primary.lighter',\n  backgroundImage,\n  from,\n  hasBigDots = true,\n  icon = defaultTransferIcon,\n  showConfetti = false,\n  size = 64,\n  to,\n  sx,\n}: TransferLogoCardProps) => {\n  const dotSize = hasBigDots ? 6 : 4\n  const logoSx = {\n    borderRadius: '4px',\n    flexShrink: 0,\n    height: size,\n    overflow: 'hidden',\n    width: size,\n  } as const\n\n  return (\n    <Box\n      sx={{\n        bgcolor,\n        ...(backgroundImage && { backgroundImage }),\n        p: 16,\n        // Positioned wrapper so the confetti overlay can fill the slot; the card\n        // sits above it (zIndex). No `overflow: hidden` — that would clip the\n        // burst's upper area (per the figma-to-code confetti guidance).\n        position: 'relative',\n        width: '100%',\n        ...sx,\n      }}\n    >\n      {showConfetti && <ConfettiOverlay />}\n      <Card sx={{ position: 'relative', py: 16, zIndex: 1 }}>\n        <Box sx={{ display: 'grid', placeItems: 'center' }}>\n          {/* Grey track, centered behind the row via a shared grid cell. */}\n          <Box\n            sx={{\n              bgcolor: 'neutral.lighter',\n              borderRadius: '24px',\n              gridArea: '1 / 1',\n              height: TRACK_HEIGHT,\n              width: TRACK_WIDTH,\n            }}\n          />\n          <Stack\n            sx={{\n              alignItems: 'center',\n              flexDirection: 'row',\n              gridArea: '1 / 1',\n              height: size,\n              justifyContent: 'space-between',\n              width: ROW_WIDTH,\n            }}\n          >\n            <Box sx={logoSx}>{from}</Box>\n            <Stack sx={{ alignItems: 'center', flexDirection: 'row', gap: 4 }}>\n              <Dot />\n              <Dot size={dotSize} />\n              <Stack\n                sx={{\n                  alignItems: 'center',\n                  bgcolor: badgeBgColor,\n                  borderRadius: '50%',\n                  height: 28,\n                  justifyContent: 'center',\n                  width: 28,\n                }}\n              >\n                {icon}\n              </Stack>\n              <Dot size={dotSize} />\n              <Dot />\n            </Stack>\n            <Box sx={logoSx}>{to}</Box>\n          </Stack>\n        </Box>\n      </Card>\n    </Box>\n  )\n}\n\nexport default TransferLogoCard\n"],"mappings":";;;;;;;;AAeA,IAAM,IAAc,KACd,IAAe,IACf,IAAY,KAsCZ,IACJ,gBAAA,EAAC,GAAD;AAAA,EAAM,eAAa;AAAA,EAAM,MAAK;AAAA,EAAgB,MAAM;AAAA,EAAI,IAAI,EAAE,OAAO,kBAAkB;AAAI,CAAA,GAMvF,IAAA,CAAO,EAAE,MAAA,IAAO,EAAA,MACpB,gBAAA,EAAC,GAAD,EAAK,IAAI;AAAA,EAAE,SAAS;AAAA,EAAkB,cAAc;AAAA,EAAO,QAAQ;AAAA,EAAM,OAAO;AAAK,EAAI,CAAA,GAQrF,IAAA,MAAwB;AAC5B,QAAM,IAAa,EAAuB,IAAI,GACxC,EAAE,QAAA,GAAQ,OAAA,EAAA,IAAU,EAAuB,CAAU;AAC3D,SACE,gBAAA,EAAC,GAAD;AAAA,IAAK,eAAa;AAAA,IAAM,KAAK;AAAA,IAAY,IAAI;AAAA,MAAE,OAAO;AAAA,MAAG,UAAU;AAAA,MAAY,QAAQ;AAAA,IAAE;AAAA,IACvF,UAAA,gBAAA,EAAC,GAAD;AAAA,MAAkB,QAAA;AAAA,MAAQ,WAAW,IAAS;AAAA,MAAU,OAAA;AAAA,IAAQ,CAAA;AAAA,EAC7D,CAAA;AAET,GAUM,IAAA,CAAoB,EACxB,cAAA,IAAe,kBACf,SAAA,IAAU,mBACV,iBAAA,GACA,MAAA,GACA,YAAA,IAAa,IACb,MAAA,IAAO,GACP,cAAA,IAAe,IACf,MAAA,IAAO,IACP,IAAA,GACA,IAAA,EAAA,MAC2B;AAC3B,QAAM,IAAU,IAAa,IAAI,GAC3B,IAAS;AAAA,IACb,cAAc;AAAA,IACd,YAAY;AAAA,IACZ,QAAQ;AAAA,IACR,UAAU;AAAA,IACV,OAAO;AAAA,EACT;AAEA,SACE,gBAAA,EAAC,GAAD;AAAA,IACE,IAAI;AAAA,MACF,SAAA;AAAA,MACA,GAAI,KAAmB,EAAE,iBAAA,EAAgB;AAAA,MACzC,GAAG;AAAA,MAIH,UAAU;AAAA,MACV,OAAO;AAAA,MACP,GAAG;AAAA,IACL;AAAA,IAXF,UAAA,CAaG,KAAgB,gBAAA,EAAC,GAAD,CAAkB,CAAA,GACnC,gBAAA,EAAC,GAAD;AAAA,MAAM,IAAI;AAAA,QAAE,UAAU;AAAA,QAAY,IAAI;AAAA,QAAI,QAAQ;AAAA,MAAE;AAAA,MAClD,UAAA,gBAAA,EAAC,GAAD;AAAA,QAAK,IAAI;AAAA,UAAE,SAAS;AAAA,UAAQ,YAAY;AAAA,QAAS;AAAA,QAAjD,UAAA,CAEE,gBAAA,EAAC,GAAD,EACE,IAAI;AAAA,UACF,SAAS;AAAA,UACT,cAAc;AAAA,UACd,UAAU;AAAA,UACV,QAAQ;AAAA,UACR,OAAO;AAAA,QACT,EACD,CAAA,GACD,gBAAA,EAAC,GAAD;AAAA,UACE,IAAI;AAAA,YACF,YAAY;AAAA,YACZ,eAAe;AAAA,YACf,UAAU;AAAA,YACV,QAAQ;AAAA,YACR,gBAAgB;AAAA,YAChB,OAAO;AAAA,UACT;AAAA,UARF,UAAA;AAAA,YAUE,gBAAA,EAAC,GAAD;AAAA,cAAK,IAAI;AAAA,cAAS,UAAA;AAAA,YAAU,CAAA;AAAA,YAC5B,gBAAA,EAAC,GAAD;AAAA,cAAO,IAAI;AAAA,gBAAE,YAAY;AAAA,gBAAU,eAAe;AAAA,gBAAO,KAAK;AAAA,cAAE;AAAA,cAAhE,UAAA;AAAA,gBACE,gBAAA,EAAC,GAAD,CAAM,CAAA;AAAA,gBACN,gBAAA,EAAC,GAAD,EAAK,MAAM,EAAU,CAAA;AAAA,gBACrB,gBAAA,EAAC,GAAD;AAAA,kBACE,IAAI;AAAA,oBACF,YAAY;AAAA,oBACZ,SAAS;AAAA,oBACT,cAAc;AAAA,oBACd,QAAQ;AAAA,oBACR,gBAAgB;AAAA,oBAChB,OAAO;AAAA,kBACT;AAAA,kBAEC,UAAA;AAAA,gBACI,CAAA;AAAA,gBACP,gBAAA,EAAC,GAAD,EAAK,MAAM,EAAU,CAAA;AAAA,gBACrB,gBAAA,EAAC,GAAD,CAAM,CAAA;AAAA,cACD;AAAA;YACP,gBAAA,EAAC,GAAD;AAAA,cAAK,IAAI;AAAA,cAAS,UAAA;AAAA,YAAQ,CAAA;AAAA,UACrB;AAAA,QACJ,CAAA,CAAA;AAAA;IACD,CAAA,CACH;AAAA;AAET"}