@mx-cartographer/experiences 9.3.0-alpha.bb1 → 9.3.0-alpha.bb2

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

@@ -0,0 +1,163 @@
+import { DeepLinkDialog as C } from "../DeepLinkDialog.es.js";
+import { Circle as l } from "./Circle.es.js";
+import { Dot as n } from "./Dot.es.js";
+import { Oval as k } from "./Oval.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=DirectDepositDeepLink.es.js.map

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

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

package/dist/insights/components/shared/DeepLinks/DirectDeposit/Dot.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=Dot.es.js.map

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

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

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

@@ -0,0 +1,16 @@
+import { jsx as o } from "react/jsx-runtime";
+import r from "@mui/material/Box";
+var i = () => /* @__PURE__ */ o(r, { sx: {
+  alignItems: "center",
+  backgroundColor: "#F2F2F2",
+  borderRadius: "9999px",
+  position: "absolute",
+  width: 240,
+  height: 40,
+  zIndex: 1
+} });
+export {
+  i as Oval
+};
+
+//# sourceMappingURL=Oval.es.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Oval.es.js","names":[],"sources":["../../../../../../src/insights/components/shared/DeepLinks/DirectDeposit/Oval.tsx"],"sourcesContent":["import Box from '@mui/material/Box'\n\nexport const Oval = () => (\n  <Box\n    sx={{\n      alignItems: 'center',\n      backgroundColor: '#F2F2F2',\n      borderRadius: '9999px',\n      position: 'absolute',\n      width: 240,\n      height: 40,\n      zIndex: 1,\n    }}\n  />\n)\n"],"mappings":";;AAEA,IAAa,IAAA,MACX,gBAAA,EAAC,GAAD,EACE,IAAI;AAAA,EACF,YAAY;AAAA,EACZ,iBAAiB;AAAA,EACjB,cAAc;AAAA,EACd,UAAU;AAAA,EACV,OAAO;AAAA,EACP,QAAQ;AAAA,EACR,QAAQ;AACV,EACD,CAAA"}

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

