@mx-cartographer/experiences 9.2.4-alpha.al2 → 9.3.0-alpha.bb1

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

@@ -0,0 +1,116 @@
+import { useContainerDimensions as C } from "../../../../../hooks/useContainerDimensions/index.es.js";
+import { CustomDoubleBarPlotMXUI as g } from "../CustomDoubleBarPlotMXUI/index.es.js";
+import { DoubleBarChartLegendMXUI as S } from "../DoubleBarChartLegendMXUI/index.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=index.es.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.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":";;;;;;;;AAaA,IAAa,IAAA,CAAsB,EACjC,aAAA,IAAc,MACd,kBAAA,IAAmB,MACnB,QAAA,GACA,MAAA,GACA,QAAA,IAAS,IACT,uBAAA,GACA,iBAAA,GACA,QAAA,IAAS;AAAA,EACP,QAAQ;AAAA,EACR,MAAM;AAAA,EACN,OAAO;AAAA,EACP,KAAK;AACP,GACA,kBAAA,GACA,YAAA,EAAA,MAC6B;AAC7B,QAAM,IAAe,EAAM,OAAuB,IAAI,GAChD,EAAE,QAAA,GAAQ,OAAA,EAAA,IAAU,EAAuB,CAAY,GAEvD,IAAA,CAAkB,EAAE,WAAA,GAAW,UAAA,EAAA,MAAwD;AAC3F,UAAM,IAAa,EAAS,SAAS,EAAE,MAAM,GAAG,EAAE,IAAI;AACtD,IAAA,IAAa,IAAY,IAAI,OAAO,CAAU,CAAC;AAAA,EACjD;AAEA,SACE,gBAAA,EAAC,GAAD;AAAA,IAAO,IAAI;AAAA,MAAE,IAAI;AAAA,MAAG,OAAO;AAAA,MAAQ,GAAG;AAAA,IAAE;AAAA,cAAxC,CACE,gBAAA,EAAC,GAAD;AAAA,MACE,KAAK;AAAA,MACL,IAAI;AAAA,QACF,QAAQ,IAAS,MAAM;AAAA,QACvB,aAAa;AAAA,QACb,OAAO;AAAA,QACP,GAAG;AAAA,QACH,GAAG;AAAA,QACH,SAAS;AAAA,UACP,aAAa;AAAA,UACb,YAAY;AAAA,QACd;AAAA,QACA,uBAAuB,EACrB,aAAa,QACf;AAAA,MACF;AAAA,gBAEA,gBAAA,EAAC,GAAD;AAAA,QACU,QAAA;AAAA,QACR,SAAS;AAAA,QACD,QAAA;AAAA,QACA,QAAA;AAAA,QACR,QAAQ,CACN;AAAA,UAAE,SAAS;AAAA,UAAQ,MAAM;AAAA,QAAM,GAC/B;AAAA,UAAE,SAAS;AAAA,UAAc,MAAM;AAAA,QAAM,CACvC;AAAA,QACO,OAAA;AAAA,QACP,OAAO,CAAC;AAAA,UAAE,aAAA;AAAA,UAAa,kBAAA;AAAA,UAAkB,SAAS;AAAA,UAAS,WAAW;AAAA,QAAO,CAAC;AAAA,QAC9E,OAAO,CAAC,EAAE,OAAO,EAAE,CAAC;AAAA,kBAXtB,CAaE,gBAAA,EAAC,GAAD;AAAA,UACE,cAAc;AAAA,UACd,OAAO,EACL,eAAA,CAAgB,EAAE,MAAA,GAAM,GAAG,EAAA,MAAgB;AACzC,kBAAM,IACJ,MAAqB,SAAY,EAAK,CAAA,GAAmB,QAAQ;AACnE,mBACE,gBAAA,EAAC,QAAD;AAAA,cACE,GAAI;AAAA,cACJ,OACE;AAAA,gBACE,GAAG,EAAU;AAAA,gBACb,YAAY,MAAU,IAAO,MAAM;AAAA,cACrC;AAAA,wBAGD;AAAA,YACG,CAAA;AAAA,UAEV,EACF;AAAA,UACA,IAAI,EACF,uBAAuB,EACrB,QAAQ,gBACV,EACF;AAAA,UACA,gBAAgB;AAAA,YACd,UAAU;AAAA,YACV,MAAM;AAAA,YACN,YAAY;AAAA,UACd;AAAA,QACD,CAAA,GACD,gBAAA,EAAC,GAAD;AAAA,UACE,aAAA,CAAc,GAAG,EAAE,WAAA,GAAW,UAAA,EAAA,MAC5B,EAAe;AAAA,YAAE,WAAA;AAAA,YAAW,UAAU,EAAS,SAAS;AAAA,UAAE,CAAC;AAAA,UAE7D,OAAO,EACL,KAAA,CAAM,MAAU;AACd,kBAAM,EAAE,YAAA,GAAY,GAAG,EAAA,IAAiB;AACxC,mBACE,gBAAA,EAAC,GAAD;AAAA,cACE,GAAI;AAAA,cACJ,OACE,MAAqB,EAAW,YAC5B,GAAG,EAAW,KAAA,OACd,EAAW;AAAA,cAEX,MAAA;AAAA,cACN,QAAQ;AAAA,gBACN,OAAO,EAAW;AAAA,gBAClB,MAAM,OAAO,EAAW,GAAG,SAAS,EAAE,MAAM,GAAG,EAAE,IAAI,CAAC;AAAA,cACxD;AAAA,cACA,OAAO;AAAA,gBACL,QAAQ,EAAM;AAAA,gBACd,GAAG,EAAM;AAAA,gBACT,GAAG,EAAM;AAAA,gBACT,OAAO,EAAM;AAAA,cACf;AAAA,YACD,CAAA;AAAA,UAEL,EACF;AAAA,QACD,CAAA,CACa;AAAA;IACb,CAAA,IAEH,KAAyB,MACzB,gBAAA,EAAC,GAAD;AAAA,MACE,iBAAiB,EAAO,CAAA;AAAA,MACD,uBAAA;AAAA,MACN,iBAAA;AAAA,MACjB,aAAa,EAAE,IAAI,EAAO,KAAK;AAAA,MAC/B,WAAW,EAAO,CAAA;AAAA,IACnB,CAAA,CAEE;AAAA;AAEX"}

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

