@mx-cartographer/experiences 9.2.4-alpha.al4 → 9.3.0-alph.bb2

package/dist/insights/components/shared/Charts/BarChart/DoubleBarChartLegendMXUI.es.js

@@ -0,0 +1,73 @@
+import i from "@mui/material/Stack";
+import { Text as l } from "@mxenabled/mxui";
+import { jsx as e, jsxs as r } from "react/jsx-runtime";
+var f = ({ comparisonColor: a, legendLabelComparison: t, legendLabelMain: n, legendStyle: o = {}, mainColor: h }) => /* @__PURE__ */ r(i, {
+  sx: {
+    alignItems: "center",
+    flexDirection: "row",
+    gap: 24,
+    justifyContent: "flex-start",
+    pt: 8,
+    ...o
+  },
+  children: [n && /* @__PURE__ */ r(i, {
+    alignItems: "center",
+    flexDirection: "row",
+    gap: 8,
+    children: [/* @__PURE__ */ e("svg", {
+      "aria-hidden": "true",
+      "aria-labelledby": "legendMain",
+      fill: "none",
+      height: "12",
+      role: "figure",
+      width: "12",
+      children: /* @__PURE__ */ e("rect", {
+        fill: h,
+        height: "12",
+        rx: "2",
+        width: "12",
+        x: "0.4375"
+      })
+    }), /* @__PURE__ */ e(l, {
+      id: "legendMain",
+      sx: {
+        fontSize: 13,
+        fontWeight: 400
+      },
+      variant: "caption",
+      children: n
+    })]
+  }), t && /* @__PURE__ */ r(i, {
+    alignItems: "center",
+    flexDirection: "row",
+    gap: 8,
+    children: [/* @__PURE__ */ e("svg", {
+      "aria-hidden": "true",
+      "aria-labelledby": "legendComparison",
+      fill: "none",
+      height: "12",
+      role: "figure",
+      width: "12",
+      children: /* @__PURE__ */ e("rect", {
+        fill: a,
+        height: "12",
+        rx: "2",
+        width: "12",
+        x: "0.4375"
+      })
+    }), /* @__PURE__ */ e(l, {
+      id: "legendComparison",
+      sx: {
+        fontSize: 13,
+        fontWeight: 400
+      },
+      variant: "caption",
+      children: t
+    })]
+  })]
+});
+export {
+  f as DoubleBarChartLegendMXUI
+};
+
+//# sourceMappingURL=DoubleBarChartLegendMXUI.es.js.map

