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

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

@@ -0,0 +1,41 @@
+import { ReactNode } from 'react';
+import { SxProps, Theme } from '@mui/material/styles';
+export interface UpcomingBillDay {
+    /** Day-of-week label, e.g. "Sun". */
+    label: string;
+    /** Day-of-month number, e.g. "26". */
+    date: string;
+    /** Whether this is the highlighted due day (blue label + filled date cell). */
+    highlighted?: boolean;
+}
+export interface UpcomingBillCardProps {
+    /** The seven days of the week strip (exactly 7 items, one for each day). The due day should have `highlighted`. */
+    days: [
+        UpcomingBillDay,
+        UpcomingBillDay,
+        UpcomingBillDay,
+        UpcomingBillDay,
+        UpcomingBillDay,
+        UpcomingBillDay,
+        UpcomingBillDay
+    ];
+    /** Merchant logo/icon (24x24), rendered left of the merchant name. */
+    logo: ReactNode;
+    /** Merchant name, e.g. "Power Plus". */
+    merchantName: string;
+    /** Bill amount, formatted (e.g. "$75.00"). */
+    amount: string;
+    /** Custom aria-label for the highlighted due date cell (accessibility). Pass a localized string from copy/GlobalCopyStore; defaults to English "bill due" if not provided. */
+    highlightedAriaLabel?: string;
+    sx?: SxProps<Theme>;
+}
+/**
+ * Upcoming Bill content: a seven-day week strip with the due day highlighted
+ * (blue label + filled blue date cell) above a tinted bill row (merchant logo,
+ * name, and amount).
+ *
+ * Figma: Upcoming Bill Content (Full variant). Scope is the Content section
+ * only.
+ */
+declare const UpcomingBillCard: ({ amount, days, highlightedAriaLabel, logo, merchantName, sx, }: UpcomingBillCardProps) => import("react/jsx-runtime").JSX.Element;
+export default UpcomingBillCard;

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

