@asgardeo/react 0.6.16 → 0.6.18

package/dist/index.js

@@ -795,7 +795,7 @@ var AsgardeoReactClient = class extends AsgardeoBrowserClient {
     if (config.platform === Platform.AsgardeoV2) {
       return executeEmbeddedSignUpFlowV2({
         baseUrl,
-        payload: firstArg
+        payload: typeof firstArg === "object" && "flowType" in firstArg ? { ...firstArg, verbose: true } : firstArg
       });
     }
     if (typeof firstArg === "object" && "flowType" in firstArg) {
@@ -2720,45 +2720,47 @@ var BaseSignInButton_default = BaseSignInButton;
 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) => {
-  const { signIn, signInUrl, signInOptions } = useAsgardeo_default();
-  const { t } = useTranslation_default(preferences?.i18n);
-  const [isLoading, setIsLoading] = useState9(false);
-  const handleSignIn = async (e) => {
-    try {
-      setIsLoading(true);
-      if (signInUrl) {
-        navigate2(signInUrl);
-      } else {
-        await signIn(overriddenSignInOptions ?? signInOptions);
+var SignInButton = forwardRef3(
+  ({ children, onClick, preferences, signInOptions: overriddenSignInOptions = {}, ...rest }, ref) => {
+    const { signIn, signInUrl, signInOptions } = useAsgardeo_default();
+    const { t } = useTranslation_default(preferences?.i18n);
+    const [isLoading, setIsLoading] = useState9(false);
+    const handleSignIn = async (e) => {
+      try {
+        setIsLoading(true);
+        if (signInUrl) {
+          navigate2(signInUrl);
+        } else {
+          await signIn(overriddenSignInOptions ?? signInOptions);
+        }
+        if (onClick) {
+          onClick(e);
+        }
+      } catch (error) {
+        throw new AsgardeoRuntimeError4(
+          `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."
+        );
+      } finally {
+        setIsLoading(false);
       }
-      if (onClick) {
-        onClick(e);
+    };
+    return /* @__PURE__ */ jsx11(
+      BaseSignInButton_default,
+      {
+        ref,
+        onClick: handleSignIn,
+        isLoading,
+        signIn: handleSignIn,
+        preferences,
+        ...rest,
+        children: children ?? t("elements.buttons.signin.text")
       }
-    } catch (error) {
-      throw new AsgardeoRuntimeError4(
-        `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."
-      );
-    } finally {
-      setIsLoading(false);
-    }
-  };
-  return /* @__PURE__ */ jsx11(
-    BaseSignInButton_default,
-    {
-      ref,
-      onClick: handleSignIn,
-      isLoading,
-      signIn: handleSignIn,
-      preferences,
-      ...rest,
-      children: children ?? t("elements.buttons.signIn")
-    }
-  );
-});
+    );
+  }
+);
 SignInButton.displayName = "SignInButton";
 var SignInButton_default = SignInButton;
 
@@ -2827,7 +2829,7 @@ var SignOutButton = forwardRef5(({ children, onClick, preferences, ...rest }, re
       signOut: handleSignOut,
       preferences,
       ...rest,
-      children: children ?? t("elements.buttons.signOut")
+      children: children ?? t("elements.buttons.signout.text")
     }
   );
 });
@@ -2906,7 +2908,7 @@ var SignUpButton = forwardRef7(({ children, onClick, preferences, ...rest }, ref
       signUp: handleSignUp,
       preferences,
       ...rest,
-      children: children ?? t("elements.buttons.signUp")
+      children: children ?? t("elements.buttons.signup.text")
     }
   );
 });
@@ -2955,12 +2957,10 @@ var Loading = ({ children, fallback = null }) => {
 Loading.displayName = "Loading";
 var Loading_default = Loading;
 
-// src/components/presentation/SignIn/BaseSignIn.tsx
-import {
-  Platform as Platform3
-} from "@asgardeo/browser";
+// src/components/presentation/auth/SignIn/BaseSignIn.tsx
+import { Platform as Platform3 } from "@asgardeo/browser";
 
-// src/components/presentation/SignIn/non-component-driven/BaseSignIn.tsx
+// src/components/presentation/auth/SignIn/v1/BaseSignIn.tsx
 import {
   EmbeddedSignInFlowStepType,
   EmbeddedSignInFlowStatus,
@@ -2973,13 +2973,13 @@ import {
 import { cx as cx19 } from "@emotion/css";
 import { useEffect as useEffect12, useState as useState14, useCallback as useCallback9, useRef as useRef3 } from "react";
 
-// src/components/presentation/SignIn/non-component-driven/options/SignInOptionFactory.tsx
+// src/components/presentation/auth/SignIn/v1/options/SignInOptionFactory.tsx
 import {
   EmbeddedSignInFlowAuthenticatorKnownIdPType as EmbeddedSignInFlowAuthenticatorKnownIdPType2,
   ApplicationNativeAuthenticationConstants as ApplicationNativeAuthenticationConstants2
 } from "@asgardeo/browser";
 
-// src/components/presentation/SignIn/non-component-driven/options/UsernamePassword.tsx
+// src/components/presentation/auth/SignIn/v1/options/UsernamePassword.tsx
 import { EmbeddedSignInFlowAuthenticatorParamType, FieldType as FieldType2 } from "@asgardeo/browser";
 import { useEffect as useEffect7 } from "react";
 
@@ -4503,7 +4503,7 @@ var FieldFactory = (props) => {
   return createField(props);
 };
 
-// src/components/presentation/SignIn/non-component-driven/options/UsernamePassword.tsx
+// src/components/presentation/auth/SignIn/v1/options/UsernamePassword.tsx
 import { Fragment as Fragment7, jsx as jsx31, jsxs as jsxs11 } from "react/jsx-runtime";
 var UsernamePassword = ({
   authenticator,
@@ -4521,8 +4521,8 @@ var UsernamePassword = ({
   const { setTitle, setSubtitle } = useFlow_default();
   const formFields = authenticator.metadata?.params?.sort((a, b) => a.order - b.order)?.filter((param) => param.param !== "totp") || [];
   useEffect7(() => {
-    setTitle(t("username.password.title"));
-    setSubtitle(t("username.password.subtitle"));
+    setTitle(t("username.password.heading"));
+    setSubtitle(t("username.password.subheading"));
   }, [setTitle, setSubtitle, t]);
   return /* @__PURE__ */ jsxs11(Fragment7, { children: [
     formFields.map((param) => /* @__PURE__ */ jsx31("div", { children: createField({
@@ -4535,7 +4535,7 @@ var UsernamePassword = ({
       disabled: isLoading,
       className: inputClassName,
       touched: touchedFields[param.param] || false,
-      placeholder: t(`elements.fields.placeholder`, {
+      placeholder: t(`elements.fields.generic.placeholder`, {
         field: (param.displayName || param.param).toLowerCase()
       })
     }) }, param.param)),
@@ -4550,14 +4550,14 @@ var UsernamePassword = ({
         loading: isLoading,
         className: buttonClassName,
         style: { marginBottom: `calc(${theme.vars.spacing.unit} * 2)` },
-        children: t("username.password.submit.button")
+        children: t("username.password.buttons.submit.text")
       }
     )
   ] });
 };
 var UsernamePassword_default = UsernamePassword;
 
-// src/components/presentation/SignIn/non-component-driven/options/IdentifierFirst.tsx
+// src/components/presentation/auth/SignIn/v1/options/IdentifierFirst.tsx
 import { EmbeddedSignInFlowAuthenticatorParamType as EmbeddedSignInFlowAuthenticatorParamType2, FieldType as FieldType3 } from "@asgardeo/browser";
 import { useEffect as useEffect8 } from "react";
 import { Fragment as Fragment8, jsx as jsx32, jsxs as jsxs12 } from "react/jsx-runtime";
@@ -4577,8 +4577,8 @@ var IdentifierFirst = ({
   const { setTitle, setSubtitle } = useFlow_default();
   const formFields = authenticator.metadata?.params?.sort((a, b) => a.order - b.order) || [];
   useEffect8(() => {
-    setTitle(t("identifier.first.title"));
-    setSubtitle(t("identifier.first.subtitle"));
+    setTitle(t("identifier.first.heading"));
+    setSubtitle(t("identifier.first.subheading"));
   }, [setTitle, setSubtitle, t]);
   return /* @__PURE__ */ jsxs12(Fragment8, { children: [
     formFields.map((param) => /* @__PURE__ */ jsx32("div", { children: createField({
@@ -4591,7 +4591,7 @@ var IdentifierFirst = ({
       disabled: isLoading,
       className: inputClassName,
       touched: touchedFields[param.param] || false,
-      placeholder: t(`elements.fields.placeholder`, {
+      placeholder: t(`elements.fields.generic.placeholder`, {
         field: (param.displayName || param.param).toLowerCase()
       })
     }) }, param.param)),
@@ -4606,7 +4606,7 @@ var IdentifierFirst = ({
         loading: isLoading,
         className: buttonClassName,
         style: { marginBottom: `calc(${theme.vars.spacing.unit} * 2)` },
-        children: t("identifier.first.submit.button")
+        children: t("identifier.first.buttons.submit.text")
       }
     )
   ] });
@@ -4665,7 +4665,7 @@ var GoogleButton = ({
           }
         )
       ] }) }),
-      children: children ?? t("elements.buttons.google")
+      children: children ?? t("elements.buttons.google.text")
     }
   );
 };
@@ -4696,7 +4696,7 @@ var GitHubButton = ({
           fill: "#ffffff"
         }
       ) }) }),
-      children: children ?? t("elements.buttons.github")
+      children: children ?? t("elements.buttons.github.text")
     }
   );
 };
@@ -4727,7 +4727,7 @@ var MicrosoftButton = ({
         /* @__PURE__ */ jsx35("path", { fill: "#05a6f0", d: "M1 12h10v10H1z" }),
         /* @__PURE__ */ jsx35("path", { fill: "#ffba08", d: "M12 12h10v10H12z" })
       ] }),
-      children: children ?? t("elements.buttons.microsoft")
+      children: children ?? t("elements.buttons.microsoft.text")
     }
   );
 };
@@ -4767,7 +4767,7 @@ var FacebookButton = ({
           }
         )
       ] }),
-      children: children ?? t("elements.buttons.facebook")
+      children: children ?? t("elements.buttons.facebook.text")
     }
   );
 };
@@ -4798,7 +4798,7 @@ 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: children ?? t("elements.buttons.linkedin")
+      children: children ?? t("elements.buttons.linkedin.text")
     }
   );
 };
@@ -4829,13 +4829,13 @@ 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: children ?? t("elements.buttons.ethereum")
+      children: children ?? t("elements.buttons.ethereum.text")
     }
   );
 };
 var SignInWithEthereumButton_default = SignInWithEthereumButton;
 
-// src/components/presentation/SignIn/non-component-driven/options/EmailOtp.tsx
+// src/components/presentation/auth/SignIn/v1/options/EmailOtp.tsx
 import { EmbeddedSignInFlowAuthenticatorParamType as EmbeddedSignInFlowAuthenticatorParamType3, FieldType as FieldType4 } from "@asgardeo/browser";
 import { useEffect as useEffect9 } from "react";
 import { Fragment as Fragment9, jsx as jsx39, jsxs as jsxs16 } from "react/jsx-runtime";
@@ -4855,8 +4855,8 @@ var EmailOtp = ({
   const { setTitle, setSubtitle } = useFlow_default();
   const formFields = authenticator.metadata?.params?.sort((a, b) => a.order - b.order) || [];
   useEffect9(() => {
-    setTitle(t("email.otp.title"));
-    setSubtitle(t("email.otp.subtitle"));
+    setTitle(t("email.otp.heading"));
+    setSubtitle(t("email.otp.subheading"));
   }, [setTitle, setSubtitle, t]);
   const hasOtpField = formFields.some(
     (param) => param.param.toLowerCase().includes("otp") || param.param.toLowerCase().includes("code")
@@ -4896,14 +4896,14 @@ var EmailOtp = ({
         loading: isLoading,
         className: buttonClassName,
         style: { marginBottom: `calc(${theme.vars.spacing.unit} * 2)` },
-        children: t("email.otp.submit.button")
+        children: t("email.otp.buttons.submit.text")
       }
     )
   ] });
 };
 var EmailOtp_default = EmailOtp;
 
-// src/components/presentation/SignIn/non-component-driven/options/Totp.tsx
+// src/components/presentation/auth/SignIn/v1/options/Totp.tsx
 import { EmbeddedSignInFlowAuthenticatorParamType as EmbeddedSignInFlowAuthenticatorParamType4, FieldType as FieldType5 } from "@asgardeo/browser";
 import { useEffect as useEffect10 } from "react";
 import { Fragment as Fragment10, jsx as jsx40, jsxs as jsxs17 } from "react/jsx-runtime";
@@ -4923,8 +4923,8 @@ var Totp = ({
   const { setTitle, setSubtitle } = useFlow_default();
   const formFields = authenticator.metadata?.params?.sort((a, b) => a.order - b.order) || [];
   useEffect10(() => {
-    setTitle(t("totp.title"));
-    setSubtitle(t("totp.subtitle"));
+    setTitle(t("totp.heading"));
+    setSubtitle(t("totp.subheading"));
   }, [setTitle, setSubtitle, t]);
   const hasTotpField = formFields.some(
     (param) => param.param.toLowerCase().includes("totp") || param.param.toLowerCase().includes("token")
@@ -4964,14 +4964,14 @@ var Totp = ({
         loading: isLoading,
         className: buttonClassName,
         style: { marginBottom: `calc(${theme.vars.spacing.unit} * 2)` },
-        children: t("totp.submit.button")
+        children: t("totp.buttons.submit.text")
       }
     )
   ] });
 };
 var Totp_default = Totp;
 
-// src/components/presentation/SignIn/non-component-driven/options/SmsOtp.tsx
+// src/components/presentation/auth/SignIn/v1/options/SmsOtp.tsx
 import { EmbeddedSignInFlowAuthenticatorParamType as EmbeddedSignInFlowAuthenticatorParamType5, FieldType as FieldType6 } from "@asgardeo/browser";
 import { useEffect as useEffect11 } from "react";
 import { Fragment as Fragment11, jsx as jsx41, jsxs as jsxs18 } from "react/jsx-runtime";
@@ -4991,8 +4991,8 @@ var SmsOtp = ({
   const { setTitle, setSubtitle } = useFlow_default();
   const formFields = authenticator.metadata?.params?.sort((a, b) => a.order - b.order) || [];
   useEffect11(() => {
-    setTitle(t("sms.otp.title"));
-    setSubtitle(t("sms.otp.subtitle"));
+    setTitle(t("sms.otp.heading"));
+    setSubtitle(t("sms.otp.subheading"));
   }, [setTitle, setSubtitle, t]);
   const hasOtpField = formFields.some(
     (param) => param.param.toLowerCase().includes("otp") || param.param.toLowerCase().includes("code")
@@ -5032,14 +5032,14 @@ var SmsOtp = ({
         loading: isLoading,
         className: buttonClassName,
         style: { marginBottom: `calc(${theme.vars.spacing.unit} * 2)` },
-        children: t("sms.otp.submit.button")
+        children: t("sms.otp.buttons.submit.text")
       }
     )
   ] });
 };
 var SmsOtp_default = SmsOtp;
 
-// src/components/presentation/SignIn/non-component-driven/options/SocialButton.tsx
+// src/components/presentation/auth/SignIn/v1/options/SocialButton.tsx
 import { jsx as jsx42 } from "react/jsx-runtime";
 var SocialLogin = ({
   isLoading,
@@ -5064,13 +5064,13 @@ 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: t("elements.buttons.social", { connection: children })
+      children: t("elements.buttons.social.text", { connection: children })
     }
   );
 };
 var SocialButton_default = SocialLogin;
 
