@mx-cartographer/experiences 9.4.12-alpha.al1 → 9.4.13

package/dist/insights-v2/actionBlocks/MakeTransferActionBlock/layout.d.ts

@@ -1,57 +1,23 @@
 import { GlobalCopy, MakeTransferCopy } from '../../../core';
 import { SaveExtraBlockData } from '../../../core/types/InsightsInstanceSlotData';
 /**
- * MakeTransfer drilldown variants. The block uses the VALUE (e.g. "SaveAnExtra100").
+ * MakeTransfer drilldown variants. The block uses the VALUE (e.g. "SaveAnExtra100"),
+ * which is also the key each variant registers under (see ./index).
  */
 export declare const variants: {
     readonly SAVE_ENOUGH_TO_LIVE_ON: "SaveEnoughToLiveOn";
     readonly SAVE_AN_EXTRA_100: "SaveAnExtra100";
 };
 export type MakeTransferVariant = (typeof variants)[keyof typeof variants];
-interface MonthRow {
-    label: string;
-    value: number;
-}
-/**
- * Per-variant layout for the MakeTransfer drilldown — mirrors the Beat Blocks
- * `layout.ts` pattern: the component reads this config instead of branching on
- * the variant inline.
- */
-export interface MakeTransferLayoutConfig {
-    /** Rows in the projected-savings table. */
-    monthsTable: readonly MonthRow[];
-    /** Stepper increment/decrement step. */
-    deltaAmount: number;
-    /** Starting stepper amount; when null, defaults to `averageMonthlySpend`. */
-    initialAmount: number | null;
-    /** Index of the last table row (its divider has no left inset). */
-    lastRowIndex: number;
-    /** Available/expenses card with "total remaining" (save-extra only). */
-    showRemainingCard: boolean;
-    /** SVG timeline + balances header section (save-enough only). */
-    showBalancesSection: boolean;
-    /** Total available-balances footer (save-enough only). */
-    showTotalBalances: boolean;
-    /** `insights_feed.make_transfer` copy keys resolved for this variant. */
-    copyKeys: {
-        title: keyof MakeTransferCopy;
-        bodyContent: keyof MakeTransferCopy;
-        bodyDescription: keyof MakeTransferCopy;
-    };
-    /** `instance_slot_data` field names feeding this variant's figures. */
-    dataKeys: {
-        /** Field for the "average monthly spend" / "expenses" figure. */
-        averageMonthlySpend: keyof SaveExtraBlockData;
-        /** SAVE_ENOUGH_TO_LIVE_ON: duration overlaid on the timeline SVG. */
-        timePeriod?: keyof SaveExtraBlockData;
-        /** SAVE_AN_EXTRA_100: total-remaining figure. */
-        totalRemaining?: keyof SaveExtraBlockData;
-    };
+/** Props shared by every MakeTransfer variant. Each variant reads the fields it
+ *  needs directly off `slotData` — no per-variant key indirection. */
+export interface MakeTransferVariantProps {
+    slotData?: SaveExtraBlockData;
+    copy: MakeTransferCopy;
 }
 /** Maps the payload variant key to the block's variant VALUE (defaults to save-extra). */
 export declare const resolveMakeTransferVariant: (variant?: string | null) => MakeTransferVariant;
-/** Layout config for a resolved block variant. */
-export declare const getMakeTransferLayout: (variant: MakeTransferVariant) => MakeTransferLayoutConfig;
 /** Variant-specific, localized drawer title from `insights_feed.make_transfer`. */
 export declare const getMakeTransferDrawerTitle: (variant: string | null | undefined, copy: GlobalCopy) => string;
-export {};
+/** Coerce a payload figure (number or numeric string) to a number, else undefined. */
+export declare const toNumber: (value?: string | number) => number | undefined;

package/dist/insights-v2/actionBlocks/MakeTransferActionBlock/layout.es.js

@@ -1,85 +1,18 @@
-var a = {
+var e = {
   SAVE_ENOUGH_TO_LIVE_ON: "SaveEnoughToLiveOn",
   SAVE_AN_EXTRA_100: "SaveAnExtra100"
-}, s = {
-  save_enough_to_live_on: a.SAVE_ENOUGH_TO_LIVE_ON,
-  save_an_extra_100: a.SAVE_AN_EXTRA_100
-}, t = [
-  {
-    label: "1 month",
-    value: 1
-  },
-  {
-    label: "3 months",
-    value: 3
-  },
-  {
-    label: "6 months",
-    value: 6
-  },
-  {
-    label: "9 months",
-    value: 9
-  }
-], n = [
-  {
-    label: "3 months",
-    value: 3
-  },
-  {
-    label: "6 months",
-    value: 6
-  },
-  {
-    label: "9 months",
-    value: 9
-  }
-], o = {
-  [a.SAVE_AN_EXTRA_100]: {
-    monthsTable: n,
-    deltaAmount: 5,
-    initialAmount: 100,
-    lastRowIndex: n.length - 1,
-    showRemainingCard: !0,
-    showBalancesSection: !1,
-    showTotalBalances: !1,
-    copyKeys: {
-      title: "save_extra_title",
-      bodyContent: "body_saving_content",
-      bodyDescription: "body_saving_description"
-    },
-    dataKeys: {
-      averageMonthlySpend: "upcoming_expenses",
-      totalRemaining: "total_remaining"
-    }
-  },
-  [a.SAVE_ENOUGH_TO_LIVE_ON]: {
-    monthsTable: t,
-    deltaAmount: 50,
-    initialAmount: null,
-    lastRowIndex: t.length - 1,
-    showRemainingCard: !1,
-    showBalancesSection: !0,
-    showTotalBalances: !0,
-    copyKeys: {
-      title: "save_enough_title",
-      bodyContent: "body_spending_content",
-      bodyDescription: "body_spending_description"
-    },
-    dataKeys: {
-      averageMonthlySpend: "avg_monthly_spend",
-      timePeriod: "time_period"
-    }
-  }
-}, i = (e) => s[e ?? ""] ?? a.SAVE_AN_EXTRA_100, r = (e) => o[e], v = (e, _) => {
-  const l = o[i(e)];
-  return _.insights_feed?.make_transfer[l.copyKeys.title] ?? "";
-};
+}, t = {
+  save_enough_to_live_on: e.SAVE_ENOUGH_TO_LIVE_ON,
+  save_an_extra_100: e.SAVE_AN_EXTRA_100
+}, n = (_) => t[_ ?? ""] ?? e.SAVE_AN_EXTRA_100, E = (_, a) => {
+  const r = a.insights_feed?.make_transfer;
+  return r ? n(_) === e.SAVE_ENOUGH_TO_LIVE_ON ? r.save_enough_title : r.save_extra_title : "";
+}, A = (_) => _ == null || _ === "" ? void 0 : Number(_);
 export {
-  v as getMakeTransferDrawerTitle,
-  r as getMakeTransferLayout,
-  i as resolveMakeTransferVariant,
-  a as variants
+  E as getMakeTransferDrawerTitle,
+  n as resolveMakeTransferVariant,
+  A as toNumber,
+  e as variants
 };
 
 //# sourceMappingURL=layout.es.js.map

package/dist/insights-v2/actionBlocks/MakeTransferActionBlock/layout.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"layout.es.js","names":[],"sources":["../../../../src/insights-v2/actionBlocks/MakeTransferActionBlock/layout.ts"],"sourcesContent":["import type { GlobalCopy, MakeTransferCopy } from '../../../core'\nimport type { SaveExtraBlockData } from '../../../core/types/InsightsInstanceSlotData'\n\n/**\n * MakeTransfer drilldown variants. The block uses the VALUE (e.g. \"SaveAnExtra100\").\n */\nexport const variants = {\n  SAVE_ENOUGH_TO_LIVE_ON: 'SaveEnoughToLiveOn',\n  SAVE_AN_EXTRA_100: 'SaveAnExtra100',\n} as const\n\nexport type MakeTransferVariant = (typeof variants)[keyof typeof variants]\n\n// The beat payload sends the variant as a snake_case key; map it to the value.\nconst VARIANT_BY_KEY: Record<string, MakeTransferVariant> = {\n  save_enough_to_live_on: variants.SAVE_ENOUGH_TO_LIVE_ON,\n  save_an_extra_100: variants.SAVE_AN_EXTRA_100,\n}\n\ninterface MonthRow {\n  label: string\n  value: number\n}\n\nconst MONTHS_TABLE_SAVE_ENOUGH: readonly MonthRow[] = [\n  { label: '1 month', value: 1 },\n  { label: '3 months', value: 3 },\n  { label: '6 months', value: 6 },\n  { label: '9 months', value: 9 },\n]\n\nconst MONTHS_TABLE_SAVE_EXTRA: readonly MonthRow[] = [\n  { label: '3 months', value: 3 },\n  { label: '6 months', value: 6 },\n  { label: '9 months', value: 9 },\n]\n\n/**\n * Per-variant layout for the MakeTransfer drilldown — mirrors the Beat Blocks\n * `layout.ts` pattern: the component reads this config instead of branching on\n * the variant inline.\n */\nexport interface MakeTransferLayoutConfig {\n  /** Rows in the projected-savings table. */\n  monthsTable: readonly MonthRow[]\n  /** Stepper increment/decrement step. */\n  deltaAmount: number\n  /** Starting stepper amount; when null, defaults to `averageMonthlySpend`. */\n  initialAmount: number | null\n  /** Index of the last table row (its divider has no left inset). */\n  lastRowIndex: number\n  /** Available/expenses card with \"total remaining\" (save-extra only). */\n  showRemainingCard: boolean\n  /** SVG timeline + balances header section (save-enough only). */\n  showBalancesSection: boolean\n  /** Total available-balances footer (save-enough only). */\n  showTotalBalances: boolean\n  /** `insights_feed.make_transfer` copy keys resolved for this variant. */\n  copyKeys: {\n    title: keyof MakeTransferCopy\n    bodyContent: keyof MakeTransferCopy\n    bodyDescription: keyof MakeTransferCopy\n  }\n  /** `instance_slot_data` field names feeding this variant's figures. */\n  dataKeys: {\n    /** Field for the \"average monthly spend\" / \"expenses\" figure. */\n    averageMonthlySpend: keyof SaveExtraBlockData\n    /** SAVE_ENOUGH_TO_LIVE_ON: duration overlaid on the timeline SVG. */\n    timePeriod?: keyof SaveExtraBlockData\n    /** SAVE_AN_EXTRA_100: total-remaining figure. */\n    totalRemaining?: keyof SaveExtraBlockData\n  }\n}\n\nconst LAYOUT: Record<MakeTransferVariant, MakeTransferLayoutConfig> = {\n  [variants.SAVE_AN_EXTRA_100]: {\n    monthsTable: MONTHS_TABLE_SAVE_EXTRA,\n    deltaAmount: 5,\n    initialAmount: 100,\n    lastRowIndex: MONTHS_TABLE_SAVE_EXTRA.length - 1,\n    showRemainingCard: true,\n    showBalancesSection: false,\n    showTotalBalances: false,\n    copyKeys: {\n      title: 'save_extra_title',\n      bodyContent: 'body_saving_content',\n      bodyDescription: 'body_saving_description',\n    },\n    dataKeys: {\n      averageMonthlySpend: 'upcoming_expenses',\n      totalRemaining: 'total_remaining',\n    },\n  },\n  [variants.SAVE_ENOUGH_TO_LIVE_ON]: {\n    monthsTable: MONTHS_TABLE_SAVE_ENOUGH,\n    deltaAmount: 50,\n    initialAmount: null,\n    lastRowIndex: MONTHS_TABLE_SAVE_ENOUGH.length - 1,\n    showRemainingCard: false,\n    showBalancesSection: true,\n    showTotalBalances: true,\n    copyKeys: {\n      title: 'save_enough_title',\n      bodyContent: 'body_spending_content',\n      bodyDescription: 'body_spending_description',\n    },\n    dataKeys: {\n      averageMonthlySpend: 'avg_monthly_spend',\n      timePeriod: 'time_period',\n    },\n  },\n}\n\n/** Maps the payload variant key to the block's variant VALUE (defaults to save-extra). */\nexport const resolveMakeTransferVariant = (variant?: string | null): MakeTransferVariant =>\n  VARIANT_BY_KEY[variant ?? ''] ?? variants.SAVE_AN_EXTRA_100\n\n/** Layout config for a resolved block variant. */\nexport const getMakeTransferLayout = (variant: MakeTransferVariant): MakeTransferLayoutConfig =>\n  LAYOUT[variant]\n\n/** Variant-specific, localized drawer title from `insights_feed.make_transfer`. */\nexport const getMakeTransferDrawerTitle = (\n  variant: string | null | undefined,\n  copy: GlobalCopy,\n): string => {\n  const layout = LAYOUT[resolveMakeTransferVariant(variant)]\n  return copy.insights_feed?.make_transfer[layout.copyKeys.title] ?? ''\n}\n"],"mappings":"AAMA,IAAa,IAAW;AAAA,EACtB,wBAAwB;AAAA,EACxB,mBAAmB;AACrB,GAKM,IAAsD;AAAA,EAC1D,wBAAwB,EAAS;AAAA,EACjC,mBAAmB,EAAS;AAC9B,GAOM,IAAgD;AAAA,EACpD;AAAA,IAAE,OAAO;AAAA,IAAW,OAAO;AAAA,EAAE;AAAA,EAC7B;AAAA,IAAE,OAAO;AAAA,IAAY,OAAO;AAAA,EAAE;AAAA,EAC9B;AAAA,IAAE,OAAO;AAAA,IAAY,OAAO;AAAA,EAAE;AAAA,EAC9B;AAAA,IAAE,OAAO;AAAA,IAAY,OAAO;AAAA,EAAE;AAChC,GAEM,IAA+C;AAAA,EACnD;AAAA,IAAE,OAAO;AAAA,IAAY,OAAO;AAAA,EAAE;AAAA,EAC9B;AAAA,IAAE,OAAO;AAAA,IAAY,OAAO;AAAA,EAAE;AAAA,EAC9B;AAAA,IAAE,OAAO;AAAA,IAAY,OAAO;AAAA,EAAE;AAChC,GAuCM,IAAgE;AAAA,EACnE,CAAA,EAAS,iBAAA,GAAoB;AAAA,IAC5B,aAAa;AAAA,IACb,aAAa;AAAA,IACb,eAAe;AAAA,IACf,cAAc,EAAwB,SAAS;AAAA,IAC/C,mBAAmB;AAAA,IACnB,qBAAqB;AAAA,IACrB,mBAAmB;AAAA,IACnB,UAAU;AAAA,MACR,OAAO;AAAA,MACP,aAAa;AAAA,MACb,iBAAiB;AAAA,IACnB;AAAA,IACA,UAAU;AAAA,MACR,qBAAqB;AAAA,MACrB,gBAAgB;AAAA,IAClB;AAAA,EACF;AAAA,EACC,CAAA,EAAS,sBAAA,GAAyB;AAAA,IACjC,aAAa;AAAA,IACb,aAAa;AAAA,IACb,eAAe;AAAA,IACf,cAAc,EAAyB,SAAS;AAAA,IAChD,mBAAmB;AAAA,IACnB,qBAAqB;AAAA,IACrB,mBAAmB;AAAA,IACnB,UAAU;AAAA,MACR,OAAO;AAAA,MACP,aAAa;AAAA,MACb,iBAAiB;AAAA,IACnB;AAAA,IACA,UAAU;AAAA,MACR,qBAAqB;AAAA,MACrB,YAAY;AAAA,IACd;AAAA,EACF;AACF,GAGa,IAAA,CAA8B,MACzC,EAAe,KAAW,EAAA,KAAO,EAAS,mBAG/B,IAAA,CAAyB,MACpC,EAAO,CAAA,GAGI,IAAA,CACX,GACA,MACW;AACX,QAAM,IAAS,EAAO,EAA2B,CAAO,CAAA;AACxD,SAAO,EAAK,eAAe,cAAc,EAAO,SAAS,KAAA,KAAU;AACrE"}
+{"version":3,"file":"layout.es.js","names":[],"sources":["../../../../src/insights-v2/actionBlocks/MakeTransferActionBlock/layout.ts"],"sourcesContent":["import type { GlobalCopy, MakeTransferCopy } from '../../../core'\nimport type { SaveExtraBlockData } from '../../../core/types/InsightsInstanceSlotData'\n\n/**\n * MakeTransfer drilldown variants. The block uses the VALUE (e.g. \"SaveAnExtra100\"),\n * which is also the key each variant registers under (see ./index).\n */\nexport const variants = {\n  SAVE_ENOUGH_TO_LIVE_ON: 'SaveEnoughToLiveOn',\n  SAVE_AN_EXTRA_100: 'SaveAnExtra100',\n} as const\n\nexport type MakeTransferVariant = (typeof variants)[keyof typeof variants]\n\n// The beat payload sends the variant as a snake_case key; map it to the value.\nconst VARIANT_BY_KEY: Record<string, MakeTransferVariant> = {\n  save_enough_to_live_on: variants.SAVE_ENOUGH_TO_LIVE_ON,\n  save_an_extra_100: variants.SAVE_AN_EXTRA_100,\n}\n\n/** Props shared by every MakeTransfer variant. Each variant reads the fields it\n *  needs directly off `slotData` — no per-variant key indirection. */\nexport interface MakeTransferVariantProps {\n  slotData?: SaveExtraBlockData\n  copy: MakeTransferCopy\n}\n\n/** Maps the payload variant key to the block's variant VALUE (defaults to save-extra). */\nexport const resolveMakeTransferVariant = (variant?: string | null): MakeTransferVariant =>\n  VARIANT_BY_KEY[variant ?? ''] ?? variants.SAVE_AN_EXTRA_100\n\n/** Variant-specific, localized drawer title from `insights_feed.make_transfer`. */\nexport const getMakeTransferDrawerTitle = (\n  variant: string | null | undefined,\n  copy: GlobalCopy,\n): string => {\n  const makeTransfer = copy.insights_feed?.make_transfer\n  if (!makeTransfer) return ''\n  return resolveMakeTransferVariant(variant) === variants.SAVE_ENOUGH_TO_LIVE_ON\n    ? makeTransfer.save_enough_title\n    : makeTransfer.save_extra_title\n}\n\n/** Coerce a payload figure (number or numeric string) to a number, else undefined. */\nexport const toNumber = (value?: string | number): number | undefined =>\n  value === undefined || value === null || value === '' ? undefined : Number(value)\n"],"mappings":"AAOA,IAAa,IAAW;AAAA,EACtB,wBAAwB;AAAA,EACxB,mBAAmB;AACrB,GAKM,IAAsD;AAAA,EAC1D,wBAAwB,EAAS;AAAA,EACjC,mBAAmB,EAAS;AAC9B,GAUa,IAAA,CAA8B,MACzC,EAAe,KAAW,EAAA,KAAO,EAAS,mBAG/B,IAAA,CACX,GACA,MACW;AACX,QAAM,IAAe,EAAK,eAAe;AACzC,SAAK,IACE,EAA2B,CAAO,MAAM,EAAS,yBACpD,EAAa,oBACb,EAAa,mBAHS;AAI5B,GAGa,IAAA,CAAY,MACA,KAAU,QAAQ,MAAU,KAAK,SAAY,OAAO,CAAK"}