@@ -0,0 +1,99 @@
+import o from "@mui/material/Stack";
+import { Text as i } from "@mxenabled/mxui";
+import { jsx as e, jsxs as t } from "react/jsx-runtime";
+import { alpha as s } from "@mui/material/styles";
+import l from "@mui/material/Box";
+var f = ({ amount: n, days: a, highlightedAriaLabel: d, logo: h, merchantName: p, sx: c }) => /* @__PURE__ */ e(l, {
+  sx: {
+    bgcolor: "background.paper",
+    border: "1px solid",
+    borderColor: "divider",
+    borderRadius: 2,
+    p: 12,
+    ...c
+  },
+  children: /* @__PURE__ */ t(o, {
+    sx: { gap: 12 },
+    children: [/* @__PURE__ */ t(l, {
+      sx: {
+        display: "grid",
+        gridTemplateColumns: "repeat(7, 1fr)",
+        rowGap: "2px"
+      },
+      children: [a.map((r) => /* @__PURE__ */ e(i, {
+        bold: r.highlighted === !0,
+        color: r.highlighted === !0 ? "primary.main" : "text.secondary",
+        sx: { textAlign: "center" },
+        variant: "caption",
+        children: r.label
+      }, `label-${r.label}-${r.date}`)), a.map((r) => /* @__PURE__ */ e(l, {
+        "aria-current": r.highlighted === !0 ? "date" : void 0,
+        "aria-label": r.highlighted === !0 ? d ?? `${r.label} ${r.date}, bill due` : void 0,
+        sx: {
+          alignItems: "center",
+          display: "flex",
+          height: 36,
+          justifyContent: "center",
+          justifySelf: "center",
+          width: 36,
+          ...r.highlighted === !0 && {
+            bgcolor: "primary.main",
+            borderRadius: "4px"
+          }
+        },
+        children: /* @__PURE__ */ e(i, {
+          color: r.highlighted === !0 ? "primary.contrastText" : "text.secondary",
+          variant: "body1",
+          children: r.date
+        })
+      }, `date-${r.label}-${r.date}`))]
+    }), /* @__PURE__ */ t(o, {
+      sx: {
+        alignItems: "center",
+        backgroundColor: (r) => s(r.palette.primary.main, 0.15),
+        border: "1px solid",
+        borderColor: "primary.main",
+        borderRadius: "4px",
+        flexDirection: "row",
+        gap: 12,
+        justifyContent: "space-between",
+        px: 12,
+        py: 10
+      },
+      children: [/* @__PURE__ */ t(o, {
+        sx: {
+          alignItems: "center",
+          flexDirection: "row",
+          gap: 8,
+          minWidth: 0
+        },
+        children: [/* @__PURE__ */ e(l, {
+          sx: {
+            flexShrink: 0,
+            height: 24,
+            width: 24
+          },
+          children: h
+        }), /* @__PURE__ */ e(i, {
+          color: "text.primary",
+          truncate: !0,
+          variant: "subtitle2",
+          children: p
+        })]
+      }), /* @__PURE__ */ e(i, {
+        color: "text.primary",
+        sx: {
+          flexShrink: 0,
+          fontWeight: 600
+        },
+        variant: "subtitle2",
+        children: n
+      })]
+    })]
+  })
+});
+export {
+  f as default
+};
+
+//# sourceMappingURL=UpcomingBillCard.es.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"UpcomingBillCard.es.js","names":[],"sources":["../../../src/insights-v2/components/UpcomingBillCard.tsx"],"sourcesContent":["import type { ReactNode } from 'react'\n\nimport Box from '@mui/material/Box'\nimport Stack from '@mui/material/Stack'\nimport { alpha, type SxProps, type Theme } from '@mui/material/styles'\n\nimport { Text } from '@mxenabled/mxui'\n\nexport interface UpcomingBillDay {\n  /** Day-of-week label, e.g. \"Sun\". */\n  label: string\n  /** Day-of-month number, e.g. \"26\". */\n  date: string\n  /** Whether this is the highlighted due day (blue label + filled date cell). */\n  highlighted?: boolean\n}\n\nexport interface UpcomingBillCardProps {\n  /** The seven days of the week strip (exactly 7 items, one for each day). The due day should have `highlighted`. */\n  days: [\n    UpcomingBillDay,\n    UpcomingBillDay,\n    UpcomingBillDay,\n    UpcomingBillDay,\n    UpcomingBillDay,\n    UpcomingBillDay,\n    UpcomingBillDay,\n  ]\n  /** Merchant logo/icon (24x24), rendered left of the merchant name. */\n  logo: ReactNode\n  /** Merchant name, e.g. \"Power Plus\". */\n  merchantName: string\n  /** Bill amount, formatted (e.g. \"$75.00\"). */\n  amount: string\n  /** Custom aria-label for the highlighted due date cell (accessibility). Pass a localized string from copy/GlobalCopyStore; defaults to English \"bill due\" if not provided. */\n  highlightedAriaLabel?: string\n  sx?: SxProps<Theme>\n}\n\n/**\n * Upcoming Bill content: a seven-day week strip with the due day highlighted\n * (blue label + filled blue date cell) above a tinted bill row (merchant logo,\n * name, and amount).\n *\n * Figma: Upcoming Bill Content (Full variant). Scope is the Content section\n * only.\n */\nconst UpcomingBillCard = ({\n  amount,\n  days,\n  highlightedAriaLabel,\n  logo,\n  merchantName,\n  sx,\n}: UpcomingBillCardProps) => {\n  return (\n    <Box\n      sx={{\n        bgcolor: 'background.paper',\n        border: '1px solid',\n        borderColor: 'divider',\n        borderRadius: 2,\n        p: 12,\n        ...sx,\n      }}\n    >\n      <Stack sx={{ gap: 12 }}>\n        {/* Week strip: labels row + date-cells row, aligned into 7 columns */}\n        <Box\n          sx={{\n            display: 'grid',\n            gridTemplateColumns: 'repeat(7, 1fr)',\n            rowGap: '2px',\n          }}\n        >\n          {days.map((day) => (\n            <Text\n              bold={day.highlighted === true}\n              color={day.highlighted === true ? 'primary.main' : 'text.secondary'}\n              key={`label-${day.label}-${day.date}`}\n              sx={{ textAlign: 'center' }}\n              variant=\"caption\"\n            >\n              {day.label}\n            </Text>\n          ))}\n          {days.map((day) => (\n            <Box\n              aria-current={day.highlighted === true ? 'date' : undefined}\n              aria-label={\n                day.highlighted === true\n                  ? (highlightedAriaLabel ?? `${day.label} ${day.date}, bill due`)\n                  : undefined\n              }\n              key={`date-${day.label}-${day.date}`}\n              sx={{\n                alignItems: 'center',\n                display: 'flex',\n                height: 36,\n                justifyContent: 'center',\n                justifySelf: 'center',\n                width: 36,\n                ...(day.highlighted === true && {\n                  bgcolor: 'primary.main',\n                  borderRadius: '4px',\n                }),\n              }}\n            >\n              <Text\n                color={day.highlighted === true ? 'primary.contrastText' : 'text.secondary'}\n                variant=\"body1\"\n              >\n                {day.date}\n              </Text>\n            </Box>\n          ))}\n        </Box>\n\n        {/* Bill row */}\n        <Stack\n          sx={{\n            alignItems: 'center',\n            // Figma fill: primary.main at 15% opacity (a translucent overlay),\n            // with a solid primary.main 1px border.\n            backgroundColor: (theme) => alpha(theme.palette.primary.main, 0.15),\n            border: '1px solid',\n            borderColor: 'primary.main',\n            borderRadius: '4px',\n            flexDirection: 'row',\n            gap: 12,\n            justifyContent: 'space-between',\n            px: 12,\n            py: 10,\n          }}\n        >\n          <Stack sx={{ alignItems: 'center', flexDirection: 'row', gap: 8, minWidth: 0 }}>\n            <Box sx={{ flexShrink: 0, height: 24, width: 24 }}>{logo}</Box>\n            <Text color=\"text.primary\" truncate={true} variant=\"subtitle2\">\n              {merchantName}\n            </Text>\n          </Stack>\n          <Text color=\"text.primary\" sx={{ flexShrink: 0, fontWeight: 600 }} variant=\"subtitle2\">\n            {amount}\n          </Text>\n        </Stack>\n      </Stack>\n    </Box>\n  )\n}\n\nexport default UpcomingBillCard\n"],"mappings":";;;;;AA+CA,IAAM,IAAA,CAAoB,EACxB,QAAA,GACA,MAAA,GACA,sBAAA,GACA,MAAA,GACA,cAAA,GACA,IAAA,EAAA,MAGE,gBAAA,EAAC,GAAD;AAAA,EACE,IAAI;AAAA,IACF,SAAS;AAAA,IACT,QAAQ;AAAA,IACR,aAAa;AAAA,IACb,cAAc;AAAA,IACd,GAAG;AAAA,IACH,GAAG;AAAA,EACL;AAAA,EAEA,UAAA,gBAAA,EAAC,GAAD;AAAA,IAAO,IAAI,EAAE,KAAK,GAAG;AAAA,IAArB,UAAA,CAEE,gBAAA,EAAC,GAAD;AAAA,MACE,IAAI;AAAA,QACF,SAAS;AAAA,QACT,qBAAqB;AAAA,QACrB,QAAQ;AAAA,MACV;AAAA,MALF,UAAA,CAOG,EAAK,IAAA,CAAK,MACT,gBAAA,EAAC,GAAD;AAAA,QACE,MAAM,EAAI,gBAAgB;AAAA,QAC1B,OAAO,EAAI,gBAAgB,KAAO,iBAAiB;AAAA,QAEnD,IAAI,EAAE,WAAW,SAAS;AAAA,QAC1B,SAAQ;AAAA,QAEP,UAAA,EAAI;AAAA,MACD,GALC,SAAS,EAAI,KAAA,IAAS,EAAI,IAAA,EAK3B,CACP,GACA,EAAK,IAAA,CAAK,MACT,gBAAA,EAAC,GAAD;AAAA,QACE,gBAAc,EAAI,gBAAgB,KAAO,SAAS;AAAA,QAClD,cACE,EAAI,gBAAgB,KACf,KAAwB,GAAG,EAAI,KAAA,IAAS,EAAI,IAAA,eAC7C;AAAA,QAGN,IAAI;AAAA,UACF,YAAY;AAAA,UACZ,SAAS;AAAA,UACT,QAAQ;AAAA,UACR,gBAAgB;AAAA,UAChB,aAAa;AAAA,UACb,OAAO;AAAA,UACP,GAAI,EAAI,gBAAgB,MAAQ;AAAA,YAC9B,SAAS;AAAA,YACT,cAAc;AAAA,UAChB;AAAA,QACF;AAAA,QAEA,UAAA,gBAAA,EAAC,GAAD;AAAA,UACE,OAAO,EAAI,gBAAgB,KAAO,yBAAyB;AAAA,UAC3D,SAAQ;AAAA,UAEP,UAAA,EAAI;AAAA,QACD,CAAA;AAAA,MACH,GApBE,QAAQ,EAAI,KAAA,IAAS,EAAI,IAAA,EAoB3B,CACN,CACE;AAAA,IAGL,CAAA,GAAA,gBAAA,EAAC,GAAD;AAAA,MACE,IAAI;AAAA,QACF,YAAY;AAAA,QAGZ,iBAAA,CAAkB,MAAU,EAAM,EAAM,QAAQ,QAAQ,MAAM,IAAI;AAAA,QAClE,QAAQ;AAAA,QACR,aAAa;AAAA,QACb,cAAc;AAAA,QACd,eAAe;AAAA,QACf,KAAK;AAAA,QACL,gBAAgB;AAAA,QAChB,IAAI;AAAA,QACJ,IAAI;AAAA,MACN;AAAA,MAdF,UAAA,CAgBE,gBAAA,EAAC,GAAD;AAAA,QAAO,IAAI;AAAA,UAAE,YAAY;AAAA,UAAU,eAAe;AAAA,UAAO,KAAK;AAAA,UAAG,UAAU;AAAA,QAAE;AAAA,QAA7E,UAAA,CACE,gBAAA,EAAC,GAAD;AAAA,UAAK,IAAI;AAAA,YAAE,YAAY;AAAA,YAAG,QAAQ;AAAA,YAAI,OAAO;AAAA,UAAG;AAAA,UAAI,UAAA;AAAA,QAAU,CAAA,GAC9D,gBAAA,EAAC,GAAD;AAAA,UAAM,OAAM;AAAA,UAAe,UAAU;AAAA,UAAM,SAAQ;AAAA,UAChD,UAAA;AAAA,QACG,CAAA,CACD;AAAA,MACP,CAAA,GAAA,gBAAA,EAAC,GAAD;AAAA,QAAM,OAAM;AAAA,QAAe,IAAI;AAAA,UAAE,YAAY;AAAA,UAAG,YAAY;AAAA,QAAI;AAAA,QAAG,SAAQ;AAAA,QACxE,UAAA;AAAA,MACG,CAAA,CACD;AAAA,IACF,CAAA,CAAA;AAAA;AACJ,CAAA"}

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

