@mx-cartographer/experiences 9.4.12-alpha.al0 → 9.4.12

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

@@ -1 +1 @@
-{"version":3,"file":"MakeTransferActionBlock.es.js","names":[],"sources":["../../../../src/insights-v2/actionBlocks/MakeTransferActionBlock/MakeTransferActionBlock.tsx"],"sourcesContent":["import React from 'react'\nimport { Card, Divider, List, ListItem, Stack } from '@mui/material'\nimport { Icon } from '@mxenabled/mx-icons'\n\nimport { Text } from '@mxenabled/mxui'\nimport { BalanceStepper } from './BalanceStepper'\nimport { formatCurrency } from '../../../common'\nimport { buildDynamicCopy } from '../../../core'\nimport SaveEnoughToLiveOnBottomSection from './SaveEnoughToLiveOnBottomSection'\nimport { getMakeTransferLayout, variants } from './layout'\n\n// Re-exported for existing importers (adapter, tests) that pull `variants` from\n// the component module. The source of truth is ./layout.\nexport { variants }\n\ninterface CopyContent {\n  header_content?: string\n  description?: string\n  body_content?: string\n  body_description?: string\n  available_text?: string\n  total_remaining_text?: string\n  increment_aria_label?: string\n  decrement_aria_label?: string\n  expenses_text?: string\n  available_balances_text?: string\n  average_monthly_spend_text?: string\n  your_available_balances_text?: string\n}\n\ninterface MakeTransferActionBlockProps {\n  date?: string\n  variant: (typeof variants)[keyof typeof variants]\n  svgDateContent?: string\n  availableBalances?: number\n  copy: CopyContent\n  averageMonthlySpend?: number\n  /** SAVE_AN_EXTRA_100: total remaining from the payload; falls back to available − expenses. */\n  totalRemaining?: number\n}\n\n// Content-only: the surrounding Drawer (open/close/title) is owned by\n// ActionBlockLayer, which renders this inside the shared action-drawer shell.\nexport const MakeTransferActionBlock = ({\n  variant = variants.SAVE_ENOUGH_TO_LIVE_ON,\n  svgDateContent,\n  date,\n  copy,\n  availableBalances,\n  averageMonthlySpend,\n  totalRemaining,\n}: MakeTransferActionBlockProps) => {\n  // All per-variant layout decisions live in ./layout.ts (Beat Blocks pattern).\n  const layout = getMakeTransferLayout(variant)\n  const { monthsTable, deltaAmount } = layout\n\n  const [amountToCalculate, setAmountToCalculate] = React.useState(\n    layout.initialAmount ?? averageMonthlySpend ?? 0,\n  )\n\n  // Variants without a fixed initialAmount (e.g. SAVE_ENOUGH_TO_LIVE_ON) seed the\n  // stepper from averageMonthlySpend. useState only captures its initializer once,\n  // so sync once the spend resolves after mount.\n  React.useEffect(() => {\n    if (layout.initialAmount == null && averageMonthlySpend != null) {\n      setAmountToCalculate(averageMonthlySpend)\n    }\n  }, [averageMonthlySpend, layout.initialAmount])\n\n  return (\n    <>\n      <Stack\n        sx={{\n          bgcolor: 'background.paper',\n          p: 24,\n          borderBottom: '1px solid',\n          borderColor: 'divider',\n        }}\n      >\n        {layout.showBalancesSection &&\n          availableBalances != null &&\n          averageMonthlySpend != null &&\n          svgDateContent && (\n            <SaveEnoughToLiveOnBottomSection\n              content={svgDateContent || ''}\n              leftLabel={copy.available_balances_text!}\n              leftValue={formatCurrency(availableBalances, '0,0.00')}\n              rightLabel={copy.average_monthly_spend_text!}\n              rightValue={formatCurrency(averageMonthlySpend, '0,0.00')}\n              sx={{ width: '100%', mb: 24 }}\n            />\n          )}\n        <Stack\n          sx={{\n            gap: 8,\n          }}\n        >\n          <Text variant=\"h3\">{copy.header_content}</Text>\n          <Text sx={{ lineHeight: '24px' }} truncate={false} variant=\"body1\">\n            {copy.description}\n          </Text>\n        </Stack>\n      </Stack>\n      {layout.showRemainingCard && availableBalances != null && averageMonthlySpend != null && (\n        <Stack sx={{ pt: 24, px: 24 }}>\n          <Card sx={{ px: 16, pt: 16, pb: 12 }}>\n            <Stack\n              sx={{\n                border: 1,\n                borderColor: 'divider',\n                borderRadius: '4px',\n                gap: 12,\n                flexDirection: 'row',\n                justifyContent: 'space-between',\n                alignItems: 'center',\n                p: 8,\n                mb: 12,\n              }}\n            >\n              <Stack sx={{ width: 155, textAlign: 'center' }}>\n                <Text sx={{ fontWeight: 600 }} variant=\"body1\">\n                  {formatCurrency(availableBalances, '0,0.00')}\n                </Text>\n                <Text sx={{ color: 'text.secondary' }} variant=\"caption\">\n                  {copy.available_text}\n                </Text>\n              </Stack>\n              <Icon name=\"remove\" size={20} />\n              <Stack sx={{ width: 155, textAlign: 'center' }}>\n                <Text sx={{ fontWeight: 600 }} variant=\"body1\">\n                  {formatCurrency(averageMonthlySpend, '0,0.00')}\n                </Text>\n                <Text sx={{ color: 'text.secondary' }} variant=\"caption\">\n                  {copy.expenses_text}\n                </Text>\n              </Stack>\n            </Stack>\n            <Stack\n              sx={{\n                textAlign: 'center',\n                flexDirection: 'row',\n                justifyContent: 'center',\n                alignItems: 'center',\n                gap: 4,\n              }}\n            >\n              <Text sx={{ color: 'text.secondary' }} variant=\"body2\">\n                {copy.total_remaining_text}:\n              </Text>\n              <Text sx={{ fontWeight: 600 }} variant=\"body2\">\n                {formatCurrency(totalRemaining, '0,0.00')}\n              </Text>\n            </Stack>\n          </Card>\n        </Stack>\n      )}\n\n      <Stack sx={{ p: 24, gap: 8 }}>\n        <Text sx={{ fontWeight: 600 }} truncate={false} variant=\"body1\">\n          {copy.body_content}\n        </Text>\n        <BalanceStepper\n          amount={formatCurrency(amountToCalculate, '0,0.00')}\n          copy={copy}\n          onDecrement={() => setAmountToCalculate((prev) => Math.max(0, prev - deltaAmount))}\n          onIncrement={() => setAmountToCalculate((prev) => prev + deltaAmount)}\n        />\n      </Stack>\n      <Stack sx={{ gap: 8 }}>\n        <Text sx={{ fontWeight: 600, mx: 24 }} truncate={false} variant=\"body1\">\n          {copy.body_description}\n        </Text>\n        <List sx={{ bgcolor: 'background.paper', width: '100%' }}>\n          {monthsTable.map(({ label, value }, index) => {\n            const isLastIndex = layout.lastRowIndex\n            return (\n              <React.Fragment key={value}>\n                <ListItem\n                  disableGutters={true}\n                  disablePadding={true}\n                  sx={{\n                    minHeight: 52,\n                    bgcolor: 'background.paper',\n                  }}\n                >\n                  <Stack sx={{ width: '100%' }}>\n                    <Stack\n                      sx={{\n                        flexDirection: 'row',\n                        justifyContent: 'space-between',\n                        alignItems: 'center',\n                        width: '100%',\n                        px: 24,\n                        py: 8,\n                      }}\n                    >\n                      <Text truncate={false} variant=\"body1\">\n                        {label}\n                      </Text>\n                      <Text sx={{ fontWeight: 600 }} truncate={false} variant=\"body1\">\n                        {formatCurrency(value * amountToCalculate, '0,0')}\n                      </Text>\n                    </Stack>\n                  </Stack>\n                </ListItem>\n                <Divider component=\"li\" sx={{ ml: index === isLastIndex ? 0 : 24 }} />\n              </React.Fragment>\n            )\n          })}\n        </List>\n        {layout.showTotalBalances && availableBalances != null && (\n          <Stack sx={{ pt: 6, pb: 14, px: 24, textAlign: 'right', gap: 4 }}>\n            <Text truncate={false} variant=\"h3\">\n              {formatCurrency(availableBalances, '0,0.00')}\n            </Text>\n            {date && (\n              <Text\n                sx={{ color: 'text.secondary', fontWeight: 400 }}\n                truncate={false}\n                variant=\"subtitle2\"\n              >\n                {buildDynamicCopy(copy.your_available_balances_text!, date) as string}\n              </Text>\n            )}\n          </Stack>\n        )}\n      </Stack>\n    </>\n  )\n}\n"],"mappings":"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"}
+{"version":3,"file":"MakeTransferActionBlock.es.js","names":[],"sources":["../../../../src/insights-v2/actionBlocks/MakeTransferActionBlock/MakeTransferActionBlock.tsx"],"sourcesContent":["import React, { type ReactNode } from 'react'\nimport { Card, Divider, List, ListItem, Stack } from '@mui/material'\nimport { Icon } from '@mxenabled/mx-icons'\n\nimport { Text } from '@mxenabled/mxui'\n\nimport { formatCurrency } from '../../../common'\nimport { buildDynamicCopy, type MakeTransferCopy } from '../../../core'\n\nimport { BalanceStepper } from './BalanceStepper'\nimport SaveEnoughToLiveOnBottomSection from './SaveEnoughToLiveOnBottomSection'\nimport {\n  toNumber,\n  variants,\n  type MakeTransferVariant,\n  type MakeTransferVariantProps,\n} from './layout'\n\n// ============================================================================\n// Section building blocks (block-local)\n// ============================================================================\n\ninterface MonthRow {\n  label: string\n  value: number\n}\n\nconst SAVE_AN_EXTRA_MONTHS: readonly MonthRow[] = [\n  { label: '3 months', value: 3 },\n  { label: '6 months', value: 6 },\n  { label: '9 months', value: 9 },\n]\n\nconst SAVE_ENOUGH_MONTHS: 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\n/** Bordered title + description, with an optional `leading` slot. */\nconst Header = ({ copy, leading }: { copy: MakeTransferCopy; leading?: ReactNode }) => (\n  <Stack\n    sx={{ bgcolor: 'background.paper', p: 24, borderBottom: '1px solid', borderColor: 'divider' }}\n  >\n    {leading}\n    <Stack sx={{ gap: 8 }}>\n      <Text variant=\"h3\">{copy.header_content}</Text>\n      <Text sx={{ lineHeight: '24px' }} truncate={false} variant=\"body1\">\n        {copy.description}\n      </Text>\n    </Stack>\n  </Stack>\n)\n\n/** Save-extra only: available − expenses = total remaining. */\nconst RemainingCard = ({\n  availableBalances,\n  expenses,\n  totalRemaining,\n  copy,\n}: {\n  availableBalances: number\n  expenses: number\n  totalRemaining?: number\n  copy: MakeTransferCopy\n}) => (\n  <Stack sx={{ pt: 24, px: 24 }}>\n    <Card sx={{ px: 16, pt: 16, pb: 12 }}>\n      <Stack\n        sx={{\n          border: 1,\n          borderColor: 'divider',\n          borderRadius: '4px',\n          gap: 12,\n          flexDirection: 'row',\n          justifyContent: 'space-between',\n          alignItems: 'center',\n          p: 8,\n          mb: 12,\n        }}\n      >\n        <Stack sx={{ width: 155, textAlign: 'center' }}>\n          <Text sx={{ fontWeight: 600 }} variant=\"body1\">\n            {formatCurrency(availableBalances, '0,0.00')}\n          </Text>\n          <Text sx={{ color: 'text.secondary' }} variant=\"caption\">\n            {copy.available_text}\n          </Text>\n        </Stack>\n        <Icon name=\"remove\" size={20} />\n        <Stack sx={{ width: 155, textAlign: 'center' }}>\n          <Text sx={{ fontWeight: 600 }} variant=\"body1\">\n            {formatCurrency(expenses, '0,0.00')}\n          </Text>\n          <Text sx={{ color: 'text.secondary' }} variant=\"caption\">\n            {copy.expenses_text}\n          </Text>\n        </Stack>\n      </Stack>\n      <Stack\n        sx={{\n          textAlign: 'center',\n          flexDirection: 'row',\n          justifyContent: 'center',\n          alignItems: 'center',\n          gap: 4,\n        }}\n      >\n        <Text sx={{ color: 'text.secondary' }} variant=\"body2\">\n          {copy.total_remaining_text}:\n        </Text>\n        <Text sx={{ fontWeight: 600 }} variant=\"body2\">\n          {formatCurrency(totalRemaining, '0,0.00')}\n        </Text>\n      </Stack>\n    </Card>\n  </Stack>\n)\n\n/** Save-enough only: total available balances as of a date. */\nconst TotalsFooter = ({\n  availableBalances,\n  date,\n  copy,\n}: {\n  availableBalances: number\n  date?: string\n  copy: MakeTransferCopy\n}) => (\n  <Stack sx={{ pt: 6, pb: 14, px: 24, textAlign: 'right', gap: 4 }}>\n    <Text truncate={false} variant=\"h3\">\n      {formatCurrency(availableBalances, '0,0.00')}\n    </Text>\n    {date && (\n      <Text sx={{ color: 'text.secondary', fontWeight: 400 }} truncate={false} variant=\"subtitle2\">\n        {buildDynamicCopy(copy.your_available_balances_text, date) as string}\n      </Text>\n    )}\n  </Stack>\n)\n\n/** Stepper + projected-savings table. Owns the amount state so both stay in sync. */\nconst SavingsProjection = ({\n  bodyContent,\n  bodyDescription,\n  monthsTable,\n  deltaAmount,\n  initialAmount,\n  seedAmount,\n  copy,\n}: {\n  bodyContent: string\n  bodyDescription: string\n  monthsTable: readonly MonthRow[]\n  deltaAmount: number\n  /** Fixed starting amount; when null, seeds from `seedAmount` once it resolves. */\n  initialAmount: number | null\n  seedAmount?: number\n  copy: MakeTransferCopy\n}) => {\n  const [amount, setAmount] = React.useState(initialAmount ?? seedAmount ?? 0)\n\n  React.useEffect(() => {\n    if (initialAmount == null && seedAmount != null) {\n      setAmount(seedAmount)\n    }\n  }, [initialAmount, seedAmount])\n\n  const lastRowIndex = monthsTable.length - 1\n\n  return (\n    <>\n      <Stack sx={{ p: 24, gap: 8 }}>\n        <Text sx={{ fontWeight: 600 }} truncate={false} variant=\"body1\">\n          {bodyContent}\n        </Text>\n        <BalanceStepper\n          amount={formatCurrency(amount, '0,0.00')}\n          copy={copy}\n          onDecrement={() => setAmount((prev) => Math.max(0, prev - deltaAmount))}\n          onIncrement={() => setAmount((prev) => prev + deltaAmount)}\n        />\n      </Stack>\n      <Stack sx={{ gap: 8 }}>\n        <Text sx={{ fontWeight: 600, mx: 24 }} truncate={false} variant=\"body1\">\n          {bodyDescription}\n        </Text>\n        <List sx={{ bgcolor: 'background.paper', width: '100%' }}>\n          {monthsTable.map(({ label, value }, index) => (\n            <React.Fragment key={value}>\n              <ListItem\n                disableGutters={true}\n                disablePadding={true}\n                sx={{ minHeight: 52, bgcolor: 'background.paper' }}\n              >\n                <Stack sx={{ width: '100%' }}>\n                  <Stack\n                    sx={{\n                      flexDirection: 'row',\n                      justifyContent: 'space-between',\n                      alignItems: 'center',\n                      width: '100%',\n                      px: 24,\n                      py: 8,\n                    }}\n                  >\n                    <Text truncate={false} variant=\"body1\">\n                      {label}\n                    </Text>\n                    <Text sx={{ fontWeight: 600 }} truncate={false} variant=\"body1\">\n                      {formatCurrency(value * amount, '0,0')}\n                    </Text>\n                  </Stack>\n                </Stack>\n              </ListItem>\n              <Divider component=\"li\" sx={{ ml: index === lastRowIndex ? 0 : 24 }} />\n            </React.Fragment>\n          ))}\n        </List>\n      </Stack>\n    </>\n  )\n}\n\n// ============================================================================\n// Block — one component handles both variants (they share the header + the\n// stepper/table skeleton; the top/middle/bottom sections differ). Branching is\n// on `variant` since the two are structurally close. If a third structurally\n// distinct variant appears, split into per-variant components + a registry.\n// ============================================================================\n\nexport const MakeTransferActionBlock = ({\n  variant,\n  slotData,\n  copy,\n}: MakeTransferVariantProps & { variant: MakeTransferVariant }) => {\n  const isSaveEnough = variant === variants.SAVE_ENOUGH_TO_LIVE_ON\n\n  const availableBalances = slotData?.available_balance\n  const averageMonthlySpend = toNumber(slotData?.avg_monthly_spend)\n  const expenses = toNumber(slotData?.upcoming_expenses)\n  const totalRemaining = toNumber(slotData?.total_remaining)\n  const svgDateContent = slotData?.time_period\n  const date = slotData?.date\n\n  return (\n    <>\n      <Header\n        copy={copy}\n        leading={\n          isSaveEnough &&\n          availableBalances != null &&\n          averageMonthlySpend != null &&\n          svgDateContent ? (\n            <SaveEnoughToLiveOnBottomSection\n              content={svgDateContent}\n              leftLabel={copy.available_balances_text}\n              leftValue={formatCurrency(availableBalances, '0,0.00')}\n              rightLabel={copy.average_monthly_spend_text}\n              rightValue={formatCurrency(averageMonthlySpend, '0,0.00')}\n              sx={{ width: '100%', mb: 24 }}\n            />\n          ) : null\n        }\n      />\n\n      {!isSaveEnough && availableBalances != null && expenses != null && (\n        <RemainingCard\n          availableBalances={availableBalances}\n          copy={copy}\n          expenses={expenses}\n          totalRemaining={totalRemaining}\n        />\n      )}\n\n      <SavingsProjection\n        bodyContent={isSaveEnough ? copy.body_spending_content : copy.body_saving_content}\n        bodyDescription={\n          isSaveEnough ? copy.body_spending_description : copy.body_saving_description\n        }\n        copy={copy}\n        deltaAmount={isSaveEnough ? 50 : 5}\n        initialAmount={isSaveEnough ? null : 100}\n        monthsTable={isSaveEnough ? SAVE_ENOUGH_MONTHS : SAVE_AN_EXTRA_MONTHS}\n        seedAmount={isSaveEnough ? averageMonthlySpend : undefined}\n      />\n\n      {isSaveEnough && availableBalances != null && (\n        <TotalsFooter availableBalances={availableBalances} copy={copy} date={date} />\n      )}\n    </>\n  )\n}\n"],"mappings":";;;;;;;;;;AA2BA,IAAM,IAA4C;AAAA,EAChD;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,IAA0C;AAAA,EAC9C;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,GAGM,IAAA,CAAU,EAAE,MAAA,GAAM,SAAA,EAAA,MACtB,gBAAA,EAAC,GAAD;AAAA,EACE,IAAI;AAAA,IAAE,SAAS;AAAA,IAAoB,GAAG;AAAA,IAAI,cAAc;AAAA,IAAa,aAAa;AAAA,EAAU;AAAA,EAD9F,UAAA,CAGG,GACD,gBAAA,EAAC,GAAD;AAAA,IAAO,IAAI,EAAE,KAAK,EAAE;AAAA,IAApB,UAAA,CACE,gBAAA,EAAC,GAAD;AAAA,MAAM,SAAQ;AAAA,MAAM,UAAA,EAAK;AAAA,IAAqB,CAAA,GAC9C,gBAAA,EAAC,GAAD;AAAA,MAAM,IAAI,EAAE,YAAY,OAAO;AAAA,MAAG,UAAU;AAAA,MAAO,SAAQ;AAAA,MACxD,UAAA,EAAK;AAAA,IACF,CAAA,CACD;AAAA,EACF,CAAA,CAAA;IAIH,IAAA,CAAiB,EACrB,mBAAA,GACA,UAAA,GACA,gBAAA,GACA,MAAA,EAAA,MAOA,gBAAA,EAAC,GAAD;AAAA,EAAO,IAAI;AAAA,IAAE,IAAI;AAAA,IAAI,IAAI;AAAA,EAAG;AAAA,EAC1B,UAAA,gBAAA,EAAC,GAAD;AAAA,IAAM,IAAI;AAAA,MAAE,IAAI;AAAA,MAAI,IAAI;AAAA,MAAI,IAAI;AAAA,IAAG;AAAA,IAAnC,UAAA,CACE,gBAAA,EAAC,GAAD;AAAA,MACE,IAAI;AAAA,QACF,QAAQ;AAAA,QACR,aAAa;AAAA,QACb,cAAc;AAAA,QACd,KAAK;AAAA,QACL,eAAe;AAAA,QACf,gBAAgB;AAAA,QAChB,YAAY;AAAA,QACZ,GAAG;AAAA,QACH,IAAI;AAAA,MACN;AAAA,MAXF,UAAA;AAAA,QAaE,gBAAA,EAAC,GAAD;AAAA,UAAO,IAAI;AAAA,YAAE,OAAO;AAAA,YAAK,WAAW;AAAA,UAAS;AAAA,UAA7C,UAAA,CACE,gBAAA,EAAC,GAAD;AAAA,YAAM,IAAI,EAAE,YAAY,IAAI;AAAA,YAAG,SAAQ;AAAA,YACpC,UAAA,EAAe,GAAmB,QAAQ;AAAA,UACvC,CAAA,GACN,gBAAA,EAAC,GAAD;AAAA,YAAM,IAAI,EAAE,OAAO,iBAAiB;AAAA,YAAG,SAAQ;AAAA,YAC5C,UAAA,EAAK;AAAA,UACF,CAAA,CACD;AAAA;QACP,gBAAA,EAAC,GAAD;AAAA,UAAM,MAAK;AAAA,UAAS,MAAM;AAAA,QAAK,CAAA;AAAA,QAC/B,gBAAA,EAAC,GAAD;AAAA,UAAO,IAAI;AAAA,YAAE,OAAO;AAAA,YAAK,WAAW;AAAA,UAAS;AAAA,UAA7C,UAAA,CACE,gBAAA,EAAC,GAAD;AAAA,YAAM,IAAI,EAAE,YAAY,IAAI;AAAA,YAAG,SAAQ;AAAA,YACpC,UAAA,EAAe,GAAU,QAAQ;AAAA,UAC9B,CAAA,GACN,gBAAA,EAAC,GAAD;AAAA,YAAM,IAAI,EAAE,OAAO,iBAAiB;AAAA,YAAG,SAAQ;AAAA,YAC5C,UAAA,EAAK;AAAA,UACF,CAAA,CACD;AAAA;MACF;AAAA,IACP,CAAA,GAAA,gBAAA,EAAC,GAAD;AAAA,MACE,IAAI;AAAA,QACF,WAAW;AAAA,QACX,eAAe;AAAA,QACf,gBAAgB;AAAA,QAChB,YAAY;AAAA,QACZ,KAAK;AAAA,MACP;AAAA,MAPF,UAAA,CASE,gBAAA,EAAC,GAAD;AAAA,QAAM,IAAI,EAAE,OAAO,iBAAiB;AAAA,QAAG,SAAQ;AAAA,QAA/C,UAAA,CACG,EAAK,sBAAqB,GACvB;AAAA,MACN,CAAA,GAAA,gBAAA,EAAC,GAAD;AAAA,QAAM,IAAI,EAAE,YAAY,IAAI;AAAA,QAAG,SAAQ;AAAA,QACpC,UAAA,EAAe,GAAgB,QAAQ;AAAA,MACpC,CAAA,CACD;AAAA,IACH,CAAA,CAAA;AAAA;AACD,CAAA,GAIH,IAAA,CAAgB,EACpB,mBAAA,GACA,MAAA,GACA,MAAA,EAAA,MAMA,gBAAA,EAAC,GAAD;AAAA,EAAO,IAAI;AAAA,IAAE,IAAI;AAAA,IAAG,IAAI;AAAA,IAAI,IAAI;AAAA,IAAI,WAAW;AAAA,IAAS,KAAK;AAAA,EAAE;AAAA,EAA/D,UAAA,CACE,gBAAA,EAAC,GAAD;AAAA,IAAM,UAAU;AAAA,IAAO,SAAQ;AAAA,IAC5B,UAAA,EAAe,GAAmB,QAAQ;AAAA,EACvC,CAAA,GACL,KACC,gBAAA,EAAC,GAAD;AAAA,IAAM,IAAI;AAAA,MAAE,OAAO;AAAA,MAAkB,YAAY;AAAA,IAAI;AAAA,IAAG,UAAU;AAAA,IAAO,SAAQ;AAAA,IAC9E,UAAA,EAAiB,EAAK,8BAA8B,CAAI;AAAA,EACrD,CAAA,CAEH;IAIH,IAAA,CAAqB,EACzB,aAAA,GACA,iBAAA,GACA,aAAA,GACA,aAAA,GACA,eAAA,GACA,YAAA,GACA,MAAA,EAAA,MAUI;AACJ,QAAM,CAAC,GAAQ,CAAA,IAAa,EAAM,SAAS,KAAiB,KAAc,CAAC;AAE3E,EAAA,EAAM,UAAA,MAAgB;AACpB,IAAI,KAAiB,QAAQ,KAAc,QACzC,EAAU,CAAU;AAAA,EAExB,GAAG,CAAC,GAAe,CAAU,CAAC;AAE9B,QAAM,IAAe,EAAY,SAAS;AAE1C,SACE,gBAAA,EAAA,GAAA,EAAA,UAAA,CACE,gBAAA,EAAC,GAAD;AAAA,IAAO,IAAI;AAAA,MAAE,GAAG;AAAA,MAAI,KAAK;AAAA,IAAE;AAAA,IAA3B,UAAA,CACE,gBAAA,EAAC,GAAD;AAAA,MAAM,IAAI,EAAE,YAAY,IAAI;AAAA,MAAG,UAAU;AAAA,MAAO,SAAQ;AAAA,MACrD,UAAA;AAAA,IACG,CAAA,GACN,gBAAA,EAAC,GAAD;AAAA,MACE,QAAQ,EAAe,GAAQ,QAAQ;AAAA,MACjC,MAAA;AAAA,MACN,aAAA,MAAmB,EAAA,CAAW,MAAS,KAAK,IAAI,GAAG,IAAO,CAAW,CAAC;AAAA,MACtE,aAAA,MAAmB,EAAA,CAAW,MAAS,IAAO,CAAW;AAAA,IAC1D,CAAA,CACI;AAAA,EACP,CAAA,GAAA,gBAAA,EAAC,GAAD;AAAA,IAAO,IAAI,EAAE,KAAK,EAAE;AAAA,IAApB,UAAA,CACE,gBAAA,EAAC,GAAD;AAAA,MAAM,IAAI;AAAA,QAAE,YAAY;AAAA,QAAK,IAAI;AAAA,MAAG;AAAA,MAAG,UAAU;AAAA,MAAO,SAAQ;AAAA,MAC7D,UAAA;AAAA,IACG,CAAA,GACN,gBAAA,EAAC,GAAD;AAAA,MAAM,IAAI;AAAA,QAAE,SAAS;AAAA,QAAoB,OAAO;AAAA,MAAO;AAAA,MACpD,UAAA,EAAY,IAAA,CAAK,EAAE,OAAA,GAAO,OAAA,EAAA,GAAS,MAClC,gBAAA,EAAC,EAAM,UAAP,EAAA,UAAA,CACE,gBAAA,EAAC,GAAD;AAAA,QACE,gBAAgB;AAAA,QAChB,gBAAgB;AAAA,QAChB,IAAI;AAAA,UAAE,WAAW;AAAA,UAAI,SAAS;AAAA,QAAmB;AAAA,QAEjD,UAAA,gBAAA,EAAC,GAAD;AAAA,UAAO,IAAI,EAAE,OAAO,OAAO;AAAA,UACzB,UAAA,gBAAA,EAAC,GAAD;AAAA,YACE,IAAI;AAAA,cACF,eAAe;AAAA,cACf,gBAAgB;AAAA,cAChB,YAAY;AAAA,cACZ,OAAO;AAAA,cACP,IAAI;AAAA,cACJ,IAAI;AAAA,YACN;AAAA,YARF,UAAA,CAUE,gBAAA,EAAC,GAAD;AAAA,cAAM,UAAU;AAAA,cAAO,SAAQ;AAAA,cAC5B,UAAA;AAAA,YACG,CAAA,GACN,gBAAA,EAAC,GAAD;AAAA,cAAM,IAAI,EAAE,YAAY,IAAI;AAAA,cAAG,UAAU;AAAA,cAAO,SAAQ;AAAA,cACrD,UAAA,EAAe,IAAQ,GAAQ,KAAK;AAAA,YACjC,CAAA,CACD;AAAA;QACF,CAAA;AAAA,MACC,CAAA,GACV,gBAAA,EAAC,GAAD;AAAA,QAAS,WAAU;AAAA,QAAK,IAAI,EAAE,IAAI,MAAU,IAAe,IAAI,GAAG;AAAA,MAAI,CAAA,CACxD,EAAA,GA3BK,CA2BL,CACjB;AAAA,IACG,CAAA,CACD;AAAA,EACP,CAAA,CAAA,EAAA,CAAA;AAEN,GASa,IAAA,CAA2B,EACtC,SAAA,GACA,UAAA,GACA,MAAA,EAAA,MACiE;AACjE,QAAM,IAAe,MAAY,EAAS,wBAEpC,IAAoB,GAAU,mBAC9B,IAAsB,EAAS,GAAU,iBAAiB,GAC1D,IAAW,EAAS,GAAU,iBAAiB,GAC/C,IAAiB,EAAS,GAAU,eAAe,GACnD,IAAiB,GAAU,aAC3B,IAAO,GAAU;AAEvB,SACE,gBAAA,EAAA,GAAA,EAAA,UAAA;AAAA,IACE,gBAAA,EAAC,GAAD;AAAA,MACQ,MAAA;AAAA,MACN,SACE,KACA,KAAqB,QACrB,KAAuB,QACvB,IACE,gBAAA,EAAC,GAAD;AAAA,QACE,SAAS;AAAA,QACT,WAAW,EAAK;AAAA,QAChB,WAAW,EAAe,GAAmB,QAAQ;AAAA,QACrD,YAAY,EAAK;AAAA,QACjB,YAAY,EAAe,GAAqB,QAAQ;AAAA,QACxD,IAAI;AAAA,UAAE,OAAO;AAAA,UAAQ,IAAI;AAAA,QAAG;AAAA,MAC7B,CAAA,IACC;AAAA,IAEP,CAAA;AAAA,IAEA,CAAC,KAAgB,KAAqB,QAAQ,KAAY,QACzD,gBAAA,EAAC,GAAD;AAAA,MACqB,mBAAA;AAAA,MACb,MAAA;AAAA,MACI,UAAA;AAAA,MACM,gBAAA;AAAA,IACjB,CAAA;AAAA,IAGH,gBAAA,EAAC,GAAD;AAAA,MACE,aAAa,IAAe,EAAK,wBAAwB,EAAK;AAAA,MAC9D,iBACE,IAAe,EAAK,4BAA4B,EAAK;AAAA,MAEjD,MAAA;AAAA,MACN,aAAa,IAAe,KAAK;AAAA,MACjC,eAAe,IAAe,OAAO;AAAA,MACrC,aAAa,IAAe,IAAqB;AAAA,MACjD,YAAY,IAAe,IAAsB;AAAA,IAClD,CAAA;AAAA,IAEA,KAAgB,KAAqB,QACpC,gBAAA,EAAC,GAAD;AAAA,MAAiC,mBAAA;AAAA,MAAyB,MAAA;AAAA,MAAY,MAAA;AAAA,IAAO,CAAA;AAAA,EAE/E,EAAA,CAAA;AAEN"}

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

