@asgardeo/react 0.5.33 → 0.6.0

package/dist/cjs/index.js

@@ -36,7 +36,7 @@ __export(index_exports, {
   AlertTitle: () => AlertTitle,
   AsgardeoContext: () => AsgardeoContext_default,
   AsgardeoProvider: () => AsgardeoProvider_default,
-  AsgardeoRuntimeError: () => import_browser74.AsgardeoRuntimeError,
+  AsgardeoRuntimeError: () => import_browser75.AsgardeoRuntimeError,
   BaseCreateOrganization: () => BaseCreateOrganization,
   BaseOrganization: () => BaseOrganization_default,
   BaseOrganizationList: () => BaseOrganizationList_default,
@@ -125,17 +125,17 @@ __export(index_exports, {
   UsernamePassword: () => UsernamePassword_default,
   createField: () => createField,
   createOrganization: () => createOrganization_default,
-  createPatchOperations: () => import_browser73.createPatchOperations,
+  createPatchOperations: () => import_browser74.createPatchOperations,
   createSignInOption: () => createSignInOption,
   createSignInOptionFromAuthenticator: () => createSignInOptionFromAuthenticator,
-  getActiveTheme: () => import_browser74.getActiveTheme,
+  getActiveTheme: () => import_browser75.getActiveTheme,
   getAllOrganizations: () => getAllOrganizations_default,
   getMeOrganizations: () => getMeOrganizations_default,
   getMeProfile: () => getScim2Me_default,
   getOrganization: () => getOrganization_default,
   getSchemas: () => getSchemas_default,
-  http: () => import_browser74.http,
-  navigate: () => import_browser74.navigate,
+  http: () => import_browser75.http,
+  navigate: () => import_browser75.navigate,
   updateMeProfile: () => updateMeProfile_default,
   updateOrganization: () => updateOrganization_default,
   useAlertVariant: () => useAlertVariant,
@@ -893,16 +893,22 @@ var AsgardeoReactClient = class extends import_browser6.AsgardeoBrowserClient {
     return Promise.resolve(String(response));
   }
   async signUp(...args) {
-    const configData = await this.asgardeo.getConfigData();
+    const config = await this.asgardeo.getConfigData();
     const firstArg = args[0];
+    const baseUrl = config?.baseUrl;
+    if (config.platform === import_browser6.Platform.AsgardeoV2) {
+      return (0, import_browser6.executeEmbeddedSignUpFlowV2)({
+        baseUrl,
+        payload: firstArg
+      });
+    }
     if (typeof firstArg === "object" && "flowType" in firstArg) {
-      const baseUrl = configData?.baseUrl;
       return (0, import_browser6.executeEmbeddedSignUpFlow)({
         baseUrl,
         payload: firstArg
       });
     }
-    (0, import_browser6.navigate)((0, import_browser6.getRedirectBasedSignUpUrl)(configData));
+    (0, import_browser6.navigate)((0, import_browser6.getRedirectBasedSignUpUrl)(config));
   }
   async request(requestConfig) {
     return this.asgardeo.httpRequest(requestConfig);
@@ -1390,6 +1396,7 @@ var ThemeProvider = ({
     };
   }, [inheritFromBranding, brandingTheme, themeConfig]);
   const theme = (0, import_react11.useMemo)(() => (0, import_browser10.createTheme)(finalThemeConfig, colorScheme === "dark"), [finalThemeConfig, colorScheme]);
+  const direction = finalThemeConfig?.direction || "ltr";
   const handleThemeChange = (0, import_react11.useCallback)((isDark) => {
     setColorScheme(isDark ? "dark" : "light");
   }, []);
@@ -1428,9 +1435,15 @@ var ThemeProvider = ({
   (0, import_react11.useEffect)(() => {
     applyThemeToDOM(theme);
   }, [theme]);
+  (0, import_react11.useEffect)(() => {
+    if (typeof document !== "undefined") {
+      document.documentElement.dir = direction;
+    }
+  }, [direction]);
   const value = {
     theme,
     colorScheme,
+    direction,
     toggleTheme,
     isBrandingLoading,
     brandingError,
@@ -1892,7 +1905,10 @@ var AsgardeoProvider = ({
         ThemeProvider_default,
         {
           inheritFromBranding: preferences?.theme?.inheritFromBranding,
-          theme: preferences?.theme?.overrides,
+          theme: {
+            ...preferences?.theme?.overrides,
+            direction: preferences?.theme?.direction
+          },
           mode: (0, import_browser12.getActiveTheme)(preferences?.theme?.mode),
           children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(FlowProvider_default, { children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(UserProvider_default, { profile: userProfile, onUpdateProfile: handleProfileUpdate, children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
             OrganizationProvider_default,
@@ -3378,13 +3394,13 @@ var import_react34 = require("react");
 var useStyles4 = (theme, colorScheme, helperTextAlign, helperTextMarginLeft, hasError) => {
   return (0, import_react34.useMemo)(() => {
     const formControl = import_css10.css`
-      text-align: left;
+      text-align: start;
       margin-bottom: calc(${theme.vars.spacing.unit} * 2);
     `;
     const helperText = import_css10.css`
       margin-top: calc(${theme.vars.spacing.unit} / 2);
-      text-align: ${helperTextAlign};
-      ${helperTextMarginLeft && `margin-left: ${helperTextMarginLeft};`}
+      text-align: ${helperTextAlign === "left" ? "start" : helperTextAlign};
+      ${helperTextMarginLeft && `margin-inline-start: ${helperTextMarginLeft};`}
     `;
     const helperTextError = import_css10.css`
       color: ${theme.vars.colors.error.main};
@@ -3518,8 +3534,8 @@ var import_css14 = require("@emotion/css");
 var import_react36 = require("react");
 var useStyles6 = (theme, colorScheme, disabled, hasError, hasStartIcon, hasEndIcon) => {
   return (0, import_react36.useMemo)(() => {
-    const leftPadding = hasStartIcon ? `calc(${theme.vars.spacing.unit} * 5)` : `calc(${theme.vars.spacing.unit} * 1.5)`;
-    const rightPadding = hasEndIcon ? `calc(${theme.vars.spacing.unit} * 5)` : `calc(${theme.vars.spacing.unit} * 1.5)`;
+    const inlineStartPadding = hasStartIcon ? `calc(${theme.vars.spacing.unit} * 5)` : `calc(${theme.vars.spacing.unit} * 1.5)`;
+    const inlineEndPadding = hasEndIcon ? `calc(${theme.vars.spacing.unit} * 5)` : `calc(${theme.vars.spacing.unit} * 1.5)`;
     const inputContainer = import_css14.css`
       position: relative;
       display: flex;
@@ -3527,7 +3543,9 @@ var useStyles6 = (theme, colorScheme, disabled, hasError, hasStartIcon, hasEndIc
     `;
     const input = import_css14.css`
       width: 100%;
-      padding: ${theme.vars.spacing.unit} ${rightPadding} ${theme.vars.spacing.unit} ${leftPadding};
+      padding-block: ${theme.vars.spacing.unit};
+      padding-inline-start: ${inlineStartPadding};
+      padding-inline-end: ${inlineEndPadding};
       border: 1px solid ${hasError ? theme.vars.colors.error.main : theme.vars.colors.border};
       border-radius: ${theme.vars.components?.Field?.root?.borderRadius || theme.vars.borderRadius.medium};
       font-size: ${theme.vars.typography.fontSizes.md};
@@ -3598,11 +3616,11 @@ var useStyles6 = (theme, colorScheme, disabled, hasError, hasStartIcon, hasEndIc
     `;
     const startIcon = import_css14.css`
       ${icon};
-      left: ${theme.vars.spacing.unit};
+      inset-inline-start: ${theme.vars.spacing.unit};
     `;
     const endIcon = import_css14.css`
       ${icon};
-      right: ${theme.vars.spacing.unit};
+      inset-inline-end: ${theme.vars.spacing.unit};
     `;
     return {
       inputContainer,
@@ -4317,7 +4335,7 @@ var useStyles11 = (theme, colorScheme, hasError, required) => {
     const inputStyles = import_css24.css`
       width: calc(${theme.vars.spacing.unit} * 2.5);
       height: calc(${theme.vars.spacing.unit} * 2.5);
-      margin-right: ${theme.vars.spacing.unit};
+      margin-inline-end: ${theme.vars.spacing.unit};
       accent-color: ${theme.vars.colors.primary.main};
       cursor: pointer;
 
@@ -5834,8 +5852,9 @@ var useStyles14 = (theme, colorScheme, orientation, variant, color, hasChildren)
       height: 100%;
       min-height: calc(${theme.vars.spacing.unit} * 2);
       width: 1px;
-      border-left: 1px ${borderStyle} ${baseColor};
-      margin: 0 calc(${theme.vars.spacing.unit} * 1);
+      border-inline-start: 1px ${borderStyle} ${baseColor};
+      margin-block: 0;
+      margin-inline: calc(${theme.vars.spacing.unit} * 1);
     `;
     const horizontalDivider = import_css30.css`
       display: flex;
@@ -7716,7 +7735,7 @@ var SignIn2 = ({ className, size = "medium", children, ...rest }) => {
 var SignIn_default2 = SignIn2;
 
 // src/components/presentation/SignUp/BaseSignUp.tsx
-var import_browser58 = require("@asgardeo/browser");
+var import_browser59 = require("@asgardeo/browser");
 var import_css39 = require("@emotion/css");
 var import_react62 = require("react");
 
@@ -8228,6 +8247,110 @@ var renderSignUpComponents = (components, formValues, touchedFields, formErrors,
   )
 ).filter(Boolean);
 
+// src/components/presentation/SignUp/transformer.ts
+var import_browser58 = require("@asgardeo/browser");
+var generateId2 = (prefix) => {
+  const suffix = Math.random().toString(36).substring(2, 6);
+  return `${prefix}_${suffix}`;
+};
+var getInputVariant2 = (type) => {
+  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);
+  const label = getInputLabel2(input.name, input.type, t);
+  const placeholder = getInputPlaceholder2(input.name, input.type, t);
+  return {
+    id: generateId2("input"),
+    type: import_browser58.EmbeddedFlowComponentType.Input,
+    variant,
+    config: {
+      type: input.type === "string" ? "text" : input.type,
+      label,
+      placeholder,
+      required: input.required,
+      identifier: input.name,
+      hint: ""
+    },
+    components: []
+  };
+};
+var convertActionToComponent2 = (action, t) => {
+  const i18nKey = `elements.buttons.${action.id}`;
+  let text = t(i18nKey);
+  if (!text || text === i18nKey) {
+    text = action.id.replace(/_/g, " ");
+    text = text.charAt(0).toUpperCase() + text.slice(1);
+  }
+  return {
+    id: generateId2("action"),
+    type: import_browser58.EmbeddedFlowComponentType.Button,
+    variant: "SECONDARY",
+    config: {
+      type: "button",
+      text,
+      actionId: action.id,
+      actionType: action.type
+    },
+    components: []
+  };
+};
+var transformSimpleToComponentDriven2 = (response, t) => {
+  const inputComponents = response?.data?.inputs?.map((input) => convertSimpleInputToComponent2(input, t)) || [];
+  const actionComponents = response?.data?.actions?.map((action) => convertActionToComponent2(action, t)) || [];
+  const submitButton = inputComponents.length > 0 ? {
+    id: generateId2("button"),
+    type: import_browser58.EmbeddedFlowComponentType.Button,
+    variant: "PRIMARY",
+    config: {
+      type: "submit",
+      text: t("elements.buttons.signUp")
+    },
+    components: []
+  } : null;
+  const formComponents = [];
+  if (inputComponents.length > 0) {
+    formComponents.push(...inputComponents);
+    if (submitButton) formComponents.push(submitButton);
+  }
+  const result = [];
+  if (formComponents.length > 0) {
+    result.push({
+      id: generateId2("form"),
+      type: import_browser58.EmbeddedFlowComponentType.Form,
+      config: {},
+      components: formComponents
+    });
+  }
+  if (actionComponents.length > 0) {
+    result.push(...actionComponents);
+  }
+  return result;
+};
+
 // src/components/presentation/SignUp/BaseSignUp.styles.ts
 var import_css38 = require("@emotion/css");
 var import_react61 = require("react");
@@ -8393,7 +8516,8 @@ var BaseSignUpContent = ({
   messageClassName = "",
   size = "medium",
   variant = "outlined",
-  isInitialized
+  isInitialized,
+  children
 }) => {
   const { theme, colorScheme } = useTheme_default();
   const { t } = useTranslation_default();
@@ -8405,12 +8529,31 @@ var BaseSignUpContent = ({
   const [error, setError] = (0, import_react62.useState)(null);
   const [formData, setFormData] = (0, import_react62.useState)({});
   const initializationAttemptedRef = (0, import_react62.useRef)(false);
+  const normalizeFlowResponse2 = (0, import_react62.useCallback)(
+    (response) => {
+      if (response?.data?.components && Array.isArray(response.data.components)) {
+        return response;
+      }
+      if (response?.data && (response.data.inputs || response.data.actions)) {
+        const transformedComponents = transformSimpleToComponentDriven2(response, t);
+        return {
+          ...response,
+          data: {
+            ...response.data,
+            components: transformedComponents
+          }
+        };
+      }
+      return response;
+    },
+    [t]
+  );
   const extractFormFields = (0, import_react62.useCallback)(
     (components) => {
       const fields = [];
       const processComponents = (comps) => {
         comps.forEach((component) => {
-          if (component.type === import_browser58.EmbeddedFlowComponentType.Input) {
+          if (component.type === import_browser59.EmbeddedFlowComponentType.Input) {
             const config = component.config || {};
             fields.push({
               name: config.name || component.id,
@@ -8500,13 +8643,14 @@ var BaseSignUpContent = ({
         inputs: filteredInputs,
         actionId: component.id
       };
-      const response = await onSubmit(payload);
+      const rawResponse = await onSubmit(payload);
+      const response = normalizeFlowResponse2(rawResponse);
       onFlowChange?.(response);
-      if (response.flowStatus === import_browser58.EmbeddedFlowStatus.Complete) {
+      if (response.flowStatus === import_browser59.EmbeddedFlowStatus.Complete) {
         onComplete?.(response);
         return;
       }
-      if (response.flowStatus === import_browser58.EmbeddedFlowStatus.Incomplete) {
+      if (response.flowStatus === import_browser59.EmbeddedFlowStatus.Incomplete) {
         if (handleRedirectionIfNeeded(response, component)) {
           return;
         }
@@ -8514,7 +8658,7 @@ var BaseSignUpContent = ({
         setupFormFields(response);
       }
     } catch (err) {
-      const errorMessage = err instanceof import_browser58.AsgardeoAPIError ? err.message : t("errors.sign.up.flow.failure");
+      const errorMessage = err instanceof import_browser59.AsgardeoAPIError ? err.message : t("errors.sign.up.flow.failure");
       setError(errorMessage);
       onError?.(err);
     } finally {
@@ -8522,7 +8666,7 @@ var BaseSignUpContent = ({
     }
   };
   const handleRedirectionIfNeeded = (response, component) => {
-    if (response?.type === import_browser58.EmbeddedFlowResponseType.Redirection && response?.data?.redirectURL) {
+    if (response?.type === import_browser59.EmbeddedFlowResponseType.Redirection && response?.data?.redirectURL) {
       const redirectUrl = response.data.redirectURL;
       const popup = window.open(redirectUrl, "oauth_popup", "width=500,height=600,scrollbars=yes,resizable=yes");
       if (!popup) {
@@ -8551,16 +8695,16 @@ var BaseSignUpContent = ({
           try {
             const continueResponse = await onSubmit(payload);
             onFlowChange?.(continueResponse);
-            if (continueResponse.flowStatus === import_browser58.EmbeddedFlowStatus.Complete) {
+            if (continueResponse.flowStatus === import_browser59.EmbeddedFlowStatus.Complete) {
               onComplete?.(continueResponse);
-            } else if (continueResponse.flowStatus === import_browser58.EmbeddedFlowStatus.Incomplete) {
+            } else if (continueResponse.flowStatus === import_browser59.EmbeddedFlowStatus.Incomplete) {
               setCurrentFlow(continueResponse);
               setupFormFields(continueResponse);
             }
             popup.close();
             cleanup();
           } catch (err) {
-            const errorMessage = err instanceof import_browser58.AsgardeoAPIError ? err.message : t("errors.sign.up.flow.failure");
+            const errorMessage = err instanceof import_browser59.AsgardeoAPIError ? err.message : t("errors.sign.up.flow.failure");
             setError(errorMessage);
             onError?.(err);
             popup.close();
@@ -8612,15 +8756,15 @@ var BaseSignUpContent = ({
                 try {
                   const continueResponse = await onSubmit(payload);
                   onFlowChange?.(continueResponse);
-                  if (continueResponse.flowStatus === import_browser58.EmbeddedFlowStatus.Complete) {
+                  if (continueResponse.flowStatus === import_browser59.EmbeddedFlowStatus.Complete) {
                     onComplete?.(continueResponse);
-                  } else if (continueResponse.flowStatus === import_browser58.EmbeddedFlowStatus.Incomplete) {
+                  } else if (continueResponse.flowStatus === import_browser59.EmbeddedFlowStatus.Incomplete) {
                     setCurrentFlow(continueResponse);
                     setupFormFields(continueResponse);
                   }
                   popup.close();
                 } catch (err) {
-                  const errorMessage = err instanceof import_browser58.AsgardeoAPIError ? err.message : t("errors.sign.up.flow.failure");
+                  const errorMessage = err instanceof import_browser59.AsgardeoAPIError ? err.message : t("errors.sign.up.flow.failure");
                   setError(errorMessage);
                   onError?.(err);
                   popup.close();
@@ -8639,30 +8783,30 @@ var BaseSignUpContent = ({
   };
   const containerClasses = (0, import_css39.cx)(
     [
-      (0, import_browser58.withVendorCSSClassPrefix)("signup"),
-      (0, import_browser58.withVendorCSSClassPrefix)(`signup--${size}`),
-      (0, import_browser58.withVendorCSSClassPrefix)(`signup--${variant}`)
+      (0, import_browser59.withVendorCSSClassPrefix)("signup"),
+      (0, import_browser59.withVendorCSSClassPrefix)(`signup--${size}`),
+      (0, import_browser59.withVendorCSSClassPrefix)(`signup--${variant}`)
     ],
     className
   );
   const inputClasses = (0, import_css39.cx)(
     [
-      (0, import_browser58.withVendorCSSClassPrefix)("signup__input"),
-      size === "small" && (0, import_browser58.withVendorCSSClassPrefix)("signup__input--small"),
-      size === "large" && (0, import_browser58.withVendorCSSClassPrefix)("signup__input--large")
+      (0, import_browser59.withVendorCSSClassPrefix)("signup__input"),
+      size === "small" && (0, import_browser59.withVendorCSSClassPrefix)("signup__input--small"),
+      size === "large" && (0, import_browser59.withVendorCSSClassPrefix)("signup__input--large")
     ],
     inputClassName
   );
   const buttonClasses = (0, import_css39.cx)(
     [
-      (0, import_browser58.withVendorCSSClassPrefix)("signup__button"),
-      size === "small" && (0, import_browser58.withVendorCSSClassPrefix)("signup__button--small"),
-      size === "large" && (0, import_browser58.withVendorCSSClassPrefix)("signup__button--large")
+      (0, import_browser59.withVendorCSSClassPrefix)("signup__button"),
+      size === "small" && (0, import_browser59.withVendorCSSClassPrefix)("signup__button--small"),
+      size === "large" && (0, import_browser59.withVendorCSSClassPrefix)("signup__button--large")
     ],
     buttonClassName
   );
-  const errorClasses = (0, import_css39.cx)([(0, import_browser58.withVendorCSSClassPrefix)("signup__error")], errorClassName);
-  const messageClasses = (0, import_css39.cx)([(0, import_browser58.withVendorCSSClassPrefix)("signup__messages")], messageClassName);
+  const errorClasses = (0, import_css39.cx)([(0, import_browser59.withVendorCSSClassPrefix)("signup__error")], errorClassName);
+  const messageClasses = (0, import_css39.cx)([(0, import_browser59.withVendorCSSClassPrefix)("signup__messages")], messageClassName);
   const renderComponents = (0, import_react62.useCallback)(
     (components) => renderSignUpComponents(
       components,
@@ -8702,15 +8846,16 @@ var BaseSignUpContent = ({
         setIsLoading(true);
         setError(null);
         try {
-          const response = await onInitialize();
+          const rawResponse = await onInitialize();
+          const response = normalizeFlowResponse2(rawResponse);
           setCurrentFlow(response);
           setIsFlowInitialized(true);
           onFlowChange?.(response);
-          if (response.flowStatus === import_browser58.EmbeddedFlowStatus.Complete) {
+          if (response.flowStatus === import_browser59.EmbeddedFlowStatus.Complete) {
             onComplete?.(response);
             return;
           }
-          if (response.flowStatus === import_browser58.EmbeddedFlowStatus.Incomplete) {
+          if (response.flowStatus === import_browser59.EmbeddedFlowStatus.Incomplete) {
             setupFormFields(response);
           }
         } catch (err) {
@@ -8730,9 +8875,28 @@ var BaseSignUpContent = ({
     onError,
     onFlowChange,
     setupFormFields,
+    normalizeFlowResponse2,
     afterSignUpUrl,
     t
   ]);
+  if (children) {
+    const renderProps = {
+      values: formValues,
+      errors: formErrors,
+      touched: touchedFields,
+      isValid: isFormValid,
+      isLoading,
+      error,
+      components: currentFlow?.data?.components || [],
+      handleInputChange,
+      handleSubmit,
+      validateForm,
+      title: flowTitle || t("signup.title"),
+      subtitle: flowSubtitle || t("signup.subtitle"),
+      messages: flowMessages || []
+    };
+    return /* @__PURE__ */ (0, import_jsx_runtime66.jsx)("div", { className: containerClasses, children: children(renderProps) });
+  }
   if (!isFlowInitialized && isLoading) {
     return /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(Card_default, { className: (0, import_css39.cx)(containerClasses, styles.card), variant, children: /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(Card_default.Content, { children: /* @__PURE__ */ (0, import_jsx_runtime66.jsx)("div", { className: styles.loadingContainer, children: /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(Spinner_default, { size: "medium" }) }) }) });
   }
@@ -8764,7 +8928,7 @@ var BaseSignUpContent = ({
 var BaseSignUp_default = BaseSignUp;
 
 // src/components/presentation/SignUp/SignUp.tsx
-var import_browser59 = require("@asgardeo/browser");
+var import_browser60 = require("@asgardeo/browser");
 var import_jsx_runtime67 = require("react/jsx-runtime");
 var SignUp = ({
   className,
@@ -8773,21 +8937,24 @@ var SignUp = ({
   onError,
   onComplete,
   shouldRedirectAfterSignUp = true,
+  children,
   ...rest
 }) => {
-  const { signUp, isInitialized } = useAsgardeo_default();
-  const handleInitialize = async (payload) => await signUp(
-    payload || {
-      flowType: import_browser59.EmbeddedFlowType.Registration
-    }
-  );
+  const { signUp, isInitialized, applicationId, platform } = useAsgardeo_default();
+  const handleInitialize = async (payload) => {
+    const initialPayload = payload || {
+      flowType: import_browser60.EmbeddedFlowType.Registration,
+      ...platform === import_browser60.Platform.AsgardeoV2 && applicationId && { applicationId }
+    };
+    return await signUp(initialPayload);
+  };
   const handleOnSubmit = async (payload) => await signUp(payload);
   const handleComplete = (response) => {
     onComplete?.(response);
-    if (shouldRedirectAfterSignUp && response?.type !== import_browser59.EmbeddedFlowResponseType.Redirection && afterSignUpUrl) {
+    if (shouldRedirectAfterSignUp && response?.type !== import_browser60.EmbeddedFlowResponseType.Redirection && afterSignUpUrl) {
       window.location.href = afterSignUpUrl;
     }
-    if (shouldRedirectAfterSignUp && response?.type === import_browser59.EmbeddedFlowResponseType.Redirection && response?.data?.redirectURL && !response.data.redirectURL.includes("oauth") && // Not a social provider redirect
+    if (shouldRedirectAfterSignUp && response?.type === import_browser60.EmbeddedFlowResponseType.Redirection && response?.data?.redirectURL && !response.data.redirectURL.includes("oauth") && // Not a social provider redirect
     !response.data.redirectURL.includes("auth")) {
       window.location.href = response.data.redirectURL;
     }
@@ -8803,6 +8970,7 @@ var SignUp = ({
       className,
       size,
       isInitialized,
+      children,
       ...rest
     }
   );
@@ -8850,35 +9018,35 @@ Organization5.displayName = "Organization";
 var Organization_default = Organization5;
 
 // src/components/presentation/UserProfile/BaseUserProfile.tsx
-var import_browser65 = require("@asgardeo/browser");
+var import_browser66 = require("@asgardeo/browser");
 var import_css47 = require("@emotion/css");
 var import_react71 = require("react");
 
 // src/utils/getMappedUserProfileValue.ts
-var import_browser60 = require("@asgardeo/browser");
+var import_browser61 = require("@asgardeo/browser");
 var getMappedUserProfileValue = (key, mappings, user) => {
   if (!key || !mappings || !user) {
     return void 0;
   }
   const mapping = mappings[key];
   if (!mapping) {
-    return (0, import_browser60.get)(user, key);
+    return (0, import_browser61.get)(user, key);
   }
   if (Array.isArray(mapping)) {
     for (const path of mapping) {
-      const value = (0, import_browser60.get)(user, path);
+      const value = (0, import_browser61.get)(user, path);
       if (value !== void 0 && value !== null && value !== "") {
         return value;
       }
     }
     return void 0;
   }
-  return (0, import_browser60.get)(user, mapping);
+  return (0, import_browser61.get)(user, mapping);
 };
 var getMappedUserProfileValue_default = getMappedUserProfileValue;
 
 // src/components/primitives/Avatar/Avatar.tsx
-var import_browser61 = require("@asgardeo/browser");
+var import_browser62 = require("@asgardeo/browser");
 var import_css41 = require("@emotion/css");
 var import_react64 = require("react");
 
@@ -8997,20 +9165,20 @@ var Avatar = ({
   const getInitials = (fullName) => fullName.split(" ").map((part) => part[0]).slice(0, 2).join("").toUpperCase();
   const renderContent = () => {
     if (imageUrl) {
-      return /* @__PURE__ */ (0, import_jsx_runtime72.jsx)("img", { src: imageUrl, alt, className: (0, import_css41.cx)((0, import_browser61.withVendorCSSClassPrefix)((0, import_browser61.bem)("avatar", "image")), styles.image) });
+      return /* @__PURE__ */ (0, import_jsx_runtime72.jsx)("img", { src: imageUrl, alt, className: (0, import_css41.cx)((0, import_browser62.withVendorCSSClassPrefix)((0, import_browser62.bem)("avatar", "image")), styles.image) });
     }
     if (name) {
       return getInitials(name);
     }
     if (isLoading) {
-      return /* @__PURE__ */ (0, import_jsx_runtime72.jsx)("div", { className: (0, import_css41.cx)((0, import_browser61.withVendorCSSClassPrefix)((0, import_browser61.bem)("avatar", "skeleton")), styles.skeleton) });
+      return /* @__PURE__ */ (0, import_jsx_runtime72.jsx)("div", { className: (0, import_css41.cx)((0, import_browser62.withVendorCSSClassPrefix)((0, import_browser62.bem)("avatar", "skeleton")), styles.skeleton) });
     }
     return /* @__PURE__ */ (0, import_jsx_runtime72.jsx)(
       "svg",
       {
         xmlns: "http://www.w3.org/2000/svg",
         viewBox: "0 0 640 640",
-        className: (0, import_css41.cx)((0, import_browser61.withVendorCSSClassPrefix)((0, import_browser61.bem)("avatar", "icon")), styles.icon),
+        className: (0, import_css41.cx)((0, import_browser62.withVendorCSSClassPrefix)((0, import_browser62.bem)("avatar", "icon")), styles.icon),
         children: /* @__PURE__ */ (0, import_jsx_runtime72.jsx)("path", { d: "M240 192C240 147.8 275.8 112 320 112C364.2 112 400 147.8 400 192C400 236.2 364.2 272 320 272C275.8 272 240 236.2 240 192zM448 192C448 121.3 390.7 64 320 64C249.3 64 192 121.3 192 192C192 262.7 249.3 320 320 320C390.7 320 448 262.7 448 192zM144 544C144 473.3 201.3 416 272 416L368 416C438.7 416 496 473.3 496 544L496 552C496 565.3 506.7 576 520 576C533.3 576 544 565.3 544 552L544 544C544 446.8 465.2 368 368 368L272 368C174.8 368 96 446.8 96 544L96 552C96 565.3 106.7 576 120 576C133.3 576 144 565.3 144 552L144 544z" })
       }
     );
@@ -9019,11 +9187,11 @@ var Avatar = ({
     "div",
     {
       className: (0, import_css41.cx)(
-        (0, import_browser61.withVendorCSSClassPrefix)((0, import_browser61.bem)("avatar")),
+        (0, import_browser62.withVendorCSSClassPrefix)((0, import_browser62.bem)("avatar")),
         styles.avatar,
         styles.variant,
-        (0, import_browser61.withVendorCSSClassPrefix)((0, import_browser61.bem)("avatar", null, variant)),
-        isDefaultState && (0, import_browser61.withVendorCSSClassPrefix)((0, import_browser61.bem)("avatar", "default")),
+        (0, import_browser62.withVendorCSSClassPrefix)((0, import_browser62.bem)("avatar", null, variant)),
+        isDefaultState && (0, import_browser62.withVendorCSSClassPrefix)((0, import_browser62.bem)("avatar", "default")),
         className
       ),
       children: renderContent()
@@ -9033,7 +9201,7 @@ var Avatar = ({
 var Avatar_default = Avatar;
 
 // src/components/primitives/Dialog/Dialog.tsx
-var import_browser62 = require("@asgardeo/browser");
+var import_browser63 = require("@asgardeo/browser");
 var import_react66 = require("@floating-ui/react");
 var import_css43 = require("@emotion/css");
 var import_react67 = __toESM(require("react"), 1);
@@ -9270,11 +9438,11 @@ var DialogContent = import_react67.default.forwardRef((props, propRef) => {
   const styles = Dialog_styles_default(theme, colorScheme);
   const ref = (0, import_react66.useMergeRefs)([context.refs.setFloating, propRef]);
   if (!floatingContext.open) return null;
-  return /* @__PURE__ */ (0, import_jsx_runtime77.jsx)(import_react66.FloatingPortal, { children: /* @__PURE__ */ (0, import_jsx_runtime77.jsx)(import_react66.FloatingOverlay, { className: (0, import_css43.cx)((0, import_browser62.withVendorCSSClassPrefix)((0, import_browser62.bem)("dialog", "overlay")), styles.overlay), lockScroll: true, children: /* @__PURE__ */ (0, import_jsx_runtime77.jsx)(import_react66.FloatingFocusManager, { context: floatingContext, initialFocus: -1, children: /* @__PURE__ */ (0, import_jsx_runtime77.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime77.jsx)(import_react66.FloatingPortal, { children: /* @__PURE__ */ (0, import_jsx_runtime77.jsx)(import_react66.FloatingOverlay, { className: (0, import_css43.cx)((0, import_browser63.withVendorCSSClassPrefix)((0, import_browser63.bem)("dialog", "overlay")), styles.overlay), lockScroll: true, children: /* @__PURE__ */ (0, import_jsx_runtime77.jsx)(import_react66.FloatingFocusManager, { context: floatingContext, initialFocus: -1, children: /* @__PURE__ */ (0, import_jsx_runtime77.jsx)(
     "div",
     {
       ref,
-      className: (0, import_css43.cx)((0, import_browser62.withVendorCSSClassPrefix)((0, import_browser62.bem)("dialog", "content")), styles.content, props.className),
+      className: (0, import_css43.cx)((0, import_browser63.withVendorCSSClassPrefix)((0, import_browser63.bem)("dialog", "content")), styles.content, props.className),
       "aria-labelledby": context.labelId,
       "aria-describedby": context.descriptionId,
       ...context.getFloatingProps(props),
@@ -9292,14 +9460,14 @@ var DialogHeading = import_react67.default.forwardRef(
       context.setLabelId(id);
       return () => context.setLabelId(void 0);
     }, [id, context.setLabelId]);
-    return /* @__PURE__ */ (0, import_jsx_runtime77.jsxs)("div", { className: (0, import_css43.cx)((0, import_browser62.withVendorCSSClassPrefix)((0, import_browser62.bem)("dialog", "header")), styles.header), children: [
+    return /* @__PURE__ */ (0, import_jsx_runtime77.jsxs)("div", { className: (0, import_css43.cx)((0, import_browser63.withVendorCSSClassPrefix)((0, import_browser63.bem)("dialog", "header")), styles.header), children: [
       /* @__PURE__ */ (0, import_jsx_runtime77.jsx)(
         "h2",
         {
           ...props,
           ref,
           id,
-          className: (0, import_css43.cx)((0, import_browser62.withVendorCSSClassPrefix)((0, import_browser62.bem)("dialog", "title")), styles.headerTitle),
+          className: (0, import_css43.cx)((0, import_browser63.withVendorCSSClassPrefix)((0, import_browser63.bem)("dialog", "title")), styles.headerTitle),
           children
         }
       ),
@@ -9334,7 +9502,7 @@ var DialogDescription = import_react67.default.forwardRef(
         ...props,
         ref,
         id,
-        className: (0, import_css43.cx)((0, import_browser62.withVendorCSSClassPrefix)((0, import_browser62.bem)("dialog", "description")), styles.description, props.className),
+        className: (0, import_css43.cx)((0, import_browser63.withVendorCSSClassPrefix)((0, import_browser63.bem)("dialog", "description")), styles.description, props.className),
         children
       }
     );
@@ -9364,7 +9532,7 @@ var DialogClose = import_react67.default.forwardRef(({ children, asChild = false
       ...props,
       ref,
       onClick: handleClick,
-      className: (0, import_css43.cx)((0, import_browser62.withVendorCSSClassPrefix)((0, import_browser62.bem)("dialog", "close")), props.className),
+      className: (0, import_css43.cx)((0, import_browser63.withVendorCSSClassPrefix)((0, import_browser63.bem)("dialog", "close")), props.className),
       variant: "text",
       children
     }
@@ -9385,7 +9553,7 @@ var Dialog_default = Dialog;
 // src/components/primitives/MultiInput/MultiInput.tsx
 var import_react69 = require("react");
 var import_css45 = require("@emotion/css");
-var import_browser63 = require("@asgardeo/browser");
+var import_browser64 = require("@asgardeo/browser");
 
 // src/components/primitives/MultiInput/MultiInput.styles.ts
 var import_css44 = require("@emotion/css");
@@ -9577,26 +9745,26 @@ var MultiInput = ({
     {
       error,
       helperText,
-      className: (0, import_css45.cx)((0, import_browser63.withVendorCSSClassPrefix)((0, import_browser63.bem)("multi-input")), className),
+      className: (0, import_css45.cx)((0, import_browser64.withVendorCSSClassPrefix)((0, import_browser64.bem)("multi-input")), className),
       style,
       children: [
         label && /* @__PURE__ */ (0, import_jsx_runtime78.jsx)(InputLabel_default, { required, error: !!error, children: label }),
-        /* @__PURE__ */ (0, import_jsx_runtime78.jsxs)("div", { className: (0, import_css45.cx)((0, import_browser63.withVendorCSSClassPrefix)((0, import_browser63.bem)("multi-input", "container")), styles.container), children: [
-          /* @__PURE__ */ (0, import_jsx_runtime78.jsx)("div", { className: (0, import_css45.cx)((0, import_browser63.withVendorCSSClassPrefix)((0, import_browser63.bem)("multi-input", "input-row")), styles.inputRow), children: /* @__PURE__ */ (0, import_jsx_runtime78.jsx)("div", { className: (0, import_css45.cx)((0, import_browser63.withVendorCSSClassPrefix)((0, import_browser63.bem)("multi-input", "input-wrapper")), styles.inputWrapper), children: renderInputField(
+        /* @__PURE__ */ (0, import_jsx_runtime78.jsxs)("div", { className: (0, import_css45.cx)((0, import_browser64.withVendorCSSClassPrefix)((0, import_browser64.bem)("multi-input", "container")), styles.container), children: [
+          /* @__PURE__ */ (0, import_jsx_runtime78.jsx)("div", { className: (0, import_css45.cx)((0, import_browser64.withVendorCSSClassPrefix)((0, import_browser64.bem)("multi-input", "input-row")), styles.inputRow), children: /* @__PURE__ */ (0, import_jsx_runtime78.jsx)("div", { className: (0, import_css45.cx)((0, import_browser64.withVendorCSSClassPrefix)((0, import_browser64.bem)("multi-input", "input-wrapper")), styles.inputWrapper), children: renderInputField(
             currentInputValue,
             setCurrentInputValue,
             canAddMore ? /* @__PURE__ */ (0, import_jsx_runtime78.jsx)(PlusIcon, { className: styles.plusIcon }) : void 0,
             canAddMore ? handleInputSubmit : void 0
           ) }) }),
-          values.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime78.jsx)("div", { className: (0, import_css45.cx)((0, import_browser63.withVendorCSSClassPrefix)((0, import_browser63.bem)("multi-input", "list-container")), styles.listContainer), children: values.map((value, index) => /* @__PURE__ */ (0, import_jsx_runtime78.jsxs)(
+          values.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime78.jsx)("div", { className: (0, import_css45.cx)((0, import_browser64.withVendorCSSClassPrefix)((0, import_browser64.bem)("multi-input", "list-container")), styles.listContainer), children: values.map((value, index) => /* @__PURE__ */ (0, import_jsx_runtime78.jsxs)(
             "div",
             {
-              className: (0, import_css45.cx)((0, import_browser63.withVendorCSSClassPrefix)((0, import_browser63.bem)("multi-input", "list-item")), styles.listItem),
+              className: (0, import_css45.cx)((0, import_browser64.withVendorCSSClassPrefix)((0, import_browser64.bem)("multi-input", "list-item")), styles.listItem),
               children: [
                 /* @__PURE__ */ (0, import_jsx_runtime78.jsx)(
                   "span",
                   {
-                    className: (0, import_css45.cx)((0, import_browser63.withVendorCSSClassPrefix)((0, import_browser63.bem)("multi-input", "list-item-text")), styles.listItemText),
+                    className: (0, import_css45.cx)((0, import_browser64.withVendorCSSClassPrefix)((0, import_browser64.bem)("multi-input", "list-item-text")), styles.listItemText),
                     children: value
                   }
                 ),
@@ -9606,7 +9774,7 @@ var MultiInput = ({
                     type: "button",
                     onClick: () => handleRemoveValue(index),
                     disabled,
-                    className: (0, import_css45.cx)((0, import_browser63.withVendorCSSClassPrefix)((0, import_browser63.bem)("multi-input", "remove-button")), styles.removeButton),
+                    className: (0, import_css45.cx)((0, import_browser64.withVendorCSSClassPrefix)((0, import_browser64.bem)("multi-input", "remove-button")), styles.removeButton),
                     title: "Remove value",
                     children: /* @__PURE__ */ (0, import_jsx_runtime78.jsx)(BinIcon, { className: styles.icon })
                   }
@@ -9625,7 +9793,7 @@ var MultiInput_default = MultiInput;
 // src/components/presentation/UserProfile/BaseUserProfile.styles.ts
 var import_css46 = require("@emotion/css");
 var import_react70 = require("react");
-var import_browser64 = require("@asgardeo/browser");
+var import_browser65 = require("@asgardeo/browser");
 var useStyles22 = (theme, colorScheme) => {
   const valuePlaceholder = import_css46.css`
     font-style: italic;
@@ -9652,7 +9820,7 @@ var useStyles22 = (theme, colorScheme) => {
     display: flex;
     gap: calc(${theme.vars.spacing.unit} / 2);
     align-items: center;
-    margin-left: calc(${theme.vars.spacing.unit} * 4);
+    margin-inline-start: calc(${theme.vars.spacing.unit} * 4);
   `;
   const complexTextarea = import_css46.css`
     min-height: 60px;
@@ -9719,7 +9887,7 @@ var useStyles22 = (theme, colorScheme) => {
       width: 120px;
       flex-shrink: 0;
       line-height: 28px;
-      text-align: left;
+      text-align: start;
     `;
     const value = import_css46.css`
       color: ${theme.vars.colors.text.primary};
@@ -9734,9 +9902,9 @@ var useStyles22 = (theme, colorScheme) => {
       text-overflow: ellipsis;
       white-space: nowrap;
       max-width: 350px;
-      text-align: left;
+      text-align: start;
 
-      .${(0, import_browser64.withVendorCSSClassPrefix)("form-control")} {
+      .${(0, import_browser65.withVendorCSSClassPrefix)("form-control")} {
         margin-bottom: 0;
       }
 
@@ -9935,7 +10103,7 @@ var BaseUserProfile = ({
         fieldValue = fieldValue.filter((v) => v !== void 0 && v !== null && v !== "");
       }
       let payload = {};
-      if (schema.schemaId && schema.schemaId !== import_browser65.WellKnownSchemaIds.User) {
+      if (schema.schemaId && schema.schemaId !== import_browser66.WellKnownSchemaIds.User) {
         payload = {
           [schema.schemaId]: {
             [fieldName]: fieldValue
@@ -10169,7 +10337,7 @@ var BaseUserProfile = ({
   const containerClasses = (0, import_css47.cx)(
     styles.root,
     cardLayout ? styles.card : "",
-    (0, import_browser65.withVendorCSSClassPrefix)("user-profile"),
+    (0, import_browser66.withVendorCSSClassPrefix)("user-profile"),
     className
   );
   const currentUser = flattenedProfile || profile;
@@ -10187,7 +10355,7 @@ var BaseUserProfile = ({
     ] }, key)) });
   };
   const profileContent = /* @__PURE__ */ (0, import_jsx_runtime79.jsxs)(Card_default, { className: containerClasses, children: [
-    error && /* @__PURE__ */ (0, import_jsx_runtime79.jsxs)(Alert_default, { variant: "error", className: (0, import_css47.cx)((0, import_browser65.withVendorCSSClassPrefix)((0, import_browser65.bem)("user-profile", "alert")), styles.alert), children: [
+    error && /* @__PURE__ */ (0, import_jsx_runtime79.jsxs)(Alert_default, { variant: "error", className: (0, import_css47.cx)((0, import_browser66.withVendorCSSClassPrefix)((0, import_browser66.bem)("user-profile", "alert")), styles.alert), children: [
       /* @__PURE__ */ (0, import_jsx_runtime79.jsx)(Alert_default.Title, { children: t("errors.title") || "Error" }),
       /* @__PURE__ */ (0, import_jsx_runtime79.jsx)(Alert_default.Description, { children: error })
     ] }),
@@ -10235,8 +10403,8 @@ var BaseUserProfile_default = BaseUserProfile;
 var import_react72 = require("react");
 
 // src/api/updateMeProfile.ts
-var import_browser66 = require("@asgardeo/browser");
-var httpClient5 = import_browser66.AsgardeoSPAClient.getInstance().httpRequest.bind(import_browser66.AsgardeoSPAClient.getInstance());
+var import_browser67 = require("@asgardeo/browser");
+var httpClient5 = import_browser67.AsgardeoSPAClient.getInstance().httpRequest.bind(import_browser67.AsgardeoSPAClient.getInstance());
 var updateMeProfile = async ({ fetcher, ...requestConfig }) => {
   const defaultFetcher = async (url, config) => {
     const response = await httpClient5({
@@ -10253,7 +10421,7 @@ var updateMeProfile = async ({ fetcher, ...requestConfig }) => {
       text: () => Promise.resolve(typeof response.data === "string" ? response.data : JSON.stringify(response.data))
     };
   };
-  return (0, import_browser66.updateMeProfile)({
+  return (0, import_browser67.updateMeProfile)({
     ...requestConfig,
     fetcher: fetcher || defaultFetcher
   });
@@ -10261,7 +10429,7 @@ var updateMeProfile = async ({ fetcher, ...requestConfig }) => {
 var updateMeProfile_default = updateMeProfile;
 
 // src/components/presentation/UserProfile/UserProfile.tsx
-var import_browser67 = require("@asgardeo/browser");
+var import_browser68 = require("@asgardeo/browser");
 var import_jsx_runtime80 = require("react/jsx-runtime");
 var UserProfile3 = ({ ...rest }) => {
   const { baseUrl, isLoading } = useAsgardeo_default();
@@ -10275,7 +10443,7 @@ var UserProfile3 = ({ ...rest }) => {
       onUpdateProfile(response);
     } catch (error2) {
       let message = t("user.profile.update.generic.error");
-      if (error2 instanceof import_browser67.AsgardeoError) {
+      if (error2 instanceof import_browser68.AsgardeoError) {
         message = error2?.message;
       }
       setError(message);
@@ -10296,7 +10464,7 @@ var UserProfile3 = ({ ...rest }) => {
 var UserProfile_default = UserProfile3;
 
 // src/components/presentation/UserDropdown/BaseUserDropdown.tsx
-var import_browser68 = require("@asgardeo/browser");
+var import_browser69 = require("@asgardeo/browser");
 var import_react74 = require("@floating-ui/react");
 var import_css49 = require("@emotion/css");
 var import_react75 = require("react");
@@ -10369,7 +10537,7 @@ var useStyles23 = (theme, colorScheme) => {
       border: none;
       cursor: pointer;
       font-size: 0.875rem;
-      text-align: left;
+      text-align: start;
       border-radius: ${theme.vars.borderRadius.medium};
       transition: none;
       box-shadow: none;
@@ -10398,7 +10566,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;
 
@@ -10557,12 +10725,12 @@ var BaseUserDropdown = ({
     }
     allMenuItems.push(...defaultMenuItems);
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime81.jsxs)("div", { className: (0, import_css49.cx)((0, import_browser68.withVendorCSSClassPrefix)("user-dropdown"), className), children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime81.jsxs)("div", { className: (0, import_css49.cx)((0, import_browser69.withVendorCSSClassPrefix)("user-dropdown"), className), children: [
     /* @__PURE__ */ (0, import_jsx_runtime81.jsxs)(
       Button_default,
       {
         ref: refs.setReference,
-        className: (0, import_css49.cx)((0, import_browser68.withVendorCSSClassPrefix)("user-dropdown__trigger"), styles.trigger),
+        className: (0, import_css49.cx)((0, import_browser69.withVendorCSSClassPrefix)("user-dropdown__trigger"), styles.trigger),
         color: "tertiary",
         variant: "text",
         size: "medium",
@@ -10581,7 +10749,7 @@ var BaseUserDropdown = ({
             Typography_default,
             {
               variant: "body2",
-              className: (0, import_css49.cx)((0, import_browser68.withVendorCSSClassPrefix)("user-dropdown__trigger-label"), styles.userName),
+              className: (0, import_css49.cx)((0, import_browser69.withVendorCSSClassPrefix)("user-dropdown__trigger-label"), styles.userName),
               children: getDisplayName_default(mergedMappings, user)
             }
           )
@@ -10592,7 +10760,7 @@ var BaseUserDropdown = ({
       "div",
       {
         ref: refs.setFloating,
-        className: (0, import_css49.cx)((0, import_browser68.withVendorCSSClassPrefix)("user-dropdown__content"), styles.dropdownContent),
+        className: (0, import_css49.cx)((0, import_browser69.withVendorCSSClassPrefix)("user-dropdown__content"), styles.dropdownContent),
         style: {
           ...floatingStyles,
           // Floating UI doesn't set a z-index by default, so we set a high value to ensure the dropdown appears above other elements.
@@ -10601,7 +10769,7 @@ var BaseUserDropdown = ({
         },
         ...getFloatingProps(),
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime81.jsxs)("div", { className: (0, import_css49.cx)((0, import_browser68.withVendorCSSClassPrefix)("user-dropdown__header"), styles.dropdownHeader), children: [
+          /* @__PURE__ */ (0, import_jsx_runtime81.jsxs)("div", { className: (0, import_css49.cx)((0, import_browser69.withVendorCSSClassPrefix)("user-dropdown__header"), styles.dropdownHeader), children: [
             /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(
               Avatar,
               {
@@ -10611,12 +10779,12 @@ var BaseUserDropdown = ({
                 alt: `${getDisplayName_default(mergedMappings, user)}'s avatar`
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime81.jsxs)("div", { className: (0, import_css49.cx)((0, import_browser68.withVendorCSSClassPrefix)("user-dropdown__header-info"), styles.headerInfo), children: [
+            /* @__PURE__ */ (0, import_jsx_runtime81.jsxs)("div", { className: (0, import_css49.cx)((0, import_browser69.withVendorCSSClassPrefix)("user-dropdown__header-info"), styles.headerInfo), children: [
               /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(
                 Typography_default,
                 {
                   noWrap: true,
-                  className: (0, import_browser68.withVendorCSSClassPrefix)("user-dropdown__header-name"),
+                  className: (0, import_browser69.withVendorCSSClassPrefix)("user-dropdown__header-name"),
                   variant: "body1",
                   fontWeight: "medium",
                   children: getDisplayName_default(mergedMappings, user)
@@ -10626,7 +10794,7 @@ var BaseUserDropdown = ({
                 Typography_default,
                 {
                   noWrap: true,
-                  className: (0, import_browser68.withVendorCSSClassPrefix)("user-dropdown__header-email"),
+                  className: (0, import_browser69.withVendorCSSClassPrefix)("user-dropdown__header-email"),
                   variant: "caption",
                   color: "secondary",
                   children: getMappedUserProfileValue_default("username", mergedMappings, user) || getMappedUserProfileValue_default("email", mergedMappings, user)
@@ -10634,14 +10802,14 @@ var BaseUserDropdown = ({
               )
             ] })
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime81.jsx)("div", { className: (0, import_css49.cx)((0, import_browser68.withVendorCSSClassPrefix)("user-dropdown__menu"), styles.dropdownMenu), children: allMenuItems.map((item, index) => /* @__PURE__ */ (0, import_jsx_runtime81.jsx)("div", { children: item.label === "" ? /* @__PURE__ */ (0, import_jsx_runtime81.jsx)("div", { className: (0, import_css49.cx)((0, import_browser68.withVendorCSSClassPrefix)("user-dropdown__menu-divider"), styles.divider) }) : item.href ? /* @__PURE__ */ (0, import_jsx_runtime81.jsxs)(
+          /* @__PURE__ */ (0, import_jsx_runtime81.jsx)("div", { className: (0, import_css49.cx)((0, import_browser69.withVendorCSSClassPrefix)("user-dropdown__menu"), styles.dropdownMenu), children: allMenuItems.map((item, index) => /* @__PURE__ */ (0, import_jsx_runtime81.jsx)("div", { children: item.label === "" ? /* @__PURE__ */ (0, import_jsx_runtime81.jsx)("div", { className: (0, import_css49.cx)((0, import_browser69.withVendorCSSClassPrefix)("user-dropdown__menu-divider"), styles.divider) }) : item.href ? /* @__PURE__ */ (0, import_jsx_runtime81.jsxs)(
             "a",
             {
               href: item.href,
               style: {
                 backgroundColor: hoveredItemIndex === index ? theme.vars.colors.action?.hover : "transparent"
               },
-              className: (0, import_css49.cx)((0, import_browser68.withVendorCSSClassPrefix)("user-dropdown__menu-item"), styles.menuItemAnchor),
+              className: (0, import_css49.cx)((0, import_browser69.withVendorCSSClassPrefix)("user-dropdown__menu-item"), styles.menuItemAnchor),
               onMouseEnter: () => setHoveredItemIndex(index),
               onMouseLeave: () => setHoveredItemIndex(null),
               onFocus: () => setHoveredItemIndex(index),
@@ -10658,7 +10826,7 @@ var BaseUserDropdown = ({
               style: {
                 backgroundColor: hoveredItemIndex === index ? theme.vars.colors.action?.hover : "transparent"
               },
-              className: (0, import_css49.cx)((0, import_browser68.withVendorCSSClassPrefix)("user-dropdown__menu-item"), styles.menuItem),
+              className: (0, import_css49.cx)((0, import_browser69.withVendorCSSClassPrefix)("user-dropdown__menu-item"), styles.menuItem),
               color: "tertiary",
               variant: "text",
               size: "small",
@@ -10871,7 +11039,7 @@ var useStyles24 = (theme, colorScheme) => {
     `;
     const manageButton = import_css50.css`
       min-width: auto;
-      margin-left: auto;
+      margin-inline-start: auto;
     `;
     const menu = import_css50.css`
       display: flex;
@@ -10891,7 +11059,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;
 
@@ -11029,11 +11197,12 @@ var BaseOrganizationSwitcher = ({
   avatarSize = 24,
   fallback = null
 }) => {
-  const { theme, colorScheme } = useTheme_default();
+  const { theme, colorScheme, direction } = useTheme_default();
   const styles = BaseOrganizationSwitcher_styles_default(theme, colorScheme);
   const [isOpen, setIsOpen] = (0, import_react79.useState)(false);
   const [hoveredItemIndex, setHoveredItemIndex] = (0, import_react79.useState)(null);
   const { t } = useTranslation_default();
+  const isRTL = direction === "rtl";
   const { refs, floatingStyles, context } = (0, import_react78.useFloating)({
     open: isOpen,
     onOpenChange: setIsOpen,
@@ -11115,7 +11284,7 @@ var BaseOrganizationSwitcher = ({
             /* @__PURE__ */ (0, import_jsx_runtime86.jsx)(Building_default, { width: avatarSize, height: avatarSize }),
             showTriggerLabel && /* @__PURE__ */ (0, import_jsx_runtime86.jsx)(Typography_default, { variant: "body2", className: (0, import_css51.cx)(styles.triggerLabel), children: t("organization.switcher.select.organization") })
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime86.jsx)(ChevronDown_default, { width: "16", height: "16" })
+          /* @__PURE__ */ (0, import_jsx_runtime86.jsx)("span", { style: { transform: isRTL ? "scaleX(-1)" : "none", display: "inline-flex" }, children: /* @__PURE__ */ (0, import_jsx_runtime86.jsx)(ChevronDown_default, { width: "16", height: "16" }) })
         ]
       }
     ),
@@ -11560,8 +11729,8 @@ var BaseCreateOrganization = ({
 };
 
 // src/api/createOrganization.ts
-var import_browser69 = require("@asgardeo/browser");
-var httpClient6 = import_browser69.AsgardeoSPAClient.getInstance().httpRequest.bind(import_browser69.AsgardeoSPAClient.getInstance());
+var import_browser70 = require("@asgardeo/browser");
+var httpClient6 = import_browser70.AsgardeoSPAClient.getInstance().httpRequest.bind(import_browser70.AsgardeoSPAClient.getInstance());
 var createOrganization = async ({ fetcher, ...requestConfig }) => {
   const defaultFetcher = async (url, config) => {
     const response = await httpClient6({
@@ -11578,7 +11747,7 @@ var createOrganization = async ({ fetcher, ...requestConfig }) => {
       text: () => Promise.resolve(typeof response.data === "string" ? response.data : JSON.stringify(response.data))
     };
   };
-  return (0, import_browser69.createOrganization)({
+  return (0, import_browser70.createOrganization)({
     ...requestConfig,
     fetcher: fetcher || defaultFetcher
   });
@@ -11653,12 +11822,12 @@ var CreateOrganization = ({
 var import_react87 = require("react");
 
 // src/components/presentation/OrganizationProfile/BaseOrganizationProfile.tsx
-var import_browser71 = require("@asgardeo/browser");
+var import_browser72 = require("@asgardeo/browser");
 var import_css57 = require("@emotion/css");
 var import_react86 = require("react");
 
 // src/components/primitives/KeyValueInput/KeyValueInput.tsx
-var import_browser70 = require("@asgardeo/browser");
+var import_browser71 = require("@asgardeo/browser");
 var import_css55 = require("@emotion/css");
 var import_react84 = require("react");
 
@@ -11893,27 +12062,27 @@ var KeyValueInput = ({
   );
   const canAddMore = !maxPairs || pairs.length < maxPairs;
   const isAddDisabled = disabled || readOnly || !canAddMore || !newKey.trim() || !newValue.trim();
-  return /* @__PURE__ */ (0, import_jsx_runtime89.jsxs)("div", { className: (0, import_css55.cx)((0, import_browser70.withVendorCSSClassPrefix)((0, import_browser70.bem)("key-value-input")), styles.container, className), children: [
-    label && /* @__PURE__ */ (0, import_jsx_runtime89.jsxs)("label", { className: (0, import_css55.cx)((0, import_browser70.withVendorCSSClassPrefix)((0, import_browser70.bem)("key-value-input", "label")), styles.label), children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime89.jsxs)("div", { className: (0, import_css55.cx)((0, import_browser71.withVendorCSSClassPrefix)((0, import_browser71.bem)("key-value-input")), styles.container, className), children: [
+    label && /* @__PURE__ */ (0, import_jsx_runtime89.jsxs)("label", { className: (0, import_css55.cx)((0, import_browser71.withVendorCSSClassPrefix)((0, import_browser71.bem)("key-value-input", "label")), styles.label), children: [
       label,
       required && /* @__PURE__ */ (0, import_jsx_runtime89.jsx)(
         "span",
         {
-          className: (0, import_css55.cx)((0, import_browser70.withVendorCSSClassPrefix)((0, import_browser70.bem)("key-value-input", "required")), styles.requiredIndicator),
+          className: (0, import_css55.cx)((0, import_browser71.withVendorCSSClassPrefix)((0, import_browser71.bem)("key-value-input", "required")), styles.requiredIndicator),
           children: " *"
         }
       )
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime89.jsxs)("div", { className: (0, import_css55.cx)((0, import_browser70.withVendorCSSClassPrefix)((0, import_browser70.bem)("key-value-input", "pairs-list")), styles.pairsList), children: [
-      pairs.length === 0 && readOnly ? /* @__PURE__ */ (0, import_jsx_runtime89.jsx)("div", { className: (0, import_css55.cx)((0, import_browser70.withVendorCSSClassPrefix)((0, import_browser70.bem)("key-value-input", "empty-state")), styles.emptyState), children: "No attributes defined" }) : readOnly ? pairs.map((pair, index) => /* @__PURE__ */ (0, import_jsx_runtime89.jsxs)(
+    /* @__PURE__ */ (0, import_jsx_runtime89.jsxs)("div", { className: (0, import_css55.cx)((0, import_browser71.withVendorCSSClassPrefix)((0, import_browser71.bem)("key-value-input", "pairs-list")), styles.pairsList), children: [
+      pairs.length === 0 && readOnly ? /* @__PURE__ */ (0, import_jsx_runtime89.jsx)("div", { className: (0, import_css55.cx)((0, import_browser71.withVendorCSSClassPrefix)((0, import_browser71.bem)("key-value-input", "empty-state")), styles.emptyState), children: "No attributes defined" }) : readOnly ? pairs.map((pair, index) => /* @__PURE__ */ (0, import_jsx_runtime89.jsxs)(
         "div",
         {
-          className: (0, import_css55.cx)((0, import_browser70.withVendorCSSClassPrefix)((0, import_browser70.bem)("key-value-input", "readonly-pair")), styles.readOnlyPair),
+          className: (0, import_css55.cx)((0, import_browser71.withVendorCSSClassPrefix)((0, import_browser71.bem)("key-value-input", "readonly-pair")), styles.readOnlyPair),
           children: [
             /* @__PURE__ */ (0, import_jsx_runtime89.jsxs)(
               "span",
               {
-                className: (0, import_css55.cx)((0, import_browser70.withVendorCSSClassPrefix)((0, import_browser70.bem)("key-value-input", "readonly-key")), styles.readOnlyKey),
+                className: (0, import_css55.cx)((0, import_browser71.withVendorCSSClassPrefix)((0, import_browser71.bem)("key-value-input", "readonly-key")), styles.readOnlyKey),
                 children: [
                   pair.key,
                   ":"
@@ -11923,7 +12092,7 @@ var KeyValueInput = ({
             /* @__PURE__ */ (0, import_jsx_runtime89.jsx)(
               "span",
               {
-                className: (0, import_css55.cx)((0, import_browser70.withVendorCSSClassPrefix)((0, import_browser70.bem)("key-value-input", "readonly-value")), styles.readOnlyValue),
+                className: (0, import_css55.cx)((0, import_browser71.withVendorCSSClassPrefix)((0, import_browser71.bem)("key-value-input", "readonly-value")), styles.readOnlyValue),
                 children: pair.value
               }
             )
@@ -11933,7 +12102,7 @@ var KeyValueInput = ({
       )) : pairs.map((pair, index) => /* @__PURE__ */ (0, import_jsx_runtime89.jsxs)(
         "div",
         {
-          className: (0, import_css55.cx)((0, import_browser70.withVendorCSSClassPrefix)((0, import_browser70.bem)("key-value-input", "pair-row")), styles.pairRow),
+          className: (0, import_css55.cx)((0, import_browser71.withVendorCSSClassPrefix)((0, import_browser71.bem)("key-value-input", "pair-row")), styles.pairRow),
           children: [
             /* @__PURE__ */ (0, import_jsx_runtime89.jsx)(
               TextField_default,
@@ -11942,7 +12111,7 @@ var KeyValueInput = ({
                 value: pair.key,
                 onChange: (e) => handleUpdatePair(index, "key", e.target.value),
                 disabled: disabled || readOnly,
-                className: (0, import_css55.cx)((0, import_browser70.withVendorCSSClassPrefix)((0, import_browser70.bem)("key-value-input", "pair-input")), styles.pairInput),
+                className: (0, import_css55.cx)((0, import_browser71.withVendorCSSClassPrefix)((0, import_browser71.bem)("key-value-input", "pair-input")), styles.pairInput),
                 "aria-label": `${keyLabel} ${index + 1}`
               }
             ),
@@ -11953,7 +12122,7 @@ var KeyValueInput = ({
                 value: pair.value,
                 onChange: (e) => handleUpdatePair(index, "value", e.target.value),
                 disabled: disabled || readOnly,
-                className: (0, import_css55.cx)((0, import_browser70.withVendorCSSClassPrefix)((0, import_browser70.bem)("key-value-input", "pair-input")), styles.pairInput),
+                className: (0, import_css55.cx)((0, import_browser71.withVendorCSSClassPrefix)((0, import_browser71.bem)("key-value-input", "pair-input")), styles.pairInput),
                 "aria-label": `${valueLabel} ${index + 1}`
               }
             ),
@@ -11963,7 +12132,7 @@ var KeyValueInput = ({
                 type: "button",
                 onClick: () => handleRemovePair(index),
                 disabled,
-                className: (0, import_css55.cx)((0, import_browser70.withVendorCSSClassPrefix)((0, import_browser70.bem)("key-value-input", "remove-button")), styles.removeButton),
+                className: (0, import_css55.cx)((0, import_browser71.withVendorCSSClassPrefix)((0, import_browser71.bem)("key-value-input", "remove-button")), styles.removeButton),
                 "aria-label": `${removeButtonText} ${pair.key}`,
                 children: /* @__PURE__ */ (0, import_jsx_runtime89.jsx)(X_default, { width: 16, height: 16 })
               }
@@ -11972,7 +12141,7 @@ var KeyValueInput = ({
         },
         `${pair.key}-${index}`
       )),
-      !readOnly && /* @__PURE__ */ (0, import_jsx_runtime89.jsxs)("div", { className: (0, import_css55.cx)((0, import_browser70.withVendorCSSClassPrefix)((0, import_browser70.bem)("key-value-input", "add-row")), styles.addRow), children: [
+      !readOnly && /* @__PURE__ */ (0, import_jsx_runtime89.jsxs)("div", { className: (0, import_css55.cx)((0, import_browser71.withVendorCSSClassPrefix)((0, import_browser71.bem)("key-value-input", "add-row")), styles.addRow), children: [
         /* @__PURE__ */ (0, import_jsx_runtime89.jsx)(
           TextField_default,
           {
@@ -11980,7 +12149,7 @@ var KeyValueInput = ({
             value: newKey,
             onChange: (e) => setNewKey(e.target.value),
             disabled,
-            className: (0, import_css55.cx)((0, import_browser70.withVendorCSSClassPrefix)((0, import_browser70.bem)("key-value-input", "pair-input")), styles.pairInput),
+            className: (0, import_css55.cx)((0, import_browser71.withVendorCSSClassPrefix)((0, import_browser71.bem)("key-value-input", "pair-input")), styles.pairInput),
             "aria-label": "New key"
           }
         ),
@@ -11991,7 +12160,7 @@ var KeyValueInput = ({
             value: newValue,
             onChange: (e) => setNewValue(e.target.value),
             disabled,
-            className: (0, import_css55.cx)((0, import_browser70.withVendorCSSClassPrefix)((0, import_browser70.bem)("key-value-input", "pair-input")), styles.pairInput),
+            className: (0, import_css55.cx)((0, import_browser71.withVendorCSSClassPrefix)((0, import_browser71.bem)("key-value-input", "pair-input")), styles.pairInput),
             "aria-label": "New value",
             onKeyPress: (e) => {
               if (e.key === "Enter" && !isAddDisabled) {
@@ -12006,15 +12175,15 @@ var KeyValueInput = ({
             type: "button",
             onClick: handleAddPair,
             disabled: isAddDisabled,
-            className: (0, import_css55.cx)((0, import_browser70.withVendorCSSClassPrefix)((0, import_browser70.bem)("key-value-input", "add-button")), styles.addButton),
+            className: (0, import_css55.cx)((0, import_browser71.withVendorCSSClassPrefix)((0, import_browser71.bem)("key-value-input", "add-button")), styles.addButton),
             "aria-label": "Add new key-value pair",
             children: /* @__PURE__ */ (0, import_jsx_runtime89.jsx)(Plus_default, { width: 16, height: 16 })
           }
         )
       ] })
     ] }),
-    (helperText || error) && /* @__PURE__ */ (0, import_jsx_runtime89.jsx)("div", { className: (0, import_css55.cx)((0, import_browser70.withVendorCSSClassPrefix)((0, import_browser70.bem)("key-value-input", "helper-text")), styles.helperText), children: error || helperText }),
-    maxPairs && /* @__PURE__ */ (0, import_jsx_runtime89.jsxs)("div", { className: (0, import_css55.cx)((0, import_browser70.withVendorCSSClassPrefix)((0, import_browser70.bem)("key-value-input", "counter")), styles.counterText), children: [
+    (helperText || error) && /* @__PURE__ */ (0, import_jsx_runtime89.jsx)("div", { className: (0, import_css55.cx)((0, import_browser71.withVendorCSSClassPrefix)((0, import_browser71.bem)("key-value-input", "helper-text")), styles.helperText), children: error || helperText }),
+    maxPairs && /* @__PURE__ */ (0, import_jsx_runtime89.jsxs)("div", { className: (0, import_css55.cx)((0, import_browser71.withVendorCSSClassPrefix)((0, import_browser71.bem)("key-value-input", "counter")), styles.counterText), children: [
       pairs.length,
       " of ",
       maxPairs,
@@ -12218,13 +12387,13 @@ var BaseOrganizationProfile = ({
       key: "created",
       label: "Created Date",
       editable: false,
-      render: (value) => (0, import_browser71.formatDate)(value)
+      render: (value) => (0, import_browser72.formatDate)(value)
     },
     {
       key: "lastModified",
       label: "Last Modified Date",
       editable: false,
-      render: (value) => (0, import_browser71.formatDate)(value)
+      render: (value) => (0, import_browser72.formatDate)(value)
     }
   ]
 }) => {
@@ -12461,8 +12630,8 @@ var BaseOrganizationProfile = ({
 var BaseOrganizationProfile_default = BaseOrganizationProfile;
 
 // src/api/getOrganization.ts
-var import_browser72 = require("@asgardeo/browser");
-var httpClient7 = import_browser72.AsgardeoSPAClient.getInstance().httpRequest.bind(import_browser72.AsgardeoSPAClient.getInstance());
+var import_browser73 = require("@asgardeo/browser");
+var httpClient7 = import_browser73.AsgardeoSPAClient.getInstance().httpRequest.bind(import_browser73.AsgardeoSPAClient.getInstance());
 var getOrganization = async ({ fetcher, ...requestConfig }) => {
   const defaultFetcher = async (url, config) => {
     const response = await httpClient7({
@@ -12478,7 +12647,7 @@ var getOrganization = async ({ fetcher, ...requestConfig }) => {
       text: () => Promise.resolve(typeof response.data === "string" ? response.data : JSON.stringify(response.data))
     };
   };
-  return (0, import_browser72.getOrganization)({
+  return (0, import_browser73.getOrganization)({
     ...requestConfig,
     fetcher: fetcher || defaultFetcher
   });
@@ -12486,8 +12655,8 @@ var getOrganization = async ({ fetcher, ...requestConfig }) => {
 var getOrganization_default = getOrganization;
 
 // src/api/updateOrganization.ts
-var import_browser73 = require("@asgardeo/browser");
-var httpClient8 = import_browser73.AsgardeoSPAClient.getInstance().httpRequest.bind(import_browser73.AsgardeoSPAClient.getInstance());
+var import_browser74 = require("@asgardeo/browser");
+var httpClient8 = import_browser74.AsgardeoSPAClient.getInstance().httpRequest.bind(import_browser74.AsgardeoSPAClient.getInstance());
 var updateOrganization = async ({
   fetcher,
   ...requestConfig
@@ -12507,7 +12676,7 @@ var updateOrganization = async ({
       text: () => Promise.resolve(typeof response.data === "string" ? response.data : JSON.stringify(response.data))
     };
   };
-  return (0, import_browser73.updateOrganization)({
+  return (0, import_browser74.updateOrganization)({
     ...requestConfig,
     fetcher: fetcher || defaultFetcher
   });
@@ -12560,7 +12729,7 @@ var OrganizationProfile = ({
   const handleOrganizationUpdate = async (payload) => {
     if (!baseUrl || !organizationId) return;
     try {
-      const operations = (0, import_browser73.createPatchOperations)(payload);
+      const operations = (0, import_browser74.createPatchOperations)(payload);
       await updateOrganization_default({
         baseUrl,
         organizationId,
@@ -12997,10 +13166,7 @@ var useStyles29 = (theme, colorScheme) => {
 
       &__loading-overlay {
         position: absolute;
-        top: 0;
-        left: 0;
-        right: 0;
-        bottom: 0;
+        inset: 0;
         background-color: color-mix(in srgb, ${theme.vars.colors.background.surface} 80%, transparent);
         display: flex;
         align-items: center;
@@ -13025,10 +13191,7 @@ var useStyles29 = (theme, colorScheme) => {
       `,
       loadingOverlay: import_css60.css`
         position: absolute;
-        top: 0;
-        left: 0;
-        right: 0;
-        bottom: 0;
+        inset: 0;
         background-color: color-mix(in srgb, ${theme.vars.colors.background.surface} 80%, transparent);
         display: flex;
         align-items: center;
@@ -13216,5 +13379,5 @@ var OrganizationSwitcher = ({
 var OrganizationSwitcher_default = OrganizationSwitcher;
 
 // src/index.ts
-var import_browser74 = require("@asgardeo/browser");
+var import_browser75 = require("@asgardeo/browser");
 //# sourceMappingURL=index.js.map