@@ -0,0 +1,19 @@
+/**
+ * Decorative celebration washes used behind confetti-backed "complete"/milestone states.
+ * Shared so both the block layer (`AccountBlock`) and the presentational
+ * components/stories reference one source instead of re-declaring the string.
+ *
+ * - WARM_LIME_ACCENT_GRADIENT: 20%-opacity warm→lime wash; layer over `background.paper`
+ *   for a tinted background. Used for merchant categorization and deposit celebration states.
+ * - CELEBRATION_GRADIENT: 20%-opacity warm→pink wash; layer over `background.paper`.
+ * - DISCOVERED_ACCOUNTS_GRADIENT: Fully opaque (100% opacity); use as the sole background.
+ */
+/**
+ * Warm → lime accent wash at 20% opacity. Used as a tinted background behind
+ * merchant categorization highlights and deposit celebration callouts.
+ */
+export declare const WARM_LIME_ACCENT_GRADIENT = "linear-gradient(200.73deg, rgba(255, 223, 152, 0.2) 1.86%, rgba(173, 248, 43, 0.2) 101.54%)";
+/** Warm → pink wash behind balance/savings milestones. */
+export declare const CELEBRATION_GRADIENT = "linear-gradient(200.73deg, rgba(255, 223, 152, 0.2) 1.86%, rgba(255, 128, 229, 0.2) 101.54%)";
+/** Peach → pink gradient for Discovered Accounts success state. */
+export declare const DISCOVERED_ACCOUNTS_GRADIENT = "linear-gradient(200.73deg, rgba(255, 224, 153, 1) 1.86%, rgba(255, 129, 230, 1) 101.54%)";

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

@@ -0,0 +1,7 @@
+var r = "linear-gradient(200.73deg, rgba(255, 223, 152, 0.2) 1.86%, rgba(173, 248, 43, 0.2) 101.54%)", a = "linear-gradient(200.73deg, rgba(255, 223, 152, 0.2) 1.86%, rgba(255, 128, 229, 0.2) 101.54%)";
+export {
+  a as CELEBRATION_GRADIENT,
+  r as WARM_LIME_ACCENT_GRADIENT
+};
+
+//# sourceMappingURL=celebrationGradients.es.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"celebrationGradients.es.js","names":[],"sources":["../../../src/insights-v2/components/celebrationGradients.ts"],"sourcesContent":["/**\n * Decorative celebration washes used behind confetti-backed \"complete\"/milestone states.\n * Shared so both the block layer (`AccountBlock`) and the presentational\n * components/stories reference one source instead of re-declaring the string.\n *\n * - WARM_LIME_ACCENT_GRADIENT: 20%-opacity warm→lime wash; layer over `background.paper`\n *   for a tinted background. Used for merchant categorization and deposit celebration states.\n * - CELEBRATION_GRADIENT: 20%-opacity warm→pink wash; layer over `background.paper`.\n * - DISCOVERED_ACCOUNTS_GRADIENT: Fully opaque (100% opacity); use as the sole background.\n */\n\n/**\n * Warm → lime accent wash at 20% opacity. Used as a tinted background behind\n * merchant categorization highlights and deposit celebration callouts.\n */\nexport const WARM_LIME_ACCENT_GRADIENT =\n  'linear-gradient(200.73deg, rgba(255, 223, 152, 0.2) 1.86%, rgba(173, 248, 43, 0.2) 101.54%)'\n\n/** Warm → pink wash behind balance/savings milestones. */\nexport const CELEBRATION_GRADIENT =\n  'linear-gradient(200.73deg, rgba(255, 223, 152, 0.2) 1.86%, rgba(255, 128, 229, 0.2) 101.54%)'\n\n/** Peach → pink gradient for Discovered Accounts success state. */\nexport const DISCOVERED_ACCOUNTS_GRADIENT =\n  'linear-gradient(200.73deg, rgba(255, 224, 153, 1) 1.86%, rgba(255, 129, 230, 1) 101.54%)'\n"],"mappings":"AAeA,IAAa,IACX,+FAGW,IACX"}

package/dist/insights-v2/components/chartblocks/BarchartV2.d.ts

@@ -0,0 +1,2 @@
+import { BarChartV2Props } from '../../../insights/types/Charts/BarChart';
+export declare const BarChartV2: ({ amounts, color, data, heightOverride, margin, onBarClick, legendPosition, monthlyAmountLabel, removeSelectedTabColorChange, selectedTabIndex, trendAmountLabel, }: BarChartV2Props) => import("react/jsx-runtime").JSX.Element;

package/dist/insights-v2/components/chartblocks/BarchartV2.es.js