-// src/components/presentation/SignIn/non-component-driven/options/MultiOptionButton.tsx
+// src/components/presentation/auth/SignIn/v1/options/MultiOptionButton.tsx
 import { ApplicationNativeAuthenticationConstants, EmbeddedSignInFlowAuthenticatorKnownIdPType } from "@asgardeo/browser";
 import { jsx as jsx43, jsxs as jsxs19 } from "react/jsx-runtime";
 var MultiOptionButton = ({
@@ -5088,7 +5088,7 @@ var MultiOptionButton = ({
     }
     switch (authenticatorName) {
       default:
-        return t("elements.buttons.multi.option", { connection: authenticatorName });
+        return t("elements.buttons.multi.option.text", { connection: authenticatorName });
     }
   };
   const getIcon = () => {
@@ -5167,7 +5167,7 @@ var MultiOptionButton = ({
 };
 var MultiOptionButton_default = MultiOptionButton;
 
-// src/components/presentation/SignIn/non-component-driven/options/SignInOptionFactory.tsx
+// src/components/presentation/auth/SignIn/v1/options/SignInOptionFactory.tsx
 import { jsx as jsx44 } from "react/jsx-runtime";
 var createSignInOption = ({
   authenticator,
@@ -6014,7 +6014,7 @@ var Logo = ({ className, src, alt, title, size = "medium" }) => {
 };
 var Logo_default = Logo;
 
-// src/components/presentation/SignIn/BaseSignIn.styles.ts
+// src/components/presentation/auth/SignIn/BaseSignIn.styles.ts
 import { css as css16 } from "@emotion/css";
 import { useMemo as useMemo23 } from "react";
 var useStyles16 = (theme, colorScheme) => {
@@ -6156,7 +6156,7 @@ var useStyles16 = (theme, colorScheme) => {
 };
 var BaseSignIn_styles_default = useStyles16;
 
-// src/components/presentation/SignIn/non-component-driven/BaseSignIn.tsx
+// src/components/presentation/auth/SignIn/v1/BaseSignIn.tsx
 import { jsx as jsx53, jsxs as jsxs26 } from "react/jsx-runtime";
 var isPasskeyAuthenticator = (authenticator) => authenticator.authenticatorId === ApplicationNativeAuthenticationConstants3.SupportedAuthenticators.Passkey && authenticator.metadata?.promptType === EmbeddedSignInFlowAuthenticatorPromptType.InternalPrompt && authenticator.metadata?.additionalData?.challengeData;
 var BaseSignIn = ({ showLogo = true, ...rest }) => {
@@ -6204,7 +6204,7 @@ var BaseSignInContent = ({
     initialValue: "",
     validator: (value) => {
       if (currentAuthenticator.requiredParams.includes(param.param) && (!value || value.trim() === "")) {
-        return t("field.required");
+        return t("validations.required.field.error");
       }
       return null;
     }
@@ -6214,7 +6214,7 @@ var BaseSignInContent = ({
     fields: formFields,
     validateOnBlur: true,
     validateOnChange: false,
-    requiredMessage: t("field.required")
+    requiredMessage: t("validations.required.field.error")
   });
   const {
     values: formValues,
@@ -6380,7 +6380,7 @@ var BaseSignInContent = ({
         return;
       }
       if (response?.flowStatus === EmbeddedSignInFlowStatus.FailCompleted || response?.flowStatus === EmbeddedSignInFlowStatus.FailIncomplete) {
-        setError(t("errors.sign.in.flow.completion.failure"));
+        setError(t("errors.signin.flow.completion.failure"));
         return;
       }
       if (handleRedirectionIfNeeded(response)) {
@@ -6408,7 +6408,7 @@ var BaseSignInContent = ({
         }
       }
     } catch (err) {
-      const errorMessage = err instanceof AsgardeoAPIError2 ? err.message : t("errors.sign.in.flow.failure");
+      const errorMessage = err instanceof AsgardeoAPIError2 ? err.message : t("errors.signin.flow.failure");
       setError(errorMessage);
       onError?.(err);
     } finally {
@@ -6452,7 +6452,7 @@ var BaseSignInContent = ({
             return;
           }
           if (response?.flowStatus === EmbeddedSignInFlowStatus.FailCompleted || response?.flowStatus === EmbeddedSignInFlowStatus.FailIncomplete) {
-            setError(t("errors.sign.in.flow.passkeys.completion.failure"));
+            setError(t("errors.signin.flow.passkeys.completion.failure"));
             return;
           }
           if (response && "flowId" in response && "nextStep" in response) {
@@ -6482,7 +6482,7 @@ var BaseSignInContent = ({
           }
         } catch (passkeyError) {
           console.error("Passkey authentication error:", passkeyError);
-          let errorMessage = passkeyError instanceof Error ? passkeyError.message : t("errors.sign.in.flow.passkeys.failure");
+          let errorMessage = passkeyError instanceof Error ? passkeyError.message : t("errors.signin.flow.passkeys.failure");
           if (passkeyError instanceof Error && passkeyError.message.includes("security")) {
             errorMessage += " This may be due to browser security settings, an insecure connection, or device restrictions.";
           }
@@ -6703,7 +6703,7 @@ var BaseSignInContent = ({
           );
         }
       } catch (err) {
-        const errorMessage = err instanceof AsgardeoAPIError2 ? err.message : t("errors.sign.in.initialization");
+        const errorMessage = err instanceof AsgardeoAPIError2 ? err.message : t("errors.signin.initialization");
         setError(errorMessage);
         onError?.(err);
       } finally {
@@ -6714,7 +6714,7 @@ var BaseSignInContent = ({
   if (!isInitialized && isLoading) {
     return /* @__PURE__ */ jsx53(Card_default, { className: cx19(containerClasses, styles.card), variant, children: /* @__PURE__ */ jsx53(Card_default.Content, { children: /* @__PURE__ */ jsxs26("div", { className: styles.loadingContainer, children: [
       /* @__PURE__ */ jsx53(Spinner_default, { size: "medium" }),
-      /* @__PURE__ */ jsx53(Typography_default, { variant: "body1", className: styles.loadingText, children: t("messages.loading") })
+      /* @__PURE__ */ jsx53(Typography_default, { variant: "body1", className: styles.loadingText, children: t("messages.loading.placeholder") })
     ] }) }) });
   }
   if (hasMultipleOptions() && !currentAuthenticator) {
@@ -6726,8 +6726,8 @@ var BaseSignInContent = ({
     const optionAuthenticators = availableAuthenticators.filter((auth) => !userPromptAuthenticators.includes(auth)).filter((authenticator) => !HIDDEN_AUTHENTICATORS.includes(authenticator.authenticatorId));
     return /* @__PURE__ */ jsxs26(Card_default, { className: cx19(containerClasses, styles.card), variant, children: [
       (showTitle || showSubtitle) && /* @__PURE__ */ jsxs26(Card_default.Header, { className: styles.header, children: [
-        showTitle && /* @__PURE__ */ jsx53(Card_default.Title, { level: 2, className: styles.title, children: flowTitle || t("signin.title") }),
-        showSubtitle && /* @__PURE__ */ jsx53(Typography_default, { variant: "body1", className: styles.subtitle, children: flowSubtitle || t("signin.subtitle") })
+        showTitle && /* @__PURE__ */ jsx53(Card_default.Title, { level: 2, className: styles.title, children: flowTitle || t("signin.heading") }),
+        showSubtitle && /* @__PURE__ */ jsx53(Typography_default, { variant: "body1", className: styles.subtitle, children: flowSubtitle || t("signin.subheading") })
       ] }),
       /* @__PURE__ */ jsxs26(Card_default.Content, { children: [
         flowMessages && flowMessages.length > 0 && /* @__PURE__ */ jsx53("div", { className: styles.flowMessagesContainer, children: flowMessages.map((flowMessage, index) => /* @__PURE__ */ jsx53(
@@ -6798,7 +6798,7 @@ var BaseSignInContent = ({
   }
   if (!currentAuthenticator) {
     return /* @__PURE__ */ jsx53(Card_default, { className: cx19(containerClasses, styles.noAuthenticatorCard), variant, children: /* @__PURE__ */ jsx53(Card_default.Content, { children: error && /* @__PURE__ */ jsxs26(Alert_default, { variant: "error", className: styles.errorAlert, children: [
-      /* @__PURE__ */ jsx53(Alert_default.Title, { children: t("errors.title") || "Error" }),
+      /* @__PURE__ */ jsx53(Alert_default.Title, { children: t("errors.heading") || "Error" }),
       /* @__PURE__ */ jsx53(Alert_default.Description, { children: error })
     ] }) }) });
   }
@@ -6814,8 +6814,8 @@ var BaseSignInContent = ({
   }
   return /* @__PURE__ */ jsxs26(Card_default, { className: cx19(containerClasses, styles.card), variant, children: [
     /* @__PURE__ */ jsxs26(Card_default.Header, { className: styles.header, children: [
-      /* @__PURE__ */ jsx53(Card_default.Title, { level: 2, className: styles.title, children: flowTitle || t("signin.title") }),
-      /* @__PURE__ */ jsx53(Typography_default, { variant: "body1", className: styles.subtitle, children: flowSubtitle || t("signin.subtitle") }),
+      /* @__PURE__ */ jsx53(Card_default.Title, { level: 2, className: styles.title, children: flowTitle || t("signin.heading") }),
+      /* @__PURE__ */ jsx53(Typography_default, { variant: "body1", className: styles.subtitle, children: flowSubtitle || t("signin.subheading") }),
       flowMessages && flowMessages.length > 0 && /* @__PURE__ */ jsx53("div", { className: styles.flowMessagesContainer, children: flowMessages.map((flowMessage, index) => /* @__PURE__ */ jsx53(
         Alert_default,
         {
@@ -6832,7 +6832,7 @@ var BaseSignInContent = ({
     ] }),
     /* @__PURE__ */ jsxs26(Card_default.Content, { children: [
       error && /* @__PURE__ */ jsxs26(Alert_default, { variant: "error", className: cx19(styles.errorContainer, errorClasses), children: [
-        /* @__PURE__ */ jsx53(Alert_default.Title, { children: t("errors.title") }),
+        /* @__PURE__ */ jsx53(Alert_default.Title, { children: t("errors.heading") }),
         /* @__PURE__ */ jsx53(Alert_default.Description, { children: error })
       ] }),
       /* @__PURE__ */ jsx53(
@@ -6867,19 +6867,29 @@ var BaseSignInContent = ({
 };
 var BaseSignIn_default = BaseSignIn;
 
-// src/components/presentation/SignIn/component-driven/BaseSignIn.tsx
+// src/components/presentation/auth/SignIn/v2/BaseSignIn.tsx
 import { useState as useState15, useCallback as useCallback10 } from "react";
 import { cx as cx20 } from "@emotion/css";
-import { withVendorCSSClassPrefix as withVendorCSSClassPrefix20 } from "@asgardeo/browser";
+import {
+  withVendorCSSClassPrefix as withVendorCSSClassPrefix20
+} from "@asgardeo/browser";
 
-// src/components/presentation/SignIn/component-driven/SignInOptionFactory.tsx
+// src/components/presentation/auth/AuthOptionFactory.tsx
 import React from "react";
-import { AsgardeoRuntimeError as AsgardeoRuntimeError7, FieldType as FieldType7 } from "@asgardeo/browser";
-import { EmbeddedFlowComponentType } from "@asgardeo/browser";
+import {
+  AsgardeoRuntimeError as AsgardeoRuntimeError7,
+  FieldType as FieldType7,
+  EmbeddedFlowComponentTypeV2 as EmbeddedFlowComponentType
+} from "@asgardeo/browser";
 
 // src/components/adapters/SmsOtpButton.tsx
 import { jsx as jsx54 } from "react/jsx-runtime";
-var SmsOtpButton = ({ isLoading, preferences, children, ...rest }) => {
+var SmsOtpButton = ({
+  isLoading,
+  preferences,
+  children,
+  ...rest
+}) => {
   const { t } = useTranslation_default(preferences?.i18n);
   return /* @__PURE__ */ jsx54(
     Button_default,
@@ -6897,51 +6907,71 @@ var SmsOtpButton = ({ isLoading, preferences, children, ...rest }) => {
           d: "M20 15.5c-1.25 0-2.45-.2-3.57-.57a1.02 1.02 0 0 0-1.02.24l-2.2 2.2a15.074 15.074 0 0 1-6.59-6.59l2.2-2.2c.27-.27.35-.67.24-1.02A11.36 11.36 0 0 1 8.5 4c0-.55-.45-1-1-1H4c-.55 0-1 .45-1 1 0 9.39 7.61 17 17 17 .55 0 1-.45 1-1v-3.5c0-.55-.45-1-1-1M12 3v10l3-3h6V3z"
         }
       ) }),
-      children: children ?? t("elements.buttons.smsotp")
+      children: children ?? t("elements.buttons.smsotp.text")
     }
   );
 };
 var SmsOtpButton_default = SmsOtpButton;
 
-// src/components/presentation/SignIn/component-driven/SignInOptionFactory.tsx
+// src/components/presentation/auth/AuthOptionFactory.tsx
 import { jsx as jsx55 } from "react/jsx-runtime";
 var getFieldType = (variant) => {
   switch (variant) {
-    case "EMAIL":
+    case EmbeddedFlowComponentType.EmailInput:
       return FieldType7.Email;
-    case "PASSWORD":
+    case EmbeddedFlowComponentType.PasswordInput:
       return FieldType7.Password;
-    case "TEXT":
+    case EmbeddedFlowComponentType.TextInput:
     default:
       return FieldType7.Text;
   }
 };
 var getTypographyVariant = (variant) => {
   const variantMap = {
-    H1: "h1",
-    H2: "h2",
-    H3: "h3",
-    H4: "h4",
-    H5: "h5",
-    H6: "h6"
+    HEADING_1: "h1",
+    HEADING_2: "h2",
+    HEADING_3: "h3",
+    HEADING_4: "h4",
+    HEADING_5: "h5",
+    HEADING_6: "h6",
+    SUBTITLE_1: "subtitle1",
+    SUBTITLE_2: "subtitle2",
+    BODY_1: "body1",
+    BODY_2: "body2",
+    CAPTION: "caption",
+    OVERLINE: "overline",
+    BUTTON_TEXT: "button"
   };
   return variantMap[variant] || "h3";
 };
-var createSignInComponentFromFlow = (component, formValues, touchedFields, formErrors, isLoading, isFormValid, onInputChange, options = {}) => {
+var matchesSocialProvider = (actionId, eventType, buttonText, provider, authType) => {
+  const providerId = `${provider}_auth`;
+  const providerMatches = actionId === providerId || eventType === providerId;
+  if (authType === "signup") {
+    return providerMatches || buttonText.toLowerCase().includes(provider);
+  }
+  return providerMatches;
+};
+var createAuthComponentFromFlow = (component, formValues, touchedFields, formErrors, isLoading, isFormValid, onInputChange, authType, options = {}) => {
   const key = options.key || component.id;
+  if (authType === "signin") {
+    console.log("Creating sign-in component for:", component);
+  }
   switch (component.type) {
-    case EmbeddedFlowComponentType.Input: {
-      const identifier = component.config["identifier"] || component.id;
+    case EmbeddedFlowComponentType.TextInput:
+    case EmbeddedFlowComponentType.PasswordInput:
+    case EmbeddedFlowComponentType.EmailInput: {
+      const identifier = component.ref;
       const value = formValues[identifier] || "";
       const isTouched = touchedFields[identifier] || false;
       const error = isTouched ? formErrors[identifier] : void 0;
-      const fieldType = getFieldType(component.variant || "TEXT");
+      const fieldType = getFieldType(component.type);
       const field = createField({
         type: fieldType,
         name: identifier,
-        label: component.config["label"] || "",
-        placeholder: component.config["placeholder"] || "",
-        required: component.config["required"] || false,
+        label: component.label || "",
+        placeholder: component.placeholder || "",
+        required: component.required || false,
         value,
         error,
         onChange: (newValue) => onInputChange(identifier, newValue),
@@ -6950,7 +6980,7 @@ var createSignInComponentFromFlow = (component, formValues, touchedFields, formE
       });
       return React.cloneElement(field, { key });
     }
-    case EmbeddedFlowComponentType.Button: {
+    case EmbeddedFlowComponentType.Action: {
       const handleClick = () => {
         if (options.onSubmit) {
           const formData = {};
@@ -6962,17 +6992,28 @@ var createSignInComponentFromFlow = (component, formValues, touchedFields, formE
           options.onSubmit(component, formData);
         }
       };
-      const actionId = component.config["actionId"];
-      if (actionId === "google_auth") {
+      const actionId = component.id;
+      const eventType = component.eventType || "";
+      const buttonText = component.label || "";
+      if (matchesSocialProvider(actionId, eventType, buttonText, "google", authType)) {
         return /* @__PURE__ */ jsx55(GoogleButton_default, { onClick: handleClick, className: options.buttonClassName }, key);
       }
-      if (actionId === "github_auth") {
+      if (matchesSocialProvider(actionId, eventType, buttonText, "github", authType)) {
         return /* @__PURE__ */ jsx55(GitHubButton_default, { onClick: handleClick, className: options.buttonClassName }, key);
       }
-      if (actionId === "facebook_auth") {
+      if (matchesSocialProvider(actionId, eventType, buttonText, "facebook", authType)) {
         return /* @__PURE__ */ jsx55(FacebookButton_default, { onClick: handleClick, className: options.buttonClassName }, key);
       }
-      if (actionId === "prompt_mobile") {
+      if (matchesSocialProvider(actionId, eventType, buttonText, "microsoft", authType)) {
+        return /* @__PURE__ */ jsx55(MicrosoftButton_default, { onClick: handleClick, className: options.buttonClassName }, key);
+      }
+      if (matchesSocialProvider(actionId, eventType, buttonText, "linkedin", authType)) {
+        return /* @__PURE__ */ jsx55(LinkedInButton_default, { onClick: handleClick, className: options.buttonClassName }, key);
+      }
+      if (matchesSocialProvider(actionId, eventType, buttonText, "ethereum", authType)) {
+        return /* @__PURE__ */ jsx55(SignInWithEthereumButton_default, { onClick: handleClick, className: options.buttonClassName }, key);
+      }
+      if (actionId === "prompt_mobile" || eventType === "prompt_mobile") {
         return /* @__PURE__ */ jsx55(SmsOtpButton_default, { onClick: handleClick, className: options.buttonClassName }, key);
       }
       return /* @__PURE__ */ jsx55(
@@ -6984,19 +7025,19 @@ var createSignInComponentFromFlow = (component, formValues, touchedFields, formE
           className: options.buttonClassName,
           variant: component.variant?.toLowerCase() === "primary" ? "solid" : "outline",
           color: component.variant?.toLowerCase() === "primary" ? "primary" : "secondary",
-          children: component.config["text"] || "Submit"
+          children: buttonText || "Submit"
         },
         key
       );
     }
-    case EmbeddedFlowComponentType.Typography: {
-      const variant = getTypographyVariant(component.variant || "H3");
-      return /* @__PURE__ */ jsx55(Typography_default, { variant, children: component.config["text"] || "" }, key);
+    case EmbeddedFlowComponentType.Text: {
+      const variant = getTypographyVariant(component.variant);
+      return /* @__PURE__ */ jsx55(Typography_default, { variant, children: component.label || "" }, key);
     }
-    case EmbeddedFlowComponentType.Form: {
+    case EmbeddedFlowComponentType.Block: {
       if (component.components && component.components.length > 0) {
-        const formComponents = component.components.map(
-          (childComponent, index) => createSignInComponentFromFlow(
+        const blockComponents = component.components.map(
+          (childComponent, index) => createAuthComponentFromFlow(
             childComponent,
             formValues,
             touchedFields,
@@ -7004,30 +7045,44 @@ var createSignInComponentFromFlow = (component, formValues, touchedFields, formE
             isLoading,
             isFormValid,
             onInputChange,
+            authType,
             {
               ...options,
               key: childComponent.id || `${component.id}_${index}`
             }
           )
         ).filter(Boolean);
-        return /* @__PURE__ */ jsx55("form", { onSubmit: (e) => e.preventDefault(), children: formComponents }, key);
+        return /* @__PURE__ */ jsx55("div", { children: blockComponents }, key);
       }
       return null;
     }
-    case EmbeddedFlowComponentType.Divider: {
-      return /* @__PURE__ */ jsx55(Divider_default, {}, key);
-    }
     default:
       throw new AsgardeoRuntimeError7(
         `Unsupported component type: ${component.type}`,
-        "SignIn-UnsupportedComponentType-001",
+        `${authType === "signin" ? "SignIn" : "SignUp"}-UnsupportedComponentType-001`,
         "react",
-        "Something went wrong while rendering the sign-in component. Please try again later."
+        `Something went wrong while rendering the ${authType} component. Please try again later.`
       );
   }
 };
 var renderSignInComponents = (components, formValues, touchedFields, formErrors, isLoading, isFormValid, onInputChange, options) => components.map(
-  (component, index) => createSignInComponentFromFlow(
+  (component, index) => createAuthComponentFromFlow(
+    component,
+    formValues,
+    touchedFields,
+    formErrors,
+    isLoading,
+    isFormValid,
+    onInputChange,
+    "signin",
+    {
+      ...options,
+      key: component.id || index
+    }
+  )
+).filter(Boolean);
+var renderSignUpComponents = (components, formValues, touchedFields, formErrors, isLoading, isFormValid, onInputChange, options) => components.map(
+  (component, index) => createAuthComponentFromFlow(
     component,
     formValues,
     touchedFields,
@@ -7035,6 +7090,7 @@ var renderSignInComponents = (components, formValues, touchedFields, formErrors,
     isLoading,
     isFormValid,
     onInputChange,
+    "signup",
     {
       ...options,
       key: component.id || index
@@ -7042,169 +7098,160 @@ var renderSignInComponents = (components, formValues, touchedFields, formErrors,
   )
 ).filter(Boolean);
 
-// src/components/presentation/SignUp/transformer.ts
-import {
-  EmbeddedFlowComponentType as EmbeddedFlowComponentType2
-} from "@asgardeo/browser";
-var generateId = (prefix) => {
-  const suffix = Math.random().toString(36).substring(2, 6);
-  return `${prefix}_${suffix}`;
-};
-var getInputVariant = (type, name) => {
-  switch (type.toLowerCase()) {
-    case "email":
-      return "EMAIL";
-    case "password":
-      return "PASSWORD";
-    default:
-      return "TEXT";
+// src/utils/v2/resolveTranslation.ts
+var isTranslationString = (text) => {
+  if (!text || typeof text !== "string") {
+    return false;
   }
+  const trimmed = text.trim();
+  return trimmed.startsWith("{{") && trimmed.endsWith("}}");
 };
-var getInputLabel = (name, type, t) => {
-  const i18nKey = `elements.fields.${name}`;
-  const label = t(i18nKey);
-  if (label === i18nKey || !label) {
-    return name.replace(/([A-Z])/g, " $1").replace(/^./, (str) => str.toUpperCase()).trim();
+var extractTranslationKey = (text) => {
+  if (!isTranslationString(text)) {
+    return null;
+  }
+  const content = text.trim().slice(2, -2).trim();
+  const tFunctionMatch = content.match(/^t\((.+)\)$/);
+  if (!tFunctionMatch) {
+    return null;
   }
-  return label;
+  let key = tFunctionMatch[1].trim();
+  if (key.startsWith('"') && key.endsWith('"') || key.startsWith("'") && key.endsWith("'")) {
+    key = key.slice(1, -1);
+  }
+  const transformedKey = key.replace(/:/g, ".");
+  return transformedKey;
 };
-var getInputPlaceholder = (name, type, t) => {
-  const label = getInputLabel(name, type, t);
-  const placeholder = t("elements.fields.placeholder", { field: label });
-  if (!placeholder || placeholder === "elements.fields.placeholder") {
-    return `Enter your ${label}`;
+var resolveTranslation = (text, t) => {
+  if (!text) {
+    return "";
+  }
+  const translationKey = extractTranslationKey(text);
+  if (translationKey) {
+    return t(translationKey);
   }
-  return placeholder;
+  return text;
 };
-var convertSimpleInputToComponent = (input, t) => {
-  let fieldType = input.type;
-  if (input.name.toLowerCase().includes("password") && input.type.toLowerCase() === "string") {
-    fieldType = "password";
+var resolveTranslation_default = resolveTranslation;
+
+// src/utils/v2/resolveTranslationsInObject.ts
+var resolveTranslationsInObject = (obj, t, properties = ["label", "placeholder", "text", "title", "subtitle"]) => {
+  const resolved = { ...obj };
+  for (const prop of properties) {
+    if (resolved[prop] && typeof resolved[prop] === "string") {
+      resolved[prop] = resolveTranslation_default(resolved[prop], t);
+    }
   }
-  if (input.type.toLowerCase() === "dropdown") {
-    const label2 = getInputLabel(input.name, fieldType, t);
-    const placeholder2 = getInputPlaceholder(input.name, fieldType, t);
-    return {
-      id: generateId("select"),
-      type: EmbeddedFlowComponentType2.Select,
-      variant: "SELECT",
-      config: {
-        type: fieldType,
-        label: label2,
-        placeholder: placeholder2,
-        required: input.required,
-        identifier: input.name,
-        hint: "",
-        options: input.options || []
-      },
-      components: []
-    };
+  return resolved;
+};
+var resolveTranslationsInObject_default = resolveTranslationsInObject;
+
+// src/utils/v2/resolveTranslationsInArray.ts
+var resolveTranslationsInArray = (items, t, properties) => {
+  return items.map((item) => {
+    const resolved = resolveTranslationsInObject_default(item, t, properties);
+    if (resolved["components"] && Array.isArray(resolved["components"])) {
+      resolved["components"] = resolveTranslationsInArray(resolved["components"], t, properties);
+    }
+    return resolved;
+  });
+};
+var resolveTranslationsInArray_default = resolveTranslationsInArray;
+
+// src/utils/v2/flowTransformer.ts
+var transformComponents = (response, t) => {
+  if (!response?.data?.meta?.components) {
+    return [];
   }
-  const variant = getInputVariant(fieldType, input.name);
-  const label = getInputLabel(input.name, fieldType, t);
-  const placeholder = getInputPlaceholder(input.name, fieldType, t);
-  return {
-    id: generateId("input"),
-    type: EmbeddedFlowComponentType2.Input,
-    variant,
-    config: {
-      type: fieldType,
-      label,
-      placeholder,
-      required: input.required,
-      identifier: input.name,
-      hint: ""
-    },
-    components: []
-  };
+  const components = response.data.meta.components;
+  return resolveTranslationsInArray_default(components, t);
 };
-var convertActionToComponent = (action, t) => {
-  const normalizedId = action.id.replace(/_auth$/, "");
-  const i18nKey = `elements.buttons.${normalizedId}`;
-  let text = t(i18nKey);
-  if (!text || text === i18nKey) {
-    text = action.id.replace(/_/g, " ");
-    text = text.charAt(0).toUpperCase() + text.slice(1);
+var extractErrorMessage = (error, t, defaultErrorKey = "errors.flow.generic") => {
+  if (error && typeof error === "object" && error.failureReason) {
+    return error.failureReason;
   }
-  return {
-    id: generateId("action"),
-    type: EmbeddedFlowComponentType2.Button,
-    variant: "SECONDARY",
-    config: {
-      type: "button",
-      text,
-      actionId: action.id,
-      actionType: action.type
-    },
-    components: []
-  };
+  return t(defaultErrorKey);
 };
-var transformSimpleToComponentDriven = (response, t) => {
-  const inputComponents = response?.data?.inputs?.map((input) => convertSimpleInputToComponent(input, t)) || [];
-  const actionComponents = response?.data?.actions?.map((action) => convertActionToComponent(action, t)) || [];
-  const submitButton = inputComponents.length > 0 ? {
-    id: generateId("button"),
-    type: EmbeddedFlowComponentType2.Button,
-    variant: "PRIMARY",
-    config: {
-      type: "submit",
-      text: t("elements.buttons.signUp")
-    },
-    components: []
-  } : null;
-  const formComponents = [];
-  if (inputComponents.length > 0) {
-    formComponents.push(...inputComponents);
-    if (submitButton) formComponents.push(submitButton);
-  }
-  const result = [];
-  if (formComponents.length > 0) {
-    result.push({
-      id: generateId("form"),
-      type: EmbeddedFlowComponentType2.Form,
-      config: {},
-      components: formComponents
-    });
+var checkForErrorResponse = (response, t, defaultErrorKey = "errors.flow.generic") => {
+  if (response?.flowStatus === "ERROR") {
+    return extractErrorMessage(response, t, defaultErrorKey);
   }
-  if (actionComponents.length > 0) {
-    result.push(...actionComponents);
+  return null;
+};
+var normalizeFlowResponse = (response, t, options = {}) => {
+  const { throwOnError = true, defaultErrorKey = "errors.flow.generic" } = options;
+  const errorMessage = checkForErrorResponse(response, t, defaultErrorKey);
+  if (errorMessage && throwOnError) {
+    throw response;
   }
-  return result;
+  return {
+    flowId: response.flowId,
+    components: transformComponents(response, t)
+  };
 };
-var extractErrorMessage = (error, t) => {
-  let errorMessage = t("errors.sign.up.flow.failure");
-  if (error && typeof error === "object") {
-    if (error.flowStatus === "ERROR" && error.failureReason) {
-      errorMessage = error.failureReason;
-    } else if (error.code && (error.message || error.description)) {
-      errorMessage = error.description || error.message;
-    } else if (error instanceof Error && error.name === "AsgardeoAPIError") {
-      try {
-        const errorResponse = JSON.parse(
-          error.message
-        );
-        if (errorResponse.failureReason) {
-          errorMessage = errorResponse.failureReason;
-        } else if (errorResponse.description) {
-          errorMessage = errorResponse.description;
-        } else if (errorResponse.message) {
-          errorMessage = errorResponse.message;
-        } else {
-          errorMessage = error.message;
+
+// src/utils/v2/getAuthComponentHeadings.ts
+var getAuthComponentHeadings = (components, flowTitle, flowSubtitle, defaultTitle, defaultSubtitle) => {
+  let heading = null;
+  let subheading = null;
+  const findHeadings = (comps) => {
+    for (const component of comps) {
+      if (component.type === "TEXT" && component.variant && component.variant.startsWith("HEADING_")) {
+        if (!heading) {
+          heading = component;
+        } else if (!subheading) {
+          subheading = component;
+          break;
         }
-      } catch {
-        errorMessage = error.message;
       }
-    } else if (error.message) {
-      errorMessage = error.message;
+      if (component.components && component.components.length > 0) {
+        findHeadings(component.components);
+        if (heading && subheading) break;
+      }
     }
-  } else if (typeof error === "string") {
-    errorMessage = error;
-  }
-  return errorMessage;
+  };
+  const filterComponents = (comps) => {
+    let foundHeadings = 0;
+    const maxHeadings = 2;
+    const filter = (components2) => {
+      return components2.reduce((acc, component) => {
+        if (foundHeadings < maxHeadings && component.type === "TEXT" && component.variant && component.variant.startsWith("HEADING_")) {
+          foundHeadings++;
+          return acc;
+        }
+        if (component.components && component.components.length > 0) {
+          const filteredNestedComponents = filter(component.components);
+          if (filteredNestedComponents.length > 0) {
+            acc.push({
+              ...component,
+              components: filteredNestedComponents
+            });
+          }
+        } else {
+          acc.push(component);
+        }
+        return acc;
+      }, []);
+    };
+    return filter(comps);
+  };
+  const getComponentText = (component) => {
+    if (!component) return "";
+    return component.label || "";
+  };
+  findHeadings(components);
+  const headingText = getComponentText(heading);
+  const subheadingText = getComponentText(subheading);
+  return {
+    title: flowTitle || headingText || defaultTitle || "",
+    subtitle: flowSubtitle || subheadingText || defaultSubtitle || "",
+    componentsWithoutHeadings: filterComponents(components),
+    headingComponents: { heading, subheading }
+  };
 };
+var getAuthComponentHeadings_default = getAuthComponentHeadings;
 
-// src/components/presentation/SignIn/component-driven/BaseSignIn.tsx
+// src/components/presentation/auth/SignIn/v2/BaseSignIn.tsx
 import { jsx as jsx56, jsxs as jsxs27 } from "react/jsx-runtime";
 var BaseSignIn2 = ({ showLogo = true, ...rest }) => {
   const { theme } = useTheme_default();
@@ -7253,15 +7300,15 @@ var BaseSignInContent2 = ({
       const fields = [];
       const processComponents = (comps) => {
         comps.forEach((component) => {
-          if (component.type === "INPUT" && component.config) {
-            const identifier = component.config["identifier"] || component.id;
+          if (component.type === "TEXT_INPUT" || component.type === "PASSWORD_INPUT") {
+            const identifier = component.ref;
             fields.push({
               name: identifier,
-              required: component.config["required"] || false,
+              required: component.required || false,
               initialValue: "",
               validator: (value) => {
-                if (component.config["required"] && (!value || value.trim() === "")) {
-                  return t("field.required");
+                if (component.required && (!value || value.trim() === "")) {
+                  return t("validations.required.field.error");
                 }
                 return null;
               }
@@ -7283,7 +7330,7 @@ var BaseSignInContent2 = ({
     fields: formFields,
     validateOnBlur: true,
     validateOnChange: false,
-    requiredMessage: t("field.required")
+    requiredMessage: t("validations.required.field.error")
   });
   const {
     values: formValues,
@@ -7309,6 +7356,7 @@ var BaseSignInContent2 = ({
     }
     setIsSubmitting(true);
     clearMessages();
+    console.log("Submitting component:", component, "with data:", data);
     try {
       const filteredInputs = {};
       if (data) {
@@ -7319,17 +7367,11 @@ var BaseSignInContent2 = ({
         });
       }
       let payload = {};
-      if (component.config["actionId"]) {
-        payload = {
-          ...payload,
-          actionId: component.config["actionId"]
-        };
-      } else {
-        payload = {
-          ...payload,
-          inputs: filteredInputs
-        };
-      }
+      payload = {
+        ...payload,
+        ...component.id && { action: component.id },
+        inputs: filteredInputs
+      };
       await onSubmit?.(payload, component);
     } catch (err) {
       handleError(err);
@@ -7407,8 +7449,8 @@ var BaseSignInContent2 = ({
       handleInputChange,
       handleSubmit,
       validateForm,
-      title: flowTitle || t("signin.title"),
-      subtitle: flowSubtitle || t("signin.subtitle"),
+      title: flowTitle || t("signin.heading"),
+      subtitle: flowSubtitle || t("signin.subheading"),
       messages: flowMessages || []
     };
     return /* @__PURE__ */ jsx56("div", { className: containerClasses, children: children(renderProps) });
@@ -7417,12 +7459,19 @@ var BaseSignInContent2 = ({
     return /* @__PURE__ */ jsx56(Card_default, { className: cx20(containerClasses, styles.card), variant, children: /* @__PURE__ */ jsx56(Card_default.Content, { children: /* @__PURE__ */ jsx56("div", { style: { display: "flex", justifyContent: "center", padding: "2rem" }, children: /* @__PURE__ */ jsx56(Spinner_default, {}) }) }) });
   }
   if (!components || components.length === 0) {
-    return /* @__PURE__ */ jsx56(Card_default, { className: cx20(containerClasses, styles.card), variant, children: /* @__PURE__ */ jsx56(Card_default.Content, { children: /* @__PURE__ */ jsx56(Alert_default, { variant: "warning", children: /* @__PURE__ */ jsx56(Typography_default, { variant: "body1", children: t("errors.sign.in.components.not.available") }) }) }) });
-  }
+    return /* @__PURE__ */ jsx56(Card_default, { className: cx20(containerClasses, styles.card), variant, children: /* @__PURE__ */ jsx56(Card_default.Content, { children: /* @__PURE__ */ jsx56(Alert_default, { variant: "warning", children: /* @__PURE__ */ jsx56(Typography_default, { variant: "body1", children: t("errors.signin.components.not.available") }) }) }) });
+  }
+  const { title, subtitle, componentsWithoutHeadings } = getAuthComponentHeadings_default(
+    components,
+    flowTitle,
+    flowSubtitle,
+    t("signin.heading"),
+    t("signin.subheading")
+  );
   return /* @__PURE__ */ jsxs27(Card_default, { className: cx20(containerClasses, styles.card), variant, children: [
     (showTitle || showSubtitle) && /* @__PURE__ */ jsxs27(Card_default.Header, { className: styles.header, children: [
-      showTitle && /* @__PURE__ */ jsx56(Card_default.Title, { level: 2, className: styles.title, children: flowTitle || t("signin.title") }),
-      showSubtitle && /* @__PURE__ */ jsx56(Typography_default, { variant: "body1", className: styles.subtitle, children: flowSubtitle || t("signin.subtitle") })
+      showTitle && /* @__PURE__ */ jsx56(Card_default.Title, { level: 2, className: styles.title, children: title }),
+      showSubtitle && /* @__PURE__ */ jsx56(Typography_default, { variant: "body1", className: styles.subtitle, children: subtitle })
     ] }),
     /* @__PURE__ */ jsxs27(Card_default.Content, { children: [
       flowMessages && flowMessages.length > 0 && /* @__PURE__ */ jsx56("div", { className: styles.flowMessagesContainer, children: flowMessages.map((message, index) => /* @__PURE__ */ jsx56(
@@ -7434,13 +7483,13 @@ var BaseSignInContent2 = ({
         },
         index
       )) }),
-      /* @__PURE__ */ jsx56("div", { className: styles.contentContainer, children: components && renderComponents(components) })
+      /* @__PURE__ */ jsx56("div", { className: styles.contentContainer, children: componentsWithoutHeadings && renderComponents(componentsWithoutHeadings) })
     ] })
   ] });
 };
 var BaseSignIn_default2 = BaseSignIn2;
 
-// src/components/presentation/SignIn/BaseSignIn.tsx
+// src/components/presentation/auth/SignIn/BaseSignIn.tsx
 import { jsx as jsx57 } from "react/jsx-runtime";
 var BaseSignIn3 = (props) => {
   const { platform } = useAsgardeo_default();
@@ -7451,12 +7500,12 @@ var BaseSignIn3 = (props) => {
 };
 var BaseSignIn_default3 = BaseSignIn3;
 
-// src/components/presentation/SignIn/SignIn.tsx
+// src/components/presentation/auth/SignIn/SignIn.tsx
 import {
   Platform as Platform4
 } from "@asgardeo/browser";
 
-// src/components/presentation/SignIn/component-driven/SignIn.tsx
+// src/components/presentation/auth/SignIn/v2/SignIn.tsx
 import { useState as useState16, useEffect as useEffect13, useRef as useRef4 } from "react";
 import {
   AsgardeoRuntimeError as AsgardeoRuntimeError8,
@@ -7464,123 +7513,6 @@ import {
   EmbeddedSignInFlowStatusV2,
   EmbeddedSignInFlowTypeV2
 } from "@asgardeo/browser";
-
-// src/components/presentation/SignIn/component-driven/transformer.ts
-import { EmbeddedFlowComponentType as EmbeddedFlowComponentType3 } from "@asgardeo/browser";
-var generateId2 = (prefix) => {
-  const suffix = Math.random().toString(36).substring(2, 6);
-  return `${prefix}_${suffix}`;
-};
-var getInputVariant2 = (type, name) => {
-  switch (type.toLowerCase()) {
-    case "email":
-      return "EMAIL";
-    case "password":
-      return "PASSWORD";
-    default:
-      return "TEXT";
-  }
-};
-var getInputLabel2 = (name, type, t) => {
-  const i18nKey = `elements.fields.${name}`;
-  const label = t(i18nKey);
-  if (label === i18nKey || !label) {
-    return name.charAt(0).toUpperCase() + name.slice(1);
-  }
-  return label;
-};
-var getInputPlaceholder2 = (name, type, t) => {
-  const label = getInputLabel2(name, type, t);
-  const placeholder = t("elements.fields.placeholder", { field: label });
-  if (!placeholder || placeholder === "elements.fields.placeholder") {
-    return `Enter your ${label}`;
-  }
-  return placeholder;
-};
-var convertSimpleInputToComponent2 = (input, t) => {
-  let fieldType = input.type;
-  if (input.name.toLowerCase().includes("password") && input.type.toLowerCase() === "string") {
-    fieldType = "password";
-  }
-  const variant = getInputVariant2(fieldType, input.name);
-  const label = getInputLabel2(input.name, fieldType, t);
-  const placeholder = getInputPlaceholder2(input.name, fieldType, t);
-  return {
-    id: generateId2("input"),
-    type: EmbeddedFlowComponentType3.Input,
-    variant,
-    config: {
-      type: fieldType,
-      label,
-      placeholder,
-      required: input.required,
-      identifier: input.name,
-      hint: ""
-    },
-    components: []
-  };
-};
-var convertActionToComponent2 = (action, t) => {
-  const normalizedId = action.id.replace(/_auth$/, "");
-  const i18nKey = `elements.buttons.${normalizedId}`;
-  let text = t(i18nKey);
-  if (!text || text === i18nKey) {
-    text = action.id.replace(/_/g, " ");
-    text = text.charAt(0).toUpperCase() + text.slice(1);
-  }
-  return {
-    id: generateId2("action"),
-    type: EmbeddedFlowComponentType3.Button,
-    variant: "SECONDARY",
-    config: {
-      type: "button",
-      text,
-      actionId: action.id,
-      actionType: action.type
-    },
-    components: []
-  };
-};
-var transformSimpleToComponentDriven2 = (response, t) => {
-  const inputComponents = response?.data?.inputs?.map((input) => convertSimpleInputToComponent2(input, t)) || [];
-  const actionComponents = response?.data?.actions?.map((action) => convertActionToComponent2(action, t)) || [];
-  const submitButton = inputComponents.length > 0 ? {
-    id: generateId2("button"),
-    type: EmbeddedFlowComponentType3.Button,
-    variant: "PRIMARY",
-    config: {
-      type: "submit",
-      text: t("elements.buttons.signIn")
-    },
-    components: []
-  } : null;
-  const formComponents = [];
-  if (inputComponents.length > 0) {
-    formComponents.push(...inputComponents);
-    if (submitButton) formComponents.push(submitButton);
-  }
-  const result = [];
-  if (formComponents.length > 0) {
-    result.push({
-      id: generateId2("form"),
-      type: EmbeddedFlowComponentType3.Form,
-      config: {},
-      components: formComponents
-    });
-  }
-  if (actionComponents.length > 0) {
-    result.push(...actionComponents);
-  }
-  return result;
-};
-var normalizeFlowResponse = (response, t) => {
-  return {
-    flowId: response.flowId,
-    components: transformSimpleToComponentDriven2(response, t)
-  };
-};
-
-// src/components/presentation/SignIn/component-driven/SignIn.tsx
 import { Fragment as Fragment12, jsx as jsx58 } from "react/jsx-runtime";
 var SignIn = ({ className, size = "medium", onSuccess, onError, variant, children }) => {
   const { applicationId, afterSignInUrl, signIn, isInitialized, isLoading } = useAsgardeo_default();
@@ -7651,11 +7583,7 @@ var SignIn = ({ className, size = "medium", onSuccess, onError, variant, childre
     console.warn("[SignIn] OAuth error detected:", error);
     clearFlowState();
     const errorMessage = errorDescription || `OAuth error: ${error}`;
-    const err = new AsgardeoRuntimeError8(
-      errorMessage,
-      "SIGN_IN_ERROR",
-      "react"
-    );
+    const err = new AsgardeoRuntimeError8(errorMessage, "SIGN_IN_ERROR", "react");
     setError(err);
     cleanupOAuthUrlParams(true);
   };
@@ -7737,11 +7665,7 @@ var SignIn = ({ className, size = "medium", onSuccess, onError, variant, childre
       const err = error;
       clearFlowState();
       const errorMessage = err instanceof Error ? err.message : String(err);
-      const displayError = new AsgardeoRuntimeError8(
-        errorMessage,
-        "SIGN_IN_ERROR",
-        "react"
-      );
+      const displayError = new AsgardeoRuntimeError8(errorMessage, "SIGN_IN_ERROR", "react");
       setError(displayError);
       initializationAttemptedRef.current = false;
       return;
@@ -7772,11 +7696,7 @@ var SignIn = ({ className, size = "medium", onSuccess, onError, variant, childre
         clearFlowState();
         const failureReason = response?.failureReason;
         const errorMessage = failureReason || "Authentication flow failed. Please try again.";
-        const err = new AsgardeoRuntimeError8(
-          errorMessage,
-          "SIGN_IN_ERROR",
-          "react"
-        );
+        const err = new AsgardeoRuntimeError8(errorMessage, "SIGN_IN_ERROR", "react");
         setError(err);
         cleanupFlowUrlParams();
         return;
@@ -7811,11 +7731,7 @@ var SignIn = ({ className, size = "medium", onSuccess, onError, variant, childre
       const err = error;
       clearFlowState();
       const errorMessage = err instanceof Error ? err.message : String(err);
-      const displayError = new AsgardeoRuntimeError8(
-        errorMessage,
-        "SIGN_IN_ERROR",
-        "react"
-      );
+      const displayError = new AsgardeoRuntimeError8(errorMessage, "SIGN_IN_ERROR", "react");
       setError(displayError);
       return;
     } finally {
@@ -7837,12 +7753,7 @@ var SignIn = ({ className, size = "medium", onSuccess, onError, variant, childre
     if (!urlParams.code || oauthCodeProcessedRef.current || isSubmitting) {
       return;
     }
-    const flowIdToUse = resolveFlowId(
-      currentFlowId,
-      urlParams.state,
-      urlParams.flowId,
-      storedFlowId
-    );
+    const flowIdToUse = resolveFlowId(currentFlowId, urlParams.state, urlParams.flowId, storedFlowId);
     if (!flowIdToUse || !signIn) {
       return;
     }
@@ -7888,7 +7799,7 @@ var SignIn = ({ className, size = "medium", onSuccess, onError, variant, childre
 };
 var SignIn_default = SignIn;
 
-// src/components/presentation/SignIn/SignIn.tsx
+// src/components/presentation/auth/SignIn/SignIn.tsx
 import { jsx as jsx59 } from "react/jsx-runtime";
 var SignIn2 = ({ className, size = "medium", children, ...rest }) => {
   const { signIn, afterSignInUrl, isInitialized, isLoading, platform } = useAsgardeo_default();
@@ -7923,7 +7834,7 @@ var SignIn2 = ({ className, size = "medium", children, ...rest }) => {
     );
   }
   return /* @__PURE__ */ jsx59(
-    BaseSignIn_default,
+    BaseSignIn_default3,
     {
       isLoading: isLoading || !isInitialized,
       afterSignInUrl,
@@ -7941,19 +7852,21 @@ var SignIn2 = ({ className, size = "medium", children, ...rest }) => {
 };
 var SignIn_default2 = SignIn2;
 
-// src/components/presentation/SignUp/BaseSignUp.tsx
+// src/components/presentation/auth/SignUp/BaseSignUp.tsx
+import { Platform as Platform5 } from "@asgardeo/browser";
+
+// src/components/presentation/auth/SignUp/v1/BaseSignUp.tsx
 import {
   EmbeddedFlowStatus,
-  EmbeddedFlowComponentType as EmbeddedFlowComponentType5,
+  EmbeddedFlowComponentType as EmbeddedFlowComponentType3,
   EmbeddedFlowResponseType,
-  withVendorCSSClassPrefix as withVendorCSSClassPrefix21,
-  Platform as Platform5
+  withVendorCSSClassPrefix as withVendorCSSClassPrefix21
 } from "@asgardeo/browser";
 import { cx as cx21 } from "@emotion/css";
 import { useEffect as useEffect14, useState as useState17, useCallback as useCallback11, useRef as useRef5 } from "react";
 
-// src/components/presentation/SignUp/SignUpOptionFactory.tsx
-import { EmbeddedFlowComponentType as EmbeddedFlowComponentType4 } from "@asgardeo/browser";
+// src/components/presentation/auth/SignUp/v1/SignUpOptionFactory.tsx
+import { EmbeddedFlowComponentType as EmbeddedFlowComponentType2 } from "@asgardeo/browser";
 
 // src/components/adapters/CheckboxInput.tsx
 import { FieldType as FieldType8 } from "@asgardeo/browser";
@@ -8404,13 +8317,13 @@ var TypographyComponent = ({ component }) => {
 };
 var Typography_default2 = TypographyComponent;
 
-// src/components/presentation/SignUp/SignUpOptionFactory.tsx
+// src/components/presentation/auth/SignUp/v1/SignUpOptionFactory.tsx
 import { jsx as jsx66 } from "react/jsx-runtime";
 var createSignUpComponent = ({ component, onSubmit, ...rest }) => {
   switch (component.type) {
-    case EmbeddedFlowComponentType4.Typography:
+    case EmbeddedFlowComponentType2.Typography:
       return /* @__PURE__ */ jsx66(Typography_default2, { component, onSubmit, ...rest });
-    case EmbeddedFlowComponentType4.Input:
+    case EmbeddedFlowComponentType2.Input:
       const inputVariant = component.variant?.toUpperCase();
       const inputType = component.config["type"]?.toLowerCase();
       if (inputVariant === "EMAIL" || inputType === "email") {
@@ -8432,7 +8345,7 @@ var createSignUpComponent = ({ component, onSubmit, ...rest }) => {
         return /* @__PURE__ */ jsx66(CheckboxInput_default, { component, onSubmit, ...rest });
       }
       return /* @__PURE__ */ jsx66(TextInput_default, { component, onSubmit, ...rest });
-    case EmbeddedFlowComponentType4.Button: {
+    case EmbeddedFlowComponentType2.Button: {
       const buttonVariant = component.variant?.toUpperCase();
       const buttonText = component.config["text"] || component.config["label"] || "";
       if (buttonVariant === "SOCIAL") {
@@ -8457,13 +8370,13 @@ var createSignUpComponent = ({ component, onSubmit, ...rest }) => {
       }
       return /* @__PURE__ */ jsx66(SubmitButton_default, { component, onSubmit, ...rest });
     }
-    case EmbeddedFlowComponentType4.Form:
+    case EmbeddedFlowComponentType2.Form:
       return /* @__PURE__ */ jsx66(FormContainer_default, { component, onSubmit, ...rest });
-    case EmbeddedFlowComponentType4.Select:
+    case EmbeddedFlowComponentType2.Select:
       return /* @__PURE__ */ jsx66(SelectInput_default, { component, onSubmit, ...rest });
-    case EmbeddedFlowComponentType4.Divider:
+    case EmbeddedFlowComponentType2.Divider:
       return /* @__PURE__ */ jsx66(DividerComponent_default, { component, onSubmit, ...rest });
-    case EmbeddedFlowComponentType4.Image:
+    case EmbeddedFlowComponentType2.Image:
       return /* @__PURE__ */ jsx66(ImageComponent_default, { component, onSubmit, ...rest });
     default:
       return /* @__PURE__ */ jsx66("div", {});
@@ -8479,7 +8392,7 @@ var createSignUpOptionFromComponent = (component, formValues, touchedFields, for
   touchedFields,
   ...options
 });
-var renderSignUpComponents = (components, formValues, touchedFields, formErrors, isLoading, isFormValid, onInputChange, options) => components.map(
+var renderSignUpComponents2 = (components, formValues, touchedFields, formErrors, isLoading, isFormValid, onInputChange, options) => components.map(
   (component, index) => createSignUpOptionFromComponent(
     component,
     formValues,
@@ -8496,7 +8409,7 @@ var renderSignUpComponents = (components, formValues, touchedFields, formErrors,
   )
 ).filter(Boolean);
 
-// src/components/presentation/SignUp/BaseSignUp.styles.ts
+// src/components/presentation/auth/SignUp/BaseSignUp.styles.ts
 import { css as css17 } from "@emotion/css";
 import { useMemo as useMemo24 } from "react";
 var useStyles17 = (theme, colorScheme) => {
@@ -8634,7 +8547,7 @@ var useStyles17 = (theme, colorScheme) => {
 };
 var BaseSignUp_styles_default = useStyles17;
 
-// src/components/presentation/SignUp/BaseSignUp.tsx
+// src/components/presentation/auth/SignUp/v1/BaseSignUp.tsx
 import { jsx as jsx67, jsxs as jsxs28 } from "react/jsx-runtime";
 var BaseSignUp = ({ showLogo = true, ...rest }) => {
   const { theme, colorScheme } = useTheme_default();
@@ -8670,7 +8583,29 @@ var BaseSignUpContent = ({
   const styles = BaseSignUp_styles_default(theme, colorScheme);
   const handleError = useCallback11(
     (error) => {
-      const errorMessage = extractErrorMessage(error, t);
+      let errorMessage = t("errors.signup.flow.failure");
+      if (error && typeof error === "object") {
+        if (error.code && (error.message || error.description)) {
+          errorMessage = error.description || error.message;
+        } else if (error instanceof Error && error.name === "AsgardeoAPIError") {
+          try {
+            const errorResponse = JSON.parse(error.message);
+            if (errorResponse.description) {
+              errorMessage = errorResponse.description;
+            } else if (errorResponse.message) {
+              errorMessage = errorResponse.message;
+            } else {
+              errorMessage = error.message;
+            }
+          } catch {
+            errorMessage = error.message;
+          }
+        } else if (error.message) {
+          errorMessage = error.message;
+        }
+      } else if (typeof error === "string") {
+        errorMessage = error;
+      }
       clearMessages();
       addMessage({
         type: "error",
@@ -8684,31 +8619,12 @@ var BaseSignUpContent = ({
   const [currentFlow, setCurrentFlow] = useState17(null);
   const [formData, setFormData] = useState17({});
   const initializationAttemptedRef = useRef5(false);
-  const normalizeFlowResponse2 = useCallback11(
-    (response) => {
-      if (response?.data?.components && Array.isArray(response.data.components)) {
-        return response;
-      }
-      if (response?.data && (response.data.inputs || response.data.actions)) {
-        const transformedComponents = transformSimpleToComponentDriven(response, t);
-        return {
-          ...response,
-          data: {
-            ...response.data,
-            components: transformedComponents
-          }
-        };
-      }
-      return response;
-    },
-    [t]
-  );
   const extractFormFields = useCallback11(
     (components) => {
       const fields = [];
       const processComponents = (comps) => {
         comps.forEach((component) => {
-          if (component.type === EmbeddedFlowComponentType5.Input) {
+          if (component.type === EmbeddedFlowComponentType3.Input) {
             const config = component.config || {};
             fields.push({
               name: config.name || component.id,
@@ -8716,7 +8632,7 @@ var BaseSignUpContent = ({
               initialValue: config.defaultValue || "",
               validator: (value) => {
                 if (config.required && (!value || value.trim() === "")) {
-                  return t("field.required");
+                  return t("validations.required.field.error");
                 }
                 if (config.type === "email" && value && !/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(value)) {
                   return t("field.email.invalid");
@@ -8744,7 +8660,7 @@ var BaseSignUpContent = ({
     fields: formFields,
     validateOnBlur: true,
     validateOnChange: true,
-    requiredMessage: t("field.required")
+    requiredMessage: t("validations.required.field.error")
   });
   const {
     values: formValues,
@@ -8792,15 +8708,14 @@ var BaseSignUpContent = ({
           }
         });
       }
-      const actionId = platform === Platform5.AsgardeoV2 ? component.config?.actionId : component.id;
+      const actionId = component.id;
       const payload = {
         ...currentFlow.flowId && { flowId: currentFlow.flowId },
         flowType: currentFlow.flowType || "REGISTRATION",
         inputs: filteredInputs,
         ...actionId && { actionId }
       };
-      const rawResponse = await onSubmit(payload);
-      const response = normalizeFlowResponse2(rawResponse);
+      const response = await onSubmit(payload);
       onFlowChange?.(response);
       if (response.flowStatus === EmbeddedFlowStatus.Complete) {
         onComplete?.(response);
@@ -8961,7 +8876,7 @@ var BaseSignUpContent = ({
   const errorClasses = cx21([withVendorCSSClassPrefix21("signup__error")], errorClassName);
   const messageClasses = cx21([withVendorCSSClassPrefix21("signup__messages")], messageClassName);
   const renderComponents = useCallback11(
-    (components) => renderSignUpComponents(
+    (components) => renderSignUpComponents2(
       components,
       formValues,
       touchedFields,
@@ -8990,29 +8905,14 @@ var BaseSignUpContent = ({
       handleSubmit
     ]
   );
-  const getUrlParams = () => {
-    const urlParams = new URL(window?.location?.href ?? "").searchParams;
-    return {
-      code: urlParams.get("code"),
-      state: urlParams.get("state"),
-      error: urlParams.get("error")
-    };
-  };
   useEffect14(() => {
-    if (platform === Platform5.AsgardeoV2) {
-      const urlParams = getUrlParams();
-      if (urlParams.code || urlParams.state) {
-        return;
-      }
-    }
     if (isInitialized && !isFlowInitialized && !initializationAttemptedRef.current) {
       initializationAttemptedRef.current = true;
       (async () => {
         setIsLoading(true);
         clearMessages();
         try {
-          const rawResponse = await onInitialize();
-          const response = normalizeFlowResponse2(rawResponse);
+          const response = await onInitialize();
           setCurrentFlow(response);
           setIsFlowInitialized(true);
           onFlowChange?.(response);
@@ -9039,7 +8939,6 @@ var BaseSignUpContent = ({
     onError,
     onFlowChange,
     setupFormFields,
-    normalizeFlowResponse2,
     afterSignUpUrl,
     t
   ]);
@@ -9054,8 +8953,8 @@ var BaseSignUpContent = ({
       handleInputChange,
       handleSubmit,
       validateForm,
-      title: flowTitle || t("signup.title"),
-      subtitle: flowSubtitle || t("signup.subtitle"),
+      title: flowTitle || t("signup.heading"),
+      subtitle: flowSubtitle || t("signup.subheading"),
       messages: flowMessages || []
     };
     return /* @__PURE__ */ jsx67("div", { className: containerClasses, children: children(renderProps) });
@@ -9065,14 +8964,14 @@ var BaseSignUpContent = ({
   }
   if (!currentFlow) {
     return /* @__PURE__ */ jsx67(Card_default, { className: cx21(containerClasses, styles.card), variant, children: /* @__PURE__ */ jsx67(Card_default.Content, { children: /* @__PURE__ */ jsxs28(Alert_default, { variant: "error", className: errorClasses, children: [
-      /* @__PURE__ */ jsx67(Alert_default.Title, { children: t("errors.title") }),
-      /* @__PURE__ */ jsx67(Alert_default.Description, { children: t("errors.sign.up.flow.initialization.failure") })
+      /* @__PURE__ */ jsx67(Alert_default.Title, { children: t("errors.heading") }),
+      /* @__PURE__ */ jsx67(Alert_default.Description, { children: t("errors.signup.flow.initialization.failure") })
     ] }) }) });
   }
   return /* @__PURE__ */ jsxs28(Card_default, { className: cx21(containerClasses, styles.card), variant, children: [
     (showTitle || showSubtitle) && /* @__PURE__ */ jsxs28(Card_default.Header, { className: styles.header, children: [
-      showTitle && /* @__PURE__ */ jsx67(Card_default.Title, { level: 2, className: styles.title, children: flowTitle || t("signup.title") }),
-      showSubtitle && /* @__PURE__ */ jsx67(Typography_default, { variant: "body1", className: styles.subtitle, children: flowSubtitle || t("signup.subtitle") })
+      showTitle && /* @__PURE__ */ jsx67(Card_default.Title, { level: 2, className: styles.title, children: flowTitle || t("signup.heading") }),
+      showSubtitle && /* @__PURE__ */ jsx67(Typography_default, { variant: "body1", className: styles.subtitle, children: flowSubtitle || t("signup.subheading") })
     ] }),
     /* @__PURE__ */ jsxs28(Card_default.Content, { children: [
       flowMessages && flowMessages.length > 0 && /* @__PURE__ */ jsx67("div", { className: styles.flowMessagesContainer, children: flowMessages.map((message, index) => /* @__PURE__ */ jsx67(
@@ -9084,52 +8983,535 @@ var BaseSignUpContent = ({
         },
         message.id || index
       )) }),
-      /* @__PURE__ */ jsx67("div", { className: styles.contentContainer, children: currentFlow.data?.components && currentFlow.data.components.length > 0 ? renderComponents(currentFlow.data.components) : /* @__PURE__ */ jsx67(Alert_default, { variant: "warning", children: /* @__PURE__ */ jsx67(Typography_default, { variant: "body1", children: t("errors.sign.up.components.not.available") }) }) })
+      /* @__PURE__ */ jsx67("div", { className: styles.contentContainer, children: currentFlow.data?.components && currentFlow.data.components.length > 0 ? renderComponents(currentFlow.data.components) : /* @__PURE__ */ jsx67(Alert_default, { variant: "warning", children: /* @__PURE__ */ jsx67(Typography_default, { variant: "body1", children: t("errors.signup.components.not.available") }) }) })
     ] })
   ] });
 };
 var BaseSignUp_default = BaseSignUp;
 
-// src/components/presentation/SignUp/SignUp.tsx
+// src/components/presentation/auth/SignUp/v2/BaseSignUp.tsx
 import {
+  EmbeddedFlowStatus as EmbeddedFlowStatus2,
   EmbeddedFlowResponseType as EmbeddedFlowResponseType2,
-  EmbeddedFlowType as EmbeddedFlowType2,
-  Platform as Platform6
+  withVendorCSSClassPrefix as withVendorCSSClassPrefix22,
+  EmbeddedFlowComponentTypeV2 as EmbeddedFlowComponentType4
 } from "@asgardeo/browser";
-import { jsx as jsx68 } from "react/jsx-runtime";
-var SignUp = ({
-  className,
-  size = "medium",
+import { cx as cx22 } from "@emotion/css";
+import { useEffect as useEffect15, useState as useState18, useCallback as useCallback12, useRef as useRef6 } from "react";
+import { jsx as jsx68, jsxs as jsxs29 } from "react/jsx-runtime";
+var BaseSignUp2 = ({ showLogo = true, ...rest }) => {
+  const { theme, colorScheme } = useTheme_default();
+  const styles = BaseSignUp_styles_default(theme, colorScheme);
+  return /* @__PURE__ */ jsxs29("div", { children: [
+    showLogo && /* @__PURE__ */ jsx68("div", { className: styles.logoContainer, children: /* @__PURE__ */ jsx68(Logo_default, { size: "large" }) }),
+    /* @__PURE__ */ jsx68(FlowProvider_default, { children: /* @__PURE__ */ jsx68(BaseSignUpContent2, { showLogo, ...rest }) })
+  ] });
+};
+var BaseSignUpContent2 = ({
   afterSignUpUrl,
+  onInitialize,
+  onSubmit,
   onError,
+  onFlowChange,
   onComplete,
-  shouldRedirectAfterSignUp = true,
+  className = "",
+  inputClassName = "",
+  buttonClassName = "",
+  errorClassName = "",
+  messageClassName = "",
+  size = "medium",
+  variant = "outlined",
+  isInitialized,
   children,
-  ...rest
+  showTitle = true,
+  showSubtitle = true
 }) => {
-  const { signUp, isInitialized, applicationId, platform } = useAsgardeo_default();
-  const handleInitialize = async (payload) => {
-    const urlParams = new URL(window.location.href).searchParams;
-    const applicationIdFromUrl = urlParams.get("applicationId");
-    const effectiveApplicationId = applicationId || applicationIdFromUrl;
-    const initialPayload = payload || {
-      flowType: EmbeddedFlowType2.Registration,
-      ...platform === Platform6.AsgardeoV2 && effectiveApplicationId && { applicationId: effectiveApplicationId }
-    };
-    return await signUp(initialPayload);
-  };
-  const handleOnSubmit = async (payload) => await signUp(payload);
-  const handleComplete = (response) => {
-    onComplete?.(response);
-    if (shouldRedirectAfterSignUp && response?.type !== EmbeddedFlowResponseType2.Redirection && afterSignUpUrl) {
-      window.location.href = afterSignUpUrl;
-    }
-    if (shouldRedirectAfterSignUp && response?.type === EmbeddedFlowResponseType2.Redirection && response?.data?.redirectURL && !response.data.redirectURL.includes("oauth") && // Not a social provider redirect
-    !response.data.redirectURL.includes("auth")) {
-      window.location.href = response.data.redirectURL;
-    }
+  const { theme, colorScheme } = useTheme_default();
+  const { t } = useTranslation_default();
+  const { subtitle: flowSubtitle, title: flowTitle, messages: flowMessages, addMessage, clearMessages } = useFlow_default();
+  const { platform } = useAsgardeo_default();
+  const styles = BaseSignUp_styles_default(theme, colorScheme);
+  const handleError = useCallback12(
+    (error) => {
+      const errorMessage = extractErrorMessage(error, t);
+      clearMessages();
+      addMessage({
+        type: "error",
+        message: errorMessage
+      });
+    },
+    [t, addMessage, clearMessages]
+  );
+  const [isLoading, setIsLoading] = useState18(false);
+  const [isFlowInitialized, setIsFlowInitialized] = useState18(false);
+  const [currentFlow, setCurrentFlow] = useState18(null);
+  const [formData, setFormData] = useState18({});
+  const initializationAttemptedRef = useRef6(false);
+  const normalizeFlowResponseLocal = useCallback12(
+    (response) => {
+      if (response?.data?.components && Array.isArray(response.data.components)) {
+        return response;
+      }
+      if (response?.data) {
+        try {
+          const { components } = normalizeFlowResponse(response, t, {
+            defaultErrorKey: "components.signUp.errors.generic"
+          });
+          return {
+            ...response,
+            data: {
+              ...response.data,
+              components
+            }
+          };
+        } catch (error) {
+          throw error;
+        }
+      }
+      return response;
+    },
+    [t]
+  );
+  const extractFormFields = useCallback12(
+    (components) => {
+      const fields = [];
+      const processComponents = (comps) => {
+        comps.forEach((component) => {
+          if (component.type === EmbeddedFlowComponentType4.TextInput) {
+            fields.push({
+              name: component.id,
+              required: component.required || false,
+              initialValue: "",
+              validator: (value) => {
+                if (component.required && (!value || value.trim() === "")) {
+                  return t("validations.required.field.error");
+                }
+                if (component.variant === "EMAIL" && value && !/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(value)) {
+                  return t("field.email.invalid");
+                }
+                if (component.type === "PASSWORD_INPUT" && value && value.length < 8) {
+                  return t("field.password.weak");
+                }
+                return null;
+              }
+            });
+          }
+          if (component.components && Array.isArray(component.components)) {
+            processComponents(component.components);
+          }
+        });
+      };
+      processComponents(components);
+      return fields;
+    },
+    [t]
+  );
+  const formFields = currentFlow?.data?.components ? extractFormFields(currentFlow.data.components) : [];
+  const form = useForm({
+    initialValues: {},
+    fields: formFields,
+    validateOnBlur: true,
+    validateOnChange: true,
+    requiredMessage: t("validations.required.field.error")
+  });
+  const {
+    values: formValues,
+    touched: touchedFields,
+    errors: formErrors,
+    isValid: isFormValid,
+    setValue: setFormValue,
+    setTouched: setFormTouched,
+    clearErrors: clearFormErrors,
+    validateField: validateFormField,
+    validateForm,
+    touchAllFields,
+    reset: resetForm
+  } = form;
+  const setupFormFields = useCallback12(
+    (flowResponse) => {
+      const fields = extractFormFields(flowResponse.data?.components || []);
+      const initialValues = {};
+      fields.forEach((field) => {
+        initialValues[field.name] = field.initialValue || "";
+      });
+      resetForm();
+      Object.keys(initialValues).forEach((key) => {
+        setFormValue(key, initialValues[key]);
+      });
+    },
+    [extractFormFields, resetForm, setFormValue]
+  );
+  const handleInputChange = (name, value) => {
+    setFormValue(name, value);
+    setFormTouched(name, true);
+  };
+  const handleSubmit = async (component, data) => {
+    if (!currentFlow) {
+      return;
+    }
+    setIsLoading(true);
+    clearMessages();
+    try {
+      const filteredInputs = {};
+      if (data) {
+        Object.entries(data).forEach(([key, value]) => {
+          if (value !== null && value !== void 0 && value !== "") {
+            filteredInputs[key] = value;
+          }
+        });
+      }
+      const payload = {
+        ...currentFlow.flowId && { flowId: currentFlow.flowId },
+        flowType: currentFlow.flowType || "REGISTRATION",
+        ...component.id && { action: component.id },
+        inputs: filteredInputs
+      };
+      const rawResponse = await onSubmit(payload);
+      const response = normalizeFlowResponseLocal(rawResponse);
+      onFlowChange?.(response);
+      if (response.flowStatus === EmbeddedFlowStatus2.Complete) {
+        onComplete?.(response);
+        return;
+      }
+      if (response.flowStatus === EmbeddedFlowStatus2.Incomplete) {
+        if (handleRedirectionIfNeeded(response, component)) {
+          return;
+        }
+        setCurrentFlow(response);
+        setupFormFields(response);
+      }
+    } catch (err) {
+      handleError(err);
+      onError?.(err);
+    } finally {
+      setIsLoading(false);
+    }
+  };
+  const handleRedirectionIfNeeded = (response, component) => {
+    if (response?.type === EmbeddedFlowResponseType2.Redirection && response?.data?.redirectURL) {
+      const redirectUrl = response.data.redirectURL;
+      const popup = window.open(redirectUrl, "oauth_popup", "width=500,height=600,scrollbars=yes,resizable=yes");
+      if (!popup) {
+        console.error("Failed to open popup window");
+        return false;
+      }
+      const messageHandler = async function messageEventHandler(event) {
+        if (event.source !== popup) {
+          return;
+        }
+        const expectedOrigin = afterSignUpUrl ? new URL(afterSignUpUrl).origin : window.location.origin;
+        if (event.origin !== expectedOrigin && event.origin !== window.location.origin) {
+          return;
+        }
+        const { code, state } = event.data;
+        if (code && state) {
+          const payload = {
+            ...currentFlow.flowId && { flowId: currentFlow.flowId },
+            flowType: currentFlow.flowType || "REGISTRATION",
+            inputs: {
+              code,
+              state
+            },
+            actionId: ""
+          };
+          try {
+            const continueResponse = await onSubmit(payload);
+            onFlowChange?.(continueResponse);
+            if (continueResponse.flowStatus === EmbeddedFlowStatus2.Complete) {
+              onComplete?.(continueResponse);
+            } else if (continueResponse.flowStatus === EmbeddedFlowStatus2.Incomplete) {
+              setCurrentFlow(continueResponse);
+              setupFormFields(continueResponse);
+            }
+            popup.close();
+            cleanup();
+          } catch (err) {
+            handleError(err);
+            onError?.(err);
+            popup.close();
+            cleanup();
+          }
+        }
+      };
+      const cleanup = () => {
+        window.removeEventListener("message", messageHandler);
+        if (popupMonitor) {
+          clearInterval(popupMonitor);
+        }
+      };
+      window.addEventListener("message", messageHandler);
+      let hasProcessedCallback = false;
+      const popupMonitor = setInterval(async () => {
+        try {
+          if (popup.closed) {
+            cleanup();
+            return;
+          }
+          if (hasProcessedCallback) {
+            return;
+          }
+          try {
+            const popupUrl = popup.location.href;
+            if (popupUrl && (popupUrl.includes("code=") || popupUrl.includes("error="))) {
+              hasProcessedCallback = true;
+              const url = new URL(popupUrl);
+              const code = url.searchParams.get("code");
+              const state = url.searchParams.get("state");
+              const error = url.searchParams.get("error");
+              if (error) {
+                console.error("OAuth error:", error);
+                popup.close();
+                cleanup();
+                return;
+              }
+              if (code && state) {
+                const payload = {
+                  ...currentFlow.flowId && { flowId: currentFlow.flowId },
+                  flowType: currentFlow.flowType || "REGISTRATION",
+                  inputs: {
+                    code,
+                    state
+                  },
+                  actionId: ""
+                };
+                try {
+                  const continueResponse = await onSubmit(payload);
+                  onFlowChange?.(continueResponse);
+                  if (continueResponse.flowStatus === EmbeddedFlowStatus2.Complete) {
+                    onComplete?.(continueResponse);
+                  } else if (continueResponse.flowStatus === EmbeddedFlowStatus2.Incomplete) {
+                    setCurrentFlow(continueResponse);
+                    setupFormFields(continueResponse);
+                  }
+                  popup.close();
+                } catch (err) {
+                  handleError(err);
+                  onError?.(err);
+                  popup.close();
+                }
+              }
+            }
+          } catch (e) {
+          }
+        } catch (e) {
+          console.error("Error monitoring popup:", e);
+        }
+      }, 1e3);
+      return true;
+    }
+    return false;
+  };
+  const containerClasses = cx22(
+    [
+      withVendorCSSClassPrefix22("signup"),
+      withVendorCSSClassPrefix22(`signup--${size}`),
+      withVendorCSSClassPrefix22(`signup--${variant}`)
+    ],
+    className
+  );
+  const inputClasses = cx22(
+    [
+      withVendorCSSClassPrefix22("signup__input"),
+      size === "small" && withVendorCSSClassPrefix22("signup__input--small"),
+      size === "large" && withVendorCSSClassPrefix22("signup__input--large")
+    ],
+    inputClassName
+  );
+  const buttonClasses = cx22(
+    [
+      withVendorCSSClassPrefix22("signup__button"),
+      size === "small" && withVendorCSSClassPrefix22("signup__button--small"),
+      size === "large" && withVendorCSSClassPrefix22("signup__button--large")
+    ],
+    buttonClassName
+  );
+  const errorClasses = cx22([withVendorCSSClassPrefix22("signup__error")], errorClassName);
+  const messageClasses = cx22([withVendorCSSClassPrefix22("signup__messages")], messageClassName);
+  const renderComponents = useCallback12(
+    (components) => renderSignUpComponents(
+      components,
+      formValues,
+      touchedFields,
+      formErrors,
+      isLoading,
+      isFormValid,
+      handleInputChange,
+      {
+        buttonClassName: buttonClasses,
+        inputClassName: inputClasses,
+        onSubmit: handleSubmit,
+        size,
+        variant
+      }
+    ),
+    [
+      formValues,
+      touchedFields,
+      formErrors,
+      isFormValid,
+      isLoading,
+      size,
+      variant,
+      inputClasses,
+      buttonClasses,
+      handleSubmit
+    ]
+  );
+  const getUrlParams = () => {
+    const urlParams = new URL(window?.location?.href ?? "").searchParams;
+    return {
+      code: urlParams.get("code"),
+      state: urlParams.get("state"),
+      error: urlParams.get("error")
+    };
   };
-  return /* @__PURE__ */ jsx68(
+  useEffect15(() => {
+    const urlParams = getUrlParams();
+    if (urlParams.code || urlParams.state) {
+      return;
+    }
+    if (isInitialized && !isFlowInitialized && !initializationAttemptedRef.current) {
+      initializationAttemptedRef.current = true;
+      (async () => {
+        setIsLoading(true);
+        clearMessages();
+        try {
+          const rawResponse = await onInitialize();
+          const response = normalizeFlowResponseLocal(rawResponse);
+          setCurrentFlow(response);
+          setIsFlowInitialized(true);
+          onFlowChange?.(response);
+          if (response.flowStatus === EmbeddedFlowStatus2.Complete) {
+            onComplete?.(response);
+            return;
+          }
+          if (response.flowStatus === EmbeddedFlowStatus2.Incomplete) {
+            setupFormFields(response);
+          }
+        } catch (err) {
+          handleError(err);
+          onError?.(err);
+        } finally {
+          setIsLoading(false);
+        }
+      })();
+    }
+  }, [
+    isInitialized,
+    isFlowInitialized,
+    onInitialize,
+    onComplete,
+    onError,
+    onFlowChange,
+    setupFormFields,
+    normalizeFlowResponseLocal,
+    afterSignUpUrl,
+    t
+  ]);
+  if (children) {
+    const renderProps = {
+      values: formValues,
+      errors: formErrors,
+      touched: touchedFields,
+      isValid: isFormValid,
+      isLoading,
+      components: currentFlow?.data?.components || [],
+      handleInputChange,
+      handleSubmit,
+      validateForm,
+      title: flowTitle || t("signup.heading"),
+      subtitle: flowSubtitle || t("signup.subheading"),
+      messages: flowMessages || []
+    };
+    return /* @__PURE__ */ jsx68("div", { className: containerClasses, children: children(renderProps) });
+  }
+  if (!isFlowInitialized && isLoading) {
+    return /* @__PURE__ */ jsx68(Card_default, { className: cx22(containerClasses, styles.card), variant, children: /* @__PURE__ */ jsx68(Card_default.Content, { children: /* @__PURE__ */ jsx68("div", { className: styles.loadingContainer, children: /* @__PURE__ */ jsx68(Spinner_default, { size: "medium" }) }) }) });
+  }
+  if (!currentFlow) {
+    return /* @__PURE__ */ jsx68(Card_default, { className: cx22(containerClasses, styles.card), variant, children: /* @__PURE__ */ jsx68(Card_default.Content, { children: /* @__PURE__ */ jsxs29(Alert_default, { variant: "error", className: errorClasses, children: [
+      /* @__PURE__ */ jsx68(Alert_default.Title, { children: t("errors.heading") }),
+      /* @__PURE__ */ jsx68(Alert_default.Description, { children: t("errors.signup.flow.initialization.failure") })
+    ] }) }) });
+  }
+  const componentsToRender = currentFlow.data?.components || [];
+  const { title, subtitle, componentsWithoutHeadings } = getAuthComponentHeadings_default(
+    componentsToRender,
+    flowTitle,
+    flowSubtitle,
+    t("signup.heading"),
+    t("signup.subheading")
+  );
+  return /* @__PURE__ */ jsxs29(Card_default, { className: cx22(containerClasses, styles.card), variant, children: [
+    (showTitle || showSubtitle) && /* @__PURE__ */ jsxs29(Card_default.Header, { className: styles.header, children: [
+      showTitle && /* @__PURE__ */ jsx68(Card_default.Title, { level: 2, className: styles.title, children: title }),
+      showSubtitle && /* @__PURE__ */ jsx68(Typography_default, { variant: "body1", className: styles.subtitle, children: subtitle })
+    ] }),
+    /* @__PURE__ */ jsxs29(Card_default.Content, { children: [
+      flowMessages && flowMessages.length > 0 && /* @__PURE__ */ jsx68("div", { className: styles.flowMessagesContainer, children: flowMessages.map((message, index) => /* @__PURE__ */ jsx68(
+        Alert_default,
+        {
+          variant: message.type?.toLowerCase() === "error" ? "error" : "info",
+          className: cx22(styles.flowMessageItem, messageClasses),
+          children: /* @__PURE__ */ jsx68(Alert_default.Description, { children: message.message })
+        },
+        message.id || index
+      )) }),
+      /* @__PURE__ */ jsx68("div", { className: styles.contentContainer, children: componentsWithoutHeadings && componentsWithoutHeadings.length > 0 ? renderComponents(componentsWithoutHeadings) : /* @__PURE__ */ jsx68(Alert_default, { variant: "warning", children: /* @__PURE__ */ jsx68(Typography_default, { variant: "body1", children: t("errors.signup.components.not.available") }) }) })
+    ] })
+  ] });
+};
+var BaseSignUp_default2 = BaseSignUp2;
+
+// src/components/presentation/auth/SignUp/BaseSignUp.tsx
+import { jsx as jsx69 } from "react/jsx-runtime";
+var BaseSignUp3 = (props) => {
+  const { platform } = useAsgardeo_default();
+  if (platform === Platform5.AsgardeoV2) {
+    return /* @__PURE__ */ jsx69(BaseSignUp_default2, { ...props });
+  }
+  return /* @__PURE__ */ jsx69(BaseSignUp_default, { ...props });
+};
+var BaseSignUp_default3 = BaseSignUp3;
+
+// src/components/presentation/auth/SignUp/SignUp.tsx
+import { Platform as Platform6 } from "@asgardeo/browser";
+
+// src/components/presentation/auth/SignUp/v1/SignUp.tsx
+import {
+  EmbeddedFlowResponseType as EmbeddedFlowResponseType3,
+  EmbeddedFlowType as EmbeddedFlowType2
+} from "@asgardeo/browser";
+import { jsx as jsx70 } from "react/jsx-runtime";
+var SignUp = ({
+  className,
+  size = "medium",
+  afterSignUpUrl,
+  onError,
+  onComplete,
+  shouldRedirectAfterSignUp = true,
+  children,
+  ...rest
+}) => {
+  const { signUp, isInitialized } = useAsgardeo_default();
+  const handleInitialize = async (payload) => {
+    const initialPayload = payload || {
+      flowType: EmbeddedFlowType2.Registration
+    };
+    return await signUp(initialPayload);
+  };
+  const handleOnSubmit = async (payload) => await signUp(payload);
+  const handleComplete = (response) => {
+    onComplete?.(response);
+    if (shouldRedirectAfterSignUp && response?.type !== EmbeddedFlowResponseType3.Redirection && afterSignUpUrl) {
+      window.location.href = afterSignUpUrl;
+    }
+    if (shouldRedirectAfterSignUp && response?.type === EmbeddedFlowResponseType3.Redirection && response?.data?.redirectURL && !response.data.redirectURL.includes("oauth") && // Not a social provider redirect
+    !response.data.redirectURL.includes("auth")) {
+      window.location.href = response.data.redirectURL;
+    }
+  };
+  return /* @__PURE__ */ jsx70(
     BaseSignUp_default,
     {
       afterSignUpUrl,
@@ -9142,58 +9524,128 @@ var SignUp = ({
       isInitialized,
       children,
       showLogo: true,
-      showTitle: platform === Platform6.AsgardeoV2,
-      showSubtitle: platform === Platform6.AsgardeoV2,
+      showTitle: false,
+      showSubtitle: false,
       ...rest
     }
   );
 };
 var SignUp_default = SignUp;
 
+// src/components/presentation/auth/SignUp/v2/SignUp.tsx
+import {
+  EmbeddedFlowResponseType as EmbeddedFlowResponseType4,
+  EmbeddedFlowType as EmbeddedFlowType3
+} from "@asgardeo/browser";
+import { jsx as jsx71 } from "react/jsx-runtime";
+var SignUp2 = ({
+  className,
+  size = "medium",
+  afterSignUpUrl,
+  onError,
+  onComplete,
+  shouldRedirectAfterSignUp = true,
+  children,
+  ...rest
+}) => {
+  const { signUp, isInitialized, applicationId } = useAsgardeo_default();
+  const handleInitialize = async (payload) => {
+    const urlParams = new URL(window.location.href).searchParams;
+    const applicationIdFromUrl = urlParams.get("applicationId");
+    const effectiveApplicationId = applicationId || applicationIdFromUrl;
+    const initialPayload = payload || {
+      flowType: EmbeddedFlowType3.Registration,
+      ...effectiveApplicationId && { applicationId: effectiveApplicationId }
+    };
+    return await signUp(initialPayload);
+  };
+  const handleOnSubmit = async (payload) => await signUp(payload);
+  const handleComplete = (response) => {
+    onComplete?.(response);
+    if (shouldRedirectAfterSignUp && response?.type !== EmbeddedFlowResponseType4.Redirection && afterSignUpUrl) {
+      window.location.href = afterSignUpUrl;
+    }
+    if (shouldRedirectAfterSignUp && response?.type === EmbeddedFlowResponseType4.Redirection && response?.data?.redirectURL && !response.data.redirectURL.includes("oauth") && // Not a social provider redirect
+    !response.data.redirectURL.includes("auth")) {
+      window.location.href = response.data.redirectURL;
+    }
+  };
+  return /* @__PURE__ */ jsx71(
+    BaseSignUp_default2,
+    {
+      afterSignUpUrl,
+      onInitialize: handleInitialize,
+      onSubmit: handleOnSubmit,
+      onError,
+      onComplete: handleComplete,
+      className,
+      size,
+      isInitialized,
+      children,
+      showLogo: true,
+      showTitle: true,
+      showSubtitle: true,
+      ...rest
+    }
+  );
+};
+var SignUp_default2 = SignUp2;
+
+// src/components/presentation/auth/SignUp/SignUp.tsx
+import { jsx as jsx72 } from "react/jsx-runtime";
+var SignUp3 = (props) => {
+  const { platform } = useAsgardeo_default();
+  if (platform === Platform6.AsgardeoV2) {
+    return /* @__PURE__ */ jsx72(SignUp_default2, { ...props });
+  }
+  return /* @__PURE__ */ jsx72(SignUp_default, { ...props });
+};
+var SignUp_default3 = SignUp3;
+
 // src/components/presentation/User/BaseUser.tsx
-import { Fragment as Fragment13, jsx as jsx69 } from "react/jsx-runtime";
+import { Fragment as Fragment13, jsx as jsx73 } from "react/jsx-runtime";
 var BaseUser = ({ user, children, fallback = null }) => {
   if (!user) {
-    return /* @__PURE__ */ jsx69(Fragment13, { children: fallback });
+    return /* @__PURE__ */ jsx73(Fragment13, { children: fallback });
   }
-  return /* @__PURE__ */ jsx69(Fragment13, { children: children(user) });
+  return /* @__PURE__ */ jsx73(Fragment13, { children: children(user) });
 };
 BaseUser.displayName = "BaseUser";
 var BaseUser_default = BaseUser;
 
 // src/components/presentation/User/User.tsx
-import { jsx as jsx70 } from "react/jsx-runtime";
+import { jsx as jsx74 } from "react/jsx-runtime";
 var User5 = ({ children, fallback = null }) => {
   const { user } = useAsgardeo_default();
-  return /* @__PURE__ */ jsx70(BaseUser_default, { user, fallback, children });
+  return /* @__PURE__ */ jsx74(BaseUser_default, { user, fallback, children });
 };
 User5.displayName = "User";
 var User_default = User5;
 
 // src/components/presentation/Organization/BaseOrganization.tsx
-import { Fragment as Fragment14, jsx as jsx71 } from "react/jsx-runtime";
+import { Fragment as Fragment14, jsx as jsx75 } from "react/jsx-runtime";
 var BaseOrganization = ({ children, fallback = null, organization }) => {
   if (!organization) {
-    return /* @__PURE__ */ jsx71(Fragment14, { children: fallback });
+    return /* @__PURE__ */ jsx75(Fragment14, { children: fallback });
   }
-  return /* @__PURE__ */ jsx71(Fragment14, { children: children(organization) });
+  return /* @__PURE__ */ jsx75(Fragment14, { children: children(organization) });
 };
 BaseOrganization.displayName = "BaseOrganization";
 var BaseOrganization_default = BaseOrganization;
 
 // src/components/presentation/Organization/Organization.tsx
-import { jsx as jsx72 } from "react/jsx-runtime";
+import { jsx as jsx76 } from "react/jsx-runtime";
 var Organization5 = ({ children, fallback = null }) => {
   const { currentOrganization } = useOrganization_default();
-  return /* @__PURE__ */ jsx72(BaseOrganization_default, { organization: currentOrganization, fallback, children });
+  return /* @__PURE__ */ jsx76(BaseOrganization_default, { organization: currentOrganization, fallback, children });
 };
 Organization5.displayName = "Organization";
 var Organization_default = Organization5;
 
 // src/components/presentation/UserProfile/BaseUserProfile.tsx
-import { withVendorCSSClassPrefix as withVendorCSSClassPrefix26, WellKnownSchemaIds, bem as bem19 } from "@asgardeo/browser";
-import { cx as cx25 } from "@emotion/css";
-import { useState as useState19, useCallback as useCallback13 } from "react";
+import { withVendorCSSClassPrefix as withVendorCSSClassPrefix27, WellKnownSchemaIds, bem as bem19 } from "@asgardeo/browser";
+import { cx as cx26 } from "@emotion/css";
+import { useState as useState20, useCallback as useCallback14 } from "react";
 
 // src/utils/getMappedUserProfileValue.ts
 import { get } from "@asgardeo/browser";
@@ -9219,8 +9671,8 @@ var getMappedUserProfileValue = (key, mappings, user) => {
 var getMappedUserProfileValue_default = getMappedUserProfileValue;
 
 // src/components/primitives/Avatar/Avatar.tsx
-import { withVendorCSSClassPrefix as withVendorCSSClassPrefix22, bem as bem16 } from "@asgardeo/browser";
-import { cx as cx22 } from "@emotion/css";
+import { withVendorCSSClassPrefix as withVendorCSSClassPrefix23, bem as bem16 } from "@asgardeo/browser";
+import { cx as cx23 } from "@emotion/css";
 import { useMemo as useMemo26 } from "react";
 
 // src/components/primitives/Avatar/Avatar.styles.ts
@@ -9291,7 +9743,7 @@ var useStyles18 = (theme, colorScheme, size, variant, backgroundColor) => {
 var Avatar_styles_default = useStyles18;
 
 // src/components/primitives/Avatar/Avatar.tsx
-import { jsx as jsx73 } from "react/jsx-runtime";
+import { jsx as jsx77 } from "react/jsx-runtime";
 var Avatar = ({
   alt = "User avatar",
   background = "random",
@@ -9338,33 +9790,33 @@ var Avatar = ({
   const getInitials = (fullName) => fullName.split(" ").map((part) => part[0]).slice(0, 2).join("").toUpperCase();
   const renderContent = () => {
     if (imageUrl) {
-      return /* @__PURE__ */ jsx73("img", { src: imageUrl, alt, className: cx22(withVendorCSSClassPrefix22(bem16("avatar", "image")), styles.image) });
+      return /* @__PURE__ */ jsx77("img", { src: imageUrl, alt, className: cx23(withVendorCSSClassPrefix23(bem16("avatar", "image")), styles.image) });
     }
     if (name) {
       return getInitials(name);
     }
     if (isLoading) {
-      return /* @__PURE__ */ jsx73("div", { className: cx22(withVendorCSSClassPrefix22(bem16("avatar", "skeleton")), styles.skeleton) });
+      return /* @__PURE__ */ jsx77("div", { className: cx23(withVendorCSSClassPrefix23(bem16("avatar", "skeleton")), styles.skeleton) });
     }
-    return /* @__PURE__ */ jsx73(
+    return /* @__PURE__ */ jsx77(
       "svg",
       {
         xmlns: "http://www.w3.org/2000/svg",
         viewBox: "0 0 640 640",
-        className: cx22(withVendorCSSClassPrefix22(bem16("avatar", "icon")), styles.icon),
-        children: /* @__PURE__ */ jsx73("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" })
+        className: cx23(withVendorCSSClassPrefix23(bem16("avatar", "icon")), styles.icon),
+        children: /* @__PURE__ */ jsx77("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__ */ jsx73(
+  return /* @__PURE__ */ jsx77(
     "div",
     {
-      className: cx22(
-        withVendorCSSClassPrefix22(bem16("avatar")),
+      className: cx23(
+        withVendorCSSClassPrefix23(bem16("avatar")),
         styles.avatar,
         styles.variant,
-        withVendorCSSClassPrefix22(bem16("avatar", null, variant)),
-        isDefaultState && withVendorCSSClassPrefix22(bem16("avatar", "default")),
+        withVendorCSSClassPrefix23(bem16("avatar", null, variant)),
+        isDefaultState && withVendorCSSClassPrefix23(bem16("avatar", "default")),
         className
       ),
       children: renderContent()
@@ -9374,7 +9826,7 @@ var Avatar = ({
 var Avatar_default = Avatar;
 
 // src/components/primitives/Dialog/Dialog.tsx
-import { withVendorCSSClassPrefix as withVendorCSSClassPrefix23, bem as bem17 } from "@asgardeo/browser";
+import { withVendorCSSClassPrefix as withVendorCSSClassPrefix24, bem as bem17 } from "@asgardeo/browser";
 import {
   useFloating,
   useClick,
@@ -9387,12 +9839,12 @@ import {
   FloatingPortal,
   useId
 } from "@floating-ui/react";
-import { cx as cx23 } from "@emotion/css";
+import { cx as cx24 } from "@emotion/css";
 import React2 from "react";
 
 // src/components/primitives/Icons/LogOut.tsx
-import { jsx as jsx74, jsxs as jsxs29 } from "react/jsx-runtime";
-var LogOut = (props) => /* @__PURE__ */ jsxs29(
+import { jsx as jsx78, jsxs as jsxs30 } from "react/jsx-runtime";
+var LogOut = (props) => /* @__PURE__ */ jsxs30(
   "svg",
   {
     xmlns: "http://www.w3.org/2000/svg",
@@ -9406,17 +9858,17 @@ var LogOut = (props) => /* @__PURE__ */ jsxs29(
     strokeLinejoin: "round",
     ...props,
     children: [
-      /* @__PURE__ */ jsx74("path", { d: "m16 17 5-5-5-5" }),
-      /* @__PURE__ */ jsx74("path", { d: "M21 12H9" }),
-      /* @__PURE__ */ jsx74("path", { d: "M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4" })
+      /* @__PURE__ */ jsx78("path", { d: "m16 17 5-5-5-5" }),
+      /* @__PURE__ */ jsx78("path", { d: "M21 12H9" }),
+      /* @__PURE__ */ jsx78("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 jsx75, jsxs as jsxs30 } from "react/jsx-runtime";
-var Plus = (props) => /* @__PURE__ */ jsxs30(
+import { jsx as jsx79, jsxs as jsxs31 } from "react/jsx-runtime";
+var Plus = (props) => /* @__PURE__ */ jsxs31(
   "svg",
   {
     xmlns: "http://www.w3.org/2000/svg",
@@ -9430,16 +9882,16 @@ var Plus = (props) => /* @__PURE__ */ jsxs30(
     strokeLinejoin: "round",
     ...props,
     children: [
-      /* @__PURE__ */ jsx75("path", { d: "M5 12h14" }),
-      /* @__PURE__ */ jsx75("path", { d: "M12 5v14" })
+      /* @__PURE__ */ jsx79("path", { d: "M5 12h14" }),
+      /* @__PURE__ */ jsx79("path", { d: "M12 5v14" })
     ]
   }
 );
 var Plus_default = Plus;
 
 // src/components/primitives/Icons/User.tsx
-import { jsx as jsx76, jsxs as jsxs31 } from "react/jsx-runtime";
-var User7 = (props) => /* @__PURE__ */ jsxs31(
+import { jsx as jsx80, jsxs as jsxs32 } from "react/jsx-runtime";
+var User7 = (props) => /* @__PURE__ */ jsxs32(
   "svg",
   {
     xmlns: "http://www.w3.org/2000/svg",
@@ -9453,16 +9905,16 @@ var User7 = (props) => /* @__PURE__ */ jsxs31(
     strokeLinejoin: "round",
     ...props,
     children: [
-      /* @__PURE__ */ jsx76("path", { d: "M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2" }),
-      /* @__PURE__ */ jsx76("circle", { cx: "12", cy: "7", r: "4" })
+      /* @__PURE__ */ jsx80("path", { d: "M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2" }),
+      /* @__PURE__ */ jsx80("circle", { cx: "12", cy: "7", r: "4" })
     ]
   }
 );
 var User_default2 = User7;
 
 // src/components/primitives/Icons/X.tsx
-import { jsx as jsx77, jsxs as jsxs32 } from "react/jsx-runtime";
-var X = (props) => /* @__PURE__ */ jsxs32(
+import { jsx as jsx81, jsxs as jsxs33 } from "react/jsx-runtime";
+var X = (props) => /* @__PURE__ */ jsxs33(
   "svg",
   {
     xmlns: "http://www.w3.org/2000/svg",
@@ -9476,8 +9928,8 @@ var X = (props) => /* @__PURE__ */ jsxs32(
     strokeLinejoin: "round",
     ...props,
     children: [
-      /* @__PURE__ */ jsx77("path", { d: "M18 6 6 18" }),
-      /* @__PURE__ */ jsx77("path", { d: "m6 6 12 12" })
+      /* @__PURE__ */ jsx81("path", { d: "M18 6 6 18" }),
+      /* @__PURE__ */ jsx81("path", { d: "m6 6 12 12" })
     ]
   }
 );
@@ -9549,7 +10001,7 @@ var useStyles19 = (theme, colorScheme) => {
 var Dialog_styles_default = useStyles19;
 
 // src/components/primitives/Dialog/Dialog.tsx
-import { jsx as jsx78, jsxs as jsxs33 } from "react/jsx-runtime";
+import { jsx as jsx82, jsxs as jsxs34 } from "react/jsx-runtime";
 function useDialog({
   initialOpen = false,
   open: controlledOpen,
@@ -9595,7 +10047,7 @@ var useDialogContext = () => {
 };
 function Dialog({ children, ...options }) {
   const dialog = useDialog(options);
-  return /* @__PURE__ */ jsx78(DialogContext.Provider, { value: dialog, children });
+  return /* @__PURE__ */ jsx82(DialogContext.Provider, { value: dialog, children });
 }
 var DialogTrigger = React2.forwardRef(
   ({ children, asChild = false, ...props }, propRef) => {
@@ -9613,7 +10065,7 @@ var DialogTrigger = React2.forwardRef(
         })
       );
     }
-    return /* @__PURE__ */ jsx78("button", { ref, "data-state": context.open ? "open" : "closed", ...context.getReferenceProps(props), children });
+    return /* @__PURE__ */ jsx82("button", { ref, "data-state": context.open ? "open" : "closed", ...context.getReferenceProps(props), children });
   }
 );
 var DialogContent = React2.forwardRef((props, propRef) => {
@@ -9622,11 +10074,11 @@ var DialogContent = React2.forwardRef((props, propRef) => {
   const styles = Dialog_styles_default(theme, colorScheme);
   const ref = useMergeRefs([context.refs.setFloating, propRef]);
   if (!floatingContext.open) return null;
-  return /* @__PURE__ */ jsx78(FloatingPortal, { children: /* @__PURE__ */ jsx78(FloatingOverlay, { className: cx23(withVendorCSSClassPrefix23(bem17("dialog", "overlay")), styles.overlay), lockScroll: true, children: /* @__PURE__ */ jsx78(FloatingFocusManager, { context: floatingContext, initialFocus: -1, children: /* @__PURE__ */ jsx78(
+  return /* @__PURE__ */ jsx82(FloatingPortal, { children: /* @__PURE__ */ jsx82(FloatingOverlay, { className: cx24(withVendorCSSClassPrefix24(bem17("dialog", "overlay")), styles.overlay), lockScroll: true, children: /* @__PURE__ */ jsx82(FloatingFocusManager, { context: floatingContext, initialFocus: -1, children: /* @__PURE__ */ jsx82(
     "div",
     {
       ref,
-      className: cx23(withVendorCSSClassPrefix23(bem17("dialog", "content")), styles.content, props.className),
+      className: cx24(withVendorCSSClassPrefix24(bem17("dialog", "content")), styles.content, props.className),
       "aria-labelledby": context.labelId,
       "aria-describedby": context.descriptionId,
       ...context.getFloatingProps(props),
@@ -9644,18 +10096,18 @@ var DialogHeading = React2.forwardRef(
       context.setLabelId(id);
       return () => context.setLabelId(void 0);
     }, [id, context.setLabelId]);
-    return /* @__PURE__ */ jsxs33("div", { className: cx23(withVendorCSSClassPrefix23(bem17("dialog", "header")), styles.header), children: [
-      /* @__PURE__ */ jsx78(
+    return /* @__PURE__ */ jsxs34("div", { className: cx24(withVendorCSSClassPrefix24(bem17("dialog", "header")), styles.header), children: [
+      /* @__PURE__ */ jsx82(
         "h2",
         {
           ...props,
           ref,
           id,
-          className: cx23(withVendorCSSClassPrefix23(bem17("dialog", "title")), styles.headerTitle),
+          className: cx24(withVendorCSSClassPrefix24(bem17("dialog", "title")), styles.headerTitle),
           children
         }
       ),
-      /* @__PURE__ */ jsx78(
+      /* @__PURE__ */ jsx82(
         Button_default,
         {
           color: "tertiary",
@@ -9664,7 +10116,7 @@ var DialogHeading = React2.forwardRef(
           shape: "round",
           onClick: () => context.setOpen(false),
           "aria-label": "Close",
-          children: /* @__PURE__ */ jsx78(X_default, { width: 16, height: 16 })
+          children: /* @__PURE__ */ jsx82(X_default, { width: 16, height: 16 })
         }
       )
     ] });
@@ -9680,13 +10132,13 @@ var DialogDescription = React2.forwardRef(
       context.setDescriptionId(id);
       return () => context.setDescriptionId(void 0);
     }, [id, context.setDescriptionId]);
-    return /* @__PURE__ */ jsx78(
+    return /* @__PURE__ */ jsx82(
       "p",
       {
         ...props,
         ref,
         id,
-        className: cx23(withVendorCSSClassPrefix23(bem17("dialog", "description")), styles.description, props.className),
+        className: cx24(withVendorCSSClassPrefix24(bem17("dialog", "description")), styles.description, props.className),
         children
       }
     );
@@ -9710,13 +10162,13 @@ var DialogClose = React2.forwardRef(({ children, asChild = false, ...props }, pr
       onClick: handleClick
     });
   }
-  return /* @__PURE__ */ jsx78(
+  return /* @__PURE__ */ jsx82(
     Button_default,
     {
       ...props,
       ref,
       onClick: handleClick,
-      className: cx23(withVendorCSSClassPrefix23(bem17("dialog", "close")), props.className),
+      className: cx24(withVendorCSSClassPrefix24(bem17("dialog", "close")), props.className),
       variant: "text",
       children
     }
@@ -9735,9 +10187,9 @@ Dialog.Close = DialogClose;
 var Dialog_default = Dialog;
 
 // src/components/primitives/MultiInput/MultiInput.tsx
-import { useCallback as useCallback12, useState as useState18 } from "react";
-import { cx as cx24 } from "@emotion/css";
-import { withVendorCSSClassPrefix as withVendorCSSClassPrefix24, bem as bem18 } from "@asgardeo/browser";
+import { useCallback as useCallback13, useState as useState19 } from "react";
+import { cx as cx25 } from "@emotion/css";
+import { withVendorCSSClassPrefix as withVendorCSSClassPrefix25, bem as bem18 } from "@asgardeo/browser";
 
 // src/components/primitives/MultiInput/MultiInput.styles.ts
 import { css as css20 } from "@emotion/css";
@@ -9833,7 +10285,7 @@ var useStyles20 = (theme, colorScheme, disabled, hasError, canAddMore, canRemove
 var MultiInput_styles_default = useStyles20;
 
 // src/components/primitives/MultiInput/MultiInput.tsx
-import { jsx as jsx79, jsxs as jsxs34 } from "react/jsx-runtime";
+import { jsx as jsx83, jsxs as jsxs35 } from "react/jsx-runtime";
 var MultiInput = ({
   label,
   error,
@@ -9856,9 +10308,9 @@ 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__ */ jsx79("svg", { width: "16", height: "16", viewBox: "0 0 24 24", className: cx24(styles.icon, className2), children: /* @__PURE__ */ jsx79("path", { d: "M12 5v14M5 12h14" }) });
-  const BinIcon = ({ className: className2 }) => /* @__PURE__ */ jsx79("svg", { width: "16", height: "16", viewBox: "0 0 24 24", className: cx24(styles.icon, className2), children: /* @__PURE__ */ jsx79("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 = useCallback12(
+  const PlusIcon = ({ className: className2 }) => /* @__PURE__ */ jsx83("svg", { width: "16", height: "16", viewBox: "0 0 24 24", className: cx25(styles.icon, className2), children: /* @__PURE__ */ jsx83("path", { d: "M12 5v14M5 12h14" }) });
+  const BinIcon = ({ className: className2 }) => /* @__PURE__ */ jsx83("svg", { width: "16", height: "16", viewBox: "0 0 24 24", className: cx25(styles.icon, className2), children: /* @__PURE__ */ jsx83("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 = useCallback13(
     (newValue) => {
       if (newValue.trim() !== "" && (!maxFields || values.length < maxFields)) {
         onChange([...values, newValue.trim()]);
@@ -9866,7 +10318,7 @@ var MultiInput = ({
     },
     [values, onChange, maxFields]
   );
-  const handleRemoveValue = useCallback12(
+  const handleRemoveValue = useCallback13(
     (index) => {
       if (values.length > minFields) {
         const updatedValues = values.filter((_, i) => i !== index);
@@ -9875,7 +10327,7 @@ var MultiInput = ({
     },
     [values, onChange, minFields]
   );
-  const renderInputField = useCallback12(
+  const renderInputField = useCallback13(
     (value, onValueChange, attachedEndIcon, onEndIconClick) => {
       const handleInputChange = (e) => {
         const newValue = e.target ? e.target.value : e;
@@ -9901,9 +10353,9 @@ var MultiInput = ({
       };
       switch (fieldType) {
         case "DATE_TIME":
-          return /* @__PURE__ */ jsx79(DatePicker_default, { ...commonProps });
+          return /* @__PURE__ */ jsx83(DatePicker_default, { ...commonProps });
         case "BOOLEAN":
-          return /* @__PURE__ */ jsx79(
+          return /* @__PURE__ */ jsx83(
             Checkbox_default,
             {
               ...commonProps,
@@ -9912,55 +10364,55 @@ var MultiInput = ({
             }
           );
         default:
-          return /* @__PURE__ */ jsx79(TextField_default, { ...commonProps, type });
+          return /* @__PURE__ */ jsx83(TextField_default, { ...commonProps, type });
       }
     },
     [placeholder, disabled, startIcon, endIcon, error, fieldType, type]
   );
-  const [currentInputValue, setCurrentInputValue] = useState18("");
-  const handleInputSubmit = useCallback12(() => {
+  const [currentInputValue, setCurrentInputValue] = useState19("");
+  const handleInputSubmit = useCallback13(() => {
     if (currentInputValue.trim() !== "") {
       handleAddValue(currentInputValue);
       setCurrentInputValue("");
     }
   }, [currentInputValue, handleAddValue]);
-  return /* @__PURE__ */ jsxs34(
+  return /* @__PURE__ */ jsxs35(
     FormControl_default,
     {
       error,
       helperText,
-      className: cx24(withVendorCSSClassPrefix24(bem18("multi-input")), className),
+      className: cx25(withVendorCSSClassPrefix25(bem18("multi-input")), className),
       style,
       children: [
-        label && /* @__PURE__ */ jsx79(InputLabel_default, { required, error: !!error, children: label }),
-        /* @__PURE__ */ jsxs34("div", { className: cx24(withVendorCSSClassPrefix24(bem18("multi-input", "container")), styles.container), children: [
-          /* @__PURE__ */ jsx79("div", { className: cx24(withVendorCSSClassPrefix24(bem18("multi-input", "input-row")), styles.inputRow), children: /* @__PURE__ */ jsx79("div", { className: cx24(withVendorCSSClassPrefix24(bem18("multi-input", "input-wrapper")), styles.inputWrapper), children: renderInputField(
+        label && /* @__PURE__ */ jsx83(InputLabel_default, { required, error: !!error, children: label }),
+        /* @__PURE__ */ jsxs35("div", { className: cx25(withVendorCSSClassPrefix25(bem18("multi-input", "container")), styles.container), children: [
+          /* @__PURE__ */ jsx83("div", { className: cx25(withVendorCSSClassPrefix25(bem18("multi-input", "input-row")), styles.inputRow), children: /* @__PURE__ */ jsx83("div", { className: cx25(withVendorCSSClassPrefix25(bem18("multi-input", "input-wrapper")), styles.inputWrapper), children: renderInputField(
             currentInputValue,
             setCurrentInputValue,
-            canAddMore ? /* @__PURE__ */ jsx79(PlusIcon, { className: styles.plusIcon }) : void 0,
+            canAddMore ? /* @__PURE__ */ jsx83(PlusIcon, { className: styles.plusIcon }) : void 0,
             canAddMore ? handleInputSubmit : void 0
           ) }) }),
-          values.length > 0 && /* @__PURE__ */ jsx79("div", { className: cx24(withVendorCSSClassPrefix24(bem18("multi-input", "list-container")), styles.listContainer), children: values.map((value, index) => /* @__PURE__ */ jsxs34(
+          values.length > 0 && /* @__PURE__ */ jsx83("div", { className: cx25(withVendorCSSClassPrefix25(bem18("multi-input", "list-container")), styles.listContainer), children: values.map((value, index) => /* @__PURE__ */ jsxs35(
             "div",
             {
-              className: cx24(withVendorCSSClassPrefix24(bem18("multi-input", "list-item")), styles.listItem),
+              className: cx25(withVendorCSSClassPrefix25(bem18("multi-input", "list-item")), styles.listItem),
               children: [
-                /* @__PURE__ */ jsx79(
+                /* @__PURE__ */ jsx83(
                   "span",
                   {
-                    className: cx24(withVendorCSSClassPrefix24(bem18("multi-input", "list-item-text")), styles.listItemText),
+                    className: cx25(withVendorCSSClassPrefix25(bem18("multi-input", "list-item-text")), styles.listItemText),
                     children: value
                   }
                 ),
-                canRemove && /* @__PURE__ */ jsx79(
+                canRemove && /* @__PURE__ */ jsx83(
                   "button",
                   {
                     type: "button",
                     onClick: () => handleRemoveValue(index),
                     disabled,
-                    className: cx24(withVendorCSSClassPrefix24(bem18("multi-input", "remove-button")), styles.removeButton),
+                    className: cx25(withVendorCSSClassPrefix25(bem18("multi-input", "remove-button")), styles.removeButton),
                     title: "Remove value",
-                    children: /* @__PURE__ */ jsx79(BinIcon, { className: styles.icon })
+                    children: /* @__PURE__ */ jsx83(BinIcon, { className: styles.icon })
                   }
                 )
               ]
@@ -9977,7 +10429,7 @@ var MultiInput_default = MultiInput;
 // src/components/presentation/UserProfile/BaseUserProfile.styles.ts
 import { css as css21 } from "@emotion/css";
 import { useMemo as useMemo29 } from "react";
-import { withVendorCSSClassPrefix as withVendorCSSClassPrefix25 } from "@asgardeo/browser";
+import { withVendorCSSClassPrefix as withVendorCSSClassPrefix26 } from "@asgardeo/browser";
 var useStyles21 = (theme, colorScheme) => {
   const valuePlaceholder = css21`
     font-style: italic;
@@ -10088,7 +10540,7 @@ var useStyles21 = (theme, colorScheme) => {
       max-width: 350px;
       text-align: start;
 
-      .${withVendorCSSClassPrefix25("form-control")} {
+      .${withVendorCSSClassPrefix26("form-control")} {
         margin-bottom: 0;
       }
 
@@ -10159,7 +10611,7 @@ var getDisplayName = (mergedMappings, user) => {
 var getDisplayName_default = getDisplayName;
 
 // src/components/presentation/UserProfile/BaseUserProfile.tsx
-import { Fragment as Fragment15, jsx as jsx80, jsxs as jsxs35 } from "react/jsx-runtime";
+import { Fragment as Fragment15, jsx as jsx84, jsxs as jsxs36 } from "react/jsx-runtime";
 var fieldsToSkip = [
   "roles.default",
   "active",
@@ -10201,10 +10653,10 @@ var BaseUserProfile = ({
   hideFields = []
 }) => {
   const { theme, colorScheme } = useTheme_default();
-  const [editedUser, setEditedUser] = useState19(flattenedProfile || profile);
-  const [editingFields, setEditingFields] = useState19({});
+  const [editedUser, setEditedUser] = useState20(flattenedProfile || profile);
+  const [editingFields, setEditingFields] = useState20({});
   const { t } = useTranslation_default();
-  const shouldShowField = useCallback13(
+  const shouldShowField = useCallback14(
     (fieldName) => {
       if (fieldsToSkip.includes(fieldName)) {
         return false;
@@ -10219,7 +10671,7 @@ var BaseUserProfile = ({
     },
     [showFields, hideFields]
   );
-  const PencilIcon = () => /* @__PURE__ */ jsx80(
+  const PencilIcon = () => /* @__PURE__ */ jsx84(
     "svg",
     {
       width: "16",
@@ -10230,16 +10682,16 @@ var BaseUserProfile = ({
       strokeWidth: "2",
       strokeLinecap: "round",
       strokeLinejoin: "round",
-      children: /* @__PURE__ */ jsx80("path", { d: "M17 3a2.828 2.828 0 1 1 4 4L7.5 20.5 2 22l1.5-5.5L17 3z" })
+      children: /* @__PURE__ */ jsx84("path", { d: "M17 3a2.828 2.828 0 1 1 4 4L7.5 20.5 2 22l1.5-5.5L17 3z" })
     }
   );
-  const toggleFieldEdit = useCallback13((fieldName) => {
+  const toggleFieldEdit = useCallback14((fieldName) => {
     setEditingFields((prev) => ({
       ...prev,
       [fieldName]: !prev[fieldName]
     }));
   }, []);
-  const getFieldPlaceholder = useCallback13((schema) => {
+  const getFieldPlaceholder = useCallback14((schema) => {
     const { type, displayName, description, name } = schema;
     const fieldLabel = displayName || description || name || "value";
     switch (type) {
@@ -10255,12 +10707,12 @@ var BaseUserProfile = ({
   }, []);
   const ObjectDisplay = ({ data }) => {
     if (!data || typeof data !== "object") return null;
-    return /* @__PURE__ */ jsx80("table", { className: styles.value, children: /* @__PURE__ */ jsx80("tbody", { children: Object.entries(data).map(([key, value]) => /* @__PURE__ */ jsxs35("tr", { children: [
-      /* @__PURE__ */ jsx80("td", { className: styles.objectKey, children: /* @__PURE__ */ jsxs35("strong", { children: [
+    return /* @__PURE__ */ jsx84("table", { className: styles.value, children: /* @__PURE__ */ jsx84("tbody", { children: Object.entries(data).map(([key, value]) => /* @__PURE__ */ jsxs36("tr", { children: [
+      /* @__PURE__ */ jsx84("td", { className: styles.objectKey, children: /* @__PURE__ */ jsxs36("strong", { children: [
         formatLabel(key),
         ":"
       ] }) }),
-      /* @__PURE__ */ jsx80("td", { className: styles.objectValue, children: typeof value === "object" ? /* @__PURE__ */ jsx80(ObjectDisplay, { data: value }) : String(value) })
+      /* @__PURE__ */ jsx84("td", { className: styles.objectValue, children: typeof value === "object" ? /* @__PURE__ */ jsx84(ObjectDisplay, { data: value }) : String(value) })
     ] }, key)) }) });
   };
   function set(obj, path, value) {
@@ -10278,7 +10730,7 @@ var BaseUserProfile = ({
       }
     }
   }
-  const handleFieldSave = useCallback13(
+  const handleFieldSave = useCallback14(
     (schema) => {
       if (!onUpdate || !schema.name) return;
       const fieldName = schema.name;
@@ -10301,7 +10753,7 @@ var BaseUserProfile = ({
     },
     [editedUser, flattenedProfile, onUpdate, toggleFieldEdit]
   );
-  const handleFieldCancel = useCallback13(
+  const handleFieldCancel = useCallback14(
     (fieldName) => {
       const currentUser2 = flattenedProfile || profile;
       setEditedUser((prev) => ({
@@ -10312,7 +10764,7 @@ var BaseUserProfile = ({
     },
     [flattenedProfile, profile, toggleFieldEdit]
   );
-  const formatLabel = useCallback13(
+  const formatLabel = useCallback14(
     (key) => key.split(/(?=[A-Z])|_/).map((word) => word.charAt(0).toUpperCase() + word.slice(1).toLowerCase()).join(" "),
     []
   );
@@ -10333,9 +10785,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__ */ jsx80(Fragment15, { children: subAttributes.map((subAttr, index) => /* @__PURE__ */ jsxs35("div", { className: styles.field, children: [
-        /* @__PURE__ */ jsx80("span", { className: styles.label, children: subAttr.displayName || subAttr.description || "" }),
-        /* @__PURE__ */ jsx80("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__ */ jsx84(Fragment15, { children: subAttributes.map((subAttr, index) => /* @__PURE__ */ jsxs36("div", { className: styles.field, children: [
+        /* @__PURE__ */ jsx84("span", { className: styles.label, children: subAttr.displayName || subAttr.description || "" }),
+        /* @__PURE__ */ jsx84("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) {
@@ -10351,9 +10803,9 @@ var BaseUserProfile = ({
         } else {
           fieldValues = [];
         }
-        return /* @__PURE__ */ jsxs35(Fragment15, { children: [
-          /* @__PURE__ */ jsx80("span", { className: styles.label, children: label }),
-          /* @__PURE__ */ jsx80("div", { className: styles.value, children: /* @__PURE__ */ jsx80(
+        return /* @__PURE__ */ jsxs36(Fragment15, { children: [
+          /* @__PURE__ */ jsx84("span", { className: styles.label, children: label }),
+          /* @__PURE__ */ jsx84("div", { className: styles.value, children: /* @__PURE__ */ jsx84(
             MultiInput_default,
             {
               values: fieldValues,
@@ -10384,9 +10836,9 @@ var BaseUserProfile = ({
       } else {
         displayValue2 = "-";
       }
-      return /* @__PURE__ */ jsxs35(Fragment15, { children: [
-        /* @__PURE__ */ jsx80("span", { className: styles.label, children: label }),
-        /* @__PURE__ */ jsx80("div", { className: cx25(styles.value, !hasValues ? styles.valuePlaceholder : ""), children: !hasValues && isEditable2 && onStartEdit ? /* @__PURE__ */ jsx80(
+      return /* @__PURE__ */ jsxs36(Fragment15, { children: [
+        /* @__PURE__ */ jsx84("span", { className: styles.label, children: label }),
+        /* @__PURE__ */ jsx84("div", { className: cx26(styles.value, !hasValues ? styles.valuePlaceholder : ""), children: !hasValues && isEditable2 && onStartEdit ? /* @__PURE__ */ jsx84(
           Button_default,
           {
             onClick: onStartEdit,
@@ -10401,7 +10853,7 @@ var BaseUserProfile = ({
       ] });
     }
     if (type === "COMPLEX" && typeof value === "object") {
-      return /* @__PURE__ */ jsx80(ObjectDisplay, { data: value });
+      return /* @__PURE__ */ jsx84(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 || "";
@@ -10416,16 +10868,16 @@ var BaseUserProfile = ({
       let field;
       switch (type) {
         case "STRING":
-          field = /* @__PURE__ */ jsx80(TextField_default, { ...commonProps });
+          field = /* @__PURE__ */ jsx84(TextField_default, { ...commonProps });
           break;
         case "DATE_TIME":
-          field = /* @__PURE__ */ jsx80(DatePicker_default, { ...commonProps });
+          field = /* @__PURE__ */ jsx84(DatePicker_default, { ...commonProps });
           break;
         case "BOOLEAN":
-          field = /* @__PURE__ */ jsx80(Checkbox_default, { ...commonProps, checked: !!fieldValue, onChange: (e) => onEditValue(e.target.checked) });
+          field = /* @__PURE__ */ jsx84(Checkbox_default, { ...commonProps, checked: !!fieldValue, onChange: (e) => onEditValue(e.target.checked) });
           break;
         case "COMPLEX":
-          field = /* @__PURE__ */ jsx80(
+          field = /* @__PURE__ */ jsx84(
             "textarea",
             {
               value: fieldValue,
@@ -10437,11 +10889,11 @@ var BaseUserProfile = ({
           );
           break;
         default:
-          field = /* @__PURE__ */ jsx80(TextField_default, { ...commonProps });
+          field = /* @__PURE__ */ jsx84(TextField_default, { ...commonProps });
       }
-      return /* @__PURE__ */ jsxs35(Fragment15, { children: [
-        /* @__PURE__ */ jsx80("span", { className: styles.label, children: label }),
-        /* @__PURE__ */ jsx80("div", { className: styles.value, children: field })
+      return /* @__PURE__ */ jsxs36(Fragment15, { children: [
+        /* @__PURE__ */ jsx84("span", { className: styles.label, children: label }),
+        /* @__PURE__ */ jsx84("div", { className: styles.value, children: field })
       ] });
     }
     const hasValue = value !== void 0 && value !== null && value !== "";
@@ -10454,9 +10906,9 @@ var BaseUserProfile = ({
     } else {
       displayValue = "-";
     }
-    return /* @__PURE__ */ jsxs35(Fragment15, { children: [
-      /* @__PURE__ */ jsx80("span", { className: styles.label, children: label }),
-      /* @__PURE__ */ jsx80("div", { className: cx25(styles.value, !hasValue ? styles.valuePlaceholder : ""), children: !hasValue && isEditable && onStartEdit ? /* @__PURE__ */ jsx80(
+    return /* @__PURE__ */ jsxs36(Fragment15, { children: [
+      /* @__PURE__ */ jsx84("span", { className: styles.label, children: label }),
+      /* @__PURE__ */ jsx84("div", { className: cx26(styles.value, !hasValue ? styles.valuePlaceholder : ""), children: !hasValue && isEditable && onStartEdit ? /* @__PURE__ */ jsx84(
         Button_default,
         {
           onClick: onStartEdit,
@@ -10484,8 +10936,8 @@ var BaseUserProfile = ({
       alignItems: "center",
       gap: theme.vars.spacing.unit
     };
-    return /* @__PURE__ */ jsxs35("div", { className: styles.field, children: [
-      /* @__PURE__ */ jsx80("div", { className: styles.fieldInner, children: renderSchemaField(
+    return /* @__PURE__ */ jsxs36("div", { className: styles.field, children: [
+      /* @__PURE__ */ jsx84("div", { className: styles.fieldInner, children: renderSchemaField(
         schema,
         isFieldEditing,
         (value) => {
@@ -10495,12 +10947,12 @@ var BaseUserProfile = ({
         },
         () => toggleFieldEdit(schema.name)
       ) }),
-      editable && schema.mutability !== "READ_ONLY" && !isReadonlyField && /* @__PURE__ */ jsxs35("div", { className: styles.fieldActions, children: [
-        isFieldEditing && /* @__PURE__ */ jsxs35(Fragment15, { children: [
-          /* @__PURE__ */ jsx80(Button_default, { size: "small", color: "primary", variant: "solid", onClick: () => handleFieldSave(schema), children: "Save" }),
-          /* @__PURE__ */ jsx80(Button_default, { size: "small", color: "secondary", variant: "solid", onClick: () => handleFieldCancel(schema.name), children: "Cancel" })
+      editable && schema.mutability !== "READ_ONLY" && !isReadonlyField && /* @__PURE__ */ jsxs36("div", { className: styles.fieldActions, children: [
+        isFieldEditing && /* @__PURE__ */ jsxs36(Fragment15, { children: [
+          /* @__PURE__ */ jsx84(Button_default, { size: "small", color: "primary", variant: "solid", onClick: () => handleFieldSave(schema), children: "Save" }),
+          /* @__PURE__ */ jsx84(Button_default, { size: "small", color: "secondary", variant: "solid", onClick: () => handleFieldCancel(schema.name), children: "Cancel" })
         ] }),
-        !isFieldEditing && hasValue && /* @__PURE__ */ jsx80(
+        !isFieldEditing && hasValue && /* @__PURE__ */ jsx84(
           Button_default,
           {
             size: "small",
@@ -10509,7 +10961,7 @@ var BaseUserProfile = ({
             onClick: () => toggleFieldEdit(schema.name),
             title: "Edit",
             className: styles.editButton,
-            children: /* @__PURE__ */ jsx80(PencilIcon, {})
+            children: /* @__PURE__ */ jsx84(PencilIcon, {})
           }
         )
       ] })
@@ -10518,10 +10970,10 @@ var BaseUserProfile = ({
   if (!profile && !flattenedProfile) {
     return fallback;
   }
-  const containerClasses = cx25(
+  const containerClasses = cx26(
     styles.root,
     cardLayout ? styles.card : "",
-    withVendorCSSClassPrefix26("user-profile"),
+    withVendorCSSClassPrefix27("user-profile"),
     className
   );
   const currentUser = flattenedProfile || profile;
@@ -10533,17 +10985,17 @@ var BaseUserProfile = ({
       if (!shouldShowField(key)) return false;
       return value !== void 0 && value !== "" && value !== null;
     }).sort(([a], [b]) => a.localeCompare(b));
-    return /* @__PURE__ */ jsx80(Fragment15, { children: profileEntries.map(([key, value]) => /* @__PURE__ */ jsxs35("div", { className: styles.field, children: [
-      /* @__PURE__ */ jsx80("span", { className: styles.label, children: formatLabel(key) }),
-      /* @__PURE__ */ jsx80("div", { className: styles.value, children: typeof value === "object" ? JSON.stringify(value, null, 2) : String(value) })
+    return /* @__PURE__ */ jsx84(Fragment15, { children: profileEntries.map(([key, value]) => /* @__PURE__ */ jsxs36("div", { className: styles.field, children: [
+      /* @__PURE__ */ jsx84("span", { className: styles.label, children: formatLabel(key) }),
+      /* @__PURE__ */ jsx84("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: cx25(withVendorCSSClassPrefix26(bem19("user-profile", "alert")), styles.alert), children: [
-      /* @__PURE__ */ jsx80(Alert_default.Title, { children: t("errors.title") || "Error" }),
-      /* @__PURE__ */ jsx80(Alert_default.Description, { children: error })
+  const profileContent = /* @__PURE__ */ jsxs36(Card_default, { className: containerClasses, children: [
+    error && /* @__PURE__ */ jsxs36(Alert_default, { variant: "error", className: cx26(withVendorCSSClassPrefix27(bem19("user-profile", "alert")), styles.alert), children: [
+      /* @__PURE__ */ jsx84(Alert_default.Title, { children: t("errors.heading") || "Error" }),
+      /* @__PURE__ */ jsx84(Alert_default.Description, { children: error })
     ] }),
-    /* @__PURE__ */ jsx80("div", { className: styles.header, children: /* @__PURE__ */ jsx80(
+    /* @__PURE__ */ jsx84("div", { className: styles.header, children: /* @__PURE__ */ jsx84(
       Avatar,
       {
         imageUrl: getMappedUserProfileValue_default("picture", mergedMappings, currentUser),
@@ -10553,7 +11005,7 @@ var BaseUserProfile = ({
         isLoading
       }
     ) }),
-    /* @__PURE__ */ jsx80("div", { className: styles.infoContainer, children: schemas && schemas.length > 0 ? schemas.filter((schema) => {
+    /* @__PURE__ */ jsx84("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;
@@ -10570,13 +11022,13 @@ var BaseUserProfile = ({
         ...schema,
         value
       };
-      return /* @__PURE__ */ jsx80("div", { className: styles.info, children: renderUserInfo(schemaWithValue) }, schema.name || index);
+      return /* @__PURE__ */ jsx84("div", { className: styles.info, children: renderUserInfo(schemaWithValue) }, schema.name || index);
     }) : renderProfileWithoutSchemas() })
   ] });
   if (mode === "popup") {
-    return /* @__PURE__ */ jsx80(Dialog_default, { open, onOpenChange, children: /* @__PURE__ */ jsxs35(Dialog_default.Content, { children: [
-      /* @__PURE__ */ jsx80(Dialog_default.Heading, { children: title ?? t("user.profile.title") }),
-      /* @__PURE__ */ jsx80("div", { className: styles.popup, children: profileContent })
+    return /* @__PURE__ */ jsx84(Dialog_default, { open, onOpenChange, children: /* @__PURE__ */ jsxs36(Dialog_default.Content, { children: [
+      /* @__PURE__ */ jsx84(Dialog_default.Heading, { children: title ?? t("user.profile.heading") }),
+      /* @__PURE__ */ jsx84("div", { className: styles.popup, children: profileContent })
     ] }) });
   }
   return profileContent;
@@ -10584,7 +11036,7 @@ var BaseUserProfile = ({
 var BaseUserProfile_default = BaseUserProfile;
 
 // src/components/presentation/UserProfile/UserProfile.tsx
-import { useState as useState20 } from "react";
+import { useState as useState21 } from "react";
 
 // src/api/updateMeProfile.ts
 import {
@@ -10617,12 +11069,12 @@ var updateMeProfile_default = updateMeProfile;
 
 // src/components/presentation/UserProfile/UserProfile.tsx
 import { AsgardeoError } from "@asgardeo/browser";
-import { jsx as jsx81 } from "react/jsx-runtime";
+import { jsx as jsx85 } from "react/jsx-runtime";
 var UserProfile3 = ({ ...rest }) => {
   const { baseUrl, isLoading } = useAsgardeo_default();
   const { profile, flattenedProfile, schemas, onUpdateProfile } = useUser_default();
   const { t } = useTranslation_default();
-  const [error, setError] = useState20(null);
+  const [error, setError] = useState21(null);
   const handleProfileUpdate = async (payload) => {
     setError(null);
     try {
@@ -10636,7 +11088,7 @@ var UserProfile3 = ({ ...rest }) => {
       setError(message);
     }
   };
-  return /* @__PURE__ */ jsx81(
+  return /* @__PURE__ */ jsx85(
     BaseUserProfile_default,
     {
       profile,
@@ -10651,7 +11103,7 @@ var UserProfile3 = ({ ...rest }) => {
 var UserProfile_default = UserProfile3;
 
 // src/components/presentation/UserDropdown/BaseUserDropdown.tsx
-import { withVendorCSSClassPrefix as withVendorCSSClassPrefix27 } from "@asgardeo/browser";
+import { withVendorCSSClassPrefix as withVendorCSSClassPrefix28 } from "@asgardeo/browser";
 import {
   useFloating as useFloating2,
   autoUpdate,
@@ -10665,8 +11117,8 @@ import {
   FloatingFocusManager as FloatingFocusManager2,
   FloatingPortal as FloatingPortal2
 } from "@floating-ui/react";
-import { cx as cx26 } from "@emotion/css";
-import { useState as useState21 } from "react";
+import { cx as cx27 } from "@emotion/css";
+import { useState as useState22 } from "react";
 
 // src/components/presentation/UserDropdown/BaseUserDropdown.styles.ts
 import { css as css22 } from "@emotion/css";
@@ -10853,7 +11305,7 @@ var useStyles22 = (theme, colorScheme) => {
 var BaseUserDropdown_styles_default = useStyles22;
 
 // src/components/presentation/UserDropdown/BaseUserDropdown.tsx
-import { jsx as jsx82, jsxs as jsxs36 } from "react/jsx-runtime";
+import { jsx as jsx86, jsxs as jsxs37 } from "react/jsx-runtime";
 var BaseUserDropdown = ({
   fallback = null,
   className = "",
@@ -10869,8 +11321,8 @@ var BaseUserDropdown = ({
 }) => {
   const { theme, colorScheme } = useTheme_default();
   const styles = BaseUserDropdown_styles_default(theme, colorScheme);
-  const [isOpen, setIsOpen] = useState21(false);
-  const [hoveredItemIndex, setHoveredItemIndex] = useState21(null);
+  const [isOpen, setIsOpen] = useState22(false);
+  const [hoveredItemIndex, setHoveredItemIndex] = useState22(null);
   const { refs, floatingStyles, context } = useFloating2({
     open: isOpen,
     onOpenChange: setIsOpen,
@@ -10907,14 +11359,14 @@ var BaseUserDropdown = ({
     defaultMenuItems.push({
       label: "Manage Profile",
       onClick: onManageProfile,
-      icon: /* @__PURE__ */ jsx82(User_default2, { width: "16", height: "16" })
+      icon: /* @__PURE__ */ jsx86(User_default2, { width: "16", height: "16" })
     });
   }
   if (onSignOut) {
     defaultMenuItems.push({
       label: "Sign Out",
       onClick: onSignOut,
-      icon: /* @__PURE__ */ jsx82(LogOut_default, { width: "16", height: "16" })
+      icon: /* @__PURE__ */ jsx86(LogOut_default, { width: "16", height: "16" })
     });
   }
   const allMenuItems = [...menuItems];
@@ -10924,18 +11376,18 @@ var BaseUserDropdown = ({
     }
     allMenuItems.push(...defaultMenuItems);
   }
-  return /* @__PURE__ */ jsxs36("div", { className: cx26(withVendorCSSClassPrefix27("user-dropdown"), className), children: [
-    /* @__PURE__ */ jsxs36(
+  return /* @__PURE__ */ jsxs37("div", { className: cx27(withVendorCSSClassPrefix28("user-dropdown"), className), children: [
+    /* @__PURE__ */ jsxs37(
       Button_default,
       {
         ref: refs.setReference,
-        className: cx26(withVendorCSSClassPrefix27("user-dropdown__trigger"), styles.trigger),
+        className: cx27(withVendorCSSClassPrefix28("user-dropdown__trigger"), styles.trigger),
         color: "tertiary",
         variant: "text",
         size: "medium",
         ...getReferenceProps(),
         children: [
-          /* @__PURE__ */ jsx82(
+          /* @__PURE__ */ jsx86(
             Avatar,
             {
               imageUrl: getMappedUserProfileValue_default("picture", mergedMappings, user),
@@ -10944,22 +11396,22 @@ var BaseUserDropdown = ({
               alt: `${getDisplayName_default(mergedMappings, user)}'s avatar`
             }
           ),
-          showTriggerLabel && /* @__PURE__ */ jsx82(
+          showTriggerLabel && /* @__PURE__ */ jsx86(
             Typography_default,
             {
               variant: "body2",
-              className: cx26(withVendorCSSClassPrefix27("user-dropdown__trigger-label"), styles.userName),
+              className: cx27(withVendorCSSClassPrefix28("user-dropdown__trigger-label"), styles.userName),
               children: getDisplayName_default(mergedMappings, user)
             }
           )
         ]
       }
     ),
-    isOpen && /* @__PURE__ */ jsx82(FloatingPortal2, { id: portalId, children: /* @__PURE__ */ jsx82(FloatingFocusManager2, { context, modal: false, initialFocus: -1, children: /* @__PURE__ */ jsxs36(
+    isOpen && /* @__PURE__ */ jsx86(FloatingPortal2, { id: portalId, children: /* @__PURE__ */ jsx86(FloatingFocusManager2, { context, modal: false, initialFocus: -1, children: /* @__PURE__ */ jsxs37(
       "div",
       {
         ref: refs.setFloating,
-        className: cx26(withVendorCSSClassPrefix27("user-dropdown__content"), styles.dropdownContent),
+        className: cx27(withVendorCSSClassPrefix28("user-dropdown__content"), styles.dropdownContent),
         style: {
           ...floatingStyles,
           // Floating UI doesn't set a z-index by default, so we set a high value to ensure the dropdown appears above other elements.
@@ -10968,8 +11420,8 @@ var BaseUserDropdown = ({
         },
         ...getFloatingProps(),
         children: [
-          /* @__PURE__ */ jsxs36("div", { className: cx26(withVendorCSSClassPrefix27("user-dropdown__header"), styles.dropdownHeader), children: [
-            /* @__PURE__ */ jsx82(
+          /* @__PURE__ */ jsxs37("div", { className: cx27(withVendorCSSClassPrefix28("user-dropdown__header"), styles.dropdownHeader), children: [
+            /* @__PURE__ */ jsx86(
               Avatar,
               {
                 imageUrl: getMappedUserProfileValue_default("picture", mergedMappings, user),
@@ -10978,22 +11430,22 @@ var BaseUserDropdown = ({
                 alt: `${getDisplayName_default(mergedMappings, user)}'s avatar`
               }
             ),
-            /* @__PURE__ */ jsxs36("div", { className: cx26(withVendorCSSClassPrefix27("user-dropdown__header-info"), styles.headerInfo), children: [
-              /* @__PURE__ */ jsx82(
+            /* @__PURE__ */ jsxs37("div", { className: cx27(withVendorCSSClassPrefix28("user-dropdown__header-info"), styles.headerInfo), children: [
+              /* @__PURE__ */ jsx86(
                 Typography_default,
                 {
                   noWrap: true,
-                  className: withVendorCSSClassPrefix27("user-dropdown__header-name"),
+                  className: withVendorCSSClassPrefix28("user-dropdown__header-name"),
                   variant: "body1",
                   fontWeight: "medium",
                   children: getDisplayName_default(mergedMappings, user)
                 }
               ),
-              /* @__PURE__ */ jsx82(
+              /* @__PURE__ */ jsx86(
                 Typography_default,
                 {
                   noWrap: true,
-                  className: withVendorCSSClassPrefix27("user-dropdown__header-email"),
+                  className: withVendorCSSClassPrefix28("user-dropdown__header-email"),
                   variant: "caption",
                   color: "secondary",
                   children: getMappedUserProfileValue_default("username", mergedMappings, user) || getMappedUserProfileValue_default("email", mergedMappings, user)
@@ -11001,31 +11453,31 @@ var BaseUserDropdown = ({
               )
             ] })
           ] }),
-          /* @__PURE__ */ jsx82("div", { className: cx26(withVendorCSSClassPrefix27("user-dropdown__menu"), styles.dropdownMenu), children: allMenuItems.map((item, index) => /* @__PURE__ */ jsx82("div", { children: item.label === "" ? /* @__PURE__ */ jsx82("div", { className: cx26(withVendorCSSClassPrefix27("user-dropdown__menu-divider"), styles.divider) }) : item.href ? /* @__PURE__ */ jsxs36(
+          /* @__PURE__ */ jsx86("div", { className: cx27(withVendorCSSClassPrefix28("user-dropdown__menu"), styles.dropdownMenu), children: allMenuItems.map((item, index) => /* @__PURE__ */ jsx86("div", { children: item.label === "" ? /* @__PURE__ */ jsx86("div", { className: cx27(withVendorCSSClassPrefix28("user-dropdown__menu-divider"), styles.divider) }) : item.href ? /* @__PURE__ */ jsxs37(
             "a",
             {
               href: item.href,
               style: {
                 backgroundColor: hoveredItemIndex === index ? theme.vars.colors.action?.hover : "transparent"
               },
-              className: cx26(withVendorCSSClassPrefix27("user-dropdown__menu-item"), styles.menuItemAnchor),
+              className: cx27(withVendorCSSClassPrefix28("user-dropdown__menu-item"), styles.menuItemAnchor),
               onMouseEnter: () => setHoveredItemIndex(index),
               onMouseLeave: () => setHoveredItemIndex(null),
               onFocus: () => setHoveredItemIndex(index),
               onBlur: () => setHoveredItemIndex(null),
               children: [
                 item.icon,
-                /* @__PURE__ */ jsx82("span", { children: item.label })
+                /* @__PURE__ */ jsx86("span", { children: item.label })
               ]
             }
-          ) : /* @__PURE__ */ jsx82(
+          ) : /* @__PURE__ */ jsx86(
             Button_default,
             {
               onClick: () => handleMenuItemClick(item),
               style: {
                 backgroundColor: hoveredItemIndex === index ? theme.vars.colors.action?.hover : "transparent"
               },
-              className: cx26(withVendorCSSClassPrefix27("user-dropdown__menu-item"), styles.menuItem),
+              className: cx27(withVendorCSSClassPrefix28("user-dropdown__menu-item"), styles.menuItem),
               color: "tertiary",
               variant: "text",
               size: "small",
@@ -11043,8 +11495,8 @@ var BaseUserDropdown = ({
 var BaseUserDropdown_default = BaseUserDropdown;
 
 // src/components/presentation/UserDropdown/UserDropdown.tsx
-import { useState as useState22 } from "react";
-import { Fragment as Fragment16, jsx as jsx83, jsxs as jsxs37 } from "react/jsx-runtime";
+import { useState as useState23 } from "react";
+import { Fragment as Fragment16, jsx as jsx87, jsxs as jsxs38 } from "react/jsx-runtime";
 var UserDropdown = ({
   children,
   renderTrigger,
@@ -11053,7 +11505,7 @@ var UserDropdown = ({
   ...rest
 }) => {
   const { user, isLoading, signOut } = useAsgardeo_default();
-  const [isProfileOpen, setIsProfileOpen] = useState22(false);
+  const [isProfileOpen, setIsProfileOpen] = useState23(false);
   const handleManageProfile = () => {
     setIsProfileOpen(true);
   };
@@ -11073,14 +11525,14 @@ var UserDropdown = ({
     closeProfile
   };
   if (children) {
-    return /* @__PURE__ */ jsxs37(Fragment16, { children: [
+    return /* @__PURE__ */ jsxs38(Fragment16, { children: [
       children(renderProps),
-      /* @__PURE__ */ jsx83(UserProfile_default, { mode: "popup", open: isProfileOpen, onOpenChange: setIsProfileOpen })
+      /* @__PURE__ */ jsx87(UserProfile_default, { mode: "popup", open: isProfileOpen, onOpenChange: setIsProfileOpen })
     ] });
   }
   if (renderTrigger || renderDropdown) {
-    return /* @__PURE__ */ jsxs37(Fragment16, { children: [
-      renderTrigger ? renderTrigger(renderProps) : /* @__PURE__ */ jsx83(
+    return /* @__PURE__ */ jsxs38(Fragment16, { children: [
+      renderTrigger ? renderTrigger(renderProps) : /* @__PURE__ */ jsx87(
         BaseUserDropdown_default,
         {
           user,
@@ -11090,11 +11542,11 @@ var UserDropdown = ({
           ...rest
         }
       ),
-      /* @__PURE__ */ jsx83(UserProfile_default, { mode: "popup", open: isProfileOpen, onOpenChange: setIsProfileOpen })
+      /* @__PURE__ */ jsx87(UserProfile_default, { mode: "popup", open: isProfileOpen, onOpenChange: setIsProfileOpen })
     ] });
   }
-  return /* @__PURE__ */ jsxs37(Fragment16, { children: [
-    /* @__PURE__ */ jsx83(
+  return /* @__PURE__ */ jsxs38(Fragment16, { children: [
+    /* @__PURE__ */ jsx87(
       BaseUserDropdown_default,
       {
         user,
@@ -11104,7 +11556,7 @@ var UserDropdown = ({
         ...rest
       }
     ),
-    isProfileOpen && /* @__PURE__ */ jsx83(UserProfile_default, { mode: "popup", open: isProfileOpen, onOpenChange: setIsProfileOpen })
+    isProfileOpen && /* @__PURE__ */ jsx87(UserProfile_default, { mode: "popup", open: isProfileOpen, onOpenChange: setIsProfileOpen })
   ] });
 };
 var UserDropdown_default = UserDropdown;
@@ -11123,13 +11575,13 @@ import {
   FloatingFocusManager as FloatingFocusManager3,
   FloatingPortal as FloatingPortal3
 } from "@floating-ui/react";
-import { cx as cx27 } from "@emotion/css";
-import { useState as useState23 } from "react";
+import { cx as cx28 } from "@emotion/css";
+import { useState as useState24 } from "react";
 
 // src/components/primitives/Icons/Building.tsx
-import { jsx as jsx84, 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__ */ jsx84(
+import { jsx as jsx88, jsxs as jsxs39 } from "react/jsx-runtime";
+var Building = ({ color = "currentColor", height = 24, width = 24 }) => /* @__PURE__ */ jsxs39("svg", { width, height, viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [
+  /* @__PURE__ */ jsx88(
     "path",
     {
       d: "M6 22V4a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2v18Z",
@@ -11139,25 +11591,25 @@ var Building = ({ color = "currentColor", height = 24, width = 24 }) => /* @__PU
       strokeLinejoin: "round"
     }
   ),
-  /* @__PURE__ */ jsx84("path", { d: "M6 12h4", stroke: color, strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }),
-  /* @__PURE__ */ jsx84("path", { d: "M6 8h4", stroke: color, strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }),
-  /* @__PURE__ */ jsx84("path", { d: "M14 8h4", stroke: color, strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }),
-  /* @__PURE__ */ jsx84("path", { d: "M14 12h4", stroke: color, strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }),
-  /* @__PURE__ */ jsx84("path", { d: "M6 18h4", stroke: color, strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }),
-  /* @__PURE__ */ jsx84("path", { d: "M14 18h4", stroke: color, strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" })
+  /* @__PURE__ */ jsx88("path", { d: "M6 12h4", stroke: color, strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }),
+  /* @__PURE__ */ jsx88("path", { d: "M6 8h4", stroke: color, strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }),
+  /* @__PURE__ */ jsx88("path", { d: "M14 8h4", stroke: color, strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }),
+  /* @__PURE__ */ jsx88("path", { d: "M14 12h4", stroke: color, strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }),
+  /* @__PURE__ */ jsx88("path", { d: "M6 18h4", stroke: color, strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }),
+  /* @__PURE__ */ jsx88("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 jsx85 } from "react/jsx-runtime";
-var Check = ({ color = "currentColor", height = 24, width = 24 }) => /* @__PURE__ */ jsx85("svg", { width, height, viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsx85("path", { d: "M20 6 9 17l-5-5", stroke: color, strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) });
+import { jsx as jsx89 } from "react/jsx-runtime";
+var Check = ({ color = "currentColor", height = 24, width = 24 }) => /* @__PURE__ */ jsx89("svg", { width, height, viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsx89("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 jsx86 } from "react/jsx-runtime";
-var ChevronDown = ({ color = "currentColor", height = 24, width = 24 }) => /* @__PURE__ */ jsx86("svg", { width, height, viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsx86("path", { d: "m6 9 6 6 6-6", stroke: color, strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) });
+import { jsx as jsx90 } from "react/jsx-runtime";
+var ChevronDown = ({ color = "currentColor", height = 24, width = 24 }) => /* @__PURE__ */ jsx90("svg", { width, height, viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsx90("path", { d: "m6 9 6 6 6-6", stroke: color, strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) });
 ChevronDown.displayName = "ChevronDown";
 var ChevronDown_default = ChevronDown;
 
@@ -11387,7 +11839,7 @@ var useStyles23 = (theme, colorScheme) => {
 var BaseOrganizationSwitcher_styles_default = useStyles23;
 
 // src/components/presentation/OrganizationSwitcher/BaseOrganizationSwitcher.tsx
-import { Fragment as Fragment17, jsx as jsx87, jsxs as jsxs39 } from "react/jsx-runtime";
+import { Fragment as Fragment17, jsx as jsx91, jsxs as jsxs40 } from "react/jsx-runtime";
 var BaseOrganizationSwitcher = ({
   organizations,
   currentOrganization,
@@ -11410,8 +11862,8 @@ var BaseOrganizationSwitcher = ({
 }) => {
   const { theme, colorScheme, direction } = useTheme_default();
   const styles = BaseOrganizationSwitcher_styles_default(theme, colorScheme);
-  const [isOpen, setIsOpen] = useState23(false);
-  const [hoveredItemIndex, setHoveredItemIndex] = useState23(null);
+  const [isOpen, setIsOpen] = useState24(false);
+  const [hoveredItemIndex, setHoveredItemIndex] = useState24(null);
   const { t } = useTranslation_default();
   const isRTL = direction === "rtl";
   const { refs, floatingStyles, context } = useFloating3({
@@ -11441,8 +11893,8 @@ var BaseOrganizationSwitcher = ({
   const switchableOrganizations = organizations.filter(
     (org) => org.id !== currentOrganization?.id
   );
-  const defaultRenderOrganization2 = (organization, isSelected) => /* @__PURE__ */ jsxs39(Fragment17, { children: [
-    /* @__PURE__ */ jsx87(
+  const defaultRenderOrganization2 = (organization, isSelected) => /* @__PURE__ */ jsxs40(Fragment17, { children: [
+    /* @__PURE__ */ jsx91(
       Avatar,
       {
         variant: "square",
@@ -11452,35 +11904,35 @@ var BaseOrganizationSwitcher = ({
         alt: `${organization.name} avatar`
       }
     ),
-    /* @__PURE__ */ jsxs39("div", { className: cx27(styles.organizationInfo), children: [
-      /* @__PURE__ */ jsx87(Typography_default, { variant: "body2", fontWeight: "medium", className: cx27(styles.organizationName), children: organization.name }),
-      /* @__PURE__ */ jsxs39("div", { className: cx27(styles.organizationMeta), children: [
-        showMemberCount && organization.memberCount !== void 0 && /* @__PURE__ */ jsxs39("span", { children: [
+    /* @__PURE__ */ jsxs40("div", { className: cx28(styles.organizationInfo), children: [
+      /* @__PURE__ */ jsx91(Typography_default, { variant: "body2", fontWeight: "medium", className: cx28(styles.organizationName), children: organization.name }),
+      /* @__PURE__ */ jsxs40("div", { className: cx28(styles.organizationMeta), children: [
+        showMemberCount && organization.memberCount !== void 0 && /* @__PURE__ */ jsxs40("span", { children: [
           organization.memberCount,
           " ",
           organization.memberCount === 1 ? t("organization.switcher.member") : t("organization.switcher.members")
         ] }),
-        showRole && organization.role && showMemberCount && organization.memberCount !== void 0 && /* @__PURE__ */ jsx87("span", { children: " \u2022 " }),
-        showRole && organization.role && /* @__PURE__ */ jsx87("span", { className: cx27(styles.roleCapitalized), children: organization.role })
+        showRole && organization.role && showMemberCount && organization.memberCount !== void 0 && /* @__PURE__ */ jsx91("span", { children: " \u2022 " }),
+        showRole && organization.role && /* @__PURE__ */ jsx91("span", { className: cx28(styles.roleCapitalized), children: organization.role })
       ] })
     ] }),
-    isSelected && /* @__PURE__ */ jsx87(Check_default, { width: "16", height: "16", color: theme.vars.colors.text.primary })
+    isSelected && /* @__PURE__ */ jsx91(Check_default, { width: "16", height: "16", color: theme.vars.colors.text.primary })
   ] });
-  const defaultRenderLoading2 = () => /* @__PURE__ */ jsx87("div", { className: cx27(styles.loadingContainer), children: /* @__PURE__ */ jsx87(Typography_default, { variant: "caption", className: cx27(styles.loadingText), children: t("organization.switcher.loading.organizations") }) });
-  const defaultRenderError2 = (errorMessage) => /* @__PURE__ */ jsx87("div", { className: cx27(styles.errorContainer), children: /* @__PURE__ */ jsx87(Typography_default, { variant: "caption", className: cx27(styles.errorText), children: errorMessage }) });
-  return /* @__PURE__ */ jsxs39("div", { className: cx27(styles.root, className), style, children: [
-    /* @__PURE__ */ jsxs39(
+  const defaultRenderLoading2 = () => /* @__PURE__ */ jsx91("div", { className: cx28(styles.loadingContainer), children: /* @__PURE__ */ jsx91(Typography_default, { variant: "caption", className: cx28(styles.loadingText), children: t("organization.switcher.loading.placeholder.organizations") }) });
+  const defaultRenderError2 = (errorMessage) => /* @__PURE__ */ jsx91("div", { className: cx28(styles.errorContainer), children: /* @__PURE__ */ jsx91(Typography_default, { variant: "caption", className: cx28(styles.errorText), children: errorMessage }) });
+  return /* @__PURE__ */ jsxs40("div", { className: cx28(styles.root, className), style, children: [
+    /* @__PURE__ */ jsxs40(
       Button_default,
       {
         ref: refs.setReference,
-        className: cx27(styles.trigger),
+        className: cx28(styles.trigger),
         color: "tertiary",
         variant: "outline",
         size: "medium",
         ...getReferenceProps(),
         children: [
-          currentOrganization ? /* @__PURE__ */ jsxs39(Fragment17, { children: [
-            /* @__PURE__ */ jsx87(
+          currentOrganization ? /* @__PURE__ */ jsxs40(Fragment17, { children: [
+            /* @__PURE__ */ jsx91(
               Avatar,
               {
                 variant: "square",
@@ -11490,18 +11942,18 @@ var BaseOrganizationSwitcher = ({
                 alt: `${currentOrganization.name} avatar`
               }
             ),
-            showTriggerLabel && /* @__PURE__ */ jsx87(Typography_default, { variant: "body2", className: cx27(styles.triggerLabel), children: currentOrganization.name })
-          ] }) : /* @__PURE__ */ jsxs39(Fragment17, { children: [
-            /* @__PURE__ */ jsx87(Building_default, { width: avatarSize, height: avatarSize }),
-            showTriggerLabel && /* @__PURE__ */ jsx87(Typography_default, { variant: "body2", className: cx27(styles.triggerLabel), children: t("organization.switcher.select.organization") })
+            showTriggerLabel && /* @__PURE__ */ jsx91(Typography_default, { variant: "body2", className: cx28(styles.triggerLabel), children: currentOrganization.name })
+          ] }) : /* @__PURE__ */ jsxs40(Fragment17, { children: [
+            /* @__PURE__ */ jsx91(Building_default, { width: avatarSize, height: avatarSize }),
+            showTriggerLabel && /* @__PURE__ */ jsx91(Typography_default, { variant: "body2", className: cx28(styles.triggerLabel), children: t("elements.fields.organization.select.label") })
           ] }),
-          /* @__PURE__ */ jsx87("span", { style: { transform: isRTL ? "scaleX(-1)" : "none", display: "inline-flex" }, children: /* @__PURE__ */ jsx87(ChevronDown_default, { width: "16", height: "16" }) })
+          /* @__PURE__ */ jsx91("span", { style: { transform: isRTL ? "scaleX(-1)" : "none", display: "inline-flex" }, children: /* @__PURE__ */ jsx91(ChevronDown_default, { width: "16", height: "16" }) })
         ]
       }
     ),
-    isOpen && /* @__PURE__ */ jsx87(FloatingPortal3, { id: portalId, children: /* @__PURE__ */ jsx87(FloatingFocusManager3, { context, modal: false, initialFocus: -1, children: /* @__PURE__ */ jsxs39("div", { ref: refs.setFloating, className: cx27(styles.content), style: floatingStyles, ...getFloatingProps(), children: [
-      currentOrganization && /* @__PURE__ */ jsxs39("div", { className: cx27(styles.header), children: [
-        /* @__PURE__ */ jsx87(
+    isOpen && /* @__PURE__ */ jsx91(FloatingPortal3, { id: portalId, children: /* @__PURE__ */ jsx91(FloatingFocusManager3, { context, modal: false, initialFocus: -1, children: /* @__PURE__ */ jsxs40("div", { ref: refs.setFloating, className: cx28(styles.content), style: floatingStyles, ...getFloatingProps(), children: [
+      currentOrganization && /* @__PURE__ */ jsxs40("div", { className: cx28(styles.header), children: [
+        /* @__PURE__ */ jsx91(
           Avatar,
           {
             variant: "square",
@@ -11511,10 +11963,10 @@ var BaseOrganizationSwitcher = ({
             alt: `${currentOrganization.name} avatar`
           }
         ),
-        /* @__PURE__ */ jsxs39("div", { className: cx27(styles.headerInfo), children: [
-          /* @__PURE__ */ jsx87(Typography_default, { noWrap: true, className: cx27(styles.headerName), variant: "body1", fontWeight: "medium", children: currentOrganization.name }),
-          /* @__PURE__ */ jsxs39("div", { className: cx27(styles.headerMeta), children: [
-            showMemberCount && currentOrganization.memberCount !== void 0 && /* @__PURE__ */ jsxs39(
+        /* @__PURE__ */ jsxs40("div", { className: cx28(styles.headerInfo), children: [
+          /* @__PURE__ */ jsx91(Typography_default, { noWrap: true, className: cx28(styles.headerName), variant: "body1", fontWeight: "medium", children: currentOrganization.name }),
+          /* @__PURE__ */ jsxs40("div", { className: cx28(styles.headerMeta), children: [
+            showMemberCount && currentOrganization.memberCount !== void 0 && /* @__PURE__ */ jsxs40(
               Typography_default,
               {
                 noWrap: true,
@@ -11524,17 +11976,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__ */ jsxs40("span", { children: [
                     " \u2022 ",
                     currentOrganization.role
                   ] })
                 ]
               }
             ),
-            showRole && currentOrganization.role && (!showMemberCount || currentOrganization.memberCount === void 0) && /* @__PURE__ */ jsx87(Typography_default, { noWrap: true, className: cx27(styles.headerRole), variant: "caption", color: "secondary", children: currentOrganization.role })
+            showRole && currentOrganization.role && (!showMemberCount || currentOrganization.memberCount === void 0) && /* @__PURE__ */ jsx91(Typography_default, { noWrap: true, className: cx28(styles.headerRole), variant: "caption", color: "secondary", children: currentOrganization.role })
           ] })
         ] }),
-        onManageProfile && /* @__PURE__ */ jsx87(
+        onManageProfile && /* @__PURE__ */ jsx91(
           Button_default,
           {
             onClick: onManageProfile,
@@ -11542,8 +11994,8 @@ var BaseOrganizationSwitcher = ({
             variant: "outline",
             size: "small",
             "aria-label": "Manage Organization Profile",
-            className: cx27(styles.manageButton),
-            endIcon: /* @__PURE__ */ jsxs39(
+            className: cx28(styles.manageButton),
+            endIcon: /* @__PURE__ */ jsxs40(
               "svg",
               {
                 width: "16",
@@ -11555,33 +12007,33 @@ var BaseOrganizationSwitcher = ({
                 strokeLinecap: "round",
                 strokeLinejoin: "round",
                 children: [
-                  /* @__PURE__ */ jsx87("circle", { cx: "12", cy: "12", r: "3" }),
-                  /* @__PURE__ */ jsx87("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__ */ jsx91("circle", { cx: "12", cy: "12", r: "3" }),
+                  /* @__PURE__ */ jsx91("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" })
                 ]
               }
             ),
-            children: t("organization.switcher.manage.button")
+            children: t("organization.switcher.buttons.manage.text")
           }
         )
       ] }),
-      organizations.length > 1 && /* @__PURE__ */ jsx87(
+      organizations.length > 1 && /* @__PURE__ */ jsx91(
         "div",
         {
-          className: cx27(styles.header, styles.sectionHeaderContainer),
+          className: cx28(styles.header, styles.sectionHeaderContainer),
           style: {
             borderTop: currentOrganization ? `1px solid ${theme.vars.colors.border}` : "none"
           },
-          children: /* @__PURE__ */ jsx87(Typography_default, { variant: "caption", fontWeight: 600, className: cx27(styles.sectionHeader), children: t("organization.switcher.switch.organization") })
+          children: /* @__PURE__ */ jsx91(Typography_default, { variant: "caption", fontWeight: 600, className: cx28(styles.sectionHeader), children: t("organization.switcher.switch.organization") })
         }
       ),
-      /* @__PURE__ */ jsx87("div", { className: cx27(styles.menu), children: loading ? renderLoading ? renderLoading() : defaultRenderLoading2() : error ? renderError ? renderError(error) : defaultRenderError2(error) : /* @__PURE__ */ jsxs39(Fragment17, { children: [
+      /* @__PURE__ */ jsx91("div", { className: cx28(styles.menu), children: loading ? renderLoading ? renderLoading() : defaultRenderLoading2() : error ? renderError ? renderError(error) : defaultRenderError2(error) : /* @__PURE__ */ jsxs40(Fragment17, { children: [
         switchableOrganizations.map((organization) => {
           const isSelected = false;
-          return /* @__PURE__ */ jsx87(
+          return /* @__PURE__ */ jsx91(
             Button_default,
             {
               onClick: () => handleOrganizationSwitch(organization),
-              className: cx27(styles.menuItem),
+              className: cx28(styles.menuItem),
               color: "tertiary",
               variant: "text",
               size: "small",
@@ -11595,34 +12047,34 @@ var BaseOrganizationSwitcher = ({
             organization.id
           );
         }),
-        menuItems.length > 0 && /* @__PURE__ */ jsxs39(Fragment17, { children: [
-          /* @__PURE__ */ jsx87("div", { className: cx27(styles.menuDivider) }),
+        menuItems.length > 0 && /* @__PURE__ */ jsxs40(Fragment17, { children: [
+          /* @__PURE__ */ jsx91("div", { className: cx28(styles.menuDivider) }),
           menuItems.map(
-            (item, index) => /* @__PURE__ */ jsx87("div", { children: item.href ? /* @__PURE__ */ jsxs39(
+            (item, index) => /* @__PURE__ */ jsx91("div", { children: item.href ? /* @__PURE__ */ jsxs40(
               "a",
               {
                 href: item.href,
                 style: {
                   backgroundColor: hoveredItemIndex === switchableOrganizations.length + index ? theme.vars.colors.action?.hover : "transparent"
                 },
-                className: cx27(styles.menuItem),
+                className: cx28(styles.menuItem),
                 onMouseEnter: () => setHoveredItemIndex(switchableOrganizations.length + index),
                 onMouseLeave: () => setHoveredItemIndex(null),
                 onFocus: () => setHoveredItemIndex(switchableOrganizations.length + index),
                 onBlur: () => setHoveredItemIndex(null),
                 children: [
                   item.icon,
-                  /* @__PURE__ */ jsx87("span", { children: item.label })
+                  /* @__PURE__ */ jsx91("span", { children: item.label })
                 ]
               }
-            ) : /* @__PURE__ */ jsx87(
+            ) : /* @__PURE__ */ jsx91(
               Button_default,
               {
                 onClick: () => handleMenuItemClick(item),
                 style: {
                   backgroundColor: hoveredItemIndex === switchableOrganizations.length + index ? theme.vars.colors.action?.hover : "transparent"
                 },
-                className: cx27(styles.menuItem),
+                className: cx28(styles.menuItem),
                 color: "tertiary",
                 variant: "text",
                 size: "small",
@@ -11641,14 +12093,14 @@ var BaseOrganizationSwitcher = ({
 var BaseOrganizationSwitcher_default = BaseOrganizationSwitcher;
 
 // src/components/presentation/OrganizationSwitcher/OrganizationSwitcher.tsx
-import { useState as useState30 } from "react";
+import { useState as useState31 } from "react";
 
 // src/components/presentation/CreateOrganization/CreateOrganization.tsx
-import { useState as useState25 } from "react";
+import { useState as useState26 } from "react";
 
 // src/components/presentation/CreateOrganization/BaseCreateOrganization.tsx
-import { cx as cx28 } from "@emotion/css";
-import { useState as useState24 } from "react";
+import { cx as cx29 } from "@emotion/css";
+import { useState as useState25 } from "react";
 
 // src/components/presentation/CreateOrganization/BaseCreateOrganization.styles.ts
 import { css as css24 } from "@emotion/css";
@@ -11789,7 +12241,7 @@ var useStyles24 = (theme, colorScheme) => {
 var BaseCreateOrganization_styles_default = useStyles24;
 
 // src/components/presentation/CreateOrganization/BaseCreateOrganization.tsx
-import { jsx as jsx88, jsxs as jsxs40 } from "react/jsx-runtime";
+import { jsx as jsx92, jsxs as jsxs41 } from "react/jsx-runtime";
 var BaseCreateOrganization = ({
   cardLayout = true,
   className = "",
@@ -11810,13 +12262,13 @@ var BaseCreateOrganization = ({
   const { theme, colorScheme } = useTheme_default();
   const styles = BaseCreateOrganization_styles_default(theme, colorScheme);
   const { t } = useTranslation_default();
-  const [formData, setFormData] = useState24({
+  const [formData, setFormData] = useState25({
     description: "",
     handle: "",
     name: "",
     ...initialValues
   });
-  const [formErrors, setFormErrors] = useState24({});
+  const [formErrors, setFormErrors] = useState25({});
   const validateForm = () => {
     const errors = {};
     if (!formData.name.trim()) {
@@ -11876,45 +12328,45 @@ var BaseCreateOrganization = ({
       console.error("Form submission error:", submitError);
     }
   };
-  const createOrganizationContent = /* @__PURE__ */ jsx88("div", { className: cx28(styles.root, cardLayout && styles.card, className), style, children: /* @__PURE__ */ jsxs40("div", { className: cx28(styles.content), children: [
-    /* @__PURE__ */ jsxs40("form", { id: "create-organization-form", className: cx28(styles.form), onSubmit: handleSubmit, children: [
-      error && /* @__PURE__ */ jsxs40(Alert_default, { variant: "error", className: styles.errorAlert, children: [
-        /* @__PURE__ */ jsx88(Alert_default.Title, { children: "Error" }),
-        /* @__PURE__ */ jsx88(Alert_default.Description, { children: error })
+  const createOrganizationContent = /* @__PURE__ */ jsx92("div", { className: cx29(styles.root, cardLayout && styles.card, className), style, children: /* @__PURE__ */ jsxs41("div", { className: cx29(styles.content), children: [
+    /* @__PURE__ */ jsxs41("form", { id: "create-organization-form", className: cx29(styles.form), onSubmit: handleSubmit, children: [
+      error && /* @__PURE__ */ jsxs41(Alert_default, { variant: "error", className: styles.errorAlert, children: [
+        /* @__PURE__ */ jsx92(Alert_default.Title, { children: "Error" }),
+        /* @__PURE__ */ jsx92(Alert_default.Description, { children: error })
       ] }),
-      /* @__PURE__ */ jsx88("div", { className: cx28(styles.fieldGroup), children: /* @__PURE__ */ jsx88(
+      /* @__PURE__ */ jsx92("div", { className: cx29(styles.fieldGroup), children: /* @__PURE__ */ jsx92(
         TextField_default,
         {
-          label: `${t("organization.create.name.label")}`,
-          placeholder: t("organization.create.name.placeholder"),
+          label: `${t("elements.fields.organization.name.label")}`,
+          placeholder: t("elements.fields.organization.name.placeholder"),
           value: formData.name,
           onChange: (e) => handleNameChange(e.target.value),
           disabled: loading,
           required: true,
           error: formErrors.name,
-          className: cx28(styles.input)
+          className: cx29(styles.input)
         }
       ) }),
-      /* @__PURE__ */ jsx88("div", { className: cx28(styles.fieldGroup), children: /* @__PURE__ */ jsx88(
+      /* @__PURE__ */ jsx92("div", { className: cx29(styles.fieldGroup), children: /* @__PURE__ */ jsx92(
         TextField_default,
         {
-          label: `${t("organization.create.handle.label") || "Organization Handle"}`,
-          placeholder: t("organization.create.handle.placeholder") || "my-organization",
+          label: `${t("elements.fields.organization.handle.label") || "Organization Handle"}`,
+          placeholder: t("elements.fields.organization.handle.placeholder") || "my-organization",
           value: formData.handle,
           onChange: (e) => handleInputChange("handle", e.target.value),
           disabled: loading,
           required: true,
           error: formErrors.handle,
           helperText: "This will be your organization's unique identifier. Only lowercase letters, numbers, and hyphens are allowed.",
-          className: cx28(styles.input)
+          className: cx29(styles.input)
         }
       ) }),
-      /* @__PURE__ */ jsx88("div", { className: cx28(styles.fieldGroup), children: /* @__PURE__ */ jsxs40(FormControl_default, { error: formErrors.description, children: [
-        /* @__PURE__ */ jsx88(InputLabel_default, { required: true, children: t("organization.create.description.label") }),
-        /* @__PURE__ */ jsx88(
+      /* @__PURE__ */ jsx92("div", { className: cx29(styles.fieldGroup), children: /* @__PURE__ */ jsxs41(FormControl_default, { error: formErrors.description, children: [
+        /* @__PURE__ */ jsx92(InputLabel_default, { required: true, children: t("elements.fields.organization.description.label") }),
+        /* @__PURE__ */ jsx92(
           "textarea",
           {
-            className: cx28(styles.textarea, formErrors.description && styles.textareaError),
+            className: cx29(styles.textarea, formErrors.description && styles.textareaError),
             placeholder: t("organization.create.description.placeholder"),
             value: formData.description,
             onChange: (e) => handleInputChange("description", e.target.value),
@@ -11925,15 +12377,15 @@ var BaseCreateOrganization = ({
       ] }) }),
       renderAdditionalFields && renderAdditionalFields()
     ] }),
-    /* @__PURE__ */ jsxs40("div", { className: cx28(styles.actions), children: [
-      onCancel && /* @__PURE__ */ jsx88(Button_default, { type: "button", variant: "outline", onClick: onCancel, disabled: loading, children: t("organization.create.cancel") }),
-      /* @__PURE__ */ jsx88(Button_default, { type: "submit", variant: "solid", color: "primary", disabled: loading, form: "create-organization-form", children: loading ? t("organization.create.creating") : t("organization.create.button") })
+    /* @__PURE__ */ jsxs41("div", { className: cx29(styles.actions), children: [
+      onCancel && /* @__PURE__ */ jsx92(Button_default, { type: "button", variant: "outline", onClick: onCancel, disabled: loading, children: t("organization.create.buttons.cancel.text") }),
+      /* @__PURE__ */ jsx92(Button_default, { type: "submit", variant: "solid", color: "primary", disabled: loading, form: "create-organization-form", children: loading ? t("organization.create.buttons.create_organization.loading.text") : t("organization.create.buttons.create_organization.text") })
     ] })
   ] }) });
   if (mode === "popup") {
-    return /* @__PURE__ */ jsx88(Dialog_default, { open, onOpenChange, children: /* @__PURE__ */ jsxs40(Dialog_default.Content, { children: [
-      /* @__PURE__ */ jsx88(Dialog_default.Heading, { children: title }),
-      /* @__PURE__ */ jsx88("div", { className: styles.popup, children: createOrganizationContent })
+    return /* @__PURE__ */ jsx92(Dialog_default, { open, onOpenChange, children: /* @__PURE__ */ jsxs41(Dialog_default.Content, { children: [
+      /* @__PURE__ */ jsx92(Dialog_default.Heading, { children: title }),
+      /* @__PURE__ */ jsx92("div", { className: styles.popup, children: createOrganizationContent })
     ] }) });
   }
   return createOrganizationContent;
@@ -11969,7 +12421,7 @@ var createOrganization = async ({ fetcher, ...requestConfig }) => {
 var createOrganization_default = createOrganization;
 
 // src/components/presentation/CreateOrganization/CreateOrganization.tsx
-import { Fragment as Fragment18, jsx as jsx89 } from "react/jsx-runtime";
+import { Fragment as Fragment18, jsx as jsx93 } from "react/jsx-runtime";
 var CreateOrganization = ({
   onCreateOrganization,
   fallback = null,
@@ -11979,13 +12431,13 @@ var CreateOrganization = ({
 }) => {
   const { isSignedIn, baseUrl } = useAsgardeo_default();
   const { currentOrganization, revalidateMyOrganizations } = useOrganization_default();
-  const [loading, setLoading] = useState25(false);
-  const [error, setError] = useState25(null);
+  const [loading, setLoading] = useState26(false);
+  const [error, setError] = useState26(null);
   if (!isSignedIn && fallback) {
     return fallback;
   }
   if (!isSignedIn) {
-    return /* @__PURE__ */ jsx89(Fragment18, {});
+    return /* @__PURE__ */ jsx93(Fragment18, {});
   }
   const parentId = defaultParentId || currentOrganization?.id || "";
   const handleSubmit = async (payload) => {
@@ -12019,7 +12471,7 @@ var CreateOrganization = ({
       setLoading(false);
     }
   };
-  return /* @__PURE__ */ jsx89(
+  return /* @__PURE__ */ jsx93(
     BaseCreateOrganization,
     {
       onSubmit: handleSubmit,
@@ -12033,17 +12485,17 @@ var CreateOrganization = ({
 };
 
 // src/components/presentation/OrganizationProfile/OrganizationProfile.tsx
-import { useEffect as useEffect15, useState as useState28 } from "react";
+import { useEffect as useEffect16, useState as useState29 } from "react";
 
 // src/components/presentation/OrganizationProfile/BaseOrganizationProfile.tsx
 import { formatDate } from "@asgardeo/browser";
-import { cx as cx30 } from "@emotion/css";
-import { useState as useState27, useCallback as useCallback15 } from "react";
+import { cx as cx31 } from "@emotion/css";
+import { useState as useState28, useCallback as useCallback16 } from "react";
 
 // src/components/primitives/KeyValueInput/KeyValueInput.tsx
-import { withVendorCSSClassPrefix as withVendorCSSClassPrefix28, bem as bem20 } from "@asgardeo/browser";
-import { cx as cx29 } from "@emotion/css";
-import { useState as useState26, useCallback as useCallback14 } from "react";
+import { withVendorCSSClassPrefix as withVendorCSSClassPrefix29, bem as bem20 } from "@asgardeo/browser";
+import { cx as cx30 } from "@emotion/css";
+import { useState as useState27, useCallback as useCallback15 } from "react";
 
 // src/components/primitives/KeyValueInput/KeyValueInput.styles.ts
 import { css as css25 } from "@emotion/css";
@@ -12201,7 +12653,7 @@ var useStyles25 = (theme, colorScheme, disabled, readOnly, hasError) => {
 var KeyValueInput_styles_default = useStyles25;
 
 // src/components/primitives/KeyValueInput/KeyValueInput.tsx
-import { jsx as jsx90, jsxs as jsxs41 } from "react/jsx-runtime";
+import { jsx as jsx94, jsxs as jsxs42 } from "react/jsx-runtime";
 var KeyValueInput = ({
   className = "",
   disabled = false,
@@ -12224,10 +12676,10 @@ var KeyValueInput = ({
   const { theme, colorScheme } = useTheme_default();
   const styles = KeyValueInput_styles_default(theme, colorScheme, disabled, readOnly, !!error);
   const initialPairs = Array.isArray(value) ? value : Object.entries(value).map(([key, val]) => ({ key, value: String(val) }));
-  const [pairs, setPairs] = useState26(initialPairs);
-  const [newKey, setNewKey] = useState26("");
-  const [newValue, setNewValue] = useState26("");
-  const handleAddPair = useCallback14(() => {
+  const [pairs, setPairs] = useState27(initialPairs);
+  const [newKey, setNewKey] = useState27("");
+  const [newValue, setNewValue] = useState27("");
+  const handleAddPair = useCallback15(() => {
     if (!newKey.trim() || !newValue.trim()) return;
     if (maxPairs && pairs.length >= maxPairs) return;
     const newPair = {
@@ -12245,7 +12697,7 @@ var KeyValueInput = ({
       onAdd(newPair);
     }
   }, [newKey, newValue, pairs, maxPairs, onChange, onAdd]);
-  const handleRemovePair = useCallback14(
+  const handleRemovePair = useCallback15(
     (index) => {
       const pairToRemove = pairs[index];
       const updatedPairs = pairs.filter((_, i) => i !== index);
@@ -12259,7 +12711,7 @@ var KeyValueInput = ({
     },
     [pairs, onChange, onRemove]
   );
-  const handleUpdatePair = useCallback14(
+  const handleUpdatePair = useCallback15(
     (index, field, newVal) => {
       const updatedPairs = pairs.map((pair, i) => {
         if (i === index) {
@@ -12276,105 +12728,105 @@ var KeyValueInput = ({
   );
   const canAddMore = !maxPairs || pairs.length < maxPairs;
   const isAddDisabled = disabled || readOnly || !canAddMore || !newKey.trim() || !newValue.trim();
-  return /* @__PURE__ */ jsxs41("div", { className: cx29(withVendorCSSClassPrefix28(bem20("key-value-input")), styles.container, className), children: [
-    label && /* @__PURE__ */ jsxs41("label", { className: cx29(withVendorCSSClassPrefix28(bem20("key-value-input", "label")), styles.label), children: [
+  return /* @__PURE__ */ jsxs42("div", { className: cx30(withVendorCSSClassPrefix29(bem20("key-value-input")), styles.container, className), children: [
+    label && /* @__PURE__ */ jsxs42("label", { className: cx30(withVendorCSSClassPrefix29(bem20("key-value-input", "label")), styles.label), children: [
       label,
-      required && /* @__PURE__ */ jsx90(
+      required && /* @__PURE__ */ jsx94(
         "span",
         {
-          className: cx29(withVendorCSSClassPrefix28(bem20("key-value-input", "required")), styles.requiredIndicator),
+          className: cx30(withVendorCSSClassPrefix29(bem20("key-value-input", "required")), styles.requiredIndicator),
           children: " *"
         }
       )
     ] }),
-    /* @__PURE__ */ jsxs41("div", { className: cx29(withVendorCSSClassPrefix28(bem20("key-value-input", "pairs-list")), styles.pairsList), children: [
-      pairs.length === 0 && readOnly ? /* @__PURE__ */ jsx90("div", { className: cx29(withVendorCSSClassPrefix28(bem20("key-value-input", "empty-state")), styles.emptyState), children: "No attributes defined" }) : readOnly ? pairs.map((pair, index) => /* @__PURE__ */ jsxs41(
+    /* @__PURE__ */ jsxs42("div", { className: cx30(withVendorCSSClassPrefix29(bem20("key-value-input", "pairs-list")), styles.pairsList), children: [
+      pairs.length === 0 && readOnly ? /* @__PURE__ */ jsx94("div", { className: cx30(withVendorCSSClassPrefix29(bem20("key-value-input", "empty-state")), styles.emptyState), children: "No attributes defined" }) : readOnly ? pairs.map((pair, index) => /* @__PURE__ */ jsxs42(
         "div",
         {
-          className: cx29(withVendorCSSClassPrefix28(bem20("key-value-input", "readonly-pair")), styles.readOnlyPair),
+          className: cx30(withVendorCSSClassPrefix29(bem20("key-value-input", "readonly-pair")), styles.readOnlyPair),
           children: [
-            /* @__PURE__ */ jsxs41(
+            /* @__PURE__ */ jsxs42(
               "span",
               {
-                className: cx29(withVendorCSSClassPrefix28(bem20("key-value-input", "readonly-key")), styles.readOnlyKey),
+                className: cx30(withVendorCSSClassPrefix29(bem20("key-value-input", "readonly-key")), styles.readOnlyKey),
                 children: [
                   pair.key,
                   ":"
                 ]
               }
             ),
-            /* @__PURE__ */ jsx90(
+            /* @__PURE__ */ jsx94(
               "span",
               {
-                className: cx29(withVendorCSSClassPrefix28(bem20("key-value-input", "readonly-value")), styles.readOnlyValue),
+                className: cx30(withVendorCSSClassPrefix29(bem20("key-value-input", "readonly-value")), styles.readOnlyValue),
                 children: pair.value
               }
             )
           ]
         },
         `${pair.key}-${index}`
-      )) : pairs.map((pair, index) => /* @__PURE__ */ jsxs41(
+      )) : pairs.map((pair, index) => /* @__PURE__ */ jsxs42(
         "div",
         {
-          className: cx29(withVendorCSSClassPrefix28(bem20("key-value-input", "pair-row")), styles.pairRow),
+          className: cx30(withVendorCSSClassPrefix29(bem20("key-value-input", "pair-row")), styles.pairRow),
           children: [
-            /* @__PURE__ */ jsx90(
+            /* @__PURE__ */ jsx94(
               TextField_default,
               {
                 placeholder: keyPlaceholder,
                 value: pair.key,
                 onChange: (e) => handleUpdatePair(index, "key", e.target.value),
                 disabled: disabled || readOnly,
-                className: cx29(withVendorCSSClassPrefix28(bem20("key-value-input", "pair-input")), styles.pairInput),
+                className: cx30(withVendorCSSClassPrefix29(bem20("key-value-input", "pair-input")), styles.pairInput),
                 "aria-label": `${keyLabel} ${index + 1}`
               }
             ),
-            /* @__PURE__ */ jsx90(
+            /* @__PURE__ */ jsx94(
               TextField_default,
               {
                 placeholder: valuePlaceholder,
                 value: pair.value,
                 onChange: (e) => handleUpdatePair(index, "value", e.target.value),
                 disabled: disabled || readOnly,
-                className: cx29(withVendorCSSClassPrefix28(bem20("key-value-input", "pair-input")), styles.pairInput),
+                className: cx30(withVendorCSSClassPrefix29(bem20("key-value-input", "pair-input")), styles.pairInput),
                 "aria-label": `${valueLabel} ${index + 1}`
               }
             ),
-            !readOnly && /* @__PURE__ */ jsx90(
+            !readOnly && /* @__PURE__ */ jsx94(
               "button",
               {
                 type: "button",
                 onClick: () => handleRemovePair(index),
                 disabled,
-                className: cx29(withVendorCSSClassPrefix28(bem20("key-value-input", "remove-button")), styles.removeButton),
+                className: cx30(withVendorCSSClassPrefix29(bem20("key-value-input", "remove-button")), styles.removeButton),
                 "aria-label": `${removeButtonText} ${pair.key}`,
-                children: /* @__PURE__ */ jsx90(X_default, { width: 16, height: 16 })
+                children: /* @__PURE__ */ jsx94(X_default, { width: 16, height: 16 })
               }
             )
           ]
         },
         `${pair.key}-${index}`
       )),
-      !readOnly && /* @__PURE__ */ jsxs41("div", { className: cx29(withVendorCSSClassPrefix28(bem20("key-value-input", "add-row")), styles.addRow), children: [
-        /* @__PURE__ */ jsx90(
+      !readOnly && /* @__PURE__ */ jsxs42("div", { className: cx30(withVendorCSSClassPrefix29(bem20("key-value-input", "add-row")), styles.addRow), children: [
+        /* @__PURE__ */ jsx94(
           TextField_default,
           {
             placeholder: keyPlaceholder,
             value: newKey,
             onChange: (e) => setNewKey(e.target.value),
             disabled,
-            className: cx29(withVendorCSSClassPrefix28(bem20("key-value-input", "pair-input")), styles.pairInput),
+            className: cx30(withVendorCSSClassPrefix29(bem20("key-value-input", "pair-input")), styles.pairInput),
             "aria-label": "New key"
           }
         ),
-        /* @__PURE__ */ jsx90(
+        /* @__PURE__ */ jsx94(
           TextField_default,
           {
             placeholder: valuePlaceholder,
             value: newValue,
             onChange: (e) => setNewValue(e.target.value),
             disabled,
-            className: cx29(withVendorCSSClassPrefix28(bem20("key-value-input", "pair-input")), styles.pairInput),
+            className: cx30(withVendorCSSClassPrefix29(bem20("key-value-input", "pair-input")), styles.pairInput),
             "aria-label": "New value",
             onKeyPress: (e) => {
               if (e.key === "Enter" && !isAddDisabled) {
@@ -12383,21 +12835,21 @@ var KeyValueInput = ({
             }
           }
         ),
-        /* @__PURE__ */ jsx90(
+        /* @__PURE__ */ jsx94(
           "button",
           {
             type: "button",
             onClick: handleAddPair,
             disabled: isAddDisabled,
-            className: cx29(withVendorCSSClassPrefix28(bem20("key-value-input", "add-button")), styles.addButton),
+            className: cx30(withVendorCSSClassPrefix29(bem20("key-value-input", "add-button")), styles.addButton),
             "aria-label": "Add new key-value pair",
-            children: /* @__PURE__ */ jsx90(Plus_default, { width: 16, height: 16 })
+            children: /* @__PURE__ */ jsx94(Plus_default, { width: 16, height: 16 })
           }
         )
       ] })
     ] }),
-    (helperText || error) && /* @__PURE__ */ jsx90("div", { className: cx29(withVendorCSSClassPrefix28(bem20("key-value-input", "helper-text")), styles.helperText), children: error || helperText }),
-    maxPairs && /* @__PURE__ */ jsxs41("div", { className: cx29(withVendorCSSClassPrefix28(bem20("key-value-input", "counter")), styles.counterText), children: [
+    (helperText || error) && /* @__PURE__ */ jsx94("div", { className: cx30(withVendorCSSClassPrefix29(bem20("key-value-input", "helper-text")), styles.helperText), children: error || helperText }),
+    maxPairs && /* @__PURE__ */ jsxs42("div", { className: cx30(withVendorCSSClassPrefix29(bem20("key-value-input", "counter")), styles.counterText), children: [
       pairs.length,
       " of ",
       maxPairs,
@@ -12564,7 +13016,7 @@ var useStyles26 = (theme, colorScheme) => {
 var BaseOrganizationProfile_styles_default = useStyles26;
 
 // src/components/presentation/OrganizationProfile/BaseOrganizationProfile.tsx
-import { Fragment as Fragment19, jsx as jsx91, jsxs as jsxs42 } from "react/jsx-runtime";
+import { Fragment as Fragment19, jsx as jsx95, jsxs as jsxs43 } from "react/jsx-runtime";
 var BaseOrganizationProfile = ({
   fallback = null,
   className = "",
@@ -12613,9 +13065,9 @@ var BaseOrganizationProfile = ({
 }) => {
   const { theme, colorScheme } = useTheme_default();
   const styles = BaseOrganizationProfile_styles_default(theme, colorScheme);
-  const [editedOrganization, setEditedOrganization] = useState27(organization);
-  const [editingFields, setEditingFields] = useState27({});
-  const PencilIcon = () => /* @__PURE__ */ jsx91(
+  const [editedOrganization, setEditedOrganization] = useState28(organization);
+  const [editingFields, setEditingFields] = useState28({});
+  const PencilIcon = () => /* @__PURE__ */ jsx95(
     "svg",
     {
       width: "16",
@@ -12626,16 +13078,16 @@ var BaseOrganizationProfile = ({
       strokeWidth: "2",
       strokeLinecap: "round",
       strokeLinejoin: "round",
-      children: /* @__PURE__ */ jsx91("path", { d: "M17 3a2.828 2.828 0 1 1 4 4L7.5 20.5 2 22l1.5-5.5L17 3z" })
+      children: /* @__PURE__ */ jsx95("path", { d: "M17 3a2.828 2.828 0 1 1 4 4L7.5 20.5 2 22l1.5-5.5L17 3z" })
     }
   );
-  const toggleFieldEdit = useCallback15((fieldName) => {
+  const toggleFieldEdit = useCallback16((fieldName) => {
     setEditingFields((prev) => ({
       ...prev,
       [fieldName]: !prev[fieldName]
     }));
   }, []);
-  const getFieldPlaceholder = useCallback15((fieldKey) => {
+  const getFieldPlaceholder = useCallback16((fieldKey) => {
     const fieldLabels = {
       name: "organization name",
       description: "organization description",
@@ -12646,7 +13098,7 @@ var BaseOrganizationProfile = ({
     const fieldLabel = fieldLabels[fieldKey] || fieldKey.toLowerCase();
     return `Enter ${fieldLabel}`;
   }, []);
-  const handleFieldSave = useCallback15(
+  const handleFieldSave = useCallback16(
     (fieldKey) => {
       if (!onUpdate || !fieldKey) return;
       const fieldValue = editedOrganization && fieldKey && editedOrganization[fieldKey] !== void 0 ? editedOrganization[fieldKey] : organization && organization[fieldKey] !== void 0 ? organization[fieldKey] : "";
@@ -12658,7 +13110,7 @@ var BaseOrganizationProfile = ({
     },
     [editedOrganization, organization, onUpdate, toggleFieldEdit]
   );
-  const handleFieldCancel = useCallback15(
+  const handleFieldCancel = useCallback16(
     (fieldKey) => {
       setEditedOrganization((prev) => ({
         ...prev,
@@ -12684,12 +13136,12 @@ var BaseOrganizationProfile = ({
         value: typeof fieldValue === "object" ? JSON.stringify(fieldValue) : String(fieldValue || ""),
         onChange: (e) => onEditValue(e.target ? e.target.value : e),
         placeholder: getFieldPlaceholder(key),
-        className: cx30(styles.fieldInput)
+        className: cx31(styles.fieldInput)
       };
       let fieldInput;
       if (key === "attributes") {
         const attributesValue = typeof fieldValue === "object" && fieldValue !== null ? fieldValue : {};
-        fieldInput = /* @__PURE__ */ jsx91(
+        fieldInput = /* @__PURE__ */ jsx95(
           KeyValueInput_default,
           {
             value: attributesValue,
@@ -12727,26 +13179,26 @@ var BaseOrganizationProfile = ({
           }
         );
       } else {
-        fieldInput = /* @__PURE__ */ jsx91(TextField_default, { ...commonProps });
+        fieldInput = /* @__PURE__ */ jsx95(TextField_default, { ...commonProps });
       }
-      return /* @__PURE__ */ jsxs42(Fragment19, { children: [
-        /* @__PURE__ */ jsx91("span", { className: cx30(styles.label), children: label }),
-        /* @__PURE__ */ jsx91("div", { className: cx30(styles.value), children: fieldInput })
+      return /* @__PURE__ */ jsxs43(Fragment19, { children: [
+        /* @__PURE__ */ jsx95("span", { className: cx31(styles.label), children: label }),
+        /* @__PURE__ */ jsx95("div", { className: cx31(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__ */ jsx91(KeyValueInput_default, { value, readOnly: true, label: "" }) : String(renderedValue);
+      displayValue = key === "attributes" && typeof value === "object" && value !== null ? /* @__PURE__ */ jsx95(KeyValueInput_default, { value, readOnly: true, label: "" }) : String(renderedValue);
     } else if (isFieldEditable) {
       displayValue = getFieldPlaceholder(key);
     } else {
       displayValue = "-";
     }
-    return /* @__PURE__ */ jsxs42(Fragment19, { children: [
-      /* @__PURE__ */ jsx91("span", { className: cx30(styles.label), children: label }),
-      /* @__PURE__ */ jsx91("div", { className: cx30(styles.value, !hasValue && styles.valueEmpty), children: !hasValue && isFieldEditable && onStartEdit ? /* @__PURE__ */ jsx91(
+    return /* @__PURE__ */ jsxs43(Fragment19, { children: [
+      /* @__PURE__ */ jsx95("span", { className: cx31(styles.label), children: label }),
+      /* @__PURE__ */ jsx95("div", { className: cx31(styles.value, !hasValue && styles.valueEmpty), children: !hasValue && isFieldEditable && onStartEdit ? /* @__PURE__ */ jsx95(
         Button_default,
         {
           onClick: onStartEdit,
@@ -12754,7 +13206,7 @@ var BaseOrganizationProfile = ({
           color: "secondary",
           size: "small",
           title: "Click to edit",
-          className: cx30(styles.placeholderButton),
+          className: cx31(styles.placeholderButton),
           children: displayValue
         }
       ) : displayValue })
@@ -12769,8 +13221,8 @@ var BaseOrganizationProfile = ({
     if (!shouldShow) {
       return null;
     }
-    return /* @__PURE__ */ jsxs42("div", { className: cx30(styles.field), children: [
-      /* @__PURE__ */ jsx91("div", { className: cx30(styles.fieldContent), children: renderField(
+    return /* @__PURE__ */ jsxs43("div", { className: cx31(styles.field), children: [
+      /* @__PURE__ */ jsx95("div", { className: cx31(styles.fieldContent), children: renderField(
         field,
         isFieldEditing,
         (value) => {
@@ -12780,8 +13232,8 @@ var BaseOrganizationProfile = ({
         },
         () => toggleFieldEdit(field.key)
       ) }),
-      isFieldEditable && /* @__PURE__ */ jsx91("div", { className: cx30(styles.fieldActions), children: isFieldEditing ? /* @__PURE__ */ jsxs42(Fragment19, { children: [
-        /* @__PURE__ */ jsx91(
+      isFieldEditable && /* @__PURE__ */ jsx95("div", { className: cx31(styles.fieldActions), children: isFieldEditing ? /* @__PURE__ */ jsxs43(Fragment19, { children: [
+        /* @__PURE__ */ jsx95(
           Button_default,
           {
             onClick: () => handleFieldSave(field.key),
@@ -12792,7 +13244,7 @@ var BaseOrganizationProfile = ({
             children: saveButtonText
           }
         ),
-        /* @__PURE__ */ jsx91(
+        /* @__PURE__ */ jsx95(
           Button_default,
           {
             onClick: () => handleFieldCancel(field.key),
@@ -12803,7 +13255,7 @@ var BaseOrganizationProfile = ({
             children: cancelButtonText
           }
         )
-      ] }) : hasValue && /* @__PURE__ */ jsx91(
+      ] }) : hasValue && /* @__PURE__ */ jsx95(
         Button_default,
         {
           onClick: () => toggleFieldEdit(field.key),
@@ -12811,8 +13263,8 @@ var BaseOrganizationProfile = ({
           color: "secondary",
           size: "small",
           title: "Edit field",
-          className: cx30(styles.editButton),
-          children: /* @__PURE__ */ jsx91(PencilIcon, {})
+          className: cx31(styles.editButton),
+          children: /* @__PURE__ */ jsx95(PencilIcon, {})
         }
       ) })
     ] }, field.key);
@@ -12820,23 +13272,23 @@ var BaseOrganizationProfile = ({
   if (!organization) {
     return fallback;
   }
-  const profileContent = /* @__PURE__ */ jsxs42(Card_default, { className: cx30(styles.root, cardLayout && styles.card, className), children: [
-    /* @__PURE__ */ jsxs42("div", { className: cx30(styles.header), children: [
-      /* @__PURE__ */ jsx91(Avatar, { name: getOrgInitials(organization.name), size: 80, alt: `${organization.name} logo` }),
-      /* @__PURE__ */ jsxs42("div", { className: cx30(styles.orgInfo), children: [
-        /* @__PURE__ */ jsx91("h2", { className: cx30(styles.name), children: organization.name }),
-        organization.orgHandle && /* @__PURE__ */ jsxs42("p", { className: cx30(styles.handle), children: [
+  const profileContent = /* @__PURE__ */ jsxs43(Card_default, { className: cx31(styles.root, cardLayout && styles.card, className), children: [
+    /* @__PURE__ */ jsxs43("div", { className: cx31(styles.header), children: [
+      /* @__PURE__ */ jsx95(Avatar, { name: getOrgInitials(organization.name), size: 80, alt: `${organization.name} logo` }),
+      /* @__PURE__ */ jsxs43("div", { className: cx31(styles.orgInfo), children: [
+        /* @__PURE__ */ jsx95("h2", { className: cx31(styles.name), children: organization.name }),
+        organization.orgHandle && /* @__PURE__ */ jsxs43("p", { className: cx31(styles.handle), children: [
           "@",
           organization.orgHandle
         ] })
       ] })
     ] }),
-    /* @__PURE__ */ jsx91("div", { className: cx30(styles.infoContainer), children: fields.map((field, index) => renderOrganizationField(field)) })
+    /* @__PURE__ */ jsx95("div", { className: cx31(styles.infoContainer), children: fields.map((field, index) => renderOrganizationField(field)) })
   ] });
   if (mode === "popup") {
-    return /* @__PURE__ */ jsx91(Dialog_default, { open, onOpenChange, children: /* @__PURE__ */ jsxs42(Dialog_default.Content, { children: [
-      /* @__PURE__ */ jsx91(Dialog_default.Heading, { children: title }),
-      /* @__PURE__ */ jsx91("div", { className: cx30(styles.popup), children: profileContent })
+    return /* @__PURE__ */ jsx95(Dialog_default, { open, onOpenChange, children: /* @__PURE__ */ jsxs43(Dialog_default.Content, { children: [
+      /* @__PURE__ */ jsx95(Dialog_default.Heading, { children: title }),
+      /* @__PURE__ */ jsx95("div", { className: cx31(styles.popup), children: profileContent })
     ] }) });
   }
   return profileContent;
@@ -12905,7 +13357,7 @@ var updateOrganization = async ({
 var updateOrganization_default = updateOrganization;
 
 // src/components/presentation/OrganizationProfile/OrganizationProfile.tsx
-import { jsx as jsx92 } from "react/jsx-runtime";
+import { jsx as jsx96 } from "react/jsx-runtime";
 var OrganizationProfile = ({
   organizationId,
   mode = "default",
@@ -12913,15 +13365,15 @@ var OrganizationProfile = ({
   onOpenChange,
   onUpdate,
   popupTitle,
-  loadingFallback = /* @__PURE__ */ jsx92("div", { children: "Loading organization..." }),
-  errorFallback = /* @__PURE__ */ jsx92("div", { children: "Failed to load organization data" }),
+  loadingFallback = /* @__PURE__ */ jsx96("div", { children: "Loading organization..." }),
+  errorFallback = /* @__PURE__ */ jsx96("div", { children: "Failed to load organization data" }),
   ...rest
 }) => {
   const { baseUrl } = useAsgardeo_default();
   const { t } = useTranslation_default();
-  const [organization, setOrganization] = useState28(null);
-  const [loading, setLoading] = useState28(true);
-  const [error, setError] = useState28(false);
+  const [organization, setOrganization] = useState29(null);
+  const [loading, setLoading] = useState29(true);
+  const [error, setError] = useState29(false);
   const fetchOrganization = async () => {
     if (!baseUrl || !organizationId) {
       setLoading(false);
@@ -12944,7 +13396,7 @@ var OrganizationProfile = ({
       setLoading(false);
     }
   };
-  useEffect15(() => {
+  useEffect16(() => {
     fetchOrganization();
   }, [baseUrl, organizationId]);
   const handleOrganizationUpdate = async (payload) => {
@@ -12965,7 +13417,7 @@ var OrganizationProfile = ({
       throw err;
     }
   };
-  return /* @__PURE__ */ jsx92(
+  return /* @__PURE__ */ jsx96(
     BaseOrganizationProfile_default,
     {
       organization,
@@ -12973,7 +13425,7 @@ var OrganizationProfile = ({
       mode: mode === "popup" ? "popup" : "inline",
       open,
       onOpenChange,
-      title: popupTitle || t("organization.profile.title"),
+      title: popupTitle || t("organization.profile.heading"),
       ...rest
     }
   );
@@ -12981,11 +13433,11 @@ var OrganizationProfile = ({
 var OrganizationProfile_default = OrganizationProfile;
 
 // src/components/presentation/OrganizationList/OrganizationList.tsx
-import { cx as cx32 } from "@emotion/css";
-import { useEffect as useEffect16, useState as useState29 } from "react";
+import { cx as cx33 } from "@emotion/css";
+import { useEffect as useEffect17, useState as useState30 } from "react";
 
 // src/components/presentation/OrganizationList/BaseOrganizationList.tsx
-import { cx as cx31 } from "@emotion/css";
+import { cx as cx32 } from "@emotion/css";
 import { useMemo as useMemo36 } from "react";
 
 // src/components/presentation/OrganizationList/BaseOrganizationList.styles.ts
@@ -13215,24 +13667,24 @@ var useStyles27 = (theme, colorScheme) => {
 var BaseOrganizationList_styles_default = useStyles27;
 
 // src/components/presentation/OrganizationList/BaseOrganizationList.tsx
-import { jsx as jsx93, jsxs as jsxs43 } from "react/jsx-runtime";
+import { jsx as jsx97, jsxs as jsxs44 } from "react/jsx-runtime";
 var defaultRenderOrganization = (organization, styles, t, onOrganizationSelect, showStatus) => {
-  return /* @__PURE__ */ jsxs43("div", { className: cx31(styles.organizationItem), children: [
-    /* @__PURE__ */ jsxs43("div", { className: cx31(styles.organizationContent), children: [
-      /* @__PURE__ */ jsx93(Avatar_default, { variant: "square", name: organization.name, size: 48, alt: `${organization.name} logo` }),
-      /* @__PURE__ */ jsxs43("div", { className: cx31(styles.organizationInfo), children: [
-        /* @__PURE__ */ jsx93(Typography_default, { variant: "h6", className: cx31(styles.organizationName), children: organization.name }),
-        /* @__PURE__ */ jsxs43(Typography_default, { variant: "body2", color: "textSecondary", className: cx31(styles.organizationHandle), children: [
+  return /* @__PURE__ */ jsxs44("div", { className: cx32(styles.organizationItem), children: [
+    /* @__PURE__ */ jsxs44("div", { className: cx32(styles.organizationContent), children: [
+      /* @__PURE__ */ jsx97(Avatar_default, { variant: "square", name: organization.name, size: 48, alt: `${organization.name} logo` }),
+      /* @__PURE__ */ jsxs44("div", { className: cx32(styles.organizationInfo), children: [
+        /* @__PURE__ */ jsx97(Typography_default, { variant: "h6", className: cx32(styles.organizationName), children: organization.name }),
+        /* @__PURE__ */ jsxs44(Typography_default, { variant: "body2", color: "textSecondary", className: cx32(styles.organizationHandle), children: [
           "@",
           organization.orgHandle
         ] }),
-        showStatus && /* @__PURE__ */ jsxs43(Typography_default, { variant: "body2", color: "textSecondary", className: cx31(styles.organizationStatus), children: [
+        showStatus && /* @__PURE__ */ jsxs44(Typography_default, { variant: "body2", color: "textSecondary", className: cx32(styles.organizationStatus), children: [
           t("organization.switcher.status.label"),
           " ",
-          /* @__PURE__ */ jsx93(
+          /* @__PURE__ */ jsx97(
             "span",
             {
-              className: cx31(
+              className: cx32(
                 styles.statusText,
                 organization.status === "ACTIVE" ? styles.statusTextActive : styles.statusTextInactive
               ),
@@ -13242,7 +13694,7 @@ var defaultRenderOrganization = (organization, styles, t, onOrganizationSelect,
         ] })
       ] })
     ] }),
-    organization.canSwitch && /* @__PURE__ */ jsx93("div", { className: cx31(styles.organizationActions), children: /* @__PURE__ */ jsx93(
+    organization.canSwitch && /* @__PURE__ */ jsx97("div", { className: cx32(styles.organizationActions), children: /* @__PURE__ */ jsx97(
       Button_default,
       {
         onClick: (e) => {
@@ -13251,22 +13703,22 @@ var defaultRenderOrganization = (organization, styles, t, onOrganizationSelect,
         },
         type: "button",
         size: "small",
-        children: t("organization.switcher.switch.button")
+        children: t("organization.switcher.buttons.switch.text")
       }
     ) })
   ] }, organization.id);
 };
-var defaultRenderLoading = (t, styles) => /* @__PURE__ */ jsxs43("div", { className: cx31(styles.loadingContainer), children: [
-  /* @__PURE__ */ jsx93(Spinner_default, { size: "medium" }),
-  /* @__PURE__ */ jsx93(Typography_default, { variant: "body1", color: "textSecondary", className: cx31(styles.loadingText), children: t("organization.switcher.loading.organizations") })
+var defaultRenderLoading = (t, styles) => /* @__PURE__ */ jsxs44("div", { className: cx32(styles.loadingContainer), children: [
+  /* @__PURE__ */ jsx97(Spinner_default, { size: "medium" }),
+  /* @__PURE__ */ jsx97(Typography_default, { variant: "body1", color: "textSecondary", className: cx32(styles.loadingText), children: t("organization.switcher.loading.placeholder.organizations") })
 ] });
-var defaultRenderError = (error, t, styles) => /* @__PURE__ */ jsx93("div", { className: cx31(styles.errorContainer), children: /* @__PURE__ */ jsxs43(Typography_default, { variant: "body1", color: "error", children: [
-  /* @__PURE__ */ jsx93("strong", { children: t("organization.switcher.error.prefix") }),
+var defaultRenderError = (error, t, styles) => /* @__PURE__ */ jsx97("div", { className: cx32(styles.errorContainer), children: /* @__PURE__ */ jsxs44(Typography_default, { variant: "body1", color: "error", children: [
+  /* @__PURE__ */ jsx97("strong", { children: t("organization.switcher.error.prefix") }),
   " ",
   error
 ] }) });
-var defaultRenderLoadMore = (onLoadMore, isLoading, t, styles) => /* @__PURE__ */ jsx93(Button_default, { onClick: onLoadMore, disabled: isLoading, className: cx31(styles.loadMoreButton), type: "button", fullWidth: true, children: isLoading ? t("organization.switcher.loading.more") : t("organization.switcher.load.more") });
-var defaultRenderEmpty = (t, styles) => /* @__PURE__ */ jsx93("div", { className: cx31(styles.emptyContainer), children: /* @__PURE__ */ jsx93(Typography_default, { variant: "body1", color: "textSecondary", className: cx31(styles.emptyText), children: t("organization.switcher.no.organizations") }) });
+var defaultRenderLoadMore = (onLoadMore, isLoading, t, styles) => /* @__PURE__ */ jsx97(Button_default, { onClick: onLoadMore, disabled: isLoading, className: cx32(styles.loadMoreButton), type: "button", fullWidth: true, children: isLoading ? t("organization.switcher.loading.more") : t("organization.switcher.buttons.load_more.text") });
+var defaultRenderEmpty = (t, styles) => /* @__PURE__ */ jsx97("div", { className: cx32(styles.emptyContainer), children: /* @__PURE__ */ jsx97(Typography_default, { variant: "body1", color: "textSecondary", className: cx32(styles.emptyText), children: t("organization.switcher.no.organizations") }) });
 var BaseOrganizationList = ({
   className = "",
   allOrganizations,
@@ -13309,53 +13761,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__ */ jsx93("div", { className: cx31(styles.root, className), style, children: renderLoadingWithStyles() });
+    const loadingContent = /* @__PURE__ */ jsx97("div", { className: cx32(styles.root, className), style, children: renderLoadingWithStyles() });
     if (mode === "popup") {
-      return /* @__PURE__ */ jsx93(Dialog_default, { open, onOpenChange, children: /* @__PURE__ */ jsxs43(Dialog_default.Content, { children: [
-        /* @__PURE__ */ jsx93(Dialog_default.Heading, { children: title }),
-        /* @__PURE__ */ jsx93("div", { className: cx31(styles.popupContent), children: loadingContent })
+      return /* @__PURE__ */ jsx97(Dialog_default, { open, onOpenChange, children: /* @__PURE__ */ jsxs44(Dialog_default.Content, { children: [
+        /* @__PURE__ */ jsx97(Dialog_default.Heading, { children: title }),
+        /* @__PURE__ */ jsx97("div", { className: cx32(styles.popupContent), children: loadingContent })
       ] }) });
     }
     return loadingContent;
   }
   if (error && organizationsWithSwitchAccess?.length === 0) {
-    const errorContent = /* @__PURE__ */ jsx93("div", { className: cx31(styles.root, className), style, children: renderErrorWithStyles(error) });
+    const errorContent = /* @__PURE__ */ jsx97("div", { className: cx32(styles.root, className), style, children: renderErrorWithStyles(error) });
     if (mode === "popup") {
-      return /* @__PURE__ */ jsx93(Dialog_default, { open, onOpenChange, children: /* @__PURE__ */ jsxs43(Dialog_default.Content, { children: [
-        /* @__PURE__ */ jsx93(Dialog_default.Heading, { children: title }),
-        /* @__PURE__ */ jsx93("div", { className: cx31(styles.popupContent), children: errorContent })
+      return /* @__PURE__ */ jsx97(Dialog_default, { open, onOpenChange, children: /* @__PURE__ */ jsxs44(Dialog_default.Content, { children: [
+        /* @__PURE__ */ jsx97(Dialog_default.Heading, { children: title }),
+        /* @__PURE__ */ jsx97("div", { className: cx32(styles.popupContent), children: errorContent })
       ] }) });
     }
     return errorContent;
   }
   if (!isLoading && organizationsWithSwitchAccess?.length === 0) {
-    const emptyContent = /* @__PURE__ */ jsx93("div", { className: cx31(styles.root, className), style, children: renderEmptyWithStyles() });
+    const emptyContent = /* @__PURE__ */ jsx97("div", { className: cx32(styles.root, className), style, children: renderEmptyWithStyles() });
     if (mode === "popup") {
-      return /* @__PURE__ */ jsx93(Dialog_default, { open, onOpenChange, children: /* @__PURE__ */ jsxs43(Dialog_default.Content, { children: [
-        /* @__PURE__ */ jsx93(Dialog_default.Heading, { children: title }),
-        /* @__PURE__ */ jsx93("div", { className: cx31(styles.popupContent), children: emptyContent })
+      return /* @__PURE__ */ jsx97(Dialog_default, { open, onOpenChange, children: /* @__PURE__ */ jsxs44(Dialog_default.Content, { children: [
+        /* @__PURE__ */ jsx97(Dialog_default.Heading, { children: title }),
+        /* @__PURE__ */ jsx97("div", { className: cx32(styles.popupContent), children: emptyContent })
       ] }) });
     }
     return emptyContent;
   }
-  const organizationListContent = /* @__PURE__ */ jsxs43("div", { className: cx31(styles.root, className), style, children: [
-    /* @__PURE__ */ jsxs43("div", { className: cx31(styles.header), children: [
-      /* @__PURE__ */ jsx93("div", { className: cx31(styles.headerInfo), children: /* @__PURE__ */ jsx93(Typography_default, { variant: "body2", color: "textSecondary", className: cx31(styles.subtitle), children: t("organization.switcher.showing.count", {
+  const organizationListContent = /* @__PURE__ */ jsxs44("div", { className: cx32(styles.root, className), style, children: [
+    /* @__PURE__ */ jsxs44("div", { className: cx32(styles.header), children: [
+      /* @__PURE__ */ jsx97("div", { className: cx32(styles.headerInfo), children: /* @__PURE__ */ jsx97(Typography_default, { variant: "body2", color: "textSecondary", className: cx32(styles.subtitle), children: t("organization.switcher.showing.count", {
         showing: organizationsWithSwitchAccess?.length,
         total: allOrganizations?.organizations?.length || 0
       }) }) }),
-      onRefresh && /* @__PURE__ */ jsx93(Button_default, { onClick: onRefresh, className: cx31(styles.refreshButton), type: "button", variant: "outline", size: "small", children: t("organization.switcher.refresh.button") })
+      onRefresh && /* @__PURE__ */ jsx97(Button_default, { onClick: onRefresh, className: cx32(styles.refreshButton), type: "button", variant: "outline", size: "small", children: t("organization.switcher.buttons.refresh.text") })
     ] }),
-    /* @__PURE__ */ jsx93("div", { className: cx31(styles.listContainer), children: organizationsWithSwitchAccess?.map(
+    /* @__PURE__ */ jsx97("div", { className: cx32(styles.listContainer), children: organizationsWithSwitchAccess?.map(
       (organization, index) => renderOrganizationWithStyles(organization, index)
     ) }),
-    error && organizationsWithSwitchAccess?.length > 0 && /* @__PURE__ */ jsx93("div", { className: cx31(styles.errorMargin), children: renderErrorWithStyles(error) }),
-    hasMore && fetchMore && /* @__PURE__ */ jsx93("div", { className: cx31(styles.loadMoreMargin), children: renderLoadMoreWithStyles(fetchMore, isLoadingMore) })
+    error && organizationsWithSwitchAccess?.length > 0 && /* @__PURE__ */ jsx97("div", { className: cx32(styles.errorMargin), children: renderErrorWithStyles(error) }),
+    hasMore && fetchMore && /* @__PURE__ */ jsx97("div", { className: cx32(styles.loadMoreMargin), children: renderLoadMoreWithStyles(fetchMore, isLoadingMore) })
   ] });
   if (mode === "popup") {
-    return /* @__PURE__ */ jsx93(Dialog_default, { open, onOpenChange, children: /* @__PURE__ */ jsxs43(Dialog_default.Content, { children: [
-      /* @__PURE__ */ jsx93(Dialog_default.Heading, { children: title }),
-      /* @__PURE__ */ jsx93("div", { className: cx31(styles.popupContent), children: organizationListContent })
+    return /* @__PURE__ */ jsx97(Dialog_default, { open, onOpenChange, children: /* @__PURE__ */ jsxs44(Dialog_default.Content, { children: [
+      /* @__PURE__ */ jsx97(Dialog_default.Heading, { children: title }),
+      /* @__PURE__ */ jsx97("div", { className: cx32(styles.popupContent), children: organizationListContent })
     ] }) });
   }
   return organizationListContent;
@@ -13426,7 +13878,7 @@ var useStyles28 = (theme, colorScheme) => {
 var OrganizationList_styles_default = useStyles28;
 
 // src/components/presentation/OrganizationList/OrganizationList.tsx
-import { jsx as jsx94 } from "react/jsx-runtime";
+import { jsx as jsx98 } from "react/jsx-runtime";
 var OrganizationList = ({
   autoFetch = true,
   filter = "",
@@ -13440,15 +13892,15 @@ var OrganizationList = ({
   const { theme, colorScheme } = useTheme_default();
   const styles = OrganizationList_styles_default(theme, colorScheme);
   const { getAllOrganizations: getAllOrganizations2, error, isLoading, myOrganizations } = useOrganization_default();
-  const [allOrganizations, setAllOrganizations] = useState29({
+  const [allOrganizations, setAllOrganizations] = useState30({
     organizations: []
   });
-  useEffect16(() => {
+  useEffect17(() => {
     (async () => {
       setAllOrganizations(await getAllOrganizations2());
     })();
   }, []);
-  return /* @__PURE__ */ jsx94("div", { className: cx32(styles.root, className), style, children: /* @__PURE__ */ jsx94("div", { className: cx32(styles.container), children: /* @__PURE__ */ jsx94(
+  return /* @__PURE__ */ jsx98("div", { className: cx33(styles.root, className), style, children: /* @__PURE__ */ jsx98("div", { className: cx33(styles.container), children: /* @__PURE__ */ jsx98(
     BaseOrganizationList_default,
     {
       allOrganizations,
@@ -13463,8 +13915,8 @@ var OrganizationList = ({
 var OrganizationList_default = OrganizationList;
 
 // src/components/primitives/Icons/BuildingAlt.tsx
-import { jsx as jsx95, jsxs as jsxs44 } from "react/jsx-runtime";
-var BuildingAlt = ({ color = "currentColor", height = 24, width = 24 }) => /* @__PURE__ */ jsxs44(
+import { jsx as jsx99, jsxs as jsxs45 } from "react/jsx-runtime";
+var BuildingAlt = ({ color = "currentColor", height = 24, width = 24 }) => /* @__PURE__ */ jsxs45(
   "svg",
   {
     width,
@@ -13477,13 +13929,13 @@ var BuildingAlt = ({ color = "currentColor", height = 24, width = 24 }) => /* @_
     strokeLinecap: "round",
     strokeLinejoin: "round",
     children: [
-      /* @__PURE__ */ jsx95("path", { d: "M6 22V4a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2v18Z" }),
-      /* @__PURE__ */ jsx95("path", { d: "M6 12H4a2 2 0 0 0-2 2v6a2 2 0 0 0 2 2h2" }),
-      /* @__PURE__ */ jsx95("path", { d: "M18 9h2a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2h-2" }),
-      /* @__PURE__ */ jsx95("path", { d: "M10 6h4" }),
-      /* @__PURE__ */ jsx95("path", { d: "M10 10h4" }),
-      /* @__PURE__ */ jsx95("path", { d: "M10 14h4" }),
-      /* @__PURE__ */ jsx95("path", { d: "M10 18h4" })
+      /* @__PURE__ */ jsx99("path", { d: "M6 22V4a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2v18Z" }),
+      /* @__PURE__ */ jsx99("path", { d: "M6 12H4a2 2 0 0 0-2 2v6a2 2 0 0 0 2 2h2" }),
+      /* @__PURE__ */ jsx99("path", { d: "M18 9h2a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2h-2" }),
+      /* @__PURE__ */ jsx99("path", { d: "M10 6h4" }),
+      /* @__PURE__ */ jsx99("path", { d: "M10 10h4" }),
+      /* @__PURE__ */ jsx99("path", { d: "M10 14h4" }),
+      /* @__PURE__ */ jsx99("path", { d: "M10 18h4" })
     ]
   }
 );
@@ -13491,7 +13943,7 @@ BuildingAlt.displayName = "BuildingAlt";
 var BuildingAlt_default = BuildingAlt;
 
 // src/components/presentation/OrganizationSwitcher/OrganizationSwitcher.tsx
-import { Fragment as Fragment20, jsx as jsx96, jsxs as jsxs45 } from "react/jsx-runtime";
+import { Fragment as Fragment20, jsx as jsx100, jsxs as jsxs46 } from "react/jsx-runtime";
 var OrganizationSwitcher = ({
   currentOrganization: propCurrentOrganization,
   fallback = null,
@@ -13507,15 +13959,15 @@ var OrganizationSwitcher = ({
     isLoading,
     error
   } = useOrganization_default();
-  const [isCreateOrgOpen, setIsCreateOrgOpen] = useState30(false);
-  const [isProfileOpen, setIsProfileOpen] = useState30(false);
-  const [isOrganizationListOpen, setIsOrganizationListOpen] = useState30(false);
+  const [isCreateOrgOpen, setIsCreateOrgOpen] = useState31(false);
+  const [isProfileOpen, setIsProfileOpen] = useState31(false);
+  const [isOrganizationListOpen, setIsOrganizationListOpen] = useState31(false);
   const { t } = useTranslation_default();
   if (!isSignedIn && fallback) {
     return fallback;
   }
   if (!isSignedIn) {
-    return /* @__PURE__ */ jsx96(Fragment20, {});
+    return /* @__PURE__ */ jsx100(Fragment20, {});
   }
   const organizations = propOrganizations || contextOrganizations || [];
   const currentOrganization = propCurrentOrganization || contextCurrentOrganization;
@@ -13529,19 +13981,19 @@ var OrganizationSwitcher = ({
   const defaultMenuItems = [];
   if (currentOrganization) {
     defaultMenuItems.push({
-      icon: /* @__PURE__ */ jsx96(BuildingAlt_default, {}),
+      icon: /* @__PURE__ */ jsx100(BuildingAlt_default, {}),
       label: t("organization.switcher.manage.organizations"),
       onClick: handleManageOrganizations
     });
   }
   defaultMenuItems.push({
-    icon: /* @__PURE__ */ jsx96("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: /* @__PURE__ */ jsx96("path", { d: "M12 5v14m-7-7h14" }) }),
+    icon: /* @__PURE__ */ jsx100("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: /* @__PURE__ */ jsx100("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(Fragment20, { children: [
-    /* @__PURE__ */ jsx96(
+  return /* @__PURE__ */ jsxs46(Fragment20, { children: [
+    /* @__PURE__ */ jsx100(
       BaseOrganizationSwitcher_default,
       {
         organizations,
@@ -13554,7 +14006,7 @@ var OrganizationSwitcher = ({
         ...props
       }
     ),
-    /* @__PURE__ */ jsx96(
+    /* @__PURE__ */ jsx100(
       CreateOrganization,
       {
         mode: "popup",
@@ -13568,7 +14020,7 @@ var OrganizationSwitcher = ({
         }
       }
     ),
-    currentOrganization && /* @__PURE__ */ jsx96(
+    currentOrganization && /* @__PURE__ */ jsx100(
       OrganizationProfile_default,
       {
         organizationId: currentOrganization.id,
@@ -13576,11 +14028,11 @@ var OrganizationSwitcher = ({
         open: isProfileOpen,
         onOpenChange: setIsProfileOpen,
         cardLayout: true,
-        loadingFallback: /* @__PURE__ */ jsx96("div", { children: t("organization.profile.loading") }),
-        errorFallback: /* @__PURE__ */ jsx96("div", { children: t("organization.profile.error") })
+        loadingFallback: /* @__PURE__ */ jsx100("div", { children: t("organization.profile.loading") }),
+        errorFallback: /* @__PURE__ */ jsx100("div", { children: t("organization.profile.error") })
       }
     ),
-    /* @__PURE__ */ jsx96(
+    /* @__PURE__ */ jsx100(
       OrganizationList_default,
       {
         mode: "popup",
@@ -13616,7 +14068,7 @@ export {
   BaseSignIn_default3 as BaseSignIn,
   BaseSignInButton_default as BaseSignInButton,
   BaseSignOutButton_default as BaseSignOutButton,
-  BaseSignUp_default as BaseSignUp,
+  BaseSignUp_default3 as BaseSignUp,
   BaseSignUpButton_default as BaseSignUpButton,
   BaseUser_default as BaseUser,
   BaseUserDropdown_default as BaseUserDropdown,
@@ -13674,7 +14126,7 @@ export {
   SignInButton_default as SignInButton,
   SignInWithEthereumButton_default as SignInWithEthereumButton,
   SignOutButton_default as SignOutButton,
-  SignUp_default as SignUp,
+  SignUp_default3 as SignUp,
   SignUpButton_default as SignUpButton,
   SignedIn_default as SignedIn,
   SignedOut_default as SignedOut,