@@ -0,0 +1,14 @@
+import { ReactComponent as r } from "../../images/BarChartEmptyState.svg/index.es.js";
+import { ThemedSVGImage as o } from "../../ThemedSVGImage/index.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=index.es.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.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/index.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=index.es.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.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/index.es.js

@@ -0,0 +1,90 @@
+import { useContainerDimensions as b } from "../../../hooks/useContainerDimensions/index.es.js";
+import { Confetti as w } from "../Confetti/index.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=index.es.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.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/index.es.js

@@ -0,0 +1,66 @@
+import { ReactComponent as n } from "../images/CouponLeft.svg/index.es.js";
+import { ReactComponent as c } from "../images/CouponLeftDark.svg/index.es.js";
+import { ReactComponent as m } from "../images/CouponPerferation.svg/index.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=index.es.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.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/index.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 c from "@mui/material/IconButton";
+import s from "@mui/material/DialogTitle";
+var h = ({ children: t, copy: i, shouldShow: e, onClose: r, ...l }) => /* @__PURE__ */ n(a, {
+  fullScreen: !0,
+  onClose: r,
+  open: e,
+  ...l,
+  children: [
+    /* @__PURE__ */ o(s, { children: i.title }),
+    /* @__PURE__ */ o(c, {
+      "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 {
+  h as DeepLinkDialog
+};
+
+//# sourceMappingURL=index.es.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.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  ...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,GACA,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/index.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=index.es.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.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"}

package/dist/insights/components/shared/DeepLinks/DirectDeposit/DirectDepositDeepLink/index.es.js

@@ -0,0 +1,163 @@
+import { DeepLinkDialog as C } from "../../DeepLinkDialog/index.es.js";
+import { Circle as l } from "../Circle/index.es.js";
+import { Dot as n } from "../Dot/index.es.js";
+import { Oval as k } from "../Oval/index.es.js";
+import a from "react";
+import o from "@mui/material/Stack";
+import { H2 as d, InstitutionLogo as w, P as T, Text as g } from "@mxenabled/mxui";
+import v from "@mui/material/Button";
+import { Icon as c } from "@mxenabled/mx-icons";
+import { Fragment as D, jsx as e, jsxs as r } from "react/jsx-runtime";
+import m from "@mui/material/Box";
+import S from "@mui/material/LinearProgress";
+var O = ({ copy: t, institution_guid: _, isComplete: f, isError: s, isLoading: h, ...x }) => {
+  const [u, p] = a.useState(t.were_working_on_it), [i, b] = a.useState(0);
+  return a.useEffect(() => {
+    if (i <= 2) {
+      const I = [
+        t.were_working_on_it,
+        t.were_getting_closer,
+        t.almost_there
+      ], z = setTimeout(() => {
+        b(i + 1), p(I[i]);
+      }, 4e3);
+      return () => clearTimeout(z);
+    }
+  }, [
+    t,
+    i,
+    u
+  ]), /* @__PURE__ */ r(C, {
+    copy: t,
+    ...x,
+    children: [/* @__PURE__ */ e(o, {
+      sx: {
+        alignItems: "center",
+        justifyContent: "space-between",
+        mb: 24
+      },
+      children: /* @__PURE__ */ e(l, {
+        borderColor: "#E5E5E5",
+        size: 119,
+        children: /* @__PURE__ */ e(l, {
+          borderColor: "#B2B2B2",
+          size: 97,
+          children: /* @__PURE__ */ r(l, {
+            borderColor: "#808080",
+            size: 75,
+            children: [/* @__PURE__ */ e(k, {}), /* @__PURE__ */ r(m, {
+              sx: {
+                alignItems: "center",
+                display: "flex",
+                gap: 4,
+                zIndex: 1
+              },
+              children: [
+                /* @__PURE__ */ e(w, {
+                  alt: t.institution_logo_aria,
+                  institutionGuid: _,
+                  size: 64,
+                  style: { borderRadius: "8px" }
+                }),
+                /* @__PURE__ */ e(n, {}),
+                /* @__PURE__ */ e(n, {}),
+                s ? /* @__PURE__ */ e(c, {
+                  color: "error",
+                  fill: !0,
+                  name: "error",
+                  size: 32
+                }) : /* @__PURE__ */ e(c, {
+                  fill: !0,
+                  name: "nest_clock_farsight_analog",
+                  size: 32,
+                  sx: { color: "text.secondary" }
+                }),
+                /* @__PURE__ */ e(n, {}),
+                /* @__PURE__ */ e(n, {}),
+                /* @__PURE__ */ e(m, {
+                  sx: {
+                    display: "flex",
+                    alignItems: "center",
+                    justifyContent: "center",
+                    color: "background.paper",
+                    backgroundColor: "success.main",
+                    borderRadius: "8px",
+                    p: 8,
+                    height: 64,
+                    width: 64
+                  },
+                  children: /* @__PURE__ */ e(c, {
+                    fill: !0,
+                    name: "monetization_on",
+                    size: 48
+                  })
+                })
+              ]
+            })]
+          })
+        })
+      })
+    }), /* @__PURE__ */ r(o, {
+      sx: {
+        alignItems: "center",
+        justifyContent: "center"
+      },
+      children: [
+        f && !s && /* @__PURE__ */ e(d, {
+          sx: { textAlign: "center" },
+          children: t.your_direct_deposit_has_been_updated_successfully
+        }),
+        h && /* @__PURE__ */ r(D, { children: [
+          /* @__PURE__ */ e(d, { children: t.connecting }),
+          /* @__PURE__ */ e(m, {
+            sx: {
+              my: 24,
+              width: "50%"
+            },
+            children: /* @__PURE__ */ e(S, { "aria-label": t.loading })
+          }),
+          /* @__PURE__ */ e(g, {
+            bold: !0,
+            variant: "body1",
+            children: t.syncing_your_information
+          }),
+          /* @__PURE__ */ e(g, {
+            sx: { mt: 8 },
+            variant: "body2",
+            children: u
+          })
+        ] }),
+        s && /* @__PURE__ */ r(o, {
+          sx: {
+            gap: 24,
+            px: 24,
+            pb: 24
+          },
+          children: [/* @__PURE__ */ r(o, { children: [/* @__PURE__ */ e(d, {
+            sx: { alignSelf: "center" },
+            children: t.error_title
+          }), /* @__PURE__ */ e(T, {
+            dangerouslySetInnerHTML: { __html: t.error_description },
+            sx: {
+              fontSize: 15,
+              lineHeight: "24px",
+              px: "0px !important",
+              textAlign: "center",
+              width: 352
+            }
+          })] }), /* @__PURE__ */ e(v, {
+            onClick: x.onClose,
+            sx: { mx: "auto" },
+            variant: "contained",
+            children: t.error_button_text
+          })]
+        })
+      ]
+    })]
+  });
+};
+export {
+  O as DirectDepositDeepLink
+};
+
+//# sourceMappingURL=index.es.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.es.js","names":[],"sources":["../../../../../../../src/insights/components/shared/DeepLinks/DirectDeposit/DirectDepositDeepLink.tsx"],"sourcesContent":["import React from 'react'\n\nimport { Icon } from '@mxenabled/mx-icons'\nimport { InstitutionLogo } from '@mxenabled/mxui'\nimport { H2, Text, P } from '@mxenabled/mxui'\n\nimport Box from '@mui/material/Box'\nimport Button from '@mui/material/Button'\nimport LinearProgress from '@mui/material/LinearProgress'\nimport Stack from '@mui/material/Stack'\n\nimport {\n  DeepLinkDialog,\n  type DeepLinkDialogCopyObject,\n  type DeepLinkDrawerProps,\n} from '../DeepLinkDialog'\n\nimport { Circle } from './Circle'\nimport { Dot } from './Dot'\nimport { Oval } from './Oval'\n\ninterface CopyObject extends DeepLinkDialogCopyObject {\n  almost_there: string\n  connecting: string\n  error_description: string\n  error_button_text: string\n  error_title: string\n  institution_logo_aria: string\n  loading: string\n  syncing_your_information: string\n  were_getting_closer: string\n  were_working_on_it: string\n  your_direct_deposit_has_been_updated_successfully: string\n}\n\ninterface DirectDepositDeepLinkProps extends DeepLinkDrawerProps {\n  copy: CopyObject\n  institution_guid: string\n  isComplete: boolean\n  isError: boolean\n  isLoading: boolean\n}\n\nexport const DirectDepositDeepLink: React.FC<DirectDepositDeepLinkProps> = ({\n  copy,\n  institution_guid,\n  isComplete,\n  isError,\n  isLoading,\n  ...rest\n}) => {\n  const [progressText, setProgressText] = React.useState(copy.were_working_on_it)\n  const [textIndex, setTextIndex] = React.useState(0)\n\n  // eslint-disable-next-line consistent-return\n  React.useEffect(() => {\n    if (textIndex <= 2) {\n      const textToRotate = [copy.were_working_on_it, copy.were_getting_closer, copy.almost_there]\n      const intervalId = setTimeout(() => {\n        setTextIndex(textIndex + 1)\n        setProgressText(textToRotate[textIndex])\n      }, 4000)\n\n      return () => clearTimeout(intervalId)\n    }\n  }, [copy, textIndex, progressText])\n\n  return (\n    <DeepLinkDialog copy={copy} {...rest}>\n      <Stack sx={{ alignItems: 'center', justifyContent: 'space-between', mb: 24 }}>\n        <Circle borderColor=\"#E5E5E5\" size={119}>\n          <Circle borderColor=\"#B2B2B2\" size={97}>\n            <Circle borderColor=\"#808080\" size={75}>\n              <Oval />\n              <Box sx={{ alignItems: 'center', display: 'flex', gap: 4, zIndex: 1 }}>\n                <InstitutionLogo\n                  alt={copy.institution_logo_aria}\n                  institutionGuid={institution_guid}\n                  size={64}\n                  style={{ borderRadius: '8px' }}\n                />\n                <Dot />\n                <Dot />\n                {isError ? (\n                  <Icon color={'error'} fill={true} name=\"error\" size={32} />\n                ) : (\n                  <Icon\n                    fill={true}\n                    name=\"nest_clock_farsight_analog\"\n                    size={32}\n                    sx={{ color: 'text.secondary' }}\n                  />\n                )}\n                <Dot />\n                <Dot />\n                <Box\n                  sx={{\n                    display: 'flex',\n                    alignItems: 'center',\n                    justifyContent: 'center',\n                    color: 'background.paper',\n                    backgroundColor: 'success.main',\n                    borderRadius: '8px',\n                    p: 8,\n                    height: 64,\n                    width: 64,\n                  }}\n                >\n                  <Icon fill={true} name=\"monetization_on\" size={48} />\n                </Box>\n              </Box>\n            </Circle>\n          </Circle>\n        </Circle>\n      </Stack>\n\n      <Stack sx={{ alignItems: 'center', justifyContent: 'center' }}>\n        {isComplete && !isError && (\n          <H2 sx={{ textAlign: 'center' }}>\n            {copy.your_direct_deposit_has_been_updated_successfully}\n          </H2>\n        )}\n        {isLoading && (\n          <>\n            <H2>{copy.connecting}</H2>\n            <Box sx={{ my: 24, width: '50%' }}>\n              <LinearProgress aria-label={copy.loading} />\n            </Box>\n            <Text bold={true} variant=\"body1\">\n              {copy.syncing_your_information}\n            </Text>\n            <Text sx={{ mt: 8 }} variant=\"body2\">\n              {progressText}\n            </Text>\n          </>\n        )}\n        {isError && (\n          <Stack sx={{ gap: 24, px: 24, pb: 24 }}>\n            <Stack>\n              <H2 sx={{ alignSelf: 'center' }}>{copy.error_title}</H2>\n              <P\n                dangerouslySetInnerHTML={{ __html: copy.error_description }}\n                sx={{\n                  fontSize: 15,\n                  lineHeight: '24px',\n                  px: '0px !important', //The important is necessary here px: 0 will not override the mui styling.\n                  textAlign: 'center',\n                  width: 352,\n                }}\n              />\n            </Stack>\n            <Button onClick={rest.onClose} sx={{ mx: 'auto' }} variant=\"contained\">\n              {copy.error_button_text}\n            </Button>\n          </Stack>\n        )}\n      </Stack>\n    </DeepLinkDialog>\n  )\n}\n"],"mappings":";;;;;;;;;;;;AA2CA,IAAa,IAAA,CAA+D,EAC1E,MAAA,GACA,kBAAA,GACA,YAAA,GACA,SAAA,GACA,WAAA,GACA,GAAG,EAAA,MACC;AACJ,QAAM,CAAC,GAAc,CAAA,IAAmB,EAAM,SAAS,EAAK,kBAAkB,GACxE,CAAC,GAAW,CAAA,IAAgB,EAAM,SAAS,CAAC;AAGlD,SAAA,EAAM,UAAA,MAAgB;AACpB,QAAI,KAAa,GAAG;AAClB,YAAM,IAAe;AAAA,QAAC,EAAK;AAAA,QAAoB,EAAK;AAAA,QAAqB,EAAK;AAAA,MAAY,GACpF,IAAa,WAAA,MAAiB;AAClC,QAAA,EAAa,IAAY,CAAC,GAC1B,EAAgB,EAAa,CAAA,CAAU;AAAA,MACzC,GAAG,GAAI;AAEP,aAAA,MAAa,aAAa,CAAU;AAAA,IACtC;AAAA,EACF,GAAG;AAAA,IAAC;AAAA,IAAM;AAAA,IAAW;AAAA,EAAY,CAAC,GAGhC,gBAAA,EAAC,GAAD;AAAA,IAAsB,MAAA;AAAA,IAAM,GAAI;AAAA,cAAhC,CACE,gBAAA,EAAC,GAAD;AAAA,MAAO,IAAI;AAAA,QAAE,YAAY;AAAA,QAAU,gBAAgB;AAAA,QAAiB,IAAI;AAAA,MAAG;AAAA,gBACzE,gBAAA,EAAC,GAAD;AAAA,QAAQ,aAAY;AAAA,QAAU,MAAM;AAAA,kBAClC,gBAAA,EAAC,GAAD;AAAA,UAAQ,aAAY;AAAA,UAAU,MAAM;AAAA,oBAClC,gBAAA,EAAC,GAAD;AAAA,YAAQ,aAAY;AAAA,YAAU,MAAM;AAAA,sBAApC,CACE,gBAAA,EAAC,GAAD,CAAO,CAAA,GACP,gBAAA,EAAC,GAAD;AAAA,cAAK,IAAI;AAAA,gBAAE,YAAY;AAAA,gBAAU,SAAS;AAAA,gBAAQ,KAAK;AAAA,gBAAG,QAAQ;AAAA,cAAE;AAAA,wBAApE;AAAA,gBACE,gBAAA,EAAC,GAAD;AAAA,kBACE,KAAK,EAAK;AAAA,kBACV,iBAAiB;AAAA,kBACjB,MAAM;AAAA,kBACN,OAAO,EAAE,cAAc,MAAM;AAAA,gBAC9B,CAAA;AAAA,gBACD,gBAAA,EAAC,GAAD,CAAM,CAAA;AAAA,gBACN,gBAAA,EAAC,GAAD,CAAM,CAAA;AAAA,gBACL,IACC,gBAAA,EAAC,GAAD;AAAA,kBAAM,OAAO;AAAA,kBAAS,MAAM;AAAA,kBAAM,MAAK;AAAA,kBAAQ,MAAM;AAAA,gBAAK,CAAA,IAE1D,gBAAA,EAAC,GAAD;AAAA,kBACE,MAAM;AAAA,kBACN,MAAK;AAAA,kBACL,MAAM;AAAA,kBACN,IAAI,EAAE,OAAO,iBAAiB;AAAA,gBAC/B,CAAA;AAAA,gBAEH,gBAAA,EAAC,GAAD,CAAM,CAAA;AAAA,gBACN,gBAAA,EAAC,GAAD,CAAM,CAAA;AAAA,gBACN,gBAAA,EAAC,GAAD;AAAA,kBACE,IAAI;AAAA,oBACF,SAAS;AAAA,oBACT,YAAY;AAAA,oBACZ,gBAAgB;AAAA,oBAChB,OAAO;AAAA,oBACP,iBAAiB;AAAA,oBACjB,cAAc;AAAA,oBACd,GAAG;AAAA,oBACH,QAAQ;AAAA,oBACR,OAAO;AAAA,kBACT;AAAA,4BAEA,gBAAA,EAAC,GAAD;AAAA,oBAAM,MAAM;AAAA,oBAAM,MAAK;AAAA,oBAAkB,MAAM;AAAA,kBAAK,CAAA;AAAA,gBACjD,CAAA;AAAA,cACF;AAAA,cACC;AAAA;QACF,CAAA;AAAA,MACF,CAAA;AAAA,IACH,CAAA,GAEP,gBAAA,EAAC,GAAD;AAAA,MAAO,IAAI;AAAA,QAAE,YAAY;AAAA,QAAU,gBAAgB;AAAA,MAAS;AAAA,gBAA5D;AAAA,QACG,KAAc,CAAC,KACd,gBAAA,EAAC,GAAD;AAAA,UAAI,IAAI,EAAE,WAAW,SAAS;AAAA,oBAC3B,EAAK;AAAA,QACJ,CAAA;AAAA,QAEL,KACC,gBAAA,EAAA,GAAA,EAAA,UAAA;AAAA,UACE,gBAAA,EAAC,GAAD,EAAA,UAAK,EAAK,WAAe,CAAA;AAAA,UACzB,gBAAA,EAAC,GAAD;AAAA,YAAK,IAAI;AAAA,cAAE,IAAI;AAAA,cAAI,OAAO;AAAA,YAAM;AAAA,sBAC9B,gBAAA,EAAC,GAAD,EAAgB,cAAY,EAAK,QAAU,CAAA;AAAA,UACxC,CAAA;AAAA,UACL,gBAAA,EAAC,GAAD;AAAA,YAAM,MAAM;AAAA,YAAM,SAAQ;AAAA,sBACvB,EAAK;AAAA,UACF,CAAA;AAAA,UACN,gBAAA,EAAC,GAAD;AAAA,YAAM,IAAI,EAAE,IAAI,EAAE;AAAA,YAAG,SAAQ;AAAA,sBAC1B;AAAA,UACG,CAAA;AAAA,QACN,EAAA,CAAA;AAAA,QAEH,KACC,gBAAA,EAAC,GAAD;AAAA,UAAO,IAAI;AAAA,YAAE,KAAK;AAAA,YAAI,IAAI;AAAA,YAAI,IAAI;AAAA,UAAG;AAAA,oBAArC,CACE,gBAAA,EAAC,GAAD,EAAA,UAAA,CACE,gBAAA,EAAC,GAAD;AAAA,YAAI,IAAI,EAAE,WAAW,SAAS;AAAA,sBAAI,EAAK;AAAA,UAAgB,CAAA,GACvD,gBAAA,EAAC,GAAD;AAAA,YACE,yBAAyB,EAAE,QAAQ,EAAK,kBAAkB;AAAA,YAC1D,IAAI;AAAA,cACF,UAAU;AAAA,cACV,YAAY;AAAA,cACZ,IAAI;AAAA,cACJ,WAAW;AAAA,cACX,OAAO;AAAA,YACT;AAAA,UACD,CAAA,CACI,EAAA,CAAA,GACP,gBAAA,EAAC,GAAD;AAAA,YAAQ,SAAS,EAAK;AAAA,YAAS,IAAI,EAAE,IAAI,OAAO;AAAA,YAAG,SAAQ;AAAA,sBACxD,EAAK;AAAA,UACA,CAAA,CACH;AAAA;MAEJ;AAAA,MACO;AAAA;AAEpB"}

package/dist/insights/components/shared/DeepLinks/DirectDeposit/Dot/index.es.js

@@ -0,0 +1,19 @@
+import { jsx as i } from "react/jsx-runtime";
+var l = () => /* @__PURE__ */ i("svg", {
+  fill: "none",
+  height: "4",
+  viewBox: "0 0 3 4",
+  width: "3",
+  xmlns: "http://www.w3.org/2000/svg",
+  children: /* @__PURE__ */ i("circle", {
+    cx: "1.75",
+    cy: "1.9502",
+    fill: "#666666",
+    r: "1.25"
+  })
+});
+export {
+  l as Dot
+};
+
+//# sourceMappingURL=index.es.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.es.js","names":[],"sources":["../../../../../../../src/insights/components/shared/DeepLinks/DirectDeposit/Dot.tsx"],"sourcesContent":["export const Dot = () => (\n  <svg fill=\"none\" height=\"4\" viewBox=\"0 0 3 4\" width=\"3\" xmlns=\"http://www.w3.org/2000/svg\">\n    <circle cx=\"1.75\" cy=\"1.9502\" fill=\"#666666\" r=\"1.25\" />\n  </svg>\n)\n"],"mappings":";AAAA,IAAa,IAAA,MACX,gBAAA,EAAC,OAAD;AAAA,EAAK,MAAK;AAAA,EAAO,QAAO;AAAA,EAAI,SAAQ;AAAA,EAAU,OAAM;AAAA,EAAI,OAAM;AAAA,YAC5D,gBAAA,EAAC,UAAD;AAAA,IAAQ,IAAG;AAAA,IAAO,IAAG;AAAA,IAAS,MAAK;AAAA,IAAU,GAAE;AAAA,EAAQ,CAAA;AACpD,CAAA"}