@@ -0,0 +1,148 @@
+import { useContainerDimensions as V } from "../../../insights/hooks/useContainerDimensions.es.js";
+import { LegendV2 as D } from "../../../insights/components/shared/Charts/BarChart/ChartLegendV2.es.js";
+import { CustomBarPlotV2 as _ } from "../../../insights/components/shared/Charts/BarChart/CustomBarPlotV2.es.js";
+import m from "react";
+import j from "@mui/material/Stack";
+import { jsx as n, jsxs as M } from "react/jsx-runtime";
+import { useTheme as W } from "@mui/material/styles";
+import z from "@mui/material/Box";
+import { BarPlot as G, ChartContainer as N, ChartsReferenceLine as b, ChartsXAxis as X } from "@mui/x-charts";
+var Q = ({ amounts: c, color: s, data: e, heightOverride: f, margin: a = {
+  bottom: 30,
+  left: 16,
+  right: 16,
+  top: 20
+}, onBarClick: S, legendPosition: h = "bottom", monthlyAmountLabel: y, removeSelectedTabColorChange: u, selectedTabIndex: o, trendAmountLabel: x }) => {
+  const A = m.useRef(null), { height: d, width: R } = V(A), g = W(), k = m.useMemo(() => {
+    const t = e.map(({ value: l }) => l), r = Math.min(...t), i = Math.max(...t);
+    return {
+      series: [{
+        data: t,
+        type: "bar"
+      }],
+      xAxis: [{
+        data: e.map(({ label: l }) => l),
+        scaleType: "band",
+        categoryGapRatio: 0.45
+      }],
+      yAxis: [{
+        scaleType: "linear",
+        min: r < 0 ? r * 1.2 : 0,
+        max: i > 0 ? i : 0
+      }]
+    };
+  }, [e]), v = m.useMemo(() => {
+    const t = `${s}80`;
+    return u ? e.map(() => s) : o == null ? [...new Array(e.length - 1).fill(t), s] : e.map((r, i) => i === o ? s : t);
+  }, [
+    s,
+    e,
+    o
+  ]), B = m.useMemo(() => e[o ?? e.length - 1], [e, o]), p = e.reduce((t, r) => Math.min(t, r.value), 1 / 0) < 0, C = /* @__PURE__ */ n(D, {
+    color: s,
+    legendStyle: { pl: a.left },
+    monthlyAmount: B.formattedAmount,
+    monthlyAmountLabel: y,
+    trendAmount: c?.formattedAverage,
+    trendAmountLabel: x
+  }), w = y || x, L = (t, { dataIndex: r }) => S?.(r);
+  return /* @__PURE__ */ M(j, {
+    sx: {
+      alignItems: "center",
+      width: "100%"
+    },
+    children: [
+      w && h === "top" && C,
+      /* @__PURE__ */ n(z, {
+        ref: A,
+        sx: {
+          height: f || 122,
+          mb: h === "top" ? 0 : 4,
+          mt: h === "top" ? 4 : 0,
+          touchAction: "pan-y",
+          width: "100%",
+          "& svg": {
+            touchAction: "pan-y",
+            userSelect: "none"
+          },
+          "& .recharts-wrapper": { touchAction: "pan-y" }
+        },
+        children: /* @__PURE__ */ M(N, {
+          height: d,
+          margin: {
+            bottom: a.bottom,
+            left: a.left,
+            right: a.right,
+            top: a.top || 45
+          },
+          series: k.series,
+          width: R,
+          xAxis: k.xAxis,
+          yAxis: [{ width: 0 }],
+          children: [
+            c?.average && /* @__PURE__ */ n(b, {
+              labelAlign: "middle",
+              lineStyle: {
+                stroke: g.palette.chart.chart7,
+                strokeDasharray: "4",
+                strokeLinecap: "round",
+                strokeWidth: 1
+              },
+              y: c?.average
+            }),
+            p && /* @__PURE__ */ n(b, {
+              labelAlign: "middle",
+              lineStyle: { stroke: g.palette.chart.chart7 },
+              y: 0
+            }),
+            /* @__PURE__ */ n(X, {
+              slots: { axisTickLabel: ({ text: t, ownerState: r, ...i }) => {
+                const l = e[o ?? e.length - 1]?.label;
+                return /* @__PURE__ */ n("text", {
+                  ...i,
+                  style: {
+                    ...i.style,
+                    fontWeight: !u && l === t ? "bold" : 400
+                  },
+                  children: t
+                });
+              } },
+              sx: (t) => ({
+                "& .MuiChartsAxis-line": { stroke: p ? "none" : t.palette.text?.primary },
+                "& .MuiChartsAxis-tickContainer:first-of-type .MuiChartsAxis-tick": { display: "none" },
+                "& .MuiChartsAxis-tickLabel": { transform: p ? "translateY(15px)" : {} }
+              }),
+              tickLabelStyle: { fontSize: 11 }
+            }),
+            /* @__PURE__ */ n(G, {
+              onItemClick: L,
+              slots: { bar: (t) => {
+                const { ownerState: r, ...i } = t;
+                return /* @__PURE__ */ n(_, {
+                  ...i,
+                  colorRange: v,
+                  data: e,
+                  dataIndex: r.dataIndex,
+                  removeSelectedTabColorChange: u,
+                  selectedTabIndex: o ?? e.length - 1,
+                  style: {
+                    height: t.height,
+                    x: t.x,
+                    y: t.y,
+                    width: t.width
+                  }
+                });
+              } }
+            })
+          ]
+        })
+      }),
+      w && h === "bottom" && C
+    ]
+  });
+};
+export {
+  Q as BarChartV2
+};
+
+//# sourceMappingURL=BarchartV2.es.js.map

