@asgardeo/react 0.5.23 → 0.5.24

package/dist/index.js

@@ -6,7 +6,8 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
 import {
   AsgardeoRuntimeError as AsgardeoRuntimeError3,
   generateFlattenedUserProfile as generateFlattenedUserProfile2,
-  getBrandingPreference
+  getBrandingPreference,
+  getActiveTheme
 } from "@asgardeo/browser";
 import { useEffect as useEffect5, useMemo as useMemo6, useRef, useState as useState7, useCallback as useCallback7 } from "react";
 
@@ -51,7 +52,9 @@ import {
   executeEmbeddedSignUpFlow,
   executeEmbeddedSignInFlow,
   deriveOrganizationHandleFromBaseUrl,
-  extractUserClaimsFromIdToken
+  extractUserClaimsFromIdToken,
+  navigate,
+  getRedirectBasedSignUpUrl
 } from "@asgardeo/browser";
 
 // src/__temp__/api.ts
@@ -714,29 +717,16 @@ var AsgardeoReactClient = class extends AsgardeoBrowserClient {
     return Promise.resolve(String(response));
   }
   async signUp(...args) {
-    if (args.length === 0) {
-      throw new 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 executeEmbeddedSignUpFlow({
         baseUrl,
         payload: firstArg
       });
     }
-    throw new AsgardeoRuntimeError(
-      "Not implemented",
-      "react-AsgardeoReactClient-ValidationError-002",
-      "react",
-      "The signUp method with SignUpOptions is not implemented in the React client."
-    );
+    navigate(getRedirectBasedSignUpUrl(configData));
   }
   async request(requestConfig) {
     return this.asgardeo.httpRequest(requestConfig);
@@ -1109,7 +1099,8 @@ import {
   createTheme,
   detectThemeMode,
   createClassObserver,
-  createMediaQueryListener
+  createMediaQueryListener,
+  DEFAULT_THEME
 } from "@asgardeo/browser";
 
 // src/contexts/Theme/ThemeContext.ts
@@ -1147,7 +1138,7 @@ var applyThemeToDOM = (theme) => {
 var ThemeProvider = ({
   children,
   theme: themeConfig,
-  mode = "system",
+  mode = DEFAULT_THEME,
   detection = {},
   inheritFromBranding = true
 }) => {
@@ -1642,12 +1633,6 @@ var AsgardeoProvider = ({
       setIsLoadingSync(asgardeo.isLoading());
     }
   };
-  const isDarkMode = useMemo6(() => {
-    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) => ({
@@ -1715,7 +1700,7 @@ var AsgardeoProvider = ({
         {
           inheritFromBranding: preferences?.theme?.inheritFromBranding,
           theme: preferences?.theme?.overrides,
-          mode: isDarkMode ? "dark" : "light",
+          mode: getActiveTheme(preferences.theme.mode),
           children: /* @__PURE__ */ jsx7(FlowProvider_default, { children: /* @__PURE__ */ jsx7(UserProvider_default, { profile: userProfile, onUpdateProfile: handleProfileUpdate, children: /* @__PURE__ */ jsx7(
             OrganizationProvider_default,
             {
@@ -2230,6 +2215,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": css2`
         background-color: transparent;
@@ -2244,30 +2233,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": css2`
         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": css2`
         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": css2`
         background-color: ${theme.vars.colors.secondary.main};
@@ -2281,6 +2290,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": css2`
         background-color: transparent;
@@ -2295,30 +2308,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": css2`
         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": css2`
         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": css2`
         background-color: ${theme.vars.colors.text.secondary};
@@ -2333,6 +2366,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": css2`
         background-color: transparent;
@@ -2346,32 +2384,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": css2`
         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": css2`
         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 = css2`
@@ -2507,7 +2565,7 @@ BaseSignInButton.displayName = "BaseSignInButton";
 var BaseSignInButton_default = BaseSignInButton;
 
 // src/components/actions/SignInButton/SignInButton.tsx
-import { AsgardeoRuntimeError as AsgardeoRuntimeError4 } from "@asgardeo/browser";
+import { AsgardeoRuntimeError as AsgardeoRuntimeError4, navigate as navigate2 } from "@asgardeo/browser";
 import { forwardRef as forwardRef3, useState as useState9 } from "react";
 import { jsx as jsx11 } from "react/jsx-runtime";
 var SignInButton = forwardRef3(({ children, onClick, preferences, signInOptions: overriddenSignInOptions = {}, ...rest }, ref) => {
@@ -2518,8 +2576,7 @@ var SignInButton = forwardRef3(({ children, onClick, preferences, signInOptions:
     try {
       setIsLoading(true);
       if (signInUrl) {
-        window.history.pushState(null, "", signInUrl);
-        window.dispatchEvent(new PopStateEvent("popstate", { state: null }));
+        navigate2(signInUrl);
       } else {
         await signIn(overriddenSignInOptions ?? signInOptions);
       }
@@ -2528,7 +2585,7 @@ var SignInButton = forwardRef3(({ children, onClick, preferences, signInOptions:
       }
     } catch (error) {
       throw new AsgardeoRuntimeError4(
-        `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."
@@ -2646,6 +2703,8 @@ var BaseSignUpButton = forwardRef6(
         disabled: isLoading,
         loading: isLoading,
         type: "button",
+        color: "primary",
+        variant: "solid",
         ...rest,
         children
       }
@@ -2657,6 +2716,7 @@ var BaseSignUpButton_default = BaseSignUpButton;
 
 // src/components/actions/SignUpButton/SignUpButton.tsx
 import { AsgardeoRuntimeError as AsgardeoRuntimeError6 } from "@asgardeo/browser";
+import { navigate as navigate3 } from "@asgardeo/browser";
 import { forwardRef as forwardRef7, useState as useState11 } from "react";
 import { jsx as jsx15 } from "react/jsx-runtime";
 var SignUpButton = forwardRef7(({ children, onClick, preferences, ...rest }, ref) => {
@@ -2667,8 +2727,7 @@ var SignUpButton = forwardRef7(({ children, onClick, preferences, ...rest }, ref
     try {
       setIsLoading(true);
       if (signUpUrl) {
-        window.history.pushState(null, "", signUpUrl);
-        window.dispatchEvent(new PopStateEvent("popstate", { state: null }));
+        navigate3(signUpUrl);
       } else {
         await signUp();
       }
@@ -4321,13 +4380,13 @@ var UsernamePassword = ({
     /* @__PURE__ */ jsx31(
       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")
       }
@@ -4377,13 +4436,13 @@ var IdentifierFirst = ({
     /* @__PURE__ */ jsx32(
       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")
       }
@@ -4392,29 +4451,24 @@ var IdentifierFirst = ({
 };
 var IdentifierFirst_default = IdentifierFirst;
 
-// src/components/presentation/SignIn/options/GoogleButton.tsx
+// src/components/presentation/options/GoogleButton.tsx
 import { jsx as jsx33, jsxs as jsxs13 } from "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__ */ jsx33(
     Button_default,
     {
+      ...rest,
+      fullWidth: true,
       type: "button",
-      variant: "solid",
       color: "secondary",
-      fullWidth: true,
+      variant: "solid",
       disabled: isLoading,
-      onClick: handleClick,
-      className: buttonClassName,
       startIcon: /* @__PURE__ */ jsx33("svg", { width: "18", height: "18", viewBox: "0 0 67.91 67.901", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsxs13("g", { transform: "translate(-0.001 -0.001)", children: [
         /* @__PURE__ */ jsx33(
           "path",
@@ -4449,35 +4503,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
 import { jsx as jsx34 } from "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__ */ jsx34(
     Button_default,
     {
+      ...rest,
+      fullWidth: true,
       type: "button",
-      variant: "solid",
       color: "secondary",
-      fullWidth: true,
+      variant: "solid",
       disabled: isLoading,
-      onClick: handleClick,
-      className: buttonClassName,
       startIcon: /* @__PURE__ */ jsx34("svg", { width: "18", height: "18", viewBox: "0 0 67.91 66.233", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsx34("g", { transform: "translate(-386.96 658.072)", children: /* @__PURE__ */ jsx34(
         "path",
         {
@@ -4485,35 +4534,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
 import { jsx as jsx35, jsxs as jsxs14 } from "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__ */ jsx35(
     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__ */ jsxs14("svg", { width: "14", height: "14", viewBox: "0 0 23 23", xmlns: "http://www.w3.org/2000/svg", children: [
         /* @__PURE__ */ jsx35("path", { fill: "#f3f3f3", d: "M0 0h23v23H0z" }),
         /* @__PURE__ */ jsx35("path", { fill: "#f35325", d: "M1 1h10v10H1z" }),
@@ -4521,36 +4565,30 @@ var MicrosoftButton = ({
         /* @__PURE__ */ jsx35("path", { fill: "#05a6f0", d: "M1 12h10v10H1z" }),
         /* @__PURE__ */ jsx35("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
 import { jsx as jsx36, jsxs as jsxs15 } from "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__ */ jsx36(
     Button_default,
     {
+      ...rest,
+      fullWidth: true,
       type: "button",
-      variant: "solid",
       color: "primary",
-      fullWidth: true,
+      variant: "solid",
       disabled: isLoading,
-      onClick: handleClick,
-      className: buttonClassName,
       startIcon: /* @__PURE__ */ jsxs15("svg", { width: "18", height: "18", viewBox: "0 0 512 512", xmlns: "http://www.w3.org/2000/svg", children: [
         /* @__PURE__ */ jsx36(
           "path",
@@ -4567,35 +4605,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
 import { jsx as jsx37 } from "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__ */ jsx37(
     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__ */ jsx37("svg", { width: "18", height: "18", viewBox: "0 0 24 24", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsx37(
         "path",
         {
@@ -4603,35 +4636,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
 import { jsx as jsx38 } from "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__ */ jsx38(
     Button_default,
     {
+      ...rest,
+      fullWidth: true,
       type: "button",
-      variant: "outline",
       color: "secondary",
-      fullWidth: true,
+      variant: "solid",
       disabled: isLoading,
-      onClick: handleClick,
-      className: buttonClassName,
       startIcon: /* @__PURE__ */ jsx38("svg", { width: "18", height: "18", viewBox: "0 0 24 24", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsx38(
         "path",
         {
@@ -4639,7 +4667,7 @@ 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")
     }
   );
 };
@@ -4698,13 +4726,13 @@ var EmailOtp = ({
     /* @__PURE__ */ jsx39(
       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")
       }
@@ -4766,13 +4794,13 @@ var Totp = ({
     /* @__PURE__ */ jsx40(
       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")
       }
@@ -4834,13 +4862,13 @@ var SmsOtp = ({
     /* @__PURE__ */ jsx41(
       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")
       }
@@ -4849,33 +4877,24 @@ var SmsOtp = ({
 };
 var SmsOtp_default = SmsOtp;
 
-// src/components/presentation/SignIn/options/SocialButton.tsx
+// src/components/presentation/options/SocialButton.tsx
 import { jsx as jsx42 } from "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__ */ jsx42(
     Button_default,
     {
+      ...rest,
+      fullWidth: true,
       type: "button",
-      variant: "outline",
       color: "secondary",
-      fullWidth: true,
+      variant: "outline",
       disabled: isLoading,
-      onClick: handleClick,
-      className: buttonClassName,
       startIcon: /* @__PURE__ */ jsx42("svg", { width: "18", height: "18", viewBox: "0 0 24 24", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsx42(
         "path",
         {
@@ -4883,7 +4902,7 @@ 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 })
     }
   );
 };
@@ -4972,10 +4991,10 @@ var MultiOptionButton = ({
   return /* @__PURE__ */ jsx43(
     Button_default,
     {
-      type: "button",
-      variant: "outline",
-      color: "primary",
       fullWidth: true,
+      type: "button",
+      color: "secondary",
+      variant: "solid",
       disabled: isLoading,
       onClick: handleClick,
       className: buttonClassName,
@@ -4988,40 +5007,109 @@ var MultiOptionButton_default = MultiOptionButton;
 
 // src/components/presentation/SignIn/options/SignInOptionFactory.tsx
 import { jsx as jsx44 } from "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 ApplicationNativeAuthenticationConstants2.SupportedAuthenticators.UsernamePassword:
-      return /* @__PURE__ */ jsx44(UsernamePassword_default, { ...props });
+      return /* @__PURE__ */ jsx44(UsernamePassword_default, { authenticator, preferences, onSubmit, ...rest });
     case ApplicationNativeAuthenticationConstants2.SupportedAuthenticators.IdentifierFirst:
-      return /* @__PURE__ */ jsx44(IdentifierFirst_default, { ...props });
+      return /* @__PURE__ */ jsx44(IdentifierFirst_default, { authenticator, preferences, onSubmit, ...rest });
     case ApplicationNativeAuthenticationConstants2.SupportedAuthenticators.Google:
-      return /* @__PURE__ */ jsx44(GoogleButton_default, { ...props });
+      return /* @__PURE__ */ jsx44(
+        GoogleButton_default,
+        {
+          className: buttonClassName,
+          onClick: () => onSubmit(authenticator),
+          authenticator,
+          preferences,
+          ...rest
+        }
+      );
     case ApplicationNativeAuthenticationConstants2.SupportedAuthenticators.GitHub:
-      return /* @__PURE__ */ jsx44(GitHubButton_default, { ...props });
+      return /* @__PURE__ */ jsx44(
+        GitHubButton_default,
+        {
+          authenticator,
+          preferences,
+          className: buttonClassName,
+          onClick: () => onSubmit(authenticator),
+          ...rest
+        }
+      );
     case ApplicationNativeAuthenticationConstants2.SupportedAuthenticators.Microsoft:
-      return /* @__PURE__ */ jsx44(MicrosoftButton_default, { ...props });
+      return /* @__PURE__ */ jsx44(
+        MicrosoftButton_default,
+        {
+          authenticator,
+          preferences,
+          className: buttonClassName,
+          onClick: () => onSubmit(authenticator),
+          ...rest
+        }
+      );
     case ApplicationNativeAuthenticationConstants2.SupportedAuthenticators.Facebook:
-      return /* @__PURE__ */ jsx44(FacebookButton_default, { ...props });
+      return /* @__PURE__ */ jsx44(
+        FacebookButton_default,
+        {
+          authenticator,
+          preferences,
+          className: buttonClassName,
+          onClick: () => onSubmit(authenticator),
+          ...rest
+        }
+      );
     case ApplicationNativeAuthenticationConstants2.SupportedAuthenticators.LinkedIn:
-      return /* @__PURE__ */ jsx44(LinkedInButton_default, { ...props });
+      return /* @__PURE__ */ jsx44(
+        LinkedInButton_default,
+        {
+          authenticator,
+          preferences,
+          className: buttonClassName,
+          onClick: () => onSubmit(authenticator),
+          ...rest
+        }
+      );
     case ApplicationNativeAuthenticationConstants2.SupportedAuthenticators.SignInWithEthereum:
-      return /* @__PURE__ */ jsx44(SignInWithEthereumButton_default, { ...props });
+      return /* @__PURE__ */ jsx44(
+        SignInWithEthereumButton_default,
+        {
+          authenticator,
+          preferences,
+          className: buttonClassName,
+          onClick: () => onSubmit(authenticator),
+          ...rest
+        }
+      );
     case ApplicationNativeAuthenticationConstants2.SupportedAuthenticators.EmailOtp:
-      return hasParams ? /* @__PURE__ */ jsx44(EmailOtp_default, { ...props }) : /* @__PURE__ */ jsx44(MultiOptionButton_default, { ...props });
+      return hasParams ? /* @__PURE__ */ jsx44(EmailOtp_default, { authenticator, preferences, onSubmit, ...rest }) : /* @__PURE__ */ jsx44(MultiOptionButton_default, { authenticator, preferences, onSubmit, ...rest });
     case ApplicationNativeAuthenticationConstants2.SupportedAuthenticators.Totp:
-      return hasParams ? /* @__PURE__ */ jsx44(Totp_default, { ...props }) : /* @__PURE__ */ jsx44(MultiOptionButton_default, { ...props });
+      return hasParams ? /* @__PURE__ */ jsx44(Totp_default, { authenticator, preferences, onSubmit, ...rest }) : /* @__PURE__ */ jsx44(MultiOptionButton_default, { authenticator, preferences, onSubmit, ...rest });
     case ApplicationNativeAuthenticationConstants2.SupportedAuthenticators.SmsOtp:
-      return hasParams ? /* @__PURE__ */ jsx44(SmsOtp_default, { ...props }) : /* @__PURE__ */ jsx44(MultiOptionButton_default, { ...props });
+      return hasParams ? /* @__PURE__ */ jsx44(SmsOtp_default, { authenticator, preferences, onSubmit, ...rest }) : /* @__PURE__ */ jsx44(MultiOptionButton_default, { authenticator, preferences, onSubmit, ...rest });
     default:
       if (authenticator.idp !== EmbeddedSignInFlowAuthenticatorKnownIdPType2.Local) {
-        return /* @__PURE__ */ jsx44(SocialButton_default, { ...props });
+        return /* @__PURE__ */ jsx44(
+          SocialButton_default,
+          {
+            authenticator,
+            preferences,
+            className: buttonClassName,
+            onClick: () => onSubmit(authenticator),
+            ...rest,
+            children: authenticator.idp
+          }
+        );
       }
       if (hasParams) {
-        return /* @__PURE__ */ jsx44(UsernamePassword_default, { ...props });
+        return /* @__PURE__ */ jsx44(UsernamePassword_default, { authenticator, preferences, onSubmit, ...rest });
       } else {
-        return /* @__PURE__ */ jsx44(MultiOptionButton_default, { ...props });
+        return /* @__PURE__ */ jsx44(MultiOptionButton_default, { authenticator, preferences, onSubmit, ...rest });
       }
   }
 };
@@ -6909,75 +6997,8 @@ var FormContainer = (props) => {
 };
 var FormContainer_default = FormContainer;
 
-// src/components/presentation/SignUp/options/GoogleButton.tsx
-import { jsx as jsx57, jsxs as jsxs27 } from "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__ */ jsx57(
-    Button_default,
-    {
-      type: "button",
-      variant: "solid",
-      color: "secondary",
-      size,
-      disabled: isLoading,
-      onClick: handleClick,
-      className: buttonClassName,
-      style: { width: "100%" },
-      startIcon: /* @__PURE__ */ jsx57("svg", { width: "18", height: "18", viewBox: "0 0 67.91 67.901", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsxs27("g", { transform: "translate(-0.001 -0.001)", children: [
-        /* @__PURE__ */ jsx57(
-          "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__ */ jsx57(
-          "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__ */ jsx57(
-          "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__ */ jsx57(
-          "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
-import { jsx as jsx58 } from "react/jsx-runtime";
+import { jsx as jsx57 } from "react/jsx-runtime";
 var ImageComponent = ({ component }) => {
   const { theme } = useTheme_default();
   const config = component.config || {};
@@ -6994,7 +7015,7 @@ var ImageComponent = ({ component }) => {
   if (!src) {
     return null;
   }
-  return /* @__PURE__ */ jsx58("div", { style: { textAlign: "center" }, children: /* @__PURE__ */ jsx58(
+  return /* @__PURE__ */ jsx57("div", { style: { textAlign: "center" }, children: /* @__PURE__ */ jsx57(
     "img",
     {
       src,
@@ -7097,7 +7118,7 @@ var PasswordInput = ({
 var PasswordInput_default = PasswordInput;
 
 // src/components/presentation/SignUp/options/SubmitButton.tsx
-import { jsx as jsx59 } from "react/jsx-runtime";
+import { jsx as jsx58 } from "react/jsx-runtime";
 var ButtonComponent = ({
   component,
   isLoading,
@@ -7130,7 +7151,7 @@ var ButtonComponent = ({
       onSubmit(component);
     }
   };
-  return /* @__PURE__ */ jsx59(
+  return /* @__PURE__ */ jsx58(
     Button_default,
     {
       type: buttonType === "submit" ? "submit" : "button",
@@ -7141,7 +7162,7 @@ var ButtonComponent = ({
       onClick: buttonType !== "submit" ? handleClick : void 0,
       className: buttonClassName,
       style: { width: "100%" },
-      children: isLoading ? /* @__PURE__ */ jsx59(Spinner_default, { size: "small" }) : buttonText
+      children: isLoading ? /* @__PURE__ */ jsx58(Spinner_default, { size: "small" }) : buttonText
     },
     component.id
   );
@@ -7149,7 +7170,7 @@ var ButtonComponent = ({
 var SubmitButton_default = ButtonComponent;
 
 // src/components/presentation/SignUp/options/TelephoneInput.tsx
-import { jsx as jsx60 } from "react/jsx-runtime";
+import { jsx as jsx59 } from "react/jsx-runtime";
 var TelephoneInput = ({
   component,
   formValues,
@@ -7162,7 +7183,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__ */ jsx60(
+  return /* @__PURE__ */ jsx59(
     TextField_default,
     {
       name: fieldName,
@@ -7210,7 +7231,7 @@ var TextInput = ({
 var TextInput_default = TextInput;
 
 // src/components/presentation/SignUp/options/Typography.tsx
-import { jsx as jsx61 } from "react/jsx-runtime";
+import { jsx as jsx60 } from "react/jsx-runtime";
 var TypographyComponent = ({ component }) => {
   const { theme } = useTheme_default();
   const config = component.config || {};
@@ -7251,7 +7272,7 @@ var TypographyComponent = ({ component }) => {
     default:
       typographyVariant = "body1";
   }
-  return /* @__PURE__ */ jsx61(
+  return /* @__PURE__ */ jsx60(
     Typography_default,
     {
       variant: typographyVariant,
@@ -7264,50 +7285,66 @@ var TypographyComponent = ({ component }) => {
 var Typography_default2 = TypographyComponent;
 
 // src/components/presentation/SignUp/options/SignUpOptionFactory.tsx
-import { jsx as jsx62 } from "react/jsx-runtime";
-var createSignUpComponent = (props) => {
-  const { component } = props;
+import { jsx as jsx61 } from "react/jsx-runtime";
+var createSignUpComponent = ({ component, onSubmit, ...rest }) => {
   switch (component.type) {
     case EmbeddedFlowComponentType.Typography:
-      return /* @__PURE__ */ jsx62(Typography_default2, { ...props });
+      return /* @__PURE__ */ jsx61(Typography_default2, { component, onSubmit, ...rest });
     case EmbeddedFlowComponentType.Input:
       const inputVariant = component.variant?.toUpperCase();
       const inputType = component.config["type"]?.toLowerCase();
       if (inputVariant === "EMAIL" || inputType === "email") {
-        return /* @__PURE__ */ jsx62(EmailInput_default, { ...props });
+        return /* @__PURE__ */ jsx61(EmailInput_default, { component, onSubmit, ...rest });
       }
       if (inputVariant === "PASSWORD" || inputType === "password") {
-        return /* @__PURE__ */ jsx62(PasswordInput_default, { ...props });
+        return /* @__PURE__ */ jsx61(PasswordInput_default, { component, onSubmit, ...rest });
       }
       if (inputVariant === "TELEPHONE" || inputType === "tel") {
-        return /* @__PURE__ */ jsx62(TelephoneInput_default, { ...props });
+        return /* @__PURE__ */ jsx61(TelephoneInput_default, { component, onSubmit, ...rest });
       }
       if (inputVariant === "NUMBER" || inputType === "number") {
-        return /* @__PURE__ */ jsx62(NumberInput_default, { ...props });
+        return /* @__PURE__ */ jsx61(NumberInput_default, { component, onSubmit, ...rest });
       }
       if (inputVariant === "DATE" || inputType === "date") {
-        return /* @__PURE__ */ jsx62(DateInput_default, { ...props });
+        return /* @__PURE__ */ jsx61(DateInput_default, { component, onSubmit, ...rest });
       }
       if (inputVariant === "CHECKBOX" || inputType === "checkbox") {
-        return /* @__PURE__ */ jsx62(CheckboxInput_default, { ...props });
+        return /* @__PURE__ */ jsx61(CheckboxInput_default, { component, onSubmit, ...rest });
       }
-      return /* @__PURE__ */ jsx62(TextInput_default, { ...props });
+      return /* @__PURE__ */ jsx61(TextInput_default, { component, onSubmit, ...rest });
     case EmbeddedFlowComponentType.Button: {
       const buttonVariant = component.variant?.toUpperCase();
       const buttonText = component.config["text"] || component.config["label"] || "";
-      if (buttonVariant === "SOCIAL" && buttonText.toLowerCase().includes("google")) {
-        return /* @__PURE__ */ jsx62(GoogleButton_default2, { ...props });
+      if (buttonVariant === "SOCIAL") {
+        if (buttonText.toLowerCase().includes("google")) {
+          return /* @__PURE__ */ jsx61(GoogleButton_default, { onClick: () => onSubmit(component, {}), ...rest, children: buttonText });
+        }
+        if (buttonText.toLowerCase().includes("github")) {
+          return /* @__PURE__ */ jsx61(GitHubButton_default, { onClick: () => onSubmit(component, {}), ...rest, children: buttonText });
+        }
+        if (buttonText.toLowerCase().includes("microsoft")) {
+          return /* @__PURE__ */ jsx61(MicrosoftButton_default, { onClick: () => onSubmit(component, {}), ...rest, children: buttonText });
+        }
+        if (buttonText.toLowerCase().includes("facebook")) {
+          return /* @__PURE__ */ jsx61(FacebookButton_default, { onClick: () => onSubmit(component, {}), ...rest, children: buttonText });
+        }
+        if (buttonText.toLowerCase().includes("linkedin")) {
+          return /* @__PURE__ */ jsx61(LinkedInButton_default, { onClick: () => onSubmit(component, {}), ...rest, children: buttonText });
+        }
+        if (buttonText.toLowerCase().includes("ethereum")) {
+          return /* @__PURE__ */ jsx61(SignInWithEthereumButton_default, { onClick: () => onSubmit(component, {}), ...rest, children: buttonText });
+        }
       }
-      return /* @__PURE__ */ jsx62(SubmitButton_default, { ...props });
+      return /* @__PURE__ */ jsx61(SubmitButton_default, { component, onSubmit, ...rest });
     }
     case EmbeddedFlowComponentType.Form:
-      return /* @__PURE__ */ jsx62(FormContainer_default, { ...props });
+      return /* @__PURE__ */ jsx61(FormContainer_default, { component, onSubmit, ...rest });
     case EmbeddedFlowComponentType.Divider:
-      return /* @__PURE__ */ jsx62(DividerComponent_default, { ...props });
+      return /* @__PURE__ */ jsx61(DividerComponent_default, { component, onSubmit, ...rest });
     case EmbeddedFlowComponentType.Image:
-      return /* @__PURE__ */ jsx62(ImageComponent_default, { ...props });
+      return /* @__PURE__ */ jsx61(ImageComponent_default, { component, onSubmit, ...rest });
     default:
-      return /* @__PURE__ */ jsx62("div", {});
+      return /* @__PURE__ */ jsx61("div", {});
   }
 };
 var createSignUpOptionFromComponent = (component, formValues, touchedFields, formErrors, isLoading, isFormValid, onInputChange, options) => createSignUpComponent({
@@ -7479,13 +7516,13 @@ var useStyles17 = (theme, colorScheme) => {
 var BaseSignUp_styles_default = useStyles17;
 
 // src/components/presentation/SignUp/BaseSignUp.tsx
-import { jsx as jsx63, jsxs as jsxs28 } from "react/jsx-runtime";
+import { jsx as jsx62, jsxs as jsxs27 } from "react/jsx-runtime";
 var BaseSignUp = (props) => {
   const { theme, colorScheme } = useTheme_default();
   const styles = BaseSignUp_styles_default(theme, colorScheme);
-  return /* @__PURE__ */ jsxs28("div", { children: [
-    /* @__PURE__ */ jsx63("div", { className: styles.logoContainer, children: /* @__PURE__ */ jsx63(Logo_default, { size: "large" }) }),
-    /* @__PURE__ */ jsx63(FlowProvider_default, { children: /* @__PURE__ */ jsx63(BaseSignUpContent, { ...props }) })
+  return /* @__PURE__ */ jsxs27("div", { children: [
+    /* @__PURE__ */ jsx62("div", { className: styles.logoContainer, children: /* @__PURE__ */ jsx62(Logo_default, { size: "large" }) }),
+    /* @__PURE__ */ jsx62(FlowProvider_default, { children: /* @__PURE__ */ jsx62(BaseSignUpContent, { ...props }) })
   ] });
 };
 var BaseSignUpContent = ({
@@ -7843,30 +7880,30 @@ var BaseSignUpContent = ({
     t
   ]);
   if (!isFlowInitialized && isLoading) {
-    return /* @__PURE__ */ jsx63(Card_default, { className: cx20(containerClasses, styles.card), variant, children: /* @__PURE__ */ jsx63(Card_default.Content, { children: /* @__PURE__ */ jsx63("div", { className: styles.loadingContainer, children: /* @__PURE__ */ jsx63(Spinner_default, { size: "medium" }) }) }) });
+    return /* @__PURE__ */ jsx62(Card_default, { className: cx20(containerClasses, styles.card), variant, children: /* @__PURE__ */ jsx62(Card_default.Content, { children: /* @__PURE__ */ jsx62("div", { className: styles.loadingContainer, children: /* @__PURE__ */ jsx62(Spinner_default, { size: "medium" }) }) }) });
   }
   if (!currentFlow) {
-    return /* @__PURE__ */ jsx63(Card_default, { className: cx20(containerClasses, styles.card), variant, children: /* @__PURE__ */ jsx63(Card_default.Content, { children: /* @__PURE__ */ jsxs28(Alert_default, { variant: "error", className: errorClasses, children: [
-      /* @__PURE__ */ jsx63(Alert_default.Title, { children: t("errors.title") || "Error" }),
-      /* @__PURE__ */ jsx63(Alert_default.Description, { children: error || t("errors.sign.up.flow.initialization.failure") })
+    return /* @__PURE__ */ jsx62(Card_default, { className: cx20(containerClasses, styles.card), variant, children: /* @__PURE__ */ jsx62(Card_default.Content, { children: /* @__PURE__ */ jsxs27(Alert_default, { variant: "error", className: errorClasses, children: [
+      /* @__PURE__ */ jsx62(Alert_default.Title, { children: t("errors.title") || "Error" }),
+      /* @__PURE__ */ jsx62(Alert_default.Description, { children: error || t("errors.sign.up.flow.initialization.failure") })
     ] }) }) });
   }
-  return /* @__PURE__ */ jsxs28(Card_default, { className: cx20(containerClasses, styles.card), variant, children: [
-    flowMessages && flowMessages.length > 0 && /* @__PURE__ */ jsx63(Card_default.Header, { className: styles.header, children: /* @__PURE__ */ jsx63("div", { className: styles.messagesContainer, children: flowMessages.map((message, index) => /* @__PURE__ */ jsx63(
+  return /* @__PURE__ */ jsxs27(Card_default, { className: cx20(containerClasses, styles.card), variant, children: [
+    flowMessages && flowMessages.length > 0 && /* @__PURE__ */ jsx62(Card_default.Header, { className: styles.header, children: /* @__PURE__ */ jsx62("div", { className: styles.messagesContainer, children: flowMessages.map((message, index) => /* @__PURE__ */ jsx62(
       Alert_default,
       {
         variant: message.type?.toLowerCase() === "error" ? "error" : "info",
         className: cx20(styles.messageItem, messageClasses),
-        children: /* @__PURE__ */ jsx63(Alert_default.Description, { children: message.message })
+        children: /* @__PURE__ */ jsx62(Alert_default.Description, { children: message.message })
       },
       message.id || index
     )) }) }),
-    /* @__PURE__ */ jsxs28(Card_default.Content, { children: [
-      error && /* @__PURE__ */ jsxs28(Alert_default, { variant: "error", className: cx20(styles.errorContainer, errorClasses), children: [
-        /* @__PURE__ */ jsx63(Alert_default.Title, { children: t("errors.title") || "Error" }),
-        /* @__PURE__ */ jsx63(Alert_default.Description, { children: error })
+    /* @__PURE__ */ jsxs27(Card_default.Content, { children: [
+      error && /* @__PURE__ */ jsxs27(Alert_default, { variant: "error", className: cx20(styles.errorContainer, errorClasses), children: [
+        /* @__PURE__ */ jsx62(Alert_default.Title, { children: t("errors.title") || "Error" }),
+        /* @__PURE__ */ jsx62(Alert_default.Description, { children: error })
       ] }),
-      /* @__PURE__ */ jsx63("div", { className: styles.contentContainer, children: currentFlow.data?.components && renderComponents(currentFlow.data.components) })
+      /* @__PURE__ */ jsx62("div", { className: styles.contentContainer, children: currentFlow.data?.components && renderComponents(currentFlow.data.components) })
     ] })
   ] });
 };
@@ -7877,7 +7914,7 @@ import {
   EmbeddedFlowResponseType as EmbeddedFlowResponseType2,
   EmbeddedFlowType
 } from "@asgardeo/browser";
-import { jsx as jsx64 } from "react/jsx-runtime";
+import { jsx as jsx63 } from "react/jsx-runtime";
 var SignUp = ({
   className,
   size = "medium",
@@ -7904,7 +7941,7 @@ var SignUp = ({
       window.location.href = response.data.redirectURL;
     }
   };
-  return /* @__PURE__ */ jsx64(
+  return /* @__PURE__ */ jsx63(
     BaseSignUp_default,
     {
       afterSignUpUrl,
@@ -7922,41 +7959,41 @@ var SignUp = ({
 var SignUp_default = SignUp;
 
 // src/components/presentation/User/BaseUser.tsx
-import { Fragment as Fragment12, jsx as jsx65 } from "react/jsx-runtime";
+import { Fragment as Fragment12, jsx as jsx64 } from "react/jsx-runtime";
 var BaseUser = ({ user, children, fallback = null }) => {
   if (!user) {
-    return /* @__PURE__ */ jsx65(Fragment12, { children: fallback });
+    return /* @__PURE__ */ jsx64(Fragment12, { children: fallback });
   }
-  return /* @__PURE__ */ jsx65(Fragment12, { children: children(user) });
+  return /* @__PURE__ */ jsx64(Fragment12, { children: children(user) });
 };
 BaseUser.displayName = "BaseUser";
 var BaseUser_default = BaseUser;
 
 // src/components/presentation/User/User.tsx
-import { jsx as jsx66 } from "react/jsx-runtime";
+import { jsx as jsx65 } from "react/jsx-runtime";
 var User5 = ({ children, fallback = null }) => {
   const { user } = useAsgardeo_default();
-  return /* @__PURE__ */ jsx66(BaseUser_default, { user, fallback, children });
+  return /* @__PURE__ */ jsx65(BaseUser_default, { user, fallback, children });
 };
 User5.displayName = "User";
 var User_default = User5;
 
 // src/components/presentation/Organization/BaseOrganization.tsx
-import { Fragment as Fragment13, jsx as jsx67 } from "react/jsx-runtime";
+import { Fragment as Fragment13, jsx as jsx66 } from "react/jsx-runtime";
 var BaseOrganization = ({ children, fallback = null, organization }) => {
   if (!organization) {
-    return /* @__PURE__ */ jsx67(Fragment13, { children: fallback });
+    return /* @__PURE__ */ jsx66(Fragment13, { children: fallback });
   }
-  return /* @__PURE__ */ jsx67(Fragment13, { children: children(organization) });
+  return /* @__PURE__ */ jsx66(Fragment13, { children: children(organization) });
 };
 BaseOrganization.displayName = "BaseOrganization";
 var BaseOrganization_default = BaseOrganization;
 
 // src/components/presentation/Organization/Organization.tsx
-import { jsx as jsx68 } from "react/jsx-runtime";
+import { jsx as jsx67 } from "react/jsx-runtime";
 var Organization5 = ({ children, fallback = null }) => {
   const { currentOrganization } = useOrganization_default();
-  return /* @__PURE__ */ jsx68(BaseOrganization_default, { organization: currentOrganization, fallback, children });
+  return /* @__PURE__ */ jsx67(BaseOrganization_default, { organization: currentOrganization, fallback, children });
 };
 Organization5.displayName = "Organization";
 var Organization_default = Organization5;
@@ -8044,18 +8081,25 @@ var useStyles18 = (theme, colorScheme, size, variant, backgroundColor) => {
         }
       }
     `;
+    const iconStyles = css18`
+      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
-import { jsx as jsx69 } from "react/jsx-runtime";
+import { jsx as jsx68 } from "react/jsx-runtime";
 var Avatar = ({
   alt = "User avatar",
   background = "random",
@@ -8063,7 +8107,8 @@ var Avatar = ({
   imageUrl,
   name,
   size = 64,
-  variant = "circular"
+  variant = "circular",
+  isLoading = false
 }) => {
   const { theme, colorScheme } = useTheme_default();
   const generateBackgroundColor = (inputString) => {
@@ -8097,17 +8142,29 @@ 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__ */ jsx69("img", { src: imageUrl, alt, className: cx21(withVendorCSSClassPrefix21(bem16("avatar", "image")), styles.image) });
+      return /* @__PURE__ */ jsx68("img", { src: imageUrl, alt, className: cx21(withVendorCSSClassPrefix21(bem16("avatar", "image")), styles.image) });
     }
     if (name) {
       return getInitials(name);
     }
-    return /* @__PURE__ */ jsx69("div", { className: cx21(withVendorCSSClassPrefix21(bem16("avatar", "skeleton")), styles.skeleton) });
+    if (isLoading) {
+      return /* @__PURE__ */ jsx68("div", { className: cx21(withVendorCSSClassPrefix21(bem16("avatar", "skeleton")), styles.skeleton) });
+    }
+    return /* @__PURE__ */ jsx68(
+      "svg",
+      {
+        xmlns: "http://www.w3.org/2000/svg",
+        viewBox: "0 0 640 640",
+        className: cx21(withVendorCSSClassPrefix21(bem16("avatar", "icon")), styles.icon),
+        children: /* @__PURE__ */ jsx68("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__ */ jsx69(
+  return /* @__PURE__ */ jsx68(
     "div",
     {
       className: cx21(
@@ -8115,6 +8172,7 @@ var Avatar = ({
         styles.avatar,
         styles.variant,
         withVendorCSSClassPrefix21(bem16("avatar", null, variant)),
+        isDefaultState && withVendorCSSClassPrefix21(bem16("avatar", "default")),
         className
       ),
       children: renderContent()
@@ -8141,8 +8199,8 @@ import { cx as cx22 } from "@emotion/css";
 import React from "react";
 
 // src/components/primitives/Icons/LogOut.tsx
-import { jsx as jsx70, jsxs as jsxs29 } from "react/jsx-runtime";
-var LogOut = (props) => /* @__PURE__ */ jsxs29(
+import { jsx as jsx69, jsxs as jsxs28 } from "react/jsx-runtime";
+var LogOut = (props) => /* @__PURE__ */ jsxs28(
   "svg",
   {
     xmlns: "http://www.w3.org/2000/svg",
@@ -8156,17 +8214,17 @@ var LogOut = (props) => /* @__PURE__ */ jsxs29(
     strokeLinejoin: "round",
     ...props,
     children: [
-      /* @__PURE__ */ jsx70("path", { d: "m16 17 5-5-5-5" }),
-      /* @__PURE__ */ jsx70("path", { d: "M21 12H9" }),
-      /* @__PURE__ */ jsx70("path", { d: "M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4" })
+      /* @__PURE__ */ jsx69("path", { d: "m16 17 5-5-5-5" }),
+      /* @__PURE__ */ jsx69("path", { d: "M21 12H9" }),
+      /* @__PURE__ */ jsx69("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
-import { jsx as jsx71, jsxs as jsxs30 } from "react/jsx-runtime";
-var Plus = (props) => /* @__PURE__ */ jsxs30(
+import { jsx as jsx70, jsxs as jsxs29 } from "react/jsx-runtime";
+var Plus = (props) => /* @__PURE__ */ jsxs29(
   "svg",
   {
     xmlns: "http://www.w3.org/2000/svg",
@@ -8180,16 +8238,16 @@ var Plus = (props) => /* @__PURE__ */ jsxs30(
     strokeLinejoin: "round",
     ...props,
     children: [
-      /* @__PURE__ */ jsx71("path", { d: "M5 12h14" }),
-      /* @__PURE__ */ jsx71("path", { d: "M12 5v14" })
+      /* @__PURE__ */ jsx70("path", { d: "M5 12h14" }),
+      /* @__PURE__ */ jsx70("path", { d: "M12 5v14" })
     ]
   }
 );
 var Plus_default = Plus;
 
 // src/components/primitives/Icons/User.tsx
-import { jsx as jsx72, jsxs as jsxs31 } from "react/jsx-runtime";
-var User7 = (props) => /* @__PURE__ */ jsxs31(
+import { jsx as jsx71, jsxs as jsxs30 } from "react/jsx-runtime";
+var User7 = (props) => /* @__PURE__ */ jsxs30(
   "svg",
   {
     xmlns: "http://www.w3.org/2000/svg",
@@ -8203,16 +8261,16 @@ var User7 = (props) => /* @__PURE__ */ jsxs31(
     strokeLinejoin: "round",
     ...props,
     children: [
-      /* @__PURE__ */ jsx72("path", { d: "M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2" }),
-      /* @__PURE__ */ jsx72("circle", { cx: "12", cy: "7", r: "4" })
+      /* @__PURE__ */ jsx71("path", { d: "M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2" }),
+      /* @__PURE__ */ jsx71("circle", { cx: "12", cy: "7", r: "4" })
     ]
   }
 );
 var User_default2 = User7;
 
 // src/components/primitives/Icons/X.tsx
-import { jsx as jsx73, jsxs as jsxs32 } from "react/jsx-runtime";
-var X = (props) => /* @__PURE__ */ jsxs32(
+import { jsx as jsx72, jsxs as jsxs31 } from "react/jsx-runtime";
+var X = (props) => /* @__PURE__ */ jsxs31(
   "svg",
   {
     xmlns: "http://www.w3.org/2000/svg",
@@ -8226,8 +8284,8 @@ var X = (props) => /* @__PURE__ */ jsxs32(
     strokeLinejoin: "round",
     ...props,
     children: [
-      /* @__PURE__ */ jsx73("path", { d: "M18 6 6 18" }),
-      /* @__PURE__ */ jsx73("path", { d: "m6 6 12 12" })
+      /* @__PURE__ */ jsx72("path", { d: "M18 6 6 18" }),
+      /* @__PURE__ */ jsx72("path", { d: "m6 6 12 12" })
     ]
   }
 );
@@ -8250,17 +8308,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;
     `;
@@ -8310,7 +8357,7 @@ var useStyles19 = (theme, colorScheme) => {
 var Dialog_styles_default = useStyles19;
 
 // src/components/primitives/Dialog/Dialog.tsx
-import { jsx as jsx74, jsxs as jsxs33 } from "react/jsx-runtime";
+import { jsx as jsx73, jsxs as jsxs32 } from "react/jsx-runtime";
 function useDialog({
   initialOpen = false,
   open: controlledOpen,
@@ -8356,7 +8403,7 @@ var useDialogContext = () => {
 };
 function Dialog({ children, ...options }) {
   const dialog = useDialog(options);
-  return /* @__PURE__ */ jsx74(DialogContext.Provider, { value: dialog, children });
+  return /* @__PURE__ */ jsx73(DialogContext.Provider, { value: dialog, children });
 }
 var DialogTrigger = React.forwardRef(
   ({ children, asChild = false, ...props }, propRef) => {
@@ -8374,7 +8421,7 @@ var DialogTrigger = React.forwardRef(
         })
       );
     }
-    return /* @__PURE__ */ jsx74("button", { ref, "data-state": context.open ? "open" : "closed", ...context.getReferenceProps(props), children });
+    return /* @__PURE__ */ jsx73("button", { ref, "data-state": context.open ? "open" : "closed", ...context.getReferenceProps(props), children });
   }
 );
 var DialogContent = React.forwardRef((props, propRef) => {
@@ -8383,7 +8430,7 @@ var DialogContent = React.forwardRef((props, propRef) => {
   const styles = Dialog_styles_default(theme, colorScheme);
   const ref = useMergeRefs([context.refs.setFloating, propRef]);
   if (!floatingContext.open) return null;
-  return /* @__PURE__ */ jsx74(FloatingPortal, { children: /* @__PURE__ */ jsx74(FloatingOverlay, { className: cx22(withVendorCSSClassPrefix22(bem17("dialog", "overlay")), styles.overlay), lockScroll: true, children: /* @__PURE__ */ jsx74(FloatingFocusManager, { context: floatingContext, children: /* @__PURE__ */ jsx74(
+  return /* @__PURE__ */ jsx73(FloatingPortal, { children: /* @__PURE__ */ jsx73(FloatingOverlay, { className: cx22(withVendorCSSClassPrefix22(bem17("dialog", "overlay")), styles.overlay), lockScroll: true, children: /* @__PURE__ */ jsx73(FloatingFocusManager, { context: floatingContext, initialFocus: -1, children: /* @__PURE__ */ jsx73(
     "div",
     {
       ref,
@@ -8405,8 +8452,8 @@ var DialogHeading = React.forwardRef(
       context.setLabelId(id);
       return () => context.setLabelId(void 0);
     }, [id, context.setLabelId]);
-    return /* @__PURE__ */ jsxs33("div", { className: cx22(withVendorCSSClassPrefix22(bem17("dialog", "header")), styles.header), children: [
-      /* @__PURE__ */ jsx74(
+    return /* @__PURE__ */ jsxs32("div", { className: cx22(withVendorCSSClassPrefix22(bem17("dialog", "header")), styles.header), children: [
+      /* @__PURE__ */ jsx73(
         "h2",
         {
           ...props,
@@ -8416,7 +8463,7 @@ var DialogHeading = React.forwardRef(
           children
         }
       ),
-      /* @__PURE__ */ jsx74(
+      /* @__PURE__ */ jsx73(
         Button_default,
         {
           color: "tertiary",
@@ -8425,7 +8472,7 @@ var DialogHeading = React.forwardRef(
           shape: "round",
           onClick: () => context.setOpen(false),
           "aria-label": "Close",
-          children: /* @__PURE__ */ jsx74(X_default, { width: 16, height: 16 })
+          children: /* @__PURE__ */ jsx73(X_default, { width: 16, height: 16 })
         }
       )
     ] });
@@ -8441,7 +8488,7 @@ var DialogDescription = React.forwardRef(
       context.setDescriptionId(id);
       return () => context.setDescriptionId(void 0);
     }, [id, context.setDescriptionId]);
-    return /* @__PURE__ */ jsx74(
+    return /* @__PURE__ */ jsx73(
       "p",
       {
         ...props,
@@ -8471,7 +8518,7 @@ var DialogClose = React.forwardRef(({ children, asChild = false, ...props }, pro
       onClick: handleClick
     });
   }
-  return /* @__PURE__ */ jsx74(
+  return /* @__PURE__ */ jsx73(
     Button_default,
     {
       ...props,
@@ -8594,7 +8641,7 @@ var useStyles20 = (theme, colorScheme, disabled, hasError, canAddMore, canRemove
 var MultiInput_styles_default = useStyles20;
 
 // src/components/primitives/MultiInput/MultiInput.tsx
-import { jsx as jsx75, jsxs as jsxs34 } from "react/jsx-runtime";
+import { jsx as jsx74, jsxs as jsxs33 } from "react/jsx-runtime";
 var MultiInput = ({
   label,
   error,
@@ -8617,8 +8664,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__ */ jsx75("svg", { width: "16", height: "16", viewBox: "0 0 24 24", className: cx23(styles.icon, className2), children: /* @__PURE__ */ jsx75("path", { d: "M12 5v14M5 12h14" }) });
-  const BinIcon = ({ className: className2 }) => /* @__PURE__ */ jsx75("svg", { width: "16", height: "16", viewBox: "0 0 24 24", className: cx23(styles.icon, className2), children: /* @__PURE__ */ jsx75("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__ */ jsx74("svg", { width: "16", height: "16", viewBox: "0 0 24 24", className: cx23(styles.icon, className2), children: /* @__PURE__ */ jsx74("path", { d: "M12 5v14M5 12h14" }) });
+  const BinIcon = ({ className: className2 }) => /* @__PURE__ */ jsx74("svg", { width: "16", height: "16", viewBox: "0 0 24 24", className: cx23(styles.icon, className2), children: /* @__PURE__ */ jsx74("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 = useCallback11(
     (newValue) => {
       if (newValue.trim() !== "" && (!maxFields || values.length < maxFields)) {
@@ -8662,9 +8709,9 @@ var MultiInput = ({
       };
       switch (fieldType) {
         case "DATE_TIME":
-          return /* @__PURE__ */ jsx75(DatePicker_default, { ...commonProps });
+          return /* @__PURE__ */ jsx74(DatePicker_default, { ...commonProps });
         case "BOOLEAN":
-          return /* @__PURE__ */ jsx75(
+          return /* @__PURE__ */ jsx74(
             Checkbox_default,
             {
               ...commonProps,
@@ -8673,7 +8720,7 @@ var MultiInput = ({
             }
           );
         default:
-          return /* @__PURE__ */ jsx75(TextField_default, { ...commonProps, type });
+          return /* @__PURE__ */ jsx74(TextField_default, { ...commonProps, type });
       }
     },
     [placeholder, disabled, startIcon, endIcon, error, fieldType, type]
@@ -8685,7 +8732,7 @@ var MultiInput = ({
       setCurrentInputValue("");
     }
   }, [currentInputValue, handleAddValue]);
-  return /* @__PURE__ */ jsxs34(
+  return /* @__PURE__ */ jsxs33(
     FormControl_default,
     {
       error,
@@ -8693,27 +8740,27 @@ var MultiInput = ({
       className: cx23(withVendorCSSClassPrefix23(bem18("multi-input")), className),
       style,
       children: [
-        label && /* @__PURE__ */ jsx75(InputLabel_default, { required, error: !!error, children: label }),
-        /* @__PURE__ */ jsxs34("div", { className: cx23(withVendorCSSClassPrefix23(bem18("multi-input", "container")), styles.container), children: [
-          /* @__PURE__ */ jsx75("div", { className: cx23(withVendorCSSClassPrefix23(bem18("multi-input", "input-row")), styles.inputRow), children: /* @__PURE__ */ jsx75("div", { className: cx23(withVendorCSSClassPrefix23(bem18("multi-input", "input-wrapper")), styles.inputWrapper), children: renderInputField(
+        label && /* @__PURE__ */ jsx74(InputLabel_default, { required, error: !!error, children: label }),
+        /* @__PURE__ */ jsxs33("div", { className: cx23(withVendorCSSClassPrefix23(bem18("multi-input", "container")), styles.container), children: [
+          /* @__PURE__ */ jsx74("div", { className: cx23(withVendorCSSClassPrefix23(bem18("multi-input", "input-row")), styles.inputRow), children: /* @__PURE__ */ jsx74("div", { className: cx23(withVendorCSSClassPrefix23(bem18("multi-input", "input-wrapper")), styles.inputWrapper), children: renderInputField(
             currentInputValue,
             setCurrentInputValue,
-            canAddMore ? /* @__PURE__ */ jsx75(PlusIcon, { className: styles.plusIcon }) : void 0,
+            canAddMore ? /* @__PURE__ */ jsx74(PlusIcon, { className: styles.plusIcon }) : void 0,
             canAddMore ? handleInputSubmit : void 0
           ) }) }),
-          values.length > 0 && /* @__PURE__ */ jsx75("div", { className: cx23(withVendorCSSClassPrefix23(bem18("multi-input", "list-container")), styles.listContainer), children: values.map((value, index) => /* @__PURE__ */ jsxs34(
+          values.length > 0 && /* @__PURE__ */ jsx74("div", { className: cx23(withVendorCSSClassPrefix23(bem18("multi-input", "list-container")), styles.listContainer), children: values.map((value, index) => /* @__PURE__ */ jsxs33(
             "div",
             {
               className: cx23(withVendorCSSClassPrefix23(bem18("multi-input", "list-item")), styles.listItem),
               children: [
-                /* @__PURE__ */ jsx75(
+                /* @__PURE__ */ jsx74(
                   "span",
                   {
                     className: cx23(withVendorCSSClassPrefix23(bem18("multi-input", "list-item-text")), styles.listItemText),
                     children: value
                   }
                 ),
-                canRemove && /* @__PURE__ */ jsx75(
+                canRemove && /* @__PURE__ */ jsx74(
                   "button",
                   {
                     type: "button",
@@ -8721,7 +8768,7 @@ var MultiInput = ({
                     disabled,
                     className: cx23(withVendorCSSClassPrefix23(bem18("multi-input", "remove-button")), styles.removeButton),
                     title: "Remove value",
-                    children: /* @__PURE__ */ jsx75(BinIcon, { className: styles.icon })
+                    children: /* @__PURE__ */ jsx74(BinIcon, { className: styles.icon })
                   }
                 )
               ]
@@ -8909,7 +8956,7 @@ var useStyles21 = (theme, colorScheme) => {
 var BaseUserProfile_styles_default = useStyles21;
 
 // src/components/presentation/UserProfile/BaseUserProfile.tsx
-import { Fragment as Fragment14, jsx as jsx76, jsxs as jsxs35 } from "react/jsx-runtime";
+import { Fragment as Fragment14, jsx as jsx75, jsxs as jsxs34 } from "react/jsx-runtime";
 var fieldsToSkip = [
   "roles.default",
   "active",
@@ -8945,13 +8992,31 @@ var BaseUserProfile = ({
   onOpenChange,
   onUpdate,
   open = false,
-  error = null
+  error = null,
+  isLoading = false,
+  showFields = [],
+  hideFields = []
 }) => {
   const { theme, colorScheme } = useTheme_default();
   const [editedUser, setEditedUser] = useState17(flattenedProfile || profile);
   const [editingFields, setEditingFields] = useState17({});
   const { t } = useTranslation_default();
-  const PencilIcon = () => /* @__PURE__ */ jsx76(
+  const shouldShowField = useCallback12(
+    (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__ */ jsx75(
     "svg",
     {
       width: "16",
@@ -8962,7 +9027,7 @@ var BaseUserProfile = ({
       strokeWidth: "2",
       strokeLinecap: "round",
       strokeLinejoin: "round",
-      children: /* @__PURE__ */ jsx76("path", { d: "M17 3a2.828 2.828 0 1 1 4 4L7.5 20.5 2 22l1.5-5.5L17 3z" })
+      children: /* @__PURE__ */ jsx75("path", { d: "M17 3a2.828 2.828 0 1 1 4 4L7.5 20.5 2 22l1.5-5.5L17 3z" })
     }
   );
   const toggleFieldEdit = useCallback12((fieldName) => {
@@ -8987,12 +9052,12 @@ var BaseUserProfile = ({
   }, []);
   const ObjectDisplay = ({ data }) => {
     if (!data || typeof data !== "object") return null;
-    return /* @__PURE__ */ jsx76("table", { className: styles.value, children: /* @__PURE__ */ jsx76("tbody", { children: Object.entries(data).map(([key, value]) => /* @__PURE__ */ jsxs35("tr", { children: [
-      /* @__PURE__ */ jsx76("td", { className: styles.objectKey, children: /* @__PURE__ */ jsxs35("strong", { children: [
+    return /* @__PURE__ */ jsx75("table", { className: styles.value, children: /* @__PURE__ */ jsx75("tbody", { children: Object.entries(data).map(([key, value]) => /* @__PURE__ */ jsxs34("tr", { children: [
+      /* @__PURE__ */ jsx75("td", { className: styles.objectKey, children: /* @__PURE__ */ jsxs34("strong", { children: [
         formatLabel(key),
         ":"
       ] }) }),
-      /* @__PURE__ */ jsx76("td", { className: styles.objectValue, children: typeof value === "object" ? /* @__PURE__ */ jsx76(ObjectDisplay, { data: value }) : String(value) })
+      /* @__PURE__ */ jsx75("td", { className: styles.objectValue, children: typeof value === "object" ? /* @__PURE__ */ jsx75(ObjectDisplay, { data: value }) : String(value) })
     ] }, key)) }) });
   };
   function set(obj, path, value) {
@@ -9062,9 +9127,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__ */ jsx76(Fragment14, { children: subAttributes.map((subAttr, index) => /* @__PURE__ */ jsxs35("div", { className: styles.field, children: [
-        /* @__PURE__ */ jsx76("span", { className: styles.label, children: subAttr.displayName || subAttr.description || "" }),
-        /* @__PURE__ */ jsx76("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__ */ jsx75(Fragment14, { children: subAttributes.map((subAttr, index) => /* @__PURE__ */ jsxs34("div", { className: styles.field, children: [
+        /* @__PURE__ */ jsx75("span", { className: styles.label, children: subAttr.displayName || subAttr.description || "" }),
+        /* @__PURE__ */ jsx75("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) {
@@ -9080,9 +9145,9 @@ var BaseUserProfile = ({
         } else {
           fieldValues = [];
         }
-        return /* @__PURE__ */ jsxs35(Fragment14, { children: [
-          /* @__PURE__ */ jsx76("span", { className: styles.label, children: label }),
-          /* @__PURE__ */ jsx76("div", { className: styles.value, children: /* @__PURE__ */ jsx76(
+        return /* @__PURE__ */ jsxs34(Fragment14, { children: [
+          /* @__PURE__ */ jsx75("span", { className: styles.label, children: label }),
+          /* @__PURE__ */ jsx75("div", { className: styles.value, children: /* @__PURE__ */ jsx75(
             MultiInput_default,
             {
               values: fieldValues,
@@ -9113,9 +9178,9 @@ var BaseUserProfile = ({
       } else {
         displayValue2 = "-";
       }
-      return /* @__PURE__ */ jsxs35(Fragment14, { children: [
-        /* @__PURE__ */ jsx76("span", { className: styles.label, children: label }),
-        /* @__PURE__ */ jsx76("div", { className: cx24(styles.value, !hasValues ? styles.valuePlaceholder : ""), children: !hasValues && isEditable2 && onStartEdit ? /* @__PURE__ */ jsx76(
+      return /* @__PURE__ */ jsxs34(Fragment14, { children: [
+        /* @__PURE__ */ jsx75("span", { className: styles.label, children: label }),
+        /* @__PURE__ */ jsx75("div", { className: cx24(styles.value, !hasValues ? styles.valuePlaceholder : ""), children: !hasValues && isEditable2 && onStartEdit ? /* @__PURE__ */ jsx75(
           Button_default,
           {
             onClick: onStartEdit,
@@ -9130,7 +9195,7 @@ var BaseUserProfile = ({
       ] });
     }
     if (type === "COMPLEX" && typeof value === "object") {
-      return /* @__PURE__ */ jsx76(ObjectDisplay, { data: value });
+      return /* @__PURE__ */ jsx75(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 || "";
@@ -9145,16 +9210,16 @@ var BaseUserProfile = ({
       let field;
       switch (type) {
         case "STRING":
-          field = /* @__PURE__ */ jsx76(TextField_default, { ...commonProps });
+          field = /* @__PURE__ */ jsx75(TextField_default, { ...commonProps });
           break;
         case "DATE_TIME":
-          field = /* @__PURE__ */ jsx76(DatePicker_default, { ...commonProps });
+          field = /* @__PURE__ */ jsx75(DatePicker_default, { ...commonProps });
           break;
         case "BOOLEAN":
-          field = /* @__PURE__ */ jsx76(Checkbox_default, { ...commonProps, checked: !!fieldValue, onChange: (e) => onEditValue(e.target.checked) });
+          field = /* @__PURE__ */ jsx75(Checkbox_default, { ...commonProps, checked: !!fieldValue, onChange: (e) => onEditValue(e.target.checked) });
           break;
         case "COMPLEX":
-          field = /* @__PURE__ */ jsx76(
+          field = /* @__PURE__ */ jsx75(
             "textarea",
             {
               value: fieldValue,
@@ -9166,11 +9231,11 @@ var BaseUserProfile = ({
           );
           break;
         default:
-          field = /* @__PURE__ */ jsx76(TextField_default, { ...commonProps });
+          field = /* @__PURE__ */ jsx75(TextField_default, { ...commonProps });
       }
-      return /* @__PURE__ */ jsxs35(Fragment14, { children: [
-        /* @__PURE__ */ jsx76("span", { className: styles.label, children: label }),
-        /* @__PURE__ */ jsx76("div", { className: styles.value, children: field })
+      return /* @__PURE__ */ jsxs34(Fragment14, { children: [
+        /* @__PURE__ */ jsx75("span", { className: styles.label, children: label }),
+        /* @__PURE__ */ jsx75("div", { className: styles.value, children: field })
       ] });
     }
     const hasValue = value !== void 0 && value !== null && value !== "";
@@ -9183,9 +9248,9 @@ var BaseUserProfile = ({
     } else {
       displayValue = "-";
     }
-    return /* @__PURE__ */ jsxs35(Fragment14, { children: [
-      /* @__PURE__ */ jsx76("span", { className: styles.label, children: label }),
-      /* @__PURE__ */ jsx76("div", { className: cx24(styles.value, !hasValue ? styles.valuePlaceholder : ""), children: !hasValue && isEditable && onStartEdit ? /* @__PURE__ */ jsx76(
+    return /* @__PURE__ */ jsxs34(Fragment14, { children: [
+      /* @__PURE__ */ jsx75("span", { className: styles.label, children: label }),
+      /* @__PURE__ */ jsx75("div", { className: cx24(styles.value, !hasValue ? styles.valuePlaceholder : ""), children: !hasValue && isEditable && onStartEdit ? /* @__PURE__ */ jsx75(
         Button_default,
         {
           onClick: onStartEdit,
@@ -9213,8 +9278,8 @@ var BaseUserProfile = ({
       alignItems: "center",
       gap: theme.vars.spacing.unit
     };
-    return /* @__PURE__ */ jsxs35("div", { className: styles.field, children: [
-      /* @__PURE__ */ jsx76("div", { className: styles.fieldInner, children: renderSchemaField(
+    return /* @__PURE__ */ jsxs34("div", { className: styles.field, children: [
+      /* @__PURE__ */ jsx75("div", { className: styles.fieldInner, children: renderSchemaField(
         schema,
         isFieldEditing,
         (value) => {
@@ -9224,21 +9289,21 @@ var BaseUserProfile = ({
         },
         () => toggleFieldEdit(schema.name)
       ) }),
-      editable && schema.mutability !== "READ_ONLY" && !isReadonlyField && /* @__PURE__ */ jsxs35("div", { className: styles.fieldActions, children: [
-        isFieldEditing && /* @__PURE__ */ jsxs35(Fragment14, { children: [
-          /* @__PURE__ */ jsx76(Button_default, { size: "small", color: "primary", variant: "solid", onClick: () => handleFieldSave(schema), children: "Save" }),
-          /* @__PURE__ */ jsx76(Button_default, { size: "small", color: "secondary", variant: "solid", onClick: () => handleFieldCancel(schema.name), children: "Cancel" })
+      editable && schema.mutability !== "READ_ONLY" && !isReadonlyField && /* @__PURE__ */ jsxs34("div", { className: styles.fieldActions, children: [
+        isFieldEditing && /* @__PURE__ */ jsxs34(Fragment14, { children: [
+          /* @__PURE__ */ jsx75(Button_default, { size: "small", color: "primary", variant: "solid", onClick: () => handleFieldSave(schema), children: "Save" }),
+          /* @__PURE__ */ jsx75(Button_default, { size: "small", color: "secondary", variant: "solid", onClick: () => handleFieldCancel(schema.name), children: "Cancel" })
         ] }),
-        !isFieldEditing && hasValue && /* @__PURE__ */ jsx76(
+        !isFieldEditing && hasValue && /* @__PURE__ */ jsx75(
           Button_default,
           {
             size: "small",
             color: "tertiary",
-            variant: "text",
+            variant: "icon",
             onClick: () => toggleFieldEdit(schema.name),
             title: "Edit",
             className: styles.editButton,
-            children: /* @__PURE__ */ jsx76(PencilIcon, {})
+            children: /* @__PURE__ */ jsx75(PencilIcon, {})
           }
         )
       ] })
@@ -9267,30 +9332,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__ */ jsx76(Fragment14, { children: profileEntries.map(([key, value]) => /* @__PURE__ */ jsxs35("div", { className: styles.field, children: [
-      /* @__PURE__ */ jsx76("span", { className: styles.label, children: formatLabel(key) }),
-      /* @__PURE__ */ jsx76("div", { className: styles.value, children: typeof value === "object" ? JSON.stringify(value, null, 2) : String(value) })
+    return /* @__PURE__ */ jsx75(Fragment14, { children: profileEntries.map(([key, value]) => /* @__PURE__ */ jsxs34("div", { className: styles.field, children: [
+      /* @__PURE__ */ jsx75("span", { className: styles.label, children: formatLabel(key) }),
+      /* @__PURE__ */ jsx75("div", { className: styles.value, children: typeof value === "object" ? JSON.stringify(value, null, 2) : String(value) })
     ] }, key)) });
   };
-  const profileContent = /* @__PURE__ */ jsxs35(Card_default, { className: containerClasses, children: [
-    error && /* @__PURE__ */ jsxs35(Alert_default, { variant: "error", className: cx24(withVendorCSSClassPrefix25(bem19("user-profile", "alert")), styles.alert), children: [
-      /* @__PURE__ */ jsx76(Alert_default.Title, { children: t("errors.title") || "Error" }),
-      /* @__PURE__ */ jsx76(Alert_default.Description, { children: error })
+  const profileContent = /* @__PURE__ */ jsxs34(Card_default, { className: containerClasses, children: [
+    error && /* @__PURE__ */ jsxs34(Alert_default, { variant: "error", className: cx24(withVendorCSSClassPrefix25(bem19("user-profile", "alert")), styles.alert), children: [
+      /* @__PURE__ */ jsx75(Alert_default.Title, { children: t("errors.title") || "Error" }),
+      /* @__PURE__ */ jsx75(Alert_default.Description, { children: error })
     ] }),
-    /* @__PURE__ */ jsx76("div", { className: styles.header, children: /* @__PURE__ */ jsx76(
+    /* @__PURE__ */ jsx75("div", { className: styles.header, children: /* @__PURE__ */ jsx75(
       Avatar,
       {
         imageUrl: getMappedUserProfileValue_default("picture", mergedMappings, currentUser),
         name: getDisplayName(),
         size: 80,
-        alt: `${getDisplayName()}'s avatar`
+        alt: `${getDisplayName()}'s avatar`,
+        isLoading
       }
     ) }),
-    /* @__PURE__ */ jsx76("div", { className: styles.infoContainer, children: schemas && schemas.length > 0 ? schemas.filter((schema) => {
-      if (fieldsToSkip.includes(schema.name)) return false;
+    /* @__PURE__ */ jsx75("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;
@@ -9306,13 +9372,13 @@ var BaseUserProfile = ({
         ...schema,
         value
       };
-      return /* @__PURE__ */ jsx76("div", { className: styles.info, children: renderUserInfo(schemaWithValue) }, schema.name || index);
+      return /* @__PURE__ */ jsx75("div", { className: styles.info, children: renderUserInfo(schemaWithValue) }, schema.name || index);
     }) : renderProfileWithoutSchemas() })
   ] });
   if (mode === "popup") {
-    return /* @__PURE__ */ jsx76(Dialog_default, { open, onOpenChange, children: /* @__PURE__ */ jsxs35(Dialog_default.Content, { children: [
-      /* @__PURE__ */ jsx76(Dialog_default.Heading, { children: title ?? t("user.profile.title") }),
-      /* @__PURE__ */ jsx76("div", { className: styles.popup, children: profileContent })
+    return /* @__PURE__ */ jsx75(Dialog_default, { open, onOpenChange, children: /* @__PURE__ */ jsxs34(Dialog_default.Content, { children: [
+      /* @__PURE__ */ jsx75(Dialog_default.Heading, { children: title ?? t("user.profile.title") }),
+      /* @__PURE__ */ jsx75("div", { className: styles.popup, children: profileContent })
     ] }) });
   }
   return profileContent;
@@ -9353,9 +9419,9 @@ var updateMeProfile_default = updateMeProfile;
 
 // src/components/presentation/UserProfile/UserProfile.tsx
 import { AsgardeoError } from "@asgardeo/browser";
-import { jsx as jsx77 } from "react/jsx-runtime";
+import { jsx as jsx76 } from "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] = useState18(null);
@@ -9372,7 +9438,7 @@ var UserProfile3 = ({ ...rest }) => {
       setError(message);
     }
   };
-  return /* @__PURE__ */ jsx77(
+  return /* @__PURE__ */ jsx76(
     BaseUserProfile_default,
     {
       profile,
@@ -9589,7 +9655,7 @@ var useStyles22 = (theme, colorScheme) => {
 var BaseUserDropdown_styles_default = useStyles22;
 
 // src/components/presentation/UserDropdown/BaseUserDropdown.tsx
-import { jsx as jsx78, jsxs as jsxs36 } from "react/jsx-runtime";
+import { jsx as jsx77, jsxs as jsxs35 } from "react/jsx-runtime";
 var BaseUserDropdown = ({
   fallback = null,
   className = "",
@@ -9648,14 +9714,14 @@ var BaseUserDropdown = ({
     defaultMenuItems.push({
       label: "Manage Profile",
       onClick: onManageProfile,
-      icon: /* @__PURE__ */ jsx78(User_default2, { width: "16", height: "16" })
+      icon: /* @__PURE__ */ jsx77(User_default2, { width: "16", height: "16" })
     });
   }
   if (onSignOut) {
     defaultMenuItems.push({
       label: "Sign Out",
       onClick: onSignOut,
-      icon: /* @__PURE__ */ jsx78(LogOut_default, { width: "16", height: "16" })
+      icon: /* @__PURE__ */ jsx77(LogOut_default, { width: "16", height: "16" })
     });
   }
   const allMenuItems = [...menuItems];
@@ -9665,8 +9731,8 @@ var BaseUserDropdown = ({
     }
     allMenuItems.push(...defaultMenuItems);
   }
-  return /* @__PURE__ */ jsxs36("div", { className: cx25(withVendorCSSClassPrefix26("user-dropdown"), className), children: [
-    /* @__PURE__ */ jsxs36(
+  return /* @__PURE__ */ jsxs35("div", { className: cx25(withVendorCSSClassPrefix26("user-dropdown"), className), children: [
+    /* @__PURE__ */ jsxs35(
       Button_default,
       {
         ref: refs.setReference,
@@ -9676,7 +9742,7 @@ var BaseUserDropdown = ({
         size: "medium",
         ...getReferenceProps(),
         children: [
-          /* @__PURE__ */ jsx78(
+          /* @__PURE__ */ jsx77(
             Avatar,
             {
               imageUrl: getMappedUserProfileValue_default("picture", mergedMappings, user),
@@ -9685,7 +9751,7 @@ var BaseUserDropdown = ({
               alt: `${getDisplayName()}'s avatar`
             }
           ),
-          showTriggerLabel && /* @__PURE__ */ jsx78(
+          showTriggerLabel && /* @__PURE__ */ jsx77(
             Typography_default,
             {
               variant: "body2",
@@ -9696,7 +9762,7 @@ var BaseUserDropdown = ({
         ]
       }
     ),
-    isOpen && /* @__PURE__ */ jsx78(FloatingPortal2, { id: portalId, children: /* @__PURE__ */ jsx78(FloatingFocusManager2, { context, modal: false, children: /* @__PURE__ */ jsxs36(
+    isOpen && /* @__PURE__ */ jsx77(FloatingPortal2, { id: portalId, children: /* @__PURE__ */ jsx77(FloatingFocusManager2, { context, modal: false, initialFocus: -1, children: /* @__PURE__ */ jsxs35(
       "div",
       {
         ref: refs.setFloating,
@@ -9704,8 +9770,8 @@ var BaseUserDropdown = ({
         style: floatingStyles,
         ...getFloatingProps(),
         children: [
-          /* @__PURE__ */ jsxs36("div", { className: cx25(withVendorCSSClassPrefix26("user-dropdown__header"), styles.dropdownHeader), children: [
-            /* @__PURE__ */ jsx78(
+          /* @__PURE__ */ jsxs35("div", { className: cx25(withVendorCSSClassPrefix26("user-dropdown__header"), styles.dropdownHeader), children: [
+            /* @__PURE__ */ jsx77(
               Avatar,
               {
                 imageUrl: getMappedUserProfileValue_default("picture", mergedMappings, user),
@@ -9714,8 +9780,8 @@ var BaseUserDropdown = ({
                 alt: `${getDisplayName()}'s avatar`
               }
             ),
-            /* @__PURE__ */ jsxs36("div", { className: cx25(withVendorCSSClassPrefix26("user-dropdown__header-info"), styles.headerInfo), children: [
-              /* @__PURE__ */ jsx78(
+            /* @__PURE__ */ jsxs35("div", { className: cx25(withVendorCSSClassPrefix26("user-dropdown__header-info"), styles.headerInfo), children: [
+              /* @__PURE__ */ jsx77(
                 Typography_default,
                 {
                   noWrap: true,
@@ -9725,7 +9791,7 @@ var BaseUserDropdown = ({
                   children: getDisplayName()
                 }
               ),
-              /* @__PURE__ */ jsx78(
+              /* @__PURE__ */ jsx77(
                 Typography_default,
                 {
                   noWrap: true,
@@ -9737,7 +9803,7 @@ var BaseUserDropdown = ({
               )
             ] })
           ] }),
-          /* @__PURE__ */ jsx78("div", { className: cx25(withVendorCSSClassPrefix26("user-dropdown__menu"), styles.dropdownMenu), children: allMenuItems.map((item, index) => /* @__PURE__ */ jsx78("div", { children: item.label === "" ? /* @__PURE__ */ jsx78("div", { className: cx25(withVendorCSSClassPrefix26("user-dropdown__menu-divider"), styles.divider) }) : item.href ? /* @__PURE__ */ jsxs36(
+          /* @__PURE__ */ jsx77("div", { className: cx25(withVendorCSSClassPrefix26("user-dropdown__menu"), styles.dropdownMenu), children: allMenuItems.map((item, index) => /* @__PURE__ */ jsx77("div", { children: item.label === "" ? /* @__PURE__ */ jsx77("div", { className: cx25(withVendorCSSClassPrefix26("user-dropdown__menu-divider"), styles.divider) }) : item.href ? /* @__PURE__ */ jsxs35(
             "a",
             {
               href: item.href,
@@ -9751,10 +9817,10 @@ var BaseUserDropdown = ({
               onBlur: () => setHoveredItemIndex(null),
               children: [
                 item.icon,
-                /* @__PURE__ */ jsx78("span", { children: item.label })
+                /* @__PURE__ */ jsx77("span", { children: item.label })
               ]
             }
-          ) : /* @__PURE__ */ jsx78(
+          ) : /* @__PURE__ */ jsx77(
             Button_default,
             {
               onClick: () => handleMenuItemClick(item),
@@ -9780,7 +9846,7 @@ var BaseUserDropdown_default = BaseUserDropdown;
 
 // src/components/presentation/UserDropdown/UserDropdown.tsx
 import { useState as useState20 } from "react";
-import { Fragment as Fragment15, jsx as jsx79, jsxs as jsxs37 } from "react/jsx-runtime";
+import { Fragment as Fragment15, jsx as jsx78, jsxs as jsxs36 } from "react/jsx-runtime";
 var UserDropdown = ({
   children,
   renderTrigger,
@@ -9809,14 +9875,14 @@ var UserDropdown = ({
     closeProfile
   };
   if (children) {
-    return /* @__PURE__ */ jsxs37(Fragment15, { children: [
+    return /* @__PURE__ */ jsxs36(Fragment15, { children: [
       children(renderProps),
-      /* @__PURE__ */ jsx79(UserProfile_default, { mode: "popup", open: isProfileOpen, onOpenChange: setIsProfileOpen })
+      /* @__PURE__ */ jsx78(UserProfile_default, { mode: "popup", open: isProfileOpen, onOpenChange: setIsProfileOpen })
     ] });
   }
   if (renderTrigger || renderDropdown) {
-    return /* @__PURE__ */ jsxs37(Fragment15, { children: [
-      renderTrigger ? renderTrigger(renderProps) : /* @__PURE__ */ jsx79(
+    return /* @__PURE__ */ jsxs36(Fragment15, { children: [
+      renderTrigger ? renderTrigger(renderProps) : /* @__PURE__ */ jsx78(
         BaseUserDropdown_default,
         {
           user,
@@ -9826,11 +9892,11 @@ var UserDropdown = ({
           ...rest
         }
       ),
-      /* @__PURE__ */ jsx79(UserProfile_default, { mode: "popup", open: isProfileOpen, onOpenChange: setIsProfileOpen })
+      /* @__PURE__ */ jsx78(UserProfile_default, { mode: "popup", open: isProfileOpen, onOpenChange: setIsProfileOpen })
     ] });
   }
-  return /* @__PURE__ */ jsxs37(Fragment15, { children: [
-    /* @__PURE__ */ jsx79(
+  return /* @__PURE__ */ jsxs36(Fragment15, { children: [
+    /* @__PURE__ */ jsx78(
       BaseUserDropdown_default,
       {
         user,
@@ -9840,7 +9906,7 @@ var UserDropdown = ({
         ...rest
       }
     ),
-    isProfileOpen && /* @__PURE__ */ jsx79(UserProfile_default, { mode: "popup", open: isProfileOpen, onOpenChange: setIsProfileOpen })
+    isProfileOpen && /* @__PURE__ */ jsx78(UserProfile_default, { mode: "popup", open: isProfileOpen, onOpenChange: setIsProfileOpen })
   ] });
 };
 var UserDropdown_default = UserDropdown;
@@ -9863,9 +9929,9 @@ import { cx as cx26 } from "@emotion/css";
 import { useState as useState21 } from "react";
 
 // src/components/primitives/Icons/Building.tsx
-import { jsx as jsx80, jsxs as jsxs38 } from "react/jsx-runtime";
-var Building = ({ color = "currentColor", height = 24, width = 24 }) => /* @__PURE__ */ jsxs38("svg", { width, height, viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [
-  /* @__PURE__ */ jsx80(
+import { jsx as jsx79, jsxs as jsxs37 } from "react/jsx-runtime";
+var Building = ({ color = "currentColor", height = 24, width = 24 }) => /* @__PURE__ */ jsxs37("svg", { width, height, viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [
+  /* @__PURE__ */ jsx79(
     "path",
     {
       d: "M6 22V4a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2v18Z",
@@ -9875,25 +9941,25 @@ var Building = ({ color = "currentColor", height = 24, width = 24 }) => /* @__PU
       strokeLinejoin: "round"
     }
   ),
-  /* @__PURE__ */ jsx80("path", { d: "M6 12h4", stroke: color, strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }),
-  /* @__PURE__ */ jsx80("path", { d: "M6 8h4", stroke: color, strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }),
-  /* @__PURE__ */ jsx80("path", { d: "M14 8h4", stroke: color, strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }),
-  /* @__PURE__ */ jsx80("path", { d: "M14 12h4", stroke: color, strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }),
-  /* @__PURE__ */ jsx80("path", { d: "M6 18h4", stroke: color, strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }),
-  /* @__PURE__ */ jsx80("path", { d: "M14 18h4", stroke: color, strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" })
+  /* @__PURE__ */ jsx79("path", { d: "M6 12h4", stroke: color, strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }),
+  /* @__PURE__ */ jsx79("path", { d: "M6 8h4", stroke: color, strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }),
+  /* @__PURE__ */ jsx79("path", { d: "M14 8h4", stroke: color, strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }),
+  /* @__PURE__ */ jsx79("path", { d: "M14 12h4", stroke: color, strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }),
+  /* @__PURE__ */ jsx79("path", { d: "M6 18h4", stroke: color, strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }),
+  /* @__PURE__ */ jsx79("path", { d: "M14 18h4", stroke: color, strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" })
 ] });
 Building.displayName = "Building";
 var Building_default = Building;
 
 // src/components/primitives/Icons/Check.tsx
-import { jsx as jsx81 } from "react/jsx-runtime";
-var Check = ({ color = "currentColor", height = 24, width = 24 }) => /* @__PURE__ */ jsx81("svg", { width, height, viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsx81("path", { d: "M20 6 9 17l-5-5", stroke: color, strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) });
+import { jsx as jsx80 } from "react/jsx-runtime";
+var Check = ({ color = "currentColor", height = 24, width = 24 }) => /* @__PURE__ */ jsx80("svg", { width, height, viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsx80("path", { d: "M20 6 9 17l-5-5", stroke: color, strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) });
 Check.displayName = "Check";
 var Check_default = Check;
 
 // src/components/primitives/Icons/ChevronDown.tsx
-import { jsx as jsx82 } from "react/jsx-runtime";
-var ChevronDown = ({ color = "currentColor", height = 24, width = 24 }) => /* @__PURE__ */ jsx82("svg", { width, height, viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsx82("path", { d: "m6 9 6 6 6-6", stroke: color, strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) });
+import { jsx as jsx81 } from "react/jsx-runtime";
+var ChevronDown = ({ color = "currentColor", height = 24, width = 24 }) => /* @__PURE__ */ jsx81("svg", { width, height, viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsx81("path", { d: "m6 9 6 6 6-6", stroke: color, strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) });
 ChevronDown.displayName = "ChevronDown";
 var ChevronDown_default = ChevronDown;
 
@@ -10123,7 +10189,7 @@ var useStyles23 = (theme, colorScheme) => {
 var BaseOrganizationSwitcher_styles_default = useStyles23;
 
 // src/components/presentation/OrganizationSwitcher/BaseOrganizationSwitcher.tsx
-import { Fragment as Fragment16, jsx as jsx83, jsxs as jsxs39 } from "react/jsx-runtime";
+import { Fragment as Fragment16, jsx as jsx82, jsxs as jsxs38 } from "react/jsx-runtime";
 var BaseOrganizationSwitcher = ({
   organizations,
   currentOrganization,
@@ -10176,8 +10242,8 @@ var BaseOrganizationSwitcher = ({
   const switchableOrganizations = organizations.filter(
     (org) => org.id !== currentOrganization?.id
   );
-  const defaultRenderOrganization2 = (organization, isSelected) => /* @__PURE__ */ jsxs39(Fragment16, { children: [
-    /* @__PURE__ */ jsx83(
+  const defaultRenderOrganization2 = (organization, isSelected) => /* @__PURE__ */ jsxs38(Fragment16, { children: [
+    /* @__PURE__ */ jsx82(
       Avatar,
       {
         variant: "square",
@@ -10187,24 +10253,24 @@ var BaseOrganizationSwitcher = ({
         alt: `${organization.name} avatar`
       }
     ),
-    /* @__PURE__ */ jsxs39("div", { className: cx26(styles.organizationInfo), children: [
-      /* @__PURE__ */ jsx83(Typography_default, { variant: "body2", fontWeight: "medium", className: cx26(styles.organizationName), children: organization.name }),
-      /* @__PURE__ */ jsxs39("div", { className: cx26(styles.organizationMeta), children: [
-        showMemberCount && organization.memberCount !== void 0 && /* @__PURE__ */ jsxs39("span", { children: [
+    /* @__PURE__ */ jsxs38("div", { className: cx26(styles.organizationInfo), children: [
+      /* @__PURE__ */ jsx82(Typography_default, { variant: "body2", fontWeight: "medium", className: cx26(styles.organizationName), children: organization.name }),
+      /* @__PURE__ */ jsxs38("div", { className: cx26(styles.organizationMeta), children: [
+        showMemberCount && organization.memberCount !== void 0 && /* @__PURE__ */ jsxs38("span", { children: [
           organization.memberCount,
           " ",
           organization.memberCount === 1 ? t("organization.switcher.member") : t("organization.switcher.members")
         ] }),
-        showRole && organization.role && showMemberCount && organization.memberCount !== void 0 && /* @__PURE__ */ jsx83("span", { children: " \u2022 " }),
-        showRole && organization.role && /* @__PURE__ */ jsx83("span", { className: cx26(styles.roleCapitalized), children: organization.role })
+        showRole && organization.role && showMemberCount && organization.memberCount !== void 0 && /* @__PURE__ */ jsx82("span", { children: " \u2022 " }),
+        showRole && organization.role && /* @__PURE__ */ jsx82("span", { className: cx26(styles.roleCapitalized), children: organization.role })
       ] })
     ] }),
-    isSelected && /* @__PURE__ */ jsx83(Check_default, { width: "16", height: "16", color: theme.vars.colors.text.primary })
+    isSelected && /* @__PURE__ */ jsx82(Check_default, { width: "16", height: "16", color: theme.vars.colors.text.primary })
   ] });
-  const defaultRenderLoading2 = () => /* @__PURE__ */ jsx83("div", { className: cx26(styles.loadingContainer), children: /* @__PURE__ */ jsx83(Typography_default, { variant: "caption", className: cx26(styles.loadingText), children: t("organization.switcher.loading.organizations") }) });
-  const defaultRenderError2 = (errorMessage) => /* @__PURE__ */ jsx83("div", { className: cx26(styles.errorContainer), children: /* @__PURE__ */ jsx83(Typography_default, { variant: "caption", className: cx26(styles.errorText), children: errorMessage }) });
-  return /* @__PURE__ */ jsxs39("div", { className: cx26(styles.root, className), style, children: [
-    /* @__PURE__ */ jsxs39(
+  const defaultRenderLoading2 = () => /* @__PURE__ */ jsx82("div", { className: cx26(styles.loadingContainer), children: /* @__PURE__ */ jsx82(Typography_default, { variant: "caption", className: cx26(styles.loadingText), children: t("organization.switcher.loading.organizations") }) });
+  const defaultRenderError2 = (errorMessage) => /* @__PURE__ */ jsx82("div", { className: cx26(styles.errorContainer), children: /* @__PURE__ */ jsx82(Typography_default, { variant: "caption", className: cx26(styles.errorText), children: errorMessage }) });
+  return /* @__PURE__ */ jsxs38("div", { className: cx26(styles.root, className), style, children: [
+    /* @__PURE__ */ jsxs38(
       Button_default,
       {
         ref: refs.setReference,
@@ -10214,8 +10280,8 @@ var BaseOrganizationSwitcher = ({
         size: "medium",
         ...getReferenceProps(),
         children: [
-          currentOrganization ? /* @__PURE__ */ jsxs39(Fragment16, { children: [
-            /* @__PURE__ */ jsx83(
+          currentOrganization ? /* @__PURE__ */ jsxs38(Fragment16, { children: [
+            /* @__PURE__ */ jsx82(
               Avatar,
               {
                 variant: "square",
@@ -10225,18 +10291,18 @@ var BaseOrganizationSwitcher = ({
                 alt: `${currentOrganization.name} avatar`
               }
             ),
-            showTriggerLabel && /* @__PURE__ */ jsx83(Typography_default, { variant: "body2", className: cx26(styles.triggerLabel), children: currentOrganization.name })
-          ] }) : /* @__PURE__ */ jsxs39(Fragment16, { children: [
-            /* @__PURE__ */ jsx83(Building_default, { width: avatarSize, height: avatarSize }),
-            showTriggerLabel && /* @__PURE__ */ jsx83(Typography_default, { variant: "body2", className: cx26(styles.triggerLabel), children: t("organization.switcher.select.organization") })
+            showTriggerLabel && /* @__PURE__ */ jsx82(Typography_default, { variant: "body2", className: cx26(styles.triggerLabel), children: currentOrganization.name })
+          ] }) : /* @__PURE__ */ jsxs38(Fragment16, { children: [
+            /* @__PURE__ */ jsx82(Building_default, { width: avatarSize, height: avatarSize }),
+            showTriggerLabel && /* @__PURE__ */ jsx82(Typography_default, { variant: "body2", className: cx26(styles.triggerLabel), children: t("organization.switcher.select.organization") })
           ] }),
-          /* @__PURE__ */ jsx83(ChevronDown_default, { width: "16", height: "16" })
+          /* @__PURE__ */ jsx82(ChevronDown_default, { width: "16", height: "16" })
         ]
       }
     ),
-    isOpen && /* @__PURE__ */ jsx83(FloatingPortal3, { id: portalId, children: /* @__PURE__ */ jsx83(FloatingFocusManager3, { context, modal: false, children: /* @__PURE__ */ jsxs39("div", { ref: refs.setFloating, className: cx26(styles.content), style: floatingStyles, ...getFloatingProps(), children: [
-      currentOrganization && /* @__PURE__ */ jsxs39("div", { className: cx26(styles.header), children: [
-        /* @__PURE__ */ jsx83(
+    isOpen && /* @__PURE__ */ jsx82(FloatingPortal3, { id: portalId, children: /* @__PURE__ */ jsx82(FloatingFocusManager3, { context, modal: false, initialFocus: -1, children: /* @__PURE__ */ jsxs38("div", { ref: refs.setFloating, className: cx26(styles.content), style: floatingStyles, ...getFloatingProps(), children: [
+      currentOrganization && /* @__PURE__ */ jsxs38("div", { className: cx26(styles.header), children: [
+        /* @__PURE__ */ jsx82(
           Avatar,
           {
             variant: "square",
@@ -10246,10 +10312,10 @@ var BaseOrganizationSwitcher = ({
             alt: `${currentOrganization.name} avatar`
           }
         ),
-        /* @__PURE__ */ jsxs39("div", { className: cx26(styles.headerInfo), children: [
-          /* @__PURE__ */ jsx83(Typography_default, { noWrap: true, className: cx26(styles.headerName), variant: "body1", fontWeight: "medium", children: currentOrganization.name }),
-          /* @__PURE__ */ jsxs39("div", { className: cx26(styles.headerMeta), children: [
-            showMemberCount && currentOrganization.memberCount !== void 0 && /* @__PURE__ */ jsxs39(
+        /* @__PURE__ */ jsxs38("div", { className: cx26(styles.headerInfo), children: [
+          /* @__PURE__ */ jsx82(Typography_default, { noWrap: true, className: cx26(styles.headerName), variant: "body1", fontWeight: "medium", children: currentOrganization.name }),
+          /* @__PURE__ */ jsxs38("div", { className: cx26(styles.headerMeta), children: [
+            showMemberCount && currentOrganization.memberCount !== void 0 && /* @__PURE__ */ jsxs38(
               Typography_default,
               {
                 noWrap: true,
@@ -10259,17 +10325,17 @@ var BaseOrganizationSwitcher = ({
                   currentOrganization.memberCount,
                   " ",
                   currentOrganization.memberCount === 1 ? t("organization.switcher.member") : t("organization.switcher.members"),
-                  showRole && currentOrganization.role && /* @__PURE__ */ jsxs39("span", { children: [
+                  showRole && currentOrganization.role && /* @__PURE__ */ jsxs38("span", { children: [
                     " \u2022 ",
                     currentOrganization.role
                   ] })
                 ]
               }
             ),
-            showRole && currentOrganization.role && (!showMemberCount || currentOrganization.memberCount === void 0) && /* @__PURE__ */ jsx83(Typography_default, { noWrap: true, className: cx26(styles.headerRole), variant: "caption", color: "secondary", children: currentOrganization.role })
+            showRole && currentOrganization.role && (!showMemberCount || currentOrganization.memberCount === void 0) && /* @__PURE__ */ jsx82(Typography_default, { noWrap: true, className: cx26(styles.headerRole), variant: "caption", color: "secondary", children: currentOrganization.role })
           ] })
         ] }),
-        onManageProfile && /* @__PURE__ */ jsx83(
+        onManageProfile && /* @__PURE__ */ jsx82(
           Button_default,
           {
             onClick: onManageProfile,
@@ -10278,7 +10344,7 @@ var BaseOrganizationSwitcher = ({
             size: "small",
             "aria-label": "Manage Organization Profile",
             className: cx26(styles.manageButton),
-            endIcon: /* @__PURE__ */ jsxs39(
+            endIcon: /* @__PURE__ */ jsxs38(
               "svg",
               {
                 width: "16",
@@ -10290,8 +10356,8 @@ var BaseOrganizationSwitcher = ({
                 strokeLinecap: "round",
                 strokeLinejoin: "round",
                 children: [
-                  /* @__PURE__ */ jsx83("circle", { cx: "12", cy: "12", r: "3" }),
-                  /* @__PURE__ */ jsx83("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__ */ jsx82("circle", { cx: "12", cy: "12", r: "3" }),
+                  /* @__PURE__ */ jsx82("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" })
                 ]
               }
             ),
@@ -10299,20 +10365,20 @@ var BaseOrganizationSwitcher = ({
           }
         )
       ] }),
-      organizations.length > 1 && /* @__PURE__ */ jsx83(
+      organizations.length > 1 && /* @__PURE__ */ jsx82(
         "div",
         {
           className: cx26(styles.header, styles.sectionHeaderContainer),
           style: {
             borderTop: currentOrganization ? `1px solid ${theme.vars.colors.border}` : "none"
           },
-          children: /* @__PURE__ */ jsx83(Typography_default, { variant: "caption", fontWeight: 600, className: cx26(styles.sectionHeader), children: t("organization.switcher.switch.organization") })
+          children: /* @__PURE__ */ jsx82(Typography_default, { variant: "caption", fontWeight: 600, className: cx26(styles.sectionHeader), children: t("organization.switcher.switch.organization") })
         }
       ),
-      /* @__PURE__ */ jsx83("div", { className: cx26(styles.menu), children: loading ? renderLoading ? renderLoading() : defaultRenderLoading2() : error ? renderError ? renderError(error) : defaultRenderError2(error) : /* @__PURE__ */ jsxs39(Fragment16, { children: [
+      /* @__PURE__ */ jsx82("div", { className: cx26(styles.menu), children: loading ? renderLoading ? renderLoading() : defaultRenderLoading2() : error ? renderError ? renderError(error) : defaultRenderError2(error) : /* @__PURE__ */ jsxs38(Fragment16, { children: [
         switchableOrganizations.map((organization) => {
           const isSelected = false;
-          return /* @__PURE__ */ jsx83(
+          return /* @__PURE__ */ jsx82(
             Button_default,
             {
               onClick: () => handleOrganizationSwitch(organization),
@@ -10330,10 +10396,10 @@ var BaseOrganizationSwitcher = ({
             organization.id
           );
         }),
-        menuItems.length > 0 && /* @__PURE__ */ jsxs39(Fragment16, { children: [
-          /* @__PURE__ */ jsx83("div", { className: cx26(styles.menuDivider) }),
+        menuItems.length > 0 && /* @__PURE__ */ jsxs38(Fragment16, { children: [
+          /* @__PURE__ */ jsx82("div", { className: cx26(styles.menuDivider) }),
           menuItems.map(
-            (item, index) => /* @__PURE__ */ jsx83("div", { children: item.href ? /* @__PURE__ */ jsxs39(
+            (item, index) => /* @__PURE__ */ jsx82("div", { children: item.href ? /* @__PURE__ */ jsxs38(
               "a",
               {
                 href: item.href,
@@ -10347,10 +10413,10 @@ var BaseOrganizationSwitcher = ({
                 onBlur: () => setHoveredItemIndex(null),
                 children: [
                   item.icon,
-                  /* @__PURE__ */ jsx83("span", { children: item.label })
+                  /* @__PURE__ */ jsx82("span", { children: item.label })
                 ]
               }
-            ) : /* @__PURE__ */ jsx83(
+            ) : /* @__PURE__ */ jsx82(
               Button_default,
               {
                 onClick: () => handleMenuItemClick(item),
@@ -10524,7 +10590,7 @@ var useStyles24 = (theme, colorScheme) => {
 var BaseCreateOrganization_styles_default = useStyles24;
 
 // src/components/presentation/CreateOrganization/BaseCreateOrganization.tsx
-import { jsx as jsx84, jsxs as jsxs40 } from "react/jsx-runtime";
+import { jsx as jsx83, jsxs as jsxs39 } from "react/jsx-runtime";
 var BaseCreateOrganization = ({
   cardLayout = true,
   className = "",
@@ -10611,13 +10677,13 @@ var BaseCreateOrganization = ({
       console.error("Form submission error:", submitError);
     }
   };
-  const createOrganizationContent = /* @__PURE__ */ jsx84("div", { className: cx27(styles.root, cardLayout && styles.card, className), style, children: /* @__PURE__ */ jsxs40("div", { className: cx27(styles.content), children: [
-    /* @__PURE__ */ jsxs40("form", { id: "create-organization-form", className: cx27(styles.form), onSubmit: handleSubmit, children: [
-      error && /* @__PURE__ */ jsxs40(Alert_default, { variant: "error", className: styles.errorAlert, children: [
-        /* @__PURE__ */ jsx84(Alert_default.Title, { children: "Error" }),
-        /* @__PURE__ */ jsx84(Alert_default.Description, { children: error })
+  const createOrganizationContent = /* @__PURE__ */ jsx83("div", { className: cx27(styles.root, cardLayout && styles.card, className), style, children: /* @__PURE__ */ jsxs39("div", { className: cx27(styles.content), children: [
+    /* @__PURE__ */ jsxs39("form", { id: "create-organization-form", className: cx27(styles.form), onSubmit: handleSubmit, children: [
+      error && /* @__PURE__ */ jsxs39(Alert_default, { variant: "error", className: styles.errorAlert, children: [
+        /* @__PURE__ */ jsx83(Alert_default.Title, { children: "Error" }),
+        /* @__PURE__ */ jsx83(Alert_default.Description, { children: error })
       ] }),
-      /* @__PURE__ */ jsx84("div", { className: cx27(styles.fieldGroup), children: /* @__PURE__ */ jsx84(
+      /* @__PURE__ */ jsx83("div", { className: cx27(styles.fieldGroup), children: /* @__PURE__ */ jsx83(
         TextField_default,
         {
           label: `${t("organization.create.name.label")}`,
@@ -10630,7 +10696,7 @@ var BaseCreateOrganization = ({
           className: cx27(styles.input)
         }
       ) }),
-      /* @__PURE__ */ jsx84("div", { className: cx27(styles.fieldGroup), children: /* @__PURE__ */ jsx84(
+      /* @__PURE__ */ jsx83("div", { className: cx27(styles.fieldGroup), children: /* @__PURE__ */ jsx83(
         TextField_default,
         {
           label: `${t("organization.create.handle.label") || "Organization Handle"}`,
@@ -10644,9 +10710,9 @@ var BaseCreateOrganization = ({
           className: cx27(styles.input)
         }
       ) }),
-      /* @__PURE__ */ jsx84("div", { className: cx27(styles.fieldGroup), children: /* @__PURE__ */ jsxs40(FormControl_default, { error: formErrors.description, children: [
-        /* @__PURE__ */ jsx84(InputLabel_default, { required: true, children: t("organization.create.description.label") }),
-        /* @__PURE__ */ jsx84(
+      /* @__PURE__ */ jsx83("div", { className: cx27(styles.fieldGroup), children: /* @__PURE__ */ jsxs39(FormControl_default, { error: formErrors.description, children: [
+        /* @__PURE__ */ jsx83(InputLabel_default, { required: true, children: t("organization.create.description.label") }),
+        /* @__PURE__ */ jsx83(
           "textarea",
           {
             className: cx27(styles.textarea, formErrors.description && styles.textareaError),
@@ -10660,15 +10726,15 @@ var BaseCreateOrganization = ({
       ] }) }),
       renderAdditionalFields && renderAdditionalFields()
     ] }),
-    /* @__PURE__ */ jsxs40("div", { className: cx27(styles.actions), children: [
-      onCancel && /* @__PURE__ */ jsx84(Button_default, { type: "button", variant: "outline", onClick: onCancel, disabled: loading, children: t("organization.create.cancel") }),
-      /* @__PURE__ */ jsx84(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__ */ jsxs39("div", { className: cx27(styles.actions), children: [
+      onCancel && /* @__PURE__ */ jsx83(Button_default, { type: "button", variant: "outline", onClick: onCancel, disabled: loading, children: t("organization.create.cancel") }),
+      /* @__PURE__ */ jsx83(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__ */ jsx84(Dialog_default, { open, onOpenChange, children: /* @__PURE__ */ jsxs40(Dialog_default.Content, { children: [
-      /* @__PURE__ */ jsx84(Dialog_default.Heading, { children: title }),
-      /* @__PURE__ */ jsx84("div", { className: styles.popup, children: createOrganizationContent })
+    return /* @__PURE__ */ jsx83(Dialog_default, { open, onOpenChange, children: /* @__PURE__ */ jsxs39(Dialog_default.Content, { children: [
+      /* @__PURE__ */ jsx83(Dialog_default.Heading, { children: title }),
+      /* @__PURE__ */ jsx83("div", { className: styles.popup, children: createOrganizationContent })
     ] }) });
   }
   return createOrganizationContent;
@@ -10704,7 +10770,7 @@ var createOrganization = async ({ fetcher, ...requestConfig }) => {
 var createOrganization_default = createOrganization;
 
 // src/components/presentation/CreateOrganization/CreateOrganization.tsx
-import { Fragment as Fragment17, jsx as jsx85 } from "react/jsx-runtime";
+import { Fragment as Fragment17, jsx as jsx84 } from "react/jsx-runtime";
 var CreateOrganization = ({
   onCreateOrganization,
   fallback = null,
@@ -10720,7 +10786,7 @@ var CreateOrganization = ({
     return fallback;
   }
   if (!isSignedIn) {
-    return /* @__PURE__ */ jsx85(Fragment17, {});
+    return /* @__PURE__ */ jsx84(Fragment17, {});
   }
   const parentId = defaultParentId || currentOrganization?.id || "";
   const handleSubmit = async (payload) => {
@@ -10754,7 +10820,7 @@ var CreateOrganization = ({
       setLoading(false);
     }
   };
-  return /* @__PURE__ */ jsx85(
+  return /* @__PURE__ */ jsx84(
     BaseCreateOrganization,
     {
       onSubmit: handleSubmit,
@@ -10936,7 +11002,7 @@ var useStyles25 = (theme, colorScheme, disabled, readOnly, hasError) => {
 var KeyValueInput_styles_default = useStyles25;
 
 // src/components/primitives/KeyValueInput/KeyValueInput.tsx
-import { jsx as jsx86, jsxs as jsxs41 } from "react/jsx-runtime";
+import { jsx as jsx85, jsxs as jsxs40 } from "react/jsx-runtime";
 var KeyValueInput = ({
   className = "",
   disabled = false,
@@ -11011,10 +11077,10 @@ var KeyValueInput = ({
   );
   const canAddMore = !maxPairs || pairs.length < maxPairs;
   const isAddDisabled = disabled || readOnly || !canAddMore || !newKey.trim() || !newValue.trim();
-  return /* @__PURE__ */ jsxs41("div", { className: cx28(withVendorCSSClassPrefix27(bem20("key-value-input")), styles.container, className), children: [
-    label && /* @__PURE__ */ jsxs41("label", { className: cx28(withVendorCSSClassPrefix27(bem20("key-value-input", "label")), styles.label), children: [
+  return /* @__PURE__ */ jsxs40("div", { className: cx28(withVendorCSSClassPrefix27(bem20("key-value-input")), styles.container, className), children: [
+    label && /* @__PURE__ */ jsxs40("label", { className: cx28(withVendorCSSClassPrefix27(bem20("key-value-input", "label")), styles.label), children: [
       label,
-      required && /* @__PURE__ */ jsx86(
+      required && /* @__PURE__ */ jsx85(
         "span",
         {
           className: cx28(withVendorCSSClassPrefix27(bem20("key-value-input", "required")), styles.requiredIndicator),
@@ -11022,13 +11088,13 @@ var KeyValueInput = ({
         }
       )
     ] }),
-    /* @__PURE__ */ jsxs41("div", { className: cx28(withVendorCSSClassPrefix27(bem20("key-value-input", "pairs-list")), styles.pairsList), children: [
-      pairs.length === 0 && readOnly ? /* @__PURE__ */ jsx86("div", { className: cx28(withVendorCSSClassPrefix27(bem20("key-value-input", "empty-state")), styles.emptyState), children: "No attributes defined" }) : readOnly ? pairs.map((pair, index) => /* @__PURE__ */ jsxs41(
+    /* @__PURE__ */ jsxs40("div", { className: cx28(withVendorCSSClassPrefix27(bem20("key-value-input", "pairs-list")), styles.pairsList), children: [
+      pairs.length === 0 && readOnly ? /* @__PURE__ */ jsx85("div", { className: cx28(withVendorCSSClassPrefix27(bem20("key-value-input", "empty-state")), styles.emptyState), children: "No attributes defined" }) : readOnly ? pairs.map((pair, index) => /* @__PURE__ */ jsxs40(
         "div",
         {
           className: cx28(withVendorCSSClassPrefix27(bem20("key-value-input", "readonly-pair")), styles.readOnlyPair),
           children: [
-            /* @__PURE__ */ jsxs41(
+            /* @__PURE__ */ jsxs40(
               "span",
               {
                 className: cx28(withVendorCSSClassPrefix27(bem20("key-value-input", "readonly-key")), styles.readOnlyKey),
@@ -11038,7 +11104,7 @@ var KeyValueInput = ({
                 ]
               }
             ),
-            /* @__PURE__ */ jsx86(
+            /* @__PURE__ */ jsx85(
               "span",
               {
                 className: cx28(withVendorCSSClassPrefix27(bem20("key-value-input", "readonly-value")), styles.readOnlyValue),
@@ -11048,12 +11114,12 @@ var KeyValueInput = ({
           ]
         },
         `${pair.key}-${index}`
-      )) : pairs.map((pair, index) => /* @__PURE__ */ jsxs41(
+      )) : pairs.map((pair, index) => /* @__PURE__ */ jsxs40(
         "div",
         {
           className: cx28(withVendorCSSClassPrefix27(bem20("key-value-input", "pair-row")), styles.pairRow),
           children: [
-            /* @__PURE__ */ jsx86(
+            /* @__PURE__ */ jsx85(
               TextField_default,
               {
                 placeholder: keyPlaceholder,
@@ -11064,7 +11130,7 @@ var KeyValueInput = ({
                 "aria-label": `${keyLabel} ${index + 1}`
               }
             ),
-            /* @__PURE__ */ jsx86(
+            /* @__PURE__ */ jsx85(
               TextField_default,
               {
                 placeholder: valuePlaceholder,
@@ -11075,7 +11141,7 @@ var KeyValueInput = ({
                 "aria-label": `${valueLabel} ${index + 1}`
               }
             ),
-            !readOnly && /* @__PURE__ */ jsx86(
+            !readOnly && /* @__PURE__ */ jsx85(
               "button",
               {
                 type: "button",
@@ -11083,15 +11149,15 @@ var KeyValueInput = ({
                 disabled,
                 className: cx28(withVendorCSSClassPrefix27(bem20("key-value-input", "remove-button")), styles.removeButton),
                 "aria-label": `${removeButtonText} ${pair.key}`,
-                children: /* @__PURE__ */ jsx86(X_default, { width: 16, height: 16 })
+                children: /* @__PURE__ */ jsx85(X_default, { width: 16, height: 16 })
               }
             )
           ]
         },
         `${pair.key}-${index}`
       )),
-      !readOnly && /* @__PURE__ */ jsxs41("div", { className: cx28(withVendorCSSClassPrefix27(bem20("key-value-input", "add-row")), styles.addRow), children: [
-        /* @__PURE__ */ jsx86(
+      !readOnly && /* @__PURE__ */ jsxs40("div", { className: cx28(withVendorCSSClassPrefix27(bem20("key-value-input", "add-row")), styles.addRow), children: [
+        /* @__PURE__ */ jsx85(
           TextField_default,
           {
             placeholder: keyPlaceholder,
@@ -11102,7 +11168,7 @@ var KeyValueInput = ({
             "aria-label": "New key"
           }
         ),
-        /* @__PURE__ */ jsx86(
+        /* @__PURE__ */ jsx85(
           TextField_default,
           {
             placeholder: valuePlaceholder,
@@ -11118,7 +11184,7 @@ var KeyValueInput = ({
             }
           }
         ),
-        /* @__PURE__ */ jsx86(
+        /* @__PURE__ */ jsx85(
           "button",
           {
             type: "button",
@@ -11126,13 +11192,13 @@ var KeyValueInput = ({
             disabled: isAddDisabled,
             className: cx28(withVendorCSSClassPrefix27(bem20("key-value-input", "add-button")), styles.addButton),
             "aria-label": "Add new key-value pair",
-            children: /* @__PURE__ */ jsx86(Plus_default, { width: 16, height: 16 })
+            children: /* @__PURE__ */ jsx85(Plus_default, { width: 16, height: 16 })
           }
         )
       ] })
     ] }),
-    (helperText || error) && /* @__PURE__ */ jsx86("div", { className: cx28(withVendorCSSClassPrefix27(bem20("key-value-input", "helper-text")), styles.helperText), children: error || helperText }),
-    maxPairs && /* @__PURE__ */ jsxs41("div", { className: cx28(withVendorCSSClassPrefix27(bem20("key-value-input", "counter")), styles.counterText), children: [
+    (helperText || error) && /* @__PURE__ */ jsx85("div", { className: cx28(withVendorCSSClassPrefix27(bem20("key-value-input", "helper-text")), styles.helperText), children: error || helperText }),
+    maxPairs && /* @__PURE__ */ jsxs40("div", { className: cx28(withVendorCSSClassPrefix27(bem20("key-value-input", "counter")), styles.counterText), children: [
       pairs.length,
       " of ",
       maxPairs,
@@ -11299,7 +11365,7 @@ var useStyles26 = (theme, colorScheme) => {
 var BaseOrganizationProfile_styles_default = useStyles26;
 
 // src/components/presentation/OrganizationProfile/BaseOrganizationProfile.tsx
-import { Fragment as Fragment18, jsx as jsx87, jsxs as jsxs42 } from "react/jsx-runtime";
+import { Fragment as Fragment18, jsx as jsx86, jsxs as jsxs41 } from "react/jsx-runtime";
 var BaseOrganizationProfile = ({
   fallback = null,
   className = "",
@@ -11350,7 +11416,7 @@ var BaseOrganizationProfile = ({
   const styles = BaseOrganizationProfile_styles_default(theme, colorScheme);
   const [editedOrganization, setEditedOrganization] = useState25(organization);
   const [editingFields, setEditingFields] = useState25({});
-  const PencilIcon = () => /* @__PURE__ */ jsx87(
+  const PencilIcon = () => /* @__PURE__ */ jsx86(
     "svg",
     {
       width: "16",
@@ -11361,7 +11427,7 @@ var BaseOrganizationProfile = ({
       strokeWidth: "2",
       strokeLinecap: "round",
       strokeLinejoin: "round",
-      children: /* @__PURE__ */ jsx87("path", { d: "M17 3a2.828 2.828 0 1 1 4 4L7.5 20.5 2 22l1.5-5.5L17 3z" })
+      children: /* @__PURE__ */ jsx86("path", { d: "M17 3a2.828 2.828 0 1 1 4 4L7.5 20.5 2 22l1.5-5.5L17 3z" })
     }
   );
   const toggleFieldEdit = useCallback14((fieldName) => {
@@ -11424,7 +11490,7 @@ var BaseOrganizationProfile = ({
       let fieldInput;
       if (key === "attributes") {
         const attributesValue = typeof fieldValue === "object" && fieldValue !== null ? fieldValue : {};
-        fieldInput = /* @__PURE__ */ jsx87(
+        fieldInput = /* @__PURE__ */ jsx86(
           KeyValueInput_default,
           {
             value: attributesValue,
@@ -11462,26 +11528,26 @@ var BaseOrganizationProfile = ({
           }
         );
       } else {
-        fieldInput = /* @__PURE__ */ jsx87(TextField_default, { ...commonProps });
+        fieldInput = /* @__PURE__ */ jsx86(TextField_default, { ...commonProps });
       }
-      return /* @__PURE__ */ jsxs42(Fragment18, { children: [
-        /* @__PURE__ */ jsx87("span", { className: cx29(styles.label), children: label }),
-        /* @__PURE__ */ jsx87("div", { className: cx29(styles.value), children: fieldInput })
+      return /* @__PURE__ */ jsxs41(Fragment18, { children: [
+        /* @__PURE__ */ jsx86("span", { className: cx29(styles.label), children: label }),
+        /* @__PURE__ */ jsx86("div", { className: cx29(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__ */ jsx87(KeyValueInput_default, { value, readOnly: true, label: "" }) : String(renderedValue);
+      displayValue = key === "attributes" && typeof value === "object" && value !== null ? /* @__PURE__ */ jsx86(KeyValueInput_default, { value, readOnly: true, label: "" }) : String(renderedValue);
     } else if (isFieldEditable) {
       displayValue = getFieldPlaceholder(key);
     } else {
       displayValue = "-";
     }
-    return /* @__PURE__ */ jsxs42(Fragment18, { children: [
-      /* @__PURE__ */ jsx87("span", { className: cx29(styles.label), children: label }),
-      /* @__PURE__ */ jsx87("div", { className: cx29(styles.value, !hasValue && styles.valueEmpty), children: !hasValue && isFieldEditable && onStartEdit ? /* @__PURE__ */ jsx87(
+    return /* @__PURE__ */ jsxs41(Fragment18, { children: [
+      /* @__PURE__ */ jsx86("span", { className: cx29(styles.label), children: label }),
+      /* @__PURE__ */ jsx86("div", { className: cx29(styles.value, !hasValue && styles.valueEmpty), children: !hasValue && isFieldEditable && onStartEdit ? /* @__PURE__ */ jsx86(
         Button_default,
         {
           onClick: onStartEdit,
@@ -11504,8 +11570,8 @@ var BaseOrganizationProfile = ({
     if (!shouldShow) {
       return null;
     }
-    return /* @__PURE__ */ jsxs42("div", { className: cx29(styles.field), children: [
-      /* @__PURE__ */ jsx87("div", { className: cx29(styles.fieldContent), children: renderField(
+    return /* @__PURE__ */ jsxs41("div", { className: cx29(styles.field), children: [
+      /* @__PURE__ */ jsx86("div", { className: cx29(styles.fieldContent), children: renderField(
         field,
         isFieldEditing,
         (value) => {
@@ -11515,8 +11581,8 @@ var BaseOrganizationProfile = ({
         },
         () => toggleFieldEdit(field.key)
       ) }),
-      isFieldEditable && /* @__PURE__ */ jsx87("div", { className: cx29(styles.fieldActions), children: isFieldEditing ? /* @__PURE__ */ jsxs42(Fragment18, { children: [
-        /* @__PURE__ */ jsx87(
+      isFieldEditable && /* @__PURE__ */ jsx86("div", { className: cx29(styles.fieldActions), children: isFieldEditing ? /* @__PURE__ */ jsxs41(Fragment18, { children: [
+        /* @__PURE__ */ jsx86(
           Button_default,
           {
             onClick: () => handleFieldSave(field.key),
@@ -11527,7 +11593,7 @@ var BaseOrganizationProfile = ({
             children: saveButtonText
           }
         ),
-        /* @__PURE__ */ jsx87(
+        /* @__PURE__ */ jsx86(
           Button_default,
           {
             onClick: () => handleFieldCancel(field.key),
@@ -11538,7 +11604,7 @@ var BaseOrganizationProfile = ({
             children: cancelButtonText
           }
         )
-      ] }) : hasValue && /* @__PURE__ */ jsx87(
+      ] }) : hasValue && /* @__PURE__ */ jsx86(
         Button_default,
         {
           onClick: () => toggleFieldEdit(field.key),
@@ -11547,7 +11613,7 @@ var BaseOrganizationProfile = ({
           size: "small",
           title: "Edit field",
           className: cx29(styles.editButton),
-          children: /* @__PURE__ */ jsx87(PencilIcon, {})
+          children: /* @__PURE__ */ jsx86(PencilIcon, {})
         }
       ) })
     ] }, field.key);
@@ -11555,23 +11621,23 @@ var BaseOrganizationProfile = ({
   if (!organization) {
     return fallback;
   }
-  const profileContent = /* @__PURE__ */ jsxs42(Card_default, { className: cx29(styles.root, cardLayout && styles.card, className), children: [
-    /* @__PURE__ */ jsxs42("div", { className: cx29(styles.header), children: [
-      /* @__PURE__ */ jsx87(Avatar, { name: getOrgInitials(organization.name), size: 80, alt: `${organization.name} logo` }),
-      /* @__PURE__ */ jsxs42("div", { className: cx29(styles.orgInfo), children: [
-        /* @__PURE__ */ jsx87("h2", { className: cx29(styles.name), children: organization.name }),
-        organization.orgHandle && /* @__PURE__ */ jsxs42("p", { className: cx29(styles.handle), children: [
+  const profileContent = /* @__PURE__ */ jsxs41(Card_default, { className: cx29(styles.root, cardLayout && styles.card, className), children: [
+    /* @__PURE__ */ jsxs41("div", { className: cx29(styles.header), children: [
+      /* @__PURE__ */ jsx86(Avatar, { name: getOrgInitials(organization.name), size: 80, alt: `${organization.name} logo` }),
+      /* @__PURE__ */ jsxs41("div", { className: cx29(styles.orgInfo), children: [
+        /* @__PURE__ */ jsx86("h2", { className: cx29(styles.name), children: organization.name }),
+        organization.orgHandle && /* @__PURE__ */ jsxs41("p", { className: cx29(styles.handle), children: [
           "@",
           organization.orgHandle
         ] })
       ] })
     ] }),
-    /* @__PURE__ */ jsx87("div", { className: cx29(styles.infoContainer), children: fields.map((field, index) => renderOrganizationField(field)) })
+    /* @__PURE__ */ jsx86("div", { className: cx29(styles.infoContainer), children: fields.map((field, index) => renderOrganizationField(field)) })
   ] });
   if (mode === "popup") {
-    return /* @__PURE__ */ jsx87(Dialog_default, { open, onOpenChange, children: /* @__PURE__ */ jsxs42(Dialog_default.Content, { children: [
-      /* @__PURE__ */ jsx87(Dialog_default.Heading, { children: title }),
-      /* @__PURE__ */ jsx87("div", { className: cx29(styles.popup), children: profileContent })
+    return /* @__PURE__ */ jsx86(Dialog_default, { open, onOpenChange, children: /* @__PURE__ */ jsxs41(Dialog_default.Content, { children: [
+      /* @__PURE__ */ jsx86(Dialog_default.Heading, { children: title }),
+      /* @__PURE__ */ jsx86("div", { className: cx29(styles.popup), children: profileContent })
     ] }) });
   }
   return profileContent;
@@ -11640,7 +11706,7 @@ var updateOrganization = async ({
 var updateOrganization_default = updateOrganization;
 
 // src/components/presentation/OrganizationProfile/OrganizationProfile.tsx
-import { jsx as jsx88 } from "react/jsx-runtime";
+import { jsx as jsx87 } from "react/jsx-runtime";
 var OrganizationProfile = ({
   organizationId,
   mode = "default",
@@ -11648,8 +11714,8 @@ var OrganizationProfile = ({
   onOpenChange,
   onUpdate,
   popupTitle,
-  loadingFallback = /* @__PURE__ */ jsx88("div", { children: "Loading organization..." }),
-  errorFallback = /* @__PURE__ */ jsx88("div", { children: "Failed to load organization data" }),
+  loadingFallback = /* @__PURE__ */ jsx87("div", { children: "Loading organization..." }),
+  errorFallback = /* @__PURE__ */ jsx87("div", { children: "Failed to load organization data" }),
   ...rest
 }) => {
   const { baseUrl } = useAsgardeo_default();
@@ -11700,7 +11766,7 @@ var OrganizationProfile = ({
       throw err;
     }
   };
-  return /* @__PURE__ */ jsx88(
+  return /* @__PURE__ */ jsx87(
     BaseOrganizationProfile_default,
     {
       organization,
@@ -11950,21 +12016,21 @@ var useStyles27 = (theme, colorScheme) => {
 var BaseOrganizationList_styles_default = useStyles27;
 
 // src/components/presentation/OrganizationList/BaseOrganizationList.tsx
-import { jsx as jsx89, jsxs as jsxs43 } from "react/jsx-runtime";
+import { jsx as jsx88, jsxs as jsxs42 } from "react/jsx-runtime";
 var defaultRenderOrganization = (organization, styles, t, onOrganizationSelect, showStatus) => {
-  return /* @__PURE__ */ jsxs43("div", { className: cx30(styles.organizationItem), children: [
-    /* @__PURE__ */ jsxs43("div", { className: cx30(styles.organizationContent), children: [
-      /* @__PURE__ */ jsx89(Avatar_default, { variant: "square", name: organization.name, size: 48, alt: `${organization.name} logo` }),
-      /* @__PURE__ */ jsxs43("div", { className: cx30(styles.organizationInfo), children: [
-        /* @__PURE__ */ jsx89(Typography_default, { variant: "h6", className: cx30(styles.organizationName), children: organization.name }),
-        /* @__PURE__ */ jsxs43(Typography_default, { variant: "body2", color: "textSecondary", className: cx30(styles.organizationHandle), children: [
+  return /* @__PURE__ */ jsxs42("div", { className: cx30(styles.organizationItem), children: [
+    /* @__PURE__ */ jsxs42("div", { className: cx30(styles.organizationContent), children: [
+      /* @__PURE__ */ jsx88(Avatar_default, { variant: "square", name: organization.name, size: 48, alt: `${organization.name} logo` }),
+      /* @__PURE__ */ jsxs42("div", { className: cx30(styles.organizationInfo), children: [
+        /* @__PURE__ */ jsx88(Typography_default, { variant: "h6", className: cx30(styles.organizationName), children: organization.name }),
+        /* @__PURE__ */ jsxs42(Typography_default, { variant: "body2", color: "textSecondary", className: cx30(styles.organizationHandle), children: [
           "@",
           organization.orgHandle
         ] }),
-        showStatus && /* @__PURE__ */ jsxs43(Typography_default, { variant: "body2", color: "textSecondary", className: cx30(styles.organizationStatus), children: [
+        showStatus && /* @__PURE__ */ jsxs42(Typography_default, { variant: "body2", color: "textSecondary", className: cx30(styles.organizationStatus), children: [
           t("organization.switcher.status.label"),
           " ",
-          /* @__PURE__ */ jsx89(
+          /* @__PURE__ */ jsx88(
             "span",
             {
               className: cx30(
@@ -11977,7 +12043,7 @@ var defaultRenderOrganization = (organization, styles, t, onOrganizationSelect,
         ] })
       ] })
     ] }),
-    organization.canSwitch && /* @__PURE__ */ jsx89("div", { className: cx30(styles.organizationActions), children: /* @__PURE__ */ jsx89(
+    organization.canSwitch && /* @__PURE__ */ jsx88("div", { className: cx30(styles.organizationActions), children: /* @__PURE__ */ jsx88(
       Button_default,
       {
         onClick: (e) => {
@@ -11991,17 +12057,17 @@ var defaultRenderOrganization = (organization, styles, t, onOrganizationSelect,
     ) })
   ] }, organization.id);
 };
-var defaultRenderLoading = (t, styles) => /* @__PURE__ */ jsxs43("div", { className: cx30(styles.loadingContainer), children: [
-  /* @__PURE__ */ jsx89(Spinner_default, { size: "medium" }),
-  /* @__PURE__ */ jsx89(Typography_default, { variant: "body1", color: "textSecondary", className: cx30(styles.loadingText), children: t("organization.switcher.loading.organizations") })
+var defaultRenderLoading = (t, styles) => /* @__PURE__ */ jsxs42("div", { className: cx30(styles.loadingContainer), children: [
+  /* @__PURE__ */ jsx88(Spinner_default, { size: "medium" }),
+  /* @__PURE__ */ jsx88(Typography_default, { variant: "body1", color: "textSecondary", className: cx30(styles.loadingText), children: t("organization.switcher.loading.organizations") })
 ] });
-var defaultRenderError = (error, t, styles) => /* @__PURE__ */ jsx89("div", { className: cx30(styles.errorContainer), children: /* @__PURE__ */ jsxs43(Typography_default, { variant: "body1", color: "error", children: [
-  /* @__PURE__ */ jsx89("strong", { children: t("organization.switcher.error.prefix") }),
+var defaultRenderError = (error, t, styles) => /* @__PURE__ */ jsx88("div", { className: cx30(styles.errorContainer), children: /* @__PURE__ */ jsxs42(Typography_default, { variant: "body1", color: "error", children: [
+  /* @__PURE__ */ jsx88("strong", { children: t("organization.switcher.error.prefix") }),
   " ",
   error
 ] }) });
-var defaultRenderLoadMore = (onLoadMore, isLoading, t, styles) => /* @__PURE__ */ jsx89(Button_default, { onClick: onLoadMore, disabled: isLoading, className: cx30(styles.loadMoreButton), type: "button", fullWidth: true, children: isLoading ? t("organization.switcher.loading.more") : t("organization.switcher.load.more") });
-var defaultRenderEmpty = (t, styles) => /* @__PURE__ */ jsx89("div", { className: cx30(styles.emptyContainer), children: /* @__PURE__ */ jsx89(Typography_default, { variant: "body1", color: "textSecondary", className: cx30(styles.emptyText), children: t("organization.switcher.no.organizations") }) });
+var defaultRenderLoadMore = (onLoadMore, isLoading, t, styles) => /* @__PURE__ */ jsx88(Button_default, { onClick: onLoadMore, disabled: isLoading, className: cx30(styles.loadMoreButton), type: "button", fullWidth: true, children: isLoading ? t("organization.switcher.loading.more") : t("organization.switcher.load.more") });
+var defaultRenderEmpty = (t, styles) => /* @__PURE__ */ jsx88("div", { className: cx30(styles.emptyContainer), children: /* @__PURE__ */ jsx88(Typography_default, { variant: "body1", color: "textSecondary", className: cx30(styles.emptyText), children: t("organization.switcher.no.organizations") }) });
 var BaseOrganizationList = ({
   className = "",
   allOrganizations,
@@ -12044,53 +12110,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__ */ jsx89("div", { className: cx30(styles.root, className), style, children: renderLoadingWithStyles() });
+    const loadingContent = /* @__PURE__ */ jsx88("div", { className: cx30(styles.root, className), style, children: renderLoadingWithStyles() });
     if (mode === "popup") {
-      return /* @__PURE__ */ jsx89(Dialog_default, { open, onOpenChange, children: /* @__PURE__ */ jsxs43(Dialog_default.Content, { children: [
-        /* @__PURE__ */ jsx89(Dialog_default.Heading, { children: title }),
-        /* @__PURE__ */ jsx89("div", { className: cx30(styles.popupContent), children: loadingContent })
+      return /* @__PURE__ */ jsx88(Dialog_default, { open, onOpenChange, children: /* @__PURE__ */ jsxs42(Dialog_default.Content, { children: [
+        /* @__PURE__ */ jsx88(Dialog_default.Heading, { children: title }),
+        /* @__PURE__ */ jsx88("div", { className: cx30(styles.popupContent), children: loadingContent })
       ] }) });
     }
     return loadingContent;
   }
   if (error && organizationsWithSwitchAccess?.length === 0) {
-    const errorContent = /* @__PURE__ */ jsx89("div", { className: cx30(styles.root, className), style, children: renderErrorWithStyles(error) });
+    const errorContent = /* @__PURE__ */ jsx88("div", { className: cx30(styles.root, className), style, children: renderErrorWithStyles(error) });
     if (mode === "popup") {
-      return /* @__PURE__ */ jsx89(Dialog_default, { open, onOpenChange, children: /* @__PURE__ */ jsxs43(Dialog_default.Content, { children: [
-        /* @__PURE__ */ jsx89(Dialog_default.Heading, { children: title }),
-        /* @__PURE__ */ jsx89("div", { className: cx30(styles.popupContent), children: errorContent })
+      return /* @__PURE__ */ jsx88(Dialog_default, { open, onOpenChange, children: /* @__PURE__ */ jsxs42(Dialog_default.Content, { children: [
+        /* @__PURE__ */ jsx88(Dialog_default.Heading, { children: title }),
+        /* @__PURE__ */ jsx88("div", { className: cx30(styles.popupContent), children: errorContent })
       ] }) });
     }
     return errorContent;
   }
   if (!isLoading && organizationsWithSwitchAccess?.length === 0) {
-    const emptyContent = /* @__PURE__ */ jsx89("div", { className: cx30(styles.root, className), style, children: renderEmptyWithStyles() });
+    const emptyContent = /* @__PURE__ */ jsx88("div", { className: cx30(styles.root, className), style, children: renderEmptyWithStyles() });
     if (mode === "popup") {
-      return /* @__PURE__ */ jsx89(Dialog_default, { open, onOpenChange, children: /* @__PURE__ */ jsxs43(Dialog_default.Content, { children: [
-        /* @__PURE__ */ jsx89(Dialog_default.Heading, { children: title }),
-        /* @__PURE__ */ jsx89("div", { className: cx30(styles.popupContent), children: emptyContent })
+      return /* @__PURE__ */ jsx88(Dialog_default, { open, onOpenChange, children: /* @__PURE__ */ jsxs42(Dialog_default.Content, { children: [
+        /* @__PURE__ */ jsx88(Dialog_default.Heading, { children: title }),
+        /* @__PURE__ */ jsx88("div", { className: cx30(styles.popupContent), children: emptyContent })
       ] }) });
     }
     return emptyContent;
   }
-  const organizationListContent = /* @__PURE__ */ jsxs43("div", { className: cx30(styles.root, className), style, children: [
-    /* @__PURE__ */ jsxs43("div", { className: cx30(styles.header), children: [
-      /* @__PURE__ */ jsx89("div", { className: cx30(styles.headerInfo), children: /* @__PURE__ */ jsx89(Typography_default, { variant: "body2", color: "textSecondary", className: cx30(styles.subtitle), children: t("organization.switcher.showing.count", {
+  const organizationListContent = /* @__PURE__ */ jsxs42("div", { className: cx30(styles.root, className), style, children: [
+    /* @__PURE__ */ jsxs42("div", { className: cx30(styles.header), children: [
+      /* @__PURE__ */ jsx88("div", { className: cx30(styles.headerInfo), children: /* @__PURE__ */ jsx88(Typography_default, { variant: "body2", color: "textSecondary", className: cx30(styles.subtitle), children: t("organization.switcher.showing.count", {
         showing: organizationsWithSwitchAccess?.length,
         total: allOrganizations?.organizations?.length || 0
       }) }) }),
-      onRefresh && /* @__PURE__ */ jsx89(Button_default, { onClick: onRefresh, className: cx30(styles.refreshButton), type: "button", variant: "outline", size: "small", children: t("organization.switcher.refresh.button") })
+      onRefresh && /* @__PURE__ */ jsx88(Button_default, { onClick: onRefresh, className: cx30(styles.refreshButton), type: "button", variant: "outline", size: "small", children: t("organization.switcher.refresh.button") })
     ] }),
-    /* @__PURE__ */ jsx89("div", { className: cx30(styles.listContainer), children: organizationsWithSwitchAccess?.map(
+    /* @__PURE__ */ jsx88("div", { className: cx30(styles.listContainer), children: organizationsWithSwitchAccess?.map(
       (organization, index) => renderOrganizationWithStyles(organization, index)
     ) }),
-    error && organizationsWithSwitchAccess?.length > 0 && /* @__PURE__ */ jsx89("div", { className: cx30(styles.errorMargin), children: renderErrorWithStyles(error) }),
-    hasMore && fetchMore && /* @__PURE__ */ jsx89("div", { className: cx30(styles.loadMoreMargin), children: renderLoadMoreWithStyles(fetchMore, isLoadingMore) })
+    error && organizationsWithSwitchAccess?.length > 0 && /* @__PURE__ */ jsx88("div", { className: cx30(styles.errorMargin), children: renderErrorWithStyles(error) }),
+    hasMore && fetchMore && /* @__PURE__ */ jsx88("div", { className: cx30(styles.loadMoreMargin), children: renderLoadMoreWithStyles(fetchMore, isLoadingMore) })
   ] });
   if (mode === "popup") {
-    return /* @__PURE__ */ jsx89(Dialog_default, { open, onOpenChange, children: /* @__PURE__ */ jsxs43(Dialog_default.Content, { children: [
-      /* @__PURE__ */ jsx89(Dialog_default.Heading, { children: title }),
-      /* @__PURE__ */ jsx89("div", { className: cx30(styles.popupContent), children: organizationListContent })
+    return /* @__PURE__ */ jsx88(Dialog_default, { open, onOpenChange, children: /* @__PURE__ */ jsxs42(Dialog_default.Content, { children: [
+      /* @__PURE__ */ jsx88(Dialog_default.Heading, { children: title }),
+      /* @__PURE__ */ jsx88("div", { className: cx30(styles.popupContent), children: organizationListContent })
     ] }) });
   }
   return organizationListContent;
@@ -12167,7 +12233,7 @@ var useStyles28 = (theme, colorScheme) => {
 var OrganizationList_styles_default = useStyles28;
 
 // src/components/presentation/OrganizationList/OrganizationList.tsx
-import { jsx as jsx90 } from "react/jsx-runtime";
+import { jsx as jsx89 } from "react/jsx-runtime";
 var OrganizationList = ({
   autoFetch = true,
   filter = "",
@@ -12189,7 +12255,7 @@ var OrganizationList = ({
       setAllOrganizations(await getAllOrganizations2());
     })();
   }, []);
-  return /* @__PURE__ */ jsx90("div", { className: cx31(styles.root, className), style, children: /* @__PURE__ */ jsx90("div", { className: cx31(styles.container), children: /* @__PURE__ */ jsx90(
+  return /* @__PURE__ */ jsx89("div", { className: cx31(styles.root, className), style, children: /* @__PURE__ */ jsx89("div", { className: cx31(styles.container), children: /* @__PURE__ */ jsx89(
     BaseOrganizationList_default,
     {
       allOrganizations,
@@ -12204,8 +12270,8 @@ var OrganizationList = ({
 var OrganizationList_default = OrganizationList;
 
 // src/components/primitives/Icons/BuildingAlt.tsx
-import { jsx as jsx91, jsxs as jsxs44 } from "react/jsx-runtime";
-var BuildingAlt = ({ color = "currentColor", height = 24, width = 24 }) => /* @__PURE__ */ jsxs44(
+import { jsx as jsx90, jsxs as jsxs43 } from "react/jsx-runtime";
+var BuildingAlt = ({ color = "currentColor", height = 24, width = 24 }) => /* @__PURE__ */ jsxs43(
   "svg",
   {
     width,
@@ -12218,13 +12284,13 @@ var BuildingAlt = ({ color = "currentColor", height = 24, width = 24 }) => /* @_
     strokeLinecap: "round",
     strokeLinejoin: "round",
     children: [
-      /* @__PURE__ */ jsx91("path", { d: "M6 22V4a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2v18Z" }),
-      /* @__PURE__ */ jsx91("path", { d: "M6 12H4a2 2 0 0 0-2 2v6a2 2 0 0 0 2 2h2" }),
-      /* @__PURE__ */ jsx91("path", { d: "M18 9h2a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2h-2" }),
-      /* @__PURE__ */ jsx91("path", { d: "M10 6h4" }),
-      /* @__PURE__ */ jsx91("path", { d: "M10 10h4" }),
-      /* @__PURE__ */ jsx91("path", { d: "M10 14h4" }),
-      /* @__PURE__ */ jsx91("path", { d: "M10 18h4" })
+      /* @__PURE__ */ jsx90("path", { d: "M6 22V4a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2v18Z" }),
+      /* @__PURE__ */ jsx90("path", { d: "M6 12H4a2 2 0 0 0-2 2v6a2 2 0 0 0 2 2h2" }),
+      /* @__PURE__ */ jsx90("path", { d: "M18 9h2a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2h-2" }),
+      /* @__PURE__ */ jsx90("path", { d: "M10 6h4" }),
+      /* @__PURE__ */ jsx90("path", { d: "M10 10h4" }),
+      /* @__PURE__ */ jsx90("path", { d: "M10 14h4" }),
+      /* @__PURE__ */ jsx90("path", { d: "M10 18h4" })
     ]
   }
 );
@@ -12232,7 +12298,7 @@ BuildingAlt.displayName = "BuildingAlt";
 var BuildingAlt_default = BuildingAlt;
 
 // src/components/presentation/OrganizationSwitcher/OrganizationSwitcher.tsx
-import { Fragment as Fragment19, jsx as jsx92, jsxs as jsxs45 } from "react/jsx-runtime";
+import { Fragment as Fragment19, jsx as jsx91, jsxs as jsxs44 } from "react/jsx-runtime";
 var OrganizationSwitcher = ({
   currentOrganization: propCurrentOrganization,
   fallback = null,
@@ -12256,7 +12322,7 @@ var OrganizationSwitcher = ({
     return fallback;
   }
   if (!isSignedIn) {
-    return /* @__PURE__ */ jsx92(Fragment19, {});
+    return /* @__PURE__ */ jsx91(Fragment19, {});
   }
   const organizations = propOrganizations || contextOrganizations || [];
   const currentOrganization = propCurrentOrganization || contextCurrentOrganization;
@@ -12270,19 +12336,19 @@ var OrganizationSwitcher = ({
   const defaultMenuItems = [];
   if (currentOrganization) {
     defaultMenuItems.push({
-      icon: /* @__PURE__ */ jsx92(BuildingAlt_default, {}),
+      icon: /* @__PURE__ */ jsx91(BuildingAlt_default, {}),
       label: t("organization.switcher.manage.organizations"),
       onClick: handleManageOrganizations
     });
   }
   defaultMenuItems.push({
-    icon: /* @__PURE__ */ jsx92("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: /* @__PURE__ */ jsx92("path", { d: "M12 5v14m-7-7h14" }) }),
+    icon: /* @__PURE__ */ jsx91("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: /* @__PURE__ */ jsx91("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__ */ jsxs45(Fragment19, { children: [
-    /* @__PURE__ */ jsx92(
+  return /* @__PURE__ */ jsxs44(Fragment19, { children: [
+    /* @__PURE__ */ jsx91(
       BaseOrganizationSwitcher_default,
       {
         organizations,
@@ -12295,7 +12361,7 @@ var OrganizationSwitcher = ({
         ...props
       }
     ),
-    /* @__PURE__ */ jsx92(
+    /* @__PURE__ */ jsx91(
       CreateOrganization,
       {
         mode: "popup",
@@ -12309,7 +12375,7 @@ var OrganizationSwitcher = ({
         }
       }
     ),
-    currentOrganization && /* @__PURE__ */ jsx92(
+    currentOrganization && /* @__PURE__ */ jsx91(
       OrganizationProfile_default,
       {
         organizationId: currentOrganization.id,
@@ -12317,11 +12383,11 @@ var OrganizationSwitcher = ({
         open: isProfileOpen,
         onOpenChange: setIsProfileOpen,
         cardLayout: true,
-        loadingFallback: /* @__PURE__ */ jsx92("div", { children: t("organization.profile.loading") }),
-        errorFallback: /* @__PURE__ */ jsx92("div", { children: t("organization.profile.error") })
+        loadingFallback: /* @__PURE__ */ jsx91("div", { children: t("organization.profile.loading") }),
+        errorFallback: /* @__PURE__ */ jsx91("div", { children: t("organization.profile.error") })
       }
     ),
-    /* @__PURE__ */ jsx92(
+    /* @__PURE__ */ jsx91(
       OrganizationList_default,
       {
         mode: "popup",
@@ -12341,7 +12407,7 @@ var OrganizationSwitcher = ({
 var OrganizationSwitcher_default = OrganizationSwitcher;
 
 // src/index.ts
-import { AsgardeoRuntimeError as AsgardeoRuntimeError7, http } from "@asgardeo/browser";
+import { AsgardeoRuntimeError as AsgardeoRuntimeError7, http, getActiveTheme as getActiveTheme2 } from "@asgardeo/browser";
 export {
   Alert_default as Alert,
   AlertDescription,
@@ -12440,6 +12506,7 @@ export {
   createPatchOperations,
   createSignInOption,
   createSignInOptionFromAuthenticator,
+  getActiveTheme2 as getActiveTheme,
   getAllOrganizations_default as getAllOrganizations,
   getMeOrganizations_default as getMeOrganizations,
   getScim2Me_default as getMeProfile,