@mx-cartographer/experiences 9.3.8-alpha.al0 → 9.4.0

package/dist/insights-v2/blocks/ChartBlocks/StepChartBlock/variants/WithoutText.es.js

@@ -0,0 +1,81 @@
+import { getStepStyles as c } from "../utils.es.js";
+import x from "react";
+import t from "@mui/material/Stack";
+import { Text as h } from "@mxenabled/mxui";
+import { SavingsIcon as f } from "@mxenabled/mx-icons";
+import { jsx as r, jsxs as a } from "react/jsx-runtime";
+import { alpha as g } from "@mui/material/styles";
+import l from "@mui/material/Box";
+var m = 3, u = [
+  0,
+  1,
+  2,
+  3
+], j = ({ slotData: d }) => {
+  const { completed_steps: o, label_1: n } = d, i = o === m;
+  return /* @__PURE__ */ a(t, {
+    sx: {
+      border: "1px solid",
+      borderColor: "divider",
+      borderRadius: "8px",
+      gap: 8,
+      pb: 16,
+      pt: 12,
+      px: 16
+    },
+    children: [/* @__PURE__ */ r(t, { children: /* @__PURE__ */ r(h, {
+      bold: !0,
+      variant: "caption",
+      children: n
+    }) }), /* @__PURE__ */ a(l, {
+      sx: {
+        display: "grid",
+        placeItems: "center"
+      },
+      children: [/* @__PURE__ */ r(t, { sx: (e) => ({
+        alignItems: "center",
+        bgcolor: g(e.palette[i ? "success" : "primary"].main, 0.15),
+        borderTopLeftRadius: "26px",
+        borderBottomLeftRadius: "26px",
+        gridArea: "1 / 1",
+        height: 26,
+        justifySelf: "start",
+        ml: -8,
+        width: `${34 * o}%`
+      }) }), /* @__PURE__ */ r(t, {
+        sx: {
+          height: 36,
+          gridArea: "1 / 1"
+        },
+        children: /* @__PURE__ */ r(t, {
+          sx: {
+            alignItems: "center",
+            flexDirection: "row"
+          },
+          children: u.map((e) => {
+            const p = e < o;
+            return /* @__PURE__ */ a(x.Fragment, { children: [o === e ? /* @__PURE__ */ r(t, {
+              sx: {
+                alignItems: "center",
+                bgcolor: i ? "success.main" : "primary.main",
+                borderRadius: "99999px",
+                height: 36,
+                p: 8,
+                width: 36
+              },
+              children: /* @__PURE__ */ r(f, {
+                filled: !0,
+                sx: { color: "primary.contrastText" }
+              })
+            }) : /* @__PURE__ */ r(l, { sx: (s) => c(s, p, i).dot }), e !== m && /* @__PURE__ */ r(l, { sx: (s) => c(s, p, i).connector })] }, e);
+          })
+        })
+      })]
+    })]
+  });
+};
+export {
+  j as default
+};
+
+//# sourceMappingURL=WithoutText.es.js.map

