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

package/dist/insights-v2/blocks/ChartBlocks/DoubleBarChartBlock/CustomDoubleBar.d.ts

@@ -0,0 +1,18 @@
+import { default as React } from 'react';
+import { DataSet } from '../../../../core/types/InsightsInstanceSlotData';
+interface BarStyleProps extends React.CSSProperties {
+    x?: number;
+    y?: number;
+}
+interface CustomDoubleBarPlotMXUIProps {
+    color: string;
+    data: DataSet[];
+    series: Series;
+    style: BarStyleProps;
+}
+interface Series {
+    index: number;
+    type: number;
+}
+export declare const CustomDoubleBarPlotMXUI: ({ color, data, series, style, ...restProps }: CustomDoubleBarPlotMXUIProps) => import("react/jsx-runtime").JSX.Element;
+export {};

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

@@ -0,0 +1,45 @@
+import $ from "react";
+import { jsx as l } from "react/jsx-runtime";
+var B = ({ color: h, data: f, series: i, style: n, ...m }) => {
+  const r = $.useRef(null);
+  $.useLayoutEffect(() => {
+    const s = new ResizeObserver(() => {
+      window.requestAnimationFrame(() => {
+        if (r.current) {
+          const { width: g } = r.current.getBoundingClientRect(), v = g / 2, u = r.current.querySelector("text");
+          u && u.setAttribute("transform", `translate(${v}, -8)`);
+        }
+      });
+    });
+    return r.current && s.observe(r.current), () => {
+      r.current && s.unobserve(r.current);
+    };
+  }, []);
+  const { ariaLabelComparison: p, ariaLabelMain: b } = f[i.index], d = i.type === 0 ? b : p, L = {
+    ...n,
+    transition: "all 0.3s ease-in-out"
+  }, o = n.width || 0, c = n.height || 0, t = n.x || 0, e = n.y || 0, a = 4, x = `
+    M ${t + a},${e}
+    L ${t + o - a},${e}
+    Q ${t + o},${e} ${t + o},${e + a}
+    L ${t + o},${e + c}
+    L ${t},${e + c}
+    L ${t},${e + a}
+    Q ${t},${e} ${t + a},${e}
+    Z
+  `.trim();
+  return /* @__PURE__ */ l("g", {
+    "aria-label": d,
+    children: /* @__PURE__ */ l("path", {
+      ...m,
+      d: x,
+      fill: h,
+      style: L
+    })
+  });
+};
+export {
+  B as CustomDoubleBarPlotMXUI
+};
+
+//# sourceMappingURL=CustomDoubleBar.es.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"CustomDoubleBar.es.js","names":[],"sources":["../../../../../src/insights-v2/blocks/ChartBlocks/DoubleBarChartBlock/CustomDoubleBar.tsx"],"sourcesContent":["import React from 'react'\nimport type { DataSet } from '../../../../core/types/InsightsInstanceSlotData'\n\ninterface BarStyleProps extends React.CSSProperties {\n  x?: number\n  y?: number\n}\n\ninterface CustomDoubleBarPlotMXUIProps {\n  color: string\n  data: DataSet[]\n  series: Series\n  style: BarStyleProps\n}\n\ninterface Series {\n  index: number\n  type: number\n}\n\nexport const CustomDoubleBarPlotMXUI = ({\n  color,\n  data,\n  series,\n  style,\n  ...restProps\n}: CustomDoubleBarPlotMXUIProps) => {\n  const rectRef = React.useRef<SVGRectElement>(null)\n\n  React.useLayoutEffect(() => {\n    const resizeObserver = new ResizeObserver(() => {\n      window.requestAnimationFrame(() => {\n        if (rectRef.current) {\n          const { width } = rectRef.current.getBoundingClientRect()\n\n          const xValue = width / 2\n          const textElement = rectRef.current.querySelector('text')\n          if (textElement) {\n            textElement.setAttribute('transform', `translate(${xValue}, -8)`)\n          }\n        }\n      })\n    })\n\n    if (rectRef.current) resizeObserver.observe(rectRef.current)\n    return () => {\n      if (rectRef.current) resizeObserver.unobserve(rectRef.current)\n    }\n  }, [])\n\n  const { ariaLabelComparison, ariaLabelMain } = data[series.index]\n\n  const ariaLabel = series.type === 0 ? ariaLabelMain : ariaLabelComparison\n\n  const rectStyle = {\n    ...style,\n    transition: 'all 0.3s ease-in-out',\n  }\n\n  // Create path with rounded top corners (10px radius) and square bottom corners\n  const pathBarWidth = (style.width as number) || 0\n  const pathBarHeight = (style.height as number) || 0\n  const pathX = (style.x as number) || 0\n  const pathY = (style.y as number) || 0\n  const radius = 4\n\n  const pathData = `\n    M ${pathX + radius},${pathY}\n    L ${pathX + pathBarWidth - radius},${pathY}\n    Q ${pathX + pathBarWidth},${pathY} ${pathX + pathBarWidth},${pathY + radius}\n    L ${pathX + pathBarWidth},${pathY + pathBarHeight}\n    L ${pathX},${pathY + pathBarHeight}\n    L ${pathX},${pathY + radius}\n    Q ${pathX},${pathY} ${pathX + radius},${pathY}\n    Z\n  `.trim()\n\n  return (\n    <g aria-label={ariaLabel}>\n      <path {...restProps} d={pathData} fill={color} style={rectStyle} />\n    </g>\n  )\n}\n"],"mappings":";;AAoBA,IAAa,IAAA,CAA2B,EACtC,OAAA,GACA,MAAA,GACA,QAAA,GACA,OAAA,GACA,GAAG,EAAA,MAC+B;AAClC,QAAM,IAAU,EAAM,OAAuB,IAAI;AAEjD,EAAA,EAAM,gBAAA,MAAsB;AAC1B,UAAM,IAAiB,IAAI,eAAA,MAAqB;AAC9C,aAAO,sBAAA,MAA4B;AACjC,YAAI,EAAQ,SAAS;AACnB,gBAAM,EAAE,OAAA,EAAA,IAAU,EAAQ,QAAQ,sBAAsB,GAElD,IAAS,IAAQ,GACjB,IAAc,EAAQ,QAAQ,cAAc,MAAM;AACxD,UAAI,KACF,EAAY,aAAa,aAAa,aAAa,CAAA,OAAa;AAAA,QAEpE;AAAA,MACF,CAAC;AAAA,IACH,CAAC;AAED,WAAI,EAAQ,WAAS,EAAe,QAAQ,EAAQ,OAAO,GAC3D,MAAa;AACX,MAAI,EAAQ,WAAS,EAAe,UAAU,EAAQ,OAAO;AAAA,IAC/D;AAAA,EACF,GAAG,CAAC,CAAC;AAEL,QAAM,EAAE,qBAAA,GAAqB,eAAA,EAAA,IAAkB,EAAK,EAAO,KAAA,GAErD,IAAY,EAAO,SAAS,IAAI,IAAgB,GAEhD,IAAY;AAAA,IAChB,GAAG;AAAA,IACH,YAAY;AAAA,EACd,GAGM,IAAgB,EAAM,SAAoB,GAC1C,IAAiB,EAAM,UAAqB,GAC5C,IAAS,EAAM,KAAgB,GAC/B,IAAS,EAAM,KAAgB,GAC/B,IAAS,GAET,IAAW;AAAA,QACX,IAAQ,CAAA,IAAU,CAAA;AAAA,QAClB,IAAQ,IAAe,CAAA,IAAU,CAAA;AAAA,QACjC,IAAQ,CAAA,IAAgB,CAAA,IAAS,IAAQ,CAAA,IAAgB,IAAQ,CAAA;AAAA,QACjE,IAAQ,CAAA,IAAgB,IAAQ,CAAA;AAAA,QAChC,CAAA,IAAS,IAAQ,CAAA;AAAA,QACjB,CAAA,IAAS,IAAQ,CAAA;AAAA,QACjB,CAAA,IAAS,CAAA,IAAS,IAAQ,CAAA,IAAU,CAAA;AAAA;AAAA,IAExC,KAAK;AAEP,SACE,gBAAA,EAAC,KAAD;AAAA,IAAG,cAAY;AAAA,IACb,UAAA,gBAAA,EAAC,QAAD;AAAA,MAAM,GAAI;AAAA,MAAW,GAAG;AAAA,MAAU,MAAM;AAAA,MAAO,OAAO;AAAA,IAAY,CAAA;AAAA,EACjE,CAAA;AAEP"}