package/dist/insights-v2/actionBlocks/PlaceholderActionBlock.es.js

@@ -1,10 +1,11 @@
-import { useInsightsV2Store as n } from "../../common/context/hooks.es.js";
-import { observer as c } from "mobx-react-lite";
+import { useActionContext as h, useInsightsV2Store as m } from "../../common/context/hooks.es.js";
+import { createVariantBlock as p } from "../blocks/createVariantBlock.es.js";
+import { observer as i } from "mobx-react-lite";
 import l from "@mui/material/Stack";
-import { H3 as a, Text as r } from "@mxenabled/mxui";
-import { jsx as t, jsxs as e } from "react/jsx-runtime";
-var g = c(function({ beat: i }) {
-  const { actionDrawer: o } = n();
+import { H3 as s, Text as a } from "@mxenabled/mxui";
+import { jsx as n, jsxs as e } from "react/jsx-runtime";
+var c = i(({ beat: t }) => {
+  const { chartBarIndex: r = 0, tabIndex: o = 0 } = h() ?? {};
   return /* @__PURE__ */ e(l, {
     sx: {
       alignItems: "center",
@@ -13,20 +14,41 @@ var g = c(function({ beat: i }) {
       textAlign: "center"
     },
     children: [
-      /* @__PURE__ */ t(a, { children: "Action Block Layer Drilldown" }),
-      /* @__PURE__ */ t(r, { children: "This is a placeholder action block. Replace it with your own implementation by registering your block in src/insights-v2/mappings/blocks.ts." }),
-      /* @__PURE__ */ e(r, { children: ["Beat: ", i.guid] }),
-      /* @__PURE__ */ e(r, { children: [
+      /* @__PURE__ */ n(s, { children: "Action Block Layer Drilldown" }),
+      /* @__PURE__ */ n(a, { children: "This is a placeholder action block. Replace it with your own implementation by registering your block in src/insights-v2/mappings/blocks.ts." }),
+      /* @__PURE__ */ e(a, { children: ["Beat: ", t.guid] }),
+      /* @__PURE__ */ e(a, { children: [
         "Drilldown: chartBarIndex ",
-        o.chartBarIndex,
+        r,
         ", tabIndex ",
-        o.tabIndex
+        o
       ] })
     ]
   });
+}), g = ({ beat: t }) => /* @__PURE__ */ e(l, {
+  sx: {
+    alignItems: "center",
+    gap: 8,
+    p: 24,
+    textAlign: "center"
+  },
+  children: [/* @__PURE__ */ n(s, { children: "Action Block Layer Drilldown (compact)" }), /* @__PURE__ */ e(a, { children: ["Beat: ", t.guid] })]
+}), x = p({
+  variants: {
+    default: c,
+    compact: g
+  },
+  fallback: c,
+  name: "Placeholder"
+}), A = i(function({ beat: r }) {
+  const { actionDrawer: o } = m(), d = o.trigger === "secondaryCta" ? r.insights_payload?.secondary_cta : r.insights_payload?.primary_cta;
+  return /* @__PURE__ */ n(x, {
+    beat: r,
+    variant: d?.variant
+  });
 });
 export {
-  g as PlaceholderActionBlock
+  A as PlaceholderActionBlock
 };
 
 //# sourceMappingURL=PlaceholderActionBlock.es.js.map

package/dist/insights-v2/actionBlocks/PlaceholderActionBlock.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"PlaceholderActionBlock.es.js","names":[],"sources":["../../../src/insights-v2/actionBlocks/PlaceholderActionBlock.tsx"],"sourcesContent":["import Stack from '@mui/material/Stack'\n\nimport { H3, Text } from '@mxenabled/mxui'\nimport { observer } from 'mobx-react-lite'\n\nimport { useInsightsV2Store } from '../../common'\nimport { type ActionBlockProps } from '../mappings/blocks'\n\nexport const PlaceholderActionBlock = observer(function PlaceholderActionBlock({\n  beat,\n}: ActionBlockProps) {\n  const { actionDrawer } = useInsightsV2Store()\n\n  return (\n    <Stack sx={{ alignItems: 'center', gap: 8, p: 24, textAlign: 'center' }}>\n      <H3>Action Block Layer Drilldown</H3>\n      <Text>\n        This is a placeholder action block. Replace it with your own implementation by registering\n        your block in src/insights-v2/mappings/blocks.ts.\n      </Text>\n      <Text>Beat: {beat.guid}</Text>\n      <Text>\n        Drilldown: chartBarIndex {actionDrawer.chartBarIndex}, tabIndex {actionDrawer.tabIndex}\n      </Text>\n    </Stack>\n  )\n})\n"],"mappings":";;;;;AAQA,IAAa,IAAyB,EAAS,SAAgC,EAC7E,MAAA,EAAA,GACmB;AACnB,QAAM,EAAE,cAAA,EAAA,IAAiB,EAAmB;AAE5C,SACE,gBAAA,EAAC,GAAD;AAAA,IAAO,IAAI;AAAA,MAAE,YAAY;AAAA,MAAU,KAAK;AAAA,MAAG,GAAG;AAAA,MAAI,WAAW;AAAA,IAAS;AAAA,IAAtE,UAAA;AAAA,MACE,gBAAA,EAAC,GAAD,EAAA,UAAI,+BAAgC,CAAA;AAAA,MACpC,gBAAA,EAAC,GAAD,EAAA,UAAM,+IAGA,CAAA;AAAA,MACN,gBAAA,EAAC,GAAD,EAAA,UAAA,CAAM,UAAO,EAAK,IAAW,EAAA,CAAA;AAAA,MAC7B,gBAAA,EAAC,GAAD,EAAA,UAAA;AAAA,QAAM;AAAA,QACsB,EAAa;AAAA,QAAc;AAAA,QAAY,EAAa;AAAA,MAC1E,EAAA,CAAA;AAAA,IACD;AAAA;AAEX,CAAC"}
+{"version":3,"file":"PlaceholderActionBlock.es.js","names":[],"sources":["../../../src/insights-v2/actionBlocks/PlaceholderActionBlock.tsx"],"sourcesContent":["import Stack from '@mui/material/Stack'\n\nimport { H3, Text } from '@mxenabled/mxui'\nimport { observer } from 'mobx-react-lite'\n\nimport { useActionContext, useInsightsV2Store } from '../../common'\nimport type { Beat, DrilldownPayload } from '../../core'\n\nimport { createVariantBlock } from '../blocks/createVariantBlock'\nimport { type ActionBlockProps } from '../mappings/blocks'\n\n// This block doubles as the reference example for the two building blocks a real\n// action block uses:\n//   1. useActionContext<T>() — read the drawer's opaque, block-specific context.\n//   2. createVariantBlock    — dispatch to a per-variant component with a fallback.\n// Register a block with variants exactly like `PlaceholderVariants` below, then\n// wire it into src/insights-v2/mappings/blocks.ts.\n\ninterface PlaceholderVariantProps {\n  beat: Beat\n}\n\n/** Default variant — also the fallback for unknown/absent variants.\n *  Wrapped in `observer` because it reads the drawer's observable context via\n *  useActionContext; without it a memoized ancestor would stop it re-rendering.\n *  This is the copy-paste template for real blocks, so it must model the rule. */\nconst DefaultPlaceholder = observer(({ beat }: PlaceholderVariantProps) => {\n  // Chart drilldowns put { chartBarIndex, tabIndex } on the drawer context; a\n  // CTA open carries none, so default to 0.\n  const { chartBarIndex = 0, tabIndex = 0 } = useActionContext<DrilldownPayload>() ?? {}\n\n  return (\n    <Stack sx={{ alignItems: 'center', gap: 8, p: 24, textAlign: 'center' }}>\n      <H3>Action Block Layer Drilldown</H3>\n      <Text>\n        This is a placeholder action block. Replace it with your own implementation by registering\n        your block in src/insights-v2/mappings/blocks.ts.\n      </Text>\n      <Text>Beat: {beat.guid}</Text>\n      <Text>\n        Drilldown: chartBarIndex {chartBarIndex}, tabIndex {tabIndex}\n      </Text>\n    </Stack>\n  )\n})\n\n/** A second sample variant, to show registry dispatch with more than one entry. */\nconst CompactPlaceholder = ({ beat }: PlaceholderVariantProps) => (\n  <Stack sx={{ alignItems: 'center', gap: 8, p: 24, textAlign: 'center' }}>\n    <H3>Action Block Layer Drilldown (compact)</H3>\n    <Text>Beat: {beat.guid}</Text>\n  </Stack>\n)\n\n// Register one component per backend `variant`; unknown/absent variants fall\n// back to DefaultPlaceholder.\nconst PlaceholderVariants = createVariantBlock<PlaceholderVariantProps>({\n  variants: {\n    default: DefaultPlaceholder,\n    compact: CompactPlaceholder,\n  },\n  fallback: DefaultPlaceholder,\n  name: 'Placeholder',\n})\n\nexport const PlaceholderActionBlock = observer(function PlaceholderActionBlock({\n  beat,\n}: ActionBlockProps) {\n  const { actionDrawer } = useInsightsV2Store()\n  const cta =\n    actionDrawer.trigger === 'secondaryCta'\n      ? beat.insights_payload?.secondary_cta\n      : beat.insights_payload?.primary_cta\n\n  return <PlaceholderVariants beat={beat} variant={cta?.variant} />\n})\n"],"mappings":";;;;;;AA0BA,IAAM,IAAqB,EAAA,CAAU,EAAE,MAAA,EAAA,MAAoC;AAGzE,QAAM,EAAE,eAAA,IAAgB,GAAG,UAAA,IAAW,EAAA,IAAM,EAAmC,KAAK,CAAC;AAErF,SACE,gBAAA,EAAC,GAAD;AAAA,IAAO,IAAI;AAAA,MAAE,YAAY;AAAA,MAAU,KAAK;AAAA,MAAG,GAAG;AAAA,MAAI,WAAW;AAAA,IAAS;AAAA,IAAtE,UAAA;AAAA,MACE,gBAAA,EAAC,GAAD,EAAA,UAAI,+BAAgC,CAAA;AAAA,MACpC,gBAAA,EAAC,GAAD,EAAA,UAAM,+IAGA,CAAA;AAAA,MACN,gBAAA,EAAC,GAAD,EAAA,UAAA,CAAM,UAAO,EAAK,IAAW,EAAA,CAAA;AAAA,MAC7B,gBAAA,EAAC,GAAD,EAAA,UAAA;AAAA,QAAM;AAAA,QACsB;AAAA,QAAc;AAAA,QAAY;AAAA,MAChD,EAAA,CAAA;AAAA,IACD;AAAA;AAEX,CAAC,GAGK,IAAA,CAAsB,EAAE,MAAA,EAAA,MAC5B,gBAAA,EAAC,GAAD;AAAA,EAAO,IAAI;AAAA,IAAE,YAAY;AAAA,IAAU,KAAK;AAAA,IAAG,GAAG;AAAA,IAAI,WAAW;AAAA,EAAS;AAAA,EAAtE,UAAA,CACE,gBAAA,EAAC,GAAD,EAAA,UAAI,yCAA0C,CAAA,GAC9C,gBAAA,EAAC,GAAD,EAAA,UAAA,CAAM,UAAO,EAAK,IAAW,EAAA,CAAA,CACxB;IAKH,IAAsB,EAA4C;AAAA,EACtE,UAAU;AAAA,IACR,SAAS;AAAA,IACT,SAAS;AAAA,EACX;AAAA,EACA,UAAU;AAAA,EACV,MAAM;AACR,CAAC,GAEY,IAAyB,EAAS,SAAgC,EAC7E,MAAA,EAAA,GACmB;AACnB,QAAM,EAAE,cAAA,EAAA,IAAiB,EAAmB,GACtC,IACJ,EAAa,YAAY,iBACrB,EAAK,kBAAkB,gBACvB,EAAK,kBAAkB;AAE7B,SAAO,gBAAA,EAAC,GAAD;AAAA,IAA2B,MAAA;AAAA,IAAM,SAAS,GAAK;AAAA,EAAU,CAAA;AAClE,CAAC"}

package/dist/insights-v2/blocks/ChartBlocks/BarchartBlock/BarchartBlock.es.js

@@ -1,25 +1,29 @@
-import { useInsightsV2Store as g } from "../../../../common/context/hooks.es.js";
-import { formatCurrency as C } from "../../../../core/utils/NumberFormatting.es.js";
-import { BarChartV2 as B } from "../../../components/chartblocks/BarchartV2.es.js";
-import { EmptyBarChart as _ } from "../../../components/chartblocks/EmptyBarChart.es.js";
-import { barChartVariant as v, buildChartData as x, buildDataSeries as D } from "./utils.es.js";
-import y from "react";
+import { useInsightsV2Store as b } from "../../../../common/context/hooks.es.js";
+import { formatCurrency as B } from "../../../../core/utils/NumberFormatting.es.js";
+import { BarChartV2 as C } from "../../../components/chartblocks/BarchartV2.es.js";
+import { EmptyBarChart as x } from "../../../components/chartblocks/EmptyBarChart.es.js";
+import { barChartVariant as _, buildChartData as v, buildDataSeries as A } from "./utils.es.js";
+import D from "react";
 import { jsx as o } from "react/jsx-runtime";
-import { useTheme as A } from "@mui/material/styles";
+import { useTheme as y } from "@mui/material/styles";
 var E = ({ payload: n, beatGuid: m = "" }) => {
-  const s = A(), { openChartDrilldown: c } = g(), { instance_slot: i, instance_slot_data: r } = n, { data_series: l, ariaLabel: h = "", average_amount: e = 0, legends: d = [] } = r, t = x(D(l), h), [p] = y.useState(t.length - 1), { color: u } = v(i, r, s), [f, b] = d.map((a) => a.label);
-  return t.length ? /* @__PURE__ */ o(B, {
+  const s = y(), { openActionDrawer: c } = b(), { instance_slot: i, instance_slot_data: a } = n, { data_series: l, ariaLabel: h = "", average_amount: e = 0, legends: d = [] } = a, t = v(A(l), h), [p] = D.useState(t.length - 1), { color: u } = _(i, a, s), [f, g] = d.map((r) => r.label);
+  return t.length ? /* @__PURE__ */ o(C, {
     amounts: {
       average: e,
-      formattedAverage: C(e, "0,0")
+      formattedAverage: B(e, "0,0")
     },
     color: u,
     data: t,
     monthlyAmountLabel: f,
-    onBarClick: (a) => c(m, { chartBarIndex: a }),
+    onBarClick: (r) => c({
+      guid: m,
+      trigger: "chartBar",
+      context: { chartBarIndex: r }
+    }),
     selectedTabIndex: p,
-    trendAmountLabel: b
-  }) : /* @__PURE__ */ o(_, {});
+    trendAmountLabel: g
+  }) : /* @__PURE__ */ o(x, {});
 };
 export {
   E as BarchartBlock

package/dist/insights-v2/blocks/ChartBlocks/BarchartBlock/BarchartBlock.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"BarchartBlock.es.js","names":[],"sources":["../../../../../src/insights-v2/blocks/ChartBlocks/BarchartBlock/BarchartBlock.tsx"],"sourcesContent":["import React from 'react'\nimport { useTheme } from '@mui/material/styles'\n\nimport { formatCurrency, useInsightsV2Store } from '../../../../common'\nimport type { DataSeries } from '../../../../core'\nimport type { BarChartBlockData } from '../../../../core/types/InsightsInstanceSlotData'\n\nimport { BarChartV2 } from '../../../components/chartblocks/BarchartV2'\nimport { EmptyBarChart } from '../../../components/chartblocks/EmptyBarChart'\n\nimport type { BlockProps } from '../../types'\n\nimport { barChartVariant, buildChartData, buildDataSeries } from './utils'\n\nexport const BarchartBlock = ({ payload, beatGuid = '' }: BlockProps<BarChartBlockData>) => {\n  const theme = useTheme()\n  const { openChartDrilldown } = useInsightsV2Store()\n  const { instance_slot, instance_slot_data } = payload\n  const { data_series, ariaLabel = '', average_amount = 0, legends = [] } = instance_slot_data\n  const chartData = buildChartData(buildDataSeries(data_series as DataSeries), ariaLabel)\n  const [selectedTabIndex] = React.useState(chartData.length - 1)\n  const { color } = barChartVariant(instance_slot, instance_slot_data, theme)\n\n  const [monthlyAmountLabel, trendAmountLabel] = legends.map((legend) => legend.label)\n\n  return chartData.length ? (\n    <BarChartV2\n      amounts={{\n        average: average_amount,\n        formattedAverage: formatCurrency(average_amount, '0,0'),\n      }}\n      color={color}\n      data={chartData}\n      monthlyAmountLabel={monthlyAmountLabel}\n      onBarClick={(index) => openChartDrilldown(beatGuid, { chartBarIndex: index })}\n      selectedTabIndex={selectedTabIndex}\n      trendAmountLabel={trendAmountLabel}\n    />\n  ) : (\n    <EmptyBarChart />\n  )\n}\n"],"mappings":";;;;;;;;AAcA,IAAa,IAAA,CAAiB,EAAE,SAAA,GAAS,UAAA,IAAW,GAAA,MAAwC;AAC1F,QAAM,IAAQ,EAAS,GACjB,EAAE,oBAAA,EAAA,IAAuB,EAAmB,GAC5C,EAAE,eAAA,GAAe,oBAAA,EAAA,IAAuB,GACxC,EAAE,aAAA,GAAa,WAAA,IAAY,IAAI,gBAAA,IAAiB,GAAG,SAAA,IAAU,CAAC,EAAA,IAAM,GACpE,IAAY,EAAe,EAAgB,CAAyB,GAAG,CAAS,GAChF,CAAC,CAAA,IAAoB,EAAM,SAAS,EAAU,SAAS,CAAC,GACxD,EAAE,OAAA,EAAA,IAAU,EAAgB,GAAe,GAAoB,CAAK,GAEpE,CAAC,GAAoB,CAAA,IAAoB,EAAQ,IAAA,CAAK,MAAW,EAAO,KAAK;AAEnF,SAAO,EAAU,SACf,gBAAA,EAAC,GAAD;AAAA,IACE,SAAS;AAAA,MACP,SAAS;AAAA,MACT,kBAAkB,EAAe,GAAgB,KAAK;AAAA,IACxD;AAAA,IACO,OAAA;AAAA,IACP,MAAM;AAAA,IACc,oBAAA;AAAA,IACpB,YAAA,CAAa,MAAU,EAAmB,GAAU,EAAE,eAAe,EAAM,CAAC;AAAA,IAC1D,kBAAA;AAAA,IACA,kBAAA;AAAA,EACnB,CAAA,IAED,gBAAA,EAAC,GAAD,CAAgB,CAAA;AAEpB"}
+{"version":3,"file":"BarchartBlock.es.js","names":[],"sources":["../../../../../src/insights-v2/blocks/ChartBlocks/BarchartBlock/BarchartBlock.tsx"],"sourcesContent":["import React from 'react'\nimport { useTheme } from '@mui/material/styles'\n\nimport { formatCurrency, useInsightsV2Store } from '../../../../common'\nimport type { DataSeries, DrilldownPayload } from '../../../../core'\nimport type { BarChartBlockData } from '../../../../core/types/InsightsInstanceSlotData'\n\nimport { BarChartV2 } from '../../../components/chartblocks/BarchartV2'\nimport { EmptyBarChart } from '../../../components/chartblocks/EmptyBarChart'\n\nimport type { BlockProps } from '../../types'\n\nimport { barChartVariant, buildChartData, buildDataSeries } from './utils'\n\nexport const BarchartBlock = ({ payload, beatGuid = '' }: BlockProps<BarChartBlockData>) => {\n  const theme = useTheme()\n  const { openActionDrawer } = useInsightsV2Store()\n  const { instance_slot, instance_slot_data } = payload\n  const { data_series, ariaLabel = '', average_amount = 0, legends = [] } = instance_slot_data\n  const chartData = buildChartData(buildDataSeries(data_series as DataSeries), ariaLabel)\n  const [selectedTabIndex] = React.useState(chartData.length - 1)\n  const { color } = barChartVariant(instance_slot, instance_slot_data, theme)\n\n  const [monthlyAmountLabel, trendAmountLabel] = legends.map((legend) => legend.label)\n\n  return chartData.length ? (\n    <BarChartV2\n      amounts={{\n        average: average_amount,\n        formattedAverage: formatCurrency(average_amount, '0,0'),\n      }}\n      color={color}\n      data={chartData}\n      monthlyAmountLabel={monthlyAmountLabel}\n      onBarClick={(index) =>\n        openActionDrawer({\n          guid: beatGuid,\n          trigger: 'chartBar',\n          context: { chartBarIndex: index } satisfies DrilldownPayload,\n        })\n      }\n      selectedTabIndex={selectedTabIndex}\n      trendAmountLabel={trendAmountLabel}\n    />\n  ) : (\n    <EmptyBarChart />\n  )\n}\n"],"mappings":";;;;;;;;AAcA,IAAa,IAAA,CAAiB,EAAE,SAAA,GAAS,UAAA,IAAW,GAAA,MAAwC;AAC1F,QAAM,IAAQ,EAAS,GACjB,EAAE,kBAAA,EAAA,IAAqB,EAAmB,GAC1C,EAAE,eAAA,GAAe,oBAAA,EAAA,IAAuB,GACxC,EAAE,aAAA,GAAa,WAAA,IAAY,IAAI,gBAAA,IAAiB,GAAG,SAAA,IAAU,CAAC,EAAA,IAAM,GACpE,IAAY,EAAe,EAAgB,CAAyB,GAAG,CAAS,GAChF,CAAC,CAAA,IAAoB,EAAM,SAAS,EAAU,SAAS,CAAC,GACxD,EAAE,OAAA,EAAA,IAAU,EAAgB,GAAe,GAAoB,CAAK,GAEpE,CAAC,GAAoB,CAAA,IAAoB,EAAQ,IAAA,CAAK,MAAW,EAAO,KAAK;AAEnF,SAAO,EAAU,SACf,gBAAA,EAAC,GAAD;AAAA,IACE,SAAS;AAAA,MACP,SAAS;AAAA,MACT,kBAAkB,EAAe,GAAgB,KAAK;AAAA,IACxD;AAAA,IACO,OAAA;AAAA,IACP,MAAM;AAAA,IACc,oBAAA;AAAA,IACpB,YAAA,CAAa,MACX,EAAiB;AAAA,MACf,MAAM;AAAA,MACN,SAAS;AAAA,MACT,SAAS,EAAE,eAAe,EAAM;AAAA,IAClC,CAAC;AAAA,IAEe,kBAAA;AAAA,IACA,kBAAA;AAAA,EACnB,CAAA,IAED,gBAAA,EAAC,GAAD,CAAgB,CAAA;AAEpB"}

package/dist/insights-v2/blocks/ChartBlocks/BarchartBlock/utils.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"utils.es.js","names":[],"sources":["../../../../../src/insights-v2/blocks/ChartBlocks/BarchartBlock/utils.ts"],"sourcesContent":["import { type Theme } from '@mui/material/styles'\n\nimport { parseISO } from 'date-fns/parseISO'\n\nimport { getCategoryColor } from '../../../../core/utils/CategoryUtil'\nimport { buildDynamicCopy } from '../../../../core/utils/Localization'\nimport { formatCurrency } from '../../../../core/utils/NumberFormatting'\nimport { DATE_FORMATS_INTL, formatDate } from '../../../../core/constants'\nimport type { DataSeries, InstanceSlot } from '../../../../core'\nimport type { InsightsInstanceSlotData } from '../../../../core/types/InsightsInstanceSlotData'\nimport { getLayoutConfig } from './layout'\n\nexport const BAR_CHART_VARIANTS = {\n  CATEGORY_COLOR: 'CategoryColor',\n  SAVINGS_ACCOUNT_BALANCES_SUMMARY: 'SavingsAccountBalancesSummary',\n  MONTHLY_SPEND_COMPARISON: 'MonthlySpendComparison',\n}\n\nexport const buildDataSeries = (data: DataSeries | undefined) => {\n  if (!data) {\n    return []\n  }\n\n  if (data.data) {\n    return data.data.map((d) => {\n      const item: any = {}\n\n      data.names?.map((name, index) => {\n        item[name] = d[index]\n      })\n      return item\n    })\n  } else {\n    return []\n  }\n}\n\nexport const buildChartData = (dataSeries: any[], ariaLabel: string) => {\n  // Bars render oldest→newest (Jan→Dec, left→right, per Figma). The single-bar backend sends\n  // data_series newest-first, so normalize date-ascending here — the single source of truth for both\n  // the card (BarchartBlock) and the drill-down. This keeps their bar/tab indices aligned, which the\n  // card relies on when it forwards a clicked bar index straight to the drill-down (openChartDrilldown).\n  const data = [...dataSeries]\n    .sort((a, b) => new Date(a.date).getTime() - new Date(b.date).getTime())\n    .map((total) => {\n      const label = formatDate(parseISO(total.date), DATE_FORMATS_INTL.MONTH_SHORT)\n\n      return {\n        ariaLabel: buildDynamicCopy(\n          ariaLabel,\n          label,\n          formatCurrency(total.amount, '0.00'),\n        ) as string,\n        label,\n        value: total.amount,\n        formattedAmount: formatCurrency(total.amount, '0,0'),\n      }\n    })\n\n  return data\n}\n\nexport const barChartVariant = (\n  instanceSlot: InstanceSlot,\n  instanceSlotData: InsightsInstanceSlotData,\n  theme: Theme,\n) => {\n  const { variant } = instanceSlot\n  const barChartLayout = getLayoutConfig(theme)\n  if (variant === BAR_CHART_VARIANTS.CATEGORY_COLOR && instanceSlotData.category_guid) {\n    const categoryColor = getCategoryColor(instanceSlotData.category_guid, theme)\n    return {\n      color: categoryColor,\n    }\n  }\n  return {\n    color:\n      barChartLayout[variant as keyof typeof barChartLayout]?.color ?? theme.palette.primary.main,\n  }\n}\n"],"mappings":";;;;;;AAYA,IAAa,IAAqB;AAAA,EAChC,gBAAgB;AAAA,EAChB,kCAAkC;AAAA,EAClC,0BAA0B;AAC5B,GAEa,IAAA,CAAmB,MACzB,IAID,EAAK,OACA,EAAK,KAAK,IAAA,CAAK,MAAM;AAC1B,QAAM,IAAY,CAAC;AAEnB,SAAA,EAAK,OAAO,IAAA,CAAK,GAAM,MAAU;AAC/B,IAAA,EAAK,CAAA,IAAQ,EAAE,CAAA;AAAA,EACjB,CAAC,GACM;AACT,CAAC,IAEM,CAAC,IAbD,CAAC,GAiBC,IAAA,CAAkB,GAAmB,MAKnC,CAAC,GAAG,CAAU,EACxB,KAAA,CAAM,GAAG,MAAM,IAAI,KAAK,EAAE,IAAI,EAAE,QAAQ,IAAI,IAAI,KAAK,EAAE,IAAI,EAAE,QAAQ,CAAC,EACtE,IAAA,CAAK,MAAU;AACd,QAAM,IAAQ,EAAW,EAAS,EAAM,IAAI,GAAG,EAAkB,WAAW;AAE5E,SAAO;AAAA,IACL,WAAW,EACT,GACA,GACA,EAAe,EAAM,QAAQ,MAAM,CACrC;AAAA,IACA,OAAA;AAAA,IACA,OAAO,EAAM;AAAA,IACb,iBAAiB,EAAe,EAAM,QAAQ,KAAK;AAAA,EACrD;AACF,CAEK,GAGI,IAAA,CACX,GACA,GACA,MACG;AACH,QAAM,EAAE,SAAA,EAAA,IAAY,GACd,IAAiB,EAAgB,CAAK;AAC5C,SAAI,MAAY,EAAmB,kBAAkB,EAAiB,gBAE7D,EACL,OAFoB,EAAiB,EAAiB,eAAe,CAE9D,EACT,IAEK,EACL,OACE,EAAe,CAAA,GAAyC,SAAS,EAAM,QAAQ,QAAQ,KAC3F;AACF"}
+{"version":3,"file":"utils.es.js","names":[],"sources":["../../../../../src/insights-v2/blocks/ChartBlocks/BarchartBlock/utils.ts"],"sourcesContent":["import { type Theme } from '@mui/material/styles'\n\nimport { parseISO } from 'date-fns/parseISO'\n\nimport { getCategoryColor } from '../../../../core/utils/CategoryUtil'\nimport { buildDynamicCopy } from '../../../../core/utils/Localization'\nimport { formatCurrency } from '../../../../core/utils/NumberFormatting'\nimport { DATE_FORMATS_INTL, formatDate } from '../../../../core/constants'\nimport type { DataSeries, InstanceSlot } from '../../../../core'\nimport type { InsightsInstanceSlotData } from '../../../../core/types/InsightsInstanceSlotData'\nimport { getLayoutConfig } from './layout'\n\nexport const BAR_CHART_VARIANTS = {\n  CATEGORY_COLOR: 'CategoryColor',\n  SAVINGS_ACCOUNT_BALANCES_SUMMARY: 'SavingsAccountBalancesSummary',\n  MONTHLY_SPEND_COMPARISON: 'MonthlySpendComparison',\n}\n\nexport const buildDataSeries = (data: DataSeries | undefined) => {\n  if (!data) {\n    return []\n  }\n\n  if (data.data) {\n    return data.data.map((d) => {\n      const item: any = {}\n\n      data.names?.map((name, index) => {\n        item[name] = d[index]\n      })\n      return item\n    })\n  } else {\n    return []\n  }\n}\n\nexport const buildChartData = (dataSeries: any[], ariaLabel: string) => {\n  // Bars render oldest→newest (Jan→Dec, left→right, per Figma). The single-bar backend sends\n  // data_series newest-first, so normalize date-ascending here — the single source of truth for both\n  // the card (BarchartBlock) and the drill-down. This keeps their bar/tab indices aligned, which the\n  // card relies on when it forwards a clicked bar index straight to the drill-down (openActionDrawer).\n  const data = [...dataSeries]\n    .sort((a, b) => new Date(a.date).getTime() - new Date(b.date).getTime())\n    .map((total) => {\n      const label = formatDate(parseISO(total.date), DATE_FORMATS_INTL.MONTH_SHORT)\n\n      return {\n        ariaLabel: buildDynamicCopy(\n          ariaLabel,\n          label,\n          formatCurrency(total.amount, '0.00'),\n        ) as string,\n        label,\n        value: total.amount,\n        formattedAmount: formatCurrency(total.amount, '0,0'),\n      }\n    })\n\n  return data\n}\n\nexport const barChartVariant = (\n  instanceSlot: InstanceSlot,\n  instanceSlotData: InsightsInstanceSlotData,\n  theme: Theme,\n) => {\n  const { variant } = instanceSlot\n  const barChartLayout = getLayoutConfig(theme)\n  if (variant === BAR_CHART_VARIANTS.CATEGORY_COLOR && instanceSlotData.category_guid) {\n    const categoryColor = getCategoryColor(instanceSlotData.category_guid, theme)\n    return {\n      color: categoryColor,\n    }\n  }\n  return {\n    color:\n      barChartLayout[variant as keyof typeof barChartLayout]?.color ?? theme.palette.primary.main,\n  }\n}\n"],"mappings":";;;;;;AAYA,IAAa,IAAqB;AAAA,EAChC,gBAAgB;AAAA,EAChB,kCAAkC;AAAA,EAClC,0BAA0B;AAC5B,GAEa,IAAA,CAAmB,MACzB,IAID,EAAK,OACA,EAAK,KAAK,IAAA,CAAK,MAAM;AAC1B,QAAM,IAAY,CAAC;AAEnB,SAAA,EAAK,OAAO,IAAA,CAAK,GAAM,MAAU;AAC/B,IAAA,EAAK,CAAA,IAAQ,EAAE,CAAA;AAAA,EACjB,CAAC,GACM;AACT,CAAC,IAEM,CAAC,IAbD,CAAC,GAiBC,IAAA,CAAkB,GAAmB,MAKnC,CAAC,GAAG,CAAU,EACxB,KAAA,CAAM,GAAG,MAAM,IAAI,KAAK,EAAE,IAAI,EAAE,QAAQ,IAAI,IAAI,KAAK,EAAE,IAAI,EAAE,QAAQ,CAAC,EACtE,IAAA,CAAK,MAAU;AACd,QAAM,IAAQ,EAAW,EAAS,EAAM,IAAI,GAAG,EAAkB,WAAW;AAE5E,SAAO;AAAA,IACL,WAAW,EACT,GACA,GACA,EAAe,EAAM,QAAQ,MAAM,CACrC;AAAA,IACA,OAAA;AAAA,IACA,OAAO,EAAM;AAAA,IACb,iBAAiB,EAAe,EAAM,QAAQ,KAAK;AAAA,EACrD;AACF,CAEK,GAGI,IAAA,CACX,GACA,GACA,MACG;AACH,QAAM,EAAE,SAAA,EAAA,IAAY,GACd,IAAiB,EAAgB,CAAK;AAC5C,SAAI,MAAY,EAAmB,kBAAkB,EAAiB,gBAE7D,EACL,OAFoB,EAAiB,EAAiB,eAAe,CAE9D,EACT,IAEK,EACL,OACE,EAAe,CAAA,GAAyC,SAAS,EAAM,QAAQ,QAAQ,KAC3F;AACF"}

package/dist/insights-v2/blocks/ChartBlocks/DonutChartBlock/DonutChart.es.js

@@ -3,12 +3,12 @@ import { Text as l } from "@mxenabled/mxui";
 import { jsx as e, jsxs as i } from "react/jsx-runtime";
 import c from "@mui/material/Box";
 import { PieChart as m } from "@mui/x-charts/PieChart";
-var w = ({ data: n, centerLabel: a, centerValue: h }) => {
-  const d = n.some((t) => t.label && t.labelValue), r = !d, u = n.map((t, s) => ({
+var w = ({ data: a, centerLabel: n, centerValue: h }) => {
+  const d = a.some((t) => t.label && t.labelValue), r = !d, u = a.map((t, s) => ({
     id: s,
     color: t.color,
     value: t.value
-  })), x = r ? 30 : 53, p = r ? 35 : 63, f = 2, b = () => r ? "body1" : a ? "h3" : "h2";
+  })), x = r ? 30 : 53, p = r ? 35 : 63, f = 2, b = () => r ? "body1" : n ? "h3" : "h2";
   return /* @__PURE__ */ i(o, {
     sx: {
       alignItems: "center",
@@ -42,10 +42,10 @@ var w = ({ data: n, centerLabel: a, centerValue: h }) => {
           sx: { ...r && { fontWeight: 600 } },
           variant: b(),
           children: h
-        }), a && /* @__PURE__ */ e(l, {
+        }), n && /* @__PURE__ */ e(l, {
           sx: { color: "text.secondary" },
           variant: r ? "caption" : "body2",
-          children: a
+          children: n
         })]
       })]
     }), d && /* @__PURE__ */ e(o, {
@@ -53,7 +53,7 @@ var w = ({ data: n, centerLabel: a, centerValue: h }) => {
         gap: 24,
         pl: 24
       },
-      children: n.map((t, s) => t.label && t.labelValue && /* @__PURE__ */ i(o, { children: [/* @__PURE__ */ i(o, {
+      children: a.map((t, s) => t.label && t.labelValue && /* @__PURE__ */ i(o, { children: [/* @__PURE__ */ i(o, {
         sx: {
           gap: 8,
           flexDirection: "row",
@@ -76,7 +76,7 @@ var w = ({ data: n, centerLabel: a, centerValue: h }) => {
         },
         variant: "subtitle2",
         children: t.labelValue
-      })] }, s))
+      })] }, t.label ?? s))
     })]
   });
 };

