@asgardeo/react 0.2.0 → 0.2.1

package/dist/cjs/types/components/SignIn/fragments/BasicAuth.d.ts

@@ -15,7 +15,7 @@
  * specific language governing permissions and limitations
  * under the License.
  */
-import { ReactElement } from 'react';
+import { PropsWithChildren, ReactElement } from 'react';
 import BasicAuthProps from '../../../models/basic-auth-props';
 import './basic-auth.scss';
 /**
@@ -31,5 +31,5 @@ import './basic-auth.scss';
  *
  * @return {ReactElement}
  */
-declare const BasicAuth: ({ handleAuthenticate, authenticator, alert, brandingProps, showSelfSignUp, renderLoginOptions, }: BasicAuthProps) => ReactElement;
+declare const BasicAuth: ({ handleAuthenticate, authenticator, children, alert, brandingProps, showSelfSignUp, renderLoginOptions, }: PropsWithChildren<BasicAuthProps>) => ReactElement;
 export default BasicAuth;

package/dist/cjs/types/components/SignIn/fragments/EmailOtp.d.ts

@@ -15,7 +15,7 @@
  * specific language governing permissions and limitations
  * under the License.
  */
-import { ReactElement } from 'react';
+import { PropsWithChildren, ReactElement } from 'react';
 import EmailOtpProps from '../../../models/email-otp-props';
 import './email-otp.scss';
 /**
@@ -28,5 +28,5 @@ import './email-otp.scss';
  * @param {AlertType} props.alert - Alert type.
  * @return {ReactElement}
  */
-declare const EmailOtp: ({ alert, brandingProps, authenticator, handleAuthenticate }: EmailOtpProps) => ReactElement;
+declare const EmailOtp: ({ alert, brandingProps, authenticator, children, handleAuthenticate }: PropsWithChildren<EmailOtpProps>) => ReactElement;
 export default EmailOtp;

package/dist/cjs/types/components/SignIn/fragments/IdentifierFirst.d.ts

@@ -15,7 +15,7 @@
  * specific language governing permissions and limitations
  * under the License.
  */
-import { ReactElement } from 'react';
+import { PropsWithChildren, ReactElement } from 'react';
 import BasicAuthProps from '../../../models/basic-auth-props';
 import './basic-auth.scss';
 /**
@@ -31,5 +31,5 @@ import './basic-auth.scss';
  *
  * @return {ReactElement}
  */
-declare const IdentifierFirst: ({ handleAuthenticate, authenticator, alert, brandingProps, showSelfSignUp, renderLoginOptions, }: BasicAuthProps) => ReactElement;
+declare const IdentifierFirst: ({ handleAuthenticate, authenticator, alert, brandingProps, children, showSelfSignUp, renderLoginOptions, }: PropsWithChildren<BasicAuthProps>) => ReactElement;
 export default IdentifierFirst;

package/dist/cjs/types/components/SignIn/fragments/SmsOtp.d.ts

@@ -15,7 +15,7 @@
  * specific language governing permissions and limitations
  * under the License.
  */
-import { ReactElement } from 'react';
+import { PropsWithChildren, ReactElement } from 'react';
 import EmailOtpProps from '../../../models/email-otp-props';
-declare const SmsOtp: ({ alert, brandingProps, authenticator, handleAuthenticate }: EmailOtpProps) => ReactElement;
+declare const SmsOtp: ({ alert, brandingProps, authenticator, children, handleAuthenticate, }: PropsWithChildren<EmailOtpProps>) => ReactElement;
 export default SmsOtp;

package/dist/cjs/types/components/SignIn/fragments/Totp.d.ts

@@ -15,7 +15,7 @@
  * specific language governing permissions and limitations
  * under the License.
  */
-import { ReactElement } from 'react';
+import { ReactElement, PropsWithChildren } from 'react';
 import TotpProps from '../../../models/totp-props';
 import './totp.scss';
 /**
@@ -29,5 +29,5 @@ import './totp.scss';
  *
  * @return {ReactElement}
  */
-declare const Totp: ({ brandingProps, authenticator, handleAuthenticate, alert }: TotpProps) => ReactElement;
+declare const Totp: ({ brandingProps, authenticator, children, handleAuthenticate, alert, }: PropsWithChildren<TotpProps>) => ReactElement;
 export default Totp;

package/dist/cjs/types/models/auth-context.d.ts

@@ -34,6 +34,8 @@ interface AuthContext {
     setIsTextLoading: (value: boolean) => void;
     setOnSignIn: (response?: any) => void | Promise<void>;
     setOnSignOut: (response?: any) => void | Promise<void>;
+    setUsername: (username: string) => void;
     user: MeAPIResponse;
+    username: string;
 }
 export default AuthContext;

package/dist/cjs/types/models/sign-in.d.ts

