@asgardeo/react 0.25.6 → 0.25.8

package/dist/cjs/index.js

@@ -6247,6 +6247,40 @@ var createSignInOptionFromAuthenticator = (authenticator, formValues, touchedFie
   ...options
 });
 
+// src/utils/resolveFlowErrorMessage.ts
+var resolveFlowErrorMessage = (error, fallback) => {
+  let raw = "";
+  if (error instanceof Error) {
+    raw = error.message;
+  } else if (typeof error === "string") {
+    raw = error;
+  } else if (error && typeof error === "object") {
+    const { description, message } = error;
+    raw = typeof description === "string" && description || typeof message === "string" && message || "";
+  }
+  if (!raw) {
+    return fallback;
+  }
+  const jsonStart = raw.indexOf("{");
+  const jsonEnd = raw.lastIndexOf("}");
+  if (jsonStart !== -1 && jsonEnd > jsonStart) {
+    try {
+      const payload = JSON.parse(raw.slice(jsonStart, jsonEnd + 1));
+      const extracted = payload?.description || payload?.message;
+      if (typeof extracted === "string" && extracted) {
+        return extracted;
+      }
+    } catch {
+    }
+  }
+  const messagePart = raw.match(/Message:\s*([\s\S]+)$/);
+  if (messagePart?.[1]?.trim()) {
+    return messagePart[1].trim();
+  }
+  return raw;
+};
+var resolveFlowErrorMessage_default = resolveFlowErrorMessage;
+
 // src/components/primitives/Alert/Alert.tsx
 var import_browser44 = require("@asgardeo/browser");
 var import_css27 = require("@emotion/css");
