@asgardeo/react 0.5.22 → 0.5.24

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,
@@ -181,7 +182,8 @@ var AsgardeoContext = (0, import_react.createContext)({
   signInOptions: {},
   getDecodedIdToken: null,
   getAccessToken: null,
-  exchangeToken: null
+  exchangeToken: null,
+  storage: "sessionStorage"
 });
 AsgardeoContext.displayName = "AsgardeoContext";
 var AsgardeoContext_default = AsgardeoContext;
@@ -834,29 +836,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);
@@ -1260,7 +1249,7 @@ var applyThemeToDOM = (theme) => {
 var ThemeProvider = ({
   children,
   theme: themeConfig,
-  mode = "system",
+  mode = import_browser11.DEFAULT_THEME,
   detection = {},
   inheritFromBranding = true
 }) => {
@@ -1755,12 +1744,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) => ({
@@ -1828,7 +1811,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,
             {
@@ -2341,6 +2324,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;
@@ -2355,30 +2342,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};
@@ -2392,6 +2399,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;
@@ -2406,30 +2417,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};
@@ -2444,6 +2475,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;
@@ -2457,32 +2493,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`
@@ -2629,8 +2685,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);
       }
@@ -2639,7 +2694,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."
@@ -2753,6 +2808,8 @@ var BaseSignUpButton = (0, import_react31.forwardRef)(
         disabled: isLoading,
         loading: isLoading,
         type: "button",
+        color: "primary",
+        variant: "solid",
         ...rest,
         children
       }
@@ -2764,6 +2821,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) => {
@@ -2774,8 +2832,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();
       }
@@ -2852,15 +2909,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
@@ -2868,11 +2925,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");
@@ -3220,8 +3277,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,
@@ -3271,15 +3328,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
@@ -3291,7 +3348,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");
@@ -3350,12 +3407,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
@@ -3364,7 +3421,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: " *" })
       ]
     }
   );
@@ -3372,7 +3429,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");
@@ -3501,20 +3558,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 }),
@@ -3561,7 +3618,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");
@@ -3659,7 +3716,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
@@ -3669,7 +3726,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 }),
@@ -3693,7 +3750,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");
@@ -3869,12 +3926,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) => {
@@ -3886,10 +3943,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,
@@ -3911,7 +3968,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");
@@ -4007,7 +4064,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",
@@ -4019,7 +4076,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
           )
@@ -4033,7 +4090,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");
@@ -4122,7 +4179,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)(
@@ -4130,7 +4187,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
           }
         ),
@@ -4141,13 +4198,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,
@@ -4164,7 +4221,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");
@@ -4237,15 +4294,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,
@@ -4258,8 +4315,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
           }
@@ -4271,7 +4328,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() === "")) {
@@ -4281,7 +4338,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";
@@ -4317,20 +4374,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,
         {
@@ -4340,7 +4397,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)(
@@ -4403,7 +4460,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] || "",
@@ -4418,13 +4475,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")
       }
@@ -4434,7 +4491,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 = ({
@@ -4459,7 +4516,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] || "",
@@ -4474,13 +4531,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")
       }
@@ -4489,29 +4546,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",
@@ -4546,35 +4598,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",
         {
@@ -4582,35 +4629,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" }),
@@ -4618,36 +4660,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",
@@ -4664,35 +4700,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",
         {
@@ -4700,35 +4731,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",
         {
@@ -4736,14 +4762,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 = ({
@@ -4782,7 +4808,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] || "",
@@ -4795,13 +4821,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")
       }
@@ -4811,7 +4837,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 = ({
@@ -4850,7 +4876,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] || "",
@@ -4863,13 +4889,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")
       }
@@ -4879,7 +4905,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 = ({
@@ -4918,7 +4944,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] || "",
@@ -4931,13 +4957,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")
       }
@@ -4946,33 +4972,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",
         {
@@ -4980,14 +4997,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,
@@ -4999,7 +5016,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) {
@@ -5010,7 +5027,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",
           {
@@ -5018,7 +5035,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",
           {
@@ -5026,9 +5043,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",
           {
@@ -5036,7 +5053,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" }),
@@ -5045,7 +5062,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",
           {
@@ -5069,10 +5086,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,
@@ -5085,40 +5102,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 });
       }
   }
 };
@@ -5136,7 +5222,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
@@ -5337,16 +5423,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 })
         ]
       }
     ) });
@@ -5364,7 +5450,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
     }
@@ -5382,7 +5468,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
       }
@@ -5397,7 +5483,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");
 
@@ -5492,13 +5578,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
         ),
@@ -5516,7 +5602,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
     }
@@ -5569,7 +5655,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
@@ -5589,7 +5675,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
       }
@@ -5604,7 +5690,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
     }
@@ -5618,7 +5704,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
     }
@@ -5632,7 +5718,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
     }
@@ -5654,7 +5740,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
@@ -5723,8 +5809,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
@@ -5741,9 +5827,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
@@ -5753,18 +5839,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) })
         ]
       }
     );
@@ -5773,8 +5859,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
@@ -5790,7 +5876,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");
@@ -5849,8 +5935,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
@@ -6116,7 +6202,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);
@@ -6202,9 +6288,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) {
@@ -6290,7 +6376,7 @@ var BaseSignInContent = ({
                   });
                   popup.close();
                   onFlowChange?.(response2);
-                  if (response2?.flowStatus === import_browser44.EmbeddedSignInFlowStatus.SuccessCompleted) {
+                  if (response2?.flowStatus === import_browser45.EmbeddedSignInFlowStatus.SuccessCompleted) {
                     onSuccess?.(response2.authData);
                   }
                 }
@@ -6331,11 +6417,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;
       }
@@ -6346,7 +6432,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];
@@ -6364,7 +6450,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 {
@@ -6403,11 +6489,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;
           }
@@ -6415,7 +6501,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];
@@ -6444,7 +6530,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: {
@@ -6457,7 +6543,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;
         }
@@ -6480,11 +6566,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;
         }
@@ -6495,7 +6581,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];
@@ -6531,11 +6617,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;
           }
@@ -6546,7 +6632,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];
@@ -6573,7 +6659,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 {
@@ -6585,7 +6671,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)(() => {
@@ -6596,30 +6682,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;
@@ -6636,12 +6722,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];
@@ -6659,7 +6745,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 {
@@ -6676,7 +6762,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));
@@ -6861,15 +6947,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,
@@ -6883,7 +6969,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"] || "",
@@ -6897,7 +6983,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,
@@ -6911,7 +6997,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"] || "",
@@ -6944,7 +7030,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,
@@ -6958,7 +7044,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",
@@ -6996,75 +7082,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 || {};
@@ -7081,7 +7100,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,
@@ -7096,7 +7115,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,
@@ -7110,7 +7129,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"] || "",
@@ -7124,7 +7143,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,
@@ -7170,7 +7189,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",
@@ -7184,7 +7203,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,
@@ -7217,7 +7236,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",
@@ -7228,7 +7247,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
   );
@@ -7236,7 +7255,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,
@@ -7249,7 +7268,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,
@@ -7269,7 +7288,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,
@@ -7283,7 +7302,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"] || "",
@@ -7297,7 +7316,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 || {};
@@ -7338,7 +7357,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,
@@ -7351,50 +7370,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({
@@ -7566,13 +7601,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 = ({
@@ -7606,7 +7641,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,
@@ -7698,11 +7733,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;
         }
@@ -7710,7 +7745,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 {
@@ -7718,7 +7753,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) {
@@ -7747,16 +7782,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();
@@ -7808,15 +7843,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();
@@ -7835,30 +7870,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,
@@ -7902,11 +7937,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) {
@@ -7930,38 +7965,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",
@@ -7974,21 +8009,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,
@@ -8006,75 +8041,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");
 
@@ -8128,18 +8163,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",
@@ -8147,7 +8189,8 @@ var Avatar = ({
   imageUrl,
   name,
   size = 64,
-  variant = "circular"
+  variant = "circular",
+  isLoading = false
 }) => {
   const { theme, colorScheme } = useTheme_default();
   const generateBackgroundColor = (inputString) => {
@@ -8181,24 +8224,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()
@@ -8208,14 +8264,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",
@@ -8229,17 +8285,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",
@@ -8253,16 +8309,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",
@@ -8276,16 +8332,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",
@@ -8299,8 +8355,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" })
     ]
   }
 );
@@ -8323,17 +8379,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;
     `;
@@ -8383,7 +8428,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,
@@ -8429,7 +8474,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) => {
@@ -8447,7 +8492,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) => {
@@ -8456,11 +8501,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),
@@ -8478,18 +8523,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",
@@ -8498,7 +8543,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 })
         }
       )
     ] });