package/dist/insights-v2/blocks/ChartBlocks/DoubleBarChartBlock/DoubleBarChart.d.ts

@@ -0,0 +1,2 @@
+import { BlockProps } from '../../types';
+export declare const DoubleBarChartBlock: ({ payload: { instance_slot, instance_slot_data, widget_type }, beatGuid, }: BlockProps) => import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,125 @@
+import { useInsightsV2Store as B } from "../../../../common/context/hooks.es.js";
+import { EmptyBarChart as A } from "../../../components/chartblocks/EmptyBarChart.es.js";
+import { useContainerDimensions as v } from "../../../hooks/useContainerDimensions.es.js";
+import { CustomDoubleBarPlotMXUI as T } from "./CustomDoubleBar.es.js";
+import { Legend as L } from "./ChartLegend.es.js";
+import { getLayoutConfig as R } from "./layout.es.js";
+import D from "react";
+import K from "@mui/material/Stack";
+import { jsx as r, jsxs as d } from "react/jsx-runtime";
+import { useTheme as M } from "@mui/material/styles";
+import j from "@mui/material/Box";
+import { BarPlot as G } from "@mui/x-charts/BarChart";
+import { ChartContainer as N } from "@mui/x-charts/ChartContainer";
+import { ChartsXAxis as P } from "@mui/x-charts/ChartsXAxis";
+var Y = ({ payload: { instance_slot: h, instance_slot_data: s, widget_type: p }, beatGuid: f = "" }) => {
+  const { openChartDrilldown: y } = B(), l = p === "mini", { variant: g } = h, { data_series: i, legends: x } = s, a = i.length - 1, b = 5e-3, u = 0.16, C = M(), c = R(C, g).color, m = D.useRef(null), { height: I, width: k } = v(m), w = ({ dataIndex: e, seriesId: t }) => {
+    const o = Number(t.split("-").pop());
+    y(f, {
+      chartBarIndex: e,
+      tabIndex: o
+    });
+  }, n = x?.map((e, t) => ({
+    color: c[t],
+    ...e
+  }));
+  return i.length > 0 ? /* @__PURE__ */ d(K, {
+    sx: {
+      mb: 0,
+      width: "100%",
+      p: 0
+    },
+    children: [/* @__PURE__ */ r(j, {
+      ref: m,
+      sx: {
+        height: l ? 120 : 172,
+        touchAction: "pan-y",
+        width: "100%",
+        p: 0,
+        m: 0,
+        "& svg": {
+          touchAction: "pan-y",
+          userSelect: "none"
+        },
+        "& .recharts-wrapper": { touchAction: "pan-y" }
+      },
+      children: /* @__PURE__ */ d(N, {
+        colors: c,
+        dataset: i,
+        height: I,
+        margin: {
+          bottom: 16,
+          left: 24,
+          right: 24,
+          top: 0
+        },
+        series: [{
+          dataKey: "main",
+          type: "bar"
+        }, {
+          dataKey: "comparison",
+          type: "bar"
+        }],
+        width: k,
+        xAxis: [{
+          barGapRatio: b,
+          categoryGapRatio: u,
+          dataKey: "label",
+          scaleType: "band"
+        }],
+        yAxis: [{ width: 0 }],
+        children: [/* @__PURE__ */ r(P, {
+          disableTicks: !1,
+          slots: { axisTickLabel: ({ text: e, ...t }) => {
+            const o = a !== void 0 ? s.data_series[a]?.label : void 0;
+            return /* @__PURE__ */ r("text", {
+              ...t,
+              style: {
+                ...t.style,
+                fontWeight: o === e ? 700 : 400
+              },
+              children: e
+            });
+          } },
+          sx: { ".MuiChartsAxis-line": { stroke: "border.darker" } },
+          tickLabelStyle: {
+            fontSize: 11,
+            fill: "text.secondary",
+            fontWeight: 400
+          }
+        }), /* @__PURE__ */ r(G, {
+          onItemClick: (e, { dataIndex: t, seriesId: o }) => w({
+            dataIndex: t,
+            seriesId: o.toString()
+          }),
+          slots: { bar: (e) => {
+            const { ownerState: t, ...o } = e, S = a === void 0 || a === t.dataIndex ? t.color : `${t.color}50`;
+            return /* @__PURE__ */ r(T, {
+              ...o,
+              color: S,
+              data: i,
+              series: {
+                index: t.dataIndex,
+                type: Number(t.id?.toString().split("-").pop() ?? 0)
+              },
+              style: {
+                height: e.height,
+                x: e.x,
+                y: e.y,
+                width: e.width
+              }
+            });
+          } }
+        })]
+      })
+    }), n && !l && n.length > 0 && /* @__PURE__ */ r(L, {
+      legendItems: n,
+      legendStyle: { ml: 24 }
+    })]
+  }) : /* @__PURE__ */ r(A, {});
+};
+export {
+  Y as DoubleBarChartBlock
+};
+
+//# sourceMappingURL=DoubleBarChart.es.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"DoubleBarChart.es.js","names":[],"sources":["../../../../../src/insights-v2/blocks/ChartBlocks/DoubleBarChartBlock/DoubleBarChart.tsx"],"sourcesContent":["import React from 'react'\n\nimport Box from '@mui/material/Box'\nimport Stack from '@mui/material/Stack'\n\nimport { BarPlot } from '@mui/x-charts/BarChart'\nimport { ChartContainer } from '@mui/x-charts/ChartContainer'\nimport { ChartsXAxis } from '@mui/x-charts/ChartsXAxis'\nimport { useTheme } from '@mui/material/styles'\n\nimport { useInsightsV2Store } from '../../../../common'\nimport { useContainerDimensions } from '../../../hooks/useContainerDimensions'\nimport { BlockProps } from '../../types'\n\nimport { CustomDoubleBarPlotMXUI } from './CustomDoubleBar'\nimport { Legend } from './ChartLegend'\nimport { getLayoutConfig } from './layout'\nimport { EmptyBarChart } from '../../../components/chartblocks/EmptyBarChart'\nimport type { DataSet } from '../../../../core/types/InsightsInstanceSlotData'\nimport type { LegendProps } from '../../../../core/types/InsightsInstanceSlotData'\n\nexport const DoubleBarChartBlock = ({\n  payload: { instance_slot, instance_slot_data, widget_type },\n  beatGuid = '',\n}: BlockProps) => {\n  const { openChartDrilldown } = useInsightsV2Store()\n  const isMini = widget_type === 'mini'\n  const { variant } = instance_slot\n  const { data_series, legends } = instance_slot_data\n  const selectedTabIndex = (data_series! as DataSet[]).length - 1\n  const barGapRatio = 0.005\n  const categoryGapRatio = 0.16\n\n  const theme = useTheme()\n  const colors = getLayoutConfig(theme, variant).color\n\n  const containerRef = React.useRef<HTMLDivElement>(null)\n  const { height, width } = useContainerDimensions(containerRef)\n\n  const handleBarClick = ({ dataIndex, seriesId }: { dataIndex: number; seriesId: string }) => {\n    const seriesType = Number(seriesId.split('-').pop())\n    // chartBarIndex carries the clicked date column (same meaning as\n    // BarchartBlock's chartBarIndex); tabIndex carries the clicked sub-series\n    // within that column (0 = main, 1 = comparison).\n    openChartDrilldown(beatGuid, {\n      chartBarIndex: dataIndex,\n      tabIndex: seriesType,\n    })\n  }\n\n  const legendItems = legends?.map((legend, index) => ({\n    color: colors[index],\n    ...legend,\n  })) as LegendProps[]\n\n  //\n  return (data_series as DataSet[]).length > 0 ? (\n    <Stack sx={{ mb: 0, width: '100%', p: 0 }}>\n      <Box\n        ref={containerRef}\n        sx={{\n          height: isMini ? 120 : 172,\n          touchAction: 'pan-y',\n          width: '100%',\n          p: 0,\n          m: 0,\n          '& svg': {\n            touchAction: 'pan-y',\n            userSelect: 'none',\n          },\n          '& .recharts-wrapper': {\n            touchAction: 'pan-y',\n          },\n        }}\n      >\n        <ChartContainer\n          colors={colors}\n          dataset={data_series as any[]}\n          height={height}\n          margin={{\n            bottom: 16,\n            left: 24,\n            right: 24,\n            top: 0,\n          }}\n          series={[\n            { dataKey: 'main', type: 'bar' },\n            { dataKey: 'comparison', type: 'bar' },\n          ]}\n          width={width}\n          xAxis={[\n            {\n              barGapRatio,\n              categoryGapRatio,\n              dataKey: 'label',\n              scaleType: 'band',\n            },\n          ]}\n          yAxis={[{ width: 0 }]}\n        >\n          <ChartsXAxis\n            disableTicks={false}\n            slots={{\n              axisTickLabel: ({ text, ...restProps }) => {\n                const selectedLabel =\n                  selectedTabIndex !== undefined\n                    ? (instance_slot_data.data_series as DataSet[])[selectedTabIndex]?.label\n                    : undefined\n                return (\n                  <text\n                    {...restProps}\n                    style={\n                      {\n                        ...restProps.style,\n                        fontWeight: selectedLabel === text ? 700 : 400,\n                      } as React.CSSProperties\n                    }\n                  >\n                    {text}\n                  </text>\n                )\n              },\n            }}\n            sx={{\n              '.MuiChartsAxis-line': {\n                stroke: 'border.darker',\n              },\n            }}\n            tickLabelStyle={{\n              fontSize: 11,\n              fill: 'text.secondary',\n              fontWeight: 400,\n            }}\n          />\n          <BarPlot\n            onItemClick={(_, { dataIndex, seriesId }) =>\n              handleBarClick({ dataIndex, seriesId: seriesId.toString() })\n            }\n            slots={{\n              bar: (props) => {\n                const { ownerState, ...defaultProps } = props\n                const isSelected =\n                  selectedTabIndex === undefined || selectedTabIndex === ownerState.dataIndex\n                const barColor = isSelected ? ownerState.color : `${ownerState.color}50`\n\n                return (\n                  <CustomDoubleBarPlotMXUI\n                    {...defaultProps}\n                    color={barColor}\n                    data={data_series as DataSet[]}\n                    series={{\n                      index: ownerState.dataIndex,\n                      type: Number(ownerState.id?.toString().split('-').pop() ?? 0),\n                    }}\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        </ChartContainer>\n      </Box>\n\n      {legendItems && !isMini && legendItems.length > 0 && (\n        <Legend legendItems={legendItems} legendStyle={{ ml: 24 }} />\n      )}\n    </Stack>\n  ) : (\n    <EmptyBarChart />\n  )\n}\n"],"mappings":"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"}

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

