@asgardeo/react 0.11.3 → 0.12.0

package/dist/cjs/index.js

@@ -25,7 +25,7 @@ __export(index_exports, {
   Alert: () => Alert_default,
   AsgardeoContext: () => AsgardeoContext_default,
   AsgardeoProvider: () => AsgardeoProvider_default,
-  AsgardeoRuntimeError: () => import_browser83.AsgardeoRuntimeError,
+  AsgardeoRuntimeError: () => import_browser85.AsgardeoRuntimeError,
   BaseAcceptInvite: () => BaseAcceptInvite_default,
   BaseCreateOrganization: () => BaseCreateOrganization,
   BaseInviteUser: () => BaseInviteUser_default,
@@ -45,6 +45,7 @@ __export(index_exports, {
   BrandingProvider: () => BrandingProvider_default,
   BuildingAlt: () => BuildingAlt_default,
   Button: () => Button_default,
+  Callback: () => Callback,
   Card: () => Card_default,
   Checkbox: () => Checkbox_default,
   CircleAlert: () => CircleAlert_default,
@@ -53,12 +54,12 @@ __export(index_exports, {
   DatePicker: () => DatePicker_default,
   Divider: () => Divider_default,
   EmailOtp: () => EmailOtp_default,
-  EmbeddedFlowActionVariant: () => import_browser83.EmbeddedFlowActionVariantV2,
-  EmbeddedFlowComponentType: () => import_browser83.EmbeddedFlowComponentTypeV2,
-  EmbeddedFlowEventType: () => import_browser83.EmbeddedFlowEventTypeV2,
-  EmbeddedFlowTextVariant: () => import_browser83.EmbeddedFlowTextVariantV2,
-  EmbeddedSignInFlowStatus: () => import_browser83.EmbeddedSignInFlowStatusV2,
-  EmbeddedSignInFlowType: () => import_browser83.EmbeddedSignInFlowTypeV2,
+  EmbeddedFlowActionVariant: () => import_browser85.EmbeddedFlowActionVariantV2,
+  EmbeddedFlowComponentType: () => import_browser85.EmbeddedFlowComponentTypeV2,
+  EmbeddedFlowEventType: () => import_browser85.EmbeddedFlowEventTypeV2,
+  EmbeddedFlowTextVariant: () => import_browser85.EmbeddedFlowTextVariantV2,
+  EmbeddedSignInFlowStatus: () => import_browser85.EmbeddedSignInFlowStatusV2,
+  EmbeddedSignInFlowType: () => import_browser85.EmbeddedSignInFlowTypeV2,
   Eye: () => Eye_default,
   EyeOff: () => EyeOff_default,
   FacebookButton: () => FacebookButton_default,
@@ -117,17 +118,17 @@ __export(index_exports, {
   UsernamePassword: () => UsernamePassword_default,
   createField: () => createField,
   createOrganization: () => createOrganization_default,
-  createPatchOperations: () => import_browser81.createPatchOperations,
+  createPatchOperations: () => import_browser83.createPatchOperations,
   createSignInOption: () => createSignInOption,
   createSignInOptionFromAuthenticator: () => createSignInOptionFromAuthenticator,
-  getActiveTheme: () => import_browser83.getActiveTheme,
+  getActiveTheme: () => import_browser85.getActiveTheme,
   getAllOrganizations: () => getAllOrganizations_default,
   getMeOrganizations: () => getMeOrganizations_default,
   getMeProfile: () => getScim2Me_default,
   getOrganization: () => getOrganization_default,
   getSchemas: () => getSchemas_default,
-  http: () => import_browser83.http,
-  navigate: () => import_browser83.navigate,
+  http: () => import_browser85.http,
+  navigate: () => import_browser85.navigate,
   updateMeProfile: () => updateMeProfile_default,
   updateOrganization: () => updateOrganization_default,
   useAsgardeo: () => useAsgardeo_default,
@@ -994,7 +995,8 @@ var import_browser7 = require("@asgardeo/browser");
 var useBrowserUrl = () => {
   const hasAuthParams = (url, afterSignInUrl) => (0, import_browser7.hasAuthParamsInUrl)() && new URL(url.origin + url.pathname).toString() === new URL(afterSignInUrl).toString() || // authParams?.authorizationCode || // FIXME: These are sent externally. Need to see what we can do about this.
   url.searchParams.get("error") !== null;
-  return { hasAuthParams };
+  const hasCalledForThisInstance = (url, instanceId) => (0, import_browser7.hasCalledForThisInstanceInUrl)(instanceId, url.search);
+  return { hasAuthParams, hasCalledForThisInstance };
 };
 var useBrowserUrl_default = useBrowserUrl;
 
@@ -1645,7 +1647,7 @@ var AsgardeoProvider = ({
 }) => {
   const reRenderCheckRef = (0, import_react15.useRef)(false);
   const asgardeo = (0, import_react15.useMemo)(() => new AsgardeoReactClient_default(instanceId), [instanceId]);
-  const { hasAuthParams } = useBrowserUrl_default();
+  const { hasAuthParams, hasCalledForThisInstance } = useBrowserUrl_default();
   const [user, setUser] = (0, import_react15.useState)(null);
   const [currentOrganization, setCurrentOrganization] = (0, import_react15.useState)(null);
   const [isSignedInSync, setIsSignedInSync] = (0, import_react15.useState)(false);
@@ -1784,7 +1786,7 @@ var AsgardeoProvider = ({
         return;
       }
       const currentUrl = new URL(window.location.href);
-      const hasAuthParamsResult = hasAuthParams(currentUrl, afterSignInUrl);
+      const hasAuthParamsResult = hasAuthParams(currentUrl, afterSignInUrl) && hasCalledForThisInstance(currentUrl, instanceId ?? 0);
       const isV2Platform = config.platform === import_browser12.Platform.AsgardeoV2;
       if (hasAuthParamsResult) {
         try {
@@ -7902,17 +7904,144 @@ var BaseSignIn3 = (props) => {
 var BaseSignIn_default3 = BaseSignIn3;
 
 // src/components/presentation/auth/SignIn/SignIn.tsx
-var import_browser50 = require("@asgardeo/browser");
+var import_browser51 = require("@asgardeo/browser");
 
 // src/components/presentation/auth/SignIn/v2/SignIn.tsx
-var import_browser49 = require("@asgardeo/browser");
+var import_browser50 = require("@asgardeo/browser");
+var import_react60 = require("react");
+
+// src/hooks/v2/useOAuthCallback.ts
 var import_react59 = require("react");
+function cleanupUrlParams() {
+  if (typeof window === "undefined") return;
+  const url = new URL(window.location.href);
+  url.searchParams.delete("code");
+  url.searchParams.delete("nonce");
+  url.searchParams.delete("state");
+  url.searchParams.delete("error");
+  url.searchParams.delete("error_description");
+  window.history.replaceState({}, "", url.toString());
+}
+function useOAuthCallback({
+  currentFlowId,
+  flowIdStorageKey = "asgardeo_flow_id",
+  isInitialized,
+  isSubmitting = false,
+  onComplete,
+  onError,
+  onFlowChange,
+  onProcessingStart,
+  onSubmit,
+  processedRef,
+  setFlowId,
+  tokenValidationAttemptedRef
+}) {
+  const internalRef = (0, import_react59.useRef)(false);
+  const oauthCodeProcessedRef = processedRef ?? internalRef;
+  (0, import_react59.useEffect)(() => {
+    if (!isInitialized || isSubmitting) {
+      return;
+    }
+    const urlParams = new URLSearchParams(window.location.search);
+    const code = urlParams.get("code");
+    const nonce = urlParams.get("nonce");
+    const state = urlParams.get("state");
+    const flowIdFromUrl = urlParams.get("flowId");
+    const error = urlParams.get("error");
+    const errorDescription = urlParams.get("error_description");
+    if (error) {
+      oauthCodeProcessedRef.current = true;
+      if (tokenValidationAttemptedRef) {
+        tokenValidationAttemptedRef.current = true;
+      }
+      onError?.(new Error(errorDescription || error || "OAuth authentication failed"));
+      cleanupUrlParams();
+      return;
+    }
+    if (!code || oauthCodeProcessedRef.current) {
+      return;
+    }
+    if (tokenValidationAttemptedRef?.current) {
+      return;
+    }
+    const storedFlowId = sessionStorage.getItem(flowIdStorageKey);
+    const flowIdToUse = currentFlowId || storedFlowId || flowIdFromUrl || state || null;
+    if (!flowIdToUse) {
+      oauthCodeProcessedRef.current = true;
+      onError?.(new Error("Invalid flow. Missing flowId."));
+      cleanupUrlParams();
+      return;
+    }
+    oauthCodeProcessedRef.current = true;
+    if (tokenValidationAttemptedRef) {
+      tokenValidationAttemptedRef.current = true;
+    }
+    onProcessingStart?.();
+    if (!currentFlowId && setFlowId) {
+      setFlowId(flowIdToUse);
+    }
+    (async () => {
+      try {
+        const payload = {
+          flowId: flowIdToUse,
+          inputs: {
+            code,
+            ...nonce && { nonce }
+          }
+        };
+        const response = await onSubmit(payload);
+        onFlowChange?.(response);
+        if (response?.flowStatus === "COMPLETE" || response?.status === "COMPLETE") {
+          onComplete?.();
+        }
+        if (response?.flowStatus === "ERROR" || response?.status === "ERROR") {
+          onError?.(response);
+        }
+        cleanupUrlParams();
+      } catch (err) {
+        onError?.(err);
+        cleanupUrlParams();
+      }
+    })();
+  }, [
+    isInitialized,
+    currentFlowId,
+    isSubmitting,
+    onSubmit,
+    onComplete,
+    onError,
+    onFlowChange,
+    setFlowId,
+    flowIdStorageKey
+  ]);
+}
 
-// src/utils/v2/passkey.ts
+// src/utils/oauth.ts
 var import_browser48 = require("@asgardeo/browser");
+function initiateOAuthRedirect(redirectURL) {
+  const basePath = document.querySelector("base")?.getAttribute("href") || "";
+  let returnPath = window.location.pathname;
+  if (basePath && returnPath.startsWith(basePath)) {
+    returnPath = returnPath.slice(basePath.length) || "/";
+  }
+  const state = crypto.randomUUID();
+  sessionStorage.setItem(
+    `asgardeo_oauth_${state}`,
+    JSON.stringify({
+      path: returnPath,
+      timestamp: Date.now()
+    })
+  );
+  const redirectUrlObj = new URL(redirectURL);
+  redirectUrlObj.searchParams.set("state", state);
+  (0, import_browser48.navigate)(redirectUrlObj.toString());
+}
+
+// src/utils/v2/passkey.ts
+var import_browser49 = require("@asgardeo/browser");
 var handlePasskeyRegistration = async (challengeData) => {
   if (!window.navigator.credentials || !window.navigator.credentials.create) {
-    throw new import_browser48.AsgardeoRuntimeError(
+    throw new import_browser49.AsgardeoRuntimeError(
       "WebAuthn is not supported in this browser.",
       "browser-webauthn-not-supported",
       "browser",
@@ -7923,15 +8052,15 @@ var handlePasskeyRegistration = async (challengeData) => {
     const creationOptions = JSON.parse(challengeData);
     const publicKey = {
       ...creationOptions,
-      challenge: (0, import_browser48.base64urlToArrayBuffer)(creationOptions.challenge),
+      challenge: (0, import_browser49.base64urlToArrayBuffer)(creationOptions.challenge),
       user: {
         ...creationOptions.user,
-        id: (0, import_browser48.base64urlToArrayBuffer)(creationOptions.user.id)
+        id: (0, import_browser49.base64urlToArrayBuffer)(creationOptions.user.id)
       },
       ...creationOptions.excludeCredentials && {
         excludeCredentials: creationOptions.excludeCredentials.map((cred) => ({
           ...cred,
-          id: (0, import_browser48.base64urlToArrayBuffer)(cred.id)
+          id: (0, import_browser49.base64urlToArrayBuffer)(cred.id)
         }))
       }
     };
@@ -7939,7 +8068,7 @@ var handlePasskeyRegistration = async (challengeData) => {
       publicKey
     });
     if (!credential) {
-      throw new import_browser48.AsgardeoRuntimeError(
+      throw new import_browser49.AsgardeoRuntimeError(
         "No credential returned from WebAuthn registration.",
         "browser-webauthn-no-credential",
         "browser",
@@ -7949,10 +8078,10 @@ var handlePasskeyRegistration = async (challengeData) => {
     const response = credential.response;
     const registrationResponse = {
       id: credential.id,
-      rawId: (0, import_browser48.arrayBufferToBase64url)(credential.rawId),
+      rawId: (0, import_browser49.arrayBufferToBase64url)(credential.rawId),
       response: {
-        attestationObject: (0, import_browser48.arrayBufferToBase64url)(response.attestationObject),
-        clientDataJSON: (0, import_browser48.arrayBufferToBase64url)(response.clientDataJSON),
+        attestationObject: (0, import_browser49.arrayBufferToBase64url)(response.attestationObject),
+        clientDataJSON: (0, import_browser49.arrayBufferToBase64url)(response.clientDataJSON),
         ...response.getTransports && {
           transports: response.getTransports()
         }
@@ -7964,18 +8093,18 @@ var handlePasskeyRegistration = async (challengeData) => {
     };
     return JSON.stringify(registrationResponse);
   } catch (error) {
-    if (error instanceof import_browser48.AsgardeoRuntimeError) {
+    if (error instanceof import_browser49.AsgardeoRuntimeError) {
       throw error;
     }
     if (error instanceof Error) {
-      throw new import_browser48.AsgardeoRuntimeError(
+      throw new import_browser49.AsgardeoRuntimeError(
         `Passkey registration failed: ${error.message}`,
         "browser-webauthn-registration-error",
         "browser",
         `WebAuthn registration failed with error: ${error.name}`
       );
     }
-    throw new import_browser48.AsgardeoRuntimeError(
+    throw new import_browser49.AsgardeoRuntimeError(
       "Passkey registration failed due to an unexpected error.",
       "browser-webauthn-unexpected-error",
       "browser",
@@ -7985,7 +8114,7 @@ var handlePasskeyRegistration = async (challengeData) => {
 };
 var handlePasskeyAuthentication = async (challengeData) => {
   if (!window.navigator.credentials || !window.navigator.credentials.get) {
-    throw new import_browser48.AsgardeoRuntimeError(
+    throw new import_browser49.AsgardeoRuntimeError(
       "WebAuthn is not supported in this browser.",
       "browser-webauthn-not-supported",
       "browser",
@@ -7996,11 +8125,11 @@ var handlePasskeyAuthentication = async (challengeData) => {
     const requestOptions = JSON.parse(challengeData);
     const publicKey = {
       ...requestOptions,
-      challenge: (0, import_browser48.base64urlToArrayBuffer)(requestOptions.challenge),
+      challenge: (0, import_browser49.base64urlToArrayBuffer)(requestOptions.challenge),
       ...requestOptions.allowCredentials && {
         allowCredentials: requestOptions.allowCredentials.map((cred) => ({
           ...cred,
-          id: (0, import_browser48.base64urlToArrayBuffer)(cred.id)
+          id: (0, import_browser49.base64urlToArrayBuffer)(cred.id)
         }))
       }
     };
@@ -8008,7 +8137,7 @@ var handlePasskeyAuthentication = async (challengeData) => {
       publicKey
     });
     if (!credential) {
-      throw new import_browser48.AsgardeoRuntimeError(
+      throw new import_browser49.AsgardeoRuntimeError(
         "No credential returned from WebAuthn authentication.",
         "browser-webauthn-no-credential",
         "browser",
@@ -8018,13 +8147,13 @@ var handlePasskeyAuthentication = async (challengeData) => {
     const response = credential.response;
     const authenticationResponse = {
       id: credential.id,
-      rawId: (0, import_browser48.arrayBufferToBase64url)(credential.rawId),
+      rawId: (0, import_browser49.arrayBufferToBase64url)(credential.rawId),
       response: {
-        authenticatorData: (0, import_browser48.arrayBufferToBase64url)(response.authenticatorData),
-        clientDataJSON: (0, import_browser48.arrayBufferToBase64url)(response.clientDataJSON),
-        signature: (0, import_browser48.arrayBufferToBase64url)(response.signature),
+        authenticatorData: (0, import_browser49.arrayBufferToBase64url)(response.authenticatorData),
+        clientDataJSON: (0, import_browser49.arrayBufferToBase64url)(response.clientDataJSON),
+        signature: (0, import_browser49.arrayBufferToBase64url)(response.signature),
         ...response.userHandle && {
-          userHandle: (0, import_browser48.arrayBufferToBase64url)(response.userHandle)
+          userHandle: (0, import_browser49.arrayBufferToBase64url)(response.userHandle)
         }
       },
       type: credential.type,
@@ -8034,18 +8163,18 @@ var handlePasskeyAuthentication = async (challengeData) => {
     };
     return JSON.stringify(authenticationResponse);
   } catch (error) {
-    if (error instanceof import_browser48.AsgardeoRuntimeError) {
+    if (error instanceof import_browser49.AsgardeoRuntimeError) {
       throw error;
     }
     if (error instanceof Error) {
-      throw new import_browser48.AsgardeoRuntimeError(
+      throw new import_browser49.AsgardeoRuntimeError(
         `Passkey authentication failed: ${error.message}`,
         "browser-webauthn-authentication-error",
         "browser",
         `WebAuthn authentication failed with error: ${error.name}`
       );
     }
-    throw new import_browser48.AsgardeoRuntimeError(
+    throw new import_browser49.AsgardeoRuntimeError(
       "Passkey authentication failed due to an unexpected error.",
       "browser-webauthn-unexpected-error",
       "browser",
@@ -8066,12 +8195,12 @@ var SignIn = ({
 }) => {
   const { applicationId, afterSignInUrl, signIn, isInitialized, isLoading } = useAsgardeo_default();
   const { t } = useTranslation_default();
-  const [components, setComponents] = (0, import_react59.useState)([]);
-  const [currentFlowId, setCurrentFlowId] = (0, import_react59.useState)(null);
-  const [isFlowInitialized, setIsFlowInitialized] = (0, import_react59.useState)(false);
-  const [flowError, setFlowError] = (0, import_react59.useState)(null);
-  const [isSubmitting, setIsSubmitting] = (0, import_react59.useState)(false);
-  const [passkeyState, setPasskeyState] = (0, import_react59.useState)({
+  const [components, setComponents] = (0, import_react60.useState)([]);
+  const [currentFlowId, setCurrentFlowId] = (0, import_react60.useState)(null);
+  const [isFlowInitialized, setIsFlowInitialized] = (0, import_react60.useState)(false);
+  const [flowError, setFlowError] = (0, import_react60.useState)(null);
+  const [isSubmitting, setIsSubmitting] = (0, import_react60.useState)(false);
+  const [passkeyState, setPasskeyState] = (0, import_react60.useState)({
     actionId: null,
     challenge: null,
     creationOptions: null,
@@ -8079,9 +8208,9 @@ var SignIn = ({
     flowId: null,
     isActive: false
   });
-  const initializationAttemptedRef = (0, import_react59.useRef)(false);
-  const oauthCodeProcessedRef = (0, import_react59.useRef)(false);
-  const passkeyProcessedRef = (0, import_react59.useRef)(false);
+  const initializationAttemptedRef = (0, import_react60.useRef)(false);
+  const oauthCodeProcessedRef = (0, import_react60.useRef)(false);
+  const passkeyProcessedRef = (0, import_react60.useRef)(false);
   const setFlowId = (flowId) => {
     setCurrentFlowId(flowId);
     if (flowId) {
@@ -8114,7 +8243,6 @@ var SignIn = ({
       sessionStorage.setItem("asgardeo_auth_id", authId);
     }
   };
-  const resolveFlowId = (activeFlowId, state, flowIdFromUrl, storedFlowId) => activeFlowId || state || flowIdFromUrl || storedFlowId || null;
   const cleanupOAuthUrlParams = (includeNonce = false) => {
     if (!window?.location?.href) return;
     const url = new URL(window.location.href);
@@ -8143,12 +8271,12 @@ var SignIn = ({
   const handleOAuthError = (error, errorDescription) => {
     clearFlowState();
     const errorMessage = errorDescription || `OAuth error: ${error}`;
-    const err = new import_browser49.AsgardeoRuntimeError(errorMessage, "SIGN_IN_ERROR", "react");
+    const err = new import_browser50.AsgardeoRuntimeError(errorMessage, "SIGN_IN_ERROR", "react");
     setError(err);
     cleanupOAuthUrlParams(true);
   };
   const handleRedirection = (response) => {
-    if (response.type === import_browser49.EmbeddedSignInFlowTypeV2.Redirection) {
+    if (response.type === import_browser50.EmbeddedSignInFlowTypeV2.Redirection) {
       const redirectURL = response.data?.redirectURL || response?.redirectURL;
       if (redirectURL && window?.location) {
         if (response.flowId) {
@@ -8156,7 +8284,7 @@ var SignIn = ({
         }
         const urlParams = getUrlParams2();
         handleAuthId(urlParams.authId);
-        window.location.href = redirectURL;
+        initiateOAuthRedirect(redirectURL);
         return true;
       }
     }
@@ -8168,7 +8296,7 @@ var SignIn = ({
     handleAuthId(urlParams.authId);
     const effectiveApplicationId = applicationId || urlParams.applicationId;
     if (!urlParams.flowId && !effectiveApplicationId) {
-      const error = new import_browser49.AsgardeoRuntimeError(
+      const error = new import_browser50.AsgardeoRuntimeError(
         "Either flowId or applicationId is required for authentication",
         "SIGN_IN_ERROR",
         "react"
@@ -8186,7 +8314,7 @@ var SignIn = ({
       } else {
         response = await signIn({
           applicationId: effectiveApplicationId,
-          flowType: import_browser49.EmbeddedFlowType.Authentication
+          flowType: import_browser50.EmbeddedFlowType.Authentication
         });
       }
       if (handleRedirection(response)) {
@@ -8209,7 +8337,7 @@ var SignIn = ({
       initializationAttemptedRef.current = false;
     }
   };
-  (0, import_react59.useEffect)(() => {
+  (0, import_react60.useEffect)(() => {
     const urlParams = getUrlParams2();
     if (urlParams.error) {
       handleOAuthError(urlParams.error, urlParams.errorDescription);
@@ -8258,7 +8386,7 @@ var SignIn = ({
       const { flowId: normalizedFlowId, components: normalizedComponents } = normalizeFlowResponse(response, t, {
         resolveTranslations: !children
       });
-      if (response.flowStatus === import_browser49.EmbeddedSignInFlowStatusV2.Error) {
+      if (response.flowStatus === import_browser50.EmbeddedSignInFlowStatusV2.Error) {
         clearFlowState();
         const failureReason = response?.failureReason;
         const errorMessage = failureReason || "Authentication flow failed. Please try again.";
@@ -8267,7 +8395,7 @@ var SignIn = ({
         cleanupFlowUrlParams();
         throw err;
       }
-      if (response.flowStatus === import_browser49.EmbeddedSignInFlowStatusV2.Complete) {
+      if (response.flowStatus === import_browser50.EmbeddedSignInFlowStatusV2.Complete) {
         const redirectUrl = response?.redirectUrl || response?.redirect_uri;
         const finalRedirectUrl = redirectUrl || afterSignInUrl;
         setIsSubmitting(false);
@@ -8306,37 +8434,19 @@ var SignIn = ({
   const handleError = (error) => {
     setError(error);
   };
-  (0, import_react59.useEffect)(() => {
-    const urlParams = getUrlParams2();
-    const storedFlowId = sessionStorage.getItem("asgardeo_flow_id");
-    if (urlParams.error) {
-      handleOAuthError(urlParams.error, urlParams.errorDescription);
-      oauthCodeProcessedRef.current = true;
-      return;
-    }
-    if (!urlParams.code || oauthCodeProcessedRef.current || isSubmitting) {
-      return;
-    }
-    const flowIdToUse = resolveFlowId(currentFlowId, urlParams.state, urlParams.flowId, storedFlowId);
-    if (!flowIdToUse || !signIn) {
-      return;
-    }
-    oauthCodeProcessedRef.current = true;
-    if (!currentFlowId) {
-      setFlowId(flowIdToUse);
-    }
-    const submitPayload = {
-      flowId: flowIdToUse,
-      inputs: {
-        code: urlParams.code,
-        ...urlParams.nonce && { nonce: urlParams.nonce }
-      }
-    };
-    handleSubmit(submitPayload).catch(() => {
-      cleanupOAuthUrlParams(true);
-    });
-  }, [isFlowInitialized, currentFlowId, isInitialized, isLoading, isSubmitting, signIn]);
-  (0, import_react59.useEffect)(() => {
+  useOAuthCallback({
+    currentFlowId,
+    isInitialized: isInitialized && !isLoading,
+    isSubmitting,
+    onError: (err) => {
+      clearFlowState();
+      setError(err instanceof Error ? err : new Error(String(err)));
+    },
+    onSubmit: async (payload) => handleSubmit({ flowId: payload.flowId, inputs: payload.inputs }),
+    processedRef: oauthCodeProcessedRef,
+    setFlowId
+  });
+  (0, import_react60.useEffect)(() => {
     if (!passkeyState.isActive || !passkeyState.challenge && !passkeyState.creationOptions || !passkeyState.flowId) {
       return;
     }
@@ -8431,7 +8541,7 @@ var SignIn2 = ({ className, size = "medium", children, ...rest }) => {
       window.location.href = url.toString();
     }
   };
-  if (platform === import_browser50.Platform.AsgardeoV2) {
+  if (platform === import_browser51.Platform.AsgardeoV2) {
     return /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(
       SignIn_default,
       {
@@ -8464,18 +8574,18 @@ var SignIn2 = ({ className, size = "medium", children, ...rest }) => {
 var SignIn_default2 = SignIn2;
 
 // src/components/presentation/auth/SignUp/BaseSignUp.tsx
-var import_browser61 = require("@asgardeo/browser");
+var import_browser62 = require("@asgardeo/browser");
 
 // src/components/presentation/auth/SignUp/v1/BaseSignUp.tsx
-var import_browser59 = require("@asgardeo/browser");
+var import_browser60 = require("@asgardeo/browser");
 var import_css38 = require("@emotion/css");
-var import_react61 = require("react");
+var import_react62 = require("react");
 
 // src/components/presentation/auth/SignUp/v1/SignUpOptionFactory.tsx
-var import_browser58 = require("@asgardeo/browser");
+var import_browser59 = require("@asgardeo/browser");
 
 // src/components/adapters/CheckboxInput.tsx
-var import_browser51 = require("@asgardeo/browser");
+var import_browser52 = require("@asgardeo/browser");
 var CheckboxInput = ({
   component,
   formValues,
@@ -8496,14 +8606,14 @@ var CheckboxInput = ({
     onChange: (newValue) => onInputChange(fieldName, newValue),
     placeholder: config["placeholder"] || "",
     required: config["required"] || false,
-    type: import_browser51.FieldType.Checkbox,
+    type: import_browser52.FieldType.Checkbox,
     value
   });
 };
 var CheckboxInput_default = CheckboxInput;
 
 // src/components/adapters/DateInput.tsx
-var import_browser52 = require("@asgardeo/browser");
+var import_browser53 = require("@asgardeo/browser");
 var DateInput = ({
   component,
   formValues,
@@ -8524,7 +8634,7 @@ var DateInput = ({
     onChange: (newValue) => onInputChange(fieldName, newValue),
     placeholder: config["placeholder"] || "",
     required: config["required"] || false,
-    type: import_browser52.FieldType.Date,
+    type: import_browser53.FieldType.Date,
     value
   });
 };
@@ -8550,7 +8660,7 @@ var DividerComponent = ({ component }) => {
 var DividerComponent_default = DividerComponent;
 
 // src/components/adapters/EmailInput.tsx
-var import_browser53 = require("@asgardeo/browser");
+var import_browser54 = require("@asgardeo/browser");
 var EmailInput = ({
   component,
   formValues,
@@ -8571,7 +8681,7 @@ var EmailInput = ({
     onChange: (newValue) => onInputChange(fieldName, newValue),
     placeholder: config["placeholder"] || "Enter your email",
     required: config["required"] || false,
-    type: import_browser53.FieldType.Email,
+    type: import_browser54.FieldType.Email,
     value
   });
 };
@@ -8635,7 +8745,7 @@ var ImageComponent = ({ component }) => {
 var ImageComponent_default = ImageComponent;
 
 // src/components/adapters/NumberInput.tsx
-var import_browser54 = require("@asgardeo/browser");
+var import_browser55 = require("@asgardeo/browser");
 var NumberInput = ({
   component,
   formValues,
@@ -8656,14 +8766,14 @@ var NumberInput = ({
     onChange: (newValue) => onInputChange(fieldName, newValue),
     placeholder: config["placeholder"] || "",
     required: config["required"] || false,
-    type: import_browser54.FieldType.Number,
+    type: import_browser55.FieldType.Number,
     value
   });
 };
 var NumberInput_default = NumberInput;
 
 // src/components/adapters/PasswordInput.tsx
-var import_browser55 = require("@asgardeo/browser");
+var import_browser56 = require("@asgardeo/browser");
 var PasswordInput = ({
   component,
   formValues,
@@ -8715,14 +8825,14 @@ var PasswordInput = ({
     onChange: (newValue) => onInputChange(fieldName, newValue),
     placeholder: config["placeholder"] || "Enter your password",
     required: config["required"] || false,
-    type: import_browser55.FieldType.Password,
+    type: import_browser56.FieldType.Password,
     value
   });
 };
 var PasswordInput_default = PasswordInput;
 
 // src/components/adapters/SelectInput.tsx
-var import_browser56 = require("@asgardeo/browser");
+var import_browser57 = require("@asgardeo/browser");
 var SelectInput = ({
   component,
   formValues,
@@ -8749,7 +8859,7 @@ var SelectInput = ({
     options,
     placeholder: config["placeholder"] || "",
     required: config["required"] || false,
-    type: import_browser56.FieldType.Select,
+    type: import_browser57.FieldType.Select,
     value
   });
 };
@@ -8841,7 +8951,7 @@ var TelephoneInput = ({
 var TelephoneInput_default = TelephoneInput;
 
 // src/components/adapters/TextInput.tsx
-var import_browser57 = require("@asgardeo/browser");
+var import_browser58 = require("@asgardeo/browser");
 var TextInput = ({
   component,
   formValues,
@@ -8862,7 +8972,7 @@ var TextInput = ({
     onChange: (newValue) => onInputChange(fieldName, newValue),
     placeholder: config["placeholder"] || "",
     required: config["required"] || false,
-    type: import_browser57.FieldType.Text,
+    type: import_browser58.FieldType.Text,
     value
   });
 };
@@ -8926,9 +9036,9 @@ var Typography_default2 = TypographyComponent;
 var import_jsx_runtime66 = require("react/jsx-runtime");
 var createSignUpComponent = ({ component, onSubmit, ...rest }) => {
   switch (component.type) {
-    case import_browser58.EmbeddedFlowComponentType.Typography:
+    case import_browser59.EmbeddedFlowComponentType.Typography:
       return /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(Typography_default2, { component, onSubmit, ...rest });
-    case import_browser58.EmbeddedFlowComponentType.Input: {
+    case import_browser59.EmbeddedFlowComponentType.Input: {
       const inputVariant = component.variant?.toUpperCase();
       const inputType = component.config["type"]?.toLowerCase();
       if (inputVariant === "EMAIL" || inputType === "email") {
@@ -8951,7 +9061,7 @@ var createSignUpComponent = ({ component, onSubmit, ...rest }) => {
       }
       return /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(TextInput_default, { component, onSubmit, ...rest });
     }
-    case import_browser58.EmbeddedFlowComponentType.Button: {
+    case import_browser59.EmbeddedFlowComponentType.Button: {
       const buttonVariant = component.variant?.toUpperCase();
       const buttonText = component.config["text"] || component.config["label"] || "";
       if (buttonVariant === "SOCIAL") {
@@ -8976,13 +9086,13 @@ var createSignUpComponent = ({ component, onSubmit, ...rest }) => {
       }
       return /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(SubmitButton_default, { component, onSubmit, ...rest });
     }
-    case import_browser58.EmbeddedFlowComponentType.Form:
+    case import_browser59.EmbeddedFlowComponentType.Form:
       return /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(FormContainer_default, { component, onSubmit, ...rest });
-    case import_browser58.EmbeddedFlowComponentType.Select:
+    case import_browser59.EmbeddedFlowComponentType.Select:
       return /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(SelectInput_default, { component, onSubmit, ...rest });
-    case import_browser58.EmbeddedFlowComponentType.Divider:
+    case import_browser59.EmbeddedFlowComponentType.Divider:
       return /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(DividerComponent_default, { component, onSubmit, ...rest });
-    case import_browser58.EmbeddedFlowComponentType.Image:
+    case import_browser59.EmbeddedFlowComponentType.Image:
       return /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(ImageComponent_default, { component, onSubmit, ...rest });
     default:
       return /* @__PURE__ */ (0, import_jsx_runtime66.jsx)("div", {});
@@ -9017,8 +9127,8 @@ var renderSignUpComponents2 = (components, formValues, touchedFields, formErrors
 
 // src/components/presentation/auth/SignUp/BaseSignUp.styles.ts
 var import_css37 = require("@emotion/css");
-var import_react60 = require("react");
-var useStyles17 = (theme, colorScheme) => (0, import_react60.useMemo)(() => {
+var import_react61 = require("react");
+var useStyles17 = (theme, colorScheme) => (0, import_react61.useMemo)(() => {
   const signUp = import_css37.css`
       min-width: 420px;
       margin: 0 auto;
@@ -9153,7 +9263,7 @@ var BaseSignUp_styles_default = useStyles17;
 
 // src/components/presentation/auth/SignUp/v1/BaseSignUp.tsx
 var import_jsx_runtime67 = require("react/jsx-runtime");
-var logger6 = (0, import_browser59.createPackageComponentLogger)(
+var logger6 = (0, import_browser60.createPackageComponentLogger)(
   "@asgardeo/react",
   "BaseSignUp"
 );
@@ -9181,7 +9291,7 @@ var BaseSignUpContent = ({
   const { subtitle: flowSubtitle, title: flowTitle, messages: flowMessages, addMessage, clearMessages } = useFlow_default();
   useAsgardeo_default();
   const styles = BaseSignUp_styles_default(theme, colorScheme);
-  const handleError = (0, import_react61.useCallback)(
+  const handleError = (0, import_react62.useCallback)(
     (error) => {
       let errorMessage = t("errors.signup.flow.failure");
       if (error && typeof error === "object") {
@@ -9214,16 +9324,16 @@ var BaseSignUpContent = ({
     },
     [t, addMessage, clearMessages]
   );
-  const [isLoading, setIsLoading] = (0, import_react61.useState)(false);
-  const [isFlowInitialized, setIsFlowInitialized] = (0, import_react61.useState)(false);
-  const [currentFlow, setCurrentFlow] = (0, import_react61.useState)(null);
-  const initializationAttemptedRef = (0, import_react61.useRef)(false);
-  const extractFormFields = (0, import_react61.useCallback)(
+  const [isLoading, setIsLoading] = (0, import_react62.useState)(false);
+  const [isFlowInitialized, setIsFlowInitialized] = (0, import_react62.useState)(false);
+  const [currentFlow, setCurrentFlow] = (0, import_react62.useState)(null);
+  const initializationAttemptedRef = (0, import_react62.useRef)(false);
+  const extractFormFields = (0, import_react62.useCallback)(
     (components) => {
       const fields = [];
       const processComponents = (comps) => {
         comps.forEach((component) => {
-          if (component.type === import_browser59.EmbeddedFlowComponentType.Input) {
+          if (component.type === import_browser60.EmbeddedFlowComponentType.Input) {
             const config = component.config || {};
             fields.push({
               initialValue: config.defaultValue || "",
@@ -9271,7 +9381,7 @@ var BaseSignUpContent = ({
     validateForm,
     reset: resetForm
   } = form;
-  const setupFormFields = (0, import_react61.useCallback)(
+  const setupFormFields = (0, import_react62.useCallback)(
     (flowResponse) => {
       const fields = extractFormFields(flowResponse.data?.components || []);
       const initialValues = {};
@@ -9290,7 +9400,7 @@ var BaseSignUpContent = ({
     setFormTouched(name, true);
   };
   const handleRedirectionIfNeeded = (response) => {
-    if (response?.type === import_browser59.EmbeddedFlowResponseType.Redirection && response?.data?.redirectURL) {
+    if (response?.type === import_browser60.EmbeddedFlowResponseType.Redirection && response?.data?.redirectURL) {
       const redirectUrl = response.data.redirectURL;
       const popup = window.open(redirectUrl, "oauth_popup", "width=500,height=600,scrollbars=yes,resizable=yes");
       if (!popup) {
@@ -9328,9 +9438,9 @@ var BaseSignUpContent = ({
           try {
             const continueResponse = await onSubmit(payload);
             onFlowChange?.(continueResponse);
-            if (continueResponse.flowStatus === import_browser59.EmbeddedFlowStatus.Complete) {
+            if (continueResponse.flowStatus === import_browser60.EmbeddedFlowStatus.Complete) {
               onComplete?.(continueResponse);
-            } else if (continueResponse.flowStatus === import_browser59.EmbeddedFlowStatus.Incomplete) {
+            } else if (continueResponse.flowStatus === import_browser60.EmbeddedFlowStatus.Incomplete) {
               setCurrentFlow(continueResponse);
               setupFormFields(continueResponse);
             }
@@ -9381,9 +9491,9 @@ var BaseSignUpContent = ({
                 try {
                   const continueResponse = await onSubmit(payload);
                   onFlowChange?.(continueResponse);
-                  if (continueResponse.flowStatus === import_browser59.EmbeddedFlowStatus.Complete) {
+                  if (continueResponse.flowStatus === import_browser60.EmbeddedFlowStatus.Complete) {
                     onComplete?.(continueResponse);
-                  } else if (continueResponse.flowStatus === import_browser59.EmbeddedFlowStatus.Incomplete) {
+                  } else if (continueResponse.flowStatus === import_browser60.EmbeddedFlowStatus.Incomplete) {
                     setCurrentFlow(continueResponse);
                     setupFormFields(continueResponse);
                   }
@@ -9429,11 +9539,11 @@ var BaseSignUpContent = ({
       };
       const response = await onSubmit(payload);
       onFlowChange?.(response);
-      if (response.flowStatus === import_browser59.EmbeddedFlowStatus.Complete) {
+      if (response.flowStatus === import_browser60.EmbeddedFlowStatus.Complete) {
         onComplete?.(response);
         return;
       }
-      if (response.flowStatus === import_browser59.EmbeddedFlowStatus.Incomplete) {
+      if (response.flowStatus === import_browser60.EmbeddedFlowStatus.Incomplete) {
         if (handleRedirectionIfNeeded(response)) {
           return;
         }
@@ -9449,31 +9559,31 @@ var BaseSignUpContent = ({
   };
   const containerClasses = (0, import_css38.cx)(
     [
-      (0, import_browser59.withVendorCSSClassPrefix)("signup"),
-      (0, import_browser59.withVendorCSSClassPrefix)(`signup--${size}`),
-      (0, import_browser59.withVendorCSSClassPrefix)(`signup--${variant}`)
+      (0, import_browser60.withVendorCSSClassPrefix)("signup"),
+      (0, import_browser60.withVendorCSSClassPrefix)(`signup--${size}`),
+      (0, import_browser60.withVendorCSSClassPrefix)(`signup--${variant}`)
     ],
     className
   );
   const inputClasses = (0, import_css38.cx)(
     [
-      (0, import_browser59.withVendorCSSClassPrefix)("signup__input"),
-      size === "small" && (0, import_browser59.withVendorCSSClassPrefix)("signup__input--small"),
-      size === "large" && (0, import_browser59.withVendorCSSClassPrefix)("signup__input--large")
+      (0, import_browser60.withVendorCSSClassPrefix)("signup__input"),
+      size === "small" && (0, import_browser60.withVendorCSSClassPrefix)("signup__input--small"),
+      size === "large" && (0, import_browser60.withVendorCSSClassPrefix)("signup__input--large")
     ],
     inputClassName
   );
   const buttonClasses = (0, import_css38.cx)(
     [
-      (0, import_browser59.withVendorCSSClassPrefix)("signup__button"),
-      size === "small" && (0, import_browser59.withVendorCSSClassPrefix)("signup__button--small"),
-      size === "large" && (0, import_browser59.withVendorCSSClassPrefix)("signup__button--large")
+      (0, import_browser60.withVendorCSSClassPrefix)("signup__button"),
+      size === "small" && (0, import_browser60.withVendorCSSClassPrefix)("signup__button--small"),
+      size === "large" && (0, import_browser60.withVendorCSSClassPrefix)("signup__button--large")
     ],
     buttonClassName
   );
-  const errorClasses = (0, import_css38.cx)([(0, import_browser59.withVendorCSSClassPrefix)("signup__error")], errorClassName);
-  const messageClasses = (0, import_css38.cx)([(0, import_browser59.withVendorCSSClassPrefix)("signup__messages")], messageClassName);
-  const renderComponents = (0, import_react61.useCallback)(
+  const errorClasses = (0, import_css38.cx)([(0, import_browser60.withVendorCSSClassPrefix)("signup__error")], errorClassName);
+  const messageClasses = (0, import_css38.cx)([(0, import_browser60.withVendorCSSClassPrefix)("signup__messages")], messageClassName);
+  const renderComponents = (0, import_react62.useCallback)(
     (components) => renderSignUpComponents2(
       components,
       formValues,
@@ -9503,7 +9613,7 @@ var BaseSignUpContent = ({
       handleSubmit
     ]
   );
-  (0, import_react61.useEffect)(() => {
+  (0, import_react62.useEffect)(() => {
     if (isInitialized && !isFlowInitialized && !initializationAttemptedRef.current) {
       initializationAttemptedRef.current = true;
       (async () => {
@@ -9514,11 +9624,11 @@ var BaseSignUpContent = ({
           setCurrentFlow(response);
           setIsFlowInitialized(true);
           onFlowChange?.(response);
-          if (response.flowStatus === import_browser59.EmbeddedFlowStatus.Complete) {
+          if (response.flowStatus === import_browser60.EmbeddedFlowStatus.Complete) {
             onComplete?.(response);
             return;
           }
-          if (response.flowStatus === import_browser59.EmbeddedFlowStatus.Incomplete) {
+          if (response.flowStatus === import_browser60.EmbeddedFlowStatus.Incomplete) {
             setupFormFields(response);
           }
         } catch (err) {
@@ -9596,11 +9706,11 @@ var BaseSignUp = ({ showLogo = true, ...rest }) => {
 var BaseSignUp_default = BaseSignUp;
 
 // src/components/presentation/auth/SignUp/v2/BaseSignUp.tsx
-var import_browser60 = require("@asgardeo/browser");
+var import_browser61 = require("@asgardeo/browser");
 var import_css39 = require("@emotion/css");
-var import_react62 = require("react");
+var import_react63 = require("react");
 var import_jsx_runtime68 = require("react/jsx-runtime");
-var logger7 = (0, import_browser60.createPackageComponentLogger)(
+var logger7 = (0, import_browser61.createPackageComponentLogger)(
   "@asgardeo/react",
   "BaseSignUp"
 );
@@ -9629,20 +9739,20 @@ var BaseSignUpContent2 = ({
   const { subtitle: flowSubtitle, title: flowTitle, messages: flowMessages, addMessage, clearMessages } = useFlow_default();
   useAsgardeo_default();
   const styles = BaseSignUp_styles_default(theme, colorScheme);
-  const [isLoading, setIsLoading] = (0, import_react62.useState)(false);
-  const [isFlowInitialized, setIsFlowInitialized] = (0, import_react62.useState)(false);
-  const [currentFlow, setCurrentFlow] = (0, import_react62.useState)(null);
-  const [apiError, setApiError] = (0, import_react62.useState)(null);
-  const [passkeyState, setPasskeyState] = (0, import_react62.useState)({
+  const [isLoading, setIsLoading] = (0, import_react63.useState)(false);
+  const [isFlowInitialized, setIsFlowInitialized] = (0, import_react63.useState)(false);
+  const [currentFlow, setCurrentFlow] = (0, import_react63.useState)(null);
+  const [apiError, setApiError] = (0, import_react63.useState)(null);
+  const [passkeyState, setPasskeyState] = (0, import_react63.useState)({
     actionId: null,
     creationOptions: null,
     error: null,
     flowId: null,
     isActive: false
   });
-  const initializationAttemptedRef = (0, import_react62.useRef)(false);
-  const passkeyProcessedRef = (0, import_react62.useRef)(false);
-  const handleError = (0, import_react62.useCallback)(
+  const initializationAttemptedRef = (0, import_react63.useRef)(false);
+  const passkeyProcessedRef = (0, import_react63.useRef)(false);
+  const handleError = (0, import_react63.useCallback)(
     (error) => {
       const errorMessage = error?.failureReason || extractErrorMessage(error, t);
       setApiError(error instanceof Error ? error : new Error(errorMessage));
@@ -9654,7 +9764,7 @@ var BaseSignUpContent2 = ({
     },
     [t, addMessage, clearMessages]
   );
-  const normalizeFlowResponseLocal = (0, import_react62.useCallback)(
+  const normalizeFlowResponseLocal = (0, import_react63.useCallback)(
     (response) => {
       if (response?.data?.components && Array.isArray(response.data.components)) {
         return response;
@@ -9676,12 +9786,12 @@ var BaseSignUpContent2 = ({
     },
     [t, children]
   );
-  const extractFormFields = (0, import_react62.useCallback)(
+  const extractFormFields = (0, import_react63.useCallback)(
     (components) => {
       const fields = [];
       const processComponents = (comps) => {
         comps.forEach((component) => {
-          if (component.type === import_browser60.EmbeddedFlowComponentTypeV2.TextInput || component.type === import_browser60.EmbeddedFlowComponentTypeV2.PasswordInput || component.type === import_browser60.EmbeddedFlowComponentTypeV2.EmailInput || component.type === import_browser60.EmbeddedFlowComponentTypeV2.Select) {
+          if (component.type === import_browser61.EmbeddedFlowComponentTypeV2.TextInput || component.type === import_browser61.EmbeddedFlowComponentTypeV2.PasswordInput || component.type === import_browser61.EmbeddedFlowComponentTypeV2.EmailInput || component.type === import_browser61.EmbeddedFlowComponentTypeV2.Select) {
             const fieldName = component.ref || component.id;
             fields.push({
               initialValue: "",
@@ -9691,7 +9801,7 @@ var BaseSignUpContent2 = ({
                 if (component.required && (!value || value.trim() === "")) {
                   return t("validations.required.field.error");
                 }
-                if ((component.type === import_browser60.EmbeddedFlowComponentTypeV2.EmailInput || component.variant === "EMAIL") && value && !/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(value)) {
+                if ((component.type === import_browser61.EmbeddedFlowComponentTypeV2.EmailInput || component.variant === "EMAIL") && value && !/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(value)) {
                   return t("field.email.invalid");
                 }
                 return null;
@@ -9727,7 +9837,7 @@ var BaseSignUpContent2 = ({
     touchAllFields,
     reset: resetForm
   } = form;
-  const setupFormFields = (0, import_react62.useCallback)(
+  const setupFormFields = (0, import_react63.useCallback)(
     (flowResponse) => {
       const fields = extractFormFields(flowResponse.data?.components || []);
       const initialValues = {};
@@ -9748,7 +9858,7 @@ var BaseSignUpContent2 = ({
     setFormTouched(name, true);
   };
   const handleRedirectionIfNeeded = (response) => {
-    if (response?.type === import_browser60.EmbeddedFlowResponseType.Redirection && response?.data?.redirectURL) {
+    if (response?.type === import_browser61.EmbeddedFlowResponseType.Redirection && response?.data?.redirectURL) {
       const redirectUrl = response.data.redirectURL;
       const popup = window.open(redirectUrl, "oauth_popup", "width=500,height=600,scrollbars=yes,resizable=yes");
       if (!popup) {
@@ -9788,9 +9898,9 @@ var BaseSignUpContent2 = ({
           try {
             const continueResponse = await onSubmit(payload);
             onFlowChange?.(continueResponse);
-            if (continueResponse.flowStatus === import_browser60.EmbeddedFlowStatus.Complete) {
+            if (continueResponse.flowStatus === import_browser61.EmbeddedFlowStatus.Complete) {
               onComplete?.(continueResponse);
-            } else if (continueResponse.flowStatus === import_browser60.EmbeddedFlowStatus.Incomplete) {
+            } else if (continueResponse.flowStatus === import_browser61.EmbeddedFlowStatus.Incomplete) {
               setCurrentFlow(continueResponse);
               setupFormFields(continueResponse);
             }
@@ -9841,9 +9951,9 @@ var BaseSignUpContent2 = ({
                 try {
                   const continueResponse = await onSubmit(payload);
                   onFlowChange?.(continueResponse);
-                  if (continueResponse.flowStatus === import_browser60.EmbeddedFlowStatus.Complete) {
+                  if (continueResponse.flowStatus === import_browser61.EmbeddedFlowStatus.Complete) {
                     onComplete?.(continueResponse);
-                  } else if (continueResponse.flowStatus === import_browser60.EmbeddedFlowStatus.Incomplete) {
+                  } else if (continueResponse.flowStatus === import_browser61.EmbeddedFlowStatus.Incomplete) {
                     setCurrentFlow(continueResponse);
                     setupFormFields(continueResponse);
                   }
@@ -9897,11 +10007,11 @@ var BaseSignUpContent2 = ({
       const rawResponse = await onSubmit(payload);
       const response = normalizeFlowResponseLocal(rawResponse);
       onFlowChange?.(response);
-      if (response.flowStatus === import_browser60.EmbeddedFlowStatus.Complete) {
+      if (response.flowStatus === import_browser61.EmbeddedFlowStatus.Complete) {
         onComplete?.(response);
         return;
       }
-      if (response.flowStatus === import_browser60.EmbeddedFlowStatus.Incomplete) {
+      if (response.flowStatus === import_browser61.EmbeddedFlowStatus.Incomplete) {
         if (handleRedirectionIfNeeded(response)) {
           return;
         }
@@ -9929,7 +10039,7 @@ var BaseSignUpContent2 = ({
       setIsLoading(false);
     }
   };
-  (0, import_react62.useEffect)(() => {
+  (0, import_react63.useEffect)(() => {
     if (!passkeyState.isActive || !passkeyState.creationOptions || !passkeyState.flowId) {
       return;
     }
@@ -9954,7 +10064,7 @@ var BaseSignUpContent2 = ({
       const nextResponse = await onSubmit(payload);
       const processedResponse = normalizeFlowResponseLocal(nextResponse);
       onFlowChange?.(processedResponse);
-      if (processedResponse.flowStatus === import_browser60.EmbeddedFlowStatus.Complete) {
+      if (processedResponse.flowStatus === import_browser61.EmbeddedFlowStatus.Complete) {
         onComplete?.(processedResponse);
       } else {
         setCurrentFlow(processedResponse);
@@ -9971,31 +10081,31 @@ var BaseSignUpContent2 = ({
   }, [passkeyState.isActive, passkeyState.creationOptions, passkeyState.flowId]);
   const containerClasses = (0, import_css39.cx)(
     [
-      (0, import_browser60.withVendorCSSClassPrefix)("signup"),
-      (0, import_browser60.withVendorCSSClassPrefix)(`signup--${size}`),
-      (0, import_browser60.withVendorCSSClassPrefix)(`signup--${variant}`)
+      (0, import_browser61.withVendorCSSClassPrefix)("signup"),
+      (0, import_browser61.withVendorCSSClassPrefix)(`signup--${size}`),
+      (0, import_browser61.withVendorCSSClassPrefix)(`signup--${variant}`)
     ],
     className
   );
   const inputClasses = (0, import_css39.cx)(
     [
-      (0, import_browser60.withVendorCSSClassPrefix)("signup__input"),
-      size === "small" && (0, import_browser60.withVendorCSSClassPrefix)("signup__input--small"),
-      size === "large" && (0, import_browser60.withVendorCSSClassPrefix)("signup__input--large")
+      (0, import_browser61.withVendorCSSClassPrefix)("signup__input"),
+      size === "small" && (0, import_browser61.withVendorCSSClassPrefix)("signup__input--small"),
+      size === "large" && (0, import_browser61.withVendorCSSClassPrefix)("signup__input--large")
     ],
     inputClassName
   );
   const buttonClasses = (0, import_css39.cx)(
     [
-      (0, import_browser60.withVendorCSSClassPrefix)("signup__button"),
-      size === "small" && (0, import_browser60.withVendorCSSClassPrefix)("signup__button--small"),
-      size === "large" && (0, import_browser60.withVendorCSSClassPrefix)("signup__button--large")
+      (0, import_browser61.withVendorCSSClassPrefix)("signup__button"),
+      size === "small" && (0, import_browser61.withVendorCSSClassPrefix)("signup__button--small"),
+      size === "large" && (0, import_browser61.withVendorCSSClassPrefix)("signup__button--large")
     ],
     buttonClassName
   );
-  const errorClasses = (0, import_css39.cx)([(0, import_browser60.withVendorCSSClassPrefix)("signup__error")], errorClassName);
-  const messageClasses = (0, import_css39.cx)([(0, import_browser60.withVendorCSSClassPrefix)("signup__messages")], messageClassName);
-  const renderComponents = (0, import_react62.useCallback)(
+  const errorClasses = (0, import_css39.cx)([(0, import_browser61.withVendorCSSClassPrefix)("signup__error")], errorClassName);
+  const messageClasses = (0, import_css39.cx)([(0, import_browser61.withVendorCSSClassPrefix)("signup__messages")], messageClassName);
+  const renderComponents = (0, import_react63.useCallback)(
     (components) => renderSignUpComponents(
       components,
       formValues,
@@ -10035,7 +10145,7 @@ var BaseSignUpContent2 = ({
       state: urlParams.get("state")
     };
   };
-  (0, import_react62.useEffect)(() => {
+  (0, import_react63.useEffect)(() => {
     const urlParams = getUrlParams2();
     if (urlParams.code || urlParams.state) {
       return;
@@ -10052,11 +10162,11 @@ var BaseSignUpContent2 = ({
           setCurrentFlow(response);
           setIsFlowInitialized(true);
           onFlowChange?.(response);
-          if (response.flowStatus === import_browser60.EmbeddedFlowStatus.Complete) {
+          if (response.flowStatus === import_browser61.EmbeddedFlowStatus.Complete) {
             onComplete?.(response);
             return;
           }
-          if (response.flowStatus === import_browser60.EmbeddedFlowStatus.Incomplete) {
+          if (response.flowStatus === import_browser61.EmbeddedFlowStatus.Incomplete) {
             setupFormFields(response);
           }
         } catch (err) {
@@ -10151,7 +10261,7 @@ var BaseSignUp_default2 = BaseSignUp2;
 var import_jsx_runtime69 = require("react/jsx-runtime");
 var BaseSignUp3 = (props) => {
   const { platform } = useAsgardeo_default();
-  if (platform === import_browser61.Platform.AsgardeoV2) {
+  if (platform === import_browser62.Platform.AsgardeoV2) {
     return /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(BaseSignUp_default2, { ...props });
   }
   return /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(BaseSignUp_default, { ...props });
@@ -10159,10 +10269,10 @@ var BaseSignUp3 = (props) => {
 var BaseSignUp_default3 = BaseSignUp3;
 
 // src/components/presentation/auth/SignUp/SignUp.tsx
-var import_browser64 = require("@asgardeo/browser");
+var import_browser65 = require("@asgardeo/browser");
 
 // src/components/presentation/auth/SignUp/v1/SignUp.tsx
-var import_browser62 = require("@asgardeo/browser");
+var import_browser63 = require("@asgardeo/browser");
 var import_jsx_runtime70 = require("react/jsx-runtime");
 var SignUp = ({
   className,
@@ -10177,17 +10287,17 @@ var SignUp = ({
   const { signUp, isInitialized } = useAsgardeo_default();
   const handleInitialize = async (payload) => {
     const initialPayload = payload || {
-      flowType: import_browser62.EmbeddedFlowType.Registration
+      flowType: import_browser63.EmbeddedFlowType.Registration
     };
     return await signUp(initialPayload);
   };
   const handleOnSubmit = async (payload) => await signUp(payload);
   const handleComplete = (response) => {
     onComplete?.(response);
-    if (shouldRedirectAfterSignUp && response?.type !== import_browser62.EmbeddedFlowResponseType.Redirection && afterSignUpUrl) {
+    if (shouldRedirectAfterSignUp && response?.type !== import_browser63.EmbeddedFlowResponseType.Redirection && afterSignUpUrl) {
       window.location.href = afterSignUpUrl;
     }
-    if (shouldRedirectAfterSignUp && response?.type === import_browser62.EmbeddedFlowResponseType.Redirection && response?.data?.redirectURL && !response.data.redirectURL.includes("oauth") && // Not a social provider redirect
+    if (shouldRedirectAfterSignUp && response?.type === import_browser63.EmbeddedFlowResponseType.Redirection && response?.data?.redirectURL && !response.data.redirectURL.includes("oauth") && // Not a social provider redirect
     !response.data.redirectURL.includes("auth")) {
       window.location.href = response.data.redirectURL;
     }
@@ -10214,7 +10324,7 @@ var SignUp = ({
 var SignUp_default = SignUp;
 
 // src/components/presentation/auth/SignUp/v2/SignUp.tsx
-var import_browser63 = require("@asgardeo/browser");
+var import_browser64 = require("@asgardeo/browser");
 var import_jsx_runtime71 = require("react/jsx-runtime");
 var SignUp2 = ({
   className,
@@ -10232,7 +10342,7 @@ var SignUp2 = ({
     const applicationIdFromUrl = urlParams.get("applicationId");
     const effectiveApplicationId = applicationId || applicationIdFromUrl;
     const initialPayload = payload || {
-      flowType: import_browser63.EmbeddedFlowType.Registration,
+      flowType: import_browser64.EmbeddedFlowType.Registration,
       ...effectiveApplicationId && { applicationId: effectiveApplicationId }
     };
     return await signUp(initialPayload);
@@ -10245,10 +10355,10 @@ var SignUp2 = ({
       window.location.href = oauthRedirectUrl;
       return;
     }
-    if (shouldRedirectAfterSignUp && response?.type !== import_browser63.EmbeddedFlowResponseType.Redirection && afterSignUpUrl) {
+    if (shouldRedirectAfterSignUp && response?.type !== import_browser64.EmbeddedFlowResponseType.Redirection && afterSignUpUrl) {
       window.location.href = afterSignUpUrl;
     }
-    if (shouldRedirectAfterSignUp && response?.type === import_browser63.EmbeddedFlowResponseType.Redirection && response?.data?.redirectURL && !response.data.redirectURL.includes("oauth") && // Not a social provider redirect
+    if (shouldRedirectAfterSignUp && response?.type === import_browser64.EmbeddedFlowResponseType.Redirection && response?.data?.redirectURL && !response.data.redirectURL.includes("oauth") && // Not a social provider redirect
     !response.data.redirectURL.includes("auth")) {
       window.location.href = response.data.redirectURL;
     }
@@ -10278,7 +10388,7 @@ var SignUp_default2 = SignUp2;
 var import_jsx_runtime72 = require("react/jsx-runtime");
 var SignUp3 = (props) => {
   const { platform } = useAsgardeo_default();
-  if (platform === import_browser64.Platform.AsgardeoV2) {
+  if (platform === import_browser65.Platform.AsgardeoV2) {
     return /* @__PURE__ */ (0, import_jsx_runtime72.jsx)(SignUp_default2, { ...props });
   }
   return /* @__PURE__ */ (0, import_jsx_runtime72.jsx)(SignUp_default, { ...props });
@@ -10286,17 +10396,17 @@ var SignUp3 = (props) => {
 var SignUp_default3 = SignUp3;
 
 // src/components/presentation/auth/InviteUser/v2/InviteUser.tsx
-var import_browser66 = require("@asgardeo/browser");
+var import_browser67 = require("@asgardeo/browser");
 
 // src/components/presentation/auth/InviteUser/v2/BaseInviteUser.tsx
-var import_browser65 = require("@asgardeo/browser");
+var import_browser66 = require("@asgardeo/browser");
 var import_css41 = require("@emotion/css");
-var import_react64 = require("react");
+var import_react65 = require("react");
 
 // src/components/presentation/auth/InviteUser/v2/BaseInviteUser.styles.ts
 var import_css40 = require("@emotion/css");
-var import_react63 = require("react");
-var useStyles18 = (theme, colorScheme) => (0, import_react63.useMemo)(() => {
+var import_react64 = require("react");
+var useStyles18 = (theme, colorScheme) => (0, import_react64.useMemo)(() => {
   const card = import_css40.css`
       background: ${theme.vars.colors.background.surface};
       border-radius: ${theme.vars.borderRadius.large};
@@ -10350,18 +10460,18 @@ var BaseInviteUser = ({
   const { t } = useTranslation_default();
   const { theme } = useTheme_default();
   const styles = BaseInviteUser_styles_default(theme, theme.vars.colors.text.primary);
-  const [isLoading, setIsLoading] = (0, import_react64.useState)(false);
-  const [isFlowInitialized, setIsFlowInitialized] = (0, import_react64.useState)(false);
-  const [currentFlow, setCurrentFlow] = (0, import_react64.useState)(null);
-  const [apiError, setApiError] = (0, import_react64.useState)(null);
-  const [formValues, setFormValues] = (0, import_react64.useState)({});
-  const [formErrors, setFormErrors] = (0, import_react64.useState)({});
-  const [touchedFields, setTouchedFields] = (0, import_react64.useState)({});
-  const [inviteLink, setInviteLink] = (0, import_react64.useState)();
-  const [inviteLinkCopied, setInviteLinkCopied] = (0, import_react64.useState)(false);
-  const [isFormValid, setIsFormValid] = (0, import_react64.useState)(true);
-  const initializationAttemptedRef = (0, import_react64.useRef)(false);
-  const handleError = (0, import_react64.useCallback)(
+  const [isLoading, setIsLoading] = (0, import_react65.useState)(false);
+  const [isFlowInitialized, setIsFlowInitialized] = (0, import_react65.useState)(false);
+  const [currentFlow, setCurrentFlow] = (0, import_react65.useState)(null);
+  const [apiError, setApiError] = (0, import_react65.useState)(null);
+  const [formValues, setFormValues] = (0, import_react65.useState)({});
+  const [formErrors, setFormErrors] = (0, import_react65.useState)({});
+  const [touchedFields, setTouchedFields] = (0, import_react65.useState)({});
+  const [inviteLink, setInviteLink] = (0, import_react65.useState)();
+  const [inviteLinkCopied, setInviteLinkCopied] = (0, import_react65.useState)(false);
+  const [isFormValid, setIsFormValid] = (0, import_react65.useState)(true);
+  const initializationAttemptedRef = (0, import_react65.useRef)(false);
+  const handleError = (0, import_react65.useCallback)(
     (error) => {
       const errorMessage = error?.failureReason || extractErrorMessage(error, t, "components.inviteUser.errors.generic");
       setApiError(error instanceof Error ? error : new Error(errorMessage));
@@ -10369,7 +10479,7 @@ var BaseInviteUser = ({
     },
     [t, onError]
   );
-  const normalizeFlowResponseLocal = (0, import_react64.useCallback)(
+  const normalizeFlowResponseLocal = (0, import_react65.useCallback)(
     (response) => {
       if (!response?.data?.meta?.components) {
         return response;
@@ -10392,7 +10502,7 @@ var BaseInviteUser = ({
     },
     [t, children]
   );
-  const handleInputChange = (0, import_react64.useCallback)((name, value) => {
+  const handleInputChange = (0, import_react65.useCallback)((name, value) => {
     setFormValues((prev) => ({ ...prev, [name]: value }));
     setFormErrors((prev) => {
       const newErrors = { ...prev };
@@ -10400,10 +10510,10 @@ var BaseInviteUser = ({
       return newErrors;
     });
   }, []);
-  const handleInputBlur = (0, import_react64.useCallback)((name) => {
+  const handleInputBlur = (0, import_react65.useCallback)((name) => {
     setTouchedFields((prev) => ({ ...prev, [name]: true }));
   }, []);
-  const validateForm = (0, import_react64.useCallback)(
+  const validateForm = (0, import_react65.useCallback)(
     (components2) => {
       const errors = {};
       const validateComponents = (comps) => {
@@ -10427,7 +10537,7 @@ var BaseInviteUser = ({
     },
     [formValues]
   );
-  const handleSubmit = (0, import_react64.useCallback)(
+  const handleSubmit = (0, import_react65.useCallback)(
     async (component, data) => {
       if (!currentFlow) {
         return;
@@ -10490,7 +10600,7 @@ var BaseInviteUser = ({
       normalizeFlowResponseLocal
     ]
   );
-  const copyInviteLink = (0, import_react64.useCallback)(async () => {
+  const copyInviteLink = (0, import_react65.useCallback)(async () => {
     if (!inviteLink) return;
     try {
       await navigator.clipboard.writeText(inviteLink);
@@ -10507,7 +10617,7 @@ var BaseInviteUser = ({
       setTimeout(() => setInviteLinkCopied(false), 3e3);
     }
   }, [inviteLink]);
-  const resetFlow = (0, import_react64.useCallback)(() => {
+  const resetFlow = (0, import_react65.useCallback)(() => {
     setIsFlowInitialized(false);
     setCurrentFlow(null);
     setApiError(null);
@@ -10518,7 +10628,7 @@ var BaseInviteUser = ({
     setInviteLinkCopied(false);
     initializationAttemptedRef.current = false;
   }, []);
-  (0, import_react64.useEffect)(() => {
+  (0, import_react65.useEffect)(() => {
     if (isInitialized && !isFlowInitialized && !initializationAttemptedRef.current) {
       initializationAttemptedRef.current = true;
       (async () => {
@@ -10526,7 +10636,7 @@ var BaseInviteUser = ({
         setApiError(null);
         try {
           const payload = {
-            flowType: import_browser65.EmbeddedFlowType.UserOnboarding,
+            flowType: import_browser66.EmbeddedFlowType.UserOnboarding,
             verbose: true
           };
           const rawResponse = await onInitialize(payload);
@@ -10545,7 +10655,7 @@ var BaseInviteUser = ({
       })();
     }
   }, [isInitialized, isFlowInitialized, onInitialize, onFlowChange, handleError, normalizeFlowResponseLocal]);
-  (0, import_react64.useEffect)(() => {
+  (0, import_react65.useEffect)(() => {
     if (currentFlow && isFlowInitialized) {
       const components2 = currentFlow.data?.components || [];
       if (components2.length > 0) {
@@ -10554,7 +10664,7 @@ var BaseInviteUser = ({
       }
     }
   }, [formValues, currentFlow, isFlowInitialized, validateForm]);
-  const extractHeadings = (0, import_react64.useCallback)((components2) => {
+  const extractHeadings = (0, import_react65.useCallback)((components2) => {
     let title2;
     let subtitle2;
     components2.forEach((comp) => {
@@ -10568,13 +10678,13 @@ var BaseInviteUser = ({
     });
     return { subtitle: subtitle2, title: title2 };
   }, []);
-  const filterHeadings = (0, import_react64.useCallback)(
+  const filterHeadings = (0, import_react65.useCallback)(
     (components2) => components2.filter(
       (comp) => !(comp.type === "TEXT" && (comp.variant === "HEADING_1" || comp.variant === "HEADING_2"))
     ),
     []
   );
-  const renderComponents = (0, import_react64.useCallback)(
+  const renderComponents = (0, import_react65.useCallback)(
     (components2) => renderInviteUserComponents(
       components2,
       formValues,
@@ -10706,7 +10816,7 @@ var InviteUser = ({
     const response = await http2.request({
       data: {
         ...payload,
-        flowType: import_browser66.EmbeddedFlowType.UserOnboarding,
+        flowType: import_browser67.EmbeddedFlowType.UserOnboarding,
         verbose: true
       },
       headers: {
@@ -10754,16 +10864,16 @@ var InviteUser = ({
 var InviteUser_default = InviteUser;
 
 // src/components/presentation/auth/AcceptInvite/v2/AcceptInvite.tsx
-var import_react67 = require("react");
+var import_react68 = require("react");
 
 // src/components/presentation/auth/AcceptInvite/v2/BaseAcceptInvite.tsx
 var import_css43 = require("@emotion/css");
-var import_react66 = require("react");
+var import_react67 = require("react");
 
 // src/components/presentation/auth/AcceptInvite/v2/BaseAcceptInvite.styles.ts
 var import_css42 = require("@emotion/css");
-var import_react65 = require("react");
-var useStyles19 = (theme, colorScheme) => (0, import_react65.useMemo)(() => {
+var import_react66 = require("react");
+var useStyles19 = (theme, colorScheme) => (0, import_react66.useMemo)(() => {
   const card = import_css42.css`
       background: ${theme.vars.colors.background.surface};
       border-radius: ${theme.vars.borderRadius.large};
@@ -10818,19 +10928,19 @@ var BaseAcceptInvite = ({
   const { t } = useTranslation_default();
   const { theme } = useTheme_default();
   const styles = BaseAcceptInvite_styles_default(theme, theme.vars.colors.text.primary);
-  const [isLoading, setIsLoading] = (0, import_react66.useState)(false);
-  const [isValidatingToken, setIsValidatingToken] = (0, import_react66.useState)(true);
-  const [isTokenInvalid, setIsTokenInvalid] = (0, import_react66.useState)(false);
-  const [isComplete, setIsComplete] = (0, import_react66.useState)(false);
-  const [currentFlow, setCurrentFlow] = (0, import_react66.useState)(null);
-  const [apiError, setApiError] = (0, import_react66.useState)(null);
-  const [formValues, setFormValues] = (0, import_react66.useState)({});
-  const [formErrors, setFormErrors] = (0, import_react66.useState)({});
-  const [touchedFields, setTouchedFields] = (0, import_react66.useState)({});
-  const [isFormValid, setIsFormValid] = (0, import_react66.useState)(true);
-  const [completionTitle, setCompletionTitle] = (0, import_react66.useState)(void 0);
-  const tokenValidationAttemptedRef = (0, import_react66.useRef)(false);
-  const handleError = (0, import_react66.useCallback)(
+  const [isLoading, setIsLoading] = (0, import_react67.useState)(false);
+  const [isValidatingToken, setIsValidatingToken] = (0, import_react67.useState)(true);
+  const [isTokenInvalid, setIsTokenInvalid] = (0, import_react67.useState)(false);
+  const [isComplete, setIsComplete] = (0, import_react67.useState)(false);
+  const [currentFlow, setCurrentFlow] = (0, import_react67.useState)(null);
+  const [apiError, setApiError] = (0, import_react67.useState)(null);
+  const [formValues, setFormValues] = (0, import_react67.useState)({});
+  const [formErrors, setFormErrors] = (0, import_react67.useState)({});
+  const [touchedFields, setTouchedFields] = (0, import_react67.useState)({});
+  const [isFormValid, setIsFormValid] = (0, import_react67.useState)(true);
+  const [completionTitle, setCompletionTitle] = (0, import_react67.useState)(void 0);
+  const tokenValidationAttemptedRef = (0, import_react67.useRef)(false);
+  const handleError = (0, import_react67.useCallback)(
     (error) => {
       const errorMessage = error?.failureReason || extractErrorMessage(error, t, "components.acceptInvite.errors.generic");
       setApiError(error instanceof Error ? error : new Error(errorMessage));
@@ -10838,7 +10948,7 @@ var BaseAcceptInvite = ({
     },
     [t, onError]
   );
-  const normalizeFlowResponseLocal = (0, import_react66.useCallback)(
+  const normalizeFlowResponseLocal = (0, import_react67.useCallback)(
     (response) => {
       if (!response?.data?.meta?.components) {
         return response;
@@ -10861,7 +10971,39 @@ var BaseAcceptInvite = ({
     },
     [t, children]
   );
-  const handleInputChange = (0, import_react66.useCallback)((name, value) => {
+  useOAuthCallback({
+    currentFlowId: flowId ?? null,
+    isInitialized: true,
+    onComplete: () => {
+      setIsComplete(true);
+      setIsValidatingToken(false);
+      onComplete?.();
+    },
+    onError: (error) => {
+      setIsTokenInvalid(true);
+      setIsValidatingToken(false);
+      handleError(error);
+    },
+    onFlowChange: (response) => {
+      onFlowChange?.(response);
+      if (response.flowStatus !== "COMPLETE") {
+        setCurrentFlow(response);
+        setFormValues({});
+        setFormErrors({});
+        setTouchedFields({});
+      }
+    },
+    onProcessingStart: () => {
+      setIsValidatingToken(true);
+    },
+    onSubmit: async (payload) => {
+      const rawResponse = await onSubmit(payload);
+      const response = normalizeFlowResponseLocal(rawResponse);
+      return response;
+    },
+    tokenValidationAttemptedRef
+  });
+  const handleInputChange = (0, import_react67.useCallback)((name, value) => {
     setFormValues((prev) => ({ ...prev, [name]: value }));
     setFormErrors((prev) => {
       const newErrors = { ...prev };
@@ -10869,10 +11011,10 @@ var BaseAcceptInvite = ({
       return newErrors;
     });
   }, []);
-  const handleInputBlur = (0, import_react66.useCallback)((name) => {
+  const handleInputBlur = (0, import_react67.useCallback)((name) => {
     setTouchedFields((prev) => ({ ...prev, [name]: true }));
   }, []);
-  const validateForm = (0, import_react66.useCallback)(
+  const validateForm = (0, import_react67.useCallback)(
     (components2) => {
       const errors = {};
       const validateComponents = (comps) => {
@@ -10893,7 +11035,7 @@ var BaseAcceptInvite = ({
     },
     [formValues]
   );
-  const handleSubmit = (0, import_react66.useCallback)(
+  const handleSubmit = (0, import_react67.useCallback)(
     async (component, data) => {
       if (!currentFlow) {
         return;
@@ -10926,6 +11068,13 @@ var BaseAcceptInvite = ({
         const rawResponse = await onSubmit(payload);
         const response = normalizeFlowResponseLocal(rawResponse);
         onFlowChange?.(response);
+        if (response.type === "REDIRECTION") {
+          const redirectURL = response.data?.redirectURL || response?.redirectURL;
+          if (redirectURL && typeof window !== "undefined") {
+            initiateOAuthRedirect(redirectURL);
+            return;
+          }
+        }
         if (currentFlow?.data?.components || currentFlow?.data?.meta?.components) {
           const currentComponents = currentFlow.data.components || currentFlow.data.meta?.components || [];
           const heading = currentComponents.find(
@@ -10965,13 +11114,14 @@ var BaseAcceptInvite = ({
       normalizeFlowResponseLocal
     ]
   );
-  (0, import_react66.useEffect)(() => {
-    if (!flowId || !inviteToken || tokenValidationAttemptedRef.current) {
-      if (!flowId || !inviteToken) {
-        setIsValidatingToken(false);
-        setIsTokenInvalid(true);
-        handleError(new Error("Invalid invite link. Missing flowId or inviteToken."));
-      }
+  (0, import_react67.useEffect)(() => {
+    if (tokenValidationAttemptedRef.current) {
+      return;
+    }
+    if (!flowId || !inviteToken) {
+      setIsValidatingToken(false);
+      setIsTokenInvalid(true);
+      handleError(new Error("Invalid invite link. Missing flowId or inviteToken."));
       return;
     }
     tokenValidationAttemptedRef.current = true;
@@ -10979,6 +11129,9 @@ var BaseAcceptInvite = ({
       setIsValidatingToken(true);
       setApiError(null);
       try {
+        if (flowId) {
+          sessionStorage.setItem("asgardeo_flow_id", flowId);
+        }
         const payload = {
           flowId,
           inputs: {
@@ -11003,7 +11156,7 @@ var BaseAcceptInvite = ({
       }
     })();
   }, [flowId, inviteToken, onSubmit, onFlowChange, handleError, normalizeFlowResponseLocal]);
-  const extractHeadings = (0, import_react66.useCallback)((components2) => {
+  const extractHeadings = (0, import_react67.useCallback)((components2) => {
     let title2;
     let subtitle2;
     components2.forEach((comp) => {
@@ -11017,13 +11170,13 @@ var BaseAcceptInvite = ({
     });
     return { subtitle: subtitle2, title: title2 };
   }, []);
-  const filterHeadings = (0, import_react66.useCallback)(
+  const filterHeadings = (0, import_react67.useCallback)(
     (components2) => components2.filter(
       (comp) => !(comp.type === "TEXT" && (comp.variant === "HEADING_1" || comp.variant === "HEADING_2"))
     ),
     []
   );
-  const renderComponents = (0, import_react66.useCallback)(
+  const renderComponents = (0, import_react67.useCallback)(
     (components2) => renderInviteUserComponents(
       components2,
       formValues,
@@ -11154,10 +11307,10 @@ var AcceptInvite = ({
   showTitle = true,
   showSubtitle = true
 }) => {
-  const { flowId: urlFlowId, inviteToken: urlInviteToken } = (0, import_react67.useMemo)(() => getUrlParams(), []);
+  const { flowId: urlFlowId, inviteToken: urlInviteToken } = (0, import_react68.useMemo)(() => getUrlParams(), []);
   const flowId = flowIdProp || urlFlowId;
   const inviteToken = inviteTokenProp || urlInviteToken;
-  const apiBaseUrl = (0, import_react67.useMemo)(() => {
+  const apiBaseUrl = (0, import_react68.useMemo)(() => {
     if (baseUrl) {
       return baseUrl;
     }
@@ -11205,6 +11358,95 @@ var AcceptInvite = ({
 };
 var AcceptInvite_default = AcceptInvite;
 
+// src/components/auth/Callback/Callback.tsx
+var import_browser68 = require("@asgardeo/browser");
+var import_react69 = require("react");
+var Callback = ({ onNavigate, onError }) => {
+  const processingRef = (0, import_react69.useRef)(false);
+  const navigate6 = (path) => {
+    if (onNavigate) {
+      onNavigate(path);
+    } else {
+      (0, import_browser68.navigate)(path);
+    }
+  };
+  (0, import_react69.useEffect)(() => {
+    const processOAuthCallback = () => {
+      if (processingRef.current) {
+        return;
+      }
+      processingRef.current = true;
+      let returnPath = "/";
+      try {
+        const urlParams = new URLSearchParams(window.location.search);
+        const code = urlParams.get("code");
+        const state = urlParams.get("state");
+        const nonce = urlParams.get("nonce");
+        const oauthError = urlParams.get("error");
+        const errorDescription = urlParams.get("error_description");
+        if (!state) {
+          throw new Error("Missing OAuth state parameter - possible security issue");
+        }
+        const storedData = sessionStorage.getItem(`asgardeo_oauth_${state}`);
+        if (!storedData) {
+          if (oauthError) {
+            const errorMsg = errorDescription || oauthError || "OAuth authentication failed";
+            const err = new Error(errorMsg);
+            onError?.(err);
+            const params2 = new URLSearchParams();
+            params2.set("error", oauthError);
+            if (errorDescription) {
+              params2.set("error_description", errorDescription);
+            }
+            navigate6(`/?${params2.toString()}`);
+            return;
+          }
+          throw new Error("Invalid OAuth state - possible CSRF attack");
+        }
+        const { path, timestamp } = JSON.parse(storedData);
+        returnPath = path || "/";
+        const MAX_STATE_AGE = 6e5;
+        if (Date.now() - timestamp > MAX_STATE_AGE) {
+          sessionStorage.removeItem(`asgardeo_oauth_${state}`);
+          throw new Error("OAuth state expired - please try again");
+        }
+        sessionStorage.removeItem(`asgardeo_oauth_${state}`);
+        if (oauthError) {
+          const errorMsg = errorDescription || oauthError || "OAuth authentication failed";
+          const err = new Error(errorMsg);
+          onError?.(err);
+          const params2 = new URLSearchParams();
+          params2.set("error", oauthError);
+          if (errorDescription) {
+            params2.set("error_description", errorDescription);
+          }
+          navigate6(`${returnPath}?${params2.toString()}`);
+          return;
+        }
+        if (!code) {
+          throw new Error("Missing OAuth authorization code");
+        }
+        const params = new URLSearchParams();
+        params.set("code", code);
+        if (nonce) {
+          params.set("nonce", nonce);
+        }
+        navigate6(`${returnPath}?${params.toString()}`);
+      } catch (err) {
+        const errorMessage = err instanceof Error ? err.message : "OAuth callback processing failed";
+        console.error("OAuth callback error:", err);
+        onError?.(err instanceof Error ? err : new Error(errorMessage));
+        const params = new URLSearchParams();
+        params.set("error", "callback_error");
+        params.set("error_description", errorMessage);
+        navigate6(`${returnPath}?${params.toString()}`);
+      }
+    };
+    processOAuthCallback();
+  }, [onNavigate, onError]);
+  return null;
+};
+
 // src/components/presentation/User/BaseUser.tsx
 var import_jsx_runtime77 = require("react/jsx-runtime");
 var BaseUser = ({ user, children, fallback = null }) => {
@@ -11250,14 +11492,14 @@ Organization5.displayName = "Organization";
 var Organization_default = Organization5;
 
 // src/components/presentation/UserProfile/BaseUserProfile.tsx
-var import_browser72 = require("@asgardeo/browser");
+var import_browser74 = require("@asgardeo/browser");
 var import_css51 = require("@emotion/css");
-var import_react76 = require("react");
+var import_react78 = require("react");
 
 // src/components/presentation/UserProfile/BaseUserProfile.styles.ts
-var import_browser67 = require("@asgardeo/browser");
+var import_browser69 = require("@asgardeo/browser");
 var import_css44 = require("@emotion/css");
-var import_react68 = require("react");
+var import_react70 = require("react");
 var useStyles20 = (theme, colorScheme) => {
   const valuePlaceholder = import_css44.css`
     font-style: italic;
@@ -11302,7 +11544,7 @@ var useStyles20 = (theme, colorScheme) => {
     padding: ${theme.vars.spacing.unit};
     vertical-align: top;
   `;
-  return (0, import_react68.useMemo)(() => {
+  return (0, import_react70.useMemo)(() => {
     const root = import_css44.css`
       padding: calc(${theme.vars.spacing.unit} * 4);
       min-width: 600px;
@@ -11393,7 +11635,7 @@ var useStyles20 = (theme, colorScheme) => {
       max-width: 350px;
       text-align: start;
 
-      .${(0, import_browser67.withVendorCSSClassPrefix)("form-control")} {
+      .${(0, import_browser69.withVendorCSSClassPrefix)("form-control")} {
         margin-bottom: 0;
       }
 
@@ -11457,20 +11699,20 @@ var useStyles20 = (theme, colorScheme) => {
 var BaseUserProfile_styles_default = useStyles20;
 
 // src/utils/getMappedUserProfileValue.ts
-var import_browser68 = require("@asgardeo/browser");
+var import_browser70 = require("@asgardeo/browser");
 var getMappedUserProfileValue = (key, mappings, user) => {
   if (!key || !mappings || !user) {
     return void 0;
   }
   const mapping = mappings[key];
   if (!mapping) {
-    return (0, import_browser68.get)(user, key);
+    return (0, import_browser70.get)(user, key);
   }
   if (Array.isArray(mapping)) {
     let foundValue;
     let found = false;
     mapping.some((path) => {
-      const value = (0, import_browser68.get)(user, path);
+      const value = (0, import_browser70.get)(user, path);
       if (value !== void 0 && value !== null && value !== "") {
         foundValue = value;
         found = true;
@@ -11480,7 +11722,7 @@ var getMappedUserProfileValue = (key, mappings, user) => {
     });
     return found ? foundValue : void 0;
   }
-  return (0, import_browser68.get)(user, mapping);
+  return (0, import_browser70.get)(user, mapping);
 };
 var getMappedUserProfileValue_default = getMappedUserProfileValue;
 
@@ -11510,14 +11752,14 @@ var getDisplayName = (mergedMappings, user, displayAttributes) => {
 var getDisplayName_default = getDisplayName;
 
 // src/components/primitives/Avatar/Avatar.tsx
-var import_browser69 = require("@asgardeo/browser");
+var import_browser71 = require("@asgardeo/browser");
 var import_css46 = require("@emotion/css");
-var import_react70 = require("react");
+var import_react72 = require("react");
 
 // src/components/primitives/Avatar/Avatar.styles.ts
 var import_css45 = require("@emotion/css");
-var import_react69 = require("react");
-var useStyles21 = (theme, colorScheme, size, variant, backgroundColor) => (0, import_react69.useMemo)(() => {
+var import_react71 = require("react");
+var useStyles21 = (theme, colorScheme, size, variant, backgroundColor) => (0, import_react71.useMemo)(() => {
   const baseAvatar = import_css45.css`
       align-items: center;
       background: ${backgroundColor || theme.vars.colors.background.surface};
@@ -11610,7 +11852,7 @@ var Avatar = ({
     const colors = generateColor(seed);
     return `linear-gradient(${angle}deg, ${colors})`;
   };
-  const backgroundColor = (0, import_react70.useMemo)(() => {
+  const backgroundColor = (0, import_react72.useMemo)(() => {
     if (!name || imageUrl) {
       return void 0;
     }
@@ -11632,7 +11874,7 @@ var Avatar = ({
         {
           src: imageUrl,
           alt,
-          className: (0, import_css46.cx)((0, import_browser69.withVendorCSSClassPrefix)((0, import_browser69.bem)("avatar", "image")), styles["image"])
+          className: (0, import_css46.cx)((0, import_browser71.withVendorCSSClassPrefix)((0, import_browser71.bem)("avatar", "image")), styles["image"])
         }
       );
     }
@@ -11640,14 +11882,14 @@ var Avatar = ({
       return getInitials(name);
     }
     if (isLoading) {
-      return /* @__PURE__ */ (0, import_jsx_runtime81.jsx)("div", { className: (0, import_css46.cx)((0, import_browser69.withVendorCSSClassPrefix)((0, import_browser69.bem)("avatar", "skeleton")), styles["skeleton"]) });
+      return /* @__PURE__ */ (0, import_jsx_runtime81.jsx)("div", { className: (0, import_css46.cx)((0, import_browser71.withVendorCSSClassPrefix)((0, import_browser71.bem)("avatar", "skeleton")), styles["skeleton"]) });
     }
     return /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(
       "svg",
       {
         xmlns: "http://www.w3.org/2000/svg",
         viewBox: "0 0 640 640",
-        className: (0, import_css46.cx)((0, import_browser69.withVendorCSSClassPrefix)((0, import_browser69.bem)("avatar", "icon")), styles["icon"]),
+        className: (0, import_css46.cx)((0, import_browser71.withVendorCSSClassPrefix)((0, import_browser71.bem)("avatar", "icon")), styles["icon"]),
         children: /* @__PURE__ */ (0, import_jsx_runtime81.jsx)("path", { d: "M240 192C240 147.8 275.8 112 320 112C364.2 112 400 147.8 400 192C400 236.2 364.2 272 320 272C275.8 272 240 236.2 240 192zM448 192C448 121.3 390.7 64 320 64C249.3 64 192 121.3 192 192C192 262.7 249.3 320 320 320C390.7 320 448 262.7 448 192zM144 544C144 473.3 201.3 416 272 416L368 416C438.7 416 496 473.3 496 544L496 552C496 565.3 506.7 576 520 576C533.3 576 544 565.3 544 552L544 544C544 446.8 465.2 368 368 368L272 368C174.8 368 96 446.8 96 544L96 552C96 565.3 106.7 576 120 576C133.3 576 144 565.3 144 552L144 544z" })
       }
     );
@@ -11656,11 +11898,11 @@ var Avatar = ({
     "div",
     {
       className: (0, import_css46.cx)(
-        (0, import_browser69.withVendorCSSClassPrefix)((0, import_browser69.bem)("avatar")),
+        (0, import_browser71.withVendorCSSClassPrefix)((0, import_browser71.bem)("avatar")),
         styles["avatar"],
         styles["variant"],
-        (0, import_browser69.withVendorCSSClassPrefix)((0, import_browser69.bem)("avatar", null, variant)),
-        isDefaultState && (0, import_browser69.withVendorCSSClassPrefix)((0, import_browser69.bem)("avatar", "default")),
+        (0, import_browser71.withVendorCSSClassPrefix)((0, import_browser71.bem)("avatar", null, variant)),
+        isDefaultState && (0, import_browser71.withVendorCSSClassPrefix)((0, import_browser71.bem)("avatar", "default")),
         className
       ),
       children: renderContent()
@@ -11669,15 +11911,15 @@ var Avatar = ({
 };
 
 // src/components/primitives/Dialog/Dialog.tsx
-var import_browser70 = require("@asgardeo/browser");
+var import_browser72 = require("@asgardeo/browser");
 var import_css48 = require("@emotion/css");
-var import_react72 = require("@floating-ui/react");
-var import_react73 = require("react");
+var import_react74 = require("@floating-ui/react");
+var import_react75 = require("react");
 
 // src/components/primitives/Dialog/Dialog.styles.ts
 var import_css47 = require("@emotion/css");
-var import_react71 = require("react");
-var useStyles22 = (theme, colorScheme) => (0, import_react71.useMemo)(() => {
+var import_react73 = require("react");
+var useStyles22 = (theme, colorScheme) => (0, import_react73.useMemo)(() => {
   const overlay = import_css47.css`
       background-color: rgba(0, 0, 0, 0.5);
       display: flex;
@@ -11837,23 +12079,23 @@ function useDialog({
   open: controlledOpen,
   onOpenChange: setControlledOpen
 } = {}) {
-  const [uncontrolledOpen, setUncontrolledOpen] = (0, import_react73.useState)(initialOpen);
-  const [labelId, setLabelId] = (0, import_react73.useState)();
-  const [descriptionId, setDescriptionId] = (0, import_react73.useState)();
+  const [uncontrolledOpen, setUncontrolledOpen] = (0, import_react75.useState)(initialOpen);
+  const [labelId, setLabelId] = (0, import_react75.useState)();
+  const [descriptionId, setDescriptionId] = (0, import_react75.useState)();
   const open = controlledOpen ?? uncontrolledOpen;
   const setOpen = setControlledOpen ?? setUncontrolledOpen;
-  const data = (0, import_react72.useFloating)({
+  const data = (0, import_react74.useFloating)({
     onOpenChange: setOpen,
     open
   });
   const { context } = data;
-  const click = (0, import_react72.useClick)(context, {
+  const click = (0, import_react74.useClick)(context, {
     enabled: controlledOpen == null
   });
-  const dismiss = (0, import_react72.useDismiss)(context, { outsidePressEvent: "mousedown" });
-  const role = (0, import_react72.useRole)(context);
-  const interactions = (0, import_react72.useInteractions)([click, dismiss, role]);
-  return (0, import_react73.useMemo)(
+  const dismiss = (0, import_react74.useDismiss)(context, { outsidePressEvent: "mousedown" });
+  const role = (0, import_react74.useRole)(context);
+  const interactions = (0, import_react74.useInteractions)([click, dismiss, role]);
+  return (0, import_react75.useMemo)(
     () => ({
       open,
       setOpen,
@@ -11867,9 +12109,9 @@ function useDialog({
     [open, setOpen, interactions, data, labelId, descriptionId]
   );
 }
-var DialogContext = (0, import_react73.createContext)(null);
+var DialogContext = (0, import_react75.createContext)(null);
 var useDialogContext = () => {
-  const context = (0, import_react73.useContext)(DialogContext);
+  const context = (0, import_react75.useContext)(DialogContext);
   if (context == null) {
     throw new Error("Dialog components must be wrapped in <Dialog />");
   }
@@ -11879,13 +12121,13 @@ function Dialog({ children, ...options }) {
   const dialog = useDialog(options);
   return /* @__PURE__ */ (0, import_jsx_runtime86.jsx)(DialogContext.Provider, { value: dialog, children });
 }
-var DialogTrigger = (0, import_react73.forwardRef)(
+var DialogTrigger = (0, import_react75.forwardRef)(
   ({ children, asChild = false, ...props }, propRef) => {
     const context = useDialogContext();
     const childrenRef = children.ref;
-    const ref = (0, import_react72.useMergeRefs)([context.refs.setReference, propRef, childrenRef]);
-    if (asChild && (0, import_react73.isValidElement)(children)) {
-      return (0, import_react73.cloneElement)(
+    const ref = (0, import_react74.useMergeRefs)([context.refs.setReference, propRef, childrenRef]);
+    if (asChild && (0, import_react75.isValidElement)(children)) {
+      return (0, import_react75.cloneElement)(
         children,
         context.getReferenceProps({
           ref,
@@ -11898,23 +12140,23 @@ var DialogTrigger = (0, import_react73.forwardRef)(
     return /* @__PURE__ */ (0, import_jsx_runtime86.jsx)("button", { ref, "data-state": context.open ? "open" : "closed", ...context.getReferenceProps(props), children });
   }
 );
-var DialogContent = (0, import_react73.forwardRef)(
+var DialogContent = (0, import_react75.forwardRef)(
   (props, propRef) => {
     const { context: floatingContext, ...context } = useDialogContext();
     const { theme, colorScheme } = useTheme_default();
     const styles = Dialog_styles_default(theme, colorScheme);
-    const ref = (0, import_react72.useMergeRefs)([context.refs.setFloating, propRef]);
+    const ref = (0, import_react74.useMergeRefs)([context.refs.setFloating, propRef]);
     if (!floatingContext.open) return null;
-    return /* @__PURE__ */ (0, import_jsx_runtime86.jsx)(import_react72.FloatingPortal, { children: /* @__PURE__ */ (0, import_jsx_runtime86.jsx)(
-      import_react72.FloatingOverlay,
+    return /* @__PURE__ */ (0, import_jsx_runtime86.jsx)(import_react74.FloatingPortal, { children: /* @__PURE__ */ (0, import_jsx_runtime86.jsx)(
+      import_react74.FloatingOverlay,
       {
-        className: (0, import_css48.cx)((0, import_browser70.withVendorCSSClassPrefix)((0, import_browser70.bem)("dialog", "overlay")), styles["overlay"]),
+        className: (0, import_css48.cx)((0, import_browser72.withVendorCSSClassPrefix)((0, import_browser72.bem)("dialog", "overlay")), styles["overlay"]),
         lockScroll: true,
-        children: /* @__PURE__ */ (0, import_jsx_runtime86.jsx)(import_react72.FloatingFocusManager, { context: floatingContext, initialFocus: -1, children: /* @__PURE__ */ (0, import_jsx_runtime86.jsx)(
+        children: /* @__PURE__ */ (0, import_jsx_runtime86.jsx)(import_react74.FloatingFocusManager, { context: floatingContext, initialFocus: -1, children: /* @__PURE__ */ (0, import_jsx_runtime86.jsx)(
           "div",
           {
             ref,
-            className: (0, import_css48.cx)((0, import_browser70.withVendorCSSClassPrefix)((0, import_browser70.bem)("dialog", "content")), styles["content"], props.className),
+            className: (0, import_css48.cx)((0, import_browser72.withVendorCSSClassPrefix)((0, import_browser72.bem)("dialog", "content")), styles["content"], props.className),
             "aria-labelledby": context.labelId,
             "aria-describedby": context.descriptionId,
             ...context.getFloatingProps(props),
@@ -11925,26 +12167,26 @@ var DialogContent = (0, import_react73.forwardRef)(
     ) });
   }
 );
-var DialogHeading = (0, import_react73.forwardRef)(
+var DialogHeading = (0, import_react75.forwardRef)(
   ({ children, ...props }, ref) => {
     const context = useDialogContext();
     const { theme, colorScheme } = useTheme_default();
     const styles = Dialog_styles_default(theme, colorScheme);
-    const id = (0, import_react72.useId)();
-    (0, import_react73.useLayoutEffect)(() => {
+    const id = (0, import_react74.useId)();
+    (0, import_react75.useLayoutEffect)(() => {
       context.setLabelId(id);
       return () => {
         context.setLabelId(void 0);
       };
     }, [id, context.setLabelId]);
-    return /* @__PURE__ */ (0, import_jsx_runtime86.jsxs)("div", { className: (0, import_css48.cx)((0, import_browser70.withVendorCSSClassPrefix)((0, import_browser70.bem)("dialog", "header")), styles["header"]), children: [
+    return /* @__PURE__ */ (0, import_jsx_runtime86.jsxs)("div", { className: (0, import_css48.cx)((0, import_browser72.withVendorCSSClassPrefix)((0, import_browser72.bem)("dialog", "header")), styles["header"]), children: [
       /* @__PURE__ */ (0, import_jsx_runtime86.jsx)(
         "h2",
         {
           ...props,
           ref,
           id,
-          className: (0, import_css48.cx)((0, import_browser70.withVendorCSSClassPrefix)((0, import_browser70.bem)("dialog", "title")), styles["headerTitle"]),
+          className: (0, import_css48.cx)((0, import_browser72.withVendorCSSClassPrefix)((0, import_browser72.bem)("dialog", "title")), styles["headerTitle"]),
           children
         }
       ),
@@ -11965,13 +12207,13 @@ var DialogHeading = (0, import_react73.forwardRef)(
     ] });
   }
 );
-var DialogDescription = (0, import_react73.forwardRef)(
+var DialogDescription = (0, import_react75.forwardRef)(
   ({ children, ...props }, ref) => {
     const context = useDialogContext();
     const { theme, colorScheme } = useTheme_default();
     const styles = Dialog_styles_default(theme, colorScheme);
-    const id = (0, import_react72.useId)();
-    (0, import_react73.useLayoutEffect)(() => {
+    const id = (0, import_react74.useId)();
+    (0, import_react75.useLayoutEffect)(() => {
       context.setDescriptionId(id);
       return () => {
         context.setDescriptionId(void 0);
@@ -11983,23 +12225,23 @@ var DialogDescription = (0, import_react73.forwardRef)(
         ...props,
         ref,
         id,
-        className: (0, import_css48.cx)((0, import_browser70.withVendorCSSClassPrefix)((0, import_browser70.bem)("dialog", "description")), styles["description"], props.className),
+        className: (0, import_css48.cx)((0, import_browser72.withVendorCSSClassPrefix)((0, import_browser72.bem)("dialog", "description")), styles["description"], props.className),
         children
       }
     );
   }
 );
-var DialogClose = (0, import_react73.forwardRef)(
+var DialogClose = (0, import_react75.forwardRef)(
   ({ children, asChild = false, ...props }, propRef) => {
     const context = useDialogContext();
     const childrenRef = children?.ref;
-    const ref = (0, import_react72.useMergeRefs)([propRef, childrenRef]);
+    const ref = (0, import_react74.useMergeRefs)([propRef, childrenRef]);
     const handleClick = (event) => {
       context.setOpen(false);
       props.onClick?.(event);
     };
-    if (asChild && (0, import_react73.isValidElement)(children)) {
-      return (0, import_react73.cloneElement)(children, {
+    if (asChild && (0, import_react75.isValidElement)(children)) {
+      return (0, import_react75.cloneElement)(children, {
         ref,
         ...props,
         ...children.props,
@@ -12012,7 +12254,7 @@ var DialogClose = (0, import_react73.forwardRef)(
         ...props,
         ref,
         onClick: handleClick,
-        className: (0, import_css48.cx)((0, import_browser70.withVendorCSSClassPrefix)((0, import_browser70.bem)("dialog", "close")), props.className),
+        className: (0, import_css48.cx)((0, import_browser72.withVendorCSSClassPrefix)((0, import_browser72.bem)("dialog", "close")), props.className),
         variant: "text",
         children
       }
@@ -12032,14 +12274,14 @@ Dialog.Close = DialogClose;
 var Dialog_default = Dialog;
 
 // src/components/primitives/MultiInput/MultiInput.tsx
-var import_browser71 = require("@asgardeo/browser");
+var import_browser73 = require("@asgardeo/browser");
 var import_css50 = require("@emotion/css");
-var import_react75 = require("react");
+var import_react77 = require("react");
 
 // src/components/primitives/MultiInput/MultiInput.styles.ts
 var import_css49 = require("@emotion/css");
-var import_react74 = require("react");
-var useStyles23 = (theme, colorScheme, disabled, hasError, canAddMore, canRemove) => (0, import_react74.useMemo)(() => {
+var import_react76 = require("react");
+var useStyles23 = (theme, colorScheme, disabled, hasError, canAddMore, canRemove) => (0, import_react76.useMemo)(() => {
   const container = import_css49.css`
       display: flex;
       flex-direction: column;
@@ -12153,7 +12395,7 @@ var MultiInput = ({
   const styles = MultiInput_styles_default(theme, colorScheme, !!disabled, !!error, canAddMore, canRemove);
   const PlusIcon = ({ iconClassName }) => /* @__PURE__ */ (0, import_jsx_runtime87.jsx)("svg", { width: "16", height: "16", viewBox: "0 0 24 24", className: (0, import_css50.cx)(styles["icon"], iconClassName), children: /* @__PURE__ */ (0, import_jsx_runtime87.jsx)("path", { d: "M12 5v14M5 12h14" }) });
   const BinIcon = ({ iconClassName }) => /* @__PURE__ */ (0, import_jsx_runtime87.jsx)("svg", { width: "16", height: "16", viewBox: "0 0 24 24", className: (0, import_css50.cx)(styles["icon"], iconClassName), children: /* @__PURE__ */ (0, import_jsx_runtime87.jsx)("path", { d: "M3 6h18M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2m3 0v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6h14ZM10 11v6M14 11v6" }) });
-  const handleAddValue = (0, import_react75.useCallback)(
+  const handleAddValue = (0, import_react77.useCallback)(
     (newValue) => {
       if (newValue.trim() !== "" && (!maxFields || values.length < maxFields)) {
         onChange([...values, newValue.trim()]);
@@ -12161,7 +12403,7 @@ var MultiInput = ({
     },
     [values, onChange, maxFields]
   );
-  const handleRemoveValue = (0, import_react75.useCallback)(
+  const handleRemoveValue = (0, import_react77.useCallback)(
     (index) => {
       if (values.length > minFields) {
         const updatedValues = values.filter((_, i) => i !== index);
@@ -12170,7 +12412,7 @@ var MultiInput = ({
     },
     [values, onChange, minFields]
   );
-  const renderInputField = (0, import_react75.useCallback)(
+  const renderInputField = (0, import_react77.useCallback)(
     (value, onValueChange, attachedEndIcon, onEndIconClick) => {
       const handleInputChange = (e) => {
         const newValue = e.target ? e.target.value : e;
@@ -12212,8 +12454,8 @@ var MultiInput = ({
     },
     [placeholder, disabled, startIcon, endIcon, error, fieldType, type]
   );
-  const [currentInputValue, setCurrentInputValue] = (0, import_react75.useState)("");
-  const handleInputSubmit = (0, import_react75.useCallback)(() => {
+  const [currentInputValue, setCurrentInputValue] = (0, import_react77.useState)("");
+  const handleInputSubmit = (0, import_react77.useCallback)(() => {
     if (currentInputValue.trim() !== "") {
       handleAddValue(currentInputValue);
       setCurrentInputValue("");
@@ -12224,26 +12466,26 @@ var MultiInput = ({
     {
       error,
       helperText,
-      className: (0, import_css50.cx)((0, import_browser71.withVendorCSSClassPrefix)((0, import_browser71.bem)("multi-input")), className),
+      className: (0, import_css50.cx)((0, import_browser73.withVendorCSSClassPrefix)((0, import_browser73.bem)("multi-input")), className),
       style,
       children: [
         label && /* @__PURE__ */ (0, import_jsx_runtime87.jsx)(InputLabel_default, { required, error: !!error, children: label }),
-        /* @__PURE__ */ (0, import_jsx_runtime87.jsxs)("div", { className: (0, import_css50.cx)((0, import_browser71.withVendorCSSClassPrefix)((0, import_browser71.bem)("multi-input", "container")), styles["container"]), children: [
-          /* @__PURE__ */ (0, import_jsx_runtime87.jsx)("div", { className: (0, import_css50.cx)((0, import_browser71.withVendorCSSClassPrefix)((0, import_browser71.bem)("multi-input", "input-row")), styles["inputRow"]), children: /* @__PURE__ */ (0, import_jsx_runtime87.jsx)("div", { className: (0, import_css50.cx)((0, import_browser71.withVendorCSSClassPrefix)((0, import_browser71.bem)("multi-input", "input-wrapper")), styles["inputWrapper"]), children: renderInputField(
+        /* @__PURE__ */ (0, import_jsx_runtime87.jsxs)("div", { className: (0, import_css50.cx)((0, import_browser73.withVendorCSSClassPrefix)((0, import_browser73.bem)("multi-input", "container")), styles["container"]), children: [
+          /* @__PURE__ */ (0, import_jsx_runtime87.jsx)("div", { className: (0, import_css50.cx)((0, import_browser73.withVendorCSSClassPrefix)((0, import_browser73.bem)("multi-input", "input-row")), styles["inputRow"]), children: /* @__PURE__ */ (0, import_jsx_runtime87.jsx)("div", { className: (0, import_css50.cx)((0, import_browser73.withVendorCSSClassPrefix)((0, import_browser73.bem)("multi-input", "input-wrapper")), styles["inputWrapper"]), children: renderInputField(
             currentInputValue,
             setCurrentInputValue,
             canAddMore ? /* @__PURE__ */ (0, import_jsx_runtime87.jsx)(PlusIcon, { iconClassName: styles["plusIcon"] }) : void 0,
             canAddMore ? handleInputSubmit : void 0
           ) }) }),
-          values.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime87.jsx)("div", { className: (0, import_css50.cx)((0, import_browser71.withVendorCSSClassPrefix)((0, import_browser71.bem)("multi-input", "list-container")), styles["listContainer"]), children: values.map((value, index) => /* @__PURE__ */ (0, import_jsx_runtime87.jsxs)(
+          values.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime87.jsx)("div", { className: (0, import_css50.cx)((0, import_browser73.withVendorCSSClassPrefix)((0, import_browser73.bem)("multi-input", "list-container")), styles["listContainer"]), children: values.map((value, index) => /* @__PURE__ */ (0, import_jsx_runtime87.jsxs)(
             "div",
             {
-              className: (0, import_css50.cx)((0, import_browser71.withVendorCSSClassPrefix)((0, import_browser71.bem)("multi-input", "list-item")), styles["listItem"]),
+              className: (0, import_css50.cx)((0, import_browser73.withVendorCSSClassPrefix)((0, import_browser73.bem)("multi-input", "list-item")), styles["listItem"]),
               children: [
                 /* @__PURE__ */ (0, import_jsx_runtime87.jsx)(
                   "span",
                   {
-                    className: (0, import_css50.cx)((0, import_browser71.withVendorCSSClassPrefix)((0, import_browser71.bem)("multi-input", "list-item-text")), styles["listItemText"]),
+                    className: (0, import_css50.cx)((0, import_browser73.withVendorCSSClassPrefix)((0, import_browser73.bem)("multi-input", "list-item-text")), styles["listItemText"]),
                     children: value
                   }
                 ),
@@ -12254,7 +12496,7 @@ var MultiInput = ({
                     onClick: () => handleRemoveValue(index),
                     disabled,
                     className: (0, import_css50.cx)(
-                      (0, import_browser71.withVendorCSSClassPrefix)((0, import_browser71.bem)("multi-input", "remove-button")),
+                      (0, import_browser73.withVendorCSSClassPrefix)((0, import_browser73.bem)("multi-input", "remove-button")),
                       styles["removeButton"]
                     ),
                     title: "Remove value",
@@ -12316,10 +12558,10 @@ var BaseUserProfile = ({
   displayNameAttributes = []
 }) => {
   const { theme, colorScheme } = useTheme_default();
-  const [editedUser, setEditedUser] = (0, import_react76.useState)(flattenedProfile || profile);
-  const [editingFields, setEditingFields] = (0, import_react76.useState)({});
+  const [editedUser, setEditedUser] = (0, import_react78.useState)(flattenedProfile || profile);
+  const [editingFields, setEditingFields] = (0, import_react78.useState)({});
   const { t } = useTranslation_default();
-  const shouldShowField = (0, import_react76.useCallback)(
+  const shouldShowField = (0, import_react78.useCallback)(
     (fieldName) => {
       if (fieldsToSkip.includes(fieldName)) {
         return false;
@@ -12348,13 +12590,13 @@ var BaseUserProfile = ({
       children: /* @__PURE__ */ (0, import_jsx_runtime88.jsx)("path", { d: "M17 3a2.828 2.828 0 1 1 4 4L7.5 20.5 2 22l1.5-5.5L17 3z" })
     }
   );
-  const toggleFieldEdit = (0, import_react76.useCallback)((fieldName) => {
+  const toggleFieldEdit = (0, import_react78.useCallback)((fieldName) => {
     setEditingFields((prev) => ({
       ...prev,
       [fieldName]: !prev[fieldName]
     }));
   }, []);
-  const getFieldPlaceholder = (0, import_react76.useCallback)((schema) => {
+  const getFieldPlaceholder = (0, import_react78.useCallback)((schema) => {
     const { type, displayName, description, name } = schema;
     const fieldLabel = displayName || description || name || "value";
     switch (type) {
@@ -12368,7 +12610,7 @@ var BaseUserProfile = ({
         return `Enter your ${fieldLabel.toLowerCase()}`;
     }
   }, []);
-  const formatLabel = (0, import_react76.useCallback)(
+  const formatLabel = (0, import_react78.useCallback)(
     (key) => key.split(/(?=[A-Z])|_/).map((word) => word.charAt(0).toUpperCase() + word.slice(1).toLowerCase()).join(" "),
     []
   );
@@ -12398,7 +12640,7 @@ var BaseUserProfile = ({
       }
     }
   }
-  const handleFieldSave = (0, import_react76.useCallback)(
+  const handleFieldSave = (0, import_react78.useCallback)(
     (schema) => {
       if (!onUpdate || !schema.name) return;
       const fieldName = schema.name;
@@ -12414,7 +12656,7 @@ var BaseUserProfile = ({
         fieldValue = fieldValue.filter((v) => v !== void 0 && v !== null && v !== "");
       }
       let payload = {};
-      if (schema.schemaId && schema.schemaId !== import_browser72.WellKnownSchemaIds.User) {
+      if (schema.schemaId && schema.schemaId !== import_browser74.WellKnownSchemaIds.User) {
         payload = {
           [schema.schemaId]: {
             [fieldName]: fieldValue
@@ -12428,7 +12670,7 @@ var BaseUserProfile = ({
     },
     [editedUser, flattenedProfile, onUpdate, toggleFieldEdit]
   );
-  const handleFieldCancel = (0, import_react76.useCallback)(
+  const handleFieldCancel = (0, import_react78.useCallback)(
     (fieldName) => {
       const currentUser2 = flattenedProfile || profile;
       setEditedUser((prev) => ({
@@ -12680,7 +12922,7 @@ var BaseUserProfile = ({
   const containerClasses = (0, import_css51.cx)(
     styles.root,
     cardLayout ? styles.card : "",
-    (0, import_browser72.withVendorCSSClassPrefix)("user-profile"),
+    (0, import_browser74.withVendorCSSClassPrefix)("user-profile"),
     className
   );
   const currentUser = flattenedProfile || profile;
@@ -12721,7 +12963,7 @@ var BaseUserProfile = ({
       Alert_default,
       {
         variant: "error",
-        className: (0, import_css51.cx)((0, import_browser72.withVendorCSSClassPrefix)((0, import_browser72.bem)("user-profile", "alert")), styles.alert),
+        className: (0, import_css51.cx)((0, import_browser74.withVendorCSSClassPrefix)((0, import_browser74.bem)("user-profile", "alert")), styles.alert),
         children: [
           /* @__PURE__ */ (0, import_jsx_runtime88.jsx)(Alert_default.Title, { children: t("errors.heading") || "Error" }),
           /* @__PURE__ */ (0, import_jsx_runtime88.jsx)(Alert_default.Description, { children: error })
@@ -12769,12 +13011,12 @@ var BaseUserProfile = ({
 var BaseUserProfile_default = BaseUserProfile;
 
 // src/components/presentation/UserProfile/UserProfile.tsx
-var import_browser74 = require("@asgardeo/browser");
-var import_react77 = require("react");
+var import_browser76 = require("@asgardeo/browser");
+var import_react79 = require("react");
 
 // src/api/updateMeProfile.ts
-var import_browser73 = require("@asgardeo/browser");
-var httpClient5 = import_browser73.AsgardeoSPAClient.getInstance().httpRequest.bind(import_browser73.AsgardeoSPAClient.getInstance());
+var import_browser75 = require("@asgardeo/browser");
+var httpClient5 = import_browser75.AsgardeoSPAClient.getInstance().httpRequest.bind(import_browser75.AsgardeoSPAClient.getInstance());
 var updateMeProfile = async ({ fetcher, ...requestConfig }) => {
   const defaultFetcher = async (url, config) => {
     const response = await httpClient5({
@@ -12791,7 +13033,7 @@ var updateMeProfile = async ({ fetcher, ...requestConfig }) => {
       text: () => Promise.resolve(typeof response.data === "string" ? response.data : JSON.stringify(response.data))
     };
   };
-  return (0, import_browser73.updateMeProfile)({
+  return (0, import_browser75.updateMeProfile)({
     ...requestConfig,
     fetcher: fetcher || defaultFetcher
   });
@@ -12804,7 +13046,7 @@ var UserProfile3 = ({ ...rest }) => {
   const { baseUrl } = useAsgardeo_default();
   const { profile, flattenedProfile, schemas, onUpdateProfile } = useUser_default();
   const { t } = useTranslation_default();
-  const [error, setError] = (0, import_react77.useState)(null);
+  const [error, setError] = (0, import_react79.useState)(null);
   const handleProfileUpdate = async (payload) => {
     setError(null);
     try {
@@ -12812,7 +13054,7 @@ var UserProfile3 = ({ ...rest }) => {
       onUpdateProfile(response);
     } catch (caughtError) {
       let message = t("user.profile.update.generic.error");
-      if (caughtError instanceof import_browser74.AsgardeoError) {
+      if (caughtError instanceof import_browser76.AsgardeoError) {
         message = caughtError?.message;
       }
       setError(message);
@@ -12833,15 +13075,15 @@ var UserProfile3 = ({ ...rest }) => {
 var UserProfile_default = UserProfile3;
 
 // src/components/presentation/UserDropdown/BaseUserDropdown.tsx
-var import_browser75 = require("@asgardeo/browser");
+var import_browser77 = require("@asgardeo/browser");
 var import_css53 = require("@emotion/css");
-var import_react79 = require("@floating-ui/react");
-var import_react80 = require("react");
+var import_react81 = require("@floating-ui/react");
+var import_react82 = require("react");
 
 // src/components/presentation/UserDropdown/BaseUserDropdown.styles.ts
 var import_css52 = require("@emotion/css");
-var import_react78 = require("react");
-var useStyles24 = (theme, colorScheme) => (0, import_react78.useMemo)(() => {
+var import_react80 = require("react");
+var useStyles24 = (theme, colorScheme) => (0, import_react80.useMemo)(() => {
   const trigger = import_css52.css`
       display: inline-flex;
       align-items: center;
@@ -13042,19 +13284,19 @@ var BaseUserDropdown = ({
 }) => {
   const { theme, colorScheme } = useTheme_default();
   const styles = BaseUserDropdown_styles_default(theme, colorScheme);
-  const [isOpen, setIsOpen] = (0, import_react80.useState)(false);
-  const [hoveredItemIndex, setHoveredItemIndex] = (0, import_react80.useState)(null);
-  const { refs, floatingStyles, context } = (0, import_react79.useFloating)({
-    middleware: [(0, import_react79.offset)(5), (0, import_react79.flip)({ fallbackAxisSideDirection: "end" }), (0, import_react79.shift)({ padding: 5 })],
+  const [isOpen, setIsOpen] = (0, import_react82.useState)(false);
+  const [hoveredItemIndex, setHoveredItemIndex] = (0, import_react82.useState)(null);
+  const { refs, floatingStyles, context } = (0, import_react81.useFloating)({
+    middleware: [(0, import_react81.offset)(5), (0, import_react81.flip)({ fallbackAxisSideDirection: "end" }), (0, import_react81.shift)({ padding: 5 })],
     onOpenChange: setIsOpen,
     open: isOpen,
     placement: "bottom-end",
-    whileElementsMounted: import_react79.autoUpdate
+    whileElementsMounted: import_react81.autoUpdate
   });
-  const click = (0, import_react79.useClick)(context);
-  const dismiss = (0, import_react79.useDismiss)(context);
-  const role = (0, import_react79.useRole)(context);
-  const { getReferenceProps, getFloatingProps } = (0, import_react79.useInteractions)([click, dismiss, role]);
+  const click = (0, import_react81.useClick)(context);
+  const dismiss = (0, import_react81.useDismiss)(context);
+  const role = (0, import_react81.useRole)(context);
+  const { getReferenceProps, getFloatingProps } = (0, import_react81.useInteractions)([click, dismiss, role]);
   const defaultAttributeMappings = {
     email: ["emails"],
     firstName: ["name.givenName", "given_name"],
@@ -13097,12 +13339,12 @@ var BaseUserDropdown = ({
     }
     allMenuItems.push(...defaultMenuItems);
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime90.jsxs)("div", { className: (0, import_css53.cx)((0, import_browser75.withVendorCSSClassPrefix)("user-dropdown"), className), children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime90.jsxs)("div", { className: (0, import_css53.cx)((0, import_browser77.withVendorCSSClassPrefix)("user-dropdown"), className), children: [
     /* @__PURE__ */ (0, import_jsx_runtime90.jsxs)(
       Button_default,
       {
         ref: refs.setReference,
-        className: (0, import_css53.cx)((0, import_browser75.withVendorCSSClassPrefix)("user-dropdown__trigger"), styles["trigger"]),
+        className: (0, import_css53.cx)((0, import_browser77.withVendorCSSClassPrefix)("user-dropdown__trigger"), styles["trigger"]),
         color: "tertiary",
         variant: "text",
         size: "medium",
@@ -13122,18 +13364,18 @@ var BaseUserDropdown = ({
             Typography_default,
             {
               variant: "body2",
-              className: (0, import_css53.cx)((0, import_browser75.withVendorCSSClassPrefix)("user-dropdown__trigger-label"), styles["userName"]),
+              className: (0, import_css53.cx)((0, import_browser77.withVendorCSSClassPrefix)("user-dropdown__trigger-label"), styles["userName"]),
               children: getDisplayName_default(mergedMappings, user)
             }
           )
         ]
       }
     ),
-    isOpen && /* @__PURE__ */ (0, import_jsx_runtime90.jsx)(import_react79.FloatingPortal, { id: portalId, children: /* @__PURE__ */ (0, import_jsx_runtime90.jsx)(import_react79.FloatingFocusManager, { context, modal: false, initialFocus: -1, children: /* @__PURE__ */ (0, import_jsx_runtime90.jsxs)(
+    isOpen && /* @__PURE__ */ (0, import_jsx_runtime90.jsx)(import_react81.FloatingPortal, { id: portalId, children: /* @__PURE__ */ (0, import_jsx_runtime90.jsx)(import_react81.FloatingFocusManager, { context, modal: false, initialFocus: -1, children: /* @__PURE__ */ (0, import_jsx_runtime90.jsxs)(
       "div",
       {
         ref: refs.setFloating,
-        className: (0, import_css53.cx)((0, import_browser75.withVendorCSSClassPrefix)("user-dropdown__content"), styles["dropdownContent"]),
+        className: (0, import_css53.cx)((0, import_browser77.withVendorCSSClassPrefix)("user-dropdown__content"), styles["dropdownContent"]),
         style: {
           ...floatingStyles,
           // Floating UI doesn't set a z-index by default, so we set a high value to ensure the dropdown appears above other elements.
@@ -13142,7 +13384,7 @@ var BaseUserDropdown = ({
         },
         ...getFloatingProps(),
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime90.jsxs)("div", { className: (0, import_css53.cx)((0, import_browser75.withVendorCSSClassPrefix)("user-dropdown__header"), styles["dropdownHeader"]), children: [
+          /* @__PURE__ */ (0, import_jsx_runtime90.jsxs)("div", { className: (0, import_css53.cx)((0, import_browser77.withVendorCSSClassPrefix)("user-dropdown__header"), styles["dropdownHeader"]), children: [
             /* @__PURE__ */ (0, import_jsx_runtime90.jsx)(
               Avatar,
               {
@@ -13152,12 +13394,12 @@ var BaseUserDropdown = ({
                 alt: `${getDisplayName_default(mergedMappings, user)}'s avatar`
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime90.jsxs)("div", { className: (0, import_css53.cx)((0, import_browser75.withVendorCSSClassPrefix)("user-dropdown__header-info"), styles["headerInfo"]), children: [
+            /* @__PURE__ */ (0, import_jsx_runtime90.jsxs)("div", { className: (0, import_css53.cx)((0, import_browser77.withVendorCSSClassPrefix)("user-dropdown__header-info"), styles["headerInfo"]), children: [
               /* @__PURE__ */ (0, import_jsx_runtime90.jsx)(
                 Typography_default,
                 {
                   noWrap: true,
-                  className: (0, import_browser75.withVendorCSSClassPrefix)("user-dropdown__header-name"),
+                  className: (0, import_browser77.withVendorCSSClassPrefix)("user-dropdown__header-name"),
                   variant: "body1",
                   fontWeight: "medium",
                   children: getDisplayName_default(mergedMappings, user)
@@ -13167,7 +13409,7 @@ var BaseUserDropdown = ({
                 Typography_default,
                 {
                   noWrap: true,
-                  className: (0, import_browser75.withVendorCSSClassPrefix)("user-dropdown__header-email"),
+                  className: (0, import_browser77.withVendorCSSClassPrefix)("user-dropdown__header-email"),
                   variant: "caption",
                   color: "secondary",
                   children: getMappedUserProfileValue_default("username", mergedMappings, user) || getMappedUserProfileValue_default("email", mergedMappings, user)
@@ -13175,12 +13417,12 @@ var BaseUserDropdown = ({
               )
             ] })
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime90.jsx)("div", { className: (0, import_css53.cx)((0, import_browser75.withVendorCSSClassPrefix)("user-dropdown__menu"), styles["dropdownMenu"]), children: allMenuItems.map((item, index) => /* @__PURE__ */ (0, import_jsx_runtime90.jsx)("div", { children: (() => {
+          /* @__PURE__ */ (0, import_jsx_runtime90.jsx)("div", { className: (0, import_css53.cx)((0, import_browser77.withVendorCSSClassPrefix)("user-dropdown__menu"), styles["dropdownMenu"]), children: allMenuItems.map((item, index) => /* @__PURE__ */ (0, import_jsx_runtime90.jsx)("div", { children: (() => {
             if (item.label === "") {
               return /* @__PURE__ */ (0, import_jsx_runtime90.jsx)(
                 "div",
                 {
-                  className: (0, import_css53.cx)((0, import_browser75.withVendorCSSClassPrefix)("user-dropdown__menu-divider"), styles["divider"])
+                  className: (0, import_css53.cx)((0, import_browser77.withVendorCSSClassPrefix)("user-dropdown__menu-divider"), styles["divider"])
                 }
               );
             }
@@ -13193,7 +13435,7 @@ var BaseUserDropdown = ({
                     backgroundColor: hoveredItemIndex === index ? theme.vars.colors.action?.hover : "transparent"
                   },
                   className: (0, import_css53.cx)(
-                    (0, import_browser75.withVendorCSSClassPrefix)("user-dropdown__menu-item"),
+                    (0, import_browser77.withVendorCSSClassPrefix)("user-dropdown__menu-item"),
                     styles["menuItemAnchor"]
                   ),
                   onMouseEnter: () => setHoveredItemIndex(index),
@@ -13214,7 +13456,7 @@ var BaseUserDropdown = ({
                 style: {
                   backgroundColor: hoveredItemIndex === index ? theme.vars.colors.action?.hover : "transparent"
                 },
-                className: (0, import_css53.cx)((0, import_browser75.withVendorCSSClassPrefix)("user-dropdown__menu-item"), styles["menuItem"]),
+                className: (0, import_css53.cx)((0, import_browser77.withVendorCSSClassPrefix)("user-dropdown__menu-item"), styles["menuItem"]),
                 color: "tertiary",
                 variant: "text",
                 size: "small",
@@ -13233,7 +13475,7 @@ var BaseUserDropdown = ({
 var BaseUserDropdown_default = BaseUserDropdown;
 
 // src/components/presentation/UserDropdown/UserDropdown.tsx
-var import_react81 = require("react");
+var import_react83 = require("react");
 var import_jsx_runtime91 = require("react/jsx-runtime");
 var UserDropdown = ({
   children,
@@ -13243,7 +13485,7 @@ var UserDropdown = ({
   ...rest
 }) => {
   const { user, isLoading, signOut } = useAsgardeo_default();
-  const [isProfileOpen, setIsProfileOpen] = (0, import_react81.useState)(false);
+  const [isProfileOpen, setIsProfileOpen] = (0, import_react83.useState)(false);
   const handleManageProfile = () => {
     setIsProfileOpen(true);
   };
@@ -13303,13 +13545,13 @@ var UserDropdown_default = UserDropdown;
 
 // src/components/presentation/OrganizationSwitcher/BaseOrganizationSwitcher.tsx
 var import_css55 = require("@emotion/css");
-var import_react83 = require("@floating-ui/react");
-var import_react84 = require("react");
+var import_react85 = require("@floating-ui/react");
+var import_react86 = require("react");
 
 // src/components/presentation/OrganizationSwitcher/BaseOrganizationSwitcher.styles.ts
 var import_css54 = require("@emotion/css");
-var import_react82 = require("react");
-var useStyles25 = (theme, colorScheme) => (0, import_react82.useMemo)(() => {
+var import_react84 = require("react");
+var useStyles25 = (theme, colorScheme) => (0, import_react84.useMemo)(() => {
   const root = import_css54.css`
       display: inline-block;
       position: relative;
@@ -13588,21 +13830,21 @@ var BaseOrganizationSwitcher = ({
 }) => {
   const { theme, colorScheme, direction } = useTheme_default();
   const styles = BaseOrganizationSwitcher_styles_default(theme, colorScheme);
-  const [isOpen, setIsOpen] = (0, import_react84.useState)(false);
-  const [hoveredItemIndex, setHoveredItemIndex] = (0, import_react84.useState)(null);
+  const [isOpen, setIsOpen] = (0, import_react86.useState)(false);
+  const [hoveredItemIndex, setHoveredItemIndex] = (0, import_react86.useState)(null);
   const { t } = useTranslation_default();
   const isRTL = direction === "rtl";
-  const { refs, floatingStyles, context } = (0, import_react83.useFloating)({
-    middleware: [(0, import_react83.offset)(5), (0, import_react83.flip)({ fallbackAxisSideDirection: "end" }), (0, import_react83.shift)({ padding: 5 })],
+  const { refs, floatingStyles, context } = (0, import_react85.useFloating)({
+    middleware: [(0, import_react85.offset)(5), (0, import_react85.flip)({ fallbackAxisSideDirection: "end" }), (0, import_react85.shift)({ padding: 5 })],
     onOpenChange: setIsOpen,
     open: isOpen,
     placement: "bottom-end",
-    whileElementsMounted: import_react83.autoUpdate
+    whileElementsMounted: import_react85.autoUpdate
   });
-  const click = (0, import_react83.useClick)(context);
-  const dismiss = (0, import_react83.useDismiss)(context);
-  const role = (0, import_react83.useRole)(context);
-  const { getReferenceProps, getFloatingProps } = (0, import_react83.useInteractions)([click, dismiss, role]);
+  const click = (0, import_react85.useClick)(context);
+  const dismiss = (0, import_react85.useDismiss)(context);
+  const role = (0, import_react85.useRole)(context);
+  const { getReferenceProps, getFloatingProps } = (0, import_react85.useInteractions)([click, dismiss, role]);
   if (fallback && !currentOrganization && !loading && organizations.length === 0) {
     return fallback;
   }
@@ -13677,7 +13919,7 @@ var BaseOrganizationSwitcher = ({
         ]
       }
     ),
-    isOpen && /* @__PURE__ */ (0, import_jsx_runtime95.jsx)(import_react83.FloatingPortal, { id: portalId, children: /* @__PURE__ */ (0, import_jsx_runtime95.jsx)(import_react83.FloatingFocusManager, { context, modal: false, initialFocus: -1, children: /* @__PURE__ */ (0, import_jsx_runtime95.jsxs)(
+    isOpen && /* @__PURE__ */ (0, import_jsx_runtime95.jsx)(import_react85.FloatingPortal, { id: portalId, children: /* @__PURE__ */ (0, import_jsx_runtime95.jsx)(import_react85.FloatingFocusManager, { context, modal: false, initialFocus: -1, children: /* @__PURE__ */ (0, import_jsx_runtime95.jsxs)(
       "div",
       {
         ref: refs.setFloating,
@@ -13836,7 +14078,7 @@ var BaseOrganizationSwitcher = ({
 var BaseOrganizationSwitcher_default = BaseOrganizationSwitcher;
 
 // src/components/presentation/OrganizationSwitcher/OrganizationSwitcher.tsx
-var import_react97 = require("react");
+var import_react99 = require("react");
 
 // src/components/primitives/Icons/BuildingAlt.tsx
 var import_jsx_runtime96 = require("react/jsx-runtime");
@@ -13867,17 +14109,17 @@ BuildingAlt.displayName = "BuildingAlt";
 var BuildingAlt_default = BuildingAlt;
 
 // src/components/presentation/CreateOrganization/CreateOrganization.tsx
-var import_react87 = require("react");
+var import_react89 = require("react");
 
 // src/components/presentation/CreateOrganization/BaseCreateOrganization.tsx
-var import_browser76 = require("@asgardeo/browser");
+var import_browser78 = require("@asgardeo/browser");
 var import_css57 = require("@emotion/css");
-var import_react86 = require("react");
+var import_react88 = require("react");
 
 // src/components/presentation/CreateOrganization/BaseCreateOrganization.styles.ts
 var import_css56 = require("@emotion/css");
-var import_react85 = require("react");
-var useStyles26 = (theme, colorScheme) => (0, import_react85.useMemo)(() => {
+var import_react87 = require("react");
+var useStyles26 = (theme, colorScheme) => (0, import_react87.useMemo)(() => {
   const root = import_css56.css`
       padding: calc(${theme.vars.spacing.unit} * 4);
       min-width: 600px;
@@ -14012,7 +14254,7 @@ var BaseCreateOrganization_styles_default = useStyles26;
 
 // src/components/presentation/CreateOrganization/BaseCreateOrganization.tsx
 var import_jsx_runtime97 = require("react/jsx-runtime");
-var logger8 = (0, import_browser76.createPackageComponentLogger)(
+var logger8 = (0, import_browser78.createPackageComponentLogger)(
   "@asgardeo/react",
   "BaseCreateOrganization"
 );
@@ -14037,13 +14279,13 @@ var BaseCreateOrganization = ({
   const { theme, colorScheme } = useTheme_default();
   const styles = BaseCreateOrganization_styles_default(theme, colorScheme);
   const { t } = useTranslation_default();
-  const [formData, setFormData] = (0, import_react86.useState)({
+  const [formData, setFormData] = (0, import_react88.useState)({
     description: "",
     handle: "",
     name: "",
     ...initialValues
   });
-  const [formErrors, setFormErrors] = (0, import_react86.useState)({});
+  const [formErrors, setFormErrors] = (0, import_react88.useState)({});
   const validateForm = () => {
     const errors = {};
     if (!formData.name.trim()) {
@@ -14164,8 +14406,8 @@ var BaseCreateOrganization = ({
 };
 
 // src/api/createOrganization.ts
-var import_browser77 = require("@asgardeo/browser");
-var httpClient6 = import_browser77.AsgardeoSPAClient.getInstance().httpRequest.bind(import_browser77.AsgardeoSPAClient.getInstance());
+var import_browser79 = require("@asgardeo/browser");
+var httpClient6 = import_browser79.AsgardeoSPAClient.getInstance().httpRequest.bind(import_browser79.AsgardeoSPAClient.getInstance());
 var createOrganization = async ({ fetcher, ...requestConfig }) => {
   const defaultFetcher = async (url, config) => {
     const response = await httpClient6({
@@ -14182,7 +14424,7 @@ var createOrganization = async ({ fetcher, ...requestConfig }) => {
       text: () => Promise.resolve(typeof response.data === "string" ? response.data : JSON.stringify(response.data))
     };
   };
-  return (0, import_browser77.createOrganization)({
+  return (0, import_browser79.createOrganization)({
     ...requestConfig,
     fetcher: fetcher || defaultFetcher
   });
@@ -14200,8 +14442,8 @@ var CreateOrganization = ({
 }) => {
   const { isSignedIn, baseUrl } = useAsgardeo_default();
   const { currentOrganization, revalidateMyOrganizations } = useOrganization_default();
-  const [loading, setLoading] = (0, import_react87.useState)(false);
-  const [error, setError] = (0, import_react87.useState)(null);
+  const [loading, setLoading] = (0, import_react89.useState)(false);
+  const [error, setError] = (0, import_react89.useState)(null);
   if (!isSignedIn && fallback) {
     return fallback;
   }
@@ -14255,16 +14497,16 @@ var CreateOrganization = ({
 
 // src/components/presentation/OrganizationList/OrganizationList.tsx
 var import_css61 = require("@emotion/css");
-var import_react91 = require("react");
+var import_react93 = require("react");
 
 // src/components/presentation/OrganizationList/BaseOrganizationList.tsx
 var import_css59 = require("@emotion/css");
-var import_react89 = require("react");
+var import_react91 = require("react");
 
 // src/components/presentation/OrganizationList/BaseOrganizationList.styles.ts
 var import_css58 = require("@emotion/css");
-var import_react88 = require("react");
-var useStyles27 = (theme, colorScheme) => (0, import_react88.useMemo)(() => {
+var import_react90 = require("react");
+var useStyles27 = (theme, colorScheme) => (0, import_react90.useMemo)(() => {
   const root = import_css58.css`
       padding: calc(${theme.vars.spacing.unit} * 4);
       min-width: 600px;
@@ -14562,7 +14804,7 @@ var BaseOrganizationList = ({
   const { theme, colorScheme } = useTheme_default();
   const styles = BaseOrganizationList_styles_default(theme, colorScheme);
   const { t } = useTranslation_default();
-  const organizationsWithSwitchAccess = (0, import_react89.useMemo)(() => {
+  const organizationsWithSwitchAccess = (0, import_react91.useMemo)(() => {
     if (!allOrganizations?.organizations) {
       return [];
     }
@@ -14643,8 +14885,8 @@ var BaseOrganizationList_default = BaseOrganizationList;
 
 // src/components/presentation/OrganizationList/OrganizationList.styles.ts
 var import_css60 = require("@emotion/css");
-var import_react90 = require("react");
-var useStyles28 = (theme, colorScheme) => (0, import_react90.useMemo)(() => {
+var import_react92 = require("react");
+var useStyles28 = (theme, colorScheme) => (0, import_react92.useMemo)(() => {
   const cssOrganizationListWrapper = import_css60.css`
       /* Container wrapper styles for OrganizationList component */
       width: 100%;
@@ -14710,10 +14952,10 @@ var OrganizationList = (props) => {
   const { theme, colorScheme } = useTheme_default();
   const styles = OrganizationList_styles_default(theme, colorScheme);
   const { getAllOrganizations: getAllOrganizations2, error, isLoading, myOrganizations } = useOrganization_default();
-  const [allOrganizations, setAllOrganizations] = (0, import_react91.useState)({
+  const [allOrganizations, setAllOrganizations] = (0, import_react93.useState)({
     organizations: []
   });
-  (0, import_react91.useEffect)(() => {
+  (0, import_react93.useEffect)(() => {
     (async () => {
       setAllOrganizations(await getAllOrganizations2());
     })();
@@ -14733,18 +14975,18 @@ var OrganizationList = (props) => {
 var OrganizationList_default = OrganizationList;
 
 // src/components/presentation/OrganizationProfile/OrganizationProfile.tsx
-var import_browser82 = require("@asgardeo/browser");
-var import_react96 = require("react");
+var import_browser84 = require("@asgardeo/browser");
+var import_react98 = require("react");
 
 // src/components/presentation/OrganizationProfile/BaseOrganizationProfile.tsx
-var import_browser79 = require("@asgardeo/browser");
+var import_browser81 = require("@asgardeo/browser");
 var import_css65 = require("@emotion/css");
-var import_react95 = require("react");
+var import_react97 = require("react");
 
 // src/components/presentation/OrganizationProfile/BaseOrganizationProfile.styles.ts
 var import_css62 = require("@emotion/css");
-var import_react92 = require("react");
-var useStyles29 = (theme, colorScheme) => (0, import_react92.useMemo)(
+var import_react94 = require("react");
+var useStyles29 = (theme, colorScheme) => (0, import_react94.useMemo)(
   () => ({
     attributeItem: import_css62.css`
         display: flex;
@@ -14897,14 +15139,14 @@ var useStyles29 = (theme, colorScheme) => (0, import_react92.useMemo)(
 var BaseOrganizationProfile_styles_default = useStyles29;
 
 // src/components/primitives/KeyValueInput/KeyValueInput.tsx
-var import_browser78 = require("@asgardeo/browser");
+var import_browser80 = require("@asgardeo/browser");
 var import_css64 = require("@emotion/css");
-var import_react94 = require("react");
+var import_react96 = require("react");
 
 // src/components/primitives/KeyValueInput/KeyValueInput.styles.ts
 var import_css63 = require("@emotion/css");
-var import_react93 = require("react");
-var useStyles30 = (theme, colorScheme, disabled, readOnly, hasError) => (0, import_react93.useMemo)(() => {
+var import_react95 = require("react");
+var useStyles30 = (theme, colorScheme, disabled, readOnly, hasError) => (0, import_react95.useMemo)(() => {
   const container = import_css63.css`
       display: flex;
       flex-direction: column;
@@ -15078,10 +15320,10 @@ var KeyValueInput = ({
   const { theme, colorScheme } = useTheme_default();
   const styles = KeyValueInput_styles_default(theme, colorScheme, disabled, readOnly, !!error);
   const initialPairs = Array.isArray(value) ? value : Object.entries(value).map(([key, val]) => ({ key, value: String(val) }));
-  const [pairs, setPairs] = (0, import_react94.useState)(initialPairs);
-  const [newKey, setNewKey] = (0, import_react94.useState)("");
-  const [newValue, setNewValue] = (0, import_react94.useState)("");
-  const handleAddPair = (0, import_react94.useCallback)(() => {
+  const [pairs, setPairs] = (0, import_react96.useState)(initialPairs);
+  const [newKey, setNewKey] = (0, import_react96.useState)("");
+  const [newValue, setNewValue] = (0, import_react96.useState)("");
+  const handleAddPair = (0, import_react96.useCallback)(() => {
     if (!newKey.trim() || !newValue.trim()) return;
     if (maxPairs && pairs.length >= maxPairs) return;
     const newPair = {
@@ -15099,7 +15341,7 @@ var KeyValueInput = ({
       onAdd(newPair);
     }
   }, [newKey, newValue, pairs, maxPairs, onChange, onAdd]);
-  const handleRemovePair = (0, import_react94.useCallback)(
+  const handleRemovePair = (0, import_react96.useCallback)(
     (index) => {
       const pairToRemove = pairs[index];
       const updatedPairs = pairs.filter((_, i) => i !== index);
@@ -15113,7 +15355,7 @@ var KeyValueInput = ({
     },
     [pairs, onChange, onRemove]
   );
-  const handleUpdatePair = (0, import_react94.useCallback)(
+  const handleUpdatePair = (0, import_react96.useCallback)(
     (index, field, newVal) => {
       const updatedPairs = pairs.map((pair, i) => {
         if (i === index) {
@@ -15132,21 +15374,21 @@ var KeyValueInput = ({
   const isAddDisabled = disabled || readOnly || !canAddMore || !newKey.trim() || !newValue.trim();
   const renderReadOnlyContent = () => {
     if (pairs.length === 0) {
-      return /* @__PURE__ */ (0, import_jsx_runtime101.jsx)("div", { className: (0, import_css64.cx)((0, import_browser78.withVendorCSSClassPrefix)((0, import_browser78.bem)("key-value-input", "empty-state")), styles["emptyState"]), children: "No attributes defined" });
+      return /* @__PURE__ */ (0, import_jsx_runtime101.jsx)("div", { className: (0, import_css64.cx)((0, import_browser80.withVendorCSSClassPrefix)((0, import_browser80.bem)("key-value-input", "empty-state")), styles["emptyState"]), children: "No attributes defined" });
     }
     return pairs.map((pair, index) => /* @__PURE__ */ (0, import_jsx_runtime101.jsxs)(
       "div",
       {
-        className: (0, import_css64.cx)((0, import_browser78.withVendorCSSClassPrefix)((0, import_browser78.bem)("key-value-input", "readonly-pair")), styles["readOnlyPair"]),
+        className: (0, import_css64.cx)((0, import_browser80.withVendorCSSClassPrefix)((0, import_browser80.bem)("key-value-input", "readonly-pair")), styles["readOnlyPair"]),
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime101.jsxs)("span", { className: (0, import_css64.cx)((0, import_browser78.withVendorCSSClassPrefix)((0, import_browser78.bem)("key-value-input", "readonly-key")), styles["readOnlyKey"]), children: [
+          /* @__PURE__ */ (0, import_jsx_runtime101.jsxs)("span", { className: (0, import_css64.cx)((0, import_browser80.withVendorCSSClassPrefix)((0, import_browser80.bem)("key-value-input", "readonly-key")), styles["readOnlyKey"]), children: [
             pair.key,
             ":"
           ] }),
           /* @__PURE__ */ (0, import_jsx_runtime101.jsx)(
             "span",
             {
-              className: (0, import_css64.cx)((0, import_browser78.withVendorCSSClassPrefix)((0, import_browser78.bem)("key-value-input", "readonly-value")), styles["readOnlyValue"]),
+              className: (0, import_css64.cx)((0, import_browser80.withVendorCSSClassPrefix)((0, import_browser80.bem)("key-value-input", "readonly-value")), styles["readOnlyValue"]),
               children: pair.value
             }
           )
@@ -15155,22 +15397,22 @@ var KeyValueInput = ({
       `${pair.key}-${index}`
     ));
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime101.jsxs)("div", { className: (0, import_css64.cx)((0, import_browser78.withVendorCSSClassPrefix)((0, import_browser78.bem)("key-value-input")), styles["container"], className), children: [
-    label && /* @__PURE__ */ (0, import_jsx_runtime101.jsxs)("label", { className: (0, import_css64.cx)((0, import_browser78.withVendorCSSClassPrefix)((0, import_browser78.bem)("key-value-input", "label")), styles["label"]), children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime101.jsxs)("div", { className: (0, import_css64.cx)((0, import_browser80.withVendorCSSClassPrefix)((0, import_browser80.bem)("key-value-input")), styles["container"], className), children: [
+    label && /* @__PURE__ */ (0, import_jsx_runtime101.jsxs)("label", { className: (0, import_css64.cx)((0, import_browser80.withVendorCSSClassPrefix)((0, import_browser80.bem)("key-value-input", "label")), styles["label"]), children: [
       label,
       required && /* @__PURE__ */ (0, import_jsx_runtime101.jsx)(
         "span",
         {
-          className: (0, import_css64.cx)((0, import_browser78.withVendorCSSClassPrefix)((0, import_browser78.bem)("key-value-input", "required")), styles["requiredIndicator"]),
+          className: (0, import_css64.cx)((0, import_browser80.withVendorCSSClassPrefix)((0, import_browser80.bem)("key-value-input", "required")), styles["requiredIndicator"]),
           children: " *"
         }
       )
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime101.jsxs)("div", { className: (0, import_css64.cx)((0, import_browser78.withVendorCSSClassPrefix)((0, import_browser78.bem)("key-value-input", "pairs-list")), styles["pairsList"]), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime101.jsxs)("div", { className: (0, import_css64.cx)((0, import_browser80.withVendorCSSClassPrefix)((0, import_browser80.bem)("key-value-input", "pairs-list")), styles["pairsList"]), children: [
       readOnly ? renderReadOnlyContent() : pairs.map((pair, index) => /* @__PURE__ */ (0, import_jsx_runtime101.jsxs)(
         "div",
         {
-          className: (0, import_css64.cx)((0, import_browser78.withVendorCSSClassPrefix)((0, import_browser78.bem)("key-value-input", "pair-row")), styles["pairRow"]),
+          className: (0, import_css64.cx)((0, import_browser80.withVendorCSSClassPrefix)((0, import_browser80.bem)("key-value-input", "pair-row")), styles["pairRow"]),
           children: [
             /* @__PURE__ */ (0, import_jsx_runtime101.jsx)(
               TextField_default,
@@ -15179,7 +15421,7 @@ var KeyValueInput = ({
                 value: pair.key,
                 onChange: (e) => handleUpdatePair(index, "key", e.target.value),
                 disabled: disabled || readOnly,
-                className: (0, import_css64.cx)((0, import_browser78.withVendorCSSClassPrefix)((0, import_browser78.bem)("key-value-input", "pair-input")), styles["pairInput"]),
+                className: (0, import_css64.cx)((0, import_browser80.withVendorCSSClassPrefix)((0, import_browser80.bem)("key-value-input", "pair-input")), styles["pairInput"]),
                 "aria-label": `${keyLabel} ${index + 1}`
               }
             ),
@@ -15190,7 +15432,7 @@ var KeyValueInput = ({
                 value: pair.value,
                 onChange: (e) => handleUpdatePair(index, "value", e.target.value),
                 disabled: disabled || readOnly,
-                className: (0, import_css64.cx)((0, import_browser78.withVendorCSSClassPrefix)((0, import_browser78.bem)("key-value-input", "pair-input")), styles["pairInput"]),
+                className: (0, import_css64.cx)((0, import_browser80.withVendorCSSClassPrefix)((0, import_browser80.bem)("key-value-input", "pair-input")), styles["pairInput"]),
                 "aria-label": `${valueLabel} ${index + 1}`
               }
             ),
@@ -15201,7 +15443,7 @@ var KeyValueInput = ({
                 onClick: () => handleRemovePair(index),
                 disabled,
                 className: (0, import_css64.cx)(
-                  (0, import_browser78.withVendorCSSClassPrefix)((0, import_browser78.bem)("key-value-input", "remove-button")),
+                  (0, import_browser80.withVendorCSSClassPrefix)((0, import_browser80.bem)("key-value-input", "remove-button")),
                   styles["removeButton"]
                 ),
                 "aria-label": `${removeButtonText} ${pair.key}`,
@@ -15212,7 +15454,7 @@ var KeyValueInput = ({
         },
         `${pair.key}-${index}`
       )),
-      !readOnly && /* @__PURE__ */ (0, import_jsx_runtime101.jsxs)("div", { className: (0, import_css64.cx)((0, import_browser78.withVendorCSSClassPrefix)((0, import_browser78.bem)("key-value-input", "add-row")), styles["addRow"]), children: [
+      !readOnly && /* @__PURE__ */ (0, import_jsx_runtime101.jsxs)("div", { className: (0, import_css64.cx)((0, import_browser80.withVendorCSSClassPrefix)((0, import_browser80.bem)("key-value-input", "add-row")), styles["addRow"]), children: [
         /* @__PURE__ */ (0, import_jsx_runtime101.jsx)(
           TextField_default,
           {
@@ -15220,7 +15462,7 @@ var KeyValueInput = ({
             value: newKey,
             onChange: (e) => setNewKey(e.target.value),
             disabled,
-            className: (0, import_css64.cx)((0, import_browser78.withVendorCSSClassPrefix)((0, import_browser78.bem)("key-value-input", "pair-input")), styles["pairInput"]),
+            className: (0, import_css64.cx)((0, import_browser80.withVendorCSSClassPrefix)((0, import_browser80.bem)("key-value-input", "pair-input")), styles["pairInput"]),
             "aria-label": "New key"
           }
         ),
@@ -15231,7 +15473,7 @@ var KeyValueInput = ({
             value: newValue,
             onChange: (e) => setNewValue(e.target.value),
             disabled,
-            className: (0, import_css64.cx)((0, import_browser78.withVendorCSSClassPrefix)((0, import_browser78.bem)("key-value-input", "pair-input")), styles["pairInput"]),
+            className: (0, import_css64.cx)((0, import_browser80.withVendorCSSClassPrefix)((0, import_browser80.bem)("key-value-input", "pair-input")), styles["pairInput"]),
             "aria-label": "New value",
             onKeyPress: (e) => {
               if (e.key === "Enter" && !isAddDisabled) {
@@ -15246,15 +15488,15 @@ var KeyValueInput = ({
             type: "button",
             onClick: handleAddPair,
             disabled: isAddDisabled,
-            className: (0, import_css64.cx)((0, import_browser78.withVendorCSSClassPrefix)((0, import_browser78.bem)("key-value-input", "add-button")), styles["addButton"]),
+            className: (0, import_css64.cx)((0, import_browser80.withVendorCSSClassPrefix)((0, import_browser80.bem)("key-value-input", "add-button")), styles["addButton"]),
             "aria-label": "Add new key-value pair",
             children: /* @__PURE__ */ (0, import_jsx_runtime101.jsx)(Plus_default, { width: 16, height: 16 })
           }
         )
       ] })
     ] }),
-    (helperText || error) && /* @__PURE__ */ (0, import_jsx_runtime101.jsx)("div", { className: (0, import_css64.cx)((0, import_browser78.withVendorCSSClassPrefix)((0, import_browser78.bem)("key-value-input", "helper-text")), styles["helperText"]), children: error || helperText }),
-    maxPairs && /* @__PURE__ */ (0, import_jsx_runtime101.jsxs)("div", { className: (0, import_css64.cx)((0, import_browser78.withVendorCSSClassPrefix)((0, import_browser78.bem)("key-value-input", "counter")), styles["counterText"]), children: [
+    (helperText || error) && /* @__PURE__ */ (0, import_jsx_runtime101.jsx)("div", { className: (0, import_css64.cx)((0, import_browser80.withVendorCSSClassPrefix)((0, import_browser80.bem)("key-value-input", "helper-text")), styles["helperText"]), children: error || helperText }),
+    maxPairs && /* @__PURE__ */ (0, import_jsx_runtime101.jsxs)("div", { className: (0, import_css64.cx)((0, import_browser80.withVendorCSSClassPrefix)((0, import_browser80.bem)("key-value-input", "counter")), styles["counterText"]), children: [
       pairs.length,
       " of ",
       maxPairs,
@@ -15300,20 +15542,20 @@ var BaseOrganizationProfile = ({
       editable: false,
       key: "created",
       label: "Created Date",
-      render: (value) => (0, import_browser79.formatDate)(value)
+      render: (value) => (0, import_browser81.formatDate)(value)
     },
     {
       editable: false,
       key: "lastModified",
       label: "Last Modified Date",
-      render: (value) => (0, import_browser79.formatDate)(value)
+      render: (value) => (0, import_browser81.formatDate)(value)
     }
   ]
 }) => {
   const { theme, colorScheme } = useTheme_default();
   const styles = BaseOrganizationProfile_styles_default(theme, colorScheme);
-  const [editedOrganization, setEditedOrganization] = (0, import_react95.useState)(organization);
-  const [editingFields, setEditingFields] = (0, import_react95.useState)({});
+  const [editedOrganization, setEditedOrganization] = (0, import_react97.useState)(organization);
+  const [editingFields, setEditingFields] = (0, import_react97.useState)({});
   const PencilIcon = () => /* @__PURE__ */ (0, import_jsx_runtime102.jsx)(
     "svg",
     {
@@ -15328,13 +15570,13 @@ var BaseOrganizationProfile = ({
       children: /* @__PURE__ */ (0, import_jsx_runtime102.jsx)("path", { d: "M17 3a2.828 2.828 0 1 1 4 4L7.5 20.5 2 22l1.5-5.5L17 3z" })
     }
   );
-  const toggleFieldEdit = (0, import_react95.useCallback)((fieldName) => {
+  const toggleFieldEdit = (0, import_react97.useCallback)((fieldName) => {
     setEditingFields((prev) => ({
       ...prev,
       [fieldName]: !prev[fieldName]
     }));
   }, []);
-  const getFieldPlaceholder = (0, import_react95.useCallback)((fieldKey) => {
+  const getFieldPlaceholder = (0, import_react97.useCallback)((fieldKey) => {
     const fieldLabels = {
       description: "organization description",
       name: "organization name",
@@ -15345,7 +15587,7 @@ var BaseOrganizationProfile = ({
     const fieldLabel = fieldLabels[fieldKey] || fieldKey.toLowerCase();
     return `Enter ${fieldLabel}`;
   }, []);
-  const handleFieldSave = (0, import_react95.useCallback)(
+  const handleFieldSave = (0, import_react97.useCallback)(
     (fieldKey) => {
       if (!onUpdate || !fieldKey) return;
       let fieldValue;
@@ -15364,7 +15606,7 @@ var BaseOrganizationProfile = ({
     },
     [editedOrganization, organization, onUpdate, toggleFieldEdit]
   );
-  const handleFieldCancel = (0, import_react95.useCallback)(
+  const handleFieldCancel = (0, import_react97.useCallback)(
     (fieldKey) => {
       setEditedOrganization((prev) => ({
         ...prev,
@@ -15550,8 +15792,8 @@ var BaseOrganizationProfile = ({
 var BaseOrganizationProfile_default = BaseOrganizationProfile;
 
 // src/api/getOrganization.ts
-var import_browser80 = require("@asgardeo/browser");
-var httpClient7 = import_browser80.AsgardeoSPAClient.getInstance().httpRequest.bind(import_browser80.AsgardeoSPAClient.getInstance());
+var import_browser82 = require("@asgardeo/browser");
+var httpClient7 = import_browser82.AsgardeoSPAClient.getInstance().httpRequest.bind(import_browser82.AsgardeoSPAClient.getInstance());
 var getOrganization = async ({ fetcher, ...requestConfig }) => {
   const defaultFetcher = async (url, config) => {
     const response = await httpClient7({
@@ -15567,7 +15809,7 @@ var getOrganization = async ({ fetcher, ...requestConfig }) => {
       text: () => Promise.resolve(typeof response.data === "string" ? response.data : JSON.stringify(response.data))
     };
   };
-  return (0, import_browser80.getOrganization)({
+  return (0, import_browser82.getOrganization)({
     ...requestConfig,
     fetcher: fetcher || defaultFetcher
   });
@@ -15575,8 +15817,8 @@ var getOrganization = async ({ fetcher, ...requestConfig }) => {
 var getOrganization_default = getOrganization;
 
 // src/api/updateOrganization.ts
-var import_browser81 = require("@asgardeo/browser");
-var httpClient8 = import_browser81.AsgardeoSPAClient.getInstance().httpRequest.bind(import_browser81.AsgardeoSPAClient.getInstance());
+var import_browser83 = require("@asgardeo/browser");
+var httpClient8 = import_browser83.AsgardeoSPAClient.getInstance().httpRequest.bind(import_browser83.AsgardeoSPAClient.getInstance());
 var updateOrganization = async ({
   fetcher,
   ...requestConfig
@@ -15596,7 +15838,7 @@ var updateOrganization = async ({
       text: () => Promise.resolve(typeof response.data === "string" ? response.data : JSON.stringify(response.data))
     };
   };
-  return (0, import_browser81.updateOrganization)({
+  return (0, import_browser83.updateOrganization)({
     ...requestConfig,
     fetcher: fetcher || defaultFetcher
   });
@@ -15605,7 +15847,7 @@ var updateOrganization_default = updateOrganization;
 
 // src/components/presentation/OrganizationProfile/OrganizationProfile.tsx
 var import_jsx_runtime103 = require("react/jsx-runtime");
-var logger9 = (0, import_browser82.createPackageComponentLogger)(
+var logger9 = (0, import_browser84.createPackageComponentLogger)(
   "@asgardeo/react",
   "OrganizationProfile"
 );
@@ -15622,7 +15864,7 @@ var OrganizationProfile = ({
 }) => {
   const { baseUrl } = useAsgardeo_default();
   const { t } = useTranslation_default();
-  const [organization, setOrganization] = (0, import_react96.useState)(null);
+  const [organization, setOrganization] = (0, import_react98.useState)(null);
   const fetchOrganization = async () => {
     if (!baseUrl || !organizationId) {
       return;
@@ -15638,13 +15880,13 @@ var OrganizationProfile = ({
       setOrganization(null);
     }
   };
-  (0, import_react96.useEffect)(() => {
+  (0, import_react98.useEffect)(() => {
     fetchOrganization();
   }, [baseUrl, organizationId]);
   const handleOrganizationUpdate = async (payload) => {
     if (!baseUrl || !organizationId) return;
     try {
-      const operations = (0, import_browser81.createPatchOperations)(payload);
+      const operations = (0, import_browser83.createPatchOperations)(payload);
       await updateOrganization_default({
         baseUrl,
         operations,
@@ -15691,9 +15933,9 @@ var OrganizationSwitcher = ({
     isLoading,
     error
   } = useOrganization_default();
-  const [isCreateOrgOpen, setIsCreateOrgOpen] = (0, import_react97.useState)(false);
-  const [isProfileOpen, setIsProfileOpen] = (0, import_react97.useState)(false);
-  const [isOrganizationListOpen, setIsOrganizationListOpen] = (0, import_react97.useState)(false);
+  const [isCreateOrgOpen, setIsCreateOrgOpen] = (0, import_react99.useState)(false);
+  const [isProfileOpen, setIsProfileOpen] = (0, import_react99.useState)(false);
+  const [isOrganizationListOpen, setIsOrganizationListOpen] = (0, import_react99.useState)(false);
   const { t } = useTranslation_default();
   if (!isSignedIn && fallback) {
     return fallback;
@@ -15784,5 +16026,5 @@ var OrganizationSwitcher = ({
 var OrganizationSwitcher_default = OrganizationSwitcher;
 
 // src/index.ts
-var import_browser83 = require("@asgardeo/browser");
+var import_browser85 = require("@asgardeo/browser");
 //# sourceMappingURL=index.js.map