@@ -8514,13 +8559,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
       }
     );
@@ -8544,13 +8589,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
     }
@@ -8571,7 +8616,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");
@@ -8667,7 +8712,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,
@@ -8690,8 +8735,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)) {
@@ -8735,9 +8780,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,
@@ -8746,7 +8791,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]
@@ -8758,43 +8803,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 })
                   }
                 )
               ]
@@ -8811,7 +8856,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;
@@ -8922,7 +8967,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;
       }
 
@@ -8982,7 +9027,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",
@@ -9018,13 +9063,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",
@@ -9035,7 +9098,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) => {
@@ -9060,12 +9123,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) {
@@ -9092,7 +9155,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
@@ -9135,9 +9198,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) {
@@ -9153,9 +9216,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,
@@ -9186,9 +9249,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,
@@ -9203,7 +9266,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 || "";
@@ -9218,16 +9281,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,
@@ -9239,11 +9302,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 !== "";
@@ -9256,9 +9319,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,
@@ -9286,8 +9349,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) => {
@@ -9297,21 +9360,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, {})
           }
         )
       ] })
@@ -9331,7 +9394,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;
@@ -9340,30 +9403,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;
@@ -9379,13 +9443,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;
@@ -9396,8 +9460,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({
@@ -9414,7 +9478,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
   });