@@ -0,0 +1 @@
+export * from './DoubleBarChart';

package/dist/insights-v2/blocks/ChartBlocks/DoubleBarChartBlock/layout.d.ts

@@ -0,0 +1,8 @@
+import { Theme } from '@mui/material/styles';
+export declare const getLayoutConfig: (theme: Theme, variant: string | null) => {
+    color: string[];
+} | {
+    color: string[];
+} | {
+    color: string[];
+};

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

@@ -0,0 +1,10 @@
+var a = (t, o) => ({
+  SpendToIncome: { color: [t.palette.categories.billsUtilities, t.palette.chart.chart1] },
+  DebtToIncome: { color: [t.palette.chart.chart1, t.palette.chart.chart5] },
+  SavingsToIncome: { color: [t.palette.chartMono.chartMono5, t.palette.chartMono.chartMono3] }
+})[o];
+export {
+  a as getLayoutConfig
+};
+
+//# sourceMappingURL=layout.es.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"layout.es.js","names":[],"sources":["../../../../../src/insights-v2/blocks/ChartBlocks/DoubleBarChartBlock/layout.ts"],"sourcesContent":["import type { Theme } from '@mui/material/styles'\n\nexport const getLayoutConfig = (theme: Theme, variant: string | null) => {\n  const config = {\n    SpendToIncome: {\n      color: [theme.palette.categories.billsUtilities, theme.palette.chart.chart1] as string[],\n    },\n    DebtToIncome: {\n      color: [theme.palette.chart.chart1, theme.palette.chart.chart5] as string[],\n    },\n    SavingsToIncome: {\n      color: [theme.palette.chartMono.chartMono5, theme.palette.chartMono.chartMono3] as string[],\n    },\n  }\n  return config[variant as keyof typeof config]\n}\n"],"mappings":"AAEA,IAAa,IAAA,CAAmB,GAAc,OAYrC;AAAA,EAVL,eAAe,EACb,OAAO,CAAC,EAAM,QAAQ,WAAW,gBAAgB,EAAM,QAAQ,MAAM,MAAM,EAC7E;AAAA,EACA,cAAc,EACZ,OAAO,CAAC,EAAM,QAAQ,MAAM,QAAQ,EAAM,QAAQ,MAAM,MAAM,EAChE;AAAA,EACA,iBAAiB,EACf,OAAO,CAAC,EAAM,QAAQ,UAAU,YAAY,EAAM,QAAQ,UAAU,UAAU,EAChF;AAEK,GAAO,CAAA"}

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

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

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