package/dist/insights-v2/blocks/ChartBlocks/StepChartBlock/variants/WithoutText.es.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"WithoutText.es.js","names":[],"sources":["../../../../../../src/insights-v2/blocks/ChartBlocks/StepChartBlock/variants/WithoutText.tsx"],"sourcesContent":["import React from 'react'\n\nimport Box from '@mui/material/Box'\nimport Stack from '@mui/material/Stack'\nimport { alpha } from '@mui/material/styles'\n\nimport { Text } from '@mxenabled/mxui'\nimport { SavingsIcon } from '@mxenabled/mx-icons'\n\nimport type { StepChartBlockData } from '../../../../../core/types/InsightsInstanceSlotData'\n\nimport { getStepStyles } from '../utils'\n\nconst LAST_STEP = 3\nconst STEP_INDICES = [0, 1, 2, 3] as const\n\nconst WithoutText = ({ slotData }: { slotData: StepChartBlockData }) => {\n  const { completed_steps: completedSteps, label_1 } = slotData\n  const allCompleted = completedSteps === LAST_STEP\n\n  return (\n    <Stack\n      sx={{\n        border: '1px solid',\n        borderColor: 'divider',\n        borderRadius: '8px',\n        gap: 8,\n        pb: 16,\n        pt: 12,\n        px: 16,\n      }}\n    >\n      <Stack>\n        <Text bold={true} variant=\"caption\">\n          {label_1}\n        </Text>\n      </Stack>\n      <Box sx={{ display: 'grid', placeItems: 'center' }}>\n        <Stack\n          sx={(theme) => ({\n            alignItems: 'center',\n            bgcolor: alpha(theme.palette[allCompleted ? 'success' : 'primary'].main, 0.15),\n            borderTopLeftRadius: '26px',\n            borderBottomLeftRadius: '26px',\n            gridArea: '1 / 1',\n            height: 26,\n            justifySelf: 'start',\n            ml: -8,\n            width: `${34 * completedSteps}%`,\n          })}\n        />\n        <Stack sx={{ height: 36, gridArea: '1 / 1' }}>\n          <Stack sx={{ alignItems: 'center', flexDirection: 'row' }}>\n            {STEP_INDICES.map((index) => {\n              const completed = index < completedSteps\n\n              return (\n                <React.Fragment key={index}>\n                  {completedSteps === index ? (\n                    <Stack\n                      sx={{\n                        alignItems: 'center',\n                        bgcolor: allCompleted ? 'success.main' : 'primary.main',\n                        borderRadius: '99999px',\n                        height: 36,\n                        p: 8,\n                        width: 36,\n                      }}\n                    >\n                      <SavingsIcon filled={true} sx={{ color: 'primary.contrastText' }} />\n                    </Stack>\n                  ) : (\n                    <Box sx={(theme) => getStepStyles(theme, completed, allCompleted).dot} />\n                  )}\n                  {index !== LAST_STEP && (\n                    <Box sx={(theme) => getStepStyles(theme, completed, allCompleted).connector} />\n                  )}\n                </React.Fragment>\n              )\n            })}\n          </Stack>\n        </Stack>\n      </Box>\n    </Stack>\n  )\n}\n\nexport default WithoutText\n"],"mappings":";;;;;;;;AAaA,IAAM,IAAY,GACZ,IAAe;AAAA,EAAC;AAAA,EAAG;AAAA,EAAG;AAAA,EAAG;AAAC,GAE1B,IAAA,CAAe,EAAE,UAAA,EAAA,MAAiD;AACtE,QAAM,EAAE,iBAAiB,GAAgB,SAAA,EAAA,IAAY,GAC/C,IAAe,MAAmB;AAExC,SACE,gBAAA,EAAC,GAAD;AAAA,IACE,IAAI;AAAA,MACF,QAAQ;AAAA,MACR,aAAa;AAAA,MACb,cAAc;AAAA,MACd,KAAK;AAAA,MACL,IAAI;AAAA,MACJ,IAAI;AAAA,MACJ,IAAI;AAAA,IACN;AAAA,IATF,UAAA,CAWE,gBAAA,EAAC,GAAD,EAAA,UACE,gBAAA,EAAC,GAAD;AAAA,MAAM,MAAM;AAAA,MAAM,SAAQ;AAAA,MACvB,UAAA;AAAA,IACG,CAAA,EACD,CAAA,GACP,gBAAA,EAAC,GAAD;AAAA,MAAK,IAAI;AAAA,QAAE,SAAS;AAAA,QAAQ,YAAY;AAAA,MAAS;AAAA,MAAjD,UAAA,CACE,gBAAA,EAAC,GAAD,EACE,IAAA,CAAK,OAAW;AAAA,QACd,YAAY;AAAA,QACZ,SAAS,EAAM,EAAM,QAAQ,IAAe,YAAY,SAAA,EAAW,MAAM,IAAI;AAAA,QAC7E,qBAAqB;AAAA,QACrB,wBAAwB;AAAA,QACxB,UAAU;AAAA,QACV,QAAQ;AAAA,QACR,aAAa;AAAA,QACb,IAAI;AAAA,QACJ,OAAO,GAAG,KAAK,CAAA;AAAA,MACjB,GACD,CAAA,GACD,gBAAA,EAAC,GAAD;AAAA,QAAO,IAAI;AAAA,UAAE,QAAQ;AAAA,UAAI,UAAU;AAAA,QAAQ;AAAA,QACzC,UAAA,gBAAA,EAAC,GAAD;AAAA,UAAO,IAAI;AAAA,YAAE,YAAY;AAAA,YAAU,eAAe;AAAA,UAAM;AAAA,UACrD,UAAA,EAAa,IAAA,CAAK,MAAU;AAC3B,kBAAM,IAAY,IAAQ;AAE1B,mBACE,gBAAA,EAAC,EAAM,UAAP,EAAA,UAAA,CACG,MAAmB,IAClB,gBAAA,EAAC,GAAD;AAAA,cACE,IAAI;AAAA,gBACF,YAAY;AAAA,gBACZ,SAAS,IAAe,iBAAiB;AAAA,gBACzC,cAAc;AAAA,gBACd,QAAQ;AAAA,gBACR,GAAG;AAAA,gBACH,OAAO;AAAA,cACT;AAAA,cAEA,UAAA,gBAAA,EAAC,GAAD;AAAA,gBAAa,QAAQ;AAAA,gBAAM,IAAI,EAAE,OAAO,uBAAuB;AAAA,cAAI,CAAA;AAAA,YAC9D,CAAA,IAEP,gBAAA,EAAC,GAAD,EAAK,IAAA,CAAK,MAAU,EAAc,GAAO,GAAW,CAAY,EAAE,IAAM,CAAA,GAEzE,MAAU,KACT,gBAAA,EAAC,GAAD,EAAK,IAAA,CAAK,MAAU,EAAc,GAAO,GAAW,CAAY,EAAE,UAAY,CAAA,CAElE,EAAA,GApBK,CAoBL;AAAA,UAEpB,CAAC;AAAA,QACI,CAAA;AAAA,MACF,CAAA,CACJ;AAAA,IACA,CAAA,CAAA;AAAA;AAEX"}

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

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

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

@@ -0,0 +1,4 @@
+import { AccountBlockData } from '../../../../core/types/InsightsInstanceSlotData';
+import { BlockProps } from '../../types';
+declare const AccountBlock: ({ payload }: BlockProps<AccountBlockData>) => import("react/jsx-runtime").JSX.Element;
+export default AccountBlock;

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

