@asgardeo/react 0.5.23 → 0.5.25

package/dist/cjs/index.js

@@ -36,7 +36,7 @@ __export(index_exports, {
   AlertTitle: () => AlertTitle,
   AsgardeoContext: () => AsgardeoContext_default,
   AsgardeoProvider: () => AsgardeoProvider_default,
-  AsgardeoRuntimeError: () => import_browser68.AsgardeoRuntimeError,
+  AsgardeoRuntimeError: () => import_browser69.AsgardeoRuntimeError,
   BaseCreateOrganization: () => BaseCreateOrganization,
   BaseOrganization: () => BaseOrganization_default,
   BaseOrganizationList: () => BaseOrganizationList_default,
@@ -125,15 +125,16 @@ __export(index_exports, {
   UsernamePassword: () => UsernamePassword_default,
   createField: () => createField,
   createOrganization: () => createOrganization_default,
-  createPatchOperations: () => import_browser67.createPatchOperations,
+  createPatchOperations: () => import_browser68.createPatchOperations,
   createSignInOption: () => createSignInOption,
   createSignInOptionFromAuthenticator: () => createSignInOptionFromAuthenticator,
+  getActiveTheme: () => import_browser69.getActiveTheme,
   getAllOrganizations: () => getAllOrganizations_default,
   getMeOrganizations: () => getMeOrganizations_default,
   getMeProfile: () => getScim2Me_default,
   getOrganization: () => getOrganization_default,
   getSchemas: () => getSchemas_default,
-  http: () => import_browser68.http,
+  http: () => import_browser69.http,
   updateMeProfile: () => updateMeProfile_default,
   updateOrganization: () => updateOrganization_default,
   useAlertVariant: () => useAlertVariant,
@@ -182,7 +183,8 @@ var AsgardeoContext = (0, import_react.createContext)({
   getDecodedIdToken: null,
   getAccessToken: null,
   exchangeToken: null,
-  storage: "sessionStorage"
+  storage: "sessionStorage",
+  reInitialize: null
 });
 AsgardeoContext.displayName = "AsgardeoContext";
 var AsgardeoContext_default = AsgardeoContext;
@@ -662,6 +664,23 @@ var AsgardeoReactClient = class extends import_browser6.AsgardeoBrowserClient {
       return this.asgardeo.init({ ...config, organizationHandle: resolvedOrganizationHandle });
     });
   }
+  reInitialize(config) {
+    return this.withLoading(async () => {
+      let isInitialized;
+      try {
+        await this.asgardeo.reInitialize(config);
+        isInitialized = true;
+      } catch (error) {
+        throw new import_browser6.AsgardeoRuntimeError(
+          `Failed to check if the client is initialized: ${error instanceof Error ? error.message : String(error)}`,
+          "AsgardeoReactClient-reInitialize-RuntimeError-001",
+          "react",
+          "An error occurred while checking the initialization status of the client."
+        );
+      }
+      return isInitialized;
+    });
+  }
   async updateUserProfile(payload, userId) {
     throw new Error("Not implemented");
   }
@@ -835,29 +854,16 @@ var AsgardeoReactClient = class extends import_browser6.AsgardeoBrowserClient {
     return Promise.resolve(String(response));
   }
   async signUp(...args) {
-    if (args.length === 0) {
-      throw new import_browser6.AsgardeoRuntimeError(
-        "No arguments provided for signUp method.",
-        "react-AsgardeoReactClient-ValidationError-001",
-        "react",
-        "The signUp method requires at least one argument, either a SignUpOptions object or an EmbeddedFlowExecuteRequestPayload."
-      );
-    }
+    const configData = await this.asgardeo.getConfigData();
     const firstArg = args[0];
     if (typeof firstArg === "object" && "flowType" in firstArg) {
-      const configData = await this.asgardeo.getConfigData();
       const baseUrl = configData?.baseUrl;
       return (0, import_browser6.executeEmbeddedSignUpFlow)({
         baseUrl,
         payload: firstArg
       });
     }
-    throw new import_browser6.AsgardeoRuntimeError(
-      "Not implemented",
-      "react-AsgardeoReactClient-ValidationError-002",
-      "react",
-      "The signUp method with SignUpOptions is not implemented in the React client."
-    );
+    (0, import_browser6.navigate)((0, import_browser6.getRedirectBasedSignUpUrl)(configData));
   }
   async request(requestConfig) {
     return this.asgardeo.httpRequest(requestConfig);
@@ -1261,7 +1267,7 @@ var applyThemeToDOM = (theme) => {
 var ThemeProvider = ({
   children,
   theme: themeConfig,
-  mode = "system",
+  mode = import_browser11.DEFAULT_THEME,
   detection = {},
   inheritFromBranding = true
 }) => {
@@ -1756,12 +1762,6 @@ var AsgardeoProvider = ({
       setIsLoadingSync(asgardeo.isLoading());
     }
   };
-  const isDarkMode = (0, import_react15.useMemo)(() => {
-    if (!preferences?.theme?.mode || preferences.theme.mode === "system") {
-      return window.matchMedia("(prefers-color-scheme: dark)").matches;
-    }
-    return preferences.theme.mode === "dark";
-  }, [preferences?.theme?.mode]);
   const handleProfileUpdate = (payload) => {
     setUser(payload);
     setUserProfile((prev) => ({
@@ -1792,6 +1792,7 @@ var AsgardeoProvider = ({
         request: asgardeo.request.bind(asgardeo),
         requestAll: asgardeo.requestAll.bind(asgardeo)
       },
+      reInitialize: asgardeo.reInitialize.bind(asgardeo),
       signInOptions,
       getDecodedIdToken: asgardeo.getDecodedIdToken.bind(asgardeo),
       exchangeToken: asgardeo.exchangeToken.bind(asgardeo),
@@ -1829,7 +1830,7 @@ var AsgardeoProvider = ({
         {
           inheritFromBranding: preferences?.theme?.inheritFromBranding,
           theme: preferences?.theme?.overrides,
-          mode: isDarkMode ? "dark" : "light",
+          mode: (0, import_browser13.getActiveTheme)(preferences.theme.mode),
           children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(FlowProvider_default, { children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(UserProvider_default, { profile: userProfile, onUpdateProfile: handleProfileUpdate, children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
             OrganizationProvider_default,
             {
@@ -2342,6 +2343,10 @@ var useStyles2 = (theme, colorScheme, color, variant, size, fullWidth, disabled,
           background-color: ${theme.vars.colors.primary.main};
           opacity: 0.8;
         }
+        &:focus:not(:disabled) {
+          background-color: ${theme.vars.colors.primary.main};
+          opacity: 0.8;
+        }
       `,
       "primary-outline": import_css3.css`
         background-color: transparent;
@@ -2356,30 +2361,50 @@ var useStyles2 = (theme, colorScheme, color, variant, size, fullWidth, disabled,
           color: ${theme.vars.colors.primary.contrastText};
           opacity: 0.9;
         }
+        &:focus:not(:disabled) {
+          background-color: ${theme.vars.colors.primary.main};
+          color: ${theme.vars.colors.primary.contrastText};
+          opacity: 0.9;
+        }
       `,
       "primary-text": import_css3.css`
         background-color: transparent;
         color: ${theme.vars.colors.primary.main};
         border-color: transparent;
         &:hover:not(:disabled) {
+          border-color: transparent;
           background-color: ${theme.vars.colors.action.hover};
         }
         &:active:not(:disabled) {
+          border-color: transparent;
           background-color: ${theme.vars.colors.action.selected};
         }
+        &:focus:not(:disabled) {
+          border-color: transparent;
+          background-color: ${theme.vars.colors.action.focus};
+          outline: none;
+        }
       `,
       "primary-icon": import_css3.css`
         background-color: transparent;
         color: ${theme.vars.colors.primary.main};
         border-color: transparent;
         &:hover:not(:disabled) {
+          border-color: transparent;
           background-color: ${theme.vars.colors.action.hover};
           color: ${theme.vars.colors.primary.dark};
         }
         &:active:not(:disabled) {
+          border-color: transparent;
           background-color: ${theme.vars.colors.action.selected};
           color: ${theme.vars.colors.primary.dark};
         }
+        &:focus:not(:disabled) {
+          border-color: transparent;
+          background-color: ${theme.vars.colors.action.focus};
+          color: ${theme.vars.colors.primary.dark};
+          outline: none;
+        }
       `,
       "secondary-solid": import_css3.css`
         background-color: ${theme.vars.colors.secondary.main};
@@ -2393,6 +2418,10 @@ var useStyles2 = (theme, colorScheme, color, variant, size, fullWidth, disabled,
           background-color: ${theme.vars.colors.secondary.main};
           opacity: 0.8;
         }
+        &:focus:not(:disabled) {
+          background-color: ${theme.vars.colors.secondary.main};
+          opacity: 0.8;
+        }
       `,
       "secondary-outline": import_css3.css`
         background-color: transparent;
@@ -2407,30 +2436,50 @@ var useStyles2 = (theme, colorScheme, color, variant, size, fullWidth, disabled,
           color: ${theme.vars.colors.secondary.contrastText};
           opacity: 0.9;
         }
+        &:focus:not(:disabled) {
+          background-color: ${theme.vars.colors.secondary.main};
+          color: ${theme.vars.colors.secondary.contrastText};
+          opacity: 0.9;
+        }
       `,
       "secondary-text": import_css3.css`
         background-color: transparent;
         color: ${theme.vars.colors.secondary.main};
         border-color: transparent;
         &:hover:not(:disabled) {
+          border-color: transparent;
           background-color: ${theme.vars.colors.action.hover};
         }
         &:active:not(:disabled) {
+          border-color: transparent;
           background-color: ${theme.vars.colors.action.selected};
         }
+        &:focus:not(:disabled) {
+          border-color: transparent;
+          background-color: ${theme.vars.colors.action.focus};
+          outline: none;
+        }
       `,
       "secondary-icon": import_css3.css`
         background-color: transparent;
         color: ${theme.vars.colors.secondary.main};
         border-color: transparent;
         &:hover:not(:disabled) {
+          border-color: transparent;
           background-color: ${theme.vars.colors.action.hover};
           color: ${theme.vars.colors.secondary.dark};
         }
         &:active:not(:disabled) {
+          border-color: transparent;
           background-color: ${theme.vars.colors.action.selected};
           color: ${theme.vars.colors.secondary.dark};
         }
+        &:focus:not(:disabled) {
+          border-color: transparent;
+          background-color: ${theme.vars.colors.action.focus};
+          color: ${theme.vars.colors.secondary.dark};
+          outline: none;
+        }
       `,
       "tertiary-solid": import_css3.css`
         background-color: ${theme.vars.colors.text.secondary};
@@ -2445,6 +2494,11 @@ var useStyles2 = (theme, colorScheme, color, variant, size, fullWidth, disabled,
           color: ${theme.vars.colors.background.surface};
           opacity: 0.9;
         }
+        &:focus:not(:disabled) {
+          background-color: ${theme.vars.colors.text.primary};
+          color: ${theme.vars.colors.background.surface};
+          opacity: 0.9;
+        }
       `,
       "tertiary-outline": import_css3.css`
         background-color: transparent;
@@ -2458,32 +2512,52 @@ var useStyles2 = (theme, colorScheme, color, variant, size, fullWidth, disabled,
           background-color: ${theme.vars.colors.action.selected};
           border-color: ${theme.vars.colors.text.primary};
         }
+        &:focus:not(:disabled) {
+          background-color: ${theme.vars.colors.action.focus};
+          border-color: ${theme.vars.colors.text.primary};
+        }
       `,
       "tertiary-text": import_css3.css`
         background-color: transparent;
         color: ${theme.vars.colors.text.secondary};
         border-color: transparent;
         &:hover:not(:disabled) {
+          border-color: transparent;
           background-color: ${theme.vars.colors.action.hover};
           color: ${theme.vars.colors.text.primary};
         }
         &:active:not(:disabled) {
+          border-color: transparent;
           background-color: ${theme.vars.colors.action.selected};
           color: ${theme.vars.colors.text.primary};
         }
+        &:focus:not(:disabled) {
+          border-color: transparent;
+          background-color: ${theme.vars.colors.action.focus};
+          color: ${theme.vars.colors.text.primary};
+          outline: none;
+        }
       `,
       "tertiary-icon": import_css3.css`
         background-color: transparent;
         color: ${theme.vars.colors.text.secondary};
         border-color: transparent;
         &:hover:not(:disabled) {
+          border-color: transparent;
           background-color: ${theme.vars.colors.action.hover};
           color: ${theme.vars.colors.text.primary};
         }
         &:active:not(:disabled) {
+          border-color: transparent;
           background-color: ${theme.vars.colors.action.selected};
           color: ${theme.vars.colors.text.primary};
         }
+        &:focus:not(:disabled) {
+          border-color: transparent;
+          background-color: ${theme.vars.colors.action.focus};
+          color: ${theme.vars.colors.text.primary};
+          outline: none;
+        }
       `
     };
     const spinnerStyles = import_css3.css`
@@ -2630,8 +2704,7 @@ var SignInButton = (0, import_react28.forwardRef)(({ children, onClick, preferen
     try {
       setIsLoading(true);
       if (signInUrl) {
-        window.history.pushState(null, "", signInUrl);
-        window.dispatchEvent(new PopStateEvent("popstate", { state: null }));
+        (0, import_browser18.navigate)(signInUrl);
       } else {
         await signIn(overriddenSignInOptions ?? signInOptions);
       }
@@ -2640,7 +2713,7 @@ var SignInButton = (0, import_react28.forwardRef)(({ children, onClick, preferen
       }
     } catch (error) {
       throw new import_browser18.AsgardeoRuntimeError(
-        `Sign in failed: ${error instanceof Error ? error.message : String(error)}`,
+        `Sign in failed: ${error instanceof Error ? error.message : String(JSON.stringify(error))}`,
         "SignInButton-handleSignIn-RuntimeError-001",
         "react",
         "Something went wrong while trying to sign in. Please try again later."
@@ -2754,6 +2827,8 @@ var BaseSignUpButton = (0, import_react31.forwardRef)(
         disabled: isLoading,
         loading: isLoading,
         type: "button",
+        color: "primary",
+        variant: "solid",
         ...rest,
         children
       }
@@ -2765,6 +2840,7 @@ var BaseSignUpButton_default = BaseSignUpButton;
 
 // src/components/actions/SignUpButton/SignUpButton.tsx
 var import_browser22 = require("@asgardeo/browser");
+var import_browser23 = require("@asgardeo/browser");
 var import_react32 = require("react");
 var import_jsx_runtime15 = require("react/jsx-runtime");
 var SignUpButton = (0, import_react32.forwardRef)(({ children, onClick, preferences, ...rest }, ref) => {
@@ -2775,8 +2851,7 @@ var SignUpButton = (0, import_react32.forwardRef)(({ children, onClick, preferen
     try {
       setIsLoading(true);
       if (signUpUrl) {
-        window.history.pushState(null, "", signUpUrl);
-        window.dispatchEvent(new PopStateEvent("popstate", { state: null }));
+        (0, import_browser23.navigate)(signUpUrl);
       } else {
         await signUp();
       }
@@ -2853,15 +2928,15 @@ Loading.displayName = "Loading";
 var Loading_default = Loading;
 
 // src/components/presentation/SignIn/BaseSignIn.tsx
-var import_browser44 = require("@asgardeo/browser");
+var import_browser45 = require("@asgardeo/browser");
 var import_css35 = require("@emotion/css");
 var import_react56 = require("react");
 
 // src/components/presentation/SignIn/options/SignInOptionFactory.tsx
-var import_browser39 = require("@asgardeo/browser");
+var import_browser40 = require("@asgardeo/browser");
 
 // src/components/presentation/SignIn/options/UsernamePassword.tsx
-var import_browser33 = require("@asgardeo/browser");
+var import_browser34 = require("@asgardeo/browser");
 var import_react44 = require("react");
 
 // src/components/primitives/TextField/TextField.tsx
@@ -2869,11 +2944,11 @@ var import_css15 = require("@emotion/css");
 
 // src/components/primitives/FormControl/FormControl.tsx
 var import_css11 = require("@emotion/css");
-var import_browser24 = require("@asgardeo/browser");
+var import_browser25 = require("@asgardeo/browser");
 
 // src/components/primitives/Typography/Typography.tsx
 var import_css9 = require("@emotion/css");
-var import_browser23 = require("@asgardeo/browser");
+var import_browser24 = require("@asgardeo/browser");
 
 // src/components/primitives/Typography/Typography.styles.ts
 var import_css8 = require("@emotion/css");
@@ -3221,8 +3296,8 @@ var Typography = ({
     }
   };
   const typographyClassName = (0, import_css9.cx)(
-    (0, import_browser23.withVendorCSSClassPrefix)((0, import_browser23.bem)("typography")),
-    (0, import_browser23.withVendorCSSClassPrefix)((0, import_browser23.bem)("typography", variant)),
+    (0, import_browser24.withVendorCSSClassPrefix)((0, import_browser24.bem)("typography")),
+    (0, import_browser24.withVendorCSSClassPrefix)((0, import_browser24.bem)("typography", variant)),
     styles.typography,
     getVariantClass(variant),
     noWrap && styles.typographyNoWrap,
@@ -3272,15 +3347,15 @@ var FormControl = ({
 }) => {
   const { theme, colorScheme } = useTheme_default();
   const styles = FormControl_styles_default(theme, colorScheme, helperTextAlign, helperTextMarginLeft, !!error);
-  return /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: (0, import_css11.cx)((0, import_browser24.withVendorCSSClassPrefix)((0, import_browser24.bem)("form-control")), styles.formControl, className), children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: (0, import_css11.cx)((0, import_browser25.withVendorCSSClassPrefix)((0, import_browser25.bem)("form-control")), styles.formControl, className), children: [
     children,
     (error || helperText) && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
       Typography_default,
       {
         variant: "caption",
         color: error ? "error" : "textSecondary",
-        className: (0, import_css11.cx)((0, import_browser24.withVendorCSSClassPrefix)((0, import_browser24.bem)("form-control", "helper-text")), styles.helperText, {
-          [(0, import_browser24.withVendorCSSClassPrefix)((0, import_browser24.bem)("form-control", "helper-text", "error"))]: !!error,
+        className: (0, import_css11.cx)((0, import_browser25.withVendorCSSClassPrefix)((0, import_browser25.bem)("form-control", "helper-text")), styles.helperText, {
+          [(0, import_browser25.withVendorCSSClassPrefix)((0, import_browser25.bem)("form-control", "helper-text", "error"))]: !!error,
           [styles.helperTextError]: !!error
         }),
         children: error || helperText
@@ -3292,7 +3367,7 @@ var FormControl_default = FormControl;
 
 // src/components/primitives/InputLabel/InputLabel.tsx
 var import_css13 = require("@emotion/css");
-var import_browser25 = require("@asgardeo/browser");
+var import_browser26 = require("@asgardeo/browser");
 
 // src/components/primitives/InputLabel/InputLabel.styles.ts
 var import_css12 = require("@emotion/css");
@@ -3351,12 +3426,12 @@ var InputLabel = ({
     "label",
     {
       className: (0, import_css13.cx)(
-        (0, import_browser25.withVendorCSSClassPrefix)((0, import_browser25.bem)("input-label")),
-        (0, import_browser25.withVendorCSSClassPrefix)((0, import_browser25.bem)("input-label", variant)),
+        (0, import_browser26.withVendorCSSClassPrefix)((0, import_browser26.bem)("input-label")),
+        (0, import_browser26.withVendorCSSClassPrefix)((0, import_browser26.bem)("input-label", variant)),
         styles.label,
         variant === "block" ? styles.block : styles.inline,
         {
-          [(0, import_browser25.withVendorCSSClassPrefix)((0, import_browser25.bem)("input-label", "error"))]: error,
+          [(0, import_browser26.withVendorCSSClassPrefix)((0, import_browser26.bem)("input-label", "error"))]: error,
           [styles.error]: error
         },
         className
@@ -3365,7 +3440,7 @@ var InputLabel = ({
       ...rest,
       children: [
         children,
-        required && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("span", { className: (0, import_css13.cx)((0, import_browser25.withVendorCSSClassPrefix)((0, import_browser25.bem)("input-label", "required")), styles.requiredIndicator), children: " *" })
+        required && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("span", { className: (0, import_css13.cx)((0, import_browser26.withVendorCSSClassPrefix)((0, import_browser26.bem)("input-label", "required")), styles.requiredIndicator), children: " *" })
       ]
     }
   );
@@ -3373,7 +3448,7 @@ var InputLabel = ({
 var InputLabel_default = InputLabel;
 
 // src/components/primitives/TextField/TextField.tsx
-var import_browser26 = require("@asgardeo/browser");
+var import_browser27 = require("@asgardeo/browser");
 
 // src/components/primitives/TextField/TextField.styles.ts
 var import_css14 = require("@emotion/css");
@@ -3502,20 +3577,20 @@ var TextField = ({
   const hasEndIcon = !!endIcon;
   const styles = TextField_styles_default(theme, colorScheme, disabled, hasError, hasStartIcon, hasEndIcon);
   const inputClassName = (0, import_css15.cx)(
-    (0, import_browser26.withVendorCSSClassPrefix)((0, import_browser26.bem)("text-field", "input")),
+    (0, import_browser27.withVendorCSSClassPrefix)((0, import_browser27.bem)("text-field", "input")),
     styles.input,
     hasError && styles.inputError,
     disabled && styles.inputDisabled
   );
-  const containerClassName = (0, import_css15.cx)((0, import_browser26.withVendorCSSClassPrefix)((0, import_browser26.bem)("text-field", "container")), styles.inputContainer);
-  const startIconClassName = (0, import_css15.cx)((0, import_browser26.withVendorCSSClassPrefix)((0, import_browser26.bem)("text-field", "start-icon")), styles.startIcon);
-  const endIconClassName = (0, import_css15.cx)((0, import_browser26.withVendorCSSClassPrefix)((0, import_browser26.bem)("text-field", "end-icon")), styles.endIcon);
+  const containerClassName = (0, import_css15.cx)((0, import_browser27.withVendorCSSClassPrefix)((0, import_browser27.bem)("text-field", "container")), styles.inputContainer);
+  const startIconClassName = (0, import_css15.cx)((0, import_browser27.withVendorCSSClassPrefix)((0, import_browser27.bem)("text-field", "start-icon")), styles.startIcon);
+  const endIconClassName = (0, import_css15.cx)((0, import_browser27.withVendorCSSClassPrefix)((0, import_browser27.bem)("text-field", "end-icon")), styles.endIcon);
   return /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(
     FormControl_default,
     {
       error,
       helperText,
-      className: (0, import_css15.cx)((0, import_browser26.withVendorCSSClassPrefix)((0, import_browser26.bem)("text-field")), className),
+      className: (0, import_css15.cx)((0, import_browser27.withVendorCSSClassPrefix)((0, import_browser27.bem)("text-field")), className),
       style,
       children: [
         label && /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(InputLabel_default, { required, error: hasError, children: label }),
@@ -3562,7 +3637,7 @@ var TextField_default = TextField;
 
 // src/components/primitives/Select/Select.tsx
 var import_css17 = require("@emotion/css");
-var import_browser27 = require("@asgardeo/browser");
+var import_browser28 = require("@asgardeo/browser");
 
 // src/components/primitives/Select/Select.styles.ts
 var import_css16 = require("@emotion/css");
@@ -3660,7 +3735,7 @@ var Select = ({
   const hasError = !!error;
   const styles = Select_styles_default(theme, colorScheme, disabled, hasError);
   const selectClassName = (0, import_css17.cx)(
-    (0, import_browser27.withVendorCSSClassPrefix)((0, import_browser27.bem)("select", "input")),
+    (0, import_browser28.withVendorCSSClassPrefix)((0, import_browser28.bem)("select", "input")),
     styles.select,
     hasError && styles.selectError,
     disabled && styles.selectDisabled
@@ -3670,7 +3745,7 @@ var Select = ({
     {
       error,
       helperText,
-      className: (0, import_css17.cx)((0, import_browser27.withVendorCSSClassPrefix)((0, import_browser27.bem)("select")), className),
+      className: (0, import_css17.cx)((0, import_browser28.withVendorCSSClassPrefix)((0, import_browser28.bem)("select")), className),
       style,
       children: [
         label && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(InputLabel_default, { required, error: hasError, children: label }),
@@ -3694,7 +3769,7 @@ var Select_default = Select;
 // src/components/primitives/OtpField/OtpField.tsx
 var import_react39 = require("react");
 var import_css19 = require("@emotion/css");
-var import_browser28 = require("@asgardeo/browser");
+var import_browser29 = require("@asgardeo/browser");
 
 // src/components/primitives/OtpField/OtpField.styles.ts
 var import_css18 = require("@emotion/css");
@@ -3870,12 +3945,12 @@ var OtpField = ({
     {
       error,
       helperText,
-      className: (0, import_css19.cx)((0, import_browser28.withVendorCSSClassPrefix)((0, import_browser28.bem)("otp-field")), className),
+      className: (0, import_css19.cx)((0, import_browser29.withVendorCSSClassPrefix)((0, import_browser29.bem)("otp-field")), className),
       helperTextAlign: "center",
       style,
       children: [
         label && /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(InputLabel_default, { required, error: !!error, children: label }),
-        /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { className: (0, import_css19.cx)((0, import_browser28.withVendorCSSClassPrefix)((0, import_browser28.bem)("otp-field", "input-container")), styles.inputContainer), children: Array.from({ length }, (_, index) => /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { className: (0, import_css19.cx)((0, import_browser29.withVendorCSSClassPrefix)((0, import_browser29.bem)("otp-field", "input-container")), styles.inputContainer), children: Array.from({ length }, (_, index) => /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
           "input",
           {
             ref: (el) => {
@@ -3887,10 +3962,10 @@ var OtpField = ({
             onChange: (event) => handleChange(index, event),
             onKeyDown: (event) => handleKeyDown(index, event),
             onPaste: handlePaste,
-            className: (0, import_css19.cx)((0, import_browser28.withVendorCSSClassPrefix)((0, import_browser28.bem)("otp-field", "input")), styles.input, {
-              [(0, import_browser28.withVendorCSSClassPrefix)((0, import_browser28.bem)("otp-field", "input", "error"))]: !!error,
+            className: (0, import_css19.cx)((0, import_browser29.withVendorCSSClassPrefix)((0, import_browser29.bem)("otp-field", "input")), styles.input, {
+              [(0, import_browser29.withVendorCSSClassPrefix)((0, import_browser29.bem)("otp-field", "input", "error"))]: !!error,
               [styles.inputError]: !!error,
-              [(0, import_browser28.withVendorCSSClassPrefix)((0, import_browser28.bem)("otp-field", "input", "disabled"))]: !!disabled,
+              [(0, import_browser29.withVendorCSSClassPrefix)((0, import_browser29.bem)("otp-field", "input", "disabled"))]: !!disabled,
               [styles.inputDisabled]: !!disabled
             }),
             maxLength: 1,
@@ -3912,7 +3987,7 @@ var OtpField_default = OtpField;
 // src/components/primitives/PasswordField/PasswordField.tsx
 var import_react41 = require("react");
 var import_css21 = require("@emotion/css");
-var import_browser29 = require("@asgardeo/browser");
+var import_browser30 = require("@asgardeo/browser");
 
 // src/components/primitives/Icons/Eye.tsx
 var import_jsx_runtime25 = require("react/jsx-runtime");
@@ -4008,7 +4083,7 @@ var PasswordField = ({ onChange, className, disabled, error, ...textFieldProps }
     TextField_default,
     {
       ...textFieldProps,
-      className: (0, import_css21.cx)((0, import_browser29.withVendorCSSClassPrefix)((0, import_browser29.bem)("password-field")), className),
+      className: (0, import_css21.cx)((0, import_browser30.withVendorCSSClassPrefix)((0, import_browser30.bem)("password-field")), className),
       type: showPassword ? "text" : "password",
       onChange: (e) => onChange(e.target.value),
       autoComplete: "current-password",
@@ -4020,7 +4095,7 @@ var PasswordField = ({ onChange, className, disabled, error, ...textFieldProps }
           width: 16,
           height: 16,
           className: (0, import_css21.cx)(
-            (0, import_browser29.withVendorCSSClassPrefix)((0, import_browser29.bem)("password-field", "toggle-icon")),
+            (0, import_browser30.withVendorCSSClassPrefix)((0, import_browser30.bem)("password-field", "toggle-icon")),
             styles.toggleIcon,
             showPassword ? styles.visibleIcon : styles.hiddenIcon
           )
@@ -4034,7 +4109,7 @@ var PasswordField_default = PasswordField;
 
 // src/components/primitives/DatePicker/DatePicker.tsx
 var import_css23 = require("@emotion/css");
-var import_browser30 = require("@asgardeo/browser");
+var import_browser31 = require("@asgardeo/browser");
 
 // src/components/primitives/DatePicker/DatePicker.styles.ts
 var import_css22 = require("@emotion/css");
@@ -4123,7 +4198,7 @@ var DatePicker = ({
     {
       error,
       helperText,
-      className: (0, import_css23.cx)((0, import_browser30.withVendorCSSClassPrefix)((0, import_browser30.bem)("date-picker")), className),
+      className: (0, import_css23.cx)((0, import_browser31.withVendorCSSClassPrefix)((0, import_browser31.bem)("date-picker")), className),
       style,
       children: [
         label && /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
@@ -4131,7 +4206,7 @@ var DatePicker = ({
           {
             required,
             error: hasError,
-            className: (0, import_css23.cx)((0, import_browser30.withVendorCSSClassPrefix)((0, import_browser30.bem)("date-picker", "label")), styles.label),
+            className: (0, import_css23.cx)((0, import_browser31.withVendorCSSClassPrefix)((0, import_browser31.bem)("date-picker", "label")), styles.label),
             children: label
           }
         ),
@@ -4142,13 +4217,13 @@ var DatePicker = ({
             pattern: "\\d{4}-\\d{2}-\\d{2}",
             placeholder: dateFormat,
             className: (0, import_css23.cx)(
-              (0, import_browser30.withVendorCSSClassPrefix)((0, import_browser30.bem)("date-picker", "input")),
+              (0, import_browser31.withVendorCSSClassPrefix)((0, import_browser31.bem)("date-picker", "input")),
               styles.input,
               styles.errorInput,
               styles.disabledInput,
               {
-                [(0, import_browser30.withVendorCSSClassPrefix)((0, import_browser30.bem)("date-picker", "input", "error"))]: hasError,
-                [(0, import_browser30.withVendorCSSClassPrefix)((0, import_browser30.bem)("date-picker", "input", "disabled"))]: disabled
+                [(0, import_browser31.withVendorCSSClassPrefix)((0, import_browser31.bem)("date-picker", "input", "error"))]: hasError,
+                [(0, import_browser31.withVendorCSSClassPrefix)((0, import_browser31.bem)("date-picker", "input", "disabled"))]: disabled
               }
             ),
             disabled,
@@ -4165,7 +4240,7 @@ var DatePicker_default = DatePicker;
 
 // src/components/primitives/Checkbox/Checkbox.tsx
 var import_css25 = require("@emotion/css");
-var import_browser31 = require("@asgardeo/browser");
+var import_browser32 = require("@asgardeo/browser");
 
 // src/components/primitives/Checkbox/Checkbox.styles.ts
 var import_css24 = require("@emotion/css");
@@ -4238,15 +4313,15 @@ var Checkbox = ({ label, error, className, required, helperText, style = {}, ...
     {
       error,
       helperText,
-      className: (0, import_css25.cx)((0, import_browser31.withVendorCSSClassPrefix)((0, import_browser31.bem)("checkbox")), className),
+      className: (0, import_css25.cx)((0, import_browser32.withVendorCSSClassPrefix)((0, import_browser32.bem)("checkbox")), className),
       helperTextMarginLeft: `calc(${theme.vars.spacing.unit} * 3.5)`,
-      children: /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("div", { style, className: (0, import_css25.cx)((0, import_browser31.withVendorCSSClassPrefix)((0, import_browser31.bem)("checkbox", "container")), styles.container), children: [
+      children: /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("div", { style, className: (0, import_css25.cx)((0, import_browser32.withVendorCSSClassPrefix)((0, import_browser32.bem)("checkbox", "container")), styles.container), children: [
         /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
           "input",
           {
             type: "checkbox",
-            className: (0, import_css25.cx)((0, import_browser31.withVendorCSSClassPrefix)((0, import_browser31.bem)("checkbox", "input")), styles.input, styles.errorInput, {
-              [(0, import_browser31.withVendorCSSClassPrefix)((0, import_browser31.bem)("checkbox", "input", "error"))]: hasError
+            className: (0, import_css25.cx)((0, import_browser32.withVendorCSSClassPrefix)((0, import_browser32.bem)("checkbox", "input")), styles.input, styles.errorInput, {
+              [(0, import_browser32.withVendorCSSClassPrefix)((0, import_browser32.bem)("checkbox", "input", "error"))]: hasError
             }),
             "aria-invalid": hasError,
             "aria-required": required,
@@ -4259,8 +4334,8 @@ var Checkbox = ({ label, error, className, required, helperText, style = {}, ...
             required,
             error: hasError,
             variant: "inline",
-            className: (0, import_css25.cx)((0, import_browser31.withVendorCSSClassPrefix)((0, import_browser31.bem)("checkbox", "label")), styles.label, styles.errorLabel, {
-              [(0, import_browser31.withVendorCSSClassPrefix)((0, import_browser31.bem)("checkbox", "label", "error"))]: hasError
+            className: (0, import_css25.cx)((0, import_browser32.withVendorCSSClassPrefix)((0, import_browser32.bem)("checkbox", "label")), styles.label, styles.errorLabel, {
+              [(0, import_browser32.withVendorCSSClassPrefix)((0, import_browser32.bem)("checkbox", "label", "error"))]: hasError
             }),
             children: label
           }
@@ -4272,7 +4347,7 @@ var Checkbox = ({ label, error, className, required, helperText, style = {}, ...
 var Checkbox_default = Checkbox;
 
 // src/components/factories/FieldFactory.tsx
-var import_browser32 = require("@asgardeo/browser");
+var import_browser33 = require("@asgardeo/browser");
 var import_jsx_runtime30 = require("react/jsx-runtime");
 var validateFieldValue = (value, type, required = false, touched = false) => {
   if (required && touched && (!value || value.trim() === "")) {
@@ -4282,7 +4357,7 @@ var validateFieldValue = (value, type, required = false, touched = false) => {
     return null;
   }
   switch (type) {
-    case import_browser32.FieldType.Number:
+    case import_browser33.FieldType.Number:
       const numValue = parseInt(value, 10);
       if (isNaN(numValue)) {
         return "Please enter a valid number";
@@ -4318,20 +4393,20 @@ var createField = (config) => {
     placeholder
   };
   switch (type) {
-    case import_browser32.FieldType.Password:
+    case import_browser33.FieldType.Password:
       return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(PasswordField_default, { ...commonProps, onChange });
-    case import_browser32.FieldType.Text:
+    case import_browser33.FieldType.Text:
       return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(TextField_default, { ...commonProps, type: "text", onChange: (e) => onChange(e.target.value), autoComplete: "off" });
-    case import_browser32.FieldType.Email:
+    case import_browser33.FieldType.Email:
       return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(TextField_default, { ...commonProps, type: "email", onChange: (e) => onChange(e.target.value), autoComplete: "email" });
-    case import_browser32.FieldType.Date:
+    case import_browser33.FieldType.Date:
       return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(DatePicker_default, { ...commonProps, onChange: (e) => onChange(e.target.value) });
-    case import_browser32.FieldType.Checkbox:
+    case import_browser33.FieldType.Checkbox:
       const isChecked = value === "true" || value === true;
       return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(Checkbox_default, { ...commonProps, checked: isChecked, onChange: (e) => onChange(e.target.checked.toString()) });
-    case import_browser32.FieldType.Otp:
+    case import_browser33.FieldType.Otp:
       return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(OtpField_default, { ...commonProps, onChange: (e) => onChange(e.target.value) });
-    case import_browser32.FieldType.Number:
+    case import_browser33.FieldType.Number:
       return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
         TextField_default,
         {
@@ -4341,7 +4416,7 @@ var createField = (config) => {
           helperText: "Enter a numeric value"
         }
       );
-    case import_browser32.FieldType.Select:
+    case import_browser33.FieldType.Select:
       const fieldOptions = options.length > 0 ? options : [];
       if (fieldOptions.length > 0) {
         return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
@@ -4404,7 +4479,7 @@ var UsernamePassword = ({
   return /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(import_jsx_runtime31.Fragment, { children: [
     formFields.map((param) => /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("div", { children: createField({
       name: param.param,
-      type: param.type === import_browser33.EmbeddedSignInFlowAuthenticatorParamType.String ? param.confidential ? import_browser33.FieldType.Password : import_browser33.FieldType.Text : import_browser33.FieldType.Text,
+      type: param.type === import_browser34.EmbeddedSignInFlowAuthenticatorParamType.String ? param.confidential ? import_browser34.FieldType.Password : import_browser34.FieldType.Text : import_browser34.FieldType.Text,
       label: param.displayName,
       required: authenticator.requiredParams.includes(param.param),
       value: formValues[param.param] || "",
@@ -4419,13 +4494,13 @@ var UsernamePassword = ({
     /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
       Button_default,
       {
+        fullWidth: true,
         type: "submit",
+        color: "primary",
+        variant: "solid",
         disabled: isLoading,
         loading: isLoading,
         className: buttonClassName,
-        color: "primary",
-        variant: "solid",
-        fullWidth: true,
         style: { marginBottom: `calc(${theme.vars.spacing.unit} * 2)` },
         children: t("username.password.submit.button")
       }
@@ -4435,7 +4510,7 @@ var UsernamePassword = ({
 var UsernamePassword_default = UsernamePassword;
 
 // src/components/presentation/SignIn/options/IdentifierFirst.tsx
-var import_browser34 = require("@asgardeo/browser");
+var import_browser35 = require("@asgardeo/browser");
 var import_react45 = require("react");
 var import_jsx_runtime32 = require("react/jsx-runtime");
 var IdentifierFirst = ({
@@ -4460,7 +4535,7 @@ var IdentifierFirst = ({
   return /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(import_jsx_runtime32.Fragment, { children: [
     formFields.map((param) => /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("div", { children: createField({
       name: param.param,
-      type: param.type === import_browser34.EmbeddedSignInFlowAuthenticatorParamType.String ? param.confidential ? import_browser34.FieldType.Password : import_browser34.FieldType.Text : import_browser34.FieldType.Text,
+      type: param.type === import_browser35.EmbeddedSignInFlowAuthenticatorParamType.String ? param.confidential ? import_browser35.FieldType.Password : import_browser35.FieldType.Text : import_browser35.FieldType.Text,
       label: param.displayName,
       required: authenticator.requiredParams.includes(param.param),
       value: formValues[param.param] || "",
@@ -4475,13 +4550,13 @@ var IdentifierFirst = ({
     /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
       Button_default,
       {
+        fullWidth: true,
         type: "submit",
+        color: "primary",
+        variant: "solid",
         disabled: isLoading,
         loading: isLoading,
         className: buttonClassName,
-        color: "primary",
-        variant: "solid",
-        fullWidth: true,
         style: { marginBottom: `calc(${theme.vars.spacing.unit} * 2)` },
         children: t("identifier.first.submit.button")
       }
@@ -4490,29 +4565,24 @@ var IdentifierFirst = ({
 };
 var IdentifierFirst_default = IdentifierFirst;
 
-// src/components/presentation/SignIn/options/GoogleButton.tsx
+// src/components/presentation/options/GoogleButton.tsx
 var import_jsx_runtime33 = require("react/jsx-runtime");
 var GoogleButton = ({
-  authenticator,
   isLoading,
-  onSubmit,
-  buttonClassName = "",
-  preferences
+  preferences,
+  children,
+  ...rest
 }) => {
   const { t } = useTranslation_default(preferences?.i18n);
-  const handleClick = () => {
-    onSubmit(authenticator);
-  };
   return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
     Button_default,
     {
+      ...rest,
+      fullWidth: true,
       type: "button",
-      variant: "solid",
       color: "secondary",
-      fullWidth: true,
+      variant: "solid",
       disabled: isLoading,
-      onClick: handleClick,
-      className: buttonClassName,
       startIcon: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("svg", { width: "18", height: "18", viewBox: "0 0 67.91 67.901", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("g", { transform: "translate(-0.001 -0.001)", children: [
         /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
           "path",
@@ -4547,35 +4617,30 @@ var GoogleButton = ({
           }
         )
       ] }) }),
-      children: t("elements.buttons.google")
+      children: children ?? t("elements.buttons.google")
     }
   );
 };
 var GoogleButton_default = GoogleButton;
 
-// src/components/presentation/SignIn/options/GitHubButton.tsx
+// src/components/presentation/options/GitHubButton.tsx
 var import_jsx_runtime34 = require("react/jsx-runtime");
 var GitHubButton = ({
-  authenticator,
   isLoading,
-  onSubmit,
-  buttonClassName = "",
-  preferences
+  preferences,
+  children,
+  ...rest
 }) => {
   const { t } = useTranslation_default(preferences?.i18n);
-  const handleClick = () => {
-    onSubmit(authenticator);
-  };
   return /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
     Button_default,
     {
+      ...rest,
+      fullWidth: true,
       type: "button",
-      variant: "solid",
       color: "secondary",
-      fullWidth: true,
+      variant: "solid",
       disabled: isLoading,
-      onClick: handleClick,
-      className: buttonClassName,
       startIcon: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("svg", { width: "18", height: "18", viewBox: "0 0 67.91 66.233", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("g", { transform: "translate(-386.96 658.072)", children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
         "path",
         {
@@ -4583,35 +4648,30 @@ var GitHubButton = ({
           fill: "#ffffff"
         }
       ) }) }),
-      children: t("elements.buttons.github")
+      children: children ?? t("elements.buttons.github")
     }
   );
 };
 var GitHubButton_default = GitHubButton;
 
-// src/components/presentation/SignIn/options/MicrosoftButton.tsx
+// src/components/presentation/options/MicrosoftButton.tsx
 var import_jsx_runtime35 = require("react/jsx-runtime");
 var MicrosoftButton = ({
-  authenticator,
   isLoading,
-  onSubmit,
-  buttonClassName = "",
-  preferences
+  preferences,
+  children,
+  ...rest
 }) => {
   const { t } = useTranslation_default(preferences?.i18n);
-  const handleClick = () => {
-    onSubmit(authenticator);
-  };
   return /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
     Button_default,
     {
-      type: "button",
-      variant: "outline",
-      color: "primary",
+      ...rest,
       fullWidth: true,
+      type: "button",
+      color: "secondary",
+      variant: "solid",
       disabled: isLoading,
-      onClick: handleClick,
-      className: buttonClassName,
       startIcon: /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("svg", { width: "14", height: "14", viewBox: "0 0 23 23", xmlns: "http://www.w3.org/2000/svg", children: [
         /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("path", { fill: "#f3f3f3", d: "M0 0h23v23H0z" }),
         /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("path", { fill: "#f35325", d: "M1 1h10v10H1z" }),
@@ -4619,36 +4679,30 @@ var MicrosoftButton = ({
         /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("path", { fill: "#05a6f0", d: "M1 12h10v10H1z" }),
         /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("path", { fill: "#ffba08", d: "M12 12h10v10H12z" })
       ] }),
-      children: t("elements.buttons.microsoft")
+      children: children ?? t("elements.buttons.microsoft")
     }
   );
 };
 var MicrosoftButton_default = MicrosoftButton;
 
-// src/components/presentation/SignIn/options/FacebookButton.tsx
+// src/components/presentation/options/FacebookButton.tsx
 var import_jsx_runtime36 = require("react/jsx-runtime");
 var FacebookButton = ({
-  authenticator,
   isLoading,
-  onSubmit,
-  buttonClassName = "",
-  submitButtonText,
-  preferences
+  preferences,
+  children,
+  ...rest
 }) => {
   const { t } = useTranslation_default(preferences?.i18n);
-  const handleClick = () => {
-    onSubmit(authenticator);
-  };
   return /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
     Button_default,
     {
+      ...rest,
+      fullWidth: true,
       type: "button",
-      variant: "solid",
       color: "primary",
-      fullWidth: true,
+      variant: "solid",
       disabled: isLoading,
-      onClick: handleClick,
-      className: buttonClassName,
       startIcon: /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("svg", { width: "18", height: "18", viewBox: "0 0 512 512", xmlns: "http://www.w3.org/2000/svg", children: [
         /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
           "path",
@@ -4665,35 +4719,30 @@ var FacebookButton = ({
           }
         )
       ] }),
-      children: t("elements.buttons.facebook")
+      children: children ?? t("elements.buttons.facebook")
     }
   );
 };
 var FacebookButton_default = FacebookButton;
 
-// src/components/presentation/SignIn/options/LinkedInButton.tsx
+// src/components/presentation/options/LinkedInButton.tsx
 var import_jsx_runtime37 = require("react/jsx-runtime");
 var LinkedInButton = ({
-  authenticator,
   isLoading,
-  onSubmit,
-  buttonClassName = "",
-  preferences
+  preferences,
+  children,
+  ...rest
 }) => {
   const { t } = useTranslation_default(preferences?.i18n);
-  const handleClick = () => {
-    onSubmit(authenticator);
-  };
   return /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
     Button_default,
     {
-      type: "button",
-      variant: "outline",
-      color: "primary",
+      ...rest,
       fullWidth: true,
+      type: "button",
+      color: "secondary",
+      variant: "solid",
       disabled: isLoading,
-      onClick: handleClick,
-      className: buttonClassName,
       startIcon: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("svg", { width: "18", height: "18", viewBox: "0 0 24 24", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
         "path",
         {
@@ -4701,35 +4750,30 @@ var LinkedInButton = ({
           d: "M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433c-1.144 0-2.063-.926-2.063-2.065 0-1.138.92-2.063 2.063-2.063 1.14 0 2.064.925 2.064 2.063 0 1.139-.925 2.065-2.064 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z"
         }
       ) }),
-      children: t("elements.buttons.linkedin")
+      children: children ?? t("elements.buttons.linkedin")
     }
   );
 };
 var LinkedInButton_default = LinkedInButton;
 
-// src/components/presentation/SignIn/options/SignInWithEthereumButton.tsx
+// src/components/presentation/options/SignInWithEthereumButton.tsx
 var import_jsx_runtime38 = require("react/jsx-runtime");
 var SignInWithEthereumButton = ({
-  authenticator,
   isLoading,
-  onSubmit,
-  buttonClassName = "",
-  preferences
+  preferences,
+  children,
+  ...rest
 }) => {
   const { t } = useTranslation_default(preferences?.i18n);
-  const handleClick = () => {
-    onSubmit(authenticator);
-  };
   return /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
     Button_default,
     {
+      ...rest,
+      fullWidth: true,
       type: "button",
-      variant: "outline",
       color: "secondary",
-      fullWidth: true,
+      variant: "solid",
       disabled: isLoading,
-      onClick: handleClick,
-      className: buttonClassName,
       startIcon: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("svg", { width: "18", height: "18", viewBox: "0 0 24 24", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
         "path",
         {
@@ -4737,14 +4781,14 @@ var SignInWithEthereumButton = ({
           d: "M11.944 17.97L4.58 13.62 11.943 24l7.37-10.38-7.372 4.35h.003zM12.056 0L4.69 12.223l7.365 4.354 7.365-4.35L12.056 0z"
         }
       ) }),
-      children: t("elements.buttons.ethereum")
+      children: children ?? t("elements.buttons.ethereum")
     }
   );
 };
 var SignInWithEthereumButton_default = SignInWithEthereumButton;
 
 // src/components/presentation/SignIn/options/EmailOtp.tsx
-var import_browser35 = require("@asgardeo/browser");
+var import_browser36 = require("@asgardeo/browser");
 var import_react46 = require("react");
 var import_jsx_runtime39 = require("react/jsx-runtime");
 var EmailOtp = ({
@@ -4783,7 +4827,7 @@ var EmailOtp = ({
         }
       ) : createField({
         name: param.param,
-        type: param.type === import_browser35.EmbeddedSignInFlowAuthenticatorParamType.String ? param.confidential ? import_browser35.FieldType.Password : import_browser35.FieldType.Text : import_browser35.FieldType.Text,
+        type: param.type === import_browser36.EmbeddedSignInFlowAuthenticatorParamType.String ? param.confidential ? import_browser36.FieldType.Password : import_browser36.FieldType.Text : import_browser36.FieldType.Text,
         label: param.displayName,
         required: authenticator.requiredParams.includes(param.param),
         value: formValues[param.param] || "",
@@ -4796,13 +4840,13 @@ var EmailOtp = ({
     /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
       Button_default,
       {
+        fullWidth: true,
         type: "submit",
+        color: "primary",
+        variant: "solid",
         disabled: isLoading,
         loading: isLoading,
         className: buttonClassName,
-        color: "primary",
-        variant: "solid",
-        fullWidth: true,
         style: { marginBottom: `calc(${theme.vars.spacing.unit} * 2)` },
         children: t("email.otp.submit.button")
       }
@@ -4812,7 +4856,7 @@ var EmailOtp = ({
 var EmailOtp_default = EmailOtp;
 
 // src/components/presentation/SignIn/options/Totp.tsx
-var import_browser36 = require("@asgardeo/browser");
+var import_browser37 = require("@asgardeo/browser");
 var import_react47 = require("react");
 var import_jsx_runtime40 = require("react/jsx-runtime");
 var Totp = ({
@@ -4851,7 +4895,7 @@ var Totp = ({
         }
       ) : createField({
         name: param.param,
-        type: param.type === import_browser36.EmbeddedSignInFlowAuthenticatorParamType.String ? param.confidential ? import_browser36.FieldType.Password : import_browser36.FieldType.Text : import_browser36.FieldType.Text,
+        type: param.type === import_browser37.EmbeddedSignInFlowAuthenticatorParamType.String ? param.confidential ? import_browser37.FieldType.Password : import_browser37.FieldType.Text : import_browser37.FieldType.Text,
         label: param.displayName,
         required: authenticator.requiredParams.includes(param.param),
         value: formValues[param.param] || "",
@@ -4864,13 +4908,13 @@ var Totp = ({
     /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
       Button_default,
       {
+        fullWidth: true,
         type: "submit",
+        color: "primary",
+        variant: "solid",
         disabled: isLoading,
         loading: isLoading,
         className: buttonClassName,
-        color: "primary",
-        variant: "solid",
-        fullWidth: true,
         style: { marginBottom: `calc(${theme.vars.spacing.unit} * 2)` },
         children: t("totp.submit.button")
       }
@@ -4880,7 +4924,7 @@ var Totp = ({
 var Totp_default = Totp;
 
 // src/components/presentation/SignIn/options/SmsOtp.tsx
-var import_browser37 = require("@asgardeo/browser");
+var import_browser38 = require("@asgardeo/browser");
 var import_react48 = require("react");
 var import_jsx_runtime41 = require("react/jsx-runtime");
 var SmsOtp = ({
@@ -4919,7 +4963,7 @@ var SmsOtp = ({
         }
       ) : createField({
         name: param.param,
-        type: param.type === import_browser37.EmbeddedSignInFlowAuthenticatorParamType.String ? param.confidential ? import_browser37.FieldType.Password : import_browser37.FieldType.Text : import_browser37.FieldType.Text,
+        type: param.type === import_browser38.EmbeddedSignInFlowAuthenticatorParamType.String ? param.confidential ? import_browser38.FieldType.Password : import_browser38.FieldType.Text : import_browser38.FieldType.Text,
         label: param.displayName,
         required: authenticator.requiredParams.includes(param.param),
         value: formValues[param.param] || "",
@@ -4932,13 +4976,13 @@ var SmsOtp = ({
     /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
       Button_default,
       {
+        fullWidth: true,
         type: "submit",
+        color: "primary",
+        variant: "solid",
         disabled: isLoading,
         loading: isLoading,
         className: buttonClassName,
-        color: "primary",
-        variant: "solid",
-        fullWidth: true,
         style: { marginBottom: `calc(${theme.vars.spacing.unit} * 2)` },
         children: t("sms.otp.submit.button")
       }
@@ -4947,33 +4991,24 @@ var SmsOtp = ({
 };
 var SmsOtp_default = SmsOtp;
 
-// src/components/presentation/SignIn/options/SocialButton.tsx
+// src/components/presentation/options/SocialButton.tsx
 var import_jsx_runtime42 = require("react/jsx-runtime");
 var SocialLogin = ({
-  authenticator,
   isLoading,
-  onSubmit,
-  buttonClassName = "",
-  preferences
+  preferences,
+  children,
+  ...rest
 }) => {
   const { t } = useTranslation_default(preferences?.i18n);
-  const getDisplayName = () => {
-    const providerName = authenticator.idp;
-    return t("elements.buttons.social", { connection: providerName });
-  };
-  const handleClick = () => {
-    onSubmit(authenticator);
-  };
   return /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
     Button_default,
     {
+      ...rest,
+      fullWidth: true,
       type: "button",
-      variant: "outline",
       color: "secondary",
-      fullWidth: true,
+      variant: "outline",
       disabled: isLoading,
-      onClick: handleClick,
-      className: buttonClassName,
       startIcon: /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("svg", { width: "18", height: "18", viewBox: "0 0 24 24", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
         "path",
         {
@@ -4981,14 +5016,14 @@ var SocialLogin = ({
           d: "M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"
         }
       ) }),
-      children: getDisplayName()
+      children: t("elements.buttons.social", { connection: children })
     }
   );
 };
 var SocialButton_default = SocialLogin;
 
 // src/components/presentation/SignIn/options/MultiOptionButton.tsx
-var import_browser38 = require("@asgardeo/browser");
+var import_browser39 = require("@asgardeo/browser");
 var import_jsx_runtime43 = require("react/jsx-runtime");
 var MultiOptionButton = ({
   authenticator,
@@ -5000,7 +5035,7 @@ var MultiOptionButton = ({
   const { t } = useTranslation_default(preferences?.i18n);
   const getDisplayName = () => {
     let authenticatorName = authenticator.authenticator;
-    if (authenticator.idp !== import_browser38.EmbeddedSignInFlowAuthenticatorKnownIdPType.Local) {
+    if (authenticator.idp !== import_browser39.EmbeddedSignInFlowAuthenticatorKnownIdPType.Local) {
       authenticatorName = authenticator.idp;
     }
     switch (authenticatorName) {
@@ -5011,7 +5046,7 @@ var MultiOptionButton = ({
   const getIcon = () => {
     const authenticatorId = authenticator.authenticatorId;
     switch (authenticatorId) {
-      case import_browser38.ApplicationNativeAuthenticationConstants.SupportedAuthenticators.SmsOtp:
+      case import_browser39.ApplicationNativeAuthenticationConstants.SupportedAuthenticators.SmsOtp:
         return /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("svg", { width: "18", height: "18", viewBox: "0 0 24 24", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
           "path",
           {
@@ -5019,7 +5054,7 @@ var MultiOptionButton = ({
             d: "M20 15.5c-1.25 0-2.45-.2-3.57-.57a1.02 1.02 0 0 0-1.02.24l-2.2 2.2a15.074 15.074 0 0 1-6.59-6.59l2.2-2.2c.27-.27.35-.67.24-1.02A11.36 11.36 0 0 1 8.5 4c0-.55-.45-1-1-1H4c-.55 0-1 .45-1 1 0 9.39 7.61 17 17 17 .55 0 1-.45 1-1v-3.5c0-.55-.45-1-1-1M12 3v10l3-3h6V3z"
           }
         ) });
-      case import_browser38.ApplicationNativeAuthenticationConstants.SupportedAuthenticators.EmailOtp:
+      case import_browser39.ApplicationNativeAuthenticationConstants.SupportedAuthenticators.EmailOtp:
         return /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("svg", { width: "18", height: "18", viewBox: "0 0 24 24", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
           "path",
           {
@@ -5027,9 +5062,9 @@ var MultiOptionButton = ({
             d: "M20 4H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2m0 4l-8 5l-8-5V6l8 5l8-5z"
           }
         ) });
-      case import_browser38.ApplicationNativeAuthenticationConstants.SupportedAuthenticators.Totp:
+      case import_browser39.ApplicationNativeAuthenticationConstants.SupportedAuthenticators.Totp:
         return /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("svg", { width: "18", height: "18", viewBox: "0 0 24 24", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("path", { fill: "currentColor", d: "M12 1L3 5v6c0 5.55 3.84 10.74 9 12c5.16-1.26 9-6.45 9-12V5z" }) });
-      case import_browser38.ApplicationNativeAuthenticationConstants.SupportedAuthenticators.PushNotification:
+      case import_browser39.ApplicationNativeAuthenticationConstants.SupportedAuthenticators.PushNotification:
         return /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("svg", { width: "18", height: "18", viewBox: "0 0 24 24", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
           "path",
           {
@@ -5037,7 +5072,7 @@ var MultiOptionButton = ({
             d: "M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10s10-4.48 10-10S17.52 2 12 2m0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8s8 3.59 8 8s-3.59 8-8 8m1-13h-2v6h2zm0 8h-2v2h2z"
           }
         ) });
-      case import_browser38.ApplicationNativeAuthenticationConstants.SupportedAuthenticators.Passkey:
+      case import_browser39.ApplicationNativeAuthenticationConstants.SupportedAuthenticators.Passkey:
         return /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)("svg", { fill: "currentColor", width: "18", height: "18", viewBox: "0 0 32 32", xmlns: "http://www.w3.org/2000/svg", children: [
           /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("g", { id: "SVGRepo_bgCarrier", strokeWidth: "0" }),
           /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("g", { id: "SVGRepo_tracerCarrier", "stroke-linecap": "round", "stroke-linejoin": "round" }),
@@ -5046,7 +5081,7 @@ var MultiOptionButton = ({
             " "
           ] })
         ] });
-      case import_browser38.ApplicationNativeAuthenticationConstants.SupportedAuthenticators.MagicLink:
+      case import_browser39.ApplicationNativeAuthenticationConstants.SupportedAuthenticators.MagicLink:
         return /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("svg", { width: "18", height: "18", viewBox: "0 0 24 24", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
           "path",
           {
@@ -5070,10 +5105,10 @@ var MultiOptionButton = ({
   return /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
     Button_default,
     {
-      type: "button",
-      variant: "outline",
-      color: "primary",
       fullWidth: true,
+      type: "button",
+      color: "secondary",
+      variant: "solid",
       disabled: isLoading,
       onClick: handleClick,
       className: buttonClassName,
@@ -5086,40 +5121,109 @@ var MultiOptionButton_default = MultiOptionButton;
 
 // src/components/presentation/SignIn/options/SignInOptionFactory.tsx
 var import_jsx_runtime44 = require("react/jsx-runtime");
-var createSignInOption = (props) => {
-  const { authenticator, ...optionProps } = props;
+var createSignInOption = ({
+  authenticator,
+  onSubmit,
+  buttonClassName,
+  preferences,
+  ...rest
+}) => {
   const hasParams = authenticator.metadata?.params && authenticator.metadata.params.length > 0;
   switch (authenticator.authenticatorId) {
-    case import_browser39.ApplicationNativeAuthenticationConstants.SupportedAuthenticators.UsernamePassword:
-      return /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(UsernamePassword_default, { ...props });
-    case import_browser39.ApplicationNativeAuthenticationConstants.SupportedAuthenticators.IdentifierFirst:
-      return /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(IdentifierFirst_default, { ...props });
-    case import_browser39.ApplicationNativeAuthenticationConstants.SupportedAuthenticators.Google:
-      return /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(GoogleButton_default, { ...props });
-    case import_browser39.ApplicationNativeAuthenticationConstants.SupportedAuthenticators.GitHub:
-      return /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(GitHubButton_default, { ...props });
-    case import_browser39.ApplicationNativeAuthenticationConstants.SupportedAuthenticators.Microsoft:
-      return /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(MicrosoftButton_default, { ...props });
-    case import_browser39.ApplicationNativeAuthenticationConstants.SupportedAuthenticators.Facebook:
-      return /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(FacebookButton_default, { ...props });
-    case import_browser39.ApplicationNativeAuthenticationConstants.SupportedAuthenticators.LinkedIn:
-      return /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(LinkedInButton_default, { ...props });
-    case import_browser39.ApplicationNativeAuthenticationConstants.SupportedAuthenticators.SignInWithEthereum:
-      return /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(SignInWithEthereumButton_default, { ...props });
-    case import_browser39.ApplicationNativeAuthenticationConstants.SupportedAuthenticators.EmailOtp:
-      return hasParams ? /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(EmailOtp_default, { ...props }) : /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(MultiOptionButton_default, { ...props });
-    case import_browser39.ApplicationNativeAuthenticationConstants.SupportedAuthenticators.Totp:
-      return hasParams ? /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(Totp_default, { ...props }) : /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(MultiOptionButton_default, { ...props });
-    case import_browser39.ApplicationNativeAuthenticationConstants.SupportedAuthenticators.SmsOtp:
-      return hasParams ? /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(SmsOtp_default, { ...props }) : /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(MultiOptionButton_default, { ...props });
+    case import_browser40.ApplicationNativeAuthenticationConstants.SupportedAuthenticators.UsernamePassword:
+      return /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(UsernamePassword_default, { authenticator, preferences, onSubmit, ...rest });
+    case import_browser40.ApplicationNativeAuthenticationConstants.SupportedAuthenticators.IdentifierFirst:
+      return /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(IdentifierFirst_default, { authenticator, preferences, onSubmit, ...rest });
+    case import_browser40.ApplicationNativeAuthenticationConstants.SupportedAuthenticators.Google:
+      return /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
+        GoogleButton_default,
+        {
+          className: buttonClassName,
+          onClick: () => onSubmit(authenticator),
+          authenticator,
+          preferences,
+          ...rest
+        }
+      );
+    case import_browser40.ApplicationNativeAuthenticationConstants.SupportedAuthenticators.GitHub:
+      return /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
+        GitHubButton_default,
+        {
+          authenticator,
+          preferences,
+          className: buttonClassName,
+          onClick: () => onSubmit(authenticator),
+          ...rest
+        }
+      );
+    case import_browser40.ApplicationNativeAuthenticationConstants.SupportedAuthenticators.Microsoft:
+      return /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
+        MicrosoftButton_default,
+        {
+          authenticator,
+          preferences,
+          className: buttonClassName,
+          onClick: () => onSubmit(authenticator),
+          ...rest
+        }
+      );
+    case import_browser40.ApplicationNativeAuthenticationConstants.SupportedAuthenticators.Facebook:
+      return /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
+        FacebookButton_default,
+        {
+          authenticator,
+          preferences,
+          className: buttonClassName,
+          onClick: () => onSubmit(authenticator),
+          ...rest
+        }
+      );
+    case import_browser40.ApplicationNativeAuthenticationConstants.SupportedAuthenticators.LinkedIn:
+      return /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
+        LinkedInButton_default,
+        {
+          authenticator,
+          preferences,
+          className: buttonClassName,
+          onClick: () => onSubmit(authenticator),
+          ...rest
+        }
+      );
+    case import_browser40.ApplicationNativeAuthenticationConstants.SupportedAuthenticators.SignInWithEthereum:
+      return /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
+        SignInWithEthereumButton_default,
+        {
+          authenticator,
+          preferences,
+          className: buttonClassName,
+          onClick: () => onSubmit(authenticator),
+          ...rest
+        }
+      );
+    case import_browser40.ApplicationNativeAuthenticationConstants.SupportedAuthenticators.EmailOtp:
+      return hasParams ? /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(EmailOtp_default, { authenticator, preferences, onSubmit, ...rest }) : /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(MultiOptionButton_default, { authenticator, preferences, onSubmit, ...rest });
+    case import_browser40.ApplicationNativeAuthenticationConstants.SupportedAuthenticators.Totp:
+      return hasParams ? /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(Totp_default, { authenticator, preferences, onSubmit, ...rest }) : /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(MultiOptionButton_default, { authenticator, preferences, onSubmit, ...rest });
+    case import_browser40.ApplicationNativeAuthenticationConstants.SupportedAuthenticators.SmsOtp:
+      return hasParams ? /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(SmsOtp_default, { authenticator, preferences, onSubmit, ...rest }) : /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(MultiOptionButton_default, { authenticator, preferences, onSubmit, ...rest });
     default:
-      if (authenticator.idp !== import_browser39.EmbeddedSignInFlowAuthenticatorKnownIdPType.Local) {
-        return /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(SocialButton_default, { ...props });
+      if (authenticator.idp !== import_browser40.EmbeddedSignInFlowAuthenticatorKnownIdPType.Local) {
+        return /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
+          SocialButton_default,
+          {
+            authenticator,
+            preferences,
+            className: buttonClassName,
+            onClick: () => onSubmit(authenticator),
+            ...rest,
+            children: authenticator.idp
+          }
+        );
       }
       if (hasParams) {
-        return /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(UsernamePassword_default, { ...props });
+        return /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(UsernamePassword_default, { authenticator, preferences, onSubmit, ...rest });
       } else {
-        return /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(MultiOptionButton_default, { ...props });
+        return /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(MultiOptionButton_default, { authenticator, preferences, onSubmit, ...rest });
       }
   }
 };
@@ -5137,7 +5241,7 @@ var createSignInOptionFromAuthenticator = (authenticator, formValues, touchedFie
 
 // src/components/primitives/Alert/Alert.tsx
 var import_react50 = require("react");
-var import_browser40 = require("@asgardeo/browser");
+var import_browser41 = require("@asgardeo/browser");
 var import_css27 = require("@emotion/css");
 
 // src/components/primitives/Icons/CircleCheck.tsx
@@ -5338,16 +5442,16 @@ var Alert = (0, import_react50.forwardRef)(
         role: "alert",
         style,
         className: (0, import_css27.cx)(
-          (0, import_browser40.withVendorCSSClassPrefix)((0, import_browser40.bem)("alert")),
+          (0, import_browser41.withVendorCSSClassPrefix)((0, import_browser41.bem)("alert")),
           styles.alert,
           styles.variant,
-          (0, import_browser40.withVendorCSSClassPrefix)((0, import_browser40.bem)("alert", null, variant)),
+          (0, import_browser41.withVendorCSSClassPrefix)((0, import_browser41.bem)("alert", null, variant)),
           className
         ),
         ...rest,
         children: [
-          showIcon && /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("div", { className: (0, import_css27.cx)((0, import_browser40.withVendorCSSClassPrefix)((0, import_browser40.bem)("alert", "icon")), styles.icon), children: /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(IconComponent, {}) }),
-          /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("div", { className: (0, import_css27.cx)((0, import_browser40.withVendorCSSClassPrefix)((0, import_browser40.bem)("alert", "content")), styles.content), children })
+          showIcon && /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("div", { className: (0, import_css27.cx)((0, import_browser41.withVendorCSSClassPrefix)((0, import_browser41.bem)("alert", "icon")), styles.icon), children: /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(IconComponent, {}) }),
+          /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("div", { className: (0, import_css27.cx)((0, import_browser41.withVendorCSSClassPrefix)((0, import_browser41.bem)("alert", "content")), styles.content), children })
         ]
       }
     ) });
@@ -5365,7 +5469,7 @@ var AlertTitle = (0, import_react50.forwardRef)(({ children, className, style, .
       variant: "h6",
       fontWeight: 600,
       style,
-      className: (0, import_css27.cx)((0, import_browser40.withVendorCSSClassPrefix)((0, import_browser40.bem)("alert", "title")), styles.title, className),
+      className: (0, import_css27.cx)((0, import_browser41.withVendorCSSClassPrefix)((0, import_browser41.bem)("alert", "title")), styles.title, className),
       ...filteredRest,
       children
     }
@@ -5383,7 +5487,7 @@ var AlertDescription = (0, import_react50.forwardRef)(
         component: "p",
         variant: "body2",
         style,
-        className: (0, import_css27.cx)((0, import_browser40.withVendorCSSClassPrefix)((0, import_browser40.bem)("alert", "description")), styles.description, className),
+        className: (0, import_css27.cx)((0, import_browser41.withVendorCSSClassPrefix)((0, import_browser41.bem)("alert", "description")), styles.description, className),
         ...filteredRest,
         children
       }
@@ -5398,7 +5502,7 @@ Alert.Description = AlertDescription;
 var Alert_default = Alert;
 
 // src/components/primitives/Card/Card.tsx
-var import_browser41 = require("@asgardeo/browser");
+var import_browser42 = require("@asgardeo/browser");
 var import_css29 = require("@emotion/css");
 var import_react52 = require("react");
 
@@ -5493,13 +5597,13 @@ var Card = (0, import_react52.forwardRef)(
         ref,
         style,
         className: (0, import_css29.cx)(
-          (0, import_browser41.withVendorCSSClassPrefix)((0, import_browser41.bem)("card")),
+          (0, import_browser42.withVendorCSSClassPrefix)((0, import_browser42.bem)("card")),
           styles.card,
           styles.variant,
           styles.clickable,
-          (0, import_browser41.withVendorCSSClassPrefix)((0, import_browser41.bem)("card", null, variant)),
+          (0, import_browser42.withVendorCSSClassPrefix)((0, import_browser42.bem)("card", null, variant)),
           {
-            [(0, import_browser41.withVendorCSSClassPrefix)((0, import_browser41.bem)("card", null, "clickable"))]: clickable
+            [(0, import_browser42.withVendorCSSClassPrefix)((0, import_browser42.bem)("card", null, "clickable"))]: clickable
           },
           className
         ),
@@ -5517,7 +5621,7 @@ var CardHeader = (0, import_react52.forwardRef)(({ children, className, style, .
     {
       ref,
       style,
-      className: (0, import_css29.cx)((0, import_browser41.withVendorCSSClassPrefix)((0, import_browser41.bem)("card", "header")), styles.header, className),
+      className: (0, import_css29.cx)((0, import_browser42.withVendorCSSClassPrefix)((0, import_browser42.bem)("card", "header")), styles.header, className),
       ...rest,
       children
     }
@@ -5570,7 +5674,7 @@ var CardTitle = (0, import_react52.forwardRef)(
         component: getComponentFromLevel(level),
         variant: getVariantFromLevel(level),
         style,
-        className: (0, import_css29.cx)((0, import_browser41.withVendorCSSClassPrefix)((0, import_browser41.bem)("card", "title")), styles.title, className),
+        className: (0, import_css29.cx)((0, import_browser42.withVendorCSSClassPrefix)((0, import_browser42.bem)("card", "title")), styles.title, className),
         fontWeight: 600,
         ...filteredRest,
         children
@@ -5590,7 +5694,7 @@ var CardDescription = (0, import_react52.forwardRef)(
         variant: "body2",
         color: "textSecondary",
         style,
-        className: (0, import_css29.cx)((0, import_browser41.withVendorCSSClassPrefix)((0, import_browser41.bem)("card", "description")), styles.description, className),
+        className: (0, import_css29.cx)((0, import_browser42.withVendorCSSClassPrefix)((0, import_browser42.bem)("card", "description")), styles.description, className),
         ...filteredRest,
         children
       }
@@ -5605,7 +5709,7 @@ var CardAction = (0, import_react52.forwardRef)(({ children, className, style, .
     {
       ref,
       style,
-      className: (0, import_css29.cx)((0, import_browser41.withVendorCSSClassPrefix)((0, import_browser41.bem)("card", "action")), styles.action, className),
+      className: (0, import_css29.cx)((0, import_browser42.withVendorCSSClassPrefix)((0, import_browser42.bem)("card", "action")), styles.action, className),
       ...rest,
       children
     }
@@ -5619,7 +5723,7 @@ var CardContent = (0, import_react52.forwardRef)(({ children, className, style,
     {
       ref,
       style,
-      className: (0, import_css29.cx)((0, import_browser41.withVendorCSSClassPrefix)((0, import_browser41.bem)("card", "content")), styles.content, className),
+      className: (0, import_css29.cx)((0, import_browser42.withVendorCSSClassPrefix)((0, import_browser42.bem)("card", "content")), styles.content, className),
       ...rest,
       children
     }
@@ -5633,7 +5737,7 @@ var CardFooter = (0, import_react52.forwardRef)(({ children, className, style, .
     {
       ref,
       style,
-      className: (0, import_css29.cx)((0, import_browser41.withVendorCSSClassPrefix)((0, import_browser41.bem)("card", "footer")), styles.footer, className),
+      className: (0, import_css29.cx)((0, import_browser42.withVendorCSSClassPrefix)((0, import_browser42.bem)("card", "footer")), styles.footer, className),
       ...rest,
       children
     }
@@ -5655,7 +5759,7 @@ Card.Footer = CardFooter;
 var Card_default = Card;
 
 // src/components/primitives/Divider/Divider.tsx
-var import_browser42 = require("@asgardeo/browser");
+var import_browser43 = require("@asgardeo/browser");
 var import_css31 = require("@emotion/css");
 
 // src/components/primitives/Divider/Divider.styles.ts
@@ -5724,8 +5828,8 @@ var Divider = ({
       "div",
       {
         className: (0, import_css31.cx)(
-          (0, import_browser42.withVendorCSSClassPrefix)((0, import_browser42.bem)("divider")),
-          (0, import_browser42.withVendorCSSClassPrefix)((0, import_browser42.bem)("divider", "vertical")),
+          (0, import_browser43.withVendorCSSClassPrefix)((0, import_browser43.bem)("divider")),
+          (0, import_browser43.withVendorCSSClassPrefix)((0, import_browser43.bem)("divider", "vertical")),
           styles.divider,
           styles.vertical,
           className
@@ -5742,9 +5846,9 @@ var Divider = ({
       "div",
       {
         className: (0, import_css31.cx)(
-          (0, import_browser42.withVendorCSSClassPrefix)((0, import_browser42.bem)("divider")),
-          (0, import_browser42.withVendorCSSClassPrefix)((0, import_browser42.bem)("divider", "horizontal")),
-          (0, import_browser42.withVendorCSSClassPrefix)((0, import_browser42.bem)("divider", "with-text")),
+          (0, import_browser43.withVendorCSSClassPrefix)((0, import_browser43.bem)("divider")),
+          (0, import_browser43.withVendorCSSClassPrefix)((0, import_browser43.bem)("divider", "horizontal")),
+          (0, import_browser43.withVendorCSSClassPrefix)((0, import_browser43.bem)("divider", "with-text")),
           styles.divider,
           styles.horizontal,
           className
@@ -5754,18 +5858,18 @@ var Divider = ({
         "aria-orientation": "horizontal",
         ...rest,
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime51.jsx)("div", { className: (0, import_css31.cx)((0, import_browser42.withVendorCSSClassPrefix)((0, import_browser42.bem)("divider", "line")), styles.line) }),
+          /* @__PURE__ */ (0, import_jsx_runtime51.jsx)("div", { className: (0, import_css31.cx)((0, import_browser43.withVendorCSSClassPrefix)((0, import_browser43.bem)("divider", "line")), styles.line) }),
           /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
             Typography_default,
             {
               variant: "body2",
               color: "textSecondary",
-              className: (0, import_css31.cx)((0, import_browser42.withVendorCSSClassPrefix)((0, import_browser42.bem)("divider", "text")), styles.text),
+              className: (0, import_css31.cx)((0, import_browser43.withVendorCSSClassPrefix)((0, import_browser43.bem)("divider", "text")), styles.text),
               inline: true,
               children
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime51.jsx)("div", { className: (0, import_css31.cx)((0, import_browser42.withVendorCSSClassPrefix)((0, import_browser42.bem)("divider", "line")), styles.line) })
+          /* @__PURE__ */ (0, import_jsx_runtime51.jsx)("div", { className: (0, import_css31.cx)((0, import_browser43.withVendorCSSClassPrefix)((0, import_browser43.bem)("divider", "line")), styles.line) })
         ]
       }
     );
@@ -5774,8 +5878,8 @@ var Divider = ({
     "div",
     {
       className: (0, import_css31.cx)(
-        (0, import_browser42.withVendorCSSClassPrefix)((0, import_browser42.bem)("divider")),
-        (0, import_browser42.withVendorCSSClassPrefix)((0, import_browser42.bem)("divider", "horizontal")),
+        (0, import_browser43.withVendorCSSClassPrefix)((0, import_browser43.bem)("divider")),
+        (0, import_browser43.withVendorCSSClassPrefix)((0, import_browser43.bem)("divider", "horizontal")),
         styles.divider,
         styles.horizontal,
         className
@@ -5791,7 +5895,7 @@ var Divider_default = Divider;
 
 // src/components/primitives/Logo/Logo.tsx
 var import_css33 = require("@emotion/css");
-var import_browser43 = require("@asgardeo/browser");
+var import_browser44 = require("@asgardeo/browser");
 
 // src/components/primitives/Logo/Logo.styles.ts
 var import_css32 = require("@emotion/css");
@@ -5850,8 +5954,8 @@ var Logo = ({ className, src, alt, title, size = "medium" }) => {
       alt: logoAlt,
       title: logoTitle,
       className: (0, import_css33.cx)(
-        (0, import_browser43.withVendorCSSClassPrefix)((0, import_browser43.bem)("logo")),
-        (0, import_browser43.withVendorCSSClassPrefix)((0, import_browser43.bem)("logo", size)),
+        (0, import_browser44.withVendorCSSClassPrefix)((0, import_browser44.bem)("logo")),
+        (0, import_browser44.withVendorCSSClassPrefix)((0, import_browser44.bem)("logo", size)),
         styles.logo,
         styles.size,
         className
@@ -6117,7 +6221,7 @@ var handleWebAuthnAuthentication = async (challengeData) => {
     throw new Error(`Passkey authentication failed: ${error instanceof Error ? error.message : "Unknown error"}`);
   }
 };
-var isPasskeyAuthenticator = (authenticator) => authenticator.authenticatorId === import_browser44.ApplicationNativeAuthenticationConstants.SupportedAuthenticators.Passkey && authenticator.metadata?.promptType === import_browser44.EmbeddedSignInFlowAuthenticatorPromptType.InternalPrompt && authenticator.metadata?.additionalData?.challengeData;
+var isPasskeyAuthenticator = (authenticator) => authenticator.authenticatorId === import_browser45.ApplicationNativeAuthenticationConstants.SupportedAuthenticators.Passkey && authenticator.metadata?.promptType === import_browser45.EmbeddedSignInFlowAuthenticatorPromptType.InternalPrompt && authenticator.metadata?.additionalData?.challengeData;
 var BaseSignIn = (props) => {
   const { theme } = useTheme_default();
   const styles = BaseSignIn_styles_default(theme, theme.vars.colors.text.primary);
@@ -6203,9 +6307,9 @@ var BaseSignInContent = ({
     touchAllFields();
   };
   const handleRedirectionIfNeeded = (response) => {
-    if (response && "nextStep" in response && response.nextStep && response.nextStep.stepType === import_browser44.EmbeddedSignInFlowStepType.AuthenticatorPrompt && response.nextStep.authenticators && response.nextStep.authenticators.length === 1) {
+    if (response && "nextStep" in response && response.nextStep && response.nextStep.stepType === import_browser45.EmbeddedSignInFlowStepType.AuthenticatorPrompt && response.nextStep.authenticators && response.nextStep.authenticators.length === 1) {
       const responseAuthenticator = response.nextStep.authenticators[0];
-      if (responseAuthenticator.metadata?.promptType === import_browser44.EmbeddedSignInFlowAuthenticatorPromptType.RedirectionPrompt && responseAuthenticator.metadata?.additionalData?.redirectUrl) {
+      if (responseAuthenticator.metadata?.promptType === import_browser45.EmbeddedSignInFlowAuthenticatorPromptType.RedirectionPrompt && responseAuthenticator.metadata?.additionalData?.redirectUrl) {
         const redirectUrl = responseAuthenticator.metadata?.additionalData?.redirectUrl;
         const popup = window.open(redirectUrl, "oauth_popup", "width=500,height=600,scrollbars=yes,resizable=yes");
         if (!popup) {
@@ -6291,7 +6395,7 @@ var BaseSignInContent = ({
                   });
                   popup.close();
                   onFlowChange?.(response2);
-                  if (response2?.flowStatus === import_browser44.EmbeddedSignInFlowStatus.SuccessCompleted) {
+                  if (response2?.flowStatus === import_browser45.EmbeddedSignInFlowStatus.SuccessCompleted) {
                     onSuccess?.(response2.authData);
                   }
                 }
@@ -6332,11 +6436,11 @@ var BaseSignInContent = ({
         url: currentFlow?.links[0].href
       });
       onFlowChange?.(response);
-      if (response?.flowStatus === import_browser44.EmbeddedSignInFlowStatus.SuccessCompleted) {
+      if (response?.flowStatus === import_browser45.EmbeddedSignInFlowStatus.SuccessCompleted) {
         onSuccess?.(response.authData);
         return;
       }
-      if (response?.flowStatus === import_browser44.EmbeddedSignInFlowStatus.FailCompleted || response?.flowStatus === import_browser44.EmbeddedSignInFlowStatus.FailIncomplete) {
+      if (response?.flowStatus === import_browser45.EmbeddedSignInFlowStatus.FailCompleted || response?.flowStatus === import_browser45.EmbeddedSignInFlowStatus.FailIncomplete) {
         setError(t("errors.sign.in.flow.completion.failure"));
         return;
       }
@@ -6347,7 +6451,7 @@ var BaseSignInContent = ({
         const nextStepResponse = response;
         setCurrentFlow(nextStepResponse);
         if (nextStepResponse.nextStep?.authenticators?.length > 0) {
-          if (nextStepResponse.nextStep.stepType === import_browser44.EmbeddedSignInFlowStepType.MultiOptionsPrompt && nextStepResponse.nextStep.authenticators.length > 1) {
+          if (nextStepResponse.nextStep.stepType === import_browser45.EmbeddedSignInFlowStepType.MultiOptionsPrompt && nextStepResponse.nextStep.authenticators.length > 1) {
             setCurrentAuthenticator(null);
           } else {
             const nextAuthenticator = nextStepResponse.nextStep.authenticators[0];
@@ -6365,7 +6469,7 @@ var BaseSignInContent = ({
         }
       }
     } catch (err) {
-      const errorMessage = err instanceof import_browser44.AsgardeoAPIError ? err.message : t("errors.sign.in.flow.failure");
+      const errorMessage = err instanceof import_browser45.AsgardeoAPIError ? err.message : t("errors.sign.in.flow.failure");
       setError(errorMessage);
       onError?.(err);
     } finally {
@@ -6404,11 +6508,11 @@ var BaseSignInContent = ({
             url: currentFlow?.links[0].href
           });
           onFlowChange?.(response);
-          if (response?.flowStatus === import_browser44.EmbeddedSignInFlowStatus.SuccessCompleted) {
+          if (response?.flowStatus === import_browser45.EmbeddedSignInFlowStatus.SuccessCompleted) {
             onSuccess?.(response.authData);
             return;
           }
-          if (response?.flowStatus === import_browser44.EmbeddedSignInFlowStatus.FailCompleted || response?.flowStatus === import_browser44.EmbeddedSignInFlowStatus.FailIncomplete) {
+          if (response?.flowStatus === import_browser45.EmbeddedSignInFlowStatus.FailCompleted || response?.flowStatus === import_browser45.EmbeddedSignInFlowStatus.FailIncomplete) {
             setError(t("errors.sign.in.flow.passkeys.completion.failure"));
             return;
           }
@@ -6416,7 +6520,7 @@ var BaseSignInContent = ({
             const nextStepResponse = response;
             setCurrentFlow(nextStepResponse);
             if (nextStepResponse.nextStep?.authenticators?.length > 0) {
-              if (nextStepResponse.nextStep.stepType === import_browser44.EmbeddedSignInFlowStepType.MultiOptionsPrompt && nextStepResponse.nextStep.authenticators.length > 1) {
+              if (nextStepResponse.nextStep.stepType === import_browser45.EmbeddedSignInFlowStepType.MultiOptionsPrompt && nextStepResponse.nextStep.authenticators.length > 1) {
                 setCurrentAuthenticator(null);
               } else {
                 const nextAuthenticator = nextStepResponse.nextStep.authenticators[0];
@@ -6445,7 +6549,7 @@ var BaseSignInContent = ({
           }
           setError(errorMessage);
         }
-      } else if (authenticator.metadata?.promptType === import_browser44.EmbeddedSignInFlowAuthenticatorPromptType.RedirectionPrompt) {
+      } else if (authenticator.metadata?.promptType === import_browser45.EmbeddedSignInFlowAuthenticatorPromptType.RedirectionPrompt) {
         const payload = {
           flowId: currentFlow.flowId,
           selectedAuthenticator: {
@@ -6458,7 +6562,7 @@ var BaseSignInContent = ({
           url: currentFlow?.links[0].href
         });
         onFlowChange?.(response);
-        if (response?.flowStatus === import_browser44.EmbeddedSignInFlowStatus.SuccessCompleted) {
+        if (response?.flowStatus === import_browser45.EmbeddedSignInFlowStatus.SuccessCompleted) {
           onSuccess?.(response.authData);
           return;
         }
@@ -6481,11 +6585,11 @@ var BaseSignInContent = ({
           url: currentFlow?.links[0].href
         });
         onFlowChange?.(response);
-        if (response?.flowStatus === import_browser44.EmbeddedSignInFlowStatus.SuccessCompleted) {
+        if (response?.flowStatus === import_browser45.EmbeddedSignInFlowStatus.SuccessCompleted) {
           onSuccess?.(response.authData);
           return;
         }
-        if (response?.flowStatus === import_browser44.EmbeddedSignInFlowStatus.FailCompleted || response?.flowStatus === import_browser44.EmbeddedSignInFlowStatus.FailIncomplete) {
+        if (response?.flowStatus === import_browser45.EmbeddedSignInFlowStatus.FailCompleted || response?.flowStatus === import_browser45.EmbeddedSignInFlowStatus.FailIncomplete) {
           setError("Authentication failed. Please check your credentials and try again.");
           return;
         }
@@ -6496,7 +6600,7 @@ var BaseSignInContent = ({
           const nextStepResponse = response;
           setCurrentFlow(nextStepResponse);
           if (nextStepResponse.nextStep?.authenticators?.length > 0) {
-            if (nextStepResponse.nextStep.stepType === import_browser44.EmbeddedSignInFlowStepType.MultiOptionsPrompt && nextStepResponse.nextStep.authenticators.length > 1) {
+            if (nextStepResponse.nextStep.stepType === import_browser45.EmbeddedSignInFlowStepType.MultiOptionsPrompt && nextStepResponse.nextStep.authenticators.length > 1) {
               setCurrentAuthenticator(null);
             } else {
               const nextAuthenticator = nextStepResponse.nextStep.authenticators[0];
@@ -6532,11 +6636,11 @@ var BaseSignInContent = ({
             url: currentFlow?.links[0].href
           });
           onFlowChange?.(response);
-          if (response?.flowStatus === import_browser44.EmbeddedSignInFlowStatus.SuccessCompleted) {
+          if (response?.flowStatus === import_browser45.EmbeddedSignInFlowStatus.SuccessCompleted) {
             onSuccess?.(response.authData);
             return;
           }
-          if (response?.flowStatus === import_browser44.EmbeddedSignInFlowStatus.FailCompleted || response?.flowStatus === import_browser44.EmbeddedSignInFlowStatus.FailIncomplete) {
+          if (response?.flowStatus === import_browser45.EmbeddedSignInFlowStatus.FailCompleted || response?.flowStatus === import_browser45.EmbeddedSignInFlowStatus.FailIncomplete) {
             setError("Authentication failed. Please try again.");
             return;
           }
@@ -6547,7 +6651,7 @@ var BaseSignInContent = ({
             const nextStepResponse = response;
             setCurrentFlow(nextStepResponse);
             if (nextStepResponse.nextStep?.authenticators?.length > 0) {
-              if (nextStepResponse.nextStep.stepType === import_browser44.EmbeddedSignInFlowStepType.MultiOptionsPrompt && nextStepResponse.nextStep.authenticators.length > 1) {
+              if (nextStepResponse.nextStep.stepType === import_browser45.EmbeddedSignInFlowStepType.MultiOptionsPrompt && nextStepResponse.nextStep.authenticators.length > 1) {
                 setCurrentAuthenticator(null);
               } else {
                 const nextAuthenticator = nextStepResponse.nextStep.authenticators[0];
@@ -6574,7 +6678,7 @@ var BaseSignInContent = ({
         }
       }
     } catch (err) {
-      const errorMessage = err instanceof import_browser44.AsgardeoAPIError ? err?.message : "Authenticator selection failed";
+      const errorMessage = err instanceof import_browser45.AsgardeoAPIError ? err?.message : "Authenticator selection failed";
       setError(errorMessage);
       onError?.(err);
     } finally {
@@ -6586,7 +6690,7 @@ var BaseSignInContent = ({
     setFormTouched(param, true);
   };
   const hasMultipleOptions = (0, import_react56.useCallback)(
-    () => currentFlow && "nextStep" in currentFlow && currentFlow.nextStep?.stepType === import_browser44.EmbeddedSignInFlowStepType.MultiOptionsPrompt && currentFlow.nextStep?.authenticators && currentFlow.nextStep.authenticators.length > 1,
+    () => currentFlow && "nextStep" in currentFlow && currentFlow.nextStep?.stepType === import_browser45.EmbeddedSignInFlowStepType.MultiOptionsPrompt && currentFlow.nextStep?.authenticators && currentFlow.nextStep.authenticators.length > 1,
     [currentFlow]
   );
   const getAvailableAuthenticators = (0, import_react56.useCallback)(() => {
@@ -6597,30 +6701,30 @@ var BaseSignInContent = ({
   }, [currentFlow]);
   const containerClasses = (0, import_css35.cx)(
     [
-      (0, import_browser44.withVendorCSSClassPrefix)("signin"),
-      (0, import_browser44.withVendorCSSClassPrefix)(`signin--${size}`),
-      (0, import_browser44.withVendorCSSClassPrefix)(`signin--${variant}`)
+      (0, import_browser45.withVendorCSSClassPrefix)("signin"),
+      (0, import_browser45.withVendorCSSClassPrefix)(`signin--${size}`),
+      (0, import_browser45.withVendorCSSClassPrefix)(`signin--${variant}`)
     ],
     className
   );
   const inputClasses = (0, import_css35.cx)(
     [
-      (0, import_browser44.withVendorCSSClassPrefix)("signin__input"),
-      size === "small" && (0, import_browser44.withVendorCSSClassPrefix)("signin__input--small"),
-      size === "large" && (0, import_browser44.withVendorCSSClassPrefix)("signin__input--large")
+      (0, import_browser45.withVendorCSSClassPrefix)("signin__input"),
+      size === "small" && (0, import_browser45.withVendorCSSClassPrefix)("signin__input--small"),
+      size === "large" && (0, import_browser45.withVendorCSSClassPrefix)("signin__input--large")
     ],
     inputClassName
   );
   const buttonClasses = (0, import_css35.cx)(
     [
-      (0, import_browser44.withVendorCSSClassPrefix)("signin__button"),
-      size === "small" && (0, import_browser44.withVendorCSSClassPrefix)("signin__button--small"),
-      size === "large" && (0, import_browser44.withVendorCSSClassPrefix)("signin__button--large")
+      (0, import_browser45.withVendorCSSClassPrefix)("signin__button"),
+      size === "small" && (0, import_browser45.withVendorCSSClassPrefix)("signin__button--small"),
+      size === "large" && (0, import_browser45.withVendorCSSClassPrefix)("signin__button--large")
     ],
     buttonClassName
   );
-  const errorClasses = (0, import_css35.cx)([(0, import_browser44.withVendorCSSClassPrefix)("signin__error")], errorClassName);
-  const messageClasses = (0, import_css35.cx)([(0, import_browser44.withVendorCSSClassPrefix)("signin__messages")], messageClassName);
+  const errorClasses = (0, import_css35.cx)([(0, import_browser45.withVendorCSSClassPrefix)("signin__error")], errorClassName);
+  const messageClasses = (0, import_css35.cx)([(0, import_browser45.withVendorCSSClassPrefix)("signin__messages")], messageClassName);
   (0, import_react56.useEffect)(() => {
     if (isLoading) {
       return;
@@ -6637,12 +6741,12 @@ var BaseSignInContent = ({
         setCurrentFlow(response);
         setIsInitialized(true);
         onFlowChange?.(response);
-        if (response?.flowStatus === import_browser44.EmbeddedSignInFlowStatus.SuccessCompleted) {
+        if (response?.flowStatus === import_browser45.EmbeddedSignInFlowStatus.SuccessCompleted) {
           onSuccess?.(response.authData || {});
           return;
         }
         if (response?.nextStep?.authenticators?.length > 0) {
-          if (response.nextStep.stepType === import_browser44.EmbeddedSignInFlowStepType.MultiOptionsPrompt && response.nextStep.authenticators.length > 1) {
+          if (response.nextStep.stepType === import_browser45.EmbeddedSignInFlowStepType.MultiOptionsPrompt && response.nextStep.authenticators.length > 1) {
             setCurrentAuthenticator(null);
           } else {
             const authenticator = response.nextStep.authenticators[0];
@@ -6660,7 +6764,7 @@ var BaseSignInContent = ({
           );
         }
       } catch (err) {
-        const errorMessage = err instanceof import_browser44.AsgardeoAPIError ? err.message : t("errors.sign.in.initialization");
+        const errorMessage = err instanceof import_browser45.AsgardeoAPIError ? err.message : t("errors.sign.in.initialization");
         setError(errorMessage);
         onError?.(err);
       } finally {
@@ -6677,7 +6781,7 @@ var BaseSignInContent = ({
   if (hasMultipleOptions() && !currentAuthenticator) {
     const availableAuthenticators = getAvailableAuthenticators();
     const userPromptAuthenticators = availableAuthenticators.filter(
-      (auth) => auth.metadata?.promptType === import_browser44.EmbeddedSignInFlowAuthenticatorPromptType.UserPrompt || // Fallback: LOCAL authenticators with params are typically user prompts
+      (auth) => auth.metadata?.promptType === import_browser45.EmbeddedSignInFlowAuthenticatorPromptType.UserPrompt || // Fallback: LOCAL authenticators with params are typically user prompts
       auth.idp === "LOCAL" && auth.metadata?.params && auth.metadata.params.length > 0
     );
     const optionAuthenticators = availableAuthenticators.filter((auth) => !userPromptAuthenticators.includes(auth)).filter((authenticator) => !HIDDEN_AUTHENTICATORS.includes(authenticator.authenticatorId));
@@ -6862,15 +6966,15 @@ var SignIn = ({ className, size = "medium", ...rest }) => {
 var SignIn_default = SignIn;
 
 // src/components/presentation/SignUp/BaseSignUp.tsx
-var import_browser52 = require("@asgardeo/browser");
+var import_browser53 = require("@asgardeo/browser");
 var import_css37 = require("@emotion/css");
 var import_react58 = require("react");
 
 // src/components/presentation/SignUp/options/SignUpOptionFactory.tsx
-var import_browser51 = require("@asgardeo/browser");
+var import_browser52 = require("@asgardeo/browser");
 
 // src/components/presentation/SignUp/options/CheckboxInput.tsx
-var import_browser45 = require("@asgardeo/browser");
+var import_browser46 = require("@asgardeo/browser");
 var CheckboxInput = ({
   component,
   formValues,
@@ -6884,7 +6988,7 @@ var CheckboxInput = ({
   const value = formValues[fieldName] || "";
   const error = touchedFields[fieldName] ? formErrors[fieldName] : void 0;
   return createField({
-    type: import_browser45.FieldType.Checkbox,
+    type: import_browser46.FieldType.Checkbox,
     name: fieldName,
     label: config["label"] || "",
     placeholder: config["placeholder"] || "",
@@ -6898,7 +7002,7 @@ var CheckboxInput = ({
 var CheckboxInput_default = CheckboxInput;
 
 // src/components/presentation/SignUp/options/DateInput.tsx
-var import_browser46 = require("@asgardeo/browser");
+var import_browser47 = require("@asgardeo/browser");
 var DateInput = ({
   component,
   formValues,
@@ -6912,7 +7016,7 @@ var DateInput = ({
   const value = formValues[fieldName] || "";
   const error = touchedFields[fieldName] ? formErrors[fieldName] : void 0;
   return createField({
-    type: import_browser46.FieldType.Date,
+    type: import_browser47.FieldType.Date,
     name: fieldName,
     label: config["label"] || "",
     placeholder: config["placeholder"] || "",
@@ -6945,7 +7049,7 @@ var DividerComponent = ({ component }) => {
 var DividerComponent_default = DividerComponent;
 
 // src/components/presentation/SignUp/options/EmailInput.tsx
-var import_browser47 = require("@asgardeo/browser");
+var import_browser48 = require("@asgardeo/browser");
 var EmailInput = ({
   component,
   formValues,
@@ -6959,7 +7063,7 @@ var EmailInput = ({
   const value = formValues[fieldName] || "";
   const error = touchedFields[fieldName] ? formErrors[fieldName] : void 0;
   return createField({
-    type: import_browser47.FieldType.Email,
+    type: import_browser48.FieldType.Email,
     name: fieldName,
     label: config["label"] || "Email",
     placeholder: config["placeholder"] || "Enter your email",
@@ -6997,75 +7101,8 @@ var FormContainer = (props) => {
 };
 var FormContainer_default = FormContainer;
 
-// src/components/presentation/SignUp/options/GoogleButton.tsx
-var import_jsx_runtime57 = require("react/jsx-runtime");
-var GoogleButton2 = ({
-  component,
-  isLoading,
-  buttonClassName = "",
-  size = "medium",
-  onSubmit
-}) => {
-  const config = component.config || {};
-  const buttonText = config["text"] || config["label"] || "Continue with Google";
-  const handleClick = () => {
-    if (onSubmit) {
-      onSubmit(component, {});
-    }
-  };
-  return /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(
-    Button_default,
-    {
-      type: "button",
-      variant: "solid",
-      color: "secondary",
-      size,
-      disabled: isLoading,
-      onClick: handleClick,
-      className: buttonClassName,
-      style: { width: "100%" },
-      startIcon: /* @__PURE__ */ (0, import_jsx_runtime57.jsx)("svg", { width: "18", height: "18", viewBox: "0 0 67.91 67.901", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)("g", { transform: "translate(-0.001 -0.001)", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(
-          "path",
-          {
-            d: "M15.049,160.965l-2.364,8.824-8.639.183a34.011,34.011,0,0,1-.25-31.7h0l7.691,1.41,3.369,7.645a20.262,20.262,0,0,0,.19,13.642Z",
-            transform: "translate(0 -119.93)",
-            fill: "#fbbb00"
-          }
-        ),
-        /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(
-          "path",
-          {
-            d: "M294.24,208.176A33.939,33.939,0,0,1,282.137,241h0l-9.687-.494-1.371-8.559a20.235,20.235,0,0,0,8.706-10.333H261.628V208.176Z",
-            transform: "translate(-226.93 -180.567)",
-            fill: "#518ef8"
-          }
-        ),
-        /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(
-          "path",
-          {
-            d: "M81.668,328.8h0a33.962,33.962,0,0,1-51.161-10.387l11-9.006a20.192,20.192,0,0,0,29.1,10.338Z",
-            transform: "translate(-26.463 -268.374)",
-            fill: "#28b446"
-          }
-        ),
-        /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(
-          "path",
-          {
-            d: "M80.451,7.816l-11,9A20.19,20.19,0,0,0,39.686,27.393l-11.06-9.055h0A33.959,33.959,0,0,1,80.451,7.816Z",
-            transform: "translate(-24.828)",
-            fill: "#f14336"
-          }
-        )
-      ] }) }),
-      children: buttonText
-    }
-  );
-};
-var GoogleButton_default2 = GoogleButton2;
-
 // src/components/presentation/SignUp/options/ImageComponent.tsx
-var import_jsx_runtime58 = require("react/jsx-runtime");
+var import_jsx_runtime57 = require("react/jsx-runtime");
 var ImageComponent = ({ component }) => {
   const { theme } = useTheme_default();
   const config = component.config || {};
@@ -7082,7 +7119,7 @@ var ImageComponent = ({ component }) => {
   if (!src) {
     return null;
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime58.jsx)("div", { style: { textAlign: "center" }, children: /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime57.jsx)("div", { style: { textAlign: "center" }, children: /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(
     "img",
     {
       src,
@@ -7097,7 +7134,7 @@ var ImageComponent = ({ component }) => {
 var ImageComponent_default = ImageComponent;
 
 // src/components/presentation/SignUp/options/NumberInput.tsx
-var import_browser48 = require("@asgardeo/browser");
+var import_browser49 = require("@asgardeo/browser");
 var NumberInput = ({
   component,
   formValues,
@@ -7111,7 +7148,7 @@ var NumberInput = ({
   const value = formValues[fieldName] || "";
   const error = touchedFields[fieldName] ? formErrors[fieldName] : void 0;
   return createField({
-    type: import_browser48.FieldType.Number,
+    type: import_browser49.FieldType.Number,
     name: fieldName,
     label: config["label"] || "",
     placeholder: config["placeholder"] || "",
@@ -7125,7 +7162,7 @@ var NumberInput = ({
 var NumberInput_default = NumberInput;
 
 // src/components/presentation/SignUp/options/PasswordInput.tsx
-var import_browser49 = require("@asgardeo/browser");
+var import_browser50 = require("@asgardeo/browser");
 var PasswordInput = ({
   component,
   formValues,
@@ -7171,7 +7208,7 @@ var PasswordInput = ({
   });
   const hint = validationHints.length > 0 ? validationHints.join(", ") : config["hint"] || "";
   return createField({
-    type: import_browser49.FieldType.Password,
+    type: import_browser50.FieldType.Password,
     name: fieldName,
     label: config["label"] || "Password",
     placeholder: config["placeholder"] || "Enter your password",
@@ -7185,7 +7222,7 @@ var PasswordInput = ({
 var PasswordInput_default = PasswordInput;
 
 // src/components/presentation/SignUp/options/SubmitButton.tsx
-var import_jsx_runtime59 = require("react/jsx-runtime");
+var import_jsx_runtime58 = require("react/jsx-runtime");
 var ButtonComponent = ({
   component,
   isLoading,
@@ -7218,7 +7255,7 @@ var ButtonComponent = ({
       onSubmit(component);
     }
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(
     Button_default,
     {
       type: buttonType === "submit" ? "submit" : "button",
@@ -7229,7 +7266,7 @@ var ButtonComponent = ({
       onClick: buttonType !== "submit" ? handleClick : void 0,
       className: buttonClassName,
       style: { width: "100%" },
-      children: isLoading ? /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(Spinner_default, { size: "small" }) : buttonText
+      children: isLoading ? /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(Spinner_default, { size: "small" }) : buttonText
     },
     component.id
   );
@@ -7237,7 +7274,7 @@ var ButtonComponent = ({
 var SubmitButton_default = ButtonComponent;
 
 // src/components/presentation/SignUp/options/TelephoneInput.tsx
-var import_jsx_runtime60 = require("react/jsx-runtime");
+var import_jsx_runtime59 = require("react/jsx-runtime");
 var TelephoneInput = ({
   component,
   formValues,
@@ -7250,7 +7287,7 @@ var TelephoneInput = ({
   const fieldName = config["identifier"] || config["name"] || component.id;
   const value = formValues[fieldName] || "";
   const error = touchedFields[fieldName] ? formErrors[fieldName] : void 0;
-  return /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(
     TextField_default,
     {
       name: fieldName,
@@ -7270,7 +7307,7 @@ var TelephoneInput = ({
 var TelephoneInput_default = TelephoneInput;
 
 // src/components/presentation/SignUp/options/TextInput.tsx
-var import_browser50 = require("@asgardeo/browser");
+var import_browser51 = require("@asgardeo/browser");
 var TextInput = ({
   component,
   formValues,
@@ -7284,7 +7321,7 @@ var TextInput = ({
   const value = formValues[fieldName] || "";
   const error = touchedFields[fieldName] ? formErrors[fieldName] : void 0;
   return createField({
-    type: import_browser50.FieldType.Text,
+    type: import_browser51.FieldType.Text,
     name: fieldName,
     label: config["label"] || "",
     placeholder: config["placeholder"] || "",
@@ -7298,7 +7335,7 @@ var TextInput = ({
 var TextInput_default = TextInput;
 
 // src/components/presentation/SignUp/options/Typography.tsx
-var import_jsx_runtime61 = require("react/jsx-runtime");
+var import_jsx_runtime60 = require("react/jsx-runtime");
 var TypographyComponent = ({ component }) => {
   const { theme } = useTheme_default();
   const config = component.config || {};
@@ -7339,7 +7376,7 @@ var TypographyComponent = ({ component }) => {
     default:
       typographyVariant = "body1";
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(
     Typography_default,
     {
       variant: typographyVariant,
@@ -7352,50 +7389,66 @@ var TypographyComponent = ({ component }) => {
 var Typography_default2 = TypographyComponent;
 
 // src/components/presentation/SignUp/options/SignUpOptionFactory.tsx
-var import_jsx_runtime62 = require("react/jsx-runtime");
-var createSignUpComponent = (props) => {
-  const { component } = props;
+var import_jsx_runtime61 = require("react/jsx-runtime");
+var createSignUpComponent = ({ component, onSubmit, ...rest }) => {
   switch (component.type) {
-    case import_browser51.EmbeddedFlowComponentType.Typography:
-      return /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(Typography_default2, { ...props });
-    case import_browser51.EmbeddedFlowComponentType.Input:
+    case import_browser52.EmbeddedFlowComponentType.Typography:
+      return /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(Typography_default2, { component, onSubmit, ...rest });
+    case import_browser52.EmbeddedFlowComponentType.Input:
       const inputVariant = component.variant?.toUpperCase();
       const inputType = component.config["type"]?.toLowerCase();
       if (inputVariant === "EMAIL" || inputType === "email") {
-        return /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(EmailInput_default, { ...props });
+        return /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(EmailInput_default, { component, onSubmit, ...rest });
       }
       if (inputVariant === "PASSWORD" || inputType === "password") {
-        return /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(PasswordInput_default, { ...props });
+        return /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(PasswordInput_default, { component, onSubmit, ...rest });
       }
       if (inputVariant === "TELEPHONE" || inputType === "tel") {
-        return /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(TelephoneInput_default, { ...props });
+        return /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(TelephoneInput_default, { component, onSubmit, ...rest });
       }
       if (inputVariant === "NUMBER" || inputType === "number") {
-        return /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(NumberInput_default, { ...props });
+        return /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(NumberInput_default, { component, onSubmit, ...rest });
       }
       if (inputVariant === "DATE" || inputType === "date") {
-        return /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(DateInput_default, { ...props });
+        return /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(DateInput_default, { component, onSubmit, ...rest });
       }
       if (inputVariant === "CHECKBOX" || inputType === "checkbox") {
-        return /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(CheckboxInput_default, { ...props });
+        return /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(CheckboxInput_default, { component, onSubmit, ...rest });
       }
-      return /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(TextInput_default, { ...props });
-    case import_browser51.EmbeddedFlowComponentType.Button: {
+      return /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(TextInput_default, { component, onSubmit, ...rest });
+    case import_browser52.EmbeddedFlowComponentType.Button: {
       const buttonVariant = component.variant?.toUpperCase();
       const buttonText = component.config["text"] || component.config["label"] || "";
-      if (buttonVariant === "SOCIAL" && buttonText.toLowerCase().includes("google")) {
-        return /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(GoogleButton_default2, { ...props });
+      if (buttonVariant === "SOCIAL") {
+        if (buttonText.toLowerCase().includes("google")) {
+          return /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(GoogleButton_default, { onClick: () => onSubmit(component, {}), ...rest, children: buttonText });
+        }
+        if (buttonText.toLowerCase().includes("github")) {
+          return /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(GitHubButton_default, { onClick: () => onSubmit(component, {}), ...rest, children: buttonText });
+        }
+        if (buttonText.toLowerCase().includes("microsoft")) {
+          return /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(MicrosoftButton_default, { onClick: () => onSubmit(component, {}), ...rest, children: buttonText });
+        }
+        if (buttonText.toLowerCase().includes("facebook")) {
+          return /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(FacebookButton_default, { onClick: () => onSubmit(component, {}), ...rest, children: buttonText });
+        }
+        if (buttonText.toLowerCase().includes("linkedin")) {
+          return /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(LinkedInButton_default, { onClick: () => onSubmit(component, {}), ...rest, children: buttonText });
+        }
+        if (buttonText.toLowerCase().includes("ethereum")) {
+          return /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(SignInWithEthereumButton_default, { onClick: () => onSubmit(component, {}), ...rest, children: buttonText });
+        }
       }
-      return /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(SubmitButton_default, { ...props });
+      return /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(SubmitButton_default, { component, onSubmit, ...rest });
     }
-    case import_browser51.EmbeddedFlowComponentType.Form:
-      return /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(FormContainer_default, { ...props });
-    case import_browser51.EmbeddedFlowComponentType.Divider:
-      return /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(DividerComponent_default, { ...props });
-    case import_browser51.EmbeddedFlowComponentType.Image:
-      return /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(ImageComponent_default, { ...props });
+    case import_browser52.EmbeddedFlowComponentType.Form:
+      return /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(FormContainer_default, { component, onSubmit, ...rest });
+    case import_browser52.EmbeddedFlowComponentType.Divider:
+      return /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(DividerComponent_default, { component, onSubmit, ...rest });
+    case import_browser52.EmbeddedFlowComponentType.Image:
+      return /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(ImageComponent_default, { component, onSubmit, ...rest });
     default:
-      return /* @__PURE__ */ (0, import_jsx_runtime62.jsx)("div", {});
+      return /* @__PURE__ */ (0, import_jsx_runtime61.jsx)("div", {});
   }
 };
 var createSignUpOptionFromComponent = (component, formValues, touchedFields, formErrors, isLoading, isFormValid, onInputChange, options) => createSignUpComponent({
@@ -7567,13 +7620,13 @@ var useStyles17 = (theme, colorScheme) => {
 var BaseSignUp_styles_default = useStyles17;
 
 // src/components/presentation/SignUp/BaseSignUp.tsx
-var import_jsx_runtime63 = require("react/jsx-runtime");
+var import_jsx_runtime62 = require("react/jsx-runtime");
 var BaseSignUp = (props) => {
   const { theme, colorScheme } = useTheme_default();
   const styles = BaseSignUp_styles_default(theme, colorScheme);
-  return /* @__PURE__ */ (0, import_jsx_runtime63.jsxs)("div", { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime63.jsx)("div", { className: styles.logoContainer, children: /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(Logo_default, { size: "large" }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(FlowProvider_default, { children: /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(BaseSignUpContent, { ...props }) })
+  return /* @__PURE__ */ (0, import_jsx_runtime62.jsxs)("div", { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime62.jsx)("div", { className: styles.logoContainer, children: /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(Logo_default, { size: "large" }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(FlowProvider_default, { children: /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(BaseSignUpContent, { ...props }) })
   ] });
 };
 var BaseSignUpContent = ({
@@ -7607,7 +7660,7 @@ var BaseSignUpContent = ({
       const fields = [];
       const processComponents = (comps) => {
         comps.forEach((component) => {
-          if (component.type === import_browser52.EmbeddedFlowComponentType.Input) {
+          if (component.type === import_browser53.EmbeddedFlowComponentType.Input) {
             const config = component.config || {};
             fields.push({
               name: config.name || component.id,
@@ -7699,11 +7752,11 @@ var BaseSignUpContent = ({
       };
       const response = await onSubmit(payload);
       onFlowChange?.(response);
-      if (response.flowStatus === import_browser52.EmbeddedFlowStatus.Complete) {
+      if (response.flowStatus === import_browser53.EmbeddedFlowStatus.Complete) {
         onComplete?.(response);
         return;
       }
-      if (response.flowStatus === import_browser52.EmbeddedFlowStatus.Incomplete) {
+      if (response.flowStatus === import_browser53.EmbeddedFlowStatus.Incomplete) {
         if (handleRedirectionIfNeeded(response, component)) {
           return;
         }
@@ -7711,7 +7764,7 @@ var BaseSignUpContent = ({
         setupFormFields(response);
       }
     } catch (err) {
-      const errorMessage = err instanceof import_browser52.AsgardeoAPIError ? err.message : t("errors.sign.up.flow.failure");
+      const errorMessage = err instanceof import_browser53.AsgardeoAPIError ? err.message : t("errors.sign.up.flow.failure");
       setError(errorMessage);
       onError?.(err);
     } finally {
@@ -7719,7 +7772,7 @@ var BaseSignUpContent = ({
     }
   };
   const handleRedirectionIfNeeded = (response, component) => {
-    if (response?.type === import_browser52.EmbeddedFlowResponseType.Redirection && response?.data?.redirectURL) {
+    if (response?.type === import_browser53.EmbeddedFlowResponseType.Redirection && response?.data?.redirectURL) {
       const redirectUrl = response.data.redirectURL;
       const popup = window.open(redirectUrl, "oauth_popup", "width=500,height=600,scrollbars=yes,resizable=yes");
       if (!popup) {
@@ -7748,16 +7801,16 @@ var BaseSignUpContent = ({
           try {
             const continueResponse = await onSubmit(payload);
             onFlowChange?.(continueResponse);
-            if (continueResponse.flowStatus === import_browser52.EmbeddedFlowStatus.Complete) {
+            if (continueResponse.flowStatus === import_browser53.EmbeddedFlowStatus.Complete) {
               onComplete?.(continueResponse);
-            } else if (continueResponse.flowStatus === import_browser52.EmbeddedFlowStatus.Incomplete) {
+            } else if (continueResponse.flowStatus === import_browser53.EmbeddedFlowStatus.Incomplete) {
               setCurrentFlow(continueResponse);
               setupFormFields(continueResponse);
             }
             popup.close();
             cleanup();
           } catch (err) {
-            const errorMessage = err instanceof import_browser52.AsgardeoAPIError ? err.message : t("errors.sign.up.flow.failure");
+            const errorMessage = err instanceof import_browser53.AsgardeoAPIError ? err.message : t("errors.sign.up.flow.failure");
             setError(errorMessage);
             onError?.(err);
             popup.close();
@@ -7809,15 +7862,15 @@ var BaseSignUpContent = ({
                 try {
                   const continueResponse = await onSubmit(payload);
                   onFlowChange?.(continueResponse);
-                  if (continueResponse.flowStatus === import_browser52.EmbeddedFlowStatus.Complete) {
+                  if (continueResponse.flowStatus === import_browser53.EmbeddedFlowStatus.Complete) {
                     onComplete?.(continueResponse);
-                  } else if (continueResponse.flowStatus === import_browser52.EmbeddedFlowStatus.Incomplete) {
+                  } else if (continueResponse.flowStatus === import_browser53.EmbeddedFlowStatus.Incomplete) {
                     setCurrentFlow(continueResponse);
                     setupFormFields(continueResponse);
                   }
                   popup.close();
                 } catch (err) {
-                  const errorMessage = err instanceof import_browser52.AsgardeoAPIError ? err.message : t("errors.sign.up.flow.failure");
+                  const errorMessage = err instanceof import_browser53.AsgardeoAPIError ? err.message : t("errors.sign.up.flow.failure");
                   setError(errorMessage);
                   onError?.(err);
                   popup.close();
@@ -7836,30 +7889,30 @@ var BaseSignUpContent = ({
   };
   const containerClasses = (0, import_css37.cx)(
     [
-      (0, import_browser52.withVendorCSSClassPrefix)("signup"),
-      (0, import_browser52.withVendorCSSClassPrefix)(`signup--${size}`),
-      (0, import_browser52.withVendorCSSClassPrefix)(`signup--${variant}`)
+      (0, import_browser53.withVendorCSSClassPrefix)("signup"),
+      (0, import_browser53.withVendorCSSClassPrefix)(`signup--${size}`),
+      (0, import_browser53.withVendorCSSClassPrefix)(`signup--${variant}`)
     ],
     className
   );
   const inputClasses = (0, import_css37.cx)(
     [
-      (0, import_browser52.withVendorCSSClassPrefix)("signup__input"),
-      size === "small" && (0, import_browser52.withVendorCSSClassPrefix)("signup__input--small"),
-      size === "large" && (0, import_browser52.withVendorCSSClassPrefix)("signup__input--large")
+      (0, import_browser53.withVendorCSSClassPrefix)("signup__input"),
+      size === "small" && (0, import_browser53.withVendorCSSClassPrefix)("signup__input--small"),
+      size === "large" && (0, import_browser53.withVendorCSSClassPrefix)("signup__input--large")
     ],
     inputClassName
   );
   const buttonClasses = (0, import_css37.cx)(
     [
-      (0, import_browser52.withVendorCSSClassPrefix)("signup__button"),
-      size === "small" && (0, import_browser52.withVendorCSSClassPrefix)("signup__button--small"),
-      size === "large" && (0, import_browser52.withVendorCSSClassPrefix)("signup__button--large")
+      (0, import_browser53.withVendorCSSClassPrefix)("signup__button"),
+      size === "small" && (0, import_browser53.withVendorCSSClassPrefix)("signup__button--small"),
+      size === "large" && (0, import_browser53.withVendorCSSClassPrefix)("signup__button--large")
     ],
     buttonClassName
   );
-  const errorClasses = (0, import_css37.cx)([(0, import_browser52.withVendorCSSClassPrefix)("signup__error")], errorClassName);
-  const messageClasses = (0, import_css37.cx)([(0, import_browser52.withVendorCSSClassPrefix)("signup__messages")], messageClassName);
+  const errorClasses = (0, import_css37.cx)([(0, import_browser53.withVendorCSSClassPrefix)("signup__error")], errorClassName);
+  const messageClasses = (0, import_css37.cx)([(0, import_browser53.withVendorCSSClassPrefix)("signup__messages")], messageClassName);
   const renderComponents = (0, import_react58.useCallback)(
     (components) => renderSignUpComponents(
       components,
@@ -7903,11 +7956,11 @@ var BaseSignUpContent = ({
           setCurrentFlow(response);
           setIsFlowInitialized(true);
           onFlowChange?.(response);
-          if (response.flowStatus === import_browser52.EmbeddedFlowStatus.Complete) {
+          if (response.flowStatus === import_browser53.EmbeddedFlowStatus.Complete) {
             onComplete?.(response);
             return;
           }
-          if (response.flowStatus === import_browser52.EmbeddedFlowStatus.Incomplete) {
+          if (response.flowStatus === import_browser53.EmbeddedFlowStatus.Incomplete) {
             setupFormFields(response);
           }
         } catch (err) {
@@ -7931,38 +7984,38 @@ var BaseSignUpContent = ({
     t
   ]);
   if (!isFlowInitialized && isLoading) {
-    return /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(Card_default, { className: (0, import_css37.cx)(containerClasses, styles.card), variant, children: /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(Card_default.Content, { children: /* @__PURE__ */ (0, import_jsx_runtime63.jsx)("div", { className: styles.loadingContainer, children: /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(Spinner_default, { size: "medium" }) }) }) });
+    return /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(Card_default, { className: (0, import_css37.cx)(containerClasses, styles.card), variant, children: /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(Card_default.Content, { children: /* @__PURE__ */ (0, import_jsx_runtime62.jsx)("div", { className: styles.loadingContainer, children: /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(Spinner_default, { size: "medium" }) }) }) });
   }
   if (!currentFlow) {
-    return /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(Card_default, { className: (0, import_css37.cx)(containerClasses, styles.card), variant, children: /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(Card_default.Content, { children: /* @__PURE__ */ (0, import_jsx_runtime63.jsxs)(Alert_default, { variant: "error", className: errorClasses, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(Alert_default.Title, { children: t("errors.title") || "Error" }),
-      /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(Alert_default.Description, { children: error || t("errors.sign.up.flow.initialization.failure") })
+    return /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(Card_default, { className: (0, import_css37.cx)(containerClasses, styles.card), variant, children: /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(Card_default.Content, { children: /* @__PURE__ */ (0, import_jsx_runtime62.jsxs)(Alert_default, { variant: "error", className: errorClasses, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(Alert_default.Title, { children: t("errors.title") || "Error" }),
+      /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(Alert_default.Description, { children: error || t("errors.sign.up.flow.initialization.failure") })
     ] }) }) });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime63.jsxs)(Card_default, { className: (0, import_css37.cx)(containerClasses, styles.card), variant, children: [
-    flowMessages && flowMessages.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(Card_default.Header, { className: styles.header, children: /* @__PURE__ */ (0, import_jsx_runtime63.jsx)("div", { className: styles.messagesContainer, children: flowMessages.map((message, index) => /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime62.jsxs)(Card_default, { className: (0, import_css37.cx)(containerClasses, styles.card), variant, children: [
+    flowMessages && flowMessages.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(Card_default.Header, { className: styles.header, children: /* @__PURE__ */ (0, import_jsx_runtime62.jsx)("div", { className: styles.messagesContainer, children: flowMessages.map((message, index) => /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(
       Alert_default,
       {
         variant: message.type?.toLowerCase() === "error" ? "error" : "info",
         className: (0, import_css37.cx)(styles.messageItem, messageClasses),
-        children: /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(Alert_default.Description, { children: message.message })
+        children: /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(Alert_default.Description, { children: message.message })
       },
       message.id || index
     )) }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime63.jsxs)(Card_default.Content, { children: [
-      error && /* @__PURE__ */ (0, import_jsx_runtime63.jsxs)(Alert_default, { variant: "error", className: (0, import_css37.cx)(styles.errorContainer, errorClasses), children: [
-        /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(Alert_default.Title, { children: t("errors.title") || "Error" }),
-        /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(Alert_default.Description, { children: error })
+    /* @__PURE__ */ (0, import_jsx_runtime62.jsxs)(Card_default.Content, { children: [
+      error && /* @__PURE__ */ (0, import_jsx_runtime62.jsxs)(Alert_default, { variant: "error", className: (0, import_css37.cx)(styles.errorContainer, errorClasses), children: [
+        /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(Alert_default.Title, { children: t("errors.title") || "Error" }),
+        /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(Alert_default.Description, { children: error })
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime63.jsx)("div", { className: styles.contentContainer, children: currentFlow.data?.components && renderComponents(currentFlow.data.components) })
+      /* @__PURE__ */ (0, import_jsx_runtime62.jsx)("div", { className: styles.contentContainer, children: currentFlow.data?.components && renderComponents(currentFlow.data.components) })
     ] })
   ] });
 };
 var BaseSignUp_default = BaseSignUp;
 
 // src/components/presentation/SignUp/SignUp.tsx
-var import_browser53 = require("@asgardeo/browser");
-var import_jsx_runtime64 = require("react/jsx-runtime");
+var import_browser54 = require("@asgardeo/browser");
+var import_jsx_runtime63 = require("react/jsx-runtime");
 var SignUp = ({
   className,
   size = "medium",
@@ -7975,21 +8028,21 @@ var SignUp = ({
   const { signUp, isInitialized } = useAsgardeo_default();
   const handleInitialize = async (payload) => await signUp(
     payload || {
-      flowType: import_browser53.EmbeddedFlowType.Registration
+      flowType: import_browser54.EmbeddedFlowType.Registration
     }
   );
   const handleOnSubmit = async (payload) => await signUp(payload);
   const handleComplete = (response) => {
     onComplete?.(response);
-    if (shouldRedirectAfterSignUp && response?.type !== import_browser53.EmbeddedFlowResponseType.Redirection && afterSignUpUrl) {
+    if (shouldRedirectAfterSignUp && response?.type !== import_browser54.EmbeddedFlowResponseType.Redirection && afterSignUpUrl) {
       window.location.href = afterSignUpUrl;
     }
-    if (shouldRedirectAfterSignUp && response?.type === import_browser53.EmbeddedFlowResponseType.Redirection && response?.data?.redirectURL && !response.data.redirectURL.includes("oauth") && // Not a social provider redirect
+    if (shouldRedirectAfterSignUp && response?.type === import_browser54.EmbeddedFlowResponseType.Redirection && response?.data?.redirectURL && !response.data.redirectURL.includes("oauth") && // Not a social provider redirect
     !response.data.redirectURL.includes("auth")) {
       window.location.href = response.data.redirectURL;
     }
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(
     BaseSignUp_default,
     {
       afterSignUpUrl,
@@ -8007,75 +8060,75 @@ var SignUp = ({
 var SignUp_default = SignUp;
 
 // src/components/presentation/User/BaseUser.tsx
-var import_jsx_runtime65 = require("react/jsx-runtime");
+var import_jsx_runtime64 = require("react/jsx-runtime");
 var BaseUser = ({ user, children, fallback = null }) => {
   if (!user) {
-    return /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(import_jsx_runtime65.Fragment, { children: fallback });
+    return /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(import_jsx_runtime64.Fragment, { children: fallback });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(import_jsx_runtime65.Fragment, { children: children(user) });
+  return /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(import_jsx_runtime64.Fragment, { children: children(user) });
 };
 BaseUser.displayName = "BaseUser";
 var BaseUser_default = BaseUser;
 
 // src/components/presentation/User/User.tsx
-var import_jsx_runtime66 = require("react/jsx-runtime");
+var import_jsx_runtime65 = require("react/jsx-runtime");
 var User5 = ({ children, fallback = null }) => {
   const { user } = useAsgardeo_default();
-  return /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(BaseUser_default, { user, fallback, children });
+  return /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(BaseUser_default, { user, fallback, children });
 };
 User5.displayName = "User";
 var User_default = User5;
 
 // src/components/presentation/Organization/BaseOrganization.tsx
-var import_jsx_runtime67 = require("react/jsx-runtime");
+var import_jsx_runtime66 = require("react/jsx-runtime");
 var BaseOrganization = ({ children, fallback = null, organization }) => {
   if (!organization) {
-    return /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(import_jsx_runtime67.Fragment, { children: fallback });
+    return /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(import_jsx_runtime66.Fragment, { children: fallback });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(import_jsx_runtime67.Fragment, { children: children(organization) });
+  return /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(import_jsx_runtime66.Fragment, { children: children(organization) });
 };
 BaseOrganization.displayName = "BaseOrganization";
 var BaseOrganization_default = BaseOrganization;
 
 // src/components/presentation/Organization/Organization.tsx
-var import_jsx_runtime68 = require("react/jsx-runtime");
+var import_jsx_runtime67 = require("react/jsx-runtime");
 var Organization5 = ({ children, fallback = null }) => {
   const { currentOrganization } = useOrganization_default();
-  return /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(BaseOrganization_default, { organization: currentOrganization, fallback, children });
+  return /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(BaseOrganization_default, { organization: currentOrganization, fallback, children });
 };
 Organization5.displayName = "Organization";
 var Organization_default = Organization5;
 
 // src/components/presentation/UserProfile/BaseUserProfile.tsx
-var import_browser59 = require("@asgardeo/browser");
+var import_browser60 = require("@asgardeo/browser");
 var import_css45 = require("@emotion/css");
 var import_react67 = require("react");
 
 // src/utils/getMappedUserProfileValue.ts
-var import_browser54 = require("@asgardeo/browser");
+var import_browser55 = require("@asgardeo/browser");
 var getMappedUserProfileValue = (key, mappings, user) => {
   if (!key || !mappings || !user) {
     return void 0;
   }
   const mapping = mappings[key];
   if (!mapping) {
-    return (0, import_browser54.get)(user, key);
+    return (0, import_browser55.get)(user, key);
   }
   if (Array.isArray(mapping)) {
     for (const path of mapping) {
-      const value = (0, import_browser54.get)(user, path);
+      const value = (0, import_browser55.get)(user, path);
       if (value !== void 0 && value !== null && value !== "") {
         return value;
       }
     }
     return void 0;
   }
-  return (0, import_browser54.get)(user, mapping);
+  return (0, import_browser55.get)(user, mapping);
 };
 var getMappedUserProfileValue_default = getMappedUserProfileValue;
 
 // src/components/primitives/Avatar/Avatar.tsx
-var import_browser55 = require("@asgardeo/browser");
+var import_browser56 = require("@asgardeo/browser");
 var import_css39 = require("@emotion/css");
 var import_react60 = require("react");
 
@@ -8129,18 +8182,25 @@ var useStyles18 = (theme, colorScheme, size, variant, backgroundColor) => {
         }
       }
     `;
+    const iconStyles = import_css38.css`
+      width: 60%;
+      height: 60%;
+      fill: ${backgroundColor ? "#ffffff" : theme.vars.colors.text.secondary};
+      opacity: 0.8;
+    `;
     return {
       avatar: baseAvatar,
       variant: variantStyles[variant],
       image: imageStyles,
-      skeleton: skeletonStyles
+      skeleton: skeletonStyles,
+      icon: iconStyles
     };
   }, [theme, colorScheme, size, variant, backgroundColor]);
 };
 var Avatar_styles_default = useStyles18;
 
 // src/components/primitives/Avatar/Avatar.tsx
-var import_jsx_runtime69 = require("react/jsx-runtime");
+var import_jsx_runtime68 = require("react/jsx-runtime");
 var Avatar = ({
   alt = "User avatar",
   background = "random",
@@ -8148,7 +8208,8 @@ var Avatar = ({
   imageUrl,
   name,
   size = 64,
-  variant = "circular"
+  variant = "circular",
+  isLoading = false
 }) => {
   const { theme, colorScheme } = useTheme_default();
   const generateBackgroundColor = (inputString) => {
@@ -8182,24 +8243,37 @@ var Avatar = ({
     return background;
   }, [background, name, imageUrl]);
   const styles = Avatar_styles_default(theme, colorScheme, size, variant, backgroundColor);
+  const isDefaultState = !imageUrl && !name && !isLoading;
   const getInitials = (fullName) => fullName.split(" ").map((part) => part[0]).slice(0, 2).join("").toUpperCase();
   const renderContent = () => {
     if (imageUrl) {
-      return /* @__PURE__ */ (0, import_jsx_runtime69.jsx)("img", { src: imageUrl, alt, className: (0, import_css39.cx)((0, import_browser55.withVendorCSSClassPrefix)((0, import_browser55.bem)("avatar", "image")), styles.image) });
+      return /* @__PURE__ */ (0, import_jsx_runtime68.jsx)("img", { src: imageUrl, alt, className: (0, import_css39.cx)((0, import_browser56.withVendorCSSClassPrefix)((0, import_browser56.bem)("avatar", "image")), styles.image) });
     }
     if (name) {
       return getInitials(name);
     }
-    return /* @__PURE__ */ (0, import_jsx_runtime69.jsx)("div", { className: (0, import_css39.cx)((0, import_browser55.withVendorCSSClassPrefix)((0, import_browser55.bem)("avatar", "skeleton")), styles.skeleton) });
+    if (isLoading) {
+      return /* @__PURE__ */ (0, import_jsx_runtime68.jsx)("div", { className: (0, import_css39.cx)((0, import_browser56.withVendorCSSClassPrefix)((0, import_browser56.bem)("avatar", "skeleton")), styles.skeleton) });
+    }
+    return /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(
+      "svg",
+      {
+        xmlns: "http://www.w3.org/2000/svg",
+        viewBox: "0 0 640 640",
+        className: (0, import_css39.cx)((0, import_browser56.withVendorCSSClassPrefix)((0, import_browser56.bem)("avatar", "icon")), styles.icon),
+        children: /* @__PURE__ */ (0, import_jsx_runtime68.jsx)("path", { d: "M240 192C240 147.8 275.8 112 320 112C364.2 112 400 147.8 400 192C400 236.2 364.2 272 320 272C275.8 272 240 236.2 240 192zM448 192C448 121.3 390.7 64 320 64C249.3 64 192 121.3 192 192C192 262.7 249.3 320 320 320C390.7 320 448 262.7 448 192zM144 544C144 473.3 201.3 416 272 416L368 416C438.7 416 496 473.3 496 544L496 552C496 565.3 506.7 576 520 576C533.3 576 544 565.3 544 552L544 544C544 446.8 465.2 368 368 368L272 368C174.8 368 96 446.8 96 544L96 552C96 565.3 106.7 576 120 576C133.3 576 144 565.3 144 552L144 544z" })
+      }
+    );
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(
     "div",
     {
       className: (0, import_css39.cx)(
-        (0, import_browser55.withVendorCSSClassPrefix)((0, import_browser55.bem)("avatar")),
+        (0, import_browser56.withVendorCSSClassPrefix)((0, import_browser56.bem)("avatar")),
         styles.avatar,
         styles.variant,
-        (0, import_browser55.withVendorCSSClassPrefix)((0, import_browser55.bem)("avatar", null, variant)),
+        (0, import_browser56.withVendorCSSClassPrefix)((0, import_browser56.bem)("avatar", null, variant)),
+        isDefaultState && (0, import_browser56.withVendorCSSClassPrefix)((0, import_browser56.bem)("avatar", "default")),
         className
       ),
       children: renderContent()
@@ -8209,14 +8283,14 @@ var Avatar = ({
 var Avatar_default = Avatar;
 
 // src/components/primitives/Dialog/Dialog.tsx
-var import_browser56 = require("@asgardeo/browser");
+var import_browser57 = require("@asgardeo/browser");
 var import_react62 = require("@floating-ui/react");
 var import_css41 = require("@emotion/css");
 var import_react63 = __toESM(require("react"), 1);
 
 // src/components/primitives/Icons/LogOut.tsx
-var import_jsx_runtime70 = require("react/jsx-runtime");
-var LogOut = (props) => /* @__PURE__ */ (0, import_jsx_runtime70.jsxs)(
+var import_jsx_runtime69 = require("react/jsx-runtime");
+var LogOut = (props) => /* @__PURE__ */ (0, import_jsx_runtime69.jsxs)(
   "svg",
   {
     xmlns: "http://www.w3.org/2000/svg",
@@ -8230,17 +8304,17 @@ var LogOut = (props) => /* @__PURE__ */ (0, import_jsx_runtime70.jsxs)(
     strokeLinejoin: "round",
     ...props,
     children: [
-      /* @__PURE__ */ (0, import_jsx_runtime70.jsx)("path", { d: "m16 17 5-5-5-5" }),
-      /* @__PURE__ */ (0, import_jsx_runtime70.jsx)("path", { d: "M21 12H9" }),
-      /* @__PURE__ */ (0, import_jsx_runtime70.jsx)("path", { d: "M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4" })
+      /* @__PURE__ */ (0, import_jsx_runtime69.jsx)("path", { d: "m16 17 5-5-5-5" }),
+      /* @__PURE__ */ (0, import_jsx_runtime69.jsx)("path", { d: "M21 12H9" }),
+      /* @__PURE__ */ (0, import_jsx_runtime69.jsx)("path", { d: "M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4" })
     ]
   }
 );
 var LogOut_default = LogOut;
 
 // src/components/primitives/Icons/Plus.tsx
-var import_jsx_runtime71 = require("react/jsx-runtime");
-var Plus = (props) => /* @__PURE__ */ (0, import_jsx_runtime71.jsxs)(
+var import_jsx_runtime70 = require("react/jsx-runtime");
+var Plus = (props) => /* @__PURE__ */ (0, import_jsx_runtime70.jsxs)(
   "svg",
   {
     xmlns: "http://www.w3.org/2000/svg",
@@ -8254,16 +8328,16 @@ var Plus = (props) => /* @__PURE__ */ (0, import_jsx_runtime71.jsxs)(
     strokeLinejoin: "round",
     ...props,
     children: [
-      /* @__PURE__ */ (0, import_jsx_runtime71.jsx)("path", { d: "M5 12h14" }),
-      /* @__PURE__ */ (0, import_jsx_runtime71.jsx)("path", { d: "M12 5v14" })
+      /* @__PURE__ */ (0, import_jsx_runtime70.jsx)("path", { d: "M5 12h14" }),
+      /* @__PURE__ */ (0, import_jsx_runtime70.jsx)("path", { d: "M12 5v14" })
     ]
   }
 );
 var Plus_default = Plus;
 
 // src/components/primitives/Icons/User.tsx
-var import_jsx_runtime72 = require("react/jsx-runtime");
-var User7 = (props) => /* @__PURE__ */ (0, import_jsx_runtime72.jsxs)(
+var import_jsx_runtime71 = require("react/jsx-runtime");
+var User7 = (props) => /* @__PURE__ */ (0, import_jsx_runtime71.jsxs)(
   "svg",
   {
     xmlns: "http://www.w3.org/2000/svg",
@@ -8277,16 +8351,16 @@ var User7 = (props) => /* @__PURE__ */ (0, import_jsx_runtime72.jsxs)(
     strokeLinejoin: "round",
     ...props,
     children: [
-      /* @__PURE__ */ (0, import_jsx_runtime72.jsx)("path", { d: "M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2" }),
-      /* @__PURE__ */ (0, import_jsx_runtime72.jsx)("circle", { cx: "12", cy: "7", r: "4" })
+      /* @__PURE__ */ (0, import_jsx_runtime71.jsx)("path", { d: "M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2" }),
+      /* @__PURE__ */ (0, import_jsx_runtime71.jsx)("circle", { cx: "12", cy: "7", r: "4" })
     ]
   }
 );
 var User_default2 = User7;
 
 // src/components/primitives/Icons/X.tsx
-var import_jsx_runtime73 = require("react/jsx-runtime");
-var X = (props) => /* @__PURE__ */ (0, import_jsx_runtime73.jsxs)(
+var import_jsx_runtime72 = require("react/jsx-runtime");
+var X = (props) => /* @__PURE__ */ (0, import_jsx_runtime72.jsxs)(
   "svg",
   {
     xmlns: "http://www.w3.org/2000/svg",
@@ -8300,8 +8374,8 @@ var X = (props) => /* @__PURE__ */ (0, import_jsx_runtime73.jsxs)(
     strokeLinejoin: "round",
     ...props,
     children: [
-      /* @__PURE__ */ (0, import_jsx_runtime73.jsx)("path", { d: "M18 6 6 18" }),
-      /* @__PURE__ */ (0, import_jsx_runtime73.jsx)("path", { d: "m6 6 12 12" })
+      /* @__PURE__ */ (0, import_jsx_runtime72.jsx)("path", { d: "M18 6 6 18" }),
+      /* @__PURE__ */ (0, import_jsx_runtime72.jsx)("path", { d: "m6 6 12 12" })
     ]
   }
 );
@@ -8324,17 +8398,6 @@ var useStyles19 = (theme, colorScheme) => {
       border-radius: ${theme.vars.borderRadius.large};
       box-shadow: 0 2px 8px ${colorScheme === "dark" ? "rgba(0, 0, 0, 0.3)" : "rgba(0, 0, 0, 0.15)"};
       outline: none;
-      max-width: 35vw;
-      min-width: 35vw;
-      @media (max-width: 900px) {
-        max-width: 80vw;
-        min-width: 80vw;
-      }
-      @media (max-width: 600px) {
-        max-width: 95vw;
-        min-width: 95vw;
-      }
-      max-height: 90vh;
       overflow-y: auto;
       z-index: 10000;
     `;
@@ -8384,7 +8447,7 @@ var useStyles19 = (theme, colorScheme) => {
 var Dialog_styles_default = useStyles19;
 
 // src/components/primitives/Dialog/Dialog.tsx
-var import_jsx_runtime74 = require("react/jsx-runtime");
+var import_jsx_runtime73 = require("react/jsx-runtime");
 function useDialog({
   initialOpen = false,
   open: controlledOpen,
@@ -8430,7 +8493,7 @@ var useDialogContext = () => {
 };
 function Dialog({ children, ...options }) {
   const dialog = useDialog(options);
-  return /* @__PURE__ */ (0, import_jsx_runtime74.jsx)(DialogContext.Provider, { value: dialog, children });
+  return /* @__PURE__ */ (0, import_jsx_runtime73.jsx)(DialogContext.Provider, { value: dialog, children });
 }
 var DialogTrigger = import_react63.default.forwardRef(
   ({ children, asChild = false, ...props }, propRef) => {
@@ -8448,7 +8511,7 @@ var DialogTrigger = import_react63.default.forwardRef(
         })
       );
     }
-    return /* @__PURE__ */ (0, import_jsx_runtime74.jsx)("button", { ref, "data-state": context.open ? "open" : "closed", ...context.getReferenceProps(props), children });
+    return /* @__PURE__ */ (0, import_jsx_runtime73.jsx)("button", { ref, "data-state": context.open ? "open" : "closed", ...context.getReferenceProps(props), children });
   }
 );
 var DialogContent = import_react63.default.forwardRef((props, propRef) => {
@@ -8457,11 +8520,11 @@ var DialogContent = import_react63.default.forwardRef((props, propRef) => {
   const styles = Dialog_styles_default(theme, colorScheme);
   const ref = (0, import_react62.useMergeRefs)([context.refs.setFloating, propRef]);
   if (!floatingContext.open) return null;
-  return /* @__PURE__ */ (0, import_jsx_runtime74.jsx)(import_react62.FloatingPortal, { children: /* @__PURE__ */ (0, import_jsx_runtime74.jsx)(import_react62.FloatingOverlay, { className: (0, import_css41.cx)((0, import_browser56.withVendorCSSClassPrefix)((0, import_browser56.bem)("dialog", "overlay")), styles.overlay), lockScroll: true, children: /* @__PURE__ */ (0, import_jsx_runtime74.jsx)(import_react62.FloatingFocusManager, { context: floatingContext, children: /* @__PURE__ */ (0, import_jsx_runtime74.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime73.jsx)(import_react62.FloatingPortal, { children: /* @__PURE__ */ (0, import_jsx_runtime73.jsx)(import_react62.FloatingOverlay, { className: (0, import_css41.cx)((0, import_browser57.withVendorCSSClassPrefix)((0, import_browser57.bem)("dialog", "overlay")), styles.overlay), lockScroll: true, children: /* @__PURE__ */ (0, import_jsx_runtime73.jsx)(import_react62.FloatingFocusManager, { context: floatingContext, initialFocus: -1, children: /* @__PURE__ */ (0, import_jsx_runtime73.jsx)(
     "div",
     {
       ref,
-      className: (0, import_css41.cx)((0, import_browser56.withVendorCSSClassPrefix)((0, import_browser56.bem)("dialog", "content")), styles.content, props.className),
+      className: (0, import_css41.cx)((0, import_browser57.withVendorCSSClassPrefix)((0, import_browser57.bem)("dialog", "content")), styles.content, props.className),
       "aria-labelledby": context.labelId,
       "aria-describedby": context.descriptionId,
       ...context.getFloatingProps(props),
@@ -8479,18 +8542,18 @@ var DialogHeading = import_react63.default.forwardRef(
       context.setLabelId(id);
       return () => context.setLabelId(void 0);
     }, [id, context.setLabelId]);
-    return /* @__PURE__ */ (0, import_jsx_runtime74.jsxs)("div", { className: (0, import_css41.cx)((0, import_browser56.withVendorCSSClassPrefix)((0, import_browser56.bem)("dialog", "header")), styles.header), children: [
-      /* @__PURE__ */ (0, import_jsx_runtime74.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime73.jsxs)("div", { className: (0, import_css41.cx)((0, import_browser57.withVendorCSSClassPrefix)((0, import_browser57.bem)("dialog", "header")), styles.header), children: [
+      /* @__PURE__ */ (0, import_jsx_runtime73.jsx)(
         "h2",
         {
           ...props,
           ref,
           id,
-          className: (0, import_css41.cx)((0, import_browser56.withVendorCSSClassPrefix)((0, import_browser56.bem)("dialog", "title")), styles.headerTitle),
+          className: (0, import_css41.cx)((0, import_browser57.withVendorCSSClassPrefix)((0, import_browser57.bem)("dialog", "title")), styles.headerTitle),
           children
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime74.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime73.jsx)(
         Button_default,
         {
           color: "tertiary",
@@ -8499,7 +8562,7 @@ var DialogHeading = import_react63.default.forwardRef(
           shape: "round",
           onClick: () => context.setOpen(false),
           "aria-label": "Close",
-          children: /* @__PURE__ */ (0, import_jsx_runtime74.jsx)(X_default, { width: 16, height: 16 })
+          children: /* @__PURE__ */ (0, import_jsx_runtime73.jsx)(X_default, { width: 16, height: 16 })
         }
       )
     ] });
@@ -8515,13 +8578,13 @@ var DialogDescription = import_react63.default.forwardRef(
       context.setDescriptionId(id);
       return () => context.setDescriptionId(void 0);
     }, [id, context.setDescriptionId]);
-    return /* @__PURE__ */ (0, import_jsx_runtime74.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime73.jsx)(
       "p",
       {
         ...props,
         ref,
         id,
-        className: (0, import_css41.cx)((0, import_browser56.withVendorCSSClassPrefix)((0, import_browser56.bem)("dialog", "description")), styles.description, props.className),
+        className: (0, import_css41.cx)((0, import_browser57.withVendorCSSClassPrefix)((0, import_browser57.bem)("dialog", "description")), styles.description, props.className),
         children
       }
     );
@@ -8545,13 +8608,13 @@ var DialogClose = import_react63.default.forwardRef(({ children, asChild = false
       onClick: handleClick
     });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime74.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime73.jsx)(
     Button_default,
     {
       ...props,
       ref,
       onClick: handleClick,
-      className: (0, import_css41.cx)((0, import_browser56.withVendorCSSClassPrefix)((0, import_browser56.bem)("dialog", "close")), props.className),
+      className: (0, import_css41.cx)((0, import_browser57.withVendorCSSClassPrefix)((0, import_browser57.bem)("dialog", "close")), props.className),
       variant: "text",
       children
     }
@@ -8572,7 +8635,7 @@ var Dialog_default = Dialog;
 // src/components/primitives/MultiInput/MultiInput.tsx
 var import_react65 = require("react");
 var import_css43 = require("@emotion/css");
-var import_browser57 = require("@asgardeo/browser");
+var import_browser58 = require("@asgardeo/browser");
 
 // src/components/primitives/MultiInput/MultiInput.styles.ts
 var import_css42 = require("@emotion/css");
@@ -8668,7 +8731,7 @@ var useStyles20 = (theme, colorScheme, disabled, hasError, canAddMore, canRemove
 var MultiInput_styles_default = useStyles20;
 
 // src/components/primitives/MultiInput/MultiInput.tsx
-var import_jsx_runtime75 = require("react/jsx-runtime");
+var import_jsx_runtime74 = require("react/jsx-runtime");
 var MultiInput = ({
   label,
   error,
@@ -8691,8 +8754,8 @@ var MultiInput = ({
   const canAddMore = !maxFields || values.length < maxFields;
   const canRemove = values.length > minFields;
   const styles = MultiInput_styles_default(theme, colorScheme, !!disabled, !!error, canAddMore, canRemove);
-  const PlusIcon = ({ className: className2 }) => /* @__PURE__ */ (0, import_jsx_runtime75.jsx)("svg", { width: "16", height: "16", viewBox: "0 0 24 24", className: (0, import_css43.cx)(styles.icon, className2), children: /* @__PURE__ */ (0, import_jsx_runtime75.jsx)("path", { d: "M12 5v14M5 12h14" }) });
-  const BinIcon = ({ className: className2 }) => /* @__PURE__ */ (0, import_jsx_runtime75.jsx)("svg", { width: "16", height: "16", viewBox: "0 0 24 24", className: (0, import_css43.cx)(styles.icon, className2), children: /* @__PURE__ */ (0, import_jsx_runtime75.jsx)("path", { d: "M3 6h18M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2m3 0v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6h14ZM10 11v6M14 11v6" }) });
+  const PlusIcon = ({ className: className2 }) => /* @__PURE__ */ (0, import_jsx_runtime74.jsx)("svg", { width: "16", height: "16", viewBox: "0 0 24 24", className: (0, import_css43.cx)(styles.icon, className2), children: /* @__PURE__ */ (0, import_jsx_runtime74.jsx)("path", { d: "M12 5v14M5 12h14" }) });
+  const BinIcon = ({ className: className2 }) => /* @__PURE__ */ (0, import_jsx_runtime74.jsx)("svg", { width: "16", height: "16", viewBox: "0 0 24 24", className: (0, import_css43.cx)(styles.icon, className2), children: /* @__PURE__ */ (0, import_jsx_runtime74.jsx)("path", { d: "M3 6h18M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2m3 0v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6h14ZM10 11v6M14 11v6" }) });
   const handleAddValue = (0, import_react65.useCallback)(
     (newValue) => {
       if (newValue.trim() !== "" && (!maxFields || values.length < maxFields)) {
@@ -8736,9 +8799,9 @@ var MultiInput = ({
       };
       switch (fieldType) {
         case "DATE_TIME":
-          return /* @__PURE__ */ (0, import_jsx_runtime75.jsx)(DatePicker_default, { ...commonProps });
+          return /* @__PURE__ */ (0, import_jsx_runtime74.jsx)(DatePicker_default, { ...commonProps });
         case "BOOLEAN":
-          return /* @__PURE__ */ (0, import_jsx_runtime75.jsx)(
+          return /* @__PURE__ */ (0, import_jsx_runtime74.jsx)(
             Checkbox_default,
             {
               ...commonProps,
@@ -8747,7 +8810,7 @@ var MultiInput = ({
             }
           );
         default:
-          return /* @__PURE__ */ (0, import_jsx_runtime75.jsx)(TextField_default, { ...commonProps, type });
+          return /* @__PURE__ */ (0, import_jsx_runtime74.jsx)(TextField_default, { ...commonProps, type });
       }
     },
     [placeholder, disabled, startIcon, endIcon, error, fieldType, type]
@@ -8759,43 +8822,43 @@ var MultiInput = ({
       setCurrentInputValue("");
     }
   }, [currentInputValue, handleAddValue]);
-  return /* @__PURE__ */ (0, import_jsx_runtime75.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime74.jsxs)(
     FormControl_default,
     {
       error,
       helperText,
-      className: (0, import_css43.cx)((0, import_browser57.withVendorCSSClassPrefix)((0, import_browser57.bem)("multi-input")), className),
+      className: (0, import_css43.cx)((0, import_browser58.withVendorCSSClassPrefix)((0, import_browser58.bem)("multi-input")), className),
       style,
       children: [
-        label && /* @__PURE__ */ (0, import_jsx_runtime75.jsx)(InputLabel_default, { required, error: !!error, children: label }),
-        /* @__PURE__ */ (0, import_jsx_runtime75.jsxs)("div", { className: (0, import_css43.cx)((0, import_browser57.withVendorCSSClassPrefix)((0, import_browser57.bem)("multi-input", "container")), styles.container), children: [
-          /* @__PURE__ */ (0, import_jsx_runtime75.jsx)("div", { className: (0, import_css43.cx)((0, import_browser57.withVendorCSSClassPrefix)((0, import_browser57.bem)("multi-input", "input-row")), styles.inputRow), children: /* @__PURE__ */ (0, import_jsx_runtime75.jsx)("div", { className: (0, import_css43.cx)((0, import_browser57.withVendorCSSClassPrefix)((0, import_browser57.bem)("multi-input", "input-wrapper")), styles.inputWrapper), children: renderInputField(
+        label && /* @__PURE__ */ (0, import_jsx_runtime74.jsx)(InputLabel_default, { required, error: !!error, children: label }),
+        /* @__PURE__ */ (0, import_jsx_runtime74.jsxs)("div", { className: (0, import_css43.cx)((0, import_browser58.withVendorCSSClassPrefix)((0, import_browser58.bem)("multi-input", "container")), styles.container), children: [
+          /* @__PURE__ */ (0, import_jsx_runtime74.jsx)("div", { className: (0, import_css43.cx)((0, import_browser58.withVendorCSSClassPrefix)((0, import_browser58.bem)("multi-input", "input-row")), styles.inputRow), children: /* @__PURE__ */ (0, import_jsx_runtime74.jsx)("div", { className: (0, import_css43.cx)((0, import_browser58.withVendorCSSClassPrefix)((0, import_browser58.bem)("multi-input", "input-wrapper")), styles.inputWrapper), children: renderInputField(
             currentInputValue,
             setCurrentInputValue,
-            canAddMore ? /* @__PURE__ */ (0, import_jsx_runtime75.jsx)(PlusIcon, { className: styles.plusIcon }) : void 0,
+            canAddMore ? /* @__PURE__ */ (0, import_jsx_runtime74.jsx)(PlusIcon, { className: styles.plusIcon }) : void 0,
             canAddMore ? handleInputSubmit : void 0
           ) }) }),
-          values.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime75.jsx)("div", { className: (0, import_css43.cx)((0, import_browser57.withVendorCSSClassPrefix)((0, import_browser57.bem)("multi-input", "list-container")), styles.listContainer), children: values.map((value, index) => /* @__PURE__ */ (0, import_jsx_runtime75.jsxs)(
+          values.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime74.jsx)("div", { className: (0, import_css43.cx)((0, import_browser58.withVendorCSSClassPrefix)((0, import_browser58.bem)("multi-input", "list-container")), styles.listContainer), children: values.map((value, index) => /* @__PURE__ */ (0, import_jsx_runtime74.jsxs)(
             "div",
             {
-              className: (0, import_css43.cx)((0, import_browser57.withVendorCSSClassPrefix)((0, import_browser57.bem)("multi-input", "list-item")), styles.listItem),
+              className: (0, import_css43.cx)((0, import_browser58.withVendorCSSClassPrefix)((0, import_browser58.bem)("multi-input", "list-item")), styles.listItem),
               children: [
-                /* @__PURE__ */ (0, import_jsx_runtime75.jsx)(
+                /* @__PURE__ */ (0, import_jsx_runtime74.jsx)(
                   "span",
                   {
-                    className: (0, import_css43.cx)((0, import_browser57.withVendorCSSClassPrefix)((0, import_browser57.bem)("multi-input", "list-item-text")), styles.listItemText),
+                    className: (0, import_css43.cx)((0, import_browser58.withVendorCSSClassPrefix)((0, import_browser58.bem)("multi-input", "list-item-text")), styles.listItemText),
                     children: value
                   }
                 ),
-                canRemove && /* @__PURE__ */ (0, import_jsx_runtime75.jsx)(
+                canRemove && /* @__PURE__ */ (0, import_jsx_runtime74.jsx)(
                   "button",
                   {
                     type: "button",
                     onClick: () => handleRemoveValue(index),
                     disabled,
-                    className: (0, import_css43.cx)((0, import_browser57.withVendorCSSClassPrefix)((0, import_browser57.bem)("multi-input", "remove-button")), styles.removeButton),
+                    className: (0, import_css43.cx)((0, import_browser58.withVendorCSSClassPrefix)((0, import_browser58.bem)("multi-input", "remove-button")), styles.removeButton),
                     title: "Remove value",
-                    children: /* @__PURE__ */ (0, import_jsx_runtime75.jsx)(BinIcon, { className: styles.icon })
+                    children: /* @__PURE__ */ (0, import_jsx_runtime74.jsx)(BinIcon, { className: styles.icon })
                   }
                 )
               ]
@@ -8812,7 +8875,7 @@ var MultiInput_default = MultiInput;
 // src/components/presentation/UserProfile/BaseUserProfile.styles.ts
 var import_css44 = require("@emotion/css");
 var import_react66 = require("react");
-var import_browser58 = require("@asgardeo/browser");
+var import_browser59 = require("@asgardeo/browser");
 var useStyles21 = (theme, colorScheme) => {
   const valuePlaceholder = import_css44.css`
     font-style: italic;
@@ -8923,7 +8986,7 @@ var useStyles21 = (theme, colorScheme) => {
       max-width: 350px;
       text-align: left;
 
-      .${(0, import_browser58.withVendorCSSClassPrefix)("form-control")} {
+      .${(0, import_browser59.withVendorCSSClassPrefix)("form-control")} {
         margin-bottom: 0;
       }
 
@@ -8983,7 +9046,7 @@ var useStyles21 = (theme, colorScheme) => {
 var BaseUserProfile_styles_default = useStyles21;
 
 // src/components/presentation/UserProfile/BaseUserProfile.tsx
-var import_jsx_runtime76 = require("react/jsx-runtime");
+var import_jsx_runtime75 = require("react/jsx-runtime");
 var fieldsToSkip = [
   "roles.default",
   "active",
@@ -9019,13 +9082,31 @@ var BaseUserProfile = ({
   onOpenChange,
   onUpdate,
   open = false,
-  error = null
+  error = null,
+  isLoading = false,
+  showFields = [],
+  hideFields = []
 }) => {
   const { theme, colorScheme } = useTheme_default();
   const [editedUser, setEditedUser] = (0, import_react67.useState)(flattenedProfile || profile);
   const [editingFields, setEditingFields] = (0, import_react67.useState)({});
   const { t } = useTranslation_default();
-  const PencilIcon = () => /* @__PURE__ */ (0, import_jsx_runtime76.jsx)(
+  const shouldShowField = (0, import_react67.useCallback)(
+    (fieldName) => {
+      if (fieldsToSkip.includes(fieldName)) {
+        return false;
+      }
+      if (hideFields.length > 0 && hideFields.includes(fieldName)) {
+        return false;
+      }
+      if (showFields.length > 0) {
+        return showFields.includes(fieldName);
+      }
+      return true;
+    },
+    [showFields, hideFields]
+  );
+  const PencilIcon = () => /* @__PURE__ */ (0, import_jsx_runtime75.jsx)(
     "svg",
     {
       width: "16",
@@ -9036,7 +9117,7 @@ var BaseUserProfile = ({
       strokeWidth: "2",
       strokeLinecap: "round",
       strokeLinejoin: "round",
-      children: /* @__PURE__ */ (0, import_jsx_runtime76.jsx)("path", { d: "M17 3a2.828 2.828 0 1 1 4 4L7.5 20.5 2 22l1.5-5.5L17 3z" })
+      children: /* @__PURE__ */ (0, import_jsx_runtime75.jsx)("path", { d: "M17 3a2.828 2.828 0 1 1 4 4L7.5 20.5 2 22l1.5-5.5L17 3z" })
     }
   );
   const toggleFieldEdit = (0, import_react67.useCallback)((fieldName) => {
@@ -9061,12 +9142,12 @@ var BaseUserProfile = ({
   }, []);
   const ObjectDisplay = ({ data }) => {
     if (!data || typeof data !== "object") return null;
-    return /* @__PURE__ */ (0, import_jsx_runtime76.jsx)("table", { className: styles.value, children: /* @__PURE__ */ (0, import_jsx_runtime76.jsx)("tbody", { children: Object.entries(data).map(([key, value]) => /* @__PURE__ */ (0, import_jsx_runtime76.jsxs)("tr", { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime76.jsx)("td", { className: styles.objectKey, children: /* @__PURE__ */ (0, import_jsx_runtime76.jsxs)("strong", { children: [
+    return /* @__PURE__ */ (0, import_jsx_runtime75.jsx)("table", { className: styles.value, children: /* @__PURE__ */ (0, import_jsx_runtime75.jsx)("tbody", { children: Object.entries(data).map(([key, value]) => /* @__PURE__ */ (0, import_jsx_runtime75.jsxs)("tr", { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime75.jsx)("td", { className: styles.objectKey, children: /* @__PURE__ */ (0, import_jsx_runtime75.jsxs)("strong", { children: [
         formatLabel(key),
         ":"
       ] }) }),
-      /* @__PURE__ */ (0, import_jsx_runtime76.jsx)("td", { className: styles.objectValue, children: typeof value === "object" ? /* @__PURE__ */ (0, import_jsx_runtime76.jsx)(ObjectDisplay, { data: value }) : String(value) })
+      /* @__PURE__ */ (0, import_jsx_runtime75.jsx)("td", { className: styles.objectValue, children: typeof value === "object" ? /* @__PURE__ */ (0, import_jsx_runtime75.jsx)(ObjectDisplay, { data: value }) : String(value) })
     ] }, key)) }) });
   };
   function set(obj, path, value) {
@@ -9093,7 +9174,7 @@ var BaseUserProfile = ({
         fieldValue = fieldValue.filter((v) => v !== void 0 && v !== null && v !== "");
       }
       let payload = {};
-      if (schema.schemaId && schema.schemaId !== import_browser59.WellKnownSchemaIds.User) {
+      if (schema.schemaId && schema.schemaId !== import_browser60.WellKnownSchemaIds.User) {
         payload = {
           [schema.schemaId]: {
             [fieldName]: fieldValue
@@ -9136,9 +9217,9 @@ var BaseUserProfile = ({
     const { value, displayName, description, name, type, required, mutability, subAttributes, multiValued } = schema;
     const label = displayName || description || name || "";
     if (subAttributes && Array.isArray(subAttributes)) {
-      return /* @__PURE__ */ (0, import_jsx_runtime76.jsx)(import_jsx_runtime76.Fragment, { children: subAttributes.map((subAttr, index) => /* @__PURE__ */ (0, import_jsx_runtime76.jsxs)("div", { className: styles.field, children: [
-        /* @__PURE__ */ (0, import_jsx_runtime76.jsx)("span", { className: styles.label, children: subAttr.displayName || subAttr.description || "" }),
-        /* @__PURE__ */ (0, import_jsx_runtime76.jsx)("div", { className: 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__ */ (0, import_jsx_runtime75.jsx)(import_jsx_runtime75.Fragment, { children: subAttributes.map((subAttr, index) => /* @__PURE__ */ (0, import_jsx_runtime75.jsxs)("div", { className: styles.field, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime75.jsx)("span", { className: styles.label, children: subAttr.displayName || subAttr.description || "" }),
+        /* @__PURE__ */ (0, import_jsx_runtime75.jsx)("div", { className: 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) || multiValued) {
@@ -9154,9 +9235,9 @@ var BaseUserProfile = ({
         } else {
           fieldValues = [];
         }
-        return /* @__PURE__ */ (0, import_jsx_runtime76.jsxs)(import_jsx_runtime76.Fragment, { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime76.jsx)("span", { className: styles.label, children: label }),
-          /* @__PURE__ */ (0, import_jsx_runtime76.jsx)("div", { className: styles.value, children: /* @__PURE__ */ (0, import_jsx_runtime76.jsx)(
+        return /* @__PURE__ */ (0, import_jsx_runtime75.jsxs)(import_jsx_runtime75.Fragment, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime75.jsx)("span", { className: styles.label, children: label }),
+          /* @__PURE__ */ (0, import_jsx_runtime75.jsx)("div", { className: styles.value, children: /* @__PURE__ */ (0, import_jsx_runtime75.jsx)(
             MultiInput_default,
             {
               values: fieldValues,
@@ -9187,9 +9268,9 @@ var BaseUserProfile = ({
       } else {
         displayValue2 = "-";
       }
-      return /* @__PURE__ */ (0, import_jsx_runtime76.jsxs)(import_jsx_runtime76.Fragment, { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime76.jsx)("span", { className: styles.label, children: label }),
-        /* @__PURE__ */ (0, import_jsx_runtime76.jsx)("div", { className: (0, import_css45.cx)(styles.value, !hasValues ? styles.valuePlaceholder : ""), children: !hasValues && isEditable2 && onStartEdit ? /* @__PURE__ */ (0, import_jsx_runtime76.jsx)(
+      return /* @__PURE__ */ (0, import_jsx_runtime75.jsxs)(import_jsx_runtime75.Fragment, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime75.jsx)("span", { className: styles.label, children: label }),
+        /* @__PURE__ */ (0, import_jsx_runtime75.jsx)("div", { className: (0, import_css45.cx)(styles.value, !hasValues ? styles.valuePlaceholder : ""), children: !hasValues && isEditable2 && onStartEdit ? /* @__PURE__ */ (0, import_jsx_runtime75.jsx)(
           Button_default,
           {
             onClick: onStartEdit,
@@ -9204,7 +9285,7 @@ var BaseUserProfile = ({
       ] });
     }
     if (type === "COMPLEX" && typeof value === "object") {
-      return /* @__PURE__ */ (0, import_jsx_runtime76.jsx)(ObjectDisplay, { data: value });
+      return /* @__PURE__ */ (0, import_jsx_runtime75.jsx)(ObjectDisplay, { data: value });
     }
     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 || "";
@@ -9219,16 +9300,16 @@ var BaseUserProfile = ({
       let field;
       switch (type) {
         case "STRING":
-          field = /* @__PURE__ */ (0, import_jsx_runtime76.jsx)(TextField_default, { ...commonProps });
+          field = /* @__PURE__ */ (0, import_jsx_runtime75.jsx)(TextField_default, { ...commonProps });
           break;
         case "DATE_TIME":
-          field = /* @__PURE__ */ (0, import_jsx_runtime76.jsx)(DatePicker_default, { ...commonProps });
+          field = /* @__PURE__ */ (0, import_jsx_runtime75.jsx)(DatePicker_default, { ...commonProps });
           break;
         case "BOOLEAN":
-          field = /* @__PURE__ */ (0, import_jsx_runtime76.jsx)(Checkbox_default, { ...commonProps, checked: !!fieldValue, onChange: (e) => onEditValue(e.target.checked) });
+          field = /* @__PURE__ */ (0, import_jsx_runtime75.jsx)(Checkbox_default, { ...commonProps, checked: !!fieldValue, onChange: (e) => onEditValue(e.target.checked) });
           break;
         case "COMPLEX":
-          field = /* @__PURE__ */ (0, import_jsx_runtime76.jsx)(
+          field = /* @__PURE__ */ (0, import_jsx_runtime75.jsx)(
             "textarea",
             {
               value: fieldValue,
@@ -9240,11 +9321,11 @@ var BaseUserProfile = ({
           );
           break;
         default:
-          field = /* @__PURE__ */ (0, import_jsx_runtime76.jsx)(TextField_default, { ...commonProps });
+          field = /* @__PURE__ */ (0, import_jsx_runtime75.jsx)(TextField_default, { ...commonProps });
       }
-      return /* @__PURE__ */ (0, import_jsx_runtime76.jsxs)(import_jsx_runtime76.Fragment, { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime76.jsx)("span", { className: styles.label, children: label }),
-        /* @__PURE__ */ (0, import_jsx_runtime76.jsx)("div", { className: styles.value, children: field })
+      return /* @__PURE__ */ (0, import_jsx_runtime75.jsxs)(import_jsx_runtime75.Fragment, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime75.jsx)("span", { className: styles.label, children: label }),
+        /* @__PURE__ */ (0, import_jsx_runtime75.jsx)("div", { className: styles.value, children: field })
       ] });
     }
     const hasValue = value !== void 0 && value !== null && value !== "";
@@ -9257,9 +9338,9 @@ var BaseUserProfile = ({
     } else {
       displayValue = "-";
     }
-    return /* @__PURE__ */ (0, import_jsx_runtime76.jsxs)(import_jsx_runtime76.Fragment, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime76.jsx)("span", { className: styles.label, children: label }),
-      /* @__PURE__ */ (0, import_jsx_runtime76.jsx)("div", { className: (0, import_css45.cx)(styles.value, !hasValue ? styles.valuePlaceholder : ""), children: !hasValue && isEditable && onStartEdit ? /* @__PURE__ */ (0, import_jsx_runtime76.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime75.jsxs)(import_jsx_runtime75.Fragment, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime75.jsx)("span", { className: styles.label, children: label }),
+      /* @__PURE__ */ (0, import_jsx_runtime75.jsx)("div", { className: (0, import_css45.cx)(styles.value, !hasValue ? styles.valuePlaceholder : ""), children: !hasValue && isEditable && onStartEdit ? /* @__PURE__ */ (0, import_jsx_runtime75.jsx)(
         Button_default,
         {
           onClick: onStartEdit,
@@ -9287,8 +9368,8 @@ var BaseUserProfile = ({
       alignItems: "center",
       gap: theme.vars.spacing.unit
     };
-    return /* @__PURE__ */ (0, import_jsx_runtime76.jsxs)("div", { className: styles.field, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime76.jsx)("div", { className: styles.fieldInner, children: renderSchemaField(
+    return /* @__PURE__ */ (0, import_jsx_runtime75.jsxs)("div", { className: styles.field, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime75.jsx)("div", { className: styles.fieldInner, children: renderSchemaField(
         schema,
         isFieldEditing,
         (value) => {
@@ -9298,21 +9379,21 @@ var BaseUserProfile = ({
         },
         () => toggleFieldEdit(schema.name)
       ) }),
-      editable && schema.mutability !== "READ_ONLY" && !isReadonlyField && /* @__PURE__ */ (0, import_jsx_runtime76.jsxs)("div", { className: styles.fieldActions, children: [
-        isFieldEditing && /* @__PURE__ */ (0, import_jsx_runtime76.jsxs)(import_jsx_runtime76.Fragment, { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime76.jsx)(Button_default, { size: "small", color: "primary", variant: "solid", onClick: () => handleFieldSave(schema), children: "Save" }),
-          /* @__PURE__ */ (0, import_jsx_runtime76.jsx)(Button_default, { size: "small", color: "secondary", variant: "solid", onClick: () => handleFieldCancel(schema.name), children: "Cancel" })
+      editable && schema.mutability !== "READ_ONLY" && !isReadonlyField && /* @__PURE__ */ (0, import_jsx_runtime75.jsxs)("div", { className: styles.fieldActions, children: [
+        isFieldEditing && /* @__PURE__ */ (0, import_jsx_runtime75.jsxs)(import_jsx_runtime75.Fragment, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime75.jsx)(Button_default, { size: "small", color: "primary", variant: "solid", onClick: () => handleFieldSave(schema), children: "Save" }),
+          /* @__PURE__ */ (0, import_jsx_runtime75.jsx)(Button_default, { size: "small", color: "secondary", variant: "solid", onClick: () => handleFieldCancel(schema.name), children: "Cancel" })
         ] }),
-        !isFieldEditing && hasValue && /* @__PURE__ */ (0, import_jsx_runtime76.jsx)(
+        !isFieldEditing && hasValue && /* @__PURE__ */ (0, import_jsx_runtime75.jsx)(
           Button_default,
           {
             size: "small",
             color: "tertiary",
-            variant: "text",
+            variant: "icon",
             onClick: () => toggleFieldEdit(schema.name),
             title: "Edit",
             className: styles.editButton,
-            children: /* @__PURE__ */ (0, import_jsx_runtime76.jsx)(PencilIcon, {})
+            children: /* @__PURE__ */ (0, import_jsx_runtime75.jsx)(PencilIcon, {})
           }
         )
       ] })
@@ -9332,7 +9413,7 @@ var BaseUserProfile = ({
   const containerClasses = (0, import_css45.cx)(
     styles.root,
     cardLayout ? styles.card : "",
-    (0, import_browser59.withVendorCSSClassPrefix)("user-profile"),
+    (0, import_browser60.withVendorCSSClassPrefix)("user-profile"),
     className
   );
   const currentUser = flattenedProfile || profile;
@@ -9341,30 +9422,31 @@ var BaseUserProfile = ({
   const renderProfileWithoutSchemas = () => {
     if (!currentUser) return null;
     const profileEntries = Object.entries(currentUser).filter(([key, value]) => {
-      if (fieldsToSkip.includes(key)) return false;
+      if (!shouldShowField(key)) return false;
       return value !== void 0 && value !== "" && value !== null;
     }).sort(([a], [b]) => a.localeCompare(b));
-    return /* @__PURE__ */ (0, import_jsx_runtime76.jsx)(import_jsx_runtime76.Fragment, { children: profileEntries.map(([key, value]) => /* @__PURE__ */ (0, import_jsx_runtime76.jsxs)("div", { className: styles.field, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime76.jsx)("span", { className: styles.label, children: formatLabel(key) }),
-      /* @__PURE__ */ (0, import_jsx_runtime76.jsx)("div", { className: styles.value, children: typeof value === "object" ? JSON.stringify(value, null, 2) : String(value) })
+    return /* @__PURE__ */ (0, import_jsx_runtime75.jsx)(import_jsx_runtime75.Fragment, { children: profileEntries.map(([key, value]) => /* @__PURE__ */ (0, import_jsx_runtime75.jsxs)("div", { className: styles.field, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime75.jsx)("span", { className: styles.label, children: formatLabel(key) }),
+      /* @__PURE__ */ (0, import_jsx_runtime75.jsx)("div", { className: styles.value, children: typeof value === "object" ? JSON.stringify(value, null, 2) : String(value) })
     ] }, key)) });
   };
-  const profileContent = /* @__PURE__ */ (0, import_jsx_runtime76.jsxs)(Card_default, { className: containerClasses, children: [
-    error && /* @__PURE__ */ (0, import_jsx_runtime76.jsxs)(Alert_default, { variant: "error", className: (0, import_css45.cx)((0, import_browser59.withVendorCSSClassPrefix)((0, import_browser59.bem)("user-profile", "alert")), styles.alert), children: [
-      /* @__PURE__ */ (0, import_jsx_runtime76.jsx)(Alert_default.Title, { children: t("errors.title") || "Error" }),
-      /* @__PURE__ */ (0, import_jsx_runtime76.jsx)(Alert_default.Description, { children: error })
+  const profileContent = /* @__PURE__ */ (0, import_jsx_runtime75.jsxs)(Card_default, { className: containerClasses, children: [
+    error && /* @__PURE__ */ (0, import_jsx_runtime75.jsxs)(Alert_default, { variant: "error", className: (0, import_css45.cx)((0, import_browser60.withVendorCSSClassPrefix)((0, import_browser60.bem)("user-profile", "alert")), styles.alert), children: [
+      /* @__PURE__ */ (0, import_jsx_runtime75.jsx)(Alert_default.Title, { children: t("errors.title") || "Error" }),
+      /* @__PURE__ */ (0, import_jsx_runtime75.jsx)(Alert_default.Description, { children: error })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime76.jsx)("div", { className: styles.header, children: /* @__PURE__ */ (0, import_jsx_runtime76.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime75.jsx)("div", { className: styles.header, children: /* @__PURE__ */ (0, import_jsx_runtime75.jsx)(
       Avatar,
       {
         imageUrl: getMappedUserProfileValue_default("picture", mergedMappings, currentUser),
         name: getDisplayName(),
         size: 80,
-        alt: `${getDisplayName()}'s avatar`
+        alt: `${getDisplayName()}'s avatar`,
+        isLoading
       }
     ) }),
-    /* @__PURE__ */ (0, import_jsx_runtime76.jsx)("div", { className: styles.infoContainer, children: schemas && schemas.length > 0 ? schemas.filter((schema) => {
-      if (fieldsToSkip.includes(schema.name)) return false;
+    /* @__PURE__ */ (0, import_jsx_runtime75.jsx)("div", { className: styles.infoContainer, children: schemas && schemas.length > 0 ? schemas.filter((schema) => {
+      if (!schema.name || !shouldShowField(schema.name)) return false;
       if (!editable) {
         const value = flattenedProfile && schema.name ? flattenedProfile[schema.name] : void 0;
         return value !== void 0 && value !== "" && value !== null;
@@ -9380,13 +9462,13 @@ var BaseUserProfile = ({
         ...schema,
         value
       };
-      return /* @__PURE__ */ (0, import_jsx_runtime76.jsx)("div", { className: styles.info, children: renderUserInfo(schemaWithValue) }, schema.name || index);
+      return /* @__PURE__ */ (0, import_jsx_runtime75.jsx)("div", { className: styles.info, children: renderUserInfo(schemaWithValue) }, schema.name || index);
     }) : renderProfileWithoutSchemas() })
   ] });
   if (mode === "popup") {
-    return /* @__PURE__ */ (0, import_jsx_runtime76.jsx)(Dialog_default, { open, onOpenChange, children: /* @__PURE__ */ (0, import_jsx_runtime76.jsxs)(Dialog_default.Content, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime76.jsx)(Dialog_default.Heading, { children: title ?? t("user.profile.title") }),
-      /* @__PURE__ */ (0, import_jsx_runtime76.jsx)("div", { className: styles.popup, children: profileContent })
+    return /* @__PURE__ */ (0, import_jsx_runtime75.jsx)(Dialog_default, { open, onOpenChange, children: /* @__PURE__ */ (0, import_jsx_runtime75.jsxs)(Dialog_default.Content, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime75.jsx)(Dialog_default.Heading, { children: title ?? t("user.profile.title") }),
+      /* @__PURE__ */ (0, import_jsx_runtime75.jsx)("div", { className: styles.popup, children: profileContent })
     ] }) });
   }
   return profileContent;
@@ -9397,8 +9479,8 @@ var BaseUserProfile_default = BaseUserProfile;
 var import_react68 = require("react");
 
 // src/api/updateMeProfile.ts
-var import_browser60 = require("@asgardeo/browser");
-var httpClient5 = import_browser60.AsgardeoSPAClient.getInstance().httpRequest.bind(import_browser60.AsgardeoSPAClient.getInstance());
+var import_browser61 = require("@asgardeo/browser");
+var httpClient5 = import_browser61.AsgardeoSPAClient.getInstance().httpRequest.bind(import_browser61.AsgardeoSPAClient.getInstance());
 var updateMeProfile = async ({ fetcher, ...requestConfig }) => {
   const defaultFetcher = async (url, config) => {
     const response = await httpClient5({
@@ -9415,7 +9497,7 @@ var updateMeProfile = async ({ fetcher, ...requestConfig }) => {
       text: () => Promise.resolve(typeof response.data === "string" ? response.data : JSON.stringify(response.data))
     };
   };
-  return (0, import_browser60.updateMeProfile)({
+  return (0, import_browser61.updateMeProfile)({
     ...requestConfig,
     fetcher: fetcher || defaultFetcher
   });
@@ -9423,10 +9505,10 @@ var updateMeProfile = async ({ fetcher, ...requestConfig }) => {
 var updateMeProfile_default = updateMeProfile;
 
 // src/components/presentation/UserProfile/UserProfile.tsx
-var import_browser61 = require("@asgardeo/browser");
-var import_jsx_runtime77 = require("react/jsx-runtime");
+var import_browser62 = require("@asgardeo/browser");
+var import_jsx_runtime76 = require("react/jsx-runtime");
 var UserProfile3 = ({ ...rest }) => {
-  const { baseUrl } = useAsgardeo_default();
+  const { baseUrl, isLoading } = useAsgardeo_default();
   const { profile, flattenedProfile, schemas, onUpdateProfile } = useUser_default();
   const { t } = useTranslation_default();
   const [error, setError] = (0, import_react68.useState)(null);
@@ -9437,13 +9519,13 @@ var UserProfile3 = ({ ...rest }) => {
       onUpdateProfile(response);
     } catch (error2) {
       let message = t("user.profile.update.generic.error");
-      if (error2 instanceof import_browser61.AsgardeoError) {
+      if (error2 instanceof import_browser62.AsgardeoError) {
         message = error2?.message;
       }
       setError(message);
     }
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime77.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime76.jsx)(
     BaseUserProfile_default,
     {
       profile,
@@ -9458,7 +9540,7 @@ var UserProfile3 = ({ ...rest }) => {
 var UserProfile_default = UserProfile3;
 
 // src/components/presentation/UserDropdown/BaseUserDropdown.tsx
-var import_browser62 = require("@asgardeo/browser");
+var import_browser63 = require("@asgardeo/browser");
 var import_react70 = require("@floating-ui/react");
 var import_css47 = require("@emotion/css");
 var import_react71 = require("react");
@@ -9648,7 +9730,7 @@ var useStyles22 = (theme, colorScheme) => {
 var BaseUserDropdown_styles_default = useStyles22;
 
 // src/components/presentation/UserDropdown/BaseUserDropdown.tsx
-var import_jsx_runtime78 = require("react/jsx-runtime");
+var import_jsx_runtime77 = require("react/jsx-runtime");
 var BaseUserDropdown = ({
   fallback = null,
   className = "",
@@ -9707,14 +9789,14 @@ var BaseUserDropdown = ({
     defaultMenuItems.push({
       label: "Manage Profile",
       onClick: onManageProfile,
-      icon: /* @__PURE__ */ (0, import_jsx_runtime78.jsx)(User_default2, { width: "16", height: "16" })
+      icon: /* @__PURE__ */ (0, import_jsx_runtime77.jsx)(User_default2, { width: "16", height: "16" })
     });
   }
   if (onSignOut) {
     defaultMenuItems.push({
       label: "Sign Out",
       onClick: onSignOut,
-      icon: /* @__PURE__ */ (0, import_jsx_runtime78.jsx)(LogOut_default, { width: "16", height: "16" })
+      icon: /* @__PURE__ */ (0, import_jsx_runtime77.jsx)(LogOut_default, { width: "16", height: "16" })
     });
   }
   const allMenuItems = [...menuItems];
@@ -9724,18 +9806,18 @@ var BaseUserDropdown = ({
     }
     allMenuItems.push(...defaultMenuItems);
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime78.jsxs)("div", { className: (0, import_css47.cx)((0, import_browser62.withVendorCSSClassPrefix)("user-dropdown"), className), children: [
-    /* @__PURE__ */ (0, import_jsx_runtime78.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime77.jsxs)("div", { className: (0, import_css47.cx)((0, import_browser63.withVendorCSSClassPrefix)("user-dropdown"), className), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime77.jsxs)(
       Button_default,
       {
         ref: refs.setReference,
-        className: (0, import_css47.cx)((0, import_browser62.withVendorCSSClassPrefix)("user-dropdown__trigger"), styles.trigger),
+        className: (0, import_css47.cx)((0, import_browser63.withVendorCSSClassPrefix)("user-dropdown__trigger"), styles.trigger),
         color: "tertiary",
         variant: "text",
         size: "medium",
         ...getReferenceProps(),
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime78.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime77.jsx)(
             Avatar,
             {
               imageUrl: getMappedUserProfileValue_default("picture", mergedMappings, user),
@@ -9744,27 +9826,27 @@ var BaseUserDropdown = ({
               alt: `${getDisplayName()}'s avatar`
             }
           ),
-          showTriggerLabel && /* @__PURE__ */ (0, import_jsx_runtime78.jsx)(
+          showTriggerLabel && /* @__PURE__ */ (0, import_jsx_runtime77.jsx)(
             Typography_default,
             {
               variant: "body2",
-              className: (0, import_css47.cx)((0, import_browser62.withVendorCSSClassPrefix)("user-dropdown__trigger-label"), styles.userName),
+              className: (0, import_css47.cx)((0, import_browser63.withVendorCSSClassPrefix)("user-dropdown__trigger-label"), styles.userName),
               children: getDisplayName()
             }
           )
         ]
       }
     ),
-    isOpen && /* @__PURE__ */ (0, import_jsx_runtime78.jsx)(import_react70.FloatingPortal, { id: portalId, children: /* @__PURE__ */ (0, import_jsx_runtime78.jsx)(import_react70.FloatingFocusManager, { context, modal: false, children: /* @__PURE__ */ (0, import_jsx_runtime78.jsxs)(
+    isOpen && /* @__PURE__ */ (0, import_jsx_runtime77.jsx)(import_react70.FloatingPortal, { id: portalId, children: /* @__PURE__ */ (0, import_jsx_runtime77.jsx)(import_react70.FloatingFocusManager, { context, modal: false, initialFocus: -1, children: /* @__PURE__ */ (0, import_jsx_runtime77.jsxs)(
       "div",
       {
         ref: refs.setFloating,
-        className: (0, import_css47.cx)((0, import_browser62.withVendorCSSClassPrefix)("user-dropdown__content"), styles.dropdownContent),
+        className: (0, import_css47.cx)((0, import_browser63.withVendorCSSClassPrefix)("user-dropdown__content"), styles.dropdownContent),
         style: floatingStyles,
         ...getFloatingProps(),
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime78.jsxs)("div", { className: (0, import_css47.cx)((0, import_browser62.withVendorCSSClassPrefix)("user-dropdown__header"), styles.dropdownHeader), children: [
-            /* @__PURE__ */ (0, import_jsx_runtime78.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime77.jsxs)("div", { className: (0, import_css47.cx)((0, import_browser63.withVendorCSSClassPrefix)("user-dropdown__header"), styles.dropdownHeader), children: [
+            /* @__PURE__ */ (0, import_jsx_runtime77.jsx)(
               Avatar,
               {
                 imageUrl: getMappedUserProfileValue_default("picture", mergedMappings, user),
@@ -9773,22 +9855,22 @@ var BaseUserDropdown = ({
                 alt: `${getDisplayName()}'s avatar`
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime78.jsxs)("div", { className: (0, import_css47.cx)((0, import_browser62.withVendorCSSClassPrefix)("user-dropdown__header-info"), styles.headerInfo), children: [
-              /* @__PURE__ */ (0, import_jsx_runtime78.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime77.jsxs)("div", { className: (0, import_css47.cx)((0, import_browser63.withVendorCSSClassPrefix)("user-dropdown__header-info"), styles.headerInfo), children: [
+              /* @__PURE__ */ (0, import_jsx_runtime77.jsx)(
                 Typography_default,
                 {
                   noWrap: true,
-                  className: (0, import_browser62.withVendorCSSClassPrefix)("user-dropdown__header-name"),
+                  className: (0, import_browser63.withVendorCSSClassPrefix)("user-dropdown__header-name"),
                   variant: "body1",
                   fontWeight: "medium",
                   children: getDisplayName()
                 }
               ),
-              /* @__PURE__ */ (0, import_jsx_runtime78.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime77.jsx)(
                 Typography_default,
                 {
                   noWrap: true,
-                  className: (0, import_browser62.withVendorCSSClassPrefix)("user-dropdown__header-email"),
+                  className: (0, import_browser63.withVendorCSSClassPrefix)("user-dropdown__header-email"),
                   variant: "caption",
                   color: "secondary",
                   children: getMappedUserProfileValue_default("username", mergedMappings, user) || getMappedUserProfileValue_default("email", mergedMappings, user)
@@ -9796,31 +9878,31 @@ var BaseUserDropdown = ({
               )
             ] })
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime78.jsx)("div", { className: (0, import_css47.cx)((0, import_browser62.withVendorCSSClassPrefix)("user-dropdown__menu"), styles.dropdownMenu), children: allMenuItems.map((item, index) => /* @__PURE__ */ (0, import_jsx_runtime78.jsx)("div", { children: item.label === "" ? /* @__PURE__ */ (0, import_jsx_runtime78.jsx)("div", { className: (0, import_css47.cx)((0, import_browser62.withVendorCSSClassPrefix)("user-dropdown__menu-divider"), styles.divider) }) : item.href ? /* @__PURE__ */ (0, import_jsx_runtime78.jsxs)(
+          /* @__PURE__ */ (0, import_jsx_runtime77.jsx)("div", { className: (0, import_css47.cx)((0, import_browser63.withVendorCSSClassPrefix)("user-dropdown__menu"), styles.dropdownMenu), children: allMenuItems.map((item, index) => /* @__PURE__ */ (0, import_jsx_runtime77.jsx)("div", { children: item.label === "" ? /* @__PURE__ */ (0, import_jsx_runtime77.jsx)("div", { className: (0, import_css47.cx)((0, import_browser63.withVendorCSSClassPrefix)("user-dropdown__menu-divider"), styles.divider) }) : item.href ? /* @__PURE__ */ (0, import_jsx_runtime77.jsxs)(
             "a",
             {
               href: item.href,
               style: {
                 backgroundColor: hoveredItemIndex === index ? theme.vars.colors.action?.hover : "transparent"
               },
-              className: (0, import_css47.cx)((0, import_browser62.withVendorCSSClassPrefix)("user-dropdown__menu-item"), styles.menuItemAnchor),
+              className: (0, import_css47.cx)((0, import_browser63.withVendorCSSClassPrefix)("user-dropdown__menu-item"), styles.menuItemAnchor),
               onMouseEnter: () => setHoveredItemIndex(index),
               onMouseLeave: () => setHoveredItemIndex(null),
               onFocus: () => setHoveredItemIndex(index),
               onBlur: () => setHoveredItemIndex(null),
               children: [
                 item.icon,
-                /* @__PURE__ */ (0, import_jsx_runtime78.jsx)("span", { children: item.label })
+                /* @__PURE__ */ (0, import_jsx_runtime77.jsx)("span", { children: item.label })
               ]
             }
-          ) : /* @__PURE__ */ (0, import_jsx_runtime78.jsx)(
+          ) : /* @__PURE__ */ (0, import_jsx_runtime77.jsx)(
             Button_default,
             {
               onClick: () => handleMenuItemClick(item),
               style: {
                 backgroundColor: hoveredItemIndex === index ? theme.vars.colors.action?.hover : "transparent"
               },
-              className: (0, import_css47.cx)((0, import_browser62.withVendorCSSClassPrefix)("user-dropdown__menu-item"), styles.menuItem),
+              className: (0, import_css47.cx)((0, import_browser63.withVendorCSSClassPrefix)("user-dropdown__menu-item"), styles.menuItem),
               color: "tertiary",
               variant: "text",
               size: "small",
@@ -9839,7 +9921,7 @@ var BaseUserDropdown_default = BaseUserDropdown;
 
 // src/components/presentation/UserDropdown/UserDropdown.tsx
 var import_react72 = require("react");
-var import_jsx_runtime79 = require("react/jsx-runtime");
+var import_jsx_runtime78 = require("react/jsx-runtime");
 var UserDropdown = ({
   children,
   renderTrigger,
@@ -9868,14 +9950,14 @@ var UserDropdown = ({
     closeProfile
   };
   if (children) {
-    return /* @__PURE__ */ (0, import_jsx_runtime79.jsxs)(import_jsx_runtime79.Fragment, { children: [
+    return /* @__PURE__ */ (0, import_jsx_runtime78.jsxs)(import_jsx_runtime78.Fragment, { children: [
       children(renderProps),
-      /* @__PURE__ */ (0, import_jsx_runtime79.jsx)(UserProfile_default, { mode: "popup", open: isProfileOpen, onOpenChange: setIsProfileOpen })
+      /* @__PURE__ */ (0, import_jsx_runtime78.jsx)(UserProfile_default, { mode: "popup", open: isProfileOpen, onOpenChange: setIsProfileOpen })
     ] });
   }
   if (renderTrigger || renderDropdown) {
-    return /* @__PURE__ */ (0, import_jsx_runtime79.jsxs)(import_jsx_runtime79.Fragment, { children: [
-      renderTrigger ? renderTrigger(renderProps) : /* @__PURE__ */ (0, import_jsx_runtime79.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime78.jsxs)(import_jsx_runtime78.Fragment, { children: [
+      renderTrigger ? renderTrigger(renderProps) : /* @__PURE__ */ (0, import_jsx_runtime78.jsx)(
         BaseUserDropdown_default,
         {
           user,
@@ -9885,11 +9967,11 @@ var UserDropdown = ({
           ...rest
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime79.jsx)(UserProfile_default, { mode: "popup", open: isProfileOpen, onOpenChange: setIsProfileOpen })
+      /* @__PURE__ */ (0, import_jsx_runtime78.jsx)(UserProfile_default, { mode: "popup", open: isProfileOpen, onOpenChange: setIsProfileOpen })
     ] });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime79.jsxs)(import_jsx_runtime79.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime79.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime78.jsxs)(import_jsx_runtime78.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime78.jsx)(
       BaseUserDropdown_default,
       {
         user,
@@ -9899,7 +9981,7 @@ var UserDropdown = ({
         ...rest
       }
     ),
-    isProfileOpen && /* @__PURE__ */ (0, import_jsx_runtime79.jsx)(UserProfile_default, { mode: "popup", open: isProfileOpen, onOpenChange: setIsProfileOpen })
+    isProfileOpen && /* @__PURE__ */ (0, import_jsx_runtime78.jsx)(UserProfile_default, { mode: "popup", open: isProfileOpen, onOpenChange: setIsProfileOpen })
   ] });
 };
 var UserDropdown_default = UserDropdown;
@@ -9910,9 +9992,9 @@ var import_css49 = require("@emotion/css");
 var import_react75 = require("react");
 
 // src/components/primitives/Icons/Building.tsx
-var import_jsx_runtime80 = require("react/jsx-runtime");
-var Building = ({ color = "currentColor", height = 24, width = 24 }) => /* @__PURE__ */ (0, import_jsx_runtime80.jsxs)("svg", { width, height, viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [
-  /* @__PURE__ */ (0, import_jsx_runtime80.jsx)(
+var import_jsx_runtime79 = require("react/jsx-runtime");
+var Building = ({ color = "currentColor", height = 24, width = 24 }) => /* @__PURE__ */ (0, import_jsx_runtime79.jsxs)("svg", { width, height, viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [
+  /* @__PURE__ */ (0, import_jsx_runtime79.jsx)(
     "path",
     {
       d: "M6 22V4a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2v18Z",
@@ -9922,25 +10004,25 @@ var Building = ({ color = "currentColor", height = 24, width = 24 }) => /* @__PU
       strokeLinejoin: "round"
     }
   ),
-  /* @__PURE__ */ (0, import_jsx_runtime80.jsx)("path", { d: "M6 12h4", stroke: color, strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }),
-  /* @__PURE__ */ (0, import_jsx_runtime80.jsx)("path", { d: "M6 8h4", stroke: color, strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }),
-  /* @__PURE__ */ (0, import_jsx_runtime80.jsx)("path", { d: "M14 8h4", stroke: color, strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }),
-  /* @__PURE__ */ (0, import_jsx_runtime80.jsx)("path", { d: "M14 12h4", stroke: color, strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }),
-  /* @__PURE__ */ (0, import_jsx_runtime80.jsx)("path", { d: "M6 18h4", stroke: color, strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }),
-  /* @__PURE__ */ (0, import_jsx_runtime80.jsx)("path", { d: "M14 18h4", stroke: color, strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" })
+  /* @__PURE__ */ (0, import_jsx_runtime79.jsx)("path", { d: "M6 12h4", stroke: color, strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }),
+  /* @__PURE__ */ (0, import_jsx_runtime79.jsx)("path", { d: "M6 8h4", stroke: color, strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }),
+  /* @__PURE__ */ (0, import_jsx_runtime79.jsx)("path", { d: "M14 8h4", stroke: color, strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }),
+  /* @__PURE__ */ (0, import_jsx_runtime79.jsx)("path", { d: "M14 12h4", stroke: color, strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }),
+  /* @__PURE__ */ (0, import_jsx_runtime79.jsx)("path", { d: "M6 18h4", stroke: color, strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }),
+  /* @__PURE__ */ (0, import_jsx_runtime79.jsx)("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
-var import_jsx_runtime81 = require("react/jsx-runtime");
-var Check = ({ color = "currentColor", height = 24, width = 24 }) => /* @__PURE__ */ (0, import_jsx_runtime81.jsx)("svg", { width, height, viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ (0, import_jsx_runtime81.jsx)("path", { d: "M20 6 9 17l-5-5", stroke: color, strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) });
+var import_jsx_runtime80 = require("react/jsx-runtime");
+var Check = ({ color = "currentColor", height = 24, width = 24 }) => /* @__PURE__ */ (0, import_jsx_runtime80.jsx)("svg", { width, height, viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ (0, import_jsx_runtime80.jsx)("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
-var import_jsx_runtime82 = require("react/jsx-runtime");
-var ChevronDown = ({ color = "currentColor", height = 24, width = 24 }) => /* @__PURE__ */ (0, import_jsx_runtime82.jsx)("svg", { width, height, viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ (0, import_jsx_runtime82.jsx)("path", { d: "m6 9 6 6 6-6", stroke: color, strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) });
+var import_jsx_runtime81 = require("react/jsx-runtime");
+var ChevronDown = ({ color = "currentColor", height = 24, width = 24 }) => /* @__PURE__ */ (0, import_jsx_runtime81.jsx)("svg", { width, height, viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ (0, import_jsx_runtime81.jsx)("path", { d: "m6 9 6 6 6-6", stroke: color, strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) });
 ChevronDown.displayName = "ChevronDown";
 var ChevronDown_default = ChevronDown;
 
@@ -10170,7 +10252,7 @@ var useStyles23 = (theme, colorScheme) => {
 var BaseOrganizationSwitcher_styles_default = useStyles23;
 
 // src/components/presentation/OrganizationSwitcher/BaseOrganizationSwitcher.tsx
-var import_jsx_runtime83 = require("react/jsx-runtime");
+var import_jsx_runtime82 = require("react/jsx-runtime");
 var BaseOrganizationSwitcher = ({
   organizations,
   currentOrganization,
@@ -10223,8 +10305,8 @@ var BaseOrganizationSwitcher = ({
   const switchableOrganizations = organizations.filter(
     (org) => org.id !== currentOrganization?.id
   );
-  const defaultRenderOrganization2 = (organization, isSelected) => /* @__PURE__ */ (0, import_jsx_runtime83.jsxs)(import_jsx_runtime83.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime83.jsx)(
+  const defaultRenderOrganization2 = (organization, isSelected) => /* @__PURE__ */ (0, import_jsx_runtime82.jsxs)(import_jsx_runtime82.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime82.jsx)(
       Avatar,
       {
         variant: "square",
@@ -10234,24 +10316,24 @@ var BaseOrganizationSwitcher = ({
         alt: `${organization.name} avatar`
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime83.jsxs)("div", { className: (0, import_css49.cx)(styles.organizationInfo), children: [
-      /* @__PURE__ */ (0, import_jsx_runtime83.jsx)(Typography_default, { variant: "body2", fontWeight: "medium", className: (0, import_css49.cx)(styles.organizationName), children: organization.name }),
-      /* @__PURE__ */ (0, import_jsx_runtime83.jsxs)("div", { className: (0, import_css49.cx)(styles.organizationMeta), children: [
-        showMemberCount && organization.memberCount !== void 0 && /* @__PURE__ */ (0, import_jsx_runtime83.jsxs)("span", { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime82.jsxs)("div", { className: (0, import_css49.cx)(styles.organizationInfo), children: [
+      /* @__PURE__ */ (0, import_jsx_runtime82.jsx)(Typography_default, { variant: "body2", fontWeight: "medium", className: (0, import_css49.cx)(styles.organizationName), children: organization.name }),
+      /* @__PURE__ */ (0, import_jsx_runtime82.jsxs)("div", { className: (0, import_css49.cx)(styles.organizationMeta), children: [
+        showMemberCount && organization.memberCount !== void 0 && /* @__PURE__ */ (0, import_jsx_runtime82.jsxs)("span", { children: [
           organization.memberCount,
           " ",
           organization.memberCount === 1 ? t("organization.switcher.member") : t("organization.switcher.members")
         ] }),
-        showRole && organization.role && showMemberCount && organization.memberCount !== void 0 && /* @__PURE__ */ (0, import_jsx_runtime83.jsx)("span", { children: " \u2022 " }),
-        showRole && organization.role && /* @__PURE__ */ (0, import_jsx_runtime83.jsx)("span", { className: (0, import_css49.cx)(styles.roleCapitalized), children: organization.role })
+        showRole && organization.role && showMemberCount && organization.memberCount !== void 0 && /* @__PURE__ */ (0, import_jsx_runtime82.jsx)("span", { children: " \u2022 " }),
+        showRole && organization.role && /* @__PURE__ */ (0, import_jsx_runtime82.jsx)("span", { className: (0, import_css49.cx)(styles.roleCapitalized), children: organization.role })
       ] })
     ] }),
-    isSelected && /* @__PURE__ */ (0, import_jsx_runtime83.jsx)(Check_default, { width: "16", height: "16", color: theme.vars.colors.text.primary })
+    isSelected && /* @__PURE__ */ (0, import_jsx_runtime82.jsx)(Check_default, { width: "16", height: "16", color: theme.vars.colors.text.primary })
   ] });
-  const defaultRenderLoading2 = () => /* @__PURE__ */ (0, import_jsx_runtime83.jsx)("div", { className: (0, import_css49.cx)(styles.loadingContainer), children: /* @__PURE__ */ (0, import_jsx_runtime83.jsx)(Typography_default, { variant: "caption", className: (0, import_css49.cx)(styles.loadingText), children: t("organization.switcher.loading.organizations") }) });
-  const defaultRenderError2 = (errorMessage) => /* @__PURE__ */ (0, import_jsx_runtime83.jsx)("div", { className: (0, import_css49.cx)(styles.errorContainer), children: /* @__PURE__ */ (0, import_jsx_runtime83.jsx)(Typography_default, { variant: "caption", className: (0, import_css49.cx)(styles.errorText), children: errorMessage }) });
-  return /* @__PURE__ */ (0, import_jsx_runtime83.jsxs)("div", { className: (0, import_css49.cx)(styles.root, className), style, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime83.jsxs)(
+  const defaultRenderLoading2 = () => /* @__PURE__ */ (0, import_jsx_runtime82.jsx)("div", { className: (0, import_css49.cx)(styles.loadingContainer), children: /* @__PURE__ */ (0, import_jsx_runtime82.jsx)(Typography_default, { variant: "caption", className: (0, import_css49.cx)(styles.loadingText), children: t("organization.switcher.loading.organizations") }) });
+  const defaultRenderError2 = (errorMessage) => /* @__PURE__ */ (0, import_jsx_runtime82.jsx)("div", { className: (0, import_css49.cx)(styles.errorContainer), children: /* @__PURE__ */ (0, import_jsx_runtime82.jsx)(Typography_default, { variant: "caption", className: (0, import_css49.cx)(styles.errorText), children: errorMessage }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime82.jsxs)("div", { className: (0, import_css49.cx)(styles.root, className), style, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime82.jsxs)(
       Button_default,
       {
         ref: refs.setReference,
@@ -10261,8 +10343,8 @@ var BaseOrganizationSwitcher = ({
         size: "medium",
         ...getReferenceProps(),
         children: [
-          currentOrganization ? /* @__PURE__ */ (0, import_jsx_runtime83.jsxs)(import_jsx_runtime83.Fragment, { children: [
-            /* @__PURE__ */ (0, import_jsx_runtime83.jsx)(
+          currentOrganization ? /* @__PURE__ */ (0, import_jsx_runtime82.jsxs)(import_jsx_runtime82.Fragment, { children: [
+            /* @__PURE__ */ (0, import_jsx_runtime82.jsx)(
               Avatar,
               {
                 variant: "square",
@@ -10272,18 +10354,18 @@ var BaseOrganizationSwitcher = ({
                 alt: `${currentOrganization.name} avatar`
               }
             ),
-            showTriggerLabel && /* @__PURE__ */ (0, import_jsx_runtime83.jsx)(Typography_default, { variant: "body2", className: (0, import_css49.cx)(styles.triggerLabel), children: currentOrganization.name })
-          ] }) : /* @__PURE__ */ (0, import_jsx_runtime83.jsxs)(import_jsx_runtime83.Fragment, { children: [
-            /* @__PURE__ */ (0, import_jsx_runtime83.jsx)(Building_default, { width: avatarSize, height: avatarSize }),
-            showTriggerLabel && /* @__PURE__ */ (0, import_jsx_runtime83.jsx)(Typography_default, { variant: "body2", className: (0, import_css49.cx)(styles.triggerLabel), children: t("organization.switcher.select.organization") })
+            showTriggerLabel && /* @__PURE__ */ (0, import_jsx_runtime82.jsx)(Typography_default, { variant: "body2", className: (0, import_css49.cx)(styles.triggerLabel), children: currentOrganization.name })
+          ] }) : /* @__PURE__ */ (0, import_jsx_runtime82.jsxs)(import_jsx_runtime82.Fragment, { children: [
+            /* @__PURE__ */ (0, import_jsx_runtime82.jsx)(Building_default, { width: avatarSize, height: avatarSize }),
+            showTriggerLabel && /* @__PURE__ */ (0, import_jsx_runtime82.jsx)(Typography_default, { variant: "body2", className: (0, import_css49.cx)(styles.triggerLabel), children: t("organization.switcher.select.organization") })
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime83.jsx)(ChevronDown_default, { width: "16", height: "16" })
+          /* @__PURE__ */ (0, import_jsx_runtime82.jsx)(ChevronDown_default, { width: "16", height: "16" })
         ]
       }
     ),
-    isOpen && /* @__PURE__ */ (0, import_jsx_runtime83.jsx)(import_react74.FloatingPortal, { id: portalId, children: /* @__PURE__ */ (0, import_jsx_runtime83.jsx)(import_react74.FloatingFocusManager, { context, modal: false, children: /* @__PURE__ */ (0, import_jsx_runtime83.jsxs)("div", { ref: refs.setFloating, className: (0, import_css49.cx)(styles.content), style: floatingStyles, ...getFloatingProps(), children: [
-      currentOrganization && /* @__PURE__ */ (0, import_jsx_runtime83.jsxs)("div", { className: (0, import_css49.cx)(styles.header), children: [
-        /* @__PURE__ */ (0, import_jsx_runtime83.jsx)(
+    isOpen && /* @__PURE__ */ (0, import_jsx_runtime82.jsx)(import_react74.FloatingPortal, { id: portalId, children: /* @__PURE__ */ (0, import_jsx_runtime82.jsx)(import_react74.FloatingFocusManager, { context, modal: false, initialFocus: -1, children: /* @__PURE__ */ (0, import_jsx_runtime82.jsxs)("div", { ref: refs.setFloating, className: (0, import_css49.cx)(styles.content), style: floatingStyles, ...getFloatingProps(), children: [
+      currentOrganization && /* @__PURE__ */ (0, import_jsx_runtime82.jsxs)("div", { className: (0, import_css49.cx)(styles.header), children: [
+        /* @__PURE__ */ (0, import_jsx_runtime82.jsx)(
           Avatar,
           {
             variant: "square",
@@ -10293,10 +10375,10 @@ var BaseOrganizationSwitcher = ({
             alt: `${currentOrganization.name} avatar`
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime83.jsxs)("div", { className: (0, import_css49.cx)(styles.headerInfo), children: [
-          /* @__PURE__ */ (0, import_jsx_runtime83.jsx)(Typography_default, { noWrap: true, className: (0, import_css49.cx)(styles.headerName), variant: "body1", fontWeight: "medium", children: currentOrganization.name }),
-          /* @__PURE__ */ (0, import_jsx_runtime83.jsxs)("div", { className: (0, import_css49.cx)(styles.headerMeta), children: [
-            showMemberCount && currentOrganization.memberCount !== void 0 && /* @__PURE__ */ (0, import_jsx_runtime83.jsxs)(
+        /* @__PURE__ */ (0, import_jsx_runtime82.jsxs)("div", { className: (0, import_css49.cx)(styles.headerInfo), children: [
+          /* @__PURE__ */ (0, import_jsx_runtime82.jsx)(Typography_default, { noWrap: true, className: (0, import_css49.cx)(styles.headerName), variant: "body1", fontWeight: "medium", children: currentOrganization.name }),
+          /* @__PURE__ */ (0, import_jsx_runtime82.jsxs)("div", { className: (0, import_css49.cx)(styles.headerMeta), children: [
+            showMemberCount && currentOrganization.memberCount !== void 0 && /* @__PURE__ */ (0, import_jsx_runtime82.jsxs)(
               Typography_default,
               {
                 noWrap: true,
@@ -10306,17 +10388,17 @@ var BaseOrganizationSwitcher = ({
                   currentOrganization.memberCount,
                   " ",
                   currentOrganization.memberCount === 1 ? t("organization.switcher.member") : t("organization.switcher.members"),
-                  showRole && currentOrganization.role && /* @__PURE__ */ (0, import_jsx_runtime83.jsxs)("span", { children: [
+                  showRole && currentOrganization.role && /* @__PURE__ */ (0, import_jsx_runtime82.jsxs)("span", { children: [
                     " \u2022 ",
                     currentOrganization.role
                   ] })
                 ]
               }
             ),
-            showRole && currentOrganization.role && (!showMemberCount || currentOrganization.memberCount === void 0) && /* @__PURE__ */ (0, import_jsx_runtime83.jsx)(Typography_default, { noWrap: true, className: (0, import_css49.cx)(styles.headerRole), variant: "caption", color: "secondary", children: currentOrganization.role })
+            showRole && currentOrganization.role && (!showMemberCount || currentOrganization.memberCount === void 0) && /* @__PURE__ */ (0, import_jsx_runtime82.jsx)(Typography_default, { noWrap: true, className: (0, import_css49.cx)(styles.headerRole), variant: "caption", color: "secondary", children: currentOrganization.role })
           ] })
         ] }),
-        onManageProfile && /* @__PURE__ */ (0, import_jsx_runtime83.jsx)(
+        onManageProfile && /* @__PURE__ */ (0, import_jsx_runtime82.jsx)(
           Button_default,
           {
             onClick: onManageProfile,
@@ -10325,7 +10407,7 @@ var BaseOrganizationSwitcher = ({
             size: "small",
             "aria-label": "Manage Organization Profile",
             className: (0, import_css49.cx)(styles.manageButton),
-            endIcon: /* @__PURE__ */ (0, import_jsx_runtime83.jsxs)(
+            endIcon: /* @__PURE__ */ (0, import_jsx_runtime82.jsxs)(
               "svg",
               {
                 width: "16",
@@ -10337,8 +10419,8 @@ var BaseOrganizationSwitcher = ({
                 strokeLinecap: "round",
                 strokeLinejoin: "round",
                 children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime83.jsx)("circle", { cx: "12", cy: "12", r: "3" }),
-                  /* @__PURE__ */ (0, import_jsx_runtime83.jsx)("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__ */ (0, import_jsx_runtime82.jsx)("circle", { cx: "12", cy: "12", r: "3" }),
+                  /* @__PURE__ */ (0, import_jsx_runtime82.jsx)("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" })
                 ]
               }
             ),
@@ -10346,20 +10428,20 @@ var BaseOrganizationSwitcher = ({
           }
         )
       ] }),
-      organizations.length > 1 && /* @__PURE__ */ (0, import_jsx_runtime83.jsx)(
+      organizations.length > 1 && /* @__PURE__ */ (0, import_jsx_runtime82.jsx)(
         "div",
         {
           className: (0, import_css49.cx)(styles.header, styles.sectionHeaderContainer),
           style: {
             borderTop: currentOrganization ? `1px solid ${theme.vars.colors.border}` : "none"
           },
-          children: /* @__PURE__ */ (0, import_jsx_runtime83.jsx)(Typography_default, { variant: "caption", fontWeight: 600, className: (0, import_css49.cx)(styles.sectionHeader), children: t("organization.switcher.switch.organization") })
+          children: /* @__PURE__ */ (0, import_jsx_runtime82.jsx)(Typography_default, { variant: "caption", fontWeight: 600, className: (0, import_css49.cx)(styles.sectionHeader), children: t("organization.switcher.switch.organization") })
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime83.jsx)("div", { className: (0, import_css49.cx)(styles.menu), children: loading ? renderLoading ? renderLoading() : defaultRenderLoading2() : error ? renderError ? renderError(error) : defaultRenderError2(error) : /* @__PURE__ */ (0, import_jsx_runtime83.jsxs)(import_jsx_runtime83.Fragment, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime82.jsx)("div", { className: (0, import_css49.cx)(styles.menu), children: loading ? renderLoading ? renderLoading() : defaultRenderLoading2() : error ? renderError ? renderError(error) : defaultRenderError2(error) : /* @__PURE__ */ (0, import_jsx_runtime82.jsxs)(import_jsx_runtime82.Fragment, { children: [
         switchableOrganizations.map((organization) => {
           const isSelected = false;
-          return /* @__PURE__ */ (0, import_jsx_runtime83.jsx)(
+          return /* @__PURE__ */ (0, import_jsx_runtime82.jsx)(
             Button_default,
             {
               onClick: () => handleOrganizationSwitch(organization),
@@ -10377,10 +10459,10 @@ var BaseOrganizationSwitcher = ({
             organization.id
           );
         }),
-        menuItems.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime83.jsxs)(import_jsx_runtime83.Fragment, { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime83.jsx)("div", { className: (0, import_css49.cx)(styles.menuDivider) }),
+        menuItems.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime82.jsxs)(import_jsx_runtime82.Fragment, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime82.jsx)("div", { className: (0, import_css49.cx)(styles.menuDivider) }),
           menuItems.map(
-            (item, index) => /* @__PURE__ */ (0, import_jsx_runtime83.jsx)("div", { children: item.href ? /* @__PURE__ */ (0, import_jsx_runtime83.jsxs)(
+            (item, index) => /* @__PURE__ */ (0, import_jsx_runtime82.jsx)("div", { children: item.href ? /* @__PURE__ */ (0, import_jsx_runtime82.jsxs)(
               "a",
               {
                 href: item.href,
@@ -10394,10 +10476,10 @@ var BaseOrganizationSwitcher = ({
                 onBlur: () => setHoveredItemIndex(null),
                 children: [
                   item.icon,
-                  /* @__PURE__ */ (0, import_jsx_runtime83.jsx)("span", { children: item.label })
+                  /* @__PURE__ */ (0, import_jsx_runtime82.jsx)("span", { children: item.label })
                 ]
               }
-            ) : /* @__PURE__ */ (0, import_jsx_runtime83.jsx)(
+            ) : /* @__PURE__ */ (0, import_jsx_runtime82.jsx)(
               Button_default,
               {
                 onClick: () => handleMenuItemClick(item),
@@ -10571,7 +10653,7 @@ var useStyles24 = (theme, colorScheme) => {
 var BaseCreateOrganization_styles_default = useStyles24;
 
 // src/components/presentation/CreateOrganization/BaseCreateOrganization.tsx
-var import_jsx_runtime84 = require("react/jsx-runtime");
+var import_jsx_runtime83 = require("react/jsx-runtime");
 var BaseCreateOrganization = ({
   cardLayout = true,
   className = "",
@@ -10658,13 +10740,13 @@ var BaseCreateOrganization = ({
       console.error("Form submission error:", submitError);
     }
   };
-  const createOrganizationContent = /* @__PURE__ */ (0, import_jsx_runtime84.jsx)("div", { className: (0, import_css51.cx)(styles.root, cardLayout && styles.card, className), style, children: /* @__PURE__ */ (0, import_jsx_runtime84.jsxs)("div", { className: (0, import_css51.cx)(styles.content), children: [
-    /* @__PURE__ */ (0, import_jsx_runtime84.jsxs)("form", { id: "create-organization-form", className: (0, import_css51.cx)(styles.form), onSubmit: handleSubmit, children: [
-      error && /* @__PURE__ */ (0, import_jsx_runtime84.jsxs)(Alert_default, { variant: "error", className: styles.errorAlert, children: [
-        /* @__PURE__ */ (0, import_jsx_runtime84.jsx)(Alert_default.Title, { children: "Error" }),
-        /* @__PURE__ */ (0, import_jsx_runtime84.jsx)(Alert_default.Description, { children: error })
+  const createOrganizationContent = /* @__PURE__ */ (0, import_jsx_runtime83.jsx)("div", { className: (0, import_css51.cx)(styles.root, cardLayout && styles.card, className), style, children: /* @__PURE__ */ (0, import_jsx_runtime83.jsxs)("div", { className: (0, import_css51.cx)(styles.content), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime83.jsxs)("form", { id: "create-organization-form", className: (0, import_css51.cx)(styles.form), onSubmit: handleSubmit, children: [
+      error && /* @__PURE__ */ (0, import_jsx_runtime83.jsxs)(Alert_default, { variant: "error", className: styles.errorAlert, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime83.jsx)(Alert_default.Title, { children: "Error" }),
+        /* @__PURE__ */ (0, import_jsx_runtime83.jsx)(Alert_default.Description, { children: error })
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime84.jsx)("div", { className: (0, import_css51.cx)(styles.fieldGroup), children: /* @__PURE__ */ (0, import_jsx_runtime84.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime83.jsx)("div", { className: (0, import_css51.cx)(styles.fieldGroup), children: /* @__PURE__ */ (0, import_jsx_runtime83.jsx)(
         TextField_default,
         {
           label: `${t("organization.create.name.label")}`,
@@ -10677,7 +10759,7 @@ var BaseCreateOrganization = ({
           className: (0, import_css51.cx)(styles.input)
         }
       ) }),
-      /* @__PURE__ */ (0, import_jsx_runtime84.jsx)("div", { className: (0, import_css51.cx)(styles.fieldGroup), children: /* @__PURE__ */ (0, import_jsx_runtime84.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime83.jsx)("div", { className: (0, import_css51.cx)(styles.fieldGroup), children: /* @__PURE__ */ (0, import_jsx_runtime83.jsx)(
         TextField_default,
         {
           label: `${t("organization.create.handle.label") || "Organization Handle"}`,
@@ -10691,9 +10773,9 @@ var BaseCreateOrganization = ({
           className: (0, import_css51.cx)(styles.input)
         }
       ) }),
-      /* @__PURE__ */ (0, import_jsx_runtime84.jsx)("div", { className: (0, import_css51.cx)(styles.fieldGroup), children: /* @__PURE__ */ (0, import_jsx_runtime84.jsxs)(FormControl_default, { error: formErrors.description, children: [
-        /* @__PURE__ */ (0, import_jsx_runtime84.jsx)(InputLabel_default, { required: true, children: t("organization.create.description.label") }),
-        /* @__PURE__ */ (0, import_jsx_runtime84.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime83.jsx)("div", { className: (0, import_css51.cx)(styles.fieldGroup), children: /* @__PURE__ */ (0, import_jsx_runtime83.jsxs)(FormControl_default, { error: formErrors.description, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime83.jsx)(InputLabel_default, { required: true, children: t("organization.create.description.label") }),
+        /* @__PURE__ */ (0, import_jsx_runtime83.jsx)(
           "textarea",
           {
             className: (0, import_css51.cx)(styles.textarea, formErrors.description && styles.textareaError),
@@ -10707,23 +10789,23 @@ var BaseCreateOrganization = ({
       ] }) }),
       renderAdditionalFields && renderAdditionalFields()
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime84.jsxs)("div", { className: (0, import_css51.cx)(styles.actions), children: [
-      onCancel && /* @__PURE__ */ (0, import_jsx_runtime84.jsx)(Button_default, { type: "button", variant: "outline", onClick: onCancel, disabled: loading, children: t("organization.create.cancel") }),
-      /* @__PURE__ */ (0, import_jsx_runtime84.jsx)(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__ */ (0, import_jsx_runtime83.jsxs)("div", { className: (0, import_css51.cx)(styles.actions), children: [
+      onCancel && /* @__PURE__ */ (0, import_jsx_runtime83.jsx)(Button_default, { type: "button", variant: "outline", onClick: onCancel, disabled: loading, children: t("organization.create.cancel") }),
+      /* @__PURE__ */ (0, import_jsx_runtime83.jsx)(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__ */ (0, import_jsx_runtime84.jsx)(Dialog_default, { open, onOpenChange, children: /* @__PURE__ */ (0, import_jsx_runtime84.jsxs)(Dialog_default.Content, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime84.jsx)(Dialog_default.Heading, { children: title }),
-      /* @__PURE__ */ (0, import_jsx_runtime84.jsx)("div", { className: styles.popup, children: createOrganizationContent })
+    return /* @__PURE__ */ (0, import_jsx_runtime83.jsx)(Dialog_default, { open, onOpenChange, children: /* @__PURE__ */ (0, import_jsx_runtime83.jsxs)(Dialog_default.Content, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime83.jsx)(Dialog_default.Heading, { children: title }),
+      /* @__PURE__ */ (0, import_jsx_runtime83.jsx)("div", { className: styles.popup, children: createOrganizationContent })
     ] }) });
   }
   return createOrganizationContent;
 };
 
 // src/api/createOrganization.ts
-var import_browser63 = require("@asgardeo/browser");
-var httpClient6 = import_browser63.AsgardeoSPAClient.getInstance().httpRequest.bind(import_browser63.AsgardeoSPAClient.getInstance());
+var import_browser64 = require("@asgardeo/browser");
+var httpClient6 = import_browser64.AsgardeoSPAClient.getInstance().httpRequest.bind(import_browser64.AsgardeoSPAClient.getInstance());
 var createOrganization = async ({ fetcher, ...requestConfig }) => {
   const defaultFetcher = async (url, config) => {
     const response = await httpClient6({
@@ -10740,7 +10822,7 @@ var createOrganization = async ({ fetcher, ...requestConfig }) => {
       text: () => Promise.resolve(typeof response.data === "string" ? response.data : JSON.stringify(response.data))
     };
   };
-  return (0, import_browser63.createOrganization)({
+  return (0, import_browser64.createOrganization)({
     ...requestConfig,
     fetcher: fetcher || defaultFetcher
   });
@@ -10748,7 +10830,7 @@ var createOrganization = async ({ fetcher, ...requestConfig }) => {
 var createOrganization_default = createOrganization;
 
 // src/components/presentation/CreateOrganization/CreateOrganization.tsx
-var import_jsx_runtime85 = require("react/jsx-runtime");
+var import_jsx_runtime84 = require("react/jsx-runtime");
 var CreateOrganization = ({
   onCreateOrganization,
   fallback = null,
@@ -10764,7 +10846,7 @@ var CreateOrganization = ({
     return fallback;
   }
   if (!isSignedIn) {
-    return /* @__PURE__ */ (0, import_jsx_runtime85.jsx)(import_jsx_runtime85.Fragment, {});
+    return /* @__PURE__ */ (0, import_jsx_runtime84.jsx)(import_jsx_runtime84.Fragment, {});
   }
   const parentId = defaultParentId || currentOrganization?.id || "";
   const handleSubmit = async (payload) => {
@@ -10798,7 +10880,7 @@ var CreateOrganization = ({
       setLoading(false);
     }
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime85.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime84.jsx)(
     BaseCreateOrganization,
     {
       onSubmit: handleSubmit,
@@ -10815,12 +10897,12 @@ var CreateOrganization = ({
 var import_react83 = require("react");
 
 // src/components/presentation/OrganizationProfile/BaseOrganizationProfile.tsx
-var import_browser65 = require("@asgardeo/browser");
+var import_browser66 = require("@asgardeo/browser");
 var import_css55 = require("@emotion/css");
 var import_react82 = require("react");
 
 // src/components/primitives/KeyValueInput/KeyValueInput.tsx
-var import_browser64 = require("@asgardeo/browser");
+var import_browser65 = require("@asgardeo/browser");
 var import_css53 = require("@emotion/css");
 var import_react80 = require("react");
 
@@ -10980,7 +11062,7 @@ var useStyles25 = (theme, colorScheme, disabled, readOnly, hasError) => {
 var KeyValueInput_styles_default = useStyles25;
 
 // src/components/primitives/KeyValueInput/KeyValueInput.tsx
-var import_jsx_runtime86 = require("react/jsx-runtime");
+var import_jsx_runtime85 = require("react/jsx-runtime");
 var KeyValueInput = ({
   className = "",
   disabled = false,
@@ -11055,105 +11137,105 @@ var KeyValueInput = ({
   );
   const canAddMore = !maxPairs || pairs.length < maxPairs;
   const isAddDisabled = disabled || readOnly || !canAddMore || !newKey.trim() || !newValue.trim();
-  return /* @__PURE__ */ (0, import_jsx_runtime86.jsxs)("div", { className: (0, import_css53.cx)((0, import_browser64.withVendorCSSClassPrefix)((0, import_browser64.bem)("key-value-input")), styles.container, className), children: [
-    label && /* @__PURE__ */ (0, import_jsx_runtime86.jsxs)("label", { className: (0, import_css53.cx)((0, import_browser64.withVendorCSSClassPrefix)((0, import_browser64.bem)("key-value-input", "label")), styles.label), children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime85.jsxs)("div", { className: (0, import_css53.cx)((0, import_browser65.withVendorCSSClassPrefix)((0, import_browser65.bem)("key-value-input")), styles.container, className), children: [
+    label && /* @__PURE__ */ (0, import_jsx_runtime85.jsxs)("label", { className: (0, import_css53.cx)((0, import_browser65.withVendorCSSClassPrefix)((0, import_browser65.bem)("key-value-input", "label")), styles.label), children: [
       label,
-      required && /* @__PURE__ */ (0, import_jsx_runtime86.jsx)(
+      required && /* @__PURE__ */ (0, import_jsx_runtime85.jsx)(
         "span",
         {
-          className: (0, import_css53.cx)((0, import_browser64.withVendorCSSClassPrefix)((0, import_browser64.bem)("key-value-input", "required")), styles.requiredIndicator),
+          className: (0, import_css53.cx)((0, import_browser65.withVendorCSSClassPrefix)((0, import_browser65.bem)("key-value-input", "required")), styles.requiredIndicator),
           children: " *"
         }
       )
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime86.jsxs)("div", { className: (0, import_css53.cx)((0, import_browser64.withVendorCSSClassPrefix)((0, import_browser64.bem)("key-value-input", "pairs-list")), styles.pairsList), children: [
-      pairs.length === 0 && readOnly ? /* @__PURE__ */ (0, import_jsx_runtime86.jsx)("div", { className: (0, import_css53.cx)((0, import_browser64.withVendorCSSClassPrefix)((0, import_browser64.bem)("key-value-input", "empty-state")), styles.emptyState), children: "No attributes defined" }) : readOnly ? pairs.map((pair, index) => /* @__PURE__ */ (0, import_jsx_runtime86.jsxs)(
+    /* @__PURE__ */ (0, import_jsx_runtime85.jsxs)("div", { className: (0, import_css53.cx)((0, import_browser65.withVendorCSSClassPrefix)((0, import_browser65.bem)("key-value-input", "pairs-list")), styles.pairsList), children: [
+      pairs.length === 0 && readOnly ? /* @__PURE__ */ (0, import_jsx_runtime85.jsx)("div", { className: (0, import_css53.cx)((0, import_browser65.withVendorCSSClassPrefix)((0, import_browser65.bem)("key-value-input", "empty-state")), styles.emptyState), children: "No attributes defined" }) : readOnly ? pairs.map((pair, index) => /* @__PURE__ */ (0, import_jsx_runtime85.jsxs)(
         "div",
         {
-          className: (0, import_css53.cx)((0, import_browser64.withVendorCSSClassPrefix)((0, import_browser64.bem)("key-value-input", "readonly-pair")), styles.readOnlyPair),
+          className: (0, import_css53.cx)((0, import_browser65.withVendorCSSClassPrefix)((0, import_browser65.bem)("key-value-input", "readonly-pair")), styles.readOnlyPair),
           children: [
-            /* @__PURE__ */ (0, import_jsx_runtime86.jsxs)(
+            /* @__PURE__ */ (0, import_jsx_runtime85.jsxs)(
               "span",
               {
-                className: (0, import_css53.cx)((0, import_browser64.withVendorCSSClassPrefix)((0, import_browser64.bem)("key-value-input", "readonly-key")), styles.readOnlyKey),
+                className: (0, import_css53.cx)((0, import_browser65.withVendorCSSClassPrefix)((0, import_browser65.bem)("key-value-input", "readonly-key")), styles.readOnlyKey),
                 children: [
                   pair.key,
                   ":"
                 ]
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime86.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime85.jsx)(
               "span",
               {
-                className: (0, import_css53.cx)((0, import_browser64.withVendorCSSClassPrefix)((0, import_browser64.bem)("key-value-input", "readonly-value")), styles.readOnlyValue),
+                className: (0, import_css53.cx)((0, import_browser65.withVendorCSSClassPrefix)((0, import_browser65.bem)("key-value-input", "readonly-value")), styles.readOnlyValue),
                 children: pair.value
               }
             )
           ]
         },
         `${pair.key}-${index}`
-      )) : pairs.map((pair, index) => /* @__PURE__ */ (0, import_jsx_runtime86.jsxs)(
+      )) : pairs.map((pair, index) => /* @__PURE__ */ (0, import_jsx_runtime85.jsxs)(
         "div",
         {
-          className: (0, import_css53.cx)((0, import_browser64.withVendorCSSClassPrefix)((0, import_browser64.bem)("key-value-input", "pair-row")), styles.pairRow),
+          className: (0, import_css53.cx)((0, import_browser65.withVendorCSSClassPrefix)((0, import_browser65.bem)("key-value-input", "pair-row")), styles.pairRow),
           children: [
-            /* @__PURE__ */ (0, import_jsx_runtime86.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime85.jsx)(
               TextField_default,
               {
                 placeholder: keyPlaceholder,
                 value: pair.key,
                 onChange: (e) => handleUpdatePair(index, "key", e.target.value),
                 disabled: disabled || readOnly,
-                className: (0, import_css53.cx)((0, import_browser64.withVendorCSSClassPrefix)((0, import_browser64.bem)("key-value-input", "pair-input")), styles.pairInput),
+                className: (0, import_css53.cx)((0, import_browser65.withVendorCSSClassPrefix)((0, import_browser65.bem)("key-value-input", "pair-input")), styles.pairInput),
                 "aria-label": `${keyLabel} ${index + 1}`
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime86.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime85.jsx)(
               TextField_default,
               {
                 placeholder: valuePlaceholder,
                 value: pair.value,
                 onChange: (e) => handleUpdatePair(index, "value", e.target.value),
                 disabled: disabled || readOnly,
-                className: (0, import_css53.cx)((0, import_browser64.withVendorCSSClassPrefix)((0, import_browser64.bem)("key-value-input", "pair-input")), styles.pairInput),
+                className: (0, import_css53.cx)((0, import_browser65.withVendorCSSClassPrefix)((0, import_browser65.bem)("key-value-input", "pair-input")), styles.pairInput),
                 "aria-label": `${valueLabel} ${index + 1}`
               }
             ),
-            !readOnly && /* @__PURE__ */ (0, import_jsx_runtime86.jsx)(
+            !readOnly && /* @__PURE__ */ (0, import_jsx_runtime85.jsx)(
               "button",
               {
                 type: "button",
                 onClick: () => handleRemovePair(index),
                 disabled,
-                className: (0, import_css53.cx)((0, import_browser64.withVendorCSSClassPrefix)((0, import_browser64.bem)("key-value-input", "remove-button")), styles.removeButton),
+                className: (0, import_css53.cx)((0, import_browser65.withVendorCSSClassPrefix)((0, import_browser65.bem)("key-value-input", "remove-button")), styles.removeButton),
                 "aria-label": `${removeButtonText} ${pair.key}`,
-                children: /* @__PURE__ */ (0, import_jsx_runtime86.jsx)(X_default, { width: 16, height: 16 })
+                children: /* @__PURE__ */ (0, import_jsx_runtime85.jsx)(X_default, { width: 16, height: 16 })
               }
             )
           ]
         },
         `${pair.key}-${index}`
       )),
-      !readOnly && /* @__PURE__ */ (0, import_jsx_runtime86.jsxs)("div", { className: (0, import_css53.cx)((0, import_browser64.withVendorCSSClassPrefix)((0, import_browser64.bem)("key-value-input", "add-row")), styles.addRow), children: [
-        /* @__PURE__ */ (0, import_jsx_runtime86.jsx)(
+      !readOnly && /* @__PURE__ */ (0, import_jsx_runtime85.jsxs)("div", { className: (0, import_css53.cx)((0, import_browser65.withVendorCSSClassPrefix)((0, import_browser65.bem)("key-value-input", "add-row")), styles.addRow), children: [
+        /* @__PURE__ */ (0, import_jsx_runtime85.jsx)(
           TextField_default,
           {
             placeholder: keyPlaceholder,
             value: newKey,
             onChange: (e) => setNewKey(e.target.value),
             disabled,
-            className: (0, import_css53.cx)((0, import_browser64.withVendorCSSClassPrefix)((0, import_browser64.bem)("key-value-input", "pair-input")), styles.pairInput),
+            className: (0, import_css53.cx)((0, import_browser65.withVendorCSSClassPrefix)((0, import_browser65.bem)("key-value-input", "pair-input")), styles.pairInput),
             "aria-label": "New key"
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime86.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime85.jsx)(
           TextField_default,
           {
             placeholder: valuePlaceholder,
             value: newValue,
             onChange: (e) => setNewValue(e.target.value),
             disabled,
-            className: (0, import_css53.cx)((0, import_browser64.withVendorCSSClassPrefix)((0, import_browser64.bem)("key-value-input", "pair-input")), styles.pairInput),
+            className: (0, import_css53.cx)((0, import_browser65.withVendorCSSClassPrefix)((0, import_browser65.bem)("key-value-input", "pair-input")), styles.pairInput),
             "aria-label": "New value",
             onKeyPress: (e) => {
               if (e.key === "Enter" && !isAddDisabled) {
@@ -11162,21 +11244,21 @@ var KeyValueInput = ({
             }
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime86.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime85.jsx)(
           "button",
           {
             type: "button",
             onClick: handleAddPair,
             disabled: isAddDisabled,
-            className: (0, import_css53.cx)((0, import_browser64.withVendorCSSClassPrefix)((0, import_browser64.bem)("key-value-input", "add-button")), styles.addButton),
+            className: (0, import_css53.cx)((0, import_browser65.withVendorCSSClassPrefix)((0, import_browser65.bem)("key-value-input", "add-button")), styles.addButton),
             "aria-label": "Add new key-value pair",
-            children: /* @__PURE__ */ (0, import_jsx_runtime86.jsx)(Plus_default, { width: 16, height: 16 })
+            children: /* @__PURE__ */ (0, import_jsx_runtime85.jsx)(Plus_default, { width: 16, height: 16 })
           }
         )
       ] })
     ] }),
-    (helperText || error) && /* @__PURE__ */ (0, import_jsx_runtime86.jsx)("div", { className: (0, import_css53.cx)((0, import_browser64.withVendorCSSClassPrefix)((0, import_browser64.bem)("key-value-input", "helper-text")), styles.helperText), children: error || helperText }),
-    maxPairs && /* @__PURE__ */ (0, import_jsx_runtime86.jsxs)("div", { className: (0, import_css53.cx)((0, import_browser64.withVendorCSSClassPrefix)((0, import_browser64.bem)("key-value-input", "counter")), styles.counterText), children: [
+    (helperText || error) && /* @__PURE__ */ (0, import_jsx_runtime85.jsx)("div", { className: (0, import_css53.cx)((0, import_browser65.withVendorCSSClassPrefix)((0, import_browser65.bem)("key-value-input", "helper-text")), styles.helperText), children: error || helperText }),
+    maxPairs && /* @__PURE__ */ (0, import_jsx_runtime85.jsxs)("div", { className: (0, import_css53.cx)((0, import_browser65.withVendorCSSClassPrefix)((0, import_browser65.bem)("key-value-input", "counter")), styles.counterText), children: [
       pairs.length,
       " of ",
       maxPairs,
@@ -11343,7 +11425,7 @@ var useStyles26 = (theme, colorScheme) => {
 var BaseOrganizationProfile_styles_default = useStyles26;
 
 // src/components/presentation/OrganizationProfile/BaseOrganizationProfile.tsx
-var import_jsx_runtime87 = require("react/jsx-runtime");
+var import_jsx_runtime86 = require("react/jsx-runtime");
 var BaseOrganizationProfile = ({
   fallback = null,
   className = "",
@@ -11380,13 +11462,13 @@ var BaseOrganizationProfile = ({
       key: "created",
       label: "Created Date",
       editable: false,
-      render: (value) => (0, import_browser65.formatDate)(value)
+      render: (value) => (0, import_browser66.formatDate)(value)
     },
     {
       key: "lastModified",
       label: "Last Modified Date",
       editable: false,
-      render: (value) => (0, import_browser65.formatDate)(value)
+      render: (value) => (0, import_browser66.formatDate)(value)
     }
   ]
 }) => {
@@ -11394,7 +11476,7 @@ var BaseOrganizationProfile = ({
   const styles = BaseOrganizationProfile_styles_default(theme, colorScheme);
   const [editedOrganization, setEditedOrganization] = (0, import_react82.useState)(organization);
   const [editingFields, setEditingFields] = (0, import_react82.useState)({});
-  const PencilIcon = () => /* @__PURE__ */ (0, import_jsx_runtime87.jsx)(
+  const PencilIcon = () => /* @__PURE__ */ (0, import_jsx_runtime86.jsx)(
     "svg",
     {
       width: "16",
@@ -11405,7 +11487,7 @@ var BaseOrganizationProfile = ({
       strokeWidth: "2",
       strokeLinecap: "round",
       strokeLinejoin: "round",
-      children: /* @__PURE__ */ (0, import_jsx_runtime87.jsx)("path", { d: "M17 3a2.828 2.828 0 1 1 4 4L7.5 20.5 2 22l1.5-5.5L17 3z" })
+      children: /* @__PURE__ */ (0, import_jsx_runtime86.jsx)("path", { d: "M17 3a2.828 2.828 0 1 1 4 4L7.5 20.5 2 22l1.5-5.5L17 3z" })
     }
   );
   const toggleFieldEdit = (0, import_react82.useCallback)((fieldName) => {
@@ -11468,7 +11550,7 @@ var BaseOrganizationProfile = ({
       let fieldInput;
       if (key === "attributes") {
         const attributesValue = typeof fieldValue === "object" && fieldValue !== null ? fieldValue : {};
-        fieldInput = /* @__PURE__ */ (0, import_jsx_runtime87.jsx)(
+        fieldInput = /* @__PURE__ */ (0, import_jsx_runtime86.jsx)(
           KeyValueInput_default,
           {
             value: attributesValue,
@@ -11506,26 +11588,26 @@ var BaseOrganizationProfile = ({
           }
         );
       } else {
-        fieldInput = /* @__PURE__ */ (0, import_jsx_runtime87.jsx)(TextField_default, { ...commonProps });
+        fieldInput = /* @__PURE__ */ (0, import_jsx_runtime86.jsx)(TextField_default, { ...commonProps });
       }
-      return /* @__PURE__ */ (0, import_jsx_runtime87.jsxs)(import_jsx_runtime87.Fragment, { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime87.jsx)("span", { className: (0, import_css55.cx)(styles.label), children: label }),
-        /* @__PURE__ */ (0, import_jsx_runtime87.jsx)("div", { className: (0, import_css55.cx)(styles.value), children: fieldInput })
+      return /* @__PURE__ */ (0, import_jsx_runtime86.jsxs)(import_jsx_runtime86.Fragment, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime86.jsx)("span", { className: (0, import_css55.cx)(styles.label), children: label }),
+        /* @__PURE__ */ (0, import_jsx_runtime86.jsx)("div", { className: (0, import_css55.cx)(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__ */ (0, import_jsx_runtime87.jsx)(KeyValueInput_default, { value, readOnly: true, label: "" }) : String(renderedValue);
+      displayValue = key === "attributes" && typeof value === "object" && value !== null ? /* @__PURE__ */ (0, import_jsx_runtime86.jsx)(KeyValueInput_default, { value, readOnly: true, label: "" }) : String(renderedValue);
     } else if (isFieldEditable) {
       displayValue = getFieldPlaceholder(key);
     } else {
       displayValue = "-";
     }
-    return /* @__PURE__ */ (0, import_jsx_runtime87.jsxs)(import_jsx_runtime87.Fragment, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime87.jsx)("span", { className: (0, import_css55.cx)(styles.label), children: label }),
-      /* @__PURE__ */ (0, import_jsx_runtime87.jsx)("div", { className: (0, import_css55.cx)(styles.value, !hasValue && styles.valueEmpty), children: !hasValue && isFieldEditable && onStartEdit ? /* @__PURE__ */ (0, import_jsx_runtime87.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime86.jsxs)(import_jsx_runtime86.Fragment, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime86.jsx)("span", { className: (0, import_css55.cx)(styles.label), children: label }),
+      /* @__PURE__ */ (0, import_jsx_runtime86.jsx)("div", { className: (0, import_css55.cx)(styles.value, !hasValue && styles.valueEmpty), children: !hasValue && isFieldEditable && onStartEdit ? /* @__PURE__ */ (0, import_jsx_runtime86.jsx)(
         Button_default,
         {
           onClick: onStartEdit,
@@ -11548,8 +11630,8 @@ var BaseOrganizationProfile = ({
     if (!shouldShow) {
       return null;
     }
-    return /* @__PURE__ */ (0, import_jsx_runtime87.jsxs)("div", { className: (0, import_css55.cx)(styles.field), children: [
-      /* @__PURE__ */ (0, import_jsx_runtime87.jsx)("div", { className: (0, import_css55.cx)(styles.fieldContent), children: renderField(
+    return /* @__PURE__ */ (0, import_jsx_runtime86.jsxs)("div", { className: (0, import_css55.cx)(styles.field), children: [
+      /* @__PURE__ */ (0, import_jsx_runtime86.jsx)("div", { className: (0, import_css55.cx)(styles.fieldContent), children: renderField(
         field,
         isFieldEditing,
         (value) => {
@@ -11559,8 +11641,8 @@ var BaseOrganizationProfile = ({
         },
         () => toggleFieldEdit(field.key)
       ) }),
-      isFieldEditable && /* @__PURE__ */ (0, import_jsx_runtime87.jsx)("div", { className: (0, import_css55.cx)(styles.fieldActions), children: isFieldEditing ? /* @__PURE__ */ (0, import_jsx_runtime87.jsxs)(import_jsx_runtime87.Fragment, { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime87.jsx)(
+      isFieldEditable && /* @__PURE__ */ (0, import_jsx_runtime86.jsx)("div", { className: (0, import_css55.cx)(styles.fieldActions), children: isFieldEditing ? /* @__PURE__ */ (0, import_jsx_runtime86.jsxs)(import_jsx_runtime86.Fragment, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime86.jsx)(
           Button_default,
           {
             onClick: () => handleFieldSave(field.key),
@@ -11571,7 +11653,7 @@ var BaseOrganizationProfile = ({
             children: saveButtonText
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime87.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime86.jsx)(
           Button_default,
           {
             onClick: () => handleFieldCancel(field.key),
@@ -11582,7 +11664,7 @@ var BaseOrganizationProfile = ({
             children: cancelButtonText
           }
         )
-      ] }) : hasValue && /* @__PURE__ */ (0, import_jsx_runtime87.jsx)(
+      ] }) : hasValue && /* @__PURE__ */ (0, import_jsx_runtime86.jsx)(
         Button_default,
         {
           onClick: () => toggleFieldEdit(field.key),
@@ -11591,7 +11673,7 @@ var BaseOrganizationProfile = ({
           size: "small",
           title: "Edit field",
           className: (0, import_css55.cx)(styles.editButton),
-          children: /* @__PURE__ */ (0, import_jsx_runtime87.jsx)(PencilIcon, {})
+          children: /* @__PURE__ */ (0, import_jsx_runtime86.jsx)(PencilIcon, {})
         }
       ) })
     ] }, field.key);
@@ -11599,23 +11681,23 @@ var BaseOrganizationProfile = ({
   if (!organization) {
     return fallback;
   }
-  const profileContent = /* @__PURE__ */ (0, import_jsx_runtime87.jsxs)(Card_default, { className: (0, import_css55.cx)(styles.root, cardLayout && styles.card, className), children: [
-    /* @__PURE__ */ (0, import_jsx_runtime87.jsxs)("div", { className: (0, import_css55.cx)(styles.header), children: [
-      /* @__PURE__ */ (0, import_jsx_runtime87.jsx)(Avatar, { name: getOrgInitials(organization.name), size: 80, alt: `${organization.name} logo` }),
-      /* @__PURE__ */ (0, import_jsx_runtime87.jsxs)("div", { className: (0, import_css55.cx)(styles.orgInfo), children: [
-        /* @__PURE__ */ (0, import_jsx_runtime87.jsx)("h2", { className: (0, import_css55.cx)(styles.name), children: organization.name }),
-        organization.orgHandle && /* @__PURE__ */ (0, import_jsx_runtime87.jsxs)("p", { className: (0, import_css55.cx)(styles.handle), children: [
+  const profileContent = /* @__PURE__ */ (0, import_jsx_runtime86.jsxs)(Card_default, { className: (0, import_css55.cx)(styles.root, cardLayout && styles.card, className), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime86.jsxs)("div", { className: (0, import_css55.cx)(styles.header), children: [
+      /* @__PURE__ */ (0, import_jsx_runtime86.jsx)(Avatar, { name: getOrgInitials(organization.name), size: 80, alt: `${organization.name} logo` }),
+      /* @__PURE__ */ (0, import_jsx_runtime86.jsxs)("div", { className: (0, import_css55.cx)(styles.orgInfo), children: [
+        /* @__PURE__ */ (0, import_jsx_runtime86.jsx)("h2", { className: (0, import_css55.cx)(styles.name), children: organization.name }),
+        organization.orgHandle && /* @__PURE__ */ (0, import_jsx_runtime86.jsxs)("p", { className: (0, import_css55.cx)(styles.handle), children: [
           "@",
           organization.orgHandle
         ] })
       ] })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime87.jsx)("div", { className: (0, import_css55.cx)(styles.infoContainer), children: fields.map((field, index) => renderOrganizationField(field)) })
+    /* @__PURE__ */ (0, import_jsx_runtime86.jsx)("div", { className: (0, import_css55.cx)(styles.infoContainer), children: fields.map((field, index) => renderOrganizationField(field)) })
   ] });
   if (mode === "popup") {
-    return /* @__PURE__ */ (0, import_jsx_runtime87.jsx)(Dialog_default, { open, onOpenChange, children: /* @__PURE__ */ (0, import_jsx_runtime87.jsxs)(Dialog_default.Content, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime87.jsx)(Dialog_default.Heading, { children: title }),
-      /* @__PURE__ */ (0, import_jsx_runtime87.jsx)("div", { className: (0, import_css55.cx)(styles.popup), children: profileContent })
+    return /* @__PURE__ */ (0, import_jsx_runtime86.jsx)(Dialog_default, { open, onOpenChange, children: /* @__PURE__ */ (0, import_jsx_runtime86.jsxs)(Dialog_default.Content, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime86.jsx)(Dialog_default.Heading, { children: title }),
+      /* @__PURE__ */ (0, import_jsx_runtime86.jsx)("div", { className: (0, import_css55.cx)(styles.popup), children: profileContent })
     ] }) });
   }
   return profileContent;
@@ -11623,8 +11705,8 @@ var BaseOrganizationProfile = ({
 var BaseOrganizationProfile_default = BaseOrganizationProfile;
 
 // src/api/getOrganization.ts
-var import_browser66 = require("@asgardeo/browser");
-var httpClient7 = import_browser66.AsgardeoSPAClient.getInstance().httpRequest.bind(import_browser66.AsgardeoSPAClient.getInstance());
+var import_browser67 = require("@asgardeo/browser");
+var httpClient7 = import_browser67.AsgardeoSPAClient.getInstance().httpRequest.bind(import_browser67.AsgardeoSPAClient.getInstance());
 var getOrganization = async ({ fetcher, ...requestConfig }) => {
   const defaultFetcher = async (url, config) => {
     const response = await httpClient7({
@@ -11640,7 +11722,7 @@ var getOrganization = async ({ fetcher, ...requestConfig }) => {
       text: () => Promise.resolve(typeof response.data === "string" ? response.data : JSON.stringify(response.data))
     };
   };
-  return (0, import_browser66.getOrganization)({
+  return (0, import_browser67.getOrganization)({
     ...requestConfig,
     fetcher: fetcher || defaultFetcher
   });
@@ -11648,8 +11730,8 @@ var getOrganization = async ({ fetcher, ...requestConfig }) => {
 var getOrganization_default = getOrganization;
 
 // src/api/updateOrganization.ts
-var import_browser67 = require("@asgardeo/browser");
-var httpClient8 = import_browser67.AsgardeoSPAClient.getInstance().httpRequest.bind(import_browser67.AsgardeoSPAClient.getInstance());
+var import_browser68 = require("@asgardeo/browser");
+var httpClient8 = import_browser68.AsgardeoSPAClient.getInstance().httpRequest.bind(import_browser68.AsgardeoSPAClient.getInstance());
 var updateOrganization = async ({
   fetcher,
   ...requestConfig
@@ -11669,7 +11751,7 @@ var updateOrganization = async ({
       text: () => Promise.resolve(typeof response.data === "string" ? response.data : JSON.stringify(response.data))
     };
   };
-  return (0, import_browser67.updateOrganization)({
+  return (0, import_browser68.updateOrganization)({
     ...requestConfig,
     fetcher: fetcher || defaultFetcher
   });
@@ -11677,7 +11759,7 @@ var updateOrganization = async ({
 var updateOrganization_default = updateOrganization;
 
 // src/components/presentation/OrganizationProfile/OrganizationProfile.tsx
-var import_jsx_runtime88 = require("react/jsx-runtime");
+var import_jsx_runtime87 = require("react/jsx-runtime");
 var OrganizationProfile = ({
   organizationId,
   mode = "default",
@@ -11685,8 +11767,8 @@ var OrganizationProfile = ({
   onOpenChange,
   onUpdate,
   popupTitle,
-  loadingFallback = /* @__PURE__ */ (0, import_jsx_runtime88.jsx)("div", { children: "Loading organization..." }),
-  errorFallback = /* @__PURE__ */ (0, import_jsx_runtime88.jsx)("div", { children: "Failed to load organization data" }),
+  loadingFallback = /* @__PURE__ */ (0, import_jsx_runtime87.jsx)("div", { children: "Loading organization..." }),
+  errorFallback = /* @__PURE__ */ (0, import_jsx_runtime87.jsx)("div", { children: "Failed to load organization data" }),
   ...rest
 }) => {
   const { baseUrl } = useAsgardeo_default();
@@ -11722,7 +11804,7 @@ var OrganizationProfile = ({
   const handleOrganizationUpdate = async (payload) => {
     if (!baseUrl || !organizationId) return;
     try {
-      const operations = (0, import_browser67.createPatchOperations)(payload);
+      const operations = (0, import_browser68.createPatchOperations)(payload);
       await updateOrganization_default({
         baseUrl,
         organizationId,
@@ -11737,7 +11819,7 @@ var OrganizationProfile = ({
       throw err;
     }
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime88.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime87.jsx)(
     BaseOrganizationProfile_default,
     {
       organization,
@@ -11987,21 +12069,21 @@ var useStyles27 = (theme, colorScheme) => {
 var BaseOrganizationList_styles_default = useStyles27;
 
 // src/components/presentation/OrganizationList/BaseOrganizationList.tsx
-var import_jsx_runtime89 = require("react/jsx-runtime");
+var import_jsx_runtime88 = require("react/jsx-runtime");
 var defaultRenderOrganization = (organization, styles, t, onOrganizationSelect, showStatus) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime89.jsxs)("div", { className: (0, import_css57.cx)(styles.organizationItem), children: [
-    /* @__PURE__ */ (0, import_jsx_runtime89.jsxs)("div", { className: (0, import_css57.cx)(styles.organizationContent), children: [
-      /* @__PURE__ */ (0, import_jsx_runtime89.jsx)(Avatar_default, { variant: "square", name: organization.name, size: 48, alt: `${organization.name} logo` }),
-      /* @__PURE__ */ (0, import_jsx_runtime89.jsxs)("div", { className: (0, import_css57.cx)(styles.organizationInfo), children: [
-        /* @__PURE__ */ (0, import_jsx_runtime89.jsx)(Typography_default, { variant: "h6", className: (0, import_css57.cx)(styles.organizationName), children: organization.name }),
-        /* @__PURE__ */ (0, import_jsx_runtime89.jsxs)(Typography_default, { variant: "body2", color: "textSecondary", className: (0, import_css57.cx)(styles.organizationHandle), children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime88.jsxs)("div", { className: (0, import_css57.cx)(styles.organizationItem), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime88.jsxs)("div", { className: (0, import_css57.cx)(styles.organizationContent), children: [
+      /* @__PURE__ */ (0, import_jsx_runtime88.jsx)(Avatar_default, { variant: "square", name: organization.name, size: 48, alt: `${organization.name} logo` }),
+      /* @__PURE__ */ (0, import_jsx_runtime88.jsxs)("div", { className: (0, import_css57.cx)(styles.organizationInfo), children: [
+        /* @__PURE__ */ (0, import_jsx_runtime88.jsx)(Typography_default, { variant: "h6", className: (0, import_css57.cx)(styles.organizationName), children: organization.name }),
+        /* @__PURE__ */ (0, import_jsx_runtime88.jsxs)(Typography_default, { variant: "body2", color: "textSecondary", className: (0, import_css57.cx)(styles.organizationHandle), children: [
           "@",
           organization.orgHandle
         ] }),
-        showStatus && /* @__PURE__ */ (0, import_jsx_runtime89.jsxs)(Typography_default, { variant: "body2", color: "textSecondary", className: (0, import_css57.cx)(styles.organizationStatus), children: [
+        showStatus && /* @__PURE__ */ (0, import_jsx_runtime88.jsxs)(Typography_default, { variant: "body2", color: "textSecondary", className: (0, import_css57.cx)(styles.organizationStatus), children: [
           t("organization.switcher.status.label"),
           " ",
-          /* @__PURE__ */ (0, import_jsx_runtime89.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime88.jsx)(
             "span",
             {
               className: (0, import_css57.cx)(
@@ -12014,7 +12096,7 @@ var defaultRenderOrganization = (organization, styles, t, onOrganizationSelect,
         ] })
       ] })
     ] }),
-    organization.canSwitch && /* @__PURE__ */ (0, import_jsx_runtime89.jsx)("div", { className: (0, import_css57.cx)(styles.organizationActions), children: /* @__PURE__ */ (0, import_jsx_runtime89.jsx)(
+    organization.canSwitch && /* @__PURE__ */ (0, import_jsx_runtime88.jsx)("div", { className: (0, import_css57.cx)(styles.organizationActions), children: /* @__PURE__ */ (0, import_jsx_runtime88.jsx)(
       Button_default,
       {
         onClick: (e) => {
@@ -12028,17 +12110,17 @@ var defaultRenderOrganization = (organization, styles, t, onOrganizationSelect,
     ) })
   ] }, organization.id);
 };
-var defaultRenderLoading = (t, styles) => /* @__PURE__ */ (0, import_jsx_runtime89.jsxs)("div", { className: (0, import_css57.cx)(styles.loadingContainer), children: [
-  /* @__PURE__ */ (0, import_jsx_runtime89.jsx)(Spinner_default, { size: "medium" }),
-  /* @__PURE__ */ (0, import_jsx_runtime89.jsx)(Typography_default, { variant: "body1", color: "textSecondary", className: (0, import_css57.cx)(styles.loadingText), children: t("organization.switcher.loading.organizations") })
+var defaultRenderLoading = (t, styles) => /* @__PURE__ */ (0, import_jsx_runtime88.jsxs)("div", { className: (0, import_css57.cx)(styles.loadingContainer), children: [
+  /* @__PURE__ */ (0, import_jsx_runtime88.jsx)(Spinner_default, { size: "medium" }),
+  /* @__PURE__ */ (0, import_jsx_runtime88.jsx)(Typography_default, { variant: "body1", color: "textSecondary", className: (0, import_css57.cx)(styles.loadingText), children: t("organization.switcher.loading.organizations") })
 ] });
-var defaultRenderError = (error, t, styles) => /* @__PURE__ */ (0, import_jsx_runtime89.jsx)("div", { className: (0, import_css57.cx)(styles.errorContainer), children: /* @__PURE__ */ (0, import_jsx_runtime89.jsxs)(Typography_default, { variant: "body1", color: "error", children: [
-  /* @__PURE__ */ (0, import_jsx_runtime89.jsx)("strong", { children: t("organization.switcher.error.prefix") }),
+var defaultRenderError = (error, t, styles) => /* @__PURE__ */ (0, import_jsx_runtime88.jsx)("div", { className: (0, import_css57.cx)(styles.errorContainer), children: /* @__PURE__ */ (0, import_jsx_runtime88.jsxs)(Typography_default, { variant: "body1", color: "error", children: [
+  /* @__PURE__ */ (0, import_jsx_runtime88.jsx)("strong", { children: t("organization.switcher.error.prefix") }),
   " ",
   error
 ] }) });
-var defaultRenderLoadMore = (onLoadMore, isLoading, t, styles) => /* @__PURE__ */ (0, import_jsx_runtime89.jsx)(Button_default, { onClick: onLoadMore, disabled: isLoading, className: (0, import_css57.cx)(styles.loadMoreButton), type: "button", fullWidth: true, children: isLoading ? t("organization.switcher.loading.more") : t("organization.switcher.load.more") });
-var defaultRenderEmpty = (t, styles) => /* @__PURE__ */ (0, import_jsx_runtime89.jsx)("div", { className: (0, import_css57.cx)(styles.emptyContainer), children: /* @__PURE__ */ (0, import_jsx_runtime89.jsx)(Typography_default, { variant: "body1", color: "textSecondary", className: (0, import_css57.cx)(styles.emptyText), children: t("organization.switcher.no.organizations") }) });
+var defaultRenderLoadMore = (onLoadMore, isLoading, t, styles) => /* @__PURE__ */ (0, import_jsx_runtime88.jsx)(Button_default, { onClick: onLoadMore, disabled: isLoading, className: (0, import_css57.cx)(styles.loadMoreButton), type: "button", fullWidth: true, children: isLoading ? t("organization.switcher.loading.more") : t("organization.switcher.load.more") });
+var defaultRenderEmpty = (t, styles) => /* @__PURE__ */ (0, import_jsx_runtime88.jsx)("div", { className: (0, import_css57.cx)(styles.emptyContainer), children: /* @__PURE__ */ (0, import_jsx_runtime88.jsx)(Typography_default, { variant: "body1", color: "textSecondary", className: (0, import_css57.cx)(styles.emptyText), children: t("organization.switcher.no.organizations") }) });
 var BaseOrganizationList = ({
   className = "",
   allOrganizations,
@@ -12081,53 +12163,53 @@ var BaseOrganizationList = ({
   const renderLoadMoreWithStyles = renderLoadMore || ((onLoadMore, isLoading2) => defaultRenderLoadMore(onLoadMore, isLoading2, t, styles));
   const renderOrganizationWithStyles = renderOrganization || ((org) => defaultRenderOrganization(org, styles, t, onOrganizationSelect, showStatus));
   if (isLoading && organizationsWithSwitchAccess?.length === 0) {
-    const loadingContent = /* @__PURE__ */ (0, import_jsx_runtime89.jsx)("div", { className: (0, import_css57.cx)(styles.root, className), style, children: renderLoadingWithStyles() });
+    const loadingContent = /* @__PURE__ */ (0, import_jsx_runtime88.jsx)("div", { className: (0, import_css57.cx)(styles.root, className), style, children: renderLoadingWithStyles() });
     if (mode === "popup") {
-      return /* @__PURE__ */ (0, import_jsx_runtime89.jsx)(Dialog_default, { open, onOpenChange, children: /* @__PURE__ */ (0, import_jsx_runtime89.jsxs)(Dialog_default.Content, { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime89.jsx)(Dialog_default.Heading, { children: title }),
-        /* @__PURE__ */ (0, import_jsx_runtime89.jsx)("div", { className: (0, import_css57.cx)(styles.popupContent), children: loadingContent })
+      return /* @__PURE__ */ (0, import_jsx_runtime88.jsx)(Dialog_default, { open, onOpenChange, children: /* @__PURE__ */ (0, import_jsx_runtime88.jsxs)(Dialog_default.Content, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime88.jsx)(Dialog_default.Heading, { children: title }),
+        /* @__PURE__ */ (0, import_jsx_runtime88.jsx)("div", { className: (0, import_css57.cx)(styles.popupContent), children: loadingContent })
       ] }) });
     }
     return loadingContent;
   }
   if (error && organizationsWithSwitchAccess?.length === 0) {
-    const errorContent = /* @__PURE__ */ (0, import_jsx_runtime89.jsx)("div", { className: (0, import_css57.cx)(styles.root, className), style, children: renderErrorWithStyles(error) });
+    const errorContent = /* @__PURE__ */ (0, import_jsx_runtime88.jsx)("div", { className: (0, import_css57.cx)(styles.root, className), style, children: renderErrorWithStyles(error) });
     if (mode === "popup") {
-      return /* @__PURE__ */ (0, import_jsx_runtime89.jsx)(Dialog_default, { open, onOpenChange, children: /* @__PURE__ */ (0, import_jsx_runtime89.jsxs)(Dialog_default.Content, { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime89.jsx)(Dialog_default.Heading, { children: title }),
-        /* @__PURE__ */ (0, import_jsx_runtime89.jsx)("div", { className: (0, import_css57.cx)(styles.popupContent), children: errorContent })
+      return /* @__PURE__ */ (0, import_jsx_runtime88.jsx)(Dialog_default, { open, onOpenChange, children: /* @__PURE__ */ (0, import_jsx_runtime88.jsxs)(Dialog_default.Content, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime88.jsx)(Dialog_default.Heading, { children: title }),
+        /* @__PURE__ */ (0, import_jsx_runtime88.jsx)("div", { className: (0, import_css57.cx)(styles.popupContent), children: errorContent })
       ] }) });
     }
     return errorContent;
   }
   if (!isLoading && organizationsWithSwitchAccess?.length === 0) {
-    const emptyContent = /* @__PURE__ */ (0, import_jsx_runtime89.jsx)("div", { className: (0, import_css57.cx)(styles.root, className), style, children: renderEmptyWithStyles() });
+    const emptyContent = /* @__PURE__ */ (0, import_jsx_runtime88.jsx)("div", { className: (0, import_css57.cx)(styles.root, className), style, children: renderEmptyWithStyles() });
     if (mode === "popup") {
-      return /* @__PURE__ */ (0, import_jsx_runtime89.jsx)(Dialog_default, { open, onOpenChange, children: /* @__PURE__ */ (0, import_jsx_runtime89.jsxs)(Dialog_default.Content, { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime89.jsx)(Dialog_default.Heading, { children: title }),
-        /* @__PURE__ */ (0, import_jsx_runtime89.jsx)("div", { className: (0, import_css57.cx)(styles.popupContent), children: emptyContent })
+      return /* @__PURE__ */ (0, import_jsx_runtime88.jsx)(Dialog_default, { open, onOpenChange, children: /* @__PURE__ */ (0, import_jsx_runtime88.jsxs)(Dialog_default.Content, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime88.jsx)(Dialog_default.Heading, { children: title }),
+        /* @__PURE__ */ (0, import_jsx_runtime88.jsx)("div", { className: (0, import_css57.cx)(styles.popupContent), children: emptyContent })
       ] }) });
     }
     return emptyContent;
   }
-  const organizationListContent = /* @__PURE__ */ (0, import_jsx_runtime89.jsxs)("div", { className: (0, import_css57.cx)(styles.root, className), style, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime89.jsxs)("div", { className: (0, import_css57.cx)(styles.header), children: [
-      /* @__PURE__ */ (0, import_jsx_runtime89.jsx)("div", { className: (0, import_css57.cx)(styles.headerInfo), children: /* @__PURE__ */ (0, import_jsx_runtime89.jsx)(Typography_default, { variant: "body2", color: "textSecondary", className: (0, import_css57.cx)(styles.subtitle), children: t("organization.switcher.showing.count", {
+  const organizationListContent = /* @__PURE__ */ (0, import_jsx_runtime88.jsxs)("div", { className: (0, import_css57.cx)(styles.root, className), style, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime88.jsxs)("div", { className: (0, import_css57.cx)(styles.header), children: [
+      /* @__PURE__ */ (0, import_jsx_runtime88.jsx)("div", { className: (0, import_css57.cx)(styles.headerInfo), children: /* @__PURE__ */ (0, import_jsx_runtime88.jsx)(Typography_default, { variant: "body2", color: "textSecondary", className: (0, import_css57.cx)(styles.subtitle), children: t("organization.switcher.showing.count", {
         showing: organizationsWithSwitchAccess?.length,
         total: allOrganizations?.organizations?.length || 0
       }) }) }),
-      onRefresh && /* @__PURE__ */ (0, import_jsx_runtime89.jsx)(Button_default, { onClick: onRefresh, className: (0, import_css57.cx)(styles.refreshButton), type: "button", variant: "outline", size: "small", children: t("organization.switcher.refresh.button") })
+      onRefresh && /* @__PURE__ */ (0, import_jsx_runtime88.jsx)(Button_default, { onClick: onRefresh, className: (0, import_css57.cx)(styles.refreshButton), type: "button", variant: "outline", size: "small", children: t("organization.switcher.refresh.button") })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime89.jsx)("div", { className: (0, import_css57.cx)(styles.listContainer), children: organizationsWithSwitchAccess?.map(
+    /* @__PURE__ */ (0, import_jsx_runtime88.jsx)("div", { className: (0, import_css57.cx)(styles.listContainer), children: organizationsWithSwitchAccess?.map(
       (organization, index) => renderOrganizationWithStyles(organization, index)
     ) }),
-    error && organizationsWithSwitchAccess?.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime89.jsx)("div", { className: (0, import_css57.cx)(styles.errorMargin), children: renderErrorWithStyles(error) }),
-    hasMore && fetchMore && /* @__PURE__ */ (0, import_jsx_runtime89.jsx)("div", { className: (0, import_css57.cx)(styles.loadMoreMargin), children: renderLoadMoreWithStyles(fetchMore, isLoadingMore) })
+    error && organizationsWithSwitchAccess?.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime88.jsx)("div", { className: (0, import_css57.cx)(styles.errorMargin), children: renderErrorWithStyles(error) }),
+    hasMore && fetchMore && /* @__PURE__ */ (0, import_jsx_runtime88.jsx)("div", { className: (0, import_css57.cx)(styles.loadMoreMargin), children: renderLoadMoreWithStyles(fetchMore, isLoadingMore) })
   ] });
   if (mode === "popup") {
-    return /* @__PURE__ */ (0, import_jsx_runtime89.jsx)(Dialog_default, { open, onOpenChange, children: /* @__PURE__ */ (0, import_jsx_runtime89.jsxs)(Dialog_default.Content, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime89.jsx)(Dialog_default.Heading, { children: title }),
-      /* @__PURE__ */ (0, import_jsx_runtime89.jsx)("div", { className: (0, import_css57.cx)(styles.popupContent), children: organizationListContent })
+    return /* @__PURE__ */ (0, import_jsx_runtime88.jsx)(Dialog_default, { open, onOpenChange, children: /* @__PURE__ */ (0, import_jsx_runtime88.jsxs)(Dialog_default.Content, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime88.jsx)(Dialog_default.Heading, { children: title }),
+      /* @__PURE__ */ (0, import_jsx_runtime88.jsx)("div", { className: (0, import_css57.cx)(styles.popupContent), children: organizationListContent })
     ] }) });
   }
   return organizationListContent;
@@ -12204,7 +12286,7 @@ var useStyles28 = (theme, colorScheme) => {
 var OrganizationList_styles_default = useStyles28;
 
 // src/components/presentation/OrganizationList/OrganizationList.tsx
-var import_jsx_runtime90 = require("react/jsx-runtime");
+var import_jsx_runtime89 = require("react/jsx-runtime");
 var OrganizationList = ({
   autoFetch = true,
   filter = "",
@@ -12226,7 +12308,7 @@ var OrganizationList = ({
       setAllOrganizations(await getAllOrganizations2());
     })();
   }, []);
-  return /* @__PURE__ */ (0, import_jsx_runtime90.jsx)("div", { className: (0, import_css59.cx)(styles.root, className), style, children: /* @__PURE__ */ (0, import_jsx_runtime90.jsx)("div", { className: (0, import_css59.cx)(styles.container), children: /* @__PURE__ */ (0, import_jsx_runtime90.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime89.jsx)("div", { className: (0, import_css59.cx)(styles.root, className), style, children: /* @__PURE__ */ (0, import_jsx_runtime89.jsx)("div", { className: (0, import_css59.cx)(styles.container), children: /* @__PURE__ */ (0, import_jsx_runtime89.jsx)(
     BaseOrganizationList_default,
     {
       allOrganizations,
@@ -12241,8 +12323,8 @@ var OrganizationList = ({
 var OrganizationList_default = OrganizationList;
 
 // src/components/primitives/Icons/BuildingAlt.tsx
-var import_jsx_runtime91 = require("react/jsx-runtime");
-var BuildingAlt = ({ color = "currentColor", height = 24, width = 24 }) => /* @__PURE__ */ (0, import_jsx_runtime91.jsxs)(
+var import_jsx_runtime90 = require("react/jsx-runtime");
+var BuildingAlt = ({ color = "currentColor", height = 24, width = 24 }) => /* @__PURE__ */ (0, import_jsx_runtime90.jsxs)(
   "svg",
   {
     width,
@@ -12255,13 +12337,13 @@ var BuildingAlt = ({ color = "currentColor", height = 24, width = 24 }) => /* @_
     strokeLinecap: "round",
     strokeLinejoin: "round",
     children: [
-      /* @__PURE__ */ (0, import_jsx_runtime91.jsx)("path", { d: "M6 22V4a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2v18Z" }),
-      /* @__PURE__ */ (0, import_jsx_runtime91.jsx)("path", { d: "M6 12H4a2 2 0 0 0-2 2v6a2 2 0 0 0 2 2h2" }),
-      /* @__PURE__ */ (0, import_jsx_runtime91.jsx)("path", { d: "M18 9h2a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2h-2" }),
-      /* @__PURE__ */ (0, import_jsx_runtime91.jsx)("path", { d: "M10 6h4" }),
-      /* @__PURE__ */ (0, import_jsx_runtime91.jsx)("path", { d: "M10 10h4" }),
-      /* @__PURE__ */ (0, import_jsx_runtime91.jsx)("path", { d: "M10 14h4" }),
-      /* @__PURE__ */ (0, import_jsx_runtime91.jsx)("path", { d: "M10 18h4" })
+      /* @__PURE__ */ (0, import_jsx_runtime90.jsx)("path", { d: "M6 22V4a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2v18Z" }),
+      /* @__PURE__ */ (0, import_jsx_runtime90.jsx)("path", { d: "M6 12H4a2 2 0 0 0-2 2v6a2 2 0 0 0 2 2h2" }),
+      /* @__PURE__ */ (0, import_jsx_runtime90.jsx)("path", { d: "M18 9h2a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2h-2" }),
+      /* @__PURE__ */ (0, import_jsx_runtime90.jsx)("path", { d: "M10 6h4" }),
+      /* @__PURE__ */ (0, import_jsx_runtime90.jsx)("path", { d: "M10 10h4" }),
+      /* @__PURE__ */ (0, import_jsx_runtime90.jsx)("path", { d: "M10 14h4" }),
+      /* @__PURE__ */ (0, import_jsx_runtime90.jsx)("path", { d: "M10 18h4" })
     ]
   }
 );
@@ -12269,7 +12351,7 @@ BuildingAlt.displayName = "BuildingAlt";
 var BuildingAlt_default = BuildingAlt;
 
 // src/components/presentation/OrganizationSwitcher/OrganizationSwitcher.tsx
-var import_jsx_runtime92 = require("react/jsx-runtime");
+var import_jsx_runtime91 = require("react/jsx-runtime");
 var OrganizationSwitcher = ({
   currentOrganization: propCurrentOrganization,
   fallback = null,
@@ -12293,7 +12375,7 @@ var OrganizationSwitcher = ({
     return fallback;
   }
   if (!isSignedIn) {
-    return /* @__PURE__ */ (0, import_jsx_runtime92.jsx)(import_jsx_runtime92.Fragment, {});
+    return /* @__PURE__ */ (0, import_jsx_runtime91.jsx)(import_jsx_runtime91.Fragment, {});
   }
   const organizations = propOrganizations || contextOrganizations || [];
   const currentOrganization = propCurrentOrganization || contextCurrentOrganization;
@@ -12307,19 +12389,19 @@ var OrganizationSwitcher = ({
   const defaultMenuItems = [];
   if (currentOrganization) {
     defaultMenuItems.push({
-      icon: /* @__PURE__ */ (0, import_jsx_runtime92.jsx)(BuildingAlt_default, {}),
+      icon: /* @__PURE__ */ (0, import_jsx_runtime91.jsx)(BuildingAlt_default, {}),
       label: t("organization.switcher.manage.organizations"),
       onClick: handleManageOrganizations
     });
   }
   defaultMenuItems.push({
-    icon: /* @__PURE__ */ (0, import_jsx_runtime92.jsx)("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: /* @__PURE__ */ (0, import_jsx_runtime92.jsx)("path", { d: "M12 5v14m-7-7h14" }) }),
+    icon: /* @__PURE__ */ (0, import_jsx_runtime91.jsx)("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: /* @__PURE__ */ (0, import_jsx_runtime91.jsx)("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__ */ (0, import_jsx_runtime92.jsxs)(import_jsx_runtime92.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime92.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime91.jsxs)(import_jsx_runtime91.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime91.jsx)(
       BaseOrganizationSwitcher_default,
       {
         organizations,
@@ -12332,7 +12414,7 @@ var OrganizationSwitcher = ({
         ...props
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime92.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime91.jsx)(
       CreateOrganization,
       {
         mode: "popup",
@@ -12346,7 +12428,7 @@ var OrganizationSwitcher = ({
         }
       }
     ),
-    currentOrganization && /* @__PURE__ */ (0, import_jsx_runtime92.jsx)(
+    currentOrganization && /* @__PURE__ */ (0, import_jsx_runtime91.jsx)(
       OrganizationProfile_default,
       {
         organizationId: currentOrganization.id,
@@ -12354,11 +12436,11 @@ var OrganizationSwitcher = ({
         open: isProfileOpen,
         onOpenChange: setIsProfileOpen,
         cardLayout: true,
-        loadingFallback: /* @__PURE__ */ (0, import_jsx_runtime92.jsx)("div", { children: t("organization.profile.loading") }),
-        errorFallback: /* @__PURE__ */ (0, import_jsx_runtime92.jsx)("div", { children: t("organization.profile.error") })
+        loadingFallback: /* @__PURE__ */ (0, import_jsx_runtime91.jsx)("div", { children: t("organization.profile.loading") }),
+        errorFallback: /* @__PURE__ */ (0, import_jsx_runtime91.jsx)("div", { children: t("organization.profile.error") })
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime92.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime91.jsx)(
       OrganizationList_default,
       {
         mode: "popup",
@@ -12378,5 +12460,5 @@ var OrganizationSwitcher = ({
 var OrganizationSwitcher_default = OrganizationSwitcher;
 
 // src/index.ts
-var import_browser68 = require("@asgardeo/browser");
+var import_browser69 = require("@asgardeo/browser");
 //# sourceMappingURL=index.js.map