@@ -7359,7 +7393,7 @@ var BaseSignInContent = ({
         }
       }
     } catch (err) {
-      const errorMessage = err instanceof import_browser48.AsgardeoAPIError ? err.message : t("errors.signin.flow.failure");
+      const errorMessage = resolveFlowErrorMessage_default(err, t("errors.signin.flow.failure"));
       setError(errorMessage);
       onError?.(err);
     } finally {
@@ -7568,7 +7602,7 @@ var BaseSignInContent = ({
         }
       }
     } catch (err) {
-      const errorMessage = err instanceof import_browser48.AsgardeoAPIError ? err?.message : "Authenticator selection failed";
+      const errorMessage = resolveFlowErrorMessage_default(err, "Authenticator selection failed");
       setError(errorMessage);
       onError?.(err);
     } finally {
@@ -7654,7 +7688,7 @@ var BaseSignInContent = ({
           );
         }
       } catch (err) {
-        const errorMessage = err instanceof import_browser48.AsgardeoAPIError ? err.message : t("errors.signin.initialization");
+        const errorMessage = resolveFlowErrorMessage_default(err, t("errors.signin.initialization"));
         setError(errorMessage);
         onError?.(err);
       } finally {
@@ -10490,10 +10524,11 @@ var import_browser70 = require("@asgardeo/browser");
 // src/components/presentation/auth/SignUp/v1/BaseSignUp.tsx
 var import_browser68 = require("@asgardeo/browser");
 var import_css46 = require("@emotion/css");
-var import_react75 = require("react");
+var import_react76 = require("react");
 
 // src/components/presentation/auth/SignUp/v1/SignUpOptionFactory.tsx
 var import_browser67 = require("@asgardeo/browser");
+var import_react74 = require("react");
 
 // src/components/adapters/CheckboxInput.tsx
 var import_browser60 = require("@asgardeo/browser");
@@ -10613,9 +10648,10 @@ var FormContainer = (props) => {
       }
     };
     return /* @__PURE__ */ (0, import_jsx_runtime76.jsx)("form", { onSubmit: handleFormSubmit, style: { display: "flex", flexDirection: "column" }, children: component.components.map(
-      (childComponent) => createSignUpComponent({
+      (childComponent, index) => createSignUpComponent({
         ...props,
-        component: childComponent
+        component: childComponent,
+        key: childComponent.id || index
       })
     ) }, component.id);
   }
@@ -10914,7 +10950,7 @@ var Typography_default2 = TypographyComponent;
 
 // src/components/presentation/auth/SignUp/v1/SignUpOptionFactory.tsx
 var import_jsx_runtime80 = require("react/jsx-runtime");
-var createSignUpComponent = ({ component, onSubmit, ...rest }) => {
+var createSignUpElement = ({ component, onSubmit, ...rest }) => {
   switch (component.type) {
     case import_browser67.EmbeddedFlowComponentType.Typography:
       return /* @__PURE__ */ (0, import_jsx_runtime80.jsx)(Typography_default2, { component, onSubmit, ...rest });
@@ -10978,6 +11014,10 @@ var createSignUpComponent = ({ component, onSubmit, ...rest }) => {
       return /* @__PURE__ */ (0, import_jsx_runtime80.jsx)("div", {});
   }
 };
+var createSignUpComponent = ({ key, ...props }) => {
+  const element = createSignUpElement(props);
+  return key === void 0 || key === null ? element : (0, import_react74.cloneElement)(element, { key });
+};
 var createSignUpOptionFromComponent = (component, formValues, touchedFields, formErrors, isLoading, isFormValid, onInputChange, options) => createSignUpComponent({
   component,
   formErrors,
@@ -11007,8 +11047,8 @@ var renderSignUpComponents2 = (components, formValues, touchedFields, formErrors
 
 // src/components/presentation/auth/SignUp/BaseSignUp.styles.ts
 var import_css45 = require("@emotion/css");
-var import_react74 = require("react");
-var useStyles21 = (theme, colorScheme) => (0, import_react74.useMemo)(() => {
+var import_react75 = require("react");
+var useStyles21 = (theme, colorScheme) => (0, import_react75.useMemo)(() => {
   const signUp = import_css45.css`
       min-width: 420px;
       margin: 0 auto;
@@ -11149,6 +11189,13 @@ var logger8 = (0, import_browser68.createPackageComponentLogger)(
   "@asgardeo/react",
   "BaseSignUp"
 );
+var resolveAlertVariant = (type) => {
+  const normalized = type?.toLowerCase() ?? "";
+  if (normalized === "success" || normalized === "error" || normalized === "warning") {
+    return normalized;
+  }
+  return "info";
+};
 var BaseSignUpContent = ({
   afterSignUpUrl,
   onInitialize,
@@ -11173,31 +11220,9 @@ 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_react75.useCallback)(
+  const handleError = (0, import_react76.useCallback)(
     (error) => {
-      let errorMessage = t("errors.signup.flow.failure");
-      if (error && typeof error === "object") {
-        if (error.code && (error.message || error.description)) {
-          errorMessage = error.description || error.message;
-        } else if (error instanceof Error && error.name === "AsgardeoAPIError") {
-          try {
-            const errorResponse = JSON.parse(error.message);
-            if (errorResponse.description) {
-              errorMessage = errorResponse.description;
-            } else if (errorResponse.message) {
-              errorMessage = errorResponse.message;
-            } else {
-              errorMessage = error.message;
-            }
-          } catch {
-            errorMessage = error.message;
-          }
-        } else if (error.message) {
-          errorMessage = error.message;
-        }
-      } else if (typeof error === "string") {
-        errorMessage = error;
-      }
+      const errorMessage = resolveFlowErrorMessage_default(error, t("errors.signup.flow.failure"));
       clearMessages();
       addMessage({
         message: errorMessage,
@@ -11206,11 +11231,25 @@ var BaseSignUpContent = ({
     },
     [t, addMessage, clearMessages]
   );
-  const [isLoading, setIsLoading] = (0, import_react75.useState)(false);
-  const [isFlowInitialized, setIsFlowInitialized] = (0, import_react75.useState)(false);
-  const [currentFlow, setCurrentFlow] = (0, import_react75.useState)(null);
-  const initializationAttemptedRef = (0, import_react75.useRef)(false);
-  const extractFormFields = (0, import_react75.useCallback)(
+  const [isLoading, setIsLoading] = (0, import_react76.useState)(false);
+  const [isFlowInitialized, setIsFlowInitialized] = (0, import_react76.useState)(false);
+  const [isFlowComplete, setIsFlowComplete] = (0, import_react76.useState)(false);
+  const [currentFlow, setCurrentFlow] = (0, import_react76.useState)(null);
+  const initializationAttemptedRef = (0, import_react76.useRef)(false);
+  const handleFlowComplete = (0, import_react76.useCallback)(
+    (response) => {
+      setCurrentFlow(response);
+      setIsFlowComplete(true);
+      clearMessages();
+      addMessage({
+        message: t("signup.success"),
+        type: "success"
+      });
+      onComplete?.(response);
+    },
+    [t, addMessage, clearMessages, onComplete]
+  );
+  const extractFormFields = (0, import_react76.useCallback)(
     (components) => {
       const fields = [];
       const processComponents = (comps) => {
@@ -11263,7 +11302,7 @@ var BaseSignUpContent = ({
     validateForm,
     reset: resetForm
   } = form;
-  const setupFormFields = (0, import_react75.useCallback)(
+  const setupFormFields = (0, import_react76.useCallback)(
     (flowResponse) => {
       const fields = extractFormFields(flowResponse.data?.components || []);
       const initialValues = {};
@@ -11319,9 +11358,14 @@ var BaseSignUpContent = ({
           };
           try {
             const continueResponse = await onSubmit(payload);
+            if (!continueResponse) {
+              popup.close();
+              cleanup();
+              return;
+            }
             onFlowChange?.(continueResponse);
             if (continueResponse.flowStatus === import_browser68.EmbeddedFlowStatus.Complete) {
-              onComplete?.(continueResponse);
+              handleFlowComplete(continueResponse);
             } else if (continueResponse.flowStatus === import_browser68.EmbeddedFlowStatus.Incomplete) {
               setCurrentFlow(continueResponse);
               setupFormFields(continueResponse);
@@ -11372,9 +11416,13 @@ var BaseSignUpContent = ({
                 };
                 try {
                   const continueResponse = await onSubmit(payload);
+                  if (!continueResponse) {
+                    popup.close();
+                    return;
+                  }
                   onFlowChange?.(continueResponse);
                   if (continueResponse.flowStatus === import_browser68.EmbeddedFlowStatus.Complete) {
-                    onComplete?.(continueResponse);
+                    handleFlowComplete(continueResponse);
                   } else if (continueResponse.flowStatus === import_browser68.EmbeddedFlowStatus.Incomplete) {
                     setCurrentFlow(continueResponse);
                     setupFormFields(continueResponse);
@@ -11420,9 +11468,12 @@ var BaseSignUpContent = ({
         ...actionId && { actionId }
       };
       const response = await onSubmit(payload);
+      if (!response) {
+        return;
+      }
       onFlowChange?.(response);
       if (response.flowStatus === import_browser68.EmbeddedFlowStatus.Complete) {
-        onComplete?.(response);
+        handleFlowComplete(response);
         return;
       }
       if (response.flowStatus === import_browser68.EmbeddedFlowStatus.Incomplete) {
@@ -11431,6 +11482,11 @@ var BaseSignUpContent = ({
         }
         setCurrentFlow(response);
         setupFormFields(response);
+        const flowError = response.data?.additionalData?.["error"];
+        if (flowError) {
+          clearMessages();
+          addMessage({ message: String(flowError), type: "error" });
+        }
       }
     } catch (err) {
       handleError(err);
@@ -11465,7 +11521,7 @@ var BaseSignUpContent = ({
   );
   const errorClasses = (0, import_css46.cx)([(0, import_browser68.withVendorCSSClassPrefix)("signup__error")], errorClassName);
   const messageClasses = (0, import_css46.cx)([(0, import_browser68.withVendorCSSClassPrefix)("signup__messages")], messageClassName);
-  const renderComponents = (0, import_react75.useCallback)(
+  const renderComponents = (0, import_react76.useCallback)(
     (components) => renderSignUpComponents2(
       components,
       formValues,
@@ -11495,7 +11551,7 @@ var BaseSignUpContent = ({
       handleSubmit
     ]
   );
-  (0, import_react75.useEffect)(() => {
+  (0, import_react76.useEffect)(() => {
     if (isInitialized && !isFlowInitialized && !initializationAttemptedRef.current) {
       initializationAttemptedRef.current = true;
       (async () => {
@@ -11503,11 +11559,14 @@ var BaseSignUpContent = ({
         clearMessages();
         try {
           const response = await onInitialize();
+          if (!response) {
+            return;
+          }
           setCurrentFlow(response);
           setIsFlowInitialized(true);
           onFlowChange?.(response);
           if (response.flowStatus === import_browser68.EmbeddedFlowStatus.Complete) {
-            onComplete?.(response);
+            handleFlowComplete(response);
             return;
           }
           if (response.flowStatus === import_browser68.EmbeddedFlowStatus.Incomplete) {
@@ -11525,7 +11584,7 @@ var BaseSignUpContent = ({
     isInitialized,
     isFlowInitialized,
     onInitialize,
-    onComplete,
+    handleFlowComplete,
     onError,
     onFlowChange,
     setupFormFields,
@@ -11567,13 +11626,13 @@ var BaseSignUpContent = ({
       flowMessages && flowMessages.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime81.jsx)("div", { className: styles.flowMessagesContainer, children: flowMessages.map((message, index) => /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(
         Alert_default,
         {
-          variant: message.type?.toLowerCase() === "error" ? "error" : "info",
+          variant: resolveAlertVariant(message.type),
           className: (0, import_css46.cx)(styles.flowMessageItem, messageClasses),
           children: /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(Alert_default.Description, { children: message.message })
         },
         message.id || index
       )) }),
-      /* @__PURE__ */ (0, import_jsx_runtime81.jsx)("div", { className: styles.contentContainer, children: currentFlow.data?.components && currentFlow.data.components.length > 0 ? renderComponents(currentFlow.data.components) : /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(Alert_default, { variant: "warning", children: /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(Typography_default, { variant: "body1", children: t("errors.signup.components.not.available") }) }) })
+      !isFlowComplete && /* @__PURE__ */ (0, import_jsx_runtime81.jsx)("div", { className: styles.contentContainer, children: currentFlow.data?.components && currentFlow.data.components.length > 0 ? renderComponents(currentFlow.data.components) : /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(Alert_default, { variant: "warning", children: /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(Typography_default, { variant: "body1", children: t("errors.signup.components.not.available") }) }) })
     ] })
   ] });
 };
@@ -11590,7 +11649,7 @@ var BaseSignUp_default = BaseSignUp;
 // src/components/presentation/auth/SignUp/v2/BaseSignUp.tsx
 var import_browser69 = require("@asgardeo/browser");
 var import_css47 = require("@emotion/css");
-var import_react76 = require("react");
+var import_react77 = require("react");
 
 // src/utils/v2/getAuthComponentHeadings.ts
 var getAuthComponentHeadings = (components, flowTitle, flowSubtitle, defaultTitle, defaultSubtitle) => {
@@ -11679,26 +11738,26 @@ var BaseSignUpContent2 = ({
   showSubtitle = true
 }) => {
   const { theme, colorScheme } = useTheme_default();
-  const customRenderers = (0, import_react76.useContext)(ComponentRendererContext_default);
+  const customRenderers = (0, import_react77.useContext)(ComponentRendererContext_default);
   const { t } = useTranslation_default();
   const { subtitle: flowSubtitle, title: flowTitle, messages: flowMessages, addMessage, clearMessages } = useFlow_default();
   const { meta, isInitialized: isSdkInitialized, getStorageManager } = useAsgardeo_default();
   const styles = BaseSignUp_styles_default(theme, colorScheme);
-  const [isLoading, setIsLoading] = (0, import_react76.useState)(false);
-  const [isFlowInitialized, setIsFlowInitialized] = (0, import_react76.useState)(false);
-  const [currentFlow, setCurrentFlow] = (0, import_react76.useState)(null);
-  const [apiError, setApiError] = (0, import_react76.useState)(null);
-  const [passkeyState, setPasskeyState] = (0, import_react76.useState)({
+  const [isLoading, setIsLoading] = (0, import_react77.useState)(false);
+  const [isFlowInitialized, setIsFlowInitialized] = (0, import_react77.useState)(false);
+  const [currentFlow, setCurrentFlow] = (0, import_react77.useState)(null);
+  const [apiError, setApiError] = (0, import_react77.useState)(null);
+  const [passkeyState, setPasskeyState] = (0, import_react77.useState)({
     actionId: null,
     creationOptions: null,
     error: null,
     executionId: null,
     isActive: false
   });
-  const challengeTokenRef = (0, import_react76.useRef)(null);
-  const initializationAttemptedRef = (0, import_react76.useRef)(false);
-  const passkeyProcessedRef = (0, import_react76.useRef)(false);
-  (0, import_react76.useEffect)(() => {
+  const challengeTokenRef = (0, import_react77.useRef)(null);
+  const initializationAttemptedRef = (0, import_react77.useRef)(false);
+  const passkeyProcessedRef = (0, import_react77.useRef)(false);
+  (0, import_react77.useEffect)(() => {
     if (!isSdkInitialized) return;
     (async () => {
       try {
@@ -11726,7 +11785,7 @@ var BaseSignUpContent2 = ({
       logger9.warn("Failed to persist challenge token in storage.");
     }
   };
-  const handleError = (0, import_react76.useCallback)(
+  const handleError = (0, import_react77.useCallback)(
     (error) => {
       const errorMessage = error?.failureReason || extractErrorMessage(error, t);
       setApiError(error instanceof Error ? error : new Error(errorMessage));
@@ -11738,7 +11797,7 @@ var BaseSignUpContent2 = ({
     },
     [t, addMessage, clearMessages]
   );
-  const normalizeFlowResponseLocal = (0, import_react76.useCallback)(
+  const normalizeFlowResponseLocal = (0, import_react77.useCallback)(
     (response) => {
       if (response?.data?.components && Array.isArray(response.data.components)) {
         return response;
@@ -11765,7 +11824,7 @@ var BaseSignUpContent2 = ({
     },
     [t, children]
   );
-  const extractFormFields = (0, import_react76.useCallback)(
+  const extractFormFields = (0, import_react77.useCallback)(
     (components) => {
       const fields = [];
       const processComponents = (comps) => {
@@ -11816,7 +11875,7 @@ var BaseSignUpContent2 = ({
     touchAllFields,
     reset: resetForm
   } = form;
-  const setupFormFields = (0, import_react76.useCallback)(
+  const setupFormFields = (0, import_react77.useCallback)(
     (flowResponse) => {
       const fields = extractFormFields(flowResponse.data?.components || []);
       const initialValues = {};
@@ -11988,6 +12047,9 @@ var BaseSignUpContent2 = ({
         inputs: filteredInputs
       };
       const rawResponse = await onSubmit(payload);
+      if (!rawResponse) {
+        return;
+      }
       const response = normalizeFlowResponseLocal(rawResponse);
       onFlowChange?.(response);
       await setChallengeToken(response.challengeToken ?? null);
@@ -12023,7 +12085,7 @@ var BaseSignUpContent2 = ({
       setIsLoading(false);
     }
   };
-  (0, import_react76.useEffect)(() => {
+  (0, import_react77.useEffect)(() => {
     if (!passkeyState.isActive || !passkeyState.creationOptions || !passkeyState.executionId) {
       return;
     }
@@ -12090,7 +12152,7 @@ var BaseSignUpContent2 = ({
   );
   const errorClasses = (0, import_css47.cx)([(0, import_browser69.withVendorCSSClassPrefix)("signup__error")], errorClassName);
   const messageClasses = (0, import_css47.cx)([(0, import_browser69.withVendorCSSClassPrefix)("signup__messages")], messageClassName);
-  const renderComponents = (0, import_react76.useCallback)(
+  const renderComponents = (0, import_react77.useCallback)(
     (components) => renderSignUpComponents(
       components,
       formValues,
@@ -12134,7 +12196,7 @@ var BaseSignUpContent2 = ({
       state: urlParams.get("state")
     };
   };
-  (0, import_react76.useEffect)(() => {
+  (0, import_react77.useEffect)(() => {
     const urlParams = getUrlParams2();
     if (urlParams.code || urlParams.state) {
       return;
@@ -12392,12 +12454,13 @@ var import_browser77 = require("@asgardeo/browser");
 // src/components/presentation/auth/Recovery/v1/BaseRecovery.tsx
 var import_browser75 = require("@asgardeo/browser");
 var import_css48 = require("@emotion/css");
-var import_react77 = require("react");
+var import_react79 = require("react");
 
 // src/components/presentation/auth/Recovery/v1/RecoveryOptionFactory.tsx
 var import_browser74 = require("@asgardeo/browser");
+var import_react78 = require("react");
 var import_jsx_runtime87 = require("react/jsx-runtime");
-var createRecoveryComponent = ({ component, onSubmit, ...rest }) => {
+var createRecoveryElement = ({ component, onSubmit, ...rest }) => {
   switch (component.type) {
     case import_browser74.EmbeddedFlowComponentType.Typography:
       return /* @__PURE__ */ (0, import_jsx_runtime87.jsx)(Typography_default2, { component, onSubmit, ...rest });
@@ -12461,6 +12524,10 @@ var createRecoveryComponent = ({ component, onSubmit, ...rest }) => {
       return /* @__PURE__ */ (0, import_jsx_runtime87.jsx)("div", {});
   }
 };
+var createRecoveryComponent = ({ key, ...props }) => {
+  const element = createRecoveryElement(props);
+  return key === void 0 || key === null ? element : (0, import_react78.cloneElement)(element, { key });
+};
 var createRecoveryOptionFromComponent = (component, formValues, touchedFields, formErrors, isLoading, isFormValid, onInputChange, options) => createRecoveryComponent({
   component,
   formErrors,
@@ -12513,7 +12580,7 @@ var BaseRecoveryContent = ({
   const { subtitle: flowSubtitle, title: flowTitle, messages: flowMessages, addMessage, clearMessages } = useFlow_default();
   useAsgardeo_default();
   const styles = BaseSignUp_styles_default(theme, colorScheme);
-  const handleError = (0, import_react77.useCallback)(
+  const handleError = (0, import_react79.useCallback)(
     (error) => {
       let errorMessage = t("errors.recovery.flow.failure");
       if (error && typeof error === "object") {
@@ -12537,11 +12604,11 @@ var BaseRecoveryContent = ({
     },
     [t, addMessage, clearMessages]
   );
-  const [isLoading, setIsLoading] = (0, import_react77.useState)(false);
-  const [isFlowInitialized, setIsFlowInitialized] = (0, import_react77.useState)(false);
-  const [currentFlow, setCurrentFlow] = (0, import_react77.useState)(null);
-  const initializationAttemptedRef = (0, import_react77.useRef)(false);
-  const extractFormFields = (0, import_react77.useCallback)(
+  const [isLoading, setIsLoading] = (0, import_react79.useState)(false);
+  const [isFlowInitialized, setIsFlowInitialized] = (0, import_react79.useState)(false);
+  const [currentFlow, setCurrentFlow] = (0, import_react79.useState)(null);
+  const initializationAttemptedRef = (0, import_react79.useRef)(false);
+  const extractFormFields = (0, import_react79.useCallback)(
     (components) => {
       const fields = [];
       const processComponents = (comps) => {
@@ -12595,7 +12662,7 @@ var BaseRecoveryContent = ({
     touchAllFields,
     reset: resetForm
   } = form;
-  const setupFormFields = (0, import_react77.useCallback)(
+  const setupFormFields = (0, import_react79.useCallback)(
     (flowResponse) => {
       const fields = extractFormFields(flowResponse.data?.components || []);
       const initialValues = {};
@@ -12607,7 +12674,7 @@ var BaseRecoveryContent = ({
     },
     [extractFormFields, resetForm, setFormValue]
   );
-  const handleInputChange = (0, import_react77.useCallback)(
+  const handleInputChange = (0, import_react79.useCallback)(
     (name, value) => {
       setFormValue(name, value);
       setFormTouched(name, true);
@@ -12682,7 +12749,7 @@ var BaseRecoveryContent = ({
   );
   const errorClasses = (0, import_css48.cx)([(0, import_browser75.withVendorCSSClassPrefix)("recovery__error")], errorClassName);
   const messageClasses = (0, import_css48.cx)([(0, import_browser75.withVendorCSSClassPrefix)("recovery__messages")], messageClassName);
-  const renderComponents = (0, import_react77.useCallback)(
+  const renderComponents = (0, import_react79.useCallback)(
     (components) => renderRecoveryComponents2(
       components,
       formValues,
@@ -12713,7 +12780,7 @@ var BaseRecoveryContent = ({
       variant
     ]
   );
-  (0, import_react77.useEffect)(() => {
+  (0, import_react79.useEffect)(() => {
     if (isInitialized && !isFlowInitialized && !initializationAttemptedRef.current) {
       initializationAttemptedRef.current = true;
       (async () => {
@@ -12797,7 +12864,7 @@ var BaseRecovery_default = BaseRecovery;
 // src/components/presentation/auth/Recovery/v2/BaseRecovery.tsx
 var import_browser76 = require("@asgardeo/browser");
 var import_css49 = require("@emotion/css");
-var import_react78 = require("react");
+var import_react80 = require("react");
 var import_jsx_runtime89 = require("react/jsx-runtime");
 var BaseRecoveryContent2 = ({
   onInitialize,
@@ -12819,18 +12886,18 @@ var BaseRecoveryContent2 = ({
   showSubtitle = true
 }) => {
   const { theme, colorScheme } = useTheme_default();
-  const customRenderers = (0, import_react78.useContext)(ComponentRendererContext_default);
+  const customRenderers = (0, import_react80.useContext)(ComponentRendererContext_default);
   const { t } = useTranslation_default();
   const { subtitle: flowSubtitle, title: flowTitle, messages: flowMessages, addMessage, clearMessages } = useFlow_default();
   const { meta } = useAsgardeo_default();
   const styles = BaseSignUp_styles_default(theme, colorScheme);
-  const [isLoading, setIsLoading] = (0, import_react78.useState)(false);
-  const [isFlowInitialized, setIsFlowInitialized] = (0, import_react78.useState)(false);
-  const [currentFlow, setCurrentFlow] = (0, import_react78.useState)(null);
-  const [apiError, setApiError] = (0, import_react78.useState)(null);
-  const initializationAttemptedRef = (0, import_react78.useRef)(false);
-  const challengeTokenRef = (0, import_react78.useRef)(null);
-  const handleError = (0, import_react78.useCallback)(
+  const [isLoading, setIsLoading] = (0, import_react80.useState)(false);
+  const [isFlowInitialized, setIsFlowInitialized] = (0, import_react80.useState)(false);
+  const [currentFlow, setCurrentFlow] = (0, import_react80.useState)(null);
+  const [apiError, setApiError] = (0, import_react80.useState)(null);
+  const initializationAttemptedRef = (0, import_react80.useRef)(false);
+  const challengeTokenRef = (0, import_react80.useRef)(null);
+  const handleError = (0, import_react80.useCallback)(
     (error) => {
       const errorMessage = error?.failureReason || extractErrorMessage(error, t);
       setApiError(error instanceof Error ? error : new Error(errorMessage));
@@ -12839,7 +12906,7 @@ var BaseRecoveryContent2 = ({
     },
     [t, addMessage, clearMessages]
   );
-  const normalizeFlowResponseLocal = (0, import_react78.useCallback)(
+  const normalizeFlowResponseLocal = (0, import_react80.useCallback)(
     (response) => {
       if (response?.data?.components && Array.isArray(response.data.components)) {
         return response;
@@ -12857,7 +12924,7 @@ var BaseRecoveryContent2 = ({
     },
     [t, meta]
   );
-  const extractFormFields = (0, import_react78.useCallback)(
+  const extractFormFields = (0, import_react80.useCallback)(
     (components) => {
       const fields = [];
       const processComponents = (comps) => {
@@ -12908,7 +12975,7 @@ var BaseRecoveryContent2 = ({
     touchAllFields,
     reset: resetForm
   } = form;
-  const setupFormFields = (0, import_react78.useCallback)(
+  const setupFormFields = (0, import_react80.useCallback)(
     (flowResponse) => {
       const fields = extractFormFields(flowResponse.data?.components || []);
       const initialValues = {};
@@ -13000,7 +13067,7 @@ var BaseRecoveryContent2 = ({
   );
   const errorClasses = (0, import_css49.cx)([(0, import_browser76.withVendorCSSClassPrefix)("recovery__error")], errorClassName);
   const messageClasses = (0, import_css49.cx)([(0, import_browser76.withVendorCSSClassPrefix)("recovery__messages")], messageClassName);
-  const renderComponents = (0, import_react78.useCallback)(
+  const renderComponents = (0, import_react80.useCallback)(
     (components) => renderRecoveryComponents(
       components,
       formValues,
@@ -13038,7 +13105,7 @@ var BaseRecoveryContent2 = ({
       variant
     ]
   );
-  (0, import_react78.useEffect)(() => {
+  (0, import_react80.useEffect)(() => {
     if (isInitialized && !isFlowInitialized && !initializationAttemptedRef.current) {
       initializationAttemptedRef.current = true;
       (async () => {
@@ -13220,7 +13287,7 @@ var Recovery_default = Recovery;
 
 // src/components/presentation/auth/Recovery/v2/Recovery.tsx
 var import_browser79 = require("@asgardeo/browser");
-var import_react79 = require("react");
+var import_react81 = require("react");
 var import_jsx_runtime92 = require("react/jsx-runtime");
 var Recovery2 = ({
   className,
@@ -13233,7 +13300,7 @@ var Recovery2 = ({
   ...rest
 }) => {
   const { recover, isInitialized, applicationId } = useAsgardeo_default();
-  const handleInitialize = (0, import_react79.useCallback)(
+  const handleInitialize = (0, import_react81.useCallback)(
     async (payload) => {
       const urlParams = new URL(window.location.href).searchParams;
       const applicationIdFromUrl = urlParams.get("applicationId");
@@ -13258,11 +13325,11 @@ var Recovery2 = ({
     },
     [applicationId, tokenUrlParam, recover]
   );
-  const handleOnSubmit = (0, import_react79.useCallback)(
+  const handleOnSubmit = (0, import_react81.useCallback)(
     async (payload) => await recover(payload),
     [recover]
   );
-  const handleComplete = (0, import_react79.useCallback)(
+  const handleComplete = (0, import_react81.useCallback)(
     (response) => {
       onComplete?.(response);
       if (afterRecoveryUrl) {
@@ -13304,17 +13371,17 @@ var Recovery_default3 = Recovery3;
 
 // src/components/presentation/auth/InviteUser/v2/InviteUser.tsx
 var import_browser82 = require("@asgardeo/browser");
-var import_react82 = require("react");
+var import_react84 = require("react");
 
 // src/components/presentation/auth/InviteUser/v2/BaseInviteUser.tsx
 var import_browser81 = require("@asgardeo/browser");
 var import_css51 = require("@emotion/css");
-var import_react81 = require("react");
+var import_react83 = require("react");
 
 // src/components/presentation/auth/InviteUser/v2/BaseInviteUser.styles.ts
 var import_css50 = require("@emotion/css");
-var import_react80 = require("react");
-var useStyles22 = (theme, colorScheme) => (0, import_react80.useMemo)(() => {
+var import_react82 = require("react");
+var useStyles22 = (theme, colorScheme) => (0, import_react82.useMemo)(() => {
   const card = import_css50.css`
       background: ${theme.vars.colors.background.surface};
       border-radius: ${theme.vars.borderRadius.large};
@@ -13371,19 +13438,19 @@ var BaseInviteUser = ({
   const { meta, isInitialized: isSdkInitialized, getStorageManager } = useAsgardeo_default();
   const { t } = useTranslation_default(preferences?.i18n);
   const { theme } = useTheme_default();
-  const customRenderers = (0, import_react81.useContext)(ComponentRendererContext_default);
+  const customRenderers = (0, import_react83.useContext)(ComponentRendererContext_default);
   const styles = BaseInviteUser_styles_default(theme, theme.vars.colors.text.primary);
-  const [isLoading, setIsLoading] = (0, import_react81.useState)(false);
-  const [isFlowInitialized, setIsFlowInitialized] = (0, import_react81.useState)(false);
-  const [currentFlow, setCurrentFlow] = (0, import_react81.useState)(null);
-  const [apiError, setApiError] = (0, import_react81.useState)(null);
-  const [formValues, setFormValues] = (0, import_react81.useState)({});
-  const [formErrors, setFormErrors] = (0, import_react81.useState)({});
-  const [touchedFields, setTouchedFields] = (0, import_react81.useState)({});
-  const [isFormValid, setIsFormValid] = (0, import_react81.useState)(true);
-  const challengeTokenRef = (0, import_react81.useRef)(null);
-  const initializationAttemptedRef = (0, import_react81.useRef)(false);
-  (0, import_react81.useEffect)(() => {
+  const [isLoading, setIsLoading] = (0, import_react83.useState)(false);
+  const [isFlowInitialized, setIsFlowInitialized] = (0, import_react83.useState)(false);
+  const [currentFlow, setCurrentFlow] = (0, import_react83.useState)(null);
+  const [apiError, setApiError] = (0, import_react83.useState)(null);
+  const [formValues, setFormValues] = (0, import_react83.useState)({});
+  const [formErrors, setFormErrors] = (0, import_react83.useState)({});
+  const [touchedFields, setTouchedFields] = (0, import_react83.useState)({});
+  const [isFormValid, setIsFormValid] = (0, import_react83.useState)(true);
+  const challengeTokenRef = (0, import_react83.useRef)(null);
+  const initializationAttemptedRef = (0, import_react83.useRef)(false);
+  (0, import_react83.useEffect)(() => {
     if (!isSdkInitialized) return;
     (async () => {
       try {
@@ -13411,7 +13478,7 @@ var BaseInviteUser = ({
       import_browser81.logger.warn("Failed to persist challenge token in storage.");
     }
   };
-  const handleError = (0, import_react81.useCallback)(
+  const handleError = (0, import_react83.useCallback)(
     (error) => {
       const errorMessage = error?.failureReason || extractErrorMessage(error, t, "components.inviteUser.errors.generic");
       setApiError(error instanceof Error ? error : new Error(errorMessage));
@@ -13419,7 +13486,7 @@ var BaseInviteUser = ({
     },
     [t, onError]
   );
-  const normalizeFlowResponseLocal = (0, import_react81.useCallback)(
+  const normalizeFlowResponseLocal = (0, import_react83.useCallback)(
     (response) => {
       if (!response?.data?.meta?.components) {
         return response;
@@ -13447,7 +13514,7 @@ var BaseInviteUser = ({
     },
     [t, children]
   );
-  const handleInputChange = (0, import_react81.useCallback)((name, value) => {
+  const handleInputChange = (0, import_react83.useCallback)((name, value) => {
     setFormValues((prev) => ({ ...prev, [name]: value }));
     setFormErrors((prev) => {
       const newErrors = { ...prev };
@@ -13455,10 +13522,10 @@ var BaseInviteUser = ({
       return newErrors;
     });
   }, []);
-  const handleInputBlur = (0, import_react81.useCallback)((name) => {
+  const handleInputBlur = (0, import_react83.useCallback)((name) => {
     setTouchedFields((prev) => ({ ...prev, [name]: true }));
   }, []);
-  const validateForm = (0, import_react81.useCallback)(
+  const validateForm = (0, import_react83.useCallback)(
     (components2) => {
       const errors = {};
       const validateComponents = (comps) => {
@@ -13482,7 +13549,7 @@ var BaseInviteUser = ({
     },
     [formValues]
   );
-  const handleSubmit = (0, import_react81.useCallback)(
+  const handleSubmit = (0, import_react83.useCallback)(
     async (component, data) => {
       if (!currentFlow) {
         return;
@@ -13533,7 +13600,7 @@ var BaseInviteUser = ({
     },
     [currentFlow, formValues, validateForm, onSubmit, onFlowChange, handleError, normalizeFlowResponseLocal]
   );
-  const resetFlow = (0, import_react81.useCallback)(() => {
+  const resetFlow = (0, import_react83.useCallback)(() => {
     setIsFlowInitialized(false);
     setCurrentFlow(null);
     setApiError(null);
@@ -13542,7 +13609,7 @@ var BaseInviteUser = ({
     setTouchedFields({});
     initializationAttemptedRef.current = false;
   }, []);
-  (0, import_react81.useEffect)(() => {
+  (0, import_react83.useEffect)(() => {
     if (isInitialized && !isFlowInitialized && !initializationAttemptedRef.current) {
       initializationAttemptedRef.current = true;
       (async () => {
@@ -13570,7 +13637,7 @@ var BaseInviteUser = ({
       })();
     }
   }, [isInitialized, isFlowInitialized, onInitialize, onFlowChange, handleError, normalizeFlowResponseLocal]);
-  (0, import_react81.useEffect)(() => {
+  (0, import_react83.useEffect)(() => {
     if (currentFlow && isFlowInitialized) {
       const components2 = currentFlow.data?.components || [];
       if (components2.length > 0) {
@@ -13579,7 +13646,7 @@ var BaseInviteUser = ({
       }
     }
   }, [formValues, currentFlow, isFlowInitialized, validateForm]);
-  const extractHeadings = (0, import_react81.useCallback)((components2) => {
+  const extractHeadings = (0, import_react83.useCallback)((components2) => {
     let title2;
     let subtitle2;
     components2.forEach((comp) => {
@@ -13593,13 +13660,13 @@ var BaseInviteUser = ({
     });
     return { subtitle: subtitle2, title: title2 };
   }, []);
-  const filterHeadings = (0, import_react81.useCallback)(
+  const filterHeadings = (0, import_react83.useCallback)(
     (components2) => components2.filter(
       (comp) => !(comp.type === "TEXT" && (comp.variant === "HEADING_1" || comp.variant === "HEADING_2"))
     ),
     []
   );
-  const renderComponents = (0, import_react81.useCallback)(
+  const renderComponents = (0, import_react83.useCallback)(
     (components2) => renderInviteUserComponents(
       components2,
       formValues,
@@ -13732,7 +13799,7 @@ var InviteUser = ({
     });
     return response.data;
   };
-  const fetchOrganizationUnitChildren = (0, import_react82.useCallback)(
+  const fetchOrganizationUnitChildren = (0, import_react84.useCallback)(
     async (parentId, limit, offset4) => {
       const accessToken = await getAccessToken();
       return (0, import_browser82.getOrganizationUnitChildren)({
@@ -13766,16 +13833,16 @@ var InviteUser = ({
 var InviteUser_default = InviteUser;
 
 // src/components/presentation/auth/AcceptInvite/v2/AcceptInvite.tsx
-var import_react85 = require("react");
+var import_react87 = require("react");
 
 // src/components/presentation/auth/AcceptInvite/v2/BaseAcceptInvite.tsx
 var import_css53 = require("@emotion/css");
-var import_react84 = require("react");
+var import_react86 = require("react");
 
 // src/components/presentation/auth/AcceptInvite/v2/BaseAcceptInvite.styles.ts
 var import_css52 = require("@emotion/css");
-var import_react83 = require("react");
-var useStyles23 = (theme, colorScheme) => (0, import_react83.useMemo)(() => {
+var import_react85 = require("react");
+var useStyles23 = (theme, colorScheme) => (0, import_react85.useMemo)(() => {
   const card = import_css52.css`
       background: ${theme.vars.colors.background.surface};
       border-radius: ${theme.vars.borderRadius.large};
@@ -13833,22 +13900,22 @@ var BaseAcceptInvite = ({
   const { meta, isInitialized, getStorageManager } = useAsgardeo_default();
   const { t } = useTranslation_default(preferences?.i18n);
   const { theme } = useTheme_default();
-  const customRenderers = (0, import_react84.useContext)(ComponentRendererContext_default);
+  const customRenderers = (0, import_react86.useContext)(ComponentRendererContext_default);
   const styles = BaseAcceptInvite_styles_default(theme, theme.vars.colors.text.primary);
-  const [isLoading, setIsLoading] = (0, import_react84.useState)(false);
-  const [isValidatingToken, setIsValidatingToken] = (0, import_react84.useState)(true);
-  const [isTokenInvalid, setIsTokenInvalid] = (0, import_react84.useState)(false);
-  const [isComplete, setIsComplete] = (0, import_react84.useState)(false);
-  const [currentFlow, setCurrentFlow] = (0, import_react84.useState)(null);
-  const [apiError, setApiError] = (0, import_react84.useState)(null);
-  const [formValues, setFormValues] = (0, import_react84.useState)({});
-  const [formErrors, setFormErrors] = (0, import_react84.useState)({});
-  const [touchedFields, setTouchedFields] = (0, import_react84.useState)({});
-  const [isFormValid, setIsFormValid] = (0, import_react84.useState)(true);
-  const [isStorageReady, setIsStorageReady] = (0, import_react84.useState)(false);
-  const challengeTokenRef = (0, import_react84.useRef)(null);
-  const tokenValidationAttemptedRef = (0, import_react84.useRef)(false);
-  (0, import_react84.useEffect)(() => {
+  const [isLoading, setIsLoading] = (0, import_react86.useState)(false);
+  const [isValidatingToken, setIsValidatingToken] = (0, import_react86.useState)(true);
+  const [isTokenInvalid, setIsTokenInvalid] = (0, import_react86.useState)(false);
+  const [isComplete, setIsComplete] = (0, import_react86.useState)(false);
+  const [currentFlow, setCurrentFlow] = (0, import_react86.useState)(null);
+  const [apiError, setApiError] = (0, import_react86.useState)(null);
+  const [formValues, setFormValues] = (0, import_react86.useState)({});
+  const [formErrors, setFormErrors] = (0, import_react86.useState)({});
+  const [touchedFields, setTouchedFields] = (0, import_react86.useState)({});
+  const [isFormValid, setIsFormValid] = (0, import_react86.useState)(true);
+  const [isStorageReady, setIsStorageReady] = (0, import_react86.useState)(false);
+  const challengeTokenRef = (0, import_react86.useRef)(null);
+  const tokenValidationAttemptedRef = (0, import_react86.useRef)(false);
+  (0, import_react86.useEffect)(() => {
     if (!isInitialized) return;
     (async () => {
       try {
@@ -13873,7 +13940,7 @@ var BaseAcceptInvite = ({
       }
     }
   };
-  const handleError = (0, import_react84.useCallback)(
+  const handleError = (0, import_react86.useCallback)(
     (error) => {
       const errorMessage = error?.failureReason || extractErrorMessage(error, t, "components.acceptInvite.errors.generic");
       setApiError(error instanceof Error ? error : new Error(errorMessage));
@@ -13881,7 +13948,7 @@ var BaseAcceptInvite = ({
     },
     [t, onError]
   );
-  const normalizeFlowResponseLocal = (0, import_react84.useCallback)(
+  const normalizeFlowResponseLocal = (0, import_react86.useCallback)(
     (response) => {
       if (!response?.data?.meta?.components) {
         return response;
@@ -13952,7 +14019,7 @@ var BaseAcceptInvite = ({
     },
     tokenValidationAttemptedRef
   });
-  const handleInputChange = (0, import_react84.useCallback)((name, value) => {
+  const handleInputChange = (0, import_react86.useCallback)((name, value) => {
     setFormValues((prev) => ({ ...prev, [name]: value }));
     setFormErrors((prev) => {
       const newErrors = { ...prev };
@@ -13961,10 +14028,10 @@ var BaseAcceptInvite = ({
     });
     setIsFormValid(true);
   }, []);
-  const handleInputBlur = (0, import_react84.useCallback)((name) => {
+  const handleInputBlur = (0, import_react86.useCallback)((name) => {
     setTouchedFields((prev) => ({ ...prev, [name]: true }));
   }, []);
-  const validateForm = (0, import_react84.useCallback)(
+  const validateForm = (0, import_react86.useCallback)(
     (components2) => {
       const errors = {};
       const validateComponents = (comps) => {
@@ -13985,7 +14052,7 @@ var BaseAcceptInvite = ({
     },
     [formValues, t]
   );
-  const handleSubmit = (0, import_react84.useCallback)(
+  const handleSubmit = (0, import_react86.useCallback)(
     async (component, data) => {
       if (!currentFlow) {
         return;
@@ -14060,7 +14127,7 @@ var BaseAcceptInvite = ({
       normalizeFlowResponseLocal
     ]
   );
-  (0, import_react84.useEffect)(() => {
+  (0, import_react86.useEffect)(() => {
     if (tokenValidationAttemptedRef.current) {
       return;
     }
@@ -14114,7 +14181,7 @@ var BaseAcceptInvite = ({
       }
     })();
   }, [executionId, inviteToken, onSubmit, onFlowChange, handleError, normalizeFlowResponseLocal]);
-  const extractHeadings = (0, import_react84.useCallback)((components2) => {
+  const extractHeadings = (0, import_react86.useCallback)((components2) => {
     let title2;
     let subtitle2;
     components2.forEach((comp) => {
@@ -14128,7 +14195,7 @@ var BaseAcceptInvite = ({
     });
     return { subtitle: subtitle2, title: title2 };
   }, []);
-  const filterHeadings = (0, import_react84.useCallback)(
+  const filterHeadings = (0, import_react86.useCallback)(
     (components2) => components2.filter(
       (comp) => !(comp.type === "TEXT" && (comp.variant === "HEADING_1" || comp.variant === "HEADING_2"))
     ),
@@ -14243,10 +14310,10 @@ var AcceptInvite = ({
   showTitle = true,
   showSubtitle = true
 }) => {
-  const { executionId: urlExecutionId, inviteToken: urlInviteToken } = (0, import_react85.useMemo)(() => getUrlParams(), []);
+  const { executionId: urlExecutionId, inviteToken: urlInviteToken } = (0, import_react87.useMemo)(() => getUrlParams(), []);
   const executionId = executionIdProp || urlExecutionId;
   const inviteToken = inviteTokenProp || urlInviteToken;
-  const apiBaseUrl = (0, import_react85.useMemo)(() => {
+  const apiBaseUrl = (0, import_react87.useMemo)(() => {
     if (baseUrl) {
       return baseUrl;
     }
@@ -14296,9 +14363,9 @@ var AcceptInvite_default = AcceptInvite;
 
 // src/components/auth/Callback/Callback.tsx
 var import_browser83 = require("@asgardeo/browser");
-var import_react86 = require("react");
+var import_react88 = require("react");
 var Callback = ({ onNavigate, onError }) => {
-  const processingRef = (0, import_react86.useRef)(false);
+  const processingRef = (0, import_react88.useRef)(false);
   const navigate6 = (path) => {
     if (onNavigate) {
       onNavigate(path);
@@ -14306,7 +14373,7 @@ var Callback = ({ onNavigate, onError }) => {
       (0, import_browser83.navigate)(path);
     }
   };
-  (0, import_react86.useEffect)(() => {
+  (0, import_react88.useEffect)(() => {
     const processOAuthCallback = () => {
       if (processingRef.current) {
         return;
@@ -14434,12 +14501,12 @@ var Organization_default = Organization5;
 // src/components/presentation/UserProfile/BaseUserProfile.tsx
 var import_browser89 = require("@asgardeo/browser");
 var import_css61 = require("@emotion/css");
-var import_react95 = require("react");
+var import_react97 = require("react");
 
 // src/components/presentation/UserProfile/BaseUserProfile.styles.ts
 var import_browser84 = require("@asgardeo/browser");
 var import_css54 = require("@emotion/css");
-var import_react87 = require("react");
+var import_react89 = require("react");
 var useStyles24 = (theme, colorScheme) => {
   const valuePlaceholder = import_css54.css`
     font-style: italic;
@@ -14484,7 +14551,7 @@ var useStyles24 = (theme, colorScheme) => {
     padding: ${theme.vars.spacing.unit};
     vertical-align: top;
   `;
-  return (0, import_react87.useMemo)(() => {
+  return (0, import_react89.useMemo)(() => {
     const root = import_css54.css`
       padding: calc(${theme.vars.spacing.unit} * 4);
       min-width: 600px;
@@ -14696,12 +14763,12 @@ var getDisplayName_default = getDisplayName;
 // src/components/primitives/Avatar/Avatar.tsx
 var import_browser86 = require("@asgardeo/browser");
 var import_css56 = require("@emotion/css");
-var import_react89 = require("react");
+var import_react91 = require("react");
 
 // src/components/primitives/Avatar/Avatar.styles.ts
 var import_css55 = require("@emotion/css");
-var import_react88 = require("react");
-var useStyles25 = (theme, colorScheme, size, variant, backgroundColor) => (0, import_react88.useMemo)(() => {
+var import_react90 = require("react");
+var useStyles25 = (theme, colorScheme, size, variant, backgroundColor) => (0, import_react90.useMemo)(() => {
   const baseAvatar = import_css55.css`
       align-items: center;
       background: ${backgroundColor || theme.vars.colors.background.surface};
@@ -14795,7 +14862,7 @@ var Avatar = ({
     const colors = generateColor(seed);
     return `linear-gradient(${angle}deg, ${colors})`;
   };
-  const backgroundColor = (0, import_react89.useMemo)(() => {
+  const backgroundColor = (0, import_react91.useMemo)(() => {
     if (!name || imageUrl) {
       return void 0;
     }
@@ -14856,13 +14923,13 @@ var Avatar = ({
 // src/components/primitives/Dialog/Dialog.tsx
 var import_browser87 = require("@asgardeo/browser");
 var import_css58 = require("@emotion/css");
-var import_react91 = require("@floating-ui/react");
-var import_react92 = require("react");
+var import_react93 = require("@floating-ui/react");
+var import_react94 = require("react");
 
 // src/components/primitives/Dialog/Dialog.styles.ts
 var import_css57 = require("@emotion/css");
-var import_react90 = require("react");
-var useStyles26 = (theme, colorScheme) => (0, import_react90.useMemo)(() => {
+var import_react92 = require("react");
+var useStyles26 = (theme, colorScheme) => (0, import_react92.useMemo)(() => {
   const overlay = import_css57.css`
       background-color: rgba(0, 0, 0, 0.5);
       display: flex;
@@ -15023,23 +15090,23 @@ function useDialog({
   open: controlledOpen,
   onOpenChange: setControlledOpen
 } = {}) {
-  const [uncontrolledOpen, setUncontrolledOpen] = (0, import_react92.useState)(initialOpen);
-  const [labelId, setLabelId] = (0, import_react92.useState)();
-  const [descriptionId, setDescriptionId] = (0, import_react92.useState)();
+  const [uncontrolledOpen, setUncontrolledOpen] = (0, import_react94.useState)(initialOpen);
+  const [labelId, setLabelId] = (0, import_react94.useState)();
+  const [descriptionId, setDescriptionId] = (0, import_react94.useState)();
   const open = controlledOpen ?? uncontrolledOpen;
   const setOpen = setControlledOpen ?? setUncontrolledOpen;
-  const data = (0, import_react91.useFloating)({
+  const data = (0, import_react93.useFloating)({
     onOpenChange: setOpen,
     open
   });
   const { context } = data;
-  const click = (0, import_react91.useClick)(context, {
+  const click = (0, import_react93.useClick)(context, {
     enabled: controlledOpen == null
   });
-  const dismiss = (0, import_react91.useDismiss)(context, { outsidePressEvent: "mousedown" });
-  const role = (0, import_react91.useRole)(context);
-  const interactions = (0, import_react91.useInteractions)([click, dismiss, role]);
-  return (0, import_react92.useMemo)(
+  const dismiss = (0, import_react93.useDismiss)(context, { outsidePressEvent: "mousedown" });
+  const role = (0, import_react93.useRole)(context);
+  const interactions = (0, import_react93.useInteractions)([click, dismiss, role]);
+  return (0, import_react94.useMemo)(
     () => ({
       open,
       setOpen,
@@ -15053,9 +15120,9 @@ function useDialog({
     [open, setOpen, interactions, data, labelId, descriptionId]
   );
 }
-var DialogContext = (0, import_react92.createContext)(null);
+var DialogContext = (0, import_react94.createContext)(null);
 var useDialogContext = () => {
-  const context = (0, import_react92.useContext)(DialogContext);
+  const context = (0, import_react94.useContext)(DialogContext);
   if (context == null) {
     throw new Error("Dialog components must be wrapped in <Dialog />");
   }
@@ -15065,13 +15132,13 @@ function Dialog({ children, ...options }) {
   const dialog = useDialog(options);
   return /* @__PURE__ */ (0, import_jsx_runtime107.jsx)(DialogContext.Provider, { value: dialog, children });
 }
-var DialogTrigger = (0, import_react92.forwardRef)(
+var DialogTrigger = (0, import_react94.forwardRef)(
   ({ children, asChild = false, ...props }, propRef) => {
     const context = useDialogContext();
     const childrenRef = children.ref;
-    const ref = (0, import_react91.useMergeRefs)([context.refs.setReference, propRef, childrenRef]);
-    if (asChild && (0, import_react92.isValidElement)(children)) {
-      return (0, import_react92.cloneElement)(
+    const ref = (0, import_react93.useMergeRefs)([context.refs.setReference, propRef, childrenRef]);
+    if (asChild && (0, import_react94.isValidElement)(children)) {
+      return (0, import_react94.cloneElement)(
         children,
         context.getReferenceProps({
           ref,
@@ -15084,19 +15151,19 @@ var DialogTrigger = (0, import_react92.forwardRef)(
     return /* @__PURE__ */ (0, import_jsx_runtime107.jsx)("button", { ref, "data-state": context.open ? "open" : "closed", ...context.getReferenceProps(props), children });
   }
 );
-var DialogContent = (0, import_react92.forwardRef)(
+var DialogContent = (0, import_react94.forwardRef)(
   (props, propRef) => {
     const { context: floatingContext, ...context } = useDialogContext();
     const { theme, colorScheme } = useTheme_default();
     const styles = Dialog_styles_default(theme, colorScheme);
-    const ref = (0, import_react91.useMergeRefs)([context.refs.setFloating, propRef]);
+    const ref = (0, import_react93.useMergeRefs)([context.refs.setFloating, propRef]);
     if (!floatingContext.open) return null;
-    return /* @__PURE__ */ (0, import_jsx_runtime107.jsx)(import_react91.FloatingPortal, { children: /* @__PURE__ */ (0, import_jsx_runtime107.jsx)(
-      import_react91.FloatingOverlay,
+    return /* @__PURE__ */ (0, import_jsx_runtime107.jsx)(import_react93.FloatingPortal, { children: /* @__PURE__ */ (0, import_jsx_runtime107.jsx)(
+      import_react93.FloatingOverlay,
       {
         className: (0, import_css58.cx)((0, import_browser87.withVendorCSSClassPrefix)((0, import_browser87.bem)("dialog", "overlay")), styles["overlay"]),
         lockScroll: true,
-        children: /* @__PURE__ */ (0, import_jsx_runtime107.jsx)(import_react91.FloatingFocusManager, { context: floatingContext, initialFocus: -1, children: /* @__PURE__ */ (0, import_jsx_runtime107.jsx)(
+        children: /* @__PURE__ */ (0, import_jsx_runtime107.jsx)(import_react93.FloatingFocusManager, { context: floatingContext, initialFocus: -1, children: /* @__PURE__ */ (0, import_jsx_runtime107.jsx)(
           "div",
           {
             ref,
@@ -15111,13 +15178,13 @@ var DialogContent = (0, import_react92.forwardRef)(
     ) });
   }
 );
-var DialogHeading = (0, import_react92.forwardRef)(
+var DialogHeading = (0, import_react94.forwardRef)(
   ({ children, ...props }, ref) => {
     const context = useDialogContext();
     const { theme, colorScheme } = useTheme_default();
     const styles = Dialog_styles_default(theme, colorScheme);
-    const id = (0, import_react91.useId)();
-    (0, import_react92.useLayoutEffect)(() => {
+    const id = (0, import_react93.useId)();
+    (0, import_react94.useLayoutEffect)(() => {
       context.setLabelId(id);
       return () => {
         context.setLabelId(void 0);
@@ -15151,13 +15218,13 @@ var DialogHeading = (0, import_react92.forwardRef)(
     ] });
   }
 );
-var DialogDescription = (0, import_react92.forwardRef)(
+var DialogDescription = (0, import_react94.forwardRef)(
   ({ children, ...props }, ref) => {
     const context = useDialogContext();
     const { theme, colorScheme } = useTheme_default();
     const styles = Dialog_styles_default(theme, colorScheme);
-    const id = (0, import_react91.useId)();
-    (0, import_react92.useLayoutEffect)(() => {
+    const id = (0, import_react93.useId)();
+    (0, import_react94.useLayoutEffect)(() => {
       context.setDescriptionId(id);
       return () => {
         context.setDescriptionId(void 0);
@@ -15175,17 +15242,17 @@ var DialogDescription = (0, import_react92.forwardRef)(
     );
   }
 );
-var DialogClose = (0, import_react92.forwardRef)(
+var DialogClose = (0, import_react94.forwardRef)(
   ({ children, asChild = false, ...props }, propRef) => {
     const context = useDialogContext();
     const childrenRef = children?.ref;
-    const ref = (0, import_react91.useMergeRefs)([propRef, childrenRef]);
+    const ref = (0, import_react93.useMergeRefs)([propRef, childrenRef]);
     const handleClick = (event) => {
       context.setOpen(false);
       props.onClick?.(event);
     };
-    if (asChild && (0, import_react92.isValidElement)(children)) {
-      return (0, import_react92.cloneElement)(children, {
+    if (asChild && (0, import_react94.isValidElement)(children)) {
+      return (0, import_react94.cloneElement)(children, {
         ref,
         ...props,
         ...children.props,
@@ -15220,12 +15287,12 @@ var Dialog_default = Dialog;
 // src/components/primitives/MultiInput/MultiInput.tsx
 var import_browser88 = require("@asgardeo/browser");
 var import_css60 = require("@emotion/css");
-var import_react94 = require("react");
+var import_react96 = require("react");
 
 // src/components/primitives/MultiInput/MultiInput.styles.ts
 var import_css59 = require("@emotion/css");
-var import_react93 = require("react");
-var useStyles27 = (theme, colorScheme, disabled, hasError, canAddMore, canRemove) => (0, import_react93.useMemo)(() => {
+var import_react95 = require("react");
+var useStyles27 = (theme, colorScheme, disabled, hasError, canAddMore, canRemove) => (0, import_react95.useMemo)(() => {
   const container = import_css59.css`
       display: flex;
       flex-direction: column;
@@ -15340,7 +15407,7 @@ var MultiInput = ({
   const styles = MultiInput_styles_default(theme, colorScheme, !!disabled, !!error, canAddMore, canRemove);
   const PlusIcon = ({ iconClassName }) => /* @__PURE__ */ (0, import_jsx_runtime108.jsx)("svg", { width: "16", height: "16", viewBox: "0 0 24 24", className: (0, import_css60.cx)(styles["icon"], iconClassName), children: /* @__PURE__ */ (0, import_jsx_runtime108.jsx)("path", { d: "M12 5v14M5 12h14" }) });
   const BinIcon = ({ iconClassName }) => /* @__PURE__ */ (0, import_jsx_runtime108.jsx)("svg", { width: "16", height: "16", viewBox: "0 0 24 24", className: (0, import_css60.cx)(styles["icon"], iconClassName), children: /* @__PURE__ */ (0, import_jsx_runtime108.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_react94.useCallback)(
+  const handleAddValue = (0, import_react96.useCallback)(
     (newValue) => {
       if (newValue.trim() !== "" && (!maxFields || values.length < maxFields)) {
         onChange([...values, newValue.trim()]);
@@ -15348,7 +15415,7 @@ var MultiInput = ({
     },
     [values, onChange, maxFields]
   );
-  const handleRemoveValue = (0, import_react94.useCallback)(
+  const handleRemoveValue = (0, import_react96.useCallback)(
     (index) => {
       if (values.length > minFields) {
         const updatedValues = values.filter((_, i) => i !== index);
@@ -15357,7 +15424,7 @@ var MultiInput = ({
     },
     [values, onChange, minFields]
   );
-  const renderInputField = (0, import_react94.useCallback)(
+  const renderInputField = (0, import_react96.useCallback)(
     (value, onValueChange, attachedEndIcon, onEndIconClick) => {
       const handleInputChange = (e) => {
         const newValue = e.target ? e.target.value : e;
@@ -15399,8 +15466,8 @@ var MultiInput = ({
     },
     [placeholder, disabled, startIcon, endIcon, error, fieldType, type]
   );
-  const [currentInputValue, setCurrentInputValue] = (0, import_react94.useState)("");
-  const handleInputSubmit = (0, import_react94.useCallback)(() => {
+  const [currentInputValue, setCurrentInputValue] = (0, import_react96.useState)("");
+  const handleInputSubmit = (0, import_react96.useCallback)(() => {
     if (currentInputValue.trim() !== "") {
       handleAddValue(currentInputValue);
       setCurrentInputValue("");
@@ -15482,6 +15549,9 @@ var fieldsToSkip = [
   "preferredMFAOption"
 ];
 var readonlyFields = ["username", "userName", "user_name"];
+var normalizeMutability = (mutability) => (mutability ?? "").replace(/_/g, "").toLowerCase();
+var isReadOnlyMutability = (mutability) => normalizeMutability(mutability) === "readonly";
+var isReadWriteMutability = (mutability) => normalizeMutability(mutability) === "readwrite";
 var BaseUserProfile = ({
   fallback = null,
   className = "",
@@ -15504,10 +15574,10 @@ var BaseUserProfile = ({
   displayNameAttributes = []
 }) => {
   const { theme, colorScheme } = useTheme_default();
-  const [editedUser, setEditedUser] = (0, import_react95.useState)(flattenedProfile || profile);
-  const [editingFields, setEditingFields] = (0, import_react95.useState)({});
+  const [editedUser, setEditedUser] = (0, import_react97.useState)(flattenedProfile || profile);
+  const [editingFields, setEditingFields] = (0, import_react97.useState)({});
   const { t } = useTranslation_default(preferences?.i18n);
-  const shouldShowField = (0, import_react95.useCallback)(
+  const shouldShowField = (0, import_react97.useCallback)(
     (fieldName) => {
       if (fieldsToSkip.includes(fieldName)) {
         return false;
@@ -15536,13 +15606,13 @@ var BaseUserProfile = ({
       children: /* @__PURE__ */ (0, import_jsx_runtime109.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)((schema) => {
+  const getFieldPlaceholder = (0, import_react97.useCallback)((schema) => {
     const { type, displayName, description, name } = schema;
     const fieldLabel = displayName || description || name || "value";
     switch (type) {
@@ -15556,7 +15626,7 @@ var BaseUserProfile = ({
         return `Enter your ${fieldLabel.toLowerCase()}`;
     }
   }, []);
-  const formatLabel = (0, import_react95.useCallback)(
+  const formatLabel = (0, import_react97.useCallback)(
     (key) => key.split(/(?=[A-Z])|_/).map((word) => word.charAt(0).toUpperCase() + word.slice(1).toLowerCase()).join(" "),
     []
   );
@@ -15586,7 +15656,7 @@ var BaseUserProfile = ({
       }
     }
   }
-  const handleFieldSave = (0, import_react95.useCallback)(
+  const handleFieldSave = (0, import_react97.useCallback)(
     (schema) => {
       if (!onUpdate || !schema.name) return;
       const fieldName = schema.name;
@@ -15616,7 +15686,7 @@ var BaseUserProfile = ({
     },
     [editedUser, flattenedProfile, onUpdate, toggleFieldEdit]
   );
-  const handleFieldCancel = (0, import_react95.useCallback)(
+  const handleFieldCancel = (0, import_react97.useCallback)(
     (fieldName) => {
       const currentUser2 = flattenedProfile || profile;
       setEditedUser((prev) => ({
@@ -15660,7 +15730,7 @@ var BaseUserProfile = ({
     }
     if (Array.isArray(value) || multiValued) {
       const hasValues = Array.isArray(value) ? value.length > 0 : value !== void 0 && value !== null && value !== "";
-      const isEditable2 = editable && mutability !== "READ_ONLY" && !readonlyFields.includes(name || "");
+      const isEditable2 = editable && !isReadOnlyMutability(mutability) && !readonlyFields.includes(name || "");
       if (isEditing && onEditValue && isEditable2) {
         let currentValue;
         if (editedUser && name && editedUser[name] !== void 0) {
@@ -15730,7 +15800,7 @@ var BaseUserProfile = ({
     if (type === "COMPLEX" && typeof value === "object") {
       return /* @__PURE__ */ (0, import_jsx_runtime109.jsx)(ObjectDisplay, { data: value });
     }
-    if (isEditing && onEditValue && mutability !== "READ_ONLY" && !readonlyFields.includes(name || "")) {
+    if (isEditing && onEditValue && !isReadOnlyMutability(mutability) && !readonlyFields.includes(name || "")) {
       let fieldValue;
       if (editedUser && name && editedUser[name] !== void 0) {
         fieldValue = editedUser[name];
@@ -15788,7 +15858,7 @@ var BaseUserProfile = ({
       ] });
     }
     const hasValue = value !== void 0 && value !== null && value !== "";
-    const isEditable = editable && mutability !== "READ_ONLY" && !readonlyFields.includes(name || "");
+    const isEditable = editable && !isReadOnlyMutability(mutability) && !readonlyFields.includes(name || "");
     let displayValue;
     if (hasValue) {
       displayValue = String(value);
@@ -15818,7 +15888,7 @@ var BaseUserProfile = ({
     const hasValue = schema.value !== void 0 && schema.value !== "" && schema.value !== null;
     const isFieldEditing = editingFields[schema.name];
     const isReadonlyField = readonlyFields.includes(schema.name);
-    const shouldShow = hasValue || isFieldEditing || editable && schema.mutability === "READ_WRITE";
+    const shouldShow = hasValue || isFieldEditing || editable && isReadWriteMutability(schema.mutability);
     if (!shouldShow) {
       return null;
     }
@@ -15833,7 +15903,7 @@ var BaseUserProfile = ({
         },
         () => toggleFieldEdit(schema.name)
       ) }),
-      editable && schema.mutability !== "READ_ONLY" && !isReadonlyField && /* @__PURE__ */ (0, import_jsx_runtime109.jsxs)("div", { className: styles.fieldActions, children: [
+      editable && !isReadOnlyMutability(schema.mutability) && !isReadonlyField && /* @__PURE__ */ (0, import_jsx_runtime109.jsxs)("div", { className: styles.fieldActions, children: [
         isFieldEditing && /* @__PURE__ */ (0, import_jsx_runtime109.jsxs)(import_jsx_runtime109.Fragment, { children: [
           /* @__PURE__ */ (0, import_jsx_runtime109.jsx)(Button_default, { size: "small", color: "primary", variant: "solid", onClick: () => handleFieldSave(schema), children: "Save" }),
           /* @__PURE__ */ (0, import_jsx_runtime109.jsx)(
@@ -15958,7 +16028,7 @@ var BaseUserProfile_default = BaseUserProfile;
 
 // src/components/presentation/UserProfile/UserProfile.tsx
 var import_browser91 = require("@asgardeo/browser");
-var import_react96 = require("react");
+var import_react98 = require("react");
 
 // src/api/updateMeProfile.ts
 var import_browser90 = require("@asgardeo/browser");
@@ -15993,7 +16063,7 @@ var UserProfile3 = ({ preferences, ...rest }) => {
   const { baseUrl, instanceId } = useAsgardeo_default();
   const { profile, flattenedProfile, schemas, onUpdateProfile } = useUser_default();
   const { t } = useTranslation_default(preferences?.i18n);
-  const [error, setError] = (0, import_react96.useState)(null);
+  const [error, setError] = (0, import_react98.useState)(null);
   const handleProfileUpdate = async (payload) => {
     setError(null);
     try {
@@ -16025,13 +16095,13 @@ var UserProfile_default = UserProfile3;
 // src/components/presentation/UserDropdown/BaseUserDropdown.tsx
 var import_browser92 = require("@asgardeo/browser");
 var import_css63 = require("@emotion/css");
-var import_react98 = require("@floating-ui/react");
-var import_react99 = require("react");
+var import_react100 = require("@floating-ui/react");
+var import_react101 = require("react");
 
 // src/components/presentation/UserDropdown/BaseUserDropdown.styles.ts
 var import_css62 = require("@emotion/css");
-var import_react97 = require("react");
-var useStyles28 = (theme, colorScheme) => (0, import_react97.useMemo)(() => {
+var import_react99 = require("react");
+var useStyles28 = (theme, colorScheme) => (0, import_react99.useMemo)(() => {
   const trigger = import_css62.css`
       display: inline-flex;
       align-items: center;
@@ -16234,19 +16304,19 @@ var BaseUserDropdown = ({
 }) => {
   const { theme, colorScheme } = useTheme_default();
   const styles = BaseUserDropdown_styles_default(theme, colorScheme);
-  const [isOpen, setIsOpen] = (0, import_react99.useState)(false);
-  const [hoveredItemIndex, setHoveredItemIndex] = (0, import_react99.useState)(null);
-  const { refs, floatingStyles, context } = (0, import_react98.useFloating)({
-    middleware: [(0, import_react98.offset)(5), (0, import_react98.flip)({ fallbackAxisSideDirection: "end" }), (0, import_react98.shift)({ padding: 5 })],
+  const [isOpen, setIsOpen] = (0, import_react101.useState)(false);
+  const [hoveredItemIndex, setHoveredItemIndex] = (0, import_react101.useState)(null);
+  const { refs, floatingStyles, context } = (0, import_react100.useFloating)({
+    middleware: [(0, import_react100.offset)(5), (0, import_react100.flip)({ fallbackAxisSideDirection: "end" }), (0, import_react100.shift)({ padding: 5 })],
     onOpenChange: setIsOpen,
     open: isOpen,
     placement: "bottom-end",
-    whileElementsMounted: import_react98.autoUpdate
+    whileElementsMounted: import_react100.autoUpdate
   });
-  const click = (0, import_react98.useClick)(context);
-  const dismiss = (0, import_react98.useDismiss)(context);
-  const role = (0, import_react98.useRole)(context);
-  const { getReferenceProps, getFloatingProps } = (0, import_react98.useInteractions)([click, dismiss, role]);
+  const click = (0, import_react100.useClick)(context);
+  const dismiss = (0, import_react100.useDismiss)(context);
+  const role = (0, import_react100.useRole)(context);
+  const { getReferenceProps, getFloatingProps } = (0, import_react100.useInteractions)([click, dismiss, role]);
   const defaultAttributeMappings = {
     email: ["emails"],
     firstName: ["name.givenName", "given_name"],
@@ -16321,7 +16391,7 @@ var BaseUserDropdown = ({
         ]
       }
     ),
-    isOpen && /* @__PURE__ */ (0, import_jsx_runtime111.jsx)(import_react98.FloatingPortal, { id: portalId, children: /* @__PURE__ */ (0, import_jsx_runtime111.jsx)(import_react98.FloatingFocusManager, { context, modal: false, initialFocus: -1, children: /* @__PURE__ */ (0, import_jsx_runtime111.jsxs)(
+    isOpen && /* @__PURE__ */ (0, import_jsx_runtime111.jsx)(import_react100.FloatingPortal, { id: portalId, children: /* @__PURE__ */ (0, import_jsx_runtime111.jsx)(import_react100.FloatingFocusManager, { context, modal: false, initialFocus: -1, children: /* @__PURE__ */ (0, import_jsx_runtime111.jsxs)(
       "div",
       {
         ref: refs.setFloating,
@@ -16425,7 +16495,7 @@ var BaseUserDropdown = ({
 var BaseUserDropdown_default = BaseUserDropdown;
 
 // src/components/presentation/UserDropdown/UserDropdown.tsx
-var import_react100 = require("react");
+var import_react102 = require("react");
 var import_jsx_runtime112 = require("react/jsx-runtime");
 var UserDropdown = ({
   children,
@@ -16435,7 +16505,7 @@ var UserDropdown = ({
   ...rest
 }) => {
   const { user, isLoading, signOut, meta } = useAsgardeo_default();
-  const [isProfileOpen, setIsProfileOpen] = (0, import_react100.useState)(false);
+  const [isProfileOpen, setIsProfileOpen] = (0, import_react102.useState)(false);
   const handleManageProfile = () => {
     setIsProfileOpen(true);
   };
@@ -16496,13 +16566,13 @@ var UserDropdown_default = UserDropdown;
 
 // src/components/presentation/OrganizationSwitcher/BaseOrganizationSwitcher.tsx
 var import_css65 = require("@emotion/css");
-var import_react102 = require("@floating-ui/react");
-var import_react103 = require("react");
+var import_react104 = require("@floating-ui/react");
+var import_react105 = require("react");
 
 // src/components/presentation/OrganizationSwitcher/BaseOrganizationSwitcher.styles.ts
 var import_css64 = require("@emotion/css");
-var import_react101 = require("react");
-var useStyles29 = (theme, colorScheme) => (0, import_react101.useMemo)(() => {
+var import_react103 = require("react");
+var useStyles29 = (theme, colorScheme) => (0, import_react103.useMemo)(() => {
   const root = import_css64.css`
       display: inline-block;
       position: relative;
@@ -16784,21 +16854,21 @@ var BaseOrganizationSwitcher = ({
 }) => {
   const { theme, colorScheme, direction } = useTheme_default();
   const styles = BaseOrganizationSwitcher_styles_default(theme, colorScheme);
-  const [isOpen, setIsOpen] = (0, import_react103.useState)(false);
-  const [hoveredItemIndex, setHoveredItemIndex] = (0, import_react103.useState)(null);
+  const [isOpen, setIsOpen] = (0, import_react105.useState)(false);
+  const [hoveredItemIndex, setHoveredItemIndex] = (0, import_react105.useState)(null);
   const { t } = useTranslation_default(preferences?.i18n);
   const isRTL = direction === "rtl";
-  const { refs, floatingStyles, context } = (0, import_react102.useFloating)({
-    middleware: [(0, import_react102.offset)(5), (0, import_react102.flip)({ fallbackAxisSideDirection: "end" }), (0, import_react102.shift)({ padding: 5 })],
+  const { refs, floatingStyles, context } = (0, import_react104.useFloating)({
+    middleware: [(0, import_react104.offset)(5), (0, import_react104.flip)({ fallbackAxisSideDirection: "end" }), (0, import_react104.shift)({ padding: 5 })],
     onOpenChange: setIsOpen,
     open: isOpen,
     placement: "bottom-end",
-    whileElementsMounted: import_react102.autoUpdate
+    whileElementsMounted: import_react104.autoUpdate
   });
-  const click = (0, import_react102.useClick)(context);
-  const dismiss = (0, import_react102.useDismiss)(context);
-  const role = (0, import_react102.useRole)(context);
-  const { getReferenceProps, getFloatingProps } = (0, import_react102.useInteractions)([click, dismiss, role]);
+  const click = (0, import_react104.useClick)(context);
+  const dismiss = (0, import_react104.useDismiss)(context);
+  const role = (0, import_react104.useRole)(context);
+  const { getReferenceProps, getFloatingProps } = (0, import_react104.useInteractions)([click, dismiss, role]);
   if (fallback && !currentOrganization && !loading && organizations.length === 0) {
     return fallback;
   }
@@ -16873,7 +16943,7 @@ var BaseOrganizationSwitcher = ({
         ]
       }
     ),
-    isOpen && /* @__PURE__ */ (0, import_jsx_runtime116.jsx)(import_react102.FloatingPortal, { id: portalId, children: /* @__PURE__ */ (0, import_jsx_runtime116.jsx)(import_react102.FloatingFocusManager, { context, modal: false, initialFocus: -1, children: /* @__PURE__ */ (0, import_jsx_runtime116.jsxs)(
+    isOpen && /* @__PURE__ */ (0, import_jsx_runtime116.jsx)(import_react104.FloatingPortal, { id: portalId, children: /* @__PURE__ */ (0, import_jsx_runtime116.jsx)(import_react104.FloatingFocusManager, { context, modal: false, initialFocus: -1, children: /* @__PURE__ */ (0, import_jsx_runtime116.jsxs)(
       "div",
       {
         ref: refs.setFloating,
@@ -17032,7 +17102,7 @@ var BaseOrganizationSwitcher = ({
 var BaseOrganizationSwitcher_default = BaseOrganizationSwitcher;
 
 // src/components/presentation/OrganizationSwitcher/OrganizationSwitcher.tsx
-var import_react116 = require("react");
+var import_react118 = require("react");
 
 // src/components/primitives/Icons/BuildingAlt.tsx
 var import_jsx_runtime117 = require("react/jsx-runtime");
@@ -17063,17 +17133,17 @@ BuildingAlt.displayName = "BuildingAlt";
 var BuildingAlt_default = BuildingAlt;
 
 // src/components/presentation/CreateOrganization/CreateOrganization.tsx
-var import_react106 = require("react");
+var import_react108 = require("react");
 
 // src/components/presentation/CreateOrganization/BaseCreateOrganization.tsx
 var import_browser93 = require("@asgardeo/browser");
 var import_css67 = require("@emotion/css");
-var import_react105 = require("react");
+var import_react107 = require("react");
 
 // src/components/presentation/CreateOrganization/BaseCreateOrganization.styles.ts
 var import_css66 = require("@emotion/css");
-var import_react104 = require("react");
-var useStyles30 = (theme, colorScheme) => (0, import_react104.useMemo)(() => {
+var import_react106 = require("react");
+var useStyles30 = (theme, colorScheme) => (0, import_react106.useMemo)(() => {
   const root = import_css66.css`
       padding: calc(${theme.vars.spacing.unit} * 4);
       min-width: 600px;
@@ -17090,6 +17160,23 @@ var useStyles30 = (theme, colorScheme) => (0, import_react104.useMemo)(() => {
       flex-direction: column;
       gap: calc(${theme.vars.spacing.unit} * 2);
     `;
+  const headerContainer = import_css66.css`
+      margin-bottom: calc(${theme.vars.spacing.unit} * 3);
+      padding-bottom: calc(${theme.vars.spacing.unit} * 2);
+      border-bottom: 1px solid ${theme.vars.colors.border};
+    `;
+  const title = import_css66.css`
+      font-size: 1.75rem;
+      font-weight: 700;
+      color: ${theme.vars.colors.text.primary};
+      margin: 0 0 6px 0;
+      letter-spacing: -0.01em;
+    `;
+  const subtitle = import_css66.css`
+      font-size: 0.875rem;
+      color: ${theme.vars.colors.text.secondary};
+      margin: 0;
+    `;
   const form = import_css66.css`
       display: flex;
       flex-direction: column;
@@ -17104,12 +17191,25 @@ var useStyles30 = (theme, colorScheme) => (0, import_react104.useMemo)(() => {
     `;
   const field = import_css66.css`
       display: flex;
-      align-items: center;
+      align-items: flex-start;
       padding: ${theme.vars.spacing.unit} 0;
-      border-bottom: 1px solid ${theme.vars.colors.border};
       min-height: 32px;
     `;
+  const label = import_css66.css`
+      font-size: 0.875rem;
+      font-weight: 600;
+      color: ${theme.vars.colors.text.primary};
+      width: 200px;
+      min-width: 200px;
+      flex-shrink: 0;
+      text-align: left;
+      padding-right: calc(${theme.vars.spacing.unit} * 2);
+      padding-top: calc(${theme.vars.spacing.unit} * 0.75);
+      white-space: nowrap;
+      line-height: 1.4;
+    `;
   const fieldGroup = import_css66.css`
+      flex: 1;
       display: flex;
       flex-direction: column;
       gap: calc(${theme.vars.spacing.unit} * 0.5);
@@ -17126,6 +17226,8 @@ var useStyles30 = (theme, colorScheme) => (0, import_react104.useMemo)(() => {
       min-height: 80px;
       resize: vertical;
       outline: none;
+      box-sizing: border-box;
+      transition: border-color 0.2s, box-shadow 0.2s;
       &:focus {
         border-color: ${theme.vars.colors.primary.main};
         box-shadow: 0 0 0 2px ${theme.vars.colors.primary.main}20;
@@ -17183,12 +17285,16 @@ var useStyles30 = (theme, colorScheme) => (0, import_react104.useMemo)(() => {
     fieldGroup,
     form,
     header,
+    headerContainer,
     infoContainer,
     input,
+    label,
     popup,
     root,
+    subtitle,
     textarea,
     textareaError,
+    title,
     value
   };
 }, [
@@ -17236,13 +17342,13 @@ var BaseCreateOrganization = ({
   const { theme, colorScheme } = useTheme_default();
   const styles = BaseCreateOrganization_styles_default(theme, colorScheme);
   const { t } = useTranslation_default(preferences?.i18n);
-  const [formData, setFormData] = (0, import_react105.useState)({
+  const [formData, setFormData] = (0, import_react107.useState)({
     description: "",
     handle: "",
     name: "",
     ...initialValues
   });
-  const [formErrors, setFormErrors] = (0, import_react105.useState)({});
+  const [formErrors, setFormErrors] = (0, import_react107.useState)({});
   const validateForm = () => {
     const errors = {};
     if (!formData.name.trim()) {
@@ -17299,53 +17405,68 @@ var BaseCreateOrganization = ({
       logger11.error("Form submission error:");
     }
   };
+  const getTranslation = (key, fallback) => {
+    const text = t(key);
+    return text && text !== key ? text : fallback;
+  };
   const createOrganizationContent = /* @__PURE__ */ (0, import_jsx_runtime118.jsx)("div", { className: (0, import_css67.cx)(styles["root"], cardLayout && styles["card"], className), style, children: /* @__PURE__ */ (0, import_jsx_runtime118.jsxs)("div", { className: (0, import_css67.cx)(styles["content"]), children: [
+    mode !== "popup" && /* @__PURE__ */ (0, import_jsx_runtime118.jsxs)("div", { className: (0, import_css67.cx)(styles["headerContainer"]), children: [
+      /* @__PURE__ */ (0, import_jsx_runtime118.jsx)(Typography_default, { variant: "h5", component: "h1", className: (0, import_css67.cx)(styles["title"]), children: getTranslation("organization.create.heading", title || "Create organization") }),
+      /* @__PURE__ */ (0, import_jsx_runtime118.jsx)(Typography_default, { variant: "body2", color: "textSecondary", className: (0, import_css67.cx)(styles["subtitle"]), children: getTranslation("organization.create.subheading", "Set up a new organization workspace.") })
+    ] }),
     /* @__PURE__ */ (0, import_jsx_runtime118.jsxs)("form", { id: "create-organization-form", className: (0, import_css67.cx)(styles["form"]), onSubmit: handleSubmit, children: [
       error && /* @__PURE__ */ (0, import_jsx_runtime118.jsxs)(Alert_default, { variant: "error", className: styles["errorAlert"], children: [
         /* @__PURE__ */ (0, import_jsx_runtime118.jsx)(Alert_default.Title, { children: "Error" }),
         /* @__PURE__ */ (0, import_jsx_runtime118.jsx)(Alert_default.Description, { children: error })
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime118.jsx)("div", { className: (0, import_css67.cx)(styles["fieldGroup"]), children: /* @__PURE__ */ (0, import_jsx_runtime118.jsx)(
-        TextField_default,
-        {
-          label: `${t("elements.fields.organization.name.label")}`,
-          placeholder: t("elements.fields.organization.name.placeholder"),
-          value: formData.name,
-          onChange: (e) => handleNameChange(e.target.value),
-          disabled: loading,
-          required: true,
-          error: formErrors.name,
-          className: (0, import_css67.cx)(styles["input"])
-        }
-      ) }),
-      /* @__PURE__ */ (0, import_jsx_runtime118.jsx)("div", { className: (0, import_css67.cx)(styles["fieldGroup"]), children: /* @__PURE__ */ (0, import_jsx_runtime118.jsx)(
-        TextField_default,
-        {
-          label: `${t("elements.fields.organization.handle.label") || "Organization Handle"}`,
-          placeholder: t("elements.fields.organization.handle.placeholder") || "my-organization",
-          value: formData.handle,
-          onChange: (e) => handleInputChange("handle", e.target.value),
-          disabled: loading,
-          required: true,
-          error: formErrors.handle,
-          helperText: "This will be your organization's unique identifier. Only lowercase letters, numbers, and hyphens are allowed.",
-          className: (0, import_css67.cx)(styles["input"])
-        }
-      ) }),
-      /* @__PURE__ */ (0, import_jsx_runtime118.jsx)("div", { className: (0, import_css67.cx)(styles["fieldGroup"]), children: /* @__PURE__ */ (0, import_jsx_runtime118.jsxs)(FormControl_default, { error: formErrors.description, children: [
-        /* @__PURE__ */ (0, import_jsx_runtime118.jsx)(InputLabel_default, { required: true, children: t("elements.fields.organization.description.label") }),
-        /* @__PURE__ */ (0, import_jsx_runtime118.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime118.jsxs)("div", { className: (0, import_css67.cx)(styles["field"]), children: [
+        /* @__PURE__ */ (0, import_jsx_runtime118.jsx)(InputLabel_default, { required: true, className: (0, import_css67.cx)(styles["label"]), children: getTranslation("elements.fields.organization.name.label", "Organization Name") }),
+        /* @__PURE__ */ (0, import_jsx_runtime118.jsx)("div", { className: (0, import_css67.cx)(styles["fieldGroup"]), children: /* @__PURE__ */ (0, import_jsx_runtime118.jsx)(
+          TextField_default,
+          {
+            placeholder: getTranslation("elements.fields.organization.name.placeholder", "Organization Name"),
+            value: formData.name,
+            onChange: (e) => handleNameChange(e.target.value),
+            disabled: loading,
+            required: true,
+            error: formErrors.name,
+            className: (0, import_css67.cx)(styles["input"])
+          }
+        ) })
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime118.jsxs)("div", { className: (0, import_css67.cx)(styles["field"]), children: [
+        /* @__PURE__ */ (0, import_jsx_runtime118.jsx)(InputLabel_default, { required: true, className: (0, import_css67.cx)(styles["label"]), children: getTranslation("elements.fields.organization.handle.label", "Organization Handle") }),
+        /* @__PURE__ */ (0, import_jsx_runtime118.jsx)("div", { className: (0, import_css67.cx)(styles["fieldGroup"]), children: /* @__PURE__ */ (0, import_jsx_runtime118.jsx)(
+          TextField_default,
+          {
+            placeholder: getTranslation("elements.fields.organization.handle.placeholder", "my-organization"),
+            value: formData.handle,
+            onChange: (e) => handleInputChange("handle", e.target.value),
+            disabled: loading,
+            required: true,
+            error: formErrors.handle,
+            helperText: "This will be your organization's unique identifier. Only lowercase letters, numbers, and hyphens are allowed.",
+            className: (0, import_css67.cx)(styles["input"])
+          }
+        ) })
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime118.jsxs)("div", { className: (0, import_css67.cx)(styles["field"]), children: [
+        /* @__PURE__ */ (0, import_jsx_runtime118.jsx)(InputLabel_default, { required: true, className: (0, import_css67.cx)(styles["label"]), children: getTranslation("elements.fields.organization.description.label", "Organization Description") }),
+        /* @__PURE__ */ (0, import_jsx_runtime118.jsx)("div", { className: (0, import_css67.cx)(styles["fieldGroup"]), children: /* @__PURE__ */ (0, import_jsx_runtime118.jsx)(FormControl_default, { error: formErrors.description, children: /* @__PURE__ */ (0, import_jsx_runtime118.jsx)(
           "textarea",
           {
             className: (0, import_css67.cx)(styles["textarea"], formErrors.description && styles["textareaError"]),
-            placeholder: t("organization.create.description.placeholder"),
+            placeholder: getTranslation(
+              "organization.create.description.placeholder",
+              "Enter organization description"
+            ),
             value: formData.description,
             onChange: (e) => handleInputChange("description", e.target.value),
             disabled: loading,
             required: true
           }
-        )
-      ] }) }),
+        ) }) })
+      ] }),
       renderAdditionalFields && renderAdditionalFields()
     ] }),
     /* @__PURE__ */ (0, import_jsx_runtime118.jsxs)("div", { className: (0, import_css67.cx)(styles["actions"]), children: [
@@ -17404,8 +17525,8 @@ var CreateOrganization = ({
 }) => {
   const { isSignedIn, baseUrl, instanceId } = useAsgardeo_default();
   const { currentOrganization, revalidateMyOrganizations } = useOrganization_default();
-  const [loading, setLoading] = (0, import_react106.useState)(false);
-  const [error, setError] = (0, import_react106.useState)(null);
+  const [loading, setLoading] = (0, import_react108.useState)(false);
+  const [error, setError] = (0, import_react108.useState)(null);
   if (!isSignedIn && fallback) {
     return fallback;
   }
@@ -17460,16 +17581,16 @@ var CreateOrganization = ({
 
 // src/components/presentation/OrganizationList/OrganizationList.tsx
 var import_css71 = require("@emotion/css");
-var import_react110 = require("react");
+var import_react112 = require("react");
 
 // src/components/presentation/OrganizationList/BaseOrganizationList.tsx
 var import_css69 = require("@emotion/css");
-var import_react108 = require("react");
+var import_react110 = require("react");
 
 // src/components/presentation/OrganizationList/BaseOrganizationList.styles.ts
 var import_css68 = require("@emotion/css");
-var import_react107 = require("react");
-var useStyles31 = (theme, colorScheme) => (0, import_react107.useMemo)(() => {
+var import_react109 = require("react");
+var useStyles31 = (theme, colorScheme) => (0, import_react109.useMemo)(() => {
   const root = import_css68.css`
       padding: calc(${theme.vars.spacing.unit} * 4);
       min-width: 600px;
@@ -17486,14 +17607,19 @@ var useStyles31 = (theme, colorScheme) => (0, import_react107.useMemo)(() => {
       padding-bottom: calc(${theme.vars.spacing.unit} * 2);
       border-bottom: 1px solid ${theme.vars.colors.border};
     `;
+  const headerContainer = import_css68.css`
+      margin-bottom: calc(${theme.vars.spacing.unit} * 3);
+      padding-bottom: calc(${theme.vars.spacing.unit} * 2);
+      border-bottom: 1px solid ${theme.vars.colors.border};
+    `;
   const headerInfo = import_css68.css`
       flex: 1;
     `;
   const title = import_css68.css`
-      font-size: 1.5rem;
-      font-weight: 600;
-      margin: 0 0 8px 0;
+      font-size: 1.75rem;
+      font-weight: 700;
       color: ${theme.vars.colors.text.primary};
+      margin: 0 0 calc(${theme.vars.spacing.unit} * 0.5) 0;
     `;
   const subtitle = import_css68.css`
       color: ${theme.vars.colors.text.secondary};
@@ -17652,7 +17778,7 @@ var useStyles31 = (theme, colorScheme) => (0, import_react107.useMemo)(() => {
     errorContainer,
     errorMargin,
     header,
-    headerInfo,
+    headerContainer,
     listContainer,
     loadMoreButton,
     loadMoreMargin,
@@ -17763,14 +17889,15 @@ var BaseOrganizationList = ({
   renderLoadMore,
   renderOrganization,
   style,
-  title = "Organizations",
+  title,
+  subheading,
   showStatus,
   preferences
 }) => {
   const { theme, colorScheme } = useTheme_default();
   const styles = BaseOrganizationList_styles_default(theme, colorScheme);
   const { t } = useTranslation_default(preferences?.i18n);
-  const organizationsWithSwitchAccess = (0, import_react108.useMemo)(() => {
+  const organizationsWithSwitchAccess = (0, import_react110.useMemo)(() => {
     if (!allOrganizations?.organizations) {
       return [];
     }
@@ -17815,7 +17942,15 @@ var BaseOrganizationList = ({
     }
     return emptyContent;
   }
+  const getTranslation = (key, fallback) => {
+    const text = t(key);
+    return text && text !== key ? text : fallback;
+  };
   const organizationListContent = /* @__PURE__ */ (0, import_jsx_runtime120.jsxs)("div", { className: (0, import_css69.cx)(styles["root"], className), style, children: [
+    mode !== "popup" && /* @__PURE__ */ (0, import_jsx_runtime120.jsxs)("div", { className: (0, import_css69.cx)(styles["headerContainer"]), children: [
+      /* @__PURE__ */ (0, import_jsx_runtime120.jsx)(Typography_default, { variant: "h5", component: "h1", className: (0, import_css69.cx)(styles["title"]), children: getTranslation("organization.list.heading", title || "Organizations List") }),
+      /* @__PURE__ */ (0, import_jsx_runtime120.jsx)(Typography_default, { variant: "body2", color: "textSecondary", className: (0, import_css69.cx)(styles["subtitle"]), children: getTranslation("organization.list.subheading", subheading || "View list of organizations.") })
+    ] }),
     /* @__PURE__ */ (0, import_jsx_runtime120.jsxs)("div", { className: (0, import_css69.cx)(styles["header"]), children: [
       /* @__PURE__ */ (0, import_jsx_runtime120.jsx)("div", { className: (0, import_css69.cx)(styles["headerInfo"]), children: /* @__PURE__ */ (0, import_jsx_runtime120.jsx)(Typography_default, { variant: "body2", color: "textSecondary", className: (0, import_css69.cx)(styles["subtitle"]), children: t("organization.switcher.showing.count", {
         showing: organizationsWithSwitchAccess?.length,
@@ -17851,8 +17986,8 @@ var BaseOrganizationList_default = BaseOrganizationList;
 
 // src/components/presentation/OrganizationList/OrganizationList.styles.ts
 var import_css70 = require("@emotion/css");
-var import_react109 = require("react");
-var useStyles32 = (theme, colorScheme) => (0, import_react109.useMemo)(() => {
+var import_react111 = require("react");
+var useStyles32 = (theme, colorScheme) => (0, import_react111.useMemo)(() => {
   const cssOrganizationListWrapper = import_css70.css`
       /* Container wrapper styles for OrganizationList component */
       width: 100%;
@@ -17919,10 +18054,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_react110.useState)({
+  const [allOrganizations, setAllOrganizations] = (0, import_react112.useState)({
     organizations: []
   });
-  (0, import_react110.useEffect)(() => {
+  (0, import_react112.useEffect)(() => {
     (async () => {
       setAllOrganizations(await getAllOrganizations2());
     })();
@@ -17943,17 +18078,17 @@ var OrganizationList_default = OrganizationList;
 
 // src/components/presentation/OrganizationProfile/OrganizationProfile.tsx
 var import_browser99 = require("@asgardeo/browser");
-var import_react115 = require("react");
+var import_react117 = require("react");
 
 // src/components/presentation/OrganizationProfile/BaseOrganizationProfile.tsx
 var import_browser96 = require("@asgardeo/browser");
 var import_css75 = require("@emotion/css");
-var import_react114 = require("react");
+var import_react116 = require("react");
 
 // src/components/presentation/OrganizationProfile/BaseOrganizationProfile.styles.ts
 var import_css72 = require("@emotion/css");
-var import_react111 = require("react");
-var useStyles33 = (theme, colorScheme) => (0, import_react111.useMemo)(
+var import_react113 = require("react");
+var useStyles33 = (theme, colorScheme) => (0, import_react113.useMemo)(
   () => ({
     attributeItem: import_css72.css`
         display: flex;
@@ -18018,6 +18153,7 @@ var useStyles33 = (theme, colorScheme) => (0, import_react111.useMemo)(
         color: ${theme.vars.colors.text.secondary};
         margin: 0;
         font-family: monospace;
+        text-align: left;
       `,
     header: import_css72.css`
         display: flex;
@@ -18026,6 +18162,11 @@ var useStyles33 = (theme, colorScheme) => (0, import_react111.useMemo)(
         margin-bottom: calc(${theme.vars.spacing.unit} * 3);
         padding-bottom: calc(${theme.vars.spacing.unit} * 2);
       `,
+    headerContainer: import_css72.css`
+        margin-bottom: calc(${theme.vars.spacing.unit} * 3);
+        padding-bottom: calc(${theme.vars.spacing.unit} * 2);
+        border-bottom: 1px solid ${theme.vars.colors.border};
+      `,
     infoContainer: import_css72.css`
         display: flex;
         flex-direction: column;
@@ -18035,18 +18176,26 @@ var useStyles33 = (theme, colorScheme) => (0, import_react111.useMemo)(
         font-size: 0.875rem;
         font-weight: 500;
         color: ${theme.vars.colors.text.secondary};
-        width: 120px;
+        width: 200px;
+        min-width: 200px;
         flex-shrink: 0;
         line-height: 28px;
+        text-align: left;
+        white-space: nowrap;
       `,
     name: import_css72.css`
         font-size: 1.5rem;
         font-weight: 600;
         margin: 0 0 8px 0;
         color: ${theme.vars.colors.text.primary};
+        text-align: left;
       `,
     orgInfo: import_css72.css`
         flex: 1;
+        display: flex;
+        flex-direction: column;
+        align-items: flex-start;
+        text-align: left;
       `,
     permissionBadge: import_css72.css`
         padding: calc(${theme.vars.spacing.unit} / 4) ${theme.vars.spacing.unit};
@@ -18086,6 +18235,17 @@ var useStyles33 = (theme, colorScheme) => (0, import_react111.useMemo)(
         text-transform: uppercase;
         letter-spacing: 0.5px;
       `,
+    subtitle: import_css72.css`
+        font-size: 0.875rem;
+        color: ${theme.vars.colors.text.secondary};
+        margin: 0;
+      `,
+    title: import_css72.css`
+        font-size: 1.75rem;
+        font-weight: 700;
+        color: ${theme.vars.colors.text.primary};
+        margin: 0 0 calc(${theme.vars.spacing.unit} * 0.5) 0;
+      `,
     value: import_css72.css`
         color: ${theme.vars.colors.text.primary};
         flex: 1;
@@ -18109,12 +18269,12 @@ var BaseOrganizationProfile_styles_default = useStyles33;
 // src/components/primitives/KeyValueInput/KeyValueInput.tsx
 var import_browser95 = require("@asgardeo/browser");
 var import_css74 = require("@emotion/css");
-var import_react113 = require("react");
+var import_react115 = require("react");
 
 // src/components/primitives/KeyValueInput/KeyValueInput.styles.ts
 var import_css73 = require("@emotion/css");
-var import_react112 = require("react");
-var useStyles34 = (theme, colorScheme, disabled, readOnly, hasError) => (0, import_react112.useMemo)(() => {
+var import_react114 = require("react");
+var useStyles34 = (theme, colorScheme, disabled, readOnly, hasError) => (0, import_react114.useMemo)(() => {
   const container = import_css73.css`
       display: flex;
       flex-direction: column;
@@ -18289,10 +18449,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_react113.useState)(initialPairs);
-  const [newKey, setNewKey] = (0, import_react113.useState)("");
-  const [newValue, setNewValue] = (0, import_react113.useState)("");
-  const handleAddPair = (0, import_react113.useCallback)(() => {
+  const [pairs, setPairs] = (0, import_react115.useState)(initialPairs);
+  const [newKey, setNewKey] = (0, import_react115.useState)("");
+  const [newValue, setNewValue] = (0, import_react115.useState)("");
+  const handleAddPair = (0, import_react115.useCallback)(() => {
     if (!newKey.trim() || !newValue.trim()) return;
     if (maxPairs && pairs.length >= maxPairs) return;
     const newPair = {
@@ -18310,7 +18470,7 @@ var KeyValueInput = ({
       onAdd(newPair);
     }
   }, [newKey, newValue, pairs, maxPairs, onChange, onAdd]);
-  const handleRemovePair = (0, import_react113.useCallback)(
+  const handleRemovePair = (0, import_react115.useCallback)(
     (index) => {
       const pairToRemove = pairs[index];
       const updatedPairs = pairs.filter((_, i) => i !== index);
@@ -18324,7 +18484,7 @@ var KeyValueInput = ({
     },
     [pairs, onChange, onRemove]
   );
-  const handleUpdatePair = (0, import_react113.useCallback)(
+  const handleUpdatePair = (0, import_react115.useCallback)(
     (index, field, newVal) => {
       const updatedPairs = pairs.map((pair, i) => {
         if (i === index) {
@@ -18482,7 +18642,9 @@ var BaseOrganizationProfile = ({
   className = "",
   cardLayout = true,
   organization,
-  title = "Organization Profile",
+  preferences,
+  title,
+  subheading,
   mode = "inline",
   editable = true,
   onOpenChange,
@@ -18522,9 +18684,10 @@ var BaseOrganizationProfile = ({
   ]
 }) => {
   const { theme, colorScheme } = useTheme_default();
+  const { t } = useTranslation_default(preferences?.i18n);
   const styles = BaseOrganizationProfile_styles_default(theme, colorScheme);
-  const [editedOrganization, setEditedOrganization] = (0, import_react114.useState)(organization);
-  const [editingFields, setEditingFields] = (0, import_react114.useState)({});
+  const [editedOrganization, setEditedOrganization] = (0, import_react116.useState)(organization);
+  const [editingFields, setEditingFields] = (0, import_react116.useState)({});
   const PencilIcon = () => /* @__PURE__ */ (0, import_jsx_runtime123.jsx)(
     "svg",
     {
@@ -18539,13 +18702,13 @@ var BaseOrganizationProfile = ({
       children: /* @__PURE__ */ (0, import_jsx_runtime123.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_react114.useCallback)((fieldName) => {
+  const toggleFieldEdit = (0, import_react116.useCallback)((fieldName) => {
     setEditingFields((prev) => ({
       ...prev,
       [fieldName]: !prev[fieldName]
     }));
   }, []);
-  const getFieldPlaceholder = (0, import_react114.useCallback)((fieldKey) => {
+  const getFieldPlaceholder = (0, import_react116.useCallback)((fieldKey) => {
     const fieldLabels = {
       description: "organization description",
       name: "organization name",
@@ -18556,7 +18719,7 @@ var BaseOrganizationProfile = ({
     const fieldLabel = fieldLabels[fieldKey] || fieldKey.toLowerCase();
     return `Enter ${fieldLabel}`;
   }, []);
-  const handleFieldSave = (0, import_react114.useCallback)(
+  const handleFieldSave = (0, import_react116.useCallback)(
     (fieldKey) => {
       if (!onUpdate || !fieldKey) return;
       let fieldValue;
@@ -18575,7 +18738,7 @@ var BaseOrganizationProfile = ({
     },
     [editedOrganization, organization, onUpdate, toggleFieldEdit]
   );
-  const handleFieldCancel = (0, import_react114.useCallback)(
+  const handleFieldCancel = (0, import_react116.useCallback)(
     (fieldKey) => {
       setEditedOrganization((prev) => ({
         ...prev,
@@ -18737,7 +18900,15 @@ var BaseOrganizationProfile = ({
   if (!organization) {
     return fallback;
   }
+  const getTranslation = (key, fallback2) => {
+    const text = t(key);
+    return text && text !== key ? text : fallback2;
+  };
   const profileContent = /* @__PURE__ */ (0, import_jsx_runtime123.jsxs)(Card_default, { className: (0, import_css75.cx)(styles["root"], cardLayout && styles["card"], className), children: [
+    mode !== "popup" && /* @__PURE__ */ (0, import_jsx_runtime123.jsxs)("div", { className: (0, import_css75.cx)(styles["headerContainer"]), children: [
+      /* @__PURE__ */ (0, import_jsx_runtime123.jsx)(Typography_default, { variant: "h5", component: "h1", className: (0, import_css75.cx)(styles["title"]), children: getTranslation("organization.profile.heading", title || "Organization Profile") }),
+      /* @__PURE__ */ (0, import_jsx_runtime123.jsx)(Typography_default, { variant: "body2", color: "textSecondary", className: (0, import_css75.cx)(styles["subtitle"]), children: getTranslation("organization.profile.subheading", subheading || "Manage your organization details.") })
+    ] }),
     /* @__PURE__ */ (0, import_jsx_runtime123.jsxs)("div", { className: (0, import_css75.cx)(styles["header"]), children: [
       /* @__PURE__ */ (0, import_jsx_runtime123.jsx)(Avatar, { name: getOrgInitials(organization.name), size: 80, alt: `${organization.name} logo` }),
       /* @__PURE__ */ (0, import_jsx_runtime123.jsxs)("div", { className: (0, import_css75.cx)(styles["orgInfo"]), children: [
@@ -18841,7 +19012,7 @@ var OrganizationProfile = ({
 }) => {
   const { baseUrl, instanceId } = useAsgardeo_default();
   const { t } = useTranslation_default(preferences?.i18n);
-  const [organization, setOrganization] = (0, import_react115.useState)(null);
+  const [organization, setOrganization] = (0, import_react117.useState)(null);
   const fetchOrganization = async () => {
     if (!baseUrl || !organizationId) {
       return;
@@ -18858,7 +19029,7 @@ var OrganizationProfile = ({
       setOrganization(null);
     }
   };
-  (0, import_react115.useEffect)(() => {
+  (0, import_react117.useEffect)(() => {
     fetchOrganization();
   }, [baseUrl, organizationId]);
   const handleOrganizationUpdate = async (payload) => {
@@ -18914,9 +19085,9 @@ var OrganizationSwitcher = ({
     isLoading,
     error
   } = useOrganization_default();
-  const [isCreateOrgOpen, setIsCreateOrgOpen] = (0, import_react116.useState)(false);
-  const [isProfileOpen, setIsProfileOpen] = (0, import_react116.useState)(false);
-  const [isOrganizationListOpen, setIsOrganizationListOpen] = (0, import_react116.useState)(false);
+  const [isCreateOrgOpen, setIsCreateOrgOpen] = (0, import_react118.useState)(false);
+  const [isProfileOpen, setIsProfileOpen] = (0, import_react118.useState)(false);
+  const [isOrganizationListOpen, setIsOrganizationListOpen] = (0, import_react118.useState)(false);
   const { t } = useTranslation_default(preferences?.i18n);
   if (!isSignedIn && fallback) {
     return fallback;
@@ -19009,13 +19180,13 @@ var OrganizationSwitcher_default = OrganizationSwitcher;
 
 // src/components/presentation/LanguageSwitcher/BaseLanguageSwitcher.tsx
 var import_css77 = require("@emotion/css");
-var import_react118 = require("@floating-ui/react");
-var import_react119 = require("react");
+var import_react120 = require("@floating-ui/react");
+var import_react121 = require("react");
 
 // src/components/presentation/LanguageSwitcher/BaseLanguageSwitcher.styles.ts
 var import_css76 = require("@emotion/css");
-var import_react117 = require("react");
-var useStyles35 = (theme, colorScheme) => (0, import_react117.useMemo)(() => {
+var import_react119 = require("react");
+var useStyles35 = (theme, colorScheme) => (0, import_react119.useMemo)(() => {
   const root = import_css76.css`
       display: inline-block;
       position: relative;
@@ -19136,23 +19307,23 @@ var BaseLanguageSwitcher = ({
 }) => {
   const { theme, colorScheme } = useTheme_default();
   const styles = BaseLanguageSwitcher_styles_default(theme, colorScheme);
-  const [isOpen, setIsOpen] = (0, import_react119.useState)(false);
+  const [isOpen, setIsOpen] = (0, import_react121.useState)(false);
   const hasMultipleLanguages = languages.length > 1;
-  (0, import_react119.useEffect)(() => {
+  (0, import_react121.useEffect)(() => {
     if (!hasMultipleLanguages && isOpen) {
       setIsOpen(false);
     }
   }, [hasMultipleLanguages, isOpen]);
-  const { refs, floatingStyles, context } = (0, import_react118.useFloating)({
-    middleware: [(0, import_react118.offset)(4), (0, import_react118.flip)(), (0, import_react118.shift)()],
+  const { refs, floatingStyles, context } = (0, import_react120.useFloating)({
+    middleware: [(0, import_react120.offset)(4), (0, import_react120.flip)(), (0, import_react120.shift)()],
     onOpenChange: setIsOpen,
     open: isOpen,
-    whileElementsMounted: import_react118.autoUpdate
+    whileElementsMounted: import_react120.autoUpdate
   });
-  const click = (0, import_react118.useClick)(context, { enabled: hasMultipleLanguages });
-  const dismiss = (0, import_react118.useDismiss)(context, { enabled: hasMultipleLanguages });
-  const role = (0, import_react118.useRole)(context, { enabled: hasMultipleLanguages, role: "listbox" });
-  const { getReferenceProps, getFloatingProps } = (0, import_react118.useInteractions)([click, dismiss, role]);
+  const click = (0, import_react120.useClick)(context, { enabled: hasMultipleLanguages });
+  const dismiss = (0, import_react120.useDismiss)(context, { enabled: hasMultipleLanguages });
+  const role = (0, import_react120.useRole)(context, { enabled: hasMultipleLanguages, role: "listbox" });
+  const { getReferenceProps, getFloatingProps } = (0, import_react120.useInteractions)([click, dismiss, role]);
   const currentOption = languages.find((l) => l.code === currentLanguage);
   if (children) {
     return /* @__PURE__ */ (0, import_jsx_runtime126.jsx)(import_jsx_runtime126.Fragment, { children: children({
@@ -19179,7 +19350,7 @@ var BaseLanguageSwitcher = ({
         ]
       }
     ),
-    isOpen && hasMultipleLanguages && /* @__PURE__ */ (0, import_jsx_runtime126.jsx)(import_react118.FloatingPortal, { children: /* @__PURE__ */ (0, import_jsx_runtime126.jsx)(import_react118.FloatingFocusManager, { context, modal: false, children: /* @__PURE__ */ (0, import_jsx_runtime126.jsx)(
+    isOpen && hasMultipleLanguages && /* @__PURE__ */ (0, import_jsx_runtime126.jsx)(import_react120.FloatingPortal, { children: /* @__PURE__ */ (0, import_jsx_runtime126.jsx)(import_react120.FloatingFocusManager, { context, modal: false, children: /* @__PURE__ */ (0, import_jsx_runtime126.jsx)(
       "div",
       {
         ref: refs.setFloating,
@@ -19215,12 +19386,12 @@ var BaseLanguageSwitcher_default = BaseLanguageSwitcher;
 
 // src/components/presentation/LanguageSwitcher/LanguageSwitcher.tsx
 var import_browser100 = require("@asgardeo/browser");
-var import_react121 = require("react");
+var import_react123 = require("react");
 
 // src/contexts/FlowMeta/useFlowMeta.ts
-var import_react120 = require("react");
+var import_react122 = require("react");
 var useFlowMeta = () => {
-  const context = (0, import_react120.useContext)(FlowMetaContext_default);
+  const context = (0, import_react122.useContext)(FlowMetaContext_default);
   if (!context) {
     throw new Error("useFlowMeta must be used within a FlowMetaProvider");
   }
@@ -19234,11 +19405,11 @@ var LanguageSwitcher = ({ children, className }) => {
   const { meta, switchLanguage, isLoading } = useFlowMeta_default();
   const { currentLanguage } = useTranslation_default();
   const availableLanguageCodes = meta?.i18n?.languages ?? [];
-  const effectiveLanguageCodes = (0, import_react121.useMemo)(
+  const effectiveLanguageCodes = (0, import_react123.useMemo)(
     () => availableLanguageCodes.length > 0 ? availableLanguageCodes : [currentLanguage],
     [availableLanguageCodes, currentLanguage]
   );
-  const languages = (0, import_react121.useMemo)(
+  const languages = (0, import_react123.useMemo)(
     () => effectiveLanguageCodes.map((code) => ({
       code,
       // Resolve each label in its own locale so option names stay stable across UI language switches.
@@ -19247,7 +19418,7 @@ var LanguageSwitcher = ({ children, className }) => {
     })),
     [effectiveLanguageCodes]
   );
-  (0, import_react121.useEffect)(() => {
+  (0, import_react123.useEffect)(() => {
     if (availableLanguageCodes.length > 0 && !availableLanguageCodes.includes(currentLanguage)) {
       switchLanguage(availableLanguageCodes[0]);
     }