@@ -0,0 +1,28 @@
+import r from "./ProgressBar.es.js";
+import u from "@mui/material/Stack";
+import { jsx as o, jsxs as n } from "react/jsx-runtime";
+var i = ({ payload: t }) => {
+  const { instance_slot_data: l } = t, { previous: e, latest: a } = l.doubleProgressBar, s = Math.round(e.value / a.value * 100);
+  return /* @__PURE__ */ n(u, {
+    sx: {
+      px: 16,
+      pt: 8,
+      gap: 16
+    },
+    children: [/* @__PURE__ */ o(r, {
+      amount: e.value,
+      label: e.label,
+      percentage: s
+    }), /* @__PURE__ */ o(r, {
+      amount: a.value,
+      isBold: !0,
+      label: a.label,
+      percentage: 100
+    })]
+  });
+};
+export {
+  i as default
+};
+
+//# sourceMappingURL=DoubleProgressBarBlock.es.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"DoubleProgressBarBlock.es.js","names":[],"sources":["../../../../../src/insights-v2/blocks/ChartBlocks/DoubleProgressBarBlock/DoubleProgressBarBlock.tsx"],"sourcesContent":["import Stack from '@mui/material/Stack'\nimport { DoubleProgressBarBlockData } from '../../../../core/types/InsightsInstanceSlotData'\n\nimport type { BlockProps } from '../../types'\n\nimport ProgressBar from './ProgressBar'\n\nconst DoubleProgressBarBlock = ({ payload }: BlockProps<DoubleProgressBarBlockData>) => {\n  const { instance_slot_data } = payload\n  const { previous, latest } = instance_slot_data.doubleProgressBar\n  const percentage = Math.round((previous.value / latest.value) * 100)\n\n  return (\n    <Stack sx={{ px: 16, pt: 8, gap: 16 }}>\n      <ProgressBar amount={previous.value} label={previous.label} percentage={percentage} />\n      <ProgressBar amount={latest.value} isBold={true} label={latest.label} percentage={100} />\n    </Stack>\n  )\n}\n\nexport default DoubleProgressBarBlock\n"],"mappings":";;;AAOA,IAAM,IAAA,CAA0B,EAAE,SAAA,EAAA,MAAsD;AACtF,QAAM,EAAE,oBAAA,EAAA,IAAuB,GACzB,EAAE,UAAA,GAAU,QAAA,EAAA,IAAW,EAAmB,mBAC1C,IAAa,KAAK,MAAO,EAAS,QAAQ,EAAO,QAAS,GAAG;AAEnE,SACE,gBAAA,EAAC,GAAD;AAAA,IAAO,IAAI;AAAA,MAAE,IAAI;AAAA,MAAI,IAAI;AAAA,MAAG,KAAK;AAAA,IAAG;AAAA,IAApC,UAAA,CACE,gBAAA,EAAC,GAAD;AAAA,MAAa,QAAQ,EAAS;AAAA,MAAO,OAAO,EAAS;AAAA,MAAmB,YAAA;AAAA,IAAa,CAAA,GACrF,gBAAA,EAAC,GAAD;AAAA,MAAa,QAAQ,EAAO;AAAA,MAAO,QAAQ;AAAA,MAAM,OAAO,EAAO;AAAA,MAAO,YAAY;AAAA,IAAM,CAAA,CACnF;AAAA;AAEX"}

