@mx-cartographer/experiences 9.6.11 → 9.6.12

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

@@ -0,0 +1,7 @@
+/**
+ * The mx-icons name an `ICO-<name>` guid carries (`ICO-error` → `error`), or undefined for any other
+ * guid, a malformed name, or a name mx-icons does not define — so a caller renders nothing rather
+ * than an empty box. ditto names a status icon this way where a block has no entity logo (account_block
+ * `minimal`).
+ */
+export declare const statusIconName: (guid?: string | null) => string | undefined;

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

@@ -0,0 +1,10 @@
+import { IconList as o } from "@mxenabled/mx-icons";
+var n = (e) => {
+  const t = /^ICO-([a-z0-9_]+)$/.exec(e ?? "")?.[1];
+  return t && Object.hasOwn(o, t) ? t : void 0;
+};
+export {
+  n as statusIconName
+};
+
+//# sourceMappingURL=statusIcon.es.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"statusIcon.es.js","names":[],"sources":["../../../src/insights-v2/components/statusIcon.ts"],"sourcesContent":["import { IconList } from '@mxenabled/mx-icons'\n\n/**\n * The mx-icons name an `ICO-<name>` guid carries (`ICO-error` → `error`), or undefined for any other\n * guid, a malformed name, or a name mx-icons does not define — so a caller renders nothing rather\n * than an empty box. ditto names a status icon this way where a block has no entity logo (account_block\n * `minimal`).\n */\nexport const statusIconName = (guid?: string | null): string | undefined => {\n  const name = /^ICO-([a-z0-9_]+)$/.exec(guid ?? '')?.[1]\n\n  // Own keys only: `in` would also accept inherited names such as `constructor`.\n  return name && Object.hasOwn(IconList, name) ? name : undefined\n}\n"],"mappings":";AAQA,IAAa,IAAA,CAAkB,MAA6C;AAC1E,QAAM,IAAO,qBAAqB,KAAK,KAAQ,EAAE,IAAI,CAAA;AAGrD,SAAO,KAAQ,OAAO,OAAO,GAAU,CAAI,IAAI,IAAO;AACxD"}

package/dist/microinsights/cards/InsightCard.es.js