@@ -0,0 +1,85 @@
+import { useContainerDimensions as u } from "../../../hooks/useContainerDimensions.es.js";
+import { Confetti as y } from "../Confetti.es.js";
+import { FullFeedBodyHeader as R } from "./FullFeedBodyHeader.es.js";
+import { LeftBox as v } from "./LeftBox.es.js";
+import { MiniBodyHeader as w } from "./MiniBodyHeader.es.js";
+import { RightBox as D } from "./RightBox.es.js";
+import { useRef as I } from "react";
+import b from "@mui/material/Stack";
+import { jsx as e, jsxs as i } from "react/jsx-runtime";
+import B from "@mui/material/Box";
+import C from "@mui/material/Card";
+var E = { card: {
+  miniWidget: {
+    gap: 8,
+    p: "12px 16px",
+    mt: 0
+  },
+  insightFeed: {
+    gap: 12,
+    p: "0px 16px 16px",
+    mt: 22
+  }
+} }, p = "miniWidget", m = "insightFeed", A = ({ account: o, animation: d, leftLowerText: s, leftUpperText: a, isComplete: f, isMini: l, headerString: t, rightLowerText: c, rightUpperText: x }) => {
+  const r = l ? p : m, n = I(null), { height: g, width: h } = u(n);
+  return /* @__PURE__ */ i(B, {
+    alignItems: "center",
+    display: "flex",
+    justifyContent: "center",
+    ref: n,
+    sx: {
+      bgcolor: "grey.200",
+      p: 16
+    },
+    width: "100%",
+    children: [/* @__PURE__ */ e(y, {
+      height: g,
+      shouldRun: d.shouldRun,
+      width: h
+    }), /* @__PURE__ */ i(C, {
+      elevation: 1,
+      sx: {
+        display: "flex",
+        flexDirection: "column",
+        alignItems: "center",
+        justifyContent: "center",
+        flexWrap: "wrap",
+        bgcolor: "background.paper",
+        borderRadius: "8px",
+        overflow: "visible",
+        minHeight: 120,
+        width: "100%",
+        ...E.card[r]
+      },
+      children: [
+        r === m && /* @__PURE__ */ e(R, {
+          account: o,
+          headerString: t
+        }),
+        r === p && /* @__PURE__ */ e(w, {
+          account: o,
+          headerString: t
+        }),
+        /* @__PURE__ */ i(b, {
+          direction: "row",
+          gap: 12,
+          height: 58,
+          width: "100%",
+          children: [/* @__PURE__ */ e(v, {
+            leftLowerText: s,
+            leftUpperText: a
+          }), /* @__PURE__ */ e(D, {
+            isComplete: f,
+            rightLowerText: c,
+            rightUpperText: x
+          })]
+        })
+      ]
+    })]
+  });
+};
+export {
+  A as DirectDeposit
+};
+
+//# sourceMappingURL=DirectDeposit.es.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"DirectDeposit.es.js","names":[],"sources":["../../../../../src/insights/components/shared/DirectDeposit/DirectDeposit.tsx"],"sourcesContent":["import React, { useRef } from 'react'\n\nimport Box from '@mui/material/Box'\nimport Card from '@mui/material/Card'\nimport Stack from '@mui/material/Stack'\n\nimport { FullFeedBodyHeader, LeftBox, MiniBodyHeader, RightBox } from '../..'\nimport { useContainerDimensions } from '../../../hooks/useContainerDimensions'\nimport { DepositBodyBaseProps } from '../../../types/DirectDeposit'\nimport { Confetti } from '../Confetti'\n\nconst SHARED_STYLES = {\n  card: {\n    miniWidget: { gap: 8, p: '12px 16px', mt: 0 },\n    insightFeed: { gap: 12, p: '0px 16px 16px', mt: 22 },\n  },\n}\n\nconst MINI_WIDGET = 'miniWidget'\nconst INSIGHT_FEED = 'insightFeed'\n\nexport const DirectDeposit: React.FC<DepositBodyBaseProps> = ({\n  account,\n  animation,\n  leftLowerText,\n  leftUpperText,\n  isComplete,\n  isMini,\n  headerString,\n  rightLowerText,\n  rightUpperText,\n}) => {\n  const feedType = isMini ? MINI_WIDGET : INSIGHT_FEED\n\n  const containerRef = useRef<HTMLDivElement>(null)\n  const { height, width } = useContainerDimensions(containerRef)\n\n  return (\n    <Box\n      alignItems=\"center\"\n      display=\"flex\"\n      justifyContent=\"center\"\n      ref={containerRef}\n      sx={{ bgcolor: 'grey.200', p: 16 }}\n      width=\"100%\"\n    >\n      <Confetti height={height} shouldRun={animation.shouldRun} width={width} />\n      <Card\n        elevation={1}\n        sx={{\n          display: 'flex',\n          flexDirection: 'column',\n          alignItems: 'center',\n          justifyContent: 'center',\n          flexWrap: 'wrap',\n          bgcolor: 'background.paper',\n          borderRadius: '8px',\n          overflow: 'visible',\n          minHeight: 120,\n          width: '100%',\n          ...SHARED_STYLES.card[feedType],\n        }}\n      >\n        {feedType === INSIGHT_FEED && (\n          <FullFeedBodyHeader account={account} headerString={headerString} />\n        )}\n        {feedType === MINI_WIDGET && (\n          <MiniBodyHeader account={account} headerString={headerString} />\n        )}\n        <Stack direction=\"row\" gap={12} height={58} width=\"100%\">\n          <LeftBox leftLowerText={leftLowerText} leftUpperText={leftUpperText} />\n          <RightBox\n            isComplete={isComplete}\n            rightLowerText={rightLowerText}\n            rightUpperText={rightUpperText}\n          />\n        </Stack>\n      </Card>\n    </Box>\n  )\n}\n"],"mappings":";;;;;;;;;;;AAWA,IAAM,IAAgB,EACpB,MAAM;AAAA,EACJ,YAAY;AAAA,IAAE,KAAK;AAAA,IAAG,GAAG;AAAA,IAAa,IAAI;AAAA,EAAE;AAAA,EAC5C,aAAa;AAAA,IAAE,KAAK;AAAA,IAAI,GAAG;AAAA,IAAiB,IAAI;AAAA,EAAG;AACrD,EACF,GAEM,IAAc,cACd,IAAe,eAER,IAAA,CAAiD,EAC5D,SAAA,GACA,WAAA,GACA,eAAA,GACA,eAAA,GACA,YAAA,GACA,QAAA,GACA,cAAA,GACA,gBAAA,GACA,gBAAA,EAAA,MACI;AACJ,QAAM,IAAW,IAAS,IAAc,GAElC,IAAe,EAAuB,IAAI,GAC1C,EAAE,QAAA,GAAQ,OAAA,EAAA,IAAU,EAAuB,CAAY;AAE7D,SACE,gBAAA,EAAC,GAAD;AAAA,IACE,YAAW;AAAA,IACX,SAAQ;AAAA,IACR,gBAAe;AAAA,IACf,KAAK;AAAA,IACL,IAAI;AAAA,MAAE,SAAS;AAAA,MAAY,GAAG;AAAA,IAAG;AAAA,IACjC,OAAM;AAAA,cANR,CAQE,gBAAA,EAAC,GAAD;AAAA,MAAkB,QAAA;AAAA,MAAQ,WAAW,EAAU;AAAA,MAAkB,OAAA;AAAA,IAAQ,CAAA,GACzE,gBAAA,EAAC,GAAD;AAAA,MACE,WAAW;AAAA,MACX,IAAI;AAAA,QACF,SAAS;AAAA,QACT,eAAe;AAAA,QACf,YAAY;AAAA,QACZ,gBAAgB;AAAA,QAChB,UAAU;AAAA,QACV,SAAS;AAAA,QACT,cAAc;AAAA,QACd,UAAU;AAAA,QACV,WAAW;AAAA,QACX,OAAO;AAAA,QACP,GAAG,EAAc,KAAK,CAAA;AAAA,MACxB;AAAA,gBAdF;AAAA,QAgBG,MAAa,KACZ,gBAAA,EAAC,GAAD;AAAA,UAA6B,SAAA;AAAA,UAAuB,cAAA;AAAA,QAAe,CAAA;AAAA,QAEpE,MAAa,KACZ,gBAAA,EAAC,GAAD;AAAA,UAAyB,SAAA;AAAA,UAAuB,cAAA;AAAA,QAAe,CAAA;AAAA,QAEjE,gBAAA,EAAC,GAAD;AAAA,UAAO,WAAU;AAAA,UAAM,KAAK;AAAA,UAAI,QAAQ;AAAA,UAAI,OAAM;AAAA,oBAAlD,CACE,gBAAA,EAAC,GAAD;AAAA,YAAwB,eAAA;AAAA,YAA8B,eAAA;AAAA,UAAgB,CAAA,GACtE,gBAAA,EAAC,GAAD;AAAA,YACc,YAAA;AAAA,YACI,gBAAA;AAAA,YACA,gBAAA;AAAA,UACjB,CAAA,CACI;AAAA;MACH;AAAA,MACH;AAAA;AAET"}