package/dist/insights-v2/blocks/ChartBlocks/DoubleProgressBarBlock/ProgressBar.d.ts

@@ -0,0 +1,8 @@
+interface ProgressBarProps {
+    label: string;
+    amount: number;
+    percentage: number;
+    isBold?: boolean;
+}
+declare const ProgressBar: ({ label, amount, percentage, isBold }: ProgressBarProps) => import("react/jsx-runtime").JSX.Element;
+export default ProgressBar;

package/dist/insights-v2/blocks/ChartBlocks/DoubleProgressBarBlock/ProgressBar.es.js

@@ -0,0 +1,44 @@
+import { formatCurrency as c } from "../../../../core/utils/NumberFormatting.es.js";
+import e from "@mui/material/Stack";
+import { Text as o } from "@mxenabled/mxui";
+import { jsx as r, jsxs as i } from "react/jsx-runtime";
+import { useTheme as l } from "@mui/material/styles";
+import h from "@mui/material/Box";
+var b = ({ label: n, amount: a, percentage: m, isBold: s }) => {
+  const t = l();
+  return /* @__PURE__ */ i(e, {
+    sx: { gap: 4 },
+    children: [/* @__PURE__ */ i(e, {
+      sx: {
+        alignItems: "center",
+        flexDirection: "row",
+        justifyContent: "space-between"
+      },
+      children: [/* @__PURE__ */ r(o, {
+        variant: "caption",
+        children: n
+      }), /* @__PURE__ */ r(o, {
+        bold: s,
+        variant: "caption",
+        children: c(a, "0,0.00")
+      })]
+    }), /* @__PURE__ */ r(e, {
+      sx: {
+        bgcolor: t.palette.warning.lighter,
+        height: 12,
+        borderRadius: 6
+      },
+      children: /* @__PURE__ */ r(h, { sx: {
+        bgcolor: t.palette.warning.main,
+        height: 12,
+        borderRadius: 6,
+        width: `${m}%`
+      } })
+    })]
+  });
+};
+export {
+  b as default
+};
+
+//# sourceMappingURL=ProgressBar.es.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ProgressBar.es.js","names":[],"sources":["../../../../../src/insights-v2/blocks/ChartBlocks/DoubleProgressBarBlock/ProgressBar.tsx"],"sourcesContent":["import Box from '@mui/material/Box'\nimport Stack from '@mui/material/Stack'\nimport { useTheme } from '@mui/material/styles'\nimport { Text } from '@mxenabled/mxui'\n\nimport { formatCurrency } from '../../../../core/utils/NumberFormatting'\n\ninterface ProgressBarProps {\n  label: string\n  amount: number\n  percentage: number\n  isBold?: boolean\n}\n\nconst ProgressBar = ({ label, amount, percentage, isBold }: ProgressBarProps) => {\n  const theme = useTheme()\n  return (\n    <Stack sx={{ gap: 4 }}>\n      <Stack sx={{ alignItems: 'center', flexDirection: 'row', justifyContent: 'space-between' }}>\n        <Text variant=\"caption\">{label}</Text>\n        <Text bold={isBold} variant=\"caption\">\n          {formatCurrency(amount, '0,0.00')}\n        </Text>\n      </Stack>\n      <Stack sx={{ bgcolor: theme.palette.warning.lighter, height: 12, borderRadius: 6 }}>\n        <Box\n          sx={{\n            bgcolor: theme.palette.warning.main,\n            height: 12,\n            borderRadius: 6,\n            width: `${percentage}%`,\n          }}\n        />\n      </Stack>\n    </Stack>\n  )\n}\n\nexport default ProgressBar\n"],"mappings":";;;;;;AAcA,IAAM,IAAA,CAAe,EAAE,OAAA,GAAO,QAAA,GAAQ,YAAA,GAAY,QAAA,EAAA,MAA+B;AAC/E,QAAM,IAAQ,EAAS;AACvB,SACE,gBAAA,EAAC,GAAD;AAAA,IAAO,IAAI,EAAE,KAAK,EAAE;AAAA,IAApB,UAAA,CACE,gBAAA,EAAC,GAAD;AAAA,MAAO,IAAI;AAAA,QAAE,YAAY;AAAA,QAAU,eAAe;AAAA,QAAO,gBAAgB;AAAA,MAAgB;AAAA,MAAzF,UAAA,CACE,gBAAA,EAAC,GAAD;AAAA,QAAM,SAAQ;AAAA,QAAW,UAAA;AAAA,MAAY,CAAA,GACrC,gBAAA,EAAC,GAAD;AAAA,QAAM,MAAM;AAAA,QAAQ,SAAQ;AAAA,QACzB,UAAA,EAAe,GAAQ,QAAQ;AAAA,MAC5B,CAAA,CACD;AAAA,IACP,CAAA,GAAA,gBAAA,EAAC,GAAD;AAAA,MAAO,IAAI;AAAA,QAAE,SAAS,EAAM,QAAQ,QAAQ;AAAA,QAAS,QAAQ;AAAA,QAAI,cAAc;AAAA,MAAE;AAAA,MAC/E,UAAA,gBAAA,EAAC,GAAD,EACE,IAAI;AAAA,QACF,SAAS,EAAM,QAAQ,QAAQ;AAAA,QAC/B,QAAQ;AAAA,QACR,cAAc;AAAA,QACd,OAAO,GAAG,CAAA;AAAA,MACZ,EACD,CAAA;AAAA,IACI,CAAA,CACF;AAAA;AAEX"}

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