@@ -18,10 +18,15 @@
 import { BrandingProps } from '@asgardeo/js';
 import { ReactElement } from 'react';
 export interface SignInProps {
+    basicAuthChildren?: ReactElement;
     brandingProps?: BrandingProps;
+    emailOtpChildren?: ReactElement;
+    identifierFirstChildren?: ReactElement;
     showFooter?: boolean;
     showLogo?: boolean;
     showSignUp?: boolean;
+    smsOtpChildren?: ReactElement;
+    totpChildren?: ReactElement;
 }
 export type AlertType = {
     alertType: {

package/dist/cjs/types/models/use-authentication.d.ts

@@ -20,7 +20,9 @@ interface UseAuthentication {
     accessToken: string;
     authResponse: AuthApiResponse;
     isAuthenticated: Promise<boolean> | boolean;
+    setUsername: (username: string) => void;
     signOut: () => void;
     user: MeAPIResponse;
+    username: string;
 }
 export default UseAuthentication;

package/dist/esm/index.js

@@ -5622,6 +5622,23 @@ const keys = {
             placeholder: 'emailOtp.username.placeholder',
         },
     },
+    identifierFirst: {
+        button: 'identifierFirst.button',
+        continue: 'identifierFirst.continue',
+        enter: {
+            your: {
+                username: 'identifierFirst.enter.your.username',
+            },
+        },
+        login: {
+            heading: 'identifierFirst.login.heading',
+        },
+        remember: {
+            me: 'identifierFirst.remember.me',
+        },
+        retry: 'identifierFirst.retry',
+        username: 'identifierFirst.username',
+    },
     login: {
         button: 'login.login.button',
         enter: {
@@ -5675,11 +5692,14 @@ const keys = {
 
 function __variableDynamicImportRuntime0__(path) {
   switch (path) {
-    case './screens/common/en-US.ts': return Promise.resolve().then(function () { return enUS$4; });
-    case './screens/common/fr-FR.ts': return Promise.resolve().then(function () { return frFR$2; });
-    case './screens/common/model.ts': return Promise.resolve().then(function () { return model$4; });
-    case './screens/emailOtp/en-US.ts': return Promise.resolve().then(function () { return enUS$3; });
-    case './screens/emailOtp/model.ts': return Promise.resolve().then(function () { return model$3; });
+    case './screens/common/en-US.ts': return Promise.resolve().then(function () { return enUS$5; });
+    case './screens/common/fr-FR.ts': return Promise.resolve().then(function () { return frFR$3; });
+    case './screens/common/model.ts': return Promise.resolve().then(function () { return model$5; });
+    case './screens/emailOtp/en-US.ts': return Promise.resolve().then(function () { return enUS$4; });
+    case './screens/emailOtp/model.ts': return Promise.resolve().then(function () { return model$4; });
+    case './screens/identifierFirst/en-US.ts': return Promise.resolve().then(function () { return enUS$3; });
+    case './screens/identifierFirst/fr-FR.ts': return Promise.resolve().then(function () { return frFR$2; });
+    case './screens/identifierFirst/model.ts': return Promise.resolve().then(function () { return model$3; });
     case './screens/login/en-US.ts': return Promise.resolve().then(function () { return enUS$2; });
     case './screens/login/fr-FR.ts': return Promise.resolve().then(function () { return frFR$1; });
     case './screens/login/model.ts': return Promise.resolve().then(function () { return model$2; });
@@ -5888,10 +5908,10 @@ const common$1 = {
     'privacy.policy': 'Privacy Policy',
     register: 'Register',
     'site.title': 'WSO2 Identity Server',
-    'terms.of.service': 'Terms of Servicet',
+    'terms.of.service': 'Terms of Service',
 };
 
-var enUS$4 = /*#__PURE__*/Object.freeze({
+var enUS$5 = /*#__PURE__*/Object.freeze({
     __proto__: null,
     common: common$1
 });
@@ -5926,7 +5946,7 @@ const common$2 = {
     'terms.of.service': 'Conditions de service',
 };
 
-var frFR$2 = /*#__PURE__*/Object.freeze({
+var frFR$3 = /*#__PURE__*/Object.freeze({
     __proto__: null,
     common: common$2
 });
@@ -5949,7 +5969,7 @@ var frFR$2 = /*#__PURE__*/Object.freeze({
  * under the License.
  */
 
-var model$4 = /*#__PURE__*/Object.freeze({
+var model$5 = /*#__PURE__*/Object.freeze({
     __proto__: null
 });
 
@@ -5980,11 +6000,97 @@ const emailOtp = {
     'username.placeholder': 'Enter your username',
 };
 
-var enUS$3 = /*#__PURE__*/Object.freeze({
+var enUS$4 = /*#__PURE__*/Object.freeze({
     __proto__: null,
     emailOtp: emailOtp
 });
 
+/**
+ * Copyright (c) 2024, WSO2 LLC. (https://www.wso2.com).
+ *
+ * WSO2 LLC. licenses this file to you under the Apache License,
+ * Version 2.0 (the "License"); you may not use this file except
+ * in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied. See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+var model$4 = /*#__PURE__*/Object.freeze({
+    __proto__: null
+});
+
+/**
+ * Copyright (c) 2024, WSO2 LLC. (https://www.wso2.com).
+ *
+ * WSO2 LLC. licenses this file to you under the Apache License,
+ * Version 2.0 (the "License"); you may not use this file except
+ * in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied. See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+const identifierFirst$1 = {
+    continue: 'Continue',
+    'enter.your.username': 'Enter your username',
+    'login.button': 'Sign In',
+    'login.heading': 'Sign In',
+    'remember.me': 'Remember me on this computer',
+    retry: 'Login failed! Please check your username and password and try again.',
+    username: 'Username',
+};
+
+var enUS$3 = /*#__PURE__*/Object.freeze({
+    __proto__: null,
+    identifierFirst: identifierFirst$1
+});
+
+/**
+ * Copyright (c) 2024, WSO2 LLC. (https://www.wso2.com).
+ *
+ * WSO2 LLC. licenses this file to you under the Apache License,
+ * Version 2.0 (the "License"); you may not use this file except
+ * in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied. See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+const identifierFirst = {
+    continue: 'Continuer',
+    'enter.your.username': "Entrez votre nom d'utilisateur",
+    'login.button': 'Se connecter',
+    'login.heading': 'Se connecter',
+    'remember.me': 'Se souvenir de moi sur cet ordinateur',
+    retry: "Échec de la connexion! Veuillez vérifier votre nom d'utilisateur et votre mot de passe et réessayer.",
+    username: "Nom d'utilisateur",
+};
+
+var frFR$2 = /*#__PURE__*/Object.freeze({
+    __proto__: null,
+    identifierFirst: identifierFirst
+});
+
 /**
  * Copyright (c) 2024, WSO2 LLC. (https://www.wso2.com).
  *
@@ -40160,7 +40266,7 @@ SignIn$1.PinInput = SignInPinInput;
 SignIn$1.Image = SignInImage;
 SignIn$1.Footer = SignInFooter;
 
-var css$4 = "/**\n * Copyright (c) 2024, WSO2 LLC. (https://www.wso2.com).\n *\n * WSO2 LLC. licenses this file to you under the Apache License,\n * Version 2.0 (the \"License\"); you may not use this file except\n * in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing,\n * software distributed under the License is distributed on an\n * \"AS IS\" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY\n * KIND, either express or implied. See the License for the\n * specific language governing permissions and limitations\n * under the License.\n */\n.asgardeo-basic-auth-skeleton {\n  display: flex;\n  flex-flow: column nowrap;\n  padding: 32px;\n  row-gap: 8px;\n}\n.asgardeo-basic-auth-skeleton .skeleton-title {\n  margin: 0 auto;\n}\n.asgardeo-basic-auth-skeleton .skeleton-text-field-label {\n  margin-top: 12px;\n}\n.asgardeo-basic-auth-skeleton .skeleton-submit-button {\n  margin: 20px auto 0;\n  border-radius: 20px;\n}\n\n.Paper-basicAuth {\n  opacity: 0.5;\n  animation: fade-in 0.9s ease-in-out forwards;\n}\n.Paper-basicAuth .asgardeo-basic-auth-alert {\n  margin-top: 12px;\n}\n\n@keyframes fade-in {\n  to {\n    opacity: 1;\n  }\n}";
+var css$4 = "/**\n * Copyright (c) 2024, WSO2 LLC. (https://www.wso2.com).\n *\n * WSO2 LLC. licenses this file to you under the Apache License,\n * Version 2.0 (the \"License\"); you may not use this file except\n * in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing,\n * software distributed under the License is distributed on an\n * \"AS IS\" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY\n * KIND, either express or implied. See the License for the\n * specific language governing permissions and limitations\n * under the License.\n */\n.asgardeo-basic-auth-skeleton {\n  display: flex;\n  flex-flow: column nowrap;\n  padding: 32px;\n  row-gap: 8px;\n}\n.asgardeo-basic-auth-skeleton .skeleton-title {\n  margin: 0 auto;\n}\n.asgardeo-basic-auth-skeleton .skeleton-text-field-label {\n  margin-top: 12px;\n}\n.asgardeo-basic-auth-skeleton .skeleton-submit-button {\n  margin: 20px auto 0;\n  border-radius: 20px;\n}\n\n.Paper-basicAuth {\n  opacity: 0.5;\n  animation: fade-in 0.9s ease-in-out forwards;\n}\n.Paper-basicAuth .asgardeo-basic-auth-alert {\n  margin-top: 12px;\n}\n\n.asgardeo-register-link {\n  margin-left: 3px;\n}\n\n@keyframes fade-in {\n  to {\n    opacity: 1;\n  }\n}";
 n(css$4,{});
 
 /**
@@ -40176,11 +40282,10 @@ n(css$4,{});
  *
  * @return {ReactElement}
  */
-const BasicAuth = ({ handleAuthenticate, authenticator, alert, brandingProps, showSelfSignUp, renderLoginOptions, }) => {
+const BasicAuth = ({ handleAuthenticate, authenticator, children, alert, brandingProps, showSelfSignUp, renderLoginOptions, }) => {
     var _a;
-    const [username, setUsername] = useState('');
     const [password, setPassword] = useState('');
-    const { isAuthLoading } = useContext(AsgardeoContext);
+    const { isAuthLoading, username, setUsername } = useContext(AsgardeoContext);
     const { t, isLoading } = useTranslations({
         componentLocaleOverride: brandingProps === null || brandingProps === void 0 ? void 0 : brandingProps.locale,
         componentTextOverrides: (_a = brandingProps === null || brandingProps === void 0 ? void 0 : brandingProps.preference) === null || _a === void 0 ? void 0 : _a.text,
@@ -40189,13 +40294,11 @@ const BasicAuth = ({ handleAuthenticate, authenticator, alert, brandingProps, sh
     if (isLoading) {
         return (jsxRuntimeExports.jsxs(SignIn$1.Paper, { className: "asgardeo-basic-auth-skeleton", children: [jsxRuntimeExports.jsx(Pi, { className: "skeleton-title", variant: "text", width: 100, height: 55 }), jsxRuntimeExports.jsx(Pi, { className: "skeleton-text-field-label", variant: "text", width: 70 }), jsxRuntimeExports.jsx(Pi, { variant: "rectangular", width: 300, height: 40 }), jsxRuntimeExports.jsx(Pi, { className: "skeleton-text-field-label", variant: "text", width: 70 }), jsxRuntimeExports.jsx(Pi, { variant: "rectangular", width: 300, height: 40 }), jsxRuntimeExports.jsx(Pi, { className: "skeleton-submit-button", variant: "rectangular", width: 270, height: 40 })] }));
     }
-    return (jsxRuntimeExports.jsxs(SignIn$1.Paper, { className: "Paper-basicAuth", children: [jsxRuntimeExports.jsx(SignIn$1.Typography, { title: true, className: "Typography-basicAuthTitle", children: t(keys.login.login.heading) }), alert && (jsxRuntimeExports.jsx(SignIn$1.Alert, Object.assign({ className: "asgardeo-basic-auth-alert" }, alert === null || alert === void 0 ? void 0 : alert.alertType, { children: t(alert.key) }))), jsxRuntimeExports.jsx(SignIn$1.TextField, { fullWidth: true, autoComplete: "off", label: t(keys.login.username), name: "text", value: username, placeholder: t(keys.login.enter.your.username), onChange: (e) => setUsername(e.target.value) }), jsxRuntimeExports.jsx(SignIn$1.TextField, { fullWidth: true, name: "password", autoComplete: "new-password", label: t(keys.login.password), type: "password", value: password, placeholder: t(keys.login.enter.your.password), onChange: (e) => setPassword(e.target.value) }), jsxRuntimeExports.jsx(SignIn$1.Button, { color: "primary", variant: "contained", type: "submit", fullWidth: true, disabled: isAuthLoading, onClick: () => {
+    return (jsxRuntimeExports.jsxs(SignIn$1.Paper, { className: "Paper-basicAuth", children: [jsxRuntimeExports.jsx(SignIn$1.Typography, { title: true, className: "Typography-basicAuthTitle", children: t(keys.login.login.heading) }), alert && (jsxRuntimeExports.jsx(SignIn$1.Alert, Object.assign({ className: "asgardeo-basic-auth-alert" }, alert === null || alert === void 0 ? void 0 : alert.alertType, { children: t(alert.key) }))), jsxRuntimeExports.jsx(SignIn$1.TextField, { fullWidth: true, autoComplete: "off", label: t(keys.login.username), name: "text", value: username, placeholder: t(keys.login.enter.your.username), onChange: (e) => setUsername(e.target.value) }), jsxRuntimeExports.jsx(SignIn$1.TextField, { fullWidth: true, name: "password", autoComplete: "new-password", label: t(keys.login.password), type: "password", value: password, placeholder: t(keys.login.enter.your.password), onChange: (e) => setPassword(e.target.value) }), children, jsxRuntimeExports.jsx(SignIn$1.Button, { color: "primary", variant: "contained", type: "submit", fullWidth: true, disabled: isAuthLoading, onClick: () => {
                     handleAuthenticate(authenticator.authenticatorId, {
                         password,
                         username,
                     });
-                    setUsername('');
-                    setPassword('');
                 }, children: t(keys.login.button) }), isAuthLoading && (jsxRuntimeExports.jsx("div", { className: "circular-progress-holder-authn", children: jsxRuntimeExports.jsx(ae, { className: "sign-in-button-progress" }) })), showSelfSignUp && (jsxRuntimeExports.jsxs(je, { container: true, children: [jsxRuntimeExports.jsx(SignIn$1.Typography, { children: t(keys.common.prefix.register) }), jsxRuntimeExports.jsx(SignIn$1.Link, { href: "./register", className: "asgardeo-register-link", children: t(keys.common.register) })] })), renderLoginOptions.length !== 0 && jsxRuntimeExports.jsxs(SignIn$1.Divider, { children: [" ", t(keys.common.or), " "] }), renderLoginOptions] }));
 };
 
@@ -40212,7 +40315,7 @@ n(css$3,{});
  * @param {AlertType} props.alert - Alert type.
  * @return {ReactElement}
  */
-const EmailOtp = ({ alert, brandingProps, authenticator, handleAuthenticate }) => {
+const EmailOtp = ({ alert, brandingProps, authenticator, children, handleAuthenticate }) => {
     var _a, _b, _c, _d;
     const [inputValue, setInputValue] = useState();
     const [isContinueLoading, setIsContinueLoading] = useState(false);
@@ -40239,7 +40342,7 @@ const EmailOtp = ({ alert, brandingProps, authenticator, handleAuthenticate }) =
     if (isLoading) {
         return (jsxRuntimeExports.jsxs(SignIn$1.Paper, { className: "asgardeo-email-otp-skeleton", children: [jsxRuntimeExports.jsx(Pi, { className: "skeleton-title", variant: "text", width: 100, height: 55 }), jsxRuntimeExports.jsx(Pi, { className: "skeleton-text-field-label", variant: "text", width: 70 }), jsxRuntimeExports.jsx(Pi, { variant: "rectangular", width: 300, height: 40 }), jsxRuntimeExports.jsx(Pi, { className: "skeleton-submit-button", variant: "rectangular", width: 270, height: 40 })] }));
     }
-    return (jsxRuntimeExports.jsxs(SignIn$1.Paper, { className: "asgardeo-email-otp-paper", children: [jsxRuntimeExports.jsx(SignIn$1.Typography, { title: true, children: t(i18nMapping[param].heading) }), alert && jsxRuntimeExports.jsx(SignIn$1.Alert, Object.assign({}, alert === null || alert === void 0 ? void 0 : alert.alertType, { children: alert.key })), jsxRuntimeExports.jsx(SignIn$1.TextField, { fullWidth: true, autoComplete: "off", label: (_d = t(i18nMapping[param].inputLabel)) !== null && _d !== void 0 ? _d : param, name: "text", value: inputValue, type: param === 'OTPCode' ? 'password' : undefined, placeholder: param === 'username' ? t(i18nMapping[param].placeholder) : undefined, onChange: (e) => setInputValue(e.target.value) }), jsxRuntimeExports.jsxs(SignIn$1.Button, { fullWidth: true, variant: "contained", type: "submit", disabled: isAuthLoading, onClick: () => {
+    return (jsxRuntimeExports.jsxs(SignIn$1.Paper, { className: "asgardeo-email-otp-paper", children: [jsxRuntimeExports.jsx(SignIn$1.Typography, { title: true, children: t(i18nMapping[param].heading) }), alert && jsxRuntimeExports.jsx(SignIn$1.Alert, Object.assign({}, alert === null || alert === void 0 ? void 0 : alert.alertType, { children: alert.key })), jsxRuntimeExports.jsx(SignIn$1.TextField, { fullWidth: true, autoComplete: "off", label: (_d = t(i18nMapping[param].inputLabel)) !== null && _d !== void 0 ? _d : param, name: "text", value: inputValue, type: param === 'OTPCode' ? 'password' : undefined, placeholder: param === 'username' ? t(i18nMapping[param].placeholder) : undefined, onChange: (e) => setInputValue(e.target.value) }), children, jsxRuntimeExports.jsxs(SignIn$1.Button, { fullWidth: true, variant: "contained", type: "submit", disabled: isAuthLoading, onClick: () => {
                     handleAuthenticate(authenticator.authenticatorId, { [authenticator.requiredParams[0]]: inputValue });
                     setInputValue('');
                     setIsResendLoading(false);
@@ -40252,6 +40355,8 @@ const EmailOtp = ({ alert, brandingProps, authenticator, handleAuthenticate }) =
                 }, children: [t(keys.emailOtp.resend.code), isAuthLoading && isResendLoading && jsxRuntimeExports.jsx(ae, { className: "sign-in-button-progress" })] }))] }));
 };
 
+var img$7 = "data:image/svg+xml,%3c%3fxml version='1.0' encoding='iso-8859-1'%3f%3e%3c!-- * Copyright (c) 2024%2c WSO2 Inc. (http://www.wso2.org) All Rights Reserved. * * WSO2 Inc. licenses this file to you under the Apache License%2c * Version 2.0 (the 'License')%3b you may not use this file except * in compliance with the License. * You may obtain a copy of the License at * * http://www.apache.org/licenses/LICENSE-2.0 * * Unless required by applicable law or agreed to in writing%2c * software distributed under the License is distributed on an * 'AS IS' BASIS%2c WITHOUT WARRANTIES OR CONDITIONS OF ANY * KIND%2c either express or implied. See the License for the * specific language governing permissions and limitations * under the License.--%3e%3csvg xmlns='http://www.w3.org/2000/svg' id='building-icon' class='icon' width='14' height='14' viewBox='0 0 12.601 14'%3e %3cpath id='ldap-outline' class='path fill primary' d='M7.1%2c14H.4a.4.4%2c0%2c0%2c1-.4-.4V.4A.4.4%2c0%2c0%2c1%2c.4%2c0H6.7a.4.4%2c0%2c0%2c1%2c.4.4V3.2h5.1a.4.4%2c0%2c0%2c1%2c.4.4V14Zm0-.6h4.7a.2.2%2c0%2c0%2c0%2c.2-.2V11.32H7.1Zm-.6%2c0V.8A.2.2%2c0%2c0%2c0%2c6.3.6H.8A.2.2%2c0%2c0%2c0%2c.6.8V13.2a.2.2%2c0%2c0%2c0%2c.2.2H2.191V11.12a.4.4%2c0%2c0%2c1%2c.4-.4h1.95a.4.4%2c0%2c0%2c1%2c.4.4V13.4Zm-2.16%2c0V11.32H2.79V13.4ZM12%2c10.72V4a.2.2%2c0%2c0%2c0-.2-.2H7.1v6.92ZM10.471%2c9.1V8.5h.6v.6Zm-1.2%2c0V8.5h.6v.6Zm-1.2%2c0V8.5h.6v.6Zm-2.989%2c0V8.5h.6v.6Zm-1.2%2c0V8.5h.6v.6Zm-1.2%2c0V8.5h.6v.6Zm-1.2%2c0V8.5h.6v.6Zm8.99-1.2V7.3h.6v.6Zm-1.2%2c0V7.3h.6v.6Zm-1.2%2c0V7.3h.6v.6Zm-2.989%2c0V7.3h.6v.6Zm-1.2%2c0V7.3h.6v.6Zm-1.2%2c0V7.3h.6v.6Zm-1.2%2c0V7.3h.6v.6Zm8.99-1.2V6.1h.6v.6Zm-1.2%2c0V6.1h.6v.6Zm-1.2%2c0V6.1h.6v.6Zm-2.989%2c0V6.1h.6v.6Zm-1.2%2c0V6.1h.6v.6Zm-1.2%2c0V6.1h.6v.6Zm-1.2%2c0V6.1h.6v.6Zm8.99-1.2V4.9h.6v.6Zm-1.2%2c0V4.9h.6v.6Zm-1.2%2c0V4.9h.6v.6Zm-2.989%2c0V4.9h.6v.6Zm-1.2%2c0V4.9h.6v.6Zm-1.2%2c0V4.9h.6v.6Zm-1.2%2c0V4.9h.6v.6Zm3.6-1.2V3.7h.6v.6Zm-1.2%2c0V3.7h.6v.6Zm-1.2%2c0V3.7h.6v.6Zm-1.2%2c0V3.7h.6v.6Zm3.6-1.2V2.5h.6v.6Zm-1.2%2c0V2.5h.6v.6Zm-1.2%2c0V2.5h.6v.6Zm-1.2%2c0V2.5h.6v.6Zm3.6-1.2V1.3h.6v.6Zm-1.2%2c0V1.3h.6v.6Zm-1.2%2c0V1.3h.6v.6Zm-1.2%2c0V1.3h.6v.6Z' fill='%23464646'/%3e%3c/svg%3e";
+
 var img$6 = "data:image/svg+xml,%3c!-- * Copyright (c) 2024%2c WSO2 Inc. (http://www.wso2.org). * * WSO2 Inc. licenses this file to you under the Apache License%2c * Version 2.0 (the 'License')%3b you may not use this file except * in compliance with the License. * You may obtain a copy of the License at * * http://www.apache.org/licenses/LICENSE-2.0 * * Unless required by applicable law or agreed to in writing%2c * software distributed under the License is distributed on an * 'AS IS' BASIS%2c WITHOUT WARRANTIES OR CONDITIONS OF ANY * KIND%2c either express or implied. See the License for the * specific language governing permissions and limitations * under the License.--%3e%3csvg id='email-solid-icon' class='icon' width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3e %3cpath fill-rule='evenodd' clip-rule='evenodd' d='M0 4C0 2.89543 0.895431 2 2 2H14C15.1046 2 16 2.89561 16 4.00013V4.00476V4.00939V4.01402V4.01865V4.02328V4.02791V4.03253V4.03715V4.04177V4.04639V4.05101V4.05563V4.06024V4.06485V4.06947V4.07408V4.07868V4.08329V4.0879V4.0925V4.09711V4.10171V4.10631V4.11091V4.1155V4.1201V4.12469V4.12929V4.13388V4.13847V4.14306V4.14765V4.15224V4.15682V4.16141V4.16599V4.17057V4.17516V4.17974V4.18431V4.18889V4.19347V4.19805V4.20262V4.20719V4.21177V4.21634V4.22091V4.22548V4.23005V4.23462V4.23918V4.24375V4.24832V4.25288V4.25744V4.26201V4.26657V4.27113V4.27569V4.28025V4.28481V4.28937V4.29392V4.29848V4.30304V4.30759V4.31215V4.3167V4.32125V4.32581V4.33036V4.33491V4.33946V4.34401V4.34856V4.35311V4.35766V4.36221V4.36675V4.3713V4.37585V4.38039V4.38494V4.38949V4.39403V4.39858V4.40312V4.40767V4.41221V4.41675V4.4213V4.42584V4.43038V4.43492V4.43947V4.44401V4.44855V4.45309V4.45763V4.46217V4.46672V4.47126V4.4758V4.48034V4.48488V4.48942V4.49396V4.4985V4.50304V4.50758V4.51212V4.51667V4.52121V4.52575V4.53029V4.53483V4.53937V4.54391V4.54845V4.553V4.55754V4.56208V4.56662V4.57116V4.57571V4.58025V4.58479V4.58934V4.59388V4.59843V4.60297V4.60752V4.61206V4.61661V4.62115V4.6257V4.63025V4.63479V4.63934V4.64389V4.64844V4.65299V4.65754V4.66209V4.66664V4.67119V4.67574V4.6803V4.68485V4.6894V4.69396V4.69851V4.70307V4.70763V4.71219V4.71674V4.7213V4.72586V4.73042V4.73498V4.73955V4.74411V4.74867V4.75324V4.7578V4.76237V4.76694V4.77151V4.77608V4.78065V4.78522V4.78979V4.79436V4.79894V4.80351V4.80809V4.81267V4.81724V4.82182V4.8264V4.83099V4.83557V4.84015V4.84474V4.84933V4.85391V4.8585V4.86309V4.86768V4.87228V4.87687V4.88147V4.88606V4.89066V4.89526V4.89986V4.90446V4.90907V4.91367V4.91828V4.92288V4.92749V4.9321V4.93672V4.94133V4.94595V4.95056V4.95518V4.9598V4.96442V4.96904V4.97367V4.9783V4.98292V4.98755V4.99218V4.99682V5.00145V5.00609V5.01073V5.01537V5.02001V5.02465V5.0293V5.03394V5.03859V5.04324V5.0479V5.05255V5.05721V5.06187V5.06653V5.07119V5.07585V5.08052V5.08519V5.08986V5.09453V5.0992V5.10388V5.10856V5.11324V5.11792V5.12261V5.12729V5.13198V5.13667V5.14137V5.14606V5.15076V5.15546V5.16016V5.16487V5.16958V5.17428V5.179V5.18371V5.18843V5.19315V5.19787V5.20259V5.20731V5.21204V5.21677V5.22151V5.22624V5.23098V5.23572V5.24046V5.24521V5.24996V5.25471V5.25946V5.26422V5.26898V5.27374V5.2785V5.28327V5.28804V5.29281V5.29758V5.30236V5.30714V5.31192V5.31671V5.3215V5.32629V5.33108V5.33588V5.34068V5.34548V5.35028V5.35509V5.3599V5.36472V5.36953V5.37435V5.37918V5.384V5.38883V5.39366V5.3985V5.40334V5.40818V5.41302V5.41787V5.42272V5.42757V5.43243V5.43729V5.44215V5.44702V5.45189V5.45676V5.46164V5.46652V5.4714V5.47628V5.48117V5.48606V5.49096V5.49586V5.50076V5.50567V5.51058V5.51549V5.52041V5.52532V5.53025V5.53517V5.5401V5.54504V5.54997V5.55491V5.55986V5.56481V5.56976V5.57471V5.57967V5.58463V5.5896V5.59457V5.59954V5.60452V5.6095V5.61448V5.61947V5.62446V5.62946V5.63446V5.63946V5.64447V5.64948V5.65449V5.65951V5.66453V5.66956V5.67459V5.67962V5.68466V5.6897V5.69475V5.6998V5.70485V5.70991V5.71497V5.72004V5.72511V5.73019V5.73526V5.74035V5.74543V5.75052V5.75562V5.76072V5.76582V5.77093V5.77604V5.78116V5.78628V5.7914V5.79653V5.80167V5.8068V5.81194V5.81709V5.82224V5.8274V5.83256V5.83772V5.84289V5.84806V5.85324V5.85842V5.86361V5.8688V5.87399V5.87919V5.8844V5.88961V5.89482V5.90004V5.90526V5.91049V5.91572V5.92096V5.9262V5.93145V5.9367V5.94195V5.94721V5.95248V5.95775V5.96303V5.96831V5.97359V5.97888V5.98417V5.98947V5.99478V6.00009V6.0054V6.01072V6.01604V6.02137V6.0267V6.03204V6.03739V6.04274V6.04809V6.05345V6.05881V6.06418V6.06956V6.07494V6.08032V6.08571V6.09111V6.09651V6.10191V6.10732V6.11274V6.11816V6.12359V6.12902V6.13445V6.1399V6.14534V6.1508V6.15626V6.16172V6.16719V6.17266V6.17814V6.18363V6.18912V6.19462V6.20012V6.20563V6.21114V6.21666V6.22218V6.22771V6.23325V6.23879V6.24433V6.24989V6.25544V6.26101V6.26658V6.27215V6.27773V6.28332V6.28891V6.29451V6.30011V6.30572V6.31133V6.31696V6.32258V6.32822V6.33385V6.3395V6.34515V6.35081V6.35647V6.36214V6.36781V6.37349V6.37918V6.38487V6.39057V6.39627V6.40198V6.4077V6.41342V6.41915V6.42488V6.43062V6.43637V6.44212V6.44788V6.45365V6.45942V6.4652V6.47098V6.47677V6.48257V6.48837V6.49418V6.5V9C16 9.27614 15.7761 9.5 15.5 9.5C15.2239 9.5 15 9.27614 15 9V6.5V6.49418V6.48837V6.48257V6.47677V6.47098V6.4652V6.45942V6.45365V6.44788V6.44212V6.43637V6.43062V6.42488V6.41915V6.41342V6.4077V6.40198V6.39627V6.39057V6.38487V6.37918V6.37349V6.36781V6.36214V6.35647V6.35081V6.34515V6.3395V6.33385V6.32822V6.32258V6.31696V6.31133V6.30572V6.30011V6.29451V6.28891V6.28332V6.27773V6.27215V6.26658V6.26101V6.25544V6.24989V6.24433V6.23879V6.23325V6.22771V6.22218V6.21666V6.21114V6.20563V6.20012V6.19462V6.18912V6.18363V6.17814V6.17266V6.16719V6.16172V6.15626V6.1508V6.14534V6.1399V6.13445V6.12902V6.12359V6.11816V6.11274V6.10732V6.10191V6.09651V6.09111V6.08571V6.08032V6.07494V6.06956V6.06418V6.05881V6.05345V6.04809V6.04274V6.03739V6.03204V6.0267V6.02137V6.01604V6.01072V6.0054V6.00009V5.99478V5.98947V5.98417V5.97888V5.97359V5.96831V5.96303V5.95775V5.95248V5.94721V5.94195V5.9367V5.93145V5.9262V5.92096V5.91572V5.91049V5.90526V5.90004V5.89482V5.88961V5.8844V5.87919V5.87399V5.8688V5.86361V5.85842V5.85324V5.84806V5.84289V5.83772V5.83256V5.8274V5.82224V5.81709V5.81194V5.8068V5.80167V5.79653V5.7914V5.78628V5.78116V5.77604V5.77093V5.76582V5.76072V5.75562V5.75052V5.74543V5.74035V5.73526V5.73019V5.72511V5.72004V5.71497V5.70991V5.70485V5.6998V5.69475V5.6897V5.68466V5.67962V5.67459V5.66956V5.66453V5.65951V5.65449V5.64948V5.64447V5.63946V5.63446V5.62946V5.62446V5.61947V5.61448V5.6095V5.60452V5.59954V5.59457V5.5896V5.58463V5.57967V5.57471V5.56976V5.56481V5.55986V5.55491V5.54997V5.54504V5.5401V5.53517V5.53025V5.52532V5.52041V5.51549V5.51058V5.50567V5.50076V5.49586V5.49096V5.48606V5.48117V5.47628V5.4714V5.46652V5.46164V5.45676V5.45189V5.44702V5.44215V5.43729V5.43243V5.42757V5.42272V5.41787V5.41302V5.40818V5.40334V5.3985V5.39366V5.38883V5.384V5.37918V5.37435V5.36953V5.36472V5.3599V5.35509V5.35028V5.34548V5.34068V5.33588V5.33108V5.32629V5.3215V5.31671V5.31192V5.30714V5.30236V5.29758V5.29281V5.28804V5.28327V5.2785V5.27374V5.26898V5.26422V5.25946V5.25471V5.24996V5.24521V5.24046V5.23572V5.23098V5.22624V5.22151V5.21677V5.21204V5.20731V5.20259V5.19787V5.19315V5.18843V5.18371V5.179V5.17428V5.16958V5.16487V5.16016V5.15546V5.15076V5.14606V5.14137V5.13667V5.13198V5.12729V5.12261V5.11792V5.11324V5.10856V5.10388V5.0992V5.09453V5.08986V5.08519V5.08052V5.07585V5.07119V5.06653V5.06187V5.05721V5.05255V5.0479V5.04324V5.03859V5.03394V5.0293V5.02465V5.02001V5.01537V5.01073V5.00609V5.00145V4.99682V4.99218V4.98755V4.98292V4.9783V4.97367V4.96904V4.96442V4.9598V4.95518V4.95056V4.94595V4.94133V4.93672V4.9321V4.92749V4.92288V4.91828V4.91367V4.90907V4.90446V4.89986V4.89526V4.89066V4.88606V4.88147V4.87687V4.87228V4.86768V4.86309V4.8585V4.85391V4.84933V4.84474V4.84015V4.83557V4.83099V4.8264V4.82182V4.81724V4.81267V4.80809V4.80351V4.79894V4.79436V4.78979V4.78522V4.78065V4.77608V4.77151V4.76694V4.76237V4.7578V4.75324V4.74867V4.74411V4.73955V4.73498V4.73042V4.72586V4.7213V4.71674V4.71219V4.70763V4.70307V4.69851V4.69396V4.6894V4.68485V4.6803V4.67574V4.67119V4.66664V4.66209V4.65754V4.65299V4.64844V4.64389V4.63934V4.63479V4.63025V4.6257V4.62115V4.61661V4.61206V4.60752V4.60297V4.59843V4.59388V4.58934V4.58479V4.58025V4.57571V4.57116V4.56662V4.56208V4.55754V4.553V4.54845V4.54391V4.53937V4.53483V4.53029V4.52575V4.52121V4.51667V4.51212V4.50758V4.50304V4.4985V4.49396V4.48942V4.48488V4.48034V4.4758V4.47126V4.46672V4.46217V4.45763V4.45309V4.44855V4.44401V4.43947V4.43492V4.43038V4.42584V4.4213V4.41675V4.41221V4.40767V4.40312V4.39858V4.39403V4.38949V4.38494V4.38039V4.37585V4.3713V4.36675V4.36221V4.35766V4.35311V4.34856V4.34401V4.33946V4.33491V4.33036V4.32581V4.32125V4.3167V4.31215V4.30759V4.30304V4.29848V4.29392V4.28937V4.28481V4.28025V4.27569V4.27113V4.26657V4.26201V4.25744V4.25288V4.24832V4.24375V4.23918V4.23462V4.23005V4.22548V4.22091V4.21634V4.21177V4.20719V4.20262V4.19805V4.19347V4.18889V4.18431V4.17974V4.17516V4.17057V4.16599V4.16141V4.15682V4.15224V4.14765V4.14306V4.13847V4.13388V4.12929V4.12469V4.1201V4.1155V4.11445L8.58124 8.69928C8.23354 8.94764 7.76646 8.94764 7.41876 8.69928L1 4.11445V12C1 12.5523 1.44772 13 2 13H4C4.27614 13 4.5 13.2239 4.5 13.5C4.5 13.7761 4.27614 14 4 14H2C0.89543 14 0 13.1046 0 12V4ZM14 3C14.2163 3 14.4165 3.06869 14.5802 3.18544L8 7.88555L1.41982 3.18542C1.58343 3.06868 1.78369 3 2 3H14ZM8.62718 11.3369C8.58208 10.8877 7.91792 10.8877 7.87282 11.3369L7.74264 12.6336L6.53863 12.0964C6.12154 11.9103 5.78945 12.4774 6.16145 12.7405L7.23528 13.5L6.16145 14.2595C5.78945 14.5226 6.12154 15.0897 6.53863 14.9036L7.74264 14.3664L7.87282 15.6631C7.91792 16.1123 8.58208 16.1123 8.62718 15.6631L8.75736 14.3664L9.96137 14.9036C10.3785 15.0897 10.7105 14.5226 10.3385 14.2595L9.26472 13.5L10.3385 12.7405C10.7105 12.4774 10.3785 11.9103 9.96137 12.0964L8.75736 12.6336L8.62718 11.3369ZM14.1272 11.3369C14.0821 10.8877 13.4179 10.8877 13.3728 11.3369L13.2426 12.6336L12.0386 12.0964C11.6215 11.9103 11.2895 12.4774 11.6615 12.7405L12.7353 13.5L11.6615 14.2595C11.2895 14.5226 11.6215 15.0897 12.0386 14.9036L13.2426 14.3664L13.3728 15.6631C13.4179 16.1123 14.0821 16.1123 14.1272 15.6631L14.2574 14.3664L15.4614 14.9036C15.8785 15.0897 16.2105 14.5226 15.8385 14.2595L14.7647 13.5L15.8385 12.7405C16.2105 12.4774 15.8785 11.9103 15.4614 12.0964L14.2574 12.6336L14.1272 11.3369Z' fill='black'/%3e%3c/svg%3e";
 
 var img$5 = "data:image/svg+xml,%3c%3fxml version='1.0' encoding='iso-8859-1'%3f%3e%3c!-- * Copyright (c) 2024%2c WSO2 Inc. (http://www.wso2.org). * * WSO2 Inc. licenses this file to you under the Apache License%2c * Version 2.0 (the 'License')%3b you may not use this file except * in compliance with the License. * You may obtain a copy of the License at * * http://www.apache.org/licenses/LICENSE-2.0 * * Unless required by applicable law or agreed to in writing%2c * software distributed under the License is distributed on an * 'AS IS' BASIS%2c WITHOUT WARRANTIES OR CONDITIONS OF ANY * KIND%2c either express or implied. See the License for the * specific language governing permissions and limitations * under the License.--%3e%3csvg version='1.1' class='icon' id='sms-icon' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' width='14px' height='14px' viewBox='0 0 490 490' xml:space='preserve'%3e %3cg%3e %3cg%3e %3cpath class='path fill primary' d='M87.412%2c205.872c5.456%2c3.318%2c16.772%2c7.22%2c25.547%2c7.22c8.969%2c0%2c12.676-3.124%2c12.676-7.997c0-4.888-2.93-7.22-14.037-10.927 c-19.702-6.637-27.311-17.355-27.117-28.671c0-17.744%2c15.218-31.198%2c38.806-31.198c11.122%2c0%2c21.078%2c2.526%2c26.923%2c5.456 l-5.262%2c20.48c-4.29-2.347-12.482-5.471-20.674-5.471c-7.22%2c0-11.316%2c2.93-11.316%2c7.803c0%2c4.485%2c3.707%2c6.832%2c15.412%2c10.927 c18.133%2c6.234%2c25.741%2c15.412%2c25.936%2c29.449c0%2c17.744-14.037%2c30.809-41.348%2c30.809c-12.482%2c0-23.604-2.721-30.809-6.622 L87.412%2c205.872z'/%3e %3cpath class='path fill primary' d='M172.23%2c166.856c0-11.884-0.389-22.034-0.777-30.42h24.964l1.36%2c12.871h0.583c4.096-6.039%2c12.482-15.008%2c28.866-15.008 c12.288%2c0%2c22.034%2c6.233%2c26.13%2c16.174h0.389c3.513-4.873%2c7.803-8.775%2c12.288-11.495c5.277-3.124%2c11.122-4.679%2c18.148-4.679 c18.327%2c0%2c32.184%2c12.871%2c32.184%2c41.333v56.177h-28.866v-51.872c0-13.857-4.5-21.855-14.052-21.855 c-6.817%2c0-11.705%2c4.679-13.648%2c10.344c-0.777%2c2.138-1.166%2c5.262-1.166%2c7.609v55.773h-28.866v-53.441 c0-12.093-4.29-20.285-13.663-20.285c-7.594%2c0-12.093%2c5.86-13.842%2c10.733c-0.972%2c2.332-1.166%2c5.068-1.166%2c7.415v55.579H172.23 V166.856z'/%3e %3cpath class='path fill primary' d='M339.729%2c205.872c5.456%2c3.318%2c16.772%2c7.22%2c25.547%2c7.22c8.969%2c0%2c12.676-3.124%2c12.676-7.997 c0-4.888-2.93-7.22-14.037-10.927c-19.702-6.637-27.311-17.355-27.117-28.671c0-17.744%2c15.218-31.198%2c38.807-31.198 c11.122%2c0%2c21.063%2c2.526%2c26.922%2c5.456l-5.262%2c20.48c-4.29-2.347-12.482-5.471-20.674-5.471c-7.22%2c0-11.316%2c2.93-11.316%2c7.803 c0%2c4.485%2c3.707%2c6.832%2c15.412%2c10.927c18.133%2c6.234%2c25.742%2c15.412%2c25.936%2c29.449c0%2c17.744-14.037%2c30.809-41.348%2c30.809 c-12.482%2c0-23.604-2.721-30.809-6.622L339.729%2c205.872z'/%3e %3c/g%3e %3cg%3e %3cpath class='path fill secondary' d='M383.947%2c490L230.694%2c364.252H50.713c-27.924%2c0-50.631-23.111-50.631-51.528V51.528C0.082%2c23.111%2c22.789%2c0%2c50.713%2c0 h388.574c27.924%2c0%2c50.631%2c23.111%2c50.631%2c51.528v261.197c0%2c28.417-22.707%2c51.528-50.631%2c51.528h-55.34V490z M50.713%2c30.615 c-11.032%2c0-20.016%2c9.388-20.016%2c20.913v261.197c0%2c11.525%2c8.984%2c20.913%2c20.016%2c20.913h190.923l111.696%2c91.635v-91.635h85.954 c11.032%2c0%2c20.016-9.388%2c20.016-20.913V51.528c0-11.525-8.984-20.913-20.016-20.913H50.713z'/%3e %3c/g%3e %3c/g%3e%3c/svg%3e";
@@ -40284,9 +40389,12 @@ const images = {
  * @param {Function} props.handleOnClick - On click handler.
  * @return {ReactElement}
  */
-const LoginOptionsBox = ({ isAuthLoading, socialName, displayName, handleOnClick, }) => (jsxRuntimeExports.jsx(SignIn$1.Button, { className: `Button-${socialName.toLowerCase()}`, social: true, startIcon: jsxRuntimeExports.jsx("img", { className: "social-login-img", src: images[socialName], alt: socialName }), onClick: handleOnClick, disabled: isAuthLoading, children: displayName }));
+const LoginOptionsBox = ({ isAuthLoading, socialName, displayName, handleOnClick, }) => {
+    var _a;
+    return (jsxRuntimeExports.jsx(SignIn$1.Button, { className: `Button-${socialName.toLowerCase()}`, social: true, startIcon: jsxRuntimeExports.jsx("img", { className: "social-login-img", src: (_a = images[socialName]) !== null && _a !== void 0 ? _a : img$7, alt: socialName }), onClick: handleOnClick, disabled: isAuthLoading, children: displayName }));
+};
 
-const SmsOtp = ({ alert, brandingProps, authenticator, handleAuthenticate }) => {
+const SmsOtp = ({ alert, brandingProps, authenticator, children, handleAuthenticate, }) => {
     var _a;
     const [otp, setOtp] = useState();
     const { isLoading, t } = useTranslations({
@@ -40297,7 +40405,7 @@ const SmsOtp = ({ alert, brandingProps, authenticator, handleAuthenticate }) =>
     if (isLoading) {
         return (jsxRuntimeExports.jsx("div", { className: "circular-progress-holder", children: jsxRuntimeExports.jsx(ae, { className: "circular-progress" }) }));
     }
-    return (jsxRuntimeExports.jsxs(SignIn$1.Paper, { children: [jsxRuntimeExports.jsx(SignIn$1.Typography, { title: true, children: t(keys.smsOtp.sms.otp.heading) }), jsxRuntimeExports.jsx(SignIn$1.Typography, { subtitle: true, children: t(keys.smsOtp.sms.otp.subheading) }), alert && jsxRuntimeExports.jsx(SignIn$1.Alert, Object.assign({}, alert === null || alert === void 0 ? void 0 : alert.alertType, { children: alert.key })), jsxRuntimeExports.jsx(SignIn$1.PinInput, { length: 6, onPinChange: setOtp }), jsxRuntimeExports.jsx(SignIn$1.Button, { fullWidth: true, variant: "contained", type: "submit", onClick: () => {
+    return (jsxRuntimeExports.jsxs(SignIn$1.Paper, { children: [jsxRuntimeExports.jsx(SignIn$1.Typography, { title: true, children: t(keys.smsOtp.sms.otp.heading) }), jsxRuntimeExports.jsx(SignIn$1.Typography, { subtitle: true, children: t(keys.smsOtp.sms.otp.subheading) }), alert && jsxRuntimeExports.jsx(SignIn$1.Alert, Object.assign({}, alert === null || alert === void 0 ? void 0 : alert.alertType, { children: alert.key })), jsxRuntimeExports.jsx(SignIn$1.PinInput, { length: 6, onPinChange: setOtp }), children, jsxRuntimeExports.jsx(SignIn$1.Button, { fullWidth: true, variant: "contained", type: "submit", onClick: () => {
                     handleAuthenticate(authenticator.authenticatorId, { OTPCode: otp });
                     setOtp('');
                 }, children: t(keys.smsOtp.continue) }), jsxRuntimeExports.jsx(SignIn$1.Button, { className: "email-otp-resend-button", onClick: () => handleAuthenticate(authenticator.authenticatorId), color: "secondary", variant: "contained", children: t(keys.smsOtp.resend.code) })] }));
@@ -40317,7 +40425,7 @@ n(css$2,{});
  *
  * @return {ReactElement}
  */
-const Totp = ({ brandingProps, authenticator, handleAuthenticate, alert }) => {
+const Totp = ({ brandingProps, authenticator, children, handleAuthenticate, alert, }) => {
     var _a;
     const [totp, setTotp] = useState();
     const { isAuthLoading } = useContext(AsgardeoContext);
@@ -40329,7 +40437,7 @@ const Totp = ({ brandingProps, authenticator, handleAuthenticate, alert }) => {
     if (isLoading) {
         return (jsxRuntimeExports.jsxs(SignIn$1.Paper, { className: "asgardeo-totp-skeleton", children: [jsxRuntimeExports.jsx(Pi, { className: "skeleton-title", variant: "text", width: 100, height: 55 }), jsxRuntimeExports.jsx(Pi, { className: "skeleton-title", variant: "text", width: 280, height: 35 }), jsxRuntimeExports.jsxs(je, { container: true, children: [jsxRuntimeExports.jsx(Pi, { className: "skeleton-pin-box", variant: "rectangular", width: 45, height: 50 }), jsxRuntimeExports.jsx(Pi, { className: "skeleton-pin-box", variant: "rectangular", width: 45, height: 50 }), jsxRuntimeExports.jsx(Pi, { className: "skeleton-pin-box", variant: "rectangular", width: 45, height: 50 }), jsxRuntimeExports.jsx(Pi, { className: "skeleton-pin-box", variant: "rectangular", width: 45, height: 50 }), jsxRuntimeExports.jsx(Pi, { className: "skeleton-pin-box", variant: "rectangular", width: 45, height: 50 }), jsxRuntimeExports.jsx(Pi, { className: "skeleton-pin-box", variant: "rectangular", width: 45, height: 50 })] }), jsxRuntimeExports.jsx(Pi, { className: "skeleton-submit-button", variant: "rectangular", width: 300, height: 40 })] }));
     }
-    return (jsxRuntimeExports.jsxs(SignIn$1.Paper, { children: [jsxRuntimeExports.jsx(SignIn$1.Typography, { title: true, children: t(keys.totp.heading) }), alert && (jsxRuntimeExports.jsx(SignIn$1.Alert, Object.assign({ className: "asgardeo-totp-alert" }, alert === null || alert === void 0 ? void 0 : alert.alertType, { children: t(alert.key) }))), jsxRuntimeExports.jsx(SignIn$1.Typography, { subtitle: true, children: t(keys.totp.enter.verification.code.got.by.device) }), jsxRuntimeExports.jsx(SignIn$1.PinInput, { length: 6, onPinChange: setTotp, pinValue: totp }), jsxRuntimeExports.jsx(SignIn$1.Button, { color: "primary", variant: "contained", className: "oxygen-sign-in-cta", type: "submit", fullWidth: true, disabled: !totp, onClick: () => {
+    return (jsxRuntimeExports.jsxs(SignIn$1.Paper, { children: [jsxRuntimeExports.jsx(SignIn$1.Typography, { title: true, children: t(keys.totp.heading) }), alert && (jsxRuntimeExports.jsx(SignIn$1.Alert, Object.assign({ className: "asgardeo-totp-alert" }, alert === null || alert === void 0 ? void 0 : alert.alertType, { children: t(alert.key) }))), jsxRuntimeExports.jsx(SignIn$1.Typography, { subtitle: true, children: t(keys.totp.enter.verification.code.got.by.device) }), jsxRuntimeExports.jsx(SignIn$1.PinInput, { length: 6, onPinChange: setTotp, pinValue: totp }), children, jsxRuntimeExports.jsx(SignIn$1.Button, { color: "primary", variant: "contained", className: "oxygen-sign-in-cta", type: "submit", fullWidth: true, disabled: !totp, onClick: () => {
                     handleAuthenticate(authenticator.authenticatorId, { token: totp });
                     setTotp('');
                 }, children: t(keys.totp.continue) }), isAuthLoading && (jsxRuntimeExports.jsx("div", { className: "circular-progress-holder-authn", children: jsxRuntimeExports.jsx(ae, { className: "sign-in-button-progress" }) })), jsxRuntimeExports.jsxs(SignIn$1.Typography, { subtitle: true, children: [t(keys.totp.enroll.message1), jsxRuntimeExports.jsx("br", {}), t(keys.totp.enroll.message2)] })] }));
@@ -40380,7 +40488,7 @@ const BrandingPreferenceContext = createContext(undefined);
  */
 const useAuthentication = () => {
     const contextValue = useContext(AsgardeoContext);
-    const { user, isAuthenticated, accessToken, authResponse } = contextValue;
+    const { accessToken, authResponse, isAuthenticated, setUsername, user, username } = contextValue;
     const signOut$1 = () => {
         signOut().then(() => {
             sessionStorage.clear();
@@ -40393,8 +40501,10 @@ const useAuthentication = () => {
         accessToken,
         authResponse,
         isAuthenticated,
+        setUsername,
         signOut: signOut$1,
         user,
+        username,
     };
 };
 
@@ -44287,10 +44397,9 @@ n(css$1,{});
  *
  * @return {ReactElement}
  */
-const IdentifierFirst = ({ handleAuthenticate, authenticator, alert, brandingProps, showSelfSignUp, renderLoginOptions, }) => {
+const IdentifierFirst = ({ handleAuthenticate, authenticator, alert, brandingProps, children, showSelfSignUp, renderLoginOptions, }) => {
     var _a;
-    const [username, setUsername] = useState('');
-    const { isAuthLoading } = useContext(AsgardeoContext);
+    const { isAuthLoading, username, setUsername } = useContext(AsgardeoContext);
     const { t, isLoading } = useTranslations({
         componentLocaleOverride: brandingProps === null || brandingProps === void 0 ? void 0 : brandingProps.locale,
         componentTextOverrides: (_a = brandingProps === null || brandingProps === void 0 ? void 0 : brandingProps.preference) === null || _a === void 0 ? void 0 : _a.text,
@@ -44299,11 +44408,10 @@ const IdentifierFirst = ({ handleAuthenticate, authenticator, alert, brandingPro
     if (isLoading) {
         return (jsxRuntimeExports.jsxs(SignIn$1.Paper, { className: "asgardeo-basic-auth-skeleton", children: [jsxRuntimeExports.jsx(Pi, { className: "skeleton-title", variant: "text", width: 100, height: 55 }), jsxRuntimeExports.jsx(Pi, { className: "skeleton-text-field-label", variant: "text", width: 70 }), jsxRuntimeExports.jsx(Pi, { variant: "rectangular", width: 300, height: 40 }), jsxRuntimeExports.jsx(Pi, { className: "skeleton-text-field-label", variant: "text", width: 70 }), jsxRuntimeExports.jsx(Pi, { variant: "rectangular", width: 300, height: 40 }), jsxRuntimeExports.jsx(Pi, { className: "skeleton-submit-button", variant: "rectangular", width: 270, height: 40 })] }));
     }
-    return (jsxRuntimeExports.jsxs(SignIn$1.Paper, { className: "Paper-basicAuth", children: [jsxRuntimeExports.jsx(SignIn$1.Typography, { title: true, className: "Typography-basicAuthTitle", children: t(keys.login.login.heading) }), alert && (jsxRuntimeExports.jsx(SignIn$1.Alert, Object.assign({ className: "asgardeo-basic-auth-alert" }, alert === null || alert === void 0 ? void 0 : alert.alertType, { children: t(alert.key) }))), jsxRuntimeExports.jsx(SignIn$1.TextField, { fullWidth: true, autoComplete: "off", label: t(keys.login.username), name: "text", value: username, placeholder: t(keys.login.enter.your.username), onChange: (e) => setUsername(e.target.value) }), jsxRuntimeExports.jsx(SignIn$1.Button, { color: "primary", variant: "contained", type: "submit", fullWidth: true, disabled: isAuthLoading, onClick: () => {
+    return (jsxRuntimeExports.jsxs(SignIn$1.Paper, { className: "Paper-basicAuth", children: [jsxRuntimeExports.jsx(SignIn$1.Typography, { title: true, className: "Typography-basicAuthTitle", children: t(keys.login.login.heading) }), alert && (jsxRuntimeExports.jsx(SignIn$1.Alert, Object.assign({ className: "asgardeo-basic-auth-alert" }, alert === null || alert === void 0 ? void 0 : alert.alertType, { children: t(alert.key) }))), jsxRuntimeExports.jsx(SignIn$1.TextField, { fullWidth: true, autoComplete: "off", label: t(keys.login.username), name: "text", value: username, placeholder: t(keys.login.enter.your.username), onChange: (e) => setUsername(e.target.value) }), children, jsxRuntimeExports.jsx(SignIn$1.Button, { color: "primary", variant: "contained", type: "submit", fullWidth: true, disabled: isAuthLoading, onClick: () => {
                     handleAuthenticate(authenticator.authenticatorId, {
                         username,
                     });
-                    setUsername('');
                 }, children: t(keys.login.button) }), isAuthLoading && (jsxRuntimeExports.jsx("div", { className: "circular-progress-holder-authn", children: jsxRuntimeExports.jsx(ae, { className: "sign-in-button-progress" }) })), showSelfSignUp && (jsxRuntimeExports.jsxs(je, { container: true, children: [jsxRuntimeExports.jsx(SignIn$1.Typography, { children: t(keys.common.prefix.register) }), jsxRuntimeExports.jsx(SignIn$1.Link, { href: "./register", className: "asgardeo-register-link", children: t(keys.common.register) })] })), renderLoginOptions.length !== 0 && jsxRuntimeExports.jsxs(SignIn$1.Divider, { children: [" ", t(keys.common.or), " "] }), renderLoginOptions] }));
 };
 
@@ -44318,7 +44426,7 @@ const IdentifierFirst = ({ handleAuthenticate, authenticator, alert, brandingPro
  */
 const SignIn = (props) => {
     var _a, _b, _c, _d, _e, _f, _g, _h, _j;
-    const { brandingProps, showFooter = true, showLogo = true, showSignUp } = props;
+    const { basicAuthChildren, brandingProps, emailOtpChildren, identifierFirstChildren, showFooter = true, showLogo = true, showSignUp, smsOtpChildren, totpChildren, } = props;
     const [isComponentLoading, setIsComponentLoading] = useState(true);
     const [alert, setAlert] = useState();
     const [showSelfSignUp, setShowSelfSignUp] = useState(showSignUp);
@@ -44440,29 +44548,29 @@ const SignIn = (props) => {
         if (authenticators) {
             const usernamePasswordAuthenticator = authenticators.find((authenticator) => authenticator.authenticator === 'Username & Password');
             if (usernamePasswordAuthenticator) {
-                return (jsxRuntimeExports.jsx(BasicAuth, { brandingProps: brandingProps, authenticator: usernamePasswordAuthenticator, handleAuthenticate: handleAuthenticate, showSelfSignUp: showSelfSignUp, alert: alert, renderLoginOptions: renderLoginOptions(authenticators.filter((auth) => auth.authenticatorId !== usernamePasswordAuthenticator.authenticatorId)) }));
+                return (jsxRuntimeExports.jsx(BasicAuth, { brandingProps: brandingProps, authenticator: usernamePasswordAuthenticator, handleAuthenticate: handleAuthenticate, showSelfSignUp: showSelfSignUp, alert: alert, renderLoginOptions: renderLoginOptions(authenticators.filter((auth) => auth.authenticatorId !== usernamePasswordAuthenticator.authenticatorId)), children: basicAuthChildren }));
             }
             const identifierFirstAuthenticator = authenticators.find((authenticator) => authenticator.authenticator === 'Identifier First');
             if (identifierFirstAuthenticator) {
-                return (jsxRuntimeExports.jsx(IdentifierFirst, { brandingProps: brandingProps, authenticator: identifierFirstAuthenticator, handleAuthenticate: handleAuthenticate, showSelfSignUp: showSelfSignUp, alert: alert, renderLoginOptions: renderLoginOptions(authenticators.filter((auth) => auth.authenticatorId !== identifierFirstAuthenticator.authenticatorId)) }));
+                return (jsxRuntimeExports.jsx(IdentifierFirst, { brandingProps: brandingProps, authenticator: identifierFirstAuthenticator, handleAuthenticate: handleAuthenticate, showSelfSignUp: showSelfSignUp, alert: alert, renderLoginOptions: renderLoginOptions(authenticators.filter((auth) => auth.authenticatorId !== identifierFirstAuthenticator.authenticatorId)), children: identifierFirstChildren }));
             }
             if (authenticators.length === 1) {
                 if (authenticators[0].authenticator === 'TOTP') {
-                    return (jsxRuntimeExports.jsx(Totp, { brandingProps: brandingProps, authenticator: authenticators[0], alert: alert, handleAuthenticate: handleAuthenticate }));
+                    return (jsxRuntimeExports.jsx(Totp, { brandingProps: brandingProps, authenticator: authenticators[0], alert: alert, handleAuthenticate: handleAuthenticate, children: totpChildren }));
                 }
                 if (
                 // TODO: change after api based auth gets fixed
                 new SPACryptoUtils()
                     .base64URLDecode(authContext === null || authContext === void 0 ? void 0 : authContext.authResponse.nextStep.authenticators[0].authenticatorId)
                     .split(':')[0] === 'email-otp-authenticator') {
-                    return (jsxRuntimeExports.jsx(EmailOtp, { alert: alert, brandingProps: brandingProps, authenticator: authenticators[0], handleAuthenticate: handleAuthenticate }));
+                    return (jsxRuntimeExports.jsx(EmailOtp, { alert: alert, brandingProps: brandingProps, authenticator: authenticators[0], handleAuthenticate: handleAuthenticate, children: emailOtpChildren }));
                 }
                 if (
                 // TODO: change after api based auth gets fixed
                 new SPACryptoUtils()
                     .base64URLDecode(authContext === null || authContext === void 0 ? void 0 : authContext.authResponse.nextStep.authenticators[0].authenticatorId)
                     .split(':')[0] === 'sms-otp-authenticator') {
-                    return (jsxRuntimeExports.jsx(SmsOtp, { alert: alert, brandingProps: brandingProps, authenticator: authenticators[0], handleAuthenticate: handleAuthenticate }));
+                    return (jsxRuntimeExports.jsx(SmsOtp, { alert: alert, brandingProps: brandingProps, authenticator: authenticators[0], handleAuthenticate: handleAuthenticate, children: smsOtpChildren }));
                 }
             }
             /**
@@ -44906,6 +45014,7 @@ const AsgardeoProvider = (props) => {
     const [isTextLoading, setIsTextLoading] = useState(true);
     const [isAuthLoading, setIsAuthLoading] = useState(false);
     const [authResponse, setAuthResponse] = useState();
+    const [username, setUsername] = useState('');
     const onSignInRef = useRef();
     const onSignOutRef = useRef();
     const setOnSignIn = useCallback((newOnSignIn) => {
@@ -44971,7 +45080,9 @@ const AsgardeoProvider = (props) => {
         setIsTextLoading,
         setOnSignIn,
         setOnSignOut,
+        setUsername,
         user,
+        username,
     }), [
         accessToken,
         authResponse,
@@ -44984,7 +45095,9 @@ const AsgardeoProvider = (props) => {
         setAuthentication,
         setOnSignIn,
         setOnSignOut,
+        setUsername,
         user,
+        username,
     ]);
     return (jsxRuntimeExports.jsx(AsgardeoContext.Provider, { value: value, children: jsxRuntimeExports.jsx(BrandingPreferenceProvider, { branding: branding, children: jsxRuntimeExports.jsx(I18nProvider, { providerLocaleOverride: branding === null || branding === void 0 ? void 0 : branding.locale, providerTextOverrides: (_a = branding === null || branding === void 0 ? void 0 : branding.preference) === null || _a === void 0 ? void 0 : _a.text, children: children }) }) }));
 };