package/dist/insights/components/shared/DirectDeposit/DirectDepositSubHeader.es.js

@@ -0,0 +1,20 @@
+import "react";
+import { Text as p } from "@mxenabled/mxui";
+import { Icon as x } from "@mxenabled/mx-icons";
+import { Fragment as f, jsx as o, jsxs as n } from "react/jsx-runtime";
+var u = ({ boldText: t, iconColor: e, iconFill: i, iconSX: m, name: r, size: c, subHeaderString: s, textSX: l }) => /* @__PURE__ */ n(f, { children: [r && /* @__PURE__ */ o(x, {
+  color: e,
+  fill: i,
+  name: r,
+  size: c,
+  sx: m
+}), /* @__PURE__ */ o(p, {
+  bold: t,
+  sx: l,
+  children: s
+})] });
+export {
+  u as DirectDepositSubHeader
+};
+
+//# sourceMappingURL=DirectDepositSubHeader.es.js.map

package/dist/insights/components/shared/DirectDeposit/DirectDepositSubHeader.es.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DirectDepositSubHeader.es.js","names":[],"sources":["../../../../../src/insights/components/shared/DirectDeposit/DirectDepositSubHeader.tsx"],"sourcesContent":["import React from 'react'\n\nimport { Icon } from '@mxenabled/mx-icons'\nimport { Text } from '@mxenabled/mxui'\n\nimport { type SxProps, type Theme } from '@mui/material/styles'\n\ninterface DirectDepositSubHeaderProps {\n  boldText?: boolean\n  iconColor?:\n    | 'inherit'\n    | 'action'\n    | 'disabled'\n    | 'primary'\n    | 'secondary'\n    | 'error'\n    | 'info'\n    | 'success'\n    | 'warning'\n  iconFill?: boolean\n  iconSX?: SxProps<Theme>\n  name?: string\n  size?: number\n  subHeaderString: string\n  textSX?: SxProps<Theme>\n}\n\nexport const DirectDepositSubHeader: React.FC<DirectDepositSubHeaderProps> = ({\n  boldText,\n  iconColor,\n  iconFill,\n  iconSX,\n  name,\n  size,\n  subHeaderString,\n  textSX,\n}) => {\n  return (\n    <>\n      {name && <Icon color={iconColor} fill={iconFill} name={name} size={size} sx={iconSX} />}\n      <Text bold={boldText} sx={textSX}>\n        {subHeaderString}\n      </Text>\n    </>\n  )\n}\n"],"mappings":";;;;AA2BA,IAAa,IAAA,CAAiE,EAC5E,UAAA,GACA,WAAA,GACA,UAAA,GACA,QAAA,GACA,MAAA,GACA,MAAA,GACA,iBAAA,GACA,QAAA,EAAA,MAGE,gBAAA,EAAA,GAAA,EAAA,UAAA,CACG,KAAQ,gBAAA,EAAC,GAAD;AAAA,EAAM,OAAO;AAAA,EAAW,MAAM;AAAA,EAAgB,MAAA;AAAA,EAAY,MAAA;AAAA,EAAM,IAAI;AAAS,CAAA,GACtF,gBAAA,EAAC,GAAD;AAAA,EAAM,MAAM;AAAA,EAAU,IAAI;AAAA,YACvB;AACG,CAAA,CACN,EAAA,CAAA"}