package/dist/insights/components/shared/Charts/BarChart/DoubleBarChartLegendMXUI.es.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DoubleBarChartLegendMXUI.es.js","names":[],"sources":["../../../../../../src/insights/components/shared/Charts/BarChart/DoubleBarChartLegendMXUI.tsx"],"sourcesContent":["import { Text } from '@mxenabled/mxui'\n\nimport Stack from '@mui/material/Stack'\nimport { type SxProps } from '@mui/material/styles'\n\ninterface DoubleBarChartLegendMXUIProps {\n  comparisonColor: string\n  legendLabelComparison?: string\n  legendLabelMain?: string\n  legendStyle?: SxProps\n  mainColor: string\n}\n\nexport const DoubleBarChartLegendMXUI = ({\n  comparisonColor,\n  legendLabelComparison,\n  legendLabelMain,\n  legendStyle = {},\n  mainColor,\n}: DoubleBarChartLegendMXUIProps) => (\n  <Stack\n    sx={{\n      alignItems: 'center',\n      flexDirection: 'row',\n      gap: 24,\n      justifyContent: 'flex-start',\n      pt: 8,\n      ...legendStyle,\n    }}\n  >\n    {legendLabelMain && (\n      <Stack alignItems=\"center\" flexDirection=\"row\" gap={8}>\n        <svg\n          aria-hidden=\"true\"\n          aria-labelledby=\"legendMain\"\n          fill=\"none\"\n          height=\"12\"\n          role=\"figure\"\n          width=\"12\"\n        >\n          <rect fill={mainColor} height=\"12\" rx=\"2\" width=\"12\" x=\"0.4375\" />\n        </svg>\n        <Text id=\"legendMain\" sx={{ fontSize: 13, fontWeight: 400 }} variant=\"caption\">\n          {legendLabelMain}\n        </Text>\n      </Stack>\n    )}\n    {legendLabelComparison && (\n      <Stack alignItems=\"center\" flexDirection=\"row\" gap={8}>\n        <svg\n          aria-hidden=\"true\"\n          aria-labelledby=\"legendComparison\"\n          fill=\"none\"\n          height=\"12\"\n          role=\"figure\"\n          width=\"12\"\n        >\n          <rect fill={comparisonColor} height=\"12\" rx=\"2\" width=\"12\" x=\"0.4375\" />\n        </svg>\n        <Text id=\"legendComparison\" sx={{ fontSize: 13, fontWeight: 400 }} variant=\"caption\">\n          {legendLabelComparison}\n        </Text>\n      </Stack>\n    )}\n  </Stack>\n)\n"],"mappings":";;;AAaA,IAAa,IAAA,CAA4B,EACvC,iBAAA,GACA,uBAAA,GACA,iBAAA,GACA,aAAA,IAAc,CAAC,GACf,WAAA,EAAA,MAEA,gBAAA,EAAC,GAAD;AAAA,EACE,IAAI;AAAA,IACF,YAAY;AAAA,IACZ,eAAe;AAAA,IACf,KAAK;AAAA,IACL,gBAAgB;AAAA,IAChB,IAAI;AAAA,IACJ,GAAG;AAAA,EACL;AAAA,YARF,CAUG,KACC,gBAAA,EAAC,GAAD;AAAA,IAAO,YAAW;AAAA,IAAS,eAAc;AAAA,IAAM,KAAK;AAAA,cAApD,CACE,gBAAA,EAAC,OAAD;AAAA,MACE,eAAY;AAAA,MACZ,mBAAgB;AAAA,MAChB,MAAK;AAAA,MACL,QAAO;AAAA,MACP,MAAK;AAAA,MACL,OAAM;AAAA,gBAEN,gBAAA,EAAC,QAAD;AAAA,QAAM,MAAM;AAAA,QAAW,QAAO;AAAA,QAAK,IAAG;AAAA,QAAI,OAAM;AAAA,QAAK,GAAE;AAAA,MAAU,CAAA;AAAA,IAC9D,CAAA,GACL,gBAAA,EAAC,GAAD;AAAA,MAAM,IAAG;AAAA,MAAa,IAAI;AAAA,QAAE,UAAU;AAAA,QAAI,YAAY;AAAA,MAAI;AAAA,MAAG,SAAQ;AAAA,gBAClE;AAAA,IACG,CAAA,CACD;AAAA,MAER,KACC,gBAAA,EAAC,GAAD;AAAA,IAAO,YAAW;AAAA,IAAS,eAAc;AAAA,IAAM,KAAK;AAAA,cAApD,CACE,gBAAA,EAAC,OAAD;AAAA,MACE,eAAY;AAAA,MACZ,mBAAgB;AAAA,MAChB,MAAK;AAAA,MACL,QAAO;AAAA,MACP,MAAK;AAAA,MACL,OAAM;AAAA,gBAEN,gBAAA,EAAC,QAAD;AAAA,QAAM,MAAM;AAAA,QAAiB,QAAO;AAAA,QAAK,IAAG;AAAA,QAAI,OAAM;AAAA,QAAK,GAAE;AAAA,MAAU,CAAA;AAAA,IACpE,CAAA,GACL,gBAAA,EAAC,GAAD;AAAA,MAAM,IAAG;AAAA,MAAmB,IAAI;AAAA,QAAE,UAAU;AAAA,QAAI,YAAY;AAAA,MAAI;AAAA,MAAG,SAAQ;AAAA,gBACxE;AAAA,IACG,CAAA,CACD;AAAA,IAEJ"}

package/dist/insights/components/shared/Charts/BarChart/DoubleBarChartMXUI.es.js

@@ -0,0 +1,116 @@
+import { useContainerDimensions as C } from "../../../../hooks/useContainerDimensions.es.js";
+import { CustomDoubleBarPlotMXUI as g } from "./CustomDoubleBarPlotMXUI.es.js";
+import { DoubleBarChartLegendMXUI as S } from "./DoubleBarChartLegendMXUI.es.js";
+import k from "react";
+import w from "@mui/material/Stack";
+import { jsx as r, jsxs as m } from "react/jsx-runtime";
+import A from "@mui/material/Box";
+import { BarPlot as B, ChartContainer as I, ChartsXAxis as v } from "@mui/x-charts";
+var P = ({ barGapRatio: d = 5e-3, categoryGapRatio: p = 0.16, colors: i, data: a, isMini: f = !1, legendLabelComparison: s, legendLabelMain: l, margin: h = {
+  bottom: 16,
+  left: 24,
+  right: 24,
+  top: 0
+}, selectedTabIndex: n, onBarClick: y }) => {
+  const c = k.useRef(null), { height: u, width: x } = C(c), b = ({ dataIndex: e, seriesId: t }) => {
+    const o = t.toString().split("-").pop();
+    y?.(e * 2 + Number(o));
+  };
+  return /* @__PURE__ */ m(w, {
+    sx: {
+      mb: 0,
+      width: "100%",
+      p: 0
+    },
+    children: [/* @__PURE__ */ r(A, {
+      ref: c,
+      sx: {
+        height: f ? 120 : 172,
+        touchAction: "pan-y",
+        width: "100%",
+        p: 0,
+        m: 0,
+        "& svg": {
+          touchAction: "pan-y",
+          userSelect: "none"
+        },
+        "& .recharts-wrapper": { touchAction: "pan-y" }
+      },
+      children: /* @__PURE__ */ m(I, {
+        colors: i,
+        dataset: a,
+        height: u,
+        margin: h,
+        series: [{
+          dataKey: "main",
+          type: "bar"
+        }, {
+          dataKey: "comparison",
+          type: "bar"
+        }],
+        width: x,
+        xAxis: [{
+          barGapRatio: d,
+          categoryGapRatio: p,
+          dataKey: "label",
+          scaleType: "band"
+        }],
+        yAxis: [{ width: 0 }],
+        children: [/* @__PURE__ */ r(v, {
+          disableTicks: !1,
+          slots: { axisTickLabel: ({ text: e, ...t }) => {
+            const o = n !== void 0 ? a[n]?.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(B, {
+          onItemClick: (e, { dataIndex: t, seriesId: o }) => b({
+            dataIndex: t,
+            seriesId: o.toString()
+          }),
+          slots: { bar: (e) => {
+            const { ownerState: t, ...o } = e;
+            return /* @__PURE__ */ r(g, {
+              ...o,
+              color: n !== t.dataIndex ? `${t.color}50` : t.color,
+              data: a,
+              series: {
+                index: t.dataIndex,
+                type: Number(t.id.toString().split("-").pop())
+              },
+              style: {
+                height: e.height,
+                x: e.x,
+                y: e.y,
+                width: e.width
+              }
+            });
+          } }
+        })]
+      })
+    }), (s || l) && /* @__PURE__ */ r(S, {
+      comparisonColor: i[1],
+      legendLabelComparison: s,
+      legendLabelMain: l,
+      legendStyle: { ml: h.left },
+      mainColor: i[0]
+    })]
+  });
+};
+export {
+  P as DoubleBarChartMXUI
+};
+
+//# sourceMappingURL=DoubleBarChartMXUI.es.js.map

package/dist/insights/components/shared/Charts/BarChart/DoubleBarChartMXUI.es.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DoubleBarChartMXUI.es.js","names":[],"sources":["../../../../../../src/insights/components/shared/Charts/BarChart/DoubleBarChartMXUI.tsx"],"sourcesContent":["import React from 'react'\n\nimport Box from '@mui/material/Box'\nimport Stack from '@mui/material/Stack'\n\nimport { BarPlot, ChartContainer, ChartsXAxis } from '@mui/x-charts'\nimport { useContainerDimensions } from '../../../../hooks/useContainerDimensions'\n\nimport { DataSet, DoubleBarChartMXUIProps } from '../../../../types/Charts/BarChart'\n\nimport { CustomDoubleBarPlotMXUI } from './CustomDoubleBarPlotMXUI'\nimport { DoubleBarChartLegendMXUI } from './DoubleBarChartLegendMXUI'\n\nexport const DoubleBarChartMXUI = ({\n  barGapRatio = 0.005,\n  categoryGapRatio = 0.16,\n  colors,\n  data,\n  isMini = false,\n  legendLabelComparison,\n  legendLabelMain,\n  margin = {\n    bottom: 16,\n    left: 24,\n    right: 24,\n    top: 0,\n  },\n  selectedTabIndex,\n  onBarClick,\n}: DoubleBarChartMXUIProps) => {\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 = seriesId.toString().split('-').pop()\n    onBarClick?.(dataIndex * 2 + Number(seriesType))\n  }\n\n  return (\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 as any[]}\n          height={height}\n          margin={margin}\n          series={[\n            { dataKey: 'main', type: 'bar' },\n            { dataKey: 'comparison', type: 'bar' },\n          ]}\n          width={width}\n          xAxis={[{ barGapRatio, categoryGapRatio, dataKey: 'label', scaleType: 'band' }]}\n          yAxis={[{ width: 0 }]}\n        >\n          <ChartsXAxis\n            disableTicks={false}\n            slots={{\n              axisTickLabel: ({ text, ...restProps }) => {\n                const label =\n                  selectedTabIndex !== undefined ? data[selectedTabIndex]?.label : undefined\n                return (\n                  <text\n                    {...restProps}\n                    style={\n                      {\n                        ...restProps.style,\n                        fontWeight: label === 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                return (\n                  <CustomDoubleBarPlotMXUI\n                    {...defaultProps}\n                    color={\n                      selectedTabIndex !== ownerState.dataIndex\n                        ? `${ownerState.color}50`\n                        : ownerState.color\n                    }\n                    data={data as DataSet[]}\n                    series={{\n                      index: ownerState.dataIndex,\n                      type: Number(ownerState.id.toString().split('-').pop()),\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      {(legendLabelComparison || legendLabelMain) && (\n        <DoubleBarChartLegendMXUI\n          comparisonColor={colors[1]}\n          legendLabelComparison={legendLabelComparison}\n          legendLabelMain={legendLabelMain}\n          legendStyle={{ ml: margin.left }}\n          mainColor={colors[0]}\n        />\n      )}\n    </Stack>\n  )\n}\n"],"mappings":"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"}

package/dist/insights/components/shared/Charts/EmptyBarChart.es.js

@@ -0,0 +1,14 @@
+import { ReactComponent as r } from "../images/BarChartEmptyState.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/components/shared/Charts/EmptyBarChart.es.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"EmptyBarChart.es.js","names":[],"sources":["../../../../../src/insights/components/shared/Charts/EmptyBarChart.tsx"],"sourcesContent":["import { ReactComponent as BarChartEmptyState } from '../images/BarChartEmptyState.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/components/shared/Confetti.es.js

@@ -0,0 +1,32 @@
+import { jsx as r } from "react/jsx-runtime";
+import o from "react-confetti";
+var c = ({ 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 {
+  c as Confetti
+};
+
+//# sourceMappingURL=Confetti.es.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Confetti.es.js","names":[],"sources":["../../../../src/insights/components/shared/Confetti.tsx"],"sourcesContent":["import ReactConfetti from 'react-confetti'\n\nexport const Confetti = ({ height = 0, width = 0, shouldRun = false }) => {\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"],"mappings":";;AAEA,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"}

package/dist/insights/components/shared/ConnectionCard.es.js

@@ -0,0 +1,90 @@
+import { useContainerDimensions as b } from "../../hooks/useContainerDimensions.es.js";
+import { Confetti as w } from "./Confetti.es.js";
+import d from "react";
+import s from "@mui/material/Stack";
+import { jsx as e, jsxs as t } from "react/jsx-runtime";
+import n from "@mui/material/Box";
+import R from "@mui/material/Card";
+var i = ({ bgcolor: o, size: r = 4 }) => /* @__PURE__ */ e(n, { sx: {
+  borderRadius: "4px",
+  bgcolor: o,
+  height: r,
+  width: r
+} }), A = ({ centerIconBgColor: o = "text.secondary", dotBgColor: r = "text.secondary", hasBigDots: l = !1, hasConfetti: h = !1, icon: m, leftIcon: f, rightIcon: x, sx: g }) => {
+  const c = d.useRef(null), { height: p, width: u } = b(c), a = l ? 6 : 4;
+  return /* @__PURE__ */ t(d.Fragment, { children: [h && /* @__PURE__ */ e(w, {
+    height: p,
+    shouldRun: !0,
+    width: u
+  }), /* @__PURE__ */ e(n, {
+    ref: c,
+    sx: {
+      p: 16,
+      ...g
+    },
+    children: /* @__PURE__ */ e(R, {
+      sx: { py: 16 },
+      children: /* @__PURE__ */ t(n, {
+        sx: {
+          display: "grid",
+          placeItems: "center"
+        },
+        children: [/* @__PURE__ */ e(n, { sx: {
+          bgcolor: "neutral.lighter",
+          borderRadius: "24px",
+          gridArea: "1 / 1",
+          height: 40,
+          width: 240
+        } }), /* @__PURE__ */ t(s, {
+          sx: {
+            alignItems: "center",
+            flexDirection: "row",
+            gridArea: "1 / 1",
+            height: 64,
+            justifyContent: "space-between",
+            width: 204
+          },
+          children: [
+            f,
+            /* @__PURE__ */ t(s, {
+              sx: {
+                alignItems: "center",
+                flexDirection: "row",
+                gap: 4
+              },
+              children: [
+                /* @__PURE__ */ e(i, { bgcolor: r }),
+                /* @__PURE__ */ e(i, {
+                  bgcolor: r,
+                  size: a
+                }),
+                /* @__PURE__ */ e(s, {
+                  sx: {
+                    alignItems: "center",
+                    bgcolor: o,
+                    borderRadius: "50%",
+                    height: 28,
+                    justifyContent: "center",
+                    width: 28
+                  },
+                  children: m
+                }),
+                /* @__PURE__ */ e(i, {
+                  bgcolor: r,
+                  size: a
+                }),
+                /* @__PURE__ */ e(i, { bgcolor: r })
+              ]
+            }),
+            x
+          ]
+        })]
+      })
+    })
+  })] });
+};
+export {
+  A as default
+};
+
+//# sourceMappingURL=ConnectionCard.es.js.map

package/dist/insights/components/shared/ConnectionCard.es.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ConnectionCard.es.js","names":[],"sources":["../../../../src/insights/components/shared/ConnectionCard.tsx"],"sourcesContent":["import React from 'react'\n\nimport Box from '@mui/material/Box'\nimport Card from '@mui/material/Card'\nimport Stack from '@mui/material/Stack'\nimport type { SxProps, Theme } from '@mui/material/styles'\n\nimport { useContainerDimensions } from '../../hooks/useContainerDimensions'\n\nimport { Confetti } from './Confetti'\n\ninterface ConnectionCardProps {\n  centerIconBgColor?: string\n  dotBgColor?: string\n  hasBigDots?: boolean\n  hasConfetti?: boolean\n  icon: React.ReactNode\n  leftIcon: React.ReactNode\n  rightIcon: React.ReactNode\n  sx?: SxProps<Theme>\n}\n\ninterface DotProps {\n  bgcolor?: string\n  size?: number\n}\n\nconst Dot = ({ bgcolor, size = 4 }: DotProps) => (\n  <Box sx={{ borderRadius: '4px', bgcolor, height: size, width: size }} />\n)\n\nconst ConnectionCard = ({\n  centerIconBgColor = 'text.secondary',\n  dotBgColor = 'text.secondary',\n  hasBigDots = false,\n  hasConfetti = false,\n  icon,\n  leftIcon,\n  rightIcon,\n  sx,\n}: ConnectionCardProps) => {\n  const containerRef = React.useRef<HTMLDivElement>(null)\n  const { height, width } = useContainerDimensions(containerRef)\n\n  const dotSize = hasBigDots ? 6 : 4\n\n  return (\n    <React.Fragment>\n      {hasConfetti && <Confetti height={height} shouldRun={true} width={width} />}\n      <Box ref={containerRef} sx={{ p: 16, ...sx }}>\n        <Card sx={{ py: 16 }}>\n          <Box\n            sx={{\n              display: 'grid',\n              placeItems: 'center',\n            }}\n          >\n            <Box\n              sx={{\n                bgcolor: 'neutral.lighter',\n                borderRadius: '24px',\n                gridArea: '1 / 1',\n                height: 40,\n                width: 240,\n              }}\n            />\n            <Stack\n              sx={{\n                alignItems: 'center',\n                flexDirection: 'row',\n                gridArea: '1 / 1',\n                height: 64,\n                justifyContent: 'space-between',\n                width: 204,\n              }}\n            >\n              {leftIcon}\n              <Stack sx={{ alignItems: 'center', flexDirection: 'row', gap: 4 }}>\n                <Dot bgcolor={dotBgColor} />\n                <Dot bgcolor={dotBgColor} size={dotSize} />\n                <Stack\n                  sx={{\n                    alignItems: 'center',\n                    bgcolor: centerIconBgColor,\n                    borderRadius: '50%',\n                    height: 28,\n                    justifyContent: 'center',\n                    width: 28,\n                  }}\n                >\n                  {icon}\n                </Stack>\n                <Dot bgcolor={dotBgColor} size={dotSize} />\n                <Dot bgcolor={dotBgColor} />\n              </Stack>\n              {rightIcon}\n            </Stack>\n          </Box>\n        </Card>\n      </Box>\n    </React.Fragment>\n  )\n}\n\nexport default ConnectionCard\n"],"mappings":";;;;;;;AA2BA,IAAM,IAAA,CAAO,EAAE,SAAA,GAAS,MAAA,IAAO,EAAA,MAC7B,gBAAA,EAAC,GAAD,EAAK,IAAI;AAAA,EAAE,cAAc;AAAA,EAAO,SAAA;AAAA,EAAS,QAAQ;AAAA,EAAM,OAAO;AAAK,EAAI,CAAA,GAGnE,IAAA,CAAkB,EACtB,mBAAA,IAAoB,kBACpB,YAAA,IAAa,kBACb,YAAA,IAAa,IACb,aAAA,IAAc,IACd,MAAA,GACA,UAAA,GACA,WAAA,GACA,IAAA,EAAA,MACyB;AACzB,QAAM,IAAe,EAAM,OAAuB,IAAI,GAChD,EAAE,QAAA,GAAQ,OAAA,EAAA,IAAU,EAAuB,CAAY,GAEvD,IAAU,IAAa,IAAI;AAEjC,SACE,gBAAA,EAAC,EAAM,UAAP,EAAA,UAAA,CACG,KAAe,gBAAA,EAAC,GAAD;AAAA,IAAkB,QAAA;AAAA,IAAQ,WAAW;AAAA,IAAa,OAAA;AAAA,EAAQ,CAAA,GAC1E,gBAAA,EAAC,GAAD;AAAA,IAAK,KAAK;AAAA,IAAc,IAAI;AAAA,MAAE,GAAG;AAAA,MAAI,GAAG;AAAA,IAAG;AAAA,cACzC,gBAAA,EAAC,GAAD;AAAA,MAAM,IAAI,EAAE,IAAI,GAAG;AAAA,gBACjB,gBAAA,EAAC,GAAD;AAAA,QACE,IAAI;AAAA,UACF,SAAS;AAAA,UACT,YAAY;AAAA,QACd;AAAA,kBAJF,CAME,gBAAA,EAAC,GAAD,EACE,IAAI;AAAA,UACF,SAAS;AAAA,UACT,cAAc;AAAA,UACd,UAAU;AAAA,UACV,QAAQ;AAAA,UACR,OAAO;AAAA,QACT,EACD,CAAA,GACD,gBAAA,EAAC,GAAD;AAAA,UACE,IAAI;AAAA,YACF,YAAY;AAAA,YACZ,eAAe;AAAA,YACf,UAAU;AAAA,YACV,QAAQ;AAAA,YACR,gBAAgB;AAAA,YAChB,OAAO;AAAA,UACT;AAAA,oBARF;AAAA,YAUG;AAAA,YACD,gBAAA,EAAC,GAAD;AAAA,cAAO,IAAI;AAAA,gBAAE,YAAY;AAAA,gBAAU,eAAe;AAAA,gBAAO,KAAK;AAAA,cAAE;AAAA,wBAAhE;AAAA,gBACE,gBAAA,EAAC,GAAD,EAAK,SAAS,EAAa,CAAA;AAAA,gBAC3B,gBAAA,EAAC,GAAD;AAAA,kBAAK,SAAS;AAAA,kBAAY,MAAM;AAAA,gBAAU,CAAA;AAAA,gBAC1C,gBAAA,EAAC,GAAD;AAAA,kBACE,IAAI;AAAA,oBACF,YAAY;AAAA,oBACZ,SAAS;AAAA,oBACT,cAAc;AAAA,oBACd,QAAQ;AAAA,oBACR,gBAAgB;AAAA,oBAChB,OAAO;AAAA,kBACT;AAAA,4BAEC;AAAA,gBACI,CAAA;AAAA,gBACP,gBAAA,EAAC,GAAD;AAAA,kBAAK,SAAS;AAAA,kBAAY,MAAM;AAAA,gBAAU,CAAA;AAAA,gBAC1C,gBAAA,EAAC,GAAD,EAAK,SAAS,EAAa,CAAA;AAAA,cACtB;AAAA;YACN;AAAA,UACI;AAAA,UACJ;AAAA;IACD,CAAA;AAAA,EACH,CAAA,CACS,EAAA,CAAA;AAEpB"}

package/dist/insights/components/shared/Coupon.es.js

@@ -0,0 +1,66 @@
+import { ReactComponent as n } from "./images/CouponLeft.es.js";
+import { ReactComponent as c } from "./images/CouponLeftDark.es.js";
+import { ReactComponent as m } from "./images/CouponPerferation.es.js";
+import e from "@mui/material/Stack";
+import { Text as t } from "@mxenabled/mxui";
+import { jsx as r, jsxs as a } from "react/jsx-runtime";
+import { alpha as s, useTheme as l } from "@mui/material/styles";
+import f from "@mui/material/Box";
+var w = ({ amount: p, label: i, sx: d }) => {
+  const o = l();
+  return /* @__PURE__ */ r(f, {
+    sx: {
+      p: 16,
+      ...d
+    },
+    children: /* @__PURE__ */ a(e, {
+      sx: { flexDirection: "row" },
+      children: [
+        /* @__PURE__ */ r(e, {
+          sx: {
+            bgcolor: "background.paper",
+            borderBottomLeftRadius: "8px",
+            borderTopLeftRadius: "8px",
+            p: 4,
+            pr: 2
+          },
+          children: o.palette.mode === "dark" ? /* @__PURE__ */ r(c, {}) : /* @__PURE__ */ r(n, {})
+        }),
+        /* @__PURE__ */ r(e, {
+          sx: { svg: {
+            path: {
+              "&:not([stroke])": { fill: o.palette.background.paper },
+              "&[stroke]": { stroke: s(o.palette.divider, 0.24) }
+            },
+            rect: { fill: o.palette.background.paper }
+          } },
+          children: /* @__PURE__ */ r(m, {})
+        }),
+        /* @__PURE__ */ a(e, {
+          sx: {
+            bgcolor: "background.paper",
+            borderBottomRightRadius: "12px",
+            borderTopRightRadius: "12px",
+            height: 74,
+            justifyContent: "center",
+            px: 12,
+            width: 214
+          },
+          children: [/* @__PURE__ */ r(t, {
+            color: "text.secondary",
+            variant: "caption",
+            children: i
+          }), /* @__PURE__ */ r(t, {
+            variant: "h1",
+            children: p
+          })]
+        })
+      ]
+    })
+  });
+};
+export {
+  w as default
+};
+
+//# sourceMappingURL=Coupon.es.js.map

package/dist/insights/components/shared/Coupon.es.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Coupon.es.js","names":[],"sources":["../../../../src/insights/components/shared/Coupon.tsx"],"sourcesContent":["import Box from '@mui/material/Box'\nimport Stack from '@mui/material/Stack'\nimport { alpha, type SxProps, type Theme, useTheme } from '@mui/material/styles'\n\nimport { Text } from '@mxenabled/mxui'\n\nimport { ReactComponent as Left } from './images/CouponLeft.svg'\nimport { ReactComponent as LeftDark } from './images/CouponLeftDark.svg'\nimport { ReactComponent as Perferation } from './images/CouponPerferation.svg'\n\ninterface CouponProps {\n  amount: string\n  label: string\n  sx?: SxProps<Theme>\n}\n\nconst Coupon = ({ amount, label, sx }: CouponProps) => {\n  const theme = useTheme()\n\n  return (\n    <Box sx={{ p: 16, ...sx }}>\n      <Stack sx={{ flexDirection: 'row' }}>\n        <Stack\n          sx={{\n            bgcolor: 'background.paper',\n            borderBottomLeftRadius: '8px',\n            borderTopLeftRadius: '8px',\n            p: 4,\n            pr: 2,\n          }}\n        >\n          {theme.palette.mode === 'dark' ? <LeftDark /> : <Left />}\n        </Stack>\n        <Stack\n          sx={{\n            svg: {\n              path: {\n                '&:not([stroke])': {\n                  fill: theme.palette.background.paper,\n                },\n                '&[stroke]': {\n                  stroke: alpha(theme.palette.divider, 0.24),\n                },\n              },\n              rect: {\n                fill: theme.palette.background.paper,\n              },\n            },\n          }}\n        >\n          <Perferation />\n        </Stack>\n        <Stack\n          sx={{\n            bgcolor: 'background.paper',\n            borderBottomRightRadius: '12px',\n            borderTopRightRadius: '12px',\n            height: 74,\n            justifyContent: 'center',\n            px: 12,\n            width: 214,\n          }}\n        >\n          <Text color=\"text.secondary\" variant=\"caption\">\n            {label}\n          </Text>\n          <Text variant=\"h1\">{amount}</Text>\n        </Stack>\n      </Stack>\n    </Box>\n  )\n}\n\nexport default Coupon\n"],"mappings":";;;;;;;;AAgBA,IAAM,IAAA,CAAU,EAAE,QAAA,GAAQ,OAAA,GAAO,IAAA,EAAA,MAAsB;AACrD,QAAM,IAAQ,EAAS;AAEvB,SACE,gBAAA,EAAC,GAAD;AAAA,IAAK,IAAI;AAAA,MAAE,GAAG;AAAA,MAAI,GAAG;AAAA,IAAG;AAAA,cACtB,gBAAA,EAAC,GAAD;AAAA,MAAO,IAAI,EAAE,eAAe,MAAM;AAAA,gBAAlC;AAAA,QACE,gBAAA,EAAC,GAAD;AAAA,UACE,IAAI;AAAA,YACF,SAAS;AAAA,YACT,wBAAwB;AAAA,YACxB,qBAAqB;AAAA,YACrB,GAAG;AAAA,YACH,IAAI;AAAA,UACN;AAAA,oBAEC,EAAM,QAAQ,SAAS,SAAS,gBAAA,EAAC,GAAD,CAAW,CAAA,IAAI,gBAAA,EAAC,GAAD,CAAO,CAAA;AAAA,QAClD,CAAA;AAAA,QACP,gBAAA,EAAC,GAAD;AAAA,UACE,IAAI,EACF,KAAK;AAAA,YACH,MAAM;AAAA,cACJ,mBAAmB,EACjB,MAAM,EAAM,QAAQ,WAAW,MACjC;AAAA,cACA,aAAa,EACX,QAAQ,EAAM,EAAM,QAAQ,SAAS,IAAI,EAC3C;AAAA,YACF;AAAA,YACA,MAAM,EACJ,MAAM,EAAM,QAAQ,WAAW,MACjC;AAAA,UACF,EACF;AAAA,oBAEA,gBAAA,EAAC,GAAD,CAAc,CAAA;AAAA,QACT,CAAA;AAAA,QACP,gBAAA,EAAC,GAAD;AAAA,UACE,IAAI;AAAA,YACF,SAAS;AAAA,YACT,yBAAyB;AAAA,YACzB,sBAAsB;AAAA,YACtB,QAAQ;AAAA,YACR,gBAAgB;AAAA,YAChB,IAAI;AAAA,YACJ,OAAO;AAAA,UACT;AAAA,oBATF,CAWE,gBAAA,EAAC,GAAD;AAAA,YAAM,OAAM;AAAA,YAAiB,SAAQ;AAAA,sBAClC;AAAA,UACG,CAAA,GACN,gBAAA,EAAC,GAAD;AAAA,YAAM,SAAQ;AAAA,sBAAM;AAAA,UAAa,CAAA,CAC5B;AAAA;MACF;AAAA;EACJ,CAAA;AAET"}

package/dist/insights/components/shared/DeepLinks/DeepLinkDialog.es.js

@@ -0,0 +1,34 @@
+import { Icon as m } from "@mxenabled/mx-icons";
+import { jsx as o, jsxs as n } from "react/jsx-runtime";
+import a from "@mui/material/Dialog";
+import p from "@mui/material/DialogContent";
+import s from "@mui/material/IconButton";
+import c from "@mui/material/DialogTitle";
+var S = ({ children: t, copy: i, shouldShow: e, onClose: r, setShouldShow: h, ...l }) => /* @__PURE__ */ n(a, {
+  fullScreen: !0,
+  onClose: r,
+  open: e,
+  ...l,
+  children: [
+    /* @__PURE__ */ o(c, { children: i.title }),
+    /* @__PURE__ */ o(s, {
+      "aria-label": i.close_dialog_aria,
+      onClick: r,
+      sx: {
+        position: "absolute",
+        right: 8,
+        top: 8
+      },
+      children: /* @__PURE__ */ o(m, { name: "close" })
+    }),
+    /* @__PURE__ */ o(p, {
+      sx: { mb: 24 },
+      children: t
+    })
+  ]
+});
+export {
+  S as DeepLinkDialog
+};
+
+//# sourceMappingURL=DeepLinkDialog.es.js.map

package/dist/insights/components/shared/DeepLinks/DeepLinkDialog.es.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DeepLinkDialog.es.js","names":[],"sources":["../../../../../src/insights/components/shared/DeepLinks/DeepLinkDialog.tsx"],"sourcesContent":["import { Icon } from '@mxenabled/mx-icons'\n\nimport Dialog from '@mui/material/Dialog'\nimport DialogContent from '@mui/material/DialogContent'\nimport DialogTitle from '@mui/material/DialogTitle'\nimport IconButton from '@mui/material/IconButton'\nexport interface DeepLinkDialogCopyObject {\n  close_dialog_aria: string\n  title: string\n}\nexport interface DeepLinkDrawerProps {\n  copy: DeepLinkDialogCopyObject\n  onClose: () => void\n  setShouldShow: (shouldShow: boolean) => void\n  shouldShow: boolean\n}\n\nexport const DeepLinkDialog: React.FC<React.PropsWithChildren<DeepLinkDrawerProps>> = ({\n  children,\n  copy,\n  shouldShow,\n  onClose,\n  // Destructured out (though unused here) so it does NOT fall into ...rest and\n  // get spread onto the MUI <Dialog> DOM node (React \"does not recognize the\n  // setShouldShow prop\" warning).\n  setShouldShow: _setShouldShow,\n  ...rest\n}) => {\n  return (\n    <Dialog fullScreen={true} onClose={onClose} open={shouldShow} {...rest}>\n      <DialogTitle>{copy.title}</DialogTitle>\n      <IconButton\n        aria-label={copy.close_dialog_aria}\n        onClick={onClose}\n        sx={{\n          position: 'absolute',\n          right: 8,\n          top: 8,\n        }}\n      >\n        <Icon name=\"close\" />\n      </IconButton>\n      <DialogContent sx={{ mb: 24 }}>{children}</DialogContent>\n    </Dialog>\n  )\n}\n"],"mappings":";;;;;;AAiBA,IAAa,IAAA,CAA0E,EACrF,UAAA,GACA,MAAA,GACA,YAAA,GACA,SAAA,GAIA,eAAe,GACf,GAAG,EAAA,MAGD,gBAAA,EAAC,GAAD;AAAA,EAAQ,YAAY;AAAA,EAAe,SAAA;AAAA,EAAS,MAAM;AAAA,EAAY,GAAI;AAAA,YAAlE;AAAA,IACE,gBAAA,EAAC,GAAD,EAAA,UAAc,EAAK,MAAmB,CAAA;AAAA,IACtC,gBAAA,EAAC,GAAD;AAAA,MACE,cAAY,EAAK;AAAA,MACjB,SAAS;AAAA,MACT,IAAI;AAAA,QACF,UAAU;AAAA,QACV,OAAO;AAAA,QACP,KAAK;AAAA,MACP;AAAA,gBAEA,gBAAA,EAAC,GAAD,EAAM,MAAK,QAAS,CAAA;AAAA,IACV,CAAA;AAAA,IACZ,gBAAA,EAAC,GAAD;AAAA,MAAe,IAAI,EAAE,IAAI,GAAG;AAAA,MAAI,UAAA;AAAA,IAAwB,CAAA;AAAA,EAClD"}

package/dist/insights/components/shared/DeepLinks/DirectDeposit/Circle.es.js

@@ -0,0 +1,20 @@
+import i from "@mui/material/Stack";
+import { jsx as o } from "react/jsx-runtime";
+var a = ({ children: t, size: r, borderColor: e }) => /* @__PURE__ */ o(i, {
+  sx: {
+    alignItems: "center",
+    border: "1px solid",
+    borderColor: e,
+    borderRadius: "50%",
+    height: r,
+    justifyContent: "center",
+    position: "relative",
+    width: r
+  },
+  children: t
+});
+export {
+  a as Circle
+};
+
+//# sourceMappingURL=Circle.es.js.map

package/dist/insights/components/shared/DeepLinks/DirectDeposit/Circle.es.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Circle.es.js","names":[],"sources":["../../../../../../src/insights/components/shared/DeepLinks/DirectDeposit/Circle.tsx"],"sourcesContent":["import Stack from '@mui/material/Stack'\n\ninterface CircleProps {\n  size: number\n  borderColor: string\n}\n\nexport const Circle: React.FC<React.PropsWithChildren<CircleProps>> = ({\n  children,\n  size,\n  borderColor,\n}) => (\n  <Stack\n    sx={{\n      alignItems: 'center',\n      border: '1px solid',\n      borderColor,\n      borderRadius: '50%',\n      height: size,\n      justifyContent: 'center',\n      position: 'relative',\n      width: size,\n    }}\n  >\n    {children}\n  </Stack>\n)\n"],"mappings":";;AAOA,IAAa,IAAA,CAA0D,EACrE,UAAA,GACA,MAAA,GACA,aAAA,EAAA,MAEA,gBAAA,EAAC,GAAD;AAAA,EACE,IAAI;AAAA,IACF,YAAY;AAAA,IACZ,QAAQ;AAAA,IACR,aAAA;AAAA,IACA,cAAc;AAAA,IACd,QAAQ;AAAA,IACR,gBAAgB;AAAA,IAChB,UAAU;AAAA,IACV,OAAO;AAAA,EACT;AAAA,EAEC,UAAA;AACI,CAAA"}