package/dist/insights-v2/components/chartblocks/BarchartV2.es.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"BarchartV2.es.js","names":[],"sources":["../../../../src/insights-v2/components/chartblocks/BarchartV2.tsx"],"sourcesContent":["import React from 'react'\n\nimport Box from '@mui/material/Box'\nimport Stack from '@mui/material/Stack'\nimport { type Theme, useTheme } from '@mui/material/styles'\nimport {\n  BarPlot,\n  type BarSeriesType,\n  ChartContainer as ResponsiveChartContainer,\n  ChartsReferenceLine,\n  ChartsXAxis,\n} from '@mui/x-charts'\n\nimport { useContainerDimensions } from '../../../insights/hooks/useContainerDimensions'\nimport type { BarChartV2Props } from '../../../insights/types/Charts/BarChart'\nimport { LegendV2 } from '../../../insights/components/shared/Charts/BarChart/ChartLegendV2'\nimport { CustomBarPlotV2 } from '../../../insights/components/shared/Charts/BarChart/CustomBarPlotV2'\n\nexport const BarChartV2 = ({\n  amounts,\n  color,\n  data,\n  heightOverride,\n  margin = {\n    bottom: 30,\n    left: 16,\n    right: 16,\n    top: 20,\n  },\n  onBarClick,\n  legendPosition = 'bottom',\n  monthlyAmountLabel,\n  removeSelectedTabColorChange,\n  selectedTabIndex,\n  trendAmountLabel,\n}: BarChartV2Props) => {\n  const containerRef = React.useRef<HTMLDivElement>(null)\n  const { height, width } = useContainerDimensions(containerRef)\n  const theme = useTheme()\n\n  const chartData = React.useMemo(() => {\n    const values = data.map(({ value }) => value)\n    const minValue = Math.min(...values)\n    const maxValue = Math.max(...values)\n\n    return {\n      series: [\n        {\n          data: values,\n          type: 'bar',\n        },\n      ] as BarSeriesType[],\n      xAxis: [\n        {\n          data: data.map(({ label }) => label),\n          scaleType: 'band' as const,\n          categoryGapRatio: 0.45,\n        },\n      ],\n      yAxis: [\n        {\n          scaleType: 'linear' as const,\n          min: minValue < 0 ? minValue * 1.2 : 0,\n          max: maxValue > 0 ? maxValue : 0,\n        },\n      ],\n    }\n  }, [data])\n\n  const colorRange = React.useMemo(() => {\n    const defaultColor = `${color}80`\n    if (removeSelectedTabColorChange) return data.map(() => color)\n\n    if (selectedTabIndex == null) {\n      return [...new Array(data.length - 1).fill(defaultColor), color]\n    }\n    return data.map((_, index) => (index === selectedTabIndex ? color : defaultColor))\n  }, [color, data, selectedTabIndex])\n\n  const selectedData = React.useMemo(\n    () => data[selectedTabIndex ?? data.length - 1],\n    [data, selectedTabIndex],\n  )\n\n  const lowestValue = data.reduce((min, item) => Math.min(min, item.value), Infinity)\n  const isNegative = lowestValue < 0\n\n  const legendComponent = (\n    <LegendV2\n      color={color}\n      legendStyle={{ pl: margin.left }}\n      monthlyAmount={selectedData.formattedAmount}\n      monthlyAmountLabel={monthlyAmountLabel}\n      trendAmount={amounts?.formattedAverage}\n      trendAmountLabel={trendAmountLabel}\n    />\n  )\n\n  const shouldShowLegend = monthlyAmountLabel || trendAmountLabel\n\n  const handleBarClick = (\n    _: React.MouseEvent<SVGElement, MouseEvent>,\n    { dataIndex }: { dataIndex: number },\n  ) => onBarClick?.(dataIndex)\n\n  return (\n    <Stack sx={{ alignItems: 'center', width: '100%' }}>\n      {shouldShowLegend && legendPosition === 'top' && legendComponent}\n      <Box\n        ref={containerRef}\n        sx={{\n          height: heightOverride ? heightOverride : 122,\n          mb: legendPosition === 'top' ? 0 : 4,\n          mt: legendPosition === 'top' ? 4 : 0,\n          touchAction: 'pan-y',\n          width: '100%',\n          '& svg': {\n            touchAction: 'pan-y',\n            userSelect: 'none',\n          },\n          '& .recharts-wrapper': {\n            touchAction: 'pan-y',\n          },\n        }}\n      >\n        <ResponsiveChartContainer\n          height={height}\n          margin={{\n            bottom: margin.bottom,\n            left: margin.left,\n            right: margin.right,\n            top: margin.top || 45,\n          }}\n          series={chartData.series}\n          width={width}\n          xAxis={chartData.xAxis}\n          yAxis={[{ width: 0 }]}\n        >\n          {amounts?.average && (\n            <ChartsReferenceLine\n              labelAlign=\"middle\"\n              lineStyle={{\n                stroke: theme.palette.chart.chart7,\n                strokeDasharray: '4',\n                strokeLinecap: 'round',\n                strokeWidth: 1,\n              }}\n              y={amounts?.average}\n            />\n          )}\n\n          {isNegative && (\n            <ChartsReferenceLine\n              labelAlign=\"middle\"\n              lineStyle={{\n                stroke: theme.palette.chart.chart7,\n              }}\n              y={0}\n            />\n          )}\n\n          <ChartsXAxis\n            slots={{\n              // eslint-disable-next-line @typescript-eslint/no-unused-vars\n              axisTickLabel: ({ text, ownerState: _, ...restProps }) => {\n                const label = data[selectedTabIndex ?? data.length - 1]?.label\n                return (\n                  <text\n                    {...restProps}\n                    style={\n                      {\n                        ...restProps.style,\n                        fontWeight: !removeSelectedTabColorChange && label === text ? 'bold' : 400,\n                      } as React.CSSProperties\n                    }\n                  >\n                    {text}\n                  </text>\n                )\n              },\n            }}\n            sx={(theme) => ({\n              '& .MuiChartsAxis-line': {\n                stroke: !isNegative ? (theme as Theme).palette.text?.primary : 'none',\n              },\n              '& .MuiChartsAxis-tickContainer:first-of-type .MuiChartsAxis-tick': {\n                display: 'none',\n              },\n              '& .MuiChartsAxis-tickLabel': {\n                transform: isNegative ? 'translateY(15px)' : {},\n              },\n            })}\n            tickLabelStyle={{\n              fontSize: 11,\n            }}\n          />\n          <BarPlot\n            onItemClick={handleBarClick}\n            slots={{\n              bar: (props) => {\n                const { ownerState, ...defaultProps } = props\n                return (\n                  <CustomBarPlotV2\n                    {...defaultProps}\n                    colorRange={colorRange}\n                    data={data}\n                    dataIndex={ownerState.dataIndex}\n                    removeSelectedTabColorChange={removeSelectedTabColorChange}\n                    selectedTabIndex={selectedTabIndex ?? data.length - 1}\n                    style={{\n                      height: props.height,\n                      x: props.x,\n                      y: props.y,\n                      width: props.width,\n                    }}\n                  />\n                )\n              },\n            }}\n          />\n        </ResponsiveChartContainer>\n      </Box>\n      {shouldShowLegend && legendPosition === 'bottom' && legendComponent}\n    </Stack>\n  )\n}\n"],"mappings":";;;;;;;;;AAkBA,IAAa,IAAA,CAAc,EACzB,SAAA,GACA,OAAA,GACA,MAAA,GACA,gBAAA,GACA,QAAA,IAAS;AAAA,EACP,QAAQ;AAAA,EACR,MAAM;AAAA,EACN,OAAO;AAAA,EACP,KAAK;AACP,GACA,YAAA,GACA,gBAAA,IAAiB,UACjB,oBAAA,GACA,8BAAA,GACA,kBAAA,GACA,kBAAA,EAAA,MACqB;AACrB,QAAM,IAAe,EAAM,OAAuB,IAAI,GAChD,EAAE,QAAA,GAAQ,OAAA,EAAA,IAAU,EAAuB,CAAY,GACvD,IAAQ,EAAS,GAEjB,IAAY,EAAM,QAAA,MAAc;AACpC,UAAM,IAAS,EAAK,IAAA,CAAK,EAAE,OAAA,EAAA,MAAY,CAAK,GACtC,IAAW,KAAK,IAAI,GAAG,CAAM,GAC7B,IAAW,KAAK,IAAI,GAAG,CAAM;AAEnC,WAAO;AAAA,MACL,QAAQ,CACN;AAAA,QACE,MAAM;AAAA,QACN,MAAM;AAAA,MACR,CACF;AAAA,MACA,OAAO,CACL;AAAA,QACE,MAAM,EAAK,IAAA,CAAK,EAAE,OAAA,EAAA,MAAY,CAAK;AAAA,QACnC,WAAW;AAAA,QACX,kBAAkB;AAAA,MACpB,CACF;AAAA,MACA,OAAO,CACL;AAAA,QACE,WAAW;AAAA,QACX,KAAK,IAAW,IAAI,IAAW,MAAM;AAAA,QACrC,KAAK,IAAW,IAAI,IAAW;AAAA,MACjC,CACF;AAAA,IACF;AAAA,EACF,GAAG,CAAC,CAAI,CAAC,GAEH,IAAa,EAAM,QAAA,MAAc;AACrC,UAAM,IAAe,GAAG,CAAA;AACxB,WAAI,IAAqC,EAAK,IAAA,MAAU,CAAK,IAEzD,KAAoB,OACf,CAAC,GAAG,IAAI,MAAM,EAAK,SAAS,CAAC,EAAE,KAAK,CAAY,GAAG,CAAK,IAE1D,EAAK,IAAA,CAAK,GAAG,MAAW,MAAU,IAAmB,IAAQ,CAAa;AAAA,EACnF,GAAG;AAAA,IAAC;AAAA,IAAO;AAAA,IAAM;AAAA,EAAgB,CAAC,GAE5B,IAAe,EAAM,QAAA,MACnB,EAAK,KAAoB,EAAK,SAAS,CAAA,GAC7C,CAAC,GAAM,CAAgB,CACzB,GAGM,IADc,EAAK,OAAA,CAAQ,GAAK,MAAS,KAAK,IAAI,GAAK,EAAK,KAAK,GAAG,KACvD,IAAc,GAE3B,IACJ,gBAAA,EAAC,GAAD;AAAA,IACS,OAAA;AAAA,IACP,aAAa,EAAE,IAAI,EAAO,KAAK;AAAA,IAC/B,eAAe,EAAa;AAAA,IACR,oBAAA;AAAA,IACpB,aAAa,GAAS;AAAA,IACJ,kBAAA;AAAA,EACnB,CAAA,GAGG,IAAmB,KAAsB,GAEzC,IAAA,CACJ,GACA,EAAE,WAAA,EAAA,MACC,IAAa,CAAS;AAE3B,SACE,gBAAA,EAAC,GAAD;AAAA,IAAO,IAAI;AAAA,MAAE,YAAY;AAAA,MAAU,OAAO;AAAA,IAAO;AAAA,IAAjD,UAAA;AAAA,MACG,KAAoB,MAAmB,SAAS;AAAA,MACjD,gBAAA,EAAC,GAAD;AAAA,QACE,KAAK;AAAA,QACL,IAAI;AAAA,UACF,QAAQ,KAAkC;AAAA,UAC1C,IAAI,MAAmB,QAAQ,IAAI;AAAA,UACnC,IAAI,MAAmB,QAAQ,IAAI;AAAA,UACnC,aAAa;AAAA,UACb,OAAO;AAAA,UACP,SAAS;AAAA,YACP,aAAa;AAAA,YACb,YAAY;AAAA,UACd;AAAA,UACA,uBAAuB,EACrB,aAAa,QACf;AAAA,QACF;AAAA,QAEA,UAAA,gBAAA,EAAC,GAAD;AAAA,UACU,QAAA;AAAA,UACR,QAAQ;AAAA,YACN,QAAQ,EAAO;AAAA,YACf,MAAM,EAAO;AAAA,YACb,OAAO,EAAO;AAAA,YACd,KAAK,EAAO,OAAO;AAAA,UACrB;AAAA,UACA,QAAQ,EAAU;AAAA,UACX,OAAA;AAAA,UACP,OAAO,EAAU;AAAA,UACjB,OAAO,CAAC,EAAE,OAAO,EAAE,CAAC;AAAA,UAXtB,UAAA;AAAA,YAaG,GAAS,WACR,gBAAA,EAAC,GAAD;AAAA,cACE,YAAW;AAAA,cACX,WAAW;AAAA,gBACT,QAAQ,EAAM,QAAQ,MAAM;AAAA,gBAC5B,iBAAiB;AAAA,gBACjB,eAAe;AAAA,gBACf,aAAa;AAAA,cACf;AAAA,cACA,GAAG,GAAS;AAAA,YACb,CAAA;AAAA,YAGF,KACC,gBAAA,EAAC,GAAD;AAAA,cACE,YAAW;AAAA,cACX,WAAW,EACT,QAAQ,EAAM,QAAQ,MAAM,OAC9B;AAAA,cACA,GAAG;AAAA,YACJ,CAAA;AAAA,YAGH,gBAAA,EAAC,GAAD;AAAA,cACE,OAAO,EAEL,eAAA,CAAgB,EAAE,MAAA,GAAM,YAAY,GAAG,GAAG,EAAA,MAAgB;AACxD,sBAAM,IAAQ,EAAK,KAAoB,EAAK,SAAS,CAAA,GAAI;AACzD,uBACE,gBAAA,EAAC,QAAD;AAAA,kBACE,GAAI;AAAA,kBACJ,OACE;AAAA,oBACE,GAAG,EAAU;AAAA,oBACb,YAAY,CAAC,KAAgC,MAAU,IAAO,SAAS;AAAA,kBACzE;AAAA,kBAGD,UAAA;AAAA,gBACG,CAAA;AAAA,cAEV,EACF;AAAA,cACA,IAAA,CAAK,OAAW;AAAA,gBACd,yBAAyB,EACvB,QAAS,IAAsD,SAAxC,EAAgB,QAAQ,MAAM,QACvD;AAAA,gBACA,oEAAoE,EAClE,SAAS,OACX;AAAA,gBACA,8BAA8B,EAC5B,WAAW,IAAa,qBAAqB,CAAC,EAChD;AAAA,cACF;AAAA,cACA,gBAAgB,EACd,UAAU,GACZ;AAAA,YACD,CAAA;AAAA,YACD,gBAAA,EAAC,GAAD;AAAA,cACE,aAAa;AAAA,cACb,OAAO,EACL,KAAA,CAAM,MAAU;AACd,sBAAM,EAAE,YAAA,GAAY,GAAG,EAAA,IAAiB;AACxC,uBACE,gBAAA,EAAC,GAAD;AAAA,kBACE,GAAI;AAAA,kBACQ,YAAA;AAAA,kBACN,MAAA;AAAA,kBACN,WAAW,EAAW;AAAA,kBACQ,8BAAA;AAAA,kBAC9B,kBAAkB,KAAoB,EAAK,SAAS;AAAA,kBACpD,OAAO;AAAA,oBACL,QAAQ,EAAM;AAAA,oBACd,GAAG,EAAM;AAAA,oBACT,GAAG,EAAM;AAAA,oBACT,OAAO,EAAM;AAAA,kBACf;AAAA,gBACD,CAAA;AAAA,cAEL,EACF;AAAA,YACD,CAAA;AAAA,UACuB;AAAA;MACvB,CAAA;AAAA,MACJ,KAAoB,MAAmB,YAAY;AAAA,IAC/C;AAAA;AAEX"}