package/dist/insights/components/shared/DirectDeposit/FullFeedBodyHeader.es.js

@@ -0,0 +1,33 @@
+import "react";
+import { InstitutionLogo as d, P as l } from "@mxenabled/mxui";
+import n from "@mui/material/Paper";
+import { Fragment as a, jsx as e, jsxs as h } from "react/jsx-runtime";
+var t = 48, u = ({ account: i, headerString: r }) => /* @__PURE__ */ h(a, { children: [/* @__PURE__ */ e(n, {
+  elevation: 1,
+  sx: (o) => ({
+    height: t,
+    width: t,
+    borderRadius: "6px",
+    outline: `1.2px solid ${o.palette.neutral?.light}`,
+    marginTop: -22,
+    zIndex: 10
+  }),
+  children: /* @__PURE__ */ e(d, {
+    alt: i.logo_alt_text,
+    height: t,
+    institutionGuid: i.guid || "",
+    width: t
+  })
+}), /* @__PURE__ */ e(l, {
+  bold: !0,
+  sx: {
+    width: "100%",
+    textAlign: "center"
+  },
+  children: r
+})] });
+export {
+  u as FullFeedBodyHeader
+};
+
+//# sourceMappingURL=FullFeedBodyHeader.es.js.map

package/dist/insights/components/shared/DirectDeposit/FullFeedBodyHeader.es.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FullFeedBodyHeader.es.js","names":[],"sources":["../../../../../src/insights/components/shared/DirectDeposit/FullFeedBodyHeader.tsx"],"sourcesContent":["import React from 'react'\n\nimport { InstitutionLogo, P } from '@mxenabled/mxui'\n\nimport Paper from '@mui/material/Paper'\n\ninterface BodyHeaderProps {\n  account: { guid: string; logo_alt_text: string }\n  headerString: string\n}\n\nconst LOGO_SIZE = 48\n\nexport const FullFeedBodyHeader: React.FC<BodyHeaderProps> = ({ account, headerString }) => {\n  return (\n    <>\n      <Paper\n        elevation={1}\n        sx={(theme) => ({\n          height: LOGO_SIZE,\n          width: LOGO_SIZE,\n          borderRadius: '6px',\n          outline: `1.2px solid ${theme.palette.neutral?.light}`,\n          marginTop: -22,\n          zIndex: 10,\n        })}\n      >\n        <InstitutionLogo\n          alt={account.logo_alt_text}\n          height={LOGO_SIZE}\n          institutionGuid={account.guid || ''}\n          width={LOGO_SIZE}\n        />\n      </Paper>\n      <P bold={true} sx={{ width: '100%', textAlign: 'center' }}>\n        {headerString}\n      </P>\n    </>\n  )\n}\n"],"mappings":";;;;AAWA,IAAM,IAAY,IAEL,IAAA,CAAiD,EAAE,SAAA,GAAS,cAAA,EAAA,MAErE,gBAAA,EAAA,GAAA,EAAA,UAAA,CACE,gBAAA,EAAC,GAAD;AAAA,EACE,WAAW;AAAA,EACX,IAAA,CAAK,OAAW;AAAA,IACd,QAAQ;AAAA,IACR,OAAO;AAAA,IACP,cAAc;AAAA,IACd,SAAS,eAAe,EAAM,QAAQ,SAAS,KAAA;AAAA,IAC/C,WAAW;AAAA,IACX,QAAQ;AAAA,EACV;AAAA,YAEA,gBAAA,EAAC,GAAD;AAAA,IACE,KAAK,EAAQ;AAAA,IACb,QAAQ;AAAA,IACR,iBAAiB,EAAQ,QAAQ;AAAA,IACjC,OAAO;AAAA,EACR,CAAA;AACI,CAAA,GACP,gBAAA,EAAC,GAAD;AAAA,EAAG,MAAM;AAAA,EAAM,IAAI;AAAA,IAAE,OAAO;AAAA,IAAQ,WAAW;AAAA,EAAS;AAAA,YACrD;AACA,CAAA,CACH,EAAA,CAAA"}

package/dist/insights/components/shared/DirectDeposit/LeftBox.es.js

@@ -0,0 +1,29 @@
+import "react";
+import { P as t } from "@mxenabled/mxui";
+import { jsx as r, jsxs as i } from "react/jsx-runtime";
+import d from "@mui/material/Box";
+var c = ({ leftLowerText: e, leftUpperText: o }) => /* @__PURE__ */ i(d, {
+  sx: {
+    bgcolor: "background.default",
+    borderRadius: "4px",
+    p: 12,
+    textAlign: "center",
+    width: "100%"
+  },
+  children: [/* @__PURE__ */ r(t, {
+    "data-ui-test": "mx-insights-sudd-left-upper-text",
+    sx: { color: "secondary.light" },
+    variant: "caption",
+    children: o
+  }), /* @__PURE__ */ r(t, {
+    bold: !0,
+    "data-ui-test": "mx-insights-sudd-left-lower-text",
+    variant: "body2",
+    children: e
+  })]
+});
+export {
+  c as LeftBox
+};
+
+//# sourceMappingURL=LeftBox.es.js.map

