@mxenabled/connect-widget 0.18.3 → 0.18.4

package/dist/index.es.js

@@ -66478,52 +66478,71 @@ const MFAOptions = (props) => {
   const tokens = useTokens();
   const styles = getStyles$Z(tokens);
   const mfaLabel = mfaCredentials.map((credential) => credential.label);
-  const dynamicLabel = mfaLabel[0] ? mfaLabel[0] : __("Choose an authentication method.");
+  const dynamicMFALabel = mfaLabel[0] ? mfaLabel[0] : __("Choose an authentication method.");
+  const dynamicLabel = isSAS ? __("Select an account to connect") : dynamicMFALabel;
   return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { children: [
-    !isSAS && /* @__PURE__ */ jsxRuntimeExports.jsx(x, { component: "p", style: styles.label, truncate: false, variant: "Paragraph", children: dynamicLabel }),
+    /* @__PURE__ */ jsxRuntimeExports.jsxs(FormLabel$1, { sx: { display: "flex" }, children: [
+      /* @__PURE__ */ jsxRuntimeExports.jsx(x, { component: "p", style: styles.label, truncate: false, variant: "Paragraph", children: dynamicLabel }),
+      /* @__PURE__ */ jsxRuntimeExports.jsx("span", { style: { color: "#E32727", fontSize: 15 }, children: "*" })
+    ] }),
     mfaCredentials.map((credential) => {
       return credential.options.map((option, i) => {
         const isSelected = selectedOption.guid === option.guid;
-        return /* @__PURE__ */ jsxRuntimeExports.jsx("span", { "data-test": option.label.replace(/\s/g, "-"), children: /* @__PURE__ */ jsxRuntimeExports.jsx(
-          ProtectedSelectionBox,
+        return /* @__PURE__ */ jsxRuntimeExports.jsx(
+          "span",
           {
-            autoFocus: i === 0,
-            checked: isSelected,
-            disabled: isSubmitting,
-            id: `${option.guid}`,
-            label: /* @__PURE__ */ jsxRuntimeExports.jsx(
-              x,
+            "aria-checked": isSelected,
+            "aria-required": "true",
+            "data-test": option.label.replace(/\s/g, "-"),
+            role: "radio",
+            children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+              ProtectedSelectionBox,
               {
-                bold: true,
-                "data-test": option.label.replace(/\s/g, "-"),
-                truncate: false,
-                variant: "Paragraph",
-                children: option.label
-              }
-            ),
-            name: "options-selection-box",
-            onChange: () => {
-              setSelectedOption({ guid: option.guid });
-              setCredentials(
-                credentialsToSubmit.map(
-                  (cred) => credential.guid === option.credential_guid ? { guid: option.credential_guid, value: option.guid } : cred
-                )
-              );
-              sendPosthogEvent(AnalyticEvents.MFA_SELECTED_OPTION, {
-                institution_guid: institution.guid,
-                institution_name: institution.name,
-                selectedOption: option.value,
-                member_guid: sha256Exports.sha256(currentMember.guid)
-              });
-            },
-            style: styles.card,
-            value: option.label,
-            variant: "radio"
+                autoFocus: i === 0,
+                checked: isSelected,
+                disabled: isSubmitting,
+                id: `${option.guid}`,
+                label: /* @__PURE__ */ jsxRuntimeExports.jsx(
+                  x,
+                  {
+                    bold: true,
+                    "data-test": option.label.replace(/\s/g, "-"),
+                    truncate: false,
+                    variant: "Paragraph",
+                    children: option.label
+                  }
+                ),
+                name: "options-selection-box",
+                onChange: () => {
+                  setSelectedOption({ guid: option.guid });
+                  setCredentials(
+                    credentialsToSubmit.map(
+                      (cred) => credential.guid === option.credential_guid ? { guid: option.credential_guid, value: option.guid } : cred
+                    )
+                  );
+                  sendPosthogEvent(AnalyticEvents.MFA_SELECTED_OPTION, {
+                    institution_guid: institution.guid,
+                    institution_name: institution.name,
+                    selectedOption: option.value,
+                    member_guid: sha256Exports.sha256(currentMember.guid)
+                  });
+                },
+                style: styles.card,
+                value: option.label,
+                variant: "radio"
+              },
+              `${option.guid}`
+            )
           },
           `${option.guid}`
-        ) }, `${option.guid}`);
+        );
       });
     }),
+    /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { style: { color: "#666", fontSize: 13, marginBottom: 12 }, children: [
+      /* @__PURE__ */ jsxRuntimeExports.jsx("span", { style: { color: "#E32727", fontSize: 13 }, children: "*" }),
+      " ",
+      __("Required")
+    ] }),
     isSubmitted && _isEmpty(selectedOption) && /* @__PURE__ */ jsxRuntimeExports.jsxs("section", { role: "alert", style: styles.errorContent, children: [
       /* @__PURE__ */ jsxRuntimeExports.jsx(AttentionFilled, { color: tokens.Color.Error300 }),
       /* @__PURE__ */ jsxRuntimeExports.jsx("p", { style: styles.errorMessage, children: isSAS ? __("Account selection is required.") : __("Choose an option") })