@mx-cartographer/experiences 9.5.4 → 9.6.0-alpha-ram1-connect-widget-testing

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

@@ -19,13 +19,13 @@ export interface CompactInsightCardProps {
  * The one compact renderer the micro and embedded envelopes share (`insights_v2.2.md` §8.3).
  *
  * Figma 1941:111897 (Embedded | Large Transaction): a title row with the overflow slot, the HTML
- * description with the primary CTA under it, and on the right the first slot row's logo in a
- * `<BadgedTile>`. Under ditto's `embedded` variant the tile takes a status badge; micro sends no
- * variant and draws the logo alone. The card lays out from the envelope alone and never reads
+ * description with the primary CTA under it, and on the right the slot's `logo` in a
+ * `<BadgedTile>`. Under ditto's `with_warning_badge` variant the tile takes a status badge; under
+ * `minimal` it draws the logo alone. The card lays out from the envelope alone and never reads
  * `widget_type`.
  *
  * The icon falls back to the neutral insight glyph **here**, not in `LogoFromGuid`, when the slot
- * has no row. The `pill` on the same envelope is the transaction row's, not the card's.
+ * carries no logo. The `pill` on the same envelope is the transaction row's, not the card's.
  */
 declare const CompactInsightCard: ({ isCtaDisabled, onCtaClick, onTap, payload, }: CompactInsightCardProps) => import("react/jsx-runtime").JSX.Element;
 export default CompactInsightCard;

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

@@ -1,57 +1,61 @@
-import { createVariantBlock as b } from "../blocks/createVariantBlock.es.js";
-import c from "./BadgedTile.es.js";
-import { InsightOptionsMenu as y } from "./InsightOptionsMenu.es.js";
-import k from "./LogoFromGuid.es.js";
-import I from "./StatusBadge.es.js";
+import { slot as y } from "../../core/types/Insights.es.js";
+import { createVariantBlock as k } from "../blocks/createVariantBlock.es.js";
+import m from "./BadgedTile.es.js";
+import { InsightOptionsMenu as I } from "./InsightOptionsMenu.es.js";
+import w from "./LogoFromGuid.es.js";
+import v from "./StatusBadge.es.js";
 import l from "@mui/material/Stack";
-import { P as v, Text as w } from "@mxenabled/mxui";
-import C from "@mui/material/Button";
-import { Icon as S } from "@mxenabled/mx-icons";
+import { P as C, Text as _ } from "@mxenabled/mxui";
+import S from "@mui/material/Button";
+import { Icon as B } from "@mxenabled/mx-icons";
 import { jsx as t, jsxs as n } from "react/jsx-runtime";
-import d from "@mui/material/Box";
-import _ from "@mui/material/Card";
-var e = 44, m = ({ logo: r }) => r ? /* @__PURE__ */ t(k, {
+import p from "@mui/material/Box";
+import z from "@mui/material/Card";
+var a = 44, d = ({ logo: r }) => r ? /* @__PURE__ */ t(w, {
   logo: r,
-  size: e
-}) : /* @__PURE__ */ t(d, {
+  size: a
+}) : /* @__PURE__ */ t(p, {
   "data-testid": "compact-insight-card-fallback-icon",
   sx: {
     alignItems: "center",
     bgcolor: "primary.lighter",
     display: "flex",
-    height: e,
+    height: a,
     justifyContent: "center",
-    width: e
+    width: a
   },
-  children: /* @__PURE__ */ t(S, {
+  children: /* @__PURE__ */ t(B, {
     color: "primary",
     fill: !0,
     name: "lightbulb",
     size: 24
   })
-}), z = ({ logo: r }) => /* @__PURE__ */ t(c, {
-  center: /* @__PURE__ */ t(m, { logo: r }),
-  size: e,
+}), c = ({ logo: r }) => /* @__PURE__ */ t(m, {
+  center: /* @__PURE__ */ t(d, { logo: r }),
+  size: a,
   sx: { flexShrink: 0 }
-}), B = ({ logo: r }) => /* @__PURE__ */ t(c, {
-  center: /* @__PURE__ */ t(m, { logo: r }),
-  size: e,
+}), P = ({ logo: r }) => /* @__PURE__ */ t(m, {
+  center: /* @__PURE__ */ t(d, { logo: r }),
+  size: a,
   sx: { flexShrink: 0 },
-  topRight: /* @__PURE__ */ t(I, { tone: "warning" })
-}), P = b({
-  variants: { embedded: B },
-  fallback: z,
+  topRight: /* @__PURE__ */ t(v, { tone: "warning" })
+}), V = k({
+  variants: {
+    minimal: c,
+    with_warning_badge: P
+  },
+  fallback: c,
   name: "InsightVisual"
-}), V = (r) => r.stopPropagation(), T = ({ isCtaDisabled: r = !1, onCtaClick: p, onTap: a, payload: f }) => {
-  const { description: g, instance_slot: s, primary_cta: o, title: h } = f, x = s.data_series?.[0]?.logo, u = (i) => {
-    i.stopPropagation(), !(r || !o) && p?.(o);
+}), j = (r) => r.stopPropagation(), $ = ({ isCtaDisabled: r = !1, onCtaClick: g, onTap: e, payload: f }) => {
+  const { description: h, instance_slot: s, primary_cta: o, title: x } = f, u = y(s.data, "logo"), b = (i) => {
+    i.stopPropagation(), !(r || !o) && g?.(o);
   };
-  return /* @__PURE__ */ n(_, {
+  return /* @__PURE__ */ n(z, {
     "data-testid": "compact-insight-card",
-    ...a ? {
-      onClick: a,
+    ...e ? {
+      onClick: e,
       onKeyDown: (i) => {
-        i.target === i.currentTarget && (i.key === "Enter" || i.key === " ") && (i.preventDefault(), a?.());
+        i.target === i.currentTarget && (i.key === "Enter" || i.key === " ") && (i.preventDefault(), e?.());
       },
       role: "button",
       tabIndex: 0
@@ -62,7 +66,7 @@ var e = 44, m = ({ logo: r }) => r ? /* @__PURE__ */ t(k, {
       pl: 8,
       pr: 16,
       pt: 8,
-      ...a && { cursor: "pointer" }
+      ...e && { cursor: "pointer" }
     },
     children: [/* @__PURE__ */ n(l, {
       sx: {
@@ -73,14 +77,14 @@ var e = 44, m = ({ logo: r }) => r ? /* @__PURE__ */ t(k, {
         pl: 8,
         pt: 4
       },
-      children: [/* @__PURE__ */ t(w, {
+      children: [/* @__PURE__ */ t(_, {
         bold: !0,
         variant: "body1",
-        children: h ?? ""
-      }), /* @__PURE__ */ t(d, {
-        onClick: V,
+        children: x ?? ""
+      }), /* @__PURE__ */ t(p, {
+        onClick: j,
         sx: { display: "flex" },
-        children: /* @__PURE__ */ t(y, {})
+        children: /* @__PURE__ */ t(I, {})
       })]
     }), /* @__PURE__ */ n(l, {
       sx: {
@@ -95,13 +99,13 @@ var e = 44, m = ({ logo: r }) => r ? /* @__PURE__ */ t(k, {
           gap: 8,
           minWidth: 0
         },
-        children: [/* @__PURE__ */ t(v, {
-          dangerouslySetInnerHTML: { __html: g.html_text },
+        children: [/* @__PURE__ */ t(C, {
+          dangerouslySetInnerHTML: { __html: h.html_text },
           "data-testid": "compact-insight-card-description",
           variant: "subtitle2"
-        }), o?.label && /* @__PURE__ */ t(C, {
+        }), o?.label && /* @__PURE__ */ t(S, {
           "aria-disabled": r,
-          onClick: u,
+          onClick: b,
           size: "small",
           sx: {
             alignSelf: "flex-start",
@@ -115,15 +119,15 @@ var e = 44, m = ({ logo: r }) => r ? /* @__PURE__ */ t(k, {
           variant: "text",
           children: o.label
         })]
-      }), /* @__PURE__ */ t(P, {
-        logo: x,
+      }), /* @__PURE__ */ t(V, {
+        logo: u,
         variant: s.variant
       })]
     })]
   });
 };
 export {
-  T as default
+  $ as default
 };
 
 //# sourceMappingURL=CompactInsightCard.es.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"CompactInsightCard.es.js","names":[],"sources":["../../../src/insights-v2/components/CompactInsightCard.tsx"],"sourcesContent":["import type { KeyboardEvent, MouseEvent } from 'react'\n\nimport Box from '@mui/material/Box'\nimport Button from '@mui/material/Button'\nimport Card from '@mui/material/Card'\nimport Stack from '@mui/material/Stack'\n\nimport { Icon } from '@mxenabled/mx-icons'\nimport { P, Text } from '@mxenabled/mxui'\n\nimport type { InsightsPayload, LogoRef, PrimaryCTA } from '../../core'\nimport { createVariantBlock } from '../blocks/createVariantBlock'\nimport BadgedTile from './BadgedTile'\nimport InsightOptionsMenu from './InsightOptionsMenu'\nimport LogoFromGuid from './LogoFromGuid'\nimport StatusBadge from './StatusBadge'\n\n/** Figma 1941:111897: the tile the logo fills is 44px (rows are 32, the notification row 33). */\nconst ICON_SIZE = 44\n\ninterface InsightVisualProps {\n  /** The first slot row's logo, when the envelope carries a row. */\n  logo?: LogoRef | null\n}\n\n/** The row's logo, or the neutral insight glyph when the slot has no row. */\nconst LogoOrFallback = ({ logo }: InsightVisualProps) =>\n  logo ? (\n    <LogoFromGuid logo={logo} size={ICON_SIZE} />\n  ) : (\n    <Box\n      data-testid=\"compact-insight-card-fallback-icon\"\n      sx={{\n        alignItems: 'center',\n        bgcolor: 'primary.lighter',\n        display: 'flex',\n        height: ICON_SIZE,\n        justifyContent: 'center',\n        width: ICON_SIZE,\n      }}\n    >\n      <Icon color=\"primary\" fill={true} name=\"lightbulb\" size={24} />\n    </Box>\n  )\n\n/** Micro, and any variant not registered below: the logo alone. */\nconst PlainVisual = ({ logo }: InsightVisualProps) => (\n  <BadgedTile center={<LogoOrFallback logo={logo} />} size={ICON_SIZE} sx={{ flexShrink: 0 }} />\n)\n\n/** ditto `embedded`: the logo badged with a status glyph (Figma 1941:111897). */\nconst EmbeddedVisual = ({ logo }: InsightVisualProps) => (\n  <BadgedTile\n    center={<LogoOrFallback logo={logo} />}\n    size={ICON_SIZE}\n    sx={{ flexShrink: 0 }}\n    topRight={<StatusBadge tone=\"warning\" />}\n  />\n)\n\n/**\n * The card's right-hand visual, one component per ditto layout variant.\n *\n * A variant names a rendering *shape*, not an insight — `with_header` already serves both Large\n * Transaction and Fee Detected — so an insight wanting the badged logo reuses `embedded`. Only a\n * genuinely different visual registers a new entry, and existing ones are never touched.\n */\nconst InsightVisual = createVariantBlock<InsightVisualProps>({\n  variants: { embedded: EmbeddedVisual },\n  fallback: PlainVisual,\n  name: 'InsightVisual',\n})\n\nexport interface CompactInsightCardProps {\n  /** A `micro` or `embedded` envelope. */\n  payload: InsightsPayload\n  /**\n   * Makes the whole card the tap target. What a tap does is the host's decision (post to the\n   * host app, open a drawer, …); the card never opens anything itself. Omit for a static card.\n   */\n  onTap?: () => void\n  /** Receives the primary CTA when tapped. The card does not resolve the CTA's block itself. */\n  onCtaClick?: (cta: PrimaryCTA) => void\n  /**\n   * Renders the CTA disabled — label shown, `aria-disabled`, not tappable — for a host that cannot\n   * honour it (e.g. `contact_support_block` when the client's `enable_support_requests` is off).\n   */\n  isCtaDisabled?: boolean\n}\n\nconst stopPropagation = (event: MouseEvent) => event.stopPropagation()\n\n/**\n * The one compact renderer the micro and embedded envelopes share (`insights_v2.2.md` §8.3).\n *\n * Figma 1941:111897 (Embedded | Large Transaction): a title row with the overflow slot, the HTML\n * description with the primary CTA under it, and on the right the first slot row's logo in a\n * `<BadgedTile>`. Under ditto's `embedded` variant the tile takes a status badge; micro sends no\n * variant and draws the logo alone. The card lays out from the envelope alone and never reads\n * `widget_type`.\n *\n * The icon falls back to the neutral insight glyph **here**, not in `LogoFromGuid`, when the slot\n * has no row. The `pill` on the same envelope is the transaction row's, not the card's.\n */\nconst CompactInsightCard = ({\n  isCtaDisabled = false,\n  onCtaClick,\n  onTap,\n  payload,\n}: CompactInsightCardProps) => {\n  const { description, instance_slot, primary_cta, title } = payload\n  const rowLogo = instance_slot.data_series?.[0]?.logo\n\n  const handleCtaClick = (event: MouseEvent<HTMLButtonElement>) => {\n    event.stopPropagation()\n    if (isCtaDisabled || !primary_cta) return\n    onCtaClick?.(primary_cta)\n  }\n\n  const handleKeyDown = (event: KeyboardEvent<HTMLDivElement>) => {\n    // Only the card itself: Enter on the CTA button is the button's own click.\n    if (event.target !== event.currentTarget) return\n    if (event.key === 'Enter' || event.key === ' ') {\n      event.preventDefault()\n      onTap?.()\n    }\n  }\n\n  const interactiveProps = onTap\n    ? { onClick: onTap, onKeyDown: handleKeyDown, role: 'button', tabIndex: 0 }\n    : {}\n\n  return (\n    <Card\n      data-testid=\"compact-insight-card\"\n      {...interactiveProps}\n      sx={{ minWidth: 288, pb: 12, pl: 8, pr: 16, pt: 8, ...(onTap && { cursor: 'pointer' }) }}\n    >\n      <Stack\n        sx={{\n          alignItems: 'center',\n          flexDirection: 'row',\n          gap: 8,\n          justifyContent: 'space-between',\n          pl: 8,\n          pt: 4,\n        }}\n      >\n        <Text bold={true} variant=\"body1\">\n          {title ?? ''}\n        </Text>\n        {/* The menu renders only when the host wired `onMenuAction` (BeatActionsProvider). */}\n        <Box onClick={stopPropagation} sx={{ display: 'flex' }}>\n          <InsightOptionsMenu />\n        </Box>\n      </Stack>\n\n      <Stack sx={{ flexDirection: 'row', gap: 16, pl: 8, pt: 4 }}>\n        <Stack sx={{ flex: 1, gap: 8, minWidth: 0 }}>\n          {/* `html_text` is rendered server-side by mrs_content from the ditto copy template (bold\n              amount / merchant), not user-authored input; painted the same way `BaseLayout` paints\n              the full card's description. */}\n          <P\n            dangerouslySetInnerHTML={{ __html: description.html_text }}\n            data-testid=\"compact-insight-card-description\"\n            variant=\"subtitle2\"\n          />\n          {primary_cta?.label && (\n            <Button\n              aria-disabled={isCtaDisabled}\n              onClick={handleCtaClick}\n              size=\"small\"\n              sx={{\n                alignSelf: 'flex-start',\n                // Figma 1941:111897 lines the CTA label up with the description's left edge. The\n                // column already pads 8, so the button's own 8 is pulled back out — padding kept so\n                // the tap target does not shrink.\n                ml: -8,\n                px: 8,\n                ...(isCtaDisabled && { color: 'text.disabled', cursor: 'default' }),\n              }}\n              variant=\"text\"\n            >\n              {primary_cta.label}\n            </Button>\n          )}\n        </Stack>\n\n        <InsightVisual logo={rowLogo} variant={instance_slot.variant} />\n      </Stack>\n    </Card>\n  )\n}\n\nexport default CompactInsightCard\n"],"mappings":"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"}
+{"version":3,"file":"CompactInsightCard.es.js","names":[],"sources":["../../../src/insights-v2/components/CompactInsightCard.tsx"],"sourcesContent":["import type { KeyboardEvent, MouseEvent } from 'react'\n\nimport Box from '@mui/material/Box'\nimport Button from '@mui/material/Button'\nimport Card from '@mui/material/Card'\nimport Stack from '@mui/material/Stack'\n\nimport { Icon } from '@mxenabled/mx-icons'\nimport { P, Text } from '@mxenabled/mxui'\n\nimport { slot } from '../../core'\nimport type { InsightsPayload, LogoRef, PrimaryCTA } from '../../core'\nimport { createVariantBlock } from '../blocks/createVariantBlock'\nimport BadgedTile from './BadgedTile'\nimport InsightOptionsMenu from './InsightOptionsMenu'\nimport LogoFromGuid from './LogoFromGuid'\nimport StatusBadge from './StatusBadge'\n\n/** Figma 1941:111897: the tile the logo fills is 44px (rows are 32, the notification row 33). */\nconst ICON_SIZE = 44\n\ninterface InsightVisualProps {\n  /** The slot's `logo`, when ditto's variant declares and fills one. */\n  logo?: LogoRef | null\n}\n\n/** The slot's logo, or the neutral insight glyph when the slot carries none. */\nconst LogoOrFallback = ({ logo }: InsightVisualProps) =>\n  logo ? (\n    <LogoFromGuid logo={logo} size={ICON_SIZE} />\n  ) : (\n    <Box\n      data-testid=\"compact-insight-card-fallback-icon\"\n      sx={{\n        alignItems: 'center',\n        bgcolor: 'primary.lighter',\n        display: 'flex',\n        height: ICON_SIZE,\n        justifyContent: 'center',\n        width: ICON_SIZE,\n      }}\n    >\n      <Icon color=\"primary\" fill={true} name=\"lightbulb\" size={24} />\n    </Box>\n  )\n\n/** Micro, and any variant not registered below: the logo alone. */\nconst PlainVisual = ({ logo }: InsightVisualProps) => (\n  <BadgedTile center={<LogoOrFallback logo={logo} />} size={ICON_SIZE} sx={{ flexShrink: 0 }} />\n)\n\n/** ditto `with_warning_badge`: the logo badged with a status glyph (Figma 1941:111897). */\nconst WarningBadgeVisual = ({ logo }: InsightVisualProps) => (\n  <BadgedTile\n    center={<LogoOrFallback logo={logo} />}\n    size={ICON_SIZE}\n    sx={{ flexShrink: 0 }}\n    topRight={<StatusBadge tone=\"warning\" />}\n  />\n)\n\n/**\n * The card's right-hand visual, one component per ditto layout variant.\n *\n * A variant names a rendering *shape*, not an insight or a surface — `with_header` already serves\n * both Large Transaction and Fee Detected — so an insight wanting the badged logo reuses\n * `with_warning_badge`. Only a genuinely different visual registers a new entry, and existing ones\n * are never touched.\n *\n * `minimal` draws the plain logo and is registered explicitly even though it matches the fallback:\n * micro and notification resolve it on every render, and an unregistered variant warns. The\n * fallback is for variants we genuinely do not know.\n */\nconst InsightVisual = createVariantBlock<InsightVisualProps>({\n  variants: { minimal: PlainVisual, with_warning_badge: WarningBadgeVisual },\n  fallback: PlainVisual,\n  name: 'InsightVisual',\n})\n\nexport interface CompactInsightCardProps {\n  /** A `micro` or `embedded` envelope. */\n  payload: InsightsPayload\n  /**\n   * Makes the whole card the tap target. What a tap does is the host's decision (post to the\n   * host app, open a drawer, …); the card never opens anything itself. Omit for a static card.\n   */\n  onTap?: () => void\n  /** Receives the primary CTA when tapped. The card does not resolve the CTA's block itself. */\n  onCtaClick?: (cta: PrimaryCTA) => void\n  /**\n   * Renders the CTA disabled — label shown, `aria-disabled`, not tappable — for a host that cannot\n   * honour it (e.g. `contact_support_block` when the client's `enable_support_requests` is off).\n   */\n  isCtaDisabled?: boolean\n}\n\nconst stopPropagation = (event: MouseEvent) => event.stopPropagation()\n\n/**\n * The one compact renderer the micro and embedded envelopes share (`insights_v2.2.md` §8.3).\n *\n * Figma 1941:111897 (Embedded | Large Transaction): a title row with the overflow slot, the HTML\n * description with the primary CTA under it, and on the right the slot's `logo` in a\n * `<BadgedTile>`. Under ditto's `with_warning_badge` variant the tile takes a status badge; under\n * `minimal` it draws the logo alone. The card lays out from the envelope alone and never reads\n * `widget_type`.\n *\n * The icon falls back to the neutral insight glyph **here**, not in `LogoFromGuid`, when the slot\n * carries no logo. The `pill` on the same envelope is the transaction row's, not the card's.\n */\nconst CompactInsightCard = ({\n  isCtaDisabled = false,\n  onCtaClick,\n  onTap,\n  payload,\n}: CompactInsightCardProps) => {\n  const { description, instance_slot, primary_cta, title } = payload\n  // Reduced variants (`minimal`, `with_warning_badge`) declare a bare `logo` slot.\n  const rowLogo = slot<LogoRef>(instance_slot.data, 'logo')\n\n  const handleCtaClick = (event: MouseEvent<HTMLButtonElement>) => {\n    event.stopPropagation()\n    if (isCtaDisabled || !primary_cta) return\n    onCtaClick?.(primary_cta)\n  }\n\n  const handleKeyDown = (event: KeyboardEvent<HTMLDivElement>) => {\n    // Only the card itself: Enter on the CTA button is the button's own click.\n    if (event.target !== event.currentTarget) return\n    if (event.key === 'Enter' || event.key === ' ') {\n      event.preventDefault()\n      onTap?.()\n    }\n  }\n\n  const interactiveProps = onTap\n    ? { onClick: onTap, onKeyDown: handleKeyDown, role: 'button', tabIndex: 0 }\n    : {}\n\n  return (\n    <Card\n      data-testid=\"compact-insight-card\"\n      {...interactiveProps}\n      sx={{\n        minWidth: 288,\n        pb: 12,\n        pl: 8,\n        pr: 16,\n        pt: 8,\n        ...(onTap && { cursor: 'pointer' }),\n      }}\n    >\n      <Stack\n        sx={{\n          alignItems: 'center',\n          flexDirection: 'row',\n          gap: 8,\n          justifyContent: 'space-between',\n          pl: 8,\n          pt: 4,\n        }}\n      >\n        <Text bold={true} variant=\"body1\">\n          {title ?? ''}\n        </Text>\n        {/* The menu renders only when the host wired `onMenuAction` (BeatActionsProvider). */}\n        <Box onClick={stopPropagation} sx={{ display: 'flex' }}>\n          <InsightOptionsMenu />\n        </Box>\n      </Stack>\n\n      <Stack sx={{ flexDirection: 'row', gap: 16, pl: 8, pt: 4 }}>\n        <Stack sx={{ flex: 1, gap: 8, minWidth: 0 }}>\n          {/* `html_text` is rendered server-side by mrs_content from the ditto copy template (bold\n              amount / merchant), not user-authored input; painted the same way `BaseLayout` paints\n              the full card's description. */}\n          <P\n            dangerouslySetInnerHTML={{ __html: description.html_text }}\n            data-testid=\"compact-insight-card-description\"\n            variant=\"subtitle2\"\n          />\n          {primary_cta?.label && (\n            <Button\n              aria-disabled={isCtaDisabled}\n              onClick={handleCtaClick}\n              size=\"small\"\n              sx={{\n                alignSelf: 'flex-start',\n                // Figma 1941:111897 lines the CTA label up with the description's left edge. The\n                // column already pads 8, so the button's own 8 is pulled back out — padding kept so\n                // the tap target does not shrink.\n                ml: -8,\n                px: 8,\n                ...(isCtaDisabled && {\n                  color: 'text.disabled',\n                  cursor: 'default',\n                }),\n              }}\n              variant=\"text\"\n            >\n              {primary_cta.label}\n            </Button>\n          )}\n        </Stack>\n\n        <InsightVisual logo={rowLogo} variant={instance_slot.variant} />\n      </Stack>\n    </Card>\n  )\n}\n\nexport default CompactInsightCard\n"],"mappings":"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"}

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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"}

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

@@ -3,6 +3,8 @@ export interface FeedbackDialogProps {
     title: string;
     options: string[];
     characterLimit?: number;
+    /** Optional paragraph rendered between the title and the options (Figma feedback survey). */
+    description?: string;
     characterLimitLabel?: string;
     isOpen: boolean;
     onSubmit: (option: string, detail?: string) => void;
@@ -15,5 +17,5 @@ export interface FeedbackDialogProps {
     closeAriaLabel: string;
 }
 /** Generic feedback survey dialog. Last option shows detail text field. */
-declare const FeedbackDialog: ({ isOpen, onClose, onSubmit, title, options, characterLimit, characterLimitLabel, secondaryText, primaryText, closeAriaLabel, onBackClick, onTextInputFocus, }: FeedbackDialogProps) => import("react/jsx-runtime").JSX.Element | null;
+declare const FeedbackDialog: ({ isOpen, onClose, onSubmit, title, options, characterLimit, description, characterLimitLabel, secondaryText, primaryText, closeAriaLabel, onBackClick, onTextInputFocus, }: FeedbackDialogProps) => import("react/jsx-runtime").JSX.Element | null;
 export default FeedbackDialog;

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

@@ -1,45 +1,45 @@
-import P from "../../common/components/dialog/Dialog.es.js";
-import { useEffect as w, useRef as p, useState as b } from "react";
-import _ from "@mui/material/Stack";
-import { Text as j } from "@mxenabled/mxui";
-import { jsx as o, jsxs as g } from "react/jsx-runtime";
-import z from "@mui/material/FormControlLabel";
-import E from "@mui/material/TextField";
-import L from "@mui/material/Radio";
-import G from "@mui/material/FormControl";
-import H from "@mui/material/RadioGroup";
-var K = 250, O = ({ isOpen: l, onClose: h, onSubmit: x, title: s, options: r, characterLimit: v = K, characterLimitLabel: u, secondaryText: C, primaryText: S, closeAriaLabel: y, onBackClick: k, onTextInputFocus: F }) => {
-  const [t, m] = b(""), [a, d] = b(""), i = p(!1), n = p(!1);
-  if (w(() => {
-    l && (i.current = !1, n.current = !1);
-  }, [l]), r.length === 0) return null;
-  const c = t === r[r.length - 1], R = !t || c && !a.trim(), f = () => {
-    m(""), d("");
-  }, D = (e) => {
+import _ from "../../common/components/dialog/Dialog.es.js";
+import { useEffect as j, useRef as b, useState as h } from "react";
+import z from "@mui/material/Stack";
+import { Text as g } from "@mxenabled/mxui";
+import { jsx as o, jsxs as x } from "react/jsx-runtime";
+import E from "@mui/material/FormControlLabel";
+import L from "@mui/material/TextField";
+import G from "@mui/material/Radio";
+import H from "@mui/material/FormControl";
+import K from "@mui/material/RadioGroup";
+var W = 250, ee = ({ isOpen: a, onClose: v, onSubmit: C, title: s, options: r, characterLimit: y = W, description: u, characterLimitLabel: m, secondaryText: S, primaryText: k, closeAriaLabel: F, onBackClick: R, onTextInputFocus: D }) => {
+  const [t, d] = h(""), [l, f] = h(""), i = b(!1), n = b(!1);
+  if (j(() => {
+    a && (i.current = !1, n.current = !1);
+  }, [a]), r.length === 0) return null;
+  const c = t === r[r.length - 1], M = !t || c && !l.trim(), p = () => {
+    d(""), f("");
+  }, T = (e) => {
     if (e === "backdropClick" || e === "escapeKeyDown") return e;
     if (!n.current) return "closeButton";
-  }, M = (e, B) => {
-    const I = D(B);
-    f(), h(I);
-  }, T = () => {
-    n.current = !0, k?.();
-  }, A = () => {
-    i.current || (i.current = !0, F?.());
+  }, A = (e, P) => {
+    const w = T(P);
+    p(), v(w);
+  }, B = () => {
+    n.current = !0, R?.();
+  }, I = () => {
+    i.current || (i.current = !0, D?.());
   };
-  return /* @__PURE__ */ g(P, {
+  return /* @__PURE__ */ x(_, {
     copy: {
       title: s,
-      close_aria: y
+      close_aria: F
     },
-    disablePrimaryButton: R,
-    isOpen: l,
-    onClose: M,
+    disablePrimaryButton: M,
+    isOpen: a,
+    onClose: A,
     onPrimaryAction: () => {
-      n.current = !0, x(t, c ? a.trim() : void 0), f();
+      n.current = !0, C(t, c ? l.trim() : void 0), p();
     },
-    onSecondaryAction: T,
-    primaryText: S,
-    secondaryText: C,
+    onSecondaryAction: B,
+    primaryText: k,
+    secondaryText: S,
     sx: {
       "& .MuiDialogContent-root": { py: 0 },
       "& .MuiDialog-paperScrollPaper": { bgcolor: "background.paper" },
@@ -58,50 +58,58 @@ var K = 250, O = ({ isOpen: l, onClose: h, onSubmit: x, title: s, options: r, ch
         }
       }
     },
-    children: [/* @__PURE__ */ o(G, { children: /* @__PURE__ */ o(H, {
-      "aria-label": s,
-      name: "feedback-radio-group",
-      onChange: (e) => m(e.target.value),
-      value: t,
-      children: r.map((e) => /* @__PURE__ */ o(z, {
-        control: /* @__PURE__ */ o(L, { sx: { "& .MuiSvgIcon-root": {
-          fontSize: 22,
-          color: "action.active"
-        } } }),
-        label: e,
-        sx: { "& .MuiFormControlLabel-label": {
-          color: "text.primary",
-          fontSize: 15
-        } },
-        value: e
-      }, e))
-    }) }), c && /* @__PURE__ */ g(_, {
-      sx: {
-        gap: 3,
-        mt: 4
-      },
-      children: [/* @__PURE__ */ o(E, {
-        autoFocus: !0,
-        maxRows: 4,
-        minRows: 4,
-        multiline: !0,
+    children: [
+      u && /* @__PURE__ */ o(g, {
+        sx: { mb: 8 },
+        variant: "body1",
+        children: u
+      }),
+      /* @__PURE__ */ o(H, { children: /* @__PURE__ */ o(K, {
+        "aria-label": s,
+        name: "feedback-radio-group",
         onChange: (e) => d(e.target.value),
-        onFocus: A,
-        slotProps: { htmlInput: { maxLength: v } },
-        value: a
-      }), u && /* @__PURE__ */ o(j, {
+        value: t,
+        children: r.map((e) => /* @__PURE__ */ o(E, {
+          control: /* @__PURE__ */ o(G, { sx: { "& .MuiSvgIcon-root": {
+            fontSize: 22,
+            color: "action.active"
+          } } }),
+          label: e,
+          sx: { "& .MuiFormControlLabel-label": {
+            color: "text.primary",
+            fontSize: 15
+          } },
+          value: e
+        }, e))
+      }) }),
+      c && /* @__PURE__ */ x(z, {
         sx: {
-          color: "text.secondary",
-          fontWeight: 400
+          gap: 3,
+          mt: 4
         },
-        variant: "subtitle2",
-        children: u
-      })]
-    })]
+        children: [/* @__PURE__ */ o(L, {
+          autoFocus: !0,
+          maxRows: 4,
+          minRows: 4,
+          multiline: !0,
+          onChange: (e) => f(e.target.value),
+          onFocus: I,
+          slotProps: { htmlInput: { maxLength: y } },
+          value: l
+        }), m && /* @__PURE__ */ o(g, {
+          sx: {
+            color: "text.secondary",
+            fontWeight: 400
+          },
+          variant: "subtitle2",
+          children: m
+        })]
+      })
+    ]
   });
 };
 export {
-  O as default
+  ee as default
 };
 
 //# sourceMappingURL=FeedbackDialog.es.js.map