package/dist/insights/components/shared/DirectDeposit/LeftBox.es.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"LeftBox.es.js","names":[],"sources":["../../../../../src/insights/components/shared/DirectDeposit/LeftBox.tsx"],"sourcesContent":["import React from 'react'\n\nimport { P } from '@mxenabled/mxui'\n\nimport Box from '@mui/material/Box'\n\ninterface LeftBoxProps {\n  leftLowerText: string\n  leftUpperText: string\n}\n\nexport const LeftBox: React.FC<LeftBoxProps> = ({ leftLowerText, leftUpperText }) => {\n  return (\n    <Box\n      sx={{\n        bgcolor: 'background.default',\n        borderRadius: '4px',\n        p: 12,\n        textAlign: 'center',\n        width: '100%',\n      }}\n    >\n      <P\n        data-ui-test=\"mx-insights-sudd-left-upper-text\"\n        sx={{ color: 'secondary.light' }}\n        variant=\"caption\"\n      >\n        {leftUpperText}\n      </P>\n      <P bold={true} data-ui-test=\"mx-insights-sudd-left-lower-text\" variant=\"body2\">\n        {leftLowerText}\n      </P>\n    </Box>\n  )\n}\n"],"mappings":";;;;AAWA,IAAa,IAAA,CAAmC,EAAE,eAAA,GAAe,eAAA,EAAA,MAE7D,gBAAA,EAAC,GAAD;AAAA,EACE,IAAI;AAAA,IACF,SAAS;AAAA,IACT,cAAc;AAAA,IACd,GAAG;AAAA,IACH,WAAW;AAAA,IACX,OAAO;AAAA,EACT;AAAA,YAPF,CASE,gBAAA,EAAC,GAAD;AAAA,IACE,gBAAa;AAAA,IACb,IAAI,EAAE,OAAO,kBAAkB;AAAA,IAC/B,SAAQ;AAAA,cAEP;AAAA,EACA,CAAA,GACH,gBAAA,EAAC,GAAD;AAAA,IAAG,MAAM;AAAA,IAAM,gBAAa;AAAA,IAAmC,SAAQ;AAAA,cACpE;AAAA,EACA,CAAA,CACA"}

package/dist/insights/components/shared/DirectDeposit/MiniBodyHeader.es.js

@@ -0,0 +1,29 @@
+import "react";
+import { InstitutionLogo as e, P as d } from "@mxenabled/mxui";
+import { jsx as t, jsxs as n } from "react/jsx-runtime";
+import r from "@mui/material/Box";
+var x = ({ account: i, headerString: o }) => /* @__PURE__ */ n(r, {
+  "data-ui-test": "mx-insights-sudd-mini-body-header",
+  sx: {
+    display: "flex",
+    flexDirection: "row",
+    gap: 8,
+    justifyContent: "center"
+  },
+  children: [/* @__PURE__ */ t(e, {
+    alt: i.logo_alt_text || "Financial Institution Logo",
+    "data-ui-test": "mx-insights-sudd-mini-body-header-logo",
+    height: 20,
+    institutionGuid: i.guid || "",
+    width: 20
+  }), /* @__PURE__ */ t(d, {
+    bold: !0,
+    "data-ui-test": "mx-insights-sudd-mini-body-header-text",
+    children: o
+  })]
+});
+export {
+  x as MiniBodyHeader
+};
+
+//# sourceMappingURL=MiniBodyHeader.es.js.map

