@mx-cartographer/experiences 9.6.0 → 9.6.2

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

@@ -0,0 +1,40 @@
+import { ACCOUNT_CONNECTED_GRADIENT as r, getPrimaryWashGradient as e } from "../../../components/celebrationGradients.es.js";
+var o = {
+  AccountConnect: "account_connect",
+  AccountConnected: "account_connected",
+  SwitchDirectDeposit: "switch_direct_deposit"
+}, a = (t) => ({
+  [o.AccountConnect]: {
+    backgroundImage: e(t),
+    bgcolor: "background.paper",
+    badgeBgColor: "text.secondary",
+    badgeIcon: "link",
+    badgeIconColor: "primary.contrastText",
+    dotColor: "text.secondary",
+    hasBigDots: !0
+  },
+  [o.AccountConnected]: {
+    backgroundImage: r,
+    bgcolor: "background.paper",
+    badgeBgColor: "success.main",
+    badgeIcon: "check",
+    badgeIconColor: "common.white",
+    dotColor: "text.secondary",
+    hasBigDots: !0,
+    showConfetti: !0
+  },
+  [o.SwitchDirectDeposit]: {
+    bgcolor: "primary.lighter",
+    badgeBgColor: "neutral.darker",
+    badgeIcon: "arrow_forward",
+    badgeIconColor: "neutral.lighter",
+    dotColor: "neutral.darker",
+    hasBigDots: !1
+  }
+});
+export {
+  o as accountSwitchVariant,
+  a as getLayoutConfig
+};
+
+//# sourceMappingURL=layout.es.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"layout.es.js","names":[],"sources":["../../../../../src/insights-v2/blocks/ComponentBlocks/AccountSwitchBlock/layout.ts"],"sourcesContent":["import type { Theme } from '@mui/material/styles'\n\nimport {\n  ACCOUNT_CONNECTED_GRADIENT,\n  getPrimaryWashGradient,\n} from '../../../components/celebrationGradients'\n\n/**\n * Account Switch block variants, keyed by the backend `instance_slot.variant`. All share\n * `TransferLogoCard`; only the slot surface, center badge and connector dots differ.\n *\n * - `AccountConnect`      — Discovered Accounts pending: blue gradient, link badge.\n * - `AccountConnected`    — Discovered Accounts success: pink wash, confetti, check badge.\n * - `SwitchDirectDeposit` — Switch Direct Deposit pending: flat tinted slot, arrow badge.\n *   Its complete state is a different layout, served by `direct_deposit_block`.\n */\nexport const accountSwitchVariant = {\n  AccountConnect: 'account_connect',\n  AccountConnected: 'account_connected',\n  SwitchDirectDeposit: 'switch_direct_deposit',\n} as const\n\nexport type AccountSwitchVariant = (typeof accountSwitchVariant)[keyof typeof accountSwitchVariant]\n\nexport interface AccountSwitchLayoutConfig {\n  /** Slot surface color token. */\n  bgcolor: string\n  /** Optional gradient layered over `bgcolor`. */\n  backgroundImage?: string\n  /** Center badge background color token. */\n  badgeBgColor: string\n  /** mx-icons glyph rendered in the center badge. */\n  badgeIcon: string\n  /** Color token for the badge glyph. */\n  badgeIconColor: string\n  /** Connector-dot color token. */\n  dotColor: string\n  /** Enlarge the inner connector dots (6px vs 4px). */\n  hasBigDots: boolean\n  /** Confetti burst filling the slot (success states). */\n  showConfetti?: boolean\n}\n\n/** Per-variant `TransferLogoCard` props (mirrors DirectDepositBlock's `getLayoutConfig`). */\nexport const getLayoutConfig = (\n  theme: Theme,\n): Record<AccountSwitchVariant, AccountSwitchLayoutConfig> => {\n  return {\n    [accountSwitchVariant.AccountConnect]: {\n      backgroundImage: getPrimaryWashGradient(theme),\n      bgcolor: 'background.paper',\n      badgeBgColor: 'text.secondary',\n      badgeIcon: 'link',\n      badgeIconColor: 'primary.contrastText',\n      dotColor: 'text.secondary',\n      hasBigDots: true,\n    },\n    [accountSwitchVariant.AccountConnected]: {\n      backgroundImage: ACCOUNT_CONNECTED_GRADIENT,\n      bgcolor: 'background.paper',\n      badgeBgColor: 'success.main',\n      // Figma \"Common/Check\": a bare check on the solid success badge (not `check_circle`).\n      badgeIcon: 'check',\n      badgeIconColor: 'common.white',\n      dotColor: 'text.secondary',\n      hasBigDots: true,\n      showConfetti: true,\n    },\n    [accountSwitchVariant.SwitchDirectDeposit]: {\n      bgcolor: 'primary.lighter',\n      badgeBgColor: 'neutral.darker',\n      badgeIcon: 'arrow_forward',\n      badgeIconColor: 'neutral.lighter',\n      dotColor: 'neutral.darker',\n      hasBigDots: false,\n    },\n  }\n}\n"],"mappings":";AAgBA,IAAa,IAAuB;AAAA,EAClC,gBAAgB;AAAA,EAChB,kBAAkB;AAAA,EAClB,qBAAqB;AACvB,GAwBa,IAAA,CACX,OAEO;AAAA,EACJ,CAAA,EAAqB,cAAA,GAAiB;AAAA,IACrC,iBAAiB,EAAuB,CAAK;AAAA,IAC7C,SAAS;AAAA,IACT,cAAc;AAAA,IACd,WAAW;AAAA,IACX,gBAAgB;AAAA,IAChB,UAAU;AAAA,IACV,YAAY;AAAA,EACd;AAAA,EACC,CAAA,EAAqB,gBAAA,GAAmB;AAAA,IACvC,iBAAiB;AAAA,IACjB,SAAS;AAAA,IACT,cAAc;AAAA,IAEd,WAAW;AAAA,IACX,gBAAgB;AAAA,IAChB,UAAU;AAAA,IACV,YAAY;AAAA,IACZ,cAAc;AAAA,EAChB;AAAA,EACC,CAAA,EAAqB,mBAAA,GAAsB;AAAA,IAC1C,SAAS;AAAA,IACT,cAAc;AAAA,IACd,WAAW;AAAA,IACX,gBAAgB;AAAA,IAChB,UAAU;AAAA,IACV,YAAY;AAAA,EACd;AACF"}

package/dist/insights-v2/blocks/ComponentBlocks/TransactionBlock/TransactionBlock.d.ts