@@ -0,0 +1,200 @@
+import { formatCurrency as b } from "../../../../core/utils/NumberFormatting.es.js";
+import { useContainerDimensions as D } from "../../../hooks/useContainerDimensions.es.js";
+import { DepositLogo as z } from "../../../components/ComponentBlocks/DepositLogo.es.js";
+import { Confetti as L } from "../../../components/shared/Confetti.es.js";
+import { ReactComponent as $ } from "../../../components/shared/images/PaidOffCard.es.js";
+import { ReactComponent as F } from "../../../components/shared/images/SavingsAccountDeposit.es.js";
+import { HeaderComponent as G } from "./HeaderComponent.es.js";
+import { getLayoutConfig as N } from "./layout.es.js";
+import { IconComponent as O } from "./IconComponent.es.js";
+import { useRef as P } from "react";
+import t from "@mui/material/Stack";
+import { Text as a } from "@mxenabled/mxui";
+import { Icon as j } from "@mxenabled/mx-icons";
+import { jsx as o, jsxs as r } from "react/jsx-runtime";
+import { useTheme as B } from "@mui/material/styles";
+import i from "@mui/material/Box";
+var E = {
+  UnifiedDeposit: "payments",
+  UnifiedDepositEmergencyFund: "payments",
+  MonthlyObligationsStatusOnTrack: "monetization_on"
+}, to = ({ payload: y }) => {
+  const w = B(), c = P(null), { height: d, width: l } = D(c), { instance_slot: v, instance_slot_data: m } = y, { variant: s } = v, { amount: p, sub_text: R, header_text: n, institution_guid: h, institution_name: u, icon_name: _, label: C, merchant_guid: T, merchant_name: f, category_guid: k } = m, e = N(w)[s];
+  if (e?.isConfetti) {
+    const I = {
+      paidOffCard: /* @__PURE__ */ o(i, {
+        sx: {
+          flexShrink: 0,
+          height: 32,
+          position: "relative",
+          width: 44
+        },
+        children: /* @__PURE__ */ o($, {
+          "aria-hidden": !0,
+          role: "presentation",
+          style: {
+            left: 0,
+            position: "absolute",
+            top: -14
+          }
+        })
+      }),
+      savings: /* @__PURE__ */ o(F, {
+        "aria-hidden": !0,
+        height: 55,
+        role: "presentation",
+        width: 55
+      }),
+      logo: /* @__PURE__ */ o(i, {
+        sx: {
+          borderRadius: "4px",
+          flexShrink: 0,
+          height: 48,
+          overflow: "hidden",
+          width: 48
+        },
+        children: /* @__PURE__ */ o(z, {
+          categoryGuid: k,
+          iconName: E[s] ?? "payments",
+          institutionGuid: h,
+          institutionName: u,
+          merchantGuid: T,
+          merchantName: f
+        })
+      })
+    }[e.graphic ?? "logo"], g = e.secondarySource === "merchant" ? f ?? u : C, x = g ? /* @__PURE__ */ o(a, {
+      color: e.secondaryColor,
+      variant: e.secondaryVariant,
+      children: g
+    }) : null, S = /* @__PURE__ */ o(a, {
+      bold: !0,
+      color: "success.dark",
+      variant: e.amountVariant,
+      children: `${e.amountPrefix ?? ""}${b(p, "0,0.00")}`
+    });
+    return /* @__PURE__ */ r(i, {
+      ref: c,
+      sx: {
+        backgroundImage: e.gradient,
+        bgcolor: "background.paper",
+        overflow: "hidden",
+        position: "relative",
+        p: 16,
+        width: "100%"
+      },
+      children: [/* @__PURE__ */ o(i, {
+        sx: {
+          inset: 0,
+          pointerEvents: "none",
+          position: "absolute",
+          zIndex: 1
+        },
+        children: /* @__PURE__ */ o(L, {
+          height: d,
+          shouldRun: d > 0 && l > 0,
+          width: l
+        })
+      }), /* @__PURE__ */ r(t, {
+        sx: {
+          borderRadius: "8px",
+          overflow: "hidden",
+          position: "relative",
+          width: "100%",
+          zIndex: 2
+        },
+        children: [e.categoryStrip && n && /* @__PURE__ */ o(i, {
+          sx: {
+            bgcolor: "success.main",
+            px: 12,
+            py: 4
+          },
+          children: /* @__PURE__ */ o(a, {
+            color: "success.contrastText",
+            variant: "caption",
+            children: n
+          })
+        }), /* @__PURE__ */ r(t, {
+          sx: {
+            alignItems: "center",
+            bgcolor: "success.lighter",
+            border: "1px solid",
+            borderColor: "success.main",
+            borderRadius: "8px",
+            ...e.categoryStrip && {
+              borderTopLeftRadius: 0,
+              borderTopRightRadius: 0,
+              borderTop: 0
+            },
+            flexDirection: "row",
+            ...e.rowSx
+          },
+          children: [/* @__PURE__ */ o(i, {
+            sx: {
+              display: "flex",
+              flexShrink: 0
+            },
+            children: I
+          }), /* @__PURE__ */ r(t, {
+            sx: {
+              flex: "1 0 0",
+              minWidth: 0
+            },
+            children: [
+              e.secondaryPosition === "above" && x,
+              S,
+              e.secondaryPosition === "below" && x
+            ]
+          })]
+        })]
+      })]
+    });
+  }
+  return /* @__PURE__ */ r(t, {
+    sx: {
+      p: 16,
+      ...e
+    },
+    children: [n && /* @__PURE__ */ o(G, { headerText: n }), /* @__PURE__ */ r(t, {
+      sx: {
+        alignItems: "center",
+        bgcolor: "background.paper",
+        borderRadius: "8px",
+        ...n && {
+          borderTopLeftRadius: "0",
+          borderTopRightRadius: "0"
+        },
+        gap: 16,
+        p: 16,
+        width: "100%",
+        ...(h || _) && { flexDirection: "row" }
+      },
+      children: [/* @__PURE__ */ o(O, {
+        blockData: m,
+        variant: s
+      }), /* @__PURE__ */ r(t, { children: [/* @__PURE__ */ o(a, {
+        variant: "h1",
+        children: b(p, "0,0.00")
+      }), /* @__PURE__ */ r(t, {
+        sx: {
+          gap: 8,
+          flexDirection: "row",
+          alignItems: "center"
+        },
+        children: [e?.sub_logo && /* @__PURE__ */ o(j, {
+          color: "warning",
+          fill: !0,
+          name: e.sub_logo,
+          size: 20
+        }), /* @__PURE__ */ o(a, {
+          variant: "body2",
+          children: R
+        })]
+      })] })]
+    })]
+  });
+};
+export {
+  to as default
+};
+
+//# sourceMappingURL=AccountBlock.es.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"AccountBlock.es.js","names":[],"sources":["../../../../../src/insights-v2/blocks/ComponentBlocks/AccountBlock/AccountBlock.tsx"],"sourcesContent":["import Box from '@mui/material/Box'\nimport Stack from '@mui/material/Stack'\nimport { useRef } from 'react'\nimport { useTheme } from '@mui/material/styles'\n\nimport { Text } from '@mxenabled/mxui'\nimport { Icon } from '@mxenabled/mx-icons'\n\nimport { AccountBlockData } from '../../../../core/types/InsightsInstanceSlotData'\nimport { formatCurrency } from '../../../../core/utils/NumberFormatting'\nimport { DepositLogo } from '../../../components/ComponentBlocks/DepositLogo'\nimport { Confetti } from '../../../components/shared/Confetti'\nimport { ReactComponent as PaidOffCardGraphic } from '../../../components/shared/images/PaidOffCard.svg'\nimport { ReactComponent as SavingsGraphic } from '../../../components/shared/images/SavingsAccountDeposit.svg'\nimport { useContainerDimensions } from '../../../hooks/useContainerDimensions'\n\nimport type { BlockProps } from '../../types'\n\nimport { HeaderComponent } from './HeaderComponent'\nimport { IconComponent } from './IconComponent'\nimport { getLayoutConfig } from './layout'\n\n/** Default generic-tile icon per deposit variant, used when no merchant/institution logo. */\nconst depositIcons: Record<string, string> = {\n  UnifiedDeposit: 'payments',\n  UnifiedDepositEmergencyFund: 'payments',\n  MonthlyObligationsStatusOnTrack: 'monetization_on',\n}\n\nconst AccountBlock = ({ payload }: BlockProps<AccountBlockData>) => {\n  const theme = useTheme()\n  const containerRef = useRef<HTMLDivElement>(null)\n  const { height, width } = useContainerDimensions(containerRef)\n  const { instance_slot, instance_slot_data } = payload\n  const { variant } = instance_slot\n  const {\n    amount,\n    sub_text,\n    header_text,\n    institution_guid,\n    institution_name,\n    icon_name,\n    label,\n    merchant_guid,\n    merchant_name,\n    category_guid,\n  } = instance_slot_data\n  const layoutConfig = getLayoutConfig(theme)[variant as keyof ReturnType<typeof getLayoutConfig>]\n\n  // Confetti-backed celebration variants (deposits, payoff, savings) — a success-tinted card\n  // on a gradient + confetti wash. Everything variant-specific is flat on `layoutConfig`.\n  if (layoutConfig?.isConfetti) {\n    const graphics: Record<string, React.ReactNode> = {\n      paidOffCard: (\n        // SVG is 58x46 but the card sits at (0,14) with the check badge overflowing top-right.\n        // Box it to the card's real 44x32 footprint and shift the SVG up so it aligns with the text.\n        <Box sx={{ flexShrink: 0, height: 32, position: 'relative', width: 44 }}>\n          <PaidOffCardGraphic\n            aria-hidden={true}\n            role=\"presentation\"\n            style={{ left: 0, position: 'absolute', top: -14 }}\n          />\n        </Box>\n      ),\n      savings: <SavingsGraphic aria-hidden={true} height={55} role=\"presentation\" width={55} />,\n      logo: (\n        <Box\n          sx={{\n            borderRadius: '4px',\n            flexShrink: 0,\n            height: 48,\n            overflow: 'hidden',\n            width: 48,\n          }}\n        >\n          <DepositLogo\n            categoryGuid={category_guid}\n            iconName={depositIcons[variant as keyof typeof depositIcons] ?? 'payments'}\n            institutionGuid={institution_guid}\n            institutionName={institution_name}\n            merchantGuid={merchant_guid}\n            merchantName={merchant_name}\n          />\n        </Box>\n      ),\n    }\n    const graphic = graphics[layoutConfig.graphic ?? 'logo']\n\n    // Deposit cards show the payer name — a merchant when we have one, otherwise the institution.\n    const secondaryText =\n      layoutConfig.secondarySource === 'merchant' ? (merchant_name ?? institution_name) : label\n    const secondary = secondaryText ? (\n      <Text color={layoutConfig.secondaryColor} variant={layoutConfig.secondaryVariant}>\n        {secondaryText}\n      </Text>\n    ) : null\n    const amountText = (\n      <Text bold={true} color=\"success.dark\" variant={layoutConfig.amountVariant}>\n        {`${layoutConfig.amountPrefix ?? ''}${formatCurrency(amount, '0,0.00')}`}\n      </Text>\n    )\n\n    return (\n      <Box\n        ref={containerRef}\n        sx={{\n          backgroundImage: layoutConfig.gradient,\n          bgcolor: 'background.paper',\n          overflow: 'hidden',\n          position: 'relative',\n          p: 16,\n          width: '100%',\n        }}\n      >\n        <Box\n          sx={{\n            inset: 0,\n            pointerEvents: 'none',\n            position: 'absolute',\n            zIndex: 1,\n          }}\n        >\n          <Confetti height={height} shouldRun={height > 0 && width > 0} width={width} />\n        </Box>\n\n        <Stack\n          sx={{\n            borderRadius: '8px',\n            overflow: 'hidden',\n            position: 'relative',\n            width: '100%',\n            zIndex: 2,\n          }}\n        >\n          {layoutConfig.categoryStrip && header_text && (\n            <Box sx={{ bgcolor: 'success.main', px: 12, py: 4 }}>\n              <Text color=\"success.contrastText\" variant=\"caption\">\n                {header_text}\n              </Text>\n            </Box>\n          )}\n\n          <Stack\n            sx={{\n              alignItems: 'center',\n              bgcolor: 'success.lighter',\n              border: '1px solid',\n              borderColor: 'success.main',\n              borderRadius: '8px',\n              // With a strip above, the body's top corners tuck under it (no double border line).\n              ...(layoutConfig.categoryStrip && {\n                borderTopLeftRadius: 0,\n                borderTopRightRadius: 0,\n                borderTop: 0,\n              }),\n              flexDirection: 'row',\n              ...layoutConfig.rowSx,\n            }}\n          >\n            <Box sx={{ display: 'flex', flexShrink: 0 }}>{graphic}</Box>\n\n            <Stack sx={{ flex: '1 0 0', minWidth: 0 }}>\n              {layoutConfig.secondaryPosition === 'above' && secondary}\n              {amountText}\n              {layoutConfig.secondaryPosition === 'below' && secondary}\n            </Stack>\n          </Stack>\n        </Stack>\n      </Box>\n    )\n  }\n\n  return (\n    <Stack\n      sx={{\n        p: 16,\n        ...layoutConfig,\n      }}\n    >\n      {header_text && <HeaderComponent headerText={header_text} />}\n      <Stack\n        sx={{\n          alignItems: 'center',\n          bgcolor: 'background.paper',\n          borderRadius: '8px',\n          ...(header_text && {\n            borderTopLeftRadius: '0',\n            borderTopRightRadius: '0',\n          }),\n          gap: 16,\n          p: 16,\n          width: '100%',\n          ...((institution_guid || icon_name) && {\n            flexDirection: 'row',\n          }),\n        }}\n      >\n        <IconComponent blockData={instance_slot_data} variant={variant} />\n\n        <Stack>\n          <Text variant=\"h1\">{formatCurrency(amount, '0,0.00')}</Text>\n          <Stack sx={{ gap: 8, flexDirection: 'row', alignItems: 'center' }}>\n            {layoutConfig?.sub_logo && (\n              <Icon color=\"warning\" fill={true} name={layoutConfig.sub_logo} size={20} />\n            )}\n            <Text variant=\"body2\">{sub_text}</Text>\n          </Stack>\n        </Stack>\n      </Stack>\n    </Stack>\n  )\n}\n\nexport default AccountBlock\n"],"mappings":"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"}

