@mxenabled/connect-widget 1.2.0 → 1.2.1

package/dist/index.es.js

@@ -66853,7 +66853,30 @@ const DefaultMFA = (props) => {
   return /* @__PURE__ */ jsxRuntimeExports.jsxs(React__default.Fragment, { children: [
     mfaCredentials.map((credential, i) => {
       const metaData = credential.meta_data || credential.image_data;
+      const asteriskColor = "#E32727";
       return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { style: styles.label, children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsxs(
+          Typography$1,
+          {
+            id: `label-for-mfa-text-field`,
+            style: styles.challengeLabel,
+            variant: "subtitle1",
+            children: [
+              credential.label,
+              " ",
+              /* @__PURE__ */ jsxRuntimeExports.jsx(
+                Typography$1,
+                {
+                  component: "span",
+                  sx: {
+                    color: asteriskColor
+                  },
+                  children: "*"
+                }
+              )
+            ]
+          }
+        ),
         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,
@@ -66862,9 +66885,8 @@ const DefaultMFA = (props) => {
             error: !!errors[credential.label],
             fullWidth: true,
             helperText: errors[credential.label],
-            inputProps: { "aria-label": credential.label },
+            inputProps: { "aria-labelledby": `label-for-mfa-text-field` },
             inputRef: i === 0 ? buttonRef : null,
-            label: credential.label,
             name: credential.label,
             onChange: handleMFACodeChange,
             required: true,
@@ -66897,10 +66919,11 @@ const DefaultMFA = (props) => {
 const getStyles$Y = (tokens) => {
   return {
     label: {
-      marginTop: tokens.Spacing.XLarge
+      marginTop: tokens.Spacing.Medium
     },
     challengeLabel: {
-      marginBottom: tokens.Spacing.Tiny
+      marginBottom: tokens.Spacing.Tiny,
+      lineHeight: "24px"
     },
     metaData: {
       display: "flex",
@@ -67157,7 +67180,7 @@ const getStyles$W = (tokens) => {
       height: "100%"
     },
     title: {
-      marginBottom: tokens.Spacing.XLarge
+      marginBottom: tokens.Spacing.Medium
     },
     credentialLabel: {
       lineHeight: tokens.LineHeight.Paragraph,