@mxenabled/connect-widget 2.5.0 → 2.5.2

package/dist/index.es.js

@@ -67415,7 +67415,7 @@ function withProtection(SensitiveComponent) {
 }
 
 const ProtectedTextField = withProtection(X0);
-const ProtectedRadio = withProtection(Radio);
+withProtection(Radio);
 const ProtectedSelect = withProtection(Select);
 const ProtectedSelectionBox = withProtection(q0);
 withProtection(UserFeedback);
@@ -78876,7 +78876,7 @@ const HowItWorks = ({ onContinue }) => {
   const getNextDelay = getDelay();
   return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { ref: containerRef, children: [
     /* @__PURE__ */ jsxRuntimeExports.jsx(SlideDown, { delay: getNextDelay(), children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { style: styles.body, children: [
-      /* @__PURE__ */ jsxRuntimeExports.jsx(D, { "data-test": "title-header", truncate: false, variant: "H2", children: __("Connect your institution with account numbers") }),
+      /* @__PURE__ */ jsxRuntimeExports.jsx(D, { component: "h2", "data-test": "title-header", truncate: false, variant: "H2", children: __("Connect your institution with account numbers") }),
       /* @__PURE__ */ jsxRuntimeExports.jsx(
         InstructionList,
         {
@@ -78962,7 +78962,17 @@ const PersonalInfoForm = ({ accountDetails, onContinue }) => {
   }, [isSubmitting]);
   return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { ref: containerRef, children: /* @__PURE__ */ jsxRuntimeExports.jsxs("form", { onSubmit: (e) => e.preventDefault(), children: [
     /* @__PURE__ */ jsxRuntimeExports.jsx(SlideDown, { delay: getNextDelay(), children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { style: styles.header, children: [
-      /* @__PURE__ */ jsxRuntimeExports.jsx(D, { "data-test": "title-header", style: styles.title, truncate: false, variant: "H2", children: __("Enter account holder information") }),
+      /* @__PURE__ */ jsxRuntimeExports.jsx(
+        D,
+        {
+          component: "h2",
+          "data-test": "title-header",
+          style: styles.title,
+          truncate: false,
+          variant: "H2",
+          children: __("Enter account holder information")
+        }
+      ),
       /* @__PURE__ */ jsxRuntimeExports.jsx(
         D,
         {
@@ -79103,7 +79113,17 @@ const AccountInfo = (props) => {
     return /* @__PURE__ */ jsxRuntimeExports.jsx(FindAccountInfo, { onClose: () => setShowFindDetails(false), step: "accountInfo" });
   }
   return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { ref: containerRef, children: [
-    /* @__PURE__ */ jsxRuntimeExports.jsx(SlideDown, { delay: getNextDelay(), children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { style: styles.header, children: /* @__PURE__ */ jsxRuntimeExports.jsx(D, { "data-test": "title-header", style: styles.title, truncate: false, variant: "H2", children: __("Enter account information") }) }) }),
+    /* @__PURE__ */ jsxRuntimeExports.jsx(SlideDown, { delay: getNextDelay(), children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { style: styles.header, children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+      D,
+      {
+        component: "h2",
+        "data-test": "title-header",
+        style: styles.title,
+        truncate: false,
+        variant: "H2",
+        children: __("Enter account information")
+      }
+    ) }) }),
     /* @__PURE__ */ jsxRuntimeExports.jsxs("form", { onSubmit: (e) => e.preventDefault(), children: [
       /* @__PURE__ */ jsxRuntimeExports.jsx(SlideDown, { delay: getNextDelay(), children: /* @__PURE__ */ jsxRuntimeExports.jsxs(FormControl$1, { component: "fieldset", sx: { width: "100%" }, children: [
         /* @__PURE__ */ jsxRuntimeExports.jsx(FormLabel$1, { component: "legend", children: __("Account type") }),
@@ -79114,7 +79134,7 @@ const AccountInfo = (props) => {
             row: true,
             sx: {
               justifyContent: "space-between",
-              padding: "0 0 32px 0",
+              padding: "0 0 16px 0",
               marginTop: tokens.Spacing.XSmall,
               "& > .ph-no-capture": {
                 width: "48%"
@@ -79423,7 +79443,17 @@ const ConfirmDetails = (props) => {
   }, [containerRef]);
   const handleEdit = (focus) => fadeOut(containerRef.current, "up", 300).then(() => onEditForm(focus));
   return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { ref: containerRef, children: [
-    /* @__PURE__ */ jsxRuntimeExports.jsx(SlideDown, { delay: getNextDelay(), children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { style: styles.header, children: /* @__PURE__ */ jsxRuntimeExports.jsx(D, { "data-test": "title-header", style: styles.title, truncate: false, variant: "H2", children: __("Review your information") }) }) }),
+    /* @__PURE__ */ jsxRuntimeExports.jsx(SlideDown, { delay: getNextDelay(), children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { style: styles.header, children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+      D,
+      {
+        component: "h2",
+        "data-test": "title-header",
+        style: styles.title,
+        truncate: false,
+        variant: "H2",
+        children: __("Review your information")
+      }
+    ) }) }),
     props.shouldShowUserDetails && /* @__PURE__ */ jsxRuntimeExports.jsxs(SlideDown, { delay: getNextDelay(), children: [
       /* @__PURE__ */ jsxRuntimeExports.jsx(
         DetailReviewItem,
@@ -79562,7 +79592,17 @@ const ComeBack = ({ microdeposit, onDone }) => {
   return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { ref: containerRef, children: [
     /* @__PURE__ */ jsxRuntimeExports.jsx(SlideDown, { delay: 100, children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { "aria-hidden": true, "data-test": "svg-header", style: styles.svg, children: /* @__PURE__ */ jsxRuntimeExports.jsx(SvgComeBackGraphic, {}) }) }),
     /* @__PURE__ */ jsxRuntimeExports.jsx(SlideDown, { delay: 100, children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { style: styles.header, children: [
-      /* @__PURE__ */ jsxRuntimeExports.jsx(D, { "data-test": "title-header", style: styles.title, truncate: false, variant: "H2", children: __("Check back soon") }),
+      /* @__PURE__ */ jsxRuntimeExports.jsx(
+        D,
+        {
+          component: "h2",
+          "data-test": "title-header",
+          style: styles.title,
+          truncate: false,
+          variant: "H2",
+          children: __("Check back soon")
+        }
+      ),
       /* @__PURE__ */ jsxRuntimeExports.jsx(
         ProtectedText,
         {
@@ -79688,7 +79728,17 @@ const VerifyDeposits = ({ microdeposit, onSuccess }) => {
   }, [errors]);
   return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { ref: containerRef, children: [
     /* @__PURE__ */ jsxRuntimeExports.jsx(SlideDown, { children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { style: styles.header, children: [
-      /* @__PURE__ */ jsxRuntimeExports.jsx(D, { "data-test": "title-header", style: styles.title, truncate: false, variant: "H2", children: __("Enter deposit amounts") }),
+      /* @__PURE__ */ jsxRuntimeExports.jsx(
+        D,
+        {
+          component: "h2",
+          "data-test": "title-header",
+          style: styles.title,
+          truncate: false,
+          variant: "H2",
+          children: __("Enter deposit amounts")
+        }
+      ),
       /* @__PURE__ */ jsxRuntimeExports.jsx("br", {}),
       /* @__PURE__ */ jsxRuntimeExports.jsx(
         ProtectedText,
@@ -79780,7 +79830,8 @@ const VerifyDeposits = ({ microdeposit, onSuccess }) => {
 const getStyles$k = (tokens) => ({
   header: {
     display: "flex",
-    flexDirection: "column"
+    flexDirection: "column",
+    marginBottom: tokens.Spacing.Large
   },
   title: {
     marginBottom: tokens.Spacing.XSmall
@@ -79867,7 +79918,7 @@ const MicrodepositErrors = ({
   };
   return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { ref: containerRef, children: [
     /* @__PURE__ */ jsxRuntimeExports.jsxs(SlideDown, { children: [
-      /* @__PURE__ */ jsxRuntimeExports.jsx("div", { style: styles.header, children: /* @__PURE__ */ jsxRuntimeExports.jsx(D, { style: styles.title, truncate: false, variant: "H2", children: getTitle() }) }),
+      /* @__PURE__ */ jsxRuntimeExports.jsx("div", { style: styles.header, children: /* @__PURE__ */ jsxRuntimeExports.jsx(D, { component: "h2", style: styles.title, truncate: false, variant: "H2", children: getTitle() }) }),
       /* @__PURE__ */ jsxRuntimeExports.jsx(MessageBox, { style: styles.messageBox, variant: "error", children: /* @__PURE__ */ jsxRuntimeExports.jsx(D, { component: "p", role: "alert", truncate: false, variant: "ParagraphSmall", children: getMessage() }) })
     ] }),
     /* @__PURE__ */ jsxRuntimeExports.jsxs(SlideDown, { delay: 100, children: [
@@ -79986,7 +80037,17 @@ const Verifying = ({ microdeposit, onError, onSuccess }) => {
   }, [microdeposit.guid]);
   return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { ref: containerRef, children: [
     /* @__PURE__ */ jsxRuntimeExports.jsx(SlideDown, { children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { style: styles.header, children: [
-      /* @__PURE__ */ jsxRuntimeExports.jsx(D, { "data-test": "header-title", style: styles.title, truncate: false, variant: "H2", children: __("Verifying ...") }),
+      /* @__PURE__ */ jsxRuntimeExports.jsx(
+        D,
+        {
+          component: "h2",
+          "data-test": "header-title",
+          style: styles.title,
+          truncate: false,
+          variant: "H2",
+          children: __("Verifying ...")
+        }
+      ),
       /* @__PURE__ */ jsxRuntimeExports.jsx(
         D,
         {
@@ -80043,7 +80104,17 @@ const Verified = ({ microdeposit, onDone }) => {
   return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { ref: containerRef, style: styles.container, children: [
     /* @__PURE__ */ jsxRuntimeExports.jsx(SlideDown, { children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { "aria-hidden": true, "data-test": "svg-header", style: styles.svg, children: /* @__PURE__ */ jsxRuntimeExports.jsx(SvgVerifiedGraphic, {}) }) }),
     /* @__PURE__ */ jsxRuntimeExports.jsx(SlideDown, { delay: 100, children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { style: styles.header, children: [
-      /* @__PURE__ */ jsxRuntimeExports.jsx(D, { "data-test": "title-header", style: styles.title, truncate: false, variant: "H2", children: __("Deposits verified") }),
+      /* @__PURE__ */ jsxRuntimeExports.jsx(
+        D,
+        {
+          component: "h2",
+          "data-test": "title-header",
+          style: styles.title,
+          truncate: false,
+          variant: "H2",
+          children: __("Deposits verified")
+        }
+      ),
       /* @__PURE__ */ jsxRuntimeExports.jsx(D, { "data-test": "verified-paragraph", truncate: false, variant: "Paragraph", children: __("You're almost done setting things up. Continue to your institution.") })
     ] }) }),
     /* @__PURE__ */ jsxRuntimeExports.jsx(SlideDown, { delay: 200, children: /* @__PURE__ */ jsxRuntimeExports.jsx(
@@ -80562,6 +80633,7 @@ const VerifyExistingMember = (props) => {
     /* @__PURE__ */ jsxRuntimeExports.jsx(
       D,
       {
+        component: "h3",
         "data-test": "connected-institutions-text",
         sx: { marginBottom: tokens.Spacing.XSmall, fontWeight: 600 },
         truncate: false,
@@ -84178,33 +84250,43 @@ const DeleteMemberSurvey = (props) => {
     ) })
   ] }) : /* @__PURE__ */ jsxRuntimeExports.jsxs(React__default.Fragment, { children: [
     /* @__PURE__ */ jsxRuntimeExports.jsx(D, { sx: { marginBottom: 4 }, truncate: false, variant: "H2", children: __("Disconnect institution") }),
-    /* @__PURE__ */ jsxRuntimeExports.jsx(FormLabel$1, { children: /* @__PURE__ */ jsxRuntimeExports.jsxs(D, { "data-test": "disconnect-disclaimer", truncate: false, variant: "Paragraph", children: [
-      _p(
-        "connect/deletesurvey/disclaimer/text",
-        "Why do you want to disconnect %1?",
-        member.name
-      ),
-      /* @__PURE__ */ jsxRuntimeExports.jsx("span", { style: { color: "#E32727", fontSize: 15 }, children: "*" })
-    ] }) }),
-    /* @__PURE__ */ jsxRuntimeExports.jsx("div", { style: styles.reasons, children: reasonList.map((reason, i) => /* @__PURE__ */ jsxRuntimeExports.jsx("div", { style: { marginBottom: 20 }, children: /* @__PURE__ */ jsxRuntimeExports.jsx(
-      ProtectedRadio,
-      {
-        autoFocus: i === 0,
-        checked: selectedReason === reason,
-        "data-test": `radio-${reason.replace(/\s+/g, "-")}`,
-        "data-testid": "disconnect-option",
-        id: reason,
-        label: reason,
-        labelPosition: "right",
-        name: "reasons",
-        onChange: () => {
-          setSelectedReason(reason);
-        },
-        required: true
-      },
-      reason
-    ) }, reason)) }),
-    /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { style: { color: "#666", fontSize: 13, marginBottom: 12 }, children: [
+    /* @__PURE__ */ jsxRuntimeExports.jsxs(FormControl$1, { children: [
+      /* @__PURE__ */ jsxRuntimeExports.jsx(FormLabel$1, { id: "disconnect-options-label", children: /* @__PURE__ */ jsxRuntimeExports.jsxs(
+        D,
+        {
+          component: "p",
+          "data-test": "disconnect-disclaimer",
+          truncate: false,
+          variant: "Paragraph",
+          children: [
+            _p(
+              "connect/deletesurvey/disclaimer/text",
+              "Why do you want to disconnect %1?",
+              member.name
+            ),
+            /* @__PURE__ */ jsxRuntimeExports.jsx("span", { style: { color: "#E32727", fontSize: 15 }, children: "*" })
+          ]
+        }
+      ) }),
+      /* @__PURE__ */ jsxRuntimeExports.jsx("div", { style: styles.reasons, children: reasonList.map((reason, i) => /* @__PURE__ */ jsxRuntimeExports.jsx("div", { children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+        q0,
+        {
+          autoFocus: i === 0,
+          "data-test": `selection-${reason.replace(/\s+/g, "-")}`,
+          "data-testid": "disconnect-option",
+          error: isSubmitted && !selectedReason,
+          inputProps: {
+            "aria-labelledby": "disconnect-options-label"
+          },
+          message: reason,
+          name: "selected-reason",
+          onChange: (e) => setSelectedReason(e.target.value),
+          selected: selectedReason === reason,
+          value: reason
+        }
+      ) }, reason)) })
+    ] }),
+    /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { style: { color: "#666", fontSize: 13, marginBottom: 12, marginTop: 4 }, children: [
       /* @__PURE__ */ jsxRuntimeExports.jsx("span", { style: { color: "#E32727", fontSize: 13 }, children: "*" }),
       " ",
       __("Required")