package/dist/insights-v2/components/chartblocks/EmptyBarChart.d.ts

@@ -0,0 +1 @@
+export declare function EmptyBarChart(): import("react/jsx-runtime").JSX.Element;

package/dist/insights-v2/components/chartblocks/EmptyBarChart.es.js

@@ -0,0 +1,14 @@
+import { ReactComponent as r } from "../../../insights/components/shared/images/EmptyBarChart.es.js";
+import { ThemedSVGImage as o } from "./ThemedSVGImage.es.js";
+import { jsx as m } from "react/jsx-runtime";
+function p() {
+  return /* @__PURE__ */ m(o, {
+    divProps: { style: {} },
+    image: r
+  });
+}
+export {
+  p as EmptyBarChart
+};
+
+//# sourceMappingURL=EmptyBarChart.es.js.map

package/dist/insights-v2/components/chartblocks/EmptyBarChart.es.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"EmptyBarChart.es.js","names":[],"sources":["../../../../src/insights-v2/components/chartblocks/EmptyBarChart.tsx"],"sourcesContent":["import { ReactComponent as BarChartEmptyState } from '../../../../src/insights/components/shared/images/EmptyBarChart.svg'\nimport { ThemedSVGImage } from './ThemedSVGImage'\n\nexport function EmptyBarChart() {\n  return <ThemedSVGImage divProps={{ style: {} }} image={BarChartEmptyState} />\n}\n"],"mappings":";;;AAGA,SAAgB,IAAgB;AAC9B,SAAO,gBAAA,EAAC,GAAD;AAAA,IAAgB,UAAU,EAAE,OAAO,CAAC,EAAE;AAAA,IAAG,OAAO;AAAA,EAAqB,CAAA;AAC9E"}

package/dist/insights-v2/components/chartblocks/ThemedSVGImage.d.ts

@@ -0,0 +1,2 @@
+import { ThemedSVGImageProps } from '../../../core';
+export declare const ThemedSVGImage: ({ divProps, image: SVG, isMini }: ThemedSVGImageProps) => import("react/jsx-runtime").JSX.Element;

package/dist/insights-v2/components/chartblocks/ThemedSVGImage.es.js

@@ -0,0 +1,49 @@
+import { useEffect as y, useRef as u } from "react";
+import { jsx as s } from "react/jsx-runtime";
+import { useTheme as d } from "@mui/material/styles";
+var h = 200, v = 130, b = (r) => r || null, c = (r, o) => {
+  r.forEach((n) => {
+    const e = b(n);
+    if (e) {
+      const t = e.getAttribute("stroke"), l = e.getAttribute("fill");
+      if (t && t !== "white" && e.style.setProperty("stroke", o), l) {
+        const a = l === "white" ? "white" : o;
+        e.style.setProperty("fill", a);
+      }
+    }
+  });
+}, E = ({ divProps: r, image: o, isMini: n = !1 }) => {
+  const e = d(), t = u(null), l = {
+    100: e.palette.primary.lighter,
+    200: e.palette.primary.light,
+    300: e.palette.primary.main,
+    400: e.palette.primary.dark,
+    500: e.palette.primary.darker
+  };
+  return y(() => {
+    if (!t.current) return;
+    const a = t.current, m = a.querySelectorAll(".Overlay");
+    [
+      "brand100",
+      "brand200",
+      "brand300",
+      "brand400",
+      "brand500"
+    ].forEach((i) => {
+      const f = a.querySelectorAll(`.${i}`), p = i.replace("brand", "");
+      c(f, l[p]);
+    }), c(m, l[300]);
+  }, [l]), /* @__PURE__ */ s("div", {
+    style: {
+      maxWidth: n ? v : h,
+      width: "100%"
+    },
+    ...r,
+    children: /* @__PURE__ */ s(o, { ref: t })
+  });
+};
+export {
+  E as ThemedSVGImage
+};
+
+//# sourceMappingURL=ThemedSVGImage.es.js.map