@@ -1,38 +1,39 @@
-import { slot as k } from "../../core/types/Insights.es.js";
-import { resolveInsightRender as x } from "../../insights-v2/resolveInsightRender.es.js";
-import B from "../../insights-v2/components/LogoFromGuid.es.js";
-import M from "../../insights-v2/components/InsightErrorCard.es.js";
-import { ON_CLICK_EVENT as R, ON_VIEW_EVENT as W, ON_VIEW_FIRST_TIME_EVENT as S } from "../constants/Analytics.es.js";
-import F from "../beaticons/BeatMaterialIcon.es.js";
-import { BeatIcon as O } from "../beaticons/BeatIcon.es.js";
-import { useCopyStore as P, useEvent as A, useInsightsMicroWidgetStore as j } from "../context/hooks.es.js";
-import E from "../MicroCardTemplate.es.js";
-import { useEffect as I } from "react";
-import { jsx as r } from "react/jsx-runtime";
-import { alpha as v, useTheme as w } from "@mui/material/styles";
-import z from "@mui/material/Box";
-import { useInView as G } from "react-intersection-observer";
-var K = 32, ti = ({ ariaLabel: l, beat: i, elevation: g, index: c, isActiveCard: s, onCardClick: u, posthog: o, widthOverrides: m, variant: f, showIcon: h, heightOverrides: a }) => {
-  const { ref: _, inView: n } = G({ threshold: 1 }), C = w(), { cardsCopy: T } = P(), { onEvent: d } = A(), { updateBeat: N, updateOffer: V } = j();
-  I(() => {
-    n && (i.has_been_displayed ? d(W(i.template)) : (i.guid.startsWith("OFR") ? V({
+import { slot as C } from "../../core/types/Insights.es.js";
+import { resolveInsightRender as S } from "../../insights-v2/resolveInsightRender.es.js";
+import F from "../../insights-v2/components/LogoFromGuid.es.js";
+import O from "../../insights-v2/components/InsightErrorCard.es.js";
+import { ON_CLICK_EVENT as P, ON_VIEW_EVENT as A, ON_VIEW_FIRST_TIME_EVENT as L } from "../constants/Analytics.es.js";
+import N from "../beaticons/BeatMaterialIcon.es.js";
+import { BeatIcon as j } from "../beaticons/BeatIcon.es.js";
+import { useCopyStore as v, useEvent as w, useInsightsMicroWidgetStore as z } from "../context/hooks.es.js";
+import T from "../MicroCardTemplate.es.js";
+import { statusIconName as G } from "../../insights-v2/components/statusIcon.es.js";
+import { useEffect as V } from "react";
+import { jsx as o } from "react/jsx-runtime";
+import { alpha as k, useTheme as K } from "@mui/material/styles";
+import Z from "@mui/material/Box";
+import { useInView as $ } from "react-intersection-observer";
+var q = 32, si = ({ ariaLabel: s, beat: i, elevation: g, index: c, isActiveCard: l, onCardClick: u, posthog: r, widthOverrides: n, variant: f, showIcon: h, heightOverrides: p }) => {
+  const { ref: _, inView: m } = $({ threshold: 1 }), I = K(), { cardsCopy: x } = v(), { onEvent: d } = w(), { updateBeat: B, updateOffer: M } = z();
+  V(() => {
+    m && (i.has_been_displayed ? d(A(i.template)) : (i.guid.startsWith("OFR") ? M({
       ...i,
       has_been_displayed: !0
-    }) : N({
+    }) : B({
       ...i,
       has_been_displayed: !0
-    }), d(S(i.template))));
-  }, [n]), I(() => {
-    if (n && i) if (i.template === "MarketingOffer") {
-      const e = i;
-      o?.capture("viewed_messaging_insight", {
+    }), d(L(i.template))));
+  }, [m]), V(() => {
+    if (m && i) if (i.template === "MarketingOffer") {
+      const t = i;
+      r?.capture("viewed_messaging_insight", {
         template: i.template,
-        campaign_guid: e.campaign_guid,
-        campaign_name: e.pulse_campaign_name,
-        offer_guid: e.guid,
-        user_guid: e.user_guid
+        campaign_guid: t.campaign_guid,
+        campaign_name: t.pulse_campaign_name,
+        offer_guid: t.guid,
+        user_guid: t.user_guid
       });
-    } else o?.capture("viewed_insight", {
+    } else r?.capture("viewed_insight", {
       beat_guid: i.guid,
       template: i.template,
       position: c
@@ -40,81 +41,85 @@ var K = 32, ti = ({ ariaLabel: l, beat: i, elevation: g, index: c, isActiveCard:
   }, [
     i,
     c,
-    n
+    m
   ]);
-  const p = () => {
-    if (u && u(i), d(R(i.template)), i.template === "MarketingOffer") {
-      const e = i;
-      o?.capture("clicked_messaging_insight", {
+  const a = () => {
+    if (u && u(i), d(P(i.template)), i.template === "MarketingOffer") {
+      const t = i;
+      r?.capture("clicked_messaging_insight", {
         template: i.template,
-        campaign_guid: e.campaign_guid,
-        campaign_name: e.pulse_campaign_name,
-        offer_guid: e.guid,
-        user_guid: e.user_guid
+        campaign_guid: t.campaign_guid,
+        campaign_name: t.pulse_campaign_name,
+        offer_guid: t.guid,
+        user_guid: t.user_guid
       });
-    } else o?.capture("clicked_insight", {
+    } else r?.capture("clicked_insight", {
       beat_guid: i.guid,
       template: i.template,
       position: c
     });
-  }, y = x(i), t = y === "v2" ? i.insights_payload : void 0;
-  if (y === "error") return /* @__PURE__ */ r(z, {
-    "aria-hidden": !s,
-    "aria-label": l,
+  }, y = S(i), e = y === "v2" ? i.insights_payload : void 0;
+  if (y === "error") return /* @__PURE__ */ o(Z, {
+    "aria-hidden": !l,
+    "aria-label": s,
     "aria-roledescription": "slide",
     ref: _,
     role: "group",
     sx: {
-      height: a ? "100%" : 120,
-      minWidth: m ? `${m}px` : "100%",
+      height: p ? "100%" : 120,
+      minWidth: n ? `${n}px` : "100%",
       my: 1
     },
-    children: /* @__PURE__ */ r(M, { beat: i })
+    children: /* @__PURE__ */ o(O, { beat: i })
   });
-  if (t) {
-    const e = k(t.instance_slot.data, "logo");
-    return /* @__PURE__ */ r(E, {
+  if (e) {
+    const t = C(e.instance_slot.data, "logo"), R = C(e.instance_slot.data, "icon"), E = G(R?.guid), W = e.primary_cta?.label ?? e.in_description_cta?.label;
+    return /* @__PURE__ */ o(T, {
       "aria-roledescription": "slide",
-      ariaLabel: l,
-      description: t.description.html_text,
+      ariaLabel: s,
+      description: e.description.html_text,
       elevation: g,
-      heightOverrides: a,
-      icon: h && (e ? /* @__PURE__ */ r(B, {
-        logo: e,
-        size: K
-      }) : /* @__PURE__ */ r(F, {
-        bgColor: v(C.palette.primary.main, 0.15),
+      heightOverrides: p,
+      icon: h && (t ? /* @__PURE__ */ o(F, {
+        logo: t,
+        size: q
+      }) : E ? /* @__PURE__ */ o(N, {
+        bgColor: k(I.palette.error.main, 0.15),
+        iconColor: "error",
+        name: E
+      }) : /* @__PURE__ */ o(N, {
+        bgColor: k(I.palette.primary.main, 0.15),
         name: "lightbulb"
       })),
-      isActiveCard: s,
-      onCardClick: p,
-      onPrimaryAction: p,
-      primaryActionText: t.primary_cta?.label,
+      isActiveCard: l,
+      onCardClick: a,
+      onPrimaryAction: a,
+      primaryActionText: W,
       ref: _,
-      title: t.title ?? "",
+      title: e.title ?? "",
       variant: f,
-      widthOverrides: m
+      widthOverrides: n
     });
   }
-  return /* @__PURE__ */ r(E, {
+  return /* @__PURE__ */ o(T, {
     "aria-roledescription": "slide",
-    ariaLabel: l,
+    ariaLabel: s,
     description: i?.html_micro_description && i?.html_micro_description.length > 0 ? i.html_micro_description : i.html_description || "",
     elevation: g,
-    heightOverrides: a,
-    icon: h && /* @__PURE__ */ r(O, { beat: i }),
-    isActiveCard: s,
-    onCardClick: p,
-    onPrimaryAction: p,
-    primaryActionText: i.micro_call_to_action || T?.micro_card_cta,
+    heightOverrides: p,
+    icon: h && /* @__PURE__ */ o(j, { beat: i }),
+    isActiveCard: l,
+    onCardClick: a,
+    onPrimaryAction: a,
+    primaryActionText: i.micro_call_to_action || x?.micro_card_cta,
     ref: _,
     title: i.micro_title && i.micro_title.length > 0 ? i.micro_title : i.title,
     variant: f,
-    widthOverrides: m
+    widthOverrides: n
   });
 };
 export {
-  ti as InsightCard
+  si as InsightCard
 };
 
 //# sourceMappingURL=InsightCard.es.js.map

package/dist/microinsights/cards/InsightCard.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"InsightCard.es.js","names":[],"sources":["../../../src/microinsights/cards/InsightCard.tsx"],"sourcesContent":["import React, { useEffect } from 'react'\nimport { useInView } from 'react-intersection-observer'\n\nimport Box from '@mui/material/Box'\nimport { alpha, useTheme } from '@mui/material/styles'\n\nimport { BeatIcon } from '../beaticons'\nimport BeatMaterialIcon from '../beaticons/BeatMaterialIcon'\n\nimport { useCopyStore, useEvent, useInsightsMicroWidgetStore } from '../context/hooks'\n\nimport { ON_CLICK_EVENT, ON_VIEW_EVENT, ON_VIEW_FIRST_TIME_EVENT } from '../constants/Analytics'\nimport { VIEW_THRESHOLD } from '../constants/App'\n\nimport type { BeatLikeOffer, MicroInsightCardProps } from '../interfaces'\nimport type { Beat } from '../../core/types/Beat'\n// Leaf imports, not the `core` barrel: that pulls GlobalStore and every feature store into the\n// micro bundle, and through `core/stores` it reintroduces a circular path this module avoids.\nimport { slot } from '../../core/types/Insights'\nimport type { LogoRef } from '../../core/types/Insights'\nimport MicroCardTemplate from '../MicroCardTemplate'\n// Leaf imports on purpose: the `insights-v2` barrel pulls in `mappings/blocks` and its charts.\nimport InsightErrorCard from '../../insights-v2/components/InsightErrorCard'\nimport LogoFromGuid from '../../insights-v2/components/LogoFromGuid'\nimport { resolveInsightRender } from '../../insights-v2/resolveInsightRender'\n\n/** The legacy micro card's icon tile size (BeatMaterialIcon). */\nconst ICON_SIZE = 32\n\nexport interface InsightCardProps extends MicroInsightCardProps {\n  beat: Beat | BeatLikeOffer\n  index?: number\n}\n\nexport const InsightCard: React.FC<InsightCardProps> = ({\n  ariaLabel,\n  beat,\n  elevation,\n  index,\n  isActiveCard,\n  onCardClick,\n  posthog,\n  widthOverrides,\n  variant,\n  showIcon,\n  heightOverrides,\n}) => {\n  const { ref, inView } = useInView({\n    threshold: VIEW_THRESHOLD,\n  })\n\n  const theme = useTheme()\n\n  // *************** Context functions *********************\n  const { cardsCopy } = useCopyStore()\n  const { onEvent } = useEvent()\n  const { updateBeat, updateOffer } = useInsightsMicroWidgetStore()\n\n  // ************** Use Effects Hooks **********************\n  useEffect(() => {\n    if (inView) {\n      if (!beat.has_been_displayed) {\n        if (beat.guid.startsWith('OFR')) {\n          updateOffer({\n            ...beat,\n            has_been_displayed: true,\n          })\n        } else {\n          updateBeat({\n            ...beat,\n            has_been_displayed: true,\n          })\n        }\n        onEvent(ON_VIEW_FIRST_TIME_EVENT(beat.template))\n      } else {\n        onEvent(ON_VIEW_EVENT(beat.template))\n      }\n    }\n  }, [inView])\n\n  useEffect(() => {\n    if (inView && beat) {\n      if (beat.template === 'MarketingOffer') {\n        const offerBeat = beat as BeatLikeOffer\n        posthog?.capture('viewed_messaging_insight', {\n          template: beat.template,\n          campaign_guid: offerBeat.campaign_guid,\n          campaign_name: offerBeat.pulse_campaign_name,\n          offer_guid: offerBeat.guid,\n          user_guid: offerBeat.user_guid,\n        })\n      } else {\n        posthog?.capture('viewed_insight', {\n          beat_guid: beat.guid,\n          template: beat.template,\n          position: index,\n        })\n      }\n    }\n  }, [beat, index, inView])\n\n  // *************** Click handlers ************************\n  const handleClick = () => {\n    /* eslint-disable no-unused-expressions */\n    onCardClick && onCardClick(beat)\n    onEvent(ON_CLICK_EVENT(beat.template))\n\n    if (beat.template === 'MarketingOffer') {\n      const offerBeat = beat as BeatLikeOffer\n      posthog?.capture('clicked_messaging_insight', {\n        template: beat.template,\n        campaign_guid: offerBeat.campaign_guid,\n        campaign_name: offerBeat.pulse_campaign_name,\n        offer_guid: offerBeat.guid,\n        user_guid: offerBeat.user_guid,\n      })\n    } else {\n      posthog?.capture('clicked_insight', {\n        beat_guid: beat.guid,\n        template: beat.template,\n        position: index,\n      })\n    }\n  }\n\n  const insightRender = resolveInsightRender(beat as Beat)\n  const v2Payload = insightRender === 'v2' ? beat.insights_payload : undefined\n\n  if (insightRender === 'error') {\n    // Keeps the carousel's slot sizing; the error card does not know about it.\n    return (\n      <Box\n        aria-hidden={!isActiveCard}\n        aria-label={ariaLabel}\n        aria-roledescription=\"slide\"\n        ref={ref}\n        role=\"group\"\n        sx={{\n          height: heightOverrides ? '100%' : 120,\n          minWidth: widthOverrides ? `${widthOverrides}px` : '100%',\n          my: 1,\n        }}\n      >\n        <InsightErrorCard beat={beat} />\n      </Box>\n    )\n  }\n\n  if (v2Payload) {\n    // Figma (Micro Widget | Large Transaction) is the legacy micro card's layout fed from the envelope:\n    // the slot's logo on the left (merchant, or the category without one), title, description, and the\n    // primary CTA as a link. The logo falls back to the insight glyph when the slot carries none.\n    const rowLogo = slot<LogoRef>(v2Payload.instance_slot.data, 'logo')\n\n    return (\n      <MicroCardTemplate\n        aria-roledescription=\"slide\"\n        ariaLabel={ariaLabel}\n        description={v2Payload.description.html_text}\n        elevation={elevation}\n        heightOverrides={heightOverrides}\n        icon={\n          showIcon &&\n          (rowLogo ? (\n            <LogoFromGuid logo={rowLogo} size={ICON_SIZE} />\n          ) : (\n            <BeatMaterialIcon bgColor={alpha(theme.palette.primary.main, 0.15)} name=\"lightbulb\" />\n          ))\n        }\n        isActiveCard={isActiveCard}\n        onCardClick={handleClick}\n        onPrimaryAction={handleClick}\n        primaryActionText={v2Payload.primary_cta?.label}\n        ref={ref}\n        title={v2Payload.title ?? ''}\n        variant={variant}\n        widthOverrides={widthOverrides}\n      />\n    )\n  }\n\n  return (\n    <MicroCardTemplate\n      aria-roledescription=\"slide\"\n      ariaLabel={ariaLabel}\n      description={\n        beat?.html_micro_description && beat?.html_micro_description.length > 0\n          ? beat.html_micro_description\n          : beat.html_description || ''\n      }\n      elevation={elevation}\n      heightOverrides={heightOverrides}\n      icon={showIcon && <BeatIcon beat={beat} />}\n      isActiveCard={isActiveCard}\n      onCardClick={handleClick}\n      onPrimaryAction={handleClick}\n      primaryActionText={beat.micro_call_to_action || cardsCopy?.micro_card_cta}\n      ref={ref}\n      title={beat.micro_title && beat.micro_title.length > 0 ? beat.micro_title : beat.title}\n      variant={variant}\n      widthOverrides={widthOverrides}\n    />\n  )\n}\n"],"mappings":"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"}
+{"version":3,"file":"InsightCard.es.js","names":[],"sources":["../../../src/microinsights/cards/InsightCard.tsx"],"sourcesContent":["import React, { useEffect } from 'react'\nimport { useInView } from 'react-intersection-observer'\n\nimport Box from '@mui/material/Box'\nimport { alpha, useTheme } from '@mui/material/styles'\n\nimport { BeatIcon } from '../beaticons'\nimport BeatMaterialIcon from '../beaticons/BeatMaterialIcon'\n\nimport { useCopyStore, useEvent, useInsightsMicroWidgetStore } from '../context/hooks'\n\nimport { ON_CLICK_EVENT, ON_VIEW_EVENT, ON_VIEW_FIRST_TIME_EVENT } from '../constants/Analytics'\nimport { VIEW_THRESHOLD } from '../constants/App'\n\nimport type { BeatLikeOffer, MicroInsightCardProps } from '../interfaces'\nimport type { Beat } from '../../core/types/Beat'\n// Leaf imports, not the `core` barrel: that pulls GlobalStore and every feature store into the\n// micro bundle, and through `core/stores` it reintroduces a circular path this module avoids.\nimport { slot } from '../../core/types/Insights'\nimport type { LogoRef } from '../../core/types/Insights'\nimport MicroCardTemplate from '../MicroCardTemplate'\n// Leaf imports on purpose: the `insights-v2` barrel pulls in `mappings/blocks` and its charts.\nimport InsightErrorCard from '../../insights-v2/components/InsightErrorCard'\nimport LogoFromGuid from '../../insights-v2/components/LogoFromGuid'\nimport { statusIconName } from '../../insights-v2/components/statusIcon'\nimport { resolveInsightRender } from '../../insights-v2/resolveInsightRender'\n\n/** The legacy micro card's icon tile size (BeatMaterialIcon). */\nconst ICON_SIZE = 32\n\nexport interface InsightCardProps extends MicroInsightCardProps {\n  beat: Beat | BeatLikeOffer\n  index?: number\n}\n\nexport const InsightCard: React.FC<InsightCardProps> = ({\n  ariaLabel,\n  beat,\n  elevation,\n  index,\n  isActiveCard,\n  onCardClick,\n  posthog,\n  widthOverrides,\n  variant,\n  showIcon,\n  heightOverrides,\n}) => {\n  const { ref, inView } = useInView({\n    threshold: VIEW_THRESHOLD,\n  })\n\n  const theme = useTheme()\n\n  // *************** Context functions *********************\n  const { cardsCopy } = useCopyStore()\n  const { onEvent } = useEvent()\n  const { updateBeat, updateOffer } = useInsightsMicroWidgetStore()\n\n  // ************** Use Effects Hooks **********************\n  useEffect(() => {\n    if (inView) {\n      if (!beat.has_been_displayed) {\n        if (beat.guid.startsWith('OFR')) {\n          updateOffer({\n            ...beat,\n            has_been_displayed: true,\n          })\n        } else {\n          updateBeat({\n            ...beat,\n            has_been_displayed: true,\n          })\n        }\n        onEvent(ON_VIEW_FIRST_TIME_EVENT(beat.template))\n      } else {\n        onEvent(ON_VIEW_EVENT(beat.template))\n      }\n    }\n  }, [inView])\n\n  useEffect(() => {\n    if (inView && beat) {\n      if (beat.template === 'MarketingOffer') {\n        const offerBeat = beat as BeatLikeOffer\n        posthog?.capture('viewed_messaging_insight', {\n          template: beat.template,\n          campaign_guid: offerBeat.campaign_guid,\n          campaign_name: offerBeat.pulse_campaign_name,\n          offer_guid: offerBeat.guid,\n          user_guid: offerBeat.user_guid,\n        })\n      } else {\n        posthog?.capture('viewed_insight', {\n          beat_guid: beat.guid,\n          template: beat.template,\n          position: index,\n        })\n      }\n    }\n  }, [beat, index, inView])\n\n  // *************** Click handlers ************************\n  const handleClick = () => {\n    /* eslint-disable no-unused-expressions */\n    onCardClick && onCardClick(beat)\n    onEvent(ON_CLICK_EVENT(beat.template))\n\n    if (beat.template === 'MarketingOffer') {\n      const offerBeat = beat as BeatLikeOffer\n      posthog?.capture('clicked_messaging_insight', {\n        template: beat.template,\n        campaign_guid: offerBeat.campaign_guid,\n        campaign_name: offerBeat.pulse_campaign_name,\n        offer_guid: offerBeat.guid,\n        user_guid: offerBeat.user_guid,\n      })\n    } else {\n      posthog?.capture('clicked_insight', {\n        beat_guid: beat.guid,\n        template: beat.template,\n        position: index,\n      })\n    }\n  }\n\n  const insightRender = resolveInsightRender(beat as Beat)\n  const v2Payload = insightRender === 'v2' ? beat.insights_payload : undefined\n\n  if (insightRender === 'error') {\n    // Keeps the carousel's slot sizing; the error card does not know about it.\n    return (\n      <Box\n        aria-hidden={!isActiveCard}\n        aria-label={ariaLabel}\n        aria-roledescription=\"slide\"\n        ref={ref}\n        role=\"group\"\n        sx={{\n          height: heightOverrides ? '100%' : 120,\n          minWidth: widthOverrides ? `${widthOverrides}px` : '100%',\n          my: 1,\n        }}\n      >\n        <InsightErrorCard beat={beat} />\n      </Box>\n    )\n  }\n\n  if (v2Payload) {\n    // Figma (Micro Widget | Large Transaction) is the legacy micro card's layout fed from the envelope:\n    // the slot's logo on the left (merchant, or the category without one), title, description, and the\n    // primary CTA as a link. The logo falls back to the insight glyph when the slot carries none.\n    // ditto ≥ 1.4.3 words micro's action as in_description_cta instead of primary_cta; either way\n    // the label stays the card's tap (`micro-carousel/cta`), never a drawer.\n    // A block with no row logo may name a status icon instead (account_block `minimal`: `ICO-error`),\n    // drawn in the legacy card's tinted tile (Figma Micro | Low Account Balance).\n    const rowLogo = slot<LogoRef>(v2Payload.instance_slot.data, 'logo')\n    const statusIcon = slot<LogoRef>(v2Payload.instance_slot.data, 'icon')\n    const statusName = statusIconName(statusIcon?.guid)\n    const actionLabel = v2Payload.primary_cta?.label ?? v2Payload.in_description_cta?.label\n\n    return (\n      <MicroCardTemplate\n        aria-roledescription=\"slide\"\n        ariaLabel={ariaLabel}\n        description={v2Payload.description.html_text}\n        elevation={elevation}\n        heightOverrides={heightOverrides}\n        icon={\n          showIcon &&\n          (rowLogo ? (\n            <LogoFromGuid logo={rowLogo} size={ICON_SIZE} />\n          ) : statusName ? (\n            <BeatMaterialIcon\n              bgColor={alpha(theme.palette.error.main, 0.15)}\n              iconColor=\"error\"\n              name={statusName}\n            />\n          ) : (\n            <BeatMaterialIcon bgColor={alpha(theme.palette.primary.main, 0.15)} name=\"lightbulb\" />\n          ))\n        }\n        isActiveCard={isActiveCard}\n        onCardClick={handleClick}\n        onPrimaryAction={handleClick}\n        primaryActionText={actionLabel}\n        ref={ref}\n        title={v2Payload.title ?? ''}\n        variant={variant}\n        widthOverrides={widthOverrides}\n      />\n    )\n  }\n\n  return (\n    <MicroCardTemplate\n      aria-roledescription=\"slide\"\n      ariaLabel={ariaLabel}\n      description={\n        beat?.html_micro_description && beat?.html_micro_description.length > 0\n          ? beat.html_micro_description\n          : beat.html_description || ''\n      }\n      elevation={elevation}\n      heightOverrides={heightOverrides}\n      icon={showIcon && <BeatIcon beat={beat} />}\n      isActiveCard={isActiveCard}\n      onCardClick={handleClick}\n      onPrimaryAction={handleClick}\n      primaryActionText={beat.micro_call_to_action || cardsCopy?.micro_card_cta}\n      ref={ref}\n      title={beat.micro_title && beat.micro_title.length > 0 ? beat.micro_title : beat.title}\n      variant={variant}\n      widthOverrides={widthOverrides}\n    />\n  )\n}\n"],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mx-cartographer/experiences",
-  "version": "9.6.11",
+  "version": "9.6.12",
   "description": "Library containing experience widgets",
   "author": "MX",
   "license": "MIT",