@@ -0,0 +1 @@
+export * from './DoubleProgressBarBlock';

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

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

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

@@ -0,0 +1,15 @@
+import { variants as s } from "./index.es.js";
+import i from "@mui/material/Stack";
+import { jsx as t } from "react/jsx-runtime";
+var m = ({ payload: a }) => {
+  const { instance_slot: { variant: r }, instance_slot_data: o } = a, n = s[r];
+  return /* @__PURE__ */ t(i, {
+    sx: { p: 16 },
+    children: /* @__PURE__ */ t(n, { slotData: o })
+  });
+};
+export {
+  m as default
+};
+
+//# sourceMappingURL=StepChartBlock.es.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"StepChartBlock.es.js","names":[],"sources":["../../../../../src/insights-v2/blocks/ChartBlocks/StepChartBlock/StepChartBlock.tsx"],"sourcesContent":["import Stack from '@mui/material/Stack'\n\nimport type { StepChartBlockData } from '../../../../core/types/InsightsInstanceSlotData'\n\nimport type { BlockProps } from '../..'\n\nimport { variants } from '.'\n\nconst StepChartBlock = ({ payload }: BlockProps<StepChartBlockData>) => {\n  const {\n    instance_slot: { variant },\n    instance_slot_data,\n  } = payload\n\n  const Variant = variants[variant as keyof typeof variants]\n\n  return (\n    <Stack sx={{ p: 16 }}>\n      <Variant slotData={instance_slot_data} />\n    </Stack>\n  )\n}\n\nexport default StepChartBlock\n"],"mappings":";;;AAQA,IAAM,IAAA,CAAkB,EAAE,SAAA,EAAA,MAA8C;AACtE,QAAM,EACJ,eAAe,EAAE,SAAA,EAAA,GACjB,oBAAA,EAAA,IACE,GAEE,IAAU,EAAS,CAAA;AAEzB,SACE,gBAAA,EAAC,GAAD;AAAA,IAAO,IAAI,EAAE,GAAG,GAAG;AAAA,IACjB,UAAA,gBAAA,EAAC,GAAD,EAAS,UAAU,EAAqB,CAAA;AAAA,EACnC,CAAA;AAEX"}

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

@@ -0,0 +1,9 @@
+export { default } from './StepChartBlock';
+export declare const variants: {
+    WithoutText: ({ slotData }: {
+        slotData: import('../../../../core/types/InsightsInstanceSlotData').StepChartBlockData;
+    }) => import("react/jsx-runtime").JSX.Element;
+    WithText: ({ slotData }: {
+        slotData: import('../../../../core/types/InsightsInstanceSlotData').StepChartBlockData;
+    }) => import("react/jsx-runtime").JSX.Element;
+};

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

@@ -0,0 +1,13 @@
+import t from "./variants/WithoutText.es.js";
+import r from "./variants/WithText.es.js";
+import m from "./StepChartBlock.es.js";
+var e = {
+  WithoutText: t,
+  WithText: r
+};
+export {
+  m as default,
+  e as variants
+};
+
+//# sourceMappingURL=index.es.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.es.js","names":[],"sources":["../../../../../src/insights-v2/blocks/ChartBlocks/StepChartBlock/index.ts"],"sourcesContent":["import WithoutText from './variants/WithoutText'\nimport WithText from './variants/WithText'\n\nexport { default } from './StepChartBlock'\n\n// TODO: Replace all names with the corresponding backend variant names.\n\nexport const variants = {\n  WithoutText: WithoutText,\n  WithText: WithText,\n}\n"],"mappings":";;;AAOA,IAAa,IAAW;AAAA,EACT,aAAA;AAAA,EACH,UAAA;AACZ"}

package/dist/insights-v2/blocks/ChartBlocks/StepChartBlock/utils.d.ts

@@ -0,0 +1,19 @@
+import { Theme } from '@mui/material/styles';
+export declare const getStepColor: (theme: Theme, isActive: boolean) => string;
+export declare const getStepStyles: (theme: Theme, completed: boolean, allCompleted: boolean) => {
+    dot: {
+        outlineColor: string;
+        width: number;
+        outline?: string | undefined;
+        bgcolor: string;
+        border: string;
+        borderColor: string;
+        borderRadius: string;
+        height: number;
+    };
+    connector: {
+        bgcolor: string;
+        height: number;
+        width: number;
+    };
+};

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

