@mxenabled/connect-widget 0.20.2 → 0.20.4

package/dist/index.es.js

@@ -5087,39 +5087,23 @@ function baseFindIndex$2(array, predicate, fromIndex, fromRight) {
 }
 var _baseFindIndex = baseFindIndex$2;
 
-var _trimmedEndIndex;
-var hasRequired_trimmedEndIndex;
-
-function require_trimmedEndIndex () {
-	if (hasRequired_trimmedEndIndex) return _trimmedEndIndex;
-	hasRequired_trimmedEndIndex = 1;
-	var reWhitespace = /\s/;
-	function trimmedEndIndex(string) {
-	  var index = string.length;
-	  while (index-- && reWhitespace.test(string.charAt(index))) {
-	  }
-	  return index;
-	}
-	_trimmedEndIndex = trimmedEndIndex;
-	return _trimmedEndIndex;
+var reWhitespace = /\s/;
+function trimmedEndIndex$1(string) {
+  var index = string.length;
+  while (index-- && reWhitespace.test(string.charAt(index))) {
+  }
+  return index;
 }
+var _trimmedEndIndex = trimmedEndIndex$1;
 
-var _baseTrim;
-var hasRequired_baseTrim;
-
-function require_baseTrim () {
-	if (hasRequired_baseTrim) return _baseTrim;
-	hasRequired_baseTrim = 1;
-	var trimmedEndIndex = require_trimmedEndIndex();
-	var reTrimStart = /^\s+/;
-	function baseTrim(string) {
-	  return string ? string.slice(0, trimmedEndIndex(string) + 1).replace(reTrimStart, "") : string;
-	}
-	_baseTrim = baseTrim;
-	return _baseTrim;
+var trimmedEndIndex = _trimmedEndIndex;
+var reTrimStart = /^\s+/;
+function baseTrim$1(string) {
+  return string ? string.slice(0, trimmedEndIndex(string) + 1).replace(reTrimStart, "") : string;
 }
+var _baseTrim = baseTrim$1;
 
-var baseTrim = require_baseTrim(), isObject$7 = isObject_1, isSymbol$1 = isSymbol_1;
+var baseTrim = _baseTrim, isObject$7 = isObject_1, isSymbol$1 = isSymbol_1;
 var NAN = 0 / 0;
 var reIsBadHex = /^[-+]0x[0-9a-f]+$/i;
 var reIsBinary = /^0b[01]+$/i;
@@ -8575,7 +8559,7 @@ var hasRequiredTrim;
 function requireTrim () {
 	if (hasRequiredTrim) return trim_1;
 	hasRequiredTrim = 1;
-	var baseToString = _baseToString, baseTrim = require_baseTrim(), castSlice = require_castSlice(), charsEndIndex = require_charsEndIndex(), charsStartIndex = require_charsStartIndex(), stringToArray = require_stringToArray(), toString = toString_1;
+	var baseToString = _baseToString, baseTrim = _baseTrim, castSlice = require_castSlice(), charsEndIndex = require_charsEndIndex(), charsStartIndex = require_charsStartIndex(), stringToArray = require_stringToArray(), toString = toString_1;
 	function trim(string, chars, guard) {
 	  string = toString(string);
 	  if (string && (guard || chars === void 0)) {
@@ -62660,7 +62644,8 @@ const InstitutionGridTile = (props) => {
         /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "iconTile " + dist.css(styles.iconTile), style: styles.iconTile, children: /* @__PURE__ */ jsxRuntimeExports.jsx(
           De,
           {
-            alt: "",
+            alt: `${institution.name} logo`,
+            "aria-hidden": true,
             institutionGuid: institution.guid,
             logoUrl: institution.logo_url,
             size: containerWidth - 24
@@ -62903,7 +62888,8 @@ const InstitutionTile = (props) => {
       startIcon: /* @__PURE__ */ jsxRuntimeExports.jsx(
         De,
         {
-          alt: "",
+          alt: `${institution.name} logo`,
+          "aria-hidden": true,
           institutionGuid: institution.guid,
           logoUrl: institution.logo_url,
           size
@@ -65022,6 +65008,46 @@ const useApi = () => {
   return { api: context };
 };
 
+const RequiredFieldNote = ({ styles }) => {
+  const requiredFieldNoteColor = "#666";
+  const asteriskColor = "#E32727";
+  return /* @__PURE__ */ jsxRuntimeExports.jsx(
+    Box,
+    {
+      sx: {
+        marginTop: 16,
+        marginBottom: 32,
+        ...styles
+      },
+      children: /* @__PURE__ */ jsxRuntimeExports.jsxs(
+        Typography$1,
+        {
+          component: "span",
+          sx: {
+            color: requiredFieldNoteColor,
+            fontSize: "13px"
+          },
+          variant: "caption",
+          children: [
+            /* @__PURE__ */ jsxRuntimeExports.jsx(
+              Typography$1,
+              {
+                component: "span",
+                sx: {
+                  color: asteriskColor
+                },
+                children: "*"
+              }
+            ),
+            " ",
+            __("Required")
+          ]
+        }
+      )
+    }
+  );
+};
+
 const RequestInstitution = React__default.forwardRef((props, requestInstitutionRef) => {
   const { handleClose, handleTicketSuccess, user } = props;
   useAnalyticsPath(...PageviewInfo.CONNECT_SUPPORT_REQUEST_INSTITUTION);
@@ -65120,6 +65146,7 @@ const RequestInstitution = React__default.forwardRef((props, requestInstitutionR
             label: schema.email.label,
             name: "email",
             onChange: handleTextInputChange,
+            required: true,
             value: values.email
           }
         ) }),
@@ -65140,6 +65167,7 @@ const RequestInstitution = React__default.forwardRef((props, requestInstitutionR
             label: schema.institutionName.label,
             name: "institutionName",
             onChange: handleTextInputChange,
+            required: true,
             value: values.institutionName
           }
         ) }),
@@ -65159,10 +65187,11 @@ const RequestInstitution = React__default.forwardRef((props, requestInstitutionR
             label: schema.institutionWebsite.label,
             name: "institutionWebsite",
             onChange: handleTextInputChange,
+            required: true,
             value: values.institutionWebsite
           }
         ) }),
-        /* @__PURE__ */ jsxRuntimeExports.jsx("div", { style: styles.input, children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+        /* @__PURE__ */ jsxRuntimeExports.jsx("div", { style: { ...styles.input, marginBottom: 0 }, children: /* @__PURE__ */ jsxRuntimeExports.jsx(
           ProtectedTextField,
           {
             "aria-label": schema.institutionLogin.label,
@@ -65183,6 +65212,7 @@ const RequestInstitution = React__default.forwardRef((props, requestInstitutionR
           }
         ) })
       ] }),
+      /* @__PURE__ */ jsxRuntimeExports.jsx(RequiredFieldNote, {}),
       /* @__PURE__ */ jsxRuntimeExports.jsxs(SlideDown, { delay: getNextDelay(), children: [
         /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { style: styles.buttons, children: [
           /* @__PURE__ */ jsxRuntimeExports.jsx(
@@ -65322,6 +65352,7 @@ const GeneralSupport = React__default.forwardRef((props, generalSupportRef) => {
           label: schema.email.label,
           name: "email",
           onChange: handleTextInputChange,
+          required: true,
           value: values.email
         }
       ) }),
@@ -65338,10 +65369,11 @@ const GeneralSupport = React__default.forwardRef((props, generalSupportRef) => {
           label: schema.issueDescription.label,
           name: "issueDescription",
           onChange: handleTextInputChange,
+          required: true,
           value: values.issueDescription
         }
       ) }),
-      /* @__PURE__ */ jsxRuntimeExports.jsx("div", { style: styles.input, children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+      /* @__PURE__ */ jsxRuntimeExports.jsx("div", { style: { ...styles.input, marginBottom: 0 }, children: /* @__PURE__ */ jsxRuntimeExports.jsx(
         ProtectedTextField,
         {
           autoComplete: "off",
@@ -65354,11 +65386,13 @@ const GeneralSupport = React__default.forwardRef((props, generalSupportRef) => {
           multiline: true,
           name: "issueDetails",
           onChange: handleTextInputChange,
+          required: true,
           rows: 4,
           value: values.issueDetails
         }
       ) })
     ] }),
+    /* @__PURE__ */ jsxRuntimeExports.jsx(RequiredFieldNote, {}),
     /* @__PURE__ */ jsxRuntimeExports.jsxs(SlideDown, { delay: getNextDelay(), children: [
       /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { style: styles.buttons, children: [
         /* @__PURE__ */ jsxRuntimeExports.jsx(
@@ -66774,41 +66808,32 @@ const DefaultMFA = (props) => {
     mfaCredentials.map((credential, i) => {
       const metaData = credential.meta_data || credential.image_data;
       return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { style: styles.label, children: [
-        /* @__PURE__ */ jsxRuntimeExports.jsx(
-          x,
-          {
-            component: "p",
-            "data-test": "challenge-label",
-            style: styles.challengeLabel,
-            truncate: false,
-            variant: "Paragraph",
-            children: credential.label
-          }
-        ),
         metaData ? /* @__PURE__ */ jsxRuntimeExports.jsx("div", { style: styles.metaData, children: /* @__PURE__ */ jsxRuntimeExports.jsx("img", { alt: __("Challenge Image"), src: metaData, style: styles.mfaImage }) }) : null,
         /* @__PURE__ */ jsxRuntimeExports.jsx(
           ProtectedTextField,
           {
             disabled: isSubmitting,
-            error: true,
+            error: !!errors[credential.label],
             fullWidth: true,
             helperText: errors[credential.label],
             inputProps: { "aria-label": credential.label },
             inputRef: i === 0 ? buttonRef : null,
+            label: credential.label,
             name: credential.label,
             onChange: handleMFACodeChange,
+            required: true,
             value: values[credential.label] || ""
           }
         )
       ] }, credential.label);
     }),
+    /* @__PURE__ */ jsxRuntimeExports.jsx(RequiredFieldNote, {}),
     /* @__PURE__ */ jsxRuntimeExports.jsx(
       Button$2,
       {
         "data-test": "continue-button",
         fullWidth: true,
         onClick: handleSubmit,
-        style: styles.submitButton,
         type: "submit",
         variant: "contained",
         children: isSubmitting ? `${_p("Verifying", "Checking")}...` : __("Continue")
@@ -66826,7 +66851,7 @@ const DefaultMFA = (props) => {
 const getStyles$Y = (tokens) => {
   return {
     label: {
-      marginBottom: tokens.Spacing.Large
+      marginTop: tokens.Spacing.XLarge
     },
     challengeLabel: {
       marginBottom: tokens.Spacing.Tiny
@@ -66844,9 +66869,6 @@ const getStyles$Y = (tokens) => {
       width: "auto",
       height: "auto",
       borderRadius: tokens.BorderRadius.Medium
-    },
-    submitButton: {
-      marginTop: tokens.Spacing.XLarge
     }
   };
 };
@@ -73804,11 +73826,7 @@ const RoutingNumber = (props) => {
           value: values.routingNumber
         }
       ) }) }),
-      /* @__PURE__ */ jsxRuntimeExports.jsx("div", { style: { marginTop: 16, marginBottom: 32 }, children: /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { style: { color: "#666", fontSize: 13 }, children: [
-        /* @__PURE__ */ jsxRuntimeExports.jsx("span", { style: { color: "#E32727", fontSize: 13 }, children: "*" }),
-        " ",
-        __("Required")
-      ] }) }),
+      /* @__PURE__ */ jsxRuntimeExports.jsx(RequiredFieldNote, {}),
       /* @__PURE__ */ jsxRuntimeExports.jsx(SlideDown, { delay: getNextDelay(), children: /* @__PURE__ */ jsxRuntimeExports.jsx(
         Button$2,
         {
@@ -74008,11 +74026,7 @@ const PersonalInfoForm = ({ accountDetails, onContinue }) => {
         }
       ) })
     ] }),
-    /* @__PURE__ */ jsxRuntimeExports.jsx("div", { style: { marginTop: 16, marginBottom: 32 }, children: /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { style: { color: "#666", fontSize: 13 }, children: [
-      /* @__PURE__ */ jsxRuntimeExports.jsx("span", { style: { color: "#E32727", fontSize: 13 }, children: "*" }),
-      " ",
-      __("Required")
-    ] }) }),
+    /* @__PURE__ */ jsxRuntimeExports.jsx(RequiredFieldNote, {}),
     /* @__PURE__ */ jsxRuntimeExports.jsx(SlideDown, { delay: getNextDelay(), children: /* @__PURE__ */ jsxRuntimeExports.jsx(
       Button$2,
       {
@@ -74711,6 +74725,7 @@ const VerifyDeposits = ({ microdeposit, onSuccess }) => {
             name: "firstAmount",
             onChange: handleTextInputChange,
             placeholder: "0.00",
+            required: true,
             value: values.firstAmount
           }
         ) }),
@@ -74731,10 +74746,12 @@ const VerifyDeposits = ({ microdeposit, onSuccess }) => {
             name: "secondAmount",
             onChange: handleTextInputChange,
             placeholder: "0.00",
+            required: true,
             value: values.secondAmount
           }
         ) })
       ] }) }),
+      /* @__PURE__ */ jsxRuntimeExports.jsx(RequiredFieldNote, { styles: { marginBottom: 0 } }),
       /* @__PURE__ */ jsxRuntimeExports.jsx(SlideDown, { children: /* @__PURE__ */ jsxRuntimeExports.jsx(
         Button$2,
         {