@asgardeo/react 0.5.33 → 0.6.1

package/dist/cjs/index.js

@@ -36,13 +36,13 @@ __export(index_exports, {
   AlertTitle: () => AlertTitle,
   AsgardeoContext: () => AsgardeoContext_default,
   AsgardeoProvider: () => AsgardeoProvider_default,
-  AsgardeoRuntimeError: () => import_browser74.AsgardeoRuntimeError,
+  AsgardeoRuntimeError: () => import_browser76.AsgardeoRuntimeError,
   BaseCreateOrganization: () => BaseCreateOrganization,
   BaseOrganization: () => BaseOrganization_default,
   BaseOrganizationList: () => BaseOrganizationList_default,
   BaseOrganizationProfile: () => BaseOrganizationProfile_default,
   BaseOrganizationSwitcher: () => BaseOrganizationSwitcher_default,
-  BaseSignIn: () => BaseSignIn_default,
+  BaseSignIn: () => BaseSignIn_default3,
   BaseSignInButton: () => BaseSignInButton_default,
   BaseSignOutButton: () => BaseSignOutButton_default,
   BaseSignUp: () => BaseSignUp_default,
@@ -125,17 +125,17 @@ __export(index_exports, {
   UsernamePassword: () => UsernamePassword_default,
   createField: () => createField,
   createOrganization: () => createOrganization_default,
-  createPatchOperations: () => import_browser73.createPatchOperations,
+  createPatchOperations: () => import_browser75.createPatchOperations,
   createSignInOption: () => createSignInOption,
   createSignInOptionFromAuthenticator: () => createSignInOptionFromAuthenticator,
-  getActiveTheme: () => import_browser74.getActiveTheme,
+  getActiveTheme: () => import_browser76.getActiveTheme,
   getAllOrganizations: () => getAllOrganizations_default,
   getMeOrganizations: () => getMeOrganizations_default,
   getMeProfile: () => getScim2Me_default,
   getOrganization: () => getOrganization_default,
   getSchemas: () => getSchemas_default,
-  http: () => import_browser74.http,
-  navigate: () => import_browser74.navigate,
+  http: () => import_browser76.http,
+  navigate: () => import_browser76.navigate,
   updateMeProfile: () => updateMeProfile_default,
   updateOrganization: () => updateOrganization_default,
   useAlertVariant: () => useAlertVariant,
@@ -893,16 +893,22 @@ var AsgardeoReactClient = class extends import_browser6.AsgardeoBrowserClient {
     return Promise.resolve(String(response));
   }
   async signUp(...args) {
-    const configData = await this.asgardeo.getConfigData();
+    const config = await this.asgardeo.getConfigData();
     const firstArg = args[0];
+    const baseUrl = config?.baseUrl;
+    if (config.platform === import_browser6.Platform.AsgardeoV2) {
+      return (0, import_browser6.executeEmbeddedSignUpFlowV2)({
+        baseUrl,
+        payload: firstArg
+      });
+    }
     if (typeof firstArg === "object" && "flowType" in firstArg) {
-      const baseUrl = configData?.baseUrl;
       return (0, import_browser6.executeEmbeddedSignUpFlow)({
         baseUrl,
         payload: firstArg
       });
     }
-    (0, import_browser6.navigate)((0, import_browser6.getRedirectBasedSignUpUrl)(configData));
+    (0, import_browser6.navigate)((0, import_browser6.getRedirectBasedSignUpUrl)(config));
   }
   async request(requestConfig) {
     return this.asgardeo.httpRequest(requestConfig);
@@ -1390,6 +1396,7 @@ var ThemeProvider = ({
     };
   }, [inheritFromBranding, brandingTheme, themeConfig]);
   const theme = (0, import_react11.useMemo)(() => (0, import_browser10.createTheme)(finalThemeConfig, colorScheme === "dark"), [finalThemeConfig, colorScheme]);
+  const direction = finalThemeConfig?.direction || "ltr";
   const handleThemeChange = (0, import_react11.useCallback)((isDark) => {
     setColorScheme(isDark ? "dark" : "light");
   }, []);
@@ -1428,9 +1435,15 @@ var ThemeProvider = ({
   (0, import_react11.useEffect)(() => {
     applyThemeToDOM(theme);
   }, [theme]);
+  (0, import_react11.useEffect)(() => {
+    if (typeof document !== "undefined") {
+      document.documentElement.dir = direction;
+    }
+  }, [direction]);
   const value = {
     theme,
     colorScheme,
+    direction,
     toggleTheme,
     isBrandingLoading,
     brandingError,
@@ -1892,7 +1905,10 @@ var AsgardeoProvider = ({
         ThemeProvider_default,
         {
           inheritFromBranding: preferences?.theme?.inheritFromBranding,
-          theme: preferences?.theme?.overrides,
+          theme: {
+            ...preferences?.theme?.overrides,
+            direction: preferences?.theme?.direction
+          },
           mode: (0, import_browser12.getActiveTheme)(preferences?.theme?.mode),
           children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(FlowProvider_default, { children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(UserProvider_default, { profile: userProfile, onUpdateProfile: handleProfileUpdate, children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
             OrganizationProvider_default,
@@ -2990,6 +3006,9 @@ var Loading = ({ children, fallback = null }) => {
 Loading.displayName = "Loading";
 var Loading_default = Loading;
 
+// src/components/presentation/SignIn/BaseSignIn.tsx
+var import_browser48 = require("@asgardeo/browser");
+
 // src/components/presentation/SignIn/non-component-driven/BaseSignIn.tsx
 var import_browser44 = require("@asgardeo/browser");
 var import_css35 = require("@emotion/css");
@@ -3378,13 +3397,13 @@ var import_react34 = require("react");
 var useStyles4 = (theme, colorScheme, helperTextAlign, helperTextMarginLeft, hasError) => {
   return (0, import_react34.useMemo)(() => {
     const formControl = import_css10.css`
-      text-align: left;
+      text-align: start;
       margin-bottom: calc(${theme.vars.spacing.unit} * 2);
     `;
     const helperText = import_css10.css`
       margin-top: calc(${theme.vars.spacing.unit} / 2);
-      text-align: ${helperTextAlign};
-      ${helperTextMarginLeft && `margin-left: ${helperTextMarginLeft};`}
+      text-align: ${helperTextAlign === "left" ? "start" : helperTextAlign};
+      ${helperTextMarginLeft && `margin-inline-start: ${helperTextMarginLeft};`}
     `;
     const helperTextError = import_css10.css`
       color: ${theme.vars.colors.error.main};
@@ -3518,8 +3537,8 @@ var import_css14 = require("@emotion/css");
 var import_react36 = require("react");
 var useStyles6 = (theme, colorScheme, disabled, hasError, hasStartIcon, hasEndIcon) => {
   return (0, import_react36.useMemo)(() => {
-    const leftPadding = hasStartIcon ? `calc(${theme.vars.spacing.unit} * 5)` : `calc(${theme.vars.spacing.unit} * 1.5)`;
-    const rightPadding = hasEndIcon ? `calc(${theme.vars.spacing.unit} * 5)` : `calc(${theme.vars.spacing.unit} * 1.5)`;
+    const inlineStartPadding = hasStartIcon ? `calc(${theme.vars.spacing.unit} * 5)` : `calc(${theme.vars.spacing.unit} * 1.5)`;
+    const inlineEndPadding = hasEndIcon ? `calc(${theme.vars.spacing.unit} * 5)` : `calc(${theme.vars.spacing.unit} * 1.5)`;
     const inputContainer = import_css14.css`
       position: relative;
       display: flex;
@@ -3527,7 +3546,9 @@ var useStyles6 = (theme, colorScheme, disabled, hasError, hasStartIcon, hasEndIc
     `;
     const input = import_css14.css`
       width: 100%;
-      padding: ${theme.vars.spacing.unit} ${rightPadding} ${theme.vars.spacing.unit} ${leftPadding};
+      padding-block: ${theme.vars.spacing.unit};
+      padding-inline-start: ${inlineStartPadding};
+      padding-inline-end: ${inlineEndPadding};
       border: 1px solid ${hasError ? theme.vars.colors.error.main : theme.vars.colors.border};
       border-radius: ${theme.vars.components?.Field?.root?.borderRadius || theme.vars.borderRadius.medium};
       font-size: ${theme.vars.typography.fontSizes.md};
@@ -3598,11 +3619,11 @@ var useStyles6 = (theme, colorScheme, disabled, hasError, hasStartIcon, hasEndIc
     `;
     const startIcon = import_css14.css`
       ${icon};
-      left: ${theme.vars.spacing.unit};
+      inset-inline-start: ${theme.vars.spacing.unit};
     `;
     const endIcon = import_css14.css`
       ${icon};
-      right: ${theme.vars.spacing.unit};
+      inset-inline-end: ${theme.vars.spacing.unit};
     `;
     return {
       inputContainer,
@@ -4317,7 +4338,7 @@ var useStyles11 = (theme, colorScheme, hasError, required) => {
     const inputStyles = import_css24.css`
       width: calc(${theme.vars.spacing.unit} * 2.5);
       height: calc(${theme.vars.spacing.unit} * 2.5);
-      margin-right: ${theme.vars.spacing.unit};
+      margin-inline-end: ${theme.vars.spacing.unit};
       accent-color: ${theme.vars.colors.primary.main};
       cursor: pointer;
 
@@ -4437,6 +4458,7 @@ var createField = (config) => {
     required,
     value,
     onChange,
+    onBlur,
     disabled = false,
     error,
     className,
@@ -4453,7 +4475,8 @@ var createField = (config) => {
     error: validationError,
     className,
     value,
-    placeholder
+    placeholder,
+    onBlur
   };
   switch (type) {
     case import_browser32.FieldType.Password:
@@ -5834,8 +5857,9 @@ var useStyles14 = (theme, colorScheme, orientation, variant, color, hasChildren)
       height: 100%;
       min-height: calc(${theme.vars.spacing.unit} * 2);
       width: 1px;
-      border-left: 1px ${borderStyle} ${baseColor};
-      margin: 0 calc(${theme.vars.spacing.unit} * 1);
+      border-inline-start: 1px ${borderStyle} ${baseColor};
+      margin-block: 0;
+      margin-inline: calc(${theme.vars.spacing.unit} * 1);
     `;
     const horizontalDivider = import_css30.css`
       display: flex;
@@ -6872,12 +6896,6 @@ var BaseSignInContent = ({
 };
 var BaseSignIn_default = BaseSignIn;
 
-// src/components/presentation/SignIn/SignIn.tsx
-var import_browser50 = require("@asgardeo/browser");
-
-// src/components/presentation/SignIn/component-driven/SignIn.tsx
-var import_react60 = require("react");
-
 // src/components/presentation/SignIn/component-driven/BaseSignIn.tsx
 var import_react59 = require("react");
 var import_css37 = require("@emotion/css");
@@ -7097,6 +7115,7 @@ var createSignInComponentFromFlow = (component, formValues, touchedFields, formE
         value,
         error,
         onChange: (newValue) => onInputChange(identifier, newValue),
+        onBlur: () => options.onInputBlur?.(identifier),
         className: options.inputClassName
       });
       return import_react58.default.cloneElement(field, { key });
@@ -7273,6 +7292,8 @@ var BaseSignInContent2 = ({
   } = form;
   const handleInputChange = (name, value) => {
     setFormValue(name, value);
+  };
+  const handleInputBlur = (name) => {
     setFormTouched(name, true);
   };
   const handleSubmit = async (component, data) => {
@@ -7352,6 +7373,7 @@ var BaseSignInContent2 = ({
         buttonClassName: buttonClasses,
         error,
         inputClassName: inputClasses,
+        onInputBlur: handleInputBlur,
         onSubmit: handleSubmit,
         size,
         variant
@@ -7368,6 +7390,7 @@ var BaseSignInContent2 = ({
       error,
       inputClasses,
       buttonClasses,
+      handleInputBlur,
       handleSubmit
     ]
   );
@@ -7420,16 +7443,38 @@ var BaseSignInContent2 = ({
 };
 var BaseSignIn_default2 = BaseSignIn2;
 
+// src/components/presentation/SignIn/BaseSignIn.tsx
+var import_jsx_runtime57 = require("react/jsx-runtime");
+var BaseSignIn3 = (props) => {
+  const { platform } = useAsgardeo_default();
+  if (platform === import_browser48.Platform.AsgardeoV2) {
+    return /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(BaseSignIn_default2, { ...props });
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(BaseSignIn_default, { ...props });
+};
+var BaseSignIn_default3 = BaseSignIn3;
+
+// src/components/presentation/SignIn/SignIn.tsx
+var import_browser51 = require("@asgardeo/browser");
+
 // src/components/presentation/SignIn/component-driven/SignIn.tsx
-var import_browser49 = require("@asgardeo/browser");
+var import_react60 = require("react");
+var import_browser50 = require("@asgardeo/browser");
 
 // src/components/presentation/SignIn/component-driven/transformer.ts
-var import_browser48 = require("@asgardeo/browser");
+var import_browser49 = require("@asgardeo/browser");
 var generateId = (prefix) => {
   const suffix = Math.random().toString(36).substring(2, 6);
   return `${prefix}_${suffix}`;
 };
-var getInputVariant = (type) => {
+var getInputVariant = (type, name) => {
+  const lowerName = name.toLowerCase();
+  if (lowerName.includes("password")) {
+    return "PASSWORD";
+  }
+  if (lowerName.includes("email")) {
+    return "EMAIL";
+  }
   switch (type.toLowerCase()) {
     case "email":
       return "EMAIL";
@@ -7456,15 +7501,15 @@ var getInputPlaceholder = (name, type, t) => {
   return placeholder;
 };
 var convertSimpleInputToComponent = (input, t) => {
-  const variant = getInputVariant(input.type);
+  const variant = getInputVariant(input.type, input.name);
   const label = getInputLabel(input.name, input.type, t);
   const placeholder = getInputPlaceholder(input.name, input.type, t);
   return {
     id: generateId("input"),
-    type: import_browser48.EmbeddedFlowComponentType.Input,
+    type: import_browser49.EmbeddedFlowComponentType.Input,
     variant,
     config: {
-      type: input.type === "string" ? "text" : input.type,
+      type: input.type,
       label,
       placeholder,
       required: input.required,
@@ -7483,7 +7528,7 @@ var convertActionToComponent = (action, t) => {
   }
   return {
     id: generateId("action"),
-    type: import_browser48.EmbeddedFlowComponentType.Button,
+    type: import_browser49.EmbeddedFlowComponentType.Button,
     variant: "SECONDARY",
     config: {
       type: "button",
@@ -7499,7 +7544,7 @@ var transformSimpleToComponentDriven = (response, t) => {
   const actionComponents = response?.data?.actions?.map((action) => convertActionToComponent(action, t)) || [];
   const submitButton = inputComponents.length > 0 ? {
     id: generateId("button"),
-    type: import_browser48.EmbeddedFlowComponentType.Button,
+    type: import_browser49.EmbeddedFlowComponentType.Button,
     variant: "PRIMARY",
     config: {
       type: "submit",
@@ -7516,7 +7561,7 @@ var transformSimpleToComponentDriven = (response, t) => {
   if (formComponents.length > 0) {
     result.push({
       id: generateId("form"),
-      type: import_browser48.EmbeddedFlowComponentType.Form,
+      type: import_browser49.EmbeddedFlowComponentType.Form,
       config: {},
       components: formComponents
     });
@@ -7534,7 +7579,7 @@ var normalizeFlowResponse = (response, t) => {
 };
 
 // src/components/presentation/SignIn/component-driven/SignIn.tsx
-var import_jsx_runtime57 = require("react/jsx-runtime");
+var import_jsx_runtime58 = require("react/jsx-runtime");
 var SignIn = ({ className, size = "medium", onSuccess, onError, variant, children }) => {
   const { applicationId, afterSignInUrl, signIn, isInitialized, isLoading } = useAsgardeo_default();
   const { t } = useTranslation_default();
@@ -7556,7 +7601,7 @@ var SignIn = ({ className, size = "medium", onSuccess, onError, variant, childre
     const applicationIdFromUrl = urlParams.get("applicationId");
     const effectiveApplicationId = applicationId || applicationIdFromUrl;
     if (!flowIdFromUrl && !effectiveApplicationId) {
-      const error = new import_browser49.AsgardeoRuntimeError(
+      const error = new import_browser50.AsgardeoRuntimeError(
         "Either flowId or applicationId is required for authentication",
         "SignIn-initializeFlow-RuntimeError-001",
         "react",
@@ -7575,7 +7620,7 @@ var SignIn = ({ className, size = "medium", onSuccess, onError, variant, childre
       } else {
         response = await signIn({
           applicationId: effectiveApplicationId,
-          flowType: import_browser49.EmbeddedFlowType.Authentication
+          flowType: import_browser50.EmbeddedFlowType.Authentication
         });
       }
       const { flowId, components: components2 } = normalizeFlowResponse(response, t);
@@ -7588,7 +7633,7 @@ var SignIn = ({ className, size = "medium", onSuccess, onError, variant, childre
       const err = error;
       setFlowError(err);
       onError?.(err);
-      throw new import_browser49.AsgardeoRuntimeError(
+      throw new import_browser50.AsgardeoRuntimeError(
         `Failed to initialize authentication flow: ${error instanceof Error ? error.message : String(error)}`,
         "SignIn-initializeFlow-RuntimeError-002",
         "react",
@@ -7608,7 +7653,7 @@ var SignIn = ({ className, size = "medium", onSuccess, onError, variant, childre
         ...payload
       });
       const { flowId, components: components2 } = normalizeFlowResponse(response, t);
-      if (response.flowStatus === import_browser49.EmbeddedSignInFlowStatusV2.Complete) {
+      if (response.flowStatus === import_browser50.EmbeddedSignInFlowStatusV2.Complete) {
         onSuccess && onSuccess({
           redirectUrl: response.redirectUrl || afterSignInUrl,
           ...response.data
@@ -7624,7 +7669,7 @@ var SignIn = ({ className, size = "medium", onSuccess, onError, variant, childre
       const err = error;
       setFlowError(err);
       onError?.(err);
-      throw new import_browser49.AsgardeoRuntimeError(
+      throw new import_browser50.AsgardeoRuntimeError(
         `Failed to submit authentication flow: ${error instanceof Error ? error.message : String(error)}`,
         "SignIn-handleSubmit-RuntimeError-001",
         "react",
@@ -7648,9 +7693,9 @@ var SignIn = ({ className, size = "medium", onSuccess, onError, variant, childre
       components,
       error: flowError
     };
-    return /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(import_jsx_runtime57.Fragment, { children: children(renderProps) });
+    return /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(import_jsx_runtime58.Fragment, { children: children(renderProps) });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(
     BaseSignIn_default2,
     {
       components,
@@ -7666,7 +7711,7 @@ var SignIn = ({ className, size = "medium", onSuccess, onError, variant, childre
 var SignIn_default = SignIn;
 
 // src/components/presentation/SignIn/SignIn.tsx
-var import_jsx_runtime58 = require("react/jsx-runtime");
+var import_jsx_runtime59 = require("react/jsx-runtime");
 var SignIn2 = ({ className, size = "medium", children, ...rest }) => {
   const { signIn, afterSignInUrl, isInitialized, isLoading, platform } = useAsgardeo_default();
   const handleInitialize = async () => {
@@ -7686,8 +7731,8 @@ var SignIn2 = ({ className, size = "medium", children, ...rest }) => {
       window.location.href = url.toString();
     }
   };
-  if (platform === import_browser50.Platform.AsgardeoV2) {
-    return /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(
+  if (platform === import_browser51.Platform.AsgardeoV2) {
+    return /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(
       SignIn_default,
       {
         className,
@@ -7699,7 +7744,7 @@ var SignIn2 = ({ className, size = "medium", children, ...rest }) => {
       }
     );
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(
     BaseSignIn_default,
     {
       isLoading: isLoading || !isInitialized,
@@ -7716,15 +7761,15 @@ var SignIn2 = ({ className, size = "medium", children, ...rest }) => {
 var SignIn_default2 = SignIn2;
 
 // src/components/presentation/SignUp/BaseSignUp.tsx
-var import_browser58 = require("@asgardeo/browser");
+var import_browser60 = require("@asgardeo/browser");
 var import_css39 = require("@emotion/css");
 var import_react62 = require("react");
 
 // src/components/presentation/SignUp/SignUpOptionFactory.tsx
-var import_browser57 = require("@asgardeo/browser");
+var import_browser58 = require("@asgardeo/browser");
 
 // src/components/adapters/CheckboxInput.tsx
-var import_browser51 = require("@asgardeo/browser");
+var import_browser52 = require("@asgardeo/browser");
 var CheckboxInput = ({
   component,
   formValues,
@@ -7738,7 +7783,7 @@ var CheckboxInput = ({
   const value = formValues[fieldName] || false;
   const error = touchedFields[fieldName] ? formErrors[fieldName] : void 0;
   return createField({
-    type: import_browser51.FieldType.Checkbox,
+    type: import_browser52.FieldType.Checkbox,
     name: fieldName,
     label: config["label"] || "",
     placeholder: config["placeholder"] || "",
@@ -7752,7 +7797,7 @@ var CheckboxInput = ({
 var CheckboxInput_default = CheckboxInput;
 
 // src/components/adapters/DateInput.tsx
-var import_browser52 = require("@asgardeo/browser");
+var import_browser53 = require("@asgardeo/browser");
 var DateInput = ({
   component,
   formValues,
@@ -7766,7 +7811,7 @@ var DateInput = ({
   const value = formValues[fieldName] || "";
   const error = touchedFields[fieldName] ? formErrors[fieldName] : void 0;
   return createField({
-    type: import_browser52.FieldType.Date,
+    type: import_browser53.FieldType.Date,
     name: fieldName,
     label: config["label"] || "",
     placeholder: config["placeholder"] || "",
@@ -7780,13 +7825,13 @@ var DateInput = ({
 var DateInput_default = DateInput;
 
 // src/components/adapters/DividerComponent.tsx
-var import_jsx_runtime59 = require("react/jsx-runtime");
+var import_jsx_runtime60 = require("react/jsx-runtime");
 var DividerComponent = ({ component }) => {
   const { theme } = useTheme_default();
   const config = component.config || {};
   const text = config["text"] || "";
   const variant = component.variant?.toLowerCase() || "horizontal";
-  return /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(
     Divider_default,
     {
       orientation: variant === "vertical" ? "vertical" : "horizontal",
@@ -7799,7 +7844,7 @@ var DividerComponent = ({ component }) => {
 var DividerComponent_default = DividerComponent;
 
 // src/components/adapters/EmailInput.tsx
-var import_browser53 = require("@asgardeo/browser");
+var import_browser54 = require("@asgardeo/browser");
 var EmailInput = ({
   component,
   formValues,
@@ -7813,7 +7858,7 @@ var EmailInput = ({
   const value = formValues[fieldName] || "";
   const error = touchedFields[fieldName] ? formErrors[fieldName] : void 0;
   return createField({
-    type: import_browser53.FieldType.Email,
+    type: import_browser54.FieldType.Email,
     name: fieldName,
     label: config["label"] || "Email",
     placeholder: config["placeholder"] || "Enter your email",
@@ -7827,7 +7872,7 @@ var EmailInput = ({
 var EmailInput_default = EmailInput;
 
 // src/components/adapters/FormContainer.tsx
-var import_jsx_runtime60 = require("react/jsx-runtime");
+var import_jsx_runtime61 = require("react/jsx-runtime");
 var FormContainer = (props) => {
   const { component } = props;
   if (component.components && component.components.length > 0) {
@@ -7840,19 +7885,19 @@ var FormContainer = (props) => {
         props.onSubmit(submitButton, props.formValues);
       }
     };
-    return /* @__PURE__ */ (0, import_jsx_runtime60.jsx)("form", { onSubmit: handleFormSubmit, style: { display: "flex", flexDirection: "column" }, children: component.components.map(
+    return /* @__PURE__ */ (0, import_jsx_runtime61.jsx)("form", { onSubmit: handleFormSubmit, style: { display: "flex", flexDirection: "column" }, children: component.components.map(
       (childComponent, index) => createSignUpComponent({
         ...props,
         component: childComponent
       })
     ) }, component.id);
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime60.jsx)("div", {}, component.id);
+  return /* @__PURE__ */ (0, import_jsx_runtime61.jsx)("div", {}, component.id);
 };
 var FormContainer_default = FormContainer;
 
 // src/components/adapters/ImageComponent.tsx
-var import_jsx_runtime61 = require("react/jsx-runtime");
+var import_jsx_runtime62 = require("react/jsx-runtime");
 var ImageComponent = ({ component }) => {
   const { theme } = useTheme_default();
   const config = component.config || {};
@@ -7869,7 +7914,7 @@ var ImageComponent = ({ component }) => {
   if (!src) {
     return null;
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime61.jsx)("div", { style: { textAlign: "center" }, children: /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime62.jsx)("div", { style: { textAlign: "center" }, children: /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(
     "img",
     {
       src,
@@ -7884,7 +7929,7 @@ var ImageComponent = ({ component }) => {
 var ImageComponent_default = ImageComponent;
 
 // src/components/adapters/NumberInput.tsx
-var import_browser54 = require("@asgardeo/browser");
+var import_browser55 = require("@asgardeo/browser");
 var NumberInput = ({
   component,
   formValues,
@@ -7898,7 +7943,7 @@ var NumberInput = ({
   const value = formValues[fieldName] || "";
   const error = touchedFields[fieldName] ? formErrors[fieldName] : void 0;
   return createField({
-    type: import_browser54.FieldType.Number,
+    type: import_browser55.FieldType.Number,
     name: fieldName,
     label: config["label"] || "",
     placeholder: config["placeholder"] || "",
@@ -7912,7 +7957,7 @@ var NumberInput = ({
 var NumberInput_default = NumberInput;
 
 // src/components/adapters/PasswordInput.tsx
-var import_browser55 = require("@asgardeo/browser");
+var import_browser56 = require("@asgardeo/browser");
 var PasswordInput = ({
   component,
   formValues,
@@ -7958,7 +8003,7 @@ var PasswordInput = ({
   });
   const hint = validationHints.length > 0 ? validationHints.join(", ") : config["hint"] || "";
   return createField({
-    type: import_browser55.FieldType.Password,
+    type: import_browser56.FieldType.Password,
     name: fieldName,
     label: config["label"] || "Password",
     placeholder: config["placeholder"] || "Enter your password",
@@ -7972,7 +8017,7 @@ var PasswordInput = ({
 var PasswordInput_default = PasswordInput;
 
 // src/components/adapters/SubmitButton.tsx
-var import_jsx_runtime62 = require("react/jsx-runtime");
+var import_jsx_runtime63 = require("react/jsx-runtime");
 var ButtonComponent = ({
   component,
   isLoading,
@@ -8005,7 +8050,7 @@ var ButtonComponent = ({
       onSubmit(component);
     }
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(
     Button_default,
     {
       type: buttonType === "submit" ? "submit" : "button",
@@ -8016,7 +8061,7 @@ var ButtonComponent = ({
       onClick: buttonType !== "submit" ? handleClick : void 0,
       className: buttonClassName,
       style: { width: "100%" },
-      children: isLoading ? /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(Spinner_default, { size: "small" }) : buttonText
+      children: isLoading ? /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(Spinner_default, { size: "small" }) : buttonText
     },
     component.id
   );
@@ -8024,7 +8069,7 @@ var ButtonComponent = ({
 var SubmitButton_default = ButtonComponent;
 
 // src/components/adapters/TelephoneInput.tsx
-var import_jsx_runtime63 = require("react/jsx-runtime");
+var import_jsx_runtime64 = require("react/jsx-runtime");
 var TelephoneInput = ({
   component,
   formValues,
@@ -8037,7 +8082,7 @@ var TelephoneInput = ({
   const fieldName = config["identifier"] || config["name"] || component.id;
   const value = formValues[fieldName] || "";
   const error = touchedFields[fieldName] ? formErrors[fieldName] : void 0;
-  return /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(
     TextField_default,
     {
       name: fieldName,
@@ -8057,7 +8102,7 @@ var TelephoneInput = ({
 var TelephoneInput_default = TelephoneInput;
 
 // src/components/adapters/TextInput.tsx
-var import_browser56 = require("@asgardeo/browser");
+var import_browser57 = require("@asgardeo/browser");
 var TextInput = ({
   component,
   formValues,
@@ -8071,7 +8116,7 @@ var TextInput = ({
   const value = formValues[fieldName] || "";
   const error = touchedFields[fieldName] ? formErrors[fieldName] : void 0;
   return createField({
-    type: import_browser56.FieldType.Text,
+    type: import_browser57.FieldType.Text,
     name: fieldName,
     label: config["label"] || "",
     placeholder: config["placeholder"] || "",
@@ -8085,7 +8130,7 @@ var TextInput = ({
 var TextInput_default = TextInput;
 
 // src/components/adapters/Typography.tsx
-var import_jsx_runtime64 = require("react/jsx-runtime");
+var import_jsx_runtime65 = require("react/jsx-runtime");
 var TypographyComponent = ({ component }) => {
   const { theme } = useTheme_default();
   const config = component.config || {};
@@ -8126,7 +8171,7 @@ var TypographyComponent = ({ component }) => {
     default:
       typographyVariant = "body1";
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(
     Typography_default,
     {
       variant: typographyVariant,
@@ -8139,66 +8184,66 @@ var TypographyComponent = ({ component }) => {
 var Typography_default2 = TypographyComponent;
 
 // src/components/presentation/SignUp/SignUpOptionFactory.tsx
-var import_jsx_runtime65 = require("react/jsx-runtime");
+var import_jsx_runtime66 = require("react/jsx-runtime");
 var createSignUpComponent = ({ component, onSubmit, ...rest }) => {
   switch (component.type) {
-    case import_browser57.EmbeddedFlowComponentType.Typography:
-      return /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(Typography_default2, { component, onSubmit, ...rest });
-    case import_browser57.EmbeddedFlowComponentType.Input:
+    case import_browser58.EmbeddedFlowComponentType.Typography:
+      return /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(Typography_default2, { component, onSubmit, ...rest });
+    case import_browser58.EmbeddedFlowComponentType.Input:
       const inputVariant = component.variant?.toUpperCase();
       const inputType = component.config["type"]?.toLowerCase();
       if (inputVariant === "EMAIL" || inputType === "email") {
-        return /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(EmailInput_default, { component, onSubmit, ...rest });
+        return /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(EmailInput_default, { component, onSubmit, ...rest });
       }
       if (inputVariant === "PASSWORD" || inputType === "password") {
-        return /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(PasswordInput_default, { component, onSubmit, ...rest });
+        return /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(PasswordInput_default, { component, onSubmit, ...rest });
       }
       if (inputVariant === "TELEPHONE" || inputType === "tel") {
-        return /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(TelephoneInput_default, { component, onSubmit, ...rest });
+        return /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(TelephoneInput_default, { component, onSubmit, ...rest });
       }
       if (inputVariant === "NUMBER" || inputType === "number") {
-        return /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(NumberInput_default, { component, onSubmit, ...rest });
+        return /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(NumberInput_default, { component, onSubmit, ...rest });
       }
       if (inputVariant === "DATE" || inputType === "date") {
-        return /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(DateInput_default, { component, onSubmit, ...rest });
+        return /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(DateInput_default, { component, onSubmit, ...rest });
       }
       if (inputVariant === "CHECKBOX" || inputType === "checkbox") {
-        return /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(CheckboxInput_default, { component, onSubmit, ...rest });
+        return /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(CheckboxInput_default, { component, onSubmit, ...rest });
       }
-      return /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(TextInput_default, { component, onSubmit, ...rest });
-    case import_browser57.EmbeddedFlowComponentType.Button: {
+      return /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(TextInput_default, { component, onSubmit, ...rest });
+    case import_browser58.EmbeddedFlowComponentType.Button: {
       const buttonVariant = component.variant?.toUpperCase();
       const buttonText = component.config["text"] || component.config["label"] || "";
       if (buttonVariant === "SOCIAL") {
         if (buttonText.toLowerCase().includes("google")) {
-          return /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(GoogleButton_default, { onClick: () => onSubmit(component, {}), ...rest, children: buttonText });
+          return /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(GoogleButton_default, { onClick: () => onSubmit(component, {}), ...rest, children: buttonText });
         }
         if (buttonText.toLowerCase().includes("github")) {
-          return /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(GitHubButton_default, { onClick: () => onSubmit(component, {}), ...rest, children: buttonText });
+          return /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(GitHubButton_default, { onClick: () => onSubmit(component, {}), ...rest, children: buttonText });
         }
         if (buttonText.toLowerCase().includes("microsoft")) {
-          return /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(MicrosoftButton_default, { onClick: () => onSubmit(component, {}), ...rest, children: buttonText });
+          return /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(MicrosoftButton_default, { onClick: () => onSubmit(component, {}), ...rest, children: buttonText });
         }
         if (buttonText.toLowerCase().includes("facebook")) {
-          return /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(FacebookButton_default, { onClick: () => onSubmit(component, {}), ...rest, children: buttonText });
+          return /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(FacebookButton_default, { onClick: () => onSubmit(component, {}), ...rest, children: buttonText });
         }
         if (buttonText.toLowerCase().includes("linkedin")) {
-          return /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(LinkedInButton_default, { onClick: () => onSubmit(component, {}), ...rest, children: buttonText });
+          return /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(LinkedInButton_default, { onClick: () => onSubmit(component, {}), ...rest, children: buttonText });
         }
         if (buttonText.toLowerCase().includes("ethereum")) {
-          return /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(SignInWithEthereumButton_default, { onClick: () => onSubmit(component, {}), ...rest, children: buttonText });
+          return /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(SignInWithEthereumButton_default, { onClick: () => onSubmit(component, {}), ...rest, children: buttonText });
         }
       }
-      return /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(SubmitButton_default, { component, onSubmit, ...rest });
+      return /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(SubmitButton_default, { component, onSubmit, ...rest });
     }
-    case import_browser57.EmbeddedFlowComponentType.Form:
-      return /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(FormContainer_default, { component, onSubmit, ...rest });
-    case import_browser57.EmbeddedFlowComponentType.Divider:
-      return /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(DividerComponent_default, { component, onSubmit, ...rest });
-    case import_browser57.EmbeddedFlowComponentType.Image:
-      return /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(ImageComponent_default, { component, onSubmit, ...rest });
+    case import_browser58.EmbeddedFlowComponentType.Form:
+      return /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(FormContainer_default, { component, onSubmit, ...rest });
+    case import_browser58.EmbeddedFlowComponentType.Divider:
+      return /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(DividerComponent_default, { component, onSubmit, ...rest });
+    case import_browser58.EmbeddedFlowComponentType.Image:
+      return /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(ImageComponent_default, { component, onSubmit, ...rest });
     default:
-      return /* @__PURE__ */ (0, import_jsx_runtime65.jsx)("div", {});
+      return /* @__PURE__ */ (0, import_jsx_runtime66.jsx)("div", {});
   }
 };
 var createSignUpOptionFromComponent = (component, formValues, touchedFields, formErrors, isLoading, isFormValid, onInputChange, options) => createSignUpComponent({
@@ -8228,6 +8273,149 @@ var renderSignUpComponents = (components, formValues, touchedFields, formErrors,
   )
 ).filter(Boolean);
 
+// src/components/presentation/SignUp/transformer.ts
+var import_browser59 = require("@asgardeo/browser");
+var generateId2 = (prefix) => {
+  const suffix = Math.random().toString(36).substring(2, 6);
+  return `${prefix}_${suffix}`;
+};
+var getInputVariant2 = (type, name) => {
+  const lowerName = name.toLowerCase();
+  if (lowerName.includes("password")) {
+    return "PASSWORD";
+  }
+  if (lowerName.includes("email")) {
+    return "EMAIL";
+  }
+  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) => {
+  const variant = getInputVariant2(input.type, input.name);
+  const label = getInputLabel2(input.name, input.type, t);
+  const placeholder = getInputPlaceholder2(input.name, input.type, t);
+  return {
+    id: generateId2("input"),
+    type: import_browser59.EmbeddedFlowComponentType.Input,
+    variant,
+    config: {
+      type: input.type,
+      label,
+      placeholder,
+      required: input.required,
+      identifier: input.name,
+      hint: ""
+    },
+    components: []
+  };
+};
+var convertActionToComponent2 = (action, t) => {
+  const i18nKey = `elements.buttons.${action.id}`;
+  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: import_browser59.EmbeddedFlowComponentType.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: import_browser59.EmbeddedFlowComponentType.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: generateId2("form"),
+      type: import_browser59.EmbeddedFlowComponentType.Form,
+      config: {},
+      components: formComponents
+    });
+  }
+  if (actionComponents.length > 0) {
+    result.push(...actionComponents);
+  }
+  return result;
+};
+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;
+        }
+      } catch {
+        errorMessage = error.message;
+      }
+    } else if (error.message) {
+      errorMessage = error.message;
+    }
+  } else if (typeof error === "string") {
+    errorMessage = error;
+  }
+  return errorMessage;
+};
+
 // src/components/presentation/SignUp/BaseSignUp.styles.ts
 var import_css38 = require("@emotion/css");
 var import_react61 = require("react");
@@ -8370,13 +8558,13 @@ var useStyles18 = (theme, colorScheme) => {
 var BaseSignUp_styles_default = useStyles18;
 
 // src/components/presentation/SignUp/BaseSignUp.tsx
-var import_jsx_runtime66 = require("react/jsx-runtime");
+var import_jsx_runtime67 = require("react/jsx-runtime");
 var BaseSignUp = (props) => {
   const { theme, colorScheme } = useTheme_default();
   const styles = BaseSignUp_styles_default(theme, colorScheme);
-  return /* @__PURE__ */ (0, import_jsx_runtime66.jsxs)("div", { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime66.jsx)("div", { className: styles.logoContainer, children: /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(Logo_default, { size: "large" }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(FlowProvider_default, { children: /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(BaseSignUpContent, { ...props }) })
+  return /* @__PURE__ */ (0, import_jsx_runtime67.jsxs)("div", { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime67.jsx)("div", { className: styles.logoContainer, children: /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(Logo_default, { size: "large" }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(FlowProvider_default, { children: /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(BaseSignUpContent, { ...props }) })
   ] });
 };
 var BaseSignUpContent = ({
@@ -8393,24 +8581,54 @@ var BaseSignUpContent = ({
   messageClassName = "",
   size = "medium",
   variant = "outlined",
-  isInitialized
+  isInitialized,
+  children
 }) => {
   const { theme, colorScheme } = useTheme_default();
   const { t } = useTranslation_default();
-  const { subtitle: flowSubtitle, title: flowTitle, messages: flowMessages } = useFlow_default();
+  const { subtitle: flowSubtitle, title: flowTitle, messages: flowMessages, addMessage, clearMessages } = useFlow_default();
   const styles = BaseSignUp_styles_default(theme, colorScheme);
+  const handleError = (0, import_react62.useCallback)(
+    (error) => {
+      const errorMessage = extractErrorMessage(error, t);
+      clearMessages();
+      addMessage({
+        type: "error",
+        message: errorMessage
+      });
+    },
+    [t, addMessage, clearMessages]
+  );
   const [isLoading, setIsLoading] = (0, import_react62.useState)(false);
   const [isFlowInitialized, setIsFlowInitialized] = (0, import_react62.useState)(false);
   const [currentFlow, setCurrentFlow] = (0, import_react62.useState)(null);
-  const [error, setError] = (0, import_react62.useState)(null);
   const [formData, setFormData] = (0, import_react62.useState)({});
   const initializationAttemptedRef = (0, import_react62.useRef)(false);
+  const normalizeFlowResponse2 = (0, import_react62.useCallback)(
+    (response) => {
+      if (response?.data?.components && Array.isArray(response.data.components)) {
+        return response;
+      }
+      if (response?.data && (response.data.inputs || response.data.actions)) {
+        const transformedComponents = transformSimpleToComponentDriven2(response, t);
+        return {
+          ...response,
+          data: {
+            ...response.data,
+            components: transformedComponents
+          }
+        };
+      }
+      return response;
+    },
+    [t]
+  );
   const extractFormFields = (0, import_react62.useCallback)(
     (components) => {
       const fields = [];
       const processComponents = (comps) => {
         comps.forEach((component) => {
-          if (component.type === import_browser58.EmbeddedFlowComponentType.Input) {
+          if (component.type === import_browser60.EmbeddedFlowComponentType.Input) {
             const config = component.config || {};
             fields.push({
               name: config.name || component.id,
@@ -8484,7 +8702,7 @@ var BaseSignUpContent = ({
       return;
     }
     setIsLoading(true);
-    setError(null);
+    clearMessages();
     try {
       const filteredInputs = {};
       if (data) {
@@ -8500,13 +8718,14 @@ var BaseSignUpContent = ({
         inputs: filteredInputs,
         actionId: component.id
       };
-      const response = await onSubmit(payload);
+      const rawResponse = await onSubmit(payload);
+      const response = normalizeFlowResponse2(rawResponse);
       onFlowChange?.(response);
-      if (response.flowStatus === import_browser58.EmbeddedFlowStatus.Complete) {
+      if (response.flowStatus === import_browser60.EmbeddedFlowStatus.Complete) {
         onComplete?.(response);
         return;
       }
-      if (response.flowStatus === import_browser58.EmbeddedFlowStatus.Incomplete) {
+      if (response.flowStatus === import_browser60.EmbeddedFlowStatus.Incomplete) {
         if (handleRedirectionIfNeeded(response, component)) {
           return;
         }
@@ -8514,15 +8733,14 @@ var BaseSignUpContent = ({
         setupFormFields(response);
       }
     } catch (err) {
-      const errorMessage = err instanceof import_browser58.AsgardeoAPIError ? err.message : t("errors.sign.up.flow.failure");
-      setError(errorMessage);
+      handleError(err);
       onError?.(err);
     } finally {
       setIsLoading(false);
     }
   };
   const handleRedirectionIfNeeded = (response, component) => {
-    if (response?.type === import_browser58.EmbeddedFlowResponseType.Redirection && response?.data?.redirectURL) {
+    if (response?.type === import_browser60.EmbeddedFlowResponseType.Redirection && response?.data?.redirectURL) {
       const redirectUrl = response.data.redirectURL;
       const popup = window.open(redirectUrl, "oauth_popup", "width=500,height=600,scrollbars=yes,resizable=yes");
       if (!popup) {
@@ -8551,17 +8769,16 @@ var BaseSignUpContent = ({
           try {
             const continueResponse = await onSubmit(payload);
             onFlowChange?.(continueResponse);
-            if (continueResponse.flowStatus === import_browser58.EmbeddedFlowStatus.Complete) {
+            if (continueResponse.flowStatus === import_browser60.EmbeddedFlowStatus.Complete) {
               onComplete?.(continueResponse);
-            } else if (continueResponse.flowStatus === import_browser58.EmbeddedFlowStatus.Incomplete) {
+            } else if (continueResponse.flowStatus === import_browser60.EmbeddedFlowStatus.Incomplete) {
               setCurrentFlow(continueResponse);
               setupFormFields(continueResponse);
             }
             popup.close();
             cleanup();
           } catch (err) {
-            const errorMessage = err instanceof import_browser58.AsgardeoAPIError ? err.message : t("errors.sign.up.flow.failure");
-            setError(errorMessage);
+            handleError(err);
             onError?.(err);
             popup.close();
             cleanup();
@@ -8592,9 +8809,9 @@ var BaseSignUpContent = ({
               const url = new URL(popupUrl);
               const code = url.searchParams.get("code");
               const state = url.searchParams.get("state");
-              const error2 = url.searchParams.get("error");
-              if (error2) {
-                console.error("OAuth error:", error2);
+              const error = url.searchParams.get("error");
+              if (error) {
+                console.error("OAuth error:", error);
                 popup.close();
                 cleanup();
                 return;
@@ -8612,16 +8829,15 @@ var BaseSignUpContent = ({
                 try {
                   const continueResponse = await onSubmit(payload);
                   onFlowChange?.(continueResponse);
-                  if (continueResponse.flowStatus === import_browser58.EmbeddedFlowStatus.Complete) {
+                  if (continueResponse.flowStatus === import_browser60.EmbeddedFlowStatus.Complete) {
                     onComplete?.(continueResponse);
-                  } else if (continueResponse.flowStatus === import_browser58.EmbeddedFlowStatus.Incomplete) {
+                  } else if (continueResponse.flowStatus === import_browser60.EmbeddedFlowStatus.Incomplete) {
                     setCurrentFlow(continueResponse);
                     setupFormFields(continueResponse);
                   }
                   popup.close();
                 } catch (err) {
-                  const errorMessage = err instanceof import_browser58.AsgardeoAPIError ? err.message : t("errors.sign.up.flow.failure");
-                  setError(errorMessage);
+                  handleError(err);
                   onError?.(err);
                   popup.close();
                 }
@@ -8639,30 +8855,30 @@ var BaseSignUpContent = ({
   };
   const containerClasses = (0, import_css39.cx)(
     [
-      (0, import_browser58.withVendorCSSClassPrefix)("signup"),
-      (0, import_browser58.withVendorCSSClassPrefix)(`signup--${size}`),
-      (0, import_browser58.withVendorCSSClassPrefix)(`signup--${variant}`)
+      (0, import_browser60.withVendorCSSClassPrefix)("signup"),
+      (0, import_browser60.withVendorCSSClassPrefix)(`signup--${size}`),
+      (0, import_browser60.withVendorCSSClassPrefix)(`signup--${variant}`)
     ],
     className
   );
   const inputClasses = (0, import_css39.cx)(
     [
-      (0, import_browser58.withVendorCSSClassPrefix)("signup__input"),
-      size === "small" && (0, import_browser58.withVendorCSSClassPrefix)("signup__input--small"),
-      size === "large" && (0, import_browser58.withVendorCSSClassPrefix)("signup__input--large")
+      (0, import_browser60.withVendorCSSClassPrefix)("signup__input"),
+      size === "small" && (0, import_browser60.withVendorCSSClassPrefix)("signup__input--small"),
+      size === "large" && (0, import_browser60.withVendorCSSClassPrefix)("signup__input--large")
     ],
     inputClassName
   );
   const buttonClasses = (0, import_css39.cx)(
     [
-      (0, import_browser58.withVendorCSSClassPrefix)("signup__button"),
-      size === "small" && (0, import_browser58.withVendorCSSClassPrefix)("signup__button--small"),
-      size === "large" && (0, import_browser58.withVendorCSSClassPrefix)("signup__button--large")
+      (0, import_browser60.withVendorCSSClassPrefix)("signup__button"),
+      size === "small" && (0, import_browser60.withVendorCSSClassPrefix)("signup__button--small"),
+      size === "large" && (0, import_browser60.withVendorCSSClassPrefix)("signup__button--large")
     ],
     buttonClassName
   );
-  const errorClasses = (0, import_css39.cx)([(0, import_browser58.withVendorCSSClassPrefix)("signup__error")], errorClassName);
-  const messageClasses = (0, import_css39.cx)([(0, import_browser58.withVendorCSSClassPrefix)("signup__messages")], messageClassName);
+  const errorClasses = (0, import_css39.cx)([(0, import_browser60.withVendorCSSClassPrefix)("signup__error")], errorClassName);
+  const messageClasses = (0, import_css39.cx)([(0, import_browser60.withVendorCSSClassPrefix)("signup__messages")], messageClassName);
   const renderComponents = (0, import_react62.useCallback)(
     (components) => renderSignUpComponents(
       components,
@@ -8674,7 +8890,6 @@ var BaseSignUpContent = ({
       handleInputChange,
       {
         buttonClassName: buttonClasses,
-        error,
         inputClassName: inputClasses,
         onSubmit: handleSubmit,
         size,
@@ -8689,7 +8904,6 @@ var BaseSignUpContent = ({
       isLoading,
       size,
       variant,
-      error,
       inputClasses,
       buttonClasses,
       handleSubmit
@@ -8700,22 +8914,22 @@ var BaseSignUpContent = ({
       initializationAttemptedRef.current = true;
       (async () => {
         setIsLoading(true);
-        setError(null);
+        clearMessages();
         try {
-          const response = await onInitialize();
+          const rawResponse = await onInitialize();
+          const response = normalizeFlowResponse2(rawResponse);
           setCurrentFlow(response);
           setIsFlowInitialized(true);
           onFlowChange?.(response);
-          if (response.flowStatus === import_browser58.EmbeddedFlowStatus.Complete) {
+          if (response.flowStatus === import_browser60.EmbeddedFlowStatus.Complete) {
             onComplete?.(response);
             return;
           }
-          if (response.flowStatus === import_browser58.EmbeddedFlowStatus.Incomplete) {
+          if (response.flowStatus === import_browser60.EmbeddedFlowStatus.Incomplete) {
             setupFormFields(response);
           }
         } catch (err) {
-          const errorMessage = err instanceof Error ? err.message : t("errors.sign.up.flow.initialization.failure");
-          setError(errorMessage);
+          handleError(err);
           onError?.(err);
         } finally {
           setIsLoading(false);
@@ -8730,42 +8944,58 @@ var BaseSignUpContent = ({
     onError,
     onFlowChange,
     setupFormFields,
+    normalizeFlowResponse2,
     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.title"),
+      subtitle: flowSubtitle || t("signup.subtitle"),
+      messages: flowMessages || []
+    };
+    return /* @__PURE__ */ (0, import_jsx_runtime67.jsx)("div", { className: containerClasses, children: children(renderProps) });
+  }
   if (!isFlowInitialized && isLoading) {
-    return /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(Card_default, { className: (0, import_css39.cx)(containerClasses, styles.card), variant, children: /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(Card_default.Content, { children: /* @__PURE__ */ (0, import_jsx_runtime66.jsx)("div", { className: styles.loadingContainer, children: /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(Spinner_default, { size: "medium" }) }) }) });
+    return /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(Card_default, { className: (0, import_css39.cx)(containerClasses, styles.card), variant, children: /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(Card_default.Content, { children: /* @__PURE__ */ (0, import_jsx_runtime67.jsx)("div", { className: styles.loadingContainer, children: /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(Spinner_default, { size: "medium" }) }) }) });
   }
   if (!currentFlow) {
-    return /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(Card_default, { className: (0, import_css39.cx)(containerClasses, styles.card), variant, children: /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(Card_default.Content, { children: /* @__PURE__ */ (0, import_jsx_runtime66.jsxs)(Alert_default, { variant: "error", className: errorClasses, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(Alert_default.Title, { children: t("errors.title") || "Error" }),
-      /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(Alert_default.Description, { children: error || t("errors.sign.up.flow.initialization.failure") })
+    return /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(Card_default, { className: (0, import_css39.cx)(containerClasses, styles.card), variant, children: /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(Card_default.Content, { children: /* @__PURE__ */ (0, import_jsx_runtime67.jsxs)(Alert_default, { variant: "error", className: errorClasses, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(Alert_default.Title, { children: t("errors.title") }),
+      /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(Alert_default.Description, { children: t("errors.sign.up.flow.initialization.failure") })
     ] }) }) });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime66.jsxs)(Card_default, { className: (0, import_css39.cx)(containerClasses, styles.card), variant, children: [
-    flowMessages && flowMessages.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(Card_default.Header, { className: styles.header, children: /* @__PURE__ */ (0, import_jsx_runtime66.jsx)("div", { className: styles.messagesContainer, children: flowMessages.map((message, index) => /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(
-      Alert_default,
-      {
-        variant: message.type?.toLowerCase() === "error" ? "error" : "info",
-        className: (0, import_css39.cx)(styles.messageItem, messageClasses),
-        children: /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(Alert_default.Description, { children: message.message })
-      },
-      message.id || index
-    )) }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime66.jsxs)(Card_default.Content, { children: [
-      error && /* @__PURE__ */ (0, import_jsx_runtime66.jsxs)(Alert_default, { variant: "error", className: (0, import_css39.cx)(styles.errorContainer, errorClasses), children: [
-        /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(Alert_default.Title, { children: t("errors.title") || "Error" }),
-        /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(Alert_default.Description, { children: error })
-      ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime66.jsx)("div", { className: styles.contentContainer, children: currentFlow.data?.components && renderComponents(currentFlow.data.components) })
-    ] })
+  return /* @__PURE__ */ (0, import_jsx_runtime67.jsxs)(Card_default, { className: (0, import_css39.cx)(containerClasses, styles.card), variant, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime67.jsxs)(Card_default.Header, { className: styles.header, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(Card_default.Title, { level: 2, className: styles.title, children: flowTitle || t("signup.title") }),
+      /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(Typography_default, { variant: "body1", className: styles.subtitle, children: flowSubtitle || t("signup.subtitle") }),
+      flowMessages && flowMessages.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime67.jsx)("div", { className: styles.flowMessagesContainer, children: flowMessages.map((message, index) => /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(
+        Alert_default,
+        {
+          variant: message.type?.toLowerCase() === "error" ? "error" : "info",
+          className: (0, import_css39.cx)(styles.flowMessageItem, messageClasses),
+          children: /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(Alert_default.Description, { children: message.message })
+        },
+        message.id || index
+      )) })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(Card_default.Content, { children: /* @__PURE__ */ (0, import_jsx_runtime67.jsx)("div", { className: styles.contentContainer, children: currentFlow.data?.components && currentFlow.data.components.length > 0 ? renderComponents(currentFlow.data.components) : /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(Alert_default, { variant: "warning", children: /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(Typography_default, { variant: "body1", children: t("errors.sign.up.components.not.available") }) }) }) })
   ] });
 };
 var BaseSignUp_default = BaseSignUp;
 
 // src/components/presentation/SignUp/SignUp.tsx
-var import_browser59 = require("@asgardeo/browser");
-var import_jsx_runtime67 = require("react/jsx-runtime");
+var import_browser61 = require("@asgardeo/browser");
+var import_jsx_runtime68 = require("react/jsx-runtime");
 var SignUp = ({
   className,
   size = "medium",
@@ -8773,26 +9003,29 @@ var SignUp = ({
   onError,
   onComplete,
   shouldRedirectAfterSignUp = true,
+  children,
   ...rest
 }) => {
-  const { signUp, isInitialized } = useAsgardeo_default();
-  const handleInitialize = async (payload) => await signUp(
-    payload || {
-      flowType: import_browser59.EmbeddedFlowType.Registration
-    }
-  );
+  const { signUp, isInitialized, applicationId, platform } = useAsgardeo_default();
+  const handleInitialize = async (payload) => {
+    const initialPayload = payload || {
+      flowType: import_browser61.EmbeddedFlowType.Registration,
+      ...platform === import_browser61.Platform.AsgardeoV2 && applicationId && { applicationId }
+    };
+    return await signUp(initialPayload);
+  };
   const handleOnSubmit = async (payload) => await signUp(payload);
   const handleComplete = (response) => {
     onComplete?.(response);
-    if (shouldRedirectAfterSignUp && response?.type !== import_browser59.EmbeddedFlowResponseType.Redirection && afterSignUpUrl) {
+    if (shouldRedirectAfterSignUp && response?.type !== import_browser61.EmbeddedFlowResponseType.Redirection && afterSignUpUrl) {
       window.location.href = afterSignUpUrl;
     }
-    if (shouldRedirectAfterSignUp && response?.type === import_browser59.EmbeddedFlowResponseType.Redirection && response?.data?.redirectURL && !response.data.redirectURL.includes("oauth") && // Not a social provider redirect
+    if (shouldRedirectAfterSignUp && response?.type === import_browser61.EmbeddedFlowResponseType.Redirection && response?.data?.redirectURL && !response.data.redirectURL.includes("oauth") && // Not a social provider redirect
     !response.data.redirectURL.includes("auth")) {
       window.location.href = response.data.redirectURL;
     }
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(
     BaseSignUp_default,
     {
       afterSignUpUrl,
@@ -8803,6 +9036,7 @@ var SignUp = ({
       className,
       size,
       isInitialized,
+      children,
       ...rest
     }
   );
@@ -8810,75 +9044,75 @@ var SignUp = ({
 var SignUp_default = SignUp;
 
 // src/components/presentation/User/BaseUser.tsx
-var import_jsx_runtime68 = require("react/jsx-runtime");
+var import_jsx_runtime69 = require("react/jsx-runtime");
 var BaseUser = ({ user, children, fallback = null }) => {
   if (!user) {
-    return /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(import_jsx_runtime68.Fragment, { children: fallback });
+    return /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(import_jsx_runtime69.Fragment, { children: fallback });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(import_jsx_runtime68.Fragment, { children: children(user) });
+  return /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(import_jsx_runtime69.Fragment, { children: children(user) });
 };
 BaseUser.displayName = "BaseUser";
 var BaseUser_default = BaseUser;
 
 // src/components/presentation/User/User.tsx
-var import_jsx_runtime69 = require("react/jsx-runtime");
+var import_jsx_runtime70 = require("react/jsx-runtime");
 var User5 = ({ children, fallback = null }) => {
   const { user } = useAsgardeo_default();
-  return /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(BaseUser_default, { user, fallback, children });
+  return /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(BaseUser_default, { user, fallback, children });
 };
 User5.displayName = "User";
 var User_default = User5;
 
 // src/components/presentation/Organization/BaseOrganization.tsx
-var import_jsx_runtime70 = require("react/jsx-runtime");
+var import_jsx_runtime71 = require("react/jsx-runtime");
 var BaseOrganization = ({ children, fallback = null, organization }) => {
   if (!organization) {
-    return /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(import_jsx_runtime70.Fragment, { children: fallback });
+    return /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(import_jsx_runtime71.Fragment, { children: fallback });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(import_jsx_runtime70.Fragment, { children: children(organization) });
+  return /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(import_jsx_runtime71.Fragment, { children: children(organization) });
 };
 BaseOrganization.displayName = "BaseOrganization";
 var BaseOrganization_default = BaseOrganization;
 
 // src/components/presentation/Organization/Organization.tsx
-var import_jsx_runtime71 = require("react/jsx-runtime");
+var import_jsx_runtime72 = require("react/jsx-runtime");
 var Organization5 = ({ children, fallback = null }) => {
   const { currentOrganization } = useOrganization_default();
-  return /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(BaseOrganization_default, { organization: currentOrganization, fallback, children });
+  return /* @__PURE__ */ (0, import_jsx_runtime72.jsx)(BaseOrganization_default, { organization: currentOrganization, fallback, children });
 };
 Organization5.displayName = "Organization";
 var Organization_default = Organization5;
 
 // src/components/presentation/UserProfile/BaseUserProfile.tsx
-var import_browser65 = require("@asgardeo/browser");
+var import_browser67 = require("@asgardeo/browser");
 var import_css47 = require("@emotion/css");
 var import_react71 = require("react");
 
 // src/utils/getMappedUserProfileValue.ts
-var import_browser60 = require("@asgardeo/browser");
+var import_browser62 = require("@asgardeo/browser");
 var getMappedUserProfileValue = (key, mappings, user) => {
   if (!key || !mappings || !user) {
     return void 0;
   }
   const mapping = mappings[key];
   if (!mapping) {
-    return (0, import_browser60.get)(user, key);
+    return (0, import_browser62.get)(user, key);
   }
   if (Array.isArray(mapping)) {
     for (const path of mapping) {
-      const value = (0, import_browser60.get)(user, path);
+      const value = (0, import_browser62.get)(user, path);
       if (value !== void 0 && value !== null && value !== "") {
         return value;
       }
     }
     return void 0;
   }
-  return (0, import_browser60.get)(user, mapping);
+  return (0, import_browser62.get)(user, mapping);
 };
 var getMappedUserProfileValue_default = getMappedUserProfileValue;
 
 // src/components/primitives/Avatar/Avatar.tsx
-var import_browser61 = require("@asgardeo/browser");
+var import_browser63 = require("@asgardeo/browser");
 var import_css41 = require("@emotion/css");
 var import_react64 = require("react");
 
@@ -8950,7 +9184,7 @@ var useStyles19 = (theme, colorScheme, size, variant, backgroundColor) => {
 var Avatar_styles_default = useStyles19;
 
 // src/components/primitives/Avatar/Avatar.tsx
-var import_jsx_runtime72 = require("react/jsx-runtime");
+var import_jsx_runtime73 = require("react/jsx-runtime");
 var Avatar = ({
   alt = "User avatar",
   background = "random",
@@ -8997,33 +9231,33 @@ var Avatar = ({
   const getInitials = (fullName) => fullName.split(" ").map((part) => part[0]).slice(0, 2).join("").toUpperCase();
   const renderContent = () => {
     if (imageUrl) {
-      return /* @__PURE__ */ (0, import_jsx_runtime72.jsx)("img", { src: imageUrl, alt, className: (0, import_css41.cx)((0, import_browser61.withVendorCSSClassPrefix)((0, import_browser61.bem)("avatar", "image")), styles.image) });
+      return /* @__PURE__ */ (0, import_jsx_runtime73.jsx)("img", { src: imageUrl, alt, className: (0, import_css41.cx)((0, import_browser63.withVendorCSSClassPrefix)((0, import_browser63.bem)("avatar", "image")), styles.image) });
     }
     if (name) {
       return getInitials(name);
     }
     if (isLoading) {
-      return /* @__PURE__ */ (0, import_jsx_runtime72.jsx)("div", { className: (0, import_css41.cx)((0, import_browser61.withVendorCSSClassPrefix)((0, import_browser61.bem)("avatar", "skeleton")), styles.skeleton) });
+      return /* @__PURE__ */ (0, import_jsx_runtime73.jsx)("div", { className: (0, import_css41.cx)((0, import_browser63.withVendorCSSClassPrefix)((0, import_browser63.bem)("avatar", "skeleton")), styles.skeleton) });
     }
-    return /* @__PURE__ */ (0, import_jsx_runtime72.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime73.jsx)(
       "svg",
       {
         xmlns: "http://www.w3.org/2000/svg",
         viewBox: "0 0 640 640",
-        className: (0, import_css41.cx)((0, import_browser61.withVendorCSSClassPrefix)((0, import_browser61.bem)("avatar", "icon")), styles.icon),
-        children: /* @__PURE__ */ (0, import_jsx_runtime72.jsx)("path", { d: "M240 192C240 147.8 275.8 112 320 112C364.2 112 400 147.8 400 192C400 236.2 364.2 272 320 272C275.8 272 240 236.2 240 192zM448 192C448 121.3 390.7 64 320 64C249.3 64 192 121.3 192 192C192 262.7 249.3 320 320 320C390.7 320 448 262.7 448 192zM144 544C144 473.3 201.3 416 272 416L368 416C438.7 416 496 473.3 496 544L496 552C496 565.3 506.7 576 520 576C533.3 576 544 565.3 544 552L544 544C544 446.8 465.2 368 368 368L272 368C174.8 368 96 446.8 96 544L96 552C96 565.3 106.7 576 120 576C133.3 576 144 565.3 144 552L144 544z" })
+        className: (0, import_css41.cx)((0, import_browser63.withVendorCSSClassPrefix)((0, import_browser63.bem)("avatar", "icon")), styles.icon),
+        children: /* @__PURE__ */ (0, import_jsx_runtime73.jsx)("path", { d: "M240 192C240 147.8 275.8 112 320 112C364.2 112 400 147.8 400 192C400 236.2 364.2 272 320 272C275.8 272 240 236.2 240 192zM448 192C448 121.3 390.7 64 320 64C249.3 64 192 121.3 192 192C192 262.7 249.3 320 320 320C390.7 320 448 262.7 448 192zM144 544C144 473.3 201.3 416 272 416L368 416C438.7 416 496 473.3 496 544L496 552C496 565.3 506.7 576 520 576C533.3 576 544 565.3 544 552L544 544C544 446.8 465.2 368 368 368L272 368C174.8 368 96 446.8 96 544L96 552C96 565.3 106.7 576 120 576C133.3 576 144 565.3 144 552L144 544z" })
       }
     );
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime72.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime73.jsx)(
     "div",
     {
       className: (0, import_css41.cx)(
-        (0, import_browser61.withVendorCSSClassPrefix)((0, import_browser61.bem)("avatar")),
+        (0, import_browser63.withVendorCSSClassPrefix)((0, import_browser63.bem)("avatar")),
         styles.avatar,
         styles.variant,
-        (0, import_browser61.withVendorCSSClassPrefix)((0, import_browser61.bem)("avatar", null, variant)),
-        isDefaultState && (0, import_browser61.withVendorCSSClassPrefix)((0, import_browser61.bem)("avatar", "default")),
+        (0, import_browser63.withVendorCSSClassPrefix)((0, import_browser63.bem)("avatar", null, variant)),
+        isDefaultState && (0, import_browser63.withVendorCSSClassPrefix)((0, import_browser63.bem)("avatar", "default")),
         className
       ),
       children: renderContent()
@@ -9033,14 +9267,14 @@ var Avatar = ({
 var Avatar_default = Avatar;
 
 // src/components/primitives/Dialog/Dialog.tsx
-var import_browser62 = require("@asgardeo/browser");
+var import_browser64 = require("@asgardeo/browser");
 var import_react66 = require("@floating-ui/react");
 var import_css43 = require("@emotion/css");
 var import_react67 = __toESM(require("react"), 1);
 
 // src/components/primitives/Icons/LogOut.tsx
-var import_jsx_runtime73 = require("react/jsx-runtime");
-var LogOut = (props) => /* @__PURE__ */ (0, import_jsx_runtime73.jsxs)(
+var import_jsx_runtime74 = require("react/jsx-runtime");
+var LogOut = (props) => /* @__PURE__ */ (0, import_jsx_runtime74.jsxs)(
   "svg",
   {
     xmlns: "http://www.w3.org/2000/svg",
@@ -9054,17 +9288,17 @@ var LogOut = (props) => /* @__PURE__ */ (0, import_jsx_runtime73.jsxs)(
     strokeLinejoin: "round",
     ...props,
     children: [
-      /* @__PURE__ */ (0, import_jsx_runtime73.jsx)("path", { d: "m16 17 5-5-5-5" }),
-      /* @__PURE__ */ (0, import_jsx_runtime73.jsx)("path", { d: "M21 12H9" }),
-      /* @__PURE__ */ (0, import_jsx_runtime73.jsx)("path", { d: "M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4" })
+      /* @__PURE__ */ (0, import_jsx_runtime74.jsx)("path", { d: "m16 17 5-5-5-5" }),
+      /* @__PURE__ */ (0, import_jsx_runtime74.jsx)("path", { d: "M21 12H9" }),
+      /* @__PURE__ */ (0, import_jsx_runtime74.jsx)("path", { d: "M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4" })
     ]
   }
 );
 var LogOut_default = LogOut;
 
 // src/components/primitives/Icons/Plus.tsx
-var import_jsx_runtime74 = require("react/jsx-runtime");
-var Plus = (props) => /* @__PURE__ */ (0, import_jsx_runtime74.jsxs)(
+var import_jsx_runtime75 = require("react/jsx-runtime");
+var Plus = (props) => /* @__PURE__ */ (0, import_jsx_runtime75.jsxs)(
   "svg",
   {
     xmlns: "http://www.w3.org/2000/svg",
@@ -9078,16 +9312,16 @@ var Plus = (props) => /* @__PURE__ */ (0, import_jsx_runtime74.jsxs)(
     strokeLinejoin: "round",
     ...props,
     children: [
-      /* @__PURE__ */ (0, import_jsx_runtime74.jsx)("path", { d: "M5 12h14" }),
-      /* @__PURE__ */ (0, import_jsx_runtime74.jsx)("path", { d: "M12 5v14" })
+      /* @__PURE__ */ (0, import_jsx_runtime75.jsx)("path", { d: "M5 12h14" }),
+      /* @__PURE__ */ (0, import_jsx_runtime75.jsx)("path", { d: "M12 5v14" })
     ]
   }
 );
 var Plus_default = Plus;
 
 // src/components/primitives/Icons/User.tsx
-var import_jsx_runtime75 = require("react/jsx-runtime");
-var User7 = (props) => /* @__PURE__ */ (0, import_jsx_runtime75.jsxs)(
+var import_jsx_runtime76 = require("react/jsx-runtime");
+var User7 = (props) => /* @__PURE__ */ (0, import_jsx_runtime76.jsxs)(
   "svg",
   {
     xmlns: "http://www.w3.org/2000/svg",
@@ -9101,16 +9335,16 @@ var User7 = (props) => /* @__PURE__ */ (0, import_jsx_runtime75.jsxs)(
     strokeLinejoin: "round",
     ...props,
     children: [
-      /* @__PURE__ */ (0, import_jsx_runtime75.jsx)("path", { d: "M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2" }),
-      /* @__PURE__ */ (0, import_jsx_runtime75.jsx)("circle", { cx: "12", cy: "7", r: "4" })
+      /* @__PURE__ */ (0, import_jsx_runtime76.jsx)("path", { d: "M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2" }),
+      /* @__PURE__ */ (0, import_jsx_runtime76.jsx)("circle", { cx: "12", cy: "7", r: "4" })
     ]
   }
 );
 var User_default2 = User7;
 
 // src/components/primitives/Icons/X.tsx
-var import_jsx_runtime76 = require("react/jsx-runtime");
-var X = (props) => /* @__PURE__ */ (0, import_jsx_runtime76.jsxs)(
+var import_jsx_runtime77 = require("react/jsx-runtime");
+var X = (props) => /* @__PURE__ */ (0, import_jsx_runtime77.jsxs)(
   "svg",
   {
     xmlns: "http://www.w3.org/2000/svg",
@@ -9124,8 +9358,8 @@ var X = (props) => /* @__PURE__ */ (0, import_jsx_runtime76.jsxs)(
     strokeLinejoin: "round",
     ...props,
     children: [
-      /* @__PURE__ */ (0, import_jsx_runtime76.jsx)("path", { d: "M18 6 6 18" }),
-      /* @__PURE__ */ (0, import_jsx_runtime76.jsx)("path", { d: "m6 6 12 12" })
+      /* @__PURE__ */ (0, import_jsx_runtime77.jsx)("path", { d: "M18 6 6 18" }),
+      /* @__PURE__ */ (0, import_jsx_runtime77.jsx)("path", { d: "m6 6 12 12" })
     ]
   }
 );
@@ -9197,7 +9431,7 @@ var useStyles20 = (theme, colorScheme) => {
 var Dialog_styles_default = useStyles20;
 
 // src/components/primitives/Dialog/Dialog.tsx
-var import_jsx_runtime77 = require("react/jsx-runtime");
+var import_jsx_runtime78 = require("react/jsx-runtime");
 function useDialog({
   initialOpen = false,
   open: controlledOpen,
@@ -9243,7 +9477,7 @@ var useDialogContext = () => {
 };
 function Dialog({ children, ...options }) {
   const dialog = useDialog(options);
-  return /* @__PURE__ */ (0, import_jsx_runtime77.jsx)(DialogContext.Provider, { value: dialog, children });
+  return /* @__PURE__ */ (0, import_jsx_runtime78.jsx)(DialogContext.Provider, { value: dialog, children });
 }
 var DialogTrigger = import_react67.default.forwardRef(
   ({ children, asChild = false, ...props }, propRef) => {
@@ -9261,7 +9495,7 @@ var DialogTrigger = import_react67.default.forwardRef(
         })
       );
     }
-    return /* @__PURE__ */ (0, import_jsx_runtime77.jsx)("button", { ref, "data-state": context.open ? "open" : "closed", ...context.getReferenceProps(props), children });
+    return /* @__PURE__ */ (0, import_jsx_runtime78.jsx)("button", { ref, "data-state": context.open ? "open" : "closed", ...context.getReferenceProps(props), children });
   }
 );
 var DialogContent = import_react67.default.forwardRef((props, propRef) => {
@@ -9270,11 +9504,11 @@ var DialogContent = import_react67.default.forwardRef((props, propRef) => {
   const styles = Dialog_styles_default(theme, colorScheme);
   const ref = (0, import_react66.useMergeRefs)([context.refs.setFloating, propRef]);
   if (!floatingContext.open) return null;
-  return /* @__PURE__ */ (0, import_jsx_runtime77.jsx)(import_react66.FloatingPortal, { children: /* @__PURE__ */ (0, import_jsx_runtime77.jsx)(import_react66.FloatingOverlay, { className: (0, import_css43.cx)((0, import_browser62.withVendorCSSClassPrefix)((0, import_browser62.bem)("dialog", "overlay")), styles.overlay), lockScroll: true, children: /* @__PURE__ */ (0, import_jsx_runtime77.jsx)(import_react66.FloatingFocusManager, { context: floatingContext, initialFocus: -1, children: /* @__PURE__ */ (0, import_jsx_runtime77.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime78.jsx)(import_react66.FloatingPortal, { children: /* @__PURE__ */ (0, import_jsx_runtime78.jsx)(import_react66.FloatingOverlay, { className: (0, import_css43.cx)((0, import_browser64.withVendorCSSClassPrefix)((0, import_browser64.bem)("dialog", "overlay")), styles.overlay), lockScroll: true, children: /* @__PURE__ */ (0, import_jsx_runtime78.jsx)(import_react66.FloatingFocusManager, { context: floatingContext, initialFocus: -1, children: /* @__PURE__ */ (0, import_jsx_runtime78.jsx)(
     "div",
     {
       ref,
-      className: (0, import_css43.cx)((0, import_browser62.withVendorCSSClassPrefix)((0, import_browser62.bem)("dialog", "content")), styles.content, props.className),
+      className: (0, import_css43.cx)((0, import_browser64.withVendorCSSClassPrefix)((0, import_browser64.bem)("dialog", "content")), styles.content, props.className),
       "aria-labelledby": context.labelId,
       "aria-describedby": context.descriptionId,
       ...context.getFloatingProps(props),
@@ -9292,18 +9526,18 @@ var DialogHeading = import_react67.default.forwardRef(
       context.setLabelId(id);
       return () => context.setLabelId(void 0);
     }, [id, context.setLabelId]);
-    return /* @__PURE__ */ (0, import_jsx_runtime77.jsxs)("div", { className: (0, import_css43.cx)((0, import_browser62.withVendorCSSClassPrefix)((0, import_browser62.bem)("dialog", "header")), styles.header), children: [
-      /* @__PURE__ */ (0, import_jsx_runtime77.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime78.jsxs)("div", { className: (0, import_css43.cx)((0, import_browser64.withVendorCSSClassPrefix)((0, import_browser64.bem)("dialog", "header")), styles.header), children: [
+      /* @__PURE__ */ (0, import_jsx_runtime78.jsx)(
         "h2",
         {
           ...props,
           ref,
           id,
-          className: (0, import_css43.cx)((0, import_browser62.withVendorCSSClassPrefix)((0, import_browser62.bem)("dialog", "title")), styles.headerTitle),
+          className: (0, import_css43.cx)((0, import_browser64.withVendorCSSClassPrefix)((0, import_browser64.bem)("dialog", "title")), styles.headerTitle),
           children
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime77.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime78.jsx)(
         Button_default,
         {
           color: "tertiary",
@@ -9312,7 +9546,7 @@ var DialogHeading = import_react67.default.forwardRef(
           shape: "round",
           onClick: () => context.setOpen(false),
           "aria-label": "Close",
-          children: /* @__PURE__ */ (0, import_jsx_runtime77.jsx)(X_default, { width: 16, height: 16 })
+          children: /* @__PURE__ */ (0, import_jsx_runtime78.jsx)(X_default, { width: 16, height: 16 })
         }
       )
     ] });
@@ -9328,13 +9562,13 @@ var DialogDescription = import_react67.default.forwardRef(
       context.setDescriptionId(id);
       return () => context.setDescriptionId(void 0);
     }, [id, context.setDescriptionId]);
-    return /* @__PURE__ */ (0, import_jsx_runtime77.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime78.jsx)(
       "p",
       {
         ...props,
         ref,
         id,
-        className: (0, import_css43.cx)((0, import_browser62.withVendorCSSClassPrefix)((0, import_browser62.bem)("dialog", "description")), styles.description, props.className),
+        className: (0, import_css43.cx)((0, import_browser64.withVendorCSSClassPrefix)((0, import_browser64.bem)("dialog", "description")), styles.description, props.className),
         children
       }
     );
@@ -9358,13 +9592,13 @@ var DialogClose = import_react67.default.forwardRef(({ children, asChild = false
       onClick: handleClick
     });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime77.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime78.jsx)(
     Button_default,
     {
       ...props,
       ref,
       onClick: handleClick,
-      className: (0, import_css43.cx)((0, import_browser62.withVendorCSSClassPrefix)((0, import_browser62.bem)("dialog", "close")), props.className),
+      className: (0, import_css43.cx)((0, import_browser64.withVendorCSSClassPrefix)((0, import_browser64.bem)("dialog", "close")), props.className),
       variant: "text",
       children
     }
@@ -9385,7 +9619,7 @@ var Dialog_default = Dialog;
 // src/components/primitives/MultiInput/MultiInput.tsx
 var import_react69 = require("react");
 var import_css45 = require("@emotion/css");
-var import_browser63 = require("@asgardeo/browser");
+var import_browser65 = require("@asgardeo/browser");
 
 // src/components/primitives/MultiInput/MultiInput.styles.ts
 var import_css44 = require("@emotion/css");
@@ -9481,7 +9715,7 @@ var useStyles21 = (theme, colorScheme, disabled, hasError, canAddMore, canRemove
 var MultiInput_styles_default = useStyles21;
 
 // src/components/primitives/MultiInput/MultiInput.tsx
-var import_jsx_runtime78 = require("react/jsx-runtime");
+var import_jsx_runtime79 = require("react/jsx-runtime");
 var MultiInput = ({
   label,
   error,
@@ -9504,8 +9738,8 @@ var MultiInput = ({
   const canAddMore = !maxFields || values.length < maxFields;
   const canRemove = values.length > minFields;
   const styles = MultiInput_styles_default(theme, colorScheme, !!disabled, !!error, canAddMore, canRemove);
-  const PlusIcon = ({ className: className2 }) => /* @__PURE__ */ (0, import_jsx_runtime78.jsx)("svg", { width: "16", height: "16", viewBox: "0 0 24 24", className: (0, import_css45.cx)(styles.icon, className2), children: /* @__PURE__ */ (0, import_jsx_runtime78.jsx)("path", { d: "M12 5v14M5 12h14" }) });
-  const BinIcon = ({ className: className2 }) => /* @__PURE__ */ (0, import_jsx_runtime78.jsx)("svg", { width: "16", height: "16", viewBox: "0 0 24 24", className: (0, import_css45.cx)(styles.icon, className2), children: /* @__PURE__ */ (0, import_jsx_runtime78.jsx)("path", { d: "M3 6h18M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2m3 0v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6h14ZM10 11v6M14 11v6" }) });
+  const PlusIcon = ({ className: className2 }) => /* @__PURE__ */ (0, import_jsx_runtime79.jsx)("svg", { width: "16", height: "16", viewBox: "0 0 24 24", className: (0, import_css45.cx)(styles.icon, className2), children: /* @__PURE__ */ (0, import_jsx_runtime79.jsx)("path", { d: "M12 5v14M5 12h14" }) });
+  const BinIcon = ({ className: className2 }) => /* @__PURE__ */ (0, import_jsx_runtime79.jsx)("svg", { width: "16", height: "16", viewBox: "0 0 24 24", className: (0, import_css45.cx)(styles.icon, className2), children: /* @__PURE__ */ (0, import_jsx_runtime79.jsx)("path", { d: "M3 6h18M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2m3 0v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6h14ZM10 11v6M14 11v6" }) });
   const handleAddValue = (0, import_react69.useCallback)(
     (newValue) => {
       if (newValue.trim() !== "" && (!maxFields || values.length < maxFields)) {
@@ -9549,9 +9783,9 @@ var MultiInput = ({
       };
       switch (fieldType) {
         case "DATE_TIME":
-          return /* @__PURE__ */ (0, import_jsx_runtime78.jsx)(DatePicker_default, { ...commonProps });
+          return /* @__PURE__ */ (0, import_jsx_runtime79.jsx)(DatePicker_default, { ...commonProps });
         case "BOOLEAN":
-          return /* @__PURE__ */ (0, import_jsx_runtime78.jsx)(
+          return /* @__PURE__ */ (0, import_jsx_runtime79.jsx)(
             Checkbox_default,
             {
               ...commonProps,
@@ -9560,7 +9794,7 @@ var MultiInput = ({
             }
           );
         default:
-          return /* @__PURE__ */ (0, import_jsx_runtime78.jsx)(TextField_default, { ...commonProps, type });
+          return /* @__PURE__ */ (0, import_jsx_runtime79.jsx)(TextField_default, { ...commonProps, type });
       }
     },
     [placeholder, disabled, startIcon, endIcon, error, fieldType, type]
@@ -9572,43 +9806,43 @@ var MultiInput = ({
       setCurrentInputValue("");
     }
   }, [currentInputValue, handleAddValue]);
-  return /* @__PURE__ */ (0, import_jsx_runtime78.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime79.jsxs)(
     FormControl_default,
     {
       error,
       helperText,
-      className: (0, import_css45.cx)((0, import_browser63.withVendorCSSClassPrefix)((0, import_browser63.bem)("multi-input")), className),
+      className: (0, import_css45.cx)((0, import_browser65.withVendorCSSClassPrefix)((0, import_browser65.bem)("multi-input")), className),
       style,
       children: [
-        label && /* @__PURE__ */ (0, import_jsx_runtime78.jsx)(InputLabel_default, { required, error: !!error, children: label }),
-        /* @__PURE__ */ (0, import_jsx_runtime78.jsxs)("div", { className: (0, import_css45.cx)((0, import_browser63.withVendorCSSClassPrefix)((0, import_browser63.bem)("multi-input", "container")), styles.container), children: [
-          /* @__PURE__ */ (0, import_jsx_runtime78.jsx)("div", { className: (0, import_css45.cx)((0, import_browser63.withVendorCSSClassPrefix)((0, import_browser63.bem)("multi-input", "input-row")), styles.inputRow), children: /* @__PURE__ */ (0, import_jsx_runtime78.jsx)("div", { className: (0, import_css45.cx)((0, import_browser63.withVendorCSSClassPrefix)((0, import_browser63.bem)("multi-input", "input-wrapper")), styles.inputWrapper), children: renderInputField(
+        label && /* @__PURE__ */ (0, import_jsx_runtime79.jsx)(InputLabel_default, { required, error: !!error, children: label }),
+        /* @__PURE__ */ (0, import_jsx_runtime79.jsxs)("div", { className: (0, import_css45.cx)((0, import_browser65.withVendorCSSClassPrefix)((0, import_browser65.bem)("multi-input", "container")), styles.container), children: [
+          /* @__PURE__ */ (0, import_jsx_runtime79.jsx)("div", { className: (0, import_css45.cx)((0, import_browser65.withVendorCSSClassPrefix)((0, import_browser65.bem)("multi-input", "input-row")), styles.inputRow), children: /* @__PURE__ */ (0, import_jsx_runtime79.jsx)("div", { className: (0, import_css45.cx)((0, import_browser65.withVendorCSSClassPrefix)((0, import_browser65.bem)("multi-input", "input-wrapper")), styles.inputWrapper), children: renderInputField(
             currentInputValue,
             setCurrentInputValue,
-            canAddMore ? /* @__PURE__ */ (0, import_jsx_runtime78.jsx)(PlusIcon, { className: styles.plusIcon }) : void 0,
+            canAddMore ? /* @__PURE__ */ (0, import_jsx_runtime79.jsx)(PlusIcon, { className: styles.plusIcon }) : void 0,
             canAddMore ? handleInputSubmit : void 0
           ) }) }),
-          values.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime78.jsx)("div", { className: (0, import_css45.cx)((0, import_browser63.withVendorCSSClassPrefix)((0, import_browser63.bem)("multi-input", "list-container")), styles.listContainer), children: values.map((value, index) => /* @__PURE__ */ (0, import_jsx_runtime78.jsxs)(
+          values.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime79.jsx)("div", { className: (0, import_css45.cx)((0, import_browser65.withVendorCSSClassPrefix)((0, import_browser65.bem)("multi-input", "list-container")), styles.listContainer), children: values.map((value, index) => /* @__PURE__ */ (0, import_jsx_runtime79.jsxs)(
             "div",
             {
-              className: (0, import_css45.cx)((0, import_browser63.withVendorCSSClassPrefix)((0, import_browser63.bem)("multi-input", "list-item")), styles.listItem),
+              className: (0, import_css45.cx)((0, import_browser65.withVendorCSSClassPrefix)((0, import_browser65.bem)("multi-input", "list-item")), styles.listItem),
               children: [
-                /* @__PURE__ */ (0, import_jsx_runtime78.jsx)(
+                /* @__PURE__ */ (0, import_jsx_runtime79.jsx)(
                   "span",
                   {
-                    className: (0, import_css45.cx)((0, import_browser63.withVendorCSSClassPrefix)((0, import_browser63.bem)("multi-input", "list-item-text")), styles.listItemText),
+                    className: (0, import_css45.cx)((0, import_browser65.withVendorCSSClassPrefix)((0, import_browser65.bem)("multi-input", "list-item-text")), styles.listItemText),
                     children: value
                   }
                 ),
-                canRemove && /* @__PURE__ */ (0, import_jsx_runtime78.jsx)(
+                canRemove && /* @__PURE__ */ (0, import_jsx_runtime79.jsx)(
                   "button",
                   {
                     type: "button",
                     onClick: () => handleRemoveValue(index),
                     disabled,
-                    className: (0, import_css45.cx)((0, import_browser63.withVendorCSSClassPrefix)((0, import_browser63.bem)("multi-input", "remove-button")), styles.removeButton),
+                    className: (0, import_css45.cx)((0, import_browser65.withVendorCSSClassPrefix)((0, import_browser65.bem)("multi-input", "remove-button")), styles.removeButton),
                     title: "Remove value",
-                    children: /* @__PURE__ */ (0, import_jsx_runtime78.jsx)(BinIcon, { className: styles.icon })
+                    children: /* @__PURE__ */ (0, import_jsx_runtime79.jsx)(BinIcon, { className: styles.icon })
                   }
                 )
               ]
@@ -9625,7 +9859,7 @@ var MultiInput_default = MultiInput;
 // src/components/presentation/UserProfile/BaseUserProfile.styles.ts
 var import_css46 = require("@emotion/css");
 var import_react70 = require("react");
-var import_browser64 = require("@asgardeo/browser");
+var import_browser66 = require("@asgardeo/browser");
 var useStyles22 = (theme, colorScheme) => {
   const valuePlaceholder = import_css46.css`
     font-style: italic;
@@ -9652,7 +9886,7 @@ var useStyles22 = (theme, colorScheme) => {
     display: flex;
     gap: calc(${theme.vars.spacing.unit} / 2);
     align-items: center;
-    margin-left: calc(${theme.vars.spacing.unit} * 4);
+    margin-inline-start: calc(${theme.vars.spacing.unit} * 4);
   `;
   const complexTextarea = import_css46.css`
     min-height: 60px;
@@ -9719,7 +9953,7 @@ var useStyles22 = (theme, colorScheme) => {
       width: 120px;
       flex-shrink: 0;
       line-height: 28px;
-      text-align: left;
+      text-align: start;
     `;
     const value = import_css46.css`
       color: ${theme.vars.colors.text.primary};
@@ -9734,9 +9968,9 @@ var useStyles22 = (theme, colorScheme) => {
       text-overflow: ellipsis;
       white-space: nowrap;
       max-width: 350px;
-      text-align: left;
+      text-align: start;
 
-      .${(0, import_browser64.withVendorCSSClassPrefix)("form-control")} {
+      .${(0, import_browser66.withVendorCSSClassPrefix)("form-control")} {
         margin-bottom: 0;
       }
 
@@ -9807,7 +10041,7 @@ var getDisplayName = (mergedMappings, user) => {
 var getDisplayName_default = getDisplayName;
 
 // src/components/presentation/UserProfile/BaseUserProfile.tsx
-var import_jsx_runtime79 = require("react/jsx-runtime");
+var import_jsx_runtime80 = require("react/jsx-runtime");
 var fieldsToSkip = [
   "roles.default",
   "active",
@@ -9867,7 +10101,7 @@ var BaseUserProfile = ({
     },
     [showFields, hideFields]
   );
-  const PencilIcon = () => /* @__PURE__ */ (0, import_jsx_runtime79.jsx)(
+  const PencilIcon = () => /* @__PURE__ */ (0, import_jsx_runtime80.jsx)(
     "svg",
     {
       width: "16",
@@ -9878,7 +10112,7 @@ var BaseUserProfile = ({
       strokeWidth: "2",
       strokeLinecap: "round",
       strokeLinejoin: "round",
-      children: /* @__PURE__ */ (0, import_jsx_runtime79.jsx)("path", { d: "M17 3a2.828 2.828 0 1 1 4 4L7.5 20.5 2 22l1.5-5.5L17 3z" })
+      children: /* @__PURE__ */ (0, import_jsx_runtime80.jsx)("path", { d: "M17 3a2.828 2.828 0 1 1 4 4L7.5 20.5 2 22l1.5-5.5L17 3z" })
     }
   );
   const toggleFieldEdit = (0, import_react71.useCallback)((fieldName) => {
@@ -9903,12 +10137,12 @@ var BaseUserProfile = ({
   }, []);
   const ObjectDisplay = ({ data }) => {
     if (!data || typeof data !== "object") return null;
-    return /* @__PURE__ */ (0, import_jsx_runtime79.jsx)("table", { className: styles.value, children: /* @__PURE__ */ (0, import_jsx_runtime79.jsx)("tbody", { children: Object.entries(data).map(([key, value]) => /* @__PURE__ */ (0, import_jsx_runtime79.jsxs)("tr", { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime79.jsx)("td", { className: styles.objectKey, children: /* @__PURE__ */ (0, import_jsx_runtime79.jsxs)("strong", { children: [
+    return /* @__PURE__ */ (0, import_jsx_runtime80.jsx)("table", { className: styles.value, children: /* @__PURE__ */ (0, import_jsx_runtime80.jsx)("tbody", { children: Object.entries(data).map(([key, value]) => /* @__PURE__ */ (0, import_jsx_runtime80.jsxs)("tr", { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime80.jsx)("td", { className: styles.objectKey, children: /* @__PURE__ */ (0, import_jsx_runtime80.jsxs)("strong", { children: [
         formatLabel(key),
         ":"
       ] }) }),
-      /* @__PURE__ */ (0, import_jsx_runtime79.jsx)("td", { className: styles.objectValue, children: typeof value === "object" ? /* @__PURE__ */ (0, import_jsx_runtime79.jsx)(ObjectDisplay, { data: value }) : String(value) })
+      /* @__PURE__ */ (0, import_jsx_runtime80.jsx)("td", { className: styles.objectValue, children: typeof value === "object" ? /* @__PURE__ */ (0, import_jsx_runtime80.jsx)(ObjectDisplay, { data: value }) : String(value) })
     ] }, key)) }) });
   };
   function set(obj, path, value) {
@@ -9935,7 +10169,7 @@ var BaseUserProfile = ({
         fieldValue = fieldValue.filter((v) => v !== void 0 && v !== null && v !== "");
       }
       let payload = {};
-      if (schema.schemaId && schema.schemaId !== import_browser65.WellKnownSchemaIds.User) {
+      if (schema.schemaId && schema.schemaId !== import_browser67.WellKnownSchemaIds.User) {
         payload = {
           [schema.schemaId]: {
             [fieldName]: fieldValue
@@ -9981,9 +10215,9 @@ var BaseUserProfile = ({
     const { value, displayName, description, name, type, required, mutability, subAttributes, multiValued } = schema;
     const label = displayName || description || name || "";
     if (subAttributes && Array.isArray(subAttributes)) {
-      return /* @__PURE__ */ (0, import_jsx_runtime79.jsx)(import_jsx_runtime79.Fragment, { children: subAttributes.map((subAttr, index) => /* @__PURE__ */ (0, import_jsx_runtime79.jsxs)("div", { className: styles.field, children: [
-        /* @__PURE__ */ (0, import_jsx_runtime79.jsx)("span", { className: styles.label, children: subAttr.displayName || subAttr.description || "" }),
-        /* @__PURE__ */ (0, import_jsx_runtime79.jsx)("div", { className: styles.value, children: Array.isArray(subAttr.value) ? subAttr.value.map((item) => typeof item === "object" ? JSON.stringify(item) : String(item)).join(", ") : typeof subAttr.value === "object" ? JSON.stringify(subAttr.value) : String(subAttr.value) })
+      return /* @__PURE__ */ (0, import_jsx_runtime80.jsx)(import_jsx_runtime80.Fragment, { children: subAttributes.map((subAttr, index) => /* @__PURE__ */ (0, import_jsx_runtime80.jsxs)("div", { className: styles.field, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime80.jsx)("span", { className: styles.label, children: subAttr.displayName || subAttr.description || "" }),
+        /* @__PURE__ */ (0, import_jsx_runtime80.jsx)("div", { className: styles.value, children: Array.isArray(subAttr.value) ? subAttr.value.map((item) => typeof item === "object" ? JSON.stringify(item) : String(item)).join(", ") : typeof subAttr.value === "object" ? JSON.stringify(subAttr.value) : String(subAttr.value) })
       ] }, index)) });
     }
     if (Array.isArray(value) || multiValued) {
@@ -9999,9 +10233,9 @@ var BaseUserProfile = ({
         } else {
           fieldValues = [];
         }
-        return /* @__PURE__ */ (0, import_jsx_runtime79.jsxs)(import_jsx_runtime79.Fragment, { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime79.jsx)("span", { className: styles.label, children: label }),
-          /* @__PURE__ */ (0, import_jsx_runtime79.jsx)("div", { className: styles.value, children: /* @__PURE__ */ (0, import_jsx_runtime79.jsx)(
+        return /* @__PURE__ */ (0, import_jsx_runtime80.jsxs)(import_jsx_runtime80.Fragment, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime80.jsx)("span", { className: styles.label, children: label }),
+          /* @__PURE__ */ (0, import_jsx_runtime80.jsx)("div", { className: styles.value, children: /* @__PURE__ */ (0, import_jsx_runtime80.jsx)(
             MultiInput_default,
             {
               values: fieldValues,
@@ -10032,9 +10266,9 @@ var BaseUserProfile = ({
       } else {
         displayValue2 = "-";
       }
-      return /* @__PURE__ */ (0, import_jsx_runtime79.jsxs)(import_jsx_runtime79.Fragment, { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime79.jsx)("span", { className: styles.label, children: label }),
-        /* @__PURE__ */ (0, import_jsx_runtime79.jsx)("div", { className: (0, import_css47.cx)(styles.value, !hasValues ? styles.valuePlaceholder : ""), children: !hasValues && isEditable2 && onStartEdit ? /* @__PURE__ */ (0, import_jsx_runtime79.jsx)(
+      return /* @__PURE__ */ (0, import_jsx_runtime80.jsxs)(import_jsx_runtime80.Fragment, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime80.jsx)("span", { className: styles.label, children: label }),
+        /* @__PURE__ */ (0, import_jsx_runtime80.jsx)("div", { className: (0, import_css47.cx)(styles.value, !hasValues ? styles.valuePlaceholder : ""), children: !hasValues && isEditable2 && onStartEdit ? /* @__PURE__ */ (0, import_jsx_runtime80.jsx)(
           Button_default,
           {
             onClick: onStartEdit,
@@ -10049,7 +10283,7 @@ var BaseUserProfile = ({
       ] });
     }
     if (type === "COMPLEX" && typeof value === "object") {
-      return /* @__PURE__ */ (0, import_jsx_runtime79.jsx)(ObjectDisplay, { data: value });
+      return /* @__PURE__ */ (0, import_jsx_runtime80.jsx)(ObjectDisplay, { data: value });
     }
     if (isEditing && onEditValue && mutability !== "READ_ONLY" && !readonlyFields.includes(name || "")) {
       const fieldValue = editedUser && name && editedUser[name] !== void 0 ? editedUser[name] : flattenedProfile && name && flattenedProfile[name] !== void 0 ? flattenedProfile[name] : value || "";
@@ -10064,16 +10298,16 @@ var BaseUserProfile = ({
       let field;
       switch (type) {
         case "STRING":
-          field = /* @__PURE__ */ (0, import_jsx_runtime79.jsx)(TextField_default, { ...commonProps });
+          field = /* @__PURE__ */ (0, import_jsx_runtime80.jsx)(TextField_default, { ...commonProps });
           break;
         case "DATE_TIME":
-          field = /* @__PURE__ */ (0, import_jsx_runtime79.jsx)(DatePicker_default, { ...commonProps });
+          field = /* @__PURE__ */ (0, import_jsx_runtime80.jsx)(DatePicker_default, { ...commonProps });
           break;
         case "BOOLEAN":
-          field = /* @__PURE__ */ (0, import_jsx_runtime79.jsx)(Checkbox_default, { ...commonProps, checked: !!fieldValue, onChange: (e) => onEditValue(e.target.checked) });
+          field = /* @__PURE__ */ (0, import_jsx_runtime80.jsx)(Checkbox_default, { ...commonProps, checked: !!fieldValue, onChange: (e) => onEditValue(e.target.checked) });
           break;
         case "COMPLEX":
-          field = /* @__PURE__ */ (0, import_jsx_runtime79.jsx)(
+          field = /* @__PURE__ */ (0, import_jsx_runtime80.jsx)(
             "textarea",
             {
               value: fieldValue,
@@ -10085,11 +10319,11 @@ var BaseUserProfile = ({
           );
           break;
         default:
-          field = /* @__PURE__ */ (0, import_jsx_runtime79.jsx)(TextField_default, { ...commonProps });
+          field = /* @__PURE__ */ (0, import_jsx_runtime80.jsx)(TextField_default, { ...commonProps });
       }
-      return /* @__PURE__ */ (0, import_jsx_runtime79.jsxs)(import_jsx_runtime79.Fragment, { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime79.jsx)("span", { className: styles.label, children: label }),
-        /* @__PURE__ */ (0, import_jsx_runtime79.jsx)("div", { className: styles.value, children: field })
+      return /* @__PURE__ */ (0, import_jsx_runtime80.jsxs)(import_jsx_runtime80.Fragment, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime80.jsx)("span", { className: styles.label, children: label }),
+        /* @__PURE__ */ (0, import_jsx_runtime80.jsx)("div", { className: styles.value, children: field })
       ] });
     }
     const hasValue = value !== void 0 && value !== null && value !== "";
@@ -10102,9 +10336,9 @@ var BaseUserProfile = ({
     } else {
       displayValue = "-";
     }
-    return /* @__PURE__ */ (0, import_jsx_runtime79.jsxs)(import_jsx_runtime79.Fragment, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime79.jsx)("span", { className: styles.label, children: label }),
-      /* @__PURE__ */ (0, import_jsx_runtime79.jsx)("div", { className: (0, import_css47.cx)(styles.value, !hasValue ? styles.valuePlaceholder : ""), children: !hasValue && isEditable && onStartEdit ? /* @__PURE__ */ (0, import_jsx_runtime79.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime80.jsxs)(import_jsx_runtime80.Fragment, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime80.jsx)("span", { className: styles.label, children: label }),
+      /* @__PURE__ */ (0, import_jsx_runtime80.jsx)("div", { className: (0, import_css47.cx)(styles.value, !hasValue ? styles.valuePlaceholder : ""), children: !hasValue && isEditable && onStartEdit ? /* @__PURE__ */ (0, import_jsx_runtime80.jsx)(
         Button_default,
         {
           onClick: onStartEdit,
@@ -10132,8 +10366,8 @@ var BaseUserProfile = ({
       alignItems: "center",
       gap: theme.vars.spacing.unit
     };
-    return /* @__PURE__ */ (0, import_jsx_runtime79.jsxs)("div", { className: styles.field, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime79.jsx)("div", { className: styles.fieldInner, children: renderSchemaField(
+    return /* @__PURE__ */ (0, import_jsx_runtime80.jsxs)("div", { className: styles.field, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime80.jsx)("div", { className: styles.fieldInner, children: renderSchemaField(
         schema,
         isFieldEditing,
         (value) => {
@@ -10143,12 +10377,12 @@ var BaseUserProfile = ({
         },
         () => toggleFieldEdit(schema.name)
       ) }),
-      editable && schema.mutability !== "READ_ONLY" && !isReadonlyField && /* @__PURE__ */ (0, import_jsx_runtime79.jsxs)("div", { className: styles.fieldActions, children: [
-        isFieldEditing && /* @__PURE__ */ (0, import_jsx_runtime79.jsxs)(import_jsx_runtime79.Fragment, { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime79.jsx)(Button_default, { size: "small", color: "primary", variant: "solid", onClick: () => handleFieldSave(schema), children: "Save" }),
-          /* @__PURE__ */ (0, import_jsx_runtime79.jsx)(Button_default, { size: "small", color: "secondary", variant: "solid", onClick: () => handleFieldCancel(schema.name), children: "Cancel" })
+      editable && schema.mutability !== "READ_ONLY" && !isReadonlyField && /* @__PURE__ */ (0, import_jsx_runtime80.jsxs)("div", { className: styles.fieldActions, children: [
+        isFieldEditing && /* @__PURE__ */ (0, import_jsx_runtime80.jsxs)(import_jsx_runtime80.Fragment, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime80.jsx)(Button_default, { size: "small", color: "primary", variant: "solid", onClick: () => handleFieldSave(schema), children: "Save" }),
+          /* @__PURE__ */ (0, import_jsx_runtime80.jsx)(Button_default, { size: "small", color: "secondary", variant: "solid", onClick: () => handleFieldCancel(schema.name), children: "Cancel" })
         ] }),
-        !isFieldEditing && hasValue && /* @__PURE__ */ (0, import_jsx_runtime79.jsx)(
+        !isFieldEditing && hasValue && /* @__PURE__ */ (0, import_jsx_runtime80.jsx)(
           Button_default,
           {
             size: "small",
@@ -10157,7 +10391,7 @@ var BaseUserProfile = ({
             onClick: () => toggleFieldEdit(schema.name),
             title: "Edit",
             className: styles.editButton,
-            children: /* @__PURE__ */ (0, import_jsx_runtime79.jsx)(PencilIcon, {})
+            children: /* @__PURE__ */ (0, import_jsx_runtime80.jsx)(PencilIcon, {})
           }
         )
       ] })
@@ -10169,7 +10403,7 @@ var BaseUserProfile = ({
   const containerClasses = (0, import_css47.cx)(
     styles.root,
     cardLayout ? styles.card : "",
-    (0, import_browser65.withVendorCSSClassPrefix)("user-profile"),
+    (0, import_browser67.withVendorCSSClassPrefix)("user-profile"),
     className
   );
   const currentUser = flattenedProfile || profile;
@@ -10181,17 +10415,17 @@ var BaseUserProfile = ({
       if (!shouldShowField(key)) return false;
       return value !== void 0 && value !== "" && value !== null;
     }).sort(([a], [b]) => a.localeCompare(b));
-    return /* @__PURE__ */ (0, import_jsx_runtime79.jsx)(import_jsx_runtime79.Fragment, { children: profileEntries.map(([key, value]) => /* @__PURE__ */ (0, import_jsx_runtime79.jsxs)("div", { className: styles.field, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime79.jsx)("span", { className: styles.label, children: formatLabel(key) }),
-      /* @__PURE__ */ (0, import_jsx_runtime79.jsx)("div", { className: styles.value, children: typeof value === "object" ? JSON.stringify(value, null, 2) : String(value) })
+    return /* @__PURE__ */ (0, import_jsx_runtime80.jsx)(import_jsx_runtime80.Fragment, { children: profileEntries.map(([key, value]) => /* @__PURE__ */ (0, import_jsx_runtime80.jsxs)("div", { className: styles.field, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime80.jsx)("span", { className: styles.label, children: formatLabel(key) }),
+      /* @__PURE__ */ (0, import_jsx_runtime80.jsx)("div", { className: styles.value, children: typeof value === "object" ? JSON.stringify(value, null, 2) : String(value) })
     ] }, key)) });
   };
-  const profileContent = /* @__PURE__ */ (0, import_jsx_runtime79.jsxs)(Card_default, { className: containerClasses, children: [
-    error && /* @__PURE__ */ (0, import_jsx_runtime79.jsxs)(Alert_default, { variant: "error", className: (0, import_css47.cx)((0, import_browser65.withVendorCSSClassPrefix)((0, import_browser65.bem)("user-profile", "alert")), styles.alert), children: [
-      /* @__PURE__ */ (0, import_jsx_runtime79.jsx)(Alert_default.Title, { children: t("errors.title") || "Error" }),
-      /* @__PURE__ */ (0, import_jsx_runtime79.jsx)(Alert_default.Description, { children: error })
+  const profileContent = /* @__PURE__ */ (0, import_jsx_runtime80.jsxs)(Card_default, { className: containerClasses, children: [
+    error && /* @__PURE__ */ (0, import_jsx_runtime80.jsxs)(Alert_default, { variant: "error", className: (0, import_css47.cx)((0, import_browser67.withVendorCSSClassPrefix)((0, import_browser67.bem)("user-profile", "alert")), styles.alert), children: [
+      /* @__PURE__ */ (0, import_jsx_runtime80.jsx)(Alert_default.Title, { children: t("errors.title") || "Error" }),
+      /* @__PURE__ */ (0, import_jsx_runtime80.jsx)(Alert_default.Description, { children: error })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime79.jsx)("div", { className: styles.header, children: /* @__PURE__ */ (0, import_jsx_runtime79.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime80.jsx)("div", { className: styles.header, children: /* @__PURE__ */ (0, import_jsx_runtime80.jsx)(
       Avatar,
       {
         imageUrl: getMappedUserProfileValue_default("picture", mergedMappings, currentUser),
@@ -10201,7 +10435,7 @@ var BaseUserProfile = ({
         isLoading
       }
     ) }),
-    /* @__PURE__ */ (0, import_jsx_runtime79.jsx)("div", { className: styles.infoContainer, children: schemas && schemas.length > 0 ? schemas.filter((schema) => {
+    /* @__PURE__ */ (0, import_jsx_runtime80.jsx)("div", { className: styles.infoContainer, children: schemas && schemas.length > 0 ? schemas.filter((schema) => {
       if (!schema.name || !shouldShowField(schema.name)) return false;
       if (!editable) {
         const value = flattenedProfile && schema.name ? flattenedProfile[schema.name] : void 0;
@@ -10218,13 +10452,13 @@ var BaseUserProfile = ({
         ...schema,
         value
       };
-      return /* @__PURE__ */ (0, import_jsx_runtime79.jsx)("div", { className: styles.info, children: renderUserInfo(schemaWithValue) }, schema.name || index);
+      return /* @__PURE__ */ (0, import_jsx_runtime80.jsx)("div", { className: styles.info, children: renderUserInfo(schemaWithValue) }, schema.name || index);
     }) : renderProfileWithoutSchemas() })
   ] });
   if (mode === "popup") {
-    return /* @__PURE__ */ (0, import_jsx_runtime79.jsx)(Dialog_default, { open, onOpenChange, children: /* @__PURE__ */ (0, import_jsx_runtime79.jsxs)(Dialog_default.Content, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime79.jsx)(Dialog_default.Heading, { children: title ?? t("user.profile.title") }),
-      /* @__PURE__ */ (0, import_jsx_runtime79.jsx)("div", { className: styles.popup, children: profileContent })
+    return /* @__PURE__ */ (0, import_jsx_runtime80.jsx)(Dialog_default, { open, onOpenChange, children: /* @__PURE__ */ (0, import_jsx_runtime80.jsxs)(Dialog_default.Content, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime80.jsx)(Dialog_default.Heading, { children: title ?? t("user.profile.title") }),
+      /* @__PURE__ */ (0, import_jsx_runtime80.jsx)("div", { className: styles.popup, children: profileContent })
     ] }) });
   }
   return profileContent;
@@ -10235,8 +10469,8 @@ var BaseUserProfile_default = BaseUserProfile;
 var import_react72 = require("react");
 
 // src/api/updateMeProfile.ts
-var import_browser66 = require("@asgardeo/browser");
-var httpClient5 = import_browser66.AsgardeoSPAClient.getInstance().httpRequest.bind(import_browser66.AsgardeoSPAClient.getInstance());
+var import_browser68 = require("@asgardeo/browser");
+var httpClient5 = import_browser68.AsgardeoSPAClient.getInstance().httpRequest.bind(import_browser68.AsgardeoSPAClient.getInstance());
 var updateMeProfile = async ({ fetcher, ...requestConfig }) => {
   const defaultFetcher = async (url, config) => {
     const response = await httpClient5({
@@ -10253,7 +10487,7 @@ var updateMeProfile = async ({ fetcher, ...requestConfig }) => {
       text: () => Promise.resolve(typeof response.data === "string" ? response.data : JSON.stringify(response.data))
     };
   };
-  return (0, import_browser66.updateMeProfile)({
+  return (0, import_browser68.updateMeProfile)({
     ...requestConfig,
     fetcher: fetcher || defaultFetcher
   });
@@ -10261,8 +10495,8 @@ var updateMeProfile = async ({ fetcher, ...requestConfig }) => {
 var updateMeProfile_default = updateMeProfile;
 
 // src/components/presentation/UserProfile/UserProfile.tsx
-var import_browser67 = require("@asgardeo/browser");
-var import_jsx_runtime80 = require("react/jsx-runtime");
+var import_browser69 = require("@asgardeo/browser");
+var import_jsx_runtime81 = require("react/jsx-runtime");
 var UserProfile3 = ({ ...rest }) => {
   const { baseUrl, isLoading } = useAsgardeo_default();
   const { profile, flattenedProfile, schemas, onUpdateProfile } = useUser_default();
@@ -10275,13 +10509,13 @@ var UserProfile3 = ({ ...rest }) => {
       onUpdateProfile(response);
     } catch (error2) {
       let message = t("user.profile.update.generic.error");
-      if (error2 instanceof import_browser67.AsgardeoError) {
+      if (error2 instanceof import_browser69.AsgardeoError) {
         message = error2?.message;
       }
       setError(message);
     }
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime80.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(
     BaseUserProfile_default,
     {
       profile,
@@ -10296,7 +10530,7 @@ var UserProfile3 = ({ ...rest }) => {
 var UserProfile_default = UserProfile3;
 
 // src/components/presentation/UserDropdown/BaseUserDropdown.tsx
-var import_browser68 = require("@asgardeo/browser");
+var import_browser70 = require("@asgardeo/browser");
 var import_react74 = require("@floating-ui/react");
 var import_css49 = require("@emotion/css");
 var import_react75 = require("react");
@@ -10369,7 +10603,7 @@ var useStyles23 = (theme, colorScheme) => {
       border: none;
       cursor: pointer;
       font-size: 0.875rem;
-      text-align: left;
+      text-align: start;
       border-radius: ${theme.vars.borderRadius.medium};
       transition: none;
       box-shadow: none;
@@ -10398,7 +10632,7 @@ var useStyles23 = (theme, colorScheme) => {
       background: none;
       cursor: pointer;
       font-size: 0.875rem;
-      text-align: left;
+      text-align: start;
       border-radius: ${theme.vars.borderRadius.medium};
       transition: background-color 0.15s ease-in-out;
 
@@ -10486,7 +10720,7 @@ var useStyles23 = (theme, colorScheme) => {
 var BaseUserDropdown_styles_default = useStyles23;
 
 // src/components/presentation/UserDropdown/BaseUserDropdown.tsx
-var import_jsx_runtime81 = require("react/jsx-runtime");
+var import_jsx_runtime82 = require("react/jsx-runtime");
 var BaseUserDropdown = ({
   fallback = null,
   className = "",
@@ -10540,14 +10774,14 @@ var BaseUserDropdown = ({
     defaultMenuItems.push({
       label: "Manage Profile",
       onClick: onManageProfile,
-      icon: /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(User_default2, { width: "16", height: "16" })
+      icon: /* @__PURE__ */ (0, import_jsx_runtime82.jsx)(User_default2, { width: "16", height: "16" })
     });
   }
   if (onSignOut) {
     defaultMenuItems.push({
       label: "Sign Out",
       onClick: onSignOut,
-      icon: /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(LogOut_default, { width: "16", height: "16" })
+      icon: /* @__PURE__ */ (0, import_jsx_runtime82.jsx)(LogOut_default, { width: "16", height: "16" })
     });
   }
   const allMenuItems = [...menuItems];
@@ -10557,18 +10791,18 @@ var BaseUserDropdown = ({
     }
     allMenuItems.push(...defaultMenuItems);
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime81.jsxs)("div", { className: (0, import_css49.cx)((0, import_browser68.withVendorCSSClassPrefix)("user-dropdown"), className), children: [
-    /* @__PURE__ */ (0, import_jsx_runtime81.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime82.jsxs)("div", { className: (0, import_css49.cx)((0, import_browser70.withVendorCSSClassPrefix)("user-dropdown"), className), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime82.jsxs)(
       Button_default,
       {
         ref: refs.setReference,
-        className: (0, import_css49.cx)((0, import_browser68.withVendorCSSClassPrefix)("user-dropdown__trigger"), styles.trigger),
+        className: (0, import_css49.cx)((0, import_browser70.withVendorCSSClassPrefix)("user-dropdown__trigger"), styles.trigger),
         color: "tertiary",
         variant: "text",
         size: "medium",
         ...getReferenceProps(),
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime82.jsx)(
             Avatar,
             {
               imageUrl: getMappedUserProfileValue_default("picture", mergedMappings, user),
@@ -10577,22 +10811,22 @@ var BaseUserDropdown = ({
               alt: `${getDisplayName_default(mergedMappings, user)}'s avatar`
             }
           ),
-          showTriggerLabel && /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(
+          showTriggerLabel && /* @__PURE__ */ (0, import_jsx_runtime82.jsx)(
             Typography_default,
             {
               variant: "body2",
-              className: (0, import_css49.cx)((0, import_browser68.withVendorCSSClassPrefix)("user-dropdown__trigger-label"), styles.userName),
+              className: (0, import_css49.cx)((0, import_browser70.withVendorCSSClassPrefix)("user-dropdown__trigger-label"), styles.userName),
               children: getDisplayName_default(mergedMappings, user)
             }
           )
         ]
       }
     ),
-    isOpen && /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(import_react74.FloatingPortal, { id: portalId, children: /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(import_react74.FloatingFocusManager, { context, modal: false, initialFocus: -1, children: /* @__PURE__ */ (0, import_jsx_runtime81.jsxs)(
+    isOpen && /* @__PURE__ */ (0, import_jsx_runtime82.jsx)(import_react74.FloatingPortal, { id: portalId, children: /* @__PURE__ */ (0, import_jsx_runtime82.jsx)(import_react74.FloatingFocusManager, { context, modal: false, initialFocus: -1, children: /* @__PURE__ */ (0, import_jsx_runtime82.jsxs)(
       "div",
       {
         ref: refs.setFloating,
-        className: (0, import_css49.cx)((0, import_browser68.withVendorCSSClassPrefix)("user-dropdown__content"), styles.dropdownContent),
+        className: (0, import_css49.cx)((0, import_browser70.withVendorCSSClassPrefix)("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.
@@ -10601,8 +10835,8 @@ var BaseUserDropdown = ({
         },
         ...getFloatingProps(),
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime81.jsxs)("div", { className: (0, import_css49.cx)((0, import_browser68.withVendorCSSClassPrefix)("user-dropdown__header"), styles.dropdownHeader), children: [
-            /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime82.jsxs)("div", { className: (0, import_css49.cx)((0, import_browser70.withVendorCSSClassPrefix)("user-dropdown__header"), styles.dropdownHeader), children: [
+            /* @__PURE__ */ (0, import_jsx_runtime82.jsx)(
               Avatar,
               {
                 imageUrl: getMappedUserProfileValue_default("picture", mergedMappings, user),
@@ -10611,22 +10845,22 @@ var BaseUserDropdown = ({
                 alt: `${getDisplayName_default(mergedMappings, user)}'s avatar`
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime81.jsxs)("div", { className: (0, import_css49.cx)((0, import_browser68.withVendorCSSClassPrefix)("user-dropdown__header-info"), styles.headerInfo), children: [
-              /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime82.jsxs)("div", { className: (0, import_css49.cx)((0, import_browser70.withVendorCSSClassPrefix)("user-dropdown__header-info"), styles.headerInfo), children: [
+              /* @__PURE__ */ (0, import_jsx_runtime82.jsx)(
                 Typography_default,
                 {
                   noWrap: true,
-                  className: (0, import_browser68.withVendorCSSClassPrefix)("user-dropdown__header-name"),
+                  className: (0, import_browser70.withVendorCSSClassPrefix)("user-dropdown__header-name"),
                   variant: "body1",
                   fontWeight: "medium",
                   children: getDisplayName_default(mergedMappings, user)
                 }
               ),
-              /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime82.jsx)(
                 Typography_default,
                 {
                   noWrap: true,
-                  className: (0, import_browser68.withVendorCSSClassPrefix)("user-dropdown__header-email"),
+                  className: (0, import_browser70.withVendorCSSClassPrefix)("user-dropdown__header-email"),
                   variant: "caption",
                   color: "secondary",
                   children: getMappedUserProfileValue_default("username", mergedMappings, user) || getMappedUserProfileValue_default("email", mergedMappings, user)
@@ -10634,31 +10868,31 @@ var BaseUserDropdown = ({
               )
             ] })
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime81.jsx)("div", { className: (0, import_css49.cx)((0, import_browser68.withVendorCSSClassPrefix)("user-dropdown__menu"), styles.dropdownMenu), children: allMenuItems.map((item, index) => /* @__PURE__ */ (0, import_jsx_runtime81.jsx)("div", { children: item.label === "" ? /* @__PURE__ */ (0, import_jsx_runtime81.jsx)("div", { className: (0, import_css49.cx)((0, import_browser68.withVendorCSSClassPrefix)("user-dropdown__menu-divider"), styles.divider) }) : item.href ? /* @__PURE__ */ (0, import_jsx_runtime81.jsxs)(
+          /* @__PURE__ */ (0, import_jsx_runtime82.jsx)("div", { className: (0, import_css49.cx)((0, import_browser70.withVendorCSSClassPrefix)("user-dropdown__menu"), styles.dropdownMenu), children: allMenuItems.map((item, index) => /* @__PURE__ */ (0, import_jsx_runtime82.jsx)("div", { children: item.label === "" ? /* @__PURE__ */ (0, import_jsx_runtime82.jsx)("div", { className: (0, import_css49.cx)((0, import_browser70.withVendorCSSClassPrefix)("user-dropdown__menu-divider"), styles.divider) }) : item.href ? /* @__PURE__ */ (0, import_jsx_runtime82.jsxs)(
             "a",
             {
               href: item.href,
               style: {
                 backgroundColor: hoveredItemIndex === index ? theme.vars.colors.action?.hover : "transparent"
               },
-              className: (0, import_css49.cx)((0, import_browser68.withVendorCSSClassPrefix)("user-dropdown__menu-item"), styles.menuItemAnchor),
+              className: (0, import_css49.cx)((0, import_browser70.withVendorCSSClassPrefix)("user-dropdown__menu-item"), styles.menuItemAnchor),
               onMouseEnter: () => setHoveredItemIndex(index),
               onMouseLeave: () => setHoveredItemIndex(null),
               onFocus: () => setHoveredItemIndex(index),
               onBlur: () => setHoveredItemIndex(null),
               children: [
                 item.icon,
-                /* @__PURE__ */ (0, import_jsx_runtime81.jsx)("span", { children: item.label })
+                /* @__PURE__ */ (0, import_jsx_runtime82.jsx)("span", { children: item.label })
               ]
             }
-          ) : /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(
+          ) : /* @__PURE__ */ (0, import_jsx_runtime82.jsx)(
             Button_default,
             {
               onClick: () => handleMenuItemClick(item),
               style: {
                 backgroundColor: hoveredItemIndex === index ? theme.vars.colors.action?.hover : "transparent"
               },
-              className: (0, import_css49.cx)((0, import_browser68.withVendorCSSClassPrefix)("user-dropdown__menu-item"), styles.menuItem),
+              className: (0, import_css49.cx)((0, import_browser70.withVendorCSSClassPrefix)("user-dropdown__menu-item"), styles.menuItem),
               color: "tertiary",
               variant: "text",
               size: "small",
@@ -10677,7 +10911,7 @@ var BaseUserDropdown_default = BaseUserDropdown;
 
 // src/components/presentation/UserDropdown/UserDropdown.tsx
 var import_react76 = require("react");
-var import_jsx_runtime82 = require("react/jsx-runtime");
+var import_jsx_runtime83 = require("react/jsx-runtime");
 var UserDropdown = ({
   children,
   renderTrigger,
@@ -10706,14 +10940,14 @@ var UserDropdown = ({
     closeProfile
   };
   if (children) {
-    return /* @__PURE__ */ (0, import_jsx_runtime82.jsxs)(import_jsx_runtime82.Fragment, { children: [
+    return /* @__PURE__ */ (0, import_jsx_runtime83.jsxs)(import_jsx_runtime83.Fragment, { children: [
       children(renderProps),
-      /* @__PURE__ */ (0, import_jsx_runtime82.jsx)(UserProfile_default, { mode: "popup", open: isProfileOpen, onOpenChange: setIsProfileOpen })
+      /* @__PURE__ */ (0, import_jsx_runtime83.jsx)(UserProfile_default, { mode: "popup", open: isProfileOpen, onOpenChange: setIsProfileOpen })
     ] });
   }
   if (renderTrigger || renderDropdown) {
-    return /* @__PURE__ */ (0, import_jsx_runtime82.jsxs)(import_jsx_runtime82.Fragment, { children: [
-      renderTrigger ? renderTrigger(renderProps) : /* @__PURE__ */ (0, import_jsx_runtime82.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime83.jsxs)(import_jsx_runtime83.Fragment, { children: [
+      renderTrigger ? renderTrigger(renderProps) : /* @__PURE__ */ (0, import_jsx_runtime83.jsx)(
         BaseUserDropdown_default,
         {
           user,
@@ -10723,11 +10957,11 @@ var UserDropdown = ({
           ...rest
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime82.jsx)(UserProfile_default, { mode: "popup", open: isProfileOpen, onOpenChange: setIsProfileOpen })
+      /* @__PURE__ */ (0, import_jsx_runtime83.jsx)(UserProfile_default, { mode: "popup", open: isProfileOpen, onOpenChange: setIsProfileOpen })
     ] });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime82.jsxs)(import_jsx_runtime82.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime82.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime83.jsxs)(import_jsx_runtime83.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime83.jsx)(
       BaseUserDropdown_default,
       {
         user,
@@ -10737,7 +10971,7 @@ var UserDropdown = ({
         ...rest
       }
     ),
-    isProfileOpen && /* @__PURE__ */ (0, import_jsx_runtime82.jsx)(UserProfile_default, { mode: "popup", open: isProfileOpen, onOpenChange: setIsProfileOpen })
+    isProfileOpen && /* @__PURE__ */ (0, import_jsx_runtime83.jsx)(UserProfile_default, { mode: "popup", open: isProfileOpen, onOpenChange: setIsProfileOpen })
   ] });
 };
 var UserDropdown_default = UserDropdown;
@@ -10748,9 +10982,9 @@ var import_css51 = require("@emotion/css");
 var import_react79 = require("react");
 
 // src/components/primitives/Icons/Building.tsx
-var import_jsx_runtime83 = require("react/jsx-runtime");
-var Building = ({ color = "currentColor", height = 24, width = 24 }) => /* @__PURE__ */ (0, import_jsx_runtime83.jsxs)("svg", { width, height, viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [
-  /* @__PURE__ */ (0, import_jsx_runtime83.jsx)(
+var import_jsx_runtime84 = require("react/jsx-runtime");
+var Building = ({ color = "currentColor", height = 24, width = 24 }) => /* @__PURE__ */ (0, import_jsx_runtime84.jsxs)("svg", { width, height, viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [
+  /* @__PURE__ */ (0, import_jsx_runtime84.jsx)(
     "path",
     {
       d: "M6 22V4a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2v18Z",
@@ -10760,25 +10994,25 @@ var Building = ({ color = "currentColor", height = 24, width = 24 }) => /* @__PU
       strokeLinejoin: "round"
     }
   ),
-  /* @__PURE__ */ (0, import_jsx_runtime83.jsx)("path", { d: "M6 12h4", stroke: color, strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }),
-  /* @__PURE__ */ (0, import_jsx_runtime83.jsx)("path", { d: "M6 8h4", stroke: color, strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }),
-  /* @__PURE__ */ (0, import_jsx_runtime83.jsx)("path", { d: "M14 8h4", stroke: color, strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }),
-  /* @__PURE__ */ (0, import_jsx_runtime83.jsx)("path", { d: "M14 12h4", stroke: color, strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }),
-  /* @__PURE__ */ (0, import_jsx_runtime83.jsx)("path", { d: "M6 18h4", stroke: color, strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }),
-  /* @__PURE__ */ (0, import_jsx_runtime83.jsx)("path", { d: "M14 18h4", stroke: color, strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" })
+  /* @__PURE__ */ (0, import_jsx_runtime84.jsx)("path", { d: "M6 12h4", stroke: color, strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }),
+  /* @__PURE__ */ (0, import_jsx_runtime84.jsx)("path", { d: "M6 8h4", stroke: color, strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }),
+  /* @__PURE__ */ (0, import_jsx_runtime84.jsx)("path", { d: "M14 8h4", stroke: color, strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }),
+  /* @__PURE__ */ (0, import_jsx_runtime84.jsx)("path", { d: "M14 12h4", stroke: color, strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }),
+  /* @__PURE__ */ (0, import_jsx_runtime84.jsx)("path", { d: "M6 18h4", stroke: color, strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }),
+  /* @__PURE__ */ (0, import_jsx_runtime84.jsx)("path", { d: "M14 18h4", stroke: color, strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" })
 ] });
 Building.displayName = "Building";
 var Building_default = Building;
 
 // src/components/primitives/Icons/Check.tsx
-var import_jsx_runtime84 = require("react/jsx-runtime");
-var Check = ({ color = "currentColor", height = 24, width = 24 }) => /* @__PURE__ */ (0, import_jsx_runtime84.jsx)("svg", { width, height, viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ (0, import_jsx_runtime84.jsx)("path", { d: "M20 6 9 17l-5-5", stroke: color, strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) });
+var import_jsx_runtime85 = require("react/jsx-runtime");
+var Check = ({ color = "currentColor", height = 24, width = 24 }) => /* @__PURE__ */ (0, import_jsx_runtime85.jsx)("svg", { width, height, viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ (0, import_jsx_runtime85.jsx)("path", { d: "M20 6 9 17l-5-5", stroke: color, strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) });
 Check.displayName = "Check";
 var Check_default = Check;
 
 // src/components/primitives/Icons/ChevronDown.tsx
-var import_jsx_runtime85 = require("react/jsx-runtime");
-var ChevronDown = ({ color = "currentColor", height = 24, width = 24 }) => /* @__PURE__ */ (0, import_jsx_runtime85.jsx)("svg", { width, height, viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ (0, import_jsx_runtime85.jsx)("path", { d: "m6 9 6 6 6-6", stroke: color, strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) });
+var import_jsx_runtime86 = require("react/jsx-runtime");
+var ChevronDown = ({ color = "currentColor", height = 24, width = 24 }) => /* @__PURE__ */ (0, import_jsx_runtime86.jsx)("svg", { width, height, viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ (0, import_jsx_runtime86.jsx)("path", { d: "m6 9 6 6 6-6", stroke: color, strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) });
 ChevronDown.displayName = "ChevronDown";
 var ChevronDown_default = ChevronDown;
 
@@ -10871,7 +11105,7 @@ var useStyles24 = (theme, colorScheme) => {
     `;
     const manageButton = import_css50.css`
       min-width: auto;
-      margin-left: auto;
+      margin-inline-start: auto;
     `;
     const menu = import_css50.css`
       display: flex;
@@ -10891,7 +11125,7 @@ var useStyles24 = (theme, colorScheme) => {
       background-color: transparent;
       cursor: pointer;
       font-size: 0.875rem;
-      text-align: left;
+      text-align: start;
       border-radius: ${theme.vars.borderRadius.medium};
       transition: background-color 0.15s ease-in-out;
 
@@ -11008,7 +11242,7 @@ var useStyles24 = (theme, colorScheme) => {
 var BaseOrganizationSwitcher_styles_default = useStyles24;
 
 // src/components/presentation/OrganizationSwitcher/BaseOrganizationSwitcher.tsx
-var import_jsx_runtime86 = require("react/jsx-runtime");
+var import_jsx_runtime87 = require("react/jsx-runtime");
 var BaseOrganizationSwitcher = ({
   organizations,
   currentOrganization,
@@ -11029,11 +11263,12 @@ var BaseOrganizationSwitcher = ({
   avatarSize = 24,
   fallback = null
 }) => {
-  const { theme, colorScheme } = useTheme_default();
+  const { theme, colorScheme, direction } = useTheme_default();
   const styles = BaseOrganizationSwitcher_styles_default(theme, colorScheme);
   const [isOpen, setIsOpen] = (0, import_react79.useState)(false);
   const [hoveredItemIndex, setHoveredItemIndex] = (0, import_react79.useState)(null);
   const { t } = useTranslation_default();
+  const isRTL = direction === "rtl";
   const { refs, floatingStyles, context } = (0, import_react78.useFloating)({
     open: isOpen,
     onOpenChange: setIsOpen,
@@ -11061,8 +11296,8 @@ var BaseOrganizationSwitcher = ({
   const switchableOrganizations = organizations.filter(
     (org) => org.id !== currentOrganization?.id
   );
-  const defaultRenderOrganization2 = (organization, isSelected) => /* @__PURE__ */ (0, import_jsx_runtime86.jsxs)(import_jsx_runtime86.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime86.jsx)(
+  const defaultRenderOrganization2 = (organization, isSelected) => /* @__PURE__ */ (0, import_jsx_runtime87.jsxs)(import_jsx_runtime87.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime87.jsx)(
       Avatar,
       {
         variant: "square",
@@ -11072,24 +11307,24 @@ var BaseOrganizationSwitcher = ({
         alt: `${organization.name} avatar`
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime86.jsxs)("div", { className: (0, import_css51.cx)(styles.organizationInfo), children: [
-      /* @__PURE__ */ (0, import_jsx_runtime86.jsx)(Typography_default, { variant: "body2", fontWeight: "medium", className: (0, import_css51.cx)(styles.organizationName), children: organization.name }),
-      /* @__PURE__ */ (0, import_jsx_runtime86.jsxs)("div", { className: (0, import_css51.cx)(styles.organizationMeta), children: [
-        showMemberCount && organization.memberCount !== void 0 && /* @__PURE__ */ (0, import_jsx_runtime86.jsxs)("span", { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime87.jsxs)("div", { className: (0, import_css51.cx)(styles.organizationInfo), children: [
+      /* @__PURE__ */ (0, import_jsx_runtime87.jsx)(Typography_default, { variant: "body2", fontWeight: "medium", className: (0, import_css51.cx)(styles.organizationName), children: organization.name }),
+      /* @__PURE__ */ (0, import_jsx_runtime87.jsxs)("div", { className: (0, import_css51.cx)(styles.organizationMeta), children: [
+        showMemberCount && organization.memberCount !== void 0 && /* @__PURE__ */ (0, import_jsx_runtime87.jsxs)("span", { children: [
           organization.memberCount,
           " ",
           organization.memberCount === 1 ? t("organization.switcher.member") : t("organization.switcher.members")
         ] }),
-        showRole && organization.role && showMemberCount && organization.memberCount !== void 0 && /* @__PURE__ */ (0, import_jsx_runtime86.jsx)("span", { children: " \u2022 " }),
-        showRole && organization.role && /* @__PURE__ */ (0, import_jsx_runtime86.jsx)("span", { className: (0, import_css51.cx)(styles.roleCapitalized), children: organization.role })
+        showRole && organization.role && showMemberCount && organization.memberCount !== void 0 && /* @__PURE__ */ (0, import_jsx_runtime87.jsx)("span", { children: " \u2022 " }),
+        showRole && organization.role && /* @__PURE__ */ (0, import_jsx_runtime87.jsx)("span", { className: (0, import_css51.cx)(styles.roleCapitalized), children: organization.role })
       ] })
     ] }),
-    isSelected && /* @__PURE__ */ (0, import_jsx_runtime86.jsx)(Check_default, { width: "16", height: "16", color: theme.vars.colors.text.primary })
+    isSelected && /* @__PURE__ */ (0, import_jsx_runtime87.jsx)(Check_default, { width: "16", height: "16", color: theme.vars.colors.text.primary })
   ] });
-  const defaultRenderLoading2 = () => /* @__PURE__ */ (0, import_jsx_runtime86.jsx)("div", { className: (0, import_css51.cx)(styles.loadingContainer), children: /* @__PURE__ */ (0, import_jsx_runtime86.jsx)(Typography_default, { variant: "caption", className: (0, import_css51.cx)(styles.loadingText), children: t("organization.switcher.loading.organizations") }) });
-  const defaultRenderError2 = (errorMessage) => /* @__PURE__ */ (0, import_jsx_runtime86.jsx)("div", { className: (0, import_css51.cx)(styles.errorContainer), children: /* @__PURE__ */ (0, import_jsx_runtime86.jsx)(Typography_default, { variant: "caption", className: (0, import_css51.cx)(styles.errorText), children: errorMessage }) });
-  return /* @__PURE__ */ (0, import_jsx_runtime86.jsxs)("div", { className: (0, import_css51.cx)(styles.root, className), style, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime86.jsxs)(
+  const defaultRenderLoading2 = () => /* @__PURE__ */ (0, import_jsx_runtime87.jsx)("div", { className: (0, import_css51.cx)(styles.loadingContainer), children: /* @__PURE__ */ (0, import_jsx_runtime87.jsx)(Typography_default, { variant: "caption", className: (0, import_css51.cx)(styles.loadingText), children: t("organization.switcher.loading.organizations") }) });
+  const defaultRenderError2 = (errorMessage) => /* @__PURE__ */ (0, import_jsx_runtime87.jsx)("div", { className: (0, import_css51.cx)(styles.errorContainer), children: /* @__PURE__ */ (0, import_jsx_runtime87.jsx)(Typography_default, { variant: "caption", className: (0, import_css51.cx)(styles.errorText), children: errorMessage }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime87.jsxs)("div", { className: (0, import_css51.cx)(styles.root, className), style, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime87.jsxs)(
       Button_default,
       {
         ref: refs.setReference,
@@ -11099,8 +11334,8 @@ var BaseOrganizationSwitcher = ({
         size: "medium",
         ...getReferenceProps(),
         children: [
-          currentOrganization ? /* @__PURE__ */ (0, import_jsx_runtime86.jsxs)(import_jsx_runtime86.Fragment, { children: [
-            /* @__PURE__ */ (0, import_jsx_runtime86.jsx)(
+          currentOrganization ? /* @__PURE__ */ (0, import_jsx_runtime87.jsxs)(import_jsx_runtime87.Fragment, { children: [
+            /* @__PURE__ */ (0, import_jsx_runtime87.jsx)(
               Avatar,
               {
                 variant: "square",
@@ -11110,18 +11345,18 @@ var BaseOrganizationSwitcher = ({
                 alt: `${currentOrganization.name} avatar`
               }
             ),
-            showTriggerLabel && /* @__PURE__ */ (0, import_jsx_runtime86.jsx)(Typography_default, { variant: "body2", className: (0, import_css51.cx)(styles.triggerLabel), children: currentOrganization.name })
-          ] }) : /* @__PURE__ */ (0, import_jsx_runtime86.jsxs)(import_jsx_runtime86.Fragment, { children: [
-            /* @__PURE__ */ (0, import_jsx_runtime86.jsx)(Building_default, { width: avatarSize, height: avatarSize }),
-            showTriggerLabel && /* @__PURE__ */ (0, import_jsx_runtime86.jsx)(Typography_default, { variant: "body2", className: (0, import_css51.cx)(styles.triggerLabel), children: t("organization.switcher.select.organization") })
+            showTriggerLabel && /* @__PURE__ */ (0, import_jsx_runtime87.jsx)(Typography_default, { variant: "body2", className: (0, import_css51.cx)(styles.triggerLabel), children: currentOrganization.name })
+          ] }) : /* @__PURE__ */ (0, import_jsx_runtime87.jsxs)(import_jsx_runtime87.Fragment, { children: [
+            /* @__PURE__ */ (0, import_jsx_runtime87.jsx)(Building_default, { width: avatarSize, height: avatarSize }),
+            showTriggerLabel && /* @__PURE__ */ (0, import_jsx_runtime87.jsx)(Typography_default, { variant: "body2", className: (0, import_css51.cx)(styles.triggerLabel), children: t("organization.switcher.select.organization") })
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime86.jsx)(ChevronDown_default, { width: "16", height: "16" })
+          /* @__PURE__ */ (0, import_jsx_runtime87.jsx)("span", { style: { transform: isRTL ? "scaleX(-1)" : "none", display: "inline-flex" }, children: /* @__PURE__ */ (0, import_jsx_runtime87.jsx)(ChevronDown_default, { width: "16", height: "16" }) })
         ]
       }
     ),
-    isOpen && /* @__PURE__ */ (0, import_jsx_runtime86.jsx)(import_react78.FloatingPortal, { id: portalId, children: /* @__PURE__ */ (0, import_jsx_runtime86.jsx)(import_react78.FloatingFocusManager, { context, modal: false, initialFocus: -1, children: /* @__PURE__ */ (0, import_jsx_runtime86.jsxs)("div", { ref: refs.setFloating, className: (0, import_css51.cx)(styles.content), style: floatingStyles, ...getFloatingProps(), children: [
-      currentOrganization && /* @__PURE__ */ (0, import_jsx_runtime86.jsxs)("div", { className: (0, import_css51.cx)(styles.header), children: [
-        /* @__PURE__ */ (0, import_jsx_runtime86.jsx)(
+    isOpen && /* @__PURE__ */ (0, import_jsx_runtime87.jsx)(import_react78.FloatingPortal, { id: portalId, children: /* @__PURE__ */ (0, import_jsx_runtime87.jsx)(import_react78.FloatingFocusManager, { context, modal: false, initialFocus: -1, children: /* @__PURE__ */ (0, import_jsx_runtime87.jsxs)("div", { ref: refs.setFloating, className: (0, import_css51.cx)(styles.content), style: floatingStyles, ...getFloatingProps(), children: [
+      currentOrganization && /* @__PURE__ */ (0, import_jsx_runtime87.jsxs)("div", { className: (0, import_css51.cx)(styles.header), children: [
+        /* @__PURE__ */ (0, import_jsx_runtime87.jsx)(
           Avatar,
           {
             variant: "square",
@@ -11131,10 +11366,10 @@ var BaseOrganizationSwitcher = ({
             alt: `${currentOrganization.name} avatar`
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime86.jsxs)("div", { className: (0, import_css51.cx)(styles.headerInfo), children: [
-          /* @__PURE__ */ (0, import_jsx_runtime86.jsx)(Typography_default, { noWrap: true, className: (0, import_css51.cx)(styles.headerName), variant: "body1", fontWeight: "medium", children: currentOrganization.name }),
-          /* @__PURE__ */ (0, import_jsx_runtime86.jsxs)("div", { className: (0, import_css51.cx)(styles.headerMeta), children: [
-            showMemberCount && currentOrganization.memberCount !== void 0 && /* @__PURE__ */ (0, import_jsx_runtime86.jsxs)(
+        /* @__PURE__ */ (0, import_jsx_runtime87.jsxs)("div", { className: (0, import_css51.cx)(styles.headerInfo), children: [
+          /* @__PURE__ */ (0, import_jsx_runtime87.jsx)(Typography_default, { noWrap: true, className: (0, import_css51.cx)(styles.headerName), variant: "body1", fontWeight: "medium", children: currentOrganization.name }),
+          /* @__PURE__ */ (0, import_jsx_runtime87.jsxs)("div", { className: (0, import_css51.cx)(styles.headerMeta), children: [
+            showMemberCount && currentOrganization.memberCount !== void 0 && /* @__PURE__ */ (0, import_jsx_runtime87.jsxs)(
               Typography_default,
               {
                 noWrap: true,
@@ -11144,17 +11379,17 @@ var BaseOrganizationSwitcher = ({
                   currentOrganization.memberCount,
                   " ",
                   currentOrganization.memberCount === 1 ? t("organization.switcher.member") : t("organization.switcher.members"),
-                  showRole && currentOrganization.role && /* @__PURE__ */ (0, import_jsx_runtime86.jsxs)("span", { children: [
+                  showRole && currentOrganization.role && /* @__PURE__ */ (0, import_jsx_runtime87.jsxs)("span", { children: [
                     " \u2022 ",
                     currentOrganization.role
                   ] })
                 ]
               }
             ),
-            showRole && currentOrganization.role && (!showMemberCount || currentOrganization.memberCount === void 0) && /* @__PURE__ */ (0, import_jsx_runtime86.jsx)(Typography_default, { noWrap: true, className: (0, import_css51.cx)(styles.headerRole), variant: "caption", color: "secondary", children: currentOrganization.role })
+            showRole && currentOrganization.role && (!showMemberCount || currentOrganization.memberCount === void 0) && /* @__PURE__ */ (0, import_jsx_runtime87.jsx)(Typography_default, { noWrap: true, className: (0, import_css51.cx)(styles.headerRole), variant: "caption", color: "secondary", children: currentOrganization.role })
           ] })
         ] }),
-        onManageProfile && /* @__PURE__ */ (0, import_jsx_runtime86.jsx)(
+        onManageProfile && /* @__PURE__ */ (0, import_jsx_runtime87.jsx)(
           Button_default,
           {
             onClick: onManageProfile,
@@ -11163,7 +11398,7 @@ var BaseOrganizationSwitcher = ({
             size: "small",
             "aria-label": "Manage Organization Profile",
             className: (0, import_css51.cx)(styles.manageButton),
-            endIcon: /* @__PURE__ */ (0, import_jsx_runtime86.jsxs)(
+            endIcon: /* @__PURE__ */ (0, import_jsx_runtime87.jsxs)(
               "svg",
               {
                 width: "16",
@@ -11175,8 +11410,8 @@ var BaseOrganizationSwitcher = ({
                 strokeLinecap: "round",
                 strokeLinejoin: "round",
                 children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime86.jsx)("circle", { cx: "12", cy: "12", r: "3" }),
-                  /* @__PURE__ */ (0, import_jsx_runtime86.jsx)("path", { d: "M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1 1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z" })
+                  /* @__PURE__ */ (0, import_jsx_runtime87.jsx)("circle", { cx: "12", cy: "12", r: "3" }),
+                  /* @__PURE__ */ (0, import_jsx_runtime87.jsx)("path", { d: "M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1 1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z" })
                 ]
               }
             ),
@@ -11184,20 +11419,20 @@ var BaseOrganizationSwitcher = ({
           }
         )
       ] }),
-      organizations.length > 1 && /* @__PURE__ */ (0, import_jsx_runtime86.jsx)(
+      organizations.length > 1 && /* @__PURE__ */ (0, import_jsx_runtime87.jsx)(
         "div",
         {
           className: (0, import_css51.cx)(styles.header, styles.sectionHeaderContainer),
           style: {
             borderTop: currentOrganization ? `1px solid ${theme.vars.colors.border}` : "none"
           },
-          children: /* @__PURE__ */ (0, import_jsx_runtime86.jsx)(Typography_default, { variant: "caption", fontWeight: 600, className: (0, import_css51.cx)(styles.sectionHeader), children: t("organization.switcher.switch.organization") })
+          children: /* @__PURE__ */ (0, import_jsx_runtime87.jsx)(Typography_default, { variant: "caption", fontWeight: 600, className: (0, import_css51.cx)(styles.sectionHeader), children: t("organization.switcher.switch.organization") })
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime86.jsx)("div", { className: (0, import_css51.cx)(styles.menu), children: loading ? renderLoading ? renderLoading() : defaultRenderLoading2() : error ? renderError ? renderError(error) : defaultRenderError2(error) : /* @__PURE__ */ (0, import_jsx_runtime86.jsxs)(import_jsx_runtime86.Fragment, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime87.jsx)("div", { className: (0, import_css51.cx)(styles.menu), children: loading ? renderLoading ? renderLoading() : defaultRenderLoading2() : error ? renderError ? renderError(error) : defaultRenderError2(error) : /* @__PURE__ */ (0, import_jsx_runtime87.jsxs)(import_jsx_runtime87.Fragment, { children: [
         switchableOrganizations.map((organization) => {
           const isSelected = false;
-          return /* @__PURE__ */ (0, import_jsx_runtime86.jsx)(
+          return /* @__PURE__ */ (0, import_jsx_runtime87.jsx)(
             Button_default,
             {
               onClick: () => handleOrganizationSwitch(organization),
@@ -11215,10 +11450,10 @@ var BaseOrganizationSwitcher = ({
             organization.id
           );
         }),
-        menuItems.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime86.jsxs)(import_jsx_runtime86.Fragment, { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime86.jsx)("div", { className: (0, import_css51.cx)(styles.menuDivider) }),
+        menuItems.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime87.jsxs)(import_jsx_runtime87.Fragment, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime87.jsx)("div", { className: (0, import_css51.cx)(styles.menuDivider) }),
           menuItems.map(
-            (item, index) => /* @__PURE__ */ (0, import_jsx_runtime86.jsx)("div", { children: item.href ? /* @__PURE__ */ (0, import_jsx_runtime86.jsxs)(
+            (item, index) => /* @__PURE__ */ (0, import_jsx_runtime87.jsx)("div", { children: item.href ? /* @__PURE__ */ (0, import_jsx_runtime87.jsxs)(
               "a",
               {
                 href: item.href,
@@ -11232,10 +11467,10 @@ var BaseOrganizationSwitcher = ({
                 onBlur: () => setHoveredItemIndex(null),
                 children: [
                   item.icon,
-                  /* @__PURE__ */ (0, import_jsx_runtime86.jsx)("span", { children: item.label })
+                  /* @__PURE__ */ (0, import_jsx_runtime87.jsx)("span", { children: item.label })
                 ]
               }
-            ) : /* @__PURE__ */ (0, import_jsx_runtime86.jsx)(
+            ) : /* @__PURE__ */ (0, import_jsx_runtime87.jsx)(
               Button_default,
               {
                 onClick: () => handleMenuItemClick(item),
@@ -11409,7 +11644,7 @@ var useStyles25 = (theme, colorScheme) => {
 var BaseCreateOrganization_styles_default = useStyles25;
 
 // src/components/presentation/CreateOrganization/BaseCreateOrganization.tsx
-var import_jsx_runtime87 = require("react/jsx-runtime");
+var import_jsx_runtime88 = require("react/jsx-runtime");
 var BaseCreateOrganization = ({
   cardLayout = true,
   className = "",
@@ -11496,13 +11731,13 @@ var BaseCreateOrganization = ({
       console.error("Form submission error:", submitError);
     }
   };
-  const createOrganizationContent = /* @__PURE__ */ (0, import_jsx_runtime87.jsx)("div", { className: (0, import_css53.cx)(styles.root, cardLayout && styles.card, className), style, children: /* @__PURE__ */ (0, import_jsx_runtime87.jsxs)("div", { className: (0, import_css53.cx)(styles.content), children: [
-    /* @__PURE__ */ (0, import_jsx_runtime87.jsxs)("form", { id: "create-organization-form", className: (0, import_css53.cx)(styles.form), onSubmit: handleSubmit, children: [
-      error && /* @__PURE__ */ (0, import_jsx_runtime87.jsxs)(Alert_default, { variant: "error", className: styles.errorAlert, children: [
-        /* @__PURE__ */ (0, import_jsx_runtime87.jsx)(Alert_default.Title, { children: "Error" }),
-        /* @__PURE__ */ (0, import_jsx_runtime87.jsx)(Alert_default.Description, { children: error })
+  const createOrganizationContent = /* @__PURE__ */ (0, import_jsx_runtime88.jsx)("div", { className: (0, import_css53.cx)(styles.root, cardLayout && styles.card, className), style, children: /* @__PURE__ */ (0, import_jsx_runtime88.jsxs)("div", { className: (0, import_css53.cx)(styles.content), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime88.jsxs)("form", { id: "create-organization-form", className: (0, import_css53.cx)(styles.form), onSubmit: handleSubmit, children: [
+      error && /* @__PURE__ */ (0, import_jsx_runtime88.jsxs)(Alert_default, { variant: "error", className: styles.errorAlert, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime88.jsx)(Alert_default.Title, { children: "Error" }),
+        /* @__PURE__ */ (0, import_jsx_runtime88.jsx)(Alert_default.Description, { children: error })
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime87.jsx)("div", { className: (0, import_css53.cx)(styles.fieldGroup), children: /* @__PURE__ */ (0, import_jsx_runtime87.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime88.jsx)("div", { className: (0, import_css53.cx)(styles.fieldGroup), children: /* @__PURE__ */ (0, import_jsx_runtime88.jsx)(
         TextField_default,
         {
           label: `${t("organization.create.name.label")}`,
@@ -11515,7 +11750,7 @@ var BaseCreateOrganization = ({
           className: (0, import_css53.cx)(styles.input)
         }
       ) }),
-      /* @__PURE__ */ (0, import_jsx_runtime87.jsx)("div", { className: (0, import_css53.cx)(styles.fieldGroup), children: /* @__PURE__ */ (0, import_jsx_runtime87.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime88.jsx)("div", { className: (0, import_css53.cx)(styles.fieldGroup), children: /* @__PURE__ */ (0, import_jsx_runtime88.jsx)(
         TextField_default,
         {
           label: `${t("organization.create.handle.label") || "Organization Handle"}`,
@@ -11529,9 +11764,9 @@ var BaseCreateOrganization = ({
           className: (0, import_css53.cx)(styles.input)
         }
       ) }),
-      /* @__PURE__ */ (0, import_jsx_runtime87.jsx)("div", { className: (0, import_css53.cx)(styles.fieldGroup), children: /* @__PURE__ */ (0, import_jsx_runtime87.jsxs)(FormControl_default, { error: formErrors.description, children: [
-        /* @__PURE__ */ (0, import_jsx_runtime87.jsx)(InputLabel_default, { required: true, children: t("organization.create.description.label") }),
-        /* @__PURE__ */ (0, import_jsx_runtime87.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime88.jsx)("div", { className: (0, import_css53.cx)(styles.fieldGroup), children: /* @__PURE__ */ (0, import_jsx_runtime88.jsxs)(FormControl_default, { error: formErrors.description, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime88.jsx)(InputLabel_default, { required: true, children: t("organization.create.description.label") }),
+        /* @__PURE__ */ (0, import_jsx_runtime88.jsx)(
           "textarea",
           {
             className: (0, import_css53.cx)(styles.textarea, formErrors.description && styles.textareaError),
@@ -11545,23 +11780,23 @@ var BaseCreateOrganization = ({
       ] }) }),
       renderAdditionalFields && renderAdditionalFields()
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime87.jsxs)("div", { className: (0, import_css53.cx)(styles.actions), children: [
-      onCancel && /* @__PURE__ */ (0, import_jsx_runtime87.jsx)(Button_default, { type: "button", variant: "outline", onClick: onCancel, disabled: loading, children: t("organization.create.cancel") }),
-      /* @__PURE__ */ (0, import_jsx_runtime87.jsx)(Button_default, { type: "submit", variant: "solid", color: "primary", disabled: loading, form: "create-organization-form", children: loading ? t("organization.create.creating") : t("organization.create.button") })
+    /* @__PURE__ */ (0, import_jsx_runtime88.jsxs)("div", { className: (0, import_css53.cx)(styles.actions), children: [
+      onCancel && /* @__PURE__ */ (0, import_jsx_runtime88.jsx)(Button_default, { type: "button", variant: "outline", onClick: onCancel, disabled: loading, children: t("organization.create.cancel") }),
+      /* @__PURE__ */ (0, import_jsx_runtime88.jsx)(Button_default, { type: "submit", variant: "solid", color: "primary", disabled: loading, form: "create-organization-form", children: loading ? t("organization.create.creating") : t("organization.create.button") })
     ] })
   ] }) });
   if (mode === "popup") {
-    return /* @__PURE__ */ (0, import_jsx_runtime87.jsx)(Dialog_default, { open, onOpenChange, children: /* @__PURE__ */ (0, import_jsx_runtime87.jsxs)(Dialog_default.Content, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime87.jsx)(Dialog_default.Heading, { children: title }),
-      /* @__PURE__ */ (0, import_jsx_runtime87.jsx)("div", { className: styles.popup, children: createOrganizationContent })
+    return /* @__PURE__ */ (0, import_jsx_runtime88.jsx)(Dialog_default, { open, onOpenChange, children: /* @__PURE__ */ (0, import_jsx_runtime88.jsxs)(Dialog_default.Content, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime88.jsx)(Dialog_default.Heading, { children: title }),
+      /* @__PURE__ */ (0, import_jsx_runtime88.jsx)("div", { className: styles.popup, children: createOrganizationContent })
     ] }) });
   }
   return createOrganizationContent;
 };
 
 // src/api/createOrganization.ts
-var import_browser69 = require("@asgardeo/browser");
-var httpClient6 = import_browser69.AsgardeoSPAClient.getInstance().httpRequest.bind(import_browser69.AsgardeoSPAClient.getInstance());
+var import_browser71 = require("@asgardeo/browser");
+var httpClient6 = import_browser71.AsgardeoSPAClient.getInstance().httpRequest.bind(import_browser71.AsgardeoSPAClient.getInstance());
 var createOrganization = async ({ fetcher, ...requestConfig }) => {
   const defaultFetcher = async (url, config) => {
     const response = await httpClient6({
@@ -11578,7 +11813,7 @@ var createOrganization = async ({ fetcher, ...requestConfig }) => {
       text: () => Promise.resolve(typeof response.data === "string" ? response.data : JSON.stringify(response.data))
     };
   };
-  return (0, import_browser69.createOrganization)({
+  return (0, import_browser71.createOrganization)({
     ...requestConfig,
     fetcher: fetcher || defaultFetcher
   });
@@ -11586,7 +11821,7 @@ var createOrganization = async ({ fetcher, ...requestConfig }) => {
 var createOrganization_default = createOrganization;
 
 // src/components/presentation/CreateOrganization/CreateOrganization.tsx
-var import_jsx_runtime88 = require("react/jsx-runtime");
+var import_jsx_runtime89 = require("react/jsx-runtime");
 var CreateOrganization = ({
   onCreateOrganization,
   fallback = null,
@@ -11602,7 +11837,7 @@ var CreateOrganization = ({
     return fallback;
   }
   if (!isSignedIn) {
-    return /* @__PURE__ */ (0, import_jsx_runtime88.jsx)(import_jsx_runtime88.Fragment, {});
+    return /* @__PURE__ */ (0, import_jsx_runtime89.jsx)(import_jsx_runtime89.Fragment, {});
   }
   const parentId = defaultParentId || currentOrganization?.id || "";
   const handleSubmit = async (payload) => {
@@ -11636,7 +11871,7 @@ var CreateOrganization = ({
       setLoading(false);
     }
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime88.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime89.jsx)(
     BaseCreateOrganization,
     {
       onSubmit: handleSubmit,
@@ -11653,12 +11888,12 @@ var CreateOrganization = ({
 var import_react87 = require("react");
 
 // src/components/presentation/OrganizationProfile/BaseOrganizationProfile.tsx
-var import_browser71 = require("@asgardeo/browser");
+var import_browser73 = require("@asgardeo/browser");
 var import_css57 = require("@emotion/css");
 var import_react86 = require("react");
 
 // src/components/primitives/KeyValueInput/KeyValueInput.tsx
-var import_browser70 = require("@asgardeo/browser");
+var import_browser72 = require("@asgardeo/browser");
 var import_css55 = require("@emotion/css");
 var import_react84 = require("react");
 
@@ -11818,7 +12053,7 @@ var useStyles26 = (theme, colorScheme, disabled, readOnly, hasError) => {
 var KeyValueInput_styles_default = useStyles26;
 
 // src/components/primitives/KeyValueInput/KeyValueInput.tsx
-var import_jsx_runtime89 = require("react/jsx-runtime");
+var import_jsx_runtime90 = require("react/jsx-runtime");
 var KeyValueInput = ({
   className = "",
   disabled = false,
@@ -11893,105 +12128,105 @@ var KeyValueInput = ({
   );
   const canAddMore = !maxPairs || pairs.length < maxPairs;
   const isAddDisabled = disabled || readOnly || !canAddMore || !newKey.trim() || !newValue.trim();
-  return /* @__PURE__ */ (0, import_jsx_runtime89.jsxs)("div", { className: (0, import_css55.cx)((0, import_browser70.withVendorCSSClassPrefix)((0, import_browser70.bem)("key-value-input")), styles.container, className), children: [
-    label && /* @__PURE__ */ (0, import_jsx_runtime89.jsxs)("label", { className: (0, import_css55.cx)((0, import_browser70.withVendorCSSClassPrefix)((0, import_browser70.bem)("key-value-input", "label")), styles.label), children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime90.jsxs)("div", { className: (0, import_css55.cx)((0, import_browser72.withVendorCSSClassPrefix)((0, import_browser72.bem)("key-value-input")), styles.container, className), children: [
+    label && /* @__PURE__ */ (0, import_jsx_runtime90.jsxs)("label", { className: (0, import_css55.cx)((0, import_browser72.withVendorCSSClassPrefix)((0, import_browser72.bem)("key-value-input", "label")), styles.label), children: [
       label,
-      required && /* @__PURE__ */ (0, import_jsx_runtime89.jsx)(
+      required && /* @__PURE__ */ (0, import_jsx_runtime90.jsx)(
         "span",
         {
-          className: (0, import_css55.cx)((0, import_browser70.withVendorCSSClassPrefix)((0, import_browser70.bem)("key-value-input", "required")), styles.requiredIndicator),
+          className: (0, import_css55.cx)((0, import_browser72.withVendorCSSClassPrefix)((0, import_browser72.bem)("key-value-input", "required")), styles.requiredIndicator),
           children: " *"
         }
       )
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime89.jsxs)("div", { className: (0, import_css55.cx)((0, import_browser70.withVendorCSSClassPrefix)((0, import_browser70.bem)("key-value-input", "pairs-list")), styles.pairsList), children: [
-      pairs.length === 0 && readOnly ? /* @__PURE__ */ (0, import_jsx_runtime89.jsx)("div", { className: (0, import_css55.cx)((0, import_browser70.withVendorCSSClassPrefix)((0, import_browser70.bem)("key-value-input", "empty-state")), styles.emptyState), children: "No attributes defined" }) : readOnly ? pairs.map((pair, index) => /* @__PURE__ */ (0, import_jsx_runtime89.jsxs)(
+    /* @__PURE__ */ (0, import_jsx_runtime90.jsxs)("div", { className: (0, import_css55.cx)((0, import_browser72.withVendorCSSClassPrefix)((0, import_browser72.bem)("key-value-input", "pairs-list")), styles.pairsList), children: [
+      pairs.length === 0 && readOnly ? /* @__PURE__ */ (0, import_jsx_runtime90.jsx)("div", { className: (0, import_css55.cx)((0, import_browser72.withVendorCSSClassPrefix)((0, import_browser72.bem)("key-value-input", "empty-state")), styles.emptyState), children: "No attributes defined" }) : readOnly ? pairs.map((pair, index) => /* @__PURE__ */ (0, import_jsx_runtime90.jsxs)(
         "div",
         {
-          className: (0, import_css55.cx)((0, import_browser70.withVendorCSSClassPrefix)((0, import_browser70.bem)("key-value-input", "readonly-pair")), styles.readOnlyPair),
+          className: (0, import_css55.cx)((0, import_browser72.withVendorCSSClassPrefix)((0, import_browser72.bem)("key-value-input", "readonly-pair")), styles.readOnlyPair),
           children: [
-            /* @__PURE__ */ (0, import_jsx_runtime89.jsxs)(
+            /* @__PURE__ */ (0, import_jsx_runtime90.jsxs)(
               "span",
               {
-                className: (0, import_css55.cx)((0, import_browser70.withVendorCSSClassPrefix)((0, import_browser70.bem)("key-value-input", "readonly-key")), styles.readOnlyKey),
+                className: (0, import_css55.cx)((0, import_browser72.withVendorCSSClassPrefix)((0, import_browser72.bem)("key-value-input", "readonly-key")), styles.readOnlyKey),
                 children: [
                   pair.key,
                   ":"
                 ]
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime89.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime90.jsx)(
               "span",
               {
-                className: (0, import_css55.cx)((0, import_browser70.withVendorCSSClassPrefix)((0, import_browser70.bem)("key-value-input", "readonly-value")), styles.readOnlyValue),
+                className: (0, import_css55.cx)((0, import_browser72.withVendorCSSClassPrefix)((0, import_browser72.bem)("key-value-input", "readonly-value")), styles.readOnlyValue),
                 children: pair.value
               }
             )
           ]
         },
         `${pair.key}-${index}`
-      )) : pairs.map((pair, index) => /* @__PURE__ */ (0, import_jsx_runtime89.jsxs)(
+      )) : pairs.map((pair, index) => /* @__PURE__ */ (0, import_jsx_runtime90.jsxs)(
         "div",
         {
-          className: (0, import_css55.cx)((0, import_browser70.withVendorCSSClassPrefix)((0, import_browser70.bem)("key-value-input", "pair-row")), styles.pairRow),
+          className: (0, import_css55.cx)((0, import_browser72.withVendorCSSClassPrefix)((0, import_browser72.bem)("key-value-input", "pair-row")), styles.pairRow),
           children: [
-            /* @__PURE__ */ (0, import_jsx_runtime89.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime90.jsx)(
               TextField_default,
               {
                 placeholder: keyPlaceholder,
                 value: pair.key,
                 onChange: (e) => handleUpdatePair(index, "key", e.target.value),
                 disabled: disabled || readOnly,
-                className: (0, import_css55.cx)((0, import_browser70.withVendorCSSClassPrefix)((0, import_browser70.bem)("key-value-input", "pair-input")), styles.pairInput),
+                className: (0, import_css55.cx)((0, import_browser72.withVendorCSSClassPrefix)((0, import_browser72.bem)("key-value-input", "pair-input")), styles.pairInput),
                 "aria-label": `${keyLabel} ${index + 1}`
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime89.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime90.jsx)(
               TextField_default,
               {
                 placeholder: valuePlaceholder,
                 value: pair.value,
                 onChange: (e) => handleUpdatePair(index, "value", e.target.value),
                 disabled: disabled || readOnly,
-                className: (0, import_css55.cx)((0, import_browser70.withVendorCSSClassPrefix)((0, import_browser70.bem)("key-value-input", "pair-input")), styles.pairInput),
+                className: (0, import_css55.cx)((0, import_browser72.withVendorCSSClassPrefix)((0, import_browser72.bem)("key-value-input", "pair-input")), styles.pairInput),
                 "aria-label": `${valueLabel} ${index + 1}`
               }
             ),
-            !readOnly && /* @__PURE__ */ (0, import_jsx_runtime89.jsx)(
+            !readOnly && /* @__PURE__ */ (0, import_jsx_runtime90.jsx)(
               "button",
               {
                 type: "button",
                 onClick: () => handleRemovePair(index),
                 disabled,
-                className: (0, import_css55.cx)((0, import_browser70.withVendorCSSClassPrefix)((0, import_browser70.bem)("key-value-input", "remove-button")), styles.removeButton),
+                className: (0, import_css55.cx)((0, import_browser72.withVendorCSSClassPrefix)((0, import_browser72.bem)("key-value-input", "remove-button")), styles.removeButton),
                 "aria-label": `${removeButtonText} ${pair.key}`,
-                children: /* @__PURE__ */ (0, import_jsx_runtime89.jsx)(X_default, { width: 16, height: 16 })
+                children: /* @__PURE__ */ (0, import_jsx_runtime90.jsx)(X_default, { width: 16, height: 16 })
               }
             )
           ]
         },
         `${pair.key}-${index}`
       )),
-      !readOnly && /* @__PURE__ */ (0, import_jsx_runtime89.jsxs)("div", { className: (0, import_css55.cx)((0, import_browser70.withVendorCSSClassPrefix)((0, import_browser70.bem)("key-value-input", "add-row")), styles.addRow), children: [
-        /* @__PURE__ */ (0, import_jsx_runtime89.jsx)(
+      !readOnly && /* @__PURE__ */ (0, import_jsx_runtime90.jsxs)("div", { className: (0, import_css55.cx)((0, import_browser72.withVendorCSSClassPrefix)((0, import_browser72.bem)("key-value-input", "add-row")), styles.addRow), children: [
+        /* @__PURE__ */ (0, import_jsx_runtime90.jsx)(
           TextField_default,
           {
             placeholder: keyPlaceholder,
             value: newKey,
             onChange: (e) => setNewKey(e.target.value),
             disabled,
-            className: (0, import_css55.cx)((0, import_browser70.withVendorCSSClassPrefix)((0, import_browser70.bem)("key-value-input", "pair-input")), styles.pairInput),
+            className: (0, import_css55.cx)((0, import_browser72.withVendorCSSClassPrefix)((0, import_browser72.bem)("key-value-input", "pair-input")), styles.pairInput),
             "aria-label": "New key"
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime89.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime90.jsx)(
           TextField_default,
           {
             placeholder: valuePlaceholder,
             value: newValue,
             onChange: (e) => setNewValue(e.target.value),
             disabled,
-            className: (0, import_css55.cx)((0, import_browser70.withVendorCSSClassPrefix)((0, import_browser70.bem)("key-value-input", "pair-input")), styles.pairInput),
+            className: (0, import_css55.cx)((0, import_browser72.withVendorCSSClassPrefix)((0, import_browser72.bem)("key-value-input", "pair-input")), styles.pairInput),
             "aria-label": "New value",
             onKeyPress: (e) => {
               if (e.key === "Enter" && !isAddDisabled) {
@@ -12000,21 +12235,21 @@ var KeyValueInput = ({
             }
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime89.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime90.jsx)(
           "button",
           {
             type: "button",
             onClick: handleAddPair,
             disabled: isAddDisabled,
-            className: (0, import_css55.cx)((0, import_browser70.withVendorCSSClassPrefix)((0, import_browser70.bem)("key-value-input", "add-button")), styles.addButton),
+            className: (0, import_css55.cx)((0, import_browser72.withVendorCSSClassPrefix)((0, import_browser72.bem)("key-value-input", "add-button")), styles.addButton),
             "aria-label": "Add new key-value pair",
-            children: /* @__PURE__ */ (0, import_jsx_runtime89.jsx)(Plus_default, { width: 16, height: 16 })
+            children: /* @__PURE__ */ (0, import_jsx_runtime90.jsx)(Plus_default, { width: 16, height: 16 })
           }
         )
       ] })
     ] }),
-    (helperText || error) && /* @__PURE__ */ (0, import_jsx_runtime89.jsx)("div", { className: (0, import_css55.cx)((0, import_browser70.withVendorCSSClassPrefix)((0, import_browser70.bem)("key-value-input", "helper-text")), styles.helperText), children: error || helperText }),
-    maxPairs && /* @__PURE__ */ (0, import_jsx_runtime89.jsxs)("div", { className: (0, import_css55.cx)((0, import_browser70.withVendorCSSClassPrefix)((0, import_browser70.bem)("key-value-input", "counter")), styles.counterText), children: [
+    (helperText || error) && /* @__PURE__ */ (0, import_jsx_runtime90.jsx)("div", { className: (0, import_css55.cx)((0, import_browser72.withVendorCSSClassPrefix)((0, import_browser72.bem)("key-value-input", "helper-text")), styles.helperText), children: error || helperText }),
+    maxPairs && /* @__PURE__ */ (0, import_jsx_runtime90.jsxs)("div", { className: (0, import_css55.cx)((0, import_browser72.withVendorCSSClassPrefix)((0, import_browser72.bem)("key-value-input", "counter")), styles.counterText), children: [
       pairs.length,
       " of ",
       maxPairs,
@@ -12181,7 +12416,7 @@ var useStyles27 = (theme, colorScheme) => {
 var BaseOrganizationProfile_styles_default = useStyles27;
 
 // src/components/presentation/OrganizationProfile/BaseOrganizationProfile.tsx
-var import_jsx_runtime90 = require("react/jsx-runtime");
+var import_jsx_runtime91 = require("react/jsx-runtime");
 var BaseOrganizationProfile = ({
   fallback = null,
   className = "",
@@ -12218,13 +12453,13 @@ var BaseOrganizationProfile = ({
       key: "created",
       label: "Created Date",
       editable: false,
-      render: (value) => (0, import_browser71.formatDate)(value)
+      render: (value) => (0, import_browser73.formatDate)(value)
     },
     {
       key: "lastModified",
       label: "Last Modified Date",
       editable: false,
-      render: (value) => (0, import_browser71.formatDate)(value)
+      render: (value) => (0, import_browser73.formatDate)(value)
     }
   ]
 }) => {
@@ -12232,7 +12467,7 @@ var BaseOrganizationProfile = ({
   const styles = BaseOrganizationProfile_styles_default(theme, colorScheme);
   const [editedOrganization, setEditedOrganization] = (0, import_react86.useState)(organization);
   const [editingFields, setEditingFields] = (0, import_react86.useState)({});
-  const PencilIcon = () => /* @__PURE__ */ (0, import_jsx_runtime90.jsx)(
+  const PencilIcon = () => /* @__PURE__ */ (0, import_jsx_runtime91.jsx)(
     "svg",
     {
       width: "16",
@@ -12243,7 +12478,7 @@ var BaseOrganizationProfile = ({
       strokeWidth: "2",
       strokeLinecap: "round",
       strokeLinejoin: "round",
-      children: /* @__PURE__ */ (0, import_jsx_runtime90.jsx)("path", { d: "M17 3a2.828 2.828 0 1 1 4 4L7.5 20.5 2 22l1.5-5.5L17 3z" })
+      children: /* @__PURE__ */ (0, import_jsx_runtime91.jsx)("path", { d: "M17 3a2.828 2.828 0 1 1 4 4L7.5 20.5 2 22l1.5-5.5L17 3z" })
     }
   );
   const toggleFieldEdit = (0, import_react86.useCallback)((fieldName) => {
@@ -12306,7 +12541,7 @@ var BaseOrganizationProfile = ({
       let fieldInput;
       if (key === "attributes") {
         const attributesValue = typeof fieldValue === "object" && fieldValue !== null ? fieldValue : {};
-        fieldInput = /* @__PURE__ */ (0, import_jsx_runtime90.jsx)(
+        fieldInput = /* @__PURE__ */ (0, import_jsx_runtime91.jsx)(
           KeyValueInput_default,
           {
             value: attributesValue,
@@ -12344,26 +12579,26 @@ var BaseOrganizationProfile = ({
           }
         );
       } else {
-        fieldInput = /* @__PURE__ */ (0, import_jsx_runtime90.jsx)(TextField_default, { ...commonProps });
+        fieldInput = /* @__PURE__ */ (0, import_jsx_runtime91.jsx)(TextField_default, { ...commonProps });
       }
-      return /* @__PURE__ */ (0, import_jsx_runtime90.jsxs)(import_jsx_runtime90.Fragment, { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime90.jsx)("span", { className: (0, import_css57.cx)(styles.label), children: label }),
-        /* @__PURE__ */ (0, import_jsx_runtime90.jsx)("div", { className: (0, import_css57.cx)(styles.value), children: fieldInput })
+      return /* @__PURE__ */ (0, import_jsx_runtime91.jsxs)(import_jsx_runtime91.Fragment, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime91.jsx)("span", { className: (0, import_css57.cx)(styles.label), children: label }),
+        /* @__PURE__ */ (0, import_jsx_runtime91.jsx)("div", { className: (0, import_css57.cx)(styles.value), children: fieldInput })
       ] });
     }
     const hasValue = value !== void 0 && value !== null && value !== "";
     const isFieldEditable = editable && fieldEditable;
     let displayValue;
     if (hasValue) {
-      displayValue = key === "attributes" && typeof value === "object" && value !== null ? /* @__PURE__ */ (0, import_jsx_runtime90.jsx)(KeyValueInput_default, { value, readOnly: true, label: "" }) : String(renderedValue);
+      displayValue = key === "attributes" && typeof value === "object" && value !== null ? /* @__PURE__ */ (0, import_jsx_runtime91.jsx)(KeyValueInput_default, { value, readOnly: true, label: "" }) : String(renderedValue);
     } else if (isFieldEditable) {
       displayValue = getFieldPlaceholder(key);
     } else {
       displayValue = "-";
     }
-    return /* @__PURE__ */ (0, import_jsx_runtime90.jsxs)(import_jsx_runtime90.Fragment, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime90.jsx)("span", { className: (0, import_css57.cx)(styles.label), children: label }),
-      /* @__PURE__ */ (0, import_jsx_runtime90.jsx)("div", { className: (0, import_css57.cx)(styles.value, !hasValue && styles.valueEmpty), children: !hasValue && isFieldEditable && onStartEdit ? /* @__PURE__ */ (0, import_jsx_runtime90.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime91.jsxs)(import_jsx_runtime91.Fragment, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime91.jsx)("span", { className: (0, import_css57.cx)(styles.label), children: label }),
+      /* @__PURE__ */ (0, import_jsx_runtime91.jsx)("div", { className: (0, import_css57.cx)(styles.value, !hasValue && styles.valueEmpty), children: !hasValue && isFieldEditable && onStartEdit ? /* @__PURE__ */ (0, import_jsx_runtime91.jsx)(
         Button_default,
         {
           onClick: onStartEdit,
@@ -12386,8 +12621,8 @@ var BaseOrganizationProfile = ({
     if (!shouldShow) {
       return null;
     }
-    return /* @__PURE__ */ (0, import_jsx_runtime90.jsxs)("div", { className: (0, import_css57.cx)(styles.field), children: [
-      /* @__PURE__ */ (0, import_jsx_runtime90.jsx)("div", { className: (0, import_css57.cx)(styles.fieldContent), children: renderField(
+    return /* @__PURE__ */ (0, import_jsx_runtime91.jsxs)("div", { className: (0, import_css57.cx)(styles.field), children: [
+      /* @__PURE__ */ (0, import_jsx_runtime91.jsx)("div", { className: (0, import_css57.cx)(styles.fieldContent), children: renderField(
         field,
         isFieldEditing,
         (value) => {
@@ -12397,8 +12632,8 @@ var BaseOrganizationProfile = ({
         },
         () => toggleFieldEdit(field.key)
       ) }),
-      isFieldEditable && /* @__PURE__ */ (0, import_jsx_runtime90.jsx)("div", { className: (0, import_css57.cx)(styles.fieldActions), children: isFieldEditing ? /* @__PURE__ */ (0, import_jsx_runtime90.jsxs)(import_jsx_runtime90.Fragment, { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime90.jsx)(
+      isFieldEditable && /* @__PURE__ */ (0, import_jsx_runtime91.jsx)("div", { className: (0, import_css57.cx)(styles.fieldActions), children: isFieldEditing ? /* @__PURE__ */ (0, import_jsx_runtime91.jsxs)(import_jsx_runtime91.Fragment, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime91.jsx)(
           Button_default,
           {
             onClick: () => handleFieldSave(field.key),
@@ -12409,7 +12644,7 @@ var BaseOrganizationProfile = ({
             children: saveButtonText
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime90.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime91.jsx)(
           Button_default,
           {
             onClick: () => handleFieldCancel(field.key),
@@ -12420,7 +12655,7 @@ var BaseOrganizationProfile = ({
             children: cancelButtonText
           }
         )
-      ] }) : hasValue && /* @__PURE__ */ (0, import_jsx_runtime90.jsx)(
+      ] }) : hasValue && /* @__PURE__ */ (0, import_jsx_runtime91.jsx)(
         Button_default,
         {
           onClick: () => toggleFieldEdit(field.key),
@@ -12429,7 +12664,7 @@ var BaseOrganizationProfile = ({
           size: "small",
           title: "Edit field",
           className: (0, import_css57.cx)(styles.editButton),
-          children: /* @__PURE__ */ (0, import_jsx_runtime90.jsx)(PencilIcon, {})
+          children: /* @__PURE__ */ (0, import_jsx_runtime91.jsx)(PencilIcon, {})
         }
       ) })
     ] }, field.key);
@@ -12437,23 +12672,23 @@ var BaseOrganizationProfile = ({
   if (!organization) {
     return fallback;
   }
-  const profileContent = /* @__PURE__ */ (0, import_jsx_runtime90.jsxs)(Card_default, { className: (0, import_css57.cx)(styles.root, cardLayout && styles.card, className), children: [
-    /* @__PURE__ */ (0, import_jsx_runtime90.jsxs)("div", { className: (0, import_css57.cx)(styles.header), children: [
-      /* @__PURE__ */ (0, import_jsx_runtime90.jsx)(Avatar, { name: getOrgInitials(organization.name), size: 80, alt: `${organization.name} logo` }),
-      /* @__PURE__ */ (0, import_jsx_runtime90.jsxs)("div", { className: (0, import_css57.cx)(styles.orgInfo), children: [
-        /* @__PURE__ */ (0, import_jsx_runtime90.jsx)("h2", { className: (0, import_css57.cx)(styles.name), children: organization.name }),
-        organization.orgHandle && /* @__PURE__ */ (0, import_jsx_runtime90.jsxs)("p", { className: (0, import_css57.cx)(styles.handle), children: [
+  const profileContent = /* @__PURE__ */ (0, import_jsx_runtime91.jsxs)(Card_default, { className: (0, import_css57.cx)(styles.root, cardLayout && styles.card, className), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime91.jsxs)("div", { className: (0, import_css57.cx)(styles.header), children: [
+      /* @__PURE__ */ (0, import_jsx_runtime91.jsx)(Avatar, { name: getOrgInitials(organization.name), size: 80, alt: `${organization.name} logo` }),
+      /* @__PURE__ */ (0, import_jsx_runtime91.jsxs)("div", { className: (0, import_css57.cx)(styles.orgInfo), children: [
+        /* @__PURE__ */ (0, import_jsx_runtime91.jsx)("h2", { className: (0, import_css57.cx)(styles.name), children: organization.name }),
+        organization.orgHandle && /* @__PURE__ */ (0, import_jsx_runtime91.jsxs)("p", { className: (0, import_css57.cx)(styles.handle), children: [
           "@",
           organization.orgHandle
         ] })
       ] })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime90.jsx)("div", { className: (0, import_css57.cx)(styles.infoContainer), children: fields.map((field, index) => renderOrganizationField(field)) })
+    /* @__PURE__ */ (0, import_jsx_runtime91.jsx)("div", { className: (0, import_css57.cx)(styles.infoContainer), children: fields.map((field, index) => renderOrganizationField(field)) })
   ] });
   if (mode === "popup") {
-    return /* @__PURE__ */ (0, import_jsx_runtime90.jsx)(Dialog_default, { open, onOpenChange, children: /* @__PURE__ */ (0, import_jsx_runtime90.jsxs)(Dialog_default.Content, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime90.jsx)(Dialog_default.Heading, { children: title }),
-      /* @__PURE__ */ (0, import_jsx_runtime90.jsx)("div", { className: (0, import_css57.cx)(styles.popup), children: profileContent })
+    return /* @__PURE__ */ (0, import_jsx_runtime91.jsx)(Dialog_default, { open, onOpenChange, children: /* @__PURE__ */ (0, import_jsx_runtime91.jsxs)(Dialog_default.Content, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime91.jsx)(Dialog_default.Heading, { children: title }),
+      /* @__PURE__ */ (0, import_jsx_runtime91.jsx)("div", { className: (0, import_css57.cx)(styles.popup), children: profileContent })
     ] }) });
   }
   return profileContent;
@@ -12461,8 +12696,8 @@ var BaseOrganizationProfile = ({
 var BaseOrganizationProfile_default = BaseOrganizationProfile;
 
 // src/api/getOrganization.ts
-var import_browser72 = require("@asgardeo/browser");
-var httpClient7 = import_browser72.AsgardeoSPAClient.getInstance().httpRequest.bind(import_browser72.AsgardeoSPAClient.getInstance());
+var import_browser74 = require("@asgardeo/browser");
+var httpClient7 = import_browser74.AsgardeoSPAClient.getInstance().httpRequest.bind(import_browser74.AsgardeoSPAClient.getInstance());
 var getOrganization = async ({ fetcher, ...requestConfig }) => {
   const defaultFetcher = async (url, config) => {
     const response = await httpClient7({
@@ -12478,7 +12713,7 @@ var getOrganization = async ({ fetcher, ...requestConfig }) => {
       text: () => Promise.resolve(typeof response.data === "string" ? response.data : JSON.stringify(response.data))
     };
   };
-  return (0, import_browser72.getOrganization)({
+  return (0, import_browser74.getOrganization)({
     ...requestConfig,
     fetcher: fetcher || defaultFetcher
   });
@@ -12486,8 +12721,8 @@ var getOrganization = async ({ fetcher, ...requestConfig }) => {
 var getOrganization_default = getOrganization;
 
 // src/api/updateOrganization.ts
-var import_browser73 = require("@asgardeo/browser");
-var httpClient8 = import_browser73.AsgardeoSPAClient.getInstance().httpRequest.bind(import_browser73.AsgardeoSPAClient.getInstance());
+var import_browser75 = require("@asgardeo/browser");
+var httpClient8 = import_browser75.AsgardeoSPAClient.getInstance().httpRequest.bind(import_browser75.AsgardeoSPAClient.getInstance());
 var updateOrganization = async ({
   fetcher,
   ...requestConfig
@@ -12507,7 +12742,7 @@ var updateOrganization = async ({
       text: () => Promise.resolve(typeof response.data === "string" ? response.data : JSON.stringify(response.data))
     };
   };
-  return (0, import_browser73.updateOrganization)({
+  return (0, import_browser75.updateOrganization)({
     ...requestConfig,
     fetcher: fetcher || defaultFetcher
   });
@@ -12515,7 +12750,7 @@ var updateOrganization = async ({
 var updateOrganization_default = updateOrganization;
 
 // src/components/presentation/OrganizationProfile/OrganizationProfile.tsx
-var import_jsx_runtime91 = require("react/jsx-runtime");
+var import_jsx_runtime92 = require("react/jsx-runtime");
 var OrganizationProfile = ({
   organizationId,
   mode = "default",
@@ -12523,8 +12758,8 @@ var OrganizationProfile = ({
   onOpenChange,
   onUpdate,
   popupTitle,
-  loadingFallback = /* @__PURE__ */ (0, import_jsx_runtime91.jsx)("div", { children: "Loading organization..." }),
-  errorFallback = /* @__PURE__ */ (0, import_jsx_runtime91.jsx)("div", { children: "Failed to load organization data" }),
+  loadingFallback = /* @__PURE__ */ (0, import_jsx_runtime92.jsx)("div", { children: "Loading organization..." }),
+  errorFallback = /* @__PURE__ */ (0, import_jsx_runtime92.jsx)("div", { children: "Failed to load organization data" }),
   ...rest
 }) => {
   const { baseUrl } = useAsgardeo_default();
@@ -12560,7 +12795,7 @@ var OrganizationProfile = ({
   const handleOrganizationUpdate = async (payload) => {
     if (!baseUrl || !organizationId) return;
     try {
-      const operations = (0, import_browser73.createPatchOperations)(payload);
+      const operations = (0, import_browser75.createPatchOperations)(payload);
       await updateOrganization_default({
         baseUrl,
         organizationId,
@@ -12575,7 +12810,7 @@ var OrganizationProfile = ({
       throw err;
     }
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime91.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime92.jsx)(
     BaseOrganizationProfile_default,
     {
       organization,
@@ -12825,21 +13060,21 @@ var useStyles28 = (theme, colorScheme) => {
 var BaseOrganizationList_styles_default = useStyles28;
 
 // src/components/presentation/OrganizationList/BaseOrganizationList.tsx
-var import_jsx_runtime92 = require("react/jsx-runtime");
+var import_jsx_runtime93 = require("react/jsx-runtime");
 var defaultRenderOrganization = (organization, styles, t, onOrganizationSelect, showStatus) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime92.jsxs)("div", { className: (0, import_css59.cx)(styles.organizationItem), children: [
-    /* @__PURE__ */ (0, import_jsx_runtime92.jsxs)("div", { className: (0, import_css59.cx)(styles.organizationContent), children: [
-      /* @__PURE__ */ (0, import_jsx_runtime92.jsx)(Avatar_default, { variant: "square", name: organization.name, size: 48, alt: `${organization.name} logo` }),
-      /* @__PURE__ */ (0, import_jsx_runtime92.jsxs)("div", { className: (0, import_css59.cx)(styles.organizationInfo), children: [
-        /* @__PURE__ */ (0, import_jsx_runtime92.jsx)(Typography_default, { variant: "h6", className: (0, import_css59.cx)(styles.organizationName), children: organization.name }),
-        /* @__PURE__ */ (0, import_jsx_runtime92.jsxs)(Typography_default, { variant: "body2", color: "textSecondary", className: (0, import_css59.cx)(styles.organizationHandle), children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime93.jsxs)("div", { className: (0, import_css59.cx)(styles.organizationItem), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime93.jsxs)("div", { className: (0, import_css59.cx)(styles.organizationContent), children: [
+      /* @__PURE__ */ (0, import_jsx_runtime93.jsx)(Avatar_default, { variant: "square", name: organization.name, size: 48, alt: `${organization.name} logo` }),
+      /* @__PURE__ */ (0, import_jsx_runtime93.jsxs)("div", { className: (0, import_css59.cx)(styles.organizationInfo), children: [
+        /* @__PURE__ */ (0, import_jsx_runtime93.jsx)(Typography_default, { variant: "h6", className: (0, import_css59.cx)(styles.organizationName), children: organization.name }),
+        /* @__PURE__ */ (0, import_jsx_runtime93.jsxs)(Typography_default, { variant: "body2", color: "textSecondary", className: (0, import_css59.cx)(styles.organizationHandle), children: [
           "@",
           organization.orgHandle
         ] }),
-        showStatus && /* @__PURE__ */ (0, import_jsx_runtime92.jsxs)(Typography_default, { variant: "body2", color: "textSecondary", className: (0, import_css59.cx)(styles.organizationStatus), children: [
+        showStatus && /* @__PURE__ */ (0, import_jsx_runtime93.jsxs)(Typography_default, { variant: "body2", color: "textSecondary", className: (0, import_css59.cx)(styles.organizationStatus), children: [
           t("organization.switcher.status.label"),
           " ",
-          /* @__PURE__ */ (0, import_jsx_runtime92.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime93.jsx)(
             "span",
             {
               className: (0, import_css59.cx)(
@@ -12852,7 +13087,7 @@ var defaultRenderOrganization = (organization, styles, t, onOrganizationSelect,
         ] })
       ] })
     ] }),
-    organization.canSwitch && /* @__PURE__ */ (0, import_jsx_runtime92.jsx)("div", { className: (0, import_css59.cx)(styles.organizationActions), children: /* @__PURE__ */ (0, import_jsx_runtime92.jsx)(
+    organization.canSwitch && /* @__PURE__ */ (0, import_jsx_runtime93.jsx)("div", { className: (0, import_css59.cx)(styles.organizationActions), children: /* @__PURE__ */ (0, import_jsx_runtime93.jsx)(
       Button_default,
       {
         onClick: (e) => {
@@ -12866,17 +13101,17 @@ var defaultRenderOrganization = (organization, styles, t, onOrganizationSelect,
     ) })
   ] }, organization.id);
 };
-var defaultRenderLoading = (t, styles) => /* @__PURE__ */ (0, import_jsx_runtime92.jsxs)("div", { className: (0, import_css59.cx)(styles.loadingContainer), children: [
-  /* @__PURE__ */ (0, import_jsx_runtime92.jsx)(Spinner_default, { size: "medium" }),
-  /* @__PURE__ */ (0, import_jsx_runtime92.jsx)(Typography_default, { variant: "body1", color: "textSecondary", className: (0, import_css59.cx)(styles.loadingText), children: t("organization.switcher.loading.organizations") })
+var defaultRenderLoading = (t, styles) => /* @__PURE__ */ (0, import_jsx_runtime93.jsxs)("div", { className: (0, import_css59.cx)(styles.loadingContainer), children: [
+  /* @__PURE__ */ (0, import_jsx_runtime93.jsx)(Spinner_default, { size: "medium" }),
+  /* @__PURE__ */ (0, import_jsx_runtime93.jsx)(Typography_default, { variant: "body1", color: "textSecondary", className: (0, import_css59.cx)(styles.loadingText), children: t("organization.switcher.loading.organizations") })
 ] });
-var defaultRenderError = (error, t, styles) => /* @__PURE__ */ (0, import_jsx_runtime92.jsx)("div", { className: (0, import_css59.cx)(styles.errorContainer), children: /* @__PURE__ */ (0, import_jsx_runtime92.jsxs)(Typography_default, { variant: "body1", color: "error", children: [
-  /* @__PURE__ */ (0, import_jsx_runtime92.jsx)("strong", { children: t("organization.switcher.error.prefix") }),
+var defaultRenderError = (error, t, styles) => /* @__PURE__ */ (0, import_jsx_runtime93.jsx)("div", { className: (0, import_css59.cx)(styles.errorContainer), children: /* @__PURE__ */ (0, import_jsx_runtime93.jsxs)(Typography_default, { variant: "body1", color: "error", children: [
+  /* @__PURE__ */ (0, import_jsx_runtime93.jsx)("strong", { children: t("organization.switcher.error.prefix") }),
   " ",
   error
 ] }) });
-var defaultRenderLoadMore = (onLoadMore, isLoading, t, styles) => /* @__PURE__ */ (0, import_jsx_runtime92.jsx)(Button_default, { onClick: onLoadMore, disabled: isLoading, className: (0, import_css59.cx)(styles.loadMoreButton), type: "button", fullWidth: true, children: isLoading ? t("organization.switcher.loading.more") : t("organization.switcher.load.more") });
-var defaultRenderEmpty = (t, styles) => /* @__PURE__ */ (0, import_jsx_runtime92.jsx)("div", { className: (0, import_css59.cx)(styles.emptyContainer), children: /* @__PURE__ */ (0, import_jsx_runtime92.jsx)(Typography_default, { variant: "body1", color: "textSecondary", className: (0, import_css59.cx)(styles.emptyText), children: t("organization.switcher.no.organizations") }) });
+var defaultRenderLoadMore = (onLoadMore, isLoading, t, styles) => /* @__PURE__ */ (0, import_jsx_runtime93.jsx)(Button_default, { onClick: onLoadMore, disabled: isLoading, className: (0, import_css59.cx)(styles.loadMoreButton), type: "button", fullWidth: true, children: isLoading ? t("organization.switcher.loading.more") : t("organization.switcher.load.more") });
+var defaultRenderEmpty = (t, styles) => /* @__PURE__ */ (0, import_jsx_runtime93.jsx)("div", { className: (0, import_css59.cx)(styles.emptyContainer), children: /* @__PURE__ */ (0, import_jsx_runtime93.jsx)(Typography_default, { variant: "body1", color: "textSecondary", className: (0, import_css59.cx)(styles.emptyText), children: t("organization.switcher.no.organizations") }) });
 var BaseOrganizationList = ({
   className = "",
   allOrganizations,
@@ -12919,53 +13154,53 @@ var BaseOrganizationList = ({
   const renderLoadMoreWithStyles = renderLoadMore || ((onLoadMore, isLoading2) => defaultRenderLoadMore(onLoadMore, isLoading2, t, styles));
   const renderOrganizationWithStyles = renderOrganization || ((org) => defaultRenderOrganization(org, styles, t, onOrganizationSelect, showStatus));
   if (isLoading && organizationsWithSwitchAccess?.length === 0) {
-    const loadingContent = /* @__PURE__ */ (0, import_jsx_runtime92.jsx)("div", { className: (0, import_css59.cx)(styles.root, className), style, children: renderLoadingWithStyles() });
+    const loadingContent = /* @__PURE__ */ (0, import_jsx_runtime93.jsx)("div", { className: (0, import_css59.cx)(styles.root, className), style, children: renderLoadingWithStyles() });
     if (mode === "popup") {
-      return /* @__PURE__ */ (0, import_jsx_runtime92.jsx)(Dialog_default, { open, onOpenChange, children: /* @__PURE__ */ (0, import_jsx_runtime92.jsxs)(Dialog_default.Content, { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime92.jsx)(Dialog_default.Heading, { children: title }),
-        /* @__PURE__ */ (0, import_jsx_runtime92.jsx)("div", { className: (0, import_css59.cx)(styles.popupContent), children: loadingContent })
+      return /* @__PURE__ */ (0, import_jsx_runtime93.jsx)(Dialog_default, { open, onOpenChange, children: /* @__PURE__ */ (0, import_jsx_runtime93.jsxs)(Dialog_default.Content, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime93.jsx)(Dialog_default.Heading, { children: title }),
+        /* @__PURE__ */ (0, import_jsx_runtime93.jsx)("div", { className: (0, import_css59.cx)(styles.popupContent), children: loadingContent })
       ] }) });
     }
     return loadingContent;
   }
   if (error && organizationsWithSwitchAccess?.length === 0) {
-    const errorContent = /* @__PURE__ */ (0, import_jsx_runtime92.jsx)("div", { className: (0, import_css59.cx)(styles.root, className), style, children: renderErrorWithStyles(error) });
+    const errorContent = /* @__PURE__ */ (0, import_jsx_runtime93.jsx)("div", { className: (0, import_css59.cx)(styles.root, className), style, children: renderErrorWithStyles(error) });
     if (mode === "popup") {
-      return /* @__PURE__ */ (0, import_jsx_runtime92.jsx)(Dialog_default, { open, onOpenChange, children: /* @__PURE__ */ (0, import_jsx_runtime92.jsxs)(Dialog_default.Content, { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime92.jsx)(Dialog_default.Heading, { children: title }),
-        /* @__PURE__ */ (0, import_jsx_runtime92.jsx)("div", { className: (0, import_css59.cx)(styles.popupContent), children: errorContent })
+      return /* @__PURE__ */ (0, import_jsx_runtime93.jsx)(Dialog_default, { open, onOpenChange, children: /* @__PURE__ */ (0, import_jsx_runtime93.jsxs)(Dialog_default.Content, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime93.jsx)(Dialog_default.Heading, { children: title }),
+        /* @__PURE__ */ (0, import_jsx_runtime93.jsx)("div", { className: (0, import_css59.cx)(styles.popupContent), children: errorContent })
       ] }) });
     }
     return errorContent;
   }
   if (!isLoading && organizationsWithSwitchAccess?.length === 0) {
-    const emptyContent = /* @__PURE__ */ (0, import_jsx_runtime92.jsx)("div", { className: (0, import_css59.cx)(styles.root, className), style, children: renderEmptyWithStyles() });
+    const emptyContent = /* @__PURE__ */ (0, import_jsx_runtime93.jsx)("div", { className: (0, import_css59.cx)(styles.root, className), style, children: renderEmptyWithStyles() });
     if (mode === "popup") {
-      return /* @__PURE__ */ (0, import_jsx_runtime92.jsx)(Dialog_default, { open, onOpenChange, children: /* @__PURE__ */ (0, import_jsx_runtime92.jsxs)(Dialog_default.Content, { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime92.jsx)(Dialog_default.Heading, { children: title }),
-        /* @__PURE__ */ (0, import_jsx_runtime92.jsx)("div", { className: (0, import_css59.cx)(styles.popupContent), children: emptyContent })
+      return /* @__PURE__ */ (0, import_jsx_runtime93.jsx)(Dialog_default, { open, onOpenChange, children: /* @__PURE__ */ (0, import_jsx_runtime93.jsxs)(Dialog_default.Content, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime93.jsx)(Dialog_default.Heading, { children: title }),
+        /* @__PURE__ */ (0, import_jsx_runtime93.jsx)("div", { className: (0, import_css59.cx)(styles.popupContent), children: emptyContent })
       ] }) });
     }
     return emptyContent;
   }
-  const organizationListContent = /* @__PURE__ */ (0, import_jsx_runtime92.jsxs)("div", { className: (0, import_css59.cx)(styles.root, className), style, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime92.jsxs)("div", { className: (0, import_css59.cx)(styles.header), children: [
-      /* @__PURE__ */ (0, import_jsx_runtime92.jsx)("div", { className: (0, import_css59.cx)(styles.headerInfo), children: /* @__PURE__ */ (0, import_jsx_runtime92.jsx)(Typography_default, { variant: "body2", color: "textSecondary", className: (0, import_css59.cx)(styles.subtitle), children: t("organization.switcher.showing.count", {
+  const organizationListContent = /* @__PURE__ */ (0, import_jsx_runtime93.jsxs)("div", { className: (0, import_css59.cx)(styles.root, className), style, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime93.jsxs)("div", { className: (0, import_css59.cx)(styles.header), children: [
+      /* @__PURE__ */ (0, import_jsx_runtime93.jsx)("div", { className: (0, import_css59.cx)(styles.headerInfo), children: /* @__PURE__ */ (0, import_jsx_runtime93.jsx)(Typography_default, { variant: "body2", color: "textSecondary", className: (0, import_css59.cx)(styles.subtitle), children: t("organization.switcher.showing.count", {
         showing: organizationsWithSwitchAccess?.length,
         total: allOrganizations?.organizations?.length || 0
       }) }) }),
-      onRefresh && /* @__PURE__ */ (0, import_jsx_runtime92.jsx)(Button_default, { onClick: onRefresh, className: (0, import_css59.cx)(styles.refreshButton), type: "button", variant: "outline", size: "small", children: t("organization.switcher.refresh.button") })
+      onRefresh && /* @__PURE__ */ (0, import_jsx_runtime93.jsx)(Button_default, { onClick: onRefresh, className: (0, import_css59.cx)(styles.refreshButton), type: "button", variant: "outline", size: "small", children: t("organization.switcher.refresh.button") })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime92.jsx)("div", { className: (0, import_css59.cx)(styles.listContainer), children: organizationsWithSwitchAccess?.map(
+    /* @__PURE__ */ (0, import_jsx_runtime93.jsx)("div", { className: (0, import_css59.cx)(styles.listContainer), children: organizationsWithSwitchAccess?.map(
       (organization, index) => renderOrganizationWithStyles(organization, index)
     ) }),
-    error && organizationsWithSwitchAccess?.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime92.jsx)("div", { className: (0, import_css59.cx)(styles.errorMargin), children: renderErrorWithStyles(error) }),
-    hasMore && fetchMore && /* @__PURE__ */ (0, import_jsx_runtime92.jsx)("div", { className: (0, import_css59.cx)(styles.loadMoreMargin), children: renderLoadMoreWithStyles(fetchMore, isLoadingMore) })
+    error && organizationsWithSwitchAccess?.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime93.jsx)("div", { className: (0, import_css59.cx)(styles.errorMargin), children: renderErrorWithStyles(error) }),
+    hasMore && fetchMore && /* @__PURE__ */ (0, import_jsx_runtime93.jsx)("div", { className: (0, import_css59.cx)(styles.loadMoreMargin), children: renderLoadMoreWithStyles(fetchMore, isLoadingMore) })
   ] });
   if (mode === "popup") {
-    return /* @__PURE__ */ (0, import_jsx_runtime92.jsx)(Dialog_default, { open, onOpenChange, children: /* @__PURE__ */ (0, import_jsx_runtime92.jsxs)(Dialog_default.Content, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime92.jsx)(Dialog_default.Heading, { children: title }),
-      /* @__PURE__ */ (0, import_jsx_runtime92.jsx)("div", { className: (0, import_css59.cx)(styles.popupContent), children: organizationListContent })
+    return /* @__PURE__ */ (0, import_jsx_runtime93.jsx)(Dialog_default, { open, onOpenChange, children: /* @__PURE__ */ (0, import_jsx_runtime93.jsxs)(Dialog_default.Content, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime93.jsx)(Dialog_default.Heading, { children: title }),
+      /* @__PURE__ */ (0, import_jsx_runtime93.jsx)("div", { className: (0, import_css59.cx)(styles.popupContent), children: organizationListContent })
     ] }) });
   }
   return organizationListContent;
@@ -12997,10 +13232,7 @@ var useStyles29 = (theme, colorScheme) => {
 
       &__loading-overlay {
         position: absolute;
-        top: 0;
-        left: 0;
-        right: 0;
-        bottom: 0;
+        inset: 0;
         background-color: color-mix(in srgb, ${theme.vars.colors.background.surface} 80%, transparent);
         display: flex;
         align-items: center;
@@ -13025,10 +13257,7 @@ var useStyles29 = (theme, colorScheme) => {
       `,
       loadingOverlay: import_css60.css`
         position: absolute;
-        top: 0;
-        left: 0;
-        right: 0;
-        bottom: 0;
+        inset: 0;
         background-color: color-mix(in srgb, ${theme.vars.colors.background.surface} 80%, transparent);
         display: flex;
         align-items: center;
@@ -13042,7 +13271,7 @@ var useStyles29 = (theme, colorScheme) => {
 var OrganizationList_styles_default = useStyles29;
 
 // src/components/presentation/OrganizationList/OrganizationList.tsx
-var import_jsx_runtime93 = require("react/jsx-runtime");
+var import_jsx_runtime94 = require("react/jsx-runtime");
 var OrganizationList = ({
   autoFetch = true,
   filter = "",
@@ -13064,7 +13293,7 @@ var OrganizationList = ({
       setAllOrganizations(await getAllOrganizations2());
     })();
   }, []);
-  return /* @__PURE__ */ (0, import_jsx_runtime93.jsx)("div", { className: (0, import_css61.cx)(styles.root, className), style, children: /* @__PURE__ */ (0, import_jsx_runtime93.jsx)("div", { className: (0, import_css61.cx)(styles.container), children: /* @__PURE__ */ (0, import_jsx_runtime93.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime94.jsx)("div", { className: (0, import_css61.cx)(styles.root, className), style, children: /* @__PURE__ */ (0, import_jsx_runtime94.jsx)("div", { className: (0, import_css61.cx)(styles.container), children: /* @__PURE__ */ (0, import_jsx_runtime94.jsx)(
     BaseOrganizationList_default,
     {
       allOrganizations,
@@ -13079,8 +13308,8 @@ var OrganizationList = ({
 var OrganizationList_default = OrganizationList;
 
 // src/components/primitives/Icons/BuildingAlt.tsx
-var import_jsx_runtime94 = require("react/jsx-runtime");
-var BuildingAlt = ({ color = "currentColor", height = 24, width = 24 }) => /* @__PURE__ */ (0, import_jsx_runtime94.jsxs)(
+var import_jsx_runtime95 = require("react/jsx-runtime");
+var BuildingAlt = ({ color = "currentColor", height = 24, width = 24 }) => /* @__PURE__ */ (0, import_jsx_runtime95.jsxs)(
   "svg",
   {
     width,
@@ -13093,13 +13322,13 @@ var BuildingAlt = ({ color = "currentColor", height = 24, width = 24 }) => /* @_
     strokeLinecap: "round",
     strokeLinejoin: "round",
     children: [
-      /* @__PURE__ */ (0, import_jsx_runtime94.jsx)("path", { d: "M6 22V4a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2v18Z" }),
-      /* @__PURE__ */ (0, import_jsx_runtime94.jsx)("path", { d: "M6 12H4a2 2 0 0 0-2 2v6a2 2 0 0 0 2 2h2" }),
-      /* @__PURE__ */ (0, import_jsx_runtime94.jsx)("path", { d: "M18 9h2a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2h-2" }),
-      /* @__PURE__ */ (0, import_jsx_runtime94.jsx)("path", { d: "M10 6h4" }),
-      /* @__PURE__ */ (0, import_jsx_runtime94.jsx)("path", { d: "M10 10h4" }),
-      /* @__PURE__ */ (0, import_jsx_runtime94.jsx)("path", { d: "M10 14h4" }),
-      /* @__PURE__ */ (0, import_jsx_runtime94.jsx)("path", { d: "M10 18h4" })
+      /* @__PURE__ */ (0, import_jsx_runtime95.jsx)("path", { d: "M6 22V4a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2v18Z" }),
+      /* @__PURE__ */ (0, import_jsx_runtime95.jsx)("path", { d: "M6 12H4a2 2 0 0 0-2 2v6a2 2 0 0 0 2 2h2" }),
+      /* @__PURE__ */ (0, import_jsx_runtime95.jsx)("path", { d: "M18 9h2a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2h-2" }),
+      /* @__PURE__ */ (0, import_jsx_runtime95.jsx)("path", { d: "M10 6h4" }),
+      /* @__PURE__ */ (0, import_jsx_runtime95.jsx)("path", { d: "M10 10h4" }),
+      /* @__PURE__ */ (0, import_jsx_runtime95.jsx)("path", { d: "M10 14h4" }),
+      /* @__PURE__ */ (0, import_jsx_runtime95.jsx)("path", { d: "M10 18h4" })
     ]
   }
 );
@@ -13107,7 +13336,7 @@ BuildingAlt.displayName = "BuildingAlt";
 var BuildingAlt_default = BuildingAlt;
 
 // src/components/presentation/OrganizationSwitcher/OrganizationSwitcher.tsx
-var import_jsx_runtime95 = require("react/jsx-runtime");
+var import_jsx_runtime96 = require("react/jsx-runtime");
 var OrganizationSwitcher = ({
   currentOrganization: propCurrentOrganization,
   fallback = null,
@@ -13131,7 +13360,7 @@ var OrganizationSwitcher = ({
     return fallback;
   }
   if (!isSignedIn) {
-    return /* @__PURE__ */ (0, import_jsx_runtime95.jsx)(import_jsx_runtime95.Fragment, {});
+    return /* @__PURE__ */ (0, import_jsx_runtime96.jsx)(import_jsx_runtime96.Fragment, {});
   }
   const organizations = propOrganizations || contextOrganizations || [];
   const currentOrganization = propCurrentOrganization || contextCurrentOrganization;
@@ -13145,19 +13374,19 @@ var OrganizationSwitcher = ({
   const defaultMenuItems = [];
   if (currentOrganization) {
     defaultMenuItems.push({
-      icon: /* @__PURE__ */ (0, import_jsx_runtime95.jsx)(BuildingAlt_default, {}),
+      icon: /* @__PURE__ */ (0, import_jsx_runtime96.jsx)(BuildingAlt_default, {}),
       label: t("organization.switcher.manage.organizations"),
       onClick: handleManageOrganizations
     });
   }
   defaultMenuItems.push({
-    icon: /* @__PURE__ */ (0, import_jsx_runtime95.jsx)("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: /* @__PURE__ */ (0, import_jsx_runtime95.jsx)("path", { d: "M12 5v14m-7-7h14" }) }),
+    icon: /* @__PURE__ */ (0, import_jsx_runtime96.jsx)("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: /* @__PURE__ */ (0, import_jsx_runtime96.jsx)("path", { d: "M12 5v14m-7-7h14" }) }),
     label: t("organization.switcher.create.organization"),
     onClick: () => setIsCreateOrgOpen(true)
   });
   const menuItems = props.menuItems ? [...defaultMenuItems, ...props.menuItems] : defaultMenuItems;
-  return /* @__PURE__ */ (0, import_jsx_runtime95.jsxs)(import_jsx_runtime95.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime95.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime96.jsxs)(import_jsx_runtime96.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime96.jsx)(
       BaseOrganizationSwitcher_default,
       {
         organizations,
@@ -13170,7 +13399,7 @@ var OrganizationSwitcher = ({
         ...props
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime95.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime96.jsx)(
       CreateOrganization,
       {
         mode: "popup",
@@ -13184,7 +13413,7 @@ var OrganizationSwitcher = ({
         }
       }
     ),
-    currentOrganization && /* @__PURE__ */ (0, import_jsx_runtime95.jsx)(
+    currentOrganization && /* @__PURE__ */ (0, import_jsx_runtime96.jsx)(
       OrganizationProfile_default,
       {
         organizationId: currentOrganization.id,
@@ -13192,11 +13421,11 @@ var OrganizationSwitcher = ({
         open: isProfileOpen,
         onOpenChange: setIsProfileOpen,
         cardLayout: true,
-        loadingFallback: /* @__PURE__ */ (0, import_jsx_runtime95.jsx)("div", { children: t("organization.profile.loading") }),
-        errorFallback: /* @__PURE__ */ (0, import_jsx_runtime95.jsx)("div", { children: t("organization.profile.error") })
+        loadingFallback: /* @__PURE__ */ (0, import_jsx_runtime96.jsx)("div", { children: t("organization.profile.loading") }),
+        errorFallback: /* @__PURE__ */ (0, import_jsx_runtime96.jsx)("div", { children: t("organization.profile.error") })
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime95.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime96.jsx)(
       OrganizationList_default,
       {
         mode: "popup",
@@ -13216,5 +13445,5 @@ var OrganizationSwitcher = ({
 var OrganizationSwitcher_default = OrganizationSwitcher;
 
 // src/index.ts
-var import_browser74 = require("@asgardeo/browser");
+var import_browser76 = require("@asgardeo/browser");
 //# sourceMappingURL=index.js.map