@asgardeo/react 0.5.33 → 0.6.1

package/dist/index.js

@@ -63,7 +63,8 @@ import {
   navigate,
   getRedirectBasedSignUpUrl,
   Platform,
-  isEmpty
+  isEmpty,
+  executeEmbeddedSignUpFlowV2
 } from "@asgardeo/browser";
 
 // src/__temp__/api.ts
@@ -778,16 +779,22 @@ var AsgardeoReactClient = class extends 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 === Platform.AsgardeoV2) {
+      return executeEmbeddedSignUpFlowV2({
+        baseUrl,
+        payload: firstArg
+      });
+    }
     if (typeof firstArg === "object" && "flowType" in firstArg) {
-      const baseUrl = configData?.baseUrl;
       return executeEmbeddedSignUpFlow({
         baseUrl,
         payload: firstArg
       });
     }
-    navigate(getRedirectBasedSignUpUrl(configData));
+    navigate(getRedirectBasedSignUpUrl(config));
   }
   async request(requestConfig) {
     return this.asgardeo.httpRequest(requestConfig);
@@ -1283,6 +1290,7 @@ var ThemeProvider = ({
     };
   }, [inheritFromBranding, brandingTheme, themeConfig]);
   const theme = useMemo4(() => createTheme(finalThemeConfig, colorScheme === "dark"), [finalThemeConfig, colorScheme]);
+  const direction = finalThemeConfig?.direction || "ltr";
   const handleThemeChange = useCallback4((isDark) => {
     setColorScheme(isDark ? "dark" : "light");
   }, []);