package/dist/insights/components/shared/DirectDeposit/MiniBodyHeader.es.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MiniBodyHeader.es.js","names":[],"sources":["../../../../../src/insights/components/shared/DirectDeposit/MiniBodyHeader.tsx"],"sourcesContent":["import React from 'react'\n\nimport { InstitutionLogo, P } from '@mxenabled/mxui'\n\nimport Box from '@mui/material/Box'\n\ninterface MiniBodyHeaderProps {\n  account: { guid: string; logo_alt_text: string }\n  headerString: string\n}\n\nexport const MiniBodyHeader: React.FC<MiniBodyHeaderProps> = ({ account, headerString }) => {\n  const logoSize = 20\n\n  return (\n    <Box\n      data-ui-test=\"mx-insights-sudd-mini-body-header\"\n      sx={{ display: 'flex', flexDirection: 'row', gap: 8, justifyContent: 'center' }}\n    >\n      <InstitutionLogo\n        alt={account.logo_alt_text || 'Financial Institution Logo'}\n        data-ui-test=\"mx-insights-sudd-mini-body-header-logo\"\n        height={logoSize}\n        institutionGuid={account.guid || ''}\n        width={logoSize}\n      />\n      <P bold={true} data-ui-test=\"mx-insights-sudd-mini-body-header-text\">\n        {headerString}\n      </P>\n    </Box>\n  )\n}\n"],"mappings":";;;;AAWA,IAAa,IAAA,CAAiD,EAAE,SAAA,GAAS,cAAA,EAAA,MAIrE,gBAAA,EAAC,GAAD;AAAA,EACE,gBAAa;AAAA,EACb,IAAI;AAAA,IAAE,SAAS;AAAA,IAAQ,eAAe;AAAA,IAAO,KAAK;AAAA,IAAG,gBAAgB;AAAA,EAAS;AAAA,YAFhF,CAIE,gBAAA,EAAC,GAAD;AAAA,IACE,KAAK,EAAQ,iBAAiB;AAAA,IAC9B,gBAAa;AAAA,IACb,QAAQ;AAAA,IACR,iBAAiB,EAAQ,QAAQ;AAAA,IACjC,OAAO;AAAA,EACR,CAAA,GACD,gBAAA,EAAC,GAAD;AAAA,IAAG,MAAM;AAAA,IAAM,gBAAa;AAAA,cACzB;AAAA,EACA,CAAA,CACA"}

package/dist/insights/components/shared/DirectDeposit/RightBox.es.js

@@ -0,0 +1,43 @@
+import "react";
+import a from "@mui/material/Stack";
+import { P as o } from "@mxenabled/mxui";
+import { jsx as t, jsxs as n } from "react/jsx-runtime";
+import s from "@mui/material/Box";
+var p = ({ isComplete: r, rightLowerText: i, rightUpperText: e }) => /* @__PURE__ */ t(s, {
+  sx: {
+    bgcolor: r ? "success.lighter" : "transparent",
+    border: r ? "1px solid" : "1px dashed",
+    borderColor: r ? "success.darker" : "secondary.lighter",
+    borderRadius: "4px",
+    p: 12,
+    width: "100%"
+  },
+  children: /* @__PURE__ */ n(a, {
+    alignItems: "center",
+    gap: 2,
+    justifyContent: "center",
+    children: [/* @__PURE__ */ t(o, {
+      "data-ui-test": "mx-insights-sudd-right-upper-text",
+      sx: { color: r ? "common.black" : "secondary.light" },
+      variant: "caption",
+      children: e
+    }), /* @__PURE__ */ t(o, {
+      bold: !0,
+      "data-ui-test": "mx-insights-sudd-right-lower-text",
+      sx: {
+        bgcolor: r ? "success.darker" : "warning.lighter",
+        borderRadius: 4,
+        color: r ? "common.white" : "warning.darker",
+        fontSize: 10,
+        p: "2px 8px"
+      },
+      variant: "tiny",
+      children: i
+    })]
+  })
+});
+export {
+  p as RightBox
+};
+
+//# sourceMappingURL=RightBox.es.js.map

package/dist/insights/components/shared/DirectDeposit/RightBox.es.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"RightBox.es.js","names":[],"sources":["../../../../../src/insights/components/shared/DirectDeposit/RightBox.tsx"],"sourcesContent":["import React from 'react'\n\nimport { P } from '@mxenabled/mxui'\n\nimport Box from '@mui/material/Box'\nimport Stack from '@mui/material/Stack'\n\ninterface RightBoxProps {\n  isComplete?: boolean\n  rightLowerText: string\n  rightUpperText: string\n}\n\nexport const RightBox: React.FC<RightBoxProps> = ({\n  isComplete,\n  rightLowerText,\n  rightUpperText,\n}) => {\n  return (\n    <Box\n      sx={{\n        bgcolor: isComplete ? 'success.lighter' : 'transparent',\n        border: isComplete ? '1px solid' : '1px dashed',\n        borderColor: isComplete ? 'success.darker' : 'secondary.lighter',\n        borderRadius: '4px',\n        p: 12,\n        width: '100%',\n      }}\n    >\n      <Stack alignItems=\"center\" gap={2} justifyContent=\"center\">\n        <P\n          data-ui-test=\"mx-insights-sudd-right-upper-text\"\n          sx={{\n            color: isComplete ? 'common.black' : 'secondary.light',\n          }}\n          variant=\"caption\"\n        >\n          {rightUpperText}\n        </P>\n        <P\n          bold={true}\n          data-ui-test=\"mx-insights-sudd-right-lower-text\"\n          sx={{\n            bgcolor: isComplete ? 'success.darker' : 'warning.lighter',\n            borderRadius: 4,\n            color: isComplete ? 'common.white' : 'warning.darker',\n            fontSize: 10,\n            p: '2px 8px',\n          }}\n          variant=\"tiny\"\n        >\n          {rightLowerText}\n        </P>\n      </Stack>\n    </Box>\n  )\n}\n"],"mappings":";;;;;AAaA,IAAa,IAAA,CAAqC,EAChD,YAAA,GACA,gBAAA,GACA,gBAAA,EAAA,MAGE,gBAAA,EAAC,GAAD;AAAA,EACE,IAAI;AAAA,IACF,SAAS,IAAa,oBAAoB;AAAA,IAC1C,QAAQ,IAAa,cAAc;AAAA,IACnC,aAAa,IAAa,mBAAmB;AAAA,IAC7C,cAAc;AAAA,IACd,GAAG;AAAA,IACH,OAAO;AAAA,EACT;AAAA,YAEA,gBAAA,EAAC,GAAD;AAAA,IAAO,YAAW;AAAA,IAAS,KAAK;AAAA,IAAG,gBAAe;AAAA,cAAlD,CACE,gBAAA,EAAC,GAAD;AAAA,MACE,gBAAa;AAAA,MACb,IAAI,EACF,OAAO,IAAa,iBAAiB,kBACvC;AAAA,MACA,SAAQ;AAAA,gBAEP;AAAA,IACA,CAAA,GACH,gBAAA,EAAC,GAAD;AAAA,MACE,MAAM;AAAA,MACN,gBAAa;AAAA,MACb,IAAI;AAAA,QACF,SAAS,IAAa,mBAAmB;AAAA,QACzC,cAAc;AAAA,QACd,OAAO,IAAa,iBAAiB;AAAA,QACrC,UAAU;AAAA,QACV,GAAG;AAAA,MACL;AAAA,MACA,SAAQ;AAAA,gBAEP;AAAA,IACA,CAAA,CACE;AAAA;AACJ,CAAA"}

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