package/dist/insights-v2/components/chartblocks/ThemedSVGImage.es.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ThemedSVGImage.es.js","names":[],"sources":["../../../../src/insights-v2/components/chartblocks/ThemedSVGImage.tsx"],"sourcesContent":["/* eslint-disable react/jsx-pascal-case */\n\nimport { useEffect, useRef } from 'react'\n\nimport { useTheme } from '@mui/material/styles'\nimport type { ThemedSVGImageProps } from '../../../core'\n\nconst MAX_SVG_WIDTH = 200\nconst MINI_SVG_WIDTH = 130\n\n// Utility function to get an SVG element from a DOM node\nconst getSVGElement = (element: Element | null): SVGElement | null => {\n  return element ? (element as SVGElement) : null\n}\n\n// Utility function to apply color to SVG elements\nconst applyColorToSVG = (elements: NodeListOf<Element>, color: string) => {\n  elements.forEach((element) => {\n    const svgElement = getSVGElement(element)\n    if (svgElement) {\n      const strokeAttr = svgElement.getAttribute('stroke')\n      const fillAttr = svgElement.getAttribute('fill')\n\n      if (strokeAttr && strokeAttr !== 'white') {\n        svgElement.style.setProperty('stroke', color)\n      }\n\n      if (fillAttr) {\n        const fillColor = fillAttr === 'white' ? 'white' : color\n        svgElement.style.setProperty('fill', fillColor)\n      }\n    }\n  })\n}\n\nexport const ThemedSVGImage = ({ divProps, image: SVG, isMini = false }: ThemedSVGImageProps) => {\n  const theme = useTheme()\n  const containerRef = useRef<SVGSVGElement | null>(null)\n\n  const colors = {\n    '100': (theme as any).palette.primary.lighter,\n    '200': theme.palette.primary.light,\n    '300': theme.palette.primary.main,\n    '400': theme.palette.primary.dark,\n    '500': (theme as any).palette.primary.darker,\n  }\n\n  // If the client does not have a color scheme aka widget brand color, set the colors to the primary kyper token colors\n  // Apply color scheme to SVG elements when component mounts or colors change\n  useEffect(() => {\n    if (!containerRef.current) return\n\n    const container = containerRef.current\n\n    const overlayElements = container.querySelectorAll('.Overlay')\n    const brandElements = ['brand100', 'brand200', 'brand300', 'brand400', 'brand500']\n\n    brandElements.forEach((className) => {\n      const elements = container.querySelectorAll(`.${className}`)\n      const colorKey = className.replace('brand', '') as keyof typeof colors\n      applyColorToSVG(elements, colors[colorKey])\n    })\n\n    // Apply the color for overlays separately (using the 300 color scheme)\n    applyColorToSVG(overlayElements, colors['300'])\n  }, [colors])\n\n  return (\n    <div\n      style={{\n        maxWidth: isMini ? MINI_SVG_WIDTH : MAX_SVG_WIDTH,\n        width: '100%',\n      }}\n      {...divProps}\n    >\n      <SVG ref={containerRef} />\n    </div>\n  )\n}\n"],"mappings":";;;AAOA,IAAM,IAAgB,KAChB,IAAiB,KAGjB,IAAA,CAAiB,MACd,KAAoC,MAIvC,IAAA,CAAmB,GAA+B,MAAkB;AACxE,EAAA,EAAS,QAAA,CAAS,MAAY;AAC5B,UAAM,IAAa,EAAc,CAAO;AACxC,QAAI,GAAY;AACd,YAAM,IAAa,EAAW,aAAa,QAAQ,GAC7C,IAAW,EAAW,aAAa,MAAM;AAM/C,UAJI,KAAc,MAAe,WAC/B,EAAW,MAAM,YAAY,UAAU,CAAK,GAG1C,GAAU;AACZ,cAAM,IAAY,MAAa,UAAU,UAAU;AACnD,QAAA,EAAW,MAAM,YAAY,QAAQ,CAAS;AAAA,MAChD;AAAA,IACF;AAAA,EACF,CAAC;AACH,GAEa,IAAA,CAAkB,EAAE,UAAA,GAAU,OAAO,GAAK,QAAA,IAAS,GAAA,MAAiC;AAC/F,QAAM,IAAQ,EAAS,GACjB,IAAe,EAA6B,IAAI,GAEhD,IAAS;AAAA,IACb,KAAQ,EAAc,QAAQ,QAAQ;AAAA,IACtC,KAAO,EAAM,QAAQ,QAAQ;AAAA,IAC7B,KAAO,EAAM,QAAQ,QAAQ;AAAA,IAC7B,KAAO,EAAM,QAAQ,QAAQ;AAAA,IAC7B,KAAQ,EAAc,QAAQ,QAAQ;AAAA,EACxC;AAIA,SAAA,EAAA,MAAgB;AACd,QAAI,CAAC,EAAa,QAAS;AAE3B,UAAM,IAAY,EAAa,SAEzB,IAAkB,EAAU,iBAAiB,UAAU;AAG7D;AAAA,MAFuB;AAAA,MAAY;AAAA,MAAY;AAAA,MAAY;AAAA,MAAY;AAAA,IAEvE,EAAc,QAAA,CAAS,MAAc;AACnC,YAAM,IAAW,EAAU,iBAAiB,IAAI,CAAA,EAAW,GACrD,IAAW,EAAU,QAAQ,SAAS,EAAE;AAC9C,MAAA,EAAgB,GAAU,EAAO,CAAA,CAAS;AAAA,IAC5C,CAAC,GAGD,EAAgB,GAAiB,EAAO,GAAA,CAAM;AAAA,EAChD,GAAG,CAAC,CAAM,CAAC,GAGT,gBAAA,EAAC,OAAD;AAAA,IACE,OAAO;AAAA,MACL,UAAU,IAAS,IAAiB;AAAA,MACpC,OAAO;AAAA,IACT;AAAA,IACA,GAAI;AAAA,IAEJ,UAAA,gBAAA,EAAC,GAAD,EAAK,KAAK,EAAe,CAAA;AAAA,EACtB,CAAA;AAET"}

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

@@ -0,0 +1,26 @@
+import { Theme } from '@mui/material/styles';
+/**
+ * Offset of the logo drop-shadow, in px. The shadow is painted with CSS
+ * `box-shadow`, which takes no layout space — so consumers that need the shadow
+ * to occupy layout (e.g. so a flex `gap` starts from the shadow's outer edge,
+ * not the logo's border) must reserve `.x`/`.y` as margin.
+ */
+export declare const LOGO_SHADOW_OFFSET: {
+    readonly x: 8;
+    readonly y: 6;
+};
+/**
+ * The offset drop-shadow used behind brand/merchant logo tiles across the
+ * insights-v2 components (MerchantLogo, P2PLogoStack, …).
+ *
+ * Figma renders a solid 75%-opacity black shape offset to the bottom-right of
+ * each logo tile; reproduced here as a single `boxShadow` (matches the shared
+ * v1 `P2PMultipleCategorization`).
+ */
+export declare const getLogoShadow: (theme: Theme) => string;
+/**
+ * The soft elevation shadow on the logo tiles in Monthly Subscription Aggregate
+ * V2 (Figma `DROP_SHADOW` 0 / 2 / blur 8, black @ 0.12). Unlike `getLogoShadow`
+ * this has no horizontal offset, so it stays within a padded row's edges.
+ */
+export declare const getLogoElevation: (theme: Theme) => string;

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

