@asgardeo/react 0.5.3 → 0.5.4

package/dist/index.js

@@ -4,13 +4,16 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
 
 // src/contexts/Asgardeo/AsgardeoProvider.tsx
 import {
-  AsgardeoRuntimeError as AsgardeoRuntimeError3
+  AsgardeoRuntimeError as AsgardeoRuntimeError3,
+  generateFlattenedUserProfile as generateFlattenedUserProfile2
 } from "@asgardeo/browser";
 import { useEffect as useEffect5, useMemo as useMemo6, useRef, useState as useState6 } from "react";
 
 // src/contexts/Asgardeo/AsgardeoContext.ts
 import { createContext } from "react";
 var AsgardeoContext = createContext({
+  organizationHandle: void 0,
+  applicationId: void 0,
   signInUrl: void 0,
   signUpUrl: void 0,
   afterSignInUrl: void 0,
@@ -35,7 +38,8 @@ import {
   generateUserProfile,
   AsgardeoRuntimeError,
   executeEmbeddedSignUpFlow,
-  executeEmbeddedSignInFlow
+  executeEmbeddedSignInFlow,
+  deriveOrganizationHandleFromBaseUrl
 } from "@asgardeo/browser";
 
 // src/__temp__/api.ts
@@ -243,8 +247,8 @@ var _AuthAPI = class _AuthAPI {
    * @return {Promise<DecodedIDTokenPayloadInterface>} - A Promise that resolves with
    * the decoded payload of the id token.
    */
-  async getDecodedIdToken() {
-    return this._client.getDecodedIdToken();
+  async getDecodedIdToken(sessionId) {
+    return this._client.getDecodedIdToken(sessionId);
   }
   /**
    * This method decodes the payload of the idp id token and returns it.
@@ -480,12 +484,22 @@ var AsgardeoReactClient = class extends AsgardeoBrowserClient {
     this.asgardeo = new api_default();
   }
   initialize(config) {
-    return this.asgardeo.init(config);
+    let resolvedOrganizationHandle = config?.organizationHandle;
+    if (!resolvedOrganizationHandle) {
+      resolvedOrganizationHandle = deriveOrganizationHandleFromBaseUrl(config?.baseUrl);
+    }
+    return this.asgardeo.init({ ...config, organizationHandle: resolvedOrganizationHandle });
   }
-  async getUser() {
+  async updateUserProfile(payload, userId) {
+    throw new Error("Not implemented");
+  }
+  async getUser(options) {
     try {
-      const configData = await this.asgardeo.getConfigData();
-      const baseUrl = configData?.baseUrl;
+      let baseUrl = options?.baseUrl;
+      if (!baseUrl) {
+        const configData = await this.asgardeo.getConfigData();
+        baseUrl = configData?.baseUrl;
+      }
       const profile = await getScim2Me_default({ baseUrl });
       const schemas = await getSchemas_default({ baseUrl });
       return generateUserProfile(profile, flattenUserSchema(schemas));
@@ -493,10 +507,16 @@ var AsgardeoReactClient = class extends AsgardeoBrowserClient {
       return this.asgardeo.getDecodedIdToken();
     }
   }
-  async getUserProfile() {
+  async getDecodedIdToken(sessionId) {
+    return this.asgardeo.getDecodedIdToken(sessionId);
+  }
+  async getUserProfile(options) {
     try {
-      const configData = await this.asgardeo.getConfigData();
-      const baseUrl = configData?.baseUrl;
+      let baseUrl = options?.baseUrl;
+      if (!baseUrl) {
+        const configData = await this.asgardeo.getConfigData();
+        baseUrl = configData?.baseUrl;
+      }
       const profile = await getScim2Me_default({ baseUrl });
       const schemas = await getSchemas_default({ baseUrl });
       const processedSchemas = flattenUserSchema(schemas);
@@ -514,10 +534,13 @@ var AsgardeoReactClient = class extends AsgardeoBrowserClient {
       };
     }
   }
-  async getOrganizations() {
+  async getOrganizations(options) {
     try {
-      const configData = await this.asgardeo.getConfigData();
-      const baseUrl = configData?.baseUrl;
+      let baseUrl = options?.baseUrl;
+      if (!baseUrl) {
+        const configData = await this.asgardeo.getConfigData();
+        baseUrl = configData?.baseUrl;
+      }
       const organizations = await getMeOrganizations_default({ baseUrl });
       return organizations;
     } catch (error) {
@@ -598,7 +621,7 @@ var AsgardeoReactClient = class extends AsgardeoBrowserClient {
         url: arg2.url
       });
     }
-    return this.asgardeo.signIn(arg1);
+    return await this.asgardeo.signIn(arg1);
   }
   async signOut(...args) {
     if (args[1] && typeof args[1] !== "function") {
@@ -984,6 +1007,7 @@ var OrganizationProvider = ({
   const [switchableOrgIds, setSwitchableOrgIds] = useState3(/* @__PURE__ */ new Set());
   const [currentPage, setCurrentPage] = useState3(1);
   const [currentFilter, setCurrentFilter] = useState3({});
+  const [isFetching, setIsFetching] = useState3(false);
   const fetchOrganizations = useCallback3(async () => {
     if (!isSignedIn) {
       return;
@@ -1046,9 +1070,10 @@ var OrganizationProvider = ({
   const fetchPaginatedOrganizations = useCallback3(
     async (config = {}) => {
       const { filter = "", limit = 10, recursive = false, reset = false } = config;
-      if (!isSignedIn || !baseUrl) {
+      if (!isSignedIn || !baseUrl || isFetching) {
         return;
       }
+      setIsFetching(true);
       try {
         if (reset) {
           setIsLoading(true);
@@ -1079,7 +1104,23 @@ var OrganizationProvider = ({
           filter,
           limit,
           recursive,
-          ...reset ? {} : { startIndex: (currentPage - 1) * limit }
+          ...reset ? {} : { startIndex: (currentPage - 1) * limit },
+          fetcher: async (url, config2) => {
+            try {
+              const response2 = await fetch(url, config2);
+              if (response2.status === 401 || response2.status === 403) {
+                const error2 = new Error("Insufficient permissions");
+                error2.status = response2.status;
+                throw error2;
+              }
+              return response2;
+            } catch (error2) {
+              if (error2.status === 401 || error2.status === 403) {
+                error2.noRetry = true;
+              }
+              throw error2;
+            }
+          }
         });
         const organizationsWithAccess = response.organizations.map(
           (org) => ({
@@ -1099,14 +1140,22 @@ var OrganizationProvider = ({
         setHasMore(response.hasMore || false);
         setTotalCount(response.totalCount || organizationsWithAccess.length);
       } catch (fetchError) {
-        const errorMessage = fetchError.message || "Failed to fetch paginated organizations";
+        const isAuthError = fetchError.status === 403 || fetchError.status === 401 || fetchError.noRetry === true;
+        const errorMessage = isAuthError ? "Insufficient permissions to fetch organizations" : fetchError.message || "Failed to fetch paginated organizations";
         setError(errorMessage);
+        if (isAuthError) {
+          setHasMore(false);
+          setIsLoadingMore(false);
+          setIsLoading(false);
+          return;
+        }
         if (onError) {
           onError(errorMessage);
         }
       } finally {
         setIsLoading(false);
         setIsLoadingMore(false);
+        setIsFetching(false);
       }
     },
     [baseUrl, isSignedIn, onError, switchableOrgIds, currentPage]
@@ -1160,8 +1209,13 @@ var OrganizationProvider = ({
 var OrganizationProvider_default = OrganizationProvider;
 
 // src/contexts/Theme/ThemeProvider.tsx
-import { useEffect as useEffect3, useMemo as useMemo4, useState as useState4 } from "react";
-import { createTheme } from "@asgardeo/browser";
+import { useEffect as useEffect3, useMemo as useMemo4, useState as useState4, useCallback as useCallback4 } from "react";
+import {
+  createTheme,
+  detectThemeMode,
+  createClassObserver,
+  createMediaQueryListener
+} from "@asgardeo/browser";
 
 // src/contexts/Theme/ThemeContext.ts
 import { createContext as createContext5 } from "react";
@@ -1179,13 +1233,46 @@ var applyThemeToDOM = (theme) => {
 var ThemeProvider = ({
   children,
   theme: themeConfig,
-  defaultColorScheme = "light"
+  mode = "system",
+  detection = {}
 }) => {
-  const [colorScheme, setColorScheme] = useState4(defaultColorScheme);
+  const [colorScheme, setColorScheme] = useState4(() => {
+    if (mode === "light" || mode === "dark") {
+      return mode;
+    }
+    return detectThemeMode(mode, detection);
+  });
   const theme = useMemo4(() => createTheme(themeConfig, colorScheme === "dark"), [themeConfig, colorScheme]);
-  const toggleTheme = () => {
+  const handleThemeChange = useCallback4((isDark) => {
+    setColorScheme(isDark ? "dark" : "light");
+  }, []);
+  const toggleTheme = useCallback4(() => {
     setColorScheme((prev) => prev === "light" ? "dark" : "light");
-  };
+  }, []);
+  useEffect3(() => {
+    let observer = null;
+    let mediaQuery = null;
+    if (mode === "class") {
+      const targetElement = detection.targetElement || document.documentElement;
+      if (targetElement) {
+        observer = createClassObserver(targetElement, handleThemeChange, detection);
+      }
+    } else if (mode === "system") {
+      mediaQuery = createMediaQueryListener(handleThemeChange);
+    }
+    return () => {
+      if (observer) {
+        observer.disconnect();
+      }
+      if (mediaQuery) {
+        if (mediaQuery.removeEventListener) {
+          mediaQuery.removeEventListener("change", handleThemeChange);
+        } else {
+          mediaQuery.removeListener(handleThemeChange);
+        }
+      }
+    };
+  }, [mode, detection, handleThemeChange]);
   useEffect3(() => {
     applyThemeToDOM(theme);
   }, [theme]);
@@ -1207,7 +1294,9 @@ var UserContext = createContext6({
   profile: null,
   schemas: null,
   flattenedProfile: null,
-  revalidateProfile: () => null
+  revalidateProfile: () => null,
+  updateProfile: () => null,
+  onUpdateProfile: () => null
 });
 UserContext.displayName = "UserContext";
 var UserContext_default = UserContext;
@@ -1217,16 +1306,20 @@ import { jsx as jsx5 } from "react/jsx-runtime";
 var UserProvider = ({
   children,
   profile,
-  revalidateProfile
+  revalidateProfile,
+  onUpdateProfile,
+  updateProfile
 }) => {
   const contextValue = useMemo5(
     () => ({
       schemas: profile?.schemas,
       profile: profile?.profile,
       flattenedProfile: profile?.flattenedProfile,
-      revalidateProfile
+      revalidateProfile,
+      updateProfile,
+      onUpdateProfile
     }),
-    [profile]
+    [profile, onUpdateProfile, revalidateProfile, updateProfile]
   );
   return /* @__PURE__ */ jsx5(UserContext_default.Provider, { value: contextValue, children });
 };
@@ -1237,13 +1330,15 @@ import { jsx as jsx6 } from "react/jsx-runtime";
 var AsgardeoProvider = ({
   afterSignInUrl = window.location.origin,
   afterSignOutUrl = window.location.origin,
-  baseUrl,
+  baseUrl: _baseUrl,
   clientId,
   children,
   scopes,
   preferences,
   signInUrl,
   signUpUrl,
+  organizationHandle,
+  applicationId,
   ...rest
 }) => {
   const reRenderCheckRef = useRef(false);
@@ -1254,18 +1349,26 @@ var AsgardeoProvider = ({
   const [isSignedInSync, setIsSignedInSync] = useState6(false);
   const [isInitializedSync, setIsInitializedSync] = useState6(false);
   const [userProfile, setUserProfile] = useState6(null);
+  const [baseUrl, setBaseUrl] = useState6(_baseUrl);
+  const [config, setConfig] = useState6({
+    applicationId,
+    organizationHandle,
+    afterSignInUrl,
+    afterSignOutUrl,
+    baseUrl,
+    clientId,
+    scopes,
+    signUpUrl,
+    signInUrl,
+    ...rest
+  });
+  useEffect5(() => {
+    setBaseUrl(_baseUrl);
+  }, [_baseUrl]);
   useEffect5(() => {
     (async () => {
-      await asgardeo.initialize({
-        afterSignInUrl,
-        afterSignOutUrl,
-        baseUrl,
-        clientId,
-        scopes,
-        signUpUrl,
-        signInUrl,
-        ...rest
-      });
+      await asgardeo.initialize(config);
+      setConfig(await asgardeo.getConfiguration());
     })();
   }, []);
   useEffect5(() => {
@@ -1275,9 +1378,7 @@ var AsgardeoProvider = ({
     reRenderCheckRef.current = true;
     (async () => {
       if (await asgardeo.isSignedIn()) {
-        setUser(await asgardeo.getUser());
-        setUserProfile(await asgardeo.getUserProfile());
-        setCurrentOrganization(await asgardeo.getCurrentOrganization());
+        await updateSession();
         return;
       }
       if (hasAuthParams(new URL(window.location.href), afterSignInUrl)) {
@@ -1330,13 +1431,21 @@ var AsgardeoProvider = ({
       }
     })();
   }, [asgardeo]);
+  const updateSession = async () => {
+    let _baseUrl2 = baseUrl;
+    if ((await asgardeo.getDecodedIdToken())?.["user_org"]) {
+      _baseUrl2 = `${(await asgardeo.getConfiguration()).baseUrl}/o`;
+      setBaseUrl(_baseUrl2);
+    }
+    setUser(await asgardeo.getUser({ baseUrl: _baseUrl2 }));
+    setUserProfile(await asgardeo.getUserProfile({ baseUrl: _baseUrl2 }));
+    setCurrentOrganization(await asgardeo.getCurrentOrganization());
+  };
   const signIn = async (...args) => {
     try {
       const response = await asgardeo.signIn(...args);
       if (await asgardeo.isSignedIn()) {
-        setUser(await asgardeo.getUser());
-        setUserProfile(await asgardeo.getUserProfile());
-        setCurrentOrganization(await asgardeo.getCurrentOrganization());
+        await updateSession();
       }
       return response;
     } catch (error) {
@@ -1360,9 +1469,7 @@ var AsgardeoProvider = ({
     try {
       await asgardeo.switchOrganization(organization);
       if (await asgardeo.isSignedIn()) {
-        setUser(await asgardeo.getUser());
-        setUserProfile(await asgardeo.getUserProfile());
-        setCurrentOrganization(await asgardeo.getCurrentOrganization());
+        await updateSession();
       }
     } catch (error) {
       throw new AsgardeoRuntimeError3(
@@ -1379,10 +1486,20 @@ var AsgardeoProvider = ({
     }
     return preferences.theme.mode === "dark";
   }, [preferences?.theme?.mode]);
+  const handleProfileUpdate = (payload) => {
+    setUser(payload);
+    setUserProfile((prev) => ({
+      ...prev,
+      profile: payload,
+      flattenedProfile: generateFlattenedUserProfile2(payload, prev?.schemas)
+    }));
+  };
   return /* @__PURE__ */ jsx6(
     AsgardeoContext_default.Provider,
     {
       value: {
+        applicationId,
+        organizationHandle: config?.organizationHandle,
         signInUrl,
         signUpUrl,
         afterSignInUrl,
@@ -1396,22 +1513,15 @@ var AsgardeoProvider = ({
         signUp,
         user
       },
-      children: /* @__PURE__ */ jsx6(I18nProvider_default, { preferences: preferences?.i18n, children: /* @__PURE__ */ jsx6(ThemeProvider_default, { theme: preferences?.theme?.overrides, defaultColorScheme: isDarkMode ? "dark" : "light", children: /* @__PURE__ */ jsx6(FlowProvider_default, { children: /* @__PURE__ */ jsx6(
-        UserProvider_default,
+      children: /* @__PURE__ */ jsx6(I18nProvider_default, { preferences: preferences?.i18n, children: /* @__PURE__ */ jsx6(ThemeProvider_default, { theme: preferences?.theme?.overrides, mode: isDarkMode ? "dark" : "light", children: /* @__PURE__ */ jsx6(FlowProvider_default, { children: /* @__PURE__ */ jsx6(UserProvider_default, { profile: userProfile, onUpdateProfile: handleProfileUpdate, children: /* @__PURE__ */ jsx6(
+        OrganizationProvider_default,
         {
-          profile: userProfile,
-          revalidateProfile: async () => setUserProfile(await asgardeo.getUserProfile()),
-          children: /* @__PURE__ */ jsx6(
-            OrganizationProvider_default,
-            {
-              getOrganizations: async () => asgardeo.getOrganizations(),
-              currentOrganization,
-              onOrganizationSwitch: switchOrganization,
-              children
-            }
-          )
+          getOrganizations: async () => asgardeo.getOrganizations(),
+          currentOrganization,
+          onOrganizationSwitch: switchOrganization,
+          children
         }
-      ) }) }) })
+      ) }) }) }) })
     }
   );
 };
@@ -1543,7 +1653,7 @@ var useTranslation = (componentPreferences) => {
 var useTranslation_default = useTranslation;
 
 // src/hooks/useForm.ts
-import { useState as useState7, useCallback as useCallback5 } from "react";
+import { useState as useState7, useCallback as useCallback6 } from "react";
 var useForm = (config = {}) => {
   const {
     initialValues = {},
@@ -1557,11 +1667,11 @@ var useForm = (config = {}) => {
   const [touched, setFormTouched] = useState7({});
   const [errors, setFormErrors] = useState7({});
   const [isSubmitted, setIsSubmitted] = useState7(false);
-  const getFieldConfig = useCallback5(
+  const getFieldConfig = useCallback6(
     (name) => fields.find((field) => field.name === name),
     [fields]
   );
-  const validateField = useCallback5(
+  const validateField = useCallback6(
     (name) => {
       const value = values[name] || "";
       const fieldConfig = getFieldConfig(name);
@@ -1576,7 +1686,7 @@ var useForm = (config = {}) => {
     },
     [values, getFieldConfig, requiredMessage]
   );
-  const validateForm = useCallback5(() => {
+  const validateForm = useCallback6(() => {
     const newErrors = {};
     fields.forEach((field) => {
       const error = validateField(field.name);
@@ -1598,7 +1708,7 @@ var useForm = (config = {}) => {
     };
   }, [fields, validateField, validator, values]);
   const isValid = Object.keys(errors).length === 0;
-  const setValue = useCallback5(
+  const setValue = useCallback6(
     (name, value) => {
       setFormValues((prev) => ({
         ...prev,
@@ -1619,13 +1729,13 @@ var useForm = (config = {}) => {
     },
     [validateField, validateOnChange]
   );
-  const setValues = useCallback5((newValues) => {
+  const setValues = useCallback6((newValues) => {
     setFormValues((prev) => ({
       ...prev,
       ...newValues
     }));
   }, []);
-  const setTouched = useCallback5(
+  const setTouched = useCallback6(
     (name, isTouched = true) => {
       setFormTouched((prev) => ({
         ...prev,
@@ -1646,13 +1756,13 @@ var useForm = (config = {}) => {
     },
     [validateField, validateOnBlur]
   );
-  const setTouchedFields = useCallback5((touchedFields) => {
+  const setTouchedFields = useCallback6((touchedFields) => {
     setFormTouched((prev) => ({
       ...prev,
       ...touchedFields
     }));
   }, []);
-  const touchAllFields = useCallback5(() => {
+  const touchAllFields = useCallback6(() => {
     const allTouched = fields.reduce((acc, field) => {
       acc[field.name] = true;
       return acc;
@@ -1661,28 +1771,28 @@ var useForm = (config = {}) => {
     const validation = validateForm();
     setFormErrors(validation.errors);
   }, [fields, validateForm]);
-  const setError = useCallback5((name, error) => {
+  const setError = useCallback6((name, error) => {
     setFormErrors((prev) => ({
       ...prev,
       [name]: error
     }));
   }, []);
-  const setErrors = useCallback5((newErrors) => {
+  const setErrors = useCallback6((newErrors) => {
     setFormErrors((prev) => ({
       ...prev,
       ...newErrors
     }));
   }, []);
-  const clearErrors = useCallback5(() => {
+  const clearErrors = useCallback6(() => {
     setFormErrors({});
   }, []);
-  const reset = useCallback5(() => {
+  const reset = useCallback6(() => {
     setFormValues({ ...initialValues });
     setFormTouched({});
     setFormErrors({});
     setIsSubmitted(false);
   }, [initialValues]);
-  const handleSubmit = useCallback5(
+  const handleSubmit = useCallback6(
     (onSubmit) => async (e) => {
       if (e) {
         e.preventDefault();
@@ -1696,7 +1806,7 @@ var useForm = (config = {}) => {
     },
     [values, touchAllFields, validateForm]
   );
-  const getFieldProps = useCallback5(
+  const getFieldProps = useCallback6(
     (name) => {
       const fieldConfig = getFieldConfig(name);
       return {
@@ -2313,7 +2423,7 @@ import {
   withVendorCSSClassPrefix as withVendorCSSClassPrefix14
 } from "@asgardeo/browser";
 import { clsx as clsx15 } from "clsx";
-import { useEffect as useEffect12, useState as useState13, useCallback as useCallback6, useRef as useRef3 } from "react";
+import { useEffect as useEffect12, useState as useState13, useCallback as useCallback7, useRef as useRef3 } from "react";
 
 // src/components/presentation/SignIn/options/SignInOptionFactory.tsx
 import {
@@ -4248,8 +4358,7 @@ var useCardStyles = (variant, clickable) => {
       },
       outlined: {
         ...baseStyles,
-        border: `1px solid ${theme.colors.border}`,
-        backgroundColor: "transparent"
+        border: `1px solid ${theme.colors.border}`
       },
       elevated: {
         ...baseStyles,
@@ -4775,7 +4884,7 @@ var BaseSignInContent = ({
     touchAllFields,
     reset: resetForm
   } = form;
-  const setupFormFields = useCallback6(
+  const setupFormFields = useCallback7(
     (authenticator) => {
       const initialValues = {};
       authenticator.metadata?.params?.forEach((param) => {
@@ -5174,11 +5283,11 @@ var BaseSignInContent = ({
     setFormValue(param, value);
     setFormTouched(param, true);
   };
-  const hasMultipleOptions = useCallback6(
+  const hasMultipleOptions = useCallback7(
     () => currentFlow && "nextStep" in currentFlow && currentFlow.nextStep?.stepType === EmbeddedSignInFlowStepType.MultiOptionsPrompt && currentFlow.nextStep?.authenticators && currentFlow.nextStep.authenticators.length > 1,
     [currentFlow]
   );
-  const getAvailableAuthenticators = useCallback6(() => {
+  const getAvailableAuthenticators = useCallback7(() => {
     if (!currentFlow || !("nextStep" in currentFlow) || !currentFlow.nextStep?.authenticators) {
       return [];
     }
@@ -5415,7 +5524,7 @@ var BaseSignIn_default = BaseSignIn;
 
 // src/components/presentation/SignIn/SignIn.tsx
 import { jsx as jsx52 } from "react/jsx-runtime";
-var SignIn = ({ className, size = "medium", variant = "outlined" }) => {
+var SignIn = ({ className, size = "medium", ...rest }) => {
   const { signIn, afterSignInUrl, isInitialized, isLoading } = useAsgardeo_default();
   const handleInitialize = async () => {
     return await signIn({ response_mode: "direct" });
@@ -5444,7 +5553,7 @@ var SignIn = ({ className, size = "medium", variant = "outlined" }) => {
       onSuccess: handleSuccess,
       className,
       size,
-      variant
+      ...rest
     }
   );
 };
@@ -5459,7 +5568,7 @@ import {
   AsgardeoAPIError as AsgardeoAPIError3
 } from "@asgardeo/browser";
 import { clsx as clsx16 } from "clsx";
-import { useEffect as useEffect13, useState as useState14, useCallback as useCallback7, useRef as useRef4 } from "react";
+import { useEffect as useEffect13, useState as useState14, useCallback as useCallback8, useRef as useRef4 } from "react";
 
 // src/components/presentation/SignUp/options/SignUpOptionFactory.tsx
 import { EmbeddedFlowComponentType } from "@asgardeo/browser";
@@ -6036,7 +6145,7 @@ var BaseSignUpContent = ({
   const [error, setError] = useState14(null);
   const [formData, setFormData] = useState14({});
   const initializationAttemptedRef = useRef4(false);
-  const extractFormFields = useCallback7(
+  const extractFormFields = useCallback8(
     (components) => {
       const fields = [];
       const processComponents = (comps) => {
@@ -6092,7 +6201,7 @@ var BaseSignUpContent = ({
     touchAllFields,
     reset: resetForm
   } = form;
-  const setupFormFields = useCallback7(
+  const setupFormFields = useCallback8(
     (flowResponse) => {
       const fields = extractFormFields(flowResponse.data?.components || []);
       const initialValues = {};
@@ -6294,7 +6403,7 @@ var BaseSignUpContent = ({
   );
   const errorClasses = clsx16([withVendorCSSClassPrefix15("signup__error")], errorClassName);
   const messageClasses = clsx16([withVendorCSSClassPrefix15("signup__messages")], messageClassName);
-  const renderComponents = useCallback7(
+  const renderComponents = useCallback8(
     (components) => renderSignUpComponents(
       components,
       formValues,
@@ -6405,11 +6514,11 @@ import { jsx as jsx62 } from "react/jsx-runtime";
 var SignUp = ({
   className,
   size = "medium",
-  variant = "outlined",
   afterSignUpUrl,
   onError,
   onComplete,
-  shouldRedirectAfterSignUp = true
+  shouldRedirectAfterSignUp = true,
+  ...rest
 }) => {
   const { signUp, isInitialized } = useAsgardeo_default();
   const handleInitialize = async (payload) => await signUp(
@@ -6438,8 +6547,8 @@ var SignUp = ({
       onComplete: handleComplete,
       className,
       size,
-      variant,
-      isInitialized
+      isInitialized,
+      ...rest
     }
   );
 };
@@ -6486,9 +6595,9 @@ Organization5.displayName = "Organization";
 var Organization_default = Organization5;
 
 // src/components/presentation/UserProfile/BaseUserProfile.tsx
-import { withVendorCSSClassPrefix as withVendorCSSClassPrefix18, WellKnownSchemaIds } from "@asgardeo/browser";
-import clsx19 from "clsx";
-import { useMemo as useMemo14, useState as useState15, useCallback as useCallback8, useRef as useRef5 } from "react";
+import { withVendorCSSClassPrefix as withVendorCSSClassPrefix19, WellKnownSchemaIds } from "@asgardeo/browser";
+import clsx20 from "clsx";
+import { useMemo as useMemo15, useState as useState16, useCallback as useCallback10, useRef as useRef5 } from "react";
 
 // src/utils/getMappedUserProfileValue.ts
 import { get } from "@asgardeo/browser";
@@ -7026,8 +7135,238 @@ var LegacyPopover = ({ isOpen, children, onClose, className = "", mode = "modal"
 LegacyPopover.Header = LegacyPopoverHeader;
 LegacyPopover.Content = LegacyPopoverContent;
 
+// src/components/primitives/MultiInput/MultiInput.tsx
+import { useCallback as useCallback9, useState as useState15, useMemo as useMemo14 } from "react";
+import clsx19 from "clsx";
+import { withVendorCSSClassPrefix as withVendorCSSClassPrefix18 } from "@asgardeo/browser";
+import { jsx as jsx73, jsxs as jsxs35 } from "react/jsx-runtime";
+var useStyles4 = () => {
+  const { theme } = useTheme_default();
+  return useMemo14(
+    () => ({
+      container: {
+        display: "flex",
+        flexDirection: "column",
+        gap: `${theme.spacing.unit}px`
+      },
+      inputRow: {
+        display: "flex",
+        alignItems: "center",
+        gap: `${theme.spacing.unit}px`,
+        position: "relative"
+      },
+      inputWrapper: {
+        flex: 1
+      },
+      plusIcon: {
+        background: "var(--asgardeo-color-secondary-main)",
+        borderRadius: "50%",
+        outline: "4px var(--asgardeo-color-secondary-main) auto",
+        color: "var(--asgardeo-color-secondary-contrastText)"
+      },
+      listContainer: {
+        display: "flex",
+        flexDirection: "column",
+        gap: `${theme.spacing.unit / 2}px`
+      },
+      listItem: {
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "space-between",
+        padding: `${theme.spacing.unit}px ${theme.spacing.unit * 1.5}px`,
+        backgroundColor: theme.colors.background.surface,
+        border: `1px solid ${theme.colors.border}`,
+        borderRadius: theme.borderRadius.medium,
+        fontSize: "1rem",
+        color: theme.colors.text.primary
+      },
+      removeButton: {
+        padding: `${theme.spacing.unit / 2}px`,
+        minWidth: "auto",
+        color: theme.colors.error.main
+      }
+    }),
+    [theme]
+  );
+};
+var MultiInput = ({
+  label,
+  error,
+  required,
+  className,
+  disabled,
+  helperText,
+  placeholder = "Enter value",
+  values = [],
+  onChange,
+  style = {},
+  type = "text",
+  fieldType = "STRING",
+  startIcon,
+  endIcon,
+  minFields = 1,
+  maxFields
+}) => {
+  const styles = useStyles4();
+  const PlusIcon = ({ style: style2 }) => /* @__PURE__ */ jsx73(
+    "svg",
+    {
+      width: "16",
+      height: "16",
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "2",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      style: style2,
+      children: /* @__PURE__ */ jsx73("path", { d: "M12 5v14M5 12h14" })
+    }
+  );
+  const BinIcon = () => /* @__PURE__ */ jsx73(
+    "svg",
+    {
+      width: "16",
+      height: "16",
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "2",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      children: /* @__PURE__ */ jsx73("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 = useCallback9(
+    (newValue) => {
+      if (newValue.trim() !== "" && (!maxFields || values.length < maxFields)) {
+        onChange([...values, newValue.trim()]);
+      }
+    },
+    [values, onChange, maxFields]
+  );
+  const handleRemoveValue = useCallback9(
+    (index) => {
+      if (values.length > minFields) {
+        const updatedValues = values.filter((_, i) => i !== index);
+        onChange(updatedValues);
+      }
+    },
+    [values, onChange, minFields]
+  );
+  const renderInputField = useCallback9(
+    (value, onValueChange, attachedEndIcon, onEndIconClick) => {
+      const handleInputChange = (e) => {
+        const newValue = e.target ? e.target.value : e;
+        onValueChange(newValue);
+      };
+      const handleKeyDown = (e) => {
+        if (e.key === "Enter" && onEndIconClick) {
+          e.preventDefault();
+          onEndIconClick();
+        }
+      };
+      const finalEndIcon = attachedEndIcon || endIcon;
+      const commonProps = {
+        value,
+        onChange: handleInputChange,
+        onKeyDown: handleKeyDown,
+        placeholder,
+        disabled,
+        startIcon,
+        endIcon: finalEndIcon,
+        onEndIconClick,
+        error
+      };
+      switch (fieldType) {
+        case "DATE_TIME":
+          return /* @__PURE__ */ jsx73(DatePicker_default, { ...commonProps });
+        case "BOOLEAN":
+          return /* @__PURE__ */ jsx73(
+            Checkbox_default,
+            {
+              ...commonProps,
+              checked: value === "true" || Boolean(value),
+              onChange: (e) => onValueChange(e.target.checked ? "true" : "false")
+            }
+          );
+        default:
+          return /* @__PURE__ */ jsx73(TextField_default, { ...commonProps, type });
+      }
+    },
+    [placeholder, disabled, startIcon, endIcon, error, fieldType, type]
+  );
+  const canAddMore = !maxFields || values.length < maxFields;
+  const canRemove = values.length > minFields;
+  const [currentInputValue, setCurrentInputValue] = useState15("");
+  const handleInputSubmit = useCallback9(() => {
+    if (currentInputValue.trim() !== "") {
+      handleAddValue(currentInputValue);
+      setCurrentInputValue("");
+    }
+  }, [currentInputValue, handleAddValue]);
+  return /* @__PURE__ */ jsxs35(
+    FormControl_default,
+    {
+      error,
+      helperText,
+      className: clsx19(withVendorCSSClassPrefix18("multi-input"), className),
+      style,
+      children: [
+        label && /* @__PURE__ */ jsx73(InputLabel_default, { required, error: !!error, children: label }),
+        /* @__PURE__ */ jsxs35("div", { style: styles.container, children: [
+          /* @__PURE__ */ jsx73("div", { style: styles.inputRow, children: /* @__PURE__ */ jsx73("div", { style: styles.inputWrapper, children: renderInputField(
+            currentInputValue,
+            setCurrentInputValue,
+            canAddMore ? /* @__PURE__ */ jsx73(PlusIcon, { style: styles.plusIcon }) : void 0,
+            canAddMore ? handleInputSubmit : void 0
+          ) }) }),
+          values.length > 0 && /* @__PURE__ */ jsx73("div", { style: styles.listContainer, children: values.map((value, index) => /* @__PURE__ */ jsxs35("div", { style: styles.listItem, children: [
+            /* @__PURE__ */ jsx73("span", { children: value }),
+            canRemove && /* @__PURE__ */ jsx73(
+              Button_default,
+              {
+                size: "small",
+                color: "secondary",
+                variant: "text",
+                onClick: () => handleRemoveValue(index),
+                disabled,
+                title: "Remove value",
+                style: styles.removeButton,
+                children: /* @__PURE__ */ jsx73(BinIcon, {})
+              }
+            )
+          ] }, index)) })
+        ] })
+      ]
+    }
+  );
+};
+var MultiInput_default = MultiInput;
+
 // src/components/presentation/UserProfile/BaseUserProfile.tsx
-import { Fragment as Fragment16, jsx as jsx73, jsxs as jsxs35 } from "react/jsx-runtime";
+import { Fragment as Fragment16, jsx as jsx74, jsxs as jsxs36 } from "react/jsx-runtime";
+var fieldsToSkip = [
+  "roles.default",
+  "active",
+  "groups",
+  "profileUrl",
+  "accountLocked",
+  "accountDisabled",
+  "oneTimePassword",
+  "userSourceId",
+  "idpType",
+  "localCredentialExists",
+  "active",
+  "ResourceType",
+  "ExternalID",
+  "MetaData",
+  "verifiedMobileNumbers",
+  "verifiedEmailAddresses",
+  "phoneNumbers.mobile",
+  "emailAddresses"
+];
+var readonlyFields = ["username", "userName", "user_name"];
 var BaseUserProfile = ({
   fallback = null,
   className = "",
@@ -7048,10 +7387,10 @@ var BaseUserProfile = ({
   cancelButtonText = "Cancel"
 }) => {
   const { theme } = useTheme_default();
-  const [editedUser, setEditedUser] = useState15(flattenedProfile || profile);
-  const [editingFields, setEditingFields] = useState15({});
+  const [editedUser, setEditedUser] = useState16(flattenedProfile || profile);
+  const [editingFields, setEditingFields] = useState16({});
   const triggerRef = useRef5(null);
-  const PencilIcon = () => /* @__PURE__ */ jsx73(
+  const PencilIcon = () => /* @__PURE__ */ jsx74(
     "svg",
     {
       width: "16",
@@ -7062,16 +7401,16 @@ var BaseUserProfile = ({
       strokeWidth: "2",
       strokeLinecap: "round",
       strokeLinejoin: "round",
-      children: /* @__PURE__ */ jsx73("path", { d: "M17 3a2.828 2.828 0 1 1 4 4L7.5 20.5 2 22l1.5-5.5L17 3z" })
+      children: /* @__PURE__ */ jsx74("path", { d: "M17 3a2.828 2.828 0 1 1 4 4L7.5 20.5 2 22l1.5-5.5L17 3z" })
     }
   );
-  const toggleFieldEdit = useCallback8((fieldName) => {
+  const toggleFieldEdit = useCallback10((fieldName) => {
     setEditingFields((prev) => ({
       ...prev,
       [fieldName]: !prev[fieldName]
     }));
   }, []);
-  const getFieldPlaceholder = useCallback8((schema) => {
+  const getFieldPlaceholder = useCallback10((schema) => {
     const { type, displayName, description, name } = schema;
     const fieldLabel = displayName || description || name || "value";
     switch (type) {
@@ -7087,12 +7426,12 @@ var BaseUserProfile = ({
   }, []);
   const ObjectDisplay = ({ data }) => {
     if (!data || typeof data !== "object") return null;
-    return /* @__PURE__ */ jsx73("table", { style: { width: "100%", borderCollapse: "collapse" }, children: /* @__PURE__ */ jsx73("tbody", { children: Object.entries(data).map(([key, value]) => /* @__PURE__ */ jsxs35("tr", { style: { borderBottom: `1px solid ${theme.colors.border}` }, children: [
-      /* @__PURE__ */ jsx73("td", { style: { padding: `${theme.spacing.unit}px`, verticalAlign: "top" }, children: /* @__PURE__ */ jsxs35("strong", { children: [
+    return /* @__PURE__ */ jsx74("table", { style: { width: "100%", borderCollapse: "collapse" }, children: /* @__PURE__ */ jsx74("tbody", { children: Object.entries(data).map(([key, value]) => /* @__PURE__ */ jsxs36("tr", { style: { borderBottom: `1px solid ${theme.colors.border}` }, children: [
+      /* @__PURE__ */ jsx74("td", { style: { padding: `${theme.spacing.unit}px`, verticalAlign: "top" }, children: /* @__PURE__ */ jsxs36("strong", { children: [
         formatLabel(key),
         ":"
       ] }) }),
-      /* @__PURE__ */ jsx73("td", { style: { padding: `${theme.spacing.unit}px`, verticalAlign: "top" }, children: typeof value === "object" ? /* @__PURE__ */ jsx73(ObjectDisplay, { data: value }) : String(value) })
+      /* @__PURE__ */ jsx74("td", { style: { padding: `${theme.spacing.unit}px`, verticalAlign: "top" }, children: typeof value === "object" ? /* @__PURE__ */ jsx74(ObjectDisplay, { data: value }) : String(value) })
     ] }, key)) }) });
   };
   function set(obj, path, value) {
@@ -7110,11 +7449,14 @@ var BaseUserProfile = ({
       }
     }
   }
-  const handleFieldSave = useCallback8(
+  const handleFieldSave = useCallback10(
     (schema) => {
       if (!onUpdate || !schema.name) return;
       const fieldName = schema.name;
-      const fieldValue = editedUser && fieldName && editedUser[fieldName] !== void 0 ? editedUser[fieldName] : flattenedProfile && flattenedProfile[fieldName] !== void 0 ? flattenedProfile[fieldName] : "";
+      let fieldValue = editedUser && fieldName && editedUser[fieldName] !== void 0 ? editedUser[fieldName] : flattenedProfile && flattenedProfile[fieldName] !== void 0 ? flattenedProfile[fieldName] : "";
+      if (Array.isArray(fieldValue)) {
+        fieldValue = fieldValue.filter((v) => v !== void 0 && v !== null && v !== "");
+      }
       let payload = {};
       if (schema.schemaId && schema.schemaId !== WellKnownSchemaIds.User) {
         payload = {
@@ -7130,7 +7472,7 @@ var BaseUserProfile = ({
     },
     [editedUser, flattenedProfile, onUpdate, toggleFieldEdit]
   );
-  const handleFieldCancel = useCallback8(
+  const handleFieldCancel = useCallback10(
     (fieldName) => {
       const currentUser2 = flattenedProfile || profile;
       setEditedUser((prev) => ({
@@ -7141,12 +7483,12 @@ var BaseUserProfile = ({
     },
     [flattenedProfile, profile, toggleFieldEdit]
   );
-  const formatLabel = useCallback8(
+  const formatLabel = useCallback10(
     (key) => key.split(/(?=[A-Z])|_/).map((word) => word.charAt(0).toUpperCase() + word.slice(1).toLowerCase()).join(" "),
     []
   );
-  const styles = useStyles4();
-  const buttonStyle = useMemo14(
+  const styles = useStyles5();
+  const buttonStyle = useMemo15(
     () => ({
       padding: `${theme.spacing.unit}px ${theme.spacing.unit * 2}px`,
       margin: `${theme.spacing.unit}px`,
@@ -7158,7 +7500,7 @@ var BaseUserProfile = ({
     }),
     [theme]
   );
-  const saveButtonStyle = useMemo14(
+  const saveButtonStyle = useMemo15(
     () => ({
       ...buttonStyle,
       backgroundColor: theme.colors.primary.main,
@@ -7166,7 +7508,7 @@ var BaseUserProfile = ({
     }),
     [theme, buttonStyle]
   );
-  const cancelButtonStyle = useMemo14(
+  const cancelButtonStyle = useMemo15(
     () => ({
       ...buttonStyle,
       backgroundColor: theme.colors.secondary.main,
@@ -7184,28 +7526,66 @@ var BaseUserProfile = ({
   const mergedMappings = { ...defaultAttributeMappings, ...attributeMapping };
   const renderSchemaField = (schema, isEditing, onEditValue, onStartEdit) => {
     if (!schema) return null;
-    const { value, displayName, description, name, type, required, mutability, subAttributes } = schema;
+    const { value, displayName, description, name, type, required, mutability, subAttributes, multiValued } = schema;
     const label = displayName || description || name || "";
     if (subAttributes && Array.isArray(subAttributes)) {
-      return /* @__PURE__ */ jsx73(Fragment16, { children: subAttributes.map((subAttr, index) => /* @__PURE__ */ jsxs35("div", { style: styles.field, children: [
-        /* @__PURE__ */ jsx73("span", { style: styles.label, children: subAttr.displayName || subAttr.description || "" }),
-        /* @__PURE__ */ jsx73("div", { style: styles.value, children: Array.isArray(subAttr.value) ? subAttr.value.map((item) => typeof item === "object" ? JSON.stringify(item) : String(item)).join(", ") : typeof subAttr.value === "object" ? JSON.stringify(subAttr.value) : String(subAttr.value) })
+      return /* @__PURE__ */ jsx74(Fragment16, { children: subAttributes.map((subAttr, index) => /* @__PURE__ */ jsxs36("div", { style: styles.field, children: [
+        /* @__PURE__ */ jsx74("span", { style: styles.label, children: subAttr.displayName || subAttr.description || "" }),
+        /* @__PURE__ */ jsx74("div", { style: styles.value, children: Array.isArray(subAttr.value) ? subAttr.value.map((item) => typeof item === "object" ? JSON.stringify(item) : String(item)).join(", ") : typeof subAttr.value === "object" ? JSON.stringify(subAttr.value) : String(subAttr.value) })
       ] }, index)) });
     }
-    if (Array.isArray(value)) {
-      const hasValues = value.length > 0;
-      const isEditable2 = editable && mutability !== "READ_ONLY";
+    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 || "");
+      if (isEditing && onEditValue && isEditable2) {
+        const currentValue = editedUser && name && editedUser[name] !== void 0 ? editedUser[name] : flattenedProfile && name && flattenedProfile[name] !== void 0 ? flattenedProfile[name] : value;
+        let fieldValues;
+        if (Array.isArray(currentValue)) {
+          fieldValues = currentValue.map(String);
+        } else if (currentValue !== void 0 && currentValue !== null && currentValue !== "") {
+          fieldValues = [String(currentValue)];
+        } else {
+          fieldValues = [];
+        }
+        return /* @__PURE__ */ jsxs36(Fragment16, { children: [
+          /* @__PURE__ */ jsx74("span", { style: styles.label, children: label }),
+          /* @__PURE__ */ jsx74("div", { style: styles.value, children: /* @__PURE__ */ jsx74(
+            MultiInput_default,
+            {
+              values: fieldValues,
+              onChange: (newValues) => {
+                if (multiValued || Array.isArray(currentValue)) {
+                  onEditValue(newValues);
+                } else {
+                  onEditValue(newValues[0] || "");
+                }
+              },
+              placeholder: getFieldPlaceholder(schema),
+              fieldType: type,
+              type: type === "DATE_TIME" ? "date" : type === "STRING" ? "text" : "text",
+              required,
+              style: {
+                marginBottom: 0
+              }
+            }
+          ) })
+        ] });
+      }
       let displayValue2;
       if (hasValues) {
-        displayValue2 = value.map((item) => typeof item === "object" ? JSON.stringify(item) : String(item)).join(", ");
+        if (Array.isArray(value)) {
+          displayValue2 = value.map((item) => typeof item === "object" ? JSON.stringify(item) : String(item)).join(", ");
+        } else {
+          displayValue2 = String(value);
+        }
       } else if (isEditable2) {
         displayValue2 = getFieldPlaceholder(schema);
       } else {
         displayValue2 = "-";
       }
-      return /* @__PURE__ */ jsxs35(Fragment16, { children: [
-        /* @__PURE__ */ jsx73("span", { style: styles.label, children: label }),
-        /* @__PURE__ */ jsx73("div", { style: { ...styles.value, fontStyle: hasValues ? "normal" : "italic", opacity: hasValues ? 1 : 0.7 }, children: !hasValues && isEditable2 && onStartEdit ? /* @__PURE__ */ jsx73(
+      return /* @__PURE__ */ jsxs36(Fragment16, { children: [
+        /* @__PURE__ */ jsx74("span", { style: styles.label, children: label }),
+        /* @__PURE__ */ jsx74("div", { style: { ...styles.value, fontStyle: hasValues ? "normal" : "italic", opacity: hasValues ? 1 : 0.7 }, children: !hasValues && isEditable2 && onStartEdit ? /* @__PURE__ */ jsx74(
           "button",
           {
             onClick: onStartEdit,
@@ -7227,9 +7607,9 @@ var BaseUserProfile = ({
       ] });
     }
     if (type === "COMPLEX" && typeof value === "object") {
-      return /* @__PURE__ */ jsx73(ObjectDisplay, { data: value });
+      return /* @__PURE__ */ jsx74(ObjectDisplay, { data: value });
     }
-    if (isEditing && onEditValue && mutability !== "READ_ONLY") {
+    if (isEditing && onEditValue && mutability !== "READ_ONLY" && !readonlyFields.includes(name || "")) {
       const fieldValue = editedUser && name && editedUser[name] !== void 0 ? editedUser[name] : flattenedProfile && name && flattenedProfile[name] !== void 0 ? flattenedProfile[name] : value || "";
       const commonProps = {
         label: void 0,
@@ -7245,16 +7625,16 @@ var BaseUserProfile = ({
       let field;
       switch (type) {
         case "STRING":
-          field = /* @__PURE__ */ jsx73(TextField_default, { ...commonProps });
+          field = /* @__PURE__ */ jsx74(TextField_default, { ...commonProps });
           break;
         case "DATE_TIME":
-          field = /* @__PURE__ */ jsx73(DatePicker_default, { ...commonProps });
+          field = /* @__PURE__ */ jsx74(DatePicker_default, { ...commonProps });
           break;
         case "BOOLEAN":
-          field = /* @__PURE__ */ jsx73(Checkbox_default, { ...commonProps, checked: !!fieldValue, onChange: (e) => onEditValue(e.target.checked) });
+          field = /* @__PURE__ */ jsx74(Checkbox_default, { ...commonProps, checked: !!fieldValue, onChange: (e) => onEditValue(e.target.checked) });
           break;
         case "COMPLEX":
-          field = /* @__PURE__ */ jsx73(
+          field = /* @__PURE__ */ jsx74(
             "textarea",
             {
               value: fieldValue,
@@ -7274,15 +7654,15 @@ var BaseUserProfile = ({
           );
           break;
         default:
-          field = /* @__PURE__ */ jsx73(TextField_default, { ...commonProps });
+          field = /* @__PURE__ */ jsx74(TextField_default, { ...commonProps });
       }
-      return /* @__PURE__ */ jsxs35(Fragment16, { children: [
-        /* @__PURE__ */ jsx73("span", { style: styles.label, children: label }),
-        /* @__PURE__ */ jsx73("div", { style: styles.value, children: field })
+      return /* @__PURE__ */ jsxs36(Fragment16, { children: [
+        /* @__PURE__ */ jsx74("span", { style: styles.label, children: label }),
+        /* @__PURE__ */ jsx74("div", { style: styles.value, children: field })
       ] });
     }
     const hasValue = value !== void 0 && value !== null && value !== "";
-    const isEditable = editable && mutability !== "READ_ONLY";
+    const isEditable = editable && mutability !== "READ_ONLY" && !readonlyFields.includes(name || "");
     let displayValue;
     if (hasValue) {
       displayValue = String(value);
@@ -7291,9 +7671,9 @@ var BaseUserProfile = ({
     } else {
       displayValue = "-";
     }
-    return /* @__PURE__ */ jsxs35(Fragment16, { children: [
-      /* @__PURE__ */ jsx73("span", { style: styles.label, children: label }),
-      /* @__PURE__ */ jsx73("div", { style: { ...styles.value, fontStyle: hasValue ? "normal" : "italic", opacity: hasValue ? 1 : 0.7 }, children: !hasValue && isEditable && onStartEdit ? /* @__PURE__ */ jsx73(
+    return /* @__PURE__ */ jsxs36(Fragment16, { children: [
+      /* @__PURE__ */ jsx74("span", { style: styles.label, children: label }),
+      /* @__PURE__ */ jsx74("div", { style: { ...styles.value, fontStyle: hasValue ? "normal" : "italic", opacity: hasValue ? 1 : 0.7 }, children: !hasValue && isEditable && onStartEdit ? /* @__PURE__ */ jsx74(
         "button",
         {
           onClick: onStartEdit,
@@ -7318,6 +7698,7 @@ var BaseUserProfile = ({
     if (!schema || !schema.name) return null;
     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";
     if (!shouldShow) {
       return null;
@@ -7328,8 +7709,8 @@ var BaseUserProfile = ({
       alignItems: "center",
       gap: `${theme.spacing.unit}px`
     };
-    return /* @__PURE__ */ jsxs35("div", { style: fieldStyle, children: [
-      /* @__PURE__ */ jsx73("div", { style: { flex: 1, display: "flex", alignItems: "center", gap: `${theme.spacing.unit}px` }, children: renderSchemaField(
+    return /* @__PURE__ */ jsxs36("div", { style: fieldStyle, children: [
+      /* @__PURE__ */ jsx74("div", { style: { flex: 1, display: "flex", alignItems: "center", gap: `${theme.spacing.unit}px` }, children: renderSchemaField(
         schema,
         isFieldEditing,
         (value) => {
@@ -7339,7 +7720,7 @@ var BaseUserProfile = ({
         },
         () => toggleFieldEdit(schema.name)
       ) }),
-      editable && schema.mutability !== "READ_ONLY" && /* @__PURE__ */ jsxs35(
+      editable && schema.mutability !== "READ_ONLY" && !isReadonlyField && /* @__PURE__ */ jsxs36(
         "div",
         {
           style: {
@@ -7349,9 +7730,9 @@ var BaseUserProfile = ({
             marginLeft: `${theme.spacing.unit}px`
           },
           children: [
-            isFieldEditing && /* @__PURE__ */ jsxs35(Fragment16, { children: [
-              /* @__PURE__ */ jsx73(Button_default, { size: "small", color: "primary", variant: "solid", onClick: () => handleFieldSave(schema), children: "Save" }),
-              /* @__PURE__ */ jsx73(
+            isFieldEditing && /* @__PURE__ */ jsxs36(Fragment16, { children: [
+              /* @__PURE__ */ jsx74(Button_default, { size: "small", color: "primary", variant: "solid", onClick: () => handleFieldSave(schema), children: "Save" }),
+              /* @__PURE__ */ jsx74(
                 Button_default,
                 {
                   size: "small",
@@ -7362,7 +7743,7 @@ var BaseUserProfile = ({
                 }
               )
             ] }),
-            !isFieldEditing && hasValue && /* @__PURE__ */ jsx73(
+            !isFieldEditing && hasValue && /* @__PURE__ */ jsx74(
               Button_default,
               {
                 size: "small",
@@ -7373,7 +7754,7 @@ var BaseUserProfile = ({
                 style: {
                   padding: `${theme.spacing.unit / 2}px`
                 },
-                children: /* @__PURE__ */ jsx73(PencilIcon, {})
+                children: /* @__PURE__ */ jsx74(PencilIcon, {})
               }
             )
           ]
@@ -7400,9 +7781,8 @@ var BaseUserProfile = ({
   const currentUser = flattenedProfile || profile;
   const avatarAttributes = ["picture"];
   const excludedProps = avatarAttributes.map((attr) => mergedMappings[attr] || attr);
-  const fieldsToSkip = ["verifiedMobileNumbers", "verifiedEmailAddresses"];
-  const profileContent = /* @__PURE__ */ jsxs35(Card_default, { style: containerStyle, className: clsx19(withVendorCSSClassPrefix18("user-profile"), className), children: [
-    /* @__PURE__ */ jsx73("div", { style: styles.header, children: /* @__PURE__ */ jsx73(
+  const profileContent = /* @__PURE__ */ jsxs36(Card_default, { style: containerStyle, className: clsx20(withVendorCSSClassPrefix19("user-profile"), className), children: [
+    /* @__PURE__ */ jsx74("div", { style: styles.header, children: /* @__PURE__ */ jsx74(
       Avatar,
       {
         imageUrl: getMappedUserProfileValue_default("picture", mergedMappings, currentUser),
@@ -7411,7 +7791,7 @@ var BaseUserProfile = ({
         alt: `${getDisplayName()}'s avatar`
       }
     ) }),
-    /* @__PURE__ */ jsx73("div", { style: styles.infoContainer, children: schemas.filter((schema) => {
+    /* @__PURE__ */ jsx74("div", { style: styles.infoContainer, children: schemas.filter((schema) => {
       if (!schema.name || schema.name === "profileUrl") return false;
       if (fieldsToSkip.includes(schema.name)) return false;
       if (!editable) {
@@ -7429,20 +7809,20 @@ var BaseUserProfile = ({
         ...schema,
         value
       };
-      return /* @__PURE__ */ jsx73("div", { children: renderUserInfo(schemaWithValue) }, schema.name || index);
+      return /* @__PURE__ */ jsx74("div", { children: renderUserInfo(schemaWithValue) }, schema.name || index);
     }) })
   ] });
   if (mode === "popup") {
-    return /* @__PURE__ */ jsx73(Dialog, { open, onOpenChange, children: /* @__PURE__ */ jsxs35(DialogContent, { children: [
-      /* @__PURE__ */ jsx73(DialogHeading, { children: title }),
-      /* @__PURE__ */ jsx73("div", { style: { padding: "1rem" }, children: profileContent })
+    return /* @__PURE__ */ jsx74(Dialog, { open, onOpenChange, children: /* @__PURE__ */ jsxs36(DialogContent, { children: [
+      /* @__PURE__ */ jsx74(DialogHeading, { children: title }),
+      /* @__PURE__ */ jsx74("div", { style: { padding: "1rem" }, children: profileContent })
     ] }) });
   }
   return profileContent;
 };
-var useStyles4 = () => {
+var useStyles5 = () => {
   const { theme, colorScheme } = useTheme_default();
-  return useMemo14(
+  return useMemo15(
     () => ({
       root: {
         padding: `${theme.spacing.unit * 4}px`,
@@ -7499,7 +7879,7 @@ var useStyles4 = () => {
         gap: `${theme.spacing.unit}px`,
         overflow: "hidden",
         minHeight: "32px",
-        "& input, & .MuiInputBase-root": {
+        "& input": {
           height: "32px",
           margin: 0
         },
@@ -7552,15 +7932,15 @@ var updateMeProfile = async ({ fetcher, ...requestConfig }) => {
 var updateMeProfile_default = updateMeProfile;
 
 // src/components/presentation/UserProfile/UserProfile.tsx
-import { jsx as jsx74 } from "react/jsx-runtime";
+import { jsx as jsx75 } from "react/jsx-runtime";
 var UserProfile3 = ({ ...rest }) => {
   const { baseUrl } = useAsgardeo_default();
-  const { profile, flattenedProfile, schemas, revalidateProfile } = useUser_default();
+  const { profile, flattenedProfile, schemas, onUpdateProfile } = useUser_default();
   const handleProfileUpdate = async (payload) => {
-    await updateMeProfile_default({ baseUrl, payload });
-    await revalidateProfile();
+    const response = await updateMeProfile_default({ baseUrl, payload });
+    onUpdateProfile(response);
   };
-  return /* @__PURE__ */ jsx74(
+  return /* @__PURE__ */ jsx75(
     BaseUserProfile_default,
     {
       profile,
@@ -7574,7 +7954,7 @@ var UserProfile3 = ({ ...rest }) => {
 var UserProfile_default = UserProfile3;
 
 // src/components/presentation/UserDropdown/BaseUserDropdown.tsx
-import { withVendorCSSClassPrefix as withVendorCSSClassPrefix19 } from "@asgardeo/browser";
+import { withVendorCSSClassPrefix as withVendorCSSClassPrefix20 } from "@asgardeo/browser";
 import {
   useFloating as useFloating2,
   autoUpdate as autoUpdate2,
@@ -7588,12 +7968,12 @@ import {
   FloatingFocusManager as FloatingFocusManager2,
   FloatingPortal as FloatingPortal2
 } from "@floating-ui/react";
-import clsx20 from "clsx";
-import { useMemo as useMemo15, useState as useState16 } from "react";
-import { jsx as jsx75, jsxs as jsxs36 } from "react/jsx-runtime";
-var useStyles5 = () => {
+import clsx21 from "clsx";
+import { useMemo as useMemo16, useState as useState17 } from "react";
+import { jsx as jsx76, jsxs as jsxs37 } from "react/jsx-runtime";
+var useStyles6 = () => {
   const { theme, colorScheme } = useTheme_default();
-  return useMemo15(
+  return useMemo16(
     () => ({
       trigger: {
         display: "inline-flex",
@@ -7731,9 +8111,9 @@ var BaseUserDropdown = ({
   onSignOut,
   attributeMapping = {}
 }) => {
-  const styles = useStyles5();
-  const [isOpen, setIsOpen] = useState16(false);
-  const [hoveredItemIndex, setHoveredItemIndex] = useState16(null);
+  const styles = useStyles6();
+  const [isOpen, setIsOpen] = useState17(false);
+  const [hoveredItemIndex, setHoveredItemIndex] = useState17(null);
   const { theme, colorScheme } = useTheme_default();
   const hoverBackgroundColor = colorScheme === "dark" ? "rgba(255, 255, 255, 0.08)" : "rgba(0, 0, 0, 0.04)";
   const { refs, floatingStyles, context } = useFloating2({
@@ -7777,14 +8157,14 @@ var BaseUserDropdown = ({
     defaultMenuItems.push({
       label: "Manage Profile",
       onClick: onManageProfile,
-      icon: /* @__PURE__ */ jsx75(User_default2, { width: "16", height: "16" })
+      icon: /* @__PURE__ */ jsx76(User_default2, { width: "16", height: "16" })
     });
   }
   if (onSignOut) {
     defaultMenuItems.push({
       label: "Sign Out",
       onClick: onSignOut,
-      icon: /* @__PURE__ */ jsx75(LogOut_default, { width: "16", height: "16" })
+      icon: /* @__PURE__ */ jsx76(LogOut_default, { width: "16", height: "16" })
     });
   }
   const allMenuItems = [...menuItems];
@@ -7794,19 +8174,19 @@ var BaseUserDropdown = ({
     }
     allMenuItems.push(...defaultMenuItems);
   }
-  return /* @__PURE__ */ jsxs36("div", { className: clsx20(withVendorCSSClassPrefix19("user-dropdown"), className), children: [
-    /* @__PURE__ */ jsxs36(
+  return /* @__PURE__ */ jsxs37("div", { className: clsx21(withVendorCSSClassPrefix20("user-dropdown"), className), children: [
+    /* @__PURE__ */ jsxs37(
       Button_default,
       {
         ref: refs.setReference,
-        className: withVendorCSSClassPrefix19("user-dropdown__trigger"),
+        className: withVendorCSSClassPrefix20("user-dropdown__trigger"),
         style: styles.trigger,
         color: "tertiary",
         variant: "text",
         size: "medium",
         ...getReferenceProps(),
         children: [
-          /* @__PURE__ */ jsx75(
+          /* @__PURE__ */ jsx76(
             Avatar,
             {
               imageUrl: getMappedUserProfileValue_default("picture", mergedMappings, user),
@@ -7815,11 +8195,11 @@ var BaseUserDropdown = ({
               alt: `${getDisplayName()}'s avatar`
             }
           ),
-          showTriggerLabel && /* @__PURE__ */ jsx75(
+          showTriggerLabel && /* @__PURE__ */ jsx76(
             Typography_default,
             {
               variant: "body2",
-              className: withVendorCSSClassPrefix19("user-dropdown__trigger-label"),
+              className: withVendorCSSClassPrefix20("user-dropdown__trigger-label"),
               style: styles.userName,
               children: getDisplayName()
             }
@@ -7827,16 +8207,16 @@ var BaseUserDropdown = ({
         ]
       }
     ),
-    isOpen && /* @__PURE__ */ jsx75(FloatingPortal2, { id: portalId, children: /* @__PURE__ */ jsx75(FloatingFocusManager2, { context, modal: false, children: /* @__PURE__ */ jsxs36(
+    isOpen && /* @__PURE__ */ jsx76(FloatingPortal2, { id: portalId, children: /* @__PURE__ */ jsx76(FloatingFocusManager2, { context, modal: false, children: /* @__PURE__ */ jsxs37(
       "div",
       {
         ref: refs.setFloating,
-        className: withVendorCSSClassPrefix19("user-dropdown__content"),
+        className: withVendorCSSClassPrefix20("user-dropdown__content"),
         style: { ...floatingStyles, ...styles.dropdownContent },
         ...getFloatingProps(),
         children: [
-          /* @__PURE__ */ jsxs36("div", { className: withVendorCSSClassPrefix19("user-dropdown__header"), style: styles.dropdownHeader, children: [
-            /* @__PURE__ */ jsx75(
+          /* @__PURE__ */ jsxs37("div", { className: withVendorCSSClassPrefix20("user-dropdown__header"), style: styles.dropdownHeader, children: [
+            /* @__PURE__ */ jsx76(
               Avatar,
               {
                 imageUrl: getMappedUserProfileValue_default("picture", mergedMappings, user),
@@ -7845,22 +8225,22 @@ var BaseUserDropdown = ({
                 alt: `${getDisplayName()}'s avatar`
               }
             ),
-            /* @__PURE__ */ jsxs36("div", { className: withVendorCSSClassPrefix19("user-dropdown__header-info"), style: styles.headerInfo, children: [
-              /* @__PURE__ */ jsx75(
+            /* @__PURE__ */ jsxs37("div", { className: withVendorCSSClassPrefix20("user-dropdown__header-info"), style: styles.headerInfo, children: [
+              /* @__PURE__ */ jsx76(
                 Typography_default,
                 {
                   noWrap: true,
-                  className: withVendorCSSClassPrefix19("user-dropdown__header-name"),
+                  className: withVendorCSSClassPrefix20("user-dropdown__header-name"),
                   variant: "body1",
                   fontWeight: "medium",
                   children: getDisplayName()
                 }
               ),
-              /* @__PURE__ */ jsx75(
+              /* @__PURE__ */ jsx76(
                 Typography_default,
                 {
                   noWrap: true,
-                  className: withVendorCSSClassPrefix19("user-dropdown__header-email"),
+                  className: withVendorCSSClassPrefix20("user-dropdown__header-email"),
                   variant: "caption",
                   color: "secondary",
                   children: getMappedUserProfileValue_default("username", mergedMappings, user) || getMappedUserProfileValue_default("email", mergedMappings, user)
@@ -7868,10 +8248,10 @@ var BaseUserDropdown = ({
               )
             ] })
           ] }),
-          /* @__PURE__ */ jsx75("div", { className: withVendorCSSClassPrefix19("user-dropdown__menu"), style: styles.dropdownMenu, children: allMenuItems.map((item, index) => /* @__PURE__ */ jsx75("div", { children: item.label === "" ? (
+          /* @__PURE__ */ jsx76("div", { className: withVendorCSSClassPrefix20("user-dropdown__menu"), style: styles.dropdownMenu, children: allMenuItems.map((item, index) => /* @__PURE__ */ jsx76("div", { children: item.label === "" ? (
             // Render divider for empty label placeholder
-            /* @__PURE__ */ jsx75("div", { className: withVendorCSSClassPrefix19("user-dropdown__menu-divider"), style: styles.divider })
-          ) : item.href ? /* @__PURE__ */ jsxs36(
+            /* @__PURE__ */ jsx76("div", { className: withVendorCSSClassPrefix20("user-dropdown__menu-divider"), style: styles.divider })
+          ) : item.href ? /* @__PURE__ */ jsxs37(
             "a",
             {
               href: item.href,
@@ -7879,17 +8259,17 @@ var BaseUserDropdown = ({
                 ...styles.menuItemAnchor,
                 backgroundColor: hoveredItemIndex === index ? hoverBackgroundColor : "transparent"
               },
-              className: withVendorCSSClassPrefix19("user-dropdown__menu-item"),
+              className: withVendorCSSClassPrefix20("user-dropdown__menu-item"),
               onMouseEnter: () => setHoveredItemIndex(index),
               onMouseLeave: () => setHoveredItemIndex(null),
               onFocus: () => setHoveredItemIndex(index),
               onBlur: () => setHoveredItemIndex(null),
               children: [
                 item.icon,
-                /* @__PURE__ */ jsx75("span", { children: item.label })
+                /* @__PURE__ */ jsx76("span", { children: item.label })
               ]
             }
-          ) : /* @__PURE__ */ jsx75(
+          ) : /* @__PURE__ */ jsx76(
             Button_default,
             {
               onClick: () => handleMenuItemClick(item),
@@ -7897,7 +8277,7 @@ var BaseUserDropdown = ({
                 ...styles.menuItem,
                 backgroundColor: hoveredItemIndex === index ? hoverBackgroundColor : "transparent"
               },
-              className: withVendorCSSClassPrefix19("user-dropdown__menu-item"),
+              className: withVendorCSSClassPrefix20("user-dropdown__menu-item"),
               color: "tertiary",
               variant: "text",
               size: "small",
@@ -7915,8 +8295,8 @@ var BaseUserDropdown = ({
 var BaseUserDropdown_default = BaseUserDropdown;
 
 // src/components/presentation/UserDropdown/UserDropdown.tsx
-import { useState as useState17 } from "react";
-import { Fragment as Fragment17, jsx as jsx76, jsxs as jsxs37 } from "react/jsx-runtime";
+import { useState as useState18 } from "react";
+import { Fragment as Fragment17, jsx as jsx77, jsxs as jsxs38 } from "react/jsx-runtime";
 var UserDropdown = ({
   children,
   renderTrigger,
@@ -7925,7 +8305,7 @@ var UserDropdown = ({
   ...rest
 }) => {
   const { user, isLoading, signOut } = useAsgardeo_default();
-  const [isProfileOpen, setIsProfileOpen] = useState17(false);
+  const [isProfileOpen, setIsProfileOpen] = useState18(false);
   const handleManageProfile = () => {
     setIsProfileOpen(true);
   };
@@ -7945,14 +8325,14 @@ var UserDropdown = ({
     closeProfile
   };
   if (children) {
-    return /* @__PURE__ */ jsxs37(Fragment17, { children: [
+    return /* @__PURE__ */ jsxs38(Fragment17, { children: [
       children(renderProps),
-      /* @__PURE__ */ jsx76(UserProfile_default, { mode: "popup", open: isProfileOpen, onOpenChange: setIsProfileOpen })
+      /* @__PURE__ */ jsx77(UserProfile_default, { mode: "popup", open: isProfileOpen, onOpenChange: setIsProfileOpen })
     ] });
   }
   if (renderTrigger || renderDropdown) {
-    return /* @__PURE__ */ jsxs37(Fragment17, { children: [
-      renderTrigger ? renderTrigger(renderProps) : /* @__PURE__ */ jsx76(
+    return /* @__PURE__ */ jsxs38(Fragment17, { children: [
+      renderTrigger ? renderTrigger(renderProps) : /* @__PURE__ */ jsx77(
         BaseUserDropdown_default,
         {
           user,
@@ -7962,11 +8342,11 @@ var UserDropdown = ({
           ...rest
         }
       ),
-      /* @__PURE__ */ jsx76(UserProfile_default, { mode: "popup", open: isProfileOpen, onOpenChange: setIsProfileOpen })
+      /* @__PURE__ */ jsx77(UserProfile_default, { mode: "popup", open: isProfileOpen, onOpenChange: setIsProfileOpen })
     ] });
   }
-  return /* @__PURE__ */ jsxs37(Fragment17, { children: [
-    /* @__PURE__ */ jsx76(
+  return /* @__PURE__ */ jsxs38(Fragment17, { children: [
+    /* @__PURE__ */ jsx77(
       BaseUserDropdown_default,
       {
         user,
@@ -7976,13 +8356,13 @@ var UserDropdown = ({
         ...rest
       }
     ),
-    isProfileOpen && /* @__PURE__ */ jsx76(UserProfile_default, { mode: "popup", open: isProfileOpen, onOpenChange: setIsProfileOpen })
+    isProfileOpen && /* @__PURE__ */ jsx77(UserProfile_default, { mode: "popup", open: isProfileOpen, onOpenChange: setIsProfileOpen })
   ] });
 };
 var UserDropdown_default = UserDropdown;
 
 // src/components/presentation/OrganizationSwitcher/BaseOrganizationSwitcher.tsx
-import { withVendorCSSClassPrefix as withVendorCSSClassPrefix20 } from "@asgardeo/browser";
+import { withVendorCSSClassPrefix as withVendorCSSClassPrefix21 } from "@asgardeo/browser";
 import {
   useFloating as useFloating3,
   autoUpdate as autoUpdate3,
@@ -7996,13 +8376,13 @@ import {
   FloatingFocusManager as FloatingFocusManager3,
   FloatingPortal as FloatingPortal3
 } from "@floating-ui/react";
-import clsx21 from "clsx";
-import { useMemo as useMemo16, useState as useState18 } from "react";
+import clsx22 from "clsx";
+import { useMemo as useMemo17, useState as useState19 } from "react";
 
 // src/components/primitives/Icons/Building.tsx
-import { jsx as jsx77, jsxs as jsxs38 } from "react/jsx-runtime";
-var Building = ({ color = "currentColor", height = 24, width = 24 }) => /* @__PURE__ */ jsxs38("svg", { width, height, viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [
-  /* @__PURE__ */ jsx77(
+import { jsx as jsx78, jsxs as jsxs39 } from "react/jsx-runtime";
+var Building = ({ color = "currentColor", height = 24, width = 24 }) => /* @__PURE__ */ jsxs39("svg", { width, height, viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [
+  /* @__PURE__ */ jsx78(
     "path",
     {
       d: "M6 22V4a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2v18Z",
@@ -8012,33 +8392,33 @@ var Building = ({ color = "currentColor", height = 24, width = 24 }) => /* @__PU
       strokeLinejoin: "round"
     }
   ),
-  /* @__PURE__ */ jsx77("path", { d: "M6 12h4", stroke: color, strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }),
-  /* @__PURE__ */ jsx77("path", { d: "M6 8h4", stroke: color, strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }),
-  /* @__PURE__ */ jsx77("path", { d: "M14 8h4", stroke: color, strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }),
-  /* @__PURE__ */ jsx77("path", { d: "M14 12h4", stroke: color, strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }),
-  /* @__PURE__ */ jsx77("path", { d: "M6 18h4", stroke: color, strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }),
-  /* @__PURE__ */ jsx77("path", { d: "M14 18h4", stroke: color, strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" })
+  /* @__PURE__ */ jsx78("path", { d: "M6 12h4", stroke: color, strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }),
+  /* @__PURE__ */ jsx78("path", { d: "M6 8h4", stroke: color, strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }),
+  /* @__PURE__ */ jsx78("path", { d: "M14 8h4", stroke: color, strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }),
+  /* @__PURE__ */ jsx78("path", { d: "M14 12h4", stroke: color, strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }),
+  /* @__PURE__ */ jsx78("path", { d: "M6 18h4", stroke: color, strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }),
+  /* @__PURE__ */ jsx78("path", { d: "M14 18h4", stroke: color, strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" })
 ] });
 Building.displayName = "Building";
 var Building_default = Building;
 
 // src/components/primitives/Icons/Check.tsx
-import { jsx as jsx78 } from "react/jsx-runtime";
-var Check = ({ color = "currentColor", height = 24, width = 24 }) => /* @__PURE__ */ jsx78("svg", { width, height, viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsx78("path", { d: "M20 6 9 17l-5-5", stroke: color, strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) });
+import { jsx as jsx79 } from "react/jsx-runtime";
+var Check = ({ color = "currentColor", height = 24, width = 24 }) => /* @__PURE__ */ jsx79("svg", { width, height, viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsx79("path", { d: "M20 6 9 17l-5-5", stroke: color, strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) });
 Check.displayName = "Check";
 var Check_default = Check;
 
 // src/components/primitives/Icons/ChevronDown.tsx
-import { jsx as jsx79 } from "react/jsx-runtime";
-var ChevronDown = ({ color = "currentColor", height = 24, width = 24 }) => /* @__PURE__ */ jsx79("svg", { width, height, viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsx79("path", { d: "m6 9 6 6 6-6", stroke: color, strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) });
+import { jsx as jsx80 } from "react/jsx-runtime";
+var ChevronDown = ({ color = "currentColor", height = 24, width = 24 }) => /* @__PURE__ */ jsx80("svg", { width, height, viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsx80("path", { d: "m6 9 6 6 6-6", stroke: color, strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) });
 ChevronDown.displayName = "ChevronDown";
 var ChevronDown_default = ChevronDown;
 
 // src/components/presentation/OrganizationSwitcher/BaseOrganizationSwitcher.tsx
-import { Fragment as Fragment18, jsx as jsx80, jsxs as jsxs39 } from "react/jsx-runtime";
-var useStyles6 = () => {
+import { Fragment as Fragment18, jsx as jsx81, jsxs as jsxs40 } from "react/jsx-runtime";
+var useStyles7 = () => {
   const { theme, colorScheme } = useTheme_default();
-  return useMemo16(
+  return useMemo17(
     () => ({
       trigger: {
         display: "inline-flex",
@@ -8194,9 +8574,9 @@ var BaseOrganizationSwitcher = ({
   avatarSize = 24,
   fallback = null
 }) => {
-  const styles = useStyles6();
-  const [isOpen, setIsOpen] = useState18(false);
-  const [hoveredItemIndex, setHoveredItemIndex] = useState18(null);
+  const styles = useStyles7();
+  const [isOpen, setIsOpen] = useState19(false);
+  const [hoveredItemIndex, setHoveredItemIndex] = useState19(null);
   const { theme, colorScheme } = useTheme_default();
   const { t } = useTranslation_default();
   const hoverBackgroundColor = colorScheme === "dark" ? "rgba(255, 255, 255, 0.08)" : "rgba(0, 0, 0, 0.04)";
@@ -8227,8 +8607,8 @@ var BaseOrganizationSwitcher = ({
   const switchableOrganizations = organizations.filter(
     (org) => org.id !== currentOrganization?.id
   );
-  const defaultRenderOrganization2 = (organization, isSelected) => /* @__PURE__ */ jsxs39(Fragment18, { children: [
-    /* @__PURE__ */ jsx80(
+  const defaultRenderOrganization2 = (organization, isSelected) => /* @__PURE__ */ jsxs40(Fragment18, { children: [
+    /* @__PURE__ */ jsx81(
       Avatar,
       {
         variant: "square",
@@ -8238,36 +8618,36 @@ var BaseOrganizationSwitcher = ({
         alt: `${organization.name} avatar`
       }
     ),
-    /* @__PURE__ */ jsxs39("div", { style: styles.organizationInfo, children: [
-      /* @__PURE__ */ jsx80(Typography_default, { variant: "body2", fontWeight: "medium", style: styles.organizationName, children: organization.name }),
-      /* @__PURE__ */ jsxs39("div", { style: styles.organizationMeta, children: [
-        showMemberCount && organization.memberCount !== void 0 && /* @__PURE__ */ jsxs39("span", { children: [
+    /* @__PURE__ */ jsxs40("div", { style: styles.organizationInfo, children: [
+      /* @__PURE__ */ jsx81(Typography_default, { variant: "body2", fontWeight: "medium", style: styles.organizationName, children: organization.name }),
+      /* @__PURE__ */ jsxs40("div", { style: styles.organizationMeta, children: [
+        showMemberCount && organization.memberCount !== void 0 && /* @__PURE__ */ jsxs40("span", { children: [
           organization.memberCount,
           " ",
           organization.memberCount === 1 ? t("organization.switcher.member") : t("organization.switcher.members")
         ] }),
-        showRole && organization.role && showMemberCount && organization.memberCount !== void 0 && /* @__PURE__ */ jsx80("span", { children: " \u2022 " }),
-        showRole && organization.role && /* @__PURE__ */ jsx80("span", { style: styles.roleCapitalized, children: organization.role })
+        showRole && organization.role && showMemberCount && organization.memberCount !== void 0 && /* @__PURE__ */ jsx81("span", { children: " \u2022 " }),
+        showRole && organization.role && /* @__PURE__ */ jsx81("span", { style: styles.roleCapitalized, children: organization.role })
       ] })
     ] }),
-    isSelected && /* @__PURE__ */ jsx80(Check_default, { width: "16", height: "16", color: theme.colors.text.primary })
+    isSelected && /* @__PURE__ */ jsx81(Check_default, { width: "16", height: "16", color: theme.colors.text.primary })
   ] });
-  const defaultRenderLoading2 = () => /* @__PURE__ */ jsx80("div", { style: styles.loadingContainer, children: /* @__PURE__ */ jsx80(Typography_default, { variant: "caption", style: styles.loadingText, children: t("organization.switcher.loading.organizations") }) });
-  const defaultRenderError2 = (errorMessage) => /* @__PURE__ */ jsx80("div", { style: styles.errorContainer, children: /* @__PURE__ */ jsx80(Typography_default, { variant: "caption", style: styles.errorText, children: errorMessage }) });
-  return /* @__PURE__ */ jsxs39("div", { className: clsx21(withVendorCSSClassPrefix20("organization-switcher"), className), style, children: [
-    /* @__PURE__ */ jsxs39(
+  const defaultRenderLoading2 = () => /* @__PURE__ */ jsx81("div", { style: styles.loadingContainer, children: /* @__PURE__ */ jsx81(Typography_default, { variant: "caption", style: styles.loadingText, children: t("organization.switcher.loading.organizations") }) });
+  const defaultRenderError2 = (errorMessage) => /* @__PURE__ */ jsx81("div", { style: styles.errorContainer, children: /* @__PURE__ */ jsx81(Typography_default, { variant: "caption", style: styles.errorText, children: errorMessage }) });
+  return /* @__PURE__ */ jsxs40("div", { className: clsx22(withVendorCSSClassPrefix21("organization-switcher"), className), style, children: [
+    /* @__PURE__ */ jsxs40(
       Button_default,
       {
         ref: refs.setReference,
-        className: withVendorCSSClassPrefix20("organization-switcher__trigger"),
+        className: withVendorCSSClassPrefix21("organization-switcher__trigger"),
         style: styles.trigger,
         color: "tertiary",
         variant: "outline",
         size: "medium",
         ...getReferenceProps(),
         children: [
-          currentOrganization ? /* @__PURE__ */ jsxs39(Fragment18, { children: [
-            /* @__PURE__ */ jsx80(
+          currentOrganization ? /* @__PURE__ */ jsxs40(Fragment18, { children: [
+            /* @__PURE__ */ jsx81(
               Avatar,
               {
                 variant: "square",
@@ -8277,46 +8657,46 @@ var BaseOrganizationSwitcher = ({
                 alt: `${currentOrganization.name} avatar`
               }
             ),
-            showTriggerLabel && /* @__PURE__ */ jsx80(
+            showTriggerLabel && /* @__PURE__ */ jsx81(
               Typography_default,
               {
                 variant: "body2",
-                className: withVendorCSSClassPrefix20("organization-switcher__trigger-label"),
+                className: withVendorCSSClassPrefix21("organization-switcher__trigger-label"),
                 style: styles.orgName,
                 children: currentOrganization.name
               }
             )
-          ] }) : /* @__PURE__ */ jsxs39(Fragment18, { children: [
-            /* @__PURE__ */ jsx80(Building_default, { width: avatarSize, height: avatarSize }),
-            showTriggerLabel && /* @__PURE__ */ jsx80(
+          ] }) : /* @__PURE__ */ jsxs40(Fragment18, { children: [
+            /* @__PURE__ */ jsx81(Building_default, { width: avatarSize, height: avatarSize }),
+            showTriggerLabel && /* @__PURE__ */ jsx81(
               Typography_default,
               {
                 variant: "body2",
-                className: withVendorCSSClassPrefix20("organization-switcher__trigger-label"),
+                className: withVendorCSSClassPrefix21("organization-switcher__trigger-label"),
                 style: styles.orgName,
                 children: t("organization.switcher.select.organization")
               }
             )
           ] }),
-          /* @__PURE__ */ jsx80(ChevronDown_default, { width: "16", height: "16" })
+          /* @__PURE__ */ jsx81(ChevronDown_default, { width: "16", height: "16" })
         ]
       }
     ),
-    isOpen && /* @__PURE__ */ jsx80(FloatingPortal3, { id: portalId, children: /* @__PURE__ */ jsx80(FloatingFocusManager3, { context, modal: false, children: /* @__PURE__ */ jsxs39(
+    isOpen && /* @__PURE__ */ jsx81(FloatingPortal3, { id: portalId, children: /* @__PURE__ */ jsx81(FloatingFocusManager3, { context, modal: false, children: /* @__PURE__ */ jsxs40(
       "div",
       {
         ref: refs.setFloating,
-        className: withVendorCSSClassPrefix20("organization-switcher__content"),
+        className: withVendorCSSClassPrefix21("organization-switcher__content"),
         style: { ...floatingStyles, ...styles.dropdownContent },
         ...getFloatingProps(),
         children: [
-          currentOrganization && /* @__PURE__ */ jsxs39(
+          currentOrganization && /* @__PURE__ */ jsxs40(
             "div",
             {
-              className: withVendorCSSClassPrefix20("organization-switcher__header"),
+              className: withVendorCSSClassPrefix21("organization-switcher__header"),
               style: styles.dropdownHeader,
               children: [
-                /* @__PURE__ */ jsx80(
+                /* @__PURE__ */ jsx81(
                   Avatar,
                   {
                     variant: "square",
@@ -8326,47 +8706,47 @@ var BaseOrganizationSwitcher = ({
                     alt: `${currentOrganization.name} avatar`
                   }
                 ),
-                /* @__PURE__ */ jsxs39(
+                /* @__PURE__ */ jsxs40(
                   "div",
                   {
-                    className: withVendorCSSClassPrefix20("organization-switcher__header-info"),
+                    className: withVendorCSSClassPrefix21("organization-switcher__header-info"),
                     style: styles.organizationInfo,
                     children: [
-                      /* @__PURE__ */ jsx80(
+                      /* @__PURE__ */ jsx81(
                         Typography_default,
                         {
                           noWrap: true,
-                          className: withVendorCSSClassPrefix20("organization-switcher__header-name"),
+                          className: withVendorCSSClassPrefix21("organization-switcher__header-name"),
                           variant: "body1",
                           fontWeight: "medium",
                           style: styles.organizationName,
                           children: currentOrganization.name
                         }
                       ),
-                      /* @__PURE__ */ jsxs39("div", { style: styles.organizationMeta, children: [
-                        showMemberCount && currentOrganization.memberCount !== void 0 && /* @__PURE__ */ jsxs39(
+                      /* @__PURE__ */ jsxs40("div", { style: styles.organizationMeta, children: [
+                        showMemberCount && currentOrganization.memberCount !== void 0 && /* @__PURE__ */ jsxs40(
                           Typography_default,
                           {
                             noWrap: true,
-                            className: withVendorCSSClassPrefix20("organization-switcher__header-meta"),
+                            className: withVendorCSSClassPrefix21("organization-switcher__header-meta"),
                             variant: "caption",
                             color: "secondary",
                             children: [
                               currentOrganization.memberCount,
                               " ",
                               currentOrganization.memberCount === 1 ? t("organization.switcher.member") : t("organization.switcher.members"),
-                              showRole && currentOrganization.role && /* @__PURE__ */ jsxs39("span", { children: [
+                              showRole && currentOrganization.role && /* @__PURE__ */ jsxs40("span", { children: [
                                 " \u2022 ",
                                 currentOrganization.role
                               ] })
                             ]
                           }
                         ),
-                        showRole && currentOrganization.role && (!showMemberCount || currentOrganization.memberCount === void 0) && /* @__PURE__ */ jsx80(
+                        showRole && currentOrganization.role && (!showMemberCount || currentOrganization.memberCount === void 0) && /* @__PURE__ */ jsx81(
                           Typography_default,
                           {
                             noWrap: true,
-                            className: withVendorCSSClassPrefix20("organization-switcher__header-role"),
+                            className: withVendorCSSClassPrefix21("organization-switcher__header-role"),
                             variant: "caption",
                             color: "secondary",
                             style: styles.roleCapitalized,
@@ -8377,7 +8757,7 @@ var BaseOrganizationSwitcher = ({
                     ]
                   }
                 ),
-                onManageProfile && /* @__PURE__ */ jsx80(
+                onManageProfile && /* @__PURE__ */ jsx81(
                   Button_default,
                   {
                     onClick: onManageProfile,
@@ -8386,7 +8766,7 @@ var BaseOrganizationSwitcher = ({
                     size: "small",
                     "aria-label": "Manage Organization Profile",
                     style: styles.manageButton,
-                    endIcon: /* @__PURE__ */ jsxs39(
+                    endIcon: /* @__PURE__ */ jsxs40(
                       "svg",
                       {
                         width: "16",
@@ -8398,8 +8778,8 @@ var BaseOrganizationSwitcher = ({
                         strokeLinecap: "round",
                         strokeLinejoin: "round",
                         children: [
-                          /* @__PURE__ */ jsx80("circle", { cx: "12", cy: "12", r: "3" }),
-                          /* @__PURE__ */ jsx80("path", { d: "M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1 1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z" })
+                          /* @__PURE__ */ jsx81("circle", { cx: "12", cy: "12", r: "3" }),
+                          /* @__PURE__ */ jsx81("path", { d: "M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1 1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z" })
                         ]
                       }
                     ),
@@ -8409,7 +8789,7 @@ var BaseOrganizationSwitcher = ({
               ]
             }
           ),
-          organizations.length > 1 && /* @__PURE__ */ jsx80(
+          organizations.length > 1 && /* @__PURE__ */ jsx81(
             "div",
             {
               style: {
@@ -8417,17 +8797,17 @@ var BaseOrganizationSwitcher = ({
                 ...styles.sectionHeaderContainer,
                 borderTop: currentOrganization ? `1px solid ${theme.colors.border}` : "none"
               },
-              children: /* @__PURE__ */ jsx80(Typography_default, { variant: "caption", fontWeight: 600, style: styles.sectionHeader, children: t("organization.switcher.switch.organization") })
+              children: /* @__PURE__ */ jsx81(Typography_default, { variant: "caption", fontWeight: 600, style: styles.sectionHeader, children: t("organization.switcher.switch.organization") })
             }
           ),
-          /* @__PURE__ */ jsx80("div", { className: withVendorCSSClassPrefix20("organization-switcher__menu"), style: styles.dropdownMenu, children: loading ? renderLoading ? renderLoading() : defaultRenderLoading2() : error ? renderError ? renderError(error) : defaultRenderError2(error) : /* @__PURE__ */ jsxs39(Fragment18, { children: [
+          /* @__PURE__ */ jsx81("div", { className: withVendorCSSClassPrefix21("organization-switcher__menu"), style: styles.dropdownMenu, children: loading ? renderLoading ? renderLoading() : defaultRenderLoading2() : error ? renderError ? renderError(error) : defaultRenderError2(error) : /* @__PURE__ */ jsxs40(Fragment18, { children: [
             switchableOrganizations.map((organization) => {
               const isSelected = false;
-              return /* @__PURE__ */ jsx80(
+              return /* @__PURE__ */ jsx81(
                 Button_default,
                 {
                   onClick: () => handleOrganizationSwitch(organization),
-                  className: withVendorCSSClassPrefix20("organization-switcher__menu-item"),
+                  className: withVendorCSSClassPrefix21("organization-switcher__menu-item"),
                   color: "tertiary",
                   variant: "text",
                   size: "small",
@@ -8442,16 +8822,16 @@ var BaseOrganizationSwitcher = ({
                 organization.id
               );
             }),
-            menuItems.length > 0 && /* @__PURE__ */ jsxs39(Fragment18, { children: [
-              /* @__PURE__ */ jsx80(
+            menuItems.length > 0 && /* @__PURE__ */ jsxs40(Fragment18, { children: [
+              /* @__PURE__ */ jsx81(
                 "div",
                 {
-                  className: withVendorCSSClassPrefix20("organization-switcher__menu-divider"),
+                  className: withVendorCSSClassPrefix21("organization-switcher__menu-divider"),
                   style: styles.divider
                 }
               ),
               menuItems.map(
-                (item, index) => /* @__PURE__ */ jsx80("div", { children: item.href ? /* @__PURE__ */ jsxs39(
+                (item, index) => /* @__PURE__ */ jsx81("div", { children: item.href ? /* @__PURE__ */ jsxs40(
                   "a",
                   {
                     href: item.href,
@@ -8459,17 +8839,17 @@ var BaseOrganizationSwitcher = ({
                       ...styles.menuItem,
                       backgroundColor: hoveredItemIndex === switchableOrganizations.length + index ? hoverBackgroundColor : "transparent"
                     },
-                    className: withVendorCSSClassPrefix20("organization-switcher__menu-item"),
+                    className: withVendorCSSClassPrefix21("organization-switcher__menu-item"),
                     onMouseEnter: () => setHoveredItemIndex(switchableOrganizations.length + index),
                     onMouseLeave: () => setHoveredItemIndex(null),
                     onFocus: () => setHoveredItemIndex(switchableOrganizations.length + index),
                     onBlur: () => setHoveredItemIndex(null),
                     children: [
                       item.icon,
-                      /* @__PURE__ */ jsx80("span", { children: item.label })
+                      /* @__PURE__ */ jsx81("span", { children: item.label })
                     ]
                   }
-                ) : /* @__PURE__ */ jsx80(
+                ) : /* @__PURE__ */ jsx81(
                   Button_default,
                   {
                     onClick: () => handleMenuItemClick(item),
@@ -8477,7 +8857,7 @@ var BaseOrganizationSwitcher = ({
                       ...styles.menuItem,
                       backgroundColor: hoveredItemIndex === switchableOrganizations.length + index ? hoverBackgroundColor : "transparent"
                     },
-                    className: withVendorCSSClassPrefix20("organization-switcher__menu-item"),
+                    className: withVendorCSSClassPrefix21("organization-switcher__menu-item"),
                     color: "tertiary",
                     variant: "text",
                     size: "small",
@@ -8498,19 +8878,19 @@ var BaseOrganizationSwitcher = ({
 var BaseOrganizationSwitcher_default = BaseOrganizationSwitcher;
 
 // src/components/presentation/OrganizationSwitcher/OrganizationSwitcher.tsx
-import { useState as useState24 } from "react";
+import { useState as useState25 } from "react";
 
 // src/components/presentation/CreateOrganization/CreateOrganization.tsx
-import { useState as useState20 } from "react";
+import { useState as useState21 } from "react";
 
 // src/components/presentation/CreateOrganization/BaseCreateOrganization.tsx
-import { withVendorCSSClassPrefix as withVendorCSSClassPrefix21 } from "@asgardeo/browser";
-import clsx22 from "clsx";
-import { useMemo as useMemo17, useState as useState19 } from "react";
-import { jsx as jsx81, jsxs as jsxs40 } from "react/jsx-runtime";
-var useStyles7 = () => {
+import { withVendorCSSClassPrefix as withVendorCSSClassPrefix22 } from "@asgardeo/browser";
+import clsx23 from "clsx";
+import { useMemo as useMemo18, useState as useState20 } from "react";
+import { jsx as jsx82, jsxs as jsxs41 } from "react/jsx-runtime";
+var useStyles8 = () => {
   const { theme, colorScheme } = useTheme_default();
-  return useMemo17(
+  return useMemo18(
     () => ({
       root: {
         padding: `${theme.spacing.unit * 4}px`,
@@ -8619,16 +8999,16 @@ var BaseCreateOrganization = ({
   style,
   title = "Create Organization"
 }) => {
-  const styles = useStyles7();
+  const styles = useStyles8();
   const { theme } = useTheme_default();
   const { t } = useTranslation_default();
-  const [formData, setFormData] = useState19({
+  const [formData, setFormData] = useState20({
     description: "",
     handle: "",
     name: "",
     ...initialValues
   });
-  const [formErrors, setFormErrors] = useState19({});
+  const [formErrors, setFormErrors] = useState20({});
   const validateForm = () => {
     const errors = {};
     if (!formData.name.trim()) {
@@ -8692,21 +9072,21 @@ var BaseCreateOrganization = ({
     ...styles.root,
     ...cardLayout ? styles.card : {}
   };
-  const createOrganizationContent = /* @__PURE__ */ jsx81(
+  const createOrganizationContent = /* @__PURE__ */ jsx82(
     "div",
     {
-      className: clsx22(withVendorCSSClassPrefix21("create-organization"), className),
+      className: clsx23(withVendorCSSClassPrefix22("create-organization"), className),
       style: { ...containerStyle, ...style },
-      children: /* @__PURE__ */ jsxs40("div", { className: withVendorCSSClassPrefix21("create-organization__content"), style: styles.content, children: [
-        /* @__PURE__ */ jsxs40(
+      children: /* @__PURE__ */ jsxs41("div", { className: withVendorCSSClassPrefix22("create-organization__content"), style: styles.content, children: [
+        /* @__PURE__ */ jsxs41(
           "form",
           {
             id: "create-organization-form",
-            className: withVendorCSSClassPrefix21("create-organization__form"),
+            className: withVendorCSSClassPrefix22("create-organization__form"),
             style: styles.form,
             onSubmit: handleSubmit,
             children: [
-              /* @__PURE__ */ jsx81("div", { className: withVendorCSSClassPrefix21("create-organization__field-group"), children: /* @__PURE__ */ jsx81(
+              /* @__PURE__ */ jsx82("div", { className: withVendorCSSClassPrefix22("create-organization__field-group"), children: /* @__PURE__ */ jsx82(
                 TextField_default,
                 {
                   label: `${t("organization.create.name.label")}`,
@@ -8716,10 +9096,10 @@ var BaseCreateOrganization = ({
                   disabled: loading,
                   required: true,
                   error: formErrors.name,
-                  className: withVendorCSSClassPrefix21("create-organization__input")
+                  className: withVendorCSSClassPrefix22("create-organization__input")
                 }
               ) }),
-              /* @__PURE__ */ jsx81("div", { className: withVendorCSSClassPrefix21("create-organization__field-group"), children: /* @__PURE__ */ jsx81(
+              /* @__PURE__ */ jsx82("div", { className: withVendorCSSClassPrefix22("create-organization__field-group"), children: /* @__PURE__ */ jsx82(
                 TextField_default,
                 {
                   label: `${t("organization.create.handle.label") || "Organization Handle"}`,
@@ -8730,15 +9110,15 @@ var BaseCreateOrganization = ({
                   required: true,
                   error: formErrors.handle,
                   helperText: "This will be your organization's unique identifier. Only lowercase letters, numbers, and hyphens are allowed.",
-                  className: withVendorCSSClassPrefix21("create-organization__input")
+                  className: withVendorCSSClassPrefix22("create-organization__input")
                 }
               ) }),
-              /* @__PURE__ */ jsx81("div", { className: withVendorCSSClassPrefix21("create-organization__field-group"), children: /* @__PURE__ */ jsxs40(FormControl_default, { error: formErrors.description, children: [
-                /* @__PURE__ */ jsx81(InputLabel_default, { required: true, children: t("organization.create.description.label") }),
-                /* @__PURE__ */ jsx81(
+              /* @__PURE__ */ jsx82("div", { className: withVendorCSSClassPrefix22("create-organization__field-group"), children: /* @__PURE__ */ jsxs41(FormControl_default, { error: formErrors.description, children: [
+                /* @__PURE__ */ jsx82(InputLabel_default, { required: true, children: t("organization.create.description.label") }),
+                /* @__PURE__ */ jsx82(
                   "textarea",
                   {
-                    className: withVendorCSSClassPrefix21("create-organization__textarea"),
+                    className: withVendorCSSClassPrefix22("create-organization__textarea"),
                     style: {
                       ...styles.textarea,
                       borderColor: formErrors.description ? theme.colors.error.main : theme.colors.border
@@ -8752,21 +9132,21 @@ var BaseCreateOrganization = ({
                 )
               ] }) }),
               renderAdditionalFields && renderAdditionalFields(),
-              error && /* @__PURE__ */ jsx81(Typography_default, { variant: "body2", style: { color: theme.colors.error.main, fontSize: "0.875rem" }, children: error })
+              error && /* @__PURE__ */ jsx82(Typography_default, { variant: "body2", style: { color: theme.colors.error.main, fontSize: "0.875rem" }, children: error })
             ]
           }
         ),
-        /* @__PURE__ */ jsxs40("div", { className: withVendorCSSClassPrefix21("create-organization__actions"), style: styles.actions, children: [
-          onCancel && /* @__PURE__ */ jsx81(Button_default, { type: "button", variant: "outline", onClick: onCancel, disabled: loading, children: t("organization.create.cancel") }),
-          /* @__PURE__ */ jsx81(Button_default, { type: "submit", variant: "solid", color: "primary", disabled: loading, form: "create-organization-form", children: loading ? t("organization.create.creating") : t("organization.create.button") })
+        /* @__PURE__ */ jsxs41("div", { className: withVendorCSSClassPrefix22("create-organization__actions"), style: styles.actions, children: [
+          onCancel && /* @__PURE__ */ jsx82(Button_default, { type: "button", variant: "outline", onClick: onCancel, disabled: loading, children: t("organization.create.cancel") }),
+          /* @__PURE__ */ jsx82(Button_default, { type: "submit", variant: "solid", color: "primary", disabled: loading, form: "create-organization-form", children: loading ? t("organization.create.creating") : t("organization.create.button") })
         ] })
       ] })
     }
   );
   if (mode === "popup") {
-    return /* @__PURE__ */ jsx81(Dialog, { open, onOpenChange, children: /* @__PURE__ */ jsxs40(DialogContent, { children: [
-      /* @__PURE__ */ jsx81(DialogHeading, { children: title }),
-      /* @__PURE__ */ jsx81("div", { style: { padding: "1rem" }, children: createOrganizationContent })
+    return /* @__PURE__ */ jsx82(Dialog, { open, onOpenChange, children: /* @__PURE__ */ jsxs41(DialogContent, { children: [
+      /* @__PURE__ */ jsx82(DialogHeading, { children: title }),
+      /* @__PURE__ */ jsx82("div", { style: { padding: "1rem" }, children: createOrganizationContent })
     ] }) });
   }
   return createOrganizationContent;
@@ -8802,7 +9182,7 @@ var createOrganization = async ({ fetcher, ...requestConfig }) => {
 var createOrganization_default = createOrganization;
 
 // src/components/presentation/CreateOrganization/CreateOrganization.tsx
-import { Fragment as Fragment19, jsx as jsx82 } from "react/jsx-runtime";
+import { Fragment as Fragment19, jsx as jsx83 } from "react/jsx-runtime";
 var CreateOrganization = ({
   onCreateOrganization,
   fallback = null,
@@ -8812,13 +9192,13 @@ var CreateOrganization = ({
 }) => {
   const { isSignedIn, baseUrl } = useAsgardeo_default();
   const { currentOrganization, revalidateOrganizations } = useOrganization_default();
-  const [loading, setLoading] = useState20(false);
-  const [error, setError] = useState20(null);
+  const [loading, setLoading] = useState21(false);
+  const [error, setError] = useState21(null);
   if (!isSignedIn && fallback) {
     return fallback;
   }
   if (!isSignedIn) {
-    return /* @__PURE__ */ jsx82(Fragment19, {});
+    return /* @__PURE__ */ jsx83(Fragment19, {});
   }
   const parentId = defaultParentId || currentOrganization?.id || "";
   const handleSubmit = async (payload) => {
@@ -8852,7 +9232,7 @@ var CreateOrganization = ({
       setLoading(false);
     }
   };
-  return /* @__PURE__ */ jsx82(
+  return /* @__PURE__ */ jsx83(
     BaseCreateOrganization,
     {
       onSubmit: handleSubmit,
@@ -8866,18 +9246,18 @@ var CreateOrganization = ({
 };
 
 // src/components/presentation/OrganizationProfile/OrganizationProfile.tsx
-import { useEffect as useEffect14, useState as useState23 } from "react";
+import { useEffect as useEffect14, useState as useState24 } from "react";
 
 // src/components/presentation/OrganizationProfile/BaseOrganizationProfile.tsx
-import { withVendorCSSClassPrefix as withVendorCSSClassPrefix23 } from "@asgardeo/browser";
-import clsx24 from "clsx";
-import { useMemo as useMemo18, useState as useState22, useCallback as useCallback10, useRef as useRef7 } from "react";
+import { withVendorCSSClassPrefix as withVendorCSSClassPrefix24 } from "@asgardeo/browser";
+import clsx25 from "clsx";
+import { useMemo as useMemo19, useState as useState23, useCallback as useCallback12, useRef as useRef7 } from "react";
 
 // src/components/primitives/KeyValueInput/KeyValueInput.tsx
-import { withVendorCSSClassPrefix as withVendorCSSClassPrefix22 } from "@asgardeo/browser";
-import clsx23 from "clsx";
-import { useState as useState21, useCallback as useCallback9 } from "react";
-import { jsx as jsx83, jsxs as jsxs41 } from "react/jsx-runtime";
+import { withVendorCSSClassPrefix as withVendorCSSClassPrefix23 } from "@asgardeo/browser";
+import clsx24 from "clsx";
+import { useState as useState22, useCallback as useCallback11 } from "react";
+import { jsx as jsx84, jsxs as jsxs42 } from "react/jsx-runtime";
 var KeyValueInput = ({
   className = "",
   disabled = false,
@@ -8899,10 +9279,10 @@ var KeyValueInput = ({
 }) => {
   const { theme } = useTheme_default();
   const initialPairs = Array.isArray(value) ? value : Object.entries(value).map(([key, val]) => ({ key, value: String(val) }));
-  const [pairs, setPairs] = useState21(initialPairs);
-  const [newKey, setNewKey] = useState21("");
-  const [newValue, setNewValue] = useState21("");
-  const handleAddPair = useCallback9(() => {
+  const [pairs, setPairs] = useState22(initialPairs);
+  const [newKey, setNewKey] = useState22("");
+  const [newValue, setNewValue] = useState22("");
+  const handleAddPair = useCallback11(() => {
     if (!newKey.trim() || !newValue.trim()) return;
     if (maxPairs && pairs.length >= maxPairs) return;
     const newPair = {
@@ -8920,7 +9300,7 @@ var KeyValueInput = ({
       onAdd(newPair);
     }
   }, [newKey, newValue, pairs, maxPairs, onChange, onAdd]);
-  const handleRemovePair = useCallback9(
+  const handleRemovePair = useCallback11(
     (index) => {
       const pairToRemove = pairs[index];
       const updatedPairs = pairs.filter((_, i) => i !== index);
@@ -8934,7 +9314,7 @@ var KeyValueInput = ({
     },
     [pairs, onChange, onRemove]
   );
-  const handleUpdatePair = useCallback9(
+  const handleUpdatePair = useCallback11(
     (index, field, newVal) => {
       const updatedPairs = pairs.map((pair, i) => {
         if (i === index) {
@@ -9061,20 +9441,20 @@ var KeyValueInput = ({
       flex: 1
     }
   };
-  return /* @__PURE__ */ jsxs41("div", { className: clsx23(withVendorCSSClassPrefix22("key-value-input"), className), style: styles.container, children: [
-    label && /* @__PURE__ */ jsxs41("label", { style: styles.label, children: [
+  return /* @__PURE__ */ jsxs42("div", { className: clsx24(withVendorCSSClassPrefix23("key-value-input"), className), style: styles.container, children: [
+    label && /* @__PURE__ */ jsxs42("label", { style: styles.label, children: [
       label,
-      required && /* @__PURE__ */ jsx83("span", { style: { color: theme.colors.error.main }, children: " *" })
+      required && /* @__PURE__ */ jsx84("span", { style: { color: theme.colors.error.main }, children: " *" })
     ] }),
-    /* @__PURE__ */ jsxs41("div", { style: styles.pairsList, children: [
-      pairs.length === 0 && readOnly ? /* @__PURE__ */ jsx83("div", { style: styles.emptyState, children: "No attributes defined" }) : readOnly ? pairs.map((pair, index) => /* @__PURE__ */ jsxs41("div", { style: styles.readOnlyPair, children: [
-        /* @__PURE__ */ jsxs41("span", { style: styles.readOnlyKey, children: [
+    /* @__PURE__ */ jsxs42("div", { style: styles.pairsList, children: [
+      pairs.length === 0 && readOnly ? /* @__PURE__ */ jsx84("div", { style: styles.emptyState, children: "No attributes defined" }) : readOnly ? pairs.map((pair, index) => /* @__PURE__ */ jsxs42("div", { style: styles.readOnlyPair, children: [
+        /* @__PURE__ */ jsxs42("span", { style: styles.readOnlyKey, children: [
           pair.key,
           ":"
         ] }),
-        /* @__PURE__ */ jsx83("span", { style: styles.readOnlyValue, children: pair.value })
-      ] }, `${pair.key}-${index}`)) : pairs.map((pair, index) => /* @__PURE__ */ jsxs41("div", { style: styles.pairRow, children: [
-        /* @__PURE__ */ jsx83(
+        /* @__PURE__ */ jsx84("span", { style: styles.readOnlyValue, children: pair.value })
+      ] }, `${pair.key}-${index}`)) : pairs.map((pair, index) => /* @__PURE__ */ jsxs42("div", { style: styles.pairRow, children: [
+        /* @__PURE__ */ jsx84(
           TextField_default,
           {
             placeholder: keyPlaceholder,
@@ -9085,7 +9465,7 @@ var KeyValueInput = ({
             "aria-label": `${keyLabel} ${index + 1}`
           }
         ),
-        /* @__PURE__ */ jsx83(
+        /* @__PURE__ */ jsx84(
           TextField_default,
           {
             placeholder: valuePlaceholder,
@@ -9096,7 +9476,7 @@ var KeyValueInput = ({
             "aria-label": `${valueLabel} ${index + 1}`
           }
         ),
-        !readOnly && /* @__PURE__ */ jsx83(
+        !readOnly && /* @__PURE__ */ jsx84(
           Button_default,
           {
             variant: "outline",
@@ -9105,12 +9485,12 @@ var KeyValueInput = ({
             disabled,
             style: styles.removeButton,
             "aria-label": `${removeButtonText} ${pair.key}`,
-            children: /* @__PURE__ */ jsx83(X_default, { width: 16, height: 16 })
+            children: /* @__PURE__ */ jsx84(X_default, { width: 16, height: 16 })
           }
         )
       ] }, `${pair.key}-${index}`)),
-      !readOnly && /* @__PURE__ */ jsxs41("div", { style: styles.addRow, children: [
-        /* @__PURE__ */ jsx83(
+      !readOnly && /* @__PURE__ */ jsxs42("div", { style: styles.addRow, children: [
+        /* @__PURE__ */ jsx84(
           TextField_default,
           {
             placeholder: keyPlaceholder,
@@ -9121,7 +9501,7 @@ var KeyValueInput = ({
             "aria-label": "New key"
           }
         ),
-        /* @__PURE__ */ jsx83(
+        /* @__PURE__ */ jsx84(
           TextField_default,
           {
             placeholder: valuePlaceholder,
@@ -9137,7 +9517,7 @@ var KeyValueInput = ({
             }
           }
         ),
-        /* @__PURE__ */ jsx83(
+        /* @__PURE__ */ jsx84(
           Button_default,
           {
             variant: "solid",
@@ -9146,13 +9526,13 @@ var KeyValueInput = ({
             disabled: isAddDisabled,
             style: styles.addButton,
             "aria-label": "Add new key-value pair",
-            children: /* @__PURE__ */ jsx83(Plus_default, { width: 16, height: 16 })
+            children: /* @__PURE__ */ jsx84(Plus_default, { width: 16, height: 16 })
           }
         )
       ] })
     ] }),
-    (helperText || error) && /* @__PURE__ */ jsx83("div", { style: styles.helperText, children: error || helperText }),
-    maxPairs && /* @__PURE__ */ jsxs41("div", { style: styles.helperText, children: [
+    (helperText || error) && /* @__PURE__ */ jsx84("div", { style: styles.helperText, children: error || helperText }),
+    maxPairs && /* @__PURE__ */ jsxs42("div", { style: styles.helperText, children: [
       pairs.length,
       " of ",
       maxPairs,
@@ -9163,7 +9543,7 @@ var KeyValueInput = ({
 var KeyValueInput_default = KeyValueInput;
 
 // src/components/presentation/OrganizationProfile/BaseOrganizationProfile.tsx
-import { Fragment as Fragment20, jsx as jsx84, jsxs as jsxs42 } from "react/jsx-runtime";
+import { Fragment as Fragment20, jsx as jsx85, jsxs as jsxs43 } from "react/jsx-runtime";
 var formatDate = (dateString) => {
   if (!dateString) return "-";
   try {
@@ -9223,10 +9603,10 @@ var BaseOrganizationProfile = ({
   ]
 }) => {
   const { theme } = useTheme_default();
-  const [editedOrganization, setEditedOrganization] = useState22(organization);
-  const [editingFields, setEditingFields] = useState22({});
+  const [editedOrganization, setEditedOrganization] = useState23(organization);
+  const [editingFields, setEditingFields] = useState23({});
   const triggerRef = useRef7(null);
-  const PencilIcon = () => /* @__PURE__ */ jsx84(
+  const PencilIcon = () => /* @__PURE__ */ jsx85(
     "svg",
     {
       width: "16",
@@ -9237,16 +9617,16 @@ var BaseOrganizationProfile = ({
       strokeWidth: "2",
       strokeLinecap: "round",
       strokeLinejoin: "round",
-      children: /* @__PURE__ */ jsx84("path", { d: "M17 3a2.828 2.828 0 1 1 4 4L7.5 20.5 2 22l1.5-5.5L17 3z" })
+      children: /* @__PURE__ */ jsx85("path", { d: "M17 3a2.828 2.828 0 1 1 4 4L7.5 20.5 2 22l1.5-5.5L17 3z" })
     }
   );
-  const toggleFieldEdit = useCallback10((fieldName) => {
+  const toggleFieldEdit = useCallback12((fieldName) => {
     setEditingFields((prev) => ({
       ...prev,
       [fieldName]: !prev[fieldName]
     }));
   }, []);
-  const getFieldPlaceholder = useCallback10((fieldKey) => {
+  const getFieldPlaceholder = useCallback12((fieldKey) => {
     const fieldLabels = {
       name: "organization name",
       description: "organization description",
@@ -9257,7 +9637,7 @@ var BaseOrganizationProfile = ({
     const fieldLabel = fieldLabels[fieldKey] || fieldKey.toLowerCase();
     return `Enter ${fieldLabel}`;
   }, []);
-  const handleFieldSave = useCallback10(
+  const handleFieldSave = useCallback12(
     (fieldKey) => {
       if (!onUpdate || !fieldKey) return;
       const fieldValue = editedOrganization && fieldKey && editedOrganization[fieldKey] !== void 0 ? editedOrganization[fieldKey] : organization && organization[fieldKey] !== void 0 ? organization[fieldKey] : "";
@@ -9269,7 +9649,7 @@ var BaseOrganizationProfile = ({
     },
     [editedOrganization, organization, onUpdate, toggleFieldEdit]
   );
-  const handleFieldCancel = useCallback10(
+  const handleFieldCancel = useCallback12(
     (fieldKey) => {
       setEditedOrganization((prev) => ({
         ...prev,
@@ -9296,8 +9676,8 @@ var BaseOrganizationProfile = ({
     if (!name) return "ORG";
     return name.split(" ").map((word) => word.charAt(0)).join("").toUpperCase().slice(0, 2);
   };
-  const styles = useStyles8();
-  const buttonStyle = useMemo18(
+  const styles = useStyles9();
+  const buttonStyle = useMemo19(
     () => ({
       padding: `${theme.spacing.unit}px ${theme.spacing.unit * 2}px`,
       margin: `${theme.spacing.unit}px`,
@@ -9309,7 +9689,7 @@ var BaseOrganizationProfile = ({
     }),
     [theme]
   );
-  const saveButtonStyle = useMemo18(
+  const saveButtonStyle = useMemo19(
     () => ({
       ...buttonStyle,
       backgroundColor: theme.colors.primary.main,
@@ -9317,7 +9697,7 @@ var BaseOrganizationProfile = ({
     }),
     [theme, buttonStyle]
   );
-  const cancelButtonStyle = useMemo18(
+  const cancelButtonStyle = useMemo19(
     () => ({
       ...buttonStyle,
       backgroundColor: theme.colors.secondary.main,
@@ -9344,7 +9724,7 @@ var BaseOrganizationProfile = ({
       let fieldInput;
       if (key === "attributes") {
         const attributesValue = typeof fieldValue === "object" && fieldValue !== null ? fieldValue : {};
-        fieldInput = /* @__PURE__ */ jsx84(
+        fieldInput = /* @__PURE__ */ jsx85(
           KeyValueInput_default,
           {
             value: attributesValue,
@@ -9382,26 +9762,26 @@ var BaseOrganizationProfile = ({
           }
         );
       } else {
-        fieldInput = /* @__PURE__ */ jsx84(TextField_default, { ...commonProps });
+        fieldInput = /* @__PURE__ */ jsx85(TextField_default, { ...commonProps });
       }
-      return /* @__PURE__ */ jsxs42(Fragment20, { children: [
-        /* @__PURE__ */ jsx84("span", { style: styles.label, children: label }),
-        /* @__PURE__ */ jsx84("div", { style: styles.value, children: fieldInput })
+      return /* @__PURE__ */ jsxs43(Fragment20, { children: [
+        /* @__PURE__ */ jsx85("span", { style: styles.label, children: label }),
+        /* @__PURE__ */ jsx85("div", { style: styles.value, children: fieldInput })
       ] });
     }
     const hasValue = value !== void 0 && value !== null && value !== "";
     const isFieldEditable = editable && fieldEditable;
     let displayValue;
     if (hasValue) {
-      displayValue = key === "attributes" && typeof value === "object" && value !== null ? /* @__PURE__ */ jsx84(KeyValueInput_default, { value, readOnly: true, label: "" }) : String(renderedValue);
+      displayValue = key === "attributes" && typeof value === "object" && value !== null ? /* @__PURE__ */ jsx85(KeyValueInput_default, { value, readOnly: true, label: "" }) : String(renderedValue);
     } else if (isFieldEditable) {
       displayValue = getFieldPlaceholder(key);
     } else {
       displayValue = "-";
     }
-    return /* @__PURE__ */ jsxs42(Fragment20, { children: [
-      /* @__PURE__ */ jsx84("span", { style: styles.label, children: label }),
-      /* @__PURE__ */ jsx84(
+    return /* @__PURE__ */ jsxs43(Fragment20, { children: [
+      /* @__PURE__ */ jsx85("span", { style: styles.label, children: label }),
+      /* @__PURE__ */ jsx85(
         "div",
         {
           style: {
@@ -9409,7 +9789,7 @@ var BaseOrganizationProfile = ({
             fontStyle: hasValue ? "normal" : "italic",
             opacity: hasValue ? 1 : 0.7
           },
-          children: !hasValue && isFieldEditable && onStartEdit ? /* @__PURE__ */ jsx84(
+          children: !hasValue && isFieldEditable && onStartEdit ? /* @__PURE__ */ jsx85(
             "button",
             {
               onClick: onStartEdit,
@@ -9447,8 +9827,8 @@ var BaseOrganizationProfile = ({
       alignItems: "center",
       gap: `${theme.spacing.unit}px`
     };
-    return /* @__PURE__ */ jsxs42("div", { style: fieldStyle, children: [
-      /* @__PURE__ */ jsx84("div", { style: { flex: 1, display: "flex", alignItems: "center", gap: `${theme.spacing.unit}px` }, children: renderField(
+    return /* @__PURE__ */ jsxs43("div", { style: fieldStyle, children: [
+      /* @__PURE__ */ jsx85("div", { style: { flex: 1, display: "flex", alignItems: "center", gap: `${theme.spacing.unit}px` }, children: renderField(
         field,
         isFieldEditing,
         (value) => {
@@ -9458,12 +9838,12 @@ var BaseOrganizationProfile = ({
         },
         () => toggleFieldEdit(field.key)
       ) }),
-      isFieldEditable && /* @__PURE__ */ jsx84("div", { style: { display: "flex", alignItems: "center", gap: `${theme.spacing.unit / 2}px` }, children: isFieldEditing ? /* @__PURE__ */ jsxs42(Fragment20, { children: [
-        /* @__PURE__ */ jsx84("button", { onClick: () => handleFieldSave(field.key), style: saveButtonStyle, title: "Save changes", children: saveButtonText }),
-        /* @__PURE__ */ jsx84("button", { onClick: () => handleFieldCancel(field.key), style: cancelButtonStyle, title: "Cancel editing", children: cancelButtonText })
+      isFieldEditable && /* @__PURE__ */ jsx85("div", { style: { display: "flex", alignItems: "center", gap: `${theme.spacing.unit / 2}px` }, children: isFieldEditing ? /* @__PURE__ */ jsxs43(Fragment20, { children: [
+        /* @__PURE__ */ jsx85("button", { onClick: () => handleFieldSave(field.key), style: saveButtonStyle, title: "Save changes", children: saveButtonText }),
+        /* @__PURE__ */ jsx85("button", { onClick: () => handleFieldCancel(field.key), style: cancelButtonStyle, title: "Cancel editing", children: cancelButtonText })
       ] }) : (
         // Only show pencil icon when there's a value
-        hasValue && /* @__PURE__ */ jsx84(
+        hasValue && /* @__PURE__ */ jsx85(
           "button",
           {
             onClick: () => toggleFieldEdit(field.key),
@@ -9479,7 +9859,7 @@ var BaseOrganizationProfile = ({
               color: theme.colors.text.secondary
             },
             title: "Edit field",
-            children: /* @__PURE__ */ jsx84(PencilIcon, {})
+            children: /* @__PURE__ */ jsx85(PencilIcon, {})
           }
         )
       ) })
@@ -9492,30 +9872,30 @@ var BaseOrganizationProfile = ({
     ...styles.root,
     ...cardLayout ? styles.card : {}
   };
-  const profileContent = /* @__PURE__ */ jsxs42(Card_default, { style: containerStyle, className: clsx24(withVendorCSSClassPrefix23("organization-profile"), className), children: [
-    /* @__PURE__ */ jsxs42("div", { style: styles.header, children: [
-      /* @__PURE__ */ jsx84(Avatar, { name: getOrgInitials(organization.name), size: 80, alt: `${organization.name} logo` }),
-      /* @__PURE__ */ jsxs42("div", { style: styles.orgInfo, children: [
-        /* @__PURE__ */ jsx84("h2", { style: styles.name, children: organization.name }),
-        organization.orgHandle && /* @__PURE__ */ jsxs42("p", { style: styles.handle, children: [
+  const profileContent = /* @__PURE__ */ jsxs43(Card_default, { style: containerStyle, className: clsx25(withVendorCSSClassPrefix24("organization-profile"), className), children: [
+    /* @__PURE__ */ jsxs43("div", { style: styles.header, children: [
+      /* @__PURE__ */ jsx85(Avatar, { name: getOrgInitials(organization.name), size: 80, alt: `${organization.name} logo` }),
+      /* @__PURE__ */ jsxs43("div", { style: styles.orgInfo, children: [
+        /* @__PURE__ */ jsx85("h2", { style: styles.name, children: organization.name }),
+        organization.orgHandle && /* @__PURE__ */ jsxs43("p", { style: styles.handle, children: [
           "@",
           organization.orgHandle
         ] })
       ] })
     ] }),
-    /* @__PURE__ */ jsx84("div", { style: styles.infoContainer, children: fields.map((field, index) => renderOrganizationField(field)) })
+    /* @__PURE__ */ jsx85("div", { style: styles.infoContainer, children: fields.map((field, index) => renderOrganizationField(field)) })
   ] });
   if (mode === "popup") {
-    return /* @__PURE__ */ jsx84(Dialog, { open, onOpenChange, children: /* @__PURE__ */ jsxs42(DialogContent, { children: [
-      /* @__PURE__ */ jsx84(DialogHeading, { children: title }),
-      /* @__PURE__ */ jsx84("div", { style: { padding: "1rem" }, children: profileContent })
+    return /* @__PURE__ */ jsx85(Dialog, { open, onOpenChange, children: /* @__PURE__ */ jsxs43(DialogContent, { children: [
+      /* @__PURE__ */ jsx85(DialogHeading, { children: title }),
+      /* @__PURE__ */ jsx85("div", { style: { padding: "1rem" }, children: profileContent })
     ] }) });
   }
   return profileContent;
 };
-var useStyles8 = () => {
+var useStyles9 = () => {
   const { theme, colorScheme } = useTheme_default();
-  return useMemo18(
+  return useMemo19(
     () => ({
       root: {
         padding: `${theme.spacing.unit * 4}px`,
@@ -9696,7 +10076,7 @@ var updateOrganization = async ({
 var updateOrganization_default = updateOrganization;
 
 // src/components/presentation/OrganizationProfile/OrganizationProfile.tsx
-import { jsx as jsx85, jsxs as jsxs43 } from "react/jsx-runtime";
+import { jsx as jsx86 } from "react/jsx-runtime";
 var OrganizationProfile = ({
   organizationId,
   mode = "default",
@@ -9704,15 +10084,15 @@ var OrganizationProfile = ({
   onOpenChange,
   onUpdate,
   popupTitle,
-  loadingFallback = /* @__PURE__ */ jsx85("div", { children: "Loading organization..." }),
-  errorFallback = /* @__PURE__ */ jsx85("div", { children: "Failed to load organization data" }),
+  loadingFallback = /* @__PURE__ */ jsx86("div", { children: "Loading organization..." }),
+  errorFallback = /* @__PURE__ */ jsx86("div", { children: "Failed to load organization data" }),
   ...rest
 }) => {
   const { baseUrl } = useAsgardeo_default();
   const { t } = useTranslation_default();
-  const [organization, setOrganization] = useState23(null);
-  const [loading, setLoading] = useState23(true);
-  const [error, setError] = useState23(false);
+  const [organization, setOrganization] = useState24(null);
+  const [loading, setLoading] = useState24(true);
+  const [error, setError] = useState24(false);
   const fetchOrganization = async () => {
     if (!baseUrl || !organizationId) {
       setLoading(false);
@@ -9756,19 +10136,7 @@ var OrganizationProfile = ({
       throw err;
     }
   };
-  if (loading) {
-    return mode === "popup" ? /* @__PURE__ */ jsx85(Dialog, { open, onOpenChange, children: /* @__PURE__ */ jsxs43(DialogContent, { children: [
-      /* @__PURE__ */ jsx85(DialogHeading, { children: popupTitle || t("organization.profile.title") }),
-      /* @__PURE__ */ jsx85("div", { style: { padding: "1rem" }, children: loadingFallback })
-    ] }) }) : loadingFallback;
-  }
-  if (error) {
-    return mode === "popup" ? /* @__PURE__ */ jsx85(Dialog, { open, onOpenChange, children: /* @__PURE__ */ jsxs43(DialogContent, { children: [
-      /* @__PURE__ */ jsx85(DialogHeading, { children: popupTitle || t("organization.profile.title") }),
-      /* @__PURE__ */ jsx85("div", { style: { padding: "1rem" }, children: errorFallback })
-    ] }) }) : errorFallback;
-  }
-  const profileContent = /* @__PURE__ */ jsx85(
+  return /* @__PURE__ */ jsx86(
     BaseOrganizationProfile_default,
     {
       organization,
@@ -9780,7 +10148,6 @@ var OrganizationProfile = ({
       ...rest
     }
   );
-  return profileContent;
 };
 var OrganizationProfile_default = OrganizationProfile;
 
@@ -9788,10 +10155,10 @@ var OrganizationProfile_default = OrganizationProfile;
 import { useEffect as useEffect15 } from "react";
 
 // src/components/presentation/OrganizationList/BaseOrganizationList.tsx
-import { withVendorCSSClassPrefix as withVendorCSSClassPrefix24 } from "@asgardeo/browser";
-import clsx25 from "clsx";
-import { useMemo as useMemo19 } from "react";
-import { jsx as jsx86, jsxs as jsxs44 } from "react/jsx-runtime";
+import { withVendorCSSClassPrefix as withVendorCSSClassPrefix25 } from "@asgardeo/browser";
+import clsx26 from "clsx";
+import { useMemo as useMemo20 } from "react";
+import { jsx as jsx87, jsxs as jsxs44 } from "react/jsx-runtime";
 var defaultRenderOrganization = (organization, styles) => {
   const getOrgInitials = (name) => {
     if (!name) return "ORG";
@@ -9799,9 +10166,9 @@ var defaultRenderOrganization = (organization, styles) => {
   };
   return /* @__PURE__ */ jsxs44("div", { style: styles.organizationItem, children: [
     /* @__PURE__ */ jsxs44("div", { style: styles.organizationContent, children: [
-      /* @__PURE__ */ jsx86(Avatar, { name: getOrgInitials(organization.name), size: 48, alt: `${organization.name} logo` }),
+      /* @__PURE__ */ jsx87(Avatar, { name: getOrgInitials(organization.name), size: 48, alt: `${organization.name} logo` }),
       /* @__PURE__ */ jsxs44("div", { style: styles.organizationInfo, children: [
-        /* @__PURE__ */ jsx86("h3", { style: styles.organizationName, children: organization.name }),
+        /* @__PURE__ */ jsx87("h3", { style: styles.organizationName, children: organization.name }),
         /* @__PURE__ */ jsxs44("p", { style: styles.organizationHandle, children: [
           "@",
           organization.orgHandle
@@ -9809,7 +10176,7 @@ var defaultRenderOrganization = (organization, styles) => {
         /* @__PURE__ */ jsxs44("p", { style: styles.organizationStatus, children: [
           "Status:",
           " ",
-          /* @__PURE__ */ jsx86(
+          /* @__PURE__ */ jsx87(
             "span",
             {
               style: {
@@ -9822,16 +10189,16 @@ var defaultRenderOrganization = (organization, styles) => {
         ] })
       ] })
     ] }),
-    /* @__PURE__ */ jsx86("div", { style: styles.organizationActions, children: organization.canSwitch ? /* @__PURE__ */ jsx86("span", { style: { ...styles.badge, ...styles.successBadge }, children: "Can Switch" }) : /* @__PURE__ */ jsx86("span", { style: { ...styles.badge, ...styles.errorBadge }, children: "No Access" }) })
+    /* @__PURE__ */ jsx87("div", { style: styles.organizationActions, children: organization.canSwitch ? /* @__PURE__ */ jsx87("span", { style: { ...styles.badge, ...styles.successBadge }, children: "Can Switch" }) : /* @__PURE__ */ jsx87("span", { style: { ...styles.badge, ...styles.errorBadge }, children: "No Access" }) })
   ] }, organization.id);
 };
-var defaultRenderLoading = (styles) => /* @__PURE__ */ jsx86("div", { style: styles.loadingContainer, children: /* @__PURE__ */ jsx86("div", { style: styles.loadingText, children: "Loading organizations..." }) });
+var defaultRenderLoading = (styles) => /* @__PURE__ */ jsx87("div", { style: styles.loadingContainer, children: /* @__PURE__ */ jsx87("div", { style: styles.loadingText, children: "Loading organizations..." }) });
 var defaultRenderError = (error, styles) => /* @__PURE__ */ jsxs44("div", { style: styles.errorContainer, children: [
-  /* @__PURE__ */ jsx86("strong", { children: "Error:" }),
+  /* @__PURE__ */ jsx87("strong", { children: "Error:" }),
   " ",
   error
 ] });
-var defaultRenderLoadMore = (onLoadMore, isLoading, styles) => /* @__PURE__ */ jsx86(
+var defaultRenderLoadMore = (onLoadMore, isLoading, styles) => /* @__PURE__ */ jsx87(
   "button",
   {
     onClick: onLoadMore,
@@ -9844,7 +10211,7 @@ var defaultRenderLoadMore = (onLoadMore, isLoading, styles) => /* @__PURE__ */ j
     children: isLoading ? "Loading..." : "Load More Organizations"
   }
 );
-var defaultRenderEmpty = (styles) => /* @__PURE__ */ jsx86("div", { style: styles.emptyContainer, children: /* @__PURE__ */ jsx86("div", { style: styles.emptyText, children: "No organizations found" }) });
+var defaultRenderEmpty = (styles) => /* @__PURE__ */ jsx87("div", { style: styles.emptyContainer, children: /* @__PURE__ */ jsx87("div", { style: styles.emptyText, children: "No organizations found" }) });
 var BaseOrganizationList = ({
   className = "",
   data,
@@ -9866,67 +10233,67 @@ var BaseOrganizationList = ({
   title = "Organizations",
   totalCount
 }) => {
-  const styles = useStyles9();
+  const styles = useStyles10();
   const renderLoadingWithStyles = renderLoading || (() => defaultRenderLoading(styles));
   const renderErrorWithStyles = renderError || ((error2) => defaultRenderError(error2, styles));
   const renderEmptyWithStyles = renderEmpty || (() => defaultRenderEmpty(styles));
   const renderLoadMoreWithStyles = renderLoadMore || ((onLoadMore, isLoading2) => defaultRenderLoadMore(onLoadMore, isLoading2, styles));
   const renderOrganizationWithStyles = renderOrganization || ((org) => defaultRenderOrganization(org, styles));
   if (isLoading && data.length === 0) {
-    const loadingContent = /* @__PURE__ */ jsx86(
+    const loadingContent = /* @__PURE__ */ jsx87(
       "div",
       {
-        className: clsx25(withVendorCSSClassPrefix24("organization-list"), className),
+        className: clsx26(withVendorCSSClassPrefix25("organization-list"), className),
         style: { ...styles.root, ...style },
         children: renderLoadingWithStyles()
       }
     );
     if (mode === "popup") {
-      return /* @__PURE__ */ jsx86(Dialog, { open, onOpenChange, children: /* @__PURE__ */ jsxs44(DialogContent, { children: [
-        /* @__PURE__ */ jsx86(DialogHeading, { children: title }),
-        /* @__PURE__ */ jsx86("div", { style: styles.popupContent, children: loadingContent })
+      return /* @__PURE__ */ jsx87(Dialog, { open, onOpenChange, children: /* @__PURE__ */ jsxs44(DialogContent, { children: [
+        /* @__PURE__ */ jsx87(DialogHeading, { children: title }),
+        /* @__PURE__ */ jsx87("div", { style: styles.popupContent, children: loadingContent })
       ] }) });
     }
     return loadingContent;
   }
   if (error && data.length === 0) {
-    const errorContent = /* @__PURE__ */ jsx86(
+    const errorContent = /* @__PURE__ */ jsx87(
       "div",
       {
-        className: clsx25(withVendorCSSClassPrefix24("organization-list"), className),
+        className: clsx26(withVendorCSSClassPrefix25("organization-list"), className),
         style: { ...styles.root, ...style },
         children: renderErrorWithStyles(error)
       }
     );
     if (mode === "popup") {
-      return /* @__PURE__ */ jsx86(Dialog, { open, onOpenChange, children: /* @__PURE__ */ jsxs44(DialogContent, { children: [
-        /* @__PURE__ */ jsx86(DialogHeading, { children: title }),
-        /* @__PURE__ */ jsx86("div", { style: styles.popupContent, children: errorContent })
+      return /* @__PURE__ */ jsx87(Dialog, { open, onOpenChange, children: /* @__PURE__ */ jsxs44(DialogContent, { children: [
+        /* @__PURE__ */ jsx87(DialogHeading, { children: title }),
+        /* @__PURE__ */ jsx87("div", { style: styles.popupContent, children: errorContent })
       ] }) });
     }
     return errorContent;
   }
   if (!isLoading && data.length === 0) {
-    const emptyContent = /* @__PURE__ */ jsx86(
+    const emptyContent = /* @__PURE__ */ jsx87(
       "div",
       {
-        className: clsx25(withVendorCSSClassPrefix24("organization-list"), className),
+        className: clsx26(withVendorCSSClassPrefix25("organization-list"), className),
         style: { ...styles.root, ...style },
         children: renderEmptyWithStyles()
       }
     );
     if (mode === "popup") {
-      return /* @__PURE__ */ jsx86(Dialog, { open, onOpenChange, children: /* @__PURE__ */ jsxs44(DialogContent, { children: [
-        /* @__PURE__ */ jsx86(DialogHeading, { children: title }),
-        /* @__PURE__ */ jsx86("div", { style: styles.popupContent, children: emptyContent })
+      return /* @__PURE__ */ jsx87(Dialog, { open, onOpenChange, children: /* @__PURE__ */ jsxs44(DialogContent, { children: [
+        /* @__PURE__ */ jsx87(DialogHeading, { children: title }),
+        /* @__PURE__ */ jsx87("div", { style: styles.popupContent, children: emptyContent })
       ] }) });
     }
     return emptyContent;
   }
-  const organizationListContent = /* @__PURE__ */ jsxs44("div", { className: clsx25(withVendorCSSClassPrefix24("organization-list"), className), style: { ...styles.root, ...style }, children: [
+  const organizationListContent = /* @__PURE__ */ jsxs44("div", { className: clsx26(withVendorCSSClassPrefix25("organization-list"), className), style: { ...styles.root, ...style }, children: [
     /* @__PURE__ */ jsxs44("div", { style: styles.header, children: [
       /* @__PURE__ */ jsxs44("div", { style: styles.headerInfo, children: [
-        /* @__PURE__ */ jsx86("h2", { style: styles.title, children: "Organizations" }),
+        /* @__PURE__ */ jsx87("h2", { style: styles.title, children: "Organizations" }),
         totalCount !== void 0 && /* @__PURE__ */ jsxs44("p", { style: styles.subtitle, children: [
           "Showing ",
           data.length,
@@ -9935,25 +10302,25 @@ var BaseOrganizationList = ({
           " organizations"
         ] })
       ] }),
-      onRefresh && /* @__PURE__ */ jsx86("button", { onClick: onRefresh, style: styles.refreshButton, type: "button", children: "Refresh" })
+      onRefresh && /* @__PURE__ */ jsx87("button", { onClick: onRefresh, style: styles.refreshButton, type: "button", children: "Refresh" })
     ] }),
-    /* @__PURE__ */ jsx86("div", { style: styles.listContainer, children: data.map(
+    /* @__PURE__ */ jsx87("div", { style: styles.listContainer, children: data.map(
       (organization, index) => renderOrganizationWithStyles(organization, index)
     ) }),
-    error && data.length > 0 && /* @__PURE__ */ jsx86("div", { style: styles.errorMargin, children: renderErrorWithStyles(error) }),
-    hasMore && fetchMore && /* @__PURE__ */ jsx86("div", { style: styles.loadMoreMargin, children: renderLoadMoreWithStyles(fetchMore, isLoadingMore) })
+    error && data.length > 0 && /* @__PURE__ */ jsx87("div", { style: styles.errorMargin, children: renderErrorWithStyles(error) }),
+    hasMore && fetchMore && /* @__PURE__ */ jsx87("div", { style: styles.loadMoreMargin, children: renderLoadMoreWithStyles(fetchMore, isLoadingMore) })
   ] });
   if (mode === "popup") {
-    return /* @__PURE__ */ jsx86(Dialog, { open, onOpenChange, children: /* @__PURE__ */ jsxs44(DialogContent, { children: [
-      /* @__PURE__ */ jsx86(DialogHeading, { children: title }),
-      /* @__PURE__ */ jsx86("div", { style: styles.popupContent, children: organizationListContent })
+    return /* @__PURE__ */ jsx87(Dialog, { open, onOpenChange, children: /* @__PURE__ */ jsxs44(DialogContent, { children: [
+      /* @__PURE__ */ jsx87(DialogHeading, { children: title }),
+      /* @__PURE__ */ jsx87("div", { style: styles.popupContent, children: organizationListContent })
     ] }) });
   }
   return organizationListContent;
 };
-var useStyles9 = () => {
+var useStyles10 = () => {
   const { theme, colorScheme } = useTheme_default();
-  return useMemo19(
+  return useMemo20(
     () => ({
       root: {
         padding: `${theme.spacing.unit * 4}px`,
@@ -10117,7 +10484,7 @@ var useStyles9 = () => {
 var BaseOrganizationList_default = BaseOrganizationList;
 
 // src/components/presentation/OrganizationList/OrganizationList.tsx
-import { jsx as jsx87, jsxs as jsxs45 } from "react/jsx-runtime";
+import { jsx as jsx88, jsxs as jsxs45 } from "react/jsx-runtime";
 var OrganizationList = ({
   autoFetch = true,
   filter = "",
@@ -10169,7 +10536,7 @@ var OrganizationList = ({
       },
       children: [
         /* @__PURE__ */ jsxs45("div", { children: [
-          /* @__PURE__ */ jsx87("h3", { style: { fontSize: "18px", fontWeight: "bold", margin: "0 0 8px 0" }, children: organization.name }),
+          /* @__PURE__ */ jsx88("h3", { style: { fontSize: "18px", fontWeight: "bold", margin: "0 0 8px 0" }, children: organization.name }),
           /* @__PURE__ */ jsxs45("p", { style: { color: "#6b7280", fontSize: "14px", margin: "0" }, children: [
             "Handle: ",
             organization.orgHandle
@@ -10177,10 +10544,10 @@ var OrganizationList = ({
           /* @__PURE__ */ jsxs45("p", { style: { color: "#6b7280", fontSize: "14px", margin: "4px 0 0 0" }, children: [
             "Status:",
             " ",
-            /* @__PURE__ */ jsx87("span", { style: { color: organization.status === "ACTIVE" ? "#10b981" : "#ef4444" }, children: organization.status })
+            /* @__PURE__ */ jsx88("span", { style: { color: organization.status === "ACTIVE" ? "#10b981" : "#ef4444" }, children: organization.status })
           ] })
         ] }),
-        /* @__PURE__ */ jsx87("div", { style: { alignItems: "center", display: "flex" }, children: organization.canSwitch ? /* @__PURE__ */ jsx87(
+        /* @__PURE__ */ jsx88("div", { style: { alignItems: "center", display: "flex" }, children: organization.canSwitch ? /* @__PURE__ */ jsx88(
           "span",
           {
             style: {
@@ -10193,7 +10560,7 @@ var OrganizationList = ({
             },
             children: "Can Switch"
           }
-        ) : /* @__PURE__ */ jsx87(
+        ) : /* @__PURE__ */ jsx88(
           "span",
           {
             style: {
@@ -10219,7 +10586,7 @@ var OrganizationList = ({
       reset: true
     });
   };
-  return /* @__PURE__ */ jsx87(
+  return /* @__PURE__ */ jsx88(
     BaseOrganizationList_default,
     {
       data: paginatedOrganizations,
@@ -10238,7 +10605,7 @@ var OrganizationList = ({
 var OrganizationList_default = OrganizationList;
 
 // src/components/primitives/Icons/BuildingAlt.tsx
-import { jsx as jsx88, jsxs as jsxs46 } from "react/jsx-runtime";
+import { jsx as jsx89, jsxs as jsxs46 } from "react/jsx-runtime";
 var BuildingAlt = ({ color = "currentColor", height = 24, width = 24 }) => /* @__PURE__ */ jsxs46(
   "svg",
   {
@@ -10252,13 +10619,13 @@ var BuildingAlt = ({ color = "currentColor", height = 24, width = 24 }) => /* @_
     "stroke-linecap": "round",
     "stroke-linejoin": "round",
     children: [
-      /* @__PURE__ */ jsx88("path", { d: "M6 22V4a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2v18Z" }),
-      /* @__PURE__ */ jsx88("path", { d: "M6 12H4a2 2 0 0 0-2 2v6a2 2 0 0 0 2 2h2" }),
-      /* @__PURE__ */ jsx88("path", { d: "M18 9h2a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2h-2" }),
-      /* @__PURE__ */ jsx88("path", { d: "M10 6h4" }),
-      /* @__PURE__ */ jsx88("path", { d: "M10 10h4" }),
-      /* @__PURE__ */ jsx88("path", { d: "M10 14h4" }),
-      /* @__PURE__ */ jsx88("path", { d: "M10 18h4" })
+      /* @__PURE__ */ jsx89("path", { d: "M6 22V4a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2v18Z" }),
+      /* @__PURE__ */ jsx89("path", { d: "M6 12H4a2 2 0 0 0-2 2v6a2 2 0 0 0 2 2h2" }),
+      /* @__PURE__ */ jsx89("path", { d: "M18 9h2a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2h-2" }),
+      /* @__PURE__ */ jsx89("path", { d: "M10 6h4" }),
+      /* @__PURE__ */ jsx89("path", { d: "M10 10h4" }),
+      /* @__PURE__ */ jsx89("path", { d: "M10 14h4" }),
+      /* @__PURE__ */ jsx89("path", { d: "M10 18h4" })
     ]
   }
 );
@@ -10266,7 +10633,7 @@ BuildingAlt.displayName = "BuildingAlt";
 var BuildingAlt_default = BuildingAlt;
 
 // src/components/presentation/OrganizationSwitcher/OrganizationSwitcher.tsx
-import { Fragment as Fragment21, jsx as jsx89, jsxs as jsxs47 } from "react/jsx-runtime";
+import { Fragment as Fragment21, jsx as jsx90, jsxs as jsxs47 } from "react/jsx-runtime";
 var OrganizationSwitcher = ({
   currentOrganization: propCurrentOrganization,
   fallback = null,
@@ -10282,15 +10649,15 @@ var OrganizationSwitcher = ({
     isLoading,
     error
   } = useOrganization_default();
-  const [isCreateOrgOpen, setIsCreateOrgOpen] = useState24(false);
-  const [isProfileOpen, setIsProfileOpen] = useState24(false);
-  const [isOrganizationListOpen, setIsOrganizationListOpen] = useState24(false);
+  const [isCreateOrgOpen, setIsCreateOrgOpen] = useState25(false);
+  const [isProfileOpen, setIsProfileOpen] = useState25(false);
+  const [isOrganizationListOpen, setIsOrganizationListOpen] = useState25(false);
   const { t } = useTranslation_default();
   if (!isSignedIn && fallback) {
     return fallback;
   }
   if (!isSignedIn) {
-    return /* @__PURE__ */ jsx89(Fragment21, {});
+    return /* @__PURE__ */ jsx90(Fragment21, {});
   }
   const organizations = propOrganizations || contextOrganizations || [];
   const currentOrganization = propCurrentOrganization || contextCurrentOrganization;
@@ -10304,19 +10671,19 @@ var OrganizationSwitcher = ({
   const defaultMenuItems = [];
   if (currentOrganization) {
     defaultMenuItems.push({
-      icon: /* @__PURE__ */ jsx89(BuildingAlt_default, {}),
+      icon: /* @__PURE__ */ jsx90(BuildingAlt_default, {}),
       label: t("organization.switcher.manage.organizations"),
       onClick: handleManageOrganizations
     });
   }
   defaultMenuItems.push({
-    icon: /* @__PURE__ */ jsx89("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: /* @__PURE__ */ jsx89("path", { d: "M12 5v14m-7-7h14" }) }),
+    icon: /* @__PURE__ */ jsx90("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: /* @__PURE__ */ jsx90("path", { d: "M12 5v14m-7-7h14" }) }),
     label: t("organization.switcher.create.organization"),
     onClick: () => setIsCreateOrgOpen(true)
   });
   const menuItems = props.menuItems ? [...defaultMenuItems, ...props.menuItems] : defaultMenuItems;
   return /* @__PURE__ */ jsxs47(Fragment21, { children: [
-    /* @__PURE__ */ jsx89(
+    /* @__PURE__ */ jsx90(
       BaseOrganizationSwitcher_default,
       {
         organizations,
@@ -10329,7 +10696,7 @@ var OrganizationSwitcher = ({
         ...props
       }
     ),
-    /* @__PURE__ */ jsx89(
+    /* @__PURE__ */ jsx90(
       CreateOrganization,
       {
         mode: "popup",
@@ -10343,7 +10710,7 @@ var OrganizationSwitcher = ({
         }
       }
     ),
-    currentOrganization && /* @__PURE__ */ jsx89(
+    currentOrganization && /* @__PURE__ */ jsx90(
       OrganizationProfile_default,
       {
         organizationId: currentOrganization.id,
@@ -10351,11 +10718,11 @@ var OrganizationSwitcher = ({
         open: isProfileOpen,
         onOpenChange: setIsProfileOpen,
         cardLayout: true,
-        loadingFallback: /* @__PURE__ */ jsx89("div", { children: t("organization.profile.loading") }),
-        errorFallback: /* @__PURE__ */ jsx89("div", { children: t("organization.profile.error") })
+        loadingFallback: /* @__PURE__ */ jsx90("div", { children: t("organization.profile.loading") }),
+        errorFallback: /* @__PURE__ */ jsx90("div", { children: t("organization.profile.error") })
       }
     ),
-    /* @__PURE__ */ jsx89(
+    /* @__PURE__ */ jsx90(
       OrganizationList_default,
       {
         mode: "popup",
@@ -10393,6 +10760,7 @@ export {
   BaseUser_default as BaseUser,
   BaseUserDropdown_default as BaseUserDropdown,
   BaseUserProfile_default as BaseUserProfile,
+  BuildingAlt_default as BuildingAlt,
   Button_default as Button,
   Card_default as Card,
   CardAction,
@@ -10426,6 +10794,7 @@ export {
   LinkedInButton_default as LinkedInButton,
   LogOut_default as LogOut,
   MicrosoftButton_default as MicrosoftButton,
+  MultiInput_default as MultiInput,
   MultiOptionButton_default as MultiOptionButton,
   Organization_default as Organization,
   OrganizationContext_default as OrganizationContext,