@@ -1,10 +1,11 @@
 import { Beat } from '../../../core';
 /**
- * Adapter that plugs MakeTransferActionBlock into the ActionBlock registry.
+ * Adapter that plugs MakeTransfer into the ActionBlock registry.
  *
- * The block is content-only — ActionBlockLayer owns the surrounding Drawer
- * (open/close/title). This adapter derives the variant from the clicked CTA,
- * the figures from the beat payload, and the copy from GlobalCopyStore.
+ * The variants are content-only — ActionBlockLayer owns the surrounding Drawer
+ * (open/close/title). This adapter derives the variant from the clicked CTA, the
+ * copy from GlobalCopyStore, and passes the slot data through; each variant reads
+ * the fields it needs.
  */
 export declare const MakeTransferActionBlockLayer: (({ beat, }: {
     beat: Beat;

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

@@ -1,26 +1,18 @@
-import { useGlobalCopyStore as p, useInsightsV2Store as f } from "../../../common/context/hooks.es.js";
-import { getMakeTransferLayout as g, resolveMakeTransferVariant as b } from "./layout.es.js";
-import { MakeTransferActionBlock as v } from "./MakeTransferActionBlock.es.js";
-import { observer as k } from "mobx-react-lite";
-import { jsx as _ } from "react/jsx-runtime";
-var D = k(function({ beat: c }) {
-  const { actionDrawer: d } = f(), { insights_feed: y } = p(), e = y.make_transfer, n = c.insights_payload, l = d.trigger === "secondaryCta" ? n?.secondary_cta : n?.primary_cta, r = b(l?.variant), { copyKeys: i, dataKeys: t } = g(r), m = {
-    ...e,
-    body_content: e[i.bodyContent],
-    body_description: e[i.bodyDescription]
-  }, o = n?.instance_slot_data, s = (a) => a == null || a === "" ? void 0 : Number(a);
-  return /* @__PURE__ */ _(v, {
-    availableBalances: o?.available_balance,
-    averageMonthlySpend: s(o?.[t.averageMonthlySpend]),
-    copy: m,
-    date: o?.date,
-    svgDateContent: t.timePeriod ? o?.[t.timePeriod] : void 0,
-    totalRemaining: t.totalRemaining ? s(o?.[t.totalRemaining]) : void 0,
-    variant: r
+import { useGlobalCopyStore as n, useInsightsV2Store as s } from "../../../common/context/hooks.es.js";
+import { resolveMakeTransferVariant as i } from "./layout.es.js";
+import { MakeTransferActionBlock as c } from "./MakeTransferActionBlock.es.js";
+import { observer as f } from "mobx-react-lite";
+import { jsx as m } from "react/jsx-runtime";
+var g = f(function({ beat: a }) {
+  const { actionDrawer: o } = s(), { insights_feed: t } = n(), r = a.insights_payload, e = o.trigger === "secondaryCta" ? r?.secondary_cta : r?.primary_cta;
+  return /* @__PURE__ */ m(c, {
+    copy: t.make_transfer,
+    slotData: r?.instance_slot_data,
+    variant: i(e?.variant)
   });
 });
 export {
-  D as MakeTransferActionBlockLayer
+  g as MakeTransferActionBlockLayer
 };
 
 //# sourceMappingURL=MakeTransferActionBlockLayer.es.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"MakeTransferActionBlockLayer.es.js","names":[],"sources":["../../../../src/insights-v2/actionBlocks/MakeTransferActionBlock/MakeTransferActionBlockLayer.tsx"],"sourcesContent":["import { observer } from 'mobx-react-lite'\n\nimport { useGlobalCopyStore, useInsightsV2Store } from '../../../common'\n\nimport type { Beat } from '../../../core'\nimport type { SaveExtraBlockData } from '../../../core/types/InsightsInstanceSlotData'\n\nimport { MakeTransferActionBlock } from './MakeTransferActionBlock'\nimport { getMakeTransferLayout, resolveMakeTransferVariant } from './layout'\n\n/**\n * Adapter that plugs MakeTransferActionBlock into the ActionBlock registry.\n *\n * The block is content-only — ActionBlockLayer owns the surrounding Drawer\n * (open/close/title). This adapter derives the variant from the clicked CTA,\n * the figures from the beat payload, and the copy from GlobalCopyStore.\n */\nexport const MakeTransferActionBlockLayer = observer(function MakeTransferActionBlockLayer({\n  beat,\n}: {\n  beat: Beat\n}) {\n  const { actionDrawer } = useInsightsV2Store()\n  const { insights_feed: insightsFeedCopy } = useGlobalCopyStore()\n  const makeTransferCopy = insightsFeedCopy.make_transfer\n\n  const insightsPayload = beat.insights_payload\n  const cta =\n    actionDrawer.trigger === 'secondaryCta'\n      ? insightsPayload?.secondary_cta\n      : insightsPayload?.primary_cta\n\n  const variant = resolveMakeTransferVariant(cta?.variant)\n  const { copyKeys, dataKeys } = getMakeTransferLayout(variant)\n\n  // Body copy is variant-specific (see layout.ts copyKeys). Map the resolved\n  // keys onto the block's body_content/body_description.\n  const copy = {\n    ...makeTransferCopy,\n    body_content: makeTransferCopy[copyKeys.bodyContent],\n    body_description: makeTransferCopy[copyKeys.bodyDescription],\n  }\n\n  // All figures now come from insights_payload.instance_slot_data (migration).\n  // dataKeys (layout.ts) picks the variant-specific field names; values may be\n  // numeric or numeric strings, so coerce to number.\n  const slotData = insightsPayload?.instance_slot_data as SaveExtraBlockData | undefined\n  const toNumber = (value?: string | number) =>\n    value === undefined || value === null || value === '' ? undefined : Number(value)\n\n  return (\n    <MakeTransferActionBlock\n      availableBalances={slotData?.available_balance}\n      averageMonthlySpend={toNumber(slotData?.[dataKeys.averageMonthlySpend] as string | number)}\n      copy={copy}\n      date={slotData?.date}\n      svgDateContent={dataKeys.timePeriod ? (slotData?.[dataKeys.timePeriod] as string) : undefined}\n      totalRemaining={\n        dataKeys.totalRemaining\n          ? toNumber(slotData?.[dataKeys.totalRemaining] as string | number)\n          : undefined\n      }\n      variant={variant}\n    />\n  )\n})\n"],"mappings":";;;;;AAiBA,IAAa,IAA+B,EAAS,SAAsC,EACzF,MAAA,EAAA,GAGC;AACD,QAAM,EAAE,cAAA,EAAA,IAAiB,EAAmB,GACtC,EAAE,eAAe,EAAA,IAAqB,EAAmB,GACzD,IAAmB,EAAiB,eAEpC,IAAkB,EAAK,kBACvB,IACJ,EAAa,YAAY,iBACrB,GAAiB,gBACjB,GAAiB,aAEjB,IAAU,EAA2B,GAAK,OAAO,GACjD,EAAE,UAAA,GAAU,UAAA,EAAA,IAAa,EAAsB,CAAO,GAItD,IAAO;AAAA,IACX,GAAG;AAAA,IACH,cAAc,EAAiB,EAAS,WAAA;AAAA,IACxC,kBAAkB,EAAiB,EAAS,eAAA;AAAA,EAC9C,GAKM,IAAW,GAAiB,oBAC5B,IAAA,CAAY,MACO,KAAU,QAAQ,MAAU,KAAK,SAAY,OAAO,CAAK;AAElF,SACE,gBAAA,EAAC,GAAD;AAAA,IACE,mBAAmB,GAAU;AAAA,IAC7B,qBAAqB,EAAS,IAAW,EAAS,mBAAA,CAAuC;AAAA,IACnF,MAAA;AAAA,IACN,MAAM,GAAU;AAAA,IAChB,gBAAgB,EAAS,aAAc,IAAW,EAAS,UAAA,IAAyB;AAAA,IACpF,gBACE,EAAS,iBACL,EAAS,IAAW,EAAS,cAAA,CAAkC,IAC/D;AAAA,IAEG,SAAA;AAAA,EACV,CAAA;AAEL,CAAC"}
+{"version":3,"file":"MakeTransferActionBlockLayer.es.js","names":[],"sources":["../../../../src/insights-v2/actionBlocks/MakeTransferActionBlock/MakeTransferActionBlockLayer.tsx"],"sourcesContent":["import { observer } from 'mobx-react-lite'\n\nimport { useGlobalCopyStore, useInsightsV2Store } from '../../../common'\n\nimport type { Beat } from '../../../core'\nimport type { SaveExtraBlockData } from '../../../core/types/InsightsInstanceSlotData'\n\nimport { MakeTransferActionBlock } from './MakeTransferActionBlock'\nimport { resolveMakeTransferVariant } from './layout'\n\n/**\n * Adapter that plugs MakeTransfer into the ActionBlock registry.\n *\n * The variants are content-only — ActionBlockLayer owns the surrounding Drawer\n * (open/close/title). This adapter derives the variant from the clicked CTA, the\n * copy from GlobalCopyStore, and passes the slot data through; each variant reads\n * the fields it needs.\n */\nexport const MakeTransferActionBlockLayer = observer(function MakeTransferActionBlockLayer({\n  beat,\n}: {\n  beat: Beat\n}) {\n  const { actionDrawer } = useInsightsV2Store()\n  const { insights_feed: insightsFeedCopy } = useGlobalCopyStore()\n\n  const payload = beat.insights_payload\n  const cta =\n    actionDrawer.trigger === 'secondaryCta' ? payload?.secondary_cta : payload?.primary_cta\n\n  return (\n    <MakeTransferActionBlock\n      copy={insightsFeedCopy.make_transfer}\n      slotData={payload?.instance_slot_data as SaveExtraBlockData | undefined}\n      variant={resolveMakeTransferVariant(cta?.variant)}\n    />\n  )\n})\n"],"mappings":";;;;;AAkBA,IAAa,IAA+B,EAAS,SAAsC,EACzF,MAAA,EAAA,GAGC;AACD,QAAM,EAAE,cAAA,EAAA,IAAiB,EAAmB,GACtC,EAAE,eAAe,EAAA,IAAqB,EAAmB,GAEzD,IAAU,EAAK,kBACf,IACJ,EAAa,YAAY,iBAAiB,GAAS,gBAAgB,GAAS;AAE9E,SACE,gBAAA,EAAC,GAAD;AAAA,IACE,MAAM,EAAiB;AAAA,IACvB,UAAU,GAAS;AAAA,IACnB,SAAS,EAA2B,GAAK,OAAO;AAAA,EACjD,CAAA;AAEL,CAAC"}

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

@@ -1 +1,3 @@
+export { MakeTransferActionBlockLayer } from './MakeTransferActionBlockLayer';
 export { MakeTransferActionBlock } from './MakeTransferActionBlock';
+export { getMakeTransferDrawerTitle, resolveMakeTransferVariant, variants, type MakeTransferVariant, } from './layout';

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