package/dist/insights-v2/blocks/ComponentBlocks/AccountBlock/HeaderComponent.d.ts

@@ -0,0 +1,5 @@
+interface HeaderComponentProps {
+    headerText?: string;
+}
+export declare const HeaderComponent: ({ headerText }: HeaderComponentProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/insights-v2/blocks/ComponentBlocks/AccountBlock/HeaderComponent.es.js

@@ -0,0 +1,26 @@
+import t from "@mui/material/Stack";
+import { Text as e } from "@mxenabled/mxui";
+import { jsx as o } from "react/jsx-runtime";
+var a = ({ headerText: r }) => /* @__PURE__ */ o(t, {
+  sx: {
+    bgcolor: "background.default",
+    borderBottomColor: "divider",
+    borderBottomStyle: "solid",
+    borderBottomWidth: "1px",
+    borderTopLeftRadius: "8px",
+    borderTopRightRadius: "8px",
+    px: 16,
+    py: 8,
+    width: "100%"
+  },
+  children: /* @__PURE__ */ o(e, {
+    sx: { color: "text.secondary" },
+    variant: "caption",
+    children: r
+  })
+});
+export {
+  a as HeaderComponent
+};
+
+//# sourceMappingURL=HeaderComponent.es.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"HeaderComponent.es.js","names":[],"sources":["../../../../../src/insights-v2/blocks/ComponentBlocks/AccountBlock/HeaderComponent.tsx"],"sourcesContent":["import Stack from '@mui/material/Stack'\nimport { Text } from '@mxenabled/mxui'\n\ninterface HeaderComponentProps {\n  headerText?: string\n}\n\nexport const HeaderComponent = ({ headerText }: HeaderComponentProps) => {\n  return (\n    <Stack\n      sx={{\n        bgcolor: 'background.default',\n        borderBottomColor: 'divider',\n        borderBottomStyle: 'solid',\n        borderBottomWidth: '1px',\n        borderTopLeftRadius: '8px',\n        borderTopRightRadius: '8px',\n        px: 16,\n        py: 8,\n        width: '100%',\n      }}\n    >\n      <Text sx={{ color: 'text.secondary' }} variant=\"caption\">\n        {headerText}\n      </Text>\n    </Stack>\n  )\n}\n"],"mappings":";;;AAOA,IAAa,IAAA,CAAmB,EAAE,YAAA,EAAA,MAE9B,gBAAA,EAAC,GAAD;AAAA,EACE,IAAI;AAAA,IACF,SAAS;AAAA,IACT,mBAAmB;AAAA,IACnB,mBAAmB;AAAA,IACnB,mBAAmB;AAAA,IACnB,qBAAqB;AAAA,IACrB,sBAAsB;AAAA,IACtB,IAAI;AAAA,IACJ,IAAI;AAAA,IACJ,OAAO;AAAA,EACT;AAAA,EAEA,UAAA,gBAAA,EAAC,GAAD;AAAA,IAAM,IAAI,EAAE,OAAO,iBAAiB;AAAA,IAAG,SAAQ;AAAA,IAC5C,UAAA;AAAA,EACG,CAAA;AACD,CAAA"}

package/dist/insights-v2/blocks/ComponentBlocks/AccountBlock/IconComponent.d.ts

@@ -0,0 +1,7 @@
+import { InsightsInstanceSlotData } from '../../../../core/types/InsightsInstanceSlotData';
+interface IconComponentProps {
+    blockData: InsightsInstanceSlotData;
+    variant: string | null;
+}
+export declare const IconComponent: ({ blockData, variant }: IconComponentProps) => import("react/jsx-runtime").JSX.Element | null;
+export {};

package/dist/insights-v2/blocks/ComponentBlocks/AccountBlock/IconComponent.es.js

@@ -0,0 +1,64 @@
+import l from "../../../../common/components/IconBacking.es.js";
+import { getLayoutConfig as m } from "./layout.es.js";
+import { InstitutionLogo as c } from "@mxenabled/mxui";
+import { Icon as t } from "@mxenabled/mx-icons";
+import { jsx as r, jsxs as u } from "react/jsx-runtime";
+import { useTheme as d } from "@mui/material/styles";
+import { Stack as e } from "@mui/material";
+var I = ({ blockData: o, variant: n }) => {
+  const s = d(), i = m(s)[n];
+  return o.institution_guid ? /* @__PURE__ */ u(e, {
+    sx: {
+      alignItems: "center",
+      flexDirection: "row",
+      position: "relative"
+    },
+    children: [/* @__PURE__ */ r(c, {
+      alt: `${o.institution_name}`,
+      institutionGuid: `${o.institution_guid}`,
+      size: 48
+    }), /* @__PURE__ */ r(l, {
+      size: 20,
+      sx: {
+        position: "absolute",
+        right: -8,
+        top: -8
+      },
+      children: /* @__PURE__ */ r(t, {
+        color: "error",
+        fill: !0,
+        name: "error",
+        size: 20,
+        sx: {
+          gridColumn: 1,
+          gridRow: 1,
+          zIndex: 2
+        }
+      })
+    })]
+  }) : o.icon_name ? /* @__PURE__ */ r(e, {
+    sx: {
+      alignItems: "center",
+      bgcolor: i.logo_bGcolor,
+      borderRadius: "6px",
+      height: 48,
+      justifyContent: "center",
+      width: 48,
+      ...i.logo_border_color && {
+        borderColor: i.logo_border_color,
+        borderStyle: "solid",
+        borderWidth: 1.5
+      }
+    },
+    children: /* @__PURE__ */ r(t, {
+      name: o.icon_name,
+      size: 24,
+      sx: { color: i.logo_color }
+    })
+  }) : null;
+};
+export {
+  I as IconComponent
+};
+
+//# sourceMappingURL=IconComponent.es.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"IconComponent.es.js","names":[],"sources":["../../../../../src/insights-v2/blocks/ComponentBlocks/AccountBlock/IconComponent.tsx"],"sourcesContent":["import { Stack } from '@mui/material'\nimport { Icon } from '@mxenabled/mx-icons'\nimport { InstitutionLogo } from '@mxenabled/mxui'\nimport { IconBacking } from '../../../../common'\nimport { getLayoutConfig } from './layout'\nimport { useTheme } from '@mui/material/styles'\nimport type { InsightsInstanceSlotData } from '../../../../core/types/InsightsInstanceSlotData'\n\ninterface IconComponentProps {\n  blockData: InsightsInstanceSlotData\n  variant: string | null\n}\n\nexport const IconComponent = ({ blockData, variant }: IconComponentProps) => {\n  const theme = useTheme()\n  const layoutConfig = getLayoutConfig(theme)[variant as keyof ReturnType<typeof getLayoutConfig>]\n\n  if (blockData.institution_guid) {\n    return (\n      <Stack sx={{ alignItems: 'center', flexDirection: 'row', position: 'relative' }}>\n        <InstitutionLogo\n          alt={`${blockData.institution_name}`}\n          institutionGuid={`${blockData.institution_guid}`}\n          size={48}\n        />\n        <IconBacking size={20} sx={{ position: 'absolute', right: -8, top: -8 }}>\n          <Icon\n            color=\"error\"\n            fill={true}\n            name=\"error\"\n            size={20}\n            sx={{ gridColumn: 1, gridRow: 1, zIndex: 2 }}\n          />\n        </IconBacking>\n      </Stack>\n    )\n  }\n\n  if (blockData.icon_name) {\n    return (\n      <Stack\n        sx={{\n          alignItems: 'center',\n          bgcolor: layoutConfig.logo_bGcolor,\n          borderRadius: '6px',\n          height: 48,\n          justifyContent: 'center',\n          width: 48,\n          ...(layoutConfig.logo_border_color && {\n            borderColor: layoutConfig.logo_border_color,\n            borderStyle: 'solid',\n            borderWidth: 1.5,\n          }),\n        }}\n      >\n        <Icon\n          name={blockData.icon_name}\n          size={24}\n          sx={{\n            color: layoutConfig.logo_color,\n          }}\n        />\n      </Stack>\n    )\n  }\n\n  return null\n}\n"],"mappings":";;;;;;;AAaA,IAAa,IAAA,CAAiB,EAAE,WAAA,GAAW,SAAA,EAAA,MAAkC;AAC3E,QAAM,IAAQ,EAAS,GACjB,IAAe,EAAgB,CAAK,EAAE,CAAA;AAE5C,SAAI,EAAU,mBAEV,gBAAA,EAAC,GAAD;AAAA,IAAO,IAAI;AAAA,MAAE,YAAY;AAAA,MAAU,eAAe;AAAA,MAAO,UAAU;AAAA,IAAW;AAAA,IAA9E,UAAA,CACE,gBAAA,EAAC,GAAD;AAAA,MACE,KAAK,GAAG,EAAU,gBAAA;AAAA,MAClB,iBAAiB,GAAG,EAAU,gBAAA;AAAA,MAC9B,MAAM;AAAA,IACP,CAAA,GACD,gBAAA,EAAC,GAAD;AAAA,MAAa,MAAM;AAAA,MAAI,IAAI;AAAA,QAAE,UAAU;AAAA,QAAY,OAAO;AAAA,QAAI,KAAK;AAAA,MAAG;AAAA,MACpE,UAAA,gBAAA,EAAC,GAAD;AAAA,QACE,OAAM;AAAA,QACN,MAAM;AAAA,QACN,MAAK;AAAA,QACL,MAAM;AAAA,QACN,IAAI;AAAA,UAAE,YAAY;AAAA,UAAG,SAAS;AAAA,UAAG,QAAQ;AAAA,QAAE;AAAA,MAC5C,CAAA;AAAA,IACU,CAAA,CACR;AAAA,OAIP,EAAU,YAEV,gBAAA,EAAC,GAAD;AAAA,IACE,IAAI;AAAA,MACF,YAAY;AAAA,MACZ,SAAS,EAAa;AAAA,MACtB,cAAc;AAAA,MACd,QAAQ;AAAA,MACR,gBAAgB;AAAA,MAChB,OAAO;AAAA,MACP,GAAI,EAAa,qBAAqB;AAAA,QACpC,aAAa,EAAa;AAAA,QAC1B,aAAa;AAAA,QACb,aAAa;AAAA,MACf;AAAA,IACF;AAAA,IAEA,UAAA,gBAAA,EAAC,GAAD;AAAA,MACE,MAAM,EAAU;AAAA,MAChB,MAAM;AAAA,MACN,IAAI,EACF,OAAO,EAAa,WACtB;AAAA,IACD,CAAA;AAAA,EACI,CAAA,IAIJ;AACT"}

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

@@ -0,0 +1 @@
+export { default as AccountBlock } from './AccountBlock';

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

@@ -0,0 +1,32 @@
+import { SxProps, Theme } from '@mui/material/styles';
+export interface BlockLayoutConfig {
+    background?: string;
+    logo_color?: string;
+    logo_bGcolor?: string;
+    logo_border_color?: string;
+    /** mx-icons glyph shown before `sub_text` (e.g. a warning icon on TransparentOverdraft). */
+    sub_logo?: string;
+    /** When true, AccountBlock renders the confetti-backed celebration card using the fields below. */
+    isConfetti?: boolean;
+    /** Gradient wash layered over `background.paper` for the confetti card. */
+    gradient?: string;
+    /** Which illustration sits left of the text. `logo` is the data-driven merchant/institution logo. */
+    graphic?: 'paidOffCard' | 'savings' | 'logo';
+    /** Amount typography variant — `h2` for milestones, `h3` for deposits. */
+    amountVariant?: 'h2' | 'h3';
+    /** Prefix prepended to the formatted amount, e.g. `+` for deposits. */
+    amountPrefix?: string;
+    /** Render the colored category strip (`header_text`) at the top of the card. */
+    categoryStrip?: boolean;
+    /** Layout overrides for the graphic+text row (padding, gap). */
+    rowSx?: SxProps;
+    /** Which payload field feeds the secondary line beside the amount. */
+    secondarySource?: 'merchant' | 'label';
+    /** Whether the secondary line sits above or below the amount. */
+    secondaryPosition?: 'above' | 'below';
+    /** Typography variant for the secondary line. */
+    secondaryVariant?: 'body2' | 'caption';
+    /** Theme color path for the secondary line. */
+    secondaryColor?: string;
+}
+export declare const getLayoutConfig: (theme: Theme) => Record<string, BlockLayoutConfig>;

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

@@ -0,0 +1,100 @@
+import { CELEBRATION_GRADIENT as a, WARM_LIME_ACCENT_GRADIENT as r } from "../../../components/celebrationGradients.es.js";
+import { alpha as e } from "@mui/material/styles";
+var i = (o) => ({
+  TransparentOverdraft: {
+    background: o.palette.warning.light,
+    sub_logo: "error"
+  },
+  LowAccountBalance: { background: "linear-gradient(256.82deg, rgba(255, 47, 40, 0.2) 1.86%, rgba(255, 0, 72, 0.2) 101.54%)" },
+  MonthlyObligationsStatusOffTrack: {
+    logo_color: "background.paper",
+    logo_bGcolor: "error.main",
+    background: "linear-gradient(256.82deg, rgba(255, 47, 40, 0.2) 1.86%, rgba(255, 0, 72, 0.2) 101.54%)"
+  },
+  MonthlyCreditCardInterestSummary: {
+    logo_color: "text.primary",
+    logo_bGcolor: e(o.palette.categories?.feesCharges || "", 0.25),
+    logo_border_color: "categories.feesCharges",
+    background: "linear-gradient(256.82deg, rgba(227, 39, 39, 0.2) 1.86%, rgba(255, 123, 0, 0.2) 101.54%)"
+  },
+  UnifiedDeposit: {
+    isConfetti: !0,
+    gradient: r,
+    graphic: "logo",
+    amountVariant: "h3",
+    amountPrefix: "+",
+    categoryStrip: !0,
+    rowSx: {
+      gap: 12,
+      p: 12
+    },
+    secondarySource: "merchant",
+    secondaryPosition: "below",
+    secondaryVariant: "body2",
+    secondaryColor: "text.primary"
+  },
+  UnifiedDepositEmergencyFund: {
+    isConfetti: !0,
+    gradient: r,
+    graphic: "logo",
+    amountVariant: "h3",
+    amountPrefix: "+",
+    categoryStrip: !0,
+    rowSx: {
+      gap: 12,
+      p: 12
+    },
+    secondarySource: "merchant",
+    secondaryPosition: "below",
+    secondaryVariant: "body2",
+    secondaryColor: "text.primary"
+  },
+  MonthlyObligationsStatusOnTrack: {
+    isConfetti: !0,
+    gradient: r,
+    graphic: "logo",
+    amountVariant: "h2",
+    rowSx: {
+      gap: 16,
+      p: 16
+    },
+    secondarySource: "label",
+    secondaryPosition: "below",
+    secondaryVariant: "caption",
+    secondaryColor: "text.secondary"
+  },
+  CelebrateCreditCardPayoff: {
+    isConfetti: !0,
+    gradient: a,
+    graphic: "paidOffCard",
+    amountVariant: "h2",
+    rowSx: {
+      gap: 24,
+      px: 24,
+      py: 16
+    },
+    secondarySource: "label",
+    secondaryPosition: "below",
+    secondaryVariant: "caption",
+    secondaryColor: "text.secondary"
+  },
+  SavingsAccountDeposit: {
+    isConfetti: !0,
+    gradient: a,
+    graphic: "savings",
+    amountVariant: "h2",
+    rowSx: {
+      gap: 16,
+      p: 16
+    },
+    secondarySource: "label",
+    secondaryPosition: "above",
+    secondaryVariant: "body2",
+    secondaryColor: "text.primary"
+  }
+});
+export {
+  i as getLayoutConfig
+};
+
+//# sourceMappingURL=layout.es.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"layout.es.js","names":[],"sources":["../../../../../src/insights-v2/blocks/ComponentBlocks/AccountBlock/layout.ts"],"sourcesContent":["import { alpha, type SxProps, type Theme } from '@mui/material/styles'\n\nimport {\n  CELEBRATION_GRADIENT,\n  WARM_LIME_ACCENT_GRADIENT,\n} from '../../../components/celebrationGradients'\n\nexport interface BlockLayoutConfig {\n  background?: string\n  logo_color?: string\n  logo_bGcolor?: string\n  logo_border_color?: string\n  /** mx-icons glyph shown before `sub_text` (e.g. a warning icon on TransparentOverdraft). */\n  sub_logo?: string\n  /** When true, AccountBlock renders the confetti-backed celebration card using the fields below. */\n  isConfetti?: boolean\n  /** Gradient wash layered over `background.paper` for the confetti card. */\n  gradient?: string\n  /** Which illustration sits left of the text. `logo` is the data-driven merchant/institution logo. */\n  graphic?: 'paidOffCard' | 'savings' | 'logo'\n  /** Amount typography variant — `h2` for milestones, `h3` for deposits. */\n  amountVariant?: 'h2' | 'h3'\n  /** Prefix prepended to the formatted amount, e.g. `+` for deposits. */\n  amountPrefix?: string\n  /** Render the colored category strip (`header_text`) at the top of the card. */\n  categoryStrip?: boolean\n  /** Layout overrides for the graphic+text row (padding, gap). */\n  rowSx?: SxProps\n  /** Which payload field feeds the secondary line beside the amount. */\n  secondarySource?: 'merchant' | 'label'\n  /** Whether the secondary line sits above or below the amount. */\n  secondaryPosition?: 'above' | 'below'\n  /** Typography variant for the secondary line. */\n  secondaryVariant?: 'body2' | 'caption'\n  /** Theme color path for the secondary line. */\n  secondaryColor?: string\n}\n\nexport const getLayoutConfig = (theme: Theme): Record<string, BlockLayoutConfig> => {\n  return {\n    TransparentOverdraft: {\n      background: theme.palette.warning.light,\n      sub_logo: 'error',\n    },\n    LowAccountBalance: {\n      background:\n        'linear-gradient(256.82deg, rgba(255, 47, 40, 0.2) 1.86%, rgba(255, 0, 72, 0.2) 101.54%)',\n    },\n    MonthlyObligationsStatusOffTrack: {\n      logo_color: 'background.paper',\n      logo_bGcolor: 'error.main',\n      background:\n        'linear-gradient(256.82deg, rgba(255, 47, 40, 0.2) 1.86%, rgba(255, 0, 72, 0.2) 101.54%)',\n    },\n    MonthlyCreditCardInterestSummary: {\n      logo_color: 'text.primary',\n      logo_bGcolor: alpha(theme.palette.categories?.feesCharges || '', 0.25),\n      logo_border_color: 'categories.feesCharges',\n      background:\n        'linear-gradient(256.82deg, rgba(227, 39, 39, 0.2) 1.86%, rgba(255, 123, 0, 0.2) 101.54%)',\n    },\n    UnifiedDeposit: {\n      isConfetti: true,\n      gradient: WARM_LIME_ACCENT_GRADIENT,\n      graphic: 'logo',\n      amountVariant: 'h3',\n      amountPrefix: '+',\n      categoryStrip: true,\n      rowSx: { gap: 12, p: 12 },\n      secondarySource: 'merchant',\n      secondaryPosition: 'below',\n      secondaryVariant: 'body2',\n      secondaryColor: 'text.primary',\n    },\n    UnifiedDepositEmergencyFund: {\n      isConfetti: true,\n      gradient: WARM_LIME_ACCENT_GRADIENT,\n      graphic: 'logo',\n      amountVariant: 'h3',\n      amountPrefix: '+',\n      categoryStrip: true,\n      rowSx: { gap: 12, p: 12 },\n      secondarySource: 'merchant',\n      secondaryPosition: 'below',\n      secondaryVariant: 'body2',\n      secondaryColor: 'text.primary',\n    },\n    MonthlyObligationsStatusOnTrack: {\n      isConfetti: true,\n      gradient: WARM_LIME_ACCENT_GRADIENT,\n      graphic: 'logo',\n      amountVariant: 'h2',\n      rowSx: { gap: 16, p: 16 },\n      secondarySource: 'label',\n      secondaryPosition: 'below',\n      secondaryVariant: 'caption',\n      secondaryColor: 'text.secondary',\n    },\n    CelebrateCreditCardPayoff: {\n      isConfetti: true,\n      gradient: CELEBRATION_GRADIENT,\n      graphic: 'paidOffCard',\n      amountVariant: 'h2',\n      rowSx: { gap: 24, px: 24, py: 16 },\n      secondarySource: 'label',\n      secondaryPosition: 'below',\n      secondaryVariant: 'caption',\n      secondaryColor: 'text.secondary',\n    },\n    SavingsAccountDeposit: {\n      isConfetti: true,\n      gradient: CELEBRATION_GRADIENT,\n      graphic: 'savings',\n      amountVariant: 'h2',\n      rowSx: { gap: 16, p: 16 },\n      secondarySource: 'label',\n      secondaryPosition: 'above',\n      secondaryVariant: 'body2',\n      secondaryColor: 'text.primary',\n    },\n  }\n}\n"],"mappings":";;AAsCA,IAAa,IAAA,CAAmB,OACvB;AAAA,EACL,sBAAsB;AAAA,IACpB,YAAY,EAAM,QAAQ,QAAQ;AAAA,IAClC,UAAU;AAAA,EACZ;AAAA,EACA,mBAAmB,EACjB,YACE,0FACJ;AAAA,EACA,kCAAkC;AAAA,IAChC,YAAY;AAAA,IACZ,cAAc;AAAA,IACd,YACE;AAAA,EACJ;AAAA,EACA,kCAAkC;AAAA,IAChC,YAAY;AAAA,IACZ,cAAc,EAAM,EAAM,QAAQ,YAAY,eAAe,IAAI,IAAI;AAAA,IACrE,mBAAmB;AAAA,IACnB,YACE;AAAA,EACJ;AAAA,EACA,gBAAgB;AAAA,IACd,YAAY;AAAA,IACZ,UAAU;AAAA,IACV,SAAS;AAAA,IACT,eAAe;AAAA,IACf,cAAc;AAAA,IACd,eAAe;AAAA,IACf,OAAO;AAAA,MAAE,KAAK;AAAA,MAAI,GAAG;AAAA,IAAG;AAAA,IACxB,iBAAiB;AAAA,IACjB,mBAAmB;AAAA,IACnB,kBAAkB;AAAA,IAClB,gBAAgB;AAAA,EAClB;AAAA,EACA,6BAA6B;AAAA,IAC3B,YAAY;AAAA,IACZ,UAAU;AAAA,IACV,SAAS;AAAA,IACT,eAAe;AAAA,IACf,cAAc;AAAA,IACd,eAAe;AAAA,IACf,OAAO;AAAA,MAAE,KAAK;AAAA,MAAI,GAAG;AAAA,IAAG;AAAA,IACxB,iBAAiB;AAAA,IACjB,mBAAmB;AAAA,IACnB,kBAAkB;AAAA,IAClB,gBAAgB;AAAA,EAClB;AAAA,EACA,iCAAiC;AAAA,IAC/B,YAAY;AAAA,IACZ,UAAU;AAAA,IACV,SAAS;AAAA,IACT,eAAe;AAAA,IACf,OAAO;AAAA,MAAE,KAAK;AAAA,MAAI,GAAG;AAAA,IAAG;AAAA,IACxB,iBAAiB;AAAA,IACjB,mBAAmB;AAAA,IACnB,kBAAkB;AAAA,IAClB,gBAAgB;AAAA,EAClB;AAAA,EACA,2BAA2B;AAAA,IACzB,YAAY;AAAA,IACZ,UAAU;AAAA,IACV,SAAS;AAAA,IACT,eAAe;AAAA,IACf,OAAO;AAAA,MAAE,KAAK;AAAA,MAAI,IAAI;AAAA,MAAI,IAAI;AAAA,IAAG;AAAA,IACjC,iBAAiB;AAAA,IACjB,mBAAmB;AAAA,IACnB,kBAAkB;AAAA,IAClB,gBAAgB;AAAA,EAClB;AAAA,EACA,uBAAuB;AAAA,IACrB,YAAY;AAAA,IACZ,UAAU;AAAA,IACV,SAAS;AAAA,IACT,eAAe;AAAA,IACf,OAAO;AAAA,MAAE,KAAK;AAAA,MAAI,GAAG;AAAA,IAAG;AAAA,IACxB,iBAAiB;AAAA,IACjB,mBAAmB;AAAA,IACnB,kBAAkB;AAAA,IAClB,gBAAgB;AAAA,EAClB;AACF"}

package/dist/insights-v2/blocks/ComponentBlocks/ActionBlock/ActionBlockLayer.d.ts

@@ -0,0 +1,8 @@
+import { Beat } from '../../../../core';
+interface ActionBlockLayerProps {
+    beat: Beat;
+}
+export declare const ActionBlockLayer: (({ beat, }: ActionBlockLayerProps) => import("react/jsx-runtime").JSX.Element | null) & {
+    displayName: string;
+};
+export {};