@mxenabled/connect-widget 1.1.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,
@@ -69381,15 +69404,23 @@ const ConnectLogoHeader = (props) => {
   const tokens = useTokens();
   const styles = getStyles$M();
   const defaultInstitutionImage = () => colorScheme === COLOR_SCHEME.LIGHT ? /* @__PURE__ */ jsxRuntimeExports.jsx("div", { style: { borderRadius: tokens.BorderRadius.Large }, children: /* @__PURE__ */ jsxRuntimeExports.jsx(SvgConnectHeaderInstitutionLight, {}) }) : /* @__PURE__ */ jsxRuntimeExports.jsx("div", { style: { borderRadius: tokens.BorderRadius.Large }, children: /* @__PURE__ */ jsxRuntimeExports.jsx(SvgConnectHeaderInstitutionDark, {}) });
+  const defaultAggregatorLogo = () => colorScheme === COLOR_SCHEME.LIGHT ? /* @__PURE__ */ jsxRuntimeExports.jsx(SvgConnectHeaderBackdropLight, {}) : /* @__PURE__ */ jsxRuntimeExports.jsx(SvgConnectHeaderBackdropDark, {});
   return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { "aria-hidden": true, style: styles.container, children: [
-    /* @__PURE__ */ jsxRuntimeExports.jsx("div", { "data-test": "mxLogo", style: styles.backdropImage, children: colorScheme === COLOR_SCHEME.LIGHT ? /* @__PURE__ */ jsxRuntimeExports.jsx(SvgConnectHeaderBackdropLight, {}) : /* @__PURE__ */ jsxRuntimeExports.jsx(SvgConnectHeaderBackdropDark, {}) }),
+    /* @__PURE__ */ jsxRuntimeExports.jsx("div", { "data-test": "mxLogo", style: styles.backdropImage, children: props?.institution?.aggregator_logo_url ? /* @__PURE__ */ jsxRuntimeExports.jsx(
+      "img",
+      {
+        alt: "aggregator logo",
+        src: props.institution.aggregator_logo_url,
+        style: styles.aggregatorLogo
+      }
+    ) : defaultAggregatorLogo() }),
     /* @__PURE__ */ jsxRuntimeExports.jsx("div", { style: styles.clientLogo, children: /* @__PURE__ */ jsxRuntimeExports.jsx(ClientLogo, { alt: "Client logo", clientGuid, size: 64 }) }),
-    /* @__PURE__ */ jsxRuntimeExports.jsx("div", { style: styles.institutionLogo, children: props.institutionGuid ? /* @__PURE__ */ jsxRuntimeExports.jsx(
+    /* @__PURE__ */ jsxRuntimeExports.jsx("div", { style: styles.institutionLogo, children: props?.institution?.guid ? /* @__PURE__ */ jsxRuntimeExports.jsx(
       De,
       {
         alt: "Institution logo",
-        institutionGuid: props.institutionGuid,
-        logoUrl: props.institutionLogo,
+        institutionGuid: props.institution.guid,
+        logoUrl: props.institution.logo_url,
         size: 64,
         style: { borderRadius: tokens.BorderRadius.Large }
       }
@@ -69429,6 +69460,12 @@ const getStyles$M = () => {
       width: maxHeight,
       marginLeft: "80px",
       zIndex: 20
+    },
+    aggregatorLogo: {
+      width: "88px",
+      height: "80px",
+      zIndex: 10,
+      position: "relative"
     }
   };
 };
@@ -69758,7 +69795,7 @@ const DisclosureInterstitial = React__default.forwardRef((props, interstitialNav
     return /* @__PURE__ */ jsxRuntimeExports.jsx(DataAvailable, {});
   }
   return /* @__PURE__ */ jsxRuntimeExports.jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsxRuntimeExports.jsx(SlideDown, { delay: getNextDelay(), children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { style: styles.logoHeader, children: /* @__PURE__ */ jsxRuntimeExports.jsx(ConnectLogoHeader, { institutionGuid: institution.guid }) }) }),
+    /* @__PURE__ */ jsxRuntimeExports.jsx(SlideDown, { delay: getNextDelay(), children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { style: styles.logoHeader, children: /* @__PURE__ */ jsxRuntimeExports.jsx(ConnectLogoHeader, { institution }) }) }),
     /* @__PURE__ */ jsxRuntimeExports.jsxs(SlideDown, { delay: getNextDelay(), children: [
       /* @__PURE__ */ jsxRuntimeExports.jsx("div", { style: styles.flexGroup, children: /* @__PURE__ */ jsxRuntimeExports.jsx(
         x,
@@ -71572,13 +71609,7 @@ const Connecting = (props) => {
   }
   return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { ref: connectingRef, style: styles.container, children: [
     /* @__PURE__ */ jsxRuntimeExports.jsxs(SlideDown, { delay: getNextDelay(), children: [
-      /* @__PURE__ */ jsxRuntimeExports.jsx("div", { style: styles.logoHeader, children: /* @__PURE__ */ jsxRuntimeExports.jsx(
-        ConnectLogoHeader,
-        {
-          institutionGuid: institution.guid,
-          institutionLogo: institution.logo_url
-        }
-      ) }),
+      /* @__PURE__ */ jsxRuntimeExports.jsx("div", { style: styles.logoHeader, children: /* @__PURE__ */ jsxRuntimeExports.jsx(ConnectLogoHeader, { institution }) }),
       /* @__PURE__ */ jsxRuntimeExports.jsx(x, { component: "h2", style: styles.subHeader, truncate: false, variant: "H2", children: __("Connecting to %1", institution.name) })
     ] }),
     /* @__PURE__ */ jsxRuntimeExports.jsx(SlideDown, { delay: getNextDelay(), children: /* @__PURE__ */ jsxRuntimeExports.jsx(ProgressBar, { jobSchedule }) }),
@@ -77219,7 +77250,7 @@ const DynamicDisclosure = React__default.forwardRef(
       }
     );
     return /* @__PURE__ */ jsxRuntimeExports.jsx(StickyComponentContainer, { footer, footerStyle: { borderTop: "" }, ref: containerRef, children: /* @__PURE__ */ jsxRuntimeExports.jsxs(Fragment, { children: [
-      /* @__PURE__ */ jsxRuntimeExports.jsx(SlideDown, { delay: getNextDelay(), children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { style: styles.logoHeader, children: /* @__PURE__ */ jsxRuntimeExports.jsx(ConnectLogoHeader, { institutionGuid: institution.guid }) }) }),
+      /* @__PURE__ */ jsxRuntimeExports.jsx(SlideDown, { delay: getNextDelay(), children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { style: styles.logoHeader, children: /* @__PURE__ */ jsxRuntimeExports.jsx(ConnectLogoHeader, { institution }) }) }),
       /* @__PURE__ */ jsxRuntimeExports.jsx(SlideDown, { delay: getNextDelay(), children: /* @__PURE__ */ jsxRuntimeExports.jsx(
         x,
         {