@@ -4,28 +4,18 @@ interface TransactionBlockProps {
     beatGuid?: string;
 }
 /**
- * Variants from ditto `lib/ditto/beats/large_transaction_v2.yml`:
- * - `with_header` — transaction row under a date header (the `with_merchant` card).
- * - `no_header`   — the row alone (the `no_merchant` card).
- */
-export declare const TransactionBlockVariant: {
-    readonly WithHeader: "with_header";
-    readonly NoHeader: "no_header";
-};
-/**
- * The `transaction_block` (ditto `blocks.name` for LargeTransactionV2).
- *
- * Renders rows the backend already localized and carried inline on `instance_slot.data.series`
- * (`logo`, `primary_text`, `secondary_text`, `amount`). Only the amount is formatted here,
- * because the contract sends it as a number.
+ * The `transaction_block`: rows the backend already localized, carried inline on
+ * `instance_slot.data.series` (`logo`, `primary_text`, `secondary_text`, `amount`). Only the
+ * amount is formatted here, because the contract sends it as a number. `instance_slot.variant`
+ * picks the header and slot treatment from `./layout.ts`.
  *
  * This is the full/mini shape. The reduced widgets (micro, embedded) resolve to the row logo
  * alone, carried flat on `data.logo` with no `series`, and are drawn by `CompactInsightCard`.
  *
- * Under `with_header` the card header comes from `instance_slot.data.header_text`, which tupac sends
- * as the transaction date. It deliberately does *not* come from the first row: on a `with_merchant`
- * card a row's `secondary_text` is the category, so reading it here rendered the category twice
- * and dropped the date entirely.
+ * A header, when the variant shows one, comes from `instance_slot.data.header_text` (the
+ * transaction date, or "{count} transactions"). It deliberately does *not* come from the first
+ * row: on a `with_merchant` card a row's `secondary_text` is the category, so reading it here
+ * rendered the category twice and dropped the date entirely.
  */
 export declare const TransactionBlock: (({ payload }: TransactionBlockProps) => import("react/jsx-runtime").JSX.Element | null) & {
     displayName: string;

package/dist/insights-v2/blocks/ComponentBlocks/TransactionBlock/TransactionBlock.es.js

@@ -1,73 +1,74 @@
-import { useCategoryStore as g } from "../../../../common/context/hooks.es.js";
+import { useCategoryStore as p } from "../../../../common/context/hooks.es.js";
 import { slot as c } from "../../../../core/types/Insights.es.js";
-import { formatCurrency as l } from "../../../../core/utils/NumberFormatting.es.js";
-import { logoFromRef as _ } from "../../../components/shared/EntityLogo.es.js";
-import f from "../../../components/TransactionListCard.es.js";
-import { observer as h } from "mobx-react-lite";
-import { CategoryIcon as y, InstitutionLogo as p, MerchantLogo as x } from "@mxenabled/mxui";
-import { Icon as v } from "@mxenabled/mx-icons";
-import { jsx as r } from "react/jsx-runtime";
-import d from "@mui/material/Box";
-var I = {
-  WithHeader: "with_header",
-  NoHeader: "no_header"
-}, o = 32, G = Math.round(o * 0.625), C = (i, n) => {
-  const t = _(i.logo, i.primary_text);
+import { formatCurrency as _ } from "../../../../core/utils/NumberFormatting.es.js";
+import { logoFromRef as y } from "../../../components/shared/EntityLogo.es.js";
+import { resolveVariantConfig as h } from "../../resolveVariantConfig.es.js";
+import x from "../../../components/TransactionListCard.es.js";
+import { getLayoutConfig as v, transactionBlockVariant as C } from "./layout.es.js";
+import { observer as I } from "mobx-react-lite";
+import { CategoryIcon as G, InstitutionLogo as L, MerchantLogo as O } from "@mxenabled/mxui";
+import { Icon as T } from "@mxenabled/mx-icons";
+import { jsx as o } from "react/jsx-runtime";
+import { useTheme as b } from "@mui/material/styles";
+import u from "@mui/material/Box";
+var r = 32, k = Math.round(r * 0.625), z = (n, a) => {
+  const t = y(n.logo, n.primary_text);
   if (t) {
-    if (t.logo_name) return /* @__PURE__ */ r(d, {
+    if (t.logo_name) return /* @__PURE__ */ o(u, {
       sx: {
         alignItems: "center",
         display: "flex",
-        height: o,
+        height: r,
         justifyContent: "center",
-        width: o
+        width: r
       },
-      children: /* @__PURE__ */ r(v, {
+      children: /* @__PURE__ */ o(T, {
         name: t.logo_name,
-        size: G,
+        size: k,
         sx: { color: t.logo_color }
       })
     });
-    if (t.merchant_guid) return /* @__PURE__ */ r(x, {
+    if (t.merchant_guid) return /* @__PURE__ */ o(O, {
       alt: t.merchant_name ?? "",
-      categoryGuid: t.category_guid ? n(t.category_guid) : "",
+      categoryGuid: t.category_guid ? a(t.category_guid) : "",
       merchantGuid: t.merchant_guid,
-      size: o
+      size: r
     });
-    if (t.institution_guid) return /* @__PURE__ */ r(p, {
+    if (t.institution_guid) return /* @__PURE__ */ o(L, {
       alt: t.institution_name ?? "",
       institutionGuid: t.institution_guid,
-      size: o
+      size: r
     });
     if (t.category_guid) {
-      const a = n(t.category_guid);
-      return /* @__PURE__ */ r(d, {
-        "data-testid": `category-icon-${a}`,
+      const e = a(t.category_guid);
+      return /* @__PURE__ */ o(u, {
+        "data-testid": `category-icon-${e}`,
         sx: { display: "flex" },
-        children: /* @__PURE__ */ r(y, {
-          categoryGuid: a,
-          size: o
+        children: /* @__PURE__ */ o(G, {
+          categoryGuid: e,
+          size: r
         })
       });
     }
   }
-}, j = h(({ payload: i }) => {
-  const { getTopLevelCategoryGuid: n } = g(), { data: t, variant: a } = i.instance_slot, s = c(t, "series"), m = c(t, "header_text");
+}, F = I(({ payload: n }) => {
+  const a = b(), { getTopLevelCategoryGuid: t } = p(), { data: e, variant: d } = n.instance_slot, s = c(e, "series"), m = c(e, "header_text");
   if (!Array.isArray(s) || !s.length) return null;
-  const u = a === I.WithHeader && typeof m == "string" ? m : void 0;
-  return /* @__PURE__ */ r(f, {
-    header: u,
-    rows: s.map((e) => ({
-      amount: typeof e.amount == "number" ? l(e.amount, "0,0.00") : "",
-      leading: C(e, n),
-      subtitle: e.secondary_text ?? "",
-      title: e.primary_text ?? ""
+  const { background: g, cardVariant: l, showHeader: f } = h(v(a), d, C.NoHeader, "TransactionBlock");
+  return /* @__PURE__ */ o(x, {
+    background: g,
+    header: f && typeof m == "string" ? m : void 0,
+    variant: l,
+    rows: s.map((i) => ({
+      amount: typeof i.amount == "number" ? _(i.amount, "0,0.00") : "",
+      leading: z(i, t),
+      subtitle: i.secondary_text ?? "",
+      title: i.primary_text ?? ""
     }))
   });
 });
 export {
-  j as TransactionBlock,
-  I as TransactionBlockVariant
+  F as TransactionBlock
 };
 
 //# sourceMappingURL=TransactionBlock.es.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"TransactionBlock.es.js","names":[],"sources":["../../../../../src/insights-v2/blocks/ComponentBlocks/TransactionBlock/TransactionBlock.tsx"],"sourcesContent":["import { observer } from 'mobx-react-lite'\n\nimport Box from '@mui/material/Box'\n\nimport { CategoryIcon, InstitutionLogo, MerchantLogo } from '@mxenabled/mxui'\nimport { Icon } from '@mxenabled/mx-icons'\n\nimport { useCategoryStore } from '../../../../common'\nimport { slot } from '../../../../core'\nimport type { InsightsPayload, InstanceSlotRow } from '../../../../core'\nimport { formatCurrency } from '../../../../core/utils/NumberFormatting'\n\nimport TransactionListCard from '../../../components/TransactionListCard'\nimport { logoFromRef } from '../../../components/shared/EntityLogo'\n\ninterface TransactionBlockProps {\n  payload: InsightsPayload\n  beatGuid?: string\n}\n\n/**\n * Variants from ditto `lib/ditto/beats/large_transaction_v2.yml`:\n * - `with_header` — transaction row under a date header (the `with_merchant` card).\n * - `no_header`   — the row alone (the `no_merchant` card).\n */\nexport const TransactionBlockVariant = {\n  WithHeader: 'with_header',\n  NoHeader: 'no_header',\n} as const\n\nconst ROW_LOGO_SIZE = 32\n// Same glyph-to-tile ratio mxui's `CategoryIcon` uses, so a status icon sits like the other logos.\nconst ROW_ICON_SIZE = Math.round(ROW_LOGO_SIZE * 0.625)\n\n/**\n * Renders the row's leading logo from its `LogoRef`: a status icon, or an entity guid whose prefix\n * names the entity. An unrecognized prefix renders no logo rather than guessing.\n *\n * `resolveTopLevelCategory`: mxui's `CategoryIcon` only knows the top-level category guids and\n * silently falls back to the Uncategorized icon for a sub-category. The details drawer avoids\n * this by passing `transaction.top_level_category_guid`; the row only has the raw guid, so it is\n * walked up to its parent here (identity until categories load). That applies both to a `CAT-`\n * row logo and to a merchant's `fallback_guid`, which `MerchantLogo` draws through the same\n * `CategoryIcon` when the merchant image fails to load.\n */\nconst renderRowLogo = (row: InstanceSlotRow, resolveTopLevelCategory: (guid: string) => string) => {\n  const logo = logoFromRef(row.logo, row.primary_text)\n\n  if (!logo) return undefined\n\n  if (logo.logo_name) {\n    // A fixed box the size of the other logos keeps the row's text column aligned.\n    return (\n      <Box\n        sx={{\n          alignItems: 'center',\n          display: 'flex',\n          height: ROW_LOGO_SIZE,\n          justifyContent: 'center',\n          width: ROW_LOGO_SIZE,\n        }}\n      >\n        <Icon name={logo.logo_name} size={ROW_ICON_SIZE} sx={{ color: logo.logo_color }} />\n      </Box>\n    )\n  }\n\n  if (logo.merchant_guid) {\n    return (\n      <MerchantLogo\n        alt={logo.merchant_name ?? ''}\n        categoryGuid={logo.category_guid ? resolveTopLevelCategory(logo.category_guid) : ''}\n        merchantGuid={logo.merchant_guid}\n        size={ROW_LOGO_SIZE}\n      />\n    )\n  }\n\n  if (logo.institution_guid) {\n    return (\n      <InstitutionLogo\n        alt={logo.institution_name ?? ''}\n        institutionGuid={logo.institution_guid}\n        size={ROW_LOGO_SIZE}\n      />\n    )\n  }\n\n  if (logo.category_guid) {\n    const topLevelGuid = resolveTopLevelCategory(logo.category_guid)\n    return (\n      <Box data-testid={`category-icon-${topLevelGuid}`} sx={{ display: 'flex' }}>\n        <CategoryIcon categoryGuid={topLevelGuid} size={ROW_LOGO_SIZE} />\n      </Box>\n    )\n  }\n\n  return undefined\n}\n\n/**\n * The `transaction_block` (ditto `blocks.name` for LargeTransactionV2).\n *\n * Renders rows the backend already localized and carried inline on `instance_slot.data.series`\n * (`logo`, `primary_text`, `secondary_text`, `amount`). Only the amount is formatted here,\n * because the contract sends it as a number.\n *\n * This is the full/mini shape. The reduced widgets (micro, embedded) resolve to the row logo\n * alone, carried flat on `data.logo` with no `series`, and are drawn by `CompactInsightCard`.\n *\n * Under `with_header` the card header comes from `instance_slot.data.header_text`, which tupac sends\n * as the transaction date. It deliberately does *not* come from the first row: on a `with_merchant`\n * card a row's `secondary_text` is the category, so reading it here rendered the category twice\n * and dropped the date entirely.\n */\nexport const TransactionBlock = observer(({ payload }: TransactionBlockProps) => {\n  const { getTopLevelCategoryGuid } = useCategoryStore()\n  const { data, variant } = payload.instance_slot\n  const series = slot<InstanceSlotRow[]>(data, 'series')\n  const headerText = slot<string>(data, 'header_text')\n\n  if (!Array.isArray(series) || !series.length) return null\n\n  const header =\n    variant === TransactionBlockVariant.WithHeader && typeof headerText === 'string'\n      ? headerText\n      : undefined\n\n  return (\n    <TransactionListCard\n      header={header}\n      rows={series.map((row) => ({\n        amount: typeof row.amount === 'number' ? formatCurrency(row.amount, '0,0.00') : '',\n        leading: renderRowLogo(row, getTopLevelCategoryGuid),\n        subtitle: row.secondary_text ?? '',\n        title: row.primary_text ?? '',\n      }))}\n    />\n  )\n})\n"],"mappings":";;;;;;;;;;AAyBA,IAAa,IAA0B;AAAA,EACrC,YAAY;AAAA,EACZ,UAAU;AACZ,GAEM,IAAgB,IAEhB,IAAgB,KAAK,MAAM,IAAgB,KAAK,GAahD,IAAA,CAAiB,GAAsB,MAAsD;AACjG,QAAM,IAAO,EAAY,EAAI,MAAM,EAAI,YAAY;AAEnD,MAAK,GAEL;AAAA,QAAI,EAAK,UAEP,QACE,gBAAA,EAAC,GAAD;AAAA,MACE,IAAI;AAAA,QACF,YAAY;AAAA,QACZ,SAAS;AAAA,QACT,QAAQ;AAAA,QACR,gBAAgB;AAAA,QAChB,OAAO;AAAA,MACT;AAAA,MAEA,UAAA,gBAAA,EAAC,GAAD;AAAA,QAAM,MAAM,EAAK;AAAA,QAAW,MAAM;AAAA,QAAe,IAAI,EAAE,OAAO,EAAK,WAAW;AAAA,MAAI,CAAA;AAAA,IAC/E,CAAA;AAIT,QAAI,EAAK,cACP,QACE,gBAAA,EAAC,GAAD;AAAA,MACE,KAAK,EAAK,iBAAiB;AAAA,MAC3B,cAAc,EAAK,gBAAgB,EAAwB,EAAK,aAAa,IAAI;AAAA,MACjF,cAAc,EAAK;AAAA,MACnB,MAAM;AAAA,IACP,CAAA;AAIL,QAAI,EAAK,iBACP,QACE,gBAAA,EAAC,GAAD;AAAA,MACE,KAAK,EAAK,oBAAoB;AAAA,MAC9B,iBAAiB,EAAK;AAAA,MACtB,MAAM;AAAA,IACP,CAAA;AAIL,QAAI,EAAK,eAAe;AACtB,YAAM,IAAe,EAAwB,EAAK,aAAa;AAC/D,aACE,gBAAA,EAAC,GAAD;AAAA,QAAK,eAAa,iBAAiB,CAAA;AAAA,QAAgB,IAAI,EAAE,SAAS,OAAO;AAAA,QACvE,UAAA,gBAAA,EAAC,GAAD;AAAA,UAAc,cAAc;AAAA,UAAc,MAAM;AAAA,QAAgB,CAAA;AAAA,MAC7D,CAAA;AAAA,IAET;AAAA;AAGF,GAiBa,IAAmB,EAAA,CAAU,EAAE,SAAA,EAAA,MAAqC;AAC/E,QAAM,EAAE,yBAAA,EAAA,IAA4B,EAAiB,GAC/C,EAAE,MAAA,GAAM,SAAA,EAAA,IAAY,EAAQ,eAC5B,IAAS,EAAwB,GAAM,QAAQ,GAC/C,IAAa,EAAa,GAAM,aAAa;AAEnD,MAAI,CAAC,MAAM,QAAQ,CAAM,KAAK,CAAC,EAAO,OAAQ,QAAO;AAErD,QAAM,IACJ,MAAY,EAAwB,cAAc,OAAO,KAAe,WACpE,IACA;AAEN,SACE,gBAAA,EAAC,GAAD;AAAA,IACU,QAAA;AAAA,IACR,MAAM,EAAO,IAAA,CAAK,OAAS;AAAA,MACzB,QAAQ,OAAO,EAAI,UAAW,WAAW,EAAe,EAAI,QAAQ,QAAQ,IAAI;AAAA,MAChF,SAAS,EAAc,GAAK,CAAuB;AAAA,MACnD,UAAU,EAAI,kBAAkB;AAAA,MAChC,OAAO,EAAI,gBAAgB;AAAA,IAC7B,EAAE;AAAA,EACH,CAAA;AAEL,CAAC"}
+{"version":3,"file":"TransactionBlock.es.js","names":[],"sources":["../../../../../src/insights-v2/blocks/ComponentBlocks/TransactionBlock/TransactionBlock.tsx"],"sourcesContent":["import { observer } from 'mobx-react-lite'\n\nimport Box from '@mui/material/Box'\nimport { useTheme } from '@mui/material/styles'\n\nimport { CategoryIcon, InstitutionLogo, MerchantLogo } from '@mxenabled/mxui'\nimport { Icon } from '@mxenabled/mx-icons'\n\nimport { useCategoryStore } from '../../../../common'\nimport { slot } from '../../../../core'\nimport type { InsightsPayload, InstanceSlotRow } from '../../../../core'\nimport { formatCurrency } from '../../../../core/utils/NumberFormatting'\n\nimport TransactionListCard from '../../../components/TransactionListCard'\nimport { logoFromRef } from '../../../components/shared/EntityLogo'\n\nimport { resolveVariantConfig } from '../../resolveVariantConfig'\nimport { getLayoutConfig, transactionBlockVariant } from './layout'\n\ninterface TransactionBlockProps {\n  payload: InsightsPayload\n  beatGuid?: string\n}\n\nconst ROW_LOGO_SIZE = 32\n// Same glyph-to-tile ratio mxui's `CategoryIcon` uses, so a status icon sits like the other logos.\nconst ROW_ICON_SIZE = Math.round(ROW_LOGO_SIZE * 0.625)\n\n/**\n * Renders the row's leading logo from its `LogoRef`: a status icon, or an entity guid whose prefix\n * names the entity. An unrecognized prefix renders no logo rather than guessing.\n *\n * `resolveTopLevelCategory`: mxui's `CategoryIcon` only knows the top-level category guids and\n * silently falls back to the Uncategorized icon for a sub-category. The details drawer avoids\n * this by passing `transaction.top_level_category_guid`; the row only has the raw guid, so it is\n * walked up to its parent here (identity until categories load). That applies both to a `CAT-`\n * row logo and to a merchant's `fallback_guid`, which `MerchantLogo` draws through the same\n * `CategoryIcon` when the merchant image fails to load.\n */\nconst renderRowLogo = (row: InstanceSlotRow, resolveTopLevelCategory: (guid: string) => string) => {\n  const logo = logoFromRef(row.logo, row.primary_text)\n\n  if (!logo) return undefined\n\n  if (logo.logo_name) {\n    // A fixed box the size of the other logos keeps the row's text column aligned.\n    return (\n      <Box\n        sx={{\n          alignItems: 'center',\n          display: 'flex',\n          height: ROW_LOGO_SIZE,\n          justifyContent: 'center',\n          width: ROW_LOGO_SIZE,\n        }}\n      >\n        <Icon name={logo.logo_name} size={ROW_ICON_SIZE} sx={{ color: logo.logo_color }} />\n      </Box>\n    )\n  }\n\n  if (logo.merchant_guid) {\n    return (\n      <MerchantLogo\n        alt={logo.merchant_name ?? ''}\n        categoryGuid={logo.category_guid ? resolveTopLevelCategory(logo.category_guid) : ''}\n        merchantGuid={logo.merchant_guid}\n        size={ROW_LOGO_SIZE}\n      />\n    )\n  }\n\n  if (logo.institution_guid) {\n    return (\n      <InstitutionLogo\n        alt={logo.institution_name ?? ''}\n        institutionGuid={logo.institution_guid}\n        size={ROW_LOGO_SIZE}\n      />\n    )\n  }\n\n  if (logo.category_guid) {\n    const topLevelGuid = resolveTopLevelCategory(logo.category_guid)\n    return (\n      <Box data-testid={`category-icon-${topLevelGuid}`} sx={{ display: 'flex' }}>\n        <CategoryIcon categoryGuid={topLevelGuid} size={ROW_LOGO_SIZE} />\n      </Box>\n    )\n  }\n\n  return undefined\n}\n\n/**\n * The `transaction_block`: rows the backend already localized, carried inline on\n * `instance_slot.data.series` (`logo`, `primary_text`, `secondary_text`, `amount`). Only the\n * amount is formatted here, because the contract sends it as a number. `instance_slot.variant`\n * picks the header and slot treatment from `./layout.ts`.\n *\n * This is the full/mini shape. The reduced widgets (micro, embedded) resolve to the row logo\n * alone, carried flat on `data.logo` with no `series`, and are drawn by `CompactInsightCard`.\n *\n * A header, when the variant shows one, comes from `instance_slot.data.header_text` (the\n * transaction date, or \"{count} transactions\"). It deliberately does *not* come from the first\n * row: on a `with_merchant` card a row's `secondary_text` is the category, so reading it here\n * rendered the category twice and dropped the date entirely.\n */\nexport const TransactionBlock = observer(({ payload }: TransactionBlockProps) => {\n  const theme = useTheme()\n  const { getTopLevelCategoryGuid } = useCategoryStore()\n  const { data, variant } = payload.instance_slot\n  const series = slot<InstanceSlotRow[]>(data, 'series')\n  const headerText = slot<string>(data, 'header_text')\n\n  if (!Array.isArray(series) || !series.length) return null\n\n  // The plain row is the safe default: it adds nothing a wrong variant could misstate.\n  const { background, cardVariant, showHeader } = resolveVariantConfig(\n    getLayoutConfig(theme),\n    variant,\n    transactionBlockVariant.NoHeader,\n    'TransactionBlock',\n  )\n  const header = showHeader && typeof headerText === 'string' ? headerText : undefined\n\n  return (\n    <TransactionListCard\n      background={background}\n      header={header}\n      variant={cardVariant}\n      rows={series.map((row) => ({\n        amount: typeof row.amount === 'number' ? formatCurrency(row.amount, '0,0.00') : '',\n        leading: renderRowLogo(row, getTopLevelCategoryGuid),\n        subtitle: row.secondary_text ?? '',\n        title: row.primary_text ?? '',\n      }))}\n    />\n  )\n})\n"],"mappings":";;;;;;;;;;;;;AAwBA,IAAM,IAAgB,IAEhB,IAAgB,KAAK,MAAM,IAAgB,KAAK,GAahD,IAAA,CAAiB,GAAsB,MAAsD;AACjG,QAAM,IAAO,EAAY,EAAI,MAAM,EAAI,YAAY;AAEnD,MAAK,GAEL;AAAA,QAAI,EAAK,UAEP,QACE,gBAAA,EAAC,GAAD;AAAA,MACE,IAAI;AAAA,QACF,YAAY;AAAA,QACZ,SAAS;AAAA,QACT,QAAQ;AAAA,QACR,gBAAgB;AAAA,QAChB,OAAO;AAAA,MACT;AAAA,MAEA,UAAA,gBAAA,EAAC,GAAD;AAAA,QAAM,MAAM,EAAK;AAAA,QAAW,MAAM;AAAA,QAAe,IAAI,EAAE,OAAO,EAAK,WAAW;AAAA,MAAI,CAAA;AAAA,IAC/E,CAAA;AAIT,QAAI,EAAK,cACP,QACE,gBAAA,EAAC,GAAD;AAAA,MACE,KAAK,EAAK,iBAAiB;AAAA,MAC3B,cAAc,EAAK,gBAAgB,EAAwB,EAAK,aAAa,IAAI;AAAA,MACjF,cAAc,EAAK;AAAA,MACnB,MAAM;AAAA,IACP,CAAA;AAIL,QAAI,EAAK,iBACP,QACE,gBAAA,EAAC,GAAD;AAAA,MACE,KAAK,EAAK,oBAAoB;AAAA,MAC9B,iBAAiB,EAAK;AAAA,MACtB,MAAM;AAAA,IACP,CAAA;AAIL,QAAI,EAAK,eAAe;AACtB,YAAM,IAAe,EAAwB,EAAK,aAAa;AAC/D,aACE,gBAAA,EAAC,GAAD;AAAA,QAAK,eAAa,iBAAiB,CAAA;AAAA,QAAgB,IAAI,EAAE,SAAS,OAAO;AAAA,QACvE,UAAA,gBAAA,EAAC,GAAD;AAAA,UAAc,cAAc;AAAA,UAAc,MAAM;AAAA,QAAgB,CAAA;AAAA,MAC7D,CAAA;AAAA,IAET;AAAA;AAGF,GAgBa,IAAmB,EAAA,CAAU,EAAE,SAAA,EAAA,MAAqC;AAC/E,QAAM,IAAQ,EAAS,GACjB,EAAE,yBAAA,EAAA,IAA4B,EAAiB,GAC/C,EAAE,MAAA,GAAM,SAAA,EAAA,IAAY,EAAQ,eAC5B,IAAS,EAAwB,GAAM,QAAQ,GAC/C,IAAa,EAAa,GAAM,aAAa;AAEnD,MAAI,CAAC,MAAM,QAAQ,CAAM,KAAK,CAAC,EAAO,OAAQ,QAAO;AAGrD,QAAM,EAAE,YAAA,GAAY,aAAA,GAAa,YAAA,EAAA,IAAe,EAC9C,EAAgB,CAAK,GACrB,GACA,EAAwB,UACxB,kBACF;AAGA,SACE,gBAAA,EAAC,GAAD;AAAA,IACc,YAAA;AAAA,IACJ,QALG,KAAc,OAAO,KAAe,WAAW,IAAa;AAAA,IAMvE,SAAS;AAAA,IACT,MAAM,EAAO,IAAA,CAAK,OAAS;AAAA,MACzB,QAAQ,OAAO,EAAI,UAAW,WAAW,EAAe,EAAI,QAAQ,QAAQ,IAAI;AAAA,MAChF,SAAS,EAAc,GAAK,CAAuB;AAAA,MACnD,UAAU,EAAI,kBAAkB;AAAA,MAChC,OAAO,EAAI,gBAAgB;AAAA,IAC7B,EAAE;AAAA,EACH,CAAA;AAEL,CAAC"}

package/dist/insights-v2/blocks/ComponentBlocks/TransactionBlock/index.d.ts

@@ -1 +1,2 @@
-export { TransactionBlock, TransactionBlockVariant } from './TransactionBlock';
+export { TransactionBlock } from './TransactionBlock';
+export { transactionBlockVariant } from './layout';

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

@@ -0,0 +1,30 @@
+import { Theme } from '@mui/material/styles';
+/**
+ * Transaction block variants, keyed by the backend `instance_slot.variant`. All render the same
+ * pre-localized rows through `TransactionListCard`; only the header and the slot differ.
+ *
+ * - `WithHeader`                   — row under a date header (Fee Detected, Large Transaction).
+ * - `NoHeader`                     — the row alone (Large Transaction without a merchant).
+ * - `UncategorizedTransaction`     — filled primary header ("{count} transactions").
+ * - `SubscriptionDetected`         — borderless row on the blue slot wash.
+ * - `UnexpectedSubscriptionPayment` — borderless row on the warning slot wash. Its flag badge and
+ *   subscribed / not-subscribed status row are not drawn yet.
+ */
+export declare const transactionBlockVariant: {
+    readonly WithHeader: "with_header";
+    readonly NoHeader: "no_header";
+    readonly UncategorizedTransaction: "uncategorized_transaction";
+    readonly SubscriptionDetected: "subscription_detected";
+    readonly UnexpectedSubscriptionPayment: "unexpected_subscription_payment";
+};
+export type TransactionBlockVariant = (typeof transactionBlockVariant)[keyof typeof transactionBlockVariant];
+export interface TransactionLayoutConfig {
+    /** Show `instance_slot.data.header_text` above the rows. */
+    showHeader: boolean;
+    /** `TransactionListCard` style: grey utility header, or filled primary header. */
+    cardVariant?: 'default' | 'primary';
+    /** CSS background for the slot behind the card; the card then renders borderless on paper. */
+    background?: string;
+}
+/** Per-variant `TransactionListCard` props (mirrors DirectDepositBlock's `getLayoutConfig`). */
+export declare const getLayoutConfig: (theme: Theme) => Record<TransactionBlockVariant, TransactionLayoutConfig>;

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

@@ -0,0 +1,29 @@
+import { WARNING_WASH_GRADIENT as r, getPrimaryWashGradient as t } from "../../../components/celebrationGradients.es.js";
+var e = {
+  WithHeader: "with_header",
+  NoHeader: "no_header",
+  UncategorizedTransaction: "uncategorized_transaction",
+  SubscriptionDetected: "subscription_detected",
+  UnexpectedSubscriptionPayment: "unexpected_subscription_payment"
+}, i = (a) => ({
+  [e.WithHeader]: { showHeader: !0 },
+  [e.NoHeader]: { showHeader: !1 },
+  [e.UncategorizedTransaction]: {
+    showHeader: !0,
+    cardVariant: "primary"
+  },
+  [e.SubscriptionDetected]: {
+    showHeader: !1,
+    background: t(a)
+  },
+  [e.UnexpectedSubscriptionPayment]: {
+    showHeader: !1,
+    background: r
+  }
+});
+export {
+  i as getLayoutConfig,
+  e as transactionBlockVariant
+};
+
+//# sourceMappingURL=layout.es.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"layout.es.js","names":[],"sources":["../../../../../src/insights-v2/blocks/ComponentBlocks/TransactionBlock/layout.ts"],"sourcesContent":["import type { Theme } from '@mui/material/styles'\n\nimport {\n  WARNING_WASH_GRADIENT,\n  getPrimaryWashGradient,\n} from '../../../components/celebrationGradients'\n\n/**\n * Transaction block variants, keyed by the backend `instance_slot.variant`. All render the same\n * pre-localized rows through `TransactionListCard`; only the header and the slot differ.\n *\n * - `WithHeader`                   — row under a date header (Fee Detected, Large Transaction).\n * - `NoHeader`                     — the row alone (Large Transaction without a merchant).\n * - `UncategorizedTransaction`     — filled primary header (\"{count} transactions\").\n * - `SubscriptionDetected`         — borderless row on the blue slot wash.\n * - `UnexpectedSubscriptionPayment` — borderless row on the warning slot wash. Its flag badge and\n *   subscribed / not-subscribed status row are not drawn yet.\n */\nexport const transactionBlockVariant = {\n  WithHeader: 'with_header',\n  NoHeader: 'no_header',\n  UncategorizedTransaction: 'uncategorized_transaction',\n  SubscriptionDetected: 'subscription_detected',\n  UnexpectedSubscriptionPayment: 'unexpected_subscription_payment',\n} as const\n\nexport type TransactionBlockVariant =\n  (typeof transactionBlockVariant)[keyof typeof transactionBlockVariant]\n\nexport interface TransactionLayoutConfig {\n  /** Show `instance_slot.data.header_text` above the rows. */\n  showHeader: boolean\n  /** `TransactionListCard` style: grey utility header, or filled primary header. */\n  cardVariant?: 'default' | 'primary'\n  /** CSS background for the slot behind the card; the card then renders borderless on paper. */\n  background?: string\n}\n\n/** Per-variant `TransactionListCard` props (mirrors DirectDepositBlock's `getLayoutConfig`). */\nexport const getLayoutConfig = (\n  theme: Theme,\n): Record<TransactionBlockVariant, TransactionLayoutConfig> => ({\n  [transactionBlockVariant.WithHeader]: { showHeader: true },\n  [transactionBlockVariant.NoHeader]: { showHeader: false },\n  [transactionBlockVariant.UncategorizedTransaction]: { showHeader: true, cardVariant: 'primary' },\n  [transactionBlockVariant.SubscriptionDetected]: {\n    showHeader: false,\n    background: getPrimaryWashGradient(theme),\n  },\n  [transactionBlockVariant.UnexpectedSubscriptionPayment]: {\n    showHeader: false,\n    background: WARNING_WASH_GRADIENT,\n  },\n})\n"],"mappings":";AAkBA,IAAa,IAA0B;AAAA,EACrC,YAAY;AAAA,EACZ,UAAU;AAAA,EACV,0BAA0B;AAAA,EAC1B,sBAAsB;AAAA,EACtB,+BAA+B;AACjC,GAea,IAAA,CACX,OAC8D;AAAA,EAC7D,CAAA,EAAwB,UAAA,GAAa,EAAE,YAAY,GAAK;AAAA,EACxD,CAAA,EAAwB,QAAA,GAAW,EAAE,YAAY,GAAM;AAAA,EACvD,CAAA,EAAwB,wBAAA,GAA2B;AAAA,IAAE,YAAY;AAAA,IAAM,aAAa;AAAA,EAAU;AAAA,EAC9F,CAAA,EAAwB,oBAAA,GAAuB;AAAA,IAC9C,YAAY;AAAA,IACZ,YAAY,EAAuB,CAAK;AAAA,EAC1C;AAAA,EACC,CAAA,EAAwB,6BAAA,GAAgC;AAAA,IACvD,YAAY;AAAA,IACZ,YAAY;AAAA,EACd;AACF"}

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

@@ -0,0 +1,10 @@
+/**
+ * Picks a block's per-variant config from its `layout.ts` table by the backend
+ * `instance_slot.variant`, falling back to `fallback` for anything the table does not own.
+ *
+ * `Object.hasOwn` rather than a bare index: the key is backend-controlled, and an inherited
+ * name like `constructor` would otherwise return a truthy non-config that `??` lets through.
+ * Unknown variants warn, like `createVariantBlock`, so a backend typo or a new server variant
+ * is visible instead of silently degrading.
+ */
+export declare const resolveVariantConfig: <K extends string, C>(table: Record<K, C>, variant: string | null | undefined, fallback: K, blockName: string) => C;

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

@@ -0,0 +1,6 @@
+var u = (o, n, r, e) => n != null && Object.hasOwn(o, n) ? o[n] : (n != null && console.warn(`[${e}] Unknown variant "${n}" — rendering "${r}". Add it to layout.ts.`), o[r]);
+export {
+  u as resolveVariantConfig
+};
+
+//# sourceMappingURL=resolveVariantConfig.es.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"resolveVariantConfig.es.js","names":[],"sources":["../../../src/insights-v2/blocks/resolveVariantConfig.ts"],"sourcesContent":["/**\n * Picks a block's per-variant config from its `layout.ts` table by the backend\n * `instance_slot.variant`, falling back to `fallback` for anything the table does not own.\n *\n * `Object.hasOwn` rather than a bare index: the key is backend-controlled, and an inherited\n * name like `constructor` would otherwise return a truthy non-config that `??` lets through.\n * Unknown variants warn, like `createVariantBlock`, so a backend typo or a new server variant\n * is visible instead of silently degrading.\n */\nexport const resolveVariantConfig = <K extends string, C>(\n  table: Record<K, C>,\n  variant: string | null | undefined,\n  fallback: K,\n  blockName: string,\n): C => {\n  if (variant != null && Object.hasOwn(table, variant)) return table[variant as K]\n\n  if (variant != null) {\n    console.warn(\n      `[${blockName}] Unknown variant \"${variant}\" — rendering \"${fallback}\". Add it to layout.ts.`,\n    )\n  }\n\n  return table[fallback]\n}\n"],"mappings":"AASA,IAAa,IAAA,CACX,GACA,GACA,GACA,MAEI,KAAW,QAAQ,OAAO,OAAO,GAAO,CAAO,IAAU,EAAM,CAAA,KAE/D,KAAW,QACb,QAAQ,KACN,IAAI,CAAA,sBAA+B,CAAA,kBAAyB,CAAA,yBAC9D,GAGK,EAAM,CAAA"}

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

@@ -3,13 +3,13 @@ import { BeatActionsProvider as R } from "../beatActions.es.js";
 import { isContactSupportCtaDisabled as H } from "../actionBlocks/ContactSupportActionBlock.es.js";
 import { logoFromRef as M } from "./shared/EntityLogo.es.js";
 import { actionBlocksKey as P } from "../mappings/actionBlocksKey.es.js";
-import { ErrorCard as U } from "./ErrorCard.es.js";
-import { useBeatCtaActions as j } from "../ctaActions/useCtaAction.es.js";
-import { blocks as z } from "../mappings/blocks.es.js";
-import G from "./Footer.es.js";
-import K from "./Header.es.js";
-import { FeedbackBar as X } from "./FeedbackBar.es.js";
-import V from "./FeedbackDialog.es.js";
+import U from "./FeedbackDialog.es.js";
+import { ErrorCard as j } from "./ErrorCard.es.js";
+import { useBeatCtaActions as z } from "../ctaActions/useCtaAction.es.js";
+import { blocks as G } from "../mappings/blocks.es.js";
+import K from "./Footer.es.js";
+import X from "./Header.es.js";
+import { FeedbackBar as V } from "./FeedbackBar.es.js";
 import { DismissInsightDialog as W } from "./DismissInsightDialog.es.js";
 import { HiddenConfirmationCard as Y } from "./HiddenConfirmationCard.es.js";
 import { LoadingCard as q } from "./LoadingCard.es.js";
@@ -42,8 +42,8 @@ var so = {}, no = {
   px: 2,
   textTransform: "none"
 }, Ro = $(({ beat: t, beatActions: s = so, obsolete: c, isLoading: x = !1, isError: _ = !1 }) => {
-  const v = N(), { config: S } = E(), o = Z(t, s), { runCta: T, primary: C, secondary: g } = j(t, s, t.insights_payload?.primary_cta, t.insights_payload?.secondary_cta);
-  if (_) return /* @__PURE__ */ i(U, {});
+  const v = N(), { config: S } = E(), o = Z(t, s), { runCta: T, primary: C, secondary: g } = z(t, s, t.insights_payload?.primary_cta, t.insights_payload?.secondary_cta);
+  if (_) return /* @__PURE__ */ i(j, {});
   const e = t.insights_payload;
   if (!e || o.cardState === "dismissed") return null;
   const { instance_slot: B, primary_cta: r, secondary_cta: n, sub_title: O, title: D, widget_type: L, guid: I, dismissed_at: F } = e, { block: A } = B, w = O ?? (e.subtitle ? {
@@ -57,7 +57,7 @@ var so = {}, no = {
       }
       await T(f, u);
     }
-  }, k = z[A], d = L === "mini", m = v.insights_feed?.general, p = c?.state === "not_refreshable" && !F && !!m;
+  }, k = G[A], d = L === "mini", m = v.insights_feed?.general, p = c?.state === "not_refreshable" && !F && !!m;
   return /* @__PURE__ */ i(R, {
     value: o.wrappedActions,
     children: /* @__PURE__ */ a(b, {
@@ -79,7 +79,7 @@ var so = {}, no = {
           } },
           children: [
             p && /* @__PURE__ */ i(ro, { sx: no }),
-            /* @__PURE__ */ i(K, {
+            /* @__PURE__ */ i(X, {
               isMini: d,
               subtitle: w,
               title: D ?? ""
@@ -136,7 +136,7 @@ var so = {}, no = {
                 children: n.label
               })]
             }),
-            /* @__PURE__ */ i(X, {
+            /* @__PURE__ */ i(V, {
               onTellUsMore: o.openRatingSurvey,
               show: o.isFeedbackBarShown
             })
@@ -148,7 +148,7 @@ var so = {}, no = {
           onClose: o.closeDismissDialog,
           onDismiss: o.confirmDismiss
         }),
-        o.isSurveyOpen && /* @__PURE__ */ i(V, {
+        o.isSurveyOpen && /* @__PURE__ */ i(U, {
           characterLimitLabel: o.survey.characterLimitLabel,
           closeAriaLabel: o.survey.closeAriaLabel,
           isOpen: !0,
@@ -161,7 +161,7 @@ var so = {}, no = {
           secondaryText: o.survey.backText,
           title: o.survey.title
         }),
-        o.cardState === "visible" && e.footer && /* @__PURE__ */ i(G, { footer: e.footer })
+        o.cardState === "visible" && e.footer && /* @__PURE__ */ i(K, { footer: e.footer })
       ]
     })
   });

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

@@ -0,0 +1,32 @@
+export interface ConnectionDetailItem {
+    content: string;
+    icon_name: string;
+    title: string;
+}
+/** Resolved strings the drilldown renders (see ConnectionDetailActionBlock). */
+export interface ConnectionDetailContent {
+    aria_label_thumbs_down: string;
+    aria_label_thumbs_up: string;
+    benefits: string[];
+    description: string;
+    footer_title: string;
+    header_text: string;
+    shared_info_description: string;
+    shared_info_header_text: string;
+    shared_info_items: ConnectionDetailItem[];
+}
+interface ConnectionDetailDrillDownProps {
+    copy: ConnectionDetailContent;
+    /** Thumbs response — `'yes'` (up) / `'no'` (down). */
+    onRespond?: (response: 'yes' | 'no') => void;
+}
+/**
+ * Insights-v2 copy of the V1 `insights/components/shared/ConnectionDetailDrillDown`:
+ * the connection-details education panel (benefits, shared-info cards, and a
+ * thumbs was-this-helpful footer).
+ *
+ * Unlike V1, this is drawer CONTENT only — the `connection_detail_block`
+ * registry entry supplies the drawer and its title via ActionBlockLayer.
+ */
+declare const ConnectionDetailDrillDown: ({ copy, onRespond }: ConnectionDetailDrillDownProps) => import("react/jsx-runtime").JSX.Element;
+export default ConnectionDetailDrillDown;

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

@@ -0,0 +1,148 @@
+import i from "@mui/material/Stack";
+import { P as a, Text as s } from "@mxenabled/mxui";
+import { Icon as l } from "@mxenabled/mx-icons";
+import { jsx as e, jsxs as t } from "react/jsx-runtime";
+import d from "@mui/material/IconButton";
+import h from "@mui/material/Card";
+import x from "@mui/material/CardContent";
+var m = ({ icon: r, title: o, description: n }) => /* @__PURE__ */ e(h, {
+  variant: "outlined",
+  children: /* @__PURE__ */ t(x, {
+    sx: {
+      display: "flex",
+      gap: 12,
+      "&:last-child": { pb: 16 }
+    },
+    children: [r, /* @__PURE__ */ t(i, {
+      sx: { gap: 4 },
+      children: [/* @__PURE__ */ e(s, {
+        bold: !0,
+        variant: "body1",
+        children: o
+      }), /* @__PURE__ */ e(a, {
+        sx: {
+          color: "text.secondary",
+          fontWeight: 400
+        },
+        variant: "subtitle2",
+        children: n
+      })]
+    })]
+  })
+}), I = ({ copy: r, onRespond: o }) => /* @__PURE__ */ t(i, {
+  sx: {
+    p: 24,
+    bgcolor: "background.paper"
+  },
+  children: [
+    /* @__PURE__ */ t(i, {
+      sx: {
+        gap: 16,
+        pb: 16
+      },
+      children: [/* @__PURE__ */ t(i, {
+        sx: { gap: 4 },
+        children: [/* @__PURE__ */ e(a, {
+          variant: "h3",
+          children: r.header_text
+        }), /* @__PURE__ */ e(a, {
+          sx: {
+            fontWeight: 400,
+            color: "text.secondary"
+          },
+          variant: "subtitle2",
+          children: r.description
+        })]
+      }), /* @__PURE__ */ e(i, {
+        sx: { gap: 12 },
+        children: r.benefits.map((n, c) => /* @__PURE__ */ t(i, {
+          sx: {
+            flexDirection: "row",
+            gap: 8
+          },
+          children: [/* @__PURE__ */ e(l, {
+            color: "success",
+            name: "check_circle",
+            size: 16
+          }), /* @__PURE__ */ e(a, {
+            sx: { fontWeight: 400 },
+            variant: "subtitle2",
+            children: n
+          })]
+        }, c))
+      })]
+    }),
+    /* @__PURE__ */ t(i, {
+      sx: {
+        gap: 4,
+        py: 12
+      },
+      children: [/* @__PURE__ */ e(s, {
+        sx: { fontWeight: 600 },
+        variant: "body1",
+        children: r.shared_info_header_text
+      }), /* @__PURE__ */ e(a, {
+        sx: {
+          color: "text.secondary",
+          lineHeight: "20px"
+        },
+        variant: "body2",
+        children: r.shared_info_description
+      })]
+    }),
+    /* @__PURE__ */ e(i, {
+      sx: {
+        py: 16,
+        gap: 24
+      },
+      children: r.shared_info_items.map((n, c) => /* @__PURE__ */ e(m, {
+        description: n.content,
+        icon: /* @__PURE__ */ e(l, {
+          name: n.icon_name,
+          size: 24,
+          sx: { color: "text.primary" }
+        }),
+        title: n.title
+      }, c))
+    }),
+    /* @__PURE__ */ t(i, {
+      sx: {
+        py: 16,
+        gap: 12,
+        alignItems: "center"
+      },
+      children: [/* @__PURE__ */ e(s, {
+        bold: !0,
+        children: r.footer_title
+      }), /* @__PURE__ */ t(i, {
+        sx: {
+          flexDirection: "row",
+          alignItems: "center",
+          gap: 24
+        },
+        children: [/* @__PURE__ */ e(d, {
+          "aria-label": r.aria_label_thumbs_down,
+          onClick: () => o?.("no"),
+          children: /* @__PURE__ */ e(l, {
+            color: "secondary",
+            name: "thumb_down",
+            size: 24
+          })
+        }), /* @__PURE__ */ e(d, {
+          "aria-label": r.aria_label_thumbs_up,
+          onClick: () => o?.("yes"),
+          children: /* @__PURE__ */ e(l, {
+            color: "secondary",
+            name: "thumb_up",
+            size: 24
+          })
+        })]
+      })]
+    })
+  ]
+});
+export {
+  I as default
+};
+
+//# sourceMappingURL=ConnectionDetailDrillDown.es.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ConnectionDetailDrillDown.es.js","names":[],"sources":["../../../src/insights-v2/components/ConnectionDetailDrillDown.tsx"],"sourcesContent":["import Card from '@mui/material/Card'\nimport CardContent from '@mui/material/CardContent'\nimport IconButton from '@mui/material/IconButton'\nimport Stack from '@mui/material/Stack'\n\nimport { Icon } from '@mxenabled/mx-icons'\nimport { P, Text } from '@mxenabled/mxui'\n\ninterface InfoItemProps {\n  icon: React.ReactNode\n  title: string\n  description: string\n}\n\nexport interface ConnectionDetailItem {\n  content: string\n  icon_name: string\n  title: string\n}\n\n/** Resolved strings the drilldown renders (see ConnectionDetailActionBlock). */\nexport interface ConnectionDetailContent {\n  aria_label_thumbs_down: string\n  aria_label_thumbs_up: string\n  benefits: string[]\n  description: string\n  footer_title: string\n  header_text: string\n  shared_info_description: string\n  shared_info_header_text: string\n  shared_info_items: ConnectionDetailItem[]\n}\n\ninterface ConnectionDetailDrillDownProps {\n  copy: ConnectionDetailContent\n  /** Thumbs response — `'yes'` (up) / `'no'` (down). */\n  onRespond?: (response: 'yes' | 'no') => void\n}\n\nconst InfoItem = ({ icon, title, description }: InfoItemProps) => (\n  <Card variant=\"outlined\">\n    <CardContent sx={{ display: 'flex', gap: 12, '&:last-child': { pb: 16 } }}>\n      {icon}\n      <Stack sx={{ gap: 4 }}>\n        <Text bold={true} variant=\"body1\">\n          {title}\n        </Text>\n        <P sx={{ color: 'text.secondary', fontWeight: 400 }} variant=\"subtitle2\">\n          {description}\n        </P>\n      </Stack>\n    </CardContent>\n  </Card>\n)\n\n/**\n * Insights-v2 copy of the V1 `insights/components/shared/ConnectionDetailDrillDown`:\n * the connection-details education panel (benefits, shared-info cards, and a\n * thumbs was-this-helpful footer).\n *\n * Unlike V1, this is drawer CONTENT only — the `connection_detail_block`\n * registry entry supplies the drawer and its title via ActionBlockLayer.\n */\nconst ConnectionDetailDrillDown = ({ copy, onRespond }: ConnectionDetailDrillDownProps) => (\n  <Stack sx={{ p: 24, bgcolor: 'background.paper' }}>\n    <Stack sx={{ gap: 16, pb: 16 }}>\n      <Stack sx={{ gap: 4 }}>\n        <P variant=\"h3\">{copy.header_text}</P>\n\n        <P sx={{ fontWeight: 400, color: 'text.secondary' }} variant=\"subtitle2\">\n          {copy.description}\n        </P>\n      </Stack>\n\n      {/* Bullet points */}\n      <Stack sx={{ gap: 12 }}>\n        {copy.benefits.map((text, i) => (\n          <Stack key={i} sx={{ flexDirection: 'row', gap: 8 }}>\n            <Icon color=\"success\" name=\"check_circle\" size={16} />\n            <P sx={{ fontWeight: 400 }} variant=\"subtitle2\">\n              {text}\n            </P>\n          </Stack>\n        ))}\n      </Stack>\n    </Stack>\n\n    {/* Info section */}\n    <Stack sx={{ gap: 4, py: 12 }}>\n      <Text sx={{ fontWeight: 600 }} variant=\"body1\">\n        {copy.shared_info_header_text}\n      </Text>\n\n      <P sx={{ color: 'text.secondary', lineHeight: '20px' }} variant=\"body2\">\n        {copy.shared_info_description}\n      </P>\n    </Stack>\n\n    {/* Cards */}\n    <Stack sx={{ py: 16, gap: 24 }}>\n      {copy.shared_info_items.map((item, index) => (\n        <InfoItem\n          description={item.content}\n          icon={<Icon name={item.icon_name} size={24} sx={{ color: 'text.primary' }} />}\n          key={index}\n          title={item.title}\n        />\n      ))}\n    </Stack>\n\n    <Stack sx={{ py: 16, gap: 12, alignItems: 'center' }}>\n      <Text bold={true}>{copy.footer_title}</Text>\n      <Stack sx={{ flexDirection: 'row', alignItems: 'center', gap: 24 }}>\n        <IconButton aria-label={copy.aria_label_thumbs_down} onClick={() => onRespond?.('no')}>\n          <Icon color=\"secondary\" name=\"thumb_down\" size={24} />\n        </IconButton>\n        <IconButton aria-label={copy.aria_label_thumbs_up} onClick={() => onRespond?.('yes')}>\n          <Icon color=\"secondary\" name=\"thumb_up\" size={24} />\n        </IconButton>\n      </Stack>\n    </Stack>\n  </Stack>\n)\n\nexport default ConnectionDetailDrillDown\n"],"mappings":"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"}