@@ -0,0 +1,82 @@
+import i from "@mui/material/Stack";
+import { InstitutionLogo as e } from "@mxenabled/mxui";
+import { Link as l } from "@mxenabled/mx-icons";
+import { jsx as t, jsxs as d } from "react/jsx-runtime";
+var x = ({ bottomIconAltText: o, bottomIconInstitutionGuid: n, topIconAltText: r, topIconInstitutionGuid: s }) => /* @__PURE__ */ d(i, {
+  sx: {
+    alignItems: "center",
+    height: "100%",
+    justifyContent: "center",
+    position: "relative",
+    width: "100%"
+  },
+  children: [
+    /* @__PURE__ */ t(i, {
+      sx: {
+        bottom: "50%",
+        position: "absolute",
+        right: "50%"
+      },
+      children: /* @__PURE__ */ t(e, {
+        alt: r,
+        institutionGuid: s,
+        size: 36
+      })
+    }),
+    /* @__PURE__ */ t(i, {
+      sx: {
+        alignItems: "center",
+        borderRadius: "999px",
+        height: 48,
+        justifyContent: "center",
+        outline: "1px solid",
+        outlineColor: "divider",
+        width: 48
+      },
+      children: /* @__PURE__ */ t(i, {
+        sx: {
+          alignItems: "center",
+          bgcolor: "secondary.light",
+          borderRadius: "999px",
+          height: 36,
+          justifyContent: "center",
+          width: 36
+        },
+        children: /* @__PURE__ */ t(i, {
+          sx: {
+            alignItems: "center",
+            bgcolor: "secondary.main",
+            borderRadius: "12px",
+            height: 20,
+            justifyContent: "center",
+            outline: "2px solid",
+            outlineColor: "primary.contrastText",
+            width: 20,
+            zIndex: 1
+          },
+          children: /* @__PURE__ */ t(l, {
+            size: 16,
+            sx: { color: "primary.contrastText" }
+          })
+        })
+      })
+    }),
+    /* @__PURE__ */ t(i, {
+      sx: {
+        left: "50%",
+        position: "absolute",
+        top: "50%"
+      },
+      children: /* @__PURE__ */ t(e, {
+        alt: o,
+        institutionGuid: n,
+        size: 36
+      })
+    })
+  ]
+});
+export {
+  x as default
+};
+
+//# sourceMappingURL=DiscoveredAccountsConnect.es.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"DiscoveredAccountsConnect.es.js","names":[],"sources":["../../../../src/insights/components/shared/DiscoveredAccountsConnect.tsx"],"sourcesContent":["import Stack from '@mui/material/Stack'\n\nimport { InstitutionLogo } from '@mxenabled/mxui'\nimport { Link } from '@mxenabled/mx-icons'\n\ninterface DiscoveredAccountsConnectProps {\n  bottomIconAltText: string\n  bottomIconInstitutionGuid: string\n  topIconAltText: string\n  topIconInstitutionGuid: string\n}\n\nconst DiscoveredAccountsConnect = ({\n  bottomIconAltText,\n  bottomIconInstitutionGuid,\n  topIconAltText,\n  topIconInstitutionGuid,\n}: DiscoveredAccountsConnectProps) => {\n  return (\n    <Stack\n      sx={{\n        alignItems: 'center',\n        height: '100%',\n        justifyContent: 'center',\n        position: 'relative',\n        width: '100%',\n      }}\n    >\n      <Stack sx={{ bottom: '50%', position: 'absolute', right: '50%' }}>\n        <InstitutionLogo alt={topIconAltText} institutionGuid={topIconInstitutionGuid} size={36} />\n      </Stack>\n\n      <Stack\n        sx={{\n          alignItems: 'center',\n          borderRadius: '999px',\n          height: 48,\n          justifyContent: 'center',\n          outline: '1px solid',\n          outlineColor: 'divider',\n          width: 48,\n        }}\n      >\n        <Stack\n          sx={{\n            alignItems: 'center',\n            bgcolor: 'secondary.light',\n            borderRadius: '999px',\n            height: 36,\n            justifyContent: 'center',\n            width: 36,\n          }}\n        >\n          <Stack\n            sx={{\n              alignItems: 'center',\n              bgcolor: 'secondary.main',\n              borderRadius: '12px',\n              height: 20,\n              justifyContent: 'center',\n              outline: '2px solid',\n              outlineColor: 'primary.contrastText',\n              width: 20,\n              zIndex: 1,\n            }}\n          >\n            <Link size={16} sx={{ color: 'primary.contrastText' }} />\n          </Stack>\n        </Stack>\n      </Stack>\n\n      <Stack sx={{ left: '50%', position: 'absolute', top: '50%' }}>\n        <InstitutionLogo\n          alt={bottomIconAltText}\n          institutionGuid={bottomIconInstitutionGuid}\n          size={36}\n        />\n      </Stack>\n    </Stack>\n  )\n}\n\nexport default DiscoveredAccountsConnect\n"],"mappings":";;;;AAYA,IAAM,IAAA,CAA6B,EACjC,mBAAA,GACA,2BAAA,GACA,gBAAA,GACA,wBAAA,EAAA,MAGE,gBAAA,EAAC,GAAD;AAAA,EACE,IAAI;AAAA,IACF,YAAY;AAAA,IACZ,QAAQ;AAAA,IACR,gBAAgB;AAAA,IAChB,UAAU;AAAA,IACV,OAAO;AAAA,EACT;AAAA,YAPF;AAAA,IASE,gBAAA,EAAC,GAAD;AAAA,MAAO,IAAI;AAAA,QAAE,QAAQ;AAAA,QAAO,UAAU;AAAA,QAAY,OAAO;AAAA,MAAM;AAAA,gBAC7D,gBAAA,EAAC,GAAD;AAAA,QAAiB,KAAK;AAAA,QAAgB,iBAAiB;AAAA,QAAwB,MAAM;AAAA,MAAK,CAAA;AAAA,IACrF,CAAA;AAAA,IAEP,gBAAA,EAAC,GAAD;AAAA,MACE,IAAI;AAAA,QACF,YAAY;AAAA,QACZ,cAAc;AAAA,QACd,QAAQ;AAAA,QACR,gBAAgB;AAAA,QAChB,SAAS;AAAA,QACT,cAAc;AAAA,QACd,OAAO;AAAA,MACT;AAAA,gBAEA,gBAAA,EAAC,GAAD;AAAA,QACE,IAAI;AAAA,UACF,YAAY;AAAA,UACZ,SAAS;AAAA,UACT,cAAc;AAAA,UACd,QAAQ;AAAA,UACR,gBAAgB;AAAA,UAChB,OAAO;AAAA,QACT;AAAA,kBAEA,gBAAA,EAAC,GAAD;AAAA,UACE,IAAI;AAAA,YACF,YAAY;AAAA,YACZ,SAAS;AAAA,YACT,cAAc;AAAA,YACd,QAAQ;AAAA,YACR,gBAAgB;AAAA,YAChB,SAAS;AAAA,YACT,cAAc;AAAA,YACd,OAAO;AAAA,YACP,QAAQ;AAAA,UACV;AAAA,oBAEA,gBAAA,EAAC,GAAD;AAAA,YAAM,MAAM;AAAA,YAAI,IAAI,EAAE,OAAO,uBAAuB;AAAA,UAAI,CAAA;AAAA,QACnD,CAAA;AAAA,MACF,CAAA;AAAA,IACF,CAAA;AAAA,IAEP,gBAAA,EAAC,GAAD;AAAA,MAAO,IAAI;AAAA,QAAE,MAAM;AAAA,QAAO,UAAU;AAAA,QAAY,KAAK;AAAA,MAAM;AAAA,gBACzD,gBAAA,EAAC,GAAD;AAAA,QACE,KAAK;AAAA,QACL,iBAAiB;AAAA,QACjB,MAAM;AAAA,MACP,CAAA;AAAA,IACI,CAAA;AAAA,EACF"}