@@ -0,0 +1,27 @@
+import { alpha as o } from "@mui/material/styles";
+var n = (i, r) => r ? "success.main" : o(i.palette.success.main, 0.12), c = (i, r, e) => {
+  const a = e ? i.palette.success.main : i.palette.primary.main, t = e ? "success.main" : "primary.main";
+  return {
+    dot: {
+      bgcolor: r ? t : "transparent",
+      border: "2px solid",
+      borderColor: r ? t : i.palette.divider,
+      borderRadius: "99999px",
+      height: 12,
+      ...r && { outline: "4px solid" },
+      outlineColor: r ? o(a, 0.25) : i.palette.divider,
+      width: 12
+    },
+    connector: {
+      bgcolor: r ? t : "divider",
+      height: 2,
+      width: 61.33
+    }
+  };
+};
+export {
+  n as getStepColor,
+  c as getStepStyles
+};
+
+//# sourceMappingURL=utils.es.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"utils.es.js","names":[],"sources":["../../../../../src/insights-v2/blocks/ChartBlocks/StepChartBlock/utils.ts"],"sourcesContent":["import { alpha, type Theme } from '@mui/material/styles'\n\nexport const getStepColor = (theme: Theme, isActive: boolean) => {\n  if (isActive) return 'success.main'\n\n  return alpha(theme.palette.success.main, 0.12)\n}\n\nexport const getStepStyles = (theme: Theme, completed: boolean, allCompleted: boolean) => {\n  const activeColor = allCompleted ? theme.palette.success.main : theme.palette.primary.main\n  const activeKey = allCompleted ? 'success.main' : 'primary.main'\n\n  return {\n    dot: {\n      bgcolor: completed ? activeKey : 'transparent',\n      border: '2px solid',\n      borderColor: completed ? activeKey : theme.palette.divider,\n      borderRadius: '99999px',\n      height: 12,\n\n      ...(completed && { outline: '4px solid' }),\n      outlineColor: completed ? alpha(activeColor, 0.25) : theme.palette.divider,\n\n      width: 12,\n    },\n    connector: {\n      bgcolor: completed ? activeKey : 'divider',\n      height: 2,\n      width: 61.33,\n    },\n  }\n}\n"],"mappings":";AAEA,IAAa,IAAA,CAAgB,GAAc,MACrC,IAAiB,iBAEd,EAAM,EAAM,QAAQ,QAAQ,MAAM,IAAI,GAGlC,IAAA,CAAiB,GAAc,GAAoB,MAA0B;AACxF,QAAM,IAAc,IAAe,EAAM,QAAQ,QAAQ,OAAO,EAAM,QAAQ,QAAQ,MAChF,IAAY,IAAe,iBAAiB;AAElD,SAAO;AAAA,IACL,KAAK;AAAA,MACH,SAAS,IAAY,IAAY;AAAA,MACjC,QAAQ;AAAA,MACR,aAAa,IAAY,IAAY,EAAM,QAAQ;AAAA,MACnD,cAAc;AAAA,MACd,QAAQ;AAAA,MAER,GAAI,KAAa,EAAE,SAAS,YAAY;AAAA,MACxC,cAAc,IAAY,EAAM,GAAa,IAAI,IAAI,EAAM,QAAQ;AAAA,MAEnE,OAAO;AAAA,IACT;AAAA,IACA,WAAW;AAAA,MACT,SAAS,IAAY,IAAY;AAAA,MACjC,QAAQ;AAAA,MACR,OAAO;AAAA,IACT;AAAA,EACF;AACF"}

package/dist/insights-v2/blocks/ChartBlocks/StepChartBlock/variants/WithText.d.ts

@@ -0,0 +1,5 @@
+import { StepChartBlockData } from '../../../../../core/types/InsightsInstanceSlotData';
+declare const WithText: ({ slotData }: {
+    slotData: StepChartBlockData;
+}) => import("react/jsx-runtime").JSX.Element;
+export default WithText;

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