package/dist/insights-v2/blocks/ChartBlocks/DonutChartBlock/DonutChart.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"DonutChart.es.js","names":[],"sources":["../../../../../src/insights-v2/blocks/ChartBlocks/DonutChartBlock/DonutChart.tsx"],"sourcesContent":["import Box from '@mui/material/Box'\nimport Stack from '@mui/material/Stack'\nimport { Text } from '@mxenabled/mxui'\nimport { PieChart } from '@mui/x-charts/PieChart'\ninterface DonutSegment {\n  color: string\n  label?: string\n  labelValue?: React.ReactNode\n  value: number\n}\n\ninterface DonutChartV2Props {\n  data: DonutSegment[]\n  centerLabel?: string\n  centerValue: string\n}\n\nconst DonutChartV2 = ({ data, centerLabel, centerValue }: DonutChartV2Props) => {\n  const hasLegend = data.some((segment) => segment.label && segment.labelValue)\n  const isEmbedded = !hasLegend\n\n  const chartData = data.map((item, index) => ({\n    id: index,\n    color: item.color,\n    value: item.value,\n  }))\n  const innerRadius = isEmbedded ? 30 : 53\n  const outerRadius = isEmbedded ? 35 : 63\n  const cornerRadius = 2\n\n  const getCenterValueVariant = () => {\n    if (isEmbedded) return 'body1'\n    if (centerLabel) return 'h3'\n    return 'h2'\n  }\n\n  return (\n    <Stack sx={{ alignItems: 'center', flexDirection: 'row', px: 16, py: 4 }}>\n      <Box\n        sx={{\n          alignItems: 'center',\n          display: 'flex',\n          justifyContent: 'center',\n          position: 'relative',\n        }}\n      >\n        <PieChart\n          height={isEmbedded ? 72 : 125}\n          series={[\n            {\n              cornerRadius,\n              data: chartData,\n              innerRadius,\n              outerRadius,\n            },\n          ]}\n          slots={{ tooltip: () => null }}\n          width={isEmbedded ? 72 : 125}\n        />\n\n        <Box sx={{ position: 'absolute', textAlign: 'center' }}>\n          <Text sx={{ ...(isEmbedded && { fontWeight: 600 }) }} variant={getCenterValueVariant()}>\n            {centerValue}\n          </Text>\n          {centerLabel && (\n            <Text sx={{ color: 'text.secondary' }} variant={isEmbedded ? 'caption' : 'body2'}>\n              {centerLabel}\n            </Text>\n          )}\n        </Box>\n      </Box>\n\n      {hasLegend && (\n        <Stack sx={{ gap: 24, pl: 24 }}>\n          {data.map(\n            (segment, index) =>\n              segment.label &&\n              segment.labelValue && (\n                <Stack key={index}>\n                  <Stack sx={{ gap: 8, flexDirection: 'row', alignItems: 'center' }}>\n                    <Box\n                      sx={{\n                        backgroundColor: segment.color,\n                        borderRadius: '2px',\n                        height: 12,\n                        width: 12,\n                      }}\n                    />\n                    <Text sx={{ fontWeight: 400 }} variant=\"subtitle2\">\n                      {segment.label}\n                    </Text>\n                  </Stack>\n                  <Text sx={{ fontWeight: 400, pl: 20 }} variant=\"subtitle2\">\n                    {segment.labelValue}\n                  </Text>\n                </Stack>\n              ),\n          )}\n        </Stack>\n      )}\n    </Stack>\n  )\n}\n\nexport default DonutChartV2\n"],"mappings":";;;;;AAiBA,IAAM,IAAA,CAAgB,EAAE,MAAA,GAAM,aAAA,GAAa,aAAA,EAAA,MAAqC;AAC9E,QAAM,IAAY,EAAK,KAAA,CAAM,MAAY,EAAQ,SAAS,EAAQ,UAAU,GACtE,IAAa,CAAC,GAEd,IAAY,EAAK,IAAA,CAAK,GAAM,OAAW;AAAA,IAC3C,IAAI;AAAA,IACJ,OAAO,EAAK;AAAA,IACZ,OAAO,EAAK;AAAA,EACd,EAAE,GACI,IAAc,IAAa,KAAK,IAChC,IAAc,IAAa,KAAK,IAChC,IAAe,GAEf,IAAA,MACA,IAAmB,UACnB,IAAoB,OACjB;AAGT,SACE,gBAAA,EAAC,GAAD;AAAA,IAAO,IAAI;AAAA,MAAE,YAAY;AAAA,MAAU,eAAe;AAAA,MAAO,IAAI;AAAA,MAAI,IAAI;AAAA,IAAE;AAAA,IAAvE,UAAA,CACE,gBAAA,EAAC,GAAD;AAAA,MACE,IAAI;AAAA,QACF,YAAY;AAAA,QACZ,SAAS;AAAA,QACT,gBAAgB;AAAA,QAChB,UAAU;AAAA,MACZ;AAAA,MANF,UAAA,CAQE,gBAAA,EAAC,GAAD;AAAA,QACE,QAAQ,IAAa,KAAK;AAAA,QAC1B,QAAQ,CACN;AAAA,UACE,cAAA;AAAA,UACA,MAAM;AAAA,UACN,aAAA;AAAA,UACA,aAAA;AAAA,QACF,CACF;AAAA,QACA,OAAO,EAAE,SAAA,MAAe,KAAK;AAAA,QAC7B,OAAO,IAAa,KAAK;AAAA,MAC1B,CAAA,GAED,gBAAA,EAAC,GAAD;AAAA,QAAK,IAAI;AAAA,UAAE,UAAU;AAAA,UAAY,WAAW;AAAA,QAAS;AAAA,QAArD,UAAA,CACE,gBAAA,EAAC,GAAD;AAAA,UAAM,IAAI,EAAE,GAAI,KAAc,EAAE,YAAY,IAAI,EAAG;AAAA,UAAG,SAAS,EAAsB;AAAA,UAClF,UAAA;AAAA,QACG,CAAA,GACL,KACC,gBAAA,EAAC,GAAD;AAAA,UAAM,IAAI,EAAE,OAAO,iBAAiB;AAAA,UAAG,SAAS,IAAa,YAAY;AAAA,UACtE,UAAA;AAAA,QACG,CAAA,CAEL;AAAA,MACF,CAAA,CAAA;AAAA,IAEJ,CAAA,GAAA,KACC,gBAAA,EAAC,GAAD;AAAA,MAAO,IAAI;AAAA,QAAE,KAAK;AAAA,QAAI,IAAI;AAAA,MAAG;AAAA,MAC1B,UAAA,EAAK,IAAA,CACH,GAAS,MACR,EAAQ,SACR,EAAQ,cACN,gBAAA,EAAC,GAAD,EAAA,UAAA,CACE,gBAAA,EAAC,GAAD;AAAA,QAAO,IAAI;AAAA,UAAE,KAAK;AAAA,UAAG,eAAe;AAAA,UAAO,YAAY;AAAA,QAAS;AAAA,QAAhE,UAAA,CACE,gBAAA,EAAC,GAAD,EACE,IAAI;AAAA,UACF,iBAAiB,EAAQ;AAAA,UACzB,cAAc;AAAA,UACd,QAAQ;AAAA,UACR,OAAO;AAAA,QACT,EACD,CAAA,GACD,gBAAA,EAAC,GAAD;AAAA,UAAM,IAAI,EAAE,YAAY,IAAI;AAAA,UAAG,SAAQ;AAAA,UACpC,UAAA,EAAQ;AAAA,QACL,CAAA,CACD;AAAA,MACP,CAAA,GAAA,gBAAA,EAAC,GAAD;AAAA,QAAM,IAAI;AAAA,UAAE,YAAY;AAAA,UAAK,IAAI;AAAA,QAAG;AAAA,QAAG,SAAQ;AAAA,QAC5C,UAAA,EAAQ;AAAA,MACL,CAAA,CACD,EAAA,GAjBK,CAiBL,CAEb;AAAA,IACK,CAAA,CAEJ;AAAA;AAEX"}
+{"version":3,"file":"DonutChart.es.js","names":[],"sources":["../../../../../src/insights-v2/blocks/ChartBlocks/DonutChartBlock/DonutChart.tsx"],"sourcesContent":["import Box from '@mui/material/Box'\nimport Stack from '@mui/material/Stack'\nimport { Text } from '@mxenabled/mxui'\nimport { PieChart } from '@mui/x-charts/PieChart'\ninterface DonutSegment {\n  color: string\n  label?: string\n  labelValue?: React.ReactNode\n  value: number\n}\n\ninterface DonutChartV2Props {\n  data: DonutSegment[]\n  centerLabel?: string\n  centerValue: string\n}\n\nconst DonutChartV2 = ({ data, centerLabel, centerValue }: DonutChartV2Props) => {\n  const hasLegend = data.some((segment) => segment.label && segment.labelValue)\n  const isEmbedded = !hasLegend\n\n  const chartData = data.map((item, index) => ({\n    id: index,\n    color: item.color,\n    value: item.value,\n  }))\n  const innerRadius = isEmbedded ? 30 : 53\n  const outerRadius = isEmbedded ? 35 : 63\n  const cornerRadius = 2\n\n  const getCenterValueVariant = () => {\n    if (isEmbedded) return 'body1'\n    if (centerLabel) return 'h3'\n    return 'h2'\n  }\n\n  return (\n    <Stack sx={{ alignItems: 'center', flexDirection: 'row', px: 16, py: 4 }}>\n      <Box\n        sx={{\n          alignItems: 'center',\n          display: 'flex',\n          justifyContent: 'center',\n          position: 'relative',\n        }}\n      >\n        <PieChart\n          height={isEmbedded ? 72 : 125}\n          series={[\n            {\n              cornerRadius,\n              data: chartData,\n              innerRadius,\n              outerRadius,\n            },\n          ]}\n          slots={{ tooltip: () => null }}\n          width={isEmbedded ? 72 : 125}\n        />\n\n        <Box sx={{ position: 'absolute', textAlign: 'center' }}>\n          <Text sx={{ ...(isEmbedded && { fontWeight: 600 }) }} variant={getCenterValueVariant()}>\n            {centerValue}\n          </Text>\n          {centerLabel && (\n            <Text sx={{ color: 'text.secondary' }} variant={isEmbedded ? 'caption' : 'body2'}>\n              {centerLabel}\n            </Text>\n          )}\n        </Box>\n      </Box>\n\n      {hasLegend && (\n        <Stack sx={{ gap: 24, pl: 24 }}>\n          {data.map(\n            (segment, index) =>\n              segment.label &&\n              segment.labelValue && (\n                <Stack key={segment.label ?? index}>\n                  <Stack sx={{ gap: 8, flexDirection: 'row', alignItems: 'center' }}>\n                    <Box\n                      sx={{\n                        backgroundColor: segment.color,\n                        borderRadius: '2px',\n                        height: 12,\n                        width: 12,\n                      }}\n                    />\n                    <Text sx={{ fontWeight: 400 }} variant=\"subtitle2\">\n                      {segment.label}\n                    </Text>\n                  </Stack>\n                  <Text sx={{ fontWeight: 400, pl: 20 }} variant=\"subtitle2\">\n                    {segment.labelValue}\n                  </Text>\n                </Stack>\n              ),\n          )}\n        </Stack>\n      )}\n    </Stack>\n  )\n}\n\nexport default DonutChartV2\n"],"mappings":";;;;;AAiBA,IAAM,IAAA,CAAgB,EAAE,MAAA,GAAM,aAAA,GAAa,aAAA,EAAA,MAAqC;AAC9E,QAAM,IAAY,EAAK,KAAA,CAAM,MAAY,EAAQ,SAAS,EAAQ,UAAU,GACtE,IAAa,CAAC,GAEd,IAAY,EAAK,IAAA,CAAK,GAAM,OAAW;AAAA,IAC3C,IAAI;AAAA,IACJ,OAAO,EAAK;AAAA,IACZ,OAAO,EAAK;AAAA,EACd,EAAE,GACI,IAAc,IAAa,KAAK,IAChC,IAAc,IAAa,KAAK,IAChC,IAAe,GAEf,IAAA,MACA,IAAmB,UACnB,IAAoB,OACjB;AAGT,SACE,gBAAA,EAAC,GAAD;AAAA,IAAO,IAAI;AAAA,MAAE,YAAY;AAAA,MAAU,eAAe;AAAA,MAAO,IAAI;AAAA,MAAI,IAAI;AAAA,IAAE;AAAA,IAAvE,UAAA,CACE,gBAAA,EAAC,GAAD;AAAA,MACE,IAAI;AAAA,QACF,YAAY;AAAA,QACZ,SAAS;AAAA,QACT,gBAAgB;AAAA,QAChB,UAAU;AAAA,MACZ;AAAA,MANF,UAAA,CAQE,gBAAA,EAAC,GAAD;AAAA,QACE,QAAQ,IAAa,KAAK;AAAA,QAC1B,QAAQ,CACN;AAAA,UACE,cAAA;AAAA,UACA,MAAM;AAAA,UACN,aAAA;AAAA,UACA,aAAA;AAAA,QACF,CACF;AAAA,QACA,OAAO,EAAE,SAAA,MAAe,KAAK;AAAA,QAC7B,OAAO,IAAa,KAAK;AAAA,MAC1B,CAAA,GAED,gBAAA,EAAC,GAAD;AAAA,QAAK,IAAI;AAAA,UAAE,UAAU;AAAA,UAAY,WAAW;AAAA,QAAS;AAAA,QAArD,UAAA,CACE,gBAAA,EAAC,GAAD;AAAA,UAAM,IAAI,EAAE,GAAI,KAAc,EAAE,YAAY,IAAI,EAAG;AAAA,UAAG,SAAS,EAAsB;AAAA,UAClF,UAAA;AAAA,QACG,CAAA,GACL,KACC,gBAAA,EAAC,GAAD;AAAA,UAAM,IAAI,EAAE,OAAO,iBAAiB;AAAA,UAAG,SAAS,IAAa,YAAY;AAAA,UACtE,UAAA;AAAA,QACG,CAAA,CAEL;AAAA,MACF,CAAA,CAAA;AAAA,IAEJ,CAAA,GAAA,KACC,gBAAA,EAAC,GAAD;AAAA,MAAO,IAAI;AAAA,QAAE,KAAK;AAAA,QAAI,IAAI;AAAA,MAAG;AAAA,MAC1B,UAAA,EAAK,IAAA,CACH,GAAS,MACR,EAAQ,SACR,EAAQ,cACN,gBAAA,EAAC,GAAD,EAAA,UAAA,CACE,gBAAA,EAAC,GAAD;AAAA,QAAO,IAAI;AAAA,UAAE,KAAK;AAAA,UAAG,eAAe;AAAA,UAAO,YAAY;AAAA,QAAS;AAAA,QAAhE,UAAA,CACE,gBAAA,EAAC,GAAD,EACE,IAAI;AAAA,UACF,iBAAiB,EAAQ;AAAA,UACzB,cAAc;AAAA,UACd,QAAQ;AAAA,UACR,OAAO;AAAA,QACT,EACD,CAAA,GACD,gBAAA,EAAC,GAAD;AAAA,UAAM,IAAI,EAAE,YAAY,IAAI;AAAA,UAAG,SAAQ;AAAA,UACpC,UAAA,EAAQ;AAAA,QACL,CAAA,CACD;AAAA,MACP,CAAA,GAAA,gBAAA,EAAC,GAAD;AAAA,QAAM,IAAI;AAAA,UAAE,YAAY;AAAA,UAAK,IAAI;AAAA,QAAG;AAAA,QAAG,SAAQ;AAAA,QAC5C,UAAA,EAAQ;AAAA,MACL,CAAA,CACD,EAAA,GAjBK,EAAQ,SAAS,CAiBtB,CAEb;AAAA,IACK,CAAA,CAEJ;AAAA;AAEX"}