@@ -1321,9 +1329,15 @@ var ThemeProvider = ({
   useEffect2(() => {
     applyThemeToDOM(theme);
   }, [theme]);
+  useEffect2(() => {
+    if (typeof document !== "undefined") {
+      document.documentElement.dir = direction;
+    }
+  }, [direction]);
   const value = {
     theme,
     colorScheme,
+    direction,
     toggleTheme,
     isBrandingLoading,
     brandingError,
@@ -1785,7 +1799,10 @@ var AsgardeoProvider = ({
         ThemeProvider_default,
         {
           inheritFromBranding: preferences?.theme?.inheritFromBranding,
-          theme: preferences?.theme?.overrides,
+          theme: {
+            ...preferences?.theme?.overrides,
+            direction: preferences?.theme?.direction
+          },
           mode: getActiveTheme(preferences?.theme?.mode),
           children: /* @__PURE__ */ jsx7(FlowProvider_default, { children: /* @__PURE__ */ jsx7(UserProvider_default, { profile: userProfile, onUpdateProfile: handleProfileUpdate, children: /* @__PURE__ */ jsx7(
             OrganizationProvider_default,
@@ -2889,6 +2906,11 @@ var Loading = ({ children, fallback = null }) => {
 Loading.displayName = "Loading";
 var Loading_default = Loading;
 
+// src/components/presentation/SignIn/BaseSignIn.tsx
+import {
+  Platform as Platform3
+} from "@asgardeo/browser";
+
 // src/components/presentation/SignIn/non-component-driven/BaseSignIn.tsx
 import {
   EmbeddedSignInFlowStepType,
@@ -3288,13 +3310,13 @@ import { useMemo as useMemo11 } from "react";
 var useStyles4 = (theme, colorScheme, helperTextAlign, helperTextMarginLeft, hasError) => {
   return useMemo11(() => {
     const formControl = css4`
-      text-align: left;
+      text-align: start;
       margin-bottom: calc(${theme.vars.spacing.unit} * 2);
     `;
     const helperText = css4`
       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 = css4`
       color: ${theme.vars.colors.error.main};
@@ -3428,8 +3450,8 @@ import { css as css6 } from "@emotion/css";
 import { useMemo as useMemo13 } from "react";
 var useStyles6 = (theme, colorScheme, disabled, hasError, hasStartIcon, hasEndIcon) => {
   return useMemo13(() => {
-    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 = css6`
       position: relative;
       display: flex;
@@ -3437,7 +3459,9 @@ var useStyles6 = (theme, colorScheme, disabled, hasError, hasStartIcon, hasEndIc
     `;
     const input = css6`
       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};
@@ -3508,11 +3532,11 @@ var useStyles6 = (theme, colorScheme, disabled, hasError, hasStartIcon, hasEndIc
     `;
     const startIcon = css6`
       ${icon};
-      left: ${theme.vars.spacing.unit};
+      inset-inline-start: ${theme.vars.spacing.unit};
     `;
     const endIcon = css6`
       ${icon};
-      right: ${theme.vars.spacing.unit};
+      inset-inline-end: ${theme.vars.spacing.unit};
     `;
     return {
       inputContainer,
@@ -4227,7 +4251,7 @@ var useStyles11 = (theme, colorScheme, hasError, required) => {
     const inputStyles = css11`
       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;
 
@@ -4347,6 +4371,7 @@ var createField = (config) => {
     required,
     value,
     onChange,
+    onBlur,
     disabled = false,
     error,
     className,
@@ -4363,7 +4388,8 @@ var createField = (config) => {
     error: validationError,
     className,
     value,
-    placeholder
+    placeholder,
+    onBlur
   };
   switch (type) {
     case FieldType.Password:
@@ -5748,8 +5774,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 = css14`
       display: flex;
@@ -6786,14 +6813,6 @@ var BaseSignInContent = ({
 };
 var BaseSignIn_default = BaseSignIn;
 
-// src/components/presentation/SignIn/SignIn.tsx
-import {
-  Platform as Platform3
-} from "@asgardeo/browser";
-
-// src/components/presentation/SignIn/component-driven/SignIn.tsx
-import { useState as useState16, useEffect as useEffect13, useRef as useRef4 } from "react";
-
 // src/components/presentation/SignIn/component-driven/BaseSignIn.tsx
 import { useState as useState15, useCallback as useCallback10 } from "react";
 import { cx as cx20 } from "@emotion/css";
@@ -7013,6 +7032,7 @@ var createSignInComponentFromFlow = (component, formValues, touchedFields, formE
         value,
         error,
         onChange: (newValue) => onInputChange(identifier, newValue),
+        onBlur: () => options.onInputBlur?.(identifier),
         className: options.inputClassName
       });
       return React.cloneElement(field, { key });
@@ -7189,6 +7209,8 @@ var BaseSignInContent2 = ({
   } = form;
   const handleInputChange = (name, value) => {
     setFormValue(name, value);
+  };
+  const handleInputBlur = (name) => {
     setFormTouched(name, true);
   };
   const handleSubmit = async (component, data) => {
@@ -7268,6 +7290,7 @@ var BaseSignInContent2 = ({
         buttonClassName: buttonClasses,
         error,
         inputClassName: inputClasses,
+        onInputBlur: handleInputBlur,
         onSubmit: handleSubmit,
         size,
         variant
@@ -7284,6 +7307,7 @@ var BaseSignInContent2 = ({
       error,
       inputClasses,
       buttonClasses,
+      handleInputBlur,
       handleSubmit
     ]
   );
@@ -7336,7 +7360,24 @@ var BaseSignInContent2 = ({
 };
 var BaseSignIn_default2 = BaseSignIn2;
 
+// src/components/presentation/SignIn/BaseSignIn.tsx
+import { jsx as jsx57 } from "react/jsx-runtime";
+var BaseSignIn3 = (props) => {
+  const { platform } = useAsgardeo_default();
+  if (platform === Platform3.AsgardeoV2) {
+    return /* @__PURE__ */ jsx57(BaseSignIn_default2, { ...props });
+  }
+  return /* @__PURE__ */ jsx57(BaseSignIn_default, { ...props });
+};
+var BaseSignIn_default3 = BaseSignIn3;
+
+// src/components/presentation/SignIn/SignIn.tsx
+import {
+  Platform as Platform4
+} from "@asgardeo/browser";
+
 // src/components/presentation/SignIn/component-driven/SignIn.tsx
+import { useState as useState16, useEffect as useEffect13, useRef as useRef4 } from "react";
 import {
   AsgardeoRuntimeError as AsgardeoRuntimeError8,
   EmbeddedFlowType,
@@ -7349,7 +7390,14 @@ 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";
@@ -7376,7 +7424,7 @@ 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 {
@@ -7384,7 +7432,7 @@ var convertSimpleInputToComponent = (input, t) => {
     type: EmbeddedFlowComponentType2.Input,
     variant,
     config: {
-      type: input.type === "string" ? "text" : input.type,
+      type: input.type,
       label,
       placeholder,
       required: input.required,
@@ -7454,7 +7502,7 @@ var normalizeFlowResponse = (response, t) => {
 };
 
 // src/components/presentation/SignIn/component-driven/SignIn.tsx
-import { Fragment as Fragment12, jsx as jsx57 } from "react/jsx-runtime";
+import { Fragment as Fragment12, jsx as jsx58 } from "react/jsx-runtime";
 var SignIn = ({ className, size = "medium", onSuccess, onError, variant, children }) => {
   const { applicationId, afterSignInUrl, signIn, isInitialized, isLoading } = useAsgardeo_default();
   const { t } = useTranslation_default();
@@ -7568,9 +7616,9 @@ var SignIn = ({ className, size = "medium", onSuccess, onError, variant, childre
       components,
       error: flowError
     };
-    return /* @__PURE__ */ jsx57(Fragment12, { children: children(renderProps) });
+    return /* @__PURE__ */ jsx58(Fragment12, { children: children(renderProps) });
   }
-  return /* @__PURE__ */ jsx57(
+  return /* @__PURE__ */ jsx58(
     BaseSignIn_default2,
     {
       components,
@@ -7586,7 +7634,7 @@ var SignIn = ({ className, size = "medium", onSuccess, onError, variant, childre
 var SignIn_default = SignIn;
 
 // src/components/presentation/SignIn/SignIn.tsx
-import { jsx as jsx58 } from "react/jsx-runtime";
+import { jsx as jsx59 } from "react/jsx-runtime";
 var SignIn2 = ({ className, size = "medium", children, ...rest }) => {
   const { signIn, afterSignInUrl, isInitialized, isLoading, platform } = useAsgardeo_default();
   const handleInitialize = async () => {
@@ -7606,8 +7654,8 @@ var SignIn2 = ({ className, size = "medium", children, ...rest }) => {
       window.location.href = url.toString();
     }
   };
-  if (platform === Platform3.AsgardeoV2) {
-    return /* @__PURE__ */ jsx58(
+  if (platform === Platform4.AsgardeoV2) {
+    return /* @__PURE__ */ jsx59(
       SignIn_default,
       {
         className,
@@ -7619,7 +7667,7 @@ var SignIn2 = ({ className, size = "medium", children, ...rest }) => {
       }
     );
   }
-  return /* @__PURE__ */ jsx58(
+  return /* @__PURE__ */ jsx59(
     BaseSignIn_default,
     {
       isLoading: isLoading || !isInitialized,
@@ -7638,10 +7686,9 @@ var SignIn_default2 = SignIn2;
 // src/components/presentation/SignUp/BaseSignUp.tsx
 import {
   EmbeddedFlowStatus,
-  EmbeddedFlowComponentType as EmbeddedFlowComponentType4,
+  EmbeddedFlowComponentType as EmbeddedFlowComponentType5,
   EmbeddedFlowResponseType,
-  withVendorCSSClassPrefix as withVendorCSSClassPrefix21,
-  AsgardeoAPIError as AsgardeoAPIError3
+  withVendorCSSClassPrefix as withVendorCSSClassPrefix21
 } from "@asgardeo/browser";
 import { cx as cx21 } from "@emotion/css";
 import { useEffect as useEffect14, useState as useState17, useCallback as useCallback11, useRef as useRef5 } from "react";
@@ -7706,13 +7753,13 @@ var DateInput = ({
 var DateInput_default = DateInput;
 
 // src/components/adapters/DividerComponent.tsx
-import { jsx as jsx59 } from "react/jsx-runtime";
+import { jsx as jsx60 } from "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__ */ jsx59(
+  return /* @__PURE__ */ jsx60(
     Divider_default,
     {
       orientation: variant === "vertical" ? "vertical" : "horizontal",
@@ -7753,7 +7800,7 @@ var EmailInput = ({
 var EmailInput_default = EmailInput;
 
 // src/components/adapters/FormContainer.tsx
-import { jsx as jsx60 } from "react/jsx-runtime";
+import { jsx as jsx61 } from "react/jsx-runtime";
 var FormContainer = (props) => {
   const { component } = props;
   if (component.components && component.components.length > 0) {
@@ -7766,19 +7813,19 @@ var FormContainer = (props) => {
         props.onSubmit(submitButton, props.formValues);
       }
     };
-    return /* @__PURE__ */ jsx60("form", { onSubmit: handleFormSubmit, style: { display: "flex", flexDirection: "column" }, children: component.components.map(
+    return /* @__PURE__ */ jsx61("form", { onSubmit: handleFormSubmit, style: { display: "flex", flexDirection: "column" }, children: component.components.map(
       (childComponent, index) => createSignUpComponent({
         ...props,
         component: childComponent
       })
     ) }, component.id);
   }
-  return /* @__PURE__ */ jsx60("div", {}, component.id);
+  return /* @__PURE__ */ jsx61("div", {}, component.id);
 };
 var FormContainer_default = FormContainer;
 
 // src/components/adapters/ImageComponent.tsx
-import { jsx as jsx61 } from "react/jsx-runtime";
+import { jsx as jsx62 } from "react/jsx-runtime";
 var ImageComponent = ({ component }) => {
   const { theme } = useTheme_default();
   const config = component.config || {};
@@ -7795,7 +7842,7 @@ var ImageComponent = ({ component }) => {
   if (!src) {
     return null;
   }
-  return /* @__PURE__ */ jsx61("div", { style: { textAlign: "center" }, children: /* @__PURE__ */ jsx61(
+  return /* @__PURE__ */ jsx62("div", { style: { textAlign: "center" }, children: /* @__PURE__ */ jsx62(
     "img",
     {
       src,
@@ -7898,7 +7945,7 @@ var PasswordInput = ({
 var PasswordInput_default = PasswordInput;
 
 // src/components/adapters/SubmitButton.tsx
-import { jsx as jsx62 } from "react/jsx-runtime";
+import { jsx as jsx63 } from "react/jsx-runtime";
 var ButtonComponent = ({
   component,
   isLoading,
@@ -7931,7 +7978,7 @@ var ButtonComponent = ({
       onSubmit(component);
     }
   };
-  return /* @__PURE__ */ jsx62(
+  return /* @__PURE__ */ jsx63(
     Button_default,
     {
       type: buttonType === "submit" ? "submit" : "button",
@@ -7942,7 +7989,7 @@ var ButtonComponent = ({
       onClick: buttonType !== "submit" ? handleClick : void 0,
       className: buttonClassName,
       style: { width: "100%" },
-      children: isLoading ? /* @__PURE__ */ jsx62(Spinner_default, { size: "small" }) : buttonText
+      children: isLoading ? /* @__PURE__ */ jsx63(Spinner_default, { size: "small" }) : buttonText
     },
     component.id
   );
@@ -7950,7 +7997,7 @@ var ButtonComponent = ({
 var SubmitButton_default = ButtonComponent;
 
 // src/components/adapters/TelephoneInput.tsx
-import { jsx as jsx63 } from "react/jsx-runtime";
+import { jsx as jsx64 } from "react/jsx-runtime";
 var TelephoneInput = ({
   component,
   formValues,
@@ -7963,7 +8010,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__ */ jsx63(
+  return /* @__PURE__ */ jsx64(
     TextField_default,
     {
       name: fieldName,
@@ -8011,7 +8058,7 @@ var TextInput = ({
 var TextInput_default = TextInput;
 
 // src/components/adapters/Typography.tsx
-import { jsx as jsx64 } from "react/jsx-runtime";
+import { jsx as jsx65 } from "react/jsx-runtime";
 var TypographyComponent = ({ component }) => {
   const { theme } = useTheme_default();
   const config = component.config || {};
@@ -8052,7 +8099,7 @@ var TypographyComponent = ({ component }) => {
     default:
       typographyVariant = "body1";
   }
-  return /* @__PURE__ */ jsx64(
+  return /* @__PURE__ */ jsx65(
     Typography_default,
     {
       variant: typographyVariant,
@@ -8065,66 +8112,66 @@ var TypographyComponent = ({ component }) => {
 var Typography_default2 = TypographyComponent;
 
 // src/components/presentation/SignUp/SignUpOptionFactory.tsx
-import { jsx as jsx65 } from "react/jsx-runtime";
+import { jsx as jsx66 } from "react/jsx-runtime";
 var createSignUpComponent = ({ component, onSubmit, ...rest }) => {
   switch (component.type) {
     case EmbeddedFlowComponentType3.Typography:
-      return /* @__PURE__ */ jsx65(Typography_default2, { component, onSubmit, ...rest });
+      return /* @__PURE__ */ jsx66(Typography_default2, { component, onSubmit, ...rest });
     case EmbeddedFlowComponentType3.Input:
       const inputVariant = component.variant?.toUpperCase();
       const inputType = component.config["type"]?.toLowerCase();
       if (inputVariant === "EMAIL" || inputType === "email") {
-        return /* @__PURE__ */ jsx65(EmailInput_default, { component, onSubmit, ...rest });
+        return /* @__PURE__ */ jsx66(EmailInput_default, { component, onSubmit, ...rest });
       }
       if (inputVariant === "PASSWORD" || inputType === "password") {
-        return /* @__PURE__ */ jsx65(PasswordInput_default, { component, onSubmit, ...rest });
+        return /* @__PURE__ */ jsx66(PasswordInput_default, { component, onSubmit, ...rest });
       }
       if (inputVariant === "TELEPHONE" || inputType === "tel") {
-        return /* @__PURE__ */ jsx65(TelephoneInput_default, { component, onSubmit, ...rest });
+        return /* @__PURE__ */ jsx66(TelephoneInput_default, { component, onSubmit, ...rest });
       }
       if (inputVariant === "NUMBER" || inputType === "number") {
-        return /* @__PURE__ */ jsx65(NumberInput_default, { component, onSubmit, ...rest });
+        return /* @__PURE__ */ jsx66(NumberInput_default, { component, onSubmit, ...rest });
       }
       if (inputVariant === "DATE" || inputType === "date") {
-        return /* @__PURE__ */ jsx65(DateInput_default, { component, onSubmit, ...rest });
+        return /* @__PURE__ */ jsx66(DateInput_default, { component, onSubmit, ...rest });
       }
       if (inputVariant === "CHECKBOX" || inputType === "checkbox") {
-        return /* @__PURE__ */ jsx65(CheckboxInput_default, { component, onSubmit, ...rest });
+        return /* @__PURE__ */ jsx66(CheckboxInput_default, { component, onSubmit, ...rest });
       }
-      return /* @__PURE__ */ jsx65(TextInput_default, { component, onSubmit, ...rest });
+      return /* @__PURE__ */ jsx66(TextInput_default, { component, onSubmit, ...rest });
     case EmbeddedFlowComponentType3.Button: {
       const buttonVariant = component.variant?.toUpperCase();
       const buttonText = component.config["text"] || component.config["label"] || "";
       if (buttonVariant === "SOCIAL") {
         if (buttonText.toLowerCase().includes("google")) {
-          return /* @__PURE__ */ jsx65(GoogleButton_default, { onClick: () => onSubmit(component, {}), ...rest, children: buttonText });
+          return /* @__PURE__ */ jsx66(GoogleButton_default, { onClick: () => onSubmit(component, {}), ...rest, children: buttonText });
         }
         if (buttonText.toLowerCase().includes("github")) {
-          return /* @__PURE__ */ jsx65(GitHubButton_default, { onClick: () => onSubmit(component, {}), ...rest, children: buttonText });
+          return /* @__PURE__ */ jsx66(GitHubButton_default, { onClick: () => onSubmit(component, {}), ...rest, children: buttonText });
         }
         if (buttonText.toLowerCase().includes("microsoft")) {
-          return /* @__PURE__ */ jsx65(MicrosoftButton_default, { onClick: () => onSubmit(component, {}), ...rest, children: buttonText });
+          return /* @__PURE__ */ jsx66(MicrosoftButton_default, { onClick: () => onSubmit(component, {}), ...rest, children: buttonText });
         }
         if (buttonText.toLowerCase().includes("facebook")) {
-          return /* @__PURE__ */ jsx65(FacebookButton_default, { onClick: () => onSubmit(component, {}), ...rest, children: buttonText });
+          return /* @__PURE__ */ jsx66(FacebookButton_default, { onClick: () => onSubmit(component, {}), ...rest, children: buttonText });
         }
         if (buttonText.toLowerCase().includes("linkedin")) {
-          return /* @__PURE__ */ jsx65(LinkedInButton_default, { onClick: () => onSubmit(component, {}), ...rest, children: buttonText });
+          return /* @__PURE__ */ jsx66(LinkedInButton_default, { onClick: () => onSubmit(component, {}), ...rest, children: buttonText });
         }
         if (buttonText.toLowerCase().includes("ethereum")) {
-          return /* @__PURE__ */ jsx65(SignInWithEthereumButton_default, { onClick: () => onSubmit(component, {}), ...rest, children: buttonText });
+          return /* @__PURE__ */ jsx66(SignInWithEthereumButton_default, { onClick: () => onSubmit(component, {}), ...rest, children: buttonText });
         }
       }
-      return /* @__PURE__ */ jsx65(SubmitButton_default, { component, onSubmit, ...rest });
+      return /* @__PURE__ */ jsx66(SubmitButton_default, { component, onSubmit, ...rest });
     }
     case EmbeddedFlowComponentType3.Form:
-      return /* @__PURE__ */ jsx65(FormContainer_default, { component, onSubmit, ...rest });
+      return /* @__PURE__ */ jsx66(FormContainer_default, { component, onSubmit, ...rest });
     case EmbeddedFlowComponentType3.Divider:
-      return /* @__PURE__ */ jsx65(DividerComponent_default, { component, onSubmit, ...rest });
+      return /* @__PURE__ */ jsx66(DividerComponent_default, { component, onSubmit, ...rest });
     case EmbeddedFlowComponentType3.Image:
-      return /* @__PURE__ */ jsx65(ImageComponent_default, { component, onSubmit, ...rest });
+      return /* @__PURE__ */ jsx66(ImageComponent_default, { component, onSubmit, ...rest });
     default:
-      return /* @__PURE__ */ jsx65("div", {});
+      return /* @__PURE__ */ jsx66("div", {});
   }
 };
 var createSignUpOptionFromComponent = (component, formValues, touchedFields, formErrors, isLoading, isFormValid, onInputChange, options) => createSignUpComponent({
@@ -8154,6 +8201,151 @@ var renderSignUpComponents = (components, formValues, touchedFields, formErrors,
   )
 ).filter(Boolean);
 
+// src/components/presentation/SignUp/transformer.ts
+import {
+  EmbeddedFlowComponentType as EmbeddedFlowComponentType4
+} from "@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: EmbeddedFlowComponentType4.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: EmbeddedFlowComponentType4.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: EmbeddedFlowComponentType4.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: EmbeddedFlowComponentType4.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
 import { css as css18 } from "@emotion/css";
 import { useMemo as useMemo25 } from "react";
@@ -8296,13 +8488,13 @@ var useStyles18 = (theme, colorScheme) => {
 var BaseSignUp_styles_default = useStyles18;
 
 // src/components/presentation/SignUp/BaseSignUp.tsx
-import { jsx as jsx66, jsxs as jsxs28 } from "react/jsx-runtime";
+import { jsx as jsx67, jsxs as jsxs28 } from "react/jsx-runtime";
 var BaseSignUp = (props) => {
   const { theme, colorScheme } = useTheme_default();
   const styles = BaseSignUp_styles_default(theme, colorScheme);
   return /* @__PURE__ */ jsxs28("div", { children: [
-    /* @__PURE__ */ jsx66("div", { className: styles.logoContainer, children: /* @__PURE__ */ jsx66(Logo_default, { size: "large" }) }),
-    /* @__PURE__ */ jsx66(FlowProvider_default, { children: /* @__PURE__ */ jsx66(BaseSignUpContent, { ...props }) })
+    /* @__PURE__ */ jsx67("div", { className: styles.logoContainer, children: /* @__PURE__ */ jsx67(Logo_default, { size: "large" }) }),
+    /* @__PURE__ */ jsx67(FlowProvider_default, { children: /* @__PURE__ */ jsx67(BaseSignUpContent, { ...props }) })
   ] });
 };
 var BaseSignUpContent = ({
@@ -8319,24 +8511,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 = useCallback11(
+    (error) => {
+      const errorMessage = extractErrorMessage(error, t);
+      clearMessages();
+      addMessage({
+        type: "error",
+        message: errorMessage
+      });
+    },
+    [t, addMessage, clearMessages]
+  );
   const [isLoading, setIsLoading] = useState17(false);
   const [isFlowInitialized, setIsFlowInitialized] = useState17(false);
   const [currentFlow, setCurrentFlow] = useState17(null);
-  const [error, setError] = useState17(null);
   const [formData, setFormData] = useState17({});
   const initializationAttemptedRef = useRef5(false);
+  const normalizeFlowResponse2 = useCallback11(
+    (response) => {
+      if (response?.data?.components && Array.isArray(response.data.components)) {
+        return response;
+      }
+      if (response?.data && (response.data.inputs || response.data.actions)) {
+        const transformedComponents = transformSimpleToComponentDriven2(response, t);
+        return {
+          ...response,
+          data: {
+            ...response.data,
+            components: transformedComponents
+          }
+        };
+      }
+      return response;
+    },
+    [t]
+  );
   const extractFormFields = useCallback11(
     (components) => {
       const fields = [];
       const processComponents = (comps) => {
         comps.forEach((component) => {
-          if (component.type === EmbeddedFlowComponentType4.Input) {
+          if (component.type === EmbeddedFlowComponentType5.Input) {
             const config = component.config || {};
             fields.push({
               name: config.name || component.id,
@@ -8410,7 +8632,7 @@ var BaseSignUpContent = ({
       return;
     }
     setIsLoading(true);
-    setError(null);
+    clearMessages();
     try {
       const filteredInputs = {};
       if (data) {
@@ -8426,7 +8648,8 @@ 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 === EmbeddedFlowStatus.Complete) {
         onComplete?.(response);
@@ -8440,8 +8663,7 @@ var BaseSignUpContent = ({
         setupFormFields(response);
       }
     } catch (err) {
-      const errorMessage = err instanceof AsgardeoAPIError3 ? err.message : t("errors.sign.up.flow.failure");
-      setError(errorMessage);
+      handleError(err);
       onError?.(err);
     } finally {
       setIsLoading(false);
@@ -8486,8 +8708,7 @@ var BaseSignUpContent = ({
             popup.close();
             cleanup();
           } catch (err) {
-            const errorMessage = err instanceof AsgardeoAPIError3 ? err.message : t("errors.sign.up.flow.failure");
-            setError(errorMessage);
+            handleError(err);
             onError?.(err);
             popup.close();
             cleanup();
@@ -8518,9 +8739,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;
@@ -8546,8 +8767,7 @@ var BaseSignUpContent = ({
                   }
                   popup.close();
                 } catch (err) {
-                  const errorMessage = err instanceof AsgardeoAPIError3 ? err.message : t("errors.sign.up.flow.failure");
-                  setError(errorMessage);
+                  handleError(err);
                   onError?.(err);
                   popup.close();
                 }
@@ -8600,7 +8820,6 @@ var BaseSignUpContent = ({
       handleInputChange,
       {
         buttonClassName: buttonClasses,
-        error,
         inputClassName: inputClasses,
         onSubmit: handleSubmit,
         size,
@@ -8615,7 +8834,6 @@ var BaseSignUpContent = ({
       isLoading,
       size,
       variant,
-      error,
       inputClasses,
       buttonClasses,
       handleSubmit
@@ -8626,9 +8844,10 @@ 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);
@@ -8640,8 +8859,7 @@ var BaseSignUpContent = ({
             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);
@@ -8656,35 +8874,51 @@ 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__ */ jsx67("div", { className: containerClasses, children: children(renderProps) });
+  }
   if (!isFlowInitialized && isLoading) {
-    return /* @__PURE__ */ jsx66(Card_default, { className: cx21(containerClasses, styles.card), variant, children: /* @__PURE__ */ jsx66(Card_default.Content, { children: /* @__PURE__ */ jsx66("div", { className: styles.loadingContainer, children: /* @__PURE__ */ jsx66(Spinner_default, { size: "medium" }) }) }) });
+    return /* @__PURE__ */ jsx67(Card_default, { className: cx21(containerClasses, styles.card), variant, children: /* @__PURE__ */ jsx67(Card_default.Content, { children: /* @__PURE__ */ jsx67("div", { className: styles.loadingContainer, children: /* @__PURE__ */ jsx67(Spinner_default, { size: "medium" }) }) }) });
   }
   if (!currentFlow) {
-    return /* @__PURE__ */ jsx66(Card_default, { className: cx21(containerClasses, styles.card), variant, children: /* @__PURE__ */ jsx66(Card_default.Content, { children: /* @__PURE__ */ jsxs28(Alert_default, { variant: "error", className: errorClasses, children: [
-      /* @__PURE__ */ jsx66(Alert_default.Title, { children: t("errors.title") || "Error" }),
-      /* @__PURE__ */ jsx66(Alert_default.Description, { children: error || t("errors.sign.up.flow.initialization.failure") })
+    return /* @__PURE__ */ jsx67(Card_default, { className: cx21(containerClasses, styles.card), variant, children: /* @__PURE__ */ jsx67(Card_default.Content, { children: /* @__PURE__ */ jsxs28(Alert_default, { variant: "error", className: errorClasses, children: [
+      /* @__PURE__ */ jsx67(Alert_default.Title, { children: t("errors.title") }),
+      /* @__PURE__ */ jsx67(Alert_default.Description, { children: t("errors.sign.up.flow.initialization.failure") })
     ] }) }) });
   }
   return /* @__PURE__ */ jsxs28(Card_default, { className: cx21(containerClasses, styles.card), variant, children: [
-    flowMessages && flowMessages.length > 0 && /* @__PURE__ */ jsx66(Card_default.Header, { className: styles.header, children: /* @__PURE__ */ jsx66("div", { className: styles.messagesContainer, children: flowMessages.map((message, index) => /* @__PURE__ */ jsx66(
-      Alert_default,
-      {
-        variant: message.type?.toLowerCase() === "error" ? "error" : "info",
-        className: cx21(styles.messageItem, messageClasses),
-        children: /* @__PURE__ */ jsx66(Alert_default.Description, { children: message.message })
-      },
-      message.id || index
-    )) }) }),
-    /* @__PURE__ */ jsxs28(Card_default.Content, { children: [
-      error && /* @__PURE__ */ jsxs28(Alert_default, { variant: "error", className: cx21(styles.errorContainer, errorClasses), children: [
-        /* @__PURE__ */ jsx66(Alert_default.Title, { children: t("errors.title") || "Error" }),
-        /* @__PURE__ */ jsx66(Alert_default.Description, { children: error })
-      ] }),
-      /* @__PURE__ */ jsx66("div", { className: styles.contentContainer, children: currentFlow.data?.components && renderComponents(currentFlow.data.components) })
-    ] })
+    /* @__PURE__ */ jsxs28(Card_default.Header, { className: styles.header, children: [
+      /* @__PURE__ */ jsx67(Card_default.Title, { level: 2, className: styles.title, children: flowTitle || t("signup.title") }),
+      /* @__PURE__ */ jsx67(Typography_default, { variant: "body1", className: styles.subtitle, children: flowSubtitle || t("signup.subtitle") }),
+      flowMessages && flowMessages.length > 0 && /* @__PURE__ */ jsx67("div", { className: styles.flowMessagesContainer, children: flowMessages.map((message, index) => /* @__PURE__ */ jsx67(
+        Alert_default,
+        {
+          variant: message.type?.toLowerCase() === "error" ? "error" : "info",
+          className: cx21(styles.flowMessageItem, messageClasses),
+          children: /* @__PURE__ */ jsx67(Alert_default.Description, { children: message.message })
+        },
+        message.id || index
+      )) })
+    ] }),
+    /* @__PURE__ */ jsx67(Card_default.Content, { children: /* @__PURE__ */ jsx67("div", { className: styles.contentContainer, children: currentFlow.data?.components && currentFlow.data.components.length > 0 ? renderComponents(currentFlow.data.components) : /* @__PURE__ */ jsx67(Alert_default, { variant: "warning", children: /* @__PURE__ */ jsx67(Typography_default, { variant: "body1", children: t("errors.sign.up.components.not.available") }) }) }) })
   ] });
 };
 var BaseSignUp_default = BaseSignUp;
@@ -8692,9 +8926,10 @@ var BaseSignUp_default = BaseSignUp;
 // src/components/presentation/SignUp/SignUp.tsx
 import {
   EmbeddedFlowResponseType as EmbeddedFlowResponseType2,
-  EmbeddedFlowType as EmbeddedFlowType2
+  EmbeddedFlowType as EmbeddedFlowType2,
+  Platform as Platform5
 } from "@asgardeo/browser";
-import { jsx as jsx67 } from "react/jsx-runtime";
+import { jsx as jsx68 } from "react/jsx-runtime";
 var SignUp = ({
   className,
   size = "medium",
@@ -8702,14 +8937,17 @@ var SignUp = ({
   onError,
   onComplete,
   shouldRedirectAfterSignUp = true,
+  children,
   ...rest
 }) => {
-  const { signUp, isInitialized } = useAsgardeo_default();
-  const handleInitialize = async (payload) => await signUp(
-    payload || {
-      flowType: EmbeddedFlowType2.Registration
-    }
-  );
+  const { signUp, isInitialized, applicationId, platform } = useAsgardeo_default();
+  const handleInitialize = async (payload) => {
+    const initialPayload = payload || {
+      flowType: EmbeddedFlowType2.Registration,
+      ...platform === Platform5.AsgardeoV2 && applicationId && { applicationId }
+    };
+    return await signUp(initialPayload);
+  };
   const handleOnSubmit = async (payload) => await signUp(payload);
   const handleComplete = (response) => {
     onComplete?.(response);
@@ -8721,7 +8959,7 @@ var SignUp = ({
       window.location.href = response.data.redirectURL;
     }
   };
-  return /* @__PURE__ */ jsx67(
+  return /* @__PURE__ */ jsx68(
     BaseSignUp_default,
     {
       afterSignUpUrl,
@@ -8732,6 +8970,7 @@ var SignUp = ({
       className,
       size,
       isInitialized,
+      children,
       ...rest
     }
   );
@@ -8739,41 +8978,41 @@ var SignUp = ({
 var SignUp_default = SignUp;
 
 // src/components/presentation/User/BaseUser.tsx
-import { Fragment as Fragment13, jsx as jsx68 } from "react/jsx-runtime";
+import { Fragment as Fragment13, jsx as jsx69 } from "react/jsx-runtime";
 var BaseUser = ({ user, children, fallback = null }) => {
   if (!user) {
-    return /* @__PURE__ */ jsx68(Fragment13, { children: fallback });
+    return /* @__PURE__ */ jsx69(Fragment13, { children: fallback });
   }
-  return /* @__PURE__ */ jsx68(Fragment13, { children: children(user) });
+  return /* @__PURE__ */ jsx69(Fragment13, { children: children(user) });
 };
 BaseUser.displayName = "BaseUser";
 var BaseUser_default = BaseUser;
 
 // src/components/presentation/User/User.tsx
-import { jsx as jsx69 } from "react/jsx-runtime";
+import { jsx as jsx70 } from "react/jsx-runtime";
 var User5 = ({ children, fallback = null }) => {
   const { user } = useAsgardeo_default();
-  return /* @__PURE__ */ jsx69(BaseUser_default, { user, fallback, children });
+  return /* @__PURE__ */ jsx70(BaseUser_default, { user, fallback, children });
 };
 User5.displayName = "User";
 var User_default = User5;
 
 // src/components/presentation/Organization/BaseOrganization.tsx
-import { Fragment as Fragment14, jsx as jsx70 } from "react/jsx-runtime";
+import { Fragment as Fragment14, jsx as jsx71 } from "react/jsx-runtime";
 var BaseOrganization = ({ children, fallback = null, organization }) => {
   if (!organization) {
-    return /* @__PURE__ */ jsx70(Fragment14, { children: fallback });
+    return /* @__PURE__ */ jsx71(Fragment14, { children: fallback });
   }
-  return /* @__PURE__ */ jsx70(Fragment14, { children: children(organization) });
+  return /* @__PURE__ */ jsx71(Fragment14, { children: children(organization) });
 };
 BaseOrganization.displayName = "BaseOrganization";
 var BaseOrganization_default = BaseOrganization;
 
 // src/components/presentation/Organization/Organization.tsx
-import { jsx as jsx71 } from "react/jsx-runtime";
+import { jsx as jsx72 } from "react/jsx-runtime";
 var Organization5 = ({ children, fallback = null }) => {
   const { currentOrganization } = useOrganization_default();
-  return /* @__PURE__ */ jsx71(BaseOrganization_default, { organization: currentOrganization, fallback, children });
+  return /* @__PURE__ */ jsx72(BaseOrganization_default, { organization: currentOrganization, fallback, children });
 };
 Organization5.displayName = "Organization";
 var Organization_default = Organization5;
@@ -8879,7 +9118,7 @@ var useStyles19 = (theme, colorScheme, size, variant, backgroundColor) => {
 var Avatar_styles_default = useStyles19;
 
 // src/components/primitives/Avatar/Avatar.tsx
-import { jsx as jsx72 } from "react/jsx-runtime";
+import { jsx as jsx73 } from "react/jsx-runtime";
 var Avatar = ({
   alt = "User avatar",
   background = "random",
@@ -8926,25 +9165,25 @@ var Avatar = ({
   const getInitials = (fullName) => fullName.split(" ").map((part) => part[0]).slice(0, 2).join("").toUpperCase();
   const renderContent = () => {
     if (imageUrl) {
-      return /* @__PURE__ */ jsx72("img", { src: imageUrl, alt, className: cx22(withVendorCSSClassPrefix22(bem16("avatar", "image")), styles.image) });
+      return /* @__PURE__ */ jsx73("img", { src: imageUrl, alt, className: cx22(withVendorCSSClassPrefix22(bem16("avatar", "image")), styles.image) });
     }
     if (name) {
       return getInitials(name);
     }
     if (isLoading) {
-      return /* @__PURE__ */ jsx72("div", { className: cx22(withVendorCSSClassPrefix22(bem16("avatar", "skeleton")), styles.skeleton) });
+      return /* @__PURE__ */ jsx73("div", { className: cx22(withVendorCSSClassPrefix22(bem16("avatar", "skeleton")), styles.skeleton) });
     }
-    return /* @__PURE__ */ jsx72(
+    return /* @__PURE__ */ jsx73(
       "svg",
       {
         xmlns: "http://www.w3.org/2000/svg",
         viewBox: "0 0 640 640",
         className: cx22(withVendorCSSClassPrefix22(bem16("avatar", "icon")), styles.icon),
-        children: /* @__PURE__ */ jsx72("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" })
+        children: /* @__PURE__ */ jsx73("path", { d: "M240 192C240 147.8 275.8 112 320 112C364.2 112 400 147.8 400 192C400 236.2 364.2 272 320 272C275.8 272 240 236.2 240 192zM448 192C448 121.3 390.7 64 320 64C249.3 64 192 121.3 192 192C192 262.7 249.3 320 320 320C390.7 320 448 262.7 448 192zM144 544C144 473.3 201.3 416 272 416L368 416C438.7 416 496 473.3 496 544L496 552C496 565.3 506.7 576 520 576C533.3 576 544 565.3 544 552L544 544C544 446.8 465.2 368 368 368L272 368C174.8 368 96 446.8 96 544L96 552C96 565.3 106.7 576 120 576C133.3 576 144 565.3 144 552L144 544z" })
       }
     );
   };
-  return /* @__PURE__ */ jsx72(
+  return /* @__PURE__ */ jsx73(
     "div",
     {
       className: cx22(
@@ -8979,7 +9218,7 @@ import { cx as cx23 } from "@emotion/css";
 import React2 from "react";
 
 // src/components/primitives/Icons/LogOut.tsx
-import { jsx as jsx73, jsxs as jsxs29 } from "react/jsx-runtime";
+import { jsx as jsx74, jsxs as jsxs29 } from "react/jsx-runtime";
 var LogOut = (props) => /* @__PURE__ */ jsxs29(
   "svg",
   {
@@ -8994,16 +9233,16 @@ var LogOut = (props) => /* @__PURE__ */ jsxs29(
     strokeLinejoin: "round",
     ...props,
     children: [
-      /* @__PURE__ */ jsx73("path", { d: "m16 17 5-5-5-5" }),
-      /* @__PURE__ */ jsx73("path", { d: "M21 12H9" }),
-      /* @__PURE__ */ jsx73("path", { d: "M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4" })
+      /* @__PURE__ */ jsx74("path", { d: "m16 17 5-5-5-5" }),
+      /* @__PURE__ */ jsx74("path", { d: "M21 12H9" }),
+      /* @__PURE__ */ jsx74("path", { d: "M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4" })
     ]
   }
 );
 var LogOut_default = LogOut;
 
 // src/components/primitives/Icons/Plus.tsx
-import { jsx as jsx74, jsxs as jsxs30 } from "react/jsx-runtime";
+import { jsx as jsx75, jsxs as jsxs30 } from "react/jsx-runtime";
 var Plus = (props) => /* @__PURE__ */ jsxs30(
   "svg",
   {
@@ -9018,15 +9257,15 @@ var Plus = (props) => /* @__PURE__ */ jsxs30(
     strokeLinejoin: "round",
     ...props,
     children: [
-      /* @__PURE__ */ jsx74("path", { d: "M5 12h14" }),
-      /* @__PURE__ */ jsx74("path", { d: "M12 5v14" })
+      /* @__PURE__ */ jsx75("path", { d: "M5 12h14" }),
+      /* @__PURE__ */ jsx75("path", { d: "M12 5v14" })
     ]
   }
 );
 var Plus_default = Plus;
 
 // src/components/primitives/Icons/User.tsx
-import { jsx as jsx75, jsxs as jsxs31 } from "react/jsx-runtime";
+import { jsx as jsx76, jsxs as jsxs31 } from "react/jsx-runtime";
 var User7 = (props) => /* @__PURE__ */ jsxs31(
   "svg",
   {
@@ -9041,15 +9280,15 @@ var User7 = (props) => /* @__PURE__ */ jsxs31(
     strokeLinejoin: "round",
     ...props,
     children: [
-      /* @__PURE__ */ jsx75("path", { d: "M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2" }),
-      /* @__PURE__ */ jsx75("circle", { cx: "12", cy: "7", r: "4" })
+      /* @__PURE__ */ jsx76("path", { d: "M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2" }),
+      /* @__PURE__ */ jsx76("circle", { cx: "12", cy: "7", r: "4" })
     ]
   }
 );
 var User_default2 = User7;
 
 // src/components/primitives/Icons/X.tsx
-import { jsx as jsx76, jsxs as jsxs32 } from "react/jsx-runtime";
+import { jsx as jsx77, jsxs as jsxs32 } from "react/jsx-runtime";
 var X = (props) => /* @__PURE__ */ jsxs32(
   "svg",
   {
@@ -9064,8 +9303,8 @@ var X = (props) => /* @__PURE__ */ jsxs32(
     strokeLinejoin: "round",
     ...props,
     children: [
-      /* @__PURE__ */ jsx76("path", { d: "M18 6 6 18" }),
-      /* @__PURE__ */ jsx76("path", { d: "m6 6 12 12" })
+      /* @__PURE__ */ jsx77("path", { d: "M18 6 6 18" }),
+      /* @__PURE__ */ jsx77("path", { d: "m6 6 12 12" })
     ]
   }
 );
@@ -9137,7 +9376,7 @@ var useStyles20 = (theme, colorScheme) => {
 var Dialog_styles_default = useStyles20;
 
 // src/components/primitives/Dialog/Dialog.tsx
-import { jsx as jsx77, jsxs as jsxs33 } from "react/jsx-runtime";
+import { jsx as jsx78, jsxs as jsxs33 } from "react/jsx-runtime";
 function useDialog({
   initialOpen = false,
   open: controlledOpen,
@@ -9183,7 +9422,7 @@ var useDialogContext = () => {
 };
 function Dialog({ children, ...options }) {
   const dialog = useDialog(options);
-  return /* @__PURE__ */ jsx77(DialogContext.Provider, { value: dialog, children });
+  return /* @__PURE__ */ jsx78(DialogContext.Provider, { value: dialog, children });
 }
 var DialogTrigger = React2.forwardRef(
   ({ children, asChild = false, ...props }, propRef) => {
@@ -9201,7 +9440,7 @@ var DialogTrigger = React2.forwardRef(
         })
       );
     }
-    return /* @__PURE__ */ jsx77("button", { ref, "data-state": context.open ? "open" : "closed", ...context.getReferenceProps(props), children });
+    return /* @__PURE__ */ jsx78("button", { ref, "data-state": context.open ? "open" : "closed", ...context.getReferenceProps(props), children });
   }
 );
 var DialogContent = React2.forwardRef((props, propRef) => {
@@ -9210,7 +9449,7 @@ var DialogContent = React2.forwardRef((props, propRef) => {
   const styles = Dialog_styles_default(theme, colorScheme);
   const ref = useMergeRefs([context.refs.setFloating, propRef]);
   if (!floatingContext.open) return null;
-  return /* @__PURE__ */ jsx77(FloatingPortal, { children: /* @__PURE__ */ jsx77(FloatingOverlay, { className: cx23(withVendorCSSClassPrefix23(bem17("dialog", "overlay")), styles.overlay), lockScroll: true, children: /* @__PURE__ */ jsx77(FloatingFocusManager, { context: floatingContext, initialFocus: -1, children: /* @__PURE__ */ jsx77(
+  return /* @__PURE__ */ jsx78(FloatingPortal, { children: /* @__PURE__ */ jsx78(FloatingOverlay, { className: cx23(withVendorCSSClassPrefix23(bem17("dialog", "overlay")), styles.overlay), lockScroll: true, children: /* @__PURE__ */ jsx78(FloatingFocusManager, { context: floatingContext, initialFocus: -1, children: /* @__PURE__ */ jsx78(
     "div",
     {
       ref,
@@ -9233,7 +9472,7 @@ var DialogHeading = React2.forwardRef(
       return () => context.setLabelId(void 0);
     }, [id, context.setLabelId]);
     return /* @__PURE__ */ jsxs33("div", { className: cx23(withVendorCSSClassPrefix23(bem17("dialog", "header")), styles.header), children: [
-      /* @__PURE__ */ jsx77(
+      /* @__PURE__ */ jsx78(
         "h2",
         {
           ...props,
@@ -9243,7 +9482,7 @@ var DialogHeading = React2.forwardRef(
           children
         }
       ),
-      /* @__PURE__ */ jsx77(
+      /* @__PURE__ */ jsx78(
         Button_default,
         {
           color: "tertiary",
@@ -9252,7 +9491,7 @@ var DialogHeading = React2.forwardRef(
           shape: "round",
           onClick: () => context.setOpen(false),
           "aria-label": "Close",
-          children: /* @__PURE__ */ jsx77(X_default, { width: 16, height: 16 })
+          children: /* @__PURE__ */ jsx78(X_default, { width: 16, height: 16 })
         }
       )
     ] });
@@ -9268,7 +9507,7 @@ var DialogDescription = React2.forwardRef(
       context.setDescriptionId(id);
       return () => context.setDescriptionId(void 0);
     }, [id, context.setDescriptionId]);
-    return /* @__PURE__ */ jsx77(
+    return /* @__PURE__ */ jsx78(
       "p",
       {
         ...props,
@@ -9298,7 +9537,7 @@ var DialogClose = React2.forwardRef(({ children, asChild = false, ...props }, pr
       onClick: handleClick
     });
   }
-  return /* @__PURE__ */ jsx77(
+  return /* @__PURE__ */ jsx78(
     Button_default,
     {
       ...props,
@@ -9421,7 +9660,7 @@ var useStyles21 = (theme, colorScheme, disabled, hasError, canAddMore, canRemove
 var MultiInput_styles_default = useStyles21;
 
 // src/components/primitives/MultiInput/MultiInput.tsx
-import { jsx as jsx78, jsxs as jsxs34 } from "react/jsx-runtime";
+import { jsx as jsx79, jsxs as jsxs34 } from "react/jsx-runtime";
 var MultiInput = ({
   label,
   error,
@@ -9444,8 +9683,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__ */ jsx78("svg", { width: "16", height: "16", viewBox: "0 0 24 24", className: cx24(styles.icon, className2), children: /* @__PURE__ */ jsx78("path", { d: "M12 5v14M5 12h14" }) });
-  const BinIcon = ({ className: className2 }) => /* @__PURE__ */ jsx78("svg", { width: "16", height: "16", viewBox: "0 0 24 24", className: cx24(styles.icon, className2), children: /* @__PURE__ */ jsx78("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__ */ jsx79("svg", { width: "16", height: "16", viewBox: "0 0 24 24", className: cx24(styles.icon, className2), children: /* @__PURE__ */ jsx79("path", { d: "M12 5v14M5 12h14" }) });
+  const BinIcon = ({ className: className2 }) => /* @__PURE__ */ jsx79("svg", { width: "16", height: "16", viewBox: "0 0 24 24", className: cx24(styles.icon, className2), children: /* @__PURE__ */ jsx79("path", { d: "M3 6h18M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2m3 0v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6h14ZM10 11v6M14 11v6" }) });
   const handleAddValue = useCallback12(
     (newValue) => {
       if (newValue.trim() !== "" && (!maxFields || values.length < maxFields)) {
@@ -9489,9 +9728,9 @@ var MultiInput = ({
       };
       switch (fieldType) {
         case "DATE_TIME":
-          return /* @__PURE__ */ jsx78(DatePicker_default, { ...commonProps });
+          return /* @__PURE__ */ jsx79(DatePicker_default, { ...commonProps });
         case "BOOLEAN":
-          return /* @__PURE__ */ jsx78(
+          return /* @__PURE__ */ jsx79(
             Checkbox_default,
             {
               ...commonProps,
@@ -9500,7 +9739,7 @@ var MultiInput = ({
             }
           );
         default:
-          return /* @__PURE__ */ jsx78(TextField_default, { ...commonProps, type });
+          return /* @__PURE__ */ jsx79(TextField_default, { ...commonProps, type });
       }
     },
     [placeholder, disabled, startIcon, endIcon, error, fieldType, type]
@@ -9520,27 +9759,27 @@ var MultiInput = ({
       className: cx24(withVendorCSSClassPrefix24(bem18("multi-input")), className),
       style,
       children: [
-        label && /* @__PURE__ */ jsx78(InputLabel_default, { required, error: !!error, children: label }),
+        label && /* @__PURE__ */ jsx79(InputLabel_default, { required, error: !!error, children: label }),
         /* @__PURE__ */ jsxs34("div", { className: cx24(withVendorCSSClassPrefix24(bem18("multi-input", "container")), styles.container), children: [
-          /* @__PURE__ */ jsx78("div", { className: cx24(withVendorCSSClassPrefix24(bem18("multi-input", "input-row")), styles.inputRow), children: /* @__PURE__ */ jsx78("div", { className: cx24(withVendorCSSClassPrefix24(bem18("multi-input", "input-wrapper")), styles.inputWrapper), children: renderInputField(
+          /* @__PURE__ */ jsx79("div", { className: cx24(withVendorCSSClassPrefix24(bem18("multi-input", "input-row")), styles.inputRow), children: /* @__PURE__ */ jsx79("div", { className: cx24(withVendorCSSClassPrefix24(bem18("multi-input", "input-wrapper")), styles.inputWrapper), children: renderInputField(
             currentInputValue,
             setCurrentInputValue,
-            canAddMore ? /* @__PURE__ */ jsx78(PlusIcon, { className: styles.plusIcon }) : void 0,
+            canAddMore ? /* @__PURE__ */ jsx79(PlusIcon, { className: styles.plusIcon }) : void 0,
             canAddMore ? handleInputSubmit : void 0
           ) }) }),
-          values.length > 0 && /* @__PURE__ */ jsx78("div", { className: cx24(withVendorCSSClassPrefix24(bem18("multi-input", "list-container")), styles.listContainer), children: values.map((value, index) => /* @__PURE__ */ jsxs34(
+          values.length > 0 && /* @__PURE__ */ jsx79("div", { className: cx24(withVendorCSSClassPrefix24(bem18("multi-input", "list-container")), styles.listContainer), children: values.map((value, index) => /* @__PURE__ */ jsxs34(
             "div",
             {
               className: cx24(withVendorCSSClassPrefix24(bem18("multi-input", "list-item")), styles.listItem),
               children: [
-                /* @__PURE__ */ jsx78(
+                /* @__PURE__ */ jsx79(
                   "span",
                   {
                     className: cx24(withVendorCSSClassPrefix24(bem18("multi-input", "list-item-text")), styles.listItemText),
                     children: value
                   }
                 ),
-                canRemove && /* @__PURE__ */ jsx78(
+                canRemove && /* @__PURE__ */ jsx79(
                   "button",
                   {
                     type: "button",
@@ -9548,7 +9787,7 @@ var MultiInput = ({
                     disabled,
                     className: cx24(withVendorCSSClassPrefix24(bem18("multi-input", "remove-button")), styles.removeButton),
                     title: "Remove value",
-                    children: /* @__PURE__ */ jsx78(BinIcon, { className: styles.icon })
+                    children: /* @__PURE__ */ jsx79(BinIcon, { className: styles.icon })
                   }
                 )
               ]
@@ -9592,7 +9831,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 = css22`
     min-height: 60px;
@@ -9659,7 +9898,7 @@ var useStyles22 = (theme, colorScheme) => {
       width: 120px;
       flex-shrink: 0;
       line-height: 28px;
-      text-align: left;
+      text-align: start;
     `;
     const value = css22`
       color: ${theme.vars.colors.text.primary};
@@ -9674,7 +9913,7 @@ var useStyles22 = (theme, colorScheme) => {
       text-overflow: ellipsis;
       white-space: nowrap;
       max-width: 350px;
-      text-align: left;
+      text-align: start;
 
       .${withVendorCSSClassPrefix25("form-control")} {
         margin-bottom: 0;
@@ -9747,7 +9986,7 @@ var getDisplayName = (mergedMappings, user) => {
 var getDisplayName_default = getDisplayName;
 
 // src/components/presentation/UserProfile/BaseUserProfile.tsx
-import { Fragment as Fragment15, jsx as jsx79, jsxs as jsxs35 } from "react/jsx-runtime";
+import { Fragment as Fragment15, jsx as jsx80, jsxs as jsxs35 } from "react/jsx-runtime";
 var fieldsToSkip = [
   "roles.default",
   "active",
@@ -9807,7 +10046,7 @@ var BaseUserProfile = ({
     },
     [showFields, hideFields]
   );
-  const PencilIcon = () => /* @__PURE__ */ jsx79(
+  const PencilIcon = () => /* @__PURE__ */ jsx80(
     "svg",
     {
       width: "16",
@@ -9818,7 +10057,7 @@ var BaseUserProfile = ({
       strokeWidth: "2",
       strokeLinecap: "round",
       strokeLinejoin: "round",
-      children: /* @__PURE__ */ jsx79("path", { d: "M17 3a2.828 2.828 0 1 1 4 4L7.5 20.5 2 22l1.5-5.5L17 3z" })
+      children: /* @__PURE__ */ jsx80("path", { d: "M17 3a2.828 2.828 0 1 1 4 4L7.5 20.5 2 22l1.5-5.5L17 3z" })
     }
   );
   const toggleFieldEdit = useCallback13((fieldName) => {
@@ -9843,12 +10082,12 @@ var BaseUserProfile = ({
   }, []);
   const ObjectDisplay = ({ data }) => {
     if (!data || typeof data !== "object") return null;
-    return /* @__PURE__ */ jsx79("table", { className: styles.value, children: /* @__PURE__ */ jsx79("tbody", { children: Object.entries(data).map(([key, value]) => /* @__PURE__ */ jsxs35("tr", { children: [
-      /* @__PURE__ */ jsx79("td", { className: styles.objectKey, children: /* @__PURE__ */ jsxs35("strong", { children: [
+    return /* @__PURE__ */ jsx80("table", { className: styles.value, children: /* @__PURE__ */ jsx80("tbody", { children: Object.entries(data).map(([key, value]) => /* @__PURE__ */ jsxs35("tr", { children: [
+      /* @__PURE__ */ jsx80("td", { className: styles.objectKey, children: /* @__PURE__ */ jsxs35("strong", { children: [
         formatLabel(key),
         ":"
       ] }) }),
-      /* @__PURE__ */ jsx79("td", { className: styles.objectValue, children: typeof value === "object" ? /* @__PURE__ */ jsx79(ObjectDisplay, { data: value }) : String(value) })
+      /* @__PURE__ */ jsx80("td", { className: styles.objectValue, children: typeof value === "object" ? /* @__PURE__ */ jsx80(ObjectDisplay, { data: value }) : String(value) })
     ] }, key)) }) });
   };
   function set(obj, path, value) {
@@ -9921,9 +10160,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__ */ jsx79(Fragment15, { children: subAttributes.map((subAttr, index) => /* @__PURE__ */ jsxs35("div", { className: styles.field, children: [
-        /* @__PURE__ */ jsx79("span", { className: styles.label, children: subAttr.displayName || subAttr.description || "" }),
-        /* @__PURE__ */ jsx79("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__ */ jsx80(Fragment15, { children: subAttributes.map((subAttr, index) => /* @__PURE__ */ jsxs35("div", { className: styles.field, children: [
+        /* @__PURE__ */ jsx80("span", { className: styles.label, children: subAttr.displayName || subAttr.description || "" }),
+        /* @__PURE__ */ jsx80("div", { className: styles.value, children: Array.isArray(subAttr.value) ? subAttr.value.map((item) => typeof item === "object" ? JSON.stringify(item) : String(item)).join(", ") : typeof subAttr.value === "object" ? JSON.stringify(subAttr.value) : String(subAttr.value) })
       ] }, index)) });
     }
     if (Array.isArray(value) || multiValued) {
@@ -9940,8 +10179,8 @@ var BaseUserProfile = ({
           fieldValues = [];
         }
         return /* @__PURE__ */ jsxs35(Fragment15, { children: [
-          /* @__PURE__ */ jsx79("span", { className: styles.label, children: label }),
-          /* @__PURE__ */ jsx79("div", { className: styles.value, children: /* @__PURE__ */ jsx79(
+          /* @__PURE__ */ jsx80("span", { className: styles.label, children: label }),
+          /* @__PURE__ */ jsx80("div", { className: styles.value, children: /* @__PURE__ */ jsx80(
             MultiInput_default,
             {
               values: fieldValues,
@@ -9973,8 +10212,8 @@ var BaseUserProfile = ({
         displayValue2 = "-";
       }
       return /* @__PURE__ */ jsxs35(Fragment15, { children: [
-        /* @__PURE__ */ jsx79("span", { className: styles.label, children: label }),
-        /* @__PURE__ */ jsx79("div", { className: cx25(styles.value, !hasValues ? styles.valuePlaceholder : ""), children: !hasValues && isEditable2 && onStartEdit ? /* @__PURE__ */ jsx79(
+        /* @__PURE__ */ jsx80("span", { className: styles.label, children: label }),
+        /* @__PURE__ */ jsx80("div", { className: cx25(styles.value, !hasValues ? styles.valuePlaceholder : ""), children: !hasValues && isEditable2 && onStartEdit ? /* @__PURE__ */ jsx80(
           Button_default,
           {
             onClick: onStartEdit,
@@ -9989,7 +10228,7 @@ var BaseUserProfile = ({
       ] });
     }
     if (type === "COMPLEX" && typeof value === "object") {
-      return /* @__PURE__ */ jsx79(ObjectDisplay, { data: value });
+      return /* @__PURE__ */ jsx80(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 || "";
@@ -10004,16 +10243,16 @@ var BaseUserProfile = ({
       let field;
       switch (type) {
         case "STRING":
-          field = /* @__PURE__ */ jsx79(TextField_default, { ...commonProps });
+          field = /* @__PURE__ */ jsx80(TextField_default, { ...commonProps });
           break;
         case "DATE_TIME":
-          field = /* @__PURE__ */ jsx79(DatePicker_default, { ...commonProps });
+          field = /* @__PURE__ */ jsx80(DatePicker_default, { ...commonProps });
           break;
         case "BOOLEAN":
-          field = /* @__PURE__ */ jsx79(Checkbox_default, { ...commonProps, checked: !!fieldValue, onChange: (e) => onEditValue(e.target.checked) });
+          field = /* @__PURE__ */ jsx80(Checkbox_default, { ...commonProps, checked: !!fieldValue, onChange: (e) => onEditValue(e.target.checked) });
           break;
         case "COMPLEX":
-          field = /* @__PURE__ */ jsx79(
+          field = /* @__PURE__ */ jsx80(
             "textarea",
             {
               value: fieldValue,
@@ -10025,11 +10264,11 @@ var BaseUserProfile = ({
           );
           break;
         default:
-          field = /* @__PURE__ */ jsx79(TextField_default, { ...commonProps });
+          field = /* @__PURE__ */ jsx80(TextField_default, { ...commonProps });
       }
       return /* @__PURE__ */ jsxs35(Fragment15, { children: [
-        /* @__PURE__ */ jsx79("span", { className: styles.label, children: label }),
-        /* @__PURE__ */ jsx79("div", { className: styles.value, children: field })
+        /* @__PURE__ */ jsx80("span", { className: styles.label, children: label }),
+        /* @__PURE__ */ jsx80("div", { className: styles.value, children: field })
       ] });
     }
     const hasValue = value !== void 0 && value !== null && value !== "";
@@ -10043,8 +10282,8 @@ var BaseUserProfile = ({
       displayValue = "-";
     }
     return /* @__PURE__ */ jsxs35(Fragment15, { children: [
-      /* @__PURE__ */ jsx79("span", { className: styles.label, children: label }),
-      /* @__PURE__ */ jsx79("div", { className: cx25(styles.value, !hasValue ? styles.valuePlaceholder : ""), children: !hasValue && isEditable && onStartEdit ? /* @__PURE__ */ jsx79(
+      /* @__PURE__ */ jsx80("span", { className: styles.label, children: label }),
+      /* @__PURE__ */ jsx80("div", { className: cx25(styles.value, !hasValue ? styles.valuePlaceholder : ""), children: !hasValue && isEditable && onStartEdit ? /* @__PURE__ */ jsx80(
         Button_default,
         {
           onClick: onStartEdit,
@@ -10073,7 +10312,7 @@ var BaseUserProfile = ({
       gap: theme.vars.spacing.unit
     };
     return /* @__PURE__ */ jsxs35("div", { className: styles.field, children: [
-      /* @__PURE__ */ jsx79("div", { className: styles.fieldInner, children: renderSchemaField(
+      /* @__PURE__ */ jsx80("div", { className: styles.fieldInner, children: renderSchemaField(
         schema,
         isFieldEditing,
         (value) => {
@@ -10085,10 +10324,10 @@ var BaseUserProfile = ({
       ) }),
       editable && schema.mutability !== "READ_ONLY" && !isReadonlyField && /* @__PURE__ */ jsxs35("div", { className: styles.fieldActions, children: [
         isFieldEditing && /* @__PURE__ */ jsxs35(Fragment15, { children: [
-          /* @__PURE__ */ jsx79(Button_default, { size: "small", color: "primary", variant: "solid", onClick: () => handleFieldSave(schema), children: "Save" }),
-          /* @__PURE__ */ jsx79(Button_default, { size: "small", color: "secondary", variant: "solid", onClick: () => handleFieldCancel(schema.name), children: "Cancel" })
+          /* @__PURE__ */ jsx80(Button_default, { size: "small", color: "primary", variant: "solid", onClick: () => handleFieldSave(schema), children: "Save" }),
+          /* @__PURE__ */ jsx80(Button_default, { size: "small", color: "secondary", variant: "solid", onClick: () => handleFieldCancel(schema.name), children: "Cancel" })
         ] }),
-        !isFieldEditing && hasValue && /* @__PURE__ */ jsx79(
+        !isFieldEditing && hasValue && /* @__PURE__ */ jsx80(
           Button_default,
           {
             size: "small",
@@ -10097,7 +10336,7 @@ var BaseUserProfile = ({
             onClick: () => toggleFieldEdit(schema.name),
             title: "Edit",
             className: styles.editButton,
-            children: /* @__PURE__ */ jsx79(PencilIcon, {})
+            children: /* @__PURE__ */ jsx80(PencilIcon, {})
           }
         )
       ] })
@@ -10121,17 +10360,17 @@ var BaseUserProfile = ({
       if (!shouldShowField(key)) return false;
       return value !== void 0 && value !== "" && value !== null;
     }).sort(([a], [b]) => a.localeCompare(b));
-    return /* @__PURE__ */ jsx79(Fragment15, { children: profileEntries.map(([key, value]) => /* @__PURE__ */ jsxs35("div", { className: styles.field, children: [
-      /* @__PURE__ */ jsx79("span", { className: styles.label, children: formatLabel(key) }),
-      /* @__PURE__ */ jsx79("div", { className: styles.value, children: typeof value === "object" ? JSON.stringify(value, null, 2) : String(value) })
+    return /* @__PURE__ */ jsx80(Fragment15, { children: profileEntries.map(([key, value]) => /* @__PURE__ */ jsxs35("div", { className: styles.field, children: [
+      /* @__PURE__ */ jsx80("span", { className: styles.label, children: formatLabel(key) }),
+      /* @__PURE__ */ jsx80("div", { className: styles.value, children: typeof value === "object" ? JSON.stringify(value, null, 2) : String(value) })
     ] }, key)) });
   };
   const profileContent = /* @__PURE__ */ jsxs35(Card_default, { className: containerClasses, children: [
     error && /* @__PURE__ */ jsxs35(Alert_default, { variant: "error", className: cx25(withVendorCSSClassPrefix26(bem19("user-profile", "alert")), styles.alert), children: [
-      /* @__PURE__ */ jsx79(Alert_default.Title, { children: t("errors.title") || "Error" }),
-      /* @__PURE__ */ jsx79(Alert_default.Description, { children: error })
+      /* @__PURE__ */ jsx80(Alert_default.Title, { children: t("errors.title") || "Error" }),
+      /* @__PURE__ */ jsx80(Alert_default.Description, { children: error })
     ] }),
-    /* @__PURE__ */ jsx79("div", { className: styles.header, children: /* @__PURE__ */ jsx79(
+    /* @__PURE__ */ jsx80("div", { className: styles.header, children: /* @__PURE__ */ jsx80(
       Avatar,
       {
         imageUrl: getMappedUserProfileValue_default("picture", mergedMappings, currentUser),
@@ -10141,7 +10380,7 @@ var BaseUserProfile = ({
         isLoading
       }
     ) }),
-    /* @__PURE__ */ jsx79("div", { className: styles.infoContainer, children: schemas && schemas.length > 0 ? schemas.filter((schema) => {
+    /* @__PURE__ */ jsx80("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;
@@ -10158,13 +10397,13 @@ var BaseUserProfile = ({
         ...schema,
         value
       };
-      return /* @__PURE__ */ jsx79("div", { className: styles.info, children: renderUserInfo(schemaWithValue) }, schema.name || index);
+      return /* @__PURE__ */ jsx80("div", { className: styles.info, children: renderUserInfo(schemaWithValue) }, schema.name || index);
     }) : renderProfileWithoutSchemas() })
   ] });
   if (mode === "popup") {
-    return /* @__PURE__ */ jsx79(Dialog_default, { open, onOpenChange, children: /* @__PURE__ */ jsxs35(Dialog_default.Content, { children: [
-      /* @__PURE__ */ jsx79(Dialog_default.Heading, { children: title ?? t("user.profile.title") }),
-      /* @__PURE__ */ jsx79("div", { className: styles.popup, children: profileContent })
+    return /* @__PURE__ */ jsx80(Dialog_default, { open, onOpenChange, children: /* @__PURE__ */ jsxs35(Dialog_default.Content, { children: [
+      /* @__PURE__ */ jsx80(Dialog_default.Heading, { children: title ?? t("user.profile.title") }),
+      /* @__PURE__ */ jsx80("div", { className: styles.popup, children: profileContent })
     ] }) });
   }
   return profileContent;
@@ -10205,7 +10444,7 @@ var updateMeProfile_default = updateMeProfile;
 
 // src/components/presentation/UserProfile/UserProfile.tsx
 import { AsgardeoError } from "@asgardeo/browser";
-import { jsx as jsx80 } from "react/jsx-runtime";
+import { jsx as jsx81 } from "react/jsx-runtime";
 var UserProfile3 = ({ ...rest }) => {
   const { baseUrl, isLoading } = useAsgardeo_default();
   const { profile, flattenedProfile, schemas, onUpdateProfile } = useUser_default();
@@ -10224,7 +10463,7 @@ var UserProfile3 = ({ ...rest }) => {
       setError(message);
     }
   };
-  return /* @__PURE__ */ jsx80(
+  return /* @__PURE__ */ jsx81(
     BaseUserProfile_default,
     {
       profile,
@@ -10324,7 +10563,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;
@@ -10353,7 +10592,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;
 
@@ -10441,7 +10680,7 @@ var useStyles23 = (theme, colorScheme) => {
 var BaseUserDropdown_styles_default = useStyles23;
 
 // src/components/presentation/UserDropdown/BaseUserDropdown.tsx
-import { jsx as jsx81, jsxs as jsxs36 } from "react/jsx-runtime";
+import { jsx as jsx82, jsxs as jsxs36 } from "react/jsx-runtime";
 var BaseUserDropdown = ({
   fallback = null,
   className = "",
@@ -10495,14 +10734,14 @@ var BaseUserDropdown = ({
     defaultMenuItems.push({
       label: "Manage Profile",
       onClick: onManageProfile,
-      icon: /* @__PURE__ */ jsx81(User_default2, { width: "16", height: "16" })
+      icon: /* @__PURE__ */ jsx82(User_default2, { width: "16", height: "16" })
     });
   }
   if (onSignOut) {
     defaultMenuItems.push({
       label: "Sign Out",
       onClick: onSignOut,
-      icon: /* @__PURE__ */ jsx81(LogOut_default, { width: "16", height: "16" })
+      icon: /* @__PURE__ */ jsx82(LogOut_default, { width: "16", height: "16" })
     });
   }
   const allMenuItems = [...menuItems];
@@ -10523,7 +10762,7 @@ var BaseUserDropdown = ({
         size: "medium",
         ...getReferenceProps(),
         children: [
-          /* @__PURE__ */ jsx81(
+          /* @__PURE__ */ jsx82(
             Avatar,
             {
               imageUrl: getMappedUserProfileValue_default("picture", mergedMappings, user),
@@ -10532,7 +10771,7 @@ var BaseUserDropdown = ({
               alt: `${getDisplayName_default(mergedMappings, user)}'s avatar`
             }
           ),
-          showTriggerLabel && /* @__PURE__ */ jsx81(
+          showTriggerLabel && /* @__PURE__ */ jsx82(
             Typography_default,
             {
               variant: "body2",
@@ -10543,7 +10782,7 @@ var BaseUserDropdown = ({
         ]
       }
     ),
-    isOpen && /* @__PURE__ */ jsx81(FloatingPortal2, { id: portalId, children: /* @__PURE__ */ jsx81(FloatingFocusManager2, { context, modal: false, initialFocus: -1, children: /* @__PURE__ */ jsxs36(
+    isOpen && /* @__PURE__ */ jsx82(FloatingPortal2, { id: portalId, children: /* @__PURE__ */ jsx82(FloatingFocusManager2, { context, modal: false, initialFocus: -1, children: /* @__PURE__ */ jsxs36(
       "div",
       {
         ref: refs.setFloating,
@@ -10557,7 +10796,7 @@ var BaseUserDropdown = ({
         ...getFloatingProps(),
         children: [
           /* @__PURE__ */ jsxs36("div", { className: cx26(withVendorCSSClassPrefix27("user-dropdown__header"), styles.dropdownHeader), children: [
-            /* @__PURE__ */ jsx81(
+            /* @__PURE__ */ jsx82(
               Avatar,
               {
                 imageUrl: getMappedUserProfileValue_default("picture", mergedMappings, user),
@@ -10567,7 +10806,7 @@ var BaseUserDropdown = ({
               }
             ),
             /* @__PURE__ */ jsxs36("div", { className: cx26(withVendorCSSClassPrefix27("user-dropdown__header-info"), styles.headerInfo), children: [
-              /* @__PURE__ */ jsx81(
+              /* @__PURE__ */ jsx82(
                 Typography_default,
                 {
                   noWrap: true,
@@ -10577,7 +10816,7 @@ var BaseUserDropdown = ({
                   children: getDisplayName_default(mergedMappings, user)
                 }
               ),
-              /* @__PURE__ */ jsx81(
+              /* @__PURE__ */ jsx82(
                 Typography_default,
                 {
                   noWrap: true,
@@ -10589,7 +10828,7 @@ var BaseUserDropdown = ({
               )
             ] })
           ] }),
-          /* @__PURE__ */ jsx81("div", { className: cx26(withVendorCSSClassPrefix27("user-dropdown__menu"), styles.dropdownMenu), children: allMenuItems.map((item, index) => /* @__PURE__ */ jsx81("div", { children: item.label === "" ? /* @__PURE__ */ jsx81("div", { className: cx26(withVendorCSSClassPrefix27("user-dropdown__menu-divider"), styles.divider) }) : item.href ? /* @__PURE__ */ jsxs36(
+          /* @__PURE__ */ jsx82("div", { className: cx26(withVendorCSSClassPrefix27("user-dropdown__menu"), styles.dropdownMenu), children: allMenuItems.map((item, index) => /* @__PURE__ */ jsx82("div", { children: item.label === "" ? /* @__PURE__ */ jsx82("div", { className: cx26(withVendorCSSClassPrefix27("user-dropdown__menu-divider"), styles.divider) }) : item.href ? /* @__PURE__ */ jsxs36(
             "a",
             {
               href: item.href,
@@ -10603,10 +10842,10 @@ var BaseUserDropdown = ({
               onBlur: () => setHoveredItemIndex(null),
               children: [
                 item.icon,
-                /* @__PURE__ */ jsx81("span", { children: item.label })
+                /* @__PURE__ */ jsx82("span", { children: item.label })
               ]
             }
-          ) : /* @__PURE__ */ jsx81(
+          ) : /* @__PURE__ */ jsx82(
             Button_default,
             {
               onClick: () => handleMenuItemClick(item),
@@ -10632,7 +10871,7 @@ var BaseUserDropdown_default = BaseUserDropdown;
 
 // src/components/presentation/UserDropdown/UserDropdown.tsx
 import { useState as useState22 } from "react";
-import { Fragment as Fragment16, jsx as jsx82, jsxs as jsxs37 } from "react/jsx-runtime";
+import { Fragment as Fragment16, jsx as jsx83, jsxs as jsxs37 } from "react/jsx-runtime";
 var UserDropdown = ({
   children,
   renderTrigger,
@@ -10663,12 +10902,12 @@ var UserDropdown = ({
   if (children) {
     return /* @__PURE__ */ jsxs37(Fragment16, { children: [
       children(renderProps),
-      /* @__PURE__ */ jsx82(UserProfile_default, { mode: "popup", open: isProfileOpen, onOpenChange: setIsProfileOpen })
+      /* @__PURE__ */ jsx83(UserProfile_default, { mode: "popup", open: isProfileOpen, onOpenChange: setIsProfileOpen })
     ] });
   }
   if (renderTrigger || renderDropdown) {
     return /* @__PURE__ */ jsxs37(Fragment16, { children: [
-      renderTrigger ? renderTrigger(renderProps) : /* @__PURE__ */ jsx82(
+      renderTrigger ? renderTrigger(renderProps) : /* @__PURE__ */ jsx83(
         BaseUserDropdown_default,
         {
           user,
@@ -10678,11 +10917,11 @@ var UserDropdown = ({
           ...rest
         }
       ),
-      /* @__PURE__ */ jsx82(UserProfile_default, { mode: "popup", open: isProfileOpen, onOpenChange: setIsProfileOpen })
+      /* @__PURE__ */ jsx83(UserProfile_default, { mode: "popup", open: isProfileOpen, onOpenChange: setIsProfileOpen })
     ] });
   }
   return /* @__PURE__ */ jsxs37(Fragment16, { children: [
-    /* @__PURE__ */ jsx82(
+    /* @__PURE__ */ jsx83(
       BaseUserDropdown_default,
       {
         user,
@@ -10692,7 +10931,7 @@ var UserDropdown = ({
         ...rest
       }
     ),
-    isProfileOpen && /* @__PURE__ */ jsx82(UserProfile_default, { mode: "popup", open: isProfileOpen, onOpenChange: setIsProfileOpen })
+    isProfileOpen && /* @__PURE__ */ jsx83(UserProfile_default, { mode: "popup", open: isProfileOpen, onOpenChange: setIsProfileOpen })
   ] });
 };
 var UserDropdown_default = UserDropdown;
@@ -10715,9 +10954,9 @@ import { cx as cx27 } from "@emotion/css";
 import { useState as useState23 } from "react";
 
 // src/components/primitives/Icons/Building.tsx
-import { jsx as jsx83, jsxs as jsxs38 } from "react/jsx-runtime";
+import { jsx as jsx84, jsxs as jsxs38 } from "react/jsx-runtime";
 var Building = ({ color = "currentColor", height = 24, width = 24 }) => /* @__PURE__ */ jsxs38("svg", { width, height, viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [
-  /* @__PURE__ */ jsx83(
+  /* @__PURE__ */ jsx84(
     "path",
     {
       d: "M6 22V4a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2v18Z",
@@ -10727,25 +10966,25 @@ var Building = ({ color = "currentColor", height = 24, width = 24 }) => /* @__PU
       strokeLinejoin: "round"
     }
   ),
-  /* @__PURE__ */ jsx83("path", { d: "M6 12h4", stroke: color, strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }),
-  /* @__PURE__ */ jsx83("path", { d: "M6 8h4", stroke: color, strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }),
-  /* @__PURE__ */ jsx83("path", { d: "M14 8h4", stroke: color, strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }),
-  /* @__PURE__ */ jsx83("path", { d: "M14 12h4", stroke: color, strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }),
-  /* @__PURE__ */ jsx83("path", { d: "M6 18h4", stroke: color, strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }),
-  /* @__PURE__ */ jsx83("path", { d: "M14 18h4", stroke: color, strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" })
+  /* @__PURE__ */ jsx84("path", { d: "M6 12h4", stroke: color, strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }),
+  /* @__PURE__ */ jsx84("path", { d: "M6 8h4", stroke: color, strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }),
+  /* @__PURE__ */ jsx84("path", { d: "M14 8h4", stroke: color, strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }),
+  /* @__PURE__ */ jsx84("path", { d: "M14 12h4", stroke: color, strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }),
+  /* @__PURE__ */ jsx84("path", { d: "M6 18h4", stroke: color, strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }),
+  /* @__PURE__ */ jsx84("path", { d: "M14 18h4", stroke: color, strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" })
 ] });
 Building.displayName = "Building";
 var Building_default = Building;
 
 // src/components/primitives/Icons/Check.tsx
-import { jsx as jsx84 } from "react/jsx-runtime";
-var Check = ({ color = "currentColor", height = 24, width = 24 }) => /* @__PURE__ */ jsx84("svg", { width, height, viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsx84("path", { d: "M20 6 9 17l-5-5", stroke: color, strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) });
+import { jsx as jsx85 } from "react/jsx-runtime";
+var Check = ({ color = "currentColor", height = 24, width = 24 }) => /* @__PURE__ */ jsx85("svg", { width, height, viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsx85("path", { d: "M20 6 9 17l-5-5", stroke: color, strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) });
 Check.displayName = "Check";
 var Check_default = Check;
 
 // src/components/primitives/Icons/ChevronDown.tsx
-import { jsx as jsx85 } from "react/jsx-runtime";
-var ChevronDown = ({ color = "currentColor", height = 24, width = 24 }) => /* @__PURE__ */ jsx85("svg", { width, height, viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsx85("path", { d: "m6 9 6 6 6-6", stroke: color, strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) });
+import { jsx as jsx86 } from "react/jsx-runtime";
+var ChevronDown = ({ color = "currentColor", height = 24, width = 24 }) => /* @__PURE__ */ jsx86("svg", { width, height, viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsx86("path", { d: "m6 9 6 6 6-6", stroke: color, strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) });
 ChevronDown.displayName = "ChevronDown";
 var ChevronDown_default = ChevronDown;
 
@@ -10838,7 +11077,7 @@ var useStyles24 = (theme, colorScheme) => {
     `;
     const manageButton = css24`
       min-width: auto;
-      margin-left: auto;
+      margin-inline-start: auto;
     `;
     const menu = css24`
       display: flex;
@@ -10858,7 +11097,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;
 
@@ -10975,7 +11214,7 @@ var useStyles24 = (theme, colorScheme) => {
 var BaseOrganizationSwitcher_styles_default = useStyles24;
 
 // src/components/presentation/OrganizationSwitcher/BaseOrganizationSwitcher.tsx
-import { Fragment as Fragment17, jsx as jsx86, jsxs as jsxs39 } from "react/jsx-runtime";
+import { Fragment as Fragment17, jsx as jsx87, jsxs as jsxs39 } from "react/jsx-runtime";
 var BaseOrganizationSwitcher = ({
   organizations,
   currentOrganization,
@@ -10996,11 +11235,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] = useState23(false);
   const [hoveredItemIndex, setHoveredItemIndex] = useState23(null);
   const { t } = useTranslation_default();
+  const isRTL = direction === "rtl";
   const { refs, floatingStyles, context } = useFloating3({
     open: isOpen,
     onOpenChange: setIsOpen,
@@ -11029,7 +11269,7 @@ var BaseOrganizationSwitcher = ({
     (org) => org.id !== currentOrganization?.id
   );
   const defaultRenderOrganization2 = (organization, isSelected) => /* @__PURE__ */ jsxs39(Fragment17, { children: [
-    /* @__PURE__ */ jsx86(
+    /* @__PURE__ */ jsx87(
       Avatar,
       {
         variant: "square",
@@ -11040,21 +11280,21 @@ var BaseOrganizationSwitcher = ({
       }
     ),
     /* @__PURE__ */ jsxs39("div", { className: cx27(styles.organizationInfo), children: [
-      /* @__PURE__ */ jsx86(Typography_default, { variant: "body2", fontWeight: "medium", className: cx27(styles.organizationName), children: organization.name }),
+      /* @__PURE__ */ jsx87(Typography_default, { variant: "body2", fontWeight: "medium", className: cx27(styles.organizationName), children: organization.name }),
       /* @__PURE__ */ jsxs39("div", { className: cx27(styles.organizationMeta), children: [
         showMemberCount && organization.memberCount !== void 0 && /* @__PURE__ */ jsxs39("span", { children: [
           organization.memberCount,
           " ",
           organization.memberCount === 1 ? t("organization.switcher.member") : t("organization.switcher.members")
         ] }),
-        showRole && organization.role && showMemberCount && organization.memberCount !== void 0 && /* @__PURE__ */ jsx86("span", { children: " \u2022 " }),
-        showRole && organization.role && /* @__PURE__ */ jsx86("span", { className: cx27(styles.roleCapitalized), children: organization.role })
+        showRole && organization.role && showMemberCount && organization.memberCount !== void 0 && /* @__PURE__ */ jsx87("span", { children: " \u2022 " }),
+        showRole && organization.role && /* @__PURE__ */ jsx87("span", { className: cx27(styles.roleCapitalized), children: organization.role })
       ] })
     ] }),
-    isSelected && /* @__PURE__ */ jsx86(Check_default, { width: "16", height: "16", color: theme.vars.colors.text.primary })
+    isSelected && /* @__PURE__ */ jsx87(Check_default, { width: "16", height: "16", color: theme.vars.colors.text.primary })
   ] });
-  const defaultRenderLoading2 = () => /* @__PURE__ */ jsx86("div", { className: cx27(styles.loadingContainer), children: /* @__PURE__ */ jsx86(Typography_default, { variant: "caption", className: cx27(styles.loadingText), children: t("organization.switcher.loading.organizations") }) });
-  const defaultRenderError2 = (errorMessage) => /* @__PURE__ */ jsx86("div", { className: cx27(styles.errorContainer), children: /* @__PURE__ */ jsx86(Typography_default, { variant: "caption", className: cx27(styles.errorText), children: errorMessage }) });
+  const defaultRenderLoading2 = () => /* @__PURE__ */ jsx87("div", { className: cx27(styles.loadingContainer), children: /* @__PURE__ */ jsx87(Typography_default, { variant: "caption", className: cx27(styles.loadingText), children: t("organization.switcher.loading.organizations") }) });
+  const defaultRenderError2 = (errorMessage) => /* @__PURE__ */ jsx87("div", { className: cx27(styles.errorContainer), children: /* @__PURE__ */ jsx87(Typography_default, { variant: "caption", className: cx27(styles.errorText), children: errorMessage }) });
   return /* @__PURE__ */ jsxs39("div", { className: cx27(styles.root, className), style, children: [
     /* @__PURE__ */ jsxs39(
       Button_default,
@@ -11067,7 +11307,7 @@ var BaseOrganizationSwitcher = ({
         ...getReferenceProps(),
         children: [
           currentOrganization ? /* @__PURE__ */ jsxs39(Fragment17, { children: [
-            /* @__PURE__ */ jsx86(
+            /* @__PURE__ */ jsx87(
               Avatar,
               {
                 variant: "square",
@@ -11077,18 +11317,18 @@ var BaseOrganizationSwitcher = ({
                 alt: `${currentOrganization.name} avatar`
               }
             ),
-            showTriggerLabel && /* @__PURE__ */ jsx86(Typography_default, { variant: "body2", className: cx27(styles.triggerLabel), children: currentOrganization.name })
+            showTriggerLabel && /* @__PURE__ */ jsx87(Typography_default, { variant: "body2", className: cx27(styles.triggerLabel), children: currentOrganization.name })
           ] }) : /* @__PURE__ */ jsxs39(Fragment17, { children: [
-            /* @__PURE__ */ jsx86(Building_default, { width: avatarSize, height: avatarSize }),
-            showTriggerLabel && /* @__PURE__ */ jsx86(Typography_default, { variant: "body2", className: cx27(styles.triggerLabel), children: t("organization.switcher.select.organization") })
+            /* @__PURE__ */ jsx87(Building_default, { width: avatarSize, height: avatarSize }),
+            showTriggerLabel && /* @__PURE__ */ jsx87(Typography_default, { variant: "body2", className: cx27(styles.triggerLabel), children: t("organization.switcher.select.organization") })
           ] }),
-          /* @__PURE__ */ jsx86(ChevronDown_default, { width: "16", height: "16" })
+          /* @__PURE__ */ jsx87("span", { style: { transform: isRTL ? "scaleX(-1)" : "none", display: "inline-flex" }, children: /* @__PURE__ */ jsx87(ChevronDown_default, { width: "16", height: "16" }) })
         ]
       }
     ),
-    isOpen && /* @__PURE__ */ jsx86(FloatingPortal3, { id: portalId, children: /* @__PURE__ */ jsx86(FloatingFocusManager3, { context, modal: false, initialFocus: -1, children: /* @__PURE__ */ jsxs39("div", { ref: refs.setFloating, className: cx27(styles.content), style: floatingStyles, ...getFloatingProps(), children: [
+    isOpen && /* @__PURE__ */ jsx87(FloatingPortal3, { id: portalId, children: /* @__PURE__ */ jsx87(FloatingFocusManager3, { context, modal: false, initialFocus: -1, children: /* @__PURE__ */ jsxs39("div", { ref: refs.setFloating, className: cx27(styles.content), style: floatingStyles, ...getFloatingProps(), children: [
       currentOrganization && /* @__PURE__ */ jsxs39("div", { className: cx27(styles.header), children: [
-        /* @__PURE__ */ jsx86(
+        /* @__PURE__ */ jsx87(
           Avatar,
           {
             variant: "square",
@@ -11099,7 +11339,7 @@ var BaseOrganizationSwitcher = ({
           }
         ),
         /* @__PURE__ */ jsxs39("div", { className: cx27(styles.headerInfo), children: [
-          /* @__PURE__ */ jsx86(Typography_default, { noWrap: true, className: cx27(styles.headerName), variant: "body1", fontWeight: "medium", children: currentOrganization.name }),
+          /* @__PURE__ */ jsx87(Typography_default, { noWrap: true, className: cx27(styles.headerName), variant: "body1", fontWeight: "medium", children: currentOrganization.name }),
           /* @__PURE__ */ jsxs39("div", { className: cx27(styles.headerMeta), children: [
             showMemberCount && currentOrganization.memberCount !== void 0 && /* @__PURE__ */ jsxs39(
               Typography_default,
@@ -11118,10 +11358,10 @@ var BaseOrganizationSwitcher = ({
                 ]
               }
             ),
-            showRole && currentOrganization.role && (!showMemberCount || currentOrganization.memberCount === void 0) && /* @__PURE__ */ jsx86(Typography_default, { noWrap: true, className: cx27(styles.headerRole), variant: "caption", color: "secondary", children: currentOrganization.role })
+            showRole && currentOrganization.role && (!showMemberCount || currentOrganization.memberCount === void 0) && /* @__PURE__ */ jsx87(Typography_default, { noWrap: true, className: cx27(styles.headerRole), variant: "caption", color: "secondary", children: currentOrganization.role })
           ] })
         ] }),
-        onManageProfile && /* @__PURE__ */ jsx86(
+        onManageProfile && /* @__PURE__ */ jsx87(
           Button_default,
           {
             onClick: onManageProfile,
@@ -11142,8 +11382,8 @@ var BaseOrganizationSwitcher = ({
                 strokeLinecap: "round",
                 strokeLinejoin: "round",
                 children: [
-                  /* @__PURE__ */ jsx86("circle", { cx: "12", cy: "12", r: "3" }),
-                  /* @__PURE__ */ jsx86("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__ */ jsx87("circle", { cx: "12", cy: "12", r: "3" }),
+                  /* @__PURE__ */ jsx87("path", { d: "M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1 1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z" })
                 ]
               }
             ),
@@ -11151,20 +11391,20 @@ var BaseOrganizationSwitcher = ({
           }
         )
       ] }),
-      organizations.length > 1 && /* @__PURE__ */ jsx86(
+      organizations.length > 1 && /* @__PURE__ */ jsx87(
         "div",
         {
           className: cx27(styles.header, styles.sectionHeaderContainer),
           style: {
             borderTop: currentOrganization ? `1px solid ${theme.vars.colors.border}` : "none"
           },
-          children: /* @__PURE__ */ jsx86(Typography_default, { variant: "caption", fontWeight: 600, className: cx27(styles.sectionHeader), children: t("organization.switcher.switch.organization") })
+          children: /* @__PURE__ */ jsx87(Typography_default, { variant: "caption", fontWeight: 600, className: cx27(styles.sectionHeader), children: t("organization.switcher.switch.organization") })
         }
       ),
-      /* @__PURE__ */ jsx86("div", { className: cx27(styles.menu), children: loading ? renderLoading ? renderLoading() : defaultRenderLoading2() : error ? renderError ? renderError(error) : defaultRenderError2(error) : /* @__PURE__ */ jsxs39(Fragment17, { children: [
+      /* @__PURE__ */ jsx87("div", { className: cx27(styles.menu), children: loading ? renderLoading ? renderLoading() : defaultRenderLoading2() : error ? renderError ? renderError(error) : defaultRenderError2(error) : /* @__PURE__ */ jsxs39(Fragment17, { children: [
         switchableOrganizations.map((organization) => {
           const isSelected = false;
-          return /* @__PURE__ */ jsx86(
+          return /* @__PURE__ */ jsx87(
             Button_default,
             {
               onClick: () => handleOrganizationSwitch(organization),
@@ -11183,9 +11423,9 @@ var BaseOrganizationSwitcher = ({
           );
         }),
         menuItems.length > 0 && /* @__PURE__ */ jsxs39(Fragment17, { children: [
-          /* @__PURE__ */ jsx86("div", { className: cx27(styles.menuDivider) }),
+          /* @__PURE__ */ jsx87("div", { className: cx27(styles.menuDivider) }),
           menuItems.map(
-            (item, index) => /* @__PURE__ */ jsx86("div", { children: item.href ? /* @__PURE__ */ jsxs39(
+            (item, index) => /* @__PURE__ */ jsx87("div", { children: item.href ? /* @__PURE__ */ jsxs39(
               "a",
               {
                 href: item.href,
@@ -11199,10 +11439,10 @@ var BaseOrganizationSwitcher = ({
                 onBlur: () => setHoveredItemIndex(null),
                 children: [
                   item.icon,
-                  /* @__PURE__ */ jsx86("span", { children: item.label })
+                  /* @__PURE__ */ jsx87("span", { children: item.label })
                 ]
               }
-            ) : /* @__PURE__ */ jsx86(
+            ) : /* @__PURE__ */ jsx87(
               Button_default,
               {
                 onClick: () => handleMenuItemClick(item),
@@ -11376,7 +11616,7 @@ var useStyles25 = (theme, colorScheme) => {
 var BaseCreateOrganization_styles_default = useStyles25;
 
 // src/components/presentation/CreateOrganization/BaseCreateOrganization.tsx
-import { jsx as jsx87, jsxs as jsxs40 } from "react/jsx-runtime";
+import { jsx as jsx88, jsxs as jsxs40 } from "react/jsx-runtime";
 var BaseCreateOrganization = ({
   cardLayout = true,
   className = "",
@@ -11463,13 +11703,13 @@ var BaseCreateOrganization = ({
       console.error("Form submission error:", submitError);
     }
   };
-  const createOrganizationContent = /* @__PURE__ */ jsx87("div", { className: cx28(styles.root, cardLayout && styles.card, className), style, children: /* @__PURE__ */ jsxs40("div", { className: cx28(styles.content), children: [
+  const createOrganizationContent = /* @__PURE__ */ jsx88("div", { className: cx28(styles.root, cardLayout && styles.card, className), style, children: /* @__PURE__ */ jsxs40("div", { className: cx28(styles.content), children: [
     /* @__PURE__ */ jsxs40("form", { id: "create-organization-form", className: cx28(styles.form), onSubmit: handleSubmit, children: [
       error && /* @__PURE__ */ jsxs40(Alert_default, { variant: "error", className: styles.errorAlert, children: [
-        /* @__PURE__ */ jsx87(Alert_default.Title, { children: "Error" }),
-        /* @__PURE__ */ jsx87(Alert_default.Description, { children: error })
+        /* @__PURE__ */ jsx88(Alert_default.Title, { children: "Error" }),
+        /* @__PURE__ */ jsx88(Alert_default.Description, { children: error })
       ] }),
-      /* @__PURE__ */ jsx87("div", { className: cx28(styles.fieldGroup), children: /* @__PURE__ */ jsx87(
+      /* @__PURE__ */ jsx88("div", { className: cx28(styles.fieldGroup), children: /* @__PURE__ */ jsx88(
         TextField_default,
         {
           label: `${t("organization.create.name.label")}`,
@@ -11482,7 +11722,7 @@ var BaseCreateOrganization = ({
           className: cx28(styles.input)
         }
       ) }),
-      /* @__PURE__ */ jsx87("div", { className: cx28(styles.fieldGroup), children: /* @__PURE__ */ jsx87(
+      /* @__PURE__ */ jsx88("div", { className: cx28(styles.fieldGroup), children: /* @__PURE__ */ jsx88(
         TextField_default,
         {
           label: `${t("organization.create.handle.label") || "Organization Handle"}`,
@@ -11496,9 +11736,9 @@ var BaseCreateOrganization = ({
           className: cx28(styles.input)
         }
       ) }),
-      /* @__PURE__ */ jsx87("div", { className: cx28(styles.fieldGroup), children: /* @__PURE__ */ jsxs40(FormControl_default, { error: formErrors.description, children: [
-        /* @__PURE__ */ jsx87(InputLabel_default, { required: true, children: t("organization.create.description.label") }),
-        /* @__PURE__ */ jsx87(
+      /* @__PURE__ */ jsx88("div", { className: cx28(styles.fieldGroup), children: /* @__PURE__ */ jsxs40(FormControl_default, { error: formErrors.description, children: [
+        /* @__PURE__ */ jsx88(InputLabel_default, { required: true, children: t("organization.create.description.label") }),
+        /* @__PURE__ */ jsx88(
           "textarea",
           {
             className: cx28(styles.textarea, formErrors.description && styles.textareaError),
@@ -11513,14 +11753,14 @@ var BaseCreateOrganization = ({
       renderAdditionalFields && renderAdditionalFields()
     ] }),
     /* @__PURE__ */ jsxs40("div", { className: cx28(styles.actions), children: [
-      onCancel && /* @__PURE__ */ jsx87(Button_default, { type: "button", variant: "outline", onClick: onCancel, disabled: loading, children: t("organization.create.cancel") }),
-      /* @__PURE__ */ jsx87(Button_default, { type: "submit", variant: "solid", color: "primary", disabled: loading, form: "create-organization-form", children: loading ? t("organization.create.creating") : t("organization.create.button") })
+      onCancel && /* @__PURE__ */ jsx88(Button_default, { type: "button", variant: "outline", onClick: onCancel, disabled: loading, children: t("organization.create.cancel") }),
+      /* @__PURE__ */ jsx88(Button_default, { type: "submit", variant: "solid", color: "primary", disabled: loading, form: "create-organization-form", children: loading ? t("organization.create.creating") : t("organization.create.button") })
     ] })
   ] }) });
   if (mode === "popup") {
-    return /* @__PURE__ */ jsx87(Dialog_default, { open, onOpenChange, children: /* @__PURE__ */ jsxs40(Dialog_default.Content, { children: [
-      /* @__PURE__ */ jsx87(Dialog_default.Heading, { children: title }),
-      /* @__PURE__ */ jsx87("div", { className: styles.popup, children: createOrganizationContent })
+    return /* @__PURE__ */ jsx88(Dialog_default, { open, onOpenChange, children: /* @__PURE__ */ jsxs40(Dialog_default.Content, { children: [
+      /* @__PURE__ */ jsx88(Dialog_default.Heading, { children: title }),
+      /* @__PURE__ */ jsx88("div", { className: styles.popup, children: createOrganizationContent })
     ] }) });
   }
   return createOrganizationContent;
@@ -11556,7 +11796,7 @@ var createOrganization = async ({ fetcher, ...requestConfig }) => {
 var createOrganization_default = createOrganization;
 
 // src/components/presentation/CreateOrganization/CreateOrganization.tsx
-import { Fragment as Fragment18, jsx as jsx88 } from "react/jsx-runtime";
+import { Fragment as Fragment18, jsx as jsx89 } from "react/jsx-runtime";
 var CreateOrganization = ({
   onCreateOrganization,
   fallback = null,
@@ -11572,7 +11812,7 @@ var CreateOrganization = ({
     return fallback;
   }
   if (!isSignedIn) {
-    return /* @__PURE__ */ jsx88(Fragment18, {});
+    return /* @__PURE__ */ jsx89(Fragment18, {});
   }
   const parentId = defaultParentId || currentOrganization?.id || "";
   const handleSubmit = async (payload) => {
@@ -11606,7 +11846,7 @@ var CreateOrganization = ({
       setLoading(false);
     }
   };
-  return /* @__PURE__ */ jsx88(
+  return /* @__PURE__ */ jsx89(
     BaseCreateOrganization,
     {
       onSubmit: handleSubmit,
@@ -11788,7 +12028,7 @@ var useStyles26 = (theme, colorScheme, disabled, readOnly, hasError) => {
 var KeyValueInput_styles_default = useStyles26;
 
 // src/components/primitives/KeyValueInput/KeyValueInput.tsx
-import { jsx as jsx89, jsxs as jsxs41 } from "react/jsx-runtime";
+import { jsx as jsx90, jsxs as jsxs41 } from "react/jsx-runtime";
 var KeyValueInput = ({
   className = "",
   disabled = false,
@@ -11866,7 +12106,7 @@ var KeyValueInput = ({
   return /* @__PURE__ */ jsxs41("div", { className: cx29(withVendorCSSClassPrefix28(bem20("key-value-input")), styles.container, className), children: [
     label && /* @__PURE__ */ jsxs41("label", { className: cx29(withVendorCSSClassPrefix28(bem20("key-value-input", "label")), styles.label), children: [
       label,
-      required && /* @__PURE__ */ jsx89(
+      required && /* @__PURE__ */ jsx90(
         "span",
         {
           className: cx29(withVendorCSSClassPrefix28(bem20("key-value-input", "required")), styles.requiredIndicator),
@@ -11875,7 +12115,7 @@ var KeyValueInput = ({
       )
     ] }),
     /* @__PURE__ */ jsxs41("div", { className: cx29(withVendorCSSClassPrefix28(bem20("key-value-input", "pairs-list")), styles.pairsList), children: [
-      pairs.length === 0 && readOnly ? /* @__PURE__ */ jsx89("div", { className: cx29(withVendorCSSClassPrefix28(bem20("key-value-input", "empty-state")), styles.emptyState), children: "No attributes defined" }) : readOnly ? pairs.map((pair, index) => /* @__PURE__ */ jsxs41(
+      pairs.length === 0 && readOnly ? /* @__PURE__ */ jsx90("div", { className: cx29(withVendorCSSClassPrefix28(bem20("key-value-input", "empty-state")), styles.emptyState), children: "No attributes defined" }) : readOnly ? pairs.map((pair, index) => /* @__PURE__ */ jsxs41(
         "div",
         {
           className: cx29(withVendorCSSClassPrefix28(bem20("key-value-input", "readonly-pair")), styles.readOnlyPair),
@@ -11890,7 +12130,7 @@ var KeyValueInput = ({
                 ]
               }
             ),
-            /* @__PURE__ */ jsx89(
+            /* @__PURE__ */ jsx90(
               "span",
               {
                 className: cx29(withVendorCSSClassPrefix28(bem20("key-value-input", "readonly-value")), styles.readOnlyValue),
@@ -11905,7 +12145,7 @@ var KeyValueInput = ({
         {
           className: cx29(withVendorCSSClassPrefix28(bem20("key-value-input", "pair-row")), styles.pairRow),
           children: [
-            /* @__PURE__ */ jsx89(
+            /* @__PURE__ */ jsx90(
               TextField_default,
               {
                 placeholder: keyPlaceholder,
@@ -11916,7 +12156,7 @@ var KeyValueInput = ({
                 "aria-label": `${keyLabel} ${index + 1}`
               }
             ),
-            /* @__PURE__ */ jsx89(
+            /* @__PURE__ */ jsx90(
               TextField_default,
               {
                 placeholder: valuePlaceholder,
@@ -11927,7 +12167,7 @@ var KeyValueInput = ({
                 "aria-label": `${valueLabel} ${index + 1}`
               }
             ),
-            !readOnly && /* @__PURE__ */ jsx89(
+            !readOnly && /* @__PURE__ */ jsx90(
               "button",
               {
                 type: "button",
@@ -11935,7 +12175,7 @@ var KeyValueInput = ({
                 disabled,
                 className: cx29(withVendorCSSClassPrefix28(bem20("key-value-input", "remove-button")), styles.removeButton),
                 "aria-label": `${removeButtonText} ${pair.key}`,
-                children: /* @__PURE__ */ jsx89(X_default, { width: 16, height: 16 })
+                children: /* @__PURE__ */ jsx90(X_default, { width: 16, height: 16 })
               }
             )
           ]
@@ -11943,7 +12183,7 @@ var KeyValueInput = ({
         `${pair.key}-${index}`
       )),
       !readOnly && /* @__PURE__ */ jsxs41("div", { className: cx29(withVendorCSSClassPrefix28(bem20("key-value-input", "add-row")), styles.addRow), children: [
-        /* @__PURE__ */ jsx89(
+        /* @__PURE__ */ jsx90(
           TextField_default,
           {
             placeholder: keyPlaceholder,
@@ -11954,7 +12194,7 @@ var KeyValueInput = ({
             "aria-label": "New key"
           }
         ),
-        /* @__PURE__ */ jsx89(
+        /* @__PURE__ */ jsx90(
           TextField_default,
           {
             placeholder: valuePlaceholder,
@@ -11970,7 +12210,7 @@ var KeyValueInput = ({
             }
           }
         ),
-        /* @__PURE__ */ jsx89(
+        /* @__PURE__ */ jsx90(
           "button",
           {
             type: "button",
@@ -11978,12 +12218,12 @@ var KeyValueInput = ({
             disabled: isAddDisabled,
             className: cx29(withVendorCSSClassPrefix28(bem20("key-value-input", "add-button")), styles.addButton),
             "aria-label": "Add new key-value pair",
-            children: /* @__PURE__ */ jsx89(Plus_default, { width: 16, height: 16 })
+            children: /* @__PURE__ */ jsx90(Plus_default, { width: 16, height: 16 })
           }
         )
       ] })
     ] }),
-    (helperText || error) && /* @__PURE__ */ jsx89("div", { className: cx29(withVendorCSSClassPrefix28(bem20("key-value-input", "helper-text")), styles.helperText), children: error || helperText }),
+    (helperText || error) && /* @__PURE__ */ jsx90("div", { className: cx29(withVendorCSSClassPrefix28(bem20("key-value-input", "helper-text")), styles.helperText), children: error || helperText }),
     maxPairs && /* @__PURE__ */ jsxs41("div", { className: cx29(withVendorCSSClassPrefix28(bem20("key-value-input", "counter")), styles.counterText), children: [
       pairs.length,
       " of ",
@@ -12151,7 +12391,7 @@ var useStyles27 = (theme, colorScheme) => {
 var BaseOrganizationProfile_styles_default = useStyles27;
 
 // src/components/presentation/OrganizationProfile/BaseOrganizationProfile.tsx
-import { Fragment as Fragment19, jsx as jsx90, jsxs as jsxs42 } from "react/jsx-runtime";
+import { Fragment as Fragment19, jsx as jsx91, jsxs as jsxs42 } from "react/jsx-runtime";
 var BaseOrganizationProfile = ({
   fallback = null,
   className = "",
@@ -12202,7 +12442,7 @@ var BaseOrganizationProfile = ({
   const styles = BaseOrganizationProfile_styles_default(theme, colorScheme);
   const [editedOrganization, setEditedOrganization] = useState27(organization);
   const [editingFields, setEditingFields] = useState27({});
-  const PencilIcon = () => /* @__PURE__ */ jsx90(
+  const PencilIcon = () => /* @__PURE__ */ jsx91(
     "svg",
     {
       width: "16",
@@ -12213,7 +12453,7 @@ var BaseOrganizationProfile = ({
       strokeWidth: "2",
       strokeLinecap: "round",
       strokeLinejoin: "round",
-      children: /* @__PURE__ */ jsx90("path", { d: "M17 3a2.828 2.828 0 1 1 4 4L7.5 20.5 2 22l1.5-5.5L17 3z" })
+      children: /* @__PURE__ */ jsx91("path", { d: "M17 3a2.828 2.828 0 1 1 4 4L7.5 20.5 2 22l1.5-5.5L17 3z" })
     }
   );
   const toggleFieldEdit = useCallback15((fieldName) => {
@@ -12276,7 +12516,7 @@ var BaseOrganizationProfile = ({
       let fieldInput;
       if (key === "attributes") {
         const attributesValue = typeof fieldValue === "object" && fieldValue !== null ? fieldValue : {};
-        fieldInput = /* @__PURE__ */ jsx90(
+        fieldInput = /* @__PURE__ */ jsx91(
           KeyValueInput_default,
           {
             value: attributesValue,
@@ -12314,26 +12554,26 @@ var BaseOrganizationProfile = ({
           }
         );
       } else {
-        fieldInput = /* @__PURE__ */ jsx90(TextField_default, { ...commonProps });
+        fieldInput = /* @__PURE__ */ jsx91(TextField_default, { ...commonProps });
       }
       return /* @__PURE__ */ jsxs42(Fragment19, { children: [
-        /* @__PURE__ */ jsx90("span", { className: cx30(styles.label), children: label }),
-        /* @__PURE__ */ jsx90("div", { className: cx30(styles.value), children: fieldInput })
+        /* @__PURE__ */ jsx91("span", { className: cx30(styles.label), children: label }),
+        /* @__PURE__ */ jsx91("div", { className: cx30(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__ */ jsx90(KeyValueInput_default, { value, readOnly: true, label: "" }) : String(renderedValue);
+      displayValue = key === "attributes" && typeof value === "object" && value !== null ? /* @__PURE__ */ jsx91(KeyValueInput_default, { value, readOnly: true, label: "" }) : String(renderedValue);
     } else if (isFieldEditable) {
       displayValue = getFieldPlaceholder(key);
     } else {
       displayValue = "-";
     }
     return /* @__PURE__ */ jsxs42(Fragment19, { children: [
-      /* @__PURE__ */ jsx90("span", { className: cx30(styles.label), children: label }),
-      /* @__PURE__ */ jsx90("div", { className: cx30(styles.value, !hasValue && styles.valueEmpty), children: !hasValue && isFieldEditable && onStartEdit ? /* @__PURE__ */ jsx90(
+      /* @__PURE__ */ jsx91("span", { className: cx30(styles.label), children: label }),
+      /* @__PURE__ */ jsx91("div", { className: cx30(styles.value, !hasValue && styles.valueEmpty), children: !hasValue && isFieldEditable && onStartEdit ? /* @__PURE__ */ jsx91(
         Button_default,
         {
           onClick: onStartEdit,
@@ -12357,7 +12597,7 @@ var BaseOrganizationProfile = ({
       return null;
     }
     return /* @__PURE__ */ jsxs42("div", { className: cx30(styles.field), children: [
-      /* @__PURE__ */ jsx90("div", { className: cx30(styles.fieldContent), children: renderField(
+      /* @__PURE__ */ jsx91("div", { className: cx30(styles.fieldContent), children: renderField(
         field,
         isFieldEditing,
         (value) => {
@@ -12367,8 +12607,8 @@ var BaseOrganizationProfile = ({
         },
         () => toggleFieldEdit(field.key)
       ) }),
-      isFieldEditable && /* @__PURE__ */ jsx90("div", { className: cx30(styles.fieldActions), children: isFieldEditing ? /* @__PURE__ */ jsxs42(Fragment19, { children: [
-        /* @__PURE__ */ jsx90(
+      isFieldEditable && /* @__PURE__ */ jsx91("div", { className: cx30(styles.fieldActions), children: isFieldEditing ? /* @__PURE__ */ jsxs42(Fragment19, { children: [
+        /* @__PURE__ */ jsx91(
           Button_default,
           {
             onClick: () => handleFieldSave(field.key),
@@ -12379,7 +12619,7 @@ var BaseOrganizationProfile = ({
             children: saveButtonText
           }
         ),
-        /* @__PURE__ */ jsx90(
+        /* @__PURE__ */ jsx91(
           Button_default,
           {
             onClick: () => handleFieldCancel(field.key),
@@ -12390,7 +12630,7 @@ var BaseOrganizationProfile = ({
             children: cancelButtonText
           }
         )
-      ] }) : hasValue && /* @__PURE__ */ jsx90(
+      ] }) : hasValue && /* @__PURE__ */ jsx91(
         Button_default,
         {
           onClick: () => toggleFieldEdit(field.key),
@@ -12399,7 +12639,7 @@ var BaseOrganizationProfile = ({
           size: "small",
           title: "Edit field",
           className: cx30(styles.editButton),
-          children: /* @__PURE__ */ jsx90(PencilIcon, {})
+          children: /* @__PURE__ */ jsx91(PencilIcon, {})
         }
       ) })
     ] }, field.key);
@@ -12409,21 +12649,21 @@ var BaseOrganizationProfile = ({
   }
   const profileContent = /* @__PURE__ */ jsxs42(Card_default, { className: cx30(styles.root, cardLayout && styles.card, className), children: [
     /* @__PURE__ */ jsxs42("div", { className: cx30(styles.header), children: [
-      /* @__PURE__ */ jsx90(Avatar, { name: getOrgInitials(organization.name), size: 80, alt: `${organization.name} logo` }),
+      /* @__PURE__ */ jsx91(Avatar, { name: getOrgInitials(organization.name), size: 80, alt: `${organization.name} logo` }),
       /* @__PURE__ */ jsxs42("div", { className: cx30(styles.orgInfo), children: [
-        /* @__PURE__ */ jsx90("h2", { className: cx30(styles.name), children: organization.name }),
+        /* @__PURE__ */ jsx91("h2", { className: cx30(styles.name), children: organization.name }),
         organization.orgHandle && /* @__PURE__ */ jsxs42("p", { className: cx30(styles.handle), children: [
           "@",
           organization.orgHandle
         ] })
       ] })
     ] }),
-    /* @__PURE__ */ jsx90("div", { className: cx30(styles.infoContainer), children: fields.map((field, index) => renderOrganizationField(field)) })
+    /* @__PURE__ */ jsx91("div", { className: cx30(styles.infoContainer), children: fields.map((field, index) => renderOrganizationField(field)) })
   ] });
   if (mode === "popup") {
-    return /* @__PURE__ */ jsx90(Dialog_default, { open, onOpenChange, children: /* @__PURE__ */ jsxs42(Dialog_default.Content, { children: [
-      /* @__PURE__ */ jsx90(Dialog_default.Heading, { children: title }),
-      /* @__PURE__ */ jsx90("div", { className: cx30(styles.popup), children: profileContent })
+    return /* @__PURE__ */ jsx91(Dialog_default, { open, onOpenChange, children: /* @__PURE__ */ jsxs42(Dialog_default.Content, { children: [
+      /* @__PURE__ */ jsx91(Dialog_default.Heading, { children: title }),
+      /* @__PURE__ */ jsx91("div", { className: cx30(styles.popup), children: profileContent })
     ] }) });
   }
   return profileContent;
@@ -12492,7 +12732,7 @@ var updateOrganization = async ({
 var updateOrganization_default = updateOrganization;
 
 // src/components/presentation/OrganizationProfile/OrganizationProfile.tsx
-import { jsx as jsx91 } from "react/jsx-runtime";
+import { jsx as jsx92 } from "react/jsx-runtime";
 var OrganizationProfile = ({
   organizationId,
   mode = "default",
@@ -12500,8 +12740,8 @@ var OrganizationProfile = ({
   onOpenChange,
   onUpdate,
   popupTitle,
-  loadingFallback = /* @__PURE__ */ jsx91("div", { children: "Loading organization..." }),
-  errorFallback = /* @__PURE__ */ jsx91("div", { children: "Failed to load organization data" }),
+  loadingFallback = /* @__PURE__ */ jsx92("div", { children: "Loading organization..." }),
+  errorFallback = /* @__PURE__ */ jsx92("div", { children: "Failed to load organization data" }),
   ...rest
 }) => {
   const { baseUrl } = useAsgardeo_default();
@@ -12552,7 +12792,7 @@ var OrganizationProfile = ({
       throw err;
     }
   };
-  return /* @__PURE__ */ jsx91(
+  return /* @__PURE__ */ jsx92(
     BaseOrganizationProfile_default,
     {
       organization,
@@ -12802,13 +13042,13 @@ var useStyles28 = (theme, colorScheme) => {
 var BaseOrganizationList_styles_default = useStyles28;
 
 // src/components/presentation/OrganizationList/BaseOrganizationList.tsx
-import { jsx as jsx92, jsxs as jsxs43 } from "react/jsx-runtime";
+import { jsx as jsx93, jsxs as jsxs43 } from "react/jsx-runtime";
 var defaultRenderOrganization = (organization, styles, t, onOrganizationSelect, showStatus) => {
   return /* @__PURE__ */ jsxs43("div", { className: cx31(styles.organizationItem), children: [
     /* @__PURE__ */ jsxs43("div", { className: cx31(styles.organizationContent), children: [
-      /* @__PURE__ */ jsx92(Avatar_default, { variant: "square", name: organization.name, size: 48, alt: `${organization.name} logo` }),
+      /* @__PURE__ */ jsx93(Avatar_default, { variant: "square", name: organization.name, size: 48, alt: `${organization.name} logo` }),
       /* @__PURE__ */ jsxs43("div", { className: cx31(styles.organizationInfo), children: [
-        /* @__PURE__ */ jsx92(Typography_default, { variant: "h6", className: cx31(styles.organizationName), children: organization.name }),
+        /* @__PURE__ */ jsx93(Typography_default, { variant: "h6", className: cx31(styles.organizationName), children: organization.name }),
         /* @__PURE__ */ jsxs43(Typography_default, { variant: "body2", color: "textSecondary", className: cx31(styles.organizationHandle), children: [
           "@",
           organization.orgHandle
@@ -12816,7 +13056,7 @@ var defaultRenderOrganization = (organization, styles, t, onOrganizationSelect,
         showStatus && /* @__PURE__ */ jsxs43(Typography_default, { variant: "body2", color: "textSecondary", className: cx31(styles.organizationStatus), children: [
           t("organization.switcher.status.label"),
           " ",
-          /* @__PURE__ */ jsx92(
+          /* @__PURE__ */ jsx93(
             "span",
             {
               className: cx31(
@@ -12829,7 +13069,7 @@ var defaultRenderOrganization = (organization, styles, t, onOrganizationSelect,
         ] })
       ] })
     ] }),
-    organization.canSwitch && /* @__PURE__ */ jsx92("div", { className: cx31(styles.organizationActions), children: /* @__PURE__ */ jsx92(
+    organization.canSwitch && /* @__PURE__ */ jsx93("div", { className: cx31(styles.organizationActions), children: /* @__PURE__ */ jsx93(
       Button_default,
       {
         onClick: (e) => {
@@ -12844,16 +13084,16 @@ var defaultRenderOrganization = (organization, styles, t, onOrganizationSelect,
   ] }, organization.id);
 };
 var defaultRenderLoading = (t, styles) => /* @__PURE__ */ jsxs43("div", { className: cx31(styles.loadingContainer), children: [
-  /* @__PURE__ */ jsx92(Spinner_default, { size: "medium" }),
-  /* @__PURE__ */ jsx92(Typography_default, { variant: "body1", color: "textSecondary", className: cx31(styles.loadingText), children: t("organization.switcher.loading.organizations") })
+  /* @__PURE__ */ jsx93(Spinner_default, { size: "medium" }),
+  /* @__PURE__ */ jsx93(Typography_default, { variant: "body1", color: "textSecondary", className: cx31(styles.loadingText), children: t("organization.switcher.loading.organizations") })
 ] });
-var defaultRenderError = (error, t, styles) => /* @__PURE__ */ jsx92("div", { className: cx31(styles.errorContainer), children: /* @__PURE__ */ jsxs43(Typography_default, { variant: "body1", color: "error", children: [
-  /* @__PURE__ */ jsx92("strong", { children: t("organization.switcher.error.prefix") }),
+var defaultRenderError = (error, t, styles) => /* @__PURE__ */ jsx93("div", { className: cx31(styles.errorContainer), children: /* @__PURE__ */ jsxs43(Typography_default, { variant: "body1", color: "error", children: [
+  /* @__PURE__ */ jsx93("strong", { children: t("organization.switcher.error.prefix") }),
   " ",
   error
 ] }) });
-var defaultRenderLoadMore = (onLoadMore, isLoading, t, styles) => /* @__PURE__ */ jsx92(Button_default, { onClick: onLoadMore, disabled: isLoading, className: cx31(styles.loadMoreButton), type: "button", fullWidth: true, children: isLoading ? t("organization.switcher.loading.more") : t("organization.switcher.load.more") });
-var defaultRenderEmpty = (t, styles) => /* @__PURE__ */ jsx92("div", { className: cx31(styles.emptyContainer), children: /* @__PURE__ */ jsx92(Typography_default, { variant: "body1", color: "textSecondary", className: cx31(styles.emptyText), children: t("organization.switcher.no.organizations") }) });
+var defaultRenderLoadMore = (onLoadMore, isLoading, t, styles) => /* @__PURE__ */ jsx93(Button_default, { onClick: onLoadMore, disabled: isLoading, className: cx31(styles.loadMoreButton), type: "button", fullWidth: true, children: isLoading ? t("organization.switcher.loading.more") : t("organization.switcher.load.more") });
+var defaultRenderEmpty = (t, styles) => /* @__PURE__ */ jsx93("div", { className: cx31(styles.emptyContainer), children: /* @__PURE__ */ jsx93(Typography_default, { variant: "body1", color: "textSecondary", className: cx31(styles.emptyText), children: t("organization.switcher.no.organizations") }) });
 var BaseOrganizationList = ({
   className = "",
   allOrganizations,
@@ -12896,53 +13136,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__ */ jsx92("div", { className: cx31(styles.root, className), style, children: renderLoadingWithStyles() });
+    const loadingContent = /* @__PURE__ */ jsx93("div", { className: cx31(styles.root, className), style, children: renderLoadingWithStyles() });
     if (mode === "popup") {
-      return /* @__PURE__ */ jsx92(Dialog_default, { open, onOpenChange, children: /* @__PURE__ */ jsxs43(Dialog_default.Content, { children: [
-        /* @__PURE__ */ jsx92(Dialog_default.Heading, { children: title }),
-        /* @__PURE__ */ jsx92("div", { className: cx31(styles.popupContent), children: loadingContent })
+      return /* @__PURE__ */ jsx93(Dialog_default, { open, onOpenChange, children: /* @__PURE__ */ jsxs43(Dialog_default.Content, { children: [
+        /* @__PURE__ */ jsx93(Dialog_default.Heading, { children: title }),
+        /* @__PURE__ */ jsx93("div", { className: cx31(styles.popupContent), children: loadingContent })
       ] }) });
     }
     return loadingContent;
   }
   if (error && organizationsWithSwitchAccess?.length === 0) {
-    const errorContent = /* @__PURE__ */ jsx92("div", { className: cx31(styles.root, className), style, children: renderErrorWithStyles(error) });
+    const errorContent = /* @__PURE__ */ jsx93("div", { className: cx31(styles.root, className), style, children: renderErrorWithStyles(error) });
     if (mode === "popup") {
-      return /* @__PURE__ */ jsx92(Dialog_default, { open, onOpenChange, children: /* @__PURE__ */ jsxs43(Dialog_default.Content, { children: [
-        /* @__PURE__ */ jsx92(Dialog_default.Heading, { children: title }),
-        /* @__PURE__ */ jsx92("div", { className: cx31(styles.popupContent), children: errorContent })
+      return /* @__PURE__ */ jsx93(Dialog_default, { open, onOpenChange, children: /* @__PURE__ */ jsxs43(Dialog_default.Content, { children: [
+        /* @__PURE__ */ jsx93(Dialog_default.Heading, { children: title }),
+        /* @__PURE__ */ jsx93("div", { className: cx31(styles.popupContent), children: errorContent })
       ] }) });
     }
     return errorContent;
   }
   if (!isLoading && organizationsWithSwitchAccess?.length === 0) {
-    const emptyContent = /* @__PURE__ */ jsx92("div", { className: cx31(styles.root, className), style, children: renderEmptyWithStyles() });
+    const emptyContent = /* @__PURE__ */ jsx93("div", { className: cx31(styles.root, className), style, children: renderEmptyWithStyles() });
     if (mode === "popup") {
-      return /* @__PURE__ */ jsx92(Dialog_default, { open, onOpenChange, children: /* @__PURE__ */ jsxs43(Dialog_default.Content, { children: [
-        /* @__PURE__ */ jsx92(Dialog_default.Heading, { children: title }),
-        /* @__PURE__ */ jsx92("div", { className: cx31(styles.popupContent), children: emptyContent })
+      return /* @__PURE__ */ jsx93(Dialog_default, { open, onOpenChange, children: /* @__PURE__ */ jsxs43(Dialog_default.Content, { children: [
+        /* @__PURE__ */ jsx93(Dialog_default.Heading, { children: title }),
+        /* @__PURE__ */ jsx93("div", { className: cx31(styles.popupContent), children: emptyContent })
       ] }) });
     }
     return emptyContent;
   }
   const organizationListContent = /* @__PURE__ */ jsxs43("div", { className: cx31(styles.root, className), style, children: [
     /* @__PURE__ */ jsxs43("div", { className: cx31(styles.header), children: [
-      /* @__PURE__ */ jsx92("div", { className: cx31(styles.headerInfo), children: /* @__PURE__ */ jsx92(Typography_default, { variant: "body2", color: "textSecondary", className: cx31(styles.subtitle), children: t("organization.switcher.showing.count", {
+      /* @__PURE__ */ jsx93("div", { className: cx31(styles.headerInfo), children: /* @__PURE__ */ jsx93(Typography_default, { variant: "body2", color: "textSecondary", className: cx31(styles.subtitle), children: t("organization.switcher.showing.count", {
         showing: organizationsWithSwitchAccess?.length,
         total: allOrganizations?.organizations?.length || 0
       }) }) }),
-      onRefresh && /* @__PURE__ */ jsx92(Button_default, { onClick: onRefresh, className: cx31(styles.refreshButton), type: "button", variant: "outline", size: "small", children: t("organization.switcher.refresh.button") })
+      onRefresh && /* @__PURE__ */ jsx93(Button_default, { onClick: onRefresh, className: cx31(styles.refreshButton), type: "button", variant: "outline", size: "small", children: t("organization.switcher.refresh.button") })
     ] }),
-    /* @__PURE__ */ jsx92("div", { className: cx31(styles.listContainer), children: organizationsWithSwitchAccess?.map(
+    /* @__PURE__ */ jsx93("div", { className: cx31(styles.listContainer), children: organizationsWithSwitchAccess?.map(
       (organization, index) => renderOrganizationWithStyles(organization, index)
     ) }),
-    error && organizationsWithSwitchAccess?.length > 0 && /* @__PURE__ */ jsx92("div", { className: cx31(styles.errorMargin), children: renderErrorWithStyles(error) }),
-    hasMore && fetchMore && /* @__PURE__ */ jsx92("div", { className: cx31(styles.loadMoreMargin), children: renderLoadMoreWithStyles(fetchMore, isLoadingMore) })
+    error && organizationsWithSwitchAccess?.length > 0 && /* @__PURE__ */ jsx93("div", { className: cx31(styles.errorMargin), children: renderErrorWithStyles(error) }),
+    hasMore && fetchMore && /* @__PURE__ */ jsx93("div", { className: cx31(styles.loadMoreMargin), children: renderLoadMoreWithStyles(fetchMore, isLoadingMore) })
   ] });
   if (mode === "popup") {
-    return /* @__PURE__ */ jsx92(Dialog_default, { open, onOpenChange, children: /* @__PURE__ */ jsxs43(Dialog_default.Content, { children: [
-      /* @__PURE__ */ jsx92(Dialog_default.Heading, { children: title }),
-      /* @__PURE__ */ jsx92("div", { className: cx31(styles.popupContent), children: organizationListContent })
+    return /* @__PURE__ */ jsx93(Dialog_default, { open, onOpenChange, children: /* @__PURE__ */ jsxs43(Dialog_default.Content, { children: [
+      /* @__PURE__ */ jsx93(Dialog_default.Heading, { children: title }),
+      /* @__PURE__ */ jsx93("div", { className: cx31(styles.popupContent), children: organizationListContent })
     ] }) });
   }
   return organizationListContent;
@@ -12974,10 +13214,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;
@@ -13002,10 +13239,7 @@ var useStyles29 = (theme, colorScheme) => {
       `,
       loadingOverlay: css29`
         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;
@@ -13019,7 +13253,7 @@ var useStyles29 = (theme, colorScheme) => {
 var OrganizationList_styles_default = useStyles29;
 
 // src/components/presentation/OrganizationList/OrganizationList.tsx
-import { jsx as jsx93 } from "react/jsx-runtime";
+import { jsx as jsx94 } from "react/jsx-runtime";
 var OrganizationList = ({
   autoFetch = true,
   filter = "",
@@ -13041,7 +13275,7 @@ var OrganizationList = ({
       setAllOrganizations(await getAllOrganizations2());
     })();
   }, []);
-  return /* @__PURE__ */ jsx93("div", { className: cx32(styles.root, className), style, children: /* @__PURE__ */ jsx93("div", { className: cx32(styles.container), children: /* @__PURE__ */ jsx93(
+  return /* @__PURE__ */ jsx94("div", { className: cx32(styles.root, className), style, children: /* @__PURE__ */ jsx94("div", { className: cx32(styles.container), children: /* @__PURE__ */ jsx94(
     BaseOrganizationList_default,
     {
       allOrganizations,
@@ -13056,7 +13290,7 @@ var OrganizationList = ({
 var OrganizationList_default = OrganizationList;
 
 // src/components/primitives/Icons/BuildingAlt.tsx
-import { jsx as jsx94, jsxs as jsxs44 } from "react/jsx-runtime";
+import { jsx as jsx95, jsxs as jsxs44 } from "react/jsx-runtime";
 var BuildingAlt = ({ color = "currentColor", height = 24, width = 24 }) => /* @__PURE__ */ jsxs44(
   "svg",
   {
@@ -13070,13 +13304,13 @@ var BuildingAlt = ({ color = "currentColor", height = 24, width = 24 }) => /* @_
     strokeLinecap: "round",
     strokeLinejoin: "round",
     children: [
-      /* @__PURE__ */ jsx94("path", { d: "M6 22V4a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2v18Z" }),
-      /* @__PURE__ */ jsx94("path", { d: "M6 12H4a2 2 0 0 0-2 2v6a2 2 0 0 0 2 2h2" }),
-      /* @__PURE__ */ jsx94("path", { d: "M18 9h2a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2h-2" }),
-      /* @__PURE__ */ jsx94("path", { d: "M10 6h4" }),
-      /* @__PURE__ */ jsx94("path", { d: "M10 10h4" }),
-      /* @__PURE__ */ jsx94("path", { d: "M10 14h4" }),
-      /* @__PURE__ */ jsx94("path", { d: "M10 18h4" })
+      /* @__PURE__ */ jsx95("path", { d: "M6 22V4a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2v18Z" }),
+      /* @__PURE__ */ jsx95("path", { d: "M6 12H4a2 2 0 0 0-2 2v6a2 2 0 0 0 2 2h2" }),
+      /* @__PURE__ */ jsx95("path", { d: "M18 9h2a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2h-2" }),
+      /* @__PURE__ */ jsx95("path", { d: "M10 6h4" }),
+      /* @__PURE__ */ jsx95("path", { d: "M10 10h4" }),
+      /* @__PURE__ */ jsx95("path", { d: "M10 14h4" }),
+      /* @__PURE__ */ jsx95("path", { d: "M10 18h4" })
     ]
   }
 );
@@ -13084,7 +13318,7 @@ BuildingAlt.displayName = "BuildingAlt";
 var BuildingAlt_default = BuildingAlt;
 
 // src/components/presentation/OrganizationSwitcher/OrganizationSwitcher.tsx
-import { Fragment as Fragment20, jsx as jsx95, jsxs as jsxs45 } from "react/jsx-runtime";
+import { Fragment as Fragment20, jsx as jsx96, jsxs as jsxs45 } from "react/jsx-runtime";
 var OrganizationSwitcher = ({
   currentOrganization: propCurrentOrganization,
   fallback = null,
@@ -13108,7 +13342,7 @@ var OrganizationSwitcher = ({
     return fallback;
   }
   if (!isSignedIn) {
-    return /* @__PURE__ */ jsx95(Fragment20, {});
+    return /* @__PURE__ */ jsx96(Fragment20, {});
   }
   const organizations = propOrganizations || contextOrganizations || [];
   const currentOrganization = propCurrentOrganization || contextCurrentOrganization;
@@ -13122,19 +13356,19 @@ var OrganizationSwitcher = ({
   const defaultMenuItems = [];
   if (currentOrganization) {
     defaultMenuItems.push({
-      icon: /* @__PURE__ */ jsx95(BuildingAlt_default, {}),
+      icon: /* @__PURE__ */ jsx96(BuildingAlt_default, {}),
       label: t("organization.switcher.manage.organizations"),
       onClick: handleManageOrganizations
     });
   }
   defaultMenuItems.push({
-    icon: /* @__PURE__ */ jsx95("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: /* @__PURE__ */ jsx95("path", { d: "M12 5v14m-7-7h14" }) }),
+    icon: /* @__PURE__ */ jsx96("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: /* @__PURE__ */ jsx96("path", { d: "M12 5v14m-7-7h14" }) }),
     label: t("organization.switcher.create.organization"),
     onClick: () => setIsCreateOrgOpen(true)
   });
   const menuItems = props.menuItems ? [...defaultMenuItems, ...props.menuItems] : defaultMenuItems;
   return /* @__PURE__ */ jsxs45(Fragment20, { children: [
-    /* @__PURE__ */ jsx95(
+    /* @__PURE__ */ jsx96(
       BaseOrganizationSwitcher_default,
       {
         organizations,
@@ -13147,7 +13381,7 @@ var OrganizationSwitcher = ({
         ...props
       }
     ),
-    /* @__PURE__ */ jsx95(
+    /* @__PURE__ */ jsx96(
       CreateOrganization,
       {
         mode: "popup",
@@ -13161,7 +13395,7 @@ var OrganizationSwitcher = ({
         }
       }
     ),
-    currentOrganization && /* @__PURE__ */ jsx95(
+    currentOrganization && /* @__PURE__ */ jsx96(
       OrganizationProfile_default,
       {
         organizationId: currentOrganization.id,
@@ -13169,11 +13403,11 @@ var OrganizationSwitcher = ({
         open: isProfileOpen,
         onOpenChange: setIsProfileOpen,
         cardLayout: true,
-        loadingFallback: /* @__PURE__ */ jsx95("div", { children: t("organization.profile.loading") }),
-        errorFallback: /* @__PURE__ */ jsx95("div", { children: t("organization.profile.error") })
+        loadingFallback: /* @__PURE__ */ jsx96("div", { children: t("organization.profile.loading") }),
+        errorFallback: /* @__PURE__ */ jsx96("div", { children: t("organization.profile.error") })
       }
     ),
-    /* @__PURE__ */ jsx95(
+    /* @__PURE__ */ jsx96(
       OrganizationList_default,
       {
         mode: "popup",
@@ -13206,7 +13440,7 @@ export {
   BaseOrganizationList_default as BaseOrganizationList,
   BaseOrganizationProfile_default as BaseOrganizationProfile,
   BaseOrganizationSwitcher_default as BaseOrganizationSwitcher,
-  BaseSignIn_default as BaseSignIn,
+  BaseSignIn_default3 as BaseSignIn,
   BaseSignInButton_default as BaseSignInButton,
   BaseSignOutButton_default as BaseSignOutButton,
   BaseSignUp_default as BaseSignUp,