@@ -0,0 +1,78 @@
+import { formatCurrency as g } from "../../../../../core/utils/NumberFormatting.es.js";
+import { getStepColor as l } from "../utils.es.js";
+import u from "react";
+import o from "@mui/material/Stack";
+import { H3 as b, Text as m } from "@mxenabled/mxui";
+import { CheckCircle as C, CircleIcon as I } from "@mxenabled/mx-icons";
+import { jsx as r, jsxs as t } from "react/jsx-runtime";
+import n from "@mui/material/Box";
+var a = [
+  100,
+  500,
+  1e3
+], S = [
+  0,
+  1,
+  2
+], j = ({ slotData: d }) => {
+  const { completed_steps: s, label_1: p, label_2: h } = d, x = a.length === s;
+  return /* @__PURE__ */ t(o, {
+    sx: {
+      bgcolor: "success.lighter",
+      border: "1px solid",
+      borderColor: "success.main",
+      borderRadius: "8px",
+      gap: 16,
+      py: 16
+    },
+    children: [/* @__PURE__ */ t(o, {
+      sx: { px: 16 },
+      children: [/* @__PURE__ */ r(m, {
+        color: "text.secondary",
+        variant: "tiny",
+        children: p
+      }), /* @__PURE__ */ r(b, {
+        color: "success.dark",
+        children: h
+      })]
+    }), /* @__PURE__ */ r(o, {
+      sx: { height: 40 },
+      children: /* @__PURE__ */ t(o, {
+        sx: { flexDirection: "row" },
+        children: [S.map((e) => {
+          const c = e < s, f = c ? C : I;
+          return /* @__PURE__ */ t(u.Fragment, { children: [/* @__PURE__ */ r(n, { sx: (i) => ({
+            bgcolor: l(i, c),
+            height: 2,
+            mt: 12,
+            width: 54
+          }) }), /* @__PURE__ */ t(o, {
+            sx: {
+              alignItems: "center",
+              width: 24
+            },
+            children: [/* @__PURE__ */ r(f, {
+              filled: !0,
+              size: 24,
+              sx: (i) => ({ color: l(i, c) })
+            }), /* @__PURE__ */ r(m, {
+              color: c ? "text.primary" : "text.secondary",
+              variant: "caption",
+              children: g(a[e], "0")
+            })]
+          })] }, e);
+        }), /* @__PURE__ */ r(n, { sx: (e) => ({
+          bgcolor: l(e, x),
+          height: 2,
+          mt: 12,
+          width: 54
+        }) })]
+      })
+    })]
+  });
+};
+export {
+  j as default
+};
+
+//# sourceMappingURL=WithText.es.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"WithText.es.js","names":[],"sources":["../../../../../../src/insights-v2/blocks/ChartBlocks/StepChartBlock/variants/WithText.tsx"],"sourcesContent":["import React from 'react'\n\nimport Box from '@mui/material/Box'\nimport Stack from '@mui/material/Stack'\n\nimport { H3, Text } from '@mxenabled/mxui'\nimport { CheckCircle, CircleIcon } from '@mxenabled/mx-icons'\n\nimport { formatCurrency } from '../../../../../common'\nimport type { StepChartBlockData } from '../../../../../core/types/InsightsInstanceSlotData'\n\nimport { getStepColor } from '../utils'\n\nconst MILESTONES = [100, 500, 1000] as const\nconst MILESTONE_INDICES = [0, 1, 2] as const\n\n// TODO: Update bgColor, borderColor, and color based on the variants.\n\nconst WithText = ({ slotData }: { slotData: StepChartBlockData }) => {\n  const { completed_steps: completedSteps, label_1, label_2 } = slotData\n  const allCompleted = MILESTONES.length === completedSteps\n\n  return (\n    <Stack\n      sx={{\n        bgcolor: 'success.lighter',\n        border: '1px solid',\n        borderColor: 'success.main',\n        borderRadius: '8px',\n        gap: 16,\n        py: 16,\n      }}\n    >\n      <Stack sx={{ px: 16 }}>\n        <Text color=\"text.secondary\" variant=\"tiny\">\n          {label_1}\n        </Text>\n        <H3 color=\"success.dark\">{label_2}</H3>\n      </Stack>\n      <Stack sx={{ height: 40 }}>\n        <Stack sx={{ flexDirection: 'row' }}>\n          {MILESTONE_INDICES.map((index) => {\n            const completed = index < completedSteps\n            const Icon = completed ? CheckCircle : CircleIcon\n\n            return (\n              <React.Fragment key={index}>\n                <Box\n                  sx={(theme) => ({\n                    bgcolor: getStepColor(theme, completed),\n                    height: 2,\n                    mt: 12,\n                    width: 54,\n                  })}\n                />\n                <Stack sx={{ alignItems: 'center', width: 24 }}>\n                  <Icon\n                    filled={true}\n                    size={24}\n                    sx={(theme) => ({ color: getStepColor(theme, completed) })}\n                  />\n                  <Text color={completed ? 'text.primary' : 'text.secondary'} variant=\"caption\">\n                    {formatCurrency(MILESTONES[index], '0')}\n                  </Text>\n                </Stack>\n              </React.Fragment>\n            )\n          })}\n          <Box\n            sx={(theme) => ({\n              bgcolor: getStepColor(theme, allCompleted),\n              height: 2,\n              mt: 12,\n              width: 54,\n            })}\n          />\n        </Stack>\n      </Stack>\n    </Stack>\n  )\n}\n\nexport default WithText\n"],"mappings":";;;;;;;;AAaA,IAAM,IAAa;AAAA,EAAC;AAAA,EAAK;AAAA,EAAK;AAAI,GAC5B,IAAoB;AAAA,EAAC;AAAA,EAAG;AAAA,EAAG;AAAC,GAI5B,IAAA,CAAY,EAAE,UAAA,EAAA,MAAiD;AACnE,QAAM,EAAE,iBAAiB,GAAgB,SAAA,GAAS,SAAA,EAAA,IAAY,GACxD,IAAe,EAAW,WAAW;AAE3C,SACE,gBAAA,EAAC,GAAD;AAAA,IACE,IAAI;AAAA,MACF,SAAS;AAAA,MACT,QAAQ;AAAA,MACR,aAAa;AAAA,MACb,cAAc;AAAA,MACd,KAAK;AAAA,MACL,IAAI;AAAA,IACN;AAAA,IARF,UAAA,CAUE,gBAAA,EAAC,GAAD;AAAA,MAAO,IAAI,EAAE,IAAI,GAAG;AAAA,MAApB,UAAA,CACE,gBAAA,EAAC,GAAD;AAAA,QAAM,OAAM;AAAA,QAAiB,SAAQ;AAAA,QAClC,UAAA;AAAA,MACG,CAAA,GACN,gBAAA,EAAC,GAAD;AAAA,QAAI,OAAM;AAAA,QAAgB,UAAA;AAAA,MAAY,CAAA,CACjC;AAAA,IACP,CAAA,GAAA,gBAAA,EAAC,GAAD;AAAA,MAAO,IAAI,EAAE,QAAQ,GAAG;AAAA,MACtB,UAAA,gBAAA,EAAC,GAAD;AAAA,QAAO,IAAI,EAAE,eAAe,MAAM;AAAA,QAAlC,UAAA,CACG,EAAkB,IAAA,CAAK,MAAU;AAChC,gBAAM,IAAY,IAAQ,GACpB,IAAO,IAAY,IAAc;AAEvC,iBACE,gBAAA,EAAC,EAAM,UAAP,EAAA,UAAA,CACE,gBAAA,EAAC,GAAD,EACE,IAAA,CAAK,OAAW;AAAA,YACd,SAAS,EAAa,GAAO,CAAS;AAAA,YACtC,QAAQ;AAAA,YACR,IAAI;AAAA,YACJ,OAAO;AAAA,UACT,GACD,CAAA,GACD,gBAAA,EAAC,GAAD;AAAA,YAAO,IAAI;AAAA,cAAE,YAAY;AAAA,cAAU,OAAO;AAAA,YAAG;AAAA,YAA7C,UAAA,CACE,gBAAA,EAAC,GAAD;AAAA,cACE,QAAQ;AAAA,cACR,MAAM;AAAA,cACN,IAAA,CAAK,OAAW,EAAE,OAAO,EAAa,GAAO,CAAS,EAAE;AAAA,YACzD,CAAA,GACD,gBAAA,EAAC,GAAD;AAAA,cAAM,OAAO,IAAY,iBAAiB;AAAA,cAAkB,SAAQ;AAAA,cACjE,UAAA,EAAe,EAAW,CAAA,GAAQ,GAAG;AAAA,YAClC,CAAA,CACD;AAAA,UACO,CAAA,CAAA,EAAA,GAnBK,CAmBL;AAAA,QAEpB,CAAC,GACD,gBAAA,EAAC,GAAD,EACE,IAAA,CAAK,OAAW;AAAA,UACd,SAAS,EAAa,GAAO,CAAY;AAAA,UACzC,QAAQ;AAAA,UACR,IAAI;AAAA,UACJ,OAAO;AAAA,QACT,GACD,CAAA,CACI;AAAA;IACF,CAAA,CACF;AAAA;AAEX"}

package/dist/insights-v2/blocks/ChartBlocks/StepChartBlock/variants/WithoutText.d.ts

@@ -0,0 +1,5 @@
+import { StepChartBlockData } from '../../../../../core/types/InsightsInstanceSlotData';
+declare const WithoutText: ({ slotData }: {
+    slotData: StepChartBlockData;
+}) => import("react/jsx-runtime").JSX.Element;
+export default WithoutText;