package/dist/insights-v2/blocks/ChartBlocks/DoubleBarChartBlock/DoubleBarChartBlock.es.js

@@ -1,19 +1,23 @@
-import { useInsightsV2Store as h } from "../../../../common/context/hooks.es.js";
-import { DoubleBarChart as u } from "../../../components/chartblocks/DoubleBarChart.es.js";
-import { buildComparisonSeries as b } from "./comparisonUtils.es.js";
-import { getLayoutConfig as C } from "./layout.es.js";
+import { useInsightsV2Store as f } from "../../../../common/context/hooks.es.js";
+import { DoubleBarChart as g } from "../../../components/chartblocks/DoubleBarChart.es.js";
+import { buildComparisonSeries as h } from "./comparisonUtils.es.js";
+import { getLayoutConfig as b } from "./layout.es.js";
 import { jsx as B } from "react/jsx-runtime";
-import { useTheme as g } from "@mui/material/styles";
-var L = ({ payload: { instance_slot: o, instance_slot_data: r, widget_type: t }, beatGuid: a = "" }) => {
-  const e = g(), { openChartDrilldown: i } = h(), { variant: n } = o, { ariaLabel: s = "", data_series: m, legends: l } = r, c = b(m, s), p = C(e, n)?.color ?? [];
-  return /* @__PURE__ */ B(u, {
-    bars: c,
+import { useTheme as x } from "@mui/material/styles";
+var L = ({ payload: { instance_slot: r, instance_slot_data: o, widget_type: t }, beatGuid: e = "" }) => {
+  const a = x(), { openActionDrawer: i } = f(), { variant: n } = r, { ariaLabel: s = "", data_series: m, legends: c } = o, l = h(m, s), p = b(a, n)?.color ?? [];
+  return /* @__PURE__ */ B(g, {
+    bars: l,
     colors: p,
     isMini: t === "mini",
-    legends: l,
-    onBarClick: (d, f) => i(a, {
-      chartBarIndex: d,
-      tabIndex: f
+    legends: c,
+    onBarClick: (u, d) => i({
+      guid: e,
+      trigger: "chartBar",
+      context: {
+        chartBarIndex: u,
+        tabIndex: d
+      }
     })
   });
 };

package/dist/insights-v2/blocks/ChartBlocks/DoubleBarChartBlock/DoubleBarChartBlock.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"DoubleBarChartBlock.es.js","names":[],"sources":["../../../../../src/insights-v2/blocks/ChartBlocks/DoubleBarChartBlock/DoubleBarChartBlock.tsx"],"sourcesContent":["import { useTheme } from '@mui/material/styles'\n\nimport { useInsightsV2Store } from '../../../../common'\nimport type { DataSeries } from '../../../../core'\nimport { DoubleBarChart } from '../../../components/chartblocks/DoubleBarChart'\n\nimport type { BlockProps } from '../../types'\n\nimport { buildComparisonSeries } from './comparisonUtils'\nimport { getLayoutConfig } from './layout'\n\n/**\n * Card block for the double-bar chart. Mirrors BarchartBlock: it builds the shaped series\n * (buildComparisonSeries) and resolves the card palette (getLayoutConfig), then renders the reusable\n * DoubleBarChart and injects the card click behavior \\u2014 open the shared drawer scoped to this beat\n * (chartBarIndex = clicked column, tabIndex = clicked sub-series).\n */\nexport const DoubleBarChartBlock = ({\n  payload: { instance_slot, instance_slot_data, widget_type },\n  beatGuid = '',\n}: BlockProps) => {\n  const theme = useTheme()\n  const { openChartDrilldown } = useInsightsV2Store()\n  const { variant } = instance_slot\n  const { ariaLabel = '', data_series, legends } = instance_slot_data\n  const bars = buildComparisonSeries(data_series as DataSeries, ariaLabel)\n  // getLayoutConfig returns undefined for an unknown/unsupported variant; fall back to an empty\n  // palette so an unregistered beat can't throw on mount.\n  const colors = getLayoutConfig(theme, variant)?.color ?? []\n\n  return (\n    <DoubleBarChart\n      bars={bars}\n      colors={colors}\n      isMini={widget_type === 'mini'}\n      legends={legends}\n      onBarClick={(columnIndex, subIndex) =>\n        openChartDrilldown(beatGuid, { chartBarIndex: columnIndex, tabIndex: subIndex })\n      }\n    />\n  )\n}\n"],"mappings":";;;;;;AAiBA,IAAa,IAAA,CAAuB,EAClC,SAAS,EAAE,eAAA,GAAe,oBAAA,GAAoB,aAAA,EAAA,GAC9C,UAAA,IAAW,GAAA,MACK;AAChB,QAAM,IAAQ,EAAS,GACjB,EAAE,oBAAA,EAAA,IAAuB,EAAmB,GAC5C,EAAE,SAAA,EAAA,IAAY,GACd,EAAE,WAAA,IAAY,IAAI,aAAA,GAAa,SAAA,EAAA,IAAY,GAC3C,IAAO,EAAsB,GAA2B,CAAS,GAGjE,IAAS,EAAgB,GAAO,CAAO,GAAG,SAAS,CAAC;AAE1D,SACE,gBAAA,EAAC,GAAD;AAAA,IACQ,MAAA;AAAA,IACE,QAAA;AAAA,IACR,QAAQ,MAAgB;AAAA,IACf,SAAA;AAAA,IACT,YAAA,CAAa,GAAa,MACxB,EAAmB,GAAU;AAAA,MAAE,eAAe;AAAA,MAAa,UAAU;AAAA,IAAS,CAAC;AAAA,EAElF,CAAA;AAEL"}
+{"version":3,"file":"DoubleBarChartBlock.es.js","names":[],"sources":["../../../../../src/insights-v2/blocks/ChartBlocks/DoubleBarChartBlock/DoubleBarChartBlock.tsx"],"sourcesContent":["import { useTheme } from '@mui/material/styles'\n\nimport { useInsightsV2Store } from '../../../../common'\nimport type { DataSeries, DrilldownPayload } from '../../../../core'\nimport { DoubleBarChart } from '../../../components/chartblocks/DoubleBarChart'\n\nimport type { BlockProps } from '../../types'\n\nimport { buildComparisonSeries } from './comparisonUtils'\nimport { getLayoutConfig } from './layout'\n\n/**\n * Card block for the double-bar chart. Mirrors BarchartBlock: it builds the shaped series\n * (buildComparisonSeries) and resolves the card palette (getLayoutConfig), then renders the reusable\n * DoubleBarChart and injects the card click behavior \\u2014 open the shared drawer scoped to this beat\n * (chartBarIndex = clicked column, tabIndex = clicked sub-series).\n */\nexport const DoubleBarChartBlock = ({\n  payload: { instance_slot, instance_slot_data, widget_type },\n  beatGuid = '',\n}: BlockProps) => {\n  const theme = useTheme()\n  const { openActionDrawer } = useInsightsV2Store()\n  const { variant } = instance_slot\n  const { ariaLabel = '', data_series, legends } = instance_slot_data\n  const bars = buildComparisonSeries(data_series as DataSeries, ariaLabel)\n  // getLayoutConfig returns undefined for an unknown/unsupported variant; fall back to an empty\n  // palette so an unregistered beat can't throw on mount.\n  const colors = getLayoutConfig(theme, variant)?.color ?? []\n\n  return (\n    <DoubleBarChart\n      bars={bars}\n      colors={colors}\n      isMini={widget_type === 'mini'}\n      legends={legends}\n      onBarClick={(columnIndex, subIndex) =>\n        openActionDrawer({\n          guid: beatGuid,\n          trigger: 'chartBar',\n          context: { chartBarIndex: columnIndex, tabIndex: subIndex } satisfies DrilldownPayload,\n        })\n      }\n    />\n  )\n}\n"],"mappings":";;;;;;AAiBA,IAAa,IAAA,CAAuB,EAClC,SAAS,EAAE,eAAA,GAAe,oBAAA,GAAoB,aAAA,EAAA,GAC9C,UAAA,IAAW,GAAA,MACK;AAChB,QAAM,IAAQ,EAAS,GACjB,EAAE,kBAAA,EAAA,IAAqB,EAAmB,GAC1C,EAAE,SAAA,EAAA,IAAY,GACd,EAAE,WAAA,IAAY,IAAI,aAAA,GAAa,SAAA,EAAA,IAAY,GAC3C,IAAO,EAAsB,GAA2B,CAAS,GAGjE,IAAS,EAAgB,GAAO,CAAO,GAAG,SAAS,CAAC;AAE1D,SACE,gBAAA,EAAC,GAAD;AAAA,IACQ,MAAA;AAAA,IACE,QAAA;AAAA,IACR,QAAQ,MAAgB;AAAA,IACf,SAAA;AAAA,IACT,YAAA,CAAa,GAAa,MACxB,EAAiB;AAAA,MACf,MAAM;AAAA,MACN,SAAS;AAAA,MACT,SAAS;AAAA,QAAE,eAAe;AAAA,QAAa,UAAU;AAAA,MAAS;AAAA,IAC5D,CAAC;AAAA,EAEJ,CAAA;AAEL"}

package/dist/insights-v2/blocks/ChartBlocks/index.d.ts

@@ -1,5 +1,6 @@
 export * from './BarchartBlock';
 export * from './BarchartBlock/utils';
 export * from './DoubleBarChartBlock';
+export { default as StepChartBlock } from './StepChartBlock/StepChartBlock';
 export { default as DonutChartBlock } from './DonutChartBlock/DonutChartBlock';
 export { default as DoubleProgressBarBlock } from './DoubleProgressBarBlock/DoubleProgressBarBlock';

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

@@ -1,42 +1,36 @@
 import { buildDynamicCopy as a } from "../../../../core/utils/Localization.es.js";
 import { getCategoryColor as h } from "../../../../core/utils/CategoryUtil.es.js";
-import { formatCurrency as e } from "../../../../core/utils/NumberFormatting.es.js";
+import { formatCurrency as r } from "../../../../core/utils/NumberFormatting.es.js";
 import C from "../../../components/ComponentBlocks/StatusIndicator.es.js";
 import { getColorByBudgetTier as x } from "./util.es.js";
 import { CategoryIcon as B, MerchantLogo as T, Text as k } from "@mxenabled/mxui";
-import { jsx as t } from "react/jsx-runtime";
+import { jsx as e } from "react/jsx-runtime";
 import { alpha as v, useTheme as G } from "@mui/material/styles";
 var W = ({ payload: i }) => {
-  const { budget_percent: c, amount: l, budget_tier: m, category_guid: o, merchant_guid: d, spent_amount: u, budgeted_amount: p, localized_payload: r } = i.instance_slot_data, s = x(m), g = G(), b = () => {
-    if (o && o !== null) {
-      const n = h(o, g);
-      return /* @__PURE__ */ t(B, {
-        categoryGuid: o,
-        size: 44,
-        sx: {
-          color: "text.primary",
-          bgcolor: v(n, 0.25),
-          borderColor: n,
-          borderWidth: 1,
-          borderStyle: "solid"
-        }
-      });
+  const { budget_percent: c, amount: l, budget_tier: m, category_guid: o, merchant_guid: d, spent_amount: u, budgeted_amount: p, localized_payload: t } = i.instance_slot_data, s = x(m), g = G(), n = o ? h(o, g) : "", b = o && o !== null ? /* @__PURE__ */ e(B, {
+    categoryGuid: o,
+    size: 44,
+    sx: {
+      color: "text.primary",
+      bgcolor: v(n, 0.25),
+      borderColor: n,
+      borderWidth: 1,
+      borderStyle: "solid"
     }
-    return /* @__PURE__ */ t(T, {
-      categoryGuid: o || "",
-      merchantGuid: d || ""
-    });
-  }, _ = a(r?.spent_label || "", e(u, "0,0.00")), f = a(r?.budgeted_label || "", e(p, "0,0.00")), y = /* @__PURE__ */ t(k, {
+  }) : /* @__PURE__ */ e(T, {
+    categoryGuid: o || "",
+    merchantGuid: d || ""
+  }), _ = a(t?.spent_label || "", r(u, "0,0.00")), f = a(t?.budgeted_label || "", r(p, "0,0.00")), y = /* @__PURE__ */ e(k, {
     bold: !0,
     variant: "h2",
-    children: o && o !== null ? a(r?.amount_left_label || "", e(l, "0,0.00")) : e(l, "0,0.00")
+    children: o && o !== null ? a(t?.amount_left_label || "", r(l, "0,0.00")) : r(l, "0,0.00")
   });
-  return /* @__PURE__ */ t(C, {
+  return /* @__PURE__ */ e(C, {
     amount: y,
     borderRadius: "12px",
     completeColor: s,
-    icon: /* @__PURE__ */ t(b, {}),
-    label: r?.primary_text || "",
+    icon: b,
+    label: t?.primary_text || "",
     leftLabel: _,
     percentComplete: c,
     rightLabel: f,

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

@@ -1 +1 @@
-{"version":3,"file":"BudgetBlock.es.js","names":[],"sources":["../../../../../src/insights-v2/blocks/ComponentBlocks/BudgetBlock/BudgetBlock.tsx"],"sourcesContent":["import { alpha, useTheme } from '@mui/material/styles'\n\nimport { CategoryIcon, MerchantLogo, Text } from '@mxenabled/mxui'\n\nimport { buildDynamicCopy, formatCurrency } from '../../../../common'\nimport type { BudgetBlockData } from '../../../../core/types/InsightsInstanceSlotData'\nimport { getCategoryColor } from '../../../../core/utils/CategoryUtil'\n\nimport StatusIndicator from '../../../components/ComponentBlocks/StatusIndicator'\n\nimport type { BlockProps } from '../../types'\n\nimport { getColorByBudgetTier } from './util'\n\nexport const BudgetBlock = ({ payload }: BlockProps<BudgetBlockData>) => {\n  const {\n    budget_percent,\n    amount,\n    budget_tier,\n    category_guid,\n    merchant_guid,\n    spent_amount,\n    budgeted_amount,\n    localized_payload,\n  } = payload.instance_slot_data\n\n  const color = getColorByBudgetTier(budget_tier)\n\n  const theme = useTheme()\n\n  const Icon = () => {\n    if (category_guid && category_guid !== null) {\n      const avatarBgColor = getCategoryColor(category_guid, theme)\n      return (\n        <CategoryIcon\n          categoryGuid={category_guid}\n          size={44}\n          sx={{\n            color: 'text.primary',\n            bgcolor: alpha(avatarBgColor, 0.25),\n            borderColor: avatarBgColor,\n            borderWidth: 1,\n            borderStyle: 'solid',\n          }}\n        />\n      )\n    }\n    return <MerchantLogo categoryGuid={category_guid || ''} merchantGuid={merchant_guid || ''} />\n  }\n\n  const block_left_footer = buildDynamicCopy(\n    localized_payload?.spent_label || '',\n    formatCurrency(spent_amount, '0,0.00'),\n  ) as string\n\n  const block_right_footer = buildDynamicCopy(\n    localized_payload?.budgeted_label || '',\n    formatCurrency(budgeted_amount, '0,0.00'),\n  ) as string\n\n  const amountToDisplay = (\n    <Text bold={true} variant=\"h2\">\n      {category_guid && category_guid !== null\n        ? (buildDynamicCopy(\n            localized_payload?.amount_left_label || '',\n            formatCurrency(amount, '0,0.00'),\n          ) as string)\n        : formatCurrency(amount, '0,0.00')}\n    </Text>\n  )\n\n  return (\n    <StatusIndicator\n      amount={amountToDisplay}\n      borderRadius=\"12px\"\n      completeColor={color}\n      icon={<Icon />}\n      label={localized_payload?.primary_text || ''}\n      leftLabel={block_left_footer}\n      percentComplete={budget_percent}\n      rightLabel={block_right_footer}\n      sx={{ '& .details-container': { gap: 12 } }}\n    />\n  )\n}\n"],"mappings":";;;;;;;;AAcA,IAAa,IAAA,CAAe,EAAE,SAAA,EAAA,MAA2C;AACvE,QAAM,EACJ,gBAAA,GACA,QAAA,GACA,aAAA,GACA,eAAA,GACA,eAAA,GACA,cAAA,GACA,iBAAA,GACA,mBAAA,EAAA,IACE,EAAQ,oBAEN,IAAQ,EAAqB,CAAW,GAExC,IAAQ,EAAS,GAEjB,IAAA,MAAa;AACjB,QAAI,KAAiB,MAAkB,MAAM;AAC3C,YAAM,IAAgB,EAAiB,GAAe,CAAK;AAC3D,aACE,gBAAA,EAAC,GAAD;AAAA,QACE,cAAc;AAAA,QACd,MAAM;AAAA,QACN,IAAI;AAAA,UACF,OAAO;AAAA,UACP,SAAS,EAAM,GAAe,IAAI;AAAA,UAClC,aAAa;AAAA,UACb,aAAa;AAAA,UACb,aAAa;AAAA,QACf;AAAA,MACD,CAAA;AAAA,IAEL;AACA,WAAO,gBAAA,EAAC,GAAD;AAAA,MAAc,cAAc,KAAiB;AAAA,MAAI,cAAc,KAAiB;AAAA,IAAK,CAAA;AAAA,EAC9F,GAEM,IAAoB,EACxB,GAAmB,eAAe,IAClC,EAAe,GAAc,QAAQ,CACvC,GAEM,IAAqB,EACzB,GAAmB,kBAAkB,IACrC,EAAe,GAAiB,QAAQ,CAC1C,GAEM,IACJ,gBAAA,EAAC,GAAD;AAAA,IAAM,MAAM;AAAA,IAAM,SAAQ;AAAA,IACvB,UAAA,KAAiB,MAAkB,OAC/B,EACC,GAAmB,qBAAqB,IACxC,EAAe,GAAQ,QAAQ,CACjC,IACA,EAAe,GAAQ,QAAQ;AAAA,EAC/B,CAAA;AAGR,SACE,gBAAA,EAAC,GAAD;AAAA,IACE,QAAQ;AAAA,IACR,cAAa;AAAA,IACb,eAAe;AAAA,IACf,MAAM,gBAAA,EAAC,GAAD,CAAO,CAAA;AAAA,IACb,OAAO,GAAmB,gBAAgB;AAAA,IAC1C,WAAW;AAAA,IACX,iBAAiB;AAAA,IACjB,YAAY;AAAA,IACZ,IAAI,EAAE,wBAAwB,EAAE,KAAK,GAAG,EAAE;AAAA,EAC3C,CAAA;AAEL"}
+{"version":3,"file":"BudgetBlock.es.js","names":[],"sources":["../../../../../src/insights-v2/blocks/ComponentBlocks/BudgetBlock/BudgetBlock.tsx"],"sourcesContent":["import { alpha, useTheme } from '@mui/material/styles'\n\nimport { CategoryIcon, MerchantLogo, Text } from '@mxenabled/mxui'\n\nimport { buildDynamicCopy, formatCurrency } from '../../../../common'\nimport type { BudgetBlockData } from '../../../../core/types/InsightsInstanceSlotData'\nimport { getCategoryColor } from '../../../../core/utils/CategoryUtil'\n\nimport StatusIndicator from '../../../components/ComponentBlocks/StatusIndicator'\n\nimport type { BlockProps } from '../../types'\n\nimport { getColorByBudgetTier } from './util'\n\nexport const BudgetBlock = ({ payload }: BlockProps<BudgetBlockData>) => {\n  const {\n    budget_percent,\n    amount,\n    budget_tier,\n    category_guid,\n    merchant_guid,\n    spent_amount,\n    budgeted_amount,\n    localized_payload,\n  } = payload.instance_slot_data\n\n  const color = getColorByBudgetTier(budget_tier)\n\n  const theme = useTheme()\n\n  const avatarBgColor = category_guid ? getCategoryColor(category_guid, theme) : ''\n\n  // Precomputed as a JSX element (not a component defined during render) so it\n  // isn't remounted on every re-render.\n  const icon =\n    category_guid && category_guid !== null ? (\n      <CategoryIcon\n        categoryGuid={category_guid}\n        size={44}\n        sx={{\n          color: 'text.primary',\n          bgcolor: alpha(avatarBgColor, 0.25),\n          borderColor: avatarBgColor,\n          borderWidth: 1,\n          borderStyle: 'solid',\n        }}\n      />\n    ) : (\n      <MerchantLogo categoryGuid={category_guid || ''} merchantGuid={merchant_guid || ''} />\n    )\n\n  const block_left_footer = buildDynamicCopy(\n    localized_payload?.spent_label || '',\n    formatCurrency(spent_amount, '0,0.00'),\n  ) as string\n\n  const block_right_footer = buildDynamicCopy(\n    localized_payload?.budgeted_label || '',\n    formatCurrency(budgeted_amount, '0,0.00'),\n  ) as string\n\n  const amountToDisplay = (\n    <Text bold={true} variant=\"h2\">\n      {category_guid && category_guid !== null\n        ? (buildDynamicCopy(\n            localized_payload?.amount_left_label || '',\n            formatCurrency(amount, '0,0.00'),\n          ) as string)\n        : formatCurrency(amount, '0,0.00')}\n    </Text>\n  )\n\n  return (\n    <StatusIndicator\n      amount={amountToDisplay}\n      borderRadius=\"12px\"\n      completeColor={color}\n      icon={icon}\n      label={localized_payload?.primary_text || ''}\n      leftLabel={block_left_footer}\n      percentComplete={budget_percent}\n      rightLabel={block_right_footer}\n      sx={{ '& .details-container': { gap: 12 } }}\n    />\n  )\n}\n"],"mappings":";;;;;;;;AAcA,IAAa,IAAA,CAAe,EAAE,SAAA,EAAA,MAA2C;AACvE,QAAM,EACJ,gBAAA,GACA,QAAA,GACA,aAAA,GACA,eAAA,GACA,eAAA,GACA,cAAA,GACA,iBAAA,GACA,mBAAA,EAAA,IACE,EAAQ,oBAEN,IAAQ,EAAqB,CAAW,GAExC,IAAQ,EAAS,GAEjB,IAAgB,IAAgB,EAAiB,GAAe,CAAK,IAAI,IAIzE,IACJ,KAAiB,MAAkB,OACjC,gBAAA,EAAC,GAAD;AAAA,IACE,cAAc;AAAA,IACd,MAAM;AAAA,IACN,IAAI;AAAA,MACF,OAAO;AAAA,MACP,SAAS,EAAM,GAAe,IAAI;AAAA,MAClC,aAAa;AAAA,MACb,aAAa;AAAA,MACb,aAAa;AAAA,IACf;AAAA,EACD,CAAA,IAED,gBAAA,EAAC,GAAD;AAAA,IAAc,cAAc,KAAiB;AAAA,IAAI,cAAc,KAAiB;AAAA,EAAK,CAAA,GAGnF,IAAoB,EACxB,GAAmB,eAAe,IAClC,EAAe,GAAc,QAAQ,CACvC,GAEM,IAAqB,EACzB,GAAmB,kBAAkB,IACrC,EAAe,GAAiB,QAAQ,CAC1C,GAEM,IACJ,gBAAA,EAAC,GAAD;AAAA,IAAM,MAAM;AAAA,IAAM,SAAQ;AAAA,IACvB,UAAA,KAAiB,MAAkB,OAC/B,EACC,GAAmB,qBAAqB,IACxC,EAAe,GAAQ,QAAQ,CACjC,IACA,EAAe,GAAQ,QAAQ;AAAA,EAC/B,CAAA;AAGR,SACE,gBAAA,EAAC,GAAD;AAAA,IACE,QAAQ;AAAA,IACR,cAAa;AAAA,IACb,eAAe;AAAA,IACT,MAAA;AAAA,IACN,OAAO,GAAmB,gBAAgB;AAAA,IAC1C,WAAW;AAAA,IACX,iBAAiB;AAAA,IACjB,YAAY;AAAA,IACZ,IAAI,EAAE,wBAAwB,EAAE,KAAK,GAAG,EAAE;AAAA,EAC3C,CAAA;AAEL"}