@@ -0,0 +1,12 @@
+import { alpha as p } from "@mui/material/styles";
+var a = {
+  x: 8,
+  y: 6
+}, x = (o) => `${a.x}px ${a.y}px 0 ${p(o.palette.common.black, 0.75)}`, e = (o) => `0px 2px 8px 0px ${p(o.palette.common.black, 0.12)}`;
+export {
+  a as LOGO_SHADOW_OFFSET,
+  e as getLogoElevation,
+  x as getLogoShadow
+};
+
+//# sourceMappingURL=logoShadow.es.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"logoShadow.es.js","names":[],"sources":["../../../src/insights-v2/components/logoShadow.ts"],"sourcesContent":["import { alpha, type Theme } from '@mui/material/styles'\n\n/**\n * Offset of the logo drop-shadow, in px. The shadow is painted with CSS\n * `box-shadow`, which takes no layout space — so consumers that need the shadow\n * to occupy layout (e.g. so a flex `gap` starts from the shadow's outer edge,\n * not the logo's border) must reserve `.x`/`.y` as margin.\n */\nexport const LOGO_SHADOW_OFFSET = { x: 8, y: 6 } as const\n\n/**\n * The offset drop-shadow used behind brand/merchant logo tiles across the\n * insights-v2 components (MerchantLogo, P2PLogoStack, …).\n *\n * Figma renders a solid 75%-opacity black shape offset to the bottom-right of\n * each logo tile; reproduced here as a single `boxShadow` (matches the shared\n * v1 `P2PMultipleCategorization`).\n */\nexport const getLogoShadow = (theme: Theme) =>\n  `${LOGO_SHADOW_OFFSET.x}px ${LOGO_SHADOW_OFFSET.y}px 0 ${alpha(theme.palette.common.black, 0.75)}`\n\n/**\n * The soft elevation shadow on the logo tiles in Monthly Subscription Aggregate\n * V2 (Figma `DROP_SHADOW` 0 / 2 / blur 8, black @ 0.12). Unlike `getLogoShadow`\n * this has no horizontal offset, so it stays within a padded row's edges.\n */\nexport const getLogoElevation = (theme: Theme) =>\n  `0px 2px 8px 0px ${alpha(theme.palette.common.black, 0.12)}`\n"],"mappings":";AAQA,IAAa,IAAqB;AAAA,EAAE,GAAG;AAAA,EAAG,GAAG;AAAE,GAUlC,IAAA,CAAiB,MAC5B,GAAG,EAAmB,CAAA,MAAO,EAAmB,CAAA,QAAS,EAAM,EAAM,QAAQ,OAAO,OAAO,IAAI,CAAA,IAOpF,IAAA,CAAoB,MAC/B,mBAAmB,EAAM,EAAM,QAAQ,OAAO,OAAO,IAAI,CAAA"}

package/dist/insights-v2/components/shared/Confetti.d.ts

@@ -0,0 +1,15 @@
+interface ConfettiProps {
+    /** Height of the burst area in pixels. */
+    height?: number;
+    /** Width of the burst area in pixels. */
+    width?: number;
+    /** Whether the confetti animation plays. */
+    shouldRun?: boolean;
+}
+/**
+ * Shared confetti burst for insights-v2 celebratory beats. Fires once from the center and
+ * settles (`recycle={false}`). Decorative only — `aria-hidden`. Callers size it via
+ * `width`/`height` (measure the container with `useContainerDimensions`).
+ */
+export declare const Confetti: ({ height, width, shouldRun }: ConfettiProps) => import("react/jsx-runtime").JSX.Element;
+export default Confetti;

package/dist/insights-v2/components/shared/Confetti.es.js

@@ -0,0 +1,33 @@
+import { jsx as r } from "react/jsx-runtime";
+import o from "react-confetti";
+var n = ({ height: e = 0, width: t = 0, shouldRun: i = !1 }) => /* @__PURE__ */ r(o, {
+  "aria-hidden": !0,
+  colors: [
+    "#3F9FEB",
+    "#C331B6",
+    "#30C434",
+    "#F1CE31",
+    "#EE3B7C"
+  ],
+  confettiSource: {
+    x: t / 2,
+    y: e / 2,
+    w: 20,
+    h: 20
+  },
+  gravity: 0.05,
+  height: e,
+  initialVelocityX: 7,
+  initialVelocityY: 8,
+  numberOfPieces: 200,
+  recycle: !1,
+  run: i,
+  style: { inset: "auto" },
+  width: t
+});
+export {
+  n as Confetti,
+  n as default
+};
+
+//# sourceMappingURL=Confetti.es.js.map

package/dist/insights-v2/components/shared/Confetti.es.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Confetti.es.js","names":[],"sources":["../../../../src/insights-v2/components/shared/Confetti.tsx"],"sourcesContent":["import ReactConfetti from 'react-confetti'\n\ninterface ConfettiProps {\n  /** Height of the burst area in pixels. */\n  height?: number\n  /** Width of the burst area in pixels. */\n  width?: number\n  /** Whether the confetti animation plays. */\n  shouldRun?: boolean\n}\n\n/**\n * Shared confetti burst for insights-v2 celebratory beats. Fires once from the center and\n * settles (`recycle={false}`). Decorative only — `aria-hidden`. Callers size it via\n * `width`/`height` (measure the container with `useContainerDimensions`).\n */\nexport const Confetti = ({ height = 0, width = 0, shouldRun = false }: ConfettiProps) => {\n  return (\n    <ReactConfetti\n      aria-hidden={true}\n      colors={['#3F9FEB', '#C331B6', '#30C434', '#F1CE31', '#EE3B7C']}\n      confettiSource={{\n        x: width / 2,\n        y: height / 2,\n        w: 20,\n        h: 20,\n      }}\n      gravity={0.05}\n      height={height}\n      initialVelocityX={7}\n      initialVelocityY={8}\n      numberOfPieces={200}\n      recycle={false}\n      run={shouldRun}\n      style={{ inset: 'auto' }}\n      width={width}\n    />\n  )\n}\n\nexport default Confetti\n"],"mappings":";;AAgBA,IAAa,IAAA,CAAY,EAAE,QAAA,IAAS,GAAG,OAAA,IAAQ,GAAG,WAAA,IAAY,GAAA,MAE1D,gBAAA,EAAC,GAAD;AAAA,EACE,eAAa;AAAA,EACb,QAAQ;AAAA,IAAC;AAAA,IAAW;AAAA,IAAW;AAAA,IAAW;AAAA,IAAW;AAAA,EAAS;AAAA,EAC9D,gBAAgB;AAAA,IACd,GAAG,IAAQ;AAAA,IACX,GAAG,IAAS;AAAA,IACZ,GAAG;AAAA,IACH,GAAG;AAAA,EACL;AAAA,EACA,SAAS;AAAA,EACD,QAAA;AAAA,EACR,kBAAkB;AAAA,EAClB,kBAAkB;AAAA,EAClB,gBAAgB;AAAA,EAChB,SAAS;AAAA,EACT,KAAK;AAAA,EACL,OAAO,EAAE,OAAO,OAAO;AAAA,EAChB,OAAA;AACR,CAAA"}