@@ -9422,10 +9486,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);
@@ -9436,13 +9500,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,
@@ -9457,7 +9521,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");
@@ -9647,7 +9711,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 = "",
@@ -9706,14 +9770,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];
@@ -9723,18 +9787,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),
@@ -9743,27 +9807,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),
@@ -9772,22 +9836,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)
@@ -9795,31 +9859,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",
@@ -9838,7 +9902,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,
@@ -9867,14 +9931,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,
@@ -9884,11 +9948,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,
@@ -9898,7 +9962,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;
@@ -9909,9 +9973,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",
@@ -9921,25 +9985,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;
 
@@ -10169,7 +10233,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,
@@ -10222,8 +10286,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",
@@ -10233,24 +10297,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,
@@ -10260,8 +10324,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",
@@ -10271,18 +10335,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",
@@ -10292,10 +10356,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,
@@ -10305,17 +10369,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,
@@ -10324,7 +10388,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",
@@ -10336,8 +10400,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" })
                 ]
               }
             ),
@@ -10345,20 +10409,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),
@@ -10376,10 +10440,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,
@@ -10393,10 +10457,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),
@@ -10570,7 +10634,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 = "",
@@ -10657,13 +10721,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")}`,
@@ -10676,7 +10740,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"}`,
@@ -10690,9 +10754,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),
@@ -10706,23 +10770,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({
@@ -10739,7 +10803,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
   });
@@ -10747,7 +10811,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,
@@ -10763,7 +10827,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) => {
@@ -10797,7 +10861,7 @@ var CreateOrganization = ({
       setLoading(false);
     }
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime85.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime84.jsx)(
     BaseCreateOrganization,
     {
       onSubmit: handleSubmit,
@@ -10814,12 +10878,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");
 
@@ -10979,7 +11043,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,
@@ -11054,105 +11118,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) {
@@ -11161,21 +11225,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,
@@ -11342,7 +11406,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 = "",
@@ -11379,13 +11443,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)
     }
   ]
 }) => {
@@ -11393,7 +11457,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",
@@ -11404,7 +11468,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) => {
@@ -11467,7 +11531,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,
@@ -11505,26 +11569,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,
@@ -11547,8 +11611,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) => {
@@ -11558,8 +11622,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),
@@ -11570,7 +11634,7 @@ var BaseOrganizationProfile = ({
             children: saveButtonText
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime87.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime86.jsx)(
           Button_default,
           {
             onClick: () => handleFieldCancel(field.key),
@@ -11581,7 +11645,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),
@@ -11590,7 +11654,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);
@@ -11598,23 +11662,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;
@@ -11622,8 +11686,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({
@@ -11639,7 +11703,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
   });
@@ -11647,8 +11711,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
@@ -11668,7 +11732,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
   });
@@ -11676,7 +11740,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",
@@ -11684,8 +11748,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();
@@ -11721,7 +11785,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,
@@ -11736,7 +11800,7 @@ var OrganizationProfile = ({
       throw err;
     }
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime88.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime87.jsx)(
     BaseOrganizationProfile_default,
     {
       organization,
@@ -11986,21 +12050,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)(
@@ -12013,7 +12077,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) => {
@@ -12027,17 +12091,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,
@@ -12080,53 +12144,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;
@@ -12203,7 +12267,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 = "",
@@ -12225,7 +12289,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,
@@ -12240,8 +12304,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,
@@ -12254,13 +12318,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" })
     ]
   }
 );
@@ -12268,7 +12332,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,
@@ -12292,7 +12356,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;
@@ -12306,19 +12370,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,
@@ -12331,7 +12395,7 @@ var OrganizationSwitcher = ({
         ...props
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime92.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime91.jsx)(
       CreateOrganization,
       {
         mode: "popup",
@@ -12345,7 +12409,7 @@ var OrganizationSwitcher = ({
         }
       }
     ),
-    currentOrganization && /* @__PURE__ */ (0, import_jsx_runtime92.jsx)(
+    currentOrganization && /* @__PURE__ */ (0, import_jsx_runtime91.jsx)(
       OrganizationProfile_default,
       {
         organizationId: currentOrganization.id,
@@ -12353,11 +